feat(compact): lay the entry screen out as the platform’s grouped list

[alchaplinsky]

Summary

The phone's entry screen, laid out as the platform's grouped list — Apple Passwords and 1Password 8 are the references. Stacked on #574 (it uses the header-action tier from there); target main once that merges.

Header. One row: a 44px tile, the title, and the star as a 44px header action, so the row's two ends weigh the same. The "Login · host" line is gone — the rows already say what the entry is and where it belongs. Eyebrow gains a bare mode that prints only what the kind adds (an identity's document type), and the phone header draws it only for kinds that have one.

Rows. The grouped list's geometry, all max-md: in fields/Row and tokens.ts:

• Captions are sentence case at 12px (ROW_LABEL), 2px over the value, 8px over and under — about 56px a row, down from 69.
• The rail is pulled 12px into the padding so a glyph sits 16px from the card's edge, the same as the caption on the left.
• No copy button on a phone row. The value is the copy control (already the product decision), the toast confirms it, and the bottom button covers the main secret. A rail holds only the eye and the open-link.
• The strength meter and the "Changed" stamp keep to one line; the stamp truncates.

One-time code. A row under the password, the grouped digits as its value and a countdown ring in its rail (fields/Otp/Countdown: a conic gradient on a registered --otp-left, so the per-second steps glide). The value copies when pressed. This read face applies on both shells — it is the same pattern on desktop in both reference apps and removes the two-column special case. The editor keeps the dial as the live preview of a pasted secret.

Under the rows. Files, passkeys, custom fields and tags are sections (SECTION_LABEL: 12px uppercase with the tracking pulled in, inset to the rows). Every "add" — "Attach file", "Add tag" — is the same card-row cell (ACTION_ROW). The dates are one centred meta line at the end. Compact/Detail/Meta renders that; Show/Body takes it as its Footer, reading the same facts the desktop strip does.

Desktop. Unchanged except for two things: the one-time code reads as a row with a ring rather than the dial column, and the editor's row is labelled "One-time code" rather than "OTP" (added to all ten locales). The edit form's footer on the phone still uses the desktop strip, as before.

Verification

• bun run typecheck, bun run lint (0 warnings), bun run build: clean
• bun run test: 1074 passed, including new cases for the OTP row (both shells) and the phone layout
• Not run on a device. Worth a look: the ring's sweep, the rail alignment on rows with two actions (password), and the tag pills in dark mode.

Decisions

• adopted · implementation · [compact-shell] — The phone entry screen is the platform's grouped list: one-line header, sentence-case 12px captions, glyphs 16px from both card edges, sections for files/passkeys/custom fields/tags, one centred meta line for dates. — The folded desktop pane read as a responsive page, not a phone screen; this is the idiom Passwords and 1Password share.
• adopted · implementation · [compact-shell] — No per-row copy button on the phone; the value is the copy control. — Passwords and 1Password draw rows without one; the icon on every row was what unbalanced the grid.
• adopted · implementation · [compact-shell] — The one-time code reads as a row under the password with a countdown ring in its rail, on both shells; the editor keeps the dial preview. — Same pattern as the reference apps on every platform, and one layout instead of a side column that collapsed on narrow containers.
• adopted · architectural · [compact-shell] — Show/Body takes its footer as a component (Footer prop), so a shell lays the same facts out its own way without the body knowing which shell it is in. — Structure is composition decided in the shell; the facts are read in one place.

[greptile-apps]

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge; no actionable issues remain from this review.

Summary

The phone entry screen now uses a grouped list with tighter rows, section headings, tag pills, and one dates line.

• The phone entry header takes less space and repeats less.
• One-time codes appear as copyable rows with a countdown ring.
• Phone rows use matching captions and copy from their values.
• Phone details group tags, files, and dates below the fields.

_{Reviews (3) · Last reviewed commit: "Merge remote-tracking branch 'origin/fea..." · Reviewed by Greptile}