Skip to content

feat: room abbreviations with hover tooltips#2

Merged
Just-Insane merged 12 commits intodevfrom
feat/room-abbreviations
Mar 21, 2026
Merged

feat: room abbreviations with hover tooltips#2
Just-Insane merged 12 commits intodevfrom
feat/room-abbreviations

Conversation

@Just-Insane
Copy link
Copy Markdown
Owner

@Just-Insane Just-Insane commented Mar 21, 2026

Summary

Adds the ability for room moderators to define a list of term/definition abbreviation pairs in room state. Defined terms are highlighted in plain-text messages with a hover tooltip showing the definition.

Changes

New state event: moe.sable.room.abbreviations

  • Content: { entries: [{ term: string, definition: string }] }
  • Single event (empty state key)
  • Synced for all rooms via sliding sync required state

Room settings page

  • New "Abbreviations" page in room settings modal (requires stateEvent power level)
  • Add term + definition pairs via a form
  • Remove individual entries
  • Duplicate term detection
  • Spaces can set Abbreviations for all rooms in the space

Message rendering

  • Plain-text messages: defined terms are wrapped in <abbr> elements with a tooltip showing the definition
  • HTML/formatted messages are unaffected
  • Whole-word matching (\b), case-insensitive, longest terms matched first
  • Provided via React context (RoomAbbreviationsContext) — no prop threading needed

Files changed

File Change
src/types/matrix/room.ts Add StateEvent.RoomAbbreviations
src/client/slidingSync.ts Include abbreviations in required state
src/app/state/roomSettings.ts Add RoomSettingsPage.AbbreviationsPage
src/app/utils/abbreviations.ts New — types, buildAbbreviationsMap, splitByAbbreviations
src/app/hooks/useRoomAbbreviations.ts New — hook + context
src/app/components/message/RenderBody.tsx Tooltip rendering for defined terms
src/app/features/room-settings/abbreviations/RoomAbbreviations.tsx New — settings page
src/app/features/room-settings/RoomSettings.tsx Wire in menu item + page
src/app/features/room/Room.tsx Provide abbreviations context
.changeset/feat-room-abbreviations.md Knope changeset (minor)

Ported from SableClient#415

- Add StateEvent.RoomAbbreviations ('moe.sable.room.abbreviations')
- Include abbreviations event in sliding sync required state
- Add AbbreviationsPage to RoomSettingsPage enum
- New RoomAbbreviations settings page (add/remove term+definition pairs)
- Wire page into RoomSettings.tsx menu
- New useRoomAbbreviations hook + RoomAbbreviationsContext
- Provide context in Room.tsx
- RenderBody.tsx: highlight defined terms in plain-text messages with
  TooltipProvider+abbr tooltip; HTML messages unaffected
- buildAbbreviationsMap now stores exact-case keys (no .toLowerCase())
- splitByAbbreviations regex uses 'g' flag instead of 'gi' — user-defined
  casing is matched exactly (FOSS won't match 'foss' in text)
- Word boundaries (\b) still prevent matching inside longer words
- RoomAbbreviations settings page duplicate check updated to exact match
- Add 19 unit tests covering edge cases: empty map, no-match, start/mid/end
  splits, case sensitivity, word boundaries, longest-match priority
- Revert to case-insensitive matching (gi flag, lowercase map keys) and
  update tests and duplicate-entry check accordingly
- Remove title attribute from <abbr> — was causing native browser tooltip
  to overlap with our custom TooltipProvider tooltip
- Extract AbbreviationTerm component; adds click/tap handler that pins
  the definition as a PopOut positioned above the term
  - Desktop: hover still shows tooltip via TooltipProvider
  - Mobile: tap pins the tooltip open; tap anywhere else dismisses it
    (one-shot document click listener, stopped by e.stopPropagation so
    the opening click does not immediately close it)
- Add textDecoration: 'underline dotted' and cursor: 'help' to <abbr>
  elements in AbbreviationTerm so users can see the hover indicator
- RoomAbbreviations: add isSpace prop; when true, show 'Space Abbreviations'
  / 'space-level' labels and hide the inherited-from-space section
- SpaceSettings: pass isSpace to RoomAbbreviations
- useMergedAbbreviations: drop space param; use getAllParents+roomToParentsAtom
  to traverse the full ancestor chain and subscribe to state events at every
  level (not just direct parent) via useStateEventCallback on the mx client
- Room.tsx: drop parentSpace/useSpaceOptionally — hook handles it internally
- RoomAbbreviations settings: replace two-section layout with a single flat
  list; room entries shown without badge, inherited entries show a
  'Space - <SpaceName>' chip badge; supports arbitrary nesting depth
  (mirrors the useImagePackRooms multi-level pattern)
@github-actions
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

Status Preview URL Commit Alias Updated (UTC)
✅ Deployment successful! https://pr-2-sable.justin-tech.workers.dev f720853 pr-2 Sat, 21 Mar 2026 23:35:54 GMT

@Just-Insane Just-Insane merged commit 3ed3fd0 into dev Mar 21, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant