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

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

@@ -0,0 +1,144 @@
+'use client'
+
+import { SettingsNav, SettingsSection } from '@/components/settings'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+
+export default function AboutSettingsPage() {
+  const version = '1.0.0'
+  const buildDate = '2026-01-17'
+
+  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">About</h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              Information about the application
+            </p>
+          </div>
+
+          <SettingsSection
+            title="Keep Notes"
+            icon={<span className="text-2xl">📝</span>}
+            description="A powerful note-taking application with AI-powered features"
+          >
+            <Card>
+              <CardContent className="pt-6 space-y-4">
+                <div className="flex justify-between items-center">
+                  <span className="font-medium">Version</span>
+                  <Badge variant="secondary">{version}</Badge>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="font-medium">Build Date</span>
+                  <Badge variant="outline">{buildDate}</Badge>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="font-medium">Platform</span>
+                  <Badge variant="outline">Web</Badge>
+                </div>
+              </CardContent>
+            </Card>
+          </SettingsSection>
+
+          <SettingsSection
+            title="Features"
+            icon={<span className="text-2xl">✨</span>}
+            description="AI-powered capabilities"
+          >
+            <Card>
+              <CardContent className="pt-6 space-y-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  <span>AI-powered title suggestions</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  <span>Semantic search with embeddings</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  <span>Paragraph reformulation</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  <span>Memory Echo daily insights</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  <span>Notebook organization</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  <span>Drag & drop note management</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  <span>Label system</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  <span>Multiple AI providers (OpenAI, Ollama)</span>
+                </div>
+              </CardContent>
+            </Card>
+          </SettingsSection>
+
+          <SettingsSection
+            title="Technology Stack"
+            icon={<span className="text-2xl">⚙️</span>}
+            description="Built with modern technologies"
+          >
+            <Card>
+              <CardContent className="pt-6 space-y-2 text-sm">
+                <div><strong>Frontend:</strong> Next.js 16, React 19, TypeScript</div>
+                <div><strong>Backend:</strong> Next.js API Routes, Server Actions</div>
+                <div><strong>Database:</strong> SQLite (Prisma ORM)</div>
+                <div><strong>Authentication:</strong> NextAuth 5</div>
+                <div><strong>AI:</strong> Vercel AI SDK, OpenAI, Ollama</div>
+                <div><strong>UI:</strong> Radix UI, Tailwind CSS, Lucide Icons</div>
+                <div><strong>Testing:</strong> Playwright (E2E)</div>
+              </CardContent>
+            </Card>
+          </SettingsSection>
+
+          <SettingsSection
+            title="Support"
+            icon={<span className="text-2xl">💬</span>}
+            description="Get help and feedback"
+          >
+            <Card>
+              <CardContent className="pt-6 space-y-4">
+                <div>
+                  <p className="font-medium mb-2">Documentation</p>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Check the documentation for detailed guides and tutorials.
+                  </p>
+                </div>
+                <div>
+                  <p className="font-medium mb-2">Report Issues</p>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Found a bug? Report it in the issue tracker.
+                  </p>
+                </div>
+                <div>
+                  <p className="font-medium mb-2">Feedback</p>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    We value your feedback! Share your thoughts and suggestions.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          </SettingsSection>
+        </main>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,187 @@
+'use client'
+
+import { useState } from 'react'
+import { SettingsNav, SettingsSection, SettingToggle, SettingSelect, SettingInput } from '@/components/settings'
+import { updateAISettings } from '@/app/actions/ai-settings'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+
+export default function AISettingsPage() {
+  const { t } = useLanguage()
+  const [apiKey, setApiKey] = useState('')
+
+  // Mock settings state - in real implementation, load from server
+  const [settings, setSettings] = useState({
+    titleSuggestions: true,
+    semanticSearch: true,
+    paragraphRefactor: true,
+    memoryEcho: true,
+    memoryEchoFrequency: 'daily' as 'daily' | 'weekly' | 'custom',
+    aiProvider: 'auto' as 'auto' | 'openai' | 'ollama',
+    preferredLanguage: 'auto' as 'auto' | 'en' | 'fr' | 'es' | 'de' | 'fa' | 'it' | 'pt' | 'ru' | 'zh' | 'ja' | 'ko' | 'ar' | 'hi' | 'nl' | 'pl',
+    demoMode: false
+  })
+
+  const handleToggle = async (feature: string, value: boolean) => {
+    setSettings(prev => ({ ...prev, [feature]: value }))
+    try {
+      await updateAISettings({ [feature]: value })
+    } catch (error) {
+      console.error('Error updating setting:', error)
+      toast.error('Failed to save setting')
+      setSettings(settings) // Revert on error
+    }
+  }
+
+  const handleFrequencyChange = async (value: 'daily' | 'weekly' | 'custom') => {
+    setSettings(prev => ({ ...prev, memoryEchoFrequency: value }))
+    try {
+      await updateAISettings({ memoryEchoFrequency: value })
+    } catch (error) {
+      console.error('Error updating frequency:', error)
+      toast.error('Failed to save setting')
+    }
+  }
+
+  const handleProviderChange = async (value: 'auto' | 'openai' | 'ollama') => {
+    setSettings(prev => ({ ...prev, aiProvider: value }))
+    try {
+      await updateAISettings({ aiProvider: value })
+    } catch (error) {
+      console.error('Error updating provider:', error)
+      toast.error('Failed to save setting')
+    }
+  }
+
+  const handleApiKeyChange = async (value: string) => {
+    setApiKey(value)
+    // TODO: Implement API key persistence
+    console.log('API Key:', value)
+  }
+
+  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">AI Settings</h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              Configure AI-powered features and preferences
+            </p>
+          </div>
+
+          {/* AI Provider */}
+          <SettingsSection
+            title="AI Provider"
+            icon={<span className="text-2xl">🤖</span>}
+            description="Choose your preferred AI service provider"
+          >
+            <SettingSelect
+              label="Provider"
+              description="Select which AI service to use"
+              value={settings.aiProvider}
+              options={[
+                {
+                  value: 'auto',
+                  label: 'Auto-detect',
+                  description: 'Ollama when available, OpenAI fallback'
+                },
+                {
+                  value: 'ollama',
+                  label: 'Ollama (Local)',
+                  description: '100% private, runs locally on your machine'
+                },
+                {
+                  value: 'openai',
+                  label: 'OpenAI',
+                  description: 'Most accurate, requires API key'
+                },
+              ]}
+              onChange={handleProviderChange}
+            />
+
+            {settings.aiProvider === 'openai' && (
+              <SettingInput
+                label="API Key"
+                description="Your OpenAI API key (stored securely)"
+                value={apiKey}
+                type="password"
+                placeholder="sk-..."
+                onChange={handleApiKeyChange}
+              />
+            )}
+          </SettingsSection>
+
+          {/* Feature Toggles */}
+          <SettingsSection
+            title="AI Features"
+            icon={<span className="text-2xl">✨</span>}
+            description="Enable or disable AI-powered features"
+          >
+            <SettingToggle
+              label="Title Suggestions"
+              description="Suggest titles for untitled notes after 50+ words"
+              checked={settings.titleSuggestions}
+              onChange={(checked) => handleToggle('titleSuggestions', checked)}
+            />
+
+            <SettingToggle
+              label="Semantic Search"
+              description="Search by meaning, not just keywords"
+              checked={settings.semanticSearch}
+              onChange={(checked) => handleToggle('semanticSearch', checked)}
+            />
+
+            <SettingToggle
+              label="Paragraph Reformulation"
+              description="AI-powered text improvement options"
+              checked={settings.paragraphRefactor}
+              onChange={(checked) => handleToggle('paragraphRefactor', checked)}
+            />
+
+            <SettingToggle
+              label="Memory Echo"
+              description="Daily proactive note connections and insights"
+              checked={settings.memoryEcho}
+              onChange={(checked) => handleToggle('memoryEcho', checked)}
+            />
+
+            {settings.memoryEcho && (
+              <SettingSelect
+                label="Memory Echo Frequency"
+                description="How often to analyze note connections"
+                value={settings.memoryEchoFrequency}
+                options={[
+                  { value: 'daily', label: 'Daily' },
+                  { value: 'weekly', label: 'Weekly' },
+                  { value: 'custom', label: 'Custom' },
+                ]}
+                onChange={handleFrequencyChange}
+              />
+            )}
+          </SettingsSection>
+
+          {/* Demo Mode */}
+          <SettingsSection
+            title="Demo Mode"
+            icon={<span className="text-2xl">🎭</span>}
+            description="Test AI features without using real AI calls"
+          >
+            <SettingToggle
+              label="Enable Demo Mode"
+              description="Use mock AI responses for testing and demonstrations"
+              checked={settings.demoMode}
+              onChange={(checked) => handleToggle('demoMode', checked)}
+            />
+          </SettingsSection>
+        </main>
+      </div>
+    </div>
+  )
+}

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>
+  )
+}

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

