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

memento-note/app/(main)/settings/appearance/appearance-form.tsx

@@ -1,132 +0,0 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-import { useState } from 'react'
-import { SettingsSection, SettingSelect } from '@/components/settings'
-import { updateAISettings as updateAI } from '@/app/actions/ai-settings'
-import { updateUserSettings as updateUser } from '@/app/actions/user-settings'
-import { useLanguage } from '@/lib/i18n'
-
-interface AppearanceSettingsFormProps {
-    initialTheme: string
-    initialFontSize: string
-    initialCardSizeMode?: string
-}
-
-export function AppearanceSettingsForm({ initialTheme, initialFontSize, initialCardSizeMode = 'variable' }: AppearanceSettingsFormProps) {
-    const router = useRouter()
-    const [theme, setTheme] = useState(initialTheme)
-    const [fontSize, setFontSize] = useState(initialFontSize)
-    const [cardSizeMode, setCardSizeMode] = useState(initialCardSizeMode)
-    const { t } = useLanguage()
-
-    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 if (value === 'light') {
-            root.setAttribute('data-theme', 'light')
-        } else {
-            root.setAttribute('data-theme', value)
-            if (['midnight', 'blue', 'sepia'].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' | 'blue' })
-    }
-
-    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 })
-    }
-
-    const handleCardSizeModeChange = async (value: string) => {
-        setCardSizeMode(value)
-        localStorage.setItem('card-size-mode', value)
-        await updateUser({ cardSizeMode: value as 'variable' | 'uniform' })
-    }
-
-    return (
-        <div className="space-y-6">
-            <div>
-                <h1 className="text-3xl font-bold mb-2">{t('appearance.title')}</h1>
-                <p className="text-gray-600 dark:text-gray-400">
-                    {t('appearance.description')}
-                </p>
-            </div>
-
-            <SettingsSection
-                title={t('settings.theme')}
-                icon={<span className="text-2xl">🎨</span>}
-                description={t('settings.themeLight') + ' / ' + t('settings.themeDark')}
-            >
-                <SettingSelect
-                    label={t('settings.theme')}
-                    description={t('settings.selectLanguage')}
-                    value={theme}
-                    options={[
-                        { value: 'slate', label: t('settings.themeLight') },
-                        { value: 'dark', label: t('settings.themeDark') },
-                        { value: 'sepia', label: 'Sepia' },
-                        { value: 'midnight', label: 'Midnight' },
-                        { value: 'blue', label: 'Blue' },
-                        { value: 'auto', label: t('settings.themeSystem') },
-                    ]}
-                    onChange={handleThemeChange}
-                />
-            </SettingsSection>
-
-            <SettingsSection
-                title={t('profile.fontSize')}
-                icon={<span className="text-2xl">📝</span>}
-                description={t('profile.fontSizeDescription')}
-            >
-                <SettingSelect
-                    label={t('profile.fontSize')}
-                    description={t('profile.selectFontSize')}
-                    value={fontSize}
-                    options={[
-                        { value: 'small', label: t('profile.fontSizeSmall') },
-                        { value: 'medium', label: t('profile.fontSizeMedium') },
-                        { value: 'large', label: t('profile.fontSizeLarge') },
-                    ]}
-                    onChange={handleFontSizeChange}
-                />
-            </SettingsSection>
-
-            <SettingsSection
-                title={t('settings.cardSizeMode')}
-                icon={<span className="text-2xl">📐</span>}
-                description={t('settings.cardSizeModeDescription')}
-            >
-                <SettingSelect
-                    label={t('settings.cardSizeMode')}
-                    description={t('settings.selectCardSizeMode')}
-                    value={cardSizeMode}
-                    options={[
-                        { value: 'variable', label: t('settings.cardSizeVariable') },
-                        { value: 'uniform', label: t('settings.cardSizeUniform') },
-                    ]}
-                    onChange={handleCardSizeModeChange}
-                />
-            </SettingsSection>
-        </div>
-    )
-}

memento-note/app/(main)/settings/appearance/appearance-settings-client.tsx

@@ -6,11 +6,12 @@ import { updateUserSettings } from '@/app/actions/user-settings'
 import { useLanguage } from '@/lib/i18n'
 import { toast } from 'sonner'
 import { Palette, Type, LayoutGrid, Maximize2 } from 'lucide-react'
+import { applyDocumentTheme, normalizeThemeId, type ThemeId } from '@/lib/apply-document-theme'
 
 interface AppearanceSettingsClientProps {
   initialFontSize: string
   initialTheme: string
-  initialNotesViewMode: 'masonry' | 'tabs'
+  initialNotesViewMode: 'masonry' | 'tabs' | 'list'
   initialCardSizeMode?: 'variable' | 'uniform'
   initialFontFamily?: string
 }
@@ -23,27 +24,18 @@ export function AppearanceSettingsClient({
   initialFontFamily = 'inter',
 }: AppearanceSettingsClientProps) {
   const { t } = useLanguage()
-  const [theme, setTheme] = useState(initialTheme || 'light')
+  const [theme, setTheme] = useState<ThemeId>(normalizeThemeId(initialTheme || 'light'))
   const [fontSize, setFontSize] = useState(initialFontSize || 'medium')
-  const [notesViewMode, setNotesViewMode] = useState<'masonry' | 'tabs'>(initialNotesViewMode)
+  const [notesViewMode, setNotesViewMode] = useState<'masonry' | 'tabs' | 'list'>(initialNotesViewMode)
   const [cardSizeMode, setCardSizeMode] = useState<'variable' | 'uniform'>(initialCardSizeMode)
   const [fontFamily, setFontFamily] = useState(initialFontFamily)
 
   const handleThemeChange = async (value: string) => {
-    setTheme(value)
-    localStorage.setItem('theme-preference', value)
-    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 any })
+    const next = normalizeThemeId(value)
+    setTheme(next)
+    localStorage.setItem('theme-preference', next)
+    applyDocumentTheme(next)
+    await updateUserSettings({ theme: next })
     toast.success(t('settings.settingsSaved') || 'Saved')
   }
 
