feat(ai): localize AI features

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

@@ -4,8 +4,10 @@ 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')
 
@@ -63,45 +65,45 @@ export default function AppearanceSettingsPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold mb-2">Appearance</h1>
+        <h1 className="text-3xl font-bold mb-2">{t('appearance.title')}</h1>
         <p className="text-gray-600 dark:text-gray-400">
-          Customize look and feel of application
+          {t('appearance.description')}
         </p>
       </div>
 
       <SettingsSection
-        title="Theme"
+        title={t('settings.theme')}
         icon={<span className="text-2xl">🎨</span>}
-        description="Choose your preferred color scheme"
+        description={t('settings.themeLight') + ' / ' + t('settings.themeDark')}
       >
         <SettingSelect
-          label="Color Scheme"
-          description="Select app's visual theme"
+          label={t('settings.theme')}
+          description={t('settings.selectLanguage')}
           value={theme}
           options={[
-            { value: 'light', label: 'Light' },
-            { value: 'dark', label: 'Dark' },
+            { value: 'light', label: t('settings.themeLight') },
+            { value: 'dark', label: t('settings.themeDark') },
             { value: 'sepia', label: 'Sepia' },
             { value: 'midnight', label: 'Midnight' },
-            { value: 'auto', label: 'Auto (system)' },
+            { value: 'auto', label: t('settings.themeSystem') },
           ]}
           onChange={handleThemeChange}
         />
       </SettingsSection>
 
       <SettingsSection
-        title="Typography"
+        title={t('profile.fontSize')}
         icon={<span className="text-2xl">📝</span>}
-        description="Adjust text size for better readability"
+        description={t('profile.fontSizeDescription')}
       >
         <SettingSelect
-          label="Font Size"
-          description="Adjust size of text throughout app"
+          label={t('profile.fontSize')}
+          description={t('profile.selectFontSize')}
           value={fontSize}
           options={[
-            { value: 'small', label: 'Small' },
-            { value: 'medium', label: 'Medium' },
-            { value: 'large', label: 'Large' },
+            { value: 'small', label: t('profile.fontSizeSmall') },
+            { value: 'medium', label: t('profile.fontSizeMedium') },
+            { value: 'large', label: t('profile.fontSizeLarge') },
           ]}
           onChange={handleFontSizeChange}
         />