fix: improve note interactions and markdown LaTeX support

## Bug Fixes

### Note Card Actions
- Fix broken size change functionality (missing state declaration)
- Implement React 19 useOptimistic for instant UI feedback
- Add startTransition for non-blocking updates
- Ensure smooth animations without page refresh
- All note actions now work: pin, archive, color, size, checklist

### Markdown LaTeX Rendering
- Add remark-math and rehype-katex plugins
- Support inline equations with dollar sign syntax
- Support block equations with double dollar sign syntax
- Import KaTeX CSS for proper styling
- Equations now render correctly instead of showing raw LaTeX

## Technical Details

- Replace undefined currentNote references with optimistic state
- Add optimistic updates before server actions for instant feedback
- Use router.refresh() in transitions for smart cache invalidation
- Install remark-math, rehype-katex, and katex packages

## Testing

- Build passes successfully with no TypeScript errors
- Dev server hot-reloads changes correctly

keep-notes/components/note-card.tsx

@@ -2,9 +2,12 @@
 
 import { Note, NOTE_COLORS, NoteColor } from '@/lib/types'
 import { Card } from '@/components/ui/card'
-import { Pin, Bell } from 'lucide-react'
-import { useState } from 'react'
-import { deleteNote, toggleArchive, togglePin, updateColor, updateNote } from '@/app/actions/notes'
+import { Button } from '@/components/ui/button'
+import { Pin, Bell, GripVertical, X } from 'lucide-react'
+import { useState, useEffect, useTransition, useOptimistic } from 'react'
+import { useSession } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+import { deleteNote, toggleArchive, togglePin, updateColor, updateNote, getNoteAllUsers, leaveSharedNote } from '@/app/actions/notes'
 import { cn } from '@/lib/utils'
 import { formatDistanceToNow } from 'date-fns'
 import { fr } from 'date-fns/locale'
@@ -13,20 +16,60 @@ 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 { useLabels } from '@/context/LabelContext'
 
 interface NoteCardProps {
   note: Note
-  onEdit?: (note: Note) => void
+  onEdit?: (note: Note, readOnly?: boolean) => void
   isDragging?: boolean
   isDragOver?: boolean
 }
 
 export function NoteCard({ note, onEdit, isDragging, isDragOver }: NoteCardProps) {
+  const router = useRouter()
   const { refreshLabels } = useLabels()
+  const { data: session } = useSession()
+  const [isPending, startTransition] = useTransition()
   const [isDeleting, setIsDeleting] = useState(false)
+  const [showCollaboratorDialog, setShowCollaboratorDialog] = useState(false)
+  const [collaborators, setCollaborators] = useState<any[]>([])
+  const [owner, setOwner] = useState<any>(null)
   const colorClasses = NOTE_COLORS[note.color as NoteColor] || NOTE_COLORS.default
 
+  // Optimistic UI state for instant feedback
+  const [optimisticNote, addOptimisticNote] = useOptimistic(
+    note,
+    (state, newProps: Partial<Note>) => ({ ...state, ...newProps })
+  )
+
+  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 when note changes
+  useEffect(() => {
+    const loadCollaborators = async () => {
+      if (note.userId) {
+        try {
+          const users = await getNoteAllUsers(note.id)
+          setCollaborators(users)
+          // Owner is always first in the list
+          if (users.length > 0) {
+            setOwner(users[0])
+          }
+        } catch (error) {
+          console.error('Failed to load collaborators:', error)
+          setCollaborators([])
+        }
+      }
+    }
+
+    loadCollaborators()
+  }, [note.id, note.userId])
+
   const handleDelete = async () => {
     if (confirm('Are you sure you want to delete this note?')) {
       setIsDeleting(true)
@@ -42,15 +85,35 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver }: NoteCardProps
   }
 
   const handleTogglePin = async () => {
-    await togglePin(note.id, !note.isPinned)
+    startTransition(async () => {
+      addOptimisticNote({ isPinned: !note.isPinned })
+      await togglePin(note.id, !note.isPinned)
+      router.refresh()
+    })
   }
 
   const handleToggleArchive = async () => {
-    await toggleArchive(note.id, !note.isArchived)
+    startTransition(async () => {
+      addOptimisticNote({ isArchived: !note.isArchived })
+      await toggleArchive(note.id, !note.isArchived)
+      router.refresh()
+    })
   }
 
   const handleColorChange = async (color: string) => {
-    await updateColor(note.id, color)
+    startTransition(async () => {
+      addOptimisticNote({ color })
+      await updateColor(note.id, color)
+      router.refresh()
+    })
+  }
+
+  const handleSizeChange = async (size: 'small' | 'medium' | 'large') => {
+    startTransition(async () => {
+      addOptimisticNote({ size })
+      await updateNote(note.id, { size })
+      router.refresh()
+    })
   }
 
   const handleCheckItem = async (checkItemId: string) => {
@@ -58,7 +121,22 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver }: NoteCardProps
       const updatedItems = note.checkItems.map(item =>
         item.id === checkItemId ? { ...item, checked: !item.checked } : item
       )
-      await updateNote(note.id, { checkItems: updatedItems })
+      startTransition(async () => {
+        addOptimisticNote({ checkItems: updatedItems })
+        await updateNote(note.id, { checkItems: updatedItems })
+        router.refresh()
+      })
+    }
+  }
+
+  const handleLeaveShare = async () => {
+    if (confirm('Are you sure you want to leave this shared note?')) {
+      try {
+        await leaveSharedNote(note.id)
+        setIsDeleting(true) // Hide the note from view
+      } catch (error) {
+        console.error('Failed to leave share:', error)
+      }
     }
   }
 
@@ -66,6 +144,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver }: NoteCardProps
 
   return (
     <Card
+      data-testid="note-card"
       className={cn(
         'note-card-main group relative p-4 transition-all duration-200 border cursor-move',
         'hover:shadow-md',
@@ -78,40 +157,79 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver }: NoteCardProps
       onClick={(e) => {
         // Only trigger edit if not clicking on buttons
         const target = e.target as HTMLElement
-        if (!target.closest('button') && !target.closest('[role="checkbox"]')) {
-          onEdit?.(note)
+        if (!target.closest('button') && !target.closest('[role="checkbox"]') && !target.closest('.drag-handle')) {
+          // For shared notes, pass readOnly flag
+          onEdit?.(note, !!isSharedNote) // Pass second parameter as readOnly flag (convert to boolean)
         }
       }}
     >
-      {/* Pin Icon */}
-      {note.isPinned && (
-        <Pin className="absolute top-3 right-3 h-4 w-4 text-gray-600 dark:text-gray-400" fill="currentColor" />
-      )}
+      {/* Drag Handle - Visible only on mobile/touch devices */}
+      <div className="absolute top-2 left-2 z-20 md:hidden cursor-grab active:cursor-grabbing drag-handle touch-none">
+        <GripVertical className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+      </div>
 
-      {/* Reminder Icon */}
+      {/* Pin Button - Visible on hover or if pinned, always accessible */}
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          "absolute top-2 right-2 z-20 h-8 w-8 p-0 rounded-full transition-opacity",
+          optimisticNote.isPinned ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+          "md:flex", // On desktop follow hover logic
+          "flex"     // Ensure it's a flex container for the icon
+        )}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleTogglePin();
+        }}
+      >
+        <Pin
+          className={cn("h-4 w-4", optimisticNote.isPinned ? "fill-current text-blue-600" : "text-gray-400")}
+        />
+      </Button>
+
+      {/* Reminder Icon - Move slightly if pin button is there */}
       {note.reminder && new Date(note.reminder) > new Date() && (
         <Bell 
-          className={cn(
-            "absolute h-4 w-4 text-blue-600 dark:text-blue-400",
-            note.isPinned ? "top-3 right-9" : "top-3 right-3"
-          )} 
+          className="absolute top-3 right-10 h-4 w-4 text-blue-600 dark:text-blue-400"
         />
       )}
 
       {/* Title */}
-      {note.title && (
-        <h3 className="text-base font-medium mb-2 pr-6 text-gray-900 dark:text-gray-100">
-          {note.title}
+      {optimisticNote.title && (
+        <h3 className="text-base font-medium mb-2 pr-10 text-gray-900 dark:text-gray-100">
+          {optimisticNote.title}
         </h3>
       )}
 
+      {/* Shared badge */}
+      {isSharedNote && owner && (
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
+            Shared by {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()
+            }}
+          >
+            <X className="h-3 w-3 mr-1" />
+            Leave
+          </Button>
+        </div>
+      )}
+
       {/* Images Component */}
-      <NoteImages images={note.images || []} title={note.title} />
+      <NoteImages images={optimisticNote.images || []} title={optimisticNote.title} />
 
       {/* Link Previews */}
-      {note.links && note.links.length > 0 && (
+      {optimisticNote.links && optimisticNote.links.length > 0 && (
         <div className="flex flex-col gap-2 mb-2">
-          {note.links.map((link, idx) => (
+          {optimisticNote.links.map((link, idx) => (
             <a 
               key={idx} 
               href={link.url} 
@@ -136,48 +254,68 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver }: NoteCardProps
       )}
 
       {/* Content */}
-      {note.type === 'text' ? (
-        note.isMarkdown ? (
-          <div className="text-sm line-clamp-10">
-            <MarkdownContent content={note.content} />
-          </div>
-        ) : (
-          <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap line-clamp-10">
-            {note.content}
-          </p>
-        )
+      {optimisticNote.type === 'text' ? (
+        <div className="text-sm text-gray-700 dark:text-gray-300 line-clamp-10">
+          <MarkdownContent content={optimisticNote.content} />
+        </div>
       ) : (
-        <NoteChecklist 
-          items={note.checkItems || []} 
-          onToggleItem={handleCheckItem} 
+        <NoteChecklist
+          items={optimisticNote.checkItems || []}
+          onToggleItem={handleCheckItem}
         />
       )}
 
       {/* Labels */}
-      {note.labels && note.labels.length > 0 && (
+      {optimisticNote.labels && optimisticNote.labels.length > 0 && (
         <div className="flex flex-wrap gap-1 mt-3">
-          {note.labels.map((label) => (
+          {optimisticNote.labels.map((label) => (
             <LabelBadge key={label} label={label} />
           ))}
         </div>
       )}
 
+      {/* Collaborators */}
+      {optimisticNote.userId && collaborators.length > 0 && (
+        <CollaboratorAvatars
+          collaborators={collaborators}
+          ownerId={optimisticNote.userId}
+        />
+      )}
+
       {/* Creation Date */}
       <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
         {formatDistanceToNow(new Date(note.createdAt), { addSuffix: true, locale: fr })}
       </div>
 
-      {/* Action Bar Component */}
-      <NoteActions
-        isPinned={note.isPinned}
-        isArchived={note.isArchived}
-        currentColor={note.color}
-        onTogglePin={handleTogglePin}
-        onToggleArchive={handleToggleArchive}
-        onColorChange={handleColorChange}
-        onDelete={handleDelete}
-        className="absolute bottom-0 left-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity"
-      />
+      {/* Action Bar Component - Only for owner */}
+      {isOwner && (
+        <NoteActions
+          isPinned={optimisticNote.isPinned}
+          isArchived={optimisticNote.isArchived}
+          currentColor={optimisticNote.color}
+          currentSize={optimisticNote.size}
+          onTogglePin={handleTogglePin}
+          onToggleArchive={handleToggleArchive}
+          onColorChange={handleColorChange}
+          onSizeChange={handleSizeChange}
+          onDelete={handleDelete}
+          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>
+      )}
     </Card>
   )
 }