feat: avatar decorations (P5-13)

256×256 APNG overlays from avatardecoration.com (open CORS CDN).
Stored in the user's Matrix profile as io.lotus.avatar_decoration via
MSC4133 so all Lotus Chat users see each other's decorations.

- avatarDecorations.ts: curated catalog of 110 original-IP decorations
  across 9 categories (Gaming, Cyber, Space, Fantasy, Elements,
  Japanese, Nature, Spooky, Cozy)
- useAvatarDecoration: per-user profile fetch with module-level cache
  and in-flight deduplication so concurrent renders for the same userId
  share one HTTP request
- AvatarDecoration: position:relative wrapper that overlays the APNG
  8px beyond the avatar on all sides; renders nothing when no decoration
  is set (zero cost for undecorated users)
- ProfileDecoration: scrollable grid picker in Settings → Profile,
  grouped by category with live preview; Save button appears only when
  the selection differs from what's saved
- Applied at all five avatar display sites: message timeline, members
  drawer, knock list, @mention autocomplete, notifications inbox

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

src/app/pages/client/inbox/Notifications.tsx

@@ -97,6 +97,7 @@ import {
 import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { PresenceRingAvatar } from '../../../components/presence';
+import { AvatarDecoration } from '../../../components/avatar-decoration/AvatarDecoration';
 
 type RoomNotificationsGroup = {
   roomId: string;
@@ -479,27 +480,29 @@ function RoomNotificationsGroupComp({
               <ModernLayout
                 before={
                   <AvatarBase>
-                    <PresenceRingAvatar userId={event.sender}>
-                      <Avatar size="300">
-                        <UserAvatar
-                          userId={event.sender}
-                          src={
-                            senderAvatarMxc
-                              ? (mxcUrlToHttp(
-                                  mx,
-                                  senderAvatarMxc,
-                                  useAuthentication,
-                                  48,
-                                  48,
-                                  'crop',
-                                ) ?? undefined)
-                              : undefined
-                          }
-                          alt={displayName}
-                          renderFallback={() => <Icon size="200" src={Icons.User} filled />}
-                        />
-                      </Avatar>
-                    </PresenceRingAvatar>
+                    <AvatarDecoration userId={event.sender}>
+                      <PresenceRingAvatar userId={event.sender}>
+                        <Avatar size="300">
+                          <UserAvatar
+                            userId={event.sender}
+                            src={
+                              senderAvatarMxc
+                                ? (mxcUrlToHttp(
+                                    mx,
+                                    senderAvatarMxc,
+                                    useAuthentication,
+                                    48,
+                                    48,
+                                    'crop',
+                                  ) ?? undefined)
+                                : undefined
+                            }
+                            alt={displayName}
+                            renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+                          />
+                        </Avatar>
+                      </PresenceRingAvatar>
+                    </AvatarDecoration>
                   </AvatarBase>
                 }
               >