@@ -56,7 +48,7 @@ export function AppearanceSettingsClient({
   }
 
   const handleNotesViewChange = async (value: string) => {
-    const mode = value === 'tabs' ? 'tabs' : 'masonry'
+    const mode = value === 'tabs' ? 'tabs' : value === 'list' ? 'list' : 'masonry'
     setNotesViewMode(mode)
     await updateAISettings({ notesViewMode: mode })
     toast.success(t('settings.settingsSaved') || 'Saved')
@@ -87,12 +79,14 @@ export function AppearanceSettingsClient({
     value,
     options,
     onChange,
+    optionGroups,
   }: {
     icon: React.ElementType
     title: string
     description: string
     value: string
-    options: { value: string; label: string }[]
+    options?: { value: string; label: string }[]
+    optionGroups?: { label: string; options: { value: string; label: string }[] }[]
     onChange: (v: string) => void
   }) => (
     <div className="bg-card rounded-lg border border-border p-6 shadow-sm flex flex-col gap-4">
@@ -111,17 +105,56 @@ export function AppearanceSettingsClient({
           onChange={(e) => onChange(e.target.value)}
           className="w-full h-11 px-4 bg-muted border border-border rounded-lg text-foreground text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none appearance-none cursor-pointer transition-colors"
         >
-          {options.map((o) => (
-            <option key={o.value} value={o.value}>{o.label}</option>
-          ))}
+          {optionGroups
+            ? optionGroups.map((g) => (
+                <optgroup key={g.label} label={g.label}>
+                  {g.options.map((o) => (
+                    <option key={o.value} value={o.value}>
+                      {o.label}
+                    </option>
+                  ))}
+                </optgroup>
+              ))
+            : options?.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
         </select>
         <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground">
-          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
         </div>
       </div>
     </div>
   )
 
+  const themeOptionGroups = [
+    {
+      label: t('settings.themeBaseGroup'),
+      options: [
+        { value: 'light', label: t('settings.themeLight') },
+        { value: 'dark', label: t('settings.themeDark') },
+        { value: 'auto', label: t('settings.themeSystem') },
+      ],
+    },
+    {
+      label: t('settings.themePalettesGroup'),
+      options: [
+        { value: 'sepia', label: t('settings.themeSepia') },
+        { value: 'midnight', label: t('settings.themeMidnight') },
+        { value: 'rose', label: t('settings.themeRose') },
+        { value: 'green', label: t('settings.themeGreen') },
+        { value: 'lavender', label: t('settings.themeLavender') },
+        { value: 'sand', label: t('settings.themeSand') },
+        { value: 'ocean', label: t('settings.themeOcean') },
+        { value: 'sunset', label: t('settings.themeSunset') },
+        { value: 'blue', label: t('settings.themeBlue') },
+      ],
+    },
+  ]
+
   return (
     <div className="space-y-8">
       <div>
@@ -135,19 +168,7 @@ export function AppearanceSettingsClient({
           title={t('settings.theme')}
           description={t('appearance.selectTheme')}
           value={theme}
-          options={[
-            { value: 'light', label: t('settings.themeLight') },
-            { value: 'dark', label: t('settings.themeDark') },
-            { value: 'sepia', label: 'Sepia' },
-            { value: 'midnight', label: 'Midnight' },
-            { value: 'rose', label: 'Rose' },
-            { value: 'green', label: 'Green' },
-            { value: 'lavender', label: 'Lavender' },
-            { value: 'sand', label: 'Sand' },
-            { value: 'ocean', label: 'Ocean' },
-            { value: 'sunset', label: 'Sunset' },
-            { value: 'auto', label: t('settings.themeSystem') },
-          ]}
+          optionGroups={themeOptionGroups}
           onChange={handleThemeChange}
         />
 
@@ -168,7 +189,7 @@ export function AppearanceSettingsClient({
         <SelectCard
           icon={Type}
           title={t('appearance.fontFamilyLabel') || 'Police'}
-          description={t('appearance.fontFamilyDescription') || 'Choisissez la police de l\'application'}
+          description={t('appearance.fontFamilyDescription') || "Choisissez la police de l'application"}
           value={fontFamily}
           options={[
             { value: 'inter', label: 'Inter' },
@@ -184,6 +205,7 @@ export function AppearanceSettingsClient({
           value={notesViewMode}
           options={[
             { value: 'masonry', label: t('appearance.notesViewMasonry') },
+            { value: 'list', label: t('appearance.notesViewList') },
             { value: 'tabs', label: t('appearance.notesViewTabs') },
           ]}
           onChange={handleNotesViewChange}

memento-note/app/(main)/settings/appearance/page.tsx

@@ -19,7 +19,13 @@ export default async function AppearanceSettingsPage() {
     <AppearanceSettingsClient
       initialFontSize={aiSettings.fontSize}
       initialTheme={userSettings.theme}
-      initialNotesViewMode={aiSettings.notesViewMode === 'masonry' ? 'masonry' : 'tabs'}
+      initialNotesViewMode={
+        aiSettings.notesViewMode === 'masonry'
+          ? 'masonry'
+          : aiSettings.notesViewMode === 'list'
+            ? 'list'
+            : 'tabs'
+      }
       initialCardSizeMode={userSettings.cardSizeMode}
       initialFontFamily={aiSettings.fontFamily || 'inter'}
     />