Skip to content

Show a visible outline on a selected Divider #364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cdinhosbc98-cell wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Show a visible outline on a selected Divider #364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .cursor/docs/design-system.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ tier to win a stacking fight (fix the portal / stacking context instead).
| hover (icon buttons) | daisyUI `btn-ghost` hover + ink `/70 → /100`; icon-reveal patterns use `opacity-0 → group-hover:opacity-100` |
| pressed | `color-mix(base-content 10%)` bg, or `active:scale-*` on touch surfaces |
| active / selected (toolbar + rows) | **`is-active` pattern**: `color-mix(primary 10%)` bg + `text-primary` (`_toolbar.scss`); TOC **`menu-active`**: opaque soft brand (`--menu-active-bg` = `color-mix(primary 14%, var(--pad-well))`, `--menu-active-fg` = `primary`, scoped to `.toc__list.menu` in `_daisyui.scss` — never `transparent` mix, never charcoal `neutral`); **`menu-focus`** stays `base-300` (scroll-spy only); nav items: `variant="primary"` |
| node selected (leaf block) | `outline: var(--focus-ring-soft); outline-offset: 2px` on `.ProseMirror-selectednode`. First use: Divider. |
| context-menu-active | `color-mix(primary 15%)` on TOC rows, `8%` on message cards — row keeps highlight while its menu is open |
| unread | `UnreadBadge` (`bg-error text-error-content rounded-full`) + `animate-badge-entry` + `RollingNumber`; count via `resolveUnreadCount` (`utils/unreadDisplay.ts`). TOC/header React-only; ProseMirror `.ha-chat-btn` widgets via `syncHeadingWidgetUnread` + `[data-unread-count]` CSS |
| pending / failed (messages) | pending = `Timestamp` pending clock (`text-base-content/40`), no dim and no motion; failed = `Timestamp` alert (`text-error`) + `MessageCard.FailedRow` with `error` ink |
Expand Down
1 change: 1 addition & 0 deletions CONTEXT.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ Shared names for docs.plus domain concepts. Architecture reviews and deepenings
- **Title write** — changing Pad title. Same persist and room relay for the pad and the Documents list. Stored Pad title is plain text, not HTML. Does not write Title. Client home: `apps/webapp/src/utils/titleWrite.ts`.
- **Block style** — the outline role of the caret block: Title, Subtitle, heading level 1–6, or Normal. Not visual size.
- **Subtitle** — a paragraph style, not a heading. It is not a TOC heading.
- **Divider** — the `horizontalRule` node in the pad. A light split inside a Section. It makes no TOC entry, heading chat or Section. Not the daisyUI `divider` class.
- **HeadingScale** — visual size by rank inside a section. Distinct from Block style. The same heading level can look larger or smaller depending on the section.
- **Heading slug trail** (`?h=`) — outline ancestry from the target heading up through each parent to Title. Not a join of every heading before the target. `id=` is the resolver.
- **Wide TOC** — the desktop outline column. Painted width ≥ 240. Wrap titles, nest, fold, Heading Chat Surface, unread, and presence live here.
Expand Down
5 changes: 5 additions & 0 deletions apps/webapp/src/styles/_prose-mirror-body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,11 @@
border: none;
border-top: 2px solid var(--color-base-300);
margin: 2rem 0;

&.ProseMirror-selectednode {
outline: var(--focus-ring-soft);
outline-offset: 2px;
}
}

.is-empty::before {
Expand Down
Loading