feat(web): responsive object detail (pane/drawer) at canonical /objects/:id (#44, #58)

Wide (>=1024px): right-hand pane beside the table with a close control. Narrow: Base UI Drawer sliding from the right (lazy-loaded so its code splits out of the main chunk). Both preserve the table's query string on close. Remove the index SelectPrompt route (the table is the landing view) and delete the now-unused SelectPrompt. Make table rows keyboard-activatable (role=link, tabIndex, Enter). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-06 23:53:10 +02:00
parent 184e4ea2a5
commit b8f70212a1
9 changed files with 234 additions and 38 deletions
@@ -0,0 +1,44 @@
+import { Outlet } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { X } from "lucide-react";
+
+import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";
+
+/**
+ * Narrow-viewport object detail: the nested <Outlet/> inside a Base UI Drawer that
+ * slides from the right. Lazy-loaded so Base UI's drawer code (swipe/snap machinery)
+ * splits out of the main entry chunk — the wide pane path never pays for it.
+ */
+export function ObjectDetailDrawer({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Drawer
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onClose();
+      }}
+      swipeDirection="right"
+    >
+      <DrawerContent>
+        <div className="flex justify-end border-b p-2">
+          <DrawerClose
+            aria-label={t("actions.closeDetail")}
+            className="rounded p-1 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900"
+          >
+            <X className="size-4" aria-hidden="true" />
+          </DrawerClose>
+        </div>
+        <div className="flex-1 overflow-auto">
+          <Outlet />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}