Skip to content

Agent: collapse the sidebar to a rail and unify the header - #1236

Merged
AnthonyRonning merged 1 commit into
masterfrom
ux/sidebar-rail-release
Oct 26, 2026
Merged

AnthonyRonning merged 1 commit into
masterfrom
ux/sidebar-rail-release

Conversation

@doowta

@doowta doowta commented Oct 23, 2026 •

Copy link
Copy Markdown
Contributor

Stack 1 sync — 2026-10-26: #1236 → #1282 → #1248 is rebased onto master at d35ea98d. The previous combined head 1bdec838 was manually tested and approved. The refreshed 0.0.8 Dev debug build passed through the pinned Agent Nix workflow; focused manual recheck is pending. GitHub now reports all three layers as mergeable. No local automated tests or test-running hooks were run. Earlier check results below refer to prior revisions.

Why

  • Collapsing the sidebar leaves its toggle and the Maple wordmark floating in the title bar beside the window buttons, and the task title sits jammed against them.
  • There's no consistent place to reopen the sidebar or start a task while it's collapsed.

What this PR adds

  • A collapsed sidebar becomes a slim 48 px rail below the header. Its Maple mark keeps exactly the expanded wordmark M's position and scale, so collapsing looks like only the "aple" disappears. Clicking the mark, or Enter/Space when it has focus, reopens the sidebar.
  • Toggle sidebar stays at exactly the same header position in both states, just after the macOS traffic lights (first in the header on Windows/Linux). The sidebar's separate toggle is removed. While collapsed, New task and a thin divider follow the toggle before the title. Empty header space stays draggable.
  • The header always uses the sidebar background, and the content panel gets a rounded top-left corner, so the header and sidebar frame the content in both states. This changes the expanded look slightly too.
Collapsed (light) Collapsed (dark) Recording
Before — Collapsed sidebar on master: the Maple wordmark and title sit in the title bar beside the traffic lights —
After Collapsed rail with the Maple mark, and Toggle sidebar and New task buttons in the header, light Collapsed rail with the Maple mark, and Toggle sidebar and New task buttons in the header, dark Recording: collapsing to the rail and expanding again

Scroll sideways to compare. Click an image for full size.

Remote: the rail and unified header behave the same when connected to a paired computer; collapsing keeps the sidebar's computer and browse state.

Details for reviewers (design, scope, checks)

