Collapse metadata panels into bottom sheets on mobile

DESIGN.md asks for metadata panels to slide up from the bottom under 768px. A BottomSheet component provides the trigger pill and the sheet (backdrop blur, scroll lock, Escape to close) and ResponsivePanel swaps between it and the existing desktop <aside>, so panel content is mounted once either way. Applied to the Library/Online/Similar detail asides and to long pool descriptions. Upload needed nothing: its metadata editor is already a full-screen modal that stacks cleanly on small screens.
2026-09-17 22:26:38 -05:00
parent e97c3b9da0
commit d8ba442e72
5 changed files with 136 additions and 11 deletions
@@ -0,0 +1,88 @@
+import { ChevronUp, X } from "lucide-react";
+import { useEffect, useState, type ReactNode } from "react";
+
+import { useIsMobile } from "@/lib/useMediaQuery";
+
+/**
+ * DESIGN.md responsive breakpoints: below 768px metadata panels collapse into
+ * a sliding bottom drawer. Render the panel content inline on wider screens
+ * and pass it here instead on mobile.
+ */
+export function BottomSheet({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = previous;
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="fixed bottom-12 left-1/2 z-30 flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-ctp-surface1 bg-ctp-surface0/95 px-4 py-2 text-xs font-medium text-ctp-subtext1 shadow-[0_4px_12px_rgba(17,17,27,0.6)] backdrop-blur transition hover:text-ctp-text"
+      >
+        <ChevronUp className="h-3.5 w-3.5" />
+        {title}
+      </button>
+
+      {open ? (
+        <div className="fixed inset-0 z-50" role="dialog" aria-modal="true">
+          <div
+            className="absolute inset-0 bg-ctp-crust/60 backdrop-blur-sm"
+            onClick={() => setOpen(false)}
+            aria-hidden="true"
+          />
+          <div className="absolute inset-x-0 bottom-0 max-h-[80vh] overflow-y-auto rounded-t-xl border-t border-ctp-surface1 bg-ctp-base shadow-[0_-4px_12px_rgba(17,17,27,0.6)]">
+            <div className="sticky top-0 z-10 flex items-center justify-between gap-3 border-b border-ctp-surface0 bg-ctp-base px-4 py-2.5">
+              <span className="text-sm font-semibold text-ctp-subtext1">
+                {title}
+              </span>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                title="Close"
+                className="rounded-md p-1 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+            <div className="p-4">{children}</div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * Desktop side panel, mobile bottom sheet. Use in place of an <aside> so the
+ * same content renders once either way.
+ */
+export function ResponsivePanel({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}) {
+  const isMobile = useIsMobile();
+  if (isMobile) return <BottomSheet title={title}>{children}</BottomSheet>;
+  return <aside className="flex flex-col gap-4">{children}</aside>;
+}