Files
ThothII/frontend/src/shell/ArchiveNavigation.tsx
T
Codex 82e2c91f42
Publish documentation / publish (push) Successful in 1m27s
feat: implement memory and evidence administration with guided repairs
Add PostgreSQL-backed memory, editable evidence with source review and activation, and human-approved archive repairs across the harness, API, and UI. Include migrations, deployment support, regression coverage, and validation documentation.

Refresh permissions from validated session roles so existing administrator logins can access newly deployed archive management features.
2026-09-10 10:31:34 +02:00

31 lines
1.6 KiB
TypeScript

import { useEffect, useState, useSyncExternalStore, type ReactNode } from "react";
import { Button } from "../components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "../components/ui/dialog";
const query = "(max-width: 767px)";
function subscribe(listener: () => void) {
const media = window.matchMedia(query);
media.addEventListener("change", listener);
return () => media.removeEventListener("change", listener);
}
const isNarrow = () => window.matchMedia(query).matches;
/** Keep the archive content readable on phones, using the shared accessible dialog. */
export function ArchiveNavigation({ surface, children }: { surface: string; children: ReactNode }) {
const narrow = useSyncExternalStore(subscribe, isNarrow, () => false);
const [open, setOpen] = useState(false);
useEffect(() => { setOpen(false); }, [surface, narrow]);
if (!narrow || !["memory-management", "evidence-management"].includes(surface)) return children;
return <Dialog open={open} onOpenChange={setOpen}>
<div className="fixed inset-x-0 top-0 z-30 flex h-12 items-center justify-between border-b bg-background px-4">
<span className="font-heading font-semibold">ThothII</span>
<DialogTrigger render={<Button variant="outline" size="sm" />}>Navigation</DialogTrigger>
</div>
<DialogContent className="flex max-h-[calc(100dvh-2rem)] flex-col">
<DialogTitle>Navigation</DialogTitle>
<DialogDescription className="sr-only">Choose an administration page or a session.</DialogDescription>
<div className="min-h-0 overflow-y-auto [&>aside]:w-full">{children}</div>
</DialogContent>
</Dialog>;
}