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/hooks/useAvatarDecoration.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Method } from 'matrix-js-sdk';
+import { MatrixError, Method } from 'matrix-js-sdk';
 import { useMatrixClient } from './useMatrixClient';
 
 const PROFILE_FIELD = 'io.lotus.avatar_decoration';
@@ -32,8 +32,18 @@ function fetchDecoration(
       cache.set(userId, val);
       return val;
     })
-    .catch(() => {
-      cache.set(userId, null);
+    .catch((err: unknown) => {
+      // A 404 (M_NOT_FOUND) means the field is genuinely unset → cache "no
+      // decoration". A transient failure (429 rate-limit, 5xx, network) must
+      // NOT be cached: doing so permanently hides the user's decoration for the
+      // whole session. This matters most for the member list and timeline, which
+      // mount many avatars at once and can trip homeserver rate limits — a
+      // single 429 in that burst would otherwise wipe the decoration until a
+      // full reload. Leaving the cache unset lets the next mount retry.
+      const status = err instanceof MatrixError ? err.httpStatus : undefined;
+      if (status === 404) {
+        cache.set(userId, null);
+      }
       return null;
     })
     .finally(() => {

src/app/hooks/useUserPresence.ts

@@ -53,10 +53,14 @@ export const useUserPresence = (userId: string): UserPresence | undefined => {
 
 export const usePresenceLabel = (): Record<Presence, string> =>
   useMemo(
+    // Keep this vocabulary aligned with the status setter (PresencePicker in
+    // SettingsTab.tsx): online -> "Online", unavailable -> "Idle". Previously
+    // these read "Active"/"Busy"/"Away", so a user who set "Idle" showed as
+    // "Busy" to others.
     () => ({
-      [Presence.Online]: 'Active',
-      [Presence.Unavailable]: 'Busy',
-      [Presence.Offline]: 'Away',
+      [Presence.Online]: 'Online',
+      [Presence.Unavailable]: 'Idle',
+      [Presence.Offline]: 'Offline',
     }),
     [],
   );