the-daily-epub/docs/plans/briefs/ui-pass/handoff-rating.md

Task 2 handoff — rating widget, issue section headers, ratings-table verdict column

Branch ui-rating in /home/thallada/workspace/the-daily-epub-ui2, dev port 3602. A previous agent (Codex) landed a partial pass as 0cdc302 before hitting a quota limit and never saw the rendered result; main was merged in afterwards (bcbe158). This pass kept the parts of that work that held up on screen, fixed the parts that did not, and finished the remaining items.

What changed

src/web/tailwind.css

• .reader-section-heading — replaced Codex's sentence-case text-xl serif heading with a serif uppercase, letter-spaced section mark on a double rule: border-t-[3px] border-double border-rule-strong pt-3 font-serif text-[1.05rem] font-semibold uppercase leading-[1.2] tracking-[0.15em]. text-wrap: balance stays. (Rationale under Design decisions.)
• Rating buttons — inactive labels are now text-ink-2 (were text-ink) and go to text-ink on hover, so the group recedes next to serif body copy.
• Rating button hit area — the ::after overlay went from -inset-y-1 / -inset-y-1.5 (phone) to -inset-y-1.5 / -inset-y-2. The pseudo is positioned against the padding box, so the old values gave 37 px desktop / 41 px phone; the new values measure 41 px and 45 px (verified with elementFromPoint), clearing the ≥ 40 px / ≥ 44 px rules in the shared brief.
• Rating focus ring — .rating button[data-label]:focus-visible { z-20 ring-offset-0 }. In a segmented group the inherited ring-offset-2 painted a detached red box over the neighbouring buttons; hugging the segment reads as one control.
• .rating-note input — now a quiet bottom-hairline field everywhere (rounded-none border-x-0 border-t-0 border-b border-rule bg-transparent px-0 py-1 shadow-none focus:border-ink) instead of a boxed input on reader/dashboard pages and a transparent bottom border in tables.
• Table/list overrides — td .rating / .picks .rating lost the max-w-[15rem] cap (the cell now sets its own width) and gained gap-y-1; table buttons use px-1.5 so the group fits; .picks .rating gets mt-2 so the widget is not welded to the pick title.
• New .rating-cell block — the ratings-table verdict cell is a one-column grid, w-[15rem], gap-y-1.5: row 1 is the segmented group with clear pushed to the right edge (ml-auto), row 2 is the note field spanning the same width. min-h-0 on .rating-actions inside the cell top-aligns the group with the row's article title (measured: 1 px apart).

src/web/dashboard/ratings.rs

• Removed the now-dead CurrentRow::verdict field and its assignment (Codex dropped {{ row.verdict }} from the template but left the field, which fails clippy -D warnings). badge stays — it is still read by the "no embedding" / "—" branch in the template.

src/web/templates/world.html, src/web/templates/behind.html

• Added reader-page to the <article> so the polish item's text-wrap: balance on reader headlines covers the World Briefing and Behind the paper chapters too. (Deviation — see below.)

Kept from Codex's partial commit (verified on screen, unchanged)

_rating_widget.html (.rating-actions wrapper, clear/cleared label spans, placeholder="Add a note…"), article.html / issue_full.html / issue_public.html (reader-page, reader-section-heading, index-summary, mt-14 section spacing, colophon and The Brief on the same heading system), dashboard/ratings.html (badge dropped from the verdict cell, rating-cell class), the per-verdict tints, .prose-body img outline, .prose-body p / .index-summary text-wrap: pretty, and active:scale-[0.96] with named transition properties on .btn / .btn-primary / .btn-danger.

src/web/static/app.css

Rebuilt from tailwind.css (Tailwind 4.3.3).

Design decisions

