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,66 @@
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+
+import { cn } from "@/lib/utils";
+
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerBackdrop({ className, ...props }: DrawerPrimitive.Backdrop.Props) {
+  return (
+    <DrawerPrimitive.Backdrop
+      data-slot="drawer-backdrop"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/20 duration-200 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props) {
+  return (
+    <DrawerPortal>
+      <DrawerBackdrop />
+      <DrawerPrimitive.Viewport data-slot="drawer-viewport" className="fixed inset-0 z-50">
+        <DrawerPrimitive.Popup
+          data-slot="drawer-content"
+          className={cn(
+            "fixed inset-y-0 right-0 flex w-full max-w-md flex-col overflow-y-auto bg-background shadow-xl outline-none duration-200 data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPortal>
+  );
+}
+
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerViewport({ ...props }: DrawerPrimitive.Viewport.Props) {
+  return <DrawerPrimitive.Viewport data-slot="drawer-viewport" {...props} />;
+}
+
+export {
+  Drawer,
+  DrawerBackdrop,
+  DrawerClose,
+  DrawerContent,
+  DrawerPortal,
+  DrawerTrigger,
+  DrawerViewport,
+};