refactor(ux): consolidate BMAD skills, update design system, and clean up Prisma generated client

2026-04-19 19:21:27 +02:00
parent 5296c4da2c
commit 25529a24b8
2476 changed files with 127934 additions and 101962 deletions
--- a/keep-notes/.backup-keep/favorites-section.tsx
+++ b/keep-notes/.backup-keep/favorites-section.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { useState } from 'react'
+import { Note } from '@/lib/types'
+import { NoteCard } from './note-card'
+import { ChevronDown, ChevronUp, Pin } from 'lucide-react'
+import { useLanguage } from '@/lib/i18n'
+
+interface FavoritesSectionProps {
+  pinnedNotes: Note[]
+  onEdit?: (note: Note, readOnly?: boolean) => void
+  onSizeChange?: (noteId: string, size: 'small' | 'medium' | 'large') => void
+  isLoading?: boolean
+}
+
+export function FavoritesSection({ pinnedNotes, onEdit, onSizeChange, isLoading }: FavoritesSectionProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const { t } = useLanguage()
+
+  if (isLoading) {
+    return (
+      <section data-testid="favorites-section" className="mb-8">
+        <div className="flex items-center gap-2 mb-4 px-2 py-2">
+          <Pin className="w-5 h-5 text-muted-foreground animate-pulse" />
+          <div className="h-6 w-32 bg-muted rounded animate-pulse" />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-40 bg-muted rounded-2xl animate-pulse" />
+          ))}
+        </div>
+      </section>
+    )
+  }
+
+  if (pinnedNotes.length === 0) {
+    return null
+  }
+
+  return (
+    <section data-testid="favorites-section" className="mb-8">
+      <button
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setIsCollapsed(!isCollapsed)
+          }
+        }}
+        className="w-full flex items-center justify-between gap-2 mb-4 px-2 py-2 hover:bg-accent rounded-lg transition-colors min-h-[44px]"
+        aria-expanded={!isCollapsed}
+        aria-label={t('favorites.toggleSection') || 'Toggle pinned notes section'}
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-2xl">📌</span>
+          <h2 className="text-lg font-semibold text-foreground">
+            {t('notes.pinnedNotes')}
+            <span className="text-sm font-medium text-muted-foreground ml-2">
+              ({pinnedNotes.length})
+            </span>
+          </h2>
+        </div>
+        {isCollapsed ? (
+          <ChevronDown className="w-5 h-5 text-muted-foreground" />
+        ) : (
+          <ChevronUp className="w-5 h-5 text-muted-foreground" />
+        )}
+      </button>
+
+      {/* Collapsible Content */}
+      {!isCollapsed && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {pinnedNotes.map((note) => (
+            <NoteCard
+              key={note.id}
+              note={note}
+              onEdit={onEdit}
+              onSizeChange={(size) => onSizeChange?.(note.id, size)}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}
--- a/keep-notes/.backup-keep/home-client.tsx
+++ b/keep-notes/.backup-keep/home-client.tsx
@@ -0,0 +1,454 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useSearchParams, useRouter } from 'next/navigation'
+import dynamic from 'next/dynamic'
+import { Note } from '@/lib/types'
+import { getAISettings } from '@/app/actions/ai-settings'
+import { getAllNotes, searchNotes } from '@/app/actions/notes'
+import { NoteInput } from '@/components/note-input'
+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 { FavoritesSection } from '@/components/favorites-section'
+import { Button } from '@/components/ui/button'
+import { Wand2 } from 'lucide-react'
+import { useLabels } from '@/context/LabelContext'
+import { useNoteRefresh } from '@/context/NoteRefreshContext'
+import { useReminderCheck } from '@/hooks/use-reminder-check'
+import { useAutoLabelSuggestion } from '@/hooks/use-auto-label-suggestion'
+import { useNotebooks } from '@/context/notebooks-context'
+import { Folder, Briefcase, FileText, Zap, BarChart3, Globe, Sparkles, Book, Heart, Crown, Music, Building2, Plane, ChevronRight, Plus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { LabelFilter } from '@/components/label-filter'
+import { useLanguage } from '@/lib/i18n'
+import { useHomeView } from '@/context/home-view-context'
+
+// Lazy-load heavy dialogs — uniquement chargés à la demande
+const NoteEditor = dynamic(
+  () => import('@/components/note-editor').then(m => ({ default: m.NoteEditor })),
+  { ssr: false }
+)
+const BatchOrganizationDialog = dynamic(
+  () => import('@/components/batch-organization-dialog').then(m => ({ default: m.BatchOrganizationDialog })),
+  { ssr: false }
+)
+const AutoLabelSuggestionDialog = dynamic(
+  () => import('@/components/auto-label-suggestion-dialog').then(m => ({ default: m.AutoLabelSuggestionDialog })),
+  { ssr: false }
+)
+
+type InitialSettings = {
+  showRecentNotes: boolean
+  notesViewMode: 'masonry' | 'tabs'
+}
+
+interface HomeClientProps {
+  /** Notes pré-chargées côté serveur — hydratées immédiatement sans loading spinner */
+  initialNotes: Note[]
+  initialSettings: InitialSettings
+}
+
+export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const { t } = useLanguage()
+
+  const [notes, setNotes] = useState<Note[]>(initialNotes)
+  const [pinnedNotes, setPinnedNotes] = useState<Note[]>(
+    initialNotes.filter(n => n.isPinned)
+  )
+  const [notesViewMode, setNotesViewMode] = useState<NotesViewMode>(initialSettings.notesViewMode)
+  const [editingNote, setEditingNote] = useState<{ note: Note; readOnly?: boolean } | null>(null)
+  const [isLoading, setIsLoading] = useState(false) // false by default — data is pre-loaded
+  const [notebookSuggestion, setNotebookSuggestion] = useState<{ noteId: string; content: string } | null>(null)
+  const [batchOrganizationOpen, setBatchOrganizationOpen] = useState(false)
+  const { refreshKey } = useNoteRefresh()
+  const { labels } = useLabels()
+  const { setControls } = useHomeView()
+
+  const { shouldSuggest: shouldSuggestLabels, notebookId: suggestNotebookId, dismiss: dismissLabelSuggestion } = useAutoLabelSuggestion()
+  const [autoLabelOpen, setAutoLabelOpen] = useState(false)
+
+  useEffect(() => {
+    if (shouldSuggestLabels && suggestNotebookId) {
+      setAutoLabelOpen(true)
+    }
+  }, [shouldSuggestLabels, suggestNotebookId])
+
+  const notebookFilter = searchParams.get('notebook')
+  const isInbox = !notebookFilter
+
+  const handleNoteCreated = useCallback((note: Note) => {
+    setNotes((prevNotes) => {
+      const notebookFilter = searchParams.get('notebook')
+      const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
+      const colorFilter = searchParams.get('color')
+      const search = searchParams.get('search')?.trim() || null
+
+      if (notebookFilter && note.notebookId !== notebookFilter) return prevNotes
+      if (!notebookFilter && note.notebookId) return prevNotes
+
+      if (labelFilter.length > 0) {
+        const noteLabels = note.labels || []
+        if (!noteLabels.some((label: string) => labelFilter.includes(label))) return prevNotes
+      }
+
+      if (colorFilter) {
+        const labelNamesWithColor = labels
+          .filter((label: any) => label.color === colorFilter)
+          .map((label: any) => label.name)
+        const noteLabels = note.labels || []
+        if (!noteLabels.some((label: string) => labelNamesWithColor.includes(label))) return prevNotes
+      }
+
+      if (search) {
+        router.refresh()
+        return prevNotes
+      }
+
+      const isPinned = note.isPinned || false
+      const pinnedNotes = prevNotes.filter(n => n.isPinned)
+      const unpinnedNotes = prevNotes.filter(n => !n.isPinned)
+
+      if (isPinned) {
+        return [note, ...pinnedNotes, ...unpinnedNotes]
+      } else {
+        return [...pinnedNotes, note, ...unpinnedNotes]
+      }
+    })
+
+    if (!note.notebookId) {
+      const wordCount = (note.content || '').trim().split(/\s+/).filter(w => w.length > 0).length
+      if (wordCount >= 20) {
+        setNotebookSuggestion({ noteId: note.id, content: note.content || '' })
+      }
+    }
+  }, [searchParams, labels, router])
+
+  const handleOpenNote = (noteId: string) => {
+    const note = notes.find(n => n.id === noteId)
+    if (note) setEditingNote({ note, readOnly: false })
+  }
+
+  const handleSizeChange = useCallback((noteId: string, size: 'small' | 'medium' | 'large') => {
+    setNotes(prev => prev.map(n => n.id === noteId ? { ...n, size } : n))
+    setPinnedNotes(prev => prev.map(n => n.id === noteId ? { ...n, size } : n))
+  }, [])
+
+  useReminderCheck(notes)
+
+  // Rechargement uniquement pour les filtres actifs (search, labels, notebook)
+  // Les notes initiales suffisent sans filtre
+  useEffect(() => {
+    const search = searchParams.get('search')?.trim() || null
+    const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
+    const colorFilter = searchParams.get('color')
+    const notebook = searchParams.get('notebook')
+    const semanticMode = searchParams.get('semantic') === 'true'
+
+    // Pour le refreshKey (mutations), toujours recharger
+    // Pour les filtres, charger depuis le serveur
+    const hasActiveFilter = search || labelFilter.length > 0 || colorFilter
+
+    const load = async () => {
+      setIsLoading(true)
+      let allNotes = search
+        ? await searchNotes(search, semanticMode, notebook || undefined)
+        : await getAllNotes()
+
+      // Filtre notebook côté client
+      if (notebook) {
+        allNotes = allNotes.filter((note: any) => note.notebookId === notebook)
+      } else {
+        allNotes = allNotes.filter((note: any) => !note.notebookId)
+      }
+
+      // Filtre labels
+      if (labelFilter.length > 0) {
+        allNotes = allNotes.filter((note: any) =>
+          note.labels?.some((label: string) => labelFilter.includes(label))
+        )
+      }
+
+      // Filtre couleur
+      if (colorFilter) {
+        const labelNamesWithColor = labels
+          .filter((label: any) => label.color === colorFilter)
+          .map((label: any) => label.name)
+        allNotes = allNotes.filter((note: any) =>
+          note.labels?.some((label: string) => labelNamesWithColor.includes(label))
+        )
+      }
+
+      // Merger avec les tailles locales pour ne pas écraser les modifications
+      setNotes(prev => {
+        const localSizeMap = new Map(prev.map(n => [n.id, n.size]))
+        return allNotes.map(n => ({ ...n, size: localSizeMap.get(n.id) ?? n.size }))
+      })
+      setPinnedNotes(allNotes.filter((n: any) => n.isPinned))
+      setIsLoading(false)
+    }
+
+    // Éviter le rechargement initial si les notes sont déjà chargées sans filtres
+    if (refreshKey > 0 || hasActiveFilter) {
+      const cancelled = { value: false }
+      load().then(() => { if (cancelled.value) return })
+      return () => { cancelled.value = true }
+    } else {
+      // Données initiales : filtrage inbox/notebook côté client seulement
+      let filtered = initialNotes
+      if (notebook) {
+        filtered = initialNotes.filter(n => n.notebookId === notebook)
+      } else {
+        filtered = initialNotes.filter(n => !n.notebookId)
+      }
+      // Merger avec les tailles déjà modifiées localement
+      setNotes(prev => {
+        const localSizeMap = new Map(prev.map(n => [n.id, n.size]))
+        return filtered.map(n => ({ ...n, size: localSizeMap.get(n.id) ?? n.size }))
+      })
+      setPinnedNotes(filtered.filter(n => n.isPinned))
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams, refreshKey])
+
+  const { notebooks } = useNotebooks()
+  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])
+
+  const getNotebookIcon = (iconName: string) => {
+    const ICON_MAP: Record<string, any> = {
+      'folder': Folder,
+      'briefcase': Briefcase,
+      'document': FileText,
+      'lightning': Zap,
+      'chart': BarChart3,
+      'globe': Globe,
+      'sparkle': Sparkles,
+      'book': Book,
+      'heart': Heart,
+      'crown': Crown,
+      'music': Music,
+      'building': Building2,
+      'flight_takeoff': Plane,
+    }
+    return ICON_MAP[iconName] || Folder
+  }
+
+  const handleNoteCreatedWrapper = (note: any) => {
+    handleNoteCreated(note)
+    setShowNoteInput(false)
+  }
+
+  const Breadcrumbs = ({ notebookName }: { notebookName: string }) => (
+    <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
+      <span>{t('nav.notebooks')}</span>
+      <ChevronRight className="w-4 h-4" />
+      <span className="font-medium text-primary">{notebookName}</span>
+    </div>
+  )
+
+  const isTabs = notesViewMode === 'tabs'
+
+  return (
+    <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={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 notebookName={currentNotebook.name} />
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-5">
+              <div className="p-3 bg-primary/10 dark:bg-primary/20 rounded-xl">
+                {(() => {
+                  const Icon = getNotebookIcon(currentNotebook.icon || 'folder')
+                  return (
+                    <Icon
+                      className={cn("w-8 h-8", !currentNotebook.color && "text-primary dark:text-primary-foreground")}
+                      style={currentNotebook.color ? { color: currentNotebook.color } : undefined}
+                    />
+                  )
+                })()}
+              </div>
+              <h1 className="text-4xl font-bold text-gray-900 dark:text-white tracking-tight">{currentNotebook.name}</h1>
+            </div>
+            <div className="flex flex-wrap items-center gap-3">
+              <NotesViewToggle mode={notesViewMode} onModeChange={setNotesViewMode} />
+              <LabelFilter
+                selectedLabels={searchParams.get('labels')?.split(',').filter(Boolean) || []}
+                onFilterChange={(newLabels) => {
+                  const params = new URLSearchParams(searchParams.toString())
+                  if (newLabels.length > 0) params.set('labels', newLabels.join(','))
+                  else params.delete('labels')
+                  router.push(`/?${params.toString()}`)
+                }}
+                className="border-gray-200"
+              />
+              {!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>
+      ) : (
+        <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'
+          )}
+        >
+          {!isTabs && <div className="mb-1 h-5" />}
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-5">
+              <div className="p-3 bg-white border border-gray-100 dark:bg-gray-800 dark:border-gray-700 rounded-xl shadow-sm">
+                <FileText className="w-8 h-8 text-primary" />
+              </div>
+              <h1 className="text-4xl font-bold text-gray-900 dark:text-white tracking-tight">{t('notes.title')}</h1>
+            </div>
+            <div className="flex flex-wrap items-center gap-3">
+              <NotesViewToggle mode={notesViewMode} onModeChange={setNotesViewMode} />
+              <LabelFilter
+                selectedLabels={searchParams.get('labels')?.split(',').filter(Boolean) || []}
+                onFilterChange={(newLabels) => {
+                  const params = new URLSearchParams(searchParams.toString())
+                  if (newLabels.length > 0) params.set('labels', newLabels.join(','))
+                  else params.delete('labels')
+                  router.push(`/?${params.toString()}`)
+                }}
+                className="border-gray-200"
+              />
+              {isInbox && !isLoading && notes.length >= 2 && (
+                <Button
+                  onClick={() => setBatchOrganizationOpen(true)}
+                  variant="outline"
+                  className="h-10 px-4 rounded-full border-gray-200 text-gray-700 hover:bg-gray-50 gap-2 shadow-sm"
+                  title={t('batch.organizeWithAI')}
+                >
+                  <Wand2 className="h-4 w-4 text-purple-600" />
+                  <span className="hidden sm:inline">{t('batch.organize')}</span>
+                </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>
+      )}
+
+      {showNoteInput && (
+        <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>
+      )}
+
+      {isLoading ? (
+        <div className="text-center py-8 text-gray-500">{t('general.loading')}</div>
+      ) : (
+        <>
+          <FavoritesSection
+            pinnedNotes={pinnedNotes}
+            onEdit={(note, readOnly) => setEditingNote({ note, readOnly })}
+            onSizeChange={handleSizeChange}
+          />
+
+          {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 })}
+                onSizeChange={handleSizeChange}
+                currentNotebookId={searchParams.get('notebook')}
+              />
+            </div>
+          )}
+
+          {notes.filter(note => !note.isPinned).length === 0 && pinnedNotes.length === 0 && (
+            <div className="text-center py-8 text-gray-500">
+              {t('notes.emptyState')}
+            </div>
+          )}
+        </>
+      )}
+
+      <MemoryEchoNotification onOpenNote={handleOpenNote} />
+
+      {notebookSuggestion && (
+        <NotebookSuggestionToast
+          noteId={notebookSuggestion.noteId}
+          noteContent={notebookSuggestion.content}
+          onDismiss={() => setNotebookSuggestion(null)}
+        />
+      )}
+
+      {batchOrganizationOpen && (
+        <BatchOrganizationDialog
+          open={batchOrganizationOpen}
+          onOpenChange={setBatchOrganizationOpen}
+          onNotesMoved={() => router.refresh()}
+        />
+      )}
+
+      {autoLabelOpen && (
+        <AutoLabelSuggestionDialog
+          open={autoLabelOpen}
+          onOpenChange={(open) => {
+            setAutoLabelOpen(open)
+            if (!open) dismissLabelSuggestion()
+          }}
+          notebookId={suggestNotebookId}
+          onLabelsCreated={() => router.refresh()}
+        />
+      )}
+
+      {editingNote && (
+        <NoteEditor
+          note={editingNote.note}
+          readOnly={editingNote.readOnly}
+          onClose={() => setEditingNote(null)}
+        />
+      )}
+    </div>
+  )
+}
--- a/keep-notes/.backup-keep/masonry-grid.css
+++ b/keep-notes/.backup-keep/masonry-grid.css
@@ -0,0 +1,132 @@
+/**
+ * Masonry Grid — CSS Grid avec tailles visibles
+ * Layout avec espaces minimisés via dense, drag-and-drop via @dnd-kit
+ */
+
+/* ─── Container ──────────────────────────────────── */
+.masonry-container {
+  width: 100%;
+  padding: 0 8px 40px 8px;
+}
+
+/* ─── CSS Grid avec dense pour minimiser les trous ─ */
+.masonry-css-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-auto-rows: auto;
+  gap: 12px;
+  align-items: start;
+  grid-auto-flow: dense;
+}
+
+/* ─── Sortable items ─────────────────────────────── */
+.masonry-sortable-item {
+  break-inside: avoid;
+  box-sizing: border-box;
+  will-change: transform;
+  transition: opacity 0.15s ease-out;
+}
+
+/* Taille des notes : small=1 colonne, medium=2 colonnes, large=3 colonnes */
+.masonry-sortable-item[data-size="medium"] {
+  grid-column: span 2;
+}
+
+.masonry-sortable-item[data-size="large"] {
+  grid-column: span 3;
+}
+
+/* ─── Note card base ─────────────────────────────── */
+.note-card {
+  width: 100% !important;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+/* ─── Drag overlay ───────────────────────────────── */
+.masonry-drag-overlay {
+  cursor: grabbing;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15);
+  border-radius: 12px;
+  opacity: 0.95;
+  pointer-events: none;
+}
+
+/* ─── Mobile (< 480px) : 1 colonne ──────────────── */
+@media (max-width: 479px) {
+  .masonry-css-grid {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  
+  /* Sur mobile tout est 1 colonne */
+  .masonry-sortable-item[data-size="medium"],
+  .masonry-sortable-item[data-size="large"] {
+    grid-column: span 1;
+  }
+  
+  .masonry-container {
+    padding: 0 4px 16px 4px;
+  }
+}
+
+/* ─── Small tablet (480–767px) : 2 colonnes ─────── */
+@media (min-width: 480px) and (max-width: 767px) {
+  .masonry-css-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+  }
+  
+  /* Sur 2 colonnes, large prend tout */
+  .masonry-sortable-item[data-size="large"] {
+    grid-column: span 2;
+  }
+  
+  .masonry-container {
+    padding: 0 8px 20px 8px;
+  }
+}
+
+/* ─── Tablet (768–1023px) ────────────────────────── */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .masonry-css-grid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 12px;
+  }
+}
+
+/* ─── Desktop (1024–1279px) ─────────────────────── */
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .masonry-css-grid {
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    gap: 12px;
+  }
+}
+
+/* ─── Large Desktop (1280px+) ───────────────────── */
+@media (min-width: 1280px) {
+  .masonry-css-grid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 14px;
+  }
+  .masonry-container {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 0 12px 32px 12px;
+  }
+}
+
+/* ─── Print ──────────────────────────────────────── */
+@media print {
+  .masonry-sortable-item {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+}
+
+/* ─── Reduced motion ─────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .masonry-sortable-item {
+    transition: none;
+  }
+}
--- a/keep-notes/.backup-keep/masonry-grid.tsx
+++ b/keep-notes/.backup-keep/masonry-grid.tsx
@@ -0,0 +1,292 @@
+'use client'
+
+import { useState, useEffect, useCallback, memo, useMemo, useRef } from 'react';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  rectSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Note } from '@/lib/types';
+import { NoteCard } from './note-card';
+import { updateFullOrderWithoutRevalidation } from '@/app/actions/notes';
+import { useNotebookDrag } from '@/context/notebook-drag-context';
+import { useLanguage } from '@/lib/i18n';
+import dynamic from 'next/dynamic';
+import './masonry-grid.css';
+
+// Lazy-load NoteEditor — uniquement chargé au clic
+const NoteEditor = dynamic(
+  () => import('./note-editor').then(m => ({ default: m.NoteEditor })),
+  { ssr: false }
+);
+
+interface MasonryGridProps {
+  notes: Note[];
+  onEdit?: (note: Note, readOnly?: boolean) => void;
+  onSizeChange?: (noteId: string, size: 'small' | 'medium' | 'large') => void;
+}
+
+// ─────────────────────────────────────────────
+// Sortable Note Item
+// ─────────────────────────────────────────────
+interface SortableNoteProps {
+  note: Note;
+  onEdit: (note: Note, readOnly?: boolean) => void;
+  onSizeChange: (noteId: string, newSize: 'small' | 'medium' | 'large') => void;
+  onDragStartNote?: (noteId: string) => void;
+  onDragEndNote?: () => void;
+  isDragging?: boolean;
+  isOverlay?: boolean;
+}
+
+const SortableNoteItem = memo(function SortableNoteItem({
+  note,
+  onEdit,
+  onSizeChange,
+  onDragStartNote,
+  onDragEndNote,
+  isDragging,
+  isOverlay,
+}: SortableNoteProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging: isSortableDragging,
+  } = useSortable({ id: note.id });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isSortableDragging && !isOverlay ? 0.3 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className="masonry-sortable-item"
+      data-id={note.id}
+      data-size={note.size}
+    >
+      <NoteCard
+        note={note}
+        onEdit={onEdit}
+        onDragStart={onDragStartNote}
+        onDragEnd={onDragEndNote}
+        isDragging={isDragging}
+        onSizeChange={(newSize) => onSizeChange(note.id, newSize)}
+      />
+    </div>
+  );
+})
+
+// ─────────────────────────────────────────────
+// Sortable Grid Section (pinned or others)
+// ─────────────────────────────────────────────
+interface SortableGridSectionProps {
+  notes: Note[];
+  onEdit: (note: Note, readOnly?: boolean) => void;
+  onSizeChange: (noteId: string, newSize: 'small' | 'medium' | 'large') => void;
+  draggedNoteId: string | null;
+  onDragStartNote: (noteId: string) => void;
+  onDragEndNote: () => void;
+}
+
+const SortableGridSection = memo(function SortableGridSection({
+  notes,
+  onEdit,
+  onSizeChange,
+  draggedNoteId,
+  onDragStartNote,
+  onDragEndNote,
+}: SortableGridSectionProps) {
+  const ids = useMemo(() => notes.map(n => n.id), [notes]);
+
+  return (
+    <SortableContext items={ids} strategy={rectSortingStrategy}>
+      <div className="masonry-css-grid">
+        {notes.map(note => (
+          <SortableNoteItem
+            key={note.id}
+            note={note}
+            onEdit={onEdit}
+            onSizeChange={onSizeChange}
+            onDragStartNote={onDragStartNote}
+            onDragEndNote={onDragEndNote}
+            isDragging={draggedNoteId === note.id}
+          />
+        ))}
+      </div>
+    </SortableContext>
+  );
+});
+
+// ─────────────────────────────────────────────
+// Main MasonryGrid component
+// ─────────────────────────────────────────────
+export function MasonryGrid({ notes, onEdit, onSizeChange }: MasonryGridProps) {
+  const { t } = useLanguage();
+  const [editingNote, setEditingNote] = useState<{ note: Note; readOnly?: boolean } | null>(null);
+  const { startDrag, endDrag, draggedNoteId } = useNotebookDrag();
+
+  // Local notes state for optimistic size/order updates
+  const [localNotes, setLocalNotes] = useState<Note[]>(notes);
+
+  useEffect(() => {
+    setLocalNotes(prev => {
+      const localSizeMap = new Map(prev.map(n => [n.id, n.size]))
+      return notes.map(n => ({ ...n, size: localSizeMap.get(n.id) ?? n.size }))
+    })
+  }, [notes]);
+
+  const pinnedNotes = useMemo(() => localNotes.filter(n => n.isPinned), [localNotes]);
+  const othersNotes = useMemo(() => localNotes.filter(n => !n.isPinned), [localNotes]);
+
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const activeNote = useMemo(
+    () => localNotes.find(n => n.id === activeId) ?? null,
+    [localNotes, activeId]
+  );
+
+  const handleEdit = useCallback((note: Note, readOnly?: boolean) => {
+    if (onEdit) {
+      onEdit(note, readOnly);
+    } else {
+      setEditingNote({ note, readOnly });
+    }
+  }, [onEdit]);
+
+  const handleSizeChange = useCallback((noteId: string, newSize: 'small' | 'medium' | 'large') => {
+    setLocalNotes(prev => prev.map(n => n.id === noteId ? { ...n, size: newSize } : n));
+    onSizeChange?.(noteId, newSize);
+  }, [onSizeChange]);
+
+  // @dnd-kit sensors — pointer (desktop) + touch (mobile)
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 }, // Évite les activations accidentelles
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: { delay: 200, tolerance: 8 }, // Long-press sur mobile
+    })
+  );
+
+  const localNotesRef = useRef<Note[]>(localNotes)
+  useEffect(() => {
+    localNotesRef.current = localNotes
+  }, [localNotes])
+
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+    startDrag(event.active.id as string);
+  }, [startDrag]);
+
+  const handleDragEnd = useCallback(async (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveId(null);
+    endDrag();
+
+    if (!over || active.id === over.id) return;
+
+    const reordered = arrayMove(
+      localNotesRef.current,
+      localNotesRef.current.findIndex(n => n.id === active.id),
+      localNotesRef.current.findIndex(n => n.id === over.id),
+    );
+
+    if (reordered.length === 0) return;
+
+    setLocalNotes(reordered);
+    // Persist order outside of setState to avoid "setState in render" warning
+    const ids = reordered.map(n => n.id);
+    updateFullOrderWithoutRevalidation(ids).catch(err => {
+      console.error('Failed to persist order:', err);
+    });
+  }, [endDrag]);
+
+  return (
+    <DndContext
+      id="masonry-dnd"
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <div className="masonry-container">
+        {pinnedNotes.length > 0 && (
+          <div className="mb-8">
+            <h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3 px-2">
+              {t('notes.pinned')}
+            </h2>
+            <SortableGridSection
+              notes={pinnedNotes}
+              onEdit={handleEdit}
+              onSizeChange={handleSizeChange}
+              draggedNoteId={draggedNoteId}
+              onDragStartNote={startDrag}
+              onDragEndNote={endDrag}
+            />
+          </div>
+        )}
+
+        {othersNotes.length > 0 && (
+          <div>
+            {pinnedNotes.length > 0 && (
+              <h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3 px-2">
+                {t('notes.others')}
+              </h2>
+            )}
+            <SortableGridSection
+              notes={othersNotes}
+              onEdit={handleEdit}
+              onSizeChange={handleSizeChange}
+              draggedNoteId={draggedNoteId}
+              onDragStartNote={startDrag}
+              onDragEndNote={endDrag}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* DragOverlay — montre une copie flottante pendant le drag */}
+      <DragOverlay>
+        {activeNote ? (
+          <div className="masonry-sortable-item masonry-drag-overlay" data-size={activeNote.size}>
+            <NoteCard
+              note={activeNote}
+              onEdit={handleEdit}
+              isDragging={true}
+              onSizeChange={(newSize) => handleSizeChange(activeNote.id, newSize)}
+            />
+          </div>
+        ) : null}
+      </DragOverlay>
+
+      {editingNote && (
+        <NoteEditor
+          note={editingNote.note}
+          readOnly={editingNote.readOnly}
+          onClose={() => setEditingNote(null)}
+        />
+      )}
+    </DndContext>
+  );
+}
--- a/keep-notes/.backup-keep/note-card.tsx
+++ b/keep-notes/.backup-keep/note-card.tsx
@@ -0,0 +1,677 @@
+'use client'
+
+import { Note, NOTE_COLORS, NoteColor } from '@/lib/types'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Pin, Bell, GripVertical, X, Link2, FolderOpen, StickyNote, LucideIcon, Folder, Briefcase, FileText, Zap, BarChart3, Globe, Sparkles, Book, Heart, Crown, Music, Building2, LogOut, Trash2 } from 'lucide-react'
+import { useState, useEffect, useTransition, useOptimistic, memo } from 'react'
+import { useSession } from 'next-auth/react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { deleteNote, toggleArchive, togglePin, updateColor, updateNote, updateSize, getNoteAllUsers, leaveSharedNote, removeFusedBadge } from '@/app/actions/notes'
+import { cn } from '@/lib/utils'
+import { formatDistanceToNow, Locale } from 'date-fns'
+import { enUS } from 'date-fns/locale/en-US'
+import { fr } from 'date-fns/locale/fr'
+import { es } from 'date-fns/locale/es'
+import { de } from 'date-fns/locale/de'
+import { faIR } from 'date-fns/locale/fa-IR'
+import { it } from 'date-fns/locale/it'
+import { pt } from 'date-fns/locale/pt'
+import { ru } from 'date-fns/locale/ru'
+import { zhCN } from 'date-fns/locale/zh-CN'
+import { ja } from 'date-fns/locale/ja'
+import { ko } from 'date-fns/locale/ko'
+import { ar } from 'date-fns/locale/ar'
+import { hi } from 'date-fns/locale/hi'
+import { nl } from 'date-fns/locale/nl'
+import { pl } from 'date-fns/locale/pl'
+import { MarkdownContent } from './markdown-content'
+import { LabelBadge } from './label-badge'
+import { NoteImages } from './note-images'
+import { NoteChecklist } from './note-checklist'
+import { NoteActions } from './note-actions'
+import { CollaboratorDialog } from './collaborator-dialog'
+import { CollaboratorAvatars } from './collaborator-avatars'
+import { ConnectionsBadge } from './connections-badge'
+import { ConnectionsOverlay } from './connections-overlay'
+import { ComparisonModal } from './comparison-modal'
+import { useConnectionsCompare } from '@/hooks/use-connections-compare'
+import { useLabels } from '@/context/LabelContext'
+import { useLanguage } from '@/lib/i18n'
+import { useNotebooks } from '@/context/notebooks-context'
+import { toast } from 'sonner'
+
+// Mapping of supported languages to date-fns locales
+const localeMap: Record<string, Locale> = {
+  en: enUS,
+  fr: fr,
+  es: es,
+  de: de,
+  fa: faIR,
+  it: it,
+  pt: pt,
+  ru: ru,
+  zh: zhCN,
+  ja: ja,
+  ko: ko,
+  ar: ar,
+  hi: hi,
+  nl: nl,
+  pl: pl,
+}
+
+function getDateLocale(language: string): Locale {
+  return localeMap[language] || enUS
+}
+
+// Map icon names to lucide-react components
+const ICON_MAP: Record<string, LucideIcon> = {
+  'folder': Folder,
+  'briefcase': Briefcase,
+  'document': FileText,
+  'lightning': Zap,
+  'chart': BarChart3,
+  'globe': Globe,
+  'sparkle': Sparkles,
+  'book': Book,
+  'heart': Heart,
+  'crown': Crown,
+  'music': Music,
+  'building': Building2,
+}
+
+// Function to get icon component by name
+function getNotebookIcon(iconName: string): LucideIcon {
+  const IconComponent = ICON_MAP[iconName] || Folder
+  return IconComponent
+}
+
+interface NoteCardProps {
+  note: Note
+  onEdit?: (note: Note, readOnly?: boolean) => void
+  isDragging?: boolean
+  isDragOver?: boolean
+  onDragStart?: (noteId: string) => void
+  onDragEnd?: () => void
+  onResize?: () => void
+  onSizeChange?: (newSize: 'small' | 'medium' | 'large') => void
+}
+
+// Helper function to get initials from name
+function getInitials(name: string): string {
+  if (!name) return '??'
+  const trimmedName = name.trim()
+  const parts = trimmedName.split(' ')
+  if (parts.length === 1) {
+    return trimmedName.substring(0, 2).toUpperCase()
+  }
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
+// Helper function to get avatar color based on name hash
+function getAvatarColor(name: string): string {
+  const colors = [
+    'bg-primary',
+    'bg-purple-500',
+    'bg-green-500',
+    'bg-orange-500',
+    'bg-pink-500',
+    'bg-teal-500',
+    'bg-red-500',
+    'bg-indigo-500',
+  ]
+
+  const hash = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  return colors[hash % colors.length]
+}
+
+export const NoteCard = memo(function NoteCard({
+  note,
+  onEdit,
+  onDragStart,
+  onDragEnd,
+  isDragging,
+  onResize,
+  onSizeChange
+}: NoteCardProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { refreshLabels } = useLabels()
+  const { data: session } = useSession()
+  const { t, language } = useLanguage()
+  const { notebooks, moveNoteToNotebookOptimistic } = useNotebooks()
+  const [, startTransition] = useTransition()
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [showCollaboratorDialog, setShowCollaboratorDialog] = useState(false)
+  const [collaborators, setCollaborators] = useState<any[]>([])
+  const [owner, setOwner] = useState<any>(null)
+  const [showConnectionsOverlay, setShowConnectionsOverlay] = useState(false)
+  const [comparisonNotes, setComparisonNotes] = useState<string[] | null>(null)
+  const [showNotebookMenu, setShowNotebookMenu] = useState(false)
+
+  // Move note to a notebook
+  const handleMoveToNotebook = async (notebookId: string | null) => {
+    await moveNoteToNotebookOptimistic(note.id, notebookId)
+    setShowNotebookMenu(false)
+    // No need for router.refresh() - triggerRefresh() is already called in moveNoteToNotebookOptimistic
+  }
+
+  // Optimistic UI state for instant feedback
+  const [optimisticNote, addOptimisticNote] = useOptimistic(
+    note,
+    (state, newProps: Partial<Note>) => ({ ...state, ...newProps })
+  )
+
+  // Local color state so color persists after transition ends
+  const [localColor, setLocalColor] = useState(note.color)
+
+  const colorClasses = NOTE_COLORS[(localColor || optimisticNote.color) as NoteColor] || NOTE_COLORS.default
+
+  // Check if this note is currently open in the editor
+  const isNoteOpenInEditor = searchParams.get('note') === note.id
+
+  // Only fetch comparison notes when we have IDs to compare
+  const { notes: comparisonNotesData, isLoading: isLoadingComparison } = useConnectionsCompare(
+    comparisonNotes && comparisonNotes.length > 0 ? comparisonNotes : null
+  )
+
+  const currentUserId = session?.user?.id
+  const canManageCollaborators = currentUserId && note.userId && currentUserId === note.userId
+  const isSharedNote = currentUserId && note.userId && currentUserId !== note.userId
+  const isOwner = currentUserId && note.userId && currentUserId === note.userId
+
+  // Load collaborators only for shared notes (not owned by current user)
+  useEffect(() => {
+    // Skip API call for notes owned by current user — no need to fetch collaborators
+    if (!isSharedNote) {
+      // For own notes, set owner to current user
+      if (currentUserId && session?.user) {
+        setOwner({
+          id: currentUserId,
+          name: session.user.name,
+          email: session.user.email,
+          image: session.user.image,
+        })
+      }
+      return
+    }
+
+    let isMounted = true
+
+    const loadCollaborators = async () => {
+      if (note.userId && isMounted) {
+        try {
+          const users = await getNoteAllUsers(note.id)
+          if (isMounted) {
+            setCollaborators(users)
+            if (users.length > 0) {
+              setOwner(users[0])
+            }
+          }
+        } catch (error) {
+          console.error('Failed to load collaborators:', error)
+          if (isMounted) {
+            setCollaborators([])
+          }
+        }
+      }
+    }
+
+    loadCollaborators()
+
+    return () => {
+      isMounted = false
+    }
+  }, [note.id, note.userId, isSharedNote, currentUserId, session?.user])
+
+  const handleDelete = async () => {
+    setIsDeleting(true)
+    try {
+      await deleteNote(note.id)
+      await refreshLabels()
+    } catch (error) {
+      console.error('Failed to delete note:', error)
+      setIsDeleting(false)
+    }
+  }
+
+  const handleTogglePin = async () => {
+    startTransition(async () => {
+      addOptimisticNote({ isPinned: !note.isPinned })
+      await togglePin(note.id, !note.isPinned)
+
+      if (!note.isPinned) {
+        toast.success(t('notes.pinned') || 'Note pinned')
+      } else {
+        toast.info(t('notes.unpinned') || 'Note unpinned')
+      }
+    })
+  }
+
+  const handleToggleArchive = async () => {
+    startTransition(async () => {
+      addOptimisticNote({ isArchived: !note.isArchived })
+      await toggleArchive(note.id, !note.isArchived)
+    })
+  }
+
+  const handleColorChange = async (color: string) => {
+    setLocalColor(color) // instant visual update, survives transition
+    startTransition(async () => {
+      addOptimisticNote({ color })
+      await updateNote(note.id, { color }, { skipRevalidation: false })
+    })
+  }
+
+  const handleSizeChange = (size: 'small' | 'medium' | 'large') => {
+    // Notifier le parent immédiatement (hors transition) — c'est lui
+    // qui détient la source de vérité via localNotes
+    onSizeChange?.(size)
+    onResize?.()
+
+    // Persister en arrière-plan
+    updateSize(note.id, size).catch(err =>
+      console.error('Failed to update note size:', err)
+    )
+  }
+
+  const handleCheckItem = async (checkItemId: string) => {
+    if (note.type === 'checklist' && Array.isArray(note.checkItems)) {
+      const updatedItems = note.checkItems.map(item =>
+        item.id === checkItemId ? { ...item, checked: !item.checked } : item
+      )
+      startTransition(async () => {
+        addOptimisticNote({ checkItems: updatedItems })
+        await updateNote(note.id, { checkItems: updatedItems })
+        // No router.refresh() — optimistic update is sufficient and avoids grid rebuild
+      })
+    }
+  }
+
+  const handleLeaveShare = async () => {
+    if (confirm(t('notes.confirmLeaveShare'))) {
+      try {
+        await leaveSharedNote(note.id)
+        setIsDeleting(true) // Hide the note from view
+      } catch (error) {
+        console.error('Failed to leave share:', error)
+      }
+    }
+  }
+
+  const handleRemoveFusedBadge = async (e: React.MouseEvent) => {
+    e.stopPropagation() // Prevent opening the note editor
+    startTransition(async () => {
+      addOptimisticNote({ autoGenerated: null })
+      await removeFusedBadge(note.id)
+      // No router.refresh() — optimistic update is sufficient and avoids grid rebuild
+    })
+  }
+
+  if (isDeleting) return null
+
+  const getMinHeight = (size?: string) => {
+    switch (size) {
+      case 'medium': return '350px'
+      case 'large': return '500px'
+      default: return '150px' // small
+    }
+  }
+
+
+
+  return (
+    <Card
+      data-testid="note-card"
+      data-draggable="true"
+      data-note-id={note.id}
+      data-size={optimisticNote.size}
+      style={{ minHeight: getMinHeight(optimisticNote.size) }}
+      draggable={true}
+      onDragStart={(e) => {
+        e.dataTransfer.setData('text/plain', note.id)
+        e.dataTransfer.effectAllowed = 'move'
+        e.dataTransfer.setData('text/html', '') // Prevent ghost image in some browsers
+        onDragStart?.(note.id)
+      }}
+      onDragEnd={() => onDragEnd?.()}
+      className={cn(
+        'note-card group relative rounded-2xl overflow-hidden p-5 border shadow-sm',
+        'transition-all duration-200 ease-out',
+        'hover:shadow-xl hover:-translate-y-1',
+        colorClasses.bg,
+        colorClasses.card,
+        colorClasses.hover,
+        colorClasses.hover,
+        isDragging && 'shadow-2xl' // Removed opacity, scale, and rotation for clean drag
+      )}
+      onClick={(e) => {
+        // Only trigger edit if not clicking on buttons
+        const target = e.target as HTMLElement
+        if (!target.closest('button') && !target.closest('[role="checkbox"]') && !target.closest('.muuri-drag-handle') && !target.closest('.drag-handle')) {
+          // For shared notes, pass readOnly flag
+          onEdit?.(note, !!isSharedNote) // Pass second parameter as readOnly flag (convert to boolean)
+        }
+      }}
+    >
+      {/* Drag Handle - Only visible on mobile/touch devices */}
+      <div
+        className="muuri-drag-handle absolute top-2 left-2 z-20 cursor-grab active:cursor-grabbing p-2 md:hidden"
+        aria-label={t('notes.dragToReorder') || 'Drag to reorder'}
+        title={t('notes.dragToReorder') || 'Drag to reorder'}
+      >
+        <GripVertical className="h-5 w-5 text-muted-foreground" />
+      </div>
+
+      {/* Move to Notebook Dropdown Menu */}
+      <div onClick={(e) => e.stopPropagation()} className="absolute top-2 right-2 z-20">
+        <DropdownMenu open={showNotebookMenu} onOpenChange={setShowNotebookMenu}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0 bg-primary/10 dark:bg-primary/20 hover:bg-primary/20 dark:hover:bg-primary/30 text-primary dark:text-primary-foreground"
+              title={t('notebookSuggestion.moveToNotebook')}
+            >
+              <FolderOpen className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+              {t('notebookSuggestion.moveToNotebook')}
+            </div>
+            <DropdownMenuItem onClick={() => handleMoveToNotebook(null)}>
+              <StickyNote className="h-4 w-4 mr-2" />
+              {t('notebookSuggestion.generalNotes')}
+            </DropdownMenuItem>
+            {notebooks.map((notebook: any) => {
+              const NotebookIcon = getNotebookIcon(notebook.icon || 'folder')
+              return (
+                <DropdownMenuItem
+                  key={notebook.id}
+                  onClick={() => handleMoveToNotebook(notebook.id)}
+                >
+                  <NotebookIcon className="h-4 w-4 mr-2" />
+                  {notebook.name}
+                </DropdownMenuItem>
+              )
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Pin Button - Visible on hover or if pinned */}
+      <Button
+        variant="ghost"
+        size="sm"
+        data-testid="pin-button"
+        className={cn(
+          "absolute top-2 right-12 z-20 min-h-[44px] min-w-[44px] h-8 w-8 p-0 rounded-md transition-opacity",
+          optimisticNote.isPinned ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+        )}
+        onClick={(e) => {
+          e.stopPropagation()
+          handleTogglePin()
+        }}
+      >
+        <Pin
+          className={cn("h-4 w-4", optimisticNote.isPinned ? "fill-current text-primary" : "text-muted-foreground")}
+        />
+      </Button>
+
+
+
+      {/* Reminder Icon - Move slightly if pin button is there */}
+      {note.reminder && new Date(note.reminder) > new Date() && (
+        <Bell
+          className="absolute top-3 right-10 h-4 w-4 text-primary"
+        />
+      )}
+
+      {/* Memory Echo Badges - Fusion + Connections (BEFORE Title) */}
+      <div className="flex flex-wrap gap-1 mb-2">
+        {/* Fusion Badge with remove button */}
+        {note.autoGenerated && (
+          <div className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 border border-purple-200 dark:border-purple-800 flex items-center gap-1 group/badge relative">
+            <Link2 className="h-2.5 w-2.5" />
+            {t('memoryEcho.fused')}
+            <button
+              onClick={handleRemoveFusedBadge}
+              className="ml-1 opacity-0 group-hover/badge:opacity-100 hover:opacity-100 transition-opacity"
+              title={t('notes.remove') || 'Remove'}
+            >
+              <Trash2 className="h-2.5 w-2.5" />
+            </button>
+          </div>
+        )}
+
+        {/* Connections Badge */}
+        <ConnectionsBadge
+          noteId={note.id}
+          onClick={() => {
+            // Only open overlay if note is NOT open in editor
+            // (to avoid having 2 Dialogs with 2 close buttons)
+            if (!isNoteOpenInEditor) {
+              setShowConnectionsOverlay(true)
+            }
+          }}
+        />
+      </div>
+
+      {/* Title */}
+      {optimisticNote.title && (
+        <h3 className="text-base font-medium mb-2 pr-10 text-foreground">
+          {optimisticNote.title}
+        </h3>
+      )}
+
+      {/* Search Match Type Badge */}
+      {optimisticNote.matchType && (
+        <Badge
+          variant={optimisticNote.matchType === 'exact' ? 'default' : 'secondary'}
+          className={cn(
+            'mb-2 text-xs',
+            optimisticNote.matchType === 'exact'
+              ? 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800'
+              : 'bg-primary/10 text-primary border-primary/20 dark:bg-primary/20 dark:text-primary-foreground'
+          )}
+        >
+          {t(`semanticSearch.${optimisticNote.matchType === 'exact' ? 'exactMatch' : 'related'}`)}
+        </Badge>
+      )}
+
+      {/* Shared badge */}
+      {isSharedNote && owner && (
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-primary dark:text-primary-foreground font-medium">
+            {t('notes.sharedBy')} {owner.name || owner.email}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 px-2 text-xs text-gray-500 hover:text-red-600 dark:hover:text-red-400"
+            onClick={(e) => {
+              e.stopPropagation()
+              handleLeaveShare()
+            }}
+          >
+            <LogOut className="h-3 w-3 mr-1" />
+            {t('notes.leaveShare')}
+          </Button>
+        </div>
+      )}
+
+      {/* Images Component */}
+      <NoteImages images={optimisticNote.images || []} title={optimisticNote.title} />
+
+      {/* Link Previews */}
+      {Array.isArray(optimisticNote.links) && optimisticNote.links.length > 0 && (
+        <div className="flex flex-col gap-2 mb-2">
+          {optimisticNote.links.map((link, idx) => (
+            <a
+              key={idx}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block border rounded-md overflow-hidden bg-white/50 dark:bg-black/20 hover:bg-white/80 dark:hover:bg-black/40 transition-colors"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {link.imageUrl && (
+                <div className="h-24 bg-cover bg-center" style={{ backgroundImage: `url(${link.imageUrl})` }} />
+              )}
+              <div className="p-2">
+                <h4 className="font-medium text-xs truncate text-gray-900 dark:text-gray-100">{link.title || link.url}</h4>
+                {link.description && <p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-2 mt-0.5">{link.description}</p>}
+                <span className="text-[10px] text-primary mt-1 block">
+                  {new URL(link.url).hostname}
+                </span>
+              </div>
+            </a>
+          ))}
+        </div>
+      )}
+
+      {/* Content */}
+      {optimisticNote.type === 'text' ? (
+        <div className="text-sm text-foreground line-clamp-10">
+          <MarkdownContent content={optimisticNote.content} />
+        </div>
+      ) : (
+        <NoteChecklist
+          items={optimisticNote.checkItems || []}
+          onToggleItem={handleCheckItem}
+        />
+      )}
+
+      {/* Labels - using shared LabelBadge component */}
+      {optimisticNote.notebookId && Array.isArray(optimisticNote.labels) && optimisticNote.labels.length > 0 && (
+        <div className="flex flex-wrap gap-1 mt-3">
+          {optimisticNote.labels.map((label) => (
+            <LabelBadge key={label} label={label} />
+          ))}
+        </div>
+      )}
+
+      {/* Footer with Date only */}
+      <div className="mt-3 flex items-center justify-end">
+        {/* Creation Date */}
+        <div className="text-xs text-muted-foreground">
+          {formatDistanceToNow(new Date(note.createdAt), { addSuffix: true, locale: getDateLocale(language) })}
+        </div>
+      </div>
+
+      {/* Owner Avatar - Aligned with action buttons at bottom */}
+      {owner && (
+        <div
+          className={cn(
+            "absolute bottom-2 left-2 z-20",
+            "w-6 h-6 rounded-full text-white text-[10px] font-semibold flex items-center justify-center",
+            getAvatarColor(owner.name || owner.email || 'Unknown')
+          )}
+          title={owner.name || owner.email || 'Unknown'}
+        >
+          {getInitials(owner.name || owner.email || '??')}
+        </div>
+      )}
+
+      {/* Action Bar Component - Always show for now to fix regression */}
+      {true && (
+        <NoteActions
+          isPinned={optimisticNote.isPinned}
+          isArchived={optimisticNote.isArchived}
+          currentColor={optimisticNote.color}
+          currentSize={optimisticNote.size as 'small' | 'medium' | 'large'}
+          onTogglePin={handleTogglePin}
+          onToggleArchive={handleToggleArchive}
+          onColorChange={handleColorChange}
+          onSizeChange={handleSizeChange}
+          onDelete={() => setShowDeleteDialog(true)}
+          onShareCollaborators={() => setShowCollaboratorDialog(true)}
+          className="absolute bottom-0 left-0 right-0 p-2 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity"
+        />
+      )}
+
+      {/* Collaborator Dialog */}
+      {currentUserId && note.userId && (
+        <div onClick={(e) => e.stopPropagation()}>
+          <CollaboratorDialog
+            open={showCollaboratorDialog}
+            onOpenChange={setShowCollaboratorDialog}
+            noteId={note.id}
+            noteOwnerId={note.userId}
+            currentUserId={currentUserId}
+          />
+        </div>
+      )}
+
+      {/* Connections Overlay */}
+      <div onClick={(e) => e.stopPropagation()}>
+        <ConnectionsOverlay
+          isOpen={showConnectionsOverlay}
+          onClose={() => setShowConnectionsOverlay(false)}
+          noteId={note.id}
+          onOpenNote={(noteId) => {
+            // Find the note and open it
+            onEdit?.(note, false)
+          }}
+          onCompareNotes={(noteIds) => {
+            setComparisonNotes(noteIds)
+          }}
+        />
+      </div>
+
+      {/* Comparison Modal */}
+      {comparisonNotes && comparisonNotesData.length > 0 && (
+        <div onClick={(e) => e.stopPropagation()}>
+          <ComparisonModal
+            isOpen={!!comparisonNotes}
+            onClose={() => setComparisonNotes(null)}
+            notes={comparisonNotesData}
+            onOpenNote={(noteId) => {
+              const foundNote = comparisonNotesData.find(n => n.id === noteId)
+              if (foundNote) {
+                onEdit?.(foundNote, false)
+              }
+            }}
+          />
+        </div>
+      )}
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('notes.confirmDeleteTitle') || t('notes.delete')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('notes.confirmDelete') || 'Are you sure you want to delete this note?'}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('common.cancel') || 'Cancel'}</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" onClick={handleDelete}>
+              {t('notes.delete') || 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Card>
+  )
+})
--- a/keep-notes/.backup-keep/notes-main-section.tsx
+++ b/keep-notes/.backup-keep/notes-main-section.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import { Note } from '@/lib/types'
+import { NotesTabsView } from '@/components/notes-tabs-view'
+
+const MasonryGridLazy = dynamic(
+  () => import('@/components/masonry-grid').then((m) => m.MasonryGrid),
+  {
+    ssr: false,
+    loading: () => (
+      <div
+        className="min-h-[200px] rounded-xl border border-dashed border-muted-foreground/20 bg-muted/30 animate-pulse"
+        aria-hidden
+      />
+    ),
+  }
+)
+
+export type NotesViewMode = 'masonry' | 'tabs'
+
+interface NotesMainSectionProps {
+  notes: Note[]
+  viewMode: NotesViewMode
+  onEdit?: (note: Note, readOnly?: boolean) => void
+  onSizeChange?: (noteId: string, size: 'small' | 'medium' | 'large') => void
+  currentNotebookId?: string | null
+}
+
+export function NotesMainSection({ notes, viewMode, onEdit, onSizeChange, currentNotebookId }: NotesMainSectionProps) {
+  if (viewMode === 'tabs') {
+    return (
+      <div className="flex min-h-0 flex-1 flex-col" data-testid="notes-grid-tabs-wrap">
+        <NotesTabsView notes={notes} onEdit={onEdit} currentNotebookId={currentNotebookId} />
+      </div>
+    )
+  }
+
+  return (
+    <div data-testid="notes-grid">
+      <MasonryGridLazy notes={notes} onEdit={onEdit} onSizeChange={onSizeChange} />
+    </div>
+  )
+}