clear content button

static/css/components/topbar.css

@@ -163,4 +163,21 @@
 
 .user-menu-item#logoutButton:hover {
     background-color: rgba(244, 63, 63, 0.1);
+}
+
+.clear-content-button {
+    background: none;
+    border: none;
+    color: var(--text-color);
+    padding: 8px;
+    cursor: pointer;
+    font-size: 1.1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s ease;
+}
+
+.clear-content-button:hover {
+    color: var(--primary-red);
 } 

static/js/app.js

@@ -5,6 +5,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const sidebar = document.getElementById('sidebar');
     const userMenuButton = document.getElementById('userMenuButton');
     const userMenuDropdown = document.getElementById('userMenuDropdown');
+    const clearContentButton = document.getElementById('clearContentButton');
 
     // Create a hidden file input for OPML upload
     const opmlFileInput = document.createElement('input');
@@ -202,6 +203,16 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
+    // Clear content button handler
+    clearContentButton.addEventListener('click', () => {
+        const mainContent = document.getElementById('main-content');
+        mainContent.innerHTML = '';
+        // Remove any active states from feed list
+        document.querySelectorAll('#feedList .feed-item.active').forEach(item => {
+            item.classList.remove('active');
+        });
+    });
+
     // Initialize feeds
     handleFeeds();
 });

templates/index.html.tera

@@ -70,6 +70,9 @@
                 <button class="add-feed-button" id="addFeedButton" title="Add Feed">
                     <i class="fas fa-plus"></i>
                 </button>
+                <button class="clear-content-button" id="clearContentButton" title="Clear Content">
+                    <i class="fas fa-broom"></i>
+                </button>
                 <div class="job-status" id="jobStatus" style="display: none">
                     <i class="fas fa-sync fa-spin"></i>
                     <span class="job-status-text"></span>