[page-templates] Дизайн узла page-embed: двойная рамка + дублирующиеся кнопки #39

New Issue

Ghost · 2026-06-20T20:48:21+03:00

Ghost commented

2026-06-20 20:48:21 +03:00

Дизайн узла page-embed (вставка целой страницы/шаблона) выглядит сыро. По скриншоту видно две проблемы.

1. Двойная рамка

Вокруг эмбеда рисуются две несовпадающие рамки одновременно:

Квадратная голубая — это generic-выделение ProseMirror: .ProseMirror-selectednode { outline: 2px solid #70cff8 } (apps/client/src/features/editor/styles/core.css:140). Без border-radius, т.е. прямоугольная.
Скруглённая оранжевая — собственная рамка обёртки эмбеда: .includeWrap border: 2px solid transparent, которая в состоянии hover/focus/menu-open становится цветной 2px solid (apps/client/src/features/editor/components/transclusion/transclusion.module.css:127–146). Со скруглением 8px.

Когда узел и выделен, и в фокусе/наведении — обе рисуются внахлёст, одна квадратная голубая, другая скруглённая оранжевая, со смещением → выглядит как «битые прерывистые рамки».

Что сделать: оставить ОДНУ рамку выделения. Либо подавить generic outline для pageEmbed/.includeWrap (как уже сделано outline: none для некоторых случаев в той же module.css, строка ~187), либо унифицировать выделение в один скруглённый стиль, совпадающий с рамкой обёртки. Заодно свести палитру к одному цвету (сейчас голубой #70cff8 vs оранжевый акцент).

2. Дублирующиеся кнопки

В тулбаре справа сверху и в бейдже-заголовке несколько affordance-ов, часть делает одно и то же:

Тулбар (page-embed-view.tsx:123–158): Refresh (IconRefresh), «Open source page» (IconExternalLink, ведёт на исходную страницу), ⋯-меню (Delete).
Бейдж-заголовок (page-embed-view.tsx:173–185): иконка IconArrowsMaximize (визуально читается как «развернуть/fullscreen») + заголовок как ссылка, которая тоже ведёт на исходную страницу.

Итог: «открыть в новом окне» (external link) и «развернуть» (заголовок-ссылка/иконка maximize) ведут в одно и то же место — на исходную страницу. Лишнее.

Что сделать: оставить один понятный способ открыть источник. Предложение: заголовок-ссылка ведёт на источник (это естественно), убрать дублирующую кнопку external-link ИЛИ убрать ссылочность заголовка и оставить кнопку. Иконку IconArrowsMaximize не использовать как fallback бейджа, если она читается как кнопка «развернуть», — взять нейтральную иконку «встроенной страницы».

Критерии приёмки

В любом состоянии (выделен / в фокусе / hover / просмотр read-only) у эмбеда одна аккуратная рамка, без наложения квадратной и скруглённой.
Нет двух разных контролов, ведущих на одно и то же действие (открыть источник).
Набор иконок однозначен: refresh = пересинхронизировать, «открыть источник» = один элемент, меню = вторичные действия (удалить и т.п.).
Read-only/шара: рамки выделения нет (как и сейчас), эмбед выглядит как естественный блок контента.

Файлы

apps/client/src/features/editor/components/page-embed/page-embed-view.tsx (тулбар + бейдж)
apps/client/src/features/editor/components/transclusion/transclusion.module.css (.includeWrap, .includeControls, .transclusionBadge)
apps/client/src/features/editor/styles/core.css (.ProseMirror-selectednode outline)

Замечено при ручной проверке ветки feat/page-templates (PR #17). Связано с #38 (метка шаблона в дереве).

Дизайн узла page-embed (вставка целой страницы/шаблона) выглядит сыро. По скриншоту видно две проблемы. ## 1. Двойная рамка Вокруг эмбеда рисуются **две несовпадающие рамки** одновременно: - **Квадратная голубая** — это generic-выделение ProseMirror: `.ProseMirror-selectednode { outline: 2px solid #70cff8 }` (`apps/client/src/features/editor/styles/core.css:140`). Без `border-radius`, т.е. прямоугольная. - **Скруглённая оранжевая** — собственная рамка обёртки эмбеда: `.includeWrap` `border: 2px solid transparent`, которая в состоянии hover/focus/menu-open становится цветной `2px solid` (`apps/client/src/features/editor/components/transclusion/transclusion.module.css:127–146`). Со скруглением `8px`. Когда узел и выделен, и в фокусе/наведении — обе рисуются внахлёст, одна квадратная голубая, другая скруглённая оранжевая, со смещением → выглядит как «битые прерывистые рамки». **Что сделать:** оставить ОДНУ рамку выделения. Либо подавить generic `outline` для `pageEmbed`/`.includeWrap` (как уже сделано `outline: none` для некоторых случаев в той же module.css, строка ~187), либо унифицировать выделение в один скруглённый стиль, совпадающий с рамкой обёртки. Заодно свести палитру к одному цвету (сейчас голубой #70cff8 vs оранжевый акцент). ## 2. Дублирующиеся кнопки В тулбаре справа сверху и в бейдже-заголовке несколько affordance-ов, часть делает одно и то же: - Тулбар (`page-embed-view.tsx:123–158`): Refresh (`IconRefresh`), **«Open source page»** (`IconExternalLink`, ведёт на исходную страницу), ⋯-меню (Delete). - Бейдж-заголовок (`page-embed-view.tsx:173–185`): иконка `IconArrowsMaximize` (визуально читается как «развернуть/fullscreen») + **заголовок как ссылка, которая тоже ведёт на исходную страницу**. Итог: «открыть в новом окне» (external link) и «развернуть» (заголовок-ссылка/иконка maximize) ведут в одно и то же место — на исходную страницу. Лишнее. **Что сделать:** оставить один понятный способ открыть источник. Предложение: заголовок-ссылка ведёт на источник (это естественно), убрать дублирующую кнопку external-link ИЛИ убрать ссылочность заголовка и оставить кнопку. Иконку `IconArrowsMaximize` не использовать как fallback бейджа, если она читается как кнопка «развернуть», — взять нейтральную иконку «встроенной страницы». ## Критерии приёмки - В любом состоянии (выделен / в фокусе / hover / просмотр read-only) у эмбеда **одна** аккуратная рамка, без наложения квадратной и скруглённой. - Нет двух разных контролов, ведущих на одно и то же действие (открыть источник). - Набор иконок однозначен: refresh = пересинхронизировать, «открыть источник» = один элемент, меню = вторичные действия (удалить и т.п.). - Read-only/шара: рамки выделения нет (как и сейчас), эмбед выглядит как естественный блок контента. ## Файлы - `apps/client/src/features/editor/components/page-embed/page-embed-view.tsx` (тулбар + бейдж) - `apps/client/src/features/editor/components/transclusion/transclusion.module.css` (`.includeWrap`, `.includeControls`, `.transclusionBadge`) - `apps/client/src/features/editor/styles/core.css` (`.ProseMirror-selectednode` outline) > Замечено при ручной проверке ветки `feat/page-templates` (PR #17). Связано с #38 (метка шаблона в дереве).

Ghost referenced this issue

2026-06-20 20:49:59 +03:00

[page-templates] Refresh эмбеда не обновляет контент (lag коллаб-персиста) + нужна матрица веб-тестов #40

Ghost referenced this issue from a commit

2026-06-20 21:27:00 +03:00

fix(page-templates): clean up page-embed node chrome (#39)

Ghost referenced this issue

2026-06-20 21:27:40 +03:00

fix(page-templates): tree marker (#38), embed chrome (#39), embed refresh (#40) #45

vvzvlad referenced this issue from a commit

2026-06-21 01:51:21 +03:00

Merge develop into fix/page-template-demo-issues (#45)