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/app/(main)/page.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { Note } from '@/lib/types'
+import { getAllNotes, searchNotes } from '@/app/actions/notes'
+import { NoteInput } from '@/components/note-input'
+import { MasonryGrid } from '@/components/masonry-grid'
+import { useLabels } from '@/context/LabelContext'
+import { useNoteRefresh } from '@/context/NoteRefreshContext'
+import { useReminderCheck } from '@/hooks/use-reminder-check'
+
+export default function HomePage() {
+  const searchParams = useSearchParams()
+  const [notes, setNotes] = useState<Note[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const { refreshKey } = useNoteRefresh()
+  const { labels } = useLabels()
+
+  // Enable reminder notifications
+  useReminderCheck(notes)
+
+  useEffect(() => {
+    const loadNotes = async () => {
+      setIsLoading(true)
+      const search = searchParams.get('search')
+      const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
+      const colorFilter = searchParams.get('color')
+
+      let allNotes = search ? await searchNotes(search) : await getAllNotes()
+
+      // Filter by selected labels
+      if (labelFilter.length > 0) {
+        allNotes = allNotes.filter((note: any) =>
+          note.labels?.some((label: string) => labelFilter.includes(label))
+        )
+      }
+
+      // Filter by color (filter notes that have labels with this color)
+      // Note: We use a ref-like pattern to avoid including labels in dependencies
+      // This prevents dialog closing when adding new labels
+      if (colorFilter) {
+        const labelNamesWithColor = labels
+          .filter((label: any) => label.color === colorFilter)
+          .map((label: any) => label.name)
+
+        allNotes = allNotes.filter((note: any) =>
+          note.labels?.some((label: string) => labelNamesWithColor.includes(label))
+        )
+      }
+
+      setNotes(allNotes)
+      setIsLoading(false)
+    }
+
+    loadNotes()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams, refreshKey]) // Intentionally omit 'labels' to prevent reload when adding tags
+  return (
+    <main className="container mx-auto px-4 py-8 max-w-7xl">
+      <NoteInput />
+      {isLoading ? (
+        <div className="text-center py-8 text-gray-500">Loading...</div>
+      ) : (
+        <MasonryGrid notes={notes} />
+      )}
+    </main>
+  )
+}