Compare commits
24 Commits
a9505ca5b2
..
lotus
| Author | SHA1 | Date | |
|---|---|---|---|
| 049472e25f | |||
| 81904372bc | |||
| c82ab5c7f5 | |||
| ebcd8ec926 | |||
| 4ff07ea2bd | |||
| 804caa5130 | |||
| 625f0c2386 | |||
| 4d7a05c0f1 | |||
| b5e7bcc0b8 | |||
| bca371ad38 | |||
| 899a14c119 | |||
| 6728a1274d | |||
| 21dda93d1b | |||
| 4380041014 | |||
| 8729ccfcf5 | |||
| 8ab1ec254b | |||
| 23f715857c | |||
| f589182709 | |||
| ef573376ac | |||
| 34d9272790 | |||
| 96f7187031 | |||
| 664dcd4cd8 | |||
| 7f960b026b | |||
| 992d2b83b3 |
@@ -1,666 +0,0 @@
|
||||
# HANDOFF — Forking & Self-Building Element Call ("Lotus Call")
|
||||
|
||||
> **Audience:** a fresh Claude/engineer session with **no prior context** on this
|
||||
> project. Read this top-to-bottom before touching anything. This document is the
|
||||
> single source of truth for the Element Call (EC) fork initiative.
|
||||
>
|
||||
> **Status:** **PHASE 0–2 IMPLEMENTED (build-verified, not yet live-tested)**
|
||||
> (2026-06-30). The fork exists, builds, is published, and cinny consumes it
|
||||
> (Phase 0/1). **All 7 Phase-2 EC features are implemented on the fork's `lotus`
|
||||
> branch**, each additive + flag-gated, build+typecheck-clean, per-feature
|
||||
> reviewed (+ a holistic multi-agent review), and pushed. **None are live-tested
|
||||
> yet** — every one needs the `LOTUS_TESTING.md` §D sweep, and the **cinny host
|
||||
> side must be wired** (set flags / send actions / handle call_state) — see §12.
|
||||
> See **§9** Phase 0/1 results, **§10** cutover, **§11** Phase-2 seams, **§12**
|
||||
> Phase-2 status + cinny integration checklist. Created 2026-06 from `LotusGuild/cinny`.
|
||||
|
||||
---
|
||||
|
||||
## 9. Phase 0 Results (verified 2026-06-29)
|
||||
|
||||
**Decisions taken with the user:** scope = Phase 0 recon; consumption model =
|
||||
**private npm package** (§5 option 1). Recommended registry = **Gitea's built-in
|
||||
npm registry** (`code.lotusguild.org`) — zero new infra.
|
||||
|
||||
### 9.1 Version → tag → commit mapping (LOCKED)
|
||||
|
||||
| Source | Value |
|
||||
| :--------------------------------------------------- | :----------------------------------------- |
|
||||
| cinny `package.json` pin | `@element-hq/element-call-embedded@0.20.1` |
|
||||
| Bundle self-report (`VITE_APP_VERSION`/`appVersion`) | `embedded-v0.20.1` |
|
||||
| npm registry `gitHead` for 0.20.1 | `2d74c48151d9edc01c65a22a91478aac81bf24d0` |
|
||||
| GitHub tag `v0.20.1` → commit | `2d74c48…` ✅ **same commit** |
|
||||
|
||||
→ **Fork from upstream tag `v0.20.1` (commit `2d74c48`).** The embedded package
|
||||
version equals the element-call release tag; repo `package.json` version is
|
||||
`0.0.0` and the real version is stamped at publish time from the tag.
|
||||
|
||||
### 9.2 The shipped npm dist is a CLEAN upstream build
|
||||
|
||||
No `lotus`/`denoise`/`rnnoise` strings anywhere in
|
||||
`node_modules/@element-hq/element-call-embedded/dist`. **All Lotus customization
|
||||
(denoise shim) is injected at cinny build time, not baked into the package** — so
|
||||
swapping the source does not disturb cinny's denoise injection layer. The
|
||||
ringtone/reaction assets (`baduntss`, `cat`, `clap`, `call_declined`, …) are
|
||||
upstream EC's own, not ours.
|
||||
|
||||
### 9.3 Build toolchain & mechanism
|
||||
|
||||
- **Node `24`** (`.node-version`), **pnpm `10.33.0`** (`packageManager` field,
|
||||
via corepack).
|
||||
- Build: **`pnpm run build:embedded`** = `vite build --config
|
||||
vite-embedded.config.ts` with `NODE_OPTIONS=--max-old-space-size=16384`.
|
||||
- Output dir is **repo-root `dist/`**; CI stages it into **`embedded/web/dist`**
|
||||
(the `embedded/web/` dir holds the publish template: `package.json`, README,
|
||||
both LICENSE files).
|
||||
- Publish workflow upstream = `.github/workflows/publish-embedded-packages.yaml`:
|
||||
builds → `npm version <tag> --no-git-tag-version` → `npm publish --provenance
|
||||
--access public` to npmjs as `@element-hq/element-call-embedded`. (Also
|
||||
Android/Maven + iOS/SwiftPM — irrelevant; we are web-only.)
|
||||
|
||||
### 9.4 Build reproduction — PARITY CONFIRMED
|
||||
|
||||
Cloned `element-call@v0.20.1` to `/root/code/element-call` (shallow), built with
|
||||
isolated Node 24 / pnpm 10.33.0 (system Node 20 / cinny untouched). Result vs the
|
||||
shipped npm dist:
|
||||
|
||||
- **137 of 147 files byte-identical** (same Vite content-hash): all CSS, fonts,
|
||||
wasm, audio, JSON locale files, and `IndexedDBWorker`.
|
||||
- **Only 5 JS chunks differ** (`index`, `pako.esm`, `polyfill-force`,
|
||||
`rust-crypto`, `spa`) — **cause isolated to the version define**: our local
|
||||
build baked `appVersion:\`dev\``(because`VITE_APP_VERSION`was unset) vs the
|
||||
npm build's`appVersion:\`embedded-v0.20.1\``. `index.html` is identical modulo
|
||||
the hashed asset filenames. **Benign** — our CI sets the version from the git
|
||||
tag, so a tagged CI build will match.
|
||||
|
||||
### 9.5 Fork CI (drafted)
|
||||
|
||||
`.gitea/workflows/ci.yml` is staged in the clone (models cinny's
|
||||
`.gitea/workflows/ci.yml` + upstream's publish flow). Linux-only (`ubuntu-latest`)
|
||||
— the Windows worker is for cinny-desktop/Tauri, not the EC web bundle. Build job
|
||||
on PR/push to `lotus`; publish job on `v*` tag → `@lotusguild/element-call-embedded`
|
||||
to the Gitea npm registry (needs `secrets.GITEA_NPM_TOKEN`).
|
||||
|
||||
### 9.6 Phase 1 — DONE (2026-06-29)
|
||||
|
||||
1. ✅ **Fork repo live:** `code.lotusguild.org/LotusGuild/element-call` (public,
|
||||
AGPL), default branch `lotus`, full history (7018 commits) + tag `v0.20.1`.
|
||||
Branch `lotus` = `v0.20.1` + 2-file diff (CI workflow + embedded package
|
||||
rename).
|
||||
2. ✅ **Package published:** `@lotusguild/element-call-embedded@0.20.1` on the
|
||||
Gitea npm registry (published manually from the version-faithful build while
|
||||
the admin token was available). **Publicly readable** (unauth `npm install`
|
||||
works → devs/CI need no token to consume; only publishing needs one).
|
||||
3. ✅ **cinny wired & built clean** (Node 24): `.npmrc` scope line +
|
||||
`package.json` dep + `vite.config.js` `viteStaticCopy` src. `npm install`
|
||||
swapped the package (resolved from Gitea), `npm run build` succeeded,
|
||||
`dist/public/element-call/` populated, bundle reports `appVersion:
|
||||
embedded-v0.20.1`, **denoise shim injected + all denoise assets copied**
|
||||
(injection layer unchanged). **These cinny edits are staged in the working
|
||||
tree, NOT committed/pushed** — pushing triggers CI → desktop → deploy, so it's
|
||||
gated on the §D live test (see §10).
|
||||
|
||||
### 9.8 Reproducibility note (important)
|
||||
|
||||
A from-source rebuild is **NOT byte-identical** to upstream's npm tarball.
|
||||
137/147 files match exactly (CSS, fonts, wasm, audio, worker); the 5 JS chunks
|
||||
(`index`, `pako.esm`, `polyfill-force`, `rust-crypto`, `spa`) differ because the
|
||||
rolldown/oxc **minifier mangles export names differently** across build
|
||||
environments (and the version-define is one input). This is normal and benign —
|
||||
the code is functionally equivalent. **Do not chase byte-parity; the §D live call
|
||||
test is the real parity gate.**
|
||||
|
||||
### 9.9 Remaining follow-ups (not blocking the cutover)
|
||||
|
||||
- **CI publishing:** `.gitea/workflows/ci.yml` publishes on a `v*` tag but needs
|
||||
(a) a Gitea Actions runner for `LotusGuild/element-call`, and (b) a **durable**
|
||||
`GITEA_NPM_TOKEN` repo secret with package read/write (the admin token used for
|
||||
the manual publish is being deleted, so it was deliberately NOT baked in). Until
|
||||
then, publishing is manual (`npm version <tag>` in `embedded/web` →
|
||||
`npm publish`).
|
||||
- Decide rebase cadence vs upstream (0.20.2 / 0.20.3 already out — see §9.1).
|
||||
|
||||
### 9.7 Ready-to-apply artifacts (staged 2026-06-29)
|
||||
|
||||
**Fork side — already committed** on branch `lotus` in `/root/code/element-call`
|
||||
(remote `lotus` = `code.lotusguild.org/LotusGuild/element-call.git`, push deferred
|
||||
until the repo exists). Minimal 2-file diff vs tag `v0.20.1`:
|
||||
`.gitea/workflows/ci.yml` (new) + `embedded/web/package.json` (rename to
|
||||
`@lotusguild/element-call-embedded`). Push with:
|
||||
`git push -u lotus lotus && git push lotus v0.20.1` (and tag `v0.20.1` on our side
|
||||
to trigger the first publish, or push our own `v0.20.1` tag).
|
||||
|
||||
**cinny side — NOT yet applied** (applying before the package is published breaks
|
||||
`npm ci`). Exactly 3 edits + a lockfile regen:
|
||||
|
||||
1. `.npmrc` — append the scoped-registry line:
|
||||
```
|
||||
@lotusguild:registry=https://code.lotusguild.org/api/packages/LotusGuild/npm/
|
||||
```
|
||||
(CI/auth: `//code.lotusguild.org/api/packages/LotusGuild/npm/:_authToken=${GITEA_NPM_TOKEN}`
|
||||
— inject via env in CI, do not commit a plaintext token.)
|
||||
2. `package.json:104` —
|
||||
`"@element-hq/element-call-embedded": "0.20.1"` →
|
||||
`"@lotusguild/element-call-embedded": "0.20.1"`.
|
||||
3. `vite.config.js:25` — `viteStaticCopy` src:
|
||||
`node_modules/@element-hq/element-call-embedded/dist` →
|
||||
`node_modules/@lotusguild/element-call-embedded/dist`.
|
||||
**`stripBase: 4` stays unchanged** — `node_modules/@lotusguild/element-call-embedded/dist`
|
||||
is still exactly 4 leading segments. (Update the comment's path reference too.)
|
||||
4. `package-lock.json` — regenerated by `npm install`, not hand-edited (drops the
|
||||
`registry.npmjs.org/@element-hq/...` resolved URL for the Gitea one).
|
||||
|
||||
The denoise injection (`lotusDenoise()` in `vite.config.js`) is **unchanged** — it
|
||||
keys off `dist/public/element-call/index.html`, which our fork's bundle still
|
||||
produces identically (verified: `index.html` byte-identical modulo asset hashes).
|
||||
|
||||
---
|
||||
|
||||
## 0. TL;DR / The Goal
|
||||
|
||||
We embed **Element Call** (the Matrix group-VoIP/video app) inside Lotus Chat to
|
||||
power voice/video channels. Today we consume Element's **pre-compiled npm
|
||||
bundle** and can only steer it from the outside (a limited widget API + fragile
|
||||
same-origin DOM hacks). Several in-call problems are **unfixable from outside**
|
||||
because they live in EC's compiled JS.
|
||||
|
||||
**We want true ownership: fork `element-hq/element-call`, build it from source
|
||||
ourselves, host our build, and replace the npm bundle with our fork.** Then
|
||||
every in-call behavior becomes editable code.
|
||||
|
||||
**This requires standing up a brand-new repo and build pipeline for our EC fork.**
|
||||
|
||||
---
|
||||
|
||||
## 1. Why fork? (What we cannot fix today)
|
||||
|
||||
These came out of live testing and are documented in `LOTUS_BUGS.md` →
|
||||
"Known Element Call iframe limitations":
|
||||
|
||||
| Issue | What's wrong | Why outside-fixes fail |
|
||||
| :----------------------------------------------------- | :------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **A6** — avatar decorations in-call | Our profile-decoration overlays don't appear on in-call video tiles | The video grid is rendered by EC's React app inside the iframe. We can only inject overlay DOM (fragile) — we can't make it a first-class part of the tile. |
|
||||
| **A5** — focus camera / fullscreen during screenshare | Can't reliably spotlight a participant's camera while someone screenshares | EC's **layout logic** (screenshare priority, spotlight) is compiled JS we don't control. We currently DOM-click tiles as a hack. |
|
||||
| **A7** — mic dead after EC's "Reconnect" | After EC's own mid-call reconnect, the local mic isn't re-published | EC's reconnect/track-republish path is internal. (Partly entangled with our denoise shim — see §6.) |
|
||||
| Native theming | EC's UI doesn't match Lotus design; we inject CSS hacks | Real theming needs source-level component/token changes. |
|
||||
| Decorations, custom controls, custom layouts, branding | all blocked | all require source access |
|
||||
|
||||
**Bottom line:** the iframe is **same-origin** (we self-host it), so we can read
|
||||
and even write its DOM — but we **do not own its source**, so we can't change its
|
||||
**behavior/logic**, only poke at its rendered output. Forking removes that wall.
|
||||
|
||||
---
|
||||
|
||||
## 2. How EC is integrated TODAY (the current architecture)
|
||||
|
||||
Understand this fully before changing it — the fork must slot into the same
|
||||
integration seams.
|
||||
|
||||
### 2.1 Where the EC bundle comes from
|
||||
|
||||
- npm package: **`@element-hq/element-call-embedded`**, pinned to **`0.20.1`** in
|
||||
`cinny/package.json` (line ~104).
|
||||
- It ships a **pre-built `dist/`**. At cinny build time,
|
||||
`vite-plugin-static-copy` copies that `dist/` flat into
|
||||
**`public/element-call/`** (see `cinny/vite.config.js`, the `copyFiles`
|
||||
target with `rename: { stripBase: 4 }` — note the stripBase gotcha documented
|
||||
there; getting this wrong 404s the widget).
|
||||
- It is **NOT committed** to git (`git ls-files public/element-call` → 0). It's a
|
||||
build artifact materialized from `node_modules`.
|
||||
|
||||
### 2.2 How EC is loaded & controlled
|
||||
|
||||
- The widget iframe `src` is **same-origin**:
|
||||
`${BASE_URL}/public/element-call/index.html?<params>` (see
|
||||
`cinny/src/app/plugins/call/CallEmbed.ts`, `getWidget()` /
|
||||
`getIframe()`). Sandbox: `allow-forms allow-scripts allow-same-origin
|
||||
allow-popups allow-modals allow-downloads`; `allow="microphone; camera;
|
||||
display-capture; autoplay; clipboard-write;"`.
|
||||
- **Control surface #1 — the official widget API** (`matrix-widget-api`):
|
||||
`ClientWidgetApi` + a custom `CallWidgetDriver`. This is the robust,
|
||||
version-stable channel (theme change, hangup, capabilities, timeline events).
|
||||
Files: `plugins/call/CallEmbed.ts`, `plugins/call/CallWidgetDriver.ts`,
|
||||
`plugins/call/utils.ts` (capabilities), `plugins/call/CallControl.ts`.
|
||||
- **Control surface #2 — same-origin DOM poking** (fragile, version-coupled):
|
||||
reading `iframe.contentDocument` to detect speakers/mute state and
|
||||
`.click()`-ing tiles to focus a camera. Files:
|
||||
`hooks/useCallSpeakers.ts` (reads `[data-muted]`, `[data-video-fit]`),
|
||||
`plugins/call/CallControl.ts` (`focusCameraParticipant` — tile selectors).
|
||||
**These selectors break on every EC version bump.** A fork lets us replace
|
||||
these hacks with real APIs/props.
|
||||
- **Control surface #3 — URL params + build-time injection** for our denoise
|
||||
shim (see §6).
|
||||
|
||||
### 2.3 Full file inventory (everything that touches EC in cinny)
|
||||
|
||||
Plugin / core:
|
||||
|
||||
- `src/app/plugins/call/CallEmbed.ts` — iframe creation, widget API wiring, theme sync, hangup, load watchdog/self-heal, denoise URL params.
|
||||
- `src/app/plugins/call/CallControl.ts` — control state + **DOM-poking** (`focusCameraParticipant`, spotlight).
|
||||
- `src/app/plugins/call/CallControl.tsx` _(call-status variant)_ and `features/call-status/CallControl.tsx`.
|
||||
- `src/app/plugins/call/CallWidgetDriver.ts` — widget driver (capabilities, event relay).
|
||||
- `src/app/plugins/call/utils.ts` — widget capabilities set.
|
||||
- `src/app/plugins/call/hooks.ts`, `index.ts` — plugin exports/hooks.
|
||||
- `src/app/state/callEmbed.ts` — jotai atoms for the active embed.
|
||||
|
||||
React / UI:
|
||||
|
||||
- `src/app/components/CallEmbedProvider.tsx` — the big one: incoming-call ring/banner, RTCNotification + **RTCDecline** listeners, PiP, mute badges, fullscreen, ringtones.
|
||||
- `src/app/features/call/CallView.tsx` — prescreen lobby vs joined (the iframe placement target), load-error recovery UI.
|
||||
- `src/app/features/call/CallControls.tsx` — in-call control bar (mic/cam/deafen/screenshare/fullscreen/more/PiP).
|
||||
- `src/app/features/call/CallMemberCard.tsx` — **lobby** participant roster (this is where `AvatarDecoration` works today; in-call grid is EC's).
|
||||
- `src/app/features/call/PrescreenControls.tsx` — join controls.
|
||||
- `src/app/features/call-status/*` — `CallStatus.tsx`, `MemberGlance.tsx` (the "Focus camera" menu lives here), `LiveChip.tsx`.
|
||||
- `src/app/features/room-nav/RoomNavItem.tsx`, `features/room/Room.tsx`, `features/room/RoomViewHeader.tsx`, `pages/client/space/Space.tsx`, `pages/CallStatusRenderer.tsx`, `pages/Router.tsx` — call entry points / status surfacing.
|
||||
|
||||
Hooks:
|
||||
|
||||
- `src/app/hooks/useCallEmbed.ts`, `useCall.ts`, `useCallSpeakers.ts` (DOM-poking), `useCallJoinLeaveSounds.ts`, `useAfkAutoMute.ts`.
|
||||
|
||||
Build:
|
||||
|
||||
- `cinny/vite.config.js` — `copyFiles` (EC dist copy) + `lotusDenoise()` plugin (denoise asset copy + index.html shim injection, in `closeBundle`).
|
||||
|
||||
Utils:
|
||||
|
||||
- `src/app/utils/ringtones.ts`, `utils/denoisePipeline.ts`, `utils/lotusDenoiseUtils.ts`.
|
||||
|
||||
---
|
||||
|
||||
## 3. Hosting / infra context (the OTHER repo)
|
||||
|
||||
There are **two repos**:
|
||||
|
||||
1. **`LotusGuild/cinny`** (`/root/code/cinny`) — this Lotus Chat fork. Consumes EC.
|
||||
2. **`LotusGuild/matrix`** (`/root/code/matrix`) — the **infra/homeserver** repo.
|
||||
Subdirs: `livekit/` (the SFU EC talks to), `deploy/`, `draupnir/`,
|
||||
`hookshot/`, `landing/`, `matrixbot/`, `systemd/`. Gitea remote
|
||||
`code.lotusguild.org/LotusGuild/matrix`, branch `main`.
|
||||
|
||||
EC needs a **LiveKit SFU** + the **livekit-jwt-service**; those live in
|
||||
`matrix/livekit/`. A self-hosted EC build must be configured to point at our
|
||||
homeserver (`matrix.lotusguild.org` / synapse) and our LiveKit. EC's runtime
|
||||
`config.json` (homeserver, livekit URL, feature flags) is part of what we'll own
|
||||
once we build it ourselves.
|
||||
|
||||
Deployment today: `chat.lotusguild.org` (the cinny web build, which embeds EC at
|
||||
`/public/element-call/`). cinny-desktop (`LotusGuild/cinny-desktop`, a Tauri
|
||||
wrapper, bumped by cinny CI) embeds the same.
|
||||
|
||||
---
|
||||
|
||||
## 4. The plan (proposed — confirm with the user before executing)
|
||||
|
||||
### Decision: **YES, create a new repo.** `LotusGuild/element-call`
|
||||
|
||||
Rationale: EC is a large standalone app (React + LiveKit client SDK + matrixRTC +
|
||||
its own Vite build + heavy deps). Keep it out of cinny so cinny's build stays
|
||||
clean — cinny keeps consuming a **built EC `dist/`**, exactly as today, just
|
||||
sourced from **our fork** instead of npm.
|
||||
|
||||
### Phase 0 — Recon (no code)
|
||||
|
||||
- Fork `github.com/element-hq/element-call` → `LotusGuild/element-call` on Gitea.
|
||||
- Pin to the upstream tag matching **0.20.1** (`element-call-embedded` 0.20.1's
|
||||
corresponding `element-call` release) so behavior matches what's shipping now.
|
||||
Verify the embedded-package version ↔ element-call repo tag mapping.
|
||||
- Read EC's own build docs: it builds the "embedded" widget bundle (the thing
|
||||
currently published as `@element-hq/element-call-embedded`). Reproduce that
|
||||
build locally and confirm the output matches `public/element-call/` today.
|
||||
- **License:** element-call is **AGPL-3.0**, same as Lotus Chat — compatible.
|
||||
Our fork must remain AGPL and publish source.
|
||||
|
||||
### Phase 1 — Reproduce current behavior from our fork (parity, no features)
|
||||
|
||||
- Build our fork's embedded bundle; wire cinny to consume it instead of the npm
|
||||
package (see §5 for the consumption options). Smoke-test: a call works exactly
|
||||
as today (web + desktop), denoise shim still injects, widget API + theme still
|
||||
work. **No behavior change yet** — this de-risks the swap.
|
||||
|
||||
### Phase 2 — Replace the outside hacks with source-level features
|
||||
|
||||
Tackle the §1 issues in EC's source:
|
||||
|
||||
- **A6:** render avatar decorations as part of the video-tile component
|
||||
(read decoration data we pass in via widget data / URL param / a small bridge).
|
||||
- **A5:** fix focus/spotlight + screenshare-coexistence in EC's layout code;
|
||||
expose a clean widget action so cinny can trigger it (kill the DOM `.click()`).
|
||||
- **A7:** fix mic re-publish on reconnect; reconcile with our denoise shim (§6) —
|
||||
ideally move denoise INTO the fork as a real audio-processing step instead of a
|
||||
`getUserMedia` monkeypatch.
|
||||
- Native Lotus theming/branding at the source (kill the injected-CSS hacks).
|
||||
- Then retire the DOM-poking in `useCallSpeakers.ts` / `CallControl.ts` in favor
|
||||
of real widget messages.
|
||||
|
||||
### Phase 3 — Maintenance posture
|
||||
|
||||
- Decide rebase cadence vs. upstream element-call releases. Keep customizations
|
||||
isolated (feature flags / minimal-diff patches) to ease rebasing.
|
||||
- CI in the new repo builds + publishes the embedded dist as a versioned
|
||||
artifact; cinny CI consumes a pinned version.
|
||||
|
||||
---
|
||||
|
||||
## 5. How cinny should consume the fork (pick one — decide with user)
|
||||
|
||||
1. **Private npm package** (mirror the current model): our fork's CI publishes
|
||||
`@lotusguild/element-call-embedded` to a registry; cinny depends on it and
|
||||
`viteStaticCopy` keeps working almost unchanged. _Cleanest swap; needs a
|
||||
registry._
|
||||
2. **Git submodule + build in cinny CI:** add the fork as a submodule, build it
|
||||
during cinny's build, copy its `dist/` to `public/element-call/`. _No
|
||||
registry; heavier cinny CI._
|
||||
3. **CI artifact copy:** fork CI uploads a `dist` tarball; cinny CI downloads a
|
||||
pinned version at build. _Decoupled; needs artifact plumbing._
|
||||
|
||||
**Recommendation: Option 1** — it changes the least in cinny (just swap the
|
||||
package name in `package.json` + the `viteStaticCopy` src path) and preserves the
|
||||
clean cinny/EC separation.
|
||||
|
||||
---
|
||||
|
||||
## 6. The denoise shim — critical interaction (don't break this)
|
||||
|
||||
Lotus ships ML noise suppression by **injecting a same-origin pre-init shim into
|
||||
EC's `index.html` at build time** (cinny `vite.config.js` → `lotusDenoise()`,
|
||||
`closeBundle`). The shim monkeypatches `getUserMedia` **before EC captures the
|
||||
mic** and routes audio through RNNoise/Speex/DTLN AudioWorklets, then EC/LiveKit
|
||||
publishes the processed track. It's activated via URL params
|
||||
(`lotusDenoise=ml&lotusModel=…&lotusGate=…`) set in `CallEmbed.ts`.
|
||||
|
||||
- Assets copied to `public/element-call/denoise/` at build (sapphi RNNoise/Speex/
|
||||
gate worklets + `@workadventure/noise-suppression` DTLN tree).
|
||||
- Related: `utils/denoisePipeline.ts`, `utils/lotusDenoiseUtils.ts`,
|
||||
`settings/general/DenoiseTester.tsx`, `VoiceMessageRecorder.tsx`.
|
||||
- **Known issues:** denoise quality is still poor (tracked separately); and the
|
||||
mic-after-reconnect bug (A7) is suspected to involve the shim's getUserMedia
|
||||
patch handing back a stale processed stream when EC re-acquires the mic.
|
||||
|
||||
**Once we own the fork, the right move is to make denoise a first-class
|
||||
audio-processing stage inside EC** (not an index.html monkeypatch) — more robust,
|
||||
survives reconnects, and removes the build-time injection hack. Until then, the
|
||||
fork's `index.html` must remain injectable the same way, or the shim must be
|
||||
re-homed into the fork.
|
||||
|
||||
---
|
||||
|
||||
## 7. Doc-accuracy notes / corrections for the new session
|
||||
|
||||
- `LOTUS_TODO.md` (~line 533) calls EC a **"cross-origin iframe"** — **outdated.**
|
||||
EC is **same-origin** today (self-hosted under our domain;
|
||||
`iframe.sandbox` includes `allow-same-origin`; we read `contentDocument`), and
|
||||
**as of 2026-06-29 we own the fork's source** (`@lotusguild/element-call-embedded`).
|
||||
The _practical_ point it made still holds _until we ship the audio-inject API_:
|
||||
**LiveKit's `LocalAudioTrack` lives in EC's module scope**, not on `window`, so
|
||||
cinny can't reach it even same-origin — which is why the in-call soundboard had
|
||||
to be local-playback-only. **The fork removes this wall:** EC can expose a real
|
||||
`io.lotus.inject_audio` widget action (Phase 2) that mixes into the published
|
||||
track from inside its own module scope.
|
||||
- `LOTUS_FEATURES.md` documents the EC upgrade history (0.16.3 → 0.19.4 →
|
||||
0.20.1), the dark-mode CSS injection, and AFK auto-mute — all relevant prior
|
||||
art for what the fork must preserve.
|
||||
- `LOTUS_TESTING.md` §D is the **EC regression sweep** to re-run after the fork
|
||||
swap (Phase 1 parity check).
|
||||
|
||||
---
|
||||
|
||||
## 8. First actions for the new session
|
||||
|
||||
1. Read this file, then skim §2.3's files in `cinny` to internalize the seams.
|
||||
2. Confirm with the user: new repo name, consumption model (§5), rebase cadence.
|
||||
3. Phase 0: fork element-call, map 0.20.1 ↔ element-call tag, reproduce the
|
||||
embedded build locally, diff against `public/element-call/`.
|
||||
4. Phase 1: wire cinny to the fork, run `LOTUS_TESTING.md` §D parity sweep.
|
||||
5. Only then start Phase 2 features (A5/A6/A7, theming, denoise-in-source).
|
||||
|
||||
**Cross-references:** `LOTUS_BUGS.md` (EC limitations + verify queue),
|
||||
`LOTUS_TODO.md` (denoise/soundboard constraints), `LOTUS_FEATURES.md` (EC history),
|
||||
`LOTUS_TESTING.md` §D (regression sweep). Infra: `/root/code/matrix` (`livekit/`,
|
||||
`deploy/`).
|
||||
|
||||
---
|
||||
|
||||
## 10. Live cutover — the remaining steps (Phase 1 finish)
|
||||
|
||||
The fork is published and cinny builds against it locally (§9.6). What's left to
|
||||
go live:
|
||||
|
||||
1. **Run `LOTUS_TESTING.md` §D** against a local cinny build (`npm run build` is
|
||||
already proven; serve `dist/` or `npm run dev`). Verify a real call: join,
|
||||
mic/cam, screenshare, theme sync, denoise on, widget hangup — web first.
|
||||
2. **Commit the cinny edits** (currently staged, uncommitted in the working tree):
|
||||
`.npmrc`, `package.json`, `package-lock.json`, `vite.config.js`. Suggested
|
||||
message: `chore(call): consume self-built @lotusguild/element-call-embedded`.
|
||||
3. **Push to `lotus`** → cinny CI builds, then `trigger-desktop` bumps
|
||||
cinny-desktop → Tauri release. Re-run §D on **cinny-desktop** (the path where
|
||||
the old `stripBase` bug bit — verify the widget loads, not a 404).
|
||||
4. Only then start **Phase 2** (A5/A6/A7, theming, denoise-in-source).
|
||||
|
||||
---
|
||||
|
||||
## 11. Phase 2 — implementation seams (mapped 2026-06-29)
|
||||
|
||||
The exact integration points for each Phase 2 item, found by reading the EC fork
|
||||
|
||||
- cinny source. **All of these are media-path / in-call features that cannot be
|
||||
functionally verified without a live Matrix + LiveKit call** — implement each as
|
||||
a minimal, **feature-flagged, additive** diff (no behavior change unless cinny
|
||||
opts in), build-verify the fork (`pnpm build:embedded`, ~15s) AND cinny
|
||||
(`npm run build`), then gate shipping on `LOTUS_TESTING.md` §D.
|
||||
|
||||
**Shared widget channel (the backbone for #2/#3/#4/#7):**
|
||||
|
||||
- EC→cinny: `widget.api.transport.send("io.lotus.<x>", data)` (see
|
||||
`element-call/src/widget.ts`).
|
||||
- cinny→EC actions: add the action name to the `lazyActions` allow-list in
|
||||
`widget.ts` (the array at ~L101) and handle it in EC; cinny sends via
|
||||
`this.call.transport.send(...)`.
|
||||
- cinny receives EC→cinny actions via the existing `listenAction(type, cb)`
|
||||
helper in `plugins/call/CallEmbed.ts:626` (auto-replies `{}` so the transport
|
||||
doesn't time out — same pattern as `io.element.device_mute`).
|
||||
|
||||
**#2 mute/speaker events** — Source: subscribe to `vm.userMedia$`
|
||||
(`CallViewModel`), per member `speaking$` + `audioEnabled$`
|
||||
(`state/media/UserMediaViewModel.ts:47-48`); aggregate and
|
||||
`transport.send("io.lotus.call_state", {participants:[{id,speaking,audioEnabled}]})`.
|
||||
Mount in `room/InCallView.tsx` via `useEffect` guarded by `widget !== null`.
|
||||
cinny: `listenAction("io.lotus.call_state")` in `CallEmbed.ts`, feed
|
||||
`hooks/useCallSpeakers.ts` → delete its `contentDocument` `[data-muted]` /
|
||||
`[data-video-fit]` scrape. _Additive, low risk._
|
||||
|
||||
**#4 spotlight/focus** — EC: add `io.lotus.focus_participant` to the `lazyActions`
|
||||
list (`widget.ts`), drive `vm`'s spotlight (`spotlightSpeaker$` /
|
||||
`spotlight$` in `CallViewModel.ts:898/1001`) to pin a given identity, coexisting
|
||||
with `hasRemoteScreenShares$` (L1008). cinny: replace
|
||||
`CallControl.ts` `focusCameraParticipant` `.click()` walk with
|
||||
`transport.send("io.lotus.focus_participant", {userId})`. _Additive, low risk._
|
||||
|
||||
**#3 audio-inject** — EC: add `io.lotus.inject_audio` action; mix an
|
||||
`AudioBufferSourceNode` into the published mic track. The local publish path is
|
||||
`state/CallViewModel/localMember/Publisher.ts` + `LocalMember.ts` (LiveKit
|
||||
`localParticipant`); create a `MediaStreamAudioDestinationNode`, mix mic + clip,
|
||||
`replaceTrack`. cinny soundboard calls the action instead of local-only playback.
|
||||
_Medium; touches publish path → live-test carefully._
|
||||
|
||||
**#1 denoise-in-source** — replace the cinny `lotusDenoise()` `getUserMedia`
|
||||
monkeypatch with a real processing stage in EC's mic capture
|
||||
(`Publisher.ts`/`LocalMember.ts`; note EC has a `TrackProcessorContext` +
|
||||
`BlurBackgroundTransformer` precedent in `livekit/`). EC re-runs it on every
|
||||
(re)publish → fixes A7. Remove `vite.config.js` `lotusDenoise()` + URL params in
|
||||
`CallEmbed.ts`; move `denoise/` assets into the fork. _Highest value, highest
|
||||
risk — most live testing._
|
||||
|
||||
**#5 theming** — add a Lotus/TDS theme in EC's theme system (`src/useTheme.ts` +
|
||||
EC theme tokens / CSS); driven by the existing `setTheme()` channel cinny already
|
||||
calls (`CallEmbed.ts:277`). Bake transparent background. Delete cinny's
|
||||
`applyStyles()` injection + `background:none !important`. _Medium._
|
||||
|
||||
**#6 in-call decorations** — render the decoration APNG in EC's tile component
|
||||
(`tile/GridTile.tsx`); pass slugs via widget member data. cinny already has the
|
||||
decoration data + `AvatarDecoration` (lobby `CallMemberCard.tsx`). _Medium-Large._
|
||||
|
||||
**#7 quality controls** — set audio `maxBitrate` via
|
||||
`RTCRtpSender.setParameters` and screenshare `getDisplayMedia` constraints in
|
||||
EC's publish path (`Publisher.ts`); configurable via `config.json` / a widget
|
||||
message. Keep the server `voice-limit-guard` as enforcement. _Medium._
|
||||
|
||||
**Rollback:** revert the 4 cinny files (restores `@element-hq/...@0.20.1` from
|
||||
npmjs). The fork repo/package can stay; nothing else depends on it until pushed.
|
||||
|
||||
### Local repro/build environment (this session, 2026-06-29)
|
||||
|
||||
- Upstream cloned + our `lotus` branch at `/root/code/element-call` (remote
|
||||
`lotus` → Gitea; origin → github upstream, now un-shallowed/full history).
|
||||
- Isolated **Node 24.18.0** lives in the session scratchpad (system Node is 20);
|
||||
cinny's `.node-version` is `24.13.1`, so use Node 24 to build cinny too.
|
||||
- Build the embedded bundle: in `/root/code/element-call`, with Node 24 + pnpm
|
||||
10.33.0 on PATH, `VITE_APP_VERSION=embedded-v0.20.1 pnpm run build:embedded`
|
||||
→ output in `dist/`; stage to `embedded/web/dist` before publishing.
|
||||
|
||||
---
|
||||
|
||||
## 12. Phase 2 — IMPLEMENTED on the fork (2026-06-30)
|
||||
|
||||
All 7 EC features are on the `lotus` branch of `LotusGuild/element-call`, each
|
||||
**additive + feature-flagged** (a vanilla call with no `lotus*` params / no Lotus
|
||||
actions behaves exactly like upstream), build + `tsc` clean, per-feature reviewed
|
||||
(fixes applied) and holistically reviewed. **Not yet live-tested** — all need the
|
||||
`LOTUS_TESTING.md` §D sweep.
|
||||
|
||||
Fork modules live under `element-call/src/lotus/*`; mounts are `useEffect`s in
|
||||
`src/room/InCallView.tsx`. Custom widget actions are in `src/lotus/lotusActions.ts`
|
||||
(toWidget ones allow-listed in `src/widget.ts`).
|
||||
|
||||
| # | Feature | Enable via | EC module |
|
||||
| :-- | :------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------ | ---------------------------------------------------- |
|
||||
| 2 | Speaker/mute/camera state → host | URL `lotusCallState=1` | `lotusCallState.ts` (sends `io.lotus.call_state`) |
|
||||
| 4 | Focus/spotlight a participant (works during screenshare) | action `io.lotus.focus_participant {userId | null}` | `lotusFocus.ts` + `CallViewModel` spotlight override |
|
||||
| 3 | Soundboard audio-inject (heard by peers) | URL `lotusAudioInject=1` + action `io.lotus.inject_audio {url,volume?}` | `lotusAudioInject.ts` |
|
||||
| 7 | Audio/screenshare quality caps | action `io.lotus.set_quality {audioMaxBitrate?,screenshareMaxBitrate?,screenshareMaxFramerate?}` | `lotusQuality.ts` |
|
||||
| 5 | Transparent bg + Lotus theme | URL `lotusTransparent=1` / `lotusTheme=1` | `useTheme.ts` + `index.css` |
|
||||
| 6 | In-call avatar decorations | action `io.lotus.decorations {decorations:{userId:url}}` | `lotusDecorations.ts` + `MediaView.tsx` |
|
||||
| 1 | ML denoise in-source (fixes A7) | URL **`lotusDenoiseSource=1`** (+`lotusModel`,`lotusGate`,`lotusGateThreshold`,`lotusDenoiseBase`) — deliberately NOT the existing `lotusDenoise=ml` (that drives the host shim; reusing it would double-process) | `lotusDenoise.ts` + `lotusDenoiseProcessor.ts` |
|
||||
|
||||
**Security hardening applied** (holistic audit): `lotusDenoiseBase` forced
|
||||
same-origin before `audioWorklet.addModule` (was an arbitrary-code-load vector
|
||||
via a crafted link); audio-inject gated behind `lotusAudioInject=1`; decoration
|
||||
roster capped. Only `https`/`blob` URLs accepted for inject/decoration assets.
|
||||
|
||||
### 12.1 cinny host integration checklist (REQUIRED to light these up)
|
||||
|
||||
> ✅ **STATUS (2026-06): COMPLETE.** All items below are shipped. call_state,
|
||||
> focus_participant, decorations, and transparent background are active; the
|
||||
> in-source denoise cutover is done (flag `lotusDenoiseSource=1`, **all four**
|
||||
> models in-source); and the two formerly-dormant capabilities now have cinny
|
||||
> UI — **soundboard** (`io.lotus.inject_audio`, P5-15) and **quality controls +
|
||||
> room permissions** (`io.lotus.set_quality` + `io.lotus.room_quality`, P5-31,
|
||||
> with server-side enforcement in `LotusGuild/matrix`). See `LOTUS_FEATURES.md`
|
||||
> → "Element Call — Self-Built Fork". The checklist is kept below as the record
|
||||
> of what was wired. (One open denoise item tracked separately: the "Series
|
||||
> Suppression" native-NS toggle is not wired to the real call path.)
|
||||
|
||||
The EC side is additive and dormant until cinny opts in. Host work (in
|
||||
`src/app/plugins/call/CallEmbed.ts` unless noted) — **done**:
|
||||
|
||||
> ⚠️ **CRITICAL TIMING (protocol audit F1):** only send `io.lotus.*` **toWidget**
|
||||
> actions (#3 focus, #6 decorations, #7 quality, audio-inject) **after** the call
|
||||
> is joined (`CallEmbed.onCallJoined` / `this.joined`). Those actions are
|
||||
> allow-listed at EC app-init (so `preventDefault` suppresses the auto-error)
|
||||
> but their handlers only mount with `InCallView` (post-join). Sending earlier
|
||||
> leaves the host's `transport.send` pending until the **10s timeout**. Queue and
|
||||
> flush on join, or no-op before join.
|
||||
>
|
||||
> Also: **F3 (RESOLVED)** — all four models (`rnnoise`/`speex`/`dtln`/
|
||||
> `deepfilternet`) are now implemented in-source in `lotusDenoiseProcessor.ts`;
|
||||
> the picker offers all four. **F4** — cinny no longer forwards a native-NS flag
|
||||
> in the `ml` branch (the "Series Suppression" toggle is currently a no-op in
|
||||
> real calls — open item). **F7** — no widget _capability_ changes needed;
|
||||
> custom actions bypass capability checks.
|
||||
|
||||
1. **Set the URL flags** on the widget iframe params (the `URLSearchParams` in
|
||||
`CallEmbed`): `lotusCallState=1`, `lotusTransparent=1`/`lotusTheme=1`,
|
||||
`lotusAudioInject=1` as desired. (Denoise sets `lotusDenoiseSource=1` + `lotusModel`/`lotusGate`/`lotusGateThreshold` in the `ml` tier.)
|
||||
2. **Ack `io.lotus.call_state`**: add `listenAction('io.lotus.call_state', …)` —
|
||||
without a reply the fork's sends time out every 250ms. Feed the payload into
|
||||
`useCallSpeakers` and RETIRE its `contentDocument` DOM scrape.
|
||||
3. **Send actions** via `this.call.transport.send(...)`:
|
||||
`io.lotus.focus_participant` (replace `CallControl.focusCameraParticipant`’s
|
||||
`.click()`), `io.lotus.inject_audio` (from the soundboard), `io.lotus.set_quality`
|
||||
(from quality settings), `io.lotus.decorations` (push the MSC4133 decoration
|
||||
map; resolve mxc→https first).
|
||||
4. **#1 denoise cutover**: once verified, STOP injecting the `lotusDenoise()`
|
||||
shim in `cinny/vite.config.js` and remove the `index.html` injection — the
|
||||
fork now does denoise in-source. Keep shipping the `denoise/` assets (the
|
||||
fork loads `./denoise/…` at runtime) until those move into the fork build.
|
||||
5. Re-run `LOTUS_TESTING.md` §D for each feature; only then ship.
|
||||
|
||||
### 12.2 Holistic multi-agent review — outstanding follow-ups (non-blocking)
|
||||
|
||||
Four aspect-agents reviewed the whole fork. Criticals were fixed in-branch (the
|
||||
denoise restart-silence/A7 bug; the `lotusDenoiseBase` code-load vector;
|
||||
audio-inject opt-in gate; #6 rendering in the wrong component; #7 simulcast cap).
|
||||
Remaining, deliberately deferred:
|
||||
|
||||
- **Denoise H2 (double-processing):** if cinny is set to `lotusDenoise=ml` while
|
||||
ALSO still injecting its build-time `getUserMedia` shim, audio is denoised
|
||||
twice. The #1 cutover MUST remove the cinny-side injection (it currently has
|
||||
none injected into the iframe — keep it that way). Hard requirement, not code.
|
||||
- **Denoise M1 (perf):** in-source uses non-SIMD `rnnoise.wasm`; the reference
|
||||
preferred SIMD with detection. Perf-only; add SIMD detection later.
|
||||
- **dtln/deepfilternet (F3): RESOLVED** — all four models
|
||||
(rnnoise/speex/dtln/deepfilternet) are now implemented in
|
||||
`lotusDenoiseProcessor.ts` (faithful port of cinny's `build/lotus-denoise.js`
|
||||
pipeline). This also fixed a real bug (the gate worklet name was `noiseGate`;
|
||||
correct is the hyphenated `noise-gate`) and added per-model sample rates
|
||||
(DTLN 16 kHz, others 48 kHz), context `resume()`, and SIMD wasm selection.
|
||||
Still needs live §D testing per model, and depends on cinny shipping the
|
||||
DTLN (`denoise/workadventure/`) + DeepFilterNet (`denoise/deepfilternet/`)
|
||||
asset trees (it already does).
|
||||
- **Rebase-fragility (build agent MED):** the `CallViewModel` spotlight override
|
||||
edits hot upstream lines (renamed `spotlightSpeaker$`→`autoSpotlightSpeaker$`).
|
||||
For cheaper future rebases, refactor it into a `src/lotus/lotusSpotlight.ts`
|
||||
wrapper that takes the upstream stream and returns the overridden one, leaving
|
||||
upstream's definition byte-identical (a single import + two token swaps).
|
||||
- **Denoise asset coupling (build agent HIGH):** the fork loads `./denoise/*`
|
||||
shipped by cinny, not by the fork build (documented in the processor). Add an
|
||||
integration smoke-check that `GET …/element-call/denoise/rnnoise.wasm` == 200,
|
||||
and pin the `@sapphi-red/web-noise-suppressor` version both repos expect.
|
||||
- **Unconditional effect registration (build agent LOW):** focus/audio-inject/
|
||||
quality/decorations register widget handlers on every embedded call (true
|
||||
no-ops for a non-Lotus host). Intentional; gate behind a coarse `lotus=1` flag
|
||||
if strict zero-footprint is desired.
|
||||
- **Privacy (security agent):** decoration/inject URLs accept any `https`; ideally
|
||||
restrict to the homeserver media origin host-side. Call-state exposes
|
||||
userId/deviceId/speaking to the (trusted, same-origin) host — documented.
|
||||
|
||||
**Nothing here blocks the §D live test — but every feature still needs it.**
|
||||
|
||||
### 12.3 Safe rollout when prod is the only test environment
|
||||
|
||||
Every Phase-2 feature is now **dormant by default** — with the flags cinny sets
|
||||
today, the fork behaves identically to the parity build (`#1` was decoupled onto
|
||||
`lotusDenoiseSource=1` so it no longer collides with the host's `lotusDenoise=ml`
|
||||
shim). This enables a low-risk incremental rollout even without a staging env:
|
||||
|
||||
1. **Ship dormant first.** Publish the `lotus` branch (e.g. `0.20.1-lotus.1`),
|
||||
bump cinny's pin, deploy. With no Lotus flags set / no Lotus actions sent,
|
||||
this is upstream-equivalent (only inert, holistically-reviewed code runs).
|
||||
"Testing" here = confirm a normal call still works.
|
||||
2. **Enable ONE feature at a time**, each independently revertable:
|
||||
- URL-flag features (#2 `lotusCallState`, #5 `lotusTransparent`/`lotusTheme`,
|
||||
#1 `lotusDenoiseSource`): add the flag in `CallEmbed.getWidget`, deploy,
|
||||
test that one feature, roll back just that flag if needed.
|
||||
- Action features (#3,#4,#6,#7): wire the host send + (for #2) the
|
||||
`listenAction` ack, gated on join (§12.1 F1).
|
||||
3. **#1 denoise cutover is a coordinated 2-step** (do together): set
|
||||
`lotusDenoiseSource=1` AND remove the `lotusDenoise()` shim injection +
|
||||
`lotusDenoise=ml` param in cinny — otherwise audio is denoised twice.
|
||||
Roll back = revert both.
|
||||
4. Baseline is always upstream-equivalent, so any single feature can be disabled
|
||||
by flipping its flag/send off without touching the rest.
|
||||
|
||||
**Blocker to step 1:** publishing the `lotus` branch needs a Gitea npm token
|
||||
(the admin token used for the `0.20.1` parity publish was deleted). Either
|
||||
provide a token for a manual `npm publish`, or stand up the Gitea Actions runner
|
||||
|
||||
- `GITEA_NPM_TOKEN` secret so a `v0.20.1-lotus.1` tag auto-publishes.
|
||||
-166
@@ -1,166 +0,0 @@
|
||||
# Lotus Chat — Open Bugs & Technical Debt
|
||||
|
||||
**Only OPEN and awaiting-verification items live here.** Resolved findings
|
||||
(fixed-and-verified, false-positives, won't-fix) have been removed to keep this
|
||||
actionable — the full history is in git. Items fixed in code but not yet
|
||||
verified in a real environment are in **Needs Verification** below and have
|
||||
step-by-step checks in [`LOTUS_TESTING.md`](./LOTUS_TESTING.md).
|
||||
|
||||
> Design rules for any fix here: follow the **Native-Cinny Law** and **TDS
|
||||
> Design Law** in [`LOTUS_TODO.md`](./LOTUS_TODO.md).
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Needs Verification — fixed in code, awaiting live testing
|
||||
|
||||
Implemented and gate-green; confirm each per `LOTUS_TESTING.md`, then delete the row.
|
||||
|
||||
| ID | Item | File / area | Test |
|
||||
| :--- | :------------------------------------------------------------------------------------- | :--------------------------------------------------- | :-------------------------------------------------------------------------------- |
|
||||
| #2 | Chat-background animation flicker (`contain:paint`) | `lotus/chatBackground.ts` | F1 |
|
||||
| #4 | Ringtone re-fixes: classic loudness + caller decline notice (A2 ✓ live) | `CallEmbedProvider.tsx`, `ringtones.ts` | A1,A3,A4 |
|
||||
| #6 | Background vs. seasonal theme mutual exclusion | `state/settings.ts`, `General.tsx` | F2 |
|
||||
| #7 | Composer toolbar touch targets (≥44px) | `room/RoomInput.tsx` | E1 |
|
||||
| #8 | Room Settings horizontal overflow (mobile) | `components/page/style.css.ts` | E2 |
|
||||
| #9 | Modal fullscreen on mobile (`useModalStyle`) | 22+ modal files | E3 |
|
||||
| #10 | Composer not hidden by keyboard (`100dvh`) | `src/index.css` | E4 |
|
||||
| #12 | PiP "All muted" badge re-fixed (was firing on any single mute) | `hooks/useCallSpeakers.ts` | G1 |
|
||||
| N96 | Call-recovery overlay single "Back" button | `call/CallView.tsx` | A7 |
|
||||
| N95 | AFK-monitor mic released on mute (OS indicator clears) | `hooks/useAfkAutoMute.ts` | L1 |
|
||||
| N108 | Maskable PWA icons (Android adaptive) | `public/manifest.json` + `res/android/maskable-*` | L2 |
|
||||
| EC | EC iframe load watchdog + self-heal + recovery UI | `plugins/call/CallEmbed.ts`, `CallView.tsx` | A7 |
|
||||
| N105 | Notification clicks work after tab close (SW `notificationclick` + `showNotification`) | `sw.ts`, `utils/dom.ts`, `ClientNonUIFeatures.tsx` | get a msg notif, close the tab, click it → app focuses/opens + routes to the room |
|
||||
| Gal | MediaGallery lazy-decrypt (true virtualization deferred) | `room/MediaGallery.tsx` | H1 |
|
||||
| a11y | aria-labels: edit-history / reaction / thread / reply | `message/*` (`FallbackContent`, `Reaction`, `Reply`) | I |
|
||||
| P3-8 | Thread Panel (side drawer, chips, threaded receipts, thread composer) | `features/room/thread/*`, `RoomTimeline/RoomInput` | 6-step checklist in LOTUS_TODO §P3-8 |
|
||||
| P4-4 | KaTeX math (`$…$`, `$$…$$`, data-mx-maths; lazy chunk) | `utils/mathParse.ts`, `components/math/` | send `$x^2$`, `$$\int f$$`, `$5 and $10` (stays text), math inside code block (stays text) |
|
||||
| P4-8 | Encrypted-search cache (opt-in toggle, clear button, logout wipe) | `utils/searchCache.ts`, message-search | enable in search panel → search → reload → coverage persists; logout wipes |
|
||||
| N97a | Session blob migration + cross-tab logout sync | `state/sessions.ts`, `useSessionSync` | login on old build → new build migrates; logout in tab A → tab B drops to auth |
|
||||
| P4-1 | Slack-style thread notifications (participating default, All/Mentions/Mute, badge math) | `utils/threadNotifications.ts`, `ClientNonUIFeatures`, `roomToUnread` | 6-step checklist in LOTUS_TODO §P4-1 |
|
||||
|
||||
**Verified working in live testing (2026-06):** A2, B1–B4, C1, C3, D (mic/camera/deafen/screenshare/fullscreen/more-menu/PiP). Denoise quality in D is still poor — tracked under the denoise project, not a regression.
|
||||
|
||||
---
|
||||
|
||||
## 🧩 Element Call source-level items — now actionable via the fork
|
||||
|
||||
> 🔱 **[EC-FORK]** **UPDATE 2026-06-30: Phase 2 IMPLEMENTED.** We own and
|
||||
> self-build Element Call (`LotusGuild/element-call` →
|
||||
> `@lotusguild/element-call-embedded@0.20.1-lotus.1`, cinny wired). A5/A6/A7
|
||||
> below are **fixed in the fork** — they are now ⚠️ awaiting **live
|
||||
> verification** (`LOTUS_TESTING.md` §D2), not open work. See
|
||||
> [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md) §10. Delete each
|
||||
> row once verified live.
|
||||
|
||||
The in-call participant grid is rendered **inside EC's app** — now editable source
|
||||
(previously a prebuilt npm bundle we could only style around). Status of the items
|
||||
from testing:
|
||||
|
||||
- **A5 — "Focus camera": ⚠️ FIXED in fork, awaiting verify (D2-3).** cinny now
|
||||
sends an `io.lotus.focus_participant` widget action that pins a participant in
|
||||
EC's layout (coexisting with / overriding the screenshare spotlight); the old
|
||||
`.click()`-the-tile DOM hack in `CallControl.ts` is deleted.
|
||||
- **A6 — avatar decorations in-call: ⚠️ FIXED in fork, awaiting verify (D2-4).**
|
||||
cinny pushes `io.lotus.decorations` (per-user APNG URLs) and the fork renders
|
||||
them on EC's participant video-tile avatars — not just our pre-join lobby roster.
|
||||
- **A7 — mic dead after EC's "Reconnect": ⚠️ FIXED in fork, awaiting verify
|
||||
(D2-1).** Denoise moved into EC's mic-capture/publish pipeline as a first-class
|
||||
LiveKit `TrackProcessor` (flag `lotusDenoiseSource=1`); EC re-runs it on every
|
||||
(re)publish, so reconnects keep denoise alive natively. The build-time
|
||||
`getUserMedia`/`index.html` injection (the root cause) is removed. **Highest
|
||||
blast radius — everyone's mic; verify D2-1 carefully.**
|
||||
|
||||
---
|
||||
|
||||
## 🔴 Open — Actionable
|
||||
|
||||
### 🧨 Encryption / E2EE — ⚠️ EXTREME COMPLEXITY · 🧠 PLANNING SESSION REQUIRED · 👤 SENIOR ENGINEER
|
||||
|
||||
> 🧰 **Investigation kit ready (2026-07):** [`LOTUS_E2EE_INVESTIGATION.md`](./LOTUS_E2EE_INVESTIGATION.md)
|
||||
> has the per-KE capture runbook (console signatures, synapse-side queries, the
|
||||
> KE-1→KE-2 causality decision tree, ranked remediations), and the client now
|
||||
> ships a **Crypto Diagnostics** capture helper (Settings) — run it during the
|
||||
> next affected call and download the report before starting any fix.
|
||||
|
||||
> **Observed live in prod 2026-06-30** on `chat.lotusguild.org` during a 2-person
|
||||
> **Element Call** (E2EE enabled). These span **client rust-crypto (via
|
||||
> `matrix-js-sdk@41.6.0-rc.0`) ↔ Synapse ↔ Element Call's MatrixRTC E2EE** and are
|
||||
> very likely **interrelated** (see KE-1 → KE-2). Do **not** spot-fix — they need
|
||||
> a dedicated cross-system planning session with the homeserver owner. Capture
|
||||
> full client console + a synapse-side trace for the same call before starting.
|
||||
> **None of these are caused by the EC fork work** (the issues reproduce on the
|
||||
> old build; the local mic/denoise path is unrelated to key distribution).
|
||||
|
||||
- **KE-1 — One-time-key (OTK) upload conflict storm (CRITICAL, root-cause candidate).**
|
||||
`POST /_matrix/client/v3/keys/upload` returns `400 M_UNKNOWN: One time key
|
||||
signed_curve25519:AAAAAAAAAGQ already exists. Old key: {…} new key: {…}` —
|
||||
firing **continuously** (many/sec). The client repeatedly tries to publish an
|
||||
OTK at a key id the server already holds **with a different value**, i.e. the
|
||||
rust-crypto key store and Synapse have **diverged OTK state**. Impact: floods
|
||||
the crypto outgoing-request loop and is the prime suspect for the downstream
|
||||
missing-key failures (no fresh OTKs ⇒ no new Olm sessions ⇒ undecryptable
|
||||
to-device key events). _Investigate:_ device/key-store reset-or-restore
|
||||
mismatch, OTK id-counter desync, RC-SDK (`41.6.0-rc.0`) regression, or a
|
||||
Synapse OTK bug. Repro signature: grep console for `already exists`.
|
||||
**Extreme — planning session.**
|
||||
|
||||
- **KE-2 — Element Call media keys not arriving/decrypting → audio & video cut out (CRITICAL).**
|
||||
`MissingKey: missing key at index N for participant @user`, `skipping decryption
|
||||
due to missing key`, `MissingKey: key set not found for @user at index 0`, and
|
||||
rust-crypto `WARN … Received an unexpected encrypted to-device event …
|
||||
event_type="io.element.call.encryption_keys"`. EC distributes per-participant
|
||||
media keys as **encrypted to-device `io.element.call.encryption_keys`** events;
|
||||
these aren't being received/decrypted in order, so remote LiveKit audio/video
|
||||
can't be decrypted — **this is the "friend's audio cuts out occasionally"
|
||||
symptom.** Almost certainly downstream of **KE-1** (broken Olm sessions). Spans
|
||||
EC's MatrixRTC E2EE + rust-crypto to-device + Synapse. **Extreme — planning
|
||||
session.**
|
||||
|
||||
- **KE-3 — Timeline decryption error: missing `algorithm` field (HIGH).**
|
||||
`Error decrypting event (… type=m.room.encrypted …): DecryptionError[msg:
|
||||
missing field 'algorithm' at line 1 column 138 …]`. A malformed/legacy
|
||||
encrypted event (or a serialization mismatch in the RC SDK) that rust-crypto
|
||||
can't parse. Lower frequency than KE-1/2 but a distinct decode-path failure —
|
||||
capture the offending event id (`$SASBBzoqj…` seen) and inspect its raw content.
|
||||
|
||||
- **KE-4 — MatrixRTC delayed-event / membership timeouts (MEDIUM-HIGH, reliability).**
|
||||
`[MembershipManager] Network local timeout error while sending event, immediate
|
||||
retry … AbortError: Restart delayed event timed out before the HS responded`,
|
||||
with repeated `org.matrix.msc4157.update_delayed_event`. MSC4140/4157
|
||||
delayed-event reliability against `matrix.lotusguild.org` — can cause stale/ghost
|
||||
call membership and missed leave events. May be partly **homeserver
|
||||
responsiveness**; correlate with synapse latency/load. Include in the same
|
||||
planning session since it shares the call-reliability + HS-interaction surface.
|
||||
|
||||
### Security & Privacy
|
||||
|
||||
- **N97 — Access token stored in plaintext `localStorage`** (`state/sessions.ts`), vulnerable to XSS; device ID likewise. Architectural — needs a token-protection / session-storage redesign.
|
||||
- **Session writes are non-atomic and not cross-tab synced** (`state/sessions.ts`) — risks inconsistent state / races across tabs.
|
||||
- **Persisted PII without encryption:** user status message + expiry (`settings/account/Profile.tsx`), unsent composer drafts (`room/RoomInput.tsx`). Leak risk on shared devices.
|
||||
|
||||
### PWA / Offline / Notifications
|
||||
|
||||
- **N107 — SW has no `push` handler** — Web Push delivery is entirely non-functional. Needs a `push` listener + a Matrix push-gateway integration.
|
||||
- **No app-asset caching strategy** (`src/sw.ts`) — no offline capability.
|
||||
- ~~**`manifest: false`** may block PWA install~~ — **verified OK (2026-06):** `index.html` links `/manifest.json`, which exists in `public/` and is copied to `dist/`; VitePWA intentionally doesn't generate one. Not a bug.
|
||||
|
||||
### Dependencies & Build
|
||||
|
||||
- **`matrix-js-sdk` pinned to a Release Candidate** (`41.6.0-rc.0`); `@atlaskit` and build tools (`vite`, `typescript`, `eslint`) on unstable/experimental pins — review for stable versions; RC SDK is a tree-shaking/bundle-size risk.
|
||||
- **Build-time overhead:** `lotusDenoise` does heavy sequential `fs` work in `closeBundle`; `viteStaticCopy` config is complex with redundant renames — could be streamlined.
|
||||
|
||||
### Code Hygiene / DevEx
|
||||
|
||||
- **Automated test suite — 561+ tests across 65+ modules, a hard CI gate.** `npm test` runs Node's built-in runner via `tsx` (not vitest — Vite 8 is ahead of vitest's range) and **blocks the build job on failure**. Broad pure-logic coverage: utils (common, regex, sanitize/XSS, time, matrix, matrix-uia, mimeTypes, sort, accentColor, findAndReplace, AsyncSearch, ASCIILexicalTable, keyboard, room, matrix-crypto, featureCheck, syntaxHighlight, imageCompression, user-agent, callSounds), state (settings, sessions, recentSearches, upload, typingMembers, lists, room-list, toast, scheduledMessages, backupRestore, callEmbed/callPreferences, spaceRooms, …), plugins (matrix-to, call/utils, via-servers, bad-words, recent-emoji, custom-emoji, markdown block/inline/utils), OIDC (cs-api, useParsedLoginFlows, oidcState), lotus/avatarDecorations, message-search, search filters. Prevention work has caught + fixed **4 real bugs** (`findAndReplace` infinite-loop; `getSettings` crash-on-load when storage is blocked; `isMacOS` never matching modern Macs; `isMLDenoiseSupported` throwing `ReferenceError` instead of returning false on browsers lacking the `AudioWorkletNode` binding). **Next:** component/integration tests (the untestable-under-tsx DOM/React surface).
|
||||
- **Extensive `as any` casts** across `src/` — gradual typing cleanup.
|
||||
- **`types/matrix/` mirrors SDK types** instead of importing them — drift risk.
|
||||
- ~~**Hardcoded CDN URL** should move to an env var~~ — **done:** `avatarDecorations.ts` already honors a `VITE_DECORATION_CDN` env override (lines 14-16); the in-repo literal is only the default. Nothing left.
|
||||
- **`patch-folds.mjs` edits `node_modules` directly** — consider `patch-package`.
|
||||
- **Infra docs:** `contrib/nginx` lacks security headers (HSTS/CSP) + uses rewrites over `try_files`; `contrib/caddy` has a placeholder path. CI/CD (`prod-deploy.yml`): sequential deploy, aggressive 1-min Netlify timeout, `package-manager-cache: false`.
|
||||
- **README:** keep the fork-sync version + logo path current. (`CONTRIBUTING.md` is intentionally left as upstream Cinny's — not a Lotus concern.)
|
||||
- **Architecture notes (low priority):** deep `features/` + `hooks/` nesting, many small coupled hooks, possible dead CSS/components, `SpacingVariant` / `DropTarget` recipe simplification.
|
||||
- **Git workflow (forward-looking):** keep commits scoped — past monolithic "fix all bugs" commits and inconsistent prefixes hurt `git bisect`.
|
||||
|
||||
### Big Projects
|
||||
|
||||
- ~~**#5 — Seasonal themes & chat-background redesign.**~~ **DONE (2026-06/07):** 11 seasonal/holiday overlays shipped and later toned down + given a settings preview grid; all 19 chat backgrounds redesigned (Carbon + Aurora kept per user preference), one design sprint each, GPU-friendly CSS with `prefers-reduced-motion` + pause toggle. Remaining polish rides normal bug flow, not a "big project."
|
||||
@@ -1,402 +0,0 @@
|
||||
# Lotus Chat — E2EE Investigation Runbook (KE-1 → KE-4)
|
||||
|
||||
> **Scope:** evidence-gathering only. Do **not** apply fixes from this document
|
||||
> without a cross-system planning session (client rust-crypto ↔ Synapse ↔
|
||||
> Element Call MatrixRTC). Symptom source: `LOTUS_BUGS.md` §"Encryption / E2EE"
|
||||
> (KE-1..KE-4), observed live 2026-06-30 on `chat.lotusguild.org` during a
|
||||
> 2-person Element Call.
|
||||
>
|
||||
> **Client:** Lotus Cinny fork, `matrix-js-sdk@41.6.0-rc.0`, rust-crypto.
|
||||
> **Server:** Synapse `1.155.0` on **LXC 151** (`10.10.10.29`), PostgreSQL 17.9
|
||||
> on **LXC 109** (`10.10.10.44`). Facts below are copy-pasteable against that
|
||||
> deployment (paths/IPs from `/root/code/matrix/README.md`).
|
||||
|
||||
---
|
||||
|
||||
## 0. Deployment facts used by this runbook
|
||||
|
||||
From the matrix infra README (`/root/code/matrix/README.md`):
|
||||
|
||||
| Thing | Value |
|
||||
|-------|-------|
|
||||
| Synapse host | LXC **151**, `10.10.10.29` (Synapse 1.155.0) |
|
||||
| Synapse log | `/var/log/matrix-synapse/homeserver.log` |
|
||||
| Synapse config | `/etc/matrix-synapse/homeserver.yaml` (+ `conf.d/`) |
|
||||
| Synapse HTTP | `10.10.10.29:8008` |
|
||||
| PostgreSQL host | LXC **109**, `10.10.10.44` (PG 17.9), db `synapse` |
|
||||
| synapse-admin UI | `http://10.10.10.29:8080` |
|
||||
| LiveKit / lk-jwt / guard | LXC 151: LiveKit `:7880/:7881`, guard `:8070`, lk-jwt `:8071` |
|
||||
| SSH path to Synapse | `ssh root@10.10.10.4` then `pct enter 151` |
|
||||
| SSH path to PG | `ssh root@10.10.10.4` then `pct enter 109` |
|
||||
|
||||
**Getting a psql shell** (run on LXC 109, or from 151 over the network):
|
||||
|
||||
```bash
|
||||
# On LXC 109:
|
||||
sudo -u postgres psql synapse
|
||||
# From LXC 151 (pg_hba allows 10.10.10.29):
|
||||
psql "host=10.10.10.44 user=synapse dbname=synapse"
|
||||
```
|
||||
|
||||
**Tailing Synapse during a call** (on LXC 151):
|
||||
|
||||
```bash
|
||||
tail -F /var/log/matrix-synapse/homeserver.log | tee /tmp/lotus-call-$(date +%s).log
|
||||
```
|
||||
|
||||
Synapse E2EE/to-device logging is chatty at `INFO`; if a category is silent,
|
||||
temporarily raise it in `/etc/matrix-synapse/conf.d/log.yaml` (or the
|
||||
`log_config` file referenced by `homeserver.yaml`):
|
||||
|
||||
```yaml
|
||||
loggers:
|
||||
synapse.rest.client.keys: { level: DEBUG }
|
||||
synapse.handlers.e2e_keys: { level: DEBUG }
|
||||
synapse.storage.databases.main.end_to_end_keys: { level: DEBUG }
|
||||
synapse.handlers.devicemessage: { level: DEBUG } # to-device
|
||||
```
|
||||
|
||||
Then `systemctl reload matrix-synapse` (reload re-reads log config without a
|
||||
full restart). **Revert to `INFO` after the capture** — DEBUG is very verbose.
|
||||
|
||||
---
|
||||
|
||||
## 1. Per-KE evidence matrix
|
||||
|
||||
Client greps assume Chrome/Firefox DevTools console (filter box or, better,
|
||||
"Preserve log" + save-as). The **Crypto Diagnostics** card (Settings →
|
||||
Developer Tools) auto-captures every signature below into a downloadable JSON —
|
||||
use it as the primary client artifact and DevTools as the raw backup.
|
||||
|
||||
### KE-1 — OTK upload conflict storm (root-cause candidate)
|
||||
|
||||
- **Console signature (grep):**
|
||||
- `already exists`
|
||||
- full: `POST /_matrix/client/v3/keys/upload … 400 M_UNKNOWN: One time key signed_curve25519:<id> already exists. Old key: {…} new key: {…}`
|
||||
- **Capture client-side:**
|
||||
- Timestamp (first occurrence + rate — "N/sec"), **device id**, **user id**.
|
||||
- DevTools → **Network** → filter `keys/upload`: for a failing call save the
|
||||
**request body** (the `one_time_keys` map — note the exact `signed_curve25519:<id>`)
|
||||
and the **response body** (the `Old key` / `new key` JSON). This diff is the
|
||||
smoking gun: same key-id, different value ⇒ store vs server divergence.
|
||||
- Whether it self-heals or loops forever (KE-1 loops).
|
||||
- **Synapse log grep (LXC 151):**
|
||||
```bash
|
||||
grep -E "keys/upload|One time key .* already exists|OneTimeKey" \
|
||||
/var/log/matrix-synapse/homeserver.log | grep "<user_id>"
|
||||
```
|
||||
- **Synapse SQL (LXC 109) — what the server thinks it holds:**
|
||||
```sql
|
||||
-- Current OTK inventory for the device (compare key_id set against the
|
||||
-- request body the client keeps retrying).
|
||||
SELECT algorithm, key_id, ts_added_ms
|
||||
FROM e2e_one_time_keys_json
|
||||
WHERE user_id = '@user:matrix.lotusguild.org'
|
||||
AND device_id = '<DEVICE_ID>'
|
||||
ORDER BY algorithm, key_id;
|
||||
|
||||
-- Server's advertised counts (this is what /sync tells the client it has,
|
||||
-- and drives whether the client decides to upload more).
|
||||
SELECT algorithm, count(*) FROM e2e_one_time_keys_json
|
||||
WHERE user_id = '@user:matrix.lotusguild.org' AND device_id = '<DEVICE_ID>'
|
||||
GROUP BY algorithm;
|
||||
|
||||
-- Fallback key state (used when OTKs are exhausted).
|
||||
SELECT algorithm, key_id, used, ts_added_ms
|
||||
FROM e2e_fallback_keys_json
|
||||
WHERE user_id = '@user:matrix.lotusguild.org' AND device_id = '<DEVICE_ID>';
|
||||
```
|
||||
> Table names are Synapse 1.155 (`e2e_one_time_keys_json`,
|
||||
> `e2e_fallback_keys_json`). If a name is absent, list with `\dt e2e*` in psql.
|
||||
- **Confirms:** if the offending `key_id` (from the 400) is **present** in
|
||||
`e2e_one_time_keys_json` with a **different** stored value than the client's
|
||||
request body → OTK state has diverged (rust-crypto store vs Synapse). That is
|
||||
the KE-1 root condition.
|
||||
|
||||
### KE-2 — EC media keys not arriving/decrypting (audio/video cutouts)
|
||||
|
||||
- **Console signature (grep):**
|
||||
- `MissingKey`
|
||||
- `missing key at index` (e.g. `MissingKey: missing key at index N for participant @user`)
|
||||
- `key set not found`
|
||||
- `io.element.call.encryption_keys` (rust-crypto: `WARN … Received an unexpected encrypted to-device event … event_type="io.element.call.encryption_keys"`)
|
||||
- **Capture client-side:**
|
||||
- Timestamp windows where a participant's audio/video cut out, and the
|
||||
`@participant` + `index N` from the message.
|
||||
- The `io.element.call.encryption_keys` warnings (these are the media-key
|
||||
to-device events failing to decrypt) with their timestamps.
|
||||
- Own device id + user id (to correlate with the sender's Olm session).
|
||||
- **Synapse log grep (LXC 151) — to-device delivery of the media keys:**
|
||||
```bash
|
||||
grep -E "io.element.call.encryption_keys|m.room.encrypted|/sendToDevice|to_device" \
|
||||
/var/log/matrix-synapse/homeserver.log | grep -E "<user_id>|<participant_id>"
|
||||
```
|
||||
- **Synapse SQL (LXC 109) — undelivered / queued to-device events:**
|
||||
```sql
|
||||
-- Backlog of to-device messages queued for the affected device. A growing
|
||||
-- count here = the HS has the media-key events but the device isn't draining
|
||||
-- them via /sync (or they were sent to a stale device id).
|
||||
SELECT user_id, device_id, count(*) AS pending
|
||||
FROM device_inbox
|
||||
WHERE user_id = '@user:matrix.lotusguild.org'
|
||||
GROUP BY user_id, device_id;
|
||||
|
||||
-- Cross-check the device id the sender is targeting actually exists / is current.
|
||||
SELECT device_id, display_name, last_seen, ts
|
||||
FROM devices WHERE user_id = '@user:matrix.lotusguild.org';
|
||||
```
|
||||
- **Confirms:** to-device events present but undecryptable (client shows the
|
||||
`io.element.call.encryption_keys` "unexpected encrypted" warning) ⇒ there is
|
||||
**no valid Olm session** to decrypt them — the expected downstream of KE-1.
|
||||
|
||||
### KE-3 — Timeline decryption error: missing `algorithm` field
|
||||
|
||||
- **Console signature (grep):**
|
||||
- `DecryptionError`
|
||||
- full: `Error decrypting event (… type=m.room.encrypted …): DecryptionError[msg: missing field 'algorithm' at line 1 column 138 …]`
|
||||
- **Capture client-side:**
|
||||
- The **event id** (`$SASBBzoqj…` was one) and the **room id**.
|
||||
- Pull the raw event JSON via DevTools or the Developer Tools account-data/event
|
||||
viewer, or directly:
|
||||
```
|
||||
GET https://matrix.lotusguild.org/_matrix/client/v3/rooms/<roomId>/event/<eventId>
|
||||
```
|
||||
Inspect `content` — confirm whether `algorithm` (should be
|
||||
`m.megolm.v1.aes-sha2`) is truly absent vs a serialization mismatch.
|
||||
- **Synapse log grep (LXC 151):**
|
||||
```bash
|
||||
grep -E "<eventId>" /var/log/matrix-synapse/homeserver.log
|
||||
```
|
||||
- **Synapse SQL (LXC 109) — the stored event content as the HS holds it:**
|
||||
```sql
|
||||
SELECT ej.event_id, e.type, e.sender, e.origin_server_ts,
|
||||
(ej.json::json -> 'content' -> 'algorithm') AS algorithm
|
||||
FROM event_json ej
|
||||
JOIN events e USING (event_id)
|
||||
WHERE ej.event_id = '$SASBBzoqj...';
|
||||
```
|
||||
- **Confirms:** if the stored `content.algorithm` is **NULL/absent** on the HS →
|
||||
a malformed/legacy event was persisted (sender-side or federation). If it is
|
||||
**present** on the HS but the client throws → an RC-SDK deserialization bug.
|
||||
This distinction decides whether KE-3 is a data problem or a client problem.
|
||||
|
||||
### KE-4 — MatrixRTC delayed-event / membership timeouts
|
||||
|
||||
- **Console signature (grep):**
|
||||
- `update_delayed_event` (`org.matrix.msc4157.update_delayed_event`)
|
||||
- `delayed event` / `Restart delayed event timed out`
|
||||
- full: `[MembershipManager] Network local timeout error while sending event, immediate retry … AbortError: Restart delayed event timed out before the HS responded`
|
||||
- **Capture client-side:**
|
||||
- Timestamps of each timeout; whether they correlate with call join/leave or
|
||||
with general sync slowness.
|
||||
- DevTools → Network: the `…/delayed_events…` / `update_delayed_event`
|
||||
requests — their **HTTP status and latency** (timed-out vs slow-200).
|
||||
- **Synapse log grep (LXC 151):**
|
||||
```bash
|
||||
grep -E "delayed_event|msc4140|msc4157|update_delayed" \
|
||||
/var/log/matrix-synapse/homeserver.log | grep "<user_id>"
|
||||
# HS responsiveness in the same window (KE-4 may be pure latency):
|
||||
grep -E "Processed request|/sync" /var/log/matrix-synapse/homeserver.log | tail -50
|
||||
```
|
||||
- **Server-side corroboration (Grafana, `dashboard.lotusguild.org`):** Synapse
|
||||
p99 response time (excl. `/sync`), event-processing lag, DB query latency for
|
||||
the call window. High latency here ⇒ KE-4 is (partly) homeserver
|
||||
responsiveness, not a client bug.
|
||||
- **Confirms:** timeouts that line up with HS latency spikes → reliability/load;
|
||||
timeouts with a healthy HS → client MembershipManager retry logic.
|
||||
|
||||
---
|
||||
|
||||
## 2. Causality hypothesis
|
||||
|
||||
```
|
||||
KE-1 OTK upload conflict storm
|
||||
(rust-crypto store ↔ Synapse OTK state DIVERGED; server rejects re-uploads)
|
||||
│ no fresh OTKs can be published/claimed
|
||||
▼
|
||||
No new Olm (1:1) sessions can be established with this device
|
||||
│
|
||||
▼
|
||||
KE-2 EC media-key to-device events (io.element.call.encryption_keys)
|
||||
arrive but cannot be decrypted ⇒ MissingKey at index N
|
||||
⇒ friend's audio/video cuts out
|
||||
```
|
||||
|
||||
KE-3 (missing `algorithm`) and KE-4 (delayed-event timeouts) are **likely
|
||||
independent** of the KE-1→KE-2 chain: KE-3 is a decode/serialization path,
|
||||
KE-4 is a MatrixRTC-vs-HS reliability path. Confirm/refute independence with the
|
||||
decision tree below.
|
||||
|
||||
### Decision tree — which capture confirms/refutes each link
|
||||
|
||||
```
|
||||
Q1. Does the KE-1 offending key_id from the 400 response exist in
|
||||
e2e_one_time_keys_json with a DIFFERENT value than the client request body?
|
||||
├─ YES → OTK divergence CONFIRMED (KE-1 root). Go to Q2.
|
||||
└─ NO → Not divergence. Check: are OTK counts at 0 with fallback key `used=true`?
|
||||
├─ YES → OTK exhaustion, not divergence — different remediation.
|
||||
└─ NO → Suspect RC-SDK 41.6.0-rc.0 upload-loop regression (see §3).
|
||||
|
||||
Q2. During the same call, are io.element.call.encryption_keys to-device events
|
||||
present in device_inbox / Synapse to-device logs for our device id?
|
||||
├─ YES + client shows "unexpected encrypted"/MissingKey
|
||||
│ → KE-1 ⇒ KE-2 LINK CONFIRMED (events delivered, no Olm session to open them).
|
||||
├─ YES + client decrypts fine, but LiveKit still silent
|
||||
│ → KE-2 is downstream of LiveKit/SFU, NOT KE-1. Decouple from crypto.
|
||||
└─ NO (nothing queued/targeted our device)
|
||||
→ media keys never sent to us: stale device id / membership (see KE-4)
|
||||
→ KE-2 is a device-targeting problem, weakly linked to KE-1.
|
||||
|
||||
Q3. KE-3: is content.algorithm NULL in event_json on the HS?
|
||||
├─ YES → malformed persisted event (sender/federation). Independent of KE-1.
|
||||
└─ NO → client-side RC-SDK deserialization bug. Independent of KE-1.
|
||||
|
||||
Q4. KE-4: do delayed-event timeouts coincide with Synapse p99 latency spikes
|
||||
(Grafana) in the same minute?
|
||||
├─ YES → homeserver responsiveness/load. Independent of KE-1..KE-3.
|
||||
└─ NO → client MembershipManager retry behavior. Independent.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Ranked remediation options (with blast radius)
|
||||
|
||||
> Ordered least-destructive → most-destructive. **Do not run any of these as a
|
||||
> "fix" before the planning session** — they are listed so evidence collection
|
||||
> can be paired with a recovery plan. Confirm the root condition (Q1/Q2) first.
|
||||
|
||||
1. **Per-device logout + re-login of the affected device** *(lowest blast radius)*
|
||||
- **What:** log the one glitching device out and back in. Forces a fresh
|
||||
device id, fresh device keys, and a clean OTK batch — sidesteps a diverged
|
||||
OTK store without touching other sessions.
|
||||
- **Blast radius:** that device only. Other sessions/devices untouched.
|
||||
- **Cost:** the new device must be re-verified (cross-signing) and will need
|
||||
to restore room keys from **key backup** to read old encrypted history.
|
||||
- **Confirms/uses:** if KE-1 stops after this, OTK-store divergence (Q1) was
|
||||
the cause.
|
||||
|
||||
2. **Client crypto-store reset (`clearLoginData` path)** *(medium)*
|
||||
- **What:** `clearLoginData()` in `src/client/initMatrix.ts` (coordinator's
|
||||
file — do not edit) **deletes ALL IndexedDB databases** (incl.
|
||||
`web-sync-store` and the rust-crypto store `crypto-store`), **unregisters
|
||||
service workers**, **clears all Cache Storage**, and **`localStorage.clear()`**,
|
||||
then reloads. `clearCacheAndReload()` is lighter — it only calls
|
||||
`mx.store.deleteAllData()` (sync cache) and does **not** wipe crypto.
|
||||
- **Blast radius:** this browser profile only, but total: you are logged out,
|
||||
lose all cached sync state, drafts, settings, and **the local
|
||||
megolm/room-key store**.
|
||||
- **⚠️ Message-history / backup implication:** wiping `crypto-store` destroys
|
||||
locally-held **room keys (megolm inbound sessions)**. Any history **not
|
||||
backed up to server-side Key Backup** becomes **permanently undecryptable
|
||||
on this device**. Before doing this: verify Key Backup is enabled and the
|
||||
recovery key / passphrase is available (Settings → Security), or the user
|
||||
loses readable history. Cross-signing must be re-established too.
|
||||
- **Use when:** the rust-crypto store itself is corrupt/diverged and option 1
|
||||
didn't clear it.
|
||||
|
||||
3. **SDK pin change off the RC** *(medium — codebase change, needs rebuild)*
|
||||
- **Current pin:** `package.json` → `"matrix-js-sdk": "41.6.0-rc.0"` (a
|
||||
release candidate).
|
||||
- **Finding (npm / GitHub changelog, checked 2026-07):** stable **`41.6.0`**
|
||||
was released **2026-05-26**. Its only changelog line is *"Throw sane error
|
||||
on completeLoginOnNewDevice IdP rejection"* — **no OTK / keys-upload / Olm /
|
||||
to-device fix** relative to the RC. Later stable lines exist
|
||||
(`41.7.0`, `41.8.0`; `41.7.0-rc.3` / `41.9.0-rc.0` seen as pre-releases).
|
||||
Nearby crypto-relevant entries: `41.5.0` *"Enable encrypted history sharing
|
||||
by default"*; `41.4.0` key-backup handling. **No changelog entry directly
|
||||
addresses the KE-1 OTK-conflict symptom** in the immediate range — so
|
||||
moving RC→`41.6.0` stable is a low-risk hygiene step but is **not expected
|
||||
to fix KE-1 by itself**. Before pinning, re-read the CHANGELOG for any
|
||||
`41.7.x`/`41.8.x` OTK/one-time-key/olm entry that post-dates this note.
|
||||
- **Blast radius:** all users after the next `cinny-build.sh` deploy. Test the
|
||||
rust-crypto IndexedDB schema — a downgrade triggers the `IDB_VERSION_CONFLICT`
|
||||
path in `initMatrix.ts`.
|
||||
|
||||
4. **Synapse-side OTK row surgery** *(LAST RESORT — highest danger)*
|
||||
- **What:** deleting/rewriting rows in `e2e_one_time_keys_json` (and/or
|
||||
`e2e_fallback_keys_json`, `device_inbox`) for the affected device to force
|
||||
the client to re-upload a clean batch.
|
||||
- **⚠️ Danger:** direct writes to Synapse crypto tables can **desync every
|
||||
device of that user**, break Olm sessions **for everyone who has claimed one
|
||||
of those keys**, and are easy to get wrong (wrong `key_id`, cache not
|
||||
invalidated). Synapse caches OTK counts — a raw DELETE without a restart can
|
||||
leave the advertised count wrong, **worsening** the KE-1 loop.
|
||||
- **Guardrails if ever done (planning session + HS owner only):** full
|
||||
`pg_dump` of `synapse` first; do it during **zero active calls**; delete only
|
||||
the exact diverged `key_id` for the exact `device_id`; `systemctl restart
|
||||
matrix-synapse` to flush caches; then log the device out/in (option 1) so it
|
||||
republishes. **Never** run this speculatively.
|
||||
|
||||
---
|
||||
|
||||
## 4. "Capture session" checklist (run during the next call)
|
||||
|
||||
Do these **in order**. Aim to have client + server capturing the **same call**.
|
||||
|
||||
1. **Prep server tail (LXC 151):** SSH in, start
|
||||
`tail -F /var/log/matrix-synapse/homeserver.log | tee /tmp/lotus-call-$(date +%s).log`.
|
||||
(Optionally raise the `synapse.rest.client.keys` / `handlers.e2e_keys` /
|
||||
`handlers.devicemessage` loggers to DEBUG per §0 and `systemctl reload
|
||||
matrix-synapse` — remember to revert after.)
|
||||
2. **Prep client:** open Lotus Chat → Settings → Developer Tools → **enable
|
||||
Developer Tools** so the **Crypto Diagnostics** card is visible; note its
|
||||
entry count starts at (or reset by reload to) 0.
|
||||
3. **Open DevTools** (F12) → Console: enable **Preserve log**; Network tab:
|
||||
enable **Preserve log** + **Record**. Note your **device id** and **user id**
|
||||
(Settings → Devices / Developer Tools → Copy access token page shows ids).
|
||||
4. **Note wall-clock start time** (ISO/UTC) on both machines so logs align.
|
||||
5. **Join the Element Call** with the second participant; reproduce the fault
|
||||
(wait for the audio/video cutouts and let KE-1 storm run ~30–60s).
|
||||
6. **When a fault occurs, note the wall-clock timestamp** and which symptom
|
||||
(audio cut / video freeze / etc.) — this bounds the log window.
|
||||
7. **Client artifacts:** in the Crypto Diagnostics card click **Download report**
|
||||
(`lotus-crypto-diag-<ts>.json`); in DevTools Network, save the failing
|
||||
`keys/upload` request+response (right-click → Save/Copy), and the raw HAR
|
||||
(Network → Save all as HAR) for the call window.
|
||||
8. **Grab KE-3 event id / KE-2 participant+index** from the console (or the
|
||||
diag JSON `entries[]`) for the SQL lookups.
|
||||
9. **Server artifacts:** stop the tail; run the per-KE greps and SQL from §1
|
||||
against the noted device id / user id / event id, saving output alongside the
|
||||
client JSON. Screenshot the Grafana Synapse latency panels for the window
|
||||
(for KE-4).
|
||||
10. **Bundle & label:** put client JSON + HAR + server log slice + SQL output in
|
||||
one folder named with the call's UTC start time. Revert any DEBUG log config
|
||||
(`systemctl reload matrix-synapse`). Hand off to the planning session — **do
|
||||
not apply §3 remediations yet.**
|
||||
|
||||
---
|
||||
|
||||
## 5. Client diagnostics helper (this kit)
|
||||
|
||||
- **`src/app/utils/cryptoDiagLog.ts`** — capture-only console instrumentation.
|
||||
- `installCryptoDiagLog()` — idempotent; wraps `console.warn`/`console.error`
|
||||
with pass-through wrappers (originals always called) that ring-buffer (max
|
||||
**200**) any line matching the KE signatures. No network, no timers.
|
||||
- `getCryptoDiagEntries()` — snapshot copy of the buffer (`{ ts, level, ke,
|
||||
signature, message }`, most-recent-last).
|
||||
- `buildCryptoDiagReport(mx)` — JSON string: SDK version, device id, user id,
|
||||
sync state, `cryptoReady` (`mx.getCrypto()` presence), per-KE counts, and the
|
||||
entry buffer. No tokens/PII beyond those ids; captured log lines are retained
|
||||
verbatim as evidence.
|
||||
- **Signatures → KE mapping:** `already exists`→KE-1; `missing key at index` /
|
||||
`io.element.call.encryption_keys` / `MissingKey`→KE-2; `DecryptionError`→KE-3;
|
||||
`update_delayed_event` / `delayed event`→KE-4.
|
||||
- **`src/app/features/settings/developer/CryptoDiagnostics.tsx`** — a folds
|
||||
`SequenceCard`/`SettingTile` card (mirrors `developer-tools/DevelopTools.tsx`)
|
||||
showing the live matched-entry count (Badge) and a **Download report** button
|
||||
(Blob → `lotus-crypto-diag-<ts>.json`, same download idiom as
|
||||
`room-settings/ExportRoomHistory.tsx`).
|
||||
|
||||
### Recommended mount points (coordinator)
|
||||
|
||||
- **Install call:** call `installCryptoDiagLog()` **as early as possible during
|
||||
boot** so it captures crypto errors from first sync — ideally at the top of
|
||||
the client entry module or inside `ClientRoot` before/around `initClient`
|
||||
(e.g. `src/app/pages/client/ClientRoot.tsx`). It is idempotent, side-effect
|
||||
only, and needs no `mx`, so a module-scope call at app entry is safe. (Do
|
||||
**not** put it in `initMatrix.ts` — that file is off-limits.)
|
||||
- **Settings card:** render `<CryptoDiagnostics />` inside the Developer Tools
|
||||
page — in `src/app/features/settings/developer-tools/DevelopTools.tsx`, add it
|
||||
to the `Box direction="Column" gap="700"` list (guarded by the existing
|
||||
`developerTools` flag), right after the "Access Token" card. It pulls `mx`
|
||||
from `useMatrixClient()` itself, so it just needs to be placed in the tree.
|
||||
+31
-2
@@ -330,7 +330,7 @@ Users can set a custom background color for `@mention` chips that highlight thei
|
||||
> pre-built npm bundle. Several in-call behaviors below are now first-class
|
||||
> source changes rather than DOM/widget hacks. Background, plan, and the Phase-2
|
||||
> work list are in
|
||||
> [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md).
|
||||
> the Element Call fork reference in [`LOTUS_TODO.md`](./LOTUS_TODO.md).
|
||||
|
||||
### Element Call — Self-Built Fork (`0.20.1-lotus.1`)
|
||||
|
||||
@@ -905,6 +905,14 @@ Hook: `src/app/hooks/useUserNotes.ts`
|
||||
|
||||
## UX & Composer
|
||||
|
||||
### Forward to Multiple Rooms (P6-3)
|
||||
|
||||
The Forward Message dialog is a checkbox multi-select: pick any number of rooms (search + select persist across queries) and **"Send to N rooms"** forwards in one batch (`Promise.allSettled`). Full success auto-closes; a partial failure keeps the dialog open with a "Forwarded to X/N — failed: …" summary. The forwarded content (latest edit via `m.new_content`, reply-quote stripped, undecryptable refused) is built by the shared, unit-tested `forwardContent.ts`.
|
||||
|
||||
### Live Bookmark Previews (P6-3)
|
||||
|
||||
`BookmarksPanel` resolves each saved message's **live event** (`useRoomEvent`) so previews reflect **edits** and show a **deleted** indicator for redactions, instead of the save-time snapshot. The stored snapshot (`previewText`) remains the fallback while loading, on fetch failure, or when you've **left the room**.
|
||||
|
||||
### Message Length Counter
|
||||
|
||||
A character count indicator is shown in the composer when `charCount > 0`. The counter resets to zero when switching rooms.
|
||||
@@ -1179,6 +1187,18 @@ Three one-tap presets at the top of **Settings → Notifications** that apply a
|
||||
|
||||
---
|
||||
|
||||
## Accessibility (P3-4)
|
||||
|
||||
WCAG 2.1 AA hardening of the golden path (find room → read → reply → send) for keyboard and screen-reader users.
|
||||
|
||||
- **Timeline for screen readers:** each message is `role="article"`; **collapsed messages announce their sender + time** (they drop the visible header, so AT would otherwise hear the body with no attribution). The timeline is a `role="log"` `aria-live="polite"` region so new messages are announced; emoji/emoticons carry text labels.
|
||||
- **Live status:** typing indicators announce via a `role="status"` region; editing a message announces "Editing message from <sender>".
|
||||
- **Forms & overlays:** all inputs have associated labels (visible `<label htmlFor>` or `aria-label`); the Media Gallery and Search overlays are named.
|
||||
- **Focus management:** skip-to-content link + `nav`/`main` landmarks; genuine dialogs return focus to their trigger on close (inline popouts intentionally keep focus in context).
|
||||
- **Keyboard-shortcuts help:** press <kbd>?</kbd> for a dialog of the existing shortcuts (Escape, type-to-focus composer, Enter/Shift+Enter send, message actions).
|
||||
- **Regression gate:** a curated `eslint-plugin-jsx-a11y` rule set (ARIA correctness + label association) runs in CI. Files: `components/message/*`, `features/room/RoomViewTyping.tsx`, `features/shortcuts/*`, `utils/a11y.ts`, `eslint.config.mjs`.
|
||||
- _Known limitation:_ list virtualization keeps far-scrolled history out of the a11y tree (perf trade-off); newly-arriving messages are announced.
|
||||
|
||||
## Infrastructure
|
||||
|
||||
### Authenticated Media
|
||||
@@ -1215,7 +1235,7 @@ The session persists as ONE atomic `cinny_session_v1` JSON write (previously ~10
|
||||
|
||||
### Crypto Diagnostics (E2EE investigation kit)
|
||||
|
||||
**Settings → Developer Tools → Crypto Diagnostics**: a capture-only ring buffer (max 200) hooks `console.warn/error` for E2EE failure signatures (OTK upload conflicts, missing call media keys, decryption errors, delayed-event timeouts) and downloads a JSON report — the evidence input for the KE-1→4 investigation. Companion runbook: [`LOTUS_E2EE_INVESTIGATION.md`](./LOTUS_E2EE_INVESTIGATION.md). `utils/cryptoDiagLog.ts`, `features/settings/developer/CryptoDiagnostics.tsx`.
|
||||
**Settings → Developer Tools → Crypto Diagnostics**: a capture-only ring buffer (max 200) hooks `console.warn/error` for E2EE failure signatures (OTK upload conflicts, missing call media keys, decryption errors, delayed-event timeouts) and downloads a JSON report — the evidence input for the KE-1→4 investigation. Companion diagnosis: the Encryption / E2EE section of [`LOTUS_TODO.md`](./LOTUS_TODO.md). `utils/cryptoDiagLog.ts`, `features/settings/developer/CryptoDiagnostics.tsx`.
|
||||
|
||||
---
|
||||
|
||||
@@ -1255,6 +1275,15 @@ Windows toasts with **click-to-open-room** and **inline quick reply** (WinRT `To
|
||||
|
||||
When Windows Focus Assist / Quiet Hours is active, Lotus suppresses its own notifications + sounds (reuses the quiet-hours gate). `useTauriFocusAssist` + `focusAssistActiveAtom` ↔ `native/focus_assist.rs` (`SHQueryUserNotificationState`).
|
||||
|
||||
### Linux parity + cross-platform extras (P6-1)
|
||||
|
||||
Rounds out the native app beyond Windows (macOS out of scope):
|
||||
|
||||
- **No-sleep during calls on Linux** — a D-Bus `org.freedesktop.ScreenSaver` inhibit (zbus) keeps the display awake mid-call, matching the Windows behavior. `native/power.rs`.
|
||||
- **Launcher unread badge on Linux** — best-effort Unity `LauncherEntry` D-Bus signal (Ubuntu/Dash-to-Dock/KDE), mirroring the Windows taskbar badge.
|
||||
- **Launch on login** — `tauri-plugin-autostart` + a **Settings → General "Launch on login"** toggle (desktop-only).
|
||||
- **Tray "Do Not Disturb"** — a tray checkbox that silences Lotus notifications (feeds `manualDndAtom` into the same quiet-gate as Focus Assist). `useTauriDnd`.
|
||||
|
||||
### Custom Window Chrome (P5-47)
|
||||
|
||||
Opt-in (Settings → General → **Custom Window Chrome**): replaces the OS title bar with a TDS-styled titlebar (min / max / close + drag region), runtime-reversible via `set_decorations`. `features/desktop/TitleBar.tsx` + `useTauriWindowChrome` ↔ `native/chrome.rs`.
|
||||
|
||||
+141
-7
@@ -1,6 +1,6 @@
|
||||
# Lotus Chat — Manual Testing Guide
|
||||
|
||||
**Generated:** June 2026
|
||||
**Generated:** June 2026 · **Updated:** July 2026 (added §O — threads, per-thread notifications, math, search cache, session hardening, audit wave, desktop CSP)
|
||||
**Scope:** Everything landed on the `lotus` branch since the v4.12.3 merge that I (Claude) could **not** verify statically and that needs a human in a real environment to confirm. Work through it top-to-bottom; the highest-risk / hardest-to-reproduce items are first.
|
||||
|
||||
> **How to report back:** For each numbered check, tell me **PASS** / **FAIL** (or **partial**). On any FAIL, include: what you saw vs. expected, the browser/OS (and whether web LXC 106 or the desktop/Tauri build), the theme you were on, and any **browser console** errors (F12 → Console). Screenshots help for anything visual.
|
||||
@@ -328,7 +328,7 @@ _(Requires the guard deployed on LXC 151 — auto-deploys on a `matrix` repo pus
|
||||
|
||||
# Backlog of previously-fixed-but-unverified items
|
||||
|
||||
> Sections A–D above are **this session's** work. Everything below was fixed in earlier waves and is still flagged **⚠️ UNTESTED** in `LOTUS_BUGS.md` / `LOTUS_TODO.md`. They're grouped by what kind of environment you need (mobile, desktop, screen reader, etc.) so you can knock out a whole category at once. None of these are urgent the way A–D are; do them as you have the right device handy.
|
||||
> Sections A–D above are **this session's** work. Everything below was fixed in earlier waves and is still flagged **⚠️ UNTESTED** (see the outstanding-verification backlog below / `LOTUS_TODO.md`). They're grouped by what kind of environment you need (mobile, desktop, screen reader, etc.) so you can knock out a whole category at once. None of these are urgent the way A–D are; do them as you have the right device handy.
|
||||
|
||||
## E. Mobile / responsive (needs a real phone, or devtools device emulation)
|
||||
|
||||
@@ -573,10 +573,144 @@ Log into **matrix.lotusguild.org** (password) and **matrix.org**.
|
||||
|
||||
---
|
||||
|
||||
## O. July 2026 batch — threads, notifications, math, search cache, audit wave
|
||||
|
||||
Everything landed after the OIDC work. These mirror the checklists in `LOTUS_TODO.md` (§P3-8, §P4-1) and the outstanding-verification backlog below (P3-8/P4-1/P4-4/P4-8/N97a/AW-1…4). **⚠️ Threads change the main timeline** — thread replies no longer render inline; that's intended (see O1).
|
||||
|
||||
### O1. Thread Panel (P3-8) — 👥 2 people help for live replies
|
||||
|
||||
1. Hover a message → **Reply in Thread** (message menu). The right-side **thread panel** opens with that message as the root.
|
||||
2. Send text, an emoji, and a file upload into the thread; have the second person reply too.
|
||||
3. Reply to a reply _inside_ the panel.
|
||||
|
||||
**Expected:** the panel shows the root at top + an "N replies" divider + the reply timeline (own composer at the bottom). Your sends appear immediately (pending → confirmed). A reply-to-a-reply is a proper thread reply. In the **main** timeline the replies do **not** appear inline — the root message instead shows a **"N replies · time"** chip. Clicking the chip (or a reply's thread indicator) opens the panel. **×** or **Escape** closes it; on mobile the panel is fullscreen. Scrolled up in a long thread → a **Jump to Latest** chip appears. Reload the page → the root/reply split persists; in an **encrypted** room the thread replies decrypt (not "Unable to decrypt").
|
||||
|
||||
### O2. Per-thread notifications (P4-1, Slack-style) — 👥 2 people
|
||||
|
||||
1. Have the second person reply in a thread **you have posted in** → expect a notification + sound.
|
||||
2. Have them reply in a thread **you have never touched** and don't @mention you → expect **silence** (only the chip's unread badge updates).
|
||||
3. Have them **@mention** you in any thread → expect a notification regardless of participation.
|
||||
4. Open the panel's **bell menu** (header) → set the thread to **Mute** → expect no notifications, the chip's unread badge gone (bell-mute glyph shown), and the room's **sidebar badge drops** by that thread's count. Try **All** (every reply notifies) and **Mentions only** (only @mentions).
|
||||
5. On a **second device**, confirm the same per-thread modes are set (they sync via account data).
|
||||
6. Room-level **Mute** (room context menu) still silences everything, including thread overrides.
|
||||
|
||||
**Known caveat:** Mentions-only can under-notify in E2EE rooms (the decision runs before decryption). Muted-thread badge subtraction is Lotus-only.
|
||||
|
||||
### O3. Math / LaTeX (P4-4)
|
||||
|
||||
Send each and confirm rendering: `$x^2 + y^2$` (inline), `$$\int_0^1 f(x)\,dx$$` (block, centered), `$5 and $10 for lunch` (**stays plain text** — currency guard), and a code block containing `$x$` (**stays literal** inside the code block). **Expected:** the first two render as math (KaTeX); the last two are untouched. First math of the session may show the raw `$…$` for a beat while the KaTeX chunk lazy-loads, then renders.
|
||||
|
||||
### O4. Encrypted search cache (P4-8) — opt-in
|
||||
|
||||
In an **encrypted** room's message search, enable **"Persist search index on this device"** (Encrypted Rooms panel). Search, then **reload** and search the same term. **Expected:** coverage survives the reload (results without re-paginating everything). **Clear cached index** empties it. **Log out** → the cache is wiped (privacy). Toggling the setting OFF does **not** wipe (only Clear/logout do).
|
||||
|
||||
### O5. Session hardening (N97a) — cross-tab
|
||||
|
||||
1. Log in on a build that predates the change, then load this build → you stay logged in (legacy keys migrate to the `cinny_session_v1` blob; check DevTools → Application → Local Storage).
|
||||
2. Open the app in **two tabs**; **log out** in tab A → tab B reloads to the auth screen within a moment. Log in again in one tab → the other reloads too.
|
||||
|
||||
### O6. Audit-wave correctness fixes (AW-1)
|
||||
|
||||
- **Scheduled-message cancel:** schedule a message, then cancel it **with the network cut** (DevTools offline) → the item **stays** with an inline error (it does **not** silently disappear and still send). Restore network, retry → cancels cleanly.
|
||||
- **Escape coordination:** in a thread panel, open the mention autocomplete or set a reply draft, press **Escape** → it dismisses the autocomplete/reply **without** closing the panel. A bare Escape (nothing to dismiss) still marks the room read / closes the panel as before.
|
||||
- **Panel exclusivity:** on mobile, opening a thread while the media gallery (or members drawer) is open shows only **one** right panel (thread wins), not stacked fullscreen overlays.
|
||||
- **Emoji board (AW-2):** the **first** time you open the emoji board / autocomplete in a session, the grid **and search** populate with unicode emoji (they don't stay empty). Reactions still show a label.
|
||||
|
||||
### O7. Desktop (Tauri) — CSP tighten + native stack (AW-4) — 🖥️ desktop build only
|
||||
|
||||
The webview CSP was tightened and the full native module set now compiles. Smoke-test the desktop build:
|
||||
|
||||
1. App **boots**, avatars + media thumbnails load, the **VT323** terminal font renders (Lotus Terminal theme), a **location message** embeds its OpenStreetMap map, **calls** connect (EC iframe), **deep links** (`matrix:` / clicking a room link) navigate.
|
||||
2. **Native features:** minimize to tray (notifications still arrive), a message notification is a **rich toast** (click opens the room; reply box sends), the taskbar **Jump List** lists recent rooms, in a call the taskbar thumbnail shows **Mute/Deafen/End**, Windows **Focus Assist** silences Lotus.
|
||||
3. **Console** (desktop devtools) shows **no CSP violations** during normal use. If something visual/media is blocked, that's the CSP to loosen — note exactly what and where.
|
||||
|
||||
### O8. E2EE / call-key cluster (KE-1→4) — 👥 2 people, during a real call
|
||||
|
||||
We shipped the diagnostics kit + a **Crypto Diagnostics** card (**Settings → Developer Tools**). During your next call that glitches (audio cutouts, "Unable to decrypt"), open it and **Download report**, and note whether the symptoms even still occur now that we're on **matrix-js-sdk 41.7.0** (crypto-wasm 18.3.1). Send me the report; the KE-1..4 diagnosis + capture guidance is in `LOTUS_TODO.md` (Encryption / E2EE), with the full original runbook in git history.
|
||||
|
||||
---
|
||||
|
||||
## P. Accessibility (P3-4) — needs a browser + a screen reader
|
||||
|
||||
The compliance fixes are gate-verified in code; these confirm the runtime a11y behavior only a human + AT can check. Tools: browser DevTools "axe" extension / Lighthouse a11y, plus **VoiceOver** (macOS ⌘F5) or **NVDA** (Windows).
|
||||
|
||||
### P1. Keyboard-only golden path (no mouse)
|
||||
|
||||
Tab from page load: **skip-to-content** link appears first (Enter jumps to the timeline). Tab reaches the room list (rooms are focusable, active room announced), open a room (Enter), type a character → focus lands in the composer, send with Enter (or Shift+Enter per your `enterForNewline` setting). No keyboard trap; visible focus ring throughout.
|
||||
|
||||
### P2. `?` shortcuts dialog
|
||||
|
||||
Press **?** (Shift+/) with focus NOT in a text field → the keyboard-shortcuts dialog opens, is focus-trapped, Escape closes it and focus returns to where you were. Pressing `?` while typing in the composer/search inserts a literal `?` (does NOT open the dialog).
|
||||
|
||||
### P3. Screen-reader: reading messages
|
||||
|
||||
With VoiceOver/NVDA on, arrow through the timeline: each message is announced as an article with **sender name + time** — critically, this includes **collapsed messages** (consecutive messages from the same person), which previously announced only the body with no sender. Reactions, "edited", replies, and delivery status are announced with labels.
|
||||
|
||||
### P4. Screen-reader: live announcements
|
||||
|
||||
- **New message** arrives while you're reading → announced (polite).
|
||||
- **Someone starts typing** → "X is typing" announced once (not spammed per keystroke).
|
||||
- **Editing a message** → the edit box announces "Editing message from X".
|
||||
|
||||
### P5. Focus return from dialogs
|
||||
|
||||
Open then close (Escape or ×): the **room topic viewer**, a **reaction viewer** (click a reaction count), and **Search** → focus returns to the button/element you opened them from (not lost to `<body>`). Inline popouts (emoji picker, autocomplete, hover menus) intentionally keep focus in context — that's expected, not a bug.
|
||||
|
||||
### P6. axe / Lighthouse scan
|
||||
|
||||
Run the axe DevTools extension (or Lighthouse → Accessibility) on a room view, Settings, and the login screen. Expect **no critical/serious** "missing accessible name" or "ARIA" violations on the golden path. Report any that appear (note: far-scrolled timeline history being virtualized out is a known, accepted limitation — not a finding).
|
||||
|
||||
---
|
||||
|
||||
## Priority if you're short on time
|
||||
|
||||
1. **A4** (in-call banner) + **A3** (ringtone) — newest, most logic, hardest to reproduce.
|
||||
2. **B1–B3** (polls on a default theme) — the confirmed visual bug.
|
||||
3. **D** (EC 0.20.1 control sweep) — guards against the upstream merge breaking calls.
|
||||
4. **A7** false-positive check (normal joins don't show the error overlay).
|
||||
5. Everything else.
|
||||
1. **O1 + O2** (threads + per-thread notifications) — the largest new surface; the main-timeline change is user-visible.
|
||||
2. **O7** (desktop CSP smoke) — CI can't catch CSP breakage; a wrong directive silently breaks media/fonts/maps.
|
||||
3. **O5** (session cross-tab) + **O6** (scheduled-cancel ghost-send) — auth-critical + a real data-loss-class fix.
|
||||
4. **A4** (in-call banner) + **A3** (ringtone) — newest call logic, hardest to reproduce.
|
||||
5. **D** (EC control sweep) — guards against the fork breaking calls.
|
||||
6. Everything else.
|
||||
|
||||
---
|
||||
|
||||
## Outstanding verification backlog
|
||||
|
||||
_Ported from the retired `LOTUS_BUGS.md` (2026-07). Compact index of shipped-but-not-live-tested items; the detailed steps are in the lettered sections above._
|
||||
|
||||
Implemented and gate-green; confirm each per `LOTUS_TESTING.md`, then delete the row.
|
||||
|
||||
| ID | Item | File / area | Test |
|
||||
| :--- | :-------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| #2 | Chat-background animation flicker (`contain:paint`) | `lotus/chatBackground.ts` | F1 |
|
||||
| #4 | Ringtone re-fixes: classic loudness + caller decline notice (A2 ✓ live) | `CallEmbedProvider.tsx`, `ringtones.ts` | A1,A3,A4 |
|
||||
| #6 | Background vs. seasonal theme mutual exclusion | `state/settings.ts`, `General.tsx` | F2 |
|
||||
| #7 | Composer toolbar touch targets (≥44px) | `room/RoomInput.tsx` | E1 |
|
||||
| #8 | Room Settings horizontal overflow (mobile) | `components/page/style.css.ts` | E2 |
|
||||
| #9 | Modal fullscreen on mobile (`useModalStyle`) | 22+ modal files | E3 |
|
||||
| #10 | Composer not hidden by keyboard (`100dvh`) | `src/index.css` | E4 |
|
||||
| #12 | PiP "All muted" badge re-fixed (was firing on any single mute) | `hooks/useCallSpeakers.ts` | G1 |
|
||||
| N96 | Call-recovery overlay single "Back" button | `call/CallView.tsx` | A7 |
|
||||
| N95 | AFK-monitor mic released on mute (OS indicator clears) | `hooks/useAfkAutoMute.ts` | L1 |
|
||||
| N108 | Maskable PWA icons (Android adaptive) | `public/manifest.json` + `res/android/maskable-*` | L2 |
|
||||
| EC | EC iframe load watchdog + self-heal + recovery UI | `plugins/call/CallEmbed.ts`, `CallView.tsx` | A7 |
|
||||
| N105 | Notification clicks work after tab close (SW `notificationclick` + `showNotification`) | `sw.ts`, `utils/dom.ts`, `ClientNonUIFeatures.tsx` | get a msg notif, close the tab, click it → app focuses/opens + routes to the room |
|
||||
| Gal | MediaGallery lazy-decrypt (true virtualization deferred) | `room/MediaGallery.tsx` | H1 |
|
||||
| a11y | aria-labels: edit-history / reaction / thread / reply | `message/*` (`FallbackContent`, `Reaction`, `Reply`) | I |
|
||||
| P3-8 | Thread Panel (side drawer, chips, threaded receipts, thread composer) | `features/room/thread/*`, `RoomTimeline/RoomInput` | 6-step checklist in LOTUS_TODO §P3-8 |
|
||||
| P4-4 | KaTeX math (`$…$`, `$$…$$`, data-mx-maths; lazy chunk) | `utils/mathParse.ts`, `components/math/` | send `$x^2$`, `$$\int f$$`, `$5 and $10` (stays text), math inside code block (stays text) |
|
||||
| P4-8 | Encrypted-search cache (opt-in toggle, clear button, logout wipe) | `utils/searchCache.ts`, message-search | enable in search panel → search → reload → coverage persists; logout wipes |
|
||||
| N97a | Session blob migration + cross-tab logout sync | `state/sessions.ts`, `useSessionSync` | login on old build → new build migrates; logout in tab A → tab B drops to auth |
|
||||
| P4-1 | Slack-style thread notifications (participating default, All/Mentions/Mute, badge math) | `utils/threadNotifications.ts`, `ClientNonUIFeatures`, `roomToUnread` | 6-step checklist in LOTUS_TODO §P4-1 |
|
||||
| AW-1 | Scheduled-message cancel no longer ghost-sends (error row on failure) | `ScheduledMessagesTray.tsx` | schedule → cancel with network cut → item stays + error; retry works |
|
||||
| AW-2 | Emoji lazy-load (search/autocomplete/recents fill in; board opens fast) | `plugins/emoji.ts` + consumers | first emoji-board open of a session: grid+search populate; reactions still label |
|
||||
| AW-3 | SW precache (repeat-visit near-instant; deploys still picked up immediately) | `sw.ts`, `vite.config.js` | load app twice (2nd = cached assets); deploy → reload picks new version |
|
||||
| AW-4 | Desktop CSP tighten + Escape/panel fixes + thread Jump to Latest | `tauri.conf.json`, Room/ThreadPanel | desktop: boots, avatars/media load, VT323 font renders, location maps embed, calls connect, deep links work |
|
||||
| P3-4 | Accessibility compliance pass (collapsed-msg SR sender, form/overlay labels, typing announce, focus-return, `?` help, jsx-a11y CI gate) | `message/*`, `RoomViewTyping`, `features/shortcuts/*`, `eslint.config.mjs` | LOTUS_TESTING §P — axe-core + VoiceOver/NVDA on the golden path |
|
||||
| P6-1 | Desktop Linux parity (no-sleep in calls, launcher badge), autostart toggle, tray Do-Not-Disturb | `native/power.rs`, `lib.rs`, `useTauriDnd`, `General.tsx` | Linux desktop: no display sleep during a call; tray DND silences notifications; launch-on-login persists; Unity badge (Ubuntu); DND toggle polarity |
|
||||
| P6-2 | EC deafen/screenshare-audio-mute via `io.lotus.set_deafen` (retires the `<audio>.muted` iframe hack) | fork `lotusDeafen.ts`, cinny `CallControl.ts` | AFTER publish+pin-bump: deafen silences remote audio + survives a reconnect / new screenshare / late joiner (the cases the DOM hack failed); screenshare-audio-mute toggles independently |
|
||||
| P6-3 | Forward-to-multiple-rooms (multi-select + partial-failure summary) + live bookmark previews (edits/redactions, snapshot fallback) | `ForwardMessageDialog.tsx`+`forwardContent.ts`, `BookmarksPanel.tsx` | forward one msg to 3 rooms (incl. 1 you cannot post to = partial summary); bookmark then edit shows edited; redact shows deleted; leave room shows snapshot |
|
||||
| P6-4 | HSTS + Permissions-Policy on prod nginx (+ contrib examples) | `matrix/cinny/nginx.conf`, `contrib/nginx`, `contrib/caddy` | after `nginx -s reload`: `curl -sI https://chat.lotusguild.org` shows HSTS + Permissions-Policy; a call (cam/mic/screenshare) + location share still work |
|
||||
|
||||
**Verified working in live testing (2026-06):** A2, B1–B4, C1, C3, D (mic/camera/deafen/screenshare/fullscreen/more-menu/PiP). Denoise quality in D is still poor — tracked under the denoise project, not a regression.
|
||||
|
||||
---
|
||||
|
||||
+219
-17
@@ -35,7 +35,7 @@ Completed features are documented in [LOTUS_FEATURES.md](./LOTUS_FEATURES.md).
|
||||
|
||||
## ✅ Done — Awaiting Verification
|
||||
|
||||
Built and gate-green; verify per [LOTUS_TESTING.md](./LOTUS_TESTING.md), then they graduate to LOTUS_FEATURES.md. (Bug-side fixes awaiting verification live in LOTUS_BUGS.md.)
|
||||
Built and gate-green; verify per [LOTUS_TESTING.md](./LOTUS_TESTING.md), then they graduate to LOTUS_FEATURES.md. (Open bugs + the verification backlog now live in this file and LOTUS_TESTING.md.)
|
||||
|
||||
| Feature | Test guide |
|
||||
| :-------------------------------------------------------------------------------- | :---------------- |
|
||||
@@ -141,7 +141,12 @@ Status: `[ ]` pending · `[~]` in progress · `[x]` completed
|
||||
|
||||
## Priority 3 — Higher complexity / lower daily frequency
|
||||
|
||||
### [ ] P3-4 · Accessibility Improvements (WCAG 2.1 AA)
|
||||
### [~] P3-4 · Accessibility Improvements (WCAG 2.1 AA) — COMPLIANCE PASS DONE (2026-07), ⚠️ AWAITING LIVE AXE/SR AUDIT
|
||||
|
||||
**Shipped (compliance + shortcuts-help tier):** messages `role="article"` + collapsed-message sender/time announced to AT (the biggest gap — collapsed rows had no sender for a screen reader); ~10 unlabeled form inputs + Media Gallery / Search overlays named; emoji/emoticon aria-labels; typing indicator now announced via a `role="status"` live region; editing a message announces "Editing message from X"; focus now returns to the trigger on close of 4 genuine dialogs (RoomIntro/Reactions/RoomViewHeader-topic/Search — inline popouts correctly left); a `?` keyboard-shortcuts help dialog; and a **jsx-a11y lint gate** (curated ARIA-correctness + label rules, enforced in CI) to prevent regressions. Already-good before this pass: skip link + landmarks, timeline `role="log"`/`aria-live`, ~99% icon-button labels, labeled editor.
|
||||
**DEFERRED (documented):** virtualization keeps scrolled-away history out of the a11y tree (architectural; the live-region announces newly-arriving messages) — not re-architected to avoid perf regression; roving-tabindex + command palette + section-jump shortcuts (user-deferred); the live axe-core / VoiceOver+NVDA audit → LOTUS_TESTING §P.
|
||||
|
||||
_Original scope (for reference):_
|
||||
|
||||
**What:** Comprehensive audit and fix pass targeting the critical user paths:
|
||||
|
||||
@@ -167,13 +172,14 @@ Status: `[ ]` pending · `[~]` in progress · `[x]` completed
|
||||
Built per the design below (4-agent build + 2-agent review). Gates green (tsc/eslint/build/tests). **Release note: threaded replies no longer render inline in the main timeline — roots show a "N replies" chip that opens the panel.**
|
||||
|
||||
**Manual QA checklist (post-deploy):**
|
||||
|
||||
1. Reply in Thread (message menu) → panel opens; send text/upload/emoji into it (appears pending → confirmed)
|
||||
2. Reply to a reply inside the panel → event carries `m.thread` + `m.in_reply_to` with `is_falling_back:false`
|
||||
3. Main timeline: root + chip only (replies absent); chip count/time updates live; unread badge appears for others' thread replies and clears after viewing the panel
|
||||
4. Room badge clears via normal markAsRead even with unread threads (unthreaded receipt)
|
||||
5. Reload: partitioning persists; encrypted-room threads decrypt (back-pagination too)
|
||||
6. Escape / × closes; mobile = fullscreen panel; switching rooms and back restores the open thread
|
||||
**What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.
|
||||
**What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.
|
||||
|
||||
Features:
|
||||
|
||||
@@ -209,23 +215,23 @@ Features:
|
||||
**What:** Replace the manual "load more" button with an automated, virtualized infinite scroll for search results.
|
||||
**Status:** Done in a prior session — `MessageSearch.tsx` already uses `useVirtualizer` (~line 336) over the result groups AND auto-fetches the `nextToken` page when the last virtual item scrolls into view (~line 469) via `useInfiniteQuery`. Nothing left to build.
|
||||
|
||||
### [ ] P4-8 · Encrypted Message Search Indexing & Caching
|
||||
### [~] P4-8 · Encrypted Message Search Indexing & Caching — IMPLEMENTED (2026-07), opt-in
|
||||
|
||||
**What:** Implement a persistent local cache for search results, optimized for encrypted rooms.
|
||||
**Approach:** Use `IndexedDB` to store search metadata (event IDs, timestamps) to prevent redundant server-side decryption/fetching.
|
||||
**Shipped:** `src/app/utils/searchCache.ts` — raw-IndexedDB per-room index (`lotus-search-cache`) of decrypted search rows + coverage markers, merged into local search (in-memory-wins dedupe). **Opt-in, default OFF** (stores plaintext at rest) with a privacy note, Clear button, and logout wipe. Awaiting live QA (LOTUS_TESTING outstanding-verification backlog).
|
||||
|
||||
### [~] P4-1 · Thread Notification Mode Per-Thread — IMPLEMENTED (2026-07), ⚠️ AWAITING LIVE QA
|
||||
|
||||
**Shipped (Slack-style):** default = **Participating** (notified only for threads you've posted in or where you're @mentioned); per-thread override **All / Mentions-only / Mute** via the bell menu in the thread panel header; modes sync across devices (`io.lotus.thread_notifications` account data, pruned on write). Mute also suppresses the chip badge and subtracts the thread from the room's sidebar badge (client-side). Also fixed the underlying path: thread replies are notified via exactly one handler (room-level `ThreadEvent.NewReply`), with the main-timeline notifier + unread binder thread-guarded, and live badge refresh on `RoomEvent.UnreadNotifications`.
|
||||
|
||||
**Manual QA checklist (post-deploy):**
|
||||
|
||||
1. Friend replies in a thread YOU posted in → notification + sound; in a thread you never touched → silent (chip badge only)
|
||||
2. @mention in any thread → notified regardless of participation
|
||||
3. Set a thread to Mute → no notifications, chip badge gone (bell-mute glyph), room sidebar badge drops by that thread's count
|
||||
4. Set to All → every reply notifies; Mentions-only → only @mentions
|
||||
5. Second device shows the same per-thread modes (account-data sync)
|
||||
6. Room-level Mute still silences everything incl. thread overrides
|
||||
**Known caveats:** Mentions-only can under-notify in E2EE rooms (decision runs pre-decryption — same class as the existing notifier); muted-thread badge subtraction is Lotus-only (other clients still count them).
|
||||
**Known caveats:** Mentions-only can under-notify in E2EE rooms (decision runs pre-decryption — same class as the existing notifier); muted-thread badge subtraction is Lotus-only (other clients still count them).
|
||||
|
||||
---
|
||||
|
||||
@@ -310,7 +316,7 @@ Features:
|
||||
|
||||
**What:** High-end background noise cancellation using a pre-trained ML model (RNNoise) running in the browser. Removes dogs, fans, and keyboard clicks from the mic stream.
|
||||
**Shipped:** 3-tier setting (Off / Browser-native / ML) in Settings → General → Calls.
|
||||
**🔱 [EC-FORK] DONE — moved in-source (2026-06).** ML denoise is now a first-class audio stage **inside** the forked Element Call: a LiveKit `TrackProcessor<Audio>` activated by `lotusDenoiseSource=1` (cinny sets it when ML is selected). The old build-time `getUserMedia`/`index.html` monkeypatch is **removed**. Because EC re-runs the processor on every (re)publish, denoise now **survives reconnects and mic-device switches** — this is the A7 fix (see `LOTUS_BUGS.md` A7, `LOTUS_TESTING.md` §D2-1). The processor degrades to the raw mic rather than going silent.
|
||||
**🔱 [EC-FORK] DONE — moved in-source (2026-06).** ML denoise is now a first-class audio stage **inside** the forked Element Call: a LiveKit `TrackProcessor<Audio>` activated by `lotusDenoiseSource=1` (cinny sets it when ML is selected). The old build-time `getUserMedia`/`index.html` monkeypatch is **removed**. Because EC re-runs the processor on every (re)publish, denoise now **survives reconnects and mic-device switches** — this is the A7 fix (see `LOTUS_TESTING.md` §D2-1). The processor degrades to the raw mic rather than going silent.
|
||||
**Key decision:** LiveKit's Krisp filter is LiveKit-Cloud-only (we self-host the SFU); EC's own RNNoise PR #3892 is unmerged. Owning the fork let us implement the in-source stage directly.
|
||||
|
||||
**Models — all in-source in the fork:**
|
||||
@@ -418,10 +424,11 @@ Features:
|
||||
**Decision:** Deferred (reviewed 2026-07). Multi-sprint, and it touches the auth/crypto/storage core — not worth the risk/effort for a niche need right now. Kept here with a concrete spec so it's actionable later.
|
||||
|
||||
**Future-work spec (why it's big):** the app is currently **single-session**.
|
||||
|
||||
- Session lives in `src/app/state/sessions.ts` under fixed localStorage keys — `cinny_access_token`, `cinny_device_id`, `cinny_user_id`, `cinny_hs_base_url`, plus the OIDC keys (`cinny_refresh_token`, `cinny_expires_at`, `cinny_oidc_*`).
|
||||
- Persistence lives in `src/client/initMatrix.ts`: two fixed IndexedDB stores — `web-sync-store` (`IndexedDBStore`) and `crypto-store` (`IndexedDBCryptoStore`) — feeding one `createClient(...)`.
|
||||
|
||||
True per-context isolation would require: (1) namespace every localStorage key per context (`ctx:<id>:cinny_*`); (2) per-context IndexedDB dbNames for **both** the sync store and the crypto store; (3) a context registry + switcher UI (create/rename/delete/switch); (4) full client teardown + re-init on switch (`initMatrix` currently assumes one global client); (5) per-context settings + notification/quiet-hours state; (6) careful crypto-store isolation so device keys never bleed across contexts. **Smaller intermediate step** if demand appears: plain multi-account (fast account switch) *without* the hard isolation boundary — much less risky, reuses most of the login flow.
|
||||
True per-context isolation would require: (1) namespace every localStorage key per context (`ctx:<id>:cinny_*`); (2) per-context IndexedDB dbNames for **both** the sync store and the crypto store; (3) a context registry + switcher UI (create/rename/delete/switch); (4) full client teardown + re-init on switch (`initMatrix` currently assumes one global client); (5) per-context settings + notification/quiet-hours state; (6) careful crypto-store isolation so device keys never bleed across contexts. **Smaller intermediate step** if demand appears: plain multi-account (fast account switch) _without_ the hard isolation boundary — much less risky, reuses most of the login flow.
|
||||
**Priority:** Extreme Low (Multi-sprint/Architectural).
|
||||
|
||||
### [DROPPED] P5-52 · Desktop — Room-Level Sync Governor (Performance Control)
|
||||
@@ -502,6 +509,66 @@ Check back after each Synapse upgrade — re-run `/matrix/client/versions` and `
|
||||
|
||||
---
|
||||
|
||||
## Priority 6 — Post-audit batches (2026-07)
|
||||
|
||||
Buildable follow-ups surfaced by the deep-audit wave. Web Push (N107) deliberately deferred. **macOS is out of scope for all of these — Linux is the parity target (Windows already has most native features).**
|
||||
|
||||
### [~] P6-1 · Desktop — cross-platform parity (Linux + Windows; NO macOS) — IMPLEMENTED (2026-07); native CI-compile-pending, runtime-verify on Linux
|
||||
|
||||
From the desktop audit. Round out the native app now that the full Rust stack compiles:
|
||||
|
||||
- **No-sleep during calls on Linux** — `power.rs` is Windows-only (`SetThreadExecutionState`); add a Linux inhibitor (`org.freedesktop.login1.Manager.Inhibit` / ScreenSaver inhibit via zbus/D-Bus) so the display/system doesn't sleep mid-call.
|
||||
- **Taskbar/launcher unread badge on Linux** — `set_badge_count` is Windows-only; add Unity/`com.canonical.Unity.LauncherEntry` (D-Bus) count where supported.
|
||||
- **Launch-on-login** — add `tauri-plugin-autostart` (cross-platform) + a Settings/tray toggle.
|
||||
- **Tray "Do Not Disturb" toggle** — the tray menu is Open/Quit only; add a DND item (reuses the Focus-Assist suppression atom path) so users can silence notifications from the tray.
|
||||
CI-compile-verified (Windows + Linux runners); no local Rust.
|
||||
|
||||
### [~] P6-2 · Element Call fork — retire the remaining DOM hacks — DEAFEN DONE (2026-07), Phase-2 pending publish
|
||||
|
||||
**Shipped (Phase 1):** new `io.lotus.set_deafen` action in the fork (`lotusDeafen.ts`) sets remote `RemoteParticipant.setVolume` per source (mic + screenshare-audio), persisting to late joiners — replaces the brittle `CallControl.setSound`/`applyScreenshareAudioMuted` `<audio>.muted` iframe-DOM hack. cinny now sends it (join-gated) alongside the retained DOM hack (transitional). Folded into unpublished fork `0.20.1-lotus.2`.
|
||||
**Phase 2 (needs user publish):** publish `0.20.1-lotus.2` to npm → bump cinny pin `lotus.1`→`lotus.2` → delete the DOM `.muted` code. See HANDOFF §12.4.
|
||||
**DEFERRED (rationale):** the `useCallSpeakers` DOM-scrape is a dormant _fallback_ behind `io.lotus.call_state` (deleting only removes the safety net); the `.click()`-by-`data-testid` UI toggles (screenshare/grid/spotlight/reactions/settings) are low-value and would balloon fork surface for buttons that just trigger EC's own UI.
|
||||
**Divergence:** deafen doesn\'t silence soundboard/`Unknown`-source audio (setVolume type limit) — confirm UX.
|
||||
|
||||
_Original scope below._
|
||||
|
||||
### [ ] P6-2b · Element Call fork — remaining DOM hacks (deferred pieces)
|
||||
|
||||
Replace cinny's fragile iframe-`contentDocument` reaches with proper `io.lotus.*` widget actions in the fork (`LotusGuild/element-call`), which break on EC re-renders/version bumps:
|
||||
|
||||
- **Deafen / screenshare-audio-mute** → an `io.lotus` action that mutes/attenuates `RemoteAudioTrack`s at the LiveKit source (replaces `CallControl.ts` `setSound`/`applyScreenshareAudioMuted` DOM `.muted` poking).
|
||||
- **UI-toggle actions** (screenshare/spotlight/reactions/settings) → replace the `.click()`-by-`data-testid` calls.
|
||||
- Retire the `useCallSpeakers` DOM-scrape fallback once `io.lotus.call_state` is verified.
|
||||
Fork commits are local (coordinator); publishing needs the user's npm token.
|
||||
|
||||
### [~] P6-3 · Web UX wins - DONE (2026-07): forward multi-select + live bookmark previews
|
||||
|
||||
**Shipped:** Forward Message multi-select (checkbox rooms + "Send to N", batch `Promise.allSettled` with partial-failure summary; content builder extracted to tested `forwardContent.ts`). Live bookmark previews (`BookmarksPanel` renders the live event via `useRoomEvent` - edits + redactions - snapshot as fallback / left-room). Both `lotus`, gate-green (665 tests).
|
||||
|
||||
_Original scope:_
|
||||
|
||||
### [ ] P6-3-orig · Web UX wins (from the audit ADD list)
|
||||
|
||||
- **Forward to multiple rooms** — multi-select (checkbox + "Send to N") in `ForwardMessageDialog` (currently one room per open, capped at 60).
|
||||
- **Live bookmark previews** — `BookmarksPanel` shows a stale snapshot captured at save time; resolve live from the event when cached (edits/redactions), fall back to the snapshot.
|
||||
- Other small paper-cuts as scoped.
|
||||
|
||||
### [~] P6-4 · Hygiene sweep - TRIMMED (2026-07): security headers only
|
||||
|
||||
**Shipped:** HSTS + Permissions-Policy on the real prod nginx (`matrix/cinny/nginx.conf`, already had X-Frame/CSP/Referrer) + synced the `contrib/nginx` + `contrib/caddy` examples (also fixed the caddy `try_files` SPA fallback). Permissions-Policy allows `self` for the features the app uses (camera/mic/display-capture/geolocation/autoplay/fullscreen), denies unused. **User must `nginx -s reload` on the LXC + verify calls/location still work.**
|
||||
**WON'T-DO (rationale):** patch-package migration - the current `patch-folds.mjs` is already robust (fails hard on drift) and patch-package would be more brittle to folds restructuring; `types/matrix` drift - risky spot-fixes with no concrete bug; build-config streamlining - build is already ~5s. Known follow-up: nginx `add_header` isn't inherited by the cache `location` blocks (pre-existing; the SPA entry `/` still gets all headers, so HSTS is delivered).
|
||||
|
||||
_Original scope:_
|
||||
|
||||
### [ ] P6-4-orig · Hygiene sweep
|
||||
|
||||
- `patch-folds.mjs` (edits `node_modules` directly) → `patch-package`.
|
||||
- `contrib/nginx` + `contrib/caddy`: security headers (HSTS/CSP), `try_files` over rewrites, fix the caddy placeholder path.
|
||||
- `types/matrix/` drift (mirrors SDK types) — spot-fix the highest-risk.
|
||||
- Build-config: streamline `lotusDenoise` sequential `fs` work + redundant `viteStaticCopy` renames.
|
||||
|
||||
---
|
||||
|
||||
## 📚 Implementation Reference
|
||||
|
||||
Exhaustive, low-level implementation details for backlog items. Follow these patterns to ensure code is "Lotus-perfect" (idiomatic, performant, and TDS-compliant).
|
||||
@@ -510,20 +577,22 @@ Exhaustive, low-level implementation details for backlog items. Follow these pat
|
||||
|
||||
**Decisions (each backed by SDK evidence in node_modules/matrix-js-sdk):**
|
||||
|
||||
| Question | Decision |
|
||||
|---|---|
|
||||
| Thread rendering | **New lean `ThreadTimeline`** reusing `Message`, `useVirtualPaginator`, and RoomTimeline's exported timeline helpers (lines 156-227). Do NOT refactor 2214-line RoomTimeline (its ~35 hooks are hardwired to the room live timeline). |
|
||||
| threadSupport | **Enable `threadSupport: true`** in `initMatrix.ts` (~line 39). ⚠️ Thread replies then LEAVE the main timeline (`room.js eventShouldLiveIn` → `shouldLiveInRoom:false`), retroactively on reload — MUST ship the "N replies" summary chip in the same release. Roots stay in both timelines. |
|
||||
| State | `roomIdToActiveThreadIdAtomFamily` (per-room, mirrors `roomIdToReplyDraftAtomFamily`) in new `state/room/thread.ts` + `getThreadDraftKey(roomId, threadRootId)` = `` `${roomId}::${threadRootId}` `` |
|
||||
| Composer | **Reuse RoomInput**: add optional `threadRootId` prop; scope its 3 atom-family lookups by draftKey (isolates thread drafts from the main composer); pass `threadRootId ?? null` at all 7 `mx.sendMessage/sendEvent` call sites — the SDK's `addThreadRelationIfNeeded` then emits spec-correct `m.thread` relations incl. reply-in-thread. Separate `useEditor()` instance in the panel. Hide schedule + commands in thread mode v1. |
|
||||
| Unreads | v1 = unread badge on the summary chip (`room.getThreadUnreadNotificationCount` — counts already synced independent of threadSupport) + `markThreadAsRead` threaded receipt when panel open at bottom. |
|
||||
| Mobile | Pure CSS like `MembersDrawer.css.ts`: fixed width toRem(360) desktop, `position:fixed; inset:0` under 750px. |
|
||||
| Question | Decision |
|
||||
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| Thread rendering | **New lean `ThreadTimeline`** reusing `Message`, `useVirtualPaginator`, and RoomTimeline's exported timeline helpers (lines 156-227). Do NOT refactor 2214-line RoomTimeline (its ~35 hooks are hardwired to the room live timeline). |
|
||||
| threadSupport | **Enable `threadSupport: true`** in `initMatrix.ts` (~line 39). ⚠️ Thread replies then LEAVE the main timeline (`room.js eventShouldLiveIn` → `shouldLiveInRoom:false`), retroactively on reload — MUST ship the "N replies" summary chip in the same release. Roots stay in both timelines. |
|
||||
| State | `roomIdToActiveThreadIdAtomFamily` (per-room, mirrors `roomIdToReplyDraftAtomFamily`) in new `state/room/thread.ts` + `getThreadDraftKey(roomId, threadRootId)` = `` `${roomId}::${threadRootId}` `` |
|
||||
| Composer | **Reuse RoomInput**: add optional `threadRootId` prop; scope its 3 atom-family lookups by draftKey (isolates thread drafts from the main composer); pass `threadRootId ?? null` at all 7 `mx.sendMessage/sendEvent` call sites — the SDK's `addThreadRelationIfNeeded` then emits spec-correct `m.thread` relations incl. reply-in-thread. Separate `useEditor()` instance in the panel. Hide schedule + commands in thread mode v1. |
|
||||
| Unreads | v1 = unread badge on the summary chip (`room.getThreadUnreadNotificationCount` — counts already synced independent of threadSupport) + `markThreadAsRead` threaded receipt when panel open at bottom. |
|
||||
| Mobile | Pure CSS like `MembersDrawer.css.ts`: fixed width toRem(360) desktop, `position:fixed; inset:0` under 750px. |
|
||||
|
||||
**Critical side-effect fixes (one-liners, land FIRST):**
|
||||
|
||||
1. `initMatrix.ts` → `threadSupport: true`.
|
||||
2. `utils/notifications.ts:24` → `sendReadReceipt(latestEvent, type, /*unthreaded*/ true)` — otherwise markAsRead becomes `main`-scoped and room badges stick permanently unread (room unread total includes thread counts).
|
||||
|
||||
**Known SDK traps (verified):**
|
||||
|
||||
- **Local echo gap:** chronological pending ordering means the thread timelineSet never receives pending events (`canContain` rejects; `room.getPendingEvents()` THROWS in this mode) — ThreadTimeline must render its own pending strip via `RoomEvent.LocalEchoUpdated` filtering on `threadRootId`, deduped against `thread.findEventById`.
|
||||
- **Bootstrap:** `room.getThread(id) ?? room.createThread(id, room.findEventById(id), [], false)` — the SDK auto-fetches via `/relations` and inserts the root at top; gate rendering on `thread.initialEventsFetched`; decrypt with `decryptAllTimelineEvent` after init + each pagination.
|
||||
- **Deep links:** `getEventTimeline(mainSet, threadEventId)` returns undefined for thread events — redirect jump-to-event to the panel (best-effort v1).
|
||||
@@ -757,3 +826,136 @@ edit → commit → git push origin lotus
|
||||
- **Synapse (Matrix):** LXC 151 on `compute-storage-01` — `pct exec 151 -- bash`
|
||||
- **Config:** `/etc/matrix-synapse/homeserver.yaml`
|
||||
- **Version check:** `curl -s https://matrix.lotusguild.org/_matrix/client/versions`
|
||||
|
||||
---
|
||||
|
||||
## Element Call fork — operational reference
|
||||
|
||||
_Ported from the retired `HANDOFF_ELEMENT_CALL_FORK.md` (2026-07; full history in git). The fork lives at `LotusGuild/element-call` (branch `lotus`, forked from upstream tag `v0.20.1`); cinny consumes it as the npm package `@lotusguild/element-call-embedded`, whose built bundle is copied into `public/element-call/`._
|
||||
|
||||
**Publish a new fork version (manual; needs the Gitea npm token):**
|
||||
|
||||
1. In the fork, bump `embedded/web/package.json` version (current unpublished: `0.20.1-lotus.2`).
|
||||
2. Build: `pnpm run build:embedded` (Node 24, pnpm 10.33.0; output → repo `dist/`, staged into `embedded/web/dist`).
|
||||
3. `cd embedded/web && npm version <tag> --no-git-tag-version && npm publish` to the Gitea registry (`code.lotusguild.org`). Publicly readable; only publishing needs the token.
|
||||
4. In cinny: bump the `@lotusguild/element-call-embedded` pin (`package.json`, currently `0.20.1-lotus.1`) → the new version, `npm install`, build.
|
||||
|
||||
**`io.lotus.*` widget actions (fork ↔ cinny host):**
|
||||
| Action | Direction | Purpose | Fork module |
|
||||
| :-- | :-- | :-- | :-- |
|
||||
| `io.lotus.call_state` | EC→host | speaker/mute/camera state stream (URL `lotusCallState=1`) | `lotusCallState.ts` |
|
||||
| `io.lotus.focus_participant` | host→EC | spotlight a participant (works during screenshare) | `lotusFocus.ts` |
|
||||
| `io.lotus.inject_audio` | host→EC | soundboard clip mixed into the call (URL `lotusAudioInject=1`) | `lotusAudioInject.ts` |
|
||||
| `io.lotus.set_quality` | host→EC | audio/screenshare bitrate/fps caps | `lotusQuality.ts` |
|
||||
| `io.lotus.decorations` | host→EC | in-call avatar decorations | `lotusDecorations.ts` |
|
||||
| `io.lotus.set_deafen` | host→EC | deafen / screenshare-audio-mute at the LiveKit source (P6-2) | `lotusDeafen.ts` |
|
||||
|
||||
Also flag-gated (URL params): `lotusTransparent`/`lotusTheme` (theme), `lotusDenoiseSource=1` (in-source ML denoise). New toWidget actions must be added to the enum + `LOTUS_TO_WIDGET_ACTIONS` in `src/lotus/lotusActions.ts` and only SENT after call-join (else a 10s timeout). **P6-2 phase 2 pending:** after publishing lotus.2, bump the cinny pin + delete the `CallControl.ts` `<audio>.muted` fallback.
|
||||
|
||||
---
|
||||
|
||||
## 🔴 Open — Actionable
|
||||
|
||||
### 🧨 Encryption / E2EE — ⚠️ EXTREME COMPLEXITY · 🧠 PLANNING SESSION REQUIRED · 👤 SENIOR ENGINEER
|
||||
|
||||
> 🧰 **Investigation kit ready (2026-07):** `LOTUS_E2EE_INVESTIGATION.md` (git history)
|
||||
> has the per-KE capture runbook (console signatures, synapse-side queries, the
|
||||
> KE-1→KE-2 causality decision tree, ranked remediations), and the client now
|
||||
> ships a **Crypto Diagnostics** capture helper (Settings) — run it during the
|
||||
> next affected call and download the report before starting any fix.
|
||||
|
||||
> **Observed live in prod 2026-06-30** on `chat.lotusguild.org` during a 2-person
|
||||
> **Element Call** (E2EE enabled). These span **client rust-crypto (via
|
||||
> `matrix-js-sdk@41.6.0-rc.0`) ↔ Synapse ↔ Element Call's MatrixRTC E2EE** and are
|
||||
> very likely **interrelated** (see KE-1 → KE-2). Do **not** spot-fix — they need
|
||||
> a dedicated cross-system planning session with the homeserver owner. Capture
|
||||
> full client console + a synapse-side trace for the same call before starting.
|
||||
> **None of these are caused by the EC fork work** (the issues reproduce on the
|
||||
> old build; the local mic/denoise path is unrelated to key distribution).
|
||||
|
||||
- **KE-1 — One-time-key (OTK) upload conflict storm (CRITICAL, root-cause candidate).**
|
||||
`POST /_matrix/client/v3/keys/upload` returns `400 M_UNKNOWN: One time key
|
||||
signed_curve25519:AAAAAAAAAGQ already exists. Old key: {…} new key: {…}` —
|
||||
firing **continuously** (many/sec). The client repeatedly tries to publish an
|
||||
OTK at a key id the server already holds **with a different value**, i.e. the
|
||||
rust-crypto key store and Synapse have **diverged OTK state**. Impact: floods
|
||||
the crypto outgoing-request loop and is the prime suspect for the downstream
|
||||
missing-key failures (no fresh OTKs ⇒ no new Olm sessions ⇒ undecryptable
|
||||
to-device key events). _Investigate:_ device/key-store reset-or-restore
|
||||
mismatch, OTK id-counter desync, RC-SDK (`41.6.0-rc.0`) regression, or a
|
||||
Synapse OTK bug. Repro signature: grep console for `already exists`.
|
||||
**Extreme — planning session.**
|
||||
**Update 2026-07 (investigation §6):** upstream `matrix-rust-sdk#5200` (still
|
||||
OPEN) confirms the mechanism — on the 400, `mark_request_as_sent()` never fires
|
||||
so the SDK re-issues the identical upload forever. **`41.7.0` does NOT fix it**
|
||||
(crypto-wasm 17→18.3.1 has no OTK/upload change; 18.3.x was to-device security
|
||||
only) — the SDK-pin lever is closed. Root cause = **store↔server OTK
|
||||
divergence**; the leading **web-specific** trigger is that cinny never calls
|
||||
**`navigator.storage.persist()`**, so the IndexedDB crypto store is evictable
|
||||
while the `localStorage` session/device-id survives → device resurrects with a
|
||||
blank store → re-uploads OTKs the server still holds. **Actionable preventive
|
||||
fix (buildable now, no call needed):** request persistent storage on login
|
||||
(+ optional multi-tab guard + 400-loop→recovery-prompt). Healing an already-
|
||||
diverged device still needs a clean **logout+login** (not just "clear
|
||||
storage"). Full runbook (synapse SQL, capture checklist, §6 diagnosis) is in git history at `LOTUS_E2EE_INVESTIGATION.md` (removed 2026-07).
|
||||
|
||||
- **KE-2 — Element Call media keys not arriving/decrypting → audio & video cut out (CRITICAL).**
|
||||
`MissingKey: missing key at index N for participant @user`, `skipping decryption
|
||||
due to missing key`, `MissingKey: key set not found for @user at index 0`, and
|
||||
rust-crypto `WARN … Received an unexpected encrypted to-device event …
|
||||
event_type="io.element.call.encryption_keys"`. EC distributes per-participant
|
||||
media keys as **encrypted to-device `io.element.call.encryption_keys`** events;
|
||||
these aren't being received/decrypted in order, so remote LiveKit audio/video
|
||||
can't be decrypted — **this is the "friend's audio cuts out occasionally"
|
||||
symptom.** Almost certainly downstream of **KE-1** (broken Olm sessions). Spans
|
||||
EC's MatrixRTC E2EE + rust-crypto to-device + Synapse. **Extreme — planning
|
||||
session.**
|
||||
|
||||
- **KE-3 — Timeline decryption error: missing `algorithm` field (HIGH).**
|
||||
`Error decrypting event (… type=m.room.encrypted …): DecryptionError[msg:
|
||||
missing field 'algorithm' at line 1 column 138 …]`. A malformed/legacy
|
||||
encrypted event (or a serialization mismatch in the RC SDK) that rust-crypto
|
||||
can't parse. Lower frequency than KE-1/2 but a distinct decode-path failure —
|
||||
capture the offending event id (`$SASBBzoqj…` seen) and inspect its raw content.
|
||||
|
||||
- **KE-4 — MatrixRTC delayed-event / membership timeouts (MEDIUM-HIGH, reliability).**
|
||||
`[MembershipManager] Network local timeout error while sending event, immediate
|
||||
retry … AbortError: Restart delayed event timed out before the HS responded`,
|
||||
with repeated `org.matrix.msc4157.update_delayed_event`. MSC4140/4157
|
||||
delayed-event reliability against `matrix.lotusguild.org` — can cause stale/ghost
|
||||
call membership and missed leave events. May be partly **homeserver
|
||||
responsiveness**; correlate with synapse latency/load. Include in the same
|
||||
planning session since it shares the call-reliability + HS-interaction surface.
|
||||
|
||||
### Security & Privacy
|
||||
|
||||
- **N97 — Access token stored in plaintext `localStorage`** (`state/sessions.ts`), vulnerable to XSS; device ID likewise. Architectural — needs a token-protection / session-storage redesign.
|
||||
- ~~**Session writes are non-atomic and not cross-tab synced**~~ — **done (2026-07):** atomic single-key `cinny_session_v1` blob (legacy-key migration + dual-write) + `subscribeSessionChanges`/`useSessionSync` cross-tab reload. (The plaintext-token concern in N97 above is the remaining, separate architectural item.)
|
||||
- **Persisted PII without encryption:** user status message + expiry (`settings/account/Profile.tsx`), unsent composer drafts (`room/RoomInput.tsx`). Leak risk on shared devices.
|
||||
|
||||
### PWA / Offline / Notifications
|
||||
|
||||
- **N107 — SW has no `push` handler** — Web Push delivery is entirely non-functional. Needs a `push` listener + a Matrix push-gateway integration.
|
||||
- **No app-asset caching strategy** (`src/sw.ts`) — no offline capability.
|
||||
- ~~**`manifest: false`** may block PWA install~~ — **verified OK (2026-06):** `index.html` links `/manifest.json`, which exists in `public/` and is copied to `dist/`; VitePWA intentionally doesn't generate one. Not a bug.
|
||||
|
||||
### Dependencies & Build
|
||||
|
||||
- ~~**`matrix-js-sdk` pinned to a Release Candidate**~~ — **done (2026-07):** moved to `41.7.0` stable (crypto-wasm 18.3.1 security bump). Deep-audit dep triage: all 16 npm advisories are dev-only/unreachable/dead-dep — zero shipped exposure; dead `dompurify` removed. `@atlaskit`/build-tool pins remain review-worthy but low priority.
|
||||
- **Build-time overhead:** `lotusDenoise` does heavy sequential `fs` work in `closeBundle`; `viteStaticCopy` config is complex with redundant renames — could be streamlined.
|
||||
|
||||
### Code Hygiene / DevEx
|
||||
|
||||
- **Automated test suite — 561+ tests across 65+ modules, a hard CI gate.** `npm test` runs Node's built-in runner via `tsx` (not vitest — Vite 8 is ahead of vitest's range) and **blocks the build job on failure**. Broad pure-logic coverage: utils (common, regex, sanitize/XSS, time, matrix, matrix-uia, mimeTypes, sort, accentColor, findAndReplace, AsyncSearch, ASCIILexicalTable, keyboard, room, matrix-crypto, featureCheck, syntaxHighlight, imageCompression, user-agent, callSounds), state (settings, sessions, recentSearches, upload, typingMembers, lists, room-list, toast, scheduledMessages, backupRestore, callEmbed/callPreferences, spaceRooms, …), plugins (matrix-to, call/utils, via-servers, bad-words, recent-emoji, custom-emoji, markdown block/inline/utils), OIDC (cs-api, useParsedLoginFlows, oidcState), lotus/avatarDecorations, message-search, search filters. Prevention work has caught + fixed **4 real bugs** (`findAndReplace` infinite-loop; `getSettings` crash-on-load when storage is blocked; `isMacOS` never matching modern Macs; `isMLDenoiseSupported` throwing `ReferenceError` instead of returning false on browsers lacking the `AudioWorkletNode` binding). **Next:** component/integration tests (the untestable-under-tsx DOM/React surface).
|
||||
- **Extensive `as any` casts** across `src/` — gradual typing cleanup.
|
||||
- **`types/matrix/` mirrors SDK types** instead of importing them — drift risk.
|
||||
- ~~**Hardcoded CDN URL** should move to an env var~~ — **done:** `avatarDecorations.ts` already honors a `VITE_DECORATION_CDN` env override (lines 14-16); the in-repo literal is only the default. Nothing left.
|
||||
- **`patch-folds.mjs` edits `node_modules` directly** — consider `patch-package`.
|
||||
- **Infra docs:** `contrib/nginx` lacks security headers (HSTS/CSP) + uses rewrites over `try_files`; `contrib/caddy` has a placeholder path. CI/CD (`prod-deploy.yml`): sequential deploy, aggressive 1-min Netlify timeout, `package-manager-cache: false`.
|
||||
- **README:** keep the fork-sync version + logo path current. (`CONTRIBUTING.md` is intentionally left as upstream Cinny's — not a Lotus concern.)
|
||||
- **Architecture notes (low priority):** deep `features/` + `hooks/` nesting, many small coupled hooks, possible dead CSS/components, `SpacingVariant` / `DropTarget` recipe simplification.
|
||||
- **Git workflow (forward-looking):** keep commits scoped — past monolithic "fix all bugs" commits and inconsistent prefixes hurt `git bisect`.
|
||||
|
||||
### Big Projects
|
||||
|
||||
- ~~**#5 — Seasonal themes & chat-background redesign.**~~ **DONE (2026-06/07):** 11 seasonal/holiday overlays shipped and later toned down + given a settings preview grid; all 19 chat backgrounds redesigned (Carbon + Aurora kept per user preference), one design sprint each, GPU-friendly CSS with `prefers-reduced-motion` + pause toggle. Remaining polish rides normal bug flow, not a "big project."
|
||||
|
||||
@@ -180,10 +180,10 @@ avatar decorations on EC video tiles, and a native transparent background.
|
||||
(`io.lotus.inject_audio` → in-call soundboard) and quality controls
|
||||
(`io.lotus.set_quality`).
|
||||
|
||||
The full plan and integration map is in
|
||||
**[`HANDOFF_ELEMENT_CALL_FORK.md`](HANDOFF_ELEMENT_CALL_FORK.md)**; infra/hosting +
|
||||
build-pipeline notes live in the `LotusGuild/matrix` repo README. Search the docs
|
||||
for the **`[EC-FORK]`** tag to find every related note.
|
||||
The fork's `io.lotus.*` action catalog + the publish procedure are in
|
||||
**[`LOTUS_TODO.md`](LOTUS_TODO.md)** ("Element Call fork — operational reference");
|
||||
infra/hosting + build-pipeline notes live in the `LotusGuild/matrix` repo README.
|
||||
Search the docs for the **`[EC-FORK]`** tag to find every related note.
|
||||
|
||||
### Build
|
||||
|
||||
|
||||
+12
-1
@@ -1,6 +1,17 @@
|
||||
# more info: https://caddyserver.com/docs/caddyfile/patterns#single-page-apps-spas
|
||||
cinny.domain.tld {
|
||||
root * /path/to/cinny/dist
|
||||
try_files {path} / index.html
|
||||
try_files {path} /index.html
|
||||
file_server
|
||||
|
||||
# Security headers (generic; add a Content-Security-Policy suited to your
|
||||
# homeserver + any embedded services). Caddy serves HTTPS automatically, so
|
||||
# HSTS is delivered over TLS.
|
||||
header {
|
||||
X-Frame-Options SAMEORIGIN
|
||||
X-Content-Type-Options nosniff
|
||||
Referrer-Policy strict-origin-when-cross-origin
|
||||
Strict-Transport-Security "max-age=63072000; includeSubDomains"
|
||||
Permissions-Policy "accelerometer=(), autoplay=(self), camera=(self), display-capture=(self), encrypted-media=(self), fullscreen=(self), geolocation=(self), gyroscope=(), magnetometer=(), microphone=(self), midi=(), payment=(), usb=()"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,6 +17,15 @@ server {
|
||||
listen [::]:443 ssl;
|
||||
server_name cinny.domain.tld;
|
||||
|
||||
# Security headers (generic; add a Content-Security-Policy suited to your
|
||||
# homeserver + any embedded services). NOTE: nginx does not inherit
|
||||
# server-level add_header into a location that sets its own add_header.
|
||||
add_header X-Frame-Options SAMEORIGIN always;
|
||||
add_header X-Content-Type-Options nosniff always;
|
||||
add_header Referrer-Policy strict-origin-when-cross-origin always;
|
||||
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" always;
|
||||
add_header Permissions-Policy "accelerometer=(), autoplay=(self), camera=(self), display-capture=(self), encrypted-media=(self), fullscreen=(self), geolocation=(self), gyroscope=(), magnetometer=(), microphone=(self), midi=(), payment=(), usb=()" always;
|
||||
|
||||
location / {
|
||||
root /opt/cinny/dist/;
|
||||
|
||||
|
||||
@@ -5,11 +5,11 @@ experimental_features:
|
||||
msc3861:
|
||||
enabled: true
|
||||
issuer: http://localhost:8090/
|
||||
client_id: "0000000000000000000SYNAPSE"
|
||||
client_id: '0000000000000000000SYNAPSE'
|
||||
client_auth_method: client_secret_basic
|
||||
client_secret: "REPLACE_WITH_A_SHARED_CLIENT_SECRET"
|
||||
admin_token: "REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN"
|
||||
account_management_url: "http://localhost:8090/account"
|
||||
client_secret: 'REPLACE_WITH_A_SHARED_CLIENT_SECRET'
|
||||
admin_token: 'REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN'
|
||||
account_management_url: 'http://localhost:8090/account'
|
||||
|
||||
# With msc3861 enabled, Synapse disables its own password/SSO login and advertises
|
||||
# `m.authentication` in /.well-known/matrix/client — which is exactly what the
|
||||
|
||||
+28
-1
@@ -25,7 +25,7 @@ export default [
|
||||
tsPlugin.configs['flat/eslint-recommended'],
|
||||
...tsPlugin.configs['flat/recommended'],
|
||||
reactPlugin.configs.flat.recommended,
|
||||
reactHooksPlugin.configs.flat['recommended'],
|
||||
reactHooksPlugin.configs.flat.recommended,
|
||||
// Register jsx-a11y plugin (rules selectively enabled below)
|
||||
{ plugins: { 'jsx-a11y': jsxA11yPlugin } },
|
||||
// airbnb-base via FlatCompat (JS/import rules; no React plugin, no getFilename issue)
|
||||
@@ -115,6 +115,26 @@ export default [
|
||||
'jsx-a11y/media-has-caption': 'off',
|
||||
'jsx-a11y/no-noninteractive-element-interactions': 'off',
|
||||
'jsx-a11y/alt-text': 'off',
|
||||
// A11y regression gate (P3-4). A CURATED set — correctness rules that catch
|
||||
// real WCAG gaps (missing accessible names, malformed ARIA) without
|
||||
// flooding on the pre-existing clickable-div patterns. The heavier
|
||||
// interaction rules (no-static-element-interactions,
|
||||
// click-events-have-key-events) are a separate cleanup and stay OFF.
|
||||
'jsx-a11y/aria-props': 'error',
|
||||
'jsx-a11y/aria-proptypes': 'error',
|
||||
'jsx-a11y/aria-role': ['error', { ignoreNonDOM: true }],
|
||||
'jsx-a11y/aria-unsupported-elements': 'error',
|
||||
'jsx-a11y/role-has-required-aria-props': 'error',
|
||||
'jsx-a11y/role-supports-aria-props': 'error',
|
||||
'jsx-a11y/no-redundant-roles': 'error',
|
||||
'jsx-a11y/anchor-has-content': 'error',
|
||||
'jsx-a11y/heading-has-content': 'error',
|
||||
'jsx-a11y/label-has-associated-control': ['error', { assert: 'either', depth: 5 }],
|
||||
// NOT enabled: control-has-associated-label. This repo labels most inputs
|
||||
// with folds `<Text as="label" htmlFor>` — a component the rule's static
|
||||
// analysis can't see as a <label>, producing false positives on correctly
|
||||
// labeled controls. The genuinely-unlabeled controls it surfaced (sliders,
|
||||
// file input, media players, notes) were fixed directly with aria-label.
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -123,4 +143,11 @@ export default [
|
||||
'no-undef': 'off',
|
||||
},
|
||||
},
|
||||
{
|
||||
// Test files commonly define several small mock/fake classes.
|
||||
files: ['**/*.test.ts', '**/*.test.tsx'],
|
||||
rules: {
|
||||
'max-classes-per-file': 'off',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
Generated
+20
-40
@@ -24,7 +24,6 @@
|
||||
"@tanstack/react-query": "5.100.13",
|
||||
"@tanstack/react-query-devtools": "5.100.13",
|
||||
"@tanstack/react-virtual": "3.13.25",
|
||||
"@types/dompurify": "3.2.0",
|
||||
"@workadventure/noise-suppression": "0.0.4",
|
||||
"await-to-js": "3.0.0",
|
||||
"badwords-list": "2.0.1-4",
|
||||
@@ -36,7 +35,6 @@
|
||||
"dayjs": "1.11.20",
|
||||
"deepfilternet3-noise-filter": "1.2.1",
|
||||
"domhandler": "6.0.1",
|
||||
"dompurify": "3.4.5",
|
||||
"emojibase": "17.0.0",
|
||||
"emojibase-data": "17.0.0",
|
||||
"file-saver": "2.0.5",
|
||||
@@ -54,7 +52,7 @@
|
||||
"katex": "0.16.11",
|
||||
"linkify-react": "4.3.3",
|
||||
"linkifyjs": "4.3.3",
|
||||
"matrix-js-sdk": "41.6.0-rc.0",
|
||||
"matrix-js-sdk": "41.7.0",
|
||||
"matrix-widget-api": "1.17.0",
|
||||
"millify": "6.1.0",
|
||||
"pdfjs-dist": "5.7.284",
|
||||
@@ -75,7 +73,8 @@
|
||||
"slate-history": "0.113.1",
|
||||
"slate-react": "0.124.2",
|
||||
"styled-components": "6.4.2",
|
||||
"ua-parser-js": "2.0.10"
|
||||
"ua-parser-js": "2.0.10",
|
||||
"workbox-precaching": "7.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@lotusguild/element-call-embedded": "0.20.1-lotus.1",
|
||||
@@ -2697,9 +2696,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
|
||||
"version": "18.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-18.3.0.tgz",
|
||||
"integrity": "sha512-9a4feyt8QLysARu7PHKaRWT+wcCd+IYH074LXp9QK5WqfN4zUXueRhiSSMNT18Bm+8q3sBR/4zxDxOSDR0M8Kg==",
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-18.3.1.tgz",
|
||||
"integrity": "sha512-VRjWhE1UgHnPpJ3b9B5+8z71ZC/HICFngPPFIN6ktzmUBKI5RusPujzbAQUoB3CgZ0yU58L99AfSQS4YTztSWw==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
@@ -3920,16 +3919,6 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/dompurify": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.2.0.tgz",
|
||||
"integrity": "sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==",
|
||||
"deprecated": "This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dompurify": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||
@@ -4051,7 +4040,7 @@
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
|
||||
"devOptional": true
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/ua-parser-js": {
|
||||
"version": "0.7.39",
|
||||
@@ -5550,12 +5539,16 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/content-type": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
|
||||
"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
|
||||
"integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/conventional-commit-types": {
|
||||
@@ -6196,15 +6189,6 @@
|
||||
"node": ">=20.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
"version": "3.4.5",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.5.tgz",
|
||||
"integrity": "sha512-OrwIBKsdNSVEeubdJ1HBv/wNENRM9ytAVCv7YXt//A3vPdVMNuACRqK9mXCGCBW2ln7BT/A4X0jXHo2Gu89miA==",
|
||||
"license": "(MPL-2.0 OR Apache-2.0)",
|
||||
"optionalDependencies": {
|
||||
"@types/trusted-types": "^2.0.7"
|
||||
}
|
||||
},
|
||||
"node_modules/domutils": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
|
||||
@@ -9971,16 +9955,16 @@
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/matrix-js-sdk": {
|
||||
"version": "41.6.0-rc.0",
|
||||
"resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-41.6.0-rc.0.tgz",
|
||||
"integrity": "sha512-FcTQyR+Nfh0ASEogYcX393hxGr1936Esg53Z+0f9O4SBsAxl1ZSkLXY3JfLZRLX9dNe38VVwQDQE6QuwnwV7Zw==",
|
||||
"version": "41.7.0",
|
||||
"resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-41.7.0.tgz",
|
||||
"integrity": "sha512-MP0xNv/VVRbshq00TE6EVo77IIXsQk0KjiVtgKV0t9j/V77a6Klt00QrrO0XykkTUsNC0+mQeBMxnx75rZO86Q==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@matrix-org/matrix-sdk-crypto-wasm": "^18.2.0",
|
||||
"@matrix-org/matrix-sdk-crypto-wasm": "^18.3.1",
|
||||
"another-json": "^0.2.0",
|
||||
"bs58": "^6.0.0",
|
||||
"content-type": "^1.0.4",
|
||||
"content-type": "^2.0.0",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"loglevel": "^1.9.2",
|
||||
"matrix-events-sdk": "0.0.1",
|
||||
@@ -13228,7 +13212,6 @@
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-7.4.1.tgz",
|
||||
"integrity": "sha512-DT+vu46eh/2vRsSHTY4Xmc32Z1rr9PRlQUXr1Dx30ZuXRWwOsvZgGgcwxcasubQLQmbTNYZjv44LkBAQ4tT5tQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/workbox-expiration": {
|
||||
@@ -13269,7 +13252,6 @@
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-7.4.1.tgz",
|
||||
"integrity": "sha512-cdr/9qByww7yzEp7zg/qI4ukUrrNjQLgN+ONQRpjy/VqGQXwkgHwr00KksGJK8v0VifwDXBb8a4cWNZH71jn3Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"workbox-core": "7.4.1",
|
||||
@@ -13306,7 +13288,6 @@
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-7.4.1.tgz",
|
||||
"integrity": "sha512-yubJGErZOusuidAenaL5ypfhQOa7urxP/f8E0ws7FPb4039RiWXUWBAyUkmUoOL/BcQGen3h0J8872d51IYxtA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"workbox-core": "7.4.1"
|
||||
@@ -13316,7 +13297,6 @@
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-7.4.1.tgz",
|
||||
"integrity": "sha512-GZxpaw9NbmOelj7667uZ2kpk5BFpOGbO4X0qjwh5ls8XQ8C+Lha5LQchTiUzsTFSS+NlUpftYAyOVXvQUrcqOQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"workbox-core": "7.4.1"
|
||||
|
||||
+3
-4
@@ -49,7 +49,6 @@
|
||||
"@tanstack/react-query": "5.100.13",
|
||||
"@tanstack/react-query-devtools": "5.100.13",
|
||||
"@tanstack/react-virtual": "3.13.25",
|
||||
"@types/dompurify": "3.2.0",
|
||||
"@workadventure/noise-suppression": "0.0.4",
|
||||
"await-to-js": "3.0.0",
|
||||
"badwords-list": "2.0.1-4",
|
||||
@@ -61,7 +60,6 @@
|
||||
"dayjs": "1.11.20",
|
||||
"deepfilternet3-noise-filter": "1.2.1",
|
||||
"domhandler": "6.0.1",
|
||||
"dompurify": "3.4.5",
|
||||
"emojibase": "17.0.0",
|
||||
"emojibase-data": "17.0.0",
|
||||
"file-saver": "2.0.5",
|
||||
@@ -79,7 +77,7 @@
|
||||
"katex": "0.16.11",
|
||||
"linkify-react": "4.3.3",
|
||||
"linkifyjs": "4.3.3",
|
||||
"matrix-js-sdk": "41.6.0-rc.0",
|
||||
"matrix-js-sdk": "41.7.0",
|
||||
"matrix-widget-api": "1.17.0",
|
||||
"millify": "6.1.0",
|
||||
"pdfjs-dist": "5.7.284",
|
||||
@@ -100,7 +98,8 @@
|
||||
"slate-history": "0.113.1",
|
||||
"slate-react": "0.124.2",
|
||||
"styled-components": "6.4.2",
|
||||
"ua-parser-js": "2.0.10"
|
||||
"ua-parser-js": "2.0.10",
|
||||
"workbox-precaching": "7.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@lotusguild/element-call-embedded": "0.20.1-lotus.1",
|
||||
|
||||
@@ -213,6 +213,7 @@ function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps)
|
||||
<Text size="L400">Account Data</Text>
|
||||
<Input
|
||||
variant="SurfaceVariant"
|
||||
aria-label="Account data type"
|
||||
size="400"
|
||||
radii="300"
|
||||
readOnly
|
||||
|
||||
@@ -5,6 +5,7 @@ import { useTauriSmtc } from '../hooks/useTauriSmtc';
|
||||
import { useTauriNetwork } from '../hooks/useTauriNetwork';
|
||||
import { useTauriToastActions } from '../hooks/useTauriToastActions';
|
||||
import { useTauriFocusAssist } from '../hooks/useTauriFocusAssist';
|
||||
import { useTauriDnd } from '../hooks/useTauriDnd';
|
||||
|
||||
/**
|
||||
* Mounts the client-scoped native desktop feature hooks (call/room aware). Each
|
||||
@@ -21,5 +22,6 @@ export function TauriDesktopFeatures(): null {
|
||||
useTauriNetwork(); // P5-49 network-change awareness → sync retry
|
||||
useTauriToastActions(); // P5-41/35 rich toast click → open room, quick reply → send
|
||||
useTauriFocusAssist(); // P5-56 Windows Focus Assist → DND suppression atom
|
||||
useTauriDnd(); // P6-1 tray "Do Not Disturb" → notification suppression atom
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -282,7 +282,12 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
|
||||
>
|
||||
{previewUrl && (
|
||||
<>
|
||||
<audio ref={previewAudioRef} src={previewUrl} onEnded={() => setPreviewPlaying(false)} />
|
||||
<audio
|
||||
ref={previewAudioRef}
|
||||
src={previewUrl}
|
||||
onEnded={() => setPreviewPlaying(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
const audio = previewAudioRef.current;
|
||||
|
||||
@@ -78,11 +78,14 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
|
||||
|
||||
return (
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Text size="L400">Address (Optional)</Text>
|
||||
<Text as="label" htmlFor="create-room-alias" size="L400">
|
||||
Address (Optional)
|
||||
</Text>
|
||||
<Text size="T200" priority="300">
|
||||
Pick an unique address to make it discoverable.
|
||||
</Text>
|
||||
<Input
|
||||
id="create-room-alias"
|
||||
ref={aliasInputRef}
|
||||
onChange={handleAliasChange}
|
||||
before={
|
||||
|
||||
@@ -66,6 +66,8 @@ type CustomEditorProps = {
|
||||
maxHeight?: string;
|
||||
editor: Editor;
|
||||
placeholder?: string;
|
||||
/** Explicit accessible name for the textbox; falls back to the placeholder. */
|
||||
ariaLabel?: string;
|
||||
onKeyDown?: KeyboardEventHandler;
|
||||
onKeyUp?: KeyboardEventHandler;
|
||||
onChange?: EditorChangeHandler;
|
||||
@@ -82,6 +84,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
|
||||
maxHeight = '50vh',
|
||||
editor,
|
||||
placeholder,
|
||||
ariaLabel,
|
||||
onKeyDown,
|
||||
onKeyUp,
|
||||
onChange,
|
||||
@@ -139,7 +142,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
|
||||
data-editable-name={editableName}
|
||||
className={css.EditorTextarea}
|
||||
placeholder={placeholder}
|
||||
aria-label={placeholder ?? 'Message input'}
|
||||
aria-label={ariaLabel ?? placeholder ?? 'Message input'}
|
||||
aria-multiline="true"
|
||||
renderPlaceholder={renderPlaceholder}
|
||||
renderElement={renderElement}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo } from 'react';
|
||||
import React, { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo, useState } from 'react';
|
||||
import { Editor } from 'slate';
|
||||
import { Box, MenuItem, Text, toRem } from 'folds';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
@@ -11,7 +11,7 @@ import { onTabPress } from '../../../utils/keyboard';
|
||||
import { createEmoticonElement, moveCursor, replaceWithElement } from '../utils';
|
||||
import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
|
||||
import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
|
||||
import { IEmoji, emojis } from '../../../plugins/emoji';
|
||||
import { IEmoji, emojis, loadEmojiData } from '../../../plugins/emoji';
|
||||
import { useKeyDown } from '../../../hooks/useKeyDown';
|
||||
import { mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
@@ -47,13 +47,32 @@ export function EmoticonAutocomplete({
|
||||
const imagePacks = useRelevantImagePacks(ImageUsage.Emoticon, imagePackRooms);
|
||||
const recentEmoji = useRecentEmoji(mx, 20);
|
||||
|
||||
// Lazily load emojibase data (see plugins/emoji `loadEmojiData`). Until it
|
||||
// resolves, `emojis` is empty and autocomplete matches only custom-emoji
|
||||
// packs; the unicode emoji list fills in once loaded.
|
||||
const [loadedEmojis, setLoadedEmojis] = useState<IEmoji[]>(() => emojis);
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
loadEmojiData()
|
||||
// Fresh array reference: loadEmojiData populates the module-level array
|
||||
// IN PLACE, so state set to the same ref would bail out of re-rendering
|
||||
// and the search list would never gain the unicode emojis.
|
||||
.then((loaded) => {
|
||||
if (alive) setLoadedEmojis(loaded.emojis.slice());
|
||||
})
|
||||
.catch(() => undefined);
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const searchList = useMemo(() => {
|
||||
const list: Array<EmoticonSearchItem> = [];
|
||||
return list.concat(
|
||||
imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
|
||||
emojis,
|
||||
loadedEmojis,
|
||||
);
|
||||
}, [imagePacks]);
|
||||
}, [imagePacks, loadedEmojis]);
|
||||
|
||||
const [result, search, resetSearch] = useAsyncSearch(
|
||||
searchList,
|
||||
|
||||
@@ -8,6 +8,7 @@ import React, {
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { Box, config, Icons, Scroll } from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
@@ -15,7 +16,7 @@ import { isKeyHotkey } from 'is-hotkey';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { atom, PrimitiveAtom, useAtom, useSetAtom } from 'jotai';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { IEmoji, emojiGroups, emojis } from '../../plugins/emoji';
|
||||
import { EmojiData, IEmoji, emojiGroups, emojis, loadEmojiData } from '../../plugins/emoji';
|
||||
import { useEmojiGroupLabels } from './useEmojiGroupLabels';
|
||||
import { useEmojiGroupIcons } from './useEmojiGroupIcons';
|
||||
import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard';
|
||||
@@ -56,6 +57,33 @@ import { VirtualTile } from '../virtualizer';
|
||||
const RECENT_GROUP_ID = 'recent_group';
|
||||
const SEARCH_GROUP_ID = 'search_group';
|
||||
|
||||
/**
|
||||
* Lazily pull in the emojibase data (see plugins/emoji `loadEmojiData`). The
|
||||
* `emojis`/`emojiGroups` arrays are populated in place once the promise
|
||||
* resolves; we wrap them in a fresh object on load so React re-renders and the
|
||||
* board fills in. Before that, both are empty and the board shows only custom
|
||||
* image packs / recents (which is fleeting — the load starts on mount).
|
||||
*/
|
||||
const useEmojiData = (): EmojiData => {
|
||||
const [data, setData] = useState<EmojiData>(() => ({ emojis, emojiGroups }));
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
loadEmojiData()
|
||||
// Fresh array references (not just a fresh wrapper): downstream memos
|
||||
// depend on the arrays themselves, which are populated IN PLACE — same
|
||||
// refs would skip recompute and leave emoji search empty until remount.
|
||||
.then((loaded) => {
|
||||
if (alive)
|
||||
setData({ emojis: loaded.emojis.slice(), emojiGroups: loaded.emojiGroups.slice() });
|
||||
})
|
||||
.catch(() => undefined);
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
return data;
|
||||
};
|
||||
|
||||
type EmojiGroupItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -75,6 +103,7 @@ const useGroups = (
|
||||
|
||||
const recentEmojis = useRecentEmoji(mx, 21);
|
||||
const labels = useEmojiGroupLabels();
|
||||
const { emojiGroups: loadedEmojiGroups } = useEmojiData();
|
||||
|
||||
const emojiGroupItems = useMemo(() => {
|
||||
const g: EmojiGroupItem[] = [];
|
||||
@@ -99,7 +128,7 @@ const useGroups = (
|
||||
});
|
||||
});
|
||||
|
||||
emojiGroups.forEach((group) => {
|
||||
loadedEmojiGroups.forEach((group) => {
|
||||
g.push({
|
||||
id: group.id,
|
||||
name: labels[group.id],
|
||||
@@ -108,7 +137,7 @@ const useGroups = (
|
||||
});
|
||||
|
||||
return g;
|
||||
}, [mx, recentEmojis, labels, imagePacks, tab]);
|
||||
}, [mx, recentEmojis, labels, imagePacks, tab, loadedEmojiGroups]);
|
||||
|
||||
const stickerGroupItems = useMemo(() => {
|
||||
const g: StickerGroupItem[] = [];
|
||||
@@ -177,6 +206,7 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
|
||||
const usage = ImageUsage.Emoticon;
|
||||
const labels = useEmojiGroupLabels();
|
||||
const icons = useEmojiGroupIcons();
|
||||
const { emojiGroups: loadedEmojiGroups } = useEmojiData();
|
||||
|
||||
const packLabels = useMemo(() => {
|
||||
const map = new Map<string, string | undefined>();
|
||||
@@ -234,7 +264,7 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
|
||||
}}
|
||||
>
|
||||
<SidebarDivider />
|
||||
{emojiGroups.map((group) => (
|
||||
{loadedEmojiGroups.map((group) => (
|
||||
<GroupIcon
|
||||
key={group.id}
|
||||
active={activeGroupId === group.id}
|
||||
@@ -409,13 +439,14 @@ export function EmojiBoard({
|
||||
const [emojiGroupItems, stickerGroupItems] = useGroups(tab, imagePacks);
|
||||
const groups = emojiTab ? emojiGroupItems : stickerGroupItems;
|
||||
const renderItem = useItemRenderer(tab);
|
||||
const { emojis: loadedEmojis } = useEmojiData();
|
||||
|
||||
const searchList = useMemo(() => {
|
||||
let list: Array<PackImageReader | IEmoji> = [];
|
||||
list = list.concat(imagePacks.flatMap((pack) => pack.getImages(usage)));
|
||||
if (emojiTab) list = list.concat(emojis);
|
||||
if (emojiTab) list = list.concat(loadedEmojis);
|
||||
return list;
|
||||
}, [emojiTab, usage, imagePacks]);
|
||||
}, [emojiTab, usage, imagePacks, loadedEmojis]);
|
||||
|
||||
const [result, search, resetSearch] = useAsyncSearch(
|
||||
searchList,
|
||||
|
||||
@@ -200,12 +200,24 @@ export function ImagePackProfileEdit({ meta, onCancel, onSave }: ImagePackProfil
|
||||
</Box>
|
||||
</Box>
|
||||
<Box direction="Inherit" gap="100">
|
||||
<Text size="L400">Name</Text>
|
||||
<Input name="nameInput" defaultValue={meta.name} variant="Secondary" radii="300" required />
|
||||
<Text as="label" htmlFor="image-pack-name" size="L400">
|
||||
Name
|
||||
</Text>
|
||||
<Input
|
||||
id="image-pack-name"
|
||||
name="nameInput"
|
||||
defaultValue={meta.name}
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box direction="Inherit" gap="100">
|
||||
<Text size="L400">Attribution</Text>
|
||||
<Text as="label" htmlFor="image-pack-attribution" size="L400">
|
||||
Attribution
|
||||
</Text>
|
||||
<TextArea
|
||||
id="image-pack-attribution"
|
||||
name="attributionTextArea"
|
||||
defaultValue={meta.attribution}
|
||||
variant="Secondary"
|
||||
|
||||
@@ -261,9 +261,12 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
|
||||
gap="400"
|
||||
>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">User ID</Text>
|
||||
<Text as="label" htmlFor="invite-user-id" size="L400">
|
||||
User ID
|
||||
</Text>
|
||||
<div>
|
||||
<Input
|
||||
id="invite-user-id"
|
||||
size="500"
|
||||
ref={inputRef}
|
||||
onChange={handleSearchChange}
|
||||
@@ -334,8 +337,11 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
|
||||
</div>
|
||||
</Box>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Reason (Optional)</Text>
|
||||
<Text as="label" htmlFor="invite-reason" size="L400">
|
||||
Reason (Optional)
|
||||
</Text>
|
||||
<TextArea
|
||||
id="invite-reason"
|
||||
size="500"
|
||||
name="reasonInput"
|
||||
variant="Background"
|
||||
|
||||
@@ -108,8 +108,11 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
|
||||
</Text>
|
||||
</Box>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Address</Text>
|
||||
<Text as="label" htmlFor="join-address" size="L400">
|
||||
Address
|
||||
</Text>
|
||||
<Input
|
||||
id="join-address"
|
||||
size="500"
|
||||
autoFocus
|
||||
name="addressInput"
|
||||
|
||||
@@ -117,7 +117,6 @@ export const PageHeroSection = style([
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
export const PageContentCenter = style([
|
||||
DefaultReset,
|
||||
{
|
||||
|
||||
@@ -95,7 +95,6 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
returnFocusOnDeactivate: false,
|
||||
clickOutsideDeactivates: true,
|
||||
onDeactivate: () => setViewTopic(false),
|
||||
escapeDeactivates: stopPropagation,
|
||||
|
||||
@@ -278,6 +278,7 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
|
||||
<Box direction="Column" gap="300">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
aria-label="Upload soundboard clip"
|
||||
type="file"
|
||||
accept={SOUNDBOARD_ACCEPT}
|
||||
multiple
|
||||
|
||||
@@ -56,6 +56,7 @@ function PreviewVideo({ fileItem }: PreviewVideoProps) {
|
||||
|
||||
return (
|
||||
<video
|
||||
aria-label="Video attachment preview"
|
||||
style={{
|
||||
objectFit: 'contain',
|
||||
width: '100%',
|
||||
|
||||
@@ -260,6 +260,7 @@ export function UserModeration({ userId, canKick, canBan, canInvite }: UserModer
|
||||
<Input
|
||||
ref={reasonInputRef}
|
||||
placeholder="Reason"
|
||||
aria-label="Moderation reason"
|
||||
size="300"
|
||||
variant="Background"
|
||||
radii="300"
|
||||
|
||||
@@ -253,6 +253,7 @@ function UserPrivateNotes({ userId }: { userId: string }) {
|
||||
)}
|
||||
</Box>
|
||||
<textarea
|
||||
aria-label="Private note about this user"
|
||||
value={draft}
|
||||
onChange={handleChange}
|
||||
maxLength={USER_NOTE_MAX_LENGTH}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
|
||||
import React, { ChangeEvent, ReactNode, useCallback, useEffect, useState } from 'react';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
@@ -16,6 +17,8 @@ import {
|
||||
import classNames from 'classnames';
|
||||
import { useBookmarks, Bookmark } from '../../hooks/useBookmarks';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useRoomEvent } from '../../hooks/useRoomEvent';
|
||||
import { MessageDeletedContent } from '../../components/message/content/FallbackContent';
|
||||
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { RoomAvatar } from '../../components/room-avatar';
|
||||
@@ -42,9 +45,11 @@ type BookmarkItemProps = {
|
||||
bookmark: Bookmark;
|
||||
onJump: (roomId: string, eventId: string) => void;
|
||||
onRemove: (eventId: string) => void;
|
||||
// Optional live-rendered preview node; falls back to the stored snapshot when absent.
|
||||
preview?: ReactNode;
|
||||
};
|
||||
|
||||
function BookmarkItem({ bookmark, onJump, onRemove }: BookmarkItemProps) {
|
||||
function BookmarkItem({ bookmark, onJump, onRemove, preview }: BookmarkItemProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const room = mx.getRoom(bookmark.roomId) ?? undefined;
|
||||
@@ -104,18 +109,50 @@ function BookmarkItem({ bookmark, onJump, onRemove }: BookmarkItemProps) {
|
||||
style={{ justifyContent: 'flex-start', height: 'unset', padding: config.space.S200 }}
|
||||
>
|
||||
<Text className={css.BookmarkPreview} size="T200" priority="400">
|
||||
{bookmark.previewText || '(no preview)'}
|
||||
{preview ?? (bookmark.previewText || '(no preview)')}
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type LiveBookmarkItemProps = BookmarkItemProps & { room: Room };
|
||||
|
||||
// Renders the same layout as BookmarkItem, but resolves the message body live so
|
||||
// edits (m.replace, applied by useRoomEvent) and redactions are reflected. The
|
||||
// stored snapshot (previewText) remains the fallback for loading/failed/empty states.
|
||||
function LiveBookmarkItem({ room, bookmark, onJump, onRemove }: LiveBookmarkItemProps) {
|
||||
const liveEvent = useRoomEvent(room, bookmark.eventId, () =>
|
||||
room.findEventById(bookmark.eventId),
|
||||
);
|
||||
|
||||
const snapshot = bookmark.previewText || '(no preview)';
|
||||
let preview: ReactNode = snapshot;
|
||||
|
||||
// undefined (loading) and null (fetch failed / not found) both keep the snapshot.
|
||||
if (liveEvent) {
|
||||
if (liveEvent.isRedacted()) {
|
||||
preview = (
|
||||
<MessageDeletedContent
|
||||
reason={liveEvent.getUnsigned().redacted_because?.content?.reason as string | undefined}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
// body is already the edited text since useRoomEvent applied m.replace.
|
||||
const { body } = liveEvent.getContent();
|
||||
preview = typeof body === 'string' && body ? body : snapshot;
|
||||
}
|
||||
}
|
||||
|
||||
return <BookmarkItem bookmark={bookmark} onJump={onJump} onRemove={onRemove} preview={preview} />;
|
||||
}
|
||||
|
||||
type BookmarksPanelProps = {
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
|
||||
const mx = useMatrixClient();
|
||||
const { bookmarks, removeBookmark } = useBookmarks();
|
||||
const { navigateRoom } = useRoomNavigate();
|
||||
const [filter, setFilter] = useState('');
|
||||
@@ -228,14 +265,27 @@ export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
|
||||
</Box>
|
||||
) : (
|
||||
<Box className={css.BookmarksContent} direction="Column" gap="200">
|
||||
{filtered.map((bk) => (
|
||||
<BookmarkItem
|
||||
key={bk.eventId}
|
||||
bookmark={bk}
|
||||
onJump={handleJump}
|
||||
onRemove={removeBookmark}
|
||||
/>
|
||||
))}
|
||||
{filtered.map((bk) => {
|
||||
// Live render when the room is joined (useRoomEvent needs a non-null Room);
|
||||
// otherwise fall back to the stored snapshot for rooms we've left.
|
||||
const room = mx.getRoom(bk.roomId);
|
||||
return room ? (
|
||||
<LiveBookmarkItem
|
||||
key={bk.eventId}
|
||||
room={room}
|
||||
bookmark={bk}
|
||||
onJump={handleJump}
|
||||
onRemove={removeBookmark}
|
||||
/>
|
||||
) : (
|
||||
<BookmarkItem
|
||||
key={bk.eventId}
|
||||
bookmark={bk}
|
||||
onJump={handleJump}
|
||||
onRemove={removeBookmark}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
</Scroll>
|
||||
|
||||
@@ -147,6 +147,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
|
||||
<Text size="L400">Name</Text>
|
||||
<Input
|
||||
name="nameInput"
|
||||
aria-label="Power level name"
|
||||
defaultValue={tag?.name}
|
||||
placeholder="Bot"
|
||||
size="300"
|
||||
@@ -160,6 +161,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
|
||||
<Input
|
||||
defaultValue={power}
|
||||
name="powerInput"
|
||||
aria-label="Power level value"
|
||||
size="300"
|
||||
variant={typeof power === 'number' ? 'SurfaceVariant' : 'Secondary'}
|
||||
radii="300"
|
||||
|
||||
@@ -186,8 +186,8 @@ function LightboxMedia({
|
||||
)}
|
||||
{media.status === 'ok' &&
|
||||
(item.msgtype === MsgType.Video ? (
|
||||
// eslint-disable-next-line jsx-a11y/media-has-caption
|
||||
<video
|
||||
aria-label="Video attachment"
|
||||
src={media.url}
|
||||
controls
|
||||
autoPlay
|
||||
@@ -261,7 +261,6 @@ function Lightbox({
|
||||
escapeDeactivates: false,
|
||||
}}
|
||||
>
|
||||
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal
|
||||
@@ -640,13 +639,15 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
|
||||
className={classNames(css.MediaGalleryDrawer, ContainerColor({ variant: 'Background' }))}
|
||||
shrink="No"
|
||||
direction="Column"
|
||||
role="region"
|
||||
aria-labelledby="media-gallery-title"
|
||||
>
|
||||
{/* Header */}
|
||||
<Header variant="Background" size="600" className={css.MediaGalleryHeader}>
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<Icon size="200" src={Icons.Photo} />
|
||||
<Box grow="Yes">
|
||||
<Text size="H4" truncate>
|
||||
<Text id="media-gallery-title" size="H4" truncate>
|
||||
Media Gallery
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -142,7 +142,6 @@ export function PollCreator({ roomId, onClose }: PollCreatorProps) {
|
||||
placeholder="Ask a question…"
|
||||
value={question}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQuestion(e.target.value)}
|
||||
// eslint-disable-next-line jsx-a11y/no-autofocus
|
||||
autoFocus
|
||||
/>
|
||||
</Box>
|
||||
@@ -151,7 +150,6 @@ export function PollCreator({ roomId, onClose }: PollCreatorProps) {
|
||||
<Box direction="Column" gap="200">
|
||||
<Text size="L400">Options</Text>
|
||||
{options.map((opt, index) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<Box key={index} alignItems="Center" gap="200">
|
||||
<Input
|
||||
style={{ flex: 1 }}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import { Box, Line } from 'folds';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { isKeyHotkey } from 'is-hotkey';
|
||||
@@ -49,15 +49,46 @@ export function Room() {
|
||||
useCallback(
|
||||
(evt) => {
|
||||
if (isKeyHotkey('escape', evt)) {
|
||||
// Skip when a composer already consumed Escape (it preventDefaults).
|
||||
if (evt.defaultPrevented) return;
|
||||
// Skip while a thread panel is open: listener registration order
|
||||
// means this can run BEFORE the panel's own Escape handler, and the
|
||||
// user's intent there is "close the panel", not "mark room read".
|
||||
if (activeThreadId) return;
|
||||
markAsRead(mx, room.roomId, hideActivity);
|
||||
}
|
||||
},
|
||||
[mx, room.roomId, hideActivity],
|
||||
[mx, room.roomId, hideActivity, activeThreadId],
|
||||
),
|
||||
);
|
||||
|
||||
const callView = callEmbed?.roomId === room.roomId || room.isCallRoom() || callMembers.length > 0;
|
||||
|
||||
// Thread panel and media gallery are mutually exclusive on every screen size:
|
||||
// opening one closes the other. Detect the just-opened transition so whichever
|
||||
// was opened most recently wins.
|
||||
const prevThreadRef = useRef(activeThreadId);
|
||||
const prevGalleryRef = useRef(galleryOpen);
|
||||
useEffect(() => {
|
||||
const threadJustOpened = Boolean(activeThreadId) && !prevThreadRef.current;
|
||||
const galleryJustOpened = galleryOpen && !prevGalleryRef.current;
|
||||
if (threadJustOpened && galleryOpen) {
|
||||
setGalleryOpen(false);
|
||||
} else if (galleryJustOpened && activeThreadId) {
|
||||
setActiveThreadId(null);
|
||||
}
|
||||
prevThreadRef.current = activeThreadId;
|
||||
prevGalleryRef.current = galleryOpen;
|
||||
}, [activeThreadId, galleryOpen, setGalleryOpen, setActiveThreadId]);
|
||||
|
||||
// On non-desktop screens at most one right-side panel may show, priority
|
||||
// thread > gallery > members. On desktop thread + members may coexist while
|
||||
// thread + gallery stay mutually exclusive (via the effect above).
|
||||
const isDesktop = screenSize === ScreenSize.Desktop;
|
||||
const showThreadPanel = !callView && Boolean(activeThreadId);
|
||||
const showGallery = !callView && galleryOpen && (isDesktop || !activeThreadId);
|
||||
const showMembers = !callView && isDrawer && (isDesktop || (!activeThreadId && !galleryOpen));
|
||||
|
||||
return (
|
||||
<PowerLevelsContextProvider value={powerLevels}>
|
||||
<Box grow="Yes">
|
||||
@@ -86,7 +117,7 @@ export function Room() {
|
||||
<CallChatView />
|
||||
</>
|
||||
)}
|
||||
{!callView && galleryOpen && (
|
||||
{showGallery && (
|
||||
<>
|
||||
{screenSize === ScreenSize.Desktop && (
|
||||
<Line variant="Background" direction="Vertical" size="300" />
|
||||
@@ -94,7 +125,7 @@ export function Room() {
|
||||
<MediaGallery key={room.roomId} room={room} onClose={() => setGalleryOpen(false)} />
|
||||
</>
|
||||
)}
|
||||
{!callView && activeThreadId && (
|
||||
{showThreadPanel && activeThreadId && (
|
||||
<>
|
||||
{screenSize === ScreenSize.Desktop && (
|
||||
<Line variant="Background" direction="Vertical" size="300" />
|
||||
@@ -107,7 +138,7 @@ export function Room() {
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{!callView && isDrawer && (
|
||||
{showMembers && (
|
||||
<>
|
||||
{screenSize === ScreenSize.Desktop && (
|
||||
<Line variant="Background" direction="Vertical" size="300" />
|
||||
|
||||
@@ -679,15 +679,23 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
submit();
|
||||
}
|
||||
if (isKeyHotkey('escape', evt)) {
|
||||
evt.preventDefault();
|
||||
// Only consume Escape (and stop it bubbling to the thread panel / room
|
||||
// window handlers) when the composer actually has something to dismiss.
|
||||
// If we did nothing, let Escape propagate so those handlers can run.
|
||||
if (autocompleteQuery) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
setAutocompleteQuery(undefined);
|
||||
return;
|
||||
}
|
||||
setReplyDraft(undefined);
|
||||
if (replyDraft) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
setReplyDraft(undefined);
|
||||
}
|
||||
}
|
||||
},
|
||||
[submit, setReplyDraft, enterForNewline, autocompleteQuery, isComposing],
|
||||
[submit, replyDraft, setReplyDraft, enterForNewline, autocompleteQuery, isComposing],
|
||||
);
|
||||
|
||||
const handleKeyUp: KeyboardEventHandler = useCallback(
|
||||
|
||||
@@ -583,7 +583,6 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
returnFocusOnDeactivate: false,
|
||||
clickOutsideDeactivates: true,
|
||||
onDeactivate: () => setViewTopic(false),
|
||||
escapeDeactivates: stopPropagation,
|
||||
|
||||
@@ -25,3 +25,16 @@ export const RoomViewTyping = style([
|
||||
export const TypingText = style({
|
||||
flexGrow: 1,
|
||||
});
|
||||
|
||||
// Visually hidden but available to assistive technology.
|
||||
export const SrOnly = style({
|
||||
position: 'absolute',
|
||||
width: 1,
|
||||
height: 1,
|
||||
padding: 0,
|
||||
margin: -1,
|
||||
overflow: 'hidden',
|
||||
clip: 'rect(0, 0, 0, 0)',
|
||||
whiteSpace: 'nowrap',
|
||||
border: 0,
|
||||
});
|
||||
|
||||
@@ -33,8 +33,21 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
|
||||
[typingMembers, myUserId, room],
|
||||
);
|
||||
|
||||
if (typingNames.length === 0) {
|
||||
return null;
|
||||
// A single, non-truncated string for assistive technology to announce.
|
||||
// Computed even when empty so the live region can stay mounted (below) —
|
||||
// a `role="status"` region added to the DOM together with its first text
|
||||
// is not reliably announced by some screen readers.
|
||||
let typingAnnouncement = '';
|
||||
if (typingNames.length === 1) {
|
||||
typingAnnouncement = `${typingNames[0]} is typing`;
|
||||
} else if (typingNames.length === 2) {
|
||||
typingAnnouncement = `${typingNames[0]} and ${typingNames[1]} are typing`;
|
||||
} else if (typingNames.length === 3) {
|
||||
typingAnnouncement = `${typingNames[0]}, ${typingNames[1]} and ${typingNames[2]} are typing`;
|
||||
} else {
|
||||
typingAnnouncement = `${typingNames[0]}, ${typingNames[1]}, ${typingNames[2]} and ${
|
||||
typingNames.length - 3
|
||||
} others are typing`;
|
||||
}
|
||||
|
||||
const handleDropAll = () => {
|
||||
@@ -50,83 +63,89 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative' }} aria-live="polite" aria-atomic="false">
|
||||
<Box
|
||||
className={classNames(css.RoomViewTyping, className)}
|
||||
alignItems="Center"
|
||||
gap="400"
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<TypingIndicator />
|
||||
<Text className={css.TypingText} size="T300" truncate>
|
||||
{typingNames.length === 1 && (
|
||||
<>
|
||||
<b>{typingNames[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' is typing...'}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
{typingNames.length === 2 && (
|
||||
<>
|
||||
<b>{typingNames[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' and '}
|
||||
</Text>
|
||||
<b>{typingNames[1]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' are typing...'}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
{typingNames.length === 3 && (
|
||||
<>
|
||||
<b>{typingNames[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{', '}
|
||||
</Text>
|
||||
<b>{typingNames[1]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' and '}
|
||||
</Text>
|
||||
<b>{typingNames[2]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' are typing...'}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
{typingNames.length > 3 && (
|
||||
<>
|
||||
<b>{typingNames[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{', '}
|
||||
</Text>
|
||||
<b>{typingNames[1]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{', '}
|
||||
</Text>
|
||||
<b>{typingNames[2]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' and '}
|
||||
</Text>
|
||||
<b>{typingNames.length - 3} others</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' are typing...'}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
<IconButton
|
||||
title="Drop Typing Status"
|
||||
aria-label="Drop typing status"
|
||||
size="300"
|
||||
radii="Pill"
|
||||
onClick={handleDropAll}
|
||||
<div style={{ position: 'relative' }}>
|
||||
{/* Persistently mounted so the FIRST "X is typing" is announced. */}
|
||||
<span className={css.SrOnly} role="status" aria-live="polite" aria-atomic="true">
|
||||
{typingAnnouncement}
|
||||
</span>
|
||||
{typingNames.length > 0 && (
|
||||
<Box
|
||||
className={classNames(css.RoomViewTyping, className)}
|
||||
alignItems="Center"
|
||||
gap="400"
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<Icon size="50" src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<TypingIndicator />
|
||||
<Text className={css.TypingText} size="T300" truncate aria-hidden>
|
||||
{typingNames.length === 1 && (
|
||||
<>
|
||||
<b>{typingNames[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' is typing...'}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
{typingNames.length === 2 && (
|
||||
<>
|
||||
<b>{typingNames[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' and '}
|
||||
</Text>
|
||||
<b>{typingNames[1]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' are typing...'}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
{typingNames.length === 3 && (
|
||||
<>
|
||||
<b>{typingNames[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{', '}
|
||||
</Text>
|
||||
<b>{typingNames[1]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' and '}
|
||||
</Text>
|
||||
<b>{typingNames[2]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' are typing...'}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
{typingNames.length > 3 && (
|
||||
<>
|
||||
<b>{typingNames[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{', '}
|
||||
</Text>
|
||||
<b>{typingNames[1]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{', '}
|
||||
</Text>
|
||||
<b>{typingNames[2]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' and '}
|
||||
</Text>
|
||||
<b>{typingNames.length - 3} others</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' are typing...'}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
<IconButton
|
||||
title="Drop Typing Status"
|
||||
aria-label="Drop typing status"
|
||||
size="300"
|
||||
radii="Pill"
|
||||
onClick={handleDropAll}
|
||||
>
|
||||
<Icon size="50" src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -33,6 +33,7 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
|
||||
const [scheduledMessages, setScheduledMessages] = useAtom(scheduledMessagesAtom);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [cancelling, setCancelling] = useState<Set<string>>(new Set());
|
||||
const [cancelErrors, setCancelErrors] = useState<Set<string>>(new Set());
|
||||
|
||||
const messages = useMemo(() => scheduledMessages.get(roomId) ?? [], [scheduledMessages, roomId]);
|
||||
|
||||
@@ -68,12 +69,17 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
|
||||
async (msg: ScheduledMessage) => {
|
||||
if (cancelling.has(msg.delayId)) return;
|
||||
setCancelling((prev) => new Set(prev).add(msg.delayId));
|
||||
setCancelErrors((prev) => {
|
||||
if (!prev.has(msg.delayId)) return prev;
|
||||
const next = new Set(prev);
|
||||
next.delete(msg.delayId);
|
||||
return next;
|
||||
});
|
||||
try {
|
||||
await cancelScheduledMessage(mx, msg.delayId);
|
||||
} catch {
|
||||
// If cancellation fails on the server, still remove locally
|
||||
// since the user intends to remove it
|
||||
} finally {
|
||||
// Only prune local state once the server confirms cancellation. If we
|
||||
// removed it optimistically the still-live delayed event would fire and
|
||||
// the "cancelled" message would send anyway.
|
||||
setScheduledMessages((prev) => {
|
||||
const next = new Map(prev);
|
||||
const current = next.get(roomId) ?? [];
|
||||
@@ -85,6 +91,11 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
|
||||
}
|
||||
return next;
|
||||
});
|
||||
} catch {
|
||||
// Keep the item (still cancellable) and surface an inline error; the
|
||||
// delayed event is still scheduled on the server.
|
||||
setCancelErrors((prev) => new Set(prev).add(msg.delayId));
|
||||
} finally {
|
||||
setCancelling((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(msg.delayId);
|
||||
@@ -131,41 +142,52 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
|
||||
{messages.map((msg) => (
|
||||
<Box
|
||||
key={msg.delayId}
|
||||
alignItems="Center"
|
||||
gap="200"
|
||||
direction="Column"
|
||||
style={{
|
||||
padding: `${config.space.S100} ${config.space.S300}`,
|
||||
borderTop: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
size="T200"
|
||||
priority="400"
|
||||
style={{
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{typeof msg.content.body === 'string' ? (msg.content.body as string) : '(message)'}
|
||||
</Text>
|
||||
<Text size="T200" priority="300" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
|
||||
{formatSendAt(msg.sendAt)}
|
||||
</Text>
|
||||
<IconButton
|
||||
size="300"
|
||||
radii="300"
|
||||
variant="SurfaceVariant"
|
||||
aria-label="Cancel scheduled message"
|
||||
disabled={cancelling.has(msg.delayId)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleCancel(msg);
|
||||
}}
|
||||
>
|
||||
<Icon src={Icons.Cross} size="50" />
|
||||
</IconButton>
|
||||
<Box alignItems="Center" gap="200">
|
||||
<Text
|
||||
size="T200"
|
||||
priority="400"
|
||||
style={{
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{typeof msg.content.body === 'string'
|
||||
? (msg.content.body as string)
|
||||
: '(message)'}
|
||||
</Text>
|
||||
<Text size="T200" priority="300" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
|
||||
{formatSendAt(msg.sendAt)}
|
||||
</Text>
|
||||
<IconButton
|
||||
size="300"
|
||||
radii="300"
|
||||
variant="SurfaceVariant"
|
||||
aria-label="Cancel scheduled message"
|
||||
disabled={cancelling.has(msg.delayId)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleCancel(msg);
|
||||
}}
|
||||
>
|
||||
<Icon src={Icons.Cross} size="50" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
{cancelErrors.has(msg.delayId) && (
|
||||
<Text
|
||||
size="T200"
|
||||
style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
|
||||
>
|
||||
Could not cancel this message. Try again.
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
@@ -3,6 +3,8 @@ import FocusTrap from 'focus-trap-react';
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
color,
|
||||
config,
|
||||
Header,
|
||||
@@ -29,16 +31,17 @@ import { mDirectAtom } from '../../../state/mDirectList';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';
|
||||
import { getEditedEvent, trimReplyFromBody, trimReplyFromFormattedBody } from '../../../utils/room';
|
||||
import { buildForwardContent } from './forwardContent';
|
||||
|
||||
type RoomRowProps = {
|
||||
room: Room;
|
||||
dm: boolean;
|
||||
useAuthentication: boolean;
|
||||
onClick: () => void;
|
||||
selected: boolean;
|
||||
onToggle: () => void;
|
||||
sending: boolean;
|
||||
};
|
||||
function RoomRow({ room, dm, useAuthentication, onClick, sending }: RoomRowProps) {
|
||||
function RoomRow({ room, dm, useAuthentication, selected, onToggle, sending }: RoomRowProps) {
|
||||
const mx = useMatrixClient();
|
||||
const avatarMxc = room.getMxcAvatarUrl();
|
||||
const avatarUrl = avatarMxc
|
||||
@@ -49,8 +52,20 @@ function RoomRow({ room, dm, useAuthentication, onClick, sending }: RoomRowProps
|
||||
<MenuItem
|
||||
size="300"
|
||||
radii="300"
|
||||
onClick={onClick}
|
||||
onClick={onToggle}
|
||||
disabled={sending}
|
||||
after={
|
||||
<Checkbox
|
||||
checked={selected}
|
||||
readOnly
|
||||
variant="Primary"
|
||||
disabled={sending}
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation();
|
||||
onToggle();
|
||||
}}
|
||||
/>
|
||||
}
|
||||
before={
|
||||
<Avatar size="200" radii="300">
|
||||
<RoomAvatar
|
||||
@@ -93,6 +108,21 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
|
||||
const [sending, setSending] = useState(false);
|
||||
const [sentTo, setSentTo] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
// Selection persists across query changes: a room selected then filtered out
|
||||
// of the rendered slice stays selected.
|
||||
const [selectedRoomIds, setSelectedRoomIds] = useState<Set<string>>(new Set());
|
||||
|
||||
const toggleRoom = useCallback((roomId: string) => {
|
||||
setSelectedRoomIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(roomId)) {
|
||||
next.delete(roomId);
|
||||
} else {
|
||||
next.add(roomId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const allRooms = useMemo(
|
||||
() =>
|
||||
@@ -109,63 +139,52 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
|
||||
return allRooms.filter((r) => r.name.toLowerCase().includes(q));
|
||||
}, [allRooms, query]);
|
||||
|
||||
/**
|
||||
* Build the content to forward:
|
||||
* - undecryptable events are refused (would forward `m.bad.encrypted` junk)
|
||||
* - edited messages forward the LATEST edit (`m.new_content`), not the
|
||||
* original pre-edit body
|
||||
* - reply fallbacks (`> <@user> …` quote + `<mx-reply>` block) are stripped
|
||||
* along with the `m.relates_to` reply/thread relation, so the forwarded
|
||||
* message stands alone in the target room
|
||||
*/
|
||||
const buildForwardContent = useCallback((): Record<string, unknown> | undefined => {
|
||||
if (mEvent.isDecryptionFailure()) return undefined;
|
||||
const sendToSelected = useCallback(async () => {
|
||||
if (sending || selectedRoomIds.size === 0) return;
|
||||
const fwdContent = buildForwardContent(mx, mEvent);
|
||||
if (!fwdContent) {
|
||||
setError('This message could not be decrypted, so it cannot be forwarded.');
|
||||
return;
|
||||
}
|
||||
setSending(true);
|
||||
setError(null);
|
||||
|
||||
let content = { ...mEvent.getContent() };
|
||||
const ids = [...selectedRoomIds];
|
||||
const results = await Promise.allSettled(
|
||||
// threadId-aware overload (P3-8): explicit null = send to the main timeline.
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
ids.map((id) => mx.sendEvent(id, null, mEvent.getType() as any, fwdContent)),
|
||||
);
|
||||
|
||||
const eventId = mEvent.getId();
|
||||
const room = mx.getRoom(mEvent.getRoomId());
|
||||
if (eventId && room) {
|
||||
const editedEvent = getEditedEvent(eventId, mEvent, room.getUnfilteredTimelineSet());
|
||||
const newContent = editedEvent?.getContent()['m.new_content'];
|
||||
if (newContent && typeof newContent === 'object') {
|
||||
content = { ...(newContent as Record<string, unknown>) };
|
||||
const failedIds: string[] = [];
|
||||
const failedNames: string[] = [];
|
||||
results.forEach((result, i) => {
|
||||
if (result.status === 'rejected') {
|
||||
failedIds.push(ids[i]);
|
||||
failedNames.push(mx.getRoom(ids[i])?.name ?? ids[i]);
|
||||
}
|
||||
});
|
||||
|
||||
const total = ids.length;
|
||||
const failed = failedNames.length;
|
||||
const succeeded = total - failed;
|
||||
|
||||
if (failed === 0) {
|
||||
setSentTo(`Forwarded to ${total} ${total === 1 ? 'room' : 'rooms'}`);
|
||||
setTimeout(onClose, 1400);
|
||||
return;
|
||||
}
|
||||
|
||||
delete content['m.relates_to'];
|
||||
if (typeof content.body === 'string') {
|
||||
content.body = trimReplyFromBody(content.body);
|
||||
setSending(false);
|
||||
// Prune to only the failures so a retry doesn't re-send to rooms that
|
||||
// already succeeded (duplicate messages).
|
||||
setSelectedRoomIds(new Set(failedIds));
|
||||
if (succeeded === 0) {
|
||||
setError('Failed to forward. Try again.');
|
||||
return;
|
||||
}
|
||||
if (typeof content.formatted_body === 'string') {
|
||||
content.formatted_body = trimReplyFromFormattedBody(content.formatted_body);
|
||||
}
|
||||
return content;
|
||||
}, [mx, mEvent]);
|
||||
|
||||
const forward = useCallback(
|
||||
async (room: Room) => {
|
||||
if (sending) return;
|
||||
const fwdContent = buildForwardContent();
|
||||
if (!fwdContent) {
|
||||
setError('This message could not be decrypted, so it cannot be forwarded.');
|
||||
return;
|
||||
}
|
||||
setSending(true);
|
||||
setError(null);
|
||||
try {
|
||||
// threadId-aware overload (P3-8): explicit null = send to the main timeline.
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
await mx.sendEvent(room.roomId, null, mEvent.getType() as any, fwdContent);
|
||||
setSentTo(room.name);
|
||||
setTimeout(onClose, 1400);
|
||||
} catch {
|
||||
setSending(false);
|
||||
setError(`Failed to forward to ${room.name}. Try again.`);
|
||||
}
|
||||
},
|
||||
[mx, mEvent, onClose, sending, buildForwardContent],
|
||||
);
|
||||
setError(`Forwarded to ${succeeded}/${total}. Failed: ${failedNames.join(', ')}.`);
|
||||
}, [mx, mEvent, onClose, sending, selectedRoomIds]);
|
||||
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
@@ -237,50 +256,72 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
|
||||
gap="300"
|
||||
style={{ padding: config.space.S400 }}
|
||||
>
|
||||
<Text size="T300">✓ Forwarded to {sentTo}</Text>
|
||||
<Text size="T300">✓ {sentTo}</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<Box grow="Yes" style={{ minHeight: 0, position: 'relative' }}>
|
||||
<Scroll size="300" hideTrack visibility="Hover">
|
||||
<Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
|
||||
{filtered.slice(0, 60).map((room) => (
|
||||
<RoomRow
|
||||
key={room.roomId}
|
||||
room={room}
|
||||
dm={directs.has(room.roomId)}
|
||||
useAuthentication={useAuthentication}
|
||||
onClick={() => forward(room)}
|
||||
sending={sending}
|
||||
/>
|
||||
))}
|
||||
{filtered.length === 0 && (
|
||||
<Box
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
style={{ padding: config.space.S400 }}
|
||||
>
|
||||
<Text size="T300" priority="300">
|
||||
No rooms found
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Scroll>
|
||||
{sending && (
|
||||
<Box
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background: 'rgba(0,0,0,0.35)',
|
||||
borderRadius: config.radii.R500,
|
||||
}}
|
||||
<>
|
||||
<Box grow="Yes" style={{ minHeight: 0, position: 'relative' }}>
|
||||
<Scroll size="300" hideTrack visibility="Hover">
|
||||
<Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
|
||||
{filtered.slice(0, 60).map((room) => (
|
||||
<RoomRow
|
||||
key={room.roomId}
|
||||
room={room}
|
||||
dm={directs.has(room.roomId)}
|
||||
useAuthentication={useAuthentication}
|
||||
selected={selectedRoomIds.has(room.roomId)}
|
||||
onToggle={() => toggleRoom(room.roomId)}
|
||||
sending={sending}
|
||||
/>
|
||||
))}
|
||||
{filtered.length === 0 && (
|
||||
<Box
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
style={{ padding: config.space.S400 }}
|
||||
>
|
||||
<Text size="T300" priority="300">
|
||||
No rooms found
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Scroll>
|
||||
{sending && (
|
||||
<Box
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background: 'rgba(0,0,0,0.35)',
|
||||
borderRadius: config.radii.R500,
|
||||
}}
|
||||
>
|
||||
<Spinner variant="Secondary" size="400" />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Line size="300" />
|
||||
<Box
|
||||
shrink="No"
|
||||
direction="Column"
|
||||
style={{ padding: `${config.space.S200} ${config.space.S400}` }}
|
||||
>
|
||||
<Button
|
||||
variant="Primary"
|
||||
size="400"
|
||||
radii="400"
|
||||
disabled={selectedRoomIds.size === 0 || sending}
|
||||
before={sending && <Spinner variant="Primary" fill="Solid" size="200" />}
|
||||
onClick={sendToSelected}
|
||||
>
|
||||
<Spinner variant="Secondary" size="400" />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Text size="B400">
|
||||
Send to {selectedRoomIds.size} {selectedRoomIds.size === 1 ? 'room' : 'rooms'}
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
</FocusTrap>
|
||||
|
||||
@@ -56,6 +56,7 @@ import {
|
||||
getMemberDisplayName,
|
||||
} from '../../../utils/room';
|
||||
import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { messageAriaLabel } from '../../../utils/a11y';
|
||||
import { MessageLayout, MessageSpacing } from '../../../state/settings';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
|
||||
@@ -972,6 +973,10 @@ export const Message = React.memo(
|
||||
[MsgAppearClass]: playAppear,
|
||||
[MentionHighlightPulse]: playMentionPulse,
|
||||
})}
|
||||
role="article"
|
||||
aria-label={
|
||||
collapse ? messageAriaLabel(senderDisplayName, mEvent.getTs(), hour24Clock) : undefined
|
||||
}
|
||||
tabIndex={0}
|
||||
space={messageSpacing}
|
||||
collapse={collapse}
|
||||
|
||||
@@ -51,7 +51,13 @@ import { UseStateProvider } from '../../../components/UseStateProvider';
|
||||
import { EmojiBoard } from '../../../components/emoji-board';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { getEditedEvent, getMentionContent, trimReplyFromFormattedBody } from '../../../utils/room';
|
||||
import {
|
||||
getEditedEvent,
|
||||
getMemberDisplayName,
|
||||
getMentionContent,
|
||||
trimReplyFromFormattedBody,
|
||||
} from '../../../utils/room';
|
||||
import { getMxIdLocalPart } from '../../../utils/matrix';
|
||||
import { mobileOrTablet } from '../../../utils/user-agent';
|
||||
import { useComposingCheck } from '../../../hooks/useComposingCheck';
|
||||
|
||||
@@ -66,6 +72,12 @@ export const MessageEditor = as<'div', MessageEditorProps>(
|
||||
({ room, roomId, mEvent, imagePackRooms, onCancel, ...props }, ref) => {
|
||||
const mx = useMatrixClient();
|
||||
const editor = useEditor();
|
||||
// Accessible name for the edit textbox so screen readers announce which
|
||||
// message is being edited (a11y, P3-4).
|
||||
const editSenderId = mEvent.getSender();
|
||||
const editSenderName = editSenderId
|
||||
? (getMemberDisplayName(room, editSenderId) ?? getMxIdLocalPart(editSenderId) ?? editSenderId)
|
||||
: '';
|
||||
const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
|
||||
const [globalToolbar] = useSetting(settingsAtom, 'editorToolbar');
|
||||
const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
|
||||
@@ -259,6 +271,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
|
||||
<CustomEditor
|
||||
editor={editor}
|
||||
placeholder="Edit message..."
|
||||
ariaLabel={editSenderId ? `Editing message from ${editSenderName}` : 'Edit message'}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
bottom={
|
||||
|
||||
@@ -106,7 +106,6 @@ export const Reactions = as<'div', ReactionsProps>(
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
returnFocusOnDeactivate: false,
|
||||
onDeactivate: () => setViewer(false),
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
color,
|
||||
config,
|
||||
Dialog,
|
||||
Header,
|
||||
@@ -43,15 +44,25 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
|
||||
const modalStyle = useModalStyle(320);
|
||||
const { addReminder } = useReminders();
|
||||
const presets = useMemo(() => getPresets(), []);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handlePick = async (ms: number) => {
|
||||
await addReminder({
|
||||
roomId,
|
||||
eventId,
|
||||
timestamp: Date.now() + ms,
|
||||
message: previewText || 'Reminder',
|
||||
});
|
||||
onClose();
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await addReminder({
|
||||
roomId,
|
||||
eventId,
|
||||
timestamp: Date.now() + ms,
|
||||
message: previewText || 'Reminder',
|
||||
});
|
||||
onClose();
|
||||
} catch {
|
||||
setBusy(false);
|
||||
setError('Could not set reminder. Try again.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -108,6 +119,7 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
disabled={busy}
|
||||
onClick={() => handlePick(p.ms)}
|
||||
>
|
||||
<Text size="B300" truncate>
|
||||
@@ -115,6 +127,14 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
|
||||
</Text>
|
||||
</Button>
|
||||
))}
|
||||
{error && (
|
||||
<Text
|
||||
size="T200"
|
||||
style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
|
||||
>
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Dialog>
|
||||
</FocusTrap>
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
|
||||
import { buildForwardContent } from './forwardContent';
|
||||
|
||||
// Pure content builder buildForwardContent: refuses undecryptable events, forwards
|
||||
// the latest edit (`m.new_content`), and strips reply fallbacks + `m.relates_to`.
|
||||
// MatrixClient / MatrixEvent are mocked minimally. getEditedEvent reads edits off
|
||||
// `timelineSet.relations.getChildEventsForEvent(...).getRelations()`, so the base
|
||||
// client returns no child edits and the edit test injects one.
|
||||
|
||||
const SENDER = '@me:example.org';
|
||||
|
||||
type EventOptions = {
|
||||
content?: Record<string, unknown>;
|
||||
type?: string;
|
||||
id?: string;
|
||||
roomId?: string;
|
||||
decryptionFailure?: boolean;
|
||||
ts?: number;
|
||||
};
|
||||
|
||||
const makeEvent = (options: EventOptions = {}): MatrixEvent => {
|
||||
const {
|
||||
content = {},
|
||||
type = 'm.room.message',
|
||||
id = '$evt:example.org',
|
||||
roomId = '!room:example.org',
|
||||
decryptionFailure = false,
|
||||
ts = 0,
|
||||
} = options;
|
||||
|
||||
return {
|
||||
getContent: () => content,
|
||||
getType: () => type,
|
||||
getId: () => id,
|
||||
getRoomId: () => roomId,
|
||||
getSender: () => SENDER,
|
||||
getTs: () => ts,
|
||||
isDecryptionFailure: () => decryptionFailure,
|
||||
} as unknown as MatrixEvent;
|
||||
};
|
||||
|
||||
// Base client: the timeline reports no `m.replace` edits, so the original content
|
||||
// is forwarded unchanged.
|
||||
const makeClient = (): MatrixClient =>
|
||||
({
|
||||
getRoom: () => ({
|
||||
getUnfilteredTimelineSet: () => ({
|
||||
relations: {
|
||||
getChildEventsForEvent: () => null,
|
||||
},
|
||||
}),
|
||||
}),
|
||||
}) as unknown as MatrixClient;
|
||||
|
||||
test('plain text forwards the body and strips m.relates_to', () => {
|
||||
const mx = makeClient();
|
||||
const mEvent = makeEvent({
|
||||
content: {
|
||||
msgtype: 'm.text',
|
||||
body: 'hello world',
|
||||
'm.relates_to': { rel_type: 'm.thread', event_id: '$root:example.org' },
|
||||
},
|
||||
});
|
||||
|
||||
const content = buildForwardContent(mx, mEvent);
|
||||
|
||||
assert.ok(content);
|
||||
assert.equal(content.body, 'hello world');
|
||||
assert.equal(content.msgtype, 'm.text');
|
||||
assert.equal(content['m.relates_to'], undefined);
|
||||
});
|
||||
|
||||
test('reply quote is stripped from body and formatted_body', () => {
|
||||
const mx = makeClient();
|
||||
const mEvent = makeEvent({
|
||||
content: {
|
||||
msgtype: 'm.text',
|
||||
body: '> <@alice:example.org> original\n\nmy reply',
|
||||
format: 'org.matrix.custom.html',
|
||||
formatted_body: '<mx-reply><blockquote>original</blockquote></mx-reply>my reply',
|
||||
'm.relates_to': { 'm.in_reply_to': { event_id: '$root:example.org' } },
|
||||
},
|
||||
});
|
||||
|
||||
const content = buildForwardContent(mx, mEvent);
|
||||
|
||||
assert.ok(content);
|
||||
assert.equal(content.body, 'my reply');
|
||||
assert.equal(content.formatted_body, 'my reply');
|
||||
assert.equal(content['m.relates_to'], undefined);
|
||||
});
|
||||
|
||||
test('decryption failure returns undefined', () => {
|
||||
const mx = makeClient();
|
||||
const mEvent = makeEvent({
|
||||
content: { msgtype: 'm.bad.encrypted' },
|
||||
decryptionFailure: true,
|
||||
});
|
||||
|
||||
assert.equal(buildForwardContent(mx, mEvent), undefined);
|
||||
});
|
||||
|
||||
test('edited message forwards m.new_content', () => {
|
||||
const mEvent = makeEvent({
|
||||
content: {
|
||||
msgtype: 'm.text',
|
||||
body: 'original body',
|
||||
'm.relates_to': { rel_type: 'm.thread', event_id: '$root:example.org' },
|
||||
},
|
||||
});
|
||||
|
||||
// The latest `m.replace` edit carries the new content under `m.new_content`.
|
||||
const editEvent = makeEvent({
|
||||
content: { 'm.new_content': { msgtype: 'm.text', body: 'edited body' } },
|
||||
ts: 100,
|
||||
});
|
||||
const mx = {
|
||||
getRoom: () => ({
|
||||
getUnfilteredTimelineSet: () => ({
|
||||
relations: {
|
||||
getChildEventsForEvent: () => ({
|
||||
getRelations: () => [editEvent],
|
||||
}),
|
||||
},
|
||||
}),
|
||||
}),
|
||||
} as unknown as MatrixClient;
|
||||
|
||||
const content = buildForwardContent(mx, mEvent);
|
||||
|
||||
assert.ok(content);
|
||||
assert.equal(content.body, 'edited body');
|
||||
assert.equal(content.msgtype, 'm.text');
|
||||
assert.equal(content['m.new_content'], undefined);
|
||||
assert.equal(content['m.relates_to'], undefined);
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
|
||||
import { getEditedEvent, trimReplyFromBody, trimReplyFromFormattedBody } from '../../../utils/room';
|
||||
|
||||
/**
|
||||
* Build the content to forward:
|
||||
* - undecryptable events are refused (would forward `m.bad.encrypted` junk)
|
||||
* - edited messages forward the LATEST edit (`m.new_content`), not the
|
||||
* original pre-edit body
|
||||
* - reply fallbacks (`> <@user> …` quote + `<mx-reply>` block) are stripped
|
||||
* along with the `m.relates_to` reply/thread relation, so the forwarded
|
||||
* message stands alone in the target room
|
||||
*/
|
||||
export function buildForwardContent(
|
||||
mx: MatrixClient,
|
||||
mEvent: MatrixEvent,
|
||||
): Record<string, unknown> | undefined {
|
||||
if (mEvent.isDecryptionFailure()) return undefined;
|
||||
|
||||
let content = { ...mEvent.getContent() };
|
||||
|
||||
const eventId = mEvent.getId();
|
||||
const room = mx.getRoom(mEvent.getRoomId());
|
||||
if (eventId && room) {
|
||||
const editedEvent = getEditedEvent(eventId, mEvent, room.getUnfilteredTimelineSet());
|
||||
const newContent = editedEvent?.getContent()['m.new_content'];
|
||||
if (newContent && typeof newContent === 'object') {
|
||||
content = { ...(newContent as Record<string, unknown>) };
|
||||
}
|
||||
}
|
||||
|
||||
delete content['m.relates_to'];
|
||||
if (typeof content.body === 'string') {
|
||||
content.body = trimReplyFromBody(content.body);
|
||||
}
|
||||
if (typeof content.formatted_body === 'string') {
|
||||
content.formatted_body = trimReplyFromFormattedBody(content.formatted_body);
|
||||
}
|
||||
return content;
|
||||
}
|
||||
@@ -123,6 +123,10 @@ export function ThreadPanel({ room, threadId, requestClose }: ThreadPanelProps)
|
||||
useCallback(
|
||||
(evt) => {
|
||||
if (isKeyHotkey('escape', evt)) {
|
||||
// The composer preventDefaults Escape when it consumes it (dismissing
|
||||
// autocomplete / clearing a reply draft). Don't close the panel in
|
||||
// that case — only when Escape wasn't already handled.
|
||||
if (evt.defaultPrevented) return;
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
requestClose();
|
||||
|
||||
@@ -11,6 +11,15 @@ export const ThreadTimelineContent = style({
|
||||
padding: `${config.space.S400} 0`,
|
||||
});
|
||||
|
||||
export const ThreadTimelineFloat = style({
|
||||
position: 'absolute',
|
||||
bottom: config.space.S400,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
zIndex: 1,
|
||||
minWidth: 'max-content',
|
||||
});
|
||||
|
||||
export const ThreadCentered = style({
|
||||
height: '100%',
|
||||
padding: config.space.S700,
|
||||
|
||||
@@ -29,7 +29,7 @@ import { Editor } from 'slate';
|
||||
import { ReactEditor } from 'slate-react';
|
||||
import to from 'await-to-js';
|
||||
import { useAtomValue, useSetAtom } from 'jotai';
|
||||
import { Badge, Box, Line, Scroll, Spinner, Text, color, config } from 'folds';
|
||||
import { Badge, Box, Chip, Icon, Icons, Line, Scroll, Spinner, Text, color, config } from 'folds';
|
||||
import classNames from 'classnames';
|
||||
import { Opts as LinkifyOpts } from 'linkifyjs';
|
||||
import { eventWithShortcode, factoryEventSentBy, getMxIdLocalPart } from '../../../utils/matrix';
|
||||
@@ -459,6 +459,14 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
|
||||
}
|
||||
}, [scrollToBottomCount]);
|
||||
|
||||
const handleJumpToBottom = useCallback(() => {
|
||||
scrollToBottomRef.current.count += 1;
|
||||
scrollToBottomRef.current.smooth = true;
|
||||
// Flip atBottom so the layout effect re-runs (count re-read) and live
|
||||
// events resume sticking to the bottom.
|
||||
setAtBottom(true);
|
||||
}, []);
|
||||
|
||||
// Scroll in-place editor into view.
|
||||
useEffect(() => {
|
||||
if (editId) {
|
||||
@@ -949,6 +957,19 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
|
||||
<span ref={atBottomAnchorRef} />
|
||||
</Box>
|
||||
</Scroll>
|
||||
{!atBottom && (
|
||||
<Box className={css.ThreadTimelineFloat} justifyContent="Center" alignItems="Center">
|
||||
<Chip
|
||||
variant="SurfaceVariant"
|
||||
radii="Pill"
|
||||
outlined
|
||||
before={<Icon size="50" src={Icons.ArrowBottom} />}
|
||||
onClick={handleJumpToBottom}
|
||||
>
|
||||
<Text size="L400">Jump to Latest</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
)}
|
||||
{editHistoryEvent && (
|
||||
<EditHistoryModal
|
||||
room={room}
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { EventStatus, MatrixEvent, RelationType } from 'matrix-js-sdk';
|
||||
import { getThreadSummary, isPendingThreadReply } from './threadSummary';
|
||||
import { getThreadSummary, isPendingThreadReply } from './threadSummaryData';
|
||||
|
||||
// getThreadSummary reads either the live Thread (preferred) or the
|
||||
// server-aggregated `m.thread` bundle. We stub only the members it touches and
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
ThreadEvent,
|
||||
} from 'matrix-js-sdk';
|
||||
import { getLinkedTimelines } from '../RoomTimeline';
|
||||
import { isPendingThreadReply } from './threadSummary';
|
||||
import { isPendingThreadReply } from './threadSummaryData';
|
||||
|
||||
/**
|
||||
* Resolve (or bootstrap) the live {@link Thread} for a root event.
|
||||
|
||||
@@ -247,7 +247,6 @@ export function Search({ requestClose }: SearchProps) {
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: () => inputRef.current,
|
||||
returnFocusOnDeactivate: false,
|
||||
allowOutsideClick: true,
|
||||
clickOutsideDeactivates: true,
|
||||
onDeactivate: requestClose,
|
||||
@@ -257,7 +256,13 @@ export function Search({ requestClose }: SearchProps) {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Modal size="400" style={{ maxHeight: toRem(400), borderRadius: config.radii.R500 }}>
|
||||
<Modal
|
||||
size="400"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Search"
|
||||
style={{ maxHeight: toRem(400), borderRadius: config.radii.R500 }}
|
||||
>
|
||||
<Box
|
||||
shrink="No"
|
||||
style={{ padding: config.space.S400, paddingBottom: 0 }}
|
||||
@@ -270,6 +275,7 @@ export function Search({ requestClose }: SearchProps) {
|
||||
radii="400"
|
||||
outlined
|
||||
placeholder="Search"
|
||||
aria-label="Search rooms"
|
||||
before={<Icon size="200" src={Icons.Search} />}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
|
||||
@@ -102,7 +102,7 @@ import { useMessageLayoutItems } from '../../../hooks/useMessageLayout';
|
||||
import { useMessageSpacingItems } from '../../../hooks/useMessageSpacing';
|
||||
import { SequenceCardStyle } from '../styles.css';
|
||||
import { useTauriUpdater } from '../../../hooks/useTauriUpdater';
|
||||
import { isTauri as isTauriEnv } from '../../../hooks/useTauri';
|
||||
import { isTauri as isTauriEnv, invokeTauri, tauriInvoke } from '../../../hooks/useTauri';
|
||||
import { customWindowChromeAtom } from '../../../state/customWindowChrome';
|
||||
import { useDateFormatItems } from '../../../hooks/useDateFormat';
|
||||
import { playCallJoinSound } from '../../../utils/callSounds';
|
||||
@@ -129,6 +129,38 @@ function DesktopChromeSetting() {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* P6-1 — "Launch on login" toggle (desktop only). Renders nothing in the
|
||||
* browser. Reads the current state from the `autostart` plugin on mount and
|
||||
* enables/disables it via the plugin commands when flipped. Not backed by an
|
||||
* atom — the OS registration is the source of truth, mirrored into local state.
|
||||
*/
|
||||
function AutostartSetting() {
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
tauriInvoke()?.('plugin:autostart|is_enabled')
|
||||
.then((value) => setEnabled(value === true))
|
||||
.catch(() => undefined);
|
||||
}, []);
|
||||
|
||||
const handleChange = (value: boolean) => {
|
||||
invokeTauri(value ? 'plugin:autostart|enable' : 'plugin:autostart|disable');
|
||||
setEnabled(value);
|
||||
};
|
||||
|
||||
if (!isTauriEnv()) return null;
|
||||
return (
|
||||
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
||||
<SettingTile
|
||||
title="Launch on login"
|
||||
description="Start Lotus Chat automatically when you sign in to your computer."
|
||||
after={<Switch variant="Primary" value={enabled} onChange={handleChange} />}
|
||||
/>
|
||||
</SequenceCard>
|
||||
);
|
||||
}
|
||||
|
||||
type ThemeSelectorProps = {
|
||||
themeNames: Record<string, string>;
|
||||
themes: Theme[];
|
||||
@@ -443,6 +475,7 @@ function Appearance() {
|
||||
</SequenceCard>
|
||||
|
||||
<DesktopChromeSetting />
|
||||
<AutostartSetting />
|
||||
|
||||
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
||||
<SettingTile
|
||||
@@ -531,6 +564,7 @@ function Appearance() {
|
||||
Intensity: {nightLightOpacity}%
|
||||
</Text>
|
||||
<input
|
||||
aria-label="Night light intensity"
|
||||
type="range"
|
||||
min={5}
|
||||
max={80}
|
||||
@@ -1663,6 +1697,7 @@ function Calls() {
|
||||
<Text size="T200">{callDenoiseGateThreshold} dB</Text>
|
||||
</Box>
|
||||
<input
|
||||
aria-label="Noise gate threshold"
|
||||
type="range"
|
||||
min="-100"
|
||||
max="0"
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
import { DefaultReset, color, config, toRem } from 'folds';
|
||||
|
||||
export const ShortcutList = style([
|
||||
DefaultReset,
|
||||
{
|
||||
margin: 0,
|
||||
},
|
||||
]);
|
||||
|
||||
export const ShortcutRow = style({
|
||||
padding: `${config.space.S100} 0`,
|
||||
});
|
||||
|
||||
export const ShortcutTerm = style([
|
||||
DefaultReset,
|
||||
{
|
||||
flexGrow: 1,
|
||||
},
|
||||
]);
|
||||
|
||||
export const ShortcutKeys = style([
|
||||
DefaultReset,
|
||||
{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: config.space.S100,
|
||||
flexShrink: 0,
|
||||
},
|
||||
]);
|
||||
|
||||
export const Kbd = style([
|
||||
DefaultReset,
|
||||
{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minWidth: toRem(20),
|
||||
padding: `0 ${config.space.S200}`,
|
||||
height: toRem(24),
|
||||
fontFamily: 'inherit',
|
||||
fontSize: toRem(12),
|
||||
lineHeight: toRem(24),
|
||||
color: color.SurfaceVariant.OnContainer,
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
|
||||
borderRadius: config.radii.R300,
|
||||
},
|
||||
]);
|
||||
@@ -0,0 +1,208 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { atom, useAtom, useSetAtom } from 'jotai';
|
||||
import {
|
||||
Box,
|
||||
Dialog,
|
||||
Header,
|
||||
Icon,
|
||||
IconButton,
|
||||
Icons,
|
||||
Line,
|
||||
Overlay,
|
||||
OverlayBackdrop,
|
||||
OverlayCenter,
|
||||
Scroll,
|
||||
Text,
|
||||
config,
|
||||
} from 'folds';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import { editableActiveElement } from '../../utils/dom';
|
||||
import { useKeyDown } from '../../hooks/useKeyDown';
|
||||
import { useModalStyle } from '../../hooks/useModalStyle';
|
||||
import { useSetting } from '../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../state/settings';
|
||||
import { isMacOS } from '../../utils/user-agent';
|
||||
import { KeySymbol } from '../../utils/key-symbol';
|
||||
import * as css from './KeyboardShortcutsDialog.css';
|
||||
|
||||
/** Global open-state for the keyboard shortcuts help dialog. */
|
||||
export const keyboardShortcutsDialogAtom = atom<boolean>(false);
|
||||
|
||||
/** Read/control the keyboard shortcuts dialog open-state. */
|
||||
export function useKeyboardShortcutsDialog() {
|
||||
const [open, setOpen] = useAtom(keyboardShortcutsDialogAtom);
|
||||
const openDialog = useCallback(() => setOpen(true), [setOpen]);
|
||||
const closeDialog = useCallback(() => setOpen(false), [setOpen]);
|
||||
return { open, openDialog, closeDialog };
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the global `Shift + /` (`?`) shortcut that opens the keyboard
|
||||
* shortcuts help dialog. Ignored while the user is typing into an input,
|
||||
* textarea or contenteditable so it never steals a literal `?` character.
|
||||
*
|
||||
* Mount once in the client shell (e.g. `ClientNonUIFeatures`).
|
||||
*/
|
||||
export function useKeyboardShortcutsTrigger() {
|
||||
const setOpen = useSetAtom(keyboardShortcutsDialogAtom);
|
||||
useKeyDown(
|
||||
window,
|
||||
useCallback(
|
||||
(evt: KeyboardEvent) => {
|
||||
// Never intercept `?` while the user is typing into a field/editor.
|
||||
if (editableActiveElement()) return;
|
||||
// `?` is produced by Shift + `/` on the common layouts.
|
||||
if (evt.key === '?') {
|
||||
evt.preventDefault();
|
||||
// Stop RoomView's window-level "type any char → focus composer"
|
||||
// handler from also firing — otherwise focus lands in the composer
|
||||
// behind the dialog and Escape gets swallowed by the contenteditable.
|
||||
evt.stopImmediatePropagation();
|
||||
setOpen(true);
|
||||
}
|
||||
},
|
||||
[setOpen],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
type ShortcutRow = {
|
||||
description: string;
|
||||
keys: string[];
|
||||
};
|
||||
|
||||
type ShortcutSection = {
|
||||
title: string;
|
||||
rows: ShortcutRow[];
|
||||
};
|
||||
|
||||
function ShortcutKeys({ keys }: { keys: string[] }) {
|
||||
return (
|
||||
<Box as="dd" className={css.ShortcutKeys}>
|
||||
{keys.map((key, index) => (
|
||||
<kbd key={`${key}-${index}`} className={css.Kbd}>
|
||||
{key}
|
||||
</kbd>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessible keyboard shortcuts help dialog. Renders (as a modal overlay) only
|
||||
* while `keyboardShortcutsDialogAtom` is `true`. Open it with the `?` shortcut
|
||||
* (see `useKeyboardShortcutsTrigger`) or via `useKeyboardShortcutsDialog`.
|
||||
*/
|
||||
export function KeyboardShortcutsDialog() {
|
||||
const { open, closeDialog } = useKeyboardShortcutsDialog();
|
||||
const modalStyle = useModalStyle(480);
|
||||
const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
|
||||
|
||||
const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const sections: ShortcutSection[] = [
|
||||
{
|
||||
title: 'General',
|
||||
rows: [
|
||||
{ description: 'Show keyboard shortcuts', keys: ['?'] },
|
||||
{ description: 'Close open panel, otherwise mark room as read', keys: [KeySymbol.Escape] },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Composer',
|
||||
rows: [
|
||||
{ description: 'Focus the message composer', keys: ['Any character'] },
|
||||
{
|
||||
description: 'Send message',
|
||||
keys: enterForNewline ? [modKey, 'Enter'] : ['Enter'],
|
||||
},
|
||||
{
|
||||
description: 'Insert a new line',
|
||||
keys: enterForNewline ? ['Enter'] : [KeySymbol.Shift, 'Enter'],
|
||||
},
|
||||
{ description: 'Send message (always)', keys: [modKey, 'Enter'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Messages',
|
||||
rows: [
|
||||
{ description: 'Reveal message actions (react, reply, more)', keys: ['Hover / focus'] },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: closeDialog,
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Dialog
|
||||
variant="Surface"
|
||||
aria-labelledby="keyboard-shortcuts-dialog-title"
|
||||
style={modalStyle}
|
||||
>
|
||||
<Header
|
||||
style={{
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
}}
|
||||
variant="Surface"
|
||||
size="500"
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text as="h2" size="H4" id="keyboard-shortcuts-dialog-title">
|
||||
Keyboard Shortcuts
|
||||
</Text>
|
||||
</Box>
|
||||
<IconButton size="300" onClick={closeDialog} radii="300" aria-label="Close">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Header>
|
||||
<Scroll size="300" hideTrack visibility="Hover">
|
||||
<Box style={{ padding: config.space.S400 }} direction="Column" gap="500">
|
||||
{sections.map((section, sectionIndex) => (
|
||||
<Box key={section.title} direction="Column" gap="300">
|
||||
{sectionIndex > 0 && <Line variant="Surface" size="300" />}
|
||||
<Text size="L400" priority="400">
|
||||
{section.title}
|
||||
</Text>
|
||||
<Box as="dl" className={css.ShortcutList} direction="Column">
|
||||
{section.rows.map((row) => (
|
||||
<Box
|
||||
key={row.description}
|
||||
className={css.ShortcutRow}
|
||||
direction="Row"
|
||||
alignItems="Center"
|
||||
gap="200"
|
||||
>
|
||||
<Text as="dt" className={css.ShortcutTerm} size="T300">
|
||||
{row.description}
|
||||
</Text>
|
||||
<ShortcutKeys keys={row.keys} />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
<Text size="T200" priority="300">
|
||||
{enterForNewline
|
||||
? 'Enter inserts a new line while “Enter for newline” is enabled in Settings.'
|
||||
: 'Enter sends the message. Enable “Enter for newline” in Settings to swap this.'}
|
||||
</Text>
|
||||
</Box>
|
||||
</Scroll>
|
||||
</Dialog>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './KeyboardShortcutsDialog';
|
||||
@@ -2,11 +2,26 @@ import { useEffect, useState } from 'react';
|
||||
import { ClientEvent, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
|
||||
import { getRecentEmojis } from '../plugins/recent-emoji';
|
||||
import { AccountDataEvent } from '../../types/matrix/accountData';
|
||||
import { IEmoji } from '../plugins/emoji';
|
||||
import { IEmoji, loadEmojiData } from '../plugins/emoji';
|
||||
|
||||
export const useRecentEmoji = (mx: MatrixClient, limit?: number): IEmoji[] => {
|
||||
const [recentEmoji, setRecentEmoji] = useState(() => getRecentEmojis(mx, limit));
|
||||
|
||||
// Recent emojis are resolved against the (now lazily loaded) emojibase data
|
||||
// via getRecentEmojis. Recompute once loadEmojiData has populated it so the
|
||||
// recent list fills in on first open.
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
loadEmojiData()
|
||||
.then(() => {
|
||||
if (alive) setRecentEmoji(getRecentEmojis(mx, limit));
|
||||
})
|
||||
.catch(() => undefined);
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [mx, limit]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleAccountData = (event: MatrixEvent) => {
|
||||
if (event.getType() !== AccountDataEvent.ElementRecentEmoji) return;
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { manualDndAtom } from '../state/manualDnd';
|
||||
import { useTauriEvent } from './useTauri';
|
||||
|
||||
/** Detail shape of the `lotus-dnd-changed` event emitted by the native side. */
|
||||
type DndChangedDetail = {
|
||||
active: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* P6-1 — Tray "Do Not Disturb" → notification suppression (desktop). Subscribes
|
||||
* to the native `lotus-dnd-changed` event (emitted when the user toggles the
|
||||
* tray "Do Not Disturb" item, `{ active }`) and mirrors it into `manualDndAtom`,
|
||||
* which the notification gate reads to suppress notifications while DND is on.
|
||||
* Inert in the browser, since `useTauriEvent` only listens under Tauri.
|
||||
*/
|
||||
export function useTauriDnd(): void {
|
||||
const setDnd = useSetAtom(manualDndAtom);
|
||||
|
||||
useTauriEvent<DndChangedDetail>('lotus-dnd-changed', ({ active }) => setDnd(active));
|
||||
}
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
RoomEventHandlerMap,
|
||||
ThreadEvent,
|
||||
} from 'matrix-js-sdk';
|
||||
import { getThreadSummary, ThreadSummaryData } from '../features/room/thread/threadSummary';
|
||||
import { getThreadSummary, ThreadSummaryData } from '../features/room/thread/threadSummaryData';
|
||||
import { threadNotificationsAtom } from '../state/threadNotifications';
|
||||
import { getThreadNotificationMode, ThreadNotificationMode } from '../utils/threadNotifications';
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
ThreadEvent,
|
||||
} from 'matrix-js-sdk';
|
||||
import { focusAssistActiveAtom } from '../../state/focusAssist';
|
||||
import { manualDndAtom } from '../../state/manualDnd';
|
||||
import { roomToUnreadAtom, unreadEqual, unreadInfoToUnread } from '../../state/room/roomToUnread';
|
||||
import LogoSVG from '../../../../public/res/lotus.png';
|
||||
import LogoUnreadSVG from '../../../../public/res/lotus-unread.png';
|
||||
@@ -42,6 +43,7 @@ import { toastQueueAtom } from '../../state/toast';
|
||||
import { useReminders } from '../../hooks/useReminders';
|
||||
import { useTauriUpdater } from '../../hooks/useTauriUpdater';
|
||||
import { TauriDesktopFeatures } from '../../components/TauriDesktopFeatures';
|
||||
import { KeyboardShortcutsDialog, useKeyboardShortcutsTrigger } from '../../features/shortcuts';
|
||||
import { useRoomsListener } from '../../hooks/useRoomsListener';
|
||||
import { threadNotificationsAtom } from '../../state/threadNotifications';
|
||||
import { roomIdToActiveThreadIdAtomFamily } from '../../state/room/thread';
|
||||
@@ -127,6 +129,7 @@ function InviteNotifications() {
|
||||
const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds');
|
||||
const [quietHoursEnabled] = useSetting(settingsAtom, 'quietHoursEnabled');
|
||||
const focusAssistActive = useAtomValue(focusAssistActiveAtom);
|
||||
const manualDnd = useAtomValue(manualDndAtom);
|
||||
const [quietHoursStart] = useSetting(settingsAtom, 'quietHoursStart');
|
||||
const [quietHoursEnd] = useSetting(settingsAtom, 'quietHoursEnd');
|
||||
const [inviteSoundId] = useSetting(settingsAtom, 'inviteSoundId');
|
||||
@@ -186,7 +189,9 @@ function InviteNotifications() {
|
||||
useEffect(() => {
|
||||
if (invites.length > perviousInviteLen && mx.getSyncState() === 'SYNCING') {
|
||||
const quietActive =
|
||||
focusAssistActive || (quietHoursEnabled && isInQuietHours(quietHoursStart, quietHoursEnd));
|
||||
focusAssistActive ||
|
||||
manualDnd ||
|
||||
(quietHoursEnabled && isInQuietHours(quietHoursStart, quietHoursEnd));
|
||||
if (!quietActive) {
|
||||
if (showNotifications && notificationPermission('granted')) {
|
||||
notify(invites.length - perviousInviteLen);
|
||||
@@ -209,11 +214,12 @@ function InviteNotifications() {
|
||||
quietHoursStart,
|
||||
quietHoursEnd,
|
||||
focusAssistActive,
|
||||
manualDnd,
|
||||
inviteSoundId,
|
||||
]);
|
||||
|
||||
return (
|
||||
<audio ref={audioRef} style={{ display: 'none' }}>
|
||||
<audio ref={audioRef} style={{ display: 'none' }} aria-hidden="true">
|
||||
<source src={soundSrc ?? InviteSound} type="audio/ogg" />
|
||||
</audio>
|
||||
);
|
||||
@@ -235,6 +241,7 @@ function MessageNotifications() {
|
||||
const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds');
|
||||
const [quietHoursEnabled] = useSetting(settingsAtom, 'quietHoursEnabled');
|
||||
const focusAssistActive = useAtomValue(focusAssistActiveAtom);
|
||||
const manualDnd = useAtomValue(manualDndAtom);
|
||||
const [quietHoursStart] = useSetting(settingsAtom, 'quietHoursStart');
|
||||
const [quietHoursEnd] = useSetting(settingsAtom, 'quietHoursEnd');
|
||||
const [messageSoundId] = useSetting(settingsAtom, 'messageSoundId');
|
||||
@@ -373,7 +380,9 @@ function MessageNotifications() {
|
||||
}
|
||||
|
||||
const quietActive =
|
||||
focusAssistActive || (quietHoursEnabled && isInQuietHours(quietHoursStart, quietHoursEnd));
|
||||
focusAssistActive ||
|
||||
manualDnd ||
|
||||
(quietHoursEnabled && isInQuietHours(quietHoursStart, quietHoursEnd));
|
||||
if (quietActive) return;
|
||||
|
||||
if (showNotifications && notificationPermission('granted')) {
|
||||
@@ -408,6 +417,7 @@ function MessageNotifications() {
|
||||
quietHoursStart,
|
||||
quietHoursEnd,
|
||||
focusAssistActive,
|
||||
manualDnd,
|
||||
messageSoundId,
|
||||
],
|
||||
);
|
||||
@@ -496,7 +506,7 @@ function MessageNotifications() {
|
||||
useRoomsListener(mx, ThreadEvent.NewReply, handleNewReply);
|
||||
|
||||
return (
|
||||
<audio ref={audioRef} style={{ display: 'none' }}>
|
||||
<audio ref={audioRef} style={{ display: 'none' }} aria-hidden="true">
|
||||
<source src={soundSrc ?? NotificationSound} type="audio/ogg" />
|
||||
</audio>
|
||||
);
|
||||
@@ -642,6 +652,13 @@ function LotusDenoiseFeature() {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Registers the global `?` shortcut (ignored while typing) and renders the
|
||||
// keyboard-shortcuts help dialog. Headless — the dialog self-gates on its atom.
|
||||
function KeyboardShortcutsFeature() {
|
||||
useKeyboardShortcutsTrigger();
|
||||
return <KeyboardShortcutsDialog />;
|
||||
}
|
||||
|
||||
export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
|
||||
return (
|
||||
<>
|
||||
@@ -656,6 +673,7 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
|
||||
<TauriDesktopFeatures />
|
||||
<LotusDenoiseFeature />
|
||||
<DeepLinkNavigator />
|
||||
<KeyboardShortcutsFeature />
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -31,6 +31,12 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
|
||||
private _pipMode = false;
|
||||
|
||||
// P6-2: mirrors CallEmbed.joined. Set true from forceState(), which CallEmbed
|
||||
// invokes only from onCallJoined(). Gates io.lotus.set_deafen so we never send
|
||||
// before the fork's widget handler mounts (pre-join sends pend to a 10s
|
||||
// timeout — io.lotus toWidget actions must only be sent after call-join).
|
||||
private joined = false;
|
||||
|
||||
private get document(): Document | undefined {
|
||||
return this.iframe.contentDocument ?? this.iframe.contentWindow?.document;
|
||||
}
|
||||
@@ -141,6 +147,12 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
this.spotlight,
|
||||
);
|
||||
await this.applyState();
|
||||
// P6-2: CallEmbed calls forceState() only from onCallJoined(), so this is
|
||||
// the join transition. Flip the gate open, then push the current deafen
|
||||
// state to the fork's freshly-mounted handler. (setSound() above ran while
|
||||
// this.joined was still false, so it was gated — this is the first send.)
|
||||
this.joined = true;
|
||||
this.sendDeafenState();
|
||||
}
|
||||
|
||||
public startObserving() {
|
||||
@@ -209,6 +221,7 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
el.muted = !sound || (isScreenshareAudio && this.screenshareAudioMuted);
|
||||
});
|
||||
}
|
||||
this.sendDeafenState();
|
||||
}
|
||||
|
||||
private applyScreenshareAudioMuted(): void {
|
||||
@@ -221,6 +234,20 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
el.muted = this.screenshareAudioMuted;
|
||||
});
|
||||
}
|
||||
this.sendDeafenState();
|
||||
}
|
||||
|
||||
// P6-2: send deafen state to the fork (io.lotus.set_deafen). The DOM .muted
|
||||
// code above is a transitional fallback — remove once the fork ships & the
|
||||
// pin is bumped.
|
||||
private sendDeafenState(): void {
|
||||
if (!this.joined) return;
|
||||
this.call.transport
|
||||
.send('io.lotus.set_deafen', {
|
||||
deafened: !this.sound,
|
||||
screenshareAudioMuted: this.screenshareAudioMuted,
|
||||
})
|
||||
.catch(() => undefined);
|
||||
}
|
||||
|
||||
public onMediaState(evt: CustomEvent<ElementMediaStateDetail>) {
|
||||
@@ -286,10 +313,8 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
public toggleSound() {
|
||||
const sound = !this.sound;
|
||||
|
||||
this.setSound(sound);
|
||||
// After un-deafening, re-apply screenshare audio mute if active
|
||||
if (sound) this.applyScreenshareAudioMuted();
|
||||
|
||||
// P6-2: commit state before setSound()/applyScreenshareAudioMuted() so
|
||||
// sendDeafenState() (which reads this.sound) reports the new value.
|
||||
const state = new CallControlState(
|
||||
this.microphone,
|
||||
this.video,
|
||||
@@ -299,6 +324,11 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
this.screenshareAudioMuted,
|
||||
);
|
||||
this.state = state;
|
||||
|
||||
this.setSound(sound);
|
||||
// After un-deafening, re-apply screenshare audio mute if active
|
||||
if (sound) this.applyScreenshareAudioMuted();
|
||||
|
||||
this.emitStateUpdate();
|
||||
|
||||
if (!this.sound && this.microphone) {
|
||||
|
||||
@@ -27,6 +27,7 @@ import {
|
||||
} from './types';
|
||||
import { CallControl } from './CallControl';
|
||||
import { CallControlState } from './CallControlState';
|
||||
import { verifyDenoiseAssets } from './denoiseSmokeCheck';
|
||||
|
||||
// Maximum time to wait for the embedded Element Call iframe to progress from
|
||||
// initial load to a ready/joined state. If it hasn't by then, we assume the
|
||||
@@ -205,6 +206,12 @@ export class CallEmbed {
|
||||
params.append('lotusModel', denoiseModel);
|
||||
params.append('lotusGate', denoiseGate.toString());
|
||||
params.append('lotusGateThreshold', denoiseGateThreshold.toString());
|
||||
|
||||
// [lotus] Fire-and-forget: confirm the fork's ML-denoise assets are
|
||||
// actually served under public/element-call/denoise/ (they're copied by
|
||||
// vite.config.js at build time). Warns once if the copy step regressed;
|
||||
// never blocks call start.
|
||||
verifyDenoiseAssets(denoiseModel).catch(() => undefined);
|
||||
}
|
||||
|
||||
if (CallEmbed.startingCall(intent)) {
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import { trimTrailingSlash } from '../../utils/common';
|
||||
|
||||
// Denoise assets copied into public/element-call/denoise/ by vite.config.js's
|
||||
// lotusDenoise() plugin. The filenames here MUST match what that plugin writes
|
||||
// (and what the fork's TrackProcessor fetches at runtime). Grouped per model so
|
||||
// the smoke-check only probes what the active call will actually load.
|
||||
const DENOISE_ASSETS: Record<string, readonly string[]> = {
|
||||
rnnoise: ['rnnoiseWorklet.js', 'rnnoise.wasm', 'rnnoise_simd.wasm'],
|
||||
speex: ['speexWorklet.js', 'speex.wasm'],
|
||||
dtln: ['workadventure/audio-worklet.js'],
|
||||
deepfilternet: [
|
||||
'deepfilternet/index.esm.js',
|
||||
'deepfilternet/v2/pkg/df_bg.wasm',
|
||||
'deepfilternet/v2/models/DeepFilterNet3_onnx.tar.gz',
|
||||
],
|
||||
};
|
||||
|
||||
// The noise-gate worklet is a shared asset the build ships for every model
|
||||
// (loaded when the gate is enabled), so probe it regardless of the model.
|
||||
const SHARED_ASSETS: readonly string[] = ['noiseGateWorklet.js'];
|
||||
|
||||
/**
|
||||
* Fire-and-forget smoke-check for the ML-denoise asset contract.
|
||||
*
|
||||
* The fork's in-source denoiser (lotusDenoiseSource) loads its worklet/wasm/ESM
|
||||
* from `public/element-call/denoise/` at runtime; if the build's asset copy
|
||||
* step regressed, those fetches 404 and denoise silently degrades to a raw mic.
|
||||
* This HEAD-fetches the critical assets for the selected model and emits a
|
||||
* single console.warn listing any that are missing. No UI, no throw — purely a
|
||||
* developer/operator breadcrumb.
|
||||
*
|
||||
* @param model the selected denoise model (defaults to rnnoise)
|
||||
* @returns true if every probed asset responded OK, false otherwise
|
||||
*/
|
||||
export async function verifyDenoiseAssets(model = 'rnnoise'): Promise<boolean> {
|
||||
const base = new URL(
|
||||
`${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/denoise/`,
|
||||
window.location.origin,
|
||||
);
|
||||
const names = [...(DENOISE_ASSETS[model] ?? DENOISE_ASSETS.rnnoise), ...SHARED_ASSETS];
|
||||
|
||||
const results = await Promise.all(
|
||||
names.map(async (name): Promise<string | null> => {
|
||||
try {
|
||||
const res = await fetch(new URL(name, base).href, { method: 'HEAD' });
|
||||
return res.ok ? null : name;
|
||||
} catch {
|
||||
return name;
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
const missing = results.filter((n): n is string => n !== null);
|
||||
if (missing.length > 0) {
|
||||
console.warn(
|
||||
`[lotus-denoise] ML denoise assets missing under ${base.href} (model="${model}"): ${missing.join(
|
||||
', ',
|
||||
)} — the in-source denoiser will fall back to a raw mic. Check vite.config.js lotusDenoise().`,
|
||||
);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
+110
-63
@@ -1,7 +1,4 @@
|
||||
import { CompactEmoji, fromUnicodeToHexcode } from 'emojibase';
|
||||
import emojisData from 'emojibase-data/en/compact.json';
|
||||
import joypixels from 'emojibase-data/en/shortcodes/joypixels.json';
|
||||
import emojibase from 'emojibase-data/en/shortcodes/emojibase.json';
|
||||
import type { CompactEmoji } from 'emojibase';
|
||||
|
||||
export type IEmoji = CompactEmoji & {
|
||||
shortcode: string;
|
||||
@@ -24,57 +21,76 @@ export type IEmojiGroup = {
|
||||
emojis: IEmoji[];
|
||||
};
|
||||
|
||||
export const getShortcodesFor = (hexcode: string): string[] | string | undefined =>
|
||||
joypixels[hexcode] || emojibase[hexcode];
|
||||
export type EmojiData = {
|
||||
emojis: IEmoji[];
|
||||
emojiGroups: IEmojiGroup[];
|
||||
};
|
||||
|
||||
type ShortcodeMap = Record<string, string | string[]>;
|
||||
|
||||
/**
|
||||
* PERF (lazy emojibase split): the heavy `emojibase-data` JSON (compact emoji
|
||||
* data + the joypixels/emojibase shortcode maps, ~965 KB combined) used to be
|
||||
* imported statically at module top-level. Because reaction/message rendering
|
||||
* (`Reaction`, `scaleSystemEmoji`) import this module eagerly, that dragged the
|
||||
* whole `emojibase` chunk into the initial (eager) bundle graph.
|
||||
*
|
||||
* It is now loaded on demand via `loadEmojiData()` (a memoized dynamic import).
|
||||
* Only lazy emoji surfaces (EmojiBoard, EmoticonAutocomplete, recent-emoji)
|
||||
* trigger the load. Anything that renders eagerly (reaction/emoji tooltips and
|
||||
* aria-labels via `getShortcodeFor`) gracefully degrades to `undefined` until
|
||||
* the data has been loaded — the visible emoji glyph itself never depended on
|
||||
* this data, so on-screen UX is unchanged; the shortcode label simply resolves
|
||||
* once emoji data is loaded. `getHexcodeForEmoji` is inlined below so it stays
|
||||
* synchronous WITHOUT pulling the `emojibase` runtime into the eager graph.
|
||||
*/
|
||||
|
||||
// Inlined from emojibase's `fromUnicodeToHexcode` so this synchronous helper
|
||||
// does not import the `emojibase` package (and thus the emojibase chunk) into
|
||||
// the eager graph. Kept byte-for-byte behaviourally identical.
|
||||
const SEQUENCE_REMOVAL_PATTERN = /200D|FE0E|FE0F/g;
|
||||
|
||||
export const getHexcodeForEmoji = (unicode: string, strip = true): string => {
|
||||
const hexcode: string[] = [];
|
||||
[...unicode].forEach((codepoint) => {
|
||||
let hex = codepoint.codePointAt(0)?.toString(16).toUpperCase() ?? '';
|
||||
while (hex.length < 4) {
|
||||
hex = `0${hex}`;
|
||||
}
|
||||
if (!strip || !hex.match(SEQUENCE_REMOVAL_PATTERN)) {
|
||||
hexcode.push(hex);
|
||||
}
|
||||
});
|
||||
return hexcode.join('-');
|
||||
};
|
||||
|
||||
// Populated by loadEmojiData(); `undefined` until the data has been loaded.
|
||||
let joypixelsShortcodes: ShortcodeMap | undefined;
|
||||
let emojibaseShortcodes: ShortcodeMap | undefined;
|
||||
|
||||
export const getShortcodesFor = (hexcode: string): string[] | string | undefined => {
|
||||
if (!joypixelsShortcodes || !emojibaseShortcodes) return undefined;
|
||||
return joypixelsShortcodes[hexcode] || emojibaseShortcodes[hexcode];
|
||||
};
|
||||
|
||||
export const getShortcodeFor = (hexcode: string): string | undefined => {
|
||||
const shortcode = joypixels[hexcode] || emojibase[hexcode];
|
||||
const shortcode = getShortcodesFor(hexcode);
|
||||
return Array.isArray(shortcode) ? shortcode[0] : shortcode;
|
||||
};
|
||||
|
||||
export const getHexcodeForEmoji = fromUnicodeToHexcode;
|
||||
|
||||
// Shared, stable array references. They start empty and are populated in place
|
||||
// the first time loadEmojiData() resolves (mirroring the previous eager module
|
||||
// side-effect). React consumers await loadEmojiData() and re-render to observe
|
||||
// the populated data; non-React consumers (recent-emoji) read them after load.
|
||||
export const emojiGroups: IEmojiGroup[] = [
|
||||
{
|
||||
id: EmojiGroupId.People,
|
||||
order: 0,
|
||||
emojis: [],
|
||||
},
|
||||
{
|
||||
id: EmojiGroupId.Nature,
|
||||
order: 1,
|
||||
emojis: [],
|
||||
},
|
||||
{
|
||||
id: EmojiGroupId.Food,
|
||||
order: 2,
|
||||
emojis: [],
|
||||
},
|
||||
{
|
||||
id: EmojiGroupId.Activity,
|
||||
order: 3,
|
||||
emojis: [],
|
||||
},
|
||||
{
|
||||
id: EmojiGroupId.Travel,
|
||||
order: 4,
|
||||
emojis: [],
|
||||
},
|
||||
{
|
||||
id: EmojiGroupId.Object,
|
||||
order: 5,
|
||||
emojis: [],
|
||||
},
|
||||
{
|
||||
id: EmojiGroupId.Symbol,
|
||||
order: 6,
|
||||
emojis: [],
|
||||
},
|
||||
{
|
||||
id: EmojiGroupId.Flag,
|
||||
order: 7,
|
||||
emojis: [],
|
||||
},
|
||||
{ id: EmojiGroupId.People, order: 0, emojis: [] },
|
||||
{ id: EmojiGroupId.Nature, order: 1, emojis: [] },
|
||||
{ id: EmojiGroupId.Food, order: 2, emojis: [] },
|
||||
{ id: EmojiGroupId.Activity, order: 3, emojis: [] },
|
||||
{ id: EmojiGroupId.Travel, order: 4, emojis: [] },
|
||||
{ id: EmojiGroupId.Object, order: 5, emojis: [] },
|
||||
{ id: EmojiGroupId.Symbol, order: 6, emojis: [] },
|
||||
{ id: EmojiGroupId.Flag, order: 7, emojis: [] },
|
||||
];
|
||||
|
||||
export const emojis: IEmoji[] = [];
|
||||
@@ -95,20 +111,51 @@ function getGroupIndex(emoji: IEmoji): number | undefined {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
emojisData.forEach((emoji) => {
|
||||
const myShortCodes = getShortcodesFor(emoji.hexcode);
|
||||
if (!myShortCodes) return;
|
||||
if (Array.isArray(myShortCodes) && myShortCodes.length === 0) return;
|
||||
let emojiDataPromise: Promise<EmojiData> | undefined;
|
||||
|
||||
const em: IEmoji = {
|
||||
...emoji,
|
||||
shortcode: Array.isArray(myShortCodes) ? myShortCodes[0] : myShortCodes,
|
||||
shortcodes: Array.isArray(myShortCodes) ? myShortCodes : emoji.shortcodes,
|
||||
};
|
||||
/**
|
||||
* Lazily load emojibase data (dynamic import → the `emojibase` chunk). Memoized:
|
||||
* the JSON is fetched/parsed and `emojis`/`emojiGroups` are built exactly once.
|
||||
*/
|
||||
export const loadEmojiData = (): Promise<EmojiData> => {
|
||||
if (!emojiDataPromise) {
|
||||
emojiDataPromise = (async (): Promise<EmojiData> => {
|
||||
const [emojisModule, joypixelsModule, emojibaseModule] = await Promise.all([
|
||||
import('emojibase-data/en/compact.json'),
|
||||
import('emojibase-data/en/shortcodes/joypixels.json'),
|
||||
import('emojibase-data/en/shortcodes/emojibase.json'),
|
||||
]);
|
||||
|
||||
const groupIndex = getGroupIndex(em);
|
||||
if (groupIndex !== undefined) {
|
||||
addEmojiToGroup(groupIndex, em);
|
||||
emojis.push(em);
|
||||
joypixelsShortcodes = joypixelsModule.default as ShortcodeMap;
|
||||
emojibaseShortcodes = emojibaseModule.default as ShortcodeMap;
|
||||
|
||||
const emojisData = emojisModule.default as unknown as CompactEmoji[];
|
||||
emojisData.forEach((emoji) => {
|
||||
const myShortCodes = getShortcodesFor(emoji.hexcode);
|
||||
if (!myShortCodes) return;
|
||||
if (Array.isArray(myShortCodes) && myShortCodes.length === 0) return;
|
||||
|
||||
const em: IEmoji = {
|
||||
...emoji,
|
||||
shortcode: Array.isArray(myShortCodes) ? myShortCodes[0] : myShortCodes,
|
||||
shortcodes: Array.isArray(myShortCodes) ? myShortCodes : emoji.shortcodes,
|
||||
};
|
||||
|
||||
const groupIndex = getGroupIndex(em);
|
||||
if (groupIndex !== undefined) {
|
||||
addEmojiToGroup(groupIndex, em);
|
||||
emojis.push(em);
|
||||
}
|
||||
});
|
||||
|
||||
return { emojis, emojiGroups };
|
||||
})();
|
||||
// Don't cache a rejection: a transient chunk-load failure (e.g. mid-deploy
|
||||
// 404) would otherwise permanently disable emoji data until a full reload.
|
||||
emojiDataPromise = emojiDataPromise.catch((err) => {
|
||||
emojiDataPromise = undefined;
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
});
|
||||
return emojiDataPromise;
|
||||
};
|
||||
|
||||
@@ -229,13 +229,21 @@ export const scaleSystemEmoji = (text: string): (string | JSX.Element)[] =>
|
||||
findAndReplace(
|
||||
text,
|
||||
EMOJI_REG_G,
|
||||
(match, pushIndex) => (
|
||||
<span key={`scaleSystemEmoji-${pushIndex}`} className={css.EmoticonBase}>
|
||||
<span className={css.Emoticon()} title={getShortcodeFor(getHexcodeForEmoji(match[0]))}>
|
||||
{match[0]}
|
||||
(match, pushIndex) => {
|
||||
const shortcode = getShortcodeFor(getHexcodeForEmoji(match[0]));
|
||||
return (
|
||||
<span key={`scaleSystemEmoji-${pushIndex}`} className={css.EmoticonBase}>
|
||||
<span
|
||||
className={css.Emoticon()}
|
||||
title={shortcode}
|
||||
aria-label={shortcode || undefined}
|
||||
role={shortcode ? 'img' : undefined}
|
||||
>
|
||||
{match[0]}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
),
|
||||
);
|
||||
},
|
||||
(txt) => txt,
|
||||
);
|
||||
|
||||
@@ -574,15 +582,25 @@ export const getReactCustomHtmlParser = (
|
||||
);
|
||||
}
|
||||
if (htmlSrc && 'data-mx-emoticon' in props) {
|
||||
const emoticonAlt =
|
||||
(typeof props.alt === 'string' && props.alt) ||
|
||||
(typeof props.title === 'string' && props.title) ||
|
||||
'emoji';
|
||||
return (
|
||||
<span className={css.EmoticonBase}>
|
||||
<span className={css.Emoticon()}>
|
||||
<img {...props} className={css.EmoticonImg} src={htmlSrc} />
|
||||
<img
|
||||
{...props}
|
||||
alt={emoticonAlt}
|
||||
className={css.EmoticonImg}
|
||||
src={htmlSrc}
|
||||
loading="lazy"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (htmlSrc) return <img {...props} className={css.Img} src={htmlSrc} />;
|
||||
if (htmlSrc) return <img {...props} className={css.Img} src={htmlSrc} loading="lazy" />;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -611,7 +629,6 @@ export const getReactCustomHtmlParser = (
|
||||
<>
|
||||
{segments.map((segment, index) => {
|
||||
if (segment.type === 'text') {
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
return (
|
||||
<React.Fragment key={index}>{renderTextChunk(segment.value)}</React.Fragment>
|
||||
);
|
||||
@@ -619,7 +636,6 @@ export const getReactCustomHtmlParser = (
|
||||
const raw =
|
||||
segment.type === 'block' ? `$$${segment.value}$$` : `$${segment.value}$`;
|
||||
return (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<React.Fragment key={index}>
|
||||
{renderMath(segment.value, segment.type === 'block', raw, raw)}
|
||||
</React.Fragment>
|
||||
|
||||
@@ -2,307 +2,33 @@ import React, { MutableRefObject, ReactNode, useEffect, useRef } from 'react';
|
||||
|
||||
import Prism from 'prismjs';
|
||||
|
||||
import 'prismjs/components/prism-abap.js';
|
||||
import 'prismjs/components/prism-abnf.js';
|
||||
import 'prismjs/components/prism-actionscript.js';
|
||||
import 'prismjs/components/prism-ada.js';
|
||||
import 'prismjs/components/prism-agda.js';
|
||||
import 'prismjs/components/prism-al.js';
|
||||
import 'prismjs/components/prism-antlr4.js';
|
||||
import 'prismjs/components/prism-apacheconf.js';
|
||||
import 'prismjs/components/prism-apex.js';
|
||||
import 'prismjs/components/prism-apl.js';
|
||||
import 'prismjs/components/prism-applescript.js';
|
||||
import 'prismjs/components/prism-aql.js';
|
||||
import 'prismjs/components/prism-arff.js';
|
||||
import 'prismjs/components/prism-armasm.js';
|
||||
import 'prismjs/components/prism-arturo.js';
|
||||
import 'prismjs/components/prism-asciidoc.js';
|
||||
import 'prismjs/components/prism-asm6502.js';
|
||||
import 'prismjs/components/prism-asmatmel.js';
|
||||
import 'prismjs/components/prism-aspnet.js';
|
||||
import 'prismjs/components/prism-autohotkey.js';
|
||||
import 'prismjs/components/prism-autoit.js';
|
||||
import 'prismjs/components/prism-avisynth.js';
|
||||
import 'prismjs/components/prism-avro-idl.js';
|
||||
import 'prismjs/components/prism-awk.js';
|
||||
import 'prismjs/components/prism-bash.js';
|
||||
import 'prismjs/components/prism-basic.js';
|
||||
import 'prismjs/components/prism-batch.js';
|
||||
import 'prismjs/components/prism-bbcode.js';
|
||||
import 'prismjs/components/prism-bbj.js';
|
||||
import 'prismjs/components/prism-bicep.js';
|
||||
import 'prismjs/components/prism-birb.js';
|
||||
import 'prismjs/components/prism-bnf.js';
|
||||
import 'prismjs/components/prism-bqn.js';
|
||||
import 'prismjs/components/prism-brainfuck.js';
|
||||
import 'prismjs/components/prism-brightscript.js';
|
||||
import 'prismjs/components/prism-bro.js';
|
||||
import 'prismjs/components/prism-bsl.js';
|
||||
import 'prismjs/components/prism-c.js';
|
||||
import 'prismjs/components/prism-cfscript.js';
|
||||
import 'prismjs/components/prism-cil.js';
|
||||
import 'prismjs/components/prism-cilkc.js';
|
||||
import 'prismjs/components/prism-cilkcpp.js';
|
||||
// PERF: Prism used to import every bundled language (~574 KB lazy chunk). We now
|
||||
// ship a curated subset covering the languages actually seen in chat. Imports
|
||||
// MUST stay in dependency order (Prism component files assume their base grammar
|
||||
// is already registered): base grammars (markup/css/clike/javascript) first,
|
||||
// then languages that extend them (e.g. c→cpp, javascript→typescript,
|
||||
// markup+javascript→jsx, jsx+typescript→tsx, markup→markdown).
|
||||
import 'prismjs/components/prism-markup.js'; // markup / html / xml / svg
|
||||
import 'prismjs/components/prism-css.js';
|
||||
import 'prismjs/components/prism-clike.js';
|
||||
import 'prismjs/components/prism-clojure.js';
|
||||
import 'prismjs/components/prism-cmake.js';
|
||||
import 'prismjs/components/prism-cobol.js';
|
||||
import 'prismjs/components/prism-coffeescript.js';
|
||||
import 'prismjs/components/prism-concurnas.js';
|
||||
import 'prismjs/components/prism-cooklang.js';
|
||||
import 'prismjs/components/prism-coq.js';
|
||||
import 'prismjs/components/prism-javascript.js'; // js
|
||||
import 'prismjs/components/prism-json.js';
|
||||
import 'prismjs/components/prism-yaml.js';
|
||||
import 'prismjs/components/prism-bash.js'; // bash / shell / sh
|
||||
import 'prismjs/components/prism-python.js';
|
||||
import 'prismjs/components/prism-rust.js';
|
||||
import 'prismjs/components/prism-go.js';
|
||||
import 'prismjs/components/prism-java.js';
|
||||
import 'prismjs/components/prism-c.js';
|
||||
import 'prismjs/components/prism-cpp.js';
|
||||
import 'prismjs/components/prism-csharp.js';
|
||||
import 'prismjs/components/prism-cshtml.js';
|
||||
import 'prismjs/components/prism-csp.js';
|
||||
import 'prismjs/components/prism-css-extras.js';
|
||||
import 'prismjs/components/prism-css.js';
|
||||
import 'prismjs/components/prism-csv.js';
|
||||
import 'prismjs/components/prism-cue.js';
|
||||
import 'prismjs/components/prism-cypher.js';
|
||||
import 'prismjs/components/prism-d.js';
|
||||
import 'prismjs/components/prism-dart.js';
|
||||
import 'prismjs/components/prism-dataweave.js';
|
||||
import 'prismjs/components/prism-dax.js';
|
||||
import 'prismjs/components/prism-dhall.js';
|
||||
import 'prismjs/components/prism-diff.js';
|
||||
import 'prismjs/components/prism-dns-zone-file.js';
|
||||
import 'prismjs/components/prism-docker.js';
|
||||
import 'prismjs/components/prism-dot.js';
|
||||
import 'prismjs/components/prism-ebnf.js';
|
||||
import 'prismjs/components/prism-editorconfig.js';
|
||||
import 'prismjs/components/prism-eiffel.js';
|
||||
import 'prismjs/components/prism-ejs.js';
|
||||
import 'prismjs/components/prism-elixir.js';
|
||||
import 'prismjs/components/prism-elm.js';
|
||||
import 'prismjs/components/prism-erb.js';
|
||||
import 'prismjs/components/prism-erlang.js';
|
||||
import 'prismjs/components/prism-etlua.js';
|
||||
import 'prismjs/components/prism-excel-formula.js';
|
||||
import 'prismjs/components/prism-factor.js';
|
||||
import 'prismjs/components/prism-false.js';
|
||||
import 'prismjs/components/prism-firestore-security-rules.js';
|
||||
import 'prismjs/components/prism-flow.js';
|
||||
import 'prismjs/components/prism-fortran.js';
|
||||
import 'prismjs/components/prism-fsharp.js';
|
||||
import 'prismjs/components/prism-ftl.js';
|
||||
import 'prismjs/components/prism-gap.js';
|
||||
import 'prismjs/components/prism-gcode.js';
|
||||
import 'prismjs/components/prism-gdscript.js';
|
||||
import 'prismjs/components/prism-gedcom.js';
|
||||
import 'prismjs/components/prism-gettext.js';
|
||||
import 'prismjs/components/prism-gherkin.js';
|
||||
import 'prismjs/components/prism-git.js';
|
||||
import 'prismjs/components/prism-glsl.js';
|
||||
import 'prismjs/components/prism-gml.js';
|
||||
import 'prismjs/components/prism-gn.js';
|
||||
import 'prismjs/components/prism-go-module.js';
|
||||
import 'prismjs/components/prism-go.js';
|
||||
import 'prismjs/components/prism-gradle.js';
|
||||
import 'prismjs/components/prism-graphql.js';
|
||||
import 'prismjs/components/prism-groovy.js';
|
||||
import 'prismjs/components/prism-haml.js';
|
||||
import 'prismjs/components/prism-handlebars.js';
|
||||
import 'prismjs/components/prism-haskell.js';
|
||||
import 'prismjs/components/prism-haxe.js';
|
||||
import 'prismjs/components/prism-hcl.js';
|
||||
import 'prismjs/components/prism-hlsl.js';
|
||||
import 'prismjs/components/prism-hoon.js';
|
||||
import 'prismjs/components/prism-hpkp.js';
|
||||
import 'prismjs/components/prism-hsts.js';
|
||||
import 'prismjs/components/prism-http.js';
|
||||
import 'prismjs/components/prism-ichigojam.js';
|
||||
import 'prismjs/components/prism-icon.js';
|
||||
import 'prismjs/components/prism-icu-message-format.js';
|
||||
import 'prismjs/components/prism-idris.js';
|
||||
import 'prismjs/components/prism-iecst.js';
|
||||
import 'prismjs/components/prism-ignore.js';
|
||||
import 'prismjs/components/prism-inform7.js';
|
||||
import 'prismjs/components/prism-ini.js';
|
||||
import 'prismjs/components/prism-io.js';
|
||||
import 'prismjs/components/prism-j.js';
|
||||
import 'prismjs/components/prism-java.js';
|
||||
import 'prismjs/components/prism-javadoclike.js';
|
||||
import 'prismjs/components/prism-javascript.js';
|
||||
import 'prismjs/components/prism-javastacktrace.js';
|
||||
import 'prismjs/components/prism-jexl.js';
|
||||
import 'prismjs/components/prism-jolie.js';
|
||||
import 'prismjs/components/prism-jq.js';
|
||||
import 'prismjs/components/prism-js-extras.js';
|
||||
import 'prismjs/components/prism-js-templates.js';
|
||||
import 'prismjs/components/prism-json.js';
|
||||
import 'prismjs/components/prism-json5.js';
|
||||
import 'prismjs/components/prism-jsonp.js';
|
||||
import 'prismjs/components/prism-jsstacktrace.js';
|
||||
import 'prismjs/components/prism-jsx.js';
|
||||
import 'prismjs/components/prism-julia.js';
|
||||
import 'prismjs/components/prism-keepalived.js';
|
||||
import 'prismjs/components/prism-keyman.js';
|
||||
import 'prismjs/components/prism-kotlin.js';
|
||||
import 'prismjs/components/prism-kumir.js';
|
||||
import 'prismjs/components/prism-kusto.js';
|
||||
import 'prismjs/components/prism-latex.js';
|
||||
import 'prismjs/components/prism-latte.js';
|
||||
import 'prismjs/components/prism-less.js';
|
||||
import 'prismjs/components/prism-lilypond.js';
|
||||
import 'prismjs/components/prism-linker-script.js';
|
||||
import 'prismjs/components/prism-liquid.js';
|
||||
import 'prismjs/components/prism-lisp.js';
|
||||
import 'prismjs/components/prism-livescript.js';
|
||||
import 'prismjs/components/prism-llvm.js';
|
||||
import 'prismjs/components/prism-log.js';
|
||||
import 'prismjs/components/prism-lolcode.js';
|
||||
import 'prismjs/components/prism-lua.js';
|
||||
import 'prismjs/components/prism-magma.js';
|
||||
import 'prismjs/components/prism-makefile.js';
|
||||
import 'prismjs/components/prism-markdown.js';
|
||||
import 'prismjs/components/prism-markup-templating.js';
|
||||
import 'prismjs/components/prism-markup.js';
|
||||
import 'prismjs/components/prism-mata.js';
|
||||
import 'prismjs/components/prism-matlab.js';
|
||||
import 'prismjs/components/prism-maxscript.js';
|
||||
import 'prismjs/components/prism-mel.js';
|
||||
import 'prismjs/components/prism-mermaid.js';
|
||||
import 'prismjs/components/prism-metafont.js';
|
||||
import 'prismjs/components/prism-mizar.js';
|
||||
import 'prismjs/components/prism-mongodb.js';
|
||||
import 'prismjs/components/prism-monkey.js';
|
||||
import 'prismjs/components/prism-moonscript.js';
|
||||
import 'prismjs/components/prism-n1ql.js';
|
||||
import 'prismjs/components/prism-n4js.js';
|
||||
import 'prismjs/components/prism-nand2tetris-hdl.js';
|
||||
import 'prismjs/components/prism-naniscript.js';
|
||||
import 'prismjs/components/prism-nasm.js';
|
||||
import 'prismjs/components/prism-neon.js';
|
||||
import 'prismjs/components/prism-nevod.js';
|
||||
import 'prismjs/components/prism-nginx.js';
|
||||
import 'prismjs/components/prism-nim.js';
|
||||
import 'prismjs/components/prism-nix.js';
|
||||
import 'prismjs/components/prism-nsis.js';
|
||||
import 'prismjs/components/prism-objectivec.js';
|
||||
import 'prismjs/components/prism-ocaml.js';
|
||||
import 'prismjs/components/prism-odin.js';
|
||||
import 'prismjs/components/prism-opencl.js';
|
||||
import 'prismjs/components/prism-openqasm.js';
|
||||
import 'prismjs/components/prism-oz.js';
|
||||
import 'prismjs/components/prism-parigp.js';
|
||||
import 'prismjs/components/prism-parser.js';
|
||||
import 'prismjs/components/prism-pascal.js';
|
||||
import 'prismjs/components/prism-pascaligo.js';
|
||||
import 'prismjs/components/prism-pcaxis.js';
|
||||
import 'prismjs/components/prism-peoplecode.js';
|
||||
import 'prismjs/components/prism-perl.js';
|
||||
import 'prismjs/components/prism-php-extras.js';
|
||||
import 'prismjs/components/prism-php.js';
|
||||
import 'prismjs/components/prism-phpdoc.js';
|
||||
import 'prismjs/components/prism-plant-uml.js';
|
||||
import 'prismjs/components/prism-powerquery.js';
|
||||
import 'prismjs/components/prism-powershell.js';
|
||||
import 'prismjs/components/prism-processing.js';
|
||||
import 'prismjs/components/prism-prolog.js';
|
||||
import 'prismjs/components/prism-promql.js';
|
||||
import 'prismjs/components/prism-properties.js';
|
||||
import 'prismjs/components/prism-protobuf.js';
|
||||
import 'prismjs/components/prism-psl.js';
|
||||
import 'prismjs/components/prism-pug.js';
|
||||
import 'prismjs/components/prism-puppet.js';
|
||||
import 'prismjs/components/prism-pure.js';
|
||||
import 'prismjs/components/prism-purebasic.js';
|
||||
import 'prismjs/components/prism-purescript.js';
|
||||
import 'prismjs/components/prism-python.js';
|
||||
import 'prismjs/components/prism-q.js';
|
||||
import 'prismjs/components/prism-qml.js';
|
||||
import 'prismjs/components/prism-qore.js';
|
||||
import 'prismjs/components/prism-qsharp.js';
|
||||
import 'prismjs/components/prism-r.js';
|
||||
import 'prismjs/components/prism-reason.js';
|
||||
import 'prismjs/components/prism-regex.js';
|
||||
import 'prismjs/components/prism-rego.js';
|
||||
import 'prismjs/components/prism-renpy.js';
|
||||
import 'prismjs/components/prism-rescript.js';
|
||||
import 'prismjs/components/prism-rest.js';
|
||||
import 'prismjs/components/prism-rip.js';
|
||||
import 'prismjs/components/prism-roboconf.js';
|
||||
import 'prismjs/components/prism-robotframework.js';
|
||||
import 'prismjs/components/prism-ruby.js';
|
||||
import 'prismjs/components/prism-rust.js';
|
||||
import 'prismjs/components/prism-sas.js';
|
||||
import 'prismjs/components/prism-sass.js';
|
||||
import 'prismjs/components/prism-scala.js';
|
||||
import 'prismjs/components/prism-scheme.js';
|
||||
import 'prismjs/components/prism-scss.js';
|
||||
import 'prismjs/components/prism-shell-session.js';
|
||||
import 'prismjs/components/prism-smali.js';
|
||||
import 'prismjs/components/prism-smalltalk.js';
|
||||
import 'prismjs/components/prism-smarty.js';
|
||||
import 'prismjs/components/prism-sml.js';
|
||||
import 'prismjs/components/prism-solidity.js';
|
||||
import 'prismjs/components/prism-solution-file.js';
|
||||
import 'prismjs/components/prism-soy.js';
|
||||
import 'prismjs/components/prism-splunk-spl.js';
|
||||
import 'prismjs/components/prism-sqf.js';
|
||||
import 'prismjs/components/prism-sql.js';
|
||||
import 'prismjs/components/prism-squirrel.js';
|
||||
import 'prismjs/components/prism-stan.js';
|
||||
import 'prismjs/components/prism-stata.js';
|
||||
import 'prismjs/components/prism-stylus.js';
|
||||
import 'prismjs/components/prism-supercollider.js';
|
||||
import 'prismjs/components/prism-swift.js';
|
||||
import 'prismjs/components/prism-systemd.js';
|
||||
import 'prismjs/components/prism-t4-templating.js';
|
||||
import 'prismjs/components/prism-t4-vb.js';
|
||||
import 'prismjs/components/prism-tap.js';
|
||||
import 'prismjs/components/prism-tcl.js';
|
||||
import 'prismjs/components/prism-textile.js';
|
||||
import 'prismjs/components/prism-toml.js';
|
||||
import 'prismjs/components/prism-tremor.js';
|
||||
import 'prismjs/components/prism-diff.js';
|
||||
import 'prismjs/components/prism-docker.js';
|
||||
import 'prismjs/components/prism-markdown.js';
|
||||
import 'prismjs/components/prism-typescript.js'; // ts
|
||||
import 'prismjs/components/prism-jsx.js';
|
||||
import 'prismjs/components/prism-tsx.js';
|
||||
import 'prismjs/components/prism-tt2.js';
|
||||
import 'prismjs/components/prism-turtle.js';
|
||||
import 'prismjs/components/prism-twig.js';
|
||||
import 'prismjs/components/prism-typescript.js';
|
||||
import 'prismjs/components/prism-typoscript.js';
|
||||
import 'prismjs/components/prism-unrealscript.js';
|
||||
import 'prismjs/components/prism-uorazor.js';
|
||||
import 'prismjs/components/prism-uri.js';
|
||||
import 'prismjs/components/prism-v.js';
|
||||
import 'prismjs/components/prism-vala.js';
|
||||
import 'prismjs/components/prism-vbnet.js';
|
||||
import 'prismjs/components/prism-velocity.js';
|
||||
import 'prismjs/components/prism-verilog.js';
|
||||
import 'prismjs/components/prism-vhdl.js';
|
||||
import 'prismjs/components/prism-vim.js';
|
||||
import 'prismjs/components/prism-visual-basic.js';
|
||||
import 'prismjs/components/prism-warpscript.js';
|
||||
import 'prismjs/components/prism-wasm.js';
|
||||
import 'prismjs/components/prism-web-idl.js';
|
||||
import 'prismjs/components/prism-wgsl.js';
|
||||
import 'prismjs/components/prism-wiki.js';
|
||||
import 'prismjs/components/prism-wolfram.js';
|
||||
import 'prismjs/components/prism-wren.js';
|
||||
import 'prismjs/components/prism-xeora.js';
|
||||
import 'prismjs/components/prism-xml-doc.js';
|
||||
import 'prismjs/components/prism-xojo.js';
|
||||
import 'prismjs/components/prism-xquery.js';
|
||||
import 'prismjs/components/prism-yaml.js';
|
||||
import 'prismjs/components/prism-yang.js';
|
||||
import 'prismjs/components/prism-zig.js';
|
||||
import 'prismjs/components/prism-arduino.js';
|
||||
|
||||
// Broken:
|
||||
//
|
||||
// import 'prismjs/components/prism-bison.js';
|
||||
// import 'prismjs/components/prism-chaiscript.js';
|
||||
// import 'prismjs/components/prism-core.js';
|
||||
// import 'prismjs/components/prism-crystal.js';
|
||||
// import 'prismjs/components/prism-django.js';
|
||||
// import 'prismjs/components/prism-javadoc.js';
|
||||
// import 'prismjs/components/prism-jsdoc.js';
|
||||
// import 'prismjs/components/prism-plsql.js';
|
||||
// import 'prismjs/components/prism-racket.js';
|
||||
// import 'prismjs/components/prism-sparql.js';
|
||||
// import 'prismjs/components/prism-t4-cs.js';
|
||||
|
||||
import './ReactPrism.css';
|
||||
// using classNames .prism-dark .prism-light from ReactPrism.css
|
||||
|
||||
@@ -3,7 +3,7 @@ import assert from 'node:assert/strict';
|
||||
import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
|
||||
import { addRecentEmoji, getRecentEmojis, IRecentEmojiContent } from './recent-emoji';
|
||||
import { AccountDataEvent } from '../../types/matrix/accountData';
|
||||
import { emojis } from './emoji';
|
||||
import { emojis, loadEmojiData } from './emoji';
|
||||
|
||||
// A Map-backed MatrixClient stub supporting get/setAccountData.
|
||||
const createMx = () => {
|
||||
@@ -25,6 +25,9 @@ const createMx = () => {
|
||||
const getStored = (store: Map<string, unknown>): IRecentEmojiContent['recent_emoji'] =>
|
||||
(store.get(AccountDataEvent.ElementRecentEmoji) as IRecentEmojiContent | undefined)?.recent_emoji;
|
||||
|
||||
// Emoji data is now loaded lazily; populate `emojis` before the round trips.
|
||||
await loadEmojiData();
|
||||
|
||||
// Pick two real unicode emojis to drive add->get round trips.
|
||||
const u1 = emojis[0].unicode;
|
||||
const u2 = emojis[1].unicode;
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { atom } from 'jotai';
|
||||
|
||||
/**
|
||||
* P6-1 — Tray "Do Not Disturb" ↔ notification suppression (manual toggle).
|
||||
*
|
||||
* Standalone, non-persisted boolean atom reflecting whether the user has flipped
|
||||
* the native tray "Do Not Disturb" item. It is driven at runtime by
|
||||
* `useTauriDnd` from the native `lotus-dnd-changed` event and read by the
|
||||
* notification gate to suppress notifications while DND is on. Because it mirrors
|
||||
* a transient session toggle — not a persisted user preference — it is a plain
|
||||
* in-memory atom that defaults to `false` and is intentionally NOT written to
|
||||
* `localStorage`.
|
||||
*/
|
||||
export const manualDndAtom = atom(false);
|
||||
@@ -0,0 +1,28 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import dayjs from 'dayjs';
|
||||
import { messageAriaLabel } from './a11y';
|
||||
import { timeDayMonthYear, timeHourMinute } from './time';
|
||||
|
||||
test('messageAriaLabel composes sender, date and time (24h)', () => {
|
||||
const ts = dayjs('2026-07-01T14:30:00').valueOf();
|
||||
assert.equal(
|
||||
messageAriaLabel('Alice', ts, true),
|
||||
`Alice, ${timeDayMonthYear(ts)} ${timeHourMinute(ts, true)}`,
|
||||
);
|
||||
});
|
||||
|
||||
test('messageAriaLabel honours the 12-hour clock preference', () => {
|
||||
const ts = dayjs('2026-07-01T14:30:00').valueOf();
|
||||
assert.equal(
|
||||
messageAriaLabel('Bob', ts, false),
|
||||
`Bob, ${timeDayMonthYear(ts)} ${timeHourMinute(ts, false)}`,
|
||||
);
|
||||
});
|
||||
|
||||
test('messageAriaLabel keeps the sender name verbatim as plain text', () => {
|
||||
const ts = dayjs('2026-07-01T09:05:00').valueOf();
|
||||
const label = messageAriaLabel('@user:example.org', ts, true);
|
||||
assert.ok(label.startsWith('@user:example.org, '));
|
||||
assert.ok(!label.includes('<'));
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
import { timeDayMonthYear, timeHourMinute } from './time';
|
||||
|
||||
/**
|
||||
* Builds a plain-text accessible label for a message row, used when the
|
||||
* visible sender/timestamp header is collapsed and therefore hidden from
|
||||
* assistive technology.
|
||||
*
|
||||
* @param sender - Sender display name (already resolved to a human string).
|
||||
* @param ts - Message origin timestamp in milliseconds.
|
||||
* @param hour24Clock - Whether to format the time using a 24-hour clock.
|
||||
* @returns A label such as `Alice, 1 July 2026 14:30`.
|
||||
*/
|
||||
export const messageAriaLabel = (sender: string, ts: number, hour24Clock: boolean): string =>
|
||||
`${sender}, ${timeDayMonthYear(ts)} ${timeHourMinute(ts, hour24Clock)}`;
|
||||
@@ -0,0 +1,43 @@
|
||||
import { strict as assert } from 'node:assert';
|
||||
import { test } from 'node:test';
|
||||
import { readdirSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
|
||||
/**
|
||||
* Guard against same-directory filenames that differ only by case (e.g.
|
||||
* `threadSummary.ts` vs `ThreadSummary.tsx`). On case-insensitive filesystems
|
||||
* (the Windows release runner) an extensionless import of one can resolve to
|
||||
* the OTHER file — rolldown tries `.ts` before `.tsx` — producing
|
||||
* MISSING_EXPORT failures that never reproduce on the Linux/macOS machines the
|
||||
* project is developed and web-deployed on. This broke the desktop release
|
||||
* build twice before being diagnosed; this test makes the collision a local,
|
||||
* immediate failure instead.
|
||||
*/
|
||||
const findCaseCollisions = (dir: string, collisions: string[]): void => {
|
||||
const entries = readdirSync(dir, { withFileTypes: true });
|
||||
const seen = new Map<string, string>();
|
||||
entries.forEach((entry) => {
|
||||
// Compare basenames without extension: `Foo.tsx` collides with `foo.ts`
|
||||
// because module resolution is extensionless.
|
||||
const stem = entry.isDirectory() ? entry.name : entry.name.replace(/\.[^.]+$/, '');
|
||||
const key = stem.toLowerCase();
|
||||
const existing = seen.get(key);
|
||||
if (existing !== undefined && existing !== stem) {
|
||||
collisions.push(`${dir}: "${existing}" vs "${stem}"`);
|
||||
}
|
||||
if (existing === undefined) seen.set(key, stem);
|
||||
if (entry.isDirectory()) {
|
||||
findCaseCollisions(join(dir, entry.name), collisions);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
test('no same-directory filenames differing only by case under src/', () => {
|
||||
const collisions: string[] = [];
|
||||
findCaseCollisions('src', collisions);
|
||||
assert.deepEqual(
|
||||
collisions,
|
||||
[],
|
||||
`Case-colliding names break Windows builds:\n${collisions.join('\n')}`,
|
||||
);
|
||||
});
|
||||
@@ -5,7 +5,7 @@ import pkg from '../../../package.json';
|
||||
//
|
||||
// Installs pass-through wrappers around `console.warn` / `console.error` that
|
||||
// ring-buffer any log line matching the KE-1..KE-4 bug-cluster signatures
|
||||
// (see LOTUS_E2EE_INVESTIGATION.md). It NEVER swallows a log call — the
|
||||
// (E2EE KE-1..4 capture; see LOTUS_TODO.md). It NEVER swallows a log call — the
|
||||
// original console method is always invoked — and it performs NO network I/O.
|
||||
// The report metadata is limited to SDK version / device id / user id / sync
|
||||
// state; the captured log lines themselves are intentional evidence and may
|
||||
|
||||
@@ -44,6 +44,20 @@ if ('serviceWorker' in navigator) {
|
||||
});
|
||||
}
|
||||
|
||||
// Request persistent storage so the browser can't evict the IndexedDB
|
||||
// rust-crypto store under storage pressure. Eviction (while the localStorage
|
||||
// session/device-id survives) resurrects the device with a blank crypto store,
|
||||
// which then re-uploads OTKs the server already holds → the "one time key
|
||||
// already exists" upload storm and E2EE breakage. Only ask for sessions worth
|
||||
// protecting (skip anonymous/landing visitors to avoid a needless Firefox
|
||||
// prompt); check persisted() first so we don't re-prompt. Best-effort.
|
||||
if (navigator.storage?.persist && getFallbackSession()) {
|
||||
navigator.storage
|
||||
.persisted()
|
||||
.then((already) => (already ? undefined : navigator.storage.persist()))
|
||||
.catch(() => undefined);
|
||||
}
|
||||
|
||||
// Reload once if a lazy-loaded chunk is missing (stale deployment)
|
||||
window.addEventListener('vite:preloadError', () => {
|
||||
if (!sessionStorage.getItem('chunk-reload-attempted')) {
|
||||
|
||||
@@ -1,7 +1,39 @@
|
||||
/// <reference lib="WebWorker" />
|
||||
|
||||
import { precacheAndRoute, type PrecacheEntry } from 'workbox-precaching';
|
||||
|
||||
export type {};
|
||||
declare const self: ServiceWorkerGlobalScope;
|
||||
declare const self: ServiceWorkerGlobalScope & {
|
||||
// Replaced at build time by vite-plugin-pwa (injectManifest) with the list of
|
||||
// hashed build assets to precache. See vite.config.js VitePWA injectManifest.
|
||||
__WB_MANIFEST: Array<string | PrecacheEntry>;
|
||||
};
|
||||
|
||||
/**
|
||||
* PRECACHE (workbox-precaching). `self.__WB_MANIFEST` is replaced at build time
|
||||
* by vite-plugin-pwa with the list of hashed build assets
|
||||
* (assets/**\/*.{js,css,wasm}; see vite.config.js injectManifest.globPatterns).
|
||||
*
|
||||
* DEPLOY-SAFETY INVARIANTS (do not break):
|
||||
* 1. index.html / navigations are NEVER precached or precache-routed. The
|
||||
* manifest globs only `assets/**` (content-hashed), so index.html (served
|
||||
* from the app root) is absent from it and navigation requests fall through
|
||||
* to the network — a new deploy is picked up immediately, no stale SPA
|
||||
* shell. We deliberately do NOT register a navigation route /
|
||||
* createHandlerBoundToURL fallback.
|
||||
* 2. precacheAndRoute only matches its own manifest URLs (same-origin hashed
|
||||
* assets). It never matches the media-auth paths handled by the fetch
|
||||
* listener below — those are cross-origin homeserver URLs absent from the
|
||||
* manifest — so the existing media fetch behaviour is fully preserved. It
|
||||
* is registered before that listener; for a media request the precache
|
||||
* route finds no match and does not call respondWith, so the media handler
|
||||
* still runs.
|
||||
* 3. Assets are content-hashed, so a changed asset ships under a new filename;
|
||||
* PrecacheController drops entries no longer in the current manifest on
|
||||
* activate, so the precache self-updates each deploy without unbounded
|
||||
* growth.
|
||||
*/
|
||||
precacheAndRoute(self.__WB_MANIFEST);
|
||||
|
||||
type SessionInfo = {
|
||||
accessToken: string;
|
||||
|
||||
+13
-1
@@ -261,7 +261,19 @@ export default defineConfig({
|
||||
injectRegister: false,
|
||||
manifest: false,
|
||||
injectManifest: {
|
||||
injectionPoint: undefined,
|
||||
// PRECACHE (P5): emit `self.__WB_MANIFEST` into src/sw.ts so it can
|
||||
// precacheAndRoute the hashed build assets. index.html is deliberately
|
||||
// EXCLUDED from the manifest (globs only `assets/**`) so navigations
|
||||
// stay network-first and a new deploy is picked up immediately — see
|
||||
// the deploy-safety invariants documented in src/sw.ts.
|
||||
injectionPoint: 'self.__WB_MANIFEST',
|
||||
globPatterns: ['assets/**/*.{js,css,wasm}'],
|
||||
// Assets are content-hashed, so the filename is the cache key — don't
|
||||
// append a revision cache-busting param.
|
||||
dontCacheBustURLsMatching: /assets\//,
|
||||
// Raised above the 2 MB default so the ~5.5 MB matrix-sdk crypto wasm
|
||||
// (hash-busted and hot on every session) is precached deliberately.
|
||||
maximumFileSizeToCacheInBytes: 6 * 1024 * 1024,
|
||||
// codeSplitting: false is not yet supported by vite-plugin-pwa 1.3.0;
|
||||
// the inlineDynamicImports deprecation warning from Vite is from pwa internal build
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user