10 KiB
UI parity: EventHubFront ↔ CalenTIQ board
План визуального выравнивания клиентского фронта с утверждённым бордом.
SoT: boards/calentiq-ui-board-final.png.
Эпик: EventHubSpec#10.
Статус: workstreams 1–5 закрыты в коде Front (Refs Front#25–#29). Stage smoke на https://stage.calentiq.com — done (UI 0.2.29 / 79dadfb21f98, API 0.2.158).
Known deviations from board (Front#29)
Зафиксировано осознанно / пока не делаем (после visual pass ×3 moods + stage):
| Зона | Борд | Сейчас |
|---|---|---|
| Pixel-perfect calendar | denser board mock + Today/Upcoming rail | Agenda rail (§B): title-case Сегодня/Предстоящие + count, time-first rows; month chips/cell wash (§B/D) по mood; не 1:1 Figma |
| Discover cards | soft cards + media thumb + CTA | mood media plane (wash/initials + image_url when present) + soft-card rhythm + CTA; без full photo-hero grid |
| CONTROL booking §E | отдельные mock-карточки «слот/специалист» | EventActionCard / specialists / bookings: steel rail (усилен), avatar, available label, Confirm/Decline; не pixel-perfect board mocks |
| Bookings list §D | список заявок с Confirm/Decline на /bookings |
/bookings = заявки участника (Отменить); owner Confirm/Decline — в карточке события (EventActionCard / Заявки) |
| Login §D phone chrome | три phone frames + (на борде) Google CTA | brand-first hero + mood --auth-*; email/password only; mood switcher на login (иконки); taglines mood cards — на /more; без Google OAuth |
| Favicon set | 3 отдельных favicon файла на борде | mood appicon через applyMood |
| Desktop nav | phone bottom tabs на борде | desktop: top tabs (Календарь / Найти / Записи / Ещё); bottom nav — mobile |
| Stage | полный smoke на stage | done 2026-07-27: Login×3 / Calendar×3 + agenda / Discover / CONTROL commercial + Confirm·Decline / More moods |
| Домены calentiq.* | — | публичный stage: stage.calentiq.com / admin.stage.calentiq.com (канон STAGE-BROWSER.md) |
IA без sidebar / без Creator mood — совпадает с non-goals (проверено на stage).
Visual pass ×3 moods (local + stage)
Checked (vite preview + Playwright shots + stage HTTPS): Login §D, Calendar grid+agenda, Discover media, CONTROL slot/bookings (Confirm/Decline на event card), More mood cards — FLOW / MOMENTUM / CONTROL.
Polish in this pass: agenda copy/casing/counts + time-first rows; CONTROL steel rail emphasis; neutral Discover cover in mock (не flow-appicon во всех moods).
Remaining intentional: no pixel-perfect phone chrome; Discover без photo-hero grid; owner Confirm/Decline не на /bookings list.
Mood concept = product surface
Mood — не переименование calm|energetic|business и не смена primary hex.
Каждый mood — отдельная атмосфера продукта при той же IA:
| Mood | Ощущение | Chrome / surfaces | Discover / booking feel |
|---|---|---|---|
FLOW (calm) |
спокойствие, баланс | soft sage panels, light wash, soft chips | мягкие карточки, спокойный CTA |
MOMENTUM (energetic) |
энергия, скорость | ink #111820, coral #FF6A3D, denser chips |
тёмный discover, яркий CTA |
CONTROL (business) |
бизнес, доступность | steel #324A5F, cool neutrals |
коммерческие карточки слот/специалист/CTA |
Референс на борде: секции B Mood Overview, C Mood Switcher, D Core Screens, NEW Discover, E Booking / Commercial.
Switcher — branded cards (иконка + короткий tagline), не plain list/tabs:
- FLOW — Find balance
- MOMENTUM — Get more done
- CONTROL — Grow the business
Опционально: mood-aware favicon из boards/calentiq-icon-system-final.png / mood-icons/.
Токены сейчас узкие (tokens/colors.json); для parity нужны surfaces, gradients, chip/event styles, chrome — не только primary.
Workstreams (mood-first)
Порядок важен: сначала атмосфера и токены, затем экраны поверх них.
1. Mood system / atmosphere — P0 / first ✅
CSS-токены и chrome на mood beyond primary hex: surfaces, gradients, event chip styles; switcher как branded cards (icon + tagline); опционально mood favicon.
Acceptance
- Per-mood token set: surface / wash / chip / border / CTA (не только primary)
- Mood switcher = 3 branded cards с иконкой и tagline с борда
- Смена mood меняет атмосферу chrome (не только accent button)
- API keys остаются
calm|energetic|business - Опционально: favicon следует активному mood
Design: board §B, §C, §F; mood-icons/; tokens/
Done: EventHubFront#25 — index.css mood tokens + MoodSwitcher cards + favicon via applyMood.
2. Calendar mood-chrome — P0 ✅
Та же сетка/IA; soft panels (FLOW), denser chips (MOMENTUM), mood-tinted cells (CONTROL) — как на борде §B / §D Calendar.
Acceptance
- Month/week выглядят различно по mood при той же навигации
- Event chips / cells тонированы mood-токенами
- Нет sidebar / смены layout ради «красоты»
Design: board §B Mood Overview, §D Calendar
Done: EventHubFront#26 — --cal-* tokens + .eh-cal / .eh-chip в CalendarWidget; IA без изменений.
Follow-up: month grid §B/D — FLOW sage cell wash + chip limit 2; MOMENTUM denser/hotter chips limit 5; CONTROL steel cells + sharper chips limit 3; split time/title chips.
3. Discover mood variants — P1 ✅
Визуальная дифференциация FLOW vs MOMENTUM vs CONTROL: soft cards + CTA; соответствие борду (NEW Discover / §D Discover), не as-is скринам.
Acceptance
- Discover в трёх moods визуально различим (фон, карточки, CTA)
- Soft card + CTA pattern с борда (не плоский as-is list-only)
- IA и фильтры без смены модели; только presentation
Design: board NEW Discover, §D Discover; as-is refs: eventhub-discover-{flow,momentum,control}.png
Done: EventHubFront#27 — --disc-* + .eh-discover-card / .eh-discover-cta; list → card grid.
Follow-up: media hierarchy — .eh-discover-media with per-mood size/radius/washes (FLOW air / MOMENTUM energy / CONTROL steel), optional cover via image_url, display title + soft-card rhythm.
4. CONTROL booking surfaces — P1 ✅
Коммерческие карточки: слот, специалист, CTA — только Control-specific (§E).
Acceptance
- Slot card + specialist card + primary CTA в CONTROL
- Specialists остаются внутри Control (не 4-й mood)
- FLOW/MOMENTUM не получают Control commercial chrome
Design: board §E Booking / Commercial
Done: EventHubFront#28 — .eh-book-slot / .eh-book-specialist / .eh-book-request; steel chrome только под data-mood=business.
Follow-up: §E polish — --book-* tokens; CONTROL steel left-rail + sharper radii; slot duration/available label; specialist/request avatars; mood-token CTA/Decline.
5. Polish + stage smoke — P2 ✅
Мелкие расхождения с бордом, wordmark/lockup consistency, stage smoke трёх moods.
Acceptance
- Mock smoke: calendar → discover → bookings в 3 moods (+ IA без sidebar)
- Нет регрессий IA (top + bottom nav) — покрыто mock e2e
- Известные отклонения от борда зафиксированы в UI-PARITY (Known deviations)
- Visual pass ×3 moods (local preview / Playwright shots) — Login / Calendar / Discover / CONTROL booking
- Stage smoke на живом стенде — UI
0.2.29(79dadfb21f98) @https://stage.calentiq.com(2026-07-27)
Done: EventHubFront#29 — e2e/tests/mood-parity-smoke.spec.ts, brand meta, CONTROL tagline polish.
Follow-up: visual pass polish — agenda Предстоящие + counts/time-first; CONTROL steel rail; mock Discover cover neutral. Stage: seed commercial + slots + pending booking для §E Confirm/Decline.
Non-goals
- Left sidebar / смена IA
- 4-й Creator mood / AI-assistant home
- Rename API keys (
calm|energetic|businessостаются) - Покупка доменов / DNS cutover
- Админский UI (
design/admin/) — не трогать Front-бордами - Полный pixel-perfect каждого пикселя борда (направление + mood atmosphere)
Mapping → issues
| # | Workstream | Issue |
|---|---|---|
| — | Story (родитель) | Spec#11 |
| 1 | Mood system / atmosphere | Front#25 |
| 2 | Calendar mood-chrome | Front#26 |
| 3 | Discover mood variants | Front#27 |
| 4 | CONTROL booking surfaces | Front#28 |
| 5 | Polish + stage smoke | Front#29 |
Эпик: Spec#10.
Suggested start
Кодить с Task 1 (Mood system / atmosphere): без токенов и switcher-as-cards остальные экраны будут «перекраской primary», а не mood product surface.