Refactor the "God Component" (App.tsx) Your App.tsx has lower branch coverage (77%) and uncovered lines. This usually means it's doing too much: managing routing, auth state checks, theme toggling, and global error handling. Move Logic to "Initialization Hooks": Create a useAppInitialization hook that handles the OAuth token check, version check, and theme sync. Use Layouts for Routing: Move the "What's New" modal and "Anonymous Banner" into the MainLayout or a specialized AppGuard component, leaving App.tsx as a clean list of Routes.

src/hooks/useAppInitialization.test.tsx

@@ -0,0 +1,173 @@
+// src/hooks/useAppInitialization.test.tsx
+import { renderHook, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { MemoryRouter, useNavigate } from 'react-router-dom';
+import { useAppInitialization } from './useAppInitialization';
+import { useAuth } from './useAuth';
+import { useModal } from './useModal';
+import { createMockUserProfile } from '../tests/utils/mockFactories';
+
+// Mock dependencies
+vi.mock('./useAuth');
+vi.mock('./useModal');
+vi.mock('react-router-dom', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-router-dom')>();
+  return {
+    ...actual,
+    useNavigate: vi.fn(),
+  };
+});
+vi.mock('../services/logger.client');
+vi.mock('../config', () => ({
+  default: {
+    app: { version: '1.0.1' },
+  },
+}));
+
+const mockedUseAuth = vi.mocked(useAuth);
+const mockedUseModal = vi.mocked(useModal);
+const mockedUseNavigate = vi.mocked(useNavigate);
+
+const mockLogin = vi.fn();
+const mockNavigate = vi.fn();
+const mockOpenModal = vi.fn();
+
+// Wrapper with MemoryRouter is needed because the hook uses useLocation and useNavigate
+const wrapper = ({
+  children,
+  initialEntries = ['/'],
+}: {
+  children: React.ReactNode;
+  initialEntries?: string[];
+}) => <MemoryRouter initialEntries={initialEntries}>{children}</MemoryRouter>;
+
+describe('useAppInitialization Hook', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedUseNavigate.mockReturnValue(mockNavigate);
+    mockedUseAuth.mockReturnValue({
+      userProfile: null,
+      login: mockLogin,
+      authStatus: 'SIGNED_OUT',
+      isLoading: false,
+      logout: vi.fn(),
+      updateProfile: vi.fn(),
+    });
+    mockedUseModal.mockReturnValue({
+      openModal: mockOpenModal,
+      closeModal: vi.fn(),
+      isModalOpen: vi.fn(),
+    });
+    // Mock localStorage
+    Object.defineProperty(window, 'localStorage', {
+      value: {
+        getItem: vi.fn(),
+        setItem: vi.fn(),
+        removeItem: vi.fn(),
+        clear: vi.fn(),
+      },
+      writable: true,
+    });
+    // Mock matchMedia
+    Object.defineProperty(window, 'matchMedia', {
+      value: vi.fn().mockImplementation((query) => ({
+        matches: false, // default to light mode
+      })),
+      writable: true,
+    });
+  });
+
+  it('should call login when googleAuthToken is in URL', async () => {
+    renderHook(() => useAppInitialization(), {
+      wrapper: (props) => wrapper({ ...props, initialEntries: ['/?googleAuthToken=test-token'] }),
+    });
+    await waitFor(() => {
+      expect(mockLogin).toHaveBeenCalledWith('test-token');
+    });
+  });
+
+  it('should call login when githubAuthToken is in URL', async () => {
+    renderHook(() => useAppInitialization(), {
+      wrapper: (props) => wrapper({ ...props, initialEntries: ['/?githubAuthToken=test-token'] }),
+    });
+    await waitFor(() => {
+      expect(mockLogin).toHaveBeenCalledWith('test-token');
+    });
+  });
+
+  it('should call navigate to clean the URL after processing a token', async () => {
+    renderHook(() => useAppInitialization(), {
+      wrapper: (props) => wrapper({ ...props, initialEntries: ['/some/path?googleAuthToken=test-token'] }),
+    });
+    await waitFor(() => {
+      expect(mockLogin).toHaveBeenCalledWith('test-token');
+    });
+    expect(mockNavigate).toHaveBeenCalledWith('/some/path', { replace: true });
+  });
+
+  it("should open \"What's New\" modal if version is new", () => {
+    vi.spyOn(window.localStorage, 'getItem').mockReturnValue('1.0.0');
+    renderHook(() => useAppInitialization(), { wrapper });
+    expect(mockOpenModal).toHaveBeenCalledWith('whatsNew');
+    expect(window.localStorage.setItem).toHaveBeenCalledWith('lastSeenVersion', '1.0.1');
+  });
+
+  it("should not open \"What's New\" modal if version is the same", () => {
+    vi.spyOn(window.localStorage, 'getItem').mockReturnValue('1.0.1');
+    renderHook(() => useAppInitialization(), { wrapper });
+    expect(mockOpenModal).not.toHaveBeenCalled();
+  });
+
+  it('should set dark mode from user profile', async () => {
+    mockedUseAuth.mockReturnValue({
+      ...mockedUseAuth(),
+      userProfile: createMockUserProfile({ preferences: { darkMode: true } }),
+    });
+    const { result } = renderHook(() => useAppInitialization(), { wrapper });
+    await waitFor(() => {
+      expect(result.current.isDarkMode).toBe(true);
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+    });
+  });
+
+  it('should set dark mode from localStorage', async () => {
+    vi.spyOn(window.localStorage, 'getItem').mockImplementation((key) =>
+      key === 'darkMode' ? 'true' : null,
+    );
+    const { result } = renderHook(() => useAppInitialization(), { wrapper });
+    await waitFor(() => {
+      expect(result.current.isDarkMode).toBe(true);
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+    });
+  });
+
+  it('should set dark mode from system preference', async () => {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: true } as any);
+    const { result } = renderHook(() => useAppInitialization(), { wrapper });
+    await waitFor(() => {
+      expect(result.current.isDarkMode).toBe(true);
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+    });
+  });
+
+  it('should set unit system from user profile', async () => {
+    mockedUseAuth.mockReturnValue({
+      ...mockedUseAuth(),
+      userProfile: createMockUserProfile({ preferences: { unitSystem: 'metric' } }),
+    });
+    const { result } = renderHook(() => useAppInitialization(), { wrapper });
+    await waitFor(() => {
+      expect(result.current.unitSystem).toBe('metric');
+    });
+  });
+
+  it('should set unit system from localStorage', async () => {
+    vi.spyOn(window.localStorage, 'getItem').mockImplementation((key) =>
+      key === 'unitSystem' ? 'metric' : null,
+    );
+    const { result } = renderHook(() => useAppInitialization(), { wrapper });
+    await waitFor(() => {
+      expect(result.current.unitSystem).toBe('metric');
+    });
+  });
+});

