Uncategorized feeds

static/css/style.css

@@ -617,4 +617,17 @@ button:disabled {
 
 .user-menu-item#logoutButton:hover {
     background-color: rgba(244, 63, 63, 0.1);
+}
+
+.feed-category {
+    margin-bottom: 1rem;
+}
+
+.feed-category-header {
+    color: var(--primary-red);
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin: 0;
+    border-bottom: 1px solid var(--border-color);
 } 

static/js/app.js

@@ -150,6 +150,7 @@ async function handleFeeds() {
     const feedList = document.getElementById('feedList');
     
     if (feeds) {
+        console.log('Loaded feeds:', feeds);
         feedList.innerHTML = '';
         
         if (feeds.length === 0) {
@@ -158,8 +159,43 @@ async function handleFeeds() {
             emptyMessage.textContent = 'No feeds added yet';
             feedList.appendChild(emptyMessage);
         } else {
+            // Group feeds by category
+            const feedsByCategory = {};
+            const uncategorizedFeeds = [];
+
             feeds.forEach(feed => {
-                feedList.appendChild(openFeed(feed));
+                const category = feed.categorization.length > 0 ? feed.categorization[0] : null;
+                if (category) {
+                    if (!feedsByCategory[category]) {
+                        feedsByCategory[category] = [];
+                    }
+                    feedsByCategory[category].push(feed);
+                } else {
+                    uncategorizedFeeds.push(feed);
+                }
+            });
+
+            // Sort categories alphabetically, but keep "Uncategorized" at the end
+            const sortedCategories = Object.keys(feedsByCategory).sort((a, b) => a.localeCompare(b));
+            sortedCategories.push("<No Category>");
+            feedsByCategory["<No Category>"] = uncategorizedFeeds;
+
+            // Create category sections
+            sortedCategories.forEach(category => {
+                const categorySection = document.createElement('div');
+                categorySection.className = 'feed-category';
+
+                const categoryHeader = document.createElement('h3');
+                categoryHeader.className = 'feed-category-header';
+                categoryHeader.textContent = category;
+                categorySection.appendChild(categoryHeader);
+
+                // Add feeds for this category
+                feedsByCategory[category].forEach(feed => {
+                    categorySection.appendChild(openFeed(feed));
+                });
+
+                feedList.appendChild(categorySection);
             });
         }
     } else {