fix(app): polish workspace navigation surfaces

Use mobile action sheets and long-press file menus while preserving provider context across sheet portals. Keep sidebar and file-pane glyphs on shared visual rails, avoid scrollbar layout shifts, and hide keyboard affordances where shortcuts are unavailable.
2026-08-03 21:40:21 +02:00
parent ab8151d33f
commit a361d1cb2f
37 changed files with 1153 additions and 208 deletions
@@ -1,6 +1,6 @@
 import { unlink, writeFile } from "node:fs/promises";
 import path from "node:path";
-import { type Page } from "@playwright/test";
+import { type Locator, type Page } from "@playwright/test";
 import { buildHostWorkspaceRoute, buildSettingsSectionRoute } from "../../src/utils/host-routes";
 import { test, expect } from "../support/fixtures";
 import { getServerId } from "../support/helpers/server-id";
@@ -25,6 +25,103 @@ const cleanupTasks: CleanupTask[] = [];
 const APP_SETTINGS_KEY = "@paseo:app-settings";
 const CHANGES_PREFERENCES_KEY = "@paseo:changes-preferences";

+interface HorizontalInkBounds {
+  left: number;
+  right: number;
+}
+
+async function readSvgInkBounds(svgLocator: Locator): Promise<HorizontalInkBounds> {
+  return svgLocator.evaluate((svg) => {
+    const graphics = Array.from(svg.querySelectorAll<SVGGraphicsElement>("path, line, polyline"));
+    const bounds = graphics.map((graphic) => {
+      const box = graphic.getBBox();
+      const matrix = graphic.getScreenCTM();
+      if (!matrix) {
+        throw new Error("SVG glyph has no screen transform");
+      }
+      const strokeInset = Number.parseFloat(getComputedStyle(graphic).strokeWidth) / 2 || 0;
+      const corners = [
+        new DOMPoint(box.x - strokeInset, box.y - strokeInset),
+        new DOMPoint(box.x + box.width + strokeInset, box.y - strokeInset),
+        new DOMPoint(box.x - strokeInset, box.y + box.height + strokeInset),
+        new DOMPoint(box.x + box.width + strokeInset, box.y + box.height + strokeInset),
+      ].map((point) => point.matrixTransform(matrix));
+      return {
+        left: Math.min(...corners.map((point) => point.x)),
+        right: Math.max(...corners.map((point) => point.x)),
+      };
+    });
+    return {
+      left: Math.min(...bounds.map((bound) => bound.left)),
+      right: Math.max(...bounds.map((bound) => bound.right)),
+    };
+  });
+}
+
+async function readTextInkBounds(
+  container: Locator,
+  edge: "first" | "last" = "first",
+): Promise<HorizontalInkBounds> {
+  return container.evaluate((root, requestedEdge) => {
+    const textElements = [root, ...Array.from(root.querySelectorAll("*"))].filter((element) =>
+      Array.from(element.childNodes).some(
+        (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim()),
+      ),
+    );
+    const element = textElements[requestedEdge === "first" ? 0 : textElements.length - 1];
+    const text = Array.from(element.childNodes)
+      .filter((node) => node.nodeType === Node.TEXT_NODE)
+      .map((node) => node.textContent ?? "")
+      .join("")
+      .trim();
+    const style = getComputedStyle(element);
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context || !text) {
+      throw new Error("Text glyph could not be measured");
+    }
+    context.font = style.font;
+    const metrics = context.measureText(text);
+    const origin = element.getBoundingClientRect().left;
+    return {
+      left: origin - metrics.actualBoundingBoxLeft,
+      right: origin + metrics.actualBoundingBoxRight,
+    };
+  }, edge);
+}
+
+async function readScrollbarGutter(scrollContainer: Locator): Promise<number> {
+  return scrollContainer.evaluate((element) => {
+    const htmlElement = element as HTMLElement;
+    return htmlElement.offsetWidth - htmlElement.clientWidth;
+  });
+}
+
+async function dragOverlayScrollbarDown(page: Page, scrollContainer: Locator): Promise<void> {
+  const thumb = page.getByTestId("workspace-overlay-scrollbar-grab");
+  const thumbBounds = await thumb.boundingBox();
+  expect(thumbBounds).not.toBeNull();
+  const initialOffset = await scrollContainer.evaluate((element) => element.scrollTop);
+  await page.mouse.move(
+    thumbBounds!.x + thumbBounds!.width / 2,
+    thumbBounds!.y + thumbBounds!.height / 2,
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    thumbBounds!.x + thumbBounds!.width / 2,
+    thumbBounds!.y + thumbBounds!.height / 2 + 40,
+    { steps: 4 },
+  );
+  await page.mouse.up();
+  await expect
+    .poll(() => scrollContainer.evaluate((element) => element.scrollTop))
+    .toBeGreaterThan(initialOffset);
+}
+
+function expectSameRail(actual: number, expected: number): void {
+  expect(Math.abs(actual - expected)).toBeLessThanOrEqual(1);
+}
+
 const BEFORE = `import { useLayoutEffect, useMemo, useRef, useState } from "react";

 interface UseMountedTabSetInput {
@@ -370,21 +467,62 @@ test("workspace file panes keep their controls on shared alignment rails", async
  const workspace = await createWorkspaceWithMountedTabDiff();
  await openWorkspaceChanges(page, workspace);

+  const diffScroll = page.getByTestId("git-diff-scroll");
+  await diffScroll.evaluate((element) => {
+    element.style.scrollbarGutter = "stable";
+  });
+  expect(await readScrollbarGutter(diffScroll)).toBe(0);
+  const overlayScrollbarBounds = await page
+    .getByTestId("workspace-overlay-scrollbar")
+    .boundingBox();
+  const overlayThumbBounds = await page
+    .getByTestId("workspace-overlay-scrollbar-thumb")
+    .boundingBox();
+  expect(overlayScrollbarBounds?.width).toBe(8);
+  expect(overlayThumbBounds?.width).toBe(4);
+  const flatFileStat = await readTextInkBounds(page.getByTestId("diff-file-0-stat"), "last");
  await page.getByTestId("changes-toggle-view-mode").click();
  await expect(page.getByTestId("diff-folder-src")).toBeVisible();

  await expect(page.getByTestId("diff-file-0-actions")).toHaveCount(0);

-  const [folderStat, fileStat] = await Promise.all([
-    page.getByTestId("diff-folder-src-stat").boundingBox(),
-    page.getByTestId("diff-file-0-stat").boundingBox(),
-  ]);
-  expect(folderStat).not.toBeNull();
-  expect(fileStat).not.toBeNull();
-  expect(folderStat!.x + folderStat!.width).toBeCloseTo(fileStat!.x + fileStat!.width, 0);
+  const folderRow = page.getByTestId("diff-folder-src-toggle");
+  const fileRow = page.getByTestId("diff-file-0-toggle");
+  await folderRow.hover();
+  const folderHoverColor = await folderRow.evaluate((row) => getComputedStyle(row).backgroundColor);
+  await fileRow.hover();
+  const fileHoverColor = await fileRow.evaluate((row) => getComputedStyle(row).backgroundColor);
+  expect(fileHoverColor).toBe(folderHoverColor);
+
+  const [folderStat, fileStat, optionsChevron, explorerCloseIcon, diffModeLabel] =
+    await Promise.all([
+      readTextInkBounds(page.getByTestId("diff-folder-src-stat"), "last"),
+      readTextInkBounds(page.getByTestId("diff-file-0-stat"), "last"),
+      readSvgInkBounds(page.getByTestId("changes-options-menu").locator("svg")),
+      readSvgInkBounds(page.getByTestId("explorer-close").locator("svg")),
+      readTextInkBounds(page.getByTestId("changes-diff-status-trigger")),
+    ]);
+  const expandedFolderChevron = await readSvgInkBounds(folderRow.locator("svg"));
+  expectSameRail(folderStat.right, fileStat.right);
+  expectSameRail(flatFileStat.right, fileStat.right);
+  expectSameRail(fileStat.right, explorerCloseIcon.right);
+  expectSameRail(fileStat.right, optionsChevron.right);
+  expectSameRail(optionsChevron.right, explorerCloseIcon.right);
+  expectSameRail(expandedFolderChevron.left, diffModeLabel.left);
+
+  await folderRow.click();
+  const collapsedFolderChevron = await readSvgInkBounds(folderRow.locator("svg"));
+  expectSameRail(collapsedFolderChevron.left, diffModeLabel.left);
+  await folderRow.click();
+  await dragOverlayScrollbarDown(page, diffScroll);

  await page.getByTestId("explorer-tab-files").click();
  await expect(page.getByTestId("file-explorer-row-0")).toBeVisible();
+  const filesScroll = page.getByTestId("file-explorer-tree-scroll");
+  await filesScroll.evaluate((element) => {
+    element.style.scrollbarGutter = "stable";
+  });
+  expect(await readScrollbarGutter(filesScroll)).toBe(0);

  await expect(page.getByTestId("file-explorer-row-0-actions")).toHaveCount(0);
  const fileExplorerRow = page.getByTestId("file-explorer-row-0");
@@ -399,16 +537,14 @@ test("workspace file panes keep their controls on shared alignment rails", async
  await page.keyboard.press("Escape");

  const [sortLabel, firstRowIcon, treeBounds, rowBounds] = await Promise.all([
-    page.getByTestId("files-sort-label").boundingBox(),
-    page.getByTestId("file-explorer-row-0").locator("svg").first().boundingBox(),
+    readTextInkBounds(page.getByTestId("files-sort-label")),
+    readSvgInkBounds(page.getByTestId("file-explorer-row-0").locator("svg").first()),
    page.getByTestId("file-explorer-tree-scroll").boundingBox(),
    page.getByTestId("file-explorer-row-0").boundingBox(),
  ]);
-  expect(sortLabel).not.toBeNull();
-  expect(firstRowIcon).not.toBeNull();
  expect(treeBounds).not.toBeNull();
  expect(rowBounds).not.toBeNull();
-  expect(sortLabel!.x).toBeCloseTo(firstRowIcon!.x, 0);
+  expectSameRail(firstRowIcon.left, sortLabel.left);
  expect(rowBounds!.x).toBeCloseTo(treeBounds!.x, 0);
  expect(rowBounds!.x + rowBounds!.width).toBeCloseTo(treeBounds!.x + treeBounds!.width, 0);
 });
@@ -99,11 +99,8 @@ test.describe("Host appearance", () => {
    await expectHostBadgeName(page, { ...badge, hostName: "Build Box" });
  });

-  test("long host names leave room for the workspace title and actions", async ({
-    page,
-    twoHostSidebar,
-  }) => {
-    const hostName = "A very long remote build host name that must not take over the sidebar";
+  test("host names use the available metadata width", async ({ page, twoHostSidebar }) => {
+    const hostName = "Developer MacBook Pro.local";
    const workspaceKey = `${twoHostSidebar.secondaryServerId}:${twoHostSidebar.secondaryWorkspaceId}`;

    await openHostAppearanceSettings(page, twoHostSidebar.secondaryServerId);
@@ -113,25 +110,18 @@ test.describe("Host appearance", () => {
    const row = page.getByTestId(`sidebar-workspace-row-${workspaceKey}`);
    const badge = row.getByTestId(`sidebar-host-badge-${twoHostSidebar.secondaryServerId}`);
    await expect(badge).toHaveText(hostName);
-    await row.hover();
-
-    const title = row.getByText("Secondary workspace", { exact: true });
-    const kebab = page.getByTestId(`sidebar-workspace-kebab-${workspaceKey}`);
-    await expect(kebab).toBeVisible();
-    const [badgeBox, titleBox, rowBox, kebabBox] = await Promise.all([
-      badge.boundingBox(),
-      title.boundingBox(),
-      row.boundingBox(),
-      kebab.boundingBox(),
-    ]);
+    const [badgeBox, rowBox] = await Promise.all([badge.boundingBox(), row.boundingBox()]);

    expect(badgeBox).not.toBeNull();
-    expect(titleBox).not.toBeNull();
    expect(rowBox).not.toBeNull();
-    expect(kebabBox).not.toBeNull();
-    await expect(badge).toHaveCSS("flex-shrink", "0");
-    expect(titleBox!.width).toBeGreaterThan(0);
-    expect(kebabBox!.x + kebabBox!.width).toBeLessThanOrEqual(rowBox!.x + rowBox!.width);
+    await expect(badge).toHaveCSS("flex-shrink", "1");
+    expect(badgeBox!.width).toBeGreaterThan(96);
+    expect(badgeBox!.x + badgeBox!.width).toBeLessThanOrEqual(rowBox!.x + rowBox!.width);
+    const labelWidths = await badge.getByText(hostName, { exact: true }).evaluate((label) => ({
+      clientWidth: label.clientWidth,
+      scrollWidth: label.scrollWidth,
+    }));
+    expect(labelWidths.scrollWidth).toBeLessThanOrEqual(labelWidths.clientWidth);
  });

  test("picking a color identifies the badge", async ({ page, twoHostSidebar }) => {
@@ -0,0 +1,79 @@
+import type { Locator } from "@playwright/test";
+import { expect, test, type Page } from "../support/fixtures";
+import { gotoAppShell } from "../support/helpers/app";
+import { projectEquivalenceViewKey } from "../support/helpers/project-view-key";
+import { seedWorkspace } from "../support/helpers/seed-client";
+import { getServerId } from "../support/helpers/server-id";
+import { waitForSidebarHydration } from "../support/helpers/workspace-ui";
+
+test.use({ viewport: { width: 390, height: 844 }, isMobile: true, hasTouch: true });
+
+async function paintedSvgRight(locator: Locator): Promise<number> {
+  return locator.evaluateAll((svgs) => {
+    let right = Number.NEGATIVE_INFINITY;
+    for (const element of svgs) {
+      const svg = element as SVGSVGElement;
+      const svgRect = svg.getBoundingClientRect();
+      const viewBox = svg.viewBox.baseVal;
+      if (svgRect.right <= 0 || svgRect.left >= window.innerWidth || viewBox.width === 0) continue;
+      const scaleX = svgRect.width / viewBox.width;
+      for (const child of svg.querySelectorAll<SVGGraphicsElement>(
+        "path, circle, ellipse, line, polyline, polygon, rect",
+      )) {
+        const box = child.getBBox();
+        const strokeWidth = Number.parseFloat(getComputedStyle(child).strokeWidth) || 0;
+        const localRight = box.x + box.width + strokeWidth / 2;
+        right = Math.max(right, svgRect.left + (localRight - viewBox.x) * scaleX);
+      }
+    }
+    if (!Number.isFinite(right)) throw new Error("SVG has no measurable painted children");
+    return right;
+  });
+}
+
+async function closeMenuSheet(page: Page): Promise<void> {
+  const backdrop = page.getByRole("button", { name: "Bottom sheet backdrop" }).first();
+  await backdrop.click({ position: { x: 12, y: 12 } });
+  await expect(backdrop).not.toBeVisible({ timeout: 10_000 });
+}
+
+test("project and workspace kebabs open action sheets on compact layouts", async ({ page }) => {
+  const seeded = await seedWorkspace({ repoPrefix: "sidebar-mobile-menu-sheet-" });
+
+  try {
+    await gotoAppShell(page);
+    await page.getByRole("button", { name: "Open menu", exact: true }).click();
+    await waitForSidebarHydration(page);
+
+    const closeGlyphRight = await paintedSvgRight(page.getByTestId("sidebar-close").locator("svg"));
+    const trailingRail = await paintedSvgRight(
+      page.getByTestId("sidebar-display-preferences-menu").locator("svg"),
+    );
+    expect(closeGlyphRight).toBeCloseTo(trailingRail, 0);
+
+    await page
+      .getByTestId(`sidebar-project-kebab-${projectEquivalenceViewKey(seeded.projectKey)}`)
+      .click();
+
+    await expect(page.getByRole("button", { name: "Bottom sheet backdrop" }).first()).toBeVisible({
+      timeout: 10_000,
+    });
+    await expect(page.getByText("Project actions", { exact: true })).toBeVisible();
+    await closeMenuSheet(page);
+
+    const workspaceRow = page.getByTestId(
+      `sidebar-workspace-row-${getServerId()}:${seeded.workspaceId}`,
+    );
+    await workspaceRow.hover();
+    await workspaceRow
+      .getByTestId(`sidebar-workspace-kebab-${getServerId()}:${seeded.workspaceId}`)
+      .click();
+
+    await expect(page.getByRole("button", { name: "Bottom sheet backdrop" }).first()).toBeVisible({
+      timeout: 10_000,
+    });
+    await expect(page.getByText("Workspace actions", { exact: true })).toBeVisible();
+  } finally {
+    await seeded.cleanup();
+  }
+});
@@ -1,3 +1,4 @@
+import type { Locator } from "@playwright/test";
 import { test, expect, type Page } from "../support/fixtures";
 import { gotoAppShell } from "../support/helpers/app";
 import { gotoWorkspace, clickNewTerminal } from "../support/helpers/launcher";
@@ -25,6 +26,35 @@ function projectNewWorktreeIcon(page: Page, projectKey: string) {
  return page.getByTestId(`sidebar-project-new-worktree-${projectEquivalenceViewKey(projectKey)}`);
 }

+async function paintedSvgRight(locator: Locator): Promise<number> {
+  return locator.evaluate((svg) => {
+    let right = Number.NEGATIVE_INFINITY;
+    for (const child of svg.querySelectorAll<SVGGraphicsElement>(
+      "path, circle, ellipse, line, polyline, polygon, rect",
+    )) {
+      const box = child.getBBox();
+      const matrix = child.getScreenCTM();
+      if (!matrix) continue;
+      const geometryRight = new DOMPoint(box.x + box.width, box.y).matrixTransform(matrix).x;
+      const strokeWidth = Number.parseFloat(getComputedStyle(child).strokeWidth) || 0;
+      const scaleX = Math.hypot(matrix.a, matrix.b);
+      right = Math.max(right, geometryRight + (strokeWidth * scaleX) / 2);
+    }
+    if (!Number.isFinite(right)) throw new Error("SVG has no measurable painted children");
+    return right;
+  });
+}
+
+async function paintedTextRight(locator: Locator): Promise<number> {
+  return locator.evaluate((label) => {
+    const context = document.createElement("canvas").getContext("2d");
+    if (!context) throw new Error("Canvas text measurement is unavailable");
+    context.font = getComputedStyle(label).font;
+    const metrics = context.measureText(label.textContent ?? "");
+    return label.getBoundingClientRect().left + metrics.actualBoundingBoxRight;
+  });
+}
+
 async function seedSecondWorkspace(seeded: SeededWorkspace, title: string): Promise<string> {
  const created = await seeded.client.createWorkspace({
    source: { kind: "directory", path: seeded.repoPath, projectId: seeded.projectId },
@@ -86,6 +116,53 @@ test.describe("Model B sidebar shape", () => {
    }
  });

+  test("sidebar trailing glyphs share the workspace content rail", async ({ page }) => {
+    const seeded = await seedWorkspace({ repoPrefix: "model-b-trailing-rail-" });
+
+    try {
+      await gotoAppShell(page);
+      await waitForSidebarHydration(page);
+
+      await page.getByTestId("sidebar-display-preferences-menu").click();
+      await page.getByTestId("sidebar-display-show").click();
+      await page.getByTestId("sidebar-workspace-trailing-timestamp").click();
+      await page.keyboard.press("Escape");
+      await page.keyboard.press("Escape");
+
+      const project = projectRow(page, seeded.projectKey);
+      const workspace = workspaceRow(page, seeded.workspaceId);
+      const displayPreferencesGlyph = page
+        .getByTestId("sidebar-display-preferences-menu")
+        .locator("svg");
+
+      await project.hover();
+      const projectKebabGlyph = page
+        .getByTestId(`sidebar-project-kebab-${projectEquivalenceViewKey(seeded.projectKey)}`)
+        .locator("svg");
+      await expect(projectKebabGlyph).toBeVisible();
+      const projectKebabRight = await paintedSvgRight(projectKebabGlyph);
+
+      await workspace.hover();
+      const workspaceKebabGlyph = page
+        .getByTestId(`sidebar-workspace-kebab-${getServerId()}:${seeded.workspaceId}`)
+        .locator("svg");
+      const timestamp = workspace.getByTestId("sidebar-workspace-timestamp");
+      await expect(workspaceKebabGlyph).toBeVisible();
+      await expect(timestamp).toBeVisible();
+
+      const rail = await paintedTextRight(timestamp);
+      for (const glyphRight of await Promise.all([
+        paintedSvgRight(displayPreferencesGlyph),
+        Promise.resolve(projectKebabRight),
+        paintedSvgRight(workspaceKebabGlyph),
+      ])) {
+        expect(glyphRight).toBeCloseTo(rail, 0);
+      }
+    } finally {
+      await seeded.cleanup();
+    }
+  });
+
  test("no tab, agent, or terminal ever renders as a sidebar row", async ({ page }) => {
    const mock = await seedMockAgentWorkspace({
      repoPrefix: "model-b-leaf-",