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/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 { ToolPanelMode } from 'src/contexts/toolWorkflow/toolWorkflowState';
-
-// type moved to hook
+import type { ToolPanelMode } from '../../constants/toolPanel';
 
 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);
-    markPromptSeen();
+    updatePreference('defaultToolPanelMode', mode);
+    updatePreference('toolPanelModePromptSeen', true);
     setOpened(false);
   };
 
   const handleDismiss = () => {
-    markPromptSeen();
+    updatePreference('toolPanelModePromptSeen', true);
     setOpened(false);
   };
 
-  if (!hydrated) {
-    return null;
-  }
-
   return (
     <Modal
       opened={opened}