2 files changed, 64 insertions, 4 deletions
diff --git a/apps/web/components/ui/action-confirming-dialog.tsx b/apps/web/components/ui/action-confirming-dialog.tsx
index 980bdd60..37895ee7 100644
--- a/apps/web/components/ui/action-confirming-dialog.tsx
+++ b/apps/web/components/ui/action-confirming-dialog.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import {
   Dialog,
@@ -18,14 +16,21 @@ export default function ActionConfirmingDialog({
   description,
   actionButton,
   children,
+  open: userIsOpen,
+  setOpen: userSetOpen,
 }: {
+  open?: boolean;
+  setOpen?: (v: boolean) => void;
   title: React.ReactNode;
   description: React.ReactNode;
   actionButton: (setDialogOpen: (open: boolean) => void) => React.ReactNode;
   children: React.ReactNode;
 }) {
-  const [isDialogOpen, setDialogOpen] = useState(false);
-
+  const [customIsOpen, setCustomIsOpen] = useState(false);
+  const [isDialogOpen, setDialogOpen] = [
+    userIsOpen ?? customIsOpen,
+    userSetOpen ?? setCustomIsOpen,
+  ];
   return (
     <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
diff --git a/apps/web/components/ui/collapsible.tsx b/apps/web/components/ui/collapsible.tsx
new file mode 100644
index 00000000..43f40402
--- /dev/null
+++ b/apps/web/components/ui/collapsible.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { ChevronRight, Triangle } from "lucide-react";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+function CollapsibleTriggerTriangle({
+  open,
+  className,
+}: {
+  open: boolean;
+  className?: string;
+}) {
+  return (
+    <CollapsibleTrigger asChild>
+      <Triangle
+        className={cn(
+          "fill-foreground",
+          !open ? "rotate-90" : "rotate-180",
+          className,
+        )}
+      />
+    </CollapsibleTrigger>
+  );
+}
+
+function CollapsibleTriggerChevron({
+  open,
+  className,
+}: {
+  open: boolean;
+  className?: string;
+}) {
+  return (
+    <CollapsibleTrigger asChild>
+      <ChevronRight
+        className={cn(!open ? "rotate-0" : "rotate-90", className)}
+      />
+    </CollapsibleTrigger>
+  );
+}
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleTriggerTriangle,
+  CollapsibleTriggerChevron,
+};