feat: allow admin removing members from a network

js/src/features/particles/delete-particle-overlay.tsx

@@ -1,7 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
-import { createPortal } from "react-dom";
+import { useCallback, useState } from "react";
 import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
+import { ConfirmDestructiveOverlay } from "@/components/confirm-destructive-overlay";
 import { softDeleteParticle } from "@/lib/firestore-particles";
 import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
 import type { Particle } from "@/api/types";
@@ -40,55 +39,20 @@ export function DeleteParticleOverlay({
     }
   }, [deleting, networkId, onClose, particle.id, streamId, userId]);
 
-  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">Delete this particle?</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>
-
-        <p className="text-sm text-white/60">
+  return (
+    <ConfirmDestructiveOverlay
+      title="Delete this particle?"
+      description={
+        <p>
           This cannot be undone. Other viewers will see a "This particle was
           deleted" message in its place.
         </p>
-
-        <div className="mt-5 flex items-center justify-end gap-2">
-          <Button variant="ghost" size="sm" onClick={onClose} disabled={deleting}>
-            Cancel
-          </Button>
-          <Button
-            variant="destructive"
-            size="sm"
-            onClick={handleDelete}
-            disabled={deleting}
-          >
-            {deleting ? "Deleting…" : "Delete"}
-          </Button>
-        </div>
-      </div>
-    </div>,
-    document.body,
+      }
+      confirmLabel="Delete"
+      pendingLabel="Deleting…"
+      isPending={deleting}
+      onConfirm={handleDelete}
+      onClose={onClose}
+    />
   );
 }