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/ui/toast.tsx

@@ -1,85 +1,27 @@
 'use client'
 
-import * as React from "react"
-import { X } from "lucide-react"
-import { cn } from "@/lib/utils"
+import { Toaster as SonnerToaster, toast as sonnerToast } from 'sonner'
 
-export interface ToastProps {
-  id: string
-  message: string
-  type?: 'success' | 'error' | 'info' | 'warning'
-  duration?: number
-  onClose: (id: string) => void
-}
-
-export function Toast({ id, message, type = 'info', duration = 3000, onClose }: ToastProps) {
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
-      onClose(id)
-    }, duration)
-
-    return () => clearTimeout(timer)
-  }, [id, duration, onClose])
-
-  const bgColors = {
-    success: 'bg-green-600',
-    error: 'bg-red-600',
-    info: 'bg-blue-600',
-    warning: 'bg-yellow-600'
-  }
+// Re-export toast functions from Sonner
+export const toast = sonnerToast
 
+// Toaster component with custom styles
+export function Toaster() {
   return (
-    <div
-      className={cn(
-        "flex items-center gap-2 rounded-lg px-4 py-3 text-sm text-white shadow-lg animate-in slide-in-from-top-5",
-        bgColors[type]
-      )}
-    >
-      <span className="flex-1">{message}</span>
-      <button
-        onClick={() => onClose(id)}
-        className="rounded-full p-1 hover:bg-white/20 transition-colors"
-      >
-        <X className="h-4 w-4" />
-      </button>
-    </div>
+    <SonnerToaster
+      position="top-right"
+      expand={false}
+      richColors
+      closeButton
+      duration={3000}
+      toastOptions={{
+        classNames: {
+          toast: 'toast pointer-events-auto',
+          description: 'toast-description',
+          actionButton: 'toast-action-button',
+          closeButton: 'toast-close-button',
+        },
+      }}
+    />
   )
 }
-
-export interface ToastContextType {
-  addToast: (message: string, type?: 'success' | 'error' | 'info' | 'warning') => void
-}
-
-const ToastContext = React.createContext<ToastContextType | null>(null)
-
-export function ToastProvider({ children }: { children: React.ReactNode }) {
-  const [toasts, setToasts] = React.useState<Array<Omit<ToastProps, 'onClose'>>>([])
-
-  const addToast = React.useCallback((message: string, type: 'success' | 'error' | 'info' | 'warning' = 'info') => {
-    const id = Math.random().toString(36).substring(7)
-    setToasts(prev => [...prev, { id, message, type }])
-  }, [])
-
-  const removeToast = React.useCallback((id: string) => {
-    setToasts(prev => prev.filter(toast => toast.id !== id))
-  }, [])
-
-  return (
-    <ToastContext.Provider value={{ addToast }}>
-      {children}
-      <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80">
-        {toasts.map(toast => (
-          <Toast key={toast.id} {...toast} onClose={removeToast} />
-        ))}
-      </div>
-    </ToastContext.Provider>
-  )
-}
-
-export function useToast() {
-  const context = React.useContext(ToastContext)
-  if (!context) {
-    throw new Error('useToast must be used within ToastProvider')
-  }
-  return context
-}