diff --git a/dev-docs/BACKLOG.md b/dev-docs/BACKLOG.md index 0c24878d..c1795912 100644 --- a/dev-docs/BACKLOG.md +++ b/dev-docs/BACKLOG.md @@ -2299,7 +2299,7 @@ positives from `useForm` colliding with Crewli's own `useFormDraft` / `useFormSteps` / `useFormSchemas` / `useFormFailures` composables. Removed both packages from `apps/app/package.json`, regenerated -`pnpm-lock.yaml`. Canonical form pattern formalized in `CLAUDE.md` +`pnpm-lock.yaml`. Canonical form pattern formalised in `CLAUDE.md` "Forms" + `dev-docs/VUEXY_COMPONENTS.md` "Form validation" row. **Refs:** Session 4 follow-up Step 1; `apps/app/src/components/timetable/AddPerformanceDialog.vue` and `apps/app/src/components/sections/CreateShiftDialog.vue` as canonical references. @@ -2333,10 +2333,13 @@ assertions are necessary but not sufficient. - CI strategy: Playwright CT runs on every PR (slow lane); Vitest unit on pre-commit (fast lane). -**Trigger:** **Before opening the Sessie 5 prompt.** Sessie 5 builds -Engagement Detail (6 tabs, complex form state) and Portal pages -(drag-to-reorder, file uploads). Adding more jsdom-based component -tests for those surfaces compounds the migration cost. +**Trigger:** Eerstvolgende sprint na merge van +`fix/timetable-stabilization`. ART-S4-UX-PARITY en alle Sessie 5+ werk +gates op merge van TEST-INFRA-001. Reden: drie incidenten in dit +sprint-blok hebben aangetoond dat jsdom-tests structureel niet +beschermen tegen schema drift, filter drift, of UX divergence. Verder +bouwen zonder Playwright + visual regression infrastructure herhaalt het +patroon. **Refs:** Session 4 follow-up commits `5f135ec`..`985a5ab`, RFC-TIMETABLE D14/D20/D21, the new `apps/app/tests/utils/mountWithVuexy.ts` @@ -2387,23 +2390,98 @@ padding, or animation timing would not trigger a test failure even though the visual contract is broken. **Wat:** -- After TEST-INFRA-001 lands, add `apps/app/tests-pw/visual/PerformanceBlock.spec.ts`. -- Render PerformanceBlock in each documented state: option, confirmed, - contracted, cancelled; with/without capacity warn; with/without B2B - dots; with/without conflict ring; mid-cascade-pulse. -- Use Playwright's `toHaveScreenshot()` with locked viewport size and - font rendering. -- Commit baseline PNGs to `apps/app/tests-pw/visual/__screenshots__/`. -- CI fails on diff > 0.1% pixel delta. Diffs trigger a manual review and - baseline update if the change was intentional. +- Visual regression baselines for PerformanceBlock states, generated from + `./resources/Crewli - Artist Timetable Management/Crewli Timetable.html` + rendered states (the canonical prototype is the baseline source — not + hand-curated screenshots). +- Compare implementation Playwright renders against prototype renders + pixel-for-pixel (with reasonable tolerance for font rendering). +- Failures block PR merge unless a baseline update is intentional and + reviewed. +- Apply to: + - **PerformanceBlock** — 8 states minimum: option / requested / + confirmed / contracted / cancelled × with-warning / without-warning; + plus B2B dots and cascade-pulse at the millisecond keyframe peak. + - **PerformancePopover** — open state with full detail (avatar + + time/duration + multi-select status + advancing detail breakdown). + - **AddPerformanceDialog** — drag-mode (pre-fill from drop target) + and button-mode (name/genre/status/duration → land in Wachtrij). + - **Wachtrij** — filtered / unfiltered / grouped / ungrouped. - Pin font hinting and OS rendering: run visual tests only on Linux CI runners (consistent rendering across Mac/Windows is expensive — Linux baseline is sufficient). +- Commit baseline PNGs to `apps/app/tests-pw/visual/__screenshots__/`. +- CI fails on diff > 0.1% pixel delta. -**Trigger:** Second addition to the TEST-INFRA-001 sprint. After -TEST-CONTRACT-001 (contract-first, visual-regression-second). +**Trigger:** Onderdeel van TEST-INFRA-001 sprint. Tweede toevoeging na +TEST-CONTRACT-001. -**Refs:** RFC-TIMETABLE D21, D22, D25, D26. +**Refs:** RFC-TIMETABLE D21, D22, D25, D26; +`./resources/Crewli - Artist Timetable Management/` prototype. + +--- + +### ART-S4-UX-PARITY — Timetable UX parity with prototype + +**Aanleiding:** Manual browser testing after `fix/timetable-stabilization` +merge surfaced substantial UX divergence between implementation and the +canonical prototype at `./resources/Crewli - Artist Timetable Management/Crewli Timetable.html`. +Mechanical layer (backend, schema, layout, scroll, sticky panes) is +correct; visual and interaction layer diverge significantly. + +**Categories of divergence (seed list — full gap analysis is sprint Phase A):** + +- **A. Component-shape drift** + - PerformanceBlock missing: genre tag, advancing progress bar, + capacity-warning visibility + - PerformancePopover missing: avatar, time+duration display, + multi-select status, advancing detail breakdown + - Wachtrij missing: multi-select status filter pills, status grouping + with counts, grouping toggle, status/genre per item + +- **B. Interaction drift** + - Drag within timetable: not working + - Drag between Wachtrij and timetable: not working + - Click handling: inconsistent across blocks (some open popover, some + don't) + - Resize handles: missing entirely + +- **C. Logic drift / rendering** + - Conflict detection: not visually surfacing (red border + warning + icon) + - Lane stacking on overlap: behavior unverified against prototype + - Capacity warnings: rendering unverified + - Block rendered outside timetable bounds (Bert's screenshot 3) + +- **D. AddPerformanceDialog two-mode behavior** + - "Add via timetable click-drag" mode: should pre-fill + stage/start/end/duration from drop target — currently always shows + full form + - "Add via +Optreden button" mode: should only ask + name/genre/status/duration and land in Wachtrij — currently asks + stage/time/lane + +For the complete 20-item itemization with severity ratings, see the Phase +A report in `feat/timetable-stabilization` finalization commit. + +**Wat:** +- Sprint Phase A: line-by-line gap analysis of prototype HTML vs. current + implementation, produces an exhaustive table (this seed list above is + incomplete on purpose — full audit belongs in the sprint, not in this + BACKLOG entry) +- Sprint Phase B: implement parity, prioritised by category and severity + from Phase A +- Sprint Phase C: visual regression baselines locked in via TEST-VISUAL-001 +- Sprint Phase D: manual prototype-side-by-side walkthrough by Bert before + merge + +**Trigger:** Direct na merge van TEST-INFRA-001 sprint. Sessie 5 +(Engagement Detail) en alle volgende Artist-domain frontend sprints +gates op merge van ART-S4-UX-PARITY. + +**Refs:** Bert's screenshot report (chat thread on stabilization merge +readiness), `dev-docs/audits/PROTOTYPE-AUDIT-ARTIST-TIMETABLE.md`, +RFC-TIMETABLE D8/D17/D18/D19/D20/D21/D22/D25/D26. ---