feat: RTL/i18n, AI translate+undo, no-refresh saves, settings perf

- RTL: force dir=rtl on LabelFilter, NotesViewToggle, LabelManagementDialog
- i18n: add missing keys (notifications, privacy, edit/preview, AI translate/undo)
- Settings pages: convert to Server Components (general, appearance) + loading skeleton
- AI menu: add Translate option (10 languages) + Undo AI button in toolbar
- Fix: saveInline uses REST API instead of Server Action → eliminates all implicit refreshes in list mode
- Fix: NotesTabsView notes sync effect preserves selected note on content changes
- Fix: auto-tag suggestions now filter already-assigned labels
- Fix: color change in card view uses local state (no refresh)
- Fix: nav links use <Link> for prefetching (Settings, Admin)
- Fix: suppress duplicate label suggestions already on note
- Route: add /api/ai/translate endpoint

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

@@ -1,113 +1,25 @@
-'use client'
+import { auth } from '@/auth'
+import { redirect } from 'next/navigation'
+import { getAISettings } from '@/app/actions/ai-settings'
+import { getUserSettings } from '@/app/actions/user-settings'
+import { AppearanceSettingsClient } from './appearance-settings-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' })
+export default async function AppearanceSettingsPage() {
+  const session = await auth()
+  if (!session?.user) {
+    redirect('/api/auth/signin')
   }
 
-  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 })
-  }
+  const [aiSettings, userSettings] = await Promise.all([
+    getAISettings(),
+    getUserSettings()
+  ])
 
   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>
+    <AppearanceSettingsClient
+      initialFontSize={aiSettings.fontSize}
+      initialTheme={userSettings.theme}
+      initialNotesViewMode={aiSettings.notesViewMode === 'masonry' ? 'masonry' : 'tabs'}
+    />
   )
 }