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)/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>
   )
 }