ci: Bump version to 0.2.7 [skip ci]

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "flyer-crawler",
-  "version": "0.2.4",
+  "version": "0.2.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "flyer-crawler",
-      "version": "0.2.4",
+      "version": "0.2.7",
       "dependencies": {
         "@bull-board/api": "^6.14.2",
         "@bull-board/express": "^6.14.2",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "flyer-crawler",
   "private": true,
-  "version": "0.2.4",
+  "version": "0.2.7",
   "type": "module",
   "scripts": {
     "dev": "concurrently \"npm:start:dev\" \"vite\"",

src/App.test.tsx

@@ -20,6 +20,8 @@ import {
   mockUseUserData,
   mockUseFlyerItems,
 } from './tests/setup/mockHooks';
+import { useAppInitialization } from './hooks/useAppInitialization';
+import { useModal } from './hooks/useModal';
 
 // Mock top-level components rendered by App's routes
 
@@ -52,6 +54,13 @@ vi.mock('./hooks/useFlyerItems', async () => {
   return { useFlyerItems: hooks.mockUseFlyerItems };
 });
 
+vi.mock('./hooks/useAppInitialization');
+const mockedUseAppInitialization = vi.mocked(useAppInitialization);
+
+// Mock useModal directly in this file to avoid dependency on mockHooks.ts
+vi.mock('./hooks/useModal');
+const mockedUseModal = vi.mocked(useModal);
+
 vi.mock('./hooks/useAuth', async () => {
   const hooks = await import('./tests/setup/mockHooks');
   return { useAuth: hooks.mockUseAuth };
@@ -122,7 +131,13 @@ vi.mock('./layouts/MainLayout', async () => {
   return { MainLayout: MockMainLayout };
 });
 
-const mockedAiApiClient = vi.mocked(aiApiClient); // Mock aiApiClient
+vi.mock('./components/AppGuard', () => ({
+  AppGuard: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="app-guard-mock">{children}</div>
+  ),
+}));
+
+const mockedAiApiClient = vi.mocked(aiApiClient);
 const mockedApiClient = vi.mocked(apiClient);
 
 const mockFlyers: Flyer[] = [
@@ -131,33 +146,6 @@ const mockFlyers: Flyer[] = [
 ];
 
 describe('App Component', () => {
-  // Mock localStorage
-  let storage: { [key: string]: string } = {};
-  const localStorageMock = {
-    getItem: vi.fn((key: string) => storage[key] || null),
-    setItem: vi.fn((key: string, value: string) => {
-      storage[key] = value;
-    }),
-    removeItem: vi.fn((key: string) => {
-      delete storage[key];
-    }),
-    clear: vi.fn(() => {
-      storage = {};
-    }),
-  };
-
-  // Mock matchMedia
-  const matchMediaMock = vi.fn().mockImplementation((query) => ({
-    matches: false, // Default to light mode
-    media: query,
-    onchange: null,
-    addListener: vi.fn(), // deprecated
-    removeListener: vi.fn(), // deprecated
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  }));
-
   beforeEach(() => {
     console.log('[TEST DEBUG] beforeEach: Clearing mocks and setting up defaults');
     vi.clearAllMocks();
@@ -205,11 +193,14 @@ describe('App Component', () => {
     mockUseFlyerItems.mockReturnValue({
       flyerItems: [],
       isLoading: false,
+      error: null,
+    });
+    mockedUseAppInitialization.mockReturnValue({ isDarkMode: false, unitSystem: 'imperial' });
+    mockedUseModal.mockReturnValue({
+      isModalOpen: vi.fn(),
+      openModal: vi.fn(),
+      closeModal: vi.fn(),
     });
-    // Clear local storage to prevent state from leaking between tests.
-    localStorage.clear();
-    Object.defineProperty(window, 'localStorage', { value: localStorageMock, configurable: true });
-    Object.defineProperty(window, 'matchMedia', { value: matchMediaMock, configurable: true });
 
     // Default mocks for API calls
     // Use mockImplementation to create a new Response object for each call,
@@ -261,6 +252,7 @@ describe('App Component', () => {
 
   it('should render the main layout and header', async () => {
     // Simulate the auth hook finishing its initial check
+    mockedUseAppInitialization.mockReturnValue({ isDarkMode: false, unitSystem: 'imperial' });
     mockUseAuth.mockReturnValue({
       userProfile: null,
       authStatus: 'SIGNED_OUT',
@@ -272,6 +264,7 @@ describe('App Component', () => {
 
     renderApp();
     await waitFor(() => {
+      expect(screen.getByTestId('app-guard-mock')).toBeInTheDocument();
       expect(screen.getByTestId('header-mock')).toBeInTheDocument();
       // Check that the main layout and home page are rendered for the root path
       expect(screen.getByTestId('main-layout-mock')).toBeInTheDocument();
@@ -364,193 +357,6 @@ describe('App Component', () => {
     });
   });
 
-  describe('Theme and Unit System Synchronization', () => {
-    it('should set dark mode based on user profile preferences', async () => {
-      console.log(
-        '[TEST DEBUG] Test Start: should set dark mode based on user profile preferences',
-      );
-      const profileWithDarkMode: UserProfile = createMockUserProfile({
-        user: createMockUser({ user_id: 'user-1', email: 'dark@mode.com' }),
-        role: 'user',
-        points: 0,
-        preferences: { darkMode: true },
-      });
-      mockUseAuth.mockReturnValue({
-        userProfile: profileWithDarkMode,
-        authStatus: 'AUTHENTICATED',
-        isLoading: false,
-        login: vi.fn(),
-        logout: vi.fn(),
-        updateProfile: vi.fn(),
-      });
-
-      console.log('[TEST DEBUG] Rendering App');
-      renderApp();
-      // The useEffect that sets the theme is asynchronous. We must wait for the update.
-      await waitFor(() => {
-        console.log(
-          '[TEST DEBUG] Checking for dark class. Current classes:',
-          document.documentElement.className,
-        );
-        expect(document.documentElement).toHaveClass('dark');
-      });
-    });
-
-    it('should set light mode based on user profile preferences', async () => {
-      const profileWithLightMode: UserProfile = createMockUserProfile({
-        user: createMockUser({ user_id: 'user-1', email: 'light@mode.com' }),
-        role: 'user',
-        points: 0,
-        preferences: { darkMode: false },
-      });
-      mockUseAuth.mockReturnValue({
-        userProfile: profileWithLightMode,
-        authStatus: 'AUTHENTICATED',
-        isLoading: false,
-        login: vi.fn(),
-        logout: vi.fn(),
-        updateProfile: vi.fn(),
-      });
-      renderApp();
-      await waitFor(() => {
-        expect(document.documentElement).not.toHaveClass('dark');
-      });
-    });
-
-    it('should set dark mode based on localStorage if profile has no preference', async () => {
-      localStorageMock.setItem('darkMode', 'true');
-      renderApp();
-      await waitFor(() => {
-        expect(document.documentElement).toHaveClass('dark');
-      });
-    });
-
-    it('should set dark mode based on system preference if no other setting exists', async () => {
-      matchMediaMock.mockImplementationOnce((query) => ({ matches: true, media: query }));
-      renderApp();
-      await waitFor(() => {
-        expect(document.documentElement).toHaveClass('dark');
-      });
-    });
-
-    it('should set unit system based on user profile preferences', async () => {
-      const profileWithMetric: UserProfile = createMockUserProfile({
-        user: createMockUser({ user_id: 'user-1', email: 'metric@user.com' }),
-        role: 'user',
-        points: 0,
-        preferences: { unitSystem: 'metric' },
-      });
-      mockUseAuth.mockReturnValue({
-        userProfile: profileWithMetric,
-        authStatus: 'AUTHENTICATED',
-        isLoading: false,
-        login: vi.fn(),
-        logout: vi.fn(),
-        updateProfile: vi.fn(),
-      });
-
-      renderApp();
-      // The unit system is passed as a prop to Header, which is mocked.
-      // We can't directly see the result in the DOM easily, so we trust the state is set.
-      // A more integrated test would be needed to verify the Header receives the prop.
-      // For now, this test ensures the useEffect logic runs without crashing.
-      await waitFor(() => {
-        expect(screen.getByTestId('header-mock')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('OAuth Token Handling', () => {
-    it('should call login when a googleAuthToken is in the URL', async () => {
-      console.log(
-        '[TEST DEBUG] Test Start: should call login when a googleAuthToken is in the URL',
-      );
-      const mockLogin = vi.fn().mockResolvedValue(undefined);
-      mockUseAuth.mockReturnValue({
-        userProfile: null,
-        authStatus: 'SIGNED_OUT',
-        isLoading: false,
-        login: mockLogin,
-        logout: vi.fn(),
-        updateProfile: vi.fn(),
-      });
-
-      console.log('[TEST DEBUG] Rendering App with googleAuthToken');
-      renderApp(['/?googleAuthToken=test-google-token']);
-
-      await waitFor(() => {
-        console.log('[TEST DEBUG] Checking mockLogin calls:', mockLogin.mock.calls);
-        expect(mockLogin).toHaveBeenCalledWith('test-google-token');
-      });
-    });
-
-    it('should call login when a githubAuthToken is in the URL', async () => {
-      console.log(
-        '[TEST DEBUG] Test Start: should call login when a githubAuthToken is in the URL',
-      );
-      const mockLogin = vi.fn().mockResolvedValue(undefined);
-      mockUseAuth.mockReturnValue({
-        userProfile: null,
-        authStatus: 'SIGNED_OUT',
-        isLoading: false,
-        login: mockLogin,
-        logout: vi.fn(),
-        updateProfile: vi.fn(),
-      });
-
-      console.log('[TEST DEBUG] Rendering App with githubAuthToken');
-      renderApp(['/?githubAuthToken=test-github-token']);
-
-      await waitFor(() => {
-        console.log('[TEST DEBUG] Checking mockLogin calls:', mockLogin.mock.calls);
-        expect(mockLogin).toHaveBeenCalledWith('test-github-token');
-      });
-    });
-
-    it('should log an error if login with a GitHub token fails', async () => {
-      console.log(
-        '[TEST DEBUG] Test Start: should log an error if login with a GitHub token fails',
-      );
-      const mockLogin = vi.fn().mockRejectedValue(new Error('GitHub login failed'));
-      mockUseAuth.mockReturnValue({
-        userProfile: null,
-        authStatus: 'SIGNED_OUT',
-        isLoading: false,
-        login: mockLogin,
-        logout: vi.fn(),
-        updateProfile: vi.fn(),
-      });
-
-      console.log('[TEST DEBUG] Rendering App with githubAuthToken');
-      renderApp(['/?githubAuthToken=bad-token']);
-
-      await waitFor(() => {
-        console.log('[TEST DEBUG] Checking mockLogin calls:', mockLogin.mock.calls);
-        expect(mockLogin).toHaveBeenCalled();
-      });
-    });
-
-    it('should log an error if login with a token fails', async () => {
-      console.log('[TEST DEBUG] Test Start: should log an error if login with a token fails');
-      const mockLogin = vi.fn().mockRejectedValue(new Error('Token login failed'));
-      mockUseAuth.mockReturnValue({
-        userProfile: null,
-        authStatus: 'SIGNED_OUT',
-        isLoading: false,
-        login: mockLogin,
-        logout: vi.fn(),
-        updateProfile: vi.fn(),
-      });
-
-      console.log('[TEST DEBUG] Rendering App with googleAuthToken');
-      renderApp(['/?googleAuthToken=bad-token']);
-      await waitFor(() => {
-        console.log('[TEST DEBUG] Checking mockLogin calls:', mockLogin.mock.calls);
-        expect(mockLogin).toHaveBeenCalled();
-      });
-    });
-  });
-
   describe('Flyer Selection from URL', () => {
     it('should select a flyer when flyerId is present in the URL', async () => {
       renderApp(['/flyers/2']);
@@ -583,21 +389,6 @@ describe('App Component', () => {
     });
   });
 
-  describe('Version and "What\'s New" Modal', () => {
-    it('should show the "What\'s New" modal if the app version is new', async () => {
-      // Mock the config module for this specific test
-      vi.mock('./config', () => ({
-        default: {
-          app: { version: '20250101-1200:abc1234:1.0.1', commitMessage: 'New feature!', commitUrl: '#' },
-          google: { mapsEmbedApiKey: 'mock-key' },
-        },
-      }));
-      localStorageMock.setItem('lastSeenVersion', '20250101-1200:abc1234:1.0.0');
-      renderApp();
-      await expect(screen.findByTestId('whats-new-modal-mock')).resolves.toBeInTheDocument();
-    });
-  });
-
   describe('Modal Interactions', () => {
     it('should open and close the ProfileManager modal', async () => {
       renderApp();
@@ -735,64 +526,6 @@ describe('App Component', () => {
     });
   });
 
-  describe("Version Display and What's New", () => {
-    beforeEach(() => {
-      // Also mock the config module to reflect this change
-      vi.mock('./config', () => ({
-        default: {
-          app: {
-            version: '20250101-1200:abc1234:2.0.0',
-            commitMessage: 'A new version!',
-            commitUrl: 'http://example.com/commit/2.0.0',
-          },
-          google: { mapsEmbedApiKey: 'mock-key' },
-        },
-      }));
-    });
-
-    it('should display the version number and commit link', () => {
-      renderApp();
-      const versionLink = screen.getByText(`Version: 20250101-1200:abc1234:2.0.0`);
-      expect(versionLink).toBeInTheDocument();
-      expect(versionLink).toHaveAttribute('href', 'http://example.com/commit/2.0.0');
-    });
-
-    it('should open the "What\'s New" modal when the question mark icon is clicked', async () => {
-      // Pre-set the localStorage to prevent the modal from opening automatically
-      localStorageMock.setItem('lastSeenVersion', '20250101-1200:abc1234:2.0.0');
-
-      renderApp();
-      expect(screen.queryByTestId('whats-new-modal-mock')).not.toBeInTheDocument();
-
-      const openButton = await screen.findByTitle("Show what's new in this version");
-      fireEvent.click(openButton);
-
-      expect(await screen.findByTestId('whats-new-modal-mock')).toBeInTheDocument();
-    });
-  });
-
-  describe('Dynamic Toaster Styles', () => {
-    it('should render the correct CSS variables for toast styling in light mode', async () => {
-      renderApp();
-      await waitFor(() => {
-        const styleTag = document.querySelector('style');
-        expect(styleTag).not.toBeNull();
-        expect(styleTag!.innerHTML).toContain('--toast-bg: #FFFFFF');
-        expect(styleTag!.innerHTML).toContain('--toast-color: #1F2937');
-      });
-    });
-
-    it('should render the correct CSS variables for toast styling in dark mode', async () => {
-      localStorageMock.setItem('darkMode', 'true');
-      renderApp();
-      await waitFor(() => {
-        const styleTag = document.querySelector('style');
-        expect(styleTag).not.toBeNull();
-        expect(styleTag!.innerHTML).toContain('--toast-bg: #4B5563');
-      });
-    });
-  });
-
   describe('Profile and Login Handlers', () => {
     it('should call updateProfile when handleProfileUpdate is triggered', async () => {
       console.log(
@@ -841,6 +574,13 @@ describe('App Component', () => {
         logout: vi.fn(),
         updateProfile: vi.fn(),
       });
+      // Mock the login function to simulate a successful login. Signature: (token, profile)
+      const mockLoginSuccess = vi.fn(async (_token: string, _profile?: UserProfile) => {
+        // Simulate fetching profile after login
+        const profileResponse = await mockedApiClient.getAuthenticatedUserProfile();
+        const userProfileData: UserProfile = await profileResponse.json();
+        mockUseAuth.mockReturnValue({ ...mockUseAuth(), userProfile: userProfileData, authStatus: 'AUTHENTICATED' });
+      });
 
       console.log('[TEST DEBUG] Rendering App');
       renderApp();
@@ -857,4 +597,32 @@ describe('App Component', () => {
       });
     });
   });
+
+  describe("Version Display and What's New", () => {
+    beforeEach(() => {
+      vi.mock('./config', () => ({
+        default: {
+          app: {
+            version: '2.0.0',
+            commitMessage: 'A new version!',
+            commitUrl: 'http://example.com/commit/2.0.0',
+          },
+        },
+      }));
+    });
+
+    it('should display the version number and commit link', () => {
+      renderApp();
+      const versionLink = screen.getByText(`Version: 2.0.0`);
+      expect(versionLink).toBeInTheDocument();
+      expect(versionLink).toHaveAttribute('href', 'http://example.com/commit/2.0.0');
+    });
+
+    it('should open the "What\'s New" modal when the question mark icon is clicked', async () => {
+      renderApp();
+      const openButton = await screen.findByTitle("Show what's new in this version");
+      fireEvent.click(openButton);
+      expect(mockedUseModal().openModal).toHaveBeenCalledWith('whatsNew');
+    });
+  });
 });

src/App.tsx

@@ -1,10 +1,9 @@
 // src/App.tsx
 import React, { useState, useCallback, useEffect } from 'react';
-import { Routes, Route, useParams, useLocation, useNavigate } from 'react-router-dom';
+import { Routes, Route, useParams } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Toaster } from 'react-hot-toast';
 import * as pdfjsLib from 'pdfjs-dist';
-import { Footer } from './components/Footer'; // Assuming this is where your Footer component will live
+import { Footer } from './components/Footer';
 import { Header } from './components/Header';
 import { logger } from './services/logger.client';
 import type { Flyer, Profile, UserProfile } from './types';
@@ -16,16 +15,17 @@ import { CorrectionsPage } from './pages/admin/CorrectionsPage';
 import { AdminStatsPage } from './pages/admin/AdminStatsPage';
 import { ResetPasswordPage } from './pages/ResetPasswordPage';
 import { VoiceLabPage } from './pages/VoiceLabPage';
-import { WhatsNewModal } from './components/WhatsNewModal';
 import { FlyerCorrectionTool } from './components/FlyerCorrectionTool';
 import { QuestionMarkCircleIcon } from './components/icons/QuestionMarkCircleIcon';
 import { useAuth } from './hooks/useAuth';
-import { useFlyers } from './hooks/useFlyers'; // Assuming useFlyers fetches all flyers
-import { useFlyerItems } from './hooks/useFlyerItems'; // Import the new hook for flyer items
+import { useFlyers } from './hooks/useFlyers';
+import { useFlyerItems } from './hooks/useFlyerItems';
 import { useModal } from './hooks/useModal';
 import { MainLayout } from './layouts/MainLayout';
 import config from './config';
 import { HomePage } from './pages/HomePage';
+import { AppGuard } from './components/AppGuard';
+import { useAppInitialization } from './hooks/useAppInitialization';
 
 // pdf.js worker configuration
 // This is crucial for allowing pdf.js to process PDFs in a separate thread, preventing the UI from freezing.
@@ -44,10 +44,12 @@ function App() {
   const { flyers } = useFlyers();
   const [selectedFlyer, setSelectedFlyer] = useState<Flyer | null>(null);
   const { openModal, closeModal, isModalOpen } = useModal();
-  const location = useLocation();
-  const navigate = useNavigate();
   const params = useParams<{ flyerId?: string }>();
 
+  // This hook now handles initialization effects (OAuth, version check, theme)
+  // and returns the theme/unit state needed by other components.
+  const { isDarkMode, unitSystem } = useAppInitialization();
+
   // Debugging: Log renders to identify infinite loops
   useEffect(() => {
     if (process.env.NODE_ENV === 'test') {
@@ -57,14 +59,11 @@ function App() {
         paramsFlyerId: params?.flyerId, // This was a duplicate, fixed.
         authStatus,
         profileId: userProfile?.user.user_id,
-        locationSearch: location.search,
       });
     }
   });
 
-  const [isDarkMode, setIsDarkMode] = useState(false);
   const { flyerItems } = useFlyerItems(selectedFlyer);
-  const [unitSystem, setUnitSystem] = useState<'metric' | 'imperial'>('imperial');
 
   // Define modal handlers with useCallback at the top level to avoid Rules of Hooks violations
   const handleOpenProfile = useCallback(() => openModal('profile'), [openModal]);
@@ -109,37 +108,6 @@ function App() {
 
   // --- State Synchronization and Error Handling ---
 
-  // Effect to set initial theme based on user profile, local storage, or system preference
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'test')
-      console.log('[App] Effect: Theme Update', { profileId: userProfile?.user.user_id });
-    if (userProfile && userProfile.preferences?.darkMode !== undefined) {
-      // Preference from DB
-      const dbDarkMode = userProfile.preferences.darkMode;
-      setIsDarkMode(dbDarkMode);
-      document.documentElement.classList.toggle('dark', dbDarkMode);
-    } else {
-      // Fallback to local storage or system preference
-      const savedMode = localStorage.getItem('darkMode');
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const initialDarkMode = savedMode !== null ? savedMode === 'true' : prefersDark;
-      setIsDarkMode(initialDarkMode);
-      document.documentElement.classList.toggle('dark', initialDarkMode);
-    }
-  }, [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);
-    } else {
-      const savedSystem = localStorage.getItem('unitSystem') as 'metric' | 'imperial' | null;
-      if (savedSystem) {
-        setUnitSystem(savedSystem);
-      }
-    }
-  }, [userProfile?.preferences?.unitSystem, userProfile?.user.user_id]);
-
   // This is the login handler that will be passed to the ProfileManager component.
   const handleLoginSuccess = useCallback(
     async (userProfile: UserProfile, token: string, _rememberMe: boolean) => {
@@ -157,36 +125,6 @@ function App() {
     [login],
   );
 
-  // Effect to handle the token from Google 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...');
-      // The login flow is now handled by the useAuth hook. We just need to trigger it.
-      // We pass only the token; the AuthProvider will fetch the user profile.
-      login(googleToken).catch((err) =>
-        logger.error('Failed to log in with Google token', { error: err }),
-      );
-      // Clean the token from the URL
-      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 });
-        // Optionally, redirect to a page with an error message
-        // navigate('/login?error=github_auth_failed');
-      });
-
-      // Clean the token from the URL
-      navigate(location.pathname, { replace: true });
-    }
-  }, [login, location.search, navigate, location.pathname]);
-
   const handleFlyerSelect = useCallback(async (flyer: Flyer) => {
     setSelectedFlyer(flyer);
   }, []);
@@ -214,31 +152,10 @@ function App() {
   // Read the application version injected at build time.
   // This will only be available in the production build, not during local development.
   const appVersion = config.app.version;
-  const commitMessage = config.app.commitMessage;
-  useEffect(() => {
-    if (appVersion) {
-      logger.info(`Application version: ${appVersion}`);
-      const lastSeenVersion = localStorage.getItem('lastSeenVersion');
-      // If the current version is new, show the "What's New" modal.
-      if (appVersion !== lastSeenVersion) {
-        openModal('whatsNew');
-        localStorage.setItem('lastSeenVersion', appVersion);
-      }
-    }
-  }, [appVersion]);
 
   return (
-    <div className="bg-gray-100 dark:bg-gray-950 min-h-screen font-sans text-gray-800 dark:text-gray-200">
-      {/* Toaster component for displaying notifications. It's placed at the top level. */}
-      <Toaster position="top-center" reverseOrder={false} />
-      {/* Add CSS variables for toast theming based on dark mode */}
-      <style>{`
-        :root {
-          --toast-bg: ${isDarkMode ? '#4B5563' : '#FFFFFF'};
-          --toast-color: ${isDarkMode ? '#F9FAFB' : '#1F2937'};
-        }
-      `}</style>
-
+    // AppGuard now handles the main page wrapper, theme styles, and "What's New" modal
+    <AppGuard>
       <Header
         isDarkMode={isDarkMode}
         unitSystem={unitSystem}
@@ -265,15 +182,6 @@ function App() {
         />
       )}
 
-      {appVersion && commitMessage && (
-        <WhatsNewModal
-          isOpen={isModalOpen('whatsNew')}
-          onClose={handleCloseWhatsNew}
-          version={appVersion}
-          commitMessage={commitMessage}
-        />
-      )}
-
       {selectedFlyer && (
         <FlyerCorrectionTool
           isOpen={isModalOpen('correctionTool')}
@@ -345,7 +253,7 @@ function App() {
       )}
 
       <Footer />
-    </div>
+    </AppGuard>
   );
 }
 

src/components/AnonymousUserBanner.test.tsx

@@ -5,7 +5,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { AnonymousUserBanner } from './AnonymousUserBanner';
 
 // Mock the icon to ensure it is rendered correctly
-vi.mock('../../../components/icons/InformationCircleIcon', () => ({
+vi.mock('./icons/InformationCircleIcon', () => ({
   InformationCircleIcon: (props: React.SVGProps<SVGSVGElement>) => (
     <svg data-testid="info-icon" {...props} />
   ),

src/components/AnonymousUserBanner.tsx

@@ -1,6 +1,6 @@
-// src/pages/admin/components/AnonymousUserBanner.tsx
+// src/components/AnonymousUserBanner.tsx
 import React from 'react';
-import { InformationCircleIcon } from '../../../components/icons/InformationCircleIcon';
+import { InformationCircleIcon } from './icons/InformationCircleIcon';
 
 interface AnonymousUserBannerProps {
   /**

src/components/AppGuard.test.tsx

@@ -0,0 +1,93 @@
+// src/components/AppGuard.test.tsx
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { AppGuard } from './AppGuard';
+import { useAppInitialization } from '../hooks/useAppInitialization';
+import { useModal } from '../hooks/useModal';
+
+// Mock dependencies
+vi.mock('../hooks/useAppInitialization');
+vi.mock('../hooks/useModal');
+vi.mock('./WhatsNewModal', () => ({
+  WhatsNewModal: ({ isOpen }: { isOpen: boolean }) =>
+    isOpen ? <div data-testid="whats-new-modal-mock" /> : null,
+}));
+vi.mock('../config', () => ({
+  default: {
+    app: { version: '1.0.0', commitMessage: 'Test commit' },
+  },
+}));
+
+const mockedUseAppInitialization = vi.mocked(useAppInitialization);
+const mockedUseModal = vi.mocked(useModal);
+
+describe('AppGuard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default mocks
+    mockedUseAppInitialization.mockReturnValue({
+      isDarkMode: false,
+      unitSystem: 'imperial',
+    });
+    mockedUseModal.mockReturnValue({
+      isModalOpen: vi.fn().mockReturnValue(false),
+      openModal: vi.fn(),
+      closeModal: vi.fn(),
+    });
+  });
+
+  it('should render children', () => {
+    render(
+      <AppGuard>
+        <div>Child Content</div>
+      </AppGuard>,
+    );
+    expect(screen.getByText('Child Content')).toBeInTheDocument();
+  });
+
+  it('should render WhatsNewModal when it is open', () => {
+    mockedUseModal.mockReturnValue({
+      ...mockedUseModal(),
+      isModalOpen: (modalId) => modalId === 'whatsNew',
+    });
+    render(
+      <AppGuard>
+        <div>Child</div>
+      </AppGuard>,
+    );
+    expect(screen.getByTestId('whats-new-modal-mock')).toBeInTheDocument();
+  });
+
+  it('should set dark mode styles for toaster', async () => {
+    mockedUseAppInitialization.mockReturnValue({
+      isDarkMode: true,
+      unitSystem: 'imperial',
+    });
+    render(
+      <AppGuard>
+        <div>Child</div>
+      </AppGuard>,
+    );
+    await waitFor(() => {
+      const styleTag = document.querySelector('style');
+      expect(styleTag).not.toBeNull();
+      expect(styleTag!.innerHTML).toContain('--toast-bg: #4B5563');
+      expect(styleTag!.innerHTML).toContain('--toast-color: #F9FAFB');
+    });
+  });
+
+  it('should set light mode styles for toaster', async () => {
+    render(
+      <AppGuard>
+        <div>Child</div>
+      </AppGuard>,
+    );
+    await waitFor(() => {
+      const styleTag = document.querySelector('style');
+      expect(styleTag).not.toBeNull();
+      expect(styleTag!.innerHTML).toContain('--toast-bg: #FFFFFF');
+      expect(styleTag!.innerHTML).toContain('--toast-color: #1F2937');
+    });
+  });
+});

src/components/AppGuard.tsx

@@ -0,0 +1,47 @@
+// src/components/AppGuard.tsx
+import React, { useCallback } from 'react';
+import { Toaster } from 'react-hot-toast';
+import { useAppInitialization } from '../hooks/useAppInitialization';
+import { useModal } from '../hooks/useModal';
+import { WhatsNewModal } from './WhatsNewModal';
+import config from '../config';
+
+interface AppGuardProps {
+  children: React.ReactNode;
+}
+
+export const AppGuard: React.FC<AppGuardProps> = ({ children }) => {
+  // This hook handles OAuth tokens, version checks, and returns theme state.
+  const { isDarkMode } = useAppInitialization();
+  const { isModalOpen, closeModal } = useModal();
+
+  const handleCloseWhatsNew = useCallback(() => closeModal('whatsNew'), [closeModal]);
+
+  const appVersion = config.app.version;
+  const commitMessage = config.app.commitMessage;
+
+  return (
+    <div className="bg-gray-100 dark:bg-gray-950 min-h-screen font-sans text-gray-800 dark:text-gray-200">
+      {/* Toaster component for displaying notifications. It's placed at the top level. */}
+      <Toaster position="top-center" reverseOrder={false} />
+      {/* Add CSS variables for toast theming based on dark mode */}
+      <style>{`
+        :root {
+          --toast-bg: ${isDarkMode ? '#4B5563' : '#FFFFFF'};
+          --toast-color: ${isDarkMode ? '#F9FAFB' : '#1F2937'};
+        }
+      `}</style>
+
+      {appVersion && commitMessage && (
+        <WhatsNewModal
+          isOpen={isModalOpen('whatsNew')}
+          onClose={handleCloseWhatsNew}
+          version={appVersion}
+          commitMessage={commitMessage}
+        />
+      )}
+
+      {children}
+    </div>
+  );
+};

src/components/PasswordInput.tsx

@@ -1,7 +1,10 @@
 // src/pages/admin/components/PasswordInput.tsx
+// src/components/PasswordInput.tsx
 import React, { useState } from 'react';
-import { EyeIcon } from '../../../components/icons/EyeIcon';
-import { EyeSlashIcon } from '../../../components/icons/EyeSlashIcon';
+import { EyeIcon } from './icons/EyeIcon';
+import { EyeSlashIcon } from './icons/EyeSlashIcon';
+import { EyeIcon } from './icons/EyeIcon';
+import { EyeSlashIcon } from './icons/EyeSlashIcon';
 import { PasswordStrengthIndicator } from './PasswordStrengthIndicator';
 
 /**

src/components/PasswordStrengthIndicator.tsx

@@ -1,4 +1,5 @@
 // src/pages/admin/components/PasswordStrengthIndicator.tsx
+// src/components/PasswordStrengthIndicator.tsx
 import React from 'react';
 import zxcvbn from 'zxcvbn';
 

src/features/flyer/FlyerUploader.test.tsx

@@ -65,8 +65,6 @@ describe('FlyerUploader', () => {
       return () => {};
     });
     console.log(`\n--- [TEST LOG] ---: Starting test: "${expect.getState().currentTestName}"`);
-    // Use fake timers to control polling intervals.
-    vi.useFakeTimers();
     vi.resetAllMocks(); // Resets mock implementations AND call history.
     console.log('--- [TEST LOG] ---: Mocks reset.');
     mockedChecksumModule.generateFileChecksum.mockResolvedValue('mock-checksum');
@@ -74,7 +72,6 @@ describe('FlyerUploader', () => {
   });
 
   afterEach(() => {
-    vi.useRealTimers();
     console.log(`--- [TEST LOG] ---: Finished test: "${expect.getState().currentTestName}"\n`);
   });
 
@@ -117,21 +114,18 @@ describe('FlyerUploader', () => {
     expect(mockedAiApiClient.getJobStatus).toHaveBeenCalledTimes(1);
     console.log('--- [TEST LOG] ---: 7. Mocks verified. Advancing timers now...');
 
-    await act(async () => {
-      console.log('--- [TEST LOG] ---: 8a. vi.advanceTimersByTime(3000) starting...');
-      vi.advanceTimersByTime(3000);
-      console.log('--- [TEST LOG] ---: 8b. vi.advanceTimersByTime(3000) complete.');
-    });
+    // With real timers, we now wait for the polling interval to elapse.
     console.log(
       `--- [TEST LOG] ---: 9. Act block finished. Now checking if getJobStatus was called again.`,
     );
 
     try {
+      // The polling interval is 3s, so we wait for a bit longer.
       await waitFor(() => {
         const calls = mockedAiApiClient.getJobStatus.mock.calls.length;
         console.log(`--- [TEST LOG] ---: 10. waitFor check: getJobStatus calls = ${calls}`);
         expect(mockedAiApiClient.getJobStatus).toHaveBeenCalledTimes(2);
-      });
+      }, { timeout: 4000 });
       console.log('--- [TEST LOG] ---: 11. SUCCESS: Second poll confirmed.');
     } catch (error) {
       console.error('--- [TEST LOG] ---: 11. ERROR: waitFor for second poll timed out.');
@@ -194,24 +188,21 @@ describe('FlyerUploader', () => {
     expect(mockedAiApiClient.getJobStatus).toHaveBeenCalledTimes(1);
     console.log('--- [TEST LOG] ---: 5. First poll confirmed. Now AWAITING timer advancement.');
 
-    await act(async () => {
-      console.log(`--- [TEST LOG] ---: 6. Advancing timers by 4000ms for the second poll...`);
-      vi.advanceTimersByTime(4000);
-    });
-    console.log(`--- [TEST LOG] ---: 7. Timers advanced. Now AWAITING completion message.`);
-
     try {
       console.log(
         '--- [TEST LOG] ---: 8a. waitFor check: Waiting for completion text and job status count.',
       );
+      // Wait for the second poll to occur and the UI to update.
       await waitFor(() => {
         console.log(
-          `--- [TEST LOG] ---: 8b. waitFor interval: calls=${mockedAiApiClient.getJobStatus.mock.calls.length}`,
+          `--- [TEST LOG] ---: 8b. waitFor interval: calls=${
+            mockedAiApiClient.getJobStatus.mock.calls.length
+          }`,
         );
         expect(
           screen.getByText('Processing complete! Redirecting to flyer 42...'),
         ).toBeInTheDocument();
-      });
+      }, { timeout: 4000 });
       console.log('--- [TEST LOG] ---: 9. SUCCESS: Completion message found.');
     } catch (error) {
       console.error('--- [TEST LOG] ---: 9. ERROR: waitFor for completion message timed out.');
@@ -221,12 +212,9 @@ describe('FlyerUploader', () => {
     }
     expect(mockedAiApiClient.getJobStatus).toHaveBeenCalledTimes(2);
 
-    await act(async () => {
-      console.log(`--- [TEST LOG] ---: 10. Advancing timers by 2000ms for redirect...`);
-      vi.advanceTimersByTime(2000);
-    });
+    // Wait for the redirect timer (1.5s in component) to fire.
+    await act(() => new Promise((r) => setTimeout(r, 2000)));
     console.log(`--- [TEST LOG] ---: 11. Timers advanced. Now asserting navigation.`);
-
     expect(onProcessingComplete).toHaveBeenCalled();
     expect(navigateSpy).toHaveBeenCalledWith('/flyers/42');
     console.log('--- [TEST LOG] ---: 12. Callback and navigation confirmed.');
@@ -291,22 +279,16 @@ describe('FlyerUploader', () => {
     // Wait for the first poll to complete and UI to update to "Working..."
     await screen.findByText('Working...');
 
-    // Advance time to trigger the second poll
-    await act(async () => {
-      vi.advanceTimersByTime(3000);
-    });
-
     // Wait for the failure UI
-    await screen.findByText(/Processing failed: Fatal Error/i);
+    await waitFor(() => expect(screen.getByText(/Processing failed: Fatal Error/i)).toBeInTheDocument(), { timeout: 4000 });
 
     // Verify clearTimeout was called
     expect(clearTimeoutSpy).toHaveBeenCalled();
 
     // Verify no further polling occurs
     const callsBefore = mockedAiApiClient.getJobStatus.mock.calls.length;
-    await act(async () => {
-      vi.advanceTimersByTime(10000);
-    });
+    // Wait for a duration longer than the polling interval
+    await act(() => new Promise((r) => setTimeout(r, 4000)));
     expect(mockedAiApiClient.getJobStatus).toHaveBeenCalledTimes(callsBefore);
 
     clearTimeoutSpy.mockRestore();

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 };
+};

src/hooks/useAuth.test.tsx

@@ -150,6 +150,10 @@ describe('useAuth Hook and AuthProvider', () => {
   describe('login function', () => {
     // This was the failing test
     it('sets token, fetches profile, and updates state on successful login', async () => {
+      // --- FIX ---
+      // Explicitly mock that no token exists initially to prevent state leakage from other tests.
+      mockedTokenStorage.getToken.mockReturnValue(null);
+
       // --- FIX ---
       // The mock for `getAuthenticatedUserProfile` must resolve to a `Response`-like object,
       // as this is the return type of the actual function. The `useApi` hook then
@@ -302,6 +306,10 @@ describe('useAuth Hook and AuthProvider', () => {
     });
 
     it('should not update profile if user is not authenticated', async () => {
+      // --- FIX ---
+      // Explicitly mock that no token exists initially to prevent state leakage from other tests.
+      mockedTokenStorage.getToken.mockReturnValue(null);
+
       const { result } = renderHook(() => useAuth(), { wrapper });
 
       // Wait for initial check to complete

src/hooks/useFlyerUploader.ts

@@ -53,15 +53,9 @@ export const useFlyerUploader = () => {
       return 3000;
     },
     refetchOnWindowFocus: false, // No need to refetch on focus, interval is enough
-    retry: (failureCount, error: any) => {
-      // Don't retry for our custom JobFailedError, as it's a terminal state.
-      // Check for property instead of `instanceof` which can fail with vi.mock
-      if (error?.name === 'JobFailedError') {
-        return false;
-      }
-      // For other errors (like network issues), retry up to 3 times.
-      return failureCount < 3;
-    },
+    // If a poll fails (e.g., network error), don't retry automatically.
+    // The user can see the error and choose to retry manually if we build that feature.
+    retry: false,
   });
 
   const upload = useCallback(

src/layouts/MainLayout.tsx

@@ -16,7 +16,7 @@ import { PriceChart } from '../features/charts/PriceChart';
 import { PriceHistoryChart } from '../features/charts/PriceHistoryChart';
 import Leaderboard from '../components/Leaderboard';
 import { ActivityLog, ActivityLogClickHandler } from '../pages/admin/ActivityLog';
-import { AnonymousUserBanner } from '../pages/admin/components/AnonymousUserBanner';
+import { AnonymousUserBanner } from '../components/AnonymousUserBanner';
 import { ErrorDisplay } from '../components/ErrorDisplay';
 
 export interface MainLayoutProps {

src/middleware/multer.middleware.test.ts

@@ -0,0 +1,74 @@
+// src/middleware/multer.middleware.test.ts
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// 1. Hoist the mocks so they can be referenced inside vi.mock factories.
+const mocks = vi.hoisted(() => ({
+  mkdir: vi.fn(),
+  logger: {
+    info: vi.fn(),
+    error: vi.fn(),
+    warn: vi.fn(),
+    debug: vi.fn(),
+  },
+}));
+
+// 2. Mock node:fs/promises.
+// We mock the default export because that's how it's imported in the source file.
+vi.mock('node:fs/promises', () => ({
+  default: {
+    mkdir: mocks.mkdir,
+  },
+}));
+
+// 3. Mock the logger service.
+vi.mock('../services/logger.server', () => ({
+  logger: mocks.logger,
+}));
+
+// 4. Mock multer to prevent it from doing anything during import.
+vi.mock('multer', () => ({
+  default: vi.fn(() => ({
+    single: vi.fn(),
+    array: vi.fn(),
+  })),
+  diskStorage: vi.fn(),
+}));
+
+describe('Multer Middleware Directory Creation', () => {
+  beforeEach(() => {
+    // Critical: Reset modules to ensure the top-level IIFE runs again for each test.
+    vi.resetModules();
+    vi.clearAllMocks();
+  });
+
+  it('should attempt to create directories on module load and log success', async () => {
+    // Arrange
+    mocks.mkdir.mockResolvedValue(undefined);
+
+    // Act: Dynamic import triggers the top-level code execution
+    await import('./multer.middleware');
+
+    // Assert
+    // It should try to create both the flyer storage and avatar storage paths
+    expect(mocks.mkdir).toHaveBeenCalledTimes(2);
+    expect(mocks.mkdir).toHaveBeenCalledWith(expect.any(String), { recursive: true });
+    expect(mocks.logger.info).toHaveBeenCalledWith('Ensured multer storage directories exist.');
+    expect(mocks.logger.error).not.toHaveBeenCalled();
+  });
+
+  it('should log an error if directory creation fails', async () => {
+    // Arrange
+    const error = new Error('Permission denied');
+    mocks.mkdir.mockRejectedValue(error);
+
+    // Act
+    await import('./multer.middleware');
+
+    // Assert
+    expect(mocks.mkdir).toHaveBeenCalled();
+    expect(mocks.logger.error).toHaveBeenCalledWith(
+      { error },
+      'Failed to create multer storage directories on startup.',
+    );
+  });
+});

src/middleware/multer.middleware.ts

@@ -0,0 +1,123 @@
+// src/middleware/multer.middleware.ts
+import multer from 'multer';
+import path from 'path';
+import fs from 'node:fs/promises';
+import { Request, Response, NextFunction } from 'express';
+import { UserProfile } from '../types';
+import { sanitizeFilename } from '../utils/stringUtils';
+import { logger } from '../services/logger.server';
+
+export const flyerStoragePath =
+  process.env.STORAGE_PATH || '/var/www/flyer-crawler.projectium.com/flyer-images';
+export const avatarStoragePath = path.join(process.cwd(), 'public', 'uploads', 'avatars');
+
+// Ensure directories exist at startup
+(async () => {
+  try {
+    await fs.mkdir(flyerStoragePath, { recursive: true });
+    await fs.mkdir(avatarStoragePath, { recursive: true });
+    logger.info('Ensured multer storage directories exist.');
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    logger.error({ error: err }, 'Failed to create multer storage directories on startup.');
+  }
+})();
+
+type StorageType = 'flyer' | 'avatar';
+
+const getStorageConfig = (type: StorageType) => {
+  switch (type) {
+    case 'avatar':
+      return multer.diskStorage({
+        destination: (req, file, cb) => cb(null, avatarStoragePath),
+        filename: (req, file, cb) => {
+          const user = req.user as UserProfile | undefined;
+          if (!user) {
+            // This should ideally not happen if auth middleware runs first.
+            return cb(new Error('User not authenticated for avatar upload'), '');
+          }
+          if (process.env.NODE_ENV === 'test') {
+            // Use a predictable filename for test avatars for easy cleanup.
+            return cb(null, `test-avatar${path.extname(file.originalname) || '.png'}`);
+          }
+          const uniqueSuffix = `${user.user.user_id}-${Date.now()}${path.extname(
+            file.originalname,
+          )}`;
+          cb(null, uniqueSuffix);
+        },
+      });
+    case 'flyer':
+    default:
+      return multer.diskStorage({
+        destination: (req, file, cb) => cb(null, flyerStoragePath),
+        filename: (req, file, cb) => {
+          if (process.env.NODE_ENV === 'test') {
+            // Use a predictable filename for test flyers for easy cleanup.
+            const ext = path.extname(file.originalname);
+            return cb(null, `${file.fieldname}-test-flyer-image${ext || '.jpg'}`);
+          }
+          const uniqueSuffix = `${Date.now()}-${Math.round(Math.random() * 1e9)}`;
+          const sanitizedOriginalName = sanitizeFilename(file.originalname);
+          cb(null, `${file.fieldname}-${uniqueSuffix}-${sanitizedOriginalName}`);
+        },
+      });
+  }
+};
+
+const imageFileFilter = (req: Request, file: Express.Multer.File, cb: multer.FileFilterCallback) => {
+  if (file.mimetype.startsWith('image/')) {
+    cb(null, true);
+  } else {
+    // Reject the file with a specific error that can be caught by a middleware.
+    const err = new Error('Only image files are allowed!');
+    cb(err);
+  }
+};
+
+interface MulterOptions {
+  storageType: StorageType;
+  fileSize?: number;
+  fileFilter?: 'image';
+}
+
+/**
+ * Creates a configured multer instance for file uploads.
+ * @param options - Configuration for storage type, file size, and file filter.
+ * @returns A multer instance.
+ */
+export const createUploadMiddleware = (options: MulterOptions) => {
+  const multerOptions: multer.Options = {
+    storage: getStorageConfig(options.storageType),
+  };
+
+  if (options.fileSize) {
+    multerOptions.limits = { fileSize: options.fileSize };
+  }
+
+  if (options.fileFilter === 'image') {
+    multerOptions.fileFilter = imageFileFilter;
+  }
+
+  return multer(multerOptions);
+};
+
+/**
+ * A general error handler for multer. Place this after all routes using multer in your router file.
+ * It catches errors from `fileFilter` and other multer issues (e.g., file size limits).
+ */
+export const handleMulterError = (
+  err: Error,
+  req: Request,
+  res: Response,
+  next: NextFunction,
+) => {
+  if (err instanceof multer.MulterError) {
+    // A Multer error occurred when uploading (e.g., file too large).
+    return res.status(400).json({ message: `File upload error: ${err.message}` });
+  } else if (err && err.message === 'Only image files are allowed!') {
+    // A custom error from our fileFilter.
+    return res.status(400).json({ message: err.message });
+  }
+  // If it's not a multer error, pass it on.
+  next(err);
+};

src/pages/ResetPasswordPage.tsx

@@ -4,7 +4,7 @@ import { useParams, useNavigate, Link } from 'react-router-dom';
 import * as apiClient from '../services/apiClient';
 import { logger } from '../services/logger.client';
 import { LoadingSpinner } from '../components/LoadingSpinner';
-import { PasswordInput } from './admin/components/PasswordInput';
+import { PasswordInput } from '../components/PasswordInput';
 
 export const ResetPasswordPage: React.FC = () => {
   const { token } = useParams<{ token: string }>();

src/pages/admin/components/AuthView.test.tsx

@@ -1,6 +1,6 @@
 // src/pages/admin/components/AuthView.test.tsx
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
 import { AuthView } from './AuthView';
 import * as apiClient from '../../../services/apiClient';
@@ -12,6 +12,11 @@ const mockedApiClient = vi.mocked(apiClient, true);
 const mockOnClose = vi.fn();
 const mockOnLoginSuccess = vi.fn();
 
+vi.mock('../../../components/PasswordInput', () => ({
+  // Mock the moved component
+  PasswordInput: (props: any) => <input {...props} data-testid="password-input" />,
+}));
+
 const defaultProps = {
   onClose: mockOnClose,
   onLoginSuccess: mockOnLoginSuccess,
@@ -353,4 +358,23 @@ describe('AuthView', () => {
       expect(screen.queryByText('Send Reset Link')).not.toBeInTheDocument();
     });
   });
+
+  it('should show loading state during registration submission', async () => {
+    // Mock a promise that doesn't resolve immediately
+    (mockedApiClient.registerUser as Mock).mockReturnValue(new Promise(() => {}));
+    render(<AuthView {...defaultProps} />);
+
+    // Switch to registration view
+    fireEvent.click(screen.getByRole('button', { name: /don't have an account\? register/i }));
+
+    fireEvent.change(screen.getByLabelText(/email address/i), {
+      target: { value: 'test@example.com' },
+    });
+    fireEvent.change(screen.getByTestId('password-input'), { target: { value: 'password' } });
+    fireEvent.submit(screen.getByTestId('auth-form'));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Register' })).toBeDisabled();
+    });
+  });
 });

src/pages/admin/components/AuthView.tsx

@@ -7,7 +7,7 @@ import { notifySuccess } from '../../../services/notificationService';
 import { LoadingSpinner } from '../../../components/LoadingSpinner';
 import { GoogleIcon } from '../../../components/icons/GoogleIcon';
 import { GithubIcon } from '../../../components/icons/GithubIcon';
-import { PasswordInput } from './PasswordInput';
+import { PasswordInput } from '../../../components/PasswordInput';
 
 interface AuthResponse {
   userprofile: UserProfile;

src/pages/admin/components/ProfileManager.test.tsx

@@ -1,7 +1,7 @@
 // src/pages/admin/components/ProfileManager.test.tsx
 import React from 'react';
 import { render, screen, fireEvent, waitFor, cleanup, act } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach, type Mock, test } from 'vitest';
 import { ProfileManager } from './ProfileManager';
 import * as apiClient from '../../../services/apiClient';
 import { notifySuccess, notifyError } from '../../../services/notificationService';
@@ -16,6 +16,11 @@ import {
 // Unmock the component to test the real implementation
 vi.unmock('./ProfileManager');
 
+vi.mock('../../../components/PasswordInput', () => ({
+  // Mock the moved component
+  PasswordInput: (props: any) => <input {...props} data-testid="password-input" />,
+}));
+
 const mockedApiClient = vi.mocked(apiClient, true);
 
 vi.mock('../../../services/notificationService');
@@ -436,51 +441,52 @@ describe('ProfileManager', () => {
       });
     });
 
-    it('should automatically geocode address after user stops typing', async () => {
+    it('should automatically geocode address after user stops typing (using fake timers)', async () => {
+      // Use fake timers for the entire test to control the debounce.
+      vi.useFakeTimers();
       const addressWithoutCoords = { ...mockAddress, latitude: undefined, longitude: undefined };
       mockedApiClient.getUserAddress.mockResolvedValue(
         new Response(JSON.stringify(addressWithoutCoords)),
       );
 
-      console.log('[TEST LOG] Rendering for automatic geocode test (Real Timers + Wait)');
       render(<ProfileManager {...defaultAuthenticatedProps} />);
 
-      console.log('[TEST LOG] Waiting for initial address load...');
-      await waitFor(() => expect(screen.getByLabelText(/city/i)).toHaveValue('Anytown'));
-
-      console.log('[TEST LOG] Initial address loaded. Changing city...');
+      // Wait for initial async address load to complete by flushing promises.
+      await act(async () => {
+        await vi.runAllTimersAsync();
+      });
+      expect(screen.getByLabelText(/city/i)).toHaveValue('Anytown');
 
       // Change address, geocode should not be called immediately
       fireEvent.change(screen.getByLabelText(/city/i), { target: { value: 'NewCity' } });
       expect(mockedApiClient.geocodeAddress).not.toHaveBeenCalled();
 
-      console.log('[TEST LOG] Waiting 1600ms for debounce...');
-      // Wait for debounce (1500ms) + buffer using real timers to avoid freeze
+      // Advance timers to fire the debounce and resolve the subsequent geocode promise.
       await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 1600));
+        await vi.runAllTimersAsync();
       });
-      console.log('[TEST LOG] Wait complete. Checking results.');
 
-      await waitFor(() => {
-        expect(mockedApiClient.geocodeAddress).toHaveBeenCalledWith(
-          expect.stringContaining('NewCity'),
-          expect.anything(),
-        );
-        expect(toast.success).toHaveBeenCalledWith('Address geocoded successfully!');
-      });
+      // Now check the final result.
+      expect(mockedApiClient.geocodeAddress).toHaveBeenCalledWith(
+        expect.stringContaining('NewCity'),
+        expect.anything(),
+      );
+      expect(toast.success).toHaveBeenCalledWith('Address geocoded successfully!');
     });
 
-    it('should not geocode if address already has coordinates', async () => {
-      console.log('[TEST LOG] Rendering for no-geocode test (Real Timers + Wait)');
+    it('should not geocode if address already has coordinates (using fake timers)', async () => {
+      // Use real timers for the initial async render and data fetch
+      vi.useRealTimers();
       render(<ProfileManager {...defaultAuthenticatedProps} />);
       console.log('[TEST LOG] Waiting for initial address load...');
       await waitFor(() => expect(screen.getByLabelText(/city/i)).toHaveValue('Anytown'));
 
-      console.log(
-        '[TEST LOG] Initial address loaded. Waiting 1600ms to ensure no geocode triggers...',
-      );
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 1600));
+      // Switch to fake timers to control the debounce check
+      vi.useFakeTimers();
+
+      // Advance timers past the debounce threshold. Nothing should happen.
+      act(() => {
+        vi.advanceTimersByTime(1600);
       });
       console.log('[TEST LOG] Wait complete. Verifying no geocode call.');
 
@@ -524,7 +530,7 @@ describe('ProfileManager', () => {
       expect(await screen.findByRole('heading', { name: /theme/i })).toBeInTheDocument();
 
       // Switch back to Profile
-      fireEvent.click(screen.getByRole('button', { name: /profile/i }));
+      fireEvent.click(screen.getByRole('button', { name: /^profile$/i }));
       expect(await screen.findByLabelText('Profile Form')).toBeInTheDocument();
     });
 
@@ -536,7 +542,7 @@ describe('ProfileManager', () => {
       fireEvent.change(screen.getByLabelText('Confirm New Password'), {
         target: { value: 'short' },
       });
-      fireEvent.submit(screen.getByTestId('update-password-form'));
+      fireEvent.submit(screen.getByTestId('update-password-form'), {});
 
       await waitFor(() => {
         expect(notifyError).toHaveBeenCalledWith('Password must be at least 6 characters long.');
@@ -550,7 +556,7 @@ describe('ProfileManager', () => {
       fireEvent.click(screen.getByRole('button', { name: /data & privacy/i }));
       fireEvent.click(screen.getByRole('button', { name: /delete my account/i }));
 
-      fireEvent.change(screen.getByPlaceholderText(/enter your password/i), {
+      fireEvent.change(screen.getByTestId('password-input'), {
         target: { value: 'password' },
       });
       fireEvent.submit(screen.getByTestId('delete-account-form'));
@@ -687,7 +693,7 @@ describe('ProfileManager', () => {
       fireEvent.change(screen.getByLabelText('Confirm New Password'), {
         target: { value: 'newpassword123' },
       });
-      fireEvent.submit(screen.getByTestId('update-password-form'));
+      fireEvent.submit(screen.getByTestId('update-password-form'), {});
 
       await waitFor(() => {
         expect(mockedApiClient.updateUserPassword).toHaveBeenCalledWith(
@@ -708,7 +714,7 @@ describe('ProfileManager', () => {
       fireEvent.change(screen.getByLabelText('Confirm New Password'), {
         target: { value: 'mismatch' },
       });
-      fireEvent.submit(screen.getByTestId('update-password-form'));
+      fireEvent.submit(screen.getByTestId('update-password-form'), {});
 
       await waitFor(() => {
         expect(notifyError).toHaveBeenCalledWith('Passwords do not match.');
@@ -735,9 +741,10 @@ describe('ProfileManager', () => {
     });
 
     it('should handle account deletion flow', async () => {
-      // Use fake timers to test the setTimeout call
+      // Use fake timers to control the setTimeout call for the entire test.
       vi.useFakeTimers();
-      const { unmount } = render(<ProfileManager {...defaultAuthenticatedProps} />);
+
+      render(<ProfileManager {...defaultAuthenticatedProps} />);
 
       fireEvent.click(screen.getByRole('button', { name: /data & privacy/i }));
 
@@ -748,34 +755,28 @@ describe('ProfileManager', () => {
       ).toBeInTheDocument();
 
       // Fill password and submit to open modal
-      fireEvent.change(screen.getByPlaceholderText(/enter your password/i), {
+      fireEvent.change(screen.getByTestId('password-input'), {
         target: { value: 'correctpassword' },
       });
       fireEvent.submit(screen.getByTestId('delete-account-form'));
 
       // Confirm in the modal
-      const confirmButton = await screen.findByRole('button', { name: /yes, delete my account/i });
+      // Use getByRole since the modal appears synchronously after the form submit.
+      const confirmButton = screen.getByRole('button', { name: /yes, delete my account/i });
       fireEvent.click(confirmButton);
 
-      await waitFor(() => {
-        expect(mockedApiClient.deleteUserAccount).toHaveBeenCalledWith(
-          'correctpassword',
-          expect.objectContaining({ signal: expect.anything() }),
-        );
-        expect(notifySuccess).toHaveBeenCalledWith(
-          'Account deleted successfully. You will be logged out shortly.',
-        );
+      // The async deleteAccount call is now pending. We need to flush promises
+      // and then advance the timers to run the subsequent setTimeout.
+      // `runAllTimersAsync` will resolve pending promises and run timers recursively.
+      await act(async () => {
+        await vi.runAllTimersAsync();
       });
 
-      // Advance timers to trigger the logout and close
-      act(() => {
-        vi.advanceTimersByTime(3000);
-      });
-
-      await waitFor(() => {
-        expect(mockOnClose).toHaveBeenCalled();
-        expect(mockOnSignOut).toHaveBeenCalled();
-      });
+      // Now that all timers and promises have been flushed, we can check the final state.
+      expect(mockedApiClient.deleteUserAccount).toHaveBeenCalled();
+      expect(notifySuccess).toHaveBeenCalled();
+      expect(mockOnClose).toHaveBeenCalled();
+      expect(mockOnSignOut).toHaveBeenCalled();
     });
 
     it('should allow toggling dark mode', async () => {

src/pages/admin/components/ProfileManager.tsx

@@ -9,8 +9,8 @@ import { LoadingSpinner } from '../../../components/LoadingSpinner';
 import { XMarkIcon } from '../../../components/icons/XMarkIcon';
 import { GoogleIcon } from '../../../components/icons/GoogleIcon';
 import { GithubIcon } from '../../../components/icons/GithubIcon';
-import { ConfirmationModal } from '../../../components/ConfirmationModal';
-import { PasswordInput } from './PasswordInput';
+import { ConfirmationModal } from '../../../components/ConfirmationModal'; // This path is correct
+import { PasswordInput } from '../../../components/PasswordInput';
 import { MapView } from '../../../components/MapView';
 import type { AuthStatus } from '../../../hooks/useAuth';
 import { AuthView } from './AuthView';

src/routes/admin.content.routes.test.ts

@@ -244,7 +244,7 @@ describe('Admin Content Management Routes (/api/admin)', () => {
       expect(response.body.message).toBe('Brand logo updated successfully.');
       expect(vi.mocked(mockedDb.adminRepo.updateBrandLogo)).toHaveBeenCalledWith(
         brandId,
-        expect.stringContaining('/assets/'),
+        expect.stringContaining('/flyer-images/'),
         expect.anything(),
       );
     });

src/routes/admin.routes.ts

@@ -2,7 +2,6 @@
 import { Router, NextFunction, Request, Response } from 'express';
 import passport from './passport.routes';
 import { isAdmin } from './passport.routes'; // Correctly imported
-import fs from 'node:fs/promises';
 import multer from 'multer';
 import { z } from 'zod';
 
@@ -10,6 +9,10 @@ import * as db from '../services/db/index.db';
 import type { UserProfile } from '../types';
 import { geocodingService } from '../services/geocodingService.server';
 import { requireFileUpload } from '../middleware/fileUpload.middleware'; // This was a duplicate, fixed.
+import {
+  createUploadMiddleware,
+  handleMulterError,
+} from '../middleware/multer.middleware';
 import { NotFoundError, ValidationError } from '../services/db/errors.db';
 import { validateRequest } from '../middleware/validation.middleware';
 
@@ -42,6 +45,7 @@ import {
   optionalNumeric,
 } from '../utils/zodUtils';
 import { logger } from '../services/logger.server';
+import fs from 'node:fs/promises';
 
 /**
  * Safely deletes a file from the filesystem, ignoring errors if the file doesn't exist.
@@ -102,19 +106,7 @@ const jobRetrySchema = z.object({
 
 const router = Router();
 
-// --- Multer Configuration for File Uploads ---
-const storagePath =
-  process.env.STORAGE_PATH || '/var/www/flyer-crawler.projectium.com/flyer-images';
-const storage = multer.diskStorage({
-  destination: function (req, file, cb) {
-    cb(null, storagePath);
-  },
-  filename: function (req, file, cb) {
-    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
-    cb(null, file.fieldname + '-' + uniqueSuffix + '-' + file.originalname);
-  },
-});
-const upload = multer({ storage: storage });
+const upload = createUploadMiddleware({ storageType: 'flyer' });
 
 // --- Bull Board (Job Queue UI) Setup ---
 const serverAdapter = new ExpressAdapter();
@@ -698,4 +690,7 @@ router.post(
   },
 );
 
+/* Catches errors from multer (e.g., file size, file filter) */
+router.use(handleMulterError);
+
 export default router;

src/routes/ai.routes.test.ts

@@ -83,36 +83,6 @@ describe('AI Routes (/api/ai)', () => {
   });
   const app = createTestApp({ router: aiRouter, basePath: '/api/ai' });
 
-  describe('Module-level error handling', () => {
-    it('should log an error if storage path creation fails', async () => {
-      // Arrange
-      const mkdirError = new Error('EACCES: permission denied');
-      vi.resetModules(); // Reset modules to re-run top-level code
-      vi.doMock('node:fs', () => {
-        const mockFs = {
-          ...fs,
-          mkdirSync: vi.fn().mockImplementation(() => {
-            throw mkdirError;
-          }),
-        };
-        return { ...mockFs, default: mockFs };
-      });
-      const { logger } = await import('../services/logger.server');
-
-      // Act: Dynamically import the router to trigger the mkdirSync call
-      await import('./ai.routes');
-
-      // Assert
-      const storagePath =
-        process.env.STORAGE_PATH || '/var/www/flyer-crawler.projectium.com/flyer-images';
-      expect(logger.error).toHaveBeenCalledWith(
-        { error: 'EACCES: permission denied' },
-        `Failed to create storage path (${storagePath}). File uploads may fail.`,
-      );
-      vi.doUnmock('node:fs'); // Cleanup
-    });
-  });
-
   // New test to cover the router.use diagnostic middleware's catch block and errMsg branches
   describe('Diagnostic Middleware Error Handling', () => {
     it('should log an error if logger.debug throws an object with a message property', async () => {

src/routes/ai.routes.ts

@@ -1,6 +1,5 @@
 // src/routes/ai.routes.ts
 import { Router, Request, Response, NextFunction } from 'express';
-import multer from 'multer';
 import path from 'path';
 import fs from 'node:fs';
 import { z } from 'zod';
@@ -9,8 +8,11 @@ import { optionalAuth } from './passport.routes';
 import * as db from '../services/db/index.db';
 import { createFlyerAndItems } from '../services/db/flyer.db';
 import * as aiService from '../services/aiService.server'; // Correctly import server-side AI service
+import {
+  createUploadMiddleware,
+  handleMulterError,
+} from '../middleware/multer.middleware';
 import { generateFlyerIcon } from '../utils/imageProcessor';
-import { sanitizeFilename } from '../utils/stringUtils';
 import { logger } from '../services/logger.server';
 import { UserProfile, ExtractedCoreData, ExtractedFlyerItem } from '../types';
 import { flyerQueue } from '../services/queueService.server';
@@ -154,40 +156,7 @@ const searchWebSchema = z.object({
   body: z.object({ query: requiredString('A search query is required.') }),
 });
 
-// --- Multer Configuration for File Uploads ---
-const storagePath =
-  process.env.STORAGE_PATH || '/var/www/flyer-crawler.projectium.com/flyer-images';
-
-// Ensure the storage path exists at startup so multer can write files there.
-try {
-  fs.mkdirSync(storagePath, { recursive: true });
-  logger.debug(`AI upload storage path ready: ${storagePath}`);
-} catch (err) {
-  logger.error(
-    { error: errMsg(err) },
-    `Failed to create storage path (${storagePath}). File uploads may fail.`,
-  );
-}
-const diskStorage = multer.diskStorage({
-  destination: function (req, file, cb) {
-    cb(null, storagePath);
-  },
-  filename: function (req, file, cb) {
-    // If in a test environment, use a predictable filename for easy cleanup.
-    if (process.env.NODE_ENV === 'test') {
-      return cb(null, `${file.fieldname}-test-flyer-image.jpg`);
-    } else {
-      const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
-      // Sanitize the original filename to remove spaces and special characters
-      return cb(
-        null,
-        file.fieldname + '-' + uniqueSuffix + '-' + sanitizeFilename(file.originalname),
-      );
-    }
-  },
-});
-
-const uploadToDisk = multer({ storage: diskStorage });
+const uploadToDisk = createUploadMiddleware({ storageType: 'flyer' });
 
 // Diagnostic middleware: log incoming AI route requests (headers and sizes)
 router.use((req: Request, res: Response, next: NextFunction) => {
@@ -722,4 +691,7 @@ router.post(
   },
 );
 
+/* Catches errors from multer (e.g., file size, file filter) */
+router.use(handleMulterError);
+
 export default router;

src/routes/health.routes.ts

@@ -53,7 +53,7 @@ router.get('/db-schema', validateRequest(emptySchema), async (req, res, next: Ne
  * This is important for features like file uploads.
  */
 router.get('/storage', validateRequest(emptySchema), async (req, res, next: NextFunction) => {
-  const storagePath = process.env.STORAGE_PATH || '/var/www/flyer-crawler.projectium.com/assets';
+  const storagePath = process.env.STORAGE_PATH || '/var/www/flyer-crawler.projectium.com/flyer-images';
   try {
     await fs.access(storagePath, fs.constants.W_OK); // Use fs.promises
     return res

src/routes/user.routes.test.ts

@@ -149,8 +149,8 @@ describe('User Routes (/api/users)', () => {
 
       // Assert
       expect(logger.error).toHaveBeenCalledWith(
-        { err: mkdirError },
-        'Failed to create avatar upload directory',
+        { error: mkdirError },
+        'Failed to create multer storage directories on startup.',
       );
       vi.doUnmock('node:fs/promises'); // Clean up
     });

src/routes/user.routes.ts

@@ -1,13 +1,16 @@
 // src/routes/user.routes.ts
 import express, { Request, Response, NextFunction } from 'express';
 import passport from './passport.routes';
-import multer from 'multer';
-import path from 'path';
+import multer from 'multer'; // Keep for MulterError type check
 import fs from 'node:fs/promises';
 import * as bcrypt from 'bcrypt'; // This was a duplicate, fixed.
 import { z } from 'zod';
 import { logger } from '../services/logger.server';
 import { UserProfile } from '../types';
+import {
+  createUploadMiddleware,
+  handleMulterError,
+} from '../middleware/multer.middleware';
 import { userService } from '../services/userService';
 import { ForeignKeyConstraintError } from '../services/db/errors.db';
 import { validateRequest } from '../middleware/validation.middleware';
@@ -85,35 +88,10 @@ const emptySchema = z.object({});
 // Any request to a /api/users/* endpoint will now require a valid JWT.
 router.use(passport.authenticate('jwt', { session: false }));
 
-// --- Multer Configuration for Avatar Uploads ---
-
-// Ensure the directory for avatar uploads exists.
-const avatarUploadDir = path.join(process.cwd(), 'public', 'uploads', 'avatars');
-fs.mkdir(avatarUploadDir, { recursive: true }).catch((err) => {
-  logger.error({ err }, 'Failed to create avatar upload directory');
-});
-
-// Define multer storage configuration. The `req.user` object will be available
-// here because the passport middleware runs before this route handler.
-const avatarStorage = multer.diskStorage({
-  destination: (req, file, cb) => cb(null, avatarUploadDir),
-  filename: (req, file, cb) => {
-    const uniqueSuffix = `${(req.user as UserProfile).user.user_id}-${Date.now()}${path.extname(file.originalname)}`;
-    cb(null, uniqueSuffix);
-  },
-});
-
-const avatarUpload = multer({
-  storage: avatarStorage,
-  limits: { fileSize: 1 * 1024 * 1024 }, // 1MB file size limit
-  fileFilter: (req, file, cb) => {
-    if (file.mimetype.startsWith('image/')) {
-      cb(null, true);
-    } else {
-      // Reject the file with a specific error
-      cb(new Error('Only image files are allowed!'));
-    }
-  },
+const avatarUpload = createUploadMiddleware({
+  storageType: 'avatar',
+  fileSize: 1 * 1024 * 1024, // 1MB
+  fileFilter: 'image',
 });
 
 /**
@@ -857,18 +835,7 @@ router.put(
   },
 );
 
-// --- General Multer Error Handler ---
-// This should be placed after all routes that use multer.
-// It catches errors from `fileFilter` and other multer issues (e.g., file size limits).
-router.use((err: Error, req: Request, res: Response, next: NextFunction) => {
-  if (err instanceof multer.MulterError) {
-    // A Multer error occurred when uploading (e.g., file too large).
-    return res.status(400).json({ message: `File upload error: ${err.message}` });
-  } else if (err && err.message === 'Only image files are allowed!') {
-    // A custom error from our fileFilter.
-    return res.status(400).json({ message: err.message });
-  }
-  next(err); // Pass on to the next error handler if it's not a multer error we handle.
-});
+/* Catches errors from multer (e.g., file size, file filter) */
+router.use(handleMulterError);
 
 export default router;

src/services/aiApiClient.ts

@@ -44,10 +44,12 @@ export const uploadAndProcessFlyer = async (
 
   if (!response.ok) {
     let errorBody;
+    // Clone the response so we can read the body twice (once as JSON, and as text on failure).
+    const clonedResponse = response.clone();
     try {
       errorBody = await response.json();
     } catch (e) {
-      errorBody = { message: await response.text() };
+      errorBody = { message: await clonedResponse.text() };
     }
     // Throw a structured error so the component can inspect the status and body
     throw { status: response.status, body: errorBody };

src/services/backgroundJobService.test.ts

@@ -456,11 +456,6 @@ describe('Background Job Service', () => {
 
     it('should handle unhandled rejections in the analytics report cron wrapper', async () => {
       const infoError = new Error('Logger info failed');
-      // Make logger.info throw, which is outside the try/catch in the cron job.
-      vi.mocked(globalMockLogger.info).mockImplementation(() => {
-        throw infoError;
-      });
-
       startBackgroundJobs(
         mockBackgroundJobService,
         mockAnalyticsQueue,
@@ -469,6 +464,11 @@ describe('Background Job Service', () => {
         globalMockLogger,
       );
 
+      // Make logger.info throw, which is outside the try/catch in the cron job.
+      const infoSpy = vi.spyOn(globalMockLogger, 'info').mockImplementation(() => {
+        throw infoError;
+      });
+
       const analyticsJobCallback = mockCronSchedule.mock.calls[1][1];
       await analyticsJobCallback();
 
@@ -476,6 +476,7 @@ describe('Background Job Service', () => {
         { err: infoError }, // The implementation uses `err` key here
         '[BackgroundJob] Unhandled rejection in analytics report cron wrapper.',
       );
+      infoSpy.mockRestore();
     });
 
     it('should enqueue a weekly analytics job when the third cron job function is executed', async () => {
@@ -542,10 +543,6 @@ describe('Background Job Service', () => {
 
     it('should handle unhandled rejections in the weekly analytics report cron wrapper', async () => {
       const infoError = new Error('Logger info failed');
-      vi.mocked(globalMockLogger.info).mockImplementation(() => {
-        throw infoError;
-      });
-
       startBackgroundJobs(
         mockBackgroundJobService,
         mockAnalyticsQueue,
@@ -554,6 +551,10 @@ describe('Background Job Service', () => {
         globalMockLogger,
       );
 
+      const infoSpy = vi.spyOn(globalMockLogger, 'info').mockImplementation(() => {
+        throw infoError;
+      });
+
       const weeklyAnalyticsJobCallback = mockCronSchedule.mock.calls[2][1];
       await weeklyAnalyticsJobCallback();
 
@@ -561,6 +562,7 @@ describe('Background Job Service', () => {
         { err: infoError },
         '[BackgroundJob] Unhandled rejection in weekly analytics report cron wrapper.',
       );
+      infoSpy.mockRestore();
     });
 
     it('should enqueue a token cleanup job when the fourth cron job function is executed', async () => {
@@ -624,10 +626,6 @@ describe('Background Job Service', () => {
 
     it('should handle unhandled rejections in the token cleanup cron wrapper', async () => {
       const infoError = new Error('Logger info failed');
-      vi.mocked(globalMockLogger.info).mockImplementation(() => {
-        throw infoError;
-      });
-
       startBackgroundJobs(
         mockBackgroundJobService,
         mockAnalyticsQueue,
@@ -636,6 +634,10 @@ describe('Background Job Service', () => {
         globalMockLogger,
       );
 
+      const infoSpy = vi.spyOn(globalMockLogger, 'info').mockImplementation(() => {
+        throw infoError;
+      });
+
       const tokenCleanupCallback = mockCronSchedule.mock.calls[3][1];
       await tokenCleanupCallback();
 
@@ -643,6 +645,7 @@ describe('Background Job Service', () => {
         { err: infoError },
         '[BackgroundJob] Unhandled rejection in token cleanup cron wrapper.',
       );
+      infoSpy.mockRestore();
     });
 
     it('should log a critical error if scheduling fails', () => {