From 206c082dfab0cd51edbac76d041aac1bae7d58c9 Mon Sep 17 00:00:00 2001 From: "paseo-bot[bot]" <266920839+paseo-bot[bot]@users.noreply.github.com> Date: Wed, 7 Oct 2026 17:04:34 +0200 Subject: [PATCH] fix(app): show the sidebar toggle on plugin screens Plugin screens rendered only their icon and title on the left of the header, so on wide web and Android layouts there was no way to collapse the sidebar from them, or to reopen it after it was closed elsewhere. Fixes #6315 --- .../e2e/browser/plugin-sidebar-items.spec.ts | 26 +++++++++++++++++++ packages/app/src/plugins/surface-screen.tsx | 2 ++ 2 files changed, 28 insertions(+) diff --git a/packages/app/e2e/browser/plugin-sidebar-items.spec.ts b/packages/app/e2e/browser/plugin-sidebar-items.spec.ts index 900fb42db9..ee2057dddc 100644 --- a/packages/app/e2e/browser/plugin-sidebar-items.spec.ts +++ b/packages/app/e2e/browser/plugin-sidebar-items.spec.ts @@ -241,6 +241,32 @@ test.describe("Plugin sidebar items", () => { }); }); + test("a plugin screen toggles the sidebar on a wide layout", async ({ page }) => { + await page.setViewportSize(WIDE); + await gotoWorkspace(page, workspaceId); + const row = headerRow(page, SHOWCASE_PLUGIN_ID, "deploys"); + await expect(row).toBeVisible({ timeout: 30_000 }); + + await row.click(); + await expect(page.getByText("Deploys screen body", { exact: true })).toBeVisible(); + await visibleTestId(page, "menu-button").click(); + await expect(row).not.toBeVisible(); + await visibleTestId(page, "menu-button").click(); + await expect(row).toBeVisible(); + await closeScreen(page); + + // With the sidebar closed elsewhere, the screen's own toggle is the way back to it. + await visibleTestId(page, "menu-button").click(); + await expect(row).not.toBeVisible(); + await page.keyboard.press("Control+k"); + const panel = page.getByTestId("command-center-panel"); + await panel.getByTestId("command-center-input").fill("Open deploys"); + await panel.getByRole("button", { name: "Open deploys", exact: true }).click(); + await expect(page.getByText("Deploys screen body", { exact: true })).toBeVisible(); + await visibleTestId(page, "menu-button").click(); + await expect(row).toBeVisible(); + }); + test("a header row's shortcut hint presses the row", async ({ page }) => { await page.setViewportSize(WIDE); await gotoWorkspace(page, workspaceId); diff --git a/packages/app/src/plugins/surface-screen.tsx b/packages/app/src/plugins/surface-screen.tsx index f2f9997749..7e0e9b2d09 100644 --- a/packages/app/src/plugins/surface-screen.tsx +++ b/packages/app/src/plugins/surface-screen.tsx @@ -7,6 +7,7 @@ import { Text, View } from "react-native"; import { StyleSheet, withUnistyles } from "react-native-unistyles"; import { HeaderIconBadge } from "@/components/headers/header-icon-badge"; import { HeaderToggleButton } from "@/components/headers/header-toggle-button"; +import { SidebarMenuToggle } from "@/components/headers/menu-header"; import { ScreenHeader } from "@/components/headers/screen-header"; import { ScreenTitle } from "@/components/headers/screen-title"; import { HostFilter } from "@/components/hosts/host-filter"; @@ -177,6 +178,7 @@ export function PluginSurfaceScreen() { const headerLeft = useMemo( () => ( <> + {Icon ? (