From b08a70e36a4b4e32d7a31773ccff72a78d6a76a2 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Sun, 21 Dec 2025 14:37:28 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20disable=20project=20remov?=
 =?UTF-8?q?al=20when=20workspaces=20exist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove project button is disabled when project has any workspaces (active or archived)
- Shows explanatory tooltip based on workspace type:
  - 'Delete workspace first' (1 active workspace)
  - 'Delete all N workspaces first' (multiple active)
  - 'Delete N archived workspaces first' (archived only)
  - 'Delete N active + M archived workspaces first' (both)
- Added archivedCountByProject to WorkspaceContext for efficient archived count tracking
- Button uses aria-disabled and cursor-not-allowed styling when disabled

---
_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high`_
---
 src/browser/components/ProjectSidebar.tsx  | 94 +++++++++++++++-------
 src/browser/contexts/WorkspaceContext.tsx  | 21 ++++-
 src/browser/stories/App.errors.stories.tsx | 23 ++----
 3 files changed, 94 insertions(+), 44 deletions(-)

diff --git a/src/browser/components/ProjectSidebar.tsx b/src/browser/components/ProjectSidebar.tsx
index 4f73c31d66..94c4f2680b 100644
--- a/src/browser/components/ProjectSidebar.tsx
+++ b/src/browser/components/ProjectSidebar.tsx
@@ -200,6 +200,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
     archiveWorkspace: onArchiveWorkspace,
     renameWorkspace: onRenameWorkspace,
     beginWorkspaceCreation: onAddWorkspace,
+    archivedCountByProject,
   } = useWorkspaceContext();
 
   // Get project state and operations from context
@@ -518,34 +519,71 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             </TooltipTrigger>
                             <TooltipContent align="end">Manage secrets</TooltipContent>
                           </Tooltip>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <button
-                                onClick={(event) => {
-                                  event.stopPropagation();
-                                  const buttonElement = event.currentTarget;
-                                  void (async () => {
-                                    const result = await onRemoveProject(projectPath);
-                                    if (!result.success) {
-                                      const error = result.error ?? "Failed to remove project";
-                                      const rect = buttonElement.getBoundingClientRect();
-                                      const anchor = {
-                                        top: rect.top + window.scrollY,
-                                        left: rect.right + 10,
-                                      };
-                                      projectRemoveError.showError(projectPath, error, anchor);
-                                    }
-                                  })();
-                                }}
-                                aria-label={`Remove project ${projectName}`}
-                                data-project-path={projectPath}
-                                className="text-muted-dark hover:text-danger-light hover:bg-danger-light/10 mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200"
-                              >
-                                ×
-                              </button>
-                            </TooltipTrigger>
-                            <TooltipContent align="end">Remove project</TooltipContent>
-                          </Tooltip>
+                          {(() => {
+                            // Compute workspace counts for removal eligibility
+                            const activeCount =
+                              sortedWorkspacesByProject.get(projectPath)?.length ?? 0;
+                            const archivedCount = archivedCountByProject.get(projectPath) ?? 0;
+                            const canDelete = activeCount === 0 && archivedCount === 0;
+
+                            // Build tooltip based on what's blocking deletion
+                            let tooltip: string;
+                            if (canDelete) {
+                              tooltip = "Remove project";
+                            } else if (archivedCount === 0) {
+                              // Only active workspaces
+                              tooltip =
+                                activeCount === 1
+                                  ? "Delete workspace first"
+                                  : `Delete all ${activeCount} workspaces first`;
+                            } else if (activeCount === 0) {
+                              // Only archived workspaces
+                              tooltip =
+                                archivedCount === 1
+                                  ? "Delete archived workspace first"
+                                  : `Delete ${archivedCount} archived workspaces first`;
+                            } else {
+                              // Both active and archived
+                              tooltip = `Delete ${activeCount} active + ${archivedCount} archived workspaces first`;
+                            }
+
+                            return (
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <button
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      if (!canDelete) return;
+                                      const buttonElement = event.currentTarget;
+                                      void (async () => {
+                                        const result = await onRemoveProject(projectPath);
+                                        if (!result.success) {
+                                          const error = result.error ?? "Failed to remove project";
+                                          const rect = buttonElement.getBoundingClientRect();
+                                          const anchor = {
+                                            top: rect.top + window.scrollY,
+                                            left: rect.right + 10,
+                                          };
+                                          projectRemoveError.showError(projectPath, error, anchor);
+                                        }
+                                      })();
+                                    }}
+                                    aria-label={`Remove project ${projectName}`}
+                                    aria-disabled={!canDelete}
+                                    data-project-path={projectPath}
+                                    className={`mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200 ${
+                                      canDelete
+                                        ? "text-muted-dark hover:text-danger-light hover:bg-danger-light/10 cursor-pointer"
+                                        : "text-muted-dark/50 cursor-not-allowed"
+                                    }`}
+                                  >
+                                    ×
+                                  </button>
+                                </TooltipTrigger>
+                                <TooltipContent align="end">{tooltip}</TooltipContent>
+                              </Tooltip>
+                            );
+                          })()}
                           <button
                             onClick={(event) => {
                               event.stopPropagation();
diff --git a/src/browser/contexts/WorkspaceContext.tsx b/src/browser/contexts/WorkspaceContext.tsx
index f32fd45fe5..0f9e303bdf 100644
--- a/src/browser/contexts/WorkspaceContext.tsx
+++ b/src/browser/contexts/WorkspaceContext.tsx
@@ -87,6 +87,7 @@ function ensureCreatedAt(metadata: FrontendWorkspaceMetadata): void {
 export interface WorkspaceContext {
   // Workspace data
   workspaceMetadata: Map<string, FrontendWorkspaceMetadata>;
+  archivedCountByProject: Map<string, number>;
   loading: boolean;
 
   // Workspace operations
@@ -161,6 +162,9 @@ export function WorkspaceProvider(props: WorkspaceProviderProps) {
   );
   const [loading, setLoading] = useState(true);
   const [pendingNewWorkspaceProject, setPendingNewWorkspaceProject] = useState<string | null>(null);
+  const [archivedCountByProject, setArchivedCountByProject] = useState<Map<string, number>>(
+    new Map()
+  );
 
   // Manage selected workspace internally with localStorage persistence
   const [selectedWorkspace, setSelectedWorkspace] = usePersistedState<WorkspaceSelection | null>(
@@ -179,7 +183,11 @@ export function WorkspaceProvider(props: WorkspaceProviderProps) {
     if (!api) return false; // Return false to indicate metadata wasn't loaded
     try {
       const includePostCompaction = isExperimentEnabled(EXPERIMENT_IDS.POST_COMPACTION_CONTEXT);
-      const metadataList = await api.workspace.list({ includePostCompaction });
+      // Fetch active and archived workspaces in parallel
+      const [metadataList, archivedList] = await Promise.all([
+        api.workspace.list({ includePostCompaction }),
+        api.workspace.list({ archived: true }),
+      ]);
       console.log(
         "[WorkspaceContext] Loaded metadata list:",
         metadataList.map((m) => ({ id: m.id, name: m.name, title: m.title }))
@@ -194,10 +202,19 @@ export function WorkspaceProvider(props: WorkspaceProviderProps) {
         metadataMap.set(metadata.id, metadata);
       }
       setWorkspaceMetadata(metadataMap);
+
+      // Compute archived counts by project
+      const archivedCounts = new Map<string, number>();
+      for (const ws of archivedList) {
+        archivedCounts.set(ws.projectPath, (archivedCounts.get(ws.projectPath) ?? 0) + 1);
+      }
+      setArchivedCountByProject(archivedCounts);
+
       return true; // Return true to indicate metadata was loaded
     } catch (error) {
       console.error("Failed to load workspace metadata:", error);
       setWorkspaceMetadata(new Map());
+      setArchivedCountByProject(new Map());
       return true; // Still return true - we tried to load, just got empty result
     }
   }, [setWorkspaceMetadata, api]);
@@ -607,6 +624,7 @@ export function WorkspaceProvider(props: WorkspaceProviderProps) {
   const value = useMemo<WorkspaceContext>(
     () => ({
       workspaceMetadata,
+      archivedCountByProject,
       loading,
       createWorkspace,
       removeWorkspace,
@@ -624,6 +642,7 @@ export function WorkspaceProvider(props: WorkspaceProviderProps) {
     }),
     [
       workspaceMetadata,
+      archivedCountByProject,
       loading,
       createWorkspace,
       removeWorkspace,
diff --git a/src/browser/stories/App.errors.stories.tsx b/src/browser/stories/App.errors.stories.tsx
index 968dc23882..96e80ba214 100644
--- a/src/browser/stories/App.errors.stories.tsx
+++ b/src/browser/stories/App.errors.stories.tsx
@@ -248,12 +248,12 @@ export const LargeDiff: AppStory = {
 };
 
 /**
- * Project removal error popover.
+ * Project removal disabled state.
  *
- * Shows the error popup when attempting to remove a project that has active workspaces.
- * The play function hovers the project and clicks the remove button to trigger the error.
+ * Verifies that the "Remove project" button is disabled when workspaces exist.
+ * The button is aria-disabled and styled as not-allowed, preventing the backend call.
  */
-export const ProjectRemovalError: AppStory = {
+export const ProjectRemovalDisabled: AppStory = {
   render: () => (
     <AppWithMocks
       setup={() => {
@@ -268,11 +268,6 @@ export const ProjectRemovalError: AppStory = {
         return createMockORPCClient({
           projects: groupWorkspacesByProject(workspaces),
           workspaces,
-          onProjectRemove: () => ({
-            success: false,
-            error:
-              "Cannot remove project with active workspaces. Please remove all 2 workspace(s) first.",
-          }),
         });
       }}
     />
@@ -297,14 +292,12 @@ export const ProjectRemovalError: AppStory = {
     // Small delay for hover state to apply
     await new Promise((r) => setTimeout(r, 100));
 
-    // Click the remove button
-    await userEvent.click(removeButton);
-
-    // Wait for the error popover to appear
+    // Verify the button is disabled (aria-disabled="true")
     await waitFor(
       () => {
-        const errorPopover = document.querySelector('[role="alert"]');
-        if (!errorPopover) throw new Error("Error popover not found");
+        if (removeButton.getAttribute("aria-disabled") !== "true") {
+          throw new Error("Remove button should be aria-disabled when workspaces exist");
+        }
       },
       { timeout: 2000 }
     );