muse/web/components/ui/sheet.tsx

"use client";

import * as React from "react";
import * as Dialog from "@radix-ui/react-dialog";
import { AnimatePresence, motion } from "framer-motion";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";
import { useMotionOK } from "@/lib/motion";

/**
 * A real modal, on Radix, which was already a dependency and never imported.
 * That matters beyond tidiness: it brings focus trapping, restore-on-close,
 * Escape, scroll locking and aria wiring that hand-rolled inline confirms
 * (the previous pattern) do not have.
 *
 * Presents as a bottom sheet on phones and a centred panel from `sm:` up.
 */
export function Sheet({
  open,
  onOpenChange,
  title,
  description,
  children,
  footer,
  className,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  title: React.ReactNode;
  description?: React.ReactNode;
  children?: React.ReactNode;
  footer?: React.ReactNode;
  className?: string;
}) {
  const ok = useMotionOK();

  // Radix locks scrolling by injecting a <style> element, which this app's CSP
  // (style-src 'self', no 'unsafe-inline') blocks outright — the console says
  // so every time a sheet opens. Setting the property through the CSSOM is not
  // markup, so it is allowed, and it is the half that actually matters:
  // without it the page behind the sheet scrolls under your finger on a phone.
  React.useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <AnimatePresence>
        {open && (
          <Dialog.Portal forceMount>
            <Dialog.Overlay asChild forceMount>
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: ok ? 0.18 : 0 }}
                className="fixed inset-0 z-[100] bg-[var(--scrim)] backdrop-blur-[2px]"
              />
            </Dialog.Overlay>
            <Dialog.Content asChild forceMount>
              <motion.div
                initial={ok ? { opacity: 0, y: 24, scale: 0.98 } : false}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                exit={ok ? { opacity: 0, y: 16, scale: 0.98 } : { opacity: 0 }}
                transition={{ type: "spring", stiffness: 420, damping: 34 }}
                className={cn(
                  "sheet fixed z-[101] flex flex-col overflow-hidden",
                  "inset-x-0 bottom-0 max-h-[86vh] rounded-t-sheet rounded-b-none",
                  "sm:inset-x-auto sm:bottom-auto sm:left-1/2 sm:top-1/2",
                  "sm:max-h-[82vh] sm:w-[min(560px,calc(100vw-32px))]",
                  "sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-sheet",
                  className,
                )}
              >
                <header className="flex items-start justify-between gap-3 border-b border-edge px-5 py-4">
                  <div className="min-w-0">
                    <Dialog.Title className="text-headline">{title}</Dialog.Title>
                    {description && (
                      <Dialog.Description className="mt-0.5 text-callout text-dim">
                        {description}
                      </Dialog.Description>
                    )}
                  </div>
                  <Dialog.Close
                    aria-label="Close"
                    className="focus-ring -mr-1 grid h-8 w-8 shrink-0 place-items-center
                               rounded-control text-dim transition-colors hover:bg-[var(--faint)] hover:text-ink"
                  >
                    <X className="h-4 w-4" />
                  </Dialog.Close>
                </header>
                <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">{children}</div>
                {footer && (
                  <footer className="flex justify-end gap-2 border-t border-edge px-5 py-3.5">
                    {footer}
                  </footer>
                )}
              </motion.div>
            </Dialog.Content>
          </Dialog.Portal>
        )}
      </AnimatePresence>
    </Dialog.Root>
  );
}