File zone share: failed files by position, send guard outside the component, say when the room turned encrypted

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

config.json

@@ -28,11 +28,6 @@
   "fileZoneShare": {
     "enabled": false
   },
-  "push": {
-    "vapidPublicKey": "",
-    "gatewayUrl": "",
-    "appId": ""
-  },
   "registration": {
     "enabled": false,
     "url": ""

docs/file-zone.md

@@ -114,7 +114,6 @@ Matrix options checked: (a) a thread, chosen: stock, rendered by every client, a
 Client, `src/app/features/albums`:
 
 - `shareSet.ts`: `sendShareSet(port, title, files)`. Sends the root, then each file in pick order, each reply falling back to the previous event (`threadRelation`). A file whose upload fails is named in the result and the rest still go; a root that fails to send throws before any upload. The root alone is not an album in the list (`/threads` returns only roots that have a reply), so a share where every upload failed leaves a lone text message in the timeline. After a send the panel keeps only the failed files picked; a retry makes a second album. Ports are injected, so the order and failure rules are tested without a homeserver (`shareSet.test.ts` reads the sent events back through `buildAlbums`).
-- `shareController.ts`: the panel's state machine (picked files, phase, the one-send-per-room guard, the encrypted refusal, failed files kept by position), apart from React so tests drive it without a DOM; `shareController.test.ts` and `ShareSet.test.tsx` (static render of each state, the flag) pin it. No DOM test environment exists in this repo, so a real tap on a real input is covered by the phone check, not by tests.
 - `ShareSet.tsx`: phone layout. Idle, it is one text row, "Share files". Picking files (any number from the native picker; a second pick replaces the first) mounts a title field, the picked names on one dim line, and Send / Cancel as full-width rows; progress is "Sending 2 of 5". It is shown only on the album list (kept mounted but hidden while an album is open, so a running send keeps its state), one send at a time per room (tracked outside the component; leaving the page does not stop a send, it only loses its progress and result), and never in an encrypted zone (re-checked when Send is tapped) (the plaintext `info.sha256` the Mind verifies against is written in unencrypted rooms only).
 - Content per file comes from `getMsgContent` in `features/room/msgContent.ts`, now also used by the composer, so a shared file and an attached file carry the same `info` including `sha256`.
 

docs/gamecult/chat-shell-compression.md

@@ -1,108 +0,0 @@
-# chat.gamecult.org: shell compression and caching
-
-Follow-up `ratatoskr:follow_up:chat-shell-compression`. Measured 2026-11-12 against the live
-host, which serves release `ratatoskr-nemesis-9b9b495d` (the `index-CAataSJe.js` bundle; the offline table
-below also uses the `f8115609` handoff build, `index-D0yL0Dgy.js`, and says which row is which). The host config is
-`nginx/chat.gamecult.org.conf` in `gamecult-ops`, owned by Eureka; nothing here is applied
-to the host.
-
-## What the host serves now
-
-The 2026-10-31 probe (no Content-Encoding, no Cache-Control on `/assets/`) is stale: the
-`nginx.conf` has `gzip on`, the site file sets level 5, `gzip_vary` and `gzip_types` for js, css, json, svg and wasm, and carries an immutable
-`Cache-Control` on `/assets/` and `/preview/assets/`. Probed with `curl -H 'Accept-Encoding: X'`.
-
-| Resource | raw | gzip (served now) | brotli (served now) |
-|---|---|---|---|
-| `/assets/index-CAataSJe.js` | 3,732,771 | 956,085 | none: `br` is ignored, identity returned |
-| `/assets/index-BLdKqKqx.css` | 111,267 | 19,952 | none |
-| `/assets/matrix_sdk_crypto_wasm_bg-DwIieW7K.wasm` | 5,573,870 | 1,878,147 | none |
-| `/` (index.html, no-cache) | 3,066 | gzip | none |
-
-Headers: hashed `/assets/` answer `Cache-Control: public, max-age=31536000, immutable`;
-`/`, `index.html`, `sw.js`, `manifest.json`, `config.json` answer `no-cache`; compressed
-responses carry `Vary: Accept-Encoding` and a weak ETag. `config.json` (424 B) is below
-`gzip_min_length 1024` and goes uncompressed, which is correct.
-
-So the original ask is done. What is left is brotli, which nginx 1.26.3 here cannot serve:
-`/usr/sbin/nginx -V` shows `--with-http_gzip_static_module` and no brotli module.
-
-## What brotli buys
-
-Level-5 gzip is what the host does per request. Offline measurement on the same files
-(node `zlib`, 2026-11-12):
-
-| File | raw | gzip 5 (node) | gzip 9 | brotli 11 | brotli vs live |
-|---|---|---|---|---|---|
-| live main chunk `index-CAataSJe.js` | 3,732,771 | 957,199 | 945,424 | 725,167 | -24% |
-| handoff main chunk `index-D0yL0Dgy.js` | 3,868,313 | 1,015,680 | 1,001,446 | 773,992 | -24% |
-| crypto wasm | 5,573,870 | 1,868,282 | 1,851,108 | 1,343,595 | -28% |
-| `ReactPrism-Dm2uRF4v.js` | 577,517 | 209,339 | 208,376 | 163,525 | -22% |
-
-A cold load of the two big files falls from about 2.8 MB to about 2.1 MB on the wire; the
-saving is ~0.7 MB once per hashed build per device while the HTTP cache keeps the file (immutable; the
-service worker does no precaching, so eviction or a new device pays again). gzip 9 alone buys 1-2%, so
-`gzip_static` without brotli is not worth a build step. Brotli is the whole prize, and it
-needs one root step.
-
-Cost: brotli q11 takes about 12 s for the wasm and 8 s for the main chunk on one core, so
-the whole dist is about two minutes at build time (measured, 84 files) and zero CPU per request. Do not use q11
-on the fly; that is why the plan is precompressed twins.
-
-## Root list for Eureka (host)
-
-1. `apt install libnginx-mod-http-brotli-filter libnginx-mod-http-brotli-static` (trixie/main, 1.0.0~rc-6,
-   depend on `nginx-abi-1.26.3-1`, which the installed nginx provides; apt may offer an nginx patch upgrade
-   alongside, say so before accepting). Do not enable the config yet.
-2. Install a build with twins (`PRECOMPRESS=1`, below) the usual way
-   (`docs/gamecult/client-build-install.md`). Twins for files that are not there change nothing.
-3. In the `chat.gamecult.org` `server` block, beside the existing gzip lines:
-
-```nginx
-    brotli_static on;          # serve <file>.br when the client sends br
-    gzip_static on;            # serve <file>.gz; falls back to the on-the-fly gzip above
-    brotli on;                 # on-the-fly br for files with no twin (index.html, small files)
-    brotli_comp_level 5;
-    brotli_types text/css application/javascript text/javascript application/json application/manifest+json image/svg+xml application/wasm;
-```
-
-   The `location ^~ /assets/` block and `/preview/`, `/element/` and `/mockups/` inherit these; they only add headers.
-   No other change: the `Cache-Control` and `Vary` lines stay as they are, and
-   `gzip_vary on` already makes the on-the-fly and static paths vary correctly.
-4. `nginx -t && systemctl reload nginx`. Twins first, config second: with `brotli on` and no twins every
-   client gets on-the-fly q5 brotli of the 3.7 and 5.6 MB files, which costs CPU per request.
-
-Rollback: remove the five lines and reload. The `.br`/`.gz` files can stay on disk, unused.
-
-## Build side
-
-`build-prod-dist.sh` (Void's, in `/opt/commons/handoff/ratatoskr-main-build/`) gains
-`PRECOMPRESS=1`, which runs `precompress.cjs <dist>` before the manifest is written. It
-writes `<file>.br` (q11) and `<file>.gz` (level 9, no mtime, deterministic for one node) next
-to each js, css, wasm, json, svg, html file over 1 KiB, only when smaller than the original.
-Default is off, so builds installed before the host change do not ship ~27 MB of twins that
-nothing serves. The twins appear in `SHA256SUMS`; the determinism compare still applies.
-Tested on `ReactPrism-Dm2uRF4v.js` (gzip roundtrip identical to the original); a full
-`PRECOMPRESS=1` build has not been run because it waits on step 1.
-
-The script is not in this repo; its placement is a standing open item of the build handoff.
-
-## Before/after measurement
-
-Run from any machine; `X` is the asset URL. Before = today's table above.
-
-```sh
-for ae in identity gzip br; do
-  printf '%s ' "$ae"; curl -s -o /dev/null -H "Accept-Encoding: $ae" -w '%{size_download} %header{content-encoding}\n' "$X"
-done
-curl -sI -H 'Accept-Encoding: br' "$X" | grep -iE 'content-encoding|vary|etag|cache-control'
-```
-
-Pass: with `br` the main chunk is about 774 KB and the wasm about 1.34 MB with
-`Content-Encoding: br`; with `gzip` the bytes are no larger than today; with `identity`
-the file is the raw size; `Vary: Accept-Encoding` and the immutable `Cache-Control` are
-still present on all three; `index.html`, `sw.js` and `config.json` still `no-cache`.
-The service worker's registration and an existing session must still work (open chat on
-the operator's phone, hard reload once, check the network panel's "transferred" column).
-Check `/preview/assets/` the same way, but `/preview/` is served from `/srv/cinny/preview`, which this build
-script does not produce: it gets on-the-fly brotli, not twins, until a preview build carries them.

docs/gamecult/client-build-install.md

@@ -1,121 +0,0 @@
-# Ratatoskr client: build, install, verify, roll back
-
-Who does what. The steward (Void) builds and hands off; Void holds no root and does not deploy.
-Eureka installs on the chat.gamecult.org host, which is Eureka's. This page is the shared
-procedure. Nothing here is run by the build step against the live host.
-
-## Facts about the host
-
-- Web root: `/srv/cinny/`. `current` is a symlink to one directory under `releases/`; the web
-  server serves `current`. Releases are `releases/ratatoskr-<8hex>` (older ones are
-  `ratatoskr-nemesis-<8hex>`). Previous releases stay on disk; that is the rollback.
-- The client is static. `config.json` sits in the release root beside `index.html` and is read
-  at load. Cinny's `Dockerfile` and `docker-nginx.conf` are upstream's container path, not the
-  chat.gamecult.org path.
-- Check the pointer before anything else: `readlink /srv/cinny/current`.
-
-## 1. Build (steward)
-
-Two builds exist, and they treat `config.json` differently.
-
-**By hand (the repo's config).** `vite build` copies the repo's `config.json` into `dist/`
-(`vite.config.js`, static copy of `config.json`). Ratatoskr #103 made the repo file the intended
-served config, and #106 set `backgroundScene.style` to `ridge`; the served file has not caught up
-(see Open). Do not hand-edit `dist/config.json`.
-
-```sh
-git clone https://eureka.gamecult.org/forge/GameCult/Ratatoskr.git && cd Ratatoskr
-git checkout <full-40-hex-sha>           # build a named commit, not a branch tip
-npm ci --ignore-scripts                  # .npmrc sets legacy-peer-deps; skips husky's prepare hook
-node scripts/sync-poses.mjs              # pose art is not committed; this also rewrites the tracked
-                                         # src/app/components/message/pose/catalogue.json
-NODE_OPTIONS=--max_old_space_size=6144 npm run build    # writes dist/
-```
-
-Skip `sync-poses` and the build ships with no poses. Do not use `npm run build:preview` for
-production: it rewrites `dist/config.json` for preview (hash router, chosen tier and style).
-
-**The handoff build (what the host installs).**
-`/opt/commons/handoff/ratatoskr-main-build/build-prod-dist.sh <full-sha>` (see its `README.md`)
-writes `/opt/commons/handoff/ratatoskr-main-<full-sha>/{dist,SHA256SUMS,BUILD-INFO,build.log}`,
-locks the files read-only and refuses to overwrite. The dist carries the repo's `config.json` at
-that sha (BUILD-INFO `config_json_source`, `config_json_sha256`); there is no separate pinned copy.
-Its live check always runs: it fetches the served config and compares it byte for byte with the
-repo's. A difference prints the diff and stops the build. `ALLOW_CONFIG_DRIFT=1` builds anyway and
-BUILD-INFO records `config_json_live_check: DIFFERS ...` and `config_json_live_sha256`, so the
-handoff states which config differs and the installer decides. From Yggdrasil the public name does
-not resolve: pass `LIVE_CURL_ARGS="--resolve chat.gamecult.org:443:127.0.0.1"`.
-The folder, with the three pins (`SHA256SUMS` sha256, `BUILD-INFO` sha256, lockfile sha256) and
-the node and npm versions, is what the install request names.
-Every build stamps its commit into `index.html` (`scripts/buildSha.js`): `<meta name="build-sha" content="<40-hex>">`,
-with `-dirty` appended when the tree had uncommitted changes and `unknown` when there was no git. Where git governs the tree it decides: an explicit `BUILD_SHA` naming a different commit than HEAD stamps `<sha>-mismatch`, a git failure stamps `unknown`. A full-sha `BUILD_SHA` stands only for a tree git does not govern (a source archive) or cannot read (unusable git, for example a dubious-ownership refusal). The handoff
-build refuses a dist whose stamp differs from the sha it was asked for, and prints the stamp in its block.
-To read it from anywhere: `curl -s https://chat.gamecult.org/ | grep -o 'build-sha" content="[^"]*'`.
-
-Before handing off:
-
-```sh
-cd <folder>/dist && sha256sum -c ../SHA256SUMS                 # 0 failures
-grep -rl 'demo.invalid\|demo-preview-token' <folder>/dist       # must print nothing
-# from Yggdrasil the public name may not resolve; --resolve points it at the local server
-diff <(curl -fsS --resolve chat.gamecult.org:443:127.0.0.1 https://chat.gamecult.org/config.json) <folder>/dist/config.json
-```
-
-A config difference is a finding to report, not something to paper over: either live drifted or
-the repo is wrong, and a ruling (Meta, for `backgroundScene.style`) says which ships.
-
-## 2. Install (host owner, root, by hand)
-
-Note the rollback target first: `readlink /srv/cinny/current`.
-
-Unpack beside the live release; do not touch the live directory. The target must not exist, or
-`cp -r` nests `dist` inside it.
-
-```sh
-R=ratatoskr-<8hex>
-H=/opt/commons/handoff/ratatoskr-main-<full-sha>
-test ! -e /srv/cinny/releases/$R
-cp -r $H/dist /srv/cinny/releases/$R
-cmp /srv/cinny/current/config.json /srv/cinny/releases/$R/config.json
-(cd /srv/cinny/releases/$R && sha256sum -c $H/SHA256SUMS)
-```
-
-`cmp` is a drift check, not a pass check. Live has no trailing newline; the repo's file has one,
-so even equal content differs. Read the difference (`diff` the two) and settle which config
-ships. To keep the host's config byte-for-byte, as past installs did,
-`cp /srv/cinny/current/config.json /srv/cinny/releases/$R/config.json`; `sha256sum -c` then flags
-`config.json` only (read that one line; `--ignore-missing` does not hide a mismatch).
-
-Switch (a single symlink swap; `ln -sfn` unlinks then links, so there is a moment with no link):
-
-```sh
-ln -sfn releases/$R /srv/cinny/current
-```
-
-## 3. Verify
-
-- `readlink /srv/cinny/current` names `releases/$R`.
-- `curl -s https://chat.gamecult.org/config.json | sha256sum` equals `sha256sum /srv/cinny/releases/$R/config.json`.
-- Load https://chat.gamecult.org/ and hard-refresh (the service worker, `sw.js`, can hold the
-  previous assets). Sign-in card shows, the background scene draws, the browser console has no
-  page errors, a poses/asset request returns 200 and not index.html.
-
-## 4. Roll back
-
-Point `current` at the release noted before the switch. Live at the time of writing is
-`ratatoskr-nemesis-9b9b495d`:
-
-```sh
-ln -sfn releases/ratatoskr-nemesis-9b9b495d /srv/cinny/current
-```
-
-Hard-refresh to clear `sw.js`. Do not delete the failed release; leave it for diagnosis.
-
-## Open
-
-- The served config (checked 2026-11-12) is not the repo's: it says `backgroundScene.style`
-  `terrain` where the repo says `ridge` (#106, Meta 2026-11-11), lacks the repo's `dings`,
-  `fileZoneShare` and `registration` blocks (all off in the repo), and has no trailing newline.
-  The new keys default off or inert when absent, so only the style is a decision. Meta says which
-  style ships. Until the served file is replaced, every handoff build stops at the live check
-  unless `ALLOW_CONFIG_DRIFT=1` is set (section 1).

public/manifest.json

@@ -1,13 +1,12 @@
 {
   "name": "Ratatoskr",
   "short_name": "Ratatoskr",
-  "id": "/",
   "description": "GameCult's Matrix client",
   "dir": "auto",
   "lang": "en-US",
   "display": "standalone",
+  "orientation": "portrait",
   "start_url": "./",
-  "scope": "./",
   "background_color": "#07111a",
   "theme_color": "#07111a",
   "icons": [
@@ -55,12 +54,6 @@
       "src": "./public/android/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
-    },
-    {
-      "src": "./public/android/android-chrome-maskable-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
     }
   ]
 }

scripts/buildSha.js

@@ -1,56 +0,0 @@
-// The commit a bundle was built from, stamped into its index.html as <meta name="build-sha">, so a built
-// folder says what it is without a build log: `grep -o 'build-sha" content="[^"]*' dist/index.html`.
-// Where git governs the tree (REPO_DIR is a repository root) git decides: HEAD, suffixed -dirty when the tree has
-// uncommitted changes, or `<BUILD_SHA>-mismatch` when an explicit BUILD_SHA names a different commit, so a stamp
-// never vouches for code it does not hold; a git failure there is 'unknown'. Where git does not govern (a source
-// archive), a full-sha BUILD_SHA stands, else 'unknown'.
-import { execFileSync } from 'child_process';
-import { dirname, resolve } from 'path';
-import { fileURLToPath } from 'url';
-
-const REPO_DIR = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-
-// Vite writes vite.config.js.timestamp-*.mjs next to the config while it loads it; that file is the
-// build's own, not source, so an UNTRACKED one must not mark the tree dirty. A tracked file of that name,
-// or any other change, still does. Filtering status lines (not a pathspec) is what keeps it untracked-only.
-const VITE_TEMP = /^\?\? (?:.*\/)?vite\.config\.[a-z]+\.timestamp-\d+-[0-9a-f]+\.mjs$/;
-
-export const gitIn =
-  (cwd) =>
-  (...args) =>
-    execFileSync('git', args, { cwd, encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'] });
-
-const FULL_SHA = /^[0-9a-f]{40}$/;
-
-export const readBuildSha = (env = process.env, run = gitIn(REPO_DIR)) => {
-  const fromEnv = (env.BUILD_SHA ?? '').trim();
-  const explicit = FULL_SHA.test(fromEnv) ? fromEnv : null;
-  // Git governs this tree only when REPO_DIR is its root: a source archive unpacked inside some other
-  // repository has no git of its own, and that repository's HEAD says nothing about it.
-  let governed;
-  try {
-    governed = run('rev-parse', '--show-prefix').trim() === '';
-  } catch {
-    governed = false;
-  }
-  if (!governed) return explicit ?? 'unknown';
-  // Git governs and answers: from here a failure is 'unknown', never the bare explicit sha.
-  try {
-    const head = run('rev-parse', 'HEAD').trim();
-    if (!FULL_SHA.test(head)) return 'unknown';
-    if (explicit && explicit !== head) return `${explicit}-mismatch`;
-    const dirty = run('status', '--porcelain', '-uall', '--', '.')
-      .split('\n')
-      .some((l) => l.trim() !== '' && !VITE_TEMP.test(l));
-    return dirty ? `${head}-dirty` : head;
-  } catch {
-    return 'unknown';
-  }
-};
-
-export const buildShaPlugin = (sha = readBuildSha()) => ({
-  name: 'ratatoskr-build-sha',
-  transformIndexHtml: () => [
-    { tag: 'meta', attrs: { name: 'build-sha', content: sha }, injectTo: 'head-prepend' },
-  ],
-});

scripts/buildSha.test.js

@@ -1,170 +0,0 @@
-import { execFileSync } from 'child_process';
-import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'fs';
-import { tmpdir } from 'os';
-import { join } from 'path';
-import { afterEach, describe, expect, it } from 'vitest';
-import { buildShaPlugin, gitIn, readBuildSha } from './buildSha';
-
-const SHA = 'b6b1d522f1c0a9d3e2b4c5d6e7f8091a2b3c4d5e';
-const gitAt =
-  (head, status = '') =>
-  (cmd, ...args) =>
-    cmd === 'rev-parse' ? (args[0] === '--show-prefix' ? '\n' : `${head}\n`) : status;
-
-describe('readBuildSha', () => {
-  it('reads the checkout it is built from', () => {
-    expect(readBuildSha({}, gitAt(SHA))).toBe(SHA);
-  });
-  it('marks a tree with uncommitted changes, so a stamp never vouches for code it does not hold', () => {
-    expect(readBuildSha({}, gitAt(SHA, ' M src/x.ts\n'))).toBe(`${SHA}-dirty`);
-  });
-  it('lets BUILD_SHA stand in where there is no git, and ignores a value that is not a full sha', () => {
-    const noGit = () => {
-      throw new Error('not a git repository');
-    };
-    expect(readBuildSha({ BUILD_SHA: SHA }, noGit)).toBe(SHA);
-    expect(readBuildSha({ BUILD_SHA: SHA }, gitAt(SHA))).toBe(SHA);
-    // a different HEAD is a mismatch, not a clean stamp of the explicit sha
-    expect(readBuildSha({ BUILD_SHA: SHA }, gitAt('c'.repeat(40)))).toBe(`${SHA}-mismatch`);
-    // a value that is not a lowercase full sha is ignored
-    ['b6b1d52', SHA.toUpperCase(), `${SHA}0`].forEach((v) =>
-      expect(readBuildSha({ BUILD_SHA: v }, noGit)).toBe('unknown')
-    );
-    // git that answers but cannot say what the tree holds fails closed
-    const brokenStatus = (cmd, ...args) => {
-      if (cmd === 'status') throw new Error('index file smaller than expected');
-      return args[0] === '--show-prefix' ? '\n' : `${SHA}\n`;
-    };
-    expect(readBuildSha({ BUILD_SHA: SHA }, brokenStatus)).toBe('unknown');
-    expect(readBuildSha({}, brokenStatus)).toBe('unknown');
-    expect(readBuildSha({}, gitAt('nope'))).toBe('unknown');
-    // inside another repository's subfolder git does not govern: the explicit sha stands
-    const nested = (cmd, ...args) => (args[0] === '--show-prefix' ? 'vendor/ratatoskr/\n' : SHA);
-    expect(readBuildSha({ BUILD_SHA: SHA }, nested)).toBe(SHA);
-    expect(readBuildSha({}, nested)).toBe('unknown');
-    expect(readBuildSha({ BUILD_SHA: 'main' }, noGit)).toBe('unknown');
-  });
-  it("says 'unknown' rather than failing the build when git is absent", () => {
-    expect(
-      readBuildSha({}, () => {
-        throw new Error('spawn git ENOENT');
-      })
-    ).toBe('unknown');
-  });
-});
-
-describe('readBuildSha against a real repository', () => {
-  const made = [];
-  afterEach(() => {
-    made.splice(0).forEach((d) => rmSync(d, { recursive: true, force: true }));
-  });
-  const repo = () => {
-    const dir = mkdtempSync(join(tmpdir(), 'buildsha-'));
-    made.push(dir);
-    const g = (...a) => execFileSync('git', a, { cwd: dir, stdio: 'ignore' });
-    g('init', '-q');
-    mkdirSync(join(dir, 'src'));
-    writeFileSync(join(dir, 'src', 'a.ts'), 'export {};\n');
-    g('add', '.');
-    g('-c', 'user.name=t', '-c', 'user.email=t@t', 'commit', '-qm', 'x');
-    return dir;
-  };
-  it("stays clean with vite's temp config file present, and is dirty with a stray source file", () => {
-    const dir = repo();
-    const run = gitIn(dir);
-    writeFileSync(join(dir, 'vite.config.js.timestamp-1700000000-abc123.mjs'), '');
-    expect(readBuildSha({}, run)).toMatch(/^[0-9a-f]{40}$/);
-    writeFileSync(join(dir, 'src', 'zz-stray.ts'), '');
-    expect(readBuildSha({}, run)).toMatch(/^[0-9a-f]{40}-dirty$/);
-  });
-});
-
-describe('readBuildSha dirty rules against a real repository', () => {
-  const made2 = [];
-  afterEach(() => {
-    made2.splice(0).forEach((d) => rmSync(d, { recursive: true, force: true }));
-  });
-  const TEMP = 'vite.config.js.timestamp-1700000000-abc123.mjs';
-  const repo2 = (tracked = []) => {
-    const dir = mkdtempSync(join(tmpdir(), 'buildsha-'));
-    made2.push(dir);
-    const g = (...a) => execFileSync('git', a, { cwd: dir, stdio: 'ignore' });
-    g('init', '-q');
-    mkdirSync(join(dir, 'src'));
-    writeFileSync(join(dir, 'src', 'a.ts'), 'export {};\n');
-    tracked.forEach((f) => writeFileSync(join(dir, f), 'x\n'));
-    g('add', '.');
-    g('-c', 'user.name=t', '-c', 'user.email=t@t', 'commit', '-qm', 'x');
-    return {
-      dir,
-      head: execFileSync('git', ['rev-parse', 'HEAD'], { cwd: dir, encoding: 'utf8' }).trim(),
-    };
-  };
-  it('does not let an explicit BUILD_SHA mask a dirty tree', () => {
-    const { dir, head } = repo2();
-    const run = gitIn(dir);
-    expect(readBuildSha({ BUILD_SHA: head }, run)).toBe(head);
-    writeFileSync(join(dir, 'src', 'zz-stray.ts'), '');
-    expect(readBuildSha({ BUILD_SHA: head }, run)).toBe(`${head}-dirty`);
-  });
-  it('lets git speak only for a tree whose root it is: an archive unpacked inside another repository keeps its explicit sha', () => {
-    const { dir } = repo2();
-    const inner = join(dir, 'vendor', 'ratatoskr');
-    mkdirSync(inner, { recursive: true });
-    writeFileSync(join(inner, 'x.ts'), '');
-    expect(readBuildSha({ BUILD_SHA: SHA }, gitIn(inner))).toBe(SHA);
-    expect(readBuildSha({}, gitIn(inner))).toBe('unknown');
-  });
-  it("notices an untracked .mjs that is not vite's temp file", () => {
-    const { dir, head } = repo2();
-    writeFileSync(join(dir, 'foo.mjs'), '');
-    expect(readBuildSha({}, gitIn(dir))).toBe(`${head}-dirty`);
-    rmSync(join(dir, 'foo.mjs'));
-    // only vite's exact shape is its own: vite.config.<ext>.timestamp-<digits>-<hex>.mjs
-    [
-      'vite.config.js.timestamp-1-ab.mjs.bak',
-      'vite.config.js.timestamp-x-ab.mjs',
-      'vite.config.js.timestamp-1-zz.mjs',
-      'vite.config.a.b.timestamp-1-ab.mjs',
-      'vite.config.js.timestamp-1-ab-c.mjs',
-    ].forEach((name) => {
-      writeFileSync(join(dir, name), '');
-      expect(readBuildSha({}, gitIn(dir)), name).toBe(`${head}-dirty`);
-      rmSync(join(dir, name));
-    });
-    expect(readBuildSha({}, gitIn(dir))).toBe(head);
-  });
-  it('treats a stray source file as dirty even beside the vite temp file, in the root or a subfolder', () => {
-    const { dir, head } = repo2();
-    const run = gitIn(dir);
-    writeFileSync(join(dir, TEMP), '');
-    writeFileSync(join(dir, 'src', TEMP), '');
-    expect(readBuildSha({}, run)).toBe(head);
-    writeFileSync(join(dir, 'src', 'zz-stray.ts'), '');
-    expect(readBuildSha({}, run)).toBe(`${head}-dirty`);
-  });
-  it('marks a tracked file of the temp name dirty once it changes', () => {
-    const { dir, head } = repo2([TEMP]);
-    const run = gitIn(dir);
-    expect(readBuildSha({}, run)).toBe(head);
-    writeFileSync(join(dir, TEMP), 'changed\n');
-    expect(readBuildSha({}, run)).toBe(`${head}-dirty`);
-  });
-  it('marks an untracked file in a new folder dirty (status lists files, not the folder)', () => {
-    const { dir, head } = repo2();
-    mkdirSync(join(dir, 'new'));
-    writeFileSync(join(dir, 'new', TEMP), '');
-    expect(readBuildSha({}, gitIn(dir))).toBe(head);
-    writeFileSync(join(dir, 'new', 'b.ts'), '');
-    expect(readBuildSha({}, gitIn(dir))).toBe(`${head}-dirty`);
-  });
-});
-
-describe('buildShaPlugin', () => {
-  it("hands vite a meta tag for the page's head carrying the sha", () => {
-    const plugin = buildShaPlugin(SHA);
-    expect(plugin.transformIndexHtml()).toEqual([
-      { tag: 'meta', attrs: { name: 'build-sha', content: SHA }, injectTo: 'head-prepend' },
-    ]);
-  });
-});

src/app/components/AccountDataEditor.tsx

@@ -16,7 +16,6 @@ import {
 } from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { Cursor } from '../plugins/text-area';
-import { PhoneHit } from '../styles/PhoneHit.css';
 import { syntaxErrorPosition } from '../utils/dom';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { Page, PageHeader } from './page';
@@ -295,7 +294,7 @@ export function AccountDataEditor({
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface" className={PhoneHit}>
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/components/BackupRestore.tsx

@@ -30,7 +30,6 @@ import {
 } from '../hooks/useKeyBackup';
 import { stopPropagation } from '../utils/keyboard';
 import { useRestoreBackupOnVerification } from '../hooks/useRestoreBackupOnVerification';
-import { PhoneHit } from '../styles/PhoneHit.css';
 
 type BackupStatusProps = {
   enabled: boolean;
@@ -178,7 +177,6 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
             <BackupSyncing count={remainingSession} />
           )}
           <IconButton
-            className={PhoneHit}
             aria-pressed={!!menuCords}
             size="300"
             variant="Surface"

src/app/components/DeviceVerification.tsx

@@ -30,7 +30,6 @@ import {
 } from '../hooks/useVerificationRequest';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { ContainerColor } from '../styles/ContainerColor.css';
-import { PhoneHit } from '../styles/PhoneHit.css';
 
 const DialogHeaderStyles: CSSProperties = {
   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -262,7 +261,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
               <Box grow="Yes">
                 <Text size="H4">Device Verification</Text>
               </Box>
-              <IconButton className={PhoneHit} size="300" radii="300" onClick={handleCancel}>
+              <IconButton size="300" radii="300" onClick={handleCancel}>
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/components/DeviceVerificationSetup.tsx

@@ -25,7 +25,6 @@ import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA';
 import { useMatrixClient } from '../hooks/useMatrixClient';
 import { useAlive } from '../hooks/useAlive';
 import { UseStateProvider } from './UseStateProvider';
-import { PhoneHit } from '../styles/PhoneHit.css';
 
 type UIACallback<T> = (
   authDict: AuthDict | null
@@ -302,7 +301,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
           <Box grow="Yes">
             <Text size="H4">Setup Device Verification</Text>
           </Box>
-          <IconButton className={PhoneHit} size="300" radii="300" onClick={onCancel}>
+          <IconButton size="300" radii="300" onClick={onCancel}>
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>
@@ -337,7 +336,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
           <Box grow="Yes">
             <Text size="H4">Reset Device Verification</Text>
           </Box>
-          <IconButton className={PhoneHit} size="300" radii="300" onClick={onCancel}>
+          <IconButton size="300" radii="300" onClick={onCancel}>
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>

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

@@ -27,7 +27,6 @@ import { AsyncStatus } from '../../hooks/useAsyncCallback';
 import { useZoom } from '../../hooks/useZoom';
 import { createPage, usePdfDocumentLoader, usePdfJSLoader } from '../../plugins/pdfjs-dist';
 import { stopPropagation } from '../../utils/keyboard';
-import { PhoneHit, PhoneHitSpread24 } from '../../styles/PhoneHit.css';
 
 export type PdfViewerProps = {
   name: string;
@@ -109,7 +108,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
       <Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
         <Header className={css.PdfViewerHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton className={PhoneHit} size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose}>
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>
@@ -118,7 +117,6 @@ export const PdfViewer = as<'div', PdfViewerProps>(
           </Box>
           <Box shrink="No" alignItems="Center" gap="200">
             <IconButton
-              className={PhoneHitSpread24}
               variant={zoom < 1 ? 'Success' : 'SurfaceVariant'}
               outlined={zoom < 1}
               size="300"
@@ -132,7 +130,6 @@ export const PdfViewer = as<'div', PdfViewerProps>(
               <Text size="B300">{Math.round(zoom * 100)}%</Text>
             </Chip>
             <IconButton
-              className={PhoneHitSpread24}
               variant={zoom > 1 ? 'Success' : 'SurfaceVariant'}
               outlined={zoom > 1}
               size="300"

src/app/components/UIAFlowOverlay.tsx

@@ -13,7 +13,6 @@ import {
   IconButton,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { PhoneHit } from '../styles/PhoneHit.css';
 
 export type UIAFlowOverlayProps = {
   currentStep: number;
@@ -54,7 +53,6 @@ export function UIAFlowOverlay({
             >
               {(anchorRef) => (
                 <IconButton
-                  className={PhoneHit}
                   ref={anchorRef}
                   variant="Critical"
                   size="300"

src/app/components/editor/Editor.preview.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Line,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+} from 'folds';
+
+import { CustomEditor, useEditor } from './Editor';
+import { Toolbar } from './Toolbar';
+import { stopPropagation } from '../../utils/keyboard';
+
+export function EditorPreview() {
+  const [open, setOpen] = useState(false);
+  const editor = useEditor();
+  const [toolbar, setToolbar] = useState(false);
+
+  return (
+    <>
+      <IconButton variant="SurfaceVariant" onClick={() => setOpen(!open)}>
+        <Icon src={Icons.BlockQuote} />
+      </IconButton>
+      <Overlay open={open} backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setOpen(false),
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Modal size="500">
+              <div style={{ padding: config.space.S400 }}>
+                <CustomEditor
+                  editor={editor}
+                  placeholder="Send a message..."
+                  before={
+                    <IconButton variant="SurfaceVariant" size="300" radii="300">
+                      <Icon src={Icons.PlusCircle} />
+                    </IconButton>
+                  }
+                  after={
+                    <>
+                      <IconButton
+                        variant="SurfaceVariant"
+                        size="300"
+                        radii="300"
+                        onClick={() => setToolbar(!toolbar)}
+                        aria-pressed={toolbar}
+                      >
+                        <Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
+                      </IconButton>
+                      <IconButton variant="SurfaceVariant" size="300" radii="300">
+                        <Icon src={Icons.Smile} />
+                      </IconButton>
+                      <IconButton variant="SurfaceVariant" size="300" radii="300">
+                        <Icon src={Icons.Send} />
+                      </IconButton>
+                    </>
+                  }
+                  bottom={
+                    toolbar && (
+                      <div>
+                        <Line variant="SurfaceVariant" size="300" />
+                        <Toolbar />
+                      </div>
+                    )
+                  }
+                />
+              </div>
+            </Modal>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    </>
+  );
+}

src/app/components/editor/Toolbar.tsx

@@ -36,7 +36,6 @@ import { KeySymbol } from '../../utils/key-symbol';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { stopPropagation } from '../../utils/keyboard';
-import { PhoneHit, PhoneHitRoom36, PhoneHitSpread36 } from '../../styles/PhoneHit.css';
 
 function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
   return (
@@ -73,7 +72,6 @@ export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
     <TooltipProvider tooltip={tooltip} delay={500}>
       {(triggerRef) => (
         <IconButton
-          className={PhoneHitSpread36}
           ref={triggerRef}
           variant="SurfaceVariant"
           onClick={handleClick}
@@ -106,7 +104,6 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
     <TooltipProvider tooltip={tooltip} delay={500}>
       {(triggerRef) => (
         <IconButton
-          className={PhoneHitSpread36}
           ref={triggerRef}
           variant="SurfaceVariant"
           onClick={handleClick}
@@ -166,7 +163,6 @@ export function HeadingBlockButton() {
               >
                 {(triggerRef) => (
                   <IconButton
-                    className={PhoneHitRoom36}
                     ref={triggerRef}
                     onClick={() => handleMenuSelect(1)}
                     size="400"
@@ -182,7 +178,6 @@ export function HeadingBlockButton() {
               >
                 {(triggerRef) => (
                   <IconButton
-                    className={PhoneHitRoom36}
                     ref={triggerRef}
                     onClick={() => handleMenuSelect(2)}
                     size="400"
@@ -198,7 +193,6 @@ export function HeadingBlockButton() {
               >
                 {(triggerRef) => (
                   <IconButton
-                    className={PhoneHitRoom36}
                     ref={triggerRef}
                     onClick={() => handleMenuSelect(3)}
                     size="400"
@@ -214,7 +208,6 @@ export function HeadingBlockButton() {
       }
     >
       <IconButton
-        className={PhoneHit}
         style={{ width: 'unset' }}
         variant="SurfaceVariant"
         onClick={handleMenuOpen}
@@ -246,7 +239,6 @@ export function ExitFormatting({ tooltip }: ExitFormattingProps) {
     <TooltipProvider tooltip={tooltip} delay={500}>
       {(triggerRef) => (
         <IconButton
-          className={PhoneHit}
           ref={triggerRef}
           variant="SurfaceVariant"
           onClick={handleClick}
@@ -352,7 +344,6 @@ export function Toolbar() {
             >
               {(triggerRef) => (
                 <IconButton
-                  className={PhoneHit}
                   ref={triggerRef}
                   variant="SurfaceVariant"
                   onClick={() => setIsMarkdown(!isMarkdown)}

src/app/components/emoji-board/components/Sidebar.tsx

@@ -14,7 +14,6 @@ import {
 } from 'folds';
 import classNames from 'classnames';
 import * as css from './styles.css';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 export function Sidebar({ children }: { children: ReactNode }) {
   return (
@@ -69,7 +68,6 @@ function SidebarBtn<T extends string>({
     >
       {(ref) => (
         <IconButton
-          className={PhoneHit}
           aria-pressed={active}
           aria-labelledby={`SidebarStackItem-${id}-label`}
           ref={ref}

src/app/components/event-readers/EventReaders.tsx

@@ -24,7 +24,6 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getMouseEventCords } from '../../utils/dom';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 export type EventReadersProps = {
   room: Room;
@@ -53,7 +52,7 @@ export const EventReaders = as<'div', EventReadersProps>(
           <Box grow="Yes">
             <Text size="H3">Seen by</Text>
           </Box>
-          <IconButton className={PhoneHit} size="300" onClick={requestClose}>
+          <IconButton size="300" onClick={requestClose}>
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>

src/app/components/image-editor/ImageEditor.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import classNames from 'classnames';
 import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
 import * as css from './ImageEditor.css';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 export type ImageEditorProps = {
   name: string;
@@ -25,7 +24,7 @@ export const ImageEditor = as<'div', ImageEditorProps>(
       >
         <Header className={css.ImageEditorHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton className={PhoneHit} size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose}>
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>

src/app/components/image-pack-view/ImagePackView.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds';
 import { PackAddress } from '../../plugins/custom-emoji';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 import { Page, PageHeader, PageContent } from '../page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { RoomImagePack } from './RoomImagePack';
@@ -30,7 +29,7 @@ export function ImagePackView({ address, requestClose }: ImagePackViewProps) {
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface" className={PhoneHit}>
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

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

@@ -7,7 +7,6 @@ import * as css from './ImageViewer.css';
 import { useZoom } from '../../hooks/useZoom';
 import { usePan } from '../../hooks/usePan';
 import { downloadMedia } from '../../utils/matrix';
-import { PhoneHit, PhoneHitSpread24 } from '../../styles/PhoneHit.css';
 
 export type ImageViewerProps = {
   alt: string;
@@ -34,7 +33,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
       >
         <Header className={css.ImageViewerHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton className={PhoneHit} size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose}>
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>
@@ -43,7 +42,6 @@ export const ImageViewer = as<'div', ImageViewerProps>(
           </Box>
           <Box shrink="No" alignItems="Center" gap="200">
             <IconButton
-              className={PhoneHitSpread24}
               variant={zoom < 1 ? 'Success' : 'SurfaceVariant'}
               outlined={zoom < 1}
               size="300"
@@ -57,7 +55,6 @@ export const ImageViewer = as<'div', ImageViewerProps>(
               <Text size="B300">{Math.round(zoom * 100)}%</Text>
             </Chip>
             <IconButton
-              className={PhoneHitSpread24}
               variant={zoom > 1 ? 'Success' : 'SurfaceVariant'}
               outlined={zoom > 1}
               size="300"

src/app/components/invite-user-prompt/InviteUserPrompt.tsx

@@ -42,7 +42,6 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { BreakWord } from '../../styles/Text.css';
 import { useAlive } from '../../hooks/useAlive';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -174,7 +173,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   </Text>
                 </Box>
                 <Box shrink="No">
-                  <IconButton className={PhoneHit} size="300" radii="300" onClick={requestClose}>
+                  <IconButton size="300" radii="300" onClick={requestClose}>
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 </Box>

src/app/components/join-address-prompt/JoinAddressPrompt.tsx

@@ -20,7 +20,6 @@ import { stopPropagation } from '../../utils/keyboard';
 import { isRoomAlias, isRoomId } from '../../utils/matrix';
 import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';
 import { tryDecodeURIComponent } from '../../utils/dom';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type JoinAddressProps = {
   onOpen: (roomIdOrAlias: string, via?: string[], eventId?: string) => void;
@@ -83,7 +82,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
               <Box grow="Yes">
                 <Text size="H4">Join with Address</Text>
               </Box>
-              <IconButton className={PhoneHit} size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx

@@ -20,7 +20,6 @@ import { MatrixError } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../utils/keyboard';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type LeaveRoomPromptProps = {
   roomId: string;
@@ -69,7 +68,7 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
               <Box grow="Yes">
                 <Text size="H4">Leave Room</Text>
               </Box>
-              <IconButton className={PhoneHit} size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx

@@ -20,7 +20,6 @@ import { MatrixError } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../utils/keyboard';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type LeaveSpacePromptProps = {
   roomId: string;
@@ -69,7 +68,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
               <Box grow="Yes">
                 <Text size="H4">Leave Space</Text>
               </Box>
-              <IconButton className={PhoneHit} size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/components/message/FileHeader.tsx

@@ -2,7 +2,6 @@ import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'f
 import React, { ReactNode, useCallback } from 'react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import FileSaver from 'file-saver';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 import { mimeTypeToExt } from '../../utils/mimeTypes';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -49,7 +48,6 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
       variant={hasError ? 'Critical' : 'SurfaceVariant'}
       size="300"
       radii="300"
-      className={PhoneHit}
     >
       {downloading ? (
         <Spinner size="100" variant={hasError ? 'Critical' : 'Secondary'} />

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

@@ -1,9 +1,6 @@
 import { createVar, style } from '@vanilla-extract/css';
 import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
-import { MOBILE_BREAKPOINT } from '../../hooks/useScreenSize';
-import { PHONE_TAP } from '../../styles/PhoneHit.css';
 
-const PHONE = `screen and (max-width: ${MOBILE_BREAKPOINT}px)`;
 const Container = createVar();
 const ContainerHover = createVar();
 const ContainerActive = createVar();
@@ -28,14 +25,6 @@ export const Reaction = style([
     selectors: {
       'button&': {
         cursor: 'pointer',
-        // Phone tap target: the chip is 26 px tall, so its hit area grows 9 px above and below (an ::after) and the
-        // same 9 px of margin opens the row, so the chips of one row and of the next never share a tap.
-        '@media': { [PHONE]: { position: 'relative', marginBlock: (PHONE_TAP - 26) / 2 } },
-      },
-      'button&::after': {
-        '@media': {
-          [PHONE]: { content: '""', position: 'absolute', inset: `${-(PHONE_TAP - 26) / 2}px 0` },
-        },
       },
       '&[aria-pressed=true]': {
         vars: {

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

@@ -3,7 +3,6 @@ import React, { ReactNode, useCallback, useRef, useState } from 'react';
 import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { Range } from 'react-range';
-import { PhoneHitSpread24 } from '../../../styles/PhoneHit.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { IAudioInfo } from '../../../../types/matrix/common';
@@ -160,7 +159,6 @@ export function AudioContent({
           variant="SurfaceVariant"
           size="300"
           radii="Pill"
-          className={PhoneHitSpread24}
           onClick={() => setMute(!mute)}
           aria-pressed={mute}
         >

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

@@ -299,10 +299,7 @@ export const BubbleLeftArrow = style({
 });
 
 // Phone tap target: a sender name is 23 px tall, so the button grows 11 px above and below (44+ px to tap) and the
-// negative margin takes the growth back out of the layout. Sideways it cannot borrow from the layout the
-// same way (a negative inline margin makes the button shrink inside its shrink-to-fit parent and clip the name), so
-// a name under 44 px is 44 px wide, text kept at the start: real growth of at most 16 px, in a row with room for it.
-// No background, border or outline moves.
+// negative margin takes the growth back out of the layout. Hit area only: no background, border or outline moves.
 const SCREEN_PHONE = `screen and (max-width: ${MOBILE_BREAKPOINT}px)`;
 export const Username = style({
   overflow: 'hidden',
@@ -312,7 +309,7 @@ export const Username = style({
     'button&': {
       cursor: 'pointer',
       '@media': {
-        [SCREEN_PHONE]: { paddingBlock: 11, marginBlock: -11, minWidth: 44, textAlign: 'start' },
+        [SCREEN_PHONE]: { paddingBlock: 11, marginBlock: -11 },
       },
     },
     'button&:hover, button&:focus-visible': {

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

@@ -53,10 +53,6 @@ export const NavCategoryHeader = style({
     '&&': { paddingLeft: 0 },
   },
   '@media': {
-    // A phone's section header is as tall as its 44 px button, so it does not overlap the next row.
-    'screen and (max-width: 750px)': {
-      selectors: { '&&': { minHeight: toRem(44), height: toRem(44) } },
-    },
     // Category labels sit on the scene like the rows do, and need a wash to be read (wide screens;
     // a phone's list is plain text).
     'screen and (min-width: 751px)': {
@@ -121,8 +117,6 @@ const NavItemBase = style({
     [PHONE]: {
       backgroundColor: 'transparent',
       borderRadius: 0,
-      // The row is as tall as the 44 px tap target inside it (EstateNavigator.css.ts), so neighbours do not overlap.
-      minHeight: toRem(44),
     },
     [WIDE]: {
       selectors: {

src/app/components/password-input/PasswordInput.tsx

@@ -1,7 +1,6 @@
 import React, { ComponentProps, forwardRef } from 'react';
 import { Icon, IconButton, Input, config, Icons } from 'folds';
 import { UseStateProvider } from '../UseStateProvider';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type PasswordInputProps = Omit<ComponentProps<typeof Input>, 'type' | 'size'> & {
   size: '400' | '500';
@@ -24,7 +23,6 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
               <>
                 {after}
                 <IconButton
-                  className={PhoneHit}
                   onClick={() => setVisible(!visible)}
                   type="button"
                   variant={visible ? 'Warning' : variant}

src/app/components/room-topic-viewer/RoomTopicViewer.tsx

@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import Linkify from 'linkify-react';
 import * as css from './style.css';
 import { LINKIFY_OPTS, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 export const RoomTopicViewer = as<
   'div',
@@ -27,7 +26,7 @@ export const RoomTopicViewer = as<
           {name}
         </Text>
       </Box>
-      <IconButton className={PhoneHit} size="300" onClick={requestClose} radii="300">
+      <IconButton size="300" onClick={requestClose} radii="300">
         <Icon src={Icons.Cross} />
       </IconButton>
     </Header>

src/app/components/text-viewer/TextViewer.tsx

@@ -5,7 +5,6 @@ import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'fo
 import { ErrorBoundary } from 'react-error-boundary';
 import * as css from './TextViewer.css';
 import { copyToClipboard } from '../../utils/dom';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 const ReactPrism = lazy(() => import('../../plugins/react-prism/ReactPrism'));
 
@@ -54,7 +53,7 @@ export const TextViewer = as<'div', TextViewerProps>(
       >
         <Header className={css.TextViewerHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton className={PhoneHit} size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose}>
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>

src/app/components/uia-stages/PasswordStage.tsx

@@ -4,7 +4,6 @@ import { AuthType } from 'matrix-js-sdk';
 import { StageComponentProps } from './types';
 import { ErrorCode } from '../../cs-errorcode';
 import { PasswordInput } from '../password-input';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 export function PasswordStage({
   stageData,
@@ -46,7 +45,7 @@ export function PasswordStage({
         <Box grow="Yes">
           <Text size="H4">Account Password</Text>
         </Box>
-        <IconButton className={PhoneHit} size="300" onClick={onCancel} radii="300">
+        <IconButton size="300" onClick={onCancel} radii="300">
           <Icon src={Icons.Cross} />
         </IconButton>
       </Header>

src/app/components/uia-stages/SSOStage.tsx

@@ -1,7 +1,6 @@
 import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
 import React, { useCallback, useEffect, useState } from 'react';
 import { StageComponentProps } from './types';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 export function SSOStage({
   ssoRedirectURL,
@@ -57,7 +56,7 @@ export function SSOStage({
         <Box grow="Yes">
           <Text size="H4">SSO Login</Text>
         </Box>
-        <IconButton className={PhoneHit} size="300" onClick={onCancel} radii="300">
+        <IconButton size="300" onClick={onCancel} radii="300">
           <Icon src={Icons.Cross} />
         </IconButton>
       </Header>

src/app/components/upload-card/CompactUploadCardRenderer.tsx

@@ -6,7 +6,6 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { TUploadContent } from '../../utils/matrix';
 import { bytesToSize, getFileTypeIcon } from '../../utils/common';
 import { useMediaConfig } from '../../hooks/useMediaConfig';
-import { PhoneHitSpread28 } from '../../styles/PhoneHit.css';
 
 type CompactUploadCardRendererProps = {
   isEncrypted?: boolean;
@@ -64,7 +63,6 @@ export function CompactUploadCardRenderer({
             </Chip>
           )}
           <IconButton
-            className={PhoneHitSpread28}
             onClick={removeUpload}
             aria-label="Cancel Upload"
             variant="SurfaceVariant"

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -12,7 +12,6 @@ import {
 } from '../../state/room/roomInputDrafts';
 import { useObjectURL } from '../../hooks/useObjectURL';
 import { useMediaConfig } from '../../hooks/useMediaConfig';
-import { PhoneHitSpread28 } from '../../styles/PhoneHit.css';
 
 type PreviewImageProps = {
   fileItem: TUploadItem;
@@ -161,7 +160,6 @@ export function UploadCardRenderer({
             </Chip>
           )}
           <IconButton
-            className={PhoneHitSpread28}
             onClick={removeUpload}
             aria-label="Cancel Upload"
             variant="SurfaceVariant"

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

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { IPreviewUrlResponse } from 'matrix-js-sdk';
 import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
@@ -11,7 +10,6 @@ import {
   useIntersectionObserver,
 } from '../../hooks/useIntersectionObserver';
 import * as css from './UrlPreviewCard.css';
-import { PhoneHitInPlace } from '../../styles/PhoneHit.css';
 import { tryDecodeURIComponent } from '../../utils/dom';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -183,10 +181,7 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
             <>
               <div className={css.UrlPreviewHolderGradient({ position: 'Left' })} />
               <IconButton
-                className={classNames(
-                  css.UrlPreviewHolderBtn({ position: 'Left' }),
-                  PhoneHitInPlace
-                )}
+                className={css.UrlPreviewHolderBtn({ position: 'Left' })}
                 variant="Secondary"
                 radii="Pill"
                 size="300"
@@ -204,10 +199,7 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
               <>
                 <div className={css.UrlPreviewHolderGradient({ position: 'Right' })} />
                 <IconButton
-                  className={classNames(
-                    css.UrlPreviewHolderBtn({ position: 'Right' }),
-                    PhoneHitInPlace
-                  )}
+                  className={css.UrlPreviewHolderBtn({ position: 'Right' })}
                   variant="Primary"
                   radii="Pill"
                   size="300"

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

@@ -43,7 +43,6 @@ import { getPowerTagIconSrc, useGetMemberPowerTag } from '../../hooks/useMemberP
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type SelfDemoteAlertProps = {
   power: number;
@@ -71,7 +70,7 @@ function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
               <Box grow="Yes">
                 <Text size="H4">Self Demotion</Text>
               </Box>
-              <IconButton className={PhoneHit} size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>
@@ -121,7 +120,7 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
               <Box grow="Yes">
                 <Text size="H4">Shared Power</Text>
               </Box>
-              <IconButton className={PhoneHit} size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/add-existing/AddExisting.tsx

@@ -54,7 +54,6 @@ import { StateEvent } from '../../../types/matrix/room';
 import { getViaServers } from '../../plugins/via-servers';
 import { rateLimitedActions } from '../../utils/matrix';
 import { useAlive } from '../../hooks/useAlive';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 const SEARCH_OPTS: UseAsyncSearchOptions = {
   limit: 500,
@@ -202,7 +201,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                   <Text size="H4">Add Existing</Text>
                 </Box>
                 <Box shrink="No">
-                  <IconButton className={PhoneHit} size="300" radii="300" onClick={requestClose}>
+                  <IconButton size="300" radii="300" onClick={requestClose}>
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 </Box>

src/app/features/albums/ShareSet.test.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { describe, expect, it } from 'vitest';
-import { ClientConfigProvider } from '../../hooks/useClientConfig';
-import type { ClientConfig } from '../../hooks/useClientConfig';
-import { ShareState } from './shareController';
-import { ShareSetView, shareEnabled, useShareEnabled } from './ShareSet';
-
-const text = (html: string) =>
-  html
-    .replace(/<[^>]*>/g, ' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-const noop = () => undefined;
-const file = (name: string) => ({ name, type: 'audio/ogg' } as File);
-
-const view = (over: Partial<ShareState<File>> = {}) =>
-  renderToStaticMarkup(
-    <ShareSetView
-      state={{ files: [], title: '', phase: { kind: 'idle' }, epoch: 0, ...over }}
-      onPickClick={noop}
-      onPicked={noop}
-      onTitle={noop}
-      onSend={noop}
-      onCancel={noop}
-    />
-  );
-
-describe('the share panel, drawn', () => {
-  it('idle: one "Share files" row and no title, names, Send or Cancel', () => {
-    const html = view();
-    expect(text(html)).toBe('Share files ›');
-    expect(html).not.toContain('aria-label="Album title"');
-    expect(html).toContain('type="file"');
-    expect(html).toContain('multiple');
-    expect(html).toContain('hidden');
-  });
-
-  it('picked: the title field, the names on one line, Send N files and Cancel; no pick row', () => {
-    const html = view({ files: [file('a.ogg'), file('b.ogg')] });
-    expect(html).toContain('aria-label="Album title"');
-    expect(html).toContain('placeholder="Shared files"');
-    expect(text(html)).toBe('a.ogg · b.ogg Send 2 files Cancel');
-    expect(text(html)).not.toContain('Share files');
-  });
-
-  it('one picked file reads "Send 1 file"', () => {
-    expect(text(view({ files: [file('a.ogg')] }))).toContain('Send 1 file Cancel');
-  });
-
-  it('sending: progress replaces Send and Cancel, and the title is locked', () => {
-    const html = view({
-      files: [file('a'), file('b'), file('c')],
-      phase: { kind: 'sending', done: 2 },
-    });
-    expect(text(html)).toContain('Sending 2 of 3…');
-    expect(text(html)).not.toContain('Send 3 files');
-    expect(text(html)).not.toContain('Cancel');
-    expect(html).toMatch(
-      /aria-label="Album title"[^>]*disabled|disabled[^>]*aria-label="Album title"/
-    );
-  });
-
-  it('the encrypted note shows above the kept pick', () => {
-    const html = view({
-      files: [file('a.ogg')],
-      phase: { kind: 'done', text: 'Not shared: this room is encrypted.' },
-    });
-    expect(text(html)).toBe('Not shared: this room is encrypted. a.ogg Send 1 file Cancel');
-  });
-
-  it('after a full success the idle row and the note show together', () => {
-    expect(text(view({ phase: { kind: 'done', text: 'Shared 2 files.' } }))).toBe(
-      'Share files › Shared 2 files.'
-    );
-  });
-});
-
-describe('the flag', () => {
-  it('off, missing or empty offers no share', () => {
-    expect(shareEnabled({}, false)).toBe(false);
-    expect(shareEnabled({ fileZoneShare: {} }, false)).toBe(false);
-    expect(shareEnabled({ fileZoneShare: { enabled: false } }, false)).toBe(false);
-  });
-
-  it('on offers it, except in an encrypted room', () => {
-    expect(shareEnabled({ fileZoneShare: { enabled: true } }, false)).toBe(true);
-    expect(shareEnabled({ fileZoneShare: { enabled: true } }, true)).toBe(false);
-  });
-
-  it('the hook reads the client config and the room, as AlbumView mounts it', () => {
-    const room = (encrypted: boolean) => ({ hasEncryptionStateEvent: () => encrypted } as never);
-    function Probe({ encrypted }: { encrypted: boolean }) {
-      return <span>{String(useShareEnabled(room(encrypted)))}</span>;
-    }
-    const probe = (config: ClientConfig, encrypted: boolean) =>
-      text(
-        renderToStaticMarkup(
-          <ClientConfigProvider value={config}>
-            <Probe encrypted={encrypted} />
-          </ClientConfigProvider>
-        )
-      );
-    expect(probe({}, false)).toBe('false');
-    expect(probe({ fileZoneShare: { enabled: true } }, false)).toBe('true');
-    expect(probe({ fileZoneShare: { enabled: true } }, true)).toBe('false');
-  });
-});

src/app/features/albums/ShareSet.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useSyncExternalStore } from 'react';
+import React, { useRef, useState } from 'react';
 import { Text } from 'folds';
 import { useQueryClient } from '@tanstack/react-query';
 import { Room } from 'matrix-js-sdk';
@@ -8,55 +8,104 @@ import { uploadContent } from '../../utils/matrix';
 import { safeFile } from '../../utils/mimeTypes';
 import { getMsgContent } from '../room/msgContent';
 import { FILE_HASH_KEY, hashForSend } from './fileReceipt';
-import { ShareController, ShareState, createShareController } from './shareController';
-import { DEFAULT_TITLE, sendShareSet } from './shareSet';
+import { DEFAULT_TITLE, remainingAfter, resultNote, sendShareSet } from './shareSet';
 import * as css from './AlbumView.css';
 
 /** Off unless `fileZoneShare.enabled` is true. An encrypted zone is never offered the share. */
-export const shareEnabled = (
-  config: { fileZoneShare?: { enabled?: boolean } },
-  encrypted: boolean
-) => !!config.fileZoneShare?.enabled && !encrypted;
-
 export const useShareEnabled = (room: Room): boolean =>
-  shareEnabled(useClientConfig(), room.hasEncryptionStateEvent());
+  !!useClientConfig().fileZoneShare?.enabled && !room.hasEncryptionStateEvent();
 
-type ShareViewProps = {
-  state: ShareState<File>;
-  onPickClick: () => void;
-  onPicked: (files: File[]) => void;
-  onTitle: (title: string) => void;
-  onSend: () => void;
-  onCancel: () => void;
-  inputRef?: React.Ref<HTMLInputElement>;
-};
+/** Rooms with a share in flight. Module-level: leaving the page unmounts the panel, not the send. */
+const sending = new Set<string>();
+
+type Phase = { kind: 'idle' } | { kind: 'sending'; done: number } | { kind: 'done'; text: string };
 
 /**
  * One row when idle. Picking files (any number, one picker) opens the panel: a title, the picked
- * names, Send. Nothing but the row is visible until files are picked.
+ * names, Send. Sending makes one album of them (shareSet.ts). Nothing here is visible until used.
  */
-export function ShareSetView({
-  state,
-  onPickClick,
-  onPicked,
-  onTitle,
-  onSend,
-  onCancel,
-  inputRef,
-}: ShareViewProps) {
-  const { files, title, phase, epoch } = state;
+export function ShareSet({ room }: { room: Room }) {
+  const mx = useMatrixClient();
+  const queryClient = useQueryClient();
+  const input = useRef<HTMLInputElement>(null);
+  const [files, setFiles] = useState<File[]>([]);
+  const [title, setTitle] = useState('');
+  const [phase, setPhase] = useState<Phase>({ kind: 'idle' });
+
+  const reset = () => {
+    setFiles([]);
+    setTitle('');
+    if (input.current) input.current.value = '';
+  };
+
+  const send = async () => {
+    // One send at a time, and never into a room that has turned encrypted since the panel mounted.
+    if (sending.has(room.roomId)) return;
+    if (room.hasEncryptionStateEvent()) {
+      setPhase({ kind: 'done', text: 'Not shared: this room is encrypted.' });
+      return;
+    }
+    sending.add(room.roomId);
+    const items = files.map((file) => ({ name: file.name, mimeType: file.type, file }));
+    setPhase({ kind: 'sending', done: 0 });
+    let settled = 0;
+    try {
+      const res = await sendShareSet(
+        {
+          send: async (content) => (await mx.sendMessage(room.roomId, content as any)).event_id,
+          contentOf: async (f) => {
+            const file = safeFile(f.file);
+            const mxc = await new Promise<string>((resolve, reject) => {
+              uploadContent(mx, file, { onSuccess: resolve, onError: reject });
+            });
+            const content = await getMsgContent(
+              mx,
+              {
+                file,
+                originalFile: f.file,
+                metadata: { markedAsSpoiler: false },
+                encInfo: undefined,
+              },
+              mxc
+            );
+            const sha256 = await hashForSend(f.file);
+            if (sha256) content.info = { ...content.info, [FILE_HASH_KEY]: sha256 };
+            return content;
+          },
+          onFile: () => {
+            settled += 1;
+            setPhase({ kind: 'sending', done: settled });
+          },
+        },
+        title,
+        items
+      );
+      queryClient.invalidateQueries({ queryKey: ['albums', room.roomId] });
+      const left = remainingAfter(items, res).map((i) => i.file);
+      setFiles(left);
+      if (left.length === 0) reset();
+      setPhase({ kind: 'done', text: resultNote(res) });
+    } catch (e: any) {
+      setPhase({ kind: 'done', text: `Could not share: ${e?.message ?? 'send failed'}` });
+    } finally {
+      sending.delete(room.roomId);
+    }
+  };
+
   return (
     <div className={css.SharePanel}>
       <input
-        key={epoch}
-        ref={inputRef}
+        ref={input}
         type="file"
         multiple
         hidden
-        onChange={(e) => onPicked(Array.from(e.target.files ?? []))}
+        onChange={(e) => {
+          setFiles(Array.from(e.target.files ?? []));
+          setPhase({ kind: 'idle' });
+        }}
       />
       {files.length === 0 && phase.kind !== 'sending' && (
-        <button type="button" className={css.Row} onClick={onPickClick}>
+        <button type="button" className={css.Row} onClick={() => input.current?.click()}>
           <Text size="B400">Share files ›</Text>
         </button>
       )}
@@ -73,7 +122,7 @@ export function ShareSetView({
             placeholder={DEFAULT_TITLE}
             aria-label="Album title"
             disabled={phase.kind === 'sending'}
-            onChange={(e) => onTitle(e.target.value)}
+            onChange={(e) => setTitle(e.target.value)}
           />
           <Text size="T200" className={`${css.Dim} ${css.ShareNames}`}>
             {files.map((f) => f.name).join(' · ')}
@@ -84,12 +133,12 @@ export function ShareSetView({
             </Text>
           ) : (
             <>
-              <button type="button" className={css.Row} onClick={onSend}>
+              <button type="button" className={css.Row} onClick={send}>
                 <Text size="B400">
                   Send {files.length} {files.length === 1 ? 'file' : 'files'}
                 </Text>
               </button>
-              <button type="button" className={css.Row} onClick={onCancel}>
+              <button type="button" className={css.Row} onClick={reset}>
                 <Text size="B400">Cancel</Text>
               </button>
             </>
@@ -99,62 +148,3 @@ export function ShareSetView({
     </div>
   );
 }
-
-export function ShareSet({ room }: { room: Room }) {
-  const mx = useMatrixClient();
-  const queryClient = useQueryClient();
-  const input = useRef<HTMLInputElement>(null);
-  // Built once per mount (AlbumView keys the panel by room): the pick lives in the controller, so a
-  // rerender with a new client or Room object must not build another. Live values go through `live`.
-  const live = useRef({ mx, room, queryClient });
-  live.current = { mx, room, queryClient };
-  const [controller]: [ShareController<File>, unknown] = useState(() =>
-    createShareController<File>({
-      roomId: room.roomId,
-      isEncrypted: () => live.current.room.hasEncryptionStateEvent(),
-      onSent: () =>
-        live.current.queryClient.invalidateQueries({ queryKey: ['albums', room.roomId] }),
-      run: (files, title, onFile) =>
-        sendShareSet(
-          {
-            send: async (content) =>
-              (await live.current.mx.sendMessage(room.roomId, content as any)).event_id,
-            contentOf: async (f) => {
-              const file = safeFile(f.file);
-              const mxc = await new Promise<string>((resolve, reject) => {
-                uploadContent(live.current.mx, file, { onSuccess: resolve, onError: reject });
-              });
-              const content = await getMsgContent(
-                live.current.mx,
-                {
-                  file,
-                  originalFile: f.file,
-                  metadata: { markedAsSpoiler: false },
-                  encInfo: undefined,
-                },
-                mxc
-              );
-              const sha256 = await hashForSend(f.file);
-              if (sha256) content.info = { ...content.info, [FILE_HASH_KEY]: sha256 };
-              return content;
-            },
-            onFile,
-          },
-          title,
-          files.map((file) => ({ name: file.name, mimeType: file.type, file }))
-        ),
-    })
-  );
-  const state = useSyncExternalStore(controller.subscribe, controller.getState);
-  return (
-    <ShareSetView
-      state={state}
-      inputRef={input}
-      onPickClick={() => input.current?.click()}
-      onPicked={controller.pick}
-      onTitle={controller.setTitle}
-      onSend={controller.send}
-      onCancel={controller.cancel}
-    />
-  );
-}

src/app/features/albums/shareController.test.ts

@@ -1,261 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { Picked, ShareDeps, createShareController } from './shareController';
-import { ShareResult } from './shareSet';
-
-const file = (name: string): Picked => ({ name, type: 'audio/ogg' });
-const ok = (n: number): ShareResult => ({ albumId: '$r', sent: n, failed: [], failedAt: [] });
-
-/** A run the test settles by hand, so "in flight" is a state the test can stand in. */
-const hand = () => {
-  const calls: { files: Picked[]; title: string; onFile: () => void }[] = [];
-  let release: (r: ShareResult) => void = () => undefined;
-  let fail: (e: Error) => void = () => undefined;
-  const run: ShareDeps<Picked>['run'] = (files, title, onFile) => {
-    calls.push({ files, title, onFile });
-    return new Promise<ShareResult>((resolve, reject) => {
-      release = resolve;
-      fail = reject;
-    });
-  };
-  return { calls, run, release: (r: ShareResult) => release(r), fail: (e: Error) => fail(e) };
-};
-
-const make = (over: Partial<ShareDeps<Picked>> = {}, roomId = '!zone:x') => {
-  const h = hand();
-  const sentTo: string[] = [];
-  const c = createShareController<Picked>({
-    roomId,
-    isEncrypted: () => false,
-    run: h.run,
-    onSent: () => sentTo.push(roomId),
-    ...over,
-  });
-  return { c, h, sentTo };
-};
-
-describe('picking', () => {
-  it('starts idle with nothing picked, and a pick holds the files in order', () => {
-    const { c } = make();
-    expect(c.getState().files).toEqual([]);
-    expect(c.getState().phase).toEqual({ kind: 'idle' });
-    c.pick([file('a'), file('b')]);
-    expect(c.getState().files.map((f) => f.name)).toEqual(['a', 'b']);
-  });
-
-  it('Cancel empties the pick and the title and bumps the input epoch', () => {
-    const { c } = make();
-    c.pick([file('a')]);
-    c.setTitle('Take 4');
-    const before = c.getState().epoch;
-    c.cancel();
-    expect(c.getState()).toMatchObject({ files: [], title: '', epoch: before + 1 });
-  });
-
-  it('subscribers hear every change and stop hearing after unsubscribe', () => {
-    const { c } = make();
-    let heard = 0;
-    const off = c.subscribe(() => {
-      heard += 1;
-    });
-    c.pick([file('a')]);
-    off();
-    c.pick([]);
-    expect(heard).toBe(1);
-  });
-});
-
-describe('the Send guard', () => {
-  it('a double tap starts one send', async () => {
-    const { c, h } = make();
-    c.pick([file('a'), file('b')]);
-    const first = c.send();
-    const second = c.send();
-    expect(h.calls).toHaveLength(1);
-    h.release(ok(2));
-    await Promise.all([first, second]);
-    expect(h.calls).toHaveLength(1);
-  });
-
-  it('a re-mounted panel for the same room cannot start a second send while one is in flight', async () => {
-    const { c, h } = make();
-    c.pick([file('a')]);
-    const first = c.send();
-    // The page was left and returned to: a new controller, nothing picked in it but a new pick.
-    const again = make({}, '!zone:x');
-    again.c.pick([file('b')]);
-    await again.c.send();
-    expect(again.h.calls).toHaveLength(0);
-    h.release(ok(1));
-    await first;
-    // Once the first has settled the room is free again.
-    const next = again.c.send();
-    expect(again.h.calls).toHaveLength(1);
-    again.h.release(ok(1));
-    await next;
-  });
-
-  it('another room is not blocked by a send in flight', async () => {
-    const a = make({}, '!a:x');
-    const b = make({}, '!b:x');
-    a.c.pick([file('a')]);
-    b.c.pick([file('b')]);
-    const sendA = a.c.send();
-    const sendB = b.c.send();
-    expect(b.h.calls).toHaveLength(1);
-    a.h.release(ok(1));
-    b.h.release(ok(1));
-    await Promise.all([sendA, sendB]);
-  });
-
-  it('sends nothing when nothing is picked', async () => {
-    const { c, h } = make();
-    await c.send();
-    expect(h.calls).toHaveLength(0);
-  });
-
-  it('a send that throws frees the room and says so', async () => {
-    const { c, h } = make();
-    c.pick([file('a')]);
-    const p = c.send();
-    h.fail(new Error('M_FORBIDDEN'));
-    await p;
-    expect(c.getState().phase).toEqual({ kind: 'done', text: 'Could not share: M_FORBIDDEN' });
-    expect(c.getState().files).toHaveLength(1);
-    const retry = c.send();
-    expect(h.calls).toHaveLength(2);
-    h.release(ok(1));
-    await retry;
-  });
-});
-
-describe('progress and results', () => {
-  it('counts files as they settle, passing the title through', async () => {
-    const { c, h } = make();
-    c.pick([file('a'), file('b')]);
-    c.setTitle('Take 4');
-    const p = c.send();
-    expect(c.getState().phase).toEqual({ kind: 'sending', done: 0 });
-    expect(h.calls[0].title).toBe('Take 4');
-    h.calls[0].onFile();
-    expect(c.getState().phase).toEqual({ kind: 'sending', done: 1 });
-    h.release(ok(2));
-    await p;
-    expect(c.getState().phase).toEqual({ kind: 'done', text: 'Shared 2 files.' });
-  });
-
-  it('full success clears the pick, tells the room list, and remounts the input', async () => {
-    const { c, h, sentTo } = make();
-    c.pick([file('a')]);
-    const { epoch } = c.getState();
-    const p = c.send();
-    h.release(ok(1));
-    await p;
-    expect(c.getState()).toMatchObject({ files: [], title: '', epoch: epoch + 1 });
-    expect(sentTo).toEqual(['!zone:x']);
-  });
-
-  it('failed files stay picked by position, so a same-named twin that went is not re-sent', async () => {
-    const { c, h } = make();
-    const twins = [file('a.ogg'), file('a.ogg'), file('b.ogg')];
-    c.pick(twins);
-    const p = c.send();
-    h.release({ albumId: '$r', sent: 2, failed: ['a.ogg'], failedAt: [1] });
-    await p;
-    expect(c.getState().files).toEqual([twins[1]]);
-    expect(c.getState().phase).toEqual({ kind: 'done', text: 'Shared 2. Not sent: a.ogg' });
-  });
-
-  it('when every upload failed everything stays picked and the note says nothing was shared', async () => {
-    const { c, h } = make();
-    const picked = [file('a'), file('b')];
-    c.pick(picked);
-    const p = c.send();
-    h.release({ albumId: '$r', sent: 0, failed: ['a', 'b'], failedAt: [0, 1] });
-    await p;
-    expect(c.getState().files).toEqual(picked);
-    expect(c.getState().phase).toEqual({
-      kind: 'done',
-      text: 'Nothing was shared. Not sent: a, b',
-    });
-  });
-
-  it('a new pick after a result drops the result note', async () => {
-    const { c, h } = make();
-    c.pick([file('a')]);
-    const p = c.send();
-    h.release(ok(1));
-    await p;
-    c.pick([file('b')]);
-    expect(c.getState().phase).toEqual({ kind: 'idle' });
-  });
-});
-
-describe('what a send leaves behind', () => {
-  it('keeps the title when some files failed, so the retry has the same name', async () => {
-    const { c, h } = make();
-    c.pick([file('a'), file('b')]);
-    c.setTitle('Take 4');
-    const p = c.send();
-    h.release({ albumId: '$r', sent: 1, failed: ['b'], failedAt: [1] });
-    await p;
-    expect(c.getState().title).toBe('Take 4');
-  });
-
-  it('tells the room list only after the send settled, and not when it threw', async () => {
-    const { c, h, sentTo } = make();
-    c.pick([file('a')]);
-    const p = c.send();
-    expect(sentTo).toEqual([]);
-    h.release(ok(1));
-    await p;
-    expect(sentTo).toEqual(['!zone:x']);
-
-    const bad = make();
-    bad.c.pick([file('a')]);
-    const q = bad.c.send();
-    bad.h.fail(new Error('boom'));
-    await q;
-    expect(bad.sentTo).toEqual([]);
-  });
-
-  it('a success lands in one notification: the pick is never empty while still sending', async () => {
-    const { c, h } = make();
-    c.pick([file('a')]);
-    const p = c.send();
-    const seen: string[] = [];
-    c.subscribe(() => {
-      const st = c.getState();
-      seen.push(`${st.files.length}:${st.phase.kind}`);
-    });
-    h.release(ok(1));
-    await p;
-    expect(seen).toEqual(['0:done']);
-  });
-});
-
-describe('an encrypted room', () => {
-  it('says so, sends nothing and keeps the pick', async () => {
-    const { c, h } = make({ isEncrypted: () => true });
-    c.pick([file('a')]);
-    await c.send();
-    expect(c.getState().phase).toEqual({
-      kind: 'done',
-      text: 'Not shared: this room is encrypted.',
-    });
-    expect(c.getState().files).toHaveLength(1);
-    expect(h.calls).toHaveLength(0);
-  });
-
-  it('is checked at Send, not at mount: a room that turns encrypted after the pick is refused', async () => {
-    let encrypted = false;
-    const { c, h } = make({ isEncrypted: () => encrypted });
-    c.pick([file('a')]);
-    encrypted = true;
-    await c.send();
-    expect(h.calls).toHaveLength(0);
-    expect(c.getState().phase).toMatchObject({
-      kind: 'done',
-      text: 'Not shared: this room is encrypted.',
-    });
-  });
-});

src/app/features/albums/shareController.ts

@@ -1,87 +0,0 @@
-// The share panel's state machine, apart from React and Matrix: what is picked, what phase the
-// send is in, and the rules that keep a room to one send at a time. ShareSet.tsx draws it.
-import { ShareResult, remainingAfter, resultNote } from './shareSet';
-
-export type Picked = { name: string; type: string };
-
-export type SharePhase =
-  | { kind: 'idle' }
-  | { kind: 'sending'; done: number }
-  | { kind: 'done'; text: string };
-
-export type ShareState<F extends Picked> = {
-  files: F[];
-  title: string;
-  phase: SharePhase;
-  /** Bumps whenever the pick is emptied, so the file input can be remounted and re-pick the same files. */
-  epoch: number;
-};
-
-export const ENCRYPTED_NOTE = 'Not shared: this room is encrypted.';
-
-export type ShareDeps<F extends Picked> = {
-  roomId: string;
-  isEncrypted: () => boolean;
-  /** Sends the files as one album; reports each settled file through onFile. */
-  run: (files: F[], title: string, onFile: () => void) => Promise<ShareResult>;
-  /** Called after a send that reached the room, whatever it left unsent. */
-  onSent?: () => void;
-};
-
-/** Rooms with a share in flight. Module-level: leaving the page unmounts the panel, not the send. */
-const sending = new Set<string>();
-
-export const createShareController = <F extends Picked>(deps: ShareDeps<F>) => {
-  let state: ShareState<F> = { files: [], title: '', phase: { kind: 'idle' }, epoch: 0 };
-  const listeners = new Set<() => void>();
-  const set = (patch: Partial<ShareState<F>>) => {
-    state = { ...state, ...patch };
-    listeners.forEach((l) => l());
-  };
-
-  const clear = () => set({ files: [], title: '', epoch: state.epoch + 1 });
-
-  const send = async () => {
-    if (sending.has(deps.roomId) || state.files.length === 0) return;
-    if (deps.isEncrypted()) {
-      set({ phase: { kind: 'done', text: ENCRYPTED_NOTE } });
-      return;
-    }
-    sending.add(deps.roomId);
-    const { files, title } = state;
-    set({ phase: { kind: 'sending', done: 0 } });
-    let settled = 0;
-    try {
-      const res = await deps.run(files, title, () => {
-        settled += 1;
-        set({ phase: { kind: 'sending', done: settled } });
-      });
-      deps.onSent?.();
-      const left = remainingAfter(files, res);
-      const phase: SharePhase = { kind: 'done', text: resultNote(res) };
-      // One notification: no state is ever drawn with the pick emptied and the send still running.
-      if (left.length === 0) set({ files: [], title: '', epoch: state.epoch + 1, phase });
-      else set({ files: left, phase });
-    } catch (e: any) {
-      set({ phase: { kind: 'done', text: `Could not share: ${e?.message ?? 'send failed'}` } });
-    } finally {
-      sending.delete(deps.roomId);
-    }
-  };
-
-  return {
-    getState: () => state,
-    subscribe: (l: () => void) => {
-      listeners.add(l);
-      return () => {
-        listeners.delete(l);
-      };
-    },
-    pick: (files: F[]) => set({ files, phase: { kind: 'idle' } }),
-    setTitle: (title: string) => set({ title }),
-    cancel: clear,
-    send,
-  };
-};
-
-export type ShareController<F extends Picked> = ReturnType<typeof createShareController<F>>;

src/app/features/albums/shareSet.ts

@@ -72,7 +72,7 @@ export const sendShareSet = async <F extends ShareFile>(
  * makes a second album (adding to an existing one is not built), and a share where nothing went
  * leaves its root as a lone message the album list does not show (it lists threads with replies).
  */
-export const remainingAfter = <T>(files: T[], result: ShareResult): T[] =>
+export const remainingAfter = <F extends ShareFile>(files: F[], result: ShareResult): F[] =>
   files.filter((_, i) => result.failedAt.includes(i));
 
 export const resultNote = (result: ShareResult): string => {

src/app/features/call-status/CallControl.tsx

@@ -5,7 +5,6 @@ import { StatusDivider } from './components';
 import { CallEmbed, useCallControlState } from '../../plugins/call';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { callEmbedAtom } from '../../state/callEmbed';
-import { PhoneHitSpread26 } from '../../styles/PhoneHit.css';
 
 type MicrophoneButtonProps = {
   enabled: boolean;
@@ -15,7 +14,7 @@ type MicrophoneButtonProps = {
 function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps) {
   const [micState, toggleMic] = useAsyncCallback(onToggle);
   const loading = micState.status === AsyncStatus.Loading;
-
+  
   return (
     <TooltipProvider
       position="Top"
@@ -27,7 +26,6 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps
     >
       {(anchorRef) => (
         <IconButton
-          className={PhoneHitSpread26}
           ref={anchorRef}
           variant={enabled ? 'Surface' : 'Warning'}
           fill="Soft"
@@ -61,7 +59,6 @@ function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
     >
       {(anchorRef) => (
         <IconButton
-          className={PhoneHitSpread26}
           ref={anchorRef}
           variant={enabled ? 'Surface' : 'Warning'}
           fill="Soft"
@@ -102,7 +99,6 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
     >
       {(anchorRef) => (
         <IconButton
-          className={PhoneHitSpread26}
           ref={anchorRef}
           variant={enabled ? 'Success' : 'Surface'}
           fill="Soft"
@@ -140,7 +136,6 @@ function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonPro
     >
       {(anchorRef) => (
         <IconButton
-          className={PhoneHitSpread26}
           ref={anchorRef}
           variant={enabled ? 'Success' : 'Surface'}
           fill="Soft"
@@ -169,10 +164,7 @@ export function CallControl({
   const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
   const setCallEmbed = useSetAtom(callEmbedAtom);
 
-  const handleMicrophoneToggle = useCallback(
-    () => callEmbed.control.toggleMicrophone(),
-    [callEmbed]
-  );
+  const handleMicrophoneToggle = useCallback(() => callEmbed.control.toggleMicrophone(), [callEmbed]);
   const handleVideoToggle = useCallback(() => callEmbed.control.toggleVideo(), [callEmbed]);
 
   const [hangupState, hangup] = useAsyncCallback(
@@ -203,7 +195,11 @@ export function CallControl({
           disabled={!callJoined}
         />
         {!compact && <StatusDivider />}
-        <VideoButton enabled={video} onToggle={handleVideoToggle} disabled={!callJoined} />
+        <VideoButton
+          enabled={video}
+          onToggle={handleVideoToggle}
+          disabled={!callJoined}
+        />
         {!compact && (
           <ScreenShareButton
             enabled={screenshare}

src/app/features/call/CallControls.tsx

@@ -25,7 +25,6 @@ import {
   SoundButton,
   VideoButton,
 } from './Controls';
-import { PhoneHitSpread40 } from '../../styles/PhoneHit.css';
 import { CallEmbed, useCallControlState } from '../../plugins/call';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { stopPropagation } from '../../utils/keyboard';
@@ -72,10 +71,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
     setCords(undefined);
   };
 
-  const handleMicrophoneToggle = useCallback(
-    () => callEmbed.control.toggleMicrophone(),
-    [callEmbed]
-  );
+  const handleMicrophoneToggle = useCallback(() => callEmbed.control.toggleMicrophone(), [callEmbed]);
   const handleVideoToggle = useCallback(() => callEmbed.control.toggleVideo(), [callEmbed]);
 
   const [hangupState, hangup] = useAsyncCallback(
@@ -101,7 +97,10 @@ export function CallControls({ callEmbed }: CallControlsProps) {
       >
         <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <MicrophoneButton enabled={microphone} onToggle={handleMicrophoneToggle} />
+            <MicrophoneButton
+              enabled={microphone}
+              onToggle={handleMicrophoneToggle}
+            />
             <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
           </Box>
           {!compact && <ControlDivider />}
@@ -170,7 +169,6 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               }
             >
               <IconButton
-                className={PhoneHitSpread40}
                 variant="Surface"
                 fill="Soft"
                 radii="400"

src/app/features/call/Controls.tsx

@@ -4,7 +4,6 @@ import { useAtom } from 'jotai';
 import * as css from './styles.css';
 import { callChatAtom } from '../../state/callEmbed';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { PhoneHitSpread40 } from '../../styles/PhoneHit.css';
 
 export function ControlDivider() {
   return (
@@ -19,7 +18,7 @@ type MicrophoneButtonProps = {
 export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
   const [micState, toggleMic] = useAsyncCallback(onToggle);
   const loading = micState.status === AsyncStatus.Loading;
-
+  
   return (
     <TooltipProvider
       position="Top"
@@ -32,7 +31,6 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
     >
       {(anchorRef) => (
         <IconButton
-          className={PhoneHitSpread40}
           ref={anchorRef}
           variant={enabled ? 'Surface' : 'Warning'}
           fill="Soft"
@@ -66,7 +64,6 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
     >
       {(anchorRef) => (
         <IconButton
-          className={PhoneHitSpread40}
           ref={anchorRef}
           variant={enabled ? 'Surface' : 'Warning'}
           fill="Soft"
@@ -106,7 +103,6 @@ export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
     >
       {(anchorRef) => (
         <IconButton
-          className={PhoneHitSpread40}
           ref={anchorRef}
           variant={enabled ? 'Success' : 'Surface'}
           fill="Soft"
@@ -144,7 +140,6 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps)
     >
       {(anchorRef) => (
         <IconButton
-          className={PhoneHitSpread40}
           ref={anchorRef}
           variant={enabled ? 'Success' : 'Surface'}
           fill="Soft"
@@ -175,7 +170,6 @@ export function ChatButton() {
     >
       {(anchorRef) => (
         <IconButton
-          className={PhoneHitSpread40}
           ref={anchorRef}
           variant={chat ? 'Success' : 'Surface'}
           fill="Soft"

src/app/features/call/PrescreenControls.tsx

@@ -26,6 +26,7 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
   const { microphone, video, sound, toggleMicrophone, toggleVideo, toggleSound } =
     useCallPreferences();
 
+
   const handleMicrophoneToggle = useCallback(async () => toggleMicrophone(), [toggleMicrophone]);
   const handleVideoToggle = useCallback(async () => toggleVideo(), [toggleVideo]);
 

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

@@ -30,7 +30,6 @@ import {
   AccountDataSubmitCallback,
 } from '../../../components/AccountDataEditor';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type DeveloperToolsProps = {
   requestClose: () => void;
@@ -93,7 +92,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

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

@@ -22,7 +22,6 @@ import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { syntaxErrorPosition } from '../../../utils/dom';
 import { Cursor } from '../../../plugins/text-area';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
@@ -119,7 +118,7 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

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

@@ -31,7 +31,6 @@ import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
@@ -276,7 +275,7 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx

@@ -4,7 +4,6 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
 import { ImagePack } from '../../../plugins/custom-emoji';
 import { ImagePackView } from '../../../components/image-pack-view';
 import { RoomPacks } from './RoomPacks';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type EmojisStickersProps = {
   requestClose: () => void;
@@ -30,7 +29,7 @@ export function EmojisStickers({ requestClose }: EmojisStickersProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -40,7 +40,6 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type CreatePackTileProps = {
   packs: ImagePack[];
@@ -216,7 +215,6 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
               {canEdit &&
                 (removed ? (
                   <IconButton
-                    className={PhoneHit}
                     size="300"
                     radii="Pill"
                     variant="Critical"
@@ -227,7 +225,6 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
                   </IconButton>
                 ) : (
                   <IconButton
-                    className={PhoneHit}
                     size="300"
                     radii="Pill"
                     variant="Secondary"

src/app/features/common-settings/general/RoomEncryption.tsx

@@ -28,7 +28,6 @@ import { useRoom } from '../../../hooks/useRoom';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { stopPropagation } from '../../../utils/keyboard';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 const ROOM_ENC_ALGO = 'm.megolm.v1.aes-sha2';
 
@@ -124,12 +123,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
                     <Box grow="Yes">
                       <Text size="H4">Enable Encryption</Text>
                     </Box>
-                    <IconButton
-                      className={PhoneHit}
-                      size="300"
-                      onClick={() => setPrompt(false)}
-                      radii="300"
-                    >
+                    <IconButton size="300" onClick={() => setPrompt(false)} radii="300">
                       <Icon src={Icons.Cross} />
                     </IconButton>
                   </Header>

src/app/features/common-settings/general/RoomUpgrade.tsx

@@ -39,7 +39,6 @@ import { useAlive } from '../../../hooks/useAlive';
 import { creatorsSupported } from '../../../utils/matrix';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { BreakWord } from '../../../styles/Text.css';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
   const mx = useMatrixClient();
@@ -106,7 +105,7 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
               <Box grow="Yes">
                 <Text size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
               </Box>
-              <IconButton className={PhoneHit} size="300" onClick={requestClose} radii="300">
+              <IconButton size="300" onClick={requestClose} radii="300">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/common-settings/members/Members.tsx

@@ -56,7 +56,6 @@ import { useSpaceOptionally } from '../../../hooks/useSpace';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { getMouseEventCords } from '../../../utils/dom';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -162,7 +161,7 @@ export function Members({ requestClose }: MembersProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>
@@ -278,7 +277,6 @@ export function Members({ requestClose }: MembersProps) {
                 anchorRef={scrollTopAnchorRef}
               >
                 <IconButton
-                  className={PhoneHit}
                   onClick={() => virtualizer.scrollToOffset(0)}
                   variant="Surface"
                   radii="Pill"

src/app/features/common-settings/permissions/PowersEditor.tsx

@@ -49,7 +49,6 @@ import { useAlive } from '../../../hooks/useAlive';
 import { BetaNoticeBadge } from '../../../components/BetaNoticeBadge';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
 import { creatorsSupported } from '../../../utils/matrix';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type EditPowerProps = {
   maxPower: number;
@@ -370,7 +369,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/create-room/CreateRoomModal.tsx

@@ -24,7 +24,6 @@ import {
 import { CreateRoomModalState } from '../../state/createRoomModal';
 import { stopPropagation } from '../../utils/keyboard';
 import { CreateRoomType } from '../../components/create-room/types';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type CreateRoomModalProps = {
   state: CreateRoomModalState;
@@ -64,7 +63,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                     </Text>
                   </Box>
                   <Box shrink="No">
-                    <IconButton className={PhoneHit} size="300" radii="300" onClick={closeDialog}>
+                    <IconButton size="300" radii="300" onClick={closeDialog}>
                       <Icon src={Icons.Cross} />
                     </IconButton>
                   </Box>

src/app/features/create-space/CreateSpaceModal.tsx

@@ -23,7 +23,6 @@ import {
 } from '../../state/hooks/createSpaceModal';
 import { CreateSpaceModalState } from '../../state/createSpaceModal';
 import { stopPropagation } from '../../utils/keyboard';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type CreateSpaceModalProps = {
   state: CreateSpaceModalState;
@@ -62,7 +61,7 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
                     <Text size="H4">New Space</Text>
                   </Box>
                   <Box shrink="No">
-                    <IconButton className={PhoneHit} size="300" radii="300" onClick={closeDialog}>
+                    <IconButton size="300" radii="300" onClick={closeDialog}>
                       <Icon src={Icons.Cross} />
                     </IconButton>
                   </Box>

src/app/features/desk/Desk.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 import { Page, PageContent, PageContentCenter, PageHeader } from '../../components/page';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { getHomePath } from '../../pages/pathUtils';
@@ -34,11 +33,7 @@ export function Desk() {
         <Box grow="Yes" alignItems="Center" gap="200">
           <Box grow="Yes" basis="No">
             {phone && (
-              <IconButton
-                className={PhoneHit}
-                aria-label="Back to rooms"
-                onClick={() => navigate(getHomePath())}
-              >
+              <IconButton aria-label="Back to rooms" onClick={() => navigate(getHomePath())}>
                 <Icon src={Icons.ArrowLeft} />
               </IconButton>
             )}

src/app/features/desk/DeskView.css.ts

@@ -30,29 +30,13 @@ export const Title = style({
 export const Fold = style({
   all: 'unset',
   cursor: 'pointer',
+  display: 'block',
   width: '100%',
   minHeight: 44,
   boxSizing: 'border-box',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: config.space.S200,
-  // A folded row says it can be opened: a chevron at the end, turned down while the row is open.
-  selectors: {
-    '&::after': {
-      content: '"›"',
-      flexShrink: 0,
-      fontSize: '1.5em',
-      lineHeight: 1,
-      transition: 'transform 120ms',
-    },
-    '&[aria-expanded=true]::after': { transform: 'rotate(90deg)' },
-  },
 });
 
-// Quiet lines (age, who it waits on, helper text) were measured at 4.5 over the day sky and 3.9-4.0 at dusk and night
-// with the theme's 0.75 (taps2/desk-REPORT.md); 0.9 clears 4.5 in all three.
-export const Quiet = style({ opacity: 0.9, margin: `${config.space.S100} 0` });
+export const Quiet = style({ opacity: config.opacity.P300, margin: `${config.space.S100} 0` });
 export const Body = style({ whiteSpace: 'pre-wrap', margin: `${config.space.S200} 0` });
 export const Options = style({ margin: 0, padding: 0, listStyle: 'none' });
 export const Option = style({ padding: `${config.space.S100} 0` });
@@ -66,9 +50,8 @@ export const Note = style({
   font: 'inherit',
   color: 'inherit',
   background: 'none',
-  // The note is disabled (slice 1). Its border is a UI boundary (3:1 wanted; the faint line under the 0.38 disabled
-  // opacity measured 2.0), so it is drawn dashed in the full ink and not faded.
-  border: '1px dashed currentColor',
+  border: `1px solid ${color.Background.ContainerLine}`,
+  opacity: config.opacity.Disabled,
 });
 
 /** Sticky beside the rows on wide screens; a small fixed corner image on phones. */
@@ -114,9 +97,3 @@ export const BoothLine = style({
     },
   },
 });
-
-/** The recorded rulings sit on the dark ridge in every sky; they carry their own ground (scrimStyle). */
-export const Recorded = style({
-  marginTop: config.space.S400,
-  padding: `${config.space.S200} ${config.space.S300}`,
-});

src/app/features/desk/DeskView.test.tsx

@@ -1,19 +1,14 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { MemoryRouter } from 'react-router-dom';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 import { ScreenSize, ScreenSizeProvider } from '../../hooks/useScreenSize';
-import { SkyInkContextProvider } from '../../hooks/useTheme';
-import { SCRIM_GROUND, SCRIM_INK } from '../scene/skyInk';
 import { DeskEntry } from './DeskEntry';
 import { DeskView, SIGN_IN_NOTE } from './DeskView';
 import { ForkList } from './forkContract';
 import { STATES } from './fixtures';
 import { setDeskSource } from './source';
 
-// useTheme reads the stored settings when it loads.
-vi.hoisted(() => vi.stubGlobal('localStorage', { getItem: () => null, setItem: () => undefined }));
-
 const view = (
   state: keyof typeof STATES | 'unpublished',
   size: ScreenSize,
@@ -71,19 +66,6 @@ describe('DeskView', () => {
     expect(html).toContain('Question done (ruling:done-1)');
     expect(html).not.toContain('Question shut');
   });
-  it('gives the recorded rulings their own ground and ink while a scene runs, none without one', () => {
-    const withScene = renderToStaticMarkup(
-      <ScreenSizeProvider value={ScreenSize.Desktop}>
-        <SkyInkContextProvider value={{ state: 'dusk', phone: false }}>
-          <DeskView mind="void" label="Void" list={STATES.settled} unverified={new Set()} />
-        </SkyInkContextProvider>
-      </ScreenSizeProvider>
-    );
-    // renderToStaticMarkup writes the inline style as the browser would read it back
-    expect(withScene).toContain(SCRIM_GROUND.replace(/, /g, ', '));
-    expect(withScene).toContain(`color:${SCRIM_INK}`);
-    expect(view('settled', ScreenSize.Desktop)).not.toContain('background-color');
-  });
   it('shows each outcome quietly, marks the counted answer, and renders a note only when sent', () => {
     const html = view('answered', ScreenSize.Desktop);
     expect(html).toContain(
@@ -163,15 +145,7 @@ describe("a question's age", () => {
     expect(html('2026-11-11T11:40:00Z')).toContain('raised just now');
   });
   it('shows no age when the card carries none, or an instant that does not parse or is ahead of the clock', () => {
-    [
-      'null',
-      'yesterday',
-      '2027-01-01T00:00:00Z',
-      '2026-11-06',
-      'Nov 6 2026',
-      '0',
-      '2026-02-30T00:00:00Z',
-    ].forEach((v) => {
+    ['null', 'yesterday', '2027-01-01T00:00:00Z', '2026-11-06', 'Nov 6 2026', '0', '2026-02-30T00:00:00Z'].forEach((v) => {
       expect(html(v === 'null' ? null : v)).not.toContain('raised ');
     });
   });

src/app/features/desk/DeskView.tsx

@@ -4,8 +4,6 @@ import { PoseAvatar } from '../../components/message/pose/PoseAvatar';
 import { MINDS } from '../../components/message/pose/poses';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { AnswerRow, Desk, buildDesk, DeskRow } from './buildDesk';
-import { useSkyInk } from '../../hooks/useTheme';
-import { scrimStyle } from '../scene/skyInk';
 import { ForkList } from './forkContract';
 import { deskMood } from './deskMood';
 import { raisedAge } from './age';
@@ -146,7 +144,6 @@ type DeskViewProps = {
 /** One Mind's desk, read-only: a stream of rows, the recorded rulings, and the booth Persona. */
 export function DeskView({ mind, label, list, unverified, now = Date.now() }: DeskViewProps) {
   const desk = buildDesk(list, unverified);
-  const skyInk = useSkyInk();
   // Slice 1 has no session, so nothing on the desk is the viewer's answer yet.
   const mood = deskMood(desk.counts.open, 0);
   return (
@@ -169,7 +166,7 @@ export function DeskView({ mind, label, list, unverified, now = Date.now() }: De
         )}
       </div>
       {desk.recorded.length > 0 && (
-        <div className={css.Recorded} style={scrimStyle(skyInk)}>
+        <>
           <h3 className={css.Title}>Recorded as rulings</h3>
           <ul className={css.Options}>
             {desk.recorded.map((r) => (
@@ -178,7 +175,7 @@ export function DeskView({ mind, label, list, unverified, now = Date.now() }: De
               </li>
             ))}
           </ul>
-        </div>
+        </>
       )}
     </section>
   );

src/app/features/dings/manifest.test.ts

@@ -109,10 +109,7 @@ describe('v4 manifest against the parser', () => {
 
   it("every voice file is Aqua's v4 render (sha256 prefix)", () => {
     const hash = (file: string) =>
-      createHash('sha256')
-        .update(readFileSync(join(DINGS, file)))
-        .digest('hex')
-        .slice(0, 12);
+      createHash('sha256').update(readFileSync(join(DINGS, file))).digest('hex').slice(0, 12);
     expect(Object.keys(V4_SHA).length).toBe(VOICES.length * MOTIFS.length);
     Object.entries(V4_SHA).forEach(([k, want]) => expect(hash(`senders/${k}.ogg`)).toBe(want));
   });

src/app/features/join-before-navigate/JoinBeforeNavigate.tsx

@@ -10,7 +10,6 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] };
 export function JoinBeforeNavigate({
@@ -39,7 +38,7 @@ export function JoinBeforeNavigate({
             {screenSize === ScreenSize.Mobile && (
               <BackRouteHandler>
                 {(onBack) => (
-                  <IconButton className={PhoneHit} onClick={onBack}>
+                  <IconButton onClick={onBack}>
                     <Icon src={Icons.ArrowLeft} />
                   </IconButton>
                 )}

src/app/features/lobby/HierarchyItemMenu.tsx

@@ -30,7 +30,6 @@ import { IPowerLevels } from '../../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
-import { PhoneHitSpread24 } from '../../styles/PhoneHit.css';
 
 type HierarchyItemWithParent = HierarchyItem & {
   parentId: string;
@@ -232,7 +231,6 @@ export function HierarchyItemMenu({
   return (
     <Box gap="200" alignItems="Center" shrink="No">
       <IconButton
-        className={PhoneHitSpread24}
         onClick={handleOpenMenu}
         size="300"
         variant="SurfaceVariant"

src/app/features/lobby/Lobby.tsx

@@ -48,7 +48,6 @@ import { useGetRoom } from '../../hooks/useGetRoom';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
 import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 const useCanDropLobbyItem = (
   space: Room,
@@ -414,7 +413,6 @@ export function Lobby() {
                     onVisibilityChange={setOnTop}
                   >
                     <IconButton
-                      className={PhoneHit}
                       onClick={() => virtualizer.scrollToOffset(0)}
                       variant="SurfaceVariant"
                       radii="Pill"

src/app/features/lobby/LobbyHeader.tsx

@@ -38,7 +38,6 @@ import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type LobbyMenuProps = {
   powerLevels: IPowerLevels;
@@ -166,7 +165,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
             <Box shrink="No">
               <BackRouteHandler>
                 {(onBack) => (
-                  <IconButton className={PhoneHit} fill="None" onClick={onBack}>
+                  <IconButton fill="None" onClick={onBack}>
                     <Icon src={Icons.ArrowLeft} />
                   </IconButton>
                 )}
@@ -241,7 +240,6 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
           >
             {(triggerRef) => (
               <IconButton
-                className={PhoneHit}
                 fill="None"
                 onClick={handleOpenMenu}
                 ref={triggerRef}

src/app/features/lobby/LobbyHero.tsx

@@ -22,9 +22,7 @@ export function LobbyHero() {
   const name = useRoomName(space);
   const topic = useRoomTopic(space);
   const avatarMxc = useRoomAvatar(space);
-  const avatarUrl = avatarMxc
-    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
-    : undefined;
+  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined : undefined;
 
   return (
     <PageHero

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

@@ -23,7 +23,6 @@ import { SearchResultGroup } from './SearchResultGroup';
 import { SearchInput } from './SearchInput';
 import { SearchFilters } from './SearchFilters';
 import { VirtualTile } from '../../components/virtualizer';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 const useSearchPathSearchParams = (searchParams: URLSearchParams): _SearchPathSearchParams =>
   useMemo(
@@ -194,7 +193,6 @@ export function MessageSearch({
     <Box direction="Column" gap="700">
       <ScrollTopContainer scrollRef={scrollRef} anchorRef={scrollTopAnchorRef}>
         <IconButton
-          className={PhoneHit}
           onClick={() => virtualizer.scrollToOffset(0)}
           variant="SurfaceVariant"
           radii="Pill"

src/app/features/push/PushNotification.tsx

@@ -1,72 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Switch, Text, color } from 'folds';
-import { SettingTile } from '../../components/setting-tile';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { getNotificationState, usePermissionState } from '../../hooks/usePermission';
-import type { ActivePushConfig } from './config';
-import { pushSessionToSW } from '../../../sw-session';
-import { disablePush, enablePush, pushIsOn } from './pusher';
-
-export const pushSupported = (): boolean =>
-  'serviceWorker' in navigator && 'PushManager' in window && 'Notification' in window;
-
-const readyManager = async () => (await navigator.serviceWorker.ready).pushManager;
-
-/** Background notifications through the installed app's service worker. The caller renders it only when the host's config fills the push block and the browser can. */
-export function PushNotification({ cfg }: { cfg: ActivePushConfig }) {
-  const mx = useMatrixClient();
-  const permission = usePermissionState('notifications', getNotificationState());
-  const [on, setOn] = useState(false);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string>();
-
-  useEffect(() => {
-    readyManager()
-      .then((m) => pushIsOn(mx, m, cfg))
-      .then(setOn)
-      .catch(() => undefined);
-  }, [cfg, mx]);
-
-  const toggle = useCallback(
-    async (enable: boolean) => {
-      setBusy(true);
-      setError(undefined);
-      try {
-        if (enable) {
-          if ((await window.Notification.requestPermission()) !== 'granted') {
-            throw new Error('Notification permission was not granted.');
-          }
-          await enablePush(mx, await readyManager(), cfg, navigator.userAgent.slice(0, 64));
-        } else {
-          await disablePush(mx, await readyManager(), cfg);
-        }
-        // The worker keeps the token only while a subscription exists: tell it the new state.
-        pushSessionToSW(mx.baseUrl, mx.getAccessToken() ?? undefined);
-        setOn(enable);
-      } catch (e) {
-        setError(e instanceof Error ? e.message : 'Could not change background notifications.');
-      } finally {
-        setBusy(false);
-      }
-    },
-    [cfg, mx]
-  );
-
-  return (
-    <SettingTile
-      title="Background Notifications"
-      description={
-        error || permission === 'denied' ? (
-          <Text as="span" style={{ color: color.Critical.Main }} size="T200">
-            {error ?? 'Notification permission is blocked. Allow it from the browser address bar.'}
-          </Text>
-        ) : (
-          <span>
-            Notify when the app is closed. Installing the app to the home screen helps on iOS.
-          </span>
-        )
-      }
-      after={<Switch disabled={busy || permission === 'denied'} value={on} onChange={toggle} />}
-    />
-  );
-}

src/app/features/push/config.test.ts

@@ -1,24 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { describe, expect, it } from 'vitest';
-import { activePushConfig } from './config';
-
-describe('activePushConfig', () => {
-  it('is off unless all three keys are filled', () => {
-    expect(activePushConfig(undefined)).toBeUndefined();
-    expect(activePushConfig({})).toBeUndefined();
-    expect(
-      activePushConfig({ vapidPublicKey: 'k', gatewayUrl: 'https://g/_matrix/push/v1/notify' })
-    ).toBeUndefined();
-    expect(activePushConfig({ vapidPublicKey: 'k', gatewayUrl: 'u', appId: 'a' })).toEqual({
-      vapidPublicKey: 'k',
-      gatewayUrl: 'u',
-      appId: 'a',
-    });
-  });
-  it('the shipped config.json carries the block empty, so push is off', () => {
-    const cfg = JSON.parse(readFileSync(join(__dirname, '../../../../config.json'), 'utf8'));
-    expect(cfg.push).toEqual({ vapidPublicKey: '', gatewayUrl: '', appId: '' });
-    expect(activePushConfig(cfg.push)).toBeUndefined();
-  });
-});

src/app/features/push/config.ts

@@ -1,12 +0,0 @@
-// Web Push is off unless the host's config.json fills all three keys (ships empty). The public key is not a secret;
-// the gateway URL is the push gateway's notify endpoint the homeserver calls (`/_matrix/push/v1/notify`).
-export type PushConfig = {
-  vapidPublicKey?: string;
-  gatewayUrl?: string;
-  appId?: string;
-};
-
-export type ActivePushConfig = Required<PushConfig>;
-
-export const activePushConfig = (c?: PushConfig): ActivePushConfig | undefined =>
-  c?.vapidPublicKey && c.gatewayUrl && c.appId ? (c as ActivePushConfig) : undefined;

src/app/features/push/manifest.test.ts

@@ -1,29 +0,0 @@
-import { existsSync, readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { describe, expect, it } from 'vitest';
-
-const ROOT = join(__dirname, '../../../..');
-const manifest = JSON.parse(readFileSync(join(ROOT, 'public/manifest.json'), 'utf8'));
-
-describe('web app manifest', () => {
-  it('has a stable identity and scope, and no orientation lock', () => {
-    expect(manifest.id).toBe('/'); // what Chrome already derives from start_url "./" at the site root
-    expect(manifest.scope).toBe('./');
-    expect(manifest.start_url).toBe('./');
-    expect(manifest.display).toBe('standalone');
-    expect(manifest.orientation).toBeUndefined();
-  });
-  it('offers 192 and 512 icons for any use and a 512 maskable one, every file present', () => {
-    const icons = manifest.icons as { src: string; sizes: string; purpose?: string }[];
-    const any = icons.filter((i) => !i.purpose);
-    expect(any.map((i) => i.sizes)).toEqual(expect.arrayContaining(['192x192', '512x512']));
-    const maskable = icons.filter((i) => i.purpose === 'maskable');
-    expect(maskable.map((i) => i.sizes)).toEqual(['512x512']);
-    // the build copies public/res/android to public/android (vite.config.js)
-    icons.forEach((i) =>
-      expect(
-        existsSync(join(ROOT, i.src.replace('./public/android/', 'public/res/android/')))
-      ).toBe(true)
-    );
-  });
-});

src/app/features/push/payload.test.ts

@@ -1,108 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { describePush, GENERIC, parsePush } from './payload';
-import { matrixNotify, mockHomeserver, SESSION } from './testkit';
-
-describe('parsePush', () => {
-  it('reads the Matrix gateway body and the bare inner object', () => {
-    const a = parsePush(matrixNotify('!r:x', '$e'));
-    expect(a).toMatchObject({ roomId: '!r:x', eventId: '$e' });
-    expect(parsePush({ room_id: '!r:x', event_id: '$e' })).toMatchObject({ roomId: '!r:x' });
-  });
-  it('rejects a body with no room id', () => {
-    expect(parsePush({ notification: { event_id: '$e' } })).toBeUndefined();
-    expect(parsePush(undefined)).toBeUndefined();
-    expect(parsePush('x')).toBeUndefined();
-  });
-  it('carries text the gateway added', () => {
-    expect(
-      parsePush({
-        notification: {
-          room_id: '!r:x',
-          room_name: 'Lobby',
-          sender_display_name: 'Ann',
-          content: { body: 'hi' },
-        },
-      })
-    ).toMatchObject({ roomName: 'Lobby', sender: 'Ann', text: 'hi' });
-  });
-});
-
-describe('describePush', () => {
-  const ids = { roomId: '!r:x', eventId: '$e' };
-  const event = {
-    type: 'm.room.message',
-    sender: '@ann:x',
-    content: { msgtype: 'm.text', body: 'hello there' },
-  };
-
-  it('resolves ids through the homeserver with the stored token', async () => {
-    const hs = mockHomeserver({
-      token: 'tok-1',
-      events: { $e: event },
-      roomNames: { '!r:x': 'Lobby' },
-    });
-    expect(await describePush(ids, SESSION, hs.fetchFn)).toEqual({
-      title: 'Lobby',
-      body: 'ann: hello there',
-    });
-    expect(hs.seen).toHaveLength(2);
-    expect(
-      hs.seen.every(
-        (r) => r.auth === 'Bearer tok-1' && r.url.startsWith('https://matrix.example/_matrix/')
-      )
-    ).toBe(true);
-    expect(hs.seen[0].url).toContain('/rooms/!r%3Ax/');
-  });
-  it('shows the generic notification with no session, and asks nobody', async () => {
-    const hs = mockHomeserver({ token: 'tok-1' });
-    expect(await describePush(ids, undefined, hs.fetchFn)).toEqual({
-      title: 'Ratatoskr',
-      body: 'New message',
-    });
-    expect(hs.seen).toHaveLength(0);
-  });
-  it('falls back when the token is refused, the network is down, or the event is encrypted', async () => {
-    const stale = mockHomeserver({ token: 'other', events: { $e: event } });
-    expect(await describePush(ids, SESSION, stale.fetchFn)).toEqual(GENERIC);
-    const down = mockHomeserver({ token: 'tok-1', failAll: true });
-    expect(await describePush(ids, SESSION, down.fetchFn)).toEqual(GENERIC);
-    const enc = mockHomeserver({
-      token: 'tok-1',
-      events: {
-        $e: {
-          type: 'm.room.encrypted',
-          sender: '@ann:x',
-          content: { algorithm: 'm.megolm.v1.aes-sha2' },
-        },
-      },
-      roomNames: { '!r:x': 'Lobby' },
-    });
-    expect(await describePush(ids, SESSION, enc.fetchFn)).toEqual({
-      title: 'Lobby',
-      body: 'New message',
-    });
-  });
-  it('does not fetch what the push already carried', async () => {
-    const hs = mockHomeserver({ token: 'tok-1' });
-    const shown = await describePush(
-      { ...ids, roomName: 'R', sender: 'Bo', text: 'yo' },
-      SESSION,
-      hs.fetchFn
-    );
-    expect(shown).toEqual({ title: 'R', body: 'Bo: yo' });
-    expect(hs.seen).toHaveLength(0);
-  });
-  it('clips a long body', async () => {
-    const hs = mockHomeserver({
-      token: 'tok-1',
-      events: { $e: { ...event, content: { body: 'x'.repeat(500) } } },
-    });
-    const shown = await describePush(ids, SESSION, hs.fetchFn);
-    expect(shown.body.length).toBeLessThanOrEqual(200);
-    expect(shown.body.endsWith('…')).toBe(true);
-  });
-  it('shows the generic notification when the push names no room', async () => {
-    const hs = mockHomeserver({ token: 'tok-1' });
-    expect(await describePush(undefined, SESSION, hs.fetchFn)).toEqual(GENERIC);
-  });
-});

src/app/features/push/payload.ts

@@ -1,95 +0,0 @@
-import type { SessionRecord } from './sessionStore';
-
-/** What a push names. The homeserver sends ids only (`push.include_content: false`); a gateway may add text. */
-export interface PushIds {
-  roomId: string;
-  eventId?: string;
-  roomName?: string;
-  sender?: string;
-  text?: string;
-}
-
-export interface Shown {
-  title: string;
-  body: string;
-}
-
-const str = (v: unknown): string | undefined => (typeof v === 'string' && v ? v : undefined);
-
-/** The Matrix push body is `{ notification: {...} }`; a gateway may forward the inner object. No room id: not ours to show. */
-export function parsePush(raw: unknown): PushIds | undefined {
-  const top = (raw ?? {}) as Record<string, unknown>;
-  const n = (top.notification ?? top) as Record<string, unknown>;
-  const roomId = str(n.room_id);
-  if (!roomId) return undefined;
-  const content = (n.content ?? {}) as Record<string, unknown>;
-  return {
-    roomId,
-    eventId: str(n.event_id),
-    roomName: str(n.room_name),
-    sender: str(n.sender_display_name) ?? str(n.sender),
-    text: str(content.body),
-  };
-}
-
-export const GENERIC: Shown = { title: 'Ratatoskr', body: 'New message' };
-const MAX_BODY = 200;
-const clip = (s: string): string => (s.length > MAX_BODY ? `${s.slice(0, MAX_BODY - 1)}…` : s);
-const localpart = (userId: string): string => userId.replace(/^@/, '').split(':')[0];
-
-type Fetch = (url: string, init: RequestInit) => Promise<Response>;
-
-async function getJson(
-  f: Fetch,
-  session: SessionRecord,
-  path: string,
-  timeoutMs: number
-): Promise<Record<string, unknown> | undefined> {
-  try {
-    const res = await f(`${session.baseUrl.replace(/\/+$/, '')}${path}`, {
-      headers: { Authorization: `Bearer ${session.accessToken}` },
-      signal: AbortSignal.timeout(timeoutMs),
-    });
-    return res.ok ? ((await res.json()) as Record<string, unknown>) : undefined;
-  } catch {
-    return undefined;
-  }
-}
-
-/**
- * Title and body for a push. Text the push carried wins. Otherwise, with a session, the event and the room's name are
- * fetched (clear-text rooms; an encrypted event shows the generic body). Every failure ends at the generic notification:
- * a push must always show something.
- */
-export async function describePush(
-  ids: PushIds | undefined,
-  session: SessionRecord | undefined,
-  f: Fetch,
-  timeoutMs = 4000
-): Promise<Shown> {
-  if (!ids) return GENERIC;
-  let { roomName, sender, text } = ids;
-  if (session && (!text || !roomName)) {
-    const room = encodeURIComponent(ids.roomId);
-    const [event, name] = await Promise.all([
-      !text && ids.eventId
-        ? getJson(
-            f,
-            session,
-            `/_matrix/client/v3/rooms/${room}/event/${encodeURIComponent(ids.eventId)}`,
-            timeoutMs
-          )
-        : undefined,
-      !roomName
-        ? getJson(f, session, `/_matrix/client/v3/rooms/${room}/state/m.room.name`, timeoutMs)
-        : undefined,
-    ]);
-    const content = (event?.content ?? {}) as Record<string, unknown>;
-    if (event?.type === 'm.room.message') text = str(content.body);
-    if (!sender && str(event?.sender)) sender = localpart(event?.sender as string);
-    roomName = roomName ?? str(name?.name);
-  }
-  let { body } = GENERIC;
-  if (text) body = sender ? `${sender}: ${text}` : text;
-  return { title: roomName ?? GENERIC.title, body: clip(body) };
-}

src/app/features/push/pusher.test.ts

@@ -1,143 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import type { IPusherRequest } from 'matrix-js-sdk';
-import {
-  disablePush,
-  enablePush,
-  PushManagerPort,
-  pushIsOn,
-  vapidKeyBytes,
-  webPushPusher,
-} from './pusher';
-
-const cfg = {
-  vapidPublicKey: 'BAUD',
-  gatewayUrl: 'https://matrix.example/_matrix/push/v1/notify',
-  appId: 'org.gamecult.ratatoskr.web',
-};
-const key = (...b: number[]) => Uint8Array.from(b).buffer;
-
-function subscription(unsubscribed: string[], serverKey?: ArrayBuffer): PushSubscription {
-  return {
-    options: { applicationServerKey: serverKey ?? vapidKeyBytes(cfg.vapidPublicKey).buffer },
-    endpoint: 'https://push.example/send/abc',
-    getKey: (n: string) => (n === 'p256dh' ? key(251, 255, 1) : key(250, 2)),
-    unsubscribe: async () => {
-      unsubscribed.push('x');
-      return true;
-    },
-  } as unknown as PushSubscription;
-}
-
-function world() {
-  const calls: string[] = [];
-  const pushers: IPusherRequest[] = [];
-  let sub: PushSubscription | null = null;
-  const unsub: string[] = [];
-  const mx = {
-    setPusher: async (p: IPusherRequest) => {
-      calls.push(p.kind === null ? 'delete-pusher' : 'set-pusher');
-      pushers.push(p);
-    },
-    // The account's pushers as the homeserver would list them: what setPusher last wrote, minus deletions.
-    getPushers: async () => ({
-      pushers: pushers
-        .filter(
-          (p, i) =>
-            p.kind !== null &&
-            !pushers.slice(i + 1).some((q) => q.kind === null && q.pushkey === p.pushkey)
-        )
-        .map((p) => ({ app_id: p.app_id, pushkey: p.pushkey })),
-    }),
-  };
-  const push: PushManagerPort = {
-    getSubscription: async () => sub,
-    subscribe: async (o) => {
-      calls.push(`subscribe:${o.userVisibleOnly}:${o.applicationServerKey.length}`);
-      sub = subscription(unsub);
-      return sub;
-    },
-  };
-  const swapSub = (s: PushSubscription | null) => {
-    sub = s;
-  };
-  return { mx, push, calls, pushers, unsub, swapSub };
-}
-
-describe('web push pusher', () => {
-  it('decodes the URL-safe VAPID key', () => {
-    expect([...vapidKeyBytes('-_8')]).toEqual([251, 255]);
-  });
-  it('is the Sygnal webpush shape: app id, p256dh pushkey, subscription in data, ids only', () => {
-    const p = webPushPusher(cfg, subscription([]), 'phone') as unknown as Record<
-      string,
-      unknown
-    > & {
-      data: Record<string, unknown>;
-    };
-    expect(p).toMatchObject({
-      kind: 'http',
-      app_id: cfg.appId,
-      pushkey: '-_8B',
-      device_display_name: 'phone',
-      append: false,
-    });
-    expect(p.data).toMatchObject({
-      url: cfg.gatewayUrl,
-      format: 'event_id_only',
-      endpoint: 'https://push.example/send/abc',
-      auth: '-gI',
-      p256dh: '-_8B',
-    });
-  });
-  it('enable subscribes with userVisibleOnly, then registers the pusher; a second enable reuses the subscription', async () => {
-    const w = world();
-    await enablePush(w.mx, w.push, cfg, 'phone');
-    expect(w.calls).toEqual(['subscribe:true:3', 'set-pusher']);
-    await enablePush(w.mx, w.push, cfg, 'phone');
-    expect(w.calls).toEqual(['subscribe:true:3', 'set-pusher', 'set-pusher']);
-  });
-  it('disable deletes the pusher before the subscription, and does nothing when there is none', async () => {
-    const w = world();
-    await disablePush(w.mx, w.push, cfg);
-    expect(w.calls).toEqual([]);
-    await enablePush(w.mx, w.push, cfg, 'phone');
-    await disablePush(w.mx, w.push, cfg);
-    expect(w.calls.slice(-1)).toEqual(['delete-pusher']);
-    expect(w.pushers.at(-1)).toMatchObject({ kind: null, app_id: cfg.appId, pushkey: '-_8B' });
-    expect(w.unsub).toEqual(['x']);
-  });
-  it('a failed pusher write leaves the subscription alone', async () => {
-    const w = world();
-    await enablePush(w.mx, w.push, cfg, 'phone');
-    w.mx.setPusher = async () => {
-      throw new Error('homeserver said no');
-    };
-    await expect(disablePush(w.mx, w.push, cfg)).rejects.toThrow('homeserver said no');
-    expect(w.unsub).toEqual([]);
-  });
-  it('the toggle is on only with a subscription and the pusher of this account for it', async () => {
-    const w = world();
-    expect(await pushIsOn(w.mx, w.push, cfg)).toBe(false);
-    await enablePush(w.mx, w.push, cfg, 'phone');
-    expect(await pushIsOn(w.mx, w.push, cfg)).toBe(true);
-    // another account on the same browser: the subscription exists, its pusher does not
-    const other = { ...w.mx, getPushers: async () => ({ pushers: [] }) };
-    expect(await pushIsOn(other, w.push, cfg)).toBe(false);
-    await disablePush(w.mx, w.push, cfg);
-    expect(await pushIsOn(w.mx, w.push, cfg)).toBe(false);
-  });
-  it('a subscription made under another VAPID key is replaced, not reused', async () => {
-    const w = world();
-    const old = [] as string[];
-    w.swapSub(subscription(old, Uint8Array.from([9, 9, 9]).buffer));
-    await enablePush(w.mx, w.push, cfg, 'phone');
-    expect(old).toEqual(['x']);
-    expect(w.calls).toEqual(['subscribe:true:3', 'set-pusher']);
-  });
-  it('a failed pusher write after subscribing leaves the toggle off', async () => {
-    const w = world();
-    const fail = { ...w.mx, setPusher: async () => Promise.reject(new Error('no')) };
-    await expect(enablePush(fail, w.push, cfg, 'phone')).rejects.toThrow('no');
-    expect(await pushIsOn(w.mx, w.push, cfg)).toBe(false);
-  });
-});

src/app/features/push/pusher.ts

@@ -1,107 +0,0 @@
-import type { IPusherRequest } from 'matrix-js-sdk';
-import type { ActivePushConfig } from './config';
-
-/** What the page needs of the homeserver client and the browser's push manager, so tests supply fakes. */
-export interface PusherClient {
-  setPusher(p: IPusherRequest): Promise<unknown>;
-  getPushers(): Promise<{ pushers: { app_id: string; pushkey: string }[] }>;
-}
-export interface PushManagerPort {
-  getSubscription(): Promise<PushSubscription | null>;
-  subscribe(o: {
-    userVisibleOnly: boolean;
-    applicationServerKey: Uint8Array;
-  }): Promise<PushSubscription>;
-}
-
-export function vapidKeyBytes(b64url: string): Uint8Array {
-  const pad = '='.repeat((4 - (b64url.length % 4)) % 4);
-  const bin = atob((b64url + pad).replace(/-/g, '+').replace(/_/g, '/'));
-  return Uint8Array.from(bin, (c) => c.charCodeAt(0));
-}
-
-const b64url = (buf: ArrayBuffer | null): string =>
-  btoa(String.fromCharCode(...new Uint8Array(buf ?? new ArrayBuffer(0))))
-    .replace(/\+/g, '-')
-    .replace(/\//g, '_')
-    .replace(/=+$/, '');
-
-/**
- * The Matrix pusher for a browser subscription (Sygnal's `webpush` shape: the subscription's keys ride in `data`; the
- * pushkey is the subscription's p256dh key, as Element Web does). `event_id_only` asks the homeserver for ids, which
- * the worker resolves itself.
- */
-export function webPushPusher(
-  cfg: ActivePushConfig,
-  sub: PushSubscription,
-  deviceName: string
-): IPusherRequest {
-  const p256dh = b64url(sub.getKey('p256dh'));
-  return {
-    kind: 'http',
-    app_id: cfg.appId,
-    pushkey: p256dh,
-    app_display_name: 'Ratatoskr',
-    device_display_name: deviceName,
-    lang: navigator.language || 'en',
-    data: {
-      url: cfg.gatewayUrl,
-      format: 'event_id_only',
-      endpoint: sub.endpoint,
-      auth: b64url(sub.getKey('auth')),
-      p256dh,
-    },
-    append: false,
-  } as IPusherRequest;
-}
-
-const sameKey = (sub: PushSubscription, vapid: Uint8Array): boolean => {
-  const have = sub.options?.applicationServerKey;
-  return !have || b64url(have) === b64url(vapid.buffer as ArrayBuffer);
-};
-
-/** Subscribe (replacing a subscription made under another VAPID key), then register the pusher for this account. */
-export async function enablePush(
-  mx: PusherClient,
-  push: PushManagerPort,
-  cfg: ActivePushConfig,
-  deviceName: string
-): Promise<void> {
-  const key = vapidKeyBytes(cfg.vapidPublicKey);
-  let sub = await push.getSubscription();
-  if (sub && !sameKey(sub, key)) {
-    await sub.unsubscribe();
-    sub = null;
-  }
-  sub = sub ?? (await push.subscribe({ userVisibleOnly: true, applicationServerKey: key }));
-  await mx.setPusher(webPushPusher(cfg, sub, deviceName));
-}
-
-/** On only when this browser holds a subscription AND this account has a pusher for it (the two live in different places). */
-export async function pushIsOn(
-  mx: PusherClient,
-  push: PushManagerPort,
-  cfg: ActivePushConfig
-): Promise<boolean> {
-  const sub = await push.getSubscription();
-  if (!sub) return false;
-  const pushkey = b64url(sub.getKey('p256dh'));
-  const { pushers } = await mx.getPushers();
-  return pushers.some((p) => p.app_id === cfg.appId && p.pushkey === pushkey);
-}
-
-/** Delete this account's pusher, then the subscription. The order matters: a pusher with no subscription would keep failing at the gateway. */
-export async function disablePush(
-  mx: PusherClient,
-  push: PushManagerPort,
-  cfg: ActivePushConfig
-): Promise<void> {
-  const sub = await push.getSubscription();
-  if (!sub) return;
-  await mx.setPusher({
-    kind: null,
-    app_id: cfg.appId,
-    pushkey: b64url(sub.getKey('p256dh')),
-  } as unknown as IPusherRequest);
-  await sub.unsubscribe();
-}

src/app/features/push/sessionStore.test.ts

@@ -1,111 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { idbPort, RecordPort, SessionRecord, sessionStore } from './sessionStore';
-
-const memory = (): RecordPort & { held?: unknown } => {
-  const m: RecordPort & { held?: unknown } = {
-    async read() {
-      return m.held;
-    },
-    async write(v) {
-      m.held = v;
-    },
-  };
-  return m;
-};
-
-describe('sessionStore', () => {
-  it('saves a valid session and loads it back', async () => {
-    const s = sessionStore(memory());
-    await s.save('https://hs/', 'tok');
-    expect(await s.load()).toEqual({ baseUrl: 'https://hs/', accessToken: 'tok' });
-  });
-  it('deletes the record on logout, and on anything that is not two strings', async () => {
-    const port = memory();
-    const s = sessionStore(port);
-    await s.save('https://hs/', 'tok');
-    await s.save(undefined, undefined);
-    expect(port.held).toBeUndefined();
-    await s.save('https://hs/', 'tok');
-    await s.save('https://hs/', 5);
-    expect(await s.load()).toBeUndefined();
-  });
-  it('keeps the token only while a push subscription exists', async () => {
-    const port = memory();
-    const s = sessionStore(port);
-    await s.saveIfSubscribed('https://hs/', 'tok', async () => false);
-    expect(port.held).toBeUndefined();
-    await s.saveIfSubscribed('https://hs/', 'tok', async () => true);
-    expect(await s.load()).toEqual({ baseUrl: 'https://hs/', accessToken: 'tok' });
-    await s.saveIfSubscribed('https://hs/', 'tok', async () => false);
-    expect(port.held).toBeUndefined();
-    await s.saveIfSubscribed('https://hs/', 'tok', async () => true);
-    await s.saveIfSubscribed('https://hs/', 'tok', () =>
-      Promise.reject(new Error('no push manager'))
-    );
-    expect(port.held).toBeUndefined();
-  });
-  it('ignores a record that is not a session', async () => {
-    const port = memory();
-    port.held = { baseUrl: 1 };
-    expect(await sessionStore(port).load()).toBeUndefined();
-  });
-});
-
-// Just enough of IndexedDB for the port: one database, object stores of key -> value, async request callbacks.
-function fakeIndexedDB(): IDBFactory {
-  const dbs = new Map<string, Map<string, Map<string, unknown>>>();
-  const request = <T>(run: () => T) => {
-    const r = {} as IDBRequest<T>;
-    setTimeout(() => {
-      (r as { result: T }).result = run();
-      r.onsuccess?.(new Event('success'));
-    }, 0);
-    return r;
-  };
-  return {
-    open(name: string) {
-      const r = {} as IDBOpenDBRequest;
-      setTimeout(() => {
-        const fresh = !dbs.has(name);
-        const stores = dbs.get(name) ?? new Map();
-        dbs.set(name, stores);
-        const db = {
-          createObjectStore: (n: string) => stores.set(n, new Map()),
-          close: () => undefined,
-          transaction: (n: string) => {
-            const tx = {} as IDBTransaction;
-            const store = stores.get(n) as Map<string, unknown>;
-            const api = {
-              get: (k: string) => request(() => store.get(k)),
-              put: (v: unknown, k: string) => {
-                store.set(k, v);
-                setTimeout(() => tx.oncomplete?.(new Event('complete')), 0);
-              },
-              delete: (k: string) => {
-                store.delete(k);
-                setTimeout(() => tx.oncomplete?.(new Event('complete')), 0);
-              },
-            };
-            (tx as { objectStore: unknown }).objectStore = () => api;
-            return tx;
-          },
-        } as unknown as IDBDatabase;
-        (r as { result: IDBDatabase }).result = db;
-        if (fresh) r.onupgradeneeded?.(new Event('upgradeneeded') as IDBVersionChangeEvent);
-        r.onsuccess?.(new Event('success'));
-      }, 0);
-      return r;
-    },
-  } as unknown as IDBFactory;
-}
-
-describe('idbPort', () => {
-  it('round-trips the one record through IndexedDB and deletes it', async () => {
-    const s = sessionStore(idbPort(fakeIndexedDB()));
-    expect(await s.load()).toBeUndefined();
-    await s.save('https://hs/', 'tok');
-    expect(await s.load()).toEqual<SessionRecord>({ baseUrl: 'https://hs/', accessToken: 'tok' });
-    await s.save(undefined, undefined);
-    expect(await s.load()).toBeUndefined();
-  });
-});

src/app/features/push/sessionStore.ts

@@ -1,88 +0,0 @@
-// The one thing a push needs that a closed app cannot give: the access token, to fetch the event a push names.
-// Stored: `{ baseUrl, accessToken }`, one record, in this origin's IndexedDB `ratatoskr-sw` (not reachable by other
-// origins; the token is already in the page's own storage). Written when the page hands the worker its session
-// while this browser holds a push subscription; deleted when the page hands it none (logout) or the subscription is
-// gone. A browser that never turned push on stores nothing. Nothing else reads it but the push handler.
-export interface SessionRecord {
-  baseUrl: string;
-  accessToken: string;
-}
-
-/** The two operations the store needs from a key-value backend, so tests run without IndexedDB. */
-export interface RecordPort {
-  read(): Promise<unknown>;
-  write(value: SessionRecord | undefined): Promise<void>;
-}
-
-const DB = 'ratatoskr-sw';
-const STORE = 'session';
-const KEY = 'session';
-
-const done = <T>(req: IDBRequest<T>): Promise<T> =>
-  new Promise((resolve, reject) => {
-    req.onsuccess = () => resolve(req.result);
-    req.onerror = () => reject(req.error);
-  });
-
-export function idbPort(factory: IDBFactory): RecordPort {
-  const open = (): Promise<IDBDatabase> => {
-    const req = factory.open(DB, 1);
-    req.onupgradeneeded = () => req.result.createObjectStore(STORE);
-    return done(req);
-  };
-  return {
-    async read() {
-      const db = await open();
-      try {
-        return await done(db.transaction(STORE).objectStore(STORE).get(KEY));
-      } finally {
-        db.close();
-      }
-    },
-    async write(value) {
-      const db = await open();
-      try {
-        const tx = db.transaction(STORE, 'readwrite');
-        const store = tx.objectStore(STORE);
-        const finished = new Promise<void>((resolve, reject) => {
-          tx.oncomplete = () => resolve();
-          tx.onerror = () => reject(tx.error);
-          tx.onabort = () => reject(tx.error);
-        });
-        if (value) store.put(value, KEY);
-        else store.delete(KEY);
-        await finished;
-      } finally {
-        db.close();
-      }
-    },
-  };
-}
-
-export function sessionStore(port: RecordPort) {
-  return {
-    /** A valid session replaces the record; anything else (logout) deletes it. */
-    async save(baseUrl: unknown, accessToken: unknown): Promise<void> {
-      await port.write(
-        typeof baseUrl === 'string' && typeof accessToken === 'string' && baseUrl && accessToken
-          ? { baseUrl, accessToken }
-          : undefined
-      );
-    },
-    /** The token is kept only while this browser holds a push subscription; without one the record is deleted. */
-    async saveIfSubscribed(
-      baseUrl: unknown,
-      accessToken: unknown,
-      subscribed: () => Promise<boolean>
-    ): Promise<void> {
-      const keep = await subscribed().catch(() => false);
-      await this.save(keep ? baseUrl : undefined, keep ? accessToken : undefined);
-    },
-    async load(): Promise<SessionRecord | undefined> {
-      const v = (await port.read()) as Partial<SessionRecord> | undefined;
-      return v && typeof v.baseUrl === 'string' && typeof v.accessToken === 'string'
-        ? { baseUrl: v.baseUrl, accessToken: v.accessToken }
-        : undefined;
-    },
-  };
-}

src/app/features/push/testkit.ts

@@ -1,41 +0,0 @@
-import type { SessionRecord } from './sessionStore';
-
-/** A mock homeserver: answers the two reads the push handler makes, and records every request it saw. */
-export function mockHomeserver(opts: {
-  token: string;
-  events?: Record<string, unknown>;
-  roomNames?: Record<string, string>;
-  failAll?: boolean;
-}) {
-  const seen: { url: string; auth: string | null }[] = [];
-  const fetchFn = async (url: string, init: RequestInit): Promise<Response> => {
-    const auth = new Headers(init.headers).get('Authorization');
-    seen.push({ url, auth });
-    if (opts.failAll) throw new Error('network down');
-    if (auth !== `Bearer ${opts.token}`) return new Response('{}', { status: 401 });
-    const ev = /\/rooms\/([^/]+)\/event\/([^/]+)$/.exec(url);
-    if (ev) {
-      const e = opts.events?.[decodeURIComponent(ev[2])];
-      return e ? new Response(JSON.stringify(e)) : new Response('{}', { status: 404 });
-    }
-    const nm = /\/rooms\/([^/]+)\/state\/m\.room\.name$/.exec(url);
-    if (nm) {
-      const name = opts.roomNames?.[decodeURIComponent(nm[1])];
-      return name ? new Response(JSON.stringify({ name })) : new Response('{}', { status: 404 });
-    }
-    return new Response('{}', { status: 404 });
-  };
-  return { fetchFn, seen };
-}
-
-export const SESSION: SessionRecord = { baseUrl: 'https://matrix.example/', accessToken: 'tok-1' };
-
-/** The body a homeserver posts to a push gateway for `format: event_id_only` (Matrix push gateway API). */
-export const matrixNotify = (roomId: string, eventId: string) => ({
-  notification: {
-    event_id: eventId,
-    room_id: roomId,
-    counts: { unread: 1 },
-    devices: [{ app_id: 'org.gamecult.ratatoskr.web', pushkey: 'k', data: {} }],
-  },
-});

src/app/features/push/usePushOpen.ts

@@ -1,33 +0,0 @@
-import { useEffect } from 'react';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { OPEN_ROOM, PUSH_EVENT_PARAM, PUSH_ROOM_PARAM } from './worker';
-
-/** Opens the room a push notification named: from the worker's message (app open) or the start URL (app was closed). */
-export function usePushOpen(): void {
-  const { navigateRoom } = useRoomNavigate();
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const roomId = params.get(PUSH_ROOM_PARAM);
-    if (roomId) {
-      navigateRoom(roomId, params.get(PUSH_EVENT_PARAM) ?? undefined);
-      params.delete(PUSH_ROOM_PARAM);
-      params.delete(PUSH_EVENT_PARAM);
-      const rest = params.toString();
-      window.history.replaceState(
-        null,
-        '',
-        `${window.location.pathname}${rest ? `?${rest}` : ''}${window.location.hash}`
-      );
-    }
-    const onMessage = (ev: MessageEvent) => {
-      if (ev.data?.type === OPEN_ROOM && typeof ev.data.roomId === 'string') {
-        navigateRoom(
-          ev.data.roomId,
-          typeof ev.data.eventId === 'string' ? ev.data.eventId : undefined
-        );
-      }
-    };
-    navigator.serviceWorker?.addEventListener('message', onMessage);
-    return () => navigator.serviceWorker?.removeEventListener('message', onMessage);
-  }, [navigateRoom]);
-}

src/app/features/push/worker.test.ts

@@ -1,108 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { handleClick, handlePush, OPEN_ROOM, WorkerPort } from './worker';
-import { matrixNotify, mockHomeserver, SESSION } from './testkit';
-
-type Shown = { title: string; options: NotificationOptions & { renotify?: boolean } };
-
-function port(over: Partial<WorkerPort> = {}) {
-  const shown: Shown[] = [];
-  const opened: string[] = [];
-  const w: WorkerPort = {
-    windows: async () => [],
-    openWindow: async (u) => {
-      opened.push(u);
-    },
-    show: async (title, options) => {
-      shown.push({ title, options });
-    },
-    loadSession: async () => SESSION,
-    fetch: mockHomeserver({ token: 'tok-1' }).fetchFn,
-    scope: 'https://chat.example/',
-    ...over,
-  };
-  return { w, shown, opened };
-}
-
-const msg = {
-  type: 'm.room.message',
-  sender: '@ann:x',
-  content: { msgtype: 'm.text', body: 'hello' },
-};
-
-describe('push against a mock gateway and homeserver', () => {
-  it('a push the homeserver sent for event_id_only becomes a notification naming room, sender and text', async () => {
-    const hs = mockHomeserver({
-      token: 'tok-1',
-      events: { $e: msg },
-      roomNames: { '!r:x': 'Lobby' },
-    });
-    const { w, shown } = port({ fetch: hs.fetchFn });
-    await handlePush(matrixNotify('!r:x', '$e'), w);
-    expect(shown).toHaveLength(1);
-    expect(shown[0].title).toBe('Lobby');
-    expect(shown[0].options.body).toBe('ann: hello');
-    expect(shown[0].options.tag).toBe('!r:x');
-    expect(shown[0].options.renotify).toBe(true);
-    expect(shown[0].options.data).toEqual({ roomId: '!r:x', eventId: '$e' });
-  });
-  it('with no stored session it still shows (a push must always show) and sends the token nowhere', async () => {
-    const hs = mockHomeserver({ token: 'tok-1', events: { $e: msg } });
-    const { w, shown } = port({ fetch: hs.fetchFn, loadSession: async () => undefined });
-    await handlePush(matrixNotify('!r:x', '$e'), w);
-    expect(shown[0]).toMatchObject({ title: 'Ratatoskr', options: { body: 'New message' } });
-    expect(hs.seen).toHaveLength(0);
-  });
-  it('shows the generic notification for a body it cannot read', async () => {
-    const { w, shown } = port();
-    await handlePush(undefined, w);
-    expect(shown[0].title).toBe('Ratatoskr');
-    expect(shown[0].options.tag).toBeUndefined();
-    expect(shown[0].options.data).toBeUndefined();
-  });
-  it('shows even when the window list cannot be read', async () => {
-    const { w, shown } = port({ windows: () => Promise.reject(new Error('no clients')) });
-    await handlePush(matrixNotify('!r:x', '$e'), w);
-    expect(shown).toHaveLength(1);
-  });
-  it('shows nothing while a window is visible and focused, and shows when the window is hidden', async () => {
-    const win = (visibilityState: string, focused: boolean) => ({
-      visibilityState,
-      focused,
-      focus: async () => undefined,
-      postMessage: () => undefined,
-    });
-    const a = port({ windows: async () => [win('visible', true)] });
-    await handlePush(matrixNotify('!r:x', '$e'), a.w);
-    expect(a.shown).toHaveLength(0);
-    const b = port({ windows: async () => [win('hidden', false), win('visible', false)] });
-    await handlePush(matrixNotify('!r:x', '$e'), b.w);
-    expect(b.shown).toHaveLength(1);
-  });
-});
-
-describe('notification click', () => {
-  it('focuses the open window and tells it the room', async () => {
-    const focus = vi.fn(async () => undefined);
-    const postMessage = vi.fn();
-    const { w, opened } = port({
-      windows: async () => [{ visibilityState: 'hidden', focused: false, focus, postMessage }],
-    });
-    await handleClick({ roomId: '!r:x', eventId: '$e' }, w);
-    expect(focus).toHaveBeenCalled();
-    expect(postMessage).toHaveBeenCalledWith({ type: OPEN_ROOM, roomId: '!r:x', eventId: '$e' });
-    expect(opened).toHaveLength(0);
-  });
-  it('with no window, starts the app with the room in the URL', async () => {
-    const { w, opened } = port();
-    await handleClick({ roomId: '!r:x', eventId: '$e' }, w);
-    const u = new URL(opened[0]);
-    expect(u.origin + u.pathname).toBe('https://chat.example/');
-    expect(u.searchParams.get('pushRoom')).toBe('!r:x');
-    expect(u.searchParams.get('pushEvent')).toBe('$e');
-  });
-  it('with no window and no target, just opens the app', async () => {
-    const { w, opened } = port();
-    await handleClick(undefined, w);
-    expect(opened).toEqual(['https://chat.example/']);
-  });
-});

src/app/features/push/worker.ts

@@ -1,62 +0,0 @@
-import { describePush, parsePush } from './payload';
-import type { SessionRecord } from './sessionStore';
-
-/** The slice of the service worker's scope the handlers use, so they run in tests without a worker. */
-export interface WorkerPort {
-  windows(): Promise<
-    {
-      visibilityState: string;
-      focused: boolean;
-      focus(): Promise<unknown>;
-      postMessage(m: unknown): void;
-    }[]
-  >;
-  openWindow(url: string): Promise<unknown>;
-  show(title: string, options: NotificationOptions): Promise<void>;
-  loadSession(): Promise<SessionRecord | undefined>;
-  fetch(url: string, init: RequestInit): Promise<Response>;
-  /** The worker's scope URL: where a cold click opens the app. */
-  scope: string;
-}
-
-export interface PushTarget {
-  roomId: string;
-  eventId?: string;
-}
-
-/** A push shows a notification, unless the app is open and focused (browsers allow that, and the page notifies itself). */
-export async function handlePush(raw: unknown, w: WorkerPort): Promise<void> {
-  const ids = parsePush(raw);
-  const open = await w.windows().catch(() => []);
-  if (open.some((c) => c.visibilityState === 'visible' && c.focused)) return;
-  const shown = await describePush(ids, await w.loadSession(), w.fetch);
-  await w.show(shown.title, {
-    body: shown.body,
-    // One notification per room, replaced (and re-alerted) by the next message there.
-    tag: ids?.roomId,
-    renotify: !!ids?.roomId,
-    icon: './public/android/android-chrome-192x192.png',
-    data: ids ? ({ roomId: ids.roomId, eventId: ids.eventId } satisfies PushTarget) : undefined,
-  } as NotificationOptions);
-}
-
-export const OPEN_ROOM = 'openRoom';
-export const PUSH_ROOM_PARAM = 'pushRoom';
-export const PUSH_EVENT_PARAM = 'pushEvent';
-
-/** A click focuses an open window and tells it which room; with none open it starts the app with the room in the URL. */
-export async function handleClick(target: PushTarget | undefined, w: WorkerPort): Promise<void> {
-  const windows = await w.windows();
-  const open = windows[0];
-  if (open) {
-    await open.focus();
-    if (target?.roomId) open.postMessage({ type: OPEN_ROOM, ...target });
-    return;
-  }
-  const url = new URL(w.scope);
-  if (target?.roomId) {
-    url.searchParams.set(PUSH_ROOM_PARAM, target.roomId);
-    if (target.eventId) url.searchParams.set(PUSH_EVENT_PARAM, target.eventId);
-  }
-  await w.openWindow(url.href);
-}

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

@@ -66,7 +66,6 @@ import { useAutoDiscoveryInfo } from '../../hooks/useAutoDiscoveryInfo';
 import { livekitSupport } from '../../hooks/useLivekitSupport';
 import { StateEvent } from '../../../types/matrix/room';
 import { webRTCSupported } from '../../utils/rtc';
-import { PhoneHitSpread24 } from '../../styles/PhoneHit.css';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -230,7 +229,6 @@ function CallChatToggle() {
 
   return (
     <IconButton
-      className={PhoneHitSpread24}
       onClick={() => setChat(!chat)}
       aria-pressed={chat}
       aria-label="Toggle Chat"
@@ -438,7 +436,6 @@ export function RoomNavItem({
             }
           >
             <IconButton
-              className={PhoneHitSpread24}
               onClick={handleOpenMenu}
               aria-pressed={!!menuAnchor}
               aria-controls={`menu-${room.roomId}`}

src/app/features/room-settings/RoomSettings.tsx

@@ -17,7 +17,6 @@ import { Permissions } from './permissions';
 import { RoomSettingsPage } from '../../state/roomSettings';
 import { useRoom } from '../../hooks/useRoom';
 import { DeveloperTools } from '../common-settings/developer-tools';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type RoomSettingsMenuItem = {
   page: RoomSettingsPage;
@@ -118,7 +117,7 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
               </Box>
               <Box shrink="No">
                 {screenSize === ScreenSize.Mobile && (
-                  <IconButton className={PhoneHit} onClick={requestClose} variant="Background">
+                  <IconButton onClick={requestClose} variant="Background">
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 )}

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

@@ -15,7 +15,6 @@ import {
 } from '../../common-settings/general';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type GeneralProps = {
   requestClose: () => void;
@@ -36,7 +35,7 @@ export function General({ requestClose }: GeneralProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/room-settings/permissions/Permissions.tsx

@@ -9,7 +9,6 @@ import { usePermissionGroups } from './usePermissionItems';
 import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
-import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type PermissionsProps = {
   requestClose: () => void;
@@ -46,7 +45,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/room/CallChatView.tsx

@@ -6,7 +6,6 @@ import { Page, PageHeader } from '../../components/page';
 import { callChatAtom } from '../../state/callEmbed';
 import { RoomView } from './RoomView';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 export function CallChatView() {
   const { eventId } = useParams();
@@ -42,12 +41,7 @@ export function CallChatView() {
               }
             >
               {(triggerRef) => (
-                <IconButton
-                  className={PhoneHit}
-                  ref={triggerRef}
-                  variant="Surface"
-                  onClick={handleClose}
-                >
+                <IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
                   <Icon src={Icons.Cross} />
                 </IconButton>
               )}

src/app/features/room/MembersDrawer.tsx

@@ -59,7 +59,6 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { PhoneHit } from '../../styles/PhoneHit.css';
 
 type MemberDrawerHeaderProps = {
   room: Room;
@@ -88,7 +87,6 @@ function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
           >
             {(triggerRef) => (
               <IconButton
-                className={PhoneHit}
                 ref={triggerRef}
                 variant="Background"
                 onClick={() => setPeopleDrawer(false)}
@@ -361,7 +359,6 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
 
             <ScrollTopContainer scrollRef={scrollRef} anchorRef={scrollTopAnchorRef}>
               <IconButton
-                className={PhoneHit}
                 onClick={() => virtualizer.scrollToOffset(0)}
                 variant="Surface"
                 radii="Pill"

src/app/features/room/RoomInput.tsx

@@ -28,9 +28,6 @@ import {
   config,
   toRem,
 } from 'folds';
-import { RoomOutbox } from './RoomOutbox';
-import { sendTracked } from '../../state/room/outboxSend';
-import { clearDraft, loadDraft, saveDraft } from '../../state/room/composerStore';
 
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import {
@@ -116,7 +113,6 @@ import { useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useComposingCheck } from '../../hooks/useComposingCheck';
-import { PhoneHitSpread24, PhoneHitSpread32 } from '../../styles/PhoneHit.css';
 
 interface RoomInputProps {
   editor: Editor;
@@ -225,66 +221,22 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       useCallback((width) => setHideStickerBtn(width < 500), [])
     );
 
-    const userId = mx.getUserId() ?? '';
-    const draftSaveTimer = useRef<ReturnType<typeof setTimeout>>();
-
-    // The atom is only a cache: after a reload it is empty and the stored draft is the truth.
-    useEffect(() => {
-      if (msgDraft.length === 0) {
-        const stored = loadDraft(userId, roomId);
-        if (stored.length > 0) setMsgDraft(stored);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [userId, roomId]);
-
     useEffect(() => {
       Transforms.insertFragment(editor, msgDraft);
     }, [editor, msgDraft]);
 
-    const persistDraft = useCallback(() => {
-      clearTimeout(draftSaveTimer.current);
-      draftSaveTimer.current = undefined;
-      saveDraft(userId, roomId, editor.children);
-    }, [userId, roomId, editor]);
-
-    // Write on input (debounced), and flush when the page is hidden or unloading, which is
-    // all a mobile reload gives us.
-    const handleEditorChange = useCallback(() => {
-      clearTimeout(draftSaveTimer.current);
-      draftSaveTimer.current = setTimeout(persistDraft, 400);
-    }, [persistDraft]);
-
-    useEffect(() => {
-      const flush = () => {
-        if (draftSaveTimer.current !== undefined) persistDraft();
-      };
-      const onVisibility = () => {
-        if (document.visibilityState === 'hidden') flush();
-      };
-      window.addEventListener('pagehide', flush);
-      document.addEventListener('visibilitychange', onVisibility);
-      return () => {
-        window.removeEventListener('pagehide', flush);
-        document.removeEventListener('visibilitychange', onVisibility);
-      };
-    }, [persistDraft]);
-
     useEffect(
       () => () => {
-        clearTimeout(draftSaveTimer.current);
-        draftSaveTimer.current = undefined;
         if (!isEmptyEditor(editor)) {
           const parsedDraft = JSON.parse(JSON.stringify(editor.children));
           setMsgDraft(parsedDraft);
-          saveDraft(userId, roomId, parsedDraft);
         } else {
           setMsgDraft([]);
-          clearDraft(userId, roomId);
         }
         resetEditor(editor);
         resetEditorHistory(editor);
       },
-      [roomId, editor, setMsgDraft, userId]
+      [roomId, editor, setMsgDraft]
     );
 
     const handleFileMetadata = useCallback(
@@ -335,7 +287,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       });
       handleCancelUpload(uploads);
       const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises));
-      contents.forEach((content) => sendTracked(mx, roomId, content as Record<string, unknown>));
+      contents.forEach((content) => mx.sendMessage(roomId, content as any));
     };
 
     const submit = useCallback(() => {
@@ -414,25 +366,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           content['m.relates_to'].is_falling_back = false;
         }
       }
-      sendTracked(mx, roomId, content);
-      clearTimeout(draftSaveTimer.current);
-      draftSaveTimer.current = undefined;
-      clearDraft(userId, roomId);
+      mx.sendMessage(roomId, content as any);
       resetEditor(editor);
       resetEditorHistory(editor);
       setReplyDraft(undefined);
       sendTypingStatus(false);
-    }, [
-      mx,
-      roomId,
-      userId,
-      editor,
-      replyDraft,
-      sendTypingStatus,
-      setReplyDraft,
-      isMarkdown,
-      commands,
-    ]);
+    }, [mx, roomId, editor, replyDraft, sendTypingStatus, setReplyDraft, isMarkdown, commands]);
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {
@@ -494,7 +433,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         await getImageUrlBlob(stickerUrl)
       );
 
-      sendTracked(mx, roomId, { body: label, url: mxc, info }, EventType.Sticker);
+      mx.sendEvent(roomId, EventType.Sticker, {
+        body: label,
+        url: mxc,
+        info,
+      });
     };
 
     return (
@@ -594,53 +537,47 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
           onPaste={handlePaste}
-          onChange={handleEditorChange}
           top={
-            <>
-              <RoomOutbox mx={mx} roomId={roomId} />
-              {replyDraft && (
-                <div>
-                  <Box
-                    alignItems="Center"
-                    gap="300"
-                    style={{ padding: `${config.space.S200} ${config.space.S300} 0` }}
+            replyDraft && (
+              <div>
+                <Box
+                  alignItems="Center"
+                  gap="300"
+                  style={{ padding: `${config.space.S200} ${config.space.S300} 0` }}
+                >
+                  <IconButton
+                    onClick={() => setReplyDraft(undefined)}
+                    variant="SurfaceVariant"
+                    size="300"
+                    radii="300"
                   >
-                    <IconButton
-                      className={PhoneHitSpread24}
-                      onClick={() => setReplyDraft(undefined)}
-                      variant="SurfaceVariant"
-                      size="300"
-                      radii="300"
-                    >
-                      <Icon src={Icons.Cross} size="50" />
-                    </IconButton>
-                    <Box direction="Row" gap="200" alignItems="Center">
-                      {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
-                      <ReplyLayout
-                        userColor={replyUsernameColor}
-                        username={
-                          <Text size="T300" truncate>
-                            <b>
-                              {getMemberDisplayName(room, replyDraft.userId) ??
-                                getMxIdLocalPart(replyDraft.userId) ??
-                                replyDraft.userId}
-                            </b>
-                          </Text>
-                        }
-                      >
+                    <Icon src={Icons.Cross} size="50" />
+                  </IconButton>
+                  <Box direction="Row" gap="200" alignItems="Center">
+                    {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
+                    <ReplyLayout
+                      userColor={replyUsernameColor}
+                      username={
                         <Text size="T300" truncate>
-                          {trimReplyFromBody(replyDraft.body)}
+                          <b>
+                            {getMemberDisplayName(room, replyDraft.userId) ??
+                              getMxIdLocalPart(replyDraft.userId) ??
+                              replyDraft.userId}
+                          </b>
                         </Text>
-                      </ReplyLayout>
-                    </Box>
+                      }
+                    >
+                      <Text size="T300" truncate>
+                        {trimReplyFromBody(replyDraft.body)}
+                      </Text>
+                    </ReplyLayout>
                   </Box>
-                </div>
-              )}
-            </>
+                </Box>
+              </div>
+            )
           }
           before={
             <IconButton
-              className={PhoneHitSpread32}
               onClick={() => pickFile('*')}
               variant="SurfaceVariant"
               size="300"
@@ -652,7 +589,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           after={
             <>
               <IconButton
-                className={PhoneHitSpread32}
                 variant="SurfaceVariant"
                 size="300"
                 radii="300"
@@ -695,7 +631,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   >
                     {!hideStickerBtn && (
                       <IconButton
-                        className={PhoneHitSpread32}
                         aria-pressed={emojiBoardTab === EmojiBoardTab.Sticker}
                         onClick={() => setEmojiBoardTab(EmojiBoardTab.Sticker)}
                         variant="SurfaceVariant"
@@ -709,7 +644,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                       </IconButton>
                     )}
                     <IconButton
-                      className={PhoneHitSpread32}
                       ref={emojiBtnRef}
                       aria-pressed={
                         hideStickerBtn ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
@@ -729,13 +663,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   </PopOut>
                 )}
               </UseStateProvider>
-              <IconButton
-                className={PhoneHitSpread32}
-                onClick={submit}
-                variant="SurfaceVariant"
-                size="300"
-                radii="300"
-              >
+              <IconButton onClick={submit} variant="SurfaceVariant" size="300" radii="300">
                 <Icon src={Icons.Send} />
               </IconButton>
             </>

src/app/features/room/RoomOutbox.actions.test.tsx

@@ -1,102 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { enqueueOutbox, failOutbox, loadOutbox } from '../../state/room/composerStore';
-import { RoomOutbox } from './RoomOutbox';
-
-// The component's hooks are held still (state is its initial value, effects do not run) so the element tree
-// it returns can be read and its click handlers called without a DOM.
-vi.mock('react', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('react')>();
-  const useState = (init: unknown) => [
-    typeof init === 'function' ? (init as () => unknown)() : init,
-    () => undefined,
-  ];
-  return {
-    ...actual,
-    default: { ...actual, useState, useEffect: () => undefined },
-    useState,
-    useEffect: () => undefined,
-  };
-});
-
-type El = { props?: { children?: unknown; onClick?: () => void } };
-const flatten = (node: unknown): El[] => {
-  if (Array.isArray(node)) return node.flatMap(flatten);
-  if (node && typeof node === 'object') {
-    const el = node as El;
-    return [el, ...flatten(el.props?.children)];
-  }
-  return [];
-};
-const textOf = (node: unknown): string => {
-  if (typeof node === 'string' || typeof node === 'number') return String(node);
-  if (Array.isArray(node)) return node.map(textOf).join('');
-  if (node && typeof node === 'object') return textOf((node as El).props?.children);
-  return '';
-};
-/** The onClick of the chip whose label is `label`. */
-const clickOf = (tree: unknown, label: string) => {
-  const chip = flatten(tree).find((e) => e.props?.onClick && textOf(e) === label);
-  if (!chip?.props?.onClick) throw new Error(`no ${label} chip`);
-  return chip.props.onClick;
-};
-
-describe('RoomOutbox actions', () => {
-  beforeEach(() => {
-    const m = new Map<string, string>();
-    vi.stubGlobal('localStorage', {
-      getItem: (k: string) => m.get(k) ?? null,
-      setItem: (k: string, v: string) => {
-        m.set(k, v);
-      },
-      removeItem: (k: string) => {
-        m.delete(k);
-      },
-    });
-    enqueueOutbox('@a:x', { txnId: 'keep', roomId: '!r:x', content: { body: 'stay' } });
-    enqueueOutbox('@a:x', { txnId: 'bad', roomId: '!r:x', content: { body: 'did not go' } });
-    failOutbox('@a:x', 'bad', 'ECONNRESET');
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
-  const mount = () => {
-    const mx = {
-      getUserId: () => '@a:x',
-      makeTxnId: () => 'txn-new',
-      getRoom: () => undefined,
-      sendEvent: vi.fn().mockResolvedValue({ event_id: '$e' }),
-    };
-    const tree = (RoomOutbox as unknown as (p: unknown) => unknown)({ mx, roomId: '!r:x' });
-    return { mx, tree };
-  };
-
-  it('Discard removes that message from the outbox and no other', () => {
-    const { mx, tree } = mount();
-    // both entries are shown; the failed one is the one with Discard
-    clickOf(tree, 'Discard')();
-    expect(loadOutbox('@a:x').map((e) => e.txnId)).toEqual(['keep']);
-    expect(mx.sendEvent).not.toHaveBeenCalled();
-  });
-
-  it('Resend sends that message again and does not discard it first', async () => {
-    const { mx, tree } = mount();
-    // the server has not answered yet: the resend is in flight
-    mx.sendEvent.mockReturnValue(
-      new Promise<never>(() => {
-        // never settles
-      })
-    );
-    clickOf(tree, 'Resend')();
-    await Promise.resolve();
-    expect(mx.sendEvent).toHaveBeenCalledTimes(1);
-    expect(mx.sendEvent).toHaveBeenCalledWith(
-      '!r:x',
-      'm.room.message',
-      { body: 'did not go' },
-      'bad'
-    );
-    // still in the outbox, pending again under the same id, until the server confirms it
-    expect(loadOutbox('@a:x').find((e) => e.txnId === 'bad')).toMatchObject({ status: 'pending' });
-  });
-});

src/app/features/room/RoomOutbox.render.test.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { enqueueOutbox, failOutbox } from '../../state/room/composerStore';
-import { RoomOutbox } from './RoomOutbox';
-
-// What the person sees under the timeline for sends the server has not confirmed.
-const text = (html: string) => html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ');
-
-describe('RoomOutbox as rendered', () => {
-  beforeEach(() => {
-    const m = new Map<string, string>();
-    vi.stubGlobal('localStorage', {
-      getItem: (k: string) => m.get(k) ?? null,
-      setItem: (k: string, v: string) => {
-        m.set(k, v);
-      },
-      removeItem: (k: string) => {
-        m.delete(k);
-      },
-    });
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
-  const mx = { getUserId: () => '@a:x' } as never;
-  const entry = (txnId: string, roomId: string, body: string) => ({
-    txnId,
-    roomId,
-    content: { body },
-  });
-
-  it('renders nothing when the room has no unconfirmed sends', () => {
-    enqueueOutbox('@a:x', entry('t1', '!other:x', 'elsewhere'));
-    expect(renderToStaticMarkup(<RoomOutbox mx={mx} roomId="!r:x" />)).toBe('');
-  });
-
-  it('shows a fresh send as Sending with its text and no Resend', () => {
-    enqueueOutbox('@a:x', entry('t1', '!r:x', 'on its way'), Date.now() + 1000);
-    const html = renderToStaticMarkup(<RoomOutbox mx={mx} roomId="!r:x" />);
-    expect(html).toContain('data-outbox-status="pending"');
-    expect(text(html)).toContain('Sending…');
-    expect(text(html)).toContain('on its way');
-    expect(text(html)).not.toContain('Resend');
-  });
-
-  it('shows a failed send with its error, Resend and Discard', () => {
-    enqueueOutbox('@a:x', entry('t2', '!r:x', 'did not go'));
-    failOutbox('@a:x', 't2', 'ECONNRESET');
-    const html = renderToStaticMarkup(<RoomOutbox mx={mx} roomId="!r:x" />);
-    expect(html).toContain('data-outbox-status="failed"');
-    expect(text(html)).toContain('Not sent: ECONNRESET');
-    expect(text(html)).toContain('Resend');
-    expect(text(html)).toContain('Discard');
-  });
-
-  it('shows a send left over from before this page load as interrupted, resendable', () => {
-    enqueueOutbox('@a:x', entry('t3', '!r:x', 'lost to a reload'), 5);
-    const html = renderToStaticMarkup(<RoomOutbox mx={mx} roomId="!r:x" />);
-    expect(text(html)).toContain('Interrupted by a reload');
-    expect(text(html)).toContain('Resend');
-  });
-});

src/app/features/room/RoomOutbox.test.ts

@@ -1,28 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { SLOW_SEND_MS, outboxView } from './RoomOutbox';
-
-describe('outboxView', () => {
-  it('walks sending -> still sending (resendable) -> failed', () => {
-    expect(outboxView({ status: 'pending', ts: 100 }, 100, 0)).toMatchObject({
-      label: 'Sending…',
-      canResend: false,
-    });
-    expect(outboxView({ status: 'pending', ts: 100 }, 100 + SLOW_SEND_MS, 0)).toMatchObject({
-      label: expect.stringMatching(/^Still sending/),
-      canResend: true,
-    });
-    expect(outboxView({ status: 'failed', ts: 100, error: 'x' }, 100, 0)).toMatchObject({
-      failed: true,
-      canResend: true,
-    });
-  });
-
-  it('offers Resend to a pending send at 30 s and not a millisecond before', () => {
-    const at = (ms: number) => outboxView({ status: 'pending', ts: 100 }, 100 + ms, 0).canResend;
-    expect([at(29_999), at(30_000)]).toEqual([false, true]);
-  });
-
-  it('an entry older than this page load reads as interrupted', () => {
-    expect(outboxView({ status: 'pending', ts: 5 }, 6, 10).label).toMatch(/Interrupted/);
-  });
-});

src/app/features/room/RoomOutbox.tsx

@@ -1,121 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { MatrixClient } from 'matrix-js-sdk';
-import { Box, Chip, Text, color, config } from 'folds';
-import {
-  OutboxEntry,
-  loadOutbox,
-  removeOutbox,
-  subscribeOutbox,
-} from '../../state/room/composerStore';
-import { PAGE_START, resendTracked } from '../../state/room/outboxSend';
-
-/** A send still unconfirmed after this long is offered Resend: the request may be hung. */
-export const SLOW_SEND_MS = 30_000;
-
-export type OutboxView = { label: string; failed: boolean; canResend: boolean };
-
-export const outboxView = (
-  entry: Pick<OutboxEntry, 'status' | 'ts' | 'error'>,
-  now: number,
-  since: number = PAGE_START
-): OutboxView => {
-  if (entry.status === 'failed') {
-    return {
-      label: `Not sent${entry.error ? `: ${entry.error}` : ''}`,
-      failed: true,
-      canResend: true,
-    };
-  }
-  if (entry.ts < since) {
-    return {
-      label: 'Interrupted by a reload: may not have been sent',
-      failed: false,
-      canResend: true,
-    };
-  }
-  if (now - entry.ts >= SLOW_SEND_MS) {
-    return {
-      label: 'Still sending: slow connection (Resend may duplicate it if it lands later)',
-      failed: false,
-      canResend: true,
-    };
-  }
-  return { label: 'Sending…', failed: false, canResend: false };
-};
-
-export const useRoomOutbox = (userId: string, roomId: string): OutboxEntry[] => {
-  const read = () => loadOutbox(userId).filter((e) => e.roomId === roomId);
-  const [entries, setEntries] = useState(read);
-  useEffect(() => {
-    setEntries(read());
-    return subscribeOutbox(() => setEntries(read()));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userId, roomId]);
-  return entries;
-};
-
-/** Re-render every few seconds while anything is waiting, so a slow send turns resendable. */
-const useNow = (active: boolean): number => {
-  const [now, setNow] = useState(Date.now());
-  useEffect(() => {
-    if (!active) return undefined;
-    setNow(Date.now());
-    const id = setInterval(() => setNow(Date.now()), 5000);
-    return () => clearInterval(id);
-  }, [active]);
-  return now;
-};
-
-type RoomOutboxProps = { mx: MatrixClient; roomId: string };
-
-/**
- * Messages this client sent that the server has not confirmed: sending, slow, interrupted by a
- * reload, or failed, each with Resend where one makes sense and Discard.
- */
-export function RoomOutbox({ mx, roomId }: RoomOutboxProps) {
-  const userId = mx.getUserId() ?? '';
-  const entries = useRoomOutbox(userId, roomId);
-  const now = useNow(entries.length > 0);
-  if (entries.length === 0) return null;
-
-  return (
-    <Box
-      direction="Column"
-      gap="100"
-      style={{ padding: `${config.space.S200} ${config.space.S300} 0` }}
-    >
-      {entries.map((entry) => {
-        const view = outboxView(entry, now);
-        return (
-          <Box key={entry.txnId} alignItems="Center" gap="200" data-outbox-status={entry.status}>
-            <Box grow="Yes" direction="Column">
-              <Text
-                size="T200"
-                style={{ color: view.failed ? color.Critical.Main : color.Surface.OnContainer }}
-              >
-                {view.label}
-              </Text>
-              <Text size="T300" truncate>
-                {String(entry.content.body ?? '')}
-              </Text>
-            </Box>
-            {view.canResend && (
-              <>
-                <Chip variant="Surface" radii="Pill" onClick={() => resendTracked(mx, entry)}>
-                  <Text size="B300">Resend</Text>
-                </Chip>
-                <Chip
-                  variant="Surface"
-                  radii="Pill"
-                  onClick={() => removeOutbox(userId, entry.txnId)}
-                >
-                  <Text size="B300">Discard</Text>
-                </Chip>
-              </>
-            )}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}

src/app/features/room/RoomTimeline.tsx

@@ -47,7 +47,6 @@ import {
 import { isKeyHotkey } from 'is-hotkey';
 import { Opts as LinkifyOpts } from 'linkifyjs';
 import { useTranslation } from 'react-i18next';
-import { isUnconfirmedLocalEcho } from './localEcho';
 import { eventWithShortcode, factoryEventSentBy, getMxIdLocalPart } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useVirtualPaginator, ItemRange } from '../../hooks/useVirtualPaginator';
@@ -390,19 +389,6 @@ const useLiveEventArrive = (room: Room, onArrive: (mEvent: MatrixEvent) => void)
   }, [room, onArrive]);
 };
 
-/** A local echo changes status (or becomes its remote echo) without a Timeline event: redraw. */
-const useLocalEchoRefresh = (room: Room, onUpdate: () => void) => {
-  useEffect(() => {
-    const handle: RoomEventHandlerMap[RoomEvent.LocalEchoUpdated] = (_evt, r) => {
-      if (r.roomId === room.roomId) onUpdate();
-    };
-    room.on(RoomEvent.LocalEchoUpdated, handle);
-    return () => {
-      room.removeListener(RoomEvent.LocalEchoUpdated, handle);
-    };
-  }, [room, onUpdate]);
-};
-
 const useLiveTimelineRefresh = (room: Room, onRefresh: () => void) => {
   useEffect(() => {
     const handleTimelineRefresh: RoomEventHandlerMap[RoomEvent.TimelineRefresh] = (r) => {
@@ -662,18 +648,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     )
   );
 
-  useLocalEchoRefresh(
-    room,
-    useCallback(() => {
-      // the echo was hidden while unconfirmed, so its arrival scrolled to nothing: scroll now
-      if (atBottomRef.current) {
-        scrollToBottomRef.current.count += 1;
-        scrollToBottomRef.current.smooth = true;
-      }
-      setTimeline((ct) => ({ ...ct }));
-    }, [])
-  );
-
   const handleOpenEvent = useCallback(
     async (
       evtId: string,
@@ -1672,7 +1646,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     if (mEvent.isRedacted() && !showHiddenEvents) {
       return null;
     }
-    if (isUnconfirmedLocalEcho(mEvent)) return null;
 
     if (!newDivider && readUptoEventIdRef.current) {
       newDivider = prevEvent?.getId() === readUptoEventIdRef.current;

src/app/features/room/RoomTrainingLine.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { useClientConfig } from '../../hooks/useClientConfig';
 import { useSkyInk } from '../../hooks/useTheme';
-import { scrimStyle } from '../scene/skyInk';
+import { noticeInk } from '../scene/skyInk';
 import {
   ROOM_NOTICE_EVENT_TYPE,
   parseRoomNotice,
@@ -24,8 +24,7 @@ export function RoomTrainingLine({ room }: { room: Room }) {
       size="T200"
       style={{
         padding: `${config.space.S100} 0`,
-        color: color.SurfaceVariant.OnContainer,
-        ...scrimStyle(skyInk),
+        color: (skyInk && noticeInk(skyInk)) ?? color.SurfaceVariant.OnContainer,
       }}
     >
       {line}

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

@@ -2,14 +2,15 @@ import { style } from '@vanilla-extract/css';
 import { config } from 'folds';
 import { MOBILE_BREAKPOINT } from '../../hooks/useScreenSize';
 
-// Phone tap target: the topic is an 18 px line directly under the room name (no gap), so its button grows only
-// downward, 26 px (44 px to tap) and the negative margin keeps the layout where it was: growing up would take taps
-// from the name line.
+// Phone tap target: the topic is an 18 px line under the room name; its button grows 9 px up and 17 px down
+// (44 px to tap; more below because the name is above) and the negative margin keeps the layout where it was.
 export const HeaderTopic = style({
   '@media': {
     [`screen and (max-width: ${MOBILE_BREAKPOINT}px)`]: {
-      paddingBottom: 26,
-      marginBottom: -26,
+      paddingTop: 9,
+      paddingBottom: 17,
+      marginTop: -9,
+      marginBottom: -17,
     },
   },
   ':hover': {

src/app/features/room/RoomViewHeader.tsx

@@ -72,7 +72,6 @@ import { RoomSettingsPage } from '../../state/roomSettings';
 import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
 import { useLivekitSupport } from '../../hooks/useLivekitSupport';
 import { webRTCSupported } from '../../utils/rtc';
-import { PhoneHitSpread40 } from '../../styles/PhoneHit.css';
 
 type RoomMenuProps = {
   room: Room;
@@ -337,7 +336,6 @@ function CallButton() {
       >
         {(triggerRef) => (
           <IconButton
-            className={PhoneHitSpread40}
             variant="Surface"
             fill="None"
             ref={triggerRef}
@@ -457,7 +455,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
           <BackRouteHandler>
             {(onBack) => (
               <Box shrink="No" alignItems="Center">
-                <IconButton className={PhoneHitSpread40} fill="None" onClick={onBack}>
+                <IconButton fill="None" onClick={onBack}>
                   <Icon src={Icons.ArrowLeft} />
                 </IconButton>
               </Box>
@@ -533,12 +531,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               }
             >
               {(triggerRef) => (
-                <IconButton
-                  className={PhoneHitSpread40}
-                  fill="None"
-                  ref={triggerRef}
-                  onClick={handleSearchClick}
-                >
+                <IconButton fill="None" ref={triggerRef} onClick={handleSearchClick}>
                   <Icon size="400" src={Icons.Search} />
                 </IconButton>
               )}
@@ -555,7 +548,6 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
           >
             {(triggerRef) => (
               <IconButton
-                className={PhoneHitSpread40}
                 fill="None"
                 style={{ position: 'relative' }}
                 onClick={handleOpenPinMenu}
@@ -620,12 +612,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               }
             >
               {(triggerRef) => (
-                <IconButton
-                  className={PhoneHitSpread40}
-                  fill="None"
-                  ref={triggerRef}
-                  onClick={handleMemberToggle}
-                >
+                <IconButton fill="None" ref={triggerRef} onClick={handleMemberToggle}>
                   <Icon size="400" src={Icons.User} />
                 </IconButton>
               )}
@@ -644,7 +631,6 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
           >
             {(triggerRef) => (
               <IconButton
-                className={PhoneHitSpread40}
                 fill="None"
                 onClick={handleOpenMenu}
                 ref={triggerRef}