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/general/page.tsx

@@ -1,107 +1,124 @@
 'use client'
 
-import { useState } from 'react'
-import { SettingsNav, SettingsSection, SettingToggle, SettingSelect, SettingsSearch } from '@/components/settings'
+import { useState, useEffect } from 'react'
+import { SettingsNav, SettingsSection, SettingToggle, SettingSelect } from '@/components/settings'
 import { useLanguage } from '@/lib/i18n'
-import { updateAISettings } from '@/app/actions/ai-settings'
+import { updateAISettings, getAISettings } from '@/app/actions/ai-settings'
 
 export default function GeneralSettingsPage() {
   const { t } = useLanguage()
   const [language, setLanguage] = useState('auto')
+  const [emailNotifications, setEmailNotifications] = useState(false)
+  const [desktopNotifications, setDesktopNotifications] = useState(false)
+  const [anonymousAnalytics, setAnonymousAnalytics] = useState(false)
+
+  // Load settings on mount
+  useEffect(() => {
+    async function loadSettings() {
+      try {
+        const settings = await getAISettings()
+        if (settings.preferredLanguage) setLanguage(settings.preferredLanguage)
+        if (settings.emailNotifications !== undefined) setEmailNotifications(settings.emailNotifications)
+        if (settings.desktopNotifications !== undefined) setDesktopNotifications(settings.desktopNotifications)
+        if (settings.anonymousAnalytics !== undefined) setAnonymousAnalytics(settings.anonymousAnalytics)
+      } catch (error) {
+        console.error('Error loading settings:', error)
+      }
+    }
+    loadSettings()
+  }, [])
 
   const handleLanguageChange = async (value: string) => {
     setLanguage(value)
     await updateAISettings({ preferredLanguage: value as any })
   }
 
-  const handleNotificationsChange = async (enabled: boolean) => {
-    // TODO: Implement notifications setting
-    console.log('Notifications:', enabled)
+  const handleEmailNotificationsChange = async (enabled: boolean) => {
+    setEmailNotifications(enabled)
+    await updateAISettings({ emailNotifications: enabled })
+  }
+
+  const handleDesktopNotificationsChange = async (enabled: boolean) => {
+    setDesktopNotifications(enabled)
+    await updateAISettings({ desktopNotifications: enabled })
+  }
+
+  const handleAnonymousAnalyticsChange = async (enabled: boolean) => {
+    setAnonymousAnalytics(enabled)
+    await updateAISettings({ anonymousAnalytics: enabled })
   }
 
   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">General Settings</h1>
-            <p className="text-gray-600 dark:text-gray-400">
-              Configure basic application preferences
-            </p>
-          </div>
-
-          <SettingsSearch onSearch={(query) => console.log('Search:', query)} />
-
-          <SettingsSection
-            title="Language & Region"
-            icon={<span className="text-2xl">🌍</span>}
-            description="Choose your preferred language and regional settings"
-          >
-            <SettingSelect
-              label="Language"
-              description="Select the interface language"
-              value={language}
-              options={[
-                { value: 'auto', label: 'Auto-detect' },
-                { value: 'en', label: 'English' },
-                { value: 'fr', label: 'Français' },
-                { value: 'es', label: 'Español' },
-                { value: 'de', label: 'Deutsch' },
-                { value: 'fa', label: 'فارسی' },
-                { value: 'it', label: 'Italiano' },
-                { value: 'pt', label: 'Português' },
-                { value: 'ru', label: 'Русский' },
-                { value: 'zh', label: '中文' },
-                { value: 'ja', label: '日本語' },
-                { value: 'ko', label: '한국어' },
-                { value: 'ar', label: 'العربية' },
-                { value: 'hi', label: 'हिन्दी' },
-                { value: 'nl', label: 'Nederlands' },
-                { value: 'pl', label: 'Polski' },
-              ]}
-              onChange={handleLanguageChange}
-            />
-          </SettingsSection>
-
-          <SettingsSection
-            title="Notifications"
-            icon={<span className="text-2xl">🔔</span>}
-            description="Manage how and when you receive notifications"
-          >
-            <SettingToggle
-              label="Email Notifications"
-              description="Receive email updates about your notes"
-              checked={false}
-              onChange={handleNotificationsChange}
-            />
-            <SettingToggle
-              label="Desktop Notifications"
-              description="Show notifications in your browser"
-              checked={false}
-              onChange={handleNotificationsChange}
-            />
-          </SettingsSection>
-
-          <SettingsSection
-            title="Privacy"
-            icon={<span className="text-2xl">🔒</span>}
-            description="Control your privacy settings"
-          >
-            <SettingToggle
-              label="Anonymous Analytics"
-              description="Help improve the app with anonymous usage data"
-              checked={false}
-              onChange={handleNotificationsChange}
-            />
-          </SettingsSection>
-        </main>
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">General Settings</h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          Configure basic application preferences
+        </p>
       </div>
+
+      <SettingsSection
+        title="Language & Region"
+        icon={<span className="text-2xl">🌍</span>}
+        description="Choose your preferred language and regional settings"
+      >
+        <SettingSelect
+          label="Language"
+          description="Select interface language"
+          value={language}
+          options={[
+            { value: 'auto', label: 'Auto-detect' },
+            { value: 'en', label: 'English' },
+            { value: 'fr', label: 'Français' },
+            { value: 'es', label: 'Español' },
+            { value: 'de', label: 'Deutsch' },
+            { value: 'fa', label: 'فارسی' },
+            { value: 'it', label: 'Italiano' },
+            { value: 'pt', label: 'Português' },
+            { value: 'ru', label: 'Русский' },
+            { value: 'zh', label: '中文' },
+            { value: 'ja', label: '日本語' },
+            { value: 'ko', label: '한국어' },
+            { value: 'ar', label: 'العربية' },
+            { value: 'hi', label: 'हिन्दी' },
+            { value: 'nl', label: 'Nederlands' },
+            { value: 'pl', label: 'Polski' },
+          ]}
+          onChange={handleLanguageChange}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        title="Notifications"
+        icon={<span className="text-2xl">🔔</span>}
+        description="Manage how and when you receive notifications"
+      >
+        <SettingToggle
+          label="Email Notifications"
+          description="Receive email updates about your notes"
+          checked={emailNotifications}
+          onChange={handleEmailNotificationsChange}
+        />
+        <SettingToggle
+          label="Desktop Notifications"
+          description="Show notifications in your browser"
+          checked={desktopNotifications}
+          onChange={handleDesktopNotificationsChange}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        title="Privacy"
+        icon={<span className="text-2xl">🔒</span>}
+        description="Control your privacy settings"
+      >
+        <SettingToggle
+          label="Anonymous Analytics"
+          description="Help improve app with anonymous usage data"
+          checked={anonymousAnalytics}
+          onChange={handleAnonymousAnalyticsChange}
+        />
+      </SettingsSection>
     </div>
   )
 }