Skip to content

feat: room abbreviations with hover tooltips#415

Closed
Just-Insane wants to merge 10 commits intodevfrom
feat/room-abbreviations
Closed

feat: room abbreviations with hover tooltips#415
Just-Insane wants to merge 10 commits intodevfrom
feat/room-abbreviations

Conversation

@Just-Insane
Copy link
Contributor

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

Closes #403

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)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

AI assistance level

  • None — No AI tools were used
  • Research only — AI used for research, brainstorming, or understanding existing code; no generated code included
  • AI-assisted — AI suggested code or logic that I reviewed, tested, and understand fully; I can explain every change
  • Primarily AI-generated — The majority of code was AI-generated; I have thoroughly reviewed it, verified correctness, and made it my own

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings

- 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
Contributor

Deploying with  Cloudflare Workers  Cloudflare Workers

Status Preview URL Commit Alias Updated (UTC)
✅ Deployment successful! https://pr-415-sable.raspy-dream-bb1d.workers.dev a11bdd2 pr-415 Fri, 20 Mar 2026 13:00:18 GMT

@Just-Insane
Copy link
Contributor Author

Testing indicates that this is working as expected on mobile/desktop (safari/chrome).

IMG_7553

@Just-Insane Just-Insane marked this pull request as ready for review March 20, 2026 13:32
@Just-Insane Just-Insane requested review from 7w1 and hazre as code owners March 20, 2026 13:32
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.

Ability for Rooms/Spaces to set a list of known abbreviations

1 participant