src/hooks/useAppInitialization.ts

@@ -0,0 +1,88 @@
+// src/hooks/useAppInitialization.ts
+import { useState, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useAuth } from './useAuth';
+import { useModal } from './useModal';
+import { logger } from '../services/logger.client';
+import config from '../config';
+
+export const useAppInitialization = () => {
+  const { userProfile, login } = useAuth();
+  const { openModal } = useModal();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [unitSystem, setUnitSystem] = useState<'metric' | 'imperial'>('imperial');
+
+  // Effect to handle the token from Google/GitHub OAuth redirect
+  useEffect(() => {
+    const urlParams = new URLSearchParams(location.search);
+    const googleToken = urlParams.get('googleAuthToken');
+
+    if (googleToken) {
+      logger.info('Received Google Auth token from URL. Authenticating...');
+      login(googleToken).catch((err) =>
+        logger.error('Failed to log in with Google token', { error: err }),
+      );
+      navigate(location.pathname, { replace: true });
+    }
+
+    const githubToken = urlParams.get('githubAuthToken');
+    if (githubToken) {
+      logger.info('Received GitHub Auth token from URL. Authenticating...');
+      login(githubToken).catch((err) => {
+        logger.error('Failed to log in with GitHub token', { error: err });
+      });
+      navigate(location.pathname, { replace: true });
+    }
+  }, [login, location.search, navigate, location.pathname]);
+
+  // Effect to handle "What's New" modal
+  useEffect(() => {
+    const appVersion = config.app.version;
+    if (appVersion) {
+      logger.info(`Application version: ${appVersion}`);
+      const lastSeenVersion = localStorage.getItem('lastSeenVersion');
+      if (appVersion !== lastSeenVersion) {
+        openModal('whatsNew');
+        localStorage.setItem('lastSeenVersion', appVersion);
+      }
+    }
+  }, [openModal]);
+
+  // Effect to set initial theme based on user profile, local storage, or system preference
+  useEffect(() => {
+    let darkModeValue: boolean;
+    if (userProfile && userProfile.preferences?.darkMode !== undefined) {
+      // Preference from DB
+      darkModeValue = userProfile.preferences.darkMode;
+    } else {
+      // Fallback to local storage or system preference
+      const savedMode = localStorage.getItem('darkMode');
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      darkModeValue = savedMode !== null ? savedMode === 'true' : prefersDark;
+    }
+    setIsDarkMode(darkModeValue);
+    document.documentElement.classList.toggle('dark', darkModeValue);
+    // Also save to local storage if coming from profile, to persist on logout
+    if (userProfile && userProfile.preferences?.darkMode !== undefined) {
+      localStorage.setItem('darkMode', String(userProfile.preferences.darkMode));
+    }
+  }, [userProfile?.preferences?.darkMode, userProfile?.user.user_id]);
+
+  // Effect to set initial unit system based on user profile or local storage
+  useEffect(() => {
+    if (userProfile && userProfile.preferences?.unitSystem) {
+      setUnitSystem(userProfile.preferences.unitSystem);
+      localStorage.setItem('unitSystem', userProfile.preferences.unitSystem);
+    } else {
+      const savedSystem = localStorage.getItem('unitSystem') as 'metric' | 'imperial' | null;
+      if (savedSystem) {
+        setUnitSystem(savedSystem);
+      }
+    }
+  }, [userProfile?.preferences?.unitSystem, userProfile?.user.user_id]);
+
+  return { isDarkMode, unitSystem };
+};