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/pages/client/ClientLayout.tsx

@@ -49,10 +49,7 @@ export function ClientLayout({ nav, children }: ClientLayoutProps) {
             {screenSize === ScreenSize.Desktop && (
               <Line variant="Background" direction="Vertical" size="300" />
             )}
-            <BookmarksPanel
-              onClose={() => setBookmarksOpen(false)}
-              isMobile={screenSize !== ScreenSize.Desktop}
-            />
+            <BookmarksPanel onClose={() => setBookmarksOpen(false)} />
           </>
         )}
       </Box>

src/app/pages/client/sidebar/SettingsTab.tsx

@@ -9,12 +9,15 @@ import {
   PopOut,
   RectCords,
   Text,
+  Tooltip,
+  TooltipProvider,
   color,
   config,
   toRem,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
+import { stopPropagation } from '../../../utils/keyboard';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
@@ -82,12 +85,16 @@ function PresencePicker() {
             initialFocus: false,
             onDeactivate: closeMenu,
             clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+            isKeyForward: (evt: KeyboardEvent) =>
+              evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
           }}
         >
           <Menu variant="Surface" style={{ padding: config.space.S100, minWidth: toRem(210) }}>
             <Box direction="Column" gap="100">
               <Box style={{ padding: `${config.space.S100} ${config.space.S200}` }}>
-                <Text size="L400" style={{ opacity: 0.6 }}>
+                <Text size="L400" priority="300">
                   Set Status
                 </Text>
               </Box>
@@ -115,33 +122,45 @@ function PresencePicker() {
       }
     >
       {/* Presence dot sits in the bottom-right corner of SidebarItem (which is position:relative) */}
-      <button
-        type="button"
-        aria-label={`Status: ${currentOption.label}. Click to change.`}
-        onClick={(e) => {
-          e.stopPropagation();
-          setMenuAnchor(e.currentTarget.getBoundingClientRect());
-        }}
-        style={{
-          position: 'absolute',
-          bottom: 2,
-          right: 2,
-          background: 'var(--bg-surface)',
-          border: 'none',
-          borderRadius: '50%',
-          padding: 2,
-          lineHeight: 0,
-          cursor: 'pointer',
-          zIndex: 1,
-        }}
+      <TooltipProvider
+        position="Right"
+        tooltip={
+          <Tooltip>
+            <Text size="T200">{`Status: ${currentOption.label}`}</Text>
+          </Tooltip>
+        }
       >
-        <Badge
-          size="200"
-          variant={presenceVariant(presenceStatus)}
-          fill={presenceStatus === 'invisible' ? 'Soft' : 'Solid'}
-          radii="Pill"
-        />
-      </button>
+        {(triggerRef) => (
+          <button
+            type="button"
+            ref={triggerRef}
+            aria-label={`Status: ${currentOption.label}. Click to change.`}
+            onClick={(e) => {
+              e.stopPropagation();
+              setMenuAnchor(e.currentTarget.getBoundingClientRect());
+            }}
+            style={{
+              position: 'absolute',
+              bottom: 2,
+              right: 2,
+              background: color.Background.Container,
+              border: 'none',
+              borderRadius: '50%',
+              padding: 2,
+              lineHeight: 0,
+              cursor: 'pointer',
+              zIndex: 1,
+            }}
+          >
+            <Badge
+              size="200"
+              variant={presenceVariant(presenceStatus)}
+              fill={presenceStatus === 'invisible' ? 'Soft' : 'Solid'}
+              radii="Pill"
+            />
+          </button>
+        )}
+      </TooltipProvider>
     </PopOut>
   );
 }