diff options
| -rw-r--r-- | frontend/src/components/FeedList.css | 15 | ||||
| -rw-r--r-- | frontend/src/components/FeedList.tsx | 37 |
2 files changed, 37 insertions, 15 deletions
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> |