From ea39f5aac74621861f6d88f98f0e0ca2eaad82f8 Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Fri, 13 Feb 2026 19:16:18 -0800
Subject: feat(ui): collapsible feed list (NK-4juza2)

---
 frontend/src/components/FeedList.css | 15 ++++++++++++++-
 frontend/src/components/FeedList.tsx | 37 ++++++++++++++++++++++--------------
 2 files changed, 37 insertions(+), 15 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css
index d0ee9eb..0d6d26d 100644
--- a/frontend/src/components/FeedList.css
+++ b/frontend/src/components/FeedList.css
@@ -27,13 +27,26 @@
     border-color: #000;
 }
 
-.feed-list h2 {
+.feed-list h2,
+.feed-section-header {
     font-size: 1.2rem;
     margin-bottom: 0.5rem;
     border-bottom: 1px solid #999;
     padding-bottom: 0.25rem;
     text-transform: uppercase;
     letter-spacing: 1px;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+}
+
+.toggle-indicator {
+    font-size: 0.8rem;
+    margin-right: 0.5rem;
+    display: inline-block;
+    width: 1rem;
+    text-align: center;
 }
 
 .feed-list-items,
diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index 4af1bbc..56c96cd 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -8,6 +8,7 @@ export default function FeedList({ theme, setTheme }: { theme: string, setTheme:
     const [tags, setTags] = useState<Category[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState('');
+    const [feedsExpanded, setFeedsExpanded] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const navigate = useNavigate();
     const [searchParams] = useSearchParams();
@@ -23,6 +24,10 @@ export default function FeedList({ theme, setTheme }: { theme: string, setTheme:
         }
     };
 
+    const toggleFeeds = () => {
+        setFeedsExpanded(!feedsExpanded);
+    };
+
     useEffect(() => {
         Promise.all([
             fetch('/api/feed/').then(res => {
@@ -69,20 +74,24 @@ export default function FeedList({ theme, setTheme }: { theme: string, setTheme:
                 </ul>
             </div>
             <div className="feed-section">
-                <h2>Feeds</h2>
-                {feeds.length === 0 ? (
-                    <p>No feeds found.</p>
-                ) : (
-                    <ul className="feed-list-items">
-                        {feeds.map((feed) => (
-                            <li key={feed._id} className="sidebar-feed-item">
-                                <Link to={`/feed/${feed._id}`} className={`feed-title ${feedId === String(feed._id) ? 'active' : ''}`}>
-                                    {feed.title || feed.url}
-                                </Link>
-                                {feed.category && <span className="feed-category">{feed.category}</span>}
-                            </li>
-                        ))}
-                    </ul>
+                <h2 onClick={toggleFeeds} className="feed-section-header">
+                    <span className="toggle-indicator">{feedsExpanded ? '▼' : '▶'}</span> Feeds
+                </h2>
+                {feedsExpanded && (
+                    feeds.length === 0 ? (
+                        <p>No feeds found.</p>
+                    ) : (
+                        <ul className="feed-list-items">
+                            {feeds.map((feed) => (
+                                <li key={feed._id} className="sidebar-feed-item">
+                                    <Link to={`/feed/${feed._id}`} className={`feed-title ${feedId === String(feed._id) ? 'active' : ''}`}>
+                                        {feed.title || feed.url}
+                                    </Link>
+                                    {feed.category && <span className="feed-category">{feed.category}</span>}
+                                </li>
+                            ))}
+                        </ul>
+                    )
                 )}
             </div>
 
-- 
cgit v1.2.3