feat(ai): localize AI features

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

@@ -81,9 +81,9 @@ export default function SettingsPage() {
 
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold mb-2">Settings</h1>
+        <h1 className="text-3xl font-bold mb-2">{t('settings.title')}</h1>
         <p className="text-gray-600 dark:text-gray-400">
-          Configure your application settings
+          {t('settings.description')}
         </p>
       </div>
 
@@ -92,18 +92,18 @@ export default function SettingsPage() {
         <Link href="/settings/ai">
           <div className="p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer">
             <BrainCircuit className="h-6 w-6 text-purple-500 mb-2" />
-            <h3 className="font-semibold">AI Settings</h3>
+            <h3 className="font-semibold">{t('aiSettings.title')}</h3>
             <p className="text-sm text-gray-600 dark:text-gray-400">
-              Configure AI features and provider
+              {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">Profile Settings</h3>
+            <h3 className="font-semibold">{t('profile.title')}</h3>
             <p className="text-sm text-gray-600 dark:text-gray-400">
-              Manage your account and preferences
+              {t('profile.description')}
             </p>
           </div>
         </Link>
@@ -111,17 +111,17 @@ export default function SettingsPage() {
 
       {/* AI Diagnostics */}
       <SettingsSection
-        title="AI Diagnostics"
+        title={t('diagnostics.title')}
         icon={<span className="text-2xl">🔍</span>}
-        description="Check your AI provider connection status"
+        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">Configured Provider</p>
+            <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">API Status</p>
+            <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" />}
@@ -129,9 +129,9 @@ export default function SettingsPage() {
                 status === 'error' ? 'text-red-600 dark:text-red-400' :
                   'text-gray-600'
                 }`}>
-                {status === 'success' ? 'Operational' :
-                  status === 'error' ? 'Error' :
-                    'Checking...'}
+                {status === 'success' ? t('diagnostics.operational') :
+                  status === 'error' ? t('diagnostics.errorStatus') :
+                    t('diagnostics.checking')}
               </span>
             </div>
           </div>
@@ -139,7 +139,7 @@ export default function SettingsPage() {
 
         {result && (
           <div className="space-y-2 mt-4">
-            <h3 className="text-sm font-medium">Test Details:</h3>
+            <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'
@@ -149,12 +149,12 @@ export default function SettingsPage() {
 
             {status === 'error' && (
               <div className="text-sm text-red-600 dark:text-red-400 mt-2">
-                <p className="font-bold">Troubleshooting Tips:</p>
+                <p className="font-bold">{t('diagnostics.troubleshootingTitle')}</p>
                 <ul className="list-disc list-inside mt-1 space-y-1">
-                  <li>Check that Ollama is running (<code className="bg-red-100 dark:bg-red-900 px-1 rounded">ollama list</code>)</li>
-                  <li>Check URL (http://localhost:11434)</li>
-                  <li>Verify model (e.g., granite4:latest) is downloaded</li>
-                  <li>Check Next.js server terminal for more logs</li>
+                  <li>{t('diagnostics.tip1')}</li>
+                  <li>{t('diagnostics.tip2')}</li>
+                  <li>{t('diagnostics.tip3')}</li>
+                  <li>{t('diagnostics.tip4')}</li>
                 </ul>
               </div>
             )}
@@ -164,45 +164,45 @@ export default function SettingsPage() {
         <div className="mt-4 flex justify-end">
           <Button variant="outline" size="sm" onClick={checkConnection} disabled={loading}>
             {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <RefreshCw className="w-4 h-4 mr-2" />}
-            Test Connection
+            {t('general.testConnection')}
           </Button>
         </div>
       </SettingsSection>
 
       {/* Maintenance */}
       <SettingsSection
-        title="Maintenance"
+        title={t('settings.maintenance')}
         icon={<span className="text-2xl">🔧</span>}
-        description="Tools to maintain your database health"
+        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">
-                Clean Orphan Tags
+                {t('settings.cleanTags')}
               </h3>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                Remove tags that are no longer used by any notes
+                {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" />}
-              Clean
+              {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">
-                Semantic Indexing
+                {t('settings.semanticIndexing')}
               </h3>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                Generate vectors for all notes to enable intent-based search
+                {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" />}
-              Index All
+              {t('general.indexAll')}
             </Button>
           </div>
         </div>