WIP: Améliorations UX et corrections de bugs avant création des épiques

keep-notes/app/(main)/settings/appearance/page.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useState } from 'react'
+import { SettingsNav, SettingsSection, SettingSelect } from '@/components/settings'
+import { updateAISettings } from '@/app/actions/ai-settings'
+
+export default function AppearanceSettingsPage() {
+  const [theme, setTheme] = useState('auto')
+  const [fontSize, setFontSize] = useState('medium')
+
+  const handleThemeChange = async (value: string) => {
+    setTheme(value)
+    // TODO: Implement theme persistence
+    console.log('Theme:', value)
+  }
+
+  const handleFontSizeChange = async (value: string) => {
+    setFontSize(value)
+    // TODO: Implement font size persistence
+    await updateAISettings({ fontSize: value as any })
+  }
+
+  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">Appearance</h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              Customize the look and feel of the application
+            </p>
+          </div>
+
+          <SettingsSection
+            title="Theme"
+            icon={<span className="text-2xl">🎨</span>}
+            description="Choose your preferred color scheme"
+          >
+            <SettingSelect
+              label="Color Scheme"
+              description="Select the app's visual theme"
+              value={theme}
+              options={[
+                { value: 'light', label: 'Light' },
+                { value: 'dark', label: 'Dark' },
+                { 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 the size of text throughout the app"
+              value={fontSize}
+              options={[
+                { value: 'small', label: 'Small' },
+                { value: 'medium', label: 'Medium' },
+                { value: 'large', label: 'Large' },
+              ]}
+              onChange={handleFontSizeChange}
+            />
+          </SettingsSection>
+        </main>
+      </div>
+    </div>
+  )
+}