Implement Frontend Feed List with tests

8 files changed, 240 insertions, 39 deletions

diff --git a/frontend/src/App.css b/frontend/src/App.css
index b9d355d..57800a4 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,42 +1,60 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+/* Resets and Base Styles */
+* {
+  box-sizing: border-box;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+
+/* Dashboard Layout */
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  /* Prevent body scroll */
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.dashboard-header {
+  background: #2c3e50;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+.dashboard-header h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
 }
 
-.card {
-  padding: 2em;
+.dashboard-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
 }
 
-.read-the-docs {
-  color: #888;
+.dashboard-sidebar {
+  width: 300px;
+  background: #f8f9fa;
+  border-right: 1px solid #ddd;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
 }
+
+.dashboard-main {
+  flex: 1;
+  padding: 2rem;
+  overflow-y: auto;
+  background: #fff;
+}
\ No newline at end of file
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
index 8e3d805..37a7fab 100644
--- a/frontend/src/App.test.tsx
+++ b/frontend/src/App.test.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 import App from './App';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
@@ -18,15 +20,15 @@ describe('App', () => {
     });
 
     it('renders dashboard when authenticated', async () => {
-        (global.fetch as any).mockResolvedValueOnce({
-            ok: true,
-        });
+        (global.fetch as any)
+            .mockResolvedValueOnce({ ok: true }) // /api/auth
+            .mockResolvedValueOnce({ ok: true, json: async () => [] }); // /api/feed/
 
         window.history.pushState({}, 'Test page', '/v2/');
         render(<App />);
 
         await waitFor(() => {
-            expect(screen.getByText(/dashboard/i)).toBeInTheDocument();
+            expect(screen.getByText(/neko reader/i)).toBeInTheDocument();
         });
     });
 });
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b986198..7d26025 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -31,14 +31,27 @@ function RequireAuth({ children }: { children: React.ReactElement }) {
   return children;
 }
 
+import FeedList from './components/FeedList';
+
 function Dashboard() {
-  // Placeholder for now
   return (
-    <div>
-      <h1>Dashboard</h1>
-      <p>Welcome to the new Neko/v2 frontend.</p>
+    <div className="dashboard">
+      <header className="dashboard-header">
+        <h1>Neko Reader</h1>
+        <nav>
+          {/* Add logout later */}
+        </nav>
+      </header>
+      <div className="dashboard-content">
+        <aside className="dashboard-sidebar">
+          <FeedList />
+        </aside>
+        <main className="dashboard-main">
+          <p>Select a feed to view items.</p>
+        </main>
+      </div>
     </div>
-  )
+  );
 }
 
 function App() {
diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css
new file mode 100644
index 0000000..f35ed59
--- /dev/null
+++ b/frontend/src/components/FeedList.css
@@ -0,0 +1,48 @@
+.feed-list {
+    padding: 1rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.feed-list h2 {
+    margin-top: 0;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 0.5rem;
+}
+
+.feed-list-items {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.feed-item {
+    padding: 0.75rem 0;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.feed-item:last-child {
+    border-bottom: none;
+}
+
+.feed-title {
+    text-decoration: none;
+    color: #333;
+    font-weight: 500;
+}
+
+.feed-title:hover {
+    color: #007bff;
+}
+
+.feed-category {
+    background: #e9ecef;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    color: #666;
+}
\ No newline at end of file
diff --git a/frontend/src/components/FeedList.test.tsx b/frontend/src/components/FeedList.test.tsx
new file mode 100644
index 0000000..578e3c2
--- /dev/null
+++ b/frontend/src/components/FeedList.test.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import FeedList from './FeedList';
+
+describe('FeedList Component', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        global.fetch = vi.fn();
+    });
+
+    it('renders loading state initially', () => {
+        (global.fetch as any).mockImplementation(() => new Promise(() => { }));
+        render(<FeedList />);
+        expect(screen.getByText(/loading feeds/i)).toBeInTheDocument();
+    });
+
+    it('renders list of feeds', async () => {
+        const mockFeeds = [
+            { _id: 1, title: 'Feed One', url: 'http://example.com/rss', web_url: 'http://example.com', category: 'Tech' },
+            { _id: 2, title: 'Feed Two', url: 'http://test.com/rss', web_url: 'http://test.com', category: 'News' },
+        ];
+
+        (global.fetch as any).mockResolvedValueOnce({
+            ok: true,
+            json: async () => mockFeeds,
+        });
+
+        render(<FeedList />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Feed One')).toBeInTheDocument();
+            expect(screen.getByText('Feed Two')).toBeInTheDocument();
+            expect(screen.getByText('Tech')).toBeInTheDocument();
+        });
+    });
+
+    it('handles fetch error', async () => {
+        (global.fetch as any).mockRejectedValueOnce(new Error('API Error'));
+
+        render(<FeedList />);
+
+        await waitFor(() => {
+            expect(screen.getByText(/error: api error/i)).toBeInTheDocument();
+        });
+    });
+
+    it('handles empty feed list', async () => {
+        (global.fetch as any).mockResolvedValueOnce({
+            ok: true,
+            json: async () => [],
+        });
+
+        render(<FeedList />);
+
+        await waitFor(() => {
+            expect(screen.getByText(/no feeds found/i)).toBeInTheDocument();
+        });
+    });
+});
diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
new file mode 100644
index 0000000..fb7c1de
--- /dev/null
+++ b/frontend/src/components/FeedList.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import type { Feed } from '../types';
+import './FeedList.css';
+
+export default function FeedList() {
+    const [feeds, setFeeds] = useState<Feed[]>([]);
+    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');
+                }
+                return res.json();
+            })
+            .then((data) => {
+                setFeeds(data);
+                setLoading(false);
+            })
+            .catch((err) => {
+                setError(err.message);
+                setLoading(false);
+            });
+    }, []);
+
+    if (loading) return <div className="feed-list-loading">Loading feeds...</div>;
+    if (error) return <div className="feed-list-error">Error: {error}</div>;
+
+    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">
+                            <a href={feed.web_url} target="_blank" rel="noopener noreferrer" className="feed-title">
+                                {feed.title || feed.url}
+                            </a>
+                            {feed.category && <span className="feed-category">{feed.category}</span>}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}
diff --git a/frontend/src/components/Login.test.tsx b/frontend/src/components/Login.test.tsx
index 44d1371..ef946e2 100644
--- a/frontend/src/components/Login.test.tsx
+++ b/frontend/src/components/Login.test.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+import '@testing-library/jest-dom';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
new file mode 100644
index 0000000..905b1dc
--- /dev/null
+++ b/frontend/src/types.ts
@@ -0,0 +1,7 @@
+export interface Feed {
+    _id: number;
+    url: string;
+    web_url: string;
+    title: string;
+    category: string;
+}