75 lines
5.3 KiB
Markdown
75 lines
5.3 KiB
Markdown
# Личные сообщения (messages-list) — дизайн v2
|
||
|
||
Экран ЛС — **списочная форма экрана «Связи»**: тип отношения читается через цвет
|
||
обода/ауры аватара и один правый статус. Тёмный космический фон + золотой header.
|
||
|
||
> Reference source: owner-approved chat visual reference; image asset is not yet stored in repository.
|
||
|
||
## Источник данных
|
||
- **Demo/lab:** мок `js/mock-data.js` → `directMessages` (семантические поля, цвет не хранится).
|
||
- **Прод:** те же поля придут из реальных relations (`relationFlagsForTarget` / `shineConfirmed` / `shine`).
|
||
- **Маршруты:**
|
||
- `/messages-list` — защищённый (требует сессии).
|
||
- `/messages-list/lab` — гость-демо (мок, без сети/WS, пригоден для скриншотов).
|
||
|
||
## Семантика → визуал
|
||
Решает **только** `js/pages/messages/dm-visual-resolver.js`. В данных цвет НЕ хранится.
|
||
|
||
Поля сообщения: `relationType` (contact|friend|family), `relationRole`, `isShining`,
|
||
`isConfirmed`, `hasActiveLink`, `unreadCount`, `preview`. (`toneOverride` — только для теста.)
|
||
|
||
### Цвета (значение)
|
||
| Цвет | Токен | Значение |
|
||
|------|-------|----------|
|
||
| violet | `--rel-contact` `#8C63FF` | обычный контакт (дефолт) |
|
||
| gold | `--rel-family` `#F0B82E` | семья / близкий круг / важная связь |
|
||
| celestial | `--rel-shining` `#68D8FF` | сияющий |
|
||
| emerald | `--rel-link` `#19E58A` | ТОЛЬКО активный статус «Связь» |
|
||
|
||
Обод аватара: `isShining → celestial; иначе family → gold; иначе → violet`.
|
||
**«Подтверждён» НЕ красит обод золотым** (золото = семья; подтверждение — правый статус).
|
||
|
||
### Приоритет правого статуса
|
||
`hasActiveLink → «Связь» (emerald)` > `isConfirmed → «Подтверждён» (gold shield)` > ничего.
|
||
На карточке максимум ОДИН главный статус.
|
||
|
||
### Unread
|
||
Отдельная **violet/cool сфера** (НЕ изумруд). Только при `>0`; `1–99`, далее `99+`.
|
||
Идёт после статуса, перед chevron.
|
||
|
||
## Матрица состояний (demo-мок покрывает все)
|
||
| # | relationType | shining | confirmed | link | unread | Обод | Правый статус | Бейдж |
|
||
|---|---|---|---|---|---|---|---|---|
|
||
| M01 | contact | – | ✓ | – | 0 | violet | 🛡 Подтверждён | – |
|
||
| M02 | contact | – | – | ✓ | 2 | violet | 🔗 Связь | 2 |
|
||
| M03 | contact | ✓ | – | ✓ | 5 | celestial | 🔗 Связь | 5 |
|
||
| M04 | contact | – | – | – | 0 | violet | — | – |
|
||
| M05 | family | – | ✓ | – | 0 | gold | 🛡 Подтверждён | – |
|
||
| M06 | family | – | ✓ | ✓ | 1 | gold | 🔗 Связь (приоритет link>confirmed) | 1 |
|
||
|
||
## Размеры
|
||
- Карточка: `min-height 92px`, `radius 26px`.
|
||
- Зазор списка: `8px` (flex-column).
|
||
- Аватар-обод `.dm-av`: `56px` (фото/инициалы — 50px внутри).
|
||
- Капсула «Связь»: высота `32px`, radius `16px`, изумрудный бордер, почти прозрачный fill.
|
||
- Header: grid `1fr auto 1fr` (бренд слева / title строго по центру / «+» справа), title `18px`.
|
||
|
||
## Сияющая сфера — связь с «Связями» (обязательно)
|
||
DM-сияние НЕ изобретает свой эффект, а **повторяет язык сияющего узла графа**:
|
||
- те же общие keyframes из `styles/network-graph.css`: `fg-shine-glow` (пульс box-shadow)
|
||
+ `fg-shine-halo` (дыхание ореола: scale/opacity);
|
||
- та же небесная палитра и тот же rim `rgba(150,240,255,0.62)`;
|
||
- тот же радиальный ореол (те же стопы градиента), `inset: -12px` — как у узла графа
|
||
(узел 58px ↔ аватар 56px, scale ≈ 1, отдельный масштабный коэффициент не нужен);
|
||
- `filter: blur(3.4px)` ≡ `feGaussianBlur stdDeviation="3.4"` SVG-фильтра `#fg-shine-glow`
|
||
графа. CSS-blur используется потому, что SVG-фильтр объявлен только на странице «Связи»;
|
||
- `prefers-reduced-motion` → анимации выключаются.
|
||
|
||
Разрешён только controlled scale factor; никаких отдельных hardcoded-параметров,
|
||
если они уже существуют в визуальном языке «Связей».
|
||
|
||
## Фон
|
||
Фон `.dm-screen` (`#05070A` + орбы `dm-orbs-drift`) — утверждённая база, **НЕ меняется**.
|
||
Все эффекты редизайна ограничены `.dm-*` (карточка, обод аватара, статус, бейдж, header, «+»).
|
||
Критерий: если скрыть карточки/аватары/header/nav/статусы — фон остаётся прежним.
|