feat(ui): redesign dashboard chrome with tiny top bar and sidebar search#101497
Conversation
Move the sidebar toggle to the top bar as a macOS-style panel button (collapse on desktop, drawer on tablet/mobile), move search into a sidebar field that opens the command palette, and move the color-mode toggle into the sidebar footer. Shrink the top bar to 44px, make the terminal toggle a quiet ghost button, and drop the shadow plate behind the macOS titlebar brand mark so the transparent mascot renders bare. Adds the missing common.colorModeOption i18n key (theme buttons were announcing the raw key) and removes the dead theme-orb styles.
openclaw-barnacle
Bot
added
docs
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1adc842986
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| context.navigation.update({ | ||
| navCollapsed: !navCollapsed, | ||
| })} | ||
| .onOpenPalette=${this.openPalette} |
There was a problem hiding this comment.
On ≤1100px drawer viewports, this palette trigger now lives inside .shell-nav; passing openPalette directly lets the command palette save the drawer search button as the previously focused element. When the user selects a nav/session result, navigate() closes the drawer and then the palette restores focus back to that offscreen .sidebar-search, stranding keyboard/screen-reader users in the hidden drawer instead of returning them to the topbar drawer trigger. Wrap this path so opening from the drawer closes/focuses the drawer trigger first, or make palette focus restoration skip hidden drawer triggers.
Useful? React with 👍 / 👎.
The i18n sync initially recorded English fallbacks for the new key, which the ships-no-recorded-English-fallbacks gate rejects. Regenerated with a real translation provider; all 20 locales now carry translated values (fallbacks=0).
|
Codex review: needs changes before merge. Reviewed July 7, 2026, 5:00 AM ET / 09:00 UTC. Summary PR surface: Source -94, Tests +14, Docs 0. Total -80 across 71 files. Reproducibility: yes. Source inspection shows that clicking sidebar search in a drawer saves that hidden drawer button as the palette restore target, and palette selection then closes the drawer before restoring focus. Review metrics: none identified. Stored data model Merge readiness Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch. Rank-up moves:
Risk before merge
Maintainer options:
Next step before merge
Security Review findings
Review detailsBest possible solution: Keep the chrome redesign direction, but make drawer-origin palette opens restore focus to the topbar drawer trigger or skip hidden drawer triggers, with E2E coverage for selecting a palette result from an open drawer. Do we have a high-confidence way to reproduce the issue? Yes. Source inspection shows that clicking sidebar search in a drawer saves that hidden drawer button as the palette restore target, and palette selection then closes the drawer before restoring focus. Is this the best way to solve the issue? No. Moving search into the sidebar is a reasonable UI direction, but the implementation needs a focus-safe drawer opener or hidden-target-aware palette restoration before merge. Full review comments:
Overall correctness: patch is incorrect AGENTS.md: found and applied where relevant. Codex review notes: model internal, reasoning high; reviewed against 13c1d3c4083a. Label changesLabel changes:
Label justifications:
Evidence reviewedPR surface: Source -94, Tests +14, Docs 0. Total -80 across 71 files. View PR surface stats
Acceptance criteria:
What I checked:
Likely related people:
What the crustacean ranks mean
Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics. How this review workflow works
|
clawsweeper
Bot
added
proof: sufficient
One button drives both modes: rail collapse on desktop and the slide-over drawer at the ≤1100px breakpoint, decided via matchMedia (with the legacy addListener fallback used elsewhere in bootstrap). Replaces the previous pair of CSS-swapped buttons.
|
Merged via squash.
|
…rch (openclaw#101497) * feat(ui): redesign dashboard chrome with tiny top bar and sidebar search Move the sidebar toggle to the top bar as a macOS-style panel button (collapse on desktop, drawer on tablet/mobile), move search into a sidebar field that opens the command palette, and move the color-mode toggle into the sidebar footer. Shrink the top bar to 44px, make the terminal toggle a quiet ghost button, and drop the shadow plate behind the macOS titlebar brand mark so the transparent mascot renders bare. Adds the missing common.colorModeOption i18n key (theme buttons were announcing the raw key) and removes the dead theme-orb styles. * fix(ui): translate common.colorModeOption across locale bundles The i18n sync initially recorded English fallbacks for the new key, which the ships-no-recorded-English-fallbacks gate rejects. Regenerated with a real translation provider; all 20 locales now carry translated values (fallbacks=0). * refactor(ui): unify the topbar sidebar toggle into one button One button drives both modes: rail collapse on desktop and the slide-over drawer at the ≤1100px breakpoint, decided via matchMedia (with the legacy addListener fallback used elsewhere in bootstrap). Replaces the previous pair of CSS-swapped buttons.
…rch (openclaw#101497) * feat(ui): redesign dashboard chrome with tiny top bar and sidebar search Move the sidebar toggle to the top bar as a macOS-style panel button (collapse on desktop, drawer on tablet/mobile), move search into a sidebar field that opens the command palette, and move the color-mode toggle into the sidebar footer. Shrink the top bar to 44px, make the terminal toggle a quiet ghost button, and drop the shadow plate behind the macOS titlebar brand mark so the transparent mascot renders bare. Adds the missing common.colorModeOption i18n key (theme buttons were announcing the raw key) and removes the dead theme-orb styles. * fix(ui): translate common.colorModeOption across locale bundles The i18n sync initially recorded English fallbacks for the new key, which the ships-no-recorded-English-fallbacks gate rejects. Regenerated with a real translation provider; all 20 locales now carry translated values (fallbacks=0). * refactor(ui): unify the topbar sidebar toggle into one button One button drives both modes: rail collapse on desktop and the slide-over drawer at the ≤1100px breakpoint, decided via matchMedia (with the legacy addListener fallback used elsewhere in bootstrap). Replaces the previous pair of CSS-swapped buttons.
1 participant
What Problem This Solves
The Control UI window chrome had grown noisy and scattered. The top bar spent 52px on controls that do not belong there: a search button, a terminal button styled as a heavy bordered circle, and a three-way light/dark/system toggle. Meanwhile the sidebar collapse button hid in the bottom-right corner of the sidebar footer, where nobody expects a sidebar toggle. In the macOS app, the OpenClaw mascot in the native titlebar strip rendered on a shadowed plate that looked like a misplaced card, because a
box-shadowwas applied to a transparent SVG.Why This Change Was Made
The chrome now follows the layout conventions users already know from macOS apps and tools like Linear/Slack: a tiny top bar that only carries navigation (sidebar toggle + breadcrumb + quiet terminal toggle), a search field at the top of the sidebar as the command palette entry point, and personal/utility controls (color mode, settings, docs, pairing) grouped in the sidebar footer. The sidebar toggle is a macOS-style panel button at the left edge of the top bar; on drawer viewports (≤1100px) the same slot drives the slide-over drawer. The brand mark now renders bare, since any shadow/background behind a transparent SVG reads as a floating plate.
Along the way this fixes a real a11y bug: the theme buttons referenced a missing
common.colorModeOptioni18n key, so tooltips andaria-labels literally announced "common.colorModeOption". The dead.theme-orblegacy styles were removed. Net diff is negative (‑60 lines of non-generated code).User Impact
Evidence
Full-page, light and dark (1440×880, live gateway):
Top bar detail (search + theme trio gone, panel toggle added left):
Sidebar footer (collapse toggle out, color-mode toggle in):
Collapsed rail, dark:
macOS titlebar brand mark (simulated native strip; shadow plate removed):
Validation:
terminalAvailableforced on; phone width (390px) checked.ui/src/e2e/sidebar-customization.e2e.test.tsextended: sidebar search opens/closes the palette, the collapse toggle is asserted to live in the top bar, and the rail keeps the icon-only search entry; the existing collapse-persistence and drawer flows keep passing against the same accessible names.pnpm ui:i18n:sync+pnpm ui:i18n:checkclean after adding the missingcommon.colorModeOptionkey (locale bundles regenerate with tracked English fallbacks).pnpm check:changed(Blacksmith Testbox): guard lanes green; the warning-only "test temp creation report" lane failed withorigin/main...HEAD: no merge basebecause the branch was not pushed yet — infra-side, rerun after push in CI.gpt-5.5, local diff): clean, no accepted/actionable findings.