Improve workspace navigation and render isolation

packages/app/src/components/sidebar-workspace-list.tsx

@@ -91,14 +91,17 @@ import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
 import { type PrHint, useWorkspacePrHint } from "@/hooks/use-checkout-pr-status-query";
 import { buildSidebarProjectRowModel } from "@/utils/sidebar-project-row-model";
-import { useNavigationActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
+import {
+  useIsNavigationProjectActive,
+  useIsNavigationWorkspaceSelected,
+} from "@/stores/navigation-active-workspace-store";
 import {
   normalizeWorkspaceDescriptor,
   useSessionStore,
   type WorkspaceDescriptor,
 } from "@/stores/session-store";
 import { useWorkspaceFields } from "@/stores/session-store-hooks";
-import { buildWorkspaceArchiveRedirectRoute } from "@/utils/workspace-archive-navigation";
+import { redirectIfArchivingActiveWorkspace } from "@/utils/sidebar-workspace-archive-redirect";
 import { openExternalUrl } from "@/utils/open-external-url";
 import {
   requireWorkspaceExecutionDirectory,
@@ -1175,7 +1178,6 @@ function WorkspaceRowWithMenu({
   isCreating?: boolean;
 }) {
   const toast = useToast();
-  const activeWorkspaceSelection = useNavigationActiveWorkspaceSelection();
   const archiveWorktree = useCheckoutGitActionsStore((state) => state.archiveWorktree);
   const [isArchivingWorkspace, setIsArchivingWorkspace] = useState(false);
   const workspaceDirectory = resolveWorkspaceExecutionDirectory({
@@ -1193,22 +1195,11 @@ function WorkspaceRowWithMenu({
   const isWorktree = workspace.workspaceKind === "worktree";
   const isArchiving = isWorktree ? archiveStatus === "pending" : isArchivingWorkspace;
   const redirectAfterArchive = useCallback(() => {
-    if (
-      activeWorkspaceSelection?.serverId !== workspace.serverId ||
-      activeWorkspaceSelection.workspaceId !== workspace.workspaceId
-    ) {
-      return;
-    }
-
-    router.replace(
-      buildWorkspaceArchiveRedirectRoute({
-        serverId: workspace.serverId,
-        archivedWorkspaceId: workspace.workspaceId,
-        workspaces:
-          useSessionStore.getState().sessions[workspace.serverId]?.workspaces.values() ?? [],
-      }),
-    );
-  }, [activeWorkspaceSelection, workspace.serverId, workspace.workspaceId]);
+    redirectIfArchivingActiveWorkspace({
+      serverId: workspace.serverId,
+      workspaceId: workspace.workspaceId,
+    });
+  }, [workspace.serverId, workspace.workspaceId]);
 
   const handleArchiveWorktree = useCallback(() => {
     if (isArchiving) {
@@ -1401,25 +1392,13 @@ function NonGitProjectRowWithMenuContent({
 }) {
   const toast = useToast();
   const contextMenu = useContextMenu();
-  const activeWorkspaceSelection = useNavigationActiveWorkspaceSelection();
   const [isArchivingWorkspace, setIsArchivingWorkspace] = useState(false);
   const redirectAfterArchive = useCallback(() => {
-    if (
-      activeWorkspaceSelection?.serverId !== workspace.serverId ||
-      activeWorkspaceSelection.workspaceId !== workspace.workspaceId
-    ) {
-      return;
-    }
-
-    router.replace(
-      buildWorkspaceArchiveRedirectRoute({
-        serverId: workspace.serverId,
-        archivedWorkspaceId: workspace.workspaceId,
-        workspaces:
-          useSessionStore.getState().sessions[workspace.serverId]?.workspaces.values() ?? [],
-      }) as any,
-    );
-  }, [activeWorkspaceSelection, workspace.serverId, workspace.workspaceId]);
+    redirectIfArchivingActiveWorkspace({
+      serverId: workspace.serverId,
+      workspaceId: workspace.workspaceId,
+    });
+  }, [workspace.serverId, workspace.workspaceId]);
 
   const handleArchiveWorkspace = useCallback(() => {
     if (isArchivingWorkspace) {
@@ -1546,6 +1525,7 @@ function FlattenedProjectRow({
   isProjectActive = false,
   onRemoveProject,
   removeProjectStatus,
+  selectionEnabled,
 }: {
   project: SidebarProjectEntry;
   displayName: string;
@@ -1563,8 +1543,14 @@ function FlattenedProjectRow({
   isProjectActive?: boolean;
   onRemoveProject?: () => void;
   removeProjectStatus?: "idle" | "pending";
+  selectionEnabled: boolean;
 }) {
   const workspace = useSidebarWorkspaceEntry(serverId, rowModel.workspace.workspaceId);
+  const selected = useIsNavigationWorkspaceSelected({
+    serverId,
+    workspaceId: rowModel.workspace.workspaceId,
+    enabled: selectionEnabled,
+  });
 
   if (!workspace) {
     return null;
@@ -1577,7 +1563,7 @@ function FlattenedProjectRow({
         displayName={displayName}
         iconDataUri={iconDataUri}
         workspace={workspace}
-        selected={rowModel.selected}
+        selected={selected}
         onPress={onPress}
         shortcutNumber={shortcutNumber}
         showShortcutBadge={showShortcutBadge}
@@ -1594,7 +1580,7 @@ function FlattenedProjectRow({
       displayName={displayName}
       iconDataUri={iconDataUri}
       workspace={workspace}
-      selected={rowModel.selected}
+      selected={selected}
       chevron={rowModel.chevron}
       onPress={onPress}
       serverId={serverId}
@@ -1616,7 +1602,6 @@ function FlattenedProjectRow({
 
 function WorkspaceRow({
   workspace,
-  selected,
   shortcutNumber,
   showShortcutBadge,
   onPress,
@@ -1625,9 +1610,9 @@ function WorkspaceRow({
   dragHandleProps,
   canCopyBranchName,
   isCreating = false,
+  selectionEnabled,
 }: {
   workspace: SidebarWorkspaceEntry;
-  selected: boolean;
   shortcutNumber: number | null;
   showShortcutBadge: boolean;
   onPress: () => void;
@@ -1636,8 +1621,14 @@ function WorkspaceRow({
   dragHandleProps?: DraggableListDragHandleProps;
   canCopyBranchName: boolean;
   isCreating?: boolean;
+  selectionEnabled: boolean;
 }) {
   const hydratedWorkspace = useSidebarWorkspaceEntry(workspace.serverId, workspace.workspaceId);
+  const selected = useIsNavigationWorkspaceSelected({
+    serverId: workspace.serverId,
+    workspaceId: workspace.workspaceId,
+    enabled: selectionEnabled,
+  });
 
   if (!hydratedWorkspace) {
     return null;
@@ -1665,7 +1656,7 @@ function ProjectBlock({
   displayName,
   iconDataUri,
   serverId,
-  activeWorkspaceSelection,
+  selectionEnabled,
   showShortcutBadges,
   shortcutIndexByWorkspaceKey,
   parentGestureRef,
@@ -1673,6 +1664,7 @@ function ProjectBlock({
   onWorkspacePress,
   onWorkspaceReorder,
   onWorktreeCreated,
+  currentPathname,
   drag,
   isDragging,
   dragHandleProps,
@@ -1684,7 +1676,7 @@ function ProjectBlock({
   displayName: string;
   iconDataUri: string | null;
   serverId: string | null;
-  activeWorkspaceSelection: { serverId: string; workspaceId: string } | null;
+  selectionEnabled: boolean;
   showShortcutBadges: boolean;
   shortcutIndexByWorkspaceKey: Map<string, number>;
   parentGestureRef?: MutableRefObject<GestureType | undefined>;
@@ -1692,6 +1684,7 @@ function ProjectBlock({
   onWorkspacePress?: () => void;
   onWorkspaceReorder: (projectKey: string, workspaces: SidebarWorkspaceEntry[]) => void;
   onWorktreeCreated?: (workspaceId: string) => void;
+  currentPathname: string | null;
   drag: () => void;
   isDragging: boolean;
   dragHandleProps?: DraggableListDragHandleProps;
@@ -1703,18 +1696,19 @@ function ProjectBlock({
       buildSidebarProjectRowModel({
         project,
         collapsed,
-        serverId,
-        activeWorkspaceSelection,
       }),
-    [activeWorkspaceSelection, collapsed, project, serverId],
+    [collapsed, project],
   );
 
-  const isProjectActive = useMemo(() => {
-    if (!serverId || !activeWorkspaceSelection || activeWorkspaceSelection.serverId !== serverId) {
-      return false;
-    }
-    return project.workspaces.some((w) => w.workspaceId === activeWorkspaceSelection.workspaceId);
-  }, [serverId, activeWorkspaceSelection, project.workspaces]);
+  const projectWorkspaceIds = useMemo(
+    () => project.workspaces.map((workspace) => workspace.workspaceId),
+    [project.workspaces],
+  );
+  const isProjectActive = useIsNavigationProjectActive({
+    serverId,
+    workspaceIds: projectWorkspaceIds,
+    enabled: selectionEnabled,
+  });
 
   const renderWorkspaceRow = useCallback(
     (
@@ -1725,25 +1719,20 @@ function ProjectBlock({
         dragHandleProps?: DraggableListDragHandleProps;
       },
     ) => {
-      const isSelected =
-        Boolean(serverId) &&
-        activeWorkspaceSelection?.serverId === serverId &&
-        activeWorkspaceSelection.workspaceId === item.workspaceId;
-
       return (
         <WorkspaceRow
           workspace={item}
-          selected={isSelected}
           shortcutNumber={shortcutIndexByWorkspaceKey.get(item.workspaceKey) ?? null}
           showShortcutBadge={showShortcutBadges}
           canCopyBranchName={project.projectKind === "git"}
           isCreating={creatingWorkspaceIds.has(item.workspaceId)}
+          selectionEnabled={selectionEnabled}
           onPress={() => {
             if (!serverId) {
               return;
             }
             onWorkspacePress?.();
-            navigateToWorkspace(serverId, item.workspaceId);
+            navigateToWorkspace(serverId, item.workspaceId, { currentPathname });
           }}
           drag={input?.drag ?? (() => {})}
           isDragging={input?.isDragging ?? false}
@@ -1752,11 +1741,12 @@ function ProjectBlock({
       );
     },
     [
-      activeWorkspaceSelection,
       project.projectKind,
       creatingWorkspaceIds,
+      currentPathname,
       onWorkspacePress,
       serverId,
+      selectionEnabled,
       shortcutIndexByWorkspaceKey,
       showShortcutBadges,
     ],
@@ -1843,7 +1833,9 @@ function ProjectBlock({
               return;
             }
             onWorkspacePress?.();
-            navigateToWorkspace(serverId, rowModel.workspace.workspaceId);
+            navigateToWorkspace(serverId, rowModel.workspace.workspaceId, {
+              currentPathname,
+            });
           }}
           serverId={serverId}
           onWorkspacePress={onWorkspacePress}
@@ -1856,6 +1848,7 @@ function ProjectBlock({
           isProjectActive={isProjectActive}
           onRemoveProject={handleRemoveProject}
           removeProjectStatus={isRemovingProject ? "pending" : "idle"}
+          selectionEnabled={selectionEnabled}
         />
       ) : (
         <>
@@ -1914,9 +1907,7 @@ export function SidebarWorkspaceList({
   listFooterComponent,
   parentGestureRef,
 }: SidebarWorkspaceListProps) {
-  const isMobile = useIsCompactFormFactor();
   const pathname = usePathname();
-  const activeWorkspaceSelection = useNavigationActiveWorkspaceSelection();
   const [creatingWorkspaceIds, setCreatingWorkspaceIds] = useState<Set<string>>(() => new Set());
   const creatingWorkspaceTimeoutsRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(
     new Map(),
@@ -1932,7 +1923,7 @@ export function SidebarWorkspaceList({
     () => Boolean(pathname && parseHostWorkspaceRouteFromPathname(pathname)),
     [pathname],
   );
-  const effectiveActiveWorkspaceSelection = isWorkspaceRoute ? activeWorkspaceSelection : null;
+  const selectionEnabled = isWorkspaceRoute;
 
   const projectIconRequests = useMemo(() => {
     if (!serverId) {
@@ -2137,7 +2128,7 @@ export function SidebarWorkspaceList({
           displayName={item.projectName}
           iconDataUri={projectIconByProjectKey.get(item.projectKey) ?? null}
           serverId={serverId}
-          activeWorkspaceSelection={effectiveActiveWorkspaceSelection}
+          selectionEnabled={selectionEnabled}
           showShortcutBadges={showShortcutBadges}
           shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
           parentGestureRef={parentGestureRef}
@@ -2145,6 +2136,7 @@ export function SidebarWorkspaceList({
           onWorkspacePress={onWorkspacePress}
           onWorkspaceReorder={handleWorkspaceReorder}
           onWorktreeCreated={handleWorktreeCreated}
+          currentPathname={pathname}
           drag={drag}
           isDragging={isActive}
           dragHandleProps={dragHandleProps}
@@ -2155,13 +2147,14 @@ export function SidebarWorkspaceList({
     },
     [
       collapsedProjectKeys,
-      effectiveActiveWorkspaceSelection,
       handleWorktreeCreated,
       handleWorkspaceReorder,
       onWorkspacePress,
       onToggleProjectCollapsed,
       parentGestureRef,
+      pathname,
       projectIconByProjectKey,
+      selectionEnabled,
       serverId,
       shortcutIndexByWorkspaceKey,
       showShortcutBadges,