[danbarua]

Problem

The sidebar toggle sat in the top bar beside the LabKit name, which kept the top left of the page from being the name alone. When the sidebar was hidden, nothing on the page showed that File Explorer, Source Explorer and Record Explorer existed.

Change

• Rail. A 44 px column at the left edge of the page, below the top bar. It stays when the sidebar is hidden.
  • Its first button shows or hides the sidebar, as the top-bar toggle did. The accessible name is still "Show or hide the sidebar".
  • One button for each section follows: File Explorer, Source Explorer, Record Explorer. A button folds its section when the section is showing. Otherwise it opens the section and shows the sidebar. Its aria-pressed says which.
  • A button for a section that is unavailable is disabled, and its tooltip gives the reason that section's header gives.
  • A button's accessible name is "Open File Explorer", "Open Source Explorer" or "Open Record Explorer".
• Top bar. It holds the LabKit name and the theme button, and the development links in development.
• Narrow windows. In a window 860 px wide or narrower, the rail stays in the page and the sidebar drawer opens beside it. The drawer's toggle and section buttons behave as at full width, except that opening a section opens the drawer.
• Motion.
  • A section's share of the sidebar's height changes by a 220 ms transition when the section opens or folds, so the sections slide. A folding section keeps its body drawn until it reaches the height of its header, which it keeps. No transition runs while a border is dragged.
  • At full width, the sidebar slides shut to nothing and open again over 220 ms. Its contents keep their width and are cut off at its edge. Once it is shut it leaves the tab order.
  • prefers-reduced-motion: reduce turns the transitions off.
• One box style. The box in Source Explorer had square corners; it now has the same rounded corners as the boxes in the other lists, and the timeline rows have the same radius as other rows. The rules that hand a list's open row over to the box were written out four times, for Collections, Items, File Explorer and Source Explorer. They are now one set in trace.css. A new test checks the Source Explorer box's corner radius.
• docs/architecture.md describes the rail.

Controls

• Icons. The sections use the icons their headers use (folder, commit, database).
• Section buttons in a hidden sidebar. A button for an already-open section shows the sidebar without folding the section.
• Not checked in a browser. I could not look at the rail in a browser in this session. The tests below check its presence, its states and the drawer's position, not how it looks.

Verification

• bun run check: exit 0, 1544 pass, 0 fail.
• bun run e2e with E2E_PORT_API=9019 E2E_PORT_DEV=8970 E2E_PORT_BUILT=8971: 150 passed.
• New e2e test, on the dev server and the built bundle: with the sidebar hidden, the rail stays. The File Explorer button shows the sidebar and the section, has aria-pressed true, and when pressed again folds the section.
• Changed e2e tests. The top bar has no sidebar toggle, no history buttons, no text box, no "Trace Console" and no "live". In a 600 px wide window, the drawer is out of the viewport when closed, which needed the drawer to move 44 px further left to clear the rail.

Linked issues

None. This follows #667, from the review of the top bar.

🤖 Generated with Claude Code