Inbox UI PRs

#336 Design-system foundation and card anatomy

rubas/inbox#336 · epics #143, #144 · head 11e583b feat/ui-foundation-cards (captures predate it; body read at 70ba250) · base 667d217

Search pill below 840 px no longer sits half off screen (bug on main).
New tokens for the focus ring, the search pill geometry, and the spread rise.
The pointer cursor now covers checkboxes, radios, and their labels. The local cursor-pointer fixes in six components are gone.
One CountPill for thread and pile counts, at text-meta.
One LoginCode unit for the Logins row and the reader. The reader uses RowPill.
Enter or Space on a control inside a row no longer opens the reader (bug on main).
Reader Details shows Date and Message-ID.
The Worker rejects avatar lookups for reserved domains with a 400.
DESIGN.md documents the tokens, the count pill, LoginCode, and the measured row heights.

Search pill at 390 px

Before: the open search pill starts off the left edge of the screen. — Before. The pill sits half off screen. Chromium, 390 px, `main`.

After: the open search pill fits the screen with the placeholder Search mail. — After. The pill starts at the 16 px gutter. Chromium, 390 px, branch round 1.

Login panel in the reader at 390 px

Before: code chip, Copy code, and Open sign-in link as hand-built grey pills. — Before. Hand-built pills. When the panel wraps, the two 44 px hits overlap. Chromium, 390 px, `main`.

After: Copy code and Open sign-in link as RowPill buttons with a row gap. — After. `RowPill` buttons with a 16 px row gap. Chromium, 390 px, branch round 2.

Reader Details at 1440 px

Before: Details lists From, To, and Delivered to. — Before. From, To, Delivered to. Chromium, 1440 px, cropped, `main`.

After: Details also lists Date and Message-ID. — After. Date in `de-CH` with weekday, seconds, and zone, then Message-ID. Chromium, 1440 px, cropped, branch round 2.

Pile count pill at 390 px

Before: a sender pile with a small count pill. — Before. Count at `text-micro`, 19 by 15 px. Chromium, 390 px, `main`.

After: the same pile with the shared CountPill. — After. `CountPill` at `text-meta`, 20 by 19 px; row height unchanged. Chromium, 390 px, branch round 2.

#335 Shell, touch targets, and mobile chrome

rubas/inbox#335 · epics #145, #150 · head 390694d feat/ui-shell-mobile · base 8cfa3fd

44 px hits on the tabs, More, the wordmark, the top-bar icons, select-all, the address filters, and the composer controls. The visuals keep their size.
Folder menu rows are 44 px tall, and the panel opens below the trigger pill.
viewport-fit=cover and safe-area-inset-* on the top bar, gutters, agent drawer, and composer footer.
interactive-widget=resizes-content. The composer scrolls with a sticky footer, so Send stays above the keyboard.
Open sign-in link asks first when the link's site differs from the sender's, or sender authentication failed. It uses a modal <dialog>, not confirm().
theme-color and the manifest use the header and page tokens.
client/DESIGN.md records the hits, safe area, keyboard, PWA colors, and the link confirm.

The list screens show no visual change, by design. The hit areas grow, and the visuals keep their size. The before and after list captures also use different seed data, so the page leaves them out. The two screens below are new.

Logins list with a modal: Open this sign-in link? The message failed sender authentication, so the sender may be forged. The link goes to github.com. Buttons Cancel and Open link. — New. The sign-in link warning for a failed-authentication GitHub mail. Cancel has focus. Chromium, 1440 px, cropped, branch round 2.

The More folder menu open below its trigger, with Archive, Sent, Drafts, Spam, and Trash rows. — New. The folder menu with 44 px rows. Chromium, 390 px, branch round 1.

#333 Keyboard, accessibility, and realtime

rubas/inbox#333 · epics #148, #149 · head 5f9092d feat/ui-keyboard-realtime · base 8cfa3fd

One key table, client/src/lib/keymap.ts, drives dispatch and help.
? opens a shortcut map as a native modal <dialog>. The palette lists it too.
The map names # per folder: Delete forever, Discard draft, or Move to Trash.
After archive, spam, Trash, bulk actions, and undo, focus follows the cursor row.
On landing, the first Imbox row takes cursor and focus.
Closing the composer returns focus to its opener or to the cursor row.
One polite announcer reads toasts, the selection count, new mail, and stream health. Each modal carries its own region.
The replay buffer drops removed rows, applies patches, and empties on reset. Rows a reset adds get the arrival wash.
docs/realtime.md, client/DESIGN.md, and client/WRITING.md updated.

Landing at 1440 px

Before: Imbox on landing with no row focused. — Before. No row has focus; `j` skipped the first mail. Chromium, 1440 px, cropped, `main`.

After: the first row, Bob Keller, shows the focus ring and its action plate. — After. The first row has focus and shows its action plate. Chromium, 1440 px, cropped, branch round 1.

Shortcut map

Keyboard shortcuts dialog in two columns: In a list, Anywhere, and In a message, each line with its keycap. — New. Two columns at 1440 px. Chromium, branch round 2.

Keyboard shortcuts dialog in one scrolling column at phone width. — New. One column at 390 px. Chromium, cropped, branch round 2.

