Refactor user preferences (#4667)

# Description of Changes
Refactor user preferences to all be in one service and all stored in
localStorage instead of indexeddb. This allows simpler & quicker
accessing of them, and ensures that they're all neatly stored in one
consistent place instead of spread out over local storage.

frontend/src/App.tsx

@@ -40,9 +40,9 @@ const LoadingFallback = () => (
 export default function App() {
   return (
     <Suspense fallback={<LoadingFallback />}>
-      <RainbowThemeProvider>
+      <PreferencesProvider>
-        <ErrorBoundary>
+        <RainbowThemeProvider>
-          <PreferencesProvider>
+          <ErrorBoundary>
             <FileContextProvider enableUrlSync={true} enablePersistence={true}>
               <NavigationProvider>
                 <FilesModalProvider>
@@ -62,9 +62,9 @@ export default function App() {
                 </FilesModalProvider>
               </NavigationProvider>
             </FileContextProvider>
-          </PreferencesProvider>
+          </ErrorBoundary>
-        </ErrorBoundary>
+        </RainbowThemeProvider>
-      </RainbowThemeProvider>
+      </PreferencesProvider>
     </Suspense>
   );
 }

frontend/src/components/shared/RainbowThemeProvider.tsx

@@ -6,9 +6,10 @@ import rainbowStyles from '../../styles/rainbow.module.css';
 import { ToastProvider } from '../toast';
 import ToastRenderer from '../toast/ToastRenderer';
 import { ToastPortalBinder } from '../toast';
+import type { ThemeMode } from '../../constants/theme';
 
 interface RainbowThemeContextType {
-  themeMode: 'light' | 'dark' | 'rainbow';
+  themeMode: ThemeMode;
   isRainbowMode: boolean;
   isToggleDisabled: boolean;
   toggleTheme: () => void;

frontend/src/components/shared/config/configSections/GeneralSection.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Paper, Stack, Switch, Text, Tooltip, NumberInput, SegmentedControl } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { usePreferences } from '../../../../contexts/PreferencesContext';
-import { ToolPanelMode } from 'src/contexts/toolWorkflow/toolWorkflowState';
+import type { ToolPanelMode } from '../../../../constants/toolPanel';
 
 const DEFAULT_AUTO_UNZIP_FILE_LIMIT = 4;
 

frontend/src/components/tools/ToolPanel.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { usePreferences } from '../../contexts/PreferencesContext';
 import ToolPicker from './ToolPicker';
 import SearchResults from './SearchResults';
 import ToolRenderer from './ToolRenderer';
@@ -14,7 +15,6 @@ import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 import { useTranslation } from 'react-i18next';
 import FullscreenToolSurface from './FullscreenToolSurface';
 import { useToolPanelGeometry } from '../../hooks/tools/useToolPanelGeometry';
-import { useLocalStorageState } from '../../hooks/tools/useJsonLocalStorageState';
 import { useRightRail } from '../../contexts/RightRailContext';
 import { Tooltip } from '../shared/Tooltip';
 import './ToolPanel.css';
@@ -45,6 +45,7 @@ export default function ToolPanel() {
   } = useToolWorkflow();
 
   const { setAllRightRailButtonsDisabled } = useRightRail();
+  const { preferences, updatePreference } = usePreferences();
 
   const isFullscreenMode = toolPanelMode === 'fullscreen';
   const toolPickerVisible = !readerMode;
@@ -56,8 +57,6 @@ export default function ToolPanel() {
     setAllRightRailButtonsDisabled(fullscreenExpanded);
   }, [fullscreenExpanded, setAllRightRailButtonsDisabled]);
 
-  // Use custom hooks for state management
-  const [showLegacyDescriptions, setShowLegacyDescriptions] = useLocalStorageState('legacyToolDescriptions', false);
   const fullscreenGeometry = useToolPanelGeometry({
     enabled: fullscreenExpanded,
     toolPanelRef,
@@ -200,11 +199,11 @@ export default function ToolPanel() {
           toolRegistry={toolRegistry}
           filteredTools={filteredTools}
           selectedToolKey={selectedToolKey}
-          showDescriptions={showLegacyDescriptions}
+          showDescriptions={preferences.showLegacyToolDescriptions}
           matchedTextMap={matchedTextMap}
           onSearchChange={setSearchQuery}
           onSelect={(id: ToolId) => handleToolSelect(id)}
-          onToggleDescriptions={() => setShowLegacyDescriptions((prev) => !prev)}
+          onToggleDescriptions={() => updatePreference('showLegacyToolDescriptions', !preferences.showLegacyToolDescriptions)}
           onExitFullscreenMode={() => setToolPanelMode('sidebar')}
           toggleLabel={toggleLabel}
           geometry={fullscreenGeometry}

frontend/src/components/tools/ToolPanelModePrompt.tsx

@@ -2,17 +2,17 @@ import { useEffect, useState } from 'react';
 import { Badge, Button, Card, Group, Modal, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { usePreferences } from '../../contexts/PreferencesContext';
 import './ToolPanelModePrompt.css';
-import { useToolPanelModePreference } from '../../hooks/useToolPanelModePreference';
+import type { ToolPanelMode } from '../../constants/toolPanel';
-import { ToolPanelMode } from 'src/contexts/toolWorkflow/toolWorkflowState';
-
-// type moved to hook
 
 const ToolPanelModePrompt = () => {
   const { t } = useTranslation();
   const { toolPanelMode, setToolPanelMode } = useToolWorkflow();
+  const { preferences, updatePreference } = usePreferences();
   const [opened, setOpened] = useState(false);
-  const { hydrated, shouldShowPrompt, markPromptSeen, setPreferredMode } = useToolPanelModePreference();
+
+  const shouldShowPrompt = !preferences.toolPanelModePromptSeen;
 
   useEffect(() => {
     if (shouldShowPrompt) {
@@ -22,20 +22,16 @@ const ToolPanelModePrompt = () => {
 
   const handleSelect = (mode: ToolPanelMode) => {
     setToolPanelMode(mode);
-    setPreferredMode(mode);
+    updatePreference('defaultToolPanelMode', mode);
-    markPromptSeen();
+    updatePreference('toolPanelModePromptSeen', true);
     setOpened(false);
   };
 
   const handleDismiss = () => {
-    markPromptSeen();
+    updatePreference('toolPanelModePromptSeen', true);
     setOpened(false);
   };
 
-  if (!hydrated) {
-    return null;
-  }
-
   return (
     <Modal
       opened={opened}

frontend/src/constants/theme.ts

@@ -0,0 +1,8 @@
+// Theme constants and utilities
+
+export type ThemeMode = 'light' | 'dark' | 'rainbow';
+
+// Detect OS theme preference
+export function getSystemTheme(): 'light' | 'dark' {
+  return window?.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}

frontend/src/constants/toolPanel.ts

@@ -0,0 +1,5 @@
+// Tool panel constants
+
+export type ToolPanelMode = 'sidebar' | 'fullscreen';
+
+export const DEFAULT_TOOL_PANEL_MODE: ToolPanelMode = 'sidebar';

frontend/src/contexts/PreferencesContext.tsx

@@ -1,53 +1,37 @@
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import React, { createContext, useContext, useState, useCallback } from 'react';
-import { preferencesService, UserPreferences, DEFAULT_PREFERENCES } from '../services/preferencesService';
+import { preferencesService, UserPreferences } from '../services/preferencesService';
 
 interface PreferencesContextValue {
   preferences: UserPreferences;
   updatePreference: <K extends keyof UserPreferences>(
     key: K,
     value: UserPreferences[K]
-  ) => Promise<void>;
+  ) => void;
-  resetPreferences: () => Promise<void>;
+  resetPreferences: () => void;
-  isLoading: boolean;
 }
 
 const PreferencesContext = createContext<PreferencesContextValue | undefined>(undefined);
 
 export const PreferencesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [preferences, setPreferences] = useState<UserPreferences>(DEFAULT_PREFERENCES);
+  const [preferences, setPreferences] = useState<UserPreferences>(() => {
-  const [isLoading, setIsLoading] = useState(true);
+    // Load preferences synchronously on mount
-
+    return preferencesService.getAllPreferences();
-  useEffect(() => {
+  });
-    const loadPreferences = async () => {
-      try {
-        await preferencesService.initialize();
-        const loadedPreferences = await preferencesService.getAllPreferences();
-        setPreferences(loadedPreferences);
-      } catch (error) {
-        console.error('Failed to load preferences:', error);
-        // Keep default preferences on error
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    loadPreferences();
-  }, []);
 
   const updatePreference = useCallback(
-    async <K extends keyof UserPreferences>(key: K, value: UserPreferences[K]) => {
+    <K extends keyof UserPreferences>(key: K, value: UserPreferences[K]) => {
-        await preferencesService.setPreference(key, value);
+      preferencesService.setPreference(key, value);
-        setPreferences((prev) => ({
+      setPreferences((prev) => ({
-          ...prev,
+        ...prev,
-          [key]: value,
+        [key]: value,
-        }));
+      }));
     },
     []
   );
 
-  const resetPreferences = useCallback(async () => {
+  const resetPreferences = useCallback(() => {
-      await preferencesService.clearAllPreferences();
+    preferencesService.clearAllPreferences();
-      setPreferences(DEFAULT_PREFERENCES);
+    setPreferences(preferencesService.getAllPreferences());
   }, []);
 
   return (
@@ -56,7 +40,6 @@ export const PreferencesProvider: React.FC<{ children: React.ReactNode }> = ({ c
         preferences,
         updatePreference,
         resetPreferences,
-        isLoading,
       }}
     >
       {children}

frontend/src/contexts/ToolWorkflowContext.tsx

@@ -14,11 +14,10 @@ import { filterToolRegistryByQuery } from '../utils/toolSearch';
 import { useToolHistory } from '../hooks/tools/useUserToolActivity';
 import {
   ToolWorkflowState,
-  TOOL_PANEL_MODE_STORAGE_KEY,
   createInitialState,
   toolWorkflowReducer,
-  ToolPanelMode,
 } from './toolWorkflow/toolWorkflowState';
+import type { ToolPanelMode } from '../constants/toolPanel';
 import { usePreferences } from './PreferencesContext';
 
 // State interface
@@ -74,7 +73,7 @@ interface ToolWorkflowProviderProps {
 
 export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   const [state, dispatch] = useReducer(toolWorkflowReducer, undefined, createInitialState);
-  const { preferences } = usePreferences();
+  const { preferences, updatePreference } = usePreferences();
 
   // Store reset functions for tools
   const [toolResetFunctions, setToolResetFunctions] = React.useState<Record<string, () => void>>({});
@@ -118,7 +117,8 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
 
   const setToolPanelMode = useCallback((mode: ToolPanelMode) => {
     dispatch({ type: 'SET_TOOL_PANEL_MODE', payload: mode });
-  }, []);
+    updatePreference('defaultToolPanelMode', mode);
+  }, [updatePreference]);
 
 
   const setPreviewFile = useCallback((file: File | null) => {
@@ -136,27 +136,15 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     dispatch({ type: 'SET_SEARCH_QUERY', payload: query });
   }, []);
 
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    window.localStorage.setItem(TOOL_PANEL_MODE_STORAGE_KEY, state.toolPanelMode);
-  }, [state.toolPanelMode]);
-
   // Keep tool panel mode in sync with user preference. This ensures the
   // Config setting (Default tool picker mode) immediately affects the app
   // and persists across reloads.
   useEffect(() => {
-    if (!preferences) return;
     const preferredMode = preferences.defaultToolPanelMode;
-    if (preferredMode && preferredMode !== state.toolPanelMode) {
+    if (preferredMode !== state.toolPanelMode) {
       dispatch({ type: 'SET_TOOL_PANEL_MODE', payload: preferredMode });
-      if (typeof window !== 'undefined') {
-        window.localStorage.setItem(TOOL_PANEL_MODE_STORAGE_KEY, preferredMode);
-      }
     }
-  }, [preferences.defaultToolPanelMode]);
+  }, [preferences.defaultToolPanelMode, state.toolPanelMode]);
 
   // Tool reset methods
   const registerToolReset = useCallback((toolId: string, resetFunction: () => void) => {

frontend/src/contexts/toolWorkflow/toolWorkflowState.ts

@@ -1,7 +1,5 @@
 import { PageEditorFunctions } from '../../types/pageEditor';
-
+import { type ToolPanelMode, DEFAULT_TOOL_PANEL_MODE } from '../../constants/toolPanel';
-// State & Modes
-export type ToolPanelMode = 'sidebar' | 'fullscreen';
 
 export interface ToolWorkflowState {
   // UI State
@@ -28,22 +26,6 @@ export type ToolWorkflowAction =
   | { type: 'SET_SEARCH_QUERY'; payload: string }
   | { type: 'RESET_UI_STATE' };
 
-// Storage keys
-export const TOOL_PANEL_MODE_STORAGE_KEY = 'toolPanelModePreference';
-
-export const getStoredToolPanelMode = (): ToolPanelMode => {
-  if (typeof window === 'undefined') {
-    return 'sidebar';
-  }
-
-  const stored = window.localStorage.getItem(TOOL_PANEL_MODE_STORAGE_KEY);
-  if (stored === 'fullscreen') {
-    return 'fullscreen';
-  }
-
-  return 'sidebar';
-};
-
 export const baseState: Omit<ToolWorkflowState, 'toolPanelMode'> = {
   sidebarsVisible: true,
   leftPanelView: 'toolPicker',
@@ -55,7 +37,7 @@ export const baseState: Omit<ToolWorkflowState, 'toolPanelMode'> = {
 
 export const createInitialState = (): ToolWorkflowState => ({
   ...baseState,
-  toolPanelMode: getStoredToolPanelMode(),
+  toolPanelMode: DEFAULT_TOOL_PANEL_MODE,
 });
 
 export function toolWorkflowReducer(state: ToolWorkflowState, action: ToolWorkflowAction): ToolWorkflowState {

frontend/src/hooks/tools/useJsonLocalStorageState.ts

@@ -1,30 +0,0 @@
-import { useState, useEffect, Dispatch, SetStateAction } from 'react';
-
-export function useLocalStorageState<T>(key: string, defaultValue: T): [T, Dispatch<SetStateAction<T>>] {
-  const [state, setState] = useState<T>(() => {
-    if (typeof window === 'undefined') {
-      return defaultValue;
-    }
-
-    const stored = window.localStorage.getItem(key);
-    if (stored === null) {
-      return defaultValue;
-    }
-
-    try {
-      return JSON.parse(stored) as T;
-    } catch {
-      return defaultValue;
-    }
-  });
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    window.localStorage.setItem(key, JSON.stringify(state));
-  }, [key, state]);
-
-  return [state, setState];
-}

frontend/src/hooks/useRainbowTheme.ts

@@ -1,6 +1,6 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
+import { useCallback, useRef, useEffect } from 'react';
-
+import { usePreferences } from '../contexts/PreferencesContext';
-type ThemeMode = 'light' | 'dark' | 'rainbow';
+import type { ThemeMode } from '../constants/theme';
 
 interface RainbowThemeHook {
   themeMode: ThemeMode;
@@ -13,36 +13,19 @@ interface RainbowThemeHook {
 
 const allowRainbowMode = false; // Override to allow/disallow fun
 
-export function useRainbowTheme(initialTheme: 'light' | 'dark' = 'light'): RainbowThemeHook {
+export function useRainbowTheme(): RainbowThemeHook {
-  // Get theme from localStorage or use initial
+  const { preferences, updatePreference } = usePreferences();
-  const [themeMode, setThemeMode] = useState<ThemeMode>(() => {
+  const themeMode = preferences.theme;
-    const stored = localStorage.getItem('stirling-theme');
-    if (stored && ['light', 'dark', 'rainbow'].includes(stored)) {
-      return stored as ThemeMode;
-    }
-    try {
-      // Fallback to OS preference if available
-      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-      return prefersDark ? 'dark' : initialTheme;
-    } catch {
-      return initialTheme;
-    }
-  });
 
   // Track rapid toggles for easter egg
   const toggleCount = useRef(0);
   const lastToggleTime = useRef(Date.now());
-  const [isToggleDisabled, setIsToggleDisabled] = useState(false);
+  const isToggleDisabled = useRef(false);
 
-  // Save theme to localStorage whenever it changes
+  // Apply rainbow class to body whenever theme changes
   useEffect(() => {
-    localStorage.setItem('stirling-theme', themeMode);
-
-    // Apply rainbow class to body if in rainbow mode
     if (themeMode === 'rainbow') {
       document.body.classList.add('rainbow-mode-active');
-
-      // Show easter egg notification
       showRainbowNotification();
     } else {
       document.body.classList.remove('rainbow-mode-active');
@@ -141,7 +124,7 @@ export function useRainbowTheme(initialTheme: 'light' | 'dark' = 'light'): Rainb
 
   const toggleTheme = useCallback(() => {
     // Don't allow toggle if disabled
-    if (isToggleDisabled) {
+    if (isToggleDisabled.current) {
       return;
     }
 
@@ -149,7 +132,7 @@ export function useRainbowTheme(initialTheme: 'light' | 'dark' = 'light'): Rainb
 
     // Simple exit from rainbow mode with single click (after cooldown period)
     if (themeMode === 'rainbow') {
-      setThemeMode('light');
+      updatePreference('theme', 'light');
       console.log('🌈 Rainbow mode deactivated. Thanks for trying it!');
       showExitNotification();
       return;
@@ -165,14 +148,14 @@ export function useRainbowTheme(initialTheme: 'light' | 'dark' = 'light'): Rainb
 
     // Easter egg: Activate rainbow mode after 10 rapid toggles
     if (allowRainbowMode && toggleCount.current >= 10) {
-      setThemeMode('rainbow');
+      updatePreference('theme', 'rainbow');
       console.log('🌈 RAINBOW MODE ACTIVATED! 🌈 You found the secret easter egg!');
       console.log('🌈 Button will be disabled for 3 seconds, then click once to exit!');
 
       // Disable toggle for 3 seconds
-      setIsToggleDisabled(true);
+      isToggleDisabled.current = true;
       setTimeout(() => {
-        setIsToggleDisabled(false);
+        isToggleDisabled.current = false;
         console.log('🌈 Theme toggle re-enabled! Click once to exit rainbow mode.');
       }, 3000);
 
@@ -182,25 +165,26 @@ export function useRainbowTheme(initialTheme: 'light' | 'dark' = 'light'): Rainb
     }
 
     // Normal theme switching
-    setThemeMode(prevMode => prevMode === 'light' ? 'dark' : 'light');
+    const nextTheme = themeMode === 'light' ? 'dark' : 'light';
-  }, [themeMode, isToggleDisabled]);
+    updatePreference('theme', nextTheme);
+  }, [themeMode, updatePreference]);
 
   const activateRainbow = useCallback(() => {
-    setThemeMode('rainbow');
+    updatePreference('theme', 'rainbow');
     console.log('🌈 Rainbow mode manually activated!');
-  }, []);
+  }, [updatePreference]);
 
   const deactivateRainbow = useCallback(() => {
     if (themeMode === 'rainbow') {
-      setThemeMode('light');
+      updatePreference('theme', 'light');
       console.log('🌈 Rainbow mode manually deactivated.');
     }
-  }, [themeMode]);
+  }, [themeMode, updatePreference]);
 
   return {
     themeMode,
     isRainbowMode: themeMode === 'rainbow',
-    isToggleDisabled,
+    isToggleDisabled: isToggleDisabled.current,
     toggleTheme,
     activateRainbow,
     deactivateRainbow,

frontend/src/hooks/useToolPanelModePreference.ts

@@ -1,50 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { TOOL_PANEL_MODE_STORAGE_KEY, ToolPanelMode } from '../contexts/toolWorkflow/toolWorkflowState';
-
-const PROMPT_SEEN_KEY = 'toolPanelModePromptSeen';
-
-export function useToolPanelModePreference() {
-  const [hydrated, setHydrated] = useState(false);
-
-  const getPreferredMode = useCallback((): ToolPanelMode | null => {
-    if (typeof window === 'undefined') return null;
-    const stored = window.localStorage.getItem(TOOL_PANEL_MODE_STORAGE_KEY);
-    return stored === 'sidebar' || stored === 'fullscreen' ? stored : null;
-  }, []);
-
-  const setPreferredMode = useCallback((mode: ToolPanelMode) => {
-    if (typeof window === 'undefined') return;
-    window.localStorage.setItem(TOOL_PANEL_MODE_STORAGE_KEY, mode);
-  }, []);
-
-  const hasSeenPrompt = useCallback((): boolean => {
-    if (typeof window === 'undefined') return true;
-    return window.localStorage.getItem(PROMPT_SEEN_KEY) === 'true';
-  }, []);
-
-  const markPromptSeen = useCallback(() => {
-    if (typeof window === 'undefined') return;
-    window.localStorage.setItem(PROMPT_SEEN_KEY, 'true');
-  }, []);
-
-  const shouldShowPrompt = useMemo(() => {
-    const seen = hasSeenPrompt();
-    const pref = getPreferredMode();
-    return !seen && !pref;
-  }, [getPreferredMode, hasSeenPrompt]);
-
-  useEffect(() => {
-    setHydrated(true);
-  }, []);
-
-  return {
-    hydrated,
-    getPreferredMode,
-    setPreferredMode,
-    hasSeenPrompt,
-    markPromptSeen,
-    shouldShowPrompt,
-  } as const;
-}
-
-

frontend/src/index.tsx

@@ -12,18 +12,6 @@ import posthog from 'posthog-js';
 import { PostHogProvider } from 'posthog-js/react';
 import { BASE_PATH } from './constants/app';
 
-// Compute initial color scheme
-function getInitialScheme(): 'light' | 'dark' {
-  const stored = localStorage.getItem('stirling-theme');
-  if (stored === 'light' || stored === 'dark') return stored;
-  try {
-    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    return prefersDark ? 'dark' : 'light';
-  } catch {
-    return 'light';
-  }
-}
-
 posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, {
   api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
   defaults: '2025-05-24',
@@ -57,7 +45,7 @@ if (!container) {
 const root = ReactDOM.createRoot(container); // Finds the root DOM element
 root.render(
   <React.StrictMode>
-    <ColorSchemeScript defaultColorScheme={getInitialScheme()} />
+    <ColorSchemeScript />
     <PostHogProvider
       client={posthog}
     >

frontend/src/services/preferencesService.ts

@@ -1,131 +1,83 @@
-import { ToolPanelMode } from 'src/contexts/toolWorkflow/toolWorkflowState';
+import { type ToolPanelMode, DEFAULT_TOOL_PANEL_MODE } from '../constants/toolPanel';
-import { indexedDBManager, DATABASE_CONFIGS } from './indexedDBManager';
+import { type ThemeMode, getSystemTheme } from '../constants/theme';
 
 export interface UserPreferences {
   autoUnzip: boolean;
   autoUnzipFileLimit: number;
   defaultToolPanelMode: ToolPanelMode;
+  theme: ThemeMode;
+  toolPanelModePromptSeen: boolean;
+  showLegacyToolDescriptions: boolean;
 }
 
 export const DEFAULT_PREFERENCES: UserPreferences = {
   autoUnzip: true,
   autoUnzipFileLimit: 4,
-  defaultToolPanelMode: 'sidebar',
+  defaultToolPanelMode: DEFAULT_TOOL_PANEL_MODE,
+  theme: getSystemTheme(),
+  toolPanelModePromptSeen: false,
+  showLegacyToolDescriptions: false,
 };
 
+const STORAGE_KEY = 'stirlingpdf_preferences';
+
 class PreferencesService {
-  private db: IDBDatabase | null = null;
+  getPreference<K extends keyof UserPreferences>(
-
-  async initialize(): Promise<void> {
-    this.db = await indexedDBManager.openDatabase(DATABASE_CONFIGS.PREFERENCES);
-  }
-
-  private ensureDatabase(): IDBDatabase {
-    if (!this.db) {
-      throw new Error('PreferencesService not initialized. Call initialize() first.');
-    }
-    return this.db;
-  }
-
-  async getPreference<K extends keyof UserPreferences>(
     key: K
-  ): Promise<UserPreferences[K]> {
+  ): UserPreferences[K] {
-    const db = this.ensureDatabase();
+    // Explicitly re-read every time in case preferences have changed in another tab etc.
-
+    try {
-    return new Promise((resolve) => {
+      const stored = localStorage.getItem(STORAGE_KEY);
-      const transaction = db.transaction(['preferences'], 'readonly');
+      if (stored) {
-      const store = transaction.objectStore('preferences');
+        const preferences = JSON.parse(stored) as Partial<UserPreferences>;
-      const request = store.get(key);
+        if (key in preferences && preferences[key] !== undefined) {
-
+          return preferences[key]!;
-      request.onsuccess = () => {
-        const result = request.result;
-        if (result && result.value !== undefined) {
-          resolve(result.value);
-        } else {
-          // Return default value if preference not found
-          resolve(DEFAULT_PREFERENCES[key]);
         }
-      };
+      }
-
+    } catch (error) {
-      request.onerror = () => {
+      console.error('Error reading preference:', key, error);
-        console.error('Error reading preference:', key, request.error);
+    }
-        // Return default value on error
+    return DEFAULT_PREFERENCES[key];
-        resolve(DEFAULT_PREFERENCES[key]);
-      };
-    });
   }
 
-  async setPreference<K extends keyof UserPreferences>(
+  setPreference<K extends keyof UserPreferences>(
     key: K,
     value: UserPreferences[K]
-  ): Promise<void> {
+  ): void {
-    const db = this.ensureDatabase();
+    try {
-
+      const stored = localStorage.getItem(STORAGE_KEY);
-    return new Promise((resolve, reject) => {
+      const preferences = stored ? JSON.parse(stored) : {};
-      const transaction = db.transaction(['preferences'], 'readwrite');
+      preferences[key] = value;
-      const store = transaction.objectStore('preferences');
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(preferences));
-      const request = store.put({ key, value });
+    } catch (error) {
-
+      console.error('Error writing preference:', key, error);
-      request.onsuccess = () => {
+    }
-        resolve();
-      };
-
-      request.onerror = () => {
-        console.error('Error writing preference:', key, request.error);
-        reject(request.error);
-      };
-    });
   }
 
-  async getAllPreferences(): Promise<UserPreferences> {
+  getAllPreferences(): UserPreferences {
-    const db = this.ensureDatabase();
+    try {
-
+      const stored = localStorage.getItem(STORAGE_KEY);
-    return new Promise((resolve) => {
+      if (stored) {
-      const transaction = db.transaction(['preferences'], 'readonly');
+        const preferences = JSON.parse(stored) as Partial<UserPreferences>;
-      const store = transaction.objectStore('preferences');
-      const request = store.getAll();
-
-      request.onsuccess = () => {
-        const storedPrefs: Partial<UserPreferences> = {};
-        const results = request.result;
-
-        for (const item of results) {
-          if (item.key && item.value !== undefined) {
-            storedPrefs[item.key as keyof UserPreferences] = item.value;
-          }
-        }
-
         // Merge with defaults to ensure all preferences exist
-        resolve({
+        return {
           ...DEFAULT_PREFERENCES,
-          ...storedPrefs,
+          ...preferences,
-        });
+        };
-      };
+      }
-
+    } catch (error) {
-      request.onerror = () => {
+      console.error('Error reading preferences', error);
-        console.error('Error reading all preferences:', request.error);
+    }
-        // Return defaults on error
+    return { ...DEFAULT_PREFERENCES };
-        resolve({ ...DEFAULT_PREFERENCES });
-      };
-    });
   }
 
-  async clearAllPreferences(): Promise<void> {
+  clearAllPreferences(): void {
-    const db = this.ensureDatabase();
+    try {
-
+      localStorage.removeItem(STORAGE_KEY);
-    return new Promise((resolve, reject) => {
+    } catch (error) {
-      const transaction = db.transaction(['preferences'], 'readwrite');
+      console.error('Error clearing preferences:', error);
-      const store = transaction.objectStore('preferences');
+      throw error;
-      const request = store.clear();
+    }
-
-      request.onsuccess = () => {
-        resolve();
-      };
-
-      request.onerror = () => {
-        reject(request.error);
-      };
-    });
   }
 }