feat: GIF previews, room context menu, policy lists, mention pulse, collapsible messages, send animation, D&D fix

P3-5: Giphy/Tenor URL preview cards — full-width thumbnail from og:image
mxc URL, GIF badge overlay, site badge + title footer; GifCard shared by
both; BadgeGiphy (teal) and BadgeTenor (blue) CSS classes

P3-9: Policy list viewer — read-only panel in Room Settings + Space
Settings (admin/50+ PL only); enter room ID or alias; tabs for Users /
Rooms / Servers; glob pattern warning color; Ban badge; entity + reason

P5-8: Mention highlight pulse — 0.6s scale+glow keyframe on incoming
@mention messages; prefers-reduced-motion aware; only fires on new
incoming messages (isNewRef), not on history load; onAnimationEnd cleanup

P5-19: Collapsible long messages — ResizeObserver clamps text bodies
>320px with gradient fade + "Read more ↓" / "Show less ↑" button; resets
on eventId change; skips images/video/audio/file; smooth CSS transition

P5-23: Message send animation — own messages fade+scale in (0.97→1,
0.4→1 opacity, 150ms ease-out); prefers-reduced-motion aware; one-shot
via isNewRef + onAnimationEnd clear

P5-26: Room context menu — Copy Link (matrix.to URL, 1.5s Copied!
feedback), Mute with duration (15m/1h/8h/24h/indefinite, localStorage
timer key io.lotus.mute_timers), Mark as read; Icons.Link + Icons.BellMute

BUG D&D: dragCounter ref replaces fragile dragState machine — enter
increments, leave decrements (hides at 0), drop resets to 0; fixes
spurious dragleave from child element boundary crossings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/features/space-settings/SpaceSettings.tsx

@@ -17,6 +17,9 @@ import { Members } from '../common-settings/members';
 import { DeveloperTools } from '../common-settings/developer-tools';
 import { General } from './general';
 import { Permissions } from './permissions';
+import { PolicyListViewer } from '../room-settings/PolicyListViewer';
+import { usePowerLevels, readPowerLevel } from '../../hooks/usePowerLevels';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
 
 type SpaceSettingsMenuItem = {
   page: SpaceSettingsPage;
@@ -24,36 +27,47 @@ type SpaceSettingsMenuItem = {
   icon: IconSrc;
 };
 
-const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] =>
+const BASE_SPACE_MENU_ITEMS: SpaceSettingsMenuItem[] = [
+  {
+    page: SpaceSettingsPage.GeneralPage,
+    name: 'General',
+    icon: Icons.Setting,
+  },
+  {
+    page: SpaceSettingsPage.MembersPage,
+    name: 'Members',
+    icon: Icons.User,
+  },
+  {
+    page: SpaceSettingsPage.PermissionsPage,
+    name: 'Permissions',
+    icon: Icons.Lock,
+  },
+  {
+    page: SpaceSettingsPage.EmojisStickersPage,
+    name: 'Emojis & Stickers',
+    icon: Icons.Smile,
+  },
+  {
+    page: SpaceSettingsPage.DeveloperToolsPage,
+    name: 'Developer Tools',
+    icon: Icons.Terminal,
+  },
+];
+
+const SPACE_POLICY_LISTS_ITEM: SpaceSettingsMenuItem = {
+  page: SpaceSettingsPage.PolicyListsPage,
+  name: 'Policy Lists',
+  icon: Icons.NoEntry,
+};
+
+const useSpaceSettingsMenuItems = (canSeePolicyLists: boolean): SpaceSettingsMenuItem[] =>
   useMemo(
-    () => [
-      {
-        page: SpaceSettingsPage.GeneralPage,
-        name: 'General',
-        icon: Icons.Setting,
-      },
-      {
-        page: SpaceSettingsPage.MembersPage,
-        name: 'Members',
-        icon: Icons.User,
-      },
-      {
-        page: SpaceSettingsPage.PermissionsPage,
-        name: 'Permissions',
-        icon: Icons.Lock,
-      },
-      {
-        page: SpaceSettingsPage.EmojisStickersPage,
-        name: 'Emojis & Stickers',
-        icon: Icons.Smile,
-      },
-      {
-        page: SpaceSettingsPage.DeveloperToolsPage,
-        name: 'Developer Tools',
-        icon: Icons.Terminal,
-      },
-    ],
-    [],
+    () =>
+      canSeePolicyLists
+        ? [...BASE_SPACE_MENU_ITEMS, SPACE_POLICY_LISTS_ITEM]
+        : BASE_SPACE_MENU_ITEMS,
+    [canSeePolicyLists],
   );
 
 type SpaceSettingsProps = {
@@ -74,12 +88,19 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
     ? (mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined)
     : undefined;
 
+  const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
+  const myUserId = mx.getSafeUserId();
+  const myPL = readPowerLevel.user(powerLevels, myUserId);
+  // Show Policy Lists to admins (power level 50+) or creators.
+  const canSeePolicyLists = myPL >= 50 || creators.has(myUserId);
+
   const screenSize = useScreenSizeContext();
   const [activePage, setActivePage] = useState<SpaceSettingsPage | undefined>(() => {
     if (initialPage) return initialPage;
     return screenSize === ScreenSize.Mobile ? undefined : SpaceSettingsPage.GeneralPage;
   });
-  const menuItems = useSpaceSettingsMenuItems();
+  const menuItems = useSpaceSettingsMenuItems(canSeePolicyLists);
 
   const handlePageRequestClose = () => {
     if (screenSize === ScreenSize.Mobile) {
@@ -172,6 +193,9 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
       {activePage === SpaceSettingsPage.DeveloperToolsPage && (
         <DeveloperTools requestClose={handlePageRequestClose} />
       )}
+      {activePage === SpaceSettingsPage.PolicyListsPage && (
+        <PolicyListViewer requestClose={handlePageRequestClose} />
+      )}
     </PageRoot>
   );
 }