fix: unify theme system - fix theme switching persistence

- Unified localStorage key to 'theme-preference' across all components
- Fixed header.tsx using wrong localStorage key ('theme' instead of 'theme-preference')
- Added localStorage hybrid persistence for instant theme changes
- Removed router.refresh() which was causing stale data revert
- Replaced Blue theme with Sepia
- Consolidated auth() calls to prevent race conditions
- Updated UserSettingsData types to include all themes

keep-notes/app/(main)/settings/appearance/page.tsx

@@ -1,79 +1,111 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { SettingsNav, SettingsSection, SettingSelect } from '@/components/settings'
-import { updateAISettings } from '@/app/actions/ai-settings'
+import { updateAISettings, getAISettings } from '@/app/actions/ai-settings'
+import { updateUserSettings, getUserSettings } from '@/app/actions/user-settings'
 
 export default function AppearanceSettingsPage() {
   const [theme, setTheme] = useState('auto')
   const [fontSize, setFontSize] = useState('medium')
 
+  // Load settings on mount
+  useEffect(() => {
+    async function loadSettings() {
+      try {
+        const [aiSettings, userSettings] = await Promise.all([
+          getAISettings(),
+          getUserSettings()
+        ])
+        if (aiSettings.fontSize) setFontSize(aiSettings.fontSize)
+        if (userSettings.theme) setTheme(userSettings.theme)
+      } catch (error) {
+        console.error('Error loading settings:', error)
+      }
+    }
+    loadSettings()
+  }, [])
+
   const handleThemeChange = async (value: string) => {
     setTheme(value)
-    // TODO: Implement theme persistence
-    console.log('Theme:', value)
+    localStorage.setItem('theme-preference', value)
+
+    // Instant visual update
+    const root = document.documentElement
+    root.removeAttribute('data-theme')
+    root.classList.remove('dark')
+
+    if (value === 'auto') {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) root.classList.add('dark')
+    } else if (value === 'dark') {
+      root.classList.add('dark')
+    } else {
+      root.setAttribute('data-theme', value)
+      if (['midnight'].includes(value)) root.classList.add('dark')
+    }
+
+    await updateUserSettings({ theme: value as 'light' | 'dark' | 'auto' })
   }
 
   const handleFontSizeChange = async (value: string) => {
     setFontSize(value)
-    // TODO: Implement font size persistence
+
+    // Instant visual update
+    const fontSizeMap: Record<string, string> = {
+      'small': '14px', 'medium': '16px', 'large': '18px', 'extra-large': '20px'
+    }
+    const root = document.documentElement
+    root.style.setProperty('--user-font-size', fontSizeMap[value] || '16px')
+
     await updateAISettings({ fontSize: value as any })
   }
 
   return (
-    <div className="container mx-auto py-10 px-4 max-w-6xl">
-      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-        {/* Sidebar Navigation */}
-        <aside className="lg:col-span-1">
-          <SettingsNav />
-        </aside>
-
-        {/* Main Content */}
-        <main className="lg:col-span-3 space-y-6">
-          <div>
-            <h1 className="text-3xl font-bold mb-2">Appearance</h1>
-            <p className="text-gray-600 dark:text-gray-400">
-              Customize the look and feel of the application
-            </p>
-          </div>
-
-          <SettingsSection
-            title="Theme"
-            icon={<span className="text-2xl">🎨</span>}
-            description="Choose your preferred color scheme"
-          >
-            <SettingSelect
-              label="Color Scheme"
-              description="Select the app's visual theme"
-              value={theme}
-              options={[
-                { value: 'light', label: 'Light' },
-                { value: 'dark', label: 'Dark' },
-                { value: 'auto', label: 'Auto (system)' },
-              ]}
-              onChange={handleThemeChange}
-            />
-          </SettingsSection>
-
-          <SettingsSection
-            title="Typography"
-            icon={<span className="text-2xl">📝</span>}
-            description="Adjust text size for better readability"
-          >
-            <SettingSelect
-              label="Font Size"
-              description="Adjust the size of text throughout the app"
-              value={fontSize}
-              options={[
-                { value: 'small', label: 'Small' },
-                { value: 'medium', label: 'Medium' },
-                { value: 'large', label: 'Large' },
-              ]}
-              onChange={handleFontSizeChange}
-            />
-          </SettingsSection>
-        </main>
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">Appearance</h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          Customize look and feel of application
+        </p>
       </div>
+
+      <SettingsSection
+        title="Theme"
+        icon={<span className="text-2xl">🎨</span>}
+        description="Choose your preferred color scheme"
+      >
+        <SettingSelect
+          label="Color Scheme"
+          description="Select app's visual theme"
+          value={theme}
+          options={[
+            { value: 'light', label: 'Light' },
+            { value: 'dark', label: 'Dark' },
+            { value: 'sepia', label: 'Sepia' },
+            { value: 'midnight', label: 'Midnight' },
+            { value: 'auto', label: 'Auto (system)' },
+          ]}
+          onChange={handleThemeChange}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        title="Typography"
+        icon={<span className="text-2xl">📝</span>}
+        description="Adjust text size for better readability"
+      >
+        <SettingSelect
+          label="Font Size"
+          description="Adjust size of text throughout app"
+          value={fontSize}
+          options={[
+            { value: 'small', label: 'Small' },
+            { value: 'medium', label: 'Medium' },
+            { value: 'large', label: 'Large' },
+          ]}
+          onChange={handleFontSizeChange}
+        />
+      </SettingsSection>
     </div>
   )
 }