fix: avatar-decoration live-update + CDN override + profile 404; DND badge color

Avatar decorations (useAvatarDecoration.ts / ProfileDecoration.tsx):
- invalidateDecorationCache now notifies a per-user listener set (and clears the
  give-up counter), so changing your own decoration updates mounted avatars
  (timeline, member list) live instead of only after a remount. Concurrent
  re-fetches de-dupe via the existing `pending` map.
- Picker grid thumbnails use decorationUrl() instead of the raw DECORATION_CDN
  literal, so a VITE_DECORATION_CDN override no longer breaks the grid while
  real avatars work.
- Settings reads the full /profile/{userId} instead of the /{field}
  sub-resource, which 404s (console error) for anyone without a decoration set
  — matching the pattern already used by useAvatarDecoration.

Presence (Presence.tsx): PresenceBadge renders DND (unavailable + status 'dnd')
as red "Do Not Disturb" to match PresenceRingAvatar and the settings picker;
it was the lone outlier showing a yellow "Idle".

Bug-hunt findings from LOTUS_TODO. Two review agents (correctness +
upstream-behavior); gate-green (tsc, eslint, prettier, 914 tests, build). Both
flagged only pre-existing edge notes (in-flight piggyback staleness, 'dnd'
free-text collision shared with the ring avatar) — neither introduced here.

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

src/app/components/presence/Presence.tsx

@@ -27,7 +27,14 @@ type PresenceBadgeProps = {
 };
 export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
   const label = usePresenceLabel();
-  const ariaLabel = status ? `${label[presence]} — ${status}` : label[presence];
+  // DND is encoded as unavailable + status_msg 'dnd'; render it red/"Do Not
+  // Disturb" to match PresenceRingAvatar and the settings picker (which both
+  // special-case 'dnd' → Critical) — the badge was the lone outlier showing a
+  // yellow "Idle". The 'dnd' sentinel isn't surfaced as a status line.
+  const isDnd = presence === Presence.Unavailable && status === 'dnd';
+  const displayLabel = isDnd ? 'Do Not Disturb' : label[presence];
+  const displayStatus = isDnd ? undefined : status;
+  const ariaLabel = displayStatus ? `${displayLabel} — ${displayStatus}` : displayLabel;
 
   return (
     <TooltipProvider
@@ -38,9 +45,9 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
       tooltip={
         <Tooltip>
           <Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
-            <Text size="L400">{label[presence]}</Text>
-            {status && <Text size="T200">•</Text>}
-            {status && <Text size="T200">{status}</Text>}
+            <Text size="L400">{displayLabel}</Text>
+            {displayStatus && <Text size="T200">•</Text>}
+            {displayStatus && <Text size="T200">{displayStatus}</Text>}
           </Box>
         </Tooltip>
       }
@@ -50,7 +57,7 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
           aria-label={ariaLabel}
           ref={triggerRef}
           size={size}
-          variant={PresenceToColor[presence]}
+          variant={isDnd ? 'Critical' : PresenceToColor[presence]}
           fill={presence === Presence.Offline ? 'Soft' : 'Solid'}
           radii="Pill"
         />