1 files changed, 44 insertions, 22 deletions
diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index f913293..f17fdc7 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -1,23 +1,28 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import type { Feed } from '../types';
+import type { Feed, Category } from '../types';
 import './FeedList.css';
 
 export default function FeedList() {
     const [feeds, setFeeds] = useState<Feed[]>([]);
+    const [tags, setTags] = useState<Category[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState('');
 
     useEffect(() => {
-        fetch('/api/feed/')
-            .then((res) => {
-                if (!res.ok) {
-                    throw new Error('Failed to fetch feeds');
-                }
+        Promise.all([
+            fetch('/api/feed/').then(res => {
+                if (!res.ok) throw new Error('Failed to fetch feeds');
+                return res.json();
+            }),
+            fetch('/api/tag').then(res => {
+                if (!res.ok) throw new Error('Failed to fetch tags');
                 return res.json();
             })
-            .then((data) => {
-                setFeeds(data);
+        ])
+            .then(([feedsData, tagsData]) => {
+                setFeeds(feedsData);
+                setTags(tagsData);
                 setLoading(false);
             })
             .catch((err) => {
@@ -31,20 +36,37 @@ export default function FeedList() {
 
     return (
         <div className="feed-list">
-            <h2>Feeds</h2>
-            {feeds.length === 0 ? (
-                <p>No feeds found.</p>
-            ) : (
-                <ul className="feed-list-items">
-                    {feeds.map((feed) => (
-                        <li key={feed._id} className="feed-item">
-                            <Link to={`/feed/${feed._id}`} className="feed-title">
-                                {feed.title || feed.url}
-                            </Link>
-                            {feed.category && <span className="feed-category">{feed.category}</span>}
-                        </li>
-                    ))}
-                </ul>
+            <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="feed-item">
+                                <Link to={`/feed/${feed._id}`} className="feed-title">
+                                    {feed.title || feed.url}
+                                </Link>
+                                {feed.category && <span className="feed-category">{feed.category}</span>}
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+
+            {tags && tags.length > 0 && (
+                <div className="tag-section">
+                    <h2>Tags</h2>
+                    <ul className="tag-list-items">
+                        {tags.map((tag) => (
+                            <li key={tag.title} className="tag-item">
+                                <Link to={`/tag/${encodeURIComponent(tag.title)}`} className="tag-link">
+                                    {tag.title}
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
             )}
         </div>
     );