From d8ba442e72a0ae1848ae9cefafda7e2bbcff3307 Mon Sep 17 00:00:00 2001
From: JakeBreath <tolozacdcmo@gmail.com>
Date: Thu, 17 Sep 2026 22:26:38 -0500
Subject: [PATCH] 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.
---
 frontend/src/components/BottomSheet.tsx       | 88 +++++++++++++++++++
 frontend/src/features/detail/DetailShell.tsx  |  6 +-
 .../src/features/pools/PoolDetailPage.tsx     | 27 ++++--
 frontend/src/features/similar/SimilarPage.tsx |  5 +-
 frontend/src/lib/useMediaQuery.ts             | 21 +++++
 5 files changed, 136 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/BottomSheet.tsx
 create mode 100644 frontend/src/lib/useMediaQuery.ts

diff --git a/frontend/src/components/BottomSheet.tsx b/frontend/src/components/BottomSheet.tsx
new file mode 100644
index 0000000..37de293
--- /dev/null
+++ b/frontend/src/components/BottomSheet.tsx
@@ -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>;
+}
diff --git a/frontend/src/features/detail/DetailShell.tsx b/frontend/src/features/detail/DetailShell.tsx
index 0b82d64..3c65290 100644
--- a/frontend/src/features/detail/DetailShell.tsx
+++ b/frontend/src/features/detail/DetailShell.tsx
@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 
+import { ResponsivePanel } from "@/components/BottomSheet";
+
 export function DetailShell({
   breadcrumb,
   actions,
@@ -17,7 +19,9 @@ export function DetailShell({
     <div className="flex flex-col gap-4">
       {breadcrumb}
       <div className="grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
-        <aside className="order-2 flex flex-col gap-4 lg:order-1">{aside}</aside>
+        <div className="order-2 lg:order-1">
+          <ResponsivePanel title="Tags & info">{aside}</ResponsivePanel>
+        </div>
         <div className="order-1 flex min-w-0 flex-col gap-4 lg:order-2">
           {actions}
           {media}
diff --git a/frontend/src/features/pools/PoolDetailPage.tsx b/frontend/src/features/pools/PoolDetailPage.tsx
index d82d78a..3345ada 100644
--- a/frontend/src/features/pools/PoolDetailPage.tsx
+++ b/frontend/src/features/pools/PoolDetailPage.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import { Link, useLocation, useParams } from "react-router-dom";
 
 import { Button, EmptyState, Spinner } from "@/components/ui";
+import { BottomSheet } from "@/components/BottomSheet";
 import { PostCard } from "@/features/online/PostCard";
 import { PoolFollowButton } from "@/features/follows/PoolFollowButton";
 import { api } from "@/lib/api";
@@ -19,6 +20,7 @@ import {
   type E621Post,
 } from "@/lib/e621";
 import { formatDate } from "@/lib/format";
+import { useIsMobile } from "@/lib/useMediaQuery";
 import { useE621 } from "@/store/e621";
 
 const CHUNK = 100;
@@ -48,6 +50,7 @@ export default function PoolDetailPage() {
   const credentials = useE621((state) => state.credentials);
   const blacklist = useE621((state) => state.blacklist);
   const blacklistSet = useMemo(() => new Set(blacklist), [blacklist]);
+  const isMobile = useIsMobile();
 
   const [visibleCount, setVisibleCount] = useState(CHUNK);
   const [showBlacklisted, setShowBlacklisted] = useState(false);
@@ -205,14 +208,22 @@ export default function PoolDetailPage() {
       </header>
 
       {pool.description.trim() ? (
-        <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4">
-          <h2 className="text-sm font-semibold text-ctp-subtext1">
-            Description
-          </h2>
-          <div className="mt-2 text-sm leading-relaxed text-ctp-subtext0">
-            {renderDText(pool.description)}
-          </div>
-        </section>
+        isMobile ? (
+          <BottomSheet title="Description">
+            <div className="text-sm leading-relaxed text-ctp-subtext0">
+              {renderDText(pool.description)}
+            </div>
+          </BottomSheet>
+        ) : (
+          <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4">
+            <h2 className="text-sm font-semibold text-ctp-subtext1">
+              Description
+            </h2>
+            <div className="mt-2 text-sm leading-relaxed text-ctp-subtext0">
+              {renderDText(pool.description)}
+            </div>
+          </section>
+        )
       ) : null}
 
       <section className="flex flex-col gap-3">
diff --git a/frontend/src/features/similar/SimilarPage.tsx b/frontend/src/features/similar/SimilarPage.tsx
index 2ff5b92..5cd3628 100644
--- a/frontend/src/features/similar/SimilarPage.tsx
+++ b/frontend/src/features/similar/SimilarPage.tsx
@@ -8,6 +8,7 @@ import {
 } from "react";
 import { Link } from "react-router-dom";
 
+import { ResponsivePanel } from "@/components/BottomSheet";
 import { Button, Spinner } from "@/components/ui";
 import { api, errorMessage, uploadFile } from "@/lib/api";
 import { cn } from "@/lib/cn";
@@ -182,7 +183,7 @@ export default function SimilarPage() {
 
       {check ? (
         <div className="grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
-          <aside className="flex flex-col gap-4">
+          <ResponsivePanel title="File & check">
             <section className="overflow-hidden rounded-lg border border-ctp-surface0 bg-ctp-base">
               <div className="flex max-h-72 items-center justify-center overflow-hidden bg-ctp-mantle">
                 {check.file_url ? (
@@ -242,7 +243,7 @@ export default function SimilarPage() {
                 </div>
               </div>
             </section>
-          </aside>
+          </ResponsivePanel>
 
           <div className="flex min-w-0 flex-col gap-6">
             <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4">
diff --git a/frontend/src/lib/useMediaQuery.ts b/frontend/src/lib/useMediaQuery.ts
new file mode 100644
index 0000000..1b1561b
--- /dev/null
+++ b/frontend/src/lib/useMediaQuery.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+/** Track a CSS media query, e.g. `useMediaQuery("(min-width: 768px)")`. */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
+
+  useEffect(() => {
+    const list = window.matchMedia(query);
+    const update = () => setMatches(list.matches);
+    update();
+    list.addEventListener("change", update);
+    return () => list.removeEventListener("change", update);
+  }, [query]);
+
+  return matches;
+}
+
+/** The design system's mobile breakpoint: metadata panels become bottom sheets. */
+export function useIsMobile(): boolean {
+  return !useMediaQuery("(min-width: 768px)");
+}