Refactor Admin and Settings UI to Ethereal Precision aesthetic and improve note import/export functionality

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

@@ -1,11 +1,11 @@
 'use client'
 
 import { useState } from 'react'
-import { SettingsSection, SettingSelect } from '@/components/settings'
 import { updateAISettings } from '@/app/actions/ai-settings'
 import { updateUserSettings } from '@/app/actions/user-settings'
 import { useLanguage } from '@/lib/i18n'
 import { toast } from 'sonner'
+import { Palette, Type, LayoutGrid, Maximize2 } from 'lucide-react'
 
 interface AppearanceSettingsClientProps {
   initialFontSize: string
@@ -15,7 +15,13 @@ interface AppearanceSettingsClientProps {
   initialFontFamily?: string
 }
 
-export function AppearanceSettingsClient({ initialFontSize, initialTheme, initialNotesViewMode, initialCardSizeMode = 'variable', initialFontFamily = 'inter' }: AppearanceSettingsClientProps) {
+export function AppearanceSettingsClient({
+  initialFontSize,
+  initialTheme,
+  initialNotesViewMode,
+  initialCardSizeMode = 'variable',
+  initialFontFamily = 'inter',
+}: AppearanceSettingsClientProps) {
   const { t } = useLanguage()
   const [theme, setTheme] = useState(initialTheme || 'light')
   const [fontSize, setFontSize] = useState(initialFontSize || 'medium')
@@ -26,11 +32,9 @@ export function AppearanceSettingsClient({ initialFontSize, initialTheme, initia
   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') {
@@ -39,19 +43,14 @@ export function AppearanceSettingsClient({ initialFontSize, initialTheme, initia
       root.setAttribute('data-theme', value)
       if (['midnight'].includes(value)) root.classList.add('dark')
     }
-
-    await updateUserSettings({ theme: value as 'light' | 'dark' | 'auto' })
+    await updateUserSettings({ theme: value as any })
     toast.success(t('settings.settingsSaved') || 'Saved')
   }
 
   const handleFontSizeChange = async (value: string) => {
     setFontSize(value)
-
-    const fontSizeMap: Record<string, string> = {
-      'small': '14px', 'medium': '16px', 'large': '18px', 'extra-large': '20px'
-    }
-    document.documentElement.style.setProperty('--user-font-size', fontSizeMap[value] || '16px')
-
+    const map: Record<string, string> = { small: '14px', medium: '16px', large: '18px', 'extra-large': '20px' }
+    document.documentElement.style.setProperty('--user-font-size', map[value] || '16px')
     await updateAISettings({ fontSize: value as any })
     toast.success(t('settings.settingsSaved') || 'Saved')
   }
@@ -76,31 +75,64 @@ export function AppearanceSettingsClient({ initialFontSize, initialTheme, initia
     setFontFamily(font)
     localStorage.setItem('font-family', font)
     const root = document.documentElement
-    if (font === 'system') {
-      root.classList.add('font-system')
-    } else {
-      root.classList.remove('font-system')
-    }
+    font === 'system' ? root.classList.add('font-system') : root.classList.remove('font-system')
     await updateAISettings({ fontFamily: font })
     toast.success(t('settings.settingsSaved') || 'Saved')
   }
 
+  const SelectCard = ({
+    icon: Icon,
+    title,
+    description,
+    value,
+    options,
+    onChange,
+  }: {
+    icon: React.ElementType
+    title: string
+    description: string
+    value: 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">
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
+          <Icon className="h-5 w-5" />
+        </div>
+        <div>
+          <h3 className="font-semibold text-foreground">{title}</h3>
+          <p className="text-sm text-muted-foreground">{description}</p>
+        </div>
+      </div>
+      <div className="relative mt-2">
+        <select
+          value={value}
+          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>
+          ))}
+        </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>
+        </div>
+      </div>
+    </div>
+  )
+
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <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>
+        <h1 className="text-2xl font-bold tracking-tight text-foreground">{t('appearance.title')}</h1>
+        <p className="text-muted-foreground mt-1">{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')}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <SelectCard
+          icon={Palette}
+          title={t('settings.theme')}
           description={t('appearance.selectTheme')}
           value={theme}
           options={[
@@ -118,50 +150,36 @@ export function AppearanceSettingsClient({ initialFontSize, initialTheme, initia
           ]}
           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')}
+        <SelectCard
+          icon={Type}
+          title={t('profile.fontSize')}
+          description={t('profile.fontSizeDescription')}
           value={fontSize}
           options={[
             { value: 'small', label: t('profile.fontSizeSmall') },
             { value: 'medium', label: t('profile.fontSizeMedium') },
             { value: 'large', label: t('profile.fontSizeLarge') },
+            { value: 'extra-large', label: t('profile.fontSizeExtraLarge') },
           ]}
           onChange={handleFontSizeChange}
         />
-      </SettingsSection>
 
-      <SettingsSection
-        title={t('appearance.fontFamilyLabel') || 'Font Family'}
-        icon={<span className="text-2xl">🔤</span>}
-        description={t('appearance.fontFamilyDescription') || 'Choose the font used throughout the app'}
-      >
-        <SettingSelect
-          label={t('appearance.fontFamilyLabel') || 'Font Family'}
-          description={t('appearance.selectFontFamily') || 'Inter is optimized for readability, System uses your OS native font'}
+        <SelectCard
+          icon={Type}
+          title={t('appearance.fontFamilyLabel') || 'Police'}
+          description={t('appearance.fontFamilyDescription') || 'Choisissez la police de l\'application'}
           value={fontFamily}
           options={[
             { value: 'inter', label: 'Inter' },
-            { value: 'system', label: t('appearance.fontSystem') || 'System Default' },
+            { value: 'system', label: t('appearance.fontSystem') || 'Système' },
           ]}
           onChange={handleFontFamilyChange}
         />
-      </SettingsSection>
 
-      <SettingsSection
-        title={t('appearance.notesViewLabel')}
-        icon={<span className="text-2xl">📋</span>}
-        description={t('appearance.notesViewDescription')}
-      >
-        <SettingSelect
-          label={t('appearance.notesViewLabel')}
+        <SelectCard
+          icon={LayoutGrid}
+          title={t('appearance.notesViewLabel')}
           description={t('appearance.notesViewDescription')}
           value={notesViewMode}
           options={[
@@ -170,16 +188,11 @@ export function AppearanceSettingsClient({ initialFontSize, initialTheme, initia
           ]}
           onChange={handleNotesViewChange}
         />
-      </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')}
+        <SelectCard
+          icon={Maximize2}
+          title={t('settings.cardSizeMode')}
+          description={t('settings.cardSizeModeDescription')}
           value={cardSizeMode}
           options={[
             { value: 'variable', label: t('settings.cardSizeVariable') },
@@ -187,7 +200,7 @@ export function AppearanceSettingsClient({ initialFontSize, initialTheme, initia
           ]}
           onChange={handleCardSizeModeChange}
         />
-      </SettingsSection>
+      </div>
     </div>
   )
 }