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,115 @@
+// The file panel's tree rail had no way to close: the changes panel's toolbar
+// carries a folder-tree toggle, the file toolbar carried nothing, and the rail
+// was permanent on desktop.
+import { expect } from "@playwright/test";
+import { test } from "../support/fixtures";
+import { openFileExplorer, openFileFromExplorer } from "../support/helpers/file-explorer";
+import { gotoWorkspace } from "../support/helpers/launcher";
+import { seedWorkspace, type SeededWorkspace } from "../support/helpers/seed-client";
+
+let workspace: SeededWorkspace;
+
+test.beforeAll(async () => {
+  workspace = await seedWorkspace({
+    repoPrefix: "file-tree-rail-toggle-",
+    repo: { files: [{ path: "docs/guide.md", content: "# Guide\n" }] },
+  });
+});
+
+test.afterAll(async () => {
+  await workspace?.cleanup();
+});
+
+test.describe("File panel tree rail", () => {
+  test("the file toolbar toggle closes and reopens the tree", async ({ page }, testInfo) => {
+    await gotoWorkspace(page, workspace.workspaceId);
+    await openFileExplorer(page);
+    await openFileFromExplorer(page, "docs");
+    await openFileFromExplorer(page, "guide.md");
+
+    const rail = page.getByTestId("file-tree-rail-tree").filter({ visible: true });
+    const toggle = page.getByTestId("file-toggle-tree").filter({ visible: true }).first();
+    const editorToolbar = page.getByTestId("file-panel-bar").filter({ visible: true });
+    const filesToolbar = page.getByTestId("files-pane-header").filter({ visible: true });
+    const refresh = page.getByRole("button", { name: "Refresh files" }).filter({ visible: true });
+    const hiddenFiles = page
+      .getByRole("button", { name: "Hide hidden files" })
+      .filter({ visible: true });
+    const shoot = async (name: string) => {
+      const path = testInfo.outputPath(`${name}.png`);
+      await page.screenshot({ path });
+      await testInfo.attach(name, { path, contentType: "image/png" });
+    };
+    await expect(rail).toBeVisible({ timeout: 30_000 });
+    await expect(toggle).toHaveAttribute("aria-selected", "true");
+    const [
+      editorToolbarBox,
+      filesToolbarBox,
+      treeToggleBox,
+      refreshBox,
+      treeGlyphBox,
+      refreshGlyphBox,
+    ] = await Promise.all([
+      editorToolbar.boundingBox(),
+      filesToolbar.boundingBox(),
+      toggle.boundingBox(),
+      refresh.boundingBox(),
+      toggle.locator("svg").boundingBox(),
+      refresh.locator("svg").boundingBox(),
+    ]);
+    if (
+      !editorToolbarBox ||
+      !filesToolbarBox ||
+      !treeToggleBox ||
+      !refreshBox ||
+      !treeGlyphBox ||
+      !refreshGlyphBox
+    ) {
+      throw new Error("Pane-content toolbar geometry could not be measured");
+    }
+    expect(editorToolbarBox.height).toBe(36);
+    expect(filesToolbarBox.height).toBe(36);
+    expect(editorToolbarBox.y + editorToolbarBox.height).toBe(
+      filesToolbarBox.y + filesToolbarBox.height,
+    );
+    expect(treeToggleBox.width).toBe(24);
+    expect(treeToggleBox.height).toBe(24);
+    expect(refreshBox.width).toBe(24);
+    expect(refreshBox.height).toBe(24);
+    expect(treeGlyphBox.width).toBe(14);
+    expect(treeGlyphBox.height).toBe(14);
+    expect(refreshGlyphBox.width).toBe(14);
+    expect(refreshGlyphBox.height).toBe(14);
+
+    const restBackground = await refresh.evaluate(
+      (element) => getComputedStyle(element).backgroundColor,
+    );
+    const treeToggleSelectedBackground = await toggle.evaluate(
+      (element) => getComputedStyle(element).backgroundColor,
+    );
+    await refresh.hover();
+    const refreshHoverBackground = await refresh.evaluate(
+      (element) => getComputedStyle(element).backgroundColor,
+    );
+    expect(refreshHoverBackground).not.toBe(restBackground);
+    expect(refreshHoverBackground).toBe(treeToggleSelectedBackground);
+    await hiddenFiles.click();
+    const hiddenFilesSelected = page
+      .getByRole("button", { name: "Show hidden files" })
+      .filter({ visible: true });
+    expect(
+      await hiddenFilesSelected.evaluate((element) => getComputedStyle(element).backgroundColor),
+    ).toBe(refreshHoverBackground);
+    await shoot("tree-open");
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-selected", "false");
+    await expect(rail).toHaveCount(0);
+    await shoot("tree-closed");
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-selected", "true");
+    await expect(rail).toBeVisible();
+    await shoot("tree-reopened");
+  });
+});