From 44307840948689028662c03650ceca8b46cd1018 Mon Sep 17 00:00:00 2001 From: "glm5.2 agent 180" Date: Sat, 20 Jun 2026 14:03:02 +0300 Subject: [PATCH] docs: remove implemented comments-panel-density backlog plan --- docs/backlog/comments-panel-density.md | 181 ------------------------- 1 file changed, 181 deletions(-) delete mode 100644 docs/backlog/comments-panel-density.md diff --git a/docs/backlog/comments-panel-density.md b/docs/backlog/comments-panel-density.md deleted file mode 100644 index c17e569a..00000000 --- a/docs/backlog/comments-panel-density.md +++ /dev/null @@ -1,181 +0,0 @@ -# Панель комментариев: сделать плотнее (меньше воздуха, меньше шрифт) - -Статус: **план, код не менялся.** Чисто UI-задача на клиенте (CSS + пропсы -Mantine). Бэкенда, схемы данных и логики не касается. - -## Суть - -Сейчас панель комментариев (правый aside, вкладка «Comments») выглядит -разреженной: крупные отступы между карточками и внутри них, большой межстрочный -интервал, тело комментария набрано базовым размером редактора (16px). На узкой -колонке это «съедает» вертикаль — на экран помещается мало комментариев, много -пустого места. - -Хотим: **уплотнить раскладку** — уменьшить внутренние/внешние отступы карточек, -зазор «аватар ↔ текст», вертикальный ритм редактора — **и уменьшить шрифт** -тела комментария, имени автора и цитаты выделения. Цель — больше комментариев -на экран без потери читабельности. - -## Где сейчас живёт «воздух» (точные места) - -Вся вёрстка панели — в фиче `apps/client/src/features/comment/`. - -### 1. Карточка комментария — [comment-list-with-tabs.tsx](apps/client/src/features/comment/components/comment-list-with-tabs.tsx) -- `renderComments`, обёртка каждого треда (~строки 121-129): - `` — `p="sm"` (12px - внутренний отступ) и `mb="sm"` (12px зазор между комментариями). -- Разделитель перед редактором ответа (~строка 148): ``. -- Вкладки (`Tabs.Panel pt="xs"`, строки 226 и 245) и пустое состояние - (`
`, строки 228 и 247) — второстепенные источники воздуха. -- Нижнее поле ввода `PageCommentInput` (строки ~361-405): `paddingTop` = `sm`, - `paddingBottom: 25`, аватар `marginTop: 10`, кнопка отправки спозиционирована - `bottom: 30`. Эти величины связаны (плавающая кнопка над полем) — трогать - осторожно. - -### 2. Элемент комментария — [comment-list-item.tsx](apps/client/src/features/comment/components/comment-list-item.tsx) -- Внешняя обёртка (строка 119): `` — 10px снизу у каждого - элемента (включая вложенные ответы). -- Шапка «аватар ↔ контент» (строка 120): `` **без** `gap` → дефолтный - `gap="md"` (16px) между аватаром и блоком с именем/телом. Это главный - горизонтальный «воздух». -- Имя автора (строка 129): `` — 14px. -- Время (строки 157-161): уже `` (12px) — оставить. -- Цитата выделения (строка 180): `{comment?.selection}` — - 14px, внутри блока `.textSelection`. - -### 3. Стили — [comment.module.css](apps/client/src/features/comment/components/comment.module.css) -- `.textSelection` (строки 9-21): `margin-top: 4px`, `padding: 8px`. -- `.commentEditor .ProseMirror :global(.ProseMirror)` (строки 35-44): - `margin-top: 10px`, `margin-bottom: 2px`, паддинги 6px. **font-size не задан** — - тело комментария наследует глобальный - `.ProseMirror { font-size: var(--mantine-font-size-md) }` (16px) из - [core.css:10](apps/client/src/features/editor/styles/core.css#L10). -- `.wrapper` (строки 1-3) — `padding: md`, **в коде не используется** (можно - игнорировать или удалить заодно). - -### 4. Внешняя рамка панели (ВНИМАНИЕ: общая) — [aside.tsx](apps/client/src/components/layouts/global/aside.tsx) -- `` (строка 47) и шапка `` с - `` (строки 50-51) дают 16px отступа по краям панели - и под заголовком. **Этот контейнер общий для трёх вкладок** aside - (`comments` / `toc` / `details`). Менять его — значит уплотнить заодно - «Содержание» и «Детали». См. «Открытые вопросы». - -Шкалы Mantine в проекте без переопределений (`theme.ts` палитру/контраст меняет, -но не размеры): шрифт `xs=12px / sm=14px / md=16px`; spacing `xs=10 / sm=12 / -md=16`. - -## Решение (точечное, в границах фичи comment) - -Базовый объём — **только компоненты `features/comment/`**, чтобы вкладки -«Содержание»/«Детали» (общий `aside.tsx`) не задеть. Уплотнение рамки панели — -отдельный опциональный пункт (см. ниже). - -### Правки по файлам - -**`comment-list-with-tabs.tsx`** -- `<Paper>` в `renderComments`: `p="sm"` → `p="xs"`, `mb="sm"` → `mb="xs"` - (12 → 10px). `shadow="sm"`, `radius="md"`, `withBorder` — оставить. -- `<Divider my={4} />` → `my={2}`. - -**`comment-list-item.tsx`** -- `<Box ref={ref} pb="xs">` → `pb={6}`. -- Шапка `<Group>` (аватар + контент, строка 120): добавить `gap="xs"` - (дефолтные 16px → 10px). НЕ трогать внутренние `<Group justify="space-between">` - и `<Group gap="xs">`, у них зазор уже задан. -- Имя: `<Text size="sm" ...>` → `size="xs"`. `fw={500}` и `lineClamp={1}` — - оставить (см. «иерархия шрифта» ниже). -- Цитата: `<Text size="sm">{comment?.selection}</Text>` → `size="xs"`. - -**`comment.module.css`** -- В `.ProseMirror :global(.ProseMirror)` добавить - `font-size: var(--mantine-font-size-sm);` (16 → 14px) и `line-height: 1.4;`, - заменить `margin-top: 10px` → `margin-top: 4px`. Остальные декларации - (`border-radius`, `max-width`, `white-space`, `word-break`, паддинги, - `margin-bottom`) — без изменений. -- `.textSelection`: `margin-top: 4px` → `2px`, `padding: 8px` → `6px`. - -### Эскиз (ключевой фрагмент CSS) - -```css -.commentEditor { - /* ... */ - .ProseMirror :global(.ProseMirror) { - border-radius: var(--mantine-radius-sm); - max-width: 100%; - white-space: pre-wrap; - word-break: break-word; - padding-left: 6px; - padding-right: 6px; - /* Denser comments: shrink body text from the global 16px ProseMirror size - to 14px and tighten the rhythm vs. the comment header. */ - font-size: var(--mantine-font-size-sm); - line-height: 1.4; - margin-top: 4px; /* was 10px */ - margin-bottom: 2px; - } -} - -.textSelection { - margin-top: 2px; /* was 4px */ - padding: 6px; /* was 8px */ - /* ...остальное без изменений... */ -} -``` - -## Тонкие моменты / edge cases - -- **Не трогать `aside.tsx` в базовом объёме.** Его `p="md"` и шапка общие для - вкладок `toc`/`details` — правка уплотнит и их. Если это нежелательно, держать - изменения строго внутри `features/comment/`. -- **Иерархия шрифта (принято).** После правок: имя — `xs` (12px, `fw=500`), - тело — `sm` (14px), время — `xs` (12px). Тело крупнее имени — это норма - (имя/мета как «капс-лейбл», тело как основной текст). -- **`font-size` ставится на внутренний `:global(.ProseMirror)`,** т.к. размер - приходит из глобального правила `core.css`. Класс-модуль `.commentEditor` - скоупит переопределение только на редактор комментариев — основной редактор - страницы не затрагивается. -- **Тёмная тема.** Меняем только размеры/отступы, цвета берутся из токенов - Mantine — отдельной проверки палитры не требуется, но визуально глянуть стоит. -- **Вложенные ответы** рендерятся тем же `CommentListItem` → уплотнение `pb`, - `gap`, шрифтов применится и к ним автоматически (так и нужно). -- **Markdown/код в теле.** `pre`/`code`/списки внутри комментария наследуют - `font-size` от `.ProseMirror` контейнера — после `font-size: sm` они тоже - станут компактнее; проверить, что код-блоки не разъезжаются. -- **Цитата выделения кликабельна** (`role="button"`, переход к месту в тексте) — - уменьшение `padding`/`size` не должно сломать зону клика; визуально проверить. -- **Нижнее поле ввода** (`PageCommentInput`) с плавающей кнопкой: величины - `paddingBottom: 25` / `bottom: 30` связаны. В базовом объёме не трогаем; если - захотим уплотнить и его — менять обе согласованно и проверить, что кнопка - отправки не наезжает на текст. - -## Тесты / проверка - -- Прогнать `pnpm --filter client lint` и `pnpm --filter client test` - (изменения косметические — падений быть не должно). -- Ручная проверка во вкладке Comments: тред с длинным телом, тред с цитатой - выделения, вложенные ответы, режим редактирования, светлая/тёмная тема, узкая - ширина aside. Убедиться, что вкладки «Содержание»/«Детали» не изменились - (если `aside.tsx` не трогали). - -## Опционально / расширения (вне базового объёма) - -- **Уплотнить рамку панели** — `aside.tsx`: `p="md"` → `p="sm"`, шапка - `mb="md"` → `mb="sm"`. Даст ощутимо меньше воздуха по краям, **но затронет все - вкладки aside** (см. «Открытые вопросы»). -- **Компактные вкладки Tabs** — `Tabs.Panel pt="xs"` → `pt={6}`, бейджи счётчиков - уже `size="sm"`. -- **Удалить мёртвый `.wrapper`** из `comment.module.css` (не используется). -- **Уменьшить аватары** с `size="sm"` до `size="xs"` в `CommentListItem` и - `PageCommentInput` для ещё большей плотности (проверить, что инициалы/картинка - не мельчат до нечитаемости). - -## Принятые решения - -Решения зафиксированы — реализовать можно сразу, без доп. согласований: - -- **Границы правки:** строго `features/comment/`. Общую рамку aside (`p="md"`, - шапка `mb="md"`) **не трогаем** — она общая с вкладками «Содержание»/«Детали», - и правка задела бы их (см. «Опционально», если позже захотим уплотнить и их). -- **Шрифт тела:** `sm` (14px) — не мельче. -- **Иерархия:** имя `xs` (12px, `fw=500`), тело `sm` (14px), время `xs` (12px). -- **Нижнее поле ввода и размер аватаров:** оставляем как есть.