Compare commits
32 Commits
c1efa7b94e
...
lotus
| Author | SHA1 | Date | |
|---|---|---|---|
 jared
|
4d7a05c0f1 | ||
|
jared
|
b5e7bcc0b8 | ||
|
jared
|
bca371ad38 | ||
|
jared
|
899a14c119 | ||
|
jared
|
6728a1274d | ||
|
jared
|
21dda93d1b | ||
|
jared
|
4380041014 | ||
|
jared
|
8729ccfcf5 | ||
|
jared
|
8ab1ec254b | ||
|
jared
|
23f715857c | ||
|
jared
|
f589182709 | ||
|
jared
|
ef573376ac | ||
|
jared
|
34d9272790 | ||
|
jared
|
96f7187031 | ||
|
jared
|
664dcd4cd8 | ||
|
jared
|
7f960b026b | ||
|
jared
|
992d2b83b3 | ||
|
jared
|
a9505ca5b2 | ||
|
jared
|
dca51a41ef | ||
|
jared
|
579449acc3 | ||
|
jared
|
34592d9144 | ||
|
jared
|
0adce52d37 | ||
|
jared
|
501d493ca4 | ||
|
jared
|
ffb934fce6 | ||
|
jared
|
440c1fe948 | ||
|
jared
|
aa62df9c75 | ||
|
jared
|
15ac538a4b | ||
|
jared
|
39cfc23ebe | ||
|
jared
|
7a8cadc6ec | ||
|
jared
|
91bd360125 | ||
|
jared
|
7da960ac8c | ||
|
jared
|
ed51c39fe7 |
+38
-26
@@ -15,23 +15,33 @@ step-by-step checks in [`LOTUS_TESTING.md`](./LOTUS_TESTING.md).
|
||||
|
||||
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 |
|
||||
| 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 |
|
||||
|
||||
**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.
|
||||
|
||||
@@ -69,12 +79,14 @@ from testing:
|
||||
|
||||
## 🔴 Open — Actionable
|
||||
|
||||
### Calls / Audio
|
||||
|
||||
- ~~**N127 — ML denoise shim is never injected in `vite dev`.**~~ **RESOLVED (dissolved by the A7 denoise cutover).** `vite.config.js` no longer injects a getUserMedia shim at all — the forked Element Call runs ML denoise in-source as a LiveKit `TrackProcessor` (activated by `lotusDenoiseSource=1`), so there is no build-time injection that could be missing in dev. Nothing to fix.
|
||||
|
||||
### 🧨 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
|
||||
@@ -128,7 +140,7 @@ retry … AbortError: Restart delayed event timed out before the HS responded`,
|
||||
### 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.
|
||||
- ~~**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
|
||||
@@ -139,15 +151,15 @@ retry … AbortError: Restart delayed event timed out before the HS responded`,
|
||||
|
||||
### 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.
|
||||
- ~~**`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 — 545 tests across 62 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).
|
||||
- **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 (the decoration CDN is now single-sourced in `avatarDecorations.ts`, but the literal is still in-repo).
|
||||
- ~~**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.)
|
||||
@@ -156,4 +168,4 @@ retry … AbortError: Restart delayed event timed out before the HS responded`,
|
||||
|
||||
### Big Projects
|
||||
|
||||
- **#5 — Seasonal themes & chat-background redesign.** Current backgrounds are basic CSS; goal is high-fidelity, research-backed, GPU-accelerated designs (layered `oklch`, `backdrop-filter`, `contain:paint`) with WCAG-AA overlay contrast. Treat each as its own design sprint.
|
||||
- ~~**#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."
|
||||
|
||||
@@ -0,0 +1,407 @@
|
||||
# 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.
|
||||
+78
-9
@@ -18,15 +18,16 @@ Last updated: June 2026.
|
||||
9. [Per-Message Read Receipts](#per-message-read-receipts)
|
||||
10. [Delivery Status Indicators](#delivery-status-indicators)
|
||||
11. [Messaging Enhancements](#messaging-enhancements)
|
||||
12. [Presence](#presence)
|
||||
13. [UX & Composer](#ux--composer)
|
||||
14. [Room Customization](#room-customization)
|
||||
15. [Moderation](#moderation)
|
||||
16. [Notifications](#notifications)
|
||||
17. [Server Integration](#server-integration)
|
||||
18. [Infrastructure](#infrastructure)
|
||||
19. [Desktop App Features](#desktop-app-features)
|
||||
20. [Key Custom Files](#key-custom-files)
|
||||
12. [Threads (P3-8)](#threads-p3-8)
|
||||
13. [Presence](#presence)
|
||||
14. [UX & Composer](#ux--composer)
|
||||
15. [Room Customization](#room-customization)
|
||||
16. [Moderation](#moderation)
|
||||
17. [Notifications](#notifications)
|
||||
18. [Server Integration](#server-integration)
|
||||
19. [Infrastructure](#infrastructure)
|
||||
20. [Desktop App Features](#desktop-app-features)
|
||||
21. [Key Custom Files](#key-custom-files)
|
||||
|
||||
---
|
||||
|
||||
@@ -690,6 +691,24 @@ Context menu → **Forward** allows forwarding a message to any room the user is
|
||||
- The search panel accepts `from_ts` and `to_ts` values (epoch milliseconds) passed to the search API
|
||||
- A chip shows the active date range with an **×** button to clear it
|
||||
|
||||
### Encrypted Search Cache (P4-8, opt-in)
|
||||
|
||||
Persistent local index for encrypted-room search, so coverage survives page reloads instead of requiring re-pagination + re-decryption every session.
|
||||
|
||||
- Raw IndexedDB (`lotus-search-cache`): message rows keyed `[roomId, eventId]` + per-room coverage markers; merged into local search results with in-memory-wins dedupe
|
||||
- **Opt-in, default OFF** (it stores decrypted text at rest): toggle + "Clear cached index" live in the search panel's Encrypted Rooms section, with the privacy note "Stores decrypted text on this device"
|
||||
- Always wiped on logout; any IndexedDB error degrades to a cache-miss (never breaks search)
|
||||
- Files: `src/app/utils/searchCache.ts`, `src/app/state/searchCacheEnabled.ts`, `features/message-search/useLocalMessageSearch.ts`
|
||||
|
||||
### Math / LaTeX Rendering (P4-4)
|
||||
|
||||
KaTeX-rendered math in messages, two paths:
|
||||
|
||||
- **Spec path (CS-API §11.5):** `<span/div data-mx-maths="…">` in `formatted_body` renders the attribute's LaTeX (block for div, inline for span); on render failure the element's child fallback content shows instead
|
||||
- **Plain-text path:** `$…$` (inline) and `$$…$$` (block) with conservative rules — escape-aware (`\$`), currency-guarded (`$5 and $10` stays text), never inside `code`/`pre`
|
||||
- KaTeX + its CSS load lazily on first math encountered — zero cost to the main bundle
|
||||
- Files: `src/app/utils/mathParse.ts` (+14 tests), `components/math/KaTeX.tsx`, `plugins/react-custom-html-parser.tsx`
|
||||
|
||||
### Image / Video Captions
|
||||
|
||||
Images and videos can be sent with a caption. The caption and media are sent as a single event.
|
||||
@@ -765,6 +784,36 @@ Generic (non-domain-specific) cards display a Google S2 favicon. Empty or unpars
|
||||
|
||||
---
|
||||
|
||||
## Threads (P3-8)
|
||||
|
||||
Full threaded-conversation support (`m.thread`, matrix-js-sdk `threadSupport`), Element-consistent.
|
||||
|
||||
### Thread Panel
|
||||
|
||||
A right-side drawer (mirrors the members drawer; fullscreen on mobile) with the thread's root message emphasized at top, an "N replies" divider, the full reply timeline (virtualized, back-paginates via `/relations`, decrypts E2EE threads), reactions/edits/redactions, and its own composer. Open it from **Reply in Thread** in the message menu, a reply's thread indicator, or a summary chip; close with **×** or Escape. Reading the panel sends threaded read receipts so per-thread unread counts clear.
|
||||
|
||||
### Summary Chips
|
||||
|
||||
Root messages in the main timeline show a **"N replies · time"** chip (server-aggregated `m.thread` bundle, or the live Thread once loaded) with an unread badge — threaded replies no longer render inline in the main timeline, so the chip is how conversations stay discoverable.
|
||||
|
||||
### Thread Composer
|
||||
|
||||
The panel embeds the full composer (uploads, emoji, stickers, GIFs, voice, location, polls) with drafts, reply state, and upload queues **isolated per thread** (`roomId::threadRootId` keys). Replies-to-replies produce spec-correct `m.thread` + `m.in_reply_to` (`is_falling_back: false`). Scheduling and slash commands are disabled inside threads (v1).
|
||||
|
||||
### Notifications (Slack-style, P4-1)
|
||||
|
||||
By default you're notified for a thread reply only when you **participate** in that thread (you've posted in it) or the reply **@mentions** you — other threads accumulate quietly behind their chip badges. Every thread can be overridden from the bell menu in the panel header: **Default (participating) / All replies / Mentions only / Mute**. Modes sync across your devices (`io.lotus.thread_notifications` account data, auto-pruned). Muting a thread silences notifications and sounds, removes the chip's unread badge (a small bell-mute glyph shows instead), and subtracts that thread from the room's sidebar unread badge (client-side — other Matrix clients on the account still count it).
|
||||
|
||||
### Under the Hood
|
||||
|
||||
- `threadSupport: true` (startClient) partitions thread events into SDK `Thread` timelines; markAsRead sends **unthreaded** receipts so room badges keep clearing
|
||||
- Thread replies are notified via exactly one path (room-level `ThreadEvent.NewReply` w/ per-thread dedupe + panel-aware focus suppression); the main timeline notifier is thread-guarded, and room badges refresh live on `RoomEvent.UnreadNotifications`
|
||||
- Pending sends render via a `LocalEchoUpdated` strip (chronological local echo never enters thread timelineSets)
|
||||
- Deep links to thread events redirect into the panel
|
||||
- Files: `features/room/thread/*`, `state/room/thread.ts`, `hooks/useThreadSummary.ts` (+35 tests across the stack)
|
||||
|
||||
---
|
||||
|
||||
## Presence
|
||||
|
||||
### Discord-Style Presence Selector
|
||||
@@ -1130,6 +1179,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
|
||||
@@ -1160,6 +1221,14 @@ The `useAuthentication` parameter was previously mispositioned, causing unauthen
|
||||
|
||||
The `encUrlPreview` setting defaults to `true` rather than `false`. A security advisory chip in **Settings → Privacy** explains the tradeoff (the homeserver can see which URLs are being previewed) so users can make an informed choice.
|
||||
|
||||
### Hardened Session Storage (N97 partial, 2026-07)
|
||||
|
||||
The session persists as ONE atomic `cinny_session_v1` JSON write (previously ~10 separate localStorage keys written non-atomically). Reads prefer the blob with transparent migration from the legacy keys (dual-written one release for rollback). Cross-tab sync: logging out or in from one tab reloads the others so no tab runs with stale credentials. `state/sessions.ts` (22 tests), `hooks/useSessionSync.ts`.
|
||||
|
||||
### 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`.
|
||||
|
||||
---
|
||||
|
||||
## Desktop App Features
|
||||
|
||||
+96
-6
@@ -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.
|
||||
@@ -573,10 +573,100 @@ 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 Needs-Verification rows in `LOTUS_BUGS.md` (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 + `LOTUS_E2EE_INVESTIGATION.md` is the runbook.
|
||||
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
+68
-36
@@ -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:
|
||||
|
||||
@@ -162,10 +167,19 @@ Status: `[ ]` pending · `[~]` in progress · `[x]` completed
|
||||
|
||||
---
|
||||
|
||||
### [ ] P3-8 · Thread Panel (full side drawer)
|
||||
### [~] P3-8 · Thread Panel (full side drawer) — IMPLEMENTED (2026-07), ⚠️ AWAITING LIVE QA
|
||||
|
||||
**⚠️ LARGEST FEATURE — requires its own planning session before implementation.**
|
||||
**What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.
|
||||
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.
|
||||
|
||||
Features:
|
||||
|
||||
@@ -196,22 +210,28 @@ Features:
|
||||
|
||||
## Priority 4 — Specialized, high complexity, or low priority
|
||||
|
||||
### [ ] P4-7 · Virtualized Infinite Scroll for Search Results
|
||||
### [x] P4-7 · Virtualized Infinite Scroll for Search Results — ALREADY IMPLEMENTED (found 2026-07)
|
||||
|
||||
**What:** Replace the manual "load more" button with an automated, virtualized infinite scroll for search results.
|
||||
**Approach:** Utilize `@tanstack/react-virtual` in `MessageSearch.tsx` to handle the `nextToken` automatically as the user scrolls.
|
||||
**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_BUGS AW / P4-8 row).
|
||||
|
||||
### [ ] P4-1 · Thread Notification Mode Per-Thread (MSC3771)
|
||||
### [~] P4-1 · Thread Notification Mode Per-Thread — IMPLEMENTED (2026-07), ⚠️ AWAITING LIVE QA
|
||||
|
||||
**Spec:** MSC3771 (stable). Depends on Thread Panel (#P3-8).
|
||||
**What:** Per-thread notification toggle: "All messages" vs "Mentions only". Accessible from the thread panel header. Tracks unread counts separately per thread.
|
||||
**[AUDIT REQUIRED]** — Implement after Thread Panel. Requires understanding how the SDK tracks per-thread unread counts.
|
||||
**Complexity:** Medium (after thread panel exists).
|
||||
**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).
|
||||
|
||||
---
|
||||
|
||||
@@ -257,7 +277,7 @@ Features:
|
||||
- Account mgmt: `settings/account/OidcManageAccount.tsx`.
|
||||
- 13 unit tests (discovery/flow/session/cache/callback parsing). All gates green.
|
||||
**Awaiting verification (needs a real MSC3861 server — lotusguild is NOT one):** deploy + log into **mozilla.org** (requires adding mozilla to the deployed `config.json` homeserverList + its domains to the CSP `connect-src`/`img-src` — see below), OR run a local `matrix-authentication-service` + Synapse `msc3861` dev loop.
|
||||
**To enable the mozilla.org test:** add to `matrix/cinny/config.json` homeserverList `"mozilla.org"`, and to the nginx CSP `connect-src`/`img-src`: `https://mozilla.org https://mozilla.modular.im https://chat.mozilla.org https://vector.im`.
|
||||
**Mozilla.org test enablement: ALREADY DEPLOYED (verified 2026-07)** — `matrix/cinny/config.json` homeserverList includes `mozilla.org` and the nginx CSP `connect-src` includes the mozilla/modular/vector domains (`matrix/cinny/nginx.conf:42`). **Nothing blocks the test — just pick mozilla.org on the login screen and complete an OIDC login.**
|
||||
|
||||
---
|
||||
|
||||
@@ -404,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)
|
||||
@@ -482,9 +503,9 @@ Check back after each Synapse upgrade — re-run `/matrix/client/versions` and `
|
||||
|
||||
## Pending Audits
|
||||
|
||||
### [ ] Audit-3 · Profile banner image — Matrix protocol support
|
||||
### [DEFERRED] Audit-3 · Profile banner image — Matrix protocol support — RESEARCHED (2026-07)
|
||||
|
||||
Research whether Matrix spec or MSC4133 (v1.16) defines a standard profile banner field. `uk.tcpip.msc4133.stable = true` on our server — check if a `banner_url` or similar field is defined. If no cross-client standard exists, do not implement.
|
||||
**Finding:** [MSC4427 — Custom banners for user profiles](https://github.com/matrix-org/matrix-spec-proposals/pull/4427) defines a `banner_url` profile field on top of the MSC4133 extensible-profile system (which our server supports, `uk.tcpip.msc4133.stable = true`, and which became stable in Matrix v1.16). However MSC4427 is an **open proposal, not merged** — no cross-client standard yet, so per this item's own rule: do not implement. **Revisit when MSC4427 merges** (implementation would then be small: read/write the field via the MSC4133 profile API + render a banner in UserHero/profile popouts).
|
||||
|
||||
---
|
||||
|
||||
@@ -492,26 +513,37 @@ Research whether Matrix spec or MSC4133 (v1.16) defines a standard profile banne
|
||||
|
||||
Exhaustive, low-level implementation details for backlog items. Follow these patterns to ensure code is "Lotus-perfect" (idiomatic, performant, and TDS-compliant).
|
||||
|
||||
### P3-8 · Thread Panel (Full Side Drawer)
|
||||
### P3-8 · Thread Panel (Full Side Drawer) — 🟢 FULL DESIGN (2026-07, ready to execute)
|
||||
|
||||
**Architecture:** Mirror the `MembersDrawer` pattern but with a specialized timeline.
|
||||
**Decisions (each backed by SDK evidence in node_modules/matrix-js-sdk):**
|
||||
|
||||
- **State (`src/app/state/room/thread.ts`):**
|
||||
```typescript
|
||||
export const activeThreadIdAtom = atom<string | null>(null);
|
||||
```
|
||||
- **Layout (`src/app/features/room/Room.tsx`):** Insert `ThreadPanel` conditionally alongside `RoomTimeline`:
|
||||
```tsx
|
||||
{
|
||||
activeThreadId && (
|
||||
<>
|
||||
<Line variant="Background" direction="Vertical" size="300" />
|
||||
<ThreadPanel roomId={roomId} threadId={activeThreadId} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
- **Component (`src/app/features/room/thread/ThreadPanel.tsx`):** Use `room.getThread(threadId)` from the SDK. Render a `Header` with a "Close" button that sets `activeThreadIdAtom` to `null`. Reuse `RoomTimeline` but pass a filtered `EventTimelineSet`. Use `thread.timelineSet` directly for the most accurate thread view.
|
||||
| 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).
|
||||
- **Summary chip** must render from the server-aggregated bundle (`unsigned['m.relations']['m.thread']`) so it works before any Thread object exists.
|
||||
- Room-list "latest message" preview may show the root, not the newest reply — cosmetic, accept v1.
|
||||
|
||||
**File inventory — new:** `state/room/thread.ts` (+test), `features/room/thread/{useThread.ts, threadSummary.ts(+test), ThreadTimeline.tsx(+css), ThreadPanel.tsx(+css), ThreadSummary.tsx, index.ts}`, `hooks/useThreadSummary.ts`. **Edited:** `initMatrix.ts` + `utils/notifications.ts` (coordinator, step 0), `RoomInput.tsx` (threadRootId prop), `RoomTimeline.tsx` (handleReplyClick startThread → open panel; ThreadSummary chips at the two Message call sites; Reply onThreadClick; deep-link redirect), `components/message/Reply.tsx`, `Room.tsx` (render panel after MediaGallery block, gated `!callView && activeThreadId`, `key={roomId+threadId}`).
|
||||
|
||||
**4-agent partition:** step 0 (coordinator one-liners) → A: state+SDK glue (+tests) · B: ThreadTimeline (largest; copies the `useTimelinePagination` pattern rather than exporting it) · C: RoomInput changes · D: panel shell + RoomTimeline/Reply integration — all parallel against pinned interface contracts → coordinator wires Room.tsx + gates.
|
||||
|
||||
**Verification:** gates (tsc/eslint/build/tests) + post-merge manual QA: open thread via chip/menu/indicator; pending→confirmed echo; `is_falling_back:false` on reply-in-thread; main timeline shows root+chip only; badge clears; reload keeps partitioning; encrypted threads decrypt. **Release note required:** threaded replies no longer render inline in the main timeline.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -18,6 +18,8 @@ The Lotus Chat logo (`public/res/Lotus.png`) is a derivative work based on the o
|
||||
|
||||
### Messaging
|
||||
|
||||
- Threads: reply in a thread and read/write the whole conversation in a side panel — root messages show a "N replies" chip with an unread badge (threaded replies live in the panel now, not inline in the room)
|
||||
- Slack-style thread notifications: by default you're only pinged for threads you're in or where you're @mentioned; set any thread to All / Mentions-only / Mute from the panel's bell menu (muted threads stop bumping badges; syncs across devices)
|
||||
- See who has read each message, and track delivery status (sending / sent / failed)
|
||||
- Bookmark any message and revisit saved messages from the sidebar
|
||||
- Schedule messages to send at a specific time
|
||||
@@ -33,6 +35,8 @@ The Lotus Chat logo (`public/res/Lotus.png`) is a derivative work based on the o
|
||||
- Search for and send GIFs from a built-in GIF picker
|
||||
- Control voice message playback speed: 0.75× / 1× / 1.5× / 2×
|
||||
- Search messages with a date range filter
|
||||
- Optional persistent search index for encrypted rooms (off by default — stores decrypted text on your device; clearable, wiped on logout)
|
||||
- Write math with LaTeX: `$inline$` and `$$block$$` render via KaTeX (spec `data-mx-maths` supported)
|
||||
- Room topics support rich formatting (bold, links, italics)
|
||||
- Deleted messages show a placeholder instead of disappearing
|
||||
- Code blocks highlight syntax for JS/TS, Python, and Rust
|
||||
|
||||
@@ -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
+54
-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",
|
||||
@@ -51,9 +49,10 @@
|
||||
"immer": "11.1.8",
|
||||
"is-hotkey": "0.2.0",
|
||||
"jotai": "2.20.0",
|
||||
"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",
|
||||
@@ -74,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",
|
||||
@@ -83,6 +83,7 @@
|
||||
"@types/chroma-js": "3.1.2",
|
||||
"@types/file-saver": "2.0.7",
|
||||
"@types/is-hotkey": "0.1.10",
|
||||
"@types/katex": "0.16.8",
|
||||
"@types/node": "25.9.1",
|
||||
"@types/prismjs": "1.26.6",
|
||||
"@types/react": "19.2.15",
|
||||
@@ -2695,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"
|
||||
@@ -3918,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",
|
||||
@@ -3974,6 +3965,13 @@
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/katex": {
|
||||
"version": "0.16.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.8.tgz",
|
||||
"integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "25.9.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
|
||||
@@ -4042,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",
|
||||
@@ -5541,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": {
|
||||
@@ -6187,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",
|
||||
@@ -9087,6 +9080,31 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/katex": {
|
||||
"version": "0.16.11",
|
||||
"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz",
|
||||
"integrity": "sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==",
|
||||
"funding": [
|
||||
"https://opencollective.com/katex",
|
||||
"https://github.com/sponsors/katex"
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"commander": "^8.3.0"
|
||||
},
|
||||
"bin": {
|
||||
"katex": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/katex/node_modules/commander": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
|
||||
"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/keyv": {
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
||||
@@ -9937,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",
|
||||
@@ -13194,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": {
|
||||
@@ -13235,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",
|
||||
@@ -13272,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"
|
||||
@@ -13282,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"
|
||||
|
||||
+5
-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",
|
||||
@@ -76,9 +74,10 @@
|
||||
"immer": "11.1.8",
|
||||
"is-hotkey": "0.2.0",
|
||||
"jotai": "2.20.0",
|
||||
"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",
|
||||
@@ -99,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",
|
||||
@@ -108,6 +108,7 @@
|
||||
"@types/chroma-js": "3.1.2",
|
||||
"@types/file-saver": "2.0.7",
|
||||
"@types/is-hotkey": "0.1.10",
|
||||
"@types/katex": "0.16.8",
|
||||
"@types/node": "25.9.1",
|
||||
"@types/prismjs": "1.26.6",
|
||||
"@types/react": "19.2.15",
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
import { Box, config, Icon, Icons, IconSrc, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
|
||||
import React, { MouseEventHandler, ReactNode, useMemo, useState } from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { stopPropagation } from '../utils/keyboard';
|
||||
import { ThreadNotificationMode } from '../utils/threadNotifications';
|
||||
import { useSetThreadNotificationMode } from '../hooks/useThreadNotifications';
|
||||
import { AsyncStatus } from '../hooks/useAsyncCallback';
|
||||
|
||||
export const getThreadNotificationModeIcon = (mode?: ThreadNotificationMode): IconSrc => {
|
||||
if (mode === ThreadNotificationMode.Mute) return Icons.BellMute;
|
||||
if (mode === ThreadNotificationMode.MentionsOnly) return Icons.BellPing;
|
||||
if (mode === ThreadNotificationMode.All) return Icons.BellRing;
|
||||
|
||||
return Icons.Bell;
|
||||
};
|
||||
|
||||
const useThreadNotificationModes = (): ThreadNotificationMode[] =>
|
||||
useMemo(
|
||||
() => [
|
||||
ThreadNotificationMode.Default,
|
||||
ThreadNotificationMode.All,
|
||||
ThreadNotificationMode.MentionsOnly,
|
||||
ThreadNotificationMode.Mute,
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const useThreadNotificationModeStr = (): Record<ThreadNotificationMode, string> =>
|
||||
useMemo(
|
||||
() => ({
|
||||
[ThreadNotificationMode.Default]: 'Default (participating)',
|
||||
[ThreadNotificationMode.All]: 'All replies',
|
||||
[ThreadNotificationMode.MentionsOnly]: 'Mentions only',
|
||||
[ThreadNotificationMode.Mute]: 'Mute',
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
type ThreadNotificationModeSwitcherProps = {
|
||||
roomId: string;
|
||||
threadId: string;
|
||||
value?: ThreadNotificationMode;
|
||||
children: (
|
||||
handleOpen: MouseEventHandler<HTMLButtonElement>,
|
||||
opened: boolean,
|
||||
changing: boolean,
|
||||
) => ReactNode;
|
||||
};
|
||||
export function ThreadNotificationModeSwitcher({
|
||||
roomId,
|
||||
threadId,
|
||||
value = ThreadNotificationMode.Default,
|
||||
children,
|
||||
}: ThreadNotificationModeSwitcherProps) {
|
||||
const modes = useThreadNotificationModes();
|
||||
const modeToStr = useThreadNotificationModeStr();
|
||||
|
||||
const { modeState, setMode } = useSetThreadNotificationMode(roomId, threadId);
|
||||
const changing = modeState.status === AsyncStatus.Loading;
|
||||
|
||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
||||
|
||||
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setMenuCords(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setMenuCords(undefined);
|
||||
};
|
||||
|
||||
const handleSelect = (mode: ThreadNotificationMode) => {
|
||||
if (changing) return;
|
||||
setMode(mode);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<PopOut
|
||||
anchor={menuCords}
|
||||
offset={5}
|
||||
position="Bottom"
|
||||
align="End"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: handleClose,
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
|
||||
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
||||
{modes.map((mode) => (
|
||||
<MenuItem
|
||||
key={mode}
|
||||
size="300"
|
||||
variant="Surface"
|
||||
aria-pressed={mode === value}
|
||||
radii="300"
|
||||
disabled={changing}
|
||||
onClick={() => handleSelect(mode)}
|
||||
before={
|
||||
<Icon
|
||||
size="100"
|
||||
src={getThreadNotificationModeIcon(mode)}
|
||||
filled={mode === value}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Text size="T300">
|
||||
{mode === value ? <b>{modeToStr[mode]}</b> : modeToStr[mode]}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
{children(handleOpenMenu, !!menuCords, changing)}
|
||||
</PopOut>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import katex from 'katex';
|
||||
import 'katex/dist/katex.min.css';
|
||||
|
||||
type KaTeXProps = {
|
||||
/** Raw LaTeX source (without `$`/`$$` delimiters). */
|
||||
latex: string;
|
||||
/** Render as block (display) math when true, inline otherwise. */
|
||||
displayMode?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Lazily-loaded KaTeX renderer.
|
||||
*
|
||||
* This module statically imports `katex` and its stylesheet, so both only enter
|
||||
* the bundle via the dynamic `import()` of this file (see the `lazy()` wrapper
|
||||
* in `react-custom-html-parser.tsx`). They are therefore NOT part of the eager
|
||||
* import graph.
|
||||
*
|
||||
* We render with `throwOnError: false`, so KaTeX itself renders a parse error
|
||||
* inline (in its error colour) rather than throwing. The HTML returned by
|
||||
* `renderToString` is produced by our own trusted call from a fixed options
|
||||
* object — it is safe to inject via `dangerouslySetInnerHTML`.
|
||||
*/
|
||||
export default function KaTeX({ latex, displayMode = false }: KaTeXProps) {
|
||||
const html = katex.renderToString(latex, {
|
||||
displayMode,
|
||||
throwOnError: false,
|
||||
output: 'htmlAndMathml',
|
||||
});
|
||||
|
||||
const Wrapper = displayMode ? 'div' : 'span';
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
// KaTeX output is generated by our own render call (trusted-safe).
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -61,6 +61,7 @@ type ReplyProps = {
|
||||
replyEventId: string;
|
||||
threadRootId?: string | undefined;
|
||||
onClick?: MouseEventHandler | undefined;
|
||||
onThreadClick?: ((threadRootId: string) => void) | undefined;
|
||||
getMemberPowerTag?: GetMemberPowerTag;
|
||||
accessibleTagColors?: Map<string, string>;
|
||||
legacyUsernameColor?: boolean;
|
||||
@@ -74,6 +75,7 @@ export const Reply = as<'div', ReplyProps>(
|
||||
replyEventId,
|
||||
threadRootId,
|
||||
onClick,
|
||||
onThreadClick,
|
||||
getMemberPowerTag,
|
||||
accessibleTagColors,
|
||||
legacyUsernameColor,
|
||||
@@ -110,7 +112,7 @@ export const Reply = as<'div', ReplyProps>(
|
||||
<ThreadIndicator
|
||||
as="button"
|
||||
data-event-id={threadRootId}
|
||||
onClick={onClick}
|
||||
onClick={onThreadClick ? () => onThreadClick(threadRootId) : onClick}
|
||||
aria-label="View thread"
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { usePowerLevels } from '../../hooks/usePowerLevels';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { SoundboardPackEditor } from './SoundboardPackEditor';
|
||||
import { SoundboardContent, SoundboardPack } from '../../plugins/soundboard';
|
||||
import { StateEvent } from '../../../types/matrix/room';
|
||||
import { useRoomSoundboardPack } from '../../hooks/useSoundboardPacks';
|
||||
import { PackAddress } from '../../plugins/custom-emoji/PackAddress';
|
||||
import { randomStr } from '../../utils/common';
|
||||
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
|
||||
import { useRoomCreators } from '../../hooks/useRoomCreators';
|
||||
|
||||
type RoomSoundboardPackProps = {
|
||||
room: Room;
|
||||
stateKey: string;
|
||||
};
|
||||
|
||||
export function RoomSoundboardPack({ room, stateKey }: RoomSoundboardPackProps) {
|
||||
const mx = useMatrixClient();
|
||||
const userId = mx.getUserId()!;
|
||||
const powerLevels = usePowerLevels(room);
|
||||
const creators = useRoomCreators(room);
|
||||
const permissions = useRoomPermissions(creators, powerLevels);
|
||||
const canEdit = permissions.stateEvent(
|
||||
StateEvent.LotusSoundboardRoom as unknown as keyof import('matrix-js-sdk').StateEvents,
|
||||
userId,
|
||||
);
|
||||
|
||||
const fallbackPack = useMemo(
|
||||
() => new SoundboardPack(randomStr(4), {}, new PackAddress(room.roomId, stateKey)),
|
||||
[room.roomId, stateKey],
|
||||
);
|
||||
const pack = useRoomSoundboardPack(room, stateKey) ?? fallbackPack;
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
async (content: SoundboardContent) => {
|
||||
await mx.sendStateEvent(
|
||||
room.roomId,
|
||||
StateEvent.LotusSoundboardRoom as unknown as keyof import('matrix-js-sdk').StateEvents,
|
||||
content as never,
|
||||
stateKey,
|
||||
);
|
||||
},
|
||||
[mx, room.roomId, stateKey],
|
||||
);
|
||||
|
||||
return <SoundboardPackEditor pack={pack} canEdit={canEdit} onUpdate={handleUpdate} />;
|
||||
}
|
||||
@@ -0,0 +1,408 @@
|
||||
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
Icon,
|
||||
IconButton,
|
||||
Icons,
|
||||
Input,
|
||||
PopOut,
|
||||
Spinner,
|
||||
Text,
|
||||
color,
|
||||
config,
|
||||
toRem,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { EmojiBoard } from '../emoji-board';
|
||||
import { SoundboardClip, SoundboardContent, SoundboardPack } from '../../plugins/soundboard';
|
||||
import { uniqueShortcode } from '../../plugins/soundboard/utils';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
||||
import {
|
||||
playClipLocally,
|
||||
resolveClipObjectUrl,
|
||||
SOUNDBOARD_ACCEPT,
|
||||
SOUNDBOARD_MAX_CLIP_BYTES,
|
||||
SOUNDBOARD_MAX_CLIPS,
|
||||
} from '../../utils/soundboardClips';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
|
||||
type ClipDraft = {
|
||||
url: string;
|
||||
body: string;
|
||||
emoji: string;
|
||||
volume: number;
|
||||
info?: SoundboardClip['info'];
|
||||
};
|
||||
|
||||
type SoundboardPackEditorProps = {
|
||||
pack: SoundboardPack;
|
||||
canEdit?: boolean;
|
||||
onUpdate: (content: SoundboardContent) => Promise<void>;
|
||||
};
|
||||
|
||||
/**
|
||||
* Reusable single-pack soundboard manager (used by the settings page and the
|
||||
* in-call management mode). Mirrors image-pack-view/ImagePackContent's staged-
|
||||
* edit + batched-save pattern, but per-clip fields are name + emoji + volume.
|
||||
*/
|
||||
export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPackEditorProps) {
|
||||
const mx = useMatrixClient();
|
||||
|
||||
// Staged, unsaved state:
|
||||
const [drafts, setDrafts] = useState<Map<string, ClipDraft>>(new Map()); // shortcode -> edits
|
||||
const [deleted, setDeleted] = useState<Set<string>>(new Set());
|
||||
const [uploads, setUploads] = useState<Array<{ shortcode: string } & ClipDraft>>([]);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState<string>();
|
||||
const [emojiFor, setEmojiFor] = useState<string>(); // shortcode currently picking an emoji
|
||||
const [busyPreview, setBusyPreview] = useState<string>();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const emojiAnchorRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
const existing = useMemo(() => pack.getClips(), [pack]);
|
||||
const clipCount = existing.filter((c) => !deleted.has(c.shortcode)).length + uploads.length;
|
||||
|
||||
const dirty = drafts.size > 0 || deleted.size > 0 || uploads.length > 0;
|
||||
|
||||
const draftFor = (shortcode: string, base: { body: string; emoji: string; volume: number }) =>
|
||||
drafts.get(shortcode) ?? { url: '', ...base };
|
||||
|
||||
const setDraft = (shortcode: string, patch: Partial<ClipDraft>, base: ClipDraft) => {
|
||||
setDrafts((prev) => {
|
||||
const next = new Map(prev);
|
||||
next.set(shortcode, { ...base, ...(next.get(shortcode) ?? {}), ...patch });
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const preview = useCallback(
|
||||
async (id: string, mxc: string, volume: number) => {
|
||||
setBusyPreview(id);
|
||||
try {
|
||||
const url = await resolveClipObjectUrl(mx, mxc);
|
||||
playClipLocally(url, volume / 100);
|
||||
} catch {
|
||||
/* ignore preview errors */
|
||||
} finally {
|
||||
setBusyPreview(undefined);
|
||||
}
|
||||
},
|
||||
[mx],
|
||||
);
|
||||
|
||||
const handleFiles = useCallback(
|
||||
async (files: FileList | null) => {
|
||||
if (!files || files.length === 0) return;
|
||||
setUploading(true);
|
||||
setError(undefined);
|
||||
try {
|
||||
const taken = new Set<string>([
|
||||
...existing.map((c) => c.shortcode),
|
||||
...uploads.map((u) => u.shortcode),
|
||||
]);
|
||||
for (let i = 0; i < files.length; i += 1) {
|
||||
const file = files[i];
|
||||
if (clipCount + uploads.length >= SOUNDBOARD_MAX_CLIPS) {
|
||||
throw new Error(`Soundboard is full (max ${SOUNDBOARD_MAX_CLIPS} clips).`);
|
||||
}
|
||||
if (file.size > SOUNDBOARD_MAX_CLIP_BYTES) {
|
||||
throw new Error(`"${file.name}" is too large (max 1 MB).`);
|
||||
}
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
const res = await mx.uploadContent(file, { type: file.type || 'audio/mpeg' });
|
||||
const mxc = res.content_uri;
|
||||
if (!mxc) throw new Error('Upload failed.');
|
||||
const name = file.name.replace(/\.[^/.]+$/, '');
|
||||
const shortcode = uniqueShortcode(name, taken);
|
||||
taken.add(shortcode);
|
||||
setUploads((prev) => [
|
||||
...prev,
|
||||
{
|
||||
shortcode,
|
||||
url: mxc,
|
||||
body: name,
|
||||
emoji: '',
|
||||
volume: 100,
|
||||
info: { mimetype: file.type || undefined, size: file.size },
|
||||
},
|
||||
]);
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Upload failed.');
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
},
|
||||
[mx, existing, uploads, clipCount],
|
||||
);
|
||||
|
||||
const [saveState, save] = useAsyncCallback(
|
||||
useCallback(async () => {
|
||||
const clips: Record<string, SoundboardClip> = {};
|
||||
existing.forEach((c) => {
|
||||
if (deleted.has(c.shortcode)) return;
|
||||
const d = drafts.get(c.shortcode);
|
||||
clips[c.shortcode] = {
|
||||
url: c.url,
|
||||
body: d ? d.body : c.body,
|
||||
emoji: d ? d.emoji || undefined : c.emoji,
|
||||
volume: d ? d.volume : c.volume,
|
||||
info: c.info,
|
||||
};
|
||||
});
|
||||
uploads.forEach((u) => {
|
||||
clips[u.shortcode] = {
|
||||
url: u.url,
|
||||
body: u.body,
|
||||
emoji: u.emoji || undefined,
|
||||
volume: u.volume,
|
||||
info: u.info,
|
||||
};
|
||||
});
|
||||
await onUpdate({ pack: pack.meta.content, clips });
|
||||
setDrafts(new Map());
|
||||
setDeleted(new Set());
|
||||
setUploads([]);
|
||||
}, [existing, deleted, drafts, uploads, onUpdate, pack]),
|
||||
);
|
||||
const saving = saveState.status === AsyncStatus.Loading;
|
||||
|
||||
const renderRow = (key: string, base: ClipDraft, isUpload: boolean, markedDeleted: boolean) => {
|
||||
const d = isUpload ? base : draftFor(key, base);
|
||||
const rowVolume = isUpload ? base.volume : d.volume;
|
||||
const rowBody = isUpload ? base.body : d.body;
|
||||
const rowEmoji = isUpload ? base.emoji : d.emoji;
|
||||
const commit = (patch: Partial<ClipDraft>) => {
|
||||
if (isUpload) {
|
||||
setUploads((prev) => prev.map((u) => (u.shortcode === key ? { ...u, ...patch } : u)));
|
||||
} else {
|
||||
setDraft(key, patch, base);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Box
|
||||
key={key}
|
||||
alignItems="Center"
|
||||
gap="200"
|
||||
style={{
|
||||
padding: config.space.S200,
|
||||
borderRadius: config.radii.R400,
|
||||
background: color.SurfaceVariant.Container,
|
||||
opacity: markedDeleted ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
size="300"
|
||||
radii="300"
|
||||
variant="Secondary"
|
||||
disabled={busyPreview === key}
|
||||
onClick={() => preview(key, base.url, rowVolume)}
|
||||
aria-label={`Preview ${rowBody}`}
|
||||
>
|
||||
{busyPreview === key ? <Spinner size="100" /> : <Icon size="100" src={Icons.Play} />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="300"
|
||||
radii="300"
|
||||
variant="Secondary"
|
||||
disabled={!canEdit || markedDeleted}
|
||||
onClick={(evt: React.MouseEvent<HTMLButtonElement>) => {
|
||||
emojiAnchorRef.current = evt.currentTarget;
|
||||
setEmojiFor(key);
|
||||
}}
|
||||
aria-label="Pick emoji"
|
||||
>
|
||||
<Text size="T400">{rowEmoji || '🔊'}</Text>
|
||||
</IconButton>
|
||||
<Box grow="Yes">
|
||||
<Input
|
||||
variant="Surface"
|
||||
size="300"
|
||||
defaultValue={rowBody}
|
||||
readOnly={!canEdit || markedDeleted}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => commit({ body: e.target.value })}
|
||||
aria-label="Clip name"
|
||||
/>
|
||||
</Box>
|
||||
<Box alignItems="Center" gap="100" shrink="No" style={{ width: toRem(120) }}>
|
||||
<Icon size="50" src={Icons.VolumeHigh} />
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
defaultValue={rowVolume}
|
||||
disabled={!canEdit || markedDeleted}
|
||||
onChange={(e) => commit({ volume: parseInt(e.target.value, 10) })}
|
||||
style={{ flexGrow: 1 }}
|
||||
aria-label="Clip volume"
|
||||
/>
|
||||
</Box>
|
||||
{canEdit && !isUpload && (
|
||||
<IconButton
|
||||
size="300"
|
||||
radii="300"
|
||||
variant={markedDeleted ? 'Success' : 'Critical'}
|
||||
onClick={() =>
|
||||
setDeleted((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(key)) next.delete(key);
|
||||
else next.add(key);
|
||||
return next;
|
||||
})
|
||||
}
|
||||
aria-label={markedDeleted ? 'Undo delete' : 'Delete clip'}
|
||||
>
|
||||
<Icon size="100" src={markedDeleted ? Icons.Plus : Icons.Delete} />
|
||||
</IconButton>
|
||||
)}
|
||||
{canEdit && isUpload && (
|
||||
<IconButton
|
||||
size="300"
|
||||
radii="300"
|
||||
variant="Critical"
|
||||
onClick={() => setUploads((prev) => prev.filter((u) => u.shortcode !== key))}
|
||||
aria-label="Remove upload"
|
||||
>
|
||||
<Icon size="100" src={Icons.Cross} />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="300">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
aria-label="Upload soundboard clip"
|
||||
type="file"
|
||||
accept={SOUNDBOARD_ACCEPT}
|
||||
multiple
|
||||
hidden
|
||||
onChange={(e) => {
|
||||
handleFiles(e.target.files);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
|
||||
<Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
|
||||
<Text size="H4">{pack.meta.name ?? 'Soundboard'}</Text>
|
||||
{canEdit && (
|
||||
<Chip
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
disabled={uploading || clipCount >= SOUNDBOARD_MAX_CLIPS}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
before={uploading ? <Spinner size="100" /> : <Icon size="100" src={Icons.Plus} />}
|
||||
>
|
||||
<Text size="B300">Upload</Text>
|
||||
</Chip>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box direction="Column" gap="100">
|
||||
{existing.map((c) =>
|
||||
renderRow(
|
||||
c.shortcode,
|
||||
{ url: c.url, body: c.body ?? c.shortcode, emoji: c.emoji ?? '', volume: c.volume },
|
||||
false,
|
||||
deleted.has(c.shortcode),
|
||||
),
|
||||
)}
|
||||
{uploads.map((u) => renderRow(u.shortcode, u, true, false))}
|
||||
{existing.length === 0 && uploads.length === 0 && (
|
||||
<Text size="T200" priority="300">
|
||||
No clips yet. Upload a short audio clip (max 1 MB){canEdit ? '' : ' — ask an admin'}.
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{canEdit && dirty && (
|
||||
<Box gap="200">
|
||||
<Button
|
||||
size="300"
|
||||
variant="Success"
|
||||
radii="300"
|
||||
disabled={saving}
|
||||
onClick={() => save()}
|
||||
before={saving ? <Spinner size="100" fill="Solid" /> : undefined}
|
||||
>
|
||||
<Text size="B300">Save changes</Text>
|
||||
</Button>
|
||||
<Button
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
disabled={saving}
|
||||
onClick={() => {
|
||||
setDrafts(new Map());
|
||||
setDeleted(new Set());
|
||||
setUploads([]);
|
||||
setError(undefined);
|
||||
}}
|
||||
>
|
||||
<Text size="B300">Reset</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<PopOut
|
||||
anchor={emojiFor ? emojiAnchorRef.current?.getBoundingClientRect() : undefined}
|
||||
position="Bottom"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setEmojiFor(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<EmojiBoard
|
||||
imagePackRooms={[]}
|
||||
returnFocusOnDeactivate={false}
|
||||
onEmojiSelect={(unicode: string) => {
|
||||
const key = emojiFor;
|
||||
setEmojiFor(undefined);
|
||||
if (!key) return;
|
||||
const up = uploads.find((u) => u.shortcode === key);
|
||||
if (up) {
|
||||
setUploads((prev) =>
|
||||
prev.map((u) => (u.shortcode === key ? { ...u, emoji: unicode } : u)),
|
||||
);
|
||||
} else {
|
||||
const c = existing.find((x) => x.shortcode === key);
|
||||
if (c)
|
||||
setDraft(
|
||||
key,
|
||||
{ emoji: unicode },
|
||||
{
|
||||
url: c.url,
|
||||
body: c.body ?? c.shortcode,
|
||||
emoji: c.emoji ?? '',
|
||||
volume: c.volume,
|
||||
},
|
||||
);
|
||||
}
|
||||
}}
|
||||
requestClose={() => setEmojiFor(undefined)}
|
||||
/>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<span />
|
||||
</PopOut>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { SoundboardPackEditor } from './SoundboardPackEditor';
|
||||
import { SoundboardContent, SoundboardPack } from '../../plugins/soundboard';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { AccountDataEvent } from '../../../types/matrix/accountData';
|
||||
import { useUserSoundboardPack } from '../../hooks/useSoundboardPacks';
|
||||
|
||||
export function UserSoundboardPack() {
|
||||
const mx = useMatrixClient();
|
||||
const defaultPack = useMemo(
|
||||
() =>
|
||||
new SoundboardPack(
|
||||
mx.getUserId() ?? '',
|
||||
{ pack: { display_name: 'My Soundboard' } },
|
||||
undefined,
|
||||
),
|
||||
[mx],
|
||||
);
|
||||
const pack = useUserSoundboardPack() ?? defaultPack;
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
async (content: SoundboardContent) => {
|
||||
await mx.setAccountData(
|
||||
AccountDataEvent.LotusSoundboard as unknown as keyof import('matrix-js-sdk').AccountDataEvents,
|
||||
content as never,
|
||||
);
|
||||
},
|
||||
[mx],
|
||||
);
|
||||
|
||||
return <SoundboardPackEditor pack={pack} canEdit onUpdate={handleUpdate} />;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './SoundboardPackEditor';
|
||||
export * from './RoomSoundboardPack';
|
||||
export * from './UserSoundboardPack';
|
||||
@@ -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}
|
||||
|
||||
@@ -351,10 +351,6 @@ export function CallControls({ callEmbed }: CallControlsProps) {
|
||||
<Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
|
||||
<MicrophoneButton enabled={microphone} onToggle={handleMicrophoneToggle} />
|
||||
<SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
|
||||
<ScreenshareAudioButton
|
||||
muted={screenshareAudioMuted}
|
||||
onToggle={() => callEmbed.control.toggleScreenshareAudio()}
|
||||
/>
|
||||
</Box>
|
||||
{!compact && showVideoGroup && <ControlDivider />}
|
||||
{showVideoGroup && (
|
||||
@@ -363,12 +359,20 @@ export function CallControls({ callEmbed }: CallControlsProps) {
|
||||
user can stop it; once stopped it hides and can't be restarted. */}
|
||||
{showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
|
||||
{showScreenshare && (
|
||||
<ScreenShareButton
|
||||
enabled={screenshare}
|
||||
onToggle={() =>
|
||||
screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
|
||||
}
|
||||
/>
|
||||
<>
|
||||
<ScreenShareButton
|
||||
enabled={screenshare}
|
||||
onToggle={() =>
|
||||
screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
|
||||
}
|
||||
/>
|
||||
{/* Mute-screenshare-audio sits directly next to the screenshare
|
||||
control since they're the same concern. */}
|
||||
<ScreenshareAudioButton
|
||||
muted={screenshareAudioMuted}
|
||||
onToggle={() => callEmbed.control.toggleScreenshareAudio()}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{!!document.fullscreenEnabled && (
|
||||
<FullscreenButton isFullscreen={isFullscreen} onToggle={handleFullscreen} />
|
||||
|
||||
@@ -1,220 +1,254 @@
|
||||
import React, { MouseEventHandler, useCallback, useRef, useState } from 'react';
|
||||
import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Chip,
|
||||
Icon,
|
||||
IconButton,
|
||||
Icons,
|
||||
Menu,
|
||||
PopOut,
|
||||
RectCords,
|
||||
Scroll,
|
||||
Spinner,
|
||||
Switch,
|
||||
Text,
|
||||
Tooltip,
|
||||
TooltipProvider,
|
||||
color,
|
||||
config,
|
||||
toRem,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { CallEmbed } from '../../plugins/call';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useSoundboard } from '../../hooks/useSoundboard';
|
||||
import { useSetting } from '../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../state/settings';
|
||||
import { roomToParentsAtom } from '../../state/room/roomToParents';
|
||||
import { useImagePackRooms } from '../../hooks/useImagePackRooms';
|
||||
import { useRelevantSoundboardPacks } from '../../hooks/useSoundboardPacks';
|
||||
import { SoundboardClipReader } from '../../plugins/soundboard';
|
||||
import { UserSoundboardPack, RoomSoundboardPack } from '../../components/soundboard-pack-view';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import {
|
||||
SOUNDBOARD_ACCEPT,
|
||||
SOUNDBOARD_MAX_CLIPS,
|
||||
playClipLocally,
|
||||
resolveClipObjectUrl,
|
||||
} from '../../utils/soundboardClips';
|
||||
import { playClipLocally, resolveClipObjectUrl } from '../../utils/soundboardClips';
|
||||
|
||||
type CallSoundboardProps = {
|
||||
callEmbed: CallEmbed;
|
||||
};
|
||||
|
||||
type FlatClip = {
|
||||
key: string; // packId|shortcode
|
||||
packId: string;
|
||||
packName: string;
|
||||
clip: SoundboardClipReader;
|
||||
};
|
||||
|
||||
/**
|
||||
* [P5-15] In-call soundboard: trigger user-uploaded clips into the call. Each
|
||||
* clip is published to peers as a separate track by the EC fork
|
||||
* (`io.lotus.inject_audio`) and also played locally for the presser's feedback.
|
||||
* Clips are uploadable/managed here and synced across devices via the
|
||||
* `io.lotus.soundboard` account data (like custom emoji/sticker packs).
|
||||
* [P5-15 v2] In-call soundboard. Clips come from the aggregated soundboard packs
|
||||
* relevant to the call room (the room + parent spaces ∪ the user's personal
|
||||
* pack), just like custom emoji. Playing a clip publishes it into the call via
|
||||
* the EC fork (`io.lotus.inject_audio`, max one at a time) and plays it locally.
|
||||
* A management toggle reveals the pack editors (personal + this room, if
|
||||
* permitted). Space-wide packs are managed from Space settings.
|
||||
*/
|
||||
export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
|
||||
const mx = useMatrixClient();
|
||||
const { clips, addClip, removeClip } = useSoundboard();
|
||||
const { room } = callEmbed;
|
||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||
const packRooms = useImagePackRooms(room.roomId, roomToParents);
|
||||
const packs = useRelevantSoundboardPacks(packRooms);
|
||||
const [soundboardVolume] = useSetting(settingsAtom, 'soundboardVolume');
|
||||
const master = Math.max(0, Math.min(1, soundboardVolume / 100));
|
||||
|
||||
const [cords, setCords] = useState<RectCords>();
|
||||
const [busyId, setBusyId] = useState<string>();
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [manage, setManage] = useState(false);
|
||||
const [playingKey, setPlayingKey] = useState<string>(); // host-side spam guard
|
||||
const [error, setError] = useState<string>();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const volume = Math.max(0, Math.min(1, soundboardVolume / 100));
|
||||
const groups = useMemo(
|
||||
() =>
|
||||
packs
|
||||
.map((pack) => ({
|
||||
id: pack.id,
|
||||
name: pack.meta.name ?? 'Soundboard',
|
||||
clips: pack.getClips(),
|
||||
}))
|
||||
.filter((g) => g.clips.length > 0),
|
||||
[packs],
|
||||
);
|
||||
|
||||
const handleOpen: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setError(undefined);
|
||||
setCords(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const handlePlay = useCallback(
|
||||
async (id: string, mxc: string) => {
|
||||
setBusyId(id);
|
||||
const play = useCallback(
|
||||
async (flat: FlatClip) => {
|
||||
if (playingKey) return; // one at a time (fork also enforces this)
|
||||
setPlayingKey(flat.key);
|
||||
setError(undefined);
|
||||
const done = () => setPlayingKey((k) => (k === flat.key ? undefined : k));
|
||||
try {
|
||||
const objectUrl = await resolveClipObjectUrl(mx, mxc);
|
||||
callEmbed.control.injectAudio(objectUrl, volume);
|
||||
playClipLocally(objectUrl, volume);
|
||||
const url = await resolveClipObjectUrl(mx, flat.clip.url);
|
||||
const vol = (flat.clip.volume / 100) * master;
|
||||
callEmbed.control.injectAudio(url, vol);
|
||||
const audio = playClipLocally(url, vol);
|
||||
if (audio) {
|
||||
audio.addEventListener('ended', done, { once: true });
|
||||
audio.addEventListener('error', done, { once: true });
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
// Safety: clear the guard even if the audio never signals end.
|
||||
window.setTimeout(done, 30_000);
|
||||
} catch {
|
||||
setError('Could not play that clip.');
|
||||
} finally {
|
||||
setBusyId(undefined);
|
||||
done();
|
||||
}
|
||||
},
|
||||
[mx, callEmbed, volume],
|
||||
);
|
||||
|
||||
const handleFile = useCallback(
|
||||
async (file: File | undefined) => {
|
||||
if (!file) return;
|
||||
setUploading(true);
|
||||
setError(undefined);
|
||||
try {
|
||||
await addClip(file);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Upload failed.');
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
},
|
||||
[addClip],
|
||||
[mx, callEmbed, master, playingKey],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={SOUNDBOARD_ACCEPT}
|
||||
hidden
|
||||
onChange={(e) => {
|
||||
handleFile(e.target.files?.[0]);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
<PopOut
|
||||
anchor={cords}
|
||||
position="Top"
|
||||
align="Center"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setCords(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu style={{ maxWidth: '320px' }}>
|
||||
<Box direction="Column" gap="200" style={{ padding: config.space.S200 }}>
|
||||
<Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
|
||||
<Text size="L400">Soundboard</Text>
|
||||
<Chip
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
disabled={uploading || clips.length >= SOUNDBOARD_MAX_CLIPS}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
before={
|
||||
uploading ? <Spinner size="100" /> : <Icon size="100" src={Icons.Plus} />
|
||||
}
|
||||
>
|
||||
<Text size="B300">Upload</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
|
||||
{clips.length === 0 ? (
|
||||
<PopOut
|
||||
anchor={cords}
|
||||
position="Top"
|
||||
align="Center"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setCords(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu style={{ maxWidth: manage ? toRem(420) : toRem(340), maxHeight: '70vh' }}>
|
||||
<Box direction="Column" style={{ maxHeight: '70vh' }}>
|
||||
<Box
|
||||
shrink="No"
|
||||
alignItems="Center"
|
||||
justifyContent="SpaceBetween"
|
||||
gap="200"
|
||||
style={{
|
||||
padding: config.space.S200,
|
||||
borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
}}
|
||||
>
|
||||
<Text size="L400">Soundboard</Text>
|
||||
<Box as="label" alignItems="Center" gap="200" style={{ cursor: 'pointer' }}>
|
||||
<Text size="T200" priority="300">
|
||||
No clips yet. Upload a short audio clip (max 1 MB) to play it into the call.
|
||||
Clips sync across your devices.
|
||||
Manage
|
||||
</Text>
|
||||
) : (
|
||||
<Box wrap="Wrap" gap="200">
|
||||
{clips.map((clip) => (
|
||||
<Box
|
||||
key={clip.id}
|
||||
direction="Column"
|
||||
gap="100"
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<Chip
|
||||
variant="SurfaceVariant"
|
||||
radii="300"
|
||||
disabled={busyId === clip.id}
|
||||
onClick={() => handlePlay(clip.id, clip.url)}
|
||||
before={
|
||||
busyId === clip.id ? (
|
||||
<Spinner size="100" />
|
||||
) : (
|
||||
<Icon size="100" src={Icons.Play} />
|
||||
)
|
||||
}
|
||||
after={
|
||||
<Icon
|
||||
size="50"
|
||||
src={Icons.Cross}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={(e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
removeClip(clip.id);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Text size="B300" truncate style={{ maxWidth: '120px' }}>
|
||||
{clip.name}
|
||||
</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
<Switch variant="Primary" value={manage} onChange={setManage} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
|
||||
<Scroll size="300" hideTrack visibility="Hover">
|
||||
<Box direction="Column" gap="300" style={{ padding: config.space.S200 }}>
|
||||
{manage ? (
|
||||
<>
|
||||
<RoomSoundboardPack room={room} stateKey="" />
|
||||
<UserSoundboardPack />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{groups.length === 0 && (
|
||||
<Text size="T200" priority="300">
|
||||
No soundboard clips here yet. Turn on <b>Manage</b> to upload some, or add
|
||||
a pack in Space settings.
|
||||
</Text>
|
||||
)}
|
||||
{groups.map((g) => (
|
||||
<Box key={g.id} direction="Column" gap="100">
|
||||
<Text size="L400">{g.name}</Text>
|
||||
<Box wrap="Wrap" gap="200">
|
||||
{g.clips.map((clip) => {
|
||||
const key = `${g.id}|${clip.shortcode}`;
|
||||
const flat: FlatClip = {
|
||||
key,
|
||||
packId: g.id,
|
||||
packName: g.name,
|
||||
clip,
|
||||
};
|
||||
return (
|
||||
<Box
|
||||
key={key}
|
||||
as="button"
|
||||
direction="Column"
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
gap="100"
|
||||
disabled={!!playingKey}
|
||||
onClick={() => play(flat)}
|
||||
aria-label={`Play ${clip.name}`}
|
||||
style={{
|
||||
width: toRem(76),
|
||||
height: toRem(76),
|
||||
padding: config.space.S100,
|
||||
borderRadius: config.radii.R400,
|
||||
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
background:
|
||||
playingKey === key
|
||||
? color.Primary.Container
|
||||
: color.SurfaceVariant.Container,
|
||||
cursor: playingKey ? 'default' : 'pointer',
|
||||
opacity: playingKey && playingKey !== key ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<Text size="H4">
|
||||
{playingKey === key ? (
|
||||
<Spinner size="200" />
|
||||
) : (
|
||||
clip.emoji || '🔊'
|
||||
)}
|
||||
</Text>
|
||||
<Text size="T200" truncate style={{ maxWidth: '100%' }}>
|
||||
{clip.name}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Scroll>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<TooltipProvider
|
||||
tooltip={
|
||||
<Tooltip>
|
||||
<Text>Soundboard</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
<TooltipProvider
|
||||
tooltip={
|
||||
<Tooltip>
|
||||
<Text>Soundboard</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<IconButton
|
||||
ref={triggerRef}
|
||||
variant="Surface"
|
||||
fill="Soft"
|
||||
radii="400"
|
||||
size="400"
|
||||
onClick={handleOpen}
|
||||
outlined
|
||||
aria-label="Soundboard"
|
||||
aria-expanded={!!cords}
|
||||
aria-haspopup="menu"
|
||||
>
|
||||
<Icon size="400" src={Icons.BellRing} />
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
</PopOut>
|
||||
</>
|
||||
{(triggerRef) => (
|
||||
<IconButton
|
||||
ref={triggerRef}
|
||||
variant="Surface"
|
||||
fill="Soft"
|
||||
radii="400"
|
||||
size="400"
|
||||
onClick={handleOpen}
|
||||
outlined
|
||||
aria-label="Soundboard"
|
||||
aria-expanded={!!cords}
|
||||
aria-haspopup="menu"
|
||||
>
|
||||
<Icon size="400" src={Icons.BellRing} />
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
</PopOut>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
|
||||
import { Page, PageContent, PageHeader } from '../../../components/page';
|
||||
import { useRoom } from '../../../hooks/useRoom';
|
||||
import { RoomSoundboardPack, UserSoundboardPack } from '../../../components/soundboard-pack-view';
|
||||
|
||||
type SoundboardProps = {
|
||||
requestClose: () => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* Soundboard management page (Room/Space settings). Mirrors the Emojis &
|
||||
* Stickers page: a shared room/space pack (admin-editable, inherited by child
|
||||
* rooms like emoji packs) plus the user's personal pack. A single default room
|
||||
* pack (state key "") is used per room/space.
|
||||
*/
|
||||
export function Soundboard({ requestClose }: SoundboardProps) {
|
||||
const room = useRoom();
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PageHeader outlined={false}>
|
||||
<Box grow="Yes" gap="200">
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<Text as="h2" size="H3" truncate>
|
||||
Soundboard
|
||||
</Text>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageHeader>
|
||||
<Box grow="Yes">
|
||||
<Scroll hideTrack visibility="Hover">
|
||||
<PageContent>
|
||||
<Box direction="Column" gap="700">
|
||||
<Box direction="Column" gap="200">
|
||||
<Text size="L400">This room / space (shared)</Text>
|
||||
<Text size="T200" priority="300">
|
||||
Clips here are shared with everyone, and inherited by every room under this space
|
||||
— just like emoji/sticker packs. Only members with permission can edit.
|
||||
</Text>
|
||||
{room && <RoomSoundboardPack room={room} stateKey="" />}
|
||||
</Box>
|
||||
<Box direction="Column" gap="200">
|
||||
<Text size="L400">Personal</Text>
|
||||
<Text size="T200" priority="300">
|
||||
Your own clips, available in every call and synced across your devices.
|
||||
</Text>
|
||||
<UserSoundboardPack />
|
||||
</Box>
|
||||
</Box>
|
||||
</PageContent>
|
||||
</Scroll>
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './Soundboard';
|
||||
@@ -11,6 +11,8 @@ import {
|
||||
Line,
|
||||
toRem,
|
||||
Button,
|
||||
Switch,
|
||||
Chip,
|
||||
} from 'folds';
|
||||
import { useAtom, useAtomValue } from 'jotai';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
@@ -41,7 +43,9 @@ import {
|
||||
ResultGroup,
|
||||
useMessageSearch,
|
||||
} from './useMessageSearch';
|
||||
import { useLocalMessageSearch } from './useLocalMessageSearch';
|
||||
import { LocalSearchResult, useLocalMessageSearch } from './useLocalMessageSearch';
|
||||
import { searchCacheEnabledAtom } from '../../state/searchCacheEnabled';
|
||||
import { clearAll as clearSearchCache } from '../../utils/searchCache';
|
||||
import { addRecentSearch, recentSearchesAtom } from '../../state/recentSearches';
|
||||
import { SearchResultGroup } from './SearchResultGroup';
|
||||
import { SearchInput } from './SearchInput';
|
||||
@@ -240,6 +244,10 @@ export function MessageSearch({
|
||||
// Bump this whenever more messages are loaded so localResult re-computes
|
||||
const [cacheVersion, setCacheVersion] = useState(0);
|
||||
const handleCacheLoaded = useCallback(() => setCacheVersion((v) => v + 1), []);
|
||||
// Explicit wipe of the persistent on-disk index, then re-run the merge.
|
||||
const handleClearSearchCache = useCallback(() => {
|
||||
clearSearchCache().then(() => setCacheVersion((v) => v + 1));
|
||||
}, []);
|
||||
|
||||
// The rooms actually in scope for this search (mirrors server-side logic)
|
||||
const localSearchRooms = useMemo(
|
||||
@@ -253,24 +261,43 @@ export function MessageSearch({
|
||||
const hasActiveSearch = msgSearchParams.term !== undefined || !!msgSearchParams.senders?.length;
|
||||
const senderOnlyMode = !msgSearchParams.term && !!msgSearchParams.senders?.length;
|
||||
|
||||
// Run synchronous client-side search immediately.
|
||||
// Run the client-side search whenever inputs change.
|
||||
// In text-search mode: covers encrypted rooms only (server handles plaintext).
|
||||
// In sender-only mode: covers all rooms (server has no sender-only search).
|
||||
// cacheVersion in deps so it re-runs after "Load more" paginates new events.
|
||||
const localResult = useMemo(() => {
|
||||
if (!hasActiveSearch) return null;
|
||||
return searchLocalMessages({
|
||||
// The scan is async because — when the persistent cache is enabled — it also
|
||||
// reads cached rows from IndexedDB and merges them with the in-memory hits.
|
||||
// cacheVersion in deps so it re-runs after "Load more" paginates new events;
|
||||
// searchCacheEnabled so toggling the cache re-runs the merge.
|
||||
const [searchCacheEnabled, setSearchCacheEnabled] = useAtom(searchCacheEnabledAtom);
|
||||
const [localResult, setLocalResult] = useState<LocalSearchResult | null>(null);
|
||||
useEffect(() => {
|
||||
if (!hasActiveSearch) {
|
||||
setLocalResult(null);
|
||||
return undefined;
|
||||
}
|
||||
let cancelled = false;
|
||||
searchLocalMessages({
|
||||
term: msgSearchParams.term ?? '',
|
||||
roomIds: localSearchRooms,
|
||||
senders: msgSearchParams.senders,
|
||||
fromTs: msgSearchParams.fromTs,
|
||||
toTs: msgSearchParams.toTs,
|
||||
}).then((result) => {
|
||||
if (!cancelled) setLocalResult(result);
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [
|
||||
searchLocalMessages,
|
||||
localSearchRooms,
|
||||
msgSearchParams.term,
|
||||
msgSearchParams.senders,
|
||||
msgSearchParams.fromTs,
|
||||
msgSearchParams.toTs,
|
||||
hasActiveSearch,
|
||||
cacheVersion,
|
||||
searchCacheEnabled,
|
||||
]);
|
||||
|
||||
const { status, data, error, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
|
||||
@@ -668,6 +695,37 @@ export function MessageSearch({
|
||||
? `Showing locally cached messages from ${localResult.searchedRoomsCount} encrypted room${localResult.searchedRoomsCount !== 1 ? 's' : ''}. Load more history below to extend coverage.`
|
||||
: `No matches in your local cache. Load messages below to search further back.`}
|
||||
</Text>
|
||||
<Box
|
||||
alignItems="Center"
|
||||
gap="200"
|
||||
style={{
|
||||
padding: config.space.S200,
|
||||
background: color.SurfaceVariant.Container,
|
||||
borderRadius: config.radii.R300,
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
variant="Primary"
|
||||
value={searchCacheEnabled}
|
||||
onChange={setSearchCacheEnabled}
|
||||
/>
|
||||
<Box grow="Yes" direction="Column" style={{ minWidth: 0 }}>
|
||||
<Text size="T300">Persist search index on this device</Text>
|
||||
<Text size="T200" priority="300">
|
||||
Stores decrypted text on this device
|
||||
</Text>
|
||||
</Box>
|
||||
{searchCacheEnabled && (
|
||||
<Chip
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
onClick={handleClearSearchCache}
|
||||
before={<Icon size="100" src={Icons.Delete} />}
|
||||
>
|
||||
<Text size="T200">Clear cached index</Text>
|
||||
</Chip>
|
||||
)}
|
||||
</Box>
|
||||
<Line size="300" variant="Surface" />
|
||||
</Box>
|
||||
{localGroups.length > 0 && (
|
||||
|
||||
@@ -1,12 +1,23 @@
|
||||
import { EventType } from 'matrix-js-sdk';
|
||||
import { EventType, MatrixEvent } from 'matrix-js-sdk';
|
||||
import { useCallback } from 'react';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { ResultGroup, ResultItem } from './useMessageSearch';
|
||||
import { searchCacheEnabledAtom } from '../../state/searchCacheEnabled';
|
||||
import {
|
||||
mergeSearchResults,
|
||||
queryRoom,
|
||||
saveRoomIndex,
|
||||
SearchCacheRow,
|
||||
} from '../../utils/searchCache';
|
||||
|
||||
export type LocalSearchParams = {
|
||||
term: string;
|
||||
roomIds: string[];
|
||||
senders?: string[];
|
||||
/** Optional date-range filter (ms). Applied to both memory and cached rows. */
|
||||
fromTs?: number;
|
||||
toTs?: number;
|
||||
};
|
||||
|
||||
export type LocalSearchResult = {
|
||||
@@ -17,19 +28,110 @@ export type LocalSearchResult = {
|
||||
searchedRoomsCount: number;
|
||||
};
|
||||
|
||||
/** Extracted, searchable plaintext for a single message event. */
|
||||
type ExtractedText = {
|
||||
body: string;
|
||||
formattedBody: string;
|
||||
pollText: string;
|
||||
};
|
||||
|
||||
const POLL_START_TYPES = ['m.poll.start', 'org.matrix.msc3381.poll.start'];
|
||||
|
||||
/**
|
||||
* Pull the text we index/search from a decrypted event's content. Returns
|
||||
* `null` for events that carry no searchable text (e.g. stickers).
|
||||
*/
|
||||
const extractText = (event: MatrixEvent): ExtractedText | null => {
|
||||
const evType = event.getType();
|
||||
const content = event.getContent();
|
||||
|
||||
if (POLL_START_TYPES.includes(evType)) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const poll = (content['m.poll'] ?? content['org.matrix.msc3381.poll.start']) as any;
|
||||
if (!poll) return null;
|
||||
const qBody =
|
||||
(poll.question?.['m.text'] as Array<{ body: string }> | undefined)?.[0]?.body ??
|
||||
(poll.question?.body as string | undefined) ??
|
||||
'';
|
||||
const answerBodies = ((poll.answers ?? []) as Array<Record<string, unknown>>)
|
||||
.map(
|
||||
(a) =>
|
||||
((a['m.text'] as Array<{ body: string }> | undefined)?.[0]?.body ??
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(a['org.matrix.msc3381.poll.answer'] as any)?.body ??
|
||||
'') as string,
|
||||
)
|
||||
.join(' ');
|
||||
const pollText = `${qBody} ${answerBodies}`.trim();
|
||||
return pollText ? { body: '', formattedBody: '', pollText } : null;
|
||||
}
|
||||
|
||||
if (evType !== EventType.RoomMessage) return null;
|
||||
|
||||
const body = (content.body as string | undefined) ?? '';
|
||||
const formattedBody = (content.formatted_body as string | undefined) ?? '';
|
||||
if (!body && !formattedBody) return null;
|
||||
return { body, formattedBody, pollText: '' };
|
||||
};
|
||||
|
||||
/** Does the extracted text contain the (already-lowercased) term? */
|
||||
const matchesTerm = (text: ExtractedText, termLower: string): boolean =>
|
||||
text.body.toLowerCase().includes(termLower) ||
|
||||
text.formattedBody.toLowerCase().includes(termLower) ||
|
||||
text.pollText.toLowerCase().includes(termLower);
|
||||
|
||||
const rowMatchesTerm = (row: SearchCacheRow, termLower: string): boolean =>
|
||||
row.body.toLowerCase().includes(termLower) ||
|
||||
(row.formattedBody ?? '').toLowerCase().includes(termLower) ||
|
||||
(row.pollText ?? '').toLowerCase().includes(termLower);
|
||||
|
||||
/** Build the synthetic result item a cached row renders as (text message). */
|
||||
const rowToResultItem = (row: SearchCacheRow): ResultItem => {
|
||||
const bodyText = row.body || row.pollText || '';
|
||||
const content: Record<string, unknown> = { msgtype: 'm.text', body: bodyText };
|
||||
if (row.formattedBody) {
|
||||
content.format = 'org.matrix.custom.html';
|
||||
content.formatted_body = row.formattedBody;
|
||||
}
|
||||
const syntheticEvent = {
|
||||
room_id: row.roomId,
|
||||
event_id: row.eventId,
|
||||
type: EventType.RoomMessage,
|
||||
sender: row.sender,
|
||||
origin_server_ts: row.ts,
|
||||
content,
|
||||
unsigned: {},
|
||||
};
|
||||
return {
|
||||
rank: 0,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
event: syntheticEvent as any,
|
||||
context: { events_before: [], events_after: [], profile_info: {} },
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Client-side full-text search over locally cached events in encrypted rooms.
|
||||
* The homeserver cannot search E2EE message content, so we scan whatever the
|
||||
* client has already received and decrypted in memory.
|
||||
*
|
||||
* Limitation: only messages present in the live timeline window are covered.
|
||||
* Rooms that haven't been opened yet will return no results.
|
||||
* When the persistent search cache is enabled (opt-in), the in-memory scan is
|
||||
* also persisted to IndexedDB (fire-and-forget) and merged with prior cached
|
||||
* coverage so results survive reloads. When disabled, zero cache reads/writes
|
||||
* occur.
|
||||
*/
|
||||
export const useLocalMessageSearch = () => {
|
||||
const mx = useMatrixClient();
|
||||
const cacheEnabled = useAtomValue(searchCacheEnabledAtom);
|
||||
|
||||
const search = useCallback(
|
||||
({ term, roomIds, senders }: LocalSearchParams): LocalSearchResult => {
|
||||
async ({
|
||||
term,
|
||||
roomIds,
|
||||
senders,
|
||||
fromTs,
|
||||
toTs,
|
||||
}: LocalSearchParams): Promise<LocalSearchResult> => {
|
||||
const trimmedTerm = term.trim();
|
||||
const senderSet = senders && senders.length > 0 ? new Set(senders) : null;
|
||||
|
||||
@@ -41,6 +143,9 @@ export const useLocalMessageSearch = () => {
|
||||
}
|
||||
|
||||
const termLower = trimmedTerm.toLowerCase();
|
||||
const inRange = (ts: number): boolean =>
|
||||
(fromTs === undefined || ts >= fromTs) && (toTs === undefined || ts <= toTs);
|
||||
|
||||
const groups: ResultGroup[] = [];
|
||||
let encryptedRoomsCount = 0;
|
||||
let searchedRoomsCount = 0;
|
||||
@@ -61,106 +166,99 @@ export const useLocalMessageSearch = () => {
|
||||
.getUnfilteredTimelineSet()
|
||||
.getTimelines()
|
||||
.flatMap((tl) => tl.getEvents());
|
||||
if (events.length === 0) continue;
|
||||
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
const cachedRows = cacheEnabled ? await queryRoom(roomId) : [];
|
||||
|
||||
if (events.length === 0 && cachedRows.length === 0) continue;
|
||||
|
||||
searchedRoomsCount += 1;
|
||||
|
||||
const items: ResultItem[] = [];
|
||||
const memoryItems: ResultItem[] = [];
|
||||
const rowsToPersist: SearchCacheRow[] = [];
|
||||
|
||||
for (let i = 0; i < events.length; i += 1) {
|
||||
const event = events[i];
|
||||
|
||||
// In sender-only mode: include all message types; skip non-message events
|
||||
if (event.getType() !== EventType.RoomMessage) {
|
||||
if (senderOnlyMode) continue;
|
||||
const evType = event.getType();
|
||||
const isSticker = evType === 'm.sticker';
|
||||
const isPoll = evType === 'm.poll.start' || evType === 'org.matrix.msc3381.poll.start';
|
||||
if (!isSticker && !isPoll) continue;
|
||||
}
|
||||
|
||||
if (event.isDecryptionFailure()) continue;
|
||||
if (event.isRedacted()) continue;
|
||||
if (senderSet && !senderSet.has(event.getSender() ?? '')) continue;
|
||||
|
||||
// getContent() returns decrypted plaintext regardless of encryption
|
||||
const content = event.getContent();
|
||||
const evType = event.getType();
|
||||
const isSticker = evType === 'm.sticker';
|
||||
const isMessageLike =
|
||||
evType === EventType.RoomMessage || POLL_START_TYPES.includes(evType);
|
||||
|
||||
// Sender-only mode: no text filter needed
|
||||
if (!senderOnlyMode) {
|
||||
const evType = event.getType();
|
||||
const isPoll = evType === 'm.poll.start' || evType === 'org.matrix.msc3381.poll.start';
|
||||
// Sender-only mode indexes/returns all message types; text mode needs text.
|
||||
if (!senderOnlyMode && !isMessageLike && !isSticker) continue;
|
||||
|
||||
let body = '';
|
||||
let formattedBody = '';
|
||||
if (!isPoll) {
|
||||
body = (content.body as string | undefined) ?? '';
|
||||
formattedBody = (content.formatted_body as string | undefined) ?? '';
|
||||
} else {
|
||||
// Poll — index question text and all answer options
|
||||
const poll = (content['m.poll'] ??
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
content['org.matrix.msc3381.poll.start']) as any;
|
||||
if (poll) {
|
||||
const qBody =
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(poll.question?.['m.text'] as Array<{ body: string }> | undefined)?.[0]?.body ??
|
||||
(poll.question?.body as string | undefined) ??
|
||||
'';
|
||||
const answerBodies = ((poll.answers ?? []) as Array<Record<string, unknown>>)
|
||||
.map(
|
||||
(a) =>
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
((a['m.text'] as Array<{ body: string }> | undefined)?.[0]?.body ??
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(a['org.matrix.msc3381.poll.answer'] as any)?.body ??
|
||||
'') as string,
|
||||
)
|
||||
.join(' ');
|
||||
body = `${qBody} ${answerBodies}`.trim();
|
||||
}
|
||||
}
|
||||
const sender = event.getSender() ?? '';
|
||||
const ts = event.getTs();
|
||||
const text = extractText(event);
|
||||
|
||||
if (
|
||||
!body.toLowerCase().includes(termLower) &&
|
||||
!formattedBody.toLowerCase().includes(termLower)
|
||||
)
|
||||
continue;
|
||||
// Persist every indexable (text-bearing) event we scanned, regardless
|
||||
// of whether it matches the current term — future searches benefit.
|
||||
if (cacheEnabled && text && event.getId()) {
|
||||
rowsToPersist.push({
|
||||
roomId,
|
||||
eventId: event.getId() as string,
|
||||
ts,
|
||||
sender,
|
||||
body: text.body,
|
||||
...(text.formattedBody ? { formattedBody: text.formattedBody } : {}),
|
||||
...(text.pollText ? { pollText: text.pollText } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
// Build a synthetic IEventWithRoomId using decrypted content so the
|
||||
// existing SearchResultGroup renderer works without modification.
|
||||
if (senderSet && !senderSet.has(sender)) continue;
|
||||
if (!inRange(ts)) continue;
|
||||
|
||||
if (!senderOnlyMode) {
|
||||
if (!text || !matchesTerm(text, termLower)) continue;
|
||||
}
|
||||
|
||||
const content = event.getContent();
|
||||
const syntheticEvent = {
|
||||
room_id: roomId,
|
||||
event_id: event.getId() ?? '',
|
||||
type: event.getType(),
|
||||
sender: event.getSender() ?? '',
|
||||
origin_server_ts: event.getTs(),
|
||||
type: evType,
|
||||
sender,
|
||||
origin_server_ts: ts,
|
||||
content,
|
||||
unsigned: event.getUnsigned(),
|
||||
};
|
||||
|
||||
items.push({
|
||||
memoryItems.push({
|
||||
rank: 0,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
event: syntheticEvent as any,
|
||||
context: {
|
||||
events_before: [],
|
||||
events_after: [],
|
||||
profile_info: {},
|
||||
},
|
||||
context: { events_before: [], events_after: [], profile_info: {} },
|
||||
});
|
||||
}
|
||||
|
||||
// Match cached rows (skip ids already present in memory happens in merge).
|
||||
const cachedItems: ResultItem[] = [];
|
||||
cachedRows.forEach((row) => {
|
||||
if (senderSet && !senderSet.has(row.sender)) return;
|
||||
if (!inRange(row.ts)) return;
|
||||
if (!senderOnlyMode && !rowMatchesTerm(row, termLower)) return;
|
||||
cachedItems.push(rowToResultItem(row));
|
||||
});
|
||||
|
||||
const items = mergeSearchResults(memoryItems, cachedItems);
|
||||
|
||||
if (items.length > 0) {
|
||||
items.sort((a, b) => (b.event.origin_server_ts ?? 0) - (a.event.origin_server_ts ?? 0));
|
||||
groups.push({ roomId, items });
|
||||
}
|
||||
|
||||
// Fire-and-forget persist of freshly scanned rows + coverage.
|
||||
// saveRoomIndex swallows all errors internally, so a floating promise
|
||||
// here can never reject.
|
||||
if (cacheEnabled && rowsToPersist.length > 0) {
|
||||
saveRoomIndex(roomId, rowsToPersist);
|
||||
}
|
||||
}
|
||||
|
||||
return { groups, encryptedRoomsCount, searchedRoomsCount };
|
||||
},
|
||||
[mx],
|
||||
[mx, cacheEnabled],
|
||||
);
|
||||
|
||||
return search;
|
||||
|
||||
@@ -13,6 +13,7 @@ import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
|
||||
import { General } from './general';
|
||||
import { Members } from '../common-settings/members';
|
||||
import { EmojisStickers } from '../common-settings/emojis-stickers';
|
||||
import { Soundboard } from '../common-settings/soundboard';
|
||||
import { Permissions } from './permissions';
|
||||
import { RoomSettingsPage } from '../../state/roomSettings';
|
||||
import { useRoom } from '../../hooks/useRoom';
|
||||
@@ -53,6 +54,11 @@ const BASE_MENU_ITEMS: RoomSettingsMenuItem[] = [
|
||||
name: 'Emojis & Stickers',
|
||||
icon: Icons.Smile,
|
||||
},
|
||||
{
|
||||
page: RoomSettingsPage.SoundboardPage,
|
||||
name: 'Soundboard',
|
||||
icon: Icons.Bell,
|
||||
},
|
||||
{
|
||||
page: RoomSettingsPage.DeveloperToolsPage,
|
||||
name: 'Developer Tools',
|
||||
@@ -226,6 +232,9 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
|
||||
{activePage === RoomSettingsPage.EmojisStickersPage && (
|
||||
<EmojisStickers requestClose={handlePageRequestClose} />
|
||||
)}
|
||||
{activePage === RoomSettingsPage.SoundboardPage && (
|
||||
<Soundboard requestClose={handlePageRequestClose} />
|
||||
)}
|
||||
{activePage === RoomSettingsPage.DeveloperToolsPage && (
|
||||
<DeveloperTools requestClose={handlePageRequestClose} />
|
||||
)}
|
||||
|
||||
@@ -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';
|
||||
@@ -22,6 +22,8 @@ import { callChatAtom } from '../../state/callEmbed';
|
||||
import { CallChatView } from './CallChatView';
|
||||
import { useCallEmbed } from '../../hooks/useCallEmbed';
|
||||
import { useCallMembers, useCallSession } from '../../hooks/useCall';
|
||||
import { roomIdToActiveThreadIdAtomFamily } from '../../state/room/thread';
|
||||
import { ThreadPanel } from './thread';
|
||||
|
||||
export function Room() {
|
||||
const { eventId } = useParams();
|
||||
@@ -33,6 +35,8 @@ export function Room() {
|
||||
const callEmbed = useCallEmbed();
|
||||
|
||||
const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
|
||||
const activeThreadId = useAtomValue(roomIdToActiveThreadIdAtomFamily(room.roomId));
|
||||
const setActiveThreadId = useSetAtom(roomIdToActiveThreadIdAtomFamily(room.roomId));
|
||||
const galleryOpen = useAtomValue(mediaGalleryAtom);
|
||||
const setGalleryOpen = useSetAtom(mediaGalleryAtom);
|
||||
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||
@@ -45,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">
|
||||
@@ -82,7 +117,7 @@ export function Room() {
|
||||
<CallChatView />
|
||||
</>
|
||||
)}
|
||||
{!callView && galleryOpen && (
|
||||
{showGallery && (
|
||||
<>
|
||||
{screenSize === ScreenSize.Desktop && (
|
||||
<Line variant="Background" direction="Vertical" size="300" />
|
||||
@@ -90,7 +125,20 @@ export function Room() {
|
||||
<MediaGallery key={room.roomId} room={room} onClose={() => setGalleryOpen(false)} />
|
||||
</>
|
||||
)}
|
||||
{!callView && isDrawer && (
|
||||
{showThreadPanel && activeThreadId && (
|
||||
<>
|
||||
{screenSize === ScreenSize.Desktop && (
|
||||
<Line variant="Background" direction="Vertical" size="300" />
|
||||
)}
|
||||
<ThreadPanel
|
||||
key={`${room.roomId}${activeThreadId}`}
|
||||
room={room}
|
||||
threadId={activeThreadId}
|
||||
requestClose={() => setActiveThreadId(null)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{showMembers && (
|
||||
<>
|
||||
{screenSize === ScreenSize.Desktop && (
|
||||
<Line variant="Background" direction="Vertical" size="300" />
|
||||
|
||||
@@ -136,6 +136,7 @@ import { ScheduleMessageModal } from './ScheduleMessageModal';
|
||||
import { ScheduledMessagesTray } from './ScheduledMessagesTray';
|
||||
import { DraftIndicator } from './DraftIndicator';
|
||||
import { scheduledMessagesAtom } from '../../state/scheduledMessages';
|
||||
import { getThreadDraftKey } from '../../state/room/thread';
|
||||
|
||||
const GifPicker = React.lazy(() =>
|
||||
import('../../components/GifPicker').then((m) => ({ default: m.GifPicker })),
|
||||
@@ -149,9 +150,10 @@ interface RoomInputProps {
|
||||
fileDropContainerRef: RefObject<HTMLElement>;
|
||||
roomId: string;
|
||||
room: Room;
|
||||
threadRootId?: string;
|
||||
}
|
||||
export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
({ editor, fileDropContainerRef, roomId, room }, ref) => {
|
||||
({ editor, fileDropContainerRef, roomId, room, threadRootId }, ref) => {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
|
||||
@@ -184,8 +186,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
const setScheduledMessages = useSetAtom(scheduledMessagesAtom);
|
||||
|
||||
const alive = useAlive();
|
||||
const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
|
||||
const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
|
||||
// Scope drafts/replies/uploads by thread so a thread composer stays fully
|
||||
// isolated from the main room composer (and from other threads).
|
||||
const draftKey = threadRootId ? getThreadDraftKey(roomId, threadRootId) : roomId;
|
||||
const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(draftKey));
|
||||
const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(draftKey));
|
||||
const replyUserID = replyDraft?.userId;
|
||||
|
||||
const powerLevelTags = usePowerLevelTags(room, powerLevels);
|
||||
@@ -206,7 +211,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
legacyUsernameColor || direct ? colorMXID(replyUserID ?? '') : replyPowerColor;
|
||||
|
||||
const [uploadBoard, setUploadBoard] = useState(true);
|
||||
const [selectedFiles, setSelectedFiles] = useAtom(roomIdToUploadItemsAtomFamily(roomId));
|
||||
const [selectedFiles, setSelectedFiles] = useAtom(roomIdToUploadItemsAtomFamily(draftKey));
|
||||
const uploadFamilyObserverAtom = createUploadFamilyObserverAtom(
|
||||
roomUploadAtomFamily,
|
||||
selectedFiles.map((f) => f.file),
|
||||
@@ -225,7 +230,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
const showLocation = composerToolbarButtons?.showLocation ?? true;
|
||||
const showPoll = composerToolbarButtons?.showPoll ?? true;
|
||||
const showVoice = composerToolbarButtons?.showVoice ?? true;
|
||||
const showSchedule = composerToolbarButtons?.showSchedule ?? true;
|
||||
// Schedule-send is hidden in thread mode (v1 reduction).
|
||||
const showSchedule = (composerToolbarButtons?.showSchedule ?? true) && !threadRootId;
|
||||
const composerButtonOrder = useMemo(
|
||||
() => normalizeComposerToolbarOrder(composerToolbarButtons?.order),
|
||||
[composerToolbarButtons?.order],
|
||||
@@ -244,7 +250,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
setLocating(false);
|
||||
const { latitude, longitude } = pos.coords;
|
||||
const geoUri = `geo:${latitude.toFixed(6)},${longitude.toFixed(6)}`;
|
||||
mx.sendMessage(roomId, {
|
||||
mx.sendMessage(roomId, threadRootId ?? null, {
|
||||
msgtype: 'm.location',
|
||||
body: `Location: ${geoUri}`,
|
||||
geo_uri: geoUri,
|
||||
@@ -263,7 +269,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
},
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
}, [mx, roomId]);
|
||||
}, [mx, roomId, threadRootId]);
|
||||
|
||||
const handleVoiceSend = useCallback(
|
||||
async (blob: Blob, mimeType: string, durationMs: number, waveform: number[]) => {
|
||||
@@ -279,7 +285,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
if (room.hasEncryptionStateEvent()) {
|
||||
const { encInfo, file: encBlob } = await encryptFile(blob);
|
||||
const uploadResult = await mx.uploadContent(encBlob);
|
||||
mx.sendMessage(roomId, {
|
||||
mx.sendMessage(roomId, threadRootId ?? null, {
|
||||
...baseContent,
|
||||
file: { ...encInfo, url: uploadResult.content_uri },
|
||||
} as any);
|
||||
@@ -288,13 +294,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
name: 'voice-message.ogg',
|
||||
type: mimeType,
|
||||
});
|
||||
mx.sendMessage(roomId, {
|
||||
mx.sendMessage(roomId, threadRootId ?? null, {
|
||||
...baseContent,
|
||||
url: uploadResult.content_uri,
|
||||
} as any);
|
||||
}
|
||||
},
|
||||
[mx, room, roomId],
|
||||
[mx, room, roomId, threadRootId],
|
||||
);
|
||||
|
||||
const [autocompleteQuery, setAutocompleteQuery] =
|
||||
@@ -364,7 +370,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
} else {
|
||||
// Jotai draft is empty (page reload) — try localStorage fallback
|
||||
try {
|
||||
const stored = localStorage.getItem(`draft-msg-${roomId}`);
|
||||
const stored = localStorage.getItem(`draft-msg-${draftKey}`);
|
||||
if (stored) {
|
||||
const nodes = JSON.parse(stored);
|
||||
if (Array.isArray(nodes) && nodes.length > 0) {
|
||||
@@ -379,22 +385,22 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
// Ignore malformed stored draft
|
||||
}
|
||||
}
|
||||
}, [editor, msgDraft, roomId, setMsgDraft]);
|
||||
}, [editor, msgDraft, draftKey, setMsgDraft]);
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (!isEmptyEditor(editor)) {
|
||||
const parsedDraft = JSON.parse(JSON.stringify(editor.children));
|
||||
setMsgDraft(parsedDraft);
|
||||
localStorage.setItem(`draft-msg-${roomId}`, JSON.stringify(parsedDraft));
|
||||
localStorage.setItem(`draft-msg-${draftKey}`, JSON.stringify(parsedDraft));
|
||||
} else {
|
||||
setMsgDraft([]);
|
||||
localStorage.removeItem(`draft-msg-${roomId}`);
|
||||
localStorage.removeItem(`draft-msg-${draftKey}`);
|
||||
}
|
||||
resetEditor(editor);
|
||||
resetEditorHistory(editor);
|
||||
},
|
||||
[roomId, editor, setMsgDraft],
|
||||
[draftKey, editor, setMsgDraft],
|
||||
);
|
||||
|
||||
const handleFileMetadata = useCallback(
|
||||
@@ -487,15 +493,17 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
});
|
||||
handleCancelUpload(uploads);
|
||||
const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises));
|
||||
contents.forEach((content) => mx.sendMessage(roomId, content as any));
|
||||
contents.forEach((content) => mx.sendMessage(roomId, threadRootId ?? null, content as any));
|
||||
},
|
||||
[mx, roomId, selectedFiles, handleCancelUpload],
|
||||
[mx, roomId, threadRootId, selectedFiles, handleCancelUpload],
|
||||
);
|
||||
|
||||
const submit = useCallback(() => {
|
||||
uploadBoardHandlers.current?.handleSend();
|
||||
|
||||
const commandName = getBeginCommand(editor);
|
||||
// Slash-command interpretation is disabled in thread mode (v1): "/foo"
|
||||
// sends literally rather than being parsed as a command.
|
||||
const commandName = threadRootId ? undefined : getBeginCommand(editor);
|
||||
let plainText = toPlainText(editor.children, isMarkdown).trim();
|
||||
let customHtml = trimCustomHtml(
|
||||
toMatrixCustomHTML(editor.children, {
|
||||
@@ -568,13 +576,24 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
content['m.relates_to'].is_falling_back = false;
|
||||
}
|
||||
}
|
||||
mx.sendMessage(roomId, content as any);
|
||||
mx.sendMessage(roomId, threadRootId ?? null, content as any);
|
||||
resetEditor(editor);
|
||||
resetEditorHistory(editor);
|
||||
localStorage.removeItem(`draft-msg-${roomId}`);
|
||||
localStorage.removeItem(`draft-msg-${draftKey}`);
|
||||
setReplyDraft(undefined);
|
||||
sendTypingStatus(false);
|
||||
}, [mx, roomId, editor, replyDraft, sendTypingStatus, setReplyDraft, isMarkdown, commands]);
|
||||
}, [
|
||||
mx,
|
||||
roomId,
|
||||
threadRootId,
|
||||
draftKey,
|
||||
editor,
|
||||
replyDraft,
|
||||
sendTypingStatus,
|
||||
setReplyDraft,
|
||||
isMarkdown,
|
||||
commands,
|
||||
]);
|
||||
|
||||
/**
|
||||
* Build a text message content object from the current editor state.
|
||||
@@ -643,11 +662,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
});
|
||||
resetEditor(editor);
|
||||
resetEditorHistory(editor);
|
||||
localStorage.removeItem(`draft-msg-${roomId}`);
|
||||
localStorage.removeItem(`draft-msg-${draftKey}`);
|
||||
setReplyDraft(undefined);
|
||||
sendTypingStatus(false);
|
||||
},
|
||||
[setScheduledMessages, roomId, editor, setReplyDraft, sendTypingStatus],
|
||||
[setScheduledMessages, roomId, draftKey, editor, setReplyDraft, sendTypingStatus],
|
||||
);
|
||||
|
||||
const handleKeyDown: KeyboardEventHandler = useCallback(
|
||||
@@ -660,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(
|
||||
@@ -742,7 +769,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
);
|
||||
const mxcUrl = (uploadRes as { content_uri: string }).content_uri;
|
||||
if (!mxcUrl) return;
|
||||
mx.sendMessage(roomId, {
|
||||
mx.sendMessage(roomId, threadRootId ?? null, {
|
||||
msgtype: MsgType.Image,
|
||||
body: 'image.gif',
|
||||
url: mxcUrl,
|
||||
@@ -757,7 +784,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
if (alive()) setGifUploading(false);
|
||||
}
|
||||
},
|
||||
[mx, roomId, alive],
|
||||
[mx, roomId, threadRootId, alive],
|
||||
);
|
||||
|
||||
const handleStickerSelect = useCallback(
|
||||
@@ -770,13 +797,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
await getImageUrlBlob(stickerUrl),
|
||||
);
|
||||
|
||||
mx.sendEvent(roomId, EventType.Sticker, {
|
||||
mx.sendEvent(roomId, threadRootId ?? null, EventType.Sticker, {
|
||||
body: label,
|
||||
url: mxc,
|
||||
info,
|
||||
});
|
||||
},
|
||||
[mx, roomId, useAuthentication],
|
||||
[mx, roomId, threadRootId, useAuthentication],
|
||||
);
|
||||
|
||||
if (room.getType() === 'm.server_notice') {
|
||||
@@ -1258,7 +1285,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
{locationError}
|
||||
</Text>
|
||||
)}
|
||||
<DraftIndicator roomId={roomId} />
|
||||
<DraftIndicator roomId={draftKey} />
|
||||
{charCount > 0 && (
|
||||
<Text
|
||||
size="T200"
|
||||
|
||||
@@ -18,9 +18,11 @@ import {
|
||||
IContent,
|
||||
MatrixClient,
|
||||
MatrixEvent,
|
||||
RelationType,
|
||||
Room,
|
||||
RoomEvent,
|
||||
RoomEventHandlerMap,
|
||||
ThreadEvent,
|
||||
} from 'matrix-js-sdk';
|
||||
import { HTMLReactParserOptions } from 'html-react-parser';
|
||||
import classNames from 'classnames';
|
||||
@@ -103,6 +105,8 @@ import * as css from './RoomTimeline.css';
|
||||
import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
|
||||
import { createMentionElement, isEmptyEditor, moveCursor } from '../../components/editor';
|
||||
import { roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
|
||||
import { roomIdToActiveThreadIdAtomFamily } from '../../state/room/thread';
|
||||
import { ThreadSummary } from './thread/ThreadSummary';
|
||||
import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
|
||||
import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
|
||||
import { useKeyDown } from '../../hooks/useKeyDown';
|
||||
@@ -245,13 +249,26 @@ const useEventTimelineLoader = (
|
||||
room: Room,
|
||||
onLoad: (eventId: string, linkedTimelines: EventTimeline[], evtAbsIndex: number) => void,
|
||||
onError: (err: Error | null) => void,
|
||||
onThreadRedirect: (threadRootId: string) => void,
|
||||
) => {
|
||||
const loadEventTimeline = useCallback(
|
||||
async (eventId: string) => {
|
||||
const [err, replyEvtTimeline] = await to(
|
||||
mx.getEventTimeline(room.getUnfilteredTimelineSet(), eventId),
|
||||
);
|
||||
// Thread events aren't locatable in the main timeline set (getEventTimeline
|
||||
// returns undefined / no abs index). Best-effort: redirect to the thread panel
|
||||
// when the fetched event belongs to a thread instead of surfacing an error.
|
||||
const redirectToThread = () => {
|
||||
const threadRootId = room.findEventById(eventId)?.threadRootId;
|
||||
if (threadRootId) {
|
||||
onThreadRedirect(threadRootId);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
if (!replyEvtTimeline) {
|
||||
if (redirectToThread()) return;
|
||||
onError(err ?? null);
|
||||
return;
|
||||
}
|
||||
@@ -259,13 +276,14 @@ const useEventTimelineLoader = (
|
||||
const absIndex = getEventIdAbsoluteIndex(linkedTimelines, replyEvtTimeline, eventId);
|
||||
|
||||
if (absIndex === undefined) {
|
||||
if (redirectToThread()) return;
|
||||
onError(err ?? null);
|
||||
return;
|
||||
}
|
||||
|
||||
onLoad(eventId, linkedTimelines, absIndex);
|
||||
},
|
||||
[mx, room, onLoad, onError],
|
||||
[mx, room, onLoad, onError, onThreadRedirect],
|
||||
);
|
||||
|
||||
return loadEventTimeline;
|
||||
@@ -460,6 +478,20 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
||||
const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
|
||||
|
||||
const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
|
||||
const setActiveThreadId = useSetAtom(roomIdToActiveThreadIdAtomFamily(room.roomId));
|
||||
// Thread summary chips only mount for events that already carry thread data
|
||||
// (perf: a chip subscribes room-level listeners, so mounting one per rendered
|
||||
// message would exceed the SDK's emitter cap). This single room-level
|
||||
// ThreadEvent.New subscription re-renders the timeline once when a brand-new
|
||||
// thread appears, so the root's chip shows up without unrelated activity.
|
||||
const [, setThreadNewTick] = useState(0);
|
||||
useEffect(() => {
|
||||
const handleThreadNew = () => setThreadNewTick((c) => c + 1);
|
||||
room.on(ThreadEvent.New, handleThreadNew);
|
||||
return () => {
|
||||
room.removeListener(ThreadEvent.New, handleThreadNew);
|
||||
};
|
||||
}, [room]);
|
||||
const powerLevels = usePowerLevelsContext();
|
||||
const creators = useRoomCreators(room);
|
||||
|
||||
@@ -622,6 +654,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
||||
scrollToBottomRef.current.count += 1;
|
||||
scrollToBottomRef.current.smooth = false;
|
||||
}, [alive, room]),
|
||||
useCallback(
|
||||
(threadRootId: string) => {
|
||||
if (!alive()) return;
|
||||
setActiveThreadId(threadRootId);
|
||||
},
|
||||
[alive, setActiveThreadId],
|
||||
),
|
||||
);
|
||||
|
||||
useLiveEventArrive(
|
||||
@@ -982,14 +1021,17 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
||||
console.warn('Button should have "data-event-id" attribute!');
|
||||
return;
|
||||
}
|
||||
if (startThread) {
|
||||
// Open the thread panel instead of arming an m.thread reply in the main composer.
|
||||
setActiveThreadId(replyId);
|
||||
return;
|
||||
}
|
||||
const replyEvt = room.findEventById(replyId);
|
||||
if (!replyEvt) return;
|
||||
const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet());
|
||||
const content: IContent = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
|
||||
const { body, formatted_body: formattedBody } = content;
|
||||
const { 'm.relates_to': relation } = startThread
|
||||
? { 'm.relates_to': { rel_type: 'm.thread', event_id: replyId } }
|
||||
: replyEvt.getWireContent();
|
||||
const { 'm.relates_to': relation } = replyEvt.getWireContent();
|
||||
const senderId = replyEvt.getSender();
|
||||
if (senderId && typeof body === 'string') {
|
||||
setReplyDraft({
|
||||
@@ -1002,7 +1044,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
||||
setTimeout(() => ReactEditor.focus(editor), 100);
|
||||
}
|
||||
},
|
||||
[room, setReplyDraft, editor],
|
||||
[room, setReplyDraft, setActiveThreadId, editor],
|
||||
);
|
||||
|
||||
const handleReactionToggle = useCallback(
|
||||
@@ -1090,6 +1132,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
||||
replyEventId={replyEventId}
|
||||
threadRootId={threadRootId}
|
||||
onClick={handleOpenReply}
|
||||
onThreadClick={setActiveThreadId}
|
||||
getMemberPowerTag={getMemberPowerTag}
|
||||
accessibleTagColors={accessiblePowerTagColors}
|
||||
legacyUsernameColor={legacyUsernameColor || direct}
|
||||
@@ -1097,16 +1140,23 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
||||
)
|
||||
}
|
||||
reactions={
|
||||
reactionRelations && (
|
||||
<Reactions
|
||||
style={{ marginTop: config.space.S200 }}
|
||||
room={room}
|
||||
relations={reactionRelations}
|
||||
mEventId={mEventId}
|
||||
canSendReaction={canSendReaction}
|
||||
onReactionToggle={handleReactionToggle}
|
||||
/>
|
||||
)
|
||||
<>
|
||||
{reactionRelations && (
|
||||
<Reactions
|
||||
style={{ marginTop: config.space.S200 }}
|
||||
room={room}
|
||||
relations={reactionRelations}
|
||||
mEventId={mEventId}
|
||||
canSendReaction={canSendReaction}
|
||||
onReactionToggle={handleReactionToggle}
|
||||
/>
|
||||
)}
|
||||
{(!threadRootId || threadRootId === mEventId) &&
|
||||
(mEvent.getThread() !== undefined ||
|
||||
mEvent.getServerAggregatedRelation(RelationType.Thread) !== undefined) && (
|
||||
<ThreadSummary rootEvent={mEvent} room={room} onOpen={setActiveThreadId} />
|
||||
)}
|
||||
</>
|
||||
}
|
||||
hideReadReceipts={hideActivity}
|
||||
showDeveloperTools={showDeveloperTools}
|
||||
@@ -1175,6 +1225,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
||||
replyEventId={replyEventId}
|
||||
threadRootId={threadRootId}
|
||||
onClick={handleOpenReply}
|
||||
onThreadClick={setActiveThreadId}
|
||||
getMemberPowerTag={getMemberPowerTag}
|
||||
accessibleTagColors={accessiblePowerTagColors}
|
||||
legacyUsernameColor={legacyUsernameColor || direct}
|
||||
@@ -1182,16 +1233,23 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
||||
)
|
||||
}
|
||||
reactions={
|
||||
reactionRelations && (
|
||||
<Reactions
|
||||
style={{ marginTop: config.space.S200 }}
|
||||
room={room}
|
||||
relations={reactionRelations}
|
||||
mEventId={mEventId}
|
||||
canSendReaction={canSendReaction}
|
||||
onReactionToggle={handleReactionToggle}
|
||||
/>
|
||||
)
|
||||
<>
|
||||
{reactionRelations && (
|
||||
<Reactions
|
||||
style={{ marginTop: config.space.S200 }}
|
||||
room={room}
|
||||
relations={reactionRelations}
|
||||
mEventId={mEventId}
|
||||
canSendReaction={canSendReaction}
|
||||
onReactionToggle={handleReactionToggle}
|
||||
/>
|
||||
)}
|
||||
{(!threadRootId || threadRootId === mEventId) &&
|
||||
(mEvent.getThread() !== undefined ||
|
||||
mEvent.getServerAggregatedRelation(RelationType.Thread) !== undefined) && (
|
||||
<ThreadSummary rootEvent={mEvent} room={room} onOpen={setActiveThreadId} />
|
||||
)}
|
||||
</>
|
||||
}
|
||||
hideReadReceipts={hideActivity}
|
||||
showDeveloperTools={showDeveloperTools}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React, { ChangeEvent, useCallback, useState } from 'react';
|
||||
import React, { ChangeEvent, useCallback, useMemo, useRef, useState } from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
color,
|
||||
config,
|
||||
Header,
|
||||
Icon,
|
||||
@@ -28,6 +29,7 @@ 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';
|
||||
|
||||
type RoomRowProps = {
|
||||
room: Room;
|
||||
@@ -86,35 +88,83 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
|
||||
const modalStyle = useModalStyle(400);
|
||||
const directs = useAtomValue(mDirectAtom);
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
const [query, setQuery] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const [sentTo, setSentTo] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const allRooms = mx
|
||||
.getRooms()
|
||||
.filter((r) => r.getMyMembership() === 'join' && !r.isSpaceRoom())
|
||||
.sort((a, b) => (b.getLastActiveTimestamp() ?? 0) - (a.getLastActiveTimestamp() ?? 0));
|
||||
const allRooms = useMemo(
|
||||
() =>
|
||||
mx
|
||||
.getRooms()
|
||||
.filter((r) => r.getMyMembership() === 'join' && !r.isSpaceRoom())
|
||||
.sort((a, b) => (b.getLastActiveTimestamp() ?? 0) - (a.getLastActiveTimestamp() ?? 0)),
|
||||
[mx],
|
||||
);
|
||||
|
||||
const filtered = query
|
||||
? allRooms.filter((r) => r.name.toLowerCase().includes(query.toLowerCase()))
|
||||
: allRooms;
|
||||
const filtered = useMemo(() => {
|
||||
if (!query) return allRooms;
|
||||
const q = query.toLowerCase();
|
||||
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;
|
||||
|
||||
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;
|
||||
}, [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);
|
||||
const fwdContent: Record<string, unknown> = { ...mEvent.getContent() };
|
||||
delete fwdContent['m.relates_to'];
|
||||
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 as any).sendEvent(room.roomId, mEvent.getType(), fwdContent);
|
||||
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],
|
||||
[mx, mEvent, onClose, sending, buildForwardContent],
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -122,7 +172,7 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
initialFocus: () => searchInputRef.current ?? false,
|
||||
onDeactivate: onClose,
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
@@ -153,8 +203,13 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
|
||||
</IconButton>
|
||||
</Header>
|
||||
{!sentTo && (
|
||||
<Box shrink="No" style={{ padding: `${config.space.S200} ${config.space.S400}` }}>
|
||||
<Box
|
||||
shrink="No"
|
||||
direction="Column"
|
||||
style={{ padding: `${config.space.S200} ${config.space.S400}` }}
|
||||
>
|
||||
<Input
|
||||
ref={searchInputRef}
|
||||
variant="Background"
|
||||
size="400"
|
||||
radii="400"
|
||||
@@ -163,6 +218,14 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
|
||||
value={query}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
|
||||
/>
|
||||
{error && (
|
||||
<Text
|
||||
size="T200"
|
||||
style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
|
||||
>
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
<Line size="300" />
|
||||
|
||||
@@ -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,30 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
import { config, toRem } from 'folds';
|
||||
|
||||
export const ThreadPanel = style({
|
||||
width: toRem(360),
|
||||
'@media': {
|
||||
'(max-width: 750px)': {
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
width: '100%',
|
||||
zIndex: 500,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const ThreadPanelHeader = style({
|
||||
flexShrink: 0,
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
});
|
||||
|
||||
export const ThreadPanelContent = style({
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const ThreadPanelInput = style({
|
||||
padding: config.space.S200,
|
||||
borderTopWidth: config.borderWidth.B300,
|
||||
});
|
||||
@@ -0,0 +1,206 @@
|
||||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Header,
|
||||
Icon,
|
||||
IconButton,
|
||||
Icons,
|
||||
Spinner,
|
||||
Text,
|
||||
Tooltip,
|
||||
TooltipProvider,
|
||||
} from 'folds';
|
||||
import { Room, RoomEvent, ThreadEvent } from 'matrix-js-sdk';
|
||||
import { isKeyHotkey } from 'is-hotkey';
|
||||
import classNames from 'classnames';
|
||||
import * as css from './ThreadPanel.css';
|
||||
import { ContainerColor } from '../../../styles/ContainerColor.css';
|
||||
import { ThreadTimeline } from './ThreadTimeline';
|
||||
import { markThreadAsRead, useThreadInstance } from './useThread';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { useEditor } from '../../../components/editor';
|
||||
import { useKeyDown } from '../../../hooks/useKeyDown';
|
||||
import { useSetting } from '../../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../../state/settings';
|
||||
import { RoomInput } from '../RoomInput';
|
||||
import {
|
||||
getThreadNotificationModeIcon,
|
||||
ThreadNotificationModeSwitcher,
|
||||
} from '../../../components/ThreadNotificationModeSwitcher';
|
||||
import { useThreadNotificationMode } from '../../../hooks/useThreadNotifications';
|
||||
import { ThreadNotificationMode } from '../../../utils/threadNotifications';
|
||||
|
||||
type ThreadPanelHeaderProps = {
|
||||
room: Room;
|
||||
threadId: string;
|
||||
requestClose: () => void;
|
||||
};
|
||||
function ThreadPanelHeader({ room, threadId, requestClose }: ThreadPanelHeaderProps) {
|
||||
const mode = useThreadNotificationMode(room.roomId, threadId);
|
||||
|
||||
return (
|
||||
<Header className={css.ThreadPanelHeader} variant="Background" size="600">
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Text size="H5" truncate>
|
||||
Thread
|
||||
</Text>
|
||||
<Text size="T200" truncate style={{ opacity: 0.65 }}>
|
||||
{room.name}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box shrink="No" alignItems="Center" gap="100">
|
||||
<ThreadNotificationModeSwitcher roomId={room.roomId} threadId={threadId} value={mode}>
|
||||
{(handleOpen, opened) => (
|
||||
<TooltipProvider
|
||||
position="Bottom"
|
||||
align="End"
|
||||
offset={4}
|
||||
tooltip={
|
||||
<Tooltip>
|
||||
<Text>Notifications</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<IconButton
|
||||
ref={triggerRef}
|
||||
variant="Background"
|
||||
aria-label="Thread notifications"
|
||||
aria-pressed={opened}
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<Icon
|
||||
src={getThreadNotificationModeIcon(mode)}
|
||||
filled={mode !== ThreadNotificationMode.Default}
|
||||
/>
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
)}
|
||||
</ThreadNotificationModeSwitcher>
|
||||
<TooltipProvider
|
||||
position="Bottom"
|
||||
align="End"
|
||||
offset={4}
|
||||
tooltip={
|
||||
<Tooltip>
|
||||
<Text>Close</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<IconButton
|
||||
ref={triggerRef}
|
||||
variant="Background"
|
||||
aria-label="Close thread"
|
||||
onClick={requestClose}
|
||||
>
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
</Box>
|
||||
</Box>
|
||||
</Header>
|
||||
);
|
||||
}
|
||||
|
||||
export type ThreadPanelProps = {
|
||||
room: Room;
|
||||
threadId: string;
|
||||
requestClose: () => void;
|
||||
};
|
||||
export function ThreadPanel({ room, threadId, requestClose }: ThreadPanelProps) {
|
||||
const mx = useMatrixClient();
|
||||
const editor = useEditor();
|
||||
const thread = useThreadInstance(room, threadId);
|
||||
const [privateReadReceipts] = useSetting(settingsAtom, 'privateReadReceipts');
|
||||
const fileDropContainerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
|
||||
useKeyDown(
|
||||
window,
|
||||
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();
|
||||
}
|
||||
},
|
||||
[requestClose],
|
||||
),
|
||||
);
|
||||
|
||||
// Mark the thread read when the panel is open and on each new thread event.
|
||||
// Deduped on the latest event id: RoomEvent.Timeline re-emits per event during
|
||||
// backfill and for every edit/reaction, and sendReadReceipt POSTs
|
||||
// unconditionally — without the guard, opening a thread with N replies would
|
||||
// fire up to N receipt requests at the same event.
|
||||
const lastReadEventIdRef = useRef<string | undefined>(undefined);
|
||||
useEffect(() => {
|
||||
lastReadEventIdRef.current = undefined;
|
||||
if (!thread) return undefined;
|
||||
const markRead = () => {
|
||||
const events = thread.liveTimeline.getEvents();
|
||||
let latestId: string | undefined;
|
||||
for (let i = events.length - 1; i >= 0; i -= 1) {
|
||||
const evt = events[i];
|
||||
if (evt && !evt.isSending()) {
|
||||
latestId = evt.getId() ?? undefined;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!latestId || latestId === lastReadEventIdRef.current) return;
|
||||
lastReadEventIdRef.current = latestId;
|
||||
markThreadAsRead(mx, thread, privateReadReceipts).catch(() => {
|
||||
// Allow a retry on the next event if the receipt POST failed.
|
||||
if (lastReadEventIdRef.current === latestId) {
|
||||
lastReadEventIdRef.current = undefined;
|
||||
}
|
||||
});
|
||||
};
|
||||
markRead();
|
||||
thread.on(ThreadEvent.NewReply, markRead);
|
||||
thread.on(RoomEvent.Timeline, markRead);
|
||||
return () => {
|
||||
thread.off(ThreadEvent.NewReply, markRead);
|
||||
thread.off(RoomEvent.Timeline, markRead);
|
||||
};
|
||||
}, [mx, thread, privateReadReceipts]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
className={classNames(css.ThreadPanel, ContainerColor({ variant: 'Background' }))}
|
||||
shrink="No"
|
||||
direction="Column"
|
||||
>
|
||||
<ThreadPanelHeader room={room} threadId={threadId} requestClose={requestClose} />
|
||||
{!thread ? (
|
||||
<Box grow="Yes" alignItems="Center" justifyContent="Center" gap="200">
|
||||
<Spinner size="400" variant="Secondary" />
|
||||
<Text size="T300">Loading thread…</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
<Box grow="Yes" className={css.ThreadPanelContent} direction="Column">
|
||||
<ThreadTimeline room={room} thread={thread} editor={editor} />
|
||||
</Box>
|
||||
<Box className={css.ThreadPanelInput} shrink="No" direction="Column">
|
||||
<RoomInput
|
||||
room={room}
|
||||
roomId={room.roomId}
|
||||
threadRootId={threadId}
|
||||
editor={editor}
|
||||
fileDropContainerRef={fileDropContainerRef}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import { Badge, Box, Chip, Icon, Icons, Text, config } from 'folds';
|
||||
import { MatrixEvent, Room } from 'matrix-js-sdk';
|
||||
import { useThreadSummary } from '../../../hooks/useThreadSummary';
|
||||
import { useSetting } from '../../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../../state/settings';
|
||||
import { timeDayMonthYear, timeHourMinute, today } from '../../../utils/time';
|
||||
import { ThreadNotificationMode } from '../../../utils/threadNotifications';
|
||||
|
||||
type ThreadSummaryProps = {
|
||||
rootEvent: MatrixEvent;
|
||||
room: Room;
|
||||
onOpen: (threadId: string) => void;
|
||||
};
|
||||
export function ThreadSummary({ rootEvent, room, onOpen }: ThreadSummaryProps) {
|
||||
const { summary, unread, mode } = useThreadSummary(rootEvent, room);
|
||||
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
|
||||
|
||||
if (!summary || summary.count === 0) return null;
|
||||
|
||||
const { count, latestTs } = summary;
|
||||
const latestStr =
|
||||
latestTs !== undefined
|
||||
? today(latestTs)
|
||||
? timeHourMinute(latestTs, hour24Clock)
|
||||
: timeDayMonthYear(latestTs)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<Box style={{ marginTop: config.space.S200 }}>
|
||||
<Chip
|
||||
variant="SurfaceVariant"
|
||||
radii="300"
|
||||
before={<Icon size="50" src={Icons.Thread} />}
|
||||
after={
|
||||
unread > 0 ? <Badge variant="Success" fill="Solid" radii="Pill" size="200" /> : undefined
|
||||
}
|
||||
onClick={() => {
|
||||
const threadId = rootEvent.getId();
|
||||
if (threadId) onOpen(threadId);
|
||||
}}
|
||||
>
|
||||
<Text size="T200">
|
||||
{count === 1 ? '1 reply' : `${count} replies`}
|
||||
{latestStr ? ` · ${latestStr}` : ''}
|
||||
</Text>
|
||||
{mode === ThreadNotificationMode.Mute && <Icon size="50" src={Icons.BellMute} />}
|
||||
</Chip>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
import { color, config } from 'folds';
|
||||
|
||||
export const ThreadTimeline = style({
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
export const ThreadTimelineContent = style({
|
||||
minHeight: '100%',
|
||||
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,
|
||||
});
|
||||
|
||||
export const RootMessage = style({
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
borderRadius: config.radii.R400,
|
||||
marginBottom: config.space.S100,
|
||||
});
|
||||
|
||||
export const RepliesDivider = style({
|
||||
padding: `${config.space.S200} ${config.space.S400}`,
|
||||
});
|
||||
|
||||
export const NoReplies = style({
|
||||
padding: config.space.S400,
|
||||
});
|
||||
|
||||
export const PendingMessage = style({
|
||||
opacity: 0.6,
|
||||
});
|
||||
|
||||
export const PendingFailed = style({
|
||||
opacity: 1,
|
||||
});
|
||||
@@ -0,0 +1,982 @@
|
||||
import React, {
|
||||
Dispatch,
|
||||
MouseEventHandler,
|
||||
ReactNode,
|
||||
SetStateAction,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {
|
||||
Direction,
|
||||
EventStatus,
|
||||
EventTimeline,
|
||||
EventTimelineSet,
|
||||
EventTimelineSetHandlerMap,
|
||||
MatrixClient,
|
||||
MatrixEvent,
|
||||
RelationType,
|
||||
Room,
|
||||
RoomEvent,
|
||||
Thread,
|
||||
ThreadEvent,
|
||||
} from 'matrix-js-sdk';
|
||||
import { HTMLReactParserOptions } from 'html-react-parser';
|
||||
import { Editor } from 'slate';
|
||||
import { ReactEditor } from 'slate-react';
|
||||
import to from 'await-to-js';
|
||||
import { useAtomValue, useSetAtom } from 'jotai';
|
||||
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';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { useVirtualPaginator, ItemRange } from '../../../hooks/useVirtualPaginator';
|
||||
import { useAlive } from '../../../hooks/useAlive';
|
||||
import { scrollToBottom } from '../../../utils/dom';
|
||||
import {
|
||||
DefaultPlaceholder,
|
||||
MessageBase,
|
||||
Reply,
|
||||
RedactedContent,
|
||||
MSticker,
|
||||
MessageUnsupportedContent,
|
||||
MessageNotDecryptedContent,
|
||||
ImageContent,
|
||||
} from '../../../components/message';
|
||||
import {
|
||||
factoryRenderLinkifyWithMention,
|
||||
getReactCustomHtmlParser,
|
||||
LINKIFY_OPTS,
|
||||
makeMentionCustomProps,
|
||||
renderMatrixMention,
|
||||
} from '../../../plugins/react-custom-html-parser';
|
||||
import {
|
||||
decryptAllTimelineEvent,
|
||||
getEditedEvent,
|
||||
getEventReactions,
|
||||
getMemberDisplayName,
|
||||
getReactionContent,
|
||||
reactionOrEditEvent,
|
||||
} from '../../../utils/room';
|
||||
import { useSetting } from '../../../state/hooks/settings';
|
||||
import { MessageLayout, settingsAtom } from '../../../state/settings';
|
||||
import { Message, Reactions, EncryptedContent } from '../message';
|
||||
import { RenderMessageContent } from '../../../components/RenderMessageContent';
|
||||
import { Image } from '../../../components/media';
|
||||
import { ImageViewer } from '../../../components/image-viewer';
|
||||
import * as css from './ThreadTimeline.css';
|
||||
import {
|
||||
inSameDay,
|
||||
minuteDifference,
|
||||
timeDayMonthYear,
|
||||
today,
|
||||
yesterday,
|
||||
} from '../../../utils/time';
|
||||
import { createMentionElement, moveCursor } from '../../../components/editor';
|
||||
import { roomIdToReplyDraftAtomFamily } from '../../../state/room/roomInputDrafts';
|
||||
import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
|
||||
import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/matrix/room';
|
||||
import {
|
||||
getIntersectionObserverEntry,
|
||||
useIntersectionObserver,
|
||||
} from '../../../hooks/useIntersectionObserver';
|
||||
import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
|
||||
import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
|
||||
import { useImagePackRooms } from '../../../hooks/useImagePackRooms';
|
||||
import { useIsDirectRoom } from '../../../hooks/useRoom';
|
||||
import { useOpenUserRoomProfile } from '../../../state/hooks/userRoomProfile';
|
||||
import { useSpaceOptionally } from '../../../hooks/useSpace';
|
||||
import { useRoomCreators } from '../../../hooks/useRoomCreators';
|
||||
import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
|
||||
import {
|
||||
useAccessiblePowerTagColors,
|
||||
useGetMemberPowerTag,
|
||||
} from '../../../hooks/useMemberPowerTag';
|
||||
import { useTheme } from '../../../hooks/useTheme';
|
||||
import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
|
||||
import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
|
||||
import { roomToParentsAtom } from '../../../state/room/roomToParents';
|
||||
import { EditHistoryModal } from '../message/EditHistoryModal';
|
||||
import {
|
||||
getLinkedTimelines,
|
||||
getTimelineAndBaseIndex,
|
||||
getTimelineEvent,
|
||||
getTimelineRelativeIndex,
|
||||
getTimelinesEventsCount,
|
||||
timelineToEventsCount,
|
||||
} from '../RoomTimeline';
|
||||
import { getThreadDraftKey } from '../../../state/room/thread';
|
||||
import { useThreadLinkedTimelines, useThreadPendingEvents } from './useThread';
|
||||
|
||||
// Virtual window size (how many items render around the viewport).
|
||||
const PAGINATION_LIMIT = 50;
|
||||
// Network page size for backward /relations pagination of the thread timeline.
|
||||
const THREAD_PAGE_LIMIT = 30;
|
||||
|
||||
type Timeline = {
|
||||
linkedTimelines: EventTimeline[];
|
||||
range: ItemRange;
|
||||
};
|
||||
|
||||
const getEmptyTimeline = (): Timeline => ({
|
||||
linkedTimelines: [],
|
||||
range: { start: 0, end: 0 },
|
||||
});
|
||||
|
||||
const getInitialThreadTimeline = (thread: Thread, timelines?: EventTimeline[]): Timeline => {
|
||||
const linkedTimelines =
|
||||
timelines && timelines.length > 0 ? timelines : getLinkedTimelines(thread.liveTimeline);
|
||||
const evLength = getTimelinesEventsCount(linkedTimelines);
|
||||
return {
|
||||
linkedTimelines,
|
||||
range: {
|
||||
start: Math.max(evLength - PAGINATION_LIMIT, 0),
|
||||
end: evLength,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Copy of RoomTimeline's `useTimelinePagination` pattern (not exported from RoomTimeline
|
||||
* as its ~35 hooks are hardwired to the room live timeline). Works transparently against
|
||||
* the thread timeline's /relations pagination.
|
||||
*/
|
||||
const useThreadTimelinePagination = (
|
||||
mx: MatrixClient,
|
||||
timeline: Timeline,
|
||||
setTimeline: Dispatch<SetStateAction<Timeline>>,
|
||||
limit: number,
|
||||
) => {
|
||||
const timelineRef = useRef(timeline);
|
||||
timelineRef.current = timeline;
|
||||
const alive = useAlive();
|
||||
|
||||
const handleTimelinePagination = useMemo(() => {
|
||||
let fetching = false;
|
||||
|
||||
const recalibratePagination = (
|
||||
linkedTimelines: EventTimeline[],
|
||||
timelinesEventsCount: number[],
|
||||
backwards: boolean,
|
||||
) => {
|
||||
const topTimeline = linkedTimelines[0];
|
||||
const timelineMatch = (mt: EventTimeline) => (t: EventTimeline) => t === mt;
|
||||
|
||||
const newLTimelines = getLinkedTimelines(topTimeline);
|
||||
const topTmIndex = newLTimelines.findIndex(timelineMatch(topTimeline));
|
||||
const topAddedTm = topTmIndex === -1 ? [] : newLTimelines.slice(0, topTmIndex);
|
||||
|
||||
const topTmAddedEvt =
|
||||
timelineToEventsCount(newLTimelines[topTmIndex]) - timelinesEventsCount[0];
|
||||
const offsetRange = getTimelinesEventsCount(topAddedTm) + (backwards ? topTmAddedEvt : 0);
|
||||
|
||||
setTimeline((currentTimeline) => ({
|
||||
linkedTimelines: newLTimelines,
|
||||
range:
|
||||
offsetRange > 0
|
||||
? {
|
||||
start: currentTimeline.range.start + offsetRange,
|
||||
end: currentTimeline.range.end + offsetRange,
|
||||
}
|
||||
: { ...currentTimeline.range },
|
||||
}));
|
||||
};
|
||||
|
||||
return async (backwards: boolean) => {
|
||||
if (fetching) return;
|
||||
const { linkedTimelines: lTimelines } = timelineRef.current;
|
||||
const timelinesEventsCount = lTimelines.map(timelineToEventsCount);
|
||||
|
||||
const timelineToPaginate = backwards ? lTimelines[0] : lTimelines[lTimelines.length - 1];
|
||||
if (!timelineToPaginate) return;
|
||||
|
||||
const paginationToken = timelineToPaginate.getPaginationToken(
|
||||
backwards ? Direction.Backward : Direction.Forward,
|
||||
);
|
||||
if (
|
||||
!paginationToken &&
|
||||
getTimelinesEventsCount(lTimelines) !==
|
||||
getTimelinesEventsCount(getLinkedTimelines(timelineToPaginate))
|
||||
) {
|
||||
recalibratePagination(lTimelines, timelinesEventsCount, backwards);
|
||||
return;
|
||||
}
|
||||
|
||||
fetching = true;
|
||||
const [err] = await to(
|
||||
mx.paginateEventTimeline(timelineToPaginate, {
|
||||
backwards,
|
||||
limit,
|
||||
}),
|
||||
);
|
||||
if (err) {
|
||||
fetching = false;
|
||||
return;
|
||||
}
|
||||
const fetchedTimeline =
|
||||
timelineToPaginate.getNeighbouringTimeline(
|
||||
backwards ? Direction.Backward : Direction.Forward,
|
||||
) ?? timelineToPaginate;
|
||||
// Decrypt all event ahead of render cycle
|
||||
const roomId = fetchedTimeline.getRoomId();
|
||||
const room = roomId ? mx.getRoom(roomId) : null;
|
||||
|
||||
if (room?.hasEncryptionStateEvent()) {
|
||||
await to(decryptAllTimelineEvent(mx, fetchedTimeline));
|
||||
}
|
||||
|
||||
fetching = false;
|
||||
if (alive()) {
|
||||
recalibratePagination(lTimelines, timelinesEventsCount, backwards);
|
||||
}
|
||||
};
|
||||
}, [mx, alive, setTimeline, limit]);
|
||||
return handleTimelinePagination;
|
||||
};
|
||||
|
||||
export type ThreadTimelineProps = {
|
||||
room: Room;
|
||||
thread: Thread;
|
||||
editor: Editor;
|
||||
};
|
||||
|
||||
export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
|
||||
const mx = useMatrixClient();
|
||||
const alive = useAlive();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
|
||||
const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
|
||||
const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
|
||||
const [perMessageProfiles] = useSetting(settingsAtom, 'perMessageProfiles');
|
||||
const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
|
||||
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||
const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
|
||||
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
|
||||
const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
|
||||
const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
|
||||
const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
|
||||
const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
|
||||
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
|
||||
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
|
||||
|
||||
const direct = useIsDirectRoom();
|
||||
const ignoredUsersList = useIgnoredUsers();
|
||||
const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
|
||||
|
||||
const setReplyDraft = useSetAtom(
|
||||
roomIdToReplyDraftAtomFamily(getThreadDraftKey(room.roomId, thread.id)),
|
||||
);
|
||||
|
||||
const powerLevels = usePowerLevelsContext();
|
||||
const creators = useRoomCreators(room);
|
||||
const creatorsTag = useRoomCreatorsTag();
|
||||
const powerLevelTags = usePowerLevelTags(room, powerLevels);
|
||||
const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
|
||||
|
||||
const theme = useTheme();
|
||||
const accessiblePowerTagColors = useAccessiblePowerTagColors(
|
||||
theme.kind,
|
||||
creatorsTag,
|
||||
powerLevelTags,
|
||||
);
|
||||
|
||||
const permissions = useRoomPermissions(creators, powerLevels);
|
||||
const canRedact = permissions.action('redact', mx.getSafeUserId());
|
||||
const canDeleteOwn = permissions.event(MessageEvent.RoomRedaction, mx.getSafeUserId());
|
||||
const canSendReaction = permissions.event(MessageEvent.Reaction, mx.getSafeUserId());
|
||||
const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, mx.getSafeUserId());
|
||||
|
||||
const mentionClickHandler = useMentionClickHandler(room.roomId);
|
||||
const spoilerClickHandler = useSpoilerClickHandler();
|
||||
const openUserRoomProfile = useOpenUserRoomProfile();
|
||||
const space = useSpaceOptionally();
|
||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||
const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
|
||||
|
||||
const [editId, setEditId] = useState<string>();
|
||||
const [editHistoryEvent, setEditHistoryEvent] = useState<MatrixEvent | undefined>();
|
||||
|
||||
const linkifyOpts = useMemo<LinkifyOpts>(
|
||||
() => ({
|
||||
...LINKIFY_OPTS,
|
||||
render: factoryRenderLinkifyWithMention((href) =>
|
||||
renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler)),
|
||||
),
|
||||
}),
|
||||
[mx, room, mentionClickHandler],
|
||||
);
|
||||
const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
|
||||
() =>
|
||||
getReactCustomHtmlParser(mx, room.roomId, {
|
||||
linkifyOpts,
|
||||
useAuthentication,
|
||||
handleSpoilerClick: spoilerClickHandler,
|
||||
handleMentionClick: mentionClickHandler,
|
||||
}),
|
||||
[mx, room, linkifyOpts, spoilerClickHandler, mentionClickHandler, useAuthentication],
|
||||
);
|
||||
|
||||
const { timelines, ready } = useThreadLinkedTimelines(mx, thread);
|
||||
const pendingEvents = useThreadPendingEvents(room, thread.id, thread);
|
||||
|
||||
const [timeline, setTimeline] = useState<Timeline>(() =>
|
||||
ready ? getInitialThreadTimeline(thread, timelines) : getEmptyTimeline(),
|
||||
);
|
||||
const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines);
|
||||
|
||||
const canPaginateBack =
|
||||
typeof timeline.linkedTimelines[0]?.getPaginationToken(Direction.Backward) === 'string';
|
||||
const rangeAtStart = timeline.range.start === 0;
|
||||
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const atBottomAnchorRef = useRef<HTMLElement>(null);
|
||||
const [atBottom, setAtBottom] = useState(true);
|
||||
const atBottomRef = useRef(atBottom);
|
||||
atBottomRef.current = atBottom;
|
||||
const scrollToBottomRef = useRef({ count: 0, smooth: true });
|
||||
|
||||
const handleTimelinePagination = useThreadTimelinePagination(
|
||||
mx,
|
||||
timeline,
|
||||
setTimeline,
|
||||
THREAD_PAGE_LIMIT,
|
||||
);
|
||||
|
||||
const getScrollElement = useCallback(() => scrollRef.current, []);
|
||||
|
||||
const { getItems, scrollToItem, observeBackAnchor } = useVirtualPaginator({
|
||||
count: eventsLength,
|
||||
limit: PAGINATION_LIMIT,
|
||||
range: timeline.range,
|
||||
onRangeChange: useCallback((r) => setTimeline((cs) => ({ ...cs, range: r })), []),
|
||||
getScrollElement,
|
||||
getItemElement: useCallback(
|
||||
(index: number) =>
|
||||
(scrollRef.current?.querySelector(`[data-message-item="${index}"]`) as HTMLElement) ??
|
||||
undefined,
|
||||
[],
|
||||
),
|
||||
onEnd: handleTimelinePagination,
|
||||
});
|
||||
|
||||
// Seed local timeline once the thread has fetched its initial events.
|
||||
const seededRef = useRef(false);
|
||||
useEffect(() => {
|
||||
if (!ready || seededRef.current) return;
|
||||
seededRef.current = true;
|
||||
setTimeline(getInitialThreadTimeline(thread, timelines));
|
||||
scrollToBottomRef.current.count += 1;
|
||||
scrollToBottomRef.current.smooth = false;
|
||||
if (room.hasEncryptionStateEvent()) {
|
||||
to(decryptAllTimelineEvent(mx, thread.liveTimeline)).then(() => {
|
||||
if (alive()) setTimeline((ct) => ({ ...ct }));
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- seed once when ready flips
|
||||
}, [ready, thread]);
|
||||
|
||||
// Re-render / stick-to-bottom on live thread activity.
|
||||
useEffect(() => {
|
||||
const handleTimeline: EventTimelineSetHandlerMap[RoomEvent.Timeline] = (
|
||||
mEvent,
|
||||
eventRoom,
|
||||
toStartOfTimeline,
|
||||
removed,
|
||||
data,
|
||||
) => {
|
||||
if (!data?.liveEvent) return;
|
||||
if (atBottomRef.current) {
|
||||
scrollToBottomRef.current.count += 1;
|
||||
scrollToBottomRef.current.smooth = true;
|
||||
setTimeline((ct) => ({
|
||||
...ct,
|
||||
range: {
|
||||
start: ct.range.start + 1,
|
||||
end: ct.range.end + 1,
|
||||
},
|
||||
}));
|
||||
return;
|
||||
}
|
||||
setTimeline((ct) => ({ ...ct }));
|
||||
};
|
||||
const handleUpdate = () => setTimeline((ct) => ({ ...ct }));
|
||||
// A gappy sync / updateThreadMetadata resets the thread's live timeline —
|
||||
// the stored linkedTimelines would then point at a detached timeline, so
|
||||
// reseed the window from the fresh liveTimeline.
|
||||
const handleReset = () => {
|
||||
setTimeline(getInitialThreadTimeline(thread, getLinkedTimelines(thread.liveTimeline)));
|
||||
scrollToBottomRef.current.count += 1;
|
||||
scrollToBottomRef.current.smooth = false;
|
||||
};
|
||||
|
||||
thread.on(RoomEvent.Timeline, handleTimeline);
|
||||
thread.on(ThreadEvent.Update, handleUpdate);
|
||||
thread.on(RoomEvent.TimelineReset, handleReset);
|
||||
return () => {
|
||||
thread.removeListener(RoomEvent.Timeline, handleTimeline);
|
||||
thread.removeListener(ThreadEvent.Update, handleUpdate);
|
||||
thread.removeListener(RoomEvent.TimelineReset, handleReset);
|
||||
};
|
||||
}, [thread]);
|
||||
|
||||
// atBottom detection
|
||||
useIntersectionObserver(
|
||||
useCallback((entries) => {
|
||||
const target = atBottomAnchorRef.current;
|
||||
if (!target) return;
|
||||
const entry = getIntersectionObserverEntry(target, entries);
|
||||
if (entry) setAtBottom(entry.isIntersecting);
|
||||
}, []),
|
||||
useCallback(
|
||||
() => ({
|
||||
root: getScrollElement(),
|
||||
rootMargin: '100px',
|
||||
}),
|
||||
[getScrollElement],
|
||||
),
|
||||
useCallback(() => atBottomAnchorRef.current, []),
|
||||
);
|
||||
|
||||
// Initial scroll to bottom on mount.
|
||||
useLayoutEffect(() => {
|
||||
const scrollEl = scrollRef.current;
|
||||
if (scrollEl) scrollToBottom(scrollEl);
|
||||
}, []);
|
||||
|
||||
// Scroll to bottom when requested.
|
||||
const scrollToBottomCount = scrollToBottomRef.current.count;
|
||||
useLayoutEffect(() => {
|
||||
if (scrollToBottomCount > 0) {
|
||||
const scrollEl = scrollRef.current;
|
||||
if (scrollEl)
|
||||
scrollToBottom(scrollEl, scrollToBottomRef.current.smooth ? 'smooth' : 'instant');
|
||||
}
|
||||
}, [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) {
|
||||
const editMsgElement =
|
||||
(scrollRef.current?.querySelector(`[data-message-id="${editId}"]`) as HTMLElement) ??
|
||||
undefined;
|
||||
editMsgElement?.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
||||
}
|
||||
}, [editId]);
|
||||
|
||||
const handleUserClick: MouseEventHandler<HTMLButtonElement> = useCallback(
|
||||
(evt) => {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
const userId = evt.currentTarget.getAttribute('data-user-id');
|
||||
if (!userId) return;
|
||||
openUserRoomProfile(
|
||||
room.roomId,
|
||||
space?.roomId,
|
||||
userId,
|
||||
evt.currentTarget.getBoundingClientRect(),
|
||||
);
|
||||
},
|
||||
[room, space, openUserRoomProfile],
|
||||
);
|
||||
|
||||
const handleUsernameClick: MouseEventHandler<HTMLButtonElement> = useCallback(
|
||||
(evt) => {
|
||||
evt.preventDefault();
|
||||
const userId = evt.currentTarget.getAttribute('data-user-id');
|
||||
if (!userId) return;
|
||||
const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
|
||||
editor.insertNode(
|
||||
createMentionElement(
|
||||
userId,
|
||||
name.startsWith('@') ? name : `@${name}`,
|
||||
userId === mx.getUserId(),
|
||||
),
|
||||
);
|
||||
ReactEditor.focus(editor);
|
||||
moveCursor(editor);
|
||||
},
|
||||
[mx, room, editor],
|
||||
);
|
||||
|
||||
const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback(
|
||||
(evt) => {
|
||||
const replyId = evt.currentTarget.getAttribute('data-event-id');
|
||||
if (!replyId) return;
|
||||
const replyEvt = thread.findEventById(replyId) ?? room.findEventById(replyId);
|
||||
if (!replyEvt) return;
|
||||
const editedReply = getEditedEvent(replyId, replyEvt, thread.getUnfilteredTimelineSet());
|
||||
const content = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
|
||||
const { body, formatted_body: formattedBody } = content;
|
||||
const senderId = replyEvt.getSender();
|
||||
if (senderId && typeof body === 'string') {
|
||||
setReplyDraft({
|
||||
userId: senderId,
|
||||
eventId: replyId,
|
||||
body,
|
||||
formattedBody,
|
||||
relation: { rel_type: RelationType.Thread, event_id: thread.id },
|
||||
});
|
||||
setTimeout(() => ReactEditor.focus(editor), 100);
|
||||
}
|
||||
},
|
||||
[room, thread, setReplyDraft, editor],
|
||||
);
|
||||
|
||||
const handleReactionToggle = useCallback(
|
||||
(targetEventId: string, key: string, shortcode?: string) => {
|
||||
const timelineSet = thread.getUnfilteredTimelineSet();
|
||||
const relations = getEventReactions(timelineSet, targetEventId);
|
||||
const allReactions = relations?.getSortedAnnotationsByKey() ?? [];
|
||||
const [, reactionsSet] = allReactions.find(([k]) => k === key) ?? [];
|
||||
const reactions = reactionsSet ? Array.from(reactionsSet) : [];
|
||||
const myReaction = reactions.find(factoryEventSentBy(mx.getUserId()!));
|
||||
|
||||
if (myReaction && !!myReaction.isRelation()) {
|
||||
mx.redactEvent(room.roomId, myReaction.getId()!);
|
||||
return;
|
||||
}
|
||||
const rShortcode =
|
||||
shortcode ||
|
||||
(reactions.find(eventWithShortcode)?.getContent().shortcode as string | undefined);
|
||||
mx.sendEvent(
|
||||
room.roomId,
|
||||
thread.id,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
MessageEvent.Reaction as any,
|
||||
getReactionContent(targetEventId, key, rShortcode),
|
||||
);
|
||||
},
|
||||
[mx, room, thread],
|
||||
);
|
||||
|
||||
const handleEdit = useCallback(
|
||||
(editEvtId?: string) => {
|
||||
if (editEvtId) {
|
||||
setEditId(editEvtId);
|
||||
return;
|
||||
}
|
||||
setEditId(undefined);
|
||||
ReactEditor.focus(editor);
|
||||
},
|
||||
[editor],
|
||||
);
|
||||
|
||||
const handleOpenReply: MouseEventHandler = useCallback(
|
||||
(evt) => {
|
||||
const targetId = evt.currentTarget.getAttribute('data-event-id');
|
||||
if (!targetId) return;
|
||||
// best-effort: scroll to referenced event if it is inside the loaded thread window
|
||||
let absIndex = -1;
|
||||
let acc = 0;
|
||||
timeline.linkedTimelines.some((tl) => {
|
||||
const idx = tl.getEvents().findIndex((e) => e.getId() === targetId);
|
||||
if (idx !== -1) {
|
||||
absIndex = acc + idx;
|
||||
return true;
|
||||
}
|
||||
acc += tl.getEvents().length;
|
||||
return false;
|
||||
});
|
||||
if (absIndex >= 0) {
|
||||
scrollToItem(absIndex, {
|
||||
behavior: 'smooth',
|
||||
align: 'center',
|
||||
stopInView: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
[timeline.linkedTimelines, scrollToItem],
|
||||
);
|
||||
|
||||
const renderMessageContent = useCallback(
|
||||
(mEvent: MatrixEvent, mEventId: string, timelineSet: EventTimelineSet): ReactNode => {
|
||||
// Evaluated lazily so EncryptedContent can re-run it (re-reading getType())
|
||||
// after MatrixEventEvent.Decrypted fires — decryption re-emits NEITHER
|
||||
// RoomEvent.Timeline nor ThreadEvent.Update, so without this wrapper a
|
||||
// live-arriving encrypted reply would show "Unable to decrypt" forever.
|
||||
const renderByType = (): ReactNode => {
|
||||
if (mEvent.isRedacted()) {
|
||||
return <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />;
|
||||
}
|
||||
const type = mEvent.getType();
|
||||
if (type === MessageEvent.Sticker) {
|
||||
return (
|
||||
<MSticker
|
||||
content={mEvent.getContent()}
|
||||
renderImageContent={(props) => (
|
||||
<ImageContent
|
||||
{...props}
|
||||
autoPlay={mediaAutoLoad}
|
||||
renderImage={(p) => <Image {...p} loading="lazy" />}
|
||||
renderViewer={(p) => <ImageViewer {...p} />}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (type === MessageEvent.RoomMessageEncrypted) {
|
||||
return (
|
||||
<Text>
|
||||
<MessageNotDecryptedContent />
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
if (type !== MessageEvent.RoomMessage) {
|
||||
return (
|
||||
<Text>
|
||||
<MessageUnsupportedContent />
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet);
|
||||
const getContent = (() =>
|
||||
editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent()) as GetContentCallback;
|
||||
const senderId = mEvent.getSender() ?? '';
|
||||
const senderDisplayName =
|
||||
getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
|
||||
return (
|
||||
<RenderMessageContent
|
||||
displayName={senderDisplayName}
|
||||
msgType={mEvent.getContent().msgtype ?? ''}
|
||||
ts={mEvent.getTs()}
|
||||
edited={!!editedEvent}
|
||||
onEditHistoryClick={editedEvent ? () => setEditHistoryEvent(mEvent) : undefined}
|
||||
getContent={getContent}
|
||||
mediaAutoLoad={mediaAutoLoad}
|
||||
urlPreview={showUrlPreview}
|
||||
htmlReactParserOptions={htmlReactParserOptions}
|
||||
linkifyOpts={linkifyOpts}
|
||||
outlineAttachment={messageLayout === MessageLayout.Bubble}
|
||||
eventId={mEventId}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
if (mEvent.getType() === MessageEvent.RoomMessageEncrypted) {
|
||||
return <EncryptedContent mEvent={mEvent}>{renderByType}</EncryptedContent>;
|
||||
}
|
||||
return renderByType();
|
||||
},
|
||||
[room, mediaAutoLoad, showUrlPreview, htmlReactParserOptions, linkifyOpts, messageLayout],
|
||||
);
|
||||
|
||||
const renderMessage = useCallback(
|
||||
(
|
||||
mEvent: MatrixEvent,
|
||||
opts: { item?: number; collapse: boolean; highlight: boolean; editable: boolean },
|
||||
): ReactNode => {
|
||||
const mEventId = mEvent.getId();
|
||||
if (!mEventId) return null;
|
||||
const timelineSet = thread.getUnfilteredTimelineSet();
|
||||
const reactionRelations = getEventReactions(timelineSet, mEventId);
|
||||
const reactions = reactionRelations?.getSortedAnnotationsByKey();
|
||||
const hasReactions = !!reactions && reactions.length > 0;
|
||||
const { replyEventId, threadRootId } = mEvent;
|
||||
|
||||
return (
|
||||
<Message
|
||||
key={mEventId}
|
||||
data-message-item={opts.item}
|
||||
data-message-id={mEventId}
|
||||
room={room}
|
||||
mEvent={mEvent}
|
||||
messageSpacing={messageSpacing}
|
||||
messageLayout={messageLayout}
|
||||
collapse={opts.collapse}
|
||||
highlight={opts.highlight}
|
||||
edit={opts.editable && editId === mEventId}
|
||||
canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
|
||||
canSendReaction={canSendReaction}
|
||||
canPinEvent={canPinEvent}
|
||||
imagePackRooms={imagePackRooms}
|
||||
relations={hasReactions ? reactionRelations : undefined}
|
||||
onUserClick={handleUserClick}
|
||||
onUsernameClick={handleUsernameClick}
|
||||
onReplyClick={handleReplyClick}
|
||||
onReactionToggle={handleReactionToggle}
|
||||
onEditId={opts.editable ? handleEdit : undefined}
|
||||
reply={
|
||||
replyEventId && (
|
||||
<Reply
|
||||
room={room}
|
||||
timelineSet={timelineSet}
|
||||
replyEventId={replyEventId}
|
||||
threadRootId={threadRootId}
|
||||
onClick={handleOpenReply}
|
||||
getMemberPowerTag={getMemberPowerTag}
|
||||
accessibleTagColors={accessiblePowerTagColors}
|
||||
legacyUsernameColor={legacyUsernameColor || direct}
|
||||
/>
|
||||
)
|
||||
}
|
||||
reactions={
|
||||
reactionRelations && (
|
||||
<Reactions
|
||||
style={{ marginTop: config.space.S200 }}
|
||||
room={room}
|
||||
relations={reactionRelations}
|
||||
mEventId={mEventId}
|
||||
canSendReaction={canSendReaction}
|
||||
onReactionToggle={handleReactionToggle}
|
||||
/>
|
||||
)
|
||||
}
|
||||
hideReadReceipts={hideActivity}
|
||||
showDeveloperTools={showDeveloperTools}
|
||||
memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
|
||||
accessibleTagColors={accessiblePowerTagColors}
|
||||
legacyUsernameColor={legacyUsernameColor || direct}
|
||||
hour24Clock={hour24Clock}
|
||||
dateFormatString={dateFormatString}
|
||||
lotusTerminal={!!lotusTerminal}
|
||||
>
|
||||
{renderMessageContent(mEvent, mEventId, timelineSet)}
|
||||
</Message>
|
||||
);
|
||||
},
|
||||
[
|
||||
thread,
|
||||
room,
|
||||
messageSpacing,
|
||||
messageLayout,
|
||||
editId,
|
||||
canRedact,
|
||||
canDeleteOwn,
|
||||
canSendReaction,
|
||||
canPinEvent,
|
||||
imagePackRooms,
|
||||
handleUserClick,
|
||||
handleUsernameClick,
|
||||
handleReplyClick,
|
||||
handleReactionToggle,
|
||||
handleEdit,
|
||||
handleOpenReply,
|
||||
getMemberPowerTag,
|
||||
accessiblePowerTagColors,
|
||||
legacyUsernameColor,
|
||||
direct,
|
||||
hideActivity,
|
||||
showDeveloperTools,
|
||||
hour24Clock,
|
||||
dateFormatString,
|
||||
lotusTerminal,
|
||||
mx,
|
||||
renderMessageContent,
|
||||
],
|
||||
);
|
||||
|
||||
let prevEvent: MatrixEvent | undefined;
|
||||
let isPrevRendered = false;
|
||||
let dayDivider = false;
|
||||
const eventRenderer = (item: number) => {
|
||||
const [eventTimeline, baseIndex] = getTimelineAndBaseIndex(timeline.linkedTimelines, item);
|
||||
if (!eventTimeline) return null;
|
||||
const mEvent = getTimelineEvent(eventTimeline, getTimelineRelativeIndex(item, baseIndex));
|
||||
const mEventId = mEvent?.getId();
|
||||
if (!mEvent || !mEventId) return null;
|
||||
|
||||
// Skip annotations, edits, and any state/membership events (they can't be threaded).
|
||||
if (reactionOrEditEvent(mEvent) || typeof mEvent.getStateKey() === 'string') {
|
||||
prevEvent = mEvent;
|
||||
return null;
|
||||
}
|
||||
const eventSender = mEvent.getSender();
|
||||
if (eventSender && ignoredUsersSet.has(eventSender)) {
|
||||
prevEvent = mEvent;
|
||||
return null;
|
||||
}
|
||||
|
||||
const isRoot = mEventId === thread.id;
|
||||
|
||||
if (!dayDivider) {
|
||||
dayDivider = prevEvent ? !inSameDay(prevEvent.getTs(), mEvent.getTs()) : false;
|
||||
}
|
||||
|
||||
const collapsed =
|
||||
!isRoot &&
|
||||
!perMessageProfiles &&
|
||||
isPrevRendered &&
|
||||
!dayDivider &&
|
||||
prevEvent !== undefined &&
|
||||
prevEvent.getId() !== thread.id &&
|
||||
prevEvent.getSender() === eventSender &&
|
||||
prevEvent.getType() === mEvent.getType() &&
|
||||
minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 5;
|
||||
|
||||
const eventJSX = renderMessage(mEvent, {
|
||||
item,
|
||||
collapse: collapsed,
|
||||
highlight: false,
|
||||
editable: true,
|
||||
});
|
||||
|
||||
const dayDividerJSX =
|
||||
dayDivider && eventJSX && !isRoot ? (
|
||||
<MessageBase space={messageSpacing}>
|
||||
<Box gap="100" justifyContent="Center" alignItems="Center">
|
||||
<Line style={{ flexGrow: 1 }} variant="Surface" size="300" />
|
||||
<Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
|
||||
<Text size="L400">
|
||||
{(() => {
|
||||
if (today(mEvent.getTs())) return 'Today';
|
||||
if (yesterday(mEvent.getTs())) return 'Yesterday';
|
||||
return timeDayMonthYear(mEvent.getTs());
|
||||
})()}
|
||||
</Text>
|
||||
</Badge>
|
||||
<Line style={{ flexGrow: 1 }} variant="Surface" size="300" />
|
||||
</Box>
|
||||
</MessageBase>
|
||||
) : null;
|
||||
|
||||
prevEvent = mEvent;
|
||||
isPrevRendered = !!eventJSX;
|
||||
if (dayDividerJSX) dayDivider = false;
|
||||
|
||||
// Root gets an emphasized container + a "N replies" divider under it.
|
||||
if (isRoot && eventJSX) {
|
||||
const replyCount = thread.length;
|
||||
return (
|
||||
<React.Fragment key={mEventId}>
|
||||
<div className={css.RootMessage}>{eventJSX}</div>
|
||||
{replyCount > 0 && (
|
||||
<Box
|
||||
className={css.RepliesDivider}
|
||||
gap="100"
|
||||
justifyContent="Center"
|
||||
alignItems="Center"
|
||||
>
|
||||
<Line style={{ flexGrow: 1 }} variant="Surface" size="300" />
|
||||
<Text size="L400" priority="300">
|
||||
{replyCount === 1 ? '1 reply' : `${replyCount} replies`}
|
||||
</Text>
|
||||
<Line style={{ flexGrow: 1 }} variant="Surface" size="300" />
|
||||
</Box>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
if (eventJSX && dayDividerJSX) {
|
||||
return (
|
||||
<React.Fragment key={mEventId}>
|
||||
{dayDividerJSX}
|
||||
{eventJSX}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
return eventJSX;
|
||||
};
|
||||
|
||||
const items = getItems();
|
||||
const showEmptyReplies = ready && thread.length === 0;
|
||||
|
||||
const renderPendingEvent = (mEvent: MatrixEvent) => {
|
||||
const failed =
|
||||
mEvent.status === EventStatus.NOT_SENT || mEvent.status === EventStatus.CANCELLED;
|
||||
return (
|
||||
<div
|
||||
key={mEvent.getId() ?? mEvent.getTxnId()}
|
||||
className={classNames(failed ? css.PendingFailed : css.PendingMessage)}
|
||||
>
|
||||
{renderMessage(mEvent, { collapse: false, highlight: false, editable: false })}
|
||||
{failed && (
|
||||
<Box style={{ padding: `0 ${config.space.S400}` }}>
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
Failed to send
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<Box
|
||||
className={css.ThreadCentered}
|
||||
grow="Yes"
|
||||
direction="Column"
|
||||
justifyContent="Center"
|
||||
alignItems="Center"
|
||||
>
|
||||
<Spinner variant="Secondary" size="600" />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box className={css.ThreadTimeline} grow="Yes">
|
||||
<Scroll ref={scrollRef} visibility="Hover">
|
||||
<Box
|
||||
className={css.ThreadTimelineContent}
|
||||
direction="Column"
|
||||
justifyContent="End"
|
||||
role="log"
|
||||
aria-label="Thread timeline"
|
||||
aria-live="polite"
|
||||
>
|
||||
{(canPaginateBack || !rangeAtStart) && (
|
||||
<>
|
||||
<MessageBase>
|
||||
<DefaultPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase ref={observeBackAnchor}>
|
||||
<DefaultPlaceholder />
|
||||
</MessageBase>
|
||||
</>
|
||||
)}
|
||||
|
||||
{items.map(eventRenderer)}
|
||||
|
||||
{showEmptyReplies && (
|
||||
<Box className={css.NoReplies} justifyContent="Center">
|
||||
<Text size="T300" priority="300">
|
||||
No replies yet — say something
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{pendingEvents.map(renderPendingEvent)}
|
||||
|
||||
<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}
|
||||
mEvent={editHistoryEvent}
|
||||
onClose={() => setEditHistoryEvent(undefined)}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './ThreadPanel';
|
||||
export * from './ThreadSummary';
|
||||
@@ -0,0 +1,133 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { EventStatus, MatrixEvent, RelationType } from 'matrix-js-sdk';
|
||||
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
|
||||
// cast through `unknown` to MatrixEvent, mirroring the light mocking used in
|
||||
// the state tests.
|
||||
|
||||
type ThreadStub = { length: number; lastReplyTs?: number };
|
||||
type BundleStub = { count: number; latestTs?: number };
|
||||
|
||||
const makeRootEvent = (opts: { thread?: ThreadStub; bundle?: BundleStub }): MatrixEvent => {
|
||||
const thread = opts.thread
|
||||
? {
|
||||
length: opts.thread.length,
|
||||
lastReply: () =>
|
||||
opts.thread?.lastReplyTs === undefined
|
||||
? null
|
||||
: ({ getTs: () => opts.thread?.lastReplyTs } as unknown as MatrixEvent),
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return {
|
||||
getThread: () => thread,
|
||||
getServerAggregatedRelation: (relType: string) => {
|
||||
if (relType !== RelationType.Thread || !opts.bundle) return undefined;
|
||||
return {
|
||||
count: opts.bundle.count,
|
||||
latest_event:
|
||||
opts.bundle.latestTs === undefined
|
||||
? undefined
|
||||
: { origin_server_ts: opts.bundle.latestTs },
|
||||
};
|
||||
},
|
||||
} as unknown as MatrixEvent;
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// getThreadSummary
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test('prefers the live thread: count from length, latestTs from lastReply', () => {
|
||||
const rootEvent = makeRootEvent({
|
||||
thread: { length: 3, lastReplyTs: 1700 },
|
||||
bundle: { count: 99, latestTs: 1 },
|
||||
});
|
||||
assert.deepEqual(getThreadSummary(rootEvent), { count: 3, latestTs: 1700 });
|
||||
});
|
||||
|
||||
test('live thread with no replies yields undefined latestTs', () => {
|
||||
const rootEvent = makeRootEvent({ thread: { length: 0 } });
|
||||
assert.deepEqual(getThreadSummary(rootEvent), { count: 0, latestTs: undefined });
|
||||
});
|
||||
|
||||
test('falls back to the server bundle when no live thread', () => {
|
||||
const rootEvent = makeRootEvent({ bundle: { count: 5, latestTs: 1234 } });
|
||||
assert.deepEqual(getThreadSummary(rootEvent), { count: 5, latestTs: 1234 });
|
||||
});
|
||||
|
||||
test('bundle without latest_event yields undefined latestTs', () => {
|
||||
const rootEvent = makeRootEvent({ bundle: { count: 2 } });
|
||||
assert.deepEqual(getThreadSummary(rootEvent), { count: 2, latestTs: undefined });
|
||||
});
|
||||
|
||||
test('returns undefined when there is neither a thread nor a bundle', () => {
|
||||
const rootEvent = makeRootEvent({});
|
||||
assert.equal(getThreadSummary(rootEvent), undefined);
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// isPendingThreadReply
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const ROOT = '$root:server';
|
||||
|
||||
const makeReply = (opts: {
|
||||
status: EventStatus | null;
|
||||
threadRootId?: string;
|
||||
relation?: { rel_type?: string; event_id?: string } | null;
|
||||
}): MatrixEvent =>
|
||||
({
|
||||
status: opts.status,
|
||||
threadRootId: opts.threadRootId,
|
||||
getRelation: () => opts.relation ?? null,
|
||||
}) as unknown as MatrixEvent;
|
||||
|
||||
test('SENDING with matching threadRootId is pending', () => {
|
||||
const event = makeReply({ status: EventStatus.SENDING, threadRootId: ROOT });
|
||||
assert.equal(isPendingThreadReply(event, ROOT), true);
|
||||
});
|
||||
|
||||
test('NOT_SENT with matching threadRootId is pending', () => {
|
||||
const event = makeReply({ status: EventStatus.NOT_SENT, threadRootId: ROOT });
|
||||
assert.equal(isPendingThreadReply(event, ROOT), true);
|
||||
});
|
||||
|
||||
test('SENDING resolved via the m.thread relation content is pending', () => {
|
||||
const event = makeReply({
|
||||
status: EventStatus.SENDING,
|
||||
relation: { rel_type: RelationType.Thread, event_id: ROOT },
|
||||
});
|
||||
assert.equal(isPendingThreadReply(event, ROOT), true);
|
||||
});
|
||||
|
||||
test('SENT (confirmed) event is not pending', () => {
|
||||
const event = makeReply({ status: EventStatus.SENT, threadRootId: ROOT });
|
||||
assert.equal(isPendingThreadReply(event, ROOT), false);
|
||||
});
|
||||
|
||||
test('null status is not pending', () => {
|
||||
const event = makeReply({ status: null, threadRootId: ROOT });
|
||||
assert.equal(isPendingThreadReply(event, ROOT), false);
|
||||
});
|
||||
|
||||
test('SENDING but for a different thread is not pending', () => {
|
||||
const event = makeReply({ status: EventStatus.SENDING, threadRootId: '$other:server' });
|
||||
assert.equal(isPendingThreadReply(event, ROOT), false);
|
||||
});
|
||||
|
||||
test('SENDING with a non-thread relation is not pending', () => {
|
||||
const event = makeReply({
|
||||
status: EventStatus.SENDING,
|
||||
relation: { rel_type: RelationType.Reference, event_id: ROOT },
|
||||
});
|
||||
assert.equal(isPendingThreadReply(event, ROOT), false);
|
||||
});
|
||||
|
||||
test('SENDING with no relation and no threadRootId is not pending', () => {
|
||||
const event = makeReply({ status: EventStatus.SENDING });
|
||||
assert.equal(isPendingThreadReply(event, ROOT), false);
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
import { EventStatus, IThreadBundledRelationship, MatrixEvent, RelationType } from 'matrix-js-sdk';
|
||||
|
||||
export type ThreadSummaryData = {
|
||||
count: number;
|
||||
latestTs: number | undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* Summary data for a thread root's "N replies" chip.
|
||||
*
|
||||
* Prefers the live {@link Thread} object when it exists (it reflects local
|
||||
* echo + pagination), otherwise falls back to the server-aggregated bundle
|
||||
* (`unsigned['m.relations']['m.thread']`) so the chip renders before any
|
||||
* Thread object has been created. Returns `undefined` when the root has no
|
||||
* thread at all.
|
||||
*/
|
||||
export const getThreadSummary = (rootEvent: MatrixEvent): ThreadSummaryData | undefined => {
|
||||
const thread = rootEvent.getThread();
|
||||
if (thread) {
|
||||
const lastReply = thread.lastReply();
|
||||
return {
|
||||
count: thread.length,
|
||||
latestTs: lastReply?.getTs(),
|
||||
};
|
||||
}
|
||||
|
||||
const bundle = rootEvent.getServerAggregatedRelation<IThreadBundledRelationship>(
|
||||
RelationType.Thread,
|
||||
);
|
||||
if (bundle) {
|
||||
return {
|
||||
count: bundle.count,
|
||||
latestTs: bundle.latest_event?.origin_server_ts,
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* True when `event` is a still-in-flight (local echo) reply belonging to the
|
||||
* given thread root. Used to render the pending strip, since pending thread
|
||||
* sends never enter the thread's timelineSet.
|
||||
*/
|
||||
export const isPendingThreadReply = (event: MatrixEvent, threadRootId: string): boolean => {
|
||||
const { status } = event;
|
||||
if (status !== EventStatus.SENDING && status !== EventStatus.NOT_SENT) return false;
|
||||
|
||||
// Prefer the SDK's resolved thread root id; fall back to the raw relation
|
||||
// content for events the SDK hasn't associated with a thread yet.
|
||||
if (event.threadRootId === threadRootId) return true;
|
||||
|
||||
const relation = event.getRelation();
|
||||
return relation?.rel_type === RelationType.Thread && relation.event_id === threadRootId;
|
||||
};
|
||||
@@ -0,0 +1,177 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
EventStatus,
|
||||
EventTimeline,
|
||||
MatrixClient,
|
||||
MatrixEvent,
|
||||
ReceiptType,
|
||||
Room,
|
||||
RoomEvent,
|
||||
RoomEventHandlerMap,
|
||||
Thread,
|
||||
ThreadEvent,
|
||||
} from 'matrix-js-sdk';
|
||||
import { getLinkedTimelines } from '../RoomTimeline';
|
||||
import { isPendingThreadReply } from './threadSummaryData';
|
||||
|
||||
/**
|
||||
* Resolve (or bootstrap) the live {@link Thread} for a root event.
|
||||
*
|
||||
* Uses the existing thread when present, otherwise creates one via
|
||||
* `room.createThread` — the SDK then auto-fetches the thread's events via
|
||||
* `/relations` and inserts the root at the top. If the root event isn't loaded
|
||||
* locally the Thread handles the root fetch itself, so passing `undefined` is
|
||||
* safe. Re-resolves when a matching thread later appears/updates on the room.
|
||||
*/
|
||||
export const useThreadInstance = (room: Room, threadRootId: string): Thread | undefined => {
|
||||
const getInstance = useCallback((): Thread | undefined => {
|
||||
const existing = room.getThread(threadRootId);
|
||||
if (existing) return existing;
|
||||
const rootEvent = room.findEventById(threadRootId);
|
||||
return room.createThread(threadRootId, rootEvent, [], false) ?? undefined;
|
||||
}, [room, threadRootId]);
|
||||
|
||||
const [thread, setThread] = useState<Thread | undefined>(getInstance);
|
||||
|
||||
useEffect(() => {
|
||||
setThread(getInstance());
|
||||
|
||||
const handleThread: RoomEventHandlerMap[ThreadEvent.New] = (newThread) => {
|
||||
if (newThread.id === threadRootId) setThread(newThread);
|
||||
};
|
||||
const handleThreadUpdate: RoomEventHandlerMap[ThreadEvent.Update] = (updatedThread) => {
|
||||
if (updatedThread.id === threadRootId) setThread(updatedThread);
|
||||
};
|
||||
|
||||
room.on(ThreadEvent.New, handleThread);
|
||||
room.on(ThreadEvent.Update, handleThreadUpdate);
|
||||
return () => {
|
||||
room.removeListener(ThreadEvent.New, handleThread);
|
||||
room.removeListener(ThreadEvent.Update, handleThreadUpdate);
|
||||
};
|
||||
}, [room, threadRootId, getInstance]);
|
||||
|
||||
return thread;
|
||||
};
|
||||
|
||||
/**
|
||||
* Build the ordered list of linked {@link EventTimeline}s for a thread's live
|
||||
* timeline and track readiness (`thread.initialEventsFetched`). Subscribes to
|
||||
* the Thread's re-emitted timeline events so callers repaginate/re-render as
|
||||
* the thread fills in.
|
||||
*/
|
||||
export const useThreadLinkedTimelines = (
|
||||
mx: MatrixClient,
|
||||
thread: Thread,
|
||||
): { timelines: EventTimeline[]; ready: boolean; refresh: () => void } => {
|
||||
const [timelines, setTimelines] = useState<EventTimeline[]>(() =>
|
||||
getLinkedTimelines(thread.liveTimeline),
|
||||
);
|
||||
const [ready, setReady] = useState<boolean>(() => thread.initialEventsFetched);
|
||||
|
||||
const refresh = useCallback(() => {
|
||||
setTimelines(getLinkedTimelines(thread.liveTimeline));
|
||||
setReady(thread.initialEventsFetched);
|
||||
}, [thread]);
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
|
||||
const handleTimeline = () => refresh();
|
||||
// Thread re-emits RoomEvent.Timeline / RoomEvent.TimelineReset from its
|
||||
// timelineSet, and fires ThreadEvent.Update as it (re)populates.
|
||||
thread.on(RoomEvent.Timeline, handleTimeline);
|
||||
thread.on(RoomEvent.TimelineReset, handleTimeline);
|
||||
thread.on(ThreadEvent.Update, handleTimeline);
|
||||
return () => {
|
||||
thread.removeListener(RoomEvent.Timeline, handleTimeline);
|
||||
thread.removeListener(RoomEvent.TimelineReset, handleTimeline);
|
||||
thread.removeListener(ThreadEvent.Update, handleTimeline);
|
||||
};
|
||||
}, [thread, refresh]);
|
||||
|
||||
return { timelines, ready, refresh };
|
||||
};
|
||||
|
||||
/**
|
||||
* Track in-flight (local echo) replies for a thread.
|
||||
*
|
||||
* Pending thread sends never enter the thread's timelineSet (chronological
|
||||
* pending ordering rejects them; `room.getPendingEvents()` THROWS in this
|
||||
* mode). We instead watch `RoomEvent.LocalEchoUpdated` on the room and keep our
|
||||
* own list of events that are pending replies to this thread and not yet in the
|
||||
* thread timeline. When an event's remote echo arrives (status flips to SENT,
|
||||
* or it lands in the thread) it drops out of the list.
|
||||
*/
|
||||
export const useThreadPendingEvents = (
|
||||
room: Room,
|
||||
threadRootId: string,
|
||||
thread: Thread | undefined,
|
||||
): MatrixEvent[] => {
|
||||
const [pending, setPending] = useState<MatrixEvent[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setPending([]);
|
||||
|
||||
const handleLocalEcho: RoomEventHandlerMap[RoomEvent.LocalEchoUpdated] = (event) => {
|
||||
const eventId = event.getId();
|
||||
setPending((prev) => {
|
||||
// Drop any previous entry for this event (same instance across the
|
||||
// temp-id -> real-id transition, or matched by id).
|
||||
const without = prev.filter((e) => e !== event && e.getId() !== eventId);
|
||||
|
||||
const alreadyInThread =
|
||||
eventId !== undefined && thread?.findEventById(eventId) !== undefined;
|
||||
// Keep a tracked event through the SENT window too: the /send response
|
||||
// flips status to SENT before /sync delivers the event into the thread
|
||||
// timeline — dropping it there would make the message flash out of view.
|
||||
// It falls out on the next LocalEchoUpdated once findEventById sees it.
|
||||
const trackedAndAwaitingSync =
|
||||
event.status === EventStatus.SENT &&
|
||||
prev.some((e) => e === event || (eventId !== undefined && e.getId() === eventId));
|
||||
const stillPending =
|
||||
!alreadyInThread && (isPendingThreadReply(event, threadRootId) || trackedAndAwaitingSync);
|
||||
|
||||
if (stillPending) return [...without, event];
|
||||
return without.length === prev.length ? prev : without;
|
||||
});
|
||||
};
|
||||
|
||||
room.on(RoomEvent.LocalEchoUpdated, handleLocalEcho);
|
||||
return () => {
|
||||
room.removeListener(RoomEvent.LocalEchoUpdated, handleLocalEcho);
|
||||
};
|
||||
}, [room, threadRootId, thread]);
|
||||
|
||||
return pending;
|
||||
};
|
||||
|
||||
/**
|
||||
* Send a threaded read receipt up to the latest confirmed event in the thread.
|
||||
*
|
||||
* The receipt is threaded by default (scoped to this thread), which clears the
|
||||
* per-thread unread count. Mirrors the latest-valid-event scan in
|
||||
* `utils/notifications.ts`.
|
||||
*/
|
||||
export const markThreadAsRead = async (
|
||||
mx: MatrixClient,
|
||||
thread: Thread,
|
||||
privateReceipt: boolean,
|
||||
): Promise<void> => {
|
||||
const events = thread.liveTimeline.getEvents();
|
||||
|
||||
let latestEvent: MatrixEvent | undefined;
|
||||
for (let i = events.length - 1; i >= 0; i -= 1) {
|
||||
const evt = events[i];
|
||||
if (evt && !evt.isSending()) {
|
||||
latestEvent = evt;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!latestEvent) return;
|
||||
|
||||
await mx.sendReadReceipt(
|
||||
latestEvent,
|
||||
privateReceipt ? ReceiptType.ReadPrivate : ReceiptType.Read,
|
||||
);
|
||||
};
|
||||
@@ -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}
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
} from '../../../components/AccountDataEditor';
|
||||
import { copyToClipboard } from '../../../utils/dom';
|
||||
import { AccountData } from './AccountData';
|
||||
import { CryptoDiagnostics } from '../developer/CryptoDiagnostics';
|
||||
|
||||
type DeveloperToolsProps = {
|
||||
requestClose: () => void;
|
||||
@@ -109,6 +110,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
|
||||
/>
|
||||
</SequenceCard>
|
||||
)}
|
||||
{developerTools && <CryptoDiagnostics />}
|
||||
</Box>
|
||||
{developerTools && (
|
||||
<AccountData
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { Badge, Box, Button, Text } from 'folds';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { SequenceCardStyle } from '../styles.css';
|
||||
import { SettingTile } from '../../../components/setting-tile';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { useForceUpdate } from '../../../hooks/useForceUpdate';
|
||||
import { useInterval } from '../../../hooks/useInterval';
|
||||
import { buildCryptoDiagReport, getCryptoDiagEntries } from '../../../utils/cryptoDiagLog';
|
||||
|
||||
// Lotus E2EE investigation kit — Crypto Diagnostics settings card.
|
||||
// Mirrors the surrounding Developer Tools cards (see DevelopTools.tsx).
|
||||
|
||||
const REFRESH_MS = 1000;
|
||||
|
||||
export function CryptoDiagnostics() {
|
||||
const mx = useMatrixClient();
|
||||
// Re-render on a light interval so the live matched-entry count stays fresh
|
||||
// while the settings pane is open.
|
||||
const [, forceUpdate] = useForceUpdate();
|
||||
useInterval(forceUpdate, REFRESH_MS);
|
||||
|
||||
const count = getCryptoDiagEntries().length;
|
||||
|
||||
const handleDownload = useCallback(() => {
|
||||
const report = buildCryptoDiagReport(mx);
|
||||
const blob = new Blob([report], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `lotus-crypto-diag-${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}, [mx]);
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Crypto Diagnostics</Text>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Crypto Diagnostics — captures E2EE error signatures this session"
|
||||
description="Ring-buffers up to 200 matched console warnings/errors for the KE-1..KE-4 bug cluster. Local only — no network calls. The downloaded report includes the matched log lines as evidence."
|
||||
after={
|
||||
<Box alignItems="Center" gap="200" shrink="No">
|
||||
<Badge variant={count > 0 ? 'Critical' : 'Secondary'} fill="Solid" radii="Pill">
|
||||
<Text as="span" size="L400">
|
||||
{count}
|
||||
</Text>
|
||||
</Badge>
|
||||
<Button
|
||||
onClick={handleDownload}
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
outlined
|
||||
>
|
||||
<Text size="B300">Download report</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -531,6 +531,7 @@ function Appearance() {
|
||||
Intensity: {nightLightOpacity}%
|
||||
</Text>
|
||||
<input
|
||||
aria-label="Night light intensity"
|
||||
type="range"
|
||||
min={5}
|
||||
max={80}
|
||||
@@ -1663,6 +1664,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';
|
||||
@@ -13,6 +13,7 @@ import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
|
||||
import { SpaceSettingsPage } from '../../state/spaceSettings';
|
||||
import { useRoom } from '../../hooks/useRoom';
|
||||
import { EmojisStickers } from '../common-settings/emojis-stickers';
|
||||
import { Soundboard } from '../common-settings/soundboard';
|
||||
import { Members } from '../common-settings/members';
|
||||
import { DeveloperTools } from '../common-settings/developer-tools';
|
||||
import { General } from './general';
|
||||
@@ -48,6 +49,11 @@ const BASE_SPACE_MENU_ITEMS: SpaceSettingsMenuItem[] = [
|
||||
name: 'Emojis & Stickers',
|
||||
icon: Icons.Smile,
|
||||
},
|
||||
{
|
||||
page: SpaceSettingsPage.SoundboardPage,
|
||||
name: 'Soundboard',
|
||||
icon: Icons.Bell,
|
||||
},
|
||||
{
|
||||
page: SpaceSettingsPage.DeveloperToolsPage,
|
||||
name: 'Developer Tools',
|
||||
@@ -190,6 +196,9 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
|
||||
{activePage === SpaceSettingsPage.EmojisStickersPage && (
|
||||
<EmojisStickers requestClose={handlePageRequestClose} />
|
||||
)}
|
||||
{activePage === SpaceSettingsPage.SoundboardPage && (
|
||||
<Soundboard requestClose={handlePageRequestClose} />
|
||||
)}
|
||||
{activePage === SpaceSettingsPage.DeveloperToolsPage && (
|
||||
<DeveloperTools requestClose={handlePageRequestClose} />
|
||||
)}
|
||||
|
||||
@@ -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,66 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import {
|
||||
ClientEvent,
|
||||
MatrixClient,
|
||||
Room,
|
||||
RoomEmittedEvents,
|
||||
RoomEventHandlerMap,
|
||||
} from 'matrix-js-sdk';
|
||||
|
||||
/**
|
||||
* Attach `handler` for `event` on every joined/known room, including rooms
|
||||
* created after mount (via `ClientEvent.Room`). All listeners are detached on
|
||||
* unmount or when `mx`/`event` change.
|
||||
*
|
||||
* The handler is stored in a ref (mirroring `useTauriEvent`) so callers don't
|
||||
* need to memoize it — changing the handler identity never re-attaches the
|
||||
* per-room listeners.
|
||||
*
|
||||
* The emitting {@link Room} is PREPENDED as the first argument, before the
|
||||
* event's own args: several room-level SDK events (e.g.
|
||||
* `RoomEvent.UnreadNotifications`) don't include the room in their payload,
|
||||
* which callers need for per-room updates. Prepending (not appending) is
|
||||
* load-bearing — some SDK events emit with VARIABLE arity
|
||||
* (UnreadNotifications fires with 0, 1, or 2 args), so a trailing extra arg
|
||||
* would land in a different positional slot per emit.
|
||||
*/
|
||||
export function useRoomsListener<E extends RoomEmittedEvents>(
|
||||
mx: MatrixClient,
|
||||
event: E,
|
||||
handler: (room: Room, ...args: Parameters<RoomEventHandlerMap[E]>) => void,
|
||||
): void {
|
||||
const handlerRef = useRef(handler);
|
||||
handlerRef.current = handler;
|
||||
|
||||
useEffect(() => {
|
||||
// Track attached rooms (and their per-room trampolines) so re-emitted
|
||||
// `ClientEvent.Room` (e.g. on membership changes) never double-subscribes,
|
||||
// and cleanup can detach exactly what was attached.
|
||||
const attached = new Map<string, (...args: unknown[]) => void>();
|
||||
|
||||
const attach = (room: Room) => {
|
||||
if (attached.has(room.roomId)) return;
|
||||
// Per-room trampoline: forwards to the current ref value with the
|
||||
// emitting room PREPENDED (stable slot regardless of emit arity).
|
||||
const roomHandler = (...args: unknown[]) =>
|
||||
(handlerRef.current as (...a: unknown[]) => void)(room, ...args);
|
||||
attached.set(room.roomId, roomHandler);
|
||||
// `event`/`roomHandler` are correlated through E but TS can't prove it
|
||||
// for the open generic, so we assert at the boundary.
|
||||
room.on(event, roomHandler as any);
|
||||
};
|
||||
|
||||
mx.getRooms().forEach(attach);
|
||||
|
||||
const handleRoom = (room: Room) => attach(room);
|
||||
mx.on(ClientEvent.Room, handleRoom);
|
||||
|
||||
return () => {
|
||||
mx.removeListener(ClientEvent.Room, handleRoom);
|
||||
attached.forEach((roomHandler, roomId) => {
|
||||
mx.getRoom(roomId)?.removeListener(event, roomHandler as any);
|
||||
});
|
||||
attached.clear();
|
||||
};
|
||||
}, [mx, event]);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { useEffect } from 'react';
|
||||
import { getFallbackSession, subscribeSessionChanges } from '../state/sessions';
|
||||
|
||||
/**
|
||||
* Keep this tab in sync with session changes performed in other tabs/windows.
|
||||
*
|
||||
* The coordinator mounts this once inside the authenticated client shell.
|
||||
* `storage` events fire only in tabs that did NOT perform the write, so the
|
||||
* callback here always represents an out-of-tab change.
|
||||
*
|
||||
* Default action is the safest one for auth-critical state — a full reload:
|
||||
* - session REMOVED elsewhere (logout / localStorage.clear()) → the access
|
||||
* token disappears, so we reload; the router bounces to auth on next boot.
|
||||
* - session APPEARED or its access token CHANGED elsewhere (a fresh login or
|
||||
* a token rotation) → we reload so the client re-initialises with the new
|
||||
* credentials rather than running on a stale/revoked token.
|
||||
*
|
||||
* A change that does not alter the access token (e.g. an OIDC metadata-only
|
||||
* rewrite) is ignored, which also collapses the several storage events emitted
|
||||
* by a single dual-write into at most one reload.
|
||||
*/
|
||||
export const useSessionSync = (): void => {
|
||||
useEffect(() => {
|
||||
// Snapshot the credential this tab booted with; compare against it so we
|
||||
// only reload on a genuine credential change.
|
||||
const initialAccessToken = getFallbackSession()?.accessToken ?? null;
|
||||
|
||||
const unsubscribe = subscribeSessionChanges((session) => {
|
||||
const nextAccessToken = session?.accessToken ?? null;
|
||||
if (nextAccessToken === initialAccessToken) return;
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
return unsubscribe;
|
||||
}, []);
|
||||
};
|
||||
@@ -1,101 +0,0 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useMatrixClient } from './useMatrixClient';
|
||||
import { useAccountDataCallback } from './useAccountDataCallback';
|
||||
import { AccountDataEvent } from '../../types/matrix/accountData';
|
||||
import {
|
||||
SoundboardClip,
|
||||
SoundboardContent,
|
||||
SOUNDBOARD_MAX_CLIP_BYTES,
|
||||
SOUNDBOARD_MAX_CLIPS,
|
||||
SOUNDBOARD_NAME_MAX,
|
||||
readSoundboardClips,
|
||||
} from '../utils/soundboardClips';
|
||||
|
||||
const KEY = AccountDataEvent.LotusSoundboard;
|
||||
|
||||
/**
|
||||
* [P5-15] Read/write the user's personal soundboard, stored in the
|
||||
* `io.lotus.soundboard` account data event (synced across devices like custom
|
||||
* emoji/sticker packs). Uploading writes the audio to the media repo and
|
||||
* appends an mxc reference.
|
||||
*/
|
||||
export function useSoundboard(): {
|
||||
clips: SoundboardClip[];
|
||||
addClip: (file: File, name?: string) => Promise<void>;
|
||||
removeClip: (id: string) => Promise<void>;
|
||||
renameClip: (id: string, name: string) => Promise<void>;
|
||||
} {
|
||||
const mx = useMatrixClient();
|
||||
const [clips, setClips] = useState<SoundboardClip[]>(() => readSoundboardClips(mx));
|
||||
|
||||
useAccountDataCallback(
|
||||
mx,
|
||||
useCallback((evt) => {
|
||||
if (evt.getType() === KEY) {
|
||||
const content = evt.getContent<SoundboardContent>();
|
||||
setClips(Array.isArray(content?.clips) ? content.clips : []);
|
||||
}
|
||||
}, []),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setClips(readSoundboardClips(mx));
|
||||
}, [mx]);
|
||||
|
||||
const persist = useCallback(
|
||||
async (next: SoundboardClip[]) => {
|
||||
const content: SoundboardContent = { clips: next };
|
||||
await (
|
||||
mx as unknown as { setAccountData: (t: string, c: unknown) => Promise<void> }
|
||||
).setAccountData(KEY, content);
|
||||
},
|
||||
[mx],
|
||||
);
|
||||
|
||||
const addClip = useCallback(
|
||||
async (file: File, name?: string) => {
|
||||
const current = readSoundboardClips(mx);
|
||||
if (current.length >= SOUNDBOARD_MAX_CLIPS) {
|
||||
throw new Error(`Soundboard is full (max ${SOUNDBOARD_MAX_CLIPS} clips).`);
|
||||
}
|
||||
if (file.size > SOUNDBOARD_MAX_CLIP_BYTES) {
|
||||
throw new Error('Clip is too large (max 1 MB).');
|
||||
}
|
||||
const res = await mx.uploadContent(file, { type: file.type || 'audio/mpeg' });
|
||||
const mxc = res.content_uri;
|
||||
if (!mxc) throw new Error('Upload failed.');
|
||||
const label = (name ?? file.name.replace(/\.[^/.]+$/, ''))
|
||||
.trim()
|
||||
.slice(0, SOUNDBOARD_NAME_MAX);
|
||||
const clip: SoundboardClip = {
|
||||
id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
name: label || 'Clip',
|
||||
url: mxc,
|
||||
mimetype: file.type || undefined,
|
||||
size: file.size,
|
||||
};
|
||||
await persist([...current, clip]);
|
||||
},
|
||||
[mx, persist],
|
||||
);
|
||||
|
||||
const removeClip = useCallback(
|
||||
async (id: string) => {
|
||||
const next = readSoundboardClips(mx).filter((c) => c.id !== id);
|
||||
await persist(next);
|
||||
},
|
||||
[mx, persist],
|
||||
);
|
||||
|
||||
const renameClip = useCallback(
|
||||
async (id: string, name: string) => {
|
||||
const trimmed = name.trim().slice(0, SOUNDBOARD_NAME_MAX);
|
||||
if (!trimmed) return;
|
||||
const next = readSoundboardClips(mx).map((c) => (c.id === id ? { ...c, name: trimmed } : c));
|
||||
await persist(next);
|
||||
},
|
||||
[mx, persist],
|
||||
);
|
||||
|
||||
return { clips, addClip, removeClip, renameClip };
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { AccountDataEvent } from '../../types/matrix/accountData';
|
||||
import { StateEvent } from '../../types/matrix/room';
|
||||
import {
|
||||
getGlobalSoundboardPacks,
|
||||
getRoomSoundboardPack,
|
||||
getRoomSoundboardPacks,
|
||||
getUserSoundboardPack,
|
||||
SoundboardPack,
|
||||
} from '../plugins/soundboard';
|
||||
import { useMatrixClient } from './useMatrixClient';
|
||||
import { useAccountDataCallback } from './useAccountDataCallback';
|
||||
import { useStateEventCallback } from './useStateEventCallback';
|
||||
|
||||
// Parallels hooks/useImagePacks.ts (custom emoji). Same aggregation shape.
|
||||
|
||||
export const useUserSoundboardPack = (): SoundboardPack | undefined => {
|
||||
const mx = useMatrixClient();
|
||||
const [userPack, setUserPack] = useState(() => getUserSoundboardPack(mx));
|
||||
|
||||
useAccountDataCallback(
|
||||
mx,
|
||||
useCallback(
|
||||
(mEvent) => {
|
||||
if (mEvent.getType() === AccountDataEvent.LotusSoundboard) {
|
||||
setUserPack(getUserSoundboardPack(mx));
|
||||
}
|
||||
},
|
||||
[mx],
|
||||
),
|
||||
);
|
||||
|
||||
return userPack;
|
||||
};
|
||||
|
||||
export const useGlobalSoundboardPacks = (): SoundboardPack[] => {
|
||||
const mx = useMatrixClient();
|
||||
const [globalPacks, setGlobalPacks] = useState(() => getGlobalSoundboardPacks(mx));
|
||||
|
||||
useAccountDataCallback(
|
||||
mx,
|
||||
useCallback(
|
||||
(mEvent) => {
|
||||
if (mEvent.getType() === AccountDataEvent.LotusSoundboardRooms) {
|
||||
setGlobalPacks(getGlobalSoundboardPacks(mx));
|
||||
}
|
||||
},
|
||||
[mx],
|
||||
),
|
||||
);
|
||||
|
||||
useStateEventCallback(
|
||||
mx,
|
||||
useCallback(
|
||||
(mEvent) => {
|
||||
const roomId = mEvent.getRoomId();
|
||||
const stateKey = mEvent.getStateKey();
|
||||
if (
|
||||
mEvent.getType() === StateEvent.LotusSoundboardRoom &&
|
||||
roomId &&
|
||||
typeof stateKey === 'string'
|
||||
) {
|
||||
const isGlobal = !!globalPacks.find(
|
||||
(pack) =>
|
||||
pack.address && pack.address.roomId === roomId && pack.address.stateKey === stateKey,
|
||||
);
|
||||
if (isGlobal) setGlobalPacks(getGlobalSoundboardPacks(mx));
|
||||
}
|
||||
},
|
||||
[mx, globalPacks],
|
||||
),
|
||||
);
|
||||
|
||||
return globalPacks;
|
||||
};
|
||||
|
||||
export const useRoomSoundboardPack = (room: Room, stateKey: string): SoundboardPack | undefined => {
|
||||
const mx = useMatrixClient();
|
||||
const [roomPack, setRoomPack] = useState(() => getRoomSoundboardPack(room, stateKey));
|
||||
|
||||
useStateEventCallback(
|
||||
mx,
|
||||
useCallback(
|
||||
(mEvent) => {
|
||||
if (
|
||||
mEvent.getRoomId() === room.roomId &&
|
||||
mEvent.getType() === StateEvent.LotusSoundboardRoom &&
|
||||
mEvent.getStateKey() === stateKey
|
||||
) {
|
||||
setRoomPack(getRoomSoundboardPack(room, stateKey));
|
||||
}
|
||||
},
|
||||
[room, stateKey],
|
||||
),
|
||||
);
|
||||
|
||||
return roomPack;
|
||||
};
|
||||
|
||||
export const useRoomSoundboardPacks = (room: Room): SoundboardPack[] => {
|
||||
const mx = useMatrixClient();
|
||||
const [roomPacks, setRoomPacks] = useState(() => getRoomSoundboardPacks(room));
|
||||
|
||||
useStateEventCallback(
|
||||
mx,
|
||||
useCallback(
|
||||
(mEvent) => {
|
||||
if (
|
||||
mEvent.getRoomId() === room.roomId &&
|
||||
mEvent.getType() === StateEvent.LotusSoundboardRoom
|
||||
) {
|
||||
setRoomPacks(getRoomSoundboardPacks(room));
|
||||
}
|
||||
},
|
||||
[room],
|
||||
),
|
||||
);
|
||||
|
||||
return roomPacks;
|
||||
};
|
||||
|
||||
export const useRoomsSoundboardPacks = (rooms: Room[]): SoundboardPack[] => {
|
||||
const mx = useMatrixClient();
|
||||
const [roomPacks, setRoomPacks] = useState(() => rooms.flatMap(getRoomSoundboardPacks));
|
||||
|
||||
useStateEventCallback(
|
||||
mx,
|
||||
useCallback(
|
||||
(mEvent) => {
|
||||
if (
|
||||
rooms.find((room) => room.roomId === mEvent.getRoomId()) &&
|
||||
mEvent.getType() === StateEvent.LotusSoundboardRoom
|
||||
) {
|
||||
setRoomPacks(rooms.flatMap(getRoomSoundboardPacks));
|
||||
}
|
||||
},
|
||||
[rooms],
|
||||
),
|
||||
);
|
||||
|
||||
return roomPacks;
|
||||
};
|
||||
|
||||
/** User ∪ global ∪ room packs, deduped by id, keeping only packs with clips. */
|
||||
export const useRelevantSoundboardPacks = (rooms: Room[]): SoundboardPack[] => {
|
||||
const userPack = useUserSoundboardPack();
|
||||
const globalPacks = useGlobalSoundboardPacks();
|
||||
const roomsPacks = useRoomsSoundboardPacks(rooms);
|
||||
|
||||
return useMemo(() => {
|
||||
const packs = userPack ? [userPack] : [];
|
||||
const globalPackIds = new Set(globalPacks.map((pack) => pack.id));
|
||||
const relPacks = packs.concat(
|
||||
globalPacks,
|
||||
roomsPacks.filter((pack) => !globalPackIds.has(pack.id)),
|
||||
);
|
||||
return relPacks.filter((pack) => pack.getClips().length > 0);
|
||||
}, [userPack, globalPacks, roomsPacks]);
|
||||
};
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { MatrixClient } from 'matrix-js-sdk';
|
||||
import { AccountDataEvent } from '../../types/matrix/accountData';
|
||||
import { threadNotificationsAtom } from '../state/threadNotifications';
|
||||
import {
|
||||
getThreadNotificationMode,
|
||||
pruneThreadNotifications,
|
||||
ThreadNotificationEntry,
|
||||
ThreadNotificationMode,
|
||||
ThreadNotificationsContent,
|
||||
} from '../utils/threadNotifications';
|
||||
import { useMatrixClient } from './useMatrixClient';
|
||||
import { AsyncState, useAsyncCallback } from './useAsyncCallback';
|
||||
|
||||
/** Read the current notification mode for a thread from the bound atom. */
|
||||
export function useThreadNotificationMode(
|
||||
roomId: string,
|
||||
threadRootId: string,
|
||||
): ThreadNotificationMode {
|
||||
const content = useAtomValue(threadNotificationsAtom);
|
||||
return getThreadNotificationMode(content, roomId, threadRootId);
|
||||
}
|
||||
|
||||
const readContent = (mx: MatrixClient): ThreadNotificationsContent =>
|
||||
((mx as any).getAccountData(AccountDataEvent.LotusThreadNotifications)?.getContent() as
|
||||
| ThreadNotificationsContent
|
||||
| undefined) ?? {};
|
||||
|
||||
const getJoinedRoomIds = (mx: MatrixClient): Set<string> => {
|
||||
const joined = new Set<string>();
|
||||
mx.getRooms().forEach((room) => {
|
||||
if (room.getMyMembership() === 'join') {
|
||||
joined.add(room.roomId);
|
||||
}
|
||||
});
|
||||
return joined;
|
||||
};
|
||||
|
||||
const writeThreadNotificationMode = async (
|
||||
mx: MatrixClient,
|
||||
roomId: string,
|
||||
threadRootId: string,
|
||||
mode: ThreadNotificationMode,
|
||||
): Promise<void> => {
|
||||
const current = readContent(mx);
|
||||
const now = Date.now();
|
||||
|
||||
// Work on a mutable clone; prune produces a fresh object so the mutations
|
||||
// below never touch the atom's/account-data's current content.
|
||||
const next: ThreadNotificationsContent = {
|
||||
...current,
|
||||
rooms: Object.fromEntries(
|
||||
Object.entries(current.rooms ?? {}).map(([rid, entries]) => [rid, { ...entries }]),
|
||||
),
|
||||
};
|
||||
|
||||
const rooms = next.rooms as Record<string, Record<string, ThreadNotificationEntry>>;
|
||||
|
||||
if (mode === ThreadNotificationMode.Default) {
|
||||
if (rooms[roomId]) {
|
||||
delete rooms[roomId][threadRootId];
|
||||
if (Object.keys(rooms[roomId]).length === 0) {
|
||||
delete rooms[roomId];
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (!rooms[roomId]) {
|
||||
rooms[roomId] = {};
|
||||
}
|
||||
rooms[roomId][threadRootId] = { mode, ts: now };
|
||||
}
|
||||
|
||||
// ALWAYS prune before persisting to keep account data bounded.
|
||||
const finalContent = pruneThreadNotifications(next, getJoinedRoomIds(mx), now);
|
||||
|
||||
await (mx as any).setAccountData(AccountDataEvent.LotusThreadNotifications, finalContent);
|
||||
};
|
||||
|
||||
export function useSetThreadNotificationMode(
|
||||
roomId: string,
|
||||
threadRootId: string,
|
||||
): {
|
||||
modeState: AsyncState<void, Error>;
|
||||
setMode: (mode: ThreadNotificationMode) => Promise<void>;
|
||||
} {
|
||||
const mx = useMatrixClient();
|
||||
|
||||
const [modeState, setMode] = useAsyncCallback<void, Error, [ThreadNotificationMode]>(
|
||||
useCallback(
|
||||
(mode: ThreadNotificationMode) => writeThreadNotificationMode(mx, roomId, threadRootId, mode),
|
||||
[mx, roomId, threadRootId],
|
||||
),
|
||||
);
|
||||
|
||||
return { modeState, setMode };
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import {
|
||||
MatrixEvent,
|
||||
NotificationCountType,
|
||||
Room,
|
||||
RoomEvent,
|
||||
RoomEventHandlerMap,
|
||||
ThreadEvent,
|
||||
} from 'matrix-js-sdk';
|
||||
import { getThreadSummary, ThreadSummaryData } from '../features/room/thread/threadSummaryData';
|
||||
import { threadNotificationsAtom } from '../state/threadNotifications';
|
||||
import { getThreadNotificationMode, ThreadNotificationMode } from '../utils/threadNotifications';
|
||||
|
||||
/**
|
||||
* Reactive thread summary + unread count for a root event's "N replies" chip.
|
||||
*
|
||||
* Re-computes the summary on `ThreadEvent.Update` (the SDK re-emits this on the
|
||||
* root MatrixEvent) and the unread count on `RoomEvent.UnreadNotifications`.
|
||||
*/
|
||||
export const useThreadSummary = (
|
||||
rootEvent: MatrixEvent,
|
||||
room: Room,
|
||||
): { summary: ThreadSummaryData | undefined; unread: number; mode: ThreadNotificationMode } => {
|
||||
const threadId = rootEvent.getId();
|
||||
|
||||
const threadNotifications = useAtomValue(threadNotificationsAtom);
|
||||
const mode = threadId
|
||||
? getThreadNotificationMode(threadNotifications, room.roomId, threadId)
|
||||
: ThreadNotificationMode.Default;
|
||||
|
||||
const [summary, setSummary] = useState<ThreadSummaryData | undefined>(() =>
|
||||
getThreadSummary(rootEvent),
|
||||
);
|
||||
const [unread, setUnread] = useState<number>(() =>
|
||||
threadId
|
||||
? (room.getThreadUnreadNotificationCount(threadId, NotificationCountType.Total) ?? 0)
|
||||
: 0,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const refreshSummary = () => setSummary(getThreadSummary(rootEvent));
|
||||
const refreshUnread = () => {
|
||||
if (!threadId) return;
|
||||
setUnread(room.getThreadUnreadNotificationCount(threadId, NotificationCountType.Total) ?? 0);
|
||||
};
|
||||
|
||||
refreshSummary();
|
||||
refreshUnread();
|
||||
|
||||
const handleUnread: RoomEventHandlerMap[RoomEvent.UnreadNotifications] = (_counts, tId) => {
|
||||
if (tId && tId !== threadId) return;
|
||||
refreshUnread();
|
||||
};
|
||||
|
||||
rootEvent.on(ThreadEvent.Update, refreshSummary);
|
||||
room.on(RoomEvent.UnreadNotifications, handleUnread);
|
||||
return () => {
|
||||
rootEvent.removeListener(ThreadEvent.Update, refreshSummary);
|
||||
room.removeListener(RoomEvent.UnreadNotifications, handleUnread);
|
||||
};
|
||||
}, [rootEvent, room, threadId]);
|
||||
|
||||
const muted = mode === ThreadNotificationMode.Mute;
|
||||
|
||||
return { summary, unread: muted ? 0 : unread, mode };
|
||||
};
|
||||
@@ -1,7 +1,14 @@
|
||||
import { useAtomValue, useSetAtom } from 'jotai';
|
||||
import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
|
||||
import {
|
||||
MatrixEvent,
|
||||
Room,
|
||||
RoomEvent,
|
||||
RoomEventHandlerMap,
|
||||
Thread,
|
||||
ThreadEvent,
|
||||
} from 'matrix-js-sdk';
|
||||
import { focusAssistActiveAtom } from '../../state/focusAssist';
|
||||
import { roomToUnreadAtom, unreadEqual, unreadInfoToUnread } from '../../state/room/roomToUnread';
|
||||
import LogoSVG from '../../../../public/res/lotus.png';
|
||||
@@ -35,6 +42,15 @@ 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';
|
||||
import {
|
||||
getThreadNotificationMode,
|
||||
shouldNotifyThreadReply,
|
||||
THREAD_NOTIFICATIONS_FALLBACK_BEHAVIOR,
|
||||
} from '../../utils/threadNotifications';
|
||||
|
||||
function isInQuietHours(start: string, end: string): boolean {
|
||||
const now = new Date();
|
||||
@@ -198,7 +214,7 @@ function InviteNotifications() {
|
||||
]);
|
||||
|
||||
return (
|
||||
<audio ref={audioRef} style={{ display: 'none' }}>
|
||||
<audio ref={audioRef} style={{ display: 'none' }} aria-hidden="true">
|
||||
<source src={soundSrc ?? InviteSound} type="audio/ogg" />
|
||||
</audio>
|
||||
);
|
||||
@@ -212,6 +228,8 @@ function PresenceUpdater() {
|
||||
function MessageNotifications() {
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
const unreadCacheRef = useRef<Map<string, UnreadInfo>>(new Map());
|
||||
// Per-thread dedupe: threadId -> last notified eventId.
|
||||
const lastNotifiedThreadRef = useRef<Map<string, string>>(new Map());
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const [showNotifications] = useSetting(settingsAtom, 'showNotifications');
|
||||
@@ -242,6 +260,8 @@ function MessageNotifications() {
|
||||
const navigate = useNavigate();
|
||||
const notificationSelected = useInboxNotificationsSelected();
|
||||
const selectedRoomId = useSelectedRoom();
|
||||
const threadPrefs = useAtomValue(threadNotificationsAtom);
|
||||
const activeThreadId = useAtomValue(roomIdToActiveThreadIdAtomFamily(selectedRoomId ?? ''));
|
||||
|
||||
const notify = useCallback(
|
||||
({
|
||||
@@ -252,6 +272,7 @@ function MessageNotifications() {
|
||||
eventId,
|
||||
body,
|
||||
encrypted,
|
||||
threadId,
|
||||
}: {
|
||||
roomName: string;
|
||||
roomAvatar?: string;
|
||||
@@ -260,6 +281,7 @@ function MessageNotifications() {
|
||||
eventId: string;
|
||||
body?: string;
|
||||
encrypted?: boolean;
|
||||
threadId?: string;
|
||||
}) => {
|
||||
const roomPath = mDirects.has(roomId)
|
||||
? getDirectRoomPath(roomId, eventId)
|
||||
@@ -294,7 +316,9 @@ function MessageNotifications() {
|
||||
silent: true,
|
||||
// Coalesce repeated notifications for the same room (replaces the old
|
||||
// manual notifRef.close() dedup, which a SW notification can't hold).
|
||||
tag: roomId,
|
||||
// For thread replies widen the tag to room:thread so each thread
|
||||
// coalesces independently instead of clobbering the room's bucket.
|
||||
tag: threadId ? `${roomId}:${threadId}` : roomId,
|
||||
data: { path: roomPath },
|
||||
},
|
||||
() => {
|
||||
@@ -326,6 +350,69 @@ function MessageNotifications() {
|
||||
audioElement?.play();
|
||||
}, []);
|
||||
|
||||
// Shared delivery tail for both the main timeline and per-thread paths:
|
||||
// room-level unread dedup → avatar resolution → OS/toast notify → sound, all
|
||||
// behind the quiet-hours / focus-assist gate. `threadId` (when set) widens the
|
||||
// OS coalescing tag so each thread notifies independently; the click path
|
||||
// stays the room path (RoomTimeline deep-links thread events into the panel).
|
||||
const deliverNotification = useCallback(
|
||||
(room: Room, mEvent: MatrixEvent, threadId?: string) => {
|
||||
const sender = mEvent.getSender();
|
||||
const eventId = mEvent.getId();
|
||||
if (!sender || !eventId) return;
|
||||
|
||||
const unreadInfo = getUnreadInfo(room);
|
||||
const cachedUnreadInfo = unreadCacheRef.current.get(room.roomId);
|
||||
unreadCacheRef.current.set(room.roomId, unreadInfo);
|
||||
|
||||
if (unreadInfo.total === 0) return;
|
||||
if (
|
||||
cachedUnreadInfo &&
|
||||
unreadEqual(unreadInfoToUnread(cachedUnreadInfo), unreadInfoToUnread(unreadInfo))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const quietActive =
|
||||
focusAssistActive || (quietHoursEnabled && isInQuietHours(quietHoursStart, quietHoursEnd));
|
||||
if (quietActive) return;
|
||||
|
||||
if (showNotifications && notificationPermission('granted')) {
|
||||
const avatarMxc =
|
||||
room.getAvatarFallbackMember()?.getMxcAvatarUrl() ?? room.getMxcAvatarUrl();
|
||||
notify({
|
||||
roomName: room.name ?? 'Unknown',
|
||||
roomAvatar: avatarMxc
|
||||
? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined)
|
||||
: undefined,
|
||||
username: getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender,
|
||||
roomId: room.roomId,
|
||||
eventId,
|
||||
body: (mEvent.getContent().body as string | undefined) ?? '',
|
||||
encrypted: room.hasEncryptionStateEvent(),
|
||||
threadId,
|
||||
});
|
||||
}
|
||||
|
||||
if (notificationSound && messageSoundId !== 'none') {
|
||||
playSound();
|
||||
}
|
||||
},
|
||||
[
|
||||
mx,
|
||||
notify,
|
||||
playSound,
|
||||
showNotifications,
|
||||
notificationSound,
|
||||
useAuthentication,
|
||||
quietHoursEnabled,
|
||||
quietHoursStart,
|
||||
quietHoursEnd,
|
||||
focusAssistActive,
|
||||
messageSoundId,
|
||||
],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleTimelineEvent: RoomEventHandlerMap[RoomEvent.Timeline] = (
|
||||
mEvent,
|
||||
@@ -349,64 +436,68 @@ function MessageNotifications() {
|
||||
const sender = mEvent.getSender();
|
||||
const eventId = mEvent.getId();
|
||||
if (!sender || !eventId || mEvent.getSender() === mx.getUserId()) return;
|
||||
const unreadInfo = getUnreadInfo(room);
|
||||
const cachedUnreadInfo = unreadCacheRef.current.get(room.roomId);
|
||||
unreadCacheRef.current.set(room.roomId, unreadInfo);
|
||||
// Single-owner rule: thread replies are delivered by the ThreadEvent.NewReply
|
||||
// handler below (per-thread gating), so ignore them here — a reply notifies once.
|
||||
if (mEvent.threadRootId && mEvent.getId() !== mEvent.threadRootId) return;
|
||||
|
||||
if (unreadInfo.total === 0) return;
|
||||
if (
|
||||
cachedUnreadInfo &&
|
||||
unreadEqual(unreadInfoToUnread(cachedUnreadInfo), unreadInfoToUnread(unreadInfo))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const quietActive =
|
||||
focusAssistActive || (quietHoursEnabled && isInQuietHours(quietHoursStart, quietHoursEnd));
|
||||
if (!quietActive) {
|
||||
if (showNotifications && notificationPermission('granted')) {
|
||||
const avatarMxc =
|
||||
room.getAvatarFallbackMember()?.getMxcAvatarUrl() ?? room.getMxcAvatarUrl();
|
||||
notify({
|
||||
roomName: room.name ?? 'Unknown',
|
||||
roomAvatar: avatarMxc
|
||||
? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined)
|
||||
: undefined,
|
||||
username: getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender,
|
||||
roomId: room.roomId,
|
||||
eventId,
|
||||
body: (mEvent.getContent().body as string | undefined) ?? '',
|
||||
encrypted: room.hasEncryptionStateEvent(),
|
||||
});
|
||||
}
|
||||
|
||||
if (notificationSound && messageSoundId !== 'none') {
|
||||
playSound();
|
||||
}
|
||||
}
|
||||
deliverNotification(room, mEvent);
|
||||
};
|
||||
mx.on(RoomEvent.Timeline, handleTimelineEvent);
|
||||
return () => {
|
||||
mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
|
||||
};
|
||||
}, [
|
||||
mx,
|
||||
notificationSound,
|
||||
notificationSelected,
|
||||
showNotifications,
|
||||
playSound,
|
||||
notify,
|
||||
selectedRoomId,
|
||||
useAuthentication,
|
||||
quietHoursEnabled,
|
||||
quietHoursStart,
|
||||
quietHoursEnd,
|
||||
focusAssistActive,
|
||||
messageSoundId,
|
||||
]);
|
||||
}, [mx, notificationSelected, selectedRoomId, deliverNotification]);
|
||||
|
||||
const handleNewReply = useCallback(
|
||||
// useRoomsListener prepends the emitting Room; the thread's own room lookup
|
||||
// below is kept as the authority (identical object in practice).
|
||||
(_room: Room, thread: Thread, mEvent: MatrixEvent) => {
|
||||
if (mx.getSyncState() !== 'SYNCING') return;
|
||||
const room = mx.getRoom(thread.roomId);
|
||||
if (!room || room.isSpaceRoom()) return;
|
||||
if (!isNotificationEvent(mEvent) || mEvent.isSending()) return;
|
||||
const sender = mEvent.getSender();
|
||||
if (!sender || sender === mx.getUserId()) return;
|
||||
// Suppress when the user is actively looking at this thread (or the inbox).
|
||||
if (
|
||||
document.hasFocus() &&
|
||||
(notificationSelected || (selectedRoomId === thread.roomId && activeThreadId === thread.id))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Per-thread dedupe: a NewReply can re-fire for the same event as the
|
||||
// thread (re)populates; notify at most once per (thread, event).
|
||||
const eventId = mEvent.getId();
|
||||
if (eventId) {
|
||||
if (lastNotifiedThreadRef.current.get(thread.id) === eventId) return;
|
||||
lastNotifiedThreadRef.current.set(thread.id, eventId);
|
||||
}
|
||||
|
||||
const content = threadPrefs;
|
||||
const mode = getThreadNotificationMode(content, room.roomId, thread.id);
|
||||
const actions = mx.getPushActionsForEvent(mEvent);
|
||||
const decision = shouldNotifyThreadReply({
|
||||
mode,
|
||||
defaultBehavior: content.default ?? THREAD_NOTIFICATIONS_FALLBACK_BEHAVIOR,
|
||||
participated: thread.hasCurrentUserParticipated,
|
||||
highlight: !!actions?.tweaks?.highlight,
|
||||
notify: !!actions?.notify,
|
||||
roomMuted: getNotificationType(mx, room.roomId) === NotificationType.Mute,
|
||||
});
|
||||
if (decision === 'none') return;
|
||||
|
||||
// E2EE caveat: NewReply can fire before decryption, so MentionsOnly may
|
||||
// under-notify in encrypted rooms (same class as the main timeline path).
|
||||
// Plaintext body suppression for encrypted rooms is handled inside notify().
|
||||
deliverNotification(room, mEvent, thread.id);
|
||||
},
|
||||
[mx, notificationSelected, selectedRoomId, activeThreadId, threadPrefs, deliverNotification],
|
||||
);
|
||||
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>
|
||||
);
|
||||
@@ -552,6 +643,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 (
|
||||
<>
|
||||
@@ -566,6 +664,7 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
|
||||
<TauriDesktopFeatures />
|
||||
<LotusDenoiseFeature />
|
||||
<DeepLinkNavigator />
|
||||
<KeyboardShortcutsFeature />
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -43,8 +43,15 @@ import { stopPropagation } from '../../utils/keyboard';
|
||||
import { SyncStatus } from './SyncStatus';
|
||||
import { AuthMetadataProvider } from '../../hooks/useAuthMetadata';
|
||||
import { getFallbackSession, removeFallbackSession } from '../../state/sessions';
|
||||
import { useSessionSync } from '../../hooks/useSessionSync';
|
||||
import { installCryptoDiagLog } from '../../utils/cryptoDiagLog';
|
||||
import { AutoDiscovery } from './AutoDiscovery';
|
||||
|
||||
// Capture-only E2EE diagnostics ring buffer (KE-1→4 signatures) — installed at
|
||||
// module load so it sees crypto warnings from the very first sync. Idempotent;
|
||||
// report download lives in Settings → Developer Tools → Crypto Diagnostics.
|
||||
installCryptoDiagLog();
|
||||
|
||||
function ClientRootLoading() {
|
||||
return (
|
||||
<SplashScreen>
|
||||
@@ -178,6 +185,9 @@ export function ClientRoot({ children }: ClientRootProps) {
|
||||
);
|
||||
|
||||
useLogoutListener(mx);
|
||||
// Cross-tab session sync: another tab logging out / in (access token changed
|
||||
// in localStorage) reloads this tab so it never runs with stale credentials.
|
||||
useSessionSync();
|
||||
|
||||
useEffect(() => {
|
||||
if (loadState.status === AsyncStatus.Idle) {
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
|
||||
@@ -43,9 +43,14 @@ import { onEnterOrSpace } from '../utils/keyboard';
|
||||
import { copyToClipboard, tryDecodeURIComponent } from '../utils/dom';
|
||||
import { useTimeoutToggle } from '../hooks/useTimeoutToggle';
|
||||
import { tokenize, tokenStyle } from '../utils/syntaxHighlight';
|
||||
import { splitMathSegments } from '../utils/mathParse';
|
||||
|
||||
const ReactPrism = lazy(() => import('./react-prism/ReactPrism'));
|
||||
|
||||
// KaTeX (and its CSS) is heavy, so it is code-split behind this dynamic import
|
||||
// and is NOT part of the eager import graph — see src/app/components/math/KaTeX.tsx.
|
||||
const KaTeXMath = lazy(() => import('../components/math/KaTeX'));
|
||||
|
||||
/** Languages handled by the custom TDS tokenizer. */
|
||||
const TDS_TOKENIZER_LANGS = new Set([
|
||||
'js',
|
||||
@@ -78,6 +83,27 @@ function renderTokenizedCode(code: string, lang: string): React.ReactNode {
|
||||
));
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders LaTeX via the lazily-loaded KaTeX component.
|
||||
*
|
||||
* `suspenseFallback` is shown while the KaTeX chunk loads (the raw LaTeX text).
|
||||
* `errorFallback` is shown if rendering fails outright — for the spec
|
||||
* `data-mx-maths` path this is the element's original children (the spec
|
||||
* fallback content); for the plain-text `$…$` path it is the raw source.
|
||||
*/
|
||||
const renderMath = (
|
||||
latex: string,
|
||||
displayMode: boolean,
|
||||
suspenseFallback: React.ReactNode,
|
||||
errorFallback: React.ReactNode,
|
||||
): JSX.Element => (
|
||||
<ErrorBoundary fallback={<>{errorFallback}</>}>
|
||||
<Suspense fallback={<>{suspenseFallback}</>}>
|
||||
<KaTeXMath latex={latex} displayMode={displayMode} />
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
||||
const EMOJI_REG_G = new RegExp(`${URL_NEG_LB}(${EMOJI_PATTERN})`, 'g');
|
||||
|
||||
export const LINKIFY_OPTS: LinkifyOpts = {
|
||||
@@ -203,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,
|
||||
);
|
||||
|
||||
@@ -503,6 +537,21 @@ export const getReactCustomHtmlParser = (
|
||||
if (mention) return mention;
|
||||
}
|
||||
|
||||
if ((name === 'span' || name === 'div') && 'data-mx-maths' in props) {
|
||||
// Spec (CS-API §11.5): render the `data-mx-maths` LaTeX with KaTeX
|
||||
// (block for <div>, inline for <span>). On failure fall back to the
|
||||
// element's existing children, which the spec defines as the fallback
|
||||
// representation.
|
||||
const latex = String(props['data-mx-maths']);
|
||||
const displayMode = name === 'div';
|
||||
const fallback = displayMode ? (
|
||||
<div {...props}>{domToReact(children as unknown as DOMNode[], opts)}</div>
|
||||
) : (
|
||||
<span {...props}>{domToReact(children as unknown as DOMNode[], opts)}</span>
|
||||
);
|
||||
return renderMath(latex, displayMode, latex, fallback);
|
||||
}
|
||||
|
||||
if (name === 'span' && 'data-mx-spoiler' in props) {
|
||||
return (
|
||||
<span
|
||||
@@ -533,33 +582,71 @@ 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" />;
|
||||
}
|
||||
}
|
||||
|
||||
if (domNode instanceof DOMText) {
|
||||
const linkify =
|
||||
!(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'code') &&
|
||||
!(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'a');
|
||||
const parentName =
|
||||
domNode.parent && 'name' in domNode.parent ? domNode.parent.name : undefined;
|
||||
const linkify = parentName !== 'code' && parentName !== 'a';
|
||||
// Never parse `$…$`/`$$…$$` math inside <pre>/<code> (verbatim regions).
|
||||
const mathAllowed = parentName !== 'code' && parentName !== 'pre';
|
||||
|
||||
let jsx = scaleSystemEmoji(domNode.data);
|
||||
const renderTextChunk = (text: string): (string | JSX.Element)[] | JSX.Element => {
|
||||
let jsx = scaleSystemEmoji(text);
|
||||
if (params.highlightRegex) {
|
||||
jsx = highlightText(params.highlightRegex, jsx);
|
||||
}
|
||||
if (linkify) {
|
||||
return <Linkify options={params.linkifyOpts}>{jsx}</Linkify>;
|
||||
}
|
||||
return jsx;
|
||||
};
|
||||
|
||||
if (params.highlightRegex) {
|
||||
jsx = highlightText(params.highlightRegex, jsx);
|
||||
if (mathAllowed) {
|
||||
const segments = splitMathSegments(domNode.data);
|
||||
if (segments.some((segment) => segment.type !== 'text')) {
|
||||
return (
|
||||
<>
|
||||
{segments.map((segment, index) => {
|
||||
if (segment.type === 'text') {
|
||||
return (
|
||||
<React.Fragment key={index}>{renderTextChunk(segment.value)}</React.Fragment>
|
||||
);
|
||||
}
|
||||
const raw =
|
||||
segment.type === 'block' ? `$$${segment.value}$$` : `$${segment.value}$`;
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
{renderMath(segment.value, segment.type === 'block', raw, raw)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (linkify) {
|
||||
return <Linkify options={params.linkifyOpts}>{jsx}</Linkify>;
|
||||
}
|
||||
return jsx;
|
||||
return renderTextChunk(domNode.data);
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
|
||||
@@ -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,58 @@
|
||||
import { SoundboardClip, SoundboardClipInfo } from './types';
|
||||
|
||||
/** Parallels custom-emoji/PackImageReader, for a soundboard clip. */
|
||||
export class SoundboardClipReader {
|
||||
public readonly shortcode: string;
|
||||
|
||||
public readonly url: string;
|
||||
|
||||
private readonly clip: Omit<SoundboardClip, 'url'>;
|
||||
|
||||
constructor(shortcode: string, url: string, clip: Omit<SoundboardClip, 'url'>) {
|
||||
this.shortcode = shortcode;
|
||||
this.url = url;
|
||||
this.clip = clip;
|
||||
}
|
||||
|
||||
static fromClip(shortcode: string, clip: SoundboardClip): SoundboardClipReader | undefined {
|
||||
const { url } = clip;
|
||||
if (typeof url !== 'string' || !url.startsWith('mxc://')) return undefined;
|
||||
return new SoundboardClipReader(shortcode, url, clip);
|
||||
}
|
||||
|
||||
get body(): string | undefined {
|
||||
const { body } = this.clip;
|
||||
return typeof body === 'string' ? body : undefined;
|
||||
}
|
||||
|
||||
/** Display name — the clip body, falling back to the shortcode. */
|
||||
get name(): string {
|
||||
return this.body ?? this.shortcode;
|
||||
}
|
||||
|
||||
get emoji(): string | undefined {
|
||||
const { emoji } = this.clip;
|
||||
return typeof emoji === 'string' && emoji.length > 0 ? emoji : undefined;
|
||||
}
|
||||
|
||||
/** Per-clip volume 0–100; defaults to 100 when unset/invalid. */
|
||||
get volume(): number {
|
||||
const v = this.clip.volume;
|
||||
if (typeof v !== 'number' || Number.isNaN(v)) return 100;
|
||||
return Math.min(100, Math.max(0, v));
|
||||
}
|
||||
|
||||
get info(): SoundboardClipInfo | undefined {
|
||||
return this.clip.info;
|
||||
}
|
||||
|
||||
get content(): SoundboardClip {
|
||||
return {
|
||||
url: this.url,
|
||||
body: this.clip.body,
|
||||
emoji: this.clip.emoji,
|
||||
volume: this.clip.volume,
|
||||
info: this.clip.info,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { SoundboardClipReader } from './SoundboardClipReader';
|
||||
import { SoundboardClips } from './types';
|
||||
|
||||
/** Parallels custom-emoji/PackImagesReader. */
|
||||
export class SoundboardClipsReader {
|
||||
private readonly rawClips: SoundboardClips;
|
||||
|
||||
private shortcodeToClips: Map<string, SoundboardClipReader> | undefined;
|
||||
|
||||
constructor(clips: SoundboardClips) {
|
||||
this.rawClips = clips;
|
||||
}
|
||||
|
||||
get collection(): Map<string, SoundboardClipReader> {
|
||||
if (this.shortcodeToClips) return this.shortcodeToClips;
|
||||
|
||||
const shortcodeToClips: Map<string, SoundboardClipReader> = new Map();
|
||||
Object.entries(this.rawClips).forEach(([shortcode, clip]) => {
|
||||
const reader = SoundboardClipReader.fromClip(shortcode, clip);
|
||||
if (reader) shortcodeToClips.set(shortcode, reader);
|
||||
});
|
||||
|
||||
this.shortcodeToClips = shortcodeToClips;
|
||||
return this.shortcodeToClips;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { SoundboardMeta } from './types';
|
||||
|
||||
/** Parallels custom-emoji/PackMetaReader (no usage tiers for soundboard). */
|
||||
export class SoundboardMetaReader {
|
||||
private readonly meta: SoundboardMeta;
|
||||
|
||||
constructor(meta: SoundboardMeta) {
|
||||
this.meta = meta;
|
||||
}
|
||||
|
||||
get name(): string | undefined {
|
||||
const displayName = this.meta.display_name;
|
||||
return typeof displayName === 'string' ? displayName : undefined;
|
||||
}
|
||||
|
||||
get avatar(): string | undefined {
|
||||
const avatarURL = this.meta.avatar_url;
|
||||
return typeof avatarURL === 'string' ? avatarURL : undefined;
|
||||
}
|
||||
|
||||
get attribution(): string | undefined {
|
||||
const { attribution } = this.meta;
|
||||
return typeof attribution === 'string' ? attribution : undefined;
|
||||
}
|
||||
|
||||
get content(): SoundboardMeta {
|
||||
return this.meta;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { MatrixEvent } from 'matrix-js-sdk';
|
||||
import { PackAddress } from '../custom-emoji/PackAddress';
|
||||
import { SoundboardClipReader } from './SoundboardClipReader';
|
||||
import { SoundboardClipsReader } from './SoundboardClipsReader';
|
||||
import { SoundboardMetaReader } from './SoundboardMetaReader';
|
||||
import { SoundboardContent } from './types';
|
||||
|
||||
/** Parallels custom-emoji/ImagePack. Holds a soundboard pack's meta + clips. */
|
||||
export class SoundboardPack {
|
||||
public readonly id: string;
|
||||
|
||||
public readonly deleted: boolean;
|
||||
|
||||
public readonly address: PackAddress | undefined;
|
||||
|
||||
public readonly meta: SoundboardMetaReader;
|
||||
|
||||
public readonly clips: SoundboardClipsReader;
|
||||
|
||||
private clipsMemo: SoundboardClipReader[] | undefined;
|
||||
|
||||
constructor(id: string, content: SoundboardContent, address: PackAddress | undefined) {
|
||||
this.id = id;
|
||||
this.address = address;
|
||||
this.deleted = content.pack === undefined && content.clips === undefined;
|
||||
this.meta = new SoundboardMetaReader(content.pack ?? {});
|
||||
this.clips = new SoundboardClipsReader(content.clips ?? {});
|
||||
}
|
||||
|
||||
static fromMatrixEvent(id: string, matrixEvent: MatrixEvent): SoundboardPack {
|
||||
const roomId = matrixEvent.getRoomId();
|
||||
const stateKey = matrixEvent.getStateKey();
|
||||
const address =
|
||||
roomId && typeof stateKey === 'string' ? new PackAddress(roomId, stateKey) : undefined;
|
||||
return new SoundboardPack(id, matrixEvent.getContent<SoundboardContent>(), address);
|
||||
}
|
||||
|
||||
getClips(): SoundboardClipReader[] {
|
||||
if (this.clipsMemo) return this.clipsMemo;
|
||||
this.clipsMemo = Array.from(this.clips.collection.values());
|
||||
return this.clipsMemo;
|
||||
}
|
||||
|
||||
getAvatarUrl(): string | undefined {
|
||||
if (this.meta.avatar) return this.meta.avatar;
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export * from './types';
|
||||
export * from './SoundboardClipReader';
|
||||
export * from './SoundboardClipsReader';
|
||||
export * from './SoundboardMetaReader';
|
||||
export * from './SoundboardPack';
|
||||
export * from './utils';
|
||||
@@ -0,0 +1,52 @@
|
||||
// [P5-15 v2] Soundboard packs — a near-parallel of the MSC2545 custom-emoji
|
||||
// image packs (see ../custom-emoji/types.ts), for shareable in-call audio clips.
|
||||
|
||||
/** io.lotus.soundboard_rooms content (global refs) — mirrors EmoteRoomsContent. */
|
||||
export type SoundboardPackStateKeyToObject = Record<string, object>;
|
||||
export type SoundboardRoomIdToStateKey = Record<string, SoundboardPackStateKeyToObject>;
|
||||
export type SoundboardRoomsContent = {
|
||||
rooms?: SoundboardRoomIdToStateKey;
|
||||
};
|
||||
|
||||
/** Per-clip media info (audio, so no width/height — unlike IImageInfo). */
|
||||
export type SoundboardClipInfo = {
|
||||
mimetype?: string;
|
||||
size?: number;
|
||||
/** Clip duration in milliseconds, if known. */
|
||||
duration?: number;
|
||||
};
|
||||
|
||||
/** A single soundboard clip (parallels PackImage). Keyed by shortcode in the pack. */
|
||||
export type SoundboardClip = {
|
||||
url: string; // mxc://
|
||||
body?: string; // display name
|
||||
emoji?: string; // emoji tag (like a Discord soundboard emoji)
|
||||
volume?: number; // 0–100, per-clip gain
|
||||
info?: SoundboardClipInfo;
|
||||
};
|
||||
|
||||
export type SoundboardClips = Record<string, SoundboardClip>;
|
||||
|
||||
export type SoundboardMeta = {
|
||||
display_name?: string;
|
||||
avatar_url?: string;
|
||||
attribution?: string;
|
||||
};
|
||||
|
||||
/** io.lotus.soundboard (user account data) + io.lotus.soundboard (room state). */
|
||||
export type SoundboardContent = {
|
||||
pack?: SoundboardMeta;
|
||||
clips?: SoundboardClips;
|
||||
};
|
||||
|
||||
/** Legacy v1 personal soundboard shape (flat list), migrated to a pack on read. */
|
||||
export type LegacySoundboardClip = {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
mimetype?: string;
|
||||
size?: number;
|
||||
};
|
||||
export type LegacySoundboardContent = {
|
||||
clips?: LegacySoundboardClip[];
|
||||
};
|
||||
@@ -0,0 +1,68 @@
|
||||
import { describe, test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { migrateUserSoundboardContent, slugifyClipName, uniqueShortcode } from './utils';
|
||||
|
||||
describe('slugifyClipName', () => {
|
||||
test('lowercases, replaces spaces, strips punctuation', () => {
|
||||
assert.equal(slugifyClipName(' Air Horn!! '), 'air_horn');
|
||||
assert.equal(slugifyClipName('Ba-Dum Tss'), 'ba-dum_tss');
|
||||
});
|
||||
test('falls back to "clip" when empty', () => {
|
||||
assert.equal(slugifyClipName(' '), 'clip');
|
||||
assert.equal(slugifyClipName('!!!'), 'clip');
|
||||
});
|
||||
});
|
||||
|
||||
describe('uniqueShortcode', () => {
|
||||
test('returns the slug when free', () => {
|
||||
assert.equal(uniqueShortcode('Airhorn', new Set()), 'airhorn');
|
||||
});
|
||||
test('suffixes on collision', () => {
|
||||
assert.equal(uniqueShortcode('Airhorn', new Set(['airhorn'])), 'airhorn-2');
|
||||
assert.equal(uniqueShortcode('Airhorn', new Set(['airhorn', 'airhorn-2'])), 'airhorn-3');
|
||||
});
|
||||
});
|
||||
|
||||
describe('migrateUserSoundboardContent', () => {
|
||||
test('migrates the v1 flat list into a v2 pack keyed by slug', () => {
|
||||
const v1 = {
|
||||
clips: [
|
||||
{ id: 'a', name: 'Air Horn', url: 'mxc://x/1', mimetype: 'audio/mpeg', size: 100 },
|
||||
{ id: 'b', name: 'Applause', url: 'mxc://x/2' },
|
||||
],
|
||||
};
|
||||
const out = migrateUserSoundboardContent(v1);
|
||||
assert.deepEqual(Object.keys(out.clips ?? {}).sort(), ['air_horn', 'applause']);
|
||||
assert.equal(out.clips?.air_horn.url, 'mxc://x/1');
|
||||
assert.equal(out.clips?.air_horn.body, 'Air Horn');
|
||||
assert.equal(out.clips?.air_horn.info?.mimetype, 'audio/mpeg');
|
||||
assert.ok(out.pack?.display_name);
|
||||
});
|
||||
|
||||
test('dedupes colliding v1 names', () => {
|
||||
const v1 = {
|
||||
clips: [
|
||||
{ id: 'a', name: 'Horn', url: 'mxc://x/1' },
|
||||
{ id: 'b', name: 'Horn', url: 'mxc://x/2' },
|
||||
],
|
||||
};
|
||||
const out = migrateUserSoundboardContent(v1);
|
||||
assert.deepEqual(Object.keys(out.clips ?? {}).sort(), ['horn', 'horn-2']);
|
||||
});
|
||||
|
||||
test('skips v1 entries without a url', () => {
|
||||
const out = migrateUserSoundboardContent({ clips: [{ id: 'a', name: 'Bad' } as never] });
|
||||
assert.deepEqual(out.clips, {});
|
||||
});
|
||||
|
||||
test('passes a v2 pack through unchanged', () => {
|
||||
const v2 = { pack: { display_name: 'P' }, clips: { horn: { url: 'mxc://x/1', volume: 50 } } };
|
||||
assert.deepEqual(migrateUserSoundboardContent(v2), v2);
|
||||
});
|
||||
|
||||
test('handles empty / non-object input', () => {
|
||||
assert.deepEqual(migrateUserSoundboardContent({}), {});
|
||||
assert.deepEqual(migrateUserSoundboardContent(null), {});
|
||||
assert.deepEqual(migrateUserSoundboardContent(undefined), {});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,103 @@
|
||||
import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
|
||||
import { SoundboardPack } from './SoundboardPack';
|
||||
import {
|
||||
LegacySoundboardContent,
|
||||
SoundboardClips,
|
||||
SoundboardContent,
|
||||
SoundboardRoomsContent,
|
||||
} from './types';
|
||||
import { StateEvent } from '../../../types/matrix/room';
|
||||
import { AccountDataEvent } from '../../../types/matrix/accountData';
|
||||
import { getAccountData, getStateEvent, getStateEvents } from '../../utils/room';
|
||||
|
||||
/** Normalize a display name into a pack shortcode key (parallels emoji shortcodes). */
|
||||
export function slugifyClipName(name: string): string {
|
||||
const s = name
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '_')
|
||||
.replace(/[^a-z0-9_-]/g, '');
|
||||
return s || 'clip';
|
||||
}
|
||||
|
||||
/** Pick a shortcode not already present in `taken`, suffixing on collision. */
|
||||
export function uniqueShortcode(base: string, taken: Set<string>): string {
|
||||
const code = slugifyClipName(base);
|
||||
if (!taken.has(code)) return code;
|
||||
let i = 2;
|
||||
while (taken.has(`${code}-${i}`)) i += 1;
|
||||
return `${code}-${i}`;
|
||||
}
|
||||
|
||||
export function makeSoundboardPacks(packEvents: MatrixEvent[]): SoundboardPack[] {
|
||||
return packEvents.reduce<SoundboardPack[]>((packs, packEvent) => {
|
||||
const packId = packEvent.getId();
|
||||
if (!packId) return packs;
|
||||
packs.push(SoundboardPack.fromMatrixEvent(packId, packEvent));
|
||||
return packs;
|
||||
}, []);
|
||||
}
|
||||
|
||||
export function getRoomSoundboardPack(room: Room, stateKey: string): SoundboardPack | undefined {
|
||||
const packEvent = getStateEvent(room, StateEvent.LotusSoundboardRoom, stateKey);
|
||||
if (!packEvent) return undefined;
|
||||
const packId = packEvent.getId();
|
||||
if (!packId) return undefined;
|
||||
return SoundboardPack.fromMatrixEvent(packId, packEvent);
|
||||
}
|
||||
|
||||
export function getRoomSoundboardPacks(room: Room): SoundboardPack[] {
|
||||
return makeSoundboardPacks(getStateEvents(room, StateEvent.LotusSoundboardRoom));
|
||||
}
|
||||
|
||||
export function getGlobalSoundboardPacks(mx: MatrixClient): SoundboardPack[] {
|
||||
const content = getAccountData(mx, AccountDataEvent.LotusSoundboardRooms)?.getContent() as
|
||||
| SoundboardRoomsContent
|
||||
| undefined;
|
||||
const roomIdToPackInfo = content?.rooms;
|
||||
if (typeof roomIdToPackInfo !== 'object' || !roomIdToPackInfo) return [];
|
||||
|
||||
return Object.keys(roomIdToPackInfo).flatMap((roomId) => {
|
||||
if (typeof roomIdToPackInfo[roomId] !== 'object') return [];
|
||||
const room = mx.getRoom(roomId);
|
||||
if (!room) return [];
|
||||
const stateKeys = roomIdToPackInfo[roomId];
|
||||
const globalEvents = getStateEvents(room, StateEvent.LotusSoundboardRoom).filter((mE) => {
|
||||
const stateKey = mE.getStateKey();
|
||||
return typeof stateKey === 'string' ? !!stateKeys[stateKey] : false;
|
||||
});
|
||||
return makeSoundboardPacks(globalEvents);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a personal soundboard account-data content to the v2 pack shape,
|
||||
* migrating the v1 flat-list form (`{clips: [{id,name,url}]}`) on the fly.
|
||||
*/
|
||||
export function migrateUserSoundboardContent(raw: unknown): SoundboardContent {
|
||||
if (typeof raw !== 'object' || raw === null) return {};
|
||||
const legacy = raw as LegacySoundboardContent;
|
||||
if (!Array.isArray(legacy.clips)) return raw as SoundboardContent; // already v2 (or empty)
|
||||
|
||||
const clips: SoundboardClips = {};
|
||||
const taken = new Set<string>();
|
||||
legacy.clips.forEach((c) => {
|
||||
if (!c || typeof c.url !== 'string') return;
|
||||
const shortcode = uniqueShortcode(c.name || 'clip', taken);
|
||||
taken.add(shortcode);
|
||||
clips[shortcode] = {
|
||||
url: c.url,
|
||||
body: c.name,
|
||||
info: { mimetype: c.mimetype, size: c.size },
|
||||
};
|
||||
});
|
||||
return { pack: { display_name: 'My Soundboard' }, clips };
|
||||
}
|
||||
|
||||
export function getUserSoundboardPack(mx: MatrixClient): SoundboardPack | undefined {
|
||||
const packEvent = getAccountData(mx, AccountDataEvent.LotusSoundboard);
|
||||
const userId = mx.getUserId();
|
||||
if (!packEvent || !userId) return undefined;
|
||||
const content = migrateUserSoundboardContent(packEvent.getContent());
|
||||
return new SoundboardPack(userId, content, undefined);
|
||||
}
|
||||
@@ -5,12 +5,14 @@ import { mDirectAtom, useBindMDirectAtom } from '../mDirectList';
|
||||
import { roomToUnreadAtom, useBindRoomToUnreadAtom } from '../room/roomToUnread';
|
||||
import { roomToParentsAtom, useBindRoomToParentsAtom } from '../room/roomToParents';
|
||||
import { roomIdToTypingMembersAtom, useBindRoomIdToTypingMembersAtom } from '../typingMembers';
|
||||
import { threadNotificationsAtom, useBindThreadNotificationsAtom } from '../threadNotifications';
|
||||
|
||||
export const useBindAtoms = (mx: MatrixClient) => {
|
||||
useBindMDirectAtom(mx, mDirectAtom);
|
||||
useBindAllInvitesAtom(mx, allInvitesAtom);
|
||||
useBindAllRoomsAtom(mx, allRoomsAtom);
|
||||
useBindRoomToParentsAtom(mx, roomToParentsAtom);
|
||||
useBindThreadNotificationsAtom(mx, threadNotificationsAtom);
|
||||
useBindRoomToUnreadAtom(mx, roomToUnreadAtom);
|
||||
|
||||
useBindRoomIdToTypingMembersAtom(mx, roomIdToTypingMembersAtom);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { produce } from 'immer';
|
||||
import { atom, useSetAtom } from 'jotai';
|
||||
import { atom, useAtomValue, useSetAtom } from 'jotai';
|
||||
import {
|
||||
IRoomTimelineData,
|
||||
MatrixClient,
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
SyncState,
|
||||
} from 'matrix-js-sdk';
|
||||
import { ReceiptContent, ReceiptType } from 'matrix-js-sdk/lib/@types/read_receipts';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import {
|
||||
Membership,
|
||||
NotificationType,
|
||||
@@ -29,6 +29,9 @@ import { roomToParentsAtom } from './roomToParents';
|
||||
import { useStateEventCallback } from '../../hooks/useStateEventCallback';
|
||||
import { useSyncState } from '../../hooks/useSyncState';
|
||||
import { useRoomsNotificationPreferencesContext } from '../../hooks/useRoomsNotificationPreferences';
|
||||
import { useRoomsListener } from '../../hooks/useRoomsListener';
|
||||
import { threadNotificationsAtom } from '../threadNotifications';
|
||||
import { getMutedThreads } from '../../utils/threadNotifications';
|
||||
|
||||
export type RoomToUnreadAction =
|
||||
| {
|
||||
@@ -169,11 +172,17 @@ export const roomToUnreadAtom = atom<RoomToUnread, [RoomToUnreadAction], undefin
|
||||
export const useBindRoomToUnreadAtom = (mx: MatrixClient, unreadAtom: typeof roomToUnreadAtom) => {
|
||||
const setUnreadAtom = useSetAtom(unreadAtom);
|
||||
const roomsNotificationPreferences = useRoomsNotificationPreferencesContext();
|
||||
const threadNotifications = useAtomValue(threadNotificationsAtom);
|
||||
// Latest thread-notification prefs for the SDK-event handlers below, read via a
|
||||
// ref so changing prefs never re-attaches the (many) per-room listeners. The
|
||||
// dedicated reset effect keyed on `threadNotifications` handles mute/unmute.
|
||||
const threadNotificationsRef = useRef(threadNotifications);
|
||||
threadNotificationsRef.current = threadNotifications;
|
||||
|
||||
useEffect(() => {
|
||||
setUnreadAtom({
|
||||
type: 'RESET',
|
||||
unreadInfos: getUnreadInfos(mx),
|
||||
unreadInfos: getUnreadInfos(mx, threadNotificationsRef.current),
|
||||
});
|
||||
}, [mx, setUnreadAtom]);
|
||||
|
||||
@@ -187,7 +196,7 @@ export const useBindRoomToUnreadAtom = (mx: MatrixClient, unreadAtom: typeof roo
|
||||
) {
|
||||
setUnreadAtom({
|
||||
type: 'RESET',
|
||||
unreadInfos: getUnreadInfos(mx),
|
||||
unreadInfos: getUnreadInfos(mx, threadNotificationsRef.current),
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -204,6 +213,10 @@ export const useBindRoomToUnreadAtom = (mx: MatrixClient, unreadAtom: typeof roo
|
||||
data: IRoomTimelineData,
|
||||
) => {
|
||||
if (!room || !data.liveEvent || room.isSpaceRoom() || !isNotificationEvent(mEvent)) return;
|
||||
// Single-owner rule: thread replies drive the room badge via
|
||||
// RoomEvent.UnreadNotifications below — ignore them here so the count is
|
||||
// never double-driven / mis-attributed to the main timeline.
|
||||
if (mEvent.threadRootId && mEvent.getId() !== mEvent.threadRootId) return;
|
||||
if (getNotificationType(mx, room.roomId) === NotificationType.Mute) {
|
||||
setUnreadAtom({
|
||||
type: 'DELETE',
|
||||
@@ -213,7 +226,13 @@ export const useBindRoomToUnreadAtom = (mx: MatrixClient, unreadAtom: typeof roo
|
||||
}
|
||||
|
||||
if (mEvent.getSender() === mx.getUserId()) return;
|
||||
setUnreadAtom({ type: 'PUT', unreadInfo: getUnreadInfo(room) });
|
||||
setUnreadAtom({
|
||||
type: 'PUT',
|
||||
unreadInfo: getUnreadInfo(
|
||||
room,
|
||||
getMutedThreads(threadNotificationsRef.current, room.roomId),
|
||||
),
|
||||
});
|
||||
};
|
||||
mx.on(RoomEvent.Timeline, handleTimelineEvent);
|
||||
return () => {
|
||||
@@ -246,10 +265,48 @@ export const useBindRoomToUnreadAtom = (mx: MatrixClient, unreadAtom: typeof roo
|
||||
useEffect(() => {
|
||||
setUnreadAtom({
|
||||
type: 'RESET',
|
||||
unreadInfos: getUnreadInfos(mx),
|
||||
unreadInfos: getUnreadInfos(mx, threadNotificationsRef.current),
|
||||
});
|
||||
}, [mx, setUnreadAtom, roomsNotificationPreferences]);
|
||||
|
||||
// Mute/unmute of a thread rewrites `threadNotificationsAtom`; recompute badges
|
||||
// immediately so muted-thread subtraction takes effect without waiting for the
|
||||
// next timeline / unread event (mirrors the notification-preferences reset).
|
||||
useEffect(() => {
|
||||
setUnreadAtom({
|
||||
type: 'RESET',
|
||||
unreadInfos: getUnreadInfos(mx, threadNotifications),
|
||||
});
|
||||
}, [mx, setUnreadAtom, threadNotifications]);
|
||||
|
||||
// RoomEvent.UnreadNotifications is emitted room-level only (never re-emitted
|
||||
// client-side), so the main Timeline pathway misses thread-count changes and
|
||||
// room badges lag. useRoomsListener PREPENDS the emitting Room (the SDK emits
|
||||
// this event with variable arity — 0/1/2 args — so only a leading slot is
|
||||
// positionally stable), making this a surgical per-room PUT with muted-thread
|
||||
// subtraction re-applied. Room-mute keeps its DELETE semantics.
|
||||
useRoomsListener(
|
||||
mx,
|
||||
RoomEvent.UnreadNotifications,
|
||||
useCallback(
|
||||
(room: Room) => {
|
||||
if (room.isSpaceRoom()) return;
|
||||
if (getNotificationType(mx, room.roomId) === NotificationType.Mute) {
|
||||
setUnreadAtom({ type: 'DELETE', roomId: room.roomId });
|
||||
return;
|
||||
}
|
||||
setUnreadAtom({
|
||||
type: 'PUT',
|
||||
unreadInfo: getUnreadInfo(
|
||||
room,
|
||||
getMutedThreads(threadNotificationsRef.current, room.roomId),
|
||||
),
|
||||
});
|
||||
},
|
||||
[mx, setUnreadAtom],
|
||||
),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMembershipChange = (room: Room, membership: string) => {
|
||||
if (membership !== Membership.Join) {
|
||||
@@ -272,7 +329,7 @@ export const useBindRoomToUnreadAtom = (mx: MatrixClient, unreadAtom: typeof roo
|
||||
if (mEvent.getType() === StateEvent.SpaceChild) {
|
||||
setUnreadAtom({
|
||||
type: 'RESET',
|
||||
unreadInfos: getUnreadInfos(mx),
|
||||
unreadInfos: getUnreadInfos(mx, threadNotificationsRef.current),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { createStore } from 'jotai';
|
||||
import { getThreadDraftKey, roomIdToActiveThreadIdAtomFamily } from './thread';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// getThreadDraftKey
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test('getThreadDraftKey joins roomId and threadRootId with "::"', () => {
|
||||
assert.equal(getThreadDraftKey('!room:server', '$root'), '!room:server::$root');
|
||||
});
|
||||
|
||||
test('getThreadDraftKey keeps the two ids distinguishable', () => {
|
||||
assert.notEqual(getThreadDraftKey('!a:server', '$b'), getThreadDraftKey('!a:server', '$c'));
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// roomIdToActiveThreadIdAtomFamily
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test('returns the same atom instance for the same roomId', () => {
|
||||
const a = roomIdToActiveThreadIdAtomFamily('!room:server');
|
||||
const b = roomIdToActiveThreadIdAtomFamily('!room:server');
|
||||
assert.equal(a, b);
|
||||
});
|
||||
|
||||
test('returns different atoms for different roomIds', () => {
|
||||
const a = roomIdToActiveThreadIdAtomFamily('!a:server');
|
||||
const b = roomIdToActiveThreadIdAtomFamily('!b:server');
|
||||
assert.notEqual(a, b);
|
||||
});
|
||||
|
||||
test('the active-thread atom defaults to null and is writable', () => {
|
||||
const store = createStore();
|
||||
const activeThreadIdAtom = roomIdToActiveThreadIdAtomFamily('!store:server');
|
||||
|
||||
assert.equal(store.get(activeThreadIdAtom), null);
|
||||
store.set(activeThreadIdAtom, '$root');
|
||||
assert.equal(store.get(activeThreadIdAtom), '$root');
|
||||
store.set(activeThreadIdAtom, null);
|
||||
assert.equal(store.get(activeThreadIdAtom), null);
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
import { atom, PrimitiveAtom } from 'jotai';
|
||||
import { atomFamily } from 'jotai/utils';
|
||||
|
||||
const createActiveThreadIdAtom = () => atom<string | null>(null);
|
||||
export type TActiveThreadIdAtom = PrimitiveAtom<string | null>;
|
||||
|
||||
/**
|
||||
* Per-room "which thread is open in the panel" state. Mirrors
|
||||
* `roomIdToReplyDraftAtomFamily` in `roomInputDrafts.ts` — the same atom
|
||||
* instance is returned for the same roomId, so a room's panel state survives
|
||||
* remounts.
|
||||
*/
|
||||
export const roomIdToActiveThreadIdAtomFamily = atomFamily<string, TActiveThreadIdAtom>(() =>
|
||||
createActiveThreadIdAtom(),
|
||||
);
|
||||
|
||||
/**
|
||||
* Key used to scope a thread's composer drafts (message/reply/upload) away from
|
||||
* the main room composer, e.g. `"!room:server::$rootEventId"`.
|
||||
*/
|
||||
export const getThreadDraftKey = (roomId: string, threadRootId: string): string =>
|
||||
`${roomId}::${threadRootId}`;
|
||||
@@ -5,6 +5,7 @@ export enum RoomSettingsPage {
|
||||
MembersPage,
|
||||
PermissionsPage,
|
||||
EmojisStickersPage,
|
||||
SoundboardPage,
|
||||
DeveloperToolsPage,
|
||||
ExportPage,
|
||||
ActivityLogPage,
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import {
|
||||
atomWithLocalStorage,
|
||||
getLocalStorageItem,
|
||||
setLocalStorageItem,
|
||||
} from './utils/atomWithLocalStorage';
|
||||
|
||||
const SEARCH_CACHE_ENABLED = 'searchCacheEnabled';
|
||||
|
||||
/**
|
||||
* P4-8 — persistent encrypted-search cache opt-in flag (default `false`).
|
||||
*
|
||||
* Standalone, `localStorage`-backed boolean atom kept separate from
|
||||
* `state/settings.ts` on purpose. When `true`, encrypted-room search persists a
|
||||
* decrypted plaintext index to IndexedDB (`lotus-search-cache`) so coverage
|
||||
* survives reloads. Because this writes decrypted plaintext at rest it must be
|
||||
* explicitly opted into; the cache is clearable from the search UI and wiped on
|
||||
* logout. Toggling this atom off stops all reads/writes but does NOT wipe
|
||||
* existing data — that is the explicit "Clear cached index" button / logout.
|
||||
*/
|
||||
export const searchCacheEnabledAtom = atomWithLocalStorage<boolean>(
|
||||
SEARCH_CACHE_ENABLED,
|
||||
(key) => getLocalStorageItem<boolean>(key, false),
|
||||
(key, value) => setLocalStorageItem(key, value),
|
||||
);
|
||||
@@ -1,6 +1,14 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { setFallbackSession, removeFallbackSession, getFallbackSession } from './sessions';
|
||||
import {
|
||||
setFallbackSession,
|
||||
removeFallbackSession,
|
||||
getFallbackSession,
|
||||
subscribeSessionChanges,
|
||||
} from './sessions';
|
||||
|
||||
// The single-key atomic blob (kept in sync with SESSION_BLOB_KEY in sessions.ts).
|
||||
const SESSION_BLOB_KEY = 'cinny_session_v1';
|
||||
|
||||
// The fallback-session helpers read/write specific `cinny_*` keys directly on
|
||||
// `localStorage`. node has none, so install a controllable in-memory mock per
|
||||
@@ -47,8 +55,9 @@ test('getFallbackSession returns undefined when nothing is stored', () => {
|
||||
assert.equal(getFallbackSession(), undefined);
|
||||
});
|
||||
|
||||
test('getFallbackSession returns undefined when a single key is missing', () => {
|
||||
// Every one of the four keys is required; missing any one yields undefined.
|
||||
test('legacy path: undefined when a single legacy key is missing (no blob)', () => {
|
||||
// With no atomic blob, every one of the four legacy keys is required; missing
|
||||
// any one yields undefined (the pre-blob behaviour).
|
||||
const keys = [
|
||||
'cinny_access_token',
|
||||
'cinny_device_id',
|
||||
@@ -59,11 +68,26 @@ test('getFallbackSession returns undefined when a single key is missing', () =>
|
||||
keys.forEach((missing) => {
|
||||
installStorage();
|
||||
setFallbackSession('token-1', 'DEVICE1', '@alice:example.org', 'https://hs.example.org');
|
||||
localStorage.removeItem(SESSION_BLOB_KEY);
|
||||
localStorage.removeItem(missing);
|
||||
assert.equal(getFallbackSession(), undefined, `missing ${missing} should yield undefined`);
|
||||
});
|
||||
});
|
||||
|
||||
test('blob wins: a torn legacy key does NOT tear the session while the blob exists', () => {
|
||||
installStorage();
|
||||
setFallbackSession('token-1', 'DEVICE1', '@alice:example.org', 'https://hs.example.org');
|
||||
// Simulate a torn legacy write — the authoritative blob must still resolve.
|
||||
localStorage.removeItem('cinny_access_token');
|
||||
assert.deepEqual(getFallbackSession(), {
|
||||
baseUrl: 'https://hs.example.org',
|
||||
userId: '@alice:example.org',
|
||||
deviceId: 'DEVICE1',
|
||||
accessToken: 'token-1',
|
||||
fallbackSdkStores: true,
|
||||
});
|
||||
});
|
||||
|
||||
test('removeFallbackSession clears all keys', () => {
|
||||
const store = installStorage();
|
||||
setFallbackSession('token-1', 'DEVICE1', '@alice:example.org', 'https://hs.example.org');
|
||||
@@ -113,4 +137,298 @@ test('a password session carries no OIDC fields, and re-saving clears stale OIDC
|
||||
assert.ok(s);
|
||||
assert.equal(s.oidc, undefined);
|
||||
assert.equal(s.refreshToken, undefined);
|
||||
// The overwritten blob must not retain the stale OIDC state either.
|
||||
const blob = JSON.parse(localStorage.getItem(SESSION_BLOB_KEY)!);
|
||||
assert.equal(blob.oidc, undefined);
|
||||
assert.equal(blob.refreshToken, undefined);
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Atomic blob: write/read round-trip
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test('setFallbackSession writes a single atomic blob under cinny_session_v1', () => {
|
||||
const store = installStorage();
|
||||
setFallbackSession('token-1', 'DEVICE1', '@alice:example.org', 'https://hs.example.org');
|
||||
|
||||
const raw = store.get(SESSION_BLOB_KEY);
|
||||
assert.ok(raw, 'blob key must be written');
|
||||
assert.deepEqual(JSON.parse(raw!), {
|
||||
accessToken: 'token-1',
|
||||
deviceId: 'DEVICE1',
|
||||
userId: '@alice:example.org',
|
||||
baseUrl: 'https://hs.example.org',
|
||||
});
|
||||
});
|
||||
|
||||
test('blob round-trips a full OIDC session (absolute expiry stored, remaining read back)', () => {
|
||||
const store = installStorage();
|
||||
setFallbackSession('tok', 'DEV', '@bob:mozilla.org', 'https://hs', {
|
||||
refreshToken: 'refresh-xyz',
|
||||
expiresInMs: 3_600_000,
|
||||
oidc: {
|
||||
issuer: 'https://i',
|
||||
clientId: 'c',
|
||||
redirectUri: 'https://cb',
|
||||
idTokenClaims: { sub: '@bob:mozilla.org' },
|
||||
},
|
||||
});
|
||||
|
||||
const blob = JSON.parse(store.get(SESSION_BLOB_KEY)!);
|
||||
assert.equal(blob.refreshToken, 'refresh-xyz');
|
||||
assert.ok(typeof blob.expiresAt === 'number' && blob.expiresAt > Date.now());
|
||||
assert.deepEqual(blob.oidc, {
|
||||
issuer: 'https://i',
|
||||
clientId: 'c',
|
||||
redirectUri: 'https://cb',
|
||||
idTokenClaims: { sub: '@bob:mozilla.org' },
|
||||
});
|
||||
|
||||
const s = getFallbackSession();
|
||||
assert.ok(s);
|
||||
assert.equal(s.refreshToken, 'refresh-xyz');
|
||||
assert.ok(s.expiresInMs! > 0 && s.expiresInMs! <= 3_600_000);
|
||||
assert.deepEqual(s.oidc, {
|
||||
issuer: 'https://i',
|
||||
clientId: 'c',
|
||||
redirectUri: 'https://cb',
|
||||
idTokenClaims: { sub: '@bob:mozilla.org' },
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Migration: legacy-only storage → transparent read → blob persisted on write
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test('legacy-only storage (no blob) is read transparently', () => {
|
||||
const store = installStorage();
|
||||
// Simulate an older build: legacy keys present, no blob.
|
||||
store.set('cinny_access_token', 'tok');
|
||||
store.set('cinny_device_id', 'DEV');
|
||||
store.set('cinny_user_id', '@carol:example.org');
|
||||
store.set('cinny_hs_base_url', 'https://hs');
|
||||
assert.equal(store.has(SESSION_BLOB_KEY), false);
|
||||
|
||||
assert.deepEqual(getFallbackSession(), {
|
||||
baseUrl: 'https://hs',
|
||||
userId: '@carol:example.org',
|
||||
deviceId: 'DEV',
|
||||
accessToken: 'tok',
|
||||
fallbackSdkStores: true,
|
||||
});
|
||||
});
|
||||
|
||||
test('first write after a legacy-only read persists the blob (migration)', () => {
|
||||
const store = installStorage();
|
||||
store.set('cinny_access_token', 'old');
|
||||
store.set('cinny_device_id', 'DEV');
|
||||
store.set('cinny_user_id', '@carol:example.org');
|
||||
store.set('cinny_hs_base_url', 'https://hs');
|
||||
|
||||
// Reads are side-effect free — no blob yet.
|
||||
getFallbackSession();
|
||||
assert.equal(store.has(SESSION_BLOB_KEY), false);
|
||||
|
||||
// The next write (e.g. a token refresh) persists the atomic blob.
|
||||
setFallbackSession('new', 'DEV', '@carol:example.org', 'https://hs');
|
||||
assert.ok(store.has(SESSION_BLOB_KEY));
|
||||
assert.equal(getFallbackSession()?.accessToken, 'new');
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Corruption / partial blob → legacy fallback; blob wins on disagreement
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test('corrupt blob (bad JSON) falls back to the legacy keys', () => {
|
||||
const store = installStorage();
|
||||
setFallbackSession('token-1', 'DEVICE1', '@alice:example.org', 'https://hs.example.org');
|
||||
// Corrupt the blob but keep the legacy keys intact.
|
||||
store.set(SESSION_BLOB_KEY, '{not valid json');
|
||||
|
||||
assert.deepEqual(getFallbackSession(), {
|
||||
baseUrl: 'https://hs.example.org',
|
||||
userId: '@alice:example.org',
|
||||
deviceId: 'DEVICE1',
|
||||
accessToken: 'token-1',
|
||||
fallbackSdkStores: true,
|
||||
});
|
||||
});
|
||||
|
||||
test('partial blob (missing a required field) falls back to the legacy keys', () => {
|
||||
const store = installStorage();
|
||||
setFallbackSession('token-1', 'DEVICE1', '@alice:example.org', 'https://hs.example.org');
|
||||
// A blob missing accessToken is treated as absent.
|
||||
store.set(
|
||||
SESSION_BLOB_KEY,
|
||||
JSON.stringify({ deviceId: 'DEVICE1', userId: '@alice:example.org', baseUrl: 'https://hs' }),
|
||||
);
|
||||
|
||||
assert.equal(getFallbackSession()?.accessToken, 'token-1');
|
||||
});
|
||||
|
||||
test('blob wins when blob and legacy keys disagree', () => {
|
||||
const store = installStorage();
|
||||
setFallbackSession('blob-token', 'DEVICE1', '@alice:example.org', 'https://hs.example.org');
|
||||
// Legacy keys drift to a stale token; the blob is authoritative.
|
||||
store.set('cinny_access_token', 'stale-legacy-token');
|
||||
|
||||
assert.equal(getFallbackSession()?.accessToken, 'blob-token');
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Dual-write keeps blob + legacy in sync; removal clears both
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test('dual-write keeps the legacy keys in sync with the blob', () => {
|
||||
const store = installStorage();
|
||||
setFallbackSession('tok', 'DEV', '@bob:mozilla.org', 'https://hs', {
|
||||
refreshToken: 'r',
|
||||
expiresInMs: 1000,
|
||||
oidc: { issuer: 'https://i', clientId: 'c', redirectUri: 'https://cb' },
|
||||
});
|
||||
|
||||
// Legacy credential keys
|
||||
assert.equal(store.get('cinny_access_token'), 'tok');
|
||||
assert.equal(store.get('cinny_device_id'), 'DEV');
|
||||
assert.equal(store.get('cinny_user_id'), '@bob:mozilla.org');
|
||||
assert.equal(store.get('cinny_hs_base_url'), 'https://hs');
|
||||
// Legacy OIDC keys
|
||||
assert.equal(store.get('cinny_refresh_token'), 'r');
|
||||
assert.ok(store.has('cinny_expires_at'));
|
||||
assert.equal(store.get('cinny_oidc_issuer'), 'https://i');
|
||||
assert.equal(store.get('cinny_oidc_client_id'), 'c');
|
||||
assert.equal(store.get('cinny_oidc_redirect_uri'), 'https://cb');
|
||||
// Blob agrees
|
||||
const blob = JSON.parse(store.get(SESSION_BLOB_KEY)!);
|
||||
assert.equal(blob.accessToken, 'tok');
|
||||
assert.equal(blob.refreshToken, 'r');
|
||||
assert.equal(store.get('cinny_expires_at'), String(blob.expiresAt));
|
||||
});
|
||||
|
||||
test('removeFallbackSession clears BOTH the blob and every legacy key', () => {
|
||||
const store = installStorage();
|
||||
setFallbackSession('tok', 'DEV', '@bob:mozilla.org', 'https://hs', {
|
||||
refreshToken: 'r',
|
||||
expiresInMs: 1000,
|
||||
oidc: { issuer: 'https://i', clientId: 'c', redirectUri: 'https://cb' },
|
||||
});
|
||||
assert.ok(store.size > 0);
|
||||
|
||||
removeFallbackSession();
|
||||
assert.equal(store.size, 0, 'no session key may survive removal');
|
||||
assert.equal(getFallbackSession(), undefined);
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Token-refresh update path (the path LotusOidcTokenRefresher uses)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test('token refresh via setFallbackSession updates blob + legacy atomically', () => {
|
||||
const store = installStorage();
|
||||
// Initial OIDC session.
|
||||
setFallbackSession('access-1', 'DEV', '@bob:mozilla.org', 'https://hs', {
|
||||
refreshToken: 'refresh-1',
|
||||
oidc: { issuer: 'https://i', clientId: 'c', redirectUri: 'https://cb' },
|
||||
});
|
||||
|
||||
// LotusOidcTokenRefresher.persistTokens() calls setFallbackSession with the
|
||||
// rotated tokens and the same identity/oidc refs.
|
||||
setFallbackSession('access-2', 'DEV', '@bob:mozilla.org', 'https://hs', {
|
||||
refreshToken: 'refresh-2',
|
||||
oidc: { issuer: 'https://i', clientId: 'c', redirectUri: 'https://cb' },
|
||||
});
|
||||
|
||||
// Blob updated
|
||||
const blob = JSON.parse(store.get(SESSION_BLOB_KEY)!);
|
||||
assert.equal(blob.accessToken, 'access-2');
|
||||
assert.equal(blob.refreshToken, 'refresh-2');
|
||||
// Legacy keys updated in lockstep
|
||||
assert.equal(store.get('cinny_access_token'), 'access-2');
|
||||
assert.equal(store.get('cinny_refresh_token'), 'refresh-2');
|
||||
// Reader sees the fresh token
|
||||
const s = getFallbackSession();
|
||||
assert.equal(s?.accessToken, 'access-2');
|
||||
assert.equal(s?.refreshToken, 'refresh-2');
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Cross-tab sync: subscribeSessionChanges
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// Minimal window/storage-event harness: node has neither.
|
||||
const installWindow = (): ((evt: { key: string | null }) => void)[] => {
|
||||
const listeners: ((evt: { key: string | null }) => void)[] = [];
|
||||
(globalThis as { window?: unknown }).window = {
|
||||
addEventListener: (type: string, cb: (evt: { key: string | null }) => void) => {
|
||||
if (type === 'storage') listeners.push(cb);
|
||||
},
|
||||
removeEventListener: (type: string, cb: (evt: { key: string | null }) => void) => {
|
||||
if (type !== 'storage') return;
|
||||
const i = listeners.indexOf(cb);
|
||||
if (i !== -1) listeners.splice(i, 1);
|
||||
},
|
||||
};
|
||||
return listeners;
|
||||
};
|
||||
|
||||
test('subscribeSessionChanges fires with the session when a session key changes', () => {
|
||||
installStorage();
|
||||
const listeners = installWindow();
|
||||
setFallbackSession('token-1', 'DEVICE1', '@alice:example.org', 'https://hs');
|
||||
|
||||
let received: unknown = 'unset';
|
||||
const unsub = subscribeSessionChanges((s) => {
|
||||
received = s;
|
||||
});
|
||||
|
||||
// Simulate another tab writing a new token, then dispatch the storage event.
|
||||
setFallbackSession('token-2', 'DEVICE1', '@alice:example.org', 'https://hs');
|
||||
listeners.forEach((cb) => cb({ key: SESSION_BLOB_KEY }));
|
||||
|
||||
assert.notEqual(received, 'unset');
|
||||
assert.equal((received as { accessToken?: string })?.accessToken, 'token-2');
|
||||
|
||||
unsub();
|
||||
assert.equal(listeners.length, 0, 'unsubscribe removes the listener');
|
||||
});
|
||||
|
||||
test('subscribeSessionChanges fires with null when the session is removed', () => {
|
||||
installStorage();
|
||||
const listeners = installWindow();
|
||||
setFallbackSession('token-1', 'DEVICE1', '@alice:example.org', 'https://hs');
|
||||
subscribeSessionChanges((s) => {
|
||||
assert.equal(s, null);
|
||||
});
|
||||
|
||||
removeFallbackSession();
|
||||
listeners.forEach((cb) => cb({ key: SESSION_BLOB_KEY }));
|
||||
});
|
||||
|
||||
test('subscribeSessionChanges treats a null key (localStorage.clear) as a change', () => {
|
||||
const store = installStorage();
|
||||
const listeners = installWindow();
|
||||
setFallbackSession('token-1', 'DEVICE1', '@alice:example.org', 'https://hs');
|
||||
|
||||
let fired = false;
|
||||
subscribeSessionChanges(() => {
|
||||
fired = true;
|
||||
});
|
||||
|
||||
store.clear();
|
||||
listeners.forEach((cb) => cb({ key: null }));
|
||||
assert.equal(fired, true);
|
||||
});
|
||||
|
||||
test('subscribeSessionChanges ignores unrelated storage keys', () => {
|
||||
installStorage();
|
||||
const listeners = installWindow();
|
||||
setFallbackSession('token-1', 'DEVICE1', '@alice:example.org', 'https://hs');
|
||||
|
||||
let fired = false;
|
||||
subscribeSessionChanges(() => {
|
||||
fired = true;
|
||||
});
|
||||
|
||||
listeners.forEach((cb) => cb({ key: 'some_unrelated_preference' }));
|
||||
assert.equal(fired, false);
|
||||
});
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user