@@ -0,0 +1,200 @@
+'use client'
+
+import { useState } from 'react'
+import { SettingsNav, SettingsSection, SettingToggle, SettingInput } from '@/components/settings'
+import { Button } from '@/components/ui/button'
+import { Download, Upload, Trash2, Loader2, Check } from 'lucide-react'
+import { toast } from 'sonner'
+
+export default function DataSettingsPage() {
+  const [isExporting, setIsExporting] = useState(false)
+  const [isImporting, setIsImporting] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [exportUrl, setExportUrl] = useState('')
+
+  const handleExport = async () => {
+    setIsExporting(true)
+    try {
+      const response = await fetch('/api/notes/export')
+      if (response.ok) {
+        const blob = await response.blob()
+        const url = window.URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `keep-notes-export-${new Date().toISOString().split('T')[0]}.json`
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        toast.success('Notes exported successfully')
+      }
+    } catch (error) {
+      console.error('Export error:', error)
+      toast.error('Failed to export notes')
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  const handleImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    setIsImporting(true)
+    try {
+      const formData = new FormData()
+      formData.append('file', file)
+
+      const response = await fetch('/api/notes/import', {
+        method: 'POST',
+        body: formData
+      })
+
+      if (response.ok) {
+        const result = await response.json()
+        toast.success(`Imported ${result.count} notes`)
+        // Refresh the page to show imported notes
+        window.location.reload()
+      } else {
+        throw new Error('Import failed')
+      }
+    } catch (error) {
+      console.error('Import error:', error)
+      toast.error('Failed to import notes')
+    } finally {
+      setIsImporting(false)
+      // Reset input
+      event.target.value = ''
+    }
+  }
+
+  const handleDeleteAll = async () => {
+    if (!confirm('Are you sure you want to delete all notes? This action cannot be undone.')) {
+      return
+    }
+
+    setIsDeleting(true)
+    try {
+      const response = await fetch('/api/notes/delete-all', { method: 'POST' })
+      if (response.ok) {
+        toast.success('All notes deleted')
+        window.location.reload()
+      }
+    } catch (error) {
+      console.error('Delete error:', error)
+      toast.error('Failed to delete notes')
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  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">Data Management</h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              Export, import, or manage your data
+            </p>
+          </div>
+
+          <SettingsSection
+            title="Export Data"
+            icon={<span className="text-2xl">💾</span>}
+            description="Download your notes as a JSON file"
+          >
+            <div className="flex items-center justify-between py-4">
+              <div>
+                <p className="font-medium">Export All Notes</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Download all your notes in JSON format
+                </p>
+              </div>
+              <Button
+                onClick={handleExport}
+                disabled={isExporting}
+              >
+                {isExporting ? (
+                  <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                ) : (
+                  <Download className="h-4 w-4 mr-2" />
+                )}
+                {isExporting ? 'Exporting...' : 'Export'}
+              </Button>
+            </div>
+          </SettingsSection>
+
+          <SettingsSection
+            title="Import Data"
+            icon={<span className="text-2xl">📥</span>}
+            description="Import notes from a JSON file"
+          >
+            <div className="flex items-center justify-between py-4">
+              <div>
+                <p className="font-medium">Import Notes</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Upload a JSON file to import notes
+                </p>
+              </div>
+              <div>
+                <input
+                  type="file"
+                  accept=".json"
+                  onChange={handleImport}
+                  disabled={isImporting}
+                  className="hidden"
+                  id="import-file"
+                />
+                <Button
+                  onClick={() => document.getElementById('import-file')?.click()}
+                  disabled={isImporting}
+                >
+                  {isImporting ? (
+                    <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                  ) : (
+                    <Upload className="h-4 w-4 mr-2" />
+                  )}
+                  {isImporting ? 'Importing...' : 'Import'}
+                </Button>
+              </div>
+            </div>
+          </SettingsSection>
+
+          <SettingsSection
+            title="Danger Zone"
+            icon={<span className="text-2xl">⚠️</span>}
+            description="Permanently delete your data"
+          >
+            <div className="flex items-center justify-between py-4 border-t border-red-200 dark:border-red-900">
+              <div>
+                <p className="font-medium text-red-600 dark:text-red-400">Delete All Notes</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  This action cannot be undone
+                </p>
+              </div>
+              <Button
+                variant="destructive"
+                onClick={handleDeleteAll}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                ) : (
+                  <Trash2 className="h-4 w-4 mr-2" />
+                )}
+                {isDeleting ? 'Deleting...' : 'Delete All'}
+              </Button>
+            </div>
+          </SettingsSection>
+        </main>
+      </div>
+    </div>
+  )
+}

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>
+  )
+}

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

