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
2026-01-18 22:33:41 +01:00
parent ef60dafd73
commit ddb67ba9e5
306 changed files with 59580 additions and 6063 deletions
--- a/keep-notes/app/(main)/settings/appearance/appearance-form.tsx
+++ b/keep-notes/app/(main)/settings/appearance/appearance-form.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { SettingsSection, SettingSelect } from '@/components/settings'
+// Import actions directly
+import { updateAISettings as updateAI } from '@/app/actions/ai-settings'
+import { updateUserSettings as updateUser } from '@/app/actions/user-settings'
+
+interface AppearanceSettingsFormProps {
+    initialTheme: string
+    initialFontSize: string
+}
+
+export function AppearanceSettingsForm({ initialTheme, initialFontSize }: AppearanceSettingsFormProps) {
+    const router = useRouter()
+    const [theme, setTheme] = useState(initialTheme)
+    const [fontSize, setFontSize] = useState(initialFontSize)
+
+    const handleThemeChange = async (value: string) => {
+        setTheme(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')
+        }
+
+        // Save to DB (no need for router.refresh - localStorage handles immediate visuals)
+        await updateUser({ theme: value as 'light' | 'dark' | 'auto' | 'sepia' | 'midnight' })
+    }
+
+    const handleFontSizeChange = async (value: string) => {
+        setFontSize(value)
+
+        // 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 updateAI({ fontSize: value as any })
+    }
+
+    return (
+        <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>
+    )
+}