Fix responsive message images

Constrain image attachments to their parent while preserving their aspect ratio.

.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/background-notifications/HANDOFF.md

@@ -76,6 +76,7 @@ tauri.ts / electron main
 - Multiple runtimes: `isTauri`, `isElectron`, `isCapacitorNative` branch logic
 - Pusher registration races on fast login/logout
 - Android small icon: `ic_stat_paarrot` must exist in Android resources
+- Background wake (`MatrixSyncService`) must filter by push rules / unread_notifications; a push for one room used to notify for every new message in the sync batch
 
 ## Future work
 
@@ -91,3 +92,4 @@ tauri.ts / electron main
 
 - Constants: `PUSHER_APP_ID_BASE`, `PUSHER_STORAGE_PREFIX` in `backgroundSync.ts`
 - Logo assets: `paarrot.svg`, `paarrot-unread.svg`, `paarrot-highlight.svg` in `public/res/svg/`
+- Android notify filter: mute / mentions / default-room behavior lives in `MatrixSyncService.resolveRoomNotifyMode`

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

@@ -8,13 +8,14 @@
     "node": ">=16.0.0"
   },
   "scripts": {
-    "start": "vite --open false",
-    "build": "vite build",
+    "start": "vite",
+    "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",
@@ -24,6 +25,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "3.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.0.0",
     "@fontsource-variable/inter": "5.2.8",
+    "@fontsource/caveat": "5.3.0",
     "@fontsource/inter": "5.2.8",
     "@paarrot/plugin-manager": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git",
     "@tanstack/react-query": "5.101.2",
@@ -82,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",
@@ -93,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",
@@ -116,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/AnimatedOutlet.tsx

@@ -1,16 +1,53 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 
+const decodeSegment = (segment: string): string => {
+  let decoded = segment;
+  try {
+    let next = decodeURIComponent(decoded);
+    while (next !== decoded) {
+      decoded = next;
+      next = decodeURIComponent(decoded);
+    }
+  } catch {
+    // keep partially decoded value
+  }
+  return decoded;
+};
+
 /**
- * Wrapper for Outlet that adds route-based animation
- * Forces remount on route change by using location as key
+ * Room routes are `:roomIdOrAlias/:eventId?/`. Jumping to an event (or clearing it)
+ * changes the pathname but not the room — keep the outlet mounted so we don't replay
+ * the route enter animation or remount drawers like Shared Media.
+ *
+ * Path segments are decoded so `!room:server` and `%21room%3Aserver` share a key.
+ */
+const getOutletTransitionKey = (pathname: string): string => {
+  const segments = pathname.split('/').filter(Boolean).map(decodeSegment);
+  if (segments.length === 0) return pathname;
+
+  // Matrix event IDs start with `$`
+  if (segments[segments.length - 1].startsWith('$')) {
+    segments.pop();
+  }
+
+  return `/${segments.join('/')}/`;
+};
+
+/**
+ * Wrapper for Outlet that adds route-based animation.
+ * Remounts (and animates) when leaving a room / switching rooms, not on same-room event hops.
  */
 export function AnimatedOutlet() {
   const location = useLocation();
-  
+  const transitionKey = useMemo(
+    () => getOutletTransitionKey(location.pathname),
+    [location.pathname]
+  );
+
   return (
     <div
-      key={location.pathname}
+      key={transitionKey}
       data-route-transition="true"
       style={{
         flex: 1,

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 = () => {
-      FileSaver.saveAs(src, name);
+    const handleDownload = async () => {
+      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/editor/Editor.tsx

@@ -6,11 +6,9 @@ import React, {
   forwardRef,
   useCallback,
   useState,
-  useEffect,
-  useRef,
 } from 'react';
 import { Box, Scroll, Text } from 'folds';
-import { Descendant, Editor, createEditor, Transforms, Range, Element as SlateElement, Text as SlateText, Point } from 'slate';
+import { Descendant, Editor, createEditor, Element as SlateElement, Text as SlateText } from 'slate';
 import {
   Slate,
   Editable,
@@ -172,48 +170,6 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       [editor, onKeyDown]
     );
 
-    const handleBeforeInput = useCallback(
-      (event: Event) => {
-        const inputEvent = event as InputEvent;
-        
-        // Handle autocorrect replacement that causes text duplication
-        if (inputEvent.inputType === 'insertReplacementText' || 
-            inputEvent.inputType === 'insertFromComposition') {
-          const { selection } = editor;
-          if (!selection) return;
-
-          // Get the data being inserted
-          const data = inputEvent.data || inputEvent.dataTransfer?.getData('text/plain');
-          
-          if (data) {
-            event.preventDefault();
-            
-            // If there's selected text, delete it first
-            if (selection && !Range.isCollapsed(selection)) {
-              Transforms.delete(editor, { at: selection });
-            }
-            
-            // Insert the replacement text
-            editor.insertText(data);
-          }
-        }
-      },
-      [editor]
-    );
-
-    const editableRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      const editableElement = editableRef.current?.querySelector('[data-slate-editor="true"]');
-      if (!editableElement) return;
-
-      editableElement.addEventListener('beforeinput', handleBeforeInput, { capture: true });
-      
-      return () => {
-        editableElement.removeEventListener('beforeinput', handleBeforeInput, { capture: true });
-      };
-    }, [handleBeforeInput]);
-
     const renderPlaceholder = useCallback(
       ({ attributes, children }: RenderPlaceholderProps) => (
         <span {...attributes} className={css.EditorPlaceholderContainer}>
@@ -256,10 +212,9 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
               className={css.EditorTextareaScroll}
               variant="SurfaceVariant"
               style={scrollStyle}
-              size="300"
+              size="0"
               visibility="Hover"
               hideTrack
-              ref={editableRef}
             >
               <Editable
                 data-editable-name={editableName}

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,
-    paddingRight: config.space.S200,
-    borderBottomWidth: config.borderWidth.B300,
-    flexShrink: 0,
-    gap: config.space.S200,
+    position: 'absolute',
+    inset: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.72)',
+    backdropFilter: 'blur(18px)',
+    WebkitBackdropFilter: 'blur(18px)',
+    cursor: 'zoom-out',
   },
 ]);
 
-export const ImageViewerContent = style([
+export const Stage = style([
   DefaultReset,
   {
-    backgroundColor: color.Background.Container,
-    color: color.Background.OnContainer,
+    position: 'relative',
+    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',
-    width: 'auto',
-    height: 'auto',
-    maxWidth: '100%',
-    maxHeight: '100%',
-    backgroundColor: color.Surface.Container,
-    transition: 'transform 100ms linear',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    padding: 6,
+    border: 'none',
+    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 FileSaver from 'file-saver';
+import React, {
+  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 { usePan } from '../../hooks/usePan';
-import { downloadMedia } from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { downloadAndSaveMedia } from '../../utils/saveMedia';
 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 { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
-    const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
+    const frameRef = useRef<HTMLDivElement>(null);
+    const imgRef = useRef<HTMLImageElement>(null);
+    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
-        const fileContent = await downloadMedia(src, getCurrentAccessToken());
-        FileSaver.saveAs(fileContent, alt);
+        await downloadAndSaveMedia(src, alt, getCurrentAccessToken());
       } 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
-        className={classNames(css.ImageViewer, className)}
-        direction="Column"
+      <div
+        className={classNames(css.Root, className)}
+        role="dialog"
+        aria-modal="true"
+        aria-label={alt || 'Image viewer'}
         {...props}
         ref={ref}
       >
-        <Header className={css.ImageViewerHeader} size="400">
-          <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose}>
-              <Icon size="50" src={Icons.ArrowLeft} />
-            </IconButton>
-            <Text size="T300" truncate>
+        <div className={css.Backdrop} onClick={requestClose} aria-hidden />
+        <div className={css.Stage}>
+          <div className={css.Chrome}>
+            <div className={css.Title} title={alt}>
               {alt}
-            </Text>
-          </Box>
-          <Box shrink="No" alignItems="Center" gap="200">
-            <IconButton
-              variant={zoom < 1 ? 'Success' : 'SurfaceVariant'}
-              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"
+            </div>
+            <button
+              type="button"
+              className={css.ChromeButton}
+              aria-label="Download"
               onClick={handleDownload}
-              radii="300"
-              before={<Icon size="50" src={Icons.Download} />}
             >
-              <Text size="B300">Download</Text>
-            </Chip>
-          </Box>
-        </Header>
-        <Box
-          grow="Yes"
-          className={css.ImageViewerContent}
-          justifyContent="Center"
-          alignItems="Center"
-        >
-          <img
-            className={css.ImageViewerImg}
-            style={{
-              cursor,
-              transform: `scale(${zoom}) translate(${pan.translateX}px, ${pan.translateY}px)`,
-            }}
-            src={src}
-            alt={alt}
-            draggable={false}
-            onMouseDown={onMouseDown}
-          />
-        </Box>
-      </Box>
+              <Icon size="50" src={Icons.Download} />
+            </button>
+            <button
+              type="button"
+              className={css.ChromeButton}
+              aria-label="Close"
+              onClick={requestClose}
+            >
+              <Icon size="50" src={Icons.Cross} />
+            </button>
+          </div>
+          <div
+            ref={frameRef}
+            className={css.Frame}
+            data-zoomed={zoomed || undefined}
+            data-pannable={zoomed || undefined}
+            data-dragging={dragging || undefined}
+            onClick={handleClick}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            onPointerCancel={handlePointerUp}
+          >
+            <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);
-      FileSaver.saveAs(fileURL, filename);
-      return fileURL;
+      await saveMediaBlob(fileContent, filename);
+      return true;
     }, [mx, url, useAuthentication, mimeType, encInfo, filename])
   );
 

src/app/components/message/MsgTypeRenderers.tsx

@@ -26,8 +26,11 @@ import {
   MATRIX_SPOILER_PROPERTY_NAME,
   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';
 import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
 import { FileHeader, FileDownloadButton } from './FileHeader';
 
@@ -76,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 />;
@@ -87,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,
@@ -112,6 +123,7 @@ type MEmoteProps = {
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
+  onJumboEmojiClick?: JumboEmojiClickHandler;
 };
 export function MEmote({
   displayName,
@@ -119,6 +131,7 @@ export function MEmote({
   content,
   renderBody,
   renderUrlsPreview,
+  onJumboEmojiClick,
 }: MEmoteProps) {
   const { body, formatted_body: customBody } = content;
 
@@ -129,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({
-          body: trimmedBody,
-          customBody: trimmedCustomBody,
-        })}
-        {edited && <MessageEditedContent />}
+        <span {...jumboEmojiInteraction}>
+          {renderBody({
+            body: trimmedBody,
+            customBody: trimmedCustomBody,
+          })}
+          {edited && <MessageEditedContent />}
+        </span>
       </MessageTextBody>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>
@@ -154,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 />;
@@ -165,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,
@@ -199,6 +228,20 @@ type MImageProps = {
   renderImageContent: (props: RenderImageContentProps) => ReactNode;
   outlined?: boolean;
 };
+
+const resolveMediaBoxSize = (
+  mxcUrl: string,
+  w?: number,
+  h?: number
+): { width: number; height: number } => resolveAttachmentBoxSize(mxcUrl, w, h);
+
+/** Extra space after media so following text stays on the 24px ruled grid — applied outside the photo chrome */
+const STATIONERY_LINE_PX = 24;
+const snapStationeryGridPad = (height: number): number => {
+  const rem = height % STATIONERY_LINE_PX;
+  return rem === 0 ? 0 : STATIONERY_LINE_PX - rem;
+};
+
 export function MImage({ content, renderImageContent, outlined }: MImageProps) {
   const imgInfo = content?.info;
   const mxcUrl = content.file?.url ?? content.url;
@@ -206,9 +249,24 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
     return <BrokenContent />;
   }
 
+  const { width, height } = resolveMediaBoxSize(mxcUrl, imgInfo?.w, imgInfo?.h);
+  const gridPad = snapStationeryGridPad(height);
+
   return (
-    <Attachment outlined={outlined} transparent>
-      <AttachmentBox>
+    <StationeryMedia
+      outlined={outlined}
+      transparent
+      tiltSeed={mxcUrl}
+      gridPad={gridPad}
+    >
+      <AttachmentBox
+        style={{
+          width: toRem(width),
+          aspectRatio: `${width} / ${height}`,
+          ['--media-h' as string]: `${height}px`,
+        }}
+        data-paarrot-media-height={height}
+      >
         {renderImageContent({
           body: content.body || 'Image',
           info: imgInfo,
@@ -219,7 +277,7 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
           spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
         })}
       </AttachmentBox>
-    </Attachment>
+    </StationeryMedia>
   );
 }
 
@@ -251,9 +309,20 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
   }
 
   const filename = content.filename ?? content.body ?? 'Video';
+  const { width, height } = resolveMediaBoxSize(
+    mxcUrl,
+    videoInfo.w ?? videoInfo.thumbnail_info?.w,
+    videoInfo.h ?? videoInfo.thumbnail_info?.h
+  );
+  const gridPad = snapStationeryGridPad(height);
 
   return (
-    <Attachment outlined={outlined} transparent>
+    <StationeryMedia
+      outlined={outlined}
+      transparent
+      tiltSeed={mxcUrl}
+      gridPad={gridPad}
+    >
       <AttachmentHeader>
         <FileHeader
           body={filename}
@@ -268,7 +337,13 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
           }
         />
       </AttachmentHeader>
-      <AttachmentBox>
+      <AttachmentBox
+        style={{
+          width: toRem(width),
+          height: toRem(height),
+        }}
+        data-paarrot-media-height={height}
+      >
         {renderVideoContent({
           body: content.body || 'Video',
           info: videoInfo,
@@ -279,7 +354,7 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
           spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
         })}
       </AttachmentBox>
-    </Attachment>
+    </StationeryMedia>
   );
 }
 
@@ -418,12 +493,16 @@ export function MSticker({ content, renderImageContent }: MStickerProps) {
     return <MessageBrokenContent />;
   }
   const height = scaleYDimension(imgInfo?.w || 152, 152, imgInfo?.h || 152);
+  const tapeAlt = hashStationerySeed(mxcUrl) % 2 === 1;
 
   return (
     <AttachmentBox
+      data-stationery-media=""
+      data-tape-alt={tapeAlt ? '' : undefined}
       style={{
         height: toRem(height < 48 ? 48 : height),
         width: toRem(152),
+        ['--media-rot' as string]: stationeryMediaRot(mxcUrl),
       }}
     >
       {renderImageContent({

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

@@ -64,6 +64,33 @@ export const ReactionText = style([
   },
 ]);
 
+export const ReactionStack = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    display: 'inline-grid',
+    placeItems: 'center',
+    gridTemplateColumns: '1fr',
+    gridTemplateRows: '1fr',
+    lineHeight: toRem(20),
+    minWidth: 0,
+  },
+]);
+
+export const ReactionSticker = style([
+  DefaultReset,
+  {
+    minWidth: 0,
+    maxWidth: toRem(150),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: toRem(20),
+    gridArea: '1 / 1',
+    transformOrigin: 'center center',
+  },
+]);
+
 export const ReactionImg = style([
   DefaultReset,
   {

src/app/components/message/Reaction.tsx

@@ -6,6 +6,9 @@ import * as css from './Reaction.css';
 import { getHexcodeForEmoji, getShortcodeFor } from '../../plugins/emoji';
 import { getMemberDisplayName } from '../../utils/room';
 import { eventWithShortcode, getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { isStationeryTheme, useTheme } from '../../hooks/useTheme';
+
+const MAX_STICKER_STACK = 4;
 
 export const Reaction = as<
   'button',
@@ -15,35 +18,101 @@ export const Reaction = as<
     reaction: string;
     useAuthentication?: boolean;
   }
->(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => (
-  <Box
-    as="button"
-    className={classNames(css.Reaction, className)}
-    alignItems="Center"
-    shrink="No"
-    gap="200"
-    {...props}
-    ref={ref}
-  >
-    <Text className={css.ReactionText} as="span" size="T400">
-      {reaction.startsWith('mxc://') ? (
-        <img
-          className={css.ReactionImg}
-          src={mxcUrlToHttp(mx, reaction, useAuthentication) ?? reaction
-          }
-          alt={reaction}
-        />
-      ) : (
-        <Text as="span" size="Inherit" truncate>
-          {reaction}
+>(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => {
+  const theme = useTheme();
+  const stationery = isStationeryTheme(theme);
+  const isCustomEmoji = reaction.startsWith('mxc://');
+  const customSrc = isCustomEmoji
+    ? mxcUrlToHttp(mx, reaction, useAuthentication) ?? reaction
+    : undefined;
+
+  const emoji = isCustomEmoji ? (
+    <img className={css.ReactionImg} src={customSrc} alt={reaction} />
+  ) : (
+    <Text as="span" size="Inherit" truncate>
+      {reaction}
+    </Text>
+  );
+
+  // Stationery: fanned sticker stack. Everywhere else: compact emoji + count.
+  if (!stationery) {
+    return (
+      <Box
+        as="button"
+        className={classNames(css.Reaction, className)}
+        alignItems="Center"
+        shrink="No"
+        gap="200"
+        data-reaction=""
+        aria-label={`${reaction}, ${count}`}
+        {...props}
+        ref={ref}
+      >
+        <Text className={css.ReactionText} as="span" size="T400">
+          {emoji}
+        </Text>
+        <Text as="span" size="T300" data-reaction-count="">
+          {count}
+        </Text>
+      </Box>
+    );
+  }
+
+  const stackCount = Math.min(Math.max(count, 1), MAX_STICKER_STACK);
+  const showCount = count > 2;
+
+  return (
+    <Box
+      as="button"
+      className={classNames(css.Reaction, className)}
+      alignItems="Center"
+      shrink="No"
+      gap="200"
+      data-reaction=""
+      data-reaction-stack={stackCount}
+      aria-label={`${reaction}, ${count}`}
+      {...props}
+      ref={ref}
+    >
+      <span className={css.ReactionStack} data-reaction-stack-layer="">
+        {Array.from({ length: stackCount }, (_, i) => {
+          const layer = stackCount - 1 - i;
+          return (
+            <Text
+              key={layer}
+              className={css.ReactionSticker}
+              as="span"
+              size="T400"
+              data-reaction-sticker=""
+              style={{
+                ['--sticker-i' as string]: layer,
+                zIndex: i + 1,
+              }}
+              aria-hidden={i < stackCount - 1 ? true : undefined}
+            >
+              {isCustomEmoji ? (
+                <img
+                  className={css.ReactionImg}
+                  src={customSrc}
+                  alt={i === stackCount - 1 ? reaction : ''}
+                />
+              ) : (
+                <Text as="span" size="Inherit" truncate>
+                  {reaction}
+                </Text>
+              )}
+            </Text>
+          );
+        })}
+      </span>
+      {showCount && (
+        <Text as="span" size="T300" data-reaction-count="">
+          {count}
         </Text>
       )}
-    </Text>
-    <Text as="span" size="T300">
-      {count}
-    </Text>
-  </Box>
-));
+    </Box>
+  );
+});
 
 type ReactionTooltipMsgProps = {
   room: Room;

src/app/components/message/Reply.tsx

@@ -14,29 +14,54 @@ import { useRoomEvent } from '../../hooks/useRoomEvent';
 import colorMXID from '../../../util/colorMXID';
 import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useOtherUserColor } from '../../hooks/useUserColor';
+import { isStationeryTheme, useTheme } from '../../hooks/useTheme';
+import { STATIONERY_NAME_INK } from '../../utils/paperSafeInk';
 
 type ReplyLayoutProps = {
   userColor?: string;
   username?: ReactNode;
 };
 export const ReplyLayout = as<'div', ReplyLayoutProps>(
-  ({ username, userColor, className, children, ...props }, ref) => (
-    <Box
-      className={classNames(css.Reply, className)}
-      alignItems="Center"
-      gap="100"
-      {...props}
-      ref={ref}
-    >
-      <Box style={{ color: userColor, maxWidth: toRem(200) }} alignItems="Center" shrink="No">
-        <Icon size="100" src={Icons.ReplyArrow} />
-        {username}
+  ({ username, userColor, className, children, ...props }, ref) => {
+  const theme = useTheme();
+  const isStationery = isStationeryTheme(theme);
+
+    return (
+      <Box
+        className={classNames(css.Reply, className)}
+        alignItems="Center"
+        gap="100"
+        {...props}
+        ref={ref}
+      >
+        <Box
+          style={
+            isStationery
+              ? {
+                  color: STATIONERY_NAME_INK,
+                  maxWidth: toRem(200),
+                  ...(userColor
+                    ? {
+                        ['--username-accent' as string]: userColor,
+                        textDecorationColor: userColor,
+                      }
+                    : null),
+                }
+              : { color: userColor, maxWidth: toRem(200) }
+          }
+          data-username-accent={isStationery && userColor ? '' : undefined}
+          alignItems="Center"
+          shrink="No"
+        >
+          <Icon size="100" src={Icons.ReplyArrow} />
+          {username}
+        </Box>
+        <Box grow="Yes" className={css.ReplyContent}>
+          {children}
+        </Box>
       </Box>
-      <Box grow="Yes" className={css.ReplyContent}>
-        {children}
-      </Box>
-    </Box>
-  )
+    );
+  }
 );
 
 export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
@@ -92,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/StationeryMedia.tsx

@@ -0,0 +1,293 @@
+import React, {
+  ComponentProps,
+  CSSProperties,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+import { Attachment } from './attachment';
+import { isStationeryTheme, useTheme } from '../../hooks/useTheme';
+
+type Corner = 'tl' | 'tr' | 'bl' | 'br';
+
+type StationeryMediaProps = ComponentProps<typeof Attachment> & {
+  children: ReactNode;
+  /** Stable id (e.g. mxc URL) so tilt/tape don't reshuffle on timeline re-renders */
+  tiltSeed?: string;
+  /** Invisible bottom spacer (px) so following text stays on the ruled grid */
+  gridPad?: number;
+};
+
+const CORNERS: { id: Corner; x: 0 | 1; y: 0 | 1 }[] = [
+  { id: 'tl', x: 0, y: 0 },
+  { id: 'tr', x: 1, y: 0 },
+  { id: 'bl', x: 0, y: 1 },
+  { id: 'br', x: 1, y: 1 },
+];
+
+const MEDIA_ROTS = [-0.9, 0.7, -0.5, 1.0, -1.1, 0.8, -0.4, 0.9] as const;
+
+export function hashStationerySeed(seed: string): number {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i += 1) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+
+export function stationeryMediaRot(seed: string): string {
+  return `${MEDIA_ROTS[hashStationerySeed(seed) % MEDIA_ROTS.length]}deg`;
+}
+
+const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n));
+
+/**
+ * Fold sits halfway between corner and cursor; flap hinges on that fold.
+ * `keep` = remaining photo; `flap` = lifted triangle.
+ */
+function cornerPeelPaths(
+  id: Corner,
+  w: number,
+  h: number,
+  cx: number,
+  cy: number,
+  ux: number,
+  uy: number,
+  size: number
+): {
+  keep: string;
+  flap: string;
+  origin: string;
+  axisX: number;
+  axisY: number;
+  hingeSign: number;
+} {
+  const eps = 0.0001;
+  // Fold line through the midpoint on corner→cursor, ⊥ to that ray
+  const px = cx + ux * size;
+  const py = cy + uy * size;
+
+  let ax = 0;
+  let ay = 0;
+  let bx = 0;
+  let by = 0;
+
+  if (id === 'tr') {
+    ax = clamp(Math.abs(ux) > eps ? px + (py * uy) / ux : px, 0, w);
+    ay = 0;
+    bx = w;
+    by = clamp(Math.abs(uy) > eps ? py - ((w - px) * ux) / uy : py, 0, h);
+  } else if (id === 'tl') {
+    ax = clamp(Math.abs(ux) > eps ? px + (py * uy) / ux : px, 0, w);
+    ay = 0;
+    bx = 0;
+    by = clamp(Math.abs(uy) > eps ? py - ((0 - px) * ux) / uy : py, 0, h);
+  } else if (id === 'br') {
+    ax = clamp(Math.abs(ux) > eps ? px + ((py - h) * uy) / ux : px, 0, w);
+    ay = h;
+    bx = w;
+    by = clamp(Math.abs(uy) > eps ? py - ((w - px) * ux) / uy : py, 0, h);
+  } else {
+    ax = clamp(Math.abs(ux) > eps ? px + ((py - h) * uy) / ux : px, 0, w);
+    ay = h;
+    bx = 0;
+    by = clamp(Math.abs(uy) > eps ? py - ((0 - px) * ux) / uy : py, 0, h);
+  }
+
+  let keep: string;
+  if (id === 'tr') {
+    keep = `polygon(0 0, ${ax}px 0, ${w}px ${by}px, ${w}px ${h}px, 0 ${h}px)`;
+  } else if (id === 'tl') {
+    keep = `polygon(${ax}px 0, ${w}px 0, ${w}px ${h}px, 0 ${h}px, 0 ${by}px)`;
+  } else if (id === 'br') {
+    keep = `polygon(0 0, ${w}px 0, ${w}px ${by}px, ${ax}px ${h}px, 0 ${h}px)`;
+  } else {
+    keep = `polygon(0 0, ${w}px 0, ${w}px ${h}px, ${ax}px ${h}px, 0 ${by}px)`;
+  }
+
+  const flap = `polygon(${cx}px ${cy}px, ${ax}px ${ay}px, ${bx}px ${by}px)`;
+
+  // Hinge on the fold (midpoint), axis along the fold edge
+  const midX = (ax + bx) / 2;
+  const midY = (ay + by) / 2;
+  const fdx = bx - ax;
+  const fdy = by - ay;
+  const flen = Math.hypot(fdx, fdy) || 1;
+  const axisX = fdx / flen;
+  const axisY = fdy / flen;
+  // Sign so the corner swings up over the fold (right-hand rule)
+  const cross = fdx * (cy - midY) - fdy * (cx - midX);
+  const hingeSign = cross >= 0 ? 1 : -1;
+
+  return {
+    keep,
+    flap,
+    origin: `${midX}px ${midY}px`,
+    axisX,
+    axisY,
+    hingeSign,
+  };
+}
+
+/**
+ * Stationery-theme image chrome: clear corner tape + a mouse-driven peel
+ * that shows a duplicated slice of the photo lifting toward the cursor.
+ */
+export function StationeryMedia({
+  children,
+  tiltSeed = 'stationery',
+  gridPad = 0,
+  style,
+  ...attachmentProps
+}: StationeryMediaProps) {
+  const theme = useTheme();
+  const isStationery = isStationeryTheme(theme);
+  const peelRef = useRef<HTMLSpanElement>(null);
+
+  const tiltStyle = useMemo((): CSSProperties => {
+    return {
+      ...(style as CSSProperties | undefined),
+      // Margin sits outside the paper chrome — snaps the grid without a white bar
+      ...(isStationery && gridPad > 0 ? { marginBottom: `${gridPad}px` } : null),
+      ['--media-rot' as string]: stationeryMediaRot(tiltSeed),
+    };
+  }, [tiltSeed, style, isStationery, gridPad]);
+
+  const tapeAlt = useMemo(() => hashStationerySeed(tiltSeed) % 2 === 1, [tiltSeed]);
+  // Default tape covers TL; alt covers TR — peel only the free top corner
+  const peelCorner = useMemo(
+    () => (tapeAlt ? CORNERS.find((c) => c.id === 'tl')! : CORNERS.find((c) => c.id === 'tr')!),
+    [tapeAlt]
+  );
+
+  const clearPeel = useCallback((host: HTMLElement) => {
+    const peel = peelRef.current;
+    const target = host.querySelector('[data-paarrot-media-height]') as HTMLElement | null;
+    if (peel) {
+      // Hide flap first (no opacity tween) so restoring the photo can't double-draw
+      peel.style.transition = 'none';
+      peel.style.opacity = '0';
+      peel.style.setProperty('--peel-hinge', '0deg');
+      peel.style.clipPath = '';
+    }
+    if (target) target.style.clipPath = '';
+  }, []);
+
+  const syncPeel = useCallback(
+    (host: HTMLElement, clientX: number, clientY: number) => {
+      const peel = peelRef.current;
+      if (!peel) return;
+
+      const rect = host.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      const w = rect.width;
+      const h = rect.height;
+
+      const best = peelCorner;
+      const cx = best.x * w;
+      const cy = best.y * h;
+      const dist = Math.hypot(cx - x, cy - y);
+      const maxReach = Math.min(w, h) * 0.55;
+
+      // Fold halfway between corner and cursor; fade when leaving the corner zone
+      let size = 0;
+      let amount = 0;
+      if (dist > 8 && dist <= maxReach) {
+        size = dist * 0.5;
+        amount = Math.min(1, size / (Math.min(w, h) * 0.22));
+      } else if (dist > maxReach && dist < maxReach * 1.35) {
+        const fade = 1 - (dist - maxReach) / (maxReach * 0.35);
+        size = maxReach * 0.5 * Math.max(0, fade);
+        amount = Math.max(0, fade);
+      }
+
+      const img = host.querySelector('img');
+      const url = img?.currentSrc || img?.src || '';
+
+      // Unit vector from corner → cursor (triangle aims this way)
+      let ux = x - cx;
+      let uy = y - cy;
+      if (best.id === 'tr') {
+        ux = Math.min(-0.05, ux);
+        uy = Math.max(0.05, uy);
+      } else {
+        ux = Math.max(0.05, ux);
+        uy = Math.max(0.05, uy);
+      }
+      const len = Math.hypot(ux, uy) || 1;
+      ux /= len;
+      uy /= len;
+
+      peel.dataset.corner = best.id;
+      if (url) {
+        peel.style.setProperty('--peel-img', `url(${JSON.stringify(url)})`);
+      }
+
+      const target = host.querySelector('[data-paarrot-media-height]') as HTMLElement | null;
+      if (target && amount > 0.06 && size > 6) {
+        const { keep, flap, origin, axisX, axisY, hingeSign } = cornerPeelPaths(
+          best.id,
+          w,
+          h,
+          cx,
+          cy,
+          ux,
+          uy,
+          size
+        );
+        target.style.clipPath = keep;
+        peel.style.clipPath = flap;
+        peel.style.transformOrigin = origin;
+        peel.style.setProperty('--peel-axis-x', String(axisX));
+        peel.style.setProperty('--peel-axis-y', String(axisY));
+        peel.style.setProperty('--peel-hinge', `${hingeSign * amount * 52}deg`);
+        peel.style.setProperty('--peel-tip-x', `${cx}px`);
+        peel.style.setProperty('--peel-tip-y', `${cy}px`);
+        peel.style.setProperty('--peel-grad-r', `${Math.max(size * 1.15, 12)}px`);
+        peel.style.opacity = '1';
+      } else {
+        clearPeel(host);
+      }
+    },
+    [peelCorner, clearPeel]
+  );
+
+  const handleMove: MouseEventHandler<HTMLElement> = (evt) => {
+    syncPeel(evt.currentTarget, evt.clientX, evt.clientY);
+  };
+
+  const handleEnter: MouseEventHandler<HTMLElement> = (evt) => {
+    syncPeel(evt.currentTarget, evt.clientX, evt.clientY);
+  };
+
+  const handleLeave: MouseEventHandler<HTMLElement> = (evt) => {
+    clearPeel(evt.currentTarget);
+  };
+
+  if (!isStationery) {
+    return (
+      <Attachment style={style} {...attachmentProps}>
+        {children}
+      </Attachment>
+    );
+  }
+
+  return (
+    <Attachment
+      {...attachmentProps}
+      style={tiltStyle}
+      data-stationery-media=""
+      data-tape-alt={tapeAlt ? '' : undefined}
+      onMouseEnter={handleEnter}
+      onMouseMove={handleMove}
+      onMouseLeave={handleLeave}
+    >
+      <span ref={peelRef} data-stationery-peel="" aria-hidden="true" />
+      {children}
+    </Attachment>
+  );
+}

src/app/components/message/attachment/Attachment.css.ts

@@ -8,7 +8,7 @@ export const Attachment = recipe({
     color: color.SurfaceVariant.OnContainer,
     borderRadius: config.radii.R400,
     overflow: 'hidden',
-    maxWidth: toRem(400),
+    maxWidth: `min(100%, ${toRem(400)})`,
   },
   variants: {
     outlined: {
@@ -33,7 +33,7 @@ export const AttachmentHeader = style({
 export const AttachmentBox = style([
   DefaultReset,
   {
-    maxWidth: toRem(400),
+    maxWidth: `min(100%, ${toRem(400)})`,
     maxHeight: toRem(400),
     overflow: 'hidden',
   },

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);
-      FileSaver.saveAs(fileURL, body);
-      return fileURL;
+      await saveMediaBlob(fileContent, body);
+      return fileContent;
     }, [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,8 +1,8 @@
 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 { BlurhashCanvas } from 'react-blurhash';
+import { Blurhash } from 'react-blurhash';
 import FocusTrap from 'focus-trap-react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { IImageInfo, MATRIX_BLUR_HASH_PROPERTY_NAME } from '../../../../types/matrix/common';
@@ -14,9 +14,9 @@ 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';
 
 /**
  * Fetches media with authentication headers and returns a blob URL.
@@ -68,7 +68,7 @@ type RenderImageProps = {
   alt: string;
   title: string;
   src: string;
-  onLoad: () => void;
+  onLoad: (event?: React.SyntheticEvent<HTMLImageElement>) => void;
   onError: () => void;
   onClick: () => void;
   tabIndex: number;
@@ -105,12 +105,23 @@ export const ImageContent = as<'div', ImageContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const eventBlurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const cachedBlurHash = getMediaBlurHash(url);
+    const blurHash = eventBlurHash ?? cachedBlurHash;
+    const cachedDims = getMediaDimensions(url);
+    const blurResolutionX = 32;
+    const ratioW = info?.w || cachedDims?.w;
+    const ratioH = info?.h || cachedDims?.h;
+    const blurResolutionY =
+      ratioW && ratioH && ratioW > 0
+        ? Math.max(1, Math.round(blurResolutionX * (ratioH / ratioW)))
+        : 32;
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
+    const [showPlaceholder, setShowPlaceholder] = useState(true);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
@@ -139,6 +150,7 @@ export const ImageContent = as<'div', ImageContentProps>(
     const handleError = () => {
       setLoad(false);
       setError(true);
+      setShowPlaceholder(true);
     };
 
     const handleRetry = () => {
@@ -150,42 +162,52 @@ export const ImageContent = as<'div', ImageContentProps>(
       if (autoPlay) loadSrc();
     }, [autoPlay, loadSrc]);
 
+    // Keep blurhash under the fade, then remove it once the image is fully opaque.
+    useEffect(() => {
+      if (!load) {
+        setShowPlaceholder(true);
+        return undefined;
+      }
+      const timer = window.setTimeout(() => setShowPlaceholder(false), 540);
+      return () => window.clearTimeout(timer);
+    }, [load]);
+
     return (
       <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+        {showPlaceholder &&
+          (typeof blurHash === 'string' ? (
+            <div className={css.BlurhashPlaceholder}>
+              <Blurhash
+                hash={blurHash}
+                width="100%"
+                height="100%"
+                resolutionX={blurResolutionX}
+                resolutionY={blurResolutionY}
+                punch={1.2}
+                style={{ display: 'block' }}
+              />
+            </div>
+          ) : (
+            <div className={css.MediaSkeleton} />
+          ))}
         {srcState.status === AsyncStatus.Success && (
-          <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
-            <OverlayCenter>
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setViewer(false),
-                  clickOutsideDeactivates: true,
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Modal
-                  className={ModalWide}
-                  size="500"
-                >
-                  {renderViewer({
-                    src: srcState.data,
-                    alt: body,
-                    requestClose: () => setViewer(false),
-                  })}
-                </Modal>
-              </FocusTrap>
-            </OverlayCenter>
+          <Overlay open={viewer} backdrop={null}>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setViewer(false),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              {renderViewer({
+                src: srcState.data,
+                alt: body,
+                requestClose: () => setViewer(false),
+              })}
+            </FocusTrap>
           </Overlay>
         )}
-        {typeof blurHash === 'string' && !load && (
-          <BlurhashCanvas
-            style={{ width: '100%', height: '100%' }}
-            width={32}
-            height={32}
-            hash={blurHash}
-            punch={1}
-          />
-        )}
         {!autoPlay && !markedAsSpoiler && srcState.status === AsyncStatus.Idle && (
           <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
             <Button
@@ -201,12 +223,26 @@ export const ImageContent = as<'div', ImageContentProps>(
           </Box>
         )}
         {srcState.status === AsyncStatus.Success && (
-          <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
+          <Box
+            className={classNames(
+              css.AbsoluteContainer,
+              css.MediaFadeIn,
+              load && css.MediaFadeInLoaded,
+              blurred && css.Blur
+            )}
+          >
             {renderImage({
               alt: body,
               title: body,
               src: srcState.data,
-              onLoad: handleLoad,
+              onLoad: (e?: React.SyntheticEvent<HTMLImageElement>) => {
+                const img = e?.currentTarget;
+                if (img?.naturalWidth && img?.naturalHeight) {
+                  setMediaDimensions(url, img.naturalWidth, img.naturalHeight);
+                }
+                if (img) rememberMediaBlurHash(url, img);
+                handleLoad();
+              },
               onError: handleError,
               onClick: () => setViewer(true),
               tabIndex: 0,
@@ -248,7 +284,8 @@ export const ImageContent = as<'div', ImageContentProps>(
         )}
         {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
           !load &&
-          !blurred && (
+          !blurred &&
+          typeof blurHash !== 'string' && (
             <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
               <Spinner variant="Secondary" />
             </Box>

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

@@ -2,7 +2,7 @@ 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 { Icon, Icons } from '../../icons';
 import classNames from 'classnames';
-import { BlurhashCanvas } from 'react-blurhash';
+import { Blurhash } from 'react-blurhash';
 import FocusTrap from 'focus-trap-react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import {
@@ -25,6 +25,7 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { validBlurHash } from '../../../utils/blurHash';
 import { ModalWide } from '../../../styles/Modal.css';
 import { stopPropagation } from '../../../utils/keyboard';
+import { setMediaDimensions, getMediaBlurHash, getMediaDimensions, rememberMediaBlurHash } from '../../../state/mediaDimensionCache';
 
 type RenderViewerProps = {
   src: string;
@@ -34,7 +35,7 @@ type RenderViewerProps = {
 type RenderVideoProps = {
   title: string;
   src: string;
-  onLoadedMetadata: () => void;
+  onLoadedMetadata: (event?: React.SyntheticEvent<HTMLVideoElement>) => void;
   onError: () => void;
   autoPlay: boolean;
   controls: boolean;
@@ -74,12 +75,23 @@ export const VideoContent = as<'div', VideoContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = validBlurHash(info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const eventBlurHash = validBlurHash(info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const cachedBlurHash = getMediaBlurHash(url);
+    const blurHash = eventBlurHash ?? cachedBlurHash;
+    const cachedDims = getMediaDimensions(url);
+    const blurResolutionX = 32;
+    const blurW = info.w ?? info.thumbnail_info?.w ?? cachedDims?.w;
+    const blurH = info.h ?? info.thumbnail_info?.h ?? cachedDims?.h;
+    const blurResolutionY =
+      blurW && blurH && blurW > 0
+        ? Math.max(1, Math.round(blurResolutionX * (blurH / blurW)))
+        : 32;
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
+    const [showPlaceholder, setShowPlaceholder] = useState(true);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
@@ -95,12 +107,17 @@ export const VideoContent = as<'div', VideoContentProps>(
       }, [mx, url, useAuthentication, mimeType, encInfo])
     );
 
-    const handleLoad = () => {
+    const handleLoad = (video?: HTMLVideoElement) => {
+      if (video?.videoWidth && video?.videoHeight) {
+        setMediaDimensions(url, video.videoWidth, video.videoHeight);
+      }
+      if (video) rememberMediaBlurHash(url, video);
       setLoad(true);
     };
     const handleError = () => {
       setLoad(false);
       setError(true);
+      setShowPlaceholder(true);
     };
 
     const handleRetry = () => {
@@ -112,8 +129,33 @@ export const VideoContent = as<'div', VideoContentProps>(
       if (autoPlay) loadSrc();
     }, [autoPlay, loadSrc]);
 
+    useEffect(() => {
+      if (!load) {
+        setShowPlaceholder(true);
+        return undefined;
+      }
+      const timer = window.setTimeout(() => setShowPlaceholder(false), 540);
+      return () => window.clearTimeout(timer);
+    }, [load]);
+
     return (
       <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+        {showPlaceholder &&
+          (typeof blurHash === 'string' ? (
+            <div className={css.BlurhashPlaceholder}>
+              <Blurhash
+                hash={blurHash}
+                width="100%"
+                height="100%"
+                resolutionX={blurResolutionX}
+                resolutionY={blurResolutionY}
+                punch={1.2}
+                style={{ display: 'block' }}
+              />
+            </div>
+          ) : (
+            <div className={css.MediaSkeleton} />
+          ))}
         {renderViewer && srcState.status === AsyncStatus.Success && (
           <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
             <OverlayCenter>
@@ -136,15 +178,6 @@ export const VideoContent = as<'div', VideoContentProps>(
             </OverlayCenter>
           </Overlay>
         )}
-        {typeof blurHash === 'string' && !load && (
-          <BlurhashCanvas
-            style={{ width: '100%', height: '100%' }}
-            width={32}
-            height={32}
-            hash={blurHash}
-            punch={1}
-          />
-        )}
         {renderThumbnail && !load && (
           <Box
             className={classNames(css.AbsoluteContainer, blurred && css.Blur)}
@@ -169,11 +202,20 @@ export const VideoContent = as<'div', VideoContentProps>(
           </Box>
         )}
         {srcState.status === AsyncStatus.Success && (
-          <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
+          <Box
+            className={classNames(
+              css.AbsoluteContainer,
+              css.MediaFadeIn,
+              load && css.MediaFadeInLoaded,
+              blurred && css.Blur
+            )}
+          >
             {renderVideo({
               title: body,
               src: srcState.data,
-              onLoadedMetadata: handleLoad,
+              onLoadedMetadata: (e?: React.SyntheticEvent<HTMLVideoElement>) => {
+                handleLoad(e?.currentTarget);
+              },
               onError: handleError,
               autoPlay: true,
               controls: true,
@@ -213,7 +255,8 @@ export const VideoContent = as<'div', VideoContentProps>(
         )}
         {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
           !load &&
-          !blurred && (
+          !blurred &&
+          typeof blurHash !== 'string' && (
             <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
               <Spinner variant="Secondary" />
             </Box>

src/app/components/message/content/style.css.ts

@@ -1,11 +1,13 @@
-import { style } from '@vanilla-extract/css';
-import { DefaultReset, config } from 'folds';
+import { keyframes, style } from '@vanilla-extract/css';
+import { DefaultReset, color, config } from 'folds';
 
 export const RelativeBase = style([
   DefaultReset,
   {
     position: 'relative',
     display: 'flex',
+    width: '100%',
+    height: '100%',
     maxWidth: '100%',
     maxHeight: '100%',
     borderRadius: '7px',
@@ -16,9 +18,13 @@ export const RelativeBase = style([
 export const AbsoluteContainer = style([
   DefaultReset,
   {
+    position: 'absolute',
+    inset: 0,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    width: '100%',
+    height: '100%',
     maxWidth: '100%',
     maxHeight: '100%',
     borderRadius: 'inherit',
@@ -34,6 +40,7 @@ export const AbsoluteFooter = style([
     bottom: config.space.S100,
     left: config.space.S100,
     right: config.space.S100,
+    zIndex: 1,
   },
 ]);
 
@@ -43,3 +50,67 @@ export const Blur = style([
     filter: 'blur(44px)',
   },
 ]);
+
+const shimmer = keyframes({
+  '0%': {
+    backgroundPosition: '200% 0',
+  },
+  '100%': {
+    backgroundPosition: '-200% 0',
+  },
+});
+
+/** Soft fallback when no blurhash is available. */
+export const MediaSkeleton = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    borderRadius: 'inherit',
+    backgroundImage: `linear-gradient(
+      90deg,
+      ${color.SurfaceVariant.Container} 0%,
+      ${color.SurfaceVariant.ContainerHover} 40%,
+      ${color.SurfaceVariant.Container} 80%
+    )`,
+    backgroundSize: '200% 100%',
+    animation: `${shimmer} 1.4s ease-in-out infinite`,
+  },
+]);
+
+const blurhashFadeIn = keyframes({
+  from: {
+    opacity: 0,
+  },
+  to: {
+    opacity: 1,
+  },
+});
+
+/** Soft blurhash layer that fills the reserved media box. */
+export const BlurhashPlaceholder = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    overflow: 'hidden',
+    borderRadius: 'inherit',
+    zIndex: 0,
+    // Soften the decode so it reads as color blobs; slight scale hides blur edges.
+    filter: 'blur(14px)',
+    transform: 'scale(1.06)',
+    opacity: 0,
+    animation: `${blurhashFadeIn} 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards`,
+  },
+]);
+
+/** Media starts invisible and fades in once loaded over the placeholder. */
+export const MediaFadeIn = style({
+  zIndex: 1,
+  opacity: 0,
+  transition: 'opacity 520ms cubic-bezier(0.22, 1, 0.36, 1)',
+});
+
+export const MediaFadeInLoaded = style({
+  opacity: 1,
+});

src/app/components/message/layout/Base.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { CSSProperties, useMemo } from 'react';
 import { Text, as } from 'folds';
 import classNames from 'classnames';
 import * as css from './layout.css';
+import { isStationeryTheme, useTheme } from '../../../hooks/useTheme';
+import { STATIONERY_NAME_INK } from '../../../utils/paperSafeInk';
 
 export const MessageBase = as<'div', css.MessageBaseVariants>(
   ({ className, highlight, selected, collapse, autoCollapse, space, newMessage, ...props }, ref) => (
@@ -10,6 +12,7 @@ export const MessageBase = as<'div', css.MessageBaseVariants>(
         css.MessageBase({ highlight, selected, collapse, autoCollapse, space, newMessage }),
         className
       )}
+      data-message-collapsed={collapse ? '' : undefined}
       {...props}
       ref={ref}
     />
@@ -17,12 +20,45 @@ export const MessageBase = as<'div', css.MessageBaseVariants>(
 );
 
 export const AvatarBase = as<'span'>(({ className, ...props }, ref) => (
-  <span className={classNames(css.AvatarBase, className)} {...props} ref={ref} />
+  <span
+    className={classNames(css.AvatarBase, className)}
+    data-message-avatar=""
+    {...props}
+    ref={ref}
+  />
 ));
 
-export const Username = as<'span'>(({ as: AsUsername = 'span', className, ...props }, ref) => (
-  <AsUsername className={classNames(css.Username, className)} {...props} ref={ref} />
-));
+export const Username = as<'span'>(({ as: AsUsername = 'span', className, style, ...props }, ref) => {
+  const theme = useTheme();
+  const isStationery = isStationeryTheme(theme);
+  const userColor =
+    typeof (style as CSSProperties | undefined)?.color === 'string'
+      ? ((style as CSSProperties).color as string)
+      : undefined;
+
+  const safeStyle = useMemo((): CSSProperties | undefined => {
+    if (!isStationery) return style as CSSProperties | undefined;
+    return {
+      ...(style as CSSProperties | undefined),
+      // Name in ink; keep their color as an accent underline
+      color: STATIONERY_NAME_INK,
+      ...(userColor
+        ? { ['--username-accent' as string]: userColor, textDecorationColor: userColor }
+        : null),
+    };
+  }, [style, isStationery, userColor]);
+
+  return (
+    <AsUsername
+      className={classNames(css.Username, className)}
+      data-message-username=""
+      data-username-accent={isStationery && userColor ? '' : undefined}
+      style={safeStyle}
+      {...props}
+      ref={ref}
+    />
+  );
+});
 
 export const UsernameBold = as<'b'>(({ as: AsUsernameBold = 'b', className, ...props }, ref) => (
   <AsUsernameBold className={classNames(css.UsernameBold, className)} {...props} ref={ref} />
@@ -32,10 +68,12 @@ export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?
   ({ as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, ...props }, ref) => (
     <Text
       as={asComp}
-      size="T400"
+      size={jumboEmoji ? 'Inherit' : 'T400'}
       priority={notice ? '300' : '400'}
       className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)}
       data-allow-text-selection="true"
+      data-message-body=""
+      data-jumbo-emoji={jumboEmoji ? '' : undefined}
       {...props}
       ref={ref}
     />

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

@@ -1,4 +1,5 @@
-import { createVar, keyframes, style, styleVariants } from '@vanilla-extract/css';
+import { createVar, globalStyle, keyframes, style, styleVariants } from '@vanilla-extract/css';
+import * as htmlCss from '../../../styles/CustomHtml.css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
 
@@ -117,6 +118,7 @@ export const MessageBase = recipe({
     collapse: {
       true: {
         marginTop: 0,
+        paddingTop: config.space.S0,
       },
     },
     autoCollapse: {
@@ -202,6 +204,14 @@ export const Username = style({
     'button&:hover, button&:focus-visible': {
       textDecoration: 'underline',
     },
+    // Stationery uses a colored border-bottom accent instead
+    'html.stationery &, body.stationery &': {
+      overflow: 'visible',
+      overflowY: 'visible',
+    },
+    'body.stationery button&:hover, body.stationery button&:focus-visible': {
+      textDecoration: 'none',
+    },
   },
 });
 
@@ -209,6 +219,8 @@ export const UsernameBold = style({
   fontWeight: 550,
 });
 
+const jumboEmojiSize = toRem(70);
+
 export const MessageTextBody = recipe({
   base: {
     wordBreak: 'break-word',
@@ -226,8 +238,14 @@ export const MessageTextBody = recipe({
     },
     jumboEmoji: {
       true: {
-        fontSize: '1.504em',
-        lineHeight: '1.4962em',
+        fontSize: jumboEmojiSize,
+        lineHeight: 1,
+        overflow: 'visible',
+        overflowY: 'visible',
+        paddingBottom: config.space.S200,
+        cursor: 'pointer',
+        position: 'relative',
+        zIndex: 5,
       },
     },
     emote: {
@@ -240,3 +258,31 @@ export const MessageTextBody = recipe({
 });
 
 export type MessageTextBodyVariants = RecipeVariants<typeof MessageTextBody>;
+
+const jumboEmojiClass = MessageTextBody.classNames.variants.jumboEmoji.true;
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonBase}`, {
+  height: '1em',
+  padding: 0,
+  overflow: 'visible',
+  verticalAlign: 'middle',
+  position: 'relative',
+  zIndex: 1,
+});
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, {
+  fontSize: '1em',
+  height: '1em',
+  minWidth: '1em',
+  lineHeight: 1,
+  position: 'static',
+  top: 0,
+  overflow: 'visible',
+});
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonImg}`, {
+  height: '1em',
+  width: '1em',
+  maxHeight: 'none',
+  objectFit: 'contain',
+});

src/app/components/nav/NavCategory.tsx

@@ -7,5 +7,10 @@ type NavCategoryProps = {
   children: ReactNode;
 };
 export const NavCategory = as<'div', NavCategoryProps>(({ className, ...props }, ref) => (
-  <div className={classNames(css.NavCategory, className)} {...props} ref={ref} />
+  <div
+    className={classNames(css.NavCategory, className)}
+    data-nav-category=""
+    {...props}
+    ref={ref}
+  />
 ));

src/app/components/nav/NavItem.tsx

@@ -13,6 +13,7 @@ export const NavItem = as<
   <AsNavItem
     className={classNames(css.NavItem({ variant, radii }), className)}
     data-highlight={highlight}
+    data-nav-item=""
     {...props}
     ref={ref}
   >

src/app/components/page/Page.tsx

@@ -6,6 +6,7 @@ import * as css from './style.css';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { SidebarDockedCallPanel } from '../../features/call/SidebarDockedCallPanel';
 import { useShowCompactMasterView } from '../../hooks/useCompactNav';
+import { isStationeryTheme, useTheme } from '../../hooks/useTheme';
 
 type PageRootProps = {
   nav: ReactNode;
@@ -15,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' })}>
@@ -22,7 +24,7 @@ export function PageRoot({ nav, children }: PageRootProps) {
       {screenSize !== ScreenSize.Mobile && (
         <Line variant="Background" size="300" direction="Vertical" />
       )}
-      {!showCompactMaster && children}
+      {showDetail && children}
     </Box>
   );
 }
@@ -43,6 +45,7 @@ export function PageNav({
       grow={isMobile ? 'Yes' : undefined}
       className={classNames(css.PageNav({ size }), className)}
       shrink={isMobile ? 'Yes' : 'No'}
+      data-page-nav=""
     >
       <Box grow="Yes" direction="Column">
         {children}
@@ -58,6 +61,7 @@ export const PageNavHeader = as<'header', css.PageNavHeaderVariants>(
       className={classNames(css.PageNavHeader({ outlined }), className)}
       variant="Background"
       size="600"
+      data-folder-tab="nav"
       {...props}
       ref={ref}
     />
@@ -73,13 +77,16 @@ export function PageNavContent({
   scrollRef?: MutableRefObject<HTMLDivElement | null>;
   scrollProps?: React.ComponentProps<typeof Scroll>;
 }) {
+  const theme = useTheme();
+  const hideScrollbar = isStationeryTheme(theme);
+
   return (
     <Box grow="Yes" direction="Column">
       <Scroll
         ref={scrollRef}
         variant="Background"
         direction="Vertical"
-        size="300"
+        size={hideScrollbar ? '0' : '300'}
         hideTrack
         visibility="Hover"
         {...scrollProps}
@@ -95,6 +102,7 @@ export const Page = as<'div'>(({ className, ...props }, ref) => (
     grow="Yes"
     direction="Column"
     className={classNames(ContainerColor({ variant: 'Surface' }), className)}
+    data-page=""
     {...props}
     ref={ref}
   />
@@ -106,6 +114,7 @@ export const PageHeader = as<'div', css.PageHeaderVariants>(
       as="header"
       size="600"
       className={classNames(css.PageHeader({ balance, outlined }), className)}
+      data-folder-tab-bar=""
       {...props}
       ref={ref}
     />

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/room-avatar/RoomAvatar.tsx

@@ -1,13 +1,23 @@
 import { JoinRule } from 'matrix-js-sdk';
 import { AvatarFallback, AvatarImage, color } from 'folds';
 import { Icon, Icons } from '../icons';
-import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useState } from 'react';
+import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useEffect, useState } from 'react';
+import { Blurhash } from 'react-blurhash';
 import * as css from './RoomAvatar.css';
 import { joinRuleToIconSrc } from '../../utils/room';
 import colorMXID from '../../../util/colorMXID';
 import { useAuthenticatedMediaUrl } from '../../hooks/useAuthenticatedMediaUrl';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { cacheAvatar, isAvatarCached, pruneAvatarCache } from '../../utils/avatarCache';
+import {
+  getCachedAuthenticatedMediaUrl,
+  isAuthenticatedMediaUrl,
+} from '../../utils/authenticatedMediaCache';
+import {
+  getMediaBlurHash,
+  getMediaDimensions,
+  rememberMediaBlurHash,
+} from '../../state/mediaDimensionCache';
 
 type RoomAvatarProps = {
   roomId: string;
@@ -17,19 +27,36 @@ type RoomAvatarProps = {
 };
 export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps) {
   const [error, setError] = useState(false);
-  const [loaded, setLoaded] = useState(() => isAvatarCached(src));
   const useAuthentication = useMediaAuthentication();
   const authenticatedSrc = useAuthenticatedMediaUrl(src, useAuthentication);
+  const blurHash = getMediaBlurHash(src ?? '');
+  const dims = getMediaDimensions(src ?? '');
+  const blobCached =
+    !!src &&
+    (!useAuthentication ||
+      !isAuthenticatedMediaUrl(src) ||
+      !!getCachedAuthenticatedMediaUrl(src));
+  const [loaded, setLoaded] = useState(() => isAvatarCached(src) || blobCached);
+
+  useEffect(() => {
+    if (
+      authenticatedSrc &&
+      (isAvatarCached(src) ||
+        (src && (!useAuthentication || !isAuthenticatedMediaUrl(src) || getCachedAuthenticatedMediaUrl(src))))
+    ) {
+      setLoaded(true);
+    }
+  }, [authenticatedSrc, src, useAuthentication]);
 
   const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
     evt.currentTarget.setAttribute('data-image-loaded', 'true');
     setLoaded(true);
     cacheAvatar(src);
     pruneAvatarCache();
+    rememberMediaBlurHash(src ?? '', evt.currentTarget);
   };
 
-  // No src or error - show fallback only
-  if (!authenticatedSrc || error) {
+  if (!src || error) {
     return (
       <AvatarFallback
         style={{ backgroundColor: colorMXID(roomId ?? ''), color: color.Surface.Container }}
@@ -40,8 +67,7 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
     );
   }
 
-  // If already cached, show image directly without fallback flash
-  if (loaded) {
+  if (authenticatedSrc && loaded) {
     return (
       <AvatarImage
         className={css.RoomAvatar}
@@ -55,12 +81,17 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
     );
   }
 
-  // Loading state - render fallback with image overlay
+  const blurResolutionX = 32;
+  const blurResolutionY =
+    dims?.w && dims?.h && dims.w > 0
+      ? Math.max(1, Math.round(blurResolutionX * (dims.h / dims.w)))
+      : 32;
+
   return (
     <div style={{ position: 'relative', width: '100%', height: '100%' }}>
       <AvatarFallback
-        style={{ 
-          backgroundColor: colorMXID(roomId ?? ''), 
+        style={{
+          backgroundColor: colorMXID(roomId ?? ''),
           color: color.Surface.Container,
           position: 'absolute',
           inset: 0,
@@ -69,15 +100,39 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
       >
         {renderFallback()}
       </AvatarFallback>
-      <AvatarImage
-        className={css.RoomAvatar}
-        style={{ position: 'relative', zIndex: 1 }}
-        src={authenticatedSrc}
-        alt={alt}
-        onError={() => setError(true)}
-        onLoad={handleLoad}
-        draggable={false}
-      />
+      {blurHash && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            overflow: 'hidden',
+            borderRadius: 'inherit',
+            filter: 'blur(6px)',
+            transform: 'scale(1.08)',
+          }}
+        >
+          <Blurhash
+            hash={blurHash}
+            width="100%"
+            height="100%"
+            resolutionX={blurResolutionX}
+            resolutionY={blurResolutionY}
+            punch={1.1}
+            style={{ display: 'block' }}
+          />
+        </div>
+      )}
+      {authenticatedSrc && (
+        <AvatarImage
+          className={css.RoomAvatar}
+          style={{ position: 'relative', zIndex: 1, opacity: loaded ? 1 : 0 }}
+          src={authenticatedSrc}
+          alt={alt}
+          onError={() => setError(true)}
+          onLoad={handleLoad}
+          draggable={false}
+        />
+      )}
     </div>
   );
 }

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/sidebar/Sidebar.tsx

@@ -4,5 +4,10 @@ import React from 'react';
 import * as css from './Sidebar.css';
 
 export const Sidebar = as<'div'>(({ as: AsSidebar = 'div', className, ...props }, ref) => (
-  <AsSidebar className={classNames(css.Sidebar, className)} {...props} ref={ref} />
+  <AsSidebar
+    className={classNames(css.Sidebar, className)}
+    data-sidebar=""
+    {...props}
+    ref={ref}
+  />
 ));

src/app/components/sidebar/SidebarContent.tsx

@@ -8,10 +8,10 @@ type SidebarContentProps = {
 export function SidebarContent({ scrollable, sticky }: SidebarContentProps) {
   return (
     <>
-      <Box direction="Column" grow="Yes">
+      <Box direction="Column" grow="Yes" data-sidebar-scroll-region="" style={{ overflow: 'visible', minWidth: 0 }}>
         {scrollable}
       </Box>
-      <Box direction="Column" shrink="No">
+      <Box direction="Column" shrink="No" data-sidebar-sticky="" style={{ overflow: 'visible' }}>
         {sticky}
       </Box>
     </>

src/app/components/sidebar/SidebarItem.tsx

@@ -7,6 +7,7 @@ export const SidebarItem = as<'div', css.SidebarItemVariants>(
   ({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
     <AsSidebarAvatarBox
       className={classNames(css.SidebarItem({ active }), className)}
+      data-sidebar-item=""
       {...props}
       ref={ref}
     />
@@ -54,6 +55,7 @@ export const SidebarAvatar = as<'div', css.SidebarAvatarVariants & ComponentProp
     <Avatar
       className={classNames(css.SidebarAvatar({ size, outlined }), className)}
       radii={radii}
+      data-sidebar-avatar=""
       {...props}
       ref={ref}
     />
@@ -64,6 +66,7 @@ export const SidebarFolder = as<'div', css.SidebarFolderVariants>(
   ({ as: AsSidebarFolder = 'div', className, state, ...props }, ref) => (
     <AsSidebarFolder
       className={classNames(css.SidebarFolder({ state }), className)}
+      data-sidebar-folder=""
       {...props}
       ref={ref}
     />

src/app/components/update-notification/UpdateNotification.css.ts

@@ -1,95 +1,149 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
 
-export const CheckButtonContainer = style({
+const indeterminate = keyframes({
+  '0%': { transform: 'translateX(-100%)' },
+  '100%': { transform: 'translateX(250%)' },
+});
+
+export const IdleSlot = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  height: '32px',
-  width: '32px',
+  height: '100%',
+  WebkitAppRegion: 'no-drag',
+  flexShrink: 0,
 });
 
-export const CheckButton = style({
+export const GhostCheck = style({
   all: 'unset',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  padding: 0,
+  width: toRem(28),
+  height: toRem(28),
   borderRadius: config.radii.R300,
-  cursor: 'pointer',
-  color: color.Secondary.Main,
-  backgroundColor: 'transparent',
-  transition: 'opacity 0.2s, background-color 0.15s',
-  height: '32px',
-  width: '32px',
+  color: color.Surface.OnContainer,
   opacity: 0,
-  WebkitAppRegion: 'no-drag',
-  flexShrink: 0,
-
+  cursor: 'pointer',
+  transition: 'opacity 0.15s ease, background-color 0.15s ease',
   selectors: {
     '&[data-visible="true"]': {
-      opacity: 0.7,
+      opacity: 0.65,
+    },
+    '&:hover': {
+      opacity: 1,
+      backgroundColor: color.Surface.ContainerHover,
     },
   },
-
-  ':hover': {
-    backgroundColor: color.Surface.ContainerHover,
-    opacity: 1,
-  },
-
-  ':active': {
-    backgroundColor: color.Surface.ContainerActive,
-  },
-
-  ':focus-visible': {
-    outline: `2px solid ${color.Secondary.Main}`,
-    outlineOffset: '2px',
-    opacity: 1,
-  },
 });
 
-export const UpdateButton = style({
-  all: 'unset',
+export const Bar = style({
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center',
-  padding: 0,
+  gap: config.space.S200,
+  height: toRem(22),
+  minWidth: toRem(120),
+  maxWidth: toRem(200),
+  padding: `0 ${config.space.S200}`,
   borderRadius: config.radii.R300,
-  cursor: 'pointer',
-  color: color.Success.Main,
-  backgroundColor: 'transparent',
-  transition: 'background-color 0.15s',
-  height: '32px',
-  width: '32px',
+  backgroundColor: color.SurfaceVariant.Container,
+  color: color.SurfaceVariant.OnContainer,
   WebkitAppRegion: 'no-drag',
   flexShrink: 0,
+  boxSizing: 'border-box',
+});
 
-  ':hover': {
-    backgroundColor: color.Surface.ContainerHover,
-  },
+export const BarTrack = style({
+  position: 'relative',
+  flex: 1,
+  height: toRem(4),
+  borderRadius: toRem(2),
+  overflow: 'hidden',
+  backgroundColor: color.Surface.ContainerLine,
+  minWidth: toRem(64),
+});
 
-  ':active': {
-    backgroundColor: color.Surface.ContainerActive,
-  },
+export const BarFill = style({
+  position: 'absolute',
+  inset: '0 auto 0 0',
+  height: '100%',
+  borderRadius: 'inherit',
+  backgroundColor: color.Success.Main,
+  transition: 'width 120ms linear',
+});
 
-  ':focus-visible': {
-    outline: `2px solid ${color.Success.Main}`,
-    outlineOffset: '2px',
+export const BarIndeterminate = style({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  width: '40%',
+  borderRadius: 'inherit',
+  backgroundColor: color.Secondary.Main,
+  animation: `${indeterminate} 1s ease-in-out infinite`,
+});
+
+export const BarLabel = style({
+  flexShrink: 0,
+  fontVariantNumeric: 'tabular-nums',
+  opacity: 0.9,
+  minWidth: toRem(28),
+  textAlign: 'right',
+});
+
+export const Chip = style({
+  height: toRem(22),
+  maxWidth: toRem(260),
+  padding: `0 ${config.space.S100} 0 ${config.space.S200}`,
+  borderRadius: config.radii.R300,
+  backgroundColor: color.Success.Container,
+  color: color.Success.OnContainer,
+  WebkitAppRegion: 'no-drag',
+  flexShrink: 0,
+  boxSizing: 'border-box',
+});
+
+export const ChipText = style({
+  maxWidth: toRem(140),
+});
+
+export const ChipAction = style({
+  all: 'unset',
+  display: 'inline-flex',
+  alignItems: 'center',
+  height: toRem(18),
+  padding: `0 ${config.space.S200}`,
+  borderRadius: config.radii.R300,
+  backgroundColor: color.Success.Main,
+  color: color.Success.OnMain,
+  fontSize: toRem(11),
+  fontWeight: 600,
+  cursor: 'pointer',
+  whiteSpace: 'nowrap',
+  selectors: {
+    '&:hover': {
+      filter: 'brightness(1.05)',
+    },
   },
 });
 
-export const UpdateMenu = style({
-  minWidth: toRem(280),
-  maxWidth: toRem(320),
-  backgroundColor: color.Surface.Container,
-  borderRadius: config.radii.R400,
-  boxShadow: config.shadow.E400,
-  border: `1px solid ${color.Surface.ContainerLine}`,
-});
-
-export const ProgressText = style({
-  color: color.Success.Main,
-  fontWeight: 500,
-  minWidth: toRem(35),
-  textAlign: 'center',
+export const ChipDismiss = style({
+  all: 'unset',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: toRem(18),
+  height: toRem(18),
+  borderRadius: config.radii.R300,
+  cursor: 'pointer',
+  opacity: 0.7,
+  fontSize: toRem(14),
+  lineHeight: 1,
+  selectors: {
+    '&:hover': {
+      opacity: 1,
+      backgroundColor: 'rgba(0,0,0,0.08)',
+    },
+  },
 });

src/app/components/update-notification/UpdateNotification.tsx

@@ -1,138 +1,136 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Spinner, Text, Menu, PopOut, Button, config } from 'folds';
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Text } from 'folds';
 import * as css from './UpdateNotification.css';
 
 interface UpdateInfo {
   version: string;
   releaseNotes?: string;
   releaseDate?: string;
+  mock?: boolean;
 }
 
 interface DownloadProgress {
   percent: number;
   transferred: number;
   total: number;
+  mock?: boolean;
 }
 
+type UpdaterPhase = 'idle' | 'checking' | 'available' | 'downloading' | 'ready';
+
 export function UpdateNotification() {
-  const [updateAvailable, setUpdateAvailable] = useState(false);
+  const [phase, setPhase] = useState<UpdaterPhase>('idle');
   const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
-  const [downloading, setDownloading] = useState(false);
   const [downloadProgress, setDownloadProgress] = useState(0);
-  const [updateReady, setUpdateReady] = useState(false);
-  const [checking, setChecking] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const [menuAnchor, setMenuAnchor] = useState<{ x: number; y: number; width: number; height: number } | undefined>(undefined);
+  const [isMock, setIsMock] = useState(false);
+  const [hovered, setHovered] = useState(false);
 
   useEffect(() => {
-    // Check if we're in Electron environment
-    if (typeof window === 'undefined' || !(window as any).electron?.updater) {
-      return;
+    const electron = (window as any).electron;
+    if (!electron?.updater) return undefined;
+
+    const { updater } = electron;
+
+    updater.isMock?.().then((result: { success?: boolean; data?: { mock?: boolean } }) => {
+      if (result?.data?.mock) setIsMock(true);
+    }).catch(() => {});
+
+    updater.onUpdateAvailable((info: UpdateInfo) => {
+      setUpdateInfo(info);
+      if (info.mock) setIsMock(true);
+      setPhase('available');
+      setDownloadProgress(0);
+    });
+
+    updater.onUpdateDownloadProgress((progress: DownloadProgress) => {
+      setPhase('downloading');
+      setDownloadProgress(Math.min(100, Math.round(progress.percent)));
+    });
+
+    updater.onUpdateDownloaded((info: UpdateInfo) => {
+      setUpdateInfo(info);
+      setPhase('ready');
+      setDownloadProgress(100);
+    });
+
+    const onNotAvailable = () => {
+      setPhase('idle');
+      setUpdateInfo(null);
+      setDownloadProgress(0);
+    };
+    // Optional channel — ignore if preload doesn't expose a dedicated listener
+    if (electron.updater.onUpdateNotAvailable) {
+      electron.updater.onUpdateNotAvailable(onNotAvailable);
     }
 
-    const { updater } = (window as any).electron;
-
-    // Listen for update available
-    updater.onUpdateAvailable((info: UpdateInfo) => {
-      console.log('Update available:', info.version);
-      setUpdateAvailable(true);
-      setUpdateInfo(info);
-      setDownloading(false);
-      setUpdateReady(false);
-      setChecking(false);
-    });
-
-    // Listen for download progress
-    updater.onUpdateDownloadProgress((progress: DownloadProgress) => {
-      setDownloadProgress(Math.round(progress.percent));
-    });
-
-    // Listen for update downloaded
-    updater.onUpdateDownloaded((info: UpdateInfo) => {
-      console.log('Update downloaded:', info.version);
-      setDownloading(false);
-      setUpdateReady(true);
-    });
-
-    // Cleanup - IPC listeners don't need manual cleanup in this case
+    return undefined;
   }, []);
 
-  const handleCheckForUpdates = async () => {
-    setChecking(true);
+  const handleCheck = useCallback(async () => {
+    setPhase('checking');
     try {
       const result = await (window as any).electron.updater.checkForUpdates();
-      console.log('Update check result:', result);
-      
-      // Handle error response (including dev mode error)
-      if (!result.success) {
-        console.warn('Update check failed:', result.error);
-        setChecking(false);
-        return;
+      if (!result?.success) {
+        setPhase('idle');
       }
-      
-      // If no update found, show feedback briefly
-      setTimeout(() => {
-        if (!updateAvailable) {
-          setChecking(false);
-        }
-      }, 2000);
-    } catch (error) {
-      console.error('Failed to check for updates:', error);
-      setChecking(false);
+      // available event will advance phase; if nothing comes, fall back
+      window.setTimeout(() => {
+        setPhase((current) => (current === 'checking' ? 'idle' : current));
+      }, 4000);
+    } catch {
+      setPhase('idle');
     }
-  };
+  }, []);
 
-  const handleDownload = async () => {
-    setDownloading(true);
+  const handleDownload = useCallback(async () => {
+    setPhase('downloading');
     setDownloadProgress(0);
     try {
       await (window as any).electron.updater.downloadUpdate();
-    } catch (error) {
-      console.error('Failed to download update:', error);
-      setDownloading(false);
+    } catch {
+      setPhase('available');
     }
-    setMenuAnchor(undefined);
-  };
+  }, []);
 
-  const handleInstall = async () => {
+  const handleInstall = useCallback(async () => {
     try {
       await (window as any).electron.updater.installUpdate();
-    } catch (error) {
-      console.error('Failed to install update:', error);
+      if (isMock) {
+        setPhase('idle');
+        setUpdateInfo(null);
+        setDownloadProgress(0);
+      }
+    } catch {
+      // keep ready state
     }
-  };
+  }, [isMock]);
 
-  const handleMenuToggle = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (menuAnchor) {
-      setMenuAnchor(undefined);
-    } else {
-      const rect = event.currentTarget.getBoundingClientRect();
-      setMenuAnchor({ x: rect.x, y: rect.y, width: rect.width, height: rect.height });
-    }
-  };
+  const handleDismiss = useCallback(() => {
+    setPhase('idle');
+    setUpdateInfo(null);
+    setDownloadProgress(0);
+  }, []);
 
-  // Don't render anything if not in Electron
   if (typeof window === 'undefined' || !(window as any).electron?.updater) {
     return null;
   }
 
-  // Show check button if no update status
-  if (!updateAvailable && !updateReady && !checking) {
+  if (phase === 'idle') {
     return (
       <div
-        className={css.CheckButtonContainer}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
+        className={css.IdleSlot}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
       >
         <button
-          className={css.CheckButton}
-          data-visible={isHovered}
-          onClick={handleCheckForUpdates}
-          aria-label="Check for updates"
-          title="Check for updates"
           type="button"
+          className={css.GhostCheck}
+          data-visible={hovered || isMock ? 'true' : undefined}
+          onClick={handleCheck}
+          title={isMock ? 'Check for updates (mock)' : 'Check for updates'}
+          aria-label="Check for updates"
         >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
             <path
               d="M8 2V10M8 10L5 7M8 10L11 7"
               stroke="currentColor"
@@ -140,109 +138,75 @@ export function UpdateNotification() {
               strokeLinecap="round"
               strokeLinejoin="round"
             />
-            <path
-              d="M3 14H13"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-            />
+            <path d="M3 14H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
           </svg>
         </button>
       </div>
     );
   }
 
-  // Show checking state
-  if (checking) {
+  if (phase === 'checking') {
     return (
-      <button className={css.UpdateButton} disabled type="button">
-        <Spinner variant="Secondary" size="50" />
-      </button>
+      <div className={css.Bar} title="Checking for updates…">
+        <div className={css.BarTrack}>
+          <div className={css.BarIndeterminate} />
+        </div>
+        <Text className={css.BarLabel} size="L400">
+          Checking…
+        </Text>
+      </div>
     );
   }
 
-  // Show update available/ready state
-  if (!updateAvailable && !updateReady) {
-    return null;
+  if (phase === 'downloading') {
+    return (
+      <div
+        className={css.Bar}
+        title={`Downloading update${updateInfo ? ` ${updateInfo.version}` : ''}… ${downloadProgress}%`}
+      >
+        <div className={css.BarTrack}>
+          <div className={css.BarFill} style={{ width: `${downloadProgress}%` }} />
+        </div>
+        <Text className={css.BarLabel} size="L400">
+          {downloadProgress}%
+        </Text>
+      </div>
+    );
   }
 
-  return (
-    <>
-      <button
-        className={css.UpdateButton}
-        onClick={handleMenuToggle}
-        aria-label={updateReady ? 'Update ready' : 'Update available'}
-        title={updateReady ? 'Update downloaded - click to install' : 'New version available'}
-        type="button"
-      >
-        {downloading ? (
-          <Spinner variant="Secondary" size="50" />
-        ) : (
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path
-              d="M8 2V10M8 10L5 7M8 10L11 7"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M3 14H13"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-            />
-          </svg>
-        )}
-      </button>
+  if (phase === 'ready') {
+    return (
+      <Box className={css.Chip} alignItems="Center" gap="100">
+        <Text className={css.ChipText} size="L400" truncate>
+          {isMock ? 'Mock ready' : 'Update ready'}
+          {updateInfo ? ` · ${updateInfo.version}` : ''}
+        </Text>
+        <button type="button" className={css.ChipAction} onClick={handleInstall}>
+          Restart
+        </button>
+      </Box>
+    );
+  }
 
-      <PopOut
-        anchor={menuAnchor}
-        position="Bottom"
-        align="End"
-        offset={8}
-        content={
-          <Menu className={css.UpdateMenu}>
-            <Box direction="Column" gap="200" style={{ padding: config.space.S300 }}>
-              <Box direction="Column" gap="100">
-                <Text size="H5" priority="400">
-                  {updateReady ? 'Update Ready' : 'Update Available'}
-                </Text>
-                {updateInfo && (
-                  <Text size="T200" priority="300">
-                    Version {updateInfo.version}
-                  </Text>
-                )}
-              </Box>
-              
-              {updateReady ? (
-                <Button
-                  variant="Primary"
-                  size="400"
-                  onClick={handleInstall}
-                  fill="Solid"
-                >
-                  <Text size="B400">Install and Restart</Text>
-                </Button>
-              ) : (
-                <Button
-                  variant="Primary"
-                  size="400"
-                  onClick={handleDownload}
-                  disabled={downloading}
-                  fill="Solid"
-                >
-                  <Text size="B400">
-                    {downloading ? `Downloading ${downloadProgress}%` : 'Download Update'}
-                  </Text>
-                </Button>
-              )}
-            </Box>
-          </Menu>
-        }
+  // available
+  return (
+    <Box className={css.Chip} alignItems="Center" gap="100">
+      <Text className={css.ChipText} size="L400" truncate>
+        {isMock ? 'Mock update' : 'Update'}
+        {updateInfo ? ` ${updateInfo.version}` : ''}
+      </Text>
+      <button type="button" className={css.ChipAction} onClick={handleDownload}>
+        Download
+      </button>
+      <button
+        type="button"
+        className={css.ChipDismiss}
+        onClick={handleDismiss}
+        aria-label="Dismiss update"
+        title="Dismiss"
       >
-        {null}
-      </PopOut>
-    </>
+        ×
+      </button>
+    </Box>
   );
 }

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/url-preview/TikTokEmbed.css.tsx

@@ -112,5 +112,7 @@ export const TikTokEmbedContainer = style([
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: '#000',
+    border: 'none',
+    display: 'block',
   },
 ]);

src/app/components/url-preview/TikTokEmbed.tsx

@@ -42,6 +42,12 @@ export function isTikTokUrl(url: string): boolean {
   return TIKTOK_URL_PATTERNS.some((pattern) => pattern.test(url));
 }
 
+function extractTikTokVideoId(url: string, embedHtml = ''): string | null {
+  const urlMatch = url.match(/\/video\/(\d+)/i) ?? url.match(/\/v\/(\d+)/i);
+  const embedMatch = embedHtml.match(/data-video-id=["'](\d+)["']/i);
+  return urlMatch?.[1] ?? embedMatch?.[1] ?? null;
+}
+
 /**
  * Fetches TikTok video metadata using oEmbed API
  * @param url The TikTok video URL
@@ -53,29 +59,39 @@ async function fetchTikTokOEmbed(url: string): Promise<{
   authorUrl: string;
   thumbnailUrl: string;
   embedHtml: string;
+  videoId: string | null;
 } | null> {
   try {
     const oembedUrl = `${TIKTOK_OEMBED_API}?url=${encodeURIComponent(url)}`;
     const response = await fetch(oembedUrl);
     if (!response.ok) return null;
-    
+
     const data = await response.json();
-    
+
     return {
       title: data.title || 'TikTok Video',
       authorName: data.author_name || 'Unknown',
       authorUrl: data.author_url || url,
       thumbnailUrl: data.thumbnail_url || '',
       embedHtml: data.html || '',
+      videoId: extractTikTokVideoId(url, data.html || ''),
     };
   } catch {
     return null;
   }
 }
 
-type TikTokEmbedState = 
+type TikTokEmbedState =
   | { status: 'loading' }
-  | { status: 'loaded'; title: string; authorName: string; authorUrl: string; thumbnailUrl: string; embedHtml: string }
+  | {
+      status: 'loaded';
+      title: string;
+      authorName: string;
+      authorUrl: string;
+      thumbnailUrl: string;
+      embedHtml: string;
+      videoId: string | null;
+    }
   | { status: 'error' };
 
 type TikTokEmbedProps = {
@@ -88,7 +104,7 @@ type TikTokEmbedProps = {
  */
 export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref) => {
   const [state, setState] = useState<TikTokEmbedState>({ status: 'loading' });
-  const [showEmbed, setShowEmbed] = useState(false);
+  const [showPlayer, setShowPlayer] = useState(false);
 
   // Fetch video info on mount
   useEffect(() => {
@@ -96,7 +112,7 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
 
     fetchTikTokOEmbed(url).then((info) => {
       if (cancelled) return;
-      
+
       if (info) {
         setState({
           status: 'loaded',
@@ -105,6 +121,7 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
           authorUrl: info.authorUrl,
           thumbnailUrl: info.thumbnailUrl,
           embedHtml: info.embedHtml,
+          videoId: info.videoId,
         });
       } else {
         setState({ status: 'error' });
@@ -134,9 +151,9 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
             TikTok - Loading...
           </Text>
         </div>
-        <Box 
-          className={css.TikTokThumbnailContainer} 
-          alignItems="Center" 
+        <Box
+          className={css.TikTokThumbnailContainer}
+          alignItems="Center"
           justifyContent="Center"
           style={{ background: '#000', display: 'flex' }}
         >
@@ -169,7 +186,7 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
   }
 
   // Loaded state - show thumbnail or embed
-  if (!showEmbed) {
+  if (!showPlayer) {
     return (
       <Box shrink="No" className={css.TikTokEmbed} direction="Column" {...props} ref={ref}>
         <div className={css.TikTokEmbedHeader}>
@@ -203,23 +220,27 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
         <button
           type="button"
           className={css.TikTokThumbnailButton}
-          onClick={() => setShowEmbed(true)}
-          aria-label="Load TikTok video"
+          onClick={() => setShowPlayer(true)}
+          aria-label="Play TikTok video"
         >
-          {state.thumbnailUrl && (
-            <img 
-              src={state.thumbnailUrl} 
+          {state.thumbnailUrl ? (
+            <img
+              src={state.thumbnailUrl}
               alt={state.title}
               className={css.TikTokThumbnail}
               crossOrigin="anonymous"
             />
-          )}
+          ) : null}
         </button>
       </Box>
     );
   }
 
-  // Show embed (using dangerouslySetInnerHTML for TikTok's oEmbed HTML)
+  const playerUrl = state.videoId
+    ? `https://www.tiktok.com/player/v1/${state.videoId}?autoplay=1`
+    : null;
+
+  // Use TikTok's documented player instead of injecting the oEmbed script.
   return (
     <Box shrink="No" className={css.TikTokEmbed} direction="Column" {...props} ref={ref}>
       <div className={css.TikTokEmbedHeader}>
@@ -236,10 +257,20 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
           {state.title}
         </Text>
       </div>
-      <div 
-        className={css.TikTokEmbedContainer}
-        dangerouslySetInnerHTML={{ __html: state.embedHtml }}
-      />
+      {playerUrl ? (
+        <iframe
+          className={css.TikTokEmbedContainer}
+          src={playerUrl}
+          title="TikTok video player"
+          allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
+          allowFullScreen
+        />
+      ) : (
+        <div
+          className={css.TikTokEmbedContainer}
+          dangerouslySetInnerHTML={{ __html: state.embedHtml }}
+        />
+      )}
     </Box>
   );
 });

src/app/components/user-avatar/UserAvatar.tsx

@@ -1,18 +1,21 @@
 import { AvatarFallback, AvatarImage, color } from 'folds';
 import React, { ReactEventHandler, ReactNode, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { Blurhash } from 'react-blurhash';
 import * as css from './UserAvatar.css';
 import colorMXID from '../../../util/colorMXID';
 import { useAuthenticatedMediaUrl } from '../../hooks/useAuthenticatedMediaUrl';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { cacheAvatar, isAvatarCached, pruneAvatarCache } from '../../utils/avatarCache';
-
-// Check if image is already in browser cache
-function isImageInBrowserCache(url: string): boolean {
-  const img = new Image();
-  img.src = url;
-  return img.complete && img.naturalWidth > 0;
-}
+import {
+  getCachedAuthenticatedMediaUrl,
+  isAuthenticatedMediaUrl,
+} from '../../utils/authenticatedMediaCache';
+import {
+  getMediaBlurHash,
+  getMediaDimensions,
+  rememberMediaBlurHash,
+} from '../../state/mediaDimensionCache';
 
 type UserAvatarProps = {
   className?: string;
@@ -25,20 +28,28 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
   const [error, setError] = useState(false);
   const useAuthentication = useMediaAuthentication();
   const authenticatedSrc = useAuthenticatedMediaUrl(src, useAuthentication);
-  
-  // Check both our cache and browser's native cache
-  const [loaded, setLoaded] = useState(() => {
-    if (isAvatarCached(src)) return true;
-    if (authenticatedSrc && isImageInBrowserCache(authenticatedSrc)) {
-      cacheAvatar(src);
-      return true;
+  const blurHash = getMediaBlurHash(src ?? '');
+  const dims = getMediaDimensions(src ?? '');
+  const blobCached =
+    !!src &&
+    (!useAuthentication ||
+      !isAuthenticatedMediaUrl(src) ||
+      !!getCachedAuthenticatedMediaUrl(src));
+
+  const [loaded, setLoaded] = useState(() => isAvatarCached(src) || blobCached);
+
+  useEffect(() => {
+    if (
+      authenticatedSrc &&
+      (isAvatarCached(src) ||
+        (src && (!useAuthentication || !isAuthenticatedMediaUrl(src) || getCachedAuthenticatedMediaUrl(src))))
+    ) {
+      setLoaded(true);
     }
-    return false;
-  });
-  
+  }, [authenticatedSrc, src, useAuthentication]);
+
   const imgRef = useRef<HTMLImageElement>(null);
 
-  // Also check on mount if image is already complete (browser cached)
   useEffect(() => {
     if (!loaded && imgRef.current?.complete && imgRef.current?.naturalWidth > 0) {
       setLoaded(true);
@@ -51,10 +62,10 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
     setLoaded(true);
     cacheAvatar(src);
     pruneAvatarCache();
+    rememberMediaBlurHash(src ?? '', evt.currentTarget);
   };
 
-  // No src or error - show fallback only
-  if (!authenticatedSrc || error) {
+  if (!src || error) {
     return (
       <AvatarFallback
         style={{ backgroundColor: colorMXID(userId), color: color.Surface.Container }}
@@ -65,8 +76,7 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
     );
   }
 
-  // If already cached, show image directly without fallback flash
-  if (loaded) {
+  if (authenticatedSrc && loaded) {
     return (
       <AvatarImage
         className={classNames(css.UserAvatar, className)}
@@ -80,13 +90,17 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
     );
   }
 
-  // Loading state - render image with hidden fallback behind it
-  // Image loads invisibly, then we show it once complete
+  const blurResolutionX = 32;
+  const blurResolutionY =
+    dims?.w && dims?.h && dims.w > 0
+      ? Math.max(1, Math.round(blurResolutionX * (dims.h / dims.w)))
+      : 32;
+
   return (
     <div style={{ position: 'relative', width: '100%', height: '100%' }}>
       <AvatarFallback
-        style={{ 
-          backgroundColor: colorMXID(userId), 
+        style={{
+          backgroundColor: colorMXID(userId),
           color: color.Surface.Container,
           position: 'absolute',
           inset: 0,
@@ -95,16 +109,40 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
       >
         {renderFallback()}
       </AvatarFallback>
-      <AvatarImage
-        ref={imgRef}
-        className={classNames(css.UserAvatar, className)}
-        style={{ position: 'relative', zIndex: 1 }}
-        src={authenticatedSrc}
-        alt={alt}
-        onError={() => setError(true)}
-        onLoad={handleLoad}
-        draggable={false}
-      />
+      {blurHash && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            overflow: 'hidden',
+            borderRadius: 'inherit',
+            filter: 'blur(6px)',
+            transform: 'scale(1.08)',
+          }}
+        >
+          <Blurhash
+            hash={blurHash}
+            width="100%"
+            height="100%"
+            resolutionX={blurResolutionX}
+            resolutionY={blurResolutionY}
+            punch={1.1}
+            style={{ display: 'block' }}
+          />
+        </div>
+      )}
+      {authenticatedSrc && (
+        <AvatarImage
+          ref={imgRef}
+          className={classNames(css.UserAvatar, className)}
+          style={{ position: 'relative', zIndex: 1, opacity: loaded ? 1 : 0 }}
+          src={authenticatedSrc}
+          alt={alt}
+          onError={() => setError(true)}
+          onLoad={handleLoad}
+          draggable={false}
+        />
+      )}
     </div>
   );
 }

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 { Avatar, Box, Modal, Overlay, OverlayBackdrop, OverlayCenter, Text, toRem } from 'folds';
+import React, { ReactNode, useState } from 'react';
+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 profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
-
-  console.log('[UserHero]', {
-    userId,
-    avatarMxc,
-    bannerUrl,
-    profileStyle,
-  });
+  const bannerUrl = useOtherUserBanner(userId);
+  const { assetUrls } = useOtherUserCollectibles(userId);
+  const avatarDecorationUrl = pickAvatarDecorationUrl(assetUrls);
 
   return (
-    <Box
-      direction="Column"
-      className={css.UserHero}
-    >
+    <Box direction="Column" className={css.UserHeroZone}>
+      {bannerUrl && (
+        <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}
-          style={profileStyle.avatarBorderColor ? { backgroundColor: profileStyle.avatarBorderColor } : undefined}
-          badgeBackgroundColor={profileStyle.avatarBorderColor}
+          className={classNames(
+            css.UserAvatarContainer,
+            !avatarUrl && css.UserAvatarContainerFallback
+          )}
           badge={
             presence && <PresenceBadge presence={presence.presence} status={presence.status} />
           }
         >
-          <Avatar
-            as={avatarUrl ? 'button' : 'div'}
-            onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
-            className={css.UserHeroAvatar}
-            size="500"
-            style={{
-              width: toRem(72),
-              height: toRem(72),
-              ...(profileStyle.avatarBorderColor ? {
-                outline: `${toRem(4)} solid ${profileStyle.avatarBorderColor}`,
-                outlineOffset: toRem(-1),
-              } : {}),
-            }}
-          >
-            <UserAvatar
-              className={css.UserHeroAvatarImg}
-              userId={userId}
-              src={avatarUrl}
-              alt={userId}
-              renderFallback={() => <Icon size="500" src={Icons.User} filled />}
-            />
-          </Avatar>
+          <div className={css.UserHeroAvatarStack}>
+            <Avatar
+              as={avatarUrl ? 'button' : 'div'}
+              onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
+              className={classNames(
+                css.UserHeroAvatar,
+                avatarUrl ? css.UserHeroAvatarWithImage : css.UserHeroAvatarBorder
+              )}
+              size="500"
+              style={{
+                width: toRem(72),
+                height: toRem(72),
+              }}
+            >
+              <UserAvatar
+                className={css.UserHeroAvatarImg}
+                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}
+              />
+            )}
+          </div>
         </AvatarPresence>
         {viewAvatar && (
-          <Overlay open backdrop={<OverlayBackdrop />}>
-            <OverlayCenter>
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setViewAvatar(undefined),
-                  clickOutsideDeactivates: true,
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Modal size="500" onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}>
-                  <ImageViewer
-                    src={viewAvatar}
-                    alt={userId}
-                    requestClose={() => setViewAvatar(undefined)}
-                  />
-                </Modal>
-              </FocusTrap>
-            </OverlayCenter>
+          <Overlay open backdrop={null}>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setViewAvatar(undefined),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <ImageViewer
+                src={viewAvatar}
+                alt={userId}
+                requestClose={() => setViewAvatar(undefined)}
+              />
+            </FocusTrap>
           </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);
-
-  console.log('[UserHeroName]', {
-    userId,
-    avatarMxc,
-    userColor,
-    fallbackColor: colorMXID(userId),
-  });
+  const userColor = useOtherUserColor(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, avatarMxc);
-
-  // Build gradient CSS if configured
-  const gradientStyle = profileStyle.gradient
-    ? `linear-gradient(${profileStyle.gradient.direction}, ${profileStyle.gradient.startColor}, ${profileStyle.gradient.stopColor})`
-    : undefined;
+  const userColor = useOtherUserColor(userId);
 
   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 */}
-        <Text
-          size="H4"
-          className={classNames(BreakWord, LineClamp3)}
-          style={{ color: getMemberDisplayName(room, userId) !== userId ? profileColor : undefined, textShadow: profileTextShadow }}
+        <Box
+          direction="Column"
+          gap="200"
+          alignItems="Center"
+          style={{
+            padding: config.space.S400,
+            paddingTop: `calc(${config.space.S200} + ${toRem(36)})`,
+            marginTop: toRem(-36),
+          }}
         >
-          {getMemberDisplayName(room, userId)}
-        </Text>
-        
-        {/* Username */}
-        <Text
-          size="T200"
-          className={BreakWord}
-          style={{ color: profileColor, textShadow: profileTextShadow }}
-        >
-          {userId}
-        </Text>
-        
-        {/* Status Pill */}
-        {presence?.status && (
-          <Box
+          <Text
+            size="H4"
+            className={classNames(BreakWord, LineClamp3)}
             style={{
-              backgroundColor: pillBgColor || color.Surface.Container,
-              border: pillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
-              padding: `${toRem(6)} ${toRem(10)}`,
-              borderRadius: toRem(16),
-              maxWidth: toRem(250),
+              color: getMemberDisplayName(room, userId) !== userId ? profileColor : undefined,
+              textShadow: profileTextShadow,
             }}
           >
-            <Text 
-              size="T300" 
-              className={BreakWord}
+            {getMemberDisplayName(room, userId)}
+          </Text>
+
+          <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>
-          </Box>
-        )}
-        
+              <Text size="T300" className={BreakWord}>
+                {presence.status}
+              </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} />}
-          <ShareChip userId={userId} borderColor={pillBgColor} />
-          {creator ? <CreatorChip borderColor={pillBgColor} /> : <PowerChip userId={userId} borderColor={pillBgColor} />}
+          {server && <ServerChip server={server} />}
+          <ShareChip userId={userId} />
+          {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} />
-            <OptionsChip userId={userId} borderColor={pillBgColor} />
+            <MutualRoomsChip userId={userId} />
+            <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());
-        FileSaver.saveAs(fileContent, alt);
+        await downloadAndSaveMedia(src, alt, getCurrentAccessToken());
       } 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/components/virtualizer/VirtualTile.tsx

@@ -11,7 +11,7 @@ export const VirtualTile = as<'div', VirtualTileProps>(
   ({ className, virtualItem, style, ...props }, ref) => (
     <div
       className={classNames(css.VirtualTile, className)}
-      style={{ top: virtualItem.start, ...style }}
+      style={{ top: virtualItem.start, zIndex: virtualItem.index, ...style }}
       data-index={virtualItem.index}
       {...props}
       ref={ref}

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/MessageSearch.tsx

@@ -16,7 +16,7 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { ScrollTopContainer } from '../../components/scroll-top-container';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { decodeSearchParamValueArray, encodeSearchParamValueArray } from '../../pages/pathUtils';
-import { useRooms } from '../../state/hooks/roomList';
+import { useRooms, useDirects } from '../../state/hooks/roomList';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { mDirectAtom } from '../../state/mDirectList';
 import { MessageSearchParams, useMessageSearch } from './useMessageSearch';
@@ -53,7 +53,13 @@ export function MessageSearch({
 }: MessageSearchProps) {
   const mx = useMatrixClient();
   const mDirects = useAtomValue(mDirectAtom);
-  const allRooms = useRooms(mx, allRoomsAtom, mDirects);
+  const nonDirectRooms = useRooms(mx, allRoomsAtom, mDirects);
+  const directRooms = useDirects(mx, allRoomsAtom, mDirects);
+  // Include DMs — previously useRooms alone stripped them and broke DM search
+  const allRooms = useMemo(
+    () => [...nonDirectRooms, ...directRooms],
+    [nonDirectRooms, directRooms]
+  );
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');

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/message-search/useMessageSearch.ts

@@ -4,6 +4,9 @@ import {
   ISearchRequestBody,
   ISearchResponse,
   ISearchResult,
+  MatrixClient,
+  MatrixEvent,
+  Room,
   SearchOrderBy,
 } from 'matrix-js-sdk';
 import { useCallback } from 'react';
@@ -26,6 +29,12 @@ export type SearchResult = {
   groups: ResultGroup[];
 };
 
+const EMPTY_CONTEXT: IResultContext = {
+  events_before: [],
+  events_after: [],
+  profile_info: {},
+};
+
 const groupSearchResult = (results: ISearchResult[]): ResultGroup[] => {
   const groups: ResultGroup[] = [];
 
@@ -54,13 +63,108 @@ const groupSearchResult = (results: ISearchResult[]): ResultGroup[] => {
 const parseSearchResult = (result: ISearchResponse): SearchResult => {
   const roomEvents = result.search_categories.room_events;
 
-  const searchResult: SearchResult = {
+  return {
     nextToken: roomEvents?.next_batch,
     highlights: roomEvents?.highlights ?? [],
     groups: groupSearchResult(roomEvents?.results ?? []),
   };
+};
 
-  return searchResult;
+const eventToSearchEvent = (event: MatrixEvent, roomId: string): IEventWithRoomId | undefined => {
+  const eventId = event.getId();
+  if (!eventId) return undefined;
+
+  const content = event.getClearContent() ?? event.getContent();
+  return {
+    event_id: eventId,
+    type: event.getWireType() === 'm.room.encrypted' ? 'm.room.message' : event.getType(),
+    sender: event.getSender() ?? '',
+    origin_server_ts: event.getTs(),
+    content,
+    room_id: roomId,
+    unsigned: event.getUnsigned(),
+  };
+};
+
+const getSearchableBody = (event: MatrixEvent): string | undefined => {
+  if (event.isRedacted()) return undefined;
+
+  // After decryption, clear content is available even if wire type was encrypted
+  const content = event.getClearContent() ?? event.getContent();
+  if (!content || typeof content !== 'object') return undefined;
+
+  // Skip still-encrypted payloads
+  if (event.isEncrypted() && !event.isDecryptionFailure() && !event.getClearContent()) {
+    return undefined;
+  }
+
+  const msgType = content.msgtype;
+  if (msgType && msgType !== 'm.text' && msgType !== 'm.notice' && msgType !== 'm.emote') {
+    // Still allow filename / body on media
+  }
+
+  const body = typeof content.body === 'string' ? content.body : undefined;
+  const formatted =
+    typeof content.formatted_body === 'string' ? content.formatted_body : undefined;
+  return [body, formatted].filter(Boolean).join('\n') || undefined;
+};
+
+const highlightsFromTerm = (term: string): string[] =>
+  term
+    .split(/\s+/)
+    .map((part) => part.trim())
+    .filter((part) => part.length > 1);
+
+/**
+ * Search decrypted timeline events already loaded for a room.
+ * Server-side search cannot match E2EE message bodies.
+ */
+const searchLocalRoomTimeline = (room: Room, term: string): ResultItem[] => {
+  const needle = term.trim().toLowerCase();
+  if (!needle) return [];
+
+  const events = room.getLiveTimeline().getEvents();
+  const matches: ResultItem[] = [];
+
+  for (let i = events.length - 1; i >= 0; i -= 1) {
+    const event = events[i];
+    const haystack = getSearchableBody(event);
+    if (!haystack || !haystack.toLowerCase().includes(needle)) continue;
+
+    const searchEvent = eventToSearchEvent(event, room.roomId);
+    if (!searchEvent) continue;
+
+    matches.push({
+      rank: 1,
+      event: searchEvent,
+      context: EMPTY_CONTEXT,
+    });
+  }
+
+  return matches;
+};
+
+const isEncryptedRoom = (mx: MatrixClient, roomId: string): boolean => {
+  const room = mx.getRoom(roomId);
+  return !!room?.hasEncryptionStateEvent();
+};
+
+const searchLocalRooms = (mx: MatrixClient, roomIds: string[], term: string): SearchResult => {
+  const groups: ResultGroup[] = [];
+
+  roomIds.forEach((roomId) => {
+    const room = mx.getRoom(roomId);
+    if (!room) return;
+    const items = searchLocalRoomTimeline(room, term);
+    if (items.length > 0) {
+      groups.push({ roomId, items });
+    }
+  });
+
+  return {
+    highlights: highlightsFromTerm(term),
+    groups,
+  };
 };
 
 export type MessageSearchParams = {
@@ -69,19 +173,30 @@ export type MessageSearchParams = {
   rooms?: string[];
   senders?: string[];
 };
+
 export const useMessageSearch = (params: MessageSearchParams) => {
   const mx = useMatrixClient();
   const { term, order, rooms, senders } = params;
 
   const searchMessages = useCallback(
     async (nextBatch?: string) => {
-      if (!term)
+      if (!term) {
         return {
           highlights: [],
           groups: [],
         };
-      const limit = 20;
+      }
 
+      const scopedRooms = rooms?.filter(Boolean) ?? [];
+      const encryptedScoped =
+        scopedRooms.length > 0 && scopedRooms.every((roomId) => isEncryptedRoom(mx, roomId));
+
+      // Encrypted-only scope: server cannot see bodies — search loaded timeline locally
+      if (encryptedScoped && !nextBatch) {
+        return searchLocalRooms(mx, scopedRooms, term);
+      }
+
+      const limit = 20;
       const requestBody: ISearchRequestBody = {
         search_categories: {
           room_events: {
@@ -102,11 +217,33 @@ export const useMessageSearch = (params: MessageSearchParams) => {
         },
       };
 
-      const r = await mx.search({
-        body: requestBody,
-        next_batch: nextBatch === '' ? undefined : nextBatch,
-      });
-      return parseSearchResult(r);
+      try {
+        const r = await mx.search({
+          body: requestBody,
+          next_batch: nextBatch === '' ? undefined : nextBatch,
+        });
+        const parsed = parseSearchResult(r);
+
+        if (
+          parsed.groups.length === 0 &&
+          !nextBatch &&
+          scopedRooms.length > 0 &&
+          scopedRooms.some((roomId) => isEncryptedRoom(mx, roomId))
+        ) {
+          return searchLocalRooms(
+            mx,
+            scopedRooms.filter((id) => isEncryptedRoom(mx, id)),
+            term
+          );
+        }
+
+        return parsed;
+      } catch {
+        if (!nextBatch && scopedRooms.length > 0) {
+          return searchLocalRooms(mx, scopedRooms, term);
+        }
+        throw new Error('Message search failed');
+      }
     },
     [mx, term, order, rooms, senders]
   );

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-nav/RoomNavCategoryButton.tsx

@@ -10,6 +10,7 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
       className={classNames(css.CategoryButton, className)}
       variant="Background"
       radii="Pill"
+      data-nav-category-btn=""
       before={
         <Icon
           className={css.CategoryButtonIcon}

src/app/features/room-nav/UnjoinedSubRoomItem.tsx

@@ -41,7 +41,13 @@ export function UnjoinedSubRoomItem({ roomId, depth, isLast = false }: UnjoinedS
 
   return (
     <Box
-      style={{ paddingLeft, padding: `${config.space.S100} ${config.space.S200}`, minHeight: '1.5rem' }}
+      data-nav-depth={depth}
+      style={{
+        paddingLeft,
+        padding: `${config.space.S100} ${config.space.S200}`,
+        minHeight: '1.5rem',
+        position: 'relative',
+      }}
       alignItems="Center"
       gap="200"
     >

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,11 +1,12 @@
-import React, { useCallback, useEffect } from 'react';
-import { Box, Line } from 'folds';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box, Button, Line, Text, config } from 'folds';
 import { decodeRouteParam } from '../../pages/pathUtils';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
-import { useSetAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 import { RoomView } from './RoomView';
 import { MembersDrawer } from './MembersDrawer';
+import { MediaDrawer } from './room-media-menu';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
@@ -16,8 +17,12 @@ import { useMarkAsRead } from '../../hooks/useMarkAsRead';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { activeRoomIdAtom } from '../../state/activeRoom';
-import { isForum } from '../../utils/room';
+import { isMediaDrawerAtom } from '../../state/mediaDrawer';
+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();
@@ -26,13 +31,28 @@ export function Room() {
   const mx = useMatrixClient();
   const setActiveRoomId = useSetAtom(activeRoomIdAtom);
 
-  const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+  const [isPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+  const [isMediaDrawer] = useAtom(isMediaDrawerAtom);
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const screenSize = useScreenSizeContext();
   const powerLevels = usePowerLevels(room);
   const members = useRoomMembers(mx, room.roomId);
   const markAsRead = useMarkAsRead(mx);
   const forumRoom = isForum(room);
+  const skinny = screenSize !== ScreenSize.Desktop;
+  const showMediaSolo = skinny && isMediaDrawer;
+  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(() => {
@@ -55,11 +75,49 @@ export function Room() {
   return (
     <PowerLevelsContextProvider value={powerLevels}>
       <Box grow="Yes">
-        {forumRoom ? <ForumRoomView room={room} eventId={eventId} /> : <RoomView room={room} eventId={eventId} />}
-        {screenSize === ScreenSize.Desktop && isDrawer && (
+        {!showMediaSolo &&
+          (showAppView ? (
+            <RoomAppView room={room} onShowChat={() => setPreferChat(true)} />
+          ) : forumRoom ? (
+            <ForumRoomView 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 && (
           <>
             <Line variant="Background" direction="Vertical" size="300" />
-            <MembersDrawer key={room.roomId} room={room} members={members} />
+            {isMediaDrawer ? (
+              <MediaDrawer room={room} />
+            ) : (
+              <MembersDrawer key={room.roomId} room={room} members={members} />
+            )}
           </>
         )}
       </Box>

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

@@ -0,0 +1,17 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { color, config } from 'folds';
+import * as editorCss from '../../components/editor/Editor.css';
+
+export const RoomInputWrap = style({
+  width: '100%',
+});
+
+/* Notebook-flat composer chrome — Stationery only (other themes keep Editor inset border) */
+globalStyle(`.stationery ${RoomInputWrap} .${editorCss.Editor}`, {
+  borderRadius: 0,
+  boxShadow: 'none',
+  borderTop: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+  borderLeft: 'none',
+  borderRight: 'none',
+  borderBottom: 'none',
+});

src/app/features/room/RoomInput.tsx

@@ -45,7 +45,6 @@ import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import {
   TUploadContent,
-  encryptFile,
   getImageInfo,
   getMxIdLocalPart,
   mxcUrlToHttp,
@@ -54,6 +53,7 @@ import { useTypingStatusUpdater } from '../../hooks/useTypingStatusUpdater';
 import { useFilePicker } from '../../hooks/useFilePicker';
 import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
 import { useFileDropZone } from '../../hooks/useFileDrop';
+import { useRoomUploadFiles } from '../../hooks/useRoomUploadFiles';
 import {
   TUploadItem,
   TUploadMetadata,
@@ -76,7 +76,6 @@ import {
   createUploadFamilyObserverAtom,
 } from '../../state/upload';
 import { getImageUrlBlob, loadImageElement } from '../../utils/dom';
-import { safeFile } from '../../utils/mimeTypes';
 import { fulfilledPromiseSettledResult } from '../../utils/common';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
@@ -101,13 +100,25 @@ import colorMXID from '../../../util/colorMXID';
 import { useIsDirectRoom } from '../../hooks/useRoom';
 import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useTheme } from '../../hooks/useTheme';
+import { isStationeryTheme, useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useComposingCheck } from '../../hooks/useComposingCheck';
 import { useOtherUserColor } from '../../hooks/useUserColor';
 import { getMemberAvatarMxc } from '../../utils/room';
 import { convertEmoticons, convertEmoticonsInHtml } from '../../utils/emoticonConverter';
+import * as css from './RoomInput.css';
+
+/**
+ * Creates a UUID used to group image events into one carousel.
+ */
+const createCarouselUuid = (): string => {
+  if (typeof globalThis.crypto?.randomUUID === 'function') {
+    return globalThis.crypto.randomUUID();
+  }
+
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+};
 
 interface RoomInputProps {
   editor: Editor;
@@ -172,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
@@ -212,42 +223,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       });
     }, [commands]);
 
+    const { handleFiles: enqueueFiles } = useRoomUploadFiles(room);
     const handleFiles = useCallback(
       async (files: File[]) => {
         setUploadBoard(true);
-        const safeFiles = files.map(safeFile);
-        const fileItems: TUploadItem[] = [];
-
-        if (room.hasEncryptionStateEvent()) {
-          const encryptFiles = fulfilledPromiseSettledResult(
-            await Promise.allSettled(safeFiles.map((f) => encryptFile(f)))
-          );
-          encryptFiles.forEach((ef) =>
-            fileItems.push({
-              ...ef,
-              metadata: {
-                markedAsSpoiler: false,
-              },
-            })
-          );
-        } else {
-          safeFiles.forEach((f) =>
-            fileItems.push({
-              file: f,
-              originalFile: f,
-              encInfo: undefined,
-              metadata: {
-                markedAsSpoiler: false,
-              },
-            })
-          );
-        }
-        setSelectedFiles({
-          type: 'PUT',
-          item: fileItems,
-        });
+        await enqueueFiles(files);
       },
-      [setSelectedFiles, room]
+      [enqueueFiles]
     );
     const pickFile = useFilePicker(handleFiles, true);
     const handlePaste = useFilePasteHandler(handleFiles);
@@ -306,12 +288,34 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     };
 
     const handleSendUpload = async (uploads: UploadSuccess[]) => {
+      const imageUploads = uploads.filter((upload) => {
+        const fileItem = selectedFiles.find((f) => f.file === upload.file);
+        return !!fileItem && fileItem.file.type.startsWith('image');
+      });
+      const carouselUuid = imageUploads.length > 1 ? createCarouselUuid() : undefined;
+      const imageUploadIndexByFile = new Map(
+        imageUploads.map((upload, index) => [upload.file, index] as const)
+      );
+
       const contentsPromises = uploads.map(async (upload) => {
         const fileItem = selectedFiles.find((f) => f.file === upload.file);
         if (!fileItem) throw new Error('Broken upload');
 
         if (fileItem.file.type.startsWith('image')) {
-          return getImageMsgContent(mx, fileItem, upload.mxc);
+          const imageIndex = imageUploadIndexByFile.get(upload.file);
+
+          return getImageMsgContent(
+            mx,
+            fileItem,
+            upload.mxc,
+            carouselUuid !== undefined && imageIndex !== undefined
+              ? {
+                  uuid: carouselUuid,
+                  index: imageIndex,
+                  total: imageUploads.length,
+                }
+              : undefined
+          );
         }
         if (fileItem.file.type.startsWith('video')) {
           return getVideoMsgContent(mx, fileItem, upload.mxc);
@@ -584,7 +588,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     };
 
     return (
-      <div ref={ref}>
+      <div ref={ref} className={css.RoomInputWrap}>
         {selectedFiles.length > 0 && (
           <UploadBoard
             header={
@@ -690,8 +694,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     backgroundColor: color.SurfaceVariant.Container,
                     border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
                     borderBottom: 'none',
-                    borderTopLeftRadius: config.radii.R400,
-                    borderTopRightRadius: config.radii.R400,
+                    borderRadius: isStationeryTheme(theme) ? 0 : undefined,
+                    borderTopLeftRadius: isStationeryTheme(theme) ? undefined : config.radii.R400,
+                    borderTopRightRadius: isStationeryTheme(theme) ? undefined : config.radii.R400,
                     marginBottom: config.space.S100,
                   }}
                   direction="Column"

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

@@ -5,6 +5,6 @@ export const RoomInputPlaceholder = style({
   minHeight: toRem(48),
   backgroundColor: color.SurfaceVariant.Container,
   color: color.SurfaceVariant.OnContainer,
-  boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
-  borderRadius: config.radii.R400,
+  borderTop: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+  borderRadius: 0,
 });

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

@@ -9,7 +9,8 @@ export const TimelineFloat = recipe({
       position: 'absolute',
       left: '50%',
       transform: 'translateX(-50%)',
-      zIndex: 1,
+      // Above timeline media carousels / sticky message chrome
+      zIndex: 10,
       minWidth: 'max-content',
     },
   ],
@@ -28,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

@@ -85,7 +85,6 @@ import {
   useIntersectionObserver,
 } from '../../hooks/useIntersectionObserver';
 import { useMarkAsRead } from '../../hooks/useMarkAsRead';
-import { useDebounce } from '../../hooks/useDebounce';
 import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
 import * as css from './RoomTimeline.css';
 import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
@@ -103,6 +102,14 @@ import { useInertialHorizontalScroll } from '../../hooks/useInertialHorizontalSc
 import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
+import {
+  clearRoomReturnAnchor,
+  clearRoomScrollState,
+  getRoomReturnAnchor,
+  getRoomScrollState,
+  saveRoomScrollState,
+  setRoomReturnAnchor,
+} from '../../state/roomScrollCache';
 import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
@@ -110,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';
@@ -130,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 {
@@ -561,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');
@@ -575,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');
@@ -620,6 +640,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const location = useLocation();
   const scrollToLatest = (location.state as { scrollToLatest?: boolean } | null)?.scrollToLatest;
 
+  const savedScrollRef = useRef(
+    eventId || scrollToLatest ? undefined : getRoomScrollState(room.roomId)
+  );
+
   const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
 
   const [unreadInfo, setUnreadInfo] = useState(() =>
@@ -631,7 +655,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   }
 
   const atBottomAnchorRef = useRef<HTMLElement>(null);
-  const [atBottom, setAtBottom] = useState<boolean>(true);
+  const [atBottom, setAtBottom] = useState<boolean>(
+    () => savedScrollRef.current?.atBottom ?? true
+  );
   const atBottomRef = useRef(atBottom);
   atBottomRef.current = atBottom;
 
@@ -639,16 +665,54 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     sender: string;
     content: string;
   } | null>(null);
+  const [returnToEventId, setReturnToEventIdState] = useState<string | null>(
+    () => getRoomReturnAnchor(room.roomId) ?? null
+  );
+
+  const setReturnToEventId = useCallback(
+    (eventId: string | null) => {
+      if (eventId) setRoomReturnAnchor(room.roomId, eventId);
+      else clearRoomReturnAnchor(room.roomId);
+      setReturnToEventIdState(eventId);
+    },
+    [room.roomId]
+  );
 
   const scrollRef = useRef<HTMLDivElement>(null);
   const timelineContentRef = useRef<HTMLDivElement>(null);
   const timelineContentHeightRef = useRef(0);
+  const restoringScrollRef = useRef(false);
   const scrollToBottomRef = useRef({
     count: 0,
     smooth: true,
     force: false,
   });
 
+  const getViewportAnchorEventId = useCallback((): string | undefined => {
+    const scrollEl = scrollRef.current;
+    if (!scrollEl) return undefined;
+
+    const scrollRect = scrollEl.getBoundingClientRect();
+    const centerY = scrollRect.top + scrollRect.height / 2;
+    const items = scrollEl.querySelectorAll<HTMLElement>('[data-message-id]');
+
+    let bestId: string | undefined;
+    let bestDist = Infinity;
+
+    items.forEach((el) => {
+      const rect = el.getBoundingClientRect();
+      if (rect.bottom < scrollRect.top || rect.top > scrollRect.bottom) return;
+      const mid = (rect.top + rect.bottom) / 2;
+      const dist = Math.abs(mid - centerY);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestId = el.getAttribute('data-message-id') ?? undefined;
+      }
+    });
+
+    return bestId;
+  }, []);
+
   const [focusItem, setFocusItem] = useState<
     | {
         index: number;
@@ -680,9 +744,49 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   );
   const parseMemberEvent = useMemberEventParser();
 
-  const [timeline, setTimeline] = useState<Timeline>(() =>
-    eventId ? getEmptyTimeline() : getInitialTimeline(room)
+  const [timeline, setTimeline] = useState<Timeline>(() => {
+    if (eventId) return getEmptyTimeline();
+    const initial = getInitialTimeline(room);
+    const saved = savedScrollRef.current;
+    if (!saved?.range) return initial;
+
+    const evLength = getTimelinesEventsCount(initial.linkedTimelines);
+    if (evLength === 0) return initial;
+
+    const start = Math.min(saved.range.start, Math.max(0, evLength - 1));
+    const end = Math.min(Math.max(start + 1, saved.range.end), evLength);
+
+    return { ...initial, range: { start, end } };
+  });
+  const timelineRef = useRef(timeline);
+  timelineRef.current = timeline;
+
+  const getRangeCenterEventId = useCallback((): string | undefined => {
+    const { linkedTimelines, range } = timelineRef.current;
+    if (range.end <= range.start) return undefined;
+    const mid = Math.floor((range.start + range.end - 1) / 2);
+    const [tm, baseIndex] = getTimelineAndBaseIndex(linkedTimelines, mid);
+    if (!tm) return undefined;
+    return getTimelineEvent(tm, getTimelineRelativeIndex(mid, baseIndex))?.getId();
+  }, []);
+
+  const persistTimelineScroll = useCallback(
+    (roomId: string) => {
+      if (eventId) return;
+      const scrollEl = scrollRef.current;
+      if (!scrollEl) return;
+
+      const distanceFromBottom =
+        scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight;
+      saveRoomScrollState(roomId, {
+        top: scrollEl.scrollTop,
+        atBottom: distanceFromBottom <= 50,
+        range: timelineRef.current.range,
+      });
+    },
+    [eventId]
   );
+
   const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines);
   const liveTimelineLinked =
     timeline.linkedTimelines[timeline.linkedTimelines.length - 1] === getLiveTimeline(room);
@@ -693,6 +797,20 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const atLiveEndRef = useRef(liveTimelineLinked && rangeAtEnd);
   atLiveEndRef.current = liveTimelineLinked && rangeAtEnd;
 
+  // Historical / non-live windows are never "at bottom" of the room.
+  // When we return to the live end, re-check scroll — IntersectionObserver may
+  // not re-fire if the anchor stayed intersecting across the transition.
+  useEffect(() => {
+    if (!liveTimelineLinked || !rangeAtEnd) {
+      setAtBottom(false);
+      return;
+    }
+    const scrollEl = scrollRef.current;
+    if (scrollEl && isScrolledToBottom(scrollEl, 100)) {
+      setAtBottom(true);
+    }
+  }, [liveTimelineLinked, rangeAtEnd]);
+
   const handleTimelinePagination = useTimelinePagination(
     mx,
     timeline,
@@ -757,6 +875,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const isOwnMessage = mEvt.getSender() === mx.getUserId();
         const isBottomPinnedEvent =
           mEvt.getType() === MessageEvent.RoomMessage || mEvt.getType() === MessageEvent.Sticker;
+        const wasAwayFromBottom = !atBottomRef.current;
         const shouldStickToBottom = atBottomRef.current || (isOwnMessage && isBottomPinnedEvent);
 
         // Always update timeline with new message
@@ -777,6 +896,14 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
               requestAnimationFrame(() => markAsRead(roomId, hideActivity));
             }
           }
+          // Sending while scrolled up jumps to latest — offer return to previous spot
+          if (wasAwayFromBottom && isBottomPinnedEvent) {
+            const anchorEventId =
+              eventId ?? getViewportAnchorEventId() ?? getRangeCenterEventId();
+            if (anchorEventId) {
+              setReturnToEventId(anchorEventId);
+            }
+          }
         } else if (!document.hasFocus() && !unreadInfo) {
           // Show unread notification for other users' messages when unfocused
           setUnreadInfo(getRoomUnreadInfo(room));
@@ -803,7 +930,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           });
         }
       },
-      [mx, room, unreadInfo, hideActivity, markAsRead]
+      [mx, room, unreadInfo, hideActivity, markAsRead, eventId, getViewportAnchorEventId, getRangeCenterEventId, setReturnToEventId]
     )
   );
 
@@ -861,6 +988,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const scrollElement = getScrollElement();
         if (!editorBaseEntry || !scrollElement) return;
 
+        if (restoringScrollRef.current) return;
+
         if (isScrolledToBottom(scrollElement)) {
           autoScrollToBottom(scrollElement, false, true);
         }
@@ -882,6 +1011,18 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       const previousHeight = timelineContentHeightRef.current;
       timelineContentHeightRef.current = nextHeight;
 
+      if (restoringScrollRef.current) {
+        const saved = savedScrollRef.current;
+        if (saved) {
+          if (saved.atBottom) {
+            scrollElement.scrollTop = scrollElement.scrollHeight;
+          } else {
+            scrollElement.scrollTop = saved.top;
+          }
+        }
+        return;
+      }
+
       if (previousHeight === 0 || nextHeight <= previousHeight || !isScrolledToBottom(scrollElement)) {
         return;
       }
@@ -904,30 +1045,32 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     }
   }, [room, hideActivity, markAsRead]);
 
-  const debounceSetAtBottom = useDebounce(
-    useCallback((entry: IntersectionObserverEntry) => {
-      if (!entry.isIntersecting) {
-        setAtBottom(false);
-      }
-    }, []),
-    { wait: 1000 }
-  );
   useIntersectionObserver(
     useCallback(
       (entries) => {
         const target = atBottomAnchorRef.current;
         if (!target) return;
         const targetEntry = getIntersectionObserverEntry(target, entries);
-        if (targetEntry) debounceSetAtBottom(targetEntry);
-        if (targetEntry?.isIntersecting && atLiveEndRef.current) {
-          setAtBottom(true);
-          setLatestUnreadMessage(null);
-          if (document.hasFocus()) {
-            tryAutoMarkAsRead();
-          }
+        if (!targetEntry) return;
+
+        // Leave the live bottom immediately so Jump to Latest stays available.
+        // Only intersection clears atBottom here; !atLiveEnd is handled by the
+        // liveTimelineLinked/rangeAtEnd effect so we don't stick false when the
+        // live end reconnects without a new intersection event.
+        if (!targetEntry.isIntersecting) {
+          setAtBottom(false);
+          return;
+        }
+
+        if (!atLiveEndRef.current) return;
+
+        setAtBottom(true);
+        setLatestUnreadMessage(null);
+        if (document.hasFocus()) {
+          tryAutoMarkAsRead();
         }
       },
-      [debounceSetAtBottom, tryAutoMarkAsRead]
+      [tryAutoMarkAsRead]
     ),
     useCallback(
       () => ({
@@ -991,9 +1134,15 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     }
   }, [eventId, loadEventTimeline]);
 
+  // Restore return-to-previous when switching rooms (survives remount via cache).
+  useEffect(() => {
+    setReturnToEventIdState(getRoomReturnAnchor(room.roomId) ?? null);
+  }, [room.roomId]);
+
   // Scroll to latest when clicking on already-selected room
   useEffect(() => {
     if (scrollToLatest) {
+      clearRoomScrollState(room.roomId);
       setLatestUnreadMessage(null);
       setUnreadInfo(undefined);
       setTimeline(getInitialTimeline(room));
@@ -1003,12 +1152,87 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     }
   }, [scrollToLatest, room]);
 
-  // Scroll to bottom on initial timeline load
+  // Remember scroll position when leaving a room (switch DM, nav away, etc.).
+  useLayoutEffect(() => {
+    const roomId = room.roomId;
+    return () => {
+      persistTimelineScroll(roomId);
+    };
+  }, [room.roomId, persistTimelineScroll]);
+
+  // Keep scroll cache updated while reading (useEffect cleanup runs after DOM teardown).
+  useEffect(() => {
+    const scrollEl = scrollRef.current;
+    if (!scrollEl || eventId) return undefined;
+
+    const roomId = room.roomId;
+    let raf = 0;
+    const onScroll = () => {
+      if (restoringScrollRef.current) return;
+      window.cancelAnimationFrame(raf);
+      raf = window.requestAnimationFrame(() => {
+        persistTimelineScroll(roomId);
+        // Keep Jump to Latest in sync with real scroll position when on the live end.
+        // IntersectionObserver alone can miss transitions and leave atBottom stuck.
+        if (atLiveEndRef.current) {
+          const at = isScrolledToBottom(scrollEl, 100);
+          setAtBottom(at);
+          if (at) setLatestUnreadMessage(null);
+        }
+      });
+    };
+
+    scrollEl.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      window.cancelAnimationFrame(raf);
+      scrollEl.removeEventListener('scroll', onScroll);
+    };
+  }, [room.roomId, eventId, persistTimelineScroll]);
+
+  // Restore saved scroll or default to bottom on first open.
   useLayoutEffect(() => {
     const scrollEl = scrollRef.current;
-    if (scrollEl) {
+    if (!scrollEl) return undefined;
+
+    if (scrollToLatest) {
       autoScrollToBottom(scrollEl, false, true);
+      return undefined;
     }
+
+    const saved = savedScrollRef.current;
+    if (!saved) {
+      autoScrollToBottom(scrollEl, false, true);
+      return undefined;
+    }
+
+    restoringScrollRef.current = true;
+    setAtBottom(saved.atBottom);
+
+    const restore = () => {
+      if (saved.atBottom) {
+        scrollEl.scrollTop = scrollEl.scrollHeight;
+      } else {
+        scrollEl.scrollTop = saved.top;
+      }
+    };
+
+    restore();
+    const raf1 = window.requestAnimationFrame(() => {
+      restore();
+      window.requestAnimationFrame(() => {
+        restore();
+        window.setTimeout(() => {
+          restore();
+          window.setTimeout(() => {
+            restoringScrollRef.current = false;
+          }, 150);
+        }, 50);
+      });
+    });
+    return () => {
+      window.cancelAnimationFrame(raf1);
+      restoringScrollRef.current = false;
+    };
   }, []);
 
   // if live timeline is linked and unreadInfo change
@@ -1052,7 +1276,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   // scroll to bottom of timeline
   const scrollToBottomCount = scrollToBottomRef.current.count;
   useLayoutEffect(() => {
-    if (scrollToBottomCount > 0) {
+    if (scrollToBottomCount > 0 && !restoringScrollRef.current) {
       const scrollEl = scrollRef.current;
       if (scrollEl) {
         autoScrollToBottom(
@@ -1060,6 +1284,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           scrollToBottomRef.current.smooth,
           scrollToBottomRef.current.force
         );
+        if (atLiveEndRef.current) {
+          setAtBottom(true);
+        }
       }
     }
   }, [scrollToBottomCount]);
@@ -1110,16 +1337,51 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   }, [room, hour24Clock]);
 
   const handleJumpToLatest = () => {
+    const anchorEventId =
+      eventId ?? getViewportAnchorEventId() ?? getRangeCenterEventId();
+    if (anchorEventId) {
+      setReturnToEventId(anchorEventId);
+    }
+
     if (eventId) {
       navigateRoom(room.roomId, undefined, { replace: true });
     }
+    clearRoomScrollState(room.roomId);
     setLatestUnreadMessage(null);
-    setTimeline(getInitialTimeline(room));
+
+    // Already on the live timeline: only snap the virtual window to the end.
+    // A full getInitialTimeline() rebuild feels like a chat reload when far back.
+    if (!eventId && liveTimelineLinked) {
+      setTimeline((ct) => {
+        const evLength = getTimelinesEventsCount(ct.linkedTimelines);
+        return {
+          linkedTimelines: ct.linkedTimelines,
+          range: {
+            start: Math.max(evLength - PAGINATION_LIMIT, 0),
+            end: evLength,
+          },
+        };
+      });
+    } else {
+      setTimeline(getInitialTimeline(room));
+    }
+
     scrollToBottomRef.current.count += 1;
     scrollToBottomRef.current.smooth = false;
     scrollToBottomRef.current.force = true;
   };
 
+  const handleReturnToPrevious = () => {
+    if (!returnToEventId) return;
+    const targetId = returnToEventId;
+    setReturnToEventId(null);
+    handleOpenEvent(targetId);
+  };
+
+  const handleClearReturnToPrevious = () => {
+    setReturnToEventId(null);
+  };
+
   const handleJumpToUnread = () => {
     if (unreadInfo?.readUptoEventId) {
       setTimeline(getEmptyTimeline());
@@ -1348,6 +1610,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 linkifyOpts={linkifyOpts}
                 outlineAttachment={messageLayout === MessageLayout.Bubble}
                 disabledEmbedPatterns={combinedEmbedFilters}
+                targetEventId={mEventId}
+                onJumboEmojiClick={handleJumboEmojiClick}
               />
             )}
           </Message>
@@ -1456,6 +1720,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                       linkifyOpts={linkifyOpts}
                       outlineAttachment={messageLayout === MessageLayout.Bubble}
                       disabledEmbedPatterns={combinedEmbedFilters}
+                      targetEventId={mEventId}
+                      onJumboEmojiClick={handleJumboEmojiClick}
                     />
                   );
                 }
@@ -1753,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;
@@ -2266,36 +2534,44 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     return callSummaryJSX || eventJSX;
   };
 
-  return (
-    <Box grow="Yes" style={{ position: 'relative' }}>
-      {unreadInfo?.readUptoEventId && !unreadInfo?.inLiveTimeline && (
-        <TimelineFloat position="Top">
-          <Chip
-            variant="Primary"
-            radii="Pill"
-            outlined
-            before={<Icon size="50" src={Icons.MessageUnread} />}
-            onClick={handleJumpToUnread}
-          >
-            <Text size="L400">Jump to Unread</Text>
-          </Chip>
+  const showUnreadTop =
+    !!unreadInfo?.readUptoEventId && !unreadInfo?.inLiveTimeline;
+  const atLiveBottom = atBottom && liveTimelineLinked && rangeAtEnd;
 
-          <Chip
-            variant="SurfaceVariant"
-            radii="Pill"
-            outlined
-            before={<Icon size="50" src={Icons.CheckTwice} />}
-            onClick={handleMarkAsRead}
-          >
-            <Text size="L400">Mark as Read</Text>
-          </Chip>
-        </TimelineFloat>
+  return (
+    <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">
+      <Scroll ref={scrollRef} visibility="Hover" data-room-timeline-scroll="">
         <Box
           ref={timelineContentRef}
           direction="Column"
           justifyContent="End"
+          data-chatroll=""
           style={{
             minHeight: '100%',
             padding: `${config.space.S600} 0`,
@@ -2381,10 +2657,65 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 </MessageBase>
               </>
             ))}
-          <span ref={atBottomAnchorRef} />
+          {/* 1×1 so IntersectionObserver reliably detects the live bottom */}
+          <span
+            ref={atBottomAnchorRef}
+            aria-hidden
+            style={{ display: 'block', width: 1, height: 1 }}
+          />
         </Box>
       </Scroll>
-      {!atBottom && (
+      {(showUnreadTop || returnToEventId) && (
+        <TimelineFloat position="Top">
+          {returnToEventId && (
+            <>
+              <Chip
+                variant="Primary"
+                radii="Pill"
+                outlined
+                before={<Icon size="50" src={Icons.ArrowTop} />}
+                onClick={handleReturnToPrevious}
+              >
+                <Text size="L400">Return to Previous</Text>
+              </Chip>
+              <IconButton
+                title="Dismiss"
+                aria-label="Dismiss return to previous"
+                size="300"
+                radii="Pill"
+                variant="SurfaceVariant"
+                onClick={handleClearReturnToPrevious}
+              >
+                <Icon size="50" src={Icons.Cross} />
+              </IconButton>
+            </>
+          )}
+          {showUnreadTop && (
+            <>
+              <Chip
+                variant="Primary"
+                radii="Pill"
+                outlined
+                before={<Icon size="50" src={Icons.MessageUnread} />}
+                onClick={handleJumpToUnread}
+              >
+                <Text size="L400">Jump to Unread</Text>
+              </Chip>
+
+              <Chip
+                variant="SurfaceVariant"
+                radii="Pill"
+                outlined
+                before={<Icon size="50" src={Icons.CheckTwice} />}
+                onClick={handleMarkAsRead}
+              >
+                <Text size="L400">Mark as Read</Text>
+              </Chip>
+            </>
+          )}
+        </TimelineFloat>
+      )}
+      {!atLiveBottom && (
         <TimelineFloat position="Bottom">
           <Box direction="Column" gap="200" alignItems="Center">
             {latestUnreadMessage && (
@@ -2418,6 +2749,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           </Box>
         </TimelineFloat>
       )}
+      <EmojiConfettiOverlay bursts={emojiConfettiBursts} onBurstComplete={removeEmojiConfettiBurst} />
     </Box>
   );
 }

src/app/features/room/RoomView.tsx

@@ -14,7 +14,8 @@ import { RoomTimeline } from './RoomTimeline';
 import { RoomViewTyping } from './RoomViewTyping';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
-import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
+import { RoomViewFollowing } from './RoomViewFollowing';
+import * as roomViewCss from './RoomViewFollowing.css';
 import { Page } from '../../components/page';
 import { RoomViewHeader } from './RoomViewHeader';
 import { useKeyDown } from '../../hooks/useKeyDown';
@@ -109,7 +110,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         <ThreadView room={room} threadRootId={activeThreadId} />
       ) : (
         <>
-          <Box grow="Yes" direction="Column">
+          <Box grow="Yes" direction="Column" style={{ position: 'relative', minHeight: 0 }}>
             <RoomTimeline
               key={roomId}
               room={room}
@@ -117,40 +118,42 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
               roomInputRef={roomInputRef}
               editor={editor}
             />
-            <RoomViewTyping room={room} />
+            <div className={roomViewCss.RoomViewBottomFloat}>
+              <RoomViewTyping room={room} />
+              {!hideActivity && <RoomViewFollowing room={room} />}
+            </div>
           </Box>
           <Box shrink="No" direction="Column">
-            <div style={{ padding: `0 ${config.space.S400}` }}>
-              {tombstoneEvent ? (
+            {tombstoneEvent ? (
+              <div style={{ padding: `0 ${config.space.S400}` }}>
                 <RoomTombstone
                   roomId={roomId}
                   body={tombstoneEvent.getContent().body}
                   replacementRoomId={tombstoneEvent.getContent().replacement_room}
                 />
-              ) : (
-                <>
-                  {canMessage && (
-                    <RoomInput
-                      room={room}
-                      editor={editor}
-                      roomId={roomId}
-                      fileDropContainerRef={roomViewRef}
-                      ref={roomInputRef}
-                    />
-                  )}
-                  {!canMessage && (
-                    <RoomInputPlaceholder
-                      style={{ padding: config.space.S200 }}
-                      alignItems="Center"
-                      justifyContent="Center"
-                    >
-                      <Text align="Center">You do not have permission to post in this room</Text>
-                    </RoomInputPlaceholder>
-                  )}
-                </>
-              )}
-            </div>
-            {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
+              </div>
+            ) : (
+              <>
+                {canMessage && (
+                  <RoomInput
+                    room={room}
+                    editor={editor}
+                    roomId={roomId}
+                    fileDropContainerRef={roomViewRef}
+                    ref={roomInputRef}
+                  />
+                )}
+                {!canMessage && (
+                  <RoomInputPlaceholder
+                    style={{ padding: config.space.S200 }}
+                    alignItems="Center"
+                    justifyContent="Center"
+                  >
+                    <Text align="Center">You do not have permission to post in this room</Text>
+                  </RoomInputPlaceholder>
+                )}
+              </>
+            )}
           </Box>
         </>
       )}

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

@@ -2,6 +2,20 @@ import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
 
+/** Floats typing + read receipts over the bottom of the timeline. */
+export const RoomViewBottomFloat = style({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: config.space.S200,
+  pointerEvents: 'none',
+});
+
 export const RoomViewFollowingPlaceholder = style([
   DefaultReset,
   {
@@ -15,10 +29,12 @@ export const RoomViewFollowing = recipe({
     {
       minHeight: toRem(28),
       padding: `0 ${config.space.S400}`,
-      width: '100%',
-      backgroundColor: color.Surface.Container,
+      marginLeft: 'auto',
+      maxWidth: '50%',
+      backgroundColor: 'transparent',
       color: color.Surface.OnContainer,
       outline: 'none',
+      pointerEvents: 'auto',
     },
   ],
   variants: {

src/app/features/room/RoomViewFollowing.tsx

@@ -35,6 +35,10 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
 
     const eventId = latestEvent?.getId();
 
+    if (names.length === 0) {
+      return null;
+    }
+
     return (
       <>
         {eventId && (
@@ -56,64 +60,58 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
           </Overlay>
         )}
         <Box
-          as={names.length > 0 ? 'button' : 'div'}
-          onClick={names.length > 0 ? () => setOpen(true) : undefined}
-          className={classNames(css.RoomViewFollowing({ clickable: names.length > 0 }), className)}
+          as="button"
+          onClick={() => setOpen(true)}
+          className={classNames(css.RoomViewFollowing({ clickable: true }), className)}
           alignItems="Center"
           justifyContent="End"
           gap="200"
           {...props}
           ref={ref}
         >
-          {names.length > 0 && (
-            <>
-              <Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.CheckTwice} />
-              <Text size="T300" truncate>
-                {names.length === 1 && (
-                    <b>{names[0]}</b>
-                )}
-                {names.length === 2 && (
-                  <>
-                    <b>{names[0]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' and '}
-                    </Text>
-                    <b>{names[1]}</b>
-                  </>
-                )}
-                {names.length === 3 && (
-                  <>
-                    <b>{names[0]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {', '}
-                    </Text>
-                    <b>{names[1]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' and '}
-                    </Text>
-                    <b>{names[2]}</b>
-                  </>
-                )}
-                {names.length > 3 && (
-                  <>
-                    <b>{names[0]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {', '}
-                    </Text>
-                    <b>{names[1]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {', '}
-                    </Text>
-                    <b>{names[2]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' and '}
-                    </Text>
-                    <b>{names.length - 3} others</b>
-                  </>
-                )}
-              </Text>
-            </>
-          )}
+          <Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.CheckTwice} />
+          <Text size="T300" truncate>
+            {names.length === 1 && <b>{names[0]}</b>}
+            {names.length === 2 && (
+              <>
+                <b>{names[0]}</b>
+                <Text as="span" size="Inherit" priority="300">
+                  {' and '}
+                </Text>
+                <b>{names[1]}</b>
+              </>
+            )}
+            {names.length === 3 && (
+              <>
+                <b>{names[0]}</b>
+                <Text as="span" size="Inherit" priority="300">
+                  {', '}
+                </Text>
+                <b>{names[1]}</b>
+                <Text as="span" size="Inherit" priority="300">
+                  {' and '}
+                </Text>
+                <b>{names[2]}</b>
+              </>
+            )}
+            {names.length > 3 && (
+              <>
+                <b>{names[0]}</b>
+                <Text as="span" size="Inherit" priority="300">
+                  {', '}
+                </Text>
+                <b>{names[1]}</b>
+                <Text as="span" size="Inherit" priority="300">
+                  {', '}
+                </Text>
+                <b>{names[2]}</b>
+                <Text as="span" size="Inherit" priority="300">
+                  {' and '}
+                </Text>
+                <b>{names.length - 3} others</b>
+              </>
+            )}
+          </Text>
         </Box>
       </>
     );

src/app/features/room/RoomViewHeader.tsx

@@ -7,19 +7,19 @@ import { JoinRule, Room } from 'matrix-js-sdk';
 import { useAtom, useAtomValue } from 'jotai';
 import { activeThreadIdAtomFamily } from '../../state/activeThread';
 
-import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { RoomTopicViewer } from '../../components/room-topic-viewer';
-import { StateEvent } from '../../../types/matrix/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoom } from '../../hooks/useRoom';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
-import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
-import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
+import { getHomeSearchPath, getSpaceSearchPath, getDirectSearchPath, withSearchParam } from '../../pages/pathUtils';
+import { getCanonicalAliasOrRoomId, guessDmRoomUserId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
+import colorMXID from '../../../util/colorMXID';
+import { useOtherUserColor } from '../../hooks/useUserColor';
 import { _SearchPathSearchParams } from '../../pages/paths';
 import * as css from './RoomViewHeader.css';
 import { useRoomUnread } from '../../state/hooks/unread';
@@ -41,6 +41,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
 import { RoomPinMenu } from './room-pin-menu';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { isMediaDrawerAtom } from '../../state/mediaDrawer';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import {
   getRoomNotificationMode,
@@ -56,6 +57,8 @@ import { useRoomCall, useRoomCallMembers } from '../call';
 import { CallState, CallType } from '../call/types';
 import { UserAvatar } from '../../components/user-avatar';
 import { getMemberDisplayName, getMemberAvatarMxc } from '../../utils/room';
+import { useDirectSelected } from '../../hooks/router/useDirectSelected';
+import { isStationeryTheme, useTheme } from '../../hooks/useTheme';
 
 type RoomMenuProps = {
   room: Room;
@@ -469,18 +472,31 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
   const mDirects = useAtomValue(mDirectAtom);
+  const onDirectPath = useDirectSelected();
+  const theme = useTheme();
+  const stationery = isStationeryTheme(theme);
 
   const pinnedEvents = useRoomPinnedEvents(room);
-  const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
-  const ecryptedRoom = !!encryptionEvent;
-  const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
+  const isDirect = mDirects.has(room.roomId);
+  const avatarMxc = useRoomAvatar(room, isDirect);
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
   const avatarUrl = avatarMxc
     ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
     : undefined;
 
+  const dmUserId = isDirect ? guessDmRoomUserId(room, mx.getSafeUserId()) : undefined;
+  const dmAvatarMxc =
+    (dmUserId ? room.getMember(dmUserId)?.getMxcAvatarUrl() : undefined) ||
+    (isDirect ? avatarMxc : undefined);
+  const dmCustomColor = useOtherUserColor(dmUserId ?? '');
+  const dmFolderTabColor =
+    stationery && isDirect
+      ? `color-mix(in srgb, ${dmCustomColor ?? colorMXID(dmUserId ?? room.roomId)} 50%, var(--folder-tab-room, #f3e6c8))`
+      : undefined;
+
   const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+  const [isMediaDrawer, setMediaDrawer] = useAtom(isMediaDrawerAtom);
   const [activeThreadId, setActiveThreadId] = useAtom(activeThreadIdAtomFamily(room.roomId));
 
   const handleSearchClick = () => {
@@ -489,7 +505,9 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
     };
     const path = space
       ? getSpaceSearchPath(getCanonicalAliasOrRoomId(mx, space.roomId))
-      : getHomeSearchPath();
+      : isDirect || onDirectPath
+        ? getDirectSearchPath()
+        : getHomeSearchPath();
     navigate(withSearchParam(path, searchParams));
   };
 
@@ -501,6 +519,22 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
     setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
+  const handleTogglePeopleDrawer = () => {
+    setPeopleDrawer((drawer) => {
+      const next = !drawer;
+      if (next) setMediaDrawer(false);
+      return next;
+    });
+  };
+
+  const handleToggleMediaDrawer = () => {
+    setMediaDrawer((open) => {
+      const next = !open;
+      if (next) setPeopleDrawer(false);
+      return next;
+    });
+  };
+
   return (
     <PageHeader balance={showInPageHeader}>
       <Box grow="Yes" gap="300">
@@ -511,7 +545,24 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
             </IconButton>
           </Box>
         )}
-        <Box grow="Yes" alignItems="Center" gap="300">
+        <Box
+          data-folder-tab="room"
+          data-folder-tab-dm={isDirect ? '' : undefined}
+          shrink="No"
+          alignItems="Center"
+          gap="300"
+          style={{
+            minWidth: 0,
+            maxWidth: '100%',
+            ...(dmFolderTabColor
+              ? {
+                  ['--folder-tab-fill' as string]: dmFolderTabColor,
+                  background: dmFolderTabColor,
+                  backgroundColor: dmFolderTabColor,
+                }
+              : undefined),
+          }}
+        >
           {!showInPageHeader && (
             <Avatar size="300">
               <RoomAvatar
@@ -528,7 +579,7 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
               />
             </Avatar>
           )}
-          <Box direction="Column">
+          <Box direction="Column" style={{ minWidth: 0 }}>
             <Box alignItems="Center" gap="100">
               <Text size={topic ? 'H5' : 'H3'} truncate>
                 {name}
@@ -578,26 +629,25 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
             )}
           </Box>
         </Box>
+        <Box grow="Yes" />
         <Box shrink="No" alignItems="Center" gap="100">
           <CallIndicator roomId={room.roomId} />
           <RoomCallButtons roomId={room.roomId} />
-          {!ecryptedRoom && (
-            <TooltipProvider
-              position="Bottom"
-              offset={4}
-              tooltip={
-                <Tooltip>
-                  <Text>Search</Text>
-                </Tooltip>
-              }
-            >
-              {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={handleSearchClick}>
-                  <Icon size="300" src={Icons.Search} />
-                </IconButton>
-              )}
-            </TooltipProvider>
-          )}
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>Search</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton ref={triggerRef} onClick={handleSearchClick}>
+                <Icon size="300" src={Icons.Search} />
+              </IconButton>
+            )}
+          </TooltipProvider>
           <TooltipProvider
             position="Bottom"
             offset={4}
@@ -665,8 +715,12 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
-                  <Icon size="300" src={Icons.User} />
+                <IconButton
+                  ref={triggerRef}
+                  onClick={handleTogglePeopleDrawer}
+                  aria-pressed={peopleDrawer}
+                >
+                  <Icon size="300" src={Icons.User} filled={peopleDrawer} />
                 </IconButton>
               )}
             </TooltipProvider>
@@ -690,6 +744,26 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
               </IconButton>
             )}
           </TooltipProvider>
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>{isMediaDrawer ? 'Hide Shared Media' : 'Show Shared Media'}</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                ref={triggerRef}
+                onClick={handleToggleMediaDrawer}
+                aria-pressed={isMediaDrawer}
+                aria-label="Shared Media"
+              >
+                <Icon size="300" src={Icons.Photo} filled={isMediaDrawer} />
+              </IconButton>
+            )}
+          </TooltipProvider>
           <PluginButtonSlot location="room-header" />
           <TooltipProvider
             position="Bottom"

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

@@ -1,5 +1,5 @@
 import { keyframes, style } from '@vanilla-extract/css';
-import { DefaultReset, color, config } from 'folds';
+import { DefaultReset, color, config, toRem } from 'folds';
 
 const SlideUpAnime = keyframes({
   from: {
@@ -13,15 +13,17 @@ const SlideUpAnime = keyframes({
 export const RoomViewTyping = style([
   DefaultReset,
   {
-    padding: `0 ${config.space.S500}`,
-    width: '100%',
-    backgroundColor: color.Surface.Container,
+    minHeight: toRem(28),
+    padding: `0 ${config.space.S400}`,
+    minWidth: 0,
+    flex: 1,
+    backgroundColor: 'transparent',
     color: color.Surface.OnContainer,
-    position: 'absolute',
-    bottom: 0,
+    pointerEvents: 'auto',
     animation: `${SlideUpAnime} 100ms ease-in-out`,
   },
 ]);
+
 export const TypingText = style({
   flexGrow: 1,
   overflow: 'clip',

src/app/features/room/RoomViewTyping.tsx

@@ -45,78 +45,76 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
     };
 
     return (
-      <div style={{ position: 'relative' }}>
-        <Box
-          className={classNames(css.RoomViewTyping, className)}
-          alignItems="Center"
-          gap="400"
-          {...props}
-          ref={ref}
-        >
-          <TypingIndicator />
-          <Text className={css.TypingText} size="T300" truncate>
-            {typingNames.length === 1 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' is typing...'}
-                </Text>
-              </>
-            )}
-            {typingNames.length === 2 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' and '}
-                </Text>
-                <b>{typingNames[1]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' are typing...'}
-                </Text>
-              </>
-            )}
-            {typingNames.length === 3 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {', '}
-                </Text>
-                <b>{typingNames[1]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' and '}
-                </Text>
-                <b>{typingNames[2]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' are typing...'}
-                </Text>
-              </>
-            )}
-            {typingNames.length > 3 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {', '}
-                </Text>
-                <b>{typingNames[1]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {', '}
-                </Text>
-                <b>{typingNames[2]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' and '}
-                </Text>
-                <b>{typingNames.length - 3} others</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' are typing...'}
-                </Text>
-              </>
-            )}
-          </Text>
-          <IconButton title="Drop Typing Status" size="300" radii="Pill" onClick={handleDropAll}>
-            <Icon size="50" src={Icons.Cross} />
-          </IconButton>
-        </Box>
-      </div>
+      <Box
+        className={classNames(css.RoomViewTyping, className)}
+        alignItems="Center"
+        gap="400"
+        {...props}
+        ref={ref}
+      >
+        <TypingIndicator />
+        <Text className={css.TypingText} size="T300" truncate>
+          {typingNames.length === 1 && (
+            <>
+              <b>{typingNames[0]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' is typing...'}
+              </Text>
+            </>
+          )}
+          {typingNames.length === 2 && (
+            <>
+              <b>{typingNames[0]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' and '}
+              </Text>
+              <b>{typingNames[1]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' are typing...'}
+              </Text>
+            </>
+          )}
+          {typingNames.length === 3 && (
+            <>
+              <b>{typingNames[0]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {', '}
+              </Text>
+              <b>{typingNames[1]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' and '}
+              </Text>
+              <b>{typingNames[2]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' are typing...'}
+              </Text>
+            </>
+          )}
+          {typingNames.length > 3 && (
+            <>
+              <b>{typingNames[0]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {', '}
+              </Text>
+              <b>{typingNames[1]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {', '}
+              </Text>
+              <b>{typingNames[2]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' and '}
+              </Text>
+              <b>{typingNames.length - 3} others</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' are typing...'}
+              </Text>
+            </>
+          )}
+        </Text>
+        <IconButton title="Drop Typing Status" size="300" radii="Pill" onClick={handleDropAll}>
+          <Icon size="50" src={Icons.Cross} />
+        </IconButton>
+      </Box>
     );
   }
 );