chore: snapshot before performance optimization

keep-notes/components/note-card.tsx

@@ -10,6 +10,16 @@ import {
   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'
@@ -149,6 +159,7 @@ export const NoteCard = memo(function NoteCard({
   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)
@@ -232,16 +243,13 @@ export const NoteCard = memo(function NoteCard({
   }, [note.id, note.userId, isSharedNote, currentUserId, session?.user])
 
   const handleDelete = async () => {
-    if (confirm(t('notes.confirmDelete'))) {
-      setIsDeleting(true)
-      try {
-        await deleteNote(note.id)
-        // Refresh global labels to reflect garbage collection
-        await refreshLabels()
-      } catch (error) {
-        console.error('Failed to delete note:', error)
-        setIsDeleting(false)
-      }
+    setIsDeleting(true)
+    try {
+      await deleteNote(note.id)
+      await refreshLabels()
+    } catch (error) {
+      console.error('Failed to delete note:', error)
+      setIsDeleting(false)
     }
   }
 
@@ -296,14 +304,14 @@ export const NoteCard = memo(function NoteCard({
   }
 
   const handleCheckItem = async (checkItemId: string) => {
-    if (note.type === 'checklist' && note.checkItems) {
+    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 })
-        router.refresh()
+        // No router.refresh() — optimistic update is sufficient and avoids grid rebuild
       })
     }
   }
@@ -324,7 +332,7 @@ export const NoteCard = memo(function NoteCard({
     startTransition(async () => {
       addOptimisticNote({ autoGenerated: null })
       await removeFusedBadge(note.id)
-      router.refresh()
+      // No router.refresh() — optimistic update is sufficient and avoids grid rebuild
     })
   }
 
@@ -525,7 +533,7 @@ export const NoteCard = memo(function NoteCard({
       <NoteImages images={optimisticNote.images || []} title={optimisticNote.title} />
 
       {/* Link Previews */}
-      {optimisticNote.links && optimisticNote.links.length > 0 && (
+      {Array.isArray(optimisticNote.links) && optimisticNote.links.length > 0 && (
         <div className="flex flex-col gap-2 mb-2">
           {optimisticNote.links.map((link, idx) => (
             <a
@@ -564,7 +572,7 @@ export const NoteCard = memo(function NoteCard({
       )}
 
       {/* Labels - using shared LabelBadge component */}
-      {optimisticNote.notebookId && optimisticNote.labels && optimisticNote.labels.length > 0 && (
+      {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} />
@@ -605,7 +613,7 @@ export const NoteCard = memo(function NoteCard({
           onToggleArchive={handleToggleArchive}
           onColorChange={handleColorChange}
           onSizeChange={handleSizeChange}
-          onDelete={handleDelete}
+          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"
         />
@@ -656,6 +664,24 @@ export const NoteCard = memo(function NoteCard({
           />
         </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>
   )
 })