Refactor Admin and Settings UI to Ethereal Precision aesthetic and improve note import/export functionality

memento-note/app/(main)/settings/about/page.tsx

@@ -1,9 +1,8 @@
 'use client'
 
-import { SettingsSection } from '@/components/settings'
-import { Card, CardContent } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { useLanguage } from '@/lib/i18n'
+import { FileText, Sparkles, MessageCircle } from 'lucide-react'
 
 export default function AboutSettingsPage() {
   const { t } = useLanguage()
@@ -11,126 +10,95 @@ export default function AboutSettingsPage() {
   const buildDate = '2026-01-17'
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <div>
-        <h1 className="text-3xl font-bold mb-2">{t('about.title')}</h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          {t('about.description')}
-        </p>
+        <h1 className="text-2xl font-bold tracking-tight text-foreground">{t('about.title')}</h1>
+        <p className="text-muted-foreground mt-1">{t('about.description')}</p>
       </div>
 
-      <SettingsSection
-        title={t('about.appName')}
-        icon={<span className="text-2xl">📝</span>}
-        description={t('about.appDescription')}
-      >
-        <Card>
-          <CardContent className="pt-6 space-y-4">
-            <div className="flex justify-between items-center">
-              <span className="font-medium">{t('about.version')}</span>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* App info */}
+        <div className="bg-card rounded-lg border border-border p-6 shadow-sm flex flex-col gap-4">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
+              <FileText className="h-5 w-5" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-foreground">{t('about.appName')}</h3>
+              <p className="text-sm text-muted-foreground">{t('about.appDescription')}</p>
+            </div>
+          </div>
+          <div className="space-y-3 pt-2 border-t border-border">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-muted-foreground">{t('about.version')}</span>
               <Badge variant="secondary">{version}</Badge>
             </div>
-            <div className="flex justify-between items-center">
-              <span className="font-medium">{t('about.buildDate')}</span>
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-muted-foreground">{t('about.buildDate')}</span>
               <Badge variant="outline">{buildDate}</Badge>
             </div>
-            <div className="flex justify-between items-center">
-              <span className="font-medium">{t('about.platform')}</span>
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-muted-foreground">{t('about.platform')}</span>
               <Badge variant="outline">{t('about.platformWeb')}</Badge>
             </div>
-          </CardContent>
-        </Card>
-      </SettingsSection>
+          </div>
+        </div>
 
-      <SettingsSection
-        title={t('about.features.title')}
-        icon={<span className="text-2xl">✨</span>}
-        description={t('about.features.description')}
-      >
-        <Card>
-          <CardContent className="pt-6 space-y-2">
-            <div className="flex items-center gap-2">
-              <span className="text-green-500">✓</span>
-              <span>{t('about.features.titleSuggestions')}</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-green-500">✓</span>
-              <span>{t('about.features.semanticSearch')}</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-green-500">✓</span>
-              <span>{t('about.features.paragraphReformulation')}</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-green-500">✓</span>
-              <span>{t('about.features.memoryEcho')}</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-green-500">✓</span>
-              <span>{t('about.features.notebookOrganization')}</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-green-500">✓</span>
-              <span>{t('about.features.dragDrop')}</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-green-500">✓</span>
-              <span>{t('about.features.labelSystem')}</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-green-500">✓</span>
-              <span>{t('about.features.multipleProviders')}</span>
-            </div>
-          </CardContent>
-        </Card>
-      </SettingsSection>
-
-      <SettingsSection
-        title={t('about.technology.title')}
-        icon={<span className="text-2xl">⚙️</span>}
-        description={t('about.technology.description')}
-      >
-        <Card>
-          <CardContent className="pt-6 space-y-2 text-sm">
-            <div><strong>{t('about.technology.frontend')}:</strong> Next.js 16, React 19, TypeScript</div>
-            <div><strong>{t('about.technology.backend')}:</strong> Next.js API Routes, Server Actions</div>
-            <div><strong>{t('about.technology.database')}:</strong> SQLite (Prisma ORM)</div>
-            <div><strong>{t('about.technology.authentication')}:</strong> NextAuth 5</div>
-            <div><strong>{t('about.technology.ai')}:</strong> Vercel AI SDK, OpenAI, Ollama</div>
-            <div><strong>{t('about.technology.ui')}:</strong> Radix UI, Tailwind CSS, Lucide Icons</div>
-            <div><strong>{t('about.technology.testing')}:</strong> Playwright (E2E)</div>
-          </CardContent>
-        </Card>
-      </SettingsSection>
-
-      <SettingsSection
-        title={t('about.support.title')}
-        icon={<span className="text-2xl">💬</span>}
-        description={t('about.support.description')}
-      >
-        <Card>
-          <CardContent className="pt-6 space-y-4">
-            <div>
-              <p className="font-medium mb-2">{t('about.support.documentation')}</p>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                Check the documentation for detailed guides and tutorials.
-              </p>
+        {/* Features */}
+        <div className="bg-card rounded-lg border border-border p-6 shadow-sm flex flex-col gap-4">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
+              <Sparkles className="h-5 w-5" />
             </div>
             <div>
-              <p className="font-medium mb-2">{t('about.support.reportIssues')}</p>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                Found a bug? Report it in the issue tracker.
-              </p>
+              <h3 className="font-semibold text-foreground">{t('about.features.title')}</h3>
+              <p className="text-sm text-muted-foreground">{t('about.features.description')}</p>
+            </div>
+          </div>
+          <ul className="space-y-2 pt-2 border-t border-border">
+            {[
+              t('about.features.titleSuggestions'),
+              t('about.features.semanticSearch'),
+              t('about.features.paragraphReformulation'),
+              t('about.features.memoryEcho'),
+              t('about.features.notebookOrganization'),
+              t('about.features.dragDrop'),
+              t('about.features.labelSystem'),
+              t('about.features.multipleProviders'),
+            ].map((feature) => (
+              <li key={feature} className="flex items-center gap-2 text-sm text-foreground">
+                <span className="text-primary font-bold">✓</span>
+                {feature}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Support — full width */}
+        <div className="md:col-span-2 bg-card rounded-lg border border-border p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
+              <MessageCircle className="h-5 w-5" />
             </div>
             <div>
-              <p className="font-medium mb-2">{t('about.support.feedback')}</p>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                We value your feedback! Share your thoughts and suggestions.
-              </p>
+              <h3 className="font-semibold text-foreground">{t('about.support.title')}</h3>
+              <p className="text-sm text-muted-foreground">{t('about.support.description')}</p>
             </div>
-          </CardContent>
-        </Card>
-      </SettingsSection>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4 border-t border-border">
+            {[
+              { title: t('about.support.documentation'), desc: 'Guides détaillés et tutoriels.' },
+              { title: t('about.support.reportIssues'), desc: 'Signalez un bug dans le gestionnaire.' },
+              { title: t('about.support.feedback'), desc: 'Vos retours nous aident à améliorer l\'app.' },
+            ].map((item) => (
+              <div key={item.title} className="p-3 rounded-md bg-muted">
+                <p className="font-medium text-sm text-foreground">{item.title}</p>
+                <p className="text-xs text-muted-foreground mt-1">{item.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
     </div>
   )
 }