82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { lazy, Suspense } from "react";
|
|
import { Outlet, useMatch, useNavigate, useSearchParams } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import { X } from "lucide-react";
|
|
|
|
import { ObjectsTable } from "./objects-table";
|
|
import { useMediaQuery } from "../lib/use-media-query";
|
|
import { useDocumentTitle } from "../lib/use-document-title";
|
|
import { useBreadcrumb } from "../shell/use-breadcrumb";
|
|
import { Button } from "@/components/ui/button";
|
|
import { PageTitle } from "@/components/ui/page-title";
|
|
|
|
const ObjectDetailDrawer = lazy(() =>
|
|
import("./object-detail-drawer").then((m) => ({ default: m.ObjectDetailDrawer })),
|
|
);
|
|
|
|
export function ObjectsPage() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
|
|
// The table is the full-width landing view. When a `:id`/`:id/edit` child route
|
|
// is active we surface the nested <Outlet/> as a right-hand pane (wide) or a
|
|
// Drawer sliding from the right (narrow), preserving the table's query string on close.
|
|
const detailMatch = useMatch("/objects/:id");
|
|
const editMatch = useMatch("/objects/:id/edit");
|
|
const open = Boolean(detailMatch ?? editMatch);
|
|
const isWide = useMediaQuery("(min-width: 1024px)");
|
|
|
|
useDocumentTitle(t("nav.objects"));
|
|
useBreadcrumb([{ label: t("nav.objects") }]);
|
|
|
|
const closeDetail = () => navigate(`/objects?${searchParams}`);
|
|
|
|
const table = (
|
|
<div className="flex h-full flex-col overflow-hidden">
|
|
<PageTitle className="px-4 pt-4 pb-2">{t("nav.objects")}</PageTitle>
|
|
<div className="flex-1 overflow-hidden">
|
|
<ObjectsTable />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
if (isWide) {
|
|
return (
|
|
<div className={`grid h-full ${open ? "grid-cols-[1fr_28rem]" : "grid-cols-1"}`}>
|
|
{table}
|
|
{open && (
|
|
<div className="flex h-full flex-col overflow-hidden border-l">
|
|
<div className="flex justify-end border-b p-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={closeDetail}
|
|
aria-label={t("actions.closeDetail")}
|
|
>
|
|
<X className="size-4" aria-hidden="true" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex-1 overflow-auto">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Narrow: the detail lives in a Drawer, lazy-loaded so Base UI's drawer code stays
|
|
// out of the main entry chunk.
|
|
return (
|
|
<div className="h-full">
|
|
{table}
|
|
{open && (
|
|
<Suspense fallback={null}>
|
|
<ObjectDetailDrawer open={open} onClose={closeDetail} />
|
|
</Suspense>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|