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

1 files changed, 41 insertions, 38 deletions

diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
index 303ac7e..196f32a 100644
--- a/frontend/src/App.test.tsx
+++ b/frontend/src/App.test.tsx
@@ -5,52 +5,55 @@ import App from './App';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 describe('App', () => {
-    beforeEach(() => {
-        vi.resetAllMocks();
-        global.fetch = vi.fn();
+  beforeEach(() => {
+    vi.resetAllMocks();
+    global.fetch = vi.fn();
+  });
+
+  it('renders login on initial load (unauthenticated)', async () => {
+    (global.fetch as any).mockResolvedValueOnce({
+      ok: false,
     });
-
-    it('renders login on initial load (unauthenticated)', async () => {
-        (global.fetch as any).mockResolvedValueOnce({
-            ok: false,
-        });
-        window.history.pushState({}, 'Test page', '/v2/login');
-        render(<App />);
-        expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
+    window.history.pushState({}, 'Test page', '/v2/login');
+    render(<App />);
+    expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
+  });
+
+  it('renders dashboard when authenticated', async () => {
+    (global.fetch as any).mockImplementation((url: string) => {
+      if (url.includes('/api/auth')) return Promise.resolve({ ok: true });
+      if (url.includes('/api/feed/')) return Promise.resolve({ ok: true, json: async () => [] });
+      if (url.includes('/api/tag')) return Promise.resolve({ ok: true, json: async () => [] });
+      return Promise.resolve({ ok: true }); // Fallback
     });
 
-    it('renders dashboard when authenticated', async () => {
-        (global.fetch as any).mockImplementation((url: string) => {
-            if (url.includes('/api/auth')) return Promise.resolve({ ok: true });
-            if (url.includes('/api/feed/')) return Promise.resolve({ ok: true, json: async () => [] });
-            if (url.includes('/api/tag')) return Promise.resolve({ ok: true, json: async () => [] });
-            return Promise.resolve({ ok: true }); // Fallback
-        });
-
-        window.history.pushState({}, 'Test page', '/v2/');
-        render(<App />);
+    window.history.pushState({}, 'Test page', '/v2/');
+    render(<App />);
 
-        await waitFor(() => {
-            expect(screen.getByText('🐱')).toBeInTheDocument();
-        });
+    await waitFor(() => {
+      expect(screen.getByText('🐱')).toBeInTheDocument();
+    });
 
-        // Test Logout
-        const logoutBtn = screen.getByText(/logout/i);
-        expect(logoutBtn).toBeInTheDocument();
+    // Test Logout
+    const logoutBtn = screen.getByText(/logout/i);
+    expect(logoutBtn).toBeInTheDocument();
 
-        // Mock window.location
-        Object.defineProperty(window, 'location', {
-            configurable: true,
-            value: { href: '' },
-        });
+    // Mock window.location
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { href: '' },
+    });
 
-        (global.fetch as any).mockResolvedValueOnce({ ok: true });
+    (global.fetch as any).mockResolvedValueOnce({ ok: true });
 
-        fireEvent.click(logoutBtn);
+    fireEvent.click(logoutBtn);
 
-        await waitFor(() => {
-            expect(global.fetch).toHaveBeenCalledWith('/api/logout', expect.objectContaining({ method: 'POST' }));
-            expect(window.location.href).toBe('/v2/login');
-        });
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        '/api/logout',
+        expect.objectContaining({ method: 'POST' })
+      );
+      expect(window.location.href).toBe('/v2/login');
     });
+  });
 });