feat(web): polish mobile editor shell and branch picker

Author: pallyoung

packages/web/src/components/ui/MIGRATION.md

@@ -43,7 +43,7 @@
 
 `Popover` now completes the bounded feature inventory for desktop custom-content dropdowns: the desktop terminal selector and workspace branch quick pick both use the shared primitive from the public UI barrel for click-to-toggle or ArrowDown-to-open trigger semantics, portaled non-modal dialog content, and outside-click / `Escape` dismissal while preserving legacy hooks such as `terminal-selector-btn`, `terminal-selector-dropdown`, `terminal-selector-item*`, `git-panel-status-strip__branch`, and `branch-quick-pick*`. No additional bounded feature callers remain in the current `features/components` inventory. The mobile fullscreen terminal switcher and mobile branch quick pick intentionally stay on their existing `Select` + `MobileSelectSheet` and global `MobileSelectSheet` paths by design, while menu-list composition now moves into the shared `ActionMenu` wrapper.
 
-`ActionMenu` now completes the bounded feature inventory for shared menu-list triggers: the mobile workspace topbar replaces its direct settings icon with a shared more-actions trigger that opens a mobile `Sheet`-backed action list containing `Settings` and `Quick Actions`. The primitive owns the bounded action-list chrome and desktop menu/mobile sheet presentation, while the feature layer still owns trigger styling and command wiring such as `commandPaletteOpenAtom` and the existing settings navigation callback. No additional bounded feature callers remain in the current inventory.
+`ActionMenu` now completes the bounded feature inventory for shared menu-list triggers used by bounded desktop/mobile overflow menus. The primitive owns the shared action-list chrome and desktop menu/mobile sheet presentation where those menus remain intentionally part of the product. The mobile workspace topbar no longer uses this pattern and instead exposes a direct settings icon button to keep the shell chrome aligned with the current mobile IDE navigation model.
 
 `Notice` now completes the bounded legacy `.settings-page__notice*` migration inventory: the settings-page load-error shell uses the shared primitive from the public UI barrel while preserving the legacy `settings-page__notice*` compatibility classes and the caller-owned `settings-link` refresh action styling.
 

packages/web/src/components/ui/kbd/index.module.css

@@ -1,25 +1,29 @@
 .kbd,
 :global(.shortcuts-key) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   min-width: 80px;
   padding: var(--sp-2) var(--sp-3);
   border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-hover);
-  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-surface) 18%);
+  color: var(--text-primary);
   font-family: var(--font-mono);
   font-size: var(--text-sm);
   text-align: center;
 }
 
 .interactive:hover,
 :global(.shortcuts-key):hover {
-  border-color: var(--accent-blue);
+  border-color: var(--border-focus);
+  background: var(--bg-active);
 }
 
 .kbd:focus-visible,
 :global(.shortcuts-key):focus-visible {
   outline: none;
-  border-color: var(--accent-blue);
+  border-color: var(--border-focus);
   box-shadow: 0 0 0 1px rgba(108, 182, 255, 0.4);
 }
 

packages/web/src/components/ui/notice/index.module.css

