ЛС: редизайн списка (фото-аватары, галочка/значок связи у имени, попап-цепочка→профиль) + demo-чат и lab-маршрут

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 19:48:27 +03:00
parent aea6bbcb0e
commit 6904ac8b7c
13 changed files with 583 additions and 229 deletions
@@ -0,0 +1,74 @@
+# Личные сообщения (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/статусы — фон остаётся прежним.