Repository navigation
Merged
Conversation
… gives Items room - The mark and name are one button that opens the workspaces. The sidebar toggle follows it, borderless, and the theme button is borderless and has no background. - The Back, Forward, home and top-bar filter controls are removed. The filter now sits in the Items pane and narrows its items. - In Record Explorer, Collections takes at most 40% of the height and scrolls beyond that, so Items keeps the rest. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
github-actions
Bot
added
the
area:web
The browser's address bar already shows the host. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
danbarua
enabled auto-merge (squash)
October 11, 2026 22:28
danbarua
added a commit
that referenced
this pull request
Oct 11, 2026
…tton per section (#668) ## 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](https://claude.com/claude-code) --------- Co-authored-by: Claude Sonnet 5.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
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's first control was the sidebar toggle, followed by the name "Trace Console". The first item at the top left of a web app is usually its name, which opens the app's start page. Here the start page was a separate house icon, between two buttons that repeat the browser's Back and Forward. The filter box in the top bar filtered only the lists in the sidebar, and the theme button had a border and a background like an action button.
In Record Explorer, Collections took the height of all its rows, and Items, which a reader works in more, was pushed below the visible part of the sidebar.
Change
Top bar
live · hosttext stays after the toggle. The development links stay at the right.Filter. The top-bar filter box is removed. A "Filter items" box sits in Record Explorer's Items pane and narrows that pane's items. Collections is no longer filtered.
Collections and Items. In Record Explorer, Collections takes at most 40% of the section's height and scrolls beyond that. Items takes the rest, and keeps its minimum of 120 px.
Controls
alphafixture lists few collections, so the 40% test passes with and without the limit. I did not check it with a long list in a browser.Verification
bun run check: exit 0, 1544 pass, 0 fail.bun run e2ewithE2E_PORT_API=9019 E2E_PORT_DEV=8970 E2E_PORT_BUILT=8971: 148 passed.Q_2.history.length).Linked issues
None. This follows #666, from the review of the top bar.
🤖 Generated with Claude Code