feat: rename keep-notes to memento-note, migrate to PostgreSQL, fix MCP bugs

- Rename directory keep-notes -> memento-note with all code references
- Prisma: SQLite -> PostgreSQL (both app and MCP server schemas)
- Sync MCP schema with main app (add missing fields, relations, indexes)
- Delete 17 SQLite migrations (clean slate for PostgreSQL)
- Remove SQLite dependencies (@libsql/client, better-sqlite3, etc.)
- Fix MCP server: hardcoded Windows DB paths -> DATABASE_URL env var
- Fix MCP server: .dockerignore excluded index-sse.js (SSE mode broken)
- MCP Dockerfile: node:20 -> node:22
- Docker Compose: add postgres service, remove SQLite volume
- Generate favicon.ico, icon-192.png, icon-512.png, apple-icon.png
- Update layout.tsx icons and manifest.json for PNG icons
- Update all .env files for PostgreSQL
- Rewrite README.md with updated sections
- Remove mcp-server/node_modules and prisma/client-generated from git tracking

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

memento-note/app/(main)/admin/ai-test/ai-tester.tsx

@@ -0,0 +1,259 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { useState, useEffect } from 'react'
+import { toast } from 'sonner'
+import { Loader2, CheckCircle2, XCircle, Clock, Zap, Info } from 'lucide-react'
+import { useLanguage } from '@/lib/i18n'
+
+interface TestResult {
+  success: boolean
+  provider?: string
+  model?: string
+  responseTime?: number
+  tags?: Array<{ tag: string; confidence: number }>
+  embeddingLength?: number
+  firstValues?: number[]
+  error?: string
+  details?: any
+}
+
+export function AI_TESTER({ type }: { type: 'tags' | 'embeddings' }) {
+  const { t } = useLanguage()
+  const [isLoading, setIsLoading] = useState(false)
+  const [result, setResult] = useState<TestResult | null>(null)
+  const [config, setConfig] = useState<any>(null)
+
+  useEffect(() => {
+    fetchConfig()
+  }, [])
+
+  const fetchConfig = async () => {
+    try {
+      const response = await fetch('/api/ai/config')
+      const data = await response.json()
+      setConfig(data)
+
+      if (data.previousTest) {
+        setResult(data.previousTest[type] || null)
+      }
+    } catch (error) {
+      console.error('Failed to fetch config:', error)
+    }
+  }
+
+  const runTest = async () => {
+    setIsLoading(true)
+    const startTime = Date.now()
+
+    try {
+      const response = await fetch(`/api/ai/test-${type}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' }
+      })
+
+      const endTime = Date.now()
+      const data = await response.json()
+
+      setResult({
+        ...data,
+        responseTime: endTime - startTime
+      })
+
+      if (data.success) {
+        toast.success(
+          `✅ ${type === 'tags' ? 'Tags' : 'Embeddings'} Test Successful!`,
+          {
+            description: `Provider: ${data.provider} | Time: ${endTime - startTime}ms`
+          }
+        )
+      } else {
+        toast.error(
+          `❌ ${type === 'tags' ? 'Tags' : 'Embeddings'} Test Failed`,
+          {
+            description: data.error || 'Unknown error'
+          }
+        )
+      }
+    } catch (error: any) {
+      const endTime = Date.now()
+      const errorResult = {
+        success: false,
+        error: error.message || 'Network error',
+        responseTime: endTime - startTime
+      }
+      setResult(errorResult)
+      toast.error(t('admin.aiTest.testError', { error: error.message }))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const getProviderInfo = () => {
+    if (!config) return { provider: 'Loading...', model: 'Loading...' }
+
+    if (type === 'tags') {
+      return {
+        provider: config.AI_PROVIDER_TAGS || 'ollama',
+        model: config.AI_MODEL_TAGS || 'granite4:latest'
+      }
+    } else {
+      return {
+        provider: config.AI_PROVIDER_EMBEDDING || 'ollama',
+        model: config.AI_MODEL_EMBEDDING || 'embeddinggemma:latest'
+      }
+    }
+  }
+
+  const providerInfo = getProviderInfo()
+
+  return (
+    <div className="space-y-4">
+      {/* Provider Info */}
+      <div className="space-y-3 p-4 bg-muted/50 rounded-lg">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">{t('admin.aiTest.provider')}</span>
+          <Badge variant="outline" className="text-xs">
+            {providerInfo.provider.toUpperCase()}
+          </Badge>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">{t('admin.aiTest.model')}</span>
+          <span className="text-sm text-muted-foreground font-mono">
+            {providerInfo.model}
+          </span>
+        </div>
+      </div>
+
+      {/* Test Button */}
+      <Button
+        onClick={runTest}
+        disabled={isLoading}
+        className="w-full"
+        variant={result?.success ? 'default' : result?.success === false ? 'destructive' : 'default'}
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            {t('admin.aiTest.testing')}
+          </>
+        ) : (
+          <>
+            <Zap className="mr-2 h-4 w-4" />
+            {t('admin.aiTest.runTest')}
+          </>
+        )}
+      </Button>
+
+      {/* Results */}
+      {result && (
+        <Card className={result.success ? 'border-green-200 dark:border-green-900' : 'border-red-200 dark:border-red-900'}>
+          <CardContent className="pt-6">
+            {/* Status */}
+            <div className="flex items-center gap-2 mb-4">
+              {result.success ? (
+                <>
+                  <CheckCircle2 className="h-5 w-5 text-green-600" />
+                  <span className="font-semibold text-green-600 dark:text-green-400">{t('admin.aiTest.testPassed')}</span>
+                </>
+              ) : (
+                <>
+                  <XCircle className="h-5 w-5 text-red-600" />
+                  <span className="font-semibold text-red-600 dark:text-red-400">{t('admin.aiTest.testFailed')}</span>
+                </>
+              )}
+            </div>
+
+            {/* Response Time */}
+            {result.responseTime && (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
+                <Clock className="h-4 w-4" />
+                <span>{t('admin.aiTest.responseTime', { time: result.responseTime })}</span>
+              </div>
+            )}
+
+            {/* Tags Results */}
+            {type === 'tags' && result.success && result.tags && (
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <Info className="h-4 w-4 text-primary" />
+                  <span className="text-sm font-medium">{t('admin.aiTest.generatedTags')}</span>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {result.tags.map((tag, idx) => (
+                    <Badge
+                      key={idx}
+                      variant="secondary"
+                      className="text-sm"
+                    >
+                      {tag.tag}
+                      <span className="ml-1 text-xs opacity-70">
+                        ({Math.round(tag.confidence * 100)}%)
+                      </span>
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Embeddings Results */}
+            {type === 'embeddings' && result.success && result.embeddingLength && (
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <Info className="h-4 w-4 text-green-600" />
+                  <span className="text-sm font-medium">{t('admin.aiTest.embeddingDimensions')}</span>
+                </div>
+                <div className="p-3 bg-muted rounded-lg">
+                  <div className="text-2xl font-bold text-center">
+                    {result.embeddingLength}
+                  </div>
+                  <div className="text-xs text-center text-muted-foreground mt-1">
+                    {t('admin.aiTest.vectorDimensions')}
+                  </div>
+                </div>
+                {result.firstValues && result.firstValues.length > 0 && (
+                  <div className="space-y-1">
+                    <span className="text-xs font-medium">{t('admin.aiTest.first5Values')}</span>
+                    <div className="p-2 bg-muted rounded font-mono text-xs">
+                      [{result.firstValues.slice(0, 5).map((v, i) => v.toFixed(4)).join(', ')}]
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Error Details */}
+            {!result.success && result.error && (
+              <div className="mt-4 p-3 bg-red-50 dark:bg-red-950/20 rounded-lg border border-red-200 dark:border-red-900">
+                <p className="text-sm font-medium text-red-900 dark:text-red-100">{t('admin.aiTest.error')}</p>
+                <p className="text-sm text-red-700 dark:text-red-300 mt-1">{result.error}</p>
+                {result.details && (
+                  <details className="mt-2">
+                    <summary className="text-xs cursor-pointer text-red-600 dark:text-red-400">
+                      Technical details
+                    </summary>
+                    <pre className="mt-2 text-xs overflow-auto p-2 bg-red-100 dark:bg-red-900/30 rounded">
+                      {JSON.stringify(result.details, null, 2)}
+                    </pre>
+                  </details>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Loading State */}
+      {isLoading && (
+        <div className="text-center py-4">
+          <Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
+          <p className="text-sm text-muted-foreground mt-2">
+            {t('admin.aiTest.testing')} {type === 'tags' ? 'tags generation' : 'embeddings'}...
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

memento-note/app/(main)/admin/ai-test/page.tsx

@@ -0,0 +1,106 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { auth } from '@/auth'
+import { redirect } from 'next/navigation'
+import Link from 'next/link'
+import { ArrowLeft, TestTube } from 'lucide-react'
+import { AI_TESTER } from './ai-tester'
+
+export default async function AITestPage() {
+  const session = await auth()
+
+  if ((session?.user as any)?.role !== 'ADMIN') {
+    redirect('/')
+  }
+
+  return (
+    <div className="container mx-auto py-10 px-4 max-w-6xl">
+      <div className="flex justify-between items-center mb-8">
+        <div className="flex items-center gap-3">
+          <Link href="/admin/settings">
+            <Button variant="outline" size="icon">
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-3xl font-bold flex items-center gap-2">
+              <TestTube className="h-8 w-8" />
+              AI Provider Testing
+            </h1>
+            <p className="text-muted-foreground mt-1">
+              Test your AI providers for tag generation and semantic search embeddings
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Tags Provider Test */}
+        <Card className="border-primary/20 dark:border-primary/30">
+          <CardHeader className="bg-primary/5 dark:bg-primary/10">
+            <CardTitle className="flex items-center gap-2">
+              <span className="text-2xl">🏷️</span>
+              Tags Generation Test
+            </CardTitle>
+            <CardDescription>
+              Test the AI provider responsible for automatic tag suggestions
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <AI_TESTER type="tags" />
+          </CardContent>
+        </Card>
+
+        {/* Embeddings Provider Test */}
+        <Card className="border-green-200 dark:border-green-900">
+          <CardHeader className="bg-green-50/50 dark:bg-green-950/20">
+            <CardTitle className="flex items-center gap-2">
+              <span className="text-2xl">🔍</span>
+              Embeddings Test
+            </CardTitle>
+            <CardDescription>
+              Test the AI provider responsible for semantic search embeddings
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <AI_TESTER type="embeddings" />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Info Section */}
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle>ℹ️ How Testing Works</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4 text-sm">
+          <div>
+            <h4 className="font-semibold mb-2">🏷️ Tags Generation Test:</h4>
+            <ul className="list-disc list-inside space-y-1 text-muted-foreground">
+              <li>Sends a sample note to the AI provider</li>
+              <li>Requests 3-5 relevant tags based on the content</li>
+              <li>Displays the generated tags with confidence scores</li>
+              <li>Measures response time</li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="font-semibold mb-2">🔍 Embeddings Test:</h4>
+            <ul className="list-disc list-inside space-y-1 text-muted-foreground">
+              <li>Sends a sample text to the embedding provider</li>
+              <li>Generates a vector representation (list of numbers)</li>
+              <li>Displays embedding dimensions and sample values</li>
+              <li>Verifies the vector is valid and properly formatted</li>
+            </ul>
+          </div>
+          <div className="bg-amber-50 dark:bg-amber-950/20 p-4 rounded-lg border border-amber-200 dark:border-amber-900">
+            <p className="font-semibold text-amber-900 dark:text-amber-100">💡 Tip:</p>
+            <p className="text-amber-800 dark:text-amber-200 mt-1">
+              You can use different providers for tags and embeddings! For example, use Ollama (free) for tags
+              and OpenAI (best quality) for embeddings to optimize costs and performance.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

memento-note/app/(main)/admin/ai/page.tsx

@@ -0,0 +1,147 @@
+import { AdminMetrics } from '@/components/admin-metrics'
+import { Button } from '@/components/ui/button'
+import { Zap, Settings, Activity, TrendingUp } from 'lucide-react'
+import Link from 'next/link'
+import { getSystemConfig } from '@/lib/config'
+
+export default async function AdminAIPage() {
+  const config = await getSystemConfig()
+
+  // Determine provider status based on config
+  const openaiKey = config.OPENAI_API_KEY
+  const ollamaUrl = config.OLLAMA_BASE_URL || config.OLLAMA_BASE_URL_TAGS || config.OLLAMA_BASE_URL_EMBEDDING
+
+  const providers = [
+    {
+      name: 'OpenAI',
+      status: openaiKey ? 'Connected' : 'Not Configured',
+      requests: 'N/A' // We don't track request counts yet
+    },
+    {
+      name: 'Ollama',
+      status: ollamaUrl ? 'Available' : 'Not Configured',
+      requests: 'N/A'
+    },
+  ]
+
+  // Mock AI metrics - in a real app, these would come from analytics
+  // TODO: Implement real analytics tracking
+  const aiMetrics = [
+    {
+      title: 'Total Requests',
+      value: '—',
+      trend: { value: 0, isPositive: true },
+      icon: <Zap className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />,
+    },
+    {
+      title: 'Success Rate',
+      value: '100%',
+      trend: { value: 0, isPositive: true },
+      icon: <TrendingUp className="h-5 w-5 text-green-600 dark:text-green-400" />,
+    },
+    {
+      title: 'Avg Response Time',
+      value: '—',
+      trend: { value: 0, isPositive: true },
+      icon: <Activity className="h-5 w-5 text-primary dark:text-primary-foreground" />,
+    },
+    {
+      title: 'Active Features',
+      value: '6',
+      icon: <Settings className="h-5 w-5 text-purple-600 dark:text-purple-400" />,
+    },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            AI Management
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            Monitor and configure AI features
+          </p>
+        </div>
+        <Link href="/admin/settings">
+          <Button variant="outline">
+            <Settings className="mr-2 h-4 w-4" />
+            Configure
+          </Button>
+        </Link>
+      </div>
+
+      <AdminMetrics metrics={aiMetrics} />
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            Active AI Features
+          </h2>
+          <div className="space-y-3">
+            {[
+              'Title Suggestions',
+              'Semantic Search',
+              'Paragraph Reformulation',
+              'Memory Echo',
+              'Language Detection',
+              'Auto Labeling',
+            ].map((feature) => (
+              <div
+                key={feature}
+                className="flex items-center justify-between p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg"
+              >
+                <span className="text-sm text-gray-900 dark:text-white">
+                  {feature}
+                </span>
+                <span className="px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900 rounded-full">
+                  Active
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            AI Provider Status
+          </h2>
+          <div className="space-y-3">
+            {providers.map((provider) => (
+              <div
+                key={provider.name}
+                className="flex items-center justify-between p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg"
+              >
+                <div>
+                  <p className="text-sm font-medium text-gray-900 dark:text-white">
+                    {provider.name}
+                  </p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400">
+                    {provider.requests} requests
+                  </p>
+                </div>
+                <span
+                  className={`px-2 py-1 text-xs font-medium rounded-full ${provider.status === 'Connected' || provider.status === 'Available'
+                      ? 'text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900'
+                      : 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800'
+                    }`}
+                >
+                  {provider.status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Recent AI Requests
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400">
+          Recent AI requests will be displayed here. (Coming Soon)
+        </p>
+      </div>
+    </div>
+  )
+}

memento-note/app/(main)/admin/create-user-dialog.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Plus } from 'lucide-react'
+import { createUser } from '@/app/actions/admin'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+
+export function CreateUserDialog() {
+  const [open, setOpen] = useState(false)
+  const { t } = useLanguage()
+  
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" /> {t('admin.users.addUser')}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{t('admin.users.createUser')}</DialogTitle>
+          <DialogDescription>
+            {t('admin.users.createUserDescription')}
+          </DialogDescription>
+        </DialogHeader>
+        <form
+          action={async (formData) => {
+            const result = await createUser(formData)
+            if (result?.error) {
+              toast.error(t('admin.users.createFailed'))
+            } else {
+              toast.success(t('admin.users.createSuccess'))
+              setOpen(false)
+            }
+          }}
+          className="grid gap-4 py-4"
+        >
+          <div className="grid gap-2">
+            <label htmlFor="name">{t('admin.users.name')}</label>
+            <Input id="name" name="name" required />
+          </div>
+          <div className="grid gap-2">
+            <label htmlFor="email">{t('admin.users.email')}</label>
+            <Input id="email" name="email" type="email" required />
+          </div>
+          <div className="grid gap-2">
+            <label htmlFor="password">{t('admin.users.password')}</label>
+            <Input id="password" name="password" type="password" required minLength={6} />
+          </div>
+          <div className="grid gap-2">
+            <label htmlFor="role">{t('admin.users.role')}</label>
+            <select
+              id="role"
+              name="role"
+              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <option value="USER">User</option>
+              <option value="ADMIN">Admin</option>
+            </select>
+          </div>
+          <DialogFooter>
+            <Button type="submit">{t('admin.users.createUser')}</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

memento-note/app/(main)/admin/layout.tsx

@@ -0,0 +1,23 @@
+import { AdminSidebar } from '@/components/admin-sidebar'
+import { AdminContentArea } from '@/components/admin-content-area'
+import { auth } from '@/auth'
+import { redirect } from 'next/navigation'
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const session = await auth()
+
+  if ((session?.user as any)?.role !== 'ADMIN') {
+    redirect('/')
+  }
+
+  return (
+    <div className="flex min-h-screen bg-gray-50 dark:bg-zinc-950">
+      <AdminSidebar />
+      <AdminContentArea>{children}</AdminContentArea>
+    </div>
+  )
+}

memento-note/app/(main)/admin/page.tsx

@@ -0,0 +1,59 @@
+import { getUsers } from '@/app/actions/admin'
+import { AdminMetrics } from '@/components/admin-metrics'
+import { Users, Activity, Database, Zap } from 'lucide-react'
+
+export default async function AdminPage() {
+  const users = await getUsers()
+
+  // Mock metrics data - in a real app, these would come from analytics
+  const metrics = [
+    {
+      title: 'Total Users',
+      value: users.length,
+      trend: { value: 12, isPositive: true },
+      icon: <Users className="h-5 w-5 text-primary dark:text-primary-foreground" />,
+    },
+    {
+      title: 'Active Sessions',
+      value: '24',
+      trend: { value: 8, isPositive: true },
+      icon: <Activity className="h-5 w-5 text-green-600 dark:text-green-400" />,
+    },
+    {
+      title: 'Total Notes',
+      value: '1,234',
+      trend: { value: 24, isPositive: true },
+      icon: <Database className="h-5 w-5 text-purple-600 dark:text-purple-400" />,
+    },
+    {
+      title: 'AI Requests',
+      value: '856',
+      trend: { value: 5, isPositive: false },
+      icon: <Zap className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />,
+    },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+          Dashboard
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Overview of your application metrics
+        </p>
+      </div>
+
+      <AdminMetrics metrics={metrics} />
+
+      <div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Recent Activity
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400">
+          Recent activity will be displayed here.
+        </p>
+      </div>
+    </div>
+  )
+}

memento-note/app/(main)/admin/settings/admin-settings-form.tsx

@@ -0,0 +1,618 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import { updateSystemConfig, testSMTP } from '@/app/actions/admin-settings'
+import { getOllamaModels } from '@/app/actions/ollama'
+import { toast } from 'sonner'
+import { useState, useEffect, useCallback } from 'react'
+import Link from 'next/link'
+import { TestTube, ExternalLink, RefreshCw } from 'lucide-react'
+import { useLanguage } from '@/lib/i18n'
+
+type AIProvider = 'ollama' | 'openai' | 'custom'
+
+interface AvailableModels {
+  tags: string[]
+  embeddings: string[]
+}
+
+const MODELS_2026 = {
+  // Removed hardcoded Ollama models in favor of dynamic fetching
+  openai: {
+    tags: ['gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo', 'gpt-4', 'gpt-3.5-turbo'],
+    embeddings: ['text-embedding-3-small', 'text-embedding-3-large', 'text-embedding-ada-002']
+  },
+  custom: {
+    tags: ['gpt-4o-mini', 'gpt-4o', 'claude-3-haiku', 'claude-3-sonnet', 'llama-3.1-8b'],
+    embeddings: ['text-embedding-3-small', 'text-embedding-3-large', 'text-embedding-ada-002']
+  }
+}
+
+export function AdminSettingsForm({ config }: { config: Record<string, string> }) {
+  const { t } = useLanguage()
+  const [isSaving, setIsSaving] = useState(false)
+  const [isTesting, setIsTesting] = useState(false)
+
+  // Local state for Checkbox
+  const [allowRegister, setAllowRegister] = useState(config.ALLOW_REGISTRATION !== 'false')
+  const [smtpSecure, setSmtpSecure] = useState(config.SMTP_SECURE === 'true')
+  const [smtpIgnoreCert, setSmtpIgnoreCert] = useState(config.SMTP_IGNORE_CERT === 'true')
+
+  // AI Provider state - separated for tags and embeddings
+  const [tagsProvider, setTagsProvider] = useState<AIProvider>((config.AI_PROVIDER_TAGS as AIProvider) || 'ollama')
+  const [embeddingsProvider, setEmbeddingsProvider] = useState<AIProvider>((config.AI_PROVIDER_EMBEDDING as AIProvider) || 'ollama')
+
+  // Selected Models State (Controlled Inputs)
+  const [selectedTagsModel, setSelectedTagsModel] = useState<string>(config.AI_MODEL_TAGS || '')
+  const [selectedEmbeddingModel, setSelectedEmbeddingModel] = useState<string>(config.AI_MODEL_EMBEDDING || '')
+
+
+  // Dynamic Models State
+  const [ollamaTagsModels, setOllamaTagsModels] = useState<string[]>([])
+  const [ollamaEmbeddingsModels, setOllamaEmbeddingsModels] = useState<string[]>([])
+  const [isLoadingTagsModels, setIsLoadingTagsModels] = useState(false)
+  const [isLoadingEmbeddingsModels, setIsLoadingEmbeddingsModels] = useState(false)
+
+  // Sync state with config
+  useEffect(() => {
+    setAllowRegister(config.ALLOW_REGISTRATION !== 'false')
+    setSmtpSecure(config.SMTP_SECURE === 'true')
+    setSmtpIgnoreCert(config.SMTP_IGNORE_CERT === 'true')
+    setTagsProvider((config.AI_PROVIDER_TAGS as AIProvider) || 'ollama')
+    setEmbeddingsProvider((config.AI_PROVIDER_EMBEDDING as AIProvider) || 'ollama')
+    setSelectedTagsModel(config.AI_MODEL_TAGS || '')
+    setSelectedEmbeddingModel(config.AI_MODEL_EMBEDDING || '')
+  }, [config])
+
+  // Fetch Ollama models
+  const fetchOllamaModels = useCallback(async (type: 'tags' | 'embeddings', url: string) => {
+    if (!url) return
+
+    if (type === 'tags') setIsLoadingTagsModels(true)
+    else setIsLoadingEmbeddingsModels(true)
+
+    try {
+      const result = await getOllamaModels(url)
+
+      if (result.success) {
+        if (type === 'tags') setOllamaTagsModels(result.models)
+        else setOllamaEmbeddingsModels(result.models)
+      } else {
+        toast.error(`Failed to fetch Ollama models: ${result.error}`)
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error('Failed to fetch Ollama models')
+    } finally {
+      if (type === 'tags') setIsLoadingTagsModels(false)
+      else setIsLoadingEmbeddingsModels(false)
+    }
+  }, [])
+
+  // Initial fetch for Ollama models if provider is selected
+  useEffect(() => {
+    if (tagsProvider === 'ollama') {
+      const url = config.OLLAMA_BASE_URL_TAGS || config.OLLAMA_BASE_URL || 'http://localhost:11434'
+      fetchOllamaModels('tags', url)
+    }
+  }, [tagsProvider, config.OLLAMA_BASE_URL_TAGS, config.OLLAMA_BASE_URL, fetchOllamaModels])
+
+  useEffect(() => {
+    if (embeddingsProvider === 'ollama') {
+      const url = config.OLLAMA_BASE_URL_EMBEDDING || config.OLLAMA_BASE_URL || 'http://localhost:11434'
+      fetchOllamaModels('embeddings', url)
+    }
+  }, [embeddingsProvider, config.OLLAMA_BASE_URL_EMBEDDING, config.OLLAMA_BASE_URL, fetchOllamaModels])
+
+  const handleSaveSecurity = async (formData: FormData) => {
+    setIsSaving(true)
+    const data = {
+      ALLOW_REGISTRATION: allowRegister ? 'true' : 'false',
+    }
+
+    const result = await updateSystemConfig(data)
+    setIsSaving(false)
+
+    if (result.error) {
+      toast.error(t('admin.security.updateFailed'))
+    } else {
+      toast.success(t('admin.security.updateSuccess'))
+    }
+  }
+
+  const handleSaveAI = async (formData: FormData) => {
+    setIsSaving(true)
+    const data: Record<string, string> = {}
+
+    try {
+      const tagsProv = formData.get('AI_PROVIDER_TAGS') as AIProvider
+      if (!tagsProv) throw new Error(t('admin.ai.providerTagsRequired'))
+      data.AI_PROVIDER_TAGS = tagsProv
+
+      const tagsModel = formData.get('AI_MODEL_TAGS') as string
+      if (tagsModel) data.AI_MODEL_TAGS = tagsModel
+
+      if (tagsProv === 'ollama') {
+        const ollamaUrl = formData.get('OLLAMA_BASE_URL_TAGS') as string
+        if (ollamaUrl) data.OLLAMA_BASE_URL_TAGS = ollamaUrl
+      } else if (tagsProv === 'openai') {
+        const openaiKey = formData.get('OPENAI_API_KEY') as string
+        if (openaiKey) data.OPENAI_API_KEY = openaiKey
+      } else if (tagsProv === 'custom') {
+        const customKey = formData.get('CUSTOM_OPENAI_API_KEY_TAGS') as string
+        const customUrl = formData.get('CUSTOM_OPENAI_BASE_URL_TAGS') as string
+        if (customKey) data.CUSTOM_OPENAI_API_KEY = customKey
+        if (customUrl) data.CUSTOM_OPENAI_BASE_URL = customUrl
+      }
+
+      const embedProv = formData.get('AI_PROVIDER_EMBEDDING') as AIProvider
+      if (!embedProv) throw new Error(t('admin.ai.providerEmbeddingRequired'))
+      data.AI_PROVIDER_EMBEDDING = embedProv
+
+      const embedModel = formData.get('AI_MODEL_EMBEDDING') as string
+      if (embedModel) data.AI_MODEL_EMBEDDING = embedModel
+
+      if (embedProv === 'ollama') {
+        const ollamaUrl = formData.get('OLLAMA_BASE_URL_EMBEDDING') as string
+        if (ollamaUrl) data.OLLAMA_BASE_URL_EMBEDDING = ollamaUrl
+      } else if (embedProv === 'openai') {
+        const openaiKey = formData.get('OPENAI_API_KEY') as string
+        if (openaiKey) data.OPENAI_API_KEY = openaiKey
+      } else if (embedProv === 'custom') {
+        const customKey = formData.get('CUSTOM_OPENAI_API_KEY_EMBEDDING') as string
+        const customUrl = formData.get('CUSTOM_OPENAI_BASE_URL_EMBEDDING') as string
+        if (customKey) data.CUSTOM_OPENAI_API_KEY = customKey
+        if (customUrl) data.CUSTOM_OPENAI_BASE_URL = customUrl
+      }
+
+
+      const result = await updateSystemConfig(data)
+      setIsSaving(false)
+
+      if (result.error) {
+        toast.error(t('admin.ai.updateFailed') + ': ' + result.error)
+      } else {
+        toast.success(t('admin.ai.updateSuccess'))
+        setTagsProvider(tagsProv)
+        setEmbeddingsProvider(embedProv)
+
+        // Refresh models after save if Ollama is selected
+        if (tagsProv === 'ollama') {
+          const url = data.OLLAMA_BASE_URL_TAGS || config.OLLAMA_BASE_URL || 'http://localhost:11434'
+          fetchOllamaModels('tags', url)
+        }
+        if (embedProv === 'ollama') {
+          const url = data.OLLAMA_BASE_URL_EMBEDDING || config.OLLAMA_BASE_URL || 'http://localhost:11434'
+          fetchOllamaModels('embeddings', url)
+        }
+      }
+    } catch (error: any) {
+      setIsSaving(false)
+      toast.error(t('general.error') + ': ' + error.message)
+    }
+  }
+
+  const handleSaveSMTP = async (formData: FormData) => {
+    setIsSaving(true)
+    const data = {
+      SMTP_HOST: formData.get('SMTP_HOST') as string,
+      SMTP_PORT: formData.get('SMTP_PORT') as string,
+      SMTP_USER: formData.get('SMTP_USER') as string,
+      SMTP_PASS: formData.get('SMTP_PASS') as string,
+      SMTP_FROM: formData.get('SMTP_FROM') as string,
+      SMTP_IGNORE_CERT: smtpIgnoreCert ? 'true' : 'false',
+      SMTP_SECURE: smtpSecure ? 'true' : 'false',
+    }
+
+    const result = await updateSystemConfig(data)
+    setIsSaving(false)
+
+    if (result.error) {
+      toast.error(t('admin.smtp.updateFailed'))
+    } else {
+      toast.success(t('admin.smtp.updateSuccess'))
+    }
+  }
+
+  const handleTestEmail = async () => {
+    setIsTesting(true)
+    try {
+      const result: any = await testSMTP()
+      if (result.success) {
+        toast.success(t('admin.smtp.testSuccess'))
+      } else {
+        toast.error(t('admin.smtp.testFailed', { error: result.error }))
+      }
+    } catch (e: any) {
+      toast.error(t('general.error') + ': ' + e.message)
+    } finally {
+      setIsTesting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('admin.security.title')}</CardTitle>
+          <CardDescription>{t('admin.security.description')}</CardDescription>
+        </CardHeader>
+        <form action={handleSaveSecurity}>
+          <CardContent className="space-y-4">
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="ALLOW_REGISTRATION"
+                checked={allowRegister}
+                onCheckedChange={(c) => setAllowRegister(!!c)}
+              />
+              <label
+                htmlFor="ALLOW_REGISTRATION"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                {t('admin.security.allowPublicRegistration')}
+              </label>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('admin.security.allowPublicRegistrationDescription')}
+            </p>
+          </CardContent>
+          <CardFooter>
+            <Button type="submit" disabled={isSaving}>{t('admin.security.title')}</Button>
+          </CardFooter>
+        </form>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('admin.ai.title')}</CardTitle>
+          <CardDescription>{t('admin.ai.description')}</CardDescription>
+        </CardHeader>
+        <form action={handleSaveAI}>
+          <CardContent className="space-y-6">
+            <div className="space-y-4 p-4 border rounded-lg bg-primary/5 dark:bg-primary/10">
+              <h3 className="text-base font-semibold flex items-center gap-2">
+                <span className="text-primary">🏷️</span> {t('admin.ai.tagsGenerationProvider')}
+              </h3>
+              <p className="text-xs text-muted-foreground">{t('admin.ai.tagsGenerationDescription')}</p>
+
+              <div className="space-y-2">
+                <Label htmlFor="AI_PROVIDER_TAGS">{t('admin.ai.provider')}</Label>
+                <select
+                  id="AI_PROVIDER_TAGS"
+                  name="AI_PROVIDER_TAGS"
+                  value={tagsProvider}
+                  onChange={(e) => setTagsProvider(e.target.value as AIProvider)}
+                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                >
+                  <option value="ollama">{t('admin.ai.providerOllamaOption')}</option>
+                  <option value="openai">{t('admin.ai.providerOpenAIOption')}</option>
+                  <option value="custom">{t('admin.ai.providerCustomOption')}</option>
+                </select>
+              </div>
+
+              {tagsProvider === 'ollama' && (
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="OLLAMA_BASE_URL_TAGS">{t('admin.ai.baseUrl')}</Label>
+                    <div className="flex gap-2">
+                      <Input
+                        id="OLLAMA_BASE_URL_TAGS"
+                        name="OLLAMA_BASE_URL_TAGS"
+                        defaultValue={config.OLLAMA_BASE_URL_TAGS || config.OLLAMA_BASE_URL || 'http://localhost:11434'}
+                        placeholder="http://localhost:11434"
+                      />
+                      <Button
+                        type="button"
+                        size="icon"
+                        variant="outline"
+                        onClick={() => {
+                          const input = document.getElementById('OLLAMA_BASE_URL_TAGS') as HTMLInputElement
+                          fetchOllamaModels('tags', input.value)
+                        }}
+                        disabled={isLoadingTagsModels}
+                        title="Refresh Models"
+                      >
+                        <RefreshCw className={`h-4 w-4 ${isLoadingTagsModels ? 'animate-spin' : ''}`} />
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="AI_MODEL_TAGS_OLLAMA">{t('admin.ai.model')}</Label>
+                    <select
+                      id="AI_MODEL_TAGS_OLLAMA"
+                      name="AI_MODEL_TAGS_OLLAMA"
+                      value={selectedTagsModel}
+                      onChange={(e) => setSelectedTagsModel(e.target.value)}
+                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    >
+                      {ollamaTagsModels.length > 0 ? (
+                        ollamaTagsModels.map((model) => (
+                          <option key={model} value={model}>{model}</option>
+                        ))
+                      ) : (
+                        <option value={selectedTagsModel || 'granite4:latest'}>{selectedTagsModel || 'granite4:latest'} {t('admin.ai.saved')}</option>
+                      )}
+                    </select>
+                    <p className="text-xs text-muted-foreground">
+                      {isLoadingTagsModels ? 'Fetching models...' : t('admin.ai.selectOllamaModel')}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {tagsProvider === 'openai' && (
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="OPENAI_API_KEY">{t('admin.ai.apiKey')}</Label>
+                    <Input id="OPENAI_API_KEY" name="OPENAI_API_KEY" type="password" defaultValue={config.OPENAI_API_KEY || ''} placeholder="sk-..." />
+                    <p className="text-xs text-muted-foreground">{t('admin.ai.openAIKeyDescription')}</p>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="AI_MODEL_TAGS_OPENAI">{t('admin.ai.model')}</Label>
+                    <select
+                      id="AI_MODEL_TAGS_OPENAI"
+                      name="AI_MODEL_TAGS_OPENAI"
+                      value={selectedTagsModel}
+                      onChange={(e) => setSelectedTagsModel(e.target.value)}
+                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    >
+                      {MODELS_2026.openai.tags.map((model) => (
+                        <option key={model} value={model}>{model}</option>
+                      ))}
+                    </select>
+                    <p className="text-xs text-muted-foreground"><strong className="text-green-600">gpt-4o-mini</strong> = {t('admin.ai.bestValue')} • <strong className="text-primary">gpt-4o</strong> = {t('admin.ai.bestQuality')}</p>
+                  </div>
+                </div>
+              )}
+
+              {tagsProvider === 'custom' && (
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="CUSTOM_OPENAI_BASE_URL_TAGS">{t('admin.ai.baseUrl')}</Label>
+                    <Input id="CUSTOM_OPENAI_BASE_URL_TAGS" name="CUSTOM_OPENAI_BASE_URL_TAGS" defaultValue={config.CUSTOM_OPENAI_BASE_URL || ''} placeholder="https://api.example.com/v1" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="CUSTOM_OPENAI_API_KEY_TAGS">{t('admin.ai.apiKey')}</Label>
+                    <Input id="CUSTOM_OPENAI_API_KEY_TAGS" name="CUSTOM_OPENAI_API_KEY_TAGS" type="password" defaultValue={config.CUSTOM_OPENAI_API_KEY || ''} placeholder="sk-..." />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="AI_MODEL_TAGS_CUSTOM">{t('admin.ai.model')}</Label>
+                    <select
+                      id="AI_MODEL_TAGS_CUSTOM"
+                      name="AI_MODEL_TAGS_CUSTOM"
+                      value={selectedTagsModel}
+                      onChange={(e) => setSelectedTagsModel(e.target.value)}
+                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    >
+                      {MODELS_2026.custom.tags.map((model) => (
+                        <option key={model} value={model}>{model}</option>
+                      ))}
+                    </select>
+                    <p className="text-xs text-muted-foreground">{t('admin.ai.commonModelsDescription')}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg bg-green-50/50 dark:bg-green-950/20">
+              <h3 className="text-base font-semibold flex items-center gap-2">
+                <span className="text-green-600">🔍</span> {t('admin.ai.embeddingsProvider')}
+              </h3>
+              <p className="text-xs text-muted-foreground">{t('admin.ai.embeddingsDescription')}</p>
+
+              <div className="space-y-2">
+                <Label htmlFor="AI_PROVIDER_EMBEDDING">
+                  {t('admin.ai.provider')}
+                  <span className="ml-2 text-xs text-muted-foreground">
+                    (Current: {embeddingsProvider})
+                  </span>
+                </Label>
+                <select
+                  id="AI_PROVIDER_EMBEDDING"
+                  name="AI_PROVIDER_EMBEDDING"
+                  value={embeddingsProvider}
+                  onChange={(e) => setEmbeddingsProvider(e.target.value as AIProvider)}
+                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                >
+                  <option value="ollama">{t('admin.ai.providerOllamaOption')}</option>
+                  <option value="openai">{t('admin.ai.providerOpenAIOption')}</option>
+                  <option value="custom">{t('admin.ai.providerCustomOption')}</option>
+                </select>
+                <p className="text-xs text-muted-foreground">
+                  Config value: {config.AI_PROVIDER_EMBEDDING || 'Not set (defaults to ollama)'}
+                </p>
+              </div>
+
+              {embeddingsProvider === 'ollama' && (
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="OLLAMA_BASE_URL_EMBEDDING">{t('admin.ai.baseUrl')}</Label>
+                    <div className="flex gap-2">
+                      <Input
+                        id="OLLAMA_BASE_URL_EMBEDDING"
+                        name="OLLAMA_BASE_URL_EMBEDDING"
+                        defaultValue={config.OLLAMA_BASE_URL_EMBEDDING || config.OLLAMA_BASE_URL || 'http://localhost:11434'}
+                        placeholder="http://localhost:11434"
+                      />
+                      <Button
+                        type="button"
+                        size="icon"
+                        variant="outline"
+                        onClick={() => {
+                          const input = document.getElementById('OLLAMA_BASE_URL_EMBEDDING') as HTMLInputElement
+                          fetchOllamaModels('embeddings', input.value)
+                        }}
+                        disabled={isLoadingEmbeddingsModels}
+                        title="Refresh Models"
+                      >
+                        <RefreshCw className={`h-4 w-4 ${isLoadingEmbeddingsModels ? 'animate-spin' : ''}`} />
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="AI_MODEL_EMBEDDING_OLLAMA">{t('admin.ai.model')}</Label>
+                    <select
+                      id="AI_MODEL_EMBEDDING_OLLAMA"
+                      name="AI_MODEL_EMBEDDING_OLLAMA"
+                      value={selectedEmbeddingModel}
+                      onChange={(e) => setSelectedEmbeddingModel(e.target.value)}
+                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    >
+                      {ollamaEmbeddingsModels.length > 0 ? (
+                        ollamaEmbeddingsModels.map((model) => (
+                          <option key={model} value={model}>{model}</option>
+                        ))
+                      ) : (
+                        <option value={selectedEmbeddingModel || 'embeddinggemma:latest'}>{selectedEmbeddingModel || 'embeddinggemma:latest'} {t('admin.ai.saved')}</option>
+                      )}
+                    </select>
+                    <p className="text-xs text-muted-foreground">
+                      {isLoadingEmbeddingsModels ? 'Fetching models...' : t('admin.ai.selectEmbeddingModel')}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {embeddingsProvider === 'openai' && (
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="OPENAI_API_KEY">{t('admin.ai.apiKey')}</Label>
+                    <Input id="OPENAI_API_KEY" name="OPENAI_API_KEY" type="password" defaultValue={config.OPENAI_API_KEY || ''} placeholder="sk-..." />
+                    <p className="text-xs text-muted-foreground">{t('admin.ai.openAIKeyDescription')}</p>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="AI_MODEL_EMBEDDING_OPENAI">{t('admin.ai.model')}</Label>
+                    <select
+                      id="AI_MODEL_EMBEDDING_OPENAI"
+                      name="AI_MODEL_EMBEDDING_OPENAI"
+                      value={selectedEmbeddingModel}
+                      onChange={(e) => setSelectedEmbeddingModel(e.target.value)}
+                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    >
+                      {MODELS_2026.openai.embeddings.map((model) => (
+                        <option key={model} value={model}>{model}</option>
+                      ))}
+                    </select>
+                    <p className="text-xs text-muted-foreground"><strong className="text-green-600">text-embedding-3-small</strong> = {t('admin.ai.bestValue')} • <strong className="text-primary">text-embedding-3-large</strong> = {t('admin.ai.bestQuality')}</p>
+                  </div>
+                </div>
+              )}
+
+              {embeddingsProvider === 'custom' && (
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="CUSTOM_OPENAI_BASE_URL_EMBEDDING">{t('admin.ai.baseUrl')}</Label>
+                    <Input id="CUSTOM_OPENAI_BASE_URL_EMBEDDING" name="CUSTOM_OPENAI_BASE_URL_EMBEDDING" defaultValue={config.CUSTOM_OPENAI_BASE_URL || ''} placeholder="https://api.example.com/v1" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="CUSTOM_OPENAI_API_KEY_EMBEDDING">{t('admin.ai.apiKey')}</Label>
+                    <Input id="CUSTOM_OPENAI_API_KEY_EMBEDDING" name="CUSTOM_OPENAI_API_KEY_EMBEDDING" type="password" defaultValue={config.CUSTOM_OPENAI_API_KEY || ''} placeholder="sk-..." />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="AI_MODEL_EMBEDDING_CUSTOM">{t('admin.ai.model')}</Label>
+                    <select
+                      id="AI_MODEL_EMBEDDING_CUSTOM"
+                      name="AI_MODEL_EMBEDDING_CUSTOM"
+                      value={selectedEmbeddingModel}
+                      onChange={(e) => setSelectedEmbeddingModel(e.target.value)}
+                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    >
+                      {MODELS_2026.custom.embeddings.map((model) => (
+                        <option key={model} value={model}>{model}</option>
+                      ))}
+                    </select>
+                    <p className="text-xs text-muted-foreground">{t('admin.ai.commonEmbeddingModels')}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </CardContent>
+          <CardFooter className="flex justify-between">
+            <Button type="submit" disabled={isSaving}>{isSaving ? t('admin.ai.saving') : t('admin.ai.saveSettings')}</Button>
+            <Link href="/admin/ai-test">
+              <Button type="button" variant="outline" className="gap-2">
+                <TestTube className="h-4 w-4" />
+                {t('admin.ai.openTestPanel')}
+                <ExternalLink className="h-3 w-3" />
+              </Button>
+            </Link>
+          </CardFooter>
+        </form>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('admin.smtp.title')}</CardTitle>
+          <CardDescription>{t('admin.smtp.description')}</CardDescription>
+        </CardHeader>
+        <form action={handleSaveSMTP}>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <label htmlFor="SMTP_HOST" className="text-sm font-medium">{t('admin.smtp.host')}</label>
+                <Input id="SMTP_HOST" name="SMTP_HOST" defaultValue={config.SMTP_HOST || ''} placeholder="smtp.example.com" />
+              </div>
+              <div className="space-y-2">
+                <label htmlFor="SMTP_PORT" className="text-sm font-medium">{t('admin.smtp.port')}</label>
+                <Input id="SMTP_PORT" name="SMTP_PORT" defaultValue={config.SMTP_PORT || '587'} placeholder="587" />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="SMTP_USER" className="text-sm font-medium">{t('admin.smtp.username')}</label>
+              <Input id="SMTP_USER" name="SMTP_USER" defaultValue={config.SMTP_USER || ''} />
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="SMTP_PASS" className="text-sm font-medium">{t('admin.smtp.password')}</label>
+              <Input id="SMTP_PASS" name="SMTP_PASS" type="password" defaultValue={config.SMTP_PASS || ''} />
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="SMTP_FROM" className="text-sm font-medium">{t('admin.smtp.fromEmail')}</label>
+              <Input id="SMTP_FROM" name="SMTP_FROM" defaultValue={config.SMTP_FROM || 'noreply@memento.app'} />
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="SMTP_SECURE"
+                checked={smtpSecure}
+                onCheckedChange={(c) => setSmtpSecure(!!c)}
+              />
+              <label
+                htmlFor="SMTP_SECURE"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                {t('admin.smtp.forceSSL')}
+              </label>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="SMTP_IGNORE_CERT"
+                checked={smtpIgnoreCert}
+                onCheckedChange={(c) => setSmtpIgnoreCert(!!c)}
+              />
+              <label
+                htmlFor="SMTP_IGNORE_CERT"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-yellow-600"
+              >
+                {t('admin.smtp.ignoreCertErrors')}
+              </label>
+            </div>
+          </CardContent>
+          <CardFooter className="flex justify-between">
+            <Button type="submit" disabled={isSaving}>{t('admin.smtp.saveSettings')}</Button>
+            <Button type="button" variant="secondary" onClick={handleTestEmail} disabled={isTesting}>
+              {isTesting ? t('admin.smtp.sending') : t('admin.smtp.testEmail')}
+            </Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,23 @@
+import { getSystemConfig } from '@/app/actions/admin-settings'
+import { AdminSettingsForm } from './admin-settings-form'
+
+export default async function AdminSettingsPage() {
+  const config = await getSystemConfig()
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+          Settings
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Configure application-wide settings
+        </p>
+      </div>
+
+      <div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
+        <AdminSettingsForm config={config} />
+      </div>
+    </div>
+  )
+}

memento-note/app/(main)/admin/user-list.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { deleteUser, updateUserRole } from '@/app/actions/admin'
+import { toast } from 'sonner'
+import { Trash2, Shield, ShieldOff } from 'lucide-react'
+import { format } from 'date-fns'
+import { useLanguage } from '@/lib/i18n'
+
+export function UserList({ initialUsers }: { initialUsers: any[] }) {
+  const { t } = useLanguage()
+
+  const handleDelete = async (id: string) => {
+    if (!confirm(t('admin.users.confirmDelete'))) return
+    try {
+      await deleteUser(id)
+      toast.success(t('admin.users.deleteSuccess'))
+    } catch (e) {
+      toast.error(t('admin.users.deleteFailed'))
+    }
+  }
+
+  const handleRoleToggle = async (user: any) => {
+    const newRole = user.role === 'ADMIN' ? 'USER' : 'ADMIN'
+    try {
+      await updateUserRole(user.id, newRole)
+      toast.success(t('admin.users.roleUpdateSuccess', { role: newRole }))
+    } catch (e) {
+      toast.error(t('admin.users.roleUpdateFailed'))
+    }
+  }
+
+  return (
+    <div className="w-full overflow-auto">
+      <table className="w-full caption-bottom text-sm text-left">
+        <thead className="[&_tr]:border-b">
+          <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+            <th className="h-12 px-4 align-middle font-medium text-muted-foreground">{t('admin.users.table.name')}</th>
+            <th className="h-12 px-4 align-middle font-medium text-muted-foreground">{t('admin.users.table.email')}</th>
+            <th className="h-12 px-4 align-middle font-medium text-muted-foreground">{t('admin.users.table.role')}</th>
+            <th className="h-12 px-4 align-middle font-medium text-muted-foreground">{t('admin.users.table.createdAt')}</th>
+            <th className="h-12 px-4 align-middle font-medium text-muted-foreground text-right">{t('admin.users.table.actions')}</th>
+          </tr>
+        </thead>
+        <tbody className="[&_tr:last-child]:border-0">
+          {initialUsers.map((user) => (
+            <tr key={user.id} className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+              <td className="p-4 align-middle font-medium">{user.name || t('common.notAvailable')}</td>
+              <td className="p-4 align-middle">{user.email}</td>
+              <td className="p-4 align-middle">
+                <span className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${user.role === 'ADMIN' ? 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80' : 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80'}`}>
+                  {user.role === 'ADMIN' ? t('admin.users.roles.admin') : t('admin.users.roles.user')}
+                </span>
+              </td>
+              <td className="p-4 align-middle">{format(new Date(user.createdAt), 'PP')}</td>
+              <td className="p-4 align-middle text-right">
+                <div className="flex justify-end gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRoleToggle(user)}
+                    title={user.role === 'ADMIN' ? t('admin.users.demote') : t('admin.users.promote')}
+                  >
+                    {user.role === 'ADMIN' ? <ShieldOff className="h-4 w-4" /> : <Shield className="h-4 w-4" />}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleDelete(user.id)}
+                    className="text-red-600 hover:text-red-900"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

memento-note/app/(main)/admin/users/page.tsx

@@ -0,0 +1,29 @@
+import { getUsers } from '@/app/actions/admin'
+import { CreateUserDialog } from '../create-user-dialog'
+import { UserList } from '../user-list'
+import { Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export default async function AdminUsersPage() {
+  const users = await getUsers()
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            Users
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            Manage application users and permissions
+          </p>
+        </div>
+        <CreateUserDialog />
+      </div>
+
+      <div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800">
+        <UserList initialUsers={users} />
+      </div>
+    </div>
+  )
+}

memento-note/app/(main)/archive/page.tsx

@@ -0,0 +1,16 @@
+import { getArchivedNotes } from '@/app/actions/notes'
+import { MasonryGrid } from '@/components/masonry-grid'
+import { ArchiveHeader } from '@/components/archive-header'
+
+export const dynamic = 'force-dynamic'
+
+export default async function ArchivePage() {
+  const notes = await getArchivedNotes()
+
+  return (
+    <main className="container mx-auto px-4 py-8 max-w-7xl">
+      <ArchiveHeader />
+      <MasonryGrid notes={notes} />
+    </main>
+  )
+}

memento-note/app/(main)/layout.tsx

@@ -0,0 +1,34 @@
+import { HeaderWrapper } from "@/components/header-wrapper";
+import { Sidebar } from "@/components/sidebar";
+import { ProvidersWrapper } from "@/components/providers-wrapper";
+import { auth } from "@/auth";
+import { detectUserLanguage } from "@/lib/i18n/detect-user-language";
+
+export default async function MainLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const session = await auth();
+  const initialLanguage = await detectUserLanguage();
+
+  return (
+    <ProvidersWrapper initialLanguage={initialLanguage}>
+      <div className="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-white overflow-hidden h-screen flex flex-col">
+        {/* Top Navigation - Style Keep */}
+        <HeaderWrapper user={session?.user} />
+
+        {/* Main Layout */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Sidebar Navigation - Style Keep */}
+          <Sidebar className="w-64 flex-none flex-col bg-white dark:bg-[#1e2128] border-r border-slate-200 dark:border-slate-800 overflow-y-auto hidden md:flex" user={session?.user} />
+
+          {/* Main Content Area */}
+          <main className="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-4 scroll-smooth">
+            {children}
+          </main>
+        </div>
+      </div>
+    </ProvidersWrapper>
+  );
+}

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

@@ -0,0 +1,464 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useSearchParams, useRouter } from 'next/navigation'
+import { Note } from '@/lib/types'
+import { getAllNotes, getPinnedNotes, getRecentNotes, searchNotes } from '@/app/actions/notes'
+import { getAISettings } from '@/app/actions/ai-settings'
+import { NoteInput } from '@/components/note-input'
+import { MasonryGrid } from '@/components/masonry-grid'
+import { MemoryEchoNotification } from '@/components/memory-echo-notification'
+import { NotebookSuggestionToast } from '@/components/notebook-suggestion-toast'
+import { NoteEditor } from '@/components/note-editor'
+import { BatchOrganizationDialog } from '@/components/batch-organization-dialog'
+import { AutoLabelSuggestionDialog } from '@/components/auto-label-suggestion-dialog'
+import { FavoritesSection } from '@/components/favorites-section'
+import { RecentNotesSection } from '@/components/recent-notes-section'
+import { Button } from '@/components/ui/button'
+import { Wand2 } from 'lucide-react'
+import { useLabels } from '@/context/LabelContext'
+import { useNoteRefresh } from '@/context/NoteRefreshContext'
+import { useReminderCheck } from '@/hooks/use-reminder-check'
+import { useAutoLabelSuggestion } from '@/hooks/use-auto-label-suggestion'
+import { useNotebooks } from '@/context/notebooks-context'
+import { Folder, Briefcase, FileText, Zap, BarChart3, Globe, Sparkles, Book, Heart, Crown, Music, Building2, Plane, ChevronRight, Plus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { LabelFilter } from '@/components/label-filter'
+import { useLanguage } from '@/lib/i18n'
+
+export default function HomePage() {
+
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const { t } = useLanguage()
+  // Force re-render when search params change (for filtering)
+  const [notes, setNotes] = useState<Note[]>([])
+  const [pinnedNotes, setPinnedNotes] = useState<Note[]>([])
+  const [recentNotes, setRecentNotes] = useState<Note[]>([])
+  const [showRecentNotes, setShowRecentNotes] = useState(false)
+  const [editingNote, setEditingNote] = useState<{ note: Note; readOnly?: boolean } | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [notebookSuggestion, setNotebookSuggestion] = useState<{ noteId: string; content: string } | null>(null)
+  const [batchOrganizationOpen, setBatchOrganizationOpen] = useState(false)
+  const { refreshKey } = useNoteRefresh()
+  const { labels } = useLabels()
+
+  // Auto label suggestion (IA4)
+  const { shouldSuggest: shouldSuggestLabels, notebookId: suggestNotebookId, dismiss: dismissLabelSuggestion } = useAutoLabelSuggestion()
+  const [autoLabelOpen, setAutoLabelOpen] = useState(false)
+
+  // Open auto label dialog when suggestion is available
+  useEffect(() => {
+    if (shouldSuggestLabels && suggestNotebookId) {
+      setAutoLabelOpen(true)
+    }
+  }, [shouldSuggestLabels, suggestNotebookId])
+
+  // Check if viewing Notes générales (no notebook filter)
+  const notebookFilter = searchParams.get('notebook')
+  const isInbox = !notebookFilter
+
+  // Callback for NoteInput to trigger notebook suggestion and update UI
+  const handleNoteCreated = useCallback((note: Note) => {
+
+
+    // Update UI immediately by adding the note to the list if it matches current filters
+    setNotes((prevNotes) => {
+      // Check if note matches current filters
+      const notebookFilter = searchParams.get('notebook')
+      const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
+      const colorFilter = searchParams.get('color')
+      const search = searchParams.get('search')?.trim() || null
+
+      // Check notebook filter
+      if (notebookFilter && note.notebookId !== notebookFilter) {
+        return prevNotes // Note doesn't match notebook filter
+      }
+      if (!notebookFilter && note.notebookId) {
+        return prevNotes // Viewing inbox but note has notebook
+      }
+
+      // Check label filter
+      if (labelFilter.length > 0) {
+        const noteLabels = note.labels || []
+        if (!noteLabels.some((label: string) => labelFilter.includes(label))) {
+          return prevNotes // Note doesn't match label filter
+        }
+      }
+
+      // Check color filter
+      if (colorFilter) {
+        const labelNamesWithColor = labels
+          .filter((label: any) => label.color === colorFilter)
+          .map((label: any) => label.name)
+        const noteLabels = note.labels || []
+        if (!noteLabels.some((label: string) => labelNamesWithColor.includes(label))) {
+          return prevNotes // Note doesn't match color filter
+        }
+      }
+
+      // Check search filter (simple check - if searching, let refresh handle it)
+      if (search) {
+        // If searching, refresh to get proper search results
+        router.refresh()
+        return prevNotes
+      }
+
+      // Note matches all filters - add it optimistically to the beginning of the list
+      // (newest notes first based on order: isPinned desc, order asc, updatedAt desc)
+      const isPinned = note.isPinned || false
+      const pinnedNotes = prevNotes.filter(n => n.isPinned)
+      const unpinnedNotes = prevNotes.filter(n => !n.isPinned)
+
+      if (isPinned) {
+        // Add to beginning of pinned notes
+        return [note, ...pinnedNotes, ...unpinnedNotes]
+      } else {
+        // Add to beginning of unpinned notes
+        return [...pinnedNotes, note, ...unpinnedNotes]
+      }
+    })
+
+    // Only suggest if note has no notebook and has 20+ words
+    if (!note.notebookId) {
+      const wordCount = (note.content || '').trim().split(/\s+/).filter(w => w.length > 0).length
+
+
+      if (wordCount >= 20) {
+
+        setNotebookSuggestion({
+          noteId: note.id,
+          content: note.content || ''
+        })
+      } else {
+
+      }
+    } else {
+
+    }
+
+    // Refresh in background to ensure data consistency (non-blocking)
+    router.refresh()
+  }, [searchParams, labels, router])
+
+  const handleOpenNote = (noteId: string) => {
+    const note = notes.find(n => n.id === noteId)
+    if (note) {
+      setEditingNote({ note, readOnly: false })
+    }
+  }
+
+  // Enable reminder notifications
+  useReminderCheck(notes)
+
+  // Load user settings to check if recent notes should be shown
+  useEffect(() => {
+    const loadSettings = async () => {
+      try {
+        const settings = await getAISettings()
+        setShowRecentNotes(settings.showRecentNotes === true)
+      } catch (error) {
+        setShowRecentNotes(false)
+      }
+    }
+    loadSettings()
+  }, [refreshKey])
+
+  useEffect(() => {
+    const loadNotes = async () => {
+      setIsLoading(true)
+      const search = searchParams.get('search')?.trim() || null
+      const semanticMode = searchParams.get('semantic') === 'true'
+      const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
+      const colorFilter = searchParams.get('color')
+      const notebookFilter = searchParams.get('notebook')
+
+      let allNotes = search ? await searchNotes(search, semanticMode, notebookFilter || undefined) : await getAllNotes()
+
+      // Filter by selected notebook
+      if (notebookFilter) {
+        allNotes = allNotes.filter((note: any) => note.notebookId === notebookFilter)
+      } else {
+        // If no notebook selected, only show notes without notebook (Notes générales)
+        allNotes = allNotes.filter((note: any) => !note.notebookId)
+      }
+
+      // Filter by selected labels
+      if (labelFilter.length > 0) {
+        allNotes = allNotes.filter((note: any) =>
+          note.labels?.some((label: string) => labelFilter.includes(label))
+        )
+      }
+
+      // Filter by color (filter notes that have labels with this color)
+      // Note: We use a ref-like pattern to avoid including labels in dependencies
+      // This prevents dialog closing when adding new labels
+      if (colorFilter) {
+        const labelNamesWithColor = labels
+          .filter((label: any) => label.color === colorFilter)
+          .map((label: any) => label.name)
+
+        allNotes = allNotes.filter((note: any) =>
+          note.labels?.some((label: string) => labelNamesWithColor.includes(label))
+        )
+      }
+
+      // Load pinned notes separately (shown in favorites section)
+      const pinned = await getPinnedNotes(notebookFilter || undefined)
+
+      setPinnedNotes(pinned)
+
+      // Load recent notes only if enabled in settings
+      if (showRecentNotes) {
+        const recent = await getRecentNotes(3)
+        // Filter recent notes by current filters
+        if (notebookFilter) {
+          setRecentNotes(recent.filter((note: any) => note.notebookId === notebookFilter))
+        } else {
+          setRecentNotes(recent.filter((note: any) => !note.notebookId))
+        }
+      } else {
+        setRecentNotes([])
+      }
+
+      setNotes(allNotes)
+      setIsLoading(false)
+    }
+
+    loadNotes()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams, refreshKey, showRecentNotes]) // Intentionally omit 'labels' and 'semantic' to prevent reload when adding tags or from router.push
+  // Get notebooks context to display header
+  const { notebooks } = useNotebooks()
+  const currentNotebook = notebooks.find((n: any) => n.id === searchParams.get('notebook'))
+  const [showNoteInput, setShowNoteInput] = useState(false)
+
+  // Get icon component for header
+  const getNotebookIcon = (iconName: string) => {
+    const ICON_MAP: Record<string, any> = {
+      'folder': Folder,
+      'briefcase': Briefcase,
+      'document': FileText,
+      'lightning': Zap,
+      'chart': BarChart3,
+      'globe': Globe,
+      'sparkle': Sparkles,
+      'book': Book,
+      'heart': Heart,
+      'crown': Crown,
+      'music': Music,
+      'building': Building2,
+      'flight_takeoff': Plane,
+    }
+    return ICON_MAP[iconName] || Folder
+  }
+
+  // Handle Note Created to close the input if desired, or keep open
+  const handleNoteCreatedWrapper = (note: any) => {
+    handleNoteCreated(note)
+    setShowNoteInput(false)
+  }
+
+  // Helper for Breadcrumbs
+  const Breadcrumbs = ({ notebookName }: { notebookName: string }) => (
+    <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
+      <span>{t('nav.notebooks')}</span>
+      <ChevronRight className="w-4 h-4" />
+      <span className="font-medium text-primary">{notebookName}</span>
+    </div>
+  )
+
+  return (
+    <main className="w-full px-8 py-6 flex flex-col h-full">
+      {/* Notebook Specific Header */}
+      {currentNotebook ? (
+        <div className="flex flex-col gap-6 mb-8 animate-in fade-in slide-in-from-top-2 duration-300">
+          {/* Breadcrumbs */}
+          <Breadcrumbs notebookName={currentNotebook.name} />
+
+          <div className="flex items-start justify-between">
+            {/* Title Section */}
+            <div className="flex items-center gap-5">
+              <div className="p-3 bg-primary/10 dark:bg-primary/20 rounded-xl">
+                {(() => {
+                  const Icon = getNotebookIcon(currentNotebook.icon || 'folder')
+                  return (
+                    <Icon
+                      className={cn("w-8 h-8", !currentNotebook.color && "text-primary dark:text-primary-foreground")}
+                      style={currentNotebook.color ? { color: currentNotebook.color } : undefined}
+                    />
+                  )
+                })()}
+              </div>
+              <h1 className="text-4xl font-bold text-gray-900 dark:text-white tracking-tight">{currentNotebook.name}</h1>
+            </div>
+
+            {/* Actions Section */}
+            <div className="flex items-center gap-3">
+              <LabelFilter
+                selectedLabels={searchParams.get('labels')?.split(',').filter(Boolean) || []}
+                onFilterChange={(newLabels) => {
+                  const params = new URLSearchParams(searchParams.toString())
+                  if (newLabels.length > 0) params.set('labels', newLabels.join(','))
+                  else params.delete('labels')
+                  router.push(`/?${params.toString()}`)
+                }}
+                className="border-gray-200"
+              />
+              <Button
+                onClick={() => setShowNoteInput(!showNoteInput)}
+                className="h-10 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow-sm gap-2 transition-all"
+              >
+                <Plus className="w-5 h-5" />
+                Add Note
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        /* Default Header for Home/Inbox */
+        <div className="flex flex-col gap-6 mb-8 animate-in fade-in slide-in-from-top-2 duration-300">
+          {/* Breadcrumbs Placeholder or just spacing */}
+          <div className="h-5 mb-1"></div>
+
+          <div className="flex items-start justify-between">
+            {/* Title Section */}
+            <div className="flex items-center gap-5">
+              <div className="p-3 bg-white border border-gray-100 dark:bg-gray-800 dark:border-gray-700 rounded-xl shadow-sm">
+                <FileText className="w-8 h-8 text-primary" />
+              </div>
+              <h1 className="text-4xl font-bold text-gray-900 dark:text-white tracking-tight">{t('notes.title')}</h1>
+            </div>
+
+            {/* Actions Section */}
+            <div className="flex items-center gap-3">
+              <LabelFilter
+                selectedLabels={searchParams.get('labels')?.split(',').filter(Boolean) || []}
+                onFilterChange={(newLabels) => {
+                  const params = new URLSearchParams(searchParams.toString())
+                  if (newLabels.length > 0) params.set('labels', newLabels.join(','))
+                  else params.delete('labels')
+                  router.push(`/?${params.toString()}`)
+                }}
+                className="border-gray-200"
+              />
+
+              {/* AI Organization Button - Moved to Header */}
+              {isInbox && !isLoading && notes.length >= 2 && (
+                <Button
+                  onClick={() => setBatchOrganizationOpen(true)}
+                  variant="outline"
+                  className="h-10 px-4 rounded-full border-gray-200 text-gray-700 hover:bg-gray-50 gap-2 shadow-sm"
+                  title={t('batch.organizeWithAI')}
+                >
+                  <Wand2 className="h-4 w-4 text-purple-600" />
+                  <span className="hidden sm:inline">{t('batch.organize')}</span>
+                </Button>
+              )}
+
+              <Button
+                onClick={() => setShowNoteInput(!showNoteInput)}
+                className="h-10 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow-sm gap-2 transition-all"
+              >
+                <Plus className="w-5 h-5" />
+                {t('notes.newNote')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Note Input - Conditionally Visible or Always Visible on Home */}
+      {/* Note Input - Conditionally Rendered */}
+      {showNoteInput && (
+        <div className="mb-8 animate-in fade-in slide-in-from-top-4 duration-300">
+          <NoteInput
+            onNoteCreated={handleNoteCreatedWrapper}
+            forceExpanded={true}
+          />
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="text-center py-8 text-gray-500">{t('general.loading')}</div>
+      ) : (
+        <>
+          {/* Favorites Section - Pinned Notes */}
+          <FavoritesSection
+            pinnedNotes={pinnedNotes}
+            onEdit={(note, readOnly) => setEditingNote({ note, readOnly })}
+          />
+
+          {/* Recent Notes Section - Only shown if enabled in settings */}
+          {showRecentNotes && (
+            <RecentNotesSection
+              recentNotes={recentNotes.filter(note => !note.isPinned)}
+              onEdit={(note, readOnly) => setEditingNote({ note, readOnly })}
+            />
+          )}
+
+          {/* Main Notes Grid - Unpinned Notes Only */}
+          {notes.filter(note => !note.isPinned).length > 0 && (
+            <div data-testid="notes-grid">
+              <MasonryGrid
+                notes={notes.filter(note => !note.isPinned)}
+                onEdit={(note, readOnly) => setEditingNote({ note, readOnly })}
+              />
+            </div>
+          )}
+
+          {/* Empty state when no notes */}
+          {notes.filter(note => !note.isPinned).length === 0 && pinnedNotes.length === 0 && (
+            <div className="text-center py-8 text-gray-500">
+              {t('notes.emptyState')}
+            </div>
+          )}
+        </>
+      )}
+      {/* Memory Echo - Proactive note connections */}
+      <MemoryEchoNotification onOpenNote={handleOpenNote} />
+
+      {/* Notebook Suggestion - IA1 */}
+      {notebookSuggestion && (
+        <NotebookSuggestionToast
+          noteId={notebookSuggestion.noteId}
+          noteContent={notebookSuggestion.content}
+          onDismiss={() => setNotebookSuggestion(null)}
+        />
+      )}
+
+      {/* Batch Organization Dialog - IA3 */}
+      <BatchOrganizationDialog
+        open={batchOrganizationOpen}
+        onOpenChange={setBatchOrganizationOpen}
+        onNotesMoved={() => {
+          // Refresh notes to see updated notebook assignments
+          router.refresh()
+        }}
+      />
+
+      {/* Auto Label Suggestion Dialog - IA4 */}
+      <AutoLabelSuggestionDialog
+        open={autoLabelOpen}
+        onOpenChange={(open) => {
+          setAutoLabelOpen(open)
+          if (!open) dismissLabelSuggestion()
+        }}
+        notebookId={suggestNotebookId}
+        onLabelsCreated={() => {
+          // Refresh to see new labels
+          router.refresh()
+        }}
+      />
+
+      {/* Note Editor Modal */}
+      {editingNote && (
+        <NoteEditor
+          note={editingNote.note}
+          readOnly={editingNote.readOnly}
+          onClose={() => setEditingNote(null)}
+        />
+      )}
+    </main>
+  )
+}

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

@@ -0,0 +1,136 @@
+'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'
+
+export default function AboutSettingsPage() {
+  const { t } = useLanguage()
+  const version = '1.0.0'
+  const buildDate = '2026-01-17'
+
+  return (
+    <div className="space-y-6">
+      <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>
+      </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>
+              <Badge variant="secondary">{version}</Badge>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="font-medium">{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>
+              <Badge variant="outline">{t('about.platformWeb')}</Badge>
+            </div>
+          </CardContent>
+        </Card>
+      </SettingsSection>
+
+      <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>
+            </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>
+            </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>
+            </div>
+          </CardContent>
+        </Card>
+      </SettingsSection>
+    </div>
+  )
+}

memento-note/app/(main)/settings/ai/ai-settings-header.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { useLanguage } from '@/lib/i18n'
+
+export function AISettingsHeader() {
+  const { t } = useLanguage()
+
+  return (
+    <div className="mb-6">
+      <h1 className="text-3xl font-bold">{t('aiSettings.title')}</h1>
+      <p className="text-gray-600 dark:text-gray-400">
+        {t('aiSettings.description')}
+      </p>
+    </div>
+  )
+}

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

@@ -0,0 +1,184 @@
+'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) {
+      toast.error(t('aiSettings.error'))
+      setSettings(settings) // Revert on error
+    }
+  }
+
+  const handleFrequencyChange = async (value: string) => {
+    setSettings(prev => ({ ...prev, memoryEchoFrequency: value as any }))
+    try {
+      await updateAISettings({ memoryEchoFrequency: value as any })
+    } catch (error) {
+      toast.error(t('aiSettings.error'))
+    }
+  }
+
+  const handleProviderChange = async (value: string) => {
+    setSettings(prev => ({ ...prev, aiProvider: value as any }))
+    try {
+      await updateAISettings({ aiProvider: value as any })
+    } catch (error) {
+      toast.error(t('aiSettings.error'))
+    }
+  }
+
+  const handleApiKeyChange = async (value: string) => {
+    setApiKey(value)
+    // TODO: Implement API key persistence
+
+  }
+
+  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">{t('aiSettings.title')}</h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              {t('aiSettings.description')}
+            </p>
+          </div>
+
+          {/* AI Provider */}
+          <SettingsSection
+            title={t('aiSettings.provider')}
+            icon={<span className="text-2xl">🤖</span>}
+            description={t('aiSettings.providerDesc')}
+          >
+            <SettingSelect
+              label={t('aiSettings.provider')}
+              description={t('aiSettings.providerDesc')}
+              value={settings.aiProvider}
+              options={[
+                {
+                  value: 'auto',
+                  label: t('aiSettings.providerAuto'),
+                  description: t('aiSettings.providerAutoDesc')
+                },
+                {
+                  value: 'ollama',
+                  label: t('aiSettings.providerOllama'),
+                  description: t('aiSettings.providerOllamaDesc')
+                },
+                {
+                  value: 'openai',
+                  label: t('aiSettings.providerOpenAI'),
+                  description: t('aiSettings.providerOpenAIDesc')
+                },
+              ]}
+              onChange={handleProviderChange}
+            />
+
+            {settings.aiProvider === 'openai' && (
+              <SettingInput
+                label={t('admin.ai.apiKey')}
+                description={t('admin.ai.openAIKeyDescription')}
+                value={apiKey}
+                type="password"
+                placeholder="sk-..."
+                onChange={handleApiKeyChange}
+              />
+            )}
+          </SettingsSection>
+
+          {/* Feature Toggles */}
+          <SettingsSection
+            title={t('aiSettings.features')}
+            icon={<span className="text-2xl">✨</span>}
+            description={t('aiSettings.description')}
+          >
+            <SettingToggle
+              label={t('titleSuggestions.available').replace('💡 ', '')}
+              description={t('aiSettings.titleSuggestionsDesc')}
+              checked={settings.titleSuggestions}
+              onChange={(checked) => handleToggle('titleSuggestions', checked)}
+            />
+
+            <SettingToggle
+              label={t('semanticSearch.exactMatch')}
+              description={t('semanticSearch.searching')}
+              checked={settings.semanticSearch}
+              onChange={(checked) => handleToggle('semanticSearch', checked)}
+            />
+
+            <SettingToggle
+              label={t('paragraphRefactor.title')}
+              description={t('aiSettings.paragraphRefactorDesc')}
+              checked={settings.paragraphRefactor}
+              onChange={(checked) => handleToggle('paragraphRefactor', checked)}
+            />
+
+            <SettingToggle
+              label={t('memoryEcho.title')}
+              description={t('memoryEcho.dailyInsight')}
+              checked={settings.memoryEcho}
+              onChange={(checked) => handleToggle('memoryEcho', checked)}
+            />
+
+            {settings.memoryEcho && (
+              <SettingSelect
+                label={t('aiSettings.frequency')}
+                description={t('aiSettings.frequencyDesc')}
+                value={settings.memoryEchoFrequency}
+                options={[
+                  { value: 'daily', label: t('aiSettings.frequencyDaily') },
+                  { value: 'weekly', label: t('aiSettings.frequencyWeekly') },
+                  { value: 'custom', label: 'Custom' },
+                ]}
+                onChange={handleFrequencyChange}
+              />
+            )}
+          </SettingsSection>
+
+          {/* Demo Mode */}
+          <SettingsSection
+            title={t('demoMode.title')}
+            icon={<span className="text-2xl">🎭</span>}
+            description={t('demoMode.description')}
+          >
+            <SettingToggle
+              label={t('demoMode.title')}
+              description={t('demoMode.description')}
+              checked={settings.demoMode}
+              onChange={(checked) => handleToggle('demoMode', checked)}
+            />
+          </SettingsSection>
+        </main>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { auth } from '@/auth'
+import { redirect } from 'next/navigation'
+import { AISettingsPanel } from '@/components/ai/ai-settings-panel'
+import { getAISettings } from '@/app/actions/ai-settings'
+import { AISettingsHeader } from './ai-settings-header'
+
+export default async function AISettingsPage() {
+  const session = await auth()
+
+  if (!session?.user) {
+    redirect('/api/auth/signin')
+  }
+
+  const settings = await getAISettings()
+
+  return (
+    <div className="space-y-6">
+      <AISettingsHeader />
+      <AISettingsPanel initialSettings={settings} />
+    </div>
+  )
+}

memento-note/app/(main)/settings/appearance/appearance-form.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { SettingsSection, SettingSelect } from '@/components/settings'
+import { updateAISettings as updateAI } from '@/app/actions/ai-settings'
+import { updateUserSettings as updateUser } from '@/app/actions/user-settings'
+import { useLanguage } from '@/lib/i18n'
+
+interface AppearanceSettingsFormProps {
+    initialTheme: string
+    initialFontSize: string
+}
+
+export function AppearanceSettingsForm({ initialTheme, initialFontSize }: AppearanceSettingsFormProps) {
+    const router = useRouter()
+    const [theme, setTheme] = useState(initialTheme)
+    const [fontSize, setFontSize] = useState(initialFontSize)
+    const { t } = useLanguage()
+
+    const handleThemeChange = async (value: string) => {
+        setTheme(value)
+        localStorage.setItem('theme-preference', value)
+
+        // Instant visual update
+        const root = document.documentElement
+        root.removeAttribute('data-theme')
+        root.classList.remove('dark')
+
+        if (value === 'auto') {
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) root.classList.add('dark')
+        } else if (value === 'dark') {
+            root.classList.add('dark')
+        } else if (value === 'light') {
+            root.setAttribute('data-theme', 'light')
+        } else {
+            root.setAttribute('data-theme', value)
+            if (['midnight', 'blue', 'sepia'].includes(value)) root.classList.add('dark')
+        }
+
+        // Save to DB (no need for router.refresh - localStorage handles immediate visuals)
+        await updateUser({ theme: value as 'light' | 'dark' | 'auto' | 'sepia' | 'midnight' | 'blue' })
+    }
+
+    const handleFontSizeChange = async (value: string) => {
+        setFontSize(value)
+
+        // Instant visual update
+        const fontSizeMap: Record<string, string> = {
+            'small': '14px', 'medium': '16px', 'large': '18px', 'extra-large': '20px'
+        }
+        const root = document.documentElement
+        root.style.setProperty('--user-font-size', fontSizeMap[value] || '16px')
+
+        await updateAI({ fontSize: value as any })
+    }
+
+    return (
+        <div className="space-y-6">
+            <div>
+                <h1 className="text-3xl font-bold mb-2">{t('appearance.title')}</h1>
+                <p className="text-gray-600 dark:text-gray-400">
+                    {t('appearance.description')}
+                </p>
+            </div>
+
+            <SettingsSection
+                title={t('settings.theme')}
+                icon={<span className="text-2xl">🎨</span>}
+                description={t('settings.themeLight') + ' / ' + t('settings.themeDark')}
+            >
+                <SettingSelect
+                    label={t('settings.theme')}
+                    description={t('settings.selectLanguage')}
+                    value={theme}
+                    options={[
+                        { value: 'slate', label: t('settings.themeLight') },
+                        { value: 'dark', label: t('settings.themeDark') },
+                        { value: 'sepia', label: 'Sepia' },
+                        { value: 'midnight', label: 'Midnight' },
+                        { value: 'blue', label: 'Blue' },
+                        { value: 'auto', label: t('settings.themeSystem') },
+                    ]}
+                    onChange={handleThemeChange}
+                />
+            </SettingsSection>
+
+            <SettingsSection
+                title={t('profile.fontSize')}
+                icon={<span className="text-2xl">📝</span>}
+                description={t('profile.fontSizeDescription')}
+            >
+                <SettingSelect
+                    label={t('profile.fontSize')}
+                    description={t('profile.selectFontSize')}
+                    value={fontSize}
+                    options={[
+                        { value: 'small', label: t('profile.fontSizeSmall') },
+                        { value: 'medium', label: t('profile.fontSizeMedium') },
+                        { value: 'large', label: t('profile.fontSizeLarge') },
+                    ]}
+                    onChange={handleFontSizeChange}
+                />
+            </SettingsSection>
+        </div>
+    )
+}

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

@@ -0,0 +1,113 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { SettingsNav, SettingsSection, SettingSelect } from '@/components/settings'
+import { updateAISettings, getAISettings } from '@/app/actions/ai-settings'
+import { updateUserSettings, getUserSettings } from '@/app/actions/user-settings'
+import { useLanguage } from '@/lib/i18n'
+
+export default function AppearanceSettingsPage() {
+  const { t } = useLanguage()
+  const [theme, setTheme] = useState('auto')
+  const [fontSize, setFontSize] = useState('medium')
+
+  // Load settings on mount
+  useEffect(() => {
+    async function loadSettings() {
+      try {
+        const [aiSettings, userSettings] = await Promise.all([
+          getAISettings(),
+          getUserSettings()
+        ])
+        if (aiSettings.fontSize) setFontSize(aiSettings.fontSize)
+        if (userSettings.theme) setTheme(userSettings.theme)
+      } catch (error) {
+        console.error('Error loading settings:', error)
+      }
+    }
+    loadSettings()
+  }, [])
+
+  const handleThemeChange = async (value: string) => {
+    setTheme(value)
+    localStorage.setItem('theme-preference', value)
+
+    // Instant visual update
+    const root = document.documentElement
+    root.removeAttribute('data-theme')
+    root.classList.remove('dark')
+
+    if (value === 'auto') {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) root.classList.add('dark')
+    } else if (value === 'dark') {
+      root.classList.add('dark')
+    } else {
+      root.setAttribute('data-theme', value)
+      if (['midnight'].includes(value)) root.classList.add('dark')
+    }
+
+    await updateUserSettings({ theme: value as 'light' | 'dark' | 'auto' })
+  }
+
+  const handleFontSizeChange = async (value: string) => {
+    setFontSize(value)
+
+    // Instant visual update
+    const fontSizeMap: Record<string, string> = {
+      'small': '14px', 'medium': '16px', 'large': '18px', 'extra-large': '20px'
+    }
+    const root = document.documentElement
+    root.style.setProperty('--user-font-size', fontSizeMap[value] || '16px')
+
+    await updateAISettings({ fontSize: value as any })
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">{t('appearance.title')}</h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          {t('appearance.description')}
+        </p>
+      </div>
+
+      <SettingsSection
+        title={t('settings.theme')}
+        icon={<span className="text-2xl">🎨</span>}
+        description={t('settings.themeLight') + ' / ' + t('settings.themeDark')}
+      >
+        <SettingSelect
+          label={t('settings.theme')}
+          description={t('settings.selectLanguage')}
+          value={theme}
+          options={[
+            { value: 'light', label: t('settings.themeLight') },
+            { value: 'dark', label: t('settings.themeDark') },
+            { value: 'sepia', label: 'Sepia' },
+            { value: 'midnight', label: 'Midnight' },
+            { value: 'auto', label: t('settings.themeSystem') },
+          ]}
+          onChange={handleThemeChange}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        title={t('profile.fontSize')}
+        icon={<span className="text-2xl">📝</span>}
+        description={t('profile.fontSizeDescription')}
+      >
+        <SettingSelect
+          label={t('profile.fontSize')}
+          description={t('profile.selectFontSize')}
+          value={fontSize}
+          options={[
+            { value: 'small', label: t('profile.fontSizeSmall') },
+            { value: 'medium', label: t('profile.fontSizeMedium') },
+            { value: 'large', label: t('profile.fontSizeLarge') },
+          ]}
+          onChange={handleFontSizeChange}
+        />
+      </SettingsSection>
+    </div>
+  )
+}

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

@@ -0,0 +1,189 @@
+'use client'
+
+import { useState } from 'react'
+import { SettingsSection } from '@/components/settings'
+import { Button } from '@/components/ui/button'
+import { Download, Upload, Trash2, Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+
+export default function DataSettingsPage() {
+  const { t } = useLanguage()
+  const [isExporting, setIsExporting] = useState(false)
+  const [isImporting, setIsImporting] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  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 = `memento-export-${new Date().toISOString().split('T')[0]}.json`
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        toast.success(t('dataManagement.export.success'))
+      }
+    } catch (error) {
+      console.error('Export error:', error)
+      toast.error(t('dataManagement.export.failed'))
+    } 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(t('dataManagement.import.success', { count: result.count }))
+        window.location.reload()
+      } else {
+        throw new Error('Import failed')
+      }
+    } catch (error) {
+      console.error('Import error:', error)
+      toast.error(t('dataManagement.import.failed'))
+    } finally {
+      setIsImporting(false)
+      event.target.value = ''
+    }
+  }
+
+  const handleDeleteAll = async () => {
+    if (!confirm(t('dataManagement.delete.confirm'))) {
+      return
+    }
+
+    setIsDeleting(true)
+    try {
+      const response = await fetch('/api/notes/delete-all', { method: 'POST' })
+      if (response.ok) {
+        toast.success(t('dataManagement.delete.success'))
+        window.location.reload()
+      }
+    } catch (error) {
+      console.error('Delete error:', error)
+      toast.error(t('dataManagement.delete.failed'))
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">{t('dataManagement.title')}</h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          {t('dataManagement.toolsDescription')}
+        </p>
+      </div>
+
+      <SettingsSection
+        title={`💾 ${t('dataManagement.export.title')}`}
+        icon={<span className="text-2xl">💾</span>}
+        description={t('dataManagement.export.description')}
+      >
+        <div className="flex items-center justify-between py-4">
+          <div>
+            <p className="font-medium">{t('dataManagement.export.title')}</p>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              {t('dataManagement.export.description')}
+            </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 ? t('dataManagement.exporting') : t('dataManagement.export.button')}
+          </Button>
+        </div>
+      </SettingsSection>
+
+      <SettingsSection
+        title={`📥 ${t('dataManagement.import.title')}`}
+        icon={<span className="text-2xl">📥</span>}
+        description={t('dataManagement.import.description')}
+      >
+        <div className="flex items-center justify-between py-4">
+          <div>
+            <p className="font-medium">{t('dataManagement.import.title')}</p>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              {t('dataManagement.import.description')}
+            </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 ? t('dataManagement.importing') : t('dataManagement.import.button')}
+            </Button>
+          </div>
+        </div>
+      </SettingsSection>
+
+      <SettingsSection
+        title={`⚠️ ${t('dataManagement.dangerZone')}`}
+        icon={<span className="text-2xl">⚠️</span>}
+        description={t('dataManagement.dangerZoneDescription')}
+      >
+        <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">{t('dataManagement.delete.title')}</p>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              {t('dataManagement.delete.description')}
+            </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 ? t('dataManagement.deleting') : t('dataManagement.delete.button')}
+          </Button>
+        </div>
+      </SettingsSection>
+    </div>
+  )
+}

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

