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)/support/page.tsx

@@ -0,0 +1,156 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+
+export default function SupportPage() {
+  return (
+    <div className="container mx-auto py-10 max-w-4xl">
+      <div className="text-center mb-10">
+        <h1 className="text-4xl font-bold mb-4">
+          Support Memento Development ☕
+        </h1>
+        <p className="text-muted-foreground text-lg">
+          Memento is 100% free and open-source. Your support helps keep it that way.
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 mb-10">
+        {/* Ko-fi Card */}
+        <Card className="border-2 border-primary">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <span className="text-2xl">☕</span>
+              Buy me a coffee
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="mb-4">
+              Make a one-time donation or become a monthly supporter.
+            </p>
+            <Button asChild className="w-full">
+              <a href="https://ko-fi.com/yourusername" target="_blank" rel="noopener noreferrer">
+                Donate on Ko-fi
+              </a>
+            </Button>
+            <p className="text-xs text-muted-foreground mt-2">
+              No platform fees • Instant payouts • Secure
+            </p>
+          </CardContent>
+        </Card>
+
+        {/* GitHub Sponsors Card */}
+        <Card className="border-2 border-primary">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <span className="text-2xl">💚</span>
+              Sponsor on GitHub
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="mb-4">
+              Become a monthly sponsor and get recognition.
+            </p>
+            <Button asChild variant="outline" className="w-full">
+              <a href="https://github.com/sponsors/yourusername" target="_blank" rel="noopener noreferrer">
+                Sponsor on GitHub
+              </a>
+            </Button>
+            <p className="text-xs text-muted-foreground mt-2">
+              Recurring support • Public recognition • Developer-focused
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* How Donations Are Used */}
+      <Card className="mb-10">
+        <CardHeader>
+          <CardTitle>How Your Support Helps</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid md:grid-cols-2 gap-4">
+            <div>
+              <h3 className="font-semibold mb-2">💰 Direct Impact</h3>
+              <ul className="space-y-2 text-sm">
+                <li>☕ Keeps me fueled with coffee</li>
+                <li>🐛 Covers hosting and server costs</li>
+                <li>✨ Funds development of new features</li>
+                <li>📚 Improves documentation</li>
+                <li>🌍 Keeps Memento 100% open-source</li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-2">🎁 Sponsor Perks</h3>
+              <ul className="space-y-2 text-sm">
+                <li>🥉 $5/month - Bronze: Name in supporters list</li>
+                <li>🥈 $15/month - Silver: Priority feature requests</li>
+                <li>🥇 $50/month - Gold: Logo in footer, priority support</li>
+                <li>💎 $100/month - Platinum: Custom features, consulting</li>
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Transparency */}
+      <Card>
+        <CardHeader>
+          <CardTitle>💡 Transparency</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm mb-4">
+            I believe in complete transparency. Here's how donations are used:
+          </p>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span>Hosting & servers:</span>
+              <span className="font-mono">~$20/month</span>
+            </div>
+            <div className="flex justify-between">
+              <span>Domain & SSL:</span>
+              <span className="font-mono">~$15/year</span>
+            </div>
+            <div className="flex justify-between">
+              <span>AI API costs:</span>
+              <span className="font-mono">~$30/month</span>
+            </div>
+            <div className="flex justify-between border-t pt-2">
+              <span className="font-semibold">Total expenses:</span>
+              <span className="font-mono font-semibold">~$50/month</span>
+            </div>
+          </div>
+          <p className="text-xs text-muted-foreground mt-4">
+            Any amount beyond these costs goes directly into improving Memento
+            and funding new features. Thank you for your support! 💚
+          </p>
+        </CardContent>
+      </Card>
+
+      {/* Alternative Ways to Support */}
+      <div className="mt-10 text-center">
+        <h2 className="text-2xl font-bold mb-4">Other Ways to Support</h2>
+        <div className="flex flex-wrap justify-center gap-4">
+          <Button variant="outline" asChild>
+            <a href="https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
+              ⭐ Star on GitHub
+            </a>
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="https://github.com/yourusername/memento/issues" target="_blank" rel="noopener noreferrer">
+              🐛 Report a bug
+            </a>
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
+              📝 Contribute code
+            </a>
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="https://twitter.com/intent/tweet?text=Check%20out%20Memento%20-%20a%20great%20open-source%20note-taking%20app!%20https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
+              🐦 Share on Twitter
+            </a>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}