From 2bcc8a62ee847f09ea9e31800bab667815f0ee93 Mon Sep 17 00:00:00 2001
From: David Montero Crespo <davidmonterocrespo24@gmail.com>
Date: Fri, 8 May 2026 12:25:13 -0300
Subject: [PATCH] feat(canvas): inline two-step delete confirm in
 ComponentPropertyDialog

Replaces the window.confirm("Delete X?") modal with a footer that flips
into a "Delete X?" prompt + Cancel / Delete pair when the user arms the
delete. Less jarring on mobile (no native dialog), keeps the user's
flow inside the property panel.
---
 .../simulator/ComponentPropertyDialog.css     | 14 ++++
 .../simulator/ComponentPropertyDialog.tsx     | 65 +++++++++++++------
 2 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/simulator/ComponentPropertyDialog.css b/frontend/src/components/simulator/ComponentPropertyDialog.css
index a0a0f2bc..bb40c739 100644
--- a/frontend/src/components/simulator/ComponentPropertyDialog.css
+++ b/frontend/src/components/simulator/ComponentPropertyDialog.css
@@ -272,6 +272,20 @@
   display: flex;
   gap: 8px;
   margin-top: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* Inline confirm prompt that replaces the Rotate / Delete pair while a
+   delete is armed. The label takes the full width above the two action
+   buttons on narrow widths so nothing gets cut off. */
+.property-confirm-label {
+  flex-basis: 100%;
+  font-size: 12px;
+  color: #f5b342;
+  font-weight: 500;
+  text-align: center;
+  padding: 2px 0 4px;
 }
 
 .property-action-button {
diff --git a/frontend/src/components/simulator/ComponentPropertyDialog.tsx b/frontend/src/components/simulator/ComponentPropertyDialog.tsx
index 273d3fce..20aab4f3 100644
--- a/frontend/src/components/simulator/ComponentPropertyDialog.tsx
+++ b/frontend/src/components/simulator/ComponentPropertyDialog.tsx
@@ -55,6 +55,10 @@ export const ComponentPropertyDialog: React.FC<ComponentPropertyDialogProps> = (
 }) => {
   const dialogRef = useRef<HTMLDivElement>(null);
   const [dialogPosition, setDialogPosition] = useState({ x: 0, y: 0 });
+  // Two-step delete: first click arms the action (footer flips to a
+  // "Delete X?" confirm prompt), second click commits. Replaces the old
+  // window.confirm() call which was visually jarring on mobile.
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
 
   // Calculate dialog position on mount — clamp within canvas viewport
   useEffect(() => {
@@ -238,26 +242,49 @@ export const ComponentPropertyDialog: React.FC<ComponentPropertyDialogProps> = (
 
       </div>{/* /component-property-body */}
 
-      {/* Action Buttons */}
+      {/* Action Buttons — flips into a confirm-delete prompt when armed. */}
       <div className="property-actions">
-        <button
-          className="property-action-button rotate-button"
-          onClick={() => onRotate(componentId)}
-          title="Rotate 90°"
-        >
-          Rotate
-        </button>
-        <button
-          className="property-action-button delete-button"
-          onClick={() => {
-            if (window.confirm(`Delete ${componentMetadata.name}?`)) {
-              onDelete(componentId);
-            }
-          }}
-          title="Delete component"
-        >
-          Delete
-        </button>
+        {confirmingDelete ? (
+          <>
+            <span className="property-confirm-label">
+              Delete {componentMetadata.name}?
+            </span>
+            <button
+              className="property-action-button rotate-button"
+              onClick={() => setConfirmingDelete(false)}
+              title="Cancel"
+            >
+              Cancel
+            </button>
+            <button
+              className="property-action-button delete-button"
+              onClick={() => {
+                setConfirmingDelete(false);
+                onDelete(componentId);
+              }}
+              title="Confirm delete"
+            >
+              Delete
+            </button>
+          </>
+        ) : (
+          <>
+            <button
+              className="property-action-button rotate-button"
+              onClick={() => onRotate(componentId)}
+              title="Rotate 90°"
+            >
+              Rotate
+            </button>
+            <button
+              className="property-action-button delete-button"
+              onClick={() => setConfirmingDelete(true)}
+              title="Delete component"
+            >
+              Delete
+            </button>
+          </>
+        )}
       </div>
     </div>
   );