168 lines
10 KiB
Markdown
168 lines
10 KiB
Markdown
# UI parity: EventHubFront ↔ CalenTIQ board
|
||
|
||
План визуального выравнивания клиентского фронта с утверждённым бордом.
|
||
SoT: [`boards/calentiq-ui-board-final.png`](boards/calentiq-ui-board-final.png).
|
||
Эпик: [EventHubSpec#10](https://git.sabilin.com/EventHub/EventHubSpec/issues/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`](boards/calentiq-icon-system-final.png) / `mood-icons/`.
|
||
|
||
Токены сейчас узкие ([`tokens/colors.json`](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**
|
||
|
||
- [x] Per-mood token set: surface / wash / chip / border / CTA (не только primary)
|
||
- [x] Mood switcher = 3 branded cards с иконкой и tagline с борда
|
||
- [x] Смена mood меняет атмосферу chrome (не только accent button)
|
||
- [x] API keys остаются `calm|energetic|business`
|
||
- [x] Опционально: 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**
|
||
|
||
- [x] Month/week выглядят различно по mood при той же навигации
|
||
- [x] Event chips / cells тонированы mood-токенами
|
||
- [x] Нет 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**
|
||
|
||
- [x] Discover в трёх moods визуально различим (фон, карточки, CTA)
|
||
- [x] Soft card + CTA pattern с борда (не плоский as-is list-only)
|
||
- [x] 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**
|
||
|
||
- [x] Slot card + specialist card + primary CTA в CONTROL
|
||
- [x] Specialists остаются внутри Control (не 4-й mood)
|
||
- [x] 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**
|
||
|
||
- [x] Mock smoke: calendar → discover → bookings в 3 moods (+ IA без sidebar)
|
||
- [x] Нет регрессий IA (top + bottom nav) — покрыто mock e2e
|
||
- [x] Известные отклонения от борда зафиксированы в UI-PARITY (Known deviations)
|
||
- [x] Visual pass ×3 moods (local preview / Playwright shots) — Login / Calendar / Discover / CONTROL booking
|
||
- [x] 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](https://git.sabilin.com/EventHub/EventHubSpec/issues/11) |
|
||
| 1 | Mood system / atmosphere | [Front#25](https://git.sabilin.com/EventHub/EventHubFront/issues/25) |
|
||
| 2 | Calendar mood-chrome | [Front#26](https://git.sabilin.com/EventHub/EventHubFront/issues/26) |
|
||
| 3 | Discover mood variants | [Front#27](https://git.sabilin.com/EventHub/EventHubFront/issues/27) |
|
||
| 4 | CONTROL booking surfaces | [Front#28](https://git.sabilin.com/EventHub/EventHubFront/issues/28) |
|
||
| 5 | Polish + stage smoke | [Front#29](https://git.sabilin.com/EventHub/EventHubFront/issues/29) |
|
||
|
||
Эпик: [Spec#10](https://git.sabilin.com/EventHub/EventHubSpec/issues/10).
|
||
|
||
---
|
||
|
||
## Suggested start
|
||
|
||
Кодить с **Task 1 (Mood system / atmosphere)**: без токенов и switcher-as-cards остальные экраны будут «перекраской primary», а не mood product surface.
|