JakeBreath
d8ba442e72
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.
89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
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>;
|
|
}
|