Redesign the app bar with a fixed three-column layout and grouped controls - #333
Merged
Conversation
…trols The top bar was a single unbroken flex row of buttons carried over from the Qt port, with no visual grouping and a connection badge that only stayed anchored to the window edge by consuming whatever space was left over from a sibling flex item. At narrow widths, or once enough buttons were present, the badge would end up pressed against the last toolbar button instead of the window edge. The header is now a three-column grid - brand, toolbar, connection status - so each region has a declared track and cannot encroach on the others. Toolbar actions are organized into labeled groups (Session, History, Viewport, Arrange, Panels, Workspace Tools, Settings) with consistent internal spacing and a shared surface per group, replacing the undifferentiated run of buttons. Frequent, app-specific actions keep text labels; universally recognizable actions (undo/redo, zoom controls, the workspace-tools cluster) become icon buttons with the same wording carried in their tooltip and accessible name. The existing overflow-menu mechanism (container queries collapsing by width tier) now collapses whole groups instead of individual buttons, so a cluster of related actions is never left as a partial fragment at in-between widths. The Global Search action, which previously had no overflow-menu counterpart, now has one - it would otherwise have become unreachable once its tier collapsed. The connection-status indicator only renders when the connection is degraded. A permanently visible "connected" badge reports the expected state on every frame and adds visual noise without carrying information; the reconnecting state does carry real information (intents are queued or refused while it shows), so that state alone is surfaced. Geometry was verified across six viewport widths (560px-1600px): zero region overlap, a constant 47px row height, uniform 26px control height, and no document horizontal overflow at any width. Two icon glyphs (Settings, Knowledge) were redrawn after an initial render was ambiguous at 15px. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The E2E suite's shared boot helper, and boot.spec.ts directly, both waited on the connection badge (.app-conn-open) becoming visible as their signal that the real WebSocket handshake had completed before touching anything. The app bar redesign made that badge exception-only (App.tsx renders nothing there for a healthy connection by design), so the element the suite was waiting on no longer exists on the success path, and every spec that goes through gotoApp failed identically in CI. The app shell now carries the same underlying connection status as a data-connection-status attribute, independent of whatever the topbar chooses to display for it. The boot helper and boot.spec.ts wait on that attribute instead of the badge's visibility. Verified against the real backend: all 5 specs that failed in CI pass locally, along with the full frontend check (1930 tests, 0 lint errors, build, bundle size). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The top bar was carried over from the Qt port as a single unbroken flex row of buttons with no visual grouping. The connection-status badge stayed anchored to the window edge only by consuming whatever space was left over from a sibling flex item; at narrow widths, or once enough buttons were present, it ended up pressed against the last toolbar button instead of the window edge. Below a threshold width the toolbar had no shrink or overflow behavior at all, causing horizontal scroll across the entire document.
Change
Test plan