5.3 KiB
Личные сообщения (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, radius16px, изумрудный бордер, почти прозрачный fill. - Header: grid
1fr auto 1fr(бренд слева / title строго по центру / «+» справа), title18px.
Сияющая сфера — связь с «Связями» (обязательно)
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/статусы — фон остаётся прежним.