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-actions.tsx

@@ -13,6 +13,8 @@ import {
   Palette,
   Pin,
   Trash2,
+  Users,
+  Maximize2,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { NOTE_COLORS } from "@/lib/types"
@@ -21,10 +23,13 @@ interface NoteActionsProps {
   isPinned: boolean
   isArchived: boolean
   currentColor: string
+  currentSize?: 'small' | 'medium' | 'large'
   onTogglePin: () => void
   onToggleArchive: () => void
   onColorChange: (color: string) => void
+  onSizeChange?: (size: 'small' | 'medium' | 'large') => void
   onDelete: () => void
+  onShareCollaborators?: () => void
   className?: string
 }
 
@@ -32,10 +37,13 @@ export function NoteActions({
   isPinned,
   isArchived,
   currentColor,
+  currentSize = 'small',
   onTogglePin,
   onToggleArchive,
   onColorChange,
+  onSizeChange,
   onDelete,
+  onShareCollaborators,
   className
 }: NoteActionsProps) {
   return (
@@ -43,17 +51,6 @@ export function NoteActions({
       className={cn("flex items-center justify-end gap-1", className)}
       onClick={(e) => e.stopPropagation()}
     >
-      {/* Pin Button */}
-      <Button
-        variant="ghost"
-        size="sm"
-        className="h-8 w-8 p-0"
-        onClick={onTogglePin}
-        title={isPinned ? 'Unpin' : 'Pin'}
-      >
-        <Pin className={cn('h-4 w-4', isPinned && 'fill-current')} />
-      </Button>
-
       {/* Color Palette */}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
@@ -82,7 +79,7 @@ export function NoteActions({
       {/* More Options */}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0" aria-label="More options">
             <MoreVertical className="h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
@@ -100,6 +97,46 @@ export function NoteActions({
               </>
             )}
           </DropdownMenuItem>
+
+          {/* Size Selector */}
+          {onSizeChange && (
+            <>
+              <DropdownMenuSeparator />
+              <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                Size
+              </div>
+              {(['small', 'medium', 'large'] as const).map((size) => (
+                <DropdownMenuItem
+                  key={size}
+                  onClick={() => onSizeChange(size)}
+                  className={cn(
+                    "capitalize",
+                    currentSize === size && "bg-accent"
+                  )}
+                >
+                  <Maximize2 className="h-4 w-4 mr-2" />
+                  {size}
+                </DropdownMenuItem>
+              ))}
+            </>
+          )}
+
+          {/* Collaborators */}
+          {onShareCollaborators && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onShareCollaborators()
+                }}
+              >
+                <Users className="h-4 w-4 mr-2" />
+                Share with collaborators
+              </DropdownMenuItem>
+            </>
+          )}
+
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={onDelete} className="text-red-600 dark:text-red-400">
             <Trash2 className="h-4 w-4 mr-2" />