feat: architectural grid editor fullPage + slash commands + doc info panel + AI title

memento-note/components/theme-initializer.tsx

@@ -1,97 +1,61 @@
 'use client'
 
 import { useEffect } from 'react'
+import { applyDocumentTheme, normalizeThemeId } from '@/lib/apply-document-theme'
 
 interface ThemeInitializerProps {
-    theme?: string
-    fontSize?: string
-    fontFamily?: string
+  theme?: string
+  fontSize?: string
+  fontFamily?: string
 }
 
 export function ThemeInitializer({ theme, fontSize, fontFamily }: ThemeInitializerProps) {
-    useEffect(() => {
+  useEffect(() => {
+    const applyFontSize = (s?: string) => {
+      const size = s || 'medium'
 
-        // Helper to apply theme
-        const applyTheme = (t?: string) => {
+      const fontSizeMap: Record<string, string> = {
+        small: '14px',
+        medium: '16px',
+        large: '18px',
+        'extra-large': '20px',
+      }
 
-            if (!t) return
+      const fontSizeFactorMap: Record<string, number> = {
+        small: 0.95,
+        medium: 1.0,
+        large: 1.1,
+        'extra-large': 1.25,
+      }
 
-            const root = document.documentElement
+      const root = document.documentElement
+      root.style.setProperty('--user-font-size', fontSizeMap[size] || '16px')
+      root.style.setProperty('--user-font-size-factor', (fontSizeFactorMap[size] || 1).toString())
+    }
 
-            // Reset
-            root.removeAttribute('data-theme')
-            root.classList.remove('dark')
+    const localTheme = localStorage.getItem('theme-preference')
+    const effectiveTheme = localTheme || theme || 'light'
 
-            if (t === 'auto') {
-                const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-                if (systemDark) root.classList.add('dark')
-            } else if (t === 'dark') {
-                root.classList.add('dark')
-            } else if (t === 'light') {
-                // Default, nothing needed usually if light is default, but ensuring no 'dark' class
-            } else {
-                // Named theme
-                root.setAttribute('data-theme', t)
-                // Check if theme implies dark mode (e.g. midnight)
-                if (['midnight'].includes(t)) {
-                    root.classList.add('dark')
-                }
-            }
-        }
+    applyDocumentTheme(effectiveTheme)
 
-        // Helper to apply font size
-        const applyFontSize = (s?: string) => {
-            const size = s || 'medium'
+    if (!localTheme && theme) {
+      localStorage.setItem('theme-preference', normalizeThemeId(theme))
+    }
 
-            const fontSizeMap: Record<string, string> = {
-                'small': '14px',
-                'medium': '16px',
-                'large': '18px',
-                'extra-large': '20px'
-            }
+    applyFontSize(fontSize)
 
-            const fontSizeFactorMap: Record<string, number> = {
-                'small': 0.95,
-                'medium': 1.0,
-                'large': 1.1,
-                'extra-large': 1.25
-            }
+    const localFontFamily = localStorage.getItem('font-family')
+    const effectiveFontFamily = localFontFamily || fontFamily || 'inter'
+    const root = document.documentElement
+    if (effectiveFontFamily === 'system') {
+      root.classList.add('font-system')
+    } else {
+      root.classList.remove('font-system')
+    }
+    if (!localFontFamily && fontFamily) {
+      localStorage.setItem('font-family', fontFamily)
+    }
+  }, [theme, fontSize, fontFamily])
 
-            const root = document.documentElement
-            root.style.setProperty('--user-font-size', fontSizeMap[size] || '16px')
-            root.style.setProperty('--user-font-size-factor', (fontSizeFactorMap[size] || 1).toString())
-        }
-
-        // CRITICAL: Use localStorage as the source of truth (it's always fresh)
-        // Server prop may be stale due to caching.
-        const localTheme = localStorage.getItem('theme-preference')
-        const effectiveTheme = localTheme || theme
-
-
-
-        applyTheme(effectiveTheme)
-
-        // Only sync to localStorage if it was empty (first visit after login)
-        // NEVER overwrite with server value if localStorage already has a value
-        if (!localTheme && theme) {
-            localStorage.setItem('theme-preference', theme)
-        }
-
-        applyFontSize(fontSize)
-
-        // Apply font family
-        const localFontFamily = localStorage.getItem('font-family')
-        const effectiveFontFamily = localFontFamily || fontFamily || 'inter'
-        const root = document.documentElement
-        if (effectiveFontFamily === 'system') {
-            root.classList.add('font-system')
-        } else {
-            root.classList.remove('font-system')
-        }
-        if (!localFontFamily && fontFamily) {
-            localStorage.setItem('font-family', fontFamily)
-        }
-    }, [theme, fontSize, fontFamily])
-
-    return null
+  return null
 }