feat(ai): localize AI features

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

@@ -1,127 +1,129 @@
 'use client'
 
-import { SettingsNav, SettingsSection } from '@/components/settings'
+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">About</h1>
+        <h1 className="text-3xl font-bold mb-2">{t('about.title')}</h1>
         <p className="text-gray-600 dark:text-gray-400">
-          Information about the application
+          {t('about.description')}
         </p>
       </div>
 
       <SettingsSection
-        title="Keep Notes"
+        title={t('about.appName')}
         icon={<span className="text-2xl">📝</span>}
-        description="A powerful note-taking application with AI-powered features"
+        description={t('about.appDescription')}
       >
         <Card>
           <CardContent className="pt-6 space-y-4">
             <div className="flex justify-between items-center">
-              <span className="font-medium">Version</span>
+              <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">Build Date</span>
+              <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">Platform</span>
-              <Badge variant="outline">Web</Badge>
+              <span className="font-medium">{t('about.platform')}</span>
+              <Badge variant="outline">{t('about.platformWeb')}</Badge>
             </div>
           </CardContent>
         </Card>
       </SettingsSection>
 
       <SettingsSection
-        title="Features"
+        title={t('about.features.title')}
         icon={<span className="text-2xl">✨</span>}
-        description="AI-powered capabilities"
+        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>AI-powered title suggestions</span>
+              <span>{t('about.features.titleSuggestions')}</span>
             </div>
             <div className="flex items-center gap-2">
               <span className="text-green-500">✓</span>
-              <span>Semantic search with embeddings</span>
+              <span>{t('about.features.semanticSearch')}</span>
             </div>
             <div className="flex items-center gap-2">
               <span className="text-green-500">✓</span>
-              <span>Paragraph reformulation</span>
+              <span>{t('about.features.paragraphReformulation')}</span>
             </div>
             <div className="flex items-center gap-2">
               <span className="text-green-500">✓</span>
-              <span>Memory Echo daily insights</span>
+              <span>{t('about.features.memoryEcho')}</span>
             </div>
             <div className="flex items-center gap-2">
               <span className="text-green-500">✓</span>
-              <span>Notebook organization</span>
+              <span>{t('about.features.notebookOrganization')}</span>
             </div>
             <div className="flex items-center gap-2">
               <span className="text-green-500">✓</span>
-              <span>Drag & drop note management</span>
+              <span>{t('about.features.dragDrop')}</span>
             </div>
             <div className="flex items-center gap-2">
               <span className="text-green-500">✓</span>
-              <span>Label system</span>
+              <span>{t('about.features.labelSystem')}</span>
             </div>
             <div className="flex items-center gap-2">
               <span className="text-green-500">✓</span>
-              <span>Multiple AI providers (OpenAI, Ollama)</span>
+              <span>{t('about.features.multipleProviders')}</span>
             </div>
           </CardContent>
         </Card>
       </SettingsSection>
 
       <SettingsSection
-        title="Technology Stack"
+        title={t('about.technology.title')}
         icon={<span className="text-2xl">⚙️</span>}
-        description="Built with modern technologies"
+        description={t('about.technology.description')}
       >
         <Card>
           <CardContent className="pt-6 space-y-2 text-sm">
-            <div><strong>Frontend:</strong> Next.js 16, React 19, TypeScript</div>
-            <div><strong>Backend:</strong> Next.js API Routes, Server Actions</div>
-            <div><strong>Database:</strong> SQLite (Prisma ORM)</div>
-            <div><strong>Authentication:</strong> NextAuth 5</div>
-            <div><strong>AI:</strong> Vercel AI SDK, OpenAI, Ollama</div>
-            <div><strong>UI:</strong> Radix UI, Tailwind CSS, Lucide Icons</div>
-            <div><strong>Testing:</strong> Playwright (E2E)</div>
+            <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="Support"
+        title={t('about.support.title')}
         icon={<span className="text-2xl">💬</span>}
-        description="Get help and feedback"
+        description={t('about.support.description')}
       >
         <Card>
           <CardContent className="pt-6 space-y-4">
             <div>
-              <p className="font-medium mb-2">Documentation</p>
+              <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">Report Issues</p>
+              <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">Feedback</p>
+              <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>