Editor-polish round: rail-head enlargement, Sources de-grey, D14 restyle, compare-on-pill, consent gate

[WilfordGrimley]

Description

Implements SPEC-editor-polish.md's EP1-EP11 + the ⋯ slot-menu cue revision (the owner-approved consolidated /editor polish round) against DisplayPage.tsx's left rail and SelectVersionResults.tsx's funnel. Maps to the spec's own item numbering:

Item	Shipped	Where
EP1 ghost tile thumbnail++N	dimmed first-hidden-copy thumbnail + caption on the "+N" expand ghost (the "−" collapse ghost stays plain text)	SelectVersionResults.tsx (GhostThumb/GhostDim/GhostPlus/GhostCap)
EP2 contrast pass	.btn-outline-secondary toolbar ghosts get an explicit #22303f/#ebebeb/1px #46586a floor, scoped to the toolbar only	DisplayPage.tsx (ToolbarRoot)
EP3 Sources de-grey + densify	#4E5D6B→#22303f/#2b3e50 via AutofillCollapse's new additive headerBackground/bodyBackground props; rows to 34px (toggle 52×31, pin 30×30, name 12px); filter border brightened; list capped at 10 with a "Showing N of M — filter to narrow" caption (not true virtualization — no new dependency, §B's own rule)	SourcesAccordion.tsx, AutofillCollapse.tsx
EP4 Slot Actions → top	compact 32×30 icon row beside the subject, via SlotActionsSection's new compact prop; removed from the bottom control stack entirely	DisplayPage.tsx, SlotActionsSection.tsx
EP5 subject 66px→116px	.subject width REV	DisplayPage.tsx (RailRoot)
EP6 Front/Back toggle + E24 flip	rail-head ToggleButtonGroup previews the OTHER face's own art (preview-only, never touches selection state); sheet's reserved top-right ⟲ corner flips that ONE slot's rendered face, gated on a separate content.flippable flag (not imageUrl — gating on the currently-shown face would strand the user the moment they flip to a face with no art)	DisplayPage.tsx, PagePreview.tsx
EP7 data-driven Sort	5 client-side orderings (Confirmation status / DPI desc / File size asc / Pinned-first / Name A→Z) replace the old 6-option backend SortByOptions select on this surface; "Community vote weight" renders nothing (amendment 2 — no seam yet, no disabled placeholder)	SelectVersionResults.tsx
EP8 wrong-printing pill restore	.notthis/.idtoggle restyled to the pre-#413 tinted rounded-pill idiom (radius 10px)	ConfidenceElement.tsx, DisplayPage.tsx
EP9 Scryfall compare-on-pill	trigger moves off the set icon onto the D14 pill; reveal renders beside the 116px subject (left:126px); hover/focus on fine pointers, tap-toggle on (pointer:coarse) (mutually exclusive per pointer type — see below)	ConfidenceElement.tsx, DisplayPage.tsx
EP10 round spinner	components/Spinner.tsx replaces the (previously entirely absent) loading state in the Select Version grid, gated on search.displaySpinner	SelectVersionResults.tsx
EP11 foreign-order consent	see "EP11 deviation" below	SharedDeckViewer.tsx, SharedDeckPage.tsx
EPcue	⋯ cue 20×20→26×26, higher contrast, gated on "slot holds a card AND context menu wired" (was gated on the menu alone)	PagePreview.tsx
Amendment 1	"More details" relocates from the rail head to directly under the D14 band	DisplayPage.tsx

Deviations from spec (flagged, not silent)

1. EP11 — the "shared-deck recipient" framing doesn't map onto any real surface as literally spec'd. The spec's D.8/D.9 tables describe the consent toast/hidden-cell/deck-banner attached to PagePreview sheet cells, for a recipient viewing "a shared deck" through /editor. But per docs/features/foreign-order-resilience.md's own "Explicitly deferred" note, /editor's project state is always the current session's own (never "someone else's" deck), and the ONE real "recipient of someone else's shared deck" surface in this codebase, SharedDeckViewer.tsx, is a completely separate plain read-only list — no PagePreview sheet, no rail, and (per that same doc) it doesn't even synthesize orphan CardDocuments today. I stopped and re-scoped rather than fabricate a non-existent "shared deck inside /editor" flow: EP11 ships on SharedDeckViewer.tsx instead — the real surface the deferred note explicitly named as future work — reusing the exact same tokens/mechanics (deny-by-default, useConsentToast, per-deck key, reversible banner) adapted to that component's own row/list shape rather than PagePreview's .cell.ext/.extbanner DOM literally. EPcue/E24 flip still ship on PagePreview.tsx as spec'd (independent of item 11's own conflict).
2. EP7's "Name/Date" bucket: amendment 2 says "ship the five" and lists them as (Confirmation status, DPI, File size, Pinned-first, Name/Date) — a 5-item list where the original 7-item enumeration had "Name (A→Z)" and "Date added" as two SEPARATE orderings. I implemented "Name (A→Z)" only (the literal wording used elsewhere in the doc for that bucket) to honor the "five" count; "Date added" isn't a selectable option this round. Flagged, not hidden.
3. EP3 "virtualized": implemented as a 10-row cap with a "Showing N of M" caption, not true windowed virtualization — §B's own "no new dependencies" constraint rules out react-window; functionally equivalent for this list's actual size (never more than a few hundred sources), just without scroll-position windowing.
4. A genuine bug found and fixed mid-implementation, not spec'd but load-bearing: the .compare reveal panel, once open, visually covers its own D14 pill trigger (its own aspect-ratio height reaches down into the band below the rail head) — without pointer-events: none on the panel this creates a live mouseenter/mouseleave oscillation loop (confirmed via a Playwright repro before the fix — the state never settled to open). Fixed by making the reveal purely visual/non-interactive; documented inline in DisplayPage.tsx.

Self-verification (measured, not asserted)

Computed-style delta: 26 rows extracted via Playwright getComputedStyle at 1400px against SPEC-editor-polish.md's §D literal values (rail-head subject/icon-row/fbtoggle, D14 padding/notthis pill, Sources header/list/filter-border, compare panel position/left/pointer-events, sortsel, control-stack padding, sheet cue/flip sizing) — 0 mismatches, 26/26 pass.

• tsc --noEmit: clean.
• jest: 65 suites / 573 tests, all pass (includes the new SharedDeckViewer.test.tsx, 5 tests).
• prettier@2.7.1 --check on every changed file: clean.
• Playwright (chromium, isolated port during dev, reverted before commit): DisplayLeftRailFidelity.spec.ts (11, includes new EPcue/EP6/EP8/EP9/amendment-1 coverage), DisplayPage.spec.ts (33, includes new EP6 flip-button test), SelectVersionSection.spec.ts (9, includes new EP1/EP7/EP10 coverage), PagePreview.spec.ts, GridSelectorModal(Variants).spec.ts, SavedDecks.spec.ts, OrphanRendering.spec.ts, DisplayFinishFooter.spec.ts, DisplaySlotStates.spec.ts, CardSlot.spec.ts, GeneralUIAccessibility.spec.ts, HomepagePanel.spec.ts, SelectedImagesRibbon.spec.ts, ChangeQueryModal.spec.ts, VotePickers.spec.ts, ArtistSupportLink.spec.ts — all pass (12 pre-existing skips, unrelated).
• Screenshots (1400 rail+compare open, 390 top, 390 bottom) captured to /home/ubuntu/.claude/jobs/e893dbef/tmp/polish-build/v-1400-rail-compare.png / v-390-top.png / v-390-bottom.png. Deferred: the 390 consent/denied screenshot — EP11 shipped on SharedDeckViewer.tsx (deviation 1 above), which needs a real encrypted-deck round-trip to reach live in a browser; verified instead via the 5 jest/RTL tests in SharedDeckViewer.test.tsx (prompt, decline→hidden, accept→revealed, reversible banner, per-deck-id independence), not a screenshot.

Dropped-test justifications

None dropped — DisplayLeftRailFidelity.spec.ts's two rows that would have broken (Slot Actions no longer inside the control stack; .src-list background token) were adapted to the new DOM/tokens, not removed, per the task's own "adapted not weakened" instruction.

Wiki checklist

• docs/features/display-left-rail.md / the /editor wiki page — the rail-head now shows a 116px subject + Front/Back toggle + compact icon row, Sources is de-greyed/densified/capped, Sort is data-driven, and the wrong-printing affordance is a pill — worth a wiki mention next admin-facing pass.

Checklist

• I have installed pre-commit and installed the hooks with pre-commit install before creating any commits.
• I have updated any related tests for code I modified or added new tests where appropriate.
• I have manually tested my changes as follows: Playwright suites listed above, run against a real dev server (chromium); visually reviewed the 3 captured screenshots.
• I have updated any relevant documentation or created new documentation where appropriate: docs/features/foreign-order-resilience.md (item 11 shipped), docs/features/grid-selector.md (ghost-tile/sort/cue/flip descriptions).

Do not merge — leaving for owner review per standing instruction.

🤖 Generated with Claude Code