Add safe database migration workflow and note history infrastructure.

This introduces guarded migrations with automatic backups, fixes note creation after DB reset, and wires snapshot/restore history across notes surfaces.

Momento-main/momento/memento-note/components/notes-main-section.tsx

@@ -0,0 +1,69 @@
+'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
+  noteHistoryEnabled?: boolean
+  onOpenHistory?: (note: Note) => void
+  onEnableHistory?: () => Promise<void>
+}
+
+export function NotesMainSection({
+  notes,
+  viewMode,
+  onEdit,
+  onSizeChange,
+  currentNotebookId,
+  noteHistoryEnabled = false,
+  onOpenHistory,
+  onEnableHistory,
+}: 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}
+          noteHistoryEnabled={noteHistoryEnabled}
+          onOpenHistory={onOpenHistory}
+          onEnableHistory={onEnableHistory}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div data-testid="notes-grid">
+      <MasonryGridLazy
+        notes={notes}
+        onEdit={onEdit}
+        onSizeChange={onSizeChange}
+        noteHistoryEnabled={noteHistoryEnabled}
+        onOpenHistory={onOpenHistory}
+      />
+    </div>
+  )
+}