From 418afe00eda0f68f26c8d262e909ed2145aafe07 Mon Sep 17 00:00:00 2001
From: Josh Knapp <shadow@dao-mail.com>
Date: Fri, 6 Mar 2026 08:14:44 -0800
Subject: [PATCH] Move project remove confirmation from inline buttons to modal
 popup

Replaces the inline Yes/No confirmation with a proper ConfirmRemoveModal
dialog, consistent with other modal patterns in the app (EnvVarsModal, etc.).
Supports Escape key and overlay click to dismiss.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../projects/ConfirmRemoveModal.tsx           | 55 +++++++++++++++++++
 app/src/components/projects/ProjectCard.tsx   | 48 +++++++---------
 2 files changed, 74 insertions(+), 29 deletions(-)
 create mode 100644 app/src/components/projects/ConfirmRemoveModal.tsx

diff --git a/app/src/components/projects/ConfirmRemoveModal.tsx b/app/src/components/projects/ConfirmRemoveModal.tsx
new file mode 100644
index 0000000..d9d99b9
--- /dev/null
+++ b/app/src/components/projects/ConfirmRemoveModal.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useRef, useCallback } from "react";
+
+interface Props {
+  projectName: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmRemoveModal({ projectName, onConfirm, onCancel }: Props) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onCancel]);
+
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.target === overlayRef.current) onCancel();
+    },
+    [onCancel],
+  );
+
+  return (
+    <div
+      ref={overlayRef}
+      onClick={handleOverlayClick}
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+    >
+      <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-6 w-[24rem] shadow-xl">
+        <h2 className="text-lg font-semibold mb-3">Remove Project</h2>
+        <p className="text-sm text-[var(--text-secondary)] mb-5">
+          Are you sure you want to remove <strong className="text-[var(--text-primary)]">{projectName}</strong>? This will delete the container, config volume, and stored credentials.
+        </p>
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            className="px-4 py-2 text-sm text-white bg-[var(--error)] hover:opacity-80 rounded transition-colors"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/src/components/projects/ProjectCard.tsx b/app/src/components/projects/ProjectCard.tsx
index 5b7a648..2464986 100644
--- a/app/src/components/projects/ProjectCard.tsx
+++ b/app/src/components/projects/ProjectCard.tsx
@@ -11,6 +11,7 @@ import PortMappingsModal from "./PortMappingsModal";
 import ClaudeInstructionsModal from "./ClaudeInstructionsModal";
 import ContainerProgressModal from "./ContainerProgressModal";
 import FileManagerModal from "./FileManagerModal";
+import ConfirmRemoveModal from "./ConfirmRemoveModal";
 
 interface Props {
   project: Project;
@@ -32,7 +33,7 @@ export default function ProjectCard({ project }: Props) {
   const [progressMsg, setProgressMsg] = useState<string | null>(null);
   const [activeOperation, setActiveOperation] = useState<"starting" | "stopping" | "resetting" | null>(null);
   const [operationCompleted, setOperationCompleted] = useState(false);
-  const [showRemoveConfirm, setShowRemoveConfirm] = useState(false);
+  const [showRemoveModal, setShowRemoveModal] = useState(false);
   const [isEditingName, setIsEditingName] = useState(false);
   const [editName, setEditName] = useState(project.name);
   const isSelected = selectedProjectId === project.id;
@@ -435,34 +436,12 @@ export default function ProjectCard({ project }: Props) {
               disabled={false}
               label={showConfig ? "Hide" : "Config"}
             />
-            {showRemoveConfirm ? (
-              <span className="inline-flex items-center gap-1 text-xs">
-                <span className="text-[var(--text-secondary)]">Remove?</span>
-                <button
-                  onClick={async (e) => {
-                    e.stopPropagation();
-                    setShowRemoveConfirm(false);
-                    await remove(project.id);
-                  }}
-                  className="px-1.5 py-0.5 rounded text-white bg-[var(--error)] hover:opacity-80 transition-colors"
-                >
-                  Yes
-                </button>
-                <button
-                  onClick={(e) => { e.stopPropagation(); setShowRemoveConfirm(false); }}
-                  className="px-1.5 py-0.5 rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)] transition-colors"
-                >
-                  No
-                </button>
-              </span>
-            ) : (
-              <ActionButton
-                onClick={() => setShowRemoveConfirm(true)}
-                disabled={loading}
-                label="Remove"
-                danger
-              />
-            )}
+            <ActionButton
+              onClick={() => setShowRemoveModal(true)}
+              disabled={loading}
+              label="Remove"
+              danger
+            />
           </div>
 
           {/* Config panel */}
@@ -925,6 +904,17 @@ export default function ProjectCard({ project }: Props) {
         />
       )}
 
+      {showRemoveModal && (
+        <ConfirmRemoveModal
+          projectName={project.name}
+          onConfirm={async () => {
+            setShowRemoveModal(false);
+            await remove(project.id);
+          }}
+          onCancel={() => setShowRemoveModal(false)}
+        />
+      )}
+
       {activeOperation && (
         <ContainerProgressModal
           projectName={project.name}