@@ -1,184 +1,223 @@
-'use client';
+'use client'
 
-import React, { useState, useEffect } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Loader2, CheckCircle, XCircle, RefreshCw, Trash2, Database, BrainCircuit } from 'lucide-react';
-import { cleanupAllOrphans, syncAllEmbeddings } from '@/app/actions/notes';
-import { toast } from 'sonner';
+import React, { useState } from 'react'
+import { SettingsNav, SettingsSection } from '@/components/settings'
+import { Button } from '@/components/ui/button'
+import { Loader2, CheckCircle, XCircle, RefreshCw, Database, BrainCircuit } from 'lucide-react'
+import { cleanupAllOrphans, syncAllEmbeddings } from '@/app/actions/notes'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+import Link from 'next/link'
 
 export default function SettingsPage() {
-  const [loading, setLoading] = useState(false);
-  const [cleanupLoading, setCleanupLoading] = useState(false);
-  const [syncLoading, setSyncLoading] = useState(false);
-
-  const handleSync = async () => {
-    setSyncLoading(true);
-    try {
-      const result = await syncAllEmbeddings();
-      if (result.success) {
-        toast.success(`Indexing complete: ${result.count} notes processed`);
-      }
-    } catch (error) {
-      console.error(error);
-      toast.error("Error during indexing");
-    } finally {
-      setSyncLoading(false);
-    }
-  };
-
-  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
-  const [result, setResult] = useState<any>(null);
-  const [config, setConfig] = useState<any>(null);
+  const { t } = useLanguage()
+  const [loading, setLoading] = useState(false)
+  const [cleanupLoading, setCleanupLoading] = useState(false)
+  const [syncLoading, setSyncLoading] = useState(false)
+  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle')
+  const [result, setResult] = useState<any>(null)
+  const [config, setConfig] = useState<any>(null)
 
   const checkConnection = async () => {
-    setLoading(true);
-    setStatus('idle');
-    setResult(null);
+    setLoading(true)
+    setStatus('idle')
+    setResult(null)
     try {
-      const res = await fetch('/api/ai/test');
-      const data = await res.json();
+      const res = await fetch('/api/ai/test')
+      const data = await res.json()
 
       setConfig({
         provider: data.provider,
         status: res.ok ? 'connected' : 'disconnected'
-      });
+      })
 
       if (res.ok) {
-        setStatus('success');
-        setResult(data);
+        setStatus('success')
+        setResult(data)
       } else {
-        setStatus('error');
-        setResult(data);
+        setStatus('error')
+        setResult(data)
       }
     } catch (error: any) {
-      console.error(error);
-      setStatus('error');
-      setResult({ message: error.message, stack: error.stack });
+      console.error(error)
+      setStatus('error')
+      setResult({ message: error.message, stack: error.stack })
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
-  const handleCleanup = async () => {
-    setCleanupLoading(true);
+  const handleSync = async () => {
+    setSyncLoading(true)
     try {
-      const result = await cleanupAllOrphans();
+      const result = await syncAllEmbeddings()
       if (result.success) {
-        toast.success(result.message || `Cleanup complete: ${result.created} created, ${result.deleted} removed`);
+        toast.success(`Indexing complete: ${result.count} notes processed`)
       }
     } catch (error) {
-      console.error(error);
-      toast.error("Error during cleanup");
+      console.error(error)
+      toast.error("Error during indexing")
     } finally {
-      setCleanupLoading(false);
+      setSyncLoading(false)
     }
-  };
+  }
 
-  useEffect(() => {
-    checkConnection();
-  }, []);
+  const handleCleanup = async () => {
+    setCleanupLoading(true)
+    try {
+      const result = await cleanupAllOrphans()
+      if (result.success) {
+        toast.success(result.message || `Cleanup complete: ${result.created} created, ${result.deleted} removed`)
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("Error during cleanup")
+    } finally {
+      setCleanupLoading(false)
+    }
+  }
 
   return (
-    <div className="container mx-auto py-10 px-4 max-w-4xl space-y-8">
-      <h1 className="text-3xl font-bold mb-8">Settings</h1>
+    <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>
 
-      <Card>
-        <CardHeader>
-          <div className="flex justify-between items-center">
-            <div>
-              <CardTitle className="flex items-center gap-2">
-                AI Diagnostics
-                {status === 'success' && <CheckCircle className="text-green-500 w-5 h-5" />}
-                {status === 'error' && <XCircle className="text-red-500 w-5 h-5" />}
-              </CardTitle>
-              <CardDescription>Check your AI provider connection status.</CardDescription>
-            </div>
-            <Button variant="outline" size="sm" onClick={checkConnection} disabled={loading}>
-              {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <RefreshCw className="w-4 h-4 mr-2" />}
-              Test Connection
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-6">
-
-          {/* Current Configuration */}
-          <div className="grid grid-cols-2 gap-4">
-            <div className="p-4 rounded-lg bg-secondary/50">
-              <p className="text-sm font-medium text-muted-foreground mb-1">Configured Provider</p>
-              <p className="text-lg font-mono">{config?.provider || '...'}</p>
-            </div>
-            <div className="p-4 rounded-lg bg-secondary/50">
-              <p className="text-sm font-medium text-muted-foreground mb-1">API Status</p>
-              <Badge variant={status === 'success' ? 'default' : 'destructive'}>
-                {status === 'success' ? 'Operational' : 'Error'}
-              </Badge>
-            </div>
+        {/* Main Content */}
+        <main className="lg:col-span-3 space-y-6">
+          <div>
+            <h1 className="text-3xl font-bold mb-2">Settings</h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              Configure your application settings
+            </p>
           </div>
 
-          {/* Test Result */}
-          {result && (
-            <div className="space-y-2">
-              <h3 className="text-sm font-medium">Test Details:</h3>
-              <div className={`p-4 rounded-md font-mono text-xs overflow-x-auto ${status === 'error' ? 'bg-red-50 text-red-900 border border-red-200' : 'bg-slate-950 text-slate-50'}`}>
-                <pre>{JSON.stringify(result, null, 2)}</pre>
+          {/* Quick Links */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Link href="/settings/ai">
+              <div className="p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer">
+                <BrainCircuit className="h-6 w-6 text-purple-500 mb-2" />
+                <h3 className="font-semibold">AI Settings</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Configure AI features and provider
+                </p>
               </div>
+            </Link>
+            <Link href="/settings/profile">
+              <div className="p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer">
+                <RefreshCw className="h-6 w-6 text-blue-500 mb-2" />
+                <h3 className="font-semibold">Profile Settings</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Manage your account and preferences
+                </p>
+              </div>
+            </Link>
+          </div>
 
-              {status === 'error' && (
-                <div className="text-sm text-red-600 mt-2">
-                  <p className="font-bold">Troubleshooting Tips:</p>
-                  <ul className="list-disc list-inside mt-1">
-                    <li>Check that Ollama is running (<code>ollama list</code>)</li>
-                    <li>Check the URL (http://localhost:11434)</li>
-                    <li>Verify the model (e.g., granite4:latest) is downloaded</li>
-                    <li>Check the Next.js server terminal for more logs</li>
-                  </ul>
+          {/* AI Diagnostics */}
+          <SettingsSection
+            title="AI Diagnostics"
+            icon={<span className="text-2xl">🔍</span>}
+            description="Check your AI provider connection status"
+          >
+            <div className="grid grid-cols-2 gap-4 py-4">
+              <div className="p-4 rounded-lg bg-secondary/50">
+                <p className="text-sm font-medium text-muted-foreground mb-1">Configured Provider</p>
+                <p className="text-lg font-mono">{config?.provider || '...'}</p>
+              </div>
+              <div className="p-4 rounded-lg bg-secondary/50">
+                <p className="text-sm font-medium text-muted-foreground mb-1">API Status</p>
+                <div className="flex items-center gap-2">
+                  {status === 'success' && <CheckCircle className="text-green-500 w-5 h-5" />}
+                  {status === 'error' && <XCircle className="text-red-500 w-5 h-5" />}
+                  <span className={`text-sm font-medium ${
+                    status === 'success' ? 'text-green-600 dark:text-green-400' :
+                    status === 'error' ? 'text-red-600 dark:text-red-400' :
+                    'text-gray-600'
+                  }`}>
+                    {status === 'success' ? 'Operational' :
+                     status === 'error' ? 'Error' :
+                     'Checking...'}
+                  </span>
                 </div>
-              )}
-            </div>
-          )}
-
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Database className="w-5 h-5" />
-            Maintenance
-          </CardTitle>
-          <CardDescription>Tools to maintain your database health.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col gap-4">
-            <div className="flex items-center justify-between p-4 border rounded-lg">
-              <div>
-                <h3 className="font-medium">Clean Orphan Tags</h3>
-                <p className="text-sm text-muted-foreground">Remove tags that are no longer used by any notes.</p>
               </div>
-              <Button variant="secondary" onClick={handleCleanup} disabled={cleanupLoading}>
-                {cleanupLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Trash2 className="w-4 h-4 mr-2" />}
-                Clean
+            </div>
+
+            {result && (
+              <div className="space-y-2 mt-4">
+                <h3 className="text-sm font-medium">Test Details:</h3>
+                <div className={`p-4 rounded-md font-mono text-xs overflow-x-auto ${
+                  status === 'error'
+                    ? 'bg-red-50 text-red-900 border border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-900'
+                    : 'bg-slate-950 text-slate-50'
+                }`}>
+                  <pre>{JSON.stringify(result, null, 2)}</pre>
+                </div>
+
+                {status === 'error' && (
+                  <div className="text-sm text-red-600 dark:text-red-400 mt-2">
+                    <p className="font-bold">Troubleshooting Tips:</p>
+                    <ul className="list-disc list-inside mt-1 space-y-1">
+                      <li>Check that Ollama is running (<code className="bg-red-100 dark:bg-red-900 px-1 rounded">ollama list</code>)</li>
+                      <li>Check URL (http://localhost:11434)</li>
+                      <li>Verify model (e.g., granite4:latest) is downloaded</li>
+                      <li>Check Next.js server terminal for more logs</li>
+                    </ul>
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div className="mt-4 flex justify-end">
+              <Button variant="outline" size="sm" onClick={checkConnection} disabled={loading}>
+                {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <RefreshCw className="w-4 h-4 mr-2" />}
+                Test Connection
               </Button>
             </div>
+          </SettingsSection>
 
-            <div className="flex items-center justify-between p-4 border rounded-lg">
-              <div>
-                <h3 className="font-medium flex items-center gap-2">
-                  Semantic Indexing
-                  <Badge variant="outline" className="text-[10px]">AI</Badge>
-                </h3>
-                <p className="text-sm text-muted-foreground">Generate vectors for all notes to enable intent-based search.</p>
+          {/* Maintenance */}
+          <SettingsSection
+            title="Maintenance"
+            icon={<span className="text-2xl">🔧</span>}
+            description="Tools to maintain your database health"
+          >
+            <div className="space-y-4 py-4">
+              <div className="flex items-center justify-between p-4 border rounded-lg">
+                <div>
+                  <h3 className="font-medium flex items-center gap-2">
+                    Clean Orphan Tags
+                  </h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Remove tags that are no longer used by any notes
+                  </p>
+                </div>
+                <Button variant="secondary" onClick={handleCleanup} disabled={cleanupLoading}>
+                  {cleanupLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Database className="w-4 h-4 mr-2" />}
+                  Clean
+                </Button>
+              </div>
+
+              <div className="flex items-center justify-between p-4 border rounded-lg">
+                <div>
+                  <h3 className="font-medium flex items-center gap-2">
+                    Semantic Indexing
+                  </h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Generate vectors for all notes to enable intent-based search
+                  </p>
+                </div>
+                <Button variant="secondary" onClick={handleSync} disabled={syncLoading}>
+                  {syncLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <BrainCircuit className="w-4 h-4 mr-2" />}
+                  Index All
+                </Button>
               </div>
-              <Button variant="secondary" onClick={handleSync} disabled={syncLoading}>
-                {syncLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <BrainCircuit className="w-4 h-4 mr-2" />}
-                Index All
-              </Button>
             </div>
-          </div>
-        </CardContent>
-      </Card>
+          </SettingsSection>
+        </main>
+      </div>
     </div>
-  );
+  )
 }

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

@@ -0,0 +1,155 @@
+'use client'
+
+import { useState } from 'react'
+import { SettingsNav, SettingsSection, SettingToggle, SettingInput, SettingSelect } from '@/components/settings'
+import { updateAISettings } from '@/app/actions/ai-settings'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+
+export default function ProfileSettingsPage() {
+  const { t } = useLanguage()
+
+  // Mock user data - in real implementation, load from server
+  const [user, setUser] = useState({
+    name: 'John Doe',
+    email: 'john@example.com'
+  })
+
+  const [language, setLanguage] = useState('auto')
+  const [showRecentNotes, setShowRecentNotes] = useState(false)
+
+  const handleNameChange = async (value: string) => {
+    setUser(prev => ({ ...prev, name: value }))
+    // TODO: Implement profile update
+    console.log('Name:', value)
+  }
+
+  const handleEmailChange = async (value: string) => {
+    setUser(prev => ({ ...prev, email: value }))
+    // TODO: Implement email update
+    console.log('Email:', value)
+  }
+
+  const handleLanguageChange = async (value: string) => {
+    setLanguage(value)
+    try {
+      await updateAISettings({ preferredLanguage: value as any })
+    } catch (error) {
+      console.error('Error updating language:', error)
+      toast.error('Failed to save language')
+    }
+  }
+
+  const handleRecentNotesChange = async (enabled: boolean) => {
+    setShowRecentNotes(enabled)
+    try {
+      await updateAISettings({ showRecentNotes: enabled })
+    } catch (error) {
+      console.error('Error updating recent notes setting:', error)
+      toast.error('Failed to save setting')
+    }
+  }
+
+  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">Profile</h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              Manage your account and personal information
+            </p>
+          </div>
+
+          {/* Profile Information */}
+          <SettingsSection
+            title="Profile Information"
+            icon={<span className="text-2xl">👤</span>}
+            description="Update your personal details"
+          >
+            <SettingInput
+              label="Name"
+              description="Your display name"
+              value={user.name}
+              onChange={handleNameChange}
+              placeholder="Enter your name"
+            />
+
+            <SettingInput
+              label="Email"
+              description="Your email address"
+              value={user.email}
+              type="email"
+              onChange={handleEmailChange}
+              placeholder="Enter your email"
+            />
+          </SettingsSection>
+
+          {/* Preferences */}
+          <SettingsSection
+            title="Preferences"
+            icon={<span className="text-2xl">⚙️</span>}
+            description="Customize your experience"
+          >
+            <SettingSelect
+              label="Language"
+              description="Choose your preferred 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}
+            />
+
+            <SettingToggle
+              label="Show Recent Notes"
+              description="Display recently viewed notes in sidebar"
+              checked={showRecentNotes}
+              onChange={handleRecentNotesChange}
+            />
+          </SettingsSection>
+
+          {/* AI Settings Link */}
+          <div className="p-6 border rounded-lg bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-950 dark:to-pink-950">
+            <div className="flex items-center gap-4">
+              <div className="text-4xl">✨</div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-lg mb-1">AI Settings</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Configure AI-powered features, provider selection, and preferences
+                </p>
+              </div>
+              <button
+                onClick={() => window.location.href = '/settings/ai'}
+                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+              >
+                Configure
+              </button>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}

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

@@ -23,11 +23,26 @@ export default async function ProfilePage() {
     redirect('/login')
   }
 
-  // Get user AI settings for language preference
-  const userAISettings = await prisma.userAISettings.findUnique({
-    where: { userId: session.user.id },
-    select: { preferredLanguage: true }
-  })
+  // Get user AI settings for language preference and recent notes setting
+  let userAISettings = { preferredLanguage: 'auto', showRecentNotes: false }
+  try {
+    const result = await prisma.$queryRaw<Array<{ preferredLanguage: string | null; showRecentNotes: number | null }>>`
+      SELECT preferredLanguage, showRecentNotes FROM UserAISettings WHERE userId = ${session.user.id}
+    `
+    if (result && result[0]) {
+      // Handle NULL values - if showRecentNotes is NULL, default to false
+      const showRecentNotesValue = result[0].showRecentNotes !== null && result[0].showRecentNotes !== undefined
+        ? result[0].showRecentNotes === 1
+        : false
+      
+      userAISettings = {
+        preferredLanguage: result[0].preferredLanguage || 'auto',
+        showRecentNotes: showRecentNotesValue
+      }
+    }
+  } catch (error) {
+    // Record doesn't exist, use defaults
+  }
 
   return (
     <div className="container max-w-2xl mx-auto py-10 px-4">

keep-notes/app/(main)/settings/profile/profile-form.tsx

@@ -1,10 +1,12 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
 import {
   Select,
   SelectContent,
@@ -12,7 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { updateProfile, changePassword, updateLanguage, updateFontSize } from '@/app/actions/profile'
+import { updateProfile, changePassword, updateLanguage, updateFontSize, updateShowRecentNotes } from '@/app/actions/profile'
 import { toast } from 'sonner'
 import { useLanguage } from '@/lib/i18n'
 
@@ -36,10 +38,13 @@ const LANGUAGES = [
 ]
 
 export function ProfileForm({ user, userAISettings }: { user: any; userAISettings?: any }) {
+  const router = useRouter()
   const [selectedLanguage, setSelectedLanguage] = useState(userAISettings?.preferredLanguage || 'auto')
   const [isUpdatingLanguage, setIsUpdatingLanguage] = useState(false)
   const [fontSize, setFontSize] = useState(userAISettings?.fontSize || 'medium')
   const [isUpdatingFontSize, setIsUpdatingFontSize] = useState(false)
+  const [showRecentNotes, setShowRecentNotes] = useState(userAISettings?.showRecentNotes ?? false)
+  const [isUpdatingRecentNotes, setIsUpdatingRecentNotes] = useState(false)
   const { t } = useLanguage()
 
   const FONT_SIZES = [
@@ -117,6 +122,28 @@ export function ProfileForm({ user, userAISettings }: { user: any; userAISetting
     }
   }
 
+  const handleShowRecentNotesChange = async (enabled: boolean) => {
+    setIsUpdatingRecentNotes(true)
+    const previousValue = showRecentNotes
+    
+    try {
+      const result = await updateShowRecentNotes(enabled)
+      if (result?.error) {
+        toast.error(result.error)
+      } else {
+        setShowRecentNotes(enabled)
+        toast.success(t('profile.recentNotesUpdateSuccess') || 'Paramètre mis à jour')
+        // Force full page reload to ensure settings are reloaded
+        window.location.href = '/settings/profile'
+      }
+    } catch (error: any) {
+      setShowRecentNotes(previousValue)
+      toast.error(error?.message || 'Erreur')
+    } finally {
+      setIsUpdatingRecentNotes(false)
+    }
+  }
+
   return (
     <div className="space-y-6">
       <Card>
@@ -213,6 +240,23 @@ export function ProfileForm({ user, userAISettings }: { user: any; userAISetting
               {t('profile.fontSizeDescription')}
             </p>
           </div>
+          
+          <div className="flex items-center justify-between pt-4 border-t">
+            <div className="space-y-0.5">
+              <Label htmlFor="showRecentNotes" className="text-base font-medium">
+                {t('profile.showRecentNotes') || 'Afficher la section Récent'}
+              </Label>
+              <p className="text-sm text-muted-foreground">
+                {t('profile.showRecentNotesDescription') || 'Afficher les notes récentes (7 derniers jours) sur la page principale'}
+              </p>
+            </div>
+            <Switch
+              id="showRecentNotes"
+              checked={showRecentNotes}
+              onCheckedChange={handleShowRecentNotesChange}
+              disabled={isUpdatingRecentNotes}
+            />
+          </div>
         </CardContent>
       </Card>