Publish documentation / publish (push) Successful in 1m27s
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.
31 lines
1.6 KiB
TypeScript
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>;
|
|
}
|