feat(app): make the side panel user-directed (#3605)

* feat(app): let the file panel close its tree rail The file panel's tree rail was permanent on desktop — the changes panel had a folder-tree toggle in its toolbar, the file toolbar had nothing, so the rail was there whether you wanted it or not. The changes panel's private DesktopTreeToggle becomes a shared TreeRailToggle so both toolbars render the same affordance; that also drops the treeToggleStyle prop threaded through ChangesToolbarProps, which recomputed exactly what the component already built internally. The i18n keys move out of workspace.git.diff into workspace.tree, since a shared component reaching into the git namespace would rot. The two rails keep independent flags — the file rail in panel-store, the changes rail in useChangesPreferences — so closing one leaves the other alone. FileTreeToggle wires itself to the store rather than taking a callback: the bar renders several components below FilePanel, where the rail actually lives. Both rails also get narrower (320 -> 260 default, 200 -> 180 minimum). The persist version bump resets treeRailWidth on purpose: nearly every existing install carries the old 320 default, so without the reset the narrower rail would only ever reach new users. Anyone who dragged their rail to a deliberate custom width loses it once. Note that MIN_CONTENT_WIDTH still clamps the rail to `containerWidth - 240`, so in a narrow pane the new default never applies — that floor, not the default, is what sets the width there. * feat(app): make the side panel an empty workspace surface The fixed, hideable side panel keeps supporting context beside an agent without seeding content. Pane-local choices stay local, while implicit supporting opens follow a persisted routing preference. * test(app): exercise side panel policy through its capability boundary The browser rail journey already covers the real tree-toggle behavior. Side-panel policy tests now pass their platform capability through the public boundary instead of replacing a production module. * test(app): expect an empty side panel after upgrade * test(app): expect an empty first split pane * test(app): account for the empty side panel in split retention * feat(app): make workspace panel tabs independent Give explicit New actions fresh tab instances, keep panel state opaque to tab management, preserve File navigation context, and stabilize uncached File transitions. * fix(app): preserve file conflicts during preview refresh Keep the current preview mounted for same-target reads and conversions so the editor retains its conflict observation state. Clear retained previews only when the file target changes.
2026-08-20 21:49:23 +02:00
parent 2a0a0ff656
commit 19a7d26349
107 changed files with 5386 additions and 2178 deletions
@@ -0,0 +1,247 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@react-native-async-storage/async-storage", () => {
+  const storage = new Map<string, string>();
+  return {
+    default: {
+      getItem: vi.fn(async (key: string) => storage.get(key) ?? null),
+      setItem: vi.fn(async (key: string, value: string) => {
+        storage.set(key, value);
+      }),
+      removeItem: vi.fn(async (key: string) => {
+        storage.delete(key);
+      }),
+    },
+  };
+});
+
+import { usePanelStore } from "@/stores/panel-store";
+import {
+  collectAllPanes,
+  collectAllTabs,
+  findPaneById,
+  findPaneContainingTab,
+  selectSidePanelPaneId,
+  useWorkspaceLayoutStore,
+} from "@/stores/workspace-layout-store";
+import {
+  hideSidePanel,
+  isSidePanelOpen,
+  openSidePanelView,
+  openSupportingTab,
+  showSidePanel,
+  toggleSidePanel,
+} from "@/workspace-tabs/side-panel";
+
+const WORKSPACE_KEY = "server-1:ws-main";
+const CHECKOUT = { serverId: "server-1", cwd: "/tmp/repo", isGit: true };
+
+function layout() {
+  const value = useWorkspaceLayoutStore.getState().layoutByWorkspace[WORKSPACE_KEY];
+  if (!value) throw new Error("workspace layout missing");
+  return value;
+}
+
+function tabKinds(): string[] {
+  return collectAllTabs(layout().root).map((tab) => tab.target.kind);
+}
+
+function focusedPaneTabKinds(): string[] {
+  const current = layout();
+  const pane = findPaneById(current.root, current.focusedPaneId);
+  const tabs = collectAllTabs(current.root);
+  return (pane?.tabIds ?? []).map(
+    (tabId) => tabs.find((tab) => tab.tabId === tabId)?.target.kind ?? "?",
+  );
+}
+
+function sidePanelPaneId(): string | null {
+  return selectSidePanelPaneId(useWorkspaceLayoutStore.getState(), WORKSPACE_KEY);
+}
+
+function paneIdHolding(tabId: string): string | undefined {
+  return findPaneContainingTab(layout().root, tabId)?.id;
+}
+
+beforeEach(() => {
+  useWorkspaceLayoutStore.setState({
+    layoutByWorkspace: {},
+    sidePanelPaneIdByWorkspace: {},
+    splitSizesByWorkspace: {},
+  });
+  usePanelStore.setState({ mobilePanel: { target: "agent", revision: 0 } });
+});
+
+describe("compact surface", () => {
+  const compact = { isCompact: true, workspaceKey: WORKSPACE_KEY, checkout: CHECKOUT };
+
+  it("opens and closes the overlay without touching the layout", () => {
+    openSidePanelView({ ...compact, view: "files" });
+
+    expect(usePanelStore.getState().mobilePanel.target).toBe("file-explorer");
+    expect(usePanelStore.getState().explorerTab).toBe("files");
+    expect(useWorkspaceLayoutStore.getState().layoutByWorkspace[WORKSPACE_KEY]).toBeUndefined();
+
+    toggleSidePanel(compact);
+    expect(usePanelStore.getState().mobilePanel.target).toBe("agent");
+  });
+
+  it("reports the overlay state, not the layout state", () => {
+    expect(isSidePanelOpen({ isCompact: true, workspaceKey: WORKSPACE_KEY })).toBe(false);
+    toggleSidePanel(compact);
+    expect(isSidePanelOpen({ isCompact: true, workspaceKey: WORKSPACE_KEY })).toBe(true);
+  });
+});
+
+describe("non-compact with splits", () => {
+  const wide = {
+    isCompact: false,
+    supportsPaneSplits: true,
+    workspaceKey: WORKSPACE_KEY,
+    checkout: CHECKOUT,
+  };
+
+  it("reveals an empty pane rather than seeding a view into it", () => {
+    toggleSidePanel(wide);
+
+    expect(isSidePanelOpen(wide)).toBe(true);
+    expect(tabKinds()).toEqual([]);
+    expect(collectAllPanes(layout().root).length).toBeGreaterThan(1);
+  });
+
+  it("opens the view the user picked from the revealed panel", () => {
+    showSidePanel(wide);
+    openSidePanelView({ ...wide, view: "changes" });
+
+    const changesTabId = collectAllTabs(layout().root).find(
+      (tab) => tab.target.kind === "working_diff",
+    )?.tabId;
+    expect(changesTabId).toBeTruthy();
+    expect(paneIdHolding(changesTabId as string)).toBe(sidePanelPaneId());
+  });
+
+  it("hides the pane on the second toggle and restores its tabs on the third", () => {
+    openSidePanelView({ ...wide, view: "changes" });
+    toggleSidePanel(wide);
+    expect(isSidePanelOpen(wide)).toBe(false);
+
+    toggleSidePanel(wide);
+    expect(isSidePanelOpen(wide)).toBe(true);
+    expect(tabKinds().filter((kind) => kind === "working_diff")).toHaveLength(1);
+  });
+
+  it("leaves the compact overlay alone", () => {
+    toggleSidePanel(wide);
+    expect(usePanelStore.getState().mobilePanel.target).toBe("agent");
+  });
+
+  it("routes a new supporting tab into the side panel", () => {
+    const tabId = openSupportingTab({
+      isCompact: false,
+      supportsPaneSplits: true,
+      workspaceKey: WORKSPACE_KEY,
+      target: { kind: "files" },
+      openInSidePanelByDefault: true,
+    });
+
+    expect(tabId).not.toBeNull();
+    expect(paneIdHolding(tabId as string)).toBe(sidePanelPaneId());
+    expect(isSidePanelOpen(wide)).toBe(true);
+  });
+
+  it("finds a supporting tab the user moved instead of dragging it back", () => {
+    const tabId = openSupportingTab({
+      isCompact: false,
+      supportsPaneSplits: true,
+      workspaceKey: WORKSPACE_KEY,
+      target: { kind: "files" },
+      openInSidePanelByDefault: true,
+    }) as string;
+    useWorkspaceLayoutStore.getState().moveTabToPane(WORKSPACE_KEY, tabId, "main");
+
+    const reopened = openSupportingTab({
+      isCompact: false,
+      supportsPaneSplits: true,
+      workspaceKey: WORKSPACE_KEY,
+      target: { kind: "files" },
+      openInSidePanelByDefault: true,
+    });
+
+    expect(reopened).toBe(tabId);
+    expect(paneIdHolding(tabId)).toBe("main");
+  });
+
+  it("opens a new supporting tab in the focused pane when routing is off", () => {
+    const tabId = openSupportingTab({
+      isCompact: false,
+      supportsPaneSplits: true,
+      workspaceKey: WORKSPACE_KEY,
+      target: { kind: "files" },
+      openInSidePanelByDefault: false,
+    });
+
+    expect(paneIdHolding(tabId as string)).toBe(layout().focusedPaneId);
+    expect(isSidePanelOpen(wide)).toBe(false);
+  });
+
+  it("adds a background supporting tab without revealing the panel", () => {
+    const tabId = openSupportingTab({
+      isCompact: false,
+      supportsPaneSplits: true,
+      workspaceKey: WORKSPACE_KEY,
+      target: { kind: "setup", workspaceId: "ws-main" },
+      openInSidePanelByDefault: true,
+      background: true,
+    });
+
+    expect(paneIdHolding(tabId as string)).toBe(sidePanelPaneId());
+    expect(isSidePanelOpen(wide)).toBe(false);
+  });
+
+  it("keeps the panel's tabs when it is hidden", () => {
+    openSidePanelView({ ...wide, view: "files" });
+    hideSidePanel(wide);
+
+    expect(isSidePanelOpen(wide)).toBe(false);
+    expect(tabKinds()).toEqual(["files"]);
+  });
+});
+
+describe("non-compact without splits", () => {
+  const tablet = {
+    isCompact: false,
+    supportsPaneSplits: false,
+    workspaceKey: WORKSPACE_KEY,
+    checkout: CHECKOUT,
+  };
+
+  it("opens the side panel as a tab in the focused pane, never a second pane", () => {
+    toggleSidePanel(tablet);
+
+    expect(focusedPaneTabKinds()).toContain("working_diff");
+    expect(collectAllPanes(layout().root)).toHaveLength(1);
+    expect(isSidePanelOpen(tablet)).toBe(true);
+  });
+
+  it("closes the side panel tab on the second toggle", () => {
+    toggleSidePanel(tablet);
+    toggleSidePanel(tablet);
+
+    expect(tabKinds()).not.toContain("working_diff");
+    expect(isSidePanelOpen(tablet)).toBe(false);
+  });
+
+  it("keeps supporting tabs in the focused pane so the tab row still lists them", () => {
+    const tabId = openSupportingTab({
+      isCompact: false,
+      supportsPaneSplits: false,
+      workspaceKey: WORKSPACE_KEY,
+      target: { kind: "files" },
+      openInSidePanelByDefault: true,
+    });
+
+    expect(tabId).not.toBeNull();
+    expect(paneIdHolding(tabId as string)).toBe(layout().focusedPaneId);
+    expect(collectAllPanes(layout().root)).toHaveLength(1);
+  });
+});