@@ -0,0 +1,140 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { SettingsNav, SettingsSection, SettingToggle, SettingSelect } from '@/components/settings'
+import { useLanguage } from '@/lib/i18n'
+import { updateAISettings, getAISettings } from '@/app/actions/ai-settings'
+import { toast } from 'sonner'
+
+export default function GeneralSettingsPage() {
+  const { t, setLanguage: setContextLanguage } = useLanguage()
+  const [language, setLanguage] = useState('auto')
+  const [emailNotifications, setEmailNotifications] = useState(false)
+  const [desktopNotifications, setDesktopNotifications] = useState(false)
+  const [anonymousAnalytics, setAnonymousAnalytics] = useState(false)
+
+  // Load settings on mount
+  useEffect(() => {
+    async function loadSettings() {
+      try {
+        const settings = await getAISettings()
+        if (settings.preferredLanguage) setLanguage(settings.preferredLanguage)
+        if (settings.emailNotifications !== undefined) setEmailNotifications(settings.emailNotifications)
+        if (settings.desktopNotifications !== undefined) setDesktopNotifications(settings.desktopNotifications)
+        if (settings.anonymousAnalytics !== undefined) setAnonymousAnalytics(settings.anonymousAnalytics)
+      } catch (error) {
+        console.error('Error loading settings:', error)
+      }
+    }
+    loadSettings()
+  }, [])
+
+  const handleLanguageChange = async (value: string) => {
+    setLanguage(value)
+
+    // 1. Update database settings
+    await updateAISettings({ preferredLanguage: value as any })
+
+    // 2. Update local storage and application state
+    if (value === 'auto') {
+      localStorage.removeItem('user-language')
+      toast.success("Language set to Auto")
+    } else {
+      localStorage.setItem('user-language', value)
+      setContextLanguage(value as any)
+      toast.success(t('profile.languageUpdateSuccess') || "Language updated")
+    }
+
+    // 3. Force reload to ensure all components update (server components, metadata, etc.)
+    setTimeout(() => window.location.reload(), 500)
+  }
+
+  const handleEmailNotificationsChange = async (enabled: boolean) => {
+    setEmailNotifications(enabled)
+    await updateAISettings({ emailNotifications: enabled })
+  }
+
+  const handleDesktopNotificationsChange = async (enabled: boolean) => {
+    setDesktopNotifications(enabled)
+    await updateAISettings({ desktopNotifications: enabled })
+  }
+
+  const handleAnonymousAnalyticsChange = async (enabled: boolean) => {
+    setAnonymousAnalytics(enabled)
+    await updateAISettings({ anonymousAnalytics: enabled })
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">{t('generalSettings.title')}</h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          {t('generalSettings.description')}
+        </p>
+      </div>
+
+      <SettingsSection
+        title={t('settings.language')}
+        icon={<span className="text-2xl">🌍</span>}
+        description={t('profile.languagePreferencesDescription')}
+      >
+        <SettingSelect
+          label={t('settings.language')}
+          description={t('settings.selectLanguage')}
+          value={language}
+          options={[
+            { value: 'auto', label: t('profile.autoDetect') },
+            { 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={t('settings.notifications')}
+        icon={<span className="text-2xl">🔔</span>}
+        description={t('settings.notifications')}
+      >
+        <SettingToggle
+          label={t('settings.notifications')}
+          description={t('settings.notifications')}
+          checked={emailNotifications}
+          onChange={handleEmailNotificationsChange}
+        />
+        <SettingToggle
+          label={t('settings.notifications')}
+          description={t('settings.notifications')}
+          checked={desktopNotifications}
+          onChange={handleDesktopNotificationsChange}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        title={t('settings.privacy')}
+        icon={<span className="text-2xl">🔒</span>}
+        description={t('settings.privacy')}
+      >
+        <SettingToggle
+          label={t('settings.privacy')}
+          description={t('settings.privacy')}
+          checked={anonymousAnalytics}
+          onChange={handleAnonymousAnalyticsChange}
+        />
+      </SettingsSection>
+    </div>
+  )
+}

memento-note/app/(main)/settings/layout.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { SettingsNav } from '@/components/settings'
+
+export default function SettingsLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    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">
+                    {children}
+                </main>
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,213 @@
+'use client'
+
+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 { 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)
+    try {
+      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)
+      } else {
+        setStatus('error')
+        setResult(data)
+      }
+    } catch (error: any) {
+      console.error(error)
+      setStatus('error')
+      setResult({ message: error.message, stack: error.stack })
+    } finally {
+      setLoading(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 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="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">{t('settings.title')}</h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          {t('settings.description')}
+        </p>
+      </div>
+
+      {/* 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">{t('aiSettings.title')}</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              {t('aiSettings.description')}
+            </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-primary mb-2" />
+            <h3 className="font-semibold">{t('profile.title')}</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              {t('profile.description')}
+            </p>
+          </div>
+        </Link>
+      </div>
+
+      {/* AI Diagnostics */}
+      <SettingsSection
+        title={t('diagnostics.title')}
+        icon={<span className="text-2xl">🔍</span>}
+        description={t('diagnostics.description')}
+      >
+        <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">{t('diagnostics.configuredProvider')}</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">{t('diagnostics.apiStatus')}</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' ? t('diagnostics.operational') :
+                  status === 'error' ? t('diagnostics.errorStatus') :
+                    t('diagnostics.checking')}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {result && (
+          <div className="space-y-2 mt-4">
+            <h3 className="text-sm font-medium">{t('diagnostics.testDetails')}</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">{t('diagnostics.troubleshootingTitle')}</p>
+                <ul className="list-disc list-inside mt-1 space-y-1">
+                  <li>{t('diagnostics.tip1')}</li>
+                  <li>{t('diagnostics.tip2')}</li>
+                  <li>{t('diagnostics.tip3')}</li>
+                  <li>{t('diagnostics.tip4')}</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" />}
+            {t('general.testConnection')}
+          </Button>
+        </div>
+      </SettingsSection>
+
+      {/* Maintenance */}
+      <SettingsSection
+        title={t('settings.maintenance')}
+        icon={<span className="text-2xl">🔧</span>}
+        description={t('settings.maintenanceDescription')}
+      >
+        <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">
+                {t('settings.cleanTags')}
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {t('settings.cleanTagsDescription')}
+              </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" />}
+              {t('general.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">
+                {t('settings.semanticIndexing')}
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {t('settings.semanticIndexingDescription')}
+              </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" />}
+              {t('general.indexAll')}
+            </Button>
+          </div>
+        </div>
+      </SettingsSection>
+    </div>
+  )
+
+}

memento-note/app/(main)/settings/profile/ai-settings-link-card.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { ArrowRight, Sparkles } from 'lucide-react'
+import Link from 'next/link'
+import { useLanguage } from '@/lib/i18n'
+
+export function AISettingsLinkCard() {
+  const { t } = useLanguage()
+
+  return (
+    <Card className="mt-6">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Sparkles className="h-5 w-5 text-amber-500" />
+          {t('nav.aiSettings')}
+        </CardTitle>
+        <CardDescription>
+          {t('nav.configureAI')}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Link href="/settings/ai">
+          <Button variant="outline" className="w-full justify-between group">
+            <span>{t('nav.manageAISettings')}</span>
+            <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
+          </Button>
+        </Link>
+      </CardContent>
+    </Card>
+  )
+}

memento-note/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
+
+  }
+
+  const handleEmailChange = async (value: string) => {
+    setUser(prev => ({ ...prev, email: value }))
+    // TODO: Implement email update
+
+  }
+
+  const handleLanguageChange = async (value: string) => {
+    setLanguage(value)
+    try {
+      await updateAISettings({ preferredLanguage: value as any })
+    } catch (error) {
+      console.error('Error updating language:', error)
+      toast.error(t('aiSettings.error'))
+    }
+  }
+
+  const handleRecentNotesChange = async (enabled: boolean) => {
+    setShowRecentNotes(enabled)
+    try {
+      await updateAISettings({ showRecentNotes: enabled })
+    } catch (error) {
+      console.error('Error updating recent notes setting:', error)
+      toast.error(t('aiSettings.error'))
+    }
+  }
+
+  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">{t('profile.title')}</h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              {t('profile.description')}
+            </p>
+          </div>
+
+          {/* Profile Information */}
+          <SettingsSection
+            title={t('profile.accountSettings')}
+            icon={<span className="text-2xl">👤</span>}
+            description={t('profile.description')}
+          >
+            <SettingInput
+              label={t('profile.displayName')}
+              description={t('profile.displayName')}
+              value={user.name}
+              onChange={handleNameChange}
+              placeholder={t('auth.namePlaceholder')}
+            />
+
+            <SettingInput
+              label={t('profile.email')}
+              description={t('profile.email')}
+              value={user.email}
+              type="email"
+              onChange={handleEmailChange}
+              placeholder={t('auth.emailPlaceholder')}
+            />
+          </SettingsSection>
+
+          {/* Preferences */}
+          <SettingsSection
+            title={t('settings.language')}
+            icon={<span className="text-2xl">⚙️</span>}
+            description={t('profile.languagePreferencesDescription')}
+          >
+            <SettingSelect
+              label={t('profile.preferredLanguage')}
+              description={t('profile.languageDescription')}
+              value={language}
+              options={[
+                { value: 'auto', label: t('profile.autoDetect') },
+                { 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={t('profile.showRecentNotes')}
+              description={t('profile.showRecentNotesDescription')}
+              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">{t('aiSettings.title')}</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  {t('aiSettings.description')}
+                </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"
+              >
+                {t('nav.configureAI')}
+              </button>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,52 @@
+import { auth } from '@/auth'
+import { redirect } from 'next/navigation'
+import { ProfileForm } from './profile-form'
+import prisma from '@/lib/prisma'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Sparkles } from 'lucide-react'
+import { ProfilePageHeader } from '@/components/profile-page-header'
+import { AISettingsLinkCard } from './ai-settings-link-card'
+
+export default async function ProfilePage() {
+  const session = await auth()
+
+  if (!session?.user?.id) {
+    redirect('/login')
+  }
+
+  const user = await prisma.user.findUnique({
+    where: { id: session.user.id },
+    select: { name: true, email: true, role: true }
+  })
+
+  if (!user) {
+    redirect('/login')
+  }
+
+  // Get user AI settings
+  let userAISettings = { preferredLanguage: 'auto', showRecentNotes: false }
+  try {
+    const aiSettings = await prisma.userAISettings.findUnique({
+      where: { userId: session.user.id }
+    })
+
+    if (aiSettings) {
+      userAISettings = {
+        preferredLanguage: aiSettings.preferredLanguage || 'auto',
+        showRecentNotes: aiSettings.showRecentNotes ?? false
+      }
+    }
+  } catch (error) {
+    console.error('Error fetching AI settings:', error)
+  }
+
+  return (
+    <div className="max-w-2xl">
+      <ProfilePageHeader />
+      <ProfileForm user={user} userAISettings={userAISettings} />
+
+      {/* AI Settings Link */}
+      <AISettingsLinkCard />
+    </div>
+  )
+}

memento-note/app/(main)/settings/profile/profile-form.tsx

@@ -0,0 +1,179 @@
+'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 { updateProfile, changePassword, updateFontSize, updateShowRecentNotes } from '@/app/actions/profile'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+
+
+
+export function ProfileForm({ user, userAISettings }: { user: any; userAISettings?: any }) {
+  const router = useRouter()
+
+  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 = [
+    { value: 'small', label: t('profile.fontSizeSmall'), size: '14px' },
+    { value: 'medium', label: t('profile.fontSizeMedium'), size: '16px' },
+    { value: 'large', label: t('profile.fontSizeLarge'), size: '18px' },
+    { value: 'extra-large', label: t('profile.fontSizeExtraLarge'), size: '20px' },
+  ]
+
+  const handleFontSizeChange = async (size: string) => {
+    setIsUpdatingFontSize(true)
+    try {
+      const result = await updateFontSize(size)
+      if (result?.error) {
+        toast.error(t('profile.fontSizeUpdateFailed'))
+      } else {
+        setFontSize(size)
+        // Apply font size immediately
+        applyFontSize(size)
+        toast.success(t('profile.fontSizeUpdateSuccess'))
+      }
+    } catch (error) {
+      toast.error(t('profile.fontSizeUpdateFailed'))
+    } finally {
+      setIsUpdatingFontSize(false)
+    }
+  }
+
+  const applyFontSize = (size: string) => {
+    // Base font size in pixels (16px is standard)
+    const fontSizeMap = {
+      'small': '14px',    // ~87% of 16px
+      'medium': '16px',   // 100% (standard)
+      'large': '18px',    // ~112% of 16px
+      'extra-large': '20px' // 125% of 16px
+    }
+    const fontSizeFactorMap = {
+      'small': 0.95,
+      'medium': 1.0,
+      'large': 1.1,
+      'extra-large': 1.25
+    }
+    const fontSizeValue = fontSizeMap[size as keyof typeof fontSizeMap] || '16px'
+    const fontSizeFactor = fontSizeFactorMap[size as keyof typeof fontSizeFactorMap] || 1.0
+
+    document.documentElement.style.setProperty('--user-font-size', fontSizeValue)
+    document.documentElement.style.setProperty('--user-font-size-factor', fontSizeFactor.toString())
+    localStorage.setItem('user-font-size', size)
+  }
+
+  // Apply saved font size on mount
+  useEffect(() => {
+    const savedFontSize = localStorage.getItem('user-font-size') || userAISettings?.fontSize || 'medium'
+    applyFontSize(savedFontSize as string)
+  }, [])
+
+
+
+  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>
+        <CardHeader>
+          <CardTitle>{t('profile.title')}</CardTitle>
+          <CardDescription>{t('profile.description')}</CardDescription>
+        </CardHeader>
+        <form action={async (formData) => {
+          const result = await updateProfile({ name: formData.get('name') as string })
+          if (result?.error) {
+            toast.error(t('profile.updateFailed'))
+          } else {
+            toast.success(t('profile.updateSuccess'))
+          }
+        }}>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <label htmlFor="name" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.displayName')}</label>
+              <Input id="name" name="name" defaultValue={user.name} />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.email')}</label>
+              <Input id="email" value={user.email} disabled className="bg-muted" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button type="submit">{t('general.save')}</Button>
+          </CardFooter>
+        </form>
+      </Card>
+
+
+
+
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('profile.changePassword')}</CardTitle>
+          <CardDescription>{t('profile.changePasswordDescription')}</CardDescription>
+        </CardHeader>
+        <form action={async (formData) => {
+          const result = await changePassword(formData)
+          if (result?.error) {
+            const msg = '_form' in result.error
+              ? result.error._form[0]
+              : result.error.currentPassword?.[0] || result.error.newPassword?.[0] || result.error.confirmPassword?.[0] || t('profile.passwordChangeFailed')
+            toast.error(msg)
+          } else {
+            toast.success(t('profile.passwordChangeSuccess'))
+            // Reset form manually or redirect
+            const form = document.querySelector('form#password-form') as HTMLFormElement
+            form?.reset()
+          }
+        }} id="password-form">
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <label htmlFor="currentPassword" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.currentPassword')}</label>
+              <Input id="currentPassword" name="currentPassword" type="password" required />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="newPassword" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.newPassword')}</label>
+              <Input id="newPassword" name="newPassword" type="password" required minLength={6} />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="confirmPassword" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.confirmPassword')}</label>
+              <Input id="confirmPassword" name="confirmPassword" type="password" required minLength={6} />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button type="submit">{t('profile.updatePassword')}</Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  )
+}

memento-note/app/(main)/support/page.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { useLanguage } from '@/lib/i18n';
+
+export default function SupportPage() {
+  const { t } = useLanguage();
+
+  return (
+    <div className="container mx-auto py-10 max-w-4xl">
+      <div className="text-center mb-10">
+        <h1 className="text-4xl font-bold mb-4">
+          {t('support.title')}
+        </h1>
+        <p className="text-muted-foreground text-lg">
+          {t('support.description')}
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 mb-10">
+        <Card className="border-2 border-primary">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <span className="text-2xl">☕</span>
+              {t('support.buyMeACoffee')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="mb-4">
+              {t('support.donationDescription')}
+            </p>
+            <Button asChild className="w-full">
+              <a href="https://ko-fi.com/yourusername" target="_blank" rel="noopener noreferrer">
+                {t('support.donateOnKofi')}
+              </a>
+            </Button>
+            <p className="text-xs text-muted-foreground mt-2">
+              {t('support.kofiDescription')}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-2 border-primary">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <span className="text-2xl">💚</span>
+              {t('support.sponsorOnGithub')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="mb-4">
+              {t('support.sponsorDescription')}
+            </p>
+            <Button asChild variant="outline" className="w-full">
+              <a href="https://github.com/sponsors/yourusername" target="_blank" rel="noopener noreferrer">
+                {t('support.sponsorOnGithub')}
+              </a>
+            </Button>
+            <p className="text-xs text-muted-foreground mt-2">
+              {t('support.githubDescription')}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card className="mb-10">
+        <CardHeader>
+          <CardTitle>{t('support.howSupportHelps')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid md:grid-cols-2 gap-4">
+            <div>
+              <h3 className="font-semibold mb-2">💰 {t('support.directImpact')}</h3>
+              <ul className="space-y-2 text-sm">
+                <li>☕ Keeps me fueled with coffee</li>
+                <li>🐛 Covers hosting and server costs</li>
+                <li>✨ Funds development of new features</li>
+                <li>📚 Improves documentation</li>
+                <li>🌍 Keeps Memento 100% open-source</li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-2">🎁 {t('support.sponsorPerks')}</h3>
+              <ul className="space-y-2 text-sm">
+                <li>🥉 $5/month - Bronze: Name in supporters list</li>
+                <li>🥈 $15/month - Silver: Priority feature requests</li>
+                <li>🥇 $50/month - Gold: Logo in footer, priority support</li>
+                <li>💎 $100/month - Platinum: Custom features, consulting</li>
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>💡 {t('support.transparency')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm mb-4">
+            {t('support.transparencyDescription')}
+          </p>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span>{t('support.hostingServers')}</span>
+              <span className="font-mono">~$20/month</span>
+            </div>
+            <div className="flex justify-between">
+              <span>{t('support.domainSSL')}</span>
+              <span className="font-mono">~$15/year</span>
+            </div>
+            <div className="flex justify-between">
+              <span>{t('support.aiApiCosts')}</span>
+              <span className="font-mono">~$30/month</span>
+            </div>
+            <div className="flex justify-between border-t pt-2">
+              <span className="font-semibold">{t('support.totalExpenses')}</span>
+              <span className="font-mono font-semibold">~$50/month</span>
+            </div>
+          </div>
+          <p className="text-xs text-muted-foreground mt-4">
+            Any amount beyond these costs goes directly into improving Memento
+            and funding new features. Thank you for your support! 💚
+          </p>
+        </CardContent>
+      </Card>
+
+      <div className="mt-10 text-center">
+        <h2 className="text-2xl font-bold mb-4">{t('support.otherWaysTitle')}</h2>
+        <div className="flex flex-wrap justify-center gap-4">
+          <Button variant="outline" asChild>
+            <a href="https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
+              ⭐ {t('support.starGithub')}
+            </a>
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="https://github.com/yourusername/memento/issues" target="_blank" rel="noopener noreferrer">
+              🐛 {t('support.reportBug')}
+            </a>
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
+              📝 {t('support.contributeCode')}
+            </a>
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="https://twitter.com/intent/tweet?text=Check%20out%20Memento%20-%20a%20great%20open-source%20note-taking%20app!%20https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
+              🐦 {t('support.shareTwitter')}
+            </a>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

memento-note/app/(main)/trash/page.tsx

@@ -0,0 +1,28 @@
+import { Trash2 } from 'lucide-react'
+import { useLanguage } from '@/lib/i18n'
+
+export const dynamic = 'force-dynamic'
+
+export default function TrashPage() {
+    return (
+        <main className="container mx-auto px-4 py-8 max-w-7xl">
+            <TrashContent />
+        </main>
+    )
+}
+
+function TrashContent() {
+    const { t } = useLanguage()
+    
+    return (
+        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center text-gray-500">
+            <div className="bg-gray-100 dark:bg-gray-800 p-6 rounded-full mb-4">
+                <Trash2 className="w-12 h-12 text-gray-400" />
+            </div>
+            <h2 className="text-xl font-medium mb-2">{t('trash.empty')}</h2>
+            <p className="max-w-md text-sm opacity-80">
+                {t('trash.restore')}
+            </p>
+        </div>
+    )
+}