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

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

@@ -0,0 +1,107 @@
+'use client'
+
+import { useState } from 'react'
+import { SettingsNav, SettingsSection, SettingToggle, SettingSelect, SettingsSearch } from '@/components/settings'
+import { useLanguage } from '@/lib/i18n'
+import { updateAISettings } from '@/app/actions/ai-settings'
+
+export default function GeneralSettingsPage() {
+  const { t } = useLanguage()
+  const [language, setLanguage] = useState('auto')
+
+  const handleLanguageChange = async (value: string) => {
+    setLanguage(value)
+    await updateAISettings({ preferredLanguage: value as any })
+  }
+
+  const handleNotificationsChange = async (enabled: boolean) => {
+    // TODO: Implement notifications setting
+    console.log('Notifications:', enabled)
+  }
+
+  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">General Settings</h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              Configure basic application preferences
+            </p>
+          </div>
+
+          <SettingsSearch onSearch={(query) => console.log('Search:', query)} />
+
+          <SettingsSection
+            title="Language & Region"
+            icon={<span className="text-2xl">🌍</span>}
+            description="Choose your preferred language and regional settings"
+          >
+            <SettingSelect
+              label="Language"
+              description="Select the interface language"
+              value={language}
+              options={[
+                { value: 'auto', label: 'Auto-detect' },
+                { value: 'en', label: 'English' },
+                { value: 'fr', label: 'Français' },
+                { value: 'es', label: 'Español' },
+                { value: 'de', label: 'Deutsch' },
+                { value: 'fa', label: 'فارسی' },
+                { value: 'it', label: 'Italiano' },
+                { value: 'pt', label: 'Português' },
+                { value: 'ru', label: 'Русский' },
+                { value: 'zh', label: '中文' },
+                { value: 'ja', label: '日本語' },
+                { value: 'ko', label: '한국어' },
+                { value: 'ar', label: 'العربية' },
+                { value: 'hi', label: 'हिन्दी' },
+                { value: 'nl', label: 'Nederlands' },
+                { value: 'pl', label: 'Polski' },
+              ]}
+              onChange={handleLanguageChange}
+            />
+          </SettingsSection>
+
+          <SettingsSection
+            title="Notifications"
+            icon={<span className="text-2xl">🔔</span>}
+            description="Manage how and when you receive notifications"
+          >
+            <SettingToggle
+              label="Email Notifications"
+              description="Receive email updates about your notes"
+              checked={false}
+              onChange={handleNotificationsChange}
+            />
+            <SettingToggle
+              label="Desktop Notifications"
+              description="Show notifications in your browser"
+              checked={false}
+              onChange={handleNotificationsChange}
+            />
+          </SettingsSection>
+
+          <SettingsSection
+            title="Privacy"
+            icon={<span className="text-2xl">🔒</span>}
+            description="Control your privacy settings"
+          >
+            <SettingToggle
+              label="Anonymous Analytics"
+              description="Help improve the app with anonymous usage data"
+              checked={false}
+              onChange={handleNotificationsChange}
+            />
+          </SettingsSection>
+        </main>
+      </div>
+    </div>
+  )
+}