feat: room abbreviations with hover tooltips and space inheritance (#514)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

Adds a room abbreviations feature: moderators can define term/definition
pairs in room settings. Defined terms are highlighted with a dotted
underline in messages and show a tooltip on hover (tap-to-pin on
mobile). Abbreviations defined in a parent space are inherited by child
rooms and nested spaces, with overrides allowed at each level. The
settings UI shows a flat list of inherited and locally-defined entries.

Fixes #

#### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] 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

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] 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
- [x] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [X] Fully AI generated (explain what all the generated code does in
moderate detail).

<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

The code adds changes that allow for setting and viewing room
abbreviations, with an on-hover tooltip (or press on mobile -
semi-persistent). It stores these in the room state under a new key, and
recursively fetches abbreviations from the space level. This also adds
regex so that abbreviations correctly work at word boundaries. Also adds
the needed hooks to `room.ts` and `slidingSync.ts`

Author: 7w1

.changeset/feat-room-abbreviations.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add room abbreviations with hover tooltips: moderators define term/definition pairs in room settings; matching terms are highlighted in messages.

src/app/components/message/RenderBody.tsx

@@ -1,10 +1,94 @@
+import { MouseEventHandler, useEffect, useState } from 'react';
 import parse, { HTMLReactParserOptions } from 'html-react-parser';
 import Linkify from 'linkify-react';
 import { Opts } from 'linkifyjs';
+import { PopOut, RectCords, Text, Tooltip, TooltipProvider, toRem } from 'folds';
 import { sanitizeCustomHtml } from '$utils/sanitize';
 import { highlightText, scaleSystemEmoji } from '$plugins/react-custom-html-parser';
+import { useRoomAbbreviationsContext } from '$hooks/useRoomAbbreviations';
+import { splitByAbbreviations } from '$utils/abbreviations';
 import { MessageEmptyContent } from './content';
 
+type AbbreviationTermProps = {
+  text: string;
+  definition: string;
+};
+function AbbreviationTerm({ text, definition }: AbbreviationTermProps) {
+  const [anchor, setAnchor] = useState<RectCords | undefined>();
+
+  const handleClick: MouseEventHandler<HTMLElement> = (e) => {
+    e.stopPropagation();
+    setAnchor((prev) => (prev ? undefined : e.currentTarget.getBoundingClientRect()));
+  };
+
+  // On mobile, tapping an abbreviation pins the tooltip open.
+  // Tapping anywhere else (outside the abbr) dismisses it.
+  useEffect(() => {
+    if (!anchor) return undefined;
+    const dismiss = () => setAnchor(undefined);
+    document.addEventListener('click', dismiss, { once: true });
+    return () => document.removeEventListener('click', dismiss);
+  }, [anchor]);
+
+  const tooltipContent = (
+    <Tooltip style={{ maxWidth: toRem(250) }}>
+      <Text size="T200">{definition}</Text>
+    </Tooltip>
+  );
+
+  return (
+    <>
+      <TooltipProvider position="Top" tooltip={tooltipContent}>
+        {(triggerRef) => (
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+          <abbr
+            ref={triggerRef as React.Ref<HTMLElement>}
+            onClick={handleClick}
+            style={{ textDecoration: 'underline dotted', cursor: 'help' }}
+          >
+            {text}
+          </abbr>
+        )}
+      </TooltipProvider>
+      {anchor && (
+        <PopOut anchor={anchor} position="Top" align="Center" content={tooltipContent}>
+          {null}
+        </PopOut>
+      )}
+    </>
+  );
+}
+
+/**
+ * Builds a `replaceTextNode` callback for use with {@link getReactCustomHtmlParser}.
+ * Returns `undefined` when there are no abbreviations to apply (avoids creating
+ * extra closures in the common case).
+ */
+export function buildAbbrReplaceTextNode(
+  abbrMap: Map<string, string>
+): ((text: string) => JSX.Element | undefined) | undefined {
+  if (abbrMap.size === 0) return undefined;
+  return function replaceTextNode(text: string) {
+    const segments = splitByAbbreviations(text, abbrMap);
+    if (!segments.some((s) => s.termKey !== undefined)) return undefined;
+    return (
+      <>
+        {segments.map((seg) =>
+          seg.termKey !== undefined ? (
+            <AbbreviationTerm
+              key={seg.id}
+              text={seg.text}
+              definition={abbrMap.get(seg.termKey) ?? ''}
+            />
+          ) : (
+            seg.text
+          )
+        )}
+      </>
+    );
+  };
+}
+
 type RenderBodyProps = {
   body: string;
   customBody?: string;
@@ -20,12 +104,37 @@ export function RenderBody({
   htmlReactParserOptions,
   linkifyOpts,
 }: Readonly<RenderBodyProps>) {
+  const abbrMap = useRoomAbbreviationsContext();
+
   if (customBody) {
     if (customBody === '') return <MessageEmptyContent />;
     return parse(sanitizeCustomHtml(customBody), htmlReactParserOptions);
   }
   if (body === '') return <MessageEmptyContent />;
 
+  if (abbrMap.size > 0) {
+    const segments = splitByAbbreviations(body, abbrMap);
+    if (segments.some((s) => s.termKey !== undefined)) {
+      return (
+        <>
+          {segments.map((seg) => {
+            if (seg.termKey !== undefined) {
+              const definition = abbrMap.get(seg.termKey) ?? '';
+              return <AbbreviationTerm key={seg.id} text={seg.text} definition={definition} />;
+            }
+            return (
+              <Linkify key={seg.id} options={linkifyOpts}>
+                {highlightRegex
+                  ? highlightText(highlightRegex, scaleSystemEmoji(seg.text))
+                  : scaleSystemEmoji(seg.text)}
+              </Linkify>
+            );
+          })}
+        </>
+      );
+    }
+  }
+
   return (
     <Linkify options={linkifyOpts}>
       {highlightRegex

src/app/features/room-settings/RoomSettings.tsx

@@ -19,6 +19,7 @@ import { DeveloperTools } from '$features/common-settings/developer-tools';
 import { Cosmetics } from '$features/common-settings/cosmetics/Cosmetics';
 import { Permissions } from './permissions';
 import { General } from './general';
+import { RoomAbbreviations } from './abbreviations/RoomAbbreviations';
 
 type RoomSettingsMenuItem = {
   page: RoomSettingsPage;
@@ -51,6 +52,11 @@ const useRoomSettingsMenuItems = (): RoomSettingsMenuItem[] =>
         icon: Icons.Alphabet,
         activeIcon: Icons.AlphabetUnderline,
       },
+      {
+        page: RoomSettingsPage.AbbreviationsPage,
+        name: 'Abbreviations',
+        icon: Icons.Info,
+      },
       {
         page: RoomSettingsPage.EmojisStickersPage,
         name: 'Emojis & Stickers',
@@ -196,6 +202,9 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
         {activePage === RoomSettingsPage.DeveloperToolsPage && (
           <DeveloperTools requestClose={handlePageRequestClose} />
         )}
+        {activePage === RoomSettingsPage.AbbreviationsPage && (
+          <RoomAbbreviations requestClose={handlePageRequestClose} />
+        )}
       </PageRoot>
     </SwipeableOverlayWrapper>
   );