Files (under apps/maple-agent/app)

  • src/ui/chat/mod.rs, src/ui/chat/composer.rs, src/ui/chat/sidebar.rs, src/ui/widgets.rs, src/assets.rs
  • assets/icons/maple-mark.svg (the wordmark's "M" on its own)
  • src/ui/chat/tests.rs

Design

  • The screen renders the rail in place of the cached sidebar. Sidebar state, grouping, activity indicators and popups are unchanged. No animation and no navigation history.
  • The rail starts below the 40 px header row, so the header is one continuous strip across the window. macOS keeps the traffic-light inset; Windows and Linux use the normal gutter.
  • The expanded wordmark row and rail share the inset, traffic-light-aware top gutter, 28 px control height, and 16 px wordmark height. The M-only SVG uses the wordmark's viewBox and translation, and both use the same sizing helper so device-pixel rounding agrees exactly.
  • The header owns the only Toggle sidebar button. Its expanded position derives from the collapsed rail width and header inset, so its bounds stay identical through either transition. The wordmark row retains its height without the old toggle; on Windows/Linux its shared top inset keeps the M below the header.
  • Toolbar buttons reuse widgets::icon_button_for_action from Agent: give the lightbox close button one tooltip #1235 with the live keymap shortcuts in their tooltips. They stop mouse-down propagation so they don't start a window drag.
  • Keyboard: the rail mark and both toolbar buttons are tab stops; Enter and Space activate them. A local key handler consumes Space so it doesn't reach the composer's type-to-focus.
  • Header background is theme::bg_sidebar() in both states; the content panel keeps theme::bg_app() and rounds only its top-left corner with theme::RADIUS_LG.

Checks

  • Head: 6f9604c1. Base: e5c06a56. Seven files: production +214 / −86; tests +289 / −0.
  • cargo fmt --all: passed.
  • cargo clippy -p maple-agent-app --all-targets --locked -- -D warnings: passed.
  • cargo test -p maple-agent-app --locked -- collapsed_sidebar: 7 passed, including exact M alignment, toolbar order, fixed-toggle bounds, mouse activation, and Tab/Enter/Space behavior with composer text unchanged.
  • cargo test -p maple-agent-app --locked on the final head: 909 passed, 2 ignored. Two of master's new pane-wheel tests (agent: scroll the transcript from the side margins #1253) wheeled at x = 40 px, which is now the collapsed rail; they now wheel just past it (x = 80 px). The rail itself doesn't scroll the transcript.
  • Commands use the component Nix shell with Xcode 26.5. Commits use MAPLE_HOOK_SKIP=1 as requested.
  • The earlier look was checked by hand in light and dark (recordings above). Those recordings predate the exact mark-alignment and fixed-toggle follow-ups; no new native app launch was performed for this fix. Windows and Linux not run.
Full-size images Collapsed sidebar on master: the Maple wordmark and title sit in the title bar beside the traffic lights Collapsed rail with the Maple mark, and Toggle sidebar and New task buttons in the header, light Collapsed rail with the Maple mark, and Toggle sidebar and New task buttons in the header, dark Recording: collapsing to the rail and expanding again

🤖 Generated with Claude Code

@doowta
doowta marked this pull request as ready for review October 23, 2026 23:35
@doowta doowta changed the title Proposal: collapsed sidebar rail and a unified header Agent: collapse the sidebar to a rail and unify the header Oct 23, 2026
@doowta
doowta force-pushed the ux/sidebar-rail-release branch from 8476c42 to f2a64d6 Compare October 24, 2026 02:20
@marksftw

Copy link
Copy Markdown
Collaborator

Can we keep the Settings icon in the sidebar when collapsed?

@marksftw

Copy link
Copy Markdown
Collaborator
menu-collapse-animation.mov

what do you think about the collapse/expand animating? I can stack on PR on top of this one.

I'm fixing the Settings button not being centered in its space.

@marksftw

Copy link
Copy Markdown
Collaborator

I built the animation and kept the settings button on screen. it’s in a separate PR that is stacked on this one. Open to feedback or to ditch it completely.

Replace the floating collapsed-sidebar controls with a 48 px rail. Keep the Maple mark at exactly the expanded wordmark M position and scale by sharing row geometry and SVG viewport sizing, so collapsing removes only the rest of the wordmark.

Keep one Toggle sidebar button fixed beside the window controls in both sidebar states. Show New task and a divider before the title when collapsed. Tab and Shift-Tab traverse the controls; Enter and Space activate them without changing unsent composer text.

Use the sidebar background across the header in both sidebar states. Round the content panel at its top-left corner while keeping its own background and a square top-right edge. Reuse the merged action icon button helper.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@marksftw
marksftw force-pushed the ux/sidebar-rail-release branch from 53ba779 to b8bfdd1 Compare October 26, 2026 17:23
@marksftw

marksftw commented Oct 26, 2026 •

Copy link
Copy Markdown
Collaborator

Stack 1 UI testing completed on October 26, 2026.

Manual UI testing: passed (human tester approval of the refreshed Dev build).

Automated computer-use UI testing: passed for the scoped Stack 1 flows, using Codex-driven native pointer/keyboard interactions, screenshots and accessibility observations.

Tested the combined macOS Dev build at eeb75093b7979a553c6637000d5d4c61967d1423 in stack order #1236 → #1282 → #1248. It includes this PR's current head b8bfdd13bc217f8570390f9edb30d60afc0ad437. Individual layers were not launched separately.

Rail/header coverage in that combined build passed:

  • Expanded sidebar and collapsed rail, repeated layout changes, fixed toggle position, and New task navigation.
  • Keyboard navigation through collapsed controls.
  • Header truncation with a long task title at a narrower window size.
  • Project popup dismissal on collapse and task-menu operation after expansion.
  • Text/attachment draft preservation across layout changes; Search-result navigation reopens the expected conversation.

The shared testing report on #1248 records the full environment, cross-stack coverage and limits. It also retains two out-of-scope observations—narrow-window composer clipping and cached sidebar accessibility omissions—for possible future issues. They are treated as likely pre-existing; baseline regression status is unconfirmed, and no issues have been opened.

No unit/integration test suites or test-running hooks ran.

@AnthonyRonning AnthonyRonning left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed at b8bfdd13bc217f8570390f9edb30d60afc0ad437. Rail/header changes preserve existing sidebar state and reuse the shared GPUI action and keyboard controls.

No substantive blockers found. Hosted Agent CI passed, and the combined stack passed the local human smoke test, including Vim mode.

@AnthonyRonning
AnthonyRonning merged commit 7e66445 into master Oct 26, 2026
43 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants