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

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