feat: support closing modal via back button

src/components/ui/sheet.tsx

@@ -3,9 +3,48 @@ import * as SheetPrimitive from '@radix-ui/react-dialog'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { X } from 'lucide-react'
 
+import { randomString } from '@/lib/random'
 import { cn } from '@/lib/utils'
+import modalManager from '@/services/modal-manager.service'
 
-const Sheet = SheetPrimitive.Root
+const Sheet = ({ children, open, onOpenChange, ...props }: SheetPrimitive.DialogProps) => {
+  const [innerOpen, setInnerOpen] = React.useState(open ?? false)
+  const id = React.useMemo(() => `sheet-${randomString()}`, [])
+
+  React.useEffect(() => {
+    if (open) {
+      modalManager.register(id, () => {
+        onOpenChange?.(false)
+      })
+    } else {
+      modalManager.unregister(id)
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (open !== undefined) {
+      return
+    }
+
+    if (innerOpen) {
+      modalManager.register(id, () => {
+        setInnerOpen(false)
+      })
+    } else {
+      modalManager.unregister(id)
+    }
+  }, [innerOpen])
+
+  return (
+    <SheetPrimitive.Root
+      open={open ?? innerOpen}
+      onOpenChange={onOpenChange ?? setInnerOpen}
+      {...props}
+    >
+      {children}
+    </SheetPrimitive.Root>
+  )
+}
 
 const SheetTrigger = SheetPrimitive.Trigger