From 29c5e518751073dc9959972582561c66766adf84 Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Thu, 3 Jul 2025 22:39:52 +0100
Subject: [PATCH] Add confirm dialog before merge (vibe-kanban) (#65)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* The confirmation dialog has been added before the merge operation. Now when users click the "Merge" button, they'll first see a confirmation dialog asking if they're sure they want to merge the changes. The dialog includes:

1. A clear title "Confirm Merge"
2. A description explaining what will happen
3. An informational box highlighting that the action cannot be undone
4. Cancel and Confirm buttons

The merge flow now works as follows:
1. User clicks "Merge" button
2. Check for uncommitted changes (if any, show warning dialog)
3. If no uncommitted changes, show confirmation dialog
4. User confirms → merge proceeds
5. User cancels → dialog closes, no merge

* lint
---
 .../components/tasks/TaskDetailsToolbar.tsx   | 50 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/tasks/TaskDetailsToolbar.tsx b/frontend/src/components/tasks/TaskDetailsToolbar.tsx
index b4ba8ff8..4040e920 100644
--- a/frontend/src/components/tasks/TaskDetailsToolbar.tsx
+++ b/frontend/src/components/tasks/TaskDetailsToolbar.tsx
@@ -130,6 +130,7 @@ export function TaskDetailsToolbar({
   const [rebasing, setRebasing] = useState(false);
   const [rebaseSuccess, setRebaseSuccess] = useState(false);
   const [showUncommittedWarning, setShowUncommittedWarning] = useState(false);
+  const [showMergeConfirmDialog, setShowMergeConfirmDialog] = useState(false);
   const [creatingPR, setCreatingPR] = useState(false);
   const [showCreatePRDialog, setShowCreatePRDialog] = useState(false);
   const [prTitle, setPrTitle] = useState('');
@@ -186,7 +187,8 @@ export function TaskDetailsToolbar({
       return;
     }
 
-    await performMerge();
+    // Show confirmation dialog for regular merge
+    setShowMergeConfirmDialog(true);
   };
 
   const performMerge = async () => {
@@ -228,6 +230,15 @@ export function TaskDetailsToolbar({
     setShowUncommittedWarning(false);
   };
 
+  const handleConfirmMerge = async () => {
+    setShowMergeConfirmDialog(false);
+    await performMerge();
+  };
+
+  const handleCancelMerge = () => {
+    setShowMergeConfirmDialog(false);
+  };
+
   const handleRebaseClick = async () => {
     if (!projectId || !task.id || !selectedAttempt?.id) return;
 
@@ -923,6 +934,43 @@ export function TaskDetailsToolbar({
         )}
       </div>
 
+      {/* Merge Confirmation Dialog */}
+      <Dialog
+        open={showMergeConfirmDialog}
+        onOpenChange={() => handleCancelMerge()}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Confirm Merge</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to merge the changes from this task branch
+              into {branchStatus?.base_branch_name || 'the base branch'}?
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <div className="bg-blue-50 border border-blue-200 rounded-md p-3">
+              <p className="text-sm text-blue-800">
+                This will merge all committed changes from the task branch into{' '}
+                {branchStatus?.base_branch_name || 'the base branch'}. This
+                action cannot be undone.
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={handleCancelMerge}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleConfirmMerge}
+              disabled={merging}
+              className="bg-green-600 hover:bg-green-700"
+            >
+              {merging ? 'Merging...' : 'Confirm Merge'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* Uncommitted Changes Warning Dialog */}
       <Dialog
         open={showUncommittedWarning}