@@ -2,55 +2,59 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--sp-4);
-  margin: 0 0 var(--sp-5);
-  padding: var(--sp-3) var(--sp-4);
+  gap: var(--sp-3);
+  margin: 0 0 var(--sp-4);
+  padding: var(--sp-2) var(--sp-3);
   border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-surface);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--bg-page) 42%, var(--bg-surface) 58%);
 }
 
 .info {
   border-color: color-mix(in srgb, var(--color-info) 24%, transparent);
-  background: color-mix(in srgb, var(--color-info) 6%, var(--bg-surface));
+  background: color-mix(in srgb, var(--color-info) 5%, var(--bg-surface));
 }
 
 .success {
   border-color: color-mix(in srgb, var(--color-success) 24%, transparent);
-  background: color-mix(in srgb, var(--color-success) 6%, var(--bg-surface));
+  background: color-mix(in srgb, var(--color-success) 5%, var(--bg-surface));
 }
 
 .warning {
-  border-color: color-mix(in srgb, var(--accent-amber) 35%, transparent);
-  background: color-mix(in srgb, var(--accent-amber) 8%, var(--bg-surface));
+  border-color: color-mix(in srgb, var(--accent-amber) 28%, transparent);
+  background: color-mix(in srgb, var(--accent-amber) 6%, var(--bg-surface));
 }
 
 .error {
-  border-color: color-mix(in srgb, var(--color-error) 36%, transparent);
-  background: color-mix(in srgb, var(--color-error) 10%, var(--bg-surface));
+  border-color: color-mix(in srgb, var(--color-error) 28%, transparent);
+  background: color-mix(in srgb, var(--color-error) 7%, var(--bg-surface));
 }
 
 .copy {
   display: flex;
   min-width: 0;
   flex: 1;
   flex-direction: column;
-  gap: var(--sp-1);
+  gap: 2px;
 }
 
 .title {
-  font-size: var(--text-sm);
+  font-size: var(--text-xs);
   font-weight: var(--font-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
   color: var(--text-primary);
 }
 
 .message {
-  font-size: var(--text-xs);
+  font-size: var(--text-sm);
+  line-height: 1.45;
   color: var(--text-secondary);
   word-break: break-word;
 }
 
 .action {
   flex-shrink: 0;
-  align-self: center;
+  display: inline-flex;
+  align-self: flex-start;
 }

packages/web/src/components/ui/pill/index.module.css

@@ -1,14 +1,18 @@
 .pill {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  min-width: 0;
   gap: var(--sp-2);
-  padding: var(--sp-2) var(--sp-4);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-full);
-  background: var(--bg-surface);
+  padding: var(--sp-2) var(--sp-3);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
   color: var(--text-secondary);
   font-family: var(--font-sans);
-  font-size: var(--text-base);
+  font-size: var(--text-sm);
+  line-height: 1.4;
   transition:
     background var(--duration-fast) var(--ease-out),
     border-color var(--duration-fast) var(--ease-out),
@@ -17,24 +21,26 @@
 
 .pill:hover:not(:disabled) {
   background: var(--bg-hover);
-  border-color: var(--border-light);
+  border-color: color-mix(in srgb, var(--border-light) 72%, transparent);
+  color: var(--text-primary);
 }
 
 .pill:focus-visible {
   outline: none;
-  border-color: var(--accent-blue);
-  box-shadow: 0 0 0 1px rgba(108, 182, 255, 0.4);
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 35%, transparent);
 }
 
 .active {
-  background: var(--accent-blue);
-  border-color: var(--accent-blue);
-  color: var(--text-inverse);
+  background: var(--bg-active);
+  border-color: var(--border-focus);
+  color: var(--text-primary);
 }
 
 .icon {
   display: inline-flex;
   align-items: center;
+  color: inherit;
 }
 
 .pill:disabled {

packages/web/src/components/ui/segmented-control/index.module.css

@@ -60,6 +60,10 @@
 
 :global(.settings-provider-tabs) {
   margin-bottom: var(--sp-6);
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
 }
 
 :global(.settings-provider-subnav) {
@@ -76,35 +80,42 @@
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
+  background: transparent;
 }
 
 :global(.settings-provider-tab) {
-  background: var(--bg-surface);
-  border-color: var(--border);
+  background: transparent;
+  border-color: transparent;
 }
 
 :global(.settings-provider-tab.active) {
-  border-color: var(--accent-blue);
+  background: var(--bg-active);
+  border-color: var(--border-focus);
 }
 
 :global(.settings-provider-subnav-button) {
   background: transparent;
 }
 
 :global(.settings-provider-subnav-button.active) {
-  background: var(--bg-hover);
-  border-color: var(--border-light);
+  background: var(--bg-active);
+  border-color: var(--border-focus);
 }
 
 :global(.shortcuts-category-tabs) {
   margin-bottom: var(--sp-4);
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
 }
 
 :global(.shortcuts-category-tab) {
-  background: var(--bg-hover);
+  background: transparent;
+  border-color: transparent;
 }
 
 :global(.shortcuts-category-tab.active) {
-  background: color-mix(in srgb, var(--accent-blue) 18%, var(--bg-surface));
-  border-color: transparent;
+  background: var(--bg-active);
+  border-color: var(--border-focus);
 }

packages/web/src/components/ui/sheet/index.test.tsx

@@ -30,6 +30,8 @@ describe("Sheet", () => {
     expect(document.querySelector(".mobile-sheet__body")).toBeTruthy();
     expect(document.querySelector(".mobile-sheet__footer")).toBeTruthy();
     expect(screen.getByText("Body")).toBeInTheDocument();
+    expect(screen.getByText("Quick Actions")).toBeInTheDocument();
+    expect(screen.queryByText("COMMAND PALETTE")).not.toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Done" })).toBeInTheDocument();
   });
 
@@ -89,6 +91,7 @@ describe("Sheet", () => {
 
     expect(document.querySelector(".mobile-sheet--fullscreen")).toBeTruthy();
     expect(document.querySelector(".mobile-sheet--launch")).toBeTruthy();
+    expect(document.querySelector(".mobile-sheet__header .mobile-page-header")).toBeTruthy();
     expect(document.querySelector(".mobile-sheet__body--flush")).toBeTruthy();
     expect(document.querySelector(".mobile-sheet__body--fullscreen")).toBeTruthy();
     expect(document.querySelector(".mobile-launch-sheet")).toBeTruthy();

packages/web/src/components/ui/sheet/index.tsx

@@ -1,16 +1,8 @@
 import clsx from "clsx";
-import { ArrowLeft } from "lucide-react";
 import type { ReactNode } from "react";
+import { MobilePageHeader } from "../../../features/shared/components/mobile-page-header";
 import { useTranslation } from "../../../lib/i18n";
 
-interface SheetHeaderProps {
-  readonly title: string;
-  readonly kicker?: string;
-  readonly onBack: () => void;
-  readonly backLabel: string;
-  readonly headerAction?: ReactNode;
-}
-
 export interface SheetProps {
   readonly title: string;
   readonly body: ReactNode;
@@ -25,24 +17,6 @@ export interface SheetProps {
   readonly backLabel?: string;
 }
 
-function SheetHeader({ title, kicker, onBack, backLabel, headerAction }: SheetHeaderProps) {
-  return (
-    <div className="page-header">
-      <div className="page-header__leading">
-        <button type="button" className="page-header__back" onClick={onBack} aria-label={backLabel}>
-          <ArrowLeft size={16} />
-          <span>{backLabel}</span>
-        </button>
-        <div className="page-header__copy">
-          {kicker ? <div className="page-header__kicker">{kicker}</div> : null}
-          <h2 className="page-header__title">{title}</h2>
-        </div>
-      </div>
-      {headerAction ? <div className="page-header__actions">{headerAction}</div> : null}
-    </div>
-  );
-}
-
 export function Sheet({
   title,
   body,
@@ -79,12 +53,13 @@ export function Sheet({
       >
         {fullscreen ? null : <div className="mobile-sheet__handle" aria-hidden="true" />}
         <div className="mobile-sheet__header">
-          <SheetHeader
+          <MobilePageHeader
             title={title}
             kicker={kicker}
             onBack={handleBack}
             backLabel={resolvedBackLabel}
-            headerAction={headerAction}
+            rightSlot={headerAction}
+            titleAs="h2"
           />
         </div>
         <div className={clsx("mobile-sheet__body", bodyClassName)}>{body}</div>

packages/web/src/features/mobile-select/components/mobile-select-sheet.test.tsx

@@ -232,7 +232,7 @@ describe("MobileSelectSheet", () => {
       />
     );
 
-    const header = document.querySelector(".mobile-inline-sheet__header .page-header");
+    const header = document.querySelector(".mobile-inline-sheet__header .mobile-page-header");
     const leading = header?.querySelector(".page-header__leading");
 
     expect(header).not.toBeNull();
@@ -448,7 +448,8 @@ describe("MobileSelectSheet", () => {
         sections={[{ kind: "options", id: "branches", items: [] }]}
         create={{
           visible: true,
-          label: (query) => `Create branch: ${query}`,
+          label: () => "Create branch",
+          description: (query) => query,
           onCreate,
         }}
         onSelect={vi.fn()}
@@ -459,7 +460,10 @@ describe("MobileSelectSheet", () => {
     fireEvent.change(screen.getByPlaceholderText("Search branches"), {
       target: { value: "feature/mobile-select" },
     });
-    await user.click(screen.getByRole("button", { name: "Create branch: feature/mobile-select" }));
+    expect(screen.getByRole("button", { name: "Create branch" })).toHaveAccessibleDescription(
+      "feature/mobile-select"
+    );
+    await user.click(screen.getByRole("button", { name: "Create branch" }));
 
     expect(onCreate).toHaveBeenCalledWith("feature/mobile-select");
   });
@@ -556,7 +560,8 @@ describe("MobileSelectSheet", () => {
         ]}
         create={{
           visible: true,
-          label: (query) => `Create branch: ${query}`,
+          label: () => "Create branch",
+          description: (query) => query,
           disabled: (query) => query.includes("main"),
           onCreate,
         }}
@@ -571,12 +576,13 @@ describe("MobileSelectSheet", () => {
 
     const option = screen.getByRole("button", { name: "main" });
     const action = screen.getByRole("button", { name: "Refresh" });
-    const create = screen.getByRole("button", { name: "Create branch: main" });
+    const create = screen.getByRole("button", { name: "Create branch" });
 
     expect(option).toBeDisabled();
     expect(option).toHaveAccessibleDescription("Protected branch");
     expect(action).toBeDisabled();
     expect(create).toBeDisabled();
+    expect(create).toHaveAccessibleDescription("main");
 
     await user.click(option);
     await user.click(action);