Update templates/index.html

templates/index.html

@@ -5,24 +5,49 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>News Feed Hub</title>
     <style>
-        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; color: #333; }
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 20px; background-color: #f5f5f5; color: #333; }
         h1 { text-align: center; color: #2c3e50; }
         .search-container { text-align: center; margin: 20px 0; }
-        .search-bar { width: 50%; padding: 10px; border: 2px solid #3498db; border-radius: 25px; margin-right: 10px; }
+        .search-bar { width: 50%; padding: 10px; border: 2px solid #3498db; border-radius: 25px; margin-right: 10px; font-size: 1em; }
         .search-button { padding: 10px 20px; border: none; border-radius: 25px; background-color: #3498db; color: white; cursor: pointer; font-size: 1em; }
         .search-button:hover { background-color: #2980b9; }
         .category-section { margin: 20px 0; }
-        .category-title { background-color: #3498db; color: white; padding: 10px; border-radius: 5px; cursor: pointer; }
-        .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
-        .article-tile { background: white; height: 350px; overflow-y: clip; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
-        .article-tile img, .article-tile svg { width: 100%; height: 150px; object-fit: cover; border-radius: 5px; }
-        .title a { font-size: 1.3em; color: #2c3e50; text-decoration: none; font-weight: 600; text-transform: capitalize; }
+        .category-title { background-color: #3498db; color: white; padding: 10px; border-radius: 5px; cursor: pointer; user-select: none; }
+        .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 15px; }
+        .article-tile {
+            background: white;
+            height: 380px;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .article-tile img, .article-tile svg {
+            width: 100%;
+            height: 150px;
+            object-fit: cover;
+            border-radius: 5px;
+            flex-shrink: 0;
+        }
+        .title { margin-top: 10px; }
+        .title a { font-size: 1.2em; color: #2c3e50; text-decoration: none; font-weight: 600; }
         .title a:hover { color: #3498db; }
-        .description { color: #555; font-size: 0.9em; height: 150px; overflow-y: clip; }
-        .published { font-size: 0.8em; color: #95a5a6; }
+        .description {
+            color: #555;
+            font-size: 0.9em;
+            flex-grow: 1;
+            overflow-y: auto;
+            margin-top: 8px;
+            word-wrap: break-word;
+        }
+        .description p { margin: 0 0 0.5em 0; }
+        .description a { color: #3498db; }
+        .published { font-size: 0.8em; color: #95a5a6; margin-top: 8px; flex-shrink: 0; }
         .no-articles { text-align: center; color: #2c3e50; margin-top: 20px; }
         .loading-container { text-align: center; margin: 10px 0; }
-        .loading-spinner { display: inline-block; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
+        .loading-spinner { display: inline-block; vertical-align: middle; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
@@ -30,29 +55,27 @@
     <h1>News Feed Hub</h1>
     <div class="search-container">
       <form method="POST" action="/search" id="searchForm">
-          <input type="text" name="search" class="search-bar" placeholder="Search news...">
+          <input type="text" name="search" class="search-bar" placeholder="Search semantically...">
           <button type="submit" class="search-button">Search</button>
       </form>
-      <button id="backButton" style="display: none; margin-top: 10px;">Back to Main</button>
+      <button id="backButton" style="display: none; margin-top: 10px;" class="search-button">Back to Main</button>
     </div>
     {% if loading %}
         <div class="loading-container" id="loadingContainer">
-            <span class="loading-spinner"></span>
+            <div class="loading-spinner"></div>
         </div>
     {% endif %}
-    {% if has_articles %}
-        <div id="articlesContainer">
+
+    <div id="contentContainer">
+        {% if has_articles %}
             {% for category, articles in categorized_articles.items() %}
             <div class="category-section">
                 <div class="category-title" onclick="toggleCategory('{{ category }}')">{{ category }} <span class="loading-spinner" id="spinner-{{ category }}" style="display: none;"></span></div>
-                <div class="tiles" id="category-{{ category }}" data-last-update="0">
-                    {% set seen_articles = [] %}
+                <div class="tiles" id="category-{{ category }}">
                     {% for article in articles %}
-                    {% set article_key = article.title + '|' + article.link + '|' + article.published %}
-                    {% if article_key not in seen_articles %}
-                    <div class="article-tile" data-published="{{ article.published }}" data-id="{{ loop.index }}" data-key="{{ article_key }}">
+                    <div class="article-tile" data-published="{{ article.published }}" data-key="{{ article.title + '|' + article.link + '|' + article.published }}">
                         {% if article.image != "svg" %}
-                        <img src="{{ article.image }}" alt="Article Image">
+                        <img src="{{ article.image }}" alt="Article Image" onerror="this.style.display='none';">
                         {% else %}
                         <svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
                             <rect width="100%" height="100%" fill="#e0e0e0"/>
@@ -60,300 +83,177 @@
                         </svg>
                         {% endif %}
                         <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
-                        <div class="description">{{ article.description }}</div>
+                        <div class="description">{{ article.description | safe }}</div>
                         <div class="published">Published: {{ article.published }}</div>
                     </div>
-                    {% set seen_articles = seen_articles + [article_key] %}
-                    {% endif %}
                     {% endfor %}
                 </div>
                 <div class="tiles" id="all-{{ category }}" style="display: none;"></div>
             </div>
             {% endfor %}
-        </div>
-    {% else %}
-        {% if not loading %}
-        <div class="no-articles">No articles available yet. Loading new feeds...</div>
+        {% else %}
+            {% if not loading %}
+            <div class="no-articles">No articles available yet. Loading new feeds...</div>
+            {% endif %}
         {% endif %}
-    {% endif %}
+    </div>
 
     <script>
         let lastUpdate = 0;
         let expandedCategories = new Set();
 
-        // Restore expanded categories from session storage if available
         document.addEventListener('DOMContentLoaded', () => {
             const storedExpanded = sessionStorage.getItem('expandedCategories');
             if (storedExpanded) {
                 expandedCategories = new Set(JSON.parse(storedExpanded));
                 expandedCategories.forEach(category => {
-                    toggleCategory(category, false); // Expand without fetching
+                    const allTilesDiv = document.getElementById(`all-${category}`);
+                    if (allTilesDiv) allTilesDiv.style.display = 'grid';
                 });
             }
+
+            if (document.getElementById('loadingContainer')) {
+                checkLoadingStatus();
+            }
+
+            document.getElementById('searchForm').addEventListener('submit', handleSearch);
+            document.getElementById('backButton').addEventListener('click', () => {
+                window.location.href = '/';
+            });
         });
 
         function getArticleKey(article) {
             return `${article.title}|${article.link}|${article.published}`;
         }
 
-        function toggleCategory(category, fetchData = true) {
+        function createArticleTileHTML(article) {
+            const key = getArticleKey(article);
+            const imageHTML = article.image !== "svg"
+                ? `<img src="${article.image}" alt="Article Image" onerror="this.style.display='none';">`
+                : `<svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
+                       <rect width="100%" height="100%" fill="#e0e0e0"/>
+                       <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
+                   </svg>`;
+
+            return `
+                <div class="article-tile" data-published="${article.published}" data-key="${key}">
+                    ${imageHTML}
+                    <div class="title"><a href="${article.link}" target="_blank">${article.title}</a></div>
+                    <div class="description">${article.description}</div>
+                    <div class="published">Published: ${article.published}</div>
+                </div>`;
+        }
+        
+        function renderArticles(container, articles) {
+            container.innerHTML = articles.map(createArticleTileHTML).join('');
+        }
+
+        function toggleCategory(category) {
             const spinner = document.getElementById(`spinner-${category}`);
             const tilesDiv = document.getElementById(`category-${category}`);
             const allTilesDiv = document.getElementById(`all-${category}`);
 
             if (expandedCategories.has(category)) {
-                tilesDiv.style.display = 'grid';
                 allTilesDiv.style.display = 'none';
                 expandedCategories.delete(category);
             } else {
-                if (fetchData) {
-                    spinner.style.display = 'inline-block';
-                    fetch(`/get_all_articles/${category}`)
-                        .then(response => response.json())
-                        .then(data => {
-                            spinner.style.display = 'none';
-                            if (data.articles.length > 0) {
-                                let html = '';
-                                const seenKeys = new Set();
-                                data.articles.sort((a, b) => new Date(b.published) - new Date(a.published));
-                                data.articles.forEach((article, index) => {
-                                    const key = getArticleKey(article);
-                                    if (!seenKeys.has(key)) {
-                                        seenKeys.add(key);
-                                        html += `
-                                            <div class="article-tile" data-published="${article.published}" data-id="${index}" data-key="${key}">
-                                                ${article.image !== "svg" ? `<img src="${article.image}" alt="Article Image">` : `
-                                                    <svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
-                                                        <rect width="100%" height="100%" fill="#e0e0e0"/>
-                                                        <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
-                                                    </svg>
-                                                `}
-                                                <div class="title"><a href="${article.link}" target="_blank">${article.title}</a></div>
-                                                <div class="description">${article.description}</div>
-                                                <div class="published">Published: ${article.published}</div>
-                                            </div>
-                                        `;
-                                    } else {
-                                        console.warn(`Duplicate article skipped in category ${category}: ${key}`);
-                                    }
-                                });
-                                tilesDiv.style.display = 'none';
-                                allTilesDiv.innerHTML = html;
-                                allTilesDiv.style.display = 'grid';
-                                expandedCategories.add(category);
-                            } else {
-                                alert(`No additional articles found for ${category}.`);
-                            }
-                        })
-                        .catch(error => {
-                            spinner.style.display = 'none';
-                            console.error(`Error loading all articles for ${category}:`, error);
-                            alert(`Failed to load all articles for ${category}. Please try again.`);
-                        });
-                } else {
-                    tilesDiv.style.display = 'none';
-                    allTilesDiv.style.display = 'grid';
-                    expandedCategories.add(category);
-                }
+                spinner.style.display = 'inline-block';
+                fetch(`/get_all_articles/${category}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        spinner.style.display = 'none';
+                        if (data.articles && data.articles.length > 0) {
+                            renderArticles(allTilesDiv, data.articles);
+                            allTilesDiv.style.display = 'grid';
+                            expandedCategories.add(category);
+                        } else {
+                            alert(`No additional articles found for ${category}.`);
+                        }
+                    })
+                    .catch(error => {
+                        spinner.style.display = 'none';
+                        console.error(`Error loading all articles for ${category}:`, error);
+                    });
             }
-
-            // Save expanded categories to session storage
             sessionStorage.setItem('expandedCategories', JSON.stringify([...expandedCategories]));
         }
+        
+        function handleSearch(event) {
+            event.preventDefault();
+            const form = event.target;
+            const backButton = document.getElementById('backButton');
+            const contentContainer = document.getElementById('contentContainer');
+            const loadingContainer = document.getElementById('loadingContainer');
+            if(loadingContainer) loadingContainer.style.display = 'block';
+            contentContainer.innerHTML = '';
 
-        function updateArticles() {
-            fetch('/get_updates')
+
+            fetch('/search', { method: 'POST', body: new FormData(form) })
                 .then(response => response.json())
                 .then(data => {
-                    if (data.has_updates && data.last_update > lastUpdate) {
-                        lastUpdate = data.last_update;
-                        const newArticles = data.articles;
-
-                        // Store the current scroll position and expanded categories
-                        const scrollPosition = window.scrollY;
-
-                        for (const [category, articles] of Object.entries(newArticles)) {
-                            const tilesDiv = document.getElementById(`category-${category}`);
-                            const allTilesDiv = document.getElementById(`all-${category}`);
-                            if (tilesDiv) {
-                                const existingArticles = Array.from(tilesDiv.querySelectorAll('.article-tile'));
-                                let currentKeys = new Set(existingArticles.map(a => a.dataset.key));
-                                let newHtml = '';
-                                articles.sort((a, b) => new Date(b.published) - new Date(a.published));
-                                articles.slice(0, 10).forEach((article, index) => {
-                                    const key = getArticleKey(article);
-                                    if (!currentKeys.has(key)) {
-                                        newHtml += `
-                                            <div class="article-tile" data-published="${article.published}" data-id="${index}" data-key="${key}">
-                                                ${article.image !== "svg" ? `<img src="${article.image}" alt="Article Image">` : `
-                                                    <svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
-                                                        <rect width="100%" height="100%" fill="#e0e0e0"/>
-                                                        <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
-                                                    </svg>
-                                                `}
-                                                <div class="title"><a href="${article.link}" target="_blank">${article.title}</a></div>
-                                                <div class="description">${article.description}</div>
-                                                <div class="published">Published: ${article.published}</div>
-                                            </div>
-                                        `;
-                                    } else {
-                                        console.warn(`Duplicate article skipped in update for ${category}: ${key}`);
-                                    }
-                                });
-
-                                if (newHtml) {
-                                    tilesDiv.innerHTML = (existingArticles.map(a => a.outerHTML).join('') + newHtml);
-                                    const allLimited = Array.from(tilesDiv.querySelectorAll('.article-tile'));
-                                    tilesDiv.innerHTML = allLimited
-                                        .sort((a, b) => new Date(b.dataset.published) - new Date(a.dataset.published))
-                                        .slice(0, 10)
-                                        .map(a => a.outerHTML)
-                                        .join('');
-                                }
-
-                                if (allTilesDiv.style.display === 'grid') {
-                                    let allNewHtml = '';
-                                    const allSeenKeys = new Set(Array.from(allTilesDiv.querySelectorAll('.article-tile')).map(a => a.dataset.key));
-                                    articles.forEach((article, index) => {
-                                        const key = getArticleKey(article);
-                                        if (!allSeenKeys.has(key)) {
-                                            allSeenKeys.add(key);
-                                            allNewHtml += `
-                                                <div class="article-tile" data-published="${article.published}" data-id="${index}" data-key="${key}">
-                                                    ${article.image !== "svg" ? `<img src="${article.image}" alt="Article Image">` : `
-                                                        <svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
-                                                            <rect width="100%" height="100%" fill="#e0e0e0"/>
-                                                            <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
-                                                        </svg>
-                                                    `}
-                                                    <div class="title"><a href="${article.link}" target="_blank">${article.title}</a></div>
-                                                    <div class="description">${article.description}</div>
-                                                    <div class="published">Published: ${article.published}</div>
-                                                </div>
-                                            `;
-                                        } else {
-                                            console.warn(`Duplicate article skipped in expanded view for ${category}: ${key}`);
-                                        }
-                                    });
-                                    allTilesDiv.innerHTML = (Array.from(allTilesDiv.querySelectorAll('.article-tile')).map(a => a.outerHTML).join('') + allNewHtml);
-                                    const allExpanded = Array.from(allTilesDiv.querySelectorAll('.article-tile'));
-                                    allTilesDiv.innerHTML = allExpanded
-                                        .sort((a, b) => new Date(b.dataset.published) - new Date(a.dataset.published))
-                                        .map(a => a.outerHTML)
-                                        .join('');
-                                }
-                            }
+                    if(loadingContainer) loadingContainer.style.display = 'none';
+                    if (data.has_articles) {
+                        backButton.style.display = 'block';
+                        let categoriesHtml = '';
+                        const sortedCategories = Object.keys(data.categorized_articles).sort();
+                        
+                        for(const category of sortedCategories) {
+                            const articles = data.categorized_articles[category];
+                            categoriesHtml += `
+                                <div class="category-section">
+                                    <div class="category-title">${category} (${articles.length})</div>
+                                    <div class="tiles">
+                                        ${articles.map(createArticleTileHTML).join('')}
+                                    </div>
+                                </div>`;
                         }
-
-                        // Restore scroll position
-                        window.scrollTo(0, scrollPosition);
+                        contentContainer.innerHTML = categoriesHtml;
+                    } else {
+                        contentContainer.innerHTML = `<div class="no-articles">No results found.</div>`;
                     }
-
-                    // Schedule the next update
-                    setTimeout(updateArticles, 30000); // Poll every 30 seconds
                 })
                 .catch(error => {
-                    console.error('Error updating articles:', error);
-                    setTimeout(updateArticles, 30000);
+                    if(loadingContainer) loadingContainer.style.display = 'none';
+                    console.error('Error performing search:', error);
+                    contentContainer.innerHTML = `<div class="no-articles">Failed to perform search. Please try again.</div>`;
                 });
         }
 
+        function updateArticles() {
+            fetch('/get_updates')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.has_updates) {
+                        // For simplicity, a full refresh is the most reliable way to update
+                        // without complex DOM manipulation and state management.
+                        if (!document.querySelector('.search-bar').value) { // Only refresh if not in search view
+                           console.log("New content available. Refreshing page.");
+                           window.location.reload();
+                        }
+                    }
+                })
+                .catch(error => console.error('Error checking for updates:', error))
+                .finally(() => setTimeout(updateArticles, 60000)); // Poll every 60 seconds
+        }
+
         function checkLoadingStatus() {
             fetch('/check_loading')
                 .then(response => response.json())
                 .then(data => {
                     if (data.status === 'complete') {
                         const loadingContainer = document.getElementById('loadingContainer');
-                        if (loadingContainer) {
-                            loadingContainer.style.display = 'none';
-                        }
-                        updateArticles(); // Start polling for updates
+                        if (loadingContainer) loadingContainer.style.display = 'none';
+                        // Start polling for updates only after initial load is complete
+                        setTimeout(updateArticles, 5000);
                     } else {
                         setTimeout(checkLoadingStatus, 2000);
                     }
                 })
                 .catch(error => {
                     console.error('Error checking loading status:', error);
-                    setTimeout(checkLoadingStatus, 2000);
+                    setTimeout(checkLoadingStatus, 5000);
                 });
         }
-
-        document.addEventListener('DOMContentLoaded', () => {
-            const tiles = document.querySelectorAll('.tiles');
-            tiles.forEach(tile => {
-                lastUpdate = Math.max(lastUpdate, parseFloat(tile.dataset.lastUpdate) || 0);
-            });
-
-            // Start checking loading status if loading is active
-            if (document.getElementById('loadingContainer')) {
-                checkLoadingStatus();
-            }
-
-            const form = document.getElementById('searchForm');
-            const backButton = document.getElementById('backButton');
-            form.addEventListener('submit', (event) => {
-                event.preventDefault();
-                fetch('/search', {
-                    method: 'POST',
-                    body: new FormData(form)
-                })
-                .then(response => {
-                    if (!response.ok) throw new Error('Network response was not ok');
-                    return response.json();
-                })
-                .then(data => {
-                    if (data.has_articles) {
-                        backButton.style.display = 'block';
-                        const existingContent = document.querySelectorAll('.category-section');
-                        existingContent.forEach(section => section.remove());
-                        const categoriesHtml = Object.entries(data.categorized_articles).map(([cat, articles]) => {
-                            const seenKeys = new Set();
-                            const uniqueArticles = articles.filter(article => {
-                                const key = getArticleKey(article);
-                                if (seenKeys.has(key)) {
-                                    console.warn(`Duplicate article skipped in search for ${cat}: ${key}`);
-                                    return false;
-                                }
-                                seenKeys.add(key);
-                                return true;
-                            });
-                            return `
-                                <div class="category-section">
-                                    <div class="category-title" onclick="toggleCategory('${cat}')">${cat} <span class="loading-spinner" id="spinner-${cat}" style="display: none;"></span></div>
-                                    <div class="tiles" id="category-${cat}" data-last-update="0">
-                                        ${uniqueArticles.map((article, index) => `
-                                            <div class="article-tile" data-published="${article.published}" data-id="${index}" data-key="${getArticleKey(article)}">
-                                                ${article.image !== "svg" ? `<img src="${article.image}" alt="Article Image">` : `
-                                                    <svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
-                                                        <rect width="100%" height="100%" fill="#e0e0e0"/>
-                                                        <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
-                                                    </svg>
-                                                `}
-                                                <div class="title"><a href="${article.link}" target="_blank">${article.title}</a></div>
-                                                <div class="description">${article.description}</div>
-                                                <div class="published">Published: ${article.published}</div>
-                                            </div>
-                                        `).join('')}
-                                    </div>
-                                    <div class="tiles" id="all-${cat}" style="display: none;"></div>
-                                </div>
-                            `;
-                        }).join('');
-                        document.querySelector('.search-container').insertAdjacentHTML('afterend', categoriesHtml);
-                    } else {
-                        alert('No results found.');
-                    }
-                })
-                .catch(error => {
-                    console.error('Error performing search:', error);
-                    alert('Failed to perform search. Please try again.');
-                });
-            });
-
-            backButton.addEventListener('click', () => {
-                window.location.href = '/';
-            });
-        });
     </script>
 </body>
 </html>