F1 component kit/Media/Photo-review lightbox and verdict buttonsPhone

Photo-review lightbox and verdict buttons

Missing · new33 · photo-review

Vision checks and QC photos: the photo on a dark stage with prev / next and zoom, the AI verdict and rule, the Pass / Fail buttons with P / F (the fixed version), a failure-reason picker, and a throttled re-run (Q3). Phone: one photo per screen, big buttons, swipe.

Covers: M10. Exports: PhotoReview, VerdictButton.

Whole page:CompactComfortableLaravel · navyDTC · midnight green

Anatomy States Density EN · 中文 Edge cases Contract

Anatomy

The component as it sits in the product: English, compact, real data shapes.

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

Pass / Fail fix

FEEDBACK-B-r1 A08: the icon and the P / F hint crashed into the border. Now everything sits inside a 12px inner padding; never truncated; under 220px the pair stacks (prop layout); checked at every width the grid uses.

compact · 260px column

comfortable · 260px column

narrow · 180px column → stacks below 220px

phone · big

States

8 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

default

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

keyboard focus on Pass

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

Pass chosen

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

Fail chosen

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

Fail · reason picker

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

re-run throttled (429)

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

P pass F fail ←→ photo Z zoom

photo loading

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

photo failed

12 / 48 · Vision check resultsZEsc

Photo failed to load

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

comfortable · data-density=comfortable

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

中文 · lang=zh-Hans

12 / 48 · 视觉检查结果ZEsc

4521-1 · JA · 款式 p1.1

AI 判定：不通过 · 0.71规则 14 · 驳头翻折

12 / 48

P 通过 F 不通过 ←→ 照片 Z 缩放

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

12 / 48 · Vision check resultsZEsc

4525-1 · JA · HF Design p3.5.4 · The Cambridge Gentleman's Outfitters · rule: notch lapel roll line within 3 mm

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

permission denied

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

P pass F fail ←→ photo Z zoom

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

DTC admin · data-theme=dtc

12 / 48 · Vision check resultsZEsc

4521-1 · JA · Design p1.1

AI verdict: Fail · 0.71rule 14 · lapel roll

12 / 48

P pass F fail ←→ photo Z zoom

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export: PhotoReview · @rj/admin-kit
Props: items · index · onVerdict (pass|fail, reason) · onRerun · reasons
States: loading · ready · pass · fail · reason · throttled · resolved · image-error · denied
shadcn / Radix: Dialog (full) + ToggleGroup (verdict) + Command (reasons)
Package underneath: react-hotkeys-hook (P / F / ← → / Z) · react-zoom-pan-pinch · react-swipeable (phone)
Accessibility: verdict is a toggle group; keys are listed, not required
API operations: admin.vision-checks.results.index / .resolve / .rerun (throttled, Q3) · admin.orders.qc-photos · admin.orders.photos.index · admin.fabric-photos.batches.show
Phone variant: one photo per screen, big Pass / Fail, swipe

Export: VerdictButton · @rj/admin-kit
Props: kind pass|fail · pressed · size md|big · hotkey
States: default · focus · pressed · disabled
Accessibility: aria-pressed; the key hint is aria-hidden (the shortcut is in aria-keyshortcuts)