My pick: Seam. It sits 200 px from the checkbox you just clicked at every width, against 549 px on average for the Dock and 676 px for today's top bar. It covers no text: 6.5 px clear above and 5.5 px below.
If you prefer calm over reach: Dock. It never moves, it sits under the thumb on a phone, and it is the least code, because it lives in the lower lane that already holds the toasts and Compose.
What still bothers me about the Seam. It moves with every check, with a 160 ms glide on a click and an instant jump on x. The dark pill is the loudest thing on the screen while a selection is open. And it needs a small position loop that runs every frame, which the Dock does not.
| Variant | Where | Travel to Archive, px row high / middle / low |
What it covers | Cost |
|---|---|---|---|---|
| Today | Top bar, replaces the tabs and search | 580 / 697 / 750 | Nothing, but at 390 px it wraps to two lines and the count stands alone | The TopNav bulk rules at 402, 420, and 640 px |
| Dock | Bottom of the window, centred on the list; takes the Compose slot | 714 / 498 / 434 | The lowest 76 px of the window. Rows scroll above it, and j/k keep the cursor row clear of it | CSS only |
| Seam | On the gap under the row you checked last; follows it | 200 / 200 / 200 | The padding between two rows, no text | A per-frame position loop, about 50 lines |
| Rail | Left margin, beside the row you checked last (1360 px and wider) | 143 / 143 / 143 | Nothing | The same loop, plus the Dock below 1360 px: two places to learn |
Travel is the distance from the clicked checkbox to the Archive button, with the checked row centred at 200, 450, and 700 px in a 1440 × 900 window.
Two rows are checked in each capture: Carla Rossi and Rail Tickets. All three share one component (SelectionBar.svelte), the same buttons, and the data-bulk-* hooks. The master checkbox shows a dash while only part of the list is checked. Mark read turns into Mark unread when every checked message is read. Keycaps show only with a mouse or trackpad. The bar enters with a 4 px rise over the 160 ms settle token, which is zero under reduced motion.
These stills drop the checkbox focus after the tap, because that focus opens the row's action plate (polish fix 2). The clips show it as it is today.
Each clip checks three rows, archives them from the toolbar, and undoes with Z. The grey dot is the pointer.
TopNav.svelte: the bar, the 640 px wordmark rule, and the 402 and 420 px bulk breakpoints go.DESIGN.md (the bulk layout bullet, the 420 breakpoint, and triage path 4) and the tests that look for the bar in the top bar.Ranked by what a user hits first. Each has a measured number and a crop from the current main.
After k scrolls the list, the sticky 56 px bar covers 44 px, then 56 px, of the 72 px cursor row. Only its focus ring shows. Fix: one line in layout.css, html { scroll-padding-top: calc(var(--topnav-h) + env(safe-area-inset-top) + 8px) }.
On a touch screen in Chromium, the tapped checkbox takes focus, and focus opens the plate. At 390 px the plate covers 196 of the row's 358 px (55%), runs 5 px into the sender, and the row turns hover grey. Fix: open the plate on keyboard focus only (:focus-visible inside the row), not on any focus.
Checked and unchecked rows share one fill, oklch(99.3% 0.006 92): 0% lightness apart. Only the 18 px checkbox differs. The design reference fills a checked row with the purple wash (.row[aria-checked="true"] in 02-hey.html). Fix: give checked rows bg-accent-wash, a token we already have, 5.9% below the card.
The same 9 shows on the Imbox tab, on the All address tab, and in the yellow bubble, at 390, 768, and 1440 px. Fix: keep the yellow bubble, the one bold element on the page. Drop the Imbox tab count while the Imbox is open, and the count on All.
At 1440 px the tabs start at x 942, while every other block starts at x 233. Their row adds 32 px plus a 16 px gap above the greeting. They sit 28.5 px above the greeting, closer than the 42.4 px between sections inside the list, so ui-evidence fails the groups check: they read as part of the greeting. Fix: put them on the greeting's line, right-aligned to the column edge.
The gap between the subject and the preview dash is 8 px; one space is 4 px. A template line break adds a space before the . Fix: remove the whitespace in MailRow.svelte:164 and SenderStack.svelte:126.
The greeting reads "Good evening" over "Donnerstag, 24. September". Every date goes through de-CH, so older rows and the reader show German month and weekday names too. Fix: en-CH keeps the Swiss day-month order and 24-hour time, with English names ("Thursday, 24 September"). WRITING.md fixes de-CH, so this needs you.
ui-evidence fails the type budget at every width: 11, 13, 15, 17, 20, and 34 px. The 20 px step carries only the section headings, the wordmark, and the sign-in codes. Candidate: section headings at 17 px extrabold. A scale change, so it needs a design pass with you.
At 768 px the trigger is 44 px wide with no visible label, so a new user cannot name it. Fix: keep the "More" label. If the bar runs short of room, drop the Imbox tab count first (fix 4).
| Where | What remains | Why | Needs |
|---|---|---|---|
| Selection toolbar | Seam, Dock, or Rail | Reach against calm; see Pick | Your pick |
client/WRITING.md | English names in dates (fix 7) | The file fixes de-CH | Your call |
client/DESIGN.md type scale | Five sizes instead of six (fix 8) | Changes the look of every heading | A design pass with you |
| Check | Result | Output |
|---|---|---|
svelte-check | Passed | 699 files, 0 errors, 0 warnings. |
Seam text clearance (pixel-measure gap) | Passed | 6.5 px clear above the pill, 5.5 px below, at 1440 and 390 px. No text box overlaps it in the DOM. |
| Hit areas in the bars | Passed | Every control is a 44 px hit. The Seam's 32 px pill lets its hits bleed 6 px past its edge. |
| Pointer travel | Measured | Script in Chromium, see the table under Pick. |
ui-evidence on today's Imbox | Failed | Type budget (fix 8), groups (fix 5), radius (the Imbox count bubble is not concentric with its tab), edges (one pile avatar 2.3 px off the avatar column), hit area (flags Search and Settings at exactly 44 × 44; not a defect). |
| Client unit tests | Not run | Exploration only. The switch moves the bar out of the top bar, so tests that expect it there would fail. |
| Safari | Not run | No Safari here, and Playwright WebKit does not start on this machine (missing system libraries). |
In the worktree, run PORT=5373 task dev, then PORT=5373 task dev:seed, and open http://localhost:5373.
Expected. The Imbox with the seeded mail.
In the console, run localStorage.setItem("fsel-variant", "seam") and reload. The values are dock (the default), seam, rail, and top (today).
Expected. Checking a row shows that variant.
Check rows with the mouse, then with j and x. Press Archive or e, then Z.
Expected. The rows leave, the toast offers Undo, and Z brings them back.