4f9d817ddb
The /memory dashboard page rendered a black screen when MemoryCategory::Custom
was serialized by serde's derived impl as a tagged object {"custom":"..."} but
the frontend expected a plain string. No navigation was possible without using
the browser Back button.
Changes:
- src/memory/traits.rs: replace derived serde impls with custom serialize
(delegates to Display, emits plain snake_case string) and deserialize
(parses known variants by name, falls through to Custom(s) for unknown).
Adds memory_category_serde_uses_snake_case and memory_category_custom_roundtrip
tests. No persistent storage migration needed — all backends (SQLite, Markdown,
Postgres) use their own category_to_str/str_to_category helpers and never
read serde-serialized category values back from disk.
- web/src/App.tsx: export ErrorBoundary class so render crashes surface a
recoverable UI instead of a black screen. Adds aria-live="polite" to the
pairing error paragraph for screen reader accessibility.
- web/src/components/layout/Layout.tsx: wrap Outlet in ErrorBoundary keyed
by pathname so the navigation shell stays mounted during a page crash and
the boundary resets on route change.
Co-authored-by: Argenis <theonlyhennygod@gmail.com>
29 lines
947 B
TypeScript
29 lines
947 B
TypeScript
import { Outlet, useLocation } from 'react-router-dom';
|
|
import Sidebar from '@/components/layout/Sidebar';
|
|
import Header from '@/components/layout/Header';
|
|
import { ErrorBoundary } from '@/App';
|
|
|
|
export default function Layout() {
|
|
const { pathname } = useLocation();
|
|
|
|
return (
|
|
<div className="min-h-screen text-white" style={{ background: 'linear-gradient(135deg, #050510 0%, #080818 50%, #050510 100%)' }}>
|
|
{/* Fixed sidebar */}
|
|
<Sidebar />
|
|
|
|
{/* Main area offset by sidebar width (240px / w-60) */}
|
|
<div className="ml-60 flex flex-col min-h-screen">
|
|
<Header />
|
|
|
|
{/* Page content — ErrorBoundary keyed by pathname so the nav shell
|
|
survives a page crash and the boundary resets on route change */}
|
|
<main className="flex-1 overflow-y-auto">
|
|
<ErrorBoundary key={pathname}>
|
|
<Outlet />
|
|
</ErrorBoundary>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|