perf(ui): виртуализация реестра задач и чата (@tanstack/react-virtual)

Шаг 1.3 плана production-готовности:
- TaskRegistry: виртуальные строки с динамической высотой, порог 30
- TaskChat: виртуальные сообщения, порог 100, автоскролл/scrollToMessage
- выделение/сортировка/поиск/inline-редакторы работают по полному массиву
- check/build чисто, vitest 96/96
This commit is contained in:
2026-09-07 23:46:42 +03:00
parent 667a321341
commit 6eaca79cc6
5 changed files with 495 additions and 312 deletions

View File

@@ -230,3 +230,17 @@
- Как проверялось: vitest 96/96; `npm run check` чисто; caller'ы дерева (роут /tree, MCP) — формат не изменился.
- Влияние на поиск/UX: нет.
- Подводные камни: raw CTE под PostgreSQL — при переименовании колонок tasks/forms обновить вручную (drizzle не проверяет); getRelatedTasks (граф task_relations) сознательно оставлен — кандидат на отдельный шаг.
---
## [1.3] Виртуализация списков (@tanstack/react-virtual)
- Статус: ✅ done
- Зачем: длинные реестры/чаты не рендерят тысячи DOM-узлов (Фаза 1).
- Что изменено:
- `@tanstack/react-virtual@3.14.11` в dependencies (+6-7 kB gzip).
- `client/src/components/TaskRegistry.tsx` — виртуализация строк таблицы (padding-строки в нативном tbody, динамическое измерение высоты через ResizeObserver, overscan 10, getItemKey=task.id). Порог 30 строк — меньше рендер 1:1 прежний. Массовое выделение (Shift+клик через anchorTaskId), сортировка, мгновенный клиентский поиск (инвариант), DnD колонок, inline-редакторы — работают по полному массиву, не по DOM.
- `client/src/components/TaskChat.tsx` — виртуализация сообщений (плоский список: дата-разделители + сообщения, динамическая высота, overscan 10). Порог 100 элементов. Автоскролл к новому, scrollToMessage с fallback scrollToIndex, оптимистичная отправка, реакции/опросы/вложения сохранены.
- Как проверялось: `npm run check` чисто; vitest 96/96; `npm run build` собирается.
- Влияние на поиск/UX: поиск в реестре мгновенный как и был (фильтрация до виртуализации).
- Подводные камни: в виртуальном чате дата-разделители не sticky; возможна «игра» ширин колонок реестра при table-layout:auto; уход редактируемой строки за overscan размонтирует несохранённый ввод (стандарт виртсписков). Ручная проверка в браузере: реестр с длинными значениями, чат >100 сообщений (автоскролл, скролл к ответу).