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