refactor: organize desktop vs. mobile into separate folders

2026-04-29 08:42:56 -07:00
parent 3d9fe67936
commit 3a11a82cd3
194 changed files with 213 additions and 213 deletions
@@ -0,0 +1,72 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "@/components/ui/button";
+
+interface ConfirmDestructiveOverlayProps {
+  title: string;
+  description: React.ReactNode;
+  confirmLabel: string;
+  pendingLabel?: string;
+  isPending: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export function ConfirmDestructiveOverlay({
+  title,
+  description,
+  confirmLabel,
+  pendingLabel = "Working…",
+  isPending,
+  onConfirm,
+  onClose,
+}: ConfirmDestructiveOverlayProps) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handler, { capture: true });
+    return () => window.removeEventListener("keydown", handler, { capture: true });
+  }, [onClose]);
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100]">
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div className="absolute left-1/2 top-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/5 p-6 shadow-2xl backdrop-blur-xl">
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="text-sm font-semibold text-white/70">{title}</h2>
+          <span className="text-xs text-white/30">
+            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+              Esc
+            </kbd>{" "}
+            to close
+          </span>
+        </div>
+
+        <div className="text-sm text-white/60">{description}</div>
+
+        <div className="mt-5 flex items-center justify-end gap-2">
+          <Button variant="ghost" size="sm" onClick={onClose} disabled={isPending}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={onConfirm}
+            disabled={isPending}
+          >
+            {isPending ? pendingLabel : confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}