Refactor: project structure, implement dependency injection, and align v2 UI with v1

1 files changed, 53 insertions, 50 deletions

diff --git a/frontend/src/components/FeedItem.test.tsx b/frontend/src/components/FeedItem.test.tsx
index f0497c6..cb9aafa 100644
--- a/frontend/src/components/FeedItem.test.tsx
+++ b/frontend/src/components/FeedItem.test.tsx
@@ -6,66 +6,69 @@ import FeedItem from './FeedItem';
 import type { Item } from '../types';
 
 const mockItem: Item = {
-    _id: 1,
-    feed_id: 101,
-    title: 'Test Item',
-    url: 'http://example.com/item',
-    description: '<p>Description</p>',
-    publish_date: '2023-01-01',
-    read: false,
-    starred: false,
-    feed_title: 'Test Feed'
+  _id: 1,
+  feed_id: 101,
+  title: 'Test Item',
+  url: 'http://example.com/item',
+  description: '<p>Description</p>',
+  publish_date: '2023-01-01',
+  read: false,
+  starred: false,
+  feed_title: 'Test Feed',
 };
 
 describe('FeedItem Component', () => {
-    beforeEach(() => {
-        vi.resetAllMocks();
-        global.fetch = vi.fn();
-    });
+  beforeEach(() => {
+    vi.resetAllMocks();
+    global.fetch = vi.fn();
+  });
 
-    it('renders item details', () => {
-        render(<FeedItem item={mockItem} />);
-        expect(screen.getByText('Test Item')).toBeInTheDocument();
-        expect(screen.getByText(/Test Feed/)).toBeInTheDocument();
-        // Check for relative time or date formatting? For now just check it renders
-    });
+  it('renders item details', () => {
+    render(<FeedItem item={mockItem} />);
+    expect(screen.getByText('Test Item')).toBeInTheDocument();
+    expect(screen.getByText(/Test Feed/)).toBeInTheDocument();
+    // Check for relative time or date formatting? For now just check it renders
+  });
 
-    it('toggles star status', async () => {
-        (global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) });
+  it('toggles star status', async () => {
+    (global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) });
 
-        render(<FeedItem item={mockItem} />);
+    render(<FeedItem item={mockItem} />);
 
-        const starBtn = screen.getByTitle('Star');
-        expect(starBtn).toHaveTextContent('★');
-        fireEvent.click(starBtn);
+    const starBtn = screen.getByTitle('Star');
+    expect(starBtn).toHaveTextContent('★');
+    fireEvent.click(starBtn);
 
-        // Optimistic update
-        expect(await screen.findByTitle('Unstar')).toHaveTextContent('★');
+    // Optimistic update
+    expect(await screen.findByTitle('Unstar')).toHaveTextContent('★');
 
-        expect(global.fetch).toHaveBeenCalledWith('/api/item/1', expect.objectContaining({
-            method: 'PUT',
-            body: JSON.stringify({
-                _id: 1,
-                read: false,
-                starred: true
-            })
-        }));
-    });
+    expect(global.fetch).toHaveBeenCalledWith(
+      '/api/item/1',
+      expect.objectContaining({
+        method: 'PUT',
+        body: JSON.stringify({
+          _id: 1,
+          read: false,
+          starred: true,
+        }),
+      })
+    );
+  });
 
-    it('updates styling when read state changes', () => {
-        const { rerender } = render(<FeedItem item={{ ...mockItem, read: false }} />);
-        const link = screen.getByText('Test Item');
-        // Initial state: unread (bold)
-        // Note: checking computed style might be flaky in jsdom, but we can check the class on the parent
-        const listItem = link.closest('li');
-        expect(listItem).toHaveClass('unread');
-        expect(listItem).not.toHaveClass('read');
+  it('updates styling when read state changes', () => {
+    const { rerender } = render(<FeedItem item={{ ...mockItem, read: false }} />);
+    const link = screen.getByText('Test Item');
+    // Initial state: unread (bold)
+    // Note: checking computed style might be flaky in jsdom, but we can check the class on the parent
+    const listItem = link.closest('li');
+    expect(listItem).toHaveClass('unread');
+    expect(listItem).not.toHaveClass('read');
 
-        // Update prop to read
-        rerender(<FeedItem item={{ ...mockItem, read: true }} />);
+    // Update prop to read
+    rerender(<FeedItem item={{ ...mockItem, read: true }} />);
 
-        // Should now be read
-        expect(listItem).toHaveClass('read');
-        expect(listItem).not.toHaveClass('unread');
-    });
+    // Should now be read
+    expect(listItem).toHaveClass('read');
+    expect(listItem).not.toHaveClass('unread');
+  });
 });