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
2026-04-15 23:48:28 +02:00
parent 39671c6472
commit b6a548acd8
68 changed files with 5014 additions and 485 deletions
--- a/keep-notes/app/(main)/layout.tsx
+++ b/keep-notes/app/(main)/layout.tsx
@@ -24,7 +24,7 @@ export default async function MainLayout({
          <Sidebar className="w-64 flex-none flex-col bg-white dark:bg-[#1e2128] border-r border-slate-200 dark:border-slate-800 overflow-y-auto hidden md:flex" user={session?.user} />

          {/* Main Content Area */}
-          <main className="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-4 scroll-smooth">
+          <main className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-background-light dark:bg-background-dark p-4 scroll-smooth">
            {children}
          </main>
        </div>
--- a/keep-notes/app/(main)/page.tsx
+++ b/keep-notes/app/(main)/page.tsx
@@ -6,7 +6,8 @@ import { Note } from '@/lib/types'
 import { getAllNotes, searchNotes } from '@/app/actions/notes'
 import { getAISettings } from '@/app/actions/ai-settings'
 import { NoteInput } from '@/components/note-input'
-import { MasonryGrid } from '@/components/masonry-grid'
+import { NotesMainSection, type NotesViewMode } from '@/components/notes-main-section'
+import { NotesViewToggle } from '@/components/notes-view-toggle'
 import { MemoryEchoNotification } from '@/components/memory-echo-notification'
 import { NotebookSuggestionToast } from '@/components/notebook-suggestion-toast'
 import { NoteEditor } from '@/components/note-editor'
@@ -25,6 +26,7 @@ import { Folder, Briefcase, FileText, Zap, BarChart3, Globe, Sparkles, Book, Hea
 import { cn } from '@/lib/utils'
 import { LabelFilter } from '@/components/label-filter'
 import { useLanguage } from '@/lib/i18n'
+import { useHomeView } from '@/context/home-view-context'

 export default function HomePage() {

@@ -36,12 +38,14 @@ export default function HomePage() {
  const [pinnedNotes, setPinnedNotes] = useState<Note[]>([])
  const [recentNotes, setRecentNotes] = useState<Note[]>([])
  const [showRecentNotes, setShowRecentNotes] = useState(true)
+  const [notesViewMode, setNotesViewMode] = useState<NotesViewMode>('masonry')
  const [editingNote, setEditingNote] = useState<{ note: Note; readOnly?: boolean } | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [notebookSuggestion, setNotebookSuggestion] = useState<{ noteId: string; content: string } | null>(null)
  const [batchOrganizationOpen, setBatchOrganizationOpen] = useState(false)
  const { refreshKey } = useNoteRefresh()
  const { labels } = useLabels()
+  const { setControls } = useHomeView()

  // Auto label suggestion (IA4)
  const { shouldSuggest: shouldSuggestLabels, notebookId: suggestNotebookId, dismiss: dismissLabelSuggestion } = useAutoLabelSuggestion()
@@ -159,15 +163,23 @@ export default function HomePage() {
    const load = async () => {
      // Load settings first
      let showRecent = true
+      let viewMode: NotesViewMode = 'masonry'
      try {
        const settings = await getAISettings()
        if (cancelled) return
        showRecent = settings?.showRecentNotes !== false
+        viewMode =
+          settings?.notesViewMode === 'masonry'
+            ? 'masonry'
+            : settings?.notesViewMode === 'tabs' || settings?.notesViewMode === 'list'
+              ? 'tabs'
+              : 'masonry'
      } catch {
        // Default to true on error
      }
      if (cancelled) return
      setShowRecentNotes(showRecent)
+      setNotesViewMode(viewMode)

      // Then load notes
      setIsLoading(true)
@@ -247,6 +259,14 @@ export default function HomePage() {
  const currentNotebook = notebooks.find((n: any) => n.id === searchParams.get('notebook'))
  const [showNoteInput, setShowNoteInput] = useState(false)

+  useEffect(() => {
+    setControls({
+      isTabsMode: notesViewMode === 'tabs',
+      openNoteComposer: () => setShowNoteInput(true),
+    })
+    return () => setControls(null)
+  }, [notesViewMode, setControls])
+
  // Get icon component for header
  const getNotebookIcon = (iconName: string) => {
    const ICON_MAP: Record<string, any> = {
@@ -282,11 +302,23 @@ export default function HomePage() {
    </div>
  )

+  const isTabs = notesViewMode === 'tabs'
+
  return (
-    <main className="w-full px-8 py-6 flex flex-col h-full">
+    <div
+      className={cn(
+        'flex w-full min-h-0 flex-1 flex-col',
+        isTabs ? 'gap-3 py-1' : 'h-full px-2 py-6 sm:px-4 md:px-8'
+      )}
+    >
      {/* Notebook Specific Header */}
      {currentNotebook ? (
-        <div className="flex flex-col gap-6 mb-8 animate-in fade-in slide-in-from-top-2 duration-300">
+        <div
+          className={cn(
+            'flex flex-col animate-in fade-in slide-in-from-top-2 duration-300',
+            isTabs ? 'mb-3 gap-3' : 'mb-8 gap-6'
+          )}
+        >
          {/* Breadcrumbs */}
          <Breadcrumbs notebookName={currentNotebook.name} />

@@ -308,7 +340,8 @@ export default function HomePage() {
            </div>

            {/* Actions Section */}
-            <div className="flex items-center gap-3">
+            <div className="flex flex-wrap items-center gap-3">
+              <NotesViewToggle mode={notesViewMode} onModeChange={setNotesViewMode} />
              <LabelFilter
                selectedLabels={searchParams.get('labels')?.split(',').filter(Boolean) || []}
                onFilterChange={(newLabels) => {
@@ -319,21 +352,28 @@ export default function HomePage() {
                }}
                className="border-gray-200"
              />
-              <Button
-                onClick={() => setShowNoteInput(!showNoteInput)}
-                className="h-10 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow-sm gap-2 transition-all"
-              >
-                <Plus className="w-5 h-5" />
-                Add Note
-              </Button>
+              {!isTabs && (
+                <Button
+                  onClick={() => setShowNoteInput(!showNoteInput)}
+                  className="h-10 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow-sm gap-2 transition-all"
+                >
+                  <Plus className="w-5 h-5" />
+                  {t('notes.addNote') || 'Add Note'}
+                </Button>
+              )}
            </div>
          </div>
        </div>
      ) : (
        /* Default Header for Home/Inbox */
-        <div className="flex flex-col gap-6 mb-8 animate-in fade-in slide-in-from-top-2 duration-300">
+        <div
+          className={cn(
+            'flex flex-col animate-in fade-in slide-in-from-top-2 duration-300',
+            isTabs ? 'mb-3 gap-3' : 'mb-8 gap-6'
+          )}
+        >
          {/* Breadcrumbs Placeholder or just spacing */}
-          <div className="h-5 mb-1"></div>
+          {!isTabs && <div className="mb-1 h-5" />}

          <div className="flex items-start justify-between">
            {/* Title Section */}
@@ -345,7 +385,8 @@ export default function HomePage() {
            </div>

            {/* Actions Section */}
-            <div className="flex items-center gap-3">
+            <div className="flex flex-wrap items-center gap-3">
+              <NotesViewToggle mode={notesViewMode} onModeChange={setNotesViewMode} />
              <LabelFilter
                selectedLabels={searchParams.get('labels')?.split(',').filter(Boolean) || []}
                onFilterChange={(newLabels) => {
@@ -370,25 +411,31 @@ export default function HomePage() {
                </Button>
              )}

-              <Button
-                onClick={() => setShowNoteInput(!showNoteInput)}
-                className="h-10 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow-sm gap-2 transition-all"
-              >
-                <Plus className="w-5 h-5" />
-                {t('notes.newNote')}
-              </Button>
+              {!isTabs && (
+                <Button
+                  onClick={() => setShowNoteInput(!showNoteInput)}
+                  className="h-10 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow-sm gap-2 transition-all"
+                >
+                  <Plus className="w-5 h-5" />
+                  {t('notes.newNote')}
+                </Button>
+              )}
            </div>
          </div>
        </div>
      )}

-      {/* Note Input - Conditionally Visible or Always Visible on Home */}
-      {/* Note Input - Conditionally Rendered */}
      {showNoteInput && (
-        <div className="mb-8 animate-in fade-in slide-in-from-top-4 duration-300">
+        <div
+          className={cn(
+            'animate-in fade-in slide-in-from-top-4 duration-300',
+            isTabs ? 'mb-3 w-full shrink-0' : 'mb-8'
+          )}
+        >
          <NoteInput
            onNoteCreated={handleNoteCreatedWrapper}
            forceExpanded={true}
+            fullWidth={isTabs}
          />
        </div>
      )}
@@ -397,26 +444,25 @@ export default function HomePage() {
        <div className="text-center py-8 text-gray-500">{t('general.loading')}</div>
      ) : (
        <>
-          {/* Favorites Section - Pinned Notes */}
          <FavoritesSection
            pinnedNotes={pinnedNotes}
            onEdit={(note, readOnly) => setEditingNote({ note, readOnly })}
          />

-          {/* Recent Notes Section - Only shown if enabled in settings */}
-          {showRecentNotes && (
+          {!isTabs && showRecentNotes && (
            <RecentNotesSection
              recentNotes={recentNotes}
              onEdit={(note, readOnly) => setEditingNote({ note, readOnly })}
            />
          )}

-          {/* Main Notes Grid - Unpinned Notes Only */}
-          {notes.filter(note => !note.isPinned).length > 0 && (
-            <div data-testid="notes-grid">
-              <MasonryGrid
-                notes={notes.filter(note => !note.isPinned)}
+          {notes.filter((note) => !note.isPinned).length > 0 && (
+            <div className={cn(isTabs && 'flex min-h-0 flex-1 flex-col')}>
+              <NotesMainSection
+                viewMode={notesViewMode}
+                notes={notes.filter((note) => !note.isPinned)}
                onEdit={(note, readOnly) => setEditingNote({ note, readOnly })}
+                currentNotebookId={searchParams.get('notebook')}
              />
            </div>
          )}
@@ -473,6 +519,6 @@ export default function HomePage() {
          onClose={() => setEditingNote(null)}
        />
      )}
-    </main>
+    </div>
  )
 }
--- a/keep-notes/app/(main)/settings/appearance/appearance-settings-client.tsx
+++ b/keep-notes/app/(main)/settings/appearance/appearance-settings-client.tsx
@@ -0,0 +1,127 @@
+'use client'
+
+import { useState } from 'react'
+import { SettingsSection, SettingSelect } from '@/components/settings'
+import { updateAISettings } from '@/app/actions/ai-settings'
+import { updateUserSettings } from '@/app/actions/user-settings'
+import { useLanguage } from '@/lib/i18n'
+import { toast } from 'sonner'
+
+interface AppearanceSettingsClientProps {
+  initialFontSize: string
+  initialTheme: string
+  initialNotesViewMode: 'masonry' | 'tabs'
+}
+
+export function AppearanceSettingsClient({ initialFontSize, initialTheme, initialNotesViewMode }: AppearanceSettingsClientProps) {
+  const { t } = useLanguage()
+  const [theme, setTheme] = useState(initialTheme || 'light')
+  const [fontSize, setFontSize] = useState(initialFontSize || 'medium')
+  const [notesViewMode, setNotesViewMode] = useState<'masonry' | 'tabs'>(initialNotesViewMode)
+
+  const handleThemeChange = async (value: string) => {
+    setTheme(value)
+    localStorage.setItem('theme-preference', value)
+
+    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' })
+    toast.success(t('settings.settingsSaved') || 'Saved')
+  }
+
+  const handleFontSizeChange = async (value: string) => {
+    setFontSize(value)
+
+    const fontSizeMap: Record<string, string> = {
+      'small': '14px', 'medium': '16px', 'large': '18px', 'extra-large': '20px'
+    }
+    document.documentElement.style.setProperty('--user-font-size', fontSizeMap[value] || '16px')
+
+    await updateAISettings({ fontSize: value as any })
+    toast.success(t('settings.settingsSaved') || 'Saved')
+  }
+
+  const handleNotesViewChange = async (value: string) => {
+    const mode = value === 'tabs' ? 'tabs' : 'masonry'
+    setNotesViewMode(mode)
+    await updateAISettings({ notesViewMode: mode })
+    toast.success(t('settings.settingsSaved') || 'Saved')
+  }
+
+  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('appearance.selectTheme')}
+          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>
+
+      <SettingsSection
+        title={t('appearance.notesViewLabel')}
+        icon={<span className="text-2xl">📋</span>}
+        description={t('appearance.notesViewDescription')}
+      >
+        <SettingSelect
+          label={t('appearance.notesViewLabel')}
+          description={t('appearance.notesViewDescription')}
+          value={notesViewMode}
+          options={[
+            { value: 'masonry', label: t('appearance.notesViewMasonry') },
+            { value: 'tabs', label: t('appearance.notesViewTabs') },
+          ]}
+          onChange={handleNotesViewChange}
+        />
+      </SettingsSection>
+    </div>
+  )
+}
--- a/keep-notes/app/(main)/settings/appearance/page.tsx
+++ b/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'}
+    />
  )
 }
--- a/keep-notes/app/(main)/settings/general/general-settings-client.tsx
+++ b/keep-notes/app/(main)/settings/general/general-settings-client.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+import { useState } from 'react'
+import { SettingsSection, SettingToggle, SettingSelect } from '@/components/settings'
+import { useLanguage } from '@/lib/i18n'
+import { updateAISettings } from '@/app/actions/ai-settings'
+import { toast } from 'sonner'
+import { useRouter } from 'next/navigation'
+
+interface GeneralSettingsClientProps {
+  initialSettings: {
+    preferredLanguage: string
+    emailNotifications: boolean
+    desktopNotifications: boolean
+    anonymousAnalytics: boolean
+  }
+}
+
+export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClientProps) {
+  const { t, setLanguage: setContextLanguage } = useLanguage()
+  const router = useRouter()
+  const [language, setLanguage] = useState(initialSettings.preferredLanguage || 'auto')
+  const [emailNotifications, setEmailNotifications] = useState(initialSettings.emailNotifications ?? false)
+  const [desktopNotifications, setDesktopNotifications] = useState(initialSettings.desktopNotifications ?? false)
+  const [anonymousAnalytics, setAnonymousAnalytics] = useState(initialSettings.anonymousAnalytics ?? false)
+
+  const handleLanguageChange = async (value: string) => {
+    setLanguage(value)
+    await updateAISettings({ preferredLanguage: value as any })
+
+    if (value === 'auto') {
+      localStorage.removeItem('user-language')
+      toast.success(t('settings.languageAuto') || 'Language set to Auto')
+    } else {
+      localStorage.setItem('user-language', value)
+      setContextLanguage(value as any)
+      toast.success(t('profile.languageUpdateSuccess') || 'Language updated')
+    }
+
+    setTimeout(() => router.refresh(), 300)
+  }
+
+  const handleEmailNotificationsChange = async (enabled: boolean) => {
+    setEmailNotifications(enabled)
+    await updateAISettings({ emailNotifications: enabled })
+    toast.success(t('settings.settingsSaved') || 'Saved')
+  }
+
+  const handleDesktopNotificationsChange = async (enabled: boolean) => {
+    setDesktopNotifications(enabled)
+    await updateAISettings({ desktopNotifications: enabled })
+    toast.success(t('settings.settingsSaved') || 'Saved')
+  }
+
+  const handleAnonymousAnalyticsChange = async (enabled: boolean) => {
+    setAnonymousAnalytics(enabled)
+    await updateAISettings({ anonymousAnalytics: enabled })
+    toast.success(t('settings.settingsSaved') || 'Saved')
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">{t('generalSettings.title')}</h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          {t('generalSettings.description')}
+        </p>
+      </div>
+
+      <SettingsSection
+        title={t('settings.language')}
+        icon={<span className="text-2xl">🌍</span>}
+        description={t('profile.languagePreferencesDescription')}
+      >
+        <SettingSelect
+          label={t('settings.language')}
+          description={t('settings.selectLanguage')}
+          value={language}
+          options={[
+            { value: 'auto', label: t('profile.autoDetect') },
+            { value: 'en', label: 'English' },
+            { value: 'fr', label: 'Français' },
+            { value: 'es', label: 'Español' },
+            { value: 'de', label: 'Deutsch' },
+            { value: 'fa', label: 'فارسی' },
+            { value: 'it', label: 'Italiano' },
+            { value: 'pt', label: 'Português' },
+            { value: 'ru', label: 'Русский' },
+            { value: 'zh', label: '中文' },
+            { value: 'ja', label: '日本語' },
+            { value: 'ko', label: '한국어' },
+            { value: 'ar', label: 'العربية' },
+            { value: 'hi', label: 'हिन्दी' },
+            { value: 'nl', label: 'Nederlands' },
+            { value: 'pl', label: 'Polski' },
+          ]}
+          onChange={handleLanguageChange}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        title={t('settings.notifications')}
+        icon={<span className="text-2xl">🔔</span>}
+        description={t('settings.notificationsDesc')}
+      >
+        <SettingToggle
+          label={t('settings.emailNotifications')}
+          description={t('settings.emailNotificationsDesc')}
+          checked={emailNotifications}
+          onChange={handleEmailNotificationsChange}
+        />
+        <SettingToggle
+          label={t('settings.desktopNotifications')}
+          description={t('settings.desktopNotificationsDesc')}
+          checked={desktopNotifications}
+          onChange={handleDesktopNotificationsChange}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        title={t('settings.privacy')}
+        icon={<span className="text-2xl">🔒</span>}
+        description={t('settings.privacyDesc')}
+      >
+        <SettingToggle
+          label={t('settings.anonymousAnalytics')}
+          description={t('settings.anonymousAnalyticsDesc')}
+          checked={anonymousAnalytics}
+          onChange={handleAnonymousAnalyticsChange}
+        />
+      </SettingsSection>
+    </div>
+  )
+}
--- a/keep-notes/app/(main)/settings/general/page.tsx
+++ b/keep-notes/app/(main)/settings/general/page.tsx
@@ -1,142 +1,15 @@
-'use client'
+import { auth } from '@/auth'
+import { redirect } from 'next/navigation'
+import { getAISettings } from '@/app/actions/ai-settings'
+import { GeneralSettingsClient } from './general-settings-client'

-import { useState, useEffect } from 'react'
-import { SettingsNav, SettingsSection, SettingToggle, SettingSelect } from '@/components/settings'
-import { useLanguage } from '@/lib/i18n'
-import { updateAISettings, getAISettings } from '@/app/actions/ai-settings'
-import { toast } from 'sonner'
-import { useRouter } from 'next/navigation'
-
-export default function GeneralSettingsPage() {
-  const { t, setLanguage: setContextLanguage } = useLanguage()
-  const router = useRouter()
-  const [language, setLanguage] = useState('auto')
-  const [emailNotifications, setEmailNotifications] = useState(false)
-  const [desktopNotifications, setDesktopNotifications] = useState(false)
-  const [anonymousAnalytics, setAnonymousAnalytics] = useState(false)
-
-  // Load settings on mount
-  useEffect(() => {
-    async function loadSettings() {
-      try {
-        const settings = await getAISettings()
-        if (settings.preferredLanguage) setLanguage(settings.preferredLanguage)
-        if (settings.emailNotifications !== undefined) setEmailNotifications(settings.emailNotifications)
-        if (settings.desktopNotifications !== undefined) setDesktopNotifications(settings.desktopNotifications)
-        if (settings.anonymousAnalytics !== undefined) setAnonymousAnalytics(settings.anonymousAnalytics)
-      } catch (error) {
-        console.error('Error loading settings:', error)
-      }
-    }
-    loadSettings()
-  }, [])
-
-  const handleLanguageChange = async (value: string) => {
-    setLanguage(value)
-
-    // 1. Update database settings
-    await updateAISettings({ preferredLanguage: value as any })
-
-    // 2. Update local storage and application state
-    if (value === 'auto') {
-      localStorage.removeItem('user-language')
-      toast.success("Language set to Auto")
-    } else {
-      localStorage.setItem('user-language', value)
-      setContextLanguage(value as any)
-      toast.success(t('profile.languageUpdateSuccess') || "Language updated")
-    }
-
-    // 3. Refresh server components to ensure all components update (metadata, etc.)
-    setTimeout(() => router.refresh(), 500)
+export default async function GeneralSettingsPage() {
+  const session = await auth()
+  if (!session?.user) {
+    redirect('/api/auth/signin')
  }

-  const handleEmailNotificationsChange = async (enabled: boolean) => {
-    setEmailNotifications(enabled)
-    await updateAISettings({ emailNotifications: enabled })
-  }
+  const settings = await getAISettings()

-  const handleDesktopNotificationsChange = async (enabled: boolean) => {
-    setDesktopNotifications(enabled)
-    await updateAISettings({ desktopNotifications: enabled })
-  }
-
-  const handleAnonymousAnalyticsChange = async (enabled: boolean) => {
-    setAnonymousAnalytics(enabled)
-    await updateAISettings({ anonymousAnalytics: enabled })
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold mb-2">{t('generalSettings.title')}</h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          {t('generalSettings.description')}
-        </p>
-      </div>
-
-      <SettingsSection
-        title={t('settings.language')}
-        icon={<span className="text-2xl">🌍</span>}
-        description={t('profile.languagePreferencesDescription')}
-      >
-        <SettingSelect
-          label={t('settings.language')}
-          description={t('settings.selectLanguage')}
-          value={language}
-          options={[
-            { value: 'auto', label: t('profile.autoDetect') },
-            { value: 'en', label: 'English' },
-            { value: 'fr', label: 'Français' },
-            { value: 'es', label: 'Español' },
-            { value: 'de', label: 'Deutsch' },
-            { value: 'fa', label: 'فارسی' },
-            { value: 'it', label: 'Italiano' },
-            { value: 'pt', label: 'Português' },
-            { value: 'ru', label: 'Русский' },
-            { value: 'zh', label: '中文' },
-            { value: 'ja', label: '日本語' },
-            { value: 'ko', label: '한국어' },
-            { value: 'ar', label: 'العربية' },
-            { value: 'hi', label: 'हिन्दी' },
-            { value: 'nl', label: 'Nederlands' },
-            { value: 'pl', label: 'Polski' },
-          ]}
-          onChange={handleLanguageChange}
-        />
-      </SettingsSection>
-
-      <SettingsSection
-        title={t('settings.notifications')}
-        icon={<span className="text-2xl">🔔</span>}
-        description={t('settings.notifications')}
-      >
-        <SettingToggle
-          label={t('settings.notifications')}
-          description={t('settings.notifications')}
-          checked={emailNotifications}
-          onChange={handleEmailNotificationsChange}
-        />
-        <SettingToggle
-          label={t('settings.notifications')}
-          description={t('settings.notifications')}
-          checked={desktopNotifications}
-          onChange={handleDesktopNotificationsChange}
-        />
-      </SettingsSection>
-
-      <SettingsSection
-        title={t('settings.privacy')}
-        icon={<span className="text-2xl">🔒</span>}
-        description={t('settings.privacy')}
-      >
-        <SettingToggle
-          label={t('settings.privacy')}
-          description={t('settings.privacy')}
-          checked={anonymousAnalytics}
-          onChange={handleAnonymousAnalyticsChange}
-        />
-      </SettingsSection>
-    </div>
-  )
+  return <GeneralSettingsClient initialSettings={settings} />
 }
--- a/keep-notes/app/(main)/settings/loading.tsx
+++ b/keep-notes/app/(main)/settings/loading.tsx
@@ -0,0 +1,26 @@
+export default function SettingsLoading() {
+  return (
+    <div className="space-y-6 animate-pulse">
+      <div>
+        <div className="h-9 w-64 bg-muted rounded-md mb-2" />
+        <div className="h-4 w-96 bg-muted rounded-md" />
+      </div>
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="rounded-lg border border-border p-6 space-y-4">
+          <div className="flex items-center gap-3">
+            <div className="h-8 w-8 bg-muted rounded-full" />
+            <div className="h-5 w-40 bg-muted rounded-md" />
+          </div>
+          <div className="h-px bg-border" />
+          <div className="flex items-center justify-between p-4 rounded-lg bg-muted/30">
+            <div className="space-y-2">
+              <div className="h-4 w-32 bg-muted rounded" />
+              <div className="h-3 w-56 bg-muted rounded" />
+            </div>
+            <div className="h-6 w-11 bg-muted rounded-full" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
--- a/keep-notes/app/(main)/settings/mcp/page.tsx
+++ b/keep-notes/app/(main)/settings/mcp/page.tsx
@@ -0,0 +1,23 @@
+import { auth } from '@/auth'
+import { redirect } from 'next/navigation'
+import { McpSettingsPanel } from '@/components/mcp/mcp-settings-panel'
+import { listMcpKeys, getMcpServerStatus } from '@/app/actions/mcp-keys'
+
+export default async function McpSettingsPage() {
+  const session = await auth()
+
+  if (!session?.user) {
+    redirect('/api/auth/signin')
+  }
+
+  const [keys, serverStatus] = await Promise.all([
+    listMcpKeys(),
+    getMcpServerStatus(),
+  ])
+
+  return (
+    <div className="space-y-6">
+      <McpSettingsPanel initialKeys={keys} serverStatus={serverStatus} />
+    </div>
+  )
+}