From 65a8789dfd88017185aa16bd71bd54ba6099304f Mon Sep 17 00:00:00 2001
From: centdix <farhadg110@gmail.com>
Date: Sat, 21 Feb 2026 02:35:07 +0000
Subject: [PATCH] fix: close confirm dialog immediately and gray out removing
 worktrees

Dismiss the confirmation dialog as soon as the user confirms instead
of waiting for the API call. Show the item grayed out with
pointer-events disabled while deletion is in progress. Auto-select
the previous (or next) worktree when the selected one is removed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 dev-dashboard/frontend/src/App.svelte         | 26 ++++++++++++-------
 .../frontend/src/lib/WorktreeList.svelte      |  6 +++--
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/dev-dashboard/frontend/src/App.svelte b/dev-dashboard/frontend/src/App.svelte
index 2ddb228277..49f3d16402 100644
--- a/dev-dashboard/frontend/src/App.svelte
+++ b/dev-dashboard/frontend/src/App.svelte
@@ -17,9 +17,9 @@
   let worktrees = $state<WorktreeInfo[]>([]);
   let selectedBranch = $state<string | null>(null);
   let removeBranch = $state<string | null>(null);
+  let removingBranches = $state<Set<string>>(new Set());
   let showCreateDialog = $state(false);
   let creating = $state(false);
-  let removing = $state(false);
   let createProfile = $state<Profile>("agent-only");
 
   let visibleWorktrees = $derived(
@@ -63,17 +63,26 @@
   }
 
   async function handleRemove() {
-    if (!removeBranch) return;
-    removing = true;
+    const branch = removeBranch;
+    if (!branch) return;
+    removeBranch = null;
+
+    // Select neighbor before starting the async removal
+    if (selectedBranch === branch) {
+      const idx = visibleWorktrees.findIndex((w) => w.branch === branch);
+      const neighbor = visibleWorktrees[idx - 1] ?? visibleWorktrees[idx + 1];
+      const isNeighborMain = neighbor && (neighbor.path === "(here)" || neighbor.branch === "main");
+      selectedBranch = neighbor && !isNeighborMain ? neighbor.branch : null;
+    }
+
+    removingBranches = new Set([...removingBranches, branch]);
     try {
-      await api.removeWorktree(removeBranch);
-      if (selectedBranch === removeBranch) selectedBranch = null;
-      removeBranch = null;
+      await api.removeWorktree(branch);
       await refresh();
     } catch (err) {
       alert(`Failed to remove: ${err instanceof Error ? err.message : err}`);
     } finally {
-      removing = false;
+      removingBranches = new Set([...removingBranches].filter((b) => b !== branch));
     }
   }
 
@@ -95,7 +104,7 @@
         title="New Worktree"
       ><span class="text-lg leading-none">+</span> New</button>
     </div>
-    <WorktreeList worktrees={visibleWorktrees} selected={selectedBranch} onselect={(b) => (selectedBranch = b)} onremove={(b) => (removeBranch = b)} />
+    <WorktreeList worktrees={visibleWorktrees} selected={selectedBranch} removing={removingBranches} onselect={(b) => (selectedBranch = b)} onremove={(b) => (removeBranch = b)} />
   </aside>
 
   <main class="flex-1 min-w-0 flex flex-col overflow-hidden">
@@ -164,7 +173,6 @@
 {#if removeBranch}
   <ConfirmDialog
     message={`Remove worktree "${removeBranch}"? This action cannot be undone.`}
-    loading={removing}
     onconfirm={handleRemove}
     oncancel={() => (removeBranch = null)}
   />
diff --git a/dev-dashboard/frontend/src/lib/WorktreeList.svelte b/dev-dashboard/frontend/src/lib/WorktreeList.svelte
index b4d009b0a6..665457e787 100644
--- a/dev-dashboard/frontend/src/lib/WorktreeList.svelte
+++ b/dev-dashboard/frontend/src/lib/WorktreeList.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { WorktreeInfo } from "./types";
 
-  let { worktrees, selected, onselect, onremove }: {
+  let { worktrees, selected, removing, onselect, onremove }: {
     worktrees: WorktreeInfo[];
     selected: string | null;
+    removing: Set<string>;
     onselect: (branch: string) => void;
     onremove: (branch: string) => void;
   } = $props();
@@ -20,7 +21,8 @@
   {#each worktrees as wt (wt.branch)}
     {@const isMain = wt.path === "(here)" || wt.branch === "main"}
     {@const isActive = wt.branch === selected}
-    <li class="mb-0.5 group relative">
+    {@const isRemoving = removing.has(wt.branch)}
+    <li class="mb-0.5 group relative {isRemoving ? 'opacity-40 pointer-events-none' : ''}">
       <button
         type="button"
         class="w-full py-2.5 px-3 rounded-md border cursor-pointer flex flex-col gap-1 text-left text-inherit text-sm bg-transparent hover:bg-hover {isActive ? 'bg-active border-accent' : 'border-transparent'}"