• Section headers: uppercase mark, not a bigger headline. The brief asked for both options to be screenshotted. A sentence-case serif text-2xl header (after-rating/sec/C.png) is the same size as the article headlines directly beneath it and reads as another story, which is the exact failure being fixed. The uppercase, letter-spaced serif mark on a double rule (after-rating/sec/B.png, B2-*.png) is unmistakably a section marker at a glance and never competes with a headline — the newspaper convention the rest of the design language is borrowing. It is also visibly not the old 0.72 rem sans eyebrow: serif, ink-coloured, ~50 % larger, and sitting on the same double rule as the masthead. No extra eyebrow was added; the header is already uppercase, so a second uppercase line above it would be noise.
• clear stays invisible, not [hidden]. It keeps its layout box, so choosing a verdict does not shift the group sideways. .rating:has(button .active) button.clear reveals it; the cleared state swaps the label to a muted "cleared" with no underline, which doubles as the brief's "muted cleared state in the group" for the ratings table.
• Verdict cell is w-[15rem], not w-[13rem]. 13 rem is 208 px; the three labels plus clear measure ~219 px at text-xs/px-1.5, and the wider "cleared" label needs ~237 px. 15 rem (240 px) fits both states with the clear/cleared link flush right in each, so rows stay aligned whichever state they are in. Shrinking the type to ~0.7 rem would have hit 13 rem but is too small for a dense table that is otherwise 14 px.
• Note field shows a faint rule at rest. The brief said "bottom-hairline only, no box" and "only shows a border on focus"; Codex read that as a transparent border, which left "Add a note…" floating with no affordance and no shared baseline across rows. A --rule hairline that goes to --ink on focus keeps the cell calm, gives the unit a base line, and still reads as quiet.
• .prose-body h2/h3 left alone. Checked against 1.0625 rem body copy (prose-heading-light.png): text-2xl semibold over a hairline is already a clear heading. The brief said to adjust only if weak.

Deviations

• world.html and behind.html are not in this task's file list, but the polish item asks for text-wrap: balance on reader-page headlines and those two are reader pages. The change is one class per file and touches nothing else.
• Verdict cell width 15 rem rather than the brief's example 13 rem (reason above).
• Section header is text-[1.05rem] uppercase rather than text-2xl/text-xl sentence case (reason above).

Verification

Dev server on 127.0.0.1:3602 against this worktree's own copy of the dev DB (dev/config.toml was repointed from the main checkout's dev/ to the-daily-epub-ui2/dev/ so rating clicks could not touch the shared database; dev/ is git-ignored).

• cargo fmt -- --check — clean.
• cargo clippy --all-targets -- -D warnings — clean.
• cargo test --lib web:: — 84 passed, 0 failed.
• cargo test — 445 lib tests + all integration tests passed, 0 failed. (One earlier run had a single flaky failure in config::tests::registry_validation_rejects_bad_roles_kinds_and_efforts; it passes in isolation and on re-run, and is unrelated to this change — the host was building for three agents at once.)
• npm run css:check — no diff (Tailwind 4.3.3 from the adjacent checkout's node_modules/.bin via PATH; only read, never modified).
• Live JS handler (interact.mjs): clicked loved → good → not-for-me → clear → loved on /issues/2026-09-02/articles/4. .active and aria-pressed follow every click, the tint switches, 0 page navigations, console clean (no errors or warnings). Also typed into the note field and confirmed it round-trips into the ratings table's Note column.
• Hit areas measured with elementFromPoint: 41 px desktop, 45 px phone.
• Top alignment measured: verdict group top is 1 px from the article title top.

Screenshots

Under /tmp/claude-1000/-home-thallada-workspace-the-daily-epub/553c7d77-d8f4-44f8-a379-73cedea23814/scratchpad/after-rating/:

• sec/B.png, sec/C.png, sec/B2-brief.png, sec/B2-colophon.png — the section-header variant comparison behind the decision above.
• wip/* — Codex's partial state before this pass (the overflowing verdict cell is wip/ratings-cell-light.png).
• final/ — the shipped result:
  • / index card + section: index-card-light, index-card-mobile, index-card-mobile-dark, index-section-light, index-section-dark, index-section-mobile
  • front-page heading system: brief-light, brief-dark, colophon-light, colophon-dark
  • anonymous issue page: public-issue-light, public-issue-dark
  • chapter footer: article-footer-light, article-footer-mobile
  • ratings table: ratings-light, ratings-dark, ratings-mobile, ratings-mobile-dark, ratings-cleared-light, ratings-cleared-dark
  • dashboard article widget: dash-article-light, dash-article-dark, dash-article-mobile
  • states: rating-focus, rating-hover, overview-picks
  • polish checks: prose-heading-light, prose-img-light, prose-img-dark

Left open

• Nothing from this brief. The dev server is left running on 3602 against the-daily-epub-ui2/dev/daily-epub.db, which now holds 5 current verdicts (loved / good / not-for-me / good / loved, one with a note) plus the extra rating events those clicks appended — rating_events is append-only, so the history is longer than the seeded baseline.