#334 Compose recovery, copy, and empty states

rubas/inbox#334 · epics #146, #151 · head 42b6dc1 feat/ui-compose-copy · base 667d217

A failed send shows copy for its cause (429, 400, server, no response), never the server payload, with Send again beside it.
A failed autosave shows Try save again in the header. flush() retries it.
Close after a failed save asks first and focuses Close anyway.
A save that fails after close raises a toast. The local copy stays and a reopen restores it.
Attachment failures use fixed copy, not the FileReader error text.
Fields, editor, attachments, and notices scroll in one lane between a fixed header and footer. The editor floor is 96 px.
Empty states name the next step. Imbox search names its scope; an empty search drops the 0-count heading.
Star, read, unsubscribe, and discard failure toasts get exact verbs and a spaced hyphen instead of an em dash.

Failed send at 1440 px

Before: Send failed: 429 /mailboxes/mail@njamba.ai/emails with the raw JSON error payload. — Before. The raw 429 payload. Chromium, 1440 px, cropped, `main`.

After: This mailbox reached its hourly or daily send limit. Send again later. Send again button beside it. — After. Copy for the send limit, with Send again. Chromium, 1440 px, cropped, branch round 1.

Empty search at 1440 px

Before: Results 0, then Nothing matches zzzz. — Before. A Results heading with 0. Chromium, 1440 px, cropped, `main`.

After: Nothing in all mail matches zzzz, with no heading. — After. One line that names the scope. Chromium, 1440 px, cropped, branch round 1.

Short viewport, 390 by 500 px

Composer with Try save again in the header, the message The draft isn't saved. If you close it, it stays only until you reload the page, and a focused Close anyway button above the footer. — New. Close after a failed save. Close anyway has focus; Send stays in the sheet. Chromium, branch round 2.

Composer at 390 by 500 with the fields and editor in a scroll lane and the footer with Send fixed at the bottom. — New. Fields and editor scroll between the fixed header and footer. Chromium, branch round 1.

#332 Search paging, scope, failure states, and recipient role

rubas/inbox#332 · epics #152, #147 (both stay open) · head 14deedb feat/ui-search-stack · base 667d217

search() pages by server offset and returns the mailbox-wide totalCount. The Worker takes offset.
A row that leaves through Archive, Spam, or Trash hides with its conversation. Paging does not skip a match.
The Results heading shows the full match count and the scope.
Show more results fetches the next page. Before, search stopped at 50 hits per mailbox without a sign.
A failed mailbox gets a notice with Try again. The other mailboxes' rows stay.
A pending search shows a three-row skeleton, pulsing only under motion-safe.
Loaded rows take their server rank.
Bug fix: an archived loaded result now leaves the list.
Collapsed thread rows show the recipient role: to you, cc you, or to Alice Meier +1.
The compact AccentPill has a 44 px hit.
scripts/dev-seed adds a sender pile and a Cc reply.

Results heading at 1440 px

Before: Results 50 for the query report, capped at the first page. — Before. Count 50, capped at one page, no scope. Chromium, 1440 px, cropped, `main`.

After: Results 60, Every folder but Spam and Trash, all addresses. — After. The full count 60 and the scope. Chromium, 1440 px, cropped, branch round 1.

The round-2 capture after2-1440.png shows a later state (9 results left after a bulk Trash). The page uses round 1 for this pair.

Recipient role at 1440 px

Before: collapsed row Alice Meier, date, preview. — Before. Sender, time, preview. Chromium, 1440 px, cropped, `main`.

After: collapsed row Alice Meier, to you, date, preview. — After. `to you` after the sender. Chromium, 1440 px, cropped, branch round 1.

New result states at 1440 px

End of the results list with a Show more results button. — New. Show more results under the first 50. Chromium, cropped, branch round 1.

Results 0 with a red notice: Couldn't search mail@njamba.ai. Matches from there are missing. Try again button. — New. One mailbox failed. A notice offers Try again, and the list does not claim Nothing matches. Chromium, cropped, branch round 2.

Results heading with three static skeleton rows. — New. The loading skeleton under reduced motion. Chromium, cropped, branch round 2.

A pile card dragged left and tilted over a red Trash zone. — New. A pile dragged 130 px left arms the Trash zone. Chromium, cropped, branch round 1.

Open in the PRs

Where	What remains	Why	Needs
#336	The count pill loses its fill on a hovered row.	The row `hover` fill and the pill `wash` have the same lightness. This already happens on `main`.	A decision from Dominic
#335	Restore actions in the folder reader (#145).	`DESIGN.md` says star only; adding more changes the reader contract.	A decision from Dominic, or the reader work
#334	The bulk bar keeps the short `Spam` label.	"Mark as spam" does not fit the one-line bar at 402 px.	A decision from Dominic
#332	Server search in Feed, Logins, and folder views.	Those rows act through the folder store and need their own mutation path. It would double the PR.	A follow-up PR
#332	Every inbound conversation shows as two rows.	In `workers/index.ts` the root gets its own UUID as `thread_id`, and replies get the root's Message-ID.	A separate PR on `receiveEmail`

No PR was tested in a real Safari, in Firefox for #336, on iOS, or with a screen reader. The client has no dark theme, so every capture is light only.