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.
This commit is contained in:
Mohamed Boudra
@@ -1,167 +0,0 @@
|
||||
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);
|
||||
}),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const paneSplits = vi.hoisted(() => ({ supported: true }));
|
||||
vi.mock("@/constants/layout", async (importOriginal) => ({
|
||||
...(await importOriginal<typeof import("@/constants/layout")>()),
|
||||
supportsDesktopPaneSplits: () => paneSplits.supported,
|
||||
}));
|
||||
|
||||
import { usePanelStore } from "@/stores/panel-store";
|
||||
import {
|
||||
collectAllPanes,
|
||||
collectAllTabs,
|
||||
findPaneById,
|
||||
findPaneContainingTab,
|
||||
useWorkspaceLayoutStore,
|
||||
} from "@/stores/workspace-layout-store";
|
||||
import {
|
||||
openExplorerSurface,
|
||||
openWorkspaceTabBeside,
|
||||
isExplorerSurfaceOpen,
|
||||
toggleExplorerSurface,
|
||||
} from "@/workspace-tabs/explorer-surface";
|
||||
|
||||
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 ?? "?",
|
||||
);
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
paneSplits.supported = true;
|
||||
useWorkspaceLayoutStore.setState({
|
||||
layoutByWorkspace: {},
|
||||
explorerPaneIdByWorkspace: {},
|
||||
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", () => {
|
||||
openExplorerSurface({ ...compact, view: "files" });
|
||||
|
||||
expect(usePanelStore.getState().mobilePanel.target).toBe("file-explorer");
|
||||
expect(usePanelStore.getState().explorerTab).toBe("files");
|
||||
expect(useWorkspaceLayoutStore.getState().layoutByWorkspace[WORKSPACE_KEY]).toBeUndefined();
|
||||
|
||||
toggleExplorerSurface(compact);
|
||||
expect(usePanelStore.getState().mobilePanel.target).toBe("agent");
|
||||
});
|
||||
|
||||
it("reports the overlay state, not the layout state", () => {
|
||||
expect(isExplorerSurfaceOpen({ isCompact: true, workspaceKey: WORKSPACE_KEY })).toBe(false);
|
||||
toggleExplorerSurface(compact);
|
||||
expect(isExplorerSurfaceOpen({ isCompact: true, workspaceKey: WORKSPACE_KEY })).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("non-compact with splits", () => {
|
||||
const wide = { isCompact: false, workspaceKey: WORKSPACE_KEY, checkout: CHECKOUT };
|
||||
|
||||
it("seeds a Changes tab in a dedicated explorer pane", () => {
|
||||
toggleExplorerSurface(wide);
|
||||
|
||||
expect(tabKinds()).toContain("working_diff");
|
||||
expect(collectAllPanes(layout().root).length).toBeGreaterThan(1);
|
||||
expect(isExplorerSurfaceOpen(wide)).toBe(true);
|
||||
});
|
||||
|
||||
it("hides the pane on the second toggle and restores it on the third", () => {
|
||||
toggleExplorerSurface(wide);
|
||||
toggleExplorerSurface(wide);
|
||||
expect(isExplorerSurfaceOpen(wide)).toBe(false);
|
||||
|
||||
toggleExplorerSurface(wide);
|
||||
expect(isExplorerSurfaceOpen(wide)).toBe(true);
|
||||
// Restoring must not stack a second Changes tab.
|
||||
expect(tabKinds().filter((kind) => kind === "working_diff")).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("leaves the compact overlay alone", () => {
|
||||
toggleExplorerSurface(wide);
|
||||
expect(usePanelStore.getState().mobilePanel.target).toBe("agent");
|
||||
});
|
||||
|
||||
it("opens files beside the current tab, in the explorer pane", () => {
|
||||
const tabId = openWorkspaceTabBeside({
|
||||
isCompact: false,
|
||||
workspaceKey: WORKSPACE_KEY,
|
||||
target: { kind: "files" },
|
||||
});
|
||||
|
||||
expect(tabId).not.toBeNull();
|
||||
const explorerPaneId =
|
||||
useWorkspaceLayoutStore.getState().explorerPaneIdByWorkspace[WORKSPACE_KEY];
|
||||
expect(findPaneContainingTab(layout().root, tabId!)?.id).toBe(explorerPaneId);
|
||||
});
|
||||
});
|
||||
|
||||
describe("non-compact without splits", () => {
|
||||
const tablet = { isCompact: false, workspaceKey: WORKSPACE_KEY, checkout: CHECKOUT };
|
||||
|
||||
beforeEach(() => {
|
||||
paneSplits.supported = false;
|
||||
});
|
||||
|
||||
it("opens the explorer as a tab in the focused pane, never a second pane", () => {
|
||||
toggleExplorerSurface(tablet);
|
||||
|
||||
expect(focusedPaneTabKinds()).toContain("working_diff");
|
||||
expect(collectAllPanes(layout().root)).toHaveLength(1);
|
||||
expect(isExplorerSurfaceOpen(tablet)).toBe(true);
|
||||
});
|
||||
|
||||
it("closes the explorer tab on the second toggle", () => {
|
||||
toggleExplorerSurface(tablet);
|
||||
toggleExplorerSurface(tablet);
|
||||
|
||||
expect(tabKinds()).not.toContain("working_diff");
|
||||
expect(isExplorerSurfaceOpen(tablet)).toBe(false);
|
||||
});
|
||||
|
||||
it("keeps side-opened files in the focused pane so the tab row still lists them", () => {
|
||||
const tabId = openWorkspaceTabBeside({
|
||||
isCompact: false,
|
||||
workspaceKey: WORKSPACE_KEY,
|
||||
target: { kind: "files" },
|
||||
});
|
||||
|
||||
expect(tabId).not.toBeNull();
|
||||
expect(findPaneContainingTab(layout().root, tabId!)?.id).toBe(layout().focusedPaneId);
|
||||
expect(collectAllPanes(layout().root)).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
@@ -1,241 +0,0 @@
|
||||
import { supportsDesktopPaneSplits } from "@/constants/layout";
|
||||
import {
|
||||
usePanelStore,
|
||||
selectIsCompactFileExplorerOpen,
|
||||
type ExplorerTab,
|
||||
} from "@/stores/panel-store";
|
||||
import type { ExplorerCheckoutContext } from "@/stores/explorer-checkout-context";
|
||||
import {
|
||||
collectAllTabs,
|
||||
findPaneById,
|
||||
resolveExplorerPaneId,
|
||||
useWorkspaceLayoutStore,
|
||||
} from "@/stores/workspace-layout-store";
|
||||
import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
|
||||
|
||||
/**
|
||||
* The explorer has three surfaces, picked from two facts — is the layout compact,
|
||||
* and can this platform render split panes:
|
||||
*
|
||||
* compact → slide-over overlay, owned by the panel store
|
||||
* non-compact + splits → dedicated right pane, owned by the layout store
|
||||
* non-compact, no splits → ordinary tabs in the focused pane (native tablets)
|
||||
*
|
||||
* Every entry point goes through this module. Nothing else branches on the surface —
|
||||
* the third case is why: a native tablet renders one pane at a time and the tab row
|
||||
* only lists the focused pane's tabs, so anything routed into a separate explorer
|
||||
* pane there would silently disappear.
|
||||
*/
|
||||
|
||||
/** Tab kinds that are explorer views rather than user content. */
|
||||
const EXPLORER_TAB_KINDS = ["working_diff", "files", "pull_request"] as const;
|
||||
type ExplorerTabKind = (typeof EXPLORER_TAB_KINDS)[number];
|
||||
|
||||
const EXPLORER_VIEW_TARGETS: Record<ExplorerTab, WorkspaceTabTarget> = {
|
||||
changes: { kind: "working_diff" },
|
||||
files: { kind: "files" },
|
||||
pr: { kind: "pull_request" },
|
||||
};
|
||||
|
||||
export interface ExplorerSurfaceQuery {
|
||||
isCompact: boolean;
|
||||
workspaceKey: string | null;
|
||||
}
|
||||
|
||||
export interface ExplorerSurfaceInput extends ExplorerSurfaceQuery {
|
||||
checkout: ExplorerCheckoutContext | null;
|
||||
}
|
||||
|
||||
type LayoutState = ReturnType<typeof useWorkspaceLayoutStore.getState>;
|
||||
|
||||
function isExplorerTabKind(kind: string): kind is ExplorerTabKind {
|
||||
return (EXPLORER_TAB_KINDS as readonly string[]).includes(kind);
|
||||
}
|
||||
|
||||
function canUseExplorerPane(isCompact: boolean): boolean {
|
||||
return !isCompact && supportsDesktopPaneSplits();
|
||||
}
|
||||
|
||||
// ─── Explorer pane (non-compact + splits) ──────────────────────────────────
|
||||
|
||||
function findExplorerPane(state: LayoutState, workspaceKey: string) {
|
||||
const layout = state.layoutByWorkspace[workspaceKey];
|
||||
if (!layout) {
|
||||
return null;
|
||||
}
|
||||
const paneId = resolveExplorerPaneId(layout, state.explorerPaneIdByWorkspace[workspaceKey]);
|
||||
return paneId ? findPaneById(layout.root, paneId) : null;
|
||||
}
|
||||
|
||||
function selectIsExplorerPaneOpen(state: LayoutState, workspaceKey: string | null): boolean {
|
||||
if (!workspaceKey) {
|
||||
return false;
|
||||
}
|
||||
const pane = findExplorerPane(state, workspaceKey);
|
||||
return Boolean(pane && pane.hidden !== true);
|
||||
}
|
||||
|
||||
// ─── Explorer tabs (non-compact, no splits) ────────────────────────────────
|
||||
|
||||
/**
|
||||
* The explorer tab the focused pane is currently showing, if any. On a tablet
|
||||
* "the explorer is open" means exactly that — there is no pane to hide.
|
||||
*/
|
||||
function findActiveExplorerTabId(state: LayoutState, workspaceKey: string): string | null {
|
||||
const layout = state.layoutByWorkspace[workspaceKey];
|
||||
if (!layout) {
|
||||
return null;
|
||||
}
|
||||
const focusedTabId = findPaneById(layout.root, layout.focusedPaneId)?.focusedTabId ?? null;
|
||||
if (!focusedTabId) {
|
||||
return null;
|
||||
}
|
||||
const tab = collectAllTabs(layout.root).find((candidate) => candidate.tabId === focusedTabId);
|
||||
return tab && isExplorerTabKind(tab.target.kind) ? tab.tabId : null;
|
||||
}
|
||||
|
||||
// ─── Public API ────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Open a tab alongside the current one. With splits it lands in the explorer
|
||||
* pane; without them it opens in the focused pane, because that is the only
|
||||
* pane the user can see.
|
||||
*/
|
||||
export function openWorkspaceTabBeside(input: {
|
||||
isCompact: boolean;
|
||||
workspaceKey: string | null;
|
||||
target: WorkspaceTabTarget;
|
||||
parentTabId?: string | null;
|
||||
}): string | null {
|
||||
if (!input.workspaceKey) {
|
||||
return null;
|
||||
}
|
||||
const store = useWorkspaceLayoutStore.getState();
|
||||
const parentTabId = input.parentTabId?.trim() || null;
|
||||
|
||||
if (canUseExplorerPane(input.isCompact)) {
|
||||
return store.openTabInExplorerPaneFocused(input.workspaceKey, {
|
||||
target: input.target,
|
||||
parentTabId,
|
||||
});
|
||||
}
|
||||
|
||||
return parentTabId
|
||||
? store.openChildTabInFocusedPane(input.workspaceKey, input.target, parentTabId)
|
||||
: store.openTabInFocusedPane(input.workspaceKey, input.target);
|
||||
}
|
||||
|
||||
/** {@link openWorkspaceTabBeside} without moving focus. */
|
||||
export function openWorkspaceTabBesideInBackground(input: {
|
||||
isCompact: boolean;
|
||||
workspaceKey: string | null;
|
||||
target: WorkspaceTabTarget;
|
||||
}): string | null {
|
||||
if (!input.workspaceKey) {
|
||||
return null;
|
||||
}
|
||||
const store = useWorkspaceLayoutStore.getState();
|
||||
return canUseExplorerPane(input.isCompact)
|
||||
? store.openTabInExplorerPaneBackground(input.workspaceKey, input.target)
|
||||
: store.openTabInBackground(input.workspaceKey, input.target);
|
||||
}
|
||||
|
||||
/** Reveal the explorer showing `view`. */
|
||||
export function openExplorerSurface(input: ExplorerSurfaceInput & { view: ExplorerTab }): void {
|
||||
if (input.isCompact) {
|
||||
if (!input.checkout) {
|
||||
return;
|
||||
}
|
||||
const panel = usePanelStore.getState();
|
||||
panel.setExplorerTabForCheckout({ ...input.checkout, tab: input.view });
|
||||
panel.openCompactFileExplorer(input.checkout);
|
||||
return;
|
||||
}
|
||||
|
||||
openWorkspaceTabBeside({
|
||||
isCompact: input.isCompact,
|
||||
workspaceKey: input.workspaceKey,
|
||||
target: EXPLORER_VIEW_TARGETS[input.view],
|
||||
});
|
||||
}
|
||||
|
||||
/** Show the explorer if it is hidden, hide it if it is showing. */
|
||||
export function toggleExplorerSurface(input: ExplorerSurfaceInput): void {
|
||||
if (input.isCompact) {
|
||||
if (input.checkout) {
|
||||
usePanelStore.getState().toggleCompactFileExplorer(input.checkout);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!input.workspaceKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
const workspaceKey = input.workspaceKey;
|
||||
const store = useWorkspaceLayoutStore.getState();
|
||||
|
||||
if (!canUseExplorerPane(input.isCompact)) {
|
||||
const activeExplorerTabId = findActiveExplorerTabId(store, workspaceKey);
|
||||
if (activeExplorerTabId) {
|
||||
store.closeTab(workspaceKey, activeExplorerTabId);
|
||||
return;
|
||||
}
|
||||
store.openTabInFocusedPane(workspaceKey, EXPLORER_VIEW_TARGETS.changes);
|
||||
return;
|
||||
}
|
||||
|
||||
const layout = store.layoutByWorkspace[workspaceKey];
|
||||
const parentTabId = layout
|
||||
? (findPaneById(layout.root, layout.focusedPaneId)?.focusedTabId ?? null)
|
||||
: null;
|
||||
const explorerPane = findExplorerPane(store, workspaceKey);
|
||||
|
||||
if (explorerPane) {
|
||||
if (explorerPane.hidden !== true) {
|
||||
store.hidePane(workspaceKey, explorerPane.id);
|
||||
return;
|
||||
}
|
||||
store.showPane(workspaceKey, explorerPane.id);
|
||||
// The companion pane can already hold an unrelated tab (the setup progress
|
||||
// tab auto-opens here) before the user ever toggles it, so "empty" is the
|
||||
// wrong signal for "needs a Changes tab seeded". Check for it specifically.
|
||||
const layoutTabs = layout ? collectAllTabs(layout.root) : [];
|
||||
const hasChangesTab = explorerPane.tabIds.some(
|
||||
(tabId) => layoutTabs.find((tab) => tab.tabId === tabId)?.target.kind === "working_diff",
|
||||
);
|
||||
if (hasChangesTab) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
store.openTabInExplorerPaneFocused(workspaceKey, {
|
||||
target: EXPLORER_VIEW_TARGETS.changes,
|
||||
parentTabId,
|
||||
});
|
||||
}
|
||||
|
||||
/** Reactive "is the explorer showing" for the surface this layout uses. */
|
||||
export function useIsExplorerSurfaceOpen(input: ExplorerSurfaceQuery): boolean {
|
||||
const compactOpen = usePanelStore(selectIsCompactFileExplorerOpen);
|
||||
const paneOpen = useWorkspaceLayoutStore((state) =>
|
||||
input.isCompact ? false : isExplorerOpenForLayout(state, input.workspaceKey),
|
||||
);
|
||||
return input.isCompact ? compactOpen : paneOpen;
|
||||
}
|
||||
|
||||
/** Imperative counterpart of {@link useIsExplorerSurfaceOpen}. */
|
||||
export function isExplorerSurfaceOpen(input: ExplorerSurfaceQuery): boolean {
|
||||
if (input.isCompact) {
|
||||
return selectIsCompactFileExplorerOpen(usePanelStore.getState());
|
||||
}
|
||||
return isExplorerOpenForLayout(useWorkspaceLayoutStore.getState(), input.workspaceKey);
|
||||
}
|
||||
|
||||
function isExplorerOpenForLayout(state: LayoutState, workspaceKey: string | null): boolean {
|
||||
if (!workspaceKey) {
|
||||
return false;
|
||||
}
|
||||
return supportsDesktopPaneSplits()
|
||||
? selectIsExplorerPaneOpen(state, workspaceKey)
|
||||
: findActiveExplorerTabId(state, workspaceKey) !== null;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { AgentProvider } from "@getpaseo/protocol/agent-types";
|
||||
import type { JsonValue } from "@getpaseo/protocol/agent-types";
|
||||
import type { WorkspaceFileTabTarget } from "@/workspace/file-open";
|
||||
|
||||
export interface WorkspaceDraftTabSetup {
|
||||
@@ -49,6 +50,7 @@ export interface WorkspaceTab {
|
||||
tabId: string;
|
||||
target: WorkspaceTabTarget;
|
||||
createdAt: number;
|
||||
state?: JsonValue;
|
||||
}
|
||||
|
||||
export function buildWorkspaceTabPersistenceKey(input: {
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,254 @@
|
||||
import { supportsDesktopPaneSplits } from "@/constants/layout";
|
||||
import {
|
||||
usePanelStore,
|
||||
selectIsCompactFileExplorerOpen,
|
||||
type ExplorerTab,
|
||||
} from "@/stores/panel-store";
|
||||
import type { ExplorerCheckoutContext } from "@/stores/explorer-checkout-context";
|
||||
import {
|
||||
collectAllTabs,
|
||||
findPaneById,
|
||||
selectIsSidePanelVisible,
|
||||
selectSidePanelPaneId,
|
||||
useWorkspaceLayoutStore,
|
||||
type WorkspaceTabPlacement,
|
||||
} from "@/stores/workspace-layout-store";
|
||||
import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
|
||||
|
||||
/**
|
||||
* The side panel is the companion surface beside the user's work — Changes, Files,
|
||||
* the pull request, and anything an agent asks to show alongside its output. It has
|
||||
* three renderings, picked from two facts — is the layout compact, and can this
|
||||
* platform render split panes:
|
||||
*
|
||||
* compact → slide-over overlay, owned by the panel store
|
||||
* non-compact + splits → dedicated right pane, owned by the layout store
|
||||
* non-compact, no splits → ordinary tabs in the focused pane (native tablets)
|
||||
*
|
||||
* Every entry point goes through this module. Nothing else branches on the surface —
|
||||
* the third case is why: a native tablet renders one pane at a time and the tab row
|
||||
* only lists the focused pane's tabs, so anything routed into a separate side panel
|
||||
* pane there would silently disappear.
|
||||
*/
|
||||
|
||||
/** Tab kinds that are side panel views rather than user content. */
|
||||
const SIDE_PANEL_TAB_KINDS = ["working_diff", "files", "pull_request"] as const;
|
||||
type SidePanelTabKind = (typeof SIDE_PANEL_TAB_KINDS)[number];
|
||||
|
||||
const SIDE_PANEL_VIEW_TARGETS: Record<ExplorerTab, WorkspaceTabTarget> = {
|
||||
changes: { kind: "working_diff" },
|
||||
files: { kind: "files" },
|
||||
pr: { kind: "pull_request" },
|
||||
};
|
||||
|
||||
export interface SidePanelQuery {
|
||||
isCompact: boolean;
|
||||
workspaceKey: string | null;
|
||||
/** Allows callers with known layout capabilities to avoid platform inference. */
|
||||
supportsPaneSplits?: boolean;
|
||||
}
|
||||
|
||||
export interface SidePanelInput extends SidePanelQuery {
|
||||
checkout: ExplorerCheckoutContext | null;
|
||||
}
|
||||
|
||||
type LayoutState = ReturnType<typeof useWorkspaceLayoutStore.getState>;
|
||||
|
||||
function isSidePanelTabKind(kind: string): kind is SidePanelTabKind {
|
||||
return (SIDE_PANEL_TAB_KINDS as readonly string[]).includes(kind);
|
||||
}
|
||||
|
||||
function canUseSidePanelPane(input: SidePanelQuery): boolean {
|
||||
return !input.isCompact && (input.supportsPaneSplits ?? supportsDesktopPaneSplits());
|
||||
}
|
||||
|
||||
// ─── Side panel tabs (non-compact, no splits) ──────────────────────────────
|
||||
|
||||
/**
|
||||
* The side panel tab the focused pane is currently showing, if any. On a tablet
|
||||
* "the side panel is open" means exactly that — there is no pane to hide.
|
||||
*/
|
||||
function findActiveSidePanelTabId(state: LayoutState, workspaceKey: string): string | null {
|
||||
const layout = state.layoutByWorkspace[workspaceKey];
|
||||
if (!layout) {
|
||||
return null;
|
||||
}
|
||||
const focusedTabId = findPaneById(layout.root, layout.focusedPaneId)?.focusedTabId ?? null;
|
||||
if (!focusedTabId) {
|
||||
return null;
|
||||
}
|
||||
const tab = collectAllTabs(layout.root).find((candidate) => candidate.tabId === focusedTabId);
|
||||
return tab && isSidePanelTabKind(tab.target.kind) ? tab.tabId : null;
|
||||
}
|
||||
|
||||
// ─── Public API ────────────────────────────────────────────────────────────
|
||||
|
||||
export interface OpenSupportingTabInput extends SidePanelQuery {
|
||||
target: WorkspaceTabTarget;
|
||||
/** The user's preference for where new supporting tabs land. Ignored on compact. */
|
||||
openInSidePanelByDefault: boolean;
|
||||
parentTabId?: string | null;
|
||||
/** Add the tab without revealing the side panel or moving focus. */
|
||||
background?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens a tab the user did not place themselves — an agent's file link, a detected
|
||||
* pull request, workspace setup progress. A supporting tab that is already open is
|
||||
* left where the user put it; only a brand new one follows the preference.
|
||||
*/
|
||||
export function openSupportingTab(input: OpenSupportingTabInput): string | null {
|
||||
if (!input.workspaceKey) {
|
||||
return null;
|
||||
}
|
||||
const workspaceKey = input.workspaceKey;
|
||||
const store = useWorkspaceLayoutStore.getState();
|
||||
const background = input.background === true;
|
||||
const placement = resolveSidePanelPlacement({
|
||||
store,
|
||||
workspaceKey,
|
||||
routeToSidePanel: input.openInSidePanelByDefault && canUseSidePanelPane(input),
|
||||
background,
|
||||
});
|
||||
|
||||
if (background) {
|
||||
return store.openTab({ workspaceKey, target: input.target, intent: "background", placement });
|
||||
}
|
||||
return store.openTab({
|
||||
workspaceKey,
|
||||
target: input.target,
|
||||
intent: "reveal",
|
||||
placement,
|
||||
parentTabId: input.parentTabId ?? undefined,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Undefined means "no opinion, use the focused pane". Revealing is part of resolving
|
||||
* the side panel: a focused tab in a hidden pane is nothing the user can see, so a
|
||||
* visible open brings the panel on screen. A background open never does.
|
||||
*/
|
||||
function resolveSidePanelPlacement(input: {
|
||||
store: LayoutState;
|
||||
workspaceKey: string;
|
||||
routeToSidePanel: boolean;
|
||||
background: boolean;
|
||||
}): WorkspaceTabPlacement | undefined {
|
||||
if (!input.routeToSidePanel) {
|
||||
return undefined;
|
||||
}
|
||||
const paneId = input.background
|
||||
? selectSidePanelPaneId(input.store, input.workspaceKey)
|
||||
: input.store.showSidePanel(input.workspaceKey);
|
||||
return paneId ? { mode: "prefer", paneId } : undefined;
|
||||
}
|
||||
|
||||
/** Reveal the side panel showing `view`. */
|
||||
export function openSidePanelView(input: SidePanelInput & { view: ExplorerTab }): void {
|
||||
if (input.isCompact) {
|
||||
if (!input.checkout) {
|
||||
return;
|
||||
}
|
||||
const panel = usePanelStore.getState();
|
||||
panel.setExplorerTabForCheckout({ ...input.checkout, tab: input.view });
|
||||
panel.openCompactFileExplorer(input.checkout);
|
||||
return;
|
||||
}
|
||||
|
||||
openSupportingTab({
|
||||
isCompact: input.isCompact,
|
||||
workspaceKey: input.workspaceKey,
|
||||
target: SIDE_PANEL_VIEW_TARGETS[input.view],
|
||||
openInSidePanelByDefault: true,
|
||||
});
|
||||
}
|
||||
|
||||
/** Reveal the side panel without putting anything in it. */
|
||||
export function showSidePanel(input: SidePanelInput): void {
|
||||
if (input.isCompact) {
|
||||
if (input.checkout) {
|
||||
usePanelStore.getState().openCompactFileExplorer(input.checkout);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!input.workspaceKey || !canUseSidePanelPane(input)) {
|
||||
return;
|
||||
}
|
||||
useWorkspaceLayoutStore.getState().showSidePanel(input.workspaceKey);
|
||||
}
|
||||
|
||||
/** Put the side panel away. Its tabs stay open, waiting for the next reveal. */
|
||||
export function hideSidePanel(input: SidePanelInput): void {
|
||||
if (input.isCompact) {
|
||||
usePanelStore.getState().showMobileAgent();
|
||||
return;
|
||||
}
|
||||
if (!input.workspaceKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
const store = useWorkspaceLayoutStore.getState();
|
||||
if (!canUseSidePanelPane(input)) {
|
||||
const activeTabId = findActiveSidePanelTabId(store, input.workspaceKey);
|
||||
if (activeTabId) {
|
||||
store.closeTab(input.workspaceKey, activeTabId);
|
||||
}
|
||||
return;
|
||||
}
|
||||
store.hideSidePanel(input.workspaceKey);
|
||||
}
|
||||
|
||||
/** Show the side panel if it is hidden, hide it if it is showing. */
|
||||
export function toggleSidePanel(input: SidePanelInput): void {
|
||||
if (input.isCompact) {
|
||||
if (input.checkout) {
|
||||
usePanelStore.getState().toggleCompactFileExplorer(input.checkout);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!input.workspaceKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSidePanelOpen(input)) {
|
||||
hideSidePanel(input);
|
||||
return;
|
||||
}
|
||||
|
||||
// Without splits there is no pane to reveal, so the toggle has to produce a tab.
|
||||
if (!canUseSidePanelPane(input)) {
|
||||
useWorkspaceLayoutStore.getState().openTab({
|
||||
workspaceKey: input.workspaceKey,
|
||||
target: SIDE_PANEL_VIEW_TARGETS.changes,
|
||||
intent: "reveal",
|
||||
});
|
||||
return;
|
||||
}
|
||||
showSidePanel(input);
|
||||
}
|
||||
|
||||
/** Reactive "is the side panel showing" for the surface this layout uses. */
|
||||
export function useIsSidePanelOpen(input: SidePanelQuery): boolean {
|
||||
const compactOpen = usePanelStore(selectIsCompactFileExplorerOpen);
|
||||
const paneOpen = useWorkspaceLayoutStore((state) =>
|
||||
input.isCompact ? false : isSidePanelOpenForLayout(state, input),
|
||||
);
|
||||
return input.isCompact ? compactOpen : paneOpen;
|
||||
}
|
||||
|
||||
/** Imperative counterpart of {@link useIsSidePanelOpen}. */
|
||||
export function isSidePanelOpen(input: SidePanelQuery): boolean {
|
||||
if (input.isCompact) {
|
||||
return selectIsCompactFileExplorerOpen(usePanelStore.getState());
|
||||
}
|
||||
return isSidePanelOpenForLayout(useWorkspaceLayoutStore.getState(), input);
|
||||
}
|
||||
|
||||
function isSidePanelOpenForLayout(state: LayoutState, input: SidePanelQuery): boolean {
|
||||
if (!input.workspaceKey) {
|
||||
return false;
|
||||
}
|
||||
return canUseSidePanelPane(input)
|
||||
? selectIsSidePanelVisible(state, input.workspaceKey)
|
||||
: findActiveSidePanelTabId(state, input.workspaceKey) !== null;
|
||||
}
|
||||
Reference in New Issue
Block a user