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
This commit is contained in:
2026-01-09 22:13:49 +01:00
parent 3c4b9d6176
commit 640fcb26f7
218 changed files with 51363 additions and 902 deletions

View File

@@ -1,10 +1,10 @@
import type { Metadata } from "next";
import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { HeaderWrapper } from "@/components/header-wrapper";
import { ToastProvider } from "@/components/ui/toast";
import { Toaster } from "@/components/ui/toast";
import { LabelProvider } from "@/context/LabelContext";
import { Sidebar } from "@/components/sidebar";
import { NoteRefreshProvider } from "@/context/NoteRefreshContext";
import { SessionProviderWrapper } from "@/components/session-provider-wrapper";
const inter = Inter({
subsets: ["latin"],
@@ -13,8 +13,24 @@ const inter = Inter({
export const metadata: Metadata = {
title: "Memento - Your Digital Notepad",
description: "A beautiful note-taking app inspired by Google Keep, built with Next.js 16",
manifest: "/manifest.json",
icons: {
icon: "/icons/icon-512.svg",
apple: "/icons/icon-512.svg",
},
appleWebApp: {
capable: true,
statusBarStyle: "default",
title: "Memento",
},
};
export const viewport: Viewport = {
themeColor: "#f59e0b",
};
export const dynamic = "force-dynamic";
export default function RootLayout({
children,
}: Readonly<{
@@ -23,19 +39,14 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<ToastProvider>
<LabelProvider>
<div className="flex min-h-screen flex-col">
<HeaderWrapper />
<div className="flex flex-1">
<Sidebar className="shrink-0 border-r" />
<main className="flex-1">
{children}
</main>
</div>
</div>
</LabelProvider>
</ToastProvider>
<SessionProviderWrapper>
<NoteRefreshProvider>
<LabelProvider>
{children}
</LabelProvider>
</NoteRefreshProvider>
<Toaster />
</SessionProviderWrapper>
</body>
</html>
);