Skip to content

feat(machine-info): Info tab rework — the QR player's landing (PP-5sgt.2)#1575

Open
timothyfroehlich wants to merge 7 commits into
mainfrom
feat/machine-info-tab
Open

feat(machine-info): Info tab rework — the QR player's landing (PP-5sgt.2)#1575
timothyfroehlich wants to merge 7 commits into
mainfrom
feat/machine-info-tab

Conversation

@timothyfroehlich

Copy link
Copy Markdown
Owner

What

Slice 2 of the machine-detail redesign epic (PP-5sgt). Rebuilds the Info tab body (/m/[initials]) as the QR-scanning player's landing, on top of the enriched shared header from PP-5sgt.1 (#1573).

Reading order (both breakpoints): Description → Hero → reference cluster (Tags / Owner / PinballMap) → recent-activity peek.

  • Description — standalone prose at the top, no "Description" label (the prose is self-evidently the description). InlineEditableField gained a hideLabel prop (label kept for a11y/aria).
  • Hero (InfoHero) — the player's whole answer: derived machine status + presence pill, a prominent Report a problem → button routing to the report page, and a worst-severity-first known-issues peek (up to 3) with View all on Service →. Healthy machines show an "all clear" state instead.
  • Reference cluster (InfoRail) — Owner card (name only, never email — CORE-SEC-007) + Tags and PinballMap reserved-slot placeholders (frame-first: Collections and PP-o355.3 fill them later).

Layout

  • Desktop: md:grid main column + 320px rail (md:items-start so the rail stacks tight, independent of the tall hero).
  • Mobile: single column; the rail folds inline after the hero (rendered once per breakpoint via md:hidden / hidden md:flex — no double screen-reader content).
  • sm: is padding-only; the column→row pivots use md: (CORE-RESP-003). /m/TAF is already in the overflow regression spec at 375px + 1024px.

Transitional decision — Edit + QR kept on Info

The mockups move QR to Service and Edit to Settings/Service, but those land in PP-5sgt.3. To avoid a production regression (QR printing / machine editing would otherwise vanish), Edit + QR (and owner requirements/notes) are kept in a maintainer-tools block at the bottom of the main column, gated by permission, with a NOTE (PP-5sgt.3) to relocate them. QR stays visible to everyone, matching pre-redesign behavior.

Tests

  • RTL: InfoHero (status, Report link, peek + ordering, healthy state), InfoRail (owner name/no-email, invited/empty, placeholders), MachineDescriptionField + showDescription toggle.
  • Integration: updated the page-auth test for the now privacy-gated owner-fields block (anonymous viewers get no owner fields) + description canEdit.
  • E2E: new e2e/full/machine-info.spec.ts (hero status, peek IDs, Report routing, View-all deep link).

pnpm run check green (1319 unit/integration tests). E2E was not run locally — the host memory-pressure gate hard-blocked Playwright (swap ≥ 6.5 GB) and I didn't force-skip to protect other sessions; CI runs the full suite.

🤖 Generated with Claude Code

timothyfroehlich and others added 3 commits June 21, 2026 07:36
…(PP-5sgt.2)

Add the player-landing building blocks for the Info tab rework:
- InfoHero: derived status + presence + prominent Report button + a
  worst-first known-issues peek with a View-all-on-Service link.
- InfoRail: Owner card (name only, no email) + Tags and PinballMap
  reserved-slot placeholders (Collections / PP-o355.3 fill them later).
- InlineEditableField gains `hideLabel` so Description renders as
  standalone prose; machine-text-fields splits out MachineDescriptionField
  and gains a showDescription toggle.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Rebuild the Info tab as the QR player's landing: Description (no label)
-> Hero -> reference cluster (Tags/Owner/PinballMap) -> recent-activity
peek. Desktop = main + 320px rail; mobile folds the rail inline after the
hero. Maintainer tools (Edit, QR, owner fields) kept temporarily at the
bottom until PP-5sgt.3 relocates them to Service/Settings.

Update the page-auth integration test for the privacy-gated owner-fields
block and add an E2E spec for the hero, peek, and Report-button routing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…5sgt.2)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 21, 2026 13:39
@vercel

vercel Bot commented Jun 21, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pin-point Ready Ready Preview, Comment Jun 21, 2026 7:40pm

Request Review

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

…5sgt.2)

The maintainer-tools block (MachineTextFields) now renders after the async
MachineRecentActivity in the tree. In the RTL integration render that async
component suspends and prevents later siblings from rendering, so the
permission-prop assertions never fired. Mock MachineRecentActivity to a sync
stub so the full tree renders.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…rework

Resolve page.tsx: keep the player-landing restructure; drop the old
stats-grid Manufacturer/Year cells (mfr/year now live in the header
sub-line from PP-5sgt.1); keep PP-o355.2's pinballmapCatalog title query
and the EditMachineDialog PBM-link fields.

Update E2E specs the redesign moved off the old 2-col stats grid:
machine-details-redesign, collection-view, invite-signup now target the
new `machine-owner-card`; machine-timeline scopes its 'View all' to the
Recent activity region (the hero added a 'View all on Service' link).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…PP-5sgt.2)

The dual mobile-fold + desktop-aside render duplicated the rail's test ids
(machine-owner-card etc.), tripping Playwright strict mode. Collapse to a
single grid in DOM reading order: the rail is one <aside> that folds inline
after the hero on mobile and pins to the 320px right column (row-spanning)
on desktop, with the main-column items auto-flowing down column 1.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…gt.2)

Replace the illustrative example tags (which would read as real to members)
with a clear reserved-slot state: 'Tagging arrives with Collections' plus a
small public/private legend explaining the model the feature will use.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants