Enable native HTTP for Capacitor.

Route mobile fetch requests through Capacitor's native network bridge to support redirected collectible catalog downloads.

.gitea/workflows/trigger-mobile.yml

@@ -0,0 +1,53 @@
+name: Trigger cinny-mobile
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  dispatch:
+    runs-on: ubuntu-latest
+    if: ${{ !contains(github.event.head_commit.message || '', '[skip mobile]') }}
+    steps:
+      - name: Dispatch update-submodule on cinny-mobile
+        env:
+          # Prefer a PAT with write:repository on cinny-mobile (secret: ACTIONS_TOKEN).
+          # Default GITHUB_TOKEN is usually scoped to this repo only.
+          ACTIONS_TOKEN: ${{ secrets.ACTIONS_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          API_BASE: ${{ github.server_url }}/api/v1
+          CINNY_SHA: ${{ github.sha }}
+        run: |
+          set -euo pipefail
+
+          TOKEN="${ACTIONS_TOKEN:-${GITHUB_TOKEN:-}}"
+          if [ -z "${TOKEN}" ]; then
+            echo "No ACTIONS_TOKEN/GITHUB_TOKEN available to dispatch cinny-mobile"
+            exit 1
+          fi
+
+          BODY=$(jq -n \
+            --arg ref "master" \
+            --arg sha "${CINNY_SHA}" \
+            '{ref: $ref, inputs: {cinny_sha: $sha}}')
+
+          echo "Dispatching litruv/cinny-mobile update-submodule.yml for ${CINNY_SHA}"
+          HTTP_CODE=$(curl -sS -o /tmp/dispatch-body.txt -w "%{http_code}" \
+            -X POST \
+            -H "Authorization: token ${TOKEN}" \
+            -H "Content-Type: application/json" \
+            -d "${BODY}" \
+            "${API_BASE}/repos/litruv/cinny-mobile/actions/workflows/update-submodule.yml/dispatches?return_run_details=true")
+
+          echo "HTTP ${HTTP_CODE}"
+          cat /tmp/dispatch-body.txt || true
+          echo
+
+          case "${HTTP_CODE}" in
+            200|201|204) echo "Dispatch accepted" ;;
+            *)
+              echo "Dispatch failed"
+              exit 1
+              ;;
+          esac

.gitignore

@@ -4,4 +4,5 @@ node_modules
 devAssets
 
 .DS_Store
-.idea
+.idea
+.cache

capacitor.config.json

@@ -7,6 +7,9 @@
     "LocalNotifications": {
       "smallIcon": "ic_stat_paarrot",
       "iconColor": "#FF8A00"
+    },
+    "CapacitorHttp": {
+      "enabled": true
     }
   }
 }

docs/API-QUICKSTART.md

@@ -55,6 +55,13 @@ curl -X POST http://127.0.0.1:33384/message/current \
 | `/channels` | GET | Get list of rooms |
 | `/channel` | POST | Switch to a room |
 | `/message/current` | POST | Send message to current room |
+| `/room/current` | GET | Get current room info |
+| `/messages/groups` | GET | Last N messages across groups (`?limit=10`) |
+| `/messages/dms` | GET | Last N messages across DMs (`?limit=10`) |
+| `/messages/combined` | GET | Last N messages across groups + DMs (`?limit=10`) |
+| `/unreads/groups` | GET | Unread group conversations |
+| `/unreads/dms` | GET | Unread DM conversations |
+| `/unreads/combined` | GET | Unread groups + DMs |
 
 ## 🎮 Stream Deck Integration
 

docs/API.md

@@ -280,6 +280,123 @@ Get information about the currently active room.
 
 ---
 
+### Get Recent Messages (Groups)
+
+Get the most recent messages across joined group channels (non-DMs).
+
+**Endpoint**: `GET /messages/groups`
+
+**Query Parameters**:
+- `limit` (optional) — number of messages to return (1–100, default `10`)
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "scope": "groups",
+    "limit": 10,
+    "count": 2,
+    "messages": [
+      {
+        "eventId": "$event1",
+        "roomId": "!abc123:matrix.org",
+        "roomName": "General",
+        "isDirect": false,
+        "sender": "@alice:matrix.org",
+        "senderName": "Alice",
+        "timestamp": 1710000000000,
+        "msgtype": "m.text",
+        "body": "Hello!"
+      }
+    ]
+  }
+}
+```
+
+---
+
+### Get Recent Messages (DMs)
+
+Get the most recent messages across joined direct messages.
+
+**Endpoint**: `GET /messages/dms`
+
+**Query Parameters**:
+- `limit` (optional) — number of messages to return (1–100, default `10`)
+
+**Response**: same shape as groups, with `"scope": "dms"`.
+
+---
+
+### Get Recent Messages (Combined)
+
+Get the most recent messages across groups and DMs together.
+
+**Endpoint**: `GET /messages/combined`
+
+**Query Parameters**:
+- `limit` (optional) — number of messages to return (1–100, default `10`)
+
+**Response**: same shape as groups, with `"scope": "combined"`.
+
+---
+
+### Get Unread Conversations (Groups)
+
+List joined group channels that currently have unread activity.
+
+**Endpoint**: `GET /unreads/groups`
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "scope": "groups",
+    "count": 1,
+    "unreads": [
+      {
+        "roomId": "!abc123:matrix.org",
+        "name": "General",
+        "isDirect": false,
+        "avatar": "mxc://matrix.org/abc123",
+        "total": 3,
+        "highlight": 1,
+        "latest": {
+          "eventId": "$event1",
+          "sender": "@alice:matrix.org",
+          "senderName": "Alice",
+          "timestamp": 1710000000000,
+          "msgtype": "m.text",
+          "body": "Hello!"
+        }
+      }
+    ]
+  }
+}
+```
+
+Muted rooms are excluded. Sorted by latest activity, then highlight/total counts.
+
+---
+
+### Get Unread Conversations (DMs)
+
+**Endpoint**: `GET /unreads/dms`
+
+**Response**: same shape as groups, with `"scope": "dms"`.
+
+---
+
+### Get Unread Conversations (Combined)
+
+**Endpoint**: `GET /unreads/combined`
+
+**Response**: same shape as groups, with `"scope": "combined"`.
+
+---
+
 ## Error Responses
 
 All endpoints return error responses in the following format:

docs/README.md

@@ -62,6 +62,7 @@ New feature? Copy [`handoff/TEMPLATE.md`](./handoff/TEMPLATE.md) into `handoff/f
 | Sub-rooms | [sub-rooms](./handoff/features/sub-rooms/HANDOFF.md) |
 | Lobby (space card view) | [lobby-forums](./handoff/features/lobby-forums/HANDOFF.md) |
 | Forum spaces (post feed UI) | [forum](./handoff/features/forum/HANDOFF.md) |
+| Room App UI (bot-driven) | [room-app-ui](./handoff/features/room-app-ui/HANDOFF.md) |
 
 ### Settings & customization
 

docs/handoff/features/local-api/HANDOFF.md

@@ -50,6 +50,12 @@ No persistent storage. Actions read/write ephemeral app state (current room, cal
 | `send-message` | `{ roomId, message }` | send result |
 | `send-message-current` | `{ message }` | send to active room |
 | `get-current-room` | — | current room id |
+| `get-messages-groups` | `{ limit? }` | recent messages across group channels |
+| `get-messages-dms` | `{ limit? }` | recent messages across DMs |
+| `get-messages-combined` | `{ limit? }` | recent messages across groups + DMs |
+| `get-unreads-groups` | — | unread group conversations |
+| `get-unreads-dms` | — | unread DM conversations |
+| `get-unreads-combined` | — | unread groups + DMs |
 
 ## Dependencies
 

docs/handoff/features/room-app-ui/HANDOFF.md

@@ -0,0 +1,93 @@
+# Room App UI — handoff
+
+## Summary
+
+Bots can publish a declarative UI into Matrix room state (`im.paarrot.ui`). Paarrot takes over the room view with that UI. User interactions are sent as timeline events (`im.paarrot.ui.action`), not chat messages. The bot updates state to re-render panels.
+
+## User-facing behavior
+
+- When a room has a valid `im.paarrot.ui` state event, opening the room shows the app UI instead of the chat timeline (forum rooms still win over app UI).
+- **Show chat** returns to the normal timeline without clearing bot state; a banner offers **Show app** to go back.
+- Action events are hidden from the chat timeline (same as confetti relay events).
+- Room settings → Permissions includes **Set Room App UI** and **Send Room App Actions**.
+
+## Architecture
+
+```
+Bot → state im.paarrot.ui
+  → Room.tsx detects via useStateEvent
+    → RoomAppView → RoomAppSchema (declarative nodes)
+      → user clicks → mx.sendEvent(im.paarrot.ui.action)
+        → Bot updates im.paarrot.ui → live re-render
+```
+
+## Key files
+
+| Path | Role |
+|------|------|
+| `cinny/src/types/matrix/room.ts` | `StateEvent.PaarrotUi`, `MessageEvent.PaarrotUiAction`, node types |
+| `cinny/src/app/utils/room.ts` | `getPaarrotUiContent`, `hasRoomAppUi` |
+| `cinny/src/app/features/room/Room.tsx` | Takeover branch + Show chat / Show app |
+| `cinny/src/app/features/room-app/` | `RoomAppView`, schema renderer, CSS sanitize/scope |
+| `cinny/src/app/features/room/RoomTimeline.tsx` | Hides `im.paarrot.ui.action` |
+| `cinny/src/app/features/room-settings/permissions/usePermissionItems.ts` | Permission labels |
+
+## Data model
+
+| Event | Kind | Content |
+|-------|------|---------|
+| `im.paarrot.ui` | state (`""`) | `{ version, title?, css?, root }` |
+| `im.paarrot.ui.action` | timeline | `{ action, component_id, value?, values?, ui_event_id? }` |
+
+See [samples/](./samples/) for pasteable Developer Tools payloads.
+
+MVP node types: `panel`, `row`, `text`, `button`, `input`, `select`, `image`, `spacer`.
+
+## Dependencies
+
+- folds UI primitives
+- matrix-js-sdk `sendEvent` / state sync
+- No bot-supplied JavaScript; CSS is sanitized and scoped under `[data-room-app]`
+
+## Integration points
+
+- Same room takeover pattern as forums (`Room.tsx` branch)
+- Developer Tools can send state/events for demos without a bot process
+
+## Testing
+
+### Manual
+
+1. In Developer Tools → Send State Event, type `im.paarrot.ui`, paste `samples/trivia-ui-state.json`.
+2. Open the room — app UI should replace the timeline.
+3. Click an answer — an `im.paarrot.ui.action` event is sent (hidden in timeline; visible in raw/dev tools).
+4. Click **Show chat**, then **Show app**.
+5. Clear state content / redact state to restore normal chat.
+
+### Automated
+
+- None yet
+
+## Known issues & gotchas
+
+- CSS scoping is best-effort, not a full CSS parser
+- Images allow `mxc://`, `https://`, and `http://` only
+- Forum rooms take priority over app UI
+- `sendEvent(..., as any)` cast mirrors other custom event types
+
+## Future work
+
+- `form` / `tabs` / `markdown` / `progress` nodes
+- Bot SDK helpers
+- Stronger CSS sandbox (Shadow DOM)
+- Encrypt custom action payloads helpers if needed
+
+## Related docs
+
+- [samples/trivia-ui-state.json](./samples/trivia-ui-state.json)
+- [samples/ui-action-event.json](./samples/ui-action-event.json)
+
+## Add your extra things here
+
+- Power level: bots need PL ≥ `state_default` (usually 50) or an explicit level for `im.paarrot.ui`
+- Action events use normal message event power levels unless overridden for `im.paarrot.ui.action`

docs/handoff/features/room-app-ui/samples/poll-ui-state.json

@@ -0,0 +1,34 @@
+{
+  "version": 1,
+  "title": "Poll Booth",
+  "root": {
+    "type": "panel",
+    "id": "poll",
+    "children": [
+      {
+        "type": "text",
+        "id": "prompt",
+        "text": "Where should we go for lunch?"
+      },
+      {
+        "type": "select",
+        "id": "choice",
+        "name": "choice",
+        "label": "Your vote",
+        "options": [
+          { "label": "Ramen", "value": "ramen" },
+          { "label": "Pizza", "value": "pizza" },
+          { "label": "Salad", "value": "salad" }
+        ],
+        "value": "ramen"
+      },
+      {
+        "type": "button",
+        "id": "vote",
+        "label": "Submit vote",
+        "action": "vote",
+        "variant": "Primary"
+      }
+    ]
+  }
+}

docs/handoff/features/room-app-ui/samples/trivia-ui-state.json

@@ -0,0 +1,88 @@
+{
+  "version": 1,
+  "title": "Trivia Night",
+  "css": ".score { font-weight: 700; } .hint { opacity: 0.75; }",
+  "root": {
+    "type": "panel",
+    "id": "main",
+    "children": [
+      {
+        "type": "text",
+        "id": "q",
+        "text": "Capital of France?"
+      },
+      {
+        "type": "text",
+        "id": "hint",
+        "className": "hint",
+        "text": "Pick one answer below."
+      },
+      {
+        "type": "spacer",
+        "id": "sp1",
+        "size": 16
+      },
+      {
+        "type": "row",
+        "id": "answers",
+        "children": [
+          {
+            "type": "button",
+            "id": "a",
+            "label": "Paris",
+            "action": "answer",
+            "value": "paris",
+            "variant": "Primary"
+          },
+          {
+            "type": "button",
+            "id": "b",
+            "label": "Lyon",
+            "action": "answer",
+            "value": "lyon",
+            "variant": "Secondary"
+          },
+          {
+            "type": "button",
+            "id": "c",
+            "label": "Marseille",
+            "action": "answer",
+            "value": "marseille",
+            "variant": "Secondary"
+          }
+        ]
+      },
+      {
+        "type": "spacer",
+        "id": "sp2",
+        "size": 24
+      },
+      {
+        "type": "text",
+        "id": "score_label",
+        "className": "score",
+        "text": "Score: 0"
+      },
+      {
+        "type": "input",
+        "id": "nick",
+        "name": "nickname",
+        "label": "Display name on the board",
+        "placeholder": "Optional nickname"
+      },
+      {
+        "type": "row",
+        "id": "submit_row",
+        "children": [
+          {
+            "type": "button",
+            "id": "join",
+            "label": "Join board",
+            "action": "join",
+            "variant": "Success"
+          }
+        ]
+      }
+    ]
+  }
+}

docs/handoff/features/room-app-ui/samples/ui-action-event.json

@@ -0,0 +1,9 @@
+{
+  "action": "answer",
+  "component_id": "a",
+  "value": "paris",
+  "values": {
+    "nickname": "Ada"
+  },
+  "ui_event_id": "$REPLACE_WITH_CURRENT_im.paarrot.ui_EVENT_ID"
+}

package.json

@@ -9,12 +9,13 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "vite build",
+    "build": "node scripts/generate-update-manifest.mjs && vite build",
     "lint": "yarn check:eslint && yarn check:prettier",
     "check:eslint": "eslint src/*",
     "check:prettier": "prettier --check .",
     "fix:prettier": "prettier --write .",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "playground": "vite"
   },
   "keywords": [],
   "author": "Ajay Bura",
@@ -83,8 +84,10 @@
     "react-error-boundary": "6.1.2",
     "react-google-recaptcha": "3.1.0",
     "react-i18next": "17.0.8",
+    "react-markdown": "10.1.0",
     "react-range": "1.10.0",
     "react-router-dom": "7.18.1",
+    "remark-gfm": "4.0.1",
     "sanitize-html": "2.17.5",
     "slate": "0.124.1",
     "slate-dom": "0.124.1",
@@ -94,6 +97,7 @@
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
+    "@monaco-editor/react": "4.7.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",
     "@types/chroma-js": "3.1.2",
@@ -117,6 +121,7 @@
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.1.1",
+    "monaco-editor": "0.52.2",
     "prettier": "3.9.4",
     "typescript": "6.0.3",
     "vite": "8.1.3",

playground-liveTsxPlugin.ts

@@ -0,0 +1,149 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import type { Plugin, ViteDevServer } from 'vite';
+
+export type LiveTsxApi = {
+  getSource: () => string;
+  setSource: (source: string) => void;
+};
+
+const ALLOWED_PREFIXES = ['src/app/components/', 'src/app/features/'];
+
+function resolveAppSourceFile(projectRoot: string, relPath: string): string | null {
+  const normalized = relPath.replace(/\\/g, '/').replace(/^\/+/, '');
+  if (normalized.includes('..') || path.isAbsolute(normalized)) return null;
+  if (!ALLOWED_PREFIXES.some((p) => normalized.startsWith(p))) return null;
+  if (!/\.(tsx|ts)$/.test(normalized)) return null;
+  const abs = path.resolve(projectRoot, normalized);
+  const root = path.resolve(projectRoot);
+  if (!abs.startsWith(root + path.sep) && abs !== root) return null;
+  return abs;
+}
+
+function readBody(req: NodeJS.ReadableStream): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const chunks: Buffer[] = [];
+    req.on('data', (c) => chunks.push(c));
+    req.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
+    req.on('error', reject);
+  });
+}
+
+function bumpLivePreview(server: ViteDevServer | undefined) {
+  if (!server) return;
+  server.ws.send({
+    type: 'custom',
+    event: 'playground:live-updated',
+    data: { revision: Date.now() },
+  });
+}
+
+export function liveTsxPlugin(projectRoot: string, initialSource: string): Plugin {
+  const liveFile = path.resolve(projectRoot, '.cache/playground-live.tsx');
+
+  fs.mkdirSync(path.dirname(liveFile), { recursive: true });
+  fs.writeFileSync(liveFile, initialSource, 'utf8');
+
+  let source = initialSource;
+  let server: ViteDevServer | undefined;
+
+  const api: LiveTsxApi = {
+    getSource: () => source,
+    setSource: (next) => {
+      source = next;
+      fs.writeFileSync(liveFile, next, 'utf8');
+      if (!server) return;
+      for (const m of server.moduleGraph.urlToModuleMap.values()) {
+        if (m.file === liveFile) server.moduleGraph.invalidateModule(m);
+      }
+      const byId = server.moduleGraph.getModuleById(liveFile);
+      if (byId) server.moduleGraph.invalidateModule(byId);
+      bumpLivePreview(server);
+    },
+  };
+
+  return {
+    name: 'playground-live-tsx',
+    configureServer(devServer) {
+      server = devServer;
+      (devServer as ViteDevServer & { playgroundLive?: LiveTsxApi }).playgroundLive = api;
+
+      devServer.middlewares.use('/__playground/live', (req, res, next) => {
+        if (req.method === 'GET') {
+          res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+          res.end(source);
+          return;
+        }
+        if (req.method === 'POST') {
+          void readBody(req).then((body) => {
+            api.setSource(body);
+            res.statusCode = 204;
+            res.end();
+          });
+          return;
+        }
+        next();
+      });
+
+      // Read/write real Cinny component sources (strings, markup, etc.).
+      devServer.middlewares.use('/__playground/source', (req, res, next) => {
+        const url = new URL(req.url ?? '', 'http://playground.local');
+        const rel = url.searchParams.get('path') ?? '';
+        const abs = resolveAppSourceFile(projectRoot, rel);
+        if (!abs) {
+          res.statusCode = 400;
+          res.end('Invalid or disallowed path');
+          return;
+        }
+
+        if (req.method === 'GET') {
+          if (!fs.existsSync(abs)) {
+            res.statusCode = 404;
+            res.end('Not found');
+            return;
+          }
+          res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+          res.end(fs.readFileSync(abs, 'utf8'));
+          return;
+        }
+
+        if (req.method === 'POST') {
+          void readBody(req).then((body) => {
+            fs.mkdirSync(path.dirname(abs), { recursive: true });
+            fs.writeFileSync(abs, body, 'utf8');
+            const mod =
+              server?.moduleGraph.getModuleById(abs) ??
+              [...(server?.moduleGraph.urlToModuleMap.values() ?? [])].find((m) => m.file === abs);
+            if (mod && server) server.moduleGraph.invalidateModule(mod);
+            bumpLivePreview(server);
+            res.statusCode = 204;
+            res.end();
+          });
+          return;
+        }
+
+        next();
+      });
+    },
+    resolveId(id) {
+      const clean = id.split('?')[0];
+      if (
+        clean === '/@playground/live.tsx' ||
+        clean === 'virtual:playground-live' ||
+        clean.endsWith('/.cache/playground-live.tsx')
+      ) {
+        return liveFile;
+      }
+      return undefined;
+    },
+  };
+}
+
+export function readDefaultLiveSource(projectRoot: string): string {
+  return fs.readFileSync(path.join(projectRoot, 'src/playground/defaultLive.tsx'), 'utf8');
+}
+
+export function projectRootDir(): string {
+  return path.dirname(fileURLToPath(import.meta.url));
+}

playground.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Component Playground</title>
+  </head>
+  <body style="margin:0;background:#0f1115;color:#e8eaed">
+    <div id="root"></div>
+    <script type="module" src="./src/playground/main.tsx?v=react-dedupe-1"></script>
+  </body>
+</html>

public/update/4.11.175.md

@@ -0,0 +1,16 @@
+---
+version: 4.11.175
+title: Stability & polish
+date: 2026-08-10
+summary: Desktop update flow improvements and UI refinements.
+---
+
+## Desktop updates
+
+- Smoother download and install flow in the title bar updater.
+- Better handling when an update is already downloading.
+
+## UI polish
+
+- Refined spacing and contrast in settings panels.
+- Improved mobile layout for room headers and notifications.

public/update/4.11.177.md

@@ -0,0 +1,22 @@
+---
+version: 4.11.177
+title: Profile colors & banners
+date: 2026-08-23
+summary: Username colors now follow MSC4522 with separate dark and light theme pickers.
+---
+
+## Profile colors (MSC4522)
+
+Username colors are now stored on your Matrix profile instead of inside avatar images. In turn **will need to be updated in your Account settings**, this is now cross compatible with Element + Cinny
+
+- Set **separate colors for dark and light themes** in Settings → Account → Profile.
+- Per-room username overrides are read from member profile data when available.
+
+![Paarrot](./images/usernamecolors.png)
+
+## Profile banners (MSC4133)
+
+Profile banners now live on your Matrix profile via `m.banner_url` (MSC4133), not embedded in avatar metadata.
+
+- Upload or remove a banner independently from your avatar.
+- Other clients that support MSC4133 can read your banner directly.

public/update/currentupdate.md

@@ -0,0 +1,22 @@
+---
+version: 4.11.185
+title: Discord collectibles
+date: 2026-08-24
+summary: Add Discord-style profile effects, nameplates, and avatar decorations to Paarrot profiles.
+---
+
+## Discord collectibles
+
+- Browse and apply profile effects, animated nameplates, and avatar decorations in Settings → Account → Profile.
+- Collectible assets are uploaded to your Matrix profile, so other Paarrot users can see them without Discord.
+- The catalog now comes from a public git, and no Discord token is required in Paarrot for the cosmetics.
+- Profile-effect previews play their intro and loop animations, with a mini profile preview for each effect.
+
+
+![Discord Cosmetics 1](./images/discordcosmetics1.png) ![Discord Cosmetics 2](./images/discordcosmetics2.png)
+
+## Profile presentation
+
+- Avatar decorations render in messages, profile cards, and the bottom sidebar avatar.
+- Nameplates to the right of messages, beneath timestamps and can be displayed behind the bottom sidebar avatar with opacity settings.
+- Customize the sidebar nameplate opacity in Settings → General → Collectibles.

public/update/manifest.json

@@ -0,0 +1,11 @@
+{
+  "current": "currentupdate.md",
+  "older": [
+    {
+      "file": "4.11.175.md",
+      "version": "4.11.175",
+      "title": "Stability & polish",
+      "date": "2026-08-10"
+    }
+  ]
+}

scripts/generate-update-manifest.mjs

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+/**
+ * Regenerates public/update/manifest.json from markdown files.
+ *
+ * - currentupdate.md is always the "current" entry
+ * - Other *.md files matching X.Y.Z.md become "older" (sorted newest first)
+ * - title, date, version come from YAML frontmatter when present
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, '..');
+const UPDATE_DIR = path.join(ROOT, 'public', 'update');
+const MANIFEST_PATH = path.join(UPDATE_DIR, 'manifest.json');
+const CURRENT_FILE = 'currentupdate.md';
+const VERSION_FILE_RE = /^(\d+\.\d+\.\d+)\.md$/;
+
+const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
+
+function parseFrontmatter(source) {
+  const match = FRONTMATTER_RE.exec(source.trimStart());
+  if (!match) return {};
+
+  const frontmatter = {};
+  match[1].split('\n').forEach((line) => {
+    const colon = line.indexOf(':');
+    if (colon <= 0) return;
+    const key = line.slice(0, colon).trim();
+    const raw = line.slice(colon + 1).trim();
+    frontmatter[key] = raw.replace(/^['"]|['"]$/g, '');
+  });
+  return frontmatter;
+}
+
+function compareVersions(a, b) {
+  const pa = a.split('.').map((part) => Number.parseInt(part, 10));
+  const pb = b.split('.').map((part) => Number.parseInt(part, 10));
+  const len = Math.max(pa.length, pb.length);
+
+  for (let i = 0; i < len; i += 1) {
+    const na = pa[i] ?? 0;
+    const nb = pb[i] ?? 0;
+    if (na !== nb) return nb - na;
+  }
+  return 0;
+}
+
+function readMarkdownMeta(fileName) {
+  const filePath = path.join(UPDATE_DIR, fileName);
+  const source = fs.readFileSync(filePath, 'utf8');
+  const frontmatter = parseFrontmatter(source);
+  const versionFromName = VERSION_FILE_RE.exec(fileName)?.[1];
+
+  return {
+    file: fileName,
+    version: frontmatter.version ?? versionFromName,
+    title: frontmatter.title,
+    date: frontmatter.date,
+  };
+}
+
+function buildManifest() {
+  if (!fs.existsSync(UPDATE_DIR)) {
+    throw new Error(`Update directory not found: ${UPDATE_DIR}`);
+  }
+
+  const currentPath = path.join(UPDATE_DIR, CURRENT_FILE);
+  if (!fs.existsSync(currentPath)) {
+    throw new Error(`Missing ${CURRENT_FILE} in ${UPDATE_DIR}`);
+  }
+
+  const older = fs
+    .readdirSync(UPDATE_DIR, { withFileTypes: true })
+    .filter((entry) => entry.isFile() && VERSION_FILE_RE.test(entry.name))
+    .map((entry) => readMarkdownMeta(entry.name))
+    .filter((entry) => entry.version)
+    .sort((a, b) => compareVersions(a.version, b.version));
+
+  return {
+    current: CURRENT_FILE,
+    older: older.map(({ file, version, title, date }) => {
+      const item = { file };
+      if (version) item.version = version;
+      if (title) item.title = title;
+      if (date) item.date = date;
+      return item;
+    }),
+  };
+}
+
+function main() {
+  const manifest = buildManifest();
+  const json = `${JSON.stringify(manifest, null, 2)}\n`;
+
+  let previous = null;
+  if (fs.existsSync(MANIFEST_PATH)) {
+    previous = fs.readFileSync(MANIFEST_PATH, 'utf8');
+  }
+
+  if (previous === json) {
+    console.log('[update-manifest] manifest.json is already up to date');
+    return;
+  }
+
+  fs.writeFileSync(MANIFEST_PATH, json, 'utf8');
+  console.log(
+    `[update-manifest] wrote manifest.json (${manifest.older.length} older version(s))`
+  );
+}
+
+main();

src/app/components/AccountDataEditor.tsx

@@ -1,5 +1,5 @@
 import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Text, IconButton, Input, Button, TextAreaComponent as TextArea, color, Spinner, Chip, Scroll, config } from 'folds';
+import { Box, Text, IconButton, Input, Button, TextArea, color, Spinner, Chip, Scroll, config } from 'folds';
 import { Icon, Icons } from './icons';
 import { MatrixError } from 'matrix-js-sdk';
 import { Cursor } from '../plugins/text-area';
@@ -154,7 +154,7 @@ function AccountDataEdit({
         <Box shrink="No">
           <Text size="L400">JSON Content</Text>
         </Box>
-        <TextAreaComponent
+        <TextArea
           ref={textAreaRef}
           name="contentTextArea"
           style={{

src/app/components/Modal500.tsx

@@ -1,7 +1,9 @@
 import React, { ReactNode, useCallback, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
+import { useAtomValue } from 'jotai';
 import { Modal, Overlay, OverlayBackdrop, OverlayCenter, PopOutContainerProvider } from 'folds';
 import { stopPropagation } from '../utils/keyboard';
+import { releaseNotesDialogAtom } from '../state/releaseNotes';
 
 type Modal500Props = {
   requestClose: () => void;
@@ -10,11 +12,13 @@ type Modal500Props = {
 export function Modal500({ requestClose, children }: Modal500Props) {
   const [modalEl, setModalEl] = useState<HTMLDivElement | null>(null);
   const modalRef = useCallback((el: HTMLDivElement | null) => setModalEl(el), []);
+  const releaseNotesOpen = useAtomValue(releaseNotesDialogAtom).open;
 
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
       <OverlayCenter>
         <FocusTrap
+          active={!releaseNotesOpen}
           focusTrapOptions={{
             initialFocus: false,
             clickOutsideDeactivates: true,

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Box, Button, Chip, Header, IconButton, Input, Menu, PopOut, RectCords, Scroll, Spinner, Text, as, config } from 'folds';
 import { Icon, Icons } from '../icons';
 import FocusTrap from 'focus-trap-react';
-import FileSaver from 'file-saver';
+import { saveMediaBlob } from '../../utils/saveMedia';
 import * as css from './PdfViewer.css';
 import { AsyncStatus } from '../../hooks/useAsyncCallback';
 import { useZoom } from '../../hooks/useZoom';
@@ -61,8 +61,14 @@ export const PdfViewer = as<'div', PdfViewerProps>(
       }
     }, [docState, pageNo, zoom]);
 
-    const handleDownload = () => {
+    const handleDownload = async () => {
-      FileSaver.saveAs(src, name);
+      try {
+        const res = await fetch(src);
+        if (!res.ok) throw new Error('Failed to fetch PDF');
+        await saveMediaBlob(await res.blob(), name);
+      } catch (error) {
+        console.warn('[PdfViewer] Failed to download:', error);
+      }
     };
 
     const handleJumpSubmit: FormEventHandler<HTMLFormElement> = (evt) => {

src/app/components/RenderMessageContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { KeyboardEvent, MouseEvent } from 'react';
 import { MsgType } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
@@ -49,6 +49,12 @@ type RenderMessageContentProps = {
   linkifyOpts: Opts;
   outlineAttachment?: boolean;
   disabledEmbedPatterns?: string[];
+  targetEventId?: string;
+  onJumboEmojiClick?: (
+    targetEventId: string,
+    body: string,
+    event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
+  ) => void;
 };
 export function RenderMessageContent({
   displayName,
@@ -63,6 +69,8 @@ export function RenderMessageContent({
   linkifyOpts,
   outlineAttachment,
   disabledEmbedPatterns,
+  targetEventId,
+  onJumboEmojiClick,
 }: RenderMessageContentProps) {
   const renderUrlsPreview = (urls: string[]) => {
     let filteredUrls = urls.filter((url) => !testMatrixTo(url));
@@ -100,6 +108,11 @@ export function RenderMessageContent({
       </>
     );
   };
+  const handleJumboEmojiClick =
+    targetEventId && onJumboEmojiClick
+      ? (body: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) =>
+          onJumboEmojiClick(targetEventId, body, event)
+      : undefined;
   const renderCaption = () => {
     const content: IImageContent = getContent();
     if (content.filename && content.filename !== content.body) {
@@ -182,6 +195,7 @@ export function RenderMessageContent({
       <MText
         edited={edited}
         content={getContent()}
+        onJumboEmojiClick={handleJumboEmojiClick}
         renderBody={(props) => (
           <RenderBody
             {...props}
@@ -201,6 +215,7 @@ export function RenderMessageContent({
         displayName={displayName}
         edited={edited}
         content={getContent()}
+        onJumboEmojiClick={handleJumboEmojiClick}
         renderBody={(props) => (
           <RenderBody
             {...props}
@@ -219,6 +234,7 @@ export function RenderMessageContent({
       <MNotice
         edited={edited}
         content={getContent()}
+        onJumboEmojiClick={handleJumboEmojiClick}
         renderBody={(props) => (
           <RenderBody
             {...props}

src/app/components/UserRoomProfileRenderer.tsx

@@ -34,7 +34,7 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Menu style={{ width: toRem(340) }}>
+          <Menu style={{ width: toRem(260) }}>
             <SpaceProvider value={space ?? null}>
               <RoomProvider value={room}>
                 <UserRoomProfile userId={userId} />

src/app/components/image-viewer/ImageViewer.css.ts

@@ -1,42 +1,127 @@
 import { style } from '@vanilla-extract/css';
-import { DefaultReset, color, config } from 'folds';
+import { DefaultReset } from 'folds';
 
-export const ImageViewer = style([
+export const Root = style([
   DefaultReset,
   {
-    height: '100%',
+    position: 'fixed',
+    inset: 0,
+    zIndex: 200,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+    boxSizing: 'border-box',
   },
 ]);
 
-export const ImageViewerHeader = style([
+export const Backdrop = style([
   DefaultReset,
   {
-    paddingLeft: config.space.S200,
+    position: 'absolute',
-    paddingRight: config.space.S200,
+    inset: 0,
-    borderBottomWidth: config.borderWidth.B300,
+    backgroundColor: 'rgba(0, 0, 0, 0.72)',
-    flexShrink: 0,
+    backdropFilter: 'blur(18px)',
-    gap: config.space.S200,
+    WebkitBackdropFilter: 'blur(18px)',
+    cursor: 'zoom-out',
   },
 ]);
 
-export const ImageViewerContent = style([
+export const Stage = style([
   DefaultReset,
   {
-    backgroundColor: color.Background.Container,
+    position: 'relative',
-    color: color.Background.OnContainer,
+    zIndex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: 10,
+    maxWidth: 'min(96vw, 1100px)',
+    maxHeight: 'min(92vh, 900px)',
+    width: '100%',
+    minWidth: 0,
+    pointerEvents: 'none',
+  },
+]);
+
+export const Chrome = style([
+  DefaultReset,
+  {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    width: '100%',
+    minWidth: 0,
+    color: '#fff',
+    pointerEvents: 'auto',
+  },
+]);
+
+export const Title = style([
+  DefaultReset,
+  {
+    flex: 1,
+    minWidth: 0,
+    fontSize: 13,
+    fontWeight: 600,
+    lineHeight: '18px',
+    color: 'rgba(255, 255, 255, 0.9)',
     overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
   },
 ]);
 
-export const ImageViewerImg = style([
+export const ChromeButton = style([
   DefaultReset,
   {
-    objectFit: 'contain',
+    display: 'inline-flex',
-    width: 'auto',
+    alignItems: 'center',
-    height: 'auto',
+    justifyContent: 'center',
-    maxWidth: '100%',
+    flexShrink: 0,
-    maxHeight: '100%',
+    padding: 6,
-    backgroundColor: color.Surface.Container,
+    border: 'none',
-    transition: 'transform 100ms linear',
+    borderRadius: 4,
+    background: 'rgba(0, 0, 0, 0.4)',
+    color: '#fff',
+    cursor: 'pointer',
+  },
+]);
+
+export const Frame = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    alignSelf: 'center',
+    maxWidth: 'min(96vw, 1100px)',
+    maxHeight: 'min(80vh, 820px)',
+    overflow: 'hidden',
+    cursor: 'zoom-in',
+    touchAction: 'none',
+    pointerEvents: 'auto',
+    selectors: {
+      '&[data-zoomed]': {
+        cursor: 'zoom-out',
+        overflow: 'visible',
+      },
+      '&[data-pannable]': {
+        cursor: 'grab',
+      },
+      '&[data-dragging]': {
+        cursor: 'grabbing',
+      },
+    },
+  },
+]);
+
+export const Image = style([
+  DefaultReset,
+  {
+    display: 'block',
+    borderRadius: 8,
+    background: 'transparent',
+    transform: 'translate(var(--img-tx, 0px), var(--img-ty, 0px)) scale(var(--img-zoom, 1))',
+    transformOrigin: '0 0',
+    userSelect: 'none',
   },
 ]);

src/app/components/image-viewer/ImageViewer.tsx

@@ -1,16 +1,61 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import React from 'react';
+import React, {
-import FileSaver from 'file-saver';
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import classNames from 'classnames';
-import { Box, Chip, Header, IconButton, Text, as } from 'folds';
+import { as } from 'folds';
 import { Icon, Icons } from '../icons';
 import * as css from './ImageViewer.css';
-import { useZoom } from '../../hooks/useZoom';
+import { downloadAndSaveMedia } from '../../utils/saveMedia';
-import { usePan } from '../../hooks/usePan';
-import { downloadMedia } from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getCurrentAccessToken } from '../../utils/auth';
 
+const ZOOM_MIN = 1;
+const ZOOM_MAX = 5;
+const ZOOM_CLICK = 2.5;
+const DRAG_CLICK_SLOP = 6;
+
+type ZoomState = {
+  scale: number;
+  tx: number;
+  ty: number;
+};
+
+type PinchSession = {
+  startDist: number;
+  startScale: number;
+  startTx: number;
+  startTy: number;
+  startMidX: number;
+  startMidY: number;
+};
+
+const INITIAL_ZOOM: ZoomState = { scale: 1, tx: 0, ty: 0 };
+
+function imageViewportMax() {
+  return {
+    w: Math.min(window.innerWidth * 0.96, 1100),
+    h: Math.min(window.innerHeight * 0.8, 820),
+  };
+}
+
+function pointerDistance(
+  a: { x: number; y: number },
+  b: { x: number; y: number }
+): number {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+
+function pointerMidpoint(
+  a: { x: number; y: number },
+  b: { x: number; y: number }
+): { x: number; y: number } {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+
 export type ImageViewerProps = {
   alt: string;
   src: string;
@@ -19,100 +64,382 @@ export type ImageViewerProps = {
 
 export const ImageViewer = as<'div', ImageViewerProps>(
   ({ className, alt, src, requestClose, ...props }, ref) => {
-    const mx = useMatrixClient();
+    const frameRef = useRef<HTMLDivElement>(null);
-    const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
+    const imgRef = useRef<HTMLImageElement>(null);
-    const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
+    const zoomRef = useRef<ZoomState>({ ...INITIAL_ZOOM });
+    const pointersRef = useRef<Map<number, { x: number; y: number }>>(new Map());
+    const dragRef = useRef<{
+      id: number;
+      x: number;
+      y: number;
+      tx: number;
+      ty: number;
+      moved: boolean;
+    } | null>(null);
+    const pinchRef = useRef<PinchSession | null>(null);
+    /** Skip the next click after a pinch so we don't toggle zoom. */
+    const suppressClickRef = useRef(false);
+    const baseSizeRef = useRef({ w: 0, h: 0 });
+
+    const [zoom, setZoom] = useState<ZoomState>(INITIAL_ZOOM);
+    const [dragging, setDragging] = useState(false);
+
+    const applyZoomCss = useCallback((next: ZoomState) => {
+      const img = imgRef.current;
+      if (!img) return;
+      img.style.setProperty('--img-zoom', String(next.scale));
+      img.style.setProperty('--img-tx', `${next.tx}px`);
+      img.style.setProperty('--img-ty', `${next.ty}px`);
+    }, []);
+
+    const clampPan = useCallback((state: ZoomState): ZoomState => {
+      const img = imgRef.current;
+      const frame = frameRef.current;
+      if (!img || !frame) return state;
+
+      const baseW = img.offsetWidth || baseSizeRef.current.w;
+      const baseH = img.offsetHeight || baseSizeRef.current.h;
+      const frameW = frame.clientWidth;
+      const frameH = frame.clientHeight;
+      if (!baseW || !baseH || !frameW || !frameH) return state;
+
+      const scaledW = baseW * state.scale;
+      const scaledH = baseH * state.scale;
+      let { tx, ty } = state;
+
+      if (scaledW <= frameW) tx = (frameW - scaledW) / 2;
+      else tx = Math.min(0, Math.max(frameW - scaledW, tx));
+
+      if (scaledH <= frameH) ty = (frameH - scaledH) / 2;
+      else ty = Math.min(0, Math.max(frameH - scaledH, ty));
+
+      return { ...state, tx, ty };
+    }, []);
+
+    const commitZoom = useCallback(
+      (next: ZoomState) => {
+        const clamped = clampPan(next);
+        zoomRef.current = clamped;
+        applyZoomCss(clamped);
+        setZoom(clamped);
+      },
+      [applyZoomCss, clampPan]
+    );
+
+    const resetZoom = useCallback(() => {
+      dragRef.current = null;
+      pinchRef.current = null;
+      setDragging(false);
+      commitZoom({ ...INITIAL_ZOOM });
+    }, [commitZoom]);
+
+    const fitImage = useCallback(() => {
+      const img = imgRef.current;
+      if (!img) return;
+      const iw = img.naturalWidth || 0;
+      const ih = img.naturalHeight || 0;
+      if (iw <= 0 || ih <= 0) return;
+
+      const { w: maxW, h: maxH } = imageViewportMax();
+      const s = Math.min(1, maxW / iw, maxH / ih);
+      const w = Math.max(1, Math.round(iw * s));
+      const h = Math.max(1, Math.round(ih * s));
+      img.style.width = `${w}px`;
+      img.style.height = `${h}px`;
+      baseSizeRef.current = { w, h };
+      commitZoom({ ...INITIAL_ZOOM });
+    }, [commitZoom]);
+
+    const zoomAround = useCallback(
+      (px: number, py: number, newScale: number) => {
+        const z = zoomRef.current;
+        const scale = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, newScale));
+        const ix = (px - z.tx) / z.scale;
+        const iy = (py - z.ty) / z.scale;
+        commitZoom({
+          scale,
+          tx: px - ix * scale,
+          ty: py - iy * scale,
+        });
+      },
+      [commitZoom]
+    );
+
+    const framePoint = (clientX: number, clientY: number) => {
+      const frame = frameRef.current;
+      if (!frame) return { x: 0, y: 0 };
+      const r = frame.getBoundingClientRect();
+      return { x: clientX - r.left, y: clientY - r.top };
+    };
+
+    const beginPinch = useCallback(() => {
+      const pts = [...pointersRef.current.values()];
+      if (pts.length < 2) return;
+      const [a, b] = pts;
+      const mid = pointerMidpoint(a, b);
+      const local = framePoint(mid.x, mid.y);
+      const z = zoomRef.current;
+      pinchRef.current = {
+        startDist: Math.max(1, pointerDistance(a, b)),
+        startScale: z.scale,
+        startTx: z.tx,
+        startTy: z.ty,
+        startMidX: local.x,
+        startMidY: local.y,
+      };
+      dragRef.current = null;
+      setDragging(true);
+    }, []);
+
+    const updatePinch = useCallback(() => {
+      const pinch = pinchRef.current;
+      const pts = [...pointersRef.current.values()];
+      if (!pinch || pts.length < 2) return;
+
+      const [a, b] = pts;
+      const dist = Math.max(1, pointerDistance(a, b));
+      const mid = pointerMidpoint(a, b);
+      const local = framePoint(mid.x, mid.y);
+      const scale = Math.min(
+        ZOOM_MAX,
+        Math.max(ZOOM_MIN, pinch.startScale * (dist / pinch.startDist))
+      );
+
+      // Keep the original content under the pinch midpoint while scaling + panning.
+      const ix = (pinch.startMidX - pinch.startTx) / pinch.startScale;
+      const iy = (pinch.startMidY - pinch.startTy) / pinch.startScale;
+      commitZoom({
+        scale,
+        tx: local.x - ix * scale,
+        ty: local.y - iy * scale,
+      });
+      suppressClickRef.current = true;
+    }, [commitZoom]);
+
+    useLayoutEffect(() => {
+      resetZoom();
+    }, [src, resetZoom]);
+
+    useEffect(() => {
+      const onKey = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          requestClose();
+        }
+      };
+      document.addEventListener('keydown', onKey);
+      return () => document.removeEventListener('keydown', onKey);
+    }, [requestClose]);
+
+    useEffect(() => {
+      const frame = frameRef.current;
+      if (!frame) return undefined;
+
+      const onWheel = (event: WheelEvent) => {
+        event.preventDefault();
+        const img = imgRef.current;
+        if (!img?.src) return;
+        const factor = Math.exp(-event.deltaY * 0.002);
+        const r = frame.getBoundingClientRect();
+        const x = event.clientX - r.left;
+        const y = event.clientY - r.top;
+        zoomAround(x, y, zoomRef.current.scale * factor);
+      };
+
+      // Block browser gesture zoom / scroll while pinching on the frame.
+      const blockGesture = (event: Event) => {
+        if (pointersRef.current.size >= 2 || pinchRef.current) {
+          event.preventDefault();
+        }
+      };
+
+      frame.addEventListener('wheel', onWheel, { passive: false });
+      frame.addEventListener('touchmove', blockGesture, { passive: false });
+      return () => {
+        frame.removeEventListener('wheel', onWheel);
+        frame.removeEventListener('touchmove', blockGesture);
+      };
+    }, [zoomAround]);
+
+    useEffect(() => {
+      const onResize = () => fitImage();
+      window.addEventListener('resize', onResize);
+      return () => window.removeEventListener('resize', onResize);
+    }, [fitImage]);
 
     const handleDownload = async () => {
       try {
-        // Always use current session's token to avoid stale tokens during account switches
+        await downloadAndSaveMedia(src, alt, getCurrentAccessToken());
-        const fileContent = await downloadMedia(src, getCurrentAccessToken());
-        FileSaver.saveAs(fileContent, alt);
       } catch (error) {
         console.warn('[ImageViewer] Failed to download media:', error);
-        // Fallback: try to fetch via standard fetch as blob
         try {
-          const response = await fetch(src);
-          if (response.ok) {
-            const blob = await response.blob();
-            FileSaver.saveAs(blob, alt);
-          }
-        } catch {
-          // If all else fails, open in new tab to let browser handle it
           window.open(src, '_blank');
+        } catch {
+          // ignore
         }
       }
     };
 
+    const handleClick = (event: React.MouseEvent) => {
+      if (suppressClickRef.current) {
+        suppressClickRef.current = false;
+        return;
+      }
+      if (dragRef.current?.moved) {
+        dragRef.current = null;
+        return;
+      }
+      const img = imgRef.current;
+      if (!img?.src) return;
+      event.preventDefault();
+      const { x, y } = framePoint(event.clientX, event.clientY);
+      if (zoomRef.current.scale <= 1.01) {
+        zoomAround(x, y, ZOOM_CLICK);
+      } else {
+        resetZoom();
+      }
+    };
+
+    const handlePointerDown = (event: React.PointerEvent) => {
+      if (event.button !== 0 && event.pointerType === 'mouse') return;
+
+      pointersRef.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      frameRef.current?.setPointerCapture(event.pointerId);
+
+      if (pointersRef.current.size >= 2) {
+        beginPinch();
+        return;
+      }
+
+      if (zoomRef.current.scale <= 1.01) return;
+      const z = zoomRef.current;
+      dragRef.current = {
+        id: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        tx: z.tx,
+        ty: z.ty,
+        moved: false,
+      };
+      setDragging(true);
+    };
+
+    const handlePointerMove = (event: React.PointerEvent) => {
+      if (!pointersRef.current.has(event.pointerId)) return;
+      pointersRef.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+
+      if (pointersRef.current.size >= 2 && pinchRef.current) {
+        event.preventDefault();
+        updatePinch();
+        return;
+      }
+
+      const drag = dragRef.current;
+      if (!drag || drag.id !== event.pointerId) return;
+      const dx = event.clientX - drag.x;
+      const dy = event.clientY - drag.y;
+      if (!drag.moved && Math.hypot(dx, dy) > DRAG_CLICK_SLOP) drag.moved = true;
+      commitZoom({
+        scale: zoomRef.current.scale,
+        tx: drag.tx + dx,
+        ty: drag.ty + dy,
+      });
+    };
+
+    const handlePointerUp = (event: React.PointerEvent) => {
+      pointersRef.current.delete(event.pointerId);
+      frameRef.current?.releasePointerCapture(event.pointerId);
+
+      if (pinchRef.current) {
+        if (pointersRef.current.size >= 2) {
+          beginPinch();
+          return;
+        }
+        pinchRef.current = null;
+        setDragging(false);
+        // Extra Things: one finger left after pinch — hand off to pan if still zoomed.
+        if (pointersRef.current.size === 1 && zoomRef.current.scale > 1.01) {
+          const [id, pt] = [...pointersRef.current.entries()][0];
+          const z = zoomRef.current;
+          dragRef.current = {
+            id,
+            x: pt.x,
+            y: pt.y,
+            tx: z.tx,
+            ty: z.ty,
+            moved: true,
+          };
+          setDragging(true);
+        } else {
+          dragRef.current = null;
+        }
+        return;
+      }
+
+      const drag = dragRef.current;
+      if (!drag || drag.id !== event.pointerId) return;
+      setDragging(false);
+      if (!drag.moved) dragRef.current = null;
+      else dragRef.current = { ...drag, moved: true };
+    };
+
+    const zoomed = zoom.scale > 1.01;
+
     return (
-      <Box
+      <div
-        className={classNames(css.ImageViewer, className)}
+        className={classNames(css.Root, className)}
-        direction="Column"
+        role="dialog"
+        aria-modal="true"
+        aria-label={alt || 'Image viewer'}
         {...props}
         ref={ref}
       >
-        <Header className={css.ImageViewerHeader} size="400">
+        <div className={css.Backdrop} onClick={requestClose} aria-hidden />
-          <Box grow="Yes" alignItems="Center" gap="200">
+        <div className={css.Stage}>
-            <IconButton size="300" radii="300" onClick={requestClose}>
+          <div className={css.Chrome}>
-              <Icon size="50" src={Icons.ArrowLeft} />
+            <div className={css.Title} title={alt}>
-            </IconButton>
-            <Text size="T300" truncate>
               {alt}
-            </Text>
+            </div>
-          </Box>
+            <button
-          <Box shrink="No" alignItems="Center" gap="200">
+              type="button"
-            <IconButton
+              className={css.ChromeButton}
-              variant={zoom < 1 ? 'Success' : 'SurfaceVariant'}
+              aria-label="Download"
-              outlined={zoom < 1}
-              size="300"
-              radii="Pill"
-              onClick={zoomOut}
-              aria-label="Zoom Out"
-            >
-              <Icon size="50" src={Icons.Minus} />
-            </IconButton>
-            <Chip variant="SurfaceVariant" radii="Pill" onClick={() => setZoom(zoom === 1 ? 2 : 1)}>
-              <Text size="B300">{Math.round(zoom * 100)}%</Text>
-            </Chip>
-            <IconButton
-              variant={zoom > 1 ? 'Success' : 'SurfaceVariant'}
-              outlined={zoom > 1}
-              size="300"
-              radii="Pill"
-              onClick={zoomIn}
-              aria-label="Zoom In"
-            >
-              <Icon size="50" src={Icons.Plus} />
-            </IconButton>
-            <Chip
-              variant="Primary"
               onClick={handleDownload}
-              radii="300"
-              before={<Icon size="50" src={Icons.Download} />}
             >
-              <Text size="B300">Download</Text>
+              <Icon size="50" src={Icons.Download} />
-            </Chip>
+            </button>
-          </Box>
+            <button
-        </Header>
+              type="button"
-        <Box
+              className={css.ChromeButton}
-          grow="Yes"
+              aria-label="Close"
-          className={css.ImageViewerContent}
+              onClick={requestClose}
-          justifyContent="Center"
+            >
-          alignItems="Center"
+              <Icon size="50" src={Icons.Cross} />
-        >
+            </button>
-          <img
+          </div>
-            className={css.ImageViewerImg}
+          <div
-            style={{
+            ref={frameRef}
-              cursor,
+            className={css.Frame}
-              transform: `scale(${zoom}) translate(${pan.translateX}px, ${pan.translateY}px)`,
+            data-zoomed={zoomed || undefined}
-            }}
+            data-pannable={zoomed || undefined}
-            src={src}
+            data-dragging={dragging || undefined}
-            alt={alt}
+            onClick={handleClick}
-            draggable={false}
+            onPointerDown={handlePointerDown}
-            onMouseDown={onMouseDown}
+            onPointerMove={handlePointerMove}
-          />
+            onPointerUp={handlePointerUp}
-        </Box>
+            onPointerCancel={handlePointerUp}
-      </Box>
+          >
+            <img
+              ref={imgRef}
+              className={css.Image}
+              src={src}
+              alt={alt}
+              draggable={false}
+              onLoad={fitImage}
+            />
+          </div>
+        </div>
+      </div>
     );
   }
 );

src/app/components/message/FileHeader.tsx

@@ -2,7 +2,6 @@ import { Badge, Box, IconButton, Spinner, Text, as, toRem } from 'folds';
 import { Icon, Icons } from '../icons';
 import React, { ReactNode, useCallback } from 'react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
-import FileSaver from 'file-saver';
 import { mimeTypeToExt } from '../../utils/mimeTypes';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -14,6 +13,7 @@ import {
   mxcUrlToHttp,
 } from '../../utils/matrix';
 import { getCurrentAccessToken } from '../../utils/auth';
+import { saveMediaBlob } from '../../utils/saveMedia';
 
 const badgeStyles = { maxWidth: toRem(100) };
 
@@ -36,9 +36,8 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
         : await downloadMedia(mediaUrl, accessToken);
 
-      const fileURL = URL.createObjectURL(fileContent);
+      await saveMediaBlob(fileContent, filename);
-      FileSaver.saveAs(fileURL, filename);
+      return true;
-      return fileURL;
     }, [mx, url, useAuthentication, mimeType, encInfo, filename])
   );
 

src/app/components/message/MsgTypeRenderers.tsx

@@ -27,6 +27,7 @@ import {
   MATRIX_SPOILER_REASON_PROPERTY_NAME,
 } from '../../../types/matrix/common';
 import { StationeryMedia, hashStationerySeed, stationeryMediaRot } from './StationeryMedia';
+import { getJumboEmojiInteractionProps, JumboEmojiClickHandler } from '../../features/room/emoji-confetti/jumboEmojiInteraction';
 import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
 import { parseGeoUri, scaleYDimension } from '../../utils/common';
 import { resolveAttachmentBoxSize } from '../../state/mediaDimensionCache';
@@ -78,8 +79,9 @@ type MTextProps = {
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
   style?: CSSProperties;
+  onJumboEmojiClick?: JumboEmojiClickHandler;
 };
-export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
+export function MText({ edited, content, renderBody, renderUrlsPreview, style, onJumboEmojiClick }: MTextProps) {
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
@@ -89,13 +91,20 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
     : undefined;
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
+  const isJumboEmoji = JUMBO_EMOJI_REG.test(trimmedBody);
+  const jumboEmojiInteraction = getJumboEmojiInteractionProps({
+    body: trimmedBody,
+    isJumboEmoji,
+    onJumboEmojiClick,
+  });
 
   return (
     <>
       <MessageTextBody
         preWrap={typeof customBody !== 'string'}
-        jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
+        jumboEmoji={isJumboEmoji}
         style={style}
+        {...jumboEmojiInteraction}
       >
         {renderBody({
           body: trimmedBody,
@@ -114,6 +123,7 @@ type MEmoteProps = {
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
+  onJumboEmojiClick?: JumboEmojiClickHandler;
 };
 export function MEmote({
   displayName,
@@ -121,6 +131,7 @@ export function MEmote({
   content,
   renderBody,
   renderUrlsPreview,
+  onJumboEmojiClick,
 }: MEmoteProps) {
   const { body, formatted_body: customBody } = content;
 
@@ -131,20 +142,28 @@ export function MEmote({
     : undefined;
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
+  const isJumboEmoji = JUMBO_EMOJI_REG.test(trimmedBody);
+  const jumboEmojiInteraction = getJumboEmojiInteractionProps({
+    body: trimmedBody,
+    isJumboEmoji,
+    onJumboEmojiClick,
+  });
 
   return (
     <>
       <MessageTextBody
         emote
         preWrap={typeof customBody !== 'string'}
-        jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
+        jumboEmoji={isJumboEmoji}
       >
         <b>{`${displayName} `}</b>
-        {renderBody({
+        <span {...jumboEmojiInteraction}>
-          body: trimmedBody,
+          {renderBody({
-          customBody: trimmedCustomBody,
+            body: trimmedBody,
-        })}
+            customBody: trimmedCustomBody,
-        {edited && <MessageEditedContent />}
+          })}
+          {edited && <MessageEditedContent />}
+        </span>
       </MessageTextBody>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>
@@ -156,8 +175,9 @@ type MNoticeProps = {
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
+  onJumboEmojiClick?: JumboEmojiClickHandler;
 };
-export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNoticeProps) {
+export function MNotice({ edited, content, renderBody, renderUrlsPreview, onJumboEmojiClick }: MNoticeProps) {
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
@@ -167,13 +187,20 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
     : undefined;
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
+  const isJumboEmoji = JUMBO_EMOJI_REG.test(trimmedBody);
+  const jumboEmojiInteraction = getJumboEmojiInteractionProps({
+    body: trimmedBody,
+    isJumboEmoji,
+    onJumboEmojiClick,
+  });
 
   return (
     <>
       <MessageTextBody
         notice
         preWrap={typeof customBody !== 'string'}
-        jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
+        jumboEmoji={isJumboEmoji}
+        {...jumboEmojiInteraction}
       >
         {renderBody({
           body: trimmedBody,

src/app/components/message/Reply.tsx

@@ -117,7 +117,7 @@ export const Reply = as<'div', ReplyProps>(
     const { body } = replyEvent?.getContent() ?? {};
     const sender = replyEvent?.getSender();
     const senderAvatarMxc = sender ? getMemberAvatarMxc(room, sender) : undefined;
-    const customUserColor = useOtherUserColor(sender ?? '', senderAvatarMxc);
+    const customUserColor = useOtherUserColor(sender ?? '', room);
     const powerTag = sender ? getMemberPowerTag?.(sender) : undefined;
     const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
 

src/app/components/message/content/FileContent.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode, useCallback, useState } from 'react';
 import { Box, Button, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
 import { Icon, Icons } from '../../icons';
-import FileSaver from 'file-saver';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
+import { saveMediaBlob } from '../../../utils/saveMedia';
 import FocusTrap from 'focus-trap-react';
 import { IFileInfo } from '../../../../types/matrix/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -252,9 +252,8 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
         : await downloadMedia(mediaUrl, accessToken);
 
-      const fileURL = URL.createObjectURL(fileContent);
+      await saveMediaBlob(fileContent, body);
-      FileSaver.saveAs(fileURL, body);
+      return fileContent;
-      return fileURL;
     }, [mx, url, useAuthentication, mimeType, encInfo, body])
   );
 
@@ -268,7 +267,7 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil
       size="400"
       onClick={() =>
         downloadState.status === AsyncStatus.Success
-          ? FileSaver.saveAs(downloadState.data, body)
+          ? saveMediaBlob(downloadState.data, body)
           : download()
       }
       disabled={downloadState.status === AsyncStatus.Loading}

src/app/components/message/content/ImageContent.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useCallback, useEffect, useState } from 'react';
-import { Badge, Box, Button, Chip, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
+import { Badge, Box, Button, Chip, Overlay, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
 import { Icon, Icons } from '../../icons';
 import classNames from 'classnames';
 import { Blurhash } from 'react-blurhash';
@@ -14,7 +14,6 @@ import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
 import { stopPropagation } from '../../../utils/keyboard';
 import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { ModalWide } from '../../../styles/Modal.css';
 import { validBlurHash } from '../../../utils/blurHash';
 import { getCurrentAccessToken } from '../../../utils/auth';
 import { setMediaDimensions, getMediaBlurHash, getMediaDimensions, rememberMediaBlurHash } from '../../../state/mediaDimensionCache';
@@ -192,28 +191,21 @@ export const ImageContent = as<'div', ImageContentProps>(
             <div className={css.MediaSkeleton} />
           ))}
         {srcState.status === AsyncStatus.Success && (
-          <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
+          <Overlay open={viewer} backdrop={null}>
-            <OverlayCenter>
+            <FocusTrap
-              <FocusTrap
+              focusTrapOptions={{
-                focusTrapOptions={{
+                initialFocus: false,
-                  initialFocus: false,
+                onDeactivate: () => setViewer(false),
-                  onDeactivate: () => setViewer(false),
+                clickOutsideDeactivates: true,
-                  clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
-                  escapeDeactivates: stopPropagation,
+              }}
-                }}
+            >
-              >
+              {renderViewer({
-                <Modal
+                src: srcState.data,
-                  className={ModalWide}
+                alt: body,
-                  size="500"
+                requestClose: () => setViewer(false),
-                >
+              })}
-                  {renderViewer({
+            </FocusTrap>
-                    src: srcState.data,
-                    alt: body,
-                    requestClose: () => setViewer(false),
-                  })}
-                </Modal>
-              </FocusTrap>
-            </OverlayCenter>
           </Overlay>
         )}
         {!autoPlay && !markedAsSpoiler && srcState.status === AsyncStatus.Idle && (

src/app/components/message/layout/layout.css.ts

@@ -243,6 +243,9 @@ export const MessageTextBody = recipe({
         overflow: 'visible',
         overflowY: 'visible',
         paddingBottom: config.space.S200,
+        cursor: 'pointer',
+        position: 'relative',
+        zIndex: 5,
       },
     },
     emote: {
@@ -263,6 +266,8 @@ globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonBase}`, {
   padding: 0,
   overflow: 'visible',
   verticalAlign: 'middle',
+  position: 'relative',
+  zIndex: 1,
 });
 
 globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, {

src/app/components/page/Page.tsx

@@ -16,6 +16,7 @@ type PageRootProps = {
 export function PageRoot({ nav, children }: PageRootProps) {
   const screenSize = useScreenSizeContext();
   const showCompactMaster = useShowCompactMasterView();
+  const showDetail = !showCompactMaster || nav == null;
 
   return (
     <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
@@ -23,7 +24,7 @@ export function PageRoot({ nav, children }: PageRootProps) {
       {screenSize !== ScreenSize.Mobile && (
         <Line variant="Background" size="300" direction="Vertical" />
       )}
-      {!showCompactMaster && children}
+      {showDetail && children}
     </Box>
   );
 }

src/app/components/presence/Presence.tsx

@@ -67,6 +67,7 @@ type AvatarPresenceProps = {
 export const AvatarPresence = as<'div', AvatarPresenceProps>(
   ({ as: AsAvatarPresence, badge, variant = 'Surface', badgeBackgroundColor, children, ...props }, ref) => (
     <Box as={AsAvatarPresence} className={css.AvatarPresence} {...props} ref={ref}>
+      {children}
       {badge && (
         <div
           className={css.AvatarPresenceBadge}
@@ -75,7 +76,6 @@ export const AvatarPresence = as<'div', AvatarPresenceProps>(
           {badge}
         </div>
       )}
-      {children}
     </Box>
   )
 );

src/app/components/presence/styles.css.ts

@@ -12,7 +12,7 @@ export const AvatarPresenceBadge = style({
   bottom: 0,
   right: 0,
   transform: 'translate(25%, 25%)',
-  zIndex: 1,
+  zIndex: 10,
 
   display: 'flex',
   padding: config.borderWidth.B600,

src/app/components/sidebar/Sidebar.css.ts

@@ -9,6 +9,8 @@ export const Sidebar = style([
     width: toRem(66),
     backgroundColor: color.Background.Container,
     borderRight: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
+    position: 'relative',
+    isolation: 'isolate',
 
     display: 'flex',
     flexDirection: 'column',
@@ -185,6 +187,46 @@ export const SidebarAvatar = recipe({
 });
 export type SidebarAvatarVariants = RecipeVariants<typeof SidebarAvatar>;
 
+/** A vertical rendition of the user's nameplate behind the bottom settings avatar. */
+export const SidebarAvatarNameplate = style({
+  position: 'absolute',
+  // The 50px avatar is centered in the 66px sidebar. Pin the rotated plate's
+  // bottom-right corner 8px left of it so the 66px cross-axis
+  // spans the whole sidebar and grows upward from its bottom edge.
+  right: toRem(58),
+  bottom: toRem(-16),
+  width: toRem(220),
+  height: toRem(66),
+  transformOrigin: 'right bottom',
+  transform: 'rotate(90deg)',
+  objectFit: 'cover',
+  objectPosition: 'right center',
+  pointerEvents: 'none',
+  zIndex: -1,
+});
+
+export const SidebarAvatarLarge = style({
+  width: toRem(50),
+  height: toRem(50),
+  borderRadius: '50%',
+  backgroundColor: `color-mix(in srgb, ${color.Background.Container} 68%, transparent)`,
+  backdropFilter: 'blur(10px)',
+  WebkitBackdropFilter: 'blur(10px)',
+});
+
+export const SidebarSearchAvatar = style({
+  position: 'relative',
+  zIndex: 1,
+  backgroundColor: `color-mix(in srgb, ${color.Background.Container} 68%, transparent)`,
+  backdropFilter: 'blur(10px)',
+  WebkitBackdropFilter: 'blur(10px)',
+});
+
+export const SidebarAvatarForeground = style({
+  position: 'relative',
+  zIndex: 1,
+});
+
 export const SidebarFolder = recipe({
   base: [
     ContainerColor({ variant: 'Background' }),

src/app/components/updates-dialog/UpdateMarkdownViewer.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { resolveUpdateAssetUrl } from '../../data/updateNotes';
+import * as css from './UpdatesDialog.css';
+
+type UpdateMarkdownViewerProps = {
+  markdown: string;
+};
+
+export function UpdateMarkdownViewer({ markdown }: UpdateMarkdownViewerProps) {
+  if (!markdown.trim()) {
+    return null;
+  }
+
+  return (
+    <div className={css.Markdown}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          a: ({ href, children }) => (
+            <a href={href} target="_blank" rel="noreferrer noopener">
+              {children}
+            </a>
+          ),
+          img: ({ src, alt }) => (
+            <img src={resolveUpdateAssetUrl(src) ?? src} alt={alt ?? ''} loading="lazy" />
+          ),
+        }}
+      >
+        {markdown}
+      </ReactMarkdown>
+    </div>
+  );
+}

src/app/components/updates-dialog/UpdatesDialog.css.ts

@@ -0,0 +1,329 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+const MOBILE_BREAKPOINT = '480px';
+
+/** Above folds overlays (9999) and Settings modals. */
+const UPDATES_DIALOG_Z = 10001;
+
+const DIALOG_MAX_HEIGHT =
+  'calc(85vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))';
+
+/** [data-updates-dialog] — full-screen host portaled to document.body */
+export const Root = style({
+  position: 'fixed',
+  inset: 0,
+  zIndex: UPDATES_DIALOG_Z,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  pointerEvents: 'auto',
+});
+
+/** [data-updates-dialog-backdrop] */
+export const Backdrop = style({
+  position: 'absolute',
+  inset: 0,
+  zIndex: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.55)',
+});
+
+/** [data-updates-dialog-frame] */
+export const Frame = style({
+  position: 'relative',
+  zIndex: 1,
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  maxHeight: '100vh',
+  maxWidth: '100vw',
+  padding:
+    'env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px)',
+  pointerEvents: 'none',
+});
+
+/** [data-updates-dialog-panel] */
+export const Panel = style({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  maxWidth: toRem(560),
+  maxHeight: DIALOG_MAX_HEIGHT,
+  overflow: 'hidden',
+  pointerEvents: 'auto',
+  borderRadius: config.radii.R400,
+  backgroundColor: color.Surface.Container,
+  color: color.Surface.OnContainer,
+  boxShadow: config.shadow.E400,
+  '@media': {
+    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
+      maxWidth: `calc(100vw - 2 * ${config.space.S400})`,
+    },
+  },
+});
+
+export const Hero = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S200,
+  padding: config.space.S500,
+  paddingBottom: config.space.S400,
+  backgroundColor: color.Primary.Container,
+  color: color.Primary.OnContainer,
+  borderBottom: `${config.borderWidth.B300} solid ${color.Primary.ContainerLine}`,
+  '@media': {
+    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
+      padding: config.space.S400,
+      paddingBottom: config.space.S300,
+    },
+  },
+});
+
+export const HeroRow = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: config.space.S300,
+  minWidth: 0,
+});
+
+export const HeroLogo = style({
+  width: toRem(48),
+  height: toRem(48),
+  flexShrink: 0,
+  '@media': {
+    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
+      width: toRem(40),
+      height: toRem(40),
+    },
+  },
+});
+
+export const HeroTitleWrap = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S100,
+  minWidth: 0,
+});
+
+export const BodyScroll = style({
+  flex: '1 1 auto',
+  minHeight: 0,
+  backgroundColor: color.Surface.Container,
+  color: color.Surface.OnContainer,
+});
+
+export const BodyContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: config.space.S500,
+  paddingTop: config.space.S400,
+  '@media': {
+    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
+      padding: config.space.S400,
+      paddingTop: config.space.S300,
+    },
+  },
+});
+
+export const BodyLoading = style({
+  padding: config.space.S600,
+});
+
+export const Markdown = style({
+  width: '100%',
+  color: color.Surface.OnContainer,
+  fontSize: toRem(14),
+  lineHeight: 1.55,
+});
+
+globalStyle(`${Markdown} h1, ${Markdown} h2, ${Markdown} h3, ${Markdown} h4`, {
+  margin: 0,
+  marginTop: config.space.S400,
+  marginBottom: config.space.S200,
+  lineHeight: 1.3,
+  color: color.Surface.OnContainer,
+});
+
+globalStyle(`${Markdown} h1:first-child, ${Markdown} h2:first-child, ${Markdown} h3:first-child, ${Markdown} h4:first-child`, {
+  marginTop: 0,
+});
+
+globalStyle(`${Markdown} h2`, { fontSize: toRem(18) });
+globalStyle(`${Markdown} h3`, { fontSize: toRem(16) });
+
+globalStyle(`${Markdown} p`, {
+  margin: 0,
+  marginBottom: config.space.S300,
+});
+
+globalStyle(`${Markdown} p:last-child`, { marginBottom: 0 });
+
+globalStyle(`${Markdown} ul, ${Markdown} ol`, {
+  margin: 0,
+  marginBottom: config.space.S300,
+  paddingLeft: config.space.S500,
+});
+
+globalStyle(`${Markdown} li`, { marginBottom: config.space.S100 });
+globalStyle(`${Markdown} li:last-child`, { marginBottom: 0 });
+
+globalStyle(`${Markdown} a`, {
+  color: color.Primary.Main,
+  textDecoration: 'underline',
+  textUnderlineOffset: toRem(2),
+});
+
+globalStyle(`${Markdown} a:hover`, { color: color.Primary.MainHover });
+
+globalStyle(`${Markdown} img`, {
+  display: 'block',
+  maxWidth: '100%',
+  height: 'auto',
+  marginTop: config.space.S200,
+  marginBottom: config.space.S300,
+  borderRadius: config.radii.R300,
+  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+});
+
+globalStyle(`${Markdown} code`, {
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  fontSize: toRem(13),
+  padding: `0 ${config.space.S100}`,
+  borderRadius: config.radii.R300,
+  backgroundColor: color.SurfaceVariant.Container,
+  color: color.SurfaceVariant.OnContainer,
+});
+
+globalStyle(`${Markdown} pre`, {
+  margin: 0,
+  marginBottom: config.space.S300,
+  padding: config.space.S300,
+  borderRadius: config.radii.R300,
+  backgroundColor: color.SurfaceVariant.Container,
+  overflow: 'auto',
+});
+
+globalStyle(`${Markdown} pre code`, {
+  padding: 0,
+  backgroundColor: 'transparent',
+});
+
+globalStyle(`${Markdown} blockquote`, {
+  margin: 0,
+  marginBottom: config.space.S300,
+  paddingLeft: config.space.S300,
+  borderLeft: `${toRem(3)} solid ${color.Primary.Main}`,
+  color: color.Surface.OnContainer,
+  opacity: 0.9,
+});
+
+globalStyle(`${Markdown} hr`, {
+  border: 'none',
+  borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  margin: `${config.space.S400} 0`,
+});
+
+globalStyle(`${Markdown} table`, {
+  width: '100%',
+  borderCollapse: 'collapse',
+  marginBottom: config.space.S300,
+  fontSize: toRem(13),
+});
+
+globalStyle(`${Markdown} th, ${Markdown} td`, {
+  padding: config.space.S200,
+  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  textAlign: 'left',
+});
+
+globalStyle(`${Markdown} th`, {
+  backgroundColor: color.SurfaceVariant.Container,
+});
+
+export const OlderSection = style({
+  width: '100%',
+  marginTop: config.space.S500,
+});
+
+export const OlderToggle = style({
+  width: '100%',
+});
+
+export const OlderList = style({
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S100,
+  width: '100%',
+});
+
+export const OlderListItem = style({
+  width: '100%',
+});
+
+export const OlderItem = style({
+  all: 'unset',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: config.space.S100,
+  width: '100%',
+  minHeight: toRem(48),
+  padding: config.space.S300,
+  borderRadius: config.radii.R300,
+  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  backgroundColor: color.SurfaceVariant.Container,
+  color: color.SurfaceVariant.OnContainer,
+  cursor: 'pointer',
+  textAlign: 'left',
+  selectors: {
+    '&:hover': {
+      backgroundColor: color.SurfaceVariant.ContainerHover,
+    },
+    '&[data-active="true"]': {
+      borderColor: color.Primary.Main,
+      backgroundColor: color.Primary.Container,
+      color: color.Primary.OnContainer,
+    },
+  },
+});
+
+export const Footer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S200,
+  padding: config.space.S400,
+  paddingTop: config.space.S300,
+  paddingBottom: `calc(${config.space.S400} + env(safe-area-inset-bottom, 0px))`,
+  borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  backgroundColor: color.Surface.Container,
+  '@media': {
+    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
+      padding: config.space.S300,
+      paddingTop: config.space.S300,
+      paddingBottom: `calc(${config.space.S300} + env(safe-area-inset-bottom, 0px))`,
+    },
+  },
+});
+
+export const FooterButton = style({
+  width: '100%',
+});
+
+export const CloseButton = style({
+  position: 'absolute',
+  top: config.space.S300,
+  right: config.space.S300,
+  '@media': {
+    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
+      top: config.space.S200,
+      right: config.space.S200,
+    },
+  },
+});

src/app/components/updates-dialog/UpdatesDialog.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import FocusTrap from 'focus-trap-react';
+import { Box, Button, IconButton, Scroll, Spinner, Text } from 'folds';
+import { Icon, Icons } from '../icons';
+import { stopPropagation } from '../../utils/keyboard';
+import type { ParsedUpdateDoc, UpdateManifest } from '../../data/updateNotes';
+import PaarrotSVG from '../../../../public/res/svg/paarrot.svg';
+import { UpdateMarkdownViewer } from './UpdateMarkdownViewer';
+import * as css from './UpdatesDialog.css';
+
+type UpdatesDialogProps = {
+  manifest: UpdateManifest | null;
+  activeDoc: ParsedUpdateDoc | null;
+  loading: boolean;
+  onSelectFile: (file: string) => void;
+  onClose: () => void;
+};
+
+export function UpdatesDialog({
+  manifest,
+  activeDoc,
+  loading,
+  onSelectFile,
+  onClose,
+}: UpdatesDialogProps) {
+  const [showOlderList, setShowOlderList] = useState(false);
+
+  const displayVersion = activeDoc?.version;
+  const displayTitle = activeDoc?.title ?? (displayVersion ? `Version ${displayVersion}` : 'Release notes');
+  const isCurrent = manifest && activeDoc?.file === manifest.current;
+  const olderEntries = manifest?.older ?? [];
+
+  const handleSelectOlder = (file: string) => {
+    onSelectFile(file);
+    setShowOlderList(false);
+  };
+
+  return createPortal(
+    <div
+      data-updates-dialog=""
+      className={css.Root}
+      data-disable-swipe-back="true"
+      data-disable-swipe-reply="true"
+    >
+      <div data-updates-dialog-backdrop="" className={css.Backdrop} aria-hidden="true" />
+      <div data-updates-dialog-frame="" className={css.Frame}>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            clickOutsideDeactivates: false,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="updates-dialog-title"
+            data-updates-dialog-panel=""
+            className={css.Panel}
+          >
+            <Box className={css.Hero}>
+              <Box className={css.HeroRow}>
+                <img className={css.HeroLogo} src={PaarrotSVG} alt="" draggable={false} />
+                <Box className={css.HeroTitleWrap}>
+                  <Text size="L400" priority="300">What&apos;s new</Text>
+                  <Text id="updates-dialog-title" size="H4" truncate>
+                    {displayVersion ? `Paarrot ${displayVersion}` : 'Paarrot updates'}
+                  </Text>
+                </Box>
+              </Box>
+              <Text size="H6">{displayTitle}</Text>
+              {activeDoc?.date && (
+                <Text size="T200" priority="300">
+                  {activeDoc.date}
+                </Text>
+              )}
+              {!loading && !isCurrent && manifest?.current && (
+                <Button
+                  variant="Secondary"
+                  fill="Soft"
+                  radii="300"
+                  onClick={() => onSelectFile(manifest.current)}
+                >
+                  <Text size="B300">Back to current update</Text>
+                </Button>
+              )}
+            </Box>
+
+            <Scroll className={css.BodyScroll} visibility="Hover">
+              <Box className={css.BodyContent} direction="Column">
+                {loading && (
+                  <Box justifyContent="Center" alignItems="Center" className={css.BodyLoading}>
+                    <Spinner size="400" variant="Secondary" />
+                  </Box>
+                )}
+
+                {!loading && activeDoc?.markdown && (
+                  <UpdateMarkdownViewer markdown={activeDoc.markdown} />
+                )}
+
+                {!loading && !activeDoc?.markdown && (
+                  <Text size="T300" priority="400">
+                    No update notes are available right now.
+                  </Text>
+                )}
+
+                {!loading && olderEntries.length > 0 && (
+                  <Box className={css.OlderSection} direction="Column" gap="200">
+                    <Button
+                      className={css.OlderToggle}
+                      variant="Secondary"
+                      fill="Soft"
+                      radii="300"
+                      aria-expanded={showOlderList}
+                      onClick={() => setShowOlderList((open) => !open)}
+                    >
+                      <Text size="B300">
+                        {showOlderList
+                          ? 'Hide older versions'
+                          : `Older versions (${olderEntries.length})`}
+                      </Text>
+                    </Button>
+
+                    {showOlderList && (
+                      <ul className={css.OlderList}>
+                        {olderEntries.map((entry) => {
+                          const isActive = activeDoc?.file === entry.file;
+                          const label = entry.version ?? entry.file.replace(/\.md$/i, '');
+                          return (
+                            <li key={entry.file} className={css.OlderListItem}>
+                              <button
+                                type="button"
+                                className={css.OlderItem}
+                                data-active={isActive ? 'true' : 'false'}
+                                onClick={() => handleSelectOlder(entry.file)}
+                              >
+                                <Text size="B300">{label}</Text>
+                                {entry.title && (
+                                  <Text size="T200" priority="400">
+                                    {entry.title}
+                                  </Text>
+                                )}
+                                {entry.date && (
+                                  <Text size="T200" priority="300">
+                                    {entry.date}
+                                  </Text>
+                                )}
+                              </button>
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    )}
+                  </Box>
+                )}
+              </Box>
+            </Scroll>
+
+            <Box className={css.Footer}>
+              <Button
+                className={css.FooterButton}
+                variant="Primary"
+                fill="Solid"
+                radii="300"
+                onClick={onClose}
+              >
+                <Text size="B400">Got it</Text>
+              </Button>
+            </Box>
+
+            <Box className={css.CloseButton}>
+              <IconButton variant="Surface" onClick={onClose} aria-label="Close">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Box>
+          </div>
+        </FocusTrap>
+      </div>
+    </div>,
+    document.body
+  );
+}

src/app/components/updates-dialog/UpdatesDialogHost.tsx

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useAtom, useSetAtom } from 'jotai';
+import {
+  loadCurrentUpdateDocument,
+  loadUpdateDocument,
+  loadUpdateManifest,
+  type ParsedUpdateDoc,
+  type UpdateManifest,
+} from '../../data/updateNotes';
+import {
+  clearPendingReleaseNotes,
+  getLastSeenAppVersion,
+  releaseNotesDialogAtom,
+  setLastSeenAppVersion,
+  storePendingReleaseNotes,
+} from '../../state/releaseNotes';
+import { getAppVersion } from '../../utils/appVersion';
+import { UpdatesDialog } from './UpdatesDialog';
+
+type UpdaterInfo = {
+  version: string;
+  releaseNotes?: unknown;
+};
+
+/** Open the What's New dialog from Settings → About (or anywhere else). */
+export function useOpenReleaseNotesDialog(): () => void {
+  const setDialogState = useSetAtom(releaseNotesDialogAtom);
+  return useCallback(() => {
+    // Defer so the opening tap does not trip FocusTrap click-outside on Android.
+    window.requestAnimationFrame(() => {
+      setDialogState({ open: true, manual: true });
+    });
+  }, [setDialogState]);
+}
+
+export function UpdatesDialogHost() {
+  const [dialogState, setDialogState] = useAtom(releaseNotesDialogAtom);
+  const [manifest, setManifest] = useState<UpdateManifest | null>(null);
+  const [activeDoc, setActiveDoc] = useState<ParsedUpdateDoc | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const closeDialog = useCallback(() => {
+    setDialogState({ open: false, manual: false });
+    setManifest(null);
+    setActiveDoc(null);
+    setLoading(false);
+    getAppVersion().then((version) => {
+      if (version !== 'unknown') {
+        setLastSeenAppVersion(version);
+      }
+    });
+  }, [setDialogState]);
+
+  const selectFile = useCallback(async (file: string) => {
+    setLoading(true);
+    const doc = await loadUpdateDocument(file);
+    setActiveDoc(doc);
+    setLoading(false);
+  }, []);
+
+  // Persist updater metadata when a download finishes (version tracking after restart).
+  useEffect(() => {
+    const electron = window.electron;
+    if (!electron?.updater?.onUpdateDownloaded) return undefined;
+
+    const onDownloaded = (info: UpdaterInfo) => {
+      if (!info?.version) return;
+      storePendingReleaseNotes(info.version, info.releaseNotes);
+    };
+
+    electron.updater.onUpdateDownloaded(onDownloaded);
+    return undefined;
+  }, []);
+
+  // Show What's New after the app version changes (post-update restart).
+  useEffect(() => {
+    let cancelled = false;
+
+    const checkVersion = async () => {
+      const currentVersion = await getAppVersion();
+      if (cancelled || currentVersion === 'unknown') return;
+
+      const lastSeen = getLastSeenAppVersion();
+      const shouldAutoShow = lastSeen !== currentVersion;
+
+      if (shouldAutoShow) {
+        const loadedManifest = await loadUpdateManifest();
+        if (cancelled || !loadedManifest) return;
+
+        const doc = await loadUpdateDocument(loadedManifest.current);
+        if (cancelled || !doc) return;
+
+        setManifest(loadedManifest);
+        setActiveDoc(doc);
+        setDialogState({ open: true, manual: false });
+        clearPendingReleaseNotes();
+      }
+    };
+
+    const timer = window.setTimeout(checkVersion, 1500);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [setDialogState]);
+
+  // Load markdown when the dialog opens (manual open from About, etc.).
+  useEffect(() => {
+    if (!dialogState.open) return undefined;
+
+    let cancelled = false;
+
+    const load = async () => {
+      setLoading(true);
+      const loadedManifest = await loadUpdateManifest();
+      if (cancelled) return;
+
+      if (!loadedManifest) {
+        setManifest(null);
+        setActiveDoc(null);
+        setLoading(false);
+        return;
+      }
+
+      const doc = await loadUpdateDocument(loadedManifest.current);
+      if (cancelled) return;
+
+      setManifest(loadedManifest);
+      setActiveDoc(doc);
+      setLoading(false);
+    };
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [dialogState.open]);
+
+  if (!dialogState.open) {
+    return null;
+  }
+
+  return (
+    <UpdatesDialog
+      manifest={manifest}
+      activeDoc={activeDoc}
+      loading={loading}
+      onSelectFile={selectFile}
+      onClose={closeDialog}
+    />
+  );
+}

src/app/components/updates-dialog/index.ts

@@ -0,0 +1,3 @@
+export * from './UpdatesDialog';
+export * from './UpdatesDialogHost';
+export * from './UpdateMarkdownViewer';

src/app/components/user-profile/ProfileCollectibleOverlays.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  pickStoredProfileEffectIntroUrl,
+  pickStoredProfileEffectLoopUrl,
+} from '../../utils/collectibleAssets';
+import { ProfileEffectMedia } from './ProfileEffectMedia';
+import * as css from './styles.css';
+
+type ProfileCollectibleOverlaysProps = {
+  assetUrls: Record<string, string | undefined>;
+};
+
+export function ProfileCollectibleOverlays({ assetUrls }: ProfileCollectibleOverlaysProps) {
+  const introUrl = pickStoredProfileEffectIntroUrl(assetUrls);
+  const loopUrl = pickStoredProfileEffectLoopUrl(assetUrls);
+
+  if (!introUrl && !loopUrl) return null;
+
+  return (
+    <div className={css.UserHeroCollectibleLayer} aria-hidden="true">
+      <ProfileEffectMedia
+        introUrl={introUrl}
+        loopUrl={loopUrl}
+        className={css.ProfileEffectOverlay}
+      />
+    </div>
+  );
+}

src/app/components/user-profile/ProfileEffectMedia.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react';
+import { isCatalogVideoPreview } from '../../utils/collectibleAssets';
+
+const DEFAULT_INTRO_DURATION_MS = 3000;
+
+type ProfileEffectMediaProps = {
+  introUrl?: string;
+  loopUrl?: string;
+  introDurationMs?: number;
+  className?: string;
+  restartToken?: number;
+};
+
+export function ProfileEffectMedia({
+  introUrl,
+  loopUrl,
+  introDurationMs,
+  className,
+  restartToken = 0,
+}: ProfileEffectMediaProps) {
+  const resolvedLoopUrl = loopUrl ?? introUrl;
+  const hasSequence = Boolean(introUrl && resolvedLoopUrl && introUrl !== resolvedLoopUrl);
+  const [phase, setPhase] = useState<'intro' | 'loop'>(hasSequence ? 'intro' : 'loop');
+  const [playbackEpoch, setPlaybackEpoch] = useState(0);
+
+  useEffect(() => {
+    setPhase(hasSequence ? 'intro' : 'loop');
+  }, [introUrl, resolvedLoopUrl, hasSequence]);
+
+  useEffect(() => {
+    setPhase(hasSequence ? 'intro' : 'loop');
+    setPlaybackEpoch((epoch) => epoch + 1);
+  }, [restartToken, hasSequence]);
+
+  const activeUrl = phase === 'intro' && introUrl ? introUrl : resolvedLoopUrl;
+  const shouldLoop = !hasSequence || phase === 'loop';
+
+  useEffect(() => {
+    if (!hasSequence || phase !== 'intro' || !introUrl) return undefined;
+    if (isCatalogVideoPreview(introUrl)) return undefined;
+
+    const duration = introDurationMs ?? DEFAULT_INTRO_DURATION_MS;
+    const timer = window.setTimeout(() => setPhase('loop'), duration);
+    return () => window.clearTimeout(timer);
+  }, [hasSequence, phase, introUrl, introDurationMs, playbackEpoch]);
+
+  if (!activeUrl) return null;
+
+  if (isCatalogVideoPreview(activeUrl)) {
+    return (
+      <video
+        key={`${playbackEpoch}:${activeUrl}`}
+        className={className}
+        src={activeUrl}
+        autoPlay
+        loop={shouldLoop}
+        muted
+        playsInline
+        onEnded={() => {
+          if (hasSequence && phase === 'intro') {
+            setPhase('loop');
+          }
+        }}
+      />
+    );
+  }
+
+  return (
+    <img
+      key={`${playbackEpoch}:${activeUrl}`}
+      className={className}
+      src={activeUrl}
+      alt=""
+      draggable={false}
+    />
+  );
+}

src/app/components/user-profile/UserHero.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
-import { Avatar, Box, Modal, Overlay, OverlayBackdrop, OverlayCenter, Text, toRem } from 'folds';
+import { Avatar, Box, Overlay, Text, toRem } from 'folds';
 import { Icon, Icons } from '../icons';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
@@ -14,31 +14,36 @@ import { ImageViewer } from '../image-viewer';
 import { stopPropagation } from '../../utils/keyboard';
 import { useOtherUserColor } from '../../hooks/useUserColor';
 import { useOtherUserBanner } from '../../hooks/useUserBanner';
-import { useOtherUserProfileStyle } from '../../hooks/useUserProfileStyle';
+import { useOtherUserCollectibles } from '../../hooks/useUserCollectibles';
+import { pickAvatarDecorationUrl } from '../../utils/collectibleAssets';
+import * as avatarDecorationCss from '../../styles/AvatarDecoration.css';
+import { ProfileCollectibleOverlays } from './ProfileCollectibleOverlays';
 
 type UserHeroProps = {
   userId: string;
   avatarUrl?: string;
   avatarMxc?: string;
   presence?: UserPresence;
+  children?: ReactNode;
 };
-export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroProps) {
+export function UserHero({ userId, avatarUrl, avatarMxc, presence, children }: UserHeroProps) {
   const [viewAvatar, setViewAvatar] = useState<string>();
-  const bannerUrl = useOtherUserBanner(userId, avatarMxc); // Now returns blob URL directly
+  const bannerUrl = useOtherUserBanner(userId);
-  const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
+  const { assetUrls } = useOtherUserCollectibles(userId);
-
+  const avatarDecorationUrl = pickAvatarDecorationUrl(assetUrls);
-  console.log('[UserHero]', {
-    userId,
-    avatarMxc,
-    bannerUrl,
-    profileStyle,
-  });
 
   return (
-    <Box
+    <Box direction="Column" className={css.UserHeroZone}>
-      direction="Column"
+      {bannerUrl && (
-      className={css.UserHero}
+        <div className={css.UserHeroBannerReflection} aria-hidden="true">
-    >
+          <img
+            className={css.UserHeroBannerReflectionImg}
+            src={bannerUrl}
+            alt=""
+            draggable={false}
+          />
+        </div>
+      )}
       <div
         className={css.UserHeroCoverContainer}
         style={{
@@ -56,59 +61,71 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
       </div>
       <div className={css.UserHeroAvatarContainer}>
         <AvatarPresence
-          className={css.UserAvatarContainer}
+          className={classNames(
-          style={profileStyle.avatarBorderColor ? { backgroundColor: profileStyle.avatarBorderColor } : undefined}
+            css.UserAvatarContainer,
-          badgeBackgroundColor={profileStyle.avatarBorderColor}
+            !avatarUrl && css.UserAvatarContainerFallback
+          )}
           badge={
             presence && <PresenceBadge presence={presence.presence} status={presence.status} />
           }
         >
-          <Avatar
+          <div className={css.UserHeroAvatarStack}>
-            as={avatarUrl ? 'button' : 'div'}
+            <Avatar
-            onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
+              as={avatarUrl ? 'button' : 'div'}
-            className={css.UserHeroAvatar}
+              onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
-            size="500"
+              className={classNames(
-            style={{
+                css.UserHeroAvatar,
-              width: toRem(72),
+                avatarUrl ? css.UserHeroAvatarWithImage : css.UserHeroAvatarBorder
-              height: toRem(72),
+              )}
-              ...(profileStyle.avatarBorderColor ? {
+              size="500"
-                outline: `${toRem(4)} solid ${profileStyle.avatarBorderColor}`,
+              style={{
-                outlineOffset: toRem(-1),
+                width: toRem(72),
-              } : {}),
+                height: toRem(72),
-            }}
+              }}
-          >
+            >
-            <UserAvatar
+              <UserAvatar
-              className={css.UserHeroAvatarImg}
+                className={css.UserHeroAvatarImg}
-              userId={userId}
+                userId={userId}
-              src={avatarUrl}
+                src={avatarUrl}
-              alt={userId}
+                alt={userId}
-              renderFallback={() => <Icon size="500" src={Icons.User} filled />}
+                renderFallback={() => <Icon size="500" src={Icons.User} filled />}
-            />
+              />
-          </Avatar>
+            </Avatar>
+            {avatarDecorationUrl && (
+              <img
+                className={avatarDecorationCss.AvatarDecorationOverlay}
+                src={avatarDecorationUrl}
+                alt=""
+                draggable={false}
+              />
+            )}
+          </div>
         </AvatarPresence>
         {viewAvatar && (
-          <Overlay open backdrop={<OverlayBackdrop />}>
+          <Overlay open backdrop={null}>
-            <OverlayCenter>
+            <FocusTrap
-              <FocusTrap
+              focusTrapOptions={{
-                focusTrapOptions={{
+                initialFocus: false,
-                  initialFocus: false,
+                onDeactivate: () => setViewAvatar(undefined),
-                  onDeactivate: () => setViewAvatar(undefined),
+                clickOutsideDeactivates: true,
-                  clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
-                  escapeDeactivates: stopPropagation,
+              }}
-                }}
+            >
-              >
+              <ImageViewer
-                <Modal size="500" onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}>
+                src={viewAvatar}
-                  <ImageViewer
+                alt={userId}
-                    src={viewAvatar}
+                requestClose={() => setViewAvatar(undefined)}
-                    alt={userId}
+              />
-                    requestClose={() => setViewAvatar(undefined)}
+            </FocusTrap>
-                  />
-                </Modal>
-              </FocusTrap>
-            </OverlayCenter>
           </Overlay>
         )}
       </div>
+      {children && (
+        <Box direction="Column" className={css.UserHeroInfo}>
+          {children}
+        </Box>
+      )}
+      <ProfileCollectibleOverlays assetUrls={assetUrls} />
     </Box>
   );
 }
@@ -118,16 +135,9 @@ type UserHeroNameProps = {
   userId: string;
   avatarMxc?: string;
 };
-export function UserHeroName({ displayName, userId, avatarMxc }: UserHeroNameProps) {
+export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
   const username = getMxIdLocalPart(userId);
-  const userColor = useOtherUserColor(userId, avatarMxc);
+  const userColor = useOtherUserColor(userId);
-
-  console.log('[UserHeroName]', {
-    userId,
-    avatarMxc,
-    userColor,
-    fallbackColor: colorMXID(userId),
-  });
 
   return (
     <Box grow="Yes" direction="Column" gap="100">

src/app/components/user-profile/UserRoomProfile.tsx

@@ -2,7 +2,7 @@ import { Box, Button, color, config, Text, toRem } from 'folds';
 import { Icon, Icons } from '../icons';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { UserHero, UserHeroName } from './UserHero';
+import { UserHero } from './UserHero';
 import { getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
 import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -10,7 +10,6 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
 import { useUserPresence } from '../../hooks/useUserPresence';
-import { useOtherUserProfileStyle } from '../../hooks/useUserProfileStyle';
 import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { PowerChip } from './PowerChip';
@@ -24,7 +23,7 @@ import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
 import { CreatorChip } from './CreatorChip';
 import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
 import { DirectCreateSearchParams } from '../../pages/paths';
-import { getContrastingTextColor, stripAlphaFromColor, getTextShadowColor } from '../../utils/common';
+import { getTextShadowColor } from '../../utils/common';
 import classNames from 'classnames';
 import { BreakWord, LineClamp3 } from '../../styles/Text.css';
 import colorMXID, { getColorMXIDValue } from '../../../util/colorMXID';
@@ -65,13 +64,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
 
   const presence = useUserPresence(userId);
-  const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
+  const userColor = useOtherUserColor(userId);
-  const userColor = useOtherUserColor(userId, avatarMxc);
-
-  // Build gradient CSS if configured
-  const gradientStyle = profileStyle.gradient
-    ? `linear-gradient(${profileStyle.gradient.direction}, ${profileStyle.gradient.startColor}, ${profileStyle.gradient.stopColor})`
-    : undefined;
 
   const handleMessage = () => {
     closeUserRoomProfile();
@@ -93,22 +86,6 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   // Use userColor for text, or fall back to colorMXID
   const profileColor = userColor ? userColor : getColorMXIDValue(userId);
   const profileTextShadow = `0 1px 4px ${getTextShadowColor(profileColor)}`;
-  
-  // Use avatarBorderColor for pill background only if it has visible alpha (not fully transparent)
-  const hasVisibleBorder = profileStyle.avatarBorderColor && !profileStyle.avatarBorderColor.endsWith('00');
-  const pillBgColor = hasVisibleBorder ? stripAlphaFromColor(profileStyle.avatarBorderColor!) : undefined;
-
-  console.log('[UserRoomProfile]', {
-    userId,
-    avatarMxc,
-    userColor,
-    profileStyle,
-    profileColor,
-    profileTextShadow,
-    hasVisibleBorder,
-    pillBgColor,
-    fallbackColorMXID: getColorMXIDValue(userId),
-  });
 
   return (
     <Box direction="Column">
@@ -117,65 +94,60 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         avatarUrl={avatarUrl}
         avatarMxc={avatarMxc}
         presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
-      />
-      <Box 
-        direction="Column" 
-        gap="200" 
-        alignItems="Center"
-        style={{ 
-          padding: config.space.S400, 
-          paddingTop: `calc(${config.space.S200} + ${toRem(36)})`,
-          marginTop: toRem(-36),
-          background: gradientStyle,
-          textAlign: 'center'
-        }}
       >
-        {/* Display Name */}
+        <Box
-        <Text
+          direction="Column"
-          size="H4"
+          gap="200"
-          className={classNames(BreakWord, LineClamp3)}
+          alignItems="Center"
-          style={{ color: getMemberDisplayName(room, userId) !== userId ? profileColor : undefined, textShadow: profileTextShadow }}
+          style={{
+            padding: config.space.S400,
+            paddingTop: `calc(${config.space.S200} + ${toRem(36)})`,
+            marginTop: toRem(-36),
+          }}
         >
-          {getMemberDisplayName(room, userId)}
+          <Text
-        </Text>
+            size="H4"
-        
+            className={classNames(BreakWord, LineClamp3)}
-        {/* Username */}
-        <Text
-          size="T200"
-          className={BreakWord}
-          style={{ color: profileColor, textShadow: profileTextShadow }}
-        >
-          {userId}
-        </Text>
-        
-        {/* Status Pill */}
-        {presence?.status && (
-          <Box
             style={{
-              backgroundColor: pillBgColor || color.Surface.Container,
+              color: getMemberDisplayName(room, userId) !== userId ? profileColor : undefined,
-              border: pillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+              textShadow: profileTextShadow,
-              padding: `${toRem(6)} ${toRem(10)}`,
-              borderRadius: toRem(16),
-              maxWidth: toRem(250),
             }}
           >
-            <Text 
+            {getMemberDisplayName(room, userId)}
-              size="T300" 
+          </Text>
-              className={BreakWord}
+
+          <Text
+            size="T200"
+            className={BreakWord}
+            style={{ color: profileColor, textShadow: profileTextShadow }}
+          >
+            {userId}
+          </Text>
+
+          {presence?.status && (
+            <Box
               style={{
-                color: pillBgColor ? getContrastingTextColor(pillBgColor) : undefined
+                backgroundColor: color.Surface.Container,
+                border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+                padding: `${toRem(6)} ${toRem(10)}`,
+                borderRadius: toRem(16),
+                maxWidth: toRem(250),
               }}
             >
-              {presence.status}
+              <Text size="T300" className={BreakWord}>
-            </Text>
+                {presence.status}
-          </Box>
+              </Text>
-        )}
+            </Box>
-        
+          )}
+        </Box>
+      </UserHero>
+
+      <Box direction="Column" gap="200" alignItems="Center" style={{ padding: config.space.S400, textAlign: 'center' }}>
         {/* Chips Row */}
         <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
-          {server && <ServerChip server={server} borderColor={pillBgColor} />}
+          {server && <ServerChip server={server} />}
-          <ShareChip userId={userId} borderColor={pillBgColor} />
+          <ShareChip userId={userId} />
-          {creator ? <CreatorChip borderColor={pillBgColor} /> : <PowerChip userId={userId} borderColor={pillBgColor} />}
+          {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
         </Box>
         
         {/* Message Button */}
@@ -195,12 +167,13 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         {/* Additional Chips if needed */}
         {userId !== myUserId && (
           <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
-            <MutualRoomsChip userId={userId} borderColor={pillBgColor} />
+            <MutualRoomsChip userId={userId} />
-            <OptionsChip userId={userId} borderColor={pillBgColor} />
+            <OptionsChip userId={userId} />
           </Box>
         )}
       </Box>
-      {hasBottomContent && <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
+      {hasBottomContent && (
+      <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
         {ignored && <IgnoredUserAlert />}
         {member && membership === Membership.Ban && (
           <UserBanAlert
@@ -236,7 +209,8 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
           canKick={canKickUser && membership === Membership.Join}
           canBan={canBanUser && membership !== Membership.Ban}
         />
-      </Box>}
+      </Box>
+      )}
     </Box>
   );
 }

src/app/components/user-profile/styles.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
 
 export const UserHeader = style({
@@ -10,14 +10,26 @@ export const UserHeader = style({
   padding: config.space.S200,
 });
 
-export const UserHero = style({
+export const UserHeroZone = style({
   position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  isolation: 'isolate',
+});
+
+export const UserHeroCollectibleLayer = style({
+  position: 'absolute',
+  inset: 0,
+  zIndex: 10,
+  pointerEvents: 'none',
+  overflow: 'visible',
 });
 
 export const UserHeroCoverContainer = style({
   position: 'relative',
   height: toRem(140),
   overflow: 'hidden',
+  zIndex: 1,
 });
 export const UserHeroCover = style({
   height: '100%',
@@ -36,12 +48,68 @@ export const UserHeroBanner = style({
 export const UserHeroAvatarContainer = style({
   position: 'relative',
   height: toRem(29),
+  zIndex: 4,
+  overflow: 'visible',
 });
+
+export const UserHeroBannerReflection = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: toRem(140),
+  bottom: 0,
+  overflow: 'hidden',
+  zIndex: 0,
+  pointerEvents: 'none',
+});
+
+export const UserHeroBannerReflectionImg = style({
+  position: 'absolute',
+  top: toRem(12),
+  left: '-10%',
+  width: '120%',
+  height: toRem(160),
+  objectFit: 'cover',
+  transformOrigin: 'top center',
+  transform: 'scaleY(-1) scale(1.2)',
+  filter: 'blur(48px) saturate(1.15)',
+});
+
+export const UserHeroInfo = style({
+  position: 'relative',
+  zIndex: 4,
+  textAlign: 'center',
+  backgroundColor: 'transparent',
+});
+
+globalStyle(`${UserHeroBannerReflection}::after`, {
+  content: '',
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  height: toRem(72),
+  background: `linear-gradient(
+    to bottom,
+    transparent 0%,
+    color-mix(in srgb, ${color.Surface.Container} 55%, transparent) 55%,
+    ${color.Surface.Container} 100%
+  )`,
+  pointerEvents: 'none',
+});
+
 export const UserAvatarContainer = style({
   position: 'absolute',
   left: '50%',
   top: 0,
   transform: 'translate(-50%, -50%)',
+  zIndex: 4,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const UserAvatarContainerFallback = style({
   backgroundColor: color.Surface.Container,
 });
 
@@ -53,14 +121,31 @@ export const UserStatusBubble = style({
   zIndex: 2,
 });
 
+export const UserHeroAvatarStack = style({
+  position: 'relative',
+  width: toRem(72),
+  height: toRem(72),
+  flexShrink: 0,
+});
+
 export const UserHeroAvatar = style({
-  outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
   selectors: {
     'button&': {
       cursor: 'pointer',
     },
   },
 });
+
+export const UserHeroAvatarBorder = style({
+  outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
+  border: 'none',
+});
+
+export const UserHeroAvatarWithImage = style({
+  outline: 'none',
+  border: 'none',
+  boxShadow: 'none',
+});
 export const UserHeroAvatarImg = style({
   selectors: {
     [`button${UserHeroAvatar}:hover &`]: {
@@ -68,3 +153,15 @@ export const UserHeroAvatarImg = style({
     },
   },
 });
+
+export const ProfileEffectOverlay = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  width: '100%',
+  aspectRatio: '450 / 880',
+  objectFit: 'contain',
+  objectPosition: 'top center',
+  pointerEvents: 'none',
+});

src/app/components/video-viewer/VideoViewer.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import FileSaver from 'file-saver';
 import classNames from 'classnames';
 import { Box, Chip, Header, IconButton, Text, as } from 'folds';
 import { Icon, Icons } from '../icons';
 import * as css from './VideoViewer.css';
-import { downloadMedia } from '../../utils/matrix';
+import { downloadAndSaveMedia } from '../../utils/saveMedia';
 import { getCurrentAccessToken } from '../../utils/auth';
 
 export type VideoViewerProps = {
@@ -14,20 +13,16 @@ export type VideoViewerProps = {
 };
 
 export const VideoViewer = as<'div', VideoViewerProps>(
-  ({ className, alt, src, requestClose, ...props }, ref) => {    const handleDownload = async () => {
+  ({ className, alt, src, requestClose, ...props }, ref) => {
+    const handleDownload = async () => {
       try {
-        const fileContent = await downloadMedia(src, getCurrentAccessToken());
+        await downloadAndSaveMedia(src, alt, getCurrentAccessToken());
-        FileSaver.saveAs(fileContent, alt);
       } catch (error) {
         console.warn('[VideoViewer] Failed to download media:', error);
         try {
-          const response = await fetch(src);
-          if (response.ok) {
-            const blob = await response.blob();
-            FileSaver.saveAs(blob, alt);
-          }
-        } catch {
           window.open(src, '_blank');
+        } catch {
+          // ignore
         }
       }
     };

src/app/data/updateNotes.ts

@@ -0,0 +1,187 @@
+import bundledManifest from '../../../public/update/manifest.json';
+import { trimTrailingSlash } from '../utils/common';
+
+const bundledMarkdownByFile = import.meta.glob('../../../public/update/*.md', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>;
+
+const bundledImageByFile = import.meta.glob('../../../public/update/images/*', {
+  import: 'default',
+  eager: true,
+}) as Record<string, string>;
+
+function getUpdateBaseUrl(): string {
+  const basePath = trimTrailingSlash(import.meta.env.BASE_URL || './');
+  const relative =
+    basePath === '.' || basePath === '' ? 'update/' : `${basePath}/update/`;
+  return new URL(relative, window.location.href).href.replace(/\/$/, '');
+}
+
+function getUpdateFileUrl(file: string): string {
+  return new URL(file, `${getUpdateBaseUrl()}/`).href;
+}
+
+export type UpdateManifestEntry = {
+  file: string;
+  version?: string;
+  title?: string;
+  date?: string;
+};
+
+export type UpdateManifest = {
+  current: string;
+  older: UpdateManifestEntry[];
+};
+
+export type ParsedUpdateDoc = {
+  file: string;
+  version?: string;
+  title?: string;
+  date?: string;
+  summary?: string;
+  markdown: string;
+};
+
+const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/;
+
+function parseFrontmatter(source: string): { frontmatter: Record<string, string>; body: string } {
+  const match = FRONTMATTER_RE.exec(source.trimStart());
+  if (!match) {
+    return { frontmatter: {}, body: source };
+  }
+
+  const frontmatter: Record<string, string> = {};
+  match[1].split('\n').forEach((line) => {
+    const colon = line.indexOf(':');
+    if (colon <= 0) return;
+    const key = line.slice(0, colon).trim();
+    const raw = line.slice(colon + 1).trim();
+    frontmatter[key] = raw.replace(/^['"]|['"]$/g, '');
+  });
+
+  return { frontmatter, body: match[2] };
+}
+
+function parseUpdateMarkdown(file: string, source: string): ParsedUpdateDoc {
+  const { frontmatter, body } = parseFrontmatter(source);
+  return {
+    file,
+    version: frontmatter.version,
+    title: frontmatter.title,
+    date: frontmatter.date,
+    summary: frontmatter.summary,
+    markdown: body.trim(),
+  };
+}
+
+function loadBundledManifest(): UpdateManifest {
+  const manifest = bundledManifest as UpdateManifest;
+  return {
+    current: manifest.current,
+    older: (manifest.older ?? []).filter((entry) => entry?.file),
+  };
+}
+
+function loadBundledDocument(file: string): ParsedUpdateDoc | null {
+  const safeFile = file.replace(/^\/+/, '');
+  const entry = Object.entries(bundledMarkdownByFile).find(([path]) =>
+    path.endsWith(`/${safeFile}`)
+  );
+  if (!entry) return null;
+  return parseUpdateMarkdown(safeFile, entry[1]);
+}
+
+function resolveBundledImageUrl(normalizedPath: string): string | undefined {
+  const needle = normalizedPath.replace(/^\/+/, '');
+  if (!needle) return undefined;
+
+  const entry = Object.entries(bundledImageByFile).find(([path]) => {
+    const normalized = path.replace(/\\/g, '/');
+    return normalized.endsWith(`/${needle}`) || normalized.endsWith(`/${needle.split('/').pop() ?? ''}`);
+  });
+
+  return entry?.[1];
+}
+
+export function resolveUpdateAssetUrl(src: string | undefined): string | undefined {
+  if (!src) return undefined;
+  if (/^(https?:|data:|blob:|capacitor:)/i.test(src)) return src;
+
+  const normalized = src.replace(/^\.\//, '').replace(/^\/+/, '');
+  const bundled = resolveBundledImageUrl(normalized);
+  if (bundled) return bundled;
+
+  if (src.startsWith('/')) return src;
+
+  return new URL(normalized, `${getUpdateBaseUrl()}/`).href;
+}
+
+export async function loadUpdateManifest(): Promise<UpdateManifest | null> {
+  try {
+    const response = await fetch(getUpdateFileUrl('manifest.json'), { cache: 'no-cache' });
+    if (response.ok) {
+      const data = (await response.json()) as UpdateManifest;
+      if (data?.current && Array.isArray(data.older)) {
+        return {
+          current: data.current,
+          older: data.older.filter((entry) => entry?.file),
+        };
+      }
+    }
+  } catch {
+    // fall through to bundled copy (Capacitor / offline)
+  }
+
+  try {
+    return loadBundledManifest();
+  } catch {
+    return null;
+  }
+}
+
+export async function loadUpdateDocument(file: string): Promise<ParsedUpdateDoc | null> {
+  const safeFile = file.replace(/^\/+/, '');
+  if (!safeFile || safeFile.includes('..')) return null;
+
+  try {
+    const response = await fetch(getUpdateFileUrl(safeFile), { cache: 'no-cache' });
+    if (response.ok) {
+      const source = await response.text();
+      return parseUpdateMarkdown(safeFile, source);
+    }
+  } catch {
+    // fall through to bundled copy
+  }
+
+  return loadBundledDocument(safeFile);
+}
+
+export async function loadCurrentUpdateDocument(): Promise<ParsedUpdateDoc | null> {
+  const manifest = await loadUpdateManifest();
+  if (!manifest) return null;
+  return loadUpdateDocument(manifest.current);
+}
+
+export async function getCurrentUpdatePreview(): Promise<{
+  title: string;
+  description: string;
+} | null> {
+  const doc = await loadCurrentUpdateDocument();
+  if (!doc) return null;
+
+  const title = doc.title ?? (doc.version ? `Paarrot ${doc.version}` : 'Release notes');
+  const description =
+    doc.summary ??
+    doc.markdown
+      .replace(/^#+\s+/gm, '')
+      .replace(/!\[[^\]]*\]\([^)]+\)/g, '')
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+      .split('\n')
+      .map((line) => line.replace(/^[-*•]\s*/, '').trim())
+      .find(Boolean) ??
+    'See what changed in this version.';
+
+  return { title, description };
+}

src/app/features/common-settings/developer-tools/SendRoomEvent.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
 import { MatrixError } from 'matrix-js-sdk';
-import { Box, Chip, IconButton, Text, config, Button, Spinner, color, TextAreaComponent as TextArea, Input } from 'folds';
+import { Box, Chip, IconButton, Text, config, Button, Spinner, color, TextArea, Input } from 'folds';
 import { Icon, Icons } from '../../../components/icons';
 import { Page, PageHeader } from '../../../components/page';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -171,7 +171,7 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
             <Box shrink="No">
               <Text size="L400">JSON Content</Text>
             </Box>
-            <TextAreaComponent
+            <TextArea
               ref={textAreaRef}
               name="contentTextArea"
               style={{ fontFamily: 'monospace' }}

src/app/features/common-settings/developer-tools/StateEventEditor.tsx

@@ -1,5 +1,5 @@
 import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Text, IconButton, Chip, Scroll, config, TextAreaComponent as TextArea, color, Spinner, Button } from 'folds';
+import { Box, Text, IconButton, Chip, Scroll, config, TextArea, color, Spinner, Button } from 'folds';
 import { Icon, Icons } from '../../../components/icons';
 import { MatrixError } from 'matrix-js-sdk';
 import { Page, PageHeader } from '../../../components/page';
@@ -153,7 +153,7 @@ function StateEventEdit({ type, stateKey, content, requestClose }: StateEventEdi
         <Box shrink="No">
           <Text size="L400">JSON Content</Text>
         </Box>
-        <TextAreaComponent
+        <TextArea
           ref={textAreaRef}
           name="contentTextArea"
           style={{ fontFamily: 'monospace' }}

src/app/features/message-search/SearchResultGroup.tsx

@@ -105,7 +105,7 @@ function SearchResultItem({
     relation?.rel_type === RelationType.Thread ? relation.event_id : undefined;
 
   // Get custom user color from avatar metadata
-  const customUserColor = useOtherUserColor(event.sender, senderAvatarMxc);
+  const customUserColor = useOtherUserColor(event.sender, room);
 
   const memberPowerTag = getMemberPowerTag(event.sender);
   const tagColor = memberPowerTag?.color

src/app/features/room-app/RoomAppSchema.tsx

@@ -0,0 +1,205 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Box, Button, Input, Text, config } from 'folds';
+import { MatrixClient } from 'matrix-js-sdk';
+import {
+  PaarrotUiActionContent,
+  PaarrotUiButtonNode,
+  PaarrotUiContent,
+  PaarrotUiNode,
+} from '../../../types/matrix/room';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { isAllowedRoomAppImageSrc, scopeRoomAppCss } from './sanitizeRoomAppCss';
+import * as css from './RoomAppView.css';
+
+const SCOPE = '[data-room-app]';
+
+type RoomAppSchemaProps = {
+  mx: MatrixClient;
+  content: PaarrotUiContent;
+  uiEventId?: string;
+  useAuthentication: boolean;
+  onAction: (payload: PaarrotUiActionContent) => void | Promise<void>;
+};
+
+function fieldName(node: { id: string; name?: string }): string {
+  return node.name || node.id;
+}
+
+function spacerSize(size?: number): 'sm' | 'md' | 'lg' {
+  if (typeof size === 'number' && size <= 8) return 'sm';
+  if (typeof size === 'number' && size >= 24) return 'lg';
+  return 'md';
+}
+
+export function RoomAppSchema({
+  mx,
+  content,
+  uiEventId,
+  useAuthentication,
+  onAction,
+}: RoomAppSchemaProps) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [sending, setSending] = useState(false);
+
+  const scopedCss = useMemo(
+    () => (content.css ? scopeRoomAppCss(content.css, SCOPE) : ''),
+    [content.css]
+  );
+
+  const setField = useCallback((name: string, value: string) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+  }, []);
+
+  const handleButton = useCallback(
+    async (node: PaarrotUiButtonNode) => {
+      if (node.disabled || sending) return;
+      setSending(true);
+      try {
+        await onAction({
+          action: node.action,
+          component_id: node.id,
+          value: node.value,
+          values: { ...values },
+          ui_event_id: uiEventId,
+        });
+      } finally {
+        setSending(false);
+      }
+    },
+    [onAction, sending, uiEventId, values]
+  );
+
+  const renderNode = (node: PaarrotUiNode): React.ReactNode => {
+    switch (node.type) {
+      case 'panel':
+        return (
+          <div key={node.id} className={css.Panel} data-room-app-node={node.id}>
+            {node.children?.map((child) => renderNode(child))}
+          </div>
+        );
+      case 'row':
+        return (
+          <div key={node.id} className={css.Row} data-room-app-node={node.id}>
+            {node.children?.map((child) => renderNode(child))}
+          </div>
+        );
+      case 'text':
+        return (
+          <Text
+            key={node.id}
+            as="p"
+            size="T400"
+            className={node.className}
+            data-room-app-node={node.id}
+          >
+            {node.text ?? ''}
+          </Text>
+        );
+      case 'button': {
+        const variant = node.variant ?? 'Primary';
+        return (
+          <Button
+            key={node.id}
+            type="button"
+            size="400"
+            variant={variant}
+            radii="300"
+            disabled={node.disabled || sending}
+            onClick={() => handleButton(node)}
+            data-room-app-node={node.id}
+          >
+            <Text size="B400">{node.label}</Text>
+          </Button>
+        );
+      }
+      case 'input': {
+        const name = fieldName(node);
+        const current = values[name] ?? node.value ?? '';
+        return (
+          <div key={node.id} className={css.Field} data-room-app-node={node.id}>
+            {node.label && (
+              <Text as="label" size="L400" htmlFor={`room-app-${node.id}`}>
+                {node.label}
+              </Text>
+            )}
+            <Input
+              id={`room-app-${node.id}`}
+              name={name}
+              variant="Background"
+              radii="300"
+              type={node.inputType ?? 'text'}
+              placeholder={node.placeholder}
+              value={current}
+              onChange={(evt) => setField(name, evt.currentTarget.value)}
+            />
+          </div>
+        );
+      }
+      case 'select': {
+        const name = fieldName(node);
+        const current = values[name] ?? node.value ?? '';
+        return (
+          <div key={node.id} className={css.Field} data-room-app-node={node.id}>
+            {node.label && (
+              <Text as="label" size="L400" htmlFor={`room-app-${node.id}`}>
+                {node.label}
+              </Text>
+            )}
+            <Box as="span" grow="Yes" style={{ position: 'relative' }}>
+              <select
+                id={`room-app-${node.id}`}
+                name={name}
+                value={current}
+                onChange={(evt) => setField(name, evt.currentTarget.value)}
+                style={{
+                  width: '100%',
+                  padding: `${config.space.S200} ${config.space.S300}`,
+                  borderRadius: config.radii.R300,
+                  border: '1px solid var(--bq-border, CurrentColor)',
+                  background: 'transparent',
+                  color: 'inherit',
+                  font: 'inherit',
+                }}
+              >
+                {(node.options ?? []).map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </Box>
+          </div>
+        );
+      }
+      case 'image': {
+        if (!isAllowedRoomAppImageSrc(node.src)) return null;
+        const httpSrc = node.src.startsWith('mxc://')
+          ? mxcUrlToHttp(mx, node.src, useAuthentication) ?? undefined
+          : node.src;
+        if (!httpSrc) return null;
+        return (
+          <img
+            key={node.id}
+            className={css.Image}
+            src={httpSrc}
+            alt={node.alt ?? ''}
+            width={node.width}
+            height={node.height}
+            data-room-app-node={node.id}
+          />
+        );
+      }
+      case 'spacer':
+        return <div key={node.id} className={css.Spacer({ size: spacerSize(node.size) })} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div data-room-app="">
+      {scopedCss ? <style>{scopedCss}</style> : null}
+      {renderNode(content.root)}
+    </div>
+  );
+}

src/app/features/room-app/RoomAppView.css.ts

@@ -0,0 +1,74 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { DefaultReset, config, toRem } from 'folds';
+
+export const Root = style([
+  DefaultReset,
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    minHeight: 0,
+    minWidth: 0,
+  },
+]);
+
+export const Header = style({
+  paddingLeft: config.space.S200,
+  paddingRight: config.space.S200,
+});
+
+export const Body = style([
+  DefaultReset,
+  {
+    flexGrow: 1,
+    minHeight: 0,
+    overflow: 'auto',
+    padding: config.space.S400,
+  },
+]);
+
+export const Panel = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S300,
+  width: '100%',
+});
+
+export const Row = style({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  gap: config.space.S200,
+  alignItems: 'center',
+});
+
+export const Field = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S100,
+  minWidth: toRem(160),
+  flexGrow: 1,
+});
+
+export const Image = style({
+  maxWidth: '100%',
+  height: 'auto',
+  borderRadius: config.radii.R300,
+});
+
+export const Spacer = recipe({
+  base: {
+    flexShrink: 0,
+  },
+  variants: {
+    size: {
+      sm: { height: config.space.S200 },
+      md: { height: config.space.S400 },
+      lg: { height: config.space.S600 },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

src/app/features/room-app/RoomAppView.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+import { Box, Button, Header, Text, config } from 'folds';
+import { Room } from 'matrix-js-sdk';
+import { Page } from '../../components/page';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useStateEvent } from '../../hooks/useStateEvent';
+import { useRoomName } from '../../hooks/useRoomMeta';
+import {
+  MessageEvent,
+  PaarrotUiActionContent,
+  StateEvent,
+} from '../../../types/matrix/room';
+import { parsePaarrotUiContent } from '../../utils/room';
+import { RoomAppSchema } from './RoomAppSchema';
+import * as css from './RoomAppView.css';
+
+type RoomAppViewProps = {
+  room: Room;
+  onShowChat: () => void;
+};
+
+export function RoomAppView({ room, onShowChat }: RoomAppViewProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const roomName = useRoomName(room);
+  const uiEvent = useStateEvent(room, StateEvent.PaarrotUi);
+  const content = parsePaarrotUiContent(uiEvent?.getContent());
+  const title = content?.title || roomName || 'Room App';
+
+  const handleAction = useCallback(
+    async (payload: PaarrotUiActionContent) => {
+      await mx.sendEvent(room.roomId, MessageEvent.PaarrotUiAction as any, payload);
+    },
+    [mx, room.roomId]
+  );
+
+  return (
+    <Page>
+      <Header className={css.Header} size="600">
+        <Box grow="Yes" alignItems="Center" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200" minWidth="0">
+            <Text size="H6" truncate>
+              {title}
+            </Text>
+          </Box>
+          <Button size="300" variant="Secondary" radii="300" onClick={onShowChat}>
+            <Text size="B300">Show chat</Text>
+          </Button>
+        </Box>
+      </Header>
+      <Box className={css.Body} grow="Yes" direction="Column" style={{ gap: config.space.S400 }}>
+        {content ? (
+          <RoomAppSchema
+            mx={mx}
+            content={content}
+            uiEventId={uiEvent?.getId()}
+            useAuthentication={useAuthentication}
+            onAction={handleAction}
+          />
+        ) : (
+          <Text size="T400">This room’s app UI is missing or invalid.</Text>
+        )}
+      </Box>
+    </Page>
+  );
+}

src/app/features/room-app/index.ts

@@ -0,0 +1,7 @@
+export { RoomAppView } from './RoomAppView';
+export { RoomAppSchema } from './RoomAppSchema';
+export {
+  sanitizeRoomAppCss,
+  scopeRoomAppCss,
+  isAllowedRoomAppImageSrc,
+} from './sanitizeRoomAppCss';

src/app/features/room-app/sanitizeRoomAppCss.ts

@@ -0,0 +1,91 @@
+/**
+ * Strip dangerous CSS constructs from bot-supplied stylesheets.
+ * Not a full CSS parser — best-effort for MVP scoped injection.
+ */
+export function sanitizeRoomAppCss(css: string): string {
+  let out = css;
+  out = out.replace(/@import\b[^;{]*;?/gi, '');
+  out = out.replace(/url\s*\(\s*['"]?\s*javascript:[^)]*\)/gi, 'url(about:blank)');
+  out = out.replace(/expression\s*\([^)]*\)/gi, 'initial');
+  out = out.replace(/-moz-binding\s*:[^;]+;?/gi, '');
+  out = out.replace(/behavior\s*:[^;]+;?/gi, '');
+  out = out.replace(/@charset\b[^;]*;?/gi, '');
+  return out;
+}
+
+/**
+ * Prefix plain selectors with a scope so bot CSS cannot escape the room app root.
+ * At-rules (@media, @supports, @keyframes) are kept with nested rules re-scoped where possible.
+ */
+export function scopeRoomAppCss(css: string, scopeSelector: string): string {
+  const sanitized = sanitizeRoomAppCss(css).trim();
+  if (!sanitized) return '';
+
+  const scopeRule = (selectors: string, body: string): string => {
+    const scoped = selectors
+      .split(',')
+      .map((s) => {
+        const sel = s.trim();
+        if (!sel) return '';
+        if (sel.startsWith(scopeSelector)) return sel;
+        return `${scopeSelector} ${sel}`;
+      })
+      .filter(Boolean)
+      .join(', ');
+    return `${scoped}{${body}}`;
+  };
+
+  const rewriteBlock = (block: string): string => {
+    const trimmed = block.trim();
+    if (!trimmed) return '';
+
+    if (trimmed.startsWith('@')) {
+      const open = trimmed.indexOf('{');
+      if (open === -1) return `${trimmed};`;
+      const header = trimmed.slice(0, open).trim();
+      const inner = trimmed.slice(open + 1);
+      // @keyframes / @font-face: keep as-is (namespaced risk is low for MVP)
+      if (/^@(keyframes|font-face)\b/i.test(header)) {
+        return `${header}{${inner}}`;
+      }
+      // @media / @supports: re-scope nested rules
+      const nested = rewriteCssChunk(inner);
+      return `${header}{${nested}}`;
+    }
+
+    const open = trimmed.indexOf('{');
+    if (open === -1) return '';
+    const selectors = trimmed.slice(0, open);
+    const body = trimmed.slice(open + 1);
+    return scopeRule(selectors, body);
+  };
+
+  const rewriteCssChunk = (chunk: string): string => {
+    const parts: string[] = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < chunk.length; i += 1) {
+      const ch = chunk[i];
+      if (ch === '{') depth += 1;
+      else if (ch === '}') {
+        depth -= 1;
+        if (depth === 0) {
+          parts.push(rewriteBlock(chunk.slice(start, i)));
+          start = i + 1;
+        }
+      }
+    }
+    return parts.filter(Boolean).join('\n');
+  };
+
+  return rewriteCssChunk(sanitized);
+}
+
+export function isAllowedRoomAppImageSrc(src: string): boolean {
+  const trimmed = src.trim();
+  return (
+    trimmed.startsWith('mxc://') ||
+    trimmed.startsWith('https://') ||
+    trimmed.startsWith('http://')
+  );
+}

src/app/features/room-settings/permissions/usePermissionItems.ts

@@ -204,6 +204,19 @@ export const usePermissionGroups = (): PermissionGroup[] => {
           },
           name: 'Modify Widgets',
         },
+        {
+          location: {
+            state: true,
+            key: StateEvent.PaarrotUi,
+          },
+          name: 'Set Room App UI',
+        },
+        {
+          location: {
+            key: MessageEvent.PaarrotUiAction,
+          },
+          name: 'Send Room App Actions',
+        },
       ],
     };
 

src/app/features/room/Room.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Box, Line } from 'folds';
+import { Box, Button, Line, Text, config } from 'folds';
 import { decodeRouteParam } from '../../pages/pathUtils';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
@@ -18,8 +18,11 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { activeRoomIdAtom } from '../../state/activeRoom';
 import { isMediaDrawerAtom } from '../../state/mediaDrawer';
-import { isForum } from '../../utils/room';
+import { isForum, parsePaarrotUiContent } from '../../utils/room';
 import { ForumRoomView } from './ForumRoomView';
+import { useStateEvent } from '../../hooks/useStateEvent';
+import { StateEvent } from '../../../types/matrix/room';
+import { RoomAppView } from '../room-app';
 
 export function Room() {
   const { eventId: rawEventId } = useParams();
@@ -41,6 +44,16 @@ export function Room() {
   const showRightDrawer =
     !skinny && (isPeopleDrawer || isMediaDrawer);
 
+  const uiEvent = useStateEvent(room, StateEvent.PaarrotUi);
+  const hasAppUi = useMemo(() => !!parsePaarrotUiContent(uiEvent?.getContent()), [uiEvent]);
+  const [preferChat, setPreferChat] = useState(false);
+
+  useEffect(() => {
+    setPreferChat(false);
+  }, [room.roomId]);
+
+  const showAppView = !forumRoom && hasAppUi && !preferChat;
+
   // Update titlebar with current room ID
   useEffect(() => {
     setActiveRoomId(room.roomId);
@@ -63,10 +76,38 @@ export function Room() {
     <PowerLevelsContextProvider value={powerLevels}>
       <Box grow="Yes">
         {!showMediaSolo &&
-          (forumRoom ? (
+          (showAppView ? (
+            <RoomAppView room={room} onShowChat={() => setPreferChat(true)} />
+          ) : forumRoom ? (
             <ForumRoomView room={room} eventId={eventId} />
           ) : (
-            <RoomView room={room} eventId={eventId} />
+            <Box grow="Yes" direction="Column" style={{ minWidth: 0, minHeight: 0 }}>
+              {hasAppUi && preferChat && (
+                <Box
+                  shrink="No"
+                  alignItems="Center"
+                  justifyContent="SpaceBetween"
+                  gap="200"
+                  style={{
+                    padding: `${config.space.S200} ${config.space.S300}`,
+                    borderBottom: '1px solid var(--bq-surface-border, CurrentColor)',
+                  }}
+                >
+                  <Text size="T300">Room app available</Text>
+                  <Button
+                    size="300"
+                    variant="Primary"
+                    radii="300"
+                    onClick={() => setPreferChat(false)}
+                  >
+                    <Text size="B300">Show app</Text>
+                  </Button>
+                </Box>
+              )}
+              <Box grow="Yes" direction="Column" style={{ minWidth: 0, minHeight: 0 }}>
+                <RoomView room={room} eventId={eventId} />
+              </Box>
+            </Box>
           ))}
         {showMediaSolo && <MediaDrawer room={room} solo />}
         {!showMediaSolo && showRightDrawer && (

src/app/features/room/RoomInput.tsx

@@ -183,7 +183,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     );
 
     // Get custom user color from avatar metadata
-    const replyCustomColor = useOtherUserColor(replyUserID ?? '', replyAvatarMxc);
+    const replyCustomColor = useOtherUserColor(replyUserID ?? '', room);
 
     const replyPowerTag = replyUserID ? getMemberPowerTag(replyUserID) : undefined;
     const replyPowerColor = replyPowerTag?.color

src/app/features/room/RoomTimeline.css.ts

@@ -29,7 +29,26 @@ export const TimelineFloat = recipe({
   },
 });
 
-export type TimelineFloatVariants = RecipeVariants<typeof TimelineFloat>;
+export const DmNameplateBackground = style({
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  zIndex: 0,
+  overflow: 'hidden',
+});
+
+export const DmNameplateBackgroundMedia = style({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  left: 'auto',
+  width: toRem(280),
+  maxWidth: '70%',
+  height: toRem(64),
+  objectFit: 'cover',
+  objectPosition: 'right top',
+  opacity: 0.12,
+});
 
 export const CarouselScroller = style([
   DefaultReset,

src/app/features/room/RoomTimeline.tsx

@@ -117,6 +117,8 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
 import { useIsDirectRoom } from '../../hooks/useRoom';
+import { useOtherUserCollectibles } from '../../hooks/useUserCollectibles';
+import { pickNameplateUrl } from '../../utils/collectibleAssets';
 import { setupCopyHandler } from '../../utils/copyHandler';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
@@ -137,6 +139,8 @@ import {
   PAARROT_CAROUSEL_TOTAL_PROPERTY_NAME,
   PAARROT_CAROUSEL_UUID_PROPERTY_NAME,
 } from '../../../types/matrix/common';
+import { EmojiConfettiOverlay } from './emoji-confetti/EmojiConfettiOverlay';
+import { useJumboEmojiConfetti } from './emoji-confetti/useJumboEmojiConfetti';
 
 /** Information about a call member event for grouping */
 interface CallEventInfo {
@@ -568,6 +572,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
   const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
   const direct = useIsDirectRoom();
+  const dmUserId = direct ? room.guessDMUserId() ?? undefined : undefined;
+  const [timelineHovered, setTimelineHovered] = useState(false);
+  const { assetUrls: dmAssetUrls } = useOtherUserCollectibles(dmUserId ?? '');
+  const dmNameplateUrl = pickNameplateUrl(dmAssetUrls);
+  const dmNameplateIsVideo = Boolean(
+    dmAssetUrls['nameplate:animated'] || dmAssetUrls['nameplate:asset.webm']
+  );
   const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
@@ -582,6 +593,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   );
   const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
   const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+  const { bursts: emojiConfettiBursts, removeBurst: removeEmojiConfettiBurst, handleJumboEmojiClick } =
+    useJumboEmojiConfetti(room);
 
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
   const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
@@ -1597,6 +1610,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 linkifyOpts={linkifyOpts}
                 outlineAttachment={messageLayout === MessageLayout.Bubble}
                 disabledEmbedPatterns={combinedEmbedFilters}
+                targetEventId={mEventId}
+                onJumboEmojiClick={handleJumboEmojiClick}
               />
             )}
           </Message>
@@ -1705,6 +1720,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                       linkifyOpts={linkifyOpts}
                       outlineAttachment={messageLayout === MessageLayout.Bubble}
                       disabledEmbedPatterns={combinedEmbedFilters}
+                      targetEventId={mEventId}
+                      onJumboEmojiClick={handleJumboEmojiClick}
                     />
                   );
                 }
@@ -2002,6 +2019,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         // Return special marker for call event (will be handled by eventRenderer)
         return 'CALL_EVENT_PENDING' as unknown as React.ReactNode;
       },
+      [MessageEvent.RelayEmojiConfetti]: () => null,
+      [MessageEvent.PaarrotUiAction]: () => null,
     },
     (mEventId, mEvent, item) => {
       if (!showHiddenEvents) return null;
@@ -2520,7 +2539,33 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const atLiveBottom = atBottom && liveTimelineLinked && rangeAtEnd;
 
   return (
-    <Box grow="Yes" style={{ position: 'relative' }}>
+    <Box
+      grow="Yes"
+      style={{ position: 'relative' }}
+      onMouseEnter={() => setTimelineHovered(true)}
+      onMouseLeave={() => setTimelineHovered(false)}
+    >
+      {direct && timelineHovered && dmNameplateUrl && (
+        <div className={css.DmNameplateBackground} aria-hidden="true">
+          {dmNameplateIsVideo ? (
+            <video
+              className={css.DmNameplateBackgroundMedia}
+              src={dmNameplateUrl}
+              autoPlay
+              loop
+              muted
+              playsInline
+            />
+          ) : (
+            <img
+              className={css.DmNameplateBackgroundMedia}
+              src={dmNameplateUrl}
+              alt=""
+              draggable={false}
+            />
+          )}
+        </div>
+      )}
       <Scroll ref={scrollRef} visibility="Hover" data-room-timeline-scroll="">
         <Box
           ref={timelineContentRef}
@@ -2704,6 +2749,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           </Box>
         </TimelineFloat>
       )}
+      <EmojiConfettiOverlay bursts={emojiConfettiBursts} onBurstComplete={removeEmojiConfettiBurst} />
     </Box>
   );
 }

src/app/features/room/RoomViewHeader.tsx

@@ -489,7 +489,7 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
   const dmAvatarMxc =
     (dmUserId ? room.getMember(dmUserId)?.getMxcAvatarUrl() : undefined) ||
     (isDirect ? avatarMxc : undefined);
-  const dmCustomColor = useOtherUserColor(dmUserId ?? '', dmAvatarMxc);
+  const dmCustomColor = useOtherUserColor(dmUserId ?? '');
   const dmFolderTabColor =
     stationery && isDirect
       ? `color-mix(in srgb, ${dmCustomColor ?? colorMXID(dmUserId ?? room.roomId)} 50%, var(--folder-tab-room, #f3e6c8))`

src/app/features/room/ThreadView.tsx

@@ -65,6 +65,8 @@ import * as roomViewCss from './RoomViewFollowing.css';
 import { Message, Reactions, EncryptedContent } from './message';
 import { Reply } from '../../components/message';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
+import { EmojiConfettiOverlay } from './emoji-confetti/EmojiConfettiOverlay';
+import { useJumboEmojiConfetti } from './emoji-confetti/useJumboEmojiConfetti';
 import {
   LINKIFY_OPTS,
   factoryRenderLinkifyWithMention,
@@ -156,6 +158,8 @@ export function ThreadView({ room, threadRootId }: ThreadViewProps) {
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
   const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const { bursts: emojiConfettiBursts, removeBurst: removeEmojiConfettiBurst, handleJumboEmojiClick } =
+    useJumboEmojiConfetti(room);
 
   const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
   const direct = useIsDirectRoom();
@@ -638,6 +642,8 @@ export function ThreadView({ room, threadRootId }: ThreadViewProps) {
                 linkifyOpts={linkifyOpts}
                 outlineAttachment={messageLayout === MessageLayout.Bubble}
                 disabledEmbedPatterns={combinedEmbedFilters}
+                targetEventId={mEventId}
+                onJumboEmojiClick={handleJumboEmojiClick}
               />
             )}
           </EncryptedContent>
@@ -654,6 +660,8 @@ export function ThreadView({ room, threadRootId }: ThreadViewProps) {
             linkifyOpts={linkifyOpts}
             outlineAttachment={messageLayout === MessageLayout.Bubble}
             disabledEmbedPatterns={combinedEmbedFilters}
+            targetEventId={mEventId}
+            onJumboEmojiClick={handleJumboEmojiClick}
           />
         )}
       </Message>
@@ -759,6 +767,10 @@ export function ThreadView({ room, threadRootId }: ThreadViewProps) {
               {events.map((evt, idx, arr) => renderEvent(evt, idx, arr))}
             </Box>
           </Scroll>
+          <EmojiConfettiOverlay
+            bursts={emojiConfettiBursts}
+            onBurstComplete={removeEmojiConfettiBurst}
+          />
         </Box>
         <div className={roomViewCss.RoomViewBottomFloat}>
           <RoomViewTyping room={room} />

src/app/features/room/emoji-confetti/EmojiConfettiBurstCanvas.tsx

@@ -0,0 +1,375 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { EmojiConfettiBurst } from './types';
+import { findJumboEmojiElement, getLocalBurstCanvasSize, measureJumboGlyph, setJumboEmojiHidden } from './findJumboMount';
+import {
+  BurstParticle,
+  drawBurstParticles,
+  spawnEmojiBurst,
+  stepBurstParticles,
+} from './emojiBurstEngine';
+import { getEmojiBurstProfile, isFullscreenBurstEmoji } from './emojiParticleProfiles';
+import {
+  createFireworkSim,
+  drawFireworkSim,
+  FireworkSim,
+  getFireworkDpr,
+  stepFireworkSim,
+  syncFireworkHero,
+} from './fireworkParticleEngine';
+
+const MAX_DPR = 2;
+
+type EmojiConfettiBurstCanvasProps = {
+  burst: EmojiConfettiBurst;
+  onComplete: (burstId: string) => void;
+};
+
+export function EmojiConfettiBurstCanvas({ burst, onComplete }: EmojiConfettiBurstCanvasProps) {
+  const primaryEmoji = burst.emojis[0] ?? '🎉';
+  const fullscreen = isFullscreenBurstEmoji(primaryEmoji);
+
+  if (fullscreen) {
+    return <FireworkBurstCanvas burst={burst} primaryEmoji={primaryEmoji} onComplete={onComplete} />;
+  }
+
+  return <LocalBurstCanvas burst={burst} primaryEmoji={primaryEmoji} onComplete={onComplete} />;
+}
+
+type BurstCanvasProps = {
+  burst: EmojiConfettiBurst;
+  primaryEmoji: string;
+  onComplete: (burstId: string) => void;
+};
+
+function FireworkBurstCanvas({ burst, primaryEmoji, onComplete }: BurstCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const simRef = useRef<FireworkSim | null>(null);
+  const frameRef = useRef<number | null>(null);
+  const lastFrameTimeRef = useRef<number | null>(null);
+  const spawnedRef = useRef(false);
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+
+  useEffect(() => {
+    if (!canvasRef.current || spawnedRef.current) return undefined;
+
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reducedMotion) {
+      onCompleteRef.current(burst.id);
+      return undefined;
+    }
+
+    const canvas = canvasRef.current;
+    const context = canvas.getContext('2d', { alpha: true });
+    if (!context) {
+      onCompleteRef.current(burst.id);
+      return undefined;
+    }
+    context.imageSmoothingEnabled = false;
+
+    spawnedRef.current = true;
+
+    const resize = () => {
+      const dpr = getFireworkDpr();
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      return { width, height, dpr };
+    };
+
+    const { width, height } = resize();
+    const profile = getEmojiBurstProfile(primaryEmoji);
+    const glyph = measureJumboGlyph(burst.targetEventId);
+    const pinToJumbo = Boolean(profile.morphTo && glyph);
+
+    const origin = {
+      x: glyph ? glyph.x : burst.origin.x,
+      y: glyph ? glyph.y : burst.origin.y,
+      maskRadius: glyph ? glyph.size * 0.5 : burst.origin.maskRadius ?? 36,
+    };
+
+    // Keep morph heroes glued to the message emoji; only clamp undirected fireworks.
+    if (!pinToJumbo) {
+      origin.x = Math.min(width - 24, Math.max(24, origin.x));
+      origin.y = Math.min(height - 24, Math.max(24, origin.y));
+    }
+
+    simRef.current = createFireworkSim(
+      width,
+      height,
+      origin,
+      primaryEmoji,
+      profile,
+      performance.now(),
+      glyph?.size
+    );
+
+    const revealJumbo = () => {
+      setJumboEmojiHidden(burst.targetEventId, false);
+    };
+
+    const syncHero = () => {
+      const sim = simRef.current;
+      if (!sim) return;
+      if (!sim.hero) {
+        revealJumbo();
+        return;
+      }
+      const metrics = measureJumboGlyph(burst.targetEventId);
+      syncFireworkHero(sim, metrics);
+      // Re-query every frame so React remounts still stay hidden.
+      setJumboEmojiHidden(burst.targetEventId, true);
+    };
+
+    const onResize = () => {
+      // Extra Things: match CSS size; sim keeps its launch-time world size.
+      resize();
+      syncHero();
+    };
+    window.addEventListener('resize', onResize);
+    window.addEventListener('scroll', syncHero, true);
+
+    const finish = () => {
+      revealJumbo();
+      onCompleteRef.current(burst.id);
+      frameRef.current = null;
+      lastFrameTimeRef.current = null;
+    };
+
+    // Hide immediately before first paint of the stand-in.
+    if (pinToJumbo) {
+      setJumboEmojiHidden(burst.targetEventId, true);
+    }
+
+    const tick = (now: number) => {
+      const sim = simRef.current;
+      if (!sim) return;
+
+      syncHero();
+
+      const last = lastFrameTimeRef.current ?? now;
+      const dtSeconds = Math.min((now - last) / 1000, 0.05);
+      lastFrameTimeRef.current = now;
+
+      const alive = stepFireworkSim(sim, now, dtSeconds);
+      // Hero may have just been dismissed — reveal real jumbo immediately.
+      if (!sim.hero) {
+        revealJumbo();
+      }
+
+      context.setTransform(1, 0, 0, 1, 0, 0);
+      context.clearRect(0, 0, canvas.width, canvas.height);
+
+      if (alive) {
+        drawFireworkSim(context, sim, now);
+        frameRef.current = requestAnimationFrame(tick);
+        return;
+      }
+
+      finish();
+    };
+
+    lastFrameTimeRef.current = performance.now();
+    frameRef.current = requestAnimationFrame(tick);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      window.removeEventListener('scroll', syncHero, true);
+      revealJumbo();
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+      simRef.current = null;
+      // Extra Things: allow Strict Mode remount to start a fresh burst.
+      spawnedRef.current = false;
+    };
+  }, [burst.id, burst.origin.maskRadius, burst.origin.x, burst.origin.y, burst.targetEventId, primaryEmoji]);
+
+  return createPortal(
+    <div
+      aria-hidden
+      style={{
+        position: 'fixed',
+        inset: 0,
+        width: '100vw',
+        height: '100vh',
+        pointerEvents: 'none',
+        zIndex: 40,
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'none',
+        }}
+      />
+    </div>,
+    document.body
+  );
+}
+
+function LocalBurstCanvas({ burst, primaryEmoji, onComplete }: BurstCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const layerRef = useRef<HTMLDivElement>(null);
+  const particlesRef = useRef<BurstParticle[]>([]);
+  const frameRef = useRef<number | null>(null);
+  const lastFrameTimeRef = useRef<number | null>(null);
+  const spawnedRef = useRef(false);
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+
+  const canvasSize = getLocalBurstCanvasSize(burst.origin.maskRadius ?? 36);
+  const localOrigin = useMemo(
+    () => ({
+      x: canvasSize / 2,
+      y: canvasSize / 2,
+      maskRadius: burst.origin.maskRadius ?? 36,
+    }),
+    [burst.origin.maskRadius, canvasSize]
+  );
+
+  const updateLayerPosition = () => {
+    const layer = layerRef.current;
+    if (!layer) return false;
+
+    const jumbo = findJumboEmojiElement(burst.targetEventId);
+    if (!jumbo) return false;
+
+    const rect = jumbo.getBoundingClientRect();
+    layer.style.left = `${rect.left + rect.width / 2 - canvasSize / 2}px`;
+    layer.style.top = `${rect.top + rect.height / 2 - canvasSize / 2}px`;
+    return true;
+  };
+
+  useEffect(() => {
+    const onScrollOrResize = () => {
+      updateLayerPosition();
+    };
+
+    window.addEventListener('scroll', onScrollOrResize, true);
+    window.addEventListener('resize', onScrollOrResize);
+
+    return () => {
+      window.removeEventListener('scroll', onScrollOrResize, true);
+      window.removeEventListener('resize', onScrollOrResize);
+    };
+  }, [burst.targetEventId, canvasSize]);
+
+  useEffect(() => {
+    if (!canvasRef.current || spawnedRef.current) return undefined;
+
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reducedMotion) {
+      onCompleteRef.current(burst.id);
+      return undefined;
+    }
+
+    let frameCleanup: (() => void) | undefined;
+
+    const start = (): boolean => {
+      if (spawnedRef.current || !canvasRef.current) return false;
+      if (!updateLayerPosition()) return false;
+
+      spawnedRef.current = true;
+      const canvas = canvasRef.current;
+      const context = canvas.getContext('2d');
+      if (!context) return false;
+
+      const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
+      canvas.width = Math.round(canvasSize * dpr);
+      canvas.height = Math.round(canvasSize * dpr);
+      canvas.style.width = `${canvasSize}px`;
+      canvas.style.height = `${canvasSize}px`;
+
+      spawnEmojiBurst(particlesRef.current, burst.id, localOrigin, primaryEmoji, performance.now());
+
+      const tick = (now: number) => {
+        updateLayerPosition();
+
+        const last = lastFrameTimeRef.current ?? now;
+        const dtSeconds = Math.min((now - last) / 1000, 0.05);
+        lastFrameTimeRef.current = now;
+
+        stepBurstParticles(particlesRef.current, now, dtSeconds);
+
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
+        if (particlesRef.current.length > 0) {
+          drawBurstParticles(context, particlesRef.current, dpr, now);
+          frameRef.current = requestAnimationFrame(tick);
+          return;
+        }
+
+        onCompleteRef.current(burst.id);
+        frameRef.current = null;
+        lastFrameTimeRef.current = null;
+      };
+
+      lastFrameTimeRef.current = performance.now();
+      frameRef.current = requestAnimationFrame(tick);
+
+      frameCleanup = () => {
+        if (frameRef.current !== null) {
+          cancelAnimationFrame(frameRef.current);
+          frameRef.current = null;
+        }
+      };
+
+      return true;
+    };
+
+    if (start()) {
+      return frameCleanup;
+    }
+
+    let attempt = 0;
+    const retry = window.setInterval(() => {
+      attempt += 1;
+      if (start() || attempt >= 10) {
+        window.clearInterval(retry);
+        if (attempt >= 10 && !spawnedRef.current) {
+          onCompleteRef.current(burst.id);
+        }
+      }
+    }, 50);
+
+    return () => {
+      window.clearInterval(retry);
+      frameCleanup?.();
+    };
+  }, [burst.id, burst.targetEventId, canvasSize, localOrigin, primaryEmoji]);
+
+  return createPortal(
+    <div
+      ref={layerRef}
+      aria-hidden
+      style={{
+        position: 'fixed',
+        width: canvasSize,
+        height: canvasSize,
+        pointerEvents: 'none',
+        zIndex: 4,
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          pointerEvents: 'none',
+        }}
+      />
+    </div>,
+    document.body
+  );
+}

src/app/features/room/emoji-confetti/EmojiConfettiOverlay.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { EmojiConfettiBurst } from './types';
+import { EmojiConfettiBurstCanvas } from './EmojiConfettiBurstCanvas';
+
+type EmojiConfettiOverlayProps = {
+  bursts: EmojiConfettiBurst[];
+  onBurstComplete: (burstId: string) => void;
+};
+
+export function EmojiConfettiOverlay({ bursts, onBurstComplete }: EmojiConfettiOverlayProps) {
+  if (bursts.length === 0) return null;
+
+  return (
+    <>
+      {bursts.map((burst) => (
+        <EmojiConfettiBurstCanvas
+          key={burst.id}
+          burst={burst}
+          onComplete={onBurstComplete}
+        />
+      ))}
+    </>
+  );
+}

src/app/features/room/emoji-confetti/burstOrigin.ts

@@ -0,0 +1,74 @@
+export type BurstPoint = {
+  x: number;
+  y: number;
+  maskRadius?: number;
+};
+
+export function getBurstPointFromElement(element: Element): BurstPoint {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: rect.left + rect.width / 2,
+    y: rect.top + rect.height / 2,
+    maskRadius: Math.max(rect.width, rect.height) * 0.5,
+  };
+}
+
+export function getElementCenter(element: Element): BurstPoint {
+  return getBurstPointFromElement(element);
+}
+
+export function findEmojiOriginInMessage(
+  targetEventId: string,
+  emoji: string
+): BurstPoint | undefined {
+  const message = document.querySelector(`[data-message-id="${CSS.escape(targetEventId)}"]`);
+  if (!message) return undefined;
+
+  const matches = message.querySelectorAll('[data-emoticon]');
+  for (const element of matches) {
+    if (element.getAttribute('data-emoticon') === emoji) {
+      return getBurstPointFromElement(element);
+    }
+  }
+
+  return undefined;
+}
+
+export function getMessageFallbackOrigin(targetEventId: string): BurstPoint | undefined {
+  const message = document.querySelector(`[data-message-id="${CSS.escape(targetEventId)}"]`);
+  if (!message) return undefined;
+
+  const jumboBody = message.querySelector('[data-jumbo-emoji]');
+  if (jumboBody) {
+    return getBurstPointFromElement(jumboBody);
+  }
+
+  const body = message.querySelector('[data-message-body]');
+  if (body) {
+    return getBurstPointFromElement(body);
+  }
+
+  return getBurstPointFromElement(message);
+}
+
+export function resolveBurstOrigin(
+  targetEventId: string | undefined,
+  emojis: string[],
+  explicitOrigin?: BurstPoint
+): BurstPoint {
+  if (explicitOrigin) return explicitOrigin;
+
+  const primaryEmoji = emojis[0];
+  if (targetEventId && primaryEmoji) {
+    const emojiOrigin = findEmojiOriginInMessage(targetEventId, primaryEmoji);
+    if (emojiOrigin) return emojiOrigin;
+
+    const messageOrigin = getMessageFallbackOrigin(targetEventId);
+    if (messageOrigin) return messageOrigin;
+  }
+
+  return {
+    x: window.innerWidth / 2,
+    y: window.innerHeight * 0.35,
+  };
+}

src/app/features/room/emoji-confetti/emojiBurstEngine.ts

@@ -0,0 +1,357 @@
+import { BurstPoint } from './burstOrigin';
+import {
+  BurstMotionStyle,
+  EmojiBurstProfile,
+  getEmojiBurstProfile,
+  pickParticleEmoji,
+  sampleBurstAngle,
+} from './emojiParticleProfiles';
+
+/** Particles spawn over this window. */
+export const BURST_SPAWN_MS = 500;
+/** Global fade runs from 0.5s → 2s after burst start. */
+export const BURST_FADE_START_MS = 500;
+export const BURST_FADE_END_MS = 2000;
+export const BURST_TOTAL_MS = BURST_FADE_END_MS;
+
+export type BurstParticle = {
+  burstId: string;
+  burstStartMs: number;
+  emoji: string;
+  fontSize: number;
+  spawnX: number;
+  spawnY: number;
+  maskRadius: number;
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  bornAt: number;
+  rotation: number;
+  spin: number;
+  peakScale: number;
+  style: BurstMotionStyle;
+  gravity: number;
+  drag: number;
+  phase: number;
+  twinkle?: boolean;
+  wobble?: boolean;
+  orbitRadius: number;
+  orbitSpeed: number;
+  orbitAngle: number;
+  bounceDamping: number;
+  bouncesLeft: number;
+};
+
+const EMOJI_CACHE_PX = 64;
+const EMOJI_CACHE_SCALE = 2;
+const MAX_DPR = 2;
+const POP_IN_MS = 70;
+
+const emojiCanvasCache = new Map<string, HTMLCanvasElement>();
+
+function easeOutBack(t: number): number {
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  return 1 + c3 * (t - 1) ** 3 + c1 * (t - 1) ** 2;
+}
+
+function easeOutCubic(t: number): number {
+  return 1 - (1 - t) ** 3;
+}
+
+function lerp(min: number, max: number): number {
+  return min + Math.random() * (max - min);
+}
+
+function getEmojiCanvas(emoji: string): HTMLCanvasElement {
+  const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
+  const cacheKey = `${emoji}:${dpr}`;
+  const cached = emojiCanvasCache.get(cacheKey);
+  if (cached) return cached;
+
+  const fontSize = Math.ceil(EMOJI_CACHE_PX * dpr);
+  const size = Math.ceil(fontSize * EMOJI_CACHE_SCALE);
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+
+  const context = canvas.getContext('2d');
+  if (context) {
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.font = `${fontSize}px "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif`;
+    context.fillText(emoji, size / 2, size / 2);
+  }
+
+  emojiCanvasCache.set(cacheKey, canvas);
+  return canvas;
+}
+
+function emergeOpacity(
+  x: number,
+  y: number,
+  spawnX: number,
+  spawnY: number,
+  maskRadius: number
+): number {
+  const dist = Math.hypot(x - spawnX, y - spawnY);
+  const inner = maskRadius * 0.55;
+  const outer = maskRadius * 1.05;
+  if (dist <= inner) return 0;
+  if (dist >= outer) return 1;
+  return (dist - inner) / (outer - inner);
+}
+
+function spawnParticle(
+  particles: BurstParticle[],
+  burstId: string,
+  burstStartMs: number,
+  point: BurstPoint,
+  primaryEmoji: string,
+  profile: EmojiBurstProfile,
+  bornAt: number,
+  options?: { hero?: boolean }
+) {
+  const hero = options?.hero ?? false;
+  const angle = sampleBurstAngle(profile);
+  const speed = hero
+    ? lerp(profile.speedMin * 0.65, profile.speedMax * 0.55)
+    : lerp(profile.speedMin, profile.speedMax);
+  const launchUp = lerp(profile.launchUpMin, profile.launchUpMax);
+  const maskRadius = point.maskRadius ?? 28;
+  const jitter = hero ? 3 : 12;
+  const emoji = pickParticleEmoji(profile, primaryEmoji);
+
+  let vx = Math.cos(angle) * speed + (Math.random() - 0.5) * 60;
+  let vy = Math.sin(angle) * speed - launchUp;
+
+  if (profile.style === 'spiral') {
+    vx *= 0.35;
+    vy *= 0.35;
+  }
+
+  if (profile.style === 'sparkle') {
+    vx *= 0.75;
+    vy *= 0.75;
+  }
+
+  particles.push({
+    burstId,
+    burstStartMs,
+    emoji,
+    fontSize: hero
+      ? lerp(profile.heroFontSizeMin, profile.heroFontSizeMax)
+      : lerp(profile.fontSizeMin, profile.fontSizeMax),
+    spawnX: point.x,
+    spawnY: point.y,
+    maskRadius,
+    x: point.x + (Math.random() - 0.5) * jitter,
+    y: point.y + (Math.random() - 0.5) * jitter,
+    vx,
+    vy,
+    bornAt,
+    rotation: (Math.random() - 0.5) * 40,
+    spin: lerp(profile.spinMin, profile.spinMax),
+    peakScale: hero ? 1.1 + Math.random() * 0.2 : 0.9 + Math.random() * 0.4,
+    style: profile.style,
+    gravity: profile.gravity,
+    drag: profile.drag,
+    phase: Math.random() * Math.PI * 2,
+    twinkle: profile.twinkle,
+    wobble: profile.wobble,
+    orbitRadius: hero ? 8 : 14 + Math.random() * 28,
+    orbitSpeed: (Math.random() < 0.5 ? -1 : 1) * (1.8 + Math.random() * 2.4),
+    orbitAngle: Math.random() * Math.PI * 2,
+    bounceDamping: 0.42 + Math.random() * 0.18,
+    bouncesLeft: profile.style === 'bounce' ? 2 : 0,
+  });
+}
+
+/** Fountain from behind the emoji for 0.5s, fade 0.5s→2s. */
+export function spawnEmojiBurst(
+  particles: BurstParticle[],
+  burstId: string,
+  point: BurstPoint,
+  emoji: string,
+  now = performance.now()
+) {
+  const profile = getEmojiBurstProfile(emoji);
+  const burstStartMs = now;
+
+  spawnParticle(particles, burstId, burstStartMs, point, emoji, profile, burstStartMs, {
+    hero: true,
+  });
+
+  const particleCount = profile.particleCount;
+  for (let i = 0; i < particleCount; i += 1) {
+    const slot = i / particleCount;
+    const bornAt =
+      burstStartMs + slot * BURST_SPAWN_MS + Math.random() * (BURST_SPAWN_MS / particleCount);
+    spawnParticle(particles, burstId, burstStartMs, point, emoji, profile, bornAt);
+  }
+}
+
+function stepSpiralParticle(particle: BurstParticle, dtSeconds: number) {
+  particle.orbitRadius += 42 * dtSeconds;
+  particle.orbitAngle += particle.orbitSpeed * dtSeconds;
+  particle.x = particle.spawnX + Math.cos(particle.orbitAngle) * particle.orbitRadius;
+  particle.y =
+    particle.spawnY + Math.sin(particle.orbitAngle) * particle.orbitRadius * 0.65 + particle.vy * dtSeconds * 8;
+  particle.vy += particle.gravity * dtSeconds * 0.35;
+  particle.rotation += particle.spin * dtSeconds;
+}
+
+function stepBounceParticle(particle: BurstParticle, dtSeconds: number, dragFactor: number) {
+  particle.vy += particle.gravity * dtSeconds;
+  particle.vx *= dragFactor;
+  particle.vy *= dragFactor;
+  particle.x += particle.vx * dtSeconds;
+  particle.y += particle.vy * dtSeconds;
+  particle.rotation += particle.spin * dtSeconds;
+
+  if (particle.bouncesLeft > 0 && particle.vy > 0 && particle.y >= particle.spawnY + 6) {
+    particle.y = particle.spawnY + 6;
+    particle.vy = -Math.abs(particle.vy) * particle.bounceDamping;
+    particle.vx *= 0.82;
+    particle.bouncesLeft -= 1;
+    particle.spin += (Math.random() - 0.5) * 120;
+  }
+}
+
+function stepDefaultParticle(particle: BurstParticle, dtSeconds: number, dragFactor: number) {
+  particle.vy += particle.gravity * dtSeconds;
+  particle.vx *= dragFactor;
+  particle.vy *= dragFactor;
+  particle.x += particle.vx * dtSeconds;
+  particle.y += particle.vy * dtSeconds;
+  particle.rotation += particle.spin * dtSeconds;
+}
+
+export function stepBurstParticles(
+  particles: BurstParticle[],
+  now: number,
+  dtSeconds: number
+): void {
+  for (let i = particles.length - 1; i >= 0; i -= 1) {
+    const particle = particles[i];
+    const burstElapsed = now - particle.burstStartMs;
+
+    if (burstElapsed > BURST_TOTAL_MS) {
+      particles[i] = particles[particles.length - 1];
+      particles.pop();
+      continue;
+    }
+
+    const ageMs = now - particle.bornAt;
+    if (ageMs < 0) continue;
+
+    const dragFactor = particle.drag ** (dtSeconds * 60);
+
+    switch (particle.style) {
+      case 'spiral':
+        stepSpiralParticle(particle, dtSeconds);
+        break;
+      case 'bounce':
+        stepBounceParticle(particle, dtSeconds, dragFactor);
+        break;
+      default:
+        stepDefaultParticle(particle, dtSeconds, dragFactor);
+        break;
+    }
+
+    particle.phase += dtSeconds * (particle.twinkle ? 9 : 5);
+  }
+}
+
+type DrawState = {
+  x: number;
+  y: number;
+  scale: number;
+  opacity: number;
+  rotation: number;
+};
+
+function particleDrawState(particle: BurstParticle, now: number): DrawState | null {
+  const burstElapsed = now - particle.burstStartMs;
+  if (burstElapsed > BURST_TOTAL_MS) return null;
+
+  const ageMs = now - particle.bornAt;
+  if (ageMs < 0) return null;
+
+  let scale = particle.peakScale;
+  let opacity = emergeOpacity(
+    particle.x,
+    particle.y,
+    particle.spawnX,
+    particle.spawnY,
+    particle.maskRadius
+  );
+
+  if (opacity <= 0) return null;
+
+  if (ageMs < POP_IN_MS) {
+    const pop = easeOutBack(ageMs / POP_IN_MS);
+    scale = 0.1 + pop * particle.peakScale;
+    opacity *= pop;
+  }
+
+  if (particle.twinkle) {
+    opacity *= 0.55 + 0.45 * Math.sin(particle.phase * 1.6);
+  }
+
+  if (particle.wobble) {
+    scale *= 1 + 0.12 * Math.sin(particle.phase * 2.2);
+  }
+
+  if (particle.style === 'sparkle' && burstElapsed < BURST_FADE_START_MS) {
+    scale *= 0.85 + 0.3 * Math.sin(particle.phase * 3);
+  }
+
+  if (burstElapsed >= BURST_FADE_START_MS) {
+    const fadeT = (burstElapsed - BURST_FADE_START_MS) / (BURST_FADE_END_MS - BURST_FADE_START_MS);
+    opacity *= 1 - easeOutCubic(Math.min(1, fadeT));
+    scale *= 1 - easeOutCubic(Math.min(1, fadeT)) * 0.2;
+  }
+
+  if (opacity <= 0.02) return null;
+
+  return {
+    x: particle.x,
+    y: particle.y,
+    scale,
+    opacity,
+    rotation: particle.rotation,
+  };
+}
+
+export function drawBurstParticles(
+  context: CanvasRenderingContext2D,
+  particles: BurstParticle[],
+  dpr: number,
+  now: number
+) {
+  for (const particle of particles) {
+    const state = particleDrawState(particle, now);
+    if (!state) continue;
+
+    context.globalAlpha = state.opacity;
+
+    const emojiCanvas = getEmojiCanvas(particle.emoji);
+    const drawSize = particle.fontSize * state.scale * EMOJI_CACHE_SCALE;
+    const halfSize = drawSize / 2;
+    const radians = (state.rotation * Math.PI) / 180;
+    const cos = Math.cos(radians) * dpr;
+    const sin = Math.sin(radians) * dpr;
+
+    context.setTransform(cos, sin, -sin, cos, state.x * dpr, state.y * dpr);
+    context.drawImage(emojiCanvas, -halfSize, -halfSize, drawSize, drawSize);
+  }
+
+  context.globalAlpha = 1;
+  context.setTransform(dpr, 0, 0, dpr, 0, 0);
+}
+
+export function hasBurstParticles(particles: BurstParticle[], burstId: string): boolean {
+  return particles.some((particle) => particle.burstId === burstId);
+}

src/app/features/room/emoji-confetti/emojiParticleProfiles.ts

@@ -0,0 +1,500 @@
+export type BurstMotionStyle =
+  | 'explode'
+  | 'bounce'
+  | 'rise'
+  | 'sparkle'
+  | 'splash'
+  | 'spiral'
+  | 'punch'
+  | 'scatter'
+  | 'shower'
+  | 'firework';
+
+export type EmojiBurstProfile = {
+  style: BurstMotionStyle;
+  particleCount: number;
+  gravity: number;
+  drag: number;
+  speedMin: number;
+  speedMax: number;
+  launchUpMin: number;
+  launchUpMax: number;
+  spinMin: number;
+  spinMax: number;
+  fontSizeMin: number;
+  fontSizeMax: number;
+  heroFontSizeMin: number;
+  heroFontSizeMax: number;
+  companions?: string[];
+  companionChance?: number;
+  /** Bias burst angle in radians. 0 = right, -π/2 = up. */
+  angleBias?: number;
+  /** Limit spawn to a cone (radians). Omit for full 360°. */
+  angleSpread?: number;
+  twinkle?: boolean;
+  wobble?: boolean;
+  /** Full-viewport overlay (Box2D pile for fireworks). */
+  fullscreen?: boolean;
+  /** Soft color wash applied to matching particle glyphs (e.g. green spit). */
+  tintColor?: string;
+  /** Emojis that receive `tintColor` when drawn. */
+  tintEmojis?: string[];
+  /** Swap the primary face to this emoji mid-burst (e.g. 🤢 → 🤮). */
+  morphTo?: string;
+  /** Delay before `morphTo` kicks in. */
+  morphAfterMs?: number;
+  /** How long the stand-in hero face stays before the real jumbo returns.
+   * Omit to keep it up until the last particle spawns. */
+  heroDurationMs?: number;
+};
+
+const DEFAULT_PROFILE: EmojiBurstProfile = {
+  style: 'explode',
+  particleCount: 36,
+  gravity: 400,
+  drag: 0.935,
+  speedMin: 240,
+  speedMax: 560,
+  launchUpMin: 40,
+  launchUpMax: 130,
+  spinMin: -180,
+  spinMax: 180,
+  fontSizeMin: 14,
+  fontSizeMax: 26,
+  heroFontSizeMin: 26,
+  heroFontSizeMax: 34,
+};
+
+const PROFILE_OVERRIDES: Record<string, Partial<EmojiBurstProfile>> = {
+  '😆': {
+    style: 'bounce',
+    particleCount: 28,
+    gravity: 520,
+    speedMin: 180,
+    speedMax: 360,
+    launchUpMin: 120,
+    launchUpMax: 220,
+    spinMin: -240,
+    spinMax: 240,
+    wobble: true,
+  },
+  '😂': {
+    style: 'bounce',
+    particleCount: 30,
+    gravity: 500,
+    speedMin: 160,
+    speedMax: 340,
+    launchUpMin: 110,
+    launchUpMax: 210,
+    spinMin: -220,
+    spinMax: 220,
+    wobble: true,
+  },
+  '🤣': {
+    style: 'bounce',
+    particleCount: 32,
+    gravity: 480,
+    speedMin: 200,
+    speedMax: 380,
+    launchUpMin: 130,
+    launchUpMax: 240,
+    wobble: true,
+  },
+  '🔥': {
+    style: 'rise',
+    particleCount: 24,
+    gravity: -120,
+    drag: 0.96,
+    speedMin: 80,
+    speedMax: 200,
+    launchUpMin: 60,
+    launchUpMax: 160,
+    spinMin: -90,
+    spinMax: 90,
+    fontSizeMin: 16,
+    fontSizeMax: 28,
+    twinkle: true,
+    wobble: true,
+    companions: ['✨'],
+    companionChance: 0.35,
+  },
+  '❤️': {
+    style: 'rise',
+    particleCount: 22,
+    gravity: -80,
+    drag: 0.97,
+    speedMin: 60,
+    speedMax: 150,
+    launchUpMin: 40,
+    launchUpMax: 110,
+    spinMin: -40,
+    spinMax: 40,
+    fontSizeMin: 14,
+    fontSizeMax: 24,
+    companions: ['💕', '💖'],
+    companionChance: 0.4,
+  },
+  '💕': {
+    style: 'rise',
+    particleCount: 20,
+    gravity: -70,
+    drag: 0.97,
+    speedMin: 50,
+    speedMax: 140,
+    launchUpMin: 35,
+    launchUpMax: 100,
+    spinMin: -35,
+    spinMax: 35,
+  },
+  '💖': {
+    style: 'rise',
+    particleCount: 20,
+    gravity: -90,
+    drag: 0.968,
+    speedMin: 55,
+    speedMax: 150,
+    launchUpMin: 45,
+    launchUpMax: 115,
+    twinkle: true,
+  },
+  '⭐': {
+    style: 'sparkle',
+    particleCount: 26,
+    gravity: 40,
+    drag: 0.94,
+    speedMin: 100,
+    speedMax: 260,
+    launchUpMin: 20,
+    launchUpMax: 80,
+    spinMin: -120,
+    spinMax: 120,
+    twinkle: true,
+    companions: ['✨'],
+    companionChance: 0.5,
+  },
+  '✨': {
+    style: 'sparkle',
+    particleCount: 30,
+    gravity: 30,
+    drag: 0.945,
+    speedMin: 90,
+    speedMax: 240,
+    launchUpMin: 15,
+    launchUpMax: 70,
+    spinMin: -200,
+    spinMax: 200,
+    twinkle: true,
+  },
+  '💀': {
+    style: 'scatter',
+    particleCount: 20,
+    gravity: 620,
+    drag: 0.92,
+    speedMin: 200,
+    speedMax: 420,
+    launchUpMin: 20,
+    launchUpMax: 90,
+    spinMin: -360,
+    spinMax: 360,
+    fontSizeMin: 16,
+    fontSizeMax: 28,
+  },
+  '🎉': {
+    style: 'shower',
+    particleCount: 40,
+    gravity: 280,
+    drag: 0.93,
+    speedMin: 200,
+    speedMax: 480,
+    launchUpMin: 80,
+    launchUpMax: 200,
+    companions: ['🎊', '✨', '🎈'],
+    companionChance: 0.45,
+  },
+  '🎊': {
+    style: 'shower',
+    particleCount: 38,
+    gravity: 260,
+    drag: 0.932,
+    speedMin: 190,
+    speedMax: 460,
+    launchUpMin: 70,
+    launchUpMax: 190,
+    companions: ['🎉', '✨'],
+    companionChance: 0.4,
+  },
+  '👏': {
+    style: 'punch',
+    particleCount: 18,
+    gravity: 320,
+    speedMin: 220,
+    speedMax: 400,
+    launchUpMin: 30,
+    launchUpMax: 100,
+    angleBias: -Math.PI / 2,
+    angleSpread: Math.PI * 0.85,
+    spinMin: -100,
+    spinMax: 100,
+  },
+  '👍': {
+    style: 'punch',
+    particleCount: 14,
+    gravity: 380,
+    speedMin: 260,
+    speedMax: 440,
+    launchUpMin: 100,
+    launchUpMax: 200,
+    angleBias: -Math.PI / 2,
+    angleSpread: Math.PI * 0.55,
+    spinMin: -60,
+    spinMax: 60,
+  },
+  '💯': {
+    style: 'punch',
+    particleCount: 16,
+    gravity: 300,
+    speedMin: 200,
+    speedMax: 380,
+    launchUpMin: 140,
+    launchUpMax: 240,
+    angleBias: -Math.PI / 2,
+    angleSpread: Math.PI * 0.45,
+    fontSizeMin: 16,
+    fontSizeMax: 30,
+    wobble: true,
+  },
+  '💦': {
+    style: 'splash',
+    particleCount: 32,
+    gravity: 540,
+    drag: 0.925,
+    speedMin: 280,
+    speedMax: 520,
+    launchUpMin: 160,
+    launchUpMax: 300,
+    spinMin: -140,
+    spinMax: 140,
+    angleBias: -Math.PI / 2,
+    angleSpread: Math.PI * 1.1,
+  },
+  '🌊': {
+    style: 'splash',
+    particleCount: 28,
+    gravity: 420,
+    drag: 0.93,
+    speedMin: 220,
+    speedMax: 460,
+    launchUpMin: 100,
+    launchUpMax: 220,
+    angleBias: -Math.PI / 2,
+    angleSpread: Math.PI,
+    companions: ['💧'],
+    companionChance: 0.3,
+  },
+  '⚡': {
+    style: 'scatter',
+    particleCount: 14,
+    gravity: 180,
+    drag: 0.88,
+    speedMin: 380,
+    speedMax: 680,
+    launchUpMin: 10,
+    launchUpMax: 60,
+    spinMin: -30,
+    spinMax: 30,
+    fontSizeMin: 18,
+    fontSizeMax: 32,
+    angleSpread: Math.PI * 1.2,
+  },
+  '🌀': {
+    style: 'spiral',
+    particleCount: 24,
+    gravity: 60,
+    drag: 0.96,
+    speedMin: 120,
+    speedMax: 260,
+    launchUpMin: 0,
+    launchUpMax: 40,
+    spinMin: -420,
+    spinMax: 420,
+  },
+  '🤯': {
+    style: 'explode',
+    particleCount: 34,
+    gravity: 360,
+    speedMin: 280,
+    speedMax: 580,
+    launchUpMin: 60,
+    launchUpMax: 160,
+    companions: ['💥', '✨', '⭐'],
+    companionChance: 0.5,
+  },
+  '😭': {
+    style: 'splash',
+    particleCount: 26,
+    gravity: 480,
+    drag: 0.94,
+    speedMin: 140,
+    speedMax: 300,
+    launchUpMin: 40,
+    launchUpMax: 120,
+    angleBias: Math.PI / 2,
+    angleSpread: Math.PI * 0.7,
+    companions: ['💧'],
+    companionChance: 0.55,
+  },
+  '🥳': {
+    style: 'shower',
+    particleCount: 36,
+    gravity: 250,
+    speedMin: 180,
+    speedMax: 440,
+    launchUpMin: 90,
+    launchUpMax: 210,
+    companions: ['🎉', '🎊', '🎈'],
+    companionChance: 0.4,
+  },
+  '🎆': {
+    style: 'firework',
+    fullscreen: true,
+    particleCount: 320,
+    gravity: 980,
+    drag: 1,
+    speedMin: 420,
+    speedMax: 980,
+    launchUpMin: 180,
+    launchUpMax: 420,
+    spinMin: -520,
+    spinMax: 520,
+    fontSizeMin: 16,
+    fontSizeMax: 30,
+    heroFontSizeMin: 40,
+    heroFontSizeMax: 52,
+    companions: ['🎇', '✨', '💥', '⭐', '🎉'],
+    companionChance: 0.55,
+  },
+  '🎇': {
+    style: 'firework',
+    fullscreen: true,
+    particleCount: 280,
+    gravity: 960,
+    drag: 1,
+    speedMin: 380,
+    speedMax: 920,
+    launchUpMin: 160,
+    launchUpMax: 400,
+    spinMin: -480,
+    spinMax: 480,
+    fontSizeMin: 14,
+    fontSizeMax: 28,
+    heroFontSizeMin: 36,
+    heroFontSizeMax: 48,
+    companions: ['🎆', '✨', '⭐', '💥'],
+    companionChance: 0.5,
+    twinkle: true,
+  },
+  // Full-viewport spew — downward cone, green-tinted droplets, piles on the floor.
+  '🤢': {
+    style: 'firework',
+    fullscreen: true,
+    particleCount: 420,
+    gravity: 1200,
+    drag: 1,
+    speedMin: 380,
+    speedMax: 980,
+    launchUpMin: 0,
+    launchUpMax: 40,
+    spinMin: -560,
+    spinMax: 560,
+    fontSizeMin: 18,
+    fontSizeMax: 34,
+    heroFontSizeMin: 44,
+    heroFontSizeMax: 58,
+    // Downward throw-up cone (π/2 = down in canvas space).
+    angleBias: Math.PI / 2,
+    angleSpread: Math.PI * 1.05,
+    companions: ['💦', '💧', '💚'],
+    companionChance: 1,
+    tintColor: 'rgba(72, 190, 48, 0.72)',
+    tintEmojis: ['💦', '💧'],
+    morphTo: '🤮',
+    morphAfterMs: 220,
+    wobble: true,
+  },
+  '🤮': {
+    style: 'firework',
+    fullscreen: true,
+    particleCount: 460,
+    gravity: 1250,
+    drag: 1,
+    speedMin: 420,
+    speedMax: 1050,
+    launchUpMin: 0,
+    launchUpMax: 30,
+    spinMin: -600,
+    spinMax: 600,
+    fontSizeMin: 18,
+    fontSizeMax: 36,
+    heroFontSizeMin: 46,
+    heroFontSizeMax: 60,
+    angleBias: Math.PI / 2,
+    angleSpread: Math.PI * 1.15,
+    companions: ['💦', '💧', '💚'],
+    companionChance: 1,
+    tintColor: 'rgba(72, 190, 48, 0.72)',
+    tintEmojis: ['💦', '💧'],
+    wobble: true,
+  },
+  '🐱': {
+    style: 'bounce',
+    particleCount: 20,
+    gravity: 440,
+    speedMin: 150,
+    speedMax: 320,
+    launchUpMin: 90,
+    launchUpMax: 180,
+    spinMin: -160,
+    spinMax: 160,
+  },
+  '🐶': {
+    style: 'bounce',
+    particleCount: 20,
+    gravity: 460,
+    speedMin: 160,
+    speedMax: 330,
+    launchUpMin: 85,
+    launchUpMax: 175,
+    wobble: true,
+  },
+};
+
+export function getEmojiBurstProfile(emoji: string): EmojiBurstProfile {
+  const override = PROFILE_OVERRIDES[emoji];
+  if (!override) return DEFAULT_PROFILE;
+  return { ...DEFAULT_PROFILE, ...override };
+}
+
+export function isFullscreenBurstEmoji(emoji: string): boolean {
+  return getEmojiBurstProfile(emoji).fullscreen === true;
+}
+
+export function pickParticleEmoji(profile: EmojiBurstProfile, primaryEmoji: string): string {
+  if (!profile.companions?.length || !profile.companionChance) {
+    return primaryEmoji;
+  }
+  if (Math.random() >= profile.companionChance) {
+    return primaryEmoji;
+  }
+  const companion = profile.companions[Math.floor(Math.random() * profile.companions.length)];
+  return companion ?? primaryEmoji;
+}
+
+export function sampleBurstAngle(profile: EmojiBurstProfile): number {
+  if (profile.angleSpread === undefined) {
+    return Math.random() * Math.PI * 2;
+  }
+
+  const bias = profile.angleBias ?? -Math.PI / 2;
+  const halfSpread = profile.angleSpread / 2;
+  return bias + (Math.random() - 0.5) * profile.angleSpread * (0.6 + Math.random() * 0.4);
+}

src/app/features/room/emoji-confetti/findJumboMount.ts

@@ -0,0 +1,65 @@
+export function findJumboEmojiElement(targetEventId: string): HTMLElement | null {
+  const message = document.querySelector(`[data-message-id="${CSS.escape(targetEventId)}"]`);
+  if (!message) return null;
+
+  const jumbo = message.querySelector('[data-jumbo-emoji]');
+  return jumbo instanceof HTMLElement ? jumbo : null;
+}
+
+export type JumboGlyphMetrics = {
+  /** Outer jumbo mount (message body) — hide/show this. */
+  mount: HTMLElement;
+  /** Visual glyph center in viewport coords. */
+  x: number;
+  y: number;
+  /** CSS px size matching the rendered emoji (usually computed font-size). */
+  size: number;
+};
+
+/**
+ * Measure the on-screen jumbo glyph. Prefer computed font-size so the canvas
+ * stand-in matches unicode emoji; fall back to the glyph box for images.
+ */
+export function measureJumboGlyph(targetEventId: string): JumboGlyphMetrics | null {
+  const mount = findJumboEmojiElement(targetEventId);
+  if (!mount) return null;
+
+  const glyph =
+    (mount.querySelector('[data-emoticon]') as HTMLElement | null) ||
+    (mount.querySelector('img') as HTMLElement | null) ||
+    mount;
+
+  const rect = glyph.getBoundingClientRect();
+  const fontSize =
+    parseFloat(getComputedStyle(glyph).fontSize) ||
+    parseFloat(getComputedStyle(mount).fontSize) ||
+    0;
+
+  const isImg = glyph instanceof HTMLImageElement || glyph.tagName === 'IMG';
+  const size = isImg
+    ? Math.max(rect.width, rect.height)
+    : fontSize > 0
+      ? fontSize
+      : Math.max(rect.width, rect.height);
+
+  return {
+    mount,
+    x: rect.left + rect.width / 2,
+    y: rect.top + rect.height / 2,
+    size,
+  };
+}
+
+export function setJumboEmojiHidden(targetEventId: string, hidden: boolean) {
+  const mount = findJumboEmojiElement(targetEventId);
+  if (!mount) return;
+  if (hidden) {
+    mount.style.visibility = 'hidden';
+  } else {
+    mount.style.removeProperty('visibility');
+  }
+}
+
+export function getLocalBurstCanvasSize(maskRadius: number): number {
+  return Math.max(300, Math.round(maskRadius * 6.5));
+}

src/app/features/room/emoji-confetti/fireworkParticleEngine.ts

@@ -0,0 +1,515 @@
+/**
+ * Old-school fullscreen firework fountain — no physics engine.
+ * Position/velocity arrays, gravity, floor bounce, settle into a pile.
+ * Same vibe as late-90s/MSN page effects, just with emoji.
+ */
+import { BurstPoint } from './burstOrigin';
+import {
+  pickParticleEmoji,
+  sampleBurstAngle,
+  type EmojiBurstProfile,
+} from './emojiParticleProfiles';
+
+const EMOJI_CACHE_PX = 40;
+const EMOJI_CACHE_SCALE = 2;
+
+const SPAWN_WINDOW_MS = 2200;
+const SETTLE_HOLD_MS = 7800;
+const FADE_MS = 800;
+export const FIREWORK_TOTAL_MS = SETTLE_HOLD_MS + FADE_MS;
+
+const SPARKLE_IN_MS = 120;
+const MAX_SPAWNS_PER_FRAME = 6;
+const FLOOR_PAD = 8;
+const BOUNCE = 0.38;
+const DRAG = 0.992;
+const SETTLE_SPEED = 55;
+const PILE_CELL = 22;
+
+type SpawnItem = {
+  atMs: number;
+  emoji: string;
+  fontSize: number;
+};
+
+export type FireworkParticle = {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  spin: number;
+  angle: number;
+  emoji: string;
+  emojiCanvas: HTMLCanvasElement;
+  drawSize: number;
+  halfSize: number;
+  bornAt: number;
+  settled: boolean;
+};
+
+type HeroFace = {
+  emoji: string;
+  emojiCanvas: HTMLCanvasElement;
+  /** Target CSS pixel size of the glyph (matches jumbo font-size). */
+  drawSize: number;
+  halfSize: number;
+  /** canvasPx / fontPx — draw box is drawSize * canvasScale so the glyph isn't cropped. */
+  canvasScale: number;
+  morphed: boolean;
+};
+
+export type FireworkSim = {
+  particles: FireworkParticle[];
+  profile: EmojiBurstProfile;
+  primaryEmoji: string;
+  morphAtMs: number | null;
+  /** When to drop the stand-in hero and reveal the real jumbo again. */
+  heroUntilMs: number | null;
+  hero: HeroFace | null;
+  width: number;
+  height: number;
+  origin: BurstPoint;
+  startMs: number;
+  spawnPlan: SpawnItem[];
+  spawnCursor: number;
+  floorY: number;
+  /** Column stack heights for the settled pile (in cells). */
+  pileCols: Uint16Array;
+  pileCanvas: HTMLCanvasElement | null;
+  pileCtx: CanvasRenderingContext2D | null;
+  flyingCount: number;
+};
+
+const emojiCanvasCache = new Map<string, HTMLCanvasElement>();
+
+function lerp(min: number, max: number): number {
+  return min + Math.random() * (max - min);
+}
+
+const HERO_PAD_RATIO = 0.24;
+
+type EmojiBitmap = {
+  canvas: HTMLCanvasElement;
+  /** Multiply CSS glyph size by this when drawImage'ing to keep padding uncropped. */
+  canvasScale: number;
+};
+
+function getEmojiCanvas(emoji: string, tintColor?: string, cssPx?: number): HTMLCanvasElement {
+  return getEmojiBitmap(emoji, tintColor, cssPx, 0).canvas;
+}
+
+function getEmojiBitmap(
+  emoji: string,
+  tintColor: string | undefined,
+  cssPx: number | undefined,
+  padRatio: number
+): EmojiBitmap {
+  const targetCss = Math.max(16, Math.round(cssPx ?? EMOJI_CACHE_PX));
+  const dpr = typeof window !== 'undefined' ? Math.min(window.devicePixelRatio || 1, 2) : 1;
+  const fontPx = Math.round(targetCss * dpr);
+  const pad = Math.ceil(fontPx * padRatio);
+  const size = fontPx + pad * 2;
+  const cacheKey = `${emoji}|px:${fontPx}|pad:${pad}|tint:${tintColor ?? ''}`;
+  const cached = emojiCanvasCache.get(cacheKey);
+  if (cached) {
+    return { canvas: cached, canvasScale: size / fontPx };
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+  if (ctx) {
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.imageSmoothingEnabled = false;
+    ctx.font = `${fontPx}px "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif`;
+    // Slight optical nudge — color emoji fonts sit high in the em box.
+    ctx.fillText(emoji, size / 2, size / 2 + fontPx * 0.06);
+
+    if (tintColor) {
+      ctx.globalCompositeOperation = 'source-atop';
+      ctx.fillStyle = tintColor;
+      ctx.fillRect(0, 0, size, size);
+      ctx.globalCompositeOperation = 'source-over';
+    }
+  }
+  emojiCanvasCache.set(cacheKey, canvas);
+  return { canvas, canvasScale: size / Math.max(fontPx, 1) };
+}
+
+function setHeroEmoji(hero: HeroFace, emoji: string) {
+  const bitmap = getEmojiBitmap(emoji, undefined, hero.drawSize, HERO_PAD_RATIO);
+  hero.emoji = emoji;
+  hero.emojiCanvas = bitmap.canvas;
+  hero.canvasScale = bitmap.canvasScale;
+}
+
+function setHeroSize(hero: HeroFace, cssPx: number) {
+  if (!(cssPx > 0)) return;
+  if (Math.abs(cssPx - hero.drawSize) < 0.5) return;
+  hero.drawSize = cssPx;
+  hero.halfSize = cssPx / 2;
+  const bitmap = getEmojiBitmap(hero.emoji, undefined, cssPx, HERO_PAD_RATIO);
+  hero.emojiCanvas = bitmap.canvas;
+  hero.canvasScale = bitmap.canvasScale;
+}
+
+function particleTint(profile: EmojiBurstProfile, emoji: string): string | undefined {
+  if (!profile.tintColor || !profile.tintEmojis?.length) return undefined;
+  return profile.tintEmojis.includes(emoji) ? profile.tintColor : undefined;
+}
+
+/** Spew particles for morph bursts — never the morphTo face (that stays on the hero). */
+function pickSpewEmoji(profile: EmojiBurstProfile, primaryEmoji: string): string {
+  const morphTo = profile.morphTo;
+  const companions = (profile.companions ?? []).filter((e) => e !== morphTo);
+  if (morphTo && companions.length) {
+    return companions[Math.floor(Math.random() * companions.length)] ?? primaryEmoji;
+  }
+  const picked = pickParticleEmoji(profile, primaryEmoji);
+  return picked === morphTo ? primaryEmoji : picked;
+}
+
+function buildSpawnPlan(
+  profile: EmojiBurstProfile,
+  primaryEmoji: string,
+  startMs: number
+): SpawnItem[] {
+  // Anchored morphing hero is drawn separately — skip a flying hero twin.
+  const plan: SpawnItem[] = profile.morphTo
+    ? []
+    : [
+        {
+          atMs: startMs,
+          emoji: primaryEmoji,
+          fontSize: lerp(profile.heroFontSizeMin, profile.heroFontSizeMax),
+        },
+      ];
+
+  const count = profile.particleCount;
+  for (let i = 0; i < count; i += 1) {
+    const slot = (i + 0.5) / count;
+    const eased = slot * slot;
+    plan.push({
+      atMs:
+        startMs +
+        80 +
+        eased * SPAWN_WINDOW_MS +
+        (Math.random() - 0.5) * 70,
+      emoji: pickSpewEmoji(profile, primaryEmoji),
+      fontSize: lerp(profile.fontSizeMin, profile.fontSizeMax),
+    });
+  }
+
+  plan.sort((a, b) => a.atMs - b.atMs);
+  return plan;
+}
+
+function applyMorph(sim: FireworkSim, now: number) {
+  const to = sim.profile.morphTo;
+  if (!to || sim.morphAtMs === null || now < sim.morphAtMs) return;
+  if (sim.hero?.morphed) return;
+
+  // Only the stand-in face morphs — spray stays droplets / companions.
+  if (sim.hero) {
+    setHeroEmoji(sim.hero, to);
+    sim.hero.morphed = true;
+  }
+}
+
+function ensurePile(sim: FireworkSim): CanvasRenderingContext2D {
+  if (sim.pileCanvas && sim.pileCtx) return sim.pileCtx;
+  const canvas = document.createElement('canvas');
+  canvas.width = sim.width;
+  canvas.height = sim.height;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('firework pile unsupported');
+  ctx.imageSmoothingEnabled = false;
+  sim.pileCanvas = canvas;
+  sim.pileCtx = ctx;
+  return ctx;
+}
+
+function stampSettled(sim: FireworkSim, p: FireworkParticle) {
+  const ctx = ensurePile(sim);
+  const rad = (p.angle * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  ctx.setTransform(cos, sin, -sin, cos, p.x, p.y);
+  ctx.globalAlpha = 1;
+  ctx.drawImage(p.emojiCanvas, -p.halfSize, -p.halfSize, p.drawSize, p.drawSize);
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+}
+
+function spawnOne(sim: FireworkSim, item: SpawnItem, now: number) {
+  const { profile, origin } = sim;
+  const jitter = Math.max(4, (origin.maskRadius ?? 28) * 0.25);
+  const directed = profile.angleSpread !== undefined;
+  const angle = directed ? sampleBurstAngle(profile) : Math.random() * Math.PI * 2;
+  const speed = lerp(profile.speedMin, profile.speedMax);
+  const launchUp = lerp(profile.launchUpMin, profile.launchUpMax);
+  const drawSize = item.fontSize * EMOJI_CACHE_SCALE * 0.85;
+  const emoji = item.emoji;
+
+  // Directed cones (e.g. throw-up) push along the sampled angle.
+  // Undirected fireworks keep the classic upward launch kick.
+  let vx = Math.cos(angle) * speed + (Math.random() - 0.5) * 40;
+  let vy = Math.sin(angle) * speed;
+  if (directed) {
+    const bias = profile.angleBias ?? angle;
+    vx += Math.cos(bias) * launchUp * 0.25;
+    vy += Math.sin(bias) * launchUp;
+  } else {
+    vy -= launchUp;
+  }
+
+  const tint = particleTint(profile, emoji);
+
+  sim.particles.push({
+    x: origin.x + (Math.random() - 0.5) * jitter,
+    y: origin.y + (Math.random() - 0.5) * jitter,
+    vx,
+    vy,
+    spin: lerp(profile.spinMin, profile.spinMax) * 0.35,
+    angle: (Math.random() - 0.5) * 40,
+    emoji,
+    emojiCanvas: getEmojiCanvas(emoji, tint),
+    drawSize,
+    halfSize: drawSize / 2,
+    bornAt: now,
+    settled: false,
+  });
+  sim.flyingCount += 1;
+}
+
+function settleParticle(sim: FireworkSim, p: FireworkParticle) {
+  const cols = sim.pileCols.length;
+  let col = Math.floor(p.x / PILE_CELL);
+  if (col < 0) col = 0;
+  if (col >= cols) col = cols - 1;
+
+  // Prefer the intended column; spill to neighbors if that stack is already tall.
+  let bestCol = col;
+  let bestH = sim.pileCols[col];
+  for (const delta of [0, -1, 1, -2, 2]) {
+    const c = col + delta;
+    if (c < 0 || c >= cols) continue;
+    if (sim.pileCols[c] < bestH) {
+      bestH = sim.pileCols[c];
+      bestCol = c;
+    }
+  }
+
+  const stack = sim.pileCols[bestCol];
+  sim.pileCols[bestCol] = stack + 1;
+  p.x = bestCol * PILE_CELL + PILE_CELL * 0.5 + (Math.random() - 0.5) * 6;
+  p.y = sim.floorY - stack * (PILE_CELL * 0.72) - p.halfSize;
+  p.vx = 0;
+  p.vy = 0;
+  p.spin = 0;
+  p.settled = true;
+  sim.flyingCount = Math.max(0, sim.flyingCount - 1);
+  stampSettled(sim, p);
+}
+
+export function createFireworkSim(
+  widthPx: number,
+  heightPx: number,
+  originPx: BurstPoint,
+  primaryEmoji: string,
+  profile: EmojiBurstProfile,
+  startMs = performance.now(),
+  /** Pixel size of the source jumbo emoji — hero face matches this when set. */
+  heroSizePx?: number
+): FireworkSim {
+  const colCount = Math.max(8, Math.ceil(widthPx / PILE_CELL));
+  const fallbackHero =
+    lerp(profile.heroFontSizeMin, profile.heroFontSizeMax) * EMOJI_CACHE_SCALE * 0.95;
+  const heroSize = heroSizePx && heroSizePx > 0 ? heroSizePx : fallbackHero;
+  const hero: HeroFace | null = profile.morphTo
+    ? (() => {
+        const bitmap = getEmojiBitmap(primaryEmoji, undefined, heroSize, HERO_PAD_RATIO);
+        return {
+          emoji: primaryEmoji,
+          emojiCanvas: bitmap.canvas,
+          drawSize: heroSize,
+          halfSize: heroSize / 2,
+          canvasScale: bitmap.canvasScale,
+          morphed: false,
+        };
+      })()
+    : null;
+
+  const spawnPlan = buildSpawnPlan(profile, primaryEmoji, startMs);
+  // Keep the spewing stand-in up for the whole fountain — not just a short flash.
+  const lastSpawnAt = spawnPlan.length > 0 ? spawnPlan[spawnPlan.length - 1].atMs : startMs;
+  const heroUntilMs = profile.morphTo
+    ? profile.heroDurationMs != null
+      ? startMs + profile.heroDurationMs
+      : lastSpawnAt + 120
+    : null;
+
+  return {
+    particles: [],
+    profile,
+    primaryEmoji,
+    morphAtMs: profile.morphTo ? startMs + (profile.morphAfterMs ?? 220) : null,
+    heroUntilMs,
+    hero,
+    width: widthPx,
+    height: heightPx,
+    origin: originPx,
+    startMs,
+    spawnPlan,
+    spawnCursor: 0,
+    floorY: heightPx - FLOOR_PAD,
+    pileCols: new Uint16Array(colCount),
+    pileCanvas: null,
+    pileCtx: null,
+    flyingCount: 0,
+  };
+}
+
+/** Keep the stand-in face glued to the live jumbo metrics. */
+export function syncFireworkHero(
+  sim: FireworkSim,
+  metrics: { x: number; y: number; size: number } | null
+) {
+  if (!sim.hero || !metrics) return;
+  sim.origin.x = metrics.x;
+  sim.origin.y = metrics.y;
+  setHeroSize(sim.hero, metrics.size);
+}
+
+/** @returns false when the burst should be removed. */
+export function stepFireworkSim(sim: FireworkSim, now: number, dtSeconds: number): boolean {
+  if (now - sim.startMs > FIREWORK_TOTAL_MS) return false;
+
+  applyMorph(sim, now);
+
+  if (sim.hero && sim.heroUntilMs !== null && now >= sim.heroUntilMs) {
+    sim.hero = null;
+  }
+
+  const dt = Math.min(dtSeconds, 0.05);
+  const g = sim.profile.gravity;
+
+  let spawned = 0;
+  while (
+    spawned < MAX_SPAWNS_PER_FRAME &&
+    sim.spawnCursor < sim.spawnPlan.length &&
+    sim.spawnPlan[sim.spawnCursor].atMs <= now
+  ) {
+    spawnOne(sim, sim.spawnPlan[sim.spawnCursor], now);
+    sim.spawnCursor += 1;
+    spawned += 1;
+  }
+
+  const floor = sim.floorY;
+  const left = 4;
+  const right = sim.width - 4;
+
+  for (let i = 0; i < sim.particles.length; i += 1) {
+    const p = sim.particles[i];
+    if (p.settled) continue;
+
+    p.vy += g * dt;
+    p.vx *= DRAG;
+    p.vy *= DRAG;
+    p.x += p.vx * dt;
+    p.y += p.vy * dt;
+    p.angle += p.spin * dt;
+
+    if (p.x < left) {
+      p.x = left;
+      p.vx = Math.abs(p.vx) * BOUNCE;
+    } else if (p.x > right) {
+      p.x = right;
+      p.vx = -Math.abs(p.vx) * BOUNCE;
+    }
+
+    if (p.y >= floor - p.halfSize) {
+      p.y = floor - p.halfSize;
+      const speed = Math.hypot(p.vx, p.vy);
+      if (speed < SETTLE_SPEED || Math.abs(p.vy) < SETTLE_SPEED * 0.55) {
+        settleParticle(sim, p);
+      } else {
+        p.vy = -Math.abs(p.vy) * BOUNCE;
+        p.vx *= 0.85;
+        p.spin *= 0.7;
+      }
+    }
+  }
+
+  return true;
+}
+
+export function drawFireworkSim(
+  context: CanvasRenderingContext2D,
+  sim: FireworkSim,
+  now: number
+) {
+  const elapsed = now - sim.startMs;
+  let fade = 1;
+  if (elapsed >= SETTLE_HOLD_MS) {
+    fade = 1 - Math.min(1, (elapsed - SETTLE_HOLD_MS) / FADE_MS);
+  }
+
+  context.setTransform(1, 0, 0, 1, 0, 0);
+  context.imageSmoothingEnabled = false;
+
+  if (sim.pileCanvas) {
+    context.globalAlpha = fade;
+    context.drawImage(sim.pileCanvas, 0, 0);
+  }
+
+  // Anchored face at the spew origin — morphs 🤢 → 🤮 mid-throw, then drops away.
+  if (sim.hero && fade > 0.02) {
+    const hero = sim.hero;
+    const heaveAmp = Math.max(1.5, hero.drawSize * 0.02);
+    const heave = Math.sin(elapsed / 70) * (hero.morphed ? heaveAmp * 1.25 : heaveAmp);
+    // Scale includes bitmap padding so the glyph matches jumbo size without clipping.
+    const box = hero.drawSize * hero.canvasScale;
+    const half = box / 2;
+    context.globalAlpha = fade;
+    context.setTransform(1, 0, 0, 1, sim.origin.x, sim.origin.y + heave);
+    context.drawImage(hero.emojiCanvas, -half, -half, box, box);
+    context.setTransform(1, 0, 0, 1, 0, 0);
+  }
+
+  for (let i = 0; i < sim.particles.length; i += 1) {
+    const p = sim.particles[i];
+    if (p.settled) continue;
+
+    const ageMs = now - p.bornAt;
+    if (ageMs < 0) continue;
+
+    let opacity = fade;
+    let scale = 1;
+    if (ageMs < SPARKLE_IN_MS) {
+      const t = ageMs / SPARKLE_IN_MS;
+      const appear = t * t * (3 - 2 * t);
+      scale = 0.5 + 0.65 * appear;
+      opacity *= appear;
+    }
+    if (opacity <= 0.02) continue;
+
+    const rad = (p.angle * Math.PI) / 180;
+    const size = p.drawSize * scale;
+    const half = size / 2;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+
+    context.globalAlpha = opacity;
+    context.setTransform(cos, sin, -sin, cos, p.x, p.y);
+    context.drawImage(p.emojiCanvas, -half, -half, size, size);
+  }
+
+  context.globalAlpha = 1;
+  context.setTransform(1, 0, 0, 1, 0, 0);
+}
+
+export function getFireworkDpr(): number {
+  return 1;
+}

src/app/features/room/emoji-confetti/jumboEmojiInteraction.ts

@@ -0,0 +1,34 @@
+import { KeyboardEvent, MouseEvent } from 'react';
+
+export type JumboEmojiClickHandler = (body: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+
+export function getJumboEmojiInteractionProps({
+  body,
+  isJumboEmoji,
+  onJumboEmojiClick,
+}: {
+  body: string;
+  isJumboEmoji: boolean;
+  onJumboEmojiClick?: JumboEmojiClickHandler;
+}) {
+  if (!isJumboEmoji || !onJumboEmojiClick) {
+    return {};
+  }
+
+  const activate = (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {
+    if ('key' in event) {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+    }
+    event.stopPropagation();
+    onJumboEmojiClick(body, event);
+  };
+
+  return {
+    role: 'button' as const,
+    tabIndex: 0,
+    title: 'Throw emoji confetti',
+    onClick: activate,
+    onKeyDown: activate,
+  };
+}

src/app/features/room/emoji-confetti/resolveClickedEmoji.ts

@@ -0,0 +1,54 @@
+import { KeyboardEvent, MouseEvent } from 'react';
+import { extractJumboEmojis } from './sendEmojiConfetti';
+import { BurstPoint, getBurstPointFromElement } from './burstOrigin';
+
+export function resolveClickedEmoji(
+  event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,
+  fallbackBody: string
+): { emoji: string; origin: BurstPoint } | null {
+  const currentTarget = event.currentTarget as HTMLElement;
+  const target = event.target as HTMLElement;
+  const emoticonEl = target.closest('[data-emoticon]') ?? currentTarget.querySelector('[data-emoticon]');
+  if (emoticonEl instanceof HTMLElement) {
+    const emoji = emoticonEl.getAttribute('data-emoticon');
+    if (emoji) {
+      return {
+        emoji,
+        origin: getBurstPointFromElement(emoticonEl),
+      };
+    }
+  }
+
+  if (!currentTarget.closest('[data-jumbo-emoji]') && !currentTarget.hasAttribute('data-jumbo-emoji')) {
+    return null;
+  }
+
+  const emojis = extractJumboEmojis(fallbackBody);
+  if (emojis.length === 0) return null;
+
+  if ('clientX' in event) {
+    return {
+      emoji: emojis[0],
+      origin: {
+        x: event.clientX,
+        y: event.clientY,
+      },
+    };
+  }
+
+  const firstEmoticon = currentTarget.querySelector('[data-emoticon]');
+  if (firstEmoticon instanceof HTMLElement) {
+    const emoji = firstEmoticon.getAttribute('data-emoticon');
+    if (emoji) {
+      return {
+        emoji,
+        origin: getBurstPointFromElement(firstEmoticon),
+      };
+    }
+  }
+
+  return {
+    emoji: emojis[0],
+    origin: getBurstPointFromElement(currentTarget),
+  };
+}

src/app/features/room/emoji-confetti/sendEmojiConfetti.ts

@@ -0,0 +1,42 @@
+import { MatrixClient } from 'matrix-js-sdk';
+import { EMOJI_REG_G, JUMBO_EMOJI_REG } from '../../../utils/regex';
+import { trimReplyFromBody } from '../../../utils/room';
+import { emojis } from '../../../plugins/emoji';
+import { EMOJI_CONFETTI_EVENT_TYPE, EmojiConfettiContent } from './types';
+
+const SHORTCODE_PATTERN = /:([^\s:]+):/g;
+
+export function extractJumboEmojis(body: string): string[] {
+  const trimmedBody = trimReplyFromBody(body).trim();
+  if (!JUMBO_EMOJI_REG.test(trimmedBody)) return [];
+
+  const found: string[] = [];
+
+  for (const match of trimmedBody.matchAll(EMOJI_REG_G)) {
+    const emoji = match[1];
+    if (emoji) found.push(emoji);
+  }
+
+  for (const match of trimmedBody.matchAll(SHORTCODE_PATTERN)) {
+    const shortcode = match[1];
+    const resolved = emojis.find((emoji) => emoji.shortcode === shortcode);
+    if (resolved) found.push(resolved.unicode);
+  }
+
+  return found.length > 0 ? found : ['🎉'];
+}
+
+export function sendEmojiConfettiEvent(
+  mx: MatrixClient,
+  roomId: string,
+  targetEventId: string,
+  emojis: string[]
+) {
+  const content: EmojiConfettiContent = {
+    emojis,
+    msgtype: EMOJI_CONFETTI_EVENT_TYPE,
+    target_event_id: targetEventId,
+  };
+
+  return mx.sendEvent(roomId, EMOJI_CONFETTI_EVENT_TYPE as never, content);
+}

src/app/features/room/emoji-confetti/types.ts

@@ -0,0 +1,16 @@
+import type { BurstPoint } from './burstOrigin';
+
+export const EMOJI_CONFETTI_EVENT_TYPE = 'app.relay.emoji_confetti';
+
+export type EmojiConfettiContent = {
+  emojis?: string[];
+  msgtype?: string;
+  target_event_id?: string;
+};
+
+export type EmojiConfettiBurst = {
+  id: string;
+  targetEventId: string;
+  emojis: string[];
+  origin: BurstPoint;
+};

src/app/features/room/emoji-confetti/useEmojiConfetti.ts

@@ -0,0 +1,137 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { MatrixEvent, Room, RoomEvent } from 'matrix-js-sdk';
+import { BurstPoint, resolveBurstOrigin } from './burstOrigin';
+import {
+  EMOJI_CONFETTI_EVENT_TYPE,
+  EmojiConfettiBurst,
+  EmojiConfettiContent,
+} from './types';
+
+function scheduleBurstFromValues(
+  burstId: string,
+  emojis: string[],
+  targetEventId: string | undefined,
+  onBurst: (burst: EmojiConfettiBurst) => void,
+  attempt = 0,
+  explicitOrigin?: BurstPoint
+) {
+  const targetElement =
+    targetEventId &&
+    document.querySelector(`[data-message-id="${CSS.escape(targetEventId)}"]`);
+
+  if (targetEventId && !targetElement && attempt < 8) {
+    window.setTimeout(
+      () =>
+        scheduleBurstFromValues(
+          burstId,
+          emojis,
+          targetEventId,
+          onBurst,
+          attempt + 1,
+          explicitOrigin
+        ),
+      50
+    );
+    return;
+  }
+
+  onBurst({
+    id: burstId,
+    targetEventId: targetEventId ?? '',
+    emojis: emojis.length > 0 ? emojis : ['🎉'],
+    origin: resolveBurstOrigin(targetEventId, emojis, explicitOrigin),
+  });
+}
+
+function scheduleBurst(
+  event: MatrixEvent,
+  onBurst: (burst: EmojiConfettiBurst) => void,
+  attempt = 0
+) {
+  const eventId = event.getId();
+  if (!eventId) return;
+
+  const { emojis, targetEventId } = parseEmojiConfettiContent(event.getContent());
+  scheduleBurstFromValues(eventId, emojis, targetEventId, onBurst, attempt);
+}
+
+function parseEmojiConfettiContent(content: unknown): { emojis: string[]; targetEventId?: string } {
+  const confettiContent = content as EmojiConfettiContent;
+  const emojis = Array.isArray(confettiContent.emojis)
+    ? confettiContent.emojis.filter((emoji): emoji is string => typeof emoji === 'string' && emoji.length > 0)
+    : [];
+
+  return {
+    emojis: emojis.length > 0 ? emojis : ['🎉'],
+    targetEventId:
+      typeof confettiContent.target_event_id === 'string'
+        ? confettiContent.target_event_id
+        : undefined,
+  };
+}
+
+export function useEmojiConfetti(room: Room) {
+  const [bursts, setBursts] = useState<EmojiConfettiBurst[]>([]);
+  const seenEventIdsRef = useRef(new Set<string>());
+  const ownEventIdsRef = useRef(new Set<string>());
+
+  const addBurst = useCallback((burst: EmojiConfettiBurst) => {
+    setBursts((current) => [...current, burst]);
+  }, []);
+
+  const registerOwnEventId = useCallback((eventId: string) => {
+    ownEventIdsRef.current.add(eventId);
+  }, []);
+
+  const queueBurst = useCallback((event: MatrixEvent) => {
+    const eventId = event.getId();
+    if (!eventId || seenEventIdsRef.current.has(eventId)) return;
+
+    seenEventIdsRef.current.add(eventId);
+
+    if (ownEventIdsRef.current.has(eventId)) {
+      ownEventIdsRef.current.delete(eventId);
+      return;
+    }
+
+    scheduleBurst(event, addBurst);
+  }, [addBurst]);
+
+  const triggerLocalBurst = useCallback(
+    (targetEventId: string, emojis: string[], origin?: BurstPoint) => {
+      const burstId = `local-${targetEventId}-${Date.now()}`;
+      scheduleBurstFromValues(burstId, emojis, targetEventId, addBurst, 0, origin);
+    },
+    [addBurst]
+  );
+
+  useEffect(() => {
+    const handleTimeline: (
+      event: MatrixEvent,
+      eventRoom: Room | undefined,
+      toStartOfTimeline?: boolean,
+      removed?: boolean
+    ) => void = (event, eventRoom, toStartOfTimeline, removed) => {
+      if (removed || toStartOfTimeline || eventRoom?.roomId !== room.roomId) return;
+      if (event.getType() !== EMOJI_CONFETTI_EVENT_TYPE) return;
+
+      queueBurst(event);
+    };
+
+    room.on(RoomEvent.Timeline, handleTimeline);
+    return () => {
+      room.off(RoomEvent.Timeline, handleTimeline);
+    };
+  }, [queueBurst, room]);
+
+  const removeBurst = useCallback((burstId: string) => {
+    setBursts((current) => current.filter((burst) => burst.id !== burstId));
+  }, []);
+
+  return {
+    bursts,
+    removeBurst,
+    triggerLocalBurst,
+    registerOwnEventId,
+  };
+}

src/app/features/room/emoji-confetti/useJumboEmojiConfetti.ts

@@ -0,0 +1,37 @@
+import { KeyboardEvent, MouseEvent, useCallback } from 'react';
+import { Room } from 'matrix-js-sdk';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { resolveClickedEmoji } from './resolveClickedEmoji';
+import { sendEmojiConfettiEvent } from './sendEmojiConfetti';
+import { useEmojiConfetti } from './useEmojiConfetti';
+
+export function useJumboEmojiConfetti(room: Room) {
+  const mx = useMatrixClient();
+  const { bursts, removeBurst, triggerLocalBurst, registerOwnEventId } = useEmojiConfetti(room);
+
+  const handleJumboEmojiClick = useCallback(
+    (targetEventId: string, body: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {
+      const clicked = resolveClickedEmoji(event, body);
+      if (!clicked) return;
+
+      const emojis = [clicked.emoji];
+
+      triggerLocalBurst(targetEventId, emojis, clicked.origin);
+      sendEmojiConfettiEvent(mx, room.roomId, targetEventId, emojis)
+        .then((response) => {
+          const eventId = response?.event_id;
+          if (eventId) registerOwnEventId(eventId);
+        })
+        .catch((error) => {
+          console.error('[emoji-confetti] Failed to send confetti event:', error);
+        });
+    },
+    [mx, registerOwnEventId, room.roomId, triggerLocalBurst]
+  );
+
+  return {
+    bursts,
+    removeBurst,
+    handleJumboEmojiClick,
+  };
+}

src/app/features/room/message/Message.tsx

@@ -62,6 +62,10 @@ import colorMXID from '../../../../util/colorMXID';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
 import { Presence, useUserPresence } from '../../../hooks/useUserPresence';
 import { useOtherUserColor } from '../../../hooks/useUserColor';
+import { useIsDirectRoom } from '../../../hooks/useRoom';
+import { useOtherUserCollectibles } from '../../../hooks/useUserCollectibles';
+import { pickAvatarDecorationUrl, pickNameplateUrl } from '../../../utils/collectibleAssets';
+import * as avatarDecorationCss from '../../../styles/AvatarDecoration.css';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -754,8 +758,15 @@ export const Message = as<'div', MessageProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
+    const direct = useIsDirectRoom();
     const senderId = mEvent.getSender() ?? '';
     const senderPresence = useUserPresence(senderId);
+    const { assetUrls } = useOtherUserCollectibles(senderId);
+    const nameplateUrl = pickNameplateUrl(assetUrls);
+    const nameplateIsVideo = Boolean(
+      assetUrls['nameplate:animated'] || assetUrls['nameplate:asset.webm']
+    );
+    const avatarDecorationUrl = pickAvatarDecorationUrl(assetUrls);
 
     const [hover, setHover] = useState(false);
     const { hoverProps } = useHover({ onHoverChange: setHover });
@@ -785,7 +796,7 @@ export const Message = as<'div', MessageProps>(
     const senderAvatarMxc = getMemberAvatarMxc(room, senderId);
 
     // Get custom user color from avatar metadata (takes priority)
-    const customUserColor = useOtherUserColor(senderId, senderAvatarMxc);
+    const customUserColor = useOtherUserColor(senderId, room);
 
     const tagColor = memberPowerTag?.color
       ? accessibleTagColors?.get(memberPowerTag.color)
@@ -796,6 +807,7 @@ export const Message = as<'div', MessageProps>(
 
     // Priority: custom user color > tag color (non-legacy) > colorMXID (legacy)
     const usernameColor = customUserColor ?? (legacyUsernameColor ? colorMXID(senderId) : tagColor);
+    const showNameplate = direct && hover && Boolean(nameplateUrl);
 
     const headerJSX = !collapse && (
       <Box
@@ -824,23 +836,41 @@ export const Message = as<'div', MessageProps>(
           </Username>
           {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
         </Box>
-        <Box shrink="No" gap="100">
+        <Box shrink="No" className={css.MessageNameplateAnchor}>
-          {messageLayout === MessageLayout.Modern && hover && (
+          <Box shrink="No" gap="100" alignItems="Center">
-            <>
+            {messageLayout === MessageLayout.Modern && hover && (
-              <Text as="span" size="T200" priority="300">
+              <>
-                {senderId}
+                <Text as="span" size="T200" priority="300">
-              </Text>
+                  {senderId}
-              <Text as="span" size="T200" priority="300">
+                </Text>
-                |
+                <Text as="span" size="T200" priority="300">
-              </Text>
+                  |
-            </>
+                </Text>
+              </>
+            )}
+            <Time
+              ts={mEvent.getTs()}
+              compact={messageLayout === MessageLayout.Compact}
+              hour24Clock={hour24Clock}
+              dateFormatString={dateFormatString}
+            />
+          </Box>
+          {showNameplate && (
+            <div className={css.MessageNameplateWrap}>
+              {nameplateIsVideo ? (
+                <video
+                  className={css.MessageNameplateOverlay}
+                  src={nameplateUrl}
+                  autoPlay
+                  loop
+                  muted
+                  playsInline
+                />
+              ) : (
+                <img className={css.MessageNameplateOverlay} src={nameplateUrl} alt="" draggable={false} />
+              )}
+            </div>
           )}
-          <Time
-            ts={mEvent.getTs()}
-            compact={messageLayout === MessageLayout.Compact}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          />
         </Box>
       </Box>
     );
@@ -857,24 +887,38 @@ export const Message = as<'div', MessageProps>(
       <AvatarBase
         className={messageLayout === MessageLayout.Bubble ? css.BubbleAvatarBase : undefined}
       >
-        <Avatar
+        <div className={css.MessageAvatarStack}>
-          className={classNames(css.MessageAvatar, presenceClass)}
+          <Avatar
-          as="button"
+            className={classNames(
-          size="300"
+              avatarDecorationUrl ? css.MessageAvatarCircular : css.MessageAvatar,
-          data-user-id={senderId}
+              !avatarDecorationUrl && presenceClass
-          onClick={onUserClick}
+            )}
-        >
+            radii={avatarDecorationUrl ? 'Pill' : undefined}
-          <UserAvatar
+            as="button"
-            userId={senderId}
+            size="300"
-            src={
+            data-user-id={senderId}
-              senderAvatarMxc
+            onClick={onUserClick}
-                ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
+          >
-                : undefined
+            <UserAvatar
-            }
+              userId={senderId}
-            alt={senderDisplayName}
+              src={
-            renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+                senderAvatarMxc
-          />
+                  ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
-        </Avatar>
+                  : undefined
+              }
+              alt={senderDisplayName}
+              renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+            />
+          </Avatar>
+          {avatarDecorationUrl && (
+            <img
+              className={avatarDecorationCss.AvatarDecorationOverlay}
+              src={avatarDecorationUrl}
+              alt=""
+              draggable={false}
+            />
+          )}
+        </div>
       </AvatarBase>
     );
 
@@ -954,6 +998,10 @@ export const Message = as<'div', MessageProps>(
         {...focusWithinProps}
         ref={ref}
       >
+        <div
+          className={css.MessageContentLayer}
+          data-message-nameplate-readable={showNameplate ? '' : undefined}
+        >
         {!edit && (hover || !!menuAnchor || !!emojiBoardAnchor) && (
           <div className={css.MessageOptionsBase}>
             <Menu className={css.MessageOptionsBar} variant="SurfaceVariant">
@@ -1242,6 +1290,7 @@ export const Message = as<'div', MessageProps>(
             {msgContentJSX}
           </ModernLayout>
         )}
+        </div>
       </MessageBase>
     );
   }

src/app/features/room/message/styles.css.ts

@@ -1,5 +1,35 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { DefaultReset, config, toRem, color } from 'folds';
+import * as layoutCss from '../../../components/message/layout/layout.css';
+
+const NAMEPLATE_READABLE_TEXT_OUTLINE = [
+  `0 0 2px ${color.Surface.ContainerHover}`,
+  `0 0 4px ${color.Surface.ContainerHover}`,
+  `-1px -1px 0 ${color.Surface.ContainerHover}`,
+  `1px -1px 0 ${color.Surface.ContainerHover}`,
+  `-1px 1px 0 ${color.Surface.ContainerHover}`,
+  `1px 1px 0 ${color.Surface.ContainerHover}`,
+  `0 -1px 0 ${color.Surface.ContainerHover}`,
+  `0 1px 0 ${color.Surface.ContainerHover}`,
+  `-1px 0 0 ${color.Surface.ContainerHover}`,
+  `1px 0 0 ${color.Surface.ContainerHover}`,
+].join(', ');
+
+globalStyle(`[data-message-nameplate-readable] [data-message-header] button`, {
+  textShadow: NAMEPLATE_READABLE_TEXT_OUTLINE,
+});
+
+globalStyle(`[data-message-nameplate-readable] [data-message-header] time`, {
+  textShadow: NAMEPLATE_READABLE_TEXT_OUTLINE,
+});
+
+globalStyle(`[data-message-nameplate-readable] [data-message-header] span`, {
+  textShadow: NAMEPLATE_READABLE_TEXT_OUTLINE,
+});
+
+globalStyle(`[data-message-nameplate-readable] .${layoutCss.MessageTextBody.classNames.base}`, {
+  textShadow: NAMEPLATE_READABLE_TEXT_OUTLINE,
+});
 
 export const MessageBase = style({
   position: 'relative',
@@ -51,6 +81,12 @@ export const MessageAvatar = style({
   },
 });
 
+export const MessageAvatarCircular = style({
+  cursor: 'pointer',
+  position: 'relative',
+  overflow: 'visible',
+});
+
 export const MessageAvatarOnline = style({
   '::before': {
     backgroundColor: '#38842b',
@@ -69,8 +105,41 @@ export const MessageAvatarOffline = style({
   },
 });
 
-export const MessageQuickReaction = style({
+export const MessageAvatarStack = style({
-  minWidth: toRem(32),
+  position: 'relative',
+  display: 'inline-flex',
+  lineHeight: 0,
+  overflow: 'visible',
+});
+
+export const MessageNameplateAnchor = style({
+  position: 'relative',
+  flexShrink: 0,
+});
+
+export const MessageNameplateWrap = style({
+  position: 'absolute',
+  top: `calc(100% + ${toRem(6)})`,
+  right: 0,
+  width: toRem(220),
+  maxWidth: toRem(280),
+  height: toRem(42),
+  pointerEvents: 'none',
+  zIndex: 0,
+});
+
+export const MessageNameplateOverlay = style({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  objectPosition: 'right center',
+  pointerEvents: 'none',
+  borderRadius: toRem(6),
+});
+
+export const MessageContentLayer = style({
+  position: 'relative',
+  zIndex: 1,
 });
 
 export const MessageMenuGroup = style({

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -116,7 +116,7 @@ function PinnedMessage({
 
   const sender = pinnedEvent?.getSender();
   const senderAvatarMxc = sender ? getMemberAvatarMxc(room, sender) : undefined;
-  const customUserColor = useOtherUserColor(sender ?? '', senderAvatarMxc);
+  const customUserColor = useOtherUserColor(sender ?? '', room);
 
   const handleOpenClick: MouseEventHandler = (evt) => {
     evt.stopPropagation();

src/app/features/settings/about/About.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { getVersion } from '@tauri-apps/api/app';
+import { getAppVersion } from '../../../utils/appVersion';
+import { useOpenReleaseNotesDialog } from '../../../components/updates-dialog/UpdatesDialogHost';
+import { getCurrentUpdatePreview } from '../../../data/updateNotes';
 import { Box, Text, IconButton, Scroll, Button, config, toRem } from 'folds';
 import { Icon, Icons } from '../../../components/icons';
 import { Page, PageContent, PageHeader } from '../../../components/page';
@@ -15,9 +17,13 @@ type AboutProps = {
 };
 export function About({ requestClose }: AboutProps) {
   const mx = useMatrixClient();
+  const openReleaseNotes = useOpenReleaseNotesDialog();
   const [version, setVersion] = useState<string>('');
   const [protocolStatus, setProtocolStatus] = useState<string>('Checking desktop protocol integration...');
   const [protocolBusy, setProtocolBusy] = useState<boolean>(false);
+  const [updatePreview, setUpdatePreview] = useState<{ title: string; description: string } | null>(
+    null
+  );
 
   const formatProtocolStatus = useCallback((data: {
     scheme: string;
@@ -93,8 +99,9 @@ export function About({ requestClose }: AboutProps) {
   };
 
   useEffect(() => {
-    getVersion().then(setVersion).catch(() => setVersion('unknown'));
+    getAppVersion().then(setVersion).catch(() => setVersion('unknown'));
     refreshProtocolStatus();
+    getCurrentUpdatePreview().then(setUpdatePreview).catch(() => setUpdatePreview(null));
   }, [refreshProtocolStatus]);
 
   return (
@@ -151,6 +158,36 @@ export function About({ requestClose }: AboutProps) {
                   </Box>
                 </Box>
               </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">What&apos;s new</Text>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="300"
+                >
+                  <SettingTile
+                    title={updatePreview?.title ?? 'Release notes'}
+                    description={
+                      updatePreview
+                        ? `Paarrot ${version} — ${updatePreview.description}`
+                        : 'View highlights from the latest Paarrot update.'
+                    }
+                    after={
+                      <Button
+                        onClick={openReleaseNotes}
+                        variant="Secondary"
+                        fill="Soft"
+                        size="300"
+                        radii="300"
+                        outlined
+                      >
+                        <Text size="B300">View updates</Text>
+                      </Button>
+                    }
+                  />
+                </SequenceCard>
+              </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Options</Text>
                 <SequenceCard

src/app/features/settings/account/CollectiblePreviewMedia.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { DiscordCollectibleItem } from '../../../utils/discordCollectibles';
+import {
+  isCatalogVideoPreview,
+  pickCatalogAnimatedPreviewUrl,
+  pickCatalogStaticPreviewUrl,
+} from '../../../utils/collectibleAssets';
+
+type CollectiblePreviewMediaProps = {
+  item: DiscordCollectibleItem;
+  className?: string;
+  restartToken?: number;
+};
+
+export function CollectiblePreviewMedia({
+  item,
+  className,
+  restartToken = 0,
+}: CollectiblePreviewMediaProps) {
+  const staticUrl = pickCatalogStaticPreviewUrl(item);
+  const animatedUrl = pickCatalogAnimatedPreviewUrl(item);
+  const activeUrl = animatedUrl ?? staticUrl;
+
+  if (!activeUrl) return null;
+
+  if (animatedUrl && isCatalogVideoPreview(animatedUrl)) {
+    return (
+      <video
+        key={restartToken}
+        className={className}
+        src={animatedUrl}
+        autoPlay
+        loop
+        muted
+        playsInline
+      />
+    );
+  }
+
+  return (
+    <img
+      key={restartToken}
+      className={className}
+      src={activeUrl}
+      alt=""
+      loading="lazy"
+      draggable={false}
+    />
+  );
+}

src/app/features/settings/account/CollectiblesSection.css.ts

@@ -0,0 +1,332 @@
+import { style } from '@vanilla-extract/css';
+import { color, toRem } from 'folds';
+
+/** Discord nameplate static.png assets are 448×84. */
+export const NAMEPLATE_ASPECT_RATIO = '448 / 84';
+
+/**
+ * Mini profile hero preview — matches UserRoomProfile menu width (260) and UserHero layout,
+ * with extra vertical space below the name so effects have room to play.
+ */
+export const PROFILE_HERO_PREVIEW_WIDTH = 260;
+export const PROFILE_HERO_CONTENT_HEIGHT = 235;
+export const PROFILE_HERO_PREVIEW_EXTRA_HEIGHT = Math.round(PROFILE_HERO_CONTENT_HEIGHT * 0.5);
+export const PROFILE_HERO_PREVIEW_HEIGHT = PROFILE_HERO_CONTENT_HEIGHT + PROFILE_HERO_PREVIEW_EXTRA_HEIGHT;
+export const PROFILE_HERO_PREVIEW_ASPECT_RATIO = `${PROFILE_HERO_PREVIEW_WIDTH} / ${PROFILE_HERO_PREVIEW_HEIGHT}`;
+
+export const CollectibleGroupGrid = style({
+  display: 'grid',
+  width: '100%',
+});
+
+export const CollectibleGroupGridNameplate = style({
+  gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+  gap: toRem(3),
+});
+
+export const CollectibleGroupGridEffects = style({
+  gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))',
+  gap: toRem(12),
+});
+
+export const CollectibleGroupGridDecorations = style({
+  gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+  gap: toRem(12),
+});
+
+export const CollectibleGroupCard = style({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: toRem(4),
+  width: '100%',
+});
+
+export const CollectibleGroupPreview = style({
+  position: 'relative',
+  display: 'block',
+  width: '100%',
+  border: 'none',
+  padding: 0,
+  overflow: 'visible',
+  background: 'transparent',
+  cursor: 'pointer',
+  textAlign: 'left',
+});
+
+export const CollectibleGroupPreviewDisabled = style({
+  cursor: 'wait',
+});
+
+export const CollectibleGroupPreviewDimmed = style({
+  opacity: 0.5,
+});
+
+export const CollectiblePreviewFrame = style({
+  width: '100%',
+  borderRadius: toRem(6),
+  overflow: 'hidden',
+  backgroundColor: color.Surface.ContainerLine,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const CollectiblePreviewFrameDecoration = style({
+  overflow: 'visible',
+  backgroundColor: 'transparent',
+});
+
+export const CollectiblePreviewFrameProfileEffect = style({
+  backgroundColor: color.Surface.Container,
+  alignItems: 'stretch',
+  justifyContent: 'stretch',
+});
+
+export const ProfileEffectHeroPreview = style({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  overflow: 'hidden',
+  backgroundColor: color.Surface.Container,
+});
+
+export const ProfileEffectHeroCover = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  height: `${(140 / PROFILE_HERO_PREVIEW_HEIGHT) * 100}%`,
+  overflow: 'hidden',
+  zIndex: 1,
+});
+
+export const ProfileEffectHeroBanner = style({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  display: 'block',
+});
+
+export const ProfileEffectHeroCoverBlur = style({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  filter: 'blur(16px)',
+  transform: 'scale(2)',
+  display: 'block',
+});
+
+export const ProfileEffectHeroAvatarSlot = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: `${(140 / PROFILE_HERO_PREVIEW_HEIGHT) * 100}%`,
+  height: `${(29 / PROFILE_HERO_PREVIEW_HEIGHT) * 100}%`,
+  zIndex: 4,
+  pointerEvents: 'none',
+});
+
+export const ProfileEffectHeroAvatar = style({
+  position: 'absolute',
+  left: '50%',
+  top: 0,
+  transform: 'translate(-50%, -50%)',
+  width: `${(72 / PROFILE_HERO_PREVIEW_WIDTH) * 100}%`,
+  aspectRatio: '1',
+  borderRadius: '50%',
+  overflow: 'hidden',
+  border: `${toRem(1)} solid ${color.Surface.Container}`,
+  backgroundColor: color.Surface.Container,
+});
+
+export const ProfileEffectHeroAvatarImg = style({
+  width: '100%',
+  height: '100%',
+  display: 'block',
+  objectFit: 'cover',
+});
+
+export const ProfileEffectHeroInfo = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: `${((140 + 29) / PROFILE_HERO_PREVIEW_HEIGHT) * 100}%`,
+  marginTop: `${(-36 / PROFILE_HERO_PREVIEW_HEIGHT) * 100}%`,
+  paddingTop: `${(44 / PROFILE_HERO_PREVIEW_HEIGHT) * 100}%`,
+  paddingLeft: `${(16 / PROFILE_HERO_PREVIEW_WIDTH) * 100}%`,
+  paddingRight: `${(16 / PROFILE_HERO_PREVIEW_WIDTH) * 100}%`,
+  paddingBottom: `${(16 / PROFILE_HERO_PREVIEW_HEIGHT) * 100}%`,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: `${(8 / PROFILE_HERO_PREVIEW_HEIGHT) * 100}%`,
+  textAlign: 'center',
+  zIndex: 4,
+  pointerEvents: 'none',
+});
+
+export const ProfileEffectHeroName = style({
+  width: '100%',
+  fontSize: toRem(11),
+  lineHeight: 1.2,
+  fontWeight: 600,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const ProfileEffectHeroEffectLayer = style({
+  position: 'absolute',
+  inset: 0,
+  zIndex: 10,
+  pointerEvents: 'none',
+  overflow: 'visible',
+});
+
+export const ProfileEffectHeroEffect = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  width: '100%',
+  aspectRatio: '450 / 880',
+  objectFit: 'contain',
+  objectPosition: 'top center',
+});
+
+export const NameplatePreview = style({
+  display: 'block',
+  width: '100%',
+  aspectRatio: NAMEPLATE_ASPECT_RATIO,
+  objectFit: 'cover',
+  objectPosition: 'center',
+  borderRadius: toRem(4),
+});
+
+export const NameplatePreviewFallback = style({
+  width: '100%',
+  aspectRatio: NAMEPLATE_ASPECT_RATIO,
+  borderRadius: toRem(4),
+});
+
+export const CollectibleHoverCaption = style({
+  position: 'absolute',
+  top: `calc(100% + ${toRem(2)})`,
+  left: 0,
+  right: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: toRem(1),
+  padding: `${toRem(4)} ${toRem(6)}`,
+  background: color.Surface.Container,
+  border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+  borderRadius: toRem(4),
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.12)',
+  opacity: 0,
+  transition: 'opacity 0.15s ease',
+  pointerEvents: 'none',
+  zIndex: 2,
+  selectors: {
+    [`${CollectibleGroupPreview}:hover &`]: {
+      opacity: 1,
+    },
+    [`${CollectibleGroupPreview}:focus-visible &`]: {
+      opacity: 1,
+    },
+  },
+});
+
+export const CollectibleHoverLabel = style({
+  color: color.Surface.OnContainer,
+  fontSize: toRem(12),
+  fontWeight: 500,
+  lineHeight: 1.3,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const CollectibleHoverMeta = style({
+  color: color.Surface.OnContainer,
+  fontSize: toRem(10),
+  lineHeight: 1.3,
+  opacity: 0.7,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const VariantRow = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: toRem(4),
+  justifyContent: 'center',
+  padding: `0 ${toRem(2)}`,
+});
+
+export const VariantChip = style({
+  border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+  borderRadius: toRem(4),
+  padding: 0,
+  background: color.Surface.Container,
+  cursor: 'pointer',
+  overflow: 'hidden',
+  flexShrink: 0,
+});
+
+export const VariantChipSelected = style({
+  border: `${toRem(2)} solid ${color.Primary.Main}`,
+});
+
+export const VariantChipNameplate = style({
+  width: toRem(28),
+  height: toRem(10),
+  borderRadius: toRem(3),
+});
+
+export const VariantChipThumbnail = style({
+  width: toRem(28),
+  height: toRem(28),
+  objectFit: 'cover',
+  display: 'block',
+});
+
+export const VariantChipDecorationStack = style({
+  position: 'relative',
+  width: toRem(28),
+  height: toRem(28),
+  display: 'block',
+});
+
+export const VariantChipDecorationAvatar = style({
+  width: '62.5%',
+  height: '62.5%',
+  borderRadius: '50%',
+  overflow: 'hidden',
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  transform: 'translate(-50%, -50%)',
+});
+
+export const DecorationPreviewAvatar = style({
+  width: '100%',
+  height: '100%',
+  display: 'block',
+  objectFit: 'cover',
+});
+
+export const GridPreviewMedia = style({
+  width: '100%',
+  height: '100%',
+  objectFit: 'contain',
+  objectPosition: 'top center',
+});
+
+export const GridPreviewMediaCover = style({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  objectPosition: 'top center',
+});

src/app/features/settings/account/CollectiblesSection.tsx

@@ -0,0 +1,543 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { Box, Button, Input, Spinner, Text, color, toRem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useUserProfile } from '../../../hooks/useUserProfile';
+import { useUserBanner } from '../../../hooks/useUserBanner';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { mxcUrlToHttp } from '../../../utils/matrix';
+import { UserAvatar } from '../../../components/user-avatar';
+import {
+  CollectibleKind,
+  CollectibleVariantGroup,
+  DiscordCollectibleItem,
+  collectibleKindLabel,
+  defaultPreviewAspectRatio,
+  fetchPublishedCollectiblesCatalog,
+  groupCollectibleItems,
+  uploadCollectibleToMatrix,
+  variantItemLabel,
+} from '../../../utils/discordCollectibles';
+import { nameplatePaletteGradient } from '../../../utils/discordNameplatePalettes';
+import {
+  AVATAR_DECORATION_INNER_PERCENT,
+  AvatarDecorationOverlay,
+} from '../../../styles/AvatarDecoration.css';
+import { pickCatalogStaticPreviewUrl } from '../../../utils/collectibleAssets';
+import * as css from './CollectiblesSection.css';
+import { CollectiblePreviewMedia } from './CollectiblePreviewMedia';
+import { ProfileEffectHeroPreview } from './ProfileEffectHeroPreview';
+import { StoredCollectible, CollectibleProfileFields } from '../../../utils/profileFields';
+
+type CollectiblesSectionProps = {
+  collectibles: CollectibleProfileFields;
+  onApply: (kind: CollectibleKind, collectible: StoredCollectible | undefined) => Promise<void>;
+};
+
+const KIND_TABS: CollectibleKind[] = ['profile_effect', 'nameplate', 'avatar_decoration'];
+
+const KIND_FIELD: Record<CollectibleKind, keyof CollectibleProfileFields> = {
+  profile_effect: 'profile_effect',
+  nameplate: 'nameplate',
+  avatar_decoration: 'avatar_decoration',
+};
+
+function getItemAspectRatio(item: DiscordCollectibleItem): number {
+  return item.previewAspectRatio ?? defaultPreviewAspectRatio(item.type);
+}
+
+function CollectiblePreview({
+  item,
+  kind,
+  previewAvatarUrl,
+  previewBannerUrl,
+  previewDisplayName,
+  previewUserId,
+  restartToken,
+}: {
+  item: DiscordCollectibleItem;
+  kind: CollectibleKind;
+  previewAvatarUrl?: string;
+  previewBannerUrl?: string;
+  previewDisplayName?: string;
+  previewUserId: string;
+  restartToken: number;
+}) {
+  if (kind === 'nameplate') {
+    const swatchBackground =
+      item.previewGradient || nameplatePaletteGradient(item.palette) || color.Surface.ContainerLine;
+
+    if (item.thumbnailUrl || item.assets.length > 0) {
+      return (
+        <CollectiblePreviewMedia
+          item={item}
+          className={css.NameplatePreview}
+          restartToken={restartToken}
+        />
+      );
+    }
+
+    return (
+      <div className={css.NameplatePreviewFallback} style={{ background: swatchBackground }} />
+    );
+  }
+
+  if (kind === 'avatar_decoration') {
+    return (
+      <Box
+        style={{
+          position: 'relative',
+          width: `${AVATAR_DECORATION_INNER_PERCENT}%`,
+          aspectRatio: '1',
+        }}
+      >
+        <Box
+          style={{
+            width: '100%',
+            height: '100%',
+            borderRadius: '50%',
+            overflow: 'hidden',
+            backgroundColor: color.Surface.Container,
+          }}
+        >
+          <UserAvatar
+            className={css.DecorationPreviewAvatar}
+            userId={previewUserId}
+            src={previewAvatarUrl}
+            alt=""
+            renderFallback={() => <Icon size="300" src={Icons.User} filled />}
+          />
+        </Box>
+        <CollectiblePreviewMedia
+          item={item}
+          className={AvatarDecorationOverlay}
+          restartToken={restartToken}
+        />
+      </Box>
+    );
+  }
+
+  if (kind === 'profile_effect') {
+    return (
+      <ProfileEffectHeroPreview
+        item={item}
+        userId={previewUserId}
+        avatarUrl={previewAvatarUrl}
+        bannerUrl={previewBannerUrl}
+        displayName={previewDisplayName}
+        restartToken={restartToken}
+      />
+    );
+  }
+
+  return null;
+}
+
+function VariantChip({
+  item,
+  kind,
+  selected,
+  previewAvatarUrl,
+  previewUserId,
+  onSelect,
+}: {
+  item: DiscordCollectibleItem;
+  kind: CollectibleKind;
+  selected: boolean;
+  previewAvatarUrl?: string;
+  previewUserId: string;
+  onSelect: () => void;
+}) {
+  const label = variantItemLabel(item);
+
+  if (kind === 'nameplate') {
+    const swatchBackground =
+      item.previewGradient || nameplatePaletteGradient(item.palette) || color.Surface.ContainerLine;
+
+    return (
+      <button
+        type="button"
+        className={classNames(css.VariantChip, selected && css.VariantChipSelected)}
+        onClick={onSelect}
+        title={label}
+        aria-label={label}
+        aria-pressed={selected}
+      >
+        <div className={css.VariantChipNameplate} style={{ background: swatchBackground }} />
+      </button>
+    );
+  }
+
+  if (kind === 'avatar_decoration') {
+    const thumbUrl = pickCatalogStaticPreviewUrl(item);
+
+    return (
+      <button
+        type="button"
+        className={classNames(css.VariantChip, selected && css.VariantChipSelected)}
+        onClick={onSelect}
+        title={label}
+        aria-label={label}
+        aria-pressed={selected}
+      >
+        <div className={css.VariantChipDecorationStack}>
+          <div className={css.VariantChipDecorationAvatar}>
+            <UserAvatar
+              className={css.DecorationPreviewAvatar}
+              userId={previewUserId}
+              src={previewAvatarUrl}
+              alt=""
+              renderFallback={() => <Icon size="100" src={Icons.User} filled />}
+            />
+          </div>
+          {thumbUrl && (
+            <img
+              className={AvatarDecorationOverlay}
+              src={thumbUrl}
+              alt=""
+              draggable={false}
+            />
+          )}
+        </div>
+      </button>
+    );
+  }
+
+  const thumbUrl = pickCatalogStaticPreviewUrl(item);
+
+  return (
+    <button
+      type="button"
+      className={classNames(css.VariantChip, selected && css.VariantChipSelected)}
+      onClick={onSelect}
+      title={label}
+      aria-label={label}
+      aria-pressed={selected}
+    >
+      {thumbUrl ? (
+        <img className={css.VariantChipThumbnail} src={thumbUrl} alt="" loading="lazy" />
+      ) : (
+        <div className={css.VariantChipThumbnail} />
+      )}
+    </button>
+  );
+}
+
+function CollectibleVariantGroupCard({
+  group,
+  kind,
+  selectedItem,
+  onSelectItem,
+  applyingId,
+  onApply,
+  previewAvatarUrl,
+  previewBannerUrl,
+  previewDisplayName,
+  previewUserId,
+}: {
+  group: CollectibleVariantGroup;
+  kind: CollectibleKind;
+  selectedItem: DiscordCollectibleItem;
+  onSelectItem: (item: DiscordCollectibleItem) => void;
+  applyingId?: string;
+  onApply: (item: DiscordCollectibleItem) => void;
+  previewAvatarUrl?: string;
+  previewBannerUrl?: string;
+  previewDisplayName?: string;
+  previewUserId: string;
+}) {
+  const aspectRatio =
+    kind === 'profile_effect'
+      ? css.PROFILE_HERO_PREVIEW_ASPECT_RATIO
+      : String(getItemAspectRatio(selectedItem));
+  const meta = [variantItemLabel(selectedItem), group.category].filter(Boolean).join(' · ');
+  const [restartToken, setRestartToken] = useState(0);
+
+  const handlePreviewHover = () => {
+    setRestartToken((token) => token + 1);
+  };
+
+  return (
+    <div className={css.CollectibleGroupCard}>
+      <button
+        type="button"
+        className={classNames(
+          css.CollectibleGroupPreview,
+          applyingId && css.CollectibleGroupPreviewDisabled,
+          applyingId && applyingId !== selectedItem.id && css.CollectibleGroupPreviewDimmed
+        )}
+        onMouseEnter={handlePreviewHover}
+        onClick={() => onApply(selectedItem)}
+        disabled={Boolean(applyingId)}
+        title={selectedItem.label}
+        aria-label={selectedItem.label}
+      >
+        <div
+          className={classNames(
+            css.CollectiblePreviewFrame,
+            kind === 'avatar_decoration' && css.CollectiblePreviewFrameDecoration,
+            kind === 'profile_effect' && css.CollectiblePreviewFrameProfileEffect
+          )}
+          style={{
+            aspectRatio: kind === 'nameplate' ? undefined : aspectRatio,
+          }}
+        >
+          <CollectiblePreview
+            item={selectedItem}
+            kind={kind}
+            previewAvatarUrl={previewAvatarUrl}
+            previewBannerUrl={previewBannerUrl}
+            previewDisplayName={previewDisplayName}
+            previewUserId={previewUserId}
+            restartToken={restartToken}
+          />
+        </div>
+        <div className={css.CollectibleHoverCaption}>
+          <span className={css.CollectibleHoverLabel}>{selectedItem.label}</span>
+          <span className={css.CollectibleHoverMeta}>{meta}</span>
+        </div>
+      </button>
+
+      {group.items.length > 1 && (
+        <div className={css.VariantRow}>
+          {group.items.map((item) => (
+            <VariantChip
+              key={item.id}
+              item={item}
+              kind={kind}
+              selected={item.skuId === selectedItem.skuId}
+              previewAvatarUrl={previewAvatarUrl}
+              previewUserId={previewUserId}
+              onSelect={() => onSelectItem(item)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function CollectiblesSection({ collectibles, onApply }: CollectiblesSectionProps) {
+  const mx = useMatrixClient();
+  const userId = mx.getUserId() ?? '';
+  const profile = useUserProfile(userId);
+  const [bannerMxc] = useUserBanner();
+  const useAuthentication = useMediaAuthentication();
+  const previewAvatarUrl = useMemo(
+    () =>
+      profile.avatarUrl
+        ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
+        : undefined,
+    [mx, profile.avatarUrl, useAuthentication]
+  );
+  const previewBannerUrl = useMemo(
+    () =>
+      bannerMxc ? mxcUrlToHttp(mx, bannerMxc, useAuthentication) ?? undefined : undefined,
+    [bannerMxc, mx, useAuthentication]
+  );
+  const previewDisplayName = profile.displayName;
+  const [kind, setKind] = useState<CollectibleKind>('profile_effect');
+  const [catalogLoading, setCatalogLoading] = useState(false);
+  const [catalogError, setCatalogError] = useState<string>();
+  const [items, setItems] = useState<DiscordCollectibleItem[]>([]);
+  const [search, setSearch] = useState('');
+  const [applyingId, setApplyingId] = useState<string>();
+  const [applyProgress, setApplyProgress] = useState<string>();
+  const [error, setError] = useState<string>();
+  const [selectedByGroup, setSelectedByGroup] = useState<Record<string, string>>({});
+
+  const loadCatalog = useCallback(async (force = false) => {
+    setCatalogLoading(true);
+    setCatalogError(undefined);
+    try {
+      const desktopCatalog = window.electron?.discordCollectibles;
+      if (desktopCatalog) {
+        const result = await desktopCatalog.fetchCatalog(force);
+        if (!result?.success || !result.data?.items) {
+          throw new Error(result?.error || 'Failed to load collectibles catalog.');
+        }
+        setItems(result.data.items as DiscordCollectibleItem[]);
+      } else {
+        setItems(await fetchPublishedCollectiblesCatalog(force));
+      }
+    } catch (e) {
+      setCatalogError(e instanceof Error ? e.message : 'Failed to load catalog.');
+      setItems([]);
+    }
+    setCatalogLoading(false);
+  }, []);
+
+  useEffect(() => {
+    loadCatalog();
+  }, [loadCatalog]);
+
+  const current = collectibles[KIND_FIELD[kind]];
+
+  const filteredGroups = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    const filtered = items
+      .filter((item) => item.type === kind)
+      .filter((item) => {
+        if (!query) return true;
+        return (
+          item.name.toLowerCase().includes(query) ||
+          item.label.toLowerCase().includes(query) ||
+          item.category.toLowerCase().includes(query) ||
+          variantItemLabel(item).toLowerCase().includes(query)
+        );
+      });
+
+    return groupCollectibleItems(filtered);
+  }, [items, kind, search]);
+
+  useEffect(() => {
+    setSelectedByGroup((prev) => {
+      const next = { ...prev };
+      for (const group of filteredGroups) {
+        if (!next[group.id] || !group.items.some((item) => item.skuId === next[group.id])) {
+          next[group.id] = group.items[0]?.skuId ?? '';
+        }
+      }
+      return next;
+    });
+  }, [filteredGroups]);
+
+  const handleApply = async (item: DiscordCollectibleItem) => {
+    setApplyingId(item.id);
+    setError(undefined);
+    setApplyProgress(undefined);
+    try {
+      const stored = await uploadCollectibleToMatrix(mx, item, setApplyProgress);
+      await onApply(item.type, stored);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to apply collectible.');
+    }
+    setApplyingId(undefined);
+    setApplyProgress(undefined);
+  };
+
+  const handleRemove = async () => {
+    setError(undefined);
+    try {
+      await onApply(kind, undefined);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to remove collectible.');
+    }
+  };
+
+  const gridClassName = classNames(
+    css.CollectibleGroupGrid,
+    kind === 'nameplate' && css.CollectibleGroupGridNameplate,
+    kind === 'profile_effect' && css.CollectibleGroupGridEffects,
+    kind === 'avatar_decoration' && css.CollectibleGroupGridDecorations
+  );
+
+  return (
+    <Box direction="Column" gap="300">
+      <Text size="T200" style={{ opacity: 0.8 }}>
+        Browse a community-published Discord collectibles catalog, then download and upload only what
+        you pick to Matrix.
+      </Text>
+
+      <Box gap="200" alignItems="Center" wrap="Wrap">
+        <Button
+          size="300"
+          variant="Secondary"
+          fill="Soft"
+          radii="300"
+          onClick={() => loadCatalog(true)}
+          disabled={catalogLoading}
+        >
+          <Text size="B300">{catalogLoading ? 'Refreshing…' : 'Refresh catalog'}</Text>
+        </Button>
+      </Box>
+
+      <>
+          <Box gap="200" wrap="Wrap">
+            {KIND_TABS.map((tab) => (
+              <Button
+                key={tab}
+                size="300"
+                variant={tab === kind ? 'Primary' : 'Secondary'}
+                fill={tab === kind ? 'Solid' : 'Soft'}
+                radii="300"
+                onClick={() => setKind(tab)}
+              >
+                <Text size="B300">{collectibleKindLabel(tab)}</Text>
+              </Button>
+            ))}
+          </Box>
+
+          <Input
+            size="300"
+            variant="Secondary"
+            style={{ width: '100%' }}
+            placeholder={`Search ${collectibleKindLabel(kind).toLowerCase()}s…`}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+
+          {current && (
+            <Box gap="200" alignItems="Center" wrap="Wrap">
+              <Text size="T300">Active: {current.name}</Text>
+              <Button size="300" variant="Critical" fill="Soft" radii="300" onClick={handleRemove}>
+                <Text size="B300">Remove</Text>
+              </Button>
+            </Box>
+          )}
+
+          {catalogLoading && (
+            <Box gap="200" alignItems="Center">
+              <Spinner size="100" variant="Secondary" />
+              <Text size="T200">Loading collectibles catalog…</Text>
+            </Box>
+          )}
+
+          {catalogError && !catalogLoading && (
+            <Text size="T200" style={{ color: color.Critical.Main }}>{catalogError}</Text>
+          )}
+
+          {applyProgress && (
+            <Box gap="200" alignItems="Center">
+              <Spinner size="100" variant="Secondary" />
+              <Text size="T200">{applyProgress}</Text>
+            </Box>
+          )}
+
+          {error && <Text size="T200" style={{ color: color.Critical.Main }}>{error}</Text>}
+
+          <div className={gridClassName}>
+            {filteredGroups.map((group) => {
+              const selectedSku = selectedByGroup[group.id] ?? group.items[0]?.skuId;
+              const selectedItem =
+                group.items.find((item) => item.skuId === selectedSku) ?? group.items[0];
+              if (!selectedItem) return null;
+
+              return (
+                <CollectibleVariantGroupCard
+                  key={group.id}
+                  group={group}
+                  kind={kind}
+                  selectedItem={selectedItem}
+                  onSelectItem={(item) =>
+                    setSelectedByGroup((prev) => ({ ...prev, [group.id]: item.skuId }))
+                  }
+                  applyingId={applyingId}
+                  onApply={handleApply}
+                  previewAvatarUrl={previewAvatarUrl}
+                  previewBannerUrl={previewBannerUrl}
+                  previewDisplayName={previewDisplayName}
+                  previewUserId={userId}
+                />
+              );
+            })}
+          </div>
+
+          {!catalogLoading && filteredGroups.length === 0 && (
+            <Text size="T200" style={{ opacity: 0.7 }}>No items match your search.</Text>
+          )}
+      </>
+    </Box>
+  );
+}

src/app/features/settings/account/Profile.tsx

@@ -11,7 +11,7 @@ import React, {
 import classNames from 'classnames';
 import { Box, Text, IconButton, Input, Avatar, Button, Overlay, OverlayBackdrop, OverlayCenter, Modal, Dialog, Header, config, Spinner, color, toRem } from 'folds';
 import { Icon, Icons } from '../../../components/icons';
-import { HexColorPicker, RgbaColorPicker, RgbaColor } from 'react-colorful';
+import { HexColorPicker } from 'react-colorful';
 import FocusTrap from 'focus-trap-react';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { UserProfile, useUserProfile } from '../../../hooks/useUserProfile';
@@ -19,7 +19,7 @@ import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useAuthenticatedMediaUrl } from '../../../hooks/useAuthenticatedMediaUrl';
-import { nameInitials, getContrastingTextColor, stripAlphaFromColor, getTextShadowColor } from '../../../utils/common';
+import { getTextShadowColor } from '../../../utils/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useFilePicker } from '../../../hooks/useFilePicker';
 import { useObjectURL } from '../../../hooks/useObjectURL';
@@ -29,30 +29,26 @@ import { ModalWide } from '../../../styles/Modal.css';
 import { createUploadAtom, UploadSuccess } from '../../../state/upload';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { useCapabilities } from '../../../hooks/useCapabilities';
-import { HexColorPickerPopOut } from '../../../components/HexColorPickerPopOut';
+import { useUserColorPreference } from '../../../hooks/useUserColor';
-import { AngleSelector } from '../../../components/AngleSelector';
+import { useUserBanner } from '../../../hooks/useUserBanner';
-import { useUserColor, useOtherUserColor } from '../../../hooks/useUserColor';
-import { useUserBanner, useOtherUserBanner } from '../../../hooks/useUserBanner';
-import { useUserProfileStyle } from '../../../hooks/useUserProfileStyle';
 import { useUserPresence } from '../../../hooks/useUserPresence';
+import { useTheme, ThemeKind } from '../../../hooks/useTheme';
 import { AvatarPresence, PresenceBadge } from '../../../components/presence';
 import { BreakWord, LineClamp3 } from '../../../styles/Text.css';
 import colorMXID, { getColorMXIDValue } from '../../../../util/colorMXID';
-import {
-  embedMetadataInImage,
-  detectImageFormat,
-  getMimeType,
-  getExtension,
-  ImageMetadata,
-  needsPngForMetadata,
-  convertImageDataToPng,
-  uint8ArrayToBlob,
-} from '../../../utils/imageMetadata';
 import { getCurrentAccessToken } from '../../../utils/auth';
+import { CollectiblesSection } from './CollectiblesSection';
+import { useUserCollectibles } from '../../../hooks/useUserCollectibles';
+import { pickAvatarDecorationUrl } from '../../../utils/collectibleAssets';
+import * as avatarDecorationCss from '../../../styles/AvatarDecoration.css';
+import {
+  ColorPreference,
+  hasColorPreference,
+  resolveColorForTheme,
+} from '../../../utils/profileFields';
 
 /**
- * Banner upload component for user's profile banner
+ * Banner upload component for user's profile banner (MSC4427 via MSC4133).
- * Stored in avatar image metadata, visible to other Paarrot users
  */
 function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTMLDivElement>; nameRef: React.RefObject<HTMLDivElement> }) {
   const mx = useMatrixClient();
@@ -61,6 +57,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
   const profile = useUserProfile(userId);
   const presence = useUserPresence(userId);
   const [userBanner, setUserBanner, loading] = useUserBanner();
+  const [collectibles, updateCollectible] = useUserCollectibles();
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string>();
   const [hoveredArea, setHoveredArea] = useState<string | null>(null);
@@ -92,32 +89,42 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
     ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
     : undefined;
 
+  const avatarDecorationUrl = useMemo(() => {
+    const decoration = collectibles.avatar_decoration;
+    if (!decoration) return undefined;
+    const assetUrls: Record<string, string | undefined> = {};
+    for (const [role, mxc] of Object.entries(decoration.assets)) {
+      assetUrls[`avatar_decoration:${role}`] =
+        mxcUrlToHttp(mx, mxc, useAuthentication) ?? undefined;
+    }
+    return pickAvatarDecorationUrl(assetUrls);
+  }, [collectibles.avatar_decoration, mx, useAuthentication]);
+
   // Larger avatar URL for the blurred cover fallback
   const avatarCoverUrl = profile.avatarUrl
     ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication) ?? undefined
     : undefined;
   const authenticatedCoverUrl = useAuthenticatedMediaUrl(avatarCoverUrl, useAuthentication);
 
-  const [userColor, setUserColor] = useUserColor();
+  const theme = useTheme();
-  const [localColor, setLocalColor] = useState(userColor ?? '#3b82f6');
+  const [colorPreference, setColorPreference, colorLoading] = useUserColorPreference();
+  const [localOnDark, setLocalOnDark] = useState('#ffd9f5');
+  const [localOnLight, setLocalOnLight] = useState('#440000');
   const [savingColor, setSavingColor] = useState(false);
   const [colorError, setColorError] = useState<string>();
 
   useEffect(() => {
-    if (userColor) {
+    if (colorPreference?.on_dark) setLocalOnDark(colorPreference.on_dark);
-      setLocalColor(userColor);
+    if (colorPreference?.on_light) setLocalOnLight(colorPreference.on_light);
-    }
+  }, [colorPreference]);
-  }, [userColor]);
 
   const handleColorSave = async () => {
     setSavingColor(true);
     setColorError(undefined);
     try {
-      await setUserColor(localColor);
+      await setColorPreference({ on_dark: localOnDark, on_light: localOnLight });
-      // Sync user object to propagate changes throughout app
-      await syncUserAvatar();
     } catch (e) {
-      setColorError('Failed to save color');
+      setColorError('Failed to save colors. Your server may not support profile fields (MSC4133).');
     }
     setSavingColor(false);
   };
@@ -126,141 +133,15 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
     setSavingColor(true);
     setColorError(undefined);
     try {
-      await setUserColor(undefined);
+      await setColorPreference(undefined);
+      setLocalOnDark('#ffd9f5');
+      setLocalOnLight('#440000');
     } catch (e) {
-      setColorError('Failed to remove color');
+      setColorError('Failed to remove colors');
     }
     setSavingColor(false);
   };
 
-  // Profile style settings (border color and gradient)
-  const [profileStyle, setProfileStyle, styleLoading] = useUserProfileStyle();
-  // Initialize with transparent alpha so saved values show in preview until user edits
-  const [localBorderColor, setLocalBorderColor] = useState<RgbaColor>({ r: 59, g: 130, b: 246, a: 0 });
-  const [localGradientStart, setLocalGradientStart] = useState<RgbaColor>({ r: 0, g: 0, b: 0, a: 0 });
-  const [localGradientStop, setLocalGradientStop] = useState<RgbaColor>({ r: 0, g: 0, b: 0, a: 0 });
-  const [localGradientDirection, setLocalGradientDirection] = useState(180); // degrees (180 = top to bottom)
-  const [savingStyle, setSavingStyle] = useState(false);
-  const [styleError, setStyleError] = useState<string>();
-  // Track if user has started editing (to show local values in preview)
-  const [editingBorder, setEditingBorder] = useState(false);
-  const [editingGradient, setEditingGradient] = useState(false);
-
-  // Helper to convert RGBA to hex with alpha (#RRGGBBAA)
-  const rgbaToHex = (rgba: RgbaColor): string => {
-    const r = rgba.r.toString(16).padStart(2, '0');
-    const g = rgba.g.toString(16).padStart(2, '0');
-    const b = rgba.b.toString(16).padStart(2, '0');
-    const a = Math.round(rgba.a * 255).toString(16).padStart(2, '0');
-    return `#${r}${g}${b}${a}`;
-  };
-
-  // Helper to convert hex with alpha to RGBA
-  const hexToRgba = (hex: string): RgbaColor => {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
-    if (result) {
-      return {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-        a: result[4] ? parseInt(result[4], 16) / 255 : 1,
-      };
-    }
-    return { r: 59, g: 130, b: 246, a: 1 };
-  };
-
-  // Helper to parse degrees from direction string (e.g., "180deg" -> 180)
-  const parseDirectionDegrees = (direction: string): number => {
-    const degMatch = direction.match(/^(\d+)deg$/i);
-    if (degMatch) return parseInt(degMatch[1], 10);
-    // Fallback for legacy "to X" format
-    const keywordMap: Record<string, number> = {
-      'to top': 0,
-      'to top right': 45,
-      'to right': 90,
-      'to bottom right': 135,
-      'to bottom': 180,
-      'to bottom left': 225,
-      'to left': 270,
-      'to top left': 315,
-    };
-    return keywordMap[direction.toLowerCase()] ?? 180;
-  };
-
-  // Sync local style state with loaded profile style
-  useEffect(() => {
-    if (profileStyle.avatarBorderColor) {
-      setLocalBorderColor(hexToRgba(profileStyle.avatarBorderColor));
-    }
-    if (profileStyle.gradient) {
-      setLocalGradientStart(hexToRgba(profileStyle.gradient.startColor));
-      setLocalGradientStop(hexToRgba(profileStyle.gradient.stopColor));
-      setLocalGradientDirection(parseDirectionDegrees(profileStyle.gradient.direction));
-    }
-  }, [profileStyle]);
-
-  const handleBorderColorSave = async () => {
-    setSavingStyle(true);
-    setStyleError(undefined);
-    try {
-      await setProfileStyle({ avatarBorderColor: rgbaToHex(localBorderColor) });
-      await syncUserAvatar();
-      setEditingBorder(false);
-    } catch (e) {
-      setStyleError('Failed to save border color');
-    }
-    setSavingStyle(false);
-  };
-
-  const handleBorderColorRemove = async () => {
-    setSavingStyle(true);
-    setStyleError(undefined);
-    try {
-      await setProfileStyle({ avatarBorderColor: undefined });
-      await syncUserAvatar();
-      setEditingBorder(false);
-      setLocalBorderColor({ r: 59, g: 130, b: 246, a: 0 });
-    } catch (e) {
-      setStyleError('Failed to remove border color');
-    }
-    setSavingStyle(false);
-  };
-
-  const handleGradientSave = async () => {
-    setSavingStyle(true);
-    setStyleError(undefined);
-    try {
-      await setProfileStyle({
-        gradient: {
-          direction: `${localGradientDirection}deg`,
-          startColor: rgbaToHex(localGradientStart),
-          stopColor: rgbaToHex(localGradientStop),
-        },
-      });
-      await syncUserAvatar();
-      setEditingGradient(false);
-    } catch (e) {
-      setStyleError('Failed to save gradient');
-    }
-    setSavingStyle(false);
-  };
-
-  const handleGradientRemove = async () => {
-    setSavingStyle(true);
-    setStyleError(undefined);
-    try {
-      await setProfileStyle({ gradient: undefined });
-      await syncUserAvatar();
-      setEditingGradient(false);
-      setLocalGradientStart({ r: 0, g: 0, b: 0, a: 0 });
-      setLocalGradientStop({ r: 0, g: 0, b: 0, a: 0 });
-      setLocalGradientDirection(180);
-    } catch (e) {
-      setStyleError('Failed to remove gradient');
-    }
-    setSavingStyle(false);
-  };
-
   const [isEditingName, setIsEditingName] = useState(false);
   const [editedName, setEditedName] = useState(profile.displayName || '');
   const [savingName, setSavingName] = useState(false);
@@ -475,82 +356,14 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
       setSaving(true);
       setError(undefined);
       try {
-        // Re-embed existing banner/color/style into the new avatar when present
+        await mx.setAvatarUrl(upload.mxc);
-        const metadata: ImageMetadata = {
-          banner: userBanner,
-          color: userColor,
-          avatarBorderColor: profileStyle.avatarBorderColor,
-          gradient: profileStyle.gradient,
-        };
-        const hasMetadata = Boolean(
-          metadata.color ||
-            metadata.banner ||
-            metadata.avatarBorderColor ||
-            metadata.gradient
-        );
-
-        // Nothing to re-embed — use the already-uploaded MXC directly
-        if (!hasMetadata) {
-          await mx.setAvatarUrl(upload.mxc);
-          const userId = mx.getUserId();
-          if (userId) {
-            const user = mx.getUser(userId);
-            if (user && user.avatarUrl !== upload.mxc) {
-              user.setAvatarUrl(upload.mxc);
-            }
-          }
-          setAvatarFile(undefined);
-          await syncUserAvatar();
-          return;
-        }
-
-        const httpUrl = mxcUrlToHttp(mx, upload.mxc, useAuthentication);
-        if (!httpUrl) throw new Error('Could not resolve uploaded avatar URL');
-
-        // Always use current session's token to avoid stale tokens during account switches
-        const accessToken = getCurrentAccessToken();
-        let response = await fetch(httpUrl, {
-          headers: accessToken && useAuthentication ? { Authorization: `Bearer ${accessToken}` } : undefined,
-        });
-
-        // If we got a 401 and we tried with auth, fallback to unauthenticated request
-        if (!response.ok && response.status === 401 && accessToken && useAuthentication) {
-          console.warn('[Profile] Auth failed (401), attempting unauthenticated fallback for avatar fetch');
-          response = await fetch(httpUrl);
-        }
-
-        if (!response.ok) throw new Error('Failed to fetch uploaded avatar');
-        let avatarData: ArrayBuffer | Uint8Array = await response.arrayBuffer();
-
-        let format = detectImageFormat(avatarData);
-        if (format === 'unknown') throw new Error('Unsupported avatar image format');
-
-        // Banner / border / gradient only live in PNG tEXt — convert JPEG/WebP/GIF first
-        if (format !== 'png' && needsPngForMetadata(metadata)) {
-          const pngData = await convertImageDataToPng(avatarData);
-          if (!pngData) throw new Error('Failed to convert avatar to PNG for metadata');
-          avatarData = pngData;
-          format = 'png';
-        }
-
-        const modifiedData = embedMetadataInImage(avatarData, metadata);
-        if (!modifiedData) throw new Error('Failed to embed metadata in avatar');
-
-        const mimeType = getMimeType(format);
-        const extension = getExtension(format);
-        const blob = uint8ArrayToBlob(modifiedData, mimeType);
-        const uploadResponse = await mx.uploadContent(blob, { name: `avatar.${extension}`, type: mimeType });
-
-        await mx.setAvatarUrl(uploadResponse.content_uri);
-
         const userId = mx.getUserId();
         if (userId) {
           const user = mx.getUser(userId);
-          if (user && user.avatarUrl !== uploadResponse.content_uri) {
+          if (user && user.avatarUrl !== upload.mxc) {
-            user.setAvatarUrl(uploadResponse.content_uri);
+            user.setAvatarUrl(upload.mxc);
           }
         }
-
         setAvatarFile(undefined);
         await syncUserAvatar();
       } catch (e: any) {
@@ -558,7 +371,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
       }
       setSaving(false);
     },
-    [mx, useAuthentication, userBanner, userColor, profileStyle, syncUserAvatar]
+    [mx, syncUserAvatar]
   );
 
   const handleRemoveBanner = async () => {
@@ -574,33 +387,33 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
     setSaving(false);
   };
 
-  // Build gradient CSS for preview (shows local editing values when user is editing,
+  const previewPreference: ColorPreference = { on_dark: localOnDark, on_light: localOnLight };
-  // otherwise falls back to saved profile style)
+  const previewProfileColor =
-  const previewGradient = editingGradient
+    resolveColorForTheme(previewPreference, theme.kind) || getColorMXIDValue(userId, theme.kind === ThemeKind.Dark);
-    ? `linear-gradient(${localGradientDirection}deg, ${rgbaToHex(localGradientStart)}, ${rgbaToHex(localGradientStop)})`
-    : profileStyle.gradient
-      ? `linear-gradient(${profileStyle.gradient.direction}, ${profileStyle.gradient.startColor}, ${profileStyle.gradient.stopColor})`
-      : undefined;
-
-  // Build border color for preview (shows local editing value when user is editing,
-  // otherwise falls back to saved profile style)
-  const previewBorderColor = editingBorder
-    ? rgbaToHex(localBorderColor)
-    : profileStyle.avatarBorderColor;
-
-  const previewPillBgColor = previewBorderColor ? stripAlphaFromColor(previewBorderColor) : undefined;
-  const previewProfileColor = userColor || getColorMXIDValue(userId);
-
   const previewTextShadow = `0 1px 4px ${getTextShadowColor(previewProfileColor)}`;
+  const hasSavedColors = hasColorPreference(colorPreference);
+  const colorPickerSize = toRem(200);
+  const colorPreviewPlateStyle = {
+    width: '100%',
+    boxSizing: 'border-box' as const,
+    padding: `${toRem(4)} ${toRem(8)}`,
+    borderRadius: toRem(8),
+    border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    lineHeight: 1.2,
+  };
+  const displayName = profile.displayName || getMxIdLocalPart(userId) || userId;
 
   return (
-    <Box direction="Column" gap="300">
+    <Box direction="Column" gap="300" style={{ width: '100%', alignItems: 'center' }}>
       <Box
         direction="Column"
         style={{
           border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
           borderRadius: toRem(8),
-          width: toRem(340),
+          width: '60%',
           overflow: 'hidden',
           position: 'relative',
         }}
@@ -627,7 +440,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                 cursor: 'pointer',
                 border: 'none',
                 padding: 0,
-                backgroundColor: bannerBlobUrl ? 'transparent' : (userColor || colorMXID(userId)),
+                backgroundColor: bannerBlobUrl ? 'transparent' : colorMXID(userId),
                 filter: bannerBlobUrl || authenticatedCoverUrl ? 'none' : 'brightness(50%)',
                 display: 'flex',
                 alignItems: 'center',
@@ -737,41 +550,61 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
               onMouseLeave={() => setHoveredArea(null)}
             >
               <Box
-                as="button"
-                onClick={handleAvatarClick}
                 style={{
-                  backgroundColor: previewBorderColor || color.Surface.Container,
+                  position: 'relative',
-                  border: 'none',
+                  width: toRem(76),
-                  padding: 0,
+                  height: toRem(76),
-                  cursor: 'pointer',
-                  borderRadius: '50%',
                 }}
               >
                 <AvatarPresence
-                  badgeBackgroundColor={previewBorderColor}
                   badge={
                     presence && (
                       <PresenceBadge presence={presence.presence} status={presence.status} />
                     )
                   }
                 >
-                  <Avatar
+                  <Box
-                    size="500"
+                    as="button"
+                    onClick={handleAvatarClick}
                     style={{
-                      width: toRem(72),
+                      position: 'relative',
-                      height: toRem(72),
+                      width: '100%',
-                      outline: previewBorderColor
+                      height: '100%',
-                        ? `${toRem(4)} solid ${previewBorderColor}`
+                      backgroundColor: avatarUrl ? 'transparent' : color.Surface.Container,
-                        : `${config.borderWidth.B600} solid ${color.Surface.Container}`,
+                      border: 'none',
+                      padding: 0,
+                      cursor: 'pointer',
+                      borderRadius: '50%',
                     }}
                   >
-                    <UserAvatar
+                    <Avatar
-                      userId={userId}
+                      size="500"
-                      src={avatarUrl}
+                      style={{
-                      alt={userId}
+                        width: toRem(76),
-                      renderFallback={() => <Icon size="500" src={Icons.User} filled />}
+                        height: toRem(76),
-                    />
+                        ...(avatarUrl
-                  </Avatar>
+                          ? { outline: 'none', border: 'none', boxShadow: 'none' }
+                          : {
+                              outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
+                            }),
+                      }}
+                    >
+                      <UserAvatar
+                        userId={userId}
+                        src={avatarUrl}
+                        alt={userId}
+                        renderFallback={() => <Icon size="500" src={Icons.User} filled />}
+                      />
+                    </Avatar>
+                    {avatarDecorationUrl && (
+                      <img
+                        className={avatarDecorationCss.AvatarDecorationOverlay}
+                        src={avatarDecorationUrl}
+                        alt=""
+                        draggable={false}
+                      />
+                    )}
+                  </Box>
                 </AvatarPresence>
               </Box>
               {/* Avatar action icons - shown on hover */}
@@ -832,73 +665,20 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
             </Box>
           </Box>
 
-          {/* Profile Info Section - matches UserRoomProfile gradient section */}
+          {/* Profile Info Section */}
           <Box
             direction="Column"
-            gap="400"
+            gap="200"
             alignItems="Center"
             style={{
               padding: config.space.S400,
               paddingTop: `calc(${config.space.S400} + ${toRem(36)})`,
               marginTop: toRem(-36),
-              background: previewGradient,
               textAlign: 'center',
             }}
           >
-            {/* Display Name with Color Picker */}
+            {/* Display Name */}
-            <Box alignItems="Center" gap="200" justifyContent="Center">
+            <Box style={{ width: '100%' }}>
-              <HexColorPickerPopOut
-                picker={
-                  <Box direction="Column" gap="200">
-                    <HexColorPicker color={localColor} onChange={setLocalColor} />
-                    <Box gap="100" alignItems="Center">
-                      <Input
-                        size="300"
-                        variant="Secondary"
-                        style={{ width: toRem(100) }}
-                        value={localColor}
-                        onChange={(e) => {
-                          setLocalColor(e.target.value);
-                          setColorError(undefined);
-                        }}
-                      />
-                      <Button
-                        size="300"
-                        variant="Primary"
-                        fill="Solid"
-                        radii="300"
-                        onClick={handleColorSave}
-                        disabled={savingColor}
-                      >
-                        <Text size="B300">{savingColor ? 'Saving...' : 'Save'}</Text>
-                      </Button>
-                    </Box>
-                    {colorError && (
-                      <Text size="T200" style={{ color: color.Critical.Main }}>
-                        {colorError}
-                      </Text>
-                    )}
-                  </Box>
-                }
-                onRemove={userColor ? handleColorRemove : undefined}
-              >
-                {(onOpen) => (
-                  <Box
-                    as="button"
-                    onClick={onOpen}
-                    disabled={savingColor}
-                    style={{
-                      width: toRem(24),
-                      height: toRem(24),
-                      borderRadius: toRem(6),
-                      backgroundColor: userColor ?? localColor,
-                      border: 'none',
-                      cursor: 'pointer',
-                      flexShrink: 0,
-                    }}
-                  />
-                )}
-              </HexColorPickerPopOut>
               {isEditingName ? (
                 <Input
                   autoFocus
@@ -910,6 +690,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                   size="400"
                   disabled={savingName}
                   style={{
+                    width: '100%',
                     fontSize: 'var(--token.font-size.H400)',
                     fontWeight: 'var(--token.font-weight.H400)',
                     padding: `${toRem(4)} ${toRem(8)}`,
@@ -926,19 +707,28 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                   onMouseEnter={() => setHoveredArea('name')}
                   onMouseLeave={() => setHoveredArea(null)}
                   style={{
+                    width: '100%',
                     border: 'none',
                     background: 'none',
                     cursor: 'pointer',
                     padding: `${toRem(4)} ${toRem(8)}`,
-                    margin: `${toRem(-4)} ${toRem(-8)}`,
                     position: 'relative',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    lineHeight: 1.2,
                   }}
                 >
                   <Text
                     size="H4"
                     className={classNames(BreakWord, LineClamp3)}
                     title={profile.displayName || getMxIdLocalPart(userId)}
-                    style={{ color: previewProfileColor, textShadow: previewTextShadow }}
+                    style={{
+                      color: previewProfileColor,
+                      textShadow: previewTextShadow,
+                      textAlign: 'center',
+                      maxWidth: '100%',
+                    }}
                   >
                     {profile.displayName || getMxIdLocalPart(userId) || userId}
                   </Text>
@@ -946,8 +736,9 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                     <Box
                       style={{
                         position: 'absolute',
-                        top: 0,
+                        top: '50%',
-                        right: toRem(-32),
+                        right: 0,
+                        transform: 'translateY(-50%)',
                         backgroundColor: color.Surface.Container,
                         borderRadius: toRem(20),
                         padding: toRem(6),
@@ -980,8 +771,8 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
               onMouseEnter={() => setHoveredArea('status')}
               onMouseLeave={() => setHoveredArea(null)}
               style={{
-                backgroundColor: previewPillBgColor || color.Surface.Container,
+                backgroundColor: color.Surface.Container,
-                border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+                border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                 padding: `${toRem(6)} ${toRem(10)}`,
                 borderRadius: toRem(16),
                 maxWidth: toRem(250),
@@ -1032,14 +823,13 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                       className={BreakWord}
                       style={{
                         fontStyle: presence?.status ? 'normal' : 'italic',
-                        color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
                       }}
                     >
                       {presence?.status || 'Click to set a custom status...'}</Text>
                   </Box>
                   {presence?.status && hoveredArea === 'status' && (
                     <>
-                      <Icon size="50" src={Icons.Pencil} style={{ color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined }} />
+                      <Icon size="50" src={Icons.Pencil} />
                       <Box
                         as="button"
                         onClick={(e) => {
@@ -1070,178 +860,185 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
             <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
               <Box
                 style={{
-                  backgroundColor: previewPillBgColor || color.Surface.Container,
+                  backgroundColor: color.Surface.Container,
-                  border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+                  border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                   padding: `${toRem(4)} ${toRem(8)}`,
                   borderRadius: toRem(16),
                 }}
               >
-                <Text 
+                <Text size="B300">ruv.wtf</Text>
-                  size="B300" 
-                  style={{
-                    color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
-                  }}
-                >
-                  ruv.wtf
-                </Text>
               </Box>
               <Box
                 style={{
-                  backgroundColor: previewPillBgColor || color.Surface.Container,
+                  backgroundColor: color.Surface.Container,
-                  border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+                  border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                   padding: `${toRem(4)} ${toRem(8)}`,
                   borderRadius: toRem(16),
                 }}
               >
-                <Text 
+                <Text size="B300">Share</Text>
-                  size="B300"
-                  style={{
-                    color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
-                  }}
-                >
-                  Share
-                </Text>
               </Box>
               <Box
                 style={{
-                  backgroundColor: previewPillBgColor || color.Surface.Container,
+                  backgroundColor: color.Surface.Container,
-                  border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+                  border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                   padding: `${toRem(4)} ${toRem(8)}`,
                   borderRadius: toRem(16),
                 }}
               >
-                <Text 
+                <Text size="B300">Admin</Text>
-                  size="B300"
-                  style={{
-                    color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
-                  }}
-                >
-                  Admin
-                </Text>
               </Box>
             </Box>
           </Box>
         </Box>
 
-      {/* Profile Style Settings */}
+      {/* MSC4522 username colors */}
       <Box
         direction="Column"
-        gap="200"
+        gap="300"
         style={{
-          padding: config.space.S300,
+          padding: config.space.S400,
           border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
           borderRadius: toRem(8),
           width: '100%',
+          boxSizing: 'border-box',
         }}
       >
-        <Text size="H6">Profile Style</Text>
+        <Text size="H6">Username colors</Text>
         
-        {/* Avatar Border Color */}
+        <Box direction="Row" gap="400" wrap="Wrap" alignItems="Start">
-        <Box direction="Column" gap="100">
+          <Box direction="Column" gap="200" style={{ flex: '1 1 0', minWidth: toRem(140) }}>
-          <Text size="T300">Avatar Border Color</Text>
+            <Text size="T300">On dark themes</Text>
-          <Box gap="200" alignItems="Center" wrap="Wrap">
+            <Text size="T200" style={{ opacity: 0.7 }}>Bright colors work best</Text>
-            <RgbaColorPicker color={localBorderColor} onChange={(c) => { setLocalBorderColor(c); setEditingBorder(true); }} />
+            <Box
-            <Box direction="Column" gap="100">
+              style={{
-              <Text size="T200" style={{ opacity: 0.7 }}>
+                ...colorPreviewPlateStyle,
-                Preview: {rgbaToHex(localBorderColor)}
+                backgroundColor: '#262626',
+              }}
+            >
+              <Text
+                size="H4"
+                className={classNames(BreakWord, LineClamp3)}
+                title={displayName}
+                style={{
+                  color: localOnDark,
+                  textShadow: `0 1px 4px ${getTextShadowColor(localOnDark)}`,
+                  textAlign: 'center',
+                  maxWidth: '100%',
+                }}
+              >
+                {displayName}
               </Text>
-              <Box
-                style={{
-                  width: toRem(48),
-                  height: toRem(48),
-                  borderRadius: '50%',
-                  border: `${toRem(4)} solid ${rgbaToHex(localBorderColor)}`,
-                  backgroundColor: color.Surface.Container,
-                }}
-              />
-              <Box gap="100">
-                <Button
-                  size="300"
-                  variant="Primary"
-                  fill="Solid"
-                  radii="300"
-                  onClick={handleBorderColorSave}
-                  disabled={savingStyle}
-                >
-                  <Text size="B300">Save</Text>
-                </Button>
-                {profileStyle.avatarBorderColor && (
-                  <Button
-                    size="300"
-                    variant="Critical"
-                    fill="Soft"
-                    radii="300"
-                    onClick={handleBorderColorRemove}
-                    disabled={savingStyle}
-                  >
-                    <Text size="B300">Remove</Text>
-                  </Button>
-                )}
-              </Box>
             </Box>
+            <HexColorPicker
+              color={localOnDark}
+              onChange={(c) => {
+                setLocalOnDark(c);
+                setColorError(undefined);
+              }}
+              style={{ width: '100%', height: colorPickerSize }}
+            />
+            <Input
+              size="300"
+              variant="Secondary"
+              style={{ width: '100%' }}
+              value={localOnDark}
+              onChange={(e) => {
+                setLocalOnDark(e.target.value);
+                setColorError(undefined);
+              }}
+            />
+          </Box>
+
+          <Box direction="Column" gap="200" style={{ flex: '1 1 0', minWidth: toRem(140) }}>
+            <Text size="T300">On light themes</Text>
+            <Text size="T200" style={{ opacity: 0.7 }}>Darker colors work best</Text>
+            <Box
+              style={{
+                ...colorPreviewPlateStyle,
+                backgroundColor: '#F0F0F0',
+              }}
+            >
+              <Text
+                size="H4"
+                className={classNames(BreakWord, LineClamp3)}
+                title={displayName}
+                style={{
+                  color: localOnLight,
+                  textShadow: `0 1px 4px ${getTextShadowColor(localOnLight)}`,
+                  textAlign: 'center',
+                  maxWidth: '100%',
+                }}
+              >
+                {displayName}
+              </Text>
+            </Box>
+            <HexColorPicker
+              color={localOnLight}
+              onChange={(c) => {
+                setLocalOnLight(c);
+                setColorError(undefined);
+              }}
+              style={{ width: '100%', height: colorPickerSize }}
+            />
+            <Input
+              size="300"
+              variant="Secondary"
+              style={{ width: '100%' }}
+              value={localOnLight}
+              onChange={(e) => {
+                setLocalOnLight(e.target.value);
+                setColorError(undefined);
+              }}
+            />
           </Box>
         </Box>
 
-        {/* Profile Gradient */}
+        <Box gap="200" alignItems="Center" wrap="Wrap">
-        <Box direction="Column" gap="100">
+          <Button
-          <Text size="T300">Profile Card Gradient</Text>
+            size="300"
-          <Box gap="200" alignItems="Start" wrap="Wrap">
+            variant="Primary"
-            <Box direction="Column" gap="100">
+            fill="Solid"
-              <Text size="T200">Start Color</Text>
+            radii="300"
-              <RgbaColorPicker color={localGradientStart} onChange={(c) => { setLocalGradientStart(c); setEditingGradient(true); }} />
+            onClick={handleColorSave}
-            </Box>
+            disabled={savingColor || colorLoading}
-            <Box direction="Column" gap="100">
+          >
-              <Text size="T200">End Color</Text>
+            <Text size="B300">{savingColor ? 'Saving...' : 'Save colors'}</Text>
-              <RgbaColorPicker color={localGradientStop} onChange={(c) => { setLocalGradientStop(c); setEditingGradient(true); }} />
+          </Button>
-            </Box>
+          {hasSavedColors && (
-            <Box direction="Column" gap="100">
+            <Button
-              <Text size="T200">Direction</Text>
+              size="300"
-              <AngleSelector
+              variant="Critical"
-                value={localGradientDirection}
+              fill="Soft"
-                onChange={(deg) => { setLocalGradientDirection(deg); setEditingGradient(true); }}
+              radii="300"
-              />
+              onClick={handleColorRemove}
-              <Box
+              disabled={savingColor}
-                style={{
+            >
-                  width: toRem(100),
+              <Text size="B300">Remove colors</Text>
-                  height: toRem(60),
+            </Button>
-                  borderRadius: toRem(8),
+          )}
-                  background: `linear-gradient(${localGradientDirection}deg, ${rgbaToHex(localGradientStart)}, ${rgbaToHex(localGradientStop)})`,
-                  border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
-                }}
-              />
-              <Box gap="100">
-                <Button
-                  size="300"
-                  variant="Primary"
-                  fill="Solid"
-                  radii="300"
-                  onClick={handleGradientSave}
-                  disabled={savingStyle}
-                >
-                  <Text size="B300">Save</Text>
-                </Button>
-                {profileStyle.gradient && (
-                  <Button
-                    size="300"
-                    variant="Critical"
-                    fill="Soft"
-                    radii="300"
-                    onClick={handleGradientRemove}
-                    disabled={savingStyle}
-                  >
-                    <Text size="B300">Remove</Text>
-                  </Button>
-                )}
-              </Box>
-            </Box>
-          </Box>
         </Box>
 
-        {styleError && (
+        {colorError && (
-          <Text size="T200" style={{ color: color.Critical.Main }}>{styleError}</Text>
+          <Text size="T200" style={{ color: color.Critical.Main }}>{colorError}</Text>
         )}
       </Box>
 
+      <Box
+        direction="Column"
+        gap="300"
+        style={{
+          padding: config.space.S400,
+          border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+          borderRadius: toRem(8),
+          width: '100%',
+          boxSizing: 'border-box',
+        }}
+      >
+        <Text size="H6">Discord profile overlays</Text>
+        <CollectiblesSection collectibles={collectibles} onApply={updateCollectible} />
+      </Box>
+
       {uploadAtom && (
         <Box gap="200" direction="Column" style={{ width: '100%' }}>
           <CompactUploadCardRenderer

src/app/features/settings/account/ProfileEffectHeroPreview.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Text } from 'folds';
+import { UserAvatar } from '../../../components/user-avatar';
+import { Icon, Icons } from '../../../components/icons';
+import colorMXID from '../../../../util/colorMXID';
+import { getMxIdLocalPart } from '../../../utils/matrix';
+import { DiscordCollectibleItem } from '../../../utils/discordCollectibles';
+import {
+  catalogProfileEffectIntroDurationMs,
+  pickCatalogProfileEffectIntroUrl,
+  pickCatalogProfileEffectLoopUrl,
+} from '../../../utils/collectibleAssets';
+import { ProfileEffectMedia } from '../../../components/user-profile/ProfileEffectMedia';
+import * as css from './CollectiblesSection.css';
+
+type ProfileEffectHeroPreviewProps = {
+  item: DiscordCollectibleItem;
+  userId: string;
+  avatarUrl?: string;
+  bannerUrl?: string;
+  displayName?: string;
+  profileColor?: string;
+  restartToken?: number;
+};
+
+export function ProfileEffectHeroPreview({
+  item,
+  userId,
+  avatarUrl,
+  bannerUrl,
+  displayName,
+  profileColor,
+  restartToken,
+}: ProfileEffectHeroPreviewProps) {
+  const coverColor = colorMXID(userId);
+  const nameColor = profileColor ?? coverColor;
+  const username = getMxIdLocalPart(userId) ?? userId;
+  const resolvedName = displayName?.trim() || username;
+  const introUrl = pickCatalogProfileEffectIntroUrl(item);
+  const loopUrl = pickCatalogProfileEffectLoopUrl(item);
+  const introDurationMs = catalogProfileEffectIntroDurationMs(item);
+
+  return (
+    <div className={css.ProfileEffectHeroPreview} aria-hidden="true">
+      <div
+        className={css.ProfileEffectHeroCover}
+        style={{
+          backgroundColor: bannerUrl ? undefined : coverColor,
+          filter: bannerUrl || avatarUrl ? undefined : 'brightness(50%)',
+        }}
+      >
+        {bannerUrl ? (
+          <img className={css.ProfileEffectHeroBanner} src={bannerUrl} alt="" draggable={false} />
+        ) : (
+          avatarUrl && (
+            <img className={css.ProfileEffectHeroCoverBlur} src={avatarUrl} alt="" draggable={false} />
+          )
+        )}
+      </div>
+
+      <div className={css.ProfileEffectHeroAvatarSlot}>
+        <div className={css.ProfileEffectHeroAvatar}>
+          <UserAvatar
+            className={css.ProfileEffectHeroAvatarImg}
+            userId={userId}
+            src={avatarUrl}
+            alt=""
+            renderFallback={() => <Icon size="300" src={Icons.User} filled />}
+          />
+        </div>
+      </div>
+
+      <div className={css.ProfileEffectHeroInfo}>
+        <Text
+          size="T100"
+          className={css.ProfileEffectHeroName}
+          title={resolvedName}
+          style={{ color: nameColor }}
+        >
+          {resolvedName}
+        </Text>
+      </div>
+
+      <div className={css.ProfileEffectHeroEffectLayer}>
+        <ProfileEffectMedia
+          introUrl={introUrl}
+          loopUrl={loopUrl}
+          introDurationMs={introDurationMs}
+          restartToken={restartToken}
+          className={css.ProfileEffectHeroEffect}
+        />
+      </div>
+    </div>
+  );
+}

src/app/features/settings/general/General.tsx

@@ -8,6 +8,8 @@ import React, {
 } from 'react';
 import dayjs from 'dayjs';
 import { as, Box, Button, Chip, color, config, Header, IconButton, Input, Menu, MenuItem, PopOut, RectCords, Scroll, Switch, Text, toRem } from 'folds';
+import { useSetAtom } from 'jotai';
+import { Range } from 'react-range';
 import { Icon, Icons } from '../../../components/icons';
 import { HexColorPicker } from 'react-colorful';
 import { isKeyHotkey } from 'is-hotkey';
@@ -24,6 +26,7 @@ import {
   LightTheme,
   Theme,
   ThemeKind,
+  themePreviewIdAtom,
   useSystemThemeKind,
   useThemeNames,
   useThemes,
@@ -41,28 +44,49 @@ type ThemeSelectorProps = {
   onSelect: (theme: Theme) => void;
 };
 const ThemeSelector = as<'div', ThemeSelectorProps>(
-  ({ themeNames, themes, selected, onSelect, ...props }, ref) => (
+  ({ themeNames, themes, selected, onSelect, ...props }, ref) => {
-    <Menu {...props} ref={ref}>
+    const setPreviewId = useSetAtom(themePreviewIdAtom);
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+
-        {themes.map((theme) => (
+    useEffect(
-          <MenuItem
+      () => () => {
-            key={theme.id}
+        setPreviewId(undefined);
-            size="300"
+      },
-            variant={theme.id === selected.id ? 'Primary' : 'Surface'}
+      [setPreviewId]
-            radii="300"
+    );
-            onClick={() => onSelect(theme)}
+
-          >
+    const clearPreview = () => setPreviewId(undefined);
-            <Text size="T300">{themeNames[theme.id] ?? theme.id}</Text>
+    const previewTheme = (theme: Theme) => setPreviewId(theme.id);
-          </MenuItem>
+
-        ))}
+    return (
-      </Box>
+      <Menu
-    </Menu>
+        {...props}
-  )
+        ref={ref}
+        onMouseLeave={clearPreview}
+      >
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+          {themes.map((theme) => (
+            <MenuItem
+              key={theme.id}
+              size="300"
+              variant={theme.id === selected.id ? 'Primary' : 'Surface'}
+              radii="300"
+              onMouseEnter={() => previewTheme(theme)}
+              onFocus={() => previewTheme(theme)}
+              onClick={() => onSelect(theme)}
+            >
+              <Text size="T300">{themeNames[theme.id] ?? theme.id}</Text>
+            </MenuItem>
+          ))}
+        </Box>
+      </Menu>
+    );
+  }
 );
 
 function SelectTheme({ disabled }: { disabled?: boolean }) {
   const themes = useThemes();
   const themeNames = useThemeNames();
+  const setPreviewId = useSetAtom(themePreviewIdAtom);
   const [themeId, setThemeId] = useSetting(settingsAtom, 'themeId');
   const [menuCords, setMenuCords] = useState<RectCords>();
   const selectedTheme = themes.find((theme) => theme.id === themeId) ?? LightTheme;
@@ -72,10 +96,16 @@ function SelectTheme({ disabled }: { disabled?: boolean }) {
   };
 
   const handleThemeSelect = (theme: Theme) => {
+    setPreviewId(undefined);
     setThemeId(theme.id);
     setMenuCords(undefined);
   };
 
+  const closeMenu = () => {
+    setPreviewId(undefined);
+    setMenuCords(undefined);
+  };
+
   return (
     <>
       <Button
@@ -99,7 +129,7 @@ function SelectTheme({ disabled }: { disabled?: boolean }) {
           <FocusTrap
             focusTrapOptions={{
               initialFocus: false,
-              onDeactivate: () => setMenuCords(undefined),
+              onDeactivate: closeMenu,
               clickOutsideDeactivates: true,
               isKeyForward: (evt: KeyboardEvent) =>
                 evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
@@ -125,6 +155,7 @@ function SystemThemePreferences() {
   const themeKind = useSystemThemeKind();
   const themeNames = useThemeNames();
   const themes = useThemes();
+  const setPreviewId = useSetAtom(themePreviewIdAtom);
   const [lightThemeId, setLightThemeId] = useSetting(settingsAtom, 'lightThemeId');
   const [darkThemeId, setDarkThemeId] = useSetting(settingsAtom, 'darkThemeId');
 
@@ -145,15 +176,27 @@ function SystemThemePreferences() {
   };
 
   const handleLightThemeSelect = (theme: Theme) => {
+    setPreviewId(undefined);
     setLightThemeId(theme.id);
     setLTCords(undefined);
   };
 
   const handleDarkThemeSelect = (theme: Theme) => {
+    setPreviewId(undefined);
     setDarkThemeId(theme.id);
     setDTCords(undefined);
   };
 
+  const closeLightMenu = () => {
+    setPreviewId(undefined);
+    setLTCords(undefined);
+  };
+
+  const closeDarkMenu = () => {
+    setPreviewId(undefined);
+    setDTCords(undefined);
+  };
+
   return (
     <Box wrap="Wrap" gap="400">
       <SettingTile
@@ -179,7 +222,7 @@ function SystemThemePreferences() {
           <FocusTrap
             focusTrapOptions={{
               initialFocus: false,
-              onDeactivate: () => setLTCords(undefined),
+              onDeactivate: closeLightMenu,
               clickOutsideDeactivates: true,
               isKeyForward: (evt: KeyboardEvent) =>
                 evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
@@ -220,7 +263,7 @@ function SystemThemePreferences() {
           <FocusTrap
             focusTrapOptions={{
               initialFocus: false,
-              onDeactivate: () => setDTCords(undefined),
+              onDeactivate: closeDarkMenu,
               clickOutsideDeactivates: true,
               isKeyForward: (evt: KeyboardEvent) =>
                 evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
@@ -292,6 +335,66 @@ const emojiStyleNames: Record<EmojiStyle, string> = {
   [EmojiStyle.Twemoji]: 'Twemoji',
 };
 
+function SidebarNameplate() {
+  const [sidebarNameplateOpacity, setSidebarNameplateOpacity] = useSetting(
+    settingsAtom,
+    'sidebarNameplateOpacity'
+  );
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Collectibles</Text>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Sidebar Nameplate Opacity"
+          description="Set to 0% to hide your equipped nameplate behind the bottom sidebar avatar."
+          after={
+            <Box gap="200" alignItems="Center" style={{ width: toRem(180) }}>
+              <Range
+                step={1}
+                min={0}
+                max={100}
+                values={[sidebarNameplateOpacity]}
+                onChange={(values) => setSidebarNameplateOpacity(values[0])}
+                renderTrack={(params) => (
+                  <div
+                    {...params.props}
+                    style={{
+                      ...params.props.style,
+                      width: '100%',
+                      height: toRem(8),
+                      borderRadius: toRem(4),
+                      background: `linear-gradient(to right, ${color.Primary.Main} ${sidebarNameplateOpacity}%, ${color.Surface.ContainerLine} ${sidebarNameplateOpacity}%)`,
+                    }}
+                  >
+                    {params.children}
+                  </div>
+                )}
+                renderThumb={(params) => (
+                  <div
+                    {...params.props}
+                    style={{
+                      ...params.props.style,
+                      width: toRem(16),
+                      height: toRem(16),
+                      borderRadius: '50%',
+                      backgroundColor: color.Primary.Main,
+                      border: `${toRem(2)} solid ${color.Surface.Container}`,
+                    }}
+                  />
+                )}
+              />
+              <Text size="T300" style={{ minWidth: toRem(32), textAlign: 'right' }}>
+                {sidebarNameplateOpacity}%
+              </Text>
+            </Box>
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}
+
 type EmojiStyleSelectorProps = {
   selected: EmojiStyle;
   onSelect: (style: EmojiStyle) => void;
@@ -1180,6 +1283,7 @@ export function General({ requestClose }: GeneralProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <Appearance />
+              <SidebarNameplate />
               <DateAndTime />
               <Editor />
               <Spaces />

src/app/features/settings/notifications/SystemNotification.tsx

@@ -171,6 +171,8 @@ type PushStatus = {
   distributor: string;
   endpoint: string;
   distributors: string[];
+  lastFailure: string;
+  autoStartBlocked: boolean;
 };
 
 /** Android-only section showing UnifiedPush registration status and controls. */
@@ -194,6 +196,8 @@ function AndroidPushNotifications() {
             distributor: s.distributor || '',
             endpoint: s.endpoint || '',
             distributors,
+            lastFailure: s.lastFailure || '',
+            autoStartBlocked: Boolean(s.autoStartBlocked),
           }
         : undefined
     );
@@ -211,7 +215,7 @@ function AndroidPushNotifications() {
       await refresh();
       if (!result.success) {
         setLastError(
-          'Could not register a push distributor. Install ntfy (with UnifiedPush enabled), then try Reset again.'
+          'Selected distributor but did not get a push endpoint. In ntfy: enable UnifiedPush, allow unrestricted battery, then try Reset again.'
         );
       }
     }, [refresh])
@@ -244,6 +248,20 @@ function AndroidPushNotifications() {
         </Text>
       );
     }
+    if (status.lastFailure === 'AUTO_START_BLOCKED' || status.autoStartBlocked) {
+      return (
+        <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+          Phone is blocking auto-start for Paarrot. Open App Boot / Auto-start settings, allow Paarrot (and ntfy), then tap Reset.
+        </Text>
+      );
+    }
+    if (status.lastFailure) {
+      return (
+        <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+          {`Registration failed (${status.lastFailure}). Tap Reset and pick ntfy again.`}
+        </Text>
+      );
+    }
     if (status.distributors.length === 0) {
       return (
         <Text as="span" style={{ color: color.Critical.Main }} size="T200">

src/app/hooks/useFilePasteHandler.ts

@@ -4,21 +4,30 @@ import { readClipboardImage, isTauri, isLinux } from '../utils/tauri';
 
 export const useFilePasteHandler = (onPaste: (file: File[]) => void): ClipboardEventHandler =>
   useCallback(
-    async (evt) => {
+    (evt) => {
       const files = getDataTransferFiles(evt.clipboardData);
       if (files && files.length > 0) {
+        evt.preventDefault();
         onPaste(files);
         return;
       }
 
-      // On Linux with Tauri, browser clipboard API doesn't work for images
+      // Address-bar / plain-text copies still win. On Linux the native clipboard
-      // Use our custom Tauri command with arboard/Wayland support
+      // often still has a previous image (or a junk bitmap) alongside text/plain;
-      if (isTauri() && isLinux()) {
+      // don't treat those as an image paste.
-        const clipboardImage = await readClipboardImage();
+      const text = evt.clipboardData?.getData('text/plain')?.trim() ?? '';
-        if (clipboardImage) {
+      if (text.length > 0) {
-          onPaste([clipboardImage]);
+        return;
-        }
       }
+
+      // Browser clipboardData.files is empty for raw image copies on Linux Tauri/Electron.
+      if (!(isTauri() && isLinux())) return;
+
+      // preventDefault before the async read, or the editor also inserts text.
+      evt.preventDefault();
+      void readClipboardImage().then((clipboardImage) => {
+        if (clipboardImage) onPaste([clipboardImage]);
+      });
     },
     [onPaste]
   );

src/app/hooks/useTheme.ts

@@ -1,4 +1,5 @@
 import { lightTheme } from 'folds';
+import { atom, useAtomValue } from 'jotai';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
 import { butterTheme, catppuccinMochaTheme, darkTheme, discordTheme, discordDarkerTheme, mochaTheme, silverTheme, stationeryDarkTheme, stationeryTheme, twilightTheme } from '../../colors.css';
@@ -6,6 +7,9 @@ import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 import { pluginRegistry } from '../features/settings/plugins/PluginAPI';
 
+/** Ephemeral theme id while hovering theme options in settings (not persisted). */
+export const themePreviewIdAtom = atom<string | undefined>(undefined);
+
 export enum ThemeKind {
   Light = 'light',
   Dark = 'dark',
@@ -190,6 +194,16 @@ export const useActiveTheme = (): Theme => {
   return selectedTheme;
 };
 
+/** Active theme, or hover-preview theme when browsing the theme menu. */
+export const useDisplayTheme = (): Theme => {
+  const activeTheme = useActiveTheme();
+  const themes = useThemes();
+  const previewId = useAtomValue(themePreviewIdAtom);
+
+  if (!previewId) return activeTheme;
+  return themes.find((theme) => theme.id === previewId) ?? activeTheme;
+};
+
 const ThemeContext = createContext<Theme | null>(null);
 export const ThemeContextProvider = ThemeContext.Provider;
 

src/app/hooks/useUserBanner.ts

@@ -1,56 +1,17 @@
 import { useCallback, useEffect, useState } from 'react';
-import { MatrixClient, UserEvent, UserEventHandlerMap } from 'matrix-js-sdk';
 import { useMatrixClient } from './useMatrixClient';
 import { useMediaAuthentication } from './useMediaAuthentication';
 import { mxcUrlToHttp } from '../utils/matrix';
 import { getCurrentAccessToken } from '../utils/auth';
 import {
-  fetchAndExtractMetadata,
+  deleteBannerUrl,
-  extractMetadataFromImage,
+  loadBannerUrl,
-  embedMetadataInImage,
+  registerBannerCacheClear,
-  detectImageFormat,
+  saveBannerUrl,
-  getMimeType,
+} from '../utils/profileFields';
-  getExtension,
-  ImageMetadata,
-  convertImageDataToPng,
-  uint8ArrayToBlob,
-} from '../utils/imageMetadata';
 
 /**
- * Fetches the user's current avatar as raw image data
+ * Hook to manage the user's profile banner (MSC4427 via MSC4133).
- */
-async function fetchAvatarData(
-  mx: MatrixClient,
-  avatarMxc: string,
-  useAuthentication: boolean
-): Promise<ArrayBuffer | null> {
-  const url = mxcUrlToHttp(mx, avatarMxc, useAuthentication);
-  if (!url) return null;
-
-  try {
-    // Always use current session's token to avoid stale tokens during account switches
-    const accessToken = getCurrentAccessToken();
-    let response = await fetch(url, {
-      method: 'GET',
-      headers: accessToken && useAuthentication ? { Authorization: `Bearer ${accessToken}` } : undefined,
-    });
-    
-    // If we got a 401 and we tried with auth, fallback to unauthenticated request
-    if (!response.ok && response.status === 401 && accessToken && useAuthentication) {
-      response = await fetch(url, { method: 'GET' });
-    }
-    
-    if (!response.ok) return null;
-    return await response.arrayBuffer();
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Hook to manage the user's chosen profile banner, stored in avatar image metadata
- * The banner URL is embedded in avatar metadata and syncs via the avatar
- * @returns The current banner URL, a setter function, and loading state
  */
 export function useUserBanner(): [
   string | undefined,
@@ -58,280 +19,124 @@ export function useUserBanner(): [
   boolean
 ] {
   const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
   const [banner, setBanner] = useState<string | undefined>();
   const [loading, setLoading] = useState(true);
 
-  // Extract banner from current avatar on mount and when profile changes
   useEffect(() => {
-    const loadBanner = async () => {
-      setLoading(true);
-      try {
-        const userId = mx.getUserId();
-        if (!userId) {
-          setLoading(false);
-          return;
-        }
-
-        const profile = await mx.getProfileInfo(userId);
-        const avatarUrl = profile.avatar_url;
-        console.log('[useUserBanner.loadBanner] Loading banner from avatar:', avatarUrl);
-        
-        if (!avatarUrl) {
-          setBanner(undefined);
-          setLoading(false);
-          return;
-        }
-
-        const httpUrl = mxcUrlToHttp(mx, avatarUrl, useAuthentication);
-        if (!httpUrl) {
-          setBanner(undefined);
-          setLoading(false);
-          return;
-        }
-
-        // Always use current session's token to avoid stale tokens during account switches
-        const accessToken = getCurrentAccessToken();
-        const metadata = await fetchAndExtractMetadata(httpUrl, useAuthentication ? accessToken : null);
-        console.log('[useUserBanner.loadBanner] Extracted banner:', metadata.banner);
-        setBanner(metadata.banner);
-      } catch {
-        setBanner(undefined);
-      }
-      setLoading(false);
-    };
-
-    loadBanner();
-
-    // Listen for avatar changes and reload banner
-    const userId = mx.getUserId();
-    if (!userId) return undefined;
-    
-    const user = mx.getUser(userId);
-    const onAvatarChange: UserEventHandlerMap[UserEvent.AvatarUrl] = (newAvatarUrl) => {
-      console.log('[useUserBanner] Avatar changed event fired, new URL:', newAvatarUrl);
-      loadBanner();
-    };
-
-    user?.on(UserEvent.AvatarUrl, onAvatarChange);
-    
-    return () => {
-      user?.removeListener(UserEvent.AvatarUrl, onAvatarChange);
-    };
-  }, [mx, useAuthentication]);
-
-  const updateBanner = useCallback(async (newBanner: string | undefined) => {
     const userId = mx.getUserId();
     if (!userId) {
-      throw new Error('No user ID');
+      setLoading(false);
+      return undefined;
     }
 
-    const profile = await mx.getProfileInfo(userId);
+    let cancelled = false;
-    const avatarUrl = profile.avatar_url;
 
-    if (!avatarUrl) {
+    const load = async () => {
-      throw new Error('No avatar set. Please upload an avatar first.');
+      setLoading(true);
-    }
+      try {
-
+        const bannerMxc = await loadBannerUrl(mx, userId);
-    // Fetch current avatar
+        if (!cancelled) setBanner(bannerMxc);
-    const avatarData = await fetchAvatarData(mx, avatarUrl, useAuthentication);
+      } catch {
-    if (!avatarData) {
+        if (!cancelled) setBanner(undefined);
-      throw new Error('Failed to fetch current avatar');
-    }
-
-    // Detect image format — banner lives in PNG tEXt, so convert other formats first
-    let workingData: ArrayBuffer | Uint8Array = avatarData;
-    let format = detectImageFormat(workingData);
-
-    if (format === 'unknown') {
-      throw new Error('Unsupported avatar image format');
-    }
-
-    if (format !== 'png') {
-      console.log('[updateBanner] Converting', format, 'avatar to PNG for banner metadata');
-      const pngData = await convertImageDataToPng(workingData);
-      if (!pngData) {
-        throw new Error('Failed to convert avatar to PNG for banner metadata');
       }
-      workingData = pngData;
+      if (!cancelled) setLoading(false);
-      format = 'png';
-    }
-
-    // Get existing metadata to preserve
-    const existingMetadata = extractMetadataFromImage(workingData);
-    console.log('[updateBanner] Existing metadata:', existingMetadata);
-
-    // Modify image metadata with new banner, preserving color.
-    // Empty string clears banner (PNG embed drops falsy fields after stripping old chunks).
-    const newMetadata: ImageMetadata = {
-      color: existingMetadata.color,
-      banner: newBanner ?? '',
-      avatarBorderColor: existingMetadata.avatarBorderColor,
-      gradient: existingMetadata.gradient,
     };
-    console.log('[updateBanner] New metadata to embed:', newMetadata);
 
-    const newAvatarData = embedMetadataInImage(workingData, newMetadata);
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [mx]);
 
-    if (!newAvatarData) {
+  const updateBanner = useCallback(
-      throw new Error('Failed to embed banner in avatar metadata');
+    async (newBanner: string | undefined) => {
-    }
+      if (!newBanner) {
-
+        await deleteBannerUrl(mx);
-    // Verify the banner was embedded correctly before uploading
+        setBanner(undefined);
-    const verifyMetadata = extractMetadataFromImage(newAvatarData);
+        return;
-    console.log('[updateBanner] Verification - extracted metadata from new avatar:', verifyMetadata);
-
-    if ((newBanner || undefined) !== verifyMetadata.banner) {
-      console.error('[updateBanner] Banner verification FAILED!', 'Expected:', newBanner, 'Got:', verifyMetadata.banner);
-      throw new Error('Banner verification failed');
-    }
-    console.log('[updateBanner] Banner verification passed');
-
-    // Upload modified avatar with correct MIME type
-    const mimeType = getMimeType(format);
-    const extension = getExtension(format);
-    const blob = uint8ArrayToBlob(newAvatarData, mimeType);
-
-    const uploadResponse = await mx.uploadContent(blob, {
-      name: `avatar.${extension}`,
-      type: mimeType,
-    });
-    console.log('[updateBanner] Avatar uploaded successfully, MXC:', uploadResponse.content_uri);
-
-    // Update profile with new avatar
-    try {
-      console.log('[updateBanner] Setting avatar URL to:', uploadResponse.content_uri);
-      await Promise.race([
-        mx.setAvatarUrl(uploadResponse.content_uri),
-        new Promise((_, reject) => {
-          setTimeout(() => reject(new Error('setAvatarUrl timeout')), 30000);
-        })
-      ]);
-      console.log('[updateBanner] setAvatarUrl completed');
-      
-      // Manually sync user object to ensure event listeners are triggered
-      const user = mx.getUser(userId);
-      if (user && user.avatarUrl !== uploadResponse.content_uri) {
-        console.log('[updateBanner] Manually syncing user avatar URL');
-        user.setAvatarUrl(uploadResponse.content_uri);
       }
-      console.log('[updateBanner] Banner update complete');
-    } catch (error) {
-      throw new Error(`Failed to update avatar URL: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
 
-    // Note: Don't set banner here - let the avatar change event handle it
+      await saveBannerUrl(mx, newBanner);
-    // setBanner(newBanner);
+      setBanner(newBanner);
-  }, [mx, useAuthentication]);
+    },
+    [mx]
+  );
 
   return [banner, updateBanner, loading];
 }
 
-// Cache for user banners to avoid refetching for each message
 const userBannerCache = new Map<string, { bannerMxc: string | undefined; timestamp: number }>();
-const CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
+const CACHE_TTL_MS = 5 * 60 * 1000;
+
+registerBannerCacheClear((userId: string) => {
+  userBannerCache.delete(userId);
+});
+
+async function fetchBannerBlobUrl(
+  mx: ReturnType<typeof useMatrixClient>,
+  bannerMxc: string,
+  useAuthentication: boolean
+): Promise<string | undefined> {
+  const bannerHttpUrl = mxcUrlToHttp(mx, bannerMxc, useAuthentication);
+  if (!bannerHttpUrl) return undefined;
+
+  const accessToken = getCurrentAccessToken();
+  const headers: HeadersInit = {};
+  if (useAuthentication && accessToken) {
+    headers.Authorization = `Bearer ${accessToken}`;
+  }
+
+  const response = await fetch(bannerHttpUrl, { headers });
+  if (!response.ok) return undefined;
+
+  const blob = await response.blob();
+  return URL.createObjectURL(blob);
+}
 
 /**
- * Hook to get another user's chosen profile banner from their avatar metadata
+ * Hook to get another user's profile banner as a blob URL.
- * @param userId - The user ID to get banner for
- * @param avatarMxc - The user's avatar MXC URL
- * @returns The user's chosen banner as a blob URL or undefined
  */
-export function useOtherUserBanner(userId: string, avatarMxc: string | undefined): string | undefined {
+export function useOtherUserBanner(userId: string): string | undefined {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const [bannerBlobUrl, setBannerBlobUrl] = useState<string | undefined>();
 
   useEffect(() => {
-    let blobUrl: string | undefined;
+    if (!userId) {
-
-    if (!avatarMxc) {
-      console.log('[useOtherUserBanner] No avatarMxc provided for', userId);
       setBannerBlobUrl(undefined);
       return undefined;
     }
 
-    const loadBanner = async () => {
+    let blobUrl: string | undefined;
-      console.log('[useOtherUserBanner] Loading banner for', userId, 'avatarMxc:', avatarMxc);
+    let cancelled = false;
-      
+
-      // Check cache first
+    const load = async () => {
-      const cacheKey = `${userId}:${avatarMxc}`;
+      const cached = userBannerCache.get(userId);
-      const cached = userBannerCache.get(cacheKey);
-      
       let bannerMxc: string | undefined;
-      
+
       if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
-        // Use cached banner MXC
-        console.log('[useOtherUserBanner] Using cached bannerMxc:', cached.bannerMxc);
         bannerMxc = cached.bannerMxc;
       } else {
-        // Fetch banner MXC from avatar metadata
+        bannerMxc = await loadBannerUrl(mx, userId);
-        const httpUrl = mxcUrlToHttp(mx, avatarMxc, useAuthentication);
+        userBannerCache.set(userId, { bannerMxc, timestamp: Date.now() });
-        console.log('[useOtherUserBanner] Fetching metadata from:', httpUrl);
-        
-        if (!httpUrl) {
-          console.log('[useOtherUserBanner] Failed to get HTTP URL');
-          setBannerBlobUrl(undefined);
-          return;
-        }
-
-        // Always use current session's token to avoid stale tokens during account switches
-        const accessToken = getCurrentAccessToken();
-        const metadata = await fetchAndExtractMetadata(httpUrl, useAuthentication ? accessToken : null);
-        
-        console.log('[useOtherUserBanner] Extracted metadata:', metadata);
-        
-        bannerMxc = metadata.banner;
-        
-        // Cache the banner MXC (not the blob URL)
-        userBannerCache.set(cacheKey, { bannerMxc, timestamp: Date.now() });
       }
-      
+
       if (!bannerMxc) {
-        console.log('[useOtherUserBanner] No banner MXC found');
+        if (!cancelled) setBannerBlobUrl(undefined);
-        setBannerBlobUrl(undefined);
         return;
       }
 
-      console.log('[useOtherUserBanner] Fetching banner image from MXC:', bannerMxc);
+      blobUrl = await fetchBannerBlobUrl(mx, bannerMxc, useAuthentication);
-      
+      if (!cancelled) setBannerBlobUrl(blobUrl);
-      // Fetch the banner image data with authentication
-      const bannerHttpUrl = mxcUrlToHttp(mx, bannerMxc, useAuthentication);
-      if (!bannerHttpUrl) {
-        console.log('[useOtherUserBanner] Failed to convert banner MXC to HTTP URL');
-        setBannerBlobUrl(undefined);
-        return;
-      }
-
-      console.log('[useOtherUserBanner] Banner HTTP URL:', bannerHttpUrl);
-
-      // Always use current session's token to avoid stale tokens during account switches
-      const accessToken = getCurrentAccessToken();
-      const headers: HeadersInit = {};
-      if (useAuthentication && accessToken) {
-        headers.Authorization = `Bearer ${accessToken}`;
-      }
-
-      const response = await fetch(bannerHttpUrl, { headers });
-      if (!response.ok) {
-        setBannerBlobUrl(undefined);
-        return;
-      }
-
-      const blob = await response.blob();
-      blobUrl = URL.createObjectURL(blob);
-      setBannerBlobUrl(blobUrl);
     };
 
-    loadBanner();
+    load();
 
-    // Cleanup blob URL when component unmounts or deps change
     return () => {
-      if (blobUrl) {
+      cancelled = true;
-        URL.revokeObjectURL(blobUrl);
+      if (blobUrl) URL.revokeObjectURL(blobUrl);
-      }
     };
-  }, [mx, useAuthentication, avatarMxc, userId]);
+  }, [mx, useAuthentication, userId]);
 
   return bannerBlobUrl;
 }

src/app/hooks/useUserCollectibles.ts

@@ -0,0 +1,179 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useMatrixClient } from './useMatrixClient';
+import { useMediaAuthentication } from './useMediaAuthentication';
+import { mxcUrlToHttp } from '../utils/matrix';
+import { getCurrentAccessToken } from '../utils/auth';
+import {
+  CollectibleProfileFields,
+  StoredCollectible,
+  loadUserCollectibles,
+  saveAvatarDecoration,
+  saveNameplate,
+  saveProfileEffect,
+} from '../utils/profileFields';
+import { CollectibleKind } from '../utils/discordCollectibles';
+
+export function useUserCollectibles(): [
+  CollectibleProfileFields,
+  (kind: CollectibleKind, collectible: StoredCollectible | undefined) => Promise<void>,
+  boolean
+] {
+  const mx = useMatrixClient();
+  const [collectibles, setCollectibles] = useState<CollectibleProfileFields>({});
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const userId = mx.getUserId();
+    if (!userId) {
+      setLoading(false);
+      return undefined;
+    }
+
+    let cancelled = false;
+
+    const load = async () => {
+      setLoading(true);
+      try {
+        const data = await loadUserCollectibles(mx, userId);
+        if (!cancelled) setCollectibles(data);
+      } catch {
+        if (!cancelled) setCollectibles({});
+      }
+      if (!cancelled) setLoading(false);
+    };
+
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [mx]);
+
+  const updateCollectible = useCallback(
+    async (kind: CollectibleKind, collectible: StoredCollectible | undefined) => {
+      if (kind === 'profile_effect') {
+        await saveProfileEffect(mx, collectible);
+        clearUserCollectiblesCache(mx.getUserId());
+        setCollectibles((prev) => ({ ...prev, profile_effect: collectible }));
+        return;
+      }
+      if (kind === 'nameplate') {
+        await saveNameplate(mx, collectible);
+        clearUserCollectiblesCache(mx.getUserId());
+        setCollectibles((prev) => ({ ...prev, nameplate: collectible }));
+        return;
+      }
+      await saveAvatarDecoration(mx, collectible);
+      clearUserCollectiblesCache(mx.getUserId());
+      setCollectibles((prev) => ({ ...prev, avatar_decoration: collectible }));
+    },
+    [mx]
+  );
+
+  return [collectibles, updateCollectible, loading];
+}
+
+const collectibleCache = new Map<string, { data: CollectibleProfileFields; timestamp: number }>();
+const collectibleCacheListeners = new Set<(userId: string) => void>();
+const CACHE_TTL_MS = 5 * 60 * 1000;
+
+export function clearUserCollectiblesCache(userId?: string): void {
+  if (!userId) return;
+  collectibleCache.delete(userId);
+  collectibleCacheListeners.forEach((listener) => listener(userId));
+}
+
+async function fetchMxcBlobUrl(
+  mx: ReturnType<typeof useMatrixClient>,
+  mxc: string,
+  useAuthentication: boolean
+): Promise<string | undefined> {
+  const httpUrl = mxcUrlToHttp(mx, mxc, useAuthentication);
+  if (!httpUrl) return undefined;
+
+  const accessToken = getCurrentAccessToken();
+  const headers: HeadersInit = {};
+  if (useAuthentication && accessToken) {
+    headers.Authorization = `Bearer ${accessToken}`;
+  }
+
+  const response = await fetch(httpUrl, { headers });
+  if (!response.ok) return undefined;
+
+  const blob = await response.blob();
+  return URL.createObjectURL(blob);
+}
+
+export function useOtherUserCollectibles(userId: string): CollectibleProfileFields & {
+  assetUrls: Record<string, string | undefined>;
+} {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const [collectibles, setCollectibles] = useState<CollectibleProfileFields>({});
+  const [assetUrls, setAssetUrls] = useState<Record<string, string | undefined>>({});
+  const [cacheVersion, setCacheVersion] = useState(0);
+
+  useEffect(() => {
+    const handleCacheClear = (clearedUserId: string) => {
+      if (clearedUserId === userId) {
+        setCacheVersion((version) => version + 1);
+      }
+    };
+    collectibleCacheListeners.add(handleCacheClear);
+    return () => collectibleCacheListeners.delete(handleCacheClear);
+  }, [userId]);
+
+  useEffect(() => {
+    if (!userId) {
+      setCollectibles({});
+      setAssetUrls({});
+      return undefined;
+    }
+
+    let cancelled = false;
+    const blobUrls: string[] = [];
+
+    const load = async () => {
+      const cached = collectibleCache.get(userId);
+      let data: CollectibleProfileFields;
+
+      if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
+        data = cached.data;
+      } else {
+        data = await loadUserCollectibles(mx, userId);
+        collectibleCache.set(userId, { data, timestamp: Date.now() });
+      }
+
+      if (cancelled) return;
+      setCollectibles(data);
+
+      const urls: Record<string, string | undefined> = {};
+      const entries = [
+        ['profile_effect', data.profile_effect],
+        ['nameplate', data.nameplate],
+        ['avatar_decoration', data.avatar_decoration],
+      ] as const;
+
+      for (const [kind, collectible] of entries) {
+        if (!collectible) continue;
+        for (const [role, mxc] of Object.entries(collectible.assets)) {
+          const blobUrl = await fetchMxcBlobUrl(mx, mxc, useAuthentication);
+          if (blobUrl) {
+            blobUrls.push(blobUrl);
+            urls[`${kind}:${role}`] = blobUrl;
+          }
+        }
+      }
+
+      if (!cancelled) setAssetUrls(urls);
+    };
+
+    load();
+
+    return () => {
+      cancelled = true;
+      blobUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, [cacheVersion, mx, useAuthentication, userId]);
+
+  return { ...collectibles, assetUrls };
+}

src/app/hooks/useUserColor.ts

@@ -1,227 +1,82 @@
 import { useCallback, useEffect, useState } from 'react';
-import { MatrixClient, UserEvent, UserEventHandlerMap } from 'matrix-js-sdk';
+import { Room } from 'matrix-js-sdk';
 import { useMatrixClient } from './useMatrixClient';
-import { useMediaAuthentication } from './useMediaAuthentication';
+import { ThemeKind, useTheme } from './useTheme';
-import { mxcUrlToHttp } from '../utils/matrix';
-import { getCurrentAccessToken } from '../utils/auth';
 import {
-  embedColorInImage,
+  ColorPreference,
-  extractColorFromImage,
+  deleteColorPreference,
-  removeColorFromImage,
+  extractMemberColorPreference,
-  fetchAndExtractColor,
+  hasColorPreference,
-  detectImageFormat,
+  loadColorPreference,
-  getMimeType,
+  registerPreferenceCacheClear,
-  getExtension,
+  resolveColorForTheme,
-  uint8ArrayToBlob,
+  saveColorPreference,
-} from '../utils/imageMetadata';
+} from '../utils/profileFields';
 
 /**
- * Fetches the user's current avatar as raw image data
+ * Hook to manage the user's MSC4522 color preference on their global profile.
  */
-async function fetchAvatarData(
+export function useUserColorPreference(): [
-  mx: MatrixClient,
+  ColorPreference | undefined,
-  avatarMxc: string,
+  (preference: ColorPreference | undefined) => Promise<void>,
-  useAuthentication: boolean
-): Promise<ArrayBuffer | null> {
-  const url = mxcUrlToHttp(mx, avatarMxc, useAuthentication);
-  if (!url) return null;
-
-  try {
-    // Always use current session's token to avoid stale tokens during account switches
-    const accessToken = getCurrentAccessToken();
-    let response = await fetch(url, {
-      method: 'GET',
-      headers: accessToken && useAuthentication ? { Authorization: `Bearer ${accessToken}` } : undefined,
-    });
-    
-    // If we got a 401 and we tried with auth, fallback to unauthenticated request
-    if (!response.ok && response.status === 401 && accessToken && useAuthentication) {
-      console.warn('[fetchAvatarData] Auth failed (401), attempting unauthenticated fallback');
-      response = await fetch(url, { method: 'GET' });
-    }
-    
-    if (!response.ok) return null;
-    return await response.arrayBuffer();
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Hook to manage the user's chosen profile color, stored in avatar image metadata
- * The color is embedded in PNG tEXt chunk or WebP XMP chunk and syncs via the avatar
- * @returns The current color, a setter function, and loading state
- */
-export function useUserColor(): [
-  string | undefined,
-  (color: string | undefined) => Promise<void>,
   boolean
 ] {
   const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
+  const [preference, setPreference] = useState<ColorPreference | undefined>();
-  const [color, setColor] = useState<string | undefined>();
   const [loading, setLoading] = useState(true);
 
-  // Extract color from current avatar on mount and when profile changes
   useEffect(() => {
-    const loadColor = async () => {
+    const userId = mx.getUserId();
+    if (!userId) {
+      setLoading(false);
+      return undefined;
+    }
+
+    let cancelled = false;
+
+    const load = async () => {
       setLoading(true);
       try {
-        const userId = mx.getUserId();
+        const loaded = await loadColorPreference(mx, userId);
-        if (!userId) {
+        if (!cancelled) setPreference(loaded);
-          setLoading(false);
-          return;
-        }
-
-        const profile = await mx.getProfileInfo(userId);
-        const avatarUrl = profile.avatar_url;
-        
-        if (!avatarUrl) {
-          setColor(undefined);
-          setLoading(false);
-          return;
-        }
-
-        const httpUrl = mxcUrlToHttp(mx, avatarUrl, useAuthentication);
-        if (!httpUrl) {
-          setColor(undefined);
-          setLoading(false);
-          return;
-        }
-
-        // Always use current session's token to avoid stale tokens during account switches
-        const accessToken = getCurrentAccessToken();
-        const extractedColor = await fetchAndExtractColor(httpUrl, useAuthentication ? accessToken : null);
-        setColor(extractedColor);
       } catch (e) {
-        console.error('Failed to load user color from avatar:', e);
+        console.error('Failed to load color preference:', e);
-        setColor(undefined);
+        if (!cancelled) setPreference(undefined);
       }
-      setLoading(false);
+      if (!cancelled) setLoading(false);
     };
 
-    loadColor();
+    load();
-
-    // Listen for avatar changes and reload color
-    const userId = mx.getUserId();
-    if (!userId) return undefined;
-    
-    const user = mx.getUser(userId);
-    const onAvatarChange: UserEventHandlerMap[UserEvent.AvatarUrl] = () => {
-      loadColor();
-    };
-
-    user?.on(UserEvent.AvatarUrl, onAvatarChange);
-    
     return () => {
-      user?.removeListener(UserEvent.AvatarUrl, onAvatarChange);
+      cancelled = true;
     };
-  }, [mx, useAuthentication]);
+  }, [mx]);
 
-  const updateColor = useCallback(async (newColor: string | undefined) => {
+  const updatePreference = useCallback(
-    const userId = mx.getUserId();
+    async (newPreference: ColorPreference | undefined) => {
-    if (!userId) return;
+      if (!hasColorPreference(newPreference)) {
-
+        await deleteColorPreference(mx);
-    try {
+        setPreference(undefined);
-      const profile = await mx.getProfileInfo(userId);
+        return;
-      const avatarUrl = profile.avatar_url;
-
-      if (!avatarUrl) {
-        // No avatar to embed color in
-        console.warn('Cannot set color: no avatar image set');
-        throw new Error('No avatar set');
       }
 
-      // Fetch current avatar
+      await saveColorPreference(mx, newPreference!);
-      const avatarData = await fetchAvatarData(mx, avatarUrl, useAuthentication);
+      setPreference(newPreference);
-      if (!avatarData) {
+    },
-        console.error('Failed to fetch current avatar');
+    [mx]
-        throw new Error('Failed to fetch avatar');
+  );
-      }
 
-      console.log('Original avatar size:', avatarData.byteLength, 'bytes');
+  return [preference, updatePreference, loading];
-
-      // Detect image format
-      const format = detectImageFormat(avatarData);
-      console.log('Detected image format:', format);
-      
-      if (format === 'unknown') {
-        console.error('Unsupported avatar image format - must be PNG, WebP, JPEG, or GIF');
-        throw new Error('Unsupported image format');
-      }
-
-      // Modify image metadata
-      let newAvatarData: Uint8Array | null;
-      if (newColor) {
-        newAvatarData = embedColorInImage(avatarData, newColor);
-      } else {
-        newAvatarData = removeColorFromImage(avatarData);
-      }
-
-      if (!newAvatarData) {
-        console.error('Failed to modify avatar image metadata');
-        throw new Error('Failed to modify image metadata');
-      }
-
-      console.log('Modified avatar size:', newAvatarData.byteLength, 'bytes');
-
-      // Verify the color was embedded correctly before uploading
-      const verifyColor = extractColorFromImage(newAvatarData);
-      console.log('Verification - embedded color:', verifyColor);
-      
-      if (newColor && verifyColor !== newColor) {
-        console.error('Color verification failed! Expected:', newColor, 'Got:', verifyColor);
-        throw new Error('Color embedding verification failed');
-      }
-
-      // Upload modified avatar with correct MIME type
-      const mimeType = getMimeType(format);
-      const extension = getExtension(format);
-      const blob = uint8ArrayToBlob(newAvatarData, mimeType);
-      const uploadResponse = await mx.uploadContent(blob, {
-        name: `avatar.${extension}`,
-        type: mimeType,
-      });
-
-      console.log('Uploaded new avatar:', uploadResponse.content_uri);
-
-      // Update profile with new avatar
-      await mx.setAvatarUrl(uploadResponse.content_uri);
-
-      // Manually sync user object to ensure event listeners are triggered
-      const user = mx.getUser(userId);
-      if (user && user.avatarUrl !== uploadResponse.content_uri) {
-        user.setAvatarUrl(uploadResponse.content_uri);
-      }
-
-      setColor(newColor);
-      console.log('User color updated in avatar:', newColor);
-    } catch (e) {
-      console.error('Failed to update user color in avatar:', e);
-      throw e;
-    }
-  }, [mx, useAuthentication]);
-
-  return [color, updateColor, loading];
 }
 
-/**
- * LRU Cache implementation with max size limit
- */
 class LRUCache<K, V> {
-  private cache: Map<K, V>;
+  private cache = new Map<K, V>();
 
-  private maxSize: number;
+  constructor(private maxSize: number) {}
-
-  constructor(maxSize: number) {
-    this.cache = new Map();
-    this.maxSize = maxSize;
-  }
 
   get(key: K): V | undefined {
     const value = this.cache.get(key);
     if (value !== undefined) {
-      // Move to end (most recently used)
       this.cache.delete(key);
       this.cache.set(key, value);
     }
@@ -229,88 +84,106 @@ class LRUCache<K, V> {
   }
 
   set(key: K, value: V): void {
-    // If key exists, delete it first to re-add at end
     if (this.cache.has(key)) {
       this.cache.delete(key);
-    }
+    } else if (this.cache.size >= this.maxSize) {
-    // If at max size, remove oldest (first) entry
-    else if (this.cache.size >= this.maxSize) {
       const firstKey = this.cache.keys().next().value;
-      if (firstKey !== undefined) {
+      if (firstKey !== undefined) this.cache.delete(firstKey);
-        this.cache.delete(firstKey);
-      }
     }
     this.cache.set(key, value);
   }
 
-  clear(): void {
+  delete(key: K): void {
-    this.cache.clear();
+    this.cache.delete(key);
   }
 }
 
-// LRU cache for user colors to avoid refetching for each message
+const preferenceCache = new LRUCache<string, { preference: ColorPreference | undefined; timestamp: number }>(200);
-const userColorCache = new LRUCache<string, { color: string | undefined; timestamp: number }>(100);
+const CACHE_TTL_MS = 30 * 60 * 1000;
-const CACHE_TTL_MS = 30 * 60 * 1000; // 30 minutes
+
+registerPreferenceCacheClear((userId: string) => {
+  preferenceCache.delete(userId);
+});
 
 /**
- * Hook to get another user's chosen profile color from their avatar metadata
+ * Hook to get another user's MSC4522 color preference from their global profile.
- * @param userId - The user ID to get color for
- * @param avatarMxc - The user's avatar MXC URL
- * @returns The user's chosen color or undefined
  */
-export function useOtherUserColor(userId: string, avatarMxc: string | undefined): string | undefined {
+export function useOtherUserColorPreference(userId: string): ColorPreference | undefined {
   const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
+  const cachedEntry = preferenceCache.get(userId);
-  
+  const cachedPreference =
-  // Check cache synchronously BEFORE initializing state to avoid flash
+    cachedEntry && Date.now() - cachedEntry.timestamp < CACHE_TTL_MS ? cachedEntry.preference : undefined;
-  const cacheKey = avatarMxc ? `${userId}:${avatarMxc}` : '';
+
-  const cachedEntry = cacheKey ? userColorCache.get(cacheKey) : undefined;
+  const [preference, setPreference] = useState<ColorPreference | undefined>(cachedPreference);
-  const cachedColor = cachedEntry && Date.now() - cachedEntry.timestamp < CACHE_TTL_MS 
-    ? cachedEntry.color 
-    : undefined;
-  
-  const [color, setColor] = useState<string | undefined>(cachedColor);
 
   useEffect(() => {
-    if (!avatarMxc) {
+    if (!userId) {
-      console.log('[useOtherUserColor] No avatarMxc provided for', userId);
+      setPreference(undefined);
-      setColor(undefined);
       return;
     }
 
-    // Check cache first
+    const cached = preferenceCache.get(userId);
-    const cacheKey = `${userId}:${avatarMxc}`;
-    const cached = userColorCache.get(cacheKey);
     if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
-      console.log('[useOtherUserColor] Using cached color for', userId, ':', cached.color);
+      setPreference(cached.preference);
-      setColor(cached.color);
       return;
     }
 
-    const loadColor = async () => {
+    let cancelled = false;
-      const httpUrl = mxcUrlToHttp(mx, avatarMxc, useAuthentication);
-      console.log('[useOtherUserColor] Loading color for', userId, 'from', httpUrl);
-      if (!httpUrl) {
-        console.log('[useOtherUserColor] Failed to get HTTP URL for', avatarMxc);
-        setColor(undefined);
-        return;
-      }
 
-      // Always use current session's token to avoid stale tokens during account switches
+    const load = async () => {
-      const accessToken = getCurrentAccessToken();
+      try {
-      const extractedColor = await fetchAndExtractColor(httpUrl, useAuthentication ? accessToken : null);
+        const loaded = await loadColorPreference(mx, userId);
-      
+        preferenceCache.set(userId, { preference: loaded, timestamp: Date.now() });
-      console.log('[useOtherUserColor] Extracted color for', userId, ':', extractedColor);
+        if (!cancelled) setPreference(loaded);
-      
+      } catch {
-      // Cache the result
+        if (!cancelled) setPreference(undefined);
-      userColorCache.set(cacheKey, { color: extractedColor, timestamp: Date.now() });
+      }
-      
-      setColor(extractedColor);
     };
 
-    loadColor();
+    load();
-  }, [mx, useAuthentication, avatarMxc, userId]);
+    return () => {
+      cancelled = true;
+    };
+  }, [mx, userId]);
 
-  return color;
+  return preference;
 }
 
+/**
+ * MSC4522 per-room member color preference (overrides global profile when set).
+ */
+export function useMemberColorPreference(userId: string, room?: Room): ColorPreference | undefined {
+  const [preference, setPreference] = useState<ColorPreference | undefined>(() =>
+    extractMemberColorPreference(room, userId)
+  );
+
+  useEffect(() => {
+    setPreference(extractMemberColorPreference(room, userId));
+  }, [room, userId]);
+
+  return preference;
+}
+
+/**
+ * Resolve a user's username color for the active theme (MSC4522).
+ * Per-room member colors take precedence over global profile colors.
+ */
+export function useOtherUserColor(userId: string, room?: Room): string | undefined {
+  const theme = useTheme();
+  const profilePreference = useOtherUserColorPreference(userId);
+  const memberPreference = useMemberColorPreference(userId, room);
+  const preference = memberPreference ?? profilePreference;
+  return resolveColorForTheme(preference, theme.kind);
+}
+
+/**
+ * Resolve the current user's username color for the active theme.
+ */
+export function useUsernameColor(userId: string, room?: Room, themeKind?: ThemeKind): string | undefined {
+  const theme = useTheme();
+  const kind = themeKind ?? theme.kind;
+  const profilePreference = useOtherUserColorPreference(userId);
+  const memberPreference = useMemberColorPreference(userId, room);
+  const preference = memberPreference ?? profilePreference;
+  return resolveColorForTheme(preference, kind);
+}

src/app/hooks/useUserProfileStyle.ts

@@ -1,276 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { UserEvent, UserEventHandlerMap } from 'matrix-js-sdk';
-import { useMatrixClient } from './useMatrixClient';
-import { useMediaAuthentication } from './useMediaAuthentication';
-import { mxcUrlToHttp } from '../utils/matrix';import { getCurrentAccessToken } from '../utils/auth';import {
-  fetchAndExtractMetadata,
-  extractMetadataFromImage,
-  embedMetadataInImage,
-  detectImageFormat,
-  getMimeType,
-  getExtension,
-  ImageMetadata,
-  ProfileGradient,
-  convertImageDataToPng,
-  uint8ArrayToBlob,
-} from '../utils/imageMetadata';
-
-/**
- * Fetches the user's current avatar as raw image data
- */
-async function fetchAvatarData(
-  mx: ReturnType<typeof useMatrixClient>,
-  avatarMxc: string,
-  useAuthentication: boolean
-): Promise<ArrayBuffer | null> {
-  const url = mxcUrlToHttp(mx, avatarMxc, useAuthentication);
-  if (!url) return null;
-
-  try {
-    // Always use current session's token to avoid stale tokens during account switches
-    const accessToken = getCurrentAccessToken();
-    let response = await fetch(url, {
-      method: 'GET',
-      headers: accessToken && useAuthentication ? { Authorization: `Bearer ${accessToken}` } : undefined,
-    });
-    
-    // If we got a 401 and we tried with auth, fallback to unauthenticated request
-    if (!response.ok && response.status === 401 && accessToken && useAuthentication) {
-      response = await fetch(url, { method: 'GET' });
-    }
-    
-    if (!response.ok) return null;
-    return await response.arrayBuffer();
-  } catch {
-    return null;
-  }
-}
-
-export type ProfileStyleData = {
-  avatarBorderColor?: string;
-  gradient?: ProfileGradient;
-};
-
-/**
- * Hook to manage the user's profile style (avatar border color and gradient)
- * Stored in avatar image metadata
- * @returns Current style data, a setter function, and loading state
- */
-export function useUserProfileStyle(): [
-  ProfileStyleData,
-  (style: Partial<ProfileStyleData>) => Promise<void>,
-  boolean
-] {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const [style, setStyle] = useState<ProfileStyleData>({});
-  const [loading, setLoading] = useState(true);
-
-  // Extract style from current avatar on mount and when profile changes
-  useEffect(() => {
-    const loadStyle = async () => {
-      setLoading(true);
-      try {
-        const userId = mx.getUserId();
-        if (!userId) {
-          setLoading(false);
-          return;
-        }
-
-        const profile = await mx.getProfileInfo(userId);
-        const avatarUrl = profile.avatar_url;
-
-        if (!avatarUrl) {
-          setStyle({});
-          setLoading(false);
-          return;
-        }
-
-        const httpUrl = mxcUrlToHttp(mx, avatarUrl, useAuthentication);
-        if (!httpUrl) {
-          setStyle({});
-          setLoading(false);
-          return;
-        }
-
-        // Always use current session's token to avoid stale tokens during account switches
-        const accessToken = getCurrentAccessToken();
-        const metadata = await fetchAndExtractMetadata(httpUrl, useAuthentication ? accessToken : null);
-        setStyle({
-          avatarBorderColor: metadata.avatarBorderColor,
-          gradient: metadata.gradient,
-        });
-      } catch {
-        setStyle({});
-      }
-      setLoading(false);
-    };
-
-    loadStyle();
-
-    // Listen for avatar changes and reload style
-    const userId = mx.getUserId();
-    if (!userId) return undefined;
-
-    const user = mx.getUser(userId);
-    const onAvatarChange: UserEventHandlerMap[UserEvent.AvatarUrl] = () => {
-      loadStyle();
-    };
-
-    user?.on(UserEvent.AvatarUrl, onAvatarChange);
-
-    return () => {
-      user?.removeListener(UserEvent.AvatarUrl, onAvatarChange);
-    };
-  }, [mx, useAuthentication]);
-
-  const updateStyle = useCallback(
-    async (newStyle: Partial<ProfileStyleData>) => {
-      const userId = mx.getUserId();
-      if (!userId) {
-        throw new Error('No user ID');
-      }
-
-      const profile = await mx.getProfileInfo(userId);
-      const avatarUrl = profile.avatar_url;
-
-      if (!avatarUrl) {
-        throw new Error('No avatar set. Please upload an avatar first.');
-      }
-
-      // Fetch current avatar
-      const avatarData = await fetchAvatarData(mx, avatarUrl, useAuthentication);
-      if (!avatarData) {
-        throw new Error('Failed to fetch current avatar');
-      }
-
-      // Border/gradient live in PNG tEXt — convert other formats first
-      let workingData: ArrayBuffer | Uint8Array = avatarData;
-      let format = detectImageFormat(workingData);
-      if (format === 'unknown') {
-        throw new Error('Unsupported avatar image format');
-      }
-
-      if (format !== 'png') {
-        const pngData = await convertImageDataToPng(workingData);
-        if (!pngData) {
-          throw new Error('Failed to convert avatar to PNG for style metadata');
-        }
-        workingData = pngData;
-        format = 'png';
-      }
-
-      // Get existing metadata to preserve
-      const existingMetadata = extractMetadataFromImage(workingData);
-
-      // Merge with new style
-      const newMetadata: ImageMetadata = {
-        ...existingMetadata,
-        avatarBorderColor: newStyle.avatarBorderColor !== undefined ? newStyle.avatarBorderColor : existingMetadata.avatarBorderColor,
-        gradient: newStyle.gradient !== undefined ? newStyle.gradient : existingMetadata.gradient,
-      };
-
-      // Embed updated metadata
-      const newAvatarData = embedMetadataInImage(workingData, newMetadata);
-      if (!newAvatarData) {
-        throw new Error('Failed to embed style in avatar metadata');
-      }
-
-      // Upload modified avatar with correct MIME type
-      const mimeType = getMimeType(format);
-      const extension = getExtension(format);
-      const blob = uint8ArrayToBlob(newAvatarData, mimeType);
-
-      const uploadResponse = await mx.uploadContent(blob, {
-        name: `avatar.${extension}`,
-        type: mimeType,
-      });
-
-      // Update profile with new avatar
-      await mx.setAvatarUrl(uploadResponse.content_uri);
-
-      // Manually sync user object
-      const user = mx.getUser(userId);
-      if (user && user.avatarUrl !== uploadResponse.content_uri) {
-        user.setAvatarUrl(uploadResponse.content_uri);
-      }
-
-      // Update local state
-      setStyle((prev) => ({
-        ...prev,
-        ...newStyle,
-      }));
-    },
-    [mx, useAuthentication]
-  );
-
-  return [style, updateStyle, loading];
-}
-
-// Cache for other users' profile styles
-const userStyleCache = new Map<string, { style: ProfileStyleData; timestamp: number }>();
-const CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
-
-/**
- * Hook to get another user's profile style from their avatar metadata
- * @param userId - The user ID to get style for
- * @param avatarMxc - The user's avatar MXC URL
- * @returns The user's profile style data
- */
-export function useOtherUserProfileStyle(userId: string, avatarMxc: string | undefined): ProfileStyleData {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const [style, setStyle] = useState<ProfileStyleData>({});
-
-  useEffect(() => {
-    if (!avatarMxc) {
-      console.log('[useOtherUserProfileStyle] No avatarMxc provided for', userId);
-      setStyle({});
-      return;
-    }
-
-    const loadStyle = async () => {
-      console.log('[useOtherUserProfileStyle] Loading style for', userId, 'avatarMxc:', avatarMxc);
-      
-      // Check cache first
-      const cacheKey = `${userId}:${avatarMxc}`;
-      const cached = userStyleCache.get(cacheKey);
-
-      if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
-        console.log('[useOtherUserProfileStyle] Using cached style:', cached.style);
-        setStyle(cached.style);
-        return;
-      }
-
-      const httpUrl = mxcUrlToHttp(mx, avatarMxc, useAuthentication);
-      console.log('[useOtherUserProfileStyle] Fetching metadata from:', httpUrl);
-      
-      if (!httpUrl) {
-        console.log('[useOtherUserProfileStyle] Failed to get HTTP URL');
-        setStyle({});
-        return;
-      }
-
-      // Always use current session's token to avoid stale tokens during account switches
-      const accessToken = getCurrentAccessToken();
-      const metadata = await fetchAndExtractMetadata(httpUrl, useAuthentication ? accessToken : null);
-
-      console.log('[useOtherUserProfileStyle] Extracted metadata:', metadata);
-
-      const styleData: ProfileStyleData = {
-        avatarBorderColor: metadata.avatarBorderColor,
-        gradient: metadata.gradient,
-      };
-
-      console.log('[useOtherUserProfileStyle] Final styleData:', styleData);
-
-      // Cache the result
-      userStyleCache.set(cacheKey, { style: styleData, timestamp: Date.now() });
-      setStyle(styleData);
-    };
-
-    loadStyle();
-  }, [mx, useAuthentication, avatarMxc, userId]);
-
-  return style;
-}

src/app/paarrot-api.ts

@@ -11,7 +11,14 @@ import { MatrixClient } from 'matrix-js-sdk';
 import { getHomeRoomPath, getDirectRoomPath, getSpaceRoomPath } from './pages/pathUtils';
 import { getCanonicalAliasOrRoomId, isRoomId } from './utils/matrix';
 import { getCallService } from './features/call/useCall';
-import { RoomType, StateEvent } from '../types/matrix/room';
+import {
+  getNotificationType,
+  getUnreadInfo,
+  reactionOrEditEvent,
+  roomHaveNotification,
+  roomHaveUnread,
+} from './utils/room';
+import { MessageEvent, NotificationType, RoomType, StateEvent } from '../types/matrix/room';
 
 /**
  * Global reference to the router navigate function
@@ -120,6 +127,30 @@ export function initPaarrotAPI(matrixClient: MatrixClient) {
           result = await getCurrentRoom(matrixClient);
           break;
 
+        case 'get-messages-groups':
+          result = await getMessagesByScope(matrixClient, 'groups', action.params.limit);
+          break;
+
+        case 'get-messages-dms':
+          result = await getMessagesByScope(matrixClient, 'dms', action.params.limit);
+          break;
+
+        case 'get-messages-combined':
+          result = await getMessagesByScope(matrixClient, 'combined', action.params.limit);
+          break;
+
+        case 'get-unreads-groups':
+          result = await getUnreadsByScope(matrixClient, 'groups');
+          break;
+
+        case 'get-unreads-dms':
+          result = await getUnreadsByScope(matrixClient, 'dms');
+          break;
+
+        case 'get-unreads-combined':
+          result = await getUnreadsByScope(matrixClient, 'combined');
+          break;
+
         default:
           throw new Error(`Unknown action: ${action.action}`);
       }
@@ -410,6 +441,207 @@ async function getCurrentRoom(matrixClient: any) {
   };
 }
 
+const DEFAULT_MESSAGE_LIMIT = 10;
+const MAX_MESSAGE_LIMIT = 100;
+
+type MessageScope = 'groups' | 'dms' | 'combined';
+
+type ApiMessage = {
+  eventId: string;
+  roomId: string;
+  roomName: string;
+  isDirect: boolean;
+  sender: string;
+  senderName: string;
+  timestamp: number;
+  msgtype: string;
+  body: string;
+};
+
+function isDirectRoom(room: any): boolean {
+  return room?.guessDMUserId?.() !== null;
+}
+
+function parseMessageLimit(limit?: number | string): number {
+  const parsedLimit = Number(limit);
+  return Math.min(
+    Math.max(Number.isFinite(parsedLimit) ? Math.floor(parsedLimit) : DEFAULT_MESSAGE_LIMIT, 1),
+    MAX_MESSAGE_LIMIT
+  );
+}
+
+/**
+ * Collect recent room messages from the local live timeline (newest last).
+ * Skips reactions, edits, and redacted events.
+ */
+function collectRecentMessages(room: any, limit: number): ApiMessage[] {
+  const liveEvents = room.getLiveTimeline?.()?.getEvents?.() ?? [];
+  const isDirect = isDirectRoom(room);
+  const roomId = room.roomId;
+  const roomName = room.name || 'Unnamed Room';
+  const messages: ApiMessage[] = [];
+
+  for (let i = liveEvents.length - 1; i >= 0 && messages.length < limit; i -= 1) {
+    const evt = liveEvents[i];
+    if (!evt) continue;
+    if (typeof evt.isRedacted === 'function' && evt.isRedacted()) continue;
+    if (reactionOrEditEvent(evt)) continue;
+
+    const type = evt.getType?.();
+    if (
+      type !== MessageEvent.RoomMessage &&
+      type !== MessageEvent.RoomMessageEncrypted &&
+      type !== MessageEvent.Sticker
+    ) {
+      continue;
+    }
+
+    const content = evt.getContent?.() ?? {};
+    const sender = evt.getSender?.() ?? '';
+    const member = sender ? room.getMember?.(sender) : null;
+
+    if (type === MessageEvent.RoomMessageEncrypted && !content.msgtype) {
+      messages.push({
+        eventId: evt.getId?.() ?? '',
+        roomId,
+        roomName,
+        isDirect,
+        sender,
+        senderName: member?.name ?? sender,
+        timestamp: evt.getTs?.() ?? 0,
+        msgtype: 'm.encrypted',
+        body: '[encrypted]',
+      });
+      continue;
+    }
+
+    messages.push({
+      eventId: evt.getId?.() ?? '',
+      roomId,
+      roomName,
+      isDirect,
+      sender,
+      senderName: member?.name ?? sender,
+      timestamp: evt.getTs?.() ?? 0,
+      msgtype: content.msgtype || (type === MessageEvent.Sticker ? 'm.sticker' : 'm.text'),
+      body: content.body || '',
+    });
+  }
+
+  return messages.reverse();
+}
+
+function getRoomsForScope(matrixClient: any, scope: MessageScope) {
+  const rooms = (matrixClient?.getRooms?.() || []).filter(
+    (room: any) => !isSpaceLikeRoom(room) && room.getMyMembership?.() === 'join'
+  );
+
+  if (scope === 'groups') {
+    return rooms.filter((room: any) => !isDirectRoom(room));
+  }
+  if (scope === 'dms') {
+    return rooms.filter((room: any) => isDirectRoom(room));
+  }
+  return rooms;
+}
+
+/**
+ * Get recent messages across groups, DMs, or both (combined).
+ */
+async function getMessagesByScope(
+  matrixClient: any,
+  scope: MessageScope,
+  limit?: number | string
+) {
+  const limitNum = parseMessageLimit(limit);
+  const rooms = getRoomsForScope(matrixClient, scope);
+
+  const candidates: ApiMessage[] = [];
+  for (const room of rooms) {
+    candidates.push(...collectRecentMessages(room, limitNum));
+  }
+
+  candidates.sort((a, b) => a.timestamp - b.timestamp);
+  const messages = candidates.slice(-limitNum);
+
+  return {
+    scope,
+    limit: limitNum,
+    count: messages.length,
+    messages,
+  };
+}
+
+/**
+ * List unread conversations across groups, DMs, or both (combined).
+ * Uses the same unread rules as the app UI (notification counts + read receipts, muted excluded).
+ */
+async function getUnreadsByScope(matrixClient: any, scope: MessageScope) {
+  const rooms = getRoomsForScope(matrixClient, scope);
+  const unreads: Array<{
+    roomId: string;
+    name: string;
+    isDirect: boolean;
+    avatar: string | null;
+    total: number;
+    highlight: number;
+    latest?: {
+      eventId: string;
+      sender: string;
+      senderName: string;
+      timestamp: number;
+      msgtype: string;
+      body: string;
+    };
+  }> = [];
+
+  for (const room of rooms) {
+    if (getNotificationType(matrixClient, room.roomId) === NotificationType.Mute) {
+      continue;
+    }
+    if (!roomHaveNotification(room) && !roomHaveUnread(matrixClient, room)) {
+      continue;
+    }
+
+    const unreadInfo = getUnreadInfo(room);
+    const latestMessages = collectRecentMessages(room, 1);
+    const latest = latestMessages[0];
+
+    unreads.push({
+      roomId: room.roomId,
+      name: room.name || 'Unnamed Room',
+      isDirect: isDirectRoom(room),
+      avatar: room.getMxcAvatarUrl?.() || null,
+      total: unreadInfo.total,
+      highlight: unreadInfo.highlight,
+      latest: latest
+        ? {
+            eventId: latest.eventId,
+            sender: latest.sender,
+            senderName: latest.senderName,
+            timestamp: latest.timestamp,
+            msgtype: latest.msgtype,
+            body: latest.body,
+          }
+        : undefined,
+    });
+  }
+
+  unreads.sort((a, b) => {
+    const aTs = a.latest?.timestamp ?? 0;
+    const bTs = b.latest?.timestamp ?? 0;
+    if (bTs !== aTs) return bTs - aTs;
+    if (b.highlight !== a.highlight) return b.highlight - a.highlight;
+    return b.total - a.total;
+  });
+
+  return {
+    scope,
+    count: unreads.length,
+    unreads,
+  };
+}
+
 /**
  * Get the currently active room ID
  * Extracts room ID from the current URL pathname

src/app/pages/ThemeManager.tsx

@@ -5,7 +5,7 @@ import {
   LightTheme,
   ThemeContextProvider,
   ThemeKind,
-  useActiveTheme,
+  useDisplayTheme,
   useSystemThemeKind,
 } from '../hooks/useTheme';
 import { useSetting } from '../state/hooks/settings';
@@ -29,21 +29,21 @@ export function UnAuthRouteThemeManager() {
 }
 
 export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
-  const activeTheme = useActiveTheme();
+  const displayTheme = useDisplayTheme();
   const [monochromeMode] = useSetting(settingsAtom, 'monochromeMode');
 
   useEffect(() => {
     document.body.className = '';
     document.body.classList.add(configClass, varsClass);
 
-    document.body.classList.add(...activeTheme.classNames);
+    document.body.classList.add(...displayTheme.classNames);
 
     if (monochromeMode) {
       document.body.style.filter = 'grayscale(1)';
     } else {
       document.body.style.filter = '';
     }
-  }, [activeTheme, monochromeMode]);
+  }, [displayTheme, monochromeMode]);
 
-  return <ThemeContextProvider value={activeTheme}>{children}</ThemeContextProvider>;
+  return <ThemeContextProvider value={displayTheme}>{children}</ThemeContextProvider>;
 }