fix(ui): avatar-decoration reliability, Saved Messages + Media Gallery redesign

Avatar decorations: useAvatarDecoration cached ALL profile-field fetch
failures as "no decoration" permanently for the session. The member list
and timeline mount many avatars at once, so one rate-limited (429) burst
would wipe everyone's decoration until a full reload. Now only a genuine
404 (field unset) is cached; transient errors retry on the next mount.

Saved Messages panel — full redesign to match the canonical MembersDrawer:
- co-located BookmarksPanel.css.ts: toRem(266) + max-width:750px full-screen
  media query, replacing the old position:absolute/zIndex:100 mobile "modal"
  that had no backdrop or escape
- variant="Background" header; room avatars on each item (was a generic hash)
- priority tokens replace all raw opacity hacks; 3px borderLeft accent removed
- Escape-to-close; multi-line preview is now a proper folds Button (N38)

Media Gallery (N12): moved fixed positioning + width into MediaGallery.css.ts
using toRem(320) + a full-screen media query; border/header use config tokens;
added Escape-to-close on the panel (previously only the lightbox handled it).

Presence (SettingsTab / useUserPresence):
- N16: wrap presence-dot trigger in TooltipProvider; replace undefined
  --bg-surface with color.Background.Container
- N17: add escapeDeactivates + isKeyForward/isKeyBackward to the FocusTrap
- N19: align reader labels (usePresenceLabel) to the setter vocabulary
  (Online/Idle/Offline) so a chosen status matches the tooltip others see

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/room/MediaGallery.tsx

@@ -15,13 +15,15 @@ import {
   config,
 } from 'folds';
 import { EventType, MatrixClient, MatrixEvent, MsgType, Room } from 'matrix-js-sdk';
+import classNames from 'classnames';
 import { useNearViewport } from '../../hooks/useNearViewport';
 import { IEncryptedFile, IImageInfo, IThumbnailContent } from '../../../types/matrix/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../utils/matrix';
 import { ContainerColor } from '../../styles/ContainerColor.css';
-import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { stopPropagation } from '../../utils/keyboard';
+import * as css from './MediaGallery.css';
 
 type GalleryTab = 'image' | 'video' | 'file';
 
@@ -545,8 +547,6 @@ type MediaGalleryProps = {
 export function MediaGallery({ room, onClose }: MediaGalleryProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const screenSize = useScreenSizeContext();
-  const isMobile = screenSize === ScreenSize.Mobile;
 
   const [tab, setTab] = useState<GalleryTab>('image');
   const [loading, setLoading] = useState(false);
@@ -561,6 +561,20 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
     setLightboxIndex(null); // stale index would open wrong item in new tab's lightboxItems
   }, []);
 
+  // Escape closes the drawer — but only when the lightbox isn't open, since the
+  // lightbox has its own Escape handler that should take precedence.
+  useEffect(() => {
+    if (lightboxIndex !== null) return undefined;
+    const handleKeyDown = (evt: KeyboardEvent) => {
+      if (evt.key === 'Escape') {
+        stopPropagation(evt);
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [lightboxIndex, onClose]);
+
   const msgtype = TAB_MSGTYPES[tab];
 
   const getFilteredEvents = useCallback(
@@ -659,30 +673,11 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
   return (
     <>
       <Box
-        className={ContainerColor({ variant: 'Surface' })}
+        className={classNames(css.MediaGalleryDrawer, ContainerColor({ variant: 'Surface' }))}
         direction="Column"
-        style={{
-          position: 'fixed',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          width: isMobile ? '100%' : '320px',
-          zIndex: 500,
-          borderLeft: isMobile ? 'none' : `1px solid ${color.Surface.ContainerLine}`,
-          overflow: 'hidden',
-        }}
       >
         {/* Header */}
-        <Header
-          variant="Surface"
-          size="600"
-          style={{
-            flexShrink: 0,
-            paddingRight: config.space.S200,
-            paddingLeft: config.space.S300,
-            borderBottom: `1px solid ${color.Surface.ContainerLine}`,
-          }}
-        >
+        <Header variant="Surface" size="600" className={css.MediaGalleryHeader}>
           <Box grow="Yes" alignItems="Center" gap="200">
             <Icon size="200" src={Icons.Photo} />
             <Box grow="Yes">