fix(app): retire the docked explorer sidebar

Upgrading to 0.5.0-beta.1 left the old docked explorer sidebar showing next to the new explorer pane, with no way to dismiss it. The sidebar rendered off the persisted `desktop.fileExplorerOpen` flag. #3287 rerouted the explorer toggle to the workspace-layout explorer pane, so nothing on a wide layout ever wrote that flag false again, and no migration cleared it. Assistant directory links and review attachments could still set it. On Windows and Linux the sidebar's close button was suppressed because the OS window controls own the top-right corner, so there was no affordance at all. The explorer is now one surface picked from two facts — is the layout compact, and can the platform render split panes: compact -> slide-over overlay (panel store) non-compact + splits -> dedicated right pane (layout store) non-compact, no splits -> ordinary tabs in the focused pane `workspace-tabs/explorer-surface.ts` owns that choice and every entry point routes through it, so the toggle, Ctrl+E, Ctrl+., directory links, review attachments and side file opens can no longer disagree about where the explorer lives. Pane splits stay gated on `isWeb`: they depend on dnd-kit and DOM-backed accessibility helpers. Native tablets are non-compact without splits, so they get explorer tabs rather than a second pane — deliberately trading side-by-side agent and Changes for a surface that only renders what the single-column tab row can actually reach. Ctrl+. is handled by the workspace screen rather than the app shell. The pathname alone cannot identify the active workspace: desktop cold-starts at "/" and restores the remembered workspace from route params, so a key derived from the pathname is null exactly when a workspace is mounted, and the explorer reads as permanently closed. `desktop.fileExplorerOpen` and `explorerWidth` are dropped by a migration to panel-state v15 but stay declared in the persisted schema. That schema is a strict object and the validated storage deletes the whole entry when parsing fails, so removing the keys outright would wipe every upgrading user's sidebar width, expanded paths and diff-collapse state.
2026-08-19 15:52:51 +02:00
parent 929d2b717e
commit 345638dc7f
21 changed files with 832 additions and 857 deletions
@@ -3,10 +3,10 @@ import { View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import { useActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
 import { useWorkspace } from "@/stores/session-store-hooks";
-import { CompactExplorerSidebar } from "@/components/explorer-sidebar";
+import { CompactExplorerSidebar } from "@/components/compact-explorer-sidebar";
 import { useOpenFileExplorerGesture } from "@/mobile-panels/gestures";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
-import { selectIsFileExplorerOpen, usePanelStore } from "@/stores/panel-store";
+import { selectIsCompactFileExplorerOpen, usePanelStore } from "@/stores/panel-store";
 import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
 import { useWorkspaceCheckoutStatus } from "@/screens/workspace/use-workspace-checkout-status";
 import { openWorkspaceFileFromExplorer } from "@/screens/workspace/workspace-file-open-command";
@@ -46,9 +46,7 @@ function useActiveCompactExplorerSidebarModel(
 ): CompactExplorerSidebarHostModel | null {
  const selection = useActiveWorkspaceSelection();
  const workspace = useWorkspace(selection?.serverId ?? null, selection?.workspaceId ?? null);
-  const isExplorerOpen = usePanelStore((state) =>
-    selectIsFileExplorerOpen(state, { isCompact: true }),
-  );
+  const isExplorerOpen = usePanelStore(selectIsCompactFileExplorerOpen);
  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
  const client = useHostRuntimeClient(selection?.serverId ?? "");
  const isConnected = useHostRuntimeIsConnected(selection?.serverId ?? "");
@@ -99,7 +97,7 @@ interface CompactExplorerSidebarHostProps {

 export function CompactExplorerSidebarHost({ children, enabled }: CompactExplorerSidebarHostProps) {
  const model = useActiveCompactExplorerSidebarModel(enabled);
-  const openFileExplorerForCheckout = usePanelStore((state) => state.openFileExplorerForCheckout);
+  const openCompactFileExplorer = usePanelStore((state) => state.openCompactFileExplorer);
  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
  const openWorkspaceTabInFocusedPane = useWorkspaceLayoutStore(
    (state) => state.openTabInFocusedPane,
@@ -110,15 +108,12 @@ export function CompactExplorerSidebarHost({ children, enabled }: CompactExplore
    if (!model?.workspaceRoot) {
      return;
    }
-    openFileExplorerForCheckout({
-      isCompact: true,
-      checkout: {
-        serverId: model.serverId,
-        cwd: model.workspaceRoot,
-        isGit: model.isGit,
-      },
+    openCompactFileExplorer({
+      serverId: model.serverId,
+      cwd: model.workspaceRoot,
+      isGit: model.isGit,
    });
-  }, [model, openFileExplorerForCheckout]);
+  }, [model, openCompactFileExplorer]);

  const handleOpenFile = useCallback(
    (filePath: string) => {
@@ -1,20 +1,15 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  View,
-  Text,
-  Pressable,
-  useWindowDimensions,
-  StyleSheet as RNStyleSheet,
-} from "react-native";
+import { useCallback, useMemo } from "react";
+import { View, Text, Pressable } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Animated, { useAnimatedStyle, useSharedValue, runOnJS } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-import { Gesture } from "react-native-gesture-handler";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { X } from "lucide-react-native";
 import { useTranslation } from "react-i18next";
 import { formatPrTabLabel, PullRequestTabIcon } from "@/git/pull-request-panel";
-import { usePanelStore, selectIsFileExplorerOpen, type ExplorerTab } from "@/stores/panel-store";
+import {
+  usePanelStore,
+  selectIsCompactFileExplorerOpen,
+  type ExplorerTab,
+} from "@/stores/panel-store";
 import { useCloseFileExplorerGesture } from "@/mobile-panels/gestures";
 import { MobilePanelOverlay } from "@/mobile-panels/presentation";
 import {
@@ -26,16 +21,10 @@ import { ChangesSurface } from "@/git/diff-pane";
 import { FileExplorerPane } from "./file-explorer-pane";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
 import { shouldUseCompactExplorerKeyboardPadding } from "@/hooks/keyboard-shift-policy";
-import { useHasOwnedWindowChromeObstruction, WindowChromeSafeArea } from "@/utils/desktop-window";
+import { WindowChromeSafeArea } from "@/utils/desktop-window";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
 import { RetainedPanel, RetainedPanelActivity } from "@/components/retained-panel";
 import { useMountedTabSet } from "@/screens/workspace/use-mounted-tab-set";
-import { SidebarResizeHandle } from "@/components/sidebar-resize-handle";
-import { resolveDesktopExplorerWidth } from "@/components/desktop-sidebar-layout";
-import {
-  SIDEBAR_RESIZE_ACTIVATION_OFFSET,
-  SIDEBAR_RESIZE_FAIL_OFFSET,
-} from "@/components/sidebar-resize-handle-layout";
 import { usePullRequestPanelAvailability } from "@/panels/pull-request-availability";
 import { PullRequestContent } from "@/panels/pull-request";
 import { useAddFileToChat } from "@/panels/use-add-file-to-chat";
@@ -81,7 +70,7 @@ export function CompactExplorerSidebar({
 }: ExplorerSidebarProps) {
  const { theme } = useUnistyles();
  const insets = useSafeAreaInsets();
-  const isOpen = usePanelStore((state) => selectIsFileExplorerOpen(state, { isCompact: true }));
+  const isOpen = usePanelStore(selectIsCompactFileExplorerOpen);
  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
  const { explorerTab, handleTabPress } = useExplorerSidebarSharedState({
    serverId,
@@ -149,123 +138,6 @@ export function CompactExplorerSidebar({
  );
 }

-export function ExplorerSidebar({
-  serverId,
-  workspaceId,
-  workspaceRoot,
-  isGit,
-  onOpenFile,
-}: ExplorerSidebarProps) {
-  const insets = useSafeAreaInsets();
-  const explorerWidth = usePanelStore((state) => state.explorerWidth);
-  const setExplorerWidth = usePanelStore((state) => state.setExplorerWidth);
-  const isOpen = usePanelStore((state) => selectIsFileExplorerOpen(state, { isCompact: false }));
-  const closeDesktopFileExplorer = usePanelStore((state) => state.closeDesktopFileExplorer);
-  const { explorerTab, handleTabPress } = useExplorerSidebarSharedState({
-    serverId,
-    workspaceRoot,
-    isGit,
-  });
-  const { width: viewportWidth } = useWindowDimensions();
-  const visibleExplorerWidth = resolveDesktopExplorerWidth({
-    requestedWidth: explorerWidth,
-    viewportWidth,
-  });
-  const startWidthRef = useRef(visibleExplorerWidth);
-  const resizeWidth = useSharedValue(visibleExplorerWidth);
-  const [resizePressed, setResizePressed] = useState(false);
-  const showResizeGrip = useCallback(() => setResizePressed(true), []);
-  const hideResizeGrip = useCallback(() => setResizePressed(false), []);
-
-  useEffect(() => {
-    resizeWidth.value = visibleExplorerWidth;
-  }, [resizeWidth, visibleExplorerWidth]);
-
-  const handleDesktopClose = useCallback(() => {
-    logExplorerSidebar("handleClose", {
-      reason: "desktop-close-button",
-      isOpen,
-    });
-    closeDesktopFileExplorer();
-  }, [closeDesktopFileExplorer, isOpen]);
-
-  const resizeGesture = useMemo(
-    () =>
-      Gesture.Pan()
-        .enabled(true)
-        .hitSlop({ left: 8, right: 8, top: 0, bottom: 0 })
-        .onBegin(() => {
-          scheduleOnRN(showResizeGrip);
-        })
-        // See the left sidebar's gesture: horizontal intent only, with the start
-        // width anchored to the activation translation so the threshold is free.
-        .activeOffsetX([-SIDEBAR_RESIZE_ACTIVATION_OFFSET, SIDEBAR_RESIZE_ACTIVATION_OFFSET])
-        .failOffsetY([-SIDEBAR_RESIZE_FAIL_OFFSET, SIDEBAR_RESIZE_FAIL_OFFSET])
-        .onStart((event) => {
-          startWidthRef.current = visibleExplorerWidth + event.translationX;
-          resizeWidth.value = visibleExplorerWidth;
-        })
-        .onUpdate((event) => {
-          const newWidth = startWidthRef.current - event.translationX;
-          resizeWidth.value = resolveDesktopExplorerWidth({
-            requestedWidth: newWidth,
-            viewportWidth,
-          });
-        })
-        .onEnd(() => {
-          runOnJS(setExplorerWidth)(resizeWidth.value);
-        })
-        .onFinalize(() => {
-          scheduleOnRN(hideResizeGrip);
-        }),
-    [
-      hideResizeGrip,
-      resizeWidth,
-      setExplorerWidth,
-      showResizeGrip,
-      viewportWidth,
-      visibleExplorerWidth,
-    ],
-  );
-
-  const resizeAnimatedStyle = useAnimatedStyle(() => ({
-    width: resizeWidth.value,
-  }));
-  const desktopSidebarStyle = useMemo(
-    () => [explorerStaticStyles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insets.top }],
-    [resizeAnimatedStyle, insets.top],
-  );
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <Animated.View style={desktopSidebarStyle}>
-      <View style={[styles.desktopSidebarBorder, { flex: 1 }]}>
-        <SidebarResizeHandle
-          edge="left"
-          gesture={resizeGesture}
-          pressed={resizePressed}
-          testID="explorer-sidebar-resize-handle"
-        />
-
-        <ExplorerSidebarContent
-          activeTab={explorerTab}
-          onTabPress={handleTabPress}
-          onClose={handleDesktopClose}
-          serverId={serverId}
-          workspaceId={workspaceId}
-          workspaceRoot={workspaceRoot}
-          isGit={isGit}
-          isOpen={isOpen}
-          onOpenFile={onOpenFile}
-        />
-      </View>
-    </Animated.View>
-  );
-}
-
 interface ExplorerTabButtonProps {
  tab: ExplorerTab;
  active: boolean;
@@ -319,7 +191,6 @@ function ExplorerSidebarContent({
 }: SidebarContentProps) {
  const { theme } = useUnistyles();
  const { t } = useTranslation();
-  const hasRightWindowControls = useHasOwnedWindowChromeObstruction("top-right");
  const { prPane, showPullRequest: showPrTab } = usePullRequestPanelAvailability({
    serverId,
    cwd: workspaceRoot,
@@ -389,27 +260,23 @@ function ExplorerSidebarContent({
          )}
        </View>
        <View style={styles.headerRightSection}>
-          {!hasRightWindowControls && (
-            <Pressable
-              onPress={onClose}
-              style={styles.closeButton}
-              testID="explorer-close"
-              nativeID="explorer-close"
-              accessible
-              accessibilityRole="button"
-              accessibilityLabel={t("workspace.tabs.explorer.close")}
-              hitSlop={8}
-            >
-              {({ hovered, pressed }) => (
-                <X
-                  size={18}
-                  color={
-                    hovered || pressed ? theme.colors.foreground : theme.colors.foregroundMuted
-                  }
-                />
-              )}
-            </Pressable>
-          )}
+          <Pressable
+            onPress={onClose}
+            style={styles.closeButton}
+            testID="explorer-close"
+            nativeID="explorer-close"
+            accessible
+            accessibilityRole="button"
+            accessibilityLabel={t("workspace.tabs.explorer.close")}
+            hitSlop={8}
+          >
+            {({ hovered, pressed }) => (
+              <X
+                size={18}
+                color={hovered || pressed ? theme.colors.foreground : theme.colors.foregroundMuted}
+              />
+            )}
+          </Pressable>
        </View>
      </WindowChromeSafeArea>

@@ -495,21 +362,7 @@ function FilesPane({

 const PrTabContent = PullRequestContent;

-// Static styles for Animated.Views — must NOT use Unistyles dynamic theme to
-// avoid the "Unable to find node on an unmounted component" crash when Unistyles
-// tries to patch the native node that Reanimated also manages.
-const explorerStaticStyles = RNStyleSheet.create({
-  desktopSidebar: {
-    position: "relative" as const,
-  },
-});
-
 const styles = StyleSheet.create((theme) => ({
-  desktopSidebarBorder: {
-    borderLeftWidth: 1,
-    borderLeftColor: theme.colors.border,
-    backgroundColor: theme.colors.surfaceSidebar,
-  },
  sidebarContent: {
    flex: 1,
    minHeight: 0,
@@ -3,7 +3,6 @@ import {
  canDesktopAppSidebarShare,
  resolveDesktopAppChromeLayout,
  resolveDesktopAppContentMinimum,
-  resolveDesktopExplorerWidth,
  resolveDesktopSidebarVisibility,
  resolveDesktopSidebarWidth,
 } from "@/components/desktop-sidebar-layout";
@@ -79,18 +78,8 @@ describe("desktop sidebar layout", () => {
    expect(resolveDesktopSidebarWidth({ requestedWidth: 600, viewportWidth: 1440 })).toBe(600);
  });

-  it("keeps a temporarily narrow explorer render-only", () => {
-    expect(resolveDesktopExplorerWidth({ requestedWidth: 400, viewportWidth: 751 })).toBe(351);
-    expect(resolveDesktopExplorerWidth({ requestedWidth: 400, viewportWidth: 1440 })).toBe(400);
-  });
-
-  it("yields app navigation when settings or Explorer need the shell width", () => {
-    const settingsMinimum = resolveDesktopAppContentMinimum({
-      isSettingsRoute: true,
-      isWorkspaceExplorerOpen: false,
-      requestedExplorerWidth: 400,
-      viewportWidth: 751,
-    });
+  it("yields app navigation when settings needs the shell width", () => {
+    const settingsMinimum = resolveDesktopAppContentMinimum({ isSettingsRoute: true });
    expect(settingsMinimum).toBe(720);
    expect(
      canDesktopAppSidebarShare({
@@ -99,32 +88,16 @@ describe("desktop sidebar layout", () => {
        viewportWidth: 751,
      }),
    ).toBe(false);
+  });

-    const explorerMinimum = resolveDesktopAppContentMinimum({
-      isSettingsRoute: false,
-      isWorkspaceExplorerOpen: true,
-      requestedExplorerWidth: 400,
-      viewportWidth: 751,
-    });
-    expect(explorerMinimum).toBe(751);
+  it("imposes no content minimum outside settings", () => {
+    expect(resolveDesktopAppContentMinimum({ isSettingsRoute: false })).toBe(0);
    expect(
      canDesktopAppSidebarShare({
-        contentMinimumWidth: explorerMinimum,
+        contentMinimumWidth: resolveDesktopAppContentMinimum({ isSettingsRoute: false }),
        requestedSidebarWidth: 320,
        viewportWidth: 751,
      }),
-    ).toBe(false);
-    expect(
-      canDesktopAppSidebarShare({
-        contentMinimumWidth: resolveDesktopAppContentMinimum({
-          isSettingsRoute: false,
-          isWorkspaceExplorerOpen: true,
-          requestedExplorerWidth: 400,
-          viewportWidth: 1120,
-        }),
-        requestedSidebarWidth: 320,
-        viewportWidth: 1120,
-      }),
    ).toBe(true);
  });
 });
@@ -1,12 +1,7 @@
 import { SETTINGS_DESKTOP_SPLIT_MIN_WIDTH } from "@/constants/layout";
-import {
-  MAX_EXPLORER_SIDEBAR_WIDTH,
-  MAX_SIDEBAR_WIDTH,
-  MIN_EXPLORER_SIDEBAR_WIDTH,
-  MIN_SIDEBAR_WIDTH,
-} from "@/stores/panel-store";
+import { MAX_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH } from "@/stores/panel-store";

-export const MIN_DESKTOP_CENTER_WIDTH = 400;
+const MIN_DESKTOP_CENTER_WIDTH = 400;

 export function resolveDesktopSidebarVisibility(input: {
  chromeEnabled: boolean;
@@ -67,32 +62,8 @@ export function resolveDesktopSidebarWidth(input: {
  });
 }

-export function resolveDesktopExplorerWidth(input: {
-  requestedWidth: number;
-  viewportWidth: number;
-}): number {
-  "worklet";
-  return resolveDesktopPanelWidth({
-    ...input,
-    minimumWidth: MIN_EXPLORER_SIDEBAR_WIDTH,
-    maximumWidth: MAX_EXPLORER_SIDEBAR_WIDTH,
-  });
-}
-
-export function resolveDesktopAppContentMinimum(input: {
-  isSettingsRoute: boolean;
-  isWorkspaceExplorerOpen: boolean;
-  requestedExplorerWidth: number;
-  viewportWidth: number;
-}): number {
-  const workspaceMinimum = input.isWorkspaceExplorerOpen
-    ? MIN_DESKTOP_CENTER_WIDTH +
-      resolveDesktopExplorerWidth({
-        requestedWidth: input.requestedExplorerWidth,
-        viewportWidth: input.viewportWidth,
-      })
-    : 0;
-  return Math.max(input.isSettingsRoute ? SETTINGS_DESKTOP_SPLIT_MIN_WIDTH : 0, workspaceMinimum);
+export function resolveDesktopAppContentMinimum(input: { isSettingsRoute: boolean }): number {
+  return input.isSettingsRoute ? SETTINGS_DESKTOP_SPLIT_MIN_WIDTH : 0;
 }

 export function canDesktopAppSidebarShare(input: {