fix(app): simplify vertical tabs footer

packages/app/e2e/regression/tab-navigate-mousedown.spec.ts

@@ -233,11 +233,14 @@ test("vertical tabs show project details, resize, and navigate", async ({ page }
 })
 
 for (const direction of ["ltr", "rtl"]) {
-  test(`vertical tabs keep Settings pinned while scrolling in ${direction}`, async ({ page }, testInfo) => {
+  test(`vertical tabs keep Status pinned without Settings in ${direction}`, async ({ page }, testInfo) => {
     await mockServer(page)
     await page.addInitScript(
       ({ server, sessionA, sessionB, directory }) => {
-        localStorage.setItem("settings.v3", JSON.stringify({ appearance: { tabLayout: "vertical" } }))
+        localStorage.setItem(
+          "settings.v3",
+          JSON.stringify({ appearance: { tabLayout: "vertical" }, general: { showStatus: true } }),
+        )
         localStorage.setItem(
           "opencode.window.browser.dat:tabs",
           JSON.stringify([
@@ -254,23 +257,27 @@ for (const direction of ["ltr", "rtl"]) {
       },
       { server, sessionA: sessionA.id, sessionB: sessionB.id, directory: sessionA.directory },
     )
-    await page.goto("/")
+    await page.goto(`/server/${base64Encode(server)}/session/${sessionA.id}`)
 
     const sidebar = page.locator('[data-slot="vertical-tabs-sidebar"]')
     const settings = sidebar.getByRole("button", { name: "Settings", exact: true })
+    const status = sidebar.getByRole("button", { name: "Status", exact: true })
     const scroll = sidebar.locator('[data-slot="vertical-tabs-scroll"]')
     const hrefB = `/server/${base64Encode(server)}/session/${sessionB.id}`
     const tabB = sidebar.locator(`[data-titlebar-tab-link][href="${hrefB}"]`)
     await expect(sidebar.locator("[data-titlebar-tab-slot]")).toHaveCount(26)
-    await expect(settings).toHaveText("Settings")
+    await expect(status).toHaveText("Status")
+    await expect(settings).toHaveCount(0)
+    await expect(status.locator('[data-slot="status-indicator"]')).toBeVisible()
     await page.evaluate((direction) => document.documentElement.setAttribute("dir", direction), direction)
 
     for (const width of [1280, 800]) {
       await page.setViewportSize({ width, height: 360 })
-      await expect(settings).toBeInViewport({ ratio: 1 })
       await expect(sidebar).toHaveCSS("padding-inline-start", "10px")
       await expect(sidebar).toHaveCSS("padding-bottom", "10px")
-      await expect(settings).toHaveCSS("margin-top", "8px")
+      await expect(sidebar.locator('[data-slot="vertical-tabs-footer"]')).toHaveCSS("margin-top", "8px")
+      await expect(status).toBeInViewport({ ratio: 1 })
+      await expect(status).toHaveCSS("height", "28px")
       await expect
         .poll(() =>
           sidebar.locator('[data-slot="vertical-tabs-footer"]').evaluate((element) => {
@@ -285,12 +292,12 @@ for (const direction of ["ltr", "rtl"]) {
       await expect(scroll).toHaveCSS("mask-image", /linear-gradient/)
       await scroll.evaluate((element) => element.scrollTo(0, 0))
       await expect(scroll).toHaveJSProperty("scrollTop", 0)
-      const pinned = await settings.boundingBox()
+      const pinnedStatus = await status.boundingBox()
       await scroll.hover()
       await page.mouse.wheel(0, 200)
       await expect.poll(() => scroll.evaluate((element) => element.scrollTop)).toBeGreaterThan(0)
-      await expect.poll(() => settings.boundingBox()).toEqual(pinned)
-      await testInfo.attach(`vertical-tabs-settings-${width}`, {
+      await expect.poll(() => status.boundingBox()).toEqual(pinnedStatus)
+      await testInfo.attach(`vertical-tabs-status-${width}`, {
         body: await sidebar.screenshot(),
         contentType: "image/png",
       })
@@ -304,17 +311,14 @@ for (const direction of ["ltr", "rtl"]) {
           return !!tab && !!viewport && tab.y + tab.height <= viewport.y + viewport.height - 16
         })
         .toBe(true)
-      await expect.poll(() => settings.boundingBox()).toEqual(pinned)
+      await expect.poll(() => status.boundingBox()).toEqual(pinnedStatus)
+      await expect(settings).toHaveCount(0)
     }
 
-    await settings.click()
-    await expect(page.getByTestId("settings-screen")).toBeVisible()
-    await expect(settings).toHaveAttribute("aria-pressed", "true")
-    await sidebar.getByRole("button", { name: "Home", exact: true }).click()
-    await expect(page.getByTestId("settings-screen")).toBeHidden()
-    await settings.focus()
-    await settings.press("Enter")
-    await expect(page.getByTestId("settings-screen")).toBeVisible()
+    await status.click()
+    await expect(status).toHaveAttribute("aria-expanded", "true")
+    await status.press("Escape")
+    await expect(status).toHaveAttribute("aria-expanded", "false")
   })
 }
 

packages/app/src/shell/status/status-popover.tsx

@@ -20,6 +20,7 @@ export function StatusPopover() {
   const sdk = useWorkspaceLocation()
   const settings = useSettings()
   const desktop = createMediaQuery("(min-width: 768px)")
+  const sidebar = () => desktop() && settings.appearance.tabLayout() === "vertical"
   const [shown, setShown] = createSignal(false)
   const serverHealth = () => global.servers.health[server.key]?.healthy
   const mcp = () => data.location.mcp.server.list({ directory: sdk().directory })
@@ -41,8 +42,9 @@ export function StatusPopover() {
     serverHealth: serverHealth(),
     attention: attention(),
     issue: issue(),
-    placement: desktop() && settings.appearance.tabLayout() === "vertical" ? "top-start" : "bottom-end",
-    shift: desktop() && settings.appearance.tabLayout() === "vertical" ? 0 : -168,
+    sidebar: sidebar(),
+    placement: sidebar() ? "top-start" : "bottom-end",
+    shift: sidebar() ? 0 : -168,
     label: language.t("status.popover.trigger"),
     onOpenChange: setShown,
     body: () => (
@@ -61,6 +63,7 @@ type StatusPopoverState = {
   serverHealth: boolean | undefined
   attention: boolean
   issue: boolean
+  sidebar: boolean
   placement: "top-start" | "bottom-end"
   shift: number
   label: string
@@ -93,21 +96,37 @@ function StatusPopoverView(props: { state: StatusPopoverState }) {
     <Popover
       open={props.state.shown}
       onOpenChange={props.state.onOpenChange}
-      triggerAs={IconButton}
-      triggerProps={{
-        variant: "ghost-muted",
-        size: "large",
-        class: "!w-9 shrink-0",
-        state: props.state.shown ? "pressed" : undefined,
-        "aria-label": props.state.label,
-      }}
+      triggerAs={props.state.sidebar ? "button" : IconButton}
+      triggerProps={
+        props.state.sidebar
+          ? {
+              type: "button",
+              class:
+                "flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] px-1.5 text-[13px] leading-4 text-v2-text-text-faint hover:bg-v2-background-bg-layer-02 hover:text-v2-text-text-base data-[state=pressed]:bg-v2-background-bg-layer-02 data-[state=pressed]:text-v2-text-text-base focus-visible:outline-none focus-visible:bg-v2-background-bg-layer-02 [app-region:no-drag]",
+              "data-state": props.state.shown ? "pressed" : undefined,
+              "aria-label": props.state.label,
+            }
+          : {
+              variant: "ghost-muted",
+              size: "large",
+              class: "!w-9 shrink-0",
+              state: props.state.shown ? "pressed" : undefined,
+              "aria-label": props.state.label,
+            }
+      }
       trigger={
-        <div class="relative size-4">
-          <Icon name={props.state.shown ? "status-active" : "status"} />
-          <div
-            class={`absolute -top-1 -right-1 size-2 rounded-full border border-[var(--v2-background-bg-deep)] ${serverStatusDotClass(props.state)}`}
-          />
-        </div>
+        <>
+          <div class="relative size-4 shrink-0">
+            <Icon name={props.state.shown ? "status-active" : "status"} />
+            <div
+              data-slot="status-indicator"
+              class={`absolute -top-1 -end-1 size-2 rounded-full border border-[var(--v2-background-bg-deep)] ${serverStatusDotClass(props.state)}`}
+            />
+          </div>
+          <Show when={props.state.sidebar}>
+            <span class="min-w-0 truncate">{props.state.label}</span>
+          </Show>
+        </>
       }
       {...popoverProps}
     >

packages/app/src/shell/titlebar/right-slot.tsx

@@ -38,9 +38,15 @@ export function createTitlebarRightSlot(): TitlebarRightSlot {
   }
 }
 
-export function TitlebarRightMount() {
+export function TitlebarRightMount(props: { vertical?: boolean }) {
   const slot = useTitlebarRightSlot()
-  return <div ref={slot.setMount} id="opencode-titlebar-right" class="flex shrink-0 items-center justify-end gap-0" />
+  return (
+    <div
+      ref={slot.setMount}
+      id="opencode-titlebar-right"
+      class={props.vertical ? "flex w-full shrink-0 flex-col" : "flex shrink-0 items-center justify-end gap-0"}
+    />
+  )
 }
 
 export function TitlebarRight(props: ParentProps) {

packages/app/src/shell/titlebar/titlebar.tsx

@@ -676,20 +676,8 @@ export function Titlebar(props: {
                                 onReorder={(keys) => tabsStoreActions.reorder(keys)}
                               />
                             </div>
-                            <button
-                              type="button"
-                              data-action="vertical-tabs-settings"
-                              data-state={layout.route().type === "settings" ? "pressed" : undefined}
-                              class="mt-2 flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] px-1.5 text-[13px] leading-4 text-v2-text-text-faint hover:bg-v2-background-bg-layer-02 hover:text-v2-text-text-base data-[state=pressed]:bg-v2-background-bg-layer-02 data-[state=pressed]:text-v2-text-text-base focus-visible:outline-none focus-visible:bg-v2-background-bg-layer-02 [app-region:no-drag]"
-                              onClick={openSettings}
-                              aria-label={language.t("sidebar.settings")}
-                              aria-pressed={layout.route().type === "settings"}
-                            >
-                              <Icon name="settings-gear" />
-                              {language.t("sidebar.settings")}
-                            </button>
-                            <div data-slot="vertical-tabs-footer" class="flex w-full shrink-0 items-center gap-1.5">
-                              <TitlebarRightMount />
+                            <div data-slot="vertical-tabs-footer" class="mt-2 flex w-full shrink-0 flex-col">
+                              <TitlebarRightMount vertical />
                             </div>
                           </Portal>
                         )}