feat(ai): localize AI features

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

@@ -3,9 +3,9 @@
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { SettingsSection, SettingSelect } from '@/components/settings'
-// Import actions directly
 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
@@ -16,6 +16,7 @@ export function AppearanceSettingsForm({ initialTheme, initialFontSize }: Appear
     const router = useRouter()
     const [theme, setTheme] = useState(initialTheme)
     const [fontSize, setFontSize] = useState(initialFontSize)
+    const { t } = useLanguage()
 
     const handleThemeChange = async (value: string) => {
         setTheme(value)
@@ -57,46 +58,46 @@ export function AppearanceSettingsForm({ initialTheme, initialFontSize }: Appear
     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: 'slate', label: 'Light' },
-                        { value: 'dark', label: 'Dark' },
+                        { 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: '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}
                 />