feat(web): чат Фазы 2 — лента, композер, реакции, ответы, поиск и вложения

Полноценный текстовый чат в веб-клиенте:

- стор сообщений по комнатам (кэш 200, оптимистичная отправка с nonce,
  применение всех событий Gateway, пагинация курсором, непрочитанные и
  упоминания, сброс при логауте и INVALID_SESSION);
- лента: группировка подряд идущих сообщений одного автора, разделители дат,
  разделитель «новые сообщения», подгрузка истории вверх, пустые состояния;
- разметка: жирный/курсив/код/блок кода/зачёркнутый/цитата/ссылки (только
  http(s)) и упоминания <@id> — безопасный рендер React-узлами без
  dangerouslySetInnerHTML;
- реакции чипами с подсветкой своих, быстрые эмодзи и пикер, панель действий и
  контекстное меню (ответ, реакция, закрепление, правка, удаление, копирование);
- ответы с переходом к оригиналу, inline-правка, «печатает…» с POST /typing раз
  в 3 с, пины в модалке, поиск по комнате с подсветкой и переходом;
- композер: автовысота, Enter/Shift+Enter, лимит 4000, drag&drop и скрепка
  (POST /channels/{id}/files → attachment_ids), обработка 429 с таймером и
  perm.denied с причиной, read-only без SEND_MESSAGES;
- бейджи непрочитанных и упоминаний в сайдбаре, авто-POST /ack при активном окне;
- 176 тестов Vitest (было 100), check/lint/test/build зелёные.
This commit is contained in:
2026-09-20 00:15:18 +03:00
parent b22db8f048
commit b01eb1f34c
34 changed files with 6417 additions and 52 deletions
+31
View File
@@ -173,6 +173,37 @@ body {
animation: gl-popover-in var(--duration-fast) var(--ease-out) backwards;
}
/* То же меню, но раскрывающееся вниз (действия у сообщения). */
@keyframes gl-popover-down-in {
from {
opacity: 0;
transform: translateY(-6px) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
.gl-popover-down {
transform-origin: top;
animation: gl-popover-down-in var(--duration-fast) var(--ease-out) backwards;
}
/* Подсветка сообщения, к которому перешли из поиска или от ответа. */
@keyframes gl-highlight-fade {
from {
background-color: color-mix(in oklch, var(--color-accent) 28%, transparent);
}
to {
background-color: transparent;
}
}
.gl-highlight {
animation: gl-highlight-fade 1.6s var(--ease-out) backwards;
}
/*
* Каскадное появление списка. Задержка растёт только у первых восьми
* элементов — дальше список появляется без ступенек, чтобы длинные