Skip to content

feat(app): the sidebar is a rail of your projects, and the app is on one layout grid - #154

Merged
sean-brydon merged 15 commits into
mainfrom
feat/project-rail
Oct 18, 2026
Merged

feat(app): the sidebar is a rail of your projects, and the app is on one layout grid#154
sean-brydon merged 15 commits into
mainfrom
feat/project-rail

Conversation

@sean-brydon

@sean-brydon sean-brydon commented Oct 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

The sidebar becomes a rail of your projects, and the whole app goes on one layout grid so its edges and centre lines meet.

The project rail (new default sidebar)

  • A 60px rail: your pinned places (with their badges) and More, then a tile per project and a way to add one, Settings at the foot.
  • A tile is the project's GitHub owner's avatar, or an identicon made from its name. Projects that share an owner get a letter badge. A dot turns amber while an agent in it needs you, blue while one works; hovering says what.
  • Beside it, on a sheet with a rounded corner: the picked project's header (avatar, name, "N worktrees · boxes", New task, its menu), search (⌘K), and its worktree rows as the list draws them.
  • With one project there's no rail. Opening a worktree from anywhere picks its project.
  • Folded away (⌘\), the rail stays: search, notifications, places and the project tiles; a tile opens the sheet on its project.
  • Default for everyone: prefs version 4 moves the list to the rail once; a two-column sidebar someone chose stays. Settings › Appearance › Sidebar picks Rail, List or Two columns (it replaces the Labs switch).

One layout grid

Tokens in index.css ("The layout grid"): h-bar, h-bar-pane, px-edge, pl-lane, px-page, w-rail, w-rail-folded.

  • Top band: the sidebar's strip in every layout, the tab bar, the Compare bar, every full-page view's header, Settings', onboarding's and zen's strips and the notification centre are all h-bar: 40px at the default text size and smaller, growing only past it. The traffic lights move to its middle (trafficLightPosition.y 18 → 22), so everything in the band is on one centre line. A full page's header is now a single band row, its title at the window-title size.
  • Folded sidebar: 88px at the least. The lights run from 14pt to 74pt, so that's 14 clear on either side with the lights over the rail's icons; it used to be 76px in rem, which ran under the lights at small text sizes.
  • Two tones: the rail, the top band and the status bar are the frame; the sheet and the main area are one surface.
  • Pane toolbars: pane headers, the browser and preview bars, devtools, Files and the file preview are h-bar-pane (they were five heights).
  • Gutters and lanes: in all three sidebar layouts and Settings' nav, row boxes start and end on the edge and their glyphs, labels and dots on the lane; full pages' content starts on their title's gutter. Row-relative offsets are in rem, so they hold at any text size ("Show N older" used to drift ~5px). "Show N older" / "Show fewer" now read as controls: a chevron in the glyph column, quieter and smaller words.
  • Kept there: pnpm check:grid (new, in CI and AGENTS.md) fails on a bar of its own height or a raw-pixel gutter; a deliberate exception carries a grid-ok: why comment.

Proof (mock data)

Light Dark
Rail, Home
Rail, a worktree's tabs
Review (a full page's header in the band)
Folded (⌘\)
Settings › Appearance › Sidebar

Checked natively in a dev build too: the traffic lights, bell, hide button, tab titles and + share one centre line; the sheet's top border carries on the tab bar's; the lights measure 14–74pt, which sets the folded width.

Tests

  • New specs: sidebar-rail (tiles, picking, ⌘K, folding, migration, lanes, top line), grid (one band height with its controls centred, in every layout and at text sizes 11/13/16), sidebar-list and a columns lanes test, page-gutters; a11y scenes for the rail and the folded rail (light and dark). Existing specs pin the list via ?sidebar=list unless they test another layout.
  • Full suite: 489 passed before the last round; the failures were a load flake (passes on rerun) and the crew Report spec, which now allows the report's edge to peek in under the tab bar. Since then: rail, resize, list, nesting, grid and a11y specs pass.
  • check:titles, check:type, check:grid, check:csp, check:themes, unit tests (543), build, tsc -p e2e, cargo check, docs build.

🤖 Generated with Claude Code

sean-brydon and others added 10 commits October 18, 2026 18:44
@sean-brydon @claude
feat(app): the sidebar is a rail of your projects, with the picked on…
40ffb53 
…e's worktrees beside it

Each project is a tile on a narrow rail: its GitHub owner's avatar, or an
identicon from its name, with a letter when projects share an owner, and a
dot that is amber while an agent in it needs you and blue while one works.
The pinned places, More and Settings sit on the rail; the sheet beside it
has the project's header, search, and its worktree rows as the list draws
them. With one project there is no rail.

It is the default layout: saved prefs move to it once (version 4), except
a two-column sidebar someone chose. Settings › Appearance › Sidebar picks
Rail, List or Two columns; the browser specs pin the list unless they test
another layout.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
fix(app): the rail's sheet lines up, with its top on the tab bar's line
d7f58d6 
Everything on the sheet sits on two lanes: boxes (the avatar, search, a
row's highlight, the boxes' line) 12px in from either edge, and their
contents (search's icon, the label, a row's glyph, the boxes' dots) where a
row's padding puts its glyph. "Show N older" starts where a row's title
does at any text size (it was in px, the rows in rem). The sheet's top
border carries on the tab bar's bottom one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
feat(app): one layout grid — every top band is one height, on the tra…
9fdb79a 
…ffic lights' centre line

Tokens in index.css (h-bar, h-bar-pane, px-edge, pl-lane, px-page,
w-rail). The sidebar's strip in every layout, the tab bar, the Compare bar,
a full-page view's header, Settings', onboarding's and zen's strips and the
notification centre's header are all h-bar: 40px at the default text size
and smaller, growing only past it, as the traffic lights are placed once in
points. The lights move to the band's middle. A view's header is now a
single band row, its title the window-title size.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
test(app): check-grid finds bars and gutters off the grid, and a spec…
9e3c390 
… pins the top band

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
feat(app): every pane's and panel's toolbar is one height, its contro…
920b488 
…ls on the column's edge

A split pane's header, the Browser and Preview bars (and the agent's view,
its tabs and the sandbox bar), the Console/Network drawer and its filter
bar, the Files panel's header, a File tab's header and its conflict bar,
the ⌘P preview's header and a file card's header are all h-bar-pane (32px),
their outer controls on px-edge (12px). The Compare bar's sides move to the
edge too; Review's diff header and the worktree sheet's Commits line take
the edge and page tokens at their current heights.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
fix(app): the sidebars and full pages line up on one grid
f550fea 
The list and two-column sidebars use the rail sheet's lanes: rows'
highlights on px-edge, their glyphs, labels and section folds on
pl-lane, and every right end (rows, menus, Settings, the bell and the
hide button) on px-edge. Full-page views put their content on px-page,
under the header's title; centred pages keep their content width.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
merge feat/grid-panes: pane and panel toolbars on h-bar-pane and the …
48f6244 
…edge

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
merge feat/grid-gutters: the list and two-column sidebars, Settings' …
2a2fbc6 
…nav and full-page views on the grid's gutters and lanes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
fix(app): the last of the app goes on the grid, and CI keeps it there
a49862d 
Same-size bars use the tokens; the tree's indent and the zoom HUD are in
rem; the Team pages start on the page gutter; the rail's letter badge is on
the type scale. check-grid looks at horizontal gutters only, skips the
illustrations, and takes a grid-ok comment for the few deliberate
exceptions, each saying why. CI runs pnpm check:grid.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
test(app): the crew report spec allows the report's edge to peek in u…
93b4601 
…nder the tab bar

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 18, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
berth Ready Ready Preview Oct 18, 2026 8:00pm UTC
berth-docs Ready Ready Preview Oct 18, 2026 8:00pm UTC

Request Review

@sean-brydon @claude
feat(app): folded away, the rail sidebar keeps its project rail, clea…
8172635 
…r of the traffic lights

⌘\ in the rail layout hides the sheet and keeps the rail, with search and
the notifications from the strip, and a tile opens the sheet on its
project. The folded sidebar is never narrower than the traffic lights need
(w-rail-folded, 76px at the least); it was sized in rem and ran under them
at small text sizes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
sean-brydon and others added 3 commits October 18, 2026 20:40
@sean-brydon @claude
fix(app): the folded sidebar is 88px, the traffic lights over its middle
ed6db20 
The lights run from 14pt to 74pt; at 76px the green one met the rail's
edge. 88 leaves 14 clear either side and centres them over the rail's
icons.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
fix(app): the rail's sheet is the main area's colour, so the app has …
e86dde7 
…two tones

The rail, the top band and the status bar are the frame; the sheet and the
main area are one surface beside it. The sheet was a blend of the two, a
third tone that matched neither.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon @claude
fix(app): Show N older and Show fewer read as controls, not worktrees
8cfa981 
A chevron where a row's glyph goes, and quieter, smaller words that still
start on the titles' line.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sean-brydon
sean-brydon merged commit bd4db73 into main Oct 18, 2026
5 of 8 checks passed
@linear-code

linear-code Bot commented Oct 18, 2026

Copy link
Copy Markdown

ENG-6407

@sean-brydon sean-brydon mentioned this pull request Oct 18, 2026
Merged
sean-brydon added a commit that referenced this pull request Oct 18, 2026
@sean-brydon @claude
fix(app): Settings › Labs builds again after #153 and #154 met
ae0d7d7 
The merge kept an old Labs page: the Structured agents switch and its
pref, which #153 removed (agents run in chat now), and the two-column
switch, which #154 moved to Appearance › Sidebar. main didn't typecheck.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch was successfully deployed

2 active deployments
Preview – berth-docs — 66b57fb5 Deployed Oct 18, 2026 by vercel[bot]
View deployment
Preview – berth — 66b57fb5 Deployed Oct 18, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@sean-brydon