From 7c28e2bda2287c74d84f1df732a7929141a5f0a2 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 21 Mar 2026 17:39:43 -0400 Subject: [PATCH 001/253] Change GitHub owner from 'SableClient' to 'Just-Insane' --- knope.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knope.toml b/knope.toml index 4b3d2fb87..edd6e8f3e 100644 --- a/knope.toml +++ b/knope.toml @@ -58,7 +58,7 @@ help_text = "Create a new change file to be included in the next release" type = "CreateChangeFile" [github] -owner = "SableClient" +owner = "Just-Insane" repo = "Sable" [release_notes] From e977b3635d14bcafc103d931eb7ad82ba8f9b733 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 21 Mar 2026 17:40:40 -0400 Subject: [PATCH 002/253] Change default custom domain for Worker --- infra/web/variables.tf | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/infra/web/variables.tf b/infra/web/variables.tf index 3569c9822..7d3a50ece 100644 --- a/infra/web/variables.tf +++ b/infra/web/variables.tf @@ -7,7 +7,7 @@ variable "account_id" { variable "custom_domain" { description = "Custom domain attached to the Worker" type = string - default = "app.sable.moe" + default = "app.cloudhub.social" } variable "worker_name" { From 792fd83d50ce0f0373d8f5a8f65488dc5c59d436 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 21 Mar 2026 17:45:52 -0400 Subject: [PATCH 003/253] Change default custom domain in variables.tf --- infra/web/variables.tf | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/infra/web/variables.tf b/infra/web/variables.tf index 7d3a50ece..96a6be2c5 100644 --- a/infra/web/variables.tf +++ b/infra/web/variables.tf @@ -7,7 +7,7 @@ variable "account_id" { variable "custom_domain" { description = "Custom domain attached to the Worker" type = string - default = "app.cloudhub.social" + default = "sable.cloudhub.social" } variable "worker_name" { From 6ab811d3a590dd635e0472c2f0c07863343bd274 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 21 Mar 2026 18:20:43 -0400 Subject: [PATCH 004/253] Change default custom domain to dev.cloudhub.social --- infra/web/variables.tf | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/infra/web/variables.tf b/infra/web/variables.tf index 96a6be2c5..8ddd72ae4 100644 --- a/infra/web/variables.tf +++ b/infra/web/variables.tf @@ -7,7 +7,7 @@ variable "account_id" { variable "custom_domain" { description = "Custom domain attached to the Worker" type = string - default = "sable.cloudhub.social" + default = "dev.cloudhub.social" } variable "worker_name" { From a55248827a48e6690857de25494b0e19b8d6e481 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 21 Mar 2026 18:30:52 -0400 Subject: [PATCH 005/253] Refactor config.json for new homeserver settings Updated configuration for homeserver and push notifications. --- config.json | 65 +++++++++++++++++++---------------------------------- 1 file changed, 23 insertions(+), 42 deletions(-) diff --git a/config.json b/config.json index 1bdffb675..90daf2190 100644 --- a/config.json +++ b/config.json @@ -1,45 +1,26 @@ { - "defaultHomeserver": 0, - "homeserverList": ["matrix.org", "mozilla.org", "unredacted.org", "sable.moe", "kendama.moe"], - "allowCustomHomeservers": true, - "elementCallUrl": null, - - "disableAccountSwitcher": false, - "hideUsernamePasswordFields": false, - - "pushNotificationDetails": { - "pushNotifyUrl": "https://sygnal.sable.moe/_matrix/push/v1/notify", - "vapidPublicKey": "BCnS4SbHjeOaqVFW4wjt5xDt_pYIL62qMzKePfYF9fl9PQU14RieIaObh7nLR_9dQf4sykZa-CTrcjkgMIE1mcg", - "webPushAppID": "moe.sable.app.sygnal" - }, - - "slidingSync": { - "enabled": true - }, - - "featuredCommunities": { - "openAsDefault": false, - "spaces": [ - "#sable:sable.moe", - "#community:matrix.org", - "#space:unredacted.org", - "#science-space:matrix.org", - "#libregaming-games:tchncs.de", - "#mathematics-on:matrix.org" + "allowCustomHomeservers": true, + "defaultHomeserver": 0, + "elementCallUrl": "matrix.cloudhub.social", + "featuredCommunities": { + "openAsDefault": false, + "rooms": [], + "servers": [ + "matrixrooms.info", + "gitter.im", + "matrix.org" + ], + "spaces": [] + }, + "homeserverList": [ + "https://matrix.cloudhub.social" ], - "rooms": [ - "#announcements:sable.moe", - "#freesoftware:matrix.org", - "#pcapdroid:matrix.org", - "#gentoo:matrix.org", - "#PrivSec.dev:arcticfoxes.net", - "#disroot:aria-net.org" - ], - "servers": ["matrixrooms.info", "mozilla.org", "unredacted.org"] - }, - - "hashRouter": { - "enabled": false, - "basename": "/" - } + "pushNotificationDetails": { + "pushNotifyUrl": "https://sygnal.cloudhub.social/_matrix/push/v1/notify", + "vapidPublicKey": "BEBdK6VUiqYxcOauFCM1ZB38llgiODAs6pR5EEcC7YBoUh2YvrULagwo5t-Ms0Is0lEmKDhpdUoMiy_i7ArI3oE", + "webPushAppID": "social.cloudhub.sable.web" + }, + "slidingSync": { + "enabled": "true" + } } From 58ae0ebe1a80908c8ef5540302347eaa8d519a52 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 24 Mar 2026 20:20:08 -0400 Subject: [PATCH 006/253] chore: ignore .vscode/launch.json --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index d6c83cfb1..77630efa4 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ build.sh # the following line was added with the "git ignore" tool by itsrye.dev, version 0.1.0 .lh +.vscode/launch.json From ff747a3af7cc4d516e36bee6fba765c645411263 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 24 Mar 2026 22:33:41 -0400 Subject: [PATCH 007/253] ci: build latest Docker image from integration branch too --- .github/workflows/docker-publish.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml index 03a63ef99..426f1d826 100644 --- a/.github/workflows/docker-publish.yml +++ b/.github/workflows/docker-publish.yml @@ -2,7 +2,7 @@ name: Build and publish Docker image on: push: - branches: [dev] + branches: [dev, integration] tags: - 'v*' pull_request: @@ -70,9 +70,9 @@ jobs: flavor: | latest=false tags: | - # dev branch or manual dispatch without a tag: short commit SHA + latest - type=sha,prefix=,format=short,enable=${{ github.ref == 'refs/heads/dev' || (github.event_name == 'workflow_dispatch' && inputs.git_tag == '') }} - type=raw,value=latest,enable=${{ github.ref == 'refs/heads/dev' || (github.event_name == 'workflow_dispatch' && inputs.git_tag == '') }} + # dev/integration branch or manual dispatch without a tag: short commit SHA + latest + type=sha,prefix=,format=short,enable=${{ github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/integration' || (github.event_name == 'workflow_dispatch' && inputs.git_tag == '') }} + type=raw,value=latest,enable=${{ github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/integration' || (github.event_name == 'workflow_dispatch' && inputs.git_tag == '') }} # git tags (push or manual dispatch with a tag): semver breakdown type=semver,pattern={{version}},value=${{ steps.release_tag.outputs.value }},enable=${{ steps.release_tag.outputs.is_release == 'true' }} From 024401b126cccd69bb5d5ac36328373614f0f697 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 25 Mar 2026 00:08:01 -0400 Subject: [PATCH 008/253] ci: add Sentry env vars to Docker image build step MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Pass VITE_SENTRY_DSN, VITE_SENTRY_ENVIRONMENT, VITE_APP_VERSION, SENTRY_AUTH_TOKEN, SENTRY_ORG, and SENTRY_PROJECT to the build step so that the Docker image build (dev, integration, and release tags) includes Sentry instrumentation and source map uploads, matching the Cloudflare deploy workflow. Environment mapping: - dev branch / release tags β†’ production - integration branch / manual dispatch without tag β†’ preview --- .github/workflows/docker-publish.yml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml index 426f1d826..64c78f755 100644 --- a/.github/workflows/docker-publish.yml +++ b/.github/workflows/docker-publish.yml @@ -90,6 +90,12 @@ jobs: env: VITE_BUILD_HASH: ${{ steps.vars.outputs.short_sha }} VITE_IS_RELEASE_TAG: ${{ steps.release_tag.outputs.is_release }} + VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }} + VITE_SENTRY_ENVIRONMENT: ${{ (steps.release_tag.outputs.is_release == 'true' || github.ref == 'refs/heads/dev') && 'production' || 'preview' }} + VITE_APP_VERSION: ${{ github.ref_name }} + SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }} + SENTRY_ORG: ${{ secrets.SENTRY_ORG }} + SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }} run: | NODE_OPTIONS=--max_old_space_size=4096 pnpm run build From c40d5c82a8113deeb4b8a5cf4bcbdf5a27b47cb2 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 27 Mar 2026 10:26:35 -0400 Subject: [PATCH 009/253] ci: tag integration branch Docker image as 'integration' --- .github/workflows/docker-publish.yml | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml index 64c78f755..82fa8406f 100644 --- a/.github/workflows/docker-publish.yml +++ b/.github/workflows/docker-publish.yml @@ -70,9 +70,14 @@ jobs: flavor: | latest=false tags: | - # dev/integration branch or manual dispatch without a tag: short commit SHA + latest + # dev/integration branch or manual dispatch without a tag: short commit SHA type=sha,prefix=,format=short,enable=${{ github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/integration' || (github.event_name == 'workflow_dispatch' && inputs.git_tag == '') }} - type=raw,value=latest,enable=${{ github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/integration' || (github.event_name == 'workflow_dispatch' && inputs.git_tag == '') }} + + # dev branch or manual dispatch without a tag: latest tag + type=raw,value=latest,enable=${{ github.ref == 'refs/heads/dev' || (github.event_name == 'workflow_dispatch' && inputs.git_tag == '') }} + + # integration branch: stable integration tag + type=raw,value=integration,enable=${{ github.ref == 'refs/heads/integration' }} # git tags (push or manual dispatch with a tag): semver breakdown type=semver,pattern={{version}},value=${{ steps.release_tag.outputs.value }},enable=${{ steps.release_tag.outputs.is_release == 'true' }} From a1aff9e0b78f39cd58f8e1dad7b3506820bfa9b9 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 28 Mar 2026 12:14:10 -0400 Subject: [PATCH 010/253] feat: add pre-push git hook for quality checks - Adds pre-push hook that runs typecheck, lint, and format checks - Blocks pushes that would fail CI - Includes install script for easy setup - Tracked on personal/config to persist across dev pulls --- scripts/git-hooks/README.md | 28 ++++++++++++++++++++++++++++ scripts/git-hooks/pre-push | 35 +++++++++++++++++++++++++++++++++++ scripts/install-git-hooks.sh | 25 +++++++++++++++++++++++++ 3 files changed, 88 insertions(+) create mode 100644 scripts/git-hooks/README.md create mode 100644 scripts/git-hooks/pre-push create mode 100644 scripts/install-git-hooks.sh diff --git a/scripts/git-hooks/README.md b/scripts/git-hooks/README.md new file mode 100644 index 000000000..2793d1921 --- /dev/null +++ b/scripts/git-hooks/README.md @@ -0,0 +1,28 @@ +# Git Hooks + +This directory contains git hooks that enforce quality standards before pushing code. + +## Installation + +Run the installation script from the repository root: + +```bash +./scripts/install-git-hooks.sh +``` + +This will copy the hooks to `.git/hooks/` and make them executable. + +## Hooks + +### pre-push + +Runs before every `git push` and enforces: +- TypeScript type checking (`npm run typecheck`) +- ESLint checks (`npm run lint`) +- Prettier formatting (`npm run fmt:check`) + +If any check fails, the push is blocked. To bypass in emergencies: `git push --no-verify` + +## Maintenance + +This directory is tracked on the `personal/config` branch to persist across `dev` pulls and merges. diff --git a/scripts/git-hooks/pre-push b/scripts/git-hooks/pre-push new file mode 100644 index 000000000..d4c02c37a --- /dev/null +++ b/scripts/git-hooks/pre-push @@ -0,0 +1,35 @@ +#!/bin/zsh +# Pre-push hook: Run quality checks before allowing push +# This prevents pushing code that will fail CI checks + +set -e + +echo "πŸ” Running pre-push quality checks..." + +# Run typecheck +echo " β†’ Running typecheck..." +if ! npm run typecheck > /dev/null 2>&1; then + echo "❌ Typecheck failed. Fix errors before pushing." + npm run typecheck + exit 1 +fi +echo " βœ“ Typecheck passed" + +# Run lint +echo " β†’ Running lint..." +if ! npm run lint > /dev/null 2>&1; then + echo "❌ Lint failed. Fix errors before pushing." + npm run lint + exit 1 +fi +echo " βœ“ Lint passed" + +# Run format check +echo " β†’ Running format check..." +if ! npm run fmt:check > /dev/null 2>&1; then + echo "❌ Format check failed. Run 'npm run fmt' to fix." + exit 1 +fi +echo " βœ“ Format check passed" + +echo "βœ… All quality checks passed. Proceeding with push..." diff --git a/scripts/install-git-hooks.sh b/scripts/install-git-hooks.sh new file mode 100644 index 000000000..c90efc819 --- /dev/null +++ b/scripts/install-git-hooks.sh @@ -0,0 +1,25 @@ +#!/bin/zsh +# Setup script: Install git hooks from scripts/git-hooks/ + +set -e + +SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)" +REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)" +HOOKS_DIR="$REPO_ROOT/.git/hooks" +SOURCE_DIR="$REPO_ROOT/scripts/git-hooks" + +echo "πŸ”§ Installing git hooks..." + +# Install pre-push hook +if [ -f "$SOURCE_DIR/pre-push" ]; then + cp "$SOURCE_DIR/pre-push" "$HOOKS_DIR/pre-push" + chmod +x "$HOOKS_DIR/pre-push" + echo " βœ“ Installed pre-push hook" +else + echo " ⚠ pre-push hook not found in $SOURCE_DIR" +fi + +echo "βœ… Git hooks installation complete!" +echo "" +echo "The pre-push hook will now run quality checks (typecheck, lint, format)" +echo "before every git push. To bypass in emergencies, use: git push --no-verify" From 53a3aff2a787b9949e1edff8b7a31ad930fdd764 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 28 Mar 2026 19:56:52 -0400 Subject: [PATCH 011/253] ci(docker): load env-specific client config overrides --- .github/workflows/docker-publish.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml index 82fa8406f..5badb90a4 100644 --- a/.github/workflows/docker-publish.yml +++ b/.github/workflows/docker-publish.yml @@ -23,12 +23,16 @@ env: jobs: build-and-push: runs-on: ubuntu-latest + environment: ${{ github.event_name == 'pull_request' && (github.base_ref == 'dev' && 'production' || github.base_ref == 'integration' && 'preview' || 'preview') || github.ref == 'refs/heads/dev' && 'production' || github.ref == 'refs/heads/integration' && 'preview' || 'preview' }} permissions: contents: read packages: write attestations: write artifact-metadata: write id-token: write + env: + CLIENT_CONFIG_OVERRIDES_JSON: ${{ vars.CLIENT_CONFIG_OVERRIDES_JSON }} + CLIENT_CONFIG_OVERRIDES_STRICT: ${{ vars.CLIENT_CONFIG_OVERRIDES_STRICT || 'false' }} steps: - name: Checkout repository From 83661734cf08b38b3e830cbd37bcbfc85c99d9f1 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 28 Mar 2026 20:01:23 -0400 Subject: [PATCH 012/253] ci: integration uses preview env, dev uses production env --- .github/workflows/cloudflare-dev-deploy.yml | 103 +++++++++++++++++++ .github/workflows/cloudflare-web-preview.yml | 2 +- 2 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/cloudflare-dev-deploy.yml diff --git a/.github/workflows/cloudflare-dev-deploy.yml b/.github/workflows/cloudflare-dev-deploy.yml new file mode 100644 index 000000000..e113e954d --- /dev/null +++ b/.github/workflows/cloudflare-dev-deploy.yml @@ -0,0 +1,103 @@ +name: Cloudflare Worker Dev Deploy + +on: + push: + branches: + - dev + paths: + - 'src/**' + - 'index.html' + - 'package.json' + - 'package-lock.json' + - 'vite.config.ts' + - 'tsconfig.json' + - '.github/workflows/cloudflare-dev-deploy.yml' + - '.github/actions/setup/**' + +concurrency: + group: cloudflare-worker-dev-deploy + cancel-in-progress: true + +jobs: + deploy: + runs-on: ubuntu-latest + environment: production + permissions: + contents: read + env: + CLIENT_CONFIG_OVERRIDES_JSON: ${{ vars.CLIENT_CONFIG_OVERRIDES_JSON }} + CLIENT_CONFIG_OVERRIDES_STRICT: ${{ vars.CLIENT_CONFIG_OVERRIDES_STRICT || 'false' }} + steps: + - name: Checkout repository + uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 + with: + persist-credentials: false + + - name: Prepare preview metadata + id: metadata + shell: bash + run: | + preview_message="$(git log -1 --pretty=%s)" + preview_message="$(printf '%s' "$preview_message" | head -c 100)" + + { + echo 'preview_message<> "$GITHUB_OUTPUT" + + - name: Set Sentry build environment + env: + VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }} + SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }} + SENTRY_ORG: ${{ secrets.SENTRY_ORG }} + SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }} + shell: bash + run: | + echo "VITE_SENTRY_DSN=$VITE_SENTRY_DSN" >> "$GITHUB_ENV" + echo "VITE_SENTRY_ENVIRONMENT=production" >> "$GITHUB_ENV" + echo "SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN" >> "$GITHUB_ENV" + echo "SENTRY_ORG=$SENTRY_ORG" >> "$GITHUB_ENV" + echo "SENTRY_PROJECT=$SENTRY_PROJECT" >> "$GITHUB_ENV" + + - name: Setup app and build + uses: ./.github/actions/setup + with: + build: 'true' + + - name: Upload Worker preview + id: deploy + uses: cloudflare/wrangler-action@da0e0dfe58b7a431659754fdf3f186c529afbe65 # v3.14.1 + env: + PREVIEW_MESSAGE: ${{ steps.metadata.outputs.preview_message }} + with: + apiToken: ${{ secrets.TF_CLOUDFLARE_API_TOKEN }} + accountId: ${{ secrets.TF_VAR_ACCOUNT_ID }} + command: > + versions upload + -c dist/wrangler.json + --preview-alias dev + --message "$PREVIEW_MESSAGE" + + - name: Publish summary + uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0 + env: + DEPLOYMENT_URL: ${{ steps.deploy.outputs.deployment-url }} + SHORT_SHA: ${{ github.sha }} + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + const deploymentUrl = process.env.DEPLOYMENT_URL; + const shortSha = process.env.SHORT_SHA?.slice(0, 7); + const now = new Date().toUTCString().replace(':00 GMT', ' UTC'); + + const tableRow = "| βœ… Dev deployment successful! | " + deploymentUrl + " | " + shortSha + " | `dev` | " + now + " |"; + const comment = [ + `## Deploying with  Cloudflare Workers  Cloudflare Workers (dev β†’ production config)`, + ``, + `| Status | URL | Commit | Alias | Updated (UTC) |`, + `| - | - | - | - | - |`, + tableRow, + ].join("\n"); + + await core.summary.addRaw(comment).write(); diff --git a/.github/workflows/cloudflare-web-preview.yml b/.github/workflows/cloudflare-web-preview.yml index 8b93a4bb9..eb81532fb 100644 --- a/.github/workflows/cloudflare-web-preview.yml +++ b/.github/workflows/cloudflare-web-preview.yml @@ -13,7 +13,7 @@ on: - '.github/actions/setup/**' push: branches: - - dev + - integration paths: - 'src/**' - 'index.html' From 02ced602ba672aef0c312c7fa0f9eefd148c77f7 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 28 Mar 2026 20:01:41 -0400 Subject: [PATCH 013/253] ci(workflows): trigger app deploys on config.json changes --- .github/workflows/cloudflare-dev-deploy.yml | 2 ++ .github/workflows/cloudflare-web-preview.yml | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/.github/workflows/cloudflare-dev-deploy.yml b/.github/workflows/cloudflare-dev-deploy.yml index e113e954d..5bc6421e0 100644 --- a/.github/workflows/cloudflare-dev-deploy.yml +++ b/.github/workflows/cloudflare-dev-deploy.yml @@ -6,9 +6,11 @@ on: - dev paths: - 'src/**' + - 'config.json' - 'index.html' - 'package.json' - 'package-lock.json' + - 'scripts/inject-client-config.js' - 'vite.config.ts' - 'tsconfig.json' - '.github/workflows/cloudflare-dev-deploy.yml' diff --git a/.github/workflows/cloudflare-web-preview.yml b/.github/workflows/cloudflare-web-preview.yml index eb81532fb..d7df99897 100644 --- a/.github/workflows/cloudflare-web-preview.yml +++ b/.github/workflows/cloudflare-web-preview.yml @@ -4,9 +4,11 @@ on: pull_request: paths: - 'src/**' + - 'config.json' - 'index.html' - 'package.json' - 'package-lock.json' + - 'scripts/inject-client-config.js' - 'vite.config.ts' - 'tsconfig.json' - '.github/workflows/cloudflare-web-preview.yml' @@ -16,9 +18,11 @@ on: - integration paths: - 'src/**' + - 'config.json' - 'index.html' - 'package.json' - 'package-lock.json' + - 'scripts/inject-client-config.js' - 'vite.config.ts' - 'tsconfig.json' - '.github/workflows/cloudflare-web-preview.yml' From 5090322e4e47f180895536114eeedfe4e33cdf40 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 28 Mar 2026 23:24:27 -0400 Subject: [PATCH 014/253] chore: codespace devcontainer config --- .devcontainer/devcontainer.json | 71 ++++++++++++++++++++++++++++++++ .devcontainer/on-create.sh | 19 +++++++++ .devcontainer/post-create.sh | 72 +++++++++++++++++++++++++++++++++ .devcontainer/post-start.sh | 39 ++++++++++++++++++ .devcontainer/setup-signing.sh | 51 +++++++++++++++++++++++ .devcontainer/update-content.sh | 19 +++++++++ sable.code-workspace | 27 +++++++++++++ 7 files changed, 298 insertions(+) create mode 100644 .devcontainer/devcontainer.json create mode 100644 .devcontainer/on-create.sh create mode 100644 .devcontainer/post-create.sh create mode 100644 .devcontainer/post-start.sh create mode 100644 .devcontainer/setup-signing.sh create mode 100644 .devcontainer/update-content.sh create mode 100644 sable.code-workspace diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 000000000..45329c341 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,71 @@ +{ + "name": "Sable", + "image": "mcr.microsoft.com/devcontainers/javascript-node:1-24-bookworm", + + // Minimum 4 cores / 8 GB RAM so Vite builds and TypeScript checks don't crawl + "hostRequirements": { + "cpus": 4, + "memory": "8gb", + "storage": "32gb" + }, + + "features": { + // GitHub CLI for PR/issue/fork management + "ghcr.io/devcontainers/features/github-cli:1": {} + }, + + // Expose Vite dev server and Zola docs preview + "forwardPorts": [5173, 8080, 1111], + "portsAttributes": { + "5173": { "label": "Vite Dev Server", "onAutoForward": "notify" }, + "8080": { "label": "App Preview", "onAutoForward": "notify" }, + "1111": { "label": "Docs Preview (Zola)", "onAutoForward": "notify" } + }, + + // Open the multi-root workspace covering both Sable + Sable-Docs + "workspaceFile": "${localWorkspaceFolder}/sable.code-workspace", + + "customizations": { + "vscode": { + "extensions": [ + // JS/TS toolchain + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "webpro.vscode-knip", + "ms-vscode.vscode-typescript-next", + // Git & GitHub + "github.vscode-pull-request-github", + "eamodio.gitlens", + // Docs (Zola / TOML / Markdown) + "tamasfe.even-better-toml", + "yzhang.markdown-all-in-one", + "eliostruyf.vscode-front-matter", + // Misc + "EditorConfig.EditorConfig" + ], + "settings": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "typescript.tsdk": "node_modules/typescript/lib", + "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, + "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, + "[toml]": { "editor.defaultFormatter": "tamasfe.even-better-toml" }, + "git.autofetch": true, + "terminal.integrated.defaultProfile.linux": "bash" + } + } + }, + + // ── Lifecycle hooks ──────────────────────────────────────────────────────── + // on-create : runs ONCE when the prebuild image is first built (cached) + // update-content: re-runs on each prebuild refresh & new codespace create (cached) + // post-create : runs once on each new codespace (not cached) – user-specific setup + // post-start : runs on EVERY codespace start (fetch upstream, signing check) + + "onCreateCommand": "bash .devcontainer/on-create.sh", + "updateContentCommand": "bash .devcontainer/update-content.sh", + "postCreateCommand": "bash .devcontainer/post-create.sh", + "postStartCommand": "bash .devcontainer/post-start.sh", + + "remoteUser": "node" +} diff --git a/.devcontainer/on-create.sh b/.devcontainer/on-create.sh new file mode 100644 index 000000000..1d5123eaa --- /dev/null +++ b/.devcontainer/on-create.sh @@ -0,0 +1,19 @@ +#!/usr/bin/env bash +# on-create.sh β€” runs ONCE when the prebuild image is first built +# Everything here is cached between prebuild refreshes. +set -euo pipefail + +echo "==> [on-create] Enabling corepack (pnpm)..." +corepack enable +corepack prepare pnpm@latest --activate + +echo "==> [on-create] Configuring pnpm global store..." +pnpm config set store-dir /home/node/.local/share/pnpm/store + +echo "==> [on-create] Installing Zola (for Sable-Docs preview)..." +ZOLA_VERSION="0.19.2" +ZOLA_URL="https://github.com/getzola/zola/releases/download/v${ZOLA_VERSION}/zola-v${ZOLA_VERSION}-x86_64-unknown-linux-gnu.tar.gz" +curl -fsSL "$ZOLA_URL" | sudo tar xz -C /usr/local/bin +zola --version + +echo "==> [on-create] Done." diff --git a/.devcontainer/post-create.sh b/.devcontainer/post-create.sh new file mode 100644 index 000000000..4f2ef27a1 --- /dev/null +++ b/.devcontainer/post-create.sh @@ -0,0 +1,72 @@ +#!/usr/bin/env bash +# post-create.sh β€” runs ONCE per new codespace (not cached in prebuild). +# Handles user-specific git setup: remotes, branches, signing. +set -euo pipefail + +SABLE_DIR="/workspaces/Sable" +DOCS_DIR="/workspaces/Sable-Docs" + +# ── 1. Upstream remotes ─────────────────────────────────────────────────────── +echo "==> [post-create] Configuring upstream remotes..." + +# Sable: fork = origin (Just-Insane/Sable), upstream = SableClient/Sable +if ! git -C "$SABLE_DIR" remote | grep -q "^upstream$"; then + git -C "$SABLE_DIR" remote add upstream https://github.com/SableClient/Sable.git + echo " Added upstream β†’ SableClient/Sable" +else + echo " upstream remote already set" +fi +git -C "$SABLE_DIR" fetch --all --quiet + +# Docs: fork = origin (Just-Insane/docs), upstream = SableClient/docs +if ! git -C "$DOCS_DIR" remote | grep -q "^upstream$"; then + git -C "$DOCS_DIR" remote add upstream https://github.com/SableClient/docs.git + echo " [docs] Added upstream β†’ SableClient/docs" +else + echo " [docs] upstream remote already set" +fi +git -C "$DOCS_DIR" fetch --all --quiet + +# ── 2. Ensure required branches exist ──────────────────────────────────────── +echo "==> [post-create] Ensuring branches exist in Sable..." + +ensure_branch() { + local dir="$1" + local branch="$2" + local start_point="${3:-HEAD}" + if git -C "$dir" ls-remote --heads origin "$branch" | grep -q "$branch"; then + echo " Branch '$branch' already exists on origin, checking out..." + git -C "$dir" fetch origin "$branch" --quiet + if ! git -C "$dir" show-ref --quiet "refs/heads/$branch"; then + git -C "$dir" branch --track "$branch" "origin/$branch" + fi + else + echo " Creating branch '$branch' from $start_point and pushing to origin..." + git -C "$dir" checkout -b "$branch" "$start_point" 2>/dev/null || true + git -C "$dir" push -u origin "$branch" + fi +} + +# Switch back to integration after branch ops +CURRENT_BRANCH=$(git -C "$SABLE_DIR" rev-parse --abbrev-ref HEAD) + +ensure_branch "$SABLE_DIR" "integration" "upstream/dev" +ensure_branch "$SABLE_DIR" "personal/config" "integration" +ensure_branch "$DOCS_DIR" "integration" "upstream/main" + +# Return to whatever branch we were on +git -C "$SABLE_DIR" checkout "$CURRENT_BRANCH" 2>/dev/null || true + +# ── 3. Git signing (SSH via forwarded YubiKey) ──────────────────────────────── +echo "==> [post-create] Configuring SSH commit signing..." +bash "$SABLE_DIR/.devcontainer/setup-signing.sh" || true + +# ── 4. Install git hooks ────────────────────────────────────────────────────── +echo "==> [post-create] Installing git hooks..." +if [ -f "$SABLE_DIR/scripts/install-git-hooks.sh" ]; then + bash "$SABLE_DIR/scripts/install-git-hooks.sh" +fi + +echo "" +echo "==> [post-create] Done! Open sable.code-workspace for the multi-root view." +echo " Run '.devcontainer/setup-signing.sh' any time to reconfigure commit signing." diff --git a/.devcontainer/post-start.sh b/.devcontainer/post-start.sh new file mode 100644 index 000000000..c49b2eeb2 --- /dev/null +++ b/.devcontainer/post-start.sh @@ -0,0 +1,39 @@ +#!/usr/bin/env bash +# post-start.sh β€” runs on EVERY codespace start. +# Fetches upstream changes and re-checks signing (agent may have changed). +set -euo pipefail + +SABLE_DIR="/workspaces/Sable" +DOCS_DIR="/workspaces/Sable-Docs" + +# ── Fetch upstream for both repos ──────────────────────────────────────────── +echo "==> [post-start] Fetching upstream..." +git -C "$SABLE_DIR" fetch upstream --quiet 2>/dev/null && echo " Sable upstream fetched" || echo " ⚠ Could not fetch Sable upstream" +git -C "$DOCS_DIR" fetch upstream --quiet 2>/dev/null && echo " Docs upstream fetched" || echo " ⚠ Could not fetch Docs upstream" + +# ── Show how far behind integration is from upstream/dev ───────────────────── +BEHIND=$(git -C "$SABLE_DIR" rev-list --count HEAD..upstream/dev 2>/dev/null || echo "?") +if [ "$BEHIND" != "0" ] && [ "$BEHIND" != "?" ]; then + echo "" + echo " β„Ή Your current branch is $BEHIND commit(s) behind upstream/dev." + echo " To sync: git merge upstream/dev (or: git rebase upstream/dev)" +fi + +# ── Re-configure SSH signing if not already set (agent may now be available) ─ +if [ "$(git config --global gpg.format 2>/dev/null)" != "ssh" ]; then + bash "$SABLE_DIR/.devcontainer/setup-signing.sh" || true +else + # Verify the key still exists in the agent (yubikey could have changed) + CONFIGURED_KEY=$(git config --global user.signingkey 2>/dev/null || echo "") + if [ -n "$CONFIGURED_KEY" ]; then + if ! ssh-add -L 2>/dev/null | grep -qF "$CONFIGURED_KEY"; then + echo "" + echo " ⚠ Signing key not found in SSH agent. YubiKey present?" + echo " Re-run: bash .devcontainer/setup-signing.sh" + else + echo " βœ“ Commit signing ready (SSH via forwarded agent)" + fi + fi +fi + +echo "" diff --git a/.devcontainer/setup-signing.sh b/.devcontainer/setup-signing.sh new file mode 100644 index 000000000..d8262cf3b --- /dev/null +++ b/.devcontainer/setup-signing.sh @@ -0,0 +1,51 @@ +#!/usr/bin/env bash +# setup-signing.sh β€” configures SSH commit signing via forwarded SSH agent. +# Safe to re-run at any time. YubiKey-backed keys work as long as the +# SSH agent from your local machine is forwarded (VS Code handles this). +set -euo pipefail + +SABLE_DIR="/workspaces/Sable" +ALLOWED_SIGNERS_FILE="$HOME/.config/git/allowed_signers" + +# Check if SSH agent is available and has keys loaded +if ! ssh-add -L &>/dev/null || [ -z "$(ssh-add -L 2>/dev/null)" ]; then + echo "⚠ No SSH keys found in the forwarded agent." + echo " Make sure your local SSH agent is running and your YubiKey key is loaded." + echo " On macOS: ssh-add --apple-use-keychain ~/.ssh/id_ed25519" + echo " To retry: bash .devcontainer/setup-signing.sh" + exit 0 +fi + +# Pick the first key; if your YubiKey-backed key is not first, adjust: +# e.g. SIGNING_KEY=$(ssh-add -L | grep "cardno:" | head -1) +SIGNING_KEY=$(ssh-add -L | head -1) +KEY_COMMENT=$(echo "$SIGNING_KEY" | awk '{print $NF}') + +echo "βœ“ Found SSH key: ...${KEY_COMMENT}" + +# Configure git to use SSH signing +git config --global gpg.format ssh +git config --global user.signingkey "$SIGNING_KEY" +git config --global commit.gpgsign true +git config --global tag.gpgsign true + +# Set up allowed_signers for local verification +USER_EMAIL=$(git config --global user.email 2>/dev/null || echo "") +if [ -n "$USER_EMAIL" ]; then + mkdir -p "$(dirname "$ALLOWED_SIGNERS_FILE")" + # Remove stale entry for this email if present, then add fresh one + if [ -f "$ALLOWED_SIGNERS_FILE" ]; then + grep -v "^$USER_EMAIL " "$ALLOWED_SIGNERS_FILE" > "${ALLOWED_SIGNERS_FILE}.tmp" || true + mv "${ALLOWED_SIGNERS_FILE}.tmp" "$ALLOWED_SIGNERS_FILE" + fi + echo "$USER_EMAIL namespaces=\"git\" $SIGNING_KEY" >> "$ALLOWED_SIGNERS_FILE" + git config --global gpg.ssh.allowedSignersFile "$ALLOWED_SIGNERS_FILE" + echo "βœ“ SSH commit signing configured for <$USER_EMAIL>" +else + echo "⚠ user.email not set globally. Run: git config --global user.email 'you@example.com'" + echo " Then re-run: bash .devcontainer/setup-signing.sh" +fi + +echo "" +echo "Test signing with: git commit --allow-empty -m 'test signing'" +echo "Verify with: git log --show-signature -1" diff --git a/.devcontainer/update-content.sh b/.devcontainer/update-content.sh new file mode 100644 index 000000000..572ae73ba --- /dev/null +++ b/.devcontainer/update-content.sh @@ -0,0 +1,19 @@ +#!/usr/bin/env bash +# update-content.sh β€” runs on each prebuild refresh AND on new codespace creation. +# The resulting filesystem state is cached in the prebuild snapshot. +set -euo pipefail + +echo "==> [update-content] Installing Sable dependencies (pnpm install)..." +pnpm install --frozen-lockfile + +echo "==> [update-content] Cloning / updating Sable-Docs..." +DOCS_DIR="/workspaces/Sable-Docs" +if [ -d "$DOCS_DIR/.git" ]; then + echo " Docs already present, fetching latest..." + git -C "$DOCS_DIR" fetch --all +else + echo " Cloning Just-Insane/docs β†’ $DOCS_DIR" + git clone https://github.com/Just-Insane/docs "$DOCS_DIR" +fi + +echo "==> [update-content] Done." diff --git a/sable.code-workspace b/sable.code-workspace new file mode 100644 index 000000000..b7b699ce8 --- /dev/null +++ b/sable.code-workspace @@ -0,0 +1,27 @@ +{ + "folders": [ + { + "path": ".", + "name": "Sable" + }, + { + "path": "../Sable-Docs", + "name": "Sable-Docs" + } + ], + "settings": { + "editor.formatOnSave": true, + "typescript.tsdk": "Sable/node_modules/typescript/lib" + }, + "extensions": { + "recommendations": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "webpro.vscode-knip", + "tamasfe.even-better-toml", + "yzhang.markdown-all-in-one", + "github.vscode-pull-request-github", + "eamodio.gitlens" + ] + } +} From bbb31fc894470c30cda8466d85b865b27fb9166b Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 28 Mar 2026 23:29:30 -0400 Subject: [PATCH 015/253] Update image --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 45329c341..ddf43676c 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,6 +1,6 @@ { "name": "Sable", - "image": "mcr.microsoft.com/devcontainers/javascript-node:1-24-bookworm", + "image": "mcr.microsoft.com/devcontainers/javascript-node:24-bookworm", // Minimum 4 cores / 8 GB RAM so Vite builds and TypeScript checks don't crawl "hostRequirements": { From 34b1b4de723bcc0924cc5e3f38f3d7e7b0fa8912 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 28 Mar 2026 23:35:08 -0400 Subject: [PATCH 016/253] update startup script --- .devcontainer/on-create.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/on-create.sh b/.devcontainer/on-create.sh index 1d5123eaa..7f6f789d8 100644 --- a/.devcontainer/on-create.sh +++ b/.devcontainer/on-create.sh @@ -4,7 +4,7 @@ set -euo pipefail echo "==> [on-create] Enabling corepack (pnpm)..." -corepack enable +sudo corepack enable corepack prepare pnpm@latest --activate echo "==> [on-create] Configuring pnpm global store..." From 3edf610f122da8762d3134e28702c33d4231aed5 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 28 Mar 2026 23:56:22 -0400 Subject: [PATCH 017/253] Update setup-signing script --- .devcontainer/setup-signing.sh | 61 ++++++++++++++++++++++------------ 1 file changed, 40 insertions(+), 21 deletions(-) diff --git a/.devcontainer/setup-signing.sh b/.devcontainer/setup-signing.sh index d8262cf3b..9191572f9 100644 --- a/.devcontainer/setup-signing.sh +++ b/.devcontainer/setup-signing.sh @@ -1,29 +1,49 @@ #!/usr/bin/env bash -# setup-signing.sh β€” configures SSH commit signing via forwarded SSH agent. -# Safe to re-run at any time. YubiKey-backed keys work as long as the -# SSH agent from your local machine is forwarded (VS Code handles this). +# setup-signing.sh β€” configures SSH commit signing. +# Supports two modes: +# 1. Forwarded SSH agent (VS Code desktop + YubiKey) +# 2. Codespace-local SSH key (browser/web Codespaces) +# Safe to re-run at any time. set -euo pipefail SABLE_DIR="/workspaces/Sable" ALLOWED_SIGNERS_FILE="$HOME/.config/git/allowed_signers" +CODESPACE_KEY="$HOME/.ssh/codespace_signing_ed25519" -# Check if SSH agent is available and has keys loaded -if ! ssh-add -L &>/dev/null || [ -z "$(ssh-add -L 2>/dev/null)" ]; then - echo "⚠ No SSH keys found in the forwarded agent." - echo " Make sure your local SSH agent is running and your YubiKey key is loaded." - echo " On macOS: ssh-add --apple-use-keychain ~/.ssh/id_ed25519" - echo " To retry: bash .devcontainer/setup-signing.sh" - exit 0 -fi - -# Pick the first key; if your YubiKey-backed key is not first, adjust: -# e.g. SIGNING_KEY=$(ssh-add -L | grep "cardno:" | head -1) -SIGNING_KEY=$(ssh-add -L | head -1) -KEY_COMMENT=$(echo "$SIGNING_KEY" | awk '{print $NF}') +# ── MODE 1: Forwarded SSH agent (desktop VS Code) ──────────────────────────── +if ssh-add -L &>/dev/null && [ -n "$(ssh-add -L 2>/dev/null)" ]; then + echo "βœ“ Detected forwarded SSH agent (desktop VS Code + YubiKey mode)" + SIGNING_KEY=$(ssh-add -L | head -1) + KEY_COMMENT=$(echo "$SIGNING_KEY" | awk '{print $NF}') + echo " Using key: ...${KEY_COMMENT}" -echo "βœ“ Found SSH key: ...${KEY_COMMENT}" +# ── MODE 2: Codespace-local key (web Codespaces) ───────────────────────────── +else + echo "β„Ή No forwarded agent (web Codespace mode)" + + if [ ! -f "$CODESPACE_KEY" ]; then + echo " Generating new Ed25519 signing key..." + mkdir -p "$HOME/.ssh" + ssh-keygen -t ed25519 -f "$CODESPACE_KEY" -N "" -C "codespace-signing@$(hostname)" + echo "" + echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" + echo " πŸ”‘ Add this PUBLIC KEY to GitHub as a SIGNING key:" + echo "" + cat "${CODESPACE_KEY}.pub" + echo "" + echo " πŸ‘‰ https://github.com/settings/keys β†’ New SSH key" + echo " Title: Codespace Signing Key" + echo " Key type: Signing Key" + echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" + echo "" + read -p "Press Enter after adding the key to GitHub..." + fi + + SIGNING_KEY=$(cat "${CODESPACE_KEY}.pub") + echo " Using Codespace key: ${CODESPACE_KEY}" +fi -# Configure git to use SSH signing +# ── Common: Configure git ──────────────────────────────────────────────────── git config --global gpg.format ssh git config --global user.signingkey "$SIGNING_KEY" git config --global commit.gpgsign true @@ -33,7 +53,6 @@ git config --global tag.gpgsign true USER_EMAIL=$(git config --global user.email 2>/dev/null || echo "") if [ -n "$USER_EMAIL" ]; then mkdir -p "$(dirname "$ALLOWED_SIGNERS_FILE")" - # Remove stale entry for this email if present, then add fresh one if [ -f "$ALLOWED_SIGNERS_FILE" ]; then grep -v "^$USER_EMAIL " "$ALLOWED_SIGNERS_FILE" > "${ALLOWED_SIGNERS_FILE}.tmp" || true mv "${ALLOWED_SIGNERS_FILE}.tmp" "$ALLOWED_SIGNERS_FILE" @@ -47,5 +66,5 @@ else fi echo "" -echo "Test signing with: git commit --allow-empty -m 'test signing'" -echo "Verify with: git log --show-signature -1" +echo "Test signing: git commit --allow-empty -m 'test signing'" +echo "Verify: git log --show-signature -1" \ No newline at end of file From 37b6af198e4de1444fc9d3a0c892107fd5f3ebce Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 00:06:13 -0400 Subject: [PATCH 018/253] Updates for ssh --- .devcontainer/post-start.sh | 20 +++++++++++++++----- .devcontainer/setup-signing.sh | 10 ++++++++++ sable.code-workspace | 14 +++++++------- 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/.devcontainer/post-start.sh b/.devcontainer/post-start.sh index c49b2eeb2..7afe0c3cc 100644 --- a/.devcontainer/post-start.sh +++ b/.devcontainer/post-start.sh @@ -20,18 +20,28 @@ if [ "$BEHIND" != "0" ] && [ "$BEHIND" != "?" ]; then fi # ── Re-configure SSH signing if not already set (agent may now be available) ─ +CODESPACE_KEY="$HOME/.ssh/codespace_signing_ed25519" if [ "$(git config --global gpg.format 2>/dev/null)" != "ssh" ]; then bash "$SABLE_DIR/.devcontainer/setup-signing.sh" || true else - # Verify the key still exists in the agent (yubikey could have changed) + # Verify the key still exists in the agent CONFIGURED_KEY=$(git config --global user.signingkey 2>/dev/null || echo "") if [ -n "$CONFIGURED_KEY" ]; then if ! ssh-add -L 2>/dev/null | grep -qF "$CONFIGURED_KEY"; then - echo "" - echo " ⚠ Signing key not found in SSH agent. YubiKey present?" - echo " Re-run: bash .devcontainer/setup-signing.sh" + # In web Codespace mode, reload the key into a fresh agent + if [ -f "$CODESPACE_KEY" ]; then + echo " ↻ Reloading Codespace signing key into SSH agent..." + if [ -z "$SSH_AUTH_SOCK" ] || ! ssh-add -l &>/dev/null; then + eval "$(ssh-agent -s)" > /dev/null + echo "export SSH_AUTH_SOCK=$SSH_AUTH_SOCK" >> "$HOME/.bashrc" + echo "export SSH_AGENT_PID=$SSH_AGENT_PID" >> "$HOME/.bashrc" + fi + ssh-add "$CODESPACE_KEY" 2>/dev/null && echo " βœ“ Commit signing ready" + else + echo " ⚠ Signing key not found. YubiKey present or re-run: bash .devcontainer/setup-signing.sh" + fi else - echo " βœ“ Commit signing ready (SSH via forwarded agent)" + echo " βœ“ Commit signing ready" fi fi fi diff --git a/.devcontainer/setup-signing.sh b/.devcontainer/setup-signing.sh index 9191572f9..189f29383 100644 --- a/.devcontainer/setup-signing.sh +++ b/.devcontainer/setup-signing.sh @@ -39,6 +39,16 @@ else read -p "Press Enter after adding the key to GitHub..." fi + # Start ssh-agent if not already running and add the key + if [ -z "$SSH_AUTH_SOCK" ] || ! ssh-add -l &>/dev/null; then + echo " Starting SSH agent and loading key..." + eval "$(ssh-agent -s)" > /dev/null + ssh-add "$CODESPACE_KEY" 2>/dev/null + # Persist SSH_AUTH_SOCK for future shells + echo "export SSH_AUTH_SOCK=$SSH_AUTH_SOCK" >> "$HOME/.bashrc" + echo "export SSH_AGENT_PID=$SSH_AGENT_PID" >> "$HOME/.bashrc" + fi + SIGNING_KEY=$(cat "${CODESPACE_KEY}.pub") echo " Using Codespace key: ${CODESPACE_KEY}" fi diff --git a/sable.code-workspace b/sable.code-workspace index b7b699ce8..f937d83ca 100644 --- a/sable.code-workspace +++ b/sable.code-workspace @@ -2,16 +2,16 @@ "folders": [ { "path": ".", - "name": "Sable" + "name": "Sable", }, { "path": "../Sable-Docs", - "name": "Sable-Docs" - } + "name": "Sable-Docs", + }, ], "settings": { "editor.formatOnSave": true, - "typescript.tsdk": "Sable/node_modules/typescript/lib" + "typescript.tsdk": "Sable/node_modules/typescript/lib", }, "extensions": { "recommendations": [ @@ -21,7 +21,7 @@ "tamasfe.even-better-toml", "yzhang.markdown-all-in-one", "github.vscode-pull-request-github", - "eamodio.gitlens" - ] - } + "eamodio.gitlens", + ], + }, } From 2ac47de3c47c5861621a6863a71da3ff4c49bf76 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 00:13:24 -0400 Subject: [PATCH 019/253] More script fixes --- .devcontainer/post-start.sh | 2 +- .devcontainer/setup-signing.sh | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.devcontainer/post-start.sh b/.devcontainer/post-start.sh index 7afe0c3cc..e4f64eda4 100644 --- a/.devcontainer/post-start.sh +++ b/.devcontainer/post-start.sh @@ -31,7 +31,7 @@ else # In web Codespace mode, reload the key into a fresh agent if [ -f "$CODESPACE_KEY" ]; then echo " ↻ Reloading Codespace signing key into SSH agent..." - if [ -z "$SSH_AUTH_SOCK" ] || ! ssh-add -l &>/dev/null; then + if [ -z "${SSH_AUTH_SOCK:-}" ] || ! ssh-add -l &>/dev/null; then eval "$(ssh-agent -s)" > /dev/null echo "export SSH_AUTH_SOCK=$SSH_AUTH_SOCK" >> "$HOME/.bashrc" echo "export SSH_AGENT_PID=$SSH_AGENT_PID" >> "$HOME/.bashrc" diff --git a/.devcontainer/setup-signing.sh b/.devcontainer/setup-signing.sh index 189f29383..647c5926c 100644 --- a/.devcontainer/setup-signing.sh +++ b/.devcontainer/setup-signing.sh @@ -40,7 +40,7 @@ else fi # Start ssh-agent if not already running and add the key - if [ -z "$SSH_AUTH_SOCK" ] || ! ssh-add -l &>/dev/null; then + if [ -z "${SSH_AUTH_SOCK:-}" ] || ! ssh-add -l &>/dev/null; then echo " Starting SSH agent and loading key..." eval "$(ssh-agent -s)" > /dev/null ssh-add "$CODESPACE_KEY" 2>/dev/null From 68fdb85969ee82f025ee9f929e4eed52b24a266b Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 00:20:15 -0400 Subject: [PATCH 020/253] more fixes --- .devcontainer/post-start.sh | 27 ++++++++++++++------------- .devcontainer/setup-signing.sh | 25 +++++++++++++------------ 2 files changed, 27 insertions(+), 25 deletions(-) diff --git a/.devcontainer/post-start.sh b/.devcontainer/post-start.sh index e4f64eda4..f2353f39f 100644 --- a/.devcontainer/post-start.sh +++ b/.devcontainer/post-start.sh @@ -24,24 +24,25 @@ CODESPACE_KEY="$HOME/.ssh/codespace_signing_ed25519" if [ "$(git config --global gpg.format 2>/dev/null)" != "ssh" ]; then bash "$SABLE_DIR/.devcontainer/setup-signing.sh" || true else - # Verify the key still exists in the agent + # Verify the signing key is still accessible CONFIGURED_KEY=$(git config --global user.signingkey 2>/dev/null || echo "") if [ -n "$CONFIGURED_KEY" ]; then - if ! ssh-add -L 2>/dev/null | grep -qF "$CONFIGURED_KEY"; then - # In web Codespace mode, reload the key into a fresh agent - if [ -f "$CODESPACE_KEY" ]; then - echo " ↻ Reloading Codespace signing key into SSH agent..." - if [ -z "${SSH_AUTH_SOCK:-}" ] || ! ssh-add -l &>/dev/null; then - eval "$(ssh-agent -s)" > /dev/null - echo "export SSH_AUTH_SOCK=$SSH_AUTH_SOCK" >> "$HOME/.bashrc" - echo "export SSH_AGENT_PID=$SSH_AGENT_PID" >> "$HOME/.bashrc" - fi - ssh-add "$CODESPACE_KEY" 2>/dev/null && echo " βœ“ Commit signing ready" + # If it's a file path (MODE 2), check file exists + if [[ "$CONFIGURED_KEY" == /* ]]; then + if [ -f "$CONFIGURED_KEY" ]; then + echo " βœ“ Commit signing ready (private key file)" else - echo " ⚠ Signing key not found. YubiKey present or re-run: bash .devcontainer/setup-signing.sh" + echo " ⚠ Signing key file not found: $CONFIGURED_KEY" + echo " Re-run: bash .devcontainer/setup-signing.sh" fi + # If it's a public key string (MODE 1), check agent else - echo " βœ“ Commit signing ready" + if ssh-add -L 2>/dev/null | grep -qF "$CONFIGURED_KEY"; then + echo " βœ“ Commit signing ready (forwarded agent)" + else + echo " ⚠ Signing key not in SSH agent. YubiKey present?" + echo " Re-run: bash .devcontainer/setup-signing.sh" + fi fi fi fi diff --git a/.devcontainer/setup-signing.sh b/.devcontainer/setup-signing.sh index 647c5926c..ca5866095 100644 --- a/.devcontainer/setup-signing.sh +++ b/.devcontainer/setup-signing.sh @@ -39,17 +39,8 @@ else read -p "Press Enter after adding the key to GitHub..." fi - # Start ssh-agent if not already running and add the key - if [ -z "${SSH_AUTH_SOCK:-}" ] || ! ssh-add -l &>/dev/null; then - echo " Starting SSH agent and loading key..." - eval "$(ssh-agent -s)" > /dev/null - ssh-add "$CODESPACE_KEY" 2>/dev/null - # Persist SSH_AUTH_SOCK for future shells - echo "export SSH_AUTH_SOCK=$SSH_AUTH_SOCK" >> "$HOME/.bashrc" - echo "export SSH_AGENT_PID=$SSH_AGENT_PID" >> "$HOME/.bashrc" - fi - - SIGNING_KEY=$(cat "${CODESPACE_KEY}.pub") + # Use the private key file directly (git supports this without ssh-agent) + SIGNING_KEY="$CODESPACE_KEY" echo " Using Codespace key: ${CODESPACE_KEY}" fi @@ -67,7 +58,17 @@ if [ -n "$USER_EMAIL" ]; then grep -v "^$USER_EMAIL " "$ALLOWED_SIGNERS_FILE" > "${ALLOWED_SIGNERS_FILE}.tmp" || true mv "${ALLOWED_SIGNERS_FILE}.tmp" "$ALLOWED_SIGNERS_FILE" fi - echo "$USER_EMAIL namespaces=\"git\" $SIGNING_KEY" >> "$ALLOWED_SIGNERS_FILE" + + # For allowed_signers, always use the public key (even if signing with private key file) + if [ -f "$CODESPACE_KEY" ]; then + # MODE 2: read public key from file + PUBLIC_KEY=$(cat "${CODESPACE_KEY}.pub") + else + # MODE 1: already have public key in $SIGNING_KEY + PUBLIC_KEY="$SIGNING_KEY" + fi + + echo "$USER_EMAIL namespaces=\"git\" $PUBLIC_KEY" >> "$ALLOWED_SIGNERS_FILE" git config --global gpg.ssh.allowedSignersFile "$ALLOWED_SIGNERS_FILE" echo "βœ“ SSH commit signing configured for <$USER_EMAIL>" else From 6aa40cc7e4107e75cbd04e912d5460db705d9670 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 04:31:10 +0000 Subject: [PATCH 021/253] updates --- .devcontainer/on-create.sh | 0 .devcontainer/post-create.sh | 0 .devcontainer/post-start.sh | 0 .devcontainer/setup-signing.sh | 0 .devcontainer/update-content.sh | 0 pnpm-workspace.yaml | 3 ++- 6 files changed, 2 insertions(+), 1 deletion(-) mode change 100644 => 100755 .devcontainer/on-create.sh mode change 100644 => 100755 .devcontainer/post-create.sh mode change 100644 => 100755 .devcontainer/post-start.sh mode change 100644 => 100755 .devcontainer/setup-signing.sh mode change 100644 => 100755 .devcontainer/update-content.sh diff --git a/.devcontainer/on-create.sh b/.devcontainer/on-create.sh old mode 100644 new mode 100755 diff --git a/.devcontainer/post-create.sh b/.devcontainer/post-create.sh old mode 100644 new mode 100755 diff --git a/.devcontainer/post-start.sh b/.devcontainer/post-start.sh old mode 100644 new mode 100755 diff --git a/.devcontainer/setup-signing.sh b/.devcontainer/setup-signing.sh old mode 100644 new mode 100755 diff --git a/.devcontainer/update-content.sh b/.devcontainer/update-content.sh old mode 100644 new mode 100755 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index bf9aa6763..fbcf9139d 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,6 +1,7 @@ allowBuilds: '@sentry/cli': true '@swc/core': true + cloudflared: true esbuild: true sharp: true unrs-resolver: true @@ -13,11 +14,11 @@ minimumReleaseAgeExclude: overrides: brace-expansion: '>=1.1.12' esbuild: '>=0.25.0' + flatted: '>=3.4.2' lodash: '>=4.17.23' minimatch: '>=10.2.3' rollup: '>=4.59.0' serialize-javascript: '>=7.0.3' - flatted: '>=3.4.2' undici: '>=7.24.0' peerDependencyRules: From 698bda09a1ee2acccafe395e1a714ae126327851 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 04:36:12 +0000 Subject: [PATCH 022/253] add/setup extensions --- .devcontainer/devcontainer.json | 21 ++++++++++++++++++++- .vscode/extensions.json | 28 +++++++++++++++++++++++++++- .vscode/settings.json | 17 +++++++++++++++++ 3 files changed, 64 insertions(+), 2 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index ddf43676c..c1ffa7c9e 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -33,15 +33,34 @@ "esbenp.prettier-vscode", "webpro.vscode-knip", "ms-vscode.vscode-typescript-next", + "usernamehw.errorlens", + "christian-kohler.path-intellisense", + "styled-components.vscode-styled-components", + "bradlc.vscode-tailwindcss", + // React/TypeScript + "dsznajder.es7-react-js-snippets", + "formulahendry.auto-rename-tag", + "wix.vscode-import-cost", + // i18n + "lokalise.i18n-ally", + // Testing + "vitest.explorer", // Git & GitHub "github.vscode-pull-request-github", "eamodio.gitlens", + // Infrastructure + "hashicorp.terraform", + "zamerick.vscode-caddyfile-syntax", // Docs (Zola / TOML / Markdown) "tamasfe.even-better-toml", "yzhang.markdown-all-in-one", "eliostruyf.vscode-front-matter", + "streetsidesoftware.code-spell-checker", + "davidanson.vscode-markdownlint", // Misc - "EditorConfig.EditorConfig" + "EditorConfig.EditorConfig", + "gruntfuggly.todo-tree", + "wayou.vscode-todo-highlight" ], "settings": { "editor.formatOnSave": true, diff --git a/.vscode/extensions.json b/.vscode/extensions.json index a3854a859..e9829388d 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,3 +1,29 @@ { - "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "webpro.vscode-knip"] + "recommendations": [ + // JS/TS toolchain + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "webpro.vscode-knip", + "usernamehw.errorlens", + "christian-kohler.path-intellisense", + "styled-components.vscode-styled-components", + "bradlc.vscode-tailwindcss", + // React/TypeScript + "dsznajder.es7-react-js-snippets", + "formulahendry.auto-rename-tag", + "wix.vscode-import-cost", + // i18n + "lokalise.i18n-ally", + // Testing + "vitest.explorer", + // Infrastructure + "hashicorp.terraform", + "zamerick.vscode-caddyfile-syntax", + // Documentation + "streetsidesoftware.code-spell-checker", + "davidanson.vscode-markdownlint", + // Quality of Life + "gruntfuggly.todo-tree", + "wayou.vscode-todo-highlight" + ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 29e56e92a..c37ff9c79 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,5 +7,22 @@ }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + // i18n Ally configuration + "i18n-ally.localesPaths": ["public/locales"], + "i18n-ally.keystyle": "nested", + "i18n-ally.enabledFrameworks": ["react", "i18next"], + "i18n-ally.namespace": true, + "i18n-ally.pathMatcher": "{locale}.json", + // Error Lens configuration + "errorLens.enabled": true, + // Import Cost configuration + "importCost.bundleSizeDecoration": "both", + "importCost.showCalculatingDecoration": true, + // Todo Tree configuration + "todo-tree.general.tags": ["TODO", "FIXME", "HACK", "XXX", "NOTE", "BUG"], + "todo-tree.highlights.defaultHighlight": { + "icon": "alert", + "type": "text" } } From 2ab3bcda9cdf3269001f9b7300a44d242b69be94 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 10:18:03 -0400 Subject: [PATCH 023/253] chore(config): enable phase1 and phase2 session sync flags --- config.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/config.json b/config.json index 90daf2190..8f685bfd4 100644 --- a/config.json +++ b/config.json @@ -20,6 +20,11 @@ "vapidPublicKey": "BEBdK6VUiqYxcOauFCM1ZB38llgiODAs6pR5EEcC7YBoUh2YvrULagwo5t-Ms0Is0lEmKDhpdUoMiy_i7ArI3oE", "webPushAppID": "social.cloudhub.sable.web" }, + "sessionSync": { + "phase1ForegroundResync": true, + "phase2VisibleHeartbeat": true, + "phase3AdaptiveBackoffJitter": false + }, "slidingSync": { "enabled": "true" } From 2cf9895c2197a2509738cef582c13316d863fb69 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 11:53:49 -0400 Subject: [PATCH 024/253] chore(config): add Copilot workspace instructions --- .github/copilot-instructions.md | 82 +++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 .github/copilot-instructions.md diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 000000000..882847e80 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,82 @@ +# Sable – GitHub Copilot Workspace Instructions + +These rules apply to every chat and agent session in this workspace. + +--- + +## Git & Branching + +- **Never commit directly to `dev` or `integration`.** All work goes on a dedicated branch (`fix/…`, `feat/…`, `chore/…`, etc.). +- Before building `integration`, always **force-update `dev` from `upstream/dev`**: + ``` + git fetch upstream && git checkout dev && git reset --hard upstream/dev + ``` +- When asked to build `integration`, **always prompt for which feature/fix branches to include**. If a needed branch doesn't exist yet, create it first. +- Use short, scoped commit messages: `type(scope): description` (e.g. `fix(timeline): correct scroll anchor on bulk load`). + +## Quality Gates (must pass before every commit) + +Run these in order and fix all failures before committing: + +``` +pnpm lint # ESLint +pnpm fmt:check # Prettier +pnpm typecheck # TypeScript +pnpm test:run # Vitest unit tests +pnpm knip # Dead-code / unused exports check +``` + +Also run a **production build** and confirm it succeeds with no errors: +``` +pnpm build +``` + +## Pull Requests + +- Use the upstream PR template ([`.github/PULL_REQUEST_TEMPLATE.md`](.github/PULL_REQUEST_TEMPLATE.md)) in full β€” all checkboxes must be present. +- Descriptions should be short, clear, and human-readable. No AI-generated explanations in the AI disclosure section. +- Each PR gets **one changeset line** (or one `fix:` + one `feat:` if both are genuinely present, though prefer separate PRs). +- PRs must not target `dev` directly without a reviewed branch. +- Before opening a PR, **search for related open and merged PRs on both `upstream` (SableClient/Sable or cinnyapp/cinny) and `origin`**. Review them to understand what else may be in flight that could affect the change. Summarise any findings and ask the user how to proceed if there is overlap or conflict. +- Before opening a PR, **search for related open issues on both `upstream` and `origin`**. If any are related, prompt the user to confirm, then link them in the PR description (`Closes #N` / `Related to #N`). +- If the PR has a corresponding `SableClient/docs` PR, link both PRs to each other in their descriptions. + +## Matrix Spec Compliance + +- New features and fixes must match the **current Matrix spec** or the relevant **MSC** if the spec change is pending. +- Check how **Element Web**, **FluffyChat**, or **Nheko** implement the same thing before diverging from established client patterns. +- Link the relevant spec section or MSC in the PR description when the change is spec-driven. + +## Feature Flags + +- Every user-visible new feature must be gated behind a **feature flag** in `config.json` / `useClientConfig`. +- Flags default to `false` (opt-in) unless the feature is a bug fix or a non-breaking improvement with no regressions. +- Document the flag in `docs/sample.env` and in the Sable-Docs documentation repo. + +## Code Quality + +- Code must follow **TypeScript/React best practices**: functional components, hooks, no class components, proper dependency arrays on `useEffect`/`useCallback`/`useMemo`. +- No `any` casts without a comment explaining why it's unavoidable. +- Comments must be **short and purposeful** β€” explain *why*, not *what*. No decorative separator lines (`//------`), no block comments restating the code. +- Do not add docstrings, comments, or type annotations to code that wasn't changed in the current task. +- Prefer explicit types over inferred types for public function signatures. + +## Documentation + +- When a new feature is added (or an existing one materially changed), **update the Sable-Docs repo** (`/Users/evie/git/Sable-Docs`). Add or update the relevant page under `content/features/` or `content/general/`. +- Keep docs concise β€” match the style of existing pages. + +## Security + +- Follow OWASP Top 10 guidance. No `innerHTML`, no `eval`, sanitise all user/Matrix-sourced content before rendering. +- Do not log or expose access tokens, room keys, or other secrets. +- Content Security Policy headers (Caddyfile / Dockerfile) must not be weakened without a documented reason. + +## Additional Rules + +- **No over-engineering**: only make changes directly requested or clearly necessary. Don't add abstractions for one-off operations. +- **Reversible actions only**: ask before deleting files/branches, force-pushing, or dropping data. +- **Dependency changes** (adding/removing packages) require explicit confirmation before running `pnpm install`. +- When resolving merge conflicts, prefer the version from the feature branch; ask if the intent is ambiguous. +- Test files live alongside source in `src/` (e.g. `*.test.ts`). Match the naming convention of existing tests. +- **Write tests when needed**: any new utility function, hook, or non-trivial logic should have a corresponding Vitest test. Bug fixes should include a regression test where feasible. From bc6b57d361a514c0f96a5bbab1dfb0ba378c4cf2 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 12:29:40 -0400 Subject: [PATCH 025/253] chore(config): remove devcontainer (setup didn't work out) --- .devcontainer/devcontainer.json | 90 --------------------------------- .devcontainer/on-create.sh | 19 ------- .devcontainer/post-create.sh | 72 -------------------------- .devcontainer/post-start.sh | 50 ------------------ .devcontainer/setup-signing.sh | 81 ----------------------------- .devcontainer/update-content.sh | 19 ------- 6 files changed, 331 deletions(-) delete mode 100644 .devcontainer/devcontainer.json delete mode 100755 .devcontainer/on-create.sh delete mode 100755 .devcontainer/post-create.sh delete mode 100755 .devcontainer/post-start.sh delete mode 100755 .devcontainer/setup-signing.sh delete mode 100755 .devcontainer/update-content.sh diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json deleted file mode 100644 index c1ffa7c9e..000000000 --- a/.devcontainer/devcontainer.json +++ /dev/null @@ -1,90 +0,0 @@ -{ - "name": "Sable", - "image": "mcr.microsoft.com/devcontainers/javascript-node:24-bookworm", - - // Minimum 4 cores / 8 GB RAM so Vite builds and TypeScript checks don't crawl - "hostRequirements": { - "cpus": 4, - "memory": "8gb", - "storage": "32gb" - }, - - "features": { - // GitHub CLI for PR/issue/fork management - "ghcr.io/devcontainers/features/github-cli:1": {} - }, - - // Expose Vite dev server and Zola docs preview - "forwardPorts": [5173, 8080, 1111], - "portsAttributes": { - "5173": { "label": "Vite Dev Server", "onAutoForward": "notify" }, - "8080": { "label": "App Preview", "onAutoForward": "notify" }, - "1111": { "label": "Docs Preview (Zola)", "onAutoForward": "notify" } - }, - - // Open the multi-root workspace covering both Sable + Sable-Docs - "workspaceFile": "${localWorkspaceFolder}/sable.code-workspace", - - "customizations": { - "vscode": { - "extensions": [ - // JS/TS toolchain - "dbaeumer.vscode-eslint", - "esbenp.prettier-vscode", - "webpro.vscode-knip", - "ms-vscode.vscode-typescript-next", - "usernamehw.errorlens", - "christian-kohler.path-intellisense", - "styled-components.vscode-styled-components", - "bradlc.vscode-tailwindcss", - // React/TypeScript - "dsznajder.es7-react-js-snippets", - "formulahendry.auto-rename-tag", - "wix.vscode-import-cost", - // i18n - "lokalise.i18n-ally", - // Testing - "vitest.explorer", - // Git & GitHub - "github.vscode-pull-request-github", - "eamodio.gitlens", - // Infrastructure - "hashicorp.terraform", - "zamerick.vscode-caddyfile-syntax", - // Docs (Zola / TOML / Markdown) - "tamasfe.even-better-toml", - "yzhang.markdown-all-in-one", - "eliostruyf.vscode-front-matter", - "streetsidesoftware.code-spell-checker", - "davidanson.vscode-markdownlint", - // Misc - "EditorConfig.EditorConfig", - "gruntfuggly.todo-tree", - "wayou.vscode-todo-highlight" - ], - "settings": { - "editor.formatOnSave": true, - "editor.defaultFormatter": "esbenp.prettier-vscode", - "typescript.tsdk": "node_modules/typescript/lib", - "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, - "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, - "[toml]": { "editor.defaultFormatter": "tamasfe.even-better-toml" }, - "git.autofetch": true, - "terminal.integrated.defaultProfile.linux": "bash" - } - } - }, - - // ── Lifecycle hooks ──────────────────────────────────────────────────────── - // on-create : runs ONCE when the prebuild image is first built (cached) - // update-content: re-runs on each prebuild refresh & new codespace create (cached) - // post-create : runs once on each new codespace (not cached) – user-specific setup - // post-start : runs on EVERY codespace start (fetch upstream, signing check) - - "onCreateCommand": "bash .devcontainer/on-create.sh", - "updateContentCommand": "bash .devcontainer/update-content.sh", - "postCreateCommand": "bash .devcontainer/post-create.sh", - "postStartCommand": "bash .devcontainer/post-start.sh", - - "remoteUser": "node" -} diff --git a/.devcontainer/on-create.sh b/.devcontainer/on-create.sh deleted file mode 100755 index 7f6f789d8..000000000 --- a/.devcontainer/on-create.sh +++ /dev/null @@ -1,19 +0,0 @@ -#!/usr/bin/env bash -# on-create.sh β€” runs ONCE when the prebuild image is first built -# Everything here is cached between prebuild refreshes. -set -euo pipefail - -echo "==> [on-create] Enabling corepack (pnpm)..." -sudo corepack enable -corepack prepare pnpm@latest --activate - -echo "==> [on-create] Configuring pnpm global store..." -pnpm config set store-dir /home/node/.local/share/pnpm/store - -echo "==> [on-create] Installing Zola (for Sable-Docs preview)..." -ZOLA_VERSION="0.19.2" -ZOLA_URL="https://github.com/getzola/zola/releases/download/v${ZOLA_VERSION}/zola-v${ZOLA_VERSION}-x86_64-unknown-linux-gnu.tar.gz" -curl -fsSL "$ZOLA_URL" | sudo tar xz -C /usr/local/bin -zola --version - -echo "==> [on-create] Done." diff --git a/.devcontainer/post-create.sh b/.devcontainer/post-create.sh deleted file mode 100755 index 4f2ef27a1..000000000 --- a/.devcontainer/post-create.sh +++ /dev/null @@ -1,72 +0,0 @@ -#!/usr/bin/env bash -# post-create.sh β€” runs ONCE per new codespace (not cached in prebuild). -# Handles user-specific git setup: remotes, branches, signing. -set -euo pipefail - -SABLE_DIR="/workspaces/Sable" -DOCS_DIR="/workspaces/Sable-Docs" - -# ── 1. Upstream remotes ─────────────────────────────────────────────────────── -echo "==> [post-create] Configuring upstream remotes..." - -# Sable: fork = origin (Just-Insane/Sable), upstream = SableClient/Sable -if ! git -C "$SABLE_DIR" remote | grep -q "^upstream$"; then - git -C "$SABLE_DIR" remote add upstream https://github.com/SableClient/Sable.git - echo " Added upstream β†’ SableClient/Sable" -else - echo " upstream remote already set" -fi -git -C "$SABLE_DIR" fetch --all --quiet - -# Docs: fork = origin (Just-Insane/docs), upstream = SableClient/docs -if ! git -C "$DOCS_DIR" remote | grep -q "^upstream$"; then - git -C "$DOCS_DIR" remote add upstream https://github.com/SableClient/docs.git - echo " [docs] Added upstream β†’ SableClient/docs" -else - echo " [docs] upstream remote already set" -fi -git -C "$DOCS_DIR" fetch --all --quiet - -# ── 2. Ensure required branches exist ──────────────────────────────────────── -echo "==> [post-create] Ensuring branches exist in Sable..." - -ensure_branch() { - local dir="$1" - local branch="$2" - local start_point="${3:-HEAD}" - if git -C "$dir" ls-remote --heads origin "$branch" | grep -q "$branch"; then - echo " Branch '$branch' already exists on origin, checking out..." - git -C "$dir" fetch origin "$branch" --quiet - if ! git -C "$dir" show-ref --quiet "refs/heads/$branch"; then - git -C "$dir" branch --track "$branch" "origin/$branch" - fi - else - echo " Creating branch '$branch' from $start_point and pushing to origin..." - git -C "$dir" checkout -b "$branch" "$start_point" 2>/dev/null || true - git -C "$dir" push -u origin "$branch" - fi -} - -# Switch back to integration after branch ops -CURRENT_BRANCH=$(git -C "$SABLE_DIR" rev-parse --abbrev-ref HEAD) - -ensure_branch "$SABLE_DIR" "integration" "upstream/dev" -ensure_branch "$SABLE_DIR" "personal/config" "integration" -ensure_branch "$DOCS_DIR" "integration" "upstream/main" - -# Return to whatever branch we were on -git -C "$SABLE_DIR" checkout "$CURRENT_BRANCH" 2>/dev/null || true - -# ── 3. Git signing (SSH via forwarded YubiKey) ──────────────────────────────── -echo "==> [post-create] Configuring SSH commit signing..." -bash "$SABLE_DIR/.devcontainer/setup-signing.sh" || true - -# ── 4. Install git hooks ────────────────────────────────────────────────────── -echo "==> [post-create] Installing git hooks..." -if [ -f "$SABLE_DIR/scripts/install-git-hooks.sh" ]; then - bash "$SABLE_DIR/scripts/install-git-hooks.sh" -fi - -echo "" -echo "==> [post-create] Done! Open sable.code-workspace for the multi-root view." -echo " Run '.devcontainer/setup-signing.sh' any time to reconfigure commit signing." diff --git a/.devcontainer/post-start.sh b/.devcontainer/post-start.sh deleted file mode 100755 index f2353f39f..000000000 --- a/.devcontainer/post-start.sh +++ /dev/null @@ -1,50 +0,0 @@ -#!/usr/bin/env bash -# post-start.sh β€” runs on EVERY codespace start. -# Fetches upstream changes and re-checks signing (agent may have changed). -set -euo pipefail - -SABLE_DIR="/workspaces/Sable" -DOCS_DIR="/workspaces/Sable-Docs" - -# ── Fetch upstream for both repos ──────────────────────────────────────────── -echo "==> [post-start] Fetching upstream..." -git -C "$SABLE_DIR" fetch upstream --quiet 2>/dev/null && echo " Sable upstream fetched" || echo " ⚠ Could not fetch Sable upstream" -git -C "$DOCS_DIR" fetch upstream --quiet 2>/dev/null && echo " Docs upstream fetched" || echo " ⚠ Could not fetch Docs upstream" - -# ── Show how far behind integration is from upstream/dev ───────────────────── -BEHIND=$(git -C "$SABLE_DIR" rev-list --count HEAD..upstream/dev 2>/dev/null || echo "?") -if [ "$BEHIND" != "0" ] && [ "$BEHIND" != "?" ]; then - echo "" - echo " β„Ή Your current branch is $BEHIND commit(s) behind upstream/dev." - echo " To sync: git merge upstream/dev (or: git rebase upstream/dev)" -fi - -# ── Re-configure SSH signing if not already set (agent may now be available) ─ -CODESPACE_KEY="$HOME/.ssh/codespace_signing_ed25519" -if [ "$(git config --global gpg.format 2>/dev/null)" != "ssh" ]; then - bash "$SABLE_DIR/.devcontainer/setup-signing.sh" || true -else - # Verify the signing key is still accessible - CONFIGURED_KEY=$(git config --global user.signingkey 2>/dev/null || echo "") - if [ -n "$CONFIGURED_KEY" ]; then - # If it's a file path (MODE 2), check file exists - if [[ "$CONFIGURED_KEY" == /* ]]; then - if [ -f "$CONFIGURED_KEY" ]; then - echo " βœ“ Commit signing ready (private key file)" - else - echo " ⚠ Signing key file not found: $CONFIGURED_KEY" - echo " Re-run: bash .devcontainer/setup-signing.sh" - fi - # If it's a public key string (MODE 1), check agent - else - if ssh-add -L 2>/dev/null | grep -qF "$CONFIGURED_KEY"; then - echo " βœ“ Commit signing ready (forwarded agent)" - else - echo " ⚠ Signing key not in SSH agent. YubiKey present?" - echo " Re-run: bash .devcontainer/setup-signing.sh" - fi - fi - fi -fi - -echo "" diff --git a/.devcontainer/setup-signing.sh b/.devcontainer/setup-signing.sh deleted file mode 100755 index ca5866095..000000000 --- a/.devcontainer/setup-signing.sh +++ /dev/null @@ -1,81 +0,0 @@ -#!/usr/bin/env bash -# setup-signing.sh β€” configures SSH commit signing. -# Supports two modes: -# 1. Forwarded SSH agent (VS Code desktop + YubiKey) -# 2. Codespace-local SSH key (browser/web Codespaces) -# Safe to re-run at any time. -set -euo pipefail - -SABLE_DIR="/workspaces/Sable" -ALLOWED_SIGNERS_FILE="$HOME/.config/git/allowed_signers" -CODESPACE_KEY="$HOME/.ssh/codespace_signing_ed25519" - -# ── MODE 1: Forwarded SSH agent (desktop VS Code) ──────────────────────────── -if ssh-add -L &>/dev/null && [ -n "$(ssh-add -L 2>/dev/null)" ]; then - echo "βœ“ Detected forwarded SSH agent (desktop VS Code + YubiKey mode)" - SIGNING_KEY=$(ssh-add -L | head -1) - KEY_COMMENT=$(echo "$SIGNING_KEY" | awk '{print $NF}') - echo " Using key: ...${KEY_COMMENT}" - -# ── MODE 2: Codespace-local key (web Codespaces) ───────────────────────────── -else - echo "β„Ή No forwarded agent (web Codespace mode)" - - if [ ! -f "$CODESPACE_KEY" ]; then - echo " Generating new Ed25519 signing key..." - mkdir -p "$HOME/.ssh" - ssh-keygen -t ed25519 -f "$CODESPACE_KEY" -N "" -C "codespace-signing@$(hostname)" - echo "" - echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" - echo " πŸ”‘ Add this PUBLIC KEY to GitHub as a SIGNING key:" - echo "" - cat "${CODESPACE_KEY}.pub" - echo "" - echo " πŸ‘‰ https://github.com/settings/keys β†’ New SSH key" - echo " Title: Codespace Signing Key" - echo " Key type: Signing Key" - echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" - echo "" - read -p "Press Enter after adding the key to GitHub..." - fi - - # Use the private key file directly (git supports this without ssh-agent) - SIGNING_KEY="$CODESPACE_KEY" - echo " Using Codespace key: ${CODESPACE_KEY}" -fi - -# ── Common: Configure git ──────────────────────────────────────────────────── -git config --global gpg.format ssh -git config --global user.signingkey "$SIGNING_KEY" -git config --global commit.gpgsign true -git config --global tag.gpgsign true - -# Set up allowed_signers for local verification -USER_EMAIL=$(git config --global user.email 2>/dev/null || echo "") -if [ -n "$USER_EMAIL" ]; then - mkdir -p "$(dirname "$ALLOWED_SIGNERS_FILE")" - if [ -f "$ALLOWED_SIGNERS_FILE" ]; then - grep -v "^$USER_EMAIL " "$ALLOWED_SIGNERS_FILE" > "${ALLOWED_SIGNERS_FILE}.tmp" || true - mv "${ALLOWED_SIGNERS_FILE}.tmp" "$ALLOWED_SIGNERS_FILE" - fi - - # For allowed_signers, always use the public key (even if signing with private key file) - if [ -f "$CODESPACE_KEY" ]; then - # MODE 2: read public key from file - PUBLIC_KEY=$(cat "${CODESPACE_KEY}.pub") - else - # MODE 1: already have public key in $SIGNING_KEY - PUBLIC_KEY="$SIGNING_KEY" - fi - - echo "$USER_EMAIL namespaces=\"git\" $PUBLIC_KEY" >> "$ALLOWED_SIGNERS_FILE" - git config --global gpg.ssh.allowedSignersFile "$ALLOWED_SIGNERS_FILE" - echo "βœ“ SSH commit signing configured for <$USER_EMAIL>" -else - echo "⚠ user.email not set globally. Run: git config --global user.email 'you@example.com'" - echo " Then re-run: bash .devcontainer/setup-signing.sh" -fi - -echo "" -echo "Test signing: git commit --allow-empty -m 'test signing'" -echo "Verify: git log --show-signature -1" \ No newline at end of file diff --git a/.devcontainer/update-content.sh b/.devcontainer/update-content.sh deleted file mode 100755 index 572ae73ba..000000000 --- a/.devcontainer/update-content.sh +++ /dev/null @@ -1,19 +0,0 @@ -#!/usr/bin/env bash -# update-content.sh β€” runs on each prebuild refresh AND on new codespace creation. -# The resulting filesystem state is cached in the prebuild snapshot. -set -euo pipefail - -echo "==> [update-content] Installing Sable dependencies (pnpm install)..." -pnpm install --frozen-lockfile - -echo "==> [update-content] Cloning / updating Sable-Docs..." -DOCS_DIR="/workspaces/Sable-Docs" -if [ -d "$DOCS_DIR/.git" ]; then - echo " Docs already present, fetching latest..." - git -C "$DOCS_DIR" fetch --all -else - echo " Cloning Just-Insane/docs β†’ $DOCS_DIR" - git clone https://github.com/Just-Insane/docs "$DOCS_DIR" -fi - -echo "==> [update-content] Done." From 94fae0534d2bf5eda58c2b0578d880571b1df3ce Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 17:25:18 -0400 Subject: [PATCH 026/253] Revise GitHub Copilot workspace instructions Updated instructions for pull requests and feature flags. --- .github/copilot-instructions.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 882847e80..1b7ec036c 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,6 +1,6 @@ # Sable – GitHub Copilot Workspace Instructions -These rules apply to every chat and agent session in this workspace. +These rules apply to every chat and agent session in this workspace. Follow all rules that follow while responding to chat requests. --- @@ -34,7 +34,7 @@ pnpm build ## Pull Requests - Use the upstream PR template ([`.github/PULL_REQUEST_TEMPLATE.md`](.github/PULL_REQUEST_TEMPLATE.md)) in full β€” all checkboxes must be present. -- Descriptions should be short, clear, and human-readable. No AI-generated explanations in the AI disclosure section. +- Descriptions should be short, clear, and human-readable. - Each PR gets **one changeset line** (or one `fix:` + one `feat:` if both are genuinely present, though prefer separate PRs). - PRs must not target `dev` directly without a reviewed branch. - Before opening a PR, **search for related open and merged PRs on both `upstream` (SableClient/Sable or cinnyapp/cinny) and `origin`**. Review them to understand what else may be in flight that could affect the change. Summarise any findings and ask the user how to proceed if there is overlap or conflict. @@ -51,7 +51,7 @@ pnpm build - Every user-visible new feature must be gated behind a **feature flag** in `config.json` / `useClientConfig`. - Flags default to `false` (opt-in) unless the feature is a bug fix or a non-breaking improvement with no regressions. -- Document the flag in `docs/sample.env` and in the Sable-Docs documentation repo. +- Document the flag in `config.json` and in the Sable-Docs documentation repo. ## Code Quality From f68ee8e6b3f0f70d53f6a2b628af044e0c426750 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 18:07:14 -0400 Subject: [PATCH 027/253] Update branching instructions for syncing with upstream Added instructions for syncing branches before creating a new branch. --- .github/copilot-instructions.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 1b7ec036c..10a5a8b50 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -7,6 +7,7 @@ These rules apply to every chat and agent session in this workspace. Follow all ## Git & Branching - **Never commit directly to `dev` or `integration`.** All work goes on a dedicated branch (`fix/…`, `feat/…`, `chore/…`, etc.). + - When creating a branch, always sync `upstream/dev` to `origin/dev` and `dev`, and build the branch from `dev` - Before building `integration`, always **force-update `dev` from `upstream/dev`**: ``` git fetch upstream && git checkout dev && git reset --hard upstream/dev From 5c4fe1caf7d014d31f8fc746feaa8ab69d2d1a36 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 30 Mar 2026 13:29:02 -0400 Subject: [PATCH 028/253] Revise instructions for clarity and consistency Updated wording for clarity and consistency in instructions. --- .github/copilot-instructions.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 10a5a8b50..e23b792a5 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,13 +1,13 @@ # Sable – GitHub Copilot Workspace Instructions -These rules apply to every chat and agent session in this workspace. Follow all rules that follow while responding to chat requests. +These rules apply to every chat and agent session in this workspace. Follow all instructions below while responding to chat requests. --- ## Git & Branching - **Never commit directly to `dev` or `integration`.** All work goes on a dedicated branch (`fix/…`, `feat/…`, `chore/…`, etc.). - - When creating a branch, always sync `upstream/dev` to `origin/dev` and `dev`, and build the branch from `dev` + - When creating a branch, always sync `upstream/dev` to `origin/dev` and `dev`, and then build the branch from `dev` - Before building `integration`, always **force-update `dev` from `upstream/dev`**: ``` git fetch upstream && git checkout dev && git reset --hard upstream/dev From 25258f19f060cfc88f29178e4cde0cd6fa177519 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 30 Mar 2026 13:32:23 -0400 Subject: [PATCH 029/253] Move `copilot-instructions.md` to correct location --- .github/copilot-instructions.md => copilot-instructions.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/copilot-instructions.md => copilot-instructions.md (100%) diff --git a/.github/copilot-instructions.md b/copilot-instructions.md similarity index 100% rename from .github/copilot-instructions.md rename to copilot-instructions.md From bfee547a70dfe7512315643267ded2d037322dce Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 30 Mar 2026 13:41:11 -0400 Subject: [PATCH 030/253] Clarify branch creation and PR instructions --- copilot-instructions.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/copilot-instructions.md b/copilot-instructions.md index e23b792a5..bf4716e92 100644 --- a/copilot-instructions.md +++ b/copilot-instructions.md @@ -7,12 +7,12 @@ These rules apply to every chat and agent session in this workspace. Follow all ## Git & Branching - **Never commit directly to `dev` or `integration`.** All work goes on a dedicated branch (`fix/…`, `feat/…`, `chore/…`, etc.). - - When creating a branch, always sync `upstream/dev` to `origin/dev` and `dev`, and then build the branch from `dev` + - When creating a branch (i.e. if a branch for the requested change doesn't exist or there isn't an existing branch that fits), always sync `upstream/dev` to `origin/dev` and `dev`, and then build the branch from `dev` - Before building `integration`, always **force-update `dev` from `upstream/dev`**: ``` git fetch upstream && git checkout dev && git reset --hard upstream/dev ``` -- When asked to build `integration`, **always prompt for which feature/fix branches to include**. If a needed branch doesn't exist yet, create it first. +- When asked to build `integration`, **always prompt for which feature/fix branches to include**. In general, all feat/fix/chore/etc branches should be inlcuded. - Use short, scoped commit messages: `type(scope): description` (e.g. `fix(timeline): correct scroll anchor on bulk load`). ## Quality Gates (must pass before every commit) @@ -34,10 +34,9 @@ pnpm build ## Pull Requests -- Use the upstream PR template ([`.github/PULL_REQUEST_TEMPLATE.md`](.github/PULL_REQUEST_TEMPLATE.md)) in full β€” all checkboxes must be present. +- Use the upstream PR template (i.e. [`.github/PULL_REQUEST_TEMPLATE.md`](.github/PULL_REQUEST_TEMPLATE.md)) in full β€” all checkboxes must be present. - Descriptions should be short, clear, and human-readable. - Each PR gets **one changeset line** (or one `fix:` + one `feat:` if both are genuinely present, though prefer separate PRs). -- PRs must not target `dev` directly without a reviewed branch. - Before opening a PR, **search for related open and merged PRs on both `upstream` (SableClient/Sable or cinnyapp/cinny) and `origin`**. Review them to understand what else may be in flight that could affect the change. Summarise any findings and ask the user how to proceed if there is overlap or conflict. - Before opening a PR, **search for related open issues on both `upstream` and `origin`**. If any are related, prompt the user to confirm, then link them in the PR description (`Closes #N` / `Related to #N`). - If the PR has a corresponding `SableClient/docs` PR, link both PRs to each other in their descriptions. @@ -60,6 +59,7 @@ pnpm build - No `any` casts without a comment explaining why it's unavoidable. - Comments must be **short and purposeful** β€” explain *why*, not *what*. No decorative separator lines (`//------`), no block comments restating the code. - Do not add docstrings, comments, or type annotations to code that wasn't changed in the current task. +- Add concise docstrings, comments, and/or type annotations on updating/new code in the current task. - Prefer explicit types over inferred types for public function signatures. ## Documentation From 6df45a4543ac13819d57255d42343bb80e8f1819 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 30 Mar 2026 15:22:58 -0400 Subject: [PATCH 031/253] Docs have this location too... --- copilot-instructions.md => .github/copilot-instructions.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename copilot-instructions.md => .github/copilot-instructions.md (100%) diff --git a/copilot-instructions.md b/.github/copilot-instructions.md similarity index 100% rename from copilot-instructions.md rename to .github/copilot-instructions.md From a5f35e9bec7806ec302bdc6c52f4cc4f0f9be9a3 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 31 Mar 2026 10:55:38 -0400 Subject: [PATCH 032/253] chore(config): split copilot-instructions into scoped instruction files and AGENTS.md --- .github/copilot-instructions.md | 85 ++----------------- .github/instructions/security.instructions.md | 10 +++ .../instructions/typescript.instructions.md | 29 +++++++ AGENTS.md | 73 ++++++++++++++++ 4 files changed, 121 insertions(+), 76 deletions(-) create mode 100644 .github/instructions/security.instructions.md create mode 100644 .github/instructions/typescript.instructions.md create mode 100644 AGENTS.md diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index bf4716e92..401bc55cb 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,83 +1,16 @@ -# Sable – GitHub Copilot Workspace Instructions +# Sable – GitHub Copilot Instructions -These rules apply to every chat and agent session in this workspace. Follow all instructions below while responding to chat requests. +Universal rules that apply to every session. Detailed guidance lives in `.github/instructions/` and `AGENTS.md`. ---- - -## Git & Branching +## Core Rules - **Never commit directly to `dev` or `integration`.** All work goes on a dedicated branch (`fix/…`, `feat/…`, `chore/…`, etc.). - - When creating a branch (i.e. if a branch for the requested change doesn't exist or there isn't an existing branch that fits), always sync `upstream/dev` to `origin/dev` and `dev`, and then build the branch from `dev` -- Before building `integration`, always **force-update `dev` from `upstream/dev`**: +- Use short, scoped commit messages: `type(scope): description` (e.g. `fix(timeline): correct scroll anchor on bulk load`). +- Run quality gates in order and fix all failures before committing: ``` - git fetch upstream && git checkout dev && git reset --hard upstream/dev + pnpm lint && pnpm fmt:check && pnpm typecheck && pnpm test:run && pnpm knip && pnpm build ``` -- When asked to build `integration`, **always prompt for which feature/fix branches to include**. In general, all feat/fix/chore/etc branches should be inlcuded. -- Use short, scoped commit messages: `type(scope): description` (e.g. `fix(timeline): correct scroll anchor on bulk load`). - -## Quality Gates (must pass before every commit) - -Run these in order and fix all failures before committing: - -``` -pnpm lint # ESLint -pnpm fmt:check # Prettier -pnpm typecheck # TypeScript -pnpm test:run # Vitest unit tests -pnpm knip # Dead-code / unused exports check -``` - -Also run a **production build** and confirm it succeeds with no errors: -``` -pnpm build -``` - -## Pull Requests - -- Use the upstream PR template (i.e. [`.github/PULL_REQUEST_TEMPLATE.md`](.github/PULL_REQUEST_TEMPLATE.md)) in full β€” all checkboxes must be present. -- Descriptions should be short, clear, and human-readable. -- Each PR gets **one changeset line** (or one `fix:` + one `feat:` if both are genuinely present, though prefer separate PRs). -- Before opening a PR, **search for related open and merged PRs on both `upstream` (SableClient/Sable or cinnyapp/cinny) and `origin`**. Review them to understand what else may be in flight that could affect the change. Summarise any findings and ask the user how to proceed if there is overlap or conflict. -- Before opening a PR, **search for related open issues on both `upstream` and `origin`**. If any are related, prompt the user to confirm, then link them in the PR description (`Closes #N` / `Related to #N`). -- If the PR has a corresponding `SableClient/docs` PR, link both PRs to each other in their descriptions. - -## Matrix Spec Compliance - -- New features and fixes must match the **current Matrix spec** or the relevant **MSC** if the spec change is pending. -- Check how **Element Web**, **FluffyChat**, or **Nheko** implement the same thing before diverging from established client patterns. -- Link the relevant spec section or MSC in the PR description when the change is spec-driven. - -## Feature Flags - -- Every user-visible new feature must be gated behind a **feature flag** in `config.json` / `useClientConfig`. -- Flags default to `false` (opt-in) unless the feature is a bug fix or a non-breaking improvement with no regressions. -- Document the flag in `config.json` and in the Sable-Docs documentation repo. - -## Code Quality - -- Code must follow **TypeScript/React best practices**: functional components, hooks, no class components, proper dependency arrays on `useEffect`/`useCallback`/`useMemo`. -- No `any` casts without a comment explaining why it's unavoidable. -- Comments must be **short and purposeful** β€” explain *why*, not *what*. No decorative separator lines (`//------`), no block comments restating the code. -- Do not add docstrings, comments, or type annotations to code that wasn't changed in the current task. -- Add concise docstrings, comments, and/or type annotations on updating/new code in the current task. -- Prefer explicit types over inferred types for public function signatures. - -## Documentation - -- When a new feature is added (or an existing one materially changed), **update the Sable-Docs repo** (`/Users/evie/git/Sable-Docs`). Add or update the relevant page under `content/features/` or `content/general/`. -- Keep docs concise β€” match the style of existing pages. - -## Security - -- Follow OWASP Top 10 guidance. No `innerHTML`, no `eval`, sanitise all user/Matrix-sourced content before rendering. -- Do not log or expose access tokens, room keys, or other secrets. -- Content Security Policy headers (Caddyfile / Dockerfile) must not be weakened without a documented reason. - -## Additional Rules - +- No `any` casts without an inline comment explaining why it's unavoidable. - **No over-engineering**: only make changes directly requested or clearly necessary. Don't add abstractions for one-off operations. -- **Reversible actions only**: ask before deleting files/branches, force-pushing, or dropping data. -- **Dependency changes** (adding/removing packages) require explicit confirmation before running `pnpm install`. -- When resolving merge conflicts, prefer the version from the feature branch; ask if the intent is ambiguous. -- Test files live alongside source in `src/` (e.g. `*.test.ts`). Match the naming convention of existing tests. -- **Write tests when needed**: any new utility function, hook, or non-trivial logic should have a corresponding Vitest test. Bug fixes should include a regression test where feasible. +- **Reversible actions only**: ask before deleting files/branches, force-pushing, dropping data, or running `pnpm install` to add/remove packages. +- Do not log or expose access tokens, room keys, or other secrets. diff --git a/.github/instructions/security.instructions.md b/.github/instructions/security.instructions.md new file mode 100644 index 000000000..9586e7e1f --- /dev/null +++ b/.github/instructions/security.instructions.md @@ -0,0 +1,10 @@ +--- +applyTo: "src/**,Caddyfile,Dockerfile" +--- + +## Security + +- Follow OWASP Top 10 guidance. +- No `innerHTML`, no `eval`; sanitise all user-supplied and Matrix-sourced content before rendering. +- Do not log or expose access tokens, room keys, or other secrets. +- Content Security Policy headers in `Caddyfile` and `Dockerfile` must not be weakened without a documented reason. diff --git a/.github/instructions/typescript.instructions.md b/.github/instructions/typescript.instructions.md new file mode 100644 index 000000000..4ea1a1ac3 --- /dev/null +++ b/.github/instructions/typescript.instructions.md @@ -0,0 +1,29 @@ +--- +applyTo: "src/**" +--- + +## TypeScript & React + +- Functional components and hooks only. No class components. +- Proper dependency arrays on `useEffect`, `useCallback`, and `useMemo`. +- Prefer explicit types over inferred types for public/exported function signatures. +- No `any` casts without an inline comment explaining why it's unavoidable. + +## Comments & Documentation + +- Comments must be **short and purposeful** β€” explain *why*, not *what*. +- No decorative separator lines (`//------`), no block comments restating the code. +- Do not add docstrings, comments, or type annotations to code that was not changed in the current task. +- Add concise docstrings, comments, and/or type annotations to new or updated code. + +## Testing + +- Test files live alongside source in `src/` (e.g. `foo.test.ts`). Match the naming convention of existing tests. +- Write Vitest tests for any new utility function, hook, or non-trivial logic. +- Bug fixes should include a regression test where feasible. + +## Feature Flags + +- Every user-visible new feature must be gated behind a feature flag in `config.json` / `useClientConfig`. +- Flags default to `false` (opt-in) unless the feature is a bug fix or a non-breaking improvement with no regressions. +- Document the flag in `config.json` and in the Sable-Docs documentation repo. diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 000000000..62c3f8d99 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,73 @@ +# Sable – Agent Instructions + +Workflow and process rules for AI agents. These complement the universal rules in `.github/copilot-instructions.md`. + +--- + +## Git & Branching + +- Never commit directly to `dev` or `integration`. +- When creating a branch, first sync `upstream/dev` to `origin/dev` and local `dev`, then branch from `dev`: + ``` + git fetch upstream + git checkout dev && git reset --hard upstream/dev + git push origin dev + git checkout -b feat/your-branch dev + ``` +- Before building `integration`, always force-update `dev` from `upstream/dev`: + ``` + git fetch upstream && git checkout dev && git reset --hard upstream/dev + ``` +- When asked to build `integration`, always prompt for which feature/fix/chore branches to include. In general, include all non-`dev` branches. + +## Quality Gates + +Run these in order and fix all failures before committing: + +``` +pnpm lint # ESLint +pnpm fmt:check # Prettier +pnpm typecheck # TypeScript +pnpm test:run # Vitest unit tests +pnpm knip # Dead-code / unused exports check +pnpm build # Production build β€” must succeed with no errors +``` + +## Pull Requests + +- Use the PR template (`.github/PULL_REQUEST_TEMPLATE.md`) in full β€” all checkboxes must be present. +- Descriptions should be short, clear, and human-readable. +- Each PR gets one changeset line (or `fix:` + `feat:` if both are genuinely present; prefer separate PRs otherwise). + +### Pre-PR Research + +1. Search for related open **and** merged PRs on `upstream` (`SableClient/Sable` and `cinnyapp/cinny`) and `origin`. Summarise findings and ask how to proceed if there is overlap or conflict. +2. Search for related open **issues** on `upstream` and `origin`. Confirm with the user, then link any related ones in the PR description (`Closes #N` / `Related to #N`). +3. If the PR has a corresponding `SableClient/docs` PR, link both PRs to each other. + +## Matrix Spec Compliance + +- New features and fixes must match the current Matrix spec, or the relevant MSC if the spec change is pending. +- Check how Element Web, FluffyChat, or Nheko implement the same thing before diverging from established client patterns. +- Link the relevant spec section or MSC in the PR description when the change is spec-driven. + +## Documentation + +- When a new feature is added (or an existing one materially changed), update the Sable-Docs repo (`/Users/evie/git/Sable-Docs`). Add or update the relevant page under `content/features/` or `content/general/`. +- Keep docs concise β€” match the style of existing pages. + +## Dependency Changes + +- Adding or removing packages requires explicit user confirmation before running `pnpm install`. + +## Merge Conflicts + +- When resolving merge conflicts, prefer the version from the feature branch; ask if the intent is ambiguous. + +## Destructive Actions + +Always ask before: +- Deleting files or branches (`git branch -D`, `rm`, etc.) +- Force-pushing (`git push --force`) +- Hard-resetting local branches other than `dev`/`integration` (`git reset --hard`) +- Dropping or truncating data From 201e230987855e2e367e2f464f30ce5772271102 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 31 Mar 2026 11:02:00 -0400 Subject: [PATCH 033/253] Update git instructions in AGENTS.md --- AGENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/AGENTS.md b/AGENTS.md index 62c3f8d99..266aa22d2 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -7,7 +7,7 @@ Workflow and process rules for AI agents. These complement the universal rules i ## Git & Branching - Never commit directly to `dev` or `integration`. -- When creating a branch, first sync `upstream/dev` to `origin/dev` and local `dev`, then branch from `dev`: +- When creating a branch, first sync `upstream/dev` to `origin/dev` and local `dev`, then branch from `dev`, with `origin/dev` as the remote: ``` git fetch upstream git checkout dev && git reset --hard upstream/dev From 04d59f5d55a0914dbcd8a5968d1f5ddc440e9b49 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 31 Mar 2026 11:42:00 -0400 Subject: [PATCH 034/253] Update git commands --- AGENTS.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 266aa22d2..c44ee7052 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -14,9 +14,9 @@ Workflow and process rules for AI agents. These complement the universal rules i git push origin dev git checkout -b feat/your-branch dev ``` -- Before building `integration`, always force-update `dev` from `upstream/dev`: +- Before building `integration`, always force-update `origin/dev` from `upstream/dev`, then force-update `dev`: ``` - git fetch upstream && git checkout dev && git reset --hard upstream/dev + git fetch upstream && git push origin upstream/dev:dev --force && git fetch origin && git checkout dev && git reset --hard origin/dev ``` - When asked to build `integration`, always prompt for which feature/fix/chore branches to include. In general, include all non-`dev` branches. @@ -67,6 +67,7 @@ pnpm build # Production build β€” must succeed with no errors ## Destructive Actions Always ask before: + - Deleting files or branches (`git branch -D`, `rm`, etc.) - Force-pushing (`git push --force`) - Hard-resetting local branches other than `dev`/`integration` (`git reset --hard`) From 73beb8c0627f134205e521311f9757260a598057 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 31 Mar 2026 10:50:22 -0400 Subject: [PATCH 035/253] feat(presence): add presence badges to sidebar and fix sliding sync presence data MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - DirectDMsList: show PresenceBadge on DM avatar β€” actual presence for 1:1 DMs, green dot when any participant is online for group DMs - AccountSwitcherTab: show PresenceBadge on own account avatar in sidebar - Fix AvatarPresence placement: move wrapper outside SidebarAvatar (overflow:hidden was clipping the badge) - useUserPresence: reset presence state when userId changes; add REST fallback for sliding sync (Synapse MSC4186 has no presence extension so m.presence events are never delivered via sync β€” GET /presence/:userId/status bootstraps the initial state) - ClientNonUIFeatures: explicitly PUT /presence/:userId/status on visibility change so the server records online/offline state; setSyncPresence is a no-op on MSC4186 --- src/app/hooks/useUserPresence.ts | 50 +++++++++++++++++-- src/app/pages/client/ClientNonUIFeatures.tsx | 6 +++ .../client/sidebar/AccountSwitcherTab.tsx | 35 ++++++++----- .../pages/client/sidebar/DirectDMsList.tsx | 34 +++++++++++-- 4 files changed, 105 insertions(+), 20 deletions(-) diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index f1b858422..a3b86ef08 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -1,5 +1,5 @@ import { useEffect, useMemo, useState } from 'react'; -import { User, UserEvent, UserEventHandlerMap } from '$types/matrix-sdk'; +import { ClientEvent, MatrixEvent, User, UserEvent, UserEventHandlerMap } from '$types/matrix-sdk'; import { useMatrixClient } from './useMatrixClient'; export enum Presence { @@ -29,20 +29,62 @@ export const useUserPresence = (userId: string): UserPresence | undefined => { const [presence, setPresence] = useState(() => (user ? getUserPresence(user) : undefined)); useEffect(() => { + setPresence(user ? getUserPresence(user) : undefined); + + let cancelled = false; + + // Sliding sync (Synapse MSC4186) has no presence extension β€” m.presence events are never + // delivered via sync. As a result, User.presence stays at the SDK default and + // getLastActiveTs() stays 0. Fall back to a direct REST fetch to bootstrap presence state. + if (!user || user.getLastActiveTs() === 0) { + mx.getPresence(userId) + .then((resp) => { + if (cancelled) return; + setPresence({ + presence: resp.presence as Presence, + status: resp.status_msg, + active: resp.currently_active ?? false, + lastActiveTs: + resp.last_active_ago != null ? Date.now() - resp.last_active_ago : undefined, + }); + }) + .catch(() => { + // Presence not available on this server (404 or not supported) β€” keep existing state. + }); + } + const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (event, u) => { - if (u.userId === user?.userId) { - setPresence(getUserPresence(user)); + if (u.userId === userId) { + setPresence(getUserPresence(u)); } }; user?.on(UserEvent.Presence, updatePresence); user?.on(UserEvent.CurrentlyActive, updatePresence); user?.on(UserEvent.LastPresenceTs, updatePresence); + + // If the User object doesn't exist yet, subscribe at client level as a fallback. + // ExtensionPresence emits ClientEvent.Event after creating and updating the User object, + // so by the time this fires mx.getUser(userId) is guaranteed to be non-null. + let removeClientListener: (() => void) | undefined; + if (!user) { + const onClientEvent = (event: MatrixEvent) => { + if (event.getSender() !== userId || event.getType() !== 'm.presence') return; + const u = mx.getUser(userId); + if (!u) return; + setPresence(getUserPresence(u)); + }; + mx.on(ClientEvent.Event, onClientEvent); + removeClientListener = () => mx.removeListener(ClientEvent.Event, onClientEvent); + } + return () => { + cancelled = true; user?.removeListener(UserEvent.Presence, updatePresence); user?.removeListener(UserEvent.CurrentlyActive, updatePresence); user?.removeListener(UserEvent.LastPresenceTs, updatePresence); + removeClientListener?.(); }; - }, [user]); + }, [mx, userId, user]); return presence; }; diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 26ac2f431..311e31e5e 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -835,6 +835,12 @@ function PresenceFeature() { mx.setSyncPresence(sendPresence ? undefined : SetPresence.Offline); // Sliding sync: enable/disable the presence extension on the next poll. getSlidingSyncManager(mx)?.setPresenceEnabled(sendPresence); + // Synapse MSC4186 sliding sync has no presence extension, so setSyncPresence has no + // effect. Explicitly PUT /presence/{userId}/status so the server knows the user's + // state β€” otherwise GET /presence returns stale offline and own presence badge is grey. + mx.setPresence({ presence: sendPresence ? 'online' : 'offline' }).catch(() => { + // Server doesn't support presence β€” ignore. + }); }, [mx, sendPresence]); return null; diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index 6e6ecc572..31d4b1a5f 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -40,10 +40,12 @@ import { getHomePath, getLoginPath, withSearchParam } from '$pages/pathUtils'; import { logoutClient, initClient, stopClient } from '$client/initMatrix'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useUserProfile } from '$hooks/useUserProfile'; +import { useUserPresence } from '$hooks/useUserPresence'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { useSessionProfiles } from '$hooks/useSessionProfiles'; import { useOpenSettings } from '$features/settings'; import { Modal500 } from '$components/Modal500'; +import { AvatarPresence, PresenceBadge } from '$components/presence'; import { createLogger } from '$utils/debug'; import { createDebugLogger } from '$utils/debugLogger'; import { useClientConfig } from '$hooks/useClientConfig'; @@ -173,6 +175,7 @@ export function AccountSwitcherTab() { const myUserId = mx.getUserId() ?? ''; const activeProfile = useUserProfile(myUserId); + const myPresence = useUserPresence(myUserId); const activeAvatarUrl = activeProfile.avatarUrl ? (mxcUrlToHttp(mx, activeProfile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined) : undefined; @@ -270,19 +273,27 @@ export function AccountSwitcherTab() { {(triggerRef) => ( - 1} + + ) : undefined + } > - {nameInitials(label)}} - /> - + 1} + > + {nameInitials(label)}} + /> + + )} {(totalBackgroundUnread > 0 || anyBackgroundHighlight) && ( diff --git a/src/app/pages/client/sidebar/DirectDMsList.tsx b/src/app/pages/client/sidebar/DirectDMsList.tsx index 16e829ce5..34a108a60 100644 --- a/src/app/pages/client/sidebar/DirectDMsList.tsx +++ b/src/app/pages/client/sidebar/DirectDMsList.tsx @@ -1,4 +1,4 @@ -import { useMemo, useRef, useEffect } from 'react'; +import { useMemo, useRef, useEffect, ReactNode } from 'react'; import * as Sentry from '@sentry/react'; import { useNavigate } from 'react-router-dom'; import { Avatar, Text, Box } from 'folds'; @@ -15,6 +15,8 @@ import { } from '$components/sidebar'; import { RoomAvatar } from '$components/room-avatar'; import { UserAvatar } from '$components/user-avatar'; +import { AvatarPresence, PresenceBadge } from '$components/presence'; +import { useUserPresence, Presence } from '$hooks/useUserPresence'; import { getDirectRoomAvatarUrl } from '$utils/room'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { nameInitials } from '$utils/common'; @@ -48,6 +50,28 @@ function DMItem({ room, selected }: DMItemProps) { // Members are sorted by who last sent messages (most recent first) const groupMembers = useGroupDMMembers(mx, room, MAX_GROUP_MEMBERS); + // Presence hooks β€” always called unconditionally (React rules of hooks). + // For single DMs: guessDMUserId() is synchronous; group slots use '' β†’ undefined. + // For group DMs: singleDMUserId is '' β†’ undefined; member slots use groupMembers. + const singleDMUserId = isGroupDM ? '' : room.guessDMUserId(); + const singleDMPresence = useUserPresence(singleDMUserId); + const member0Presence = useUserPresence(isGroupDM ? (groupMembers[0]?.userId ?? '') : ''); + const member1Presence = useUserPresence(isGroupDM ? (groupMembers[1]?.userId ?? '') : ''); + const member2Presence = useUserPresence(isGroupDM ? (groupMembers[2]?.userId ?? '') : ''); + + const groupDMOnline = + isGroupDM && + [member0Presence, member1Presence, member2Presence].some( + (p) => p && p.lastActiveTs !== 0 && p.presence === Presence.Online + ); + + let presenceBadge: ReactNode; + if (!isGroupDM && singleDMPresence && singleDMPresence.lastActiveTs !== 0) { + presenceBadge = ; + } else if (isGroupDM && groupDMOnline) { + presenceBadge = ; + } + // Get unread info for badge const unread = roomToUnread.get(room.roomId); @@ -132,9 +156,11 @@ function DMItem({ room, selected }: DMItemProps) { {(triggerRef) => ( - - {renderAvatar()} - + + + {renderAvatar()} + + )} {unread && (unread.total > 0 || unread.highlight > 0) && ( From 4a6289e2b48e9ffc7d2c0f2c30bdcbf06209450a Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 31 Mar 2026 12:17:18 -0400 Subject: [PATCH 036/253] chore: add changeset for presence-sidebar-badges --- .changeset/presence-sidebar-badges.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/presence-sidebar-badges.md diff --git a/.changeset/presence-sidebar-badges.md b/.changeset/presence-sidebar-badges.md new file mode 100644 index 000000000..9d0356c48 --- /dev/null +++ b/.changeset/presence-sidebar-badges.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Add presence status badges to sidebar DM list and account switcher From 85a7f6d6c85064c11900fb7b18ec195014ed2cb6 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 31 Mar 2026 10:46:13 -0400 Subject: [PATCH 037/253] fix(hooks): handle unhandled rejections in useAsyncCallback Wrap the inner callback with a no-op .catch() so fire-and-forget call sites (e.g. loadSrc in useEffect) do not produce 'Uncaught (in promise)' console warnings. The promise is still returned and re-thrown for callers that await or chain, so intentional error handling is unaffected. --- src/app/hooks/useAsyncCallback.test.tsx | 2 +- src/app/hooks/useAsyncCallback.ts | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/app/hooks/useAsyncCallback.test.tsx b/src/app/hooks/useAsyncCallback.test.tsx index c27d06478..c6e3f45ce 100644 --- a/src/app/hooks/useAsyncCallback.test.tsx +++ b/src/app/hooks/useAsyncCallback.test.tsx @@ -30,7 +30,7 @@ describe('useAsyncCallback', () => { ); await act(async () => { - await result.current[1]().catch(() => {}); + await expect(result.current[1]()).rejects.toBe(boom); }); expect(result.current[0]).toEqual({ status: AsyncStatus.Error, error: boom }); diff --git a/src/app/hooks/useAsyncCallback.ts b/src/app/hooks/useAsyncCallback.ts index 70831bea1..26e6ee16b 100644 --- a/src/app/hooks/useAsyncCallback.ts +++ b/src/app/hooks/useAsyncCallback.ts @@ -73,6 +73,9 @@ export const useAsync = ( }); }); } + // Re-throw so .then()/.catch() callers see the rejection and success + // handlers are skipped. Fire-and-forget unhandled-rejection warnings are + // suppressed at the useAsyncCallback level via a no-op .catch wrapper. throw e; } @@ -102,7 +105,19 @@ export const useAsyncCallback = ( status: AsyncStatus.Idle, }); - const callback = useAsync(asyncCallback, setState); + const innerCallback = useAsync(asyncCallback, setState); + + // Re-throw preserves rejection for callers that await/chain; the no-op .catch + // suppresses "Uncaught (in promise)" for fire-and-forget call sites (e.g. + // loadSrc() in a useEffect) without swallowing the error from intentional callers. + const callback = useCallback( + (...args: TArgs): Promise => { + const p = innerCallback(...args); + p.catch(() => {}); + return p; + }, + [innerCallback] + ) as AsyncCallback; return [state, callback, setState]; }; From 918f2d7a61fd79e3b303cf83dfcee1e6f65e9654 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 31 Mar 2026 12:25:13 -0400 Subject: [PATCH 038/253] chore: add changeset for async-callback-rejections --- .changeset/async-callback-rejections.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/async-callback-rejections.md diff --git a/.changeset/async-callback-rejections.md b/.changeset/async-callback-rejections.md new file mode 100644 index 000000000..89297b90e --- /dev/null +++ b/.changeset/async-callback-rejections.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Fix unhandled promise rejections in useAsyncCallback by propagating errors to the error boundary From bc58d6e456087910ecc52f6f44dc0396044a3ecc Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 14:14:26 -0400 Subject: [PATCH 039/253] feat(flags): inject client config from GH environment variables at build Add scripts/inject-client-config.js which reads HOMESERVER_LIST, ELEMENT_CALL_URL, EXPERIMENTS and other config keys from the GH Actions environment and merges them into config.json at build time. CI workflows pass these through via env; the setup action prints an injected-config summary in the job summary. knip.json updated to include the new script as an entry point. --- .github/actions/setup/action.yml | 30 +++++++++ .github/workflows/cloudflare-web-deploy.yml | 8 +++ .github/workflows/cloudflare-web-preview.yml | 4 ++ knip.json | 2 +- scripts/inject-client-config.js | 71 ++++++++++++++++++++ 5 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 scripts/inject-client-config.js diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml index 9b4c9acbb..d9a365eeb 100644 --- a/.github/actions/setup/action.yml +++ b/.github/actions/setup/action.yml @@ -34,6 +34,36 @@ runs: env: INPUTS_INSTALL_COMMAND: ${{ inputs.install-command }} + - name: Inject runtime config overrides + if: ${{ env.CLIENT_CONFIG_OVERRIDES_JSON != '' }} + shell: bash + working-directory: ${{ github.workspace }} + run: node scripts/inject-client-config.js + env: + CLIENT_CONFIG_OVERRIDES_JSON: ${{ env.CLIENT_CONFIG_OVERRIDES_JSON }} + CLIENT_CONFIG_OVERRIDES_STRICT: ${{ env.CLIENT_CONFIG_OVERRIDES_STRICT }} + + - name: Display injected config + if: ${{ env.CLIENT_CONFIG_OVERRIDES_JSON != '' }} + shell: bash + working-directory: ${{ github.workspace }} + run: | + summary_file="${GITHUB_STEP_SUMMARY:-}" + echo "::group::Injected Client Config" + experiments_json="$(jq -c '.experiments // "No experiments configured"' config.json 2>/dev/null || echo 'config.json not readable')" + echo "$experiments_json" + echo "::endgroup::" + + if [[ -n "$summary_file" ]]; then + { + echo "### Injected client config" + echo + echo "\`\`\`json" + echo "$experiments_json" + echo "\`\`\`" + } >> "$summary_file" + fi + - name: Build app if: ${{ inputs.build == 'true' }} shell: bash diff --git a/.github/workflows/cloudflare-web-deploy.yml b/.github/workflows/cloudflare-web-deploy.yml index d3d2c4461..e32dbf68e 100644 --- a/.github/workflows/cloudflare-web-deploy.yml +++ b/.github/workflows/cloudflare-web-deploy.yml @@ -40,6 +40,10 @@ jobs: plan: if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository runs-on: ubuntu-latest + environment: preview + env: + CLIENT_CONFIG_OVERRIDES_JSON: ${{ vars.CLIENT_CONFIG_OVERRIDES_JSON }} + CLIENT_CONFIG_OVERRIDES_STRICT: ${{ vars.CLIENT_CONFIG_OVERRIDES_STRICT || 'false' }} permissions: contents: read pull-requests: write @@ -73,6 +77,10 @@ jobs: apply: if: (github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v')) || github.event_name == 'workflow_dispatch' runs-on: ubuntu-latest + environment: production + env: + CLIENT_CONFIG_OVERRIDES_JSON: ${{ vars.CLIENT_CONFIG_OVERRIDES_JSON }} + CLIENT_CONFIG_OVERRIDES_STRICT: ${{ vars.CLIENT_CONFIG_OVERRIDES_STRICT || 'false' }} permissions: contents: read defaults: diff --git a/.github/workflows/cloudflare-web-preview.yml b/.github/workflows/cloudflare-web-preview.yml index 8b93a4bb9..82046559c 100644 --- a/.github/workflows/cloudflare-web-preview.yml +++ b/.github/workflows/cloudflare-web-preview.yml @@ -32,9 +32,13 @@ jobs: deploy: if: github.event.pull_request.head.repo.full_name == github.repository || github.event_name == 'push' runs-on: ubuntu-latest + environment: preview permissions: contents: read pull-requests: write + env: + CLIENT_CONFIG_OVERRIDES_JSON: ${{ vars.CLIENT_CONFIG_OVERRIDES_JSON }} + CLIENT_CONFIG_OVERRIDES_STRICT: ${{ vars.CLIENT_CONFIG_OVERRIDES_STRICT || 'false' }} steps: - name: Checkout repository uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 diff --git a/knip.json b/knip.json index c6cca1d75..f45161f97 100644 --- a/knip.json +++ b/knip.json @@ -1,6 +1,6 @@ { "$schema": "https://unpkg.com/knip@5/schema.json", - "entry": ["src/sw.ts", "scripts/normalize-imports.js"], + "entry": ["src/sw.ts", "scripts/normalize-imports.js", "scripts/inject-client-config.js"], "ignoreExportsUsedInFile": { "interface": true, "type": true diff --git a/scripts/inject-client-config.js b/scripts/inject-client-config.js new file mode 100644 index 000000000..b7c62c096 --- /dev/null +++ b/scripts/inject-client-config.js @@ -0,0 +1,71 @@ +import { readFile, writeFile } from 'node:fs/promises'; +import process from 'node:process'; +import { PrefixedLogger } from './utils/console-style.js'; + +const CONFIG_PATH = 'config.json'; +const OVERRIDES_ENV = 'CLIENT_CONFIG_OVERRIDES_JSON'; +const STRICT_ENV = 'CLIENT_CONFIG_OVERRIDES_STRICT'; +const logger = new PrefixedLogger('[config-inject]'); + +const formatError = (error) => { + if (error instanceof Error) return error.stack ?? error.message; + return String(error); +}; + +const isPlainObject = (value) => + typeof value === 'object' && value !== null && !Array.isArray(value); + +const deepMerge = (target, source) => { + if (!isPlainObject(target) || !isPlainObject(source)) return source; + + const merged = { ...target }; + Object.entries(source).forEach(([key, value]) => { + const targetValue = merged[key]; + merged[key] = + isPlainObject(targetValue) && isPlainObject(value) ? deepMerge(targetValue, value) : value; + }); + return merged; +}; + +const failOnError = process.env[STRICT_ENV] === 'true'; +const overridesRaw = process.env[OVERRIDES_ENV]; + +if (!overridesRaw) { + logger.info(`No ${OVERRIDES_ENV} provided; leaving ${CONFIG_PATH} unchanged.`); + process.exit(0); +} + +let fileConfig; +let overrides; + +try { + const file = await readFile(CONFIG_PATH, 'utf8'); + fileConfig = JSON.parse(file); +} catch (error) { + logger.error(`Failed reading ${CONFIG_PATH}: ${formatError(error)}`); + process.exit(1); +} + +try { + overrides = JSON.parse(overridesRaw); + if (!isPlainObject(overrides)) { + throw new Error(`${OVERRIDES_ENV} must be a JSON object.`); + } +} catch (error) { + const message = `[config-inject] Invalid ${OVERRIDES_ENV}; ${ + failOnError ? 'failing build' : 'skipping overrides' + }.`; + if (failOnError) { + logger.error(`${message} ${formatError(error)}`); + process.exit(1); + } + logger.info(`[warning] ${message} ${formatError(error)}`); + process.exit(0); +} + +const mergedConfig = deepMerge(fileConfig, overrides); + +await writeFile(CONFIG_PATH, `${JSON.stringify(mergedConfig, null, 2)}\n`, 'utf8'); +logger.info( + `Applied overrides to ${CONFIG_PATH}. Top-level keys: ${Object.keys(overrides).join(', ')}` +); From add3987f2d26c43e561b88eb5ce02a5205ed6aef Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 14:14:51 -0400 Subject: [PATCH 040/253] feat(flags): add typed experiment bucketing helper with rollout percentages useClientConfig.ts gains getExperimentVariant() which deterministically buckets a userId into a variant using a hash of userId+experimentName, then checks it against rolloutPercentage. Experiment defaults shape is typed so all callers get compile-time checking of known experiment names. --- src/app/hooks/useClientConfig.ts | 85 ++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts index e523f15a7..98e8e601f 100644 --- a/src/app/hooks/useClientConfig.ts +++ b/src/app/hooks/useClientConfig.ts @@ -5,6 +5,21 @@ export type HashRouterConfig = { basename?: string; }; +export type ExperimentConfig = { + enabled?: boolean; + rolloutPercentage?: number; + variants?: string[]; + controlVariant?: string; +}; + +export type ExperimentSelection = { + key: string; + enabled: boolean; + rolloutPercentage: number; + variant: string; + inExperiment: boolean; +}; + export type ClientConfig = { defaultHomeserver?: number; homeserverList?: string[]; @@ -14,6 +29,8 @@ export type ClientConfig = { disableAccountSwitcher?: boolean; hideUsernamePasswordFields?: boolean; + experiments?: Record; + pushNotificationDetails?: { pushNotifyUrl?: string; vapidPublicKey?: string; @@ -55,6 +72,74 @@ export function useClientConfig(): ClientConfig { return config; } +const DEFAULT_CONTROL_VARIANT = 'control'; + +const normalizeRolloutPercentage = (value?: number): number => { + if (typeof value !== 'number' || Number.isNaN(value)) return 100; + if (value < 0) return 0; + if (value > 100) return 100; + return value; +}; + +const hashToUInt32 = (input: string): number => { + let hash = 0; + for (let index = 0; index < input.length; index += 1) { + hash = (hash * 131 + input.charCodeAt(index)) % 4294967291; + } + return hash; +}; + +export const selectExperimentVariant = ( + key: string, + experiment: ExperimentConfig | undefined, + subjectId: string | undefined +): ExperimentSelection => { + const controlVariant = experiment?.controlVariant ?? DEFAULT_CONTROL_VARIANT; + const variants = (experiment?.variants?.filter((variant) => variant.length > 0) ?? []).filter( + (variant) => variant !== controlVariant + ); + + const enabled = Boolean(experiment?.enabled); + const rolloutPercentage = normalizeRolloutPercentage(experiment?.rolloutPercentage); + + if (!enabled || !subjectId || variants.length === 0 || rolloutPercentage === 0) { + return { + key, + enabled, + rolloutPercentage, + variant: controlVariant, + inExperiment: false, + }; + } + + // Two independent hashes keep rollout and variant assignment stable but decorrelated. + const rolloutBucket = hashToUInt32(`${key}:rollout:${subjectId}`) % 10000; + const rolloutCutoff = Math.floor(rolloutPercentage * 100); + if (rolloutBucket >= rolloutCutoff) { + return { + key, + enabled, + rolloutPercentage, + variant: controlVariant, + inExperiment: false, + }; + } + + const variantIndex = hashToUInt32(`${key}:variant:${subjectId}`) % variants.length; + return { + key, + enabled, + rolloutPercentage, + variant: variants[variantIndex], + inExperiment: true, + }; +}; + +export const useExperimentVariant = (key: string, subjectId?: string): ExperimentSelection => { + const clientConfig = useClientConfig(); + return selectExperimentVariant(key, clientConfig.experiments?.[key], subjectId); +}; + export const clientDefaultServer = (clientConfig: ClientConfig): string => clientConfig.homeserverList?.[clientConfig.defaultHomeserver ?? 0] ?? 'matrix.org'; From 718210ff278276c2e9366dfdc79ad49f527df64a Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 14:14:59 -0400 Subject: [PATCH 041/253] feat(devtools): add Experiments panel to developer tools settings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ExperimentsPanel shows every experiment name, current variant, rollout percentage, and whether the user is enrolled β€” readable without opening the console. DevelopTools.tsx wires it into the developer settings tab. --- .../settings/developer-tools/DevelopTools.tsx | 2 + .../developer-tools/ExperimentsPanel.tsx | 102 ++++++++++++++++++ 2 files changed, 104 insertions(+) create mode 100644 src/app/features/settings/developer-tools/ExperimentsPanel.tsx diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index c8ffeb12d..e3b04ea3d 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -12,6 +12,7 @@ import { SequenceCardStyle } from '$features/settings/styles.css'; import { SettingsSectionPage } from '../SettingsSectionPage'; import { AccountData } from './AccountData'; import { SyncDiagnostics } from './SyncDiagnostics'; +import { ExperimentsPanel } from './ExperimentsPanel'; import { DebugLogViewer } from './DebugLogViewer'; import { SentrySettings } from './SentrySettings'; @@ -109,6 +110,7 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp )} {developerTools && } + {developerTools && } {developerTools && ( { + if (!config.experiments) return []; + return Object.entries(config.experiments).map(([key, experimentConfig]) => ({ + key, + config: experimentConfig, + selection: selectExperimentVariant(key, experimentConfig, userId), + })); + }, [config.experiments, userId]); + + if (experiments.length === 0) { + return ( + + Features & Experiments + + No experiments configured + + + ); + } + + return ( + + Features & Experiments + + {experiments.map(({ key, config: experimentConfig, selection }) => ( + + + + + Enabled: + + + {selection.enabled ? 'Yes' : 'No'} + + + {selection.enabled && ( + <> + + + Rollout: + + {selection.rolloutPercentage}% + + + + Your Variant: + + + {selection.variant} + {selection.inExperiment && ' (in experiment)'} + {!selection.inExperiment && ' (control)'} + + + {experimentConfig.variants && experimentConfig.variants.length > 0 && ( + + + Treatment Variants: + + + {experimentConfig.variants + .filter((v) => v !== experimentConfig.controlVariant) + .join(', ')} + + + )} + + )} + + + ))} + + + ); +} From dfebd090af5684a7bd61c1696505ad1b8b7aed53 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 29 Mar 2026 14:15:24 -0400 Subject: [PATCH 042/253] test(flags): cover experiment bucketing and add changeset --- .changeset/feature-flag-env-vars.md | 5 ++ src/app/hooks/useClientConfig.test.ts | 101 ++++++++++++++++++++++++++ 2 files changed, 106 insertions(+) create mode 100644 .changeset/feature-flag-env-vars.md create mode 100644 src/app/hooks/useClientConfig.test.ts diff --git a/.changeset/feature-flag-env-vars.md b/.changeset/feature-flag-env-vars.md new file mode 100644 index 000000000..25d7d7d01 --- /dev/null +++ b/.changeset/feature-flag-env-vars.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +Add build-time client config overrides via environment variables, with typed deterministic experiment bucketing helpers for progressive feature rollout and A/B testing. diff --git a/src/app/hooks/useClientConfig.test.ts b/src/app/hooks/useClientConfig.test.ts new file mode 100644 index 000000000..5071c5f7c --- /dev/null +++ b/src/app/hooks/useClientConfig.test.ts @@ -0,0 +1,101 @@ +import { describe, it, expect } from 'vitest'; +import { selectExperimentVariant, type ExperimentConfig } from './useClientConfig'; + +const baseExperiment: ExperimentConfig = { + enabled: true, + rolloutPercentage: 100, + controlVariant: 'control', + variants: ['alpha', 'beta'], +}; + +describe('selectExperimentVariant', () => { + it('returns control when experiment is disabled', () => { + const result = selectExperimentVariant( + 'threadUI', + { ...baseExperiment, enabled: false }, + '@alice:example.org' + ); + + expect(result.inExperiment).toBe(false); + expect(result.variant).toBe('control'); + }); + + it('returns control when subject id is missing', () => { + const result = selectExperimentVariant('threadUI', baseExperiment, undefined); + + expect(result.inExperiment).toBe(false); + expect(result.variant).toBe('control'); + }); + + it('returns control when rollout is 0', () => { + const result = selectExperimentVariant( + 'threadUI', + { ...baseExperiment, rolloutPercentage: 0 }, + '@alice:example.org' + ); + + expect(result.inExperiment).toBe(false); + expect(result.variant).toBe('control'); + expect(result.rolloutPercentage).toBe(0); + }); + + it('normalizes rollout less than 0 to 0', () => { + const result = selectExperimentVariant( + 'threadUI', + { ...baseExperiment, rolloutPercentage: -10 }, + '@alice:example.org' + ); + + expect(result.inExperiment).toBe(false); + expect(result.variant).toBe('control'); + expect(result.rolloutPercentage).toBe(0); + }); + + it('normalizes rollout greater than 100 to 100', () => { + const result = selectExperimentVariant( + 'threadUI', + { ...baseExperiment, rolloutPercentage: 999 }, + '@alice:example.org' + ); + + expect(result.inExperiment).toBe(true); + expect(result.rolloutPercentage).toBe(100); + expect(['alpha', 'beta']).toContain(result.variant); + }); + + it('falls back to control when variants are missing after filtering', () => { + const result = selectExperimentVariant( + 'threadUI', + { + ...baseExperiment, + variants: ['', 'control'], + }, + '@alice:example.org' + ); + + expect(result.inExperiment).toBe(false); + expect(result.variant).toBe('control'); + }); + + it('is deterministic for the same key and subject', () => { + const first = selectExperimentVariant('threadUI', baseExperiment, '@alice:example.org'); + const second = selectExperimentVariant('threadUI', baseExperiment, '@alice:example.org'); + + expect(second).toEqual(first); + }); + + it('uses default control variant when none is provided', () => { + const result = selectExperimentVariant( + 'threadUI', + { + enabled: true, + rolloutPercentage: 100, + variants: ['alpha'], + }, + '@alice:example.org' + ); + + expect(result.inExperiment).toBe(true); + expect(result.variant).toBe('alpha'); + }); +}); From a53112f50dfec7950f36348fb02fd02021dfb4b2 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 12:43:30 -0400 Subject: [PATCH 043/253] feat(polls): implement MSC3381 polls with creator dialog and timeline renderer --- config.json | 7 +- src/app/features/room/RoomInput.tsx | 67 ++- .../room/poll/PollCreatorDialog.css.ts | 49 ++ .../features/room/poll/PollCreatorDialog.tsx | 383 ++++++++++++++ src/app/features/room/poll/PollEvent.css.ts | 40 ++ src/app/features/room/poll/PollEvent.tsx | 479 ++++++++++++++++++ src/app/features/room/poll/index.ts | 3 + .../hooks/timeline/useProcessedTimeline.ts | 10 + .../timeline/useTimelineEventRenderer.tsx | 76 +++ src/app/hooks/useClientConfig.ts | 4 + src/app/hooks/useCommands.ts | 7 + src/types/matrix-sdk.ts | 15 + src/types/matrix/room.ts | 4 + 13 files changed, 1130 insertions(+), 14 deletions(-) create mode 100644 src/app/features/room/poll/PollCreatorDialog.css.ts create mode 100644 src/app/features/room/poll/PollCreatorDialog.tsx create mode 100644 src/app/features/room/poll/PollEvent.css.ts create mode 100644 src/app/features/room/poll/PollEvent.tsx create mode 100644 src/app/features/room/poll/index.ts diff --git a/config.json b/config.json index f0c3c8b61..59b754931 100644 --- a/config.json +++ b/config.json @@ -3,10 +3,8 @@ "homeserverList": ["matrix.org", "mozilla.org", "unredacted.org", "sable.moe", "kendama.moe"], "allowCustomHomeservers": true, "elementCallUrl": null, - "disableAccountSwitcher": false, "hideUsernamePasswordFields": false, - "pushNotificationDetails": { "pushNotifyUrl": "https://sygnal.sable.moe/_matrix/push/v1/notify", "vapidPublicKey": "BCnS4SbHjeOaqVFW4wjt5xDt_pYIL62qMzKePfYF9fl9PQU14RieIaObh7nLR_9dQf4sykZa-CTrcjkgMIE1mcg", @@ -18,7 +16,6 @@ "slidingSync": { "enabled": true }, - "featuredCommunities": { "openAsDefault": false, "spaces": [ @@ -39,9 +36,11 @@ ], "servers": ["matrixrooms.info", "mozilla.org", "unredacted.org"] }, - "hashRouter": { "enabled": false, "basename": "/" + }, + "features": { + "polls": false } } diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index bc30145c8..38ae184c3 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -137,6 +137,7 @@ import { MessageEvent } from '$types/matrix/room'; import { usePowerLevelsContext } from '$hooks/usePowerLevels'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; +import { useClientConfig } from '$hooks/useClientConfig'; import { AutocompleteNotice } from '$components/editor/autocomplete/AutocompleteNotice'; import { convertPerMessageProfileToBeeperFormat, @@ -149,6 +150,8 @@ import { PKitCommandMessageHandler } from '$plugins/pluralkit-handler/PKitComman import { PKitProxyMessageHandler } from '$plugins/pluralkit-handler/PKitProxyMessageHandler'; import { SchedulePickerDialog } from './schedule-send'; import * as css from './schedule-send/SchedulePickerDialog.css'; +import { PollCreatorDialog } from './poll'; +import type { PollCreatorContent } from './poll'; import { getAudioMsgContent, getFileMsgContent, @@ -364,6 +367,9 @@ export const RoomInput = forwardRef( ); const [scheduleMenuAnchor, setScheduleMenuAnchor] = useState(); const [showSchedulePicker, setShowSchedulePicker] = useState(false); + const [showPollCreator, setShowPollCreator] = useState(false); + const clientConfig = useClientConfig(); + const pollsEnabled = clientConfig.features?.polls ?? false; const [silentReply, setSilentReply] = useState(!mentionInReplies); const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock'); const isEncrypted = room.hasEncryptionStateEvent(); @@ -766,6 +772,12 @@ export const RoomInput = forwardRef( } else if (commandName === Command.UnFlip) { plainText = `${UNFLIP} ${plainText}`; customHtml = `${UNFLIP} ${customHtml}`; + } else if (commandName === Command.Poll) { + if (pollsEnabled) setShowPollCreator(true); + resetEditor(editor); + resetEditorHistory(editor); + sendTypingStatus(false); + return; } else if (commandName) { const commandContent = commands[commandName as Command]; if (commandContent) { @@ -964,6 +976,8 @@ export const RoomInput = forwardRef( isEncrypted, setEditingScheduledDelayId, setScheduledTime, + pollsEnabled, + setShowPollCreator, ]); const handleKeyDown: KeyboardEventHandler = useCallback( @@ -1366,16 +1380,18 @@ export const RoomInput = forwardRef( } before={ - pickFile('*')} - variant="SurfaceVariant" - size="300" - radii="300" - title="Upload File" - aria-label="Upload and attach a File" - > - - + + pickFile('*')} + variant="SurfaceVariant" + size="300" + radii="300" + title="Upload File" + aria-label="Upload and attach a File" + > + + + } after={ <> @@ -1634,6 +1650,37 @@ export const RoomInput = forwardRef( }} /> )} + {showPollCreator && ( + setShowPollCreator(false)} + onSubmit={(content: PollCreatorContent) => { + setShowPollCreator(false); + const pollKindKey = content.kind; + const eventContent: Record = { + 'org.matrix.msc1767.text': content.question, + 'org.matrix.msc3381.poll.start': { + question: { + 'org.matrix.msc1767.text': content.question, + }, + kind: pollKindKey, + max_selections: content.maxSelections, + answers: content.answers.map((a) => ({ + id: a.id, + 'org.matrix.msc1767.text': a.text, + })), + show_voter_names: content.showVoterNames, + ...(content.closesAt !== undefined ? { closes_at: content.closesAt } : {}), + }, + }; + (mx as any).sendEvent(roomId, 'org.matrix.msc3381.poll.start', eventContent).catch( + // unstable MSC3381 type + (err: unknown) => { + console.error('Failed to send poll:', err); + } + ); + }} + /> + )} ); } diff --git a/src/app/features/room/poll/PollCreatorDialog.css.ts b/src/app/features/room/poll/PollCreatorDialog.css.ts new file mode 100644 index 000000000..7bae11054 --- /dev/null +++ b/src/app/features/room/poll/PollCreatorDialog.css.ts @@ -0,0 +1,49 @@ +import { style } from '@vanilla-extract/css'; +import { color, config, toRem } from 'folds'; + +export const DialogContent = style({ + padding: config.space.S400, + minWidth: toRem(340), + maxWidth: toRem(500), + display: 'flex', + flexDirection: 'column', + gap: config.space.S300, + maxHeight: `min(80vh, ${toRem(600)})`, + overflowY: 'auto', +}); + +export const AnswerRow = style({ + display: 'flex', + alignItems: 'center', + gap: config.space.S200, +}); + +export const AnswerInput = style({ + flex: 1, +}); + +export const KindSelector = style({ + display: 'flex', + gap: config.space.S200, +}); + +export const ExpirySelector = style({ + display: 'flex', + flexWrap: 'wrap', + gap: config.space.S100, +}); + +export const DatetimeInput = style({ + padding: `${config.space.S100} ${config.space.S200}`, + borderRadius: config.radii.R300, + border: `1px solid ${color.SurfaceVariant.ContainerLine}`, + background: color.SurfaceVariant.Container, + color: 'inherit', + fontSize: config.fontSize.T300, + outline: 'none', + selectors: { + '&:focus': { + borderColor: color.Primary.Main, + }, + }, +}); diff --git a/src/app/features/room/poll/PollCreatorDialog.tsx b/src/app/features/room/poll/PollCreatorDialog.tsx new file mode 100644 index 000000000..e9a1b8ba8 --- /dev/null +++ b/src/app/features/room/poll/PollCreatorDialog.tsx @@ -0,0 +1,383 @@ +import { FormEventHandler, useId, useMemo, useRef, useState } from 'react'; +import FocusTrap from 'focus-trap-react'; +import { + Box, + Button, + Chip, + Dialog, + Header, + Icon, + IconButton, + Icons, + Input, + Overlay, + OverlayBackdrop, + OverlayCenter, + Text, + config, +} from 'folds'; +import { stopPropagation } from '$utils/keyboard'; +import { M_POLL_KIND_DISCLOSED, M_POLL_KIND_UNDISCLOSED } from '$types/matrix-sdk'; +import * as css from './PollCreatorDialog.css'; + +const MAX_ANSWERS = 20; +const MIN_ANSWERS = 2; + +type ExpiryPreset = 'none' | '1h' | '12h' | '24h' | '48h' | '1w' | 'custom'; + +const EXPIRY_PRESETS: { value: ExpiryPreset; label: string }[] = [ + { value: 'none', label: 'No limit' }, + { value: '1h', label: '1 hour' }, + { value: '12h', label: '12 hours' }, + { value: '24h', label: '24 hours' }, + { value: '48h', label: '48 hours' }, + { value: '1w', label: '1 week' }, + { value: 'custom', label: 'Custom…' }, +]; + +const HOUR_MS = 3_600_000; + +export type PollCreatorContent = { + question: string; + answers: Array<{ id: string; text: string }>; + kind: string; + maxSelections: number; + showVoterNames: boolean; + closesAt?: number; +}; + +type PollCreatorDialogProps = { + onCancel: () => void; + onSubmit: (content: PollCreatorContent) => void; +}; + +export function PollCreatorDialog({ onCancel, onSubmit }: PollCreatorDialogProps) { + const questionId = useId(); + const [question, setQuestion] = useState(''); + const [answers, setAnswers] = useState<{ id: string; text: string }[]>(() => [ + { id: crypto.randomUUID(), text: '' }, + { id: crypto.randomUUID(), text: '' }, + ]); + const [kind, setKind] = useState( + M_POLL_KIND_DISCLOSED.altName ?? 'org.matrix.msc3381.poll.disclosed' + ); + const [showVoterNames, setShowVoterNames] = useState(true); + const [expiryPreset, setExpiryPreset] = useState('none'); + const [customExpiry, setCustomExpiry] = useState(''); + const [error, setError] = useState(); + const lastInputRef = useRef(null); + + const minDatetime = useMemo( + () => new Date(Date.now() + 60_000).toISOString().slice(0, 16), + // eslint-disable-next-line react-hooks/exhaustive-deps + [expiryPreset] + ); + + const computeClosesAt = (): number | undefined => { + const now = Date.now(); + switch (expiryPreset) { + case '1h': + return now + HOUR_MS; + case '12h': + return now + 12 * HOUR_MS; + case '24h': + return now + 24 * HOUR_MS; + case '48h': + return now + 48 * HOUR_MS; + case '1w': + return now + 7 * 24 * HOUR_MS; + case 'custom': { + const ts = customExpiry ? new Date(customExpiry).getTime() : NaN; + return Number.isFinite(ts) && ts > Date.now() ? ts : undefined; + } + default: + return undefined; + } + }; + + const handleAddAnswer = () => { + if (answers.length >= MAX_ANSWERS) return; + setAnswers((prev) => [...prev, { id: crypto.randomUUID(), text: '' }]); + // Focus the new answer field on next render + setTimeout(() => lastInputRef.current?.focus(), 0); + }; + + const handleRemoveAnswer = (id: string) => { + setAnswers((prev) => prev.filter((a) => a.id !== id)); + }; + + const handleAnswerChange = (id: string, value: string) => { + setAnswers((prev) => prev.map((a) => (a.id === id ? { ...a, text: value } : a))); + }; + + const handleSubmit: FormEventHandler = (evt) => { + evt.preventDefault(); + const trimmedQuestion = question.trim(); + if (!trimmedQuestion) { + setError('Please enter a question.'); + return; + } + const validAnswers = answers.map((a) => ({ ...a, text: a.text.trim() })).filter((a) => a.text); + if (validAnswers.length < MIN_ANSWERS) { + setError(`Please add at least ${MIN_ANSWERS} answers.`); + return; + } + if (expiryPreset === 'custom') { + const ts = customExpiry ? new Date(customExpiry).getTime() : NaN; + if (!Number.isFinite(ts) || ts <= Date.now()) { + setError('Please choose a future date and time for the custom expiry.'); + return; + } + } + setError(undefined); + onSubmit({ + question: trimmedQuestion, + answers: validAnswers, + kind, + maxSelections: 1, + showVoterNames, + closesAt: computeClosesAt(), + }); + }; + + return ( + }> + + + +
+ + Create Poll + + + + +
+ +
+
+ {/* Question */} + + + Question + + setQuestion((e.target as HTMLInputElement).value)} + placeholder="Ask a question…" + required + maxLength={340} + autoComplete="off" + /> + + + {/* Answers */} + + + Answers + + {answers.map((answer, index) => ( +
+ + handleAnswerChange(answer.id, (e.target as HTMLInputElement).value) + } + placeholder={`Option ${index + 1}`} + maxLength={340} + autoComplete="off" + /> + {answers.length > MIN_ANSWERS && ( + handleRemoveAnswer(answer.id)} + > + + + )} +
+ ))} + {answers.length < MAX_ANSWERS && ( + + )} + + + {/* Poll kind */} + + + Results visibility + +
+ + setKind( + M_POLL_KIND_DISCLOSED.altName ?? 'org.matrix.msc3381.poll.disclosed' + ) + } + aria-pressed={ + kind === + (M_POLL_KIND_DISCLOSED.altName ?? 'org.matrix.msc3381.poll.disclosed') + } + > + Show live results + + + setKind( + M_POLL_KIND_UNDISCLOSED.altName ?? 'org.matrix.msc3381.poll.undisclosed' + ) + } + aria-pressed={ + kind === + (M_POLL_KIND_UNDISCLOSED.altName ?? 'org.matrix.msc3381.poll.undisclosed') + } + > + Hide until closed + +
+ + + {/* Voter visibility */} + + + Voter visibility + +
+ setShowVoterNames(true)} + aria-pressed={showVoterNames} + > + Show voters + + setShowVoterNames(false)} + aria-pressed={!showVoterNames} + > + Hide voters + +
+ + + {/* Poll duration */} + + + Poll duration + +
+ {EXPIRY_PRESETS.map((p) => ( + setExpiryPreset(p.value)} + aria-pressed={expiryPreset === p.value} + > + {p.label} + + ))} +
+ {expiryPreset === 'custom' && ( + setCustomExpiry((e.target as HTMLInputElement).value)} + /> + )} + + + {error && ( + + {error} + + )} + + {/* Actions */} + + + + +
+
+ + + + + ); +} diff --git a/src/app/features/room/poll/PollEvent.css.ts b/src/app/features/room/poll/PollEvent.css.ts new file mode 100644 index 000000000..26e5433f9 --- /dev/null +++ b/src/app/features/room/poll/PollEvent.css.ts @@ -0,0 +1,40 @@ +import { style } from '@vanilla-extract/css'; +import { config } from 'folds'; + +// Vote button wrapping just the radio circle - minimal touch target +export const RadioZone = style({ + all: 'unset', + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexShrink: 0, + padding: `${config.space.S100} 0`, + selectors: { + '&:disabled': { + cursor: 'default', + }, + }, +}); + +// Text + percent area - clickable to reveal voters +export const AnswerTextButton = style({ + all: 'unset', + cursor: 'pointer', + display: 'flex', + flex: 1, + alignItems: 'center', + gap: config.space.S200, + minWidth: 0, + padding: `${config.space.S100} 0`, +}); + +// Non-interactive version of the text area +export const AnswerTextRow = style({ + display: 'flex', + flex: 1, + alignItems: 'center', + gap: config.space.S200, + minWidth: 0, + padding: `${config.space.S100} 0`, +}); diff --git a/src/app/features/room/poll/PollEvent.tsx b/src/app/features/room/poll/PollEvent.tsx new file mode 100644 index 000000000..0ebfe58b1 --- /dev/null +++ b/src/app/features/room/poll/PollEvent.tsx @@ -0,0 +1,479 @@ +import { type ReactNode, useCallback, useEffect, useMemo, useReducer, useState } from 'react'; +import FocusTrap from 'focus-trap-react'; +import { + Box, + Button, + config, + Icon, + Icons, + Line, + Menu, + PopOut, + ProgressBar, + RadioButton, + Scroll, + Text, + toRem, +} from 'folds'; +import { + M_POLL_END, + M_POLL_KIND_DISCLOSED, + M_POLL_RESPONSE, + M_POLL_START, + MatrixEvent, + Room, + RoomEvent, +} from '$types/matrix-sdk'; +import { useMatrixClient } from '$hooks/useMatrixClient'; +import { stopPropagation } from '$utils/keyboard'; +import { + Attachment, + AttachmentBox, + AttachmentContent, + AttachmentHeader, +} from '$components/message/attachment/Attachment'; +import { MessageEvent } from '$types/matrix/room'; +import * as css from './PollEvent.css'; + +type PollAnswer = { id: string; text: string }; + +function extractPollData(mEvent: MatrixEvent): { + question: string; + answers: PollAnswer[]; + maxSelections: number; + isDisclosed: boolean; + showVoterNames: boolean; + closesAt: number | undefined; +} | null { + const content = mEvent.getContent(); + const pollStartKey = M_POLL_START.altName ?? 'org.matrix.msc3381.poll.start'; + const pollData = content[M_POLL_START.name] ?? content[pollStartKey]; + if (!pollData) return null; + + const questionText = + (pollData.question?.['m.text'] as { body: string }[] | undefined)?.[0]?.body ?? + (pollData.question?.['org.matrix.msc1767.text'] as string | undefined) ?? + ''; + const rawAnswers: { + id?: string; + 'm.id'?: string; + 'org.matrix.msc1767.text'?: string; + 'm.text'?: { body: string }[]; + }[] = pollData.answers ?? []; + const answers: PollAnswer[] = rawAnswers.slice(0, 20).map((a) => ({ + id: String(a['m.id'] ?? a.id ?? ''), + text: + (a['m.text'] as { body: string }[] | undefined)?.[0]?.body ?? + a['org.matrix.msc1767.text'] ?? + '', + })); + const maxSelections = + typeof pollData.max_selections === 'number' && pollData.max_selections >= 1 + ? pollData.max_selections + : 1; + const kind = pollData.kind ?? ''; + const isDisclosed = + kind === M_POLL_KIND_DISCLOSED.name || + kind === (M_POLL_KIND_DISCLOSED.altName ?? 'org.matrix.msc3381.poll.disclosed'); + const showVoterNames = pollData.show_voter_names !== false; + const rawClosesAt = pollData.closes_at; + const closesAt = typeof rawClosesAt === 'number' && rawClosesAt > 0 ? rawClosesAt : undefined; + return { question: questionText, answers, maxSelections, isDisclosed, showVoterNames, closesAt }; +} + +function extractVoteSelections(responseEvent: MatrixEvent): string[] { + const content = responseEvent.getContent(); + const unstablePayload = content['org.matrix.msc3381.poll.response']; + const selections: unknown = + content['m.selections'] ?? + (typeof unstablePayload === 'object' && unstablePayload !== null + ? (unstablePayload as { answers?: unknown }).answers + : undefined); + if (!Array.isArray(selections)) return []; + return selections.filter((s): s is string => typeof s === 'string'); +} + +type TallyResult = { + tally: Map>; + myVote: string[]; + isEnded: boolean; +}; + +function computeTally( + room: Room, + pollEventId: string, + pollStartEvent: MatrixEvent, + answers: PollAnswer[], + maxSelections: number, + myUserId: string +): TallyResult { + const childEvents = room + .getUnfilteredTimelineSet() + .relations.getAllChildEventsForEvent(pollEventId); + + const userVotes = new Map(); + const validAnswerIds = new Set(answers.map((a) => a.id)); + const pollCreator = pollStartEvent.getSender(); + let isEnded = false; + let endTs: number | undefined; + + childEvents.forEach((event) => { + if (M_POLL_END.matches(event.getType())) { + const sender = event.getSender(); + if (!sender) return; + const ts = event.getTs(); + if ( + sender !== pollCreator && + !room.currentState.maySendRedactionForEvent(pollStartEvent, sender) + ) + return; + if (endTs !== undefined && endTs <= ts) return; + endTs = ts; + isEnded = true; + } + if (M_POLL_RESPONSE.matches(event.getType())) { + if (event.isDecryptionFailure()) return; + const sender = event.getSender(); + if (!sender) return; + const ts = event.getTs(); + const existing = userVotes.get(sender); + if (existing && existing.ts >= ts) return; + userVotes.set(sender, { ts, selections: extractVoteSelections(event) }); + } + }); + + const cutoff = endTs ?? Number.MAX_SAFE_INTEGER; + const tally = new Map>(answers.map((a) => [a.id, new Set()])); + userVotes.forEach(({ ts, selections }, userId) => { + if (ts > cutoff) return; + const valid = selections.slice(0, maxSelections); + if (!valid.every((s) => validAnswerIds.has(s))) return; + valid.forEach((sel) => tally.get(sel)?.add(userId)); + }); + + const myEntry = userVotes.get(myUserId); + let myVote: string[] = []; + if (myEntry && myEntry.ts <= cutoff) { + const myValid = myEntry.selections.slice(0, maxSelections); + if (myValid.every((s) => validAnswerIds.has(s))) myVote = myValid; + } + + return { tally, myVote, isEnded }; +} + +function formatExpiry(ts: number): string { + const diff = ts - Date.now(); + if (diff <= 0) return 'now'; + const hours = diff / 3_600_000; + if (hours < 1) return `in ${Math.round(diff / 60_000)} min`; + if (hours < 24) return `in ${Math.round(hours)} hr`; + const days = hours / 24; + if (days < 7) return `in ${Math.round(days)} day${Math.round(days) === 1 ? '' : 's'}`; + return new Date(ts).toLocaleDateString(); +} + +type PollEventProps = { + room: Room; + mEvent: MatrixEvent; + canEnd: boolean; + outlined?: boolean; +}; + +export function PollEvent({ room, mEvent, canEnd, outlined }: PollEventProps) { + const mx = useMatrixClient(); + const myUserId = mx.getUserId() ?? ''; + const pollEventId = mEvent.getId() ?? ''; + const [tick, incrementTick] = useReducer((n: number) => n + 1, 0); + const [, forceExpiry] = useReducer((n: number) => n + 1, 0); + + const pollData = useMemo(() => extractPollData(mEvent), [mEvent]); + + // Re-compute tally whenever a new response/end event lands + useEffect(() => { + const onTimeline = (event: MatrixEvent) => { + const relTo = event.getContent()?.['m.relates_to']?.event_id; + if (relTo === pollEventId) incrementTick(); + }; + room.on(RoomEvent.Timeline, onTimeline); + return () => { + room.off(RoomEvent.Timeline, onTimeline); + }; + }, [room, pollEventId]); + + // Re-render when the expiry countdown reaches zero + useEffect(() => { + if (!pollData?.closesAt) return undefined; + const remaining = pollData.closesAt - Date.now(); + if (remaining <= 0) return undefined; + const timer = setTimeout(forceExpiry, remaining); + return () => clearTimeout(timer); + }, [pollData?.closesAt]); + + const { tally, myVote, isEnded } = useMemo( + () => + pollData + ? computeTally( + room, + pollEventId, + mEvent, + pollData.answers, + pollData.maxSelections, + myUserId + ) + : { tally: new Map>(), myVote: [] as string[], isEnded: false }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [room, pollEventId, mEvent, pollData, myUserId, tick] + ); + + const isExpiredByTime = pollData?.closesAt !== undefined && Date.now() >= pollData.closesAt; + const effectivelyEnded = isEnded || isExpiredByTime; + const showResults = effectivelyEnded || (pollData?.isDisclosed ?? false); + + const totalVoters = useMemo( + () => new Set([...tally.values()].flatMap((s) => [...s])).size, + [tally] + ); + + const handleAnswerClick = useCallback( + (answerId: string) => { + if (effectivelyEnded || !pollData) return; + const { maxSelections } = pollData; + let next: string[]; + if (maxSelections === 1) { + next = myVote[0] === answerId ? [] : [answerId]; + } else if (myVote.includes(answerId)) { + next = myVote.filter((id) => id !== answerId); + } else { + next = [...myVote, answerId].slice(0, maxSelections); + } + const selections: Record = { 'm.selections': next }; + mx.sendEvent(room.roomId, MessageEvent.PollResponse as any, { + 'm.relates_to': { rel_type: 'm.reference', event_id: pollEventId }, + ...selections, + 'org.matrix.msc3381.poll.response': { answers: next }, + }).catch(() => undefined); + }, + [effectivelyEnded, pollData, myVote, mx, room.roomId, pollEventId] + ); + + const endPoll = useCallback(() => { + mx.sendEvent(room.roomId, MessageEvent.PollEnd as any, { + 'm.relates_to': { rel_type: 'm.reference', event_id: pollEventId }, + 'org.matrix.msc3381.poll.end': {}, + body: 'The poll has ended', + }).catch(() => undefined); + }, [mx, room.roomId, pollEventId]); + + const [expandedVoters, setExpandedVoters] = useState<{ id: string; anchor: DOMRect } | null>( + null + ); + const toggleVoters = useCallback( + (id: string, anchor: DOMRect) => + setExpandedVoters((prev) => (prev?.id === id ? null : { id, anchor })), + [] + ); + const canShowVoters = (pollData?.showVoterNames ?? false) && showResults; + + if (!pollData) return null; + + const { question, answers, isDisclosed, closesAt } = pollData; + const voterLabel = `${totalVoters} ${totalVoters === 1 ? 'voter' : 'voters'}`; + + let statusText: string; + if (isEnded) statusText = `Poll ended Β· ${voterLabel}`; + else if (isExpiredByTime) statusText = `Poll expired Β· ${voterLabel}`; + else if (closesAt !== undefined && !isDisclosed) + statusText = `${voterLabel} Β· Results hidden until closed Β· Closes ${formatExpiry(closesAt)}`; + else if (closesAt !== undefined) statusText = `${voterLabel} Β· Closes ${formatExpiry(closesAt)}`; + else if (!isDisclosed) statusText = `${voterLabel} Β· Results hidden until closed`; + else statusText = voterLabel; + + return ( + + + + + {isDisclosed ? 'Poll' : 'Undisclosed Poll'} + + + + {voterLabel} + + + + + + {question || '(no question)'} + + + {answers.map((answer) => { + const voteCount = tally.get(answer.id)?.size ?? 0; + const percent = totalVoters > 0 ? Math.round((voteCount / totalVoters) * 100) : 0; + const isSelected = myVote.includes(answer.id); + + let textZone: ReactNode; + if (canShowVoters && voteCount > 0) { + textZone = ( + + ); + } else if (!effectivelyEnded) { + textZone = ( + + ); + } else { + textZone = ( + + + {answer.text} + + {showResults && ( + + {percent}% + + )} + + ); + } + + return ( + + + + {textZone} + + {showResults && ( + + )} + + ); + })} + + + + + {statusText} + + {!effectivelyEnded && canEnd && ( + + )} + + + + + {expandedVoters && canShowVoters && ( + setExpandedVoters(null), + clickOutsideDeactivates: true, + escapeDeactivates: stopPropagation, + }} + > + + + + Voters + + + + {[...(tally.get(expandedVoters.id) ?? [])].map((userId) => ( + + + {room.getMember(userId)?.name ?? userId} + + + ))} + + + + + + } + /> + )} + + ); +} diff --git a/src/app/features/room/poll/index.ts b/src/app/features/room/poll/index.ts new file mode 100644 index 000000000..3bcd8f5df --- /dev/null +++ b/src/app/features/room/poll/index.ts @@ -0,0 +1,3 @@ +export { PollEvent } from './PollEvent'; +export { PollCreatorDialog } from './PollCreatorDialog'; +export type { PollCreatorContent } from './PollCreatorDialog'; diff --git a/src/app/hooks/timeline/useProcessedTimeline.ts b/src/app/hooks/timeline/useProcessedTimeline.ts index f1f799308..f44719e88 100644 --- a/src/app/hooks/timeline/useProcessedTimeline.ts +++ b/src/app/hooks/timeline/useProcessedTimeline.ts @@ -97,6 +97,16 @@ export function useProcessedTimeline({ if (!membershipChanged && hideNickAvatarEvents) return acc; } + // Poll response and end events are always filtered β€” they update the poll tally + // via RoomEvent.Timeline listeners in PollEvent and must never render as timeline items. + if ( + type === 'org.matrix.msc3381.poll.response' || + type === 'org.matrix.msc3381.poll.end' || + type === 'm.poll.response' || + type === 'm.poll.end' + ) + return acc; + if (!showHiddenEvents) { const isStandardRendered = [ 'm.room.message', diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx index f7dca411a..dbfa13721 100644 --- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx +++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx @@ -54,6 +54,7 @@ import { Message, Reactions, } from '$features/room/message'; +import { PollEvent } from '$features/room/poll'; import { useSableCosmetics } from '$hooks/useSableCosmetics'; @@ -1079,6 +1080,81 @@ export function useTimelineEventRenderer({ ); }, + [MessageEvent.PollStart]: (mEventId, mEvent, item, timelineSet, collapse) => { + const { getSender, getAssociatedStatus, isRedacted, getUnsigned } = mEvent; + const reactionRelations = getEventReactions(timelineSet, mEventId); + const reactions = reactionRelations?.getSortedAnnotationsByKey(); + const hasReactions = reactions && reactions.length > 0; + const highlighted = focusItem?.index === item && focusItem.highlight; + const senderId = getSender.call(mEvent) ?? ''; + const senderDisplayName = + getMemberDisplayName(room, senderId, nicknames) ?? getMxIdLocalPart(senderId) ?? senderId; + const myUserId = mx.getUserId() ?? ''; + const canEnd = myUserId === senderId || canRedact; + + return ( + + ) : undefined + } + hideReadReceipts={hideReads} + showDeveloperTools={showDeveloperTools} + memberPowerTag={getMemberPowerTag(senderId)} + hour24Clock={hour24Clock} + dateFormatString={dateFormatString} + > + {isRedacted.call(mEvent) ? ( + + ) : ( + + )} + + ); + }, + // Poll response and end events are not rendered individually β€” + // they update the poll via RoomEvent.Timeline listeners in PollEvent. + [MessageEvent.PollResponse]: () => null, + [MessageEvent.PollEnd]: () => null, }, (mEventId, mEvent, item, timelineSet, collapse) => { const { getSender, getTs, getType } = mEvent; diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts index e523f15a7..4cb135a16 100644 --- a/src/app/hooks/useClientConfig.ts +++ b/src/app/hooks/useClientConfig.ts @@ -43,6 +43,10 @@ export type ClientConfig = { matrixToBaseUrl?: string; settingsLinkBaseUrl?: string; + + features?: { + polls?: boolean; + }; }; const ClientConfigContext = createContext(null); diff --git a/src/app/hooks/useCommands.ts b/src/app/hooks/useCommands.ts index 8d803d4f7..cc084b34c 100644 --- a/src/app/hooks/useCommands.ts +++ b/src/app/hooks/useCommands.ts @@ -272,6 +272,8 @@ export enum Command { // Spec missing from cinny Location = 'location', ShareMyLocation = 'sharemylocation', + // Polls + Poll = 'poll', } export type CommandContent = { @@ -1569,6 +1571,11 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => { navigator.geolocation.getCurrentPosition(success, error, options); }, }, + [Command.Poll]: { + name: Command.Poll, + description: 'Create a poll', + exe: async () => undefined, + }, }), [ mx, diff --git a/src/types/matrix-sdk.ts b/src/types/matrix-sdk.ts index 06a47368b..95d584a3e 100644 --- a/src/types/matrix-sdk.ts +++ b/src/types/matrix-sdk.ts @@ -54,3 +54,18 @@ export * from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession'; export { ThreadEvent } from 'matrix-js-sdk/lib/models/thread'; export type { Thread } from 'matrix-js-sdk/lib/models/thread'; + +export { + M_POLL_START, + M_POLL_RESPONSE, + M_POLL_END, + M_POLL_KIND_DISCLOSED, + M_POLL_KIND_UNDISCLOSED, +} from 'matrix-js-sdk/lib/@types/polls'; +export type { + PollStartEventContent, + PollResponseEventContent, + PollEndEventContent, + PollAnswer, + PollKind, +} from 'matrix-js-sdk/lib/@types/polls'; diff --git a/src/types/matrix/room.ts b/src/types/matrix/room.ts index f851b9e42..3c252b7f0 100644 --- a/src/types/matrix/room.ts +++ b/src/types/matrix/room.ts @@ -58,6 +58,10 @@ export enum MessageEvent { Sticker = 'm.sticker', RoomRedaction = 'm.room.redaction', Reaction = 'm.reaction', + // MSC3381 Polls β€” unstable prefix (stable types not yet in a shipped room version) + PollStart = 'org.matrix.msc3381.poll.start', + PollResponse = 'org.matrix.msc3381.poll.response', + PollEnd = 'org.matrix.msc3381.poll.end', } export enum RoomType { From d9a66566e39927289516dd7601df0438f62764f9 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 12:43:31 -0400 Subject: [PATCH 044/253] chore: add changeset for feat-polls --- .changeset/feat-polls.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/feat-polls.md diff --git a/.changeset/feat-polls.md b/.changeset/feat-polls.md new file mode 100644 index 000000000..6e7522702 --- /dev/null +++ b/.changeset/feat-polls.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +Add MSC3381 polls: create, vote on, and end polls directly in rooms (opt-in via `features.polls` in config.json). From 117949f9175aa2d235547b1238457d55c694a9c4 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 12:46:46 -0400 Subject: [PATCH 045/253] feat(bookmarks): add message bookmarks (MSC4438) --- config.json | 9 + src/app/features/bookmarks/bookmarkDomain.ts | 171 ++++++ .../features/bookmarks/bookmarkRepository.ts | 147 +++++ src/app/features/bookmarks/useBookmarks.ts | 78 +++ .../features/bookmarks/useInitBookmarks.ts | 70 +++ src/app/features/room/message/Message.tsx | 55 ++ .../settings/experimental/Experimental.tsx | 2 + .../experimental/MSC4438MessageBookmarks.tsx | 56 ++ src/app/hooks/router/useHomeSelected.ts | 11 + src/app/hooks/router/useInbox.ts | 17 +- src/app/hooks/useClientConfig.ts | 67 +++ src/app/pages/Router.tsx | 4 + src/app/pages/client/ClientNonUIFeatures.tsx | 7 + .../pages/client/bookmarks/BookmarksList.tsx | 560 ++++++++++++++++++ src/app/pages/client/bookmarks/index.ts | 1 + src/app/pages/client/home/Home.tsx | 162 ++--- src/app/pages/client/inbox/Inbox.tsx | 44 +- src/app/pages/pathUtils.ts | 4 + src/app/pages/paths.ts | 3 + src/app/state/bookmarks.ts | 20 + src/app/state/settings.ts | 6 + src/types/matrix/accountData.ts | 5 + 22 files changed, 1429 insertions(+), 70 deletions(-) create mode 100644 src/app/features/bookmarks/bookmarkDomain.ts create mode 100644 src/app/features/bookmarks/bookmarkRepository.ts create mode 100644 src/app/features/bookmarks/useBookmarks.ts create mode 100644 src/app/features/bookmarks/useInitBookmarks.ts create mode 100644 src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx create mode 100644 src/app/pages/client/bookmarks/BookmarksList.tsx create mode 100644 src/app/pages/client/bookmarks/index.ts create mode 100644 src/app/state/bookmarks.ts diff --git a/config.json b/config.json index f0c3c8b61..4f3dae570 100644 --- a/config.json +++ b/config.json @@ -19,6 +19,15 @@ "enabled": true }, + "experiments": { + "messageBookmarks": { + "enabled": false, + "rolloutPercentage": 0, + "controlVariant": "control", + "variants": ["enabled"] + } + }, + "featuredCommunities": { "openAsDefault": false, "spaces": [ diff --git a/src/app/features/bookmarks/bookmarkDomain.ts b/src/app/features/bookmarks/bookmarkDomain.ts new file mode 100644 index 000000000..15da412c9 --- /dev/null +++ b/src/app/features/bookmarks/bookmarkDomain.ts @@ -0,0 +1,171 @@ +/** + * MSC4438: Message bookmarks via account data + * https://github.com/matrix-org/matrix-spec-proposals/pull/4438 + * + * Unstable event type names in use (will migrate to stable names once MSC is accepted): + * m.bookmarks.index β†’ org.matrix.msc4438.bookmarks.index + * m.bookmark. β†’ org.matrix.msc4438.bookmark. + * + * Bookmark ID algorithm: djb2-like 32-bit hash over "|", prefixed with "bmk_". + * This matches the reference implementation in smokku/cinny commit 6363e441 and is used here for + * cross-client interoperability. If the algorithm ever changes, a migration must be provided so + * that existing bookmarks can have their IDs recomputed (the ID is stored in the item event, so + * old items remain accessible). + */ + +import { MatrixEvent, Room } from '$types/matrix-sdk'; +import { AccountDataEvent } from '$types/matrix/accountData'; + +export type BookmarkIndexContent = { + version: 1; + revision: number; + updated_ts: number; + bookmark_ids: string[]; +}; + +export type BookmarkItemContent = { + version: 1; + bookmark_id: string; + uri: string; + room_id: string; + event_id: string; + event_ts: number; + bookmarked_ts: number; + sender?: string; + room_name?: string; + body_preview?: string; + msgtype?: string; + deleted?: boolean; +}; + +/** + * Compute a bookmark ID for a (roomId, eventId) pair using the reference + * djb2-style algorithm agreed upon with the Cinny proof-of-concept. + * + * Input string: "|" + * Algorithm: For each UTF-16 code unit ch, hash = ((hash << 5) - hash + ch) | 0 + * Output: "bmk_" + unsigned 32-bit hex, zero-padded to 8 chars + * + * NOTE: If this algorithm is ever changed, a migration helper must be written + * so that existing bookmarked items (whose IDs are stored on the server as + * account data event-type suffixes) can still be resolved. The bookmark_id + * field inside each item event is the canonical reference. + */ +export function computeBookmarkId(roomId: string, eventId: string): string { + const input = `${roomId}|${eventId}`; + let hash = 0; + for (let i = 0; i < input.length; i += 1) { + const ch = input.charCodeAt(i); + // eslint-disable-next-line no-bitwise + hash = ((hash << 5) - hash + ch) | 0; + } + // Convert to unsigned 32-bit integer and encode as 8-char lowercase hex + // eslint-disable-next-line no-bitwise + const hex = (hash >>> 0).toString(16).padStart(8, '0'); + return `bmk_${hex}`; +} + +/** Construct the account data event type for a bookmark item. */ +export function bookmarkItemEventType(bookmarkId: string): string { + return `${AccountDataEvent.BookmarkItemPrefix}${bookmarkId}`; +} + +/** + * Build a matrix: URI for a room event. + * Canonical form: matrix:roomid//e/ + * (MSC4438 Β§Matrix URI) + */ +export function buildMatrixURI(roomId: string, eventId: string): string { + return `matrix:roomid/${encodeURIComponent(roomId)}/e/${encodeURIComponent(eventId)}`; +} + +const BODY_PREVIEW_MAX_LENGTH = 120; + +/** + * Extract a short preview of the event body for display in the bookmark list. + * Truncated to 120 chars with an ellipsis (MSC4438 Β§Body preview). + * + * Security: preview is only used as plain text in the UI, never parsed as HTML. + * Encrypted-room callers may choose to pass an empty string to avoid leaking + * plaintext into unencrypted account data (MSC4438 Β§Security considerations). + */ +export function extractBodyPreview( + mEvent: MatrixEvent, + maxLength = BODY_PREVIEW_MAX_LENGTH +): string { + const content = mEvent.getContent(); + const body = content?.body; + if (typeof body !== 'string' || body.length === 0) return ''; + if (body.length <= maxLength) return body; + return `${body.slice(0, maxLength)}\u2026`; +} + +/** + * Build a BookmarkItemContent from a room and event. + * + * Security: optional metadata (sender, room_name, body_preview) is copied into + * unencrypted account data. For encrypted rooms the caller may choose to omit + * these fields, storing only the required fields (room_id, event_id, uri). + * Currently we always populate them for usability; future work could honour a + * "privacy mode" setting. + */ +export function createBookmarkItem( + room: Room, + mEvent: MatrixEvent +): BookmarkItemContent | undefined { + const eventId = mEvent.getId(); + const { roomId } = room; + if (!eventId) return undefined; + + const bookmarkId = computeBookmarkId(roomId, eventId); + + return { + version: 1, + bookmark_id: bookmarkId, + uri: buildMatrixURI(roomId, eventId), + room_id: roomId, + event_id: eventId, + event_ts: mEvent.getTs(), + bookmarked_ts: Date.now(), + sender: mEvent.getSender() ?? undefined, + room_name: room.name, + body_preview: extractBodyPreview(mEvent), + msgtype: mEvent.getContent()?.msgtype, + }; +} + +// Validators (MSC4438: clients must validate before use) +export function isValidIndexContent(content: unknown): content is BookmarkIndexContent { + if (typeof content !== 'object' || content === null) return false; + const c = content as Record; + return ( + c.version === 1 && + typeof c.revision === 'number' && + typeof c.updated_ts === 'number' && + Array.isArray(c.bookmark_ids) && + (c.bookmark_ids as unknown[]).every((id) => typeof id === 'string') + ); +} + +export function isValidBookmarkItem(content: unknown): content is BookmarkItemContent { + if (typeof content !== 'object' || content === null) return false; + const c = content as Record; + return ( + c.version === 1 && + typeof c.bookmark_id === 'string' && + typeof c.uri === 'string' && + typeof c.room_id === 'string' && + typeof c.event_id === 'string' && + typeof c.event_ts === 'number' && + typeof c.bookmarked_ts === 'number' + ); +} + +export function emptyIndex(): BookmarkIndexContent { + return { + version: 1, + revision: 0, + updated_ts: Date.now(), + bookmark_ids: [], + }; +} diff --git a/src/app/features/bookmarks/bookmarkRepository.ts b/src/app/features/bookmarks/bookmarkRepository.ts new file mode 100644 index 000000000..d6703777f --- /dev/null +++ b/src/app/features/bookmarks/bookmarkRepository.ts @@ -0,0 +1,147 @@ +/** + * Bookmark repository: low-level read/write operations against Matrix account data. + * + * All writes follow the MSC4438 ordering guarantee: + * item is written first β†’ index is updated second + * This ensures that when other devices receive the updated index via /sync, the + * referenced item event is already available. + */ + +import { MatrixClient } from '$types/matrix-sdk'; +import { AccountDataEvent } from '$types/matrix/accountData'; +import { + BookmarkIndexContent, + BookmarkItemContent, + bookmarkItemEventType, + emptyIndex, + isValidBookmarkItem, + isValidIndexContent, +} from './bookmarkDomain'; + +// Internal helpers +function readIndex(mx: MatrixClient): BookmarkIndexContent { + const evt = mx.getAccountData(AccountDataEvent.BookmarksIndex as any); + const content = evt?.getContent(); + if (isValidIndexContent(content)) return content; + return emptyIndex(); +} + +function readItem(mx: MatrixClient, bookmarkId: string): BookmarkItemContent | undefined { + const evt = mx.getAccountData(bookmarkItemEventType(bookmarkId) as any); + const content = evt?.getContent(); + // Must be valid and not tombstoned (MSC4438 Β§Listing bookmarks) + if (isValidBookmarkItem(content) && !content.deleted) return content; + return undefined; +} + +async function writeIndex(mx: MatrixClient, index: BookmarkIndexContent): Promise { + await mx.setAccountData(AccountDataEvent.BookmarksIndex as any, index as any); +} + +async function writeItem(mx: MatrixClient, item: BookmarkItemContent): Promise { + await mx.setAccountData(bookmarkItemEventType(item.bookmark_id) as any, item as any); +} + +// Public API +/** + * Add a bookmark. + * + * MSC4438 Β§Adding a bookmark: + * 1. Write the item event first. + * 2. Prepend the ID to bookmark_ids (if not already present). + * 3. Increment revision and update timestamp. + * 4. Write the updated index. + */ +export async function addBookmark(mx: MatrixClient, item: BookmarkItemContent): Promise { + // Write item before updating index (cross-device consistency) + await writeItem(mx, item); + + const index = readIndex(mx); + if (!index.bookmark_ids.includes(item.bookmark_id)) { + index.bookmark_ids.unshift(item.bookmark_id); + } + index.revision += 1; + index.updated_ts = Date.now(); + await writeIndex(mx, index); +} + +/** + * Remove a bookmark. + * + * MSC4438 Β§Removing a bookmark: + * 1. Remove the ID from the index. + * 2. Soft-delete the item (set deleted: true). + * + * Account data events cannot be deleted from the server, so soft-deletion is + * used. Other clients that encounter the item event can see it is explicitly + * removed. + */ +export async function removeBookmark(mx: MatrixClient, bookmarkId: string): Promise { + const index = readIndex(mx); + index.bookmark_ids = index.bookmark_ids.filter((id) => id !== bookmarkId); + index.revision += 1; + index.updated_ts = Date.now(); + await writeIndex(mx, index); + + // Soft-delete the item event + const existing = readItem(mx, bookmarkId); + if (existing) { + await writeItem(mx, { ...existing, deleted: true }); + } +} + +/** + * List all active bookmarks in index order, with orphan recovery. + * + * MSC4438 Β§Listing bookmarks: + * - Iterates bookmark_ids in order. + * - Skips missing, malformed, or tombstoned items. + * - Deduplicates by first occurrence. + * + * Orphan recovery: also scans the in-memory account data store for bookmark + * item events that exist but are absent from the index. These arise when two + * devices concurrently write the index (last-write-wins drops the other + * device's new bookmark_id while the item event itself persists). Orphaned + * items are appended after the index-ordered items. + */ +export function listBookmarks(mx: MatrixClient): BookmarkItemContent[] { + const index = readIndex(mx); + const seen = new Set(); + + const items = index.bookmark_ids + .filter((id) => { + if (seen.has(id)) return false; + seen.add(id); + return true; + }) + .map((id) => readItem(mx, id)) + .filter((item): item is BookmarkItemContent => item != null); + + // Walk the in-memory account data store for orphaned item events. + const prefix = AccountDataEvent.BookmarkItemPrefix as string; + Array.from(mx.store.accountData.keys()).forEach((key) => { + if (!key.startsWith(prefix)) return; + const bookmarkId = key.slice(prefix.length); + if (seen.has(bookmarkId)) return; + const item = readItem(mx, bookmarkId); + if (item) { + seen.add(bookmarkId); + items.push(item); + } + }); + + return items; +} + +/** + * Check whether a specific bookmark ID is in the index. + * + * NOTE: Do not rely on the bookmark ID being deterministically derivable from + * (roomId, eventId) for this check β€” different clients may use different + * algorithms. Use the bookmarkIdSet atom (derived from the live list) for + * O(1) per-message checks instead. + */ +export function isBookmarked(mx: MatrixClient, bookmarkId: string): boolean { + const index = readIndex(mx); + return index.bookmark_ids.includes(bookmarkId); +} diff --git a/src/app/features/bookmarks/useBookmarks.ts b/src/app/features/bookmarks/useBookmarks.ts new file mode 100644 index 000000000..aadd0bb8f --- /dev/null +++ b/src/app/features/bookmarks/useBookmarks.ts @@ -0,0 +1,78 @@ +import { useAtomValue, useSetAtom } from 'jotai'; +import { useCallback } from 'react'; +import { useMatrixClient } from '$hooks/useMatrixClient'; +import { bookmarkIdSetAtom, bookmarkListAtom, bookmarkLoadingAtom } from '$state/bookmarks'; +import { BookmarkItemContent, computeBookmarkId } from './bookmarkDomain'; +import { addBookmark, removeBookmark, listBookmarks, isBookmarked } from './bookmarkRepository'; + +/** Returns the current ordered bookmark list. */ +export function useBookmarkList(): BookmarkItemContent[] { + return useAtomValue(bookmarkListAtom); +} + +/** Returns true while a bookmark refresh is in progress. */ +export function useBookmarkLoading(): boolean { + return useAtomValue(bookmarkLoadingAtom); +} + +/** + * Returns true if the given (roomId, eventId) is currently bookmarked. + * + * Uses the locally cached bookmarkIdSetAtom for O(1) lookup. + * MSC4438 Β§Checking if a message is bookmarked. + */ +export function useIsBookmarked(roomId: string, eventId: string): boolean { + const idSet = useAtomValue(bookmarkIdSetAtom); + return idSet.has(computeBookmarkId(roomId, eventId)); +} + +/** + * Returns bookmark action callbacks: refresh, add, remove, checkIsBookmarked. + * + * `refresh` re-reads all bookmark items from the locally cached account data. + * `add` / `remove` optimistically update the local atom before writing to the server. + */ +export function useBookmarkActions() { + const mx = useMatrixClient(); + const setList = useSetAtom(bookmarkListAtom); + const setLoading = useSetAtom(bookmarkLoadingAtom); + + const refresh = useCallback(async () => { + setLoading(true); + try { + const items = listBookmarks(mx); + setList(items); + } finally { + setLoading(false); + } + }, [mx, setList, setLoading]); + + const add = useCallback( + async (item: BookmarkItemContent) => { + // Optimistic update + setList((prev) => { + if (prev.some((b) => b.bookmark_id === item.bookmark_id)) return prev; + return [item, ...prev]; + }); + await addBookmark(mx, item); + }, + [mx, setList] + ); + + const remove = useCallback( + async (bookmarkId: string) => { + // Optimistic update + setList((prev) => prev.filter((b) => b.bookmark_id !== bookmarkId)); + await removeBookmark(mx, bookmarkId); + }, + [mx, setList] + ); + + const checkIsBookmarked = useCallback( + (roomId: string, eventId: string): boolean => + isBookmarked(mx, computeBookmarkId(roomId, eventId)), + [mx] + ); + + return { refresh, add, remove, checkIsBookmarked }; +} diff --git a/src/app/features/bookmarks/useInitBookmarks.ts b/src/app/features/bookmarks/useInitBookmarks.ts new file mode 100644 index 000000000..40175ce58 --- /dev/null +++ b/src/app/features/bookmarks/useInitBookmarks.ts @@ -0,0 +1,70 @@ +import { MatrixEvent, SyncState } from '$types/matrix-sdk'; +import { useCallback, useEffect } from 'react'; +import { useSetAtom } from 'jotai'; +import { useMatrixClient } from '$hooks/useMatrixClient'; +import { useSyncState } from '$hooks/useSyncState'; +import { useAccountDataCallback } from '$hooks/useAccountDataCallback'; +import { bookmarkListAtom, bookmarkLoadingAtom } from '$state/bookmarks'; +import { AccountDataEvent } from '$types/matrix/accountData'; +import { listBookmarks } from './bookmarkRepository'; + +/** + * Top-level hook that keeps `bookmarkListAtom` in sync with account data. + * + * Must be called from an always-mounted component (e.g. ClientNonUIFeatures), + * NOT from a page component. Page components should simply read from the atom. + * + * Three triggers keep the atom current: + * 1. `useEffect` on mount β€” covers the case where `ClientNonUIFeatures` mounts + * after the initial sync transition has already fired (the common case). + * 2. `SyncState.Syncing` transition β€” refreshes on every reconnect. + * 3. `ClientEvent.AccountData` for the index event type β€” reacts immediately + * to index updates pushed by other devices mid-session. + */ +export function useInitBookmarks(): void { + const mx = useMatrixClient(); + const setList = useSetAtom(bookmarkListAtom); + const setLoading = useSetAtom(bookmarkLoadingAtom); + + const loadBookmarks = useCallback(() => { + setLoading(true); + try { + setList(listBookmarks(mx)); + } finally { + setLoading(false); + } + }, [mx, setList, setLoading]); + + // Immediate load: fires once on mount to cover the case where ClientNonUIFeatures + // mounts after the initial SyncState.Syncing transition has already fired. + // loadBookmarks is stable (memoized with stable deps), so this fires exactly once. + useEffect(() => { + loadBookmarks(); + }, [loadBookmarks]); + + // Trigger on reconnect (SyncState.Syncing transition after a disconnect). + useSyncState( + mx, + useCallback( + (state, prevState) => { + if (state === SyncState.Syncing && prevState !== SyncState.Syncing) { + loadBookmarks(); + } + }, + [loadBookmarks] + ) + ); + + // React to index updates pushed by other devices mid-session. + useAccountDataCallback( + mx, + useCallback( + (event: MatrixEvent) => { + if (event.getType() === (AccountDataEvent.BookmarksIndex as string)) { + loadBookmarks(); + } + }, + [loadBookmarks] + ) + ); +} diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index 98e7e927a..6652e1844 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -80,6 +80,9 @@ import { MessageEditHistoryItem } from '$components/message/modals/MessageEditHi import { MessageSourceCodeItem } from '$components/message/modals/MessageSource'; import { MessageForwardItem } from '$components/message/modals/MessageForward'; import { MessageDeleteItem } from '$components/message/modals/MessageDelete'; +import { computeBookmarkId, createBookmarkItem } from '$features/bookmarks/bookmarkDomain'; +import { useIsBookmarked, useBookmarkActions } from '$features/bookmarks/useBookmarks'; +import { useExperimentVariant } from '$hooks/useClientConfig'; import { MessageReportItem } from '$components/message/modals/MessageReport'; import { filterPronounsByLanguage, getParsedPronouns } from '$utils/pronouns'; import { useMentionClickHandler } from '$hooks/useMentionClickHandler'; @@ -209,6 +212,50 @@ export const MessagePinItem = as< ); }); +// message bookmarking +export const MessageBookmarkItem = as< + 'button', + { + room: Room; + mEvent: MatrixEvent; + onClose?: () => void; + } +>(({ room, mEvent, onClose, ...props }, ref) => { + const mx = useMatrixClient(); + const bookmarksExperiment = useExperimentVariant('messageBookmarks', mx.getUserId() ?? undefined); + const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks'); + const eventId = mEvent.getId() ?? ''; + const isBookmarked = useIsBookmarked(room.roomId, eventId); + const { add, remove } = useBookmarkActions(); + + if (!bookmarksExperiment.inExperiment && !enableMessageBookmarks) return null; + + const handleClick = async () => { + if (isBookmarked) { + await remove(computeBookmarkId(room.roomId, eventId)); + } else { + const item = createBookmarkItem(room, mEvent); + if (item) await add(item); + } + onClose?.(); + }; + + return ( + } + radii="300" + onClick={handleClick} + {...props} + ref={ref} + > + + {isBookmarked ? 'Remove Bookmark' : 'Bookmark Message'} + + + ); +}); + export type ForwardedMessageProps = { originalTimestamp: number; isForwarded: boolean; @@ -1097,6 +1144,7 @@ function MessageInternal( )} + {canPinEvent && ( )} @@ -1430,6 +1478,13 @@ export const Event = as<'div', EventProps>( )} + {!stateEvent && ( + + )} {((!mEvent.isRedacted() && canDelete && !stateEvent) || (mEvent.getSender() !== mx.getUserId() && !stateEvent)) && ( diff --git a/src/app/features/settings/experimental/Experimental.tsx b/src/app/features/settings/experimental/Experimental.tsx index 330412185..e048ed281 100644 --- a/src/app/features/settings/experimental/Experimental.tsx +++ b/src/app/features/settings/experimental/Experimental.tsx @@ -10,6 +10,7 @@ import { Sync } from '../general'; import { SettingsSectionPage } from '../SettingsSectionPage'; import { BandwidthSavingEmojis } from './BandwithSavingEmojis'; import { MSC4268HistoryShare } from './MSC4268HistoryShare'; +import { MSC4438MessageBookmarks } from './MSC4438MessageBookmarks'; function PersonaToggle() { const [showPersonaSetting, setShowPersonaSetting] = useSetting( @@ -59,6 +60,7 @@ export function Experimental({ requestBack, requestClose }: Readonly + diff --git a/src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx b/src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx new file mode 100644 index 000000000..45e429b18 --- /dev/null +++ b/src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx @@ -0,0 +1,56 @@ +import { SequenceCard } from '$components/sequence-card'; +import { SettingTile } from '$components/setting-tile'; +import { useSetting } from '$state/hooks/settings'; +import { settingsAtom } from '$state/settings'; +import { Box, Switch, Text } from 'folds'; +import { SequenceCardStyle } from '../styles.css'; + +export function MSC4438MessageBookmarks() { + const [enableMessageBookmarks, setEnableMessageBookmarks] = useSetting( + settingsAtom, + 'enableMessageBookmarks' + ); + + return ( + + Message Bookmarks + + + Save individual messages for later. Bookmarks are synced across all your devices via + account data.{' '} + + MSC4438 + + .{' '} + + Known issues (Sable GitHub) + + . + + } + after={ + + } + /> + + + ); +} diff --git a/src/app/hooks/router/useHomeSelected.ts b/src/app/hooks/router/useHomeSelected.ts index 2a16511aa..fcc439196 100644 --- a/src/app/hooks/router/useHomeSelected.ts +++ b/src/app/hooks/router/useHomeSelected.ts @@ -4,6 +4,7 @@ import { getHomeJoinPath, getHomePath, getHomeSearchPath, + getHomeBookmarksPath, } from '$pages/pathUtils'; export const useHomeSelected = (): boolean => { @@ -45,3 +46,13 @@ export const useHomeSearchSelected = (): boolean => { return !!match; }; + +export const useHomeBookmarksSelected = (): boolean => { + const match = useMatch({ + path: getHomeBookmarksPath(), + caseSensitive: true, + end: false, + }); + + return !!match; +}; diff --git a/src/app/hooks/router/useInbox.ts b/src/app/hooks/router/useInbox.ts index 639e16dd4..c19c0cc4b 100644 --- a/src/app/hooks/router/useInbox.ts +++ b/src/app/hooks/router/useInbox.ts @@ -1,5 +1,10 @@ import { useMatch } from 'react-router-dom'; -import { getInboxInvitesPath, getInboxNotificationsPath, getInboxPath } from '$pages/pathUtils'; +import { + getInboxBookmarksPath, + getInboxInvitesPath, + getInboxNotificationsPath, + getInboxPath, +} from '$pages/pathUtils'; export const useInboxSelected = (): boolean => { const match = useMatch({ @@ -30,3 +35,13 @@ export const useInboxInvitesSelected = (): boolean => { return !!match; }; + +export const useInboxBookmarksSelected = (): boolean => { + const match = useMatch({ + path: getInboxBookmarksPath(), + caseSensitive: true, + end: false, + }); + + return !!match; +}; diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts index e523f15a7..d3e85df09 100644 --- a/src/app/hooks/useClientConfig.ts +++ b/src/app/hooks/useClientConfig.ts @@ -5,6 +5,21 @@ export type HashRouterConfig = { basename?: string; }; +export type ExperimentConfig = { + enabled?: boolean; + rolloutPercentage?: number; + variants?: string[]; + controlVariant?: string; +}; + +export type ExperimentSelection = { + key: string; + enabled: boolean; + rolloutPercentage: number; + variant: string; + inExperiment: boolean; +}; + export type ClientConfig = { defaultHomeserver?: number; homeserverList?: string[]; @@ -14,6 +29,8 @@ export type ClientConfig = { disableAccountSwitcher?: boolean; hideUsernamePasswordFields?: boolean; + experiments?: Record; + pushNotificationDetails?: { pushNotifyUrl?: string; vapidPublicKey?: string; @@ -55,6 +72,56 @@ export function useClientConfig(): ClientConfig { return config; } +const DEFAULT_CONTROL_VARIANT = 'control'; + +const normalizeRolloutPercentage = (value?: number): number => { + if (typeof value !== 'number' || Number.isNaN(value)) return 100; + if (value < 0) return 0; + if (value > 100) return 100; + return value; +}; + +const hashToUInt32 = (input: string): number => { + let hash = 0; + for (let index = 0; index < input.length; index += 1) { + hash = (hash * 131 + input.charCodeAt(index)) % 4294967291; + } + return hash; +}; + +export const selectExperimentVariant = ( + key: string, + experiment: ExperimentConfig | undefined, + subjectId: string | undefined +): ExperimentSelection => { + const controlVariant = experiment?.controlVariant ?? DEFAULT_CONTROL_VARIANT; + const variants = (experiment?.variants?.filter((v) => v.length > 0) ?? []).filter( + (v) => v !== controlVariant + ); + + const enabled = Boolean(experiment?.enabled); + const rolloutPercentage = normalizeRolloutPercentage(experiment?.rolloutPercentage); + + if (!enabled || !subjectId || variants.length === 0 || rolloutPercentage === 0) { + return { key, enabled, rolloutPercentage, variant: controlVariant, inExperiment: false }; + } + + // Two independent hashes keep rollout and variant assignment stable but decorrelated. + const rolloutBucket = hashToUInt32(`${key}:rollout:${subjectId}`) % 10000; + const rolloutCutoff = Math.floor(rolloutPercentage * 100); + if (rolloutBucket >= rolloutCutoff) { + return { key, enabled, rolloutPercentage, variant: controlVariant, inExperiment: false }; + } + + const variantIndex = hashToUInt32(`${key}:variant:${subjectId}`) % variants.length; + return { key, enabled, rolloutPercentage, variant: variants[variantIndex], inExperiment: true }; +}; + +export const useExperimentVariant = (key: string, subjectId?: string): ExperimentSelection => { + const clientConfig = useClientConfig(); + return selectExperimentVariant(key, clientConfig.experiments?.[key], subjectId); +}; + export const clientDefaultServer = (clientConfig: ClientConfig): string => clientConfig.homeserverList?.[clientConfig.defaultHomeserver ?? 0] ?? 'matrix.org'; diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx index 28f8c7efb..fd8bc462e 100644 --- a/src/app/pages/Router.tsx +++ b/src/app/pages/Router.tsx @@ -48,6 +48,7 @@ import { NOTIFICATIONS_PATH_SEGMENT, ROOM_PATH_SEGMENT, SEARCH_PATH_SEGMENT, + BOOKMARKS_PATH_SEGMENT, SERVER_PATH_SEGMENT, CREATE_PATH, TO_ROOM_EVENT_PATH, @@ -65,6 +66,7 @@ import { import { ClientBindAtoms, ClientLayout, ClientRoot, ClientRouteOutlet } from './client'; import { HandleNotificationClick, ClientNonUIFeatures } from './client/ClientNonUIFeatures'; import { Home, HomeRouteRoomProvider, HomeSearch } from './client/home'; +import { BookmarksList } from './client/bookmarks'; import { Direct, DirectCreate, DirectRouteRoomProvider } from './client/direct'; import { RouteSpaceProvider, Space, SpaceRouteRoomProvider, SpaceSearch } from './client/space'; import { Explore, FeaturedRooms, PublicRooms } from './client/explore'; @@ -242,6 +244,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) } /> join

} /> } /> + } /> } /> } /> + } /> } /> diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 26ac2f431..caebe459a 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -56,6 +56,7 @@ import { useCallSignaling } from '$hooks/useCallSignaling'; import { getBlobCacheStats } from '$hooks/useBlobCache'; import { lastVisitedRoomIdAtom } from '$state/room/lastRoom'; import { useSettingsSyncEffect } from '$hooks/useSettingsSync'; +import { useInitBookmarks } from '$features/bookmarks/useInitBookmarks'; import { getInboxInvitesPath } from '../pathUtils'; import { BackgroundNotifications } from './BackgroundNotifications'; @@ -845,11 +846,17 @@ function SettingsSyncFeature() { return null; } +function BookmarksFeature() { + useInitBookmarks(); + return null; +} + export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) { useCallSignaling(); return ( <> + diff --git a/src/app/pages/client/bookmarks/BookmarksList.tsx b/src/app/pages/client/bookmarks/BookmarksList.tsx new file mode 100644 index 000000000..6dae4fb5c --- /dev/null +++ b/src/app/pages/client/bookmarks/BookmarksList.tsx @@ -0,0 +1,560 @@ +import { FormEventHandler, useCallback, useMemo, useRef, useState } from 'react'; +import { + Avatar, + Box, + Button, + Dialog, + Header, + Icon, + IconButton, + Icons, + Input, + Line, + Overlay, + OverlayBackdrop, + OverlayCenter, + Scroll, + Spinner, + Text, + Chip, + config, + color, +} from 'folds'; +import FocusTrap from 'focus-trap-react'; +import { JoinRule } from '$types/matrix-sdk'; +import { + Page, + PageContent, + PageContentCenter, + PageHeader, + PageHero, + PageHeroSection, +} from '$components/page'; +import { SequenceCard } from '$components/sequence-card'; +import { AvatarBase, ModernLayout, Time, Username, UsernameBold } from '$components/message'; +import { RoomAvatar, RoomIcon } from '$components/room-avatar'; +import { UserAvatar } from '$components/user-avatar'; +import { BackRouteHandler } from '$components/BackRouteHandler'; +import { useMatrixClient } from '$hooks/useMatrixClient'; +import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; +import { useRoomNavigate } from '$hooks/useRoomNavigate'; +import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; +import { useSetting } from '$state/hooks/settings'; +import { settingsAtom } from '$state/settings'; +import { getMemberAvatarMxc, getMemberDisplayName, getRoomAvatarUrl } from '$utils/room'; +import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix'; +import colorMXID from '$utils/colorMXID'; +import { stopPropagation } from '$utils/keyboard'; +import { BookmarkItemContent } from '$features/bookmarks/bookmarkDomain'; +import { + useBookmarkActions, + useBookmarkList, + useBookmarkLoading, +} from '$features/bookmarks/useBookmarks'; + +// --------------------------------------------------------------------------- +// RemoveBookmarkDialog +// --------------------------------------------------------------------------- + +type RemoveBookmarkDialogProps = { + item: BookmarkItemContent; + onConfirm: () => void; + onClose: () => void; +}; + +function RemoveBookmarkDialog({ item, onConfirm, onClose }: RemoveBookmarkDialogProps) { + return ( + +
+ + Remove Bookmark + + + + +
+ + {item.body_preview && ( + + + {item.body_preview} + + + )} + Remove this bookmark? You can always re-bookmark the message. + + + + + + + ); +} + +// --------------------------------------------------------------------------- +// BookmarkItemRow +// --------------------------------------------------------------------------- + +type BookmarkItemRowProps = { + item: BookmarkItemContent; + highlight?: string; + onJump: (roomId: string, eventId: string) => void; + onRemove: (item: BookmarkItemContent) => void; + hour24Clock: boolean; + dateFormatString: string; +}; + +function BookmarkItemRow({ + item, + highlight, + onJump, + onRemove, + hour24Clock, + dateFormatString, +}: BookmarkItemRowProps) { + const mx = useMatrixClient(); + const useAuthentication = useMediaAuthentication(); + + // Try to resolve live room/member data; fall back to stored metadata + const room = mx.getRoom(item.room_id) ?? undefined; + const senderId = item.sender ?? ''; + + const displayName = room + ? (getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId) + : (getMxIdLocalPart(senderId) ?? senderId); + + const senderAvatarMxc = room ? getMemberAvatarMxc(room, senderId) : undefined; + const avatarUrl = senderAvatarMxc + ? (mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined) + : undefined; + + const usernameColor = colorMXID(senderId); + + // Highlight matching substring in body_preview + const preview = item.body_preview ?? ''; + const highlightedPreview = useMemo(() => { + if (!highlight || !preview) return <>{preview}; + const idx = preview.toLowerCase().indexOf(highlight.toLowerCase()); + if (idx === -1) return <>{preview}; + return ( + <> + {preview.slice(0, idx)} + + {preview.slice(idx, idx + highlight.length)} + + {preview.slice(idx + highlight.length)} + + ); + }, [preview, highlight]); + + return ( + + + + } + /> + + + } + > + + + + + {displayName} + + + + + onJump(item.room_id, item.event_id)} + variant="Secondary" + radii="400" + > + Jump + + onRemove(item)} + aria-label="Remove bookmark" + > + + + + + {preview && ( + + {highlightedPreview} + + )} + + + ); +} + +// --------------------------------------------------------------------------- +// BookmarkResultGroup +// --------------------------------------------------------------------------- + +type BookmarkResultGroupProps = { + roomId: string; + roomName: string; + items: BookmarkItemContent[]; + highlight?: string; + onJump: (roomId: string, eventId: string) => void; + onRemove: (item: BookmarkItemContent) => void; + hour24Clock: boolean; + dateFormatString: string; +}; + +function BookmarkResultGroup({ + roomId, + roomName, + items, + highlight, + onJump, + onRemove, + hour24Clock, + dateFormatString, +}: BookmarkResultGroupProps) { + const mx = useMatrixClient(); + const useAuthentication = useMediaAuthentication(); + const room = mx.getRoom(roomId) ?? undefined; + const avatarUrl = room ? getRoomAvatarUrl(mx, room, 96, useAuthentication) : undefined; + const displayRoomName = room?.name ?? roomName; + + return ( + +
+ + + ( + + )} + /> + + + {displayRoomName} + + +
+ + {items.map((item) => ( + + ))} + + + ); +} + +// --------------------------------------------------------------------------- +// BookmarkFilterInput +// --------------------------------------------------------------------------- + +type BookmarkFilterInputProps = { + inputRef: React.RefObject; + active?: boolean; + loading?: boolean; + onFilter: (term: string) => void; + onReset: () => void; +}; + +function BookmarkFilterInput({ + inputRef, + active, + loading, + onFilter, + onReset, +}: BookmarkFilterInputProps) { + const handleSubmit: FormEventHandler = (evt) => { + evt.preventDefault(); + const { filterInput } = evt.target as HTMLFormElement & { + filterInput: HTMLInputElement; + }; + const term = filterInput.value.trim(); + if (term) onFilter(term); + }; + + return ( + + + Filter + + ) : ( + + {active && ( + + + Clear + + )} + + Filter + + + ) + } + /> + + ); +} + +// --------------------------------------------------------------------------- +// BookmarksList (main export) +// --------------------------------------------------------------------------- + +export function BookmarksList() { + const mx = useMatrixClient(); + const screenSize = useScreenSizeContext(); + const scrollRef = useRef(null); + const filterInputRef = useRef(null); + const { navigateRoom } = useRoomNavigate(); + + const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock'); + const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString'); + + const bookmarks = useBookmarkList(); + const loading = useBookmarkLoading(); + const { remove } = useBookmarkActions(); + + const [filterTerm, setFilterTerm] = useState(); + const [removingItem, setRemovingItem] = useState(); + + // Filter and group bookmarks + const filteredBookmarks = useMemo(() => { + if (!filterTerm) return bookmarks; + const lower = filterTerm.toLowerCase(); + return bookmarks.filter( + (b) => + b.body_preview?.toLowerCase().includes(lower) || + b.room_name?.toLowerCase().includes(lower) || + (b.sender && getMxIdLocalPart(b.sender)?.toLowerCase().includes(lower)) + ); + }, [bookmarks, filterTerm]); + + // Group by room_id, preserving order + const groupedByRoom = useMemo(() => { + const map = new Map< + string, + { roomId: string; roomName: string; items: BookmarkItemContent[] } + >(); + filteredBookmarks.forEach((item) => { + let group = map.get(item.room_id); + if (!group) { + const room = mx.getRoom(item.room_id); + group = { + roomId: item.room_id, + roomName: room?.name ?? item.room_name ?? item.room_id, + items: [], + }; + map.set(item.room_id, group); + } + group.items.push(item); + }); + return Array.from(map.values()); + }, [filteredBookmarks, mx]); + + const handleJump = useCallback( + (roomId: string, eventId: string) => { + navigateRoom(roomId, eventId); + }, + [navigateRoom] + ); + + const handleRemoveConfirm = useCallback(async () => { + if (!removingItem) return; + await remove(removingItem.bookmark_id); + setRemovingItem(undefined); + }, [removingItem, remove]); + + const handleFilter = useCallback((term: string) => { + setFilterTerm(term); + }, []); + + const handleReset = useCallback(() => { + setFilterTerm(undefined); + if (filterInputRef.current) { + filterInputRef.current.value = ''; + } + }, []); + + return ( + + + + + {screenSize === ScreenSize.Mobile && ( + + {(onBack) => ( + + + + )} + + )} + + + {screenSize !== ScreenSize.Mobile && } + + Bookmarks + + + + + + + + + + + + + {loading && bookmarks.length === 0 && ( + + + + )} + + {!loading && bookmarks.length === 0 && ( + + } + title="No Bookmarks Yet" + subTitle="Bookmark messages to find them again easily. Right-click a message and choose Bookmark." + /> + + )} + + {!loading && bookmarks.length > 0 && filteredBookmarks.length === 0 && ( + + + + No bookmarks match your filter. + + + )} + + {groupedByRoom.length > 0 && ( + + {groupedByRoom.map((group, i) => ( + <> + {i > 0 && } + + + ))} + + )} + + + + + + {removingItem && ( + }> + + setRemovingItem(undefined), + clickOutsideDeactivates: true, + escapeDeactivates: stopPropagation, + }} + > + setRemovingItem(undefined)} + /> + + + + )} + + ); +} diff --git a/src/app/pages/client/bookmarks/index.ts b/src/app/pages/client/bookmarks/index.ts new file mode 100644 index 000000000..cdd211f71 --- /dev/null +++ b/src/app/pages/client/bookmarks/index.ts @@ -0,0 +1 @@ +export * from './BookmarksList'; diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx index c25d99e30..175b48f9d 100644 --- a/src/app/pages/client/home/Home.tsx +++ b/src/app/pages/client/home/Home.tsx @@ -35,11 +35,16 @@ import { getHomeCreatePath, getHomeRoomPath, getHomeSearchPath, + getHomeBookmarksPath, withSearchParam, } from '$pages/pathUtils'; import { getCanonicalAliasOrRoomId } from '$utils/matrix'; import { useSelectedRoom } from '$hooks/router/useSelectedRoom'; -import { useHomeCreateSelected, useHomeSearchSelected } from '$hooks/router/useHomeSelected'; +import { + useHomeCreateSelected, + useHomeSearchSelected, + useHomeBookmarksSelected, +} from '$hooks/router/useHomeSelected'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { VirtualTile } from '$components/virtualizer'; import { RoomNavCategoryButton, RoomNavItem } from '$features/room-nav'; @@ -54,6 +59,7 @@ import { useClosedNavCategoriesAtom } from '$state/hooks/closedNavCategories'; import { stopPropagation } from '$utils/keyboard'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; +import { useExperimentVariant } from '$hooks/useClientConfig'; import { getRoomNotificationMode, useRoomsNotificationPreferencesContext, @@ -203,6 +209,10 @@ export function Home() { const selectedRoomId = useSelectedRoom(); const createRoomSelected = useHomeCreateSelected(); const searchSelected = useHomeSearchSelected(); + const bookmarksSelected = useHomeBookmarksSelected(); + const bookmarksExperiment = useExperimentVariant('messageBookmarks', mx.getUserId() ?? undefined); + const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks'); + const showBookmarks = bookmarksExperiment.inExperiment || enableMessageBookmarks; const noRoomToDisplay = rooms.length === 0; const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom()); @@ -236,83 +246,101 @@ export function Home() { return ( - {noRoomToDisplay ? ( - - ) : ( - - - - - navigate(getHomeCreatePath())}> - - - - - - - - Create Room - - + + + + + navigate(getHomeCreatePath())}> + + + + + + + + Create Room + - - - - - {(open, setOpen) => ( - <> - - setOpen(true)}> - - - - - - - - Join with Address - - + + + + + + {(open, setOpen) => ( + <> + + setOpen(true)}> + + + + + + + + Join with Address + - - - - {open && ( - setOpen(false)} - onOpen={(roomIdOrAlias, viaServers, eventId) => { - setOpen(false); - const path = getHomeRoomPath(roomIdOrAlias, eventId); - navigate( - viaServers - ? withSearchParam(path, { - viaServers: encodeSearchParamValueArray(viaServers), - }) - : path - ); - }} - /> - )} - - )} - - - + + + + + {open && ( + setOpen(false)} + onOpen={(roomIdOrAlias, viaServers, eventId) => { + setOpen(false); + const path = getHomeRoomPath(roomIdOrAlias, eventId); + navigate( + viaServers + ? withSearchParam(path, { + viaServers: encodeSearchParamValueArray(viaServers), + }) + : path + ); + }} + /> + )} + + )} + + + + + + + + + + + Message Search + + + + + + + {showBookmarks && ( + + - + - Message Search + Bookmarks - + )} + + {noRoomToDisplay ? ( + + ) : ( - - - )} + )} + + ); } diff --git a/src/app/pages/client/inbox/Inbox.tsx b/src/app/pages/client/inbox/Inbox.tsx index 661435513..d594a928e 100644 --- a/src/app/pages/client/inbox/Inbox.tsx +++ b/src/app/pages/client/inbox/Inbox.tsx @@ -1,12 +1,24 @@ import { Avatar, Box, Icon, Icons, Text } from 'folds'; import { useAtomValue } from 'jotai'; import { NavCategory, NavItem, NavItemContent, NavLink } from '$components/nav'; -import { getInboxInvitesPath, getInboxNotificationsPath } from '$pages/pathUtils'; -import { useInboxInvitesSelected, useInboxNotificationsSelected } from '$hooks/router/useInbox'; +import { + getInboxBookmarksPath, + getInboxInvitesPath, + getInboxNotificationsPath, +} from '$pages/pathUtils'; +import { + useInboxBookmarksSelected, + useInboxInvitesSelected, + useInboxNotificationsSelected, +} from '$hooks/router/useInbox'; import { UnreadBadge } from '$components/unread-badge'; import { allInvitesAtom } from '$state/room-list/inviteList'; import { useNavToActivePathMapper } from '$hooks/useNavToActivePathMapper'; import { PageNav, PageNavContent, PageNavHeader } from '$components/page'; +import { useMatrixClient } from '$hooks/useMatrixClient'; +import { useSetting } from '$state/hooks/settings'; +import { settingsAtom } from '$state/settings'; +import { useExperimentVariant } from '$hooks/useClientConfig'; function InvitesNavItem() { const invitesSelected = useInboxInvitesSelected(); @@ -39,9 +51,36 @@ function InvitesNavItem() { ); } +function BookmarksNavItem() { + const bookmarksSelected = useInboxBookmarksSelected(); + + return ( + + + + + + + + + + Bookmarks + + + + + + + ); +} + export function Inbox() { useNavToActivePathMapper('inbox'); + const mx = useMatrixClient(); const notificationsSelected = useInboxNotificationsSelected(); + const bookmarksExperiment = useExperimentVariant('messageBookmarks', mx.getUserId() ?? undefined); + const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks'); + const showBookmarks = bookmarksExperiment.inExperiment || enableMessageBookmarks; return ( @@ -75,6 +114,7 @@ export function Inbox() { + {showBookmarks && } diff --git a/src/app/pages/pathUtils.ts b/src/app/pages/pathUtils.ts index 120a1a70c..7e5cb8d84 100644 --- a/src/app/pages/pathUtils.ts +++ b/src/app/pages/pathUtils.ts @@ -13,7 +13,9 @@ import { HOME_PATH, HOME_ROOM_PATH, HOME_SEARCH_PATH, + HOME_BOOKMARKS_PATH, LOGIN_PATH, + INBOX_BOOKMARKS_PATH, INBOX_INVITES_PATH, INBOX_NOTIFICATIONS_PATH, INBOX_PATH, @@ -93,6 +95,7 @@ export const getHomePath = (): string => HOME_PATH; export const getHomeCreatePath = (): string => HOME_CREATE_PATH; export const getHomeJoinPath = (): string => HOME_JOIN_PATH; export const getHomeSearchPath = (): string => HOME_SEARCH_PATH; +export const getHomeBookmarksPath = (): string => HOME_BOOKMARKS_PATH; export const getHomeRoomPath = (roomIdOrAlias: string, eventId?: string): string => { const params = { roomIdOrAlias: encodeURIComponent(roomIdOrAlias), @@ -160,6 +163,7 @@ export const getCreatePath = (): string => CREATE_PATH; export const getInboxPath = (): string => INBOX_PATH; export const getInboxNotificationsPath = (): string => INBOX_NOTIFICATIONS_PATH; export const getInboxInvitesPath = (): string => INBOX_INVITES_PATH; +export const getInboxBookmarksPath = (): string => INBOX_BOOKMARKS_PATH; export const getSettingsPath = (section?: string, focus?: string): string => { const path = trimTrailingSlash(generatePath(SETTINGS_PATH, { section: section ?? null })); diff --git a/src/app/pages/paths.ts b/src/app/pages/paths.ts index 1ac57b756..2e686d109 100644 --- a/src/app/pages/paths.ts +++ b/src/app/pages/paths.ts @@ -39,6 +39,7 @@ export type SearchPathSearchParams = { senders?: string; }; export const SEARCH_PATH_SEGMENT = 'search/'; +export const BOOKMARKS_PATH_SEGMENT = 'bookmarks/'; export type RoomSearchParams = { /* comma separated string of servers */ @@ -50,6 +51,7 @@ export const HOME_PATH = '/home/'; export const HOME_CREATE_PATH = `/home/${CREATE_PATH_SEGMENT}`; export const HOME_JOIN_PATH = `/home/${JOIN_PATH_SEGMENT}`; export const HOME_SEARCH_PATH = `/home/${SEARCH_PATH_SEGMENT}`; +export const HOME_BOOKMARKS_PATH = `/home/${BOOKMARKS_PATH_SEGMENT}`; export const HOME_ROOM_PATH = `/home/${ROOM_PATH_SEGMENT}`; export const DIRECT_PATH = '/direct/'; @@ -88,6 +90,7 @@ export type InboxNotificationsPathSearchParams = { }; export const INBOX_NOTIFICATIONS_PATH = `/inbox/${NOTIFICATIONS_PATH_SEGMENT}`; export const INBOX_INVITES_PATH = `/inbox/${INVITES_PATH_SEGMENT}`; +export const INBOX_BOOKMARKS_PATH = `/inbox/${BOOKMARKS_PATH_SEGMENT}`; export const TO_PATH = '/to'; // Deep-link route used by push notification click-back URLs. diff --git a/src/app/state/bookmarks.ts b/src/app/state/bookmarks.ts new file mode 100644 index 000000000..7a2375691 --- /dev/null +++ b/src/app/state/bookmarks.ts @@ -0,0 +1,20 @@ +import { atom } from 'jotai'; +import { BookmarkItemContent } from '../features/bookmarks/bookmarkDomain'; + +/** Ordered list of active bookmark items (mirrors the server index order). */ +export const bookmarkListAtom = atom([]); + +/** True while a refresh from account data is in progress. */ +export const bookmarkLoadingAtom = atom(false); + +/** + * Derived set of active bookmark IDs β€” used for O(1) per-message + * "is this message bookmarked?" checks. + * + * MSC4438 Β§Checking if a message is bookmarked: use a local reverse lookup + * rather than issuing server requests. + */ +export const bookmarkIdSetAtom = atom>((get) => { + const list = get(bookmarkListAtom); + return new Set(list.map((b) => b.bookmark_id)); +}); diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 3dcf1b1fb..68318ae5c 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -117,6 +117,9 @@ export interface Settings { showPersonaSetting: boolean; closeFoldersByDefault: boolean; + // experimental + enableMessageBookmarks: boolean; + // furry stuff renderAnimals: boolean; } @@ -216,6 +219,9 @@ const defaultSettings: Settings = { showPersonaSetting: false, closeFoldersByDefault: false, + // experimental + enableMessageBookmarks: false, + // furry stuff renderAnimals: true, }; diff --git a/src/types/matrix/accountData.ts b/src/types/matrix/accountData.ts index 25b13cbc4..f89958d9f 100644 --- a/src/types/matrix/accountData.ts +++ b/src/types/matrix/accountData.ts @@ -18,6 +18,11 @@ export enum AccountDataEvent { CrossSigningUser = 'm.cross_signing.user', MegolmBackupV1 = 'm.megolm_backup.v1', + // MSC4438 Message Bookmarks (unstable prefix) + BookmarksIndex = 'org.matrix.msc4438.bookmarks.index', + /** Prefix for per-bookmark item events; append the bookmark ID to get the full event type. */ + BookmarkItemPrefix = 'org.matrix.msc4438.bookmark.', + // Sable account data SableNicknames = 'moe.sable.app.nicknames', SablePinStatus = 'moe.sable.app.pins_read_marker', From f7268334108cacaa2b9ec47493f7fde922aecf32 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 12:46:47 -0400 Subject: [PATCH 046/253] test(bookmarks): add unit tests for MSC4438 bookmark domain and repository --- .../features/bookmarks/bookmarkDomain.test.ts | 375 ++++++++++++++++++ .../bookmarks/bookmarkRepository.test.ts | 334 ++++++++++++++++ src/app/state/bookmarks.test.ts | 69 ++++ 3 files changed, 778 insertions(+) create mode 100644 src/app/features/bookmarks/bookmarkDomain.test.ts create mode 100644 src/app/features/bookmarks/bookmarkRepository.test.ts create mode 100644 src/app/state/bookmarks.test.ts diff --git a/src/app/features/bookmarks/bookmarkDomain.test.ts b/src/app/features/bookmarks/bookmarkDomain.test.ts new file mode 100644 index 000000000..2f70879da --- /dev/null +++ b/src/app/features/bookmarks/bookmarkDomain.test.ts @@ -0,0 +1,375 @@ +/** + * Unit tests for MSC4438 bookmark domain logic. + * All functions in bookmarkDomain.ts are pure / side-effect-free. + */ +import { describe, it, expect } from 'vitest'; +import type { MatrixEvent, Room } from '$types/matrix-sdk'; +import { AccountDataEvent } from '$types/matrix/accountData'; +import { + bookmarkItemEventType, + buildMatrixURI, + computeBookmarkId, + createBookmarkItem, + emptyIndex, + extractBodyPreview, + isValidBookmarkItem, + isValidIndexContent, +} from './bookmarkDomain'; + +// --------------------------------------------------------------------------- +// Helpers: minimal Matrix object stubs +// --------------------------------------------------------------------------- + +function makeEvent( + opts: { + id?: string | null; + body?: unknown; + msgtype?: string; + sender?: string; + ts?: number; + } = {} +): MatrixEvent { + return { + getId: () => (opts.id === null ? undefined : (opts.id ?? '$event:server.tld')), + getTs: () => opts.ts ?? 1_000_000, + getSender: () => opts.sender ?? '@alice:server.tld', + getContent: () => ({ + body: opts.body, + msgtype: opts.msgtype ?? 'm.text', + }), + } as unknown as MatrixEvent; +} + +function makeRoom(opts: { roomId?: string; name?: string } = {}): Room { + return { + roomId: opts.roomId ?? '!room:server.tld', + name: opts.name ?? 'Test Room', + } as unknown as Room; +} + +// --------------------------------------------------------------------------- +// computeBookmarkId +// --------------------------------------------------------------------------- + +describe('computeBookmarkId', () => { + it('returns a string prefixed with "bmk_"', () => { + expect(computeBookmarkId('!room:s', '$event:s')).toMatch(/^bmk_/); + }); + + it('is exactly 12 characters long ("bmk_" + 8 hex digits)', () => { + expect(computeBookmarkId('!room:s', '$event:s')).toHaveLength(12); + }); + + it('only contains hex digits after the prefix', () => { + const id = computeBookmarkId('!room:server.tld', '$event:server.tld'); + expect(id.slice(4)).toMatch(/^[0-9a-f]{8}$/); + }); + + it('is deterministic β€” same inputs always yield the same ID', () => { + const a = computeBookmarkId('!room:server.tld', '$event:server.tld'); + const b = computeBookmarkId('!room:server.tld', '$event:server.tld'); + expect(a).toBe(b); + }); + + it('differs when roomId changes', () => { + const a = computeBookmarkId('!roomA:s', '$event:s'); + const b = computeBookmarkId('!roomB:s', '$event:s'); + expect(a).not.toBe(b); + }); + + it('differs when eventId changes', () => { + const a = computeBookmarkId('!room:s', '$eventA:s'); + const b = computeBookmarkId('!room:s', '$eventB:s'); + expect(a).not.toBe(b); + }); + + it('separator prevents (roomId + eventId) collisions', () => { + // Without "|" separator, ("ab", "c") and ("a", "bc") would hash the same + const a = computeBookmarkId('ab', 'c'); + const b = computeBookmarkId('a', 'bc'); + expect(a).not.toBe(b); + }); + + // Known vector β€” computed from the reference djb2-like algorithm: + // input = "a|b", each char's code units: 97, 124, 98 + // hash trace: 0 β†’ 97 β†’ 3131 β†’ 97159 (0x17b87) + it('produces the known reference vector for ("a", "b")', () => { + expect(computeBookmarkId('a', 'b')).toBe('bmk_00017b87'); + }); +}); + +// --------------------------------------------------------------------------- +// bookmarkItemEventType +// --------------------------------------------------------------------------- + +describe('bookmarkItemEventType', () => { + it('returns the MSC4438 unstable event type for a given bookmark ID', () => { + expect(bookmarkItemEventType('bmk_abcd1234')).toBe( + `${AccountDataEvent.BookmarkItemPrefix}bmk_abcd1234` + ); + }); + + it('uses BookmarkItemPrefix as the base', () => { + const id = 'bmk_00000001'; + expect(bookmarkItemEventType(id)).toContain(AccountDataEvent.BookmarkItemPrefix); + }); + + it('has BookmarksIndex enum value defined correctly', () => { + expect(AccountDataEvent.BookmarksIndex).toBe('org.matrix.msc4438.bookmarks.index'); + }); +}); + +// --------------------------------------------------------------------------- +// buildMatrixURI +// --------------------------------------------------------------------------- + +describe('buildMatrixURI', () => { + it.each([ + [ + '!room:server.tld', + '$event:server.tld', + // encodeURIComponent does not encode '!' β€” only ':' and '$' are encoded here + 'matrix:roomid/!room%3Aserver.tld/e/%24event%3Aserver.tld', + ], + ['simple', 'id', 'matrix:roomid/simple/e/id'], + ['a b', 'c d', 'matrix:roomid/a%20b/e/c%20d'], + ])('buildMatrixURI(%s, %s) β†’ %s', (roomId, eventId, expected) => { + expect(buildMatrixURI(roomId, eventId)).toBe(expected); + }); + + it('starts with "matrix:roomid/"', () => { + expect(buildMatrixURI('!r:s', '$e:s')).toMatch(/^matrix:roomid\//); + }); + + it('contains "/e/" separator between roomId and eventId', () => { + expect(buildMatrixURI('!r:s', '$e:s')).toContain('/e/'); + }); +}); + +// --------------------------------------------------------------------------- +// extractBodyPreview +// --------------------------------------------------------------------------- + +describe('extractBodyPreview', () => { + it('returns the body unchanged when it is within the default limit', () => { + const event = makeEvent({ body: 'Hello, world!' }); + expect(extractBodyPreview(event)).toBe('Hello, world!'); + }); + + it('returns an empty string when body is undefined', () => { + const event = makeEvent({ body: undefined }); + expect(extractBodyPreview(event)).toBe(''); + }); + + it('returns an empty string when body is a non-string type', () => { + const event = makeEvent({ body: 42 }); + expect(extractBodyPreview(event)).toBe(''); + }); + + it('returns an empty string when body is an empty string', () => { + const event = makeEvent({ body: '' }); + expect(extractBodyPreview(event)).toBe(''); + }); + + it('truncates to 120 chars and appends "…" when body exceeds the default limit', () => { + const long = 'x'.repeat(200); + const result = extractBodyPreview(makeEvent({ body: long })); + expect(result).toHaveLength(121); // 120 + ellipsis char + expect(result.endsWith('\u2026')).toBe(true); + expect(result.slice(0, 120)).toBe('x'.repeat(120)); + }); + + it('does not truncate when body is exactly 120 chars', () => { + const exact = 'y'.repeat(120); + expect(extractBodyPreview(makeEvent({ body: exact }))).toBe(exact); + }); + + it('respects a custom maxLength', () => { + const event = makeEvent({ body: 'abcdefghij' }); + const result = extractBodyPreview(event, 5); + expect(result).toBe('abcde\u2026'); + }); +}); + +// --------------------------------------------------------------------------- +// isValidIndexContent +// --------------------------------------------------------------------------- + +describe('isValidIndexContent', () => { + const valid = { + version: 1 as const, + revision: 0, + updated_ts: Date.now(), + bookmark_ids: [], + }; + + it('accepts a well-formed index', () => { + expect(isValidIndexContent(valid)).toBe(true); + }); + + it('accepts an index with string IDs in bookmark_ids', () => { + expect(isValidIndexContent({ ...valid, bookmark_ids: ['bmk_aabbccdd'] })).toBe(true); + }); + + it('rejects null', () => { + expect(isValidIndexContent(null)).toBe(false); + }); + + it('rejects a non-object', () => { + expect(isValidIndexContent('string')).toBe(false); + expect(isValidIndexContent(42)).toBe(false); + }); + + it('rejects version !== 1', () => { + expect(isValidIndexContent({ ...valid, version: 2 })).toBe(false); + }); + + it('rejects missing revision', () => { + const { revision, ...rest } = valid; + expect(isValidIndexContent(rest)).toBe(false); + }); + + it('rejects missing updated_ts', () => { + const { updated_ts: updatedTs, ...rest } = valid; + expect(isValidIndexContent(rest)).toBe(false); + }); + + it('rejects missing bookmark_ids', () => { + const { bookmark_ids: bookmarkIds, ...rest } = valid; + expect(isValidIndexContent(rest)).toBe(false); + }); + + it('rejects bookmark_ids containing a non-string', () => { + expect(isValidIndexContent({ ...valid, bookmark_ids: [1, 2, 3] })).toBe(false); + }); +}); + +// --------------------------------------------------------------------------- +// isValidBookmarkItem +// --------------------------------------------------------------------------- + +describe('isValidBookmarkItem', () => { + const valid = { + version: 1 as const, + bookmark_id: 'bmk_abcd1234', + uri: 'matrix:roomid/foo/e/bar', + room_id: '!room:s', + event_id: '$event:s', + event_ts: 1_000_000, + bookmarked_ts: 2_000_000, + }; + + it('accepts a complete, well-formed item', () => { + expect(isValidBookmarkItem(valid)).toBe(true); + }); + + it('accepts an item with optional fields set', () => { + expect( + isValidBookmarkItem({ ...valid, sender: '@alice:s', room_name: 'Room', deleted: false }) + ).toBe(true); + }); + + it('rejects null', () => { + expect(isValidBookmarkItem(null)).toBe(false); + }); + + it('rejects a non-object', () => { + expect(isValidBookmarkItem('string')).toBe(false); + }); + + it('rejects version !== 1', () => { + expect(isValidBookmarkItem({ ...valid, version: 2 })).toBe(false); + }); + + it.each(['bookmark_id', 'uri', 'room_id', 'event_id'] as const)( + 'rejects item missing string field "%s"', + (field) => { + const copy = { ...valid } as Record; + delete copy[field]; + expect(isValidBookmarkItem(copy)).toBe(false); + } + ); + + it.each(['event_ts', 'bookmarked_ts'] as const)( + 'rejects item missing numeric field "%s"', + (field) => { + const copy = { ...valid } as Record; + delete copy[field]; + expect(isValidBookmarkItem(copy)).toBe(false); + } + ); +}); + +// --------------------------------------------------------------------------- +// createBookmarkItem +// --------------------------------------------------------------------------- + +describe('createBookmarkItem', () => { + it('returns undefined when the event has no ID', () => { + const room = makeRoom(); + const event = makeEvent({ id: null }); + expect(createBookmarkItem(room, event)).toBeUndefined(); + }); + + it('returns a valid BookmarkItemContent for a normal event', () => { + const room = makeRoom({ roomId: '!r:s', name: 'My Room' }); + const event = makeEvent({ + id: '$e:s', + body: 'Hello', + msgtype: 'm.text', + sender: '@bob:s', + ts: 123456, + }); + const item = createBookmarkItem(room, event); + expect(item).toBeDefined(); + expect(item!.version).toBe(1); + expect(item!.room_id).toBe('!r:s'); + expect(item!.event_id).toBe('$e:s'); + expect(item!.bookmark_id).toBe(computeBookmarkId('!r:s', '$e:s')); + expect(item!.uri).toBe(buildMatrixURI('!r:s', '$e:s')); + expect(item!.event_ts).toBe(123456); + expect(item!.sender).toBe('@bob:s'); + expect(item!.room_name).toBe('My Room'); + expect(item!.body_preview).toBe('Hello'); + expect(item!.msgtype).toBe('m.text'); + }); + + it('omits body_preview when body is missing', () => { + const room = makeRoom(); + const event = makeEvent({ body: undefined }); + const item = createBookmarkItem(room, event); + expect(item!.body_preview).toBe(''); + }); + + it('passes isValidBookmarkItem on the returned content', () => { + const room = makeRoom(); + const event = makeEvent(); + const item = createBookmarkItem(room, event); + expect(isValidBookmarkItem(item)).toBe(true); + }); +}); + +// --------------------------------------------------------------------------- +// emptyIndex +// --------------------------------------------------------------------------- + +describe('emptyIndex', () => { + it('returns a valid index with version 1', () => { + const idx = emptyIndex(); + expect(isValidIndexContent(idx)).toBe(true); + expect(idx.version).toBe(1); + }); + + it('starts with revision 0 and empty bookmark_ids', () => { + const idx = emptyIndex(); + expect(idx.revision).toBe(0); + expect(idx.bookmark_ids).toEqual([]); + }); + + it('returns a fresh object on each call (no shared reference)', () => { + const a = emptyIndex(); + const b = emptyIndex(); + a.bookmark_ids.push('bmk_aabbccdd'); + expect(b.bookmark_ids).toHaveLength(0); + }); +}); diff --git a/src/app/features/bookmarks/bookmarkRepository.test.ts b/src/app/features/bookmarks/bookmarkRepository.test.ts new file mode 100644 index 000000000..7b928b50e --- /dev/null +++ b/src/app/features/bookmarks/bookmarkRepository.test.ts @@ -0,0 +1,334 @@ +/** + * Unit tests for MSC4438 bookmark repository layer. + * + * The repository functions are pure in the sense that they read and write + * synchronously from a MatrixClient mock that returns predictable account data. + * No network calls are made. + */ +import { describe, it, expect, beforeEach, vi } from 'vitest'; +import type { MatrixClient } from '$types/matrix-sdk'; +import { AccountDataEvent } from '$types/matrix/accountData'; +import { addBookmark, removeBookmark, listBookmarks, isBookmarked } from './bookmarkRepository'; +import { + bookmarkItemEventType, + emptyIndex, + type BookmarkIndexContent, + type BookmarkItemContent, +} from './bookmarkDomain'; + +// --------------------------------------------------------------------------- +// Stub MatrixClient +// --------------------------------------------------------------------------- + +/** + * Build a minimal MatrixClient stub backed by an in-memory store. + * `getAccountData` returns a fake MatrixEvent whose `getContent()` reads + * from the store; `setAccountData` writes to the store. + */ +function makeClient(initialData: Record = {}): MatrixClient { + const store: Record = { ...initialData }; + const accountData = new Map(Object.entries(store)); + + return { + getAccountData: vi.fn((eventType: string) => { + const content = store[eventType]; + if (content === undefined) return undefined; + return { getContent: () => content }; + }), + setAccountData: vi.fn(async (eventType: string, content: unknown) => { + store[eventType] = content; + accountData.set(eventType, content); + }), + store: { accountData }, + _store: store, // exposed for inspection in tests + } as unknown as MatrixClient; +} + +// --------------------------------------------------------------------------- +// Test data helpers +// --------------------------------------------------------------------------- + +function makeItem(overrides: Partial = {}): BookmarkItemContent { + return { + version: 1, + bookmark_id: 'bmk_aabbccdd', + uri: 'matrix:roomid/foo/e/bar', + room_id: '!room:s', + event_id: '$event:s', + event_ts: 1_000_000, + bookmarked_ts: 2_000_000, + ...overrides, + }; +} + +function makeIndex(overrides: Partial = {}): BookmarkIndexContent { + return { + ...emptyIndex(), + ...overrides, + }; +} + +// --------------------------------------------------------------------------- +// addBookmark +// --------------------------------------------------------------------------- + +describe('addBookmark', () => { + let mx: MatrixClient; + + beforeEach(() => { + mx = makeClient(); + }); + + it('writes the item event before writing the index', async () => { + const item = makeItem(); + const callOrder: string[] = []; + + (mx.setAccountData as ReturnType).mockImplementation( + async (type: string, content: unknown) => { + callOrder.push(type); + // keep default in-memory behaviour + (mx as any)._store[type] = content; + } + ); + + await addBookmark(mx, item); + + expect(callOrder[0]).toBe(bookmarkItemEventType(item.bookmark_id)); + expect(callOrder[1]).toBe(AccountDataEvent.BookmarksIndex); + }); + + it('prepends the bookmark ID to bookmark_ids in the index', async () => { + const existing = makeItem({ bookmark_id: 'bmk_11111111' }); + const mx2 = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [existing.bookmark_id] }), + [bookmarkItemEventType(existing.bookmark_id)]: existing, + }); + + const newItem = makeItem({ bookmark_id: 'bmk_22222222' }); + await addBookmark(mx2, newItem); + + const store = (mx2 as any)._store; + const idx = store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent; + expect(idx.bookmark_ids[0]).toBe('bmk_22222222'); + expect(idx.bookmark_ids[1]).toBe('bmk_11111111'); + }); + + it('does not duplicate an ID already in the index', async () => { + const item = makeItem(); + const mx2 = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + + await addBookmark(mx2, item); + + const idx = (mx2 as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent; + expect(idx.bookmark_ids.filter((id) => id === item.bookmark_id)).toHaveLength(1); + }); + + it('increments the index revision', async () => { + const item = makeItem(); + await addBookmark(mx, item); + + const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent; + expect(idx.revision).toBe(1); + }); + + it('works when no index exists yet (creates an empty one)', async () => { + const item = makeItem(); + await addBookmark(mx, item); + + const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent; + expect(idx.bookmark_ids).toContain(item.bookmark_id); + }); +}); + +// --------------------------------------------------------------------------- +// removeBookmark +// --------------------------------------------------------------------------- + +describe('removeBookmark', () => { + it('removes the bookmark ID from the index', async () => { + const item = makeItem(); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + + await removeBookmark(mx, item.bookmark_id); + + const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent; + expect(idx.bookmark_ids).not.toContain(item.bookmark_id); + }); + + it('soft-deletes the item event (sets deleted: true)', async () => { + const item = makeItem(); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + + await removeBookmark(mx, item.bookmark_id); + + const stored = (mx as any)._store[ + bookmarkItemEventType(item.bookmark_id) + ] as BookmarkItemContent; + expect(stored.deleted).toBe(true); + }); + + it('increments the index revision', async () => { + const item = makeItem(); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ + bookmark_ids: [item.bookmark_id], + revision: 3, + }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + + await removeBookmark(mx, item.bookmark_id); + + const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent; + expect(idx.revision).toBe(4); + }); + + it('succeeds without error when the item event does not exist', async () => { + const item = makeItem(); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }), + // No item event stored + }); + + await expect(removeBookmark(mx, item.bookmark_id)).resolves.not.toThrow(); + }); + + it('leaves the index unchanged when the ID was not present', async () => { + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_aaaabbbb'] }), + }); + + await removeBookmark(mx, 'bmk_nonexistent'); + + const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent; + expect(idx.bookmark_ids).toEqual(['bmk_aaaabbbb']); + }); +}); + +// --------------------------------------------------------------------------- +// listBookmarks +// --------------------------------------------------------------------------- + +describe('listBookmarks', () => { + it('returns an empty array when there is no index', () => { + const mx = makeClient(); + expect(listBookmarks(mx)).toEqual([]); + }); + + it('returns active items in index order', () => { + const a = makeItem({ bookmark_id: 'bmk_aaaaaaaa' }); + const b = makeItem({ bookmark_id: 'bmk_bbbbbbbb' }); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ + bookmark_ids: [a.bookmark_id, b.bookmark_id], + }), + [bookmarkItemEventType(a.bookmark_id)]: a, + [bookmarkItemEventType(b.bookmark_id)]: b, + }); + + const result = listBookmarks(mx); + expect(result.map((i) => i.bookmark_id)).toEqual([a.bookmark_id, b.bookmark_id]); + }); + + it('skips items that are soft-deleted (deleted: true)', () => { + const item = makeItem({ deleted: true }); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + + expect(listBookmarks(mx)).toEqual([]); + }); + + it('skips item IDs whose event is missing from account data', () => { + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_orphaned'] }), + // No item event + }); + + expect(listBookmarks(mx)).toEqual([]); + }); + + it('deduplicates IDs that appear more than once in bookmark_ids', () => { + const item = makeItem(); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ + bookmark_ids: [item.bookmark_id, item.bookmark_id], + }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + + expect(listBookmarks(mx)).toHaveLength(1); + }); + + it('skips malformed item events', () => { + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_bad'] }), + [bookmarkItemEventType('bmk_bad')]: { not_a_valid: 'item' }, + }); + + expect(listBookmarks(mx)).toEqual([]); + }); + + it('recovers orphaned items whose event exists but ID is absent from the index', () => { + // Simulate a concurrent-write race: device A's bookmark_id was dropped from the + // index by a last-write-wins overwrite, but the item event still exists. + const orphan = makeItem({ bookmark_id: 'bmk_orphan1' }); + const indexed = makeItem({ bookmark_id: 'bmk_indexed' }); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [indexed.bookmark_id] }), + [bookmarkItemEventType(indexed.bookmark_id)]: indexed, + [bookmarkItemEventType(orphan.bookmark_id)]: orphan, + }); + + const result = listBookmarks(mx); + expect(result.map((i) => i.bookmark_id)).toContain(orphan.bookmark_id); + expect(result.map((i) => i.bookmark_id)).toContain(indexed.bookmark_id); + // Indexed item should appear before the orphan + expect(result[0].bookmark_id).toBe(indexed.bookmark_id); + }); + + it('does not return soft-deleted orphaned items', () => { + const orphan = makeItem({ bookmark_id: 'bmk_orphan2', deleted: true }); + const mx = makeClient({ + // No index entry for the orphan β€” deleted orphan should still be skipped + [bookmarkItemEventType(orphan.bookmark_id)]: orphan, + }); + + expect(listBookmarks(mx)).toEqual([]); + }); +}); + +// --------------------------------------------------------------------------- +// isBookmarked +// --------------------------------------------------------------------------- + +describe('isBookmarked', () => { + it('returns true when the ID is in the index', () => { + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_aabbccdd'] }), + }); + expect(isBookmarked(mx, 'bmk_aabbccdd')).toBe(true); + }); + + it('returns false when the ID is not in the index', () => { + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_aabbccdd'] }), + }); + expect(isBookmarked(mx, 'bmk_ffffffff')).toBe(false); + }); + + it('returns false when there is no index', () => { + const mx = makeClient(); + expect(isBookmarked(mx, 'bmk_aabbccdd')).toBe(false); + }); +}); diff --git a/src/app/state/bookmarks.test.ts b/src/app/state/bookmarks.test.ts new file mode 100644 index 000000000..1145b9d1e --- /dev/null +++ b/src/app/state/bookmarks.test.ts @@ -0,0 +1,69 @@ +/** + * Unit tests for the Jotai bookmark atoms in src/app/state/bookmarks.ts. + * + * The derived `bookmarkIdSetAtom` is the only atom with non-trivial logic β€” + * it builds an O(1) lookup Set from the bookmark list. The primitive atoms + * (`bookmarkListAtom`, `bookmarkLoadingAtom`) are default Jotai atoms whose + * read/write semantics are provided by the library itself and do not need + * additional testing. + */ +import { describe, it, expect } from 'vitest'; +import { createStore } from 'jotai'; +import { bookmarkIdSetAtom, bookmarkListAtom } from './bookmarks'; +import type { BookmarkItemContent } from '../features/bookmarks/bookmarkDomain'; + +// Helper: minimal valid bookmark item +function makeItem(id: string): BookmarkItemContent { + return { + version: 1, + bookmark_id: id, + uri: `matrix:roomid/foo/e/${id}`, + room_id: '!room:s', + event_id: `$${id}:s`, + event_ts: 1_000_000, + bookmarked_ts: 2_000_000, + }; +} + +describe('bookmarkIdSetAtom (derived)', () => { + it('returns an empty Set when the list is empty', () => { + const store = createStore(); + const set = store.get(bookmarkIdSetAtom); + expect(set.size).toBe(0); + }); + + it('contains the IDs of every item in bookmarkListAtom', () => { + const store = createStore(); + store.set(bookmarkListAtom, [makeItem('bmk_aaaaaaaa'), makeItem('bmk_bbbbbbbb')]); + + const set = store.get(bookmarkIdSetAtom); + expect(set.has('bmk_aaaaaaaa')).toBe(true); + expect(set.has('bmk_bbbbbbbb')).toBe(true); + }); + + it('does not contain IDs not in the list', () => { + const store = createStore(); + store.set(bookmarkListAtom, [makeItem('bmk_aaaaaaaa')]); + + const set = store.get(bookmarkIdSetAtom); + expect(set.has('bmk_ffffffff')).toBe(false); + }); + + it('updates reactively when the list changes', () => { + const store = createStore(); + store.set(bookmarkListAtom, [makeItem('bmk_11111111')]); + + expect(store.get(bookmarkIdSetAtom).has('bmk_11111111')).toBe(true); + + store.set(bookmarkListAtom, []); + expect(store.get(bookmarkIdSetAtom).has('bmk_11111111')).toBe(false); + }); + + it('returns a Set whose size equals the number of unique items', () => { + const store = createStore(); + const items = [makeItem('bmk_aaaaaaaa'), makeItem('bmk_bbbbbbbb'), makeItem('bmk_cccccccc')]; + store.set(bookmarkListAtom, items); + + expect(store.get(bookmarkIdSetAtom).size).toBe(3); + }); +}); From 2a9fa5206c580bbd793ca06a71cee4781da30209 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 12:46:48 -0400 Subject: [PATCH 047/253] chore: add changeset for message-bookmarks --- .changeset/message-bookmarks.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/message-bookmarks.md diff --git a/.changeset/message-bookmarks.md b/.changeset/message-bookmarks.md new file mode 100644 index 000000000..9ca1cf6c3 --- /dev/null +++ b/.changeset/message-bookmarks.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +Add message bookmarks (MSC4438). Users can bookmark messages for easy retrieval via a new Bookmarks section in the home sidebar. Gated by an operator `config.json` experiment flag (`experiments.messageBookmarks`) and a per-user experimental settings toggle. From 68d35f90c4ee61b13ddfdbb0b0fdca8fe22ad9ba Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 19:28:26 +0000 Subject: [PATCH 048/253] chore(codespace): add devcontainer for iPad browser + SSH signing --- .devcontainer/devcontainer.json | 90 +++++++++++++++++++++++++++++++++ .devcontainer/postCreate.sh | 65 ++++++++++++++++++++++++ 2 files changed, 155 insertions(+) create mode 100644 .devcontainer/devcontainer.json create mode 100644 .devcontainer/postCreate.sh diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 000000000..30f6a2a33 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,90 @@ +// Codespace configuration β€” lives on personal/config (not ephemeral dev/feat branches). +// This file intentionally targets browser-based use on iPad. +{ + "name": "Sable", + "image": "mcr.microsoft.com/devcontainers/javascript-node:1-24-bookworm", + + "features": { + // Keep git up-to-date for SSH signing support (git β‰₯ 2.34). + "ghcr.io/devcontainers/features/git:1": {}, + "ghcr.io/devcontainers/features/github-cli:1": {} + }, + + // ── Codespace user secrets ────────────────────────────────────────────────── + // Configure these at: github.com/settings/codespaces > Secrets + // + // GIT_SIGNING_KEY β€” passphrase-free SSH private key (ed25519 recommended). + // Add the matching public key to your GitHub account as a + // "signing key": github.com/settings/keys + // postCreate.sh will wire up git automatically if set. + // + // GIT_USER_NAME β€” e.g. "Evie" + // GIT_USER_EMAIL β€” e.g. "you@example.com" + // ─────────────────────────────────────────────────────────────────────────── + + "remoteEnv": { + // Pin the pnpm store to a known path so the volume mount works across rebuilds. + "PNPM_STORE_DIR": "/home/node/.pnpm-store" + }, + + "customizations": { + "vscode": { + "settings": { + // ── Layout β€” tuned for iPad browser (vscode.dev / Codespaces web) ───── + // Move the activity bar to the top so it isn't hidden by the iOS Safari + // toolbar or the browser's combined title/status bar. + "workbench.activityBar.location": "top", + // Use a menu for the layout control β€” fewer tiny hit targets on touch. + "workbench.layoutControl.type": "menu", + // Place the panel (Terminal, Problems, Copilot Chat history) on the + // right so it doesn't fight with the keyboard on small screens. + "workbench.panel.defaultLocation": "right", + // Keep editor tabs visible and wrap them so none are hidden off-screen. + "workbench.editor.showTabs": "multiple", + "workbench.editor.wrapTabs": true, + // Disable minimap β€” saves horizontal space, improves touch accuracy. + "editor.minimap.enabled": false, + "editor.scrollBeyondLastLine": false, + // Larger default fonts for retina/HiDPI iPad displays. + "editor.fontSize": 14, + "terminal.integrated.fontSize": 14, + + // ── Git signing ─────────────────────────────────────────────────────── + // postCreate.sh configures gpg.format and user.signingkey if + // GIT_SIGNING_KEY secret is present. This just keeps VS Code's git + // UI in sync. + "git.enableCommitSigning": true, + "git.confirmSync": false, + + // ── Copilot Chat ────────────────────────────────────────────────────── + // Always show follow-ups and keep chat history accessible. + "github.copilot.chat.followUps": "always" + }, + "extensions": [ + "GitHub.copilot", + "GitHub.copilot-chat", + "esbenp.prettier-vscode", + "dbaeumer.vscode-eslint", + "vitest.explorer" + ] + } + }, + + // ── Port forwarding ───────────────────────────────────────────────────────── + "forwardPorts": [5173, 4173], + "portsAttributes": { + "5173": { "label": "Vite dev", "onAutoForward": "notify" }, + "4173": { "label": "Vite preview", "onAutoForward": "notify" } + }, + + // ── Persistence ───────────────────────────────────────────────────────────── + // Named volume keeps the pnpm content-addressable store across rebuilds. + // Combined with the PNPM_STORE_DIR env var above so postCreate can also + // point pnpm at the same path. + "mounts": [ + "source=sable-pnpm-store,target=/home/node/.pnpm-store,type=volume" + ], + + "postCreateCommand": "bash .devcontainer/postCreate.sh", + "remoteUser": "node" +} diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh new file mode 100644 index 000000000..f6c539985 --- /dev/null +++ b/.devcontainer/postCreate.sh @@ -0,0 +1,65 @@ +#!/bin/bash +# postCreate.sh β€” runs once after the Codespace container is created. +set -euo pipefail + +# ── pnpm ────────────────────────────────────────────────────────────────────── +# Enable corepack so the exact pnpm version from package.json#packageManager is used. +corepack enable + +# Point pnpm at the persistent named-volume store so packages survive rebuilds. +if [ -n "${PNPM_STORE_DIR:-}" ]; then + pnpm config set store-dir "${PNPM_STORE_DIR}" +fi + +pnpm install + +# ── Git identity ────────────────────────────────────────────────────────────── +# Populate from Codespace user secrets if they aren't already set by dotfiles. +if [ -n "${GIT_USER_NAME:-}" ] && [ -z "$(git config --global user.name 2>/dev/null)" ]; then + git config --global user.name "${GIT_USER_NAME}" +fi + +if [ -n "${GIT_USER_EMAIL:-}" ] && [ -z "$(git config --global user.email 2>/dev/null)" ]; then + git config --global user.email "${GIT_USER_EMAIL}" +fi + +# ── Git SSH commit signing ──────────────────────────────────────────────────── +# Requires a Codespace user secret named GIT_SIGNING_KEY containing a +# passphrase-free SSH private key (ed25519 recommended). +# +# To set up: +# 1. Generate a key: ssh-keygen -t ed25519 -C "codespace signing" -N "" -f ~/.ssh/signing_key +# 2. Copy the private key into a GitHub Codespace secret called GIT_SIGNING_KEY: +# github.com/settings/codespaces > Secrets > New secret +# 3. Add the *public* key to your GitHub account as a signing key (not auth key): +# github.com/settings/keys > New signing key +# ---------------------------------------------------------------------------- +if [ -n "${GIT_SIGNING_KEY:-}" ]; then + SSH_DIR="${HOME}/.ssh" + mkdir -p "${SSH_DIR}" + chmod 700 "${SSH_DIR}" + + KEY_FILE="${SSH_DIR}/git_signing_key" + printf '%s\n' "${GIT_SIGNING_KEY}" > "${KEY_FILE}" + chmod 600 "${KEY_FILE}" + + # Derive the public key from the private key so the user only stores one secret. + ssh-keygen -y -f "${KEY_FILE}" > "${KEY_FILE}.pub" + chmod 644 "${KEY_FILE}.pub" + + # Configure git to use SSH signing. + git config --global gpg.format ssh + git config --global user.signingkey "${KEY_FILE}.pub" + git config --global commit.gpgsign true + git config --global tag.gpgsign true + + # Allow this key when verifying signatures locally. + ALLOWED_SIGNERS="${SSH_DIR}/allowed_signers" + EMAIL="$(git config --global user.email 2>/dev/null || echo "you@example.com")" + echo "${EMAIL} $(cat "${KEY_FILE}.pub")" > "${ALLOWED_SIGNERS}" + git config --global gpg.ssh.allowedSignersFile "${ALLOWED_SIGNERS}" + + echo "βœ“ Git SSH commit signing configured (${KEY_FILE}.pub)" +fi + +echo "βœ“ postCreate complete" From d327e19b21339eb3a3d97b4306acdd68c7c279f3 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 19:43:17 +0000 Subject: [PATCH 049/253] chore(codespace): add Fira Code font + ligatures --- .devcontainer/devcontainer.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 30f6a2a33..5a9c48160 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -47,7 +47,10 @@ "editor.scrollBeyondLastLine": false, // Larger default fonts for retina/HiDPI iPad displays. "editor.fontSize": 14, + "editor.fontFamily": "'Fira Code', 'Cascadia Code', Menlo, monospace", + "editor.fontLigatures": true, "terminal.integrated.fontSize": 14, + "terminal.integrated.fontFamily": "'Fira Code', 'Cascadia Code', Menlo, monospace", // ── Git signing ─────────────────────────────────────────────────────── // postCreate.sh configures gpg.format and user.signingkey if @@ -63,6 +66,7 @@ "extensions": [ "GitHub.copilot", "GitHub.copilot-chat", + "tonsky.font-fira-code", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "vitest.explorer" From 426ef748c1a912bff71d8191398c3b0e76190240 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 19:45:50 +0000 Subject: [PATCH 050/253] chore(codespace): split onCreate/postCreate for prebuild caching --- .devcontainer/devcontainer.json | 1 + .devcontainer/onCreate.sh | 16 ++++++++++++++++ .devcontainer/postCreate.sh | 14 ++------------ 3 files changed, 19 insertions(+), 12 deletions(-) create mode 100644 .devcontainer/onCreate.sh diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 5a9c48160..94864c6fb 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -90,5 +90,6 @@ ], "postCreateCommand": "bash .devcontainer/postCreate.sh", + "onCreateCommand": "bash .devcontainer/onCreate.sh", "remoteUser": "node" } diff --git a/.devcontainer/onCreate.sh b/.devcontainer/onCreate.sh new file mode 100644 index 000000000..dcb012cd0 --- /dev/null +++ b/.devcontainer/onCreate.sh @@ -0,0 +1,16 @@ +#!/bin/bash +# onCreate.sh β€” runs during prebuild AND on first Codespace creation. +# No user secrets are available here β€” keep this purely about dependencies. +set -euo pipefail + +# Enable corepack so the exact pnpm version from package.json#packageManager is used. +corepack enable + +# Point pnpm at the persistent named-volume store so packages survive rebuilds. +if [ -n "${PNPM_STORE_DIR:-}" ]; then + pnpm config set store-dir "${PNPM_STORE_DIR}" +fi + +pnpm install + +echo "βœ“ onCreate complete" diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh index f6c539985..1d76c8e70 100644 --- a/.devcontainer/postCreate.sh +++ b/.devcontainer/postCreate.sh @@ -1,18 +1,8 @@ #!/bin/bash -# postCreate.sh β€” runs once after the Codespace container is created. +# postCreate.sh β€” runs once after the Codespace container is created (NOT during prebuild). +# Secrets (GIT_SIGNING_KEY, GIT_USER_NAME, GIT_USER_EMAIL) are available here. set -euo pipefail -# ── pnpm ────────────────────────────────────────────────────────────────────── -# Enable corepack so the exact pnpm version from package.json#packageManager is used. -corepack enable - -# Point pnpm at the persistent named-volume store so packages survive rebuilds. -if [ -n "${PNPM_STORE_DIR:-}" ]; then - pnpm config set store-dir "${PNPM_STORE_DIR}" -fi - -pnpm install - # ── Git identity ────────────────────────────────────────────────────────────── # Populate from Codespace user secrets if they aren't already set by dotfiles. if [ -n "${GIT_USER_NAME:-}" ] && [ -z "$(git config --global user.name 2>/dev/null)" ]; then From 53930d43731b522122497f9fcfbfe096b46ca217 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 19:58:56 +0000 Subject: [PATCH 051/253] chore(codespace): fix image tag, install OMZ+P10k, wire dotfiles bare-repo --- .devcontainer/devcontainer.json | 13 +++++++++---- .devcontainer/onCreate.sh | 26 ++++++++++++++++++++++++++ .devcontainer/postCreate.sh | 29 +++++++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 4 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 94864c6fb..f5223c3cb 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -2,9 +2,12 @@ // This file intentionally targets browser-based use on iPad. { "name": "Sable", - "image": "mcr.microsoft.com/devcontainers/javascript-node:1-24-bookworm", + // Using base + node feature instead of javascript-node: to avoid + // tag availability issues on newer Node versions. + "image": "mcr.microsoft.com/devcontainers/base:bookworm", "features": { + "ghcr.io/devcontainers/features/node:1": { "version": "24" }, // Keep git up-to-date for SSH signing support (git β‰₯ 2.34). "ghcr.io/devcontainers/features/git:1": {}, "ghcr.io/devcontainers/features/github-cli:1": {} @@ -24,7 +27,7 @@ "remoteEnv": { // Pin the pnpm store to a known path so the volume mount works across rebuilds. - "PNPM_STORE_DIR": "/home/node/.pnpm-store" + "PNPM_STORE_DIR": "/home/vscode/.pnpm-store" }, "customizations": { @@ -51,6 +54,8 @@ "editor.fontLigatures": true, "terminal.integrated.fontSize": 14, "terminal.integrated.fontFamily": "'Fira Code', 'Cascadia Code', Menlo, monospace", + // Use zsh (installed in onCreate) as the default terminal shell. + "terminal.integrated.defaultProfile.linux": "zsh", // ── Git signing ─────────────────────────────────────────────────────── // postCreate.sh configures gpg.format and user.signingkey if @@ -86,10 +91,10 @@ // Combined with the PNPM_STORE_DIR env var above so postCreate can also // point pnpm at the same path. "mounts": [ - "source=sable-pnpm-store,target=/home/node/.pnpm-store,type=volume" + "source=sable-pnpm-store,target=/home/vscode/.pnpm-store,type=volume" ], "postCreateCommand": "bash .devcontainer/postCreate.sh", "onCreateCommand": "bash .devcontainer/onCreate.sh", - "remoteUser": "node" + "remoteUser": "vscode" } diff --git a/.devcontainer/onCreate.sh b/.devcontainer/onCreate.sh index dcb012cd0..bc2d2a967 100644 --- a/.devcontainer/onCreate.sh +++ b/.devcontainer/onCreate.sh @@ -1,8 +1,10 @@ #!/bin/bash # onCreate.sh β€” runs during prebuild AND on first Codespace creation. # No user secrets are available here β€” keep this purely about dependencies. +# Everything here is cached in the prebuild snapshot. set -euo pipefail +# ── pnpm ────────────────────────────────────────────────────────────────────── # Enable corepack so the exact pnpm version from package.json#packageManager is used. corepack enable @@ -13,4 +15,28 @@ fi pnpm install +# ── Zsh + Oh My Zsh + Powerlevel10k ────────────────────────────────────────── +# Install these during prebuild so the first Codespace start is fast. +# The dotfiles checkout in postCreate.sh will provide .zshrc / .p10k.zsh. + +# Install zsh if not already present (base:bookworm ships it, but be safe). +if ! command -v zsh &>/dev/null; then + sudo apt-get update -qq && sudo apt-get install -y -qq zsh +fi + +# Install Oh My Zsh non-interactively (KEEP_ZSHRC=yes preserves any existing .zshrc). +if [ ! -d "${HOME}/.oh-my-zsh" ]; then + KEEP_ZSHRC=yes CHSH=no RUNZSH=no \ + sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" +fi + +# Install Powerlevel10k as an OMZ custom theme. +P10K_DIR="${ZSH_CUSTOM:-${HOME}/.oh-my-zsh/custom}/themes/powerlevel10k" +if [ ! -d "${P10K_DIR}" ]; then + git clone --depth=1 https://github.com/romkatv/powerlevel10k.git "${P10K_DIR}" +fi + +# Make zsh the default shell for this user. +sudo chsh -s "$(command -v zsh)" "$(whoami)" + echo "βœ“ onCreate complete" diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh index 1d76c8e70..8d9a404f7 100644 --- a/.devcontainer/postCreate.sh +++ b/.devcontainer/postCreate.sh @@ -3,6 +3,35 @@ # Secrets (GIT_SIGNING_KEY, GIT_USER_NAME, GIT_USER_EMAIL) are available here. set -euo pipefail +# ── Dotfiles (bare git repo, MacStudio branch) ──────────────────────────────── +# The dotfiles repo uses the "bare repo in $HOME" pattern. +# We clone a specific branch so we get the VS Code / Codespace-aware config +# (e.g. the P10k instant-prompt guard for $TERM_PROGRAM == "vscode"). +DOTFILES_REPO="https://github.com/Just-Insane/dotfiles.git" +DOTFILES_BRANCH="MacStudio" +DOTFILES_DIR="${HOME}/.cfg" + +if [ ! -d "${DOTFILES_DIR}" ]; then + git clone --bare --branch "${DOTFILES_BRANCH}" "${DOTFILES_REPO}" "${DOTFILES_DIR}" + + # Check out dotfiles to $HOME. Use --force to overwrite any stub files + # created by the devcontainer (e.g. a default .bashrc). + git --git-dir="${DOTFILES_DIR}" --work-tree="${HOME}" checkout --force "${DOTFILES_BRANCH}" + + # Don't show untracked files (the whole home dir) in status. + git --git-dir="${DOTFILES_DIR}" --work-tree="${HOME}" \ + config --local status.showUntrackedFiles no + + echo "βœ“ Dotfiles checked out from ${DOTFILES_BRANCH}" +else + # Already exists (e.g. Codespace resumed) β€” just pull latest. + git --git-dir="${DOTFILES_DIR}" --work-tree="${HOME}" \ + fetch origin "${DOTFILES_BRANCH}" && \ + git --git-dir="${DOTFILES_DIR}" --work-tree="${HOME}" \ + checkout --force "${DOTFILES_BRANCH}" + echo "βœ“ Dotfiles updated" +fi + # ── Git identity ────────────────────────────────────────────────────────────── # Populate from Codespace user secrets if they aren't already set by dotfiles. if [ -n "${GIT_USER_NAME:-}" ] && [ -z "$(git config --global user.name 2>/dev/null)" ]; then From d9a10cbe7e003ae0a57318132c675c6b9dc92f8f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 20:12:26 +0000 Subject: [PATCH 052/253] fix(codespace): suppress corepack download prompt, source nvm in onCreate --- .devcontainer/onCreate.sh | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/.devcontainer/onCreate.sh b/.devcontainer/onCreate.sh index bc2d2a967..e06e627d7 100644 --- a/.devcontainer/onCreate.sh +++ b/.devcontainer/onCreate.sh @@ -4,7 +4,19 @@ # Everything here is cached in the prebuild snapshot. set -euo pipefail +# ── Ensure the node feature's PATH additions are active ────────────────────── +# The devcontainers node feature installs via nvm; source it so `node`/`pnpm` +# resolve correctly even in non-login, non-interactive shells. +export NVM_DIR="${NVM_DIR:-/usr/local/share/nvm}" +# shellcheck source=/dev/null +[ -s "${NVM_DIR}/nvm.sh" ] && source "${NVM_DIR}/nvm.sh" --no-use +# Activate the version pinned in .nvmrc / package.json engines. +nvm use 24 2>/dev/null || nvm use node + # ── pnpm ────────────────────────────────────────────────────────────────────── +# Suppress corepack's interactive download-confirmation prompt in CI/prebuild. +export COREPACK_ENABLE_DOWNLOAD_PROMPT=0 + # Enable corepack so the exact pnpm version from package.json#packageManager is used. corepack enable From 6361351e270532784d7ebffc54907ac6b89cea76 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 20:17:55 +0000 Subject: [PATCH 053/253] fix(codespace): chown pnpm store volume before writing --- .devcontainer/onCreate.sh | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.devcontainer/onCreate.sh b/.devcontainer/onCreate.sh index e06e627d7..d9ac8e0c2 100644 --- a/.devcontainer/onCreate.sh +++ b/.devcontainer/onCreate.sh @@ -13,6 +13,12 @@ export NVM_DIR="${NVM_DIR:-/usr/local/share/nvm}" # Activate the version pinned in .nvmrc / package.json engines. nvm use 24 2>/dev/null || nvm use node +# ── Fix named-volume ownership ──────────────────────────────────────────────── +# Docker mounts named volumes as root; fix ownership so the vscode user can write. +if [ -d "${PNPM_STORE_DIR:-}" ]; then + sudo chown -R "$(id -u):$(id -g)" "${PNPM_STORE_DIR}" +fi + # ── pnpm ────────────────────────────────────────────────────────────────────── # Suppress corepack's interactive download-confirmation prompt in CI/prebuild. export COREPACK_ENABLE_DOWNLOAD_PROMPT=0 From 3fcd6c19e0bf8a29ae2e0710ec564046dad545ba Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 21:26:03 +0000 Subject: [PATCH 054/253] chore(devcontainer): add tmux, fix terminal font, add GitHub MCP server --- .devcontainer/devcontainer.json | 2 +- .devcontainer/onCreate.sh | 6 +++--- .vscode/mcp.json | 10 ++++++++++ 3 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 .vscode/mcp.json diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index f5223c3cb..e3fe567e9 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -53,7 +53,7 @@ "editor.fontFamily": "'Fira Code', 'Cascadia Code', Menlo, monospace", "editor.fontLigatures": true, "terminal.integrated.fontSize": 14, - "terminal.integrated.fontFamily": "'Fira Code', 'Cascadia Code', Menlo, monospace", + "terminal.integrated.fontFamily": "'MesloLGS NF', 'Fira Code', Menlo, monospace", // Use zsh (installed in onCreate) as the default terminal shell. "terminal.integrated.defaultProfile.linux": "zsh", diff --git a/.devcontainer/onCreate.sh b/.devcontainer/onCreate.sh index d9ac8e0c2..2f2943fa9 100644 --- a/.devcontainer/onCreate.sh +++ b/.devcontainer/onCreate.sh @@ -37,9 +37,9 @@ pnpm install # Install these during prebuild so the first Codespace start is fast. # The dotfiles checkout in postCreate.sh will provide .zshrc / .p10k.zsh. -# Install zsh if not already present (base:bookworm ships it, but be safe). -if ! command -v zsh &>/dev/null; then - sudo apt-get update -qq && sudo apt-get install -y -qq zsh +# Install zsh and tmux if not already present (base:bookworm ships zsh, but be safe). +if ! command -v zsh &>/dev/null || ! command -v tmux &>/dev/null; then + sudo apt-get update -qq && sudo apt-get install -y -qq zsh tmux fi # Install Oh My Zsh non-interactively (KEEP_ZSHRC=yes preserves any existing .zshrc). diff --git a/.vscode/mcp.json b/.vscode/mcp.json new file mode 100644 index 000000000..b2bc0a4e8 --- /dev/null +++ b/.vscode/mcp.json @@ -0,0 +1,10 @@ +{ + // GitHub MCP server β€” uses existing Copilot auth, no token prompt needed. + // Works in browser-based Codespaces (no vscode:// redirect required). + "servers": { + "github": { + "type": "http", + "url": "https://api.githubcopilot.com/mcp/" + } + } +} From 76e0c49c6b827b0d48d7bc82e18c758a3f89beac Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 22:14:04 +0000 Subject: [PATCH 055/253] fix(devcontainer): use browser-safe font and compatible p10k glyphs for iPad --- .devcontainer/devcontainer.json | 4 +++- .devcontainer/postCreate.sh | 10 ++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index e3fe567e9..4f00813c1 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -53,7 +53,9 @@ "editor.fontFamily": "'Fira Code', 'Cascadia Code', Menlo, monospace", "editor.fontLigatures": true, "terminal.integrated.fontSize": 14, - "terminal.integrated.fontFamily": "'MesloLGS NF', 'Fira Code', Menlo, monospace", + // MesloLGS NF is a local system font β€” unavailable in the browser. + // Fira Code is loaded as a web font via the tonsky.font-fira-code extension. + "terminal.integrated.fontFamily": "'Fira Code', Menlo, monospace", // Use zsh (installed in onCreate) as the default terminal shell. "terminal.integrated.defaultProfile.linux": "zsh", diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh index 8d9a404f7..5df377989 100644 --- a/.devcontainer/postCreate.sh +++ b/.devcontainer/postCreate.sh @@ -32,6 +32,16 @@ else echo "βœ“ Dotfiles updated" fi +# ── Powerlevel10k β€” browser-compatible glyph mode ──────────────────────────── +# MesloLGS NF / Nerd Font glyphs are unavailable in browser-based Codespaces. +# Patch .p10k.zsh to use the 'compatible' Unicode symbol set instead, which +# renders correctly with any modern monospace font (e.g. Fira Code via extension). +if [ -f "${HOME}/.p10k.zsh" ]; then + sed -i "s/POWERLEVEL9K_MODE='nerdfont-v3'/POWERLEVEL9K_MODE='compatible'/" \ + "${HOME}/.p10k.zsh" + echo "βœ“ p10k mode set to compatible" +fi + # ── Git identity ────────────────────────────────────────────────────────────── # Populate from Codespace user secrets if they aren't already set by dotfiles. if [ -n "${GIT_USER_NAME:-}" ] && [ -z "$(git config --global user.name 2>/dev/null)" ]; then From ff1b207ebb3ba3e90c3a5d69d2801c9fc40ec96f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 6 Apr 2026 22:59:15 +0000 Subject: [PATCH 056/253] fix(devcontainer): use Menlo as terminal font for iOS compatibility --- .devcontainer/devcontainer.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 4f00813c1..1390755db 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -54,8 +54,10 @@ "editor.fontLigatures": true, "terminal.integrated.fontSize": 14, // MesloLGS NF is a local system font β€” unavailable in the browser. - // Fira Code is loaded as a web font via the tonsky.font-fira-code extension. - "terminal.integrated.fontFamily": "'Fira Code', Menlo, monospace", + // Fira Code (loaded via the tonsky extension) works for the editor renderer but + // not for the terminal canvas/DOM renderer on iOS β€” it doesn't arrive in time. + // Menlo is a native iOS/macOS system font and is always immediately available. + "terminal.integrated.fontFamily": "Menlo, 'Courier New', monospace", // Use zsh (installed in onCreate) as the default terminal shell. "terminal.integrated.defaultProfile.linux": "zsh", From bccc48f8247d8939681a2ca0077abeff9c25b09a Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 7 Apr 2026 14:18:28 +0000 Subject: [PATCH 057/253] update devcontainer settings --- .devcontainer/devcontainer.json | 14 +++----------- .devcontainer/postCreate.sh | 2 +- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 1390755db..21a144e1a 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // postCreate.sh will wire up git automatically if set. // // GIT_USER_NAME β€” e.g. "Evie" - // GIT_USER_EMAIL β€” e.g. "you@example.com" + // GIT_USER_EMAIL β€” e.g. "evie@gauthier.id" // ─────────────────────────────────────────────────────────────────────────── "remoteEnv": { @@ -50,14 +50,8 @@ "editor.scrollBeyondLastLine": false, // Larger default fonts for retina/HiDPI iPad displays. "editor.fontSize": 14, - "editor.fontFamily": "'Fira Code', 'Cascadia Code', Menlo, monospace", - "editor.fontLigatures": true, "terminal.integrated.fontSize": 14, - // MesloLGS NF is a local system font β€” unavailable in the browser. - // Fira Code (loaded via the tonsky extension) works for the editor renderer but - // not for the terminal canvas/DOM renderer on iOS β€” it doesn't arrive in time. - // Menlo is a native iOS/macOS system font and is always immediately available. - "terminal.integrated.fontFamily": "Menlo, 'Courier New', monospace", + // Use zsh (installed in onCreate) as the default terminal shell. "terminal.integrated.defaultProfile.linux": "zsh", @@ -94,9 +88,7 @@ // Named volume keeps the pnpm content-addressable store across rebuilds. // Combined with the PNPM_STORE_DIR env var above so postCreate can also // point pnpm at the same path. - "mounts": [ - "source=sable-pnpm-store,target=/home/vscode/.pnpm-store,type=volume" - ], + "mounts": ["source=sable-pnpm-store,target=/home/vscode/.pnpm-store,type=volume"], "postCreateCommand": "bash .devcontainer/postCreate.sh", "onCreateCommand": "bash .devcontainer/onCreate.sh", diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh index 5df377989..2e88c4e41 100644 --- a/.devcontainer/postCreate.sh +++ b/.devcontainer/postCreate.sh @@ -84,7 +84,7 @@ if [ -n "${GIT_SIGNING_KEY:-}" ]; then # Allow this key when verifying signatures locally. ALLOWED_SIGNERS="${SSH_DIR}/allowed_signers" - EMAIL="$(git config --global user.email 2>/dev/null || echo "you@example.com")" + EMAIL="$(git config --global user.email 2>/dev/null || echo "evie@gauthier.id")" echo "${EMAIL} $(cat "${KEY_FILE}.pub")" > "${ALLOWED_SIGNERS}" git config --global gpg.ssh.allowedSignersFile "${ALLOWED_SIGNERS}" From 2964e8952dd129a8348d30182d92ff0e00ca1899 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 7 Apr 2026 14:48:36 +0000 Subject: [PATCH 058/253] fix(devcontainer): restore missing fontFamily settings --- .devcontainer/devcontainer.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 21a144e1a..e8adea620 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -49,8 +49,13 @@ "editor.minimap.enabled": false, "editor.scrollBeyondLastLine": false, // Larger default fonts for retina/HiDPI iPad displays. + // Fira Code is loaded as a web font by the tonsky.font-fira-code extension, + // making it available in the browser terminal (Safari on iPad included). "editor.fontSize": 14, + "editor.fontFamily": "'Fira Code', Menlo, monospace", + "editor.fontLigatures": true, "terminal.integrated.fontSize": 14, + "terminal.integrated.fontFamily": "'Fira Code', Menlo, monospace", // Use zsh (installed in onCreate) as the default terminal shell. "terminal.integrated.defaultProfile.linux": "zsh", From b3304bb9207ff4814cf1268e8280f9f6715ffaca Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 7 Apr 2026 14:50:09 +0000 Subject: [PATCH 059/253] Update fontfamily --- .devcontainer/devcontainer.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index e8adea620..eb77e0164 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -52,10 +52,11 @@ // Fira Code is loaded as a web font by the tonsky.font-fira-code extension, // making it available in the browser terminal (Safari on iPad included). "editor.fontSize": 14, - "editor.fontFamily": "'Fira Code', Menlo, monospace", + "editor.fontFamily": "'MesloLGS NF', 'Fira Code', Meslo, Monaco, 'Courier New', monospace", "editor.fontLigatures": true, "terminal.integrated.fontSize": 14, - "terminal.integrated.fontFamily": "'Fira Code', Menlo, monospace", + "terminal.integrated.fontFamily": "'MesloLGS NF', 'Fira Code', Meslo, Monaco, 'Courier New', monospace", + "terminal.integrated.fontLigatures.enabled": true, // Use zsh (installed in onCreate) as the default terminal shell. "terminal.integrated.defaultProfile.linux": "zsh", From 06c981039385db6a0b546f223f0e8603b4d8e562 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 7 Apr 2026 14:55:58 +0000 Subject: [PATCH 060/253] chore(devcontainer): sync extensions list with installed extensions --- .devcontainer/devcontainer.json | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index eb77e0164..d1e4039f2 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -73,12 +73,37 @@ "github.copilot.chat.followUps": "always" }, "extensions": [ + // ── Copilot ─────────────────────────────────────────────────────────── "GitHub.copilot", "GitHub.copilot-chat", + "GitHub.vscode-pull-request-github", + // ── Font (web font β€” required for terminal in browser/iPad) ─────────── "tonsky.font-fira-code", + // ── Theme ───────────────────────────────────────────────────────────── + "GitHub.github-vscode-theme", + // ── Formatting & linting ────────────────────────────────────────────── "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", - "vitest.explorer" + "streetsidesoftware.code-spell-checker", + "davidanson.vscode-markdownlint", + // ── Testing ─────────────────────────────────────────────────────────── + "vitest.explorer", + // ── TypeScript / React ──────────────────────────────────────────────── + "bradlc.vscode-tailwindcss", + "styled-components.vscode-styled-components", + "dsznajder.es7-react-js-snippets", + "formulahendry.auto-rename-tag", + "wix.vscode-import-cost", + // ── Utilities ───────────────────────────────────────────────────────── + "christian-kohler.path-intellisense", + "usernamehw.errorlens", + "gruntfuggly.todo-tree", + "wayou.vscode-todo-highlight", + "webpro.vscode-knip", + "lokalise.i18n-ally", + // ── Infrastructure ──────────────────────────────────────────────────── + "hashicorp.terraform", + "zamerick.vscode-caddyfile-syntax" ] } }, From ac899aa45b43723582b23e1d61c4f06ec24ca355 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 7 Apr 2026 15:39:38 +0000 Subject: [PATCH 061/253] Update container config --- .devcontainer/devcontainer.json | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index d1e4039f2..da8fcc009 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -49,14 +49,19 @@ "editor.minimap.enabled": false, "editor.scrollBeyondLastLine": false, // Larger default fonts for retina/HiDPI iPad displays. - // Fira Code is loaded as a web font by the tonsky.font-fira-code extension, - // making it available in the browser terminal (Safari on iPad included). + // Fira Code is loaded as a web font by the tonsky.font-fira-code extension. + // This works for the Monaco *editor* (HTML/CSS rendered), but xterm.js uses + // canvas drawing β€” it does NOT reliably inherit CSS @font-face on iOS Safari. + // MesloLGS NF / Monaco / Meslo are not iOS system fonts either. + // β†’ Editor: Fira Code via extension is fine. + // β†’ Terminal: use Menlo only (ships with iOS since iOS 7, always available). "editor.fontSize": 14, - "editor.fontFamily": "'MesloLGS NF', 'Fira Code', Meslo, Monaco, 'Courier New', monospace", + "editor.fontFamily": "'MesloLGS NF', 'Fira Code', Menlo, 'Courier New', monospace", "editor.fontLigatures": true, "terminal.integrated.fontSize": 14, - "terminal.integrated.fontFamily": "'MesloLGS NF', 'Fira Code', Meslo, Monaco, 'Courier New', monospace", - "terminal.integrated.fontLigatures.enabled": true, + "terminal.integrated.fontFamily": "Menlo, 'Courier New', monospace", + "terminal.integrated.fontLigatures.enabled": false, + "terminal.integrated.gpuAcceleration": "off", // Use zsh (installed in onCreate) as the default terminal shell. "terminal.integrated.defaultProfile.linux": "zsh", From dcb56f69c70a424df604cb702e8afa5e7d001197 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 7 Apr 2026 16:38:55 +0000 Subject: [PATCH 062/253] fix(devcontainer): load signing key into ssh-agent in postCreate --- .devcontainer/postCreate.sh | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh index 2e88c4e41..52e37fb11 100644 --- a/.devcontainer/postCreate.sh +++ b/.devcontainer/postCreate.sh @@ -88,6 +88,10 @@ if [ -n "${GIT_SIGNING_KEY:-}" ]; then echo "${EMAIL} $(cat "${KEY_FILE}.pub")" > "${ALLOWED_SIGNERS}" git config --global gpg.ssh.allowedSignersFile "${ALLOWED_SIGNERS}" + # Load the key into the ssh-agent so it's available for signing and SSH auth. + eval "$(ssh-agent -s)" &>/dev/null || true + ssh-add "${KEY_FILE}" + echo "βœ“ Git SSH commit signing configured (${KEY_FILE}.pub)" fi From e848f3a686c78421d4ca678b013fad314734f4fb Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 7 Apr 2026 16:39:54 +0000 Subject: [PATCH 063/253] feat(devcontainer): add SSH_AUTH_KEY secret support for server access --- .devcontainer/devcontainer.json | 4 ++++ .devcontainer/postCreate.sh | 28 ++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index da8fcc009..c7376421c 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -21,6 +21,10 @@ // "signing key": github.com/settings/keys // postCreate.sh will wire up git automatically if set. // + // SSH_AUTH_KEY β€” passphrase-free SSH private key (ed25519 recommended). + // Add the matching public key to ~/.ssh/authorized_keys on + // any server you want to SSH into from the Codespace. + // // GIT_USER_NAME β€” e.g. "Evie" // GIT_USER_EMAIL β€” e.g. "evie@gauthier.id" // ─────────────────────────────────────────────────────────────────────────── diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh index 52e37fb11..08be0b1ee 100644 --- a/.devcontainer/postCreate.sh +++ b/.devcontainer/postCreate.sh @@ -95,4 +95,32 @@ if [ -n "${GIT_SIGNING_KEY:-}" ]; then echo "βœ“ Git SSH commit signing configured (${KEY_FILE}.pub)" fi +# ── SSH auth key ────────────────────────────────────────────────────────────── +# Requires a Codespace user secret named SSH_AUTH_KEY containing a +# passphrase-free SSH private key (ed25519 recommended). +# +# To set up: +# 1. Generate a key: ssh-keygen -t ed25519 -C "codespace auth" -N "" -f ~/.ssh/id_ed25519 +# 2. Copy the private key into a GitHub Codespace secret called SSH_AUTH_KEY: +# github.com/settings/codespaces > Secrets > New secret +# 3. Add the *public* key to ~/.ssh/authorized_keys on your server. +# ---------------------------------------------------------------------------- +if [ -n "${SSH_AUTH_KEY:-}" ]; then + SSH_DIR="${HOME}/.ssh" + mkdir -p "${SSH_DIR}" + chmod 700 "${SSH_DIR}" + + AUTH_KEY_FILE="${SSH_DIR}/id_ed25519" + printf '%s\n' "${SSH_AUTH_KEY}" > "${AUTH_KEY_FILE}" + chmod 600 "${AUTH_KEY_FILE}" + + ssh-keygen -y -f "${AUTH_KEY_FILE}" > "${AUTH_KEY_FILE}.pub" + chmod 644 "${AUTH_KEY_FILE}.pub" + + eval "$(ssh-agent -s)" &>/dev/null || true + ssh-add "${AUTH_KEY_FILE}" + + echo "βœ“ SSH auth key loaded (${AUTH_KEY_FILE}.pub)" +fi + echo "βœ“ postCreate complete" From a294d1699bf78fde178b5d7a2ecbff4b077dfcc4 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 7 Apr 2026 17:00:56 +0000 Subject: [PATCH 064/253] fix(devcontainer): disable extension MCP auto-discovery, fix p10k sed pattern --- .devcontainer/devcontainer.json | 7 ++++++- .devcontainer/postCreate.sh | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index c7376421c..66fddc62d 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -79,7 +79,12 @@ // ── Copilot Chat ────────────────────────────────────────────────────── // Always show follow-ups and keep chat history accessible. - "github.copilot.chat.followUps": "always" + "github.copilot.chat.followUps": "always", + // Disable auto-discovery of extension-provided MCP servers (e.g. the + // io.github.github/github-mcp-server registered by vscode-pull-request-github). + // Our explicit HTTP server in .vscode/mcp.json is unaffected and handles all + // GitHub MCP calls without requiring a token prompt. + "chat.mcp.discovery.enabled": false }, "extensions": [ // ── Copilot ─────────────────────────────────────────────────────────── diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh index 08be0b1ee..053c91c23 100644 --- a/.devcontainer/postCreate.sh +++ b/.devcontainer/postCreate.sh @@ -36,10 +36,13 @@ fi # MesloLGS NF / Nerd Font glyphs are unavailable in browser-based Codespaces. # Patch .p10k.zsh to use the 'compatible' Unicode symbol set instead, which # renders correctly with any modern monospace font (e.g. Fira Code via extension). +# The POWERLEVEL9K_MODE line has no quotes: POWERLEVEL9K_MODE=nerdfont-complete if [ -f "${HOME}/.p10k.zsh" ]; then - sed -i "s/POWERLEVEL9K_MODE='nerdfont-v3'/POWERLEVEL9K_MODE='compatible'/" \ + sed -i "s/POWERLEVEL9K_MODE=.*/POWERLEVEL9K_MODE=compatible/" \ "${HOME}/.p10k.zsh" echo "βœ“ p10k mode set to compatible" +else + echo "⚠ ~/.p10k.zsh not found β€” skipping p10k patch (add it to your dotfiles repo)" fi # ── Git identity ────────────────────────────────────────────────────────────── From 2eeaa436f6e7a2d92c978e507f5ba6efa87183cb Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 7 Apr 2026 18:27:51 +0000 Subject: [PATCH 065/253] fix(devcontainer): enable shell integration for Copilot Chat terminal --- .devcontainer/devcontainer.json | 11 +++++++++++ .devcontainer/postCreate.sh | 24 ++++++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 66fddc62d..f97cbc6fc 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -68,7 +68,18 @@ "terminal.integrated.gpuAcceleration": "off", // Use zsh (installed in onCreate) as the default terminal shell. + // Explicit profile with -l (login shell) ensures nvm / PATH additions + // from the devcontainer node feature are loaded inside the terminal. "terminal.integrated.defaultProfile.linux": "zsh", + "terminal.integrated.profiles.linux": { + "zsh": { "path": "/bin/zsh", "args": ["-l"] } + }, + + // Shell integration MUST be enabled for Copilot Chat to run terminal + // commands. We set it explicitly because Powerlevel10k instant prompt + // can fire before VS Code injects its integration script and suppress + // the markers β€” postCreate.sh patches .zshrc to guard against this. + "terminal.integrated.shellIntegration.enabled": true, // ── Git signing ─────────────────────────────────────────────────────── // postCreate.sh configures gpg.format and user.signingkey if diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh index 053c91c23..be95325ec 100644 --- a/.devcontainer/postCreate.sh +++ b/.devcontainer/postCreate.sh @@ -45,6 +45,30 @@ else echo "⚠ ~/.p10k.zsh not found β€” skipping p10k patch (add it to your dotfiles repo)" fi +# ── Powerlevel10k β€” disable instant prompt in VS Code terminal ──────────────── +# Instant prompt outputs to the terminal before VS Code injects its shell +# integration script. This breaks the integration markers that Copilot Chat +# relies on to run commands. We prepend a one-liner to .zshrc that sets +# POWERLEVEL9K_INSTANT_PROMPT=off whenever $TERM_PROGRAM is "vscode". +# The check is idempotent β€” safe to run on Codespace resume. +if [ -f "${HOME}/.zshrc" ]; then + if ! grep -q 'POWERLEVEL9K_INSTANT_PROMPT=off' "${HOME}/.zshrc"; then + tmp=$(mktemp) + { + printf '# Disable P10k instant prompt in VS Code β€” it fires before shell\n' + printf '# integration is injected, which breaks Copilot Chat terminal access.\n' + printf '[[ "$TERM_PROGRAM" == "vscode" ]] && typeset -g POWERLEVEL9K_INSTANT_PROMPT=off\n\n' + cat "${HOME}/.zshrc" + } > "$tmp" + mv "$tmp" "${HOME}/.zshrc" + echo "βœ“ P10k instant prompt disabled for VS Code terminal" + else + echo "βœ“ P10k instant prompt VS Code guard already present" + fi +else + echo "⚠ ~/.zshrc not found β€” skipping instant-prompt patch (dotfiles not checked out?)" +fi + # ── Git identity ────────────────────────────────────────────────────────────── # Populate from Codespace user secrets if they aren't already set by dotfiles. if [ -n "${GIT_USER_NAME:-}" ] && [ -z "$(git config --global user.name 2>/dev/null)" ]; then From a4751d4b5dfbe1eaa6e32e8fb07ac0f38e4f2a82 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 8 Apr 2026 18:24:20 +0000 Subject: [PATCH 066/253] chore(devcontainer): switch dotfiles branch to codespaces MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Linux/Codespaces-clean branch β€” removes macOS NVM lazy-loader, Homebrew paths, macOS-only OMZ plugins, and hardcoded macOS gitconfig paths. --- .devcontainer/postCreate.sh | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh index be95325ec..58dec301c 100644 --- a/.devcontainer/postCreate.sh +++ b/.devcontainer/postCreate.sh @@ -8,7 +8,7 @@ set -euo pipefail # We clone a specific branch so we get the VS Code / Codespace-aware config # (e.g. the P10k instant-prompt guard for $TERM_PROGRAM == "vscode"). DOTFILES_REPO="https://github.com/Just-Insane/dotfiles.git" -DOTFILES_BRANCH="MacStudio" +DOTFILES_BRANCH="codespaces" DOTFILES_DIR="${HOME}/.cfg" if [ ! -d "${DOTFILES_DIR}" ]; then @@ -45,25 +45,29 @@ else echo "⚠ ~/.p10k.zsh not found β€” skipping p10k patch (add it to your dotfiles repo)" fi -# ── Powerlevel10k β€” disable instant prompt in VS Code terminal ──────────────── +# ── Powerlevel10k β€” disable instant prompt in Codespace terminal ────────────── # Instant prompt outputs to the terminal before VS Code injects its shell # integration script. This breaks the integration markers that Copilot Chat -# relies on to run commands. We prepend a one-liner to .zshrc that sets -# POWERLEVEL9K_INSTANT_PROMPT=off whenever $TERM_PROGRAM is "vscode". +# relies on to run commands. +# We unconditionally disable it here because: +# - In a Codespace, VS Code shell integration is always needed for Copilot Chat. +# - $TERM_PROGRAM is NOT reliably set to "vscode" in browser-based Codespaces +# (e.g. iPad / vscode.dev), so a conditional guard can silently fail. # The check is idempotent β€” safe to run on Codespace resume. if [ -f "${HOME}/.zshrc" ]; then if ! grep -q 'POWERLEVEL9K_INSTANT_PROMPT=off' "${HOME}/.zshrc"; then tmp=$(mktemp) { - printf '# Disable P10k instant prompt in VS Code β€” it fires before shell\n' - printf '# integration is injected, which breaks Copilot Chat terminal access.\n' - printf '[[ "$TERM_PROGRAM" == "vscode" ]] && typeset -g POWERLEVEL9K_INSTANT_PROMPT=off\n\n' + printf '# Disable P10k instant prompt β€” it fires before VS Code shell\n' + printf '# integration is injected, breaking Copilot Chat terminal access.\n' + printf '# Unconditional: $TERM_PROGRAM is not reliable in browser Codespaces.\n' + printf 'typeset -g POWERLEVEL9K_INSTANT_PROMPT=off\n\n' cat "${HOME}/.zshrc" } > "$tmp" mv "$tmp" "${HOME}/.zshrc" - echo "βœ“ P10k instant prompt disabled for VS Code terminal" + echo "βœ“ P10k instant prompt unconditionally disabled" else - echo "βœ“ P10k instant prompt VS Code guard already present" + echo "βœ“ P10k instant prompt already disabled" fi else echo "⚠ ~/.zshrc not found β€” skipping instant-prompt patch (dotfiles not checked out?)" From 1ad6b038c56bfedff0381fe78974ebf160a62f47 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 8 Apr 2026 16:42:01 -0400 Subject: [PATCH 067/253] fix(bookmarks): add missing focusId to MSC4438 settings SettingTile --- .../features/settings/experimental/MSC4438MessageBookmarks.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx b/src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx index 45e429b18..0751a5578 100644 --- a/src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx +++ b/src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx @@ -16,6 +16,7 @@ export function MSC4438MessageBookmarks() { Message Bookmarks From 12888d9abe208f15848dccf8a58ad4ad178b67a1 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 8 Apr 2026 17:51:06 -0400 Subject: [PATCH 068/253] fix(devtools): add focusId to ExperimentsPanel SettingTile --- src/app/features/settings/developer-tools/ExperimentsPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/features/settings/developer-tools/ExperimentsPanel.tsx b/src/app/features/settings/developer-tools/ExperimentsPanel.tsx index 4c4689c03..0308d6932 100644 --- a/src/app/features/settings/developer-tools/ExperimentsPanel.tsx +++ b/src/app/features/settings/developer-tools/ExperimentsPanel.tsx @@ -41,7 +41,7 @@ export function ExperimentsPanel() { gap="400" > {experiments.map(({ key, config: experimentConfig, selection }) => ( - + From ac4e5b44199391c331b0eb30457613c1e42ecdaa Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 09:21:39 -0400 Subject: [PATCH 069/253] fix(presence): skip REST presence fetch when userId is empty string --- src/app/hooks/useUserPresence.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index a3b86ef08..52bb99467 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -36,7 +36,9 @@ export const useUserPresence = (userId: string): UserPresence | undefined => { // Sliding sync (Synapse MSC4186) has no presence extension β€” m.presence events are never // delivered via sync. As a result, User.presence stays at the SDK default and // getLastActiveTs() stays 0. Fall back to a direct REST fetch to bootstrap presence state. - if (!user || user.getLastActiveTs() === 0) { + // Guard against empty userId β€” callers that render a fixed number of hooks (e.g. group DM + // slots) pass '' for absent members; firing getPresence('') would be a malformed request. + if (userId && (!user || user.getLastActiveTs() === 0)) { mx.getPresence(userId) .then((resp) => { if (cancelled) return; From 755588b737a3fb8fef3694e35f2d445637bb9a58 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 09:23:25 -0400 Subject: [PATCH 070/253] fix(bookmarks): soft-delete item before updating index in removeBookmark --- src/app/features/bookmarks/bookmarkRepository.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/features/bookmarks/bookmarkRepository.ts b/src/app/features/bookmarks/bookmarkRepository.ts index d6703777f..e6d712dbd 100644 --- a/src/app/features/bookmarks/bookmarkRepository.ts +++ b/src/app/features/bookmarks/bookmarkRepository.ts @@ -77,17 +77,19 @@ export async function addBookmark(mx: MatrixClient, item: BookmarkItemContent): * removed. */ export async function removeBookmark(mx: MatrixClient, bookmarkId: string): Promise { + // Soft-delete the item FIRST β€” mirrors the item-before-index ordering of addBookmark. + // If writeIndex ran first, orphan recovery in listBookmarks() would transiently resurface the + // bookmark (item not yet deleted, but ID also not in index) between the two writes. + const existing = readItem(mx, bookmarkId); + if (existing) { + await writeItem(mx, { ...existing, deleted: true }); + } + const index = readIndex(mx); index.bookmark_ids = index.bookmark_ids.filter((id) => id !== bookmarkId); index.revision += 1; index.updated_ts = Date.now(); await writeIndex(mx, index); - - // Soft-delete the item event - const existing = readItem(mx, bookmarkId); - if (existing) { - await writeItem(mx, { ...existing, deleted: true }); - } } /** From 49a98b3df3d35a3f9b5c9730a20fe3038f353800 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 10:53:51 -0400 Subject: [PATCH 071/253] feat(polls): expose max_selections in poll creator dialog Allow poll creators to choose how many options voters may select (1 to the number of options). Defaults to 1 (single-choice). The value is clamped to [1, validAnswers.length] on submit per MSC3381. The voting UI already handles multi-selection correctly in PollEvent." --- .../features/room/poll/PollCreatorDialog.tsx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/poll/PollCreatorDialog.tsx b/src/app/features/room/poll/PollCreatorDialog.tsx index e9a1b8ba8..f364f143f 100644 --- a/src/app/features/room/poll/PollCreatorDialog.tsx +++ b/src/app/features/room/poll/PollCreatorDialog.tsx @@ -53,7 +53,9 @@ type PollCreatorDialogProps = { export function PollCreatorDialog({ onCancel, onSubmit }: PollCreatorDialogProps) { const questionId = useId(); + const maxSelectionsId = useId(); const [question, setQuestion] = useState(''); + const [maxSelections, setMaxSelections] = useState(1); const [answers, setAnswers] = useState<{ id: string; text: string }[]>(() => [ { id: crypto.randomUUID(), text: '' }, { id: crypto.randomUUID(), text: '' }, @@ -122,6 +124,7 @@ export function PollCreatorDialog({ onCancel, onSubmit }: PollCreatorDialogProps setError(`Please add at least ${MIN_ANSWERS} answers.`); return; } + const clampedMaxSelections = Math.min(Math.max(1, maxSelections), validAnswers.length); if (expiryPreset === 'custom') { const ts = customExpiry ? new Date(customExpiry).getTime() : NaN; if (!Number.isFinite(ts) || ts <= Date.now()) { @@ -134,7 +137,7 @@ export function PollCreatorDialog({ onCancel, onSubmit }: PollCreatorDialogProps question: trimmedQuestion, answers: validAnswers, kind, - maxSelections: 1, + maxSelections: clampedMaxSelections, showVoterNames, closesAt: computeClosesAt(), }); @@ -239,6 +242,25 @@ export function PollCreatorDialog({ onCancel, onSubmit }: PollCreatorDialogProps )} + {/* Max selections */} + + + Max selections + + { + const val = parseInt((e.target as HTMLInputElement).value, 10); + if (!Number.isNaN(val) && val >= 1) setMaxSelections(val); + }} + style={{ width: '5rem' }} + /> + + {/* Poll kind */} From 6a27271c025a62226e6526fdd7a251ded9933df3 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 12:40:43 -0400 Subject: [PATCH 072/253] test(polls): unit-test pure functions; export extractPollData/computeTally/formatExpiry/extractVoteSelections --- src/app/features/room/poll/PollEvent.tsx | 8 +- src/app/features/room/poll/pollEvent.test.ts | 408 +++++++++++++++++++ 2 files changed, 412 insertions(+), 4 deletions(-) create mode 100644 src/app/features/room/poll/pollEvent.test.ts diff --git a/src/app/features/room/poll/PollEvent.tsx b/src/app/features/room/poll/PollEvent.tsx index 0ebfe58b1..1565c1c30 100644 --- a/src/app/features/room/poll/PollEvent.tsx +++ b/src/app/features/room/poll/PollEvent.tsx @@ -37,7 +37,7 @@ import * as css from './PollEvent.css'; type PollAnswer = { id: string; text: string }; -function extractPollData(mEvent: MatrixEvent): { +export function extractPollData(mEvent: MatrixEvent): { question: string; answers: PollAnswer[]; maxSelections: number; @@ -81,7 +81,7 @@ function extractPollData(mEvent: MatrixEvent): { return { question: questionText, answers, maxSelections, isDisclosed, showVoterNames, closesAt }; } -function extractVoteSelections(responseEvent: MatrixEvent): string[] { +export function extractVoteSelections(responseEvent: MatrixEvent): string[] { const content = responseEvent.getContent(); const unstablePayload = content['org.matrix.msc3381.poll.response']; const selections: unknown = @@ -99,7 +99,7 @@ type TallyResult = { isEnded: boolean; }; -function computeTally( +export function computeTally( room: Room, pollEventId: string, pollStartEvent: MatrixEvent, @@ -161,7 +161,7 @@ function computeTally( return { tally, myVote, isEnded }; } -function formatExpiry(ts: number): string { +export function formatExpiry(ts: number): string { const diff = ts - Date.now(); if (diff <= 0) return 'now'; const hours = diff / 3_600_000; diff --git a/src/app/features/room/poll/pollEvent.test.ts b/src/app/features/room/poll/pollEvent.test.ts new file mode 100644 index 000000000..b431d7b3e --- /dev/null +++ b/src/app/features/room/poll/pollEvent.test.ts @@ -0,0 +1,408 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; +import type { Room, MatrixEvent } from '$types/matrix-sdk'; +import { + extractPollData, + extractVoteSelections, + computeTally, + formatExpiry, +} from './PollEvent'; + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +const POLL_CREATOR = '@creator:test'; +const MY_USER_ID = '@me:test'; + +/** + * Build a fake MatrixEvent that looks like an `m.poll.start` event. + */ +function makePollStartEvent( + id: string, + opts: { + question?: string; + answers?: { id: string; text: string }[]; + maxSelections?: number; + kind?: string; + closesAt?: number; + showVoterNames?: boolean; + /** Use unstable (org.matrix) keys if true (default false β†’ stable m.poll.start) */ + unstable?: boolean; + } = {} +): MatrixEvent { + const { + question = 'Favourite colour?', + answers = [ + { id: 'ans-red', text: 'Red' }, + { id: 'ans-blue', text: 'Blue' }, + ], + maxSelections = 1, + kind = 'm.poll.disclosed', + closesAt, + showVoterNames = true, + unstable = false, + } = opts; + + const rawAnswers = answers.map((a) => ({ + 'm.id': a.id, + 'm.text': [{ body: a.text }], + })); + const pollStartKey = unstable ? 'org.matrix.msc3381.poll.start' : 'm.poll.start'; + + const content: Record = { + [pollStartKey]: { + question: { 'm.text': [{ body: question }] }, + answers: rawAnswers, + max_selections: maxSelections, + kind, + show_voter_names: showVoterNames, + ...(closesAt != null ? { closes_at: closesAt } : {}), + }, + }; + + return { + getId: () => id, + getSender: () => POLL_CREATOR, + getType: () => (unstable ? 'org.matrix.msc3381.poll.start' : 'm.poll.start'), + getContent: () => content, + getTs: () => 1_000, + } as unknown as MatrixEvent; +} + +/** + * Build a fake poll-response MatrixEvent. + */ +function makeResponseEvent( + sender: string, + selections: string[], + ts: number, + isDecryptionFailure = false +): MatrixEvent { + return { + getId: () => `${sender}-${ts}`, + getSender: () => sender, + getType: () => 'm.poll.response', + getTs: () => ts, + getContent: () => ({ 'm.selections': selections }), + isDecryptionFailure: () => isDecryptionFailure, + } as unknown as MatrixEvent; +} + +/** + * Build a fake poll-end MatrixEvent. + */ +function makeEndEvent(sender: string, ts: number): MatrixEvent { + return { + getId: () => `end-${ts}`, + getSender: () => sender, + getType: () => 'm.poll.end', + getTs: () => ts, + getContent: () => ({}), + isDecryptionFailure: () => false, + } as unknown as MatrixEvent; +} + +/** + * Build a minimal fake Room whose `relations.getAllChildEventsForEvent` returns + * the provided child events. + */ +function makeRoom( + childEvents: MatrixEvent[], + maySendRedaction = false +): Room { + return { + getUnfilteredTimelineSet: () => ({ + relations: { + getAllChildEventsForEvent: (_id: string) => childEvents, + }, + }), + currentState: { + maySendRedactionForEvent: (_event: MatrixEvent, _sender: string) => maySendRedaction, + }, + } as unknown as Room; +} + +// --------------------------------------------------------------------------- +// extractPollData +// --------------------------------------------------------------------------- + +describe('extractPollData', () => { + it('parses a stable (m.poll.start) event', () => { + const ev = makePollStartEvent('$poll:test'); + const data = extractPollData(ev); + expect(data).not.toBeNull(); + expect(data?.question).toBe('Favourite colour?'); + expect(data?.answers).toHaveLength(2); + expect(data?.answers[0]).toEqual({ id: 'ans-red', text: 'Red' }); + expect(data?.maxSelections).toBe(1); + expect(data?.isDisclosed).toBe(true); + expect(data?.showVoterNames).toBe(true); + expect(data?.closesAt).toBeUndefined(); + }); + + it('parses an unstable (org.matrix.msc3381) event', () => { + const ev = makePollStartEvent('$poll:test', { unstable: true }); + const data = extractPollData(ev); + expect(data?.question).toBe('Favourite colour?'); + expect(data?.isDisclosed).toBe(true); + }); + + it('returns null when there is no poll payload', () => { + const ev = { + getContent: () => ({}), + } as unknown as MatrixEvent; + expect(extractPollData(ev)).toBeNull(); + }); + + it('caps answers to 20 even if more are provided', () => { + const tooManyAnswers = Array.from({ length: 25 }, (_, i) => ({ + id: `a${i}`, + text: `Answer ${i}`, + })); + const ev = makePollStartEvent('$poll:test', { answers: tooManyAnswers }); + const data = extractPollData(ev); + expect(data?.answers).toHaveLength(20); + }); + + it('defaults maxSelections to 1 when not a positive integer', () => { + const ev = makePollStartEvent('$poll:test', { maxSelections: 0 }); + expect(extractPollData(ev)?.maxSelections).toBe(1); + }); + + it('parses closesAt when present', () => { + const future = Date.now() + 3_600_000; + const ev = makePollStartEvent('$poll:test', { closesAt: future }); + expect(extractPollData(ev)?.closesAt).toBe(future); + }); + + it('treats m.poll.disclosed kind as isDisclosed=true', () => { + const ev = makePollStartEvent('$poll:test', { kind: 'm.poll.disclosed' }); + expect(extractPollData(ev)?.isDisclosed).toBe(true); + }); + + it('treats m.poll.undisclosed kind as isDisclosed=false', () => { + const ev = makePollStartEvent('$poll:test', { kind: 'm.poll.undisclosed' }); + expect(extractPollData(ev)?.isDisclosed).toBe(false); + }); +}); + +// --------------------------------------------------------------------------- +// extractVoteSelections +// --------------------------------------------------------------------------- + +describe('extractVoteSelections', () => { + it('returns stable m.selections array', () => { + const ev = { + getContent: () => ({ 'm.selections': ['ans-red'] }), + } as unknown as MatrixEvent; + expect(extractVoteSelections(ev)).toEqual(['ans-red']); + }); + + it('falls back to unstable org.matrix.msc3381.poll.response.answers', () => { + const ev = { + getContent: () => ({ + 'org.matrix.msc3381.poll.response': { answers: ['ans-blue'] }, + }), + } as unknown as MatrixEvent; + expect(extractVoteSelections(ev)).toEqual(['ans-blue']); + }); + + it('returns [] when the content has no selections field', () => { + const ev = { getContent: () => ({}) } as unknown as MatrixEvent; + expect(extractVoteSelections(ev)).toEqual([]); + }); + + it('filters out non-string values from selections array', () => { + const ev = { + getContent: () => ({ 'm.selections': ['valid', 42, null, 'also-valid'] }), + } as unknown as MatrixEvent; + expect(extractVoteSelections(ev)).toEqual(['valid', 'also-valid']); + }); +}); + +// --------------------------------------------------------------------------- +// computeTally +// --------------------------------------------------------------------------- + +describe('computeTally', () => { + const ANSWERS = [ + { id: 'ans-red', text: 'Red' }, + { id: 'ans-blue', text: 'Blue' }, + ]; + + it('correctly tallies a single vote', () => { + const pollStart = makePollStartEvent('$poll:test'); + const children = [makeResponseEvent('@alice:test', ['ans-red'], 2_000)]; + const room = makeRoom(children); + + const { tally, isEnded } = computeTally( + room, + '$poll:test', + pollStart, + ANSWERS, + 1, + MY_USER_ID + ); + + expect(isEnded).toBe(false); + expect(tally.get('ans-red')?.size).toBe(1); + expect(tally.get('ans-blue')?.size).toBe(0); + }); + + it('deduplicates votes from the same sender β€” latest timestamp wins', () => { + const pollStart = makePollStartEvent('$poll:test'); + const children = [ + makeResponseEvent('@alice:test', ['ans-red'], 2_000), // older + makeResponseEvent('@alice:test', ['ans-blue'], 3_000), // newer β€” should win + ]; + const room = makeRoom(children); + + const { tally } = computeTally(room, '$poll:test', pollStart, ANSWERS, 1, MY_USER_ID); + + expect(tally.get('ans-red')?.size).toBe(0); + expect(tally.get('ans-blue')?.size).toBe(1); + }); + + it('ignores votes for answer ids not in the poll', () => { + const pollStart = makePollStartEvent('$poll:test'); + const children = [makeResponseEvent('@alice:test', ['ans-invalid'], 2_000)]; + const room = makeRoom(children); + + const { tally } = computeTally(room, '$poll:test', pollStart, ANSWERS, 1, MY_USER_ID); + + expect(tally.get('ans-red')?.size).toBe(0); + expect(tally.get('ans-blue')?.size).toBe(0); + }); + + it('caps vote selections to maxSelections', () => { + const multiAnswers = [ + { id: 'a', text: 'A' }, + { id: 'b', text: 'B' }, + { id: 'c', text: 'C' }, + ]; + const pollStart = makePollStartEvent('$poll:test', { answers: multiAnswers, maxSelections: 2 }); + // Alice tries to vote for all 3 β€” only first 2 should count + const children = [makeResponseEvent('@alice:test', ['a', 'b', 'c'], 2_000)]; + const room = makeRoom(children); + + const { tally } = computeTally(room, '$poll:test', pollStart, multiAnswers, 2, MY_USER_ID); + + expect(tally.get('a')?.size).toBe(1); + expect(tally.get('b')?.size).toBe(1); + expect(tally.get('c')?.size).toBe(0); // third selection dropped + }); + + it('marks poll as ended when poll creator sends an end event', () => { + const pollStart = makePollStartEvent('$poll:test'); + const children = [ + makeResponseEvent('@alice:test', ['ans-red'], 2_000), + makeEndEvent(POLL_CREATOR, 5_000), + ]; + const room = makeRoom(children); + + const { isEnded } = computeTally(room, '$poll:test', pollStart, ANSWERS, 1, MY_USER_ID); + + expect(isEnded).toBe(true); + }); + + it('excludes votes submitted after the poll end timestamp', () => { + const pollStart = makePollStartEvent('$poll:test'); + const end = makeEndEvent(POLL_CREATOR, 3_000); + const children = [ + makeResponseEvent('@alice:test', ['ans-red'], 2_000), // before end β€” counts + makeResponseEvent('@bob:test', ['ans-blue'], 4_000), // after end β€” excluded + end, + ]; + const room = makeRoom(children); + + const { tally } = computeTally(room, '$poll:test', pollStart, ANSWERS, 1, MY_USER_ID); + + expect(tally.get('ans-red')?.size).toBe(1); + expect(tally.get('ans-blue')?.size).toBe(0); + }); + + it('ignores end events from unauthorised senders', () => { + const pollStart = makePollStartEvent('$poll:test'); + const children = [ + makeResponseEvent('@alice:test', ['ans-red'], 2_000), + makeEndEvent('@rogue:test', 3_000), // not creator, no redaction power + ]; + const room = makeRoom(children, /* maySendRedaction= */ false); + + const { isEnded } = computeTally(room, '$poll:test', pollStart, ANSWERS, 1, MY_USER_ID); + + expect(isEnded).toBe(false); + }); + + it('accepts end events from users with redaction power', () => { + const pollStart = makePollStartEvent('$poll:test'); + const children = [makeEndEvent('@moderator:test', 3_000)]; + const room = makeRoom(children, /* maySendRedaction= */ true); + + const { isEnded } = computeTally(room, '$poll:test', pollStart, ANSWERS, 1, MY_USER_ID); + + expect(isEnded).toBe(true); + }); + + it('ignores decryption-failure response events', () => { + const pollStart = makePollStartEvent('$poll:test'); + const children = [makeResponseEvent('@alice:test', ['ans-red'], 2_000, /* decryptFailure= */ true)]; + const room = makeRoom(children); + + const { tally } = computeTally(room, '$poll:test', pollStart, ANSWERS, 1, MY_USER_ID); + + expect(tally.get('ans-red')?.size).toBe(0); + }); + + it('reports myVote from the current user', () => { + const pollStart = makePollStartEvent('$poll:test'); + const children = [makeResponseEvent(MY_USER_ID, ['ans-blue'], 2_000)]; + const room = makeRoom(children); + + const { myVote } = computeTally(room, '$poll:test', pollStart, ANSWERS, 1, MY_USER_ID); + + expect(myVote).toEqual(['ans-blue']); + }); +}); + +// --------------------------------------------------------------------------- +// formatExpiry +// --------------------------------------------------------------------------- + +describe('formatExpiry', () => { + let now: number; + + beforeEach(() => { + now = Date.now(); + vi.useFakeTimers(); + vi.setSystemTime(now); + }); + + afterEach(() => { + vi.useRealTimers(); + }); + + it('returns "now" for a past or zero timestamp', () => { + expect(formatExpiry(now - 1)).toBe('now'); + expect(formatExpiry(now)).toBe('now'); + }); + + it('returns "in X min" for times less than 1 hour away', () => { + expect(formatExpiry(now + 30 * 60_000)).toBe('in 30 min'); + }); + + it('returns "in X hr" for times between 1 and 24 hours away', () => { + expect(formatExpiry(now + 3 * 3_600_000)).toBe('in 3 hr'); + }); + + it('returns "in X day(s)" for times between 1 and 6 days away', () => { + expect(formatExpiry(now + 2 * 86_400_000)).toBe('in 2 days'); + expect(formatExpiry(now + 86_400_000)).toBe('in 1 day'); + }); + + it('returns a locale date string for 7+ days away', () => { + const future = now + 10 * 86_400_000; + const expected = new Date(future).toLocaleDateString(); + expect(formatExpiry(future)).toBe(expected); + }); +}); From 35acb82117bd3bdf0ad0d0529560c2982cec774b Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 12:43:27 -0400 Subject: [PATCH 073/253] test(presence): add useUserPresence unit tests --- src/app/hooks/useUserPresence.test.tsx | 205 +++++++++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 src/app/hooks/useUserPresence.test.tsx diff --git a/src/app/hooks/useUserPresence.test.tsx b/src/app/hooks/useUserPresence.test.tsx new file mode 100644 index 000000000..125629137 --- /dev/null +++ b/src/app/hooks/useUserPresence.test.tsx @@ -0,0 +1,205 @@ +import { act, renderHook } from '@testing-library/react'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; +import { useUserPresence, Presence } from './useUserPresence'; + +// ------- mock setup ------- + +// Each test can override mockUser / mockGetPresence as needed. +let mockUser: ReturnType | null = null; +let mockGetPresence: ReturnType; + +vi.mock('$hooks/useMatrixClient', () => ({ + useMatrixClient: () => mockMx, +})); + +// Listeners registered via user.on() – captured so tests can emit events. +const userListeners = new Map void)[]>(); + +const makeMockUser = (opts: { + presence?: string; + presenceStatusMsg?: string | undefined; + currentlyActive?: boolean; + lastActiveTs?: number; +} = {}) => ({ + userId: '@alice:test', + presence: opts.presence ?? 'online', + presenceStatusMsg: opts.presenceStatusMsg, + currentlyActive: opts.currentlyActive ?? true, + getLastActiveTs: vi.fn().mockReturnValue(opts.lastActiveTs ?? 1000), + on: vi.fn().mockImplementation((event: string, handler: (...args: unknown[]) => void) => { + const list = userListeners.get(event) ?? []; + list.push(handler); + userListeners.set(event, list); + }), + removeListener: vi.fn(), +}); + +const mockMx = { + getUser: vi.fn((): ReturnType | null => mockUser), + getPresence: vi.fn( + (): Promise<{ + presence: string; + status_msg?: string; + currently_active?: boolean; + last_active_ago?: number | null; + }> => + mockGetPresence() + ), + on: vi.fn(), + removeListener: vi.fn(), +}; + +const USER_ID = '@alice:test'; + +beforeEach(() => { + vi.clearAllMocks(); + userListeners.clear(); + mockUser = null; + mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); // pending by default + mockMx.getUser.mockImplementation(() => mockUser); + mockMx.getPresence.mockImplementation(() => mockGetPresence()); +}); + +// ------- tests ------- + +describe('useUserPresence', () => { + it('returns undefined when the user is not in the SDK and REST is pending', () => { + // mockUser is null; REST never resolves + const { result } = renderHook(() => useUserPresence(USER_ID)); + expect(result.current).toBeUndefined(); + }); + + it('initialises from SDK user when available with a non-zero lastActiveTs', () => { + mockUser = makeMockUser({ presence: 'online', lastActiveTs: 5000 }); + // lastActiveTs > 0 β€” no REST fallback should be triggered + const { result } = renderHook(() => useUserPresence(USER_ID)); + + expect(result.current).toEqual({ + presence: Presence.Online, + status: undefined, + active: true, + lastActiveTs: 5000, + }); + expect(mockMx.getPresence).not.toHaveBeenCalled(); + }); + + it('fires the REST fallback when getLastActiveTs() is 0 (sliding-sync server)', async () => { + mockUser = makeMockUser({ presence: 'online', lastActiveTs: 0 }); + let resolvePresence!: (v: { + presence: string; + status_msg?: string; + currently_active?: boolean; + last_active_ago?: number; + }) => void; + mockGetPresence = vi + .fn() + .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + + const { result } = renderHook(() => useUserPresence(USER_ID)); + + await act(async () => { + resolvePresence({ + presence: 'unavailable', + status_msg: 'in a meeting', + currently_active: false, + last_active_ago: 60_000, + }); + }); + + expect(result.current?.presence).toBe(Presence.Unavailable); + expect(result.current?.status).toBe('in a meeting'); + expect(result.current?.active).toBe(false); + // lastActiveTs should be approximately Date.now() - 60_000 + expect(result.current?.lastActiveTs).toBeGreaterThan(0); + }); + + it('fires the REST fallback when user object does not exist yet', async () => { + // user is null β€” REST should still be requested + let resolvePresence!: (v: { presence: string }) => void; + mockGetPresence = vi + .fn() + .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + + const { result } = renderHook(() => useUserPresence(USER_ID)); + + expect(mockMx.getPresence).toHaveBeenCalledWith(USER_ID); + + await act(async () => { + resolvePresence({ presence: 'online' }); + }); + + expect(result.current?.presence).toBe(Presence.Online); + }); + + it('does NOT fire REST when userId is an empty string', () => { + const { result } = renderHook(() => useUserPresence('')); + + expect(mockMx.getPresence).not.toHaveBeenCalled(); + expect(result.current).toBeUndefined(); + }); + + it('ignores the REST response after the component unmounts (cancelled flag)', async () => { + let resolvePresence!: (v: { presence: string }) => void; + mockGetPresence = vi + .fn() + .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + + const { result, unmount } = renderHook(() => useUserPresence(USER_ID)); + unmount(); + + // Resolve after unmount β€” cancelled = true, so state should NOT be updated + await act(async () => { + resolvePresence({ presence: 'online' }); + }); + + expect(result.current).toBeUndefined(); + }); + + it('updates presence when UserEvent.Presence fires on the user object', () => { + mockUser = makeMockUser({ presence: 'online', lastActiveTs: 1000 }); + mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); + + const { result } = renderHook(() => useUserPresence(USER_ID)); + + // Mutate mock user to simulate a presence change, then fire the registered listener + mockUser!.presence = 'unavailable'; + const handlers = userListeners.get('User.presence') ?? []; + + act(() => { + handlers.forEach((h) => h({}, mockUser)); + }); + + expect(result.current?.presence).toBe(Presence.Unavailable); + }); + + it('resets to undefined when userId changes to a user not in the SDK', () => { + mockUser = makeMockUser({ presence: 'online', lastActiveTs: 1000 }); + mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); + + const { result, rerender } = renderHook(({ uid }) => useUserPresence(uid), { + initialProps: { uid: USER_ID }, + }); + + expect(result.current).not.toBeUndefined(); + + // Switch to unknown user + mockUser = null; + rerender({ uid: '@bob:test' }); + + expect(result.current).toBeUndefined(); + }); + + it('silently ignores a REST error (presence not supported on this server)', async () => { + mockGetPresence = vi.fn().mockReturnValue(Promise.reject(new Error('404 Not Found'))); + + const { result } = renderHook(() => useUserPresence(USER_ID)); + + // Wait for the rejection to be processed + await act(async () => { + await Promise.resolve(); + }); + + // Should still be undefined without throwing + expect(result.current).toBeUndefined(); + }); +}); From 4404e849f75313a8fc9b3ffbd8d89ab342a482f7 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 17:32:00 -0400 Subject: [PATCH 074/253] feat(presence): add presenceMode setting and Discord-style status picker Adds a new presenceMode setting ('online' | 'unavailable' | 'offline') that controls which Matrix presence state is broadcast when sendPresence is enabled. - Settings: new presenceMode field (default: 'online') - PresenceFeature: uses presenceMode; Invisible mode keeps sliding sync extension enabled so the user still receives others' presence events - AccountSwitcherTab: drive own badge from settings state (fixes stuck-offline badge on MSC4186 servers that never echo own presence); add Discord-style Online/Away/Invisible status picker in the account menu - usePresenceLabel: align label strings with Matrix state names - DevelopTools: add focusId to Rotate Encryption Sessions tile; fix import order --- .../settings/developer-tools/DevelopTools.tsx | 84 ++++++++++++++++++- src/app/hooks/useUserPresence.ts | 6 +- src/app/pages/client/ClientNonUIFeatures.tsx | 43 ++++++++-- .../client/sidebar/AccountSwitcherTab.tsx | 54 ++++++++++-- src/app/state/settings.ts | 13 +++ 5 files changed, 183 insertions(+), 17 deletions(-) diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index c8ffeb12d..a499faf9c 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -1,5 +1,6 @@ import { useCallback, useState } from 'react'; -import { Box, Text, Scroll, Switch, Button } from 'folds'; +import { Box, Text, Scroll, Switch, Button, Spinner, color } from 'folds'; +import { KnownMembership } from 'matrix-js-sdk/lib/types'; import { PageContent } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -9,9 +10,11 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { AccountDataEditor, AccountDataSubmitCallback } from '$components/AccountDataEditor'; import { copyToClipboard } from '$utils/dom'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { SettingsSectionPage } from '../SettingsSectionPage'; import { AccountData } from './AccountData'; import { SyncDiagnostics } from './SyncDiagnostics'; +import { ExperimentsPanel } from './ExperimentsPanel'; import { DebugLogViewer } from './DebugLogViewer'; import { SentrySettings } from './SentrySettings'; @@ -25,6 +28,33 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp const [expand, setExpend] = useState(false); const [accountDataType, setAccountDataType] = useState(); + const [rotateState, rotateAllSessions] = useAsyncCallback< + { rotated: number; total: number }, + Error, + [] + >( + useCallback(async () => { + const crypto = mx.getCrypto(); + if (!crypto) throw new Error('Crypto module not available'); + + const encryptedRooms = mx + .getRooms() + .filter( + (room) => + room.getMyMembership() === KnownMembership.Join && mx.isRoomEncrypted(room.roomId) + ); + + await Promise.all(encryptedRooms.map((room) => crypto.forceDiscardSession(room.roomId))); + const rotated = encryptedRooms.length; + + // Proactively start session creation + key sharing with all devices + // (including bridge bots). fire-and-forget per room. + encryptedRooms.forEach((room) => crypto.prepareToEncrypt(room)); + + return { rotated, total: encryptedRooms.length }; + }, [mx]) + ); + const submitAccountData: AccountDataSubmitCallback = useCallback( async (type, content) => { // TODO: remove cast once account data typing is unified. @@ -109,6 +139,58 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp )} {developerTools && } + {developerTools && } + {developerTools && ( + + Encryption + + + ) + } + > + + {rotateState.status === AsyncStatus.Loading ? 'Rotating…' : 'Rotate'} + + + } + > + {rotateState.status === AsyncStatus.Success && ( + + Sessions discarded for {rotateState.data.rotated} of{' '} + {rotateState.data.total} encrypted rooms. Key sharing is starting in the + background β€” send a message in an affected room to confirm delivery to + bridges. + + )} + {rotateState.status === AsyncStatus.Error && ( + + {rotateState.error.message} + + )} + + + + )} {developerTools && ( { export const usePresenceLabel = (): Record => useMemo( () => ({ - [Presence.Online]: 'Active', - [Presence.Unavailable]: 'Busy', - [Presence.Offline]: 'Away', + [Presence.Online]: 'Online', + [Presence.Unavailable]: 'Away', + [Presence.Offline]: 'Offline', }), [] ); diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 311e31e5e..5da90e4dd 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -56,6 +56,7 @@ import { useCallSignaling } from '$hooks/useCallSignaling'; import { getBlobCacheStats } from '$hooks/useBlobCache'; import { lastVisitedRoomIdAtom } from '$state/room/lastRoom'; import { useSettingsSyncEffect } from '$hooks/useSettingsSync'; +import { useInitBookmarks } from '$features/bookmarks/useInitBookmarks'; import { getInboxInvitesPath } from '../pathUtils'; import { BackgroundNotifications } from './BackgroundNotifications'; @@ -644,10 +645,23 @@ function SyncNotificationSettingsWithServiceWorker() { navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(msg)); }; + const postHidden = () => { + // pagehide fires more reliably than visibilitychange on iOS Safari PWA + // when the user locks the screen or backgrounds the app quickly, making + // it less likely that the SW is left with a stale appIsVisible=true. + const msg = { type: 'setAppVisible', visible: false }; + navigator.serviceWorker.controller?.postMessage(msg); + navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(msg)); + }; + // Report initial visibility immediately, then track changes. postVisibility(); document.addEventListener('visibilitychange', postVisibility); - return () => document.removeEventListener('visibilitychange', postVisibility); + window.addEventListener('pagehide', postHidden); + return () => { + document.removeEventListener('visibilitychange', postVisibility); + window.removeEventListener('pagehide', postHidden); + }; }, []); useEffect(() => { @@ -828,20 +842,27 @@ function HandleDecryptPushEvent() { function PresenceFeature() { const mx = useMatrixClient(); const [sendPresence] = useSetting(settingsAtom, 'sendPresence'); + const [presenceMode] = useSetting(settingsAtom, 'presenceMode'); useEffect(() => { + // Effective broadcast state: honour presenceMode when presence is on, otherwise offline. + const effectiveState = sendPresence ? (presenceMode ?? 'online') : 'offline'; + const broadcasting = effectiveState !== 'offline'; + // Classic sync: set_presence query param on every /sync poll. // Passing undefined restores the default (online); Offline suppresses broadcasting. - mx.setSyncPresence(sendPresence ? undefined : SetPresence.Offline); - // Sliding sync: enable/disable the presence extension on the next poll. + mx.setSyncPresence(broadcasting ? undefined : SetPresence.Offline); + // Sliding sync: keep the extension enabled so we always receive others' presence. + // Only disable it when the master sendPresence toggle is off (full privacy mode). getSlidingSyncManager(mx)?.setPresenceEnabled(sendPresence); - // Synapse MSC4186 sliding sync has no presence extension, so setSyncPresence has no - // effect. Explicitly PUT /presence/{userId}/status so the server knows the user's - // state β€” otherwise GET /presence returns stale offline and own presence badge is grey. - mx.setPresence({ presence: sendPresence ? 'online' : 'offline' }).catch(() => { + // Explicitly PUT /presence/{userId}/status so the server knows the exact state: + // - MSC4186 servers that have no presence extension see this immediately. + // - When 'offline' (Invisible mode), we appear offline to others but still receive + // their presence events because the extension is still enabled above. + mx.setPresence({ presence: effectiveState }).catch(() => { // Server doesn't support presence β€” ignore. }); - }, [mx, sendPresence]); + }, [mx, sendPresence, presenceMode]); return null; } @@ -851,11 +872,17 @@ function SettingsSyncFeature() { return null; } +function BookmarksFeature() { + useInitBookmarks(); + return null; +} + export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) { useCallSignaling(); return ( <> + diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index 31d4b1a5f..22ee02b34 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -40,7 +40,7 @@ import { getHomePath, getLoginPath, withSearchParam } from '$pages/pathUtils'; import { logoutClient, initClient, stopClient } from '$client/initMatrix'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useUserProfile } from '$hooks/useUserProfile'; -import { useUserPresence } from '$hooks/useUserPresence'; +import { Presence } from '$hooks/useUserPresence'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { useSessionProfiles } from '$hooks/useSessionProfiles'; import { useOpenSettings } from '$features/settings'; @@ -50,6 +50,8 @@ import { createLogger } from '$utils/debug'; import { createDebugLogger } from '$utils/debugLogger'; import { useClientConfig } from '$hooks/useClientConfig'; import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge'; +import { useSetting } from '$state/hooks/settings'; +import { settingsAtom } from '$state/settings'; const log = createLogger('AccountSwitcherTab'); const debugLog = createDebugLogger('AccountSwitcherTab'); @@ -175,7 +177,14 @@ export function AccountSwitcherTab() { const myUserId = mx.getUserId() ?? ''; const activeProfile = useUserProfile(myUserId); - const myPresence = useUserPresence(myUserId); + // Own presence badge is driven from settings state rather than the SDK's User object. + // The SDK won't echo your own presence back on MSC4186 sliding sync, so reading + // user.presence would leave the badge stuck at the SDK default forever. + const [sendPresence, setSendPresence] = useSetting(settingsAtom, 'sendPresence'); + const [presenceMode, setPresenceMode] = useSetting(settingsAtom, 'presenceMode'); + const myOwnPresence: Presence | undefined = sendPresence + ? ((presenceMode ?? 'online') as Presence) + : undefined; const activeAvatarUrl = activeProfile.avatarUrl ? (mxcUrlToHttp(mx, activeProfile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined) : undefined; @@ -275,9 +284,7 @@ export function AccountSwitcherTab() { {(triggerRef) => ( - ) : undefined + myOwnPresence ? : undefined } > Add Account + + Status + + {( + [ + { statusLabel: 'Online', presence: Presence.Online }, + { statusLabel: 'Away', presence: Presence.Unavailable }, + { statusLabel: 'Invisible', presence: Presence.Offline }, + ] as const + ).map(({ statusLabel, presence }) => { + const isSelected = sendPresence && (presenceMode ?? 'online') === presence; + return ( + } + after={ + isSelected ? ( + + ) : undefined + } + onClick={() => { + setPresenceMode(presence); + // Re-enable presence broadcasting if the master toggle was off + if (!sendPresence) setSendPresence(true); + }} + > + {statusLabel} + + ); + })} + Date: Sat, 11 Apr 2026 18:50:55 -0400 Subject: [PATCH 075/253] feat(presence): Discord-style presence picker with Idle, DND, and Invisible options --- src/app/hooks/useAppVisibility.ts | 222 ++++++++++++++++-- src/app/hooks/useUserPresence.ts | 2 +- src/app/pages/client/ClientNonUIFeatures.tsx | 9 +- .../client/sidebar/AccountSwitcherTab.tsx | 58 +++-- src/app/state/settings.ts | 2 +- 5 files changed, 251 insertions(+), 42 deletions(-) diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index 7fd5f2325..144f132a9 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -1,22 +1,102 @@ -import { useEffect } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import { MatrixClient } from '$types/matrix-sdk'; -import { useAtom } from 'jotai'; -import { togglePusher } from '../features/settings/notifications/PushNotifications'; +import { Session } from '$state/sessions'; import { appEvents } from '../utils/appEvents'; -import { useClientConfig } from './useClientConfig'; -import { useSetting } from '../state/hooks/settings'; -import { settingsAtom } from '../state/settings'; -import { pushSubscriptionAtom } from '../state/pushSubscription'; -import { mobileOrTablet } from '../utils/user-agent'; +import { useClientConfig, useExperimentVariant } from './useClientConfig'; import { createDebugLogger } from '../utils/debugLogger'; +import { pushSessionToSW } from '../../sw-session'; const debugLog = createDebugLogger('AppVisibility'); -export function useAppVisibility(mx: MatrixClient | undefined) { +const DEFAULT_FOREGROUND_DEBOUNCE_MS = 1500; +const DEFAULT_HEARTBEAT_INTERVAL_MS = 10 * 60 * 1000; +const DEFAULT_RESUME_HEARTBEAT_SUPPRESS_MS = 60 * 1000; +const DEFAULT_HEARTBEAT_MAX_BACKOFF_MS = 30 * 60 * 1000; + +export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: Session) { const clientConfig = useClientConfig(); - const [usePushNotifications] = useSetting(settingsAtom, 'usePushNotifications'); - const pushSubAtom = useAtom(pushSubscriptionAtom); - const isMobile = mobileOrTablet(); + + const sessionSyncConfig = clientConfig.sessionSync; + const sessionSyncVariant = useExperimentVariant('sessionSyncStrategy', activeSession?.userId); + + // Derive phase flags from experiment variant; fall back to direct config when not in experiment. + const inSessionSync = sessionSyncVariant.inExperiment; + const syncVariant = sessionSyncVariant.variant; + const phase1ForegroundResync = inSessionSync + ? syncVariant === 'session-sync-heartbeat' || syncVariant === 'session-sync-adaptive' + : sessionSyncConfig?.phase1ForegroundResync === true; + const phase2VisibleHeartbeat = inSessionSync + ? syncVariant === 'session-sync-heartbeat' || syncVariant === 'session-sync-adaptive' + : sessionSyncConfig?.phase2VisibleHeartbeat === true; + const phase3AdaptiveBackoffJitter = inSessionSync + ? syncVariant === 'session-sync-adaptive' + : sessionSyncConfig?.phase3AdaptiveBackoffJitter === true; + + const foregroundDebounceMs = Math.max( + 0, + sessionSyncConfig?.foregroundDebounceMs ?? DEFAULT_FOREGROUND_DEBOUNCE_MS + ); + const heartbeatIntervalMs = Math.max( + 1000, + sessionSyncConfig?.heartbeatIntervalMs ?? DEFAULT_HEARTBEAT_INTERVAL_MS + ); + const resumeHeartbeatSuppressMs = Math.max( + 0, + sessionSyncConfig?.resumeHeartbeatSuppressMs ?? DEFAULT_RESUME_HEARTBEAT_SUPPRESS_MS + ); + const heartbeatMaxBackoffMs = Math.max( + heartbeatIntervalMs, + sessionSyncConfig?.heartbeatMaxBackoffMs ?? DEFAULT_HEARTBEAT_MAX_BACKOFF_MS + ); + + const lastForegroundPushAtRef = useRef(0); + const suppressHeartbeatUntilRef = useRef(0); + const heartbeatFailuresRef = useRef(0); + + const pushSessionNow = useCallback( + (reason: 'foreground' | 'focus' | 'heartbeat'): 'sent' | 'skipped' => { + const baseUrl = activeSession?.baseUrl; + const accessToken = activeSession?.accessToken; + const userId = activeSession?.userId; + const canPush = + !!mx && + typeof baseUrl === 'string' && + typeof accessToken === 'string' && + typeof userId === 'string' && + 'serviceWorker' in navigator && + !!navigator.serviceWorker.controller; + + if (!canPush) { + debugLog.warn('network', 'Skipped SW session sync', { + reason, + hasClient: !!mx, + hasBaseUrl: !!baseUrl, + hasAccessToken: !!accessToken, + hasUserId: !!userId, + hasSwController: !!navigator.serviceWorker?.controller, + }); + return 'skipped'; + } + + pushSessionToSW(baseUrl, accessToken, userId); + debugLog.info('network', 'Pushed session to SW', { + reason, + phase1ForegroundResync, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + }); + return 'sent'; + }, + [ + activeSession?.accessToken, + activeSession?.baseUrl, + activeSession?.userId, + mx, + phase1ForegroundResync, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + ] + ); useEffect(() => { const handleVisibilityChange = () => { @@ -29,27 +109,129 @@ export function useAppVisibility(mx: MatrixClient | undefined) { appEvents.onVisibilityChange?.(isVisible); if (!isVisible) { appEvents.onVisibilityHidden?.(); + return; + } + + // Always kick the sync loop on foreground regardless of phase flags β€” + // the SDK may be sitting in exponential backoff after iOS froze the tab. + mx?.retryImmediately(); + + if (!phase1ForegroundResync) return; + + const now = Date.now(); + if (now - lastForegroundPushAtRef.current < foregroundDebounceMs) return; + lastForegroundPushAtRef.current = now; + + if (pushSessionNow('foreground') === 'sent') { + // A successful push proves the SW controller is up β€” reset adaptive backoff + // so the heartbeat returns to its normal interval immediately rather than + // staying on an inflated delay left over from a prior SW absence period. + if (phase3AdaptiveBackoffJitter) heartbeatFailuresRef.current = 0; + if (phase3AdaptiveBackoffJitter && phase2VisibleHeartbeat) { + suppressHeartbeatUntilRef.current = now + resumeHeartbeatSuppressMs; + } + } + }; + + const handleFocus = () => { + if (document.visibilityState !== 'visible') return; + + // Always kick the sync loop on focus for the same reason as above. + mx?.retryImmediately(); + + if (!phase1ForegroundResync) return; + + const now = Date.now(); + if (now - lastForegroundPushAtRef.current < foregroundDebounceMs) return; + lastForegroundPushAtRef.current = now; + + if (pushSessionNow('focus') === 'sent') { + if (phase3AdaptiveBackoffJitter) heartbeatFailuresRef.current = 0; + if (phase3AdaptiveBackoffJitter && phase2VisibleHeartbeat) { + suppressHeartbeatUntilRef.current = now + resumeHeartbeatSuppressMs; + } } }; document.addEventListener('visibilitychange', handleVisibilityChange); + window.addEventListener('focus', handleFocus); return () => { document.removeEventListener('visibilitychange', handleVisibilityChange); + window.removeEventListener('focus', handleFocus); }; - }, []); + }, [ + foregroundDebounceMs, + mx, + phase1ForegroundResync, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + pushSessionNow, + resumeHeartbeatSuppressMs, + ]); useEffect(() => { - if (!mx) return; + if (!phase2VisibleHeartbeat) return undefined; + + // Reset adaptive backoff/suppression so a config or session change starts fresh. + heartbeatFailuresRef.current = 0; + suppressHeartbeatUntilRef.current = 0; + + let timeoutId: number | undefined; + + const getDelayMs = (): number => { + let delay = heartbeatIntervalMs; + + if (phase3AdaptiveBackoffJitter) { + const failures = heartbeatFailuresRef.current; + const backoffFactor = Math.min(2 ** failures, heartbeatMaxBackoffMs / heartbeatIntervalMs); + delay = Math.min(heartbeatMaxBackoffMs, Math.round(heartbeatIntervalMs * backoffFactor)); + + // Add +-20% jitter to avoid synchronized heartbeat spikes across many clients. + const jitter = 0.8 + Math.random() * 0.4; + delay = Math.max(1000, Math.round(delay * jitter)); + } + + return delay; + }; + + const tick = () => { + const now = Date.now(); - const handleVisibilityForNotifications = (isVisible: boolean) => { - togglePusher(mx, clientConfig, isVisible, usePushNotifications, pushSubAtom, isMobile); + if (document.visibilityState !== 'visible' || !navigator.onLine) { + timeoutId = window.setTimeout(tick, getDelayMs()); + return; + } + + if (phase3AdaptiveBackoffJitter && now < suppressHeartbeatUntilRef.current) { + timeoutId = window.setTimeout(tick, getDelayMs()); + return; + } + + const result = pushSessionNow('heartbeat'); + if (phase3AdaptiveBackoffJitter) { + if (result === 'sent') { + heartbeatFailuresRef.current = 0; + } else { + // 'skipped' means prerequisites (SW controller, session) aren't ready. + // Treat as a transient failure so backoff grows until the SW is ready. + heartbeatFailuresRef.current += 1; + } + } + + timeoutId = window.setTimeout(tick, getDelayMs()); }; - appEvents.onVisibilityChange = handleVisibilityForNotifications; - // eslint-disable-next-line consistent-return + timeoutId = window.setTimeout(tick, getDelayMs()); + return () => { - appEvents.onVisibilityChange = null; + if (timeoutId !== undefined) window.clearTimeout(timeoutId); }; - }, [mx, clientConfig, usePushNotifications, pushSubAtom, isMobile]); + }, [ + heartbeatIntervalMs, + heartbeatMaxBackoffMs, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + pushSessionNow, + ]); } diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index 7e0f0e78b..8c9b85959 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -95,7 +95,7 @@ export const usePresenceLabel = (): Record => useMemo( () => ({ [Presence.Online]: 'Online', - [Presence.Unavailable]: 'Away', + [Presence.Unavailable]: 'Idle', [Presence.Offline]: 'Offline', }), [] diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 5da90e4dd..260f1dc28 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -846,7 +846,9 @@ function PresenceFeature() { useEffect(() => { // Effective broadcast state: honour presenceMode when presence is on, otherwise offline. - const effectiveState = sendPresence ? (presenceMode ?? 'online') : 'offline'; + // DND broadcasts as online (you're active but don't want to be disturbed) with a status_msg. + const activePresence = presenceMode === 'dnd' ? 'online' : (presenceMode ?? 'online'); + const effectiveState = sendPresence ? activePresence : 'offline'; const broadcasting = effectiveState !== 'offline'; // Classic sync: set_presence query param on every /sync poll. @@ -859,7 +861,10 @@ function PresenceFeature() { // - MSC4186 servers that have no presence extension see this immediately. // - When 'offline' (Invisible mode), we appear offline to others but still receive // their presence events because the extension is still enabled above. - mx.setPresence({ presence: effectiveState }).catch(() => { + mx.setPresence({ + presence: effectiveState, + status_msg: sendPresence && presenceMode === 'dnd' ? 'dnd' : '', + }).catch(() => { // Server doesn't support presence β€” ignore. }); }, [mx, sendPresence, presenceMode]); diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index 22ee02b34..395edcfe7 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -1,5 +1,6 @@ -import { MouseEvent, MouseEventHandler, useCallback, useState } from 'react'; +import { MouseEvent, MouseEventHandler, ReactNode, useCallback, useState } from 'react'; import { + Badge, Box, Button, Dialog, @@ -182,9 +183,16 @@ export function AccountSwitcherTab() { // user.presence would leave the badge stuck at the SDK default forever. const [sendPresence, setSendPresence] = useSetting(settingsAtom, 'sendPresence'); const [presenceMode, setPresenceMode] = useSetting(settingsAtom, 'presenceMode'); - const myOwnPresence: Presence | undefined = sendPresence - ? ((presenceMode ?? 'online') as Presence) - : undefined; + let myOwnPresenceBadge: ReactNode; + if (sendPresence) { + myOwnPresenceBadge = + presenceMode === 'dnd' ? ( + // DND: solid red badge (broadcasts as online with status_msg 'dnd') + + ) : ( + + ); + } const activeAvatarUrl = activeProfile.avatarUrl ? (mxcUrlToHttp(mx, activeProfile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined) : undefined; @@ -282,11 +290,7 @@ export function AccountSwitcherTab() { {(triggerRef) => ( - : undefined - } - > + {( [ - { statusLabel: 'Online', presence: Presence.Online }, - { statusLabel: 'Away', presence: Presence.Unavailable }, - { statusLabel: 'Invisible', presence: Presence.Offline }, + { label: 'Online', desc: undefined, mode: 'online' as const }, + { label: 'Idle', desc: undefined, mode: 'unavailable' as const }, + { label: 'Do Not Disturb', desc: undefined, mode: 'dnd' as const }, + { + label: 'Invisible', + desc: 'You will appear offline', + mode: 'offline' as const, + }, ] as const - ).map(({ statusLabel, presence }) => { - const isSelected = sendPresence && (presenceMode ?? 'online') === presence; + ).map(({ label: statusLabel, desc, mode }) => { + const isSelected = sendPresence && (presenceMode ?? 'online') === mode; + const badge = + mode === 'dnd' ? ( + + ) : ( + + ); return ( } + before={badge} after={ isSelected ? ( { - setPresenceMode(presence); + setPresenceMode(mode); // Re-enable presence broadcasting if the master toggle was off if (!sendPresence) setSendPresence(true); }} > - {statusLabel} + + {statusLabel} + {desc && ( + + {desc} + + )} + ); })} diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 56b0fba52..4538ae287 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -94,7 +94,7 @@ export interface Settings { // Sable features! sendPresence: boolean; /** Which Matrix presence state to broadcast when sendPresence is true. */ - presenceMode: 'online' | 'unavailable' | 'offline'; + presenceMode: 'online' | 'unavailable' | 'dnd' | 'offline'; mobileGestures: boolean; rightSwipeAction: RightSwipeAction; hideMembershipInReadOnly: boolean; From 1ba25f8d18e5d4c9ead232e7b697dbf1e62c3c13 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 10:53:57 -0400 Subject: [PATCH 076/253] fix(bookmarks): wire useInitBookmarks and fix orphan tombstoning - Mount BookmarksFeature in ClientNonUIFeatures so useInitBookmarks() is called; bookmarkListAtom was never populated, causing the viewer to always show "No Bookmarks Yet" even with data on the server. - Fix removeBookmark to tombstone any existing item event regardless of whether it passes validation, so malformed/orphan bmk_ items cannot be resurrected by orphan recovery in listBookmarks. - Add regression tests: tombstoning malformed item, idempotent tombstoning. --- .../bookmarks/bookmarkRepository.test.ts | 29 +++++++++++++++++++ .../features/bookmarks/bookmarkRepository.ts | 18 ++++++++---- src/app/pages/client/ClientNonUIFeatures.tsx | 8 +++-- 3 files changed, 47 insertions(+), 8 deletions(-) diff --git a/src/app/features/bookmarks/bookmarkRepository.test.ts b/src/app/features/bookmarks/bookmarkRepository.test.ts index 7b928b50e..3eeaaca65 100644 --- a/src/app/features/bookmarks/bookmarkRepository.test.ts +++ b/src/app/features/bookmarks/bookmarkRepository.test.ts @@ -202,6 +202,35 @@ describe('removeBookmark', () => { await expect(removeBookmark(mx, item.bookmark_id)).resolves.not.toThrow(); }); + it('tombstones a malformed item event (sets deleted: true even when validation fails)', async () => { + // A malformed item exists in account data (e.g. written by a buggy client). + // removeBookmark must still tombstone it so orphan recovery does not resurrect it. + const badContent = { not_a_valid: 'item' }; + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_bad'] }), + [bookmarkItemEventType('bmk_bad')]: badContent, + }); + + await removeBookmark(mx, 'bmk_bad'); + + const stored = (mx as any)._store[bookmarkItemEventType('bmk_bad')]; + expect(stored.deleted).toBe(true); + }); + + it('tombstones an already-deleted item event (idempotent)', async () => { + // If for any reason the same bookmark is removed twice, the tombstone write + // should still succeed and the item should remain deleted. + const item = makeItem({ deleted: true }); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + + await expect(removeBookmark(mx, item.bookmark_id)).resolves.not.toThrow(); + const stored = (mx as any)._store[bookmarkItemEventType(item.bookmark_id)] as BookmarkItemContent; + expect(stored.deleted).toBe(true); + }); + it('leaves the index unchanged when the ID was not present', async () => { const mx = makeClient({ [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_aaaabbbb'] }), diff --git a/src/app/features/bookmarks/bookmarkRepository.ts b/src/app/features/bookmarks/bookmarkRepository.ts index e6d712dbd..d1a30370d 100644 --- a/src/app/features/bookmarks/bookmarkRepository.ts +++ b/src/app/features/bookmarks/bookmarkRepository.ts @@ -77,12 +77,18 @@ export async function addBookmark(mx: MatrixClient, item: BookmarkItemContent): * removed. */ export async function removeBookmark(mx: MatrixClient, bookmarkId: string): Promise { - // Soft-delete the item FIRST β€” mirrors the item-before-index ordering of addBookmark. - // If writeIndex ran first, orphan recovery in listBookmarks() would transiently resurface the - // bookmark (item not yet deleted, but ID also not in index) between the two writes. - const existing = readItem(mx, bookmarkId); - if (existing) { - await writeItem(mx, { ...existing, deleted: true }); + // Tombstone the item event directly β€” bypass readItem()'s validation so that + // malformed or already-deleted items still get marked deleted: true. Without + // this, orphan recovery can resurrect items whose deletion write failed halfway. + const evt = mx.getAccountData(bookmarkItemEventType(bookmarkId) as any); + const raw = evt?.getContent(); + if (raw != null) { + // Write using the bookmarkId param as the canonical type key, not item.bookmark_id, + // so malformed items (missing bookmark_id field) still get the right event type. + await mx.setAccountData( + bookmarkItemEventType(bookmarkId) as any, + { ...(raw as object), deleted: true } as any + ); } const index = readIndex(mx); diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index caebe459a..ca0b82b81 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -514,8 +514,12 @@ function MessageNotifications() { }); } - // In-app audio: play when notification sounds are enabled AND this notification is loud. - if (notificationSound && isLoud) { + // In-app audio: play when the app is in the foreground (has focus) and + // notification sounds are enabled for this notification type. + // Gating on hasFocus() rather than just visibilityState prevents a race + // where the page is still 'visible' for a brief window after the user + // backgrounds the app on mobile β€” hasFocus() flips false first. + if (notificationSound && isLoud && document.hasFocus()) { playSound(); } }; From c178b777b667df4de82d65848902233e0bbc5dee Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 31 Mar 2026 10:50:22 -0400 Subject: [PATCH 077/253] feat(presence): add presence badges to sidebar and fix sliding sync presence data MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - DirectDMsList: show PresenceBadge on DM avatar β€” actual presence for 1:1 DMs, green dot when any participant is online for group DMs - AccountSwitcherTab: show PresenceBadge on own account avatar in sidebar - Fix AvatarPresence placement: move wrapper outside SidebarAvatar (overflow:hidden was clipping the badge) - useUserPresence: reset presence state when userId changes; add REST fallback for sliding sync (Synapse MSC4186 has no presence extension so m.presence events are never delivered via sync β€” GET /presence/:userId/status bootstraps the initial state) - ClientNonUIFeatures: explicitly PUT /presence/:userId/status on visibility change so the server records online/offline state; setSyncPresence is a no-op on MSC4186 --- src/app/hooks/useUserPresence.ts | 50 +++++++++++++++++-- src/app/pages/client/ClientNonUIFeatures.tsx | 6 +++ .../client/sidebar/AccountSwitcherTab.tsx | 35 ++++++++----- .../pages/client/sidebar/DirectDMsList.tsx | 34 +++++++++++-- 4 files changed, 105 insertions(+), 20 deletions(-) diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index f1b858422..a3b86ef08 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -1,5 +1,5 @@ import { useEffect, useMemo, useState } from 'react'; -import { User, UserEvent, UserEventHandlerMap } from '$types/matrix-sdk'; +import { ClientEvent, MatrixEvent, User, UserEvent, UserEventHandlerMap } from '$types/matrix-sdk'; import { useMatrixClient } from './useMatrixClient'; export enum Presence { @@ -29,20 +29,62 @@ export const useUserPresence = (userId: string): UserPresence | undefined => { const [presence, setPresence] = useState(() => (user ? getUserPresence(user) : undefined)); useEffect(() => { + setPresence(user ? getUserPresence(user) : undefined); + + let cancelled = false; + + // Sliding sync (Synapse MSC4186) has no presence extension β€” m.presence events are never + // delivered via sync. As a result, User.presence stays at the SDK default and + // getLastActiveTs() stays 0. Fall back to a direct REST fetch to bootstrap presence state. + if (!user || user.getLastActiveTs() === 0) { + mx.getPresence(userId) + .then((resp) => { + if (cancelled) return; + setPresence({ + presence: resp.presence as Presence, + status: resp.status_msg, + active: resp.currently_active ?? false, + lastActiveTs: + resp.last_active_ago != null ? Date.now() - resp.last_active_ago : undefined, + }); + }) + .catch(() => { + // Presence not available on this server (404 or not supported) β€” keep existing state. + }); + } + const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (event, u) => { - if (u.userId === user?.userId) { - setPresence(getUserPresence(user)); + if (u.userId === userId) { + setPresence(getUserPresence(u)); } }; user?.on(UserEvent.Presence, updatePresence); user?.on(UserEvent.CurrentlyActive, updatePresence); user?.on(UserEvent.LastPresenceTs, updatePresence); + + // If the User object doesn't exist yet, subscribe at client level as a fallback. + // ExtensionPresence emits ClientEvent.Event after creating and updating the User object, + // so by the time this fires mx.getUser(userId) is guaranteed to be non-null. + let removeClientListener: (() => void) | undefined; + if (!user) { + const onClientEvent = (event: MatrixEvent) => { + if (event.getSender() !== userId || event.getType() !== 'm.presence') return; + const u = mx.getUser(userId); + if (!u) return; + setPresence(getUserPresence(u)); + }; + mx.on(ClientEvent.Event, onClientEvent); + removeClientListener = () => mx.removeListener(ClientEvent.Event, onClientEvent); + } + return () => { + cancelled = true; user?.removeListener(UserEvent.Presence, updatePresence); user?.removeListener(UserEvent.CurrentlyActive, updatePresence); user?.removeListener(UserEvent.LastPresenceTs, updatePresence); + removeClientListener?.(); }; - }, [user]); + }, [mx, userId, user]); return presence; }; diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 26ac2f431..311e31e5e 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -835,6 +835,12 @@ function PresenceFeature() { mx.setSyncPresence(sendPresence ? undefined : SetPresence.Offline); // Sliding sync: enable/disable the presence extension on the next poll. getSlidingSyncManager(mx)?.setPresenceEnabled(sendPresence); + // Synapse MSC4186 sliding sync has no presence extension, so setSyncPresence has no + // effect. Explicitly PUT /presence/{userId}/status so the server knows the user's + // state β€” otherwise GET /presence returns stale offline and own presence badge is grey. + mx.setPresence({ presence: sendPresence ? 'online' : 'offline' }).catch(() => { + // Server doesn't support presence β€” ignore. + }); }, [mx, sendPresence]); return null; diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index 6e6ecc572..31d4b1a5f 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -40,10 +40,12 @@ import { getHomePath, getLoginPath, withSearchParam } from '$pages/pathUtils'; import { logoutClient, initClient, stopClient } from '$client/initMatrix'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useUserProfile } from '$hooks/useUserProfile'; +import { useUserPresence } from '$hooks/useUserPresence'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { useSessionProfiles } from '$hooks/useSessionProfiles'; import { useOpenSettings } from '$features/settings'; import { Modal500 } from '$components/Modal500'; +import { AvatarPresence, PresenceBadge } from '$components/presence'; import { createLogger } from '$utils/debug'; import { createDebugLogger } from '$utils/debugLogger'; import { useClientConfig } from '$hooks/useClientConfig'; @@ -173,6 +175,7 @@ export function AccountSwitcherTab() { const myUserId = mx.getUserId() ?? ''; const activeProfile = useUserProfile(myUserId); + const myPresence = useUserPresence(myUserId); const activeAvatarUrl = activeProfile.avatarUrl ? (mxcUrlToHttp(mx, activeProfile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined) : undefined; @@ -270,19 +273,27 @@ export function AccountSwitcherTab() { {(triggerRef) => ( - 1} + + ) : undefined + } > - {nameInitials(label)}} - /> - + 1} + > + {nameInitials(label)}} + /> + + )} {(totalBackgroundUnread > 0 || anyBackgroundHighlight) && ( diff --git a/src/app/pages/client/sidebar/DirectDMsList.tsx b/src/app/pages/client/sidebar/DirectDMsList.tsx index 16e829ce5..34a108a60 100644 --- a/src/app/pages/client/sidebar/DirectDMsList.tsx +++ b/src/app/pages/client/sidebar/DirectDMsList.tsx @@ -1,4 +1,4 @@ -import { useMemo, useRef, useEffect } from 'react'; +import { useMemo, useRef, useEffect, ReactNode } from 'react'; import * as Sentry from '@sentry/react'; import { useNavigate } from 'react-router-dom'; import { Avatar, Text, Box } from 'folds'; @@ -15,6 +15,8 @@ import { } from '$components/sidebar'; import { RoomAvatar } from '$components/room-avatar'; import { UserAvatar } from '$components/user-avatar'; +import { AvatarPresence, PresenceBadge } from '$components/presence'; +import { useUserPresence, Presence } from '$hooks/useUserPresence'; import { getDirectRoomAvatarUrl } from '$utils/room'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { nameInitials } from '$utils/common'; @@ -48,6 +50,28 @@ function DMItem({ room, selected }: DMItemProps) { // Members are sorted by who last sent messages (most recent first) const groupMembers = useGroupDMMembers(mx, room, MAX_GROUP_MEMBERS); + // Presence hooks β€” always called unconditionally (React rules of hooks). + // For single DMs: guessDMUserId() is synchronous; group slots use '' β†’ undefined. + // For group DMs: singleDMUserId is '' β†’ undefined; member slots use groupMembers. + const singleDMUserId = isGroupDM ? '' : room.guessDMUserId(); + const singleDMPresence = useUserPresence(singleDMUserId); + const member0Presence = useUserPresence(isGroupDM ? (groupMembers[0]?.userId ?? '') : ''); + const member1Presence = useUserPresence(isGroupDM ? (groupMembers[1]?.userId ?? '') : ''); + const member2Presence = useUserPresence(isGroupDM ? (groupMembers[2]?.userId ?? '') : ''); + + const groupDMOnline = + isGroupDM && + [member0Presence, member1Presence, member2Presence].some( + (p) => p && p.lastActiveTs !== 0 && p.presence === Presence.Online + ); + + let presenceBadge: ReactNode; + if (!isGroupDM && singleDMPresence && singleDMPresence.lastActiveTs !== 0) { + presenceBadge = ; + } else if (isGroupDM && groupDMOnline) { + presenceBadge = ; + } + // Get unread info for badge const unread = roomToUnread.get(room.roomId); @@ -132,9 +156,11 @@ function DMItem({ room, selected }: DMItemProps) { {(triggerRef) => ( - - {renderAvatar()} - + + + {renderAvatar()} + + )} {unread && (unread.total > 0 || unread.highlight > 0) && ( From ac7528459ad5ebbae9d703f5832fdd19c9700b53 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 31 Mar 2026 12:17:18 -0400 Subject: [PATCH 078/253] chore: add changeset for presence-sidebar-badges --- .changeset/presence-sidebar-badges.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/presence-sidebar-badges.md diff --git a/.changeset/presence-sidebar-badges.md b/.changeset/presence-sidebar-badges.md new file mode 100644 index 000000000..9d0356c48 --- /dev/null +++ b/.changeset/presence-sidebar-badges.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Add presence status badges to sidebar DM list and account switcher From c7d44d87e6dd786a55ebd26ba7c892c10d5f1ad8 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 09:21:39 -0400 Subject: [PATCH 079/253] fix(presence): skip REST presence fetch when userId is empty string --- src/app/hooks/useUserPresence.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index a3b86ef08..52bb99467 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -36,7 +36,9 @@ export const useUserPresence = (userId: string): UserPresence | undefined => { // Sliding sync (Synapse MSC4186) has no presence extension β€” m.presence events are never // delivered via sync. As a result, User.presence stays at the SDK default and // getLastActiveTs() stays 0. Fall back to a direct REST fetch to bootstrap presence state. - if (!user || user.getLastActiveTs() === 0) { + // Guard against empty userId β€” callers that render a fixed number of hooks (e.g. group DM + // slots) pass '' for absent members; firing getPresence('') would be a malformed request. + if (userId && (!user || user.getLastActiveTs() === 0)) { mx.getPresence(userId) .then((resp) => { if (cancelled) return; From ce458fb5f870527263f81a42e8009466b86f0be6 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 12:43:27 -0400 Subject: [PATCH 080/253] test(presence): add useUserPresence unit tests --- src/app/hooks/useUserPresence.test.tsx | 205 +++++++++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 src/app/hooks/useUserPresence.test.tsx diff --git a/src/app/hooks/useUserPresence.test.tsx b/src/app/hooks/useUserPresence.test.tsx new file mode 100644 index 000000000..125629137 --- /dev/null +++ b/src/app/hooks/useUserPresence.test.tsx @@ -0,0 +1,205 @@ +import { act, renderHook } from '@testing-library/react'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; +import { useUserPresence, Presence } from './useUserPresence'; + +// ------- mock setup ------- + +// Each test can override mockUser / mockGetPresence as needed. +let mockUser: ReturnType | null = null; +let mockGetPresence: ReturnType; + +vi.mock('$hooks/useMatrixClient', () => ({ + useMatrixClient: () => mockMx, +})); + +// Listeners registered via user.on() – captured so tests can emit events. +const userListeners = new Map void)[]>(); + +const makeMockUser = (opts: { + presence?: string; + presenceStatusMsg?: string | undefined; + currentlyActive?: boolean; + lastActiveTs?: number; +} = {}) => ({ + userId: '@alice:test', + presence: opts.presence ?? 'online', + presenceStatusMsg: opts.presenceStatusMsg, + currentlyActive: opts.currentlyActive ?? true, + getLastActiveTs: vi.fn().mockReturnValue(opts.lastActiveTs ?? 1000), + on: vi.fn().mockImplementation((event: string, handler: (...args: unknown[]) => void) => { + const list = userListeners.get(event) ?? []; + list.push(handler); + userListeners.set(event, list); + }), + removeListener: vi.fn(), +}); + +const mockMx = { + getUser: vi.fn((): ReturnType | null => mockUser), + getPresence: vi.fn( + (): Promise<{ + presence: string; + status_msg?: string; + currently_active?: boolean; + last_active_ago?: number | null; + }> => + mockGetPresence() + ), + on: vi.fn(), + removeListener: vi.fn(), +}; + +const USER_ID = '@alice:test'; + +beforeEach(() => { + vi.clearAllMocks(); + userListeners.clear(); + mockUser = null; + mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); // pending by default + mockMx.getUser.mockImplementation(() => mockUser); + mockMx.getPresence.mockImplementation(() => mockGetPresence()); +}); + +// ------- tests ------- + +describe('useUserPresence', () => { + it('returns undefined when the user is not in the SDK and REST is pending', () => { + // mockUser is null; REST never resolves + const { result } = renderHook(() => useUserPresence(USER_ID)); + expect(result.current).toBeUndefined(); + }); + + it('initialises from SDK user when available with a non-zero lastActiveTs', () => { + mockUser = makeMockUser({ presence: 'online', lastActiveTs: 5000 }); + // lastActiveTs > 0 β€” no REST fallback should be triggered + const { result } = renderHook(() => useUserPresence(USER_ID)); + + expect(result.current).toEqual({ + presence: Presence.Online, + status: undefined, + active: true, + lastActiveTs: 5000, + }); + expect(mockMx.getPresence).not.toHaveBeenCalled(); + }); + + it('fires the REST fallback when getLastActiveTs() is 0 (sliding-sync server)', async () => { + mockUser = makeMockUser({ presence: 'online', lastActiveTs: 0 }); + let resolvePresence!: (v: { + presence: string; + status_msg?: string; + currently_active?: boolean; + last_active_ago?: number; + }) => void; + mockGetPresence = vi + .fn() + .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + + const { result } = renderHook(() => useUserPresence(USER_ID)); + + await act(async () => { + resolvePresence({ + presence: 'unavailable', + status_msg: 'in a meeting', + currently_active: false, + last_active_ago: 60_000, + }); + }); + + expect(result.current?.presence).toBe(Presence.Unavailable); + expect(result.current?.status).toBe('in a meeting'); + expect(result.current?.active).toBe(false); + // lastActiveTs should be approximately Date.now() - 60_000 + expect(result.current?.lastActiveTs).toBeGreaterThan(0); + }); + + it('fires the REST fallback when user object does not exist yet', async () => { + // user is null β€” REST should still be requested + let resolvePresence!: (v: { presence: string }) => void; + mockGetPresence = vi + .fn() + .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + + const { result } = renderHook(() => useUserPresence(USER_ID)); + + expect(mockMx.getPresence).toHaveBeenCalledWith(USER_ID); + + await act(async () => { + resolvePresence({ presence: 'online' }); + }); + + expect(result.current?.presence).toBe(Presence.Online); + }); + + it('does NOT fire REST when userId is an empty string', () => { + const { result } = renderHook(() => useUserPresence('')); + + expect(mockMx.getPresence).not.toHaveBeenCalled(); + expect(result.current).toBeUndefined(); + }); + + it('ignores the REST response after the component unmounts (cancelled flag)', async () => { + let resolvePresence!: (v: { presence: string }) => void; + mockGetPresence = vi + .fn() + .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + + const { result, unmount } = renderHook(() => useUserPresence(USER_ID)); + unmount(); + + // Resolve after unmount β€” cancelled = true, so state should NOT be updated + await act(async () => { + resolvePresence({ presence: 'online' }); + }); + + expect(result.current).toBeUndefined(); + }); + + it('updates presence when UserEvent.Presence fires on the user object', () => { + mockUser = makeMockUser({ presence: 'online', lastActiveTs: 1000 }); + mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); + + const { result } = renderHook(() => useUserPresence(USER_ID)); + + // Mutate mock user to simulate a presence change, then fire the registered listener + mockUser!.presence = 'unavailable'; + const handlers = userListeners.get('User.presence') ?? []; + + act(() => { + handlers.forEach((h) => h({}, mockUser)); + }); + + expect(result.current?.presence).toBe(Presence.Unavailable); + }); + + it('resets to undefined when userId changes to a user not in the SDK', () => { + mockUser = makeMockUser({ presence: 'online', lastActiveTs: 1000 }); + mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); + + const { result, rerender } = renderHook(({ uid }) => useUserPresence(uid), { + initialProps: { uid: USER_ID }, + }); + + expect(result.current).not.toBeUndefined(); + + // Switch to unknown user + mockUser = null; + rerender({ uid: '@bob:test' }); + + expect(result.current).toBeUndefined(); + }); + + it('silently ignores a REST error (presence not supported on this server)', async () => { + mockGetPresence = vi.fn().mockReturnValue(Promise.reject(new Error('404 Not Found'))); + + const { result } = renderHook(() => useUserPresence(USER_ID)); + + // Wait for the rejection to be processed + await act(async () => { + await Promise.resolve(); + }); + + // Should still be undefined without throwing + expect(result.current).toBeUndefined(); + }); +}); From f7c7fee75eb78cf83e2bc55eaadac21f0518757a Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 17:32:00 -0400 Subject: [PATCH 081/253] feat(presence): add presenceMode setting and Discord-style status picker Adds a new presenceMode setting ('online' | 'unavailable' | 'offline') that controls which Matrix presence state is broadcast when sendPresence is enabled. - Settings: new presenceMode field (default: 'online') - PresenceFeature: uses presenceMode; Invisible mode keeps sliding sync extension enabled so the user still receives others' presence events - AccountSwitcherTab: drive own badge from settings state (fixes stuck-offline badge on MSC4186 servers that never echo own presence); add Discord-style Online/Away/Invisible status picker in the account menu - usePresenceLabel: align label strings with Matrix state names - DevelopTools: add focusId to Rotate Encryption Sessions tile; fix import order --- .../settings/developer-tools/DevelopTools.tsx | 84 ++++++++++++++++++- src/app/hooks/useUserPresence.ts | 6 +- src/app/pages/client/ClientNonUIFeatures.tsx | 43 ++++++++-- .../client/sidebar/AccountSwitcherTab.tsx | 54 ++++++++++-- src/app/state/settings.ts | 9 ++ 5 files changed, 179 insertions(+), 17 deletions(-) diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index c8ffeb12d..a499faf9c 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -1,5 +1,6 @@ import { useCallback, useState } from 'react'; -import { Box, Text, Scroll, Switch, Button } from 'folds'; +import { Box, Text, Scroll, Switch, Button, Spinner, color } from 'folds'; +import { KnownMembership } from 'matrix-js-sdk/lib/types'; import { PageContent } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -9,9 +10,11 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { AccountDataEditor, AccountDataSubmitCallback } from '$components/AccountDataEditor'; import { copyToClipboard } from '$utils/dom'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { SettingsSectionPage } from '../SettingsSectionPage'; import { AccountData } from './AccountData'; import { SyncDiagnostics } from './SyncDiagnostics'; +import { ExperimentsPanel } from './ExperimentsPanel'; import { DebugLogViewer } from './DebugLogViewer'; import { SentrySettings } from './SentrySettings'; @@ -25,6 +28,33 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp const [expand, setExpend] = useState(false); const [accountDataType, setAccountDataType] = useState(); + const [rotateState, rotateAllSessions] = useAsyncCallback< + { rotated: number; total: number }, + Error, + [] + >( + useCallback(async () => { + const crypto = mx.getCrypto(); + if (!crypto) throw new Error('Crypto module not available'); + + const encryptedRooms = mx + .getRooms() + .filter( + (room) => + room.getMyMembership() === KnownMembership.Join && mx.isRoomEncrypted(room.roomId) + ); + + await Promise.all(encryptedRooms.map((room) => crypto.forceDiscardSession(room.roomId))); + const rotated = encryptedRooms.length; + + // Proactively start session creation + key sharing with all devices + // (including bridge bots). fire-and-forget per room. + encryptedRooms.forEach((room) => crypto.prepareToEncrypt(room)); + + return { rotated, total: encryptedRooms.length }; + }, [mx]) + ); + const submitAccountData: AccountDataSubmitCallback = useCallback( async (type, content) => { // TODO: remove cast once account data typing is unified. @@ -109,6 +139,58 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp )} {developerTools && } + {developerTools && } + {developerTools && ( + + Encryption + + + ) + } + > + + {rotateState.status === AsyncStatus.Loading ? 'Rotating…' : 'Rotate'} + + + } + > + {rotateState.status === AsyncStatus.Success && ( + + Sessions discarded for {rotateState.data.rotated} of{' '} + {rotateState.data.total} encrypted rooms. Key sharing is starting in the + background β€” send a message in an affected room to confirm delivery to + bridges. + + )} + {rotateState.status === AsyncStatus.Error && ( + + {rotateState.error.message} + + )} + + + + )} {developerTools && ( { export const usePresenceLabel = (): Record => useMemo( () => ({ - [Presence.Online]: 'Active', - [Presence.Unavailable]: 'Busy', - [Presence.Offline]: 'Away', + [Presence.Online]: 'Online', + [Presence.Unavailable]: 'Away', + [Presence.Offline]: 'Offline', }), [] ); diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 311e31e5e..5da90e4dd 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -56,6 +56,7 @@ import { useCallSignaling } from '$hooks/useCallSignaling'; import { getBlobCacheStats } from '$hooks/useBlobCache'; import { lastVisitedRoomIdAtom } from '$state/room/lastRoom'; import { useSettingsSyncEffect } from '$hooks/useSettingsSync'; +import { useInitBookmarks } from '$features/bookmarks/useInitBookmarks'; import { getInboxInvitesPath } from '../pathUtils'; import { BackgroundNotifications } from './BackgroundNotifications'; @@ -644,10 +645,23 @@ function SyncNotificationSettingsWithServiceWorker() { navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(msg)); }; + const postHidden = () => { + // pagehide fires more reliably than visibilitychange on iOS Safari PWA + // when the user locks the screen or backgrounds the app quickly, making + // it less likely that the SW is left with a stale appIsVisible=true. + const msg = { type: 'setAppVisible', visible: false }; + navigator.serviceWorker.controller?.postMessage(msg); + navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(msg)); + }; + // Report initial visibility immediately, then track changes. postVisibility(); document.addEventListener('visibilitychange', postVisibility); - return () => document.removeEventListener('visibilitychange', postVisibility); + window.addEventListener('pagehide', postHidden); + return () => { + document.removeEventListener('visibilitychange', postVisibility); + window.removeEventListener('pagehide', postHidden); + }; }, []); useEffect(() => { @@ -828,20 +842,27 @@ function HandleDecryptPushEvent() { function PresenceFeature() { const mx = useMatrixClient(); const [sendPresence] = useSetting(settingsAtom, 'sendPresence'); + const [presenceMode] = useSetting(settingsAtom, 'presenceMode'); useEffect(() => { + // Effective broadcast state: honour presenceMode when presence is on, otherwise offline. + const effectiveState = sendPresence ? (presenceMode ?? 'online') : 'offline'; + const broadcasting = effectiveState !== 'offline'; + // Classic sync: set_presence query param on every /sync poll. // Passing undefined restores the default (online); Offline suppresses broadcasting. - mx.setSyncPresence(sendPresence ? undefined : SetPresence.Offline); - // Sliding sync: enable/disable the presence extension on the next poll. + mx.setSyncPresence(broadcasting ? undefined : SetPresence.Offline); + // Sliding sync: keep the extension enabled so we always receive others' presence. + // Only disable it when the master sendPresence toggle is off (full privacy mode). getSlidingSyncManager(mx)?.setPresenceEnabled(sendPresence); - // Synapse MSC4186 sliding sync has no presence extension, so setSyncPresence has no - // effect. Explicitly PUT /presence/{userId}/status so the server knows the user's - // state β€” otherwise GET /presence returns stale offline and own presence badge is grey. - mx.setPresence({ presence: sendPresence ? 'online' : 'offline' }).catch(() => { + // Explicitly PUT /presence/{userId}/status so the server knows the exact state: + // - MSC4186 servers that have no presence extension see this immediately. + // - When 'offline' (Invisible mode), we appear offline to others but still receive + // their presence events because the extension is still enabled above. + mx.setPresence({ presence: effectiveState }).catch(() => { // Server doesn't support presence β€” ignore. }); - }, [mx, sendPresence]); + }, [mx, sendPresence, presenceMode]); return null; } @@ -851,11 +872,17 @@ function SettingsSyncFeature() { return null; } +function BookmarksFeature() { + useInitBookmarks(); + return null; +} + export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) { useCallSignaling(); return ( <> + diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index 31d4b1a5f..22ee02b34 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -40,7 +40,7 @@ import { getHomePath, getLoginPath, withSearchParam } from '$pages/pathUtils'; import { logoutClient, initClient, stopClient } from '$client/initMatrix'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useUserProfile } from '$hooks/useUserProfile'; -import { useUserPresence } from '$hooks/useUserPresence'; +import { Presence } from '$hooks/useUserPresence'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { useSessionProfiles } from '$hooks/useSessionProfiles'; import { useOpenSettings } from '$features/settings'; @@ -50,6 +50,8 @@ import { createLogger } from '$utils/debug'; import { createDebugLogger } from '$utils/debugLogger'; import { useClientConfig } from '$hooks/useClientConfig'; import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge'; +import { useSetting } from '$state/hooks/settings'; +import { settingsAtom } from '$state/settings'; const log = createLogger('AccountSwitcherTab'); const debugLog = createDebugLogger('AccountSwitcherTab'); @@ -175,7 +177,14 @@ export function AccountSwitcherTab() { const myUserId = mx.getUserId() ?? ''; const activeProfile = useUserProfile(myUserId); - const myPresence = useUserPresence(myUserId); + // Own presence badge is driven from settings state rather than the SDK's User object. + // The SDK won't echo your own presence back on MSC4186 sliding sync, so reading + // user.presence would leave the badge stuck at the SDK default forever. + const [sendPresence, setSendPresence] = useSetting(settingsAtom, 'sendPresence'); + const [presenceMode, setPresenceMode] = useSetting(settingsAtom, 'presenceMode'); + const myOwnPresence: Presence | undefined = sendPresence + ? ((presenceMode ?? 'online') as Presence) + : undefined; const activeAvatarUrl = activeProfile.avatarUrl ? (mxcUrlToHttp(mx, activeProfile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined) : undefined; @@ -275,9 +284,7 @@ export function AccountSwitcherTab() { {(triggerRef) => ( - ) : undefined + myOwnPresence ? : undefined } > Add Account + + Status + + {( + [ + { statusLabel: 'Online', presence: Presence.Online }, + { statusLabel: 'Away', presence: Presence.Unavailable }, + { statusLabel: 'Invisible', presence: Presence.Offline }, + ] as const + ).map(({ statusLabel, presence }) => { + const isSelected = sendPresence && (presenceMode ?? 'online') === presence; + return ( + } + after={ + isSelected ? ( + + ) : undefined + } + onClick={() => { + setPresenceMode(presence); + // Re-enable presence broadcasting if the master toggle was off + if (!sendPresence) setSendPresence(true); + }} + > + {statusLabel} + + ); + })} + Date: Sat, 11 Apr 2026 18:50:55 -0400 Subject: [PATCH 082/253] feat(presence): Discord-style presence picker with Idle, DND, and Invisible options --- src/app/hooks/useAppVisibility.ts | 222 ++++++++++++++++-- src/app/hooks/useUserPresence.ts | 2 +- src/app/pages/client/ClientNonUIFeatures.tsx | 9 +- .../client/sidebar/AccountSwitcherTab.tsx | 58 +++-- src/app/state/settings.ts | 2 +- 5 files changed, 251 insertions(+), 42 deletions(-) diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index 7fd5f2325..144f132a9 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -1,22 +1,102 @@ -import { useEffect } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import { MatrixClient } from '$types/matrix-sdk'; -import { useAtom } from 'jotai'; -import { togglePusher } from '../features/settings/notifications/PushNotifications'; +import { Session } from '$state/sessions'; import { appEvents } from '../utils/appEvents'; -import { useClientConfig } from './useClientConfig'; -import { useSetting } from '../state/hooks/settings'; -import { settingsAtom } from '../state/settings'; -import { pushSubscriptionAtom } from '../state/pushSubscription'; -import { mobileOrTablet } from '../utils/user-agent'; +import { useClientConfig, useExperimentVariant } from './useClientConfig'; import { createDebugLogger } from '../utils/debugLogger'; +import { pushSessionToSW } from '../../sw-session'; const debugLog = createDebugLogger('AppVisibility'); -export function useAppVisibility(mx: MatrixClient | undefined) { +const DEFAULT_FOREGROUND_DEBOUNCE_MS = 1500; +const DEFAULT_HEARTBEAT_INTERVAL_MS = 10 * 60 * 1000; +const DEFAULT_RESUME_HEARTBEAT_SUPPRESS_MS = 60 * 1000; +const DEFAULT_HEARTBEAT_MAX_BACKOFF_MS = 30 * 60 * 1000; + +export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: Session) { const clientConfig = useClientConfig(); - const [usePushNotifications] = useSetting(settingsAtom, 'usePushNotifications'); - const pushSubAtom = useAtom(pushSubscriptionAtom); - const isMobile = mobileOrTablet(); + + const sessionSyncConfig = clientConfig.sessionSync; + const sessionSyncVariant = useExperimentVariant('sessionSyncStrategy', activeSession?.userId); + + // Derive phase flags from experiment variant; fall back to direct config when not in experiment. + const inSessionSync = sessionSyncVariant.inExperiment; + const syncVariant = sessionSyncVariant.variant; + const phase1ForegroundResync = inSessionSync + ? syncVariant === 'session-sync-heartbeat' || syncVariant === 'session-sync-adaptive' + : sessionSyncConfig?.phase1ForegroundResync === true; + const phase2VisibleHeartbeat = inSessionSync + ? syncVariant === 'session-sync-heartbeat' || syncVariant === 'session-sync-adaptive' + : sessionSyncConfig?.phase2VisibleHeartbeat === true; + const phase3AdaptiveBackoffJitter = inSessionSync + ? syncVariant === 'session-sync-adaptive' + : sessionSyncConfig?.phase3AdaptiveBackoffJitter === true; + + const foregroundDebounceMs = Math.max( + 0, + sessionSyncConfig?.foregroundDebounceMs ?? DEFAULT_FOREGROUND_DEBOUNCE_MS + ); + const heartbeatIntervalMs = Math.max( + 1000, + sessionSyncConfig?.heartbeatIntervalMs ?? DEFAULT_HEARTBEAT_INTERVAL_MS + ); + const resumeHeartbeatSuppressMs = Math.max( + 0, + sessionSyncConfig?.resumeHeartbeatSuppressMs ?? DEFAULT_RESUME_HEARTBEAT_SUPPRESS_MS + ); + const heartbeatMaxBackoffMs = Math.max( + heartbeatIntervalMs, + sessionSyncConfig?.heartbeatMaxBackoffMs ?? DEFAULT_HEARTBEAT_MAX_BACKOFF_MS + ); + + const lastForegroundPushAtRef = useRef(0); + const suppressHeartbeatUntilRef = useRef(0); + const heartbeatFailuresRef = useRef(0); + + const pushSessionNow = useCallback( + (reason: 'foreground' | 'focus' | 'heartbeat'): 'sent' | 'skipped' => { + const baseUrl = activeSession?.baseUrl; + const accessToken = activeSession?.accessToken; + const userId = activeSession?.userId; + const canPush = + !!mx && + typeof baseUrl === 'string' && + typeof accessToken === 'string' && + typeof userId === 'string' && + 'serviceWorker' in navigator && + !!navigator.serviceWorker.controller; + + if (!canPush) { + debugLog.warn('network', 'Skipped SW session sync', { + reason, + hasClient: !!mx, + hasBaseUrl: !!baseUrl, + hasAccessToken: !!accessToken, + hasUserId: !!userId, + hasSwController: !!navigator.serviceWorker?.controller, + }); + return 'skipped'; + } + + pushSessionToSW(baseUrl, accessToken, userId); + debugLog.info('network', 'Pushed session to SW', { + reason, + phase1ForegroundResync, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + }); + return 'sent'; + }, + [ + activeSession?.accessToken, + activeSession?.baseUrl, + activeSession?.userId, + mx, + phase1ForegroundResync, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + ] + ); useEffect(() => { const handleVisibilityChange = () => { @@ -29,27 +109,129 @@ export function useAppVisibility(mx: MatrixClient | undefined) { appEvents.onVisibilityChange?.(isVisible); if (!isVisible) { appEvents.onVisibilityHidden?.(); + return; + } + + // Always kick the sync loop on foreground regardless of phase flags β€” + // the SDK may be sitting in exponential backoff after iOS froze the tab. + mx?.retryImmediately(); + + if (!phase1ForegroundResync) return; + + const now = Date.now(); + if (now - lastForegroundPushAtRef.current < foregroundDebounceMs) return; + lastForegroundPushAtRef.current = now; + + if (pushSessionNow('foreground') === 'sent') { + // A successful push proves the SW controller is up β€” reset adaptive backoff + // so the heartbeat returns to its normal interval immediately rather than + // staying on an inflated delay left over from a prior SW absence period. + if (phase3AdaptiveBackoffJitter) heartbeatFailuresRef.current = 0; + if (phase3AdaptiveBackoffJitter && phase2VisibleHeartbeat) { + suppressHeartbeatUntilRef.current = now + resumeHeartbeatSuppressMs; + } + } + }; + + const handleFocus = () => { + if (document.visibilityState !== 'visible') return; + + // Always kick the sync loop on focus for the same reason as above. + mx?.retryImmediately(); + + if (!phase1ForegroundResync) return; + + const now = Date.now(); + if (now - lastForegroundPushAtRef.current < foregroundDebounceMs) return; + lastForegroundPushAtRef.current = now; + + if (pushSessionNow('focus') === 'sent') { + if (phase3AdaptiveBackoffJitter) heartbeatFailuresRef.current = 0; + if (phase3AdaptiveBackoffJitter && phase2VisibleHeartbeat) { + suppressHeartbeatUntilRef.current = now + resumeHeartbeatSuppressMs; + } } }; document.addEventListener('visibilitychange', handleVisibilityChange); + window.addEventListener('focus', handleFocus); return () => { document.removeEventListener('visibilitychange', handleVisibilityChange); + window.removeEventListener('focus', handleFocus); }; - }, []); + }, [ + foregroundDebounceMs, + mx, + phase1ForegroundResync, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + pushSessionNow, + resumeHeartbeatSuppressMs, + ]); useEffect(() => { - if (!mx) return; + if (!phase2VisibleHeartbeat) return undefined; + + // Reset adaptive backoff/suppression so a config or session change starts fresh. + heartbeatFailuresRef.current = 0; + suppressHeartbeatUntilRef.current = 0; + + let timeoutId: number | undefined; + + const getDelayMs = (): number => { + let delay = heartbeatIntervalMs; + + if (phase3AdaptiveBackoffJitter) { + const failures = heartbeatFailuresRef.current; + const backoffFactor = Math.min(2 ** failures, heartbeatMaxBackoffMs / heartbeatIntervalMs); + delay = Math.min(heartbeatMaxBackoffMs, Math.round(heartbeatIntervalMs * backoffFactor)); + + // Add +-20% jitter to avoid synchronized heartbeat spikes across many clients. + const jitter = 0.8 + Math.random() * 0.4; + delay = Math.max(1000, Math.round(delay * jitter)); + } + + return delay; + }; + + const tick = () => { + const now = Date.now(); - const handleVisibilityForNotifications = (isVisible: boolean) => { - togglePusher(mx, clientConfig, isVisible, usePushNotifications, pushSubAtom, isMobile); + if (document.visibilityState !== 'visible' || !navigator.onLine) { + timeoutId = window.setTimeout(tick, getDelayMs()); + return; + } + + if (phase3AdaptiveBackoffJitter && now < suppressHeartbeatUntilRef.current) { + timeoutId = window.setTimeout(tick, getDelayMs()); + return; + } + + const result = pushSessionNow('heartbeat'); + if (phase3AdaptiveBackoffJitter) { + if (result === 'sent') { + heartbeatFailuresRef.current = 0; + } else { + // 'skipped' means prerequisites (SW controller, session) aren't ready. + // Treat as a transient failure so backoff grows until the SW is ready. + heartbeatFailuresRef.current += 1; + } + } + + timeoutId = window.setTimeout(tick, getDelayMs()); }; - appEvents.onVisibilityChange = handleVisibilityForNotifications; - // eslint-disable-next-line consistent-return + timeoutId = window.setTimeout(tick, getDelayMs()); + return () => { - appEvents.onVisibilityChange = null; + if (timeoutId !== undefined) window.clearTimeout(timeoutId); }; - }, [mx, clientConfig, usePushNotifications, pushSubAtom, isMobile]); + }, [ + heartbeatIntervalMs, + heartbeatMaxBackoffMs, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + pushSessionNow, + ]); } diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index 7e0f0e78b..8c9b85959 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -95,7 +95,7 @@ export const usePresenceLabel = (): Record => useMemo( () => ({ [Presence.Online]: 'Online', - [Presence.Unavailable]: 'Away', + [Presence.Unavailable]: 'Idle', [Presence.Offline]: 'Offline', }), [] diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 5da90e4dd..260f1dc28 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -846,7 +846,9 @@ function PresenceFeature() { useEffect(() => { // Effective broadcast state: honour presenceMode when presence is on, otherwise offline. - const effectiveState = sendPresence ? (presenceMode ?? 'online') : 'offline'; + // DND broadcasts as online (you're active but don't want to be disturbed) with a status_msg. + const activePresence = presenceMode === 'dnd' ? 'online' : (presenceMode ?? 'online'); + const effectiveState = sendPresence ? activePresence : 'offline'; const broadcasting = effectiveState !== 'offline'; // Classic sync: set_presence query param on every /sync poll. @@ -859,7 +861,10 @@ function PresenceFeature() { // - MSC4186 servers that have no presence extension see this immediately. // - When 'offline' (Invisible mode), we appear offline to others but still receive // their presence events because the extension is still enabled above. - mx.setPresence({ presence: effectiveState }).catch(() => { + mx.setPresence({ + presence: effectiveState, + status_msg: sendPresence && presenceMode === 'dnd' ? 'dnd' : '', + }).catch(() => { // Server doesn't support presence β€” ignore. }); }, [mx, sendPresence, presenceMode]); diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index 22ee02b34..395edcfe7 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -1,5 +1,6 @@ -import { MouseEvent, MouseEventHandler, useCallback, useState } from 'react'; +import { MouseEvent, MouseEventHandler, ReactNode, useCallback, useState } from 'react'; import { + Badge, Box, Button, Dialog, @@ -182,9 +183,16 @@ export function AccountSwitcherTab() { // user.presence would leave the badge stuck at the SDK default forever. const [sendPresence, setSendPresence] = useSetting(settingsAtom, 'sendPresence'); const [presenceMode, setPresenceMode] = useSetting(settingsAtom, 'presenceMode'); - const myOwnPresence: Presence | undefined = sendPresence - ? ((presenceMode ?? 'online') as Presence) - : undefined; + let myOwnPresenceBadge: ReactNode; + if (sendPresence) { + myOwnPresenceBadge = + presenceMode === 'dnd' ? ( + // DND: solid red badge (broadcasts as online with status_msg 'dnd') + + ) : ( + + ); + } const activeAvatarUrl = activeProfile.avatarUrl ? (mxcUrlToHttp(mx, activeProfile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined) : undefined; @@ -282,11 +290,7 @@ export function AccountSwitcherTab() { {(triggerRef) => ( - : undefined - } - > + {( [ - { statusLabel: 'Online', presence: Presence.Online }, - { statusLabel: 'Away', presence: Presence.Unavailable }, - { statusLabel: 'Invisible', presence: Presence.Offline }, + { label: 'Online', desc: undefined, mode: 'online' as const }, + { label: 'Idle', desc: undefined, mode: 'unavailable' as const }, + { label: 'Do Not Disturb', desc: undefined, mode: 'dnd' as const }, + { + label: 'Invisible', + desc: 'You will appear offline', + mode: 'offline' as const, + }, ] as const - ).map(({ statusLabel, presence }) => { - const isSelected = sendPresence && (presenceMode ?? 'online') === presence; + ).map(({ label: statusLabel, desc, mode }) => { + const isSelected = sendPresence && (presenceMode ?? 'online') === mode; + const badge = + mode === 'dnd' ? ( + + ) : ( + + ); return ( } + before={badge} after={ isSelected ? ( { - setPresenceMode(presence); + setPresenceMode(mode); // Re-enable presence broadcasting if the master toggle was off if (!sendPresence) setSendPresence(true); }} > - {statusLabel} + + {statusLabel} + {desc && ( + + {desc} + + )} + ); })} diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 56b0fba52..4538ae287 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -94,7 +94,7 @@ export interface Settings { // Sable features! sendPresence: boolean; /** Which Matrix presence state to broadcast when sendPresence is true. */ - presenceMode: 'online' | 'unavailable' | 'offline'; + presenceMode: 'online' | 'unavailable' | 'dnd' | 'offline'; mobileGestures: boolean; rightSwipeAction: RightSwipeAction; hideMembershipInReadOnly: boolean; From a71bdab9a4100c42acd42d6a9015ca38270550f0 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 21:49:38 -0400 Subject: [PATCH 083/253] feat(presence): auto-idle after inactivity timeout Adds an optional inactivity-based presence auto-idle that downgrades the user's broadcast presence from online to unavailable after a configurable period without keyboard or pointer input. ## How it works - New config flag `presenceAutoIdleTimeoutMs` (default: 600 000 ms = 10 min, 0 = disabled). Operators can adjust or disable via config.json. - New hook `usePresenceAutoIdle` sets `presenceAutoIdledAtom` (ephemeral, not persisted) after the timeout, and clears it immediately on any mousemove / mousedown / keydown / touchstart / wheel event. - `PresenceFeature` reads `autoIdled` and derives the effective broadcast mode: when auto-idled the broadcast is forced to `unavailable` regardless of the user's configured presenceMode, then restored on activity. - `AccountSwitcherTab` badge and picker reflect the effective mode so the UI is consistent with what is actually broadcasted. ## Multi-device sync If another device sets the user back to `online` (e.g. the user becomes active there), the `User.presence` event handler in `usePresenceAutoIdle` clears the auto-idle flag on this device too. ## iOS caveat Background tab throttling on iOS Safari PWA may delay or prevent the inactivity timer from firing reliably. The feature degrades gracefully: presence will eventually update when the tab regains focus. --- config.json | 2 + src/app/hooks/useClientConfig.ts | 2 + src/app/hooks/usePresenceAutoIdle.ts | 101 ++++++++++++++++++ src/app/pages/client/ClientNonUIFeatures.tsx | 28 ++--- .../client/sidebar/AccountSwitcherTab.tsx | 12 ++- src/app/state/settings.ts | 3 + 6 files changed, 132 insertions(+), 16 deletions(-) create mode 100644 src/app/hooks/usePresenceAutoIdle.ts diff --git a/config.json b/config.json index f0c3c8b61..b930f457e 100644 --- a/config.json +++ b/config.json @@ -19,6 +19,8 @@ "enabled": true }, + "presenceAutoIdleTimeoutMs": 600000, + "featuredCommunities": { "openAsDefault": false, "spaces": [ diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts index e523f15a7..0e7257532 100644 --- a/src/app/hooks/useClientConfig.ts +++ b/src/app/hooks/useClientConfig.ts @@ -43,6 +43,8 @@ export type ClientConfig = { matrixToBaseUrl?: string; settingsLinkBaseUrl?: string; + /** How long (ms) without input before auto-idling presence. 0 = disabled. */ + presenceAutoIdleTimeoutMs?: number; }; const ClientConfigContext = createContext(null); diff --git a/src/app/hooks/usePresenceAutoIdle.ts b/src/app/hooks/usePresenceAutoIdle.ts new file mode 100644 index 000000000..dd11e729b --- /dev/null +++ b/src/app/hooks/usePresenceAutoIdle.ts @@ -0,0 +1,101 @@ +import { useCallback, useEffect, useRef } from 'react'; +import { useSetAtom } from 'jotai'; +import { type MatrixClient, UserEvent, type UserEventHandlerMap } from '$types/matrix-sdk'; +import { presenceAutoIdledAtom } from '$state/settings'; +import { createDebugLogger } from '$utils/debugLogger'; + +const debugLog = createDebugLogger('PresenceAutoIdle'); +const ACTIVITY_EVENTS = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'wheel'] as const; + +/** + * Automatically transitions presence to idle after a configurable inactivity + * timeout, and clears the idle state when activity is detected. + * + * Also subscribes to the Matrix `User.presence` event so that if another device + * sets you back to `online`, the auto-idle state is cleared here too (multi-device + * sync). + * + * Note: On iOS Safari PWA, background tab throttling may delay or prevent the + * inactivity timer from firing reliably. The feature degrades gracefully β€” presence + * will eventually update when the tab regains focus. + */ +export function usePresenceAutoIdle( + mx: MatrixClient, + presenceMode: string, + sendPresence: boolean, + timeoutMs: number +): void { + const setAutoIdled = useSetAtom(presenceAutoIdledAtom); + const autoIdledRef = useRef(false); + const timerRef = useRef(undefined); + + const clearTimer = useCallback(() => { + if (timerRef.current !== undefined) { + window.clearTimeout(timerRef.current); + timerRef.current = undefined; + } + }, []); + + // Inactivity timer: go idle after timeoutMs without user input. + useEffect(() => { + const shouldAutoIdle = presenceMode === 'online' && sendPresence && timeoutMs > 0; + if (!shouldAutoIdle) { + clearTimer(); + if (autoIdledRef.current) { + autoIdledRef.current = false; + setAutoIdled(false); + } + return undefined; + } + + const goIdle = () => { + debugLog.info('general', 'Inactivity timeout β€” auto-idling'); + autoIdledRef.current = true; + setAutoIdled(true); + }; + + const handleActivity = () => { + clearTimer(); + if (autoIdledRef.current) { + debugLog.info('general', 'Activity detected β€” clearing auto-idle'); + autoIdledRef.current = false; + setAutoIdled(false); + } + timerRef.current = window.setTimeout(goIdle, timeoutMs); + }; + + // Start the initial timer. + timerRef.current = window.setTimeout(goIdle, timeoutMs); + ACTIVITY_EVENTS.forEach((ev) => + document.addEventListener(ev, handleActivity, { passive: true }) + ); + + return () => { + ACTIVITY_EVENTS.forEach((ev) => document.removeEventListener(ev, handleActivity)); + clearTimer(); + }; + }, [clearTimer, presenceMode, sendPresence, setAutoIdled, timeoutMs]); + + // Multi-device sync: if another device sets us back to online, clear auto-idle. + useEffect(() => { + if (!sendPresence) return undefined; + const myUserId = mx.getUserId(); + if (!myUserId) return undefined; + const user = mx.getUser(myUserId); + if (!user) return undefined; + + const handlePresence: UserEventHandlerMap[UserEvent.Presence] = (_event, u) => { + if (u.userId !== myUserId) return; + if (u.presence === 'online' && autoIdledRef.current) { + debugLog.info('general', 'Remote device set Online β€” clearing auto-idle'); + autoIdledRef.current = false; + setAutoIdled(false); + } + }; + + user.on(UserEvent.Presence, handlePresence); + return () => { + user.removeListener(UserEvent.Presence, handlePresence); + }; + }, [mx, sendPresence, setAutoIdled]); +} diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 260f1dc28..e4a8037ac 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -1,4 +1,4 @@ -import { useAtomValue, useSetAtom } from 'jotai'; +import { useAtomValue, useSetAtom, useAtom } from 'jotai'; import * as Sentry from '@sentry/react'; import { ReactNode, useCallback, useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -21,7 +21,9 @@ import NotificationSound from '$public/sound/notification.ogg'; import InviteSound from '$public/sound/invite.ogg'; import { notificationPermission, setFavicon } from '$utils/dom'; import { useSetting } from '$state/hooks/settings'; -import { settingsAtom } from '$state/settings'; +import { settingsAtom, presenceAutoIdledAtom } from '$state/settings'; +import { useClientConfig } from '$hooks/useClientConfig'; +import { usePresenceAutoIdle } from '$hooks/usePresenceAutoIdle'; import { nicknamesAtom } from '$state/nicknames'; import { mDirectAtom } from '$state/mDirectList'; import { allInvitesAtom } from '$state/room-list/inviteList'; @@ -56,7 +58,6 @@ import { useCallSignaling } from '$hooks/useCallSignaling'; import { getBlobCacheStats } from '$hooks/useBlobCache'; import { lastVisitedRoomIdAtom } from '$state/room/lastRoom'; import { useSettingsSyncEffect } from '$hooks/useSettingsSync'; -import { useInitBookmarks } from '$features/bookmarks/useInitBookmarks'; import { getInboxInvitesPath } from '../pathUtils'; import { BackgroundNotifications } from './BackgroundNotifications'; @@ -843,11 +844,18 @@ function PresenceFeature() { const mx = useMatrixClient(); const [sendPresence] = useSetting(settingsAtom, 'sendPresence'); const [presenceMode] = useSetting(settingsAtom, 'presenceMode'); + const [autoIdled] = useAtom(presenceAutoIdledAtom); + const clientConfig = useClientConfig(); + const timeoutMs = clientConfig.presenceAutoIdleTimeoutMs ?? 0; + + usePresenceAutoIdle(mx, presenceMode ?? 'online', sendPresence, timeoutMs); useEffect(() => { - // Effective broadcast state: honour presenceMode when presence is on, otherwise offline. + // When auto-idled, broadcast as unavailable regardless of the configured mode. + const effectiveMode = autoIdled ? 'unavailable' : (presenceMode ?? 'online'); + // Effective broadcast state: honour effectiveMode when presence is on, otherwise offline. // DND broadcasts as online (you're active but don't want to be disturbed) with a status_msg. - const activePresence = presenceMode === 'dnd' ? 'online' : (presenceMode ?? 'online'); + const activePresence = effectiveMode === 'dnd' ? 'online' : effectiveMode; const effectiveState = sendPresence ? activePresence : 'offline'; const broadcasting = effectiveState !== 'offline'; @@ -863,11 +871,11 @@ function PresenceFeature() { // their presence events because the extension is still enabled above. mx.setPresence({ presence: effectiveState, - status_msg: sendPresence && presenceMode === 'dnd' ? 'dnd' : '', + status_msg: sendPresence && effectiveMode === 'dnd' ? 'dnd' : '', }).catch(() => { // Server doesn't support presence β€” ignore. }); - }, [mx, sendPresence, presenceMode]); + }, [mx, sendPresence, presenceMode, autoIdled]); return null; } @@ -877,17 +885,11 @@ function SettingsSyncFeature() { return null; } -function BookmarksFeature() { - useInitBookmarks(); - return null; -} - export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) { useCallSignaling(); return ( <> - diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index 395edcfe7..737bcf7c4 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -52,7 +52,7 @@ import { createDebugLogger } from '$utils/debugLogger'; import { useClientConfig } from '$hooks/useClientConfig'; import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge'; import { useSetting } from '$state/hooks/settings'; -import { settingsAtom } from '$state/settings'; +import { settingsAtom, presenceAutoIdledAtom } from '$state/settings'; const log = createLogger('AccountSwitcherTab'); const debugLog = createDebugLogger('AccountSwitcherTab'); @@ -183,14 +183,18 @@ export function AccountSwitcherTab() { // user.presence would leave the badge stuck at the SDK default forever. const [sendPresence, setSendPresence] = useSetting(settingsAtom, 'sendPresence'); const [presenceMode, setPresenceMode] = useSetting(settingsAtom, 'presenceMode'); + const autoIdled = useAtomValue(presenceAutoIdledAtom); + const setAutoIdled = useSetAtom(presenceAutoIdledAtom); + // The effective mode for badge display: if auto-idled, show unavailable regardless of selected mode. + const effectiveDisplayMode = autoIdled ? 'unavailable' : (presenceMode ?? 'online'); let myOwnPresenceBadge: ReactNode; if (sendPresence) { myOwnPresenceBadge = - presenceMode === 'dnd' ? ( + effectiveDisplayMode === 'dnd' ? ( // DND: solid red badge (broadcasts as online with status_msg 'dnd') ) : ( - + ); } const activeAvatarUrl = activeProfile.avatarUrl @@ -413,6 +417,8 @@ export function AccountSwitcherTab() { } onClick={() => { setPresenceMode(mode); + // Clear auto-idle so the badge updates immediately on manual selection. + setAutoIdled(false); // Re-enable presence broadcasting if the master toggle was off if (!sendPresence) setSendPresence(true); }} diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 4538ae287..0d4c16bc8 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -265,3 +265,6 @@ export const settingsAtom = atom( setSettings(update); } ); + +/** Ephemeral (not persisted) β€” true when auto-idled due to inactivity. */ +export const presenceAutoIdledAtom = atom(false); From ca97c9bc83b661fc2c8513f14e2da4a37280fa53 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 12:10:29 -0400 Subject: [PATCH 084/253] chore: add changeset for presence-auto-idle --- .changeset/presence-auto-idle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/presence-auto-idle.md diff --git a/.changeset/presence-auto-idle.md b/.changeset/presence-auto-idle.md new file mode 100644 index 000000000..0cdedfdac --- /dev/null +++ b/.changeset/presence-auto-idle.md @@ -0,0 +1,5 @@ +--- +'@sable/client': minor +--- + +feat(presence): add auto-idle presence after configurable inactivity timeout with Discord-style status picker From 594fda08df6860d9909cc4ea218ab6419c92512f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 14:52:58 -0400 Subject: [PATCH 085/253] fix(bookmarks): strip deleted flag on re-add to guarantee re-activation --- .../bookmarks/bookmarkRepository.test.ts | 29 +++++++++++++++++++ .../features/bookmarks/bookmarkRepository.ts | 11 +++++-- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/src/app/features/bookmarks/bookmarkRepository.test.ts b/src/app/features/bookmarks/bookmarkRepository.test.ts index 3eeaaca65..54e3d85b8 100644 --- a/src/app/features/bookmarks/bookmarkRepository.test.ts +++ b/src/app/features/bookmarks/bookmarkRepository.test.ts @@ -141,6 +141,35 @@ describe('addBookmark', () => { const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent; expect(idx.bookmark_ids).toContain(item.bookmark_id); }); + + it('re-activates a tombstoned bookmark (strips deleted: true)', async () => { + const tombstoned = makeItem({ deleted: true }); + const mx2 = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [] }), + [bookmarkItemEventType(tombstoned.bookmark_id)]: tombstoned, + }); + + // Re-add with a fresh item (same bookmark_id, no deleted flag) + const freshItem = makeItem(); + await addBookmark(mx2, freshItem); + + const stored = (mx2 as any)._store[ + bookmarkItemEventType(freshItem.bookmark_id) + ] as BookmarkItemContent; + expect(stored.deleted).toBeUndefined(); + const idx = (mx2 as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent; + expect(idx.bookmark_ids).toContain(freshItem.bookmark_id); + }); + + it('strips deleted: true even when the item passed in carries the flag', async () => { + const item = makeItem({ deleted: true }); + await addBookmark(mx, item); + + const stored = (mx as any)._store[ + bookmarkItemEventType(item.bookmark_id) + ] as BookmarkItemContent; + expect(stored.deleted).toBeUndefined(); + }); }); // --------------------------------------------------------------------------- diff --git a/src/app/features/bookmarks/bookmarkRepository.ts b/src/app/features/bookmarks/bookmarkRepository.ts index d1a30370d..241430e76 100644 --- a/src/app/features/bookmarks/bookmarkRepository.ts +++ b/src/app/features/bookmarks/bookmarkRepository.ts @@ -44,17 +44,22 @@ async function writeItem(mx: MatrixClient, item: BookmarkItemContent): Promise { + // Strip deleted so that re-bookmarking a previously removed message always + // produces an active item, even if a stale tombstoned item is passed in. + const { deleted, ...activeItem } = item; // Write item before updating index (cross-device consistency) - await writeItem(mx, item); + await writeItem(mx, activeItem as BookmarkItemContent); const index = readIndex(mx); if (!index.bookmark_ids.includes(item.bookmark_id)) { From 31441add1d6a7ce0d2e553be855a8e787f3eb88a Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 15:15:01 -0400 Subject: [PATCH 086/253] feat(bookmarks): show Recently Removed section with Restore button --- .../bookmarks/bookmarkRepository.test.ts | 77 ++++++++++++++++++- .../features/bookmarks/bookmarkRepository.ts | 39 ++++++++++ src/app/features/bookmarks/useBookmarks.ts | 47 +++++++++-- .../features/bookmarks/useInitBookmarks.ts | 8 +- .../pages/client/bookmarks/BookmarksList.tsx | 70 ++++++++++++++++- src/app/state/bookmarks.ts | 7 ++ 6 files changed, 235 insertions(+), 13 deletions(-) diff --git a/src/app/features/bookmarks/bookmarkRepository.test.ts b/src/app/features/bookmarks/bookmarkRepository.test.ts index 54e3d85b8..d9724cf67 100644 --- a/src/app/features/bookmarks/bookmarkRepository.test.ts +++ b/src/app/features/bookmarks/bookmarkRepository.test.ts @@ -8,7 +8,13 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'; import type { MatrixClient } from '$types/matrix-sdk'; import { AccountDataEvent } from '$types/matrix/accountData'; -import { addBookmark, removeBookmark, listBookmarks, isBookmarked } from './bookmarkRepository'; +import { + addBookmark, + removeBookmark, + listBookmarks, + listDeletedBookmarks, + isBookmarked, +} from './bookmarkRepository'; import { bookmarkItemEventType, emptyIndex, @@ -366,6 +372,75 @@ describe('listBookmarks', () => { }); }); +// --------------------------------------------------------------------------- +// listDeletedBookmarks +// --------------------------------------------------------------------------- + +describe('listDeletedBookmarks', () => { + it('returns an empty array when there are no tombstoned items', () => { + const item = makeItem(); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + expect(listDeletedBookmarks(mx)).toEqual([]); + }); + + it('returns index-referenced items that are tombstoned (partial remove failure)', () => { + const item = makeItem({ deleted: true }); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + const result = listDeletedBookmarks(mx); + expect(result).toHaveLength(1); + expect(result[0].bookmark_id).toBe(item.bookmark_id); + }); + + it('returns orphan tombstones not in the index (normal remove path)', () => { + const item = makeItem({ bookmark_id: 'bmk_orphan99', deleted: true }); + const mx = makeClient({ + // ID intentionally absent from the index + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [] }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + const result = listDeletedBookmarks(mx); + expect(result).toHaveLength(1); + expect(result[0].bookmark_id).toBe(item.bookmark_id); + }); + + it('does not return active (non-deleted) items', () => { + const active = makeItem(); + const deleted = makeItem({ bookmark_id: 'bmk_deleted1', deleted: true }); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [active.bookmark_id] }), + [bookmarkItemEventType(active.bookmark_id)]: active, + [bookmarkItemEventType(deleted.bookmark_id)]: deleted, + }); + const result = listDeletedBookmarks(mx); + expect(result.map((i) => i.bookmark_id)).not.toContain(active.bookmark_id); + expect(result.map((i) => i.bookmark_id)).toContain(deleted.bookmark_id); + }); + + it('deduplicates when the same ID appears in both index and orphan scan', () => { + const item = makeItem({ deleted: true }); + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }), + [bookmarkItemEventType(item.bookmark_id)]: item, + }); + const result = listDeletedBookmarks(mx); + expect(result).toHaveLength(1); + }); + + it('skips malformed item events even if deleted: true', () => { + const mx = makeClient({ + [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [] }), + [bookmarkItemEventType('bmk_bad')]: { deleted: true, not_valid: 'junk' }, + }); + expect(listDeletedBookmarks(mx)).toEqual([]); + }); +}); + // --------------------------------------------------------------------------- // isBookmarked // --------------------------------------------------------------------------- diff --git a/src/app/features/bookmarks/bookmarkRepository.ts b/src/app/features/bookmarks/bookmarkRepository.ts index 241430e76..bd9cda928 100644 --- a/src/app/features/bookmarks/bookmarkRepository.ts +++ b/src/app/features/bookmarks/bookmarkRepository.ts @@ -146,6 +146,45 @@ export function listBookmarks(mx: MatrixClient): BookmarkItemContent[] { return items; } +/** + * List all deleted (tombstoned) bookmark items. + * + * Includes both: + * - Items still referenced in the index whose item event carries deleted: true + * (arises when the index write fails after a soft-delete). + * - Orphaned tombstones whose ID has already been removed from the index + * (the normal case after a successful remove). + * + * Results are deduplicated and include only items that pass isValidBookmarkItem + * (ensuring enough stored metadata is available to display and restore them). + */ +export function listDeletedBookmarks(mx: MatrixClient): BookmarkItemContent[] { + const index = readIndex(mx); + const results: BookmarkItemContent[] = []; + const seen = new Set(); + + // 1. Index-referenced items that are tombstoned (partial remove failure) + index.bookmark_ids.forEach((id) => { + if (seen.has(id)) return; + seen.add(id); + const content = mx.getAccountData(bookmarkItemEventType(id) as any)?.getContent(); + if (isValidBookmarkItem(content) && content.deleted === true) results.push(content); + }); + + // 2. Orphan tombstones (properly removed from index but item event persists) + const prefix = AccountDataEvent.BookmarkItemPrefix as string; + Array.from(mx.store.accountData.keys()).forEach((key) => { + if (!key.startsWith(prefix)) return; + const bookmarkId = key.slice(prefix.length); + if (seen.has(bookmarkId)) return; + seen.add(bookmarkId); + const content = mx.getAccountData(key as any)?.getContent(); + if (isValidBookmarkItem(content) && content.deleted === true) results.push(content); + }); + + return results; +} + /** * Check whether a specific bookmark ID is in the index. * diff --git a/src/app/features/bookmarks/useBookmarks.ts b/src/app/features/bookmarks/useBookmarks.ts index aadd0bb8f..df9346dfd 100644 --- a/src/app/features/bookmarks/useBookmarks.ts +++ b/src/app/features/bookmarks/useBookmarks.ts @@ -1,15 +1,31 @@ import { useAtomValue, useSetAtom } from 'jotai'; import { useCallback } from 'react'; import { useMatrixClient } from '$hooks/useMatrixClient'; -import { bookmarkIdSetAtom, bookmarkListAtom, bookmarkLoadingAtom } from '$state/bookmarks'; +import { + bookmarkDeletedListAtom, + bookmarkIdSetAtom, + bookmarkListAtom, + bookmarkLoadingAtom, +} from '$state/bookmarks'; import { BookmarkItemContent, computeBookmarkId } from './bookmarkDomain'; -import { addBookmark, removeBookmark, listBookmarks, isBookmarked } from './bookmarkRepository'; +import { + addBookmark, + listBookmarks, + listDeletedBookmarks, + removeBookmark, + isBookmarked, +} from './bookmarkRepository'; /** Returns the current ordered bookmark list. */ export function useBookmarkList(): BookmarkItemContent[] { return useAtomValue(bookmarkListAtom); } +/** Returns deleted (tombstoned) bookmarks that can be restored. */ +export function useBookmarkDeletedList(): BookmarkItemContent[] { + return useAtomValue(bookmarkDeletedListAtom); +} + /** Returns true while a bookmark refresh is in progress. */ export function useBookmarkLoading(): boolean { return useAtomValue(bookmarkLoadingAtom); @@ -35,28 +51,30 @@ export function useIsBookmarked(roomId: string, eventId: string): boolean { export function useBookmarkActions() { const mx = useMatrixClient(); const setList = useSetAtom(bookmarkListAtom); + const setDeletedList = useSetAtom(bookmarkDeletedListAtom); const setLoading = useSetAtom(bookmarkLoadingAtom); const refresh = useCallback(async () => { setLoading(true); try { - const items = listBookmarks(mx); - setList(items); + setList(listBookmarks(mx)); + setDeletedList(listDeletedBookmarks(mx)); } finally { setLoading(false); } - }, [mx, setList, setLoading]); + }, [mx, setList, setDeletedList, setLoading]); const add = useCallback( async (item: BookmarkItemContent) => { - // Optimistic update + // Optimistic update: add to active list, remove from deleted list setList((prev) => { if (prev.some((b) => b.bookmark_id === item.bookmark_id)) return prev; return [item, ...prev]; }); + setDeletedList((prev) => prev.filter((b) => b.bookmark_id !== item.bookmark_id)); await addBookmark(mx, item); }, - [mx, setList] + [mx, setList, setDeletedList] ); const remove = useCallback( @@ -68,11 +86,24 @@ export function useBookmarkActions() { [mx, setList] ); + const restore = useCallback( + async (item: BookmarkItemContent) => { + // Optimistic update: move from deleted list to active list + setDeletedList((prev) => prev.filter((b) => b.bookmark_id !== item.bookmark_id)); + setList((prev) => { + if (prev.some((b) => b.bookmark_id === item.bookmark_id)) return prev; + return [item, ...prev]; + }); + await addBookmark(mx, item); // strips deleted flag + }, + [mx, setList, setDeletedList] + ); + const checkIsBookmarked = useCallback( (roomId: string, eventId: string): boolean => isBookmarked(mx, computeBookmarkId(roomId, eventId)), [mx] ); - return { refresh, add, remove, checkIsBookmarked }; + return { refresh, add, remove, restore, checkIsBookmarked }; } diff --git a/src/app/features/bookmarks/useInitBookmarks.ts b/src/app/features/bookmarks/useInitBookmarks.ts index 40175ce58..3b6cb2247 100644 --- a/src/app/features/bookmarks/useInitBookmarks.ts +++ b/src/app/features/bookmarks/useInitBookmarks.ts @@ -4,9 +4,9 @@ import { useSetAtom } from 'jotai'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useSyncState } from '$hooks/useSyncState'; import { useAccountDataCallback } from '$hooks/useAccountDataCallback'; -import { bookmarkListAtom, bookmarkLoadingAtom } from '$state/bookmarks'; +import { bookmarkDeletedListAtom, bookmarkListAtom, bookmarkLoadingAtom } from '$state/bookmarks'; import { AccountDataEvent } from '$types/matrix/accountData'; -import { listBookmarks } from './bookmarkRepository'; +import { listBookmarks, listDeletedBookmarks } from './bookmarkRepository'; /** * Top-level hook that keeps `bookmarkListAtom` in sync with account data. @@ -24,16 +24,18 @@ import { listBookmarks } from './bookmarkRepository'; export function useInitBookmarks(): void { const mx = useMatrixClient(); const setList = useSetAtom(bookmarkListAtom); + const setDeletedList = useSetAtom(bookmarkDeletedListAtom); const setLoading = useSetAtom(bookmarkLoadingAtom); const loadBookmarks = useCallback(() => { setLoading(true); try { setList(listBookmarks(mx)); + setDeletedList(listDeletedBookmarks(mx)); } finally { setLoading(false); } - }, [mx, setList, setLoading]); + }, [mx, setList, setDeletedList, setLoading]); // Immediate load: fires once on mount to cover the case where ClientNonUIFeatures // mounts after the initial SyncState.Syncing transition has already fired. diff --git a/src/app/pages/client/bookmarks/BookmarksList.tsx b/src/app/pages/client/bookmarks/BookmarksList.tsx index 6dae4fb5c..562a4920c 100644 --- a/src/app/pages/client/bookmarks/BookmarksList.tsx +++ b/src/app/pages/client/bookmarks/BookmarksList.tsx @@ -48,6 +48,7 @@ import { stopPropagation } from '$utils/keyboard'; import { BookmarkItemContent } from '$features/bookmarks/bookmarkDomain'; import { useBookmarkActions, + useBookmarkDeletedList, useBookmarkList, useBookmarkLoading, } from '$features/bookmarks/useBookmarks'; @@ -298,6 +299,45 @@ function BookmarkResultGroup({ ); } +// --------------------------------------------------------------------------- +// RemovedBookmarkRow +// --------------------------------------------------------------------------- + +type RemovedBookmarkRowProps = { + item: BookmarkItemContent; + onRestore: (item: BookmarkItemContent) => void; +}; + +function RemovedBookmarkRow({ item, onRestore }: RemovedBookmarkRowProps) { + const mx = useMatrixClient(); + const room = mx.getRoom(item.room_id) ?? undefined; + const roomName = room?.name ?? item.room_name ?? item.room_id; + + return ( + + + + + {roomName} + + {item.body_preview && ( + + {item.body_preview} + + )} + + onRestore(item)} variant="Secondary" radii="400"> + Restore + + + + ); +} + // --------------------------------------------------------------------------- // BookmarkFilterInput // --------------------------------------------------------------------------- @@ -379,8 +419,9 @@ export function BookmarksList() { const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString'); const bookmarks = useBookmarkList(); + const deletedBookmarks = useBookmarkDeletedList(); const loading = useBookmarkLoading(); - const { remove } = useBookmarkActions(); + const { remove, restore } = useBookmarkActions(); const [filterTerm, setFilterTerm] = useState(); const [removingItem, setRemovingItem] = useState(); @@ -432,6 +473,13 @@ export function BookmarksList() { setRemovingItem(undefined); }, [removingItem, remove]); + const handleRestore = useCallback( + async (item: BookmarkItemContent) => { + await restore(item); + }, + [restore] + ); + const handleFilter = useCallback((term: string) => { setFilterTerm(term); }, []); @@ -530,6 +578,26 @@ export function BookmarksList() { ))} )} + + {deletedBookmarks.length > 0 && !filterTerm && ( + + +
+ + Recently Removed + +
+ + {deletedBookmarks.map((item) => ( + + ))} + + + )} diff --git a/src/app/state/bookmarks.ts b/src/app/state/bookmarks.ts index 7a2375691..4d6c2b19f 100644 --- a/src/app/state/bookmarks.ts +++ b/src/app/state/bookmarks.ts @@ -4,6 +4,13 @@ import { BookmarkItemContent } from '../features/bookmarks/bookmarkDomain'; /** Ordered list of active bookmark items (mirrors the server index order). */ export const bookmarkListAtom = atom([]); +/** + * Ordered list of deleted (tombstoned) bookmark items that are recoverable. + * Populated alongside bookmarkListAtom so the UI can show a "Recently Removed" + * section with a Restore button for each entry. + */ +export const bookmarkDeletedListAtom = atom([]); + /** True while a refresh from account data is in progress. */ export const bookmarkLoadingAtom = atom(false); From d8da8691bea10b1c57bdf90a4f0fbe993fa7b8eb Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 17:29:09 -0400 Subject: [PATCH 087/253] fix: auto-format poll test imports for prettier compliance --- src/app/features/room/poll/pollEvent.test.ts | 25 +++++--------------- 1 file changed, 6 insertions(+), 19 deletions(-) diff --git a/src/app/features/room/poll/pollEvent.test.ts b/src/app/features/room/poll/pollEvent.test.ts index b431d7b3e..f962a4a6a 100644 --- a/src/app/features/room/poll/pollEvent.test.ts +++ b/src/app/features/room/poll/pollEvent.test.ts @@ -1,11 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import type { Room, MatrixEvent } from '$types/matrix-sdk'; -import { - extractPollData, - extractVoteSelections, - computeTally, - formatExpiry, -} from './PollEvent'; +import { extractPollData, extractVoteSelections, computeTally, formatExpiry } from './PollEvent'; // --------------------------------------------------------------------------- // Helpers @@ -106,10 +101,7 @@ function makeEndEvent(sender: string, ts: number): MatrixEvent { * Build a minimal fake Room whose `relations.getAllChildEventsForEvent` returns * the provided child events. */ -function makeRoom( - childEvents: MatrixEvent[], - maySendRedaction = false -): Room { +function makeRoom(childEvents: MatrixEvent[], maySendRedaction = false): Room { return { getUnfilteredTimelineSet: () => ({ relations: { @@ -235,14 +227,7 @@ describe('computeTally', () => { const children = [makeResponseEvent('@alice:test', ['ans-red'], 2_000)]; const room = makeRoom(children); - const { tally, isEnded } = computeTally( - room, - '$poll:test', - pollStart, - ANSWERS, - 1, - MY_USER_ID - ); + const { tally, isEnded } = computeTally(room, '$poll:test', pollStart, ANSWERS, 1, MY_USER_ID); expect(isEnded).toBe(false); expect(tally.get('ans-red')?.size).toBe(1); @@ -346,7 +331,9 @@ describe('computeTally', () => { it('ignores decryption-failure response events', () => { const pollStart = makePollStartEvent('$poll:test'); - const children = [makeResponseEvent('@alice:test', ['ans-red'], 2_000, /* decryptFailure= */ true)]; + const children = [ + makeResponseEvent('@alice:test', ['ans-red'], 2_000, /* decryptFailure= */ true), + ]; const room = makeRoom(children); const { tally } = computeTally(room, '$poll:test', pollStart, ANSWERS, 1, MY_USER_ID); From 4a15b741d59f89cdbb05412f43e585a04b16c3e0 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 17:30:26 -0400 Subject: [PATCH 088/253] fix: remove unused params from mock Room callbacks --- src/app/features/room/poll/pollEvent.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/features/room/poll/pollEvent.test.ts b/src/app/features/room/poll/pollEvent.test.ts index f962a4a6a..e4cce28ff 100644 --- a/src/app/features/room/poll/pollEvent.test.ts +++ b/src/app/features/room/poll/pollEvent.test.ts @@ -105,11 +105,11 @@ function makeRoom(childEvents: MatrixEvent[], maySendRedaction = false): Room { return { getUnfilteredTimelineSet: () => ({ relations: { - getAllChildEventsForEvent: (_id: string) => childEvents, + getAllChildEventsForEvent: () => childEvents, }, }), currentState: { - maySendRedactionForEvent: (_event: MatrixEvent, _sender: string) => maySendRedaction, + maySendRedactionForEvent: () => maySendRedaction, }, } as unknown as Room; } From b0a809105f0bfcdd88e59d0bfab9252e48055733 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 17:33:26 -0400 Subject: [PATCH 089/253] fix(security): block prototype-polluting keys in deepMerge --- scripts/inject-client-config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scripts/inject-client-config.js b/scripts/inject-client-config.js index b7c62c096..0b5fcd3ad 100644 --- a/scripts/inject-client-config.js +++ b/scripts/inject-client-config.js @@ -15,11 +15,15 @@ const formatError = (error) => { const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value); +// Keys that could trigger prototype pollution via bracket assignment. +const UNSAFE_KEYS = new Set(['__proto__', 'constructor', 'prototype']); + const deepMerge = (target, source) => { if (!isPlainObject(target) || !isPlainObject(source)) return source; const merged = { ...target }; Object.entries(source).forEach(([key, value]) => { + if (UNSAFE_KEYS.has(key)) return; const targetValue = merged[key]; merged[key] = isPlainObject(targetValue) && isPlainObject(value) ? deepMerge(targetValue, value) : value; From 264e4ab9fab61345967318d64397a28ffe78aae6 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 17:47:21 -0400 Subject: [PATCH 090/253] fix(presence): restore missing experiment config helpers and clean presence hook tests --- .../settings/developer-tools/DevelopTools.tsx | 2 - src/app/hooks/useClientConfig.ts | 94 +++++++++++++++++++ src/app/hooks/useUserPresence.test.tsx | 72 +++++++------- 3 files changed, 132 insertions(+), 36 deletions(-) diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index a499faf9c..4e38f7868 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -14,7 +14,6 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { SettingsSectionPage } from '../SettingsSectionPage'; import { AccountData } from './AccountData'; import { SyncDiagnostics } from './SyncDiagnostics'; -import { ExperimentsPanel } from './ExperimentsPanel'; import { DebugLogViewer } from './DebugLogViewer'; import { SentrySettings } from './SentrySettings'; @@ -139,7 +138,6 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp )} {developerTools && } - {developerTools && } {developerTools && ( Encryption diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts index 0e7257532..3f5568e80 100644 --- a/src/app/hooks/useClientConfig.ts +++ b/src/app/hooks/useClientConfig.ts @@ -5,6 +5,31 @@ export type HashRouterConfig = { basename?: string; }; +export type ExperimentConfig = { + enabled?: boolean; + rolloutPercentage?: number; + variants?: string[]; + controlVariant?: string; +}; + +export type ExperimentSelection = { + key: string; + enabled: boolean; + rolloutPercentage: number; + variant: string; + inExperiment: boolean; +}; + +export type SessionSyncConfig = { + phase1ForegroundResync?: boolean; + phase2VisibleHeartbeat?: boolean; + phase3AdaptiveBackoffJitter?: boolean; + foregroundDebounceMs?: number; + heartbeatIntervalMs?: number; + resumeHeartbeatSuppressMs?: number; + heartbeatMaxBackoffMs?: number; +}; + export type ClientConfig = { defaultHomeserver?: number; homeserverList?: string[]; @@ -14,6 +39,8 @@ export type ClientConfig = { disableAccountSwitcher?: boolean; hideUsernamePasswordFields?: boolean; + experiments?: Record; + pushNotificationDetails?: { pushNotifyUrl?: string; vapidPublicKey?: string; @@ -43,6 +70,7 @@ export type ClientConfig = { matrixToBaseUrl?: string; settingsLinkBaseUrl?: string; + sessionSync?: SessionSyncConfig; /** How long (ms) without input before auto-idling presence. 0 = disabled. */ presenceAutoIdleTimeoutMs?: number; }; @@ -57,6 +85,72 @@ export function useClientConfig(): ClientConfig { return config; } +const DEFAULT_CONTROL_VARIANT = 'control'; + +const normalizeRolloutPercentage = (value?: number): number => { + if (typeof value !== 'number' || Number.isNaN(value)) return 100; + if (value < 0) return 0; + if (value > 100) return 100; + return value; +}; + +const hashToUInt32 = (input: string): number => { + let hash = 0; + for (let index = 0; index < input.length; index += 1) { + hash = (hash * 131 + input.charCodeAt(index)) % 4294967291; + } + return hash; +}; + +export const selectExperimentVariant = ( + key: string, + experiment: ExperimentConfig | undefined, + subjectId: string | undefined +): ExperimentSelection => { + const controlVariant = experiment?.controlVariant ?? DEFAULT_CONTROL_VARIANT; + const variants = (experiment?.variants?.filter((variant) => variant.length > 0) ?? []).filter( + (variant) => variant !== controlVariant + ); + const enabled = experiment?.enabled === true; + const rolloutPercentage = normalizeRolloutPercentage(experiment?.rolloutPercentage); + + if (!enabled || !subjectId || variants.length === 0 || rolloutPercentage === 0) { + return { + key, + enabled, + rolloutPercentage, + variant: controlVariant, + inExperiment: false, + }; + } + + const rolloutBucket = hashToUInt32(`${key}:rollout:${subjectId}`) % 10000; + const rolloutCutoff = Math.floor(rolloutPercentage * 100); + if (rolloutBucket >= rolloutCutoff) { + return { + key, + enabled, + rolloutPercentage, + variant: controlVariant, + inExperiment: false, + }; + } + + const variantIndex = hashToUInt32(`${key}:variant:${subjectId}`) % variants.length; + return { + key, + enabled, + rolloutPercentage, + variant: variants[variantIndex], + inExperiment: true, + }; +}; + +export const useExperimentVariant = (key: string, subjectId?: string): ExperimentSelection => { + const clientConfig = useClientConfig(); + return selectExperimentVariant(key, clientConfig.experiments?.[key], subjectId); +}; + export const clientDefaultServer = (clientConfig: ClientConfig): string => clientConfig.homeserverList?.[clientConfig.defaultHomeserver ?? 0] ?? 'matrix.org'; diff --git a/src/app/hooks/useUserPresence.test.tsx b/src/app/hooks/useUserPresence.test.tsx index 125629137..c311563b6 100644 --- a/src/app/hooks/useUserPresence.test.tsx +++ b/src/app/hooks/useUserPresence.test.tsx @@ -6,21 +6,25 @@ import { useUserPresence, Presence } from './useUserPresence'; // Each test can override mockUser / mockGetPresence as needed. let mockUser: ReturnType | null = null; -let mockGetPresence: ReturnType; - -vi.mock('$hooks/useMatrixClient', () => ({ - useMatrixClient: () => mockMx, -})); +type PresenceResponse = { + presence: string; + status_msg?: string; + currently_active?: boolean; + last_active_ago?: number | null; +}; +let mockGetPresence: () => Promise; // Listeners registered via user.on() – captured so tests can emit events. const userListeners = new Map void)[]>(); -const makeMockUser = (opts: { - presence?: string; - presenceStatusMsg?: string | undefined; - currentlyActive?: boolean; - lastActiveTs?: number; -} = {}) => ({ +const makeMockUser = ( + opts: { + presence?: string; + presenceStatusMsg?: string | undefined; + currentlyActive?: boolean; + lastActiveTs?: number; + } = {} +) => ({ userId: '@alice:test', presence: opts.presence ?? 'online', presenceStatusMsg: opts.presenceStatusMsg, @@ -36,26 +40,22 @@ const makeMockUser = (opts: { const mockMx = { getUser: vi.fn((): ReturnType | null => mockUser), - getPresence: vi.fn( - (): Promise<{ - presence: string; - status_msg?: string; - currently_active?: boolean; - last_active_ago?: number | null; - }> => - mockGetPresence() - ), + getPresence: vi.fn((): Promise => mockGetPresence()), on: vi.fn(), removeListener: vi.fn(), }; +vi.mock('$hooks/useMatrixClient', () => ({ + useMatrixClient: () => mockMx, +})); + const USER_ID = '@alice:test'; beforeEach(() => { vi.clearAllMocks(); userListeners.clear(); mockUser = null; - mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); // pending by default + mockGetPresence = () => new Promise(() => {}); // pending by default mockMx.getUser.mockImplementation(() => mockUser); mockMx.getPresence.mockImplementation(() => mockGetPresence()); }); @@ -91,9 +91,10 @@ describe('useUserPresence', () => { currently_active?: boolean; last_active_ago?: number; }) => void; - mockGetPresence = vi - .fn() - .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + mockGetPresence = () => + new Promise((res) => { + resolvePresence = res; + }); const { result } = renderHook(() => useUserPresence(USER_ID)); @@ -116,9 +117,10 @@ describe('useUserPresence', () => { it('fires the REST fallback when user object does not exist yet', async () => { // user is null β€” REST should still be requested let resolvePresence!: (v: { presence: string }) => void; - mockGetPresence = vi - .fn() - .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + mockGetPresence = () => + new Promise((res) => { + resolvePresence = res; + }); const { result } = renderHook(() => useUserPresence(USER_ID)); @@ -140,9 +142,11 @@ describe('useUserPresence', () => { it('ignores the REST response after the component unmounts (cancelled flag)', async () => { let resolvePresence!: (v: { presence: string }) => void; - mockGetPresence = vi - .fn() - .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + mockGetPresence = vi.fn().mockReturnValue( + new Promise((res) => { + resolvePresence = res; + }) + ); const { result, unmount } = renderHook(() => useUserPresence(USER_ID)); unmount(); @@ -157,12 +161,12 @@ describe('useUserPresence', () => { it('updates presence when UserEvent.Presence fires on the user object', () => { mockUser = makeMockUser({ presence: 'online', lastActiveTs: 1000 }); - mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); + mockGetPresence = () => new Promise(() => {}); const { result } = renderHook(() => useUserPresence(USER_ID)); // Mutate mock user to simulate a presence change, then fire the registered listener - mockUser!.presence = 'unavailable'; + mockUser.presence = 'unavailable'; const handlers = userListeners.get('User.presence') ?? []; act(() => { @@ -174,7 +178,7 @@ describe('useUserPresence', () => { it('resets to undefined when userId changes to a user not in the SDK', () => { mockUser = makeMockUser({ presence: 'online', lastActiveTs: 1000 }); - mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); + mockGetPresence = () => new Promise(() => {}); const { result, rerender } = renderHook(({ uid }) => useUserPresence(uid), { initialProps: { uid: USER_ID }, @@ -190,7 +194,7 @@ describe('useUserPresence', () => { }); it('silently ignores a REST error (presence not supported on this server)', async () => { - mockGetPresence = vi.fn().mockReturnValue(Promise.reject(new Error('404 Not Found'))); + mockGetPresence = () => Promise.reject(new Error('404 Not Found')); const { result } = renderHook(() => useUserPresence(USER_ID)); From 878f2fcd2221ac0357f3281145b6473434d0334b Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 17:51:05 -0400 Subject: [PATCH 091/253] fix(presence): resolve missing deps and stabilize presence hook tests --- .../settings/developer-tools/DevelopTools.tsx | 2 - src/app/hooks/useClientConfig.ts | 94 +++++++++++++++++++ src/app/hooks/useUserPresence.test.tsx | 72 +++++++------- src/app/pages/client/ClientNonUIFeatures.tsx | 7 -- 4 files changed, 132 insertions(+), 43 deletions(-) diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index a499faf9c..4e38f7868 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -14,7 +14,6 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { SettingsSectionPage } from '../SettingsSectionPage'; import { AccountData } from './AccountData'; import { SyncDiagnostics } from './SyncDiagnostics'; -import { ExperimentsPanel } from './ExperimentsPanel'; import { DebugLogViewer } from './DebugLogViewer'; import { SentrySettings } from './SentrySettings'; @@ -139,7 +138,6 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp )} {developerTools && } - {developerTools && } {developerTools && ( Encryption diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts index e523f15a7..b6eb0dea3 100644 --- a/src/app/hooks/useClientConfig.ts +++ b/src/app/hooks/useClientConfig.ts @@ -5,6 +5,31 @@ export type HashRouterConfig = { basename?: string; }; +export type ExperimentConfig = { + enabled?: boolean; + rolloutPercentage?: number; + variants?: string[]; + controlVariant?: string; +}; + +export type ExperimentSelection = { + key: string; + enabled: boolean; + rolloutPercentage: number; + variant: string; + inExperiment: boolean; +}; + +export type SessionSyncConfig = { + phase1ForegroundResync?: boolean; + phase2VisibleHeartbeat?: boolean; + phase3AdaptiveBackoffJitter?: boolean; + foregroundDebounceMs?: number; + heartbeatIntervalMs?: number; + resumeHeartbeatSuppressMs?: number; + heartbeatMaxBackoffMs?: number; +}; + export type ClientConfig = { defaultHomeserver?: number; homeserverList?: string[]; @@ -14,6 +39,8 @@ export type ClientConfig = { disableAccountSwitcher?: boolean; hideUsernamePasswordFields?: boolean; + experiments?: Record; + pushNotificationDetails?: { pushNotifyUrl?: string; vapidPublicKey?: string; @@ -43,6 +70,7 @@ export type ClientConfig = { matrixToBaseUrl?: string; settingsLinkBaseUrl?: string; + sessionSync?: SessionSyncConfig; }; const ClientConfigContext = createContext(null); @@ -55,6 +83,72 @@ export function useClientConfig(): ClientConfig { return config; } +const DEFAULT_CONTROL_VARIANT = 'control'; + +const normalizeRolloutPercentage = (value?: number): number => { + if (typeof value !== 'number' || Number.isNaN(value)) return 100; + if (value < 0) return 0; + if (value > 100) return 100; + return value; +}; + +const hashToUInt32 = (input: string): number => { + let hash = 0; + for (let index = 0; index < input.length; index += 1) { + hash = (hash * 131 + input.charCodeAt(index)) % 4294967291; + } + return hash; +}; + +export const selectExperimentVariant = ( + key: string, + experiment: ExperimentConfig | undefined, + subjectId: string | undefined +): ExperimentSelection => { + const controlVariant = experiment?.controlVariant ?? DEFAULT_CONTROL_VARIANT; + const variants = (experiment?.variants?.filter((variant) => variant.length > 0) ?? []).filter( + (variant) => variant !== controlVariant + ); + const enabled = experiment?.enabled === true; + const rolloutPercentage = normalizeRolloutPercentage(experiment?.rolloutPercentage); + + if (!enabled || !subjectId || variants.length === 0 || rolloutPercentage === 0) { + return { + key, + enabled, + rolloutPercentage, + variant: controlVariant, + inExperiment: false, + }; + } + + const rolloutBucket = hashToUInt32(`${key}:rollout:${subjectId}`) % 10000; + const rolloutCutoff = Math.floor(rolloutPercentage * 100); + if (rolloutBucket >= rolloutCutoff) { + return { + key, + enabled, + rolloutPercentage, + variant: controlVariant, + inExperiment: false, + }; + } + + const variantIndex = hashToUInt32(`${key}:variant:${subjectId}`) % variants.length; + return { + key, + enabled, + rolloutPercentage, + variant: variants[variantIndex], + inExperiment: true, + }; +}; + +export const useExperimentVariant = (key: string, subjectId?: string): ExperimentSelection => { + const clientConfig = useClientConfig(); + return selectExperimentVariant(key, clientConfig.experiments?.[key], subjectId); +}; + export const clientDefaultServer = (clientConfig: ClientConfig): string => clientConfig.homeserverList?.[clientConfig.defaultHomeserver ?? 0] ?? 'matrix.org'; diff --git a/src/app/hooks/useUserPresence.test.tsx b/src/app/hooks/useUserPresence.test.tsx index 125629137..c311563b6 100644 --- a/src/app/hooks/useUserPresence.test.tsx +++ b/src/app/hooks/useUserPresence.test.tsx @@ -6,21 +6,25 @@ import { useUserPresence, Presence } from './useUserPresence'; // Each test can override mockUser / mockGetPresence as needed. let mockUser: ReturnType | null = null; -let mockGetPresence: ReturnType; - -vi.mock('$hooks/useMatrixClient', () => ({ - useMatrixClient: () => mockMx, -})); +type PresenceResponse = { + presence: string; + status_msg?: string; + currently_active?: boolean; + last_active_ago?: number | null; +}; +let mockGetPresence: () => Promise; // Listeners registered via user.on() – captured so tests can emit events. const userListeners = new Map void)[]>(); -const makeMockUser = (opts: { - presence?: string; - presenceStatusMsg?: string | undefined; - currentlyActive?: boolean; - lastActiveTs?: number; -} = {}) => ({ +const makeMockUser = ( + opts: { + presence?: string; + presenceStatusMsg?: string | undefined; + currentlyActive?: boolean; + lastActiveTs?: number; + } = {} +) => ({ userId: '@alice:test', presence: opts.presence ?? 'online', presenceStatusMsg: opts.presenceStatusMsg, @@ -36,26 +40,22 @@ const makeMockUser = (opts: { const mockMx = { getUser: vi.fn((): ReturnType | null => mockUser), - getPresence: vi.fn( - (): Promise<{ - presence: string; - status_msg?: string; - currently_active?: boolean; - last_active_ago?: number | null; - }> => - mockGetPresence() - ), + getPresence: vi.fn((): Promise => mockGetPresence()), on: vi.fn(), removeListener: vi.fn(), }; +vi.mock('$hooks/useMatrixClient', () => ({ + useMatrixClient: () => mockMx, +})); + const USER_ID = '@alice:test'; beforeEach(() => { vi.clearAllMocks(); userListeners.clear(); mockUser = null; - mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); // pending by default + mockGetPresence = () => new Promise(() => {}); // pending by default mockMx.getUser.mockImplementation(() => mockUser); mockMx.getPresence.mockImplementation(() => mockGetPresence()); }); @@ -91,9 +91,10 @@ describe('useUserPresence', () => { currently_active?: boolean; last_active_ago?: number; }) => void; - mockGetPresence = vi - .fn() - .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + mockGetPresence = () => + new Promise((res) => { + resolvePresence = res; + }); const { result } = renderHook(() => useUserPresence(USER_ID)); @@ -116,9 +117,10 @@ describe('useUserPresence', () => { it('fires the REST fallback when user object does not exist yet', async () => { // user is null β€” REST should still be requested let resolvePresence!: (v: { presence: string }) => void; - mockGetPresence = vi - .fn() - .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + mockGetPresence = () => + new Promise((res) => { + resolvePresence = res; + }); const { result } = renderHook(() => useUserPresence(USER_ID)); @@ -140,9 +142,11 @@ describe('useUserPresence', () => { it('ignores the REST response after the component unmounts (cancelled flag)', async () => { let resolvePresence!: (v: { presence: string }) => void; - mockGetPresence = vi - .fn() - .mockReturnValue(new Promise((res) => { resolvePresence = res; })); + mockGetPresence = vi.fn().mockReturnValue( + new Promise((res) => { + resolvePresence = res; + }) + ); const { result, unmount } = renderHook(() => useUserPresence(USER_ID)); unmount(); @@ -157,12 +161,12 @@ describe('useUserPresence', () => { it('updates presence when UserEvent.Presence fires on the user object', () => { mockUser = makeMockUser({ presence: 'online', lastActiveTs: 1000 }); - mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); + mockGetPresence = () => new Promise(() => {}); const { result } = renderHook(() => useUserPresence(USER_ID)); // Mutate mock user to simulate a presence change, then fire the registered listener - mockUser!.presence = 'unavailable'; + mockUser.presence = 'unavailable'; const handlers = userListeners.get('User.presence') ?? []; act(() => { @@ -174,7 +178,7 @@ describe('useUserPresence', () => { it('resets to undefined when userId changes to a user not in the SDK', () => { mockUser = makeMockUser({ presence: 'online', lastActiveTs: 1000 }); - mockGetPresence = vi.fn().mockReturnValue(new Promise(() => {})); + mockGetPresence = () => new Promise(() => {}); const { result, rerender } = renderHook(({ uid }) => useUserPresence(uid), { initialProps: { uid: USER_ID }, @@ -190,7 +194,7 @@ describe('useUserPresence', () => { }); it('silently ignores a REST error (presence not supported on this server)', async () => { - mockGetPresence = vi.fn().mockReturnValue(Promise.reject(new Error('404 Not Found'))); + mockGetPresence = () => Promise.reject(new Error('404 Not Found')); const { result } = renderHook(() => useUserPresence(USER_ID)); diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 260f1dc28..65aadac4f 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -56,7 +56,6 @@ import { useCallSignaling } from '$hooks/useCallSignaling'; import { getBlobCacheStats } from '$hooks/useBlobCache'; import { lastVisitedRoomIdAtom } from '$state/room/lastRoom'; import { useSettingsSyncEffect } from '$hooks/useSettingsSync'; -import { useInitBookmarks } from '$features/bookmarks/useInitBookmarks'; import { getInboxInvitesPath } from '../pathUtils'; import { BackgroundNotifications } from './BackgroundNotifications'; @@ -877,17 +876,11 @@ function SettingsSyncFeature() { return null; } -function BookmarksFeature() { - useInitBookmarks(); - return null; -} - export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) { useCallSignaling(); return ( <> - From e4d24b2df6ec91e374f3636105f66d6280827bc5 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 13 Apr 2026 01:48:18 -0400 Subject: [PATCH 092/253] test(bookmarks): format repository tests for prettier compliance --- src/app/features/bookmarks/bookmarkRepository.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/features/bookmarks/bookmarkRepository.test.ts b/src/app/features/bookmarks/bookmarkRepository.test.ts index d9724cf67..0489fe692 100644 --- a/src/app/features/bookmarks/bookmarkRepository.test.ts +++ b/src/app/features/bookmarks/bookmarkRepository.test.ts @@ -262,7 +262,9 @@ describe('removeBookmark', () => { }); await expect(removeBookmark(mx, item.bookmark_id)).resolves.not.toThrow(); - const stored = (mx as any)._store[bookmarkItemEventType(item.bookmark_id)] as BookmarkItemContent; + const stored = (mx as any)._store[ + bookmarkItemEventType(item.bookmark_id) + ] as BookmarkItemContent; expect(stored.deleted).toBe(true); }); From 05fa6575c70f9c77dac15b5f479d168452be7d43 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 13 Apr 2026 11:12:46 -0400 Subject: [PATCH 093/253] fix: address PR #589 review comments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add stable m.poll.* type aliases alongside unstable MSC3381 types - Register stable poll types in useTimelineEventRenderer - Fix datetime-local timezone bug in PollCreatorDialog (UTCβ†’local) - Add FocusOutline from folds for keyboard a11y on poll options - Add MatrixEventEvent.Decrypted listener for encrypted poll responses - Support multi-select polls with Checkbox component --- .../features/room/poll/PollCreatorDialog.tsx | 10 +- src/app/features/room/poll/PollEvent.css.ts | 54 +++--- src/app/features/room/poll/PollEvent.tsx | 25 ++- .../timeline/useTimelineEventRenderer.tsx | 155 ++++++++++-------- src/types/matrix/room.ts | 6 +- 5 files changed, 149 insertions(+), 101 deletions(-) diff --git a/src/app/features/room/poll/PollCreatorDialog.tsx b/src/app/features/room/poll/PollCreatorDialog.tsx index f364f143f..c56bf5edd 100644 --- a/src/app/features/room/poll/PollCreatorDialog.tsx +++ b/src/app/features/room/poll/PollCreatorDialog.tsx @@ -69,11 +69,13 @@ export function PollCreatorDialog({ onCancel, onSubmit }: PollCreatorDialogProps const [error, setError] = useState(); const lastInputRef = useRef(null); - const minDatetime = useMemo( - () => new Date(Date.now() + 60_000).toISOString().slice(0, 16), + const minDatetime = useMemo(() => { + const d = new Date(Date.now() + 60_000); + // datetime-local expects local time, not UTC β€” build YYYY-MM-DDTHH:MM manually + const pad = (n: number) => String(n).padStart(2, '0'); + return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`; // eslint-disable-next-line react-hooks/exhaustive-deps - [expiryPreset] - ); + }, [expiryPreset]); const computeClosesAt = (): number | undefined => { const now = Date.now(); diff --git a/src/app/features/room/poll/PollEvent.css.ts b/src/app/features/room/poll/PollEvent.css.ts index 26e5433f9..103e87050 100644 --- a/src/app/features/room/poll/PollEvent.css.ts +++ b/src/app/features/room/poll/PollEvent.css.ts @@ -1,33 +1,41 @@ import { style } from '@vanilla-extract/css'; -import { config } from 'folds'; +import { config, FocusOutline } from 'folds'; // Vote button wrapping just the radio circle - minimal touch target -export const RadioZone = style({ - all: 'unset', - cursor: 'pointer', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexShrink: 0, - padding: `${config.space.S100} 0`, - selectors: { - '&:disabled': { - cursor: 'default', +export const RadioZone = style([ + FocusOutline, + { + all: 'unset', + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexShrink: 0, + padding: `${config.space.S100} 0`, + borderRadius: config.radii.R300, + selectors: { + '&:disabled': { + cursor: 'default', + }, }, }, -}); +]); // Text + percent area - clickable to reveal voters -export const AnswerTextButton = style({ - all: 'unset', - cursor: 'pointer', - display: 'flex', - flex: 1, - alignItems: 'center', - gap: config.space.S200, - minWidth: 0, - padding: `${config.space.S100} 0`, -}); +export const AnswerTextButton = style([ + FocusOutline, + { + all: 'unset', + cursor: 'pointer', + display: 'flex', + flex: 1, + alignItems: 'center', + gap: config.space.S200, + minWidth: 0, + padding: `${config.space.S100} 0`, + borderRadius: config.radii.R300, + }, +]); // Non-interactive version of the text area export const AnswerTextRow = style({ diff --git a/src/app/features/room/poll/PollEvent.tsx b/src/app/features/room/poll/PollEvent.tsx index 1565c1c30..678a9cfd2 100644 --- a/src/app/features/room/poll/PollEvent.tsx +++ b/src/app/features/room/poll/PollEvent.tsx @@ -3,6 +3,7 @@ import FocusTrap from 'focus-trap-react'; import { Box, Button, + Checkbox, config, Icon, Icons, @@ -21,6 +22,7 @@ import { M_POLL_RESPONSE, M_POLL_START, MatrixEvent, + MatrixEventEvent, Room, RoomEvent, } from '$types/matrix-sdk'; @@ -200,6 +202,20 @@ export function PollEvent({ room, mEvent, canEnd, outlined }: PollEventProps) { }; }, [room, pollEventId]); + // Also re-compute when an encrypted poll response/end is decrypted + useEffect(() => { + const onDecrypted = (event: MatrixEvent) => { + if (M_POLL_RESPONSE.matches(event.getType()) || M_POLL_END.matches(event.getType())) { + const relTo = event.getContent()?.['m.relates_to']?.event_id; + if (relTo === pollEventId) incrementTick(); + } + }; + mx.on(MatrixEventEvent.Decrypted, onDecrypted); + return () => { + mx.off(MatrixEventEvent.Decrypted, onDecrypted); + }; + }, [mx, pollEventId]); + // Re-render when the expiry countdown reaches zero useEffect(() => { if (!pollData?.closesAt) return undefined; @@ -276,7 +292,8 @@ export function PollEvent({ room, mEvent, canEnd, outlined }: PollEventProps) { if (!pollData) return null; - const { question, answers, isDisclosed, closesAt } = pollData; + const { question, answers, isDisclosed, closesAt, maxSelections } = pollData; + const isMultiSelect = maxSelections > 1; const voterLabel = `${totalVoters} ${totalVoters === 1 ? 'voter' : 'voters'}`; let statusText: string; @@ -383,7 +400,11 @@ export function PollEvent({ room, mEvent, canEnd, outlined }: PollEventProps) { aria-pressed={isSelected} aria-label={`Vote for ${answer.text}`} > - + {isMultiSelect ? ( + + ) : ( + + )} {textZone} diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx index dbfa13721..ec7478c66 100644 --- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx +++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx @@ -299,6 +299,85 @@ export function useTimelineEventRenderer({ }: TimelineEventRendererOptions) { const { t } = useTranslation(); + // Shared poll start renderer β€” used for both unstable and stable event types + const renderPollStart = ( + mEventId: string, + mEvent: MatrixEvent, + item: number, + timelineSet: EventTimelineSet, + collapse: boolean + ) => { + const { getSender, getAssociatedStatus, isRedacted, getUnsigned } = mEvent; + const reactionRelations = getEventReactions(timelineSet, mEventId); + const reactions = reactionRelations?.getSortedAnnotationsByKey(); + const hasReactions = reactions && reactions.length > 0; + const highlighted = focusItem?.index === item && focusItem.highlight; + const senderId = getSender.call(mEvent) ?? ''; + const senderDisplayName = + getMemberDisplayName(room, senderId, nicknames) ?? getMxIdLocalPart(senderId) ?? senderId; + const myUserId = mx.getUserId() ?? ''; + const canEnd = myUserId === senderId || canRedact; + + return ( + + ) : undefined + } + hideReadReceipts={hideReads} + showDeveloperTools={showDeveloperTools} + memberPowerTag={getMemberPowerTag(senderId)} + hour24Clock={hour24Clock} + dateFormatString={dateFormatString} + > + {isRedacted.call(mEvent) ? ( + + ) : ( + + )} + + ); + }; + return useMatrixEventRenderer<[string, MatrixEvent, number, EventTimelineSet, boolean]>( { [MessageEvent.RoomMessage]: (mEventId, mEvent, item, timelineSet, collapse) => { @@ -1080,81 +1159,15 @@ export function useTimelineEventRenderer({ ); }, - [MessageEvent.PollStart]: (mEventId, mEvent, item, timelineSet, collapse) => { - const { getSender, getAssociatedStatus, isRedacted, getUnsigned } = mEvent; - const reactionRelations = getEventReactions(timelineSet, mEventId); - const reactions = reactionRelations?.getSortedAnnotationsByKey(); - const hasReactions = reactions && reactions.length > 0; - const highlighted = focusItem?.index === item && focusItem.highlight; - const senderId = getSender.call(mEvent) ?? ''; - const senderDisplayName = - getMemberDisplayName(room, senderId, nicknames) ?? getMxIdLocalPart(senderId) ?? senderId; - const myUserId = mx.getUserId() ?? ''; - const canEnd = myUserId === senderId || canRedact; - - return ( - - ) : undefined - } - hideReadReceipts={hideReads} - showDeveloperTools={showDeveloperTools} - memberPowerTag={getMemberPowerTag(senderId)} - hour24Clock={hour24Clock} - dateFormatString={dateFormatString} - > - {isRedacted.call(mEvent) ? ( - - ) : ( - - )} - - ); - }, + [MessageEvent.PollStart]: renderPollStart, + [MessageEvent.StablePollStart]: renderPollStart, // Poll response and end events are not rendered individually β€” // they update the poll via RoomEvent.Timeline listeners in PollEvent. [MessageEvent.PollResponse]: () => null, [MessageEvent.PollEnd]: () => null, + // Stable poll type aliases (m.poll.*) + [MessageEvent.StablePollResponse]: () => null, + [MessageEvent.StablePollEnd]: () => null, }, (mEventId, mEvent, item, timelineSet, collapse) => { const { getSender, getTs, getType } = mEvent; diff --git a/src/types/matrix/room.ts b/src/types/matrix/room.ts index 3c252b7f0..10f9fd859 100644 --- a/src/types/matrix/room.ts +++ b/src/types/matrix/room.ts @@ -58,10 +58,14 @@ export enum MessageEvent { Sticker = 'm.sticker', RoomRedaction = 'm.room.redaction', Reaction = 'm.reaction', - // MSC3381 Polls β€” unstable prefix (stable types not yet in a shipped room version) + // MSC3381 Polls β€” unstable prefix (still the most common in the wild) PollStart = 'org.matrix.msc3381.poll.start', PollResponse = 'org.matrix.msc3381.poll.response', PollEnd = 'org.matrix.msc3381.poll.end', + // MSC3381 Polls β€” stable types (used by newer servers) + StablePollStart = 'm.poll.start', + StablePollResponse = 'm.poll.response', + StablePollEnd = 'm.poll.end', } export enum RoomType { From a2d568350c03af53c64360d7947d2023ad09f73f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 13 Apr 2026 16:27:43 -0400 Subject: [PATCH 094/253] fix(bookmarks): react to item-level account data events and fix remove() optimistic update - useInitBookmarks: also trigger loadBookmarks on bookmark item events (prefix org.matrix.msc4438.bookmark.*), not just the index event. Fixes cross-device sync not updating the UI when sliding sync delivers individual item events. - useBookmarks: remove() now moves the item to bookmarkDeletedListAtom optimistically so the Recently Removed section updates immediately. - Added regression tests for both fixes. --- .../features/bookmarks/useBookmarks.test.tsx | 132 +++++++++++++++ src/app/features/bookmarks/useBookmarks.ts | 15 +- .../bookmarks/useInitBookmarks.test.tsx | 155 ++++++++++++++++++ .../features/bookmarks/useInitBookmarks.ts | 10 +- 4 files changed, 307 insertions(+), 5 deletions(-) create mode 100644 src/app/features/bookmarks/useBookmarks.test.tsx create mode 100644 src/app/features/bookmarks/useInitBookmarks.test.tsx diff --git a/src/app/features/bookmarks/useBookmarks.test.tsx b/src/app/features/bookmarks/useBookmarks.test.tsx new file mode 100644 index 000000000..e09f446c2 --- /dev/null +++ b/src/app/features/bookmarks/useBookmarks.test.tsx @@ -0,0 +1,132 @@ +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import { renderHook, act } from '@testing-library/react'; +import { createStore, Provider } from 'jotai'; +import { createElement, type ReactNode } from 'react'; +import { bookmarkListAtom, bookmarkDeletedListAtom } from '$state/bookmarks'; +import { useBookmarkActions } from './useBookmarks'; +import type { BookmarkItemContent } from './bookmarkDomain'; + +// --------------------------------------------------------------------------- +// Mocks +// --------------------------------------------------------------------------- + +const { mockMx } = vi.hoisted(() => { + const store: Record = {}; + return { + mockMx: { + getAccountData: vi.fn((type: string) => { + const content = store[type]; + if (!content) return undefined; + return { getContent: () => content }; + }), + setAccountData: vi.fn(async (type: string, content: unknown) => { + store[type] = content; + }), + store: { accountData: new Map() }, + }, + }; +}); + +vi.mock('$hooks/useMatrixClient', () => ({ + useMatrixClient: () => mockMx, +})); + +// Mock the repository so removeBookmark doesn't try to read real account data +vi.mock('./bookmarkRepository', async (importOriginal) => { + const orig = await importOriginal(); + return { + ...orig, + removeBookmark: vi.fn(async () => {}), + addBookmark: vi.fn(async () => {}), + }; +}); + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function makeItem(id: string): BookmarkItemContent { + return { + version: 1, + bookmark_id: id, + uri: `matrix:roomid/foo/e/${id}`, + room_id: '!room:s', + event_id: `$${id}:s`, + event_ts: 1_000, + bookmarked_ts: 2_000, + }; +} + +function makeWrapper(store: ReturnType) { + return function Wrapper({ children }: { children: ReactNode }) { + return createElement(Provider, { store }, children); + }; +} + +// --------------------------------------------------------------------------- +// Tests +// --------------------------------------------------------------------------- + +describe('useBookmarkActions.remove', () => { + let store: ReturnType; + + beforeEach(() => { + store = createStore(); + }); + + it('moves item from active list to deleted list optimistically', async () => { + const item = makeItem('bmk_1111'); + store.set(bookmarkListAtom, [item]); + store.set(bookmarkDeletedListAtom, []); + + const { result } = renderHook(() => useBookmarkActions(), { + wrapper: makeWrapper(store), + }); + + await act(async () => { + await result.current.remove('bmk_1111'); + }); + + expect(store.get(bookmarkListAtom)).toHaveLength(0); + + const deleted = store.get(bookmarkDeletedListAtom); + expect(deleted).toHaveLength(1); + expect(deleted[0].bookmark_id).toBe('bmk_1111'); + expect(deleted[0].deleted).toBe(true); + }); + + it('does not duplicate item in deleted list if already present', async () => { + const item = makeItem('bmk_2222'); + const deletedItem = { ...item, deleted: true as const }; + store.set(bookmarkListAtom, [item]); + store.set(bookmarkDeletedListAtom, [deletedItem]); + + const { result } = renderHook(() => useBookmarkActions(), { + wrapper: makeWrapper(store), + }); + + await act(async () => { + await result.current.remove('bmk_2222'); + }); + + expect(store.get(bookmarkDeletedListAtom)).toHaveLength(1); + }); + + it('handles removing a non-existent item gracefully', async () => { + store.set(bookmarkListAtom, [makeItem('bmk_3333')]); + store.set(bookmarkDeletedListAtom, []); + + const { result } = renderHook(() => useBookmarkActions(), { + wrapper: makeWrapper(store), + }); + + await act(async () => { + await result.current.remove('bmk_nonexistent'); + }); + + // Original item untouched + expect(store.get(bookmarkListAtom)).toHaveLength(1); + // Nothing added to deleted list since the item wasn't found + expect(store.get(bookmarkDeletedListAtom)).toHaveLength(0); + }); +}); diff --git a/src/app/features/bookmarks/useBookmarks.ts b/src/app/features/bookmarks/useBookmarks.ts index df9346dfd..c6fac5746 100644 --- a/src/app/features/bookmarks/useBookmarks.ts +++ b/src/app/features/bookmarks/useBookmarks.ts @@ -79,11 +79,20 @@ export function useBookmarkActions() { const remove = useCallback( async (bookmarkId: string) => { - // Optimistic update - setList((prev) => prev.filter((b) => b.bookmark_id !== bookmarkId)); + // Optimistic update: move from active list to deleted list + setList((prev) => { + const removed = prev.find((b) => b.bookmark_id === bookmarkId); + if (removed) { + setDeletedList((del) => { + if (del.some((b) => b.bookmark_id === bookmarkId)) return del; + return [{ ...removed, deleted: true }, ...del]; + }); + } + return prev.filter((b) => b.bookmark_id !== bookmarkId); + }); await removeBookmark(mx, bookmarkId); }, - [mx, setList] + [mx, setList, setDeletedList] ); const restore = useCallback( diff --git a/src/app/features/bookmarks/useInitBookmarks.test.tsx b/src/app/features/bookmarks/useInitBookmarks.test.tsx new file mode 100644 index 000000000..893b5d64c --- /dev/null +++ b/src/app/features/bookmarks/useInitBookmarks.test.tsx @@ -0,0 +1,155 @@ +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import { renderHook } from '@testing-library/react'; +import { createStore, Provider } from 'jotai'; +import { createElement, type ReactNode } from 'react'; +import { bookmarkListAtom, bookmarkDeletedListAtom } from '$state/bookmarks'; +import { useInitBookmarks } from './useInitBookmarks'; +import type { BookmarkItemContent, BookmarkIndexContent } from './bookmarkDomain'; + +// --------------------------------------------------------------------------- +// Mocks +// --------------------------------------------------------------------------- + +const BOOKMARKS_INDEX = 'org.matrix.msc4438.bookmarks.index'; +const BOOKMARK_PREFIX = 'org.matrix.msc4438.bookmark.'; + +const { accountDataCB, syncStateCB, mockMx } = vi.hoisted(() => { + const adCB: { current: ((event: { getType: () => string }) => void) | null } = { current: null }; + const ssCB: { current: ((state: string, prev: string) => void) | null } = { current: null }; + + const item: BookmarkItemContent = { + version: 1, + bookmark_id: 'bmk_aabb', + uri: 'matrix:roomid/foo/e/bar', + room_id: '!room:s', + event_id: '$ev:s', + event_ts: 1_000, + bookmarked_ts: 2_000, + }; + const deletedItem: BookmarkItemContent = { + version: 1, + bookmark_id: 'bmk_ccdd', + uri: 'matrix:roomid/baz/e/qux', + room_id: '!room2:s', + event_id: '$ev2:s', + event_ts: 3_000, + bookmarked_ts: 4_000, + deleted: true, + }; + const index: BookmarkIndexContent = { + version: 1, + revision: 1, + updated_ts: 5_000, + bookmark_ids: ['bmk_aabb', 'bmk_ccdd'], + }; + + const store: Record = { + ['org.matrix.msc4438.bookmarks.index']: index, + ['org.matrix.msc4438.bookmark.bmk_aabb']: item, + ['org.matrix.msc4438.bookmark.bmk_ccdd']: deletedItem, + }; + + const mx = { + getAccountData: vi.fn((type: string) => { + const content = store[type]; + if (!content) return undefined; + return { getContent: () => content }; + }), + setAccountData: vi.fn(), + store: { accountData: new Map(Object.entries(store)) }, + }; + + return { accountDataCB: adCB, syncStateCB: ssCB, mockMx: mx }; +}); + +vi.mock('$hooks/useMatrixClient', () => ({ + useMatrixClient: () => mockMx, +})); + +vi.mock('$hooks/useAccountDataCallback', () => ({ + useAccountDataCallback: ( + _mx: unknown, + cb: (event: { getType: () => string }) => void + ) => { + accountDataCB.current = cb; + }, +})); + +vi.mock('$hooks/useSyncState', () => ({ + useSyncState: (_mx: unknown, cb: (state: string, prev: string) => void) => { + syncStateCB.current = cb; + }, +})); + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function makeStore() { + return createStore(); +} + +function makeWrapper(store: ReturnType) { + return function Wrapper({ children }: { children: ReactNode }) { + return createElement(Provider, { store }, children); + }; +} + +// --------------------------------------------------------------------------- +// Tests +// --------------------------------------------------------------------------- + +describe('useInitBookmarks', () => { + let store: ReturnType; + + beforeEach(() => { + store = makeStore(); + accountDataCB.current = null; + syncStateCB.current = null; + }); + + it('loads bookmarks on mount', () => { + renderHook(() => useInitBookmarks(), { wrapper: makeWrapper(store) }); + + const list = store.get(bookmarkListAtom); + const deleted = store.get(bookmarkDeletedListAtom); + expect(list).toHaveLength(1); + expect(list[0].bookmark_id).toBe('bmk_aabb'); + expect(deleted).toHaveLength(1); + expect(deleted[0].bookmark_id).toBe('bmk_ccdd'); + }); + + it('reloads when BookmarksIndex account data event fires', () => { + renderHook(() => useInitBookmarks(), { wrapper: makeWrapper(store) }); + + // Clear the atom to prove the callback re-populates it + store.set(bookmarkListAtom, []); + + accountDataCB.current!({ getType: () => BOOKMARKS_INDEX }); + + expect(store.get(bookmarkListAtom)).toHaveLength(1); + }); + + it('reloads when a bookmark item account data event fires', () => { + renderHook(() => useInitBookmarks(), { wrapper: makeWrapper(store) }); + + store.set(bookmarkListAtom, []); + + accountDataCB.current!({ + getType: () => `${BOOKMARK_PREFIX}bmk_aabb`, + }); + + expect(store.get(bookmarkListAtom)).toHaveLength(1); + }); + + it('ignores unrelated account data events', () => { + renderHook(() => useInitBookmarks(), { wrapper: makeWrapper(store) }); + + store.set(bookmarkListAtom, []); + + accountDataCB.current!({ getType: () => 'm.room.message' }); + + // Should still be empty β€” callback should not have triggered a reload + expect(store.get(bookmarkListAtom)).toHaveLength(0); + }); +}); diff --git a/src/app/features/bookmarks/useInitBookmarks.ts b/src/app/features/bookmarks/useInitBookmarks.ts index 3b6cb2247..480e20083 100644 --- a/src/app/features/bookmarks/useInitBookmarks.ts +++ b/src/app/features/bookmarks/useInitBookmarks.ts @@ -57,12 +57,18 @@ export function useInitBookmarks(): void { ) ); - // React to index updates pushed by other devices mid-session. + // React to bookmark account data changes pushed by other devices mid-session. + // The index event fires when the bookmark list changes; individual item events + // fire when a bookmark is added, removed, or soft-deleted. useAccountDataCallback( mx, useCallback( (event: MatrixEvent) => { - if (event.getType() === (AccountDataEvent.BookmarksIndex as string)) { + const type = event.getType(); + if ( + type === (AccountDataEvent.BookmarksIndex as string) || + type.startsWith(AccountDataEvent.BookmarkItemPrefix as string) + ) { loadBookmarks(); } }, From 64f531b4c3c2874fe61a4d239968b32a8f2aa193 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 20:05:50 -0400 Subject: [PATCH 095/253] perf: memoize VList timeline items to prevent mass re-renders MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - useTimelineSync: add mutationVersion counter, incremented only on mutations (reactions, edits, local-echo, thread updates) via a new triggerMutation() callback. Live event arrivals do NOT bump it β€” the eventsLength change already signals those. - useProcessedTimeline: add stableRefsCache (useRef) that reuses the same ProcessedEvent object across renders when mutationVersion is unchanged and structural fields (collapsed, dividers, eventSender) are identical. New mutationVersion bypasses the cache so fresh objects reach React on actual content mutations. - RoomTimeline: define TimelineItem as React.memo outside the component function so the type is stable. Render via renderFnRef (synchronously updated each cycle) to avoid stale closures without adding to deps. Per-item boolean props (isHighlighted, isEditing, isReplying, isOpenThread) and a settingsEpoch object let memo skip re-renders on unchanged items while still re-rendering the one item that changed. vListIndices deps changed from timelineSync.timeline (always a new object from spread) to timelineSync.timeline.linkedTimelines + timelineSync.mutationVersion. Expected gains: Scrolling: 0 item re-renders (was: all visible items) New message: 1 item re-renders (was: all) focusItem/editId change: 1-2 items (was: all) Reactions/edits/mutations: all items (same as before, content changed) Settings change: all items via settingsEpoch (same as before) --- src/app/features/room/RoomTimeline.tsx | 120 ++++++++++++++++-- .../hooks/timeline/useProcessedTimeline.ts | 44 ++++++- src/app/hooks/timeline/useTimelineSync.ts | 29 +++-- 3 files changed, 168 insertions(+), 25 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index d026ec1fa..858807edb 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -1,6 +1,7 @@ import { Fragment, ReactNode, + memo, useCallback, useEffect, useLayoutEffect, @@ -79,6 +80,49 @@ import { ProcessedEvent, useProcessedTimeline } from '$hooks/timeline/useProcess import { useTimelineEventRenderer } from '$hooks/timeline/useTimelineEventRenderer'; import * as css from './RoomTimeline.css'; +/** Render function type passed to the memoized TimelineItem via a ref. */ +type TimelineRenderFn = (eventData: ProcessedEvent) => ReactNode; + +/** + * Renders one timeline item. Defined outside RoomTimeline so React never + * recreates the component type, and wrapped in `memo` so it skips re-renders + * when neither the event data nor any per-item volatile state changed. + * + * The actual rendering is delegated to `renderRef.current` (always the latest + * version of `renderMatrixEvent`, set synchronously during each render cycle) + * so stale-closure issues are avoided. + * + * Props not used in the function body (`isHighlighted`, `isEditing`, etc.) are + * intentionally included: React.memo's default shallow-equality comparator + * inspects ALL props, so changing one of them for a specific item causes only + * that item to re-render (e.g. only the message being edited re-renders when + * editId changes). + */ +interface TimelineItemProps { + data: ProcessedEvent; + renderRef: React.MutableRefObject; + /** Changed when this specific item becomes highlighted / un-highlighted. */ + isHighlighted: boolean; + /** Changed when this specific item enters / exits edit mode. */ + isEditing: boolean; + /** Changed when this specific item is the active reply target. */ + isReplying: boolean; + /** Changed when this specific item's thread drawer is open. */ + isOpenThread: boolean; + /** + * Opaque object whose identity changes when any global render-affecting + * setting changes (layout, spacing, nicknames, permissions…). Forces all + * visible items to re-render when settings change. + */ + settingsEpoch: object; +} + +const TimelineItem = memo(function TimelineItem({ data, renderRef }: TimelineItemProps) { + // isHighlighted, isEditing, isReplying, isOpenThread, settingsEpoch are not + // used here directly β€” their sole purpose is to guide React.memo comparisons. + return <>{renderRef.current?.(data)}; +}); + const TimelineFloat = as<'div', css.TimelineFloatVariants>( ({ position, className, ...props }, ref) => ( (null); + renderFnRef.current = (eventData: ProcessedEvent) => + renderMatrixEvent( + eventData.mEvent.getType(), + typeof eventData.mEvent.getStateKey() === 'string', + eventData.id, + eventData.mEvent, + eventData.itemIndex, + eventData.timelineSet, + eventData.collapsed + ); + + // Object whose identity changes when any global render-affecting setting + // changes. TimelineItem memo sees the new reference and re-renders all items. + const settingsEpoch = useMemo( + () => ({}), + // Any setting that changes how ALL items are rendered should be listed here. + // eslint-disable-next-line react-hooks/exhaustive-deps + [ + messageLayout, + messageSpacing, + hideReads, + showDeveloperTools, + hour24Clock, + dateFormatString, + mediaAutoLoad, + showBundledPreview, + showUrlPreview, + showClientUrlPreview, + autoplayStickers, + hideMemberInReadOnly, + isReadOnly, + hideMembershipEvents, + hideNickAvatarEvents, + showHiddenEvents, + reducedMotion, + nicknames, + imagePackRooms, + htmlReactParserOptions, + linkifyOpts, + ] + ); + const tryAutoMarkAsRead = useCallback(() => { if (!readUptoEventIdRef.current) { requestAnimationFrame(() => markAsRead(mx, room.roomId, hideReads)); @@ -724,13 +814,20 @@ export function RoomTimeline({ : timelineSync.eventsLength; const vListIndices = useMemo( () => Array.from({ length: vListItemCount }, (_, i) => i), + // timelineSync.timeline.linkedTimelines: recompute when the timeline structure + // changes (pagination, room switch). timelineSync.mutationVersion: recompute + // when event content mutates (reactions, edits) without changing the count. + // Using the linkedTimelines reference (not the timeline wrapper object) means + // a setTimeline spread for a live event arrival does NOT recompute this β€” the + // eventsLength / vListItemCount change already covers that case. // eslint-disable-next-line react-hooks/exhaustive-deps - [vListItemCount, timelineSync.timeline] + [vListItemCount, timelineSync.timeline.linkedTimelines, timelineSync.mutationVersion] ); const processedEvents = useProcessedTimeline({ items: vListIndices, linkedTimelines: timelineSync.timeline.linkedTimelines, + mutationVersion: timelineSync.mutationVersion, ignoredUsersSet, showHiddenEvents, showTombstoneEvents, @@ -901,14 +998,19 @@ export function RoomTimeline({ return ; } - const renderedEvent = renderMatrixEvent( - eventData.mEvent.getType(), - typeof eventData.mEvent.getStateKey() === 'string', - eventData.id, - eventData.mEvent, - eventData.itemIndex, - eventData.timelineSet, - eventData.collapsed + const renderedEvent = ( + ); const dividers = ( diff --git a/src/app/hooks/timeline/useProcessedTimeline.ts b/src/app/hooks/timeline/useProcessedTimeline.ts index 44e9500a2..daa7eab83 100644 --- a/src/app/hooks/timeline/useProcessedTimeline.ts +++ b/src/app/hooks/timeline/useProcessedTimeline.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import { useMemo, useRef } from 'react'; import { MatrixEvent, EventTimelineSet, EventTimeline } from '$types/matrix-sdk'; import { getTimelineAndBaseIndex, @@ -20,12 +20,22 @@ export interface UseProcessedTimelineOptions { hideNickAvatarEvents: boolean; isReadOnly: boolean; hideMemberInReadOnly: boolean; + /** /** * When true, skip the filter that removes events whose `threadRootId` points * to a different event. Required when processing a thread's own timeline * where every reply legitimately has `threadRootId` set to the root. */ skipThreadFilter?: boolean; + /** + * Increment this whenever existing event content mutates (reactions, edits, + * thread updates, local-echo). When it changes, `useProcessedTimeline` + * creates fresh `ProcessedEvent` objects so downstream `React.memo` item + * components re-render to reflect updated content. When unchanged (e.g. a + * new event was appended), existing objects are reused by identity, letting + * memo bail out for unchanged items. + */ + mutationVersion: number; } export interface ProcessedEvent { @@ -62,8 +72,23 @@ export function useProcessedTimeline({ isReadOnly, hideMemberInReadOnly, skipThreadFilter, + mutationVersion, }: UseProcessedTimelineOptions): ProcessedEvent[] { + // Stable-ref cache: reuse the same ProcessedEvent object for an event when + // nothing structural changed. This lets React.memo on item components bail + // out for the majority of items when only a new message was appended. + const stableRefsCache = useRef>(new Map()); + const prevMutationVersionRef = useRef(-1); + return useMemo(() => { + // When mutationVersion changes, existing event content has mutated (reaction + // added, message edited, local-echo updated, thread reply). Create fresh + // objects so memo item components re-render. When version is unchanged (only + // items count changed), reuse cached refs for structurally-identical events. + const isMutation = mutationVersion !== prevMutationVersionRef.current; + prevMutationVersionRef.current = mutationVersion; + const prevCache = isMutation ? null : stableRefsCache.current; + let prevEvent: MatrixEvent | undefined; let isPrevRendered = false; let newDivider = false; @@ -179,18 +204,33 @@ export function useProcessedTimeline({ willRenderDayDivider, }; + // Reuse the previous ProcessedEvent object if all structural fields match, + // so that React.memo on timeline item components can bail out cheaply. + const prev = prevCache?.get(mEventId); + const stable = + prev && + prev.collapsed === collapsed && + prev.willRenderNewDivider === willRenderNewDivider && + prev.willRenderDayDivider === willRenderDayDivider && + prev.eventSender === eventSender + ? prev + : processed; + prevEvent = mEvent; isPrevRendered = true; if (willRenderNewDivider) newDivider = false; if (willRenderDayDivider) dayDivider = false; - acc.push(processed); + acc.push(stable); return acc; }, []); + // Update the stable-ref cache for the next render. + stableRefsCache.current = new Map(result.map((e) => [e.id, e])); return result; }, [ items, linkedTimelines, + mutationVersion, ignoredUsersSet, showHiddenEvents, showTombstoneEvents, diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 51c85dda8..ca52b5442 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -376,6 +376,16 @@ export function useTimelineSync({ eventId ? getEmptyTimeline() : { linkedTimelines: getInitialTimeline(room).linkedTimelines } ); + // Incremented whenever existing event content mutates (reactions, edits, thread + // updates, local-echo status) but NOT on live-event arrivals (those are signalled + // by eventsLength increasing). Consumers use this to decide whether to + // re-create ProcessedEvent objects for stable-ref memoization. + const [mutationVersion, setMutationVersion] = useState(0); + const triggerMutation = useCallback(() => { + setTimeline((ct) => ({ ...ct })); + setMutationVersion((v) => v + 1); + }, []); + const [focusItem, setFocusItem] = useState< | { index: number; @@ -512,14 +522,14 @@ export function useTimelineSync({ eventRoom: Room | undefined ) => { if (eventRoom?.roomId !== room.roomId) return; - setTimeline((ct) => ({ ...ct })); + triggerMutation(); }; room.on(RoomEvent.LocalEchoUpdated, handleLocalEchoUpdated); return () => { room.removeListener(RoomEvent.LocalEchoUpdated, handleLocalEchoUpdated); }; - }, [room, setTimeline]); + }, [room, triggerMutation]); useLiveTimelineRefresh( room, @@ -533,19 +543,9 @@ export function useTimelineSync({ }, [room, isAtBottomRef, scrollToBottom]) ); - useRelationUpdate( - room, - useCallback(() => { - setTimeline((ct) => ({ ...ct })); - }, []) - ); + useRelationUpdate(room, triggerMutation); - useThreadUpdate( - room, - useCallback(() => { - setTimeline((ct) => ({ ...ct })); - }, []) - ); + useThreadUpdate(room, triggerMutation); useEffect(() => { const resetAutoScrollPending = resetAutoScrollPendingRef.current; @@ -605,5 +605,6 @@ export function useTimelineSync({ loadEventTimeline, focusItem, setFocusItem, + mutationVersion, }; } From c9f45378f26d8f2da53c26fa36b91c26f74e107c Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 20:39:12 -0400 Subject: [PATCH 096/253] fix(timeline): make mutationVersion optional in UseProcessedTimelineOptions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ThreadDrawer calls useProcessedTimeline without an equivalent mutation counter (it doesn't use useTimelineSync). Making the field optional with a default of 0 means: - ThreadDrawer gets stable-ref caching for free on subsequent renders (isMutation=false after first render), which is correct β€” it doesn't wrap items in React.memo TimelineItem. - RoomTimeline continues to pass the real mutationVersion so its TimelineItem memo components are refreshed when content mutates. - pnpm typecheck / pnpm build no longer fail with TS2345. --- src/app/hooks/timeline/useProcessedTimeline.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/app/hooks/timeline/useProcessedTimeline.ts b/src/app/hooks/timeline/useProcessedTimeline.ts index daa7eab83..ca0f4e1aa 100644 --- a/src/app/hooks/timeline/useProcessedTimeline.ts +++ b/src/app/hooks/timeline/useProcessedTimeline.ts @@ -34,8 +34,13 @@ export interface UseProcessedTimelineOptions { * components re-render to reflect updated content. When unchanged (e.g. a * new event was appended), existing objects are reused by identity, letting * memo bail out for unchanged items. + * + * Optional β€” defaults to 0 (stable refs always applied after first render). + * Call sites that do NOT use `React.memo` item components (e.g. `ThreadDrawer`) + * can omit this; the SDK mutates `mEvent` in place so rendered content stays + * correct regardless of object identity. */ - mutationVersion: number; + mutationVersion?: number; } export interface ProcessedEvent { @@ -72,7 +77,7 @@ export function useProcessedTimeline({ isReadOnly, hideMemberInReadOnly, skipThreadFilter, - mutationVersion, + mutationVersion = 0, }: UseProcessedTimelineOptions): ProcessedEvent[] { // Stable-ref cache: reuse the same ProcessedEvent object for an event when // nothing structural changed. This lets React.memo on item components bail From 885cf0bcb69756e6bc99a4cc7831d2fe94951534 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 22:51:21 -0400 Subject: [PATCH 097/253] fix(timeline): satisfy lint rules in TimelineItem memo component --- src/app/features/room/RoomTimeline.tsx | 27 +++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 858807edb..a075ceafc 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -101,27 +101,28 @@ type TimelineRenderFn = (eventData: ProcessedEvent) => ReactNode; interface TimelineItemProps { data: ProcessedEvent; renderRef: React.MutableRefObject; - /** Changed when this specific item becomes highlighted / un-highlighted. */ + // The props below are not read in the component body β€” they exist solely so + // React.memo's shallow-equality comparator sees them and re-renders only the + // affected item when they change. + // eslint-disable-next-line react/no-unused-prop-types isHighlighted: boolean; - /** Changed when this specific item enters / exits edit mode. */ + // eslint-disable-next-line react/no-unused-prop-types isEditing: boolean; - /** Changed when this specific item is the active reply target. */ + // eslint-disable-next-line react/no-unused-prop-types isReplying: boolean; - /** Changed when this specific item's thread drawer is open. */ + // eslint-disable-next-line react/no-unused-prop-types isOpenThread: boolean; - /** - * Opaque object whose identity changes when any global render-affecting - * setting changes (layout, spacing, nicknames, permissions…). Forces all - * visible items to re-render when settings change. - */ + // eslint-disable-next-line react/no-unused-prop-types settingsEpoch: object; } -const TimelineItem = memo(function TimelineItem({ data, renderRef }: TimelineItemProps) { - // isHighlighted, isEditing, isReplying, isOpenThread, settingsEpoch are not - // used here directly β€” their sole purpose is to guide React.memo comparisons. +// Declared outside memo() so the callback receives a reference, not an inline +// function expression (satisfies prefer-arrow-callback). +function TimelineItemInner({ data, renderRef }: TimelineItemProps) { return <>{renderRef.current?.(data)}; -}); +} +const TimelineItem = memo(TimelineItemInner); +TimelineItem.displayName = 'TimelineItem'; const TimelineFloat = as<'div', css.TimelineFloatVariants>( ({ position, className, ...props }, ref) => ( From 70e4552537eda254c88ab7ceaf4dfab73a9f41ec Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 22:51:34 -0400 Subject: [PATCH 098/253] chore: add changeset for perf-timeline-item-memo --- .changeset/perf-timeline-item-memo.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/perf-timeline-item-memo.md diff --git a/.changeset/perf-timeline-item-memo.md b/.changeset/perf-timeline-item-memo.md new file mode 100644 index 000000000..1471e3d0a --- /dev/null +++ b/.changeset/perf-timeline-item-memo.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Memoize individual VList timeline items to prevent mass re-renders when unrelated state changes (e.g. typing indicators, read receipts, or new messages while not at the bottom). From 2b9758fd202d0c3cc51051ae204de60b82913bb5 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 23:19:45 -0400 Subject: [PATCH 099/253] fix(timeline): preempt atBottom to prevent Jump to Latest flashing at bottom --- src/app/features/room/RoomTimeline.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index a075ceafc..278ef1a1b 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -355,6 +355,9 @@ export function RoomTimeline({ // was empty when the timer fired (e.g. the onLifecycle reset cleared the // timeline within the 80 ms window), defer setIsReady until the recovery // effect below fires once events repopulate. + // scrollToIndex is async; pre-empt atBottom so the "Jump to Latest" + // button doesn't flash for one render cycle before onScroll confirms. + setAtBottom(true); setIsReady(true); } else { pendingReadyRef.current = true; @@ -364,7 +367,13 @@ export function RoomTimeline({ } // No cleanup return β€” the timer must survive eventsLength fluctuations. // It is cancelled on unmount by the dedicated effect below. - }, [timelineSync.eventsLength, timelineSync.liveTimelineLinked, eventId, room.roomId]); + }, [ + timelineSync.eventsLength, + timelineSync.liveTimelineLinked, + eventId, + room.roomId, + setAtBottom, + ]); // Cancel the initial-scroll timer on unmount (the useLayoutEffect above // intentionally does not cancel it when deps change). @@ -851,8 +860,11 @@ export function RoomTimeline({ if (processedEvents.length === 0) return; pendingReadyRef.current = false; vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); + // scrollToIndex is async; pre-empt atBottom so the "Jump to Latest" button + // doesn't flash for one render cycle before onScroll confirms the position. + setAtBottom(true); setIsReady(true); - }, [processedEvents.length]); + }, [processedEvents.length, setAtBottom]); useEffect(() => { if (!onEditLastMessageRef) return; From 8aea0a1717461d34601d46d4e14f8ce66496cc4c Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 10 Apr 2026 08:58:01 -0400 Subject: [PATCH 100/253] fix(timeline): suppress intermediate VList scroll events after programmatic scroll-to-bottom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit After setIsReady(true) commits, virtua can fire onScroll events with isNowAtBottom=false during its height-correction pass (particularly on first visit when item heights above the viewport haven't been rendered yet). These intermediate events were driving atBottomState to false while isReady=true, flashing the 'Jump to Latest' button. Add programmaticScrollToBottomRef: set it before each scrollToIndex bottom-scroll, suppress the first intermediate false event (clearing the guard immediately), so the next event β€” the corrected position or a real user scroll β€” is processed normally. --- src/app/features/room/RoomTimeline.tsx | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 278ef1a1b..cde3358e8 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -267,6 +267,12 @@ export function RoomTimeline({ // A recovery useLayoutEffect watches for processedEvents becoming non-empty // and performs the final scroll + setIsReady when this flag is set. const pendingReadyRef = useRef(false); + // Set to true before each programmatic scroll-to-bottom so intermediate + // onScroll events from virtua's height-correction pass cannot drive + // atBottomState to false (flashing the "Jump to Latest" button). + // Cleared when VList confirms isNowAtBottom, or on the first intermediate + // event so subsequent user-initiated scrolls are tracked normally. + const programmaticScrollToBottomRef = useRef(false); const currentRoomIdRef = useRef(room.roomId); const [isReady, setIsReady] = useState(false); @@ -276,6 +282,7 @@ export function RoomTimeline({ mountScrollWindowRef.current = Date.now() + 3000; currentRoomIdRef.current = room.roomId; pendingReadyRef.current = false; + programmaticScrollToBottomRef.current = false; if (initialScrollTimerRef.current !== undefined) { clearTimeout(initialScrollTimerRef.current); initialScrollTimerRef.current = undefined; @@ -350,6 +357,7 @@ export function RoomTimeline({ initialScrollTimerRef.current = setTimeout(() => { initialScrollTimerRef.current = undefined; if (processedEventsRef.current.length > 0) { + programmaticScrollToBottomRef.current = true; vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); // Only mark ready once we've successfully scrolled. If processedEvents // was empty when the timer fired (e.g. the onLifecycle reset cleared the @@ -731,8 +739,20 @@ export function RoomTimeline({ const distanceFromBottom = v.scrollSize - offset - v.viewportSize; const isNowAtBottom = distanceFromBottom < 100; + // Clear the programmatic-scroll guard whenever VList confirms we are at the + // bottom, regardless of whether atBottomRef needs updating. + if (isNowAtBottom) programmaticScrollToBottomRef.current = false; if (isNowAtBottom !== atBottomRef.current) { - setAtBottom(isNowAtBottom); + if (isNowAtBottom || !programmaticScrollToBottomRef.current) { + setAtBottom(isNowAtBottom); + } else { + // VList fired an intermediate "not at bottom" event while settling after + // a programmatic scroll-to-bottom (e.g. height-correction pass). Suppress + // the false negative and clear the guard so the next event β€” either a + // VList correction to the true bottom, or a genuine user scroll β€” is + // processed normally. + programmaticScrollToBottomRef.current = false; + } } if (offset < 500 && canPaginateBackRef.current && backwardStatusRef.current === 'idle') { @@ -859,6 +879,7 @@ export function RoomTimeline({ if (!pendingReadyRef.current) return; if (processedEvents.length === 0) return; pendingReadyRef.current = false; + programmaticScrollToBottomRef.current = true; vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); // scrollToIndex is async; pre-empt atBottom so the "Jump to Latest" button // doesn't flash for one render cycle before onScroll confirms the position. From 7322febf6128b40248a75ad9f4bfb82d16bce9d0 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 10 Apr 2026 18:10:50 -0400 Subject: [PATCH 101/253] fix(timeline): set programmatic guard in scrollToBottom; keep guard active through all intermediate VList events MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously programmaticScrollToBottomRef was only set at a few specific call-sites and cleared after the first suppressed intermediate event. VList fires several height-correction scroll events after scrollTo(); the second one (after the clear) would call setAtBottom(false) and flash "Jump to Latest". - Move programmaticScrollToBottomRef.current = true into scrollToBottom() itself so all callers (live message arrival, timeline refresh, auto-scroll effect) are automatically guarded without missing a call-site. - Remove the guard clear in the else branch; the guard now stays active until VList explicitly confirms isNowAtBottom = true. fix(notifications): skip loadEventTimeline when event is already in live timeline When a notification tap opens a room, NotificationJumper was always navigating with the eventId URL path which triggered loadEventTimeline β†’ roomInitialSync. If sliding sync had already delivered the event to the live timeline this produced a sparse historical slice that (a) looked like a brand-new chat and (b) left the room empty when the user navigated away and returned without the eventId. Check whether the event is in the live timeline before navigating; if it is present, open the room at the live bottom instead. Historical events still use the eventId path. --- src/app/features/room/RoomTimeline.tsx | 16 +++++++++------- src/app/hooks/useNotificationJumper.ts | 25 +++++++++++++++++++++---- 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index cde3358e8..04afe2422 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -297,6 +297,9 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; + // Guard against VList's intermediate height-correction scroll events that + // would otherwise call setAtBottom(false) before the scroll settles. + programmaticScrollToBottomRef.current = true; vListRef.current.scrollTo(vListRef.current.scrollSize); }, []); @@ -745,14 +748,13 @@ export function RoomTimeline({ if (isNowAtBottom !== atBottomRef.current) { if (isNowAtBottom || !programmaticScrollToBottomRef.current) { setAtBottom(isNowAtBottom); - } else { - // VList fired an intermediate "not at bottom" event while settling after - // a programmatic scroll-to-bottom (e.g. height-correction pass). Suppress - // the false negative and clear the guard so the next event β€” either a - // VList correction to the true bottom, or a genuine user scroll β€” is - // processed normally. - programmaticScrollToBottomRef.current = false; } + // else: programmatic guard active β€” suppress the false-negative and keep + // the guard set. VList can fire several intermediate "not at bottom" + // events while it corrects item heights after a scrollTo(); clearing the + // guard on the first one would let the second cause a spurious + // setAtBottom(false) and flash the "Jump to Latest" button. The guard + // is cleared above (unconditionally) when isNowAtBottom becomes true. } if (offset < 500 && canPaginateBackRef.current && backwardStatusRef.current === 'idle') { diff --git a/src/app/hooks/useNotificationJumper.ts b/src/app/hooks/useNotificationJumper.ts index 43c358317..1eabd1cf4 100644 --- a/src/app/hooks/useNotificationJumper.ts +++ b/src/app/hooks/useNotificationJumper.ts @@ -52,13 +52,30 @@ export function NotificationJumper() { const isJoined = room?.getMyMembership() === 'join'; if (isSyncing && isJoined) { - log.log('jumping to:', pending.roomId, pending.eventId); + // If the notification event is already in the room's live timeline (i.e. + // sliding sync has already delivered it), open the room at the live bottom + // rather than using the eventId URL path. The eventId path triggers + // loadEventTimeline β†’ roomInitialSync which loads a historical slice that + // (a) may look like a brand-new chat if the event is the only one in the + // slice, and (b) makes the room appear empty when the user navigates away + // and returns without the eventId, because the sliding-sync live timeline + // hasn't been populated yet. Omitting the eventId for events already in + // the live timeline lets the room open normally at the bottom where the + // new message is visible. Historical events (not in live timeline) still + // use the eventId so loadEventTimeline can jump to the right context. + const liveEvents = room?.getUnfilteredTimelineSet?.()?.getLiveTimeline?.()?.getEvents?.(); + const eventInLive = + pending.eventId && liveEvents + ? liveEvents.some((e) => e.getId() === pending.eventId) + : false; + const resolvedEventId = eventInLive ? undefined : pending.eventId; + log.log('jumping to:', pending.roomId, resolvedEventId, { eventInLive }); jumpingRef.current = true; // Navigate directly to home or direct path β€” bypasses space routing which // on mobile shows the space-nav panel first instead of the room timeline. const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, pending.roomId); if (mDirects.has(pending.roomId)) { - navigate(getDirectRoomPath(roomIdOrAlias, pending.eventId)); + navigate(getDirectRoomPath(roomIdOrAlias, resolvedEventId)); } else { // If the room lives inside a space, route through the space path so // SpaceRouteRoomProvider can resolve it β€” HomeRouteRoomProvider only @@ -74,11 +91,11 @@ export function NotificationJumper() { getSpaceRoomPath( getCanonicalAliasOrRoomId(mx, parentSpace), roomIdOrAlias, - pending.eventId + resolvedEventId ) ); } else { - navigate(getHomeRoomPath(roomIdOrAlias, pending.eventId)); + navigate(getHomeRoomPath(roomIdOrAlias, resolvedEventId)); } } setPending(null); From bc4eb26e6854971190b091262c5bcf974f2b4100 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 11:13:25 -0400 Subject: [PATCH 102/253] fix(notifications): defer notification jump until live timeline is non-empty MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When the app wakes from a killed state and the user taps a notification, performJump fires during the initial sync window before the room's live timeline has been populated by sliding sync. Previously, eventInLive was always false in this case, so we fell back to loadEventTimeline β†’ roomInitialSync which loaded a sparse historical slice. On subsequent visits to the room without the eventId the room appeared empty because the live timeline was never populated for the initial roomInitialSync result. Two changes: 1. Guard: if the live timeline is completely empty, return early and wait rather than navigating β€” the RoomEvent.Timeline listener below retries once events start arriving. 2. Listen on RoomEvent.Timeline for the target room so performJump re-runs as soon as the first event arrives in the room, at which point the notification event is almost certainly also present so we can navigate without eventId (avoiding loadEventTimeline entirely). --- src/app/hooks/useNotificationJumper.ts | 30 ++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/src/app/hooks/useNotificationJumper.ts b/src/app/hooks/useNotificationJumper.ts index 1eabd1cf4..21ebac96f 100644 --- a/src/app/hooks/useNotificationJumper.ts +++ b/src/app/hooks/useNotificationJumper.ts @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef } from 'react'; import { useAtom, useAtomValue } from 'jotai'; import { useNavigate } from 'react-router-dom'; -import { SyncState, ClientEvent } from '$types/matrix-sdk'; +import { SyncState, ClientEvent, Room, RoomEvent, RoomEventHandlerMap } from '$types/matrix-sdk'; import { activeSessionIdAtom, pendingNotificationAtom } from '../state/sessions'; import { mDirectAtom } from '../state/mDirectList'; import { useSyncState } from './useSyncState'; @@ -63,11 +63,19 @@ export function NotificationJumper() { // the live timeline lets the room open normally at the bottom where the // new message is visible. Historical events (not in live timeline) still // use the eventId so loadEventTimeline can jump to the right context. - const liveEvents = room?.getUnfilteredTimelineSet?.()?.getLiveTimeline?.()?.getEvents?.(); - const eventInLive = - pending.eventId && liveEvents - ? liveEvents.some((e) => e.getId() === pending.eventId) - : false; + const liveEvents = + room?.getUnfilteredTimelineSet?.()?.getLiveTimeline?.()?.getEvents?.() ?? []; + const eventInLive = pending.eventId + ? liveEvents.some((e) => e.getId() === pending.eventId) + : false; + // If the live timeline is empty the room hasn't been populated by sliding + // sync yet. Defer navigation and let the RoomEvent.Timeline listener below + // retry once events arrive β€” by then the notification event will almost + // certainly be in the live timeline and we can skip loadEventTimeline. + if (!eventInLive && liveEvents.length === 0) { + log.log('live timeline empty, deferring jump...', { roomId: pending.roomId }); + return; + } const resolvedEventId = eventInLive ? undefined : pending.eventId; log.log('jumping to:', pending.roomId, resolvedEventId, { eventInLive }); jumpingRef.current = true; @@ -134,11 +142,21 @@ export function NotificationJumper() { if (!pending) return undefined; const onRoom = () => performJumpRef.current(); + // Re-check once events arrive in the target room β€” this fires shortly after + // the initial sync populates the live timeline, letting us verify whether + // the notification event is already there before falling back to + // loadEventTimeline (which creates a sparse historical slice that may make + // the room appear empty on subsequent visits without the eventId). + const onTimeline = (_evt: unknown, eventRoom: Room | undefined) => { + if (eventRoom?.roomId === pending.roomId) performJumpRef.current(); + }; mx.on(ClientEvent.Room, onRoom); + mx.on(RoomEvent.Timeline, onTimeline as RoomEventHandlerMap[RoomEvent.Timeline]); performJumpRef.current(); return () => { mx.removeListener(ClientEvent.Room, onRoom); + mx.removeListener(RoomEvent.Timeline, onTimeline as RoomEventHandlerMap[RoomEvent.Timeline]); }; }, [pending, mx]); // performJump intentionally omitted β€” use ref above From c3d7cf5c4b77cf8f310593625936e4e18f9ee01b Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 11:15:18 -0400 Subject: [PATCH 103/253] fix(timeline): skip scroll-cache save when viewing a historical eventId slice When the user taps a push notification and the app loads a historical sparse timeline via loadEventTimeline (eventId URL path), the VList item heights for those few events were being written to the room's scroll cache. On the next visit to the room (live timeline, many more events), the RoomTimeline mount read the stale cache and passed its heights to the new VList instance. The height mismatch between the sparse and live timelines caused incorrect scroll-position restoration, making the room appear to show stale or mispositioned messages. Guard the roomScrollCache.save call with !eventId so historical views never overwrite the live-timeline cache. The next live visit will either use the pre-existing (untouched) live cache or fall back to the first-visit 80 ms measurement path. --- src/app/features/room/RoomTimeline.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 04afe2422..bafa13776 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -757,6 +757,20 @@ export function RoomTimeline({ // is cleared above (unconditionally) when isNowAtBottom becomes true. } + // Keep the scroll cache fresh so the next visit to this room can restore + // position (and skip the 80 ms measurement wait) immediately on mount. + // Skip when viewing a historical slice via eventId: those item heights are + // for a sparse subset of events and would corrupt the cache for the next + // live-timeline visit, producing stale VList measurements and making the + // room appear to be at the wrong position (or visually empty) on re-entry. + if (!eventId) { + roomScrollCache.save(room.roomId, { + cache: v.cache, + scrollOffset: offset, + atBottom: isNowAtBottom, + }); + } + if (offset < 500 && canPaginateBackRef.current && backwardStatusRef.current === 'idle') { timelineSyncRef.current.handleTimelinePagination(true); } @@ -768,7 +782,7 @@ export function RoomTimeline({ timelineSyncRef.current.handleTimelinePagination(false); } }, - [setAtBottom] + [setAtBottom, room.roomId, eventId] ); const showLoadingPlaceholders = From 76c8f70ae499d5172031c93d8949ced768c51751 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 12:34:34 -0400 Subject: [PATCH 104/253] test(timeline): add useProcessedTimeline unit tests + fix stale itemIndex in stable-ref check --- .../timeline/useProcessedTimeline.test.ts | 290 ++++++++++++++++++ .../hooks/timeline/useProcessedTimeline.ts | 4 + 2 files changed, 294 insertions(+) create mode 100644 src/app/hooks/timeline/useProcessedTimeline.test.ts diff --git a/src/app/hooks/timeline/useProcessedTimeline.test.ts b/src/app/hooks/timeline/useProcessedTimeline.test.ts new file mode 100644 index 000000000..cc6f00072 --- /dev/null +++ b/src/app/hooks/timeline/useProcessedTimeline.test.ts @@ -0,0 +1,290 @@ +import { renderHook } from '@testing-library/react'; +import { describe, it, expect } from 'vitest'; +import type { EventTimeline, EventTimelineSet, MatrixEvent } from '$types/matrix-sdk'; +import { useProcessedTimeline } from './useProcessedTimeline'; + +// --------------------------------------------------------------------------- +// Minimal fakes +// --------------------------------------------------------------------------- + +function makeEvent( + id: string, + opts: { + sender?: string; + type?: string; + ts?: number; + content?: Record; + } = {} +): MatrixEvent { + const { + sender = '@alice:test', + type = 'm.room.message', + ts = 1_000, + content = { body: 'hello' }, + } = opts; + return { + getId: () => id, + getSender: () => sender, + isRedacted: () => false, + getTs: () => ts, + getType: () => type, + threadRootId: undefined, + getContent: () => content, + getRelation: () => null, + isRedaction: () => false, + } as unknown as MatrixEvent; +} + +const fakeTimelineSet = {} as EventTimelineSet; + +function makeTimeline(events: MatrixEvent[]): EventTimeline { + return { + getEvents: () => events, + getTimelineSet: () => fakeTimelineSet, + } as unknown as EventTimeline; +} + +/** Default options β€” keeps tests concise; individual tests override what they need. */ +const defaults = { + ignoredUsersSet: new Set(), + showHiddenEvents: false, + showTombstoneEvents: false, + mxUserId: '@alice:test', + readUptoEventId: undefined, + hideMembershipEvents: false, + hideNickAvatarEvents: false, + isReadOnly: false, + hideMemberInReadOnly: false, +} as const; + +// --------------------------------------------------------------------------- +// Helpers to derive `items` from a linked-timeline list +// index 0 = first event in first timeline, etc. +// --------------------------------------------------------------------------- +function makeItems(count: number, startIndex = 0): number[] { + return Array.from({ length: count }, (_, i) => startIndex + i); +} + +// --------------------------------------------------------------------------- +// Tests +// --------------------------------------------------------------------------- + +describe('useProcessedTimeline', () => { + it('returns an empty array when there are no events', () => { + const { result } = renderHook(() => + useProcessedTimeline({ + ...defaults, + items: [], + linkedTimelines: [makeTimeline([])], + }) + ); + expect(result.current).toHaveLength(0); + }); + + it('returns one ProcessedEvent per visible event', () => { + const events = [makeEvent('$e1'), makeEvent('$e2'), makeEvent('$e3')]; + const timeline = makeTimeline(events); + + const { result } = renderHook(() => + useProcessedTimeline({ + ...defaults, + items: makeItems(3), + linkedTimelines: [timeline], + }) + ); + + expect(result.current).toHaveLength(3); + expect(result.current[0].id).toBe('$e1'); + expect(result.current[2].id).toBe('$e3'); + }); + + it('collapses consecutive messages from the same sender within 2 minutes', () => { + const events = [ + makeEvent('$e1', { ts: 1_000 }), + makeEvent('$e2', { ts: 60_000 }), // same sender, ~1 min later + ]; + const timeline = makeTimeline(events); + + const { result } = renderHook(() => + useProcessedTimeline({ + ...defaults, + items: makeItems(2), + linkedTimelines: [timeline], + }) + ); + + expect(result.current[1].collapsed).toBe(true); + }); + + it('does NOT collapse messages from the same sender more than 2 minutes apart', () => { + const events = [ + makeEvent('$e1', { ts: 1_000 }), + makeEvent('$e2', { ts: 3 * 60_000 }), // 3 min later + ]; + const timeline = makeTimeline(events); + + const { result } = renderHook(() => + useProcessedTimeline({ + ...defaults, + items: makeItems(2), + linkedTimelines: [timeline], + }) + ); + + expect(result.current[1].collapsed).toBe(false); + }); + + // ------------------------------------------------------------------------- + // Stable-ref optimisation + // ------------------------------------------------------------------------- + + it('reuses the same ProcessedEvent reference when nothing changed (stable-ref)', () => { + const events = [makeEvent('$e1'), makeEvent('$e2')]; + const timeline = makeTimeline(events); + const items = makeItems(2); + + const { result, rerender } = renderHook( + ({ ver }) => + useProcessedTimeline({ + ...defaults, + items, + linkedTimelines: [timeline], + mutationVersion: ver, + }), + { initialProps: { ver: 0 } } + ); + + const firstRender = result.current; + + // Re-render with the same mutationVersion β€” refs should be reused + rerender({ ver: 0 }); + + expect(result.current[0]).toBe(firstRender[0]); + expect(result.current[1]).toBe(firstRender[1]); + }); + + it('creates fresh ProcessedEvent objects when mutationVersion increments', () => { + const events = [makeEvent('$e1'), makeEvent('$e2')]; + const timeline = makeTimeline(events); + const items = makeItems(2); + + const { result, rerender } = renderHook( + ({ ver }) => + useProcessedTimeline({ + ...defaults, + items, + linkedTimelines: [timeline], + mutationVersion: ver, + }), + { initialProps: { ver: 0 } } + ); + + const firstRender = result.current; + + // Bump mutation version β€” stale refs must not be reused + rerender({ ver: 1 }); + + expect(result.current[0]).not.toBe(firstRender[0]); + expect(result.current[1]).not.toBe(firstRender[1]); + }); + + it('creates fresh ProcessedEvent objects when itemIndex shifts after back-pagination', () => { + // Initial: one event at index 0 + const existingEvent = makeEvent('$existing'); + const timelineV1 = makeTimeline([existingEvent]); + + const { result, rerender } = renderHook( + ({ linkedTimelines, items }: { linkedTimelines: EventTimeline[]; items: number[] }) => + useProcessedTimeline({ + ...defaults, + items, + linkedTimelines, + mutationVersion: 0, // unchanged β€” only the itemIndex changes + }), + { + initialProps: { + linkedTimelines: [timelineV1], + items: [0], + }, + } + ); + + const firstRef = result.current[0]; + expect(firstRef.id).toBe('$existing'); + expect(firstRef.itemIndex).toBe(0); + + // Back-pagination prepends a new event at the front β€” existing event now at index 1 + const newEvent = makeEvent('$new'); + const timelineV2 = makeTimeline([newEvent, existingEvent]); + + rerender({ linkedTimelines: [timelineV2], items: [0, 1] }); + + const existingProcessed = result.current.find((e) => e.id === '$existing')!; + // itemIndex must be 1 (updated), NOT 0 (stale from previous render) + expect(existingProcessed.itemIndex).toBe(1); + // And it must be a new object, not the stale cached ref + expect(existingProcessed).not.toBe(firstRef); + }); + + it('filters events from ignored users', () => { + const events = [ + makeEvent('$e1', { sender: '@alice:test' }), + makeEvent('$e2', { sender: '@ignored:test' }), + makeEvent('$e3', { sender: '@alice:test' }), + ]; + const timeline = makeTimeline(events); + + const { result } = renderHook(() => + useProcessedTimeline({ + ...defaults, + items: makeItems(3), + linkedTimelines: [timeline], + ignoredUsersSet: new Set(['@ignored:test']), + }) + ); + + const ids = result.current.map((e) => e.id); + expect(ids).not.toContain('$e2'); + expect(ids).toContain('$e1'); + expect(ids).toContain('$e3'); + }); + + it('places willRenderNewDivider on the event immediately after readUptoEventId', () => { + const events = [ + makeEvent('$read', { sender: '@bob:test', ts: 1_000 }), + makeEvent('$new', { sender: '@bob:test', ts: 2_000 }), + ]; + const timeline = makeTimeline(events); + + const { result } = renderHook(() => + useProcessedTimeline({ + ...defaults, + items: makeItems(2), + linkedTimelines: [timeline], + mxUserId: '@alice:test', // different from sender so divider renders + readUptoEventId: '$read', + }) + ); + + expect(result.current[1].willRenderNewDivider).toBe(true); + }); + + it('places willRenderDayDivider between events on different calendar days', () => { + const DAY = 86_400_000; + const events = [ + makeEvent('$e1', { ts: 1_000 }), + makeEvent('$e2', { ts: 1_000 + DAY + 1 }), // next day + ]; + const timeline = makeTimeline(events); + + const { result } = renderHook(() => + useProcessedTimeline({ + ...defaults, + items: makeItems(2), + linkedTimelines: [timeline], + }) + ); + + expect(result.current[1].willRenderDayDivider).toBe(true); + }); +}); diff --git a/src/app/hooks/timeline/useProcessedTimeline.ts b/src/app/hooks/timeline/useProcessedTimeline.ts index ca0f4e1aa..eeb088a08 100644 --- a/src/app/hooks/timeline/useProcessedTimeline.ts +++ b/src/app/hooks/timeline/useProcessedTimeline.ts @@ -211,9 +211,13 @@ export function useProcessedTimeline({ // Reuse the previous ProcessedEvent object if all structural fields match, // so that React.memo on timeline item components can bail out cheaply. + // itemIndex must also be equal: after back-pagination the same eventId + // shifts to a higher VList index, so a stale itemIndex would break + // getRawIndexToProcessedIndex and focus-highlight comparisons. const prev = prevCache?.get(mEventId); const stable = prev && + prev.itemIndex === processed.itemIndex && prev.collapsed === collapsed && prev.willRenderNewDivider === willRenderNewDivider && prev.willRenderDayDivider === willRenderDayDivider && From 32c504c9285f9022292daafbc52328b71401dba6 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 18:14:01 -0400 Subject: [PATCH 105/253] perf(timeline): restore VList cache + skip 80 ms timer on room revisit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When navigating back to a previously-visited room, save the VList CacheSnapshot (item heights) and scroll offset on the way out, then on the way back: β€’ pass the snapshot as cache= to VList so item heights do not need to be remeasured (VList is keyed by room.roomId so it gets a fresh instance with the saved measurements) β€’ skip the 80 ms stabilisation timer β€” the measurements are already known, so the scroll lands immediately and setIsReady(true) is called without the artificial delay First-visit rooms retain the existing 80 ms behaviour unchanged. --- src/app/features/room/RoomTimeline.tsx | 74 +++++++++++++++++++------- src/app/utils/roomScrollCache.ts | 22 ++++++++ 2 files changed, 76 insertions(+), 20 deletions(-) create mode 100644 src/app/utils/roomScrollCache.ts diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index bafa13776..fba1acacf 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -14,6 +14,7 @@ import { useAtomValue, useSetAtom } from 'jotai'; import { PushProcessor, Room, Direction } from '$types/matrix-sdk'; import classNames from 'classnames'; import { VList, VListHandle } from 'virtua'; +import { roomScrollCache, RoomScrollCache } from '$utils/roomScrollCache'; import { as, Box, @@ -246,6 +247,8 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); + // Scroll cache snapshot loaded for the current room (populated on room change). + const scrollCacheForRoomRef = useRef(undefined); const [atBottomState, setAtBottomState] = useState(true); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { @@ -278,6 +281,18 @@ export function RoomTimeline({ const [isReady, setIsReady] = useState(false); if (currentRoomIdRef.current !== room.roomId) { + // Save outgoing room's scroll state so we can restore it on revisit. + const outgoing = vListRef.current; + if (outgoing && isReady) { + roomScrollCache.save(currentRoomIdRef.current, { + cache: outgoing.cache, + scrollOffset: outgoing.scrollOffset, + atBottom: atBottomRef.current, + }); + } + // Load incoming room's scroll cache (undefined for first-visit rooms). + scrollCacheForRoomRef.current = roomScrollCache.load(room.roomId); + hasInitialScrolledRef.current = false; mountScrollWindowRef.current = Date.now() + 3000; currentRoomIdRef.current = room.roomId; @@ -353,28 +368,45 @@ export function RoomTimeline({ timelineSync.liveTimelineLinked && vListRef.current ) { - vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); - // Store in a ref rather than a local so subsequent eventsLength changes - // (e.g. the onLifecycle timeline reset firing within 80 ms) do NOT - // cancel this timer through the useLayoutEffect cleanup. - initialScrollTimerRef.current = setTimeout(() => { - initialScrollTimerRef.current = undefined; - if (processedEventsRef.current.length > 0) { - programmaticScrollToBottomRef.current = true; - vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); - // Only mark ready once we've successfully scrolled. If processedEvents - // was empty when the timer fired (e.g. the onLifecycle reset cleared the - // timeline within the 80 ms window), defer setIsReady until the recovery - // effect below fires once events repopulate. - // scrollToIndex is async; pre-empt atBottom so the "Jump to Latest" - // button doesn't flash for one render cycle before onScroll confirms. - setAtBottom(true); - setIsReady(true); + const savedCache = scrollCacheForRoomRef.current; + hasInitialScrolledRef.current = true; + + if (savedCache) { + // Revisiting a room with a cached scroll state β€” restore position + // immediately and skip the 80 ms stabilisation timer entirely. + if (savedCache.atBottom) { + vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); } else { - pendingReadyRef.current = true; + vListRef.current.scrollTo(savedCache.scrollOffset); } - }, 80); - hasInitialScrolledRef.current = true; + setIsReady(true); + } else { + // First visit β€” original behaviour: scroll to bottom, then wait 80 ms + // for VList to finish measuring item heights before revealing the timeline. + vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); + // Store in a ref rather than a local so subsequent eventsLength changes + // (e.g. the onLifecycle timeline reset firing within 80 ms) do NOT + // cancel this timer through the useLayoutEffect cleanup. + initialScrollTimerRef.current = setTimeout(() => { + initialScrollTimerRef.current = undefined; + if (processedEventsRef.current.length > 0) { + programmaticScrollToBottomRef.current = true; + vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { + align: 'end', + }); + // Only mark ready once we've successfully scrolled. If processedEvents + // was empty when the timer fired (e.g. the onLifecycle reset cleared the + // timeline within the 80 ms window), defer setIsReady until the recovery + // effect below fires once events repopulate. + // scrollToIndex is async; pre-empt atBottom so the "Jump to Latest" + // button doesn't flash for one render cycle before onScroll confirms. + setAtBottom(true); + setIsReady(true); + } else { + pendingReadyRef.current = true; + } + }, 80); + } } // No cleanup return β€” the timer must survive eventsLength fluctuations. // It is cancelled on unmount by the dedicated effect below. @@ -1002,8 +1034,10 @@ export function RoomTimeline({ }} > + key={room.roomId} ref={vListRef} data={processedEvents} + cache={scrollCacheForRoomRef.current?.cache} shift={shift} className={css.messageList} style={{ diff --git a/src/app/utils/roomScrollCache.ts b/src/app/utils/roomScrollCache.ts new file mode 100644 index 000000000..7288ae0e4 --- /dev/null +++ b/src/app/utils/roomScrollCache.ts @@ -0,0 +1,22 @@ +import { CacheSnapshot } from 'virtua'; + +export type RoomScrollCache = { + /** VList item-size snapshot β€” restored via VList `cache=` prop on remount. */ + cache: CacheSnapshot; + /** Pixel scroll offset at the time the room was left. */ + scrollOffset: number; + /** Whether the view was pinned to the bottom (live) when the room was left. */ + atBottom: boolean; +}; + +/** Session-scoped, per-room scroll cache. Not persisted across page reloads. */ +const scrollCacheMap = new Map(); + +export const roomScrollCache = { + save(roomId: string, data: RoomScrollCache): void { + scrollCacheMap.set(roomId, data); + }, + load(roomId: string): RoomScrollCache | undefined { + return scrollCacheMap.get(roomId); + }, +}; From 57ce5a085a75ab14f323a70438fe30fde277b666 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 18:52:27 -0400 Subject: [PATCH 106/253] fix(timeline): correct scroll-cache save/load paths RoomTimeline mounts fresh per room (key={roomId} in RoomView), so the render-phase room-change block used for save/load never fires. - Init scrollCacheForRoomRef from roomScrollCache.load() on mount so the CacheSnapshot is actually provided to VList on first render. - Save the cache in handleVListScroll (and after the first-visit 80 ms timer) rather than in the unreachable room-change block. - Trim the room-change block to just the load + state-reset path (kept as a defensive fallback for any future scenario where room prop changes without remount). --- src/app/features/room/RoomTimeline.tsx | 37 ++++++++++++++++++-------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index fba1acacf..a3fc69468 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -247,8 +247,13 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - // Scroll cache snapshot loaded for the current room (populated on room change). - const scrollCacheForRoomRef = useRef(undefined); + // Load any cached scroll state for this room on mount. A fresh RoomTimeline is + // mounted per room (via key={roomId} in RoomView) so this is the only place we + // need to read the cache β€” the render-phase room-change block below only fires + // in the (hypothetical) case where the room prop changes without a remount. + const scrollCacheForRoomRef = useRef( + roomScrollCache.load(room.roomId) + ); const [atBottomState, setAtBottomState] = useState(true); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { @@ -281,16 +286,8 @@ export function RoomTimeline({ const [isReady, setIsReady] = useState(false); if (currentRoomIdRef.current !== room.roomId) { - // Save outgoing room's scroll state so we can restore it on revisit. - const outgoing = vListRef.current; - if (outgoing && isReady) { - roomScrollCache.save(currentRoomIdRef.current, { - cache: outgoing.cache, - scrollOffset: outgoing.scrollOffset, - atBottom: atBottomRef.current, - }); - } // Load incoming room's scroll cache (undefined for first-visit rooms). + // Covers the rare case where room prop changes without a remount. scrollCacheForRoomRef.current = roomScrollCache.load(room.roomId); hasInitialScrolledRef.current = false; @@ -394,6 +391,16 @@ export function RoomTimeline({ vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end', }); + // Persist the now-measured item heights so the next visit to this room + // can provide them to VList upfront and skip this 80 ms wait entirely. + const v = vListRef.current; + if (v) { + roomScrollCache.save(room.roomId, { + cache: v.cache, + scrollOffset: v.scrollOffset, + atBottom: true, + }); + } // Only mark ready once we've successfully scrolled. If processedEvents // was empty when the timer fired (e.g. the onLifecycle reset cleared the // timeline within the 80 ms window), defer setIsReady until the recovery @@ -803,6 +810,14 @@ export function RoomTimeline({ }); } + // Keep the scroll cache fresh so the next visit to this room can restore + // position (and skip the 80 ms measurement wait) immediately on mount. + roomScrollCache.save(room.roomId, { + cache: v.cache, + scrollOffset: offset, + atBottom: isNowAtBottom, + }); + if (offset < 500 && canPaginateBackRef.current && backwardStatusRef.current === 'idle') { timelineSyncRef.current.handleTimelinePagination(true); } From 2ee4554692726737c5ce0cb202ab8e08cdde4c4d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 20:57:10 -0400 Subject: [PATCH 107/253] fix(timeline): save scroll cache in pendingReadyRef recovery path --- src/app/features/room/RoomTimeline.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index a3fc69468..6d20b6880 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -947,8 +947,18 @@ export function RoomTimeline({ // scrollToIndex is async; pre-empt atBottom so the "Jump to Latest" button // doesn't flash for one render cycle before onScroll confirms the position. setAtBottom(true); + // The 80 ms timer's cache-save was skipped because processedEvents was empty + // when it fired. Save now so the next visit skips the timer. + const v = vListRef.current; + if (v) { + roomScrollCache.save(room.roomId, { + cache: v.cache, + scrollOffset: v.scrollOffset, + atBottom: true, + }); + } setIsReady(true); - }, [processedEvents.length, setAtBottom]); + }, [processedEvents.length, setAtBottom, room.roomId]); useEffect(() => { if (!onEditLastMessageRef) return; From bdea2e763f8d7ddd6e7d6bb30ec55f1c9e482b7f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 22:51:51 -0400 Subject: [PATCH 108/253] chore: add changeset for perf-timeline-scroll-cache --- .changeset/perf-timeline-scroll-cache.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/perf-timeline-scroll-cache.md diff --git a/.changeset/perf-timeline-scroll-cache.md b/.changeset/perf-timeline-scroll-cache.md new file mode 100644 index 000000000..259a0dd79 --- /dev/null +++ b/.changeset/perf-timeline-scroll-cache.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Cache VList item heights across room visits to restore scroll position instantly and skip the 80 ms opacity-fade stabilisation timer on revisit. From 89f463251ceeed08c52a892582d483173f2e7e82 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 9 Apr 2026 23:11:30 -0400 Subject: [PATCH 109/253] fix(timeline): preempt atBottom to prevent Jump to Latest flashing at bottom --- src/app/features/room/RoomTimeline.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 6d20b6880..0edd329b5 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -373,6 +373,9 @@ export function RoomTimeline({ // immediately and skip the 80 ms stabilisation timer entirely. if (savedCache.atBottom) { vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); + // scrollToIndex is async; pre-empt the button so it doesn't flash for + // one render cycle before VList's onScroll confirms the position. + setAtBottom(true); } else { vListRef.current.scrollTo(savedCache.scrollOffset); } @@ -957,6 +960,9 @@ export function RoomTimeline({ atBottom: true, }); } + // scrollToIndex is async; pre-empt atBottom so the "Jump to Latest" button + // doesn't flash for one render cycle before onScroll confirms the position. + setAtBottom(true); setIsReady(true); }, [processedEvents.length, setAtBottom, room.roomId]); From 394aca23dded5f5acf1d1149bcccbd367b659f9c Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 10 Apr 2026 08:55:55 -0400 Subject: [PATCH 110/253] fix(timeline): suppress intermediate VList scroll events after programmatic scroll-to-bottom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit After setIsReady(true) commits, virtua can fire onScroll events with isNowAtBottom=false during its height-correction pass (particularly on first visit when item heights above the viewport haven't been rendered yet). These intermediate events were driving atBottomState to false while isReady=true, flashing the 'Jump to Latest' button. Add programmaticScrollToBottomRef: set it before each scrollToIndex bottom-scroll, suppress the first intermediate false event (clearing the guard immediately), so the next event β€” the corrected position or a real user scroll β€” is processed normally. --- src/app/features/room/RoomTimeline.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 0edd329b5..8a7ffd2e3 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -372,6 +372,7 @@ export function RoomTimeline({ // Revisiting a room with a cached scroll state β€” restore position // immediately and skip the 80 ms stabilisation timer entirely. if (savedCache.atBottom) { + programmaticScrollToBottomRef.current = true; vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); // scrollToIndex is async; pre-empt the button so it doesn't flash for // one render cycle before VList's onScroll confirms the position. @@ -813,14 +814,6 @@ export function RoomTimeline({ }); } - // Keep the scroll cache fresh so the next visit to this room can restore - // position (and skip the 80 ms measurement wait) immediately on mount. - roomScrollCache.save(room.roomId, { - cache: v.cache, - scrollOffset: offset, - atBottom: isNowAtBottom, - }); - if (offset < 500 && canPaginateBackRef.current && backwardStatusRef.current === 'idle') { timelineSyncRef.current.handleTimelinePagination(true); } From 44c9dd2913598365513faa4dd180d26ef024a932 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 12:44:52 -0400 Subject: [PATCH 111/253] test(timeline): add roomScrollCache unit tests --- src/app/utils/roomScrollCache.test.ts | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/app/utils/roomScrollCache.test.ts diff --git a/src/app/utils/roomScrollCache.test.ts b/src/app/utils/roomScrollCache.test.ts new file mode 100644 index 000000000..f984feaee --- /dev/null +++ b/src/app/utils/roomScrollCache.test.ts @@ -0,0 +1,34 @@ +import { describe, it, expect } from 'vitest'; +import { roomScrollCache } from './roomScrollCache'; + +// CacheSnapshot is opaque in tests β€” cast a plain object. +const fakeCache = () => ({} as import('./roomScrollCache').RoomScrollCache['cache']); + +describe('roomScrollCache', () => { + it('load returns undefined for an unknown roomId', () => { + expect(roomScrollCache.load('!unknown:test')).toBeUndefined(); + }); + + it('stores and retrieves data for a roomId', () => { + const data = { cache: fakeCache(), scrollOffset: 120, atBottom: false }; + roomScrollCache.save('!room1:test', data); + expect(roomScrollCache.load('!room1:test')).toBe(data); + }); + + it('overwrites existing data when saved again for the same roomId', () => { + const first = { cache: fakeCache(), scrollOffset: 50, atBottom: true }; + const second = { cache: fakeCache(), scrollOffset: 200, atBottom: false }; + roomScrollCache.save('!room2:test', first); + roomScrollCache.save('!room2:test', second); + expect(roomScrollCache.load('!room2:test')).toBe(second); + }); + + it('keeps data for separate rooms independent', () => { + const a = { cache: fakeCache(), scrollOffset: 10, atBottom: true }; + const b = { cache: fakeCache(), scrollOffset: 20, atBottom: false }; + roomScrollCache.save('!roomA:test', a); + roomScrollCache.save('!roomB:test', b); + expect(roomScrollCache.load('!roomA:test')).toBe(a); + expect(roomScrollCache.load('!roomB:test')).toBe(b); + }); +}); From ac4fd94fdf8475d77b5b83ce4dc0fe235be3a6ab Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 17:24:33 -0400 Subject: [PATCH 112/253] fix: auto-format roomScrollCache test file for prettier compliance --- src/app/utils/roomScrollCache.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/utils/roomScrollCache.test.ts b/src/app/utils/roomScrollCache.test.ts index f984feaee..e77be9878 100644 --- a/src/app/utils/roomScrollCache.test.ts +++ b/src/app/utils/roomScrollCache.test.ts @@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest'; import { roomScrollCache } from './roomScrollCache'; // CacheSnapshot is opaque in tests β€” cast a plain object. -const fakeCache = () => ({} as import('./roomScrollCache').RoomScrollCache['cache']); +const fakeCache = () => ({}) as import('./roomScrollCache').RoomScrollCache['cache']; describe('roomScrollCache', () => { it('load returns undefined for an unknown roomId', () => { From 781a8e2b90b37458c6dce75e49906020a98e0d3d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 13 Apr 2026 22:45:17 -0400 Subject: [PATCH 113/253] refactor(timeline): replace eslint-disables with custom areEqual comparator for TimelineItem memo The unused-prop-types eslint disables relied on React.memo's default shallow comparator inspecting props not read in the component body. A custom areEqual function makes the re-render triggers explicit and self-documenting. --- src/app/features/room/RoomTimeline.tsx | 29 +++++++++++++------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 8a7ffd2e3..e0305d4a1 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -93,36 +93,37 @@ type TimelineRenderFn = (eventData: ProcessedEvent) => ReactNode; * version of `renderMatrixEvent`, set synchronously during each render cycle) * so stale-closure issues are avoided. * - * Props not used in the function body (`isHighlighted`, `isEditing`, etc.) are - * intentionally included: React.memo's default shallow-equality comparator - * inspects ALL props, so changing one of them for a specific item causes only - * that item to re-render (e.g. only the message being edited re-renders when - * editId changes). + * The custom `areEqual` comparator checks `data`, `isHighlighted`, `isEditing`, + * `isReplying`, `isOpenThread`, and `settingsEpoch` β€” re-rendering only the + * specific item whose volatile state changed. */ +/* eslint-disable react/no-unused-prop-types -- props consumed in areEqual, not component body */ interface TimelineItemProps { data: ProcessedEvent; renderRef: React.MutableRefObject; - // The props below are not read in the component body β€” they exist solely so - // React.memo's shallow-equality comparator sees them and re-renders only the - // affected item when they change. - // eslint-disable-next-line react/no-unused-prop-types isHighlighted: boolean; - // eslint-disable-next-line react/no-unused-prop-types isEditing: boolean; - // eslint-disable-next-line react/no-unused-prop-types isReplying: boolean; - // eslint-disable-next-line react/no-unused-prop-types isOpenThread: boolean; - // eslint-disable-next-line react/no-unused-prop-types settingsEpoch: object; } +/* eslint-enable react/no-unused-prop-types */ // Declared outside memo() so the callback receives a reference, not an inline // function expression (satisfies prefer-arrow-callback). function TimelineItemInner({ data, renderRef }: TimelineItemProps) { return <>{renderRef.current?.(data)}; } -const TimelineItem = memo(TimelineItemInner); +const TimelineItem = memo( + TimelineItemInner, + (prev, next) => + prev.data === next.data && + prev.isHighlighted === next.isHighlighted && + prev.isEditing === next.isEditing && + prev.isReplying === next.isReplying && + prev.isOpenThread === next.isOpenThread && + prev.settingsEpoch === next.settingsEpoch +); TimelineItem.displayName = 'TimelineItem'; const TimelineFloat = as<'div', css.TimelineFloatVariants>( From 4eeaa380192efac2b1f44bfdc63bbb255b86a133 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 10:01:36 -0400 Subject: [PATCH 114/253] feat(room-nav): show topic/last-message preview for space and home rooms --- src/app/features/room-nav/RoomNavItem.tsx | 10 +- .../features/settings/cosmetics/Themes.tsx | 31 ++++++ src/app/hooks/useRoomLastMessage.ts | 95 +++++++++++++++++++ src/app/pages/client/home/Home.tsx | 4 + src/app/pages/client/space/Space.tsx | 4 + src/app/state/settings.ts | 4 + 6 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 src/app/hooks/useRoomLastMessage.ts diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx index 22886c224..9689e2852 100644 --- a/src/app/features/room-nav/RoomNavItem.tsx +++ b/src/app/features/room-nav/RoomNavItem.tsx @@ -70,6 +70,7 @@ import { useAutoDiscoveryInfo } from '$hooks/useAutoDiscoveryInfo'; import { livekitSupport } from '$hooks/useLivekitSupport'; import { Presence, useUserPresence } from '$hooks/useUserPresence'; import { AvatarPresence, PresenceBadge } from '$components/presence'; +import { useRoomLastMessage } from '$hooks/useRoomLastMessage'; import { RoomNavUser } from './RoomNavUser'; /** @@ -258,6 +259,8 @@ type RoomNavItemProps = { showAvatar?: boolean; direct?: boolean; customDMCards?: boolean; + roomTopicPreview?: boolean; + roomMessagePreview?: boolean; }; export function RoomNavItem({ @@ -266,6 +269,8 @@ export function RoomNavItem({ showAvatar, direct, customDMCards, + roomTopicPreview = false, + roomMessagePreview = false, notificationMode, linkPath, }: RoomNavItemProps) { @@ -287,8 +292,11 @@ export function RoomNavItem({ const matrixRoomName = useRoomName(room); const roomName = (dmUserId && nicknames[dmUserId]) || matrixRoomName; const presence = useUserPresence(dmUserId ?? ''); + const lastMessage = useRoomLastMessage(!direct && roomMessagePreview ? room : undefined, mx); const getRoomTopic = useRoomTopic(room); - const roomTopic = direct ? ((customDMCards && getRoomTopic) ?? presence?.status) : undefined; + const roomTopic = direct + ? ((customDMCards && getRoomTopic) ?? presence?.status) + : (roomTopicPreview && getRoomTopic) || (roomMessagePreview ? lastMessage : undefined); const { navigateRoom } = useRoomNavigate(); const navigate = useNavigate(); diff --git a/src/app/features/settings/cosmetics/Themes.tsx b/src/app/features/settings/cosmetics/Themes.tsx index f543a19ea..0af66fb93 100644 --- a/src/app/features/settings/cosmetics/Themes.tsx +++ b/src/app/features/settings/cosmetics/Themes.tsx @@ -487,6 +487,11 @@ export function Appearance() { settingsAtom, 'closeFoldersByDefault' ); + const [roomTopicPreview, setRoomTopicPreview] = useSetting(settingsAtom, 'roomTopicPreview'); + const [roomMessagePreview, setRoomMessagePreview] = useSetting( + settingsAtom, + 'roomMessagePreview' + ); return ( @@ -529,6 +534,32 @@ export function Appearance() { /> + + + } + /> + + + + + } + /> + + eventToPreviewText(ev) !== undefined); + if (!match) return undefined; + const text = eventToPreviewText(match); + if (!text) return undefined; + + const senderId = match.getSender(); + let prefix: string; + if (senderId === mx.getUserId()) { + prefix = 'You'; + } else { + prefix = room.getMember(senderId ?? '')?.name ?? senderId ?? 'Unknown'; + } + return `${prefix}: ${text}`; +} + +/** + * Reactively returns a human-readable preview of the last message in a room's + * live timeline, prefixed with "You:" or the sender's display name. + * Listens to Timeline and Decrypted events so the preview updates as messages + * arrive or are decrypted. + * Pass `undefined` for room to disable (returns `undefined`). + */ +export function useRoomLastMessage( + room: Room | undefined, + mx: MatrixClient | undefined +): string | undefined { + const [text, setText] = useState(() => + room && mx ? getLastMessageText(room, mx) : undefined + ); + + useEffect(() => { + if (!room || !mx) { + setText(undefined); + return undefined; + } + setText(getLastMessageText(room, mx)); + + const update = () => setText(getLastMessageText(room, mx)); + room.on(RoomEventEnum.Timeline, update); + room.on(RoomEventEnum.LocalEchoUpdated, update); + + // Re-check when any event in this room is decrypted (encrypted β†’ plaintext). + const onDecrypted = (ev: MatrixEvent) => { + if (ev.getRoomId() === room.roomId) update(); + }; + mx.on(MatrixEventEvent.Decrypted, onDecrypted); + + return () => { + room.off(RoomEventEnum.Timeline, update); + room.off(RoomEventEnum.LocalEchoUpdated, update); + mx.off(MatrixEventEvent.Decrypted, onDecrypted); + }; + }, [room, mx]); + + return text; +} diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx index c25d99e30..5ceda0a1e 100644 --- a/src/app/pages/client/home/Home.tsx +++ b/src/app/pages/client/home/Home.tsx @@ -199,6 +199,8 @@ export function Home() { const notificationPreferences = useRoomsNotificationPreferencesContext(); const roomToUnread = useAtomValue(roomToUnreadAtom); const navigate = useNavigate(); + const [roomTopicPreview] = useSetting(settingsAtom, 'roomTopicPreview'); + const [roomMessagePreview] = useSetting(settingsAtom, 'roomMessagePreview'); const selectedRoomId = useSelectedRoom(); const createRoomSelected = useHomeCreateSelected(); @@ -344,6 +346,8 @@ export function Home() { Date: Sun, 12 Apr 2026 11:50:31 -0400 Subject: [PATCH 115/253] fix(sliding-sync): increase LIST_TIMELINE_LIMIT to 5 for message previews With timeline_limit: 1, if the latest event is a reaction or edit, the SDK drops it from getLiveTimeline() because it cannot resolve the parent event from a single-event batch. This leaves the timeline empty and breaks the room message preview. Fetching 5 events ensures the parent message is present alongside reactions/edits so the SDK places them correctly and getLastMessageText finds a displayable preview. --- src/client/slidingSync.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/client/slidingSync.ts b/src/client/slidingSync.ts index 43fdf39ea..9e3590098 100644 --- a/src/client/slidingSync.ts +++ b/src/client/slidingSync.ts @@ -34,9 +34,12 @@ export const LIST_SEARCH = 'search'; export const LIST_ROOM_SEARCH = 'room_search'; // Dynamic list key used for space-scoped room views. export const LIST_SPACE = 'space'; -// One event of timeline per list room is enough to compute unread counts; -// the full history is loaded when the user opens the room. -const LIST_TIMELINE_LIMIT = 1; +// A small number of timeline events per list room. Unread counts come from +// the server-side notification_count field, so a full history isn't needed. +// We fetch a few events (rather than 1) so that reactions and edits β€” which +// the SDK excludes from the main timeline when their parent event is absent β€” +// don't leave the timeline empty and break message previews. +const LIST_TIMELINE_LIMIT = 5; const DEFAULT_LIST_PAGE_SIZE = 250; const DEFAULT_POLL_TIMEOUT_MS = 20000; const DEFAULT_MAX_ROOMS = 5000; From 9036ec9ea7ff4632c5ad4d06b2de3056cfc88215 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 12:10:58 -0400 Subject: [PATCH 116/253] chore: add changeset for room-message-preview --- .changeset/room-message-preview.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/room-message-preview.md diff --git a/.changeset/room-message-preview.md b/.changeset/room-message-preview.md new file mode 100644 index 000000000..4f8d1cef8 --- /dev/null +++ b/.changeset/room-message-preview.md @@ -0,0 +1,5 @@ +--- +'@sable/client': minor +--- + +feat(room-nav): show topic and last-message preview for rooms in the sidebar, fetching enough timeline events to handle reactions and edits correctly From db9c1a41cf2cd84f115773efaa6e84a156f962ee Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 22:17:21 -0400 Subject: [PATCH 117/253] feat(dm-list): show latest message preview below room name --- src/app/features/room-nav/RoomNavItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx index 9689e2852..3ded50a4a 100644 --- a/src/app/features/room-nav/RoomNavItem.tsx +++ b/src/app/features/room-nav/RoomNavItem.tsx @@ -292,10 +292,10 @@ export function RoomNavItem({ const matrixRoomName = useRoomName(room); const roomName = (dmUserId && nicknames[dmUserId]) || matrixRoomName; const presence = useUserPresence(dmUserId ?? ''); - const lastMessage = useRoomLastMessage(!direct && roomMessagePreview ? room : undefined, mx); + const lastMessage = useRoomLastMessage(roomMessagePreview ? room : undefined, mx); const getRoomTopic = useRoomTopic(room); const roomTopic = direct - ? ((customDMCards && getRoomTopic) ?? presence?.status) + ? ((customDMCards && getRoomTopic) ?? lastMessage ?? presence?.status) : (roomTopicPreview && getRoomTopic) || (roomMessagePreview ? lastMessage : undefined); const { navigateRoom } = useRoomNavigate(); From 216aa6a77d67141e4cb46e9e7ad1c4dbdb2f7692 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 23:13:41 -0400 Subject: [PATCH 118/253] chore: add changeset for dm message preview --- .changeset/feat-dm-message-preview.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/feat-dm-message-preview.md diff --git a/.changeset/feat-dm-message-preview.md b/.changeset/feat-dm-message-preview.md new file mode 100644 index 000000000..ab8e37801 --- /dev/null +++ b/.changeset/feat-dm-message-preview.md @@ -0,0 +1,5 @@ +--- +'@sable/client': minor +--- + +feat(dm-list): show last-message preview below DM room name From b848ac23aaa4df18a98630c6d74863a4ab05056f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 00:18:31 -0400 Subject: [PATCH 119/253] feat(dm-list): add toggle to hide DM message preview --- src/app/features/room-nav/RoomNavItem.tsx | 5 ++++- src/app/features/settings/cosmetics/Themes.tsx | 9 +++++++++ src/app/pages/client/direct/Direct.tsx | 2 ++ src/app/state/settings.ts | 2 ++ 4 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx index 3ded50a4a..be950e3e1 100644 --- a/src/app/features/room-nav/RoomNavItem.tsx +++ b/src/app/features/room-nav/RoomNavItem.tsx @@ -261,6 +261,7 @@ type RoomNavItemProps = { customDMCards?: boolean; roomTopicPreview?: boolean; roomMessagePreview?: boolean; + dmMessagePreview?: boolean; }; export function RoomNavItem({ @@ -271,6 +272,7 @@ export function RoomNavItem({ customDMCards, roomTopicPreview = false, roomMessagePreview = false, + dmMessagePreview = true, notificationMode, linkPath, }: RoomNavItemProps) { @@ -292,7 +294,8 @@ export function RoomNavItem({ const matrixRoomName = useRoomName(room); const roomName = (dmUserId && nicknames[dmUserId]) || matrixRoomName; const presence = useUserPresence(dmUserId ?? ''); - const lastMessage = useRoomLastMessage(roomMessagePreview ? room : undefined, mx); + const showPreview = direct ? dmMessagePreview : roomMessagePreview; + const lastMessage = useRoomLastMessage(showPreview ? room : undefined, mx); const getRoomTopic = useRoomTopic(room); const roomTopic = direct ? ((customDMCards && getRoomTopic) ?? lastMessage ?? presence?.status) diff --git a/src/app/features/settings/cosmetics/Themes.tsx b/src/app/features/settings/cosmetics/Themes.tsx index 0af66fb93..7dc978dcd 100644 --- a/src/app/features/settings/cosmetics/Themes.tsx +++ b/src/app/features/settings/cosmetics/Themes.tsx @@ -482,6 +482,7 @@ function PageZoomInput() { export function Appearance() { const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji'); const [customDMCards, setCustomDMCards] = useSetting(settingsAtom, 'customDMCards'); + const [dmMessagePreview, setDmMessagePreview] = useSetting(settingsAtom, 'dmMessagePreview'); const [showEasterEggs, setShowEasterEggs] = useSetting(settingsAtom, 'showEasterEggs'); const [closeFoldersByDefault, setCloseFoldersByDefault] = useSetting( settingsAtom, @@ -532,6 +533,14 @@ export function Appearance() { description="Show a custom DM card instead of the DM-ed's details" after={} /> + + } + /> diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx index 11eae40c3..3b78f43aa 100644 --- a/src/app/pages/client/direct/Direct.tsx +++ b/src/app/pages/client/direct/Direct.tsx @@ -178,6 +178,7 @@ export function Direct() { const roomToUnread = useAtomValue(roomToUnreadAtom); const navigate = useNavigate(); const [customDMCards] = useSetting(settingsAtom, 'customDMCards'); + const [dmMessagePreview] = useSetting(settingsAtom, 'dmMessagePreview'); const createDirectSelected = useDirectCreateSelected(); @@ -296,6 +297,7 @@ export function Direct() { showAvatar direct customDMCards={customDMCards} + dmMessagePreview={dmMessagePreview} linkPath={getDirectRoomPath(getCanonicalAliasOrRoomId(mx, roomId))} notificationMode={getRoomNotificationMode( notificationPreferences, diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index d60f3e829..36dba8cb0 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -120,6 +120,7 @@ export interface Settings { closeFoldersByDefault: boolean; roomTopicPreview: boolean; roomMessagePreview: boolean; + dmMessagePreview: boolean; // furry stuff renderAnimals: boolean; @@ -223,6 +224,7 @@ const defaultSettings: Settings = { closeFoldersByDefault: false, roomTopicPreview: false, roomMessagePreview: false, + dmMessagePreview: true, // furry stuff renderAnimals: true, From ec10020bd83a4be97df9bf556225d86249ec91c0 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 09:32:44 -0400 Subject: [PATCH 120/253] fix(settings): give DM Message Preview its own card in Visual Tweaks --- src/app/features/settings/cosmetics/Themes.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/features/settings/cosmetics/Themes.tsx b/src/app/features/settings/cosmetics/Themes.tsx index 7dc978dcd..0df6e5ade 100644 --- a/src/app/features/settings/cosmetics/Themes.tsx +++ b/src/app/features/settings/cosmetics/Themes.tsx @@ -533,6 +533,9 @@ export function Appearance() { description="Show a custom DM card instead of the DM-ed's details" after={} /> + + + Date: Mon, 13 Apr 2026 22:50:43 -0400 Subject: [PATCH 121/253] refactor(sliding-sync): gate listTimelineLimit behind message preview settings LIST_TIMELINE_LIMIT is now configurable via SlidingSyncConfig.listTimelineLimit (default: 1). When dmMessagePreview or roomMessagePreview is enabled, the limit is bumped to 5 so reactions/edits don't leave the preview empty. Users with both preview settings disabled keep the lightweight limit of 1. --- src/app/pages/client/ClientRoot.tsx | 15 +++++++++++---- src/client/slidingSync.ts | 25 ++++++++++++++----------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx index 1a653e950..754c28bef 100644 --- a/src/app/pages/client/ClientRoot.tsx +++ b/src/app/pages/client/ClientRoot.tsx @@ -48,6 +48,7 @@ import { useSyncNicknames } from '$hooks/useNickname'; import { useAppVisibility } from '$hooks/useAppVisibility'; import { getHomePath } from '$pages/pathUtils'; import { useClientConfig } from '$hooks/useClientConfig'; +import { getSettings } from '$state/settings'; import { pushSessionToSW } from '../../../sw-session'; import { SyncStatus } from './SyncStatus'; import { SpecVersions } from './SpecVersions'; @@ -212,12 +213,18 @@ export function ClientRoot({ children }: ClientRootProps) { const [startState, startMatrix] = useAsyncCallback( useCallback( - (m) => - startClient(m, { + (m) => { + const s = getSettings(); + const needsPreviewTimeline = s.dmMessagePreview || s.roomMessagePreview; + return startClient(m, { baseUrl: activeSession?.baseUrl, - slidingSync: clientConfig.slidingSync, + slidingSync: { + ...clientConfig.slidingSync, + listTimelineLimit: needsPreviewTimeline ? 5 : undefined, + }, sessionSlidingSyncOptIn: activeSession?.slidingSyncOptIn, - }), + }); + }, [activeSession?.baseUrl, activeSession?.slidingSyncOptIn, clientConfig.slidingSync] ) ); diff --git a/src/client/slidingSync.ts b/src/client/slidingSync.ts index 9e3590098..802157123 100644 --- a/src/client/slidingSync.ts +++ b/src/client/slidingSync.ts @@ -36,10 +36,9 @@ export const LIST_ROOM_SEARCH = 'room_search'; export const LIST_SPACE = 'space'; // A small number of timeline events per list room. Unread counts come from // the server-side notification_count field, so a full history isn't needed. -// We fetch a few events (rather than 1) so that reactions and edits β€” which -// the SDK excludes from the main timeline when their parent event is absent β€” -// don't leave the timeline empty and break message previews. -const LIST_TIMELINE_LIMIT = 5; +// When message previews are enabled, a higher limit (e.g. 5) avoids empty +// timelines caused by reactions/edits whose parent event is absent. +const DEFAULT_LIST_TIMELINE_LIMIT = 1; const DEFAULT_LIST_PAGE_SIZE = 250; const DEFAULT_POLL_TIMEOUT_MS = 20000; const DEFAULT_MAX_ROOMS = 5000; @@ -53,7 +52,7 @@ const LIST_SORT_ORDER = ['by_recency', 'by_name']; // Encrypted rooms get [*,*] required_state; unencrypted rooms also request lazy members. const UNENCRYPTED_SUBSCRIPTION_KEY = 'unencrypted'; // Timeline limit for the active-room subscription (full history load). -// List entries always use LIST_TIMELINE_LIMIT=1 for lightweight previews. +// List entries use a small timeline limit (default 1) for lightweight previews. const ACTIVE_ROOM_TIMELINE_LIMIT = 50; export type PartialSlidingSyncRequest = { @@ -67,6 +66,7 @@ export type SlidingSyncConfig = { proxyBaseUrl?: string; bootstrapClassicOnColdCache?: boolean; listPageSize?: number; + listTimelineLimit?: number; timelineLimit?: number; pollTimeoutMs?: number; maxRooms?: number; @@ -147,7 +147,7 @@ const buildUnencryptedSubscription = (timelineLimit: number): MSC3575RoomSubscri ], }); -const buildLists = (pageSize: number, includeInviteList: boolean): Map => { +const buildLists = (pageSize: number, includeInviteList: boolean, listTimelineLimit: number): Map => { const lists = new Map(); const listRequiredState = buildListRequiredState(); @@ -159,7 +159,7 @@ const buildLists = (pageSize: number, includeInviteList: boolean): Map void; @@ -303,12 +305,13 @@ export class SlidingSyncManager { this.maxRooms = clampPositive(config.maxRooms, DEFAULT_MAX_ROOMS); this.listPageSize = listPageSize; const includeInviteList = config.includeInviteList !== false; + this.listTimelineLimit = clampPositive(config.listTimelineLimit, DEFAULT_LIST_TIMELINE_LIMIT); const roomTimelineLimit = clampPositive(config.timelineLimit, ACTIVE_ROOM_TIMELINE_LIMIT); this.roomTimelineLimit = roomTimelineLimit; const defaultSubscription = buildEncryptedSubscription(roomTimelineLimit); - const lists = buildLists(listPageSize, includeInviteList); + const lists = buildLists(listPageSize, includeInviteList, this.listTimelineLimit); this.listKeys = Array.from(lists.keys()); this.slidingSync = new SlidingSync(proxyBaseUrl, lists, defaultSubscription, mx, pollTimeoutMs); @@ -720,7 +723,7 @@ export class SlidingSyncManager { list = { ranges: [[0, 20]], sort: LIST_SORT_ORDER, - timeline_limit: LIST_TIMELINE_LIMIT, + timeline_limit: this.listTimelineLimit, required_state: buildListRequiredState(), ...updateArgs, }; From 581f2cecbd09c1891ff0656028f304f30f0b6a04 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 31 Mar 2026 10:46:35 -0400 Subject: [PATCH 122/253] feat(dev-tools): add rotate-sessions developer tool --- .../settings/developer-tools/DevelopTools.tsx | 82 ++++++++++++++++++- 1 file changed, 81 insertions(+), 1 deletion(-) diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index c8ffeb12d..6478d9582 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -1,5 +1,6 @@ import { useCallback, useState } from 'react'; -import { Box, Text, Scroll, Switch, Button } from 'folds'; +import { Box, Text, Scroll, Switch, Button, Spinner, color } from 'folds'; +import { KnownMembership } from 'matrix-js-sdk/lib/types'; import { PageContent } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -10,6 +11,7 @@ import { AccountDataEditor, AccountDataSubmitCallback } from '$components/Accoun import { copyToClipboard } from '$utils/dom'; import { SequenceCardStyle } from '$features/settings/styles.css'; import { SettingsSectionPage } from '../SettingsSectionPage'; +import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { AccountData } from './AccountData'; import { SyncDiagnostics } from './SyncDiagnostics'; import { DebugLogViewer } from './DebugLogViewer'; @@ -25,6 +27,33 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp const [expand, setExpend] = useState(false); const [accountDataType, setAccountDataType] = useState(); + const [rotateState, rotateAllSessions] = useAsyncCallback< + { rotated: number; total: number }, + Error, + [] + >( + useCallback(async () => { + const crypto = mx.getCrypto(); + if (!crypto) throw new Error('Crypto module not available'); + + const encryptedRooms = mx + .getRooms() + .filter( + (room) => + room.getMyMembership() === KnownMembership.Join && mx.isRoomEncrypted(room.roomId) + ); + + await Promise.all(encryptedRooms.map((room) => crypto.forceDiscardSession(room.roomId))); + const rotated = encryptedRooms.length; + + // Proactively start session creation + key sharing with all devices + // (including bridge bots). fire-and-forget per room. + encryptedRooms.forEach((room) => crypto.prepareToEncrypt(room)); + + return { rotated, total: encryptedRooms.length }; + }, [mx]) + ); + const submitAccountData: AccountDataSubmitCallback = useCallback( async (type, content) => { // TODO: remove cast once account data typing is unified. @@ -109,6 +138,57 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp )} {developerTools && } + {developerTools && ( + + Encryption + + + ) + } + > + + {rotateState.status === AsyncStatus.Loading ? 'Rotating…' : 'Rotate'} + + + } + > + {rotateState.status === AsyncStatus.Success && ( + + Sessions discarded for {rotateState.data.rotated} of{' '} + {rotateState.data.total} encrypted rooms. Key sharing is starting in the + background β€” send a message in an affected room to confirm delivery to + bridges. + + )} + {rotateState.status === AsyncStatus.Error && ( + + {rotateState.error.message} + + )} + + + + )} {developerTools && ( Date: Tue, 31 Mar 2026 12:06:31 -0400 Subject: [PATCH 123/253] chore: add changeset for devtool-rotate-sessions --- .changeset/devtool-rotate-sessions.md | 5 +++++ src/app/features/settings/developer-tools/DevelopTools.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/devtool-rotate-sessions.md diff --git a/.changeset/devtool-rotate-sessions.md b/.changeset/devtool-rotate-sessions.md new file mode 100644 index 000000000..2730ad8e6 --- /dev/null +++ b/.changeset/devtool-rotate-sessions.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Add rotate-sessions developer tool to force session rotation for testing diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index 6478d9582..c9d934aec 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -10,8 +10,8 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { AccountDataEditor, AccountDataSubmitCallback } from '$components/AccountDataEditor'; import { copyToClipboard } from '$utils/dom'; import { SequenceCardStyle } from '$features/settings/styles.css'; -import { SettingsSectionPage } from '../SettingsSectionPage'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; +import { SettingsSectionPage } from '../SettingsSectionPage'; import { AccountData } from './AccountData'; import { SyncDiagnostics } from './SyncDiagnostics'; import { DebugLogViewer } from './DebugLogViewer'; From ce11afe96d23e3564f8e9c09f40fed3993cafc01 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 13 Apr 2026 16:23:37 -0400 Subject: [PATCH 124/253] fix(ui): phantom unread dot + blank notification page recovery - room.ts: exclude own events from unread notification check - RoomTimeline.tsx: recovery effect reveals timeline when event load fails --- src/app/features/room/RoomTimeline.tsx | 15 +++++++++++++++ src/app/utils/room.ts | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index d026ec1fa..3ab6560f6 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -405,6 +405,21 @@ export function RoomTimeline({ } }, [timelineSync.focusItem]); + // Recovery: if event timeline load failed and fell back to live timeline, + // reveal the timeline so the user doesn't see a blank page. + useEffect(() => { + if (eventId && !isReady && timelineSync.liveTimelineLinked && timelineSync.eventsLength > 0) { + scrollToBottom(); + setIsReady(true); + } + }, [ + eventId, + isReady, + timelineSync.liveTimelineLinked, + timelineSync.eventsLength, + scrollToBottom, + ]); + useEffect(() => { if (!eventId) return; setIsReady(false); diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts index 9391dbc90..d7a36b338 100644 --- a/src/app/utils/room.ts +++ b/src/app/utils/room.ts @@ -276,7 +276,7 @@ export const roomHaveUnread = (mx: MatrixClient, room: Room) => { if (event.getId() === readUpToId) { return false; } - if (isNotificationEvent(event, room, userId)) { + if (isNotificationEvent(event, room, userId) && event.getSender() !== userId) { return true; } } From 4b29d2990ea447f2a005f2fa184d2cfae91085da Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 15:20:39 -0400 Subject: [PATCH 125/253] fix: use || instead of ?? for DM preview fallback chain The nullish coalescing operator (??) only falls through on null/undefined, but (customDMCards && getRoomTopic) can evaluate to false or empty string, which blocked the fallback to lastMessage. Using || ensures all falsy values correctly fall through to show the message preview. This caused DM message previews to not appear in /direct while the same rooms showed previews in space views (where customDMCards was undefined). --- src/app/features/room-nav/RoomNavItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx index be950e3e1..68ead11d8 100644 --- a/src/app/features/room-nav/RoomNavItem.tsx +++ b/src/app/features/room-nav/RoomNavItem.tsx @@ -298,7 +298,7 @@ export function RoomNavItem({ const lastMessage = useRoomLastMessage(showPreview ? room : undefined, mx); const getRoomTopic = useRoomTopic(room); const roomTopic = direct - ? ((customDMCards && getRoomTopic) ?? lastMessage ?? presence?.status) + ? (customDMCards && getRoomTopic) || lastMessage || presence?.status : (roomTopicPreview && getRoomTopic) || (roomMessagePreview ? lastMessage : undefined); const { navigateRoom } = useRoomNavigate(); From 1939599f8b714044016bc38ee07a1dae35f4df54 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 15:44:11 -0400 Subject: [PATCH 126/253] =?UTF-8?q?fix:=20use=20useLayoutEffect=20for=20au?= =?UTF-8?q?to-scroll=20recovery=20after=20timeline=20reset=20=20When=20sli?= =?UTF-8?q?ding=20sync=20upgrades=20a=20room=20subscription=20(timeline=5F?= =?UTF-8?q?limit=201=20=E2=86=92=2050),=20a=20TimelineReset=20replaces=20t?= =?UTF-8?q?he=20VList=20content.=20The=20auto-scroll=20recovery=20was=20us?= =?UTF-8?q?ing=20useEffect,=20which=20fires=20after=20paint=20=E2=80=94=20?= =?UTF-8?q?causing=20a=20visible=20flash=20where=20the=20user=20sees=20con?= =?UTF-8?q?tent=20at=20the=20wrong=20scroll=20position=20for=20one=20frame?= =?UTF-8?q?.=20=20Switch=20to=20useLayoutEffect=20so=20the=20scroll=20posi?= =?UTF-8?q?tion=20is=20corrected=20before=20the=20browser=20paints.=20Also?= =?UTF-8?q?=20remove=20the=20redundant=20scrollToBottom=20call=20from=20th?= =?UTF-8?q?e=20useLiveTimelineRefresh=20callback,=20which=20was=20operatin?= =?UTF-8?q?g=20on=20the=20pre-commit=20DOM=20with=20a=20stale=20scrollSize?= =?UTF-8?q?.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/hooks/timeline/useTimelineSync.ts | 25 +++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 51c85dda8..0fa27af17 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -1,4 +1,13 @@ -import { useState, useMemo, useCallback, useRef, useEffect, Dispatch, SetStateAction } from 'react'; +import { + useState, + useMemo, + useCallback, + useRef, + useEffect, + useLayoutEffect, + Dispatch, + SetStateAction, +} from 'react'; import to from 'await-to-js'; import * as Sentry from '@sentry/react'; import { @@ -527,10 +536,10 @@ export function useTimelineSync({ const wasAtBottom = isAtBottomRef.current; resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - if (wasAtBottom) { - scrollToBottom('instant'); - } - }, [room, isAtBottomRef, scrollToBottom]) + // Scroll is handled by the useLayoutEffect auto-scroll recovery which + // fires after React commits the new timeline state β€” scrolling here + // would operate on the pre-commit DOM with a stale scrollSize. + }, [room, isAtBottomRef]) ); useRelationUpdate( @@ -547,7 +556,11 @@ export function useTimelineSync({ }, []) ); - useEffect(() => { + // useLayoutEffect so the scroll position is corrected before the browser + // paints. Without this, a sliding-sync subscription upgrade (timeline_limit + // 1 β†’ 50) replaces the VList content and the user sees one frame at the + // wrong scroll position before the useEffect-based scroll fires. + useLayoutEffect(() => { const resetAutoScrollPending = resetAutoScrollPendingRef.current; if (resetAutoScrollPending) resetAutoScrollPendingRef.current = false; From 77fbe22c399661d2a2b52b50b428b58270a3fa83 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 16:06:52 -0400 Subject: [PATCH 127/253] fix(timeline): use scrollToIndex for stay-at-bottom and remove premature scroll MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit scrollToBottom used scrollTo(scrollSize) which reads a stale pixel offset before VList has measured newly-arrived items. Switch to scrollToIndex(lastIndex, { align: 'end' }) which works reliably regardless of measurement state. Remove the premature scrollToBottom call from useLiveEventArrive β€” it fired before React committed the new timeline state, so scrollSize was stale and the auto-scroll useLayoutEffect was suppressed by lastScrolledAtEventsLengthRef. The useLayoutEffect now handles all stay-at-bottom scrolling after commit. --- src/app/features/room/RoomTimeline.tsx | 5 ++++- src/app/hooks/timeline/useTimelineSync.ts | 8 +------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 3ab6560f6..f674009bb 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -245,7 +245,10 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; - vListRef.current.scrollTo(vListRef.current.scrollSize); + // Guard against VList's intermediate height-correction scroll events that + // would otherwise call setAtBottom(false) before the scroll settles. + programmaticScrollToBottomRef.current = true; + vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); }, []); const timelineSync = useTimelineSync({ diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 0fa27af17..c8c48f548 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -475,9 +475,6 @@ export function useTimelineSync({ const lastScrolledAtEventsLengthRef = useRef(eventsLength); - const eventsLengthRef = useRef(eventsLength); - eventsLengthRef.current = eventsLength; - useLiveEventArrive( room, useCallback( @@ -499,9 +496,6 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } - scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); - lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; - setTimeline((ct) => ({ ...ct })); return; } @@ -511,7 +505,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } }, - [mx, room, isAtBottomRef, unreadInfo, scrollToBottom, setUnreadInfo, hideReadsRef] + [mx, room, isAtBottomRef, unreadInfo, setUnreadInfo, hideReadsRef] ) ); From fa8bb1e7b65031e33b8c363b68f6fedd0040ece3 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 19:41:31 -0400 Subject: [PATCH 128/253] =?UTF-8?q?fix(timeline):=20use=20timestamp-based?= =?UTF-8?q?=20settling=20window=20to=20suppress=20spurious=20Jump=20to=20L?= =?UTF-8?q?atest=20button=20=20Replace=20the=20boolean=20programmaticScrol?= =?UTF-8?q?lToBottomRef=20guard=20with=20a=20timestamp=20(Date.now())=20an?= =?UTF-8?q?d=20a=20200=20ms=20settling=20window=20(SCROLL=5FSETTLE=5FMS).?= =?UTF-8?q?=20=20VList=20(virtua)=20fires=20multiple=20intermediate=20onSc?= =?UTF-8?q?roll=20events=20while=20re-measuring=20item=20heights=20after?= =?UTF-8?q?=20a=20programmatic=20scrollToIndex();=20the=20old=20boolean=20?= =?UTF-8?q?guard=20was=20cleared=20on=20the=20first=20isNowAtBottom=3Dtrue?= =?UTF-8?q?=20callback,=20leaving=20subsequent=20re-measurement=20callback?= =?UTF-8?q?s=20free=20to=20set=20atBottom=3Dfalse=20and=20flash=20the=20bu?= =?UTF-8?q?tton.=20=20The=20timestamp=20approach=20lets=20the=20settling?= =?UTF-8?q?=20window=20expire=20naturally=20=E2=80=94=20no=20manual=20clea?= =?UTF-8?q?ring=20is=20needed=20=E2=80=94=20and=20correctly=20suppresses?= =?UTF-8?q?=20false-negative=20reports=20for=20the=20entire=20measurement?= =?UTF-8?q?=20pass.=20=20Also=20update=20the=20useTimelineSync=20test=20to?= =?UTF-8?q?=20push=20a=20new=20event=20before=20emitting=20TimelineReset?= =?UTF-8?q?=20so=20the=20useLayoutEffect=20auto-scroll=20recovery=20(which?= =?UTF-8?q?=20depends=20on=20eventsLength=20changing)=20actually=20fires.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/features/room/RoomTimeline.tsx | 24 +++++++++++++++++-- .../hooks/timeline/useTimelineSync.test.tsx | 5 +++- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index f674009bb..c42cc0708 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -224,6 +224,13 @@ export function RoomTimeline({ const pendingReadyRef = useRef(false); const currentRoomIdRef = useRef(room.roomId); + // Timestamp (epoch ms) of the last programmatic scrollToIndex call. + // While Date.now() - ref < SCROLL_SETTLE_MS the handleVListScroll callback + // suppresses false-negative "not at bottom" reports that VList fires during + // its height re-measurement pass. + const SCROLL_SETTLE_MS = 200; + const programmaticScrollToBottomRef = useRef(0); + const [isReady, setIsReady] = useState(false); if (currentRoomIdRef.current !== room.roomId) { @@ -231,6 +238,7 @@ export function RoomTimeline({ mountScrollWindowRef.current = Date.now() + 3000; currentRoomIdRef.current = room.roomId; pendingReadyRef.current = false; + programmaticScrollToBottomRef.current = 0; if (initialScrollTimerRef.current !== undefined) { clearTimeout(initialScrollTimerRef.current); initialScrollTimerRef.current = undefined; @@ -247,7 +255,7 @@ export function RoomTimeline({ if (lastIndex < 0) return; // Guard against VList's intermediate height-correction scroll events that // would otherwise call setAtBottom(false) before the scroll settles. - programmaticScrollToBottomRef.current = true; + programmaticScrollToBottomRef.current = Date.now(); vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); }, []); @@ -301,6 +309,7 @@ export function RoomTimeline({ timelineSync.liveTimelineLinked && vListRef.current ) { + programmaticScrollToBottomRef.current = Date.now(); vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); // Store in a ref rather than a local so subsequent eventsLength changes // (e.g. the onLifecycle timeline reset firing within 80 ms) do NOT @@ -308,6 +317,7 @@ export function RoomTimeline({ initialScrollTimerRef.current = setTimeout(() => { initialScrollTimerRef.current = undefined; if (processedEventsRef.current.length > 0) { + programmaticScrollToBottomRef.current = Date.now(); vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); // Only mark ready once we've successfully scrolled. If processedEvents // was empty when the timer fired (e.g. the onLifecycle reset cleared the @@ -649,8 +659,17 @@ export function RoomTimeline({ const distanceFromBottom = v.scrollSize - offset - v.viewportSize; const isNowAtBottom = distanceFromBottom < 100; + + // During the settling window after a programmatic scroll, suppress + // false-negative "not at bottom" reports from VList. Virtua fires + // several intermediate onScroll events while re-measuring item heights + // after scrollToIndex(); without this guard those would flash the + // "Jump to Latest" button for one or more render frames. + const isSettling = Date.now() - programmaticScrollToBottomRef.current < SCROLL_SETTLE_MS; if (isNowAtBottom !== atBottomRef.current) { - setAtBottom(isNowAtBottom); + if (isNowAtBottom || !isSettling) { + setAtBottom(isNowAtBottom); + } } if (offset < 500 && canPaginateBackRef.current && backwardStatusRef.current === 'idle') { @@ -770,6 +789,7 @@ export function RoomTimeline({ if (!pendingReadyRef.current) return; if (processedEvents.length === 0) return; pendingReadyRef.current = false; + programmaticScrollToBottomRef.current = Date.now(); vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); setIsReady(true); }, [processedEvents.length]); diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index d53d74143..0b89fb6a2 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -107,7 +107,7 @@ describe('useTimelineSync', () => { }); it('keeps a bottom-pinned user anchored after TimelineReset', async () => { - const { room, timelineSet } = createRoom(); + const { room, timelineSet, events } = createRoom(); const scrollToBottom = vi.fn(); renderHook(() => @@ -125,6 +125,9 @@ describe('useTimelineSync', () => { ); await act(async () => { + // Simulate the SDK replacing the live timeline with new events, + // which is what a real TimelineReset does. + events.push({}); timelineSet.emit(RoomEvent.TimelineReset); await Promise.resolve(); }); From 2202bec58b871386f23e3cfbd54fd521b39dbb10 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 22:53:32 -0400 Subject: [PATCH 129/253] fix(bookmarks): add Fragment key, guard missing eventId, fix removeBookmark doc comment - Wrap grouped bookmark list items in instead of un-keyed <> - Return null from MessageBookmarkItem when mEvent.getId() is undefined - Update removeBookmark doc comment to match item-first deletion ordering --- src/app/features/bookmarks/bookmarkRepository.ts | 11 +++++++---- src/app/features/room/message/Message.tsx | 5 +++-- src/app/pages/client/bookmarks/BookmarksList.tsx | 7 +++---- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/app/features/bookmarks/bookmarkRepository.ts b/src/app/features/bookmarks/bookmarkRepository.ts index bd9cda928..1b6cf0208 100644 --- a/src/app/features/bookmarks/bookmarkRepository.ts +++ b/src/app/features/bookmarks/bookmarkRepository.ts @@ -74,12 +74,15 @@ export async function addBookmark(mx: MatrixClient, item: BookmarkItemContent): * Remove a bookmark. * * MSC4438 Β§Removing a bookmark: - * 1. Remove the ID from the index. - * 2. Soft-delete the item (set deleted: true). + * 1. Soft-delete the item first (set deleted: true). + * 2. Remove the ID from the index. + * 3. Increment revision and update timestamp. + * 4. Write the updated index. * * Account data events cannot be deleted from the server, so soft-deletion is - * used. Other clients that encounter the item event can see it is explicitly - * removed. + * used. This implementation intentionally tombstones the item before updating + * the index to mirror addBookmark()'s item-first ordering and avoid transient + * orphan recovery/resurrection if a removal only partially completes. */ export async function removeBookmark(mx: MatrixClient, bookmarkId: string): Promise { // Tombstone the item event directly β€” bypass readItem()'s validation so that diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index 6652e1844..ec17635fe 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -224,10 +224,11 @@ export const MessageBookmarkItem = as< const mx = useMatrixClient(); const bookmarksExperiment = useExperimentVariant('messageBookmarks', mx.getUserId() ?? undefined); const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks'); - const eventId = mEvent.getId() ?? ''; - const isBookmarked = useIsBookmarked(room.roomId, eventId); + const eventId = mEvent.getId(); + const isBookmarked = useIsBookmarked(room.roomId, eventId ?? ''); const { add, remove } = useBookmarkActions(); + if (!eventId) return null; if (!bookmarksExperiment.inExperiment && !enableMessageBookmarks) return null; const handleClick = async () => { diff --git a/src/app/pages/client/bookmarks/BookmarksList.tsx b/src/app/pages/client/bookmarks/BookmarksList.tsx index 562a4920c..a24b661c8 100644 --- a/src/app/pages/client/bookmarks/BookmarksList.tsx +++ b/src/app/pages/client/bookmarks/BookmarksList.tsx @@ -1,4 +1,4 @@ -import { FormEventHandler, useCallback, useMemo, useRef, useState } from 'react'; +import { FormEventHandler, Fragment, useCallback, useMemo, useRef, useState } from 'react'; import { Avatar, Box, @@ -561,10 +561,9 @@ export function BookmarksList() { {groupedByRoom.length > 0 && ( {groupedByRoom.map((group, i) => ( - <> + {i > 0 && } - + ))} )} From cd5192bdd6a8aa7725f2b8094a3733ce9dcc170d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 22:55:00 -0400 Subject: [PATCH 130/253] fix(dev-tools): address review feedback for rotate-sessions - Import KnownMembership from $types/matrix-sdk instead of matrix-js-sdk/lib/types - Use Promise.allSettled to handle partial failures and report accurate count - Add window.confirm confirmation before discarding sessions - Clarify changeset: 'encryption sessions' not 'sessions' --- .changeset/devtool-rotate-sessions.md | 2 +- build.log | 114 ++++++++++++++++++ full_output.txt | 0 lint_output.txt | 62 ++++++++++ .../settings/developer-tools/DevelopTools.tsx | 16 ++- test_file.txt | 1 + 6 files changed, 191 insertions(+), 4 deletions(-) create mode 100644 build.log create mode 100644 full_output.txt create mode 100644 lint_output.txt create mode 100644 test_file.txt diff --git a/.changeset/devtool-rotate-sessions.md b/.changeset/devtool-rotate-sessions.md index 2730ad8e6..cae1bda0c 100644 --- a/.changeset/devtool-rotate-sessions.md +++ b/.changeset/devtool-rotate-sessions.md @@ -2,4 +2,4 @@ default: patch --- -Add rotate-sessions developer tool to force session rotation for testing +Add rotate-encryption-sessions developer tool to force Megolm session rotation for testing diff --git a/build.log b/build.log new file mode 100644 index 000000000..1f5016d8d --- /dev/null +++ b/build.log @@ -0,0 +1,114 @@ + +> sable@1.14.0 build /Users/evie/git/Sable +> vite build + +vite v7.3.1 building client environment for production... +transforming... +βœ“ 8032 modules transformed. +rendering chunks... +computing gzip size... +[vite-plugin-static-copy] Copied 10 items. +dist/.assetsignore 0.02 kB +dist/assets/index-Ds5yF1gS.js.br 0.07 kB +dist/assets/index-Ds5yF1gS.js.map.br 0.41 kB +dist/wrangler.json.br 0.42 kB +dist/assets/cinny-logo-maskable-36x36-CT1Bq-jJ.png 0.79 kB +dist/index.html.br 0.88 kB +dist/assets/cinny-logo-maskable-DXG8PKa6.svg.br 0.96 kB +dist/wrangler.json 1.00 kB β”‚ gzip: 0.54 kB +dist/assets/cinny-logo-maskable-48x48-DfxQ4FEO.png 1.08 kB +dist/assets/cinny-logo-maskable-57x57-B_a6RKlt.png 1.28 kB +dist/assets/cinny-logo-maskable-60x60-uAvO2kwU.png 1.35 kB +dist/assets/cinny-logo-maskable-72x72-ChMts4zW.png 1.59 kB +dist/assets/cinny-logo-maskable-96x96-DeladQJ2.png 2.08 kB +dist/assets/cinny-logo-maskable-114x114-BRz0LILn.png 2.45 kB +dist/assets/cinny-logo-maskable-DXG8PKa6.svg 2.56 kB β”‚ gzip: 1.12 kB +dist/assets/cinny-logo-maskable-120x120-BBcwUWQZ.png 2.59 kB +dist/assets/cinny-logo-maskable-144x144-CitAVeb0.png 3.08 kB +dist/assets/cinny-logo-maskable-152x152-Di3nKfIW.png 3.26 kB +dist/assets/cinny-logo-maskable-167x167-Dk9KG9Yi.png 3.59 kB +dist/assets/cinny-logo-maskable-180x180-RAgvvHf4.png 3.79 kB +dist/assets/cinny-logo-maskable-192x192-BHxZuLYc.png 4.06 kB +dist/assets/favicon-CemZgig7.png 4.15 kB +dist/index.html 4.28 kB β”‚ gzip: 1.17 kB +dist/assets/arborium-4uGfF3G6.js.br 4.54 kB +dist/assets/arborium-4uGfF3G6.js.map.br 4.98 kB +dist/assets/space-mono-vietnamese-700-italic-BwPKnf-l.woff 5.24 kB +dist/assets/space-mono-vietnamese-400-normal-B0PMp_xB.woff 5.41 kB +dist/assets/space-mono-vietnamese-700-normal-D-KrLuLr.woff 5.45 kB +dist/assets/cinny-logo-maskable-256x256-B_icl17M.png 5.58 kB +dist/assets/space-mono-vietnamese-400-italic-DvlTUS1j.woff 5.88 kB +dist/assets/space-mono-vietnamese-400-normal-BNOj0Qhp.woff2 7.27 kB +dist/assets/space-mono-vietnamese-700-normal-DWQgDHuA.woff2 7.33 kB +dist/assets/space-mono-vietnamese-700-italic-i2bR4MHS.woff2 7.39 kB +dist/assets/cinny-logo-maskable-384x384-DA-2uwBp.png 8.52 kB +dist/assets/space-mono-vietnamese-400-italic-CyQIvI4V.woff2 9.69 kB +dist/assets/notification-EtLMRd0T.ogg 11.30 kB +dist/assets/cinny-logo-maskable-512x512-dB91iLyU.png 11.87 kB +dist/assets/space-mono-latin-400-normal-_3DlpgIW.woff 12.31 kB +dist/assets/space-mono-latin-700-normal-D7A851RN.woff 12.42 kB +dist/assets/space-mono-latin-ext-700-normal-B_E7P90g.woff 12.48 kB +dist/assets/space-mono-latin-ext-400-normal-D4cJI_B-.woff 12.61 kB +dist/assets/space-mono-latin-ext-400-italic-DYA_DB_l.woff 12.89 kB +dist/assets/nunito-vietnamese-wght-normal-U01xdrZh.woff2 13.10 kB +dist/assets/space-mono-latin-ext-700-italic-CbHMtIk0.woff 13.14 kB +dist/assets/space-mono-latin-700-italic-B8C1HgwN.woff 13.65 kB +dist/assets/space-mono-latin-400-italic-zmx7Qf09.woff 13.82 kB +dist/assets/nunito-vietnamese-wght-italic-5K55R7rt.woff2 14.77 kB +dist/assets/space-mono-latin-ext-700-normal-B2s3bDs2.woff2 15.81 kB +dist/assets/space-mono-latin-ext-400-normal-DTLbW2xa.woff2 15.83 kB +dist/assets/space-mono-latin-400-normal-Rg4St2Dn.woff2 16.52 kB +dist/assets/space-mono-latin-700-normal-mWgeinG7.woff2 16.72 kB +dist/assets/space-mono-latin-ext-400-italic-x3PrlAeq.woff2 17.20 kB +dist/assets/space-mono-latin-ext-700-italic-CkCrmjWu.woff2 17.74 kB +dist/assets/space-mono-latin-400-italic-YylcN9Ay.woff2 18.30 kB +dist/assets/space-mono-latin-700-italic-vNvENeTh.woff2 18.64 kB +dist/assets/index-C5lozGWL.css.br 20.47 kB +dist/assets/nunito-cyrillic-wght-normal-CY6AOgYE.woff2 20.78 kB +dist/assets/nunito-cyrillic-wght-italic-AGUkry7S.woff2 22.90 kB +dist/assets/nunito-cyrillic-ext-wght-normal-D4X5GqEv.woff2 28.93 kB +dist/assets/nunito-cyrillic-ext-wght-italic-C7FdRbwB.woff2 31.51 kB +dist/assets/invite-DROg5x7-.ogg 32.67 kB +dist/assets/nunito-latin-ext-wght-normal-CXYtwYOx.woff2 35.59 kB +dist/assets/nunito-latin-ext-wght-italic-CmZo11nB.woff2 39.07 kB +dist/assets/nunito-latin-wght-normal-BzFMHfZw.woff2 39.13 kB +dist/assets/index-ByL9e3j1.js.br 39.36 kB +dist/assets/nunito-latin-wght-italic-ZB3Aladm.woff2 41.76 kB +dist/assets/pdf-DEJ3BJS6.js.br 130.24 kB +dist/assets/ringtone-4rwYiCEg.webm 139.95 kB +dist/assets/index-ByL9e3j1.js.map.br 140.69 kB +dist/assets/pdf-DEJ3BJS6.js.map.br 290.20 kB +dist/assets/index-BTNFNN8W.js.map.br 302.21 kB +dist/assets/Twemoji.Mozilla.v15.1.0-CM1RS90w.woff2 491.74 kB +dist/assets/index-BTNFNN8W.js.br 951.42 kB +dist/assets/matrix_sdk_crypto_wasm_bg-dMeGppz-.wasm.br 1,333.88 kB +dist/assets/Twemoji.Mozilla.v15.1.0-DHQZm25T.ttf 1,451.58 kB +dist/assets/matrix_sdk_crypto_wasm_bg-dMeGppz-.wasm 5,513.88 kB β”‚ gzip: 1,831.16 kB +dist/assets/index-C5lozGWL.css 156.09 kB β”‚ gzip: 25.73 kB +dist/assets/index-Ds5yF1gS.js 0.08 kB β”‚ gzip: 0.09 kB β”‚ map: 0.96 kB +dist/assets/arborium-4uGfF3G6.js 20.65 kB β”‚ gzip: 5.16 kB β”‚ map: 21.44 kB +dist/assets/index-ByL9e3j1.js 272.42 kB β”‚ gzip: 47.99 kB β”‚ map: 950.66 kB +dist/assets/pdf-DEJ3BJS6.js 755.04 kB β”‚ gzip: 165.12 kB β”‚ map: 1,505.59 kB +dist/assets/index-BTNFNN8W.js 6,603.34 kB β”‚ gzip: 1,316.26 kB β”‚ map: 1,618.30 kB + +(!) Some chunks are larger than 500 kB after minification. Consider: +- Using dynamic import() to code-split the application +- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks +- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit. + +PWA v1.2.0 +Building src/sw.ts service worker ("es" format)... +vite v7.3.1 building client environment for production... +transforming... +βœ“ 61 modules transformed. +rendering chunks... +computing gzip size... +dist/sw.mjs 37.52 kB β”‚ gzip: 11.63 kB β”‚ map: 232.66 kB + +PWA v1.2.0 +mode injectManifest +format: es +precache 9 entries (14223.46 KiB) +files generated + dist/sw.js + dist/sw.js.map diff --git a/full_output.txt b/full_output.txt new file mode 100644 index 000000000..e69de29bb diff --git a/lint_output.txt b/lint_output.txt new file mode 100644 index 000000000..d0e6288a3 --- /dev/null +++ b/lint_output.txt @@ -0,0 +1,62 @@ + +> sable@1.14.0 lint /Users/evie/git/Sable +> eslint . + + +/Users/evie/git/Sable/src/app/components/url-preview/UrlPreviewCard.tsx + 36:5 warning Unexpected console statement no-console + 97:9 warning Unexpected console statement no-console + 104:11 warning Unexpected console statement no-console + +/Users/evie/git/Sable/src/app/features/room/RoomInput.tsx + 1678:19 warning Unexpected console statement no-console + +/Users/evie/git/Sable/src/app/features/settings/Persona/PerMessageProfileEditor.tsx + 47:3 warning Unexpected console statement no-console + +/Users/evie/git/Sable/src/app/pages/client/ClientNonUIFeatures.tsx + 833:9 warning Unexpected console statement no-console + +/Users/evie/git/Sable/src/app/plugins/call/CallEmbed.ts + 317:7 warning Unexpected console statement no-console + 423:11 warning Unexpected console statement no-console + +/Users/evie/git/Sable/src/app/utils/debugLogger.ts + 87:9 warning Unexpected console statement no-console + +/Users/evie/git/Sable/src/index.tsx + 54:9 warning Unexpected confirm no-alert + +/Users/evie/git/Sable/src/sw.ts + 110:9 warning Unexpected console statement no-console + 117:9 warning Unexpected console statement no-console + 182:5 warning Unexpected console statement no-console + 189:5 warning Unexpected console statement no-console + 222:5 warning Unexpected console statement no-console + 230:7 warning Unexpected console statement no-console + 276:7 warning Unexpected console statement no-console + 281:5 warning Unexpected console statement no-console + 412:11 warning Unexpected console statement no-console + 421:9 warning Unexpected console statement no-console + 448:5 warning Unexpected console statement no-console + 458:5 warning Unexpected console statement no-console + 872:7 warning Unexpected console statement no-console + 914:3 warning Unexpected console statement no-console + 920:3 warning Unexpected console statement no-console + 922:5 warning Unexpected console statement no-console + 927:3 warning Unexpected console statement no-console + 954:5 warning Unexpected console statement no-console + 979:3 warning Unexpected console statement no-console + 980:3 warning Unexpected console statement no-console + 1015:3 warning Unexpected console statement no-console + 1024:7 warning Unexpected console statement no-console + 1031:9 warning Unexpected console statement no-console + 1049:11 warning Unexpected console statement no-console + 1055:7 warning Unexpected console statement no-console + +/Users/evie/git/Sable/src/sw/pushNotification.ts + 48:5 warning Unexpected console statement no-console + 169:7 warning Unexpected console statement no-console + +βœ– 37 problems (0 errors, 37 warnings) + diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index c9d934aec..e9ef1ee89 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -1,6 +1,6 @@ import { useCallback, useState } from 'react'; import { Box, Text, Scroll, Switch, Button, Spinner, color } from 'folds'; -import { KnownMembership } from 'matrix-js-sdk/lib/types'; +import { KnownMembership } from '$types/matrix-sdk'; import { PageContent } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -33,6 +33,14 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp [] >( useCallback(async () => { + if ( + !window.confirm( + 'This will discard all current Megolm encryption sessions and start new ones. Continue?' + ) + ) { + throw new Error('Cancelled'); + } + const crypto = mx.getCrypto(); if (!crypto) throw new Error('Crypto module not available'); @@ -43,8 +51,10 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp room.getMyMembership() === KnownMembership.Join && mx.isRoomEncrypted(room.roomId) ); - await Promise.all(encryptedRooms.map((room) => crypto.forceDiscardSession(room.roomId))); - const rotated = encryptedRooms.length; + const results = await Promise.allSettled( + encryptedRooms.map((room) => crypto.forceDiscardSession(room.roomId)) + ); + const rotated = results.filter((r) => r.status === 'fulfilled').length; // Proactively start session creation + key sharing with all devices // (including bridge bots). fire-and-forget per room. diff --git a/test_file.txt b/test_file.txt new file mode 100644 index 000000000..9daeafb98 --- /dev/null +++ b/test_file.txt @@ -0,0 +1 @@ +test From 8cdf36a0bf8e0da1958bd7655795526f821d60be Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 22:55:09 -0400 Subject: [PATCH 131/253] chore: remove accidentally committed scratch files --- build.log | 114 ------------------------------------------------ full_output.txt | 0 lint_output.txt | 62 -------------------------- test_file.txt | 1 - 4 files changed, 177 deletions(-) delete mode 100644 build.log delete mode 100644 full_output.txt delete mode 100644 lint_output.txt delete mode 100644 test_file.txt diff --git a/build.log b/build.log deleted file mode 100644 index 1f5016d8d..000000000 --- a/build.log +++ /dev/null @@ -1,114 +0,0 @@ - -> sable@1.14.0 build /Users/evie/git/Sable -> vite build - -vite v7.3.1 building client environment for production... -transforming... -βœ“ 8032 modules transformed. -rendering chunks... -computing gzip size... -[vite-plugin-static-copy] Copied 10 items. -dist/.assetsignore 0.02 kB -dist/assets/index-Ds5yF1gS.js.br 0.07 kB -dist/assets/index-Ds5yF1gS.js.map.br 0.41 kB -dist/wrangler.json.br 0.42 kB -dist/assets/cinny-logo-maskable-36x36-CT1Bq-jJ.png 0.79 kB -dist/index.html.br 0.88 kB -dist/assets/cinny-logo-maskable-DXG8PKa6.svg.br 0.96 kB -dist/wrangler.json 1.00 kB β”‚ gzip: 0.54 kB -dist/assets/cinny-logo-maskable-48x48-DfxQ4FEO.png 1.08 kB -dist/assets/cinny-logo-maskable-57x57-B_a6RKlt.png 1.28 kB -dist/assets/cinny-logo-maskable-60x60-uAvO2kwU.png 1.35 kB -dist/assets/cinny-logo-maskable-72x72-ChMts4zW.png 1.59 kB -dist/assets/cinny-logo-maskable-96x96-DeladQJ2.png 2.08 kB -dist/assets/cinny-logo-maskable-114x114-BRz0LILn.png 2.45 kB -dist/assets/cinny-logo-maskable-DXG8PKa6.svg 2.56 kB β”‚ gzip: 1.12 kB -dist/assets/cinny-logo-maskable-120x120-BBcwUWQZ.png 2.59 kB -dist/assets/cinny-logo-maskable-144x144-CitAVeb0.png 3.08 kB -dist/assets/cinny-logo-maskable-152x152-Di3nKfIW.png 3.26 kB -dist/assets/cinny-logo-maskable-167x167-Dk9KG9Yi.png 3.59 kB -dist/assets/cinny-logo-maskable-180x180-RAgvvHf4.png 3.79 kB -dist/assets/cinny-logo-maskable-192x192-BHxZuLYc.png 4.06 kB -dist/assets/favicon-CemZgig7.png 4.15 kB -dist/index.html 4.28 kB β”‚ gzip: 1.17 kB -dist/assets/arborium-4uGfF3G6.js.br 4.54 kB -dist/assets/arborium-4uGfF3G6.js.map.br 4.98 kB -dist/assets/space-mono-vietnamese-700-italic-BwPKnf-l.woff 5.24 kB -dist/assets/space-mono-vietnamese-400-normal-B0PMp_xB.woff 5.41 kB -dist/assets/space-mono-vietnamese-700-normal-D-KrLuLr.woff 5.45 kB -dist/assets/cinny-logo-maskable-256x256-B_icl17M.png 5.58 kB -dist/assets/space-mono-vietnamese-400-italic-DvlTUS1j.woff 5.88 kB -dist/assets/space-mono-vietnamese-400-normal-BNOj0Qhp.woff2 7.27 kB -dist/assets/space-mono-vietnamese-700-normal-DWQgDHuA.woff2 7.33 kB -dist/assets/space-mono-vietnamese-700-italic-i2bR4MHS.woff2 7.39 kB -dist/assets/cinny-logo-maskable-384x384-DA-2uwBp.png 8.52 kB -dist/assets/space-mono-vietnamese-400-italic-CyQIvI4V.woff2 9.69 kB -dist/assets/notification-EtLMRd0T.ogg 11.30 kB -dist/assets/cinny-logo-maskable-512x512-dB91iLyU.png 11.87 kB -dist/assets/space-mono-latin-400-normal-_3DlpgIW.woff 12.31 kB -dist/assets/space-mono-latin-700-normal-D7A851RN.woff 12.42 kB -dist/assets/space-mono-latin-ext-700-normal-B_E7P90g.woff 12.48 kB -dist/assets/space-mono-latin-ext-400-normal-D4cJI_B-.woff 12.61 kB -dist/assets/space-mono-latin-ext-400-italic-DYA_DB_l.woff 12.89 kB -dist/assets/nunito-vietnamese-wght-normal-U01xdrZh.woff2 13.10 kB -dist/assets/space-mono-latin-ext-700-italic-CbHMtIk0.woff 13.14 kB -dist/assets/space-mono-latin-700-italic-B8C1HgwN.woff 13.65 kB -dist/assets/space-mono-latin-400-italic-zmx7Qf09.woff 13.82 kB -dist/assets/nunito-vietnamese-wght-italic-5K55R7rt.woff2 14.77 kB -dist/assets/space-mono-latin-ext-700-normal-B2s3bDs2.woff2 15.81 kB -dist/assets/space-mono-latin-ext-400-normal-DTLbW2xa.woff2 15.83 kB -dist/assets/space-mono-latin-400-normal-Rg4St2Dn.woff2 16.52 kB -dist/assets/space-mono-latin-700-normal-mWgeinG7.woff2 16.72 kB -dist/assets/space-mono-latin-ext-400-italic-x3PrlAeq.woff2 17.20 kB -dist/assets/space-mono-latin-ext-700-italic-CkCrmjWu.woff2 17.74 kB -dist/assets/space-mono-latin-400-italic-YylcN9Ay.woff2 18.30 kB -dist/assets/space-mono-latin-700-italic-vNvENeTh.woff2 18.64 kB -dist/assets/index-C5lozGWL.css.br 20.47 kB -dist/assets/nunito-cyrillic-wght-normal-CY6AOgYE.woff2 20.78 kB -dist/assets/nunito-cyrillic-wght-italic-AGUkry7S.woff2 22.90 kB -dist/assets/nunito-cyrillic-ext-wght-normal-D4X5GqEv.woff2 28.93 kB -dist/assets/nunito-cyrillic-ext-wght-italic-C7FdRbwB.woff2 31.51 kB -dist/assets/invite-DROg5x7-.ogg 32.67 kB -dist/assets/nunito-latin-ext-wght-normal-CXYtwYOx.woff2 35.59 kB -dist/assets/nunito-latin-ext-wght-italic-CmZo11nB.woff2 39.07 kB -dist/assets/nunito-latin-wght-normal-BzFMHfZw.woff2 39.13 kB -dist/assets/index-ByL9e3j1.js.br 39.36 kB -dist/assets/nunito-latin-wght-italic-ZB3Aladm.woff2 41.76 kB -dist/assets/pdf-DEJ3BJS6.js.br 130.24 kB -dist/assets/ringtone-4rwYiCEg.webm 139.95 kB -dist/assets/index-ByL9e3j1.js.map.br 140.69 kB -dist/assets/pdf-DEJ3BJS6.js.map.br 290.20 kB -dist/assets/index-BTNFNN8W.js.map.br 302.21 kB -dist/assets/Twemoji.Mozilla.v15.1.0-CM1RS90w.woff2 491.74 kB -dist/assets/index-BTNFNN8W.js.br 951.42 kB -dist/assets/matrix_sdk_crypto_wasm_bg-dMeGppz-.wasm.br 1,333.88 kB -dist/assets/Twemoji.Mozilla.v15.1.0-DHQZm25T.ttf 1,451.58 kB -dist/assets/matrix_sdk_crypto_wasm_bg-dMeGppz-.wasm 5,513.88 kB β”‚ gzip: 1,831.16 kB -dist/assets/index-C5lozGWL.css 156.09 kB β”‚ gzip: 25.73 kB -dist/assets/index-Ds5yF1gS.js 0.08 kB β”‚ gzip: 0.09 kB β”‚ map: 0.96 kB -dist/assets/arborium-4uGfF3G6.js 20.65 kB β”‚ gzip: 5.16 kB β”‚ map: 21.44 kB -dist/assets/index-ByL9e3j1.js 272.42 kB β”‚ gzip: 47.99 kB β”‚ map: 950.66 kB -dist/assets/pdf-DEJ3BJS6.js 755.04 kB β”‚ gzip: 165.12 kB β”‚ map: 1,505.59 kB -dist/assets/index-BTNFNN8W.js 6,603.34 kB β”‚ gzip: 1,316.26 kB β”‚ map: 1,618.30 kB - -(!) Some chunks are larger than 500 kB after minification. Consider: -- Using dynamic import() to code-split the application -- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks -- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit. - -PWA v1.2.0 -Building src/sw.ts service worker ("es" format)... -vite v7.3.1 building client environment for production... -transforming... -βœ“ 61 modules transformed. -rendering chunks... -computing gzip size... -dist/sw.mjs 37.52 kB β”‚ gzip: 11.63 kB β”‚ map: 232.66 kB - -PWA v1.2.0 -mode injectManifest -format: es -precache 9 entries (14223.46 KiB) -files generated - dist/sw.js - dist/sw.js.map diff --git a/full_output.txt b/full_output.txt deleted file mode 100644 index e69de29bb..000000000 diff --git a/lint_output.txt b/lint_output.txt deleted file mode 100644 index d0e6288a3..000000000 --- a/lint_output.txt +++ /dev/null @@ -1,62 +0,0 @@ - -> sable@1.14.0 lint /Users/evie/git/Sable -> eslint . - - -/Users/evie/git/Sable/src/app/components/url-preview/UrlPreviewCard.tsx - 36:5 warning Unexpected console statement no-console - 97:9 warning Unexpected console statement no-console - 104:11 warning Unexpected console statement no-console - -/Users/evie/git/Sable/src/app/features/room/RoomInput.tsx - 1678:19 warning Unexpected console statement no-console - -/Users/evie/git/Sable/src/app/features/settings/Persona/PerMessageProfileEditor.tsx - 47:3 warning Unexpected console statement no-console - -/Users/evie/git/Sable/src/app/pages/client/ClientNonUIFeatures.tsx - 833:9 warning Unexpected console statement no-console - -/Users/evie/git/Sable/src/app/plugins/call/CallEmbed.ts - 317:7 warning Unexpected console statement no-console - 423:11 warning Unexpected console statement no-console - -/Users/evie/git/Sable/src/app/utils/debugLogger.ts - 87:9 warning Unexpected console statement no-console - -/Users/evie/git/Sable/src/index.tsx - 54:9 warning Unexpected confirm no-alert - -/Users/evie/git/Sable/src/sw.ts - 110:9 warning Unexpected console statement no-console - 117:9 warning Unexpected console statement no-console - 182:5 warning Unexpected console statement no-console - 189:5 warning Unexpected console statement no-console - 222:5 warning Unexpected console statement no-console - 230:7 warning Unexpected console statement no-console - 276:7 warning Unexpected console statement no-console - 281:5 warning Unexpected console statement no-console - 412:11 warning Unexpected console statement no-console - 421:9 warning Unexpected console statement no-console - 448:5 warning Unexpected console statement no-console - 458:5 warning Unexpected console statement no-console - 872:7 warning Unexpected console statement no-console - 914:3 warning Unexpected console statement no-console - 920:3 warning Unexpected console statement no-console - 922:5 warning Unexpected console statement no-console - 927:3 warning Unexpected console statement no-console - 954:5 warning Unexpected console statement no-console - 979:3 warning Unexpected console statement no-console - 980:3 warning Unexpected console statement no-console - 1015:3 warning Unexpected console statement no-console - 1024:7 warning Unexpected console statement no-console - 1031:9 warning Unexpected console statement no-console - 1049:11 warning Unexpected console statement no-console - 1055:7 warning Unexpected console statement no-console - -/Users/evie/git/Sable/src/sw/pushNotification.ts - 48:5 warning Unexpected console statement no-console - 169:7 warning Unexpected console statement no-console - -βœ– 37 problems (0 errors, 37 warnings) - diff --git a/test_file.txt b/test_file.txt deleted file mode 100644 index 9daeafb98..000000000 --- a/test_file.txt +++ /dev/null @@ -1 +0,0 @@ -test From 4e5b03780a9f0dbaa189383a97da7a9972554f31 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 22:56:15 -0400 Subject: [PATCH 132/253] fix(timeline): address review feedback for timeline-item-memo - Include mEvent and timelineSet in stable-ref comparison to avoid stale references after timeline reset/rebuild - Only pass VList cache snapshot for live timeline (not eventId navigations) --- src/app/features/room/RoomTimeline.tsx | 2 +- src/app/hooks/timeline/useProcessedTimeline.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index e0305d4a1..ded8e385a 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -1062,7 +1062,7 @@ export function RoomTimeline({ key={room.roomId} ref={vListRef} data={processedEvents} - cache={scrollCacheForRoomRef.current?.cache} + cache={!eventId ? scrollCacheForRoomRef.current?.cache : undefined} shift={shift} className={css.messageList} style={{ diff --git a/src/app/hooks/timeline/useProcessedTimeline.ts b/src/app/hooks/timeline/useProcessedTimeline.ts index eeb088a08..f37197309 100644 --- a/src/app/hooks/timeline/useProcessedTimeline.ts +++ b/src/app/hooks/timeline/useProcessedTimeline.ts @@ -217,6 +217,8 @@ export function useProcessedTimeline({ const prev = prevCache?.get(mEventId); const stable = prev && + prev.mEvent === mEvent && + prev.timelineSet === timelineSet && prev.itemIndex === processed.itemIndex && prev.collapsed === collapsed && prev.willRenderNewDivider === willRenderNewDivider && From e5bdd7cf17cfb0b2830a22b35ae9ebd9e00e7994 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 22:58:14 -0400 Subject: [PATCH 133/253] fix(presence): address review feedback for presence sidebar badges - Guard useUserPresence client-level listener for empty userId - Hide badge when Invisible mode is active (presenceMode === 'offline') - Hide badge in Invisible menu row - Import KnownMembership from $types/matrix-sdk --- src/app/features/settings/developer-tools/DevelopTools.tsx | 2 +- src/app/hooks/useUserPresence.ts | 2 +- src/app/pages/client/sidebar/AccountSwitcherTab.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index 4e38f7868..6bfd0f6cb 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -1,6 +1,6 @@ import { useCallback, useState } from 'react'; import { Box, Text, Scroll, Switch, Button, Spinner, color } from 'folds'; -import { KnownMembership } from 'matrix-js-sdk/lib/types'; +import { KnownMembership } from '$types/matrix-sdk'; import { PageContent } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index 8c9b85959..4643a6c02 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -68,7 +68,7 @@ export const useUserPresence = (userId: string): UserPresence | undefined => { // ExtensionPresence emits ClientEvent.Event after creating and updating the User object, // so by the time this fires mx.getUser(userId) is guaranteed to be non-null. let removeClientListener: (() => void) | undefined; - if (!user) { + if (!user && userId) { const onClientEvent = (event: MatrixEvent) => { if (event.getSender() !== userId || event.getType() !== 'm.presence') return; const u = mx.getUser(userId); diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index 395edcfe7..073293175 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -184,7 +184,7 @@ export function AccountSwitcherTab() { const [sendPresence, setSendPresence] = useSetting(settingsAtom, 'sendPresence'); const [presenceMode, setPresenceMode] = useSetting(settingsAtom, 'presenceMode'); let myOwnPresenceBadge: ReactNode; - if (sendPresence) { + if (sendPresence && presenceMode !== 'offline') { myOwnPresenceBadge = presenceMode === 'dnd' ? ( // DND: solid red badge (broadcasts as online with status_msg 'dnd') @@ -393,7 +393,7 @@ export function AccountSwitcherTab() { const badge = mode === 'dnd' ? ( - ) : ( + ) : mode === 'offline' ? undefined : ( ); return ( From 3f0387686bf94583b6ea5c3b25219c2fd9d36b98 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 23:00:02 -0400 Subject: [PATCH 134/253] fix(presence): address review feedback for presence-auto-idle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix changeset frontmatter: '@sable/client': minor β†’ default: minor - Update presenceMode docstring to clarify dnd broadcasts as online+status_msg - Import KnownMembership from $types/matrix-sdk - Gate heartbeat effect on mx being defined to avoid no-op timers - Add mx to heartbeat effect dependency array --- .changeset/presence-auto-idle.md | 2 +- src/app/features/settings/developer-tools/DevelopTools.tsx | 2 +- src/app/hooks/useAppVisibility.ts | 3 ++- src/app/state/settings.ts | 6 +++++- 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/.changeset/presence-auto-idle.md b/.changeset/presence-auto-idle.md index 0cdedfdac..56889390c 100644 --- a/.changeset/presence-auto-idle.md +++ b/.changeset/presence-auto-idle.md @@ -1,5 +1,5 @@ --- -'@sable/client': minor +default: minor --- feat(presence): add auto-idle presence after configurable inactivity timeout with Discord-style status picker diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index 4e38f7868..6bfd0f6cb 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -1,6 +1,6 @@ import { useCallback, useState } from 'react'; import { Box, Text, Scroll, Switch, Button, Spinner, color } from 'folds'; -import { KnownMembership } from 'matrix-js-sdk/lib/types'; +import { KnownMembership } from '$types/matrix-sdk'; import { PageContent } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index 144f132a9..b1d25add0 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -171,7 +171,7 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S ]); useEffect(() => { - if (!phase2VisibleHeartbeat) return undefined; + if (!phase2VisibleHeartbeat || !mx) return undefined; // Reset adaptive backoff/suppression so a config or session change starts fresh. heartbeatFailuresRef.current = 0; @@ -230,6 +230,7 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S }, [ heartbeatIntervalMs, heartbeatMaxBackoffMs, + mx, phase2VisibleHeartbeat, phase3AdaptiveBackoffJitter, pushSessionNow, diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 0d4c16bc8..935b420ba 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -93,7 +93,11 @@ export interface Settings { // Sable features! sendPresence: boolean; - /** Which Matrix presence state to broadcast when sendPresence is true. */ + /** + * Which presence mode to use when sendPresence is true. + * Matrix presence states are sent as-is; the app-specific `dnd` mode is + * broadcast as `presence=online` with a `status_msg`. + */ presenceMode: 'online' | 'unavailable' | 'dnd' | 'offline'; mobileGestures: boolean; rightSwipeAction: RightSwipeAction; From 4cb00a58022c1341086bc63d582cd080befa29ab Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 23:02:46 -0400 Subject: [PATCH 135/253] fix(room-nav): address review feedback for message preview - Filter reaction and edit events from last-message preview - Strip reply fallback prefix from preview text - Pass dmMessagePreview setting to RoomNavItem in Space view - Fix changeset frontmatter to use default: minor --- .changeset/feat-dm-message-preview.md | 2 +- .changeset/room-message-preview.md | 2 +- src/app/hooks/useRoomLastMessage.ts | 20 +++++++++++++++++++- src/app/pages/client/space/Space.tsx | 2 ++ 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/.changeset/feat-dm-message-preview.md b/.changeset/feat-dm-message-preview.md index ab8e37801..46cbcff81 100644 --- a/.changeset/feat-dm-message-preview.md +++ b/.changeset/feat-dm-message-preview.md @@ -1,5 +1,5 @@ --- -'@sable/client': minor +default: minor --- feat(dm-list): show last-message preview below DM room name diff --git a/.changeset/room-message-preview.md b/.changeset/room-message-preview.md index 4f8d1cef8..3f8587b85 100644 --- a/.changeset/room-message-preview.md +++ b/.changeset/room-message-preview.md @@ -1,5 +1,5 @@ --- -'@sable/client': minor +default: minor --- feat(room-nav): show topic and last-message preview for rooms in the sidebar, fetching enough timeline events to handle reactions and edits correctly diff --git a/src/app/hooks/useRoomLastMessage.ts b/src/app/hooks/useRoomLastMessage.ts index b4c829f10..1e87d0092 100644 --- a/src/app/hooks/useRoomLastMessage.ts +++ b/src/app/hooks/useRoomLastMessage.ts @@ -9,18 +9,36 @@ import { } from '$types/matrix-sdk'; import { MessageEvent } from '$types/matrix/room'; +/** + * Strip the legacy reply fallback (lines starting with `> `) that some + * clients prepend when replying to a message. + */ +function stripReplyFallback(body: string): string { + const lines = body.split('\n'); + let i = 0; + while (i < lines.length && lines[i].startsWith('> ')) i++; + // Skip the blank separator line that follows the fallback block. + if (i > 0 && i < lines.length && lines[i] === '') i++; + return lines.slice(i).join('\n'); +} + function eventToPreviewText(ev: MatrixEvent): string | undefined { if (ev.isRedacted()) return undefined; const type = ev.getType(); + // Skip reactions and edits β€” they aren't standalone messages. + if (type === MessageEvent.Reaction) return undefined; + const relType = ev.getContent()?.['m.relates_to']?.rel_type; + if (relType === 'm.replace') return undefined; + if (type === MessageEvent.RoomMessageEncrypted) return 'πŸ”’ Encrypted message'; if (type === MessageEvent.RoomMessage) { const content = ev.getContent(); const { msgtype } = content; if (msgtype === MsgType.Text || msgtype === MsgType.Emote || msgtype === MsgType.Notice) { - return content.body; + return stripReplyFallback(content.body); } if (msgtype === MsgType.Image) return 'πŸ“· Image'; if (msgtype === MsgType.Video) return 'πŸ“Ή Video'; diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx index 72efaaea6..2ccd15171 100644 --- a/src/app/pages/client/space/Space.tsx +++ b/src/app/pages/client/space/Space.tsx @@ -535,6 +535,7 @@ export function Space() { const [subspaceHierarchyLimit] = useSetting(settingsAtom, 'subspaceHierarchyLimit'); const [roomTopicPreview] = useSetting(settingsAtom, 'roomTopicPreview'); const [roomMessagePreview] = useSetting(settingsAtom, 'roomMessagePreview'); + const [dmMessagePreview] = useSetting(settingsAtom, 'dmMessagePreview'); /** * Creates an SVG used for connecting spaces to their subrooms. * @param virtualizedItems - The virtualized item list that will be used to render elements in the nav @@ -830,6 +831,7 @@ export function Space() { direct={mDirects.has(roomId)} roomTopicPreview={roomTopicPreview} roomMessagePreview={roomMessagePreview} + dmMessagePreview={dmMessagePreview} linkPath={getToLink(roomId)} notificationMode={getRoomNotificationMode( notificationPreferences, From 0231581f09bb41e7387cac52249da20100b861db Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 23:23:16 -0400 Subject: [PATCH 136/253] fix(presence): 5min default, wire visibility reset, add tests - Change presenceAutoIdleTimeoutMs from 600000 (10min) to 300000 (5min) - Wire appEvents.onVisibilityChange so returning to the app resets auto-idle - Add comprehensive usePresenceAutoIdle unit tests (10 tests) --- config.json | 2 +- src/app/hooks/usePresenceAutoIdle.test.tsx | 238 +++++++++++++++++++++ src/app/hooks/usePresenceAutoIdle.ts | 10 + 3 files changed, 249 insertions(+), 1 deletion(-) create mode 100644 src/app/hooks/usePresenceAutoIdle.test.tsx diff --git a/config.json b/config.json index b930f457e..6410de4de 100644 --- a/config.json +++ b/config.json @@ -19,7 +19,7 @@ "enabled": true }, - "presenceAutoIdleTimeoutMs": 600000, + "presenceAutoIdleTimeoutMs": 300000, "featuredCommunities": { "openAsDefault": false, diff --git a/src/app/hooks/usePresenceAutoIdle.test.tsx b/src/app/hooks/usePresenceAutoIdle.test.tsx new file mode 100644 index 000000000..0ebfd744a --- /dev/null +++ b/src/app/hooks/usePresenceAutoIdle.test.tsx @@ -0,0 +1,238 @@ +import { act, renderHook } from '@testing-library/react'; +import { Provider, useAtomValue } from 'jotai'; +import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'; +import { usePresenceAutoIdle } from './usePresenceAutoIdle'; +import { presenceAutoIdledAtom } from '$state/settings'; +import { appEvents } from '$utils/appEvents'; +import type { ReactNode } from 'react'; + +// -------- mock setup -------- + +const userListeners = new Map void)[]>(); + +const makeMockUser = () => ({ + userId: '@alice:test', + presence: 'online', + on: vi.fn().mockImplementation((event: string, handler: (...args: unknown[]) => void) => { + const list = userListeners.get(event) ?? []; + list.push(handler); + userListeners.set(event, list); + }), + removeListener: vi.fn(), +}); + +let mockUser: ReturnType | null = null; + +const makeMockMx = () => ({ + getUserId: vi.fn(() => '@alice:test'), + getUser: vi.fn(() => mockUser), +}); + +let mockMx: ReturnType; + +const wrapper = ({ children }: { children: ReactNode }) => {children}; + +// Helper to read the atom value alongside the hook under test. +function useAutoIdledReader( + mx: ReturnType, + presenceMode: string, + sendPresence: boolean, + timeoutMs: number +) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + usePresenceAutoIdle(mx as any, presenceMode, sendPresence, timeoutMs); + return useAtomValue(presenceAutoIdledAtom); +} + +// -------- lifecycle -------- + +beforeEach(() => { + vi.useFakeTimers(); + vi.clearAllMocks(); + userListeners.clear(); + mockUser = makeMockUser(); + mockMx = makeMockMx(); + appEvents.onVisibilityChange = null; +}); + +afterEach(() => { + vi.useRealTimers(); + appEvents.onVisibilityChange = null; +}); + +// -------- tests -------- + +describe('usePresenceAutoIdle', () => { + it('sets auto-idle after the timeout elapses', () => { + const { result } = renderHook( + () => useAutoIdledReader(mockMx, 'online', true, 5000), + { wrapper } + ); + + expect(result.current).toBe(false); + + act(() => { + vi.advanceTimersByTime(5000); + }); + + expect(result.current).toBe(true); + }); + + it('resets auto-idle when user activity is detected', () => { + const { result } = renderHook( + () => useAutoIdledReader(mockMx, 'online', true, 5000), + { wrapper } + ); + + // Go idle. + act(() => { + vi.advanceTimersByTime(5000); + }); + expect(result.current).toBe(true); + + // Simulate user activity. + act(() => { + document.dispatchEvent(new Event('mousemove')); + }); + expect(result.current).toBe(false); + }); + + it('resets auto-idle when app becomes visible via appEvents', () => { + const { result } = renderHook( + () => useAutoIdledReader(mockMx, 'online', true, 5000), + { wrapper } + ); + + act(() => { + vi.advanceTimersByTime(5000); + }); + expect(result.current).toBe(true); + + // Simulate app returning to foreground. + act(() => { + appEvents.onVisibilityChange?.(true); + }); + expect(result.current).toBe(false); + }); + + it('does not go idle when presenceMode is not online', () => { + const { result } = renderHook( + () => useAutoIdledReader(mockMx, 'dnd', true, 5000), + { wrapper } + ); + + act(() => { + vi.advanceTimersByTime(10000); + }); + expect(result.current).toBe(false); + }); + + it('does not go idle when sendPresence is false', () => { + const { result } = renderHook( + () => useAutoIdledReader(mockMx, 'online', false, 5000), + { wrapper } + ); + + act(() => { + vi.advanceTimersByTime(10000); + }); + expect(result.current).toBe(false); + }); + + it('does not go idle when timeoutMs is 0', () => { + const { result } = renderHook( + () => useAutoIdledReader(mockMx, 'online', true, 0), + { wrapper } + ); + + act(() => { + vi.advanceTimersByTime(10000); + }); + expect(result.current).toBe(false); + }); + + it('restarts the idle timer on activity before timeout', () => { + const { result } = renderHook( + () => useAutoIdledReader(mockMx, 'online', true, 5000), + { wrapper } + ); + + // Advance partially, then trigger activity. + act(() => { + vi.advanceTimersByTime(3000); + }); + expect(result.current).toBe(false); + + act(() => { + document.dispatchEvent(new Event('keydown')); + }); + + // Original timeout would have fired at 5000ms, but we reset. + act(() => { + vi.advanceTimersByTime(3000); + }); + expect(result.current).toBe(false); + + // Now the full 5000ms from last activity should trigger idle. + act(() => { + vi.advanceTimersByTime(2000); + }); + expect(result.current).toBe(true); + }); + + it('clears auto-idle when presenceMode changes away from online', () => { + const { result, rerender } = renderHook( + ({ mode }) => useAutoIdledReader(mockMx, mode, true, 5000), + { wrapper, initialProps: { mode: 'online' } } + ); + + act(() => { + vi.advanceTimersByTime(5000); + }); + expect(result.current).toBe(true); + + rerender({ mode: 'dnd' }); + expect(result.current).toBe(false); + }); + + it('clears auto-idle when another device sets presence to online', () => { + const { result } = renderHook( + () => useAutoIdledReader(mockMx, 'online', true, 5000), + { wrapper } + ); + + act(() => { + vi.advanceTimersByTime(5000); + }); + expect(result.current).toBe(true); + + // Simulate User.presence event from another device. + const handlers = userListeners.get('User.presence') ?? []; + expect(handlers.length).toBeGreaterThan(0); + + act(() => { + handlers.forEach((h) => + h({}, { userId: '@alice:test', presence: 'online' }) + ); + }); + expect(result.current).toBe(false); + }); + + it('restores previous appEvents.onVisibilityChange on cleanup', () => { + const prev = vi.fn(); + appEvents.onVisibilityChange = prev; + + const { unmount } = renderHook( + () => useAutoIdledReader(mockMx, 'online', true, 5000), + { wrapper } + ); + + // Our handler should be installed. + expect(appEvents.onVisibilityChange).not.toBe(prev); + + unmount(); + + // Previous handler should be restored. + expect(appEvents.onVisibilityChange).toBe(prev); + }); +}); diff --git a/src/app/hooks/usePresenceAutoIdle.ts b/src/app/hooks/usePresenceAutoIdle.ts index dd11e729b..abf25edba 100644 --- a/src/app/hooks/usePresenceAutoIdle.ts +++ b/src/app/hooks/usePresenceAutoIdle.ts @@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef } from 'react'; import { useSetAtom } from 'jotai'; import { type MatrixClient, UserEvent, type UserEventHandlerMap } from '$types/matrix-sdk'; import { presenceAutoIdledAtom } from '$state/settings'; +import { appEvents } from '$utils/appEvents'; import { createDebugLogger } from '$utils/debugLogger'; const debugLog = createDebugLogger('PresenceAutoIdle'); @@ -70,9 +71,18 @@ export function usePresenceAutoIdle( document.addEventListener(ev, handleActivity, { passive: true }) ); + // When the app returns to the foreground, treat it as activity so the user + // isn't shown as idle the moment they switch back to the tab/PWA. + const prevOnVisibilityChange = appEvents.onVisibilityChange; + appEvents.onVisibilityChange = (isVisible: boolean) => { + prevOnVisibilityChange?.(isVisible); + if (isVisible) handleActivity(); + }; + return () => { ACTIVITY_EVENTS.forEach((ev) => document.removeEventListener(ev, handleActivity)); clearTimer(); + appEvents.onVisibilityChange = prevOnVisibilityChange; }; }, [clearTimer, presenceMode, sendPresence, setAutoIdled, timeoutMs]); From 1f9dae9d3ba4930e519c56386f10e93499834003 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 23:25:13 -0400 Subject: [PATCH 137/253] test(room-nav): add useRoomLastMessage unit tests (28 tests) - Test stripReplyFallback: plain text, quoted lines, no separator, multi-line - Test eventToPreviewText: all msg types, encrypted, sticker, reactions, edits, reply fallback - Test getLastMessageText: You prefix, display name, userId fallback, skip reactions, empty timeline - Test useRoomLastMessage hook: undefined room, initial render, Timeline event updates - Export pure functions for testability --- src/app/hooks/useRoomLastMessage.test.tsx | 246 ++++++++++++++++++++++ src/app/hooks/useRoomLastMessage.ts | 6 +- 2 files changed, 249 insertions(+), 3 deletions(-) create mode 100644 src/app/hooks/useRoomLastMessage.test.tsx diff --git a/src/app/hooks/useRoomLastMessage.test.tsx b/src/app/hooks/useRoomLastMessage.test.tsx new file mode 100644 index 000000000..4e3065583 --- /dev/null +++ b/src/app/hooks/useRoomLastMessage.test.tsx @@ -0,0 +1,246 @@ +import { act, renderHook } from '@testing-library/react'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; +import { + stripReplyFallback, + eventToPreviewText, + getLastMessageText, + useRoomLastMessage, +} from './useRoomLastMessage'; + +// -------- helpers -------- + +function makeEvent(overrides: { + type?: string; + content?: Record; + sender?: string; + roomId?: string; + redacted?: boolean; +}) { + return { + getType: () => overrides.type ?? 'm.room.message', + getContent: () => overrides.content ?? { msgtype: 'm.text', body: 'hello' }, + getSender: () => overrides.sender ?? '@alice:test', + getRoomId: () => overrides.roomId ?? '!room:test', + isRedacted: () => overrides.redacted ?? false, + } as never; +} + +// -------- stripReplyFallback -------- + +describe('stripReplyFallback', () => { + it('returns the body unchanged when there is no fallback', () => { + expect(stripReplyFallback('hello world')).toBe('hello world'); + }); + + it('strips lines starting with > and the blank separator', () => { + const body = '> reply line 1\n> reply line 2\n\nactual message'; + expect(stripReplyFallback(body)).toBe('actual message'); + }); + + it('strips fallback with no separator line', () => { + const body = '> quoted\nrest'; + expect(stripReplyFallback(body)).toBe('rest'); + }); + + it('returns empty string when the entire body is a fallback', () => { + expect(stripReplyFallback('> only quote\n')).toBe(''); + }); + + it('handles multi-line actual message after fallback', () => { + const body = '> quote\n\nline 1\nline 2'; + expect(stripReplyFallback(body)).toBe('line 1\nline 2'); + }); +}); + +// -------- eventToPreviewText -------- + +describe('eventToPreviewText', () => { + it('returns body for m.text message', () => { + const ev = makeEvent({ content: { msgtype: 'm.text', body: 'hi' } }); + expect(eventToPreviewText(ev)).toBe('hi'); + }); + + it('returns body for m.emote message', () => { + const ev = makeEvent({ content: { msgtype: 'm.emote', body: 'waves' } }); + expect(eventToPreviewText(ev)).toBe('waves'); + }); + + it('returns body for m.notice message', () => { + const ev = makeEvent({ content: { msgtype: 'm.notice', body: 'notice' } }); + expect(eventToPreviewText(ev)).toBe('notice'); + }); + + it('returns image icon for m.image', () => { + const ev = makeEvent({ content: { msgtype: 'm.image', body: 'photo.png' } }); + expect(eventToPreviewText(ev)).toBe('πŸ“· Image'); + }); + + it('returns video icon for m.video', () => { + const ev = makeEvent({ content: { msgtype: 'm.video', body: 'clip.mp4' } }); + expect(eventToPreviewText(ev)).toBe('πŸ“Ή Video'); + }); + + it('returns audio icon for m.audio', () => { + const ev = makeEvent({ content: { msgtype: 'm.audio', body: 'song.mp3' } }); + expect(eventToPreviewText(ev)).toBe('🎡 Audio'); + }); + + it('returns file icon for m.file', () => { + const ev = makeEvent({ content: { msgtype: 'm.file', body: 'doc.pdf' } }); + expect(eventToPreviewText(ev)).toBe('πŸ“Ž File'); + }); + + it('returns encrypted placeholder for encrypted events', () => { + const ev = makeEvent({ type: 'm.room.encrypted', content: {} }); + expect(eventToPreviewText(ev)).toBe('πŸ”’ Encrypted message'); + }); + + it('returns sticker text', () => { + const ev = makeEvent({ type: 'm.sticker', content: { body: 'party' } }); + expect(eventToPreviewText(ev)).toBe('πŸŽ‰ party'); + }); + + it('returns undefined for redacted events', () => { + const ev = makeEvent({ redacted: true }); + expect(eventToPreviewText(ev)).toBeUndefined(); + }); + + it('returns undefined for reaction events', () => { + const ev = makeEvent({ type: 'm.reaction', content: {} }); + expect(eventToPreviewText(ev)).toBeUndefined(); + }); + + it('returns undefined for edit events (m.replace)', () => { + const ev = makeEvent({ + content: { + msgtype: 'm.text', + body: 'edited', + 'm.relates_to': { rel_type: 'm.replace', event_id: '$orig' }, + }, + }); + expect(eventToPreviewText(ev)).toBeUndefined(); + }); + + it('strips reply fallback from text body', () => { + const ev = makeEvent({ + content: { msgtype: 'm.text', body: '> quoted\n\nreal message' }, + }); + expect(eventToPreviewText(ev)).toBe('real message'); + }); + + it('returns undefined for unknown event types', () => { + const ev = makeEvent({ type: 'm.room.power_levels', content: {} }); + expect(eventToPreviewText(ev)).toBeUndefined(); + }); +}); + +// -------- getLastMessageText -------- + +describe('getLastMessageText', () => { + const makeMx = (userId = '@alice:test') => + ({ getUserId: () => userId }) as never; + + const makeRoom = (events: ReturnType[], members?: Record) => + ({ + roomId: '!room:test', + getLiveTimeline: () => ({ + getEvents: () => events, + }), + getMember: (id: string) => (members?.[id] ? { name: members[id] } : null), + }) as never; + + it('returns "You: text" when the sender is the current user', () => { + const ev = makeEvent({ sender: '@alice:test', content: { msgtype: 'm.text', body: 'hi' } }); + expect(getLastMessageText(makeRoom([ev]), makeMx())).toBe('You: hi'); + }); + + it('returns "DisplayName: text" for another user', () => { + const ev = makeEvent({ sender: '@bob:test', content: { msgtype: 'm.text', body: 'hey' } }); + const room = makeRoom([ev], { '@bob:test': 'Bob' }); + expect(getLastMessageText(room, makeMx())).toBe('Bob: hey'); + }); + + it('falls back to userId when no display name is available', () => { + const ev = makeEvent({ sender: '@bob:test', content: { msgtype: 'm.text', body: 'hey' } }); + const room = makeRoom([ev]); + expect(getLastMessageText(room, makeMx())).toBe('@bob:test: hey'); + }); + + it('skips reactions and picks the last real message', () => { + const msg = makeEvent({ content: { msgtype: 'm.text', body: 'real' } }); + const reaction = makeEvent({ type: 'm.reaction', content: {} }); + expect(getLastMessageText(makeRoom([msg, reaction]), makeMx())).toBe('You: real'); + }); + + it('returns undefined when there are no displayable events', () => { + const reaction = makeEvent({ type: 'm.reaction', content: {} }); + expect(getLastMessageText(makeRoom([reaction]), makeMx())).toBeUndefined(); + }); + + it('returns undefined for an empty timeline', () => { + expect(getLastMessageText(makeRoom([]), makeMx())).toBeUndefined(); + }); +}); + +// -------- useRoomLastMessage hook -------- + +describe('useRoomLastMessage', () => { + const makeMx = (userId = '@alice:test') => ({ + getUserId: () => userId, + on: vi.fn(), + off: vi.fn(), + }); + + const roomListeners = new Map void)[]>(); + + const makeRoom = (events: ReturnType[]) => ({ + roomId: '!room:test', + getLiveTimeline: () => ({ getEvents: () => events }), + getMember: () => null, + on: vi.fn().mockImplementation((event: string, handler: (...args: unknown[]) => void) => { + const list = roomListeners.get(event) ?? []; + list.push(handler); + roomListeners.set(event, list); + }), + off: vi.fn(), + }); + + beforeEach(() => { + roomListeners.clear(); + }); + + it('returns undefined when room is undefined', () => { + const mx = makeMx(); + const { result } = renderHook(() => useRoomLastMessage(undefined, mx as never)); + expect(result.current).toBeUndefined(); + }); + + it('returns the last message preview on mount', () => { + const ev = makeEvent({ content: { msgtype: 'm.text', body: 'hello' } }); + const room = makeRoom([ev]); + const mx = makeMx(); + const { result } = renderHook(() => useRoomLastMessage(room as never, mx as never)); + expect(result.current).toBe('You: hello'); + }); + + it('updates when a Timeline event fires', () => { + const ev1 = makeEvent({ content: { msgtype: 'm.text', body: 'first' } }); + const events = [ev1]; + const room = makeRoom(events); + const mx = makeMx(); + + const { result } = renderHook(() => useRoomLastMessage(room as never, mx as never)); + expect(result.current).toBe('You: first'); + + // Simulate a new message arriving. + const ev2 = makeEvent({ content: { msgtype: 'm.text', body: 'second' } }); + events.push(ev2); + + const timelineHandlers = roomListeners.get('Room.timeline') ?? []; + act(() => { + timelineHandlers.forEach((h) => h()); + }); + + expect(result.current).toBe('You: second'); + }); +}); diff --git a/src/app/hooks/useRoomLastMessage.ts b/src/app/hooks/useRoomLastMessage.ts index 1e87d0092..7f773ec97 100644 --- a/src/app/hooks/useRoomLastMessage.ts +++ b/src/app/hooks/useRoomLastMessage.ts @@ -13,7 +13,7 @@ import { MessageEvent } from '$types/matrix/room'; * Strip the legacy reply fallback (lines starting with `> `) that some * clients prepend when replying to a message. */ -function stripReplyFallback(body: string): string { +export function stripReplyFallback(body: string): string { const lines = body.split('\n'); let i = 0; while (i < lines.length && lines[i].startsWith('> ')) i++; @@ -22,7 +22,7 @@ function stripReplyFallback(body: string): string { return lines.slice(i).join('\n'); } -function eventToPreviewText(ev: MatrixEvent): string | undefined { +export function eventToPreviewText(ev: MatrixEvent): string | undefined { if (ev.isRedacted()) return undefined; const type = ev.getType(); @@ -53,7 +53,7 @@ function eventToPreviewText(ev: MatrixEvent): string | undefined { return undefined; } -function getLastMessageText(room: Room, mx: MatrixClient): string | undefined { +export function getLastMessageText(room: Room, mx: MatrixClient): string | undefined { const events = room.getLiveTimeline().getEvents(); const match = [...events].reverse().find((ev) => eventToPreviewText(ev) !== undefined); if (!match) return undefined; From 9d9dce7aef716cc7828a91a4517ed6b2fb0aea79 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 23:28:37 -0400 Subject: [PATCH 138/253] fix(polls): handle encrypted poll events in timeline filter - Use getEffectiveEvent() to check decrypted type for encrypted poll response/end events - Add poll start types to isStandardRendered list in useProcessedTimeline --- src/app/hooks/timeline/useProcessedTimeline.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/app/hooks/timeline/useProcessedTimeline.ts b/src/app/hooks/timeline/useProcessedTimeline.ts index f44719e88..6f9460043 100644 --- a/src/app/hooks/timeline/useProcessedTimeline.ts +++ b/src/app/hooks/timeline/useProcessedTimeline.ts @@ -99,11 +99,16 @@ export function useProcessedTimeline({ // Poll response and end events are always filtered β€” they update the poll tally // via RoomEvent.Timeline listeners in PollEvent and must never render as timeline items. + // Also check the effective (decrypted) type for encrypted events that have been decrypted. + const effectiveType = + type === 'm.room.encrypted' + ? ((mEvent.getEffectiveEvent()?.type as string) ?? type) + : type; if ( - type === 'org.matrix.msc3381.poll.response' || - type === 'org.matrix.msc3381.poll.end' || - type === 'm.poll.response' || - type === 'm.poll.end' + effectiveType === 'org.matrix.msc3381.poll.response' || + effectiveType === 'org.matrix.msc3381.poll.end' || + effectiveType === 'm.poll.response' || + effectiveType === 'm.poll.end' ) return acc; @@ -117,6 +122,8 @@ export function useProcessedTimeline({ 'm.room.topic', 'm.room.avatar', 'org.matrix.msc3401.call.member', + 'org.matrix.msc3381.poll.start', + 'm.poll.start', ].includes(type); if (!isStandardRendered) { From f78496d0ff6cacc78abb010590e44550e27e6377 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 14 Apr 2026 23:31:55 -0400 Subject: [PATCH 139/253] fix: scope roomScrollCache to userId Keys scroll cache entries by userId:roomId so switching accounts doesn't reuse stale scroll positions from a different session. --- src/app/features/room/RoomTimeline.tsx | 13 +++++------ src/app/utils/roomScrollCache.test.ts | 30 +++++++++++++++++--------- src/app/utils/roomScrollCache.ts | 10 +++++---- 3 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index ded8e385a..c9bd03403 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -171,6 +171,7 @@ export function RoomTimeline({ onEditLastMessageRef, }: Readonly) { const mx = useMatrixClient(); + const mxUserId = mx.getUserId()!; const alive = useAlive(); const { editId, handleEdit } = useMessageEdit(editor, { onReset: onEditorReset, alive }); @@ -253,7 +254,7 @@ export function RoomTimeline({ // need to read the cache β€” the render-phase room-change block below only fires // in the (hypothetical) case where the room prop changes without a remount. const scrollCacheForRoomRef = useRef( - roomScrollCache.load(room.roomId) + roomScrollCache.load(mxUserId, room.roomId) ); const [atBottomState, setAtBottomState] = useState(true); const atBottomRef = useRef(atBottomState); @@ -289,7 +290,7 @@ export function RoomTimeline({ if (currentRoomIdRef.current !== room.roomId) { // Load incoming room's scroll cache (undefined for first-visit rooms). // Covers the rare case where room prop changes without a remount. - scrollCacheForRoomRef.current = roomScrollCache.load(room.roomId); + scrollCacheForRoomRef.current = roomScrollCache.load(mxUserId, room.roomId); hasInitialScrolledRef.current = false; mountScrollWindowRef.current = Date.now() + 3000; @@ -400,7 +401,7 @@ export function RoomTimeline({ // can provide them to VList upfront and skip this 80 ms wait entirely. const v = vListRef.current; if (v) { - roomScrollCache.save(room.roomId, { + roomScrollCache.save(mxUserId, room.roomId, { cache: v.cache, scrollOffset: v.scrollOffset, atBottom: true, @@ -808,7 +809,7 @@ export function RoomTimeline({ // live-timeline visit, producing stale VList measurements and making the // room appear to be at the wrong position (or visually empty) on re-entry. if (!eventId) { - roomScrollCache.save(room.roomId, { + roomScrollCache.save(mxUserId, room.roomId, { cache: v.cache, scrollOffset: offset, atBottom: isNowAtBottom, @@ -921,7 +922,7 @@ export function RoomTimeline({ ignoredUsersSet, showHiddenEvents, showTombstoneEvents, - mxUserId: mx.getUserId(), + mxUserId, readUptoEventId: readUptoEventIdRef.current, hideMembershipEvents, hideNickAvatarEvents, @@ -948,7 +949,7 @@ export function RoomTimeline({ // when it fired. Save now so the next visit skips the timer. const v = vListRef.current; if (v) { - roomScrollCache.save(room.roomId, { + roomScrollCache.save(mxUserId, room.roomId, { cache: v.cache, scrollOffset: v.scrollOffset, atBottom: true, diff --git a/src/app/utils/roomScrollCache.test.ts b/src/app/utils/roomScrollCache.test.ts index e77be9878..039bc634e 100644 --- a/src/app/utils/roomScrollCache.test.ts +++ b/src/app/utils/roomScrollCache.test.ts @@ -3,32 +3,42 @@ import { roomScrollCache } from './roomScrollCache'; // CacheSnapshot is opaque in tests β€” cast a plain object. const fakeCache = () => ({}) as import('./roomScrollCache').RoomScrollCache['cache']; +const userId = '@alice:test'; describe('roomScrollCache', () => { it('load returns undefined for an unknown roomId', () => { - expect(roomScrollCache.load('!unknown:test')).toBeUndefined(); + expect(roomScrollCache.load(userId, '!unknown:test')).toBeUndefined(); }); it('stores and retrieves data for a roomId', () => { const data = { cache: fakeCache(), scrollOffset: 120, atBottom: false }; - roomScrollCache.save('!room1:test', data); - expect(roomScrollCache.load('!room1:test')).toBe(data); + roomScrollCache.save(userId, '!room1:test', data); + expect(roomScrollCache.load(userId, '!room1:test')).toBe(data); }); it('overwrites existing data when saved again for the same roomId', () => { const first = { cache: fakeCache(), scrollOffset: 50, atBottom: true }; const second = { cache: fakeCache(), scrollOffset: 200, atBottom: false }; - roomScrollCache.save('!room2:test', first); - roomScrollCache.save('!room2:test', second); - expect(roomScrollCache.load('!room2:test')).toBe(second); + roomScrollCache.save(userId, '!room2:test', first); + roomScrollCache.save(userId, '!room2:test', second); + expect(roomScrollCache.load(userId, '!room2:test')).toBe(second); }); it('keeps data for separate rooms independent', () => { const a = { cache: fakeCache(), scrollOffset: 10, atBottom: true }; const b = { cache: fakeCache(), scrollOffset: 20, atBottom: false }; - roomScrollCache.save('!roomA:test', a); - roomScrollCache.save('!roomB:test', b); - expect(roomScrollCache.load('!roomA:test')).toBe(a); - expect(roomScrollCache.load('!roomB:test')).toBe(b); + roomScrollCache.save(userId, '!roomA:test', a); + roomScrollCache.save(userId, '!roomB:test', b); + expect(roomScrollCache.load(userId, '!roomA:test')).toBe(a); + expect(roomScrollCache.load(userId, '!roomB:test')).toBe(b); + }); + + it('scopes data per userId', () => { + const data1 = { cache: fakeCache(), scrollOffset: 100, atBottom: true }; + const data2 = { cache: fakeCache(), scrollOffset: 200, atBottom: false }; + roomScrollCache.save('@alice:test', '!room:test', data1); + roomScrollCache.save('@bob:test', '!room:test', data2); + expect(roomScrollCache.load('@alice:test', '!room:test')).toBe(data1); + expect(roomScrollCache.load('@bob:test', '!room:test')).toBe(data2); }); }); diff --git a/src/app/utils/roomScrollCache.ts b/src/app/utils/roomScrollCache.ts index 7288ae0e4..8336595a4 100644 --- a/src/app/utils/roomScrollCache.ts +++ b/src/app/utils/roomScrollCache.ts @@ -12,11 +12,13 @@ export type RoomScrollCache = { /** Session-scoped, per-room scroll cache. Not persisted across page reloads. */ const scrollCacheMap = new Map(); +const cacheKey = (userId: string, roomId: string): string => `${userId}:${roomId}`; + export const roomScrollCache = { - save(roomId: string, data: RoomScrollCache): void { - scrollCacheMap.set(roomId, data); + save(userId: string, roomId: string, data: RoomScrollCache): void { + scrollCacheMap.set(cacheKey(userId, roomId), data); }, - load(roomId: string): RoomScrollCache | undefined { - return scrollCacheMap.get(roomId); + load(userId: string, roomId: string): RoomScrollCache | undefined { + return scrollCacheMap.get(cacheKey(userId, roomId)); }, }; From 29e407699526d67322ac7bb8bb9321f383573872 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 00:23:43 -0400 Subject: [PATCH 140/253] refactor: align presence-auto-idle with sw-push-session-recovery - Remove activeSession param from useAppVisibility, use mx methods instead - Switch appEvents to multi-subscriber Set-based pattern - Update usePresenceAutoIdle to use subscription-based visibility handler - Update tests for new appEvents API --- src/app/hooks/useAppVisibility.ts | 20 +++++++--------- src/app/hooks/usePresenceAutoIdle.test.tsx | 25 +++++++++---------- src/app/hooks/usePresenceAutoIdle.ts | 8 +++---- src/app/utils/appEvents.ts | 28 ++++++++++++++++++++-- 4 files changed, 50 insertions(+), 31 deletions(-) diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index b1d25add0..e3000ecdf 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -1,6 +1,5 @@ import { useCallback, useEffect, useRef } from 'react'; import { MatrixClient } from '$types/matrix-sdk'; -import { Session } from '$state/sessions'; import { appEvents } from '../utils/appEvents'; import { useClientConfig, useExperimentVariant } from './useClientConfig'; import { createDebugLogger } from '../utils/debugLogger'; @@ -13,11 +12,11 @@ const DEFAULT_HEARTBEAT_INTERVAL_MS = 10 * 60 * 1000; const DEFAULT_RESUME_HEARTBEAT_SUPPRESS_MS = 60 * 1000; const DEFAULT_HEARTBEAT_MAX_BACKOFF_MS = 30 * 60 * 1000; -export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: Session) { +export function useAppVisibility(mx: MatrixClient | undefined) { const clientConfig = useClientConfig(); const sessionSyncConfig = clientConfig.sessionSync; - const sessionSyncVariant = useExperimentVariant('sessionSyncStrategy', activeSession?.userId); + const sessionSyncVariant = useExperimentVariant('sessionSyncStrategy', mx?.getUserId() ?? undefined); // Derive phase flags from experiment variant; fall back to direct config when not in experiment. const inSessionSync = sessionSyncVariant.inExperiment; @@ -55,9 +54,9 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S const pushSessionNow = useCallback( (reason: 'foreground' | 'focus' | 'heartbeat'): 'sent' | 'skipped' => { - const baseUrl = activeSession?.baseUrl; - const accessToken = activeSession?.accessToken; - const userId = activeSession?.userId; + const baseUrl = mx?.getHomeserverUrl(); + const accessToken = mx?.getAccessToken(); + const userId = mx?.getUserId(); const canPush = !!mx && typeof baseUrl === 'string' && @@ -88,9 +87,6 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S return 'sent'; }, [ - activeSession?.accessToken, - activeSession?.baseUrl, - activeSession?.userId, mx, phase1ForegroundResync, phase2VisibleHeartbeat, @@ -106,9 +102,9 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S `App visibility changed: ${isVisible ? 'visible (foreground)' : 'hidden (background)'}`, { visibilityState: document.visibilityState } ); - appEvents.onVisibilityChange?.(isVisible); + appEvents.emitVisibilityChange(isVisible); if (!isVisible) { - appEvents.onVisibilityHidden?.(); + appEvents.emitVisibilityHidden(); return; } @@ -171,7 +167,7 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S ]); useEffect(() => { - if (!phase2VisibleHeartbeat || !mx) return undefined; + if (!phase2VisibleHeartbeat) return undefined; // Reset adaptive backoff/suppression so a config or session change starts fresh. heartbeatFailuresRef.current = 0; diff --git a/src/app/hooks/usePresenceAutoIdle.test.tsx b/src/app/hooks/usePresenceAutoIdle.test.tsx index 0ebfd744a..043598c55 100644 --- a/src/app/hooks/usePresenceAutoIdle.test.tsx +++ b/src/app/hooks/usePresenceAutoIdle.test.tsx @@ -52,12 +52,10 @@ beforeEach(() => { userListeners.clear(); mockUser = makeMockUser(); mockMx = makeMockMx(); - appEvents.onVisibilityChange = null; }); afterEach(() => { vi.useRealTimers(); - appEvents.onVisibilityChange = null; }); // -------- tests -------- @@ -110,7 +108,7 @@ describe('usePresenceAutoIdle', () => { // Simulate app returning to foreground. act(() => { - appEvents.onVisibilityChange?.(true); + appEvents.emitVisibilityChange(true); }); expect(result.current).toBe(false); }); @@ -218,21 +216,24 @@ describe('usePresenceAutoIdle', () => { expect(result.current).toBe(false); }); - it('restores previous appEvents.onVisibilityChange on cleanup', () => { - const prev = vi.fn(); - appEvents.onVisibilityChange = prev; - - const { unmount } = renderHook( + it('unsubscribes from appEvents.onVisibilityChange on cleanup', () => { + const { result, unmount } = renderHook( () => useAutoIdledReader(mockMx, 'online', true, 5000), { wrapper } ); - // Our handler should be installed. - expect(appEvents.onVisibilityChange).not.toBe(prev); + // Go idle. + act(() => { + vi.advanceTimersByTime(5000); + }); + expect(result.current).toBe(true); unmount(); - // Previous handler should be restored. - expect(appEvents.onVisibilityChange).toBe(prev); + // After unmount, emitting visibility change should have no effect. + // (No error thrown means the handler was properly unsubscribed.) + act(() => { + appEvents.emitVisibilityChange(true); + }); }); }); diff --git a/src/app/hooks/usePresenceAutoIdle.ts b/src/app/hooks/usePresenceAutoIdle.ts index abf25edba..dc5af7e21 100644 --- a/src/app/hooks/usePresenceAutoIdle.ts +++ b/src/app/hooks/usePresenceAutoIdle.ts @@ -73,16 +73,14 @@ export function usePresenceAutoIdle( // When the app returns to the foreground, treat it as activity so the user // isn't shown as idle the moment they switch back to the tab/PWA. - const prevOnVisibilityChange = appEvents.onVisibilityChange; - appEvents.onVisibilityChange = (isVisible: boolean) => { - prevOnVisibilityChange?.(isVisible); + const unsubVisibility = appEvents.onVisibilityChange((isVisible: boolean) => { if (isVisible) handleActivity(); - }; + }); return () => { ACTIVITY_EVENTS.forEach((ev) => document.removeEventListener(ev, handleActivity)); clearTimer(); - appEvents.onVisibilityChange = prevOnVisibilityChange; + unsubVisibility(); }; }, [clearTimer, presenceMode, sendPresence, setAutoIdled, timeoutMs]); diff --git a/src/app/utils/appEvents.ts b/src/app/utils/appEvents.ts index 2834c5b6f..2430f5324 100644 --- a/src/app/utils/appEvents.ts +++ b/src/app/utils/appEvents.ts @@ -1,5 +1,29 @@ +export type VisibilityChangeHandler = (isVisible: boolean) => void; +type VisibilityHiddenHandler = () => void; + +const visibilityChangeHandlers = new Set(); +const visibilityHiddenHandlers = new Set(); + export const appEvents = { - onVisibilityHidden: null as (() => void) | null, + onVisibilityHidden(handler: VisibilityHiddenHandler): () => void { + visibilityHiddenHandlers.add(handler); + return () => { + visibilityHiddenHandlers.delete(handler); + }; + }, + + emitVisibilityHidden(): void { + visibilityHiddenHandlers.forEach((h) => h()); + }, + + onVisibilityChange(handler: VisibilityChangeHandler): () => void { + visibilityChangeHandlers.add(handler); + return () => { + visibilityChangeHandlers.delete(handler); + }; + }, - onVisibilityChange: null as ((isVisible: boolean) => void) | null, + emitVisibilityChange(isVisible: boolean): void { + visibilityChangeHandlers.forEach((h) => h(isVisible)); + }, }; From 69179c15648c1e1d46b4bf7f80eea9f7b83103a7 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 10:58:40 -0400 Subject: [PATCH 141/253] style: fix lint errors from merge --- src/app/hooks/useAppVisibility.ts | 12 ++-- src/app/hooks/usePresenceAutoIdle.test.tsx | 66 ++++++++-------------- 2 files changed, 30 insertions(+), 48 deletions(-) diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index e3000ecdf..af2bd2e69 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -16,7 +16,10 @@ export function useAppVisibility(mx: MatrixClient | undefined) { const clientConfig = useClientConfig(); const sessionSyncConfig = clientConfig.sessionSync; - const sessionSyncVariant = useExperimentVariant('sessionSyncStrategy', mx?.getUserId() ?? undefined); + const sessionSyncVariant = useExperimentVariant( + 'sessionSyncStrategy', + mx?.getUserId() ?? undefined + ); // Derive phase flags from experiment variant; fall back to direct config when not in experiment. const inSessionSync = sessionSyncVariant.inExperiment; @@ -86,12 +89,7 @@ export function useAppVisibility(mx: MatrixClient | undefined) { }); return 'sent'; }, - [ - mx, - phase1ForegroundResync, - phase2VisibleHeartbeat, - phase3AdaptiveBackoffJitter, - ] + [mx, phase1ForegroundResync, phase2VisibleHeartbeat, phase3AdaptiveBackoffJitter] ); useEffect(() => { diff --git a/src/app/hooks/usePresenceAutoIdle.test.tsx b/src/app/hooks/usePresenceAutoIdle.test.tsx index 043598c55..8e2f6d138 100644 --- a/src/app/hooks/usePresenceAutoIdle.test.tsx +++ b/src/app/hooks/usePresenceAutoIdle.test.tsx @@ -1,10 +1,10 @@ import { act, renderHook } from '@testing-library/react'; import { Provider, useAtomValue } from 'jotai'; import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'; -import { usePresenceAutoIdle } from './usePresenceAutoIdle'; import { presenceAutoIdledAtom } from '$state/settings'; import { appEvents } from '$utils/appEvents'; import type { ReactNode } from 'react'; +import { usePresenceAutoIdle } from './usePresenceAutoIdle'; // -------- mock setup -------- @@ -39,7 +39,6 @@ function useAutoIdledReader( sendPresence: boolean, timeoutMs: number ) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any usePresenceAutoIdle(mx as any, presenceMode, sendPresence, timeoutMs); return useAtomValue(presenceAutoIdledAtom); } @@ -62,10 +61,9 @@ afterEach(() => { describe('usePresenceAutoIdle', () => { it('sets auto-idle after the timeout elapses', () => { - const { result } = renderHook( - () => useAutoIdledReader(mockMx, 'online', true, 5000), - { wrapper } - ); + const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), { + wrapper, + }); expect(result.current).toBe(false); @@ -77,10 +75,9 @@ describe('usePresenceAutoIdle', () => { }); it('resets auto-idle when user activity is detected', () => { - const { result } = renderHook( - () => useAutoIdledReader(mockMx, 'online', true, 5000), - { wrapper } - ); + const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), { + wrapper, + }); // Go idle. act(() => { @@ -96,10 +93,9 @@ describe('usePresenceAutoIdle', () => { }); it('resets auto-idle when app becomes visible via appEvents', () => { - const { result } = renderHook( - () => useAutoIdledReader(mockMx, 'online', true, 5000), - { wrapper } - ); + const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), { + wrapper, + }); act(() => { vi.advanceTimersByTime(5000); @@ -114,10 +110,7 @@ describe('usePresenceAutoIdle', () => { }); it('does not go idle when presenceMode is not online', () => { - const { result } = renderHook( - () => useAutoIdledReader(mockMx, 'dnd', true, 5000), - { wrapper } - ); + const { result } = renderHook(() => useAutoIdledReader(mockMx, 'dnd', true, 5000), { wrapper }); act(() => { vi.advanceTimersByTime(10000); @@ -126,10 +119,9 @@ describe('usePresenceAutoIdle', () => { }); it('does not go idle when sendPresence is false', () => { - const { result } = renderHook( - () => useAutoIdledReader(mockMx, 'online', false, 5000), - { wrapper } - ); + const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', false, 5000), { + wrapper, + }); act(() => { vi.advanceTimersByTime(10000); @@ -138,10 +130,7 @@ describe('usePresenceAutoIdle', () => { }); it('does not go idle when timeoutMs is 0', () => { - const { result } = renderHook( - () => useAutoIdledReader(mockMx, 'online', true, 0), - { wrapper } - ); + const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 0), { wrapper }); act(() => { vi.advanceTimersByTime(10000); @@ -150,10 +139,9 @@ describe('usePresenceAutoIdle', () => { }); it('restarts the idle timer on activity before timeout', () => { - const { result } = renderHook( - () => useAutoIdledReader(mockMx, 'online', true, 5000), - { wrapper } - ); + const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), { + wrapper, + }); // Advance partially, then trigger activity. act(() => { @@ -194,10 +182,9 @@ describe('usePresenceAutoIdle', () => { }); it('clears auto-idle when another device sets presence to online', () => { - const { result } = renderHook( - () => useAutoIdledReader(mockMx, 'online', true, 5000), - { wrapper } - ); + const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), { + wrapper, + }); act(() => { vi.advanceTimersByTime(5000); @@ -209,18 +196,15 @@ describe('usePresenceAutoIdle', () => { expect(handlers.length).toBeGreaterThan(0); act(() => { - handlers.forEach((h) => - h({}, { userId: '@alice:test', presence: 'online' }) - ); + handlers.forEach((h) => h({}, { userId: '@alice:test', presence: 'online' })); }); expect(result.current).toBe(false); }); it('unsubscribes from appEvents.onVisibilityChange on cleanup', () => { - const { result, unmount } = renderHook( - () => useAutoIdledReader(mockMx, 'online', true, 5000), - { wrapper } - ); + const { result, unmount } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), { + wrapper, + }); // Go idle. act(() => { From 6e8f5729403ad8f7b188a6db7cb3fc21d2cc8c3c Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 11:46:46 -0400 Subject: [PATCH 142/253] chore: add changeset for timeline scroll fixes --- .changeset/fix-timeline-scroll-regressions.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fix-timeline-scroll-regressions.md diff --git a/.changeset/fix-timeline-scroll-regressions.md b/.changeset/fix-timeline-scroll-regressions.md new file mode 100644 index 000000000..892cf3ed0 --- /dev/null +++ b/.changeset/fix-timeline-scroll-regressions.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Fix timeline scroll regressions: stay-at-bottom, Jump to Latest button flicker, phantom unread dot, and blank notification page recovery From d7fd6406de89d693fd74168a1a7787b1f3a2159d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 11:58:45 -0400 Subject: [PATCH 143/253] fix(presence): address review feedback - Fix test mock path to match relative import - Only send status_msg when explicitly setting DND (avoid clearing user status) - Guard lastActiveTs null check to prevent false presence badges - Remove unrelated enableMessageBookmarks leak from PR scope - Revert DevelopTools rotate-sessions changes (belongs in PR #670) - Add in-memory presence REST cache + in-flight dedupe to prevent N+1 floods - Only log 5xx server errors in presence fetch (suppress 404/network) - Close status picker menu after selection for UX consistency - Guard heartbeat effect on mx being defined --- .../settings/developer-tools/DevelopTools.tsx | 82 +------------------ src/app/hooks/useAppVisibility.ts | 2 +- src/app/hooks/useUserPresence.test.tsx | 5 +- src/app/hooks/useUserPresence.ts | 72 ++++++++++++---- src/app/pages/client/ClientNonUIFeatures.tsx | 2 +- .../client/sidebar/AccountSwitcherTab.tsx | 1 + .../pages/client/sidebar/DirectDMsList.tsx | 13 ++- src/app/state/settings.ts | 6 -- 8 files changed, 76 insertions(+), 107 deletions(-) diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index 6bfd0f6cb..c8ffeb12d 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -1,6 +1,5 @@ import { useCallback, useState } from 'react'; -import { Box, Text, Scroll, Switch, Button, Spinner, color } from 'folds'; -import { KnownMembership } from '$types/matrix-sdk'; +import { Box, Text, Scroll, Switch, Button } from 'folds'; import { PageContent } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -10,7 +9,6 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { AccountDataEditor, AccountDataSubmitCallback } from '$components/AccountDataEditor'; import { copyToClipboard } from '$utils/dom'; import { SequenceCardStyle } from '$features/settings/styles.css'; -import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { SettingsSectionPage } from '../SettingsSectionPage'; import { AccountData } from './AccountData'; import { SyncDiagnostics } from './SyncDiagnostics'; @@ -27,33 +25,6 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp const [expand, setExpend] = useState(false); const [accountDataType, setAccountDataType] = useState(); - const [rotateState, rotateAllSessions] = useAsyncCallback< - { rotated: number; total: number }, - Error, - [] - >( - useCallback(async () => { - const crypto = mx.getCrypto(); - if (!crypto) throw new Error('Crypto module not available'); - - const encryptedRooms = mx - .getRooms() - .filter( - (room) => - room.getMyMembership() === KnownMembership.Join && mx.isRoomEncrypted(room.roomId) - ); - - await Promise.all(encryptedRooms.map((room) => crypto.forceDiscardSession(room.roomId))); - const rotated = encryptedRooms.length; - - // Proactively start session creation + key sharing with all devices - // (including bridge bots). fire-and-forget per room. - encryptedRooms.forEach((room) => crypto.prepareToEncrypt(room)); - - return { rotated, total: encryptedRooms.length }; - }, [mx]) - ); - const submitAccountData: AccountDataSubmitCallback = useCallback( async (type, content) => { // TODO: remove cast once account data typing is unified. @@ -138,57 +109,6 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp )} {developerTools && } - {developerTools && ( - - Encryption - - - ) - } - > - - {rotateState.status === AsyncStatus.Loading ? 'Rotating…' : 'Rotate'} - - - } - > - {rotateState.status === AsyncStatus.Success && ( - - Sessions discarded for {rotateState.data.rotated} of{' '} - {rotateState.data.total} encrypted rooms. Key sharing is starting in the - background β€” send a message in an affected room to confirm delivery to - bridges. - - )} - {rotateState.status === AsyncStatus.Error && ( - - {rotateState.error.message} - - )} - - - - )} {developerTools && ( { - if (!phase2VisibleHeartbeat) return undefined; + if (!phase2VisibleHeartbeat || !mx) return undefined; // Reset adaptive backoff/suppression so a config or session change starts fresh. heartbeatFailuresRef.current = 0; diff --git a/src/app/hooks/useUserPresence.test.tsx b/src/app/hooks/useUserPresence.test.tsx index c311563b6..78f334d71 100644 --- a/src/app/hooks/useUserPresence.test.tsx +++ b/src/app/hooks/useUserPresence.test.tsx @@ -1,6 +1,6 @@ import { act, renderHook } from '@testing-library/react'; import { beforeEach, describe, expect, it, vi } from 'vitest'; -import { useUserPresence, Presence } from './useUserPresence'; +import { useUserPresence, Presence, clearPresenceCache } from './useUserPresence'; // ------- mock setup ------- @@ -45,7 +45,7 @@ const mockMx = { removeListener: vi.fn(), }; -vi.mock('$hooks/useMatrixClient', () => ({ +vi.mock('./useMatrixClient', () => ({ useMatrixClient: () => mockMx, })); @@ -54,6 +54,7 @@ const USER_ID = '@alice:test'; beforeEach(() => { vi.clearAllMocks(); userListeners.clear(); + clearPresenceCache(); mockUser = null; mockGetPresence = () => new Promise(() => {}); // pending by default mockMx.getUser.mockImplementation(() => mockUser); diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index 71a3d5b43..6cabf4546 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -22,6 +22,60 @@ const getUserPresence = (user: User): UserPresence => ({ lastActiveTs: user.getLastActiveTs(), }); +// In-memory presence REST cache to avoid N+1 /presence/{userId}/status floods. +// Multiple hook instances for the same user share a single in-flight request. +const PRESENCE_CACHE_TTL_MS = 60_000; +const presenceCache = new Map(); +const presenceInflight = new Map>(); + +/** Visible for testing β€” clears the in-memory REST presence cache. */ +export function clearPresenceCache(): void { + presenceCache.clear(); + presenceInflight.clear(); +} + +function fetchPresenceOnce( + mx: { getPresence: (userId: string) => Promise<{ presence: string; status_msg?: string; currently_active?: boolean; last_active_ago?: number | null }> }, + userId: string +): Promise { + const cached = presenceCache.get(userId); + if (cached && Date.now() - cached.fetchedAt < PRESENCE_CACHE_TTL_MS) { + return Promise.resolve(cached.data); + } + + const existing = presenceInflight.get(userId); + if (existing) return existing; + + const promise = mx + .getPresence(userId) + .then((resp) => { + const data: UserPresence = { + presence: resp.presence as Presence, + status: resp.status_msg, + active: resp.currently_active ?? false, + lastActiveTs: + resp.last_active_ago != null ? Date.now() - resp.last_active_ago : undefined, + }; + presenceCache.set(userId, { data, fetchedAt: Date.now() }); + return data; + }) + .catch((err: unknown) => { + // Suppress expected failures (404/403 = presence not supported, network errors). + // Only log unexpected server errors (5xx) for debugging. + const status = (err as { httpStatus?: number })?.httpStatus; + if (status && status >= 500) { + console.warn('[useUserPresence] REST fetch failed for', userId, err); + } + return undefined; + }) + .finally(() => { + presenceInflight.delete(userId); + }); + + presenceInflight.set(userId, promise); + return promise; +} + export const useUserPresence = (userId: string): UserPresence | undefined => { const mx = useMatrixClient(); const user = mx.getUser(userId); @@ -38,20 +92,10 @@ export const useUserPresence = (userId: string): UserPresence | undefined => { // Guard against empty userId β€” callers that render a fixed number of hooks (e.g. group DM // slots) pass '' for absent members; firing getPresence('') would be a malformed request. if (userId && (!user || user.getLastActiveTs() === 0)) { - mx.getPresence(userId) - .then((resp) => { - if (cancelled) return; - setPresence({ - presence: resp.presence as Presence, - status: resp.status_msg, - active: resp.currently_active ?? false, - lastActiveTs: - resp.last_active_ago != null ? Date.now() - resp.last_active_ago : undefined, - }); - }) - .catch(() => { - // Presence not available on this server (404 or not supported) β€” keep existing state. - }); + fetchPresenceOnce(mx, userId).then((data) => { + if (cancelled || !data) return; + setPresence(data); + }); } const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (event, u) => { diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index e4a8037ac..7c71db23a 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -871,7 +871,7 @@ function PresenceFeature() { // their presence events because the extension is still enabled above. mx.setPresence({ presence: effectiveState, - status_msg: sendPresence && effectiveMode === 'dnd' ? 'dnd' : '', + ...(sendPresence && effectiveMode === 'dnd' ? { status_msg: 'dnd' } : {}), }).catch(() => { // Server doesn't support presence β€” ignore. }); diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index 737bcf7c4..191a585dd 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -421,6 +421,7 @@ export function AccountSwitcherTab() { setAutoIdled(false); // Re-enable presence broadcasting if the master toggle was off if (!sendPresence) setSendPresence(true); + setMenuAnchor(undefined); }} > diff --git a/src/app/pages/client/sidebar/DirectDMsList.tsx b/src/app/pages/client/sidebar/DirectDMsList.tsx index 60063d0a3..4d142985d 100644 --- a/src/app/pages/client/sidebar/DirectDMsList.tsx +++ b/src/app/pages/client/sidebar/DirectDMsList.tsx @@ -62,11 +62,20 @@ function DMItem({ room, selected }: DMItemProps) { const groupDMOnline = isGroupDM && [member0Presence, member1Presence, member2Presence].some( - (p) => p && p.lastActiveTs !== 0 && p.presence === Presence.Online + (p) => + p && + p.lastActiveTs != null && + p.lastActiveTs !== 0 && + p.presence === Presence.Online ); let presenceBadge: ReactNode; - if (!isGroupDM && singleDMPresence && singleDMPresence.lastActiveTs !== 0) { + if ( + !isGroupDM && + singleDMPresence && + singleDMPresence.lastActiveTs != null && + singleDMPresence.lastActiveTs !== 0 + ) { presenceBadge = ; } else if (isGroupDM && groupDMOnline) { presenceBadge = ; diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 935b420ba..adcf90c71 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -125,9 +125,6 @@ export interface Settings { showPersonaSetting: boolean; closeFoldersByDefault: boolean; - // experimental - enableMessageBookmarks: boolean; - // furry stuff renderAnimals: boolean; } @@ -230,9 +227,6 @@ const defaultSettings: Settings = { showPersonaSetting: false, closeFoldersByDefault: false, - // experimental - enableMessageBookmarks: false, - // furry stuff renderAnimals: true, }; From 82bde318b88160c38912a45788942205d14770fe Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 12:02:12 -0400 Subject: [PATCH 144/253] fix(dev-tools): add error handling for prepareToEncrypt --- .../features/settings/developer-tools/DevelopTools.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index e9ef1ee89..24445bdcc 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -57,8 +57,14 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp const rotated = results.filter((r) => r.status === 'fulfilled').length; // Proactively start session creation + key sharing with all devices - // (including bridge bots). fire-and-forget per room. - encryptedRooms.forEach((room) => crypto.prepareToEncrypt(room)); + // (including bridge bots). fire-and-forget per room, but surface failures. + encryptedRooms.forEach((room) => { + void Promise.resolve() + .then(() => crypto.prepareToEncrypt(room)) + .catch((error) => { + console.error('Failed to prepare room encryption', room.roomId, error); + }); + }); return { rotated, total: encryptedRooms.length }; }, [mx]) From 7680897e73708217dd3ddc09596556eb81600416 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 13:33:54 -0400 Subject: [PATCH 145/253] fix(polls): strip invalid vote selections instead of discarding entire vote Per MSC3381, invalid individual answer selections should be stripped but remaining valid selections should still be counted. Changed from valid.every() (discard all) to valid.filter() (strip invalid, keep valid). --- src/app/features/room/poll/PollEvent.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/features/room/poll/PollEvent.tsx b/src/app/features/room/poll/PollEvent.tsx index 678a9cfd2..d1260e1b6 100644 --- a/src/app/features/room/poll/PollEvent.tsx +++ b/src/app/features/room/poll/PollEvent.tsx @@ -148,16 +148,16 @@ export function computeTally( const tally = new Map>(answers.map((a) => [a.id, new Set()])); userVotes.forEach(({ ts, selections }, userId) => { if (ts > cutoff) return; - const valid = selections.slice(0, maxSelections); - if (!valid.every((s) => validAnswerIds.has(s))) return; + // Per MSC3381, strip invalid answer IDs but keep the remaining valid ones. + const valid = selections.slice(0, maxSelections).filter((s) => validAnswerIds.has(s)); + if (valid.length === 0) return; valid.forEach((sel) => tally.get(sel)?.add(userId)); }); const myEntry = userVotes.get(myUserId); let myVote: string[] = []; if (myEntry && myEntry.ts <= cutoff) { - const myValid = myEntry.selections.slice(0, maxSelections); - if (myValid.every((s) => validAnswerIds.has(s))) myVote = myValid; + myVote = myEntry.selections.slice(0, maxSelections).filter((s) => validAnswerIds.has(s)); } return { tally, myVote, isEnded }; From 850e025e7c370f73bef8a302520508c8194dbbd1 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 13:34:33 -0400 Subject: [PATCH 146/253] fix(room-nav): use effective event type for decrypted message previews Use getEffectiveEvent()?.type instead of getType() to get the decrypted event type. getType() returns the wire type (m.room.encrypted) even after decryption, causing previews to always show 'Encrypted message' instead of the actual message content. --- src/app/hooks/useRoomLastMessage.test.tsx | 17 +++++++++++++++-- src/app/hooks/useRoomLastMessage.ts | 12 ++++++++---- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/app/hooks/useRoomLastMessage.test.tsx b/src/app/hooks/useRoomLastMessage.test.tsx index 4e3065583..5f685f342 100644 --- a/src/app/hooks/useRoomLastMessage.test.tsx +++ b/src/app/hooks/useRoomLastMessage.test.tsx @@ -15,13 +15,17 @@ function makeEvent(overrides: { sender?: string; roomId?: string; redacted?: boolean; + effectiveType?: string; }) { + const type = overrides.type ?? 'm.room.message'; + const content = overrides.content ?? { msgtype: 'm.text', body: 'hello' }; return { - getType: () => overrides.type ?? 'm.room.message', - getContent: () => overrides.content ?? { msgtype: 'm.text', body: 'hello' }, + getType: () => type, + getContent: () => content, getSender: () => overrides.sender ?? '@alice:test', getRoomId: () => overrides.roomId ?? '!room:test', isRedacted: () => overrides.redacted ?? false, + getEffectiveEvent: () => ({ type: overrides.effectiveType ?? type, content }), } as never; } @@ -95,6 +99,15 @@ describe('eventToPreviewText', () => { expect(eventToPreviewText(ev)).toBe('πŸ”’ Encrypted message'); }); + it('returns decrypted content when event has been decrypted', () => { + const ev = makeEvent({ + type: 'm.room.encrypted', + content: { msgtype: 'm.text', body: 'decrypted text' }, + effectiveType: 'm.room.message', + }); + expect(eventToPreviewText(ev)).toBe('decrypted text'); + }); + it('returns sticker text', () => { const ev = makeEvent({ type: 'm.sticker', content: { body: 'party' } }); expect(eventToPreviewText(ev)).toBe('πŸŽ‰ party'); diff --git a/src/app/hooks/useRoomLastMessage.ts b/src/app/hooks/useRoomLastMessage.ts index 7f773ec97..c8f27e2a3 100644 --- a/src/app/hooks/useRoomLastMessage.ts +++ b/src/app/hooks/useRoomLastMessage.ts @@ -25,17 +25,21 @@ export function stripReplyFallback(body: string): string { export function eventToPreviewText(ev: MatrixEvent): string | undefined { if (ev.isRedacted()) return undefined; - const type = ev.getType(); + // After decryption, getType() still returns 'm.room.encrypted' (the wire type). + // Use the effective event type to get the decrypted type when available. + const effectiveType = (ev.getEffectiveEvent()?.type as string | undefined) ?? ev.getType(); + const type = effectiveType; + const content = ev.getContent(); // Skip reactions and edits β€” they aren't standalone messages. if (type === MessageEvent.Reaction) return undefined; - const relType = ev.getContent()?.['m.relates_to']?.rel_type; + const relType = content?.['m.relates_to']?.rel_type; if (relType === 'm.replace') return undefined; + // Only show encrypted placeholder if the event is still encrypted (not yet decrypted). if (type === MessageEvent.RoomMessageEncrypted) return 'πŸ”’ Encrypted message'; if (type === MessageEvent.RoomMessage) { - const content = ev.getContent(); const { msgtype } = content; if (msgtype === MsgType.Text || msgtype === MsgType.Emote || msgtype === MsgType.Notice) { return stripReplyFallback(content.body); @@ -47,7 +51,7 @@ export function eventToPreviewText(ev: MatrixEvent): string | undefined { } if (type === MessageEvent.Sticker) { - return `πŸŽ‰ ${ev.getContent().body ?? 'Sticker'}`; + return `πŸŽ‰ ${content.body ?? 'Sticker'}`; } return undefined; From eac371abc70ab21f97ca0e954df2b5d67c5ef685 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 13:37:53 -0400 Subject: [PATCH 147/253] fix(timeline): add behavior parameter to scrollToBottom callback Accept optional 'instant' | 'smooth' behavior parameter and pass it through to scrollToIndex. useTimelineSync calls scrollToBottom('instant') so the signature needs to match. --- src/app/features/room/RoomTimeline.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index c42cc0708..fb7fa890c 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -249,14 +249,14 @@ export function RoomTimeline({ const processedEventsRef = useRef([]); const timelineSyncRef = useRef(null as unknown as typeof timelineSync); - const scrollToBottom = useCallback(() => { + const scrollToBottom = useCallback((behavior?: 'instant' | 'smooth') => { if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; // Guard against VList's intermediate height-correction scroll events that // would otherwise call setAtBottom(false) before the scroll settles. programmaticScrollToBottomRef.current = Date.now(); - vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); + vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: behavior === 'smooth' }); }, []); const timelineSync = useTimelineSync({ From 5af258a7301245da89ce5c6f344d16bcdaaca8b2 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 17:52:38 -0400 Subject: [PATCH 148/253] fix(timeline): use timestamp settling window for programmatic scroll guard MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the boolean programmaticScrollToBottomRef with a timestamp (ms epoch) and a SCROLL_SETTLE_MS window. The boolean approach had a race condition: VList fires isNowAtBottom=false β†’ true β†’ false during height re-measurement after scrollToIndex(); clearing the guard on the first 'true' event allowed the second 'false' to set atBottomState=false and flash the Jump to Latest button. The timestamp window expires naturally after 200ms without ever being reset by 'true' events, suppressing all intermediate false-negatives. Also reset atBottom and clear the guard when navigating to a specific eventId (e.g. via bookmarks) so the Jump to Latest button appears immediately when viewing a historical slice, even when the cache previously put us at the live bottom. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 58 ++++++++++++++++---------- 1 file changed, 35 insertions(+), 23 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index c9bd03403..9fa4a9198 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -109,6 +109,12 @@ interface TimelineItemProps { } /* eslint-enable react/no-unused-prop-types */ +// How long (ms) to suppress spurious "not at bottom" events after a +// programmatic scroll-to-bottom. VList can fire several intermediate onScroll +// events while it re-measures item heights after a scrollToIndex(); the window +// lets all of them pass without flashing the "Jump to Latest" button. +const SCROLL_SETTLE_MS = 200; + // Declared outside memo() so the callback receives a reference, not an inline // function expression (satisfies prefer-arrow-callback). function TimelineItemInner({ data, renderRef }: TimelineItemProps) { @@ -277,12 +283,15 @@ export function RoomTimeline({ // A recovery useLayoutEffect watches for processedEvents becoming non-empty // and performs the final scroll + setIsReady when this flag is set. const pendingReadyRef = useRef(false); - // Set to true before each programmatic scroll-to-bottom so intermediate - // onScroll events from virtua's height-correction pass cannot drive - // atBottomState to false (flashing the "Jump to Latest" button). - // Cleared when VList confirms isNowAtBottom, or on the first intermediate - // event so subsequent user-initiated scrolls are tracked normally. - const programmaticScrollToBottomRef = useRef(false); + // Set to a timestamp (ms epoch) before each programmatic scroll-to-bottom so + // intermediate onScroll events from virtua's height-correction pass cannot + // drive atBottomState to false (flashing the "Jump to Latest" button). + // Using a timestamp rather than a boolean means the window expires naturally + // after SCROLL_SETTLE_MS without needing to clear it on `isNowAtBottom=true`. + // That prevents the second wave of false-negative events (which VList fires + // after re-measuring item heights) from slipping through after the first + // `isNowAtBottom=true` confirms the position. + const programmaticScrollToBottomRef = useRef(0); const currentRoomIdRef = useRef(room.roomId); const [isReady, setIsReady] = useState(false); @@ -296,7 +305,7 @@ export function RoomTimeline({ mountScrollWindowRef.current = Date.now() + 3000; currentRoomIdRef.current = room.roomId; pendingReadyRef.current = false; - programmaticScrollToBottomRef.current = false; + programmaticScrollToBottomRef.current = 0; if (initialScrollTimerRef.current !== undefined) { clearTimeout(initialScrollTimerRef.current); initialScrollTimerRef.current = undefined; @@ -313,7 +322,7 @@ export function RoomTimeline({ if (lastIndex < 0) return; // Guard against VList's intermediate height-correction scroll events that // would otherwise call setAtBottom(false) before the scroll settles. - programmaticScrollToBottomRef.current = true; + programmaticScrollToBottomRef.current = Date.now(); vListRef.current.scrollTo(vListRef.current.scrollSize); }, []); @@ -374,7 +383,7 @@ export function RoomTimeline({ // Revisiting a room with a cached scroll state β€” restore position // immediately and skip the 80 ms stabilisation timer entirely. if (savedCache.atBottom) { - programmaticScrollToBottomRef.current = true; + programmaticScrollToBottomRef.current = Date.now(); vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); // scrollToIndex is async; pre-empt the button so it doesn't flash for // one render cycle before VList's onScroll confirms the position. @@ -393,7 +402,7 @@ export function RoomTimeline({ initialScrollTimerRef.current = setTimeout(() => { initialScrollTimerRef.current = undefined; if (processedEventsRef.current.length > 0) { - programmaticScrollToBottomRef.current = true; + programmaticScrollToBottomRef.current = Date.now(); vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end', }); @@ -517,9 +526,16 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; + // Reset atBottom and the programmatic-scroll guard so that: + // 1. The "Jump to Latest" button appears immediately (we are no longer at + // the live bottom β€” we are viewing a historical slice). + // 2. The guard doesn't suppress the `isNowAtBottom=false` event that VList + // fires when it scrolls to the target eventId. + setAtBottom(false); + programmaticScrollToBottomRef.current = 0; setIsReady(false); timelineSyncRef.current.loadEventTimeline(eventId); - }, [eventId, room.roomId]); + }, [eventId, room.roomId, setAtBottom]); useEffect(() => { if (eventId) return; @@ -787,19 +803,16 @@ export function RoomTimeline({ const distanceFromBottom = v.scrollSize - offset - v.viewportSize; const isNowAtBottom = distanceFromBottom < 100; - // Clear the programmatic-scroll guard whenever VList confirms we are at the - // bottom, regardless of whether atBottomRef needs updating. - if (isNowAtBottom) programmaticScrollToBottomRef.current = false; + const isSettling = Date.now() - programmaticScrollToBottomRef.current < SCROLL_SETTLE_MS; if (isNowAtBottom !== atBottomRef.current) { - if (isNowAtBottom || !programmaticScrollToBottomRef.current) { + // Suppress intermediate "not at bottom" events that fire while VList + // re-measures item heights after a programmatic scrollToIndex. The + // timestamp window expires naturally β€” no need to clear it on + // `isNowAtBottom=true`, which prevents a second wave of false-negatives + // (fired after height re-measurement completes) from slipping through. + if (isNowAtBottom || !isSettling) { setAtBottom(isNowAtBottom); } - // else: programmatic guard active β€” suppress the false-negative and keep - // the guard set. VList can fire several intermediate "not at bottom" - // events while it corrects item heights after a scrollTo(); clearing the - // guard on the first one would let the second cause a spurious - // setAtBottom(false) and flash the "Jump to Latest" button. The guard - // is cleared above (unconditionally) when isNowAtBottom becomes true. } // Keep the scroll cache fresh so the next visit to this room can restore @@ -940,9 +953,8 @@ export function RoomTimeline({ if (!pendingReadyRef.current) return; if (processedEvents.length === 0) return; pendingReadyRef.current = false; - programmaticScrollToBottomRef.current = true; + programmaticScrollToBottomRef.current = Date.now(); vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); - // scrollToIndex is async; pre-empt atBottom so the "Jump to Latest" button // doesn't flash for one render cycle before onScroll confirms the position. setAtBottom(true); // The 80 ms timer's cache-save was skipped because processedEvents was empty From 7bb22d20e932e1a403adbf357642e396c609a4d6 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 17:52:48 -0400 Subject: [PATCH 149/253] fix(nav): check DM membership before space parents in useRoomNavigate Mirrors the fix already applied in useNotificationJumper: when a room belongs to both the direct-message list and a space, prefer the /direct route over the space route. Previously useRoomNavigate checked orphan space parents first, which caused bookmark jumps and room-nav clicks on DMs-in-spaces to open the room via the space path instead of the direct path. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/useRoomNavigate.ts | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/app/hooks/useRoomNavigate.ts b/src/app/hooks/useRoomNavigate.ts index 51555125c..c2918d5ca 100644 --- a/src/app/hooks/useRoomNavigate.ts +++ b/src/app/hooks/useRoomNavigate.ts @@ -37,7 +37,20 @@ export const useRoomNavigate = () => { const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId); const openSpaceTimeline = developerTools && spaceSelectedId === roomId; - const orphanParents = openSpaceTimeline ? [roomId] : getOrphanParents(roomToParents, roomId); + // Developer-mode: view the space's own timeline (must be checked first). + if (openSpaceTimeline) { + navigate(getSpaceRoomPath(roomIdOrAlias, roomId, eventId), opts); + return; + } + + // DMs take priority over space membership so direct chats always open + // via the direct route, even when the room also belongs to a space. + if (mDirects.has(roomId)) { + navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts); + return; + } + + const orphanParents = getOrphanParents(roomToParents, roomId); if (orphanParents.length > 0) { let parentSpace: string; if (spaceSelectedId && orphanParents.includes(spaceSelectedId)) { @@ -48,15 +61,7 @@ export const useRoomNavigate = () => { const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, parentSpace); - navigate( - getSpaceRoomPath(pSpaceIdOrAlias, openSpaceTimeline ? roomId : roomIdOrAlias, eventId), - opts - ); - return; - } - - if (mDirects.has(roomId)) { - navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts); + navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias, eventId), opts); return; } From 42c59adc3f2617d0975aedac9ea87030cbc8cc91 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:00:19 -0400 Subject: [PATCH 150/253] chore(prompts): add rebuild integration and review upstream PRs prompts Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .github/prompts/rebuild integration.prompt.md | 12 ++++++++++++ .../review open PRs against `upstream`.prompt.md | 10 ++++++++++ 2 files changed, 22 insertions(+) create mode 100644 .github/prompts/rebuild integration.prompt.md create mode 100644 .github/prompts/review open PRs against `upstream`.prompt.md diff --git a/.github/prompts/rebuild integration.prompt.md b/.github/prompts/rebuild integration.prompt.md new file mode 100644 index 000000000..000673e52 --- /dev/null +++ b/.github/prompts/rebuild integration.prompt.md @@ -0,0 +1,12 @@ +--- +name: rebuild integration +description: When asked to rebuild integration, or if there are large numbers of changes to branches +--- + + + +Please rebuild the `integration` branch, by deleting `integration` and then creating a new `integration` branch from `dev`, after updating `dev` from `upstream/dev` (and push `dev` to `origin/dev`). This is needed because there are large numbers of changes to branches, and rebuilding the integration branch will help to ensure that it is up to date with the latest changes. + +Please prompt for which branches to include, and always include `personal/config`, as it is needed for the integration branch to work properly. If there are any other branches that need to be included, please prompt for those as well. + +We should also ensure that any necessary tests are run after rebuilding the integration branch, to verify that everything is working correctly. Please let me know if you have any questions or need any assistance with this process. \ No newline at end of file diff --git a/.github/prompts/review open PRs against `upstream`.prompt.md b/.github/prompts/review open PRs against `upstream`.prompt.md new file mode 100644 index 000000000..7c85531be --- /dev/null +++ b/.github/prompts/review open PRs against `upstream`.prompt.md @@ -0,0 +1,10 @@ +--- +name: review open PRs against `upstream` +description: When asked to review open PRs against `upstream` +--- + + + +Please look for all of my open/pending PRs against `upstream`, and review them for any issues, such as merge conflicts, failing checks, comments, or outdated code. If you find any problems, please provide feedback on how to resolve them. And/or implement the necessary changes to get the PRs ready for merging. + +Once done, please provide a summary of the status of each PR, including any actions taken or needed to get them merged. \ No newline at end of file From cb243020b391fa96f84c4a592a918b3d079d2e52 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:17:56 -0400 Subject: [PATCH 151/253] chore: fix lint and format issues Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/useUserPresence.ts | 12 +++++++++--- src/app/pages/client/sidebar/DirectDMsList.tsx | 6 +----- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index 6cabf4546..c8e2a480f 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -35,7 +35,14 @@ export function clearPresenceCache(): void { } function fetchPresenceOnce( - mx: { getPresence: (userId: string) => Promise<{ presence: string; status_msg?: string; currently_active?: boolean; last_active_ago?: number | null }> }, + mx: { + getPresence: (userId: string) => Promise<{ + presence: string; + status_msg?: string; + currently_active?: boolean; + last_active_ago?: number | null; + }>; + }, userId: string ): Promise { const cached = presenceCache.get(userId); @@ -53,8 +60,7 @@ function fetchPresenceOnce( presence: resp.presence as Presence, status: resp.status_msg, active: resp.currently_active ?? false, - lastActiveTs: - resp.last_active_ago != null ? Date.now() - resp.last_active_ago : undefined, + lastActiveTs: resp.last_active_ago != null ? Date.now() - resp.last_active_ago : undefined, }; presenceCache.set(userId, { data, fetchedAt: Date.now() }); return data; diff --git a/src/app/pages/client/sidebar/DirectDMsList.tsx b/src/app/pages/client/sidebar/DirectDMsList.tsx index 4d142985d..72d10775a 100644 --- a/src/app/pages/client/sidebar/DirectDMsList.tsx +++ b/src/app/pages/client/sidebar/DirectDMsList.tsx @@ -62,11 +62,7 @@ function DMItem({ room, selected }: DMItemProps) { const groupDMOnline = isGroupDM && [member0Presence, member1Presence, member2Presence].some( - (p) => - p && - p.lastActiveTs != null && - p.lastActiveTs !== 0 && - p.presence === Presence.Online + (p) => p && p.lastActiveTs != null && p.lastActiveTs !== 0 && p.presence === Presence.Online ); let presenceBadge: ReactNode; From 3149a3797c6277be4dbad392f864cfbff553118a Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:18:01 -0400 Subject: [PATCH 152/253] chore: fix lint and format issues Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/useRoomLastMessage.test.tsx | 3 +-- src/app/hooks/useRoomLastMessage.ts | 4 ++-- src/client/slidingSync.ts | 6 +++++- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/app/hooks/useRoomLastMessage.test.tsx b/src/app/hooks/useRoomLastMessage.test.tsx index 5f685f342..e58357834 100644 --- a/src/app/hooks/useRoomLastMessage.test.tsx +++ b/src/app/hooks/useRoomLastMessage.test.tsx @@ -150,8 +150,7 @@ describe('eventToPreviewText', () => { // -------- getLastMessageText -------- describe('getLastMessageText', () => { - const makeMx = (userId = '@alice:test') => - ({ getUserId: () => userId }) as never; + const makeMx = (userId = '@alice:test') => ({ getUserId: () => userId }) as never; const makeRoom = (events: ReturnType[], members?: Record) => ({ diff --git a/src/app/hooks/useRoomLastMessage.ts b/src/app/hooks/useRoomLastMessage.ts index c8f27e2a3..e0d6d99f4 100644 --- a/src/app/hooks/useRoomLastMessage.ts +++ b/src/app/hooks/useRoomLastMessage.ts @@ -16,9 +16,9 @@ import { MessageEvent } from '$types/matrix/room'; export function stripReplyFallback(body: string): string { const lines = body.split('\n'); let i = 0; - while (i < lines.length && lines[i].startsWith('> ')) i++; + while (i < lines.length && lines[i].startsWith('> ')) i += 1; // Skip the blank separator line that follows the fallback block. - if (i > 0 && i < lines.length && lines[i] === '') i++; + if (i > 0 && i < lines.length && lines[i] === '') i += 1; return lines.slice(i).join('\n'); } diff --git a/src/client/slidingSync.ts b/src/client/slidingSync.ts index 802157123..91c90c2a2 100644 --- a/src/client/slidingSync.ts +++ b/src/client/slidingSync.ts @@ -147,7 +147,11 @@ const buildUnencryptedSubscription = (timelineLimit: number): MSC3575RoomSubscri ], }); -const buildLists = (pageSize: number, includeInviteList: boolean, listTimelineLimit: number): Map => { +const buildLists = ( + pageSize: number, + includeInviteList: boolean, + listTimelineLimit: number +): Map => { const lists = new Map(); const listRequiredState = buildListRequiredState(); From 56de896f99de7c8e0c8f67eab8efaaa8ae47ce8c Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:18:03 -0400 Subject: [PATCH 153/253] chore: fix lint and format issues Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/settings/developer-tools/DevelopTools.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index 24445bdcc..470ca95c5 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -59,7 +59,7 @@ export function DeveloperTools({ requestBack, requestClose }: DeveloperToolsProp // Proactively start session creation + key sharing with all devices // (including bridge bots). fire-and-forget per room, but surface failures. encryptedRooms.forEach((room) => { - void Promise.resolve() + Promise.resolve() .then(() => crypto.prepareToEncrypt(room)) .catch((error) => { console.error('Failed to prepare room encryption', room.roomId, error); From ca65cef132629089189d4c4078df6f7e1ef76b3d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:22:49 -0400 Subject: [PATCH 154/253] docs(changeset): clarify Megolm session rotation description Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .changeset/devtool-rotate-sessions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/devtool-rotate-sessions.md b/.changeset/devtool-rotate-sessions.md index cae1bda0c..686fb292f 100644 --- a/.changeset/devtool-rotate-sessions.md +++ b/.changeset/devtool-rotate-sessions.md @@ -2,4 +2,4 @@ default: patch --- -Add rotate-encryption-sessions developer tool to force Megolm session rotation for testing +Add developer tool to force-rotate outbound Megolm encryption sessions per room, useful for testing key rotation and bridge session recovery From cbd653e136499561e92926156106ceef71c27d20 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:22:52 -0400 Subject: [PATCH 155/253] docs(changeset): accurately describe unhandled-rejection suppression behaviour Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .changeset/async-callback-rejections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/async-callback-rejections.md b/.changeset/async-callback-rejections.md index 89297b90e..a8e8af829 100644 --- a/.changeset/async-callback-rejections.md +++ b/.changeset/async-callback-rejections.md @@ -2,4 +2,4 @@ default: patch --- -Fix unhandled promise rejections in useAsyncCallback by propagating errors to the error boundary +Suppress "Uncaught (in promise)" console noise for fire-and-forget `useAsyncCallback` call sites; errors are still surfaced to callers that await the returned promise and captured in `AsyncState` From 8e07aec34acf670da4cc32165767255bf6534fe7 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:25:16 -0400 Subject: [PATCH 156/253] fix(timeline): arm scroll guard in ResizeObserver and scrollToBottom - Add programmaticScrollToBottomRef.current = Date.now() before the ResizeObserver viewport-shrink scrollTo so VList height-correction onScroll events can't flip atBottomState to false after keyboard open - Add setAtBottom(true) pre-emption inside scrollToBottom callback, preventing a one-frame flash of the Jump to Latest button and keeping atBottom=true when new-message auto-scroll fires before VList settles - Remove dead mountScrollWindowRef (declared + set, never read) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 9fa4a9198..53ade69e7 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -273,7 +273,6 @@ export function RoomTimeline({ const [topSpacerHeight, setTopSpacerHeight] = useState(0); const topSpacerHeightRef = useRef(0); - const mountScrollWindowRef = useRef(Date.now() + 3000); const hasInitialScrolledRef = useRef(false); // Stored in a ref so eventsLength fluctuations (e.g. onLifecycle timeline reset // firing within the window) cannot cancel it via useLayoutEffect cleanup. @@ -302,7 +301,6 @@ export function RoomTimeline({ scrollCacheForRoomRef.current = roomScrollCache.load(mxUserId, room.roomId); hasInitialScrolledRef.current = false; - mountScrollWindowRef.current = Date.now() + 3000; currentRoomIdRef.current = room.roomId; pendingReadyRef.current = false; programmaticScrollToBottomRef.current = 0; @@ -320,11 +318,14 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; + // Pre-empt atBottom so the "Jump to Latest" button doesn't flash between + // the scroll call and VList confirming the new position. + setAtBottom(true); // Guard against VList's intermediate height-correction scroll events that // would otherwise call setAtBottom(false) before the scroll settles. programmaticScrollToBottomRef.current = Date.now(); vListRef.current.scrollTo(vListRef.current.scrollSize); - }, []); + }, [setAtBottom]); const timelineSync = useTimelineSync({ room, @@ -587,6 +588,9 @@ export function RoomTimeline({ const shrank = newHeight < prev; if (shrank && atBottom) { + // Arm the guard before scrolling so VList's intermediate height-correction + // events (fired during item re-measurement) don't flip atBottom to false. + programmaticScrollToBottomRef.current = Date.now(); vListRef.current?.scrollTo(vListRef.current.scrollSize); } prevViewportHeightRef.current = newHeight; From 8fee117edbf2e36f3eea394065c84df68ed18be4 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:26:30 -0400 Subject: [PATCH 157/253] docs: clarify that listTimelineLimit scales with message preview setting Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/client/slidingSync.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/slidingSync.ts b/src/client/slidingSync.ts index 91c90c2a2..dd4a880b6 100644 --- a/src/client/slidingSync.ts +++ b/src/client/slidingSync.ts @@ -52,7 +52,7 @@ const LIST_SORT_ORDER = ['by_recency', 'by_name']; // Encrypted rooms get [*,*] required_state; unencrypted rooms also request lazy members. const UNENCRYPTED_SUBSCRIPTION_KEY = 'unencrypted'; // Timeline limit for the active-room subscription (full history load). -// List entries use a small timeline limit (default 1) for lightweight previews. +// List entries use a configurable timeline limit (default 1; raised to 5 when message previews are enabled). const ACTIVE_ROOM_TIMELINE_LIMIT = 50; export type PartialSlidingSyncRequest = { From c9763ab22d5b6cd8fd1163ae3d7aa01d4eb2a8a7 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:32:25 -0400 Subject: [PATCH 158/253] fix(timeline): set programmaticScrollToBottomRef before all bottom-pinning scrolls Resolves flash of the 'Jump to Latest' button during VList re-measurement when (a) the top-spacer collapses after backward-pagination fills the view and (b) backward pagination completes while the user was already at the bottom. Also prevents the recovery effect from calling scrollToBottom() and overriding a successful scroll-to-event by gating on focusItem. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index fb7fa890c..66da00672 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -365,6 +365,7 @@ export function RoomTimeline({ setTopSpacerHeight(newH); if (prev > 0 && newH === 0 && processedEventsRef.current.length > 0) { requestAnimationFrame(() => { + programmaticScrollToBottomRef.current = Date.now(); vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); }); } @@ -388,6 +389,7 @@ export function RoomTimeline({ } else if (prev === 'loading' && timelineSync.backwardStatus === 'idle') { setShift(false); if (wasAtBottomBeforePaginationRef.current) { + programmaticScrollToBottomRef.current = Date.now(); vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); } } @@ -420,14 +422,23 @@ export function RoomTimeline({ // Recovery: if event timeline load failed and fell back to live timeline, // reveal the timeline so the user doesn't see a blank page. + // Skip when focusItem is set β€” that means loadEventTimeline succeeded and + // the success effects (415–419) already handle setIsReady. useEffect(() => { - if (eventId && !isReady && timelineSync.liveTimelineLinked && timelineSync.eventsLength > 0) { + if ( + eventId && + !isReady && + !timelineSync.focusItem && + timelineSync.liveTimelineLinked && + timelineSync.eventsLength > 0 + ) { scrollToBottom(); setIsReady(true); } }, [ eventId, isReady, + timelineSync.focusItem, timelineSync.liveTimelineLinked, timelineSync.eventsLength, scrollToBottom, From 93b7fb8bfc6df5f49471352f6c7512dfd5947929 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 23:33:35 -0400 Subject: [PATCH 159/253] fix(timeline): remove scroll settling guard, match upstream scroll approach Remove SCROLL_SETTLE_MS and programmaticScrollToBottomRef entirely. Use upstream's direct setAtBottom(isNowAtBottom) in handleVListScroll instead of suppressing intermediate events with a settling window. Simplify scrollToBottom to just scrollTo(scrollSize) without pre-emption. Simplify cache restore to use scrollTo(scrollSize) for atBottom rooms. Remove setAtBottom(false) from eventId effect (let scroll determine state). Add mxUserId to hook dependency arrays where used in roomScrollCache calls. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 81 +++----------------------- 1 file changed, 8 insertions(+), 73 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 53ade69e7..a18f1cb9c 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -109,12 +109,6 @@ interface TimelineItemProps { } /* eslint-enable react/no-unused-prop-types */ -// How long (ms) to suppress spurious "not at bottom" events after a -// programmatic scroll-to-bottom. VList can fire several intermediate onScroll -// events while it re-measures item heights after a scrollToIndex(); the window -// lets all of them pass without flashing the "Jump to Latest" button. -const SCROLL_SETTLE_MS = 200; - // Declared outside memo() so the callback receives a reference, not an inline // function expression (satisfies prefer-arrow-callback). function TimelineItemInner({ data, renderRef }: TimelineItemProps) { @@ -282,15 +276,6 @@ export function RoomTimeline({ // A recovery useLayoutEffect watches for processedEvents becoming non-empty // and performs the final scroll + setIsReady when this flag is set. const pendingReadyRef = useRef(false); - // Set to a timestamp (ms epoch) before each programmatic scroll-to-bottom so - // intermediate onScroll events from virtua's height-correction pass cannot - // drive atBottomState to false (flashing the "Jump to Latest" button). - // Using a timestamp rather than a boolean means the window expires naturally - // after SCROLL_SETTLE_MS without needing to clear it on `isNowAtBottom=true`. - // That prevents the second wave of false-negative events (which VList fires - // after re-measuring item heights) from slipping through after the first - // `isNowAtBottom=true` confirms the position. - const programmaticScrollToBottomRef = useRef(0); const currentRoomIdRef = useRef(room.roomId); const [isReady, setIsReady] = useState(false); @@ -303,7 +288,6 @@ export function RoomTimeline({ hasInitialScrolledRef.current = false; currentRoomIdRef.current = room.roomId; pendingReadyRef.current = false; - programmaticScrollToBottomRef.current = 0; if (initialScrollTimerRef.current !== undefined) { clearTimeout(initialScrollTimerRef.current); initialScrollTimerRef.current = undefined; @@ -318,14 +302,8 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; - // Pre-empt atBottom so the "Jump to Latest" button doesn't flash between - // the scroll call and VList confirming the new position. - setAtBottom(true); - // Guard against VList's intermediate height-correction scroll events that - // would otherwise call setAtBottom(false) before the scroll settles. - programmaticScrollToBottomRef.current = Date.now(); vListRef.current.scrollTo(vListRef.current.scrollSize); - }, [setAtBottom]); + }, []); const timelineSync = useTimelineSync({ room, @@ -384,11 +362,7 @@ export function RoomTimeline({ // Revisiting a room with a cached scroll state β€” restore position // immediately and skip the 80 ms stabilisation timer entirely. if (savedCache.atBottom) { - programmaticScrollToBottomRef.current = Date.now(); - vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); - // scrollToIndex is async; pre-empt the button so it doesn't flash for - // one render cycle before VList's onScroll confirms the position. - setAtBottom(true); + vListRef.current.scrollTo(vListRef.current.scrollSize); } else { vListRef.current.scrollTo(savedCache.scrollOffset); } @@ -403,7 +377,6 @@ export function RoomTimeline({ initialScrollTimerRef.current = setTimeout(() => { initialScrollTimerRef.current = undefined; if (processedEventsRef.current.length > 0) { - programmaticScrollToBottomRef.current = Date.now(); vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end', }); @@ -417,13 +390,6 @@ export function RoomTimeline({ atBottom: true, }); } - // Only mark ready once we've successfully scrolled. If processedEvents - // was empty when the timer fired (e.g. the onLifecycle reset cleared the - // timeline within the 80 ms window), defer setIsReady until the recovery - // effect below fires once events repopulate. - // scrollToIndex is async; pre-empt atBottom so the "Jump to Latest" - // button doesn't flash for one render cycle before onScroll confirms. - setAtBottom(true); setIsReady(true); } else { pendingReadyRef.current = true; @@ -433,13 +399,7 @@ export function RoomTimeline({ } // No cleanup return β€” the timer must survive eventsLength fluctuations. // It is cancelled on unmount by the dedicated effect below. - }, [ - timelineSync.eventsLength, - timelineSync.liveTimelineLinked, - eventId, - room.roomId, - setAtBottom, - ]); + }, [timelineSync.eventsLength, timelineSync.liveTimelineLinked, eventId, room.roomId, mxUserId]); // Cancel the initial-scroll timer on unmount (the useLayoutEffect above // intentionally does not cancel it when deps change). @@ -527,16 +487,9 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; - // Reset atBottom and the programmatic-scroll guard so that: - // 1. The "Jump to Latest" button appears immediately (we are no longer at - // the live bottom β€” we are viewing a historical slice). - // 2. The guard doesn't suppress the `isNowAtBottom=false` event that VList - // fires when it scrolls to the target eventId. - setAtBottom(false); - programmaticScrollToBottomRef.current = 0; setIsReady(false); timelineSyncRef.current.loadEventTimeline(eventId); - }, [eventId, room.roomId, setAtBottom]); + }, [eventId, room.roomId]); useEffect(() => { if (eventId) return; @@ -588,9 +541,6 @@ export function RoomTimeline({ const shrank = newHeight < prev; if (shrank && atBottom) { - // Arm the guard before scrolling so VList's intermediate height-correction - // events (fired during item re-measurement) don't flip atBottom to false. - programmaticScrollToBottomRef.current = Date.now(); vListRef.current?.scrollTo(vListRef.current.scrollSize); } prevViewportHeightRef.current = newHeight; @@ -807,16 +757,8 @@ export function RoomTimeline({ const distanceFromBottom = v.scrollSize - offset - v.viewportSize; const isNowAtBottom = distanceFromBottom < 100; - const isSettling = Date.now() - programmaticScrollToBottomRef.current < SCROLL_SETTLE_MS; if (isNowAtBottom !== atBottomRef.current) { - // Suppress intermediate "not at bottom" events that fire while VList - // re-measures item heights after a programmatic scrollToIndex. The - // timestamp window expires naturally β€” no need to clear it on - // `isNowAtBottom=true`, which prevents a second wave of false-negatives - // (fired after height re-measurement completes) from slipping through. - if (isNowAtBottom || !isSettling) { - setAtBottom(isNowAtBottom); - } + setAtBottom(isNowAtBottom); } // Keep the scroll cache fresh so the next visit to this room can restore @@ -844,7 +786,7 @@ export function RoomTimeline({ timelineSyncRef.current.handleTimelinePagination(false); } }, - [setAtBottom, room.roomId, eventId] + [setAtBottom, room.roomId, eventId, mxUserId] ); const showLoadingPlaceholders = @@ -957,12 +899,8 @@ export function RoomTimeline({ if (!pendingReadyRef.current) return; if (processedEvents.length === 0) return; pendingReadyRef.current = false; - programmaticScrollToBottomRef.current = Date.now(); vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); - // doesn't flash for one render cycle before onScroll confirms the position. - setAtBottom(true); - // The 80 ms timer's cache-save was skipped because processedEvents was empty - // when it fired. Save now so the next visit skips the timer. + // Save now so the next visit skips the timer. const v = vListRef.current; if (v) { roomScrollCache.save(mxUserId, room.roomId, { @@ -971,11 +909,8 @@ export function RoomTimeline({ atBottom: true, }); } - // scrollToIndex is async; pre-empt atBottom so the "Jump to Latest" button - // doesn't flash for one render cycle before onScroll confirms the position. - setAtBottom(true); setIsReady(true); - }, [processedEvents.length, setAtBottom, room.roomId]); + }, [processedEvents.length, room.roomId, mxUserId]); useEffect(() => { if (!onEditLastMessageRef) return; From eefceb9d1509ca02a0007b8425dba1191a623538 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 17:52:48 -0400 Subject: [PATCH 160/253] fix(nav): check DM membership before space parents in useRoomNavigate Mirrors the fix already applied in useNotificationJumper: when a room belongs to both the direct-message list and a space, prefer the /direct route over the space route. Previously useRoomNavigate checked orphan space parents first, which caused bookmark jumps and room-nav clicks on DMs-in-spaces to open the room via the space path instead of the direct path. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/useRoomNavigate.ts | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/app/hooks/useRoomNavigate.ts b/src/app/hooks/useRoomNavigate.ts index 51555125c..c2918d5ca 100644 --- a/src/app/hooks/useRoomNavigate.ts +++ b/src/app/hooks/useRoomNavigate.ts @@ -37,7 +37,20 @@ export const useRoomNavigate = () => { const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId); const openSpaceTimeline = developerTools && spaceSelectedId === roomId; - const orphanParents = openSpaceTimeline ? [roomId] : getOrphanParents(roomToParents, roomId); + // Developer-mode: view the space's own timeline (must be checked first). + if (openSpaceTimeline) { + navigate(getSpaceRoomPath(roomIdOrAlias, roomId, eventId), opts); + return; + } + + // DMs take priority over space membership so direct chats always open + // via the direct route, even when the room also belongs to a space. + if (mDirects.has(roomId)) { + navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts); + return; + } + + const orphanParents = getOrphanParents(roomToParents, roomId); if (orphanParents.length > 0) { let parentSpace: string; if (spaceSelectedId && orphanParents.includes(spaceSelectedId)) { @@ -48,15 +61,7 @@ export const useRoomNavigate = () => { const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, parentSpace); - navigate( - getSpaceRoomPath(pSpaceIdOrAlias, openSpaceTimeline ? roomId : roomIdOrAlias, eventId), - opts - ); - return; - } - - if (mDirects.has(roomId)) { - navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts); + navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias, eventId), opts); return; } From 809a9bbae90e3910d82aade3ae76b15f5eece4c8 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 23:37:30 -0400 Subject: [PATCH 161/253] fix(preview): close decryption race in useRoomLastMessage Subscribe to Decrypted events before reading current state so events that decrypt between the initial render and listener mount are not missed. Explicitly request decryption for the last encrypted event on mount so rooms not yet opened (e.g. sliding-sync previews) resolve their preview text without requiring the user to visit the room. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/useRoomLastMessage.ts | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/app/hooks/useRoomLastMessage.ts b/src/app/hooks/useRoomLastMessage.ts index e0d6d99f4..a27c86d5a 100644 --- a/src/app/hooks/useRoomLastMessage.ts +++ b/src/app/hooks/useRoomLastMessage.ts @@ -94,18 +94,34 @@ export function useRoomLastMessage( setText(undefined); return undefined; } - setText(getLastMessageText(room, mx)); const update = () => setText(getLastMessageText(room, mx)); + + // Subscribe before reading to close the race window: any decryption that + // completes after this point will trigger an update via the listener. room.on(RoomEventEnum.Timeline, update); room.on(RoomEventEnum.LocalEchoUpdated, update); - // Re-check when any event in this room is decrypted (encrypted β†’ plaintext). const onDecrypted = (ev: MatrixEvent) => { if (ev.getRoomId() === room.roomId) update(); }; mx.on(MatrixEventEvent.Decrypted, onDecrypted); + // Read current state after subscribing to catch any events that decrypted + // between the initial render and the listener mount. + update(); + + // If the last displayable event is still encrypted, explicitly request + // decryption. Sliding sync may not auto-decrypt events in rooms that + // haven't been opened yet; this ensures the preview resolves on mount. + const events = room.getLiveTimeline().getEvents(); + const lastDisplayable = [...events] + .reverse() + .find((ev) => eventToPreviewText(ev) !== undefined); + if (lastDisplayable && lastDisplayable.isEncrypted()) { + mx.decryptEventIfNeeded(lastDisplayable).catch(() => undefined); + } + return () => { room.off(RoomEventEnum.Timeline, update); room.off(RoomEventEnum.LocalEchoUpdated, update); From 6dcb99e9f337a8b81b3ce57551047768a0a1abde Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 00:39:50 -0400 Subject: [PATCH 162/253] fix(timeline): add hysteresis to atBottom threshold Use a larger threshold (300px) to lose at-bottom state vs 100px to regain it, preventing image/URL-preview layout shifts from flashing the jump button. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index a18f1cb9c..becf032a8 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -756,7 +756,12 @@ export function RoomTimeline({ if (!v) return; const distanceFromBottom = v.scrollSize - offset - v.viewportSize; - const isNowAtBottom = distanceFromBottom < 100; + // Hysteresis: require scrolling further away to lose "at bottom" than to + // regain it, preventing brief image/preview layout shifts from flashing + // the "Jump to Latest" button. + const isNowAtBottom = atBottomRef.current + ? distanceFromBottom < 300 + : distanceFromBottom < 100; if (isNowAtBottom !== atBottomRef.current) { setAtBottom(isNowAtBottom); } From dc218731011d18afb9792346e1984349061af1c9 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 00:42:28 -0400 Subject: [PATCH 163/253] fix(preview): poll/location preview, mxid localpart fallback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add poll start event preview (πŸ“Š + question text) and m.location preview. When room.getMember() returns null (common with sliding sync list subscriptions), fall back to localpart extracted from mxid instead of showing the raw @user:server string. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/useRoomLastMessage.test.tsx | 27 +++++++++++++++++++++-- src/app/hooks/useRoomLastMessage.ts | 24 +++++++++++++++++++- 2 files changed, 48 insertions(+), 3 deletions(-) diff --git a/src/app/hooks/useRoomLastMessage.test.tsx b/src/app/hooks/useRoomLastMessage.test.tsx index e58357834..a049a8e3f 100644 --- a/src/app/hooks/useRoomLastMessage.test.tsx +++ b/src/app/hooks/useRoomLastMessage.test.tsx @@ -16,6 +16,7 @@ function makeEvent(overrides: { roomId?: string; redacted?: boolean; effectiveType?: string; + encrypted?: boolean; }) { const type = overrides.type ?? 'm.room.message'; const content = overrides.content ?? { msgtype: 'm.text', body: 'hello' }; @@ -25,6 +26,7 @@ function makeEvent(overrides: { getSender: () => overrides.sender ?? '@alice:test', getRoomId: () => overrides.roomId ?? '!room:test', isRedacted: () => overrides.redacted ?? false, + isEncrypted: () => overrides.encrypted ?? false, getEffectiveEvent: () => ({ type: overrides.effectiveType ?? type, content }), } as never; } @@ -141,6 +143,27 @@ describe('eventToPreviewText', () => { expect(eventToPreviewText(ev)).toBe('real message'); }); + it('returns poll text for MSC3381 poll start events', () => { + const ev = makeEvent({ + type: 'org.matrix.msc3381.poll.start', + content: { 'org.matrix.msc3381.poll.start': { question: { body: 'Lunch?' } } }, + }); + expect(eventToPreviewText(ev)).toBe('πŸ“Š Lunch?'); + }); + + it('returns poll text for stable poll start events', () => { + const ev = makeEvent({ + type: 'm.poll.start', + content: { 'm.poll.start': { question: { body: 'Dinner?' } } }, + }); + expect(eventToPreviewText(ev)).toBe('πŸ“Š Dinner?'); + }); + + it('returns location icon for m.location message', () => { + const ev = makeEvent({ content: { msgtype: 'm.location', body: 'geo:0,0' } }); + expect(eventToPreviewText(ev)).toBe('πŸ“ Location'); + }); + it('returns undefined for unknown event types', () => { const ev = makeEvent({ type: 'm.room.power_levels', content: {} }); expect(eventToPreviewText(ev)).toBeUndefined(); @@ -172,10 +195,10 @@ describe('getLastMessageText', () => { expect(getLastMessageText(room, makeMx())).toBe('Bob: hey'); }); - it('falls back to userId when no display name is available', () => { + it('falls back to localpart when no display name is available', () => { const ev = makeEvent({ sender: '@bob:test', content: { msgtype: 'm.text', body: 'hey' } }); const room = makeRoom([ev]); - expect(getLastMessageText(room, makeMx())).toBe('@bob:test: hey'); + expect(getLastMessageText(room, makeMx())).toBe('bob: hey'); }); it('skips reactions and picks the last real message', () => { diff --git a/src/app/hooks/useRoomLastMessage.ts b/src/app/hooks/useRoomLastMessage.ts index a27c86d5a..04dc4fd9b 100644 --- a/src/app/hooks/useRoomLastMessage.ts +++ b/src/app/hooks/useRoomLastMessage.ts @@ -48,15 +48,36 @@ export function eventToPreviewText(ev: MatrixEvent): string | undefined { if (msgtype === MsgType.Video) return 'πŸ“Ή Video'; if (msgtype === MsgType.Audio) return '🎡 Audio'; if (msgtype === MsgType.File) return 'πŸ“Ž File'; + if (msgtype === 'm.location') return 'πŸ“ Location'; } if (type === MessageEvent.Sticker) { return `πŸŽ‰ ${content.body ?? 'Sticker'}`; } + // Polls β€” show the question text when available. + if (type === 'org.matrix.msc3381.poll.start' || type === 'm.poll.start') { + const pollBody = + content?.['org.matrix.msc3381.poll.start']?.question?.body ?? + content?.['m.poll.start']?.question?.body; + return `πŸ“Š ${pollBody ?? 'Poll'}`; + } + return undefined; } +/** + * Extract a human-readable name from a Matrix user ID (@localpart:server). + * Falls back to the raw id if the format is unexpected. + */ +function displayNameFromMxid(mxid: string): string { + if (mxid.startsWith('@')) { + const localpart = mxid.slice(1).split(':')[0]; + if (localpart) return localpart; + } + return mxid; +} + export function getLastMessageText(room: Room, mx: MatrixClient): string | undefined { const events = room.getLiveTimeline().getEvents(); const match = [...events].reverse().find((ev) => eventToPreviewText(ev) !== undefined); @@ -69,7 +90,8 @@ export function getLastMessageText(room: Room, mx: MatrixClient): string | undef if (senderId === mx.getUserId()) { prefix = 'You'; } else { - prefix = room.getMember(senderId ?? '')?.name ?? senderId ?? 'Unknown'; + prefix = + room.getMember(senderId ?? '')?.name ?? displayNameFromMxid(senderId ?? 'Unknown'); } return `${prefix}: ${text}`; } From 8c3c0e7585bc538caf8ddbe99cc0d2a5bdb82d9f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 08:58:45 -0400 Subject: [PATCH 164/253] fix(presence): retry setPresence on failure for app resume reliability When the app resumes from background, the HTTP client may not have reconnected yet, causing setPresence to fail silently. Retry up to 3 times with back-off (2s, 4s, 6s) so presence recovers from idle. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/pages/client/ClientNonUIFeatures.tsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 7c71db23a..c50f411a4 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -869,12 +869,24 @@ function PresenceFeature() { // - MSC4186 servers that have no presence extension see this immediately. // - When 'offline' (Invisible mode), we appear offline to others but still receive // their presence events because the extension is still enabled above. - mx.setPresence({ + const presencePayload = { presence: effectiveState, ...(sendPresence && effectiveMode === 'dnd' ? { status_msg: 'dnd' } : {}), - }).catch(() => { - // Server doesn't support presence β€” ignore. - }); + }; + let retryTimer: ReturnType | undefined; + const trySetPresence = (attempt = 0) => { + mx.setPresence(presencePayload).catch(() => { + // Retry up to 3 times with back-off: the HTTP client may not have + // reconnected yet after the app resumes from background. + if (attempt < 3) { + retryTimer = setTimeout(() => trySetPresence(attempt + 1), 2000 * (attempt + 1)); + } + }); + }; + trySetPresence(); + return () => { + if (retryTimer !== undefined) clearTimeout(retryTimer); + }; }, [mx, sendPresence, presenceMode, autoIdled]); return null; From 2727ac79a0419ce7bac12d61283b26b3097424e6 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 09:16:32 -0400 Subject: [PATCH 165/253] fix(timeline): suppress jump button flash during initial scroll settle Guard atBottom state changes in handleVListScroll behind isReadyRef so that intermediate VList scroll events fired during the initial scrollTo() in useLayoutEffect cannot flip atBottom to false before the component has fully rendered. This prevents the 'Jump to Present' button from flashing for a single frame when opening a room where the user is already at the bottom. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index becf032a8..1efca7e3b 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -279,6 +279,8 @@ export function RoomTimeline({ const currentRoomIdRef = useRef(room.roomId); const [isReady, setIsReady] = useState(false); + const isReadyRef = useRef(false); + isReadyRef.current = isReady; if (currentRoomIdRef.current !== room.roomId) { // Load incoming room's scroll cache (undefined for first-visit rooms). @@ -762,7 +764,10 @@ export function RoomTimeline({ const isNowAtBottom = atBottomRef.current ? distanceFromBottom < 300 : distanceFromBottom < 100; - if (isNowAtBottom !== atBottomRef.current) { + // Suppress atBottom flips during the initial scroll-to-bottom sequence: + // VList fires intermediate scroll events before the scroll settles, and + // if isReady is set in the same commit the button briefly flashes. + if (isNowAtBottom !== atBottomRef.current && isReadyRef.current) { setAtBottom(isNowAtBottom); } From be8c28aacbde82274ec2bfc6edcc68d646d883bd Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 09:44:13 -0400 Subject: [PATCH 166/253] fix(timeline): remove scroll hysteresis, match upstream 100px threshold MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The 300px/100px hysteresis created a dead zone: once atBottom was lost (e.g. video embed loading causing > 300px content shift), the user could never regain it unless distanceFromBottom dropped below 100px β€” which VList may not report even when the scrollbar appears at the bottom. Replace with upstream's flat 100px threshold. The isReadyRef guard still suppresses initial-load flashes from scroll settling. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 1efca7e3b..261335cb9 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -758,12 +758,7 @@ export function RoomTimeline({ if (!v) return; const distanceFromBottom = v.scrollSize - offset - v.viewportSize; - // Hysteresis: require scrolling further away to lose "at bottom" than to - // regain it, preventing brief image/preview layout shifts from flashing - // the "Jump to Latest" button. - const isNowAtBottom = atBottomRef.current - ? distanceFromBottom < 300 - : distanceFromBottom < 100; + const isNowAtBottom = distanceFromBottom < 100; // Suppress atBottom flips during the initial scroll-to-bottom sequence: // VList fires intermediate scroll events before the scroll settles, and // if isReady is set in the same commit the button briefly flashes. From 7bddc4f701a5468a34b1e4957a7f0af4c516615b Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 10:13:44 -0400 Subject: [PATCH 167/253] fix(timeline): chase bottom when content grows while user is pinned When images, embeds, or video thumbnails load after the initial render, VList's scrollSize increases while the scroll offset stays the same. This pushed distanceFromBottom above the 100px threshold, causing atBottom to flip to false and the Jump to Latest button to appear even though the user hadn't scrolled. Track prevScrollSizeRef and detect content growth: if atBottom is true and scrollSize increased but distanceFromBottom exceeds the threshold, auto-scroll to the new bottom instead of losing atBottom status. Also removes the temporary debug logging from the previous commit. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 261335cb9..50453738d 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -226,6 +226,7 @@ export function RoomTimeline({ hideReadsRef.current = hideReads; const prevViewportHeightRef = useRef(0); + const prevScrollSizeRef = useRef(0); const messageListRef = useRef(null); const mediaAuthentication = useMediaAuthentication(); @@ -759,6 +760,20 @@ export function RoomTimeline({ const distanceFromBottom = v.scrollSize - offset - v.viewportSize; const isNowAtBottom = distanceFromBottom < 100; + + // When the user is pinned to the bottom and content grows (images, embeds, + // video thumbnails loading), scrollSize increases while offset stays put, + // pushing distanceFromBottom above the threshold. Instead of flipping + // atBottom to false (which shows the "Jump to Latest" button), chase the + // bottom so the user stays pinned. + const contentGrew = v.scrollSize > prevScrollSizeRef.current; + prevScrollSizeRef.current = v.scrollSize; + + if (atBottomRef.current && !isNowAtBottom && contentGrew) { + v.scrollTo(v.scrollSize); + return; + } + // Suppress atBottom flips during the initial scroll-to-bottom sequence: // VList fires intermediate scroll events before the scroll settles, and // if isReady is set in the same commit the button briefly flashes. From 71138ecbdf56702c36370797334067c011253bab Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 11:47:46 -0400 Subject: [PATCH 168/253] Update personal config.json --- config.json | 87 ++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 59 insertions(+), 28 deletions(-) diff --git a/config.json b/config.json index 8f685bfd4..027ad7c15 100644 --- a/config.json +++ b/config.json @@ -1,31 +1,62 @@ { - "allowCustomHomeservers": true, - "defaultHomeserver": 0, - "elementCallUrl": "matrix.cloudhub.social", - "featuredCommunities": { - "openAsDefault": false, - "rooms": [], - "servers": [ - "matrixrooms.info", - "gitter.im", - "matrix.org" - ], - "spaces": [] - }, - "homeserverList": [ - "https://matrix.cloudhub.social" + "defaultHomeserver": 0, + "homeserverList": [ + "https://matrix.cloudhub.social", + "matrix.org", + "mozilla.org", + "unredacted.org", + "sable.moe", + "kendama.moe" + ], + "allowCustomHomeservers": true, + "elementCallUrl": "matrix.cloudhub.social", + "disableAccountSwitcher": false, + "hideUsernamePasswordFields": false, + "pushNotificationDetails": { + "pushNotifyUrl": "https://sygnal.cloudhub.social/_matrix/push/v1/notify", + "vapidPublicKey": "BEBdK6VUiqYxcOauFCM1ZB38llgiODAs6pR5EEcC7YBoUh2YvrULagwo5t-Ms0Is0lEmKDhpdUoMiy_i7ArI3oE", + "webPushAppID": "social.cloudhub.sable.web" + }, + + "settingsLinkBaseUrl": "https://app.sable.moe", + + "presenceAutoIdleTimeoutMs": 300000, + + "slidingSync": { + "enabled": true + }, + + "sessionSync": { + "phase1ForegroundResync": true, + "phase2VisibleHeartbeat": true, + "phase3AdaptiveBackoffJitter": true + }, + + "featuredCommunities": { + "openAsDefault": false, + "spaces": [ + "#sable:sable.moe", + "#community:matrix.org", + "#space:unredacted.org", + "#science-space:matrix.org", + "#libregaming-games:tchncs.de", + "#mathematics-on:matrix.org" ], - "pushNotificationDetails": { - "pushNotifyUrl": "https://sygnal.cloudhub.social/_matrix/push/v1/notify", - "vapidPublicKey": "BEBdK6VUiqYxcOauFCM1ZB38llgiODAs6pR5EEcC7YBoUh2YvrULagwo5t-Ms0Is0lEmKDhpdUoMiy_i7ArI3oE", - "webPushAppID": "social.cloudhub.sable.web" - }, - "sessionSync": { - "phase1ForegroundResync": true, - "phase2VisibleHeartbeat": true, - "phase3AdaptiveBackoffJitter": false - }, - "slidingSync": { - "enabled": "true" - } + "rooms": [ + "#announcements:sable.moe", + "#freesoftware:matrix.org", + "#pcapdroid:matrix.org", + "#gentoo:matrix.org", + "#PrivSec.dev:arcticfoxes.net", + "#disroot:aria-net.org" + ], + "servers": ["matrixrooms.info", "mozilla.org", "unredacted.org"] + }, + "hashRouter": { + "enabled": false, + "basename": "/" + }, + "features": { + "polls": true + } } From 29fa6eaa19382864ab246ec11caf4b463de5fbc3 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 16:20:04 -0400 Subject: [PATCH 169/253] fix(timeline): restore useLayoutEffect auto-scroll, fix new-message scroll, fix eventId drag-to-bottom, increase list timeline limit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - useTimelineSync: change auto-scroll recovery useEffect β†’ useLayoutEffect to prevent one-frame flash after timeline reset - useTimelineSync: remove premature scrollToBottom from useLiveTimelineRefresh (operated on pre-commit DOM with stale scrollSize) - useTimelineSync: remove scrollToBottom + eventsLengthRef suppression from useLiveEventArrive; let useLayoutEffect handle scroll after React commits - RoomTimeline: init atBottomState to false when eventId is set, and reset it in the eventId useEffect, so auto-scroll doesn't drag to bottom on bookmark nav - RoomTimeline: change instant scrollToBottom to use scrollToIndex instead of scrollTo(scrollSize) β€” works correctly regardless of VList measurement state - slidingSync: increase DEFAULT_LIST_TIMELINE_LIMIT 1β†’3 to reduce empty previews when recent events are reactions/edits/state Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 18 ++++++++++--- src/app/hooks/timeline/useTimelineSync.ts | 31 +++++++++++++---------- src/client/slidingSync.ts | 6 ++--- 3 files changed, 35 insertions(+), 20 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 50453738d..86f4b0c29 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -257,7 +257,7 @@ export function RoomTimeline({ const scrollCacheForRoomRef = useRef( roomScrollCache.load(mxUserId, room.roomId) ); - const [atBottomState, setAtBottomState] = useState(true); + const [atBottomState, setAtBottomState] = useState(!eventId); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { setAtBottomState(val); @@ -301,11 +301,18 @@ export function RoomTimeline({ const processedEventsRef = useRef([]); const timelineSyncRef = useRef(null as unknown as typeof timelineSync); - const scrollToBottom = useCallback(() => { + const scrollToBottom = useCallback((behavior?: 'instant' | 'smooth') => { if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; - vListRef.current.scrollTo(vListRef.current.scrollSize); + if (behavior === 'smooth') { + vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); + } else { + // scrollToIndex works reliably regardless of VList measurement state. + // The auto-scroll useLayoutEffect fires after React commits new items, + // so lastIndex is always valid when this is called. + vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); + } }, []); const timelineSync = useTimelineSync({ @@ -491,8 +498,11 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; setIsReady(false); + // Ensure auto-scroll to bottom doesn't fire while we're navigating to a + // specific event β€” atBottom will be updated correctly once the user scrolls. + setAtBottom(false); timelineSyncRef.current.loadEventTimeline(eventId); - }, [eventId, room.roomId]); + }, [eventId, room.roomId, setAtBottom]); useEffect(() => { if (eventId) return; diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index ca52b5442..d935262cd 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -1,4 +1,13 @@ -import { useState, useMemo, useCallback, useRef, useEffect, Dispatch, SetStateAction } from 'react'; +import { + useState, + useMemo, + useCallback, + useRef, + useEffect, + useLayoutEffect, + Dispatch, + SetStateAction, +} from 'react'; import to from 'await-to-js'; import * as Sentry from '@sentry/react'; import { @@ -476,9 +485,6 @@ export function useTimelineSync({ const lastScrolledAtEventsLengthRef = useRef(eventsLength); - const eventsLengthRef = useRef(eventsLength); - eventsLengthRef.current = eventsLength; - useLiveEventArrive( room, useCallback( @@ -500,9 +506,6 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } - scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); - lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; - setTimeline((ct) => ({ ...ct })); return; } @@ -512,7 +515,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } }, - [mx, room, isAtBottomRef, unreadInfo, scrollToBottom, setUnreadInfo, hideReadsRef] + [mx, room, isAtBottomRef, unreadInfo, setUnreadInfo, hideReadsRef] ) ); @@ -537,17 +540,19 @@ export function useTimelineSync({ const wasAtBottom = isAtBottomRef.current; resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - if (wasAtBottom) { - scrollToBottom('instant'); - } - }, [room, isAtBottomRef, scrollToBottom]) + // Scroll is handled by the useLayoutEffect auto-scroll recovery which + // fires after React commits the new timeline state β€” scrolling here + // would operate on the pre-commit DOM with a stale scrollSize. + }, [room, isAtBottomRef]) ); useRelationUpdate(room, triggerMutation); useThreadUpdate(room, triggerMutation); - useEffect(() => { + // useLayoutEffect so scroll fires before paint β€” prevents the one-frame flash + // where new VList content is briefly visible at the wrong position. + useLayoutEffect(() => { const resetAutoScrollPending = resetAutoScrollPendingRef.current; if (resetAutoScrollPending) resetAutoScrollPendingRef.current = false; diff --git a/src/client/slidingSync.ts b/src/client/slidingSync.ts index 43fdf39ea..5c147179c 100644 --- a/src/client/slidingSync.ts +++ b/src/client/slidingSync.ts @@ -34,9 +34,9 @@ export const LIST_SEARCH = 'search'; export const LIST_ROOM_SEARCH = 'room_search'; // Dynamic list key used for space-scoped room views. export const LIST_SPACE = 'space'; -// One event of timeline per list room is enough to compute unread counts; -// the full history is loaded when the user opens the room. -const LIST_TIMELINE_LIMIT = 1; +// Higher limit avoids empty previews when the most-recent events are +// reactions/edits/state that useRoomLatestRenderedEvent skips over. +const LIST_TIMELINE_LIMIT = 3; const DEFAULT_LIST_PAGE_SIZE = 250; const DEFAULT_POLL_TIMEOUT_MS = 20000; const DEFAULT_MAX_ROOMS = 5000; From 23dbfc699c3d212342bfb13e385f6585ef7f5d37 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 16:20:04 -0400 Subject: [PATCH 170/253] fix(timeline): restore useLayoutEffect auto-scroll, fix new-message scroll, fix eventId drag-to-bottom, increase list timeline limit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - useTimelineSync: change auto-scroll recovery useEffect β†’ useLayoutEffect to prevent one-frame flash after timeline reset - useTimelineSync: remove premature scrollToBottom from useLiveTimelineRefresh (operated on pre-commit DOM with stale scrollSize) - useTimelineSync: remove scrollToBottom + eventsLengthRef suppression from useLiveEventArrive; let useLayoutEffect handle scroll after React commits - RoomTimeline: init atBottomState to false when eventId is set, and reset it in the eventId useEffect, so auto-scroll doesn't drag to bottom on bookmark nav - RoomTimeline: change instant scrollToBottom to use scrollToIndex instead of scrollTo(scrollSize) β€” works correctly regardless of VList measurement state - slidingSync: increase DEFAULT_LIST_TIMELINE_LIMIT 1β†’3 to reduce empty previews when recent events are reactions/edits/state Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 26 +++++++++++++++++------ src/app/hooks/timeline/useTimelineSync.ts | 6 ++---- src/client/slidingSync.ts | 6 +++--- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 66da00672..96ef8d593 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -201,7 +201,14 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - const [atBottomState, setAtBottomState] = useState(true); + // Load any cached scroll state for this room on mount. A fresh RoomTimeline is + // mounted per room (via key={roomId} in RoomView) so this is the only place we + // need to read the cache β€” the render-phase room-change block below only fires + // in the (hypothetical) case where the room prop changes without a remount. + const scrollCacheForRoomRef = useRef( + roomScrollCache.load(mxUserId, room.roomId) + ); + const [atBottomState, setAtBottomState] = useState(!eventId); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { setAtBottomState(val); @@ -253,10 +260,14 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; - // Guard against VList's intermediate height-correction scroll events that - // would otherwise call setAtBottom(false) before the scroll settles. - programmaticScrollToBottomRef.current = Date.now(); - vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: behavior === 'smooth' }); + if (behavior === 'smooth') { + vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); + } else { + // scrollToIndex works reliably regardless of VList measurement state. + // The auto-scroll useLayoutEffect fires after React commits new items, + // so lastIndex is always valid when this is called. + vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); + } }, []); const timelineSync = useTimelineSync({ @@ -447,8 +458,11 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; setIsReady(false); + // Ensure auto-scroll to bottom doesn't fire while we're navigating to a + // specific event β€” atBottom will be updated correctly once the user scrolls. + setAtBottom(false); timelineSyncRef.current.loadEventTimeline(eventId); - }, [eventId, room.roomId]); + }, [eventId, room.roomId, setAtBottom]); useEffect(() => { if (eventId) return; diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index c8c48f548..948630887 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -550,10 +550,8 @@ export function useTimelineSync({ }, []) ); - // useLayoutEffect so the scroll position is corrected before the browser - // paints. Without this, a sliding-sync subscription upgrade (timeline_limit - // 1 β†’ 50) replaces the VList content and the user sees one frame at the - // wrong scroll position before the useEffect-based scroll fires. + // useLayoutEffect so scroll fires before paint β€” prevents the one-frame flash + // where new VList content is briefly visible at the wrong position. useLayoutEffect(() => { const resetAutoScrollPending = resetAutoScrollPendingRef.current; if (resetAutoScrollPending) resetAutoScrollPendingRef.current = false; diff --git a/src/client/slidingSync.ts b/src/client/slidingSync.ts index 43fdf39ea..5c147179c 100644 --- a/src/client/slidingSync.ts +++ b/src/client/slidingSync.ts @@ -34,9 +34,9 @@ export const LIST_SEARCH = 'search'; export const LIST_ROOM_SEARCH = 'room_search'; // Dynamic list key used for space-scoped room views. export const LIST_SPACE = 'space'; -// One event of timeline per list room is enough to compute unread counts; -// the full history is loaded when the user opens the room. -const LIST_TIMELINE_LIMIT = 1; +// Higher limit avoids empty previews when the most-recent events are +// reactions/edits/state that useRoomLatestRenderedEvent skips over. +const LIST_TIMELINE_LIMIT = 3; const DEFAULT_LIST_PAGE_SIZE = 250; const DEFAULT_POLL_TIMEOUT_MS = 20000; const DEFAULT_MAX_ROOMS = 5000; From ad50ff1b1d2d924b1c9531b935601d62ed8beb3f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 16:20:04 -0400 Subject: [PATCH 171/253] fix(timeline): restore useLayoutEffect auto-scroll, fix new-message scroll, fix eventId drag-to-bottom, increase list timeline limit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - useTimelineSync: change auto-scroll recovery useEffect β†’ useLayoutEffect to prevent one-frame flash after timeline reset - useTimelineSync: remove premature scrollToBottom from useLiveTimelineRefresh (operated on pre-commit DOM with stale scrollSize) - useTimelineSync: remove scrollToBottom + eventsLengthRef suppression from useLiveEventArrive; let useLayoutEffect handle scroll after React commits - RoomTimeline: init atBottomState to false when eventId is set, and reset it in the eventId useEffect, so auto-scroll doesn't drag to bottom on bookmark nav - RoomTimeline: change instant scrollToBottom to use scrollToIndex instead of scrollTo(scrollSize) β€” works correctly regardless of VList measurement state - slidingSync: increase DEFAULT_LIST_TIMELINE_LIMIT 1β†’3 to reduce empty previews when recent events are reactions/edits/state Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 23 ++++++++++++++--- src/app/hooks/timeline/useTimelineSync.ts | 31 +++++++++++++---------- src/client/slidingSync.ts | 6 ++--- 3 files changed, 41 insertions(+), 19 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index e703d0206..99590f27a 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -198,7 +198,14 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - const [atBottomState, setAtBottomState] = useState(true); + // Load any cached scroll state for this room on mount. A fresh RoomTimeline is + // mounted per room (via key={roomId} in RoomView) so this is the only place we + // need to read the cache β€” the render-phase room-change block below only fires + // in the (hypothetical) case where the room prop changes without a remount. + const scrollCacheForRoomRef = useRef( + roomScrollCache.load(mxUserId, room.roomId) + ); + const [atBottomState, setAtBottomState] = useState(!eventId); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { setAtBottomState(val); @@ -242,7 +249,14 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; - vListRef.current.scrollTo(vListRef.current.scrollSize); + if (behavior === 'smooth') { + vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); + } else { + // scrollToIndex works reliably regardless of VList measurement state. + // The auto-scroll useLayoutEffect fires after React commits new items, + // so lastIndex is always valid when this is called. + vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); + } }, []); const timelineSync = useTimelineSync({ @@ -394,8 +408,11 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; setIsReady(false); + // Ensure auto-scroll to bottom doesn't fire while we're navigating to a + // specific event β€” atBottom will be updated correctly once the user scrolls. + setAtBottom(false); timelineSyncRef.current.loadEventTimeline(eventId); - }, [eventId, room.roomId]); + }, [eventId, room.roomId, setAtBottom]); useEffect(() => { if (eventId) return; diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 51c85dda8..948630887 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -1,4 +1,13 @@ -import { useState, useMemo, useCallback, useRef, useEffect, Dispatch, SetStateAction } from 'react'; +import { + useState, + useMemo, + useCallback, + useRef, + useEffect, + useLayoutEffect, + Dispatch, + SetStateAction, +} from 'react'; import to from 'await-to-js'; import * as Sentry from '@sentry/react'; import { @@ -466,9 +475,6 @@ export function useTimelineSync({ const lastScrolledAtEventsLengthRef = useRef(eventsLength); - const eventsLengthRef = useRef(eventsLength); - eventsLengthRef.current = eventsLength; - useLiveEventArrive( room, useCallback( @@ -490,9 +496,6 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } - scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); - lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; - setTimeline((ct) => ({ ...ct })); return; } @@ -502,7 +505,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } }, - [mx, room, isAtBottomRef, unreadInfo, scrollToBottom, setUnreadInfo, hideReadsRef] + [mx, room, isAtBottomRef, unreadInfo, setUnreadInfo, hideReadsRef] ) ); @@ -527,10 +530,10 @@ export function useTimelineSync({ const wasAtBottom = isAtBottomRef.current; resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - if (wasAtBottom) { - scrollToBottom('instant'); - } - }, [room, isAtBottomRef, scrollToBottom]) + // Scroll is handled by the useLayoutEffect auto-scroll recovery which + // fires after React commits the new timeline state β€” scrolling here + // would operate on the pre-commit DOM with a stale scrollSize. + }, [room, isAtBottomRef]) ); useRelationUpdate( @@ -547,7 +550,9 @@ export function useTimelineSync({ }, []) ); - useEffect(() => { + // useLayoutEffect so scroll fires before paint β€” prevents the one-frame flash + // where new VList content is briefly visible at the wrong position. + useLayoutEffect(() => { const resetAutoScrollPending = resetAutoScrollPendingRef.current; if (resetAutoScrollPending) resetAutoScrollPendingRef.current = false; diff --git a/src/client/slidingSync.ts b/src/client/slidingSync.ts index 43fdf39ea..5c147179c 100644 --- a/src/client/slidingSync.ts +++ b/src/client/slidingSync.ts @@ -34,9 +34,9 @@ export const LIST_SEARCH = 'search'; export const LIST_ROOM_SEARCH = 'room_search'; // Dynamic list key used for space-scoped room views. export const LIST_SPACE = 'space'; -// One event of timeline per list room is enough to compute unread counts; -// the full history is loaded when the user opens the room. -const LIST_TIMELINE_LIMIT = 1; +// Higher limit avoids empty previews when the most-recent events are +// reactions/edits/state that useRoomLatestRenderedEvent skips over. +const LIST_TIMELINE_LIMIT = 3; const DEFAULT_LIST_PAGE_SIZE = 250; const DEFAULT_POLL_TIMEOUT_MS = 20000; const DEFAULT_MAX_ROOMS = 5000; From 83031b2371d4752be7393929c5f78ba23f6649e2 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 16:20:04 -0400 Subject: [PATCH 172/253] fix(timeline): restore useLayoutEffect auto-scroll, fix new-message scroll, fix eventId drag-to-bottom, increase list timeline limit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - useTimelineSync: change auto-scroll recovery useEffect β†’ useLayoutEffect to prevent one-frame flash after timeline reset - useTimelineSync: remove premature scrollToBottom from useLiveTimelineRefresh (operated on pre-commit DOM with stale scrollSize) - useTimelineSync: remove scrollToBottom + eventsLengthRef suppression from useLiveEventArrive; let useLayoutEffect handle scroll after React commits - RoomTimeline: init atBottomState to false when eventId is set, and reset it in the eventId useEffect, so auto-scroll doesn't drag to bottom on bookmark nav - RoomTimeline: change instant scrollToBottom to use scrollToIndex instead of scrollTo(scrollSize) β€” works correctly regardless of VList measurement state - slidingSync: increase DEFAULT_LIST_TIMELINE_LIMIT 1β†’3 to reduce empty previews when recent events are reactions/edits/state Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 23 ++++++++++++++--- src/app/hooks/timeline/useTimelineSync.ts | 31 +++++++++++++---------- src/client/slidingSync.ts | 6 ++--- 3 files changed, 41 insertions(+), 19 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index d026ec1fa..e48684ea8 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -201,7 +201,14 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - const [atBottomState, setAtBottomState] = useState(true); + // Load any cached scroll state for this room on mount. A fresh RoomTimeline is + // mounted per room (via key={roomId} in RoomView) so this is the only place we + // need to read the cache β€” the render-phase room-change block below only fires + // in the (hypothetical) case where the room prop changes without a remount. + const scrollCacheForRoomRef = useRef( + roomScrollCache.load(mxUserId, room.roomId) + ); + const [atBottomState, setAtBottomState] = useState(!eventId); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { setAtBottomState(val); @@ -245,7 +252,14 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; - vListRef.current.scrollTo(vListRef.current.scrollSize); + if (behavior === 'smooth') { + vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); + } else { + // scrollToIndex works reliably regardless of VList measurement state. + // The auto-scroll useLayoutEffect fires after React commits new items, + // so lastIndex is always valid when this is called. + vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); + } }, []); const timelineSync = useTimelineSync({ @@ -408,8 +422,11 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; setIsReady(false); + // Ensure auto-scroll to bottom doesn't fire while we're navigating to a + // specific event β€” atBottom will be updated correctly once the user scrolls. + setAtBottom(false); timelineSyncRef.current.loadEventTimeline(eventId); - }, [eventId, room.roomId]); + }, [eventId, room.roomId, setAtBottom]); useEffect(() => { if (eventId) return; diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 51c85dda8..948630887 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -1,4 +1,13 @@ -import { useState, useMemo, useCallback, useRef, useEffect, Dispatch, SetStateAction } from 'react'; +import { + useState, + useMemo, + useCallback, + useRef, + useEffect, + useLayoutEffect, + Dispatch, + SetStateAction, +} from 'react'; import to from 'await-to-js'; import * as Sentry from '@sentry/react'; import { @@ -466,9 +475,6 @@ export function useTimelineSync({ const lastScrolledAtEventsLengthRef = useRef(eventsLength); - const eventsLengthRef = useRef(eventsLength); - eventsLengthRef.current = eventsLength; - useLiveEventArrive( room, useCallback( @@ -490,9 +496,6 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } - scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); - lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; - setTimeline((ct) => ({ ...ct })); return; } @@ -502,7 +505,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } }, - [mx, room, isAtBottomRef, unreadInfo, scrollToBottom, setUnreadInfo, hideReadsRef] + [mx, room, isAtBottomRef, unreadInfo, setUnreadInfo, hideReadsRef] ) ); @@ -527,10 +530,10 @@ export function useTimelineSync({ const wasAtBottom = isAtBottomRef.current; resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - if (wasAtBottom) { - scrollToBottom('instant'); - } - }, [room, isAtBottomRef, scrollToBottom]) + // Scroll is handled by the useLayoutEffect auto-scroll recovery which + // fires after React commits the new timeline state β€” scrolling here + // would operate on the pre-commit DOM with a stale scrollSize. + }, [room, isAtBottomRef]) ); useRelationUpdate( @@ -547,7 +550,9 @@ export function useTimelineSync({ }, []) ); - useEffect(() => { + // useLayoutEffect so scroll fires before paint β€” prevents the one-frame flash + // where new VList content is briefly visible at the wrong position. + useLayoutEffect(() => { const resetAutoScrollPending = resetAutoScrollPendingRef.current; if (resetAutoScrollPending) resetAutoScrollPendingRef.current = false; diff --git a/src/client/slidingSync.ts b/src/client/slidingSync.ts index dd4a880b6..d7acfb35f 100644 --- a/src/client/slidingSync.ts +++ b/src/client/slidingSync.ts @@ -36,9 +36,9 @@ export const LIST_ROOM_SEARCH = 'room_search'; export const LIST_SPACE = 'space'; // A small number of timeline events per list room. Unread counts come from // the server-side notification_count field, so a full history isn't needed. -// When message previews are enabled, a higher limit (e.g. 5) avoids empty -// timelines caused by reactions/edits whose parent event is absent. -const DEFAULT_LIST_TIMELINE_LIMIT = 1; +// Higher limit avoids empty previews when the most-recent events are +// reactions/edits/state that useRoomLatestRenderedEvent skips over. +const DEFAULT_LIST_TIMELINE_LIMIT = 3; const DEFAULT_LIST_PAGE_SIZE = 250; const DEFAULT_POLL_TIMEOUT_MS = 20000; const DEFAULT_MAX_ROOMS = 5000; From 6cfb0257cb82cddad2a1f90d4c0defdd40c52fda Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 19:33:47 -0400 Subject: [PATCH 173/253] fix(timeline): restore upstream scroll pattern for new messages Restore scrollToBottom call in useLiveEventArrive with instant/smooth based on sender, add back eventsLengthRef and lastScrolledAt suppression, restore scrollToBottom in useLiveTimelineRefresh when wasAtBottom, and revert instant scrollToBottom to scrollTo(scrollSize) matching upstream. The previous changes removed all scroll calls from event arrival handlers and relied solely on the useLayoutEffect auto-scroll recovery, which has timing issues with VList measurement. Upstream's pattern of scrolling in the event handler and suppressing the effect works reliably. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 5 +---- src/app/hooks/timeline/useTimelineSync.ts | 16 +++++++++++----- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 96ef8d593..1bf5f9e14 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -263,10 +263,7 @@ export function RoomTimeline({ if (behavior === 'smooth') { vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); } else { - // scrollToIndex works reliably regardless of VList measurement state. - // The auto-scroll useLayoutEffect fires after React commits new items, - // so lastIndex is always valid when this is called. - vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); + vListRef.current.scrollTo(vListRef.current.scrollSize); } }, []); diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 948630887..f6d50c904 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -475,6 +475,9 @@ export function useTimelineSync({ const lastScrolledAtEventsLengthRef = useRef(eventsLength); + const eventsLengthRef = useRef(eventsLength); + eventsLengthRef.current = eventsLength; + useLiveEventArrive( room, useCallback( @@ -496,6 +499,9 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } + scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); + lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; + setTimeline((ct) => ({ ...ct })); return; } @@ -505,7 +511,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } }, - [mx, room, isAtBottomRef, unreadInfo, setUnreadInfo, hideReadsRef] + [mx, room, isAtBottomRef, unreadInfo, scrollToBottom, setUnreadInfo, hideReadsRef] ) ); @@ -530,10 +536,10 @@ export function useTimelineSync({ const wasAtBottom = isAtBottomRef.current; resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - // Scroll is handled by the useLayoutEffect auto-scroll recovery which - // fires after React commits the new timeline state β€” scrolling here - // would operate on the pre-commit DOM with a stale scrollSize. - }, [room, isAtBottomRef]) + if (wasAtBottom) { + scrollToBottom('instant'); + } + }, [room, isAtBottomRef, scrollToBottom]) ); useRelationUpdate( From 4e4cace21324e16162a0a2f1e1383018e42338ee Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 19:33:47 -0400 Subject: [PATCH 174/253] fix(timeline): restore upstream scroll pattern for new messages Restore scrollToBottom call in useLiveEventArrive with instant/smooth based on sender, add back eventsLengthRef and lastScrolledAt suppression, restore scrollToBottom in useLiveTimelineRefresh when wasAtBottom, and revert instant scrollToBottom to scrollTo(scrollSize) matching upstream. The previous changes removed all scroll calls from event arrival handlers and relied solely on the useLayoutEffect auto-scroll recovery, which has timing issues with VList measurement. Upstream's pattern of scrolling in the event handler and suppressing the effect works reliably. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 5 +---- src/app/hooks/timeline/useTimelineSync.ts | 16 +++++++++++----- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 86f4b0c29..335ec4a61 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -308,10 +308,7 @@ export function RoomTimeline({ if (behavior === 'smooth') { vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); } else { - // scrollToIndex works reliably regardless of VList measurement state. - // The auto-scroll useLayoutEffect fires after React commits new items, - // so lastIndex is always valid when this is called. - vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); + vListRef.current.scrollTo(vListRef.current.scrollSize); } }, []); diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index d935262cd..664fbd9eb 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -485,6 +485,9 @@ export function useTimelineSync({ const lastScrolledAtEventsLengthRef = useRef(eventsLength); + const eventsLengthRef = useRef(eventsLength); + eventsLengthRef.current = eventsLength; + useLiveEventArrive( room, useCallback( @@ -506,6 +509,9 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } + scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); + lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; + setTimeline((ct) => ({ ...ct })); return; } @@ -515,7 +521,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } }, - [mx, room, isAtBottomRef, unreadInfo, setUnreadInfo, hideReadsRef] + [mx, room, isAtBottomRef, unreadInfo, scrollToBottom, setUnreadInfo, hideReadsRef] ) ); @@ -540,10 +546,10 @@ export function useTimelineSync({ const wasAtBottom = isAtBottomRef.current; resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - // Scroll is handled by the useLayoutEffect auto-scroll recovery which - // fires after React commits the new timeline state β€” scrolling here - // would operate on the pre-commit DOM with a stale scrollSize. - }, [room, isAtBottomRef]) + if (wasAtBottom) { + scrollToBottom('instant'); + } + }, [room, isAtBottomRef, scrollToBottom]) ); useRelationUpdate(room, triggerMutation); From bd31c97dcfe5b3fb7b864fddf21f11bf2021f418 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 19:33:47 -0400 Subject: [PATCH 175/253] fix(timeline): restore upstream scroll pattern for new messages Restore scrollToBottom call in useLiveEventArrive with instant/smooth based on sender, add back eventsLengthRef and lastScrolledAt suppression, restore scrollToBottom in useLiveTimelineRefresh when wasAtBottom, and revert instant scrollToBottom to scrollTo(scrollSize) matching upstream. The previous changes removed all scroll calls from event arrival handlers and relied solely on the useLayoutEffect auto-scroll recovery, which has timing issues with VList measurement. Upstream's pattern of scrolling in the event handler and suppressing the effect works reliably. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 5 +---- src/app/hooks/timeline/useTimelineSync.ts | 16 +++++++++++----- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 99590f27a..d842f2a28 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -252,10 +252,7 @@ export function RoomTimeline({ if (behavior === 'smooth') { vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); } else { - // scrollToIndex works reliably regardless of VList measurement state. - // The auto-scroll useLayoutEffect fires after React commits new items, - // so lastIndex is always valid when this is called. - vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); + vListRef.current.scrollTo(vListRef.current.scrollSize); } }, []); diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 948630887..f6d50c904 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -475,6 +475,9 @@ export function useTimelineSync({ const lastScrolledAtEventsLengthRef = useRef(eventsLength); + const eventsLengthRef = useRef(eventsLength); + eventsLengthRef.current = eventsLength; + useLiveEventArrive( room, useCallback( @@ -496,6 +499,9 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } + scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); + lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; + setTimeline((ct) => ({ ...ct })); return; } @@ -505,7 +511,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } }, - [mx, room, isAtBottomRef, unreadInfo, setUnreadInfo, hideReadsRef] + [mx, room, isAtBottomRef, unreadInfo, scrollToBottom, setUnreadInfo, hideReadsRef] ) ); @@ -530,10 +536,10 @@ export function useTimelineSync({ const wasAtBottom = isAtBottomRef.current; resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - // Scroll is handled by the useLayoutEffect auto-scroll recovery which - // fires after React commits the new timeline state β€” scrolling here - // would operate on the pre-commit DOM with a stale scrollSize. - }, [room, isAtBottomRef]) + if (wasAtBottom) { + scrollToBottom('instant'); + } + }, [room, isAtBottomRef, scrollToBottom]) ); useRelationUpdate( From 17ccebddec214508325acc698c3629b8897ebe92 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 19:33:47 -0400 Subject: [PATCH 176/253] fix(timeline): restore upstream scroll pattern for new messages Restore scrollToBottom call in useLiveEventArrive with instant/smooth based on sender, add back eventsLengthRef and lastScrolledAt suppression, restore scrollToBottom in useLiveTimelineRefresh when wasAtBottom, and revert instant scrollToBottom to scrollTo(scrollSize) matching upstream. The previous changes removed all scroll calls from event arrival handlers and relied solely on the useLayoutEffect auto-scroll recovery, which has timing issues with VList measurement. Upstream's pattern of scrolling in the event handler and suppressing the effect works reliably. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 5 +---- src/app/hooks/timeline/useTimelineSync.ts | 16 +++++++++++----- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index e48684ea8..ee66ac28c 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -255,10 +255,7 @@ export function RoomTimeline({ if (behavior === 'smooth') { vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); } else { - // scrollToIndex works reliably regardless of VList measurement state. - // The auto-scroll useLayoutEffect fires after React commits new items, - // so lastIndex is always valid when this is called. - vListRef.current.scrollToIndex(lastIndex, { align: 'end' }); + vListRef.current.scrollTo(vListRef.current.scrollSize); } }, []); diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 948630887..f6d50c904 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -475,6 +475,9 @@ export function useTimelineSync({ const lastScrolledAtEventsLengthRef = useRef(eventsLength); + const eventsLengthRef = useRef(eventsLength); + eventsLengthRef.current = eventsLength; + useLiveEventArrive( room, useCallback( @@ -496,6 +499,9 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } + scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); + lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; + setTimeline((ct) => ({ ...ct })); return; } @@ -505,7 +511,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } }, - [mx, room, isAtBottomRef, unreadInfo, setUnreadInfo, hideReadsRef] + [mx, room, isAtBottomRef, unreadInfo, scrollToBottom, setUnreadInfo, hideReadsRef] ) ); @@ -530,10 +536,10 @@ export function useTimelineSync({ const wasAtBottom = isAtBottomRef.current; resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - // Scroll is handled by the useLayoutEffect auto-scroll recovery which - // fires after React commits the new timeline state β€” scrolling here - // would operate on the pre-commit DOM with a stale scrollSize. - }, [room, isAtBottomRef]) + if (wasAtBottom) { + scrollToBottom('instant'); + } + }, [room, isAtBottomRef, scrollToBottom]) ); useRelationUpdate( From 4148bfad08a8abd01b2289e0125434a5dfc614aa Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 22:26:19 -0400 Subject: [PATCH 177/253] fix(timeline): align scrollToBottom with upstream, fix eventId race MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove behavior parameter from scrollToBottom β€” always use scrollTo(scrollSize) matching upstream. The smooth scrollToIndex was scrolling to stale lastIndex (before new item measured), leaving new messages below the fold. - Revert auto-scroll recovery from useLayoutEffect back to useEffect (matches upstream). useLayoutEffect fires before VList measures new items and before setAtBottom(false) in eventId effect. - Remove stale scrollCacheForRoomRef that referenced missing imports. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 17 ++----------- .../hooks/timeline/useTimelineSync.test.tsx | 2 +- src/app/hooks/timeline/useTimelineSync.ts | 25 ++++++------------- 3 files changed, 10 insertions(+), 34 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 1bf5f9e14..bb5d91b58 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -201,13 +201,6 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - // Load any cached scroll state for this room on mount. A fresh RoomTimeline is - // mounted per room (via key={roomId} in RoomView) so this is the only place we - // need to read the cache β€” the render-phase room-change block below only fires - // in the (hypothetical) case where the room prop changes without a remount. - const scrollCacheForRoomRef = useRef( - roomScrollCache.load(mxUserId, room.roomId) - ); const [atBottomState, setAtBottomState] = useState(!eventId); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { @@ -256,15 +249,11 @@ export function RoomTimeline({ const processedEventsRef = useRef([]); const timelineSyncRef = useRef(null as unknown as typeof timelineSync); - const scrollToBottom = useCallback((behavior?: 'instant' | 'smooth') => { + const scrollToBottom = useCallback(() => { if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; - if (behavior === 'smooth') { - vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); - } else { - vListRef.current.scrollTo(vListRef.current.scrollSize); - } + vListRef.current.scrollTo(vListRef.current.scrollSize); }, []); const timelineSync = useTimelineSync({ @@ -455,8 +444,6 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; setIsReady(false); - // Ensure auto-scroll to bottom doesn't fire while we're navigating to a - // specific event β€” atBottom will be updated correctly once the user scrolls. setAtBottom(false); timelineSyncRef.current.loadEventTimeline(eventId); }, [eventId, room.roomId, setAtBottom]); diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index 0b89fb6a2..61bc0cbdf 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -132,7 +132,7 @@ describe('useTimelineSync', () => { await Promise.resolve(); }); - expect(scrollToBottom).toHaveBeenCalledWith('instant'); + expect(scrollToBottom).toHaveBeenCalled(); }); it('resets timeline state when room.roomId changes and eventId is not set', async () => { diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index f6d50c904..dda1e0207 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -1,13 +1,4 @@ -import { - useState, - useMemo, - useCallback, - useRef, - useEffect, - useLayoutEffect, - Dispatch, - SetStateAction, -} from 'react'; +import { useState, useMemo, useCallback, useRef, useEffect, Dispatch, SetStateAction } from 'react'; import to from 'await-to-js'; import * as Sentry from '@sentry/react'; import { @@ -360,7 +351,7 @@ export interface UseTimelineSyncOptions { eventId?: string; isAtBottom: boolean; isAtBottomRef: React.MutableRefObject; - scrollToBottom: (behavior?: 'instant' | 'smooth') => void; + scrollToBottom: () => void; unreadInfo: ReturnType; setUnreadInfo: Dispatch>>; hideReadsRef: React.MutableRefObject; @@ -469,7 +460,7 @@ export function useTimelineSync({ useCallback(() => { if (!alive()) return; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - scrollToBottom('instant'); + scrollToBottom(); }, [alive, room, scrollToBottom]) ); @@ -499,7 +490,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } - scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); + scrollToBottom(); lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; setTimeline((ct) => ({ ...ct })); @@ -537,7 +528,7 @@ export function useTimelineSync({ resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); if (wasAtBottom) { - scrollToBottom('instant'); + scrollToBottom(); } }, [room, isAtBottomRef, scrollToBottom]) ); @@ -556,9 +547,7 @@ export function useTimelineSync({ }, []) ); - // useLayoutEffect so scroll fires before paint β€” prevents the one-frame flash - // where new VList content is briefly visible at the wrong position. - useLayoutEffect(() => { + useEffect(() => { const resetAutoScrollPending = resetAutoScrollPendingRef.current; if (resetAutoScrollPending) resetAutoScrollPendingRef.current = false; @@ -576,7 +565,7 @@ export function useTimelineSync({ if (eventsLength <= lastScrolledAtEventsLengthRef.current && !resetAutoScrollPending) return; lastScrolledAtEventsLengthRef.current = eventsLength; - scrollToBottom('instant'); + scrollToBottom(); }, [isAtBottom, liveTimelineLinked, eventsLength, scrollToBottom]); useEffect(() => { From 1ac909dd0a3e0cc9490ed07829203b81b36d2377 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 22:26:19 -0400 Subject: [PATCH 178/253] fix(timeline): align scrollToBottom with upstream, fix eventId race MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove behavior parameter from scrollToBottom β€” always use scrollTo(scrollSize) matching upstream. The smooth scrollToIndex was scrolling to stale lastIndex (before new item measured), leaving new messages below the fold. - Revert auto-scroll recovery from useLayoutEffect back to useEffect (matches upstream). useLayoutEffect fires before VList measures new items and before setAtBottom(false) in eventId effect. - Remove stale scrollCacheForRoomRef that referenced missing imports. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 14 ++--------- .../hooks/timeline/useTimelineSync.test.tsx | 2 +- src/app/hooks/timeline/useTimelineSync.ts | 25 ++++++------------- 3 files changed, 10 insertions(+), 31 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 335ec4a61..09ea440bf 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -250,10 +250,6 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - // Load any cached scroll state for this room on mount. A fresh RoomTimeline is - // mounted per room (via key={roomId} in RoomView) so this is the only place we - // need to read the cache β€” the render-phase room-change block below only fires - // in the (hypothetical) case where the room prop changes without a remount. const scrollCacheForRoomRef = useRef( roomScrollCache.load(mxUserId, room.roomId) ); @@ -301,15 +297,11 @@ export function RoomTimeline({ const processedEventsRef = useRef([]); const timelineSyncRef = useRef(null as unknown as typeof timelineSync); - const scrollToBottom = useCallback((behavior?: 'instant' | 'smooth') => { + const scrollToBottom = useCallback(() => { if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; - if (behavior === 'smooth') { - vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); - } else { - vListRef.current.scrollTo(vListRef.current.scrollSize); - } + vListRef.current.scrollTo(vListRef.current.scrollSize); }, []); const timelineSync = useTimelineSync({ @@ -495,8 +487,6 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; setIsReady(false); - // Ensure auto-scroll to bottom doesn't fire while we're navigating to a - // specific event β€” atBottom will be updated correctly once the user scrolls. setAtBottom(false); timelineSyncRef.current.loadEventTimeline(eventId); }, [eventId, room.roomId, setAtBottom]); diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index d53d74143..e5e7c4cfd 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -129,7 +129,7 @@ describe('useTimelineSync', () => { await Promise.resolve(); }); - expect(scrollToBottom).toHaveBeenCalledWith('instant'); + expect(scrollToBottom).toHaveBeenCalled(); }); it('resets timeline state when room.roomId changes and eventId is not set', async () => { diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 664fbd9eb..87d8631db 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -1,13 +1,4 @@ -import { - useState, - useMemo, - useCallback, - useRef, - useEffect, - useLayoutEffect, - Dispatch, - SetStateAction, -} from 'react'; +import { useState, useMemo, useCallback, useRef, useEffect, Dispatch, SetStateAction } from 'react'; import to from 'await-to-js'; import * as Sentry from '@sentry/react'; import { @@ -360,7 +351,7 @@ export interface UseTimelineSyncOptions { eventId?: string; isAtBottom: boolean; isAtBottomRef: React.MutableRefObject; - scrollToBottom: (behavior?: 'instant' | 'smooth') => void; + scrollToBottom: () => void; unreadInfo: ReturnType; setUnreadInfo: Dispatch>>; hideReadsRef: React.MutableRefObject; @@ -479,7 +470,7 @@ export function useTimelineSync({ useCallback(() => { if (!alive()) return; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - scrollToBottom('instant'); + scrollToBottom(); }, [alive, room, scrollToBottom]) ); @@ -509,7 +500,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } - scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); + scrollToBottom(); lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; setTimeline((ct) => ({ ...ct })); @@ -547,7 +538,7 @@ export function useTimelineSync({ resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); if (wasAtBottom) { - scrollToBottom('instant'); + scrollToBottom(); } }, [room, isAtBottomRef, scrollToBottom]) ); @@ -556,9 +547,7 @@ export function useTimelineSync({ useThreadUpdate(room, triggerMutation); - // useLayoutEffect so scroll fires before paint β€” prevents the one-frame flash - // where new VList content is briefly visible at the wrong position. - useLayoutEffect(() => { + useEffect(() => { const resetAutoScrollPending = resetAutoScrollPendingRef.current; if (resetAutoScrollPending) resetAutoScrollPendingRef.current = false; @@ -576,7 +565,7 @@ export function useTimelineSync({ if (eventsLength <= lastScrolledAtEventsLengthRef.current && !resetAutoScrollPending) return; lastScrolledAtEventsLengthRef.current = eventsLength; - scrollToBottom('instant'); + scrollToBottom(); }, [isAtBottom, liveTimelineLinked, eventsLength, scrollToBottom]); useEffect(() => { From 1392b779080acaa81487908fc19b8a5e84b13087 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 22:26:19 -0400 Subject: [PATCH 179/253] fix(timeline): align scrollToBottom with upstream, fix eventId race MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove behavior parameter from scrollToBottom β€” always use scrollTo(scrollSize) matching upstream. The smooth scrollToIndex was scrolling to stale lastIndex (before new item measured), leaving new messages below the fold. - Revert auto-scroll recovery from useLayoutEffect back to useEffect (matches upstream). useLayoutEffect fires before VList measures new items and before setAtBottom(false) in eventId effect. - Remove stale scrollCacheForRoomRef that referenced missing imports. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 15 +---------- .../hooks/timeline/useTimelineSync.test.tsx | 2 +- src/app/hooks/timeline/useTimelineSync.ts | 25 ++++++------------- 3 files changed, 9 insertions(+), 33 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index d842f2a28..73895a64a 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -198,13 +198,6 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - // Load any cached scroll state for this room on mount. A fresh RoomTimeline is - // mounted per room (via key={roomId} in RoomView) so this is the only place we - // need to read the cache β€” the render-phase room-change block below only fires - // in the (hypothetical) case where the room prop changes without a remount. - const scrollCacheForRoomRef = useRef( - roomScrollCache.load(mxUserId, room.roomId) - ); const [atBottomState, setAtBottomState] = useState(!eventId); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { @@ -249,11 +242,7 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; - if (behavior === 'smooth') { - vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); - } else { - vListRef.current.scrollTo(vListRef.current.scrollSize); - } + vListRef.current.scrollTo(vListRef.current.scrollSize); }, []); const timelineSync = useTimelineSync({ @@ -405,8 +394,6 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; setIsReady(false); - // Ensure auto-scroll to bottom doesn't fire while we're navigating to a - // specific event β€” atBottom will be updated correctly once the user scrolls. setAtBottom(false); timelineSyncRef.current.loadEventTimeline(eventId); }, [eventId, room.roomId, setAtBottom]); diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index d53d74143..e5e7c4cfd 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -129,7 +129,7 @@ describe('useTimelineSync', () => { await Promise.resolve(); }); - expect(scrollToBottom).toHaveBeenCalledWith('instant'); + expect(scrollToBottom).toHaveBeenCalled(); }); it('resets timeline state when room.roomId changes and eventId is not set', async () => { diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index f6d50c904..dda1e0207 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -1,13 +1,4 @@ -import { - useState, - useMemo, - useCallback, - useRef, - useEffect, - useLayoutEffect, - Dispatch, - SetStateAction, -} from 'react'; +import { useState, useMemo, useCallback, useRef, useEffect, Dispatch, SetStateAction } from 'react'; import to from 'await-to-js'; import * as Sentry from '@sentry/react'; import { @@ -360,7 +351,7 @@ export interface UseTimelineSyncOptions { eventId?: string; isAtBottom: boolean; isAtBottomRef: React.MutableRefObject; - scrollToBottom: (behavior?: 'instant' | 'smooth') => void; + scrollToBottom: () => void; unreadInfo: ReturnType; setUnreadInfo: Dispatch>>; hideReadsRef: React.MutableRefObject; @@ -469,7 +460,7 @@ export function useTimelineSync({ useCallback(() => { if (!alive()) return; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - scrollToBottom('instant'); + scrollToBottom(); }, [alive, room, scrollToBottom]) ); @@ -499,7 +490,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } - scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); + scrollToBottom(); lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; setTimeline((ct) => ({ ...ct })); @@ -537,7 +528,7 @@ export function useTimelineSync({ resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); if (wasAtBottom) { - scrollToBottom('instant'); + scrollToBottom(); } }, [room, isAtBottomRef, scrollToBottom]) ); @@ -556,9 +547,7 @@ export function useTimelineSync({ }, []) ); - // useLayoutEffect so scroll fires before paint β€” prevents the one-frame flash - // where new VList content is briefly visible at the wrong position. - useLayoutEffect(() => { + useEffect(() => { const resetAutoScrollPending = resetAutoScrollPendingRef.current; if (resetAutoScrollPending) resetAutoScrollPendingRef.current = false; @@ -576,7 +565,7 @@ export function useTimelineSync({ if (eventsLength <= lastScrolledAtEventsLengthRef.current && !resetAutoScrollPending) return; lastScrolledAtEventsLengthRef.current = eventsLength; - scrollToBottom('instant'); + scrollToBottom(); }, [isAtBottom, liveTimelineLinked, eventsLength, scrollToBottom]); useEffect(() => { From 399418be13d572c5123d831084e0776828d738c0 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 22:26:19 -0400 Subject: [PATCH 180/253] fix(timeline): align scrollToBottom with upstream, fix eventId race MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove behavior parameter from scrollToBottom β€” always use scrollTo(scrollSize) matching upstream. The smooth scrollToIndex was scrolling to stale lastIndex (before new item measured), leaving new messages below the fold. - Revert auto-scroll recovery from useLayoutEffect back to useEffect (matches upstream). useLayoutEffect fires before VList measures new items and before setAtBottom(false) in eventId effect. - Remove stale scrollCacheForRoomRef that referenced missing imports. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 15 +---------- .../hooks/timeline/useTimelineSync.test.tsx | 2 +- src/app/hooks/timeline/useTimelineSync.ts | 25 ++++++------------- 3 files changed, 9 insertions(+), 33 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index ee66ac28c..0630dcc9b 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -201,13 +201,6 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - // Load any cached scroll state for this room on mount. A fresh RoomTimeline is - // mounted per room (via key={roomId} in RoomView) so this is the only place we - // need to read the cache β€” the render-phase room-change block below only fires - // in the (hypothetical) case where the room prop changes without a remount. - const scrollCacheForRoomRef = useRef( - roomScrollCache.load(mxUserId, room.roomId) - ); const [atBottomState, setAtBottomState] = useState(!eventId); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { @@ -252,11 +245,7 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; - if (behavior === 'smooth') { - vListRef.current.scrollToIndex(lastIndex, { align: 'end', smooth: true }); - } else { - vListRef.current.scrollTo(vListRef.current.scrollSize); - } + vListRef.current.scrollTo(vListRef.current.scrollSize); }, []); const timelineSync = useTimelineSync({ @@ -419,8 +408,6 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; setIsReady(false); - // Ensure auto-scroll to bottom doesn't fire while we're navigating to a - // specific event β€” atBottom will be updated correctly once the user scrolls. setAtBottom(false); timelineSyncRef.current.loadEventTimeline(eventId); }, [eventId, room.roomId, setAtBottom]); diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index d53d74143..e5e7c4cfd 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -129,7 +129,7 @@ describe('useTimelineSync', () => { await Promise.resolve(); }); - expect(scrollToBottom).toHaveBeenCalledWith('instant'); + expect(scrollToBottom).toHaveBeenCalled(); }); it('resets timeline state when room.roomId changes and eventId is not set', async () => { diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index f6d50c904..dda1e0207 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -1,13 +1,4 @@ -import { - useState, - useMemo, - useCallback, - useRef, - useEffect, - useLayoutEffect, - Dispatch, - SetStateAction, -} from 'react'; +import { useState, useMemo, useCallback, useRef, useEffect, Dispatch, SetStateAction } from 'react'; import to from 'await-to-js'; import * as Sentry from '@sentry/react'; import { @@ -360,7 +351,7 @@ export interface UseTimelineSyncOptions { eventId?: string; isAtBottom: boolean; isAtBottomRef: React.MutableRefObject; - scrollToBottom: (behavior?: 'instant' | 'smooth') => void; + scrollToBottom: () => void; unreadInfo: ReturnType; setUnreadInfo: Dispatch>>; hideReadsRef: React.MutableRefObject; @@ -469,7 +460,7 @@ export function useTimelineSync({ useCallback(() => { if (!alive()) return; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - scrollToBottom('instant'); + scrollToBottom(); }, [alive, room, scrollToBottom]) ); @@ -499,7 +490,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } - scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); + scrollToBottom(); lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; setTimeline((ct) => ({ ...ct })); @@ -537,7 +528,7 @@ export function useTimelineSync({ resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); if (wasAtBottom) { - scrollToBottom('instant'); + scrollToBottom(); } }, [room, isAtBottomRef, scrollToBottom]) ); @@ -556,9 +547,7 @@ export function useTimelineSync({ }, []) ); - // useLayoutEffect so scroll fires before paint β€” prevents the one-frame flash - // where new VList content is briefly visible at the wrong position. - useLayoutEffect(() => { + useEffect(() => { const resetAutoScrollPending = resetAutoScrollPendingRef.current; if (resetAutoScrollPending) resetAutoScrollPendingRef.current = false; @@ -576,7 +565,7 @@ export function useTimelineSync({ if (eventsLength <= lastScrolledAtEventsLengthRef.current && !resetAutoScrollPending) return; lastScrolledAtEventsLengthRef.current = eventsLength; - scrollToBottom('instant'); + scrollToBottom(); }, [isAtBottom, liveTimelineLinked, eventsLength, scrollToBottom]); useEffect(() => { From 30a26ea0ee40e210a894f628e0d3405e6f8d7875 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 22:45:03 -0400 Subject: [PATCH 181/253] feat(timeline): add video aspectRatio and VList itemSize hint - Add aspectRatio CSS to VideoContent from Matrix info.w/info.h, matching ImageContent pattern to prevent layout shift - Add itemSize={80} to VList for better initial size estimation, reducing scroll jump when items are first measured Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/components/message/content/VideoContent.tsx | 3 +++ src/app/features/room/RoomTimeline.tsx | 1 + 2 files changed, 4 insertions(+) diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx index 71613c598..2b36f2813 100644 --- a/src/app/components/message/content/VideoContent.tsx +++ b/src/app/components/message/content/VideoContent.tsx @@ -110,9 +110,12 @@ export const VideoContent = as<'div', VideoContentProps>( if (autoPlay) loadSrc(); }, [autoPlay, loadSrc]); + const hasDimensions = typeof info?.w === 'number' && typeof info?.h === 'number'; + return ( setIsHovered(true)} diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index d026ec1fa..91e63eb90 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -858,6 +858,7 @@ export function RoomTimeline({ ref={vListRef} data={processedEvents} shift={shift} + itemSize={80} className={css.messageList} style={{ flex: 1, From c8189eae56470707af9aef5f00c03eda82bcd93f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 23:09:35 -0400 Subject: [PATCH 182/253] fix(timeline): skip scroll handler during init to prevent jitter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Move the isReadyRef guard to the top of handleVListScroll so that content-chase, atBottom flips, scroll-cache saves, and pagination triggers are all suppressed while the timeline is hidden (opacity 0) during VList measurement. prevScrollSizeRef is still updated so the first post-ready scroll event does not see a false content-grew delta. Previously only setAtBottom was guarded, but content-chase fired cascading scrollTo calls during the 80 ms init window β€” extra work that upstream does not have, producing visible layout churn when opening a room. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 09ea440bf..51e8a850a 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -766,15 +766,18 @@ export function RoomTimeline({ const contentGrew = v.scrollSize > prevScrollSizeRef.current; prevScrollSizeRef.current = v.scrollSize; + // Skip content-chase and cache saves during init: the timeline is hidden + // (opacity 0) while VList measures items and fires intermediate scroll + // events. Chasing the bottom here causes cascading scrollTo calls that + // upstream doesn't have, producing visible layout churn after isReady. + if (!isReadyRef.current) return; + if (atBottomRef.current && !isNowAtBottom && contentGrew) { v.scrollTo(v.scrollSize); return; } - // Suppress atBottom flips during the initial scroll-to-bottom sequence: - // VList fires intermediate scroll events before the scroll settles, and - // if isReady is set in the same commit the button briefly flashes. - if (isNowAtBottom !== atBottomRef.current && isReadyRef.current) { + if (isNowAtBottom !== atBottomRef.current) { setAtBottom(isNowAtBottom); } From 5c941906534684dc6de6783187e591adbe77e0d9 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 17 Apr 2026 08:14:23 -0400 Subject: [PATCH 183/253] perf(timeline): skip redundant re-render on TimelineReset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Compare linked-timeline references before calling setTimeline in useLiveTimelineRefresh. When the SDK fires TimelineReset during initial room load (common with sliding sync), the timeline chain is often identical β€” skipping the update avoids a full re-render flash. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/timeline/useTimelineSync.test.tsx | 5 +++++ src/app/hooks/timeline/useTimelineSync.ts | 14 +++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index e5e7c4cfd..9006ee49a 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -125,6 +125,11 @@ describe('useTimelineSync', () => { ); await act(async () => { + // Simulate the SDK replacing the live timeline object, which is what + // a real TimelineReset does (resetLiveTimeline creates a new + // EventTimeline and swaps liveTimeline to it). + const newTimeline = createTimeline([{}, {}]); + timelineSet.getLiveTimeline = () => newTimeline; timelineSet.emit(RoomEvent.TimelineReset); await Promise.resolve(); }); diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 87d8631db..67556c4ef 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -395,6 +395,9 @@ export function useTimelineSync({ | undefined >(); + const timelineRef = useRef(timeline); + timelineRef.current = timeline; + const resetAutoScrollPendingRef = useRef(false); const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines); @@ -534,9 +537,18 @@ export function useTimelineSync({ useLiveTimelineRefresh( room, useCallback(() => { + const newLinked = getInitialTimeline(room).linkedTimelines; + const prev = timelineRef.current.linkedTimelines; + // Skip update when the linked-timeline chain is identical (same + // EventTimeline references). TimelineReset often fires during initial + // room load after the SDK already populated the timeline we are + // showing β€” re-rendering would only produce a visible flash. + if (prev.length === newLinked.length && prev.every((tl, i) => tl === newLinked[i])) { + return; + } const wasAtBottom = isAtBottomRef.current; resetAutoScrollPendingRef.current = wasAtBottom; - setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); + setTimeline({ linkedTimelines: newLinked }); if (wasAtBottom) { scrollToBottom(); } From 29fc1d00cadf299adf136a9f4496edb75f92abd1 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 17 Apr 2026 08:25:24 -0400 Subject: [PATCH 184/253] perf(timeline): hide content during genuine TimelineReset re-render MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When a genuine TimelineReset replaces the timeline chain (new EventTimeline objects), hide the timeline behind opacity 0 and re-arm the initial-scroll mechanism. This ensures the replacement data renders invisibly, gets measured by VList, and only becomes visible once stable β€” preventing the visible flash/jitter on room open. Adds timelineResetToken counter to useTimelineSync that increments on genuine resets. RoomTimeline watches it via useLayoutEffect to toggle isReady off before the browser paints the intermediate state. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 13 +++++++++++++ src/app/hooks/timeline/useTimelineSync.ts | 7 +++++++ 2 files changed, 20 insertions(+) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 51e8a850a..ea2bc963e 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -420,6 +420,19 @@ export function RoomTimeline({ hasInitialScrolledRef.current = false; }, [isReady, timelineSync.eventsLength]); + // When a genuine TimelineReset replaces the timeline chain (new + // EventTimeline objects from the SDK), hide content behind opacity 0 and + // re-arm the initial-scroll so the new data renders invisibly, gets + // measured, and only then becomes visible β€” preventing a visible flash. + const prevResetTokenRef = useRef(timelineSync.timelineResetToken); + useLayoutEffect(() => { + if (timelineSync.timelineResetToken === prevResetTokenRef.current) return; + prevResetTokenRef.current = timelineSync.timelineResetToken; + if (!isReady) return; + setIsReady(false); + hasInitialScrolledRef.current = false; + }, [isReady, timelineSync.timelineResetToken]); + const recalcTopSpacer = useCallback(() => { const v = vListRef.current; if (!v) return; diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 67556c4ef..78b0cdac7 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -398,6 +398,11 @@ export function useTimelineSync({ const timelineRef = useRef(timeline); timelineRef.current = timeline; + // Incremented each time a genuine TimelineReset replaces the timeline chain. + // RoomTimeline watches this to hide content (opacity 0) and re-arm initial + // scroll so the replacement renders behind the curtain. + const [timelineResetToken, setTimelineResetToken] = useState(0); + const resetAutoScrollPendingRef = useRef(false); const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines); @@ -548,6 +553,7 @@ export function useTimelineSync({ } const wasAtBottom = isAtBottomRef.current; resetAutoScrollPendingRef.current = wasAtBottom; + setTimelineResetToken((t) => t + 1); setTimeline({ linkedTimelines: newLinked }); if (wasAtBottom) { scrollToBottom(); @@ -618,5 +624,6 @@ export function useTimelineSync({ focusItem, setFocusItem, mutationVersion, + timelineResetToken, }; } From 4f2e3e007b609d16d17fb11db03e80e910e5f7e9 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 17 Apr 2026 08:30:36 -0400 Subject: [PATCH 185/253] feat(timeline): show skeleton overlay while measuring first-visit rooms When opening a room with no cached scroll state, render a skeleton placeholder overlay on top of the VList while it measures real item heights at opacity 0. This gives users immediate visual feedback instead of a blank/invisible area during the 80ms stabilisation window. Cached rooms skip the overlay entirely since they restore instantly. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 33 +++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index ea2bc963e..27e8b0058 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -826,6 +826,13 @@ export function RoomTimeline({ timelineSync.eventsLength === 0 && (!isReady || timelineSync.canPaginateBack || timelineSync.backwardStatus === 'loading'); + // Show a skeleton overlay when content is not ready and there is no + // cached scroll state to restore from (first visit or timeline reset). + // The VList still renders underneath at opacity 0 so it can measure real + // item heights β€” the overlay just gives the user something to look at. + const showSkeletonOverlay = + !isReady && !scrollCacheForRoomRef.current && !showLoadingPlaceholders; + let backPaginationJSX: ReactNode | undefined; if (timelineSync.canPaginateBack || timelineSync.backwardStatus !== 'idle') { if (timelineSync.backwardStatus === 'error') { @@ -1040,9 +1047,32 @@ export function RoomTimeline({ minHeight: 0, overflow: 'hidden', position: 'relative', - opacity: isReady || showLoadingPlaceholders ? 1 : 0, }} > + {showSkeletonOverlay && ( +
+ {Array.from({ length: 8 }, (_, i) => ( + + {messageLayout === MessageLayout.Compact ? ( + + ) : ( + + )} + + ))} +
+ )} key={room.roomId} ref={vListRef} @@ -1057,6 +1087,7 @@ export function RoomTimeline({ flexDirection: 'column', paddingTop: topSpacerHeight > 0 ? topSpacerHeight : config.space.S600, paddingBottom: config.space.S600, + opacity: isReady || showLoadingPlaceholders ? 1 : 0, }} onScroll={handleVListScroll} > From 32917c29558bdc3287bcc12fa3a0bfce61562a42 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 17 Apr 2026 10:24:24 -0400 Subject: [PATCH 186/253] fix(timeline): eliminate room-open and jump-to-message jitter - Always setShift(true) on backward pagination so Virtua anchors the viewport when sliding sync prepends history to a sparse timeline - Remove timelineSync.timeline from vListIndices memo deps to prevent processedEvents recomputing on every live event/relation update - Merge dual focusItem effects into one; delay setIsReady until double- rAF after scrollToIndex so the timeline reveals with the target message already centred and the 2-second highlight is fully visible - Add module-level roomScrollCache; save scroll offset on unmount and restore it via rAF on revisit, skipping the 80 ms opacity timer - Remove key={room.roomId} from both RoomProvider wrappers and the RoomTimeline; extend the currentRoomIdRef render-phase guard to also reset atBottom, shift, topSpacerHeight, and unreadInfo on room change so the full component tree stays mounted across room switches Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 89 +++++++++++++++++---- src/app/features/room/RoomView.tsx | 1 - src/app/pages/client/space/RoomProvider.tsx | 4 +- 3 files changed, 75 insertions(+), 19 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index d026ec1fa..e77c7ed98 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -116,6 +116,10 @@ export type RoomTimelineProps = { onEditLastMessageRef?: React.MutableRefObject<(() => void) | undefined>; }; +type ScrollCacheEntry = { offset: number; atBottom: boolean }; +/** Survives component remounts so revisiting a room restores scroll position instantly. */ +const roomScrollCache = new Map(); + export function RoomTimeline({ room, eventId, @@ -143,7 +147,6 @@ export function RoomTimeline({ const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents'); const [showTombstoneEvents] = useSetting(settingsAtom, 'showTombstoneEvents'); const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools'); - const [reducedMotion] = useSetting(settingsAtom, 'reducedMotion'); const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock'); const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString'); const [autoplayStickers] = useSetting(settingsAtom, 'autoplayStickers'); @@ -225,6 +228,8 @@ export function RoomTimeline({ const currentRoomIdRef = useRef(room.roomId); const [isReady, setIsReady] = useState(false); + const isReadyRef = useRef(false); + isReadyRef.current = isReady; if (currentRoomIdRef.current !== room.roomId) { hasInitialScrolledRef.current = false; @@ -236,6 +241,12 @@ export function RoomTimeline({ initialScrollTimerRef.current = undefined; } setIsReady(false); + // Reset per-room scroll/layout state so the new room starts clean. + setAtBottom(true); + setShift(false); + setTopSpacerHeight(0); + topSpacerHeightRef.current = 0; + setUnreadInfo(getRoomUnreadInfo(room, true)); } const processedEventsRef = useRef([]); @@ -298,6 +309,24 @@ export function RoomTimeline({ timelineSync.liveTimelineLinked && vListRef.current ) { + // Fast path: revisiting a room — restore the last scroll position instantly + // without the 80 ms timer so there's no opacity flash. + const cached = roomScrollCache.get(room.roomId); + if (cached !== undefined) { + hasInitialScrolledRef.current = true; + const v = vListRef.current; + requestAnimationFrame(() => { + if (!v) return; + if (cached.atBottom) { + v.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); + } else { + v.scrollTo(cached.offset); + } + setIsReady(true); + }); + return; + } + vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); // Store in a ref rather than a local so subsequent eventsLength changes // (e.g. the onLifecycle timeline reset firing within 80 ms) do NOT @@ -330,6 +359,21 @@ export function RoomTimeline({ [] ); + // Save scroll position on unmount or room change so revisits restore instantly. + useEffect( + () => () => { + if (!isReadyRef.current) return; + const v = vListRef.current; + if (!v) return; + const distFromBottom = v.scrollSize - v.scrollOffset - v.viewportSize; + roomScrollCache.set(room.roomId, { + offset: v.scrollOffset, + atBottom: distFromBottom < 100, + }); + }, + [room.roomId] + ); + // If the timeline was blanked while content was already visible — e.g. a // TimelineReset fired by mx.retryImmediately() when the app comes back from // background — hide the timeline (opacity 0) and re-arm the initial-scroll so @@ -371,7 +415,9 @@ export function RoomTimeline({ prevBackwardStatusRef.current = timelineSync.backwardStatus; if (timelineSync.backwardStatus === 'loading') { wasAtBottomBeforePaginationRef.current = atBottomRef.current; - if (!atBottomRef.current) setShift(true); + // Always anchor during backward pagination — even when at the bottom — so + // prepended items don't cause a visible jump (e.g. sliding-sync fill). + setShift(true); } else if (prev === 'loading' && timelineSync.backwardStatus === 'idle') { setShift(false); if (wasAtBottomBeforePaginationRef.current) { @@ -381,29 +427,41 @@ export function RoomTimeline({ }, [timelineSync.backwardStatus]); useEffect(() => { - let timeoutId: ReturnType | undefined; + let cancelled = false; + let outerRafId: ReturnType | undefined; + let clearId: ReturnType | undefined; + if (timelineSync.focusItem) { if (timelineSync.focusItem.scrollTo && vListRef.current) { const processedIndex = getRawIndexToProcessedIndex(timelineSync.focusItem.index); if (processedIndex !== undefined) { vListRef.current.scrollToIndex(processedIndex, { align: 'center' }); + // Setting scrollTo=false triggers effect cleanup then re-run; the reveal + // rAFs below restart from the new run so Virtua has time to settle first. timelineSync.setFocusItem((prev) => (prev ? { ...prev, scrollTo: false } : undefined)); } } - timeoutId = setTimeout(() => { - timelineSync.setFocusItem(undefined); - }, 2000); + + // Reveal the timeline and begin the highlight timer after two frames so + // Virtua has completed the scroll before the content becomes visible. + outerRafId = requestAnimationFrame(() => { + if (cancelled) return; + requestAnimationFrame(() => { + if (cancelled) return; + setIsReady(true); + clearId = setTimeout(() => { + timelineSync.setFocusItem(undefined); + }, 2000); + }); + }); } + return () => { - if (timeoutId !== undefined) clearTimeout(timeoutId); + cancelled = true; + if (outerRafId !== undefined) cancelAnimationFrame(outerRafId); + if (clearId !== undefined) clearTimeout(clearId); }; - }, [timelineSync.focusItem, timelineSync, reducedMotion, getRawIndexToProcessedIndex]); - - useEffect(() => { - if (timelineSync.focusItem) { - setIsReady(true); - } - }, [timelineSync.focusItem]); + }, [timelineSync.focusItem, timelineSync, getRawIndexToProcessedIndex]); useEffect(() => { if (!eventId) return; @@ -724,8 +782,7 @@ export function RoomTimeline({ : timelineSync.eventsLength; const vListIndices = useMemo( () => Array.from({ length: vListItemCount }, (_, i) => i), - // eslint-disable-next-line react-hooks/exhaustive-deps - [vListItemCount, timelineSync.timeline] + [vListItemCount] ); const processedEvents = useProcessedTimeline({ diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx index 421561616..a3a96b921 100644 --- a/src/app/features/room/RoomView.tsx +++ b/src/app/features/room/RoomView.tsx @@ -157,7 +157,6 @@ export function RoomView({ eventId }: { eventId?: string }) { )} + {children} ); @@ -69,7 +69,7 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) { } return ( - + {children} ); From 1b5b2847608043b560f5305bdb372513ce9d7aa8 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 17 Apr 2026 11:55:09 -0400 Subject: [PATCH 187/253] fix(timeline): skip TimelineReset hide for additive sliding-sync resets Only fire setTimelineResetToken / scrollToBottom when the live-end event changed (destructive reset, e.g. reconnect). Sliding sync fires TimelineReset to replace the EventTimeline container while keeping the same events, which was causing a visible flash ~1 second after the room appeared stable. Also adds a timelineRef in the main useTimelineSync scope so the callback can compare old vs new linked timelines without capturing stale state. Tests updated: destructive-reset path still triggers scroll-to-bottom; new additive-reset test confirms no spurious scroll. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../hooks/timeline/useTimelineSync.test.tsx | 38 ++++++++++++++++++- src/app/hooks/timeline/useTimelineSync.ts | 28 +++++++++++--- 2 files changed, 59 insertions(+), 7 deletions(-) diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index d53d74143..1f44e6275 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -106,8 +106,8 @@ describe('useTimelineSync', () => { expect(scrollToBottom).not.toHaveBeenCalled(); }); - it('keeps a bottom-pinned user anchored after TimelineReset', async () => { - const { room, timelineSet } = createRoom(); + it('keeps a bottom-pinned user anchored after destructive TimelineReset', async () => { + const { room, timelineSet } = createRoom('!room:test', [{ getId: () => 'event-before' }]); const scrollToBottom = vi.fn(); renderHook(() => @@ -124,6 +124,10 @@ describe('useTimelineSync', () => { }) ); + // Replace with a new timeline object with a new last event (destructive reset) + const newTimeline = createTimeline([{ getId: () => 'event-after' }]); + timelineSet.getLiveTimeline = () => newTimeline as never; + await act(async () => { timelineSet.emit(RoomEvent.TimelineReset); await Promise.resolve(); @@ -132,6 +136,36 @@ describe('useTimelineSync', () => { expect(scrollToBottom).toHaveBeenCalledWith('instant'); }); + it('does not scroll after additive TimelineReset (same last event, new container)', async () => { + const { room, timelineSet } = createRoom('!room:test', [{ getId: () => 'same-event' }]); + const scrollToBottom = vi.fn(); + + renderHook(() => + useTimelineSync({ + room: room as Room, + mx: { getUserId: () => '@alice:test' } as never, + isAtBottom: true, + isAtBottomRef: { current: true }, + scrollToBottom, + unreadInfo: undefined, + setUnreadInfo: vi.fn(), + hideReadsRef: { current: false }, + readUptoEventIdRef: { current: undefined }, + }) + ); + + // Replace with a new timeline object but same last event ID (additive/structural reset) + const newTimeline = createTimeline([{ getId: () => 'same-event' }]); + timelineSet.getLiveTimeline = () => newTimeline as never; + + await act(async () => { + timelineSet.emit(RoomEvent.TimelineReset); + await Promise.resolve(); + }); + + expect(scrollToBottom).not.toHaveBeenCalled(); + }); + it('resets timeline state when room.roomId changes and eventId is not set', async () => { const roomOne = createRoom('!room:one'); const roomTwo = createRoom('!room:two'); diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 51c85dda8..e46dcb32e 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -387,6 +387,9 @@ export function useTimelineSync({ const resetAutoScrollPendingRef = useRef(false); + const timelineRef = useRef(timeline); + timelineRef.current = timeline; + const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines); const liveTimelineLinked = timeline.linkedTimelines.at(-1) === getLiveTimeline(room); @@ -524,12 +527,27 @@ export function useTimelineSync({ useLiveTimelineRefresh( room, useCallback(() => { - const wasAtBottom = isAtBottomRef.current; - resetAutoScrollPendingRef.current = wasAtBottom; - setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - if (wasAtBottom) { - scrollToBottom('instant'); + const newLinked = getInitialTimeline(room).linkedTimelines; + const prev = timelineRef.current.linkedTimelines; + if (prev.length === newLinked.length && prev.every((tl, i) => tl === newLinked[i])) { + return; + } + // Only trigger the auto-scroll reset for destructive resets where the + // live-end event changed (e.g. reconnect). Sliding sync fires TimelineReset + // to replace the EventTimeline container while keeping the same live-end + // events — treating that as destructive would scroll the user unnecessarily. + const prevLastEventId = prev.at(-1)?.getEvents().at(-1)?.getId(); + const newLastEventId = newLinked.at(-1)?.getEvents().at(-1)?.getId(); + const isDestructive = prevLastEventId !== newLastEventId; + + if (isDestructive) { + const wasAtBottom = isAtBottomRef.current; + resetAutoScrollPendingRef.current = wasAtBottom; + if (wasAtBottom) { + scrollToBottom('instant'); + } } + setTimeline({ linkedTimelines: newLinked }); }, [room, isAtBottomRef, scrollToBottom]) ); From 131fe1ccc37a9dd6878df50a5d3b173a7855816b Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 17 Apr 2026 18:42:14 -0400 Subject: [PATCH 188/253] fix(timeline): guard cache restore, unread dots, and jump scroll-back - Guard cache-restore against empty processedEvents to prevent flash on room re-entry (defer to pendingReady recovery instead of revealing an empty VList) - Update pendingReady recovery to respect saved scroll position when restoring from cache - Add focusItem guard to handleVListScroll so jump transitions do not incorrectly flip atBottom during scrollToIndex - Reset lastScrolledAtEventsLengthRef on jump so auto-scroll watcher does not snap back to bottom after event timeline load - Remove aggressive no-receipt unread fallback in getUnreadInfo that showed false dots for sliding-sync rooms without local read receipts Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 39 +++++++++++++++++++---- src/app/hooks/timeline/useTimelineSync.ts | 14 +++++--- src/app/utils/room.ts | 25 --------------- 3 files changed, 42 insertions(+), 36 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index d9b61798e..6fd8b6cf5 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -371,12 +371,19 @@ export function RoomTimeline({ if (savedCache) { // Revisiting a room with a cached scroll state — restore position // immediately and skip the 80 ms stabilisation timer entirely. - if (savedCache.atBottom) { - vListRef.current.scrollTo(vListRef.current.scrollSize); + // Guard: only reveal when processedEvents are populated. If they're + // still empty (React hasn't yet processed the new timeline), defer + // to the pendingReady recovery path which runs on the next render. + if (processedEventsRef.current.length === 0) { + pendingReadyRef.current = true; } else { - vListRef.current.scrollTo(savedCache.scrollOffset); + if (savedCache.atBottom) { + vListRef.current.scrollTo(vListRef.current.scrollSize); + } else { + vListRef.current.scrollTo(savedCache.scrollOffset); + } + setIsReady(true); } - setIsReady(true); } else { // First visit — scroll to bottom, then wait 80 ms for VList to finish // measuring item heights before revealing the timeline. @@ -862,6 +869,12 @@ export function RoomTimeline({ // upstream doesn't have, producing visible layout churn after isReady. if (!isReadyRef.current) return; + // While a jump is in progress (focusItem set), VList fires scroll events + // from scrollToIndex that can incorrectly flip atBottom=true — especially + // if the target happens to be near the end. Ignore scroll-position + // updates until the jump transition finishes and focusItem is cleared. + if (timelineSyncRef.current.focusItem) return; + if (atBottomRef.current && !isNowAtBottom && contentGrew) { v.scrollTo(v.scrollSize); return; @@ -1016,14 +1029,28 @@ export function RoomTimeline({ if (!pendingReadyRef.current) return; if (processedEvents.length === 0) return; pendingReadyRef.current = false; - vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); + + // If there's a cached scroll state (deferred from the initial-scroll + // path because processedEvents weren't ready yet), restore that position + // instead of blindly scrolling to bottom. + const savedCache = scrollCacheForRoomRef.current; + if (savedCache) { + if (savedCache.atBottom) { + vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); + } else { + vListRef.current?.scrollTo(savedCache.scrollOffset); + } + } else { + vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); + } + // Save now so the next visit skips the timer. const v = vListRef.current; if (v) { roomScrollCache.save(mxUserId, room.roomId, { cache: v.cache, scrollOffset: v.scrollOffset, - atBottom: true, + atBottom: savedCache?.atBottom ?? true, }); } setIsReady(true); diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 15f307dca..a7570a33c 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -453,6 +453,11 @@ export function useTimelineSync({ } }, [eventsLength, liveTimelineLinked, isAtBottom]); + const lastScrolledAtEventsLengthRef = useRef(eventsLength); + + const eventsLengthRef = useRef(eventsLength); + eventsLengthRef.current = eventsLength; + const loadEventTimeline = useEventTimelineLoader( mx, room, @@ -462,6 +467,10 @@ export function useTimelineSync({ setTimeline({ linkedTimelines: lTimelines }); + // Sync the auto-scroll ref so the eventsLength watcher doesn't see a + // delta and immediately scroll-to-bottom after the jump lands. + lastScrolledAtEventsLengthRef.current = getTimelinesEventsCount(lTimelines); + setFocusItem({ index: evtAbsIndex, scrollTo: true, @@ -477,11 +486,6 @@ export function useTimelineSync({ }, [alive, room, scrollToBottom]) ); - const lastScrolledAtEventsLengthRef = useRef(eventsLength); - - const eventsLengthRef = useRef(eventsLength); - eventsLengthRef.current = eventsLength; - useLiveEventArrive( room, useCallback( diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts index d7a36b338..3cebdb5c6 100644 --- a/src/app/utils/room.ts +++ b/src/app/utils/room.ts @@ -356,31 +356,6 @@ export const getUnreadInfo = (room: Room, options?: UnreadInfoOptions): UnreadIn } } - // Sliding sync limitation: unvisited rooms don't have read receipt data, but may have - // timeline activity. Check for notification events from others in the timeline to show a - // badge even when SDK counts are 0 (or unreliable without receipts). - if (userId) { - const readUpToId = room.getEventReadUpTo(userId); - - // If we have no read receipt, SDK counts may be unreliable. Always check timeline. - if (!readUpToId) { - const liveEvents = room.getLiveTimeline().getEvents(); - - const hasActivity = liveEvents.some( - (event) => event.getSender() !== userId && isNotificationEvent(event, room, userId) - ); - - if (hasActivity) { - // If SDK already has counts, use those. Otherwise show dot badge (count=1). - if (total === 0 && highlight === 0) { - return { roomId: room.roomId, highlight: 0, total: 1 }; - } - // SDK has counts but no receipt - trust the counts and show them - return { roomId: room.roomId, highlight, total }; - } - } - } - // For DMs with Default or AllMessages notification type: if there are unread messages, // ensure we show a notification badge (treat as highlight for badge color purposes). // This handles cases where push rules don't properly match (e.g., classic sync with From 4e4d3689028255bb8282b0c20e6f25628f6d771d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 17 Apr 2026 23:37:57 -0400 Subject: [PATCH 189/253] fix(timeline): prevent double-render and content-chase flash - Guard blanked effect against SDK live timeline having events (prevents skeleton re-arm during transient React state lag) - Defer content-chase scroll via requestAnimationFrame to prevent cascading scroll events when images/embeds load - Skip timeline update in useLiveTimelineRefresh microtask when SDK timeline is still empty (avoids partial state) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 15 +++++++++++++-- src/app/hooks/timeline/useTimelineSync.ts | 8 +++++++- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 6fd8b6cf5..5905a9dac 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -445,10 +445,15 @@ export function RoomTimeline({ useLayoutEffect(() => { if (!isReady) return; if (timelineSync.eventsLength > 0) return; + // The SDK may have already added events to the new timeline but React state + // hasn't caught up yet (e.g. useLiveTimelineRefresh deferred via microtask). + // Check the SDK's live timeline directly before blanking to avoid a double + // skeleton cycle (skeleton→content→blank→skeleton→content). + if (room.getLiveTimeline().getEvents().length > 0) return; setIsReady(false); readyBlockedByPaginationRef.current = false; hasInitialScrolledRef.current = false; - }, [isReady, timelineSync.eventsLength]); + }, [isReady, timelineSync.eventsLength, room]); // When a genuine TimelineReset replaces the timeline chain (new // EventTimeline objects from the SDK), hide content behind opacity 0 and @@ -876,7 +881,13 @@ export function RoomTimeline({ if (timelineSyncRef.current.focusItem) return; if (atBottomRef.current && !isNowAtBottom && contentGrew) { - v.scrollTo(v.scrollSize); + // Defer the chase to the next animation frame so VList finishes its + // current layout pass. Synchronous scrollTo causes cascading scroll + // events that produce visible jumps when images/embeds load. + requestAnimationFrame(() => { + const vl = vListRef.current; + if (vl && atBottomRef.current) vl.scrollTo(vl.scrollSize); + }); return; } diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index a7570a33c..d08093324 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -571,7 +571,13 @@ export function useTimelineSync({ // effect, which would hide the content and cause a visible flash. if (getTimelinesEventsCount(newLinked) === 0 && getTimelinesEventsCount(prev) > 0) { Promise.resolve().then(() => { - applyUpdate(getInitialTimeline(room).linkedTimelines); + const refreshed = getInitialTimeline(room).linkedTimelines; + // If still empty after the microtask, the SDK may need more time. + // Skip the update — the blanked effect checks the SDK's live timeline + // directly and won't blank while the room genuinely has events. + if (getTimelinesEventsCount(refreshed) > 0) { + applyUpdate(refreshed); + } }); return; } From 7579368db1f98508c28c8d2d84b24e74a45929a5 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 17 Apr 2026 23:43:28 -0400 Subject: [PATCH 190/253] perf(sidebar): debounce room preview and DM sort updates - Debounce useRoomLastMessage update handler (300ms) to avoid re-rendering every room preview on each timeline event - Debounce Direct.tsx activityCounter (500ms) to batch DM list re-sorts during rapid event bursts (reactions, edits, etc.) - Update test to account for debounced update timing Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/useRoomLastMessage.test.tsx | 8 +++++++- src/app/hooks/useRoomLastMessage.ts | 16 ++++++++++++---- src/app/pages/client/direct/Direct.tsx | 11 +++++++---- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/src/app/hooks/useRoomLastMessage.test.tsx b/src/app/hooks/useRoomLastMessage.test.tsx index a049a8e3f..2e4b725a3 100644 --- a/src/app/hooks/useRoomLastMessage.test.tsx +++ b/src/app/hooks/useRoomLastMessage.test.tsx @@ -259,13 +259,13 @@ describe('useRoomLastMessage', () => { }); it('updates when a Timeline event fires', () => { + vi.useFakeTimers(); const ev1 = makeEvent({ content: { msgtype: 'm.text', body: 'first' } }); const events = [ev1]; const room = makeRoom(events); const mx = makeMx(); const { result } = renderHook(() => useRoomLastMessage(room as never, mx as never)); - expect(result.current).toBe('You: first'); // Simulate a new message arriving. const ev2 = makeEvent({ content: { msgtype: 'm.text', body: 'second' } }); @@ -276,6 +276,12 @@ describe('useRoomLastMessage', () => { timelineHandlers.forEach((h) => h()); }); + // The update is debounced — advance past the 300ms timer. + act(() => { + vi.advanceTimersByTime(350); + }); + expect(result.current).toBe('You: second'); + vi.useRealTimers(); }); }); diff --git a/src/app/hooks/useRoomLastMessage.ts b/src/app/hooks/useRoomLastMessage.ts index 04dc4fd9b..e40daf938 100644 --- a/src/app/hooks/useRoomLastMessage.ts +++ b/src/app/hooks/useRoomLastMessage.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { MatrixClient, MatrixEvent, @@ -90,8 +90,7 @@ export function getLastMessageText(room: Room, mx: MatrixClient): string | undef if (senderId === mx.getUserId()) { prefix = 'You'; } else { - prefix = - room.getMember(senderId ?? '')?.name ?? displayNameFromMxid(senderId ?? 'Unknown'); + prefix = room.getMember(senderId ?? '')?.name ?? displayNameFromMxid(senderId ?? 'Unknown'); } return `${prefix}: ${text}`; } @@ -111,13 +110,21 @@ export function useRoomLastMessage( room && mx ? getLastMessageText(room, mx) : undefined ); + // Debounce timer ref — cleared on unmount and room change. + const debounceRef = useRef | undefined>(undefined); + useEffect(() => { if (!room || !mx) { setText(undefined); return undefined; } - const update = () => setText(getLastMessageText(room, mx)); + const update = () => { + clearTimeout(debounceRef.current); + debounceRef.current = setTimeout(() => { + setText(getLastMessageText(room, mx)); + }, 300); + }; // Subscribe before reading to close the race window: any decryption that // completes after this point will trigger an update via the listener. @@ -145,6 +152,7 @@ export function useRoomLastMessage( } return () => { + clearTimeout(debounceRef.current); room.off(RoomEventEnum.Timeline, update); room.off(RoomEventEnum.LocalEchoUpdated, update); mx.off(MatrixEventEvent.Decrypted, onDecrypted); diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx index 3b78f43aa..7bf4d153b 100644 --- a/src/app/pages/client/direct/Direct.tsx +++ b/src/app/pages/client/direct/Direct.tsx @@ -187,16 +187,18 @@ export function Direct() { const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom()); // Track timeline activity to trigger re-sorting when messages arrive. - // Without this, DMs only re-sort when you switch rooms because getLastActiveTimestamp() - // is internal SDK state not tracked by React dependencies. + // Debounced to prevent excessive re-renders on rapid events (reactions, edits, etc.). const [activityCounter, setActivityCounter] = useState(0); const directsSetRef = useRef(directs); + const activityTimerRef = useRef | undefined>(undefined); directsSetRef.current = directs; useEffect(() => { const handleTimeline = () => { - // Increment counter to trigger re-sort when any timeline event happens - setActivityCounter((prev) => prev + 1); + clearTimeout(activityTimerRef.current); + activityTimerRef.current = setTimeout(() => { + setActivityCounter((prev) => prev + 1); + }, 500); }; // Listen to timeline events only for direct message rooms @@ -206,6 +208,7 @@ export function Direct() { }); return () => { + clearTimeout(activityTimerRef.current); directsSetRef.current.forEach((roomId) => { const room = mx.getRoom(roomId); room?.off(RoomEvent.Timeline, handleTimeline); From f9c5b4d63c6cd58ea46c96ca18f10daaf3f87465 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 19:19:59 -0400 Subject: [PATCH 191/253] fix(timeline): restore room-open position and dedupe overlap --- src/app/features/room/RoomTimeline.tsx | 23 +++++++++++-------- .../timeline/useProcessedTimeline.test.ts | 16 +++++++++++++ .../hooks/timeline/useProcessedTimeline.ts | 8 +++++++ 3 files changed, 38 insertions(+), 9 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 5905a9dac..76b495a5d 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -172,6 +172,8 @@ export function RoomTimeline({ }: Readonly) { const mx = useMatrixClient(); const mxUserId = mx.getUserId()!; + const initialUnreadInfo = getRoomUnreadInfo(room, true); + const initialScrollCache = roomScrollCache.load(mxUserId, room.roomId); const alive = useAlive(); const { editId, handleEdit } = useMessageEdit(editor, { onReset: onEditorReset, alive }); @@ -218,7 +220,7 @@ export function RoomTimeline({ return myPowerLevel < sendLevel; }, [powerLevels, mx]); - const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true)); + const [unreadInfo, setUnreadInfo] = useState(initialUnreadInfo); const readUptoEventIdRef = useRef(undefined); if (unreadInfo) readUptoEventIdRef.current = unreadInfo.readUptoEventId; @@ -250,10 +252,10 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - const scrollCacheForRoomRef = useRef( - roomScrollCache.load(mxUserId, room.roomId) + const scrollCacheForRoomRef = useRef(initialScrollCache); + const [atBottomState, setAtBottomState] = useState( + eventId ? false : (initialScrollCache?.atBottom ?? !initialUnreadInfo?.scrollTo) ); - const [atBottomState, setAtBottomState] = useState(!eventId); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { setAtBottomState(val); @@ -284,9 +286,11 @@ export function RoomTimeline({ isReadyRef.current = isReady; if (currentRoomIdRef.current !== room.roomId) { + const nextScrollCache = roomScrollCache.load(mxUserId, room.roomId); + const nextUnreadInfo = getRoomUnreadInfo(room, true); // Load incoming room's scroll cache (undefined for first-visit rooms). // Covers the rare case where room prop changes without a remount. - scrollCacheForRoomRef.current = roomScrollCache.load(mxUserId, room.roomId); + scrollCacheForRoomRef.current = nextScrollCache; hasInitialScrolledRef.current = false; currentRoomIdRef.current = room.roomId; @@ -298,11 +302,11 @@ export function RoomTimeline({ } setIsReady(false); // Reset per-room scroll/layout state so the new room starts clean. - setAtBottom(true); + setAtBottom(eventId ? false : (nextScrollCache?.atBottom ?? !nextUnreadInfo?.scrollTo)); setShift(false); setTopSpacerHeight(0); topSpacerHeightRef.current = 0; - setUnreadInfo(getRoomUnreadInfo(room, true)); + setUnreadInfo(nextUnreadInfo); } const processedEventsRef = useRef([]); @@ -612,6 +616,7 @@ export function RoomTimeline({ : undefined; if (absoluteIndex !== undefined) { + setAtBottom(false); const processedIndex = getRawIndexToProcessedIndex(absoluteIndex); if (processedIndex !== undefined && vListRef.current) { vListRef.current.scrollToIndex(processedIndex, { align: 'start' }); @@ -630,6 +635,7 @@ export function RoomTimeline({ eventId, isReady, getRawIndexToProcessedIndex, + setAtBottom, ]); useEffect(() => { @@ -1194,7 +1200,6 @@ export function RoomTimeline({ data={processedEvents} cache={!eventId ? scrollCacheForRoomRef.current?.cache : undefined} shift={shift} - itemSize={80} className={css.messageList} style={{ flex: 1, @@ -1297,7 +1302,7 @@ export function RoomTimeline({ } return ( - + {dividers} {renderedEvent} diff --git a/src/app/hooks/timeline/useProcessedTimeline.test.ts b/src/app/hooks/timeline/useProcessedTimeline.test.ts index cc6f00072..abd1f2244 100644 --- a/src/app/hooks/timeline/useProcessedTimeline.test.ts +++ b/src/app/hooks/timeline/useProcessedTimeline.test.ts @@ -287,4 +287,20 @@ describe('useProcessedTimeline', () => { expect(result.current[1].willRenderDayDivider).toBe(true); }); + + it('deduplicates overlapping event IDs across linked timelines', () => { + const shared = makeEvent('$shared', { ts: 2_000 }); + const earlier = makeEvent('$earlier', { ts: 1_000 }); + const later = makeEvent('$later', { ts: 3_000 }); + + const { result } = renderHook(() => + useProcessedTimeline({ + ...defaults, + items: makeItems(4), + linkedTimelines: [makeTimeline([earlier, shared]), makeTimeline([shared, later])], + }) + ); + + expect(result.current.map((event) => event.id)).toEqual(['$earlier', '$shared', '$later']); + }); }); diff --git a/src/app/hooks/timeline/useProcessedTimeline.ts b/src/app/hooks/timeline/useProcessedTimeline.ts index f37197309..e898d77a4 100644 --- a/src/app/hooks/timeline/useProcessedTimeline.ts +++ b/src/app/hooks/timeline/useProcessedTimeline.ts @@ -93,6 +93,7 @@ export function useProcessedTimeline({ const isMutation = mutationVersion !== prevMutationVersionRef.current; prevMutationVersionRef.current = mutationVersion; const prevCache = isMutation ? null : stableRefsCache.current; + const seenRenderedEventIds = new Set(); let prevEvent: MatrixEvent | undefined; let isPrevRendered = false; @@ -158,6 +159,13 @@ export function useProcessedTimeline({ const isReactionOrEdit = reactionOrEditEvent(mEvent); if (isReactionOrEdit) return acc; + // Sliding-sync timeline resets and overlapping linked timelines can + // transiently surface the same event twice. Rendering duplicate event IDs + // causes unstable React keys and visible timeline artifacts, so keep the + // first visible occurrence only. + if (seenRenderedEventIds.has(mEventId)) return acc; + seenRenderedEventIds.add(mEventId); + if (!newDivider && readUptoEventId) { const prevId = prevEvent ? prevEvent.getId() : undefined; newDivider = prevId === readUptoEventId; From 399c7cbf6e61edb77ed6a71db75c870fea2bce50 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 19:41:03 -0400 Subject: [PATCH 192/253] chore(timeline): clean reveal comment --- src/app/features/room/RoomTimeline.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 76b495a5d..bb311c2e9 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -459,12 +459,9 @@ export function RoomTimeline({ hasInitialScrolledRef.current = false; }, [isReady, timelineSync.eventsLength, room]); - // When a genuine TimelineReset replaces the timeline chain (new - // EventTimeline objects from the SDK), hide content behind opacity 0 and - // re-arm the initial-scroll so the new data renders invisibly, gets - // measured, and only then becomes visible — preventing a visible flash. + // Reveal the timeline once backward pagination has settled and the viewport is // filled. This handles the case where the 80 ms timer fired before sliding sync - // had delivered enough events to fill the screen (readyBlockedByPaginationRef=true). + // had delivered enough events to fill the screen. useLayoutEffect(() => { if (!readyBlockedByPaginationRef.current) return; if (timelineSync.backwardStatus === 'loading') return; From f8986c14acda013f4e29318f178c8b2c5e65af64 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 19:41:03 -0400 Subject: [PATCH 193/253] fix(preview): resolve display names in room previews --- src/app/hooks/useRoomLastMessage.test.tsx | 9 ++++++++- src/app/hooks/useRoomLastMessage.ts | 4 +++- src/client/slidingSync.ts | 16 +++++++++++----- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/app/hooks/useRoomLastMessage.test.tsx b/src/app/hooks/useRoomLastMessage.test.tsx index 2e4b725a3..f8cc9d528 100644 --- a/src/app/hooks/useRoomLastMessage.test.tsx +++ b/src/app/hooks/useRoomLastMessage.test.tsx @@ -181,7 +181,8 @@ describe('getLastMessageText', () => { getLiveTimeline: () => ({ getEvents: () => events, }), - getMember: (id: string) => (members?.[id] ? { name: members[id] } : null), + getMember: (id: string) => + members?.[id] ? { name: members[id], rawDisplayName: members[id] } : null, }) as never; it('returns "You: text" when the sender is the current user', () => { @@ -201,6 +202,12 @@ describe('getLastMessageText', () => { expect(getLastMessageText(room, makeMx())).toBe('bob: hey'); }); + it('falls back to localpart when member is loaded but has no display name', () => { + const ev = makeEvent({ sender: '@bob:test', content: { msgtype: 'm.text', body: 'hey' } }); + const room = makeRoom([ev], { '@bob:test': '@bob:test' }); + expect(getLastMessageText(room, makeMx())).toBe('bob: hey'); + }); + it('skips reactions and picks the last real message', () => { const msg = makeEvent({ content: { msgtype: 'm.text', body: 'real' } }); const reaction = makeEvent({ type: 'm.reaction', content: {} }); diff --git a/src/app/hooks/useRoomLastMessage.ts b/src/app/hooks/useRoomLastMessage.ts index e40daf938..92b4c3128 100644 --- a/src/app/hooks/useRoomLastMessage.ts +++ b/src/app/hooks/useRoomLastMessage.ts @@ -8,6 +8,7 @@ import { RoomEvent as RoomEventEnum, } from '$types/matrix-sdk'; import { MessageEvent } from '$types/matrix/room'; +import { getMemberDisplayName } from '$utils/room'; /** * Strip the legacy reply fallback (lines starting with `> `) that some @@ -90,7 +91,8 @@ export function getLastMessageText(room: Room, mx: MatrixClient): string | undef if (senderId === mx.getUserId()) { prefix = 'You'; } else { - prefix = room.getMember(senderId ?? '')?.name ?? displayNameFromMxid(senderId ?? 'Unknown'); + prefix = + getMemberDisplayName(room, senderId ?? '') ?? displayNameFromMxid(senderId ?? 'Unknown'); } return `${prefix}: ${text}`; } diff --git a/src/client/slidingSync.ts b/src/client/slidingSync.ts index d7acfb35f..a55bdedff 100644 --- a/src/client/slidingSync.ts +++ b/src/client/slidingSync.ts @@ -97,8 +97,11 @@ const clampPositive = (value: number | undefined, fallback: number): number => { // Notes: // - RoomName/RoomCanonicalAlias are omitted: sliding sync returns the room name as a // top-level field in every list response, so fetching them as state events is redundant. -// - MSC3575_STATE_KEY_LAZY is omitted: lazy-loading members is only needed when the -// user is actively viewing a room; loading them for every list entry wastes bandwidth. +// - MSC3575_STATE_KEY_LAZY is included only when `includeMembers=true` (i.e. when +// message previews are enabled and listTimelineLimit > 0). Lazy loading brings in +// m.room.member state events for senders of the preview timeline events so that +// display names resolve correctly. When previews are disabled, lazy loading is +// omitted to avoid wasteful member fetches for every list entry. // - SpaceChild with wildcard is required: the roomToParents atom reads m.space.child // state events (one per child, keyed by child room ID) to build the space hierarchy. // Without these events the SDK has no parent→child mapping, so all rooms appear as @@ -116,7 +119,9 @@ const clampPositive = (value: number | undefined, fallback: number): number => { // for non-active rooms — notification serverName extraction, mention autocomplete // alias display, and getCanonicalAliasOrRoomId for navigation. Without it, aliases // fall back silently to room IDs. -const buildListRequiredState = (): MSC3575RoomSubscription['required_state'] => [ +const buildListRequiredState = ( + includeMembers: boolean +): MSC3575RoomSubscription['required_state'] => [ [EventType.RoomJoinRules, ''], [EventType.RoomAvatar, ''], [EventType.RoomTombstone, ''], @@ -125,6 +130,7 @@ const buildListRequiredState = (): MSC3575RoomSubscription['required_state'] => [EventType.RoomTopic, ''], [EventType.RoomCanonicalAlias, ''], [EventType.RoomMember, MSC3575_STATE_KEY_ME], + ...(includeMembers ? [[EventType.RoomMember, MSC3575_STATE_KEY_LAZY] as [string, string]] : []), ['m.space.child', MSC3575_WILDCARD], ['im.ponies.room_emotes', MSC3575_WILDCARD], ['moe.sable.room.abbreviations', ''], @@ -153,7 +159,7 @@ const buildLists = ( listTimelineLimit: number ): Map => { const lists = new Map(); - const listRequiredState = buildListRequiredState(); + const listRequiredState = buildListRequiredState(listTimelineLimit > 0); // Start with a reasonable initial range that will quickly expand to full list // Since timeline_limit=1, loading many rooms is very cheap @@ -728,7 +734,7 @@ export class SlidingSyncManager { ranges: [[0, 20]], sort: LIST_SORT_ORDER, timeline_limit: this.listTimelineLimit, - required_state: buildListRequiredState(), + required_state: buildListRequiredState(this.listTimelineLimit > 0), ...updateArgs, }; } else { From 78cdd244d342351e6b08fac2eb5c0377c894785f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 20:21:13 -0400 Subject: [PATCH 194/253] fix(timeline): invalidate stale room scroll cache --- src/app/features/room/RoomTimeline.tsx | 69 ++++++++++++++++---------- src/app/utils/roomScrollCache.test.ts | 64 +++++++++++++++++++++--- src/app/utils/roomScrollCache.ts | 21 +++++++- src/app/utils/timeline.ts | 12 +++++ 4 files changed, 130 insertions(+), 36 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index bb311c2e9..325803e6f 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -74,6 +74,7 @@ import { getFirstLinkedTimeline, getInitialTimeline, getEventIdAbsoluteIndex, + getTimelineHeadEventIds, } from '$utils/timeline'; import { useTimelineSync } from '$hooks/timeline/useTimelineSync'; import { useTimelineActions } from '$hooks/timeline/useTimelineActions'; @@ -173,7 +174,12 @@ export function RoomTimeline({ const mx = useMatrixClient(); const mxUserId = mx.getUserId()!; const initialUnreadInfo = getRoomUnreadInfo(room, true); - const initialScrollCache = roomScrollCache.load(mxUserId, room.roomId); + const initialTimelineHeadEventIds = eventId + ? [] + : getTimelineHeadEventIds(getInitialTimeline(room).linkedTimelines); + const initialScrollCache = eventId + ? undefined + : roomScrollCache.load(mxUserId, room.roomId, initialTimelineHeadEventIds); const alive = useAlive(); const { editId, handleEdit } = useMessageEdit(editor, { onReset: onEditorReset, alive }); @@ -286,7 +292,13 @@ export function RoomTimeline({ isReadyRef.current = isReady; if (currentRoomIdRef.current !== room.roomId) { - const nextScrollCache = roomScrollCache.load(mxUserId, room.roomId); + const nextInitialTimeline = eventId ? undefined : getInitialTimeline(room); + const nextTimelineHeadEventIds = nextInitialTimeline + ? getTimelineHeadEventIds(nextInitialTimeline.linkedTimelines) + : []; + const nextScrollCache = eventId + ? undefined + : roomScrollCache.load(mxUserId, room.roomId, nextTimelineHeadEventIds); const nextUnreadInfo = getRoomUnreadInfo(room, true); // Load incoming room's scroll cache (undefined for first-visit rooms). // Covers the rare case where room prop changes without a remount. @@ -312,6 +324,20 @@ export function RoomTimeline({ const processedEventsRef = useRef([]); const timelineSyncRef = useRef(null as unknown as typeof timelineSync); + const saveRoomScrollState = useCallback( + (cache: RoomScrollCache['cache'], scrollOffset: number, atBottom: boolean) => { + if (eventId) return; + + roomScrollCache.save(mxUserId, room.roomId, { + cache, + scrollOffset, + atBottom, + headEventIds: getTimelineHeadEventIds(timelineSyncRef.current.timeline.linkedTimelines), + }); + }, + [eventId, mxUserId, room.roomId] + ); + const scrollToBottom = useCallback(() => { if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; @@ -416,11 +442,7 @@ export function RoomTimeline({ // Persist the now-measured item heights so the next visit to this room // can provide them to VList upfront and skip this 80 ms wait entirely. if (v) { - roomScrollCache.save(mxUserId, room.roomId, { - cache: v.cache, - scrollOffset: v.scrollOffset, - atBottom: true, - }); + saveRoomScrollState(v.cache, v.scrollOffset, true); } setIsReady(true); } else { @@ -431,7 +453,13 @@ export function RoomTimeline({ } // No cleanup return — the timer must survive eventsLength fluctuations. // It is cancelled on unmount by the dedicated effect below. - }, [timelineSync.eventsLength, timelineSync.liveTimelineLinked, eventId, room.roomId, mxUserId]); + }, [ + timelineSync.eventsLength, + timelineSync.liveTimelineLinked, + eventId, + room.roomId, + saveRoomScrollState, + ]); // Cancel the initial-scroll timer on unmount (the useLayoutEffect above // intentionally does not cancel it when deps change). @@ -471,18 +499,13 @@ export function RoomTimeline({ if (canPaginateBackRef.current && v.scrollSize <= v.viewportSize + 100) return; readyBlockedByPaginationRef.current = false; v.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); - roomScrollCache.save(mxUserId, room.roomId, { - cache: v.cache, - scrollOffset: v.scrollOffset, - atBottom: true, - }); + saveRoomScrollState(v.cache, v.scrollOffset, true); setIsReady(true); }, [ timelineSync.backwardStatus, timelineSync.eventsLength, timelineSync.canPaginateBack, - mxUserId, - room.roomId, + saveRoomScrollState, ]); const recalcTopSpacer = useCallback(() => { @@ -905,11 +928,7 @@ export function RoomTimeline({ // live-timeline visit, producing stale VList measurements and making the // room appear to be at the wrong position (or visually empty) on re-entry. if (!eventId) { - roomScrollCache.save(mxUserId, room.roomId, { - cache: v.cache, - scrollOffset: offset, - atBottom: isNowAtBottom, - }); + saveRoomScrollState(v.cache, offset, isNowAtBottom); } if (offset < 500 && canPaginateBackRef.current && backwardStatusRef.current === 'idle') { @@ -923,7 +942,7 @@ export function RoomTimeline({ timelineSyncRef.current.handleTimelinePagination(false); } }, - [setAtBottom, room.roomId, eventId, mxUserId] + [eventId, saveRoomScrollState, setAtBottom] ); const showLoadingPlaceholders = @@ -1061,14 +1080,10 @@ export function RoomTimeline({ // Save now so the next visit skips the timer. const v = vListRef.current; if (v) { - roomScrollCache.save(mxUserId, room.roomId, { - cache: v.cache, - scrollOffset: v.scrollOffset, - atBottom: savedCache?.atBottom ?? true, - }); + saveRoomScrollState(v.cache, v.scrollOffset, savedCache?.atBottom ?? true); } setIsReady(true); - }, [processedEvents.length, room.roomId, mxUserId]); + }, [processedEvents.length, saveRoomScrollState]); useEffect(() => { if (!onEditLastMessageRef) return; diff --git a/src/app/utils/roomScrollCache.test.ts b/src/app/utils/roomScrollCache.test.ts index 039bc634e..784c59fc4 100644 --- a/src/app/utils/roomScrollCache.test.ts +++ b/src/app/utils/roomScrollCache.test.ts @@ -11,22 +11,47 @@ describe('roomScrollCache', () => { }); it('stores and retrieves data for a roomId', () => { - const data = { cache: fakeCache(), scrollOffset: 120, atBottom: false }; + const data = { + cache: fakeCache(), + scrollOffset: 120, + atBottom: false, + headEventIds: ['$a', '$b'], + }; roomScrollCache.save(userId, '!room1:test', data); expect(roomScrollCache.load(userId, '!room1:test')).toBe(data); }); it('overwrites existing data when saved again for the same roomId', () => { - const first = { cache: fakeCache(), scrollOffset: 50, atBottom: true }; - const second = { cache: fakeCache(), scrollOffset: 200, atBottom: false }; + const first = { + cache: fakeCache(), + scrollOffset: 50, + atBottom: true, + headEventIds: ['$a', '$b'], + }; + const second = { + cache: fakeCache(), + scrollOffset: 200, + atBottom: false, + headEventIds: ['$c', '$d'], + }; roomScrollCache.save(userId, '!room2:test', first); roomScrollCache.save(userId, '!room2:test', second); expect(roomScrollCache.load(userId, '!room2:test')).toBe(second); }); it('keeps data for separate rooms independent', () => { - const a = { cache: fakeCache(), scrollOffset: 10, atBottom: true }; - const b = { cache: fakeCache(), scrollOffset: 20, atBottom: false }; + const a = { + cache: fakeCache(), + scrollOffset: 10, + atBottom: true, + headEventIds: ['$a'], + }; + const b = { + cache: fakeCache(), + scrollOffset: 20, + atBottom: false, + headEventIds: ['$b'], + }; roomScrollCache.save(userId, '!roomA:test', a); roomScrollCache.save(userId, '!roomB:test', b); expect(roomScrollCache.load(userId, '!roomA:test')).toBe(a); @@ -34,11 +59,36 @@ describe('roomScrollCache', () => { }); it('scopes data per userId', () => { - const data1 = { cache: fakeCache(), scrollOffset: 100, atBottom: true }; - const data2 = { cache: fakeCache(), scrollOffset: 200, atBottom: false }; + const data1 = { + cache: fakeCache(), + scrollOffset: 100, + atBottom: true, + headEventIds: ['$a'], + }; + const data2 = { + cache: fakeCache(), + scrollOffset: 200, + atBottom: false, + headEventIds: ['$b'], + }; roomScrollCache.save('@alice:test', '!room:test', data1); roomScrollCache.save('@bob:test', '!room:test', data2); expect(roomScrollCache.load('@alice:test', '!room:test')).toBe(data1); expect(roomScrollCache.load('@bob:test', '!room:test')).toBe(data2); }); + + it('invalidates a cache when the current timeline head changes', () => { + const data = { + cache: fakeCache(), + scrollOffset: 120, + atBottom: false, + headEventIds: ['$a', '$b', '$c'], + }; + roomScrollCache.save(userId, '!room3:test', data); + + expect(roomScrollCache.load(userId, '!room3:test', ['$a', '$b', '$c', '$d'])).toBe(data); + expect(roomScrollCache.load(userId, '!room3:test', ['$x', '$a', '$b', '$c'])).toBeUndefined(); + expect(roomScrollCache.load(userId, '!room3:test', ['$a', '$x', '$c', '$d'])).toBeUndefined(); + expect(roomScrollCache.load(userId, '!room3:test', ['$a', '$b'])).toBeUndefined(); + }); }); diff --git a/src/app/utils/roomScrollCache.ts b/src/app/utils/roomScrollCache.ts index 8336595a4..21682604d 100644 --- a/src/app/utils/roomScrollCache.ts +++ b/src/app/utils/roomScrollCache.ts @@ -7,18 +7,35 @@ export type RoomScrollCache = { scrollOffset: number; /** Whether the view was pinned to the bottom (live) when the room was left. */ atBottom: boolean; + /** + * Raw event IDs from the loaded head of the timeline when the snapshot was + * captured. Virtua's cache is index-based, so head changes invalidate it. + */ + headEventIds: string[]; }; /** Session-scoped, per-room scroll cache. Not persisted across page reloads. */ const scrollCacheMap = new Map(); const cacheKey = (userId: string, roomId: string): string => `${userId}:${roomId}`; +const headMatches = (saved: string[], current: string[]): boolean => + saved.length > 0 && + current.length >= saved.length && + saved.every((eventId, index) => current[index] === eventId); export const roomScrollCache = { save(userId: string, roomId: string, data: RoomScrollCache): void { scrollCacheMap.set(cacheKey(userId, roomId), data); }, - load(userId: string, roomId: string): RoomScrollCache | undefined { - return scrollCacheMap.get(cacheKey(userId, roomId)); + load( + userId: string, + roomId: string, + currentHeadEventIds?: string[] + ): RoomScrollCache | undefined { + const cached = scrollCacheMap.get(cacheKey(userId, roomId)); + if (!cached) return undefined; + if (!currentHeadEventIds) return cached; + if (!headMatches(cached.headEventIds, currentHeadEventIds)) return undefined; + return cached; }, }; diff --git a/src/app/utils/timeline.ts b/src/app/utils/timeline.ts index 0934e5b02..e199387ff 100644 --- a/src/app/utils/timeline.ts +++ b/src/app/utils/timeline.ts @@ -46,6 +46,18 @@ export const getTimelinesEventsCount = (timelines: EventTimeline[]): number => { .reduce((accumulator, element) => timelineEventCountReducer(accumulator, element), 0); }; +export const getTimelineHeadEventIds = (timelines: EventTimeline[], limit = 5): string[] => { + if (limit <= 0) return []; + + return timelines + .flatMap((timeline) => timeline.getEvents()) + .flatMap((event) => { + const eventId = event.getId(); + return eventId ? [eventId] : []; + }) + .slice(0, limit); +}; + export const getTimelineAndBaseIndex = ( timelines: EventTimeline[], index: number From 5cc0da583f974d698971ce4b1517a27aee0d9e9d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 20:45:43 -0400 Subject: [PATCH 195/253] fix(presence): normalize dnd state handling --- src/app/components/presence/Presence.tsx | 1 + src/app/features/settings/account/Profile.tsx | 7 +- src/app/hooks/useAppVisibility.ts | 219 ++---------------- src/app/hooks/useClientConfig.ts | 94 -------- src/app/hooks/usePresenceAutoIdle.test.tsx | 20 +- src/app/hooks/usePresenceAutoIdle.ts | 16 +- src/app/hooks/useUserPresence.test.tsx | 81 +++++++ src/app/hooks/useUserPresence.ts | 74 +++++- src/app/pages/client/ClientNonUIFeatures.tsx | 49 ++-- .../client/sidebar/AccountSwitcherTab.tsx | 16 +- .../pages/client/sidebar/DirectDMsList.tsx | 20 +- src/app/utils/appEvents.ts | 28 +-- 12 files changed, 230 insertions(+), 395 deletions(-) diff --git a/src/app/components/presence/Presence.tsx b/src/app/components/presence/Presence.tsx index e6ac463bb..ea9ed73d5 100644 --- a/src/app/components/presence/Presence.tsx +++ b/src/app/components/presence/Presence.tsx @@ -18,6 +18,7 @@ const PresenceToColor: Record = { [Presence.Online]: 'Success', [Presence.Unavailable]: 'Warning', [Presence.Offline]: 'Secondary', + [Presence.Dnd]: 'Critical', }; type PresenceBadgeProps = { diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx index da2d140f6..2595f7e1c 100644 --- a/src/app/features/settings/account/Profile.tsx +++ b/src/app/features/settings/account/Profile.tsx @@ -46,7 +46,7 @@ import { CompactUploadCardRenderer } from '$components/upload-card'; import { useCapabilities } from '$hooks/useCapabilities'; import { profilesCacheAtom } from '$state/userRoomProfile'; import { SequenceCardStyle } from '$features/settings/styles.css'; -import { useUserPresence } from '$hooks/useUserPresence'; +import { Presence, useUserPresence } from '$hooks/useUserPresence'; import { MSC1767Text } from '$types/matrix/common'; import { TimezoneEditor } from './TimezoneEditor'; import { PronounEditor } from './PronounEditor'; @@ -511,7 +511,10 @@ function ProfileExtended({ profile, userId }: Readonly) { const handleSaveStatus = useCallback( async (newStatus: string) => { - const currentState = presence?.presence || 'online'; + const currentState = + presence?.presence === Presence.Dnd + ? Presence.Online + : (presence?.presence ?? Presence.Online); await mx.setPresence({ presence: currentState, diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index 4e7b5b131..7fd5f2325 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -1,96 +1,22 @@ -import { useCallback, useEffect, useRef } from 'react'; +import { useEffect } from 'react'; import { MatrixClient } from '$types/matrix-sdk'; +import { useAtom } from 'jotai'; +import { togglePusher } from '../features/settings/notifications/PushNotifications'; import { appEvents } from '../utils/appEvents'; -import { useClientConfig, useExperimentVariant } from './useClientConfig'; +import { useClientConfig } from './useClientConfig'; +import { useSetting } from '../state/hooks/settings'; +import { settingsAtom } from '../state/settings'; +import { pushSubscriptionAtom } from '../state/pushSubscription'; +import { mobileOrTablet } from '../utils/user-agent'; import { createDebugLogger } from '../utils/debugLogger'; -import { pushSessionToSW } from '../../sw-session'; const debugLog = createDebugLogger('AppVisibility'); -const DEFAULT_FOREGROUND_DEBOUNCE_MS = 1500; -const DEFAULT_HEARTBEAT_INTERVAL_MS = 10 * 60 * 1000; -const DEFAULT_RESUME_HEARTBEAT_SUPPRESS_MS = 60 * 1000; -const DEFAULT_HEARTBEAT_MAX_BACKOFF_MS = 30 * 60 * 1000; - export function useAppVisibility(mx: MatrixClient | undefined) { const clientConfig = useClientConfig(); - - const sessionSyncConfig = clientConfig.sessionSync; - const sessionSyncVariant = useExperimentVariant( - 'sessionSyncStrategy', - mx?.getUserId() ?? undefined - ); - - // Derive phase flags from experiment variant; fall back to direct config when not in experiment. - const inSessionSync = sessionSyncVariant.inExperiment; - const syncVariant = sessionSyncVariant.variant; - const phase1ForegroundResync = inSessionSync - ? syncVariant === 'session-sync-heartbeat' || syncVariant === 'session-sync-adaptive' - : sessionSyncConfig?.phase1ForegroundResync === true; - const phase2VisibleHeartbeat = inSessionSync - ? syncVariant === 'session-sync-heartbeat' || syncVariant === 'session-sync-adaptive' - : sessionSyncConfig?.phase2VisibleHeartbeat === true; - const phase3AdaptiveBackoffJitter = inSessionSync - ? syncVariant === 'session-sync-adaptive' - : sessionSyncConfig?.phase3AdaptiveBackoffJitter === true; - - const foregroundDebounceMs = Math.max( - 0, - sessionSyncConfig?.foregroundDebounceMs ?? DEFAULT_FOREGROUND_DEBOUNCE_MS - ); - const heartbeatIntervalMs = Math.max( - 1000, - sessionSyncConfig?.heartbeatIntervalMs ?? DEFAULT_HEARTBEAT_INTERVAL_MS - ); - const resumeHeartbeatSuppressMs = Math.max( - 0, - sessionSyncConfig?.resumeHeartbeatSuppressMs ?? DEFAULT_RESUME_HEARTBEAT_SUPPRESS_MS - ); - const heartbeatMaxBackoffMs = Math.max( - heartbeatIntervalMs, - sessionSyncConfig?.heartbeatMaxBackoffMs ?? DEFAULT_HEARTBEAT_MAX_BACKOFF_MS - ); - - const lastForegroundPushAtRef = useRef(0); - const suppressHeartbeatUntilRef = useRef(0); - const heartbeatFailuresRef = useRef(0); - - const pushSessionNow = useCallback( - (reason: 'foreground' | 'focus' | 'heartbeat'): 'sent' | 'skipped' => { - const baseUrl = mx?.getHomeserverUrl(); - const accessToken = mx?.getAccessToken(); - const userId = mx?.getUserId(); - const canPush = - !!mx && - typeof baseUrl === 'string' && - typeof accessToken === 'string' && - typeof userId === 'string' && - 'serviceWorker' in navigator && - !!navigator.serviceWorker.controller; - - if (!canPush) { - debugLog.warn('network', 'Skipped SW session sync', { - reason, - hasClient: !!mx, - hasBaseUrl: !!baseUrl, - hasAccessToken: !!accessToken, - hasUserId: !!userId, - hasSwController: !!navigator.serviceWorker?.controller, - }); - return 'skipped'; - } - - pushSessionToSW(baseUrl, accessToken, userId); - debugLog.info('network', 'Pushed session to SW', { - reason, - phase1ForegroundResync, - phase2VisibleHeartbeat, - phase3AdaptiveBackoffJitter, - }); - return 'sent'; - }, - [mx, phase1ForegroundResync, phase2VisibleHeartbeat, phase3AdaptiveBackoffJitter] - ); + const [usePushNotifications] = useSetting(settingsAtom, 'usePushNotifications'); + const pushSubAtom = useAtom(pushSubscriptionAtom); + const isMobile = mobileOrTablet(); useEffect(() => { const handleVisibilityChange = () => { @@ -100,133 +26,30 @@ export function useAppVisibility(mx: MatrixClient | undefined) { `App visibility changed: ${isVisible ? 'visible (foreground)' : 'hidden (background)'}`, { visibilityState: document.visibilityState } ); - appEvents.emitVisibilityChange(isVisible); + appEvents.onVisibilityChange?.(isVisible); if (!isVisible) { - appEvents.emitVisibilityHidden(); - return; - } - - // Always kick the sync loop on foreground regardless of phase flags — - // the SDK may be sitting in exponential backoff after iOS froze the tab. - mx?.retryImmediately(); - - if (!phase1ForegroundResync) return; - - const now = Date.now(); - if (now - lastForegroundPushAtRef.current < foregroundDebounceMs) return; - lastForegroundPushAtRef.current = now; - - if (pushSessionNow('foreground') === 'sent') { - // A successful push proves the SW controller is up — reset adaptive backoff - // so the heartbeat returns to its normal interval immediately rather than - // staying on an inflated delay left over from a prior SW absence period. - if (phase3AdaptiveBackoffJitter) heartbeatFailuresRef.current = 0; - if (phase3AdaptiveBackoffJitter && phase2VisibleHeartbeat) { - suppressHeartbeatUntilRef.current = now + resumeHeartbeatSuppressMs; - } - } - }; - - const handleFocus = () => { - if (document.visibilityState !== 'visible') return; - - // Always kick the sync loop on focus for the same reason as above. - mx?.retryImmediately(); - - if (!phase1ForegroundResync) return; - - const now = Date.now(); - if (now - lastForegroundPushAtRef.current < foregroundDebounceMs) return; - lastForegroundPushAtRef.current = now; - - if (pushSessionNow('focus') === 'sent') { - if (phase3AdaptiveBackoffJitter) heartbeatFailuresRef.current = 0; - if (phase3AdaptiveBackoffJitter && phase2VisibleHeartbeat) { - suppressHeartbeatUntilRef.current = now + resumeHeartbeatSuppressMs; - } + appEvents.onVisibilityHidden?.(); } }; document.addEventListener('visibilitychange', handleVisibilityChange); - window.addEventListener('focus', handleFocus); return () => { document.removeEventListener('visibilitychange', handleVisibilityChange); - window.removeEventListener('focus', handleFocus); }; - }, [ - foregroundDebounceMs, - mx, - phase1ForegroundResync, - phase2VisibleHeartbeat, - phase3AdaptiveBackoffJitter, - pushSessionNow, - resumeHeartbeatSuppressMs, - ]); + }, []); useEffect(() => { - if (!phase2VisibleHeartbeat || !mx) return undefined; - - // Reset adaptive backoff/suppression so a config or session change starts fresh. - heartbeatFailuresRef.current = 0; - suppressHeartbeatUntilRef.current = 0; - - let timeoutId: number | undefined; - - const getDelayMs = (): number => { - let delay = heartbeatIntervalMs; - - if (phase3AdaptiveBackoffJitter) { - const failures = heartbeatFailuresRef.current; - const backoffFactor = Math.min(2 ** failures, heartbeatMaxBackoffMs / heartbeatIntervalMs); - delay = Math.min(heartbeatMaxBackoffMs, Math.round(heartbeatIntervalMs * backoffFactor)); - - // Add +-20% jitter to avoid synchronized heartbeat spikes across many clients. - const jitter = 0.8 + Math.random() * 0.4; - delay = Math.max(1000, Math.round(delay * jitter)); - } - - return delay; - }; - - const tick = () => { - const now = Date.now(); + if (!mx) return; - if (document.visibilityState !== 'visible' || !navigator.onLine) { - timeoutId = window.setTimeout(tick, getDelayMs()); - return; - } - - if (phase3AdaptiveBackoffJitter && now < suppressHeartbeatUntilRef.current) { - timeoutId = window.setTimeout(tick, getDelayMs()); - return; - } - - const result = pushSessionNow('heartbeat'); - if (phase3AdaptiveBackoffJitter) { - if (result === 'sent') { - heartbeatFailuresRef.current = 0; - } else { - // 'skipped' means prerequisites (SW controller, session) aren't ready. - // Treat as a transient failure so backoff grows until the SW is ready. - heartbeatFailuresRef.current += 1; - } - } - - timeoutId = window.setTimeout(tick, getDelayMs()); + const handleVisibilityForNotifications = (isVisible: boolean) => { + togglePusher(mx, clientConfig, isVisible, usePushNotifications, pushSubAtom, isMobile); }; - timeoutId = window.setTimeout(tick, getDelayMs()); - + appEvents.onVisibilityChange = handleVisibilityForNotifications; + // eslint-disable-next-line consistent-return return () => { - if (timeoutId !== undefined) window.clearTimeout(timeoutId); + appEvents.onVisibilityChange = null; }; - }, [ - heartbeatIntervalMs, - heartbeatMaxBackoffMs, - mx, - phase2VisibleHeartbeat, - phase3AdaptiveBackoffJitter, - pushSessionNow, - ]); + }, [mx, clientConfig, usePushNotifications, pushSubAtom, isMobile]); } diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts index 3f5568e80..0e7257532 100644 --- a/src/app/hooks/useClientConfig.ts +++ b/src/app/hooks/useClientConfig.ts @@ -5,31 +5,6 @@ export type HashRouterConfig = { basename?: string; }; -export type ExperimentConfig = { - enabled?: boolean; - rolloutPercentage?: number; - variants?: string[]; - controlVariant?: string; -}; - -export type ExperimentSelection = { - key: string; - enabled: boolean; - rolloutPercentage: number; - variant: string; - inExperiment: boolean; -}; - -export type SessionSyncConfig = { - phase1ForegroundResync?: boolean; - phase2VisibleHeartbeat?: boolean; - phase3AdaptiveBackoffJitter?: boolean; - foregroundDebounceMs?: number; - heartbeatIntervalMs?: number; - resumeHeartbeatSuppressMs?: number; - heartbeatMaxBackoffMs?: number; -}; - export type ClientConfig = { defaultHomeserver?: number; homeserverList?: string[]; @@ -39,8 +14,6 @@ export type ClientConfig = { disableAccountSwitcher?: boolean; hideUsernamePasswordFields?: boolean; - experiments?: Record; - pushNotificationDetails?: { pushNotifyUrl?: string; vapidPublicKey?: string; @@ -70,7 +43,6 @@ export type ClientConfig = { matrixToBaseUrl?: string; settingsLinkBaseUrl?: string; - sessionSync?: SessionSyncConfig; /** How long (ms) without input before auto-idling presence. 0 = disabled. */ presenceAutoIdleTimeoutMs?: number; }; @@ -85,72 +57,6 @@ export function useClientConfig(): ClientConfig { return config; } -const DEFAULT_CONTROL_VARIANT = 'control'; - -const normalizeRolloutPercentage = (value?: number): number => { - if (typeof value !== 'number' || Number.isNaN(value)) return 100; - if (value < 0) return 0; - if (value > 100) return 100; - return value; -}; - -const hashToUInt32 = (input: string): number => { - let hash = 0; - for (let index = 0; index < input.length; index += 1) { - hash = (hash * 131 + input.charCodeAt(index)) % 4294967291; - } - return hash; -}; - -export const selectExperimentVariant = ( - key: string, - experiment: ExperimentConfig | undefined, - subjectId: string | undefined -): ExperimentSelection => { - const controlVariant = experiment?.controlVariant ?? DEFAULT_CONTROL_VARIANT; - const variants = (experiment?.variants?.filter((variant) => variant.length > 0) ?? []).filter( - (variant) => variant !== controlVariant - ); - const enabled = experiment?.enabled === true; - const rolloutPercentage = normalizeRolloutPercentage(experiment?.rolloutPercentage); - - if (!enabled || !subjectId || variants.length === 0 || rolloutPercentage === 0) { - return { - key, - enabled, - rolloutPercentage, - variant: controlVariant, - inExperiment: false, - }; - } - - const rolloutBucket = hashToUInt32(`${key}:rollout:${subjectId}`) % 10000; - const rolloutCutoff = Math.floor(rolloutPercentage * 100); - if (rolloutBucket >= rolloutCutoff) { - return { - key, - enabled, - rolloutPercentage, - variant: controlVariant, - inExperiment: false, - }; - } - - const variantIndex = hashToUInt32(`${key}:variant:${subjectId}`) % variants.length; - return { - key, - enabled, - rolloutPercentage, - variant: variants[variantIndex], - inExperiment: true, - }; -}; - -export const useExperimentVariant = (key: string, subjectId?: string): ExperimentSelection => { - const clientConfig = useClientConfig(); - return selectExperimentVariant(key, clientConfig.experiments?.[key], subjectId); -}; - export const clientDefaultServer = (clientConfig: ClientConfig): string => clientConfig.homeserverList?.[clientConfig.defaultHomeserver ?? 0] ?? 'matrix.org'; diff --git a/src/app/hooks/usePresenceAutoIdle.test.tsx b/src/app/hooks/usePresenceAutoIdle.test.tsx index 8e2f6d138..2fea1eddd 100644 --- a/src/app/hooks/usePresenceAutoIdle.test.tsx +++ b/src/app/hooks/usePresenceAutoIdle.test.tsx @@ -2,7 +2,6 @@ import { act, renderHook } from '@testing-library/react'; import { Provider, useAtomValue } from 'jotai'; import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'; import { presenceAutoIdledAtom } from '$state/settings'; -import { appEvents } from '$utils/appEvents'; import type { ReactNode } from 'react'; import { usePresenceAutoIdle } from './usePresenceAutoIdle'; @@ -92,7 +91,7 @@ describe('usePresenceAutoIdle', () => { expect(result.current).toBe(false); }); - it('resets auto-idle when app becomes visible via appEvents', () => { + it('resets auto-idle when the document becomes visible again', () => { const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), { wrapper, }); @@ -102,11 +101,16 @@ describe('usePresenceAutoIdle', () => { }); expect(result.current).toBe(true); - // Simulate app returning to foreground. + const visibilityStateSpy = vi + .spyOn(document, 'visibilityState', 'get') + .mockReturnValue('visible'); + act(() => { - appEvents.emitVisibilityChange(true); + document.dispatchEvent(new Event('visibilitychange')); }); expect(result.current).toBe(false); + + visibilityStateSpy.mockRestore(); }); it('does not go idle when presenceMode is not online', () => { @@ -201,7 +205,7 @@ describe('usePresenceAutoIdle', () => { expect(result.current).toBe(false); }); - it('unsubscribes from appEvents.onVisibilityChange on cleanup', () => { + it('stops responding to focus events after cleanup', () => { const { result, unmount } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), { wrapper, }); @@ -214,10 +218,10 @@ describe('usePresenceAutoIdle', () => { unmount(); - // After unmount, emitting visibility change should have no effect. - // (No error thrown means the handler was properly unsubscribed.) act(() => { - appEvents.emitVisibilityChange(true); + window.dispatchEvent(new Event('focus')); }); + + expect(result.current).toBe(true); }); }); diff --git a/src/app/hooks/usePresenceAutoIdle.ts b/src/app/hooks/usePresenceAutoIdle.ts index dc5af7e21..c4f14a008 100644 --- a/src/app/hooks/usePresenceAutoIdle.ts +++ b/src/app/hooks/usePresenceAutoIdle.ts @@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef } from 'react'; import { useSetAtom } from 'jotai'; import { type MatrixClient, UserEvent, type UserEventHandlerMap } from '$types/matrix-sdk'; import { presenceAutoIdledAtom } from '$state/settings'; -import { appEvents } from '$utils/appEvents'; import { createDebugLogger } from '$utils/debugLogger'; const debugLog = createDebugLogger('PresenceAutoIdle'); @@ -65,22 +64,23 @@ export function usePresenceAutoIdle( timerRef.current = window.setTimeout(goIdle, timeoutMs); }; + const handleVisibilityChange = () => { + if (document.visibilityState === 'visible') handleActivity(); + }; + // Start the initial timer. timerRef.current = window.setTimeout(goIdle, timeoutMs); ACTIVITY_EVENTS.forEach((ev) => document.addEventListener(ev, handleActivity, { passive: true }) ); - - // When the app returns to the foreground, treat it as activity so the user - // isn't shown as idle the moment they switch back to the tab/PWA. - const unsubVisibility = appEvents.onVisibilityChange((isVisible: boolean) => { - if (isVisible) handleActivity(); - }); + document.addEventListener('visibilitychange', handleVisibilityChange); + window.addEventListener('focus', handleActivity); return () => { ACTIVITY_EVENTS.forEach((ev) => document.removeEventListener(ev, handleActivity)); + document.removeEventListener('visibilitychange', handleVisibilityChange); + window.removeEventListener('focus', handleActivity); clearTimer(); - unsubVisibility(); }; }, [clearTimer, presenceMode, sendPresence, setAutoIdled, timeoutMs]); diff --git a/src/app/hooks/useUserPresence.test.tsx b/src/app/hooks/useUserPresence.test.tsx index 78f334d71..70ca6b5d2 100644 --- a/src/app/hooks/useUserPresence.test.tsx +++ b/src/app/hooks/useUserPresence.test.tsx @@ -1,5 +1,9 @@ import { act, renderHook } from '@testing-library/react'; +import { Provider } from 'jotai'; +import { useHydrateAtoms } from 'jotai/utils'; import { beforeEach, describe, expect, it, vi } from 'vitest'; +import type { ReactNode } from 'react'; +import { presenceAutoIdledAtom, settingsAtom } from '$state/settings'; import { useUserPresence, Presence, clearPresenceCache } from './useUserPresence'; // ------- mock setup ------- @@ -41,6 +45,7 @@ const makeMockUser = ( const mockMx = { getUser: vi.fn((): ReturnType | null => mockUser), getPresence: vi.fn((): Promise => mockGetPresence()), + getUserId: vi.fn<() => string | undefined>(() => undefined), on: vi.fn(), removeListener: vi.fn(), }; @@ -51,14 +56,53 @@ vi.mock('./useMatrixClient', () => ({ const USER_ID = '@alice:test'; +type HookWrapperProps = { + children: ReactNode; + sendPresence?: boolean; + presenceMode?: 'online' | 'unavailable' | 'dnd' | 'offline'; + autoIdled?: boolean; +}; + +const localStorageSettings = () => { + const rawSettings = localStorage.getItem('settings'); + return rawSettings ? JSON.parse(rawSettings) : {}; +}; + +const HydratePresenceSettings = ({ + children, + sendPresence = true, + presenceMode = 'online', + autoIdled = false, +}: HookWrapperProps) => { + useHydrateAtoms([ + [settingsAtom, { ...localStorageSettings(), sendPresence, presenceMode }], + [presenceAutoIdledAtom, autoIdled], + ]); + return children; +}; + +const createWrapper = (options?: Omit) => { + function Wrapper({ children }: { children: ReactNode }) { + return ( + + {children} + + ); + } + + return Wrapper; +}; + beforeEach(() => { vi.clearAllMocks(); userListeners.clear(); clearPresenceCache(); + localStorage.clear(); mockUser = null; mockGetPresence = () => new Promise(() => {}); // pending by default mockMx.getUser.mockImplementation(() => mockUser); mockMx.getPresence.mockImplementation(() => mockGetPresence()); + mockMx.getUserId.mockReturnValue(undefined); }); // ------- tests ------- @@ -207,4 +251,41 @@ describe('useUserPresence', () => { // Should still be undefined without throwing expect(result.current).toBeUndefined(); }); + + it('normalizes synthetic dnd presence from the SDK user object', () => { + mockUser = makeMockUser({ presence: 'online', presenceStatusMsg: 'dnd', lastActiveTs: 1000 }); + + const { result } = renderHook(() => useUserPresence('@bob:test')); + + expect(result.current).toEqual({ + presence: Presence.Dnd, + status: undefined, + active: true, + lastActiveTs: 1000, + }); + }); + + it('overrides own presence from settings so member lists update immediately', () => { + mockUser = makeMockUser({ presence: 'online', lastActiveTs: 1000 }); + mockMx.getUserId.mockReturnValue(USER_ID); + + const { result } = renderHook(() => useUserPresence(USER_ID), { + wrapper: createWrapper({ presenceMode: 'dnd' }), + }); + + expect(result.current?.presence).toBe(Presence.Dnd); + expect(result.current?.status).toBeUndefined(); + }); + + it('marks own presence idle when auto-idle is active', () => { + mockUser = makeMockUser({ presence: 'online', lastActiveTs: 1000 }); + mockMx.getUserId.mockReturnValue(USER_ID); + + const { result } = renderHook(() => useUserPresence(USER_ID), { + wrapper: createWrapper({ autoIdled: true }), + }); + + expect(result.current?.presence).toBe(Presence.Unavailable); + expect(result.current?.active).toBe(false); + }); }); diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts index c8e2a480f..63e995df9 100644 --- a/src/app/hooks/useUserPresence.ts +++ b/src/app/hooks/useUserPresence.ts @@ -1,11 +1,15 @@ import { useEffect, useMemo, useState } from 'react'; +import { useAtomValue } from 'jotai'; import { ClientEvent, MatrixEvent, User, UserEvent, UserEventHandlerMap } from '$types/matrix-sdk'; +import { presenceAutoIdledAtom, settingsAtom } from '$state/settings'; +import { useSetting } from '$state/hooks/settings'; import { useMatrixClient } from './useMatrixClient'; export enum Presence { Online = 'online', Unavailable = 'unavailable', Offline = 'offline', + Dnd = 'dnd', } export type UserPresence = { @@ -15,13 +19,66 @@ export type UserPresence = { lastActiveTs?: number; }; +const isSyntheticDndStatus = (status?: string): boolean => status === 'dnd'; + +const normalizePresence = (presence: string | undefined, status?: string): Presence => { + if (presence === Presence.Online && isSyntheticDndStatus(status)) return Presence.Dnd; + if (presence === Presence.Unavailable) return Presence.Unavailable; + if (presence === Presence.Offline) return Presence.Offline; + return Presence.Online; +}; + +const sanitizeStatus = (status?: string): string | undefined => + isSyntheticDndStatus(status) ? undefined : status; + const getUserPresence = (user: User): UserPresence => ({ - presence: user.presence as Presence, - status: user.presenceStatusMsg, + presence: normalizePresence(user.presence, user.presenceStatusMsg), + status: sanitizeStatus(user.presenceStatusMsg), active: user.currentlyActive, lastActiveTs: user.getLastActiveTs(), }); +const getOwnEffectivePresence = ( + sendPresence: boolean, + presenceMode: string | undefined, + autoIdled: boolean +): Presence => { + if (!sendPresence) return Presence.Offline; + if (autoIdled) return Presence.Unavailable; + if (presenceMode === Presence.Unavailable) return Presence.Unavailable; + if (presenceMode === Presence.Offline) return Presence.Offline; + if (presenceMode === Presence.Dnd) return Presence.Dnd; + return Presence.Online; +}; + +const applyOwnPresenceOverride = ( + rawPresence: UserPresence | undefined, + sendPresence: boolean, + presenceMode: string | undefined, + autoIdled: boolean +): UserPresence | undefined => { + const effectivePresence = getOwnEffectivePresence(sendPresence, presenceMode, autoIdled); + const sanitizedStatus = sanitizeStatus(rawPresence?.status); + + if (!rawPresence) { + return { + presence: effectivePresence, + status: effectivePresence === Presence.Dnd ? undefined : sanitizedStatus, + active: effectivePresence === Presence.Online || effectivePresence === Presence.Dnd, + }; + } + + return { + ...rawPresence, + presence: effectivePresence, + status: effectivePresence === Presence.Dnd ? undefined : sanitizedStatus, + active: + effectivePresence === Presence.Online || effectivePresence === Presence.Dnd + ? rawPresence.active + : false, + }; +}; + // In-memory presence REST cache to avoid N+1 /presence/{userId}/status floods. // Multiple hook instances for the same user share a single in-flight request. const PRESENCE_CACHE_TTL_MS = 60_000; @@ -57,8 +114,8 @@ function fetchPresenceOnce( .getPresence(userId) .then((resp) => { const data: UserPresence = { - presence: resp.presence as Presence, - status: resp.status_msg, + presence: normalizePresence(resp.presence, resp.status_msg), + status: sanitizeStatus(resp.status_msg), active: resp.currently_active ?? false, lastActiveTs: resp.last_active_ago != null ? Date.now() - resp.last_active_ago : undefined, }; @@ -84,6 +141,9 @@ function fetchPresenceOnce( export const useUserPresence = (userId: string): UserPresence | undefined => { const mx = useMatrixClient(); + const [sendPresence] = useSetting(settingsAtom, 'sendPresence'); + const [presenceMode] = useSetting(settingsAtom, 'presenceMode'); + const autoIdled = useAtomValue(presenceAutoIdledAtom); const user = mx.getUser(userId); const [presence, setPresence] = useState(() => (user ? getUserPresence(user) : undefined)); @@ -137,7 +197,10 @@ export const useUserPresence = (userId: string): UserPresence | undefined => { }; }, [mx, userId, user]); - return presence; + return useMemo(() => { + if (userId !== mx.getUserId()) return presence; + return applyOwnPresenceOverride(presence, sendPresence, presenceMode, autoIdled); + }, [autoIdled, mx, presence, presenceMode, sendPresence, userId]); }; export const usePresenceLabel = (): Record => @@ -146,6 +209,7 @@ export const usePresenceLabel = (): Record => [Presence.Online]: 'Online', [Presence.Unavailable]: 'Idle', [Presence.Offline]: 'Offline', + [Presence.Dnd]: 'Do Not Disturb', }), [] ); diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index c50f411a4..9c5c76306 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -1,4 +1,4 @@ -import { useAtomValue, useSetAtom, useAtom } from 'jotai'; +import { useAtomValue, useSetAtom } from 'jotai'; import * as Sentry from '@sentry/react'; import { ReactNode, useCallback, useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -646,23 +646,10 @@ function SyncNotificationSettingsWithServiceWorker() { navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(msg)); }; - const postHidden = () => { - // pagehide fires more reliably than visibilitychange on iOS Safari PWA - // when the user locks the screen or backgrounds the app quickly, making - // it less likely that the SW is left with a stale appIsVisible=true. - const msg = { type: 'setAppVisible', visible: false }; - navigator.serviceWorker.controller?.postMessage(msg); - navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(msg)); - }; - // Report initial visibility immediately, then track changes. postVisibility(); document.addEventListener('visibilitychange', postVisibility); - window.addEventListener('pagehide', postHidden); - return () => { - document.removeEventListener('visibilitychange', postVisibility); - window.removeEventListener('pagehide', postHidden); - }; + return () => document.removeEventListener('visibilitychange', postVisibility); }, []); useEffect(() => { @@ -844,40 +831,36 @@ function PresenceFeature() { const mx = useMatrixClient(); const [sendPresence] = useSetting(settingsAtom, 'sendPresence'); const [presenceMode] = useSetting(settingsAtom, 'presenceMode'); - const [autoIdled] = useAtom(presenceAutoIdledAtom); + const autoIdled = useAtomValue(presenceAutoIdledAtom); const clientConfig = useClientConfig(); const timeoutMs = clientConfig.presenceAutoIdleTimeoutMs ?? 0; usePresenceAutoIdle(mx, presenceMode ?? 'online', sendPresence, timeoutMs); useEffect(() => { - // When auto-idled, broadcast as unavailable regardless of the configured mode. const effectiveMode = autoIdled ? 'unavailable' : (presenceMode ?? 'online'); - // Effective broadcast state: honour effectiveMode when presence is on, otherwise offline. - // DND broadcasts as online (you're active but don't want to be disturbed) with a status_msg. const activePresence = effectiveMode === 'dnd' ? 'online' : effectiveMode; const effectiveState = sendPresence ? activePresence : 'offline'; - const broadcasting = effectiveState !== 'offline'; + const ownUser = mx.getUser(mx.getUserId() ?? ''); + const shouldClearSyntheticDndStatus = + ownUser?.presenceStatusMsg === 'dnd' && (!sendPresence || effectiveMode !== 'dnd'); + let statusPayload: { status_msg: string } | undefined; + + if (sendPresence && effectiveMode === 'dnd') { + statusPayload = { status_msg: 'dnd' }; + } else if (shouldClearSyntheticDndStatus) { + statusPayload = { status_msg: '' }; + } - // Classic sync: set_presence query param on every /sync poll. - // Passing undefined restores the default (online); Offline suppresses broadcasting. - mx.setSyncPresence(broadcasting ? undefined : SetPresence.Offline); - // Sliding sync: keep the extension enabled so we always receive others' presence. - // Only disable it when the master sendPresence toggle is off (full privacy mode). + mx.setSyncPresence(sendPresence ? undefined : SetPresence.Offline); getSlidingSyncManager(mx)?.setPresenceEnabled(sendPresence); - // Explicitly PUT /presence/{userId}/status so the server knows the exact state: - // - MSC4186 servers that have no presence extension see this immediately. - // - When 'offline' (Invisible mode), we appear offline to others but still receive - // their presence events because the extension is still enabled above. const presencePayload = { presence: effectiveState, - ...(sendPresence && effectiveMode === 'dnd' ? { status_msg: 'dnd' } : {}), + ...statusPayload, }; let retryTimer: ReturnType | undefined; const trySetPresence = (attempt = 0) => { mx.setPresence(presencePayload).catch(() => { - // Retry up to 3 times with back-off: the HTTP client may not have - // reconnected yet after the app resumes from background. if (attempt < 3) { retryTimer = setTimeout(() => trySetPresence(attempt + 1), 2000 * (attempt + 1)); } @@ -887,7 +870,7 @@ function PresenceFeature() { return () => { if (retryTimer !== undefined) clearTimeout(retryTimer); }; - }, [mx, sendPresence, presenceMode, autoIdled]); + }, [autoIdled, mx, presenceMode, sendPresence]); return null; } diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index 191a585dd..4c3838007 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -1,6 +1,5 @@ import { MouseEvent, MouseEventHandler, ReactNode, useCallback, useState } from 'react'; import { - Badge, Box, Button, Dialog, @@ -189,13 +188,7 @@ export function AccountSwitcherTab() { const effectiveDisplayMode = autoIdled ? 'unavailable' : (presenceMode ?? 'online'); let myOwnPresenceBadge: ReactNode; if (sendPresence) { - myOwnPresenceBadge = - effectiveDisplayMode === 'dnd' ? ( - // DND: solid red badge (broadcasts as online with status_msg 'dnd') - - ) : ( - - ); + myOwnPresenceBadge = ; } const activeAvatarUrl = activeProfile.avatarUrl ? (mxcUrlToHttp(mx, activeProfile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined) @@ -394,12 +387,7 @@ export function AccountSwitcherTab() { ] as const ).map(({ label: statusLabel, desc, mode }) => { const isSelected = sendPresence && (presenceMode ?? 'online') === mode; - const badge = - mode === 'dnd' ? ( - - ) : ( - - ); + const badge = ; return ( p && p.lastActiveTs != null && p.lastActiveTs !== 0 && p.presence === Presence.Online - ); + const groupDMPresence = isGroupDM + ? [member0Presence, member1Presence, member2Presence].reduce( + (acc, current) => { + if (!current || current.lastActiveTs == null || current.lastActiveTs === 0) return acc; + if (current.presence === Presence.Dnd) return Presence.Dnd; + if (!acc && current.presence === Presence.Online) return Presence.Online; + return acc; + }, + undefined + ) + : undefined; let presenceBadge: ReactNode; if ( @@ -73,8 +79,8 @@ function DMItem({ room, selected }: DMItemProps) { singleDMPresence.lastActiveTs !== 0 ) { presenceBadge = ; - } else if (isGroupDM && groupDMOnline) { - presenceBadge = ; + } else if (groupDMPresence) { + presenceBadge = ; } // Get unread info for badge diff --git a/src/app/utils/appEvents.ts b/src/app/utils/appEvents.ts index 2430f5324..2834c5b6f 100644 --- a/src/app/utils/appEvents.ts +++ b/src/app/utils/appEvents.ts @@ -1,29 +1,5 @@ -export type VisibilityChangeHandler = (isVisible: boolean) => void; -type VisibilityHiddenHandler = () => void; - -const visibilityChangeHandlers = new Set(); -const visibilityHiddenHandlers = new Set(); - export const appEvents = { - onVisibilityHidden(handler: VisibilityHiddenHandler): () => void { - visibilityHiddenHandlers.add(handler); - return () => { - visibilityHiddenHandlers.delete(handler); - }; - }, - - emitVisibilityHidden(): void { - visibilityHiddenHandlers.forEach((h) => h()); - }, - - onVisibilityChange(handler: VisibilityChangeHandler): () => void { - visibilityChangeHandlers.add(handler); - return () => { - visibilityChangeHandlers.delete(handler); - }; - }, + onVisibilityHidden: null as (() => void) | null, - emitVisibilityChange(isVisible: boolean): void { - visibilityChangeHandlers.forEach((h) => h(isVisible)); - }, + onVisibilityChange: null as ((isVisible: boolean) => void) | null, }; From e1adb09616caea6c4c0e7d92378bca4645eaa983 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 20:47:17 -0400 Subject: [PATCH 196/253] fix(preview): remove timeline spillover --- src/app/features/room/RoomTimeline.tsx | 5 ++--- src/app/hooks/timeline/useTimelineSync.test.tsx | 2 +- src/app/hooks/timeline/useTimelineSync.ts | 10 +++++----- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 0630dcc9b..d026ec1fa 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -201,7 +201,7 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - const [atBottomState, setAtBottomState] = useState(!eventId); + const [atBottomState, setAtBottomState] = useState(true); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { setAtBottomState(val); @@ -408,9 +408,8 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; setIsReady(false); - setAtBottom(false); timelineSyncRef.current.loadEventTimeline(eventId); - }, [eventId, room.roomId, setAtBottom]); + }, [eventId, room.roomId]); useEffect(() => { if (eventId) return; diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index e5e7c4cfd..d53d74143 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -129,7 +129,7 @@ describe('useTimelineSync', () => { await Promise.resolve(); }); - expect(scrollToBottom).toHaveBeenCalled(); + expect(scrollToBottom).toHaveBeenCalledWith('instant'); }); it('resets timeline state when room.roomId changes and eventId is not set', async () => { diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index dda1e0207..51c85dda8 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -351,7 +351,7 @@ export interface UseTimelineSyncOptions { eventId?: string; isAtBottom: boolean; isAtBottomRef: React.MutableRefObject; - scrollToBottom: () => void; + scrollToBottom: (behavior?: 'instant' | 'smooth') => void; unreadInfo: ReturnType; setUnreadInfo: Dispatch>>; hideReadsRef: React.MutableRefObject; @@ -460,7 +460,7 @@ export function useTimelineSync({ useCallback(() => { if (!alive()) return; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - scrollToBottom(); + scrollToBottom('instant'); }, [alive, room, scrollToBottom]) ); @@ -490,7 +490,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } - scrollToBottom(); + scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; setTimeline((ct) => ({ ...ct })); @@ -528,7 +528,7 @@ export function useTimelineSync({ resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); if (wasAtBottom) { - scrollToBottom(); + scrollToBottom('instant'); } }, [room, isAtBottomRef, scrollToBottom]) ); @@ -565,7 +565,7 @@ export function useTimelineSync({ if (eventsLength <= lastScrolledAtEventsLengthRef.current && !resetAutoScrollPending) return; lastScrolledAtEventsLengthRef.current = eventsLength; - scrollToBottom(); + scrollToBottom('instant'); }, [isAtBottom, liveTimelineLinked, eventsLength, scrollToBottom]); useEffect(() => { From 3bea590f5151e4bc5eb04c2f4d4669d1b35e33f9 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 20:49:00 -0400 Subject: [PATCH 197/253] fix(bookmarks): remove unrelated branch spillover --- config.json | 9 --- src/app/features/room/RoomTimeline.tsx | 5 +- src/app/features/room/message/Message.tsx | 4 +- .../hooks/timeline/useTimelineSync.test.tsx | 2 +- src/app/hooks/timeline/useTimelineSync.ts | 10 +-- src/app/hooks/useClientConfig.ts | 67 ------------------- src/app/hooks/useRoomNavigate.ts | 25 +++---- src/app/pages/client/ClientNonUIFeatures.tsx | 8 +-- src/app/pages/client/home/Home.tsx | 4 +- src/app/pages/client/inbox/Inbox.tsx | 6 +- src/client/slidingSync.ts | 6 +- 11 files changed, 26 insertions(+), 120 deletions(-) diff --git a/config.json b/config.json index 4f3dae570..f0c3c8b61 100644 --- a/config.json +++ b/config.json @@ -19,15 +19,6 @@ "enabled": true }, - "experiments": { - "messageBookmarks": { - "enabled": false, - "rolloutPercentage": 0, - "controlVariant": "control", - "variants": ["enabled"] - } - }, - "featuredCommunities": { "openAsDefault": false, "spaces": [ diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 0630dcc9b..d026ec1fa 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -201,7 +201,7 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - const [atBottomState, setAtBottomState] = useState(!eventId); + const [atBottomState, setAtBottomState] = useState(true); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { setAtBottomState(val); @@ -408,9 +408,8 @@ export function RoomTimeline({ useEffect(() => { if (!eventId) return; setIsReady(false); - setAtBottom(false); timelineSyncRef.current.loadEventTimeline(eventId); - }, [eventId, room.roomId, setAtBottom]); + }, [eventId, room.roomId]); useEffect(() => { if (eventId) return; diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index 0eb23c8b0..482a50768 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -81,7 +81,6 @@ import { MessageForwardItem } from '$components/message/modals/MessageForward'; import { MessageDeleteItem } from '$components/message/modals/MessageDelete'; import { computeBookmarkId, createBookmarkItem } from '$features/bookmarks/bookmarkDomain'; import { useIsBookmarked, useBookmarkActions } from '$features/bookmarks/useBookmarks'; -import { useExperimentVariant } from '$hooks/useClientConfig'; import { MessageReportItem } from '$components/message/modals/MessageReport'; import { filterPronounsByLanguage, getParsedPronouns } from '$utils/pronouns'; import { useMentionClickHandler } from '$hooks/useMentionClickHandler'; @@ -221,14 +220,13 @@ export const MessageBookmarkItem = as< } >(({ room, mEvent, onClose, ...props }, ref) => { const mx = useMatrixClient(); - const bookmarksExperiment = useExperimentVariant('messageBookmarks', mx.getUserId() ?? undefined); const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks'); const eventId = mEvent.getId(); const isBookmarked = useIsBookmarked(room.roomId, eventId ?? ''); const { add, remove } = useBookmarkActions(); if (!eventId) return null; - if (!bookmarksExperiment.inExperiment && !enableMessageBookmarks) return null; + if (!enableMessageBookmarks) return null; const handleClick = async () => { if (isBookmarked) { diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index e5e7c4cfd..d53d74143 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -129,7 +129,7 @@ describe('useTimelineSync', () => { await Promise.resolve(); }); - expect(scrollToBottom).toHaveBeenCalled(); + expect(scrollToBottom).toHaveBeenCalledWith('instant'); }); it('resets timeline state when room.roomId changes and eventId is not set', async () => { diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index dda1e0207..51c85dda8 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -351,7 +351,7 @@ export interface UseTimelineSyncOptions { eventId?: string; isAtBottom: boolean; isAtBottomRef: React.MutableRefObject; - scrollToBottom: () => void; + scrollToBottom: (behavior?: 'instant' | 'smooth') => void; unreadInfo: ReturnType; setUnreadInfo: Dispatch>>; hideReadsRef: React.MutableRefObject; @@ -460,7 +460,7 @@ export function useTimelineSync({ useCallback(() => { if (!alive()) return; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); - scrollToBottom(); + scrollToBottom('instant'); }, [alive, room, scrollToBottom]) ); @@ -490,7 +490,7 @@ export function useTimelineSync({ setUnreadInfo(getRoomUnreadInfo(room)); } - scrollToBottom(); + scrollToBottom(getSender.call(mEvt) === mx.getUserId() ? 'instant' : 'smooth'); lastScrolledAtEventsLengthRef.current = eventsLengthRef.current + 1; setTimeline((ct) => ({ ...ct })); @@ -528,7 +528,7 @@ export function useTimelineSync({ resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); if (wasAtBottom) { - scrollToBottom(); + scrollToBottom('instant'); } }, [room, isAtBottomRef, scrollToBottom]) ); @@ -565,7 +565,7 @@ export function useTimelineSync({ if (eventsLength <= lastScrolledAtEventsLengthRef.current && !resetAutoScrollPending) return; lastScrolledAtEventsLengthRef.current = eventsLength; - scrollToBottom(); + scrollToBottom('instant'); }, [isAtBottom, liveTimelineLinked, eventsLength, scrollToBottom]); useEffect(() => { diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts index d3e85df09..e523f15a7 100644 --- a/src/app/hooks/useClientConfig.ts +++ b/src/app/hooks/useClientConfig.ts @@ -5,21 +5,6 @@ export type HashRouterConfig = { basename?: string; }; -export type ExperimentConfig = { - enabled?: boolean; - rolloutPercentage?: number; - variants?: string[]; - controlVariant?: string; -}; - -export type ExperimentSelection = { - key: string; - enabled: boolean; - rolloutPercentage: number; - variant: string; - inExperiment: boolean; -}; - export type ClientConfig = { defaultHomeserver?: number; homeserverList?: string[]; @@ -29,8 +14,6 @@ export type ClientConfig = { disableAccountSwitcher?: boolean; hideUsernamePasswordFields?: boolean; - experiments?: Record; - pushNotificationDetails?: { pushNotifyUrl?: string; vapidPublicKey?: string; @@ -72,56 +55,6 @@ export function useClientConfig(): ClientConfig { return config; } -const DEFAULT_CONTROL_VARIANT = 'control'; - -const normalizeRolloutPercentage = (value?: number): number => { - if (typeof value !== 'number' || Number.isNaN(value)) return 100; - if (value < 0) return 0; - if (value > 100) return 100; - return value; -}; - -const hashToUInt32 = (input: string): number => { - let hash = 0; - for (let index = 0; index < input.length; index += 1) { - hash = (hash * 131 + input.charCodeAt(index)) % 4294967291; - } - return hash; -}; - -export const selectExperimentVariant = ( - key: string, - experiment: ExperimentConfig | undefined, - subjectId: string | undefined -): ExperimentSelection => { - const controlVariant = experiment?.controlVariant ?? DEFAULT_CONTROL_VARIANT; - const variants = (experiment?.variants?.filter((v) => v.length > 0) ?? []).filter( - (v) => v !== controlVariant - ); - - const enabled = Boolean(experiment?.enabled); - const rolloutPercentage = normalizeRolloutPercentage(experiment?.rolloutPercentage); - - if (!enabled || !subjectId || variants.length === 0 || rolloutPercentage === 0) { - return { key, enabled, rolloutPercentage, variant: controlVariant, inExperiment: false }; - } - - // Two independent hashes keep rollout and variant assignment stable but decorrelated. - const rolloutBucket = hashToUInt32(`${key}:rollout:${subjectId}`) % 10000; - const rolloutCutoff = Math.floor(rolloutPercentage * 100); - if (rolloutBucket >= rolloutCutoff) { - return { key, enabled, rolloutPercentage, variant: controlVariant, inExperiment: false }; - } - - const variantIndex = hashToUInt32(`${key}:variant:${subjectId}`) % variants.length; - return { key, enabled, rolloutPercentage, variant: variants[variantIndex], inExperiment: true }; -}; - -export const useExperimentVariant = (key: string, subjectId?: string): ExperimentSelection => { - const clientConfig = useClientConfig(); - return selectExperimentVariant(key, clientConfig.experiments?.[key], subjectId); -}; - export const clientDefaultServer = (clientConfig: ClientConfig): string => clientConfig.homeserverList?.[clientConfig.defaultHomeserver ?? 0] ?? 'matrix.org'; diff --git a/src/app/hooks/useRoomNavigate.ts b/src/app/hooks/useRoomNavigate.ts index c2918d5ca..51555125c 100644 --- a/src/app/hooks/useRoomNavigate.ts +++ b/src/app/hooks/useRoomNavigate.ts @@ -37,20 +37,7 @@ export const useRoomNavigate = () => { const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId); const openSpaceTimeline = developerTools && spaceSelectedId === roomId; - // Developer-mode: view the space's own timeline (must be checked first). - if (openSpaceTimeline) { - navigate(getSpaceRoomPath(roomIdOrAlias, roomId, eventId), opts); - return; - } - - // DMs take priority over space membership so direct chats always open - // via the direct route, even when the room also belongs to a space. - if (mDirects.has(roomId)) { - navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts); - return; - } - - const orphanParents = getOrphanParents(roomToParents, roomId); + const orphanParents = openSpaceTimeline ? [roomId] : getOrphanParents(roomToParents, roomId); if (orphanParents.length > 0) { let parentSpace: string; if (spaceSelectedId && orphanParents.includes(spaceSelectedId)) { @@ -61,7 +48,15 @@ export const useRoomNavigate = () => { const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, parentSpace); - navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias, eventId), opts); + navigate( + getSpaceRoomPath(pSpaceIdOrAlias, openSpaceTimeline ? roomId : roomIdOrAlias, eventId), + opts + ); + return; + } + + if (mDirects.has(roomId)) { + navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts); return; } diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index ca0b82b81..caebe459a 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -514,12 +514,8 @@ function MessageNotifications() { }); } - // In-app audio: play when the app is in the foreground (has focus) and - // notification sounds are enabled for this notification type. - // Gating on hasFocus() rather than just visibilityState prevents a race - // where the page is still 'visible' for a brief window after the user - // backgrounds the app on mobile — hasFocus() flips false first. - if (notificationSound && isLoud && document.hasFocus()) { + // In-app audio: play when notification sounds are enabled AND this notification is loud. + if (notificationSound && isLoud) { playSound(); } }; diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx index 175b48f9d..e7b832df5 100644 --- a/src/app/pages/client/home/Home.tsx +++ b/src/app/pages/client/home/Home.tsx @@ -59,7 +59,6 @@ import { useClosedNavCategoriesAtom } from '$state/hooks/closedNavCategories'; import { stopPropagation } from '$utils/keyboard'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; -import { useExperimentVariant } from '$hooks/useClientConfig'; import { getRoomNotificationMode, useRoomsNotificationPreferencesContext, @@ -210,9 +209,8 @@ export function Home() { const createRoomSelected = useHomeCreateSelected(); const searchSelected = useHomeSearchSelected(); const bookmarksSelected = useHomeBookmarksSelected(); - const bookmarksExperiment = useExperimentVariant('messageBookmarks', mx.getUserId() ?? undefined); const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks'); - const showBookmarks = bookmarksExperiment.inExperiment || enableMessageBookmarks; + const showBookmarks = enableMessageBookmarks; const noRoomToDisplay = rooms.length === 0; const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom()); diff --git a/src/app/pages/client/inbox/Inbox.tsx b/src/app/pages/client/inbox/Inbox.tsx index d594a928e..ab42f7dcb 100644 --- a/src/app/pages/client/inbox/Inbox.tsx +++ b/src/app/pages/client/inbox/Inbox.tsx @@ -15,10 +15,8 @@ import { UnreadBadge } from '$components/unread-badge'; import { allInvitesAtom } from '$state/room-list/inviteList'; import { useNavToActivePathMapper } from '$hooks/useNavToActivePathMapper'; import { PageNav, PageNavContent, PageNavHeader } from '$components/page'; -import { useMatrixClient } from '$hooks/useMatrixClient'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; -import { useExperimentVariant } from '$hooks/useClientConfig'; function InvitesNavItem() { const invitesSelected = useInboxInvitesSelected(); @@ -76,11 +74,9 @@ function BookmarksNavItem() { export function Inbox() { useNavToActivePathMapper('inbox'); - const mx = useMatrixClient(); const notificationsSelected = useInboxNotificationsSelected(); - const bookmarksExperiment = useExperimentVariant('messageBookmarks', mx.getUserId() ?? undefined); const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks'); - const showBookmarks = bookmarksExperiment.inExperiment || enableMessageBookmarks; + const showBookmarks = enableMessageBookmarks; return ( diff --git a/src/client/slidingSync.ts b/src/client/slidingSync.ts index 5c147179c..43fdf39ea 100644 --- a/src/client/slidingSync.ts +++ b/src/client/slidingSync.ts @@ -34,9 +34,9 @@ export const LIST_SEARCH = 'search'; export const LIST_ROOM_SEARCH = 'room_search'; // Dynamic list key used for space-scoped room views. export const LIST_SPACE = 'space'; -// Higher limit avoids empty previews when the most-recent events are -// reactions/edits/state that useRoomLatestRenderedEvent skips over. -const LIST_TIMELINE_LIMIT = 3; +// One event of timeline per list room is enough to compute unread counts; +// the full history is loaded when the user opens the room. +const LIST_TIMELINE_LIMIT = 1; const DEFAULT_LIST_PAGE_SIZE = 250; const DEFAULT_POLL_TIMEOUT_MS = 20000; const DEFAULT_MAX_ROOMS = 5000; From fd9e0079525be17d2f6a0e62f3366df8afc61a59 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 20:50:42 -0400 Subject: [PATCH 198/253] chore(bookmarks): fix branch validation issues --- src/app/features/bookmarks/useInitBookmarks.test.tsx | 11 ++++------- src/app/features/room/message/Message.tsx | 1 - 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/app/features/bookmarks/useInitBookmarks.test.tsx b/src/app/features/bookmarks/useInitBookmarks.test.tsx index 893b5d64c..afb24f953 100644 --- a/src/app/features/bookmarks/useInitBookmarks.test.tsx +++ b/src/app/features/bookmarks/useInitBookmarks.test.tsx @@ -44,9 +44,9 @@ const { accountDataCB, syncStateCB, mockMx } = vi.hoisted(() => { }; const store: Record = { - ['org.matrix.msc4438.bookmarks.index']: index, - ['org.matrix.msc4438.bookmark.bmk_aabb']: item, - ['org.matrix.msc4438.bookmark.bmk_ccdd']: deletedItem, + 'org.matrix.msc4438.bookmarks.index': index, + 'org.matrix.msc4438.bookmark.bmk_aabb': item, + 'org.matrix.msc4438.bookmark.bmk_ccdd': deletedItem, }; const mx = { @@ -67,10 +67,7 @@ vi.mock('$hooks/useMatrixClient', () => ({ })); vi.mock('$hooks/useAccountDataCallback', () => ({ - useAccountDataCallback: ( - _mx: unknown, - cb: (event: { getType: () => string }) => void - ) => { + useAccountDataCallback: (_mx: unknown, cb: (event: { getType: () => string }) => void) => { accountDataCB.current = cb; }, })); diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index 482a50768..04fc23563 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -219,7 +219,6 @@ export const MessageBookmarkItem = as< onClose?: () => void; } >(({ room, mEvent, onClose, ...props }, ref) => { - const mx = useMatrixClient(); const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks'); const eventId = mEvent.getId(); const isBookmarked = useIsBookmarked(room.roomId, eventId ?? ''); From e4e6b836b205d2fe15891c3307e44036c7adc28d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 22:33:59 -0400 Subject: [PATCH 199/253] fix(timeline): remove stale room scroll restore --- src/app/features/room/RoomTimeline.tsx | 169 +++++-------------------- 1 file changed, 35 insertions(+), 134 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 325803e6f..10e98eb78 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -14,7 +14,6 @@ import { useAtomValue, useSetAtom } from 'jotai'; import { PushProcessor, Room, Direction } from '$types/matrix-sdk'; import classNames from 'classnames'; import { VList, VListHandle } from 'virtua'; -import { roomScrollCache, RoomScrollCache } from '$utils/roomScrollCache'; import { as, Box, @@ -74,7 +73,6 @@ import { getFirstLinkedTimeline, getInitialTimeline, getEventIdAbsoluteIndex, - getTimelineHeadEventIds, } from '$utils/timeline'; import { useTimelineSync } from '$hooks/timeline/useTimelineSync'; import { useTimelineActions } from '$hooks/timeline/useTimelineActions'; @@ -172,14 +170,7 @@ export function RoomTimeline({ onEditLastMessageRef, }: Readonly) { const mx = useMatrixClient(); - const mxUserId = mx.getUserId()!; const initialUnreadInfo = getRoomUnreadInfo(room, true); - const initialTimelineHeadEventIds = eventId - ? [] - : getTimelineHeadEventIds(getInitialTimeline(room).linkedTimelines); - const initialScrollCache = eventId - ? undefined - : roomScrollCache.load(mxUserId, room.roomId, initialTimelineHeadEventIds); const alive = useAlive(); const { editId, handleEdit } = useMessageEdit(editor, { onReset: onEditorReset, alive }); @@ -258,9 +249,8 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); - const scrollCacheForRoomRef = useRef(initialScrollCache); const [atBottomState, setAtBottomState] = useState( - eventId ? false : (initialScrollCache?.atBottom ?? !initialUnreadInfo?.scrollTo) + eventId ? false : !initialUnreadInfo?.scrollTo ); const atBottomRef = useRef(atBottomState); const setAtBottom = useCallback((val: boolean) => { @@ -292,18 +282,7 @@ export function RoomTimeline({ isReadyRef.current = isReady; if (currentRoomIdRef.current !== room.roomId) { - const nextInitialTimeline = eventId ? undefined : getInitialTimeline(room); - const nextTimelineHeadEventIds = nextInitialTimeline - ? getTimelineHeadEventIds(nextInitialTimeline.linkedTimelines) - : []; - const nextScrollCache = eventId - ? undefined - : roomScrollCache.load(mxUserId, room.roomId, nextTimelineHeadEventIds); const nextUnreadInfo = getRoomUnreadInfo(room, true); - // Load incoming room's scroll cache (undefined for first-visit rooms). - // Covers the rare case where room prop changes without a remount. - scrollCacheForRoomRef.current = nextScrollCache; - hasInitialScrolledRef.current = false; currentRoomIdRef.current = room.roomId; pendingReadyRef.current = false; @@ -314,7 +293,7 @@ export function RoomTimeline({ } setIsReady(false); // Reset per-room scroll/layout state so the new room starts clean. - setAtBottom(eventId ? false : (nextScrollCache?.atBottom ?? !nextUnreadInfo?.scrollTo)); + setAtBottom(eventId ? false : !nextUnreadInfo?.scrollTo); setShift(false); setTopSpacerHeight(0); topSpacerHeightRef.current = 0; @@ -324,20 +303,6 @@ export function RoomTimeline({ const processedEventsRef = useRef([]); const timelineSyncRef = useRef(null as unknown as typeof timelineSync); - const saveRoomScrollState = useCallback( - (cache: RoomScrollCache['cache'], scrollOffset: number, atBottom: boolean) => { - if (eventId) return; - - roomScrollCache.save(mxUserId, room.roomId, { - cache, - scrollOffset, - atBottom, - headEventIds: getTimelineHeadEventIds(timelineSyncRef.current.timeline.linkedTimelines), - }); - }, - [eventId, mxUserId, room.roomId] - ); - const scrollToBottom = useCallback(() => { if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; @@ -395,61 +360,36 @@ export function RoomTimeline({ timelineSync.liveTimelineLinked && vListRef.current ) { - const savedCache = scrollCacheForRoomRef.current; hasInitialScrolledRef.current = true; - - if (savedCache) { - // Revisiting a room with a cached scroll state — restore position - // immediately and skip the 80 ms stabilisation timer entirely. - // Guard: only reveal when processedEvents are populated. If they're - // still empty (React hasn't yet processed the new timeline), defer - // to the pendingReady recovery path which runs on the next render. - if (processedEventsRef.current.length === 0) { - pendingReadyRef.current = true; - } else { - if (savedCache.atBottom) { - vListRef.current.scrollTo(vListRef.current.scrollSize); - } else { - vListRef.current.scrollTo(savedCache.scrollOffset); + // Scroll to bottom, then wait 80 ms for VList to finish measuring item + // heights before revealing the timeline. + vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); + // Store in a ref rather than a local so subsequent eventsLength changes + // (e.g. the onLifecycle timeline reset firing within 80 ms) do NOT + // cancel this timer through the useLayoutEffect cleanup. + initialScrollTimerRef.current = setTimeout(() => { + initialScrollTimerRef.current = undefined; + if (processedEventsRef.current.length > 0) { + vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { + align: 'end', + }); + const v = vListRef.current; + // If backward pagination can still fill the viewport, delay revealing + // until that pagination settles so the user never sees the 3→60 event jump. + const needsFill = + canPaginateBackRef.current && + v && + v.scrollSize <= v.viewportSize + 300 && + backwardStatusRef.current !== 'error'; + if (needsFill) { + readyBlockedByPaginationRef.current = true; + return; } setIsReady(true); + } else { + pendingReadyRef.current = true; } - } else { - // First visit — scroll to bottom, then wait 80 ms for VList to finish - // measuring item heights before revealing the timeline. - vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); - // Store in a ref rather than a local so subsequent eventsLength changes - // (e.g. the onLifecycle timeline reset firing within 80 ms) do NOT - // cancel this timer through the useLayoutEffect cleanup. - initialScrollTimerRef.current = setTimeout(() => { - initialScrollTimerRef.current = undefined; - if (processedEventsRef.current.length > 0) { - vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { - align: 'end', - }); - const v = vListRef.current; - // If backward pagination can still fill the viewport, delay revealing - // until that pagination settles so the user never sees the 3→60 event jump. - const needsFill = - canPaginateBackRef.current && - v && - v.scrollSize <= v.viewportSize + 300 && - backwardStatusRef.current !== 'error'; - if (needsFill) { - readyBlockedByPaginationRef.current = true; - return; - } - // Persist the now-measured item heights so the next visit to this room - // can provide them to VList upfront and skip this 80 ms wait entirely. - if (v) { - saveRoomScrollState(v.cache, v.scrollOffset, true); - } - setIsReady(true); - } else { - pendingReadyRef.current = true; - } - }, 80); - } + }, 80); } // No cleanup return — the timer must survive eventsLength fluctuations. // It is cancelled on unmount by the dedicated effect below. @@ -458,7 +398,6 @@ export function RoomTimeline({ timelineSync.liveTimelineLinked, eventId, room.roomId, - saveRoomScrollState, ]); // Cancel the initial-scroll timer on unmount (the useLayoutEffect above @@ -499,14 +438,8 @@ export function RoomTimeline({ if (canPaginateBackRef.current && v.scrollSize <= v.viewportSize + 100) return; readyBlockedByPaginationRef.current = false; v.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); - saveRoomScrollState(v.cache, v.scrollOffset, true); setIsReady(true); - }, [ - timelineSync.backwardStatus, - timelineSync.eventsLength, - timelineSync.canPaginateBack, - saveRoomScrollState, - ]); + }, [timelineSync.backwardStatus, timelineSync.eventsLength, timelineSync.canPaginateBack]); const recalcTopSpacer = useCallback(() => { const v = vListRef.current; @@ -921,16 +854,6 @@ export function RoomTimeline({ setAtBottom(isNowAtBottom); } - // Keep the scroll cache fresh so the next visit to this room can restore - // position (and skip the 80 ms measurement wait) immediately on mount. - // Skip when viewing a historical slice via eventId: those item heights are - // for a sparse subset of events and would corrupt the cache for the next - // live-timeline visit, producing stale VList measurements and making the - // room appear to be at the wrong position (or visually empty) on re-entry. - if (!eventId) { - saveRoomScrollState(v.cache, offset, isNowAtBottom); - } - if (offset < 500 && canPaginateBackRef.current && backwardStatusRef.current === 'idle') { timelineSyncRef.current.handleTimelinePagination(true); } @@ -942,19 +865,17 @@ export function RoomTimeline({ timelineSyncRef.current.handleTimelinePagination(false); } }, - [eventId, saveRoomScrollState, setAtBottom] + [setAtBottom] ); const showLoadingPlaceholders = timelineSync.eventsLength === 0 && (!isReady || timelineSync.canPaginateBack || timelineSync.backwardStatus === 'loading'); - // Show a skeleton overlay when content is not ready and there is no - // cached scroll state to restore from (first visit or timeline reset). + // Show a skeleton overlay while content is hidden for measurement. // The VList still renders underneath at opacity 0 so it can measure real // item heights — the overlay just gives the user something to look at. - const showSkeletonOverlay = - !isReady && !scrollCacheForRoomRef.current && !showLoadingPlaceholders; + const showSkeletonOverlay = !isReady && !showLoadingPlaceholders; let backPaginationJSX: ReactNode | undefined; if (timelineSync.canPaginateBack || timelineSync.backwardStatus !== 'idle') { @@ -1044,7 +965,7 @@ export function RoomTimeline({ ignoredUsersSet, showHiddenEvents, showTombstoneEvents, - mxUserId, + mxUserId: mx.getUserId(), readUptoEventId: readUptoEventIdRef.current, hideMembershipEvents, hideNickAvatarEvents, @@ -1062,28 +983,9 @@ export function RoomTimeline({ if (!pendingReadyRef.current) return; if (processedEvents.length === 0) return; pendingReadyRef.current = false; - - // If there's a cached scroll state (deferred from the initial-scroll - // path because processedEvents weren't ready yet), restore that position - // instead of blindly scrolling to bottom. - const savedCache = scrollCacheForRoomRef.current; - if (savedCache) { - if (savedCache.atBottom) { - vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); - } else { - vListRef.current?.scrollTo(savedCache.scrollOffset); - } - } else { - vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); - } - - // Save now so the next visit skips the timer. - const v = vListRef.current; - if (v) { - saveRoomScrollState(v.cache, v.scrollOffset, savedCache?.atBottom ?? true); - } + vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); setIsReady(true); - }, [processedEvents.length, saveRoomScrollState]); + }, [processedEvents.length]); useEffect(() => { if (!onEditLastMessageRef) return; @@ -1210,7 +1112,6 @@ export function RoomTimeline({ key={room.roomId} ref={vListRef} data={processedEvents} - cache={!eventId ? scrollCacheForRoomRef.current?.cache : undefined} shift={shift} className={css.messageList} style={{ From abc83a23997175d4b6eea19c247d3310b8465103 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 22:35:14 -0400 Subject: [PATCH 200/253] chore(timeline): fix room timeline formatting --- src/app/features/room/RoomTimeline.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 10e98eb78..dddd87a68 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -393,12 +393,7 @@ export function RoomTimeline({ } // No cleanup return — the timer must survive eventsLength fluctuations. // It is cancelled on unmount by the dedicated effect below. - }, [ - timelineSync.eventsLength, - timelineSync.liveTimelineLinked, - eventId, - room.roomId, - ]); + }, [timelineSync.eventsLength, timelineSync.liveTimelineLinked, eventId, room.roomId]); // Cancel the initial-scroll timer on unmount (the useLayoutEffect above // intentionally does not cancel it when deps change). From 7835ed1ce054f36910b25ea68459ee91a7d650f6 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 22:51:52 -0400 Subject: [PATCH 201/253] feat(timeline): restore room cache by event anchor --- src/app/features/room/RoomTimeline.tsx | 233 ++++++++++++++++++++++++- src/app/utils/roomScrollCache.test.ts | 116 +++++++----- src/app/utils/roomScrollCache.ts | 59 +++++-- 3 files changed, 343 insertions(+), 65 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index dddd87a68..502119bf4 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -14,6 +14,12 @@ import { useAtomValue, useSetAtom } from 'jotai'; import { PushProcessor, Room, Direction } from '$types/matrix-sdk'; import classNames from 'classnames'; import { VList, VListHandle } from 'virtua'; +import { + roomScrollCache, + RoomScrollCache, + RoomScrollFingerprint, + RoomScrollPosition, +} from '$utils/roomScrollCache'; import { as, Box, @@ -154,6 +160,19 @@ const getDayDividerText = (ts: number) => { return timeDayMonthYear(ts); }; +const TIMELINE_ANCHOR_SELECTOR = '[data-timeline-event-id]'; +const buildRoomScrollFingerprint = ( + eventIds: string[], + readUptoEventId: string | undefined, + layoutKey: string +): RoomScrollFingerprint => ({ + eventCount: eventIds.length, + headEventIds: eventIds.slice(0, 5), + tailEventIds: eventIds.slice(-5), + readUptoEventId, + layoutKey, +}); + export type RoomTimelineProps = { room: Room; eventId?: string; @@ -249,6 +268,7 @@ export function RoomTimeline({ const setOpenThread = useSetAtom(openThreadAtom); const vListRef = useRef(null); + const scrollCacheForRoomRef = useRef(undefined); const [atBottomState, setAtBottomState] = useState( eventId ? false : !initialUnreadInfo?.scrollTo ); @@ -276,6 +296,11 @@ export function RoomTimeline({ // and reveals content once pagination is idle and the viewport is filled. const readyBlockedByPaginationRef = useRef(false); const currentRoomIdRef = useRef(room.roomId); + const restoreExactOffsetRef = useRef(false); + const currentScrollFingerprintRef = useRef(undefined); + const saveRoomScrollStateRef = useRef< + ((measurementCache: RoomScrollCache['measurementCache'], atBottom: boolean) => void) | undefined + >(undefined); const [isReady, setIsReady] = useState(false); const isReadyRef = useRef(false); @@ -283,10 +308,12 @@ export function RoomTimeline({ if (currentRoomIdRef.current !== room.roomId) { const nextUnreadInfo = getRoomUnreadInfo(room, true); + scrollCacheForRoomRef.current = undefined; hasInitialScrolledRef.current = false; currentRoomIdRef.current = room.roomId; pendingReadyRef.current = false; readyBlockedByPaginationRef.current = false; + restoreExactOffsetRef.current = false; if (initialScrollTimerRef.current !== undefined) { clearTimeout(initialScrollTimerRef.current); initialScrollTimerRef.current = undefined; @@ -347,6 +374,68 @@ export function RoomTimeline({ return events.indexOf(match); }, []); + const getProcessedIndexByEventId = useCallback((targetEventId: string): number | undefined => { + const index = processedEventsRef.current.findIndex((event) => event.id === targetEventId); + return index >= 0 ? index : undefined; + }, []); + + const getRenderedAnchorPosition = useCallback((): RoomScrollPosition | undefined => { + const container = messageListRef.current; + if (!container) return undefined; + + const containerTop = container.getBoundingClientRect().top; + const anchors = Array.from(container.querySelectorAll(TIMELINE_ANCHOR_SELECTOR)); + const firstVisibleAnchor = anchors.find((anchor) => anchor.getBoundingClientRect().bottom > containerTop); + if (!firstVisibleAnchor) return undefined; + + const eventId = firstVisibleAnchor.dataset.timelineEventId; + if (!eventId) return undefined; + + return { + kind: 'anchor', + eventId, + offset: firstVisibleAnchor.getBoundingClientRect().top - containerTop, + }; + }, []); + + const restoreRoomScrollPosition = useCallback( + (position: RoomScrollPosition, exactOffset: boolean) => { + const v = vListRef.current; + if (!v) return false; + + if (position.kind === 'live') { + scrollToBottom(); + return true; + } + + const processedIndex = getProcessedIndexByEventId(position.eventId); + if (processedIndex === undefined) return false; + + v.scrollToIndex(processedIndex, { align: 'start' }); + + if (!exactOffset) return true; + + requestAnimationFrame(() => { + const container = messageListRef.current; + if (!container) return; + + const anchor = Array.from( + container.querySelectorAll(TIMELINE_ANCHOR_SELECTOR) + ).find((element) => element.dataset.timelineEventId === position.eventId); + if (!anchor) return; + + const currentOffset = anchor.getBoundingClientRect().top - container.getBoundingClientRect().top; + const delta = currentOffset - position.offset; + if (Math.abs(delta) > 2) { + vListRef.current?.scrollTo(v.scrollOffset + delta); + } + }); + + return true; + }, + [getProcessedIndexByEventId, scrollToBottom] + ); + useLayoutEffect(() => { if ( !eventId && @@ -361,6 +450,27 @@ export function RoomTimeline({ vListRef.current ) { hasInitialScrolledRef.current = true; + const savedCache = !unreadInfo?.scrollTo ? scrollCacheForRoomRef.current : undefined; + if (savedCache) { + if (processedEventsRef.current.length === 0) { + pendingReadyRef.current = true; + restoreExactOffsetRef.current = + savedCache.measurementCache !== undefined && + savedCache.fingerprint.layoutKey === currentScrollFingerprintRef.current?.layoutKey; + } else { + const restored = restoreRoomScrollPosition( + savedCache.position, + savedCache.measurementCache !== undefined && + savedCache.fingerprint.layoutKey === currentScrollFingerprintRef.current?.layoutKey + ); + if (restored) { + setAtBottom(savedCache.position.kind === 'live'); + setIsReady(true); + return; + } + } + } + // Scroll to bottom, then wait 80 ms for VList to finish measuring item // heights before revealing the timeline. vListRef.current.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); @@ -385,6 +495,7 @@ export function RoomTimeline({ readyBlockedByPaginationRef.current = true; return; } + saveRoomScrollStateRef.current?.(v?.cache, true); setIsReady(true); } else { pendingReadyRef.current = true; @@ -393,7 +504,15 @@ export function RoomTimeline({ } // No cleanup return — the timer must survive eventsLength fluctuations. // It is cancelled on unmount by the dedicated effect below. - }, [timelineSync.eventsLength, timelineSync.liveTimelineLinked, eventId, room.roomId]); + }, [ + eventId, + room.roomId, + restoreRoomScrollPosition, + setAtBottom, + timelineSync.eventsLength, + timelineSync.liveTimelineLinked, + unreadInfo?.scrollTo, + ]); // Cancel the initial-scroll timer on unmount (the useLayoutEffect above // intentionally does not cancel it when deps change). @@ -433,6 +552,7 @@ export function RoomTimeline({ if (canPaginateBackRef.current && v.scrollSize <= v.viewportSize + 100) return; readyBlockedByPaginationRef.current = false; v.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); + saveRoomScrollStateRef.current?.(v.cache, true); setIsReady(true); }, [timelineSync.backwardStatus, timelineSync.eventsLength, timelineSync.canPaginateBack]); @@ -849,6 +969,10 @@ export function RoomTimeline({ setAtBottom(isNowAtBottom); } + if (!eventId) { + saveRoomScrollState(v.cache, isNowAtBottom); + } + if (offset < 500 && canPaginateBackRef.current && backwardStatusRef.current === 'idle') { timelineSyncRef.current.handleTimelinePagination(true); } @@ -860,7 +984,7 @@ export function RoomTimeline({ timelineSyncRef.current.handleTimelinePagination(false); } }, - [setAtBottom] + [eventId, saveRoomScrollState, setAtBottom] ); const showLoadingPlaceholders = @@ -870,7 +994,8 @@ export function RoomTimeline({ // Show a skeleton overlay while content is hidden for measurement. // The VList still renders underneath at opacity 0 so it can measure real // item heights — the overlay just gives the user something to look at. - const showSkeletonOverlay = !isReady && !showLoadingPlaceholders; + const showSkeletonOverlay = + !isReady && !scrollCacheForRoomRef.current?.measurementCache && !showLoadingPlaceholders; let backPaginationJSX: ReactNode | undefined; if (timelineSync.canPaginateBack || timelineSync.backwardStatus !== 'idle') { @@ -953,6 +1078,44 @@ export function RoomTimeline({ [vListItemCount, timelineSync.timeline.linkedTimelines, timelineSync.mutationVersion] ); + const scrollLayoutKey = useMemo( + () => + [ + messageLayout, + messageSpacing, + hideReads, + hideMembershipEvents, + hideNickAvatarEvents, + showHiddenEvents, + showTombstoneEvents, + mediaAutoLoad, + showBundledPreview, + showUrlPreview, + showClientUrlPreview, + autoplayStickers, + autoplayEmojis, + hideMemberInReadOnly, + isReadOnly, + ].join(':'), + [ + messageLayout, + messageSpacing, + hideReads, + hideMembershipEvents, + hideNickAvatarEvents, + showHiddenEvents, + showTombstoneEvents, + mediaAutoLoad, + showBundledPreview, + showUrlPreview, + showClientUrlPreview, + autoplayStickers, + autoplayEmojis, + hideMemberInReadOnly, + isReadOnly, + ] + ); + const processedEvents = useProcessedTimeline({ items: vListIndices, linkedTimelines: timelineSync.timeline.linkedTimelines, @@ -970,6 +1133,41 @@ export function RoomTimeline({ processedEventsRef.current = processedEvents; + const currentScrollFingerprint = useMemo( + () => + buildRoomScrollFingerprint( + processedEvents.map((event) => event.id), + unreadInfo?.readUptoEventId, + scrollLayoutKey + ), + [processedEvents, scrollLayoutKey, unreadInfo?.readUptoEventId] + ); + currentScrollFingerprintRef.current = currentScrollFingerprint; + + if (!eventId) { + scrollCacheForRoomRef.current = roomScrollCache.load(mx.getUserId()!, room.roomId, currentScrollFingerprint); + } else { + scrollCacheForRoomRef.current = undefined; + } + + const saveRoomScrollState = useCallback( + (measurementCache: RoomScrollCache['measurementCache'], atBottom: boolean) => { + if (eventId) return; + + const position = + atBottom ? ({ kind: 'live' } as RoomScrollPosition) : getRenderedAnchorPosition(); + if (!position) return; + + roomScrollCache.save(mx.getUserId()!, room.roomId, { + measurementCache, + position, + fingerprint: currentScrollFingerprint, + }); + }, + [currentScrollFingerprint, eventId, getRenderedAnchorPosition, mx, room.roomId] + ); + saveRoomScrollStateRef.current = saveRoomScrollState; + // Recovery: if the 80 ms initial-scroll timer fired while processedEvents was // empty (timeline was mid-reset), scroll to bottom and reveal the timeline once // events repopulate. Fires on every processedEvents.length change but is @@ -978,9 +1176,16 @@ export function RoomTimeline({ if (!pendingReadyRef.current) return; if (processedEvents.length === 0) return; pendingReadyRef.current = false; - vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); + const savedCache = !unreadInfo?.scrollTo ? scrollCacheForRoomRef.current : undefined; + const restored = savedCache + ? restoreRoomScrollPosition(savedCache.position, restoreExactOffsetRef.current) + : false; + restoreExactOffsetRef.current = false; + if (!restored) { + vListRef.current?.scrollToIndex(processedEvents.length - 1, { align: 'end' }); + } setIsReady(true); - }, [processedEvents.length]); + }, [processedEvents.length, restoreRoomScrollPosition, unreadInfo?.scrollTo]); useEffect(() => { if (!onEditLastMessageRef) return; @@ -1107,6 +1312,7 @@ export function RoomTimeline({ key={room.roomId} ref={vListRef} data={processedEvents} + cache={!eventId ? scrollCacheForRoomRef.current?.measurementCache : undefined} shift={shift} className={css.messageList} style={{ @@ -1203,17 +1409,26 @@ export function RoomTimeline({ )} {backPaginationJSX} - {dividers} - {renderedEvent} +
+ {dividers} + {renderedEvent} +
); } return ( - +
{dividers} {renderedEvent} - +
); }} diff --git a/src/app/utils/roomScrollCache.test.ts b/src/app/utils/roomScrollCache.test.ts index 784c59fc4..eddd11071 100644 --- a/src/app/utils/roomScrollCache.test.ts +++ b/src/app/utils/roomScrollCache.test.ts @@ -1,10 +1,27 @@ import { describe, it, expect } from 'vitest'; -import { roomScrollCache } from './roomScrollCache'; +import { roomScrollCache, RoomScrollFingerprint, RoomScrollPosition } from './roomScrollCache'; // CacheSnapshot is opaque in tests β€” cast a plain object. -const fakeCache = () => ({}) as import('./roomScrollCache').RoomScrollCache['cache']; +const fakeCache = () => ({}) as import('./roomScrollCache').RoomScrollCache['measurementCache']; const userId = '@alice:test'; +const fingerprint = (overrides: Partial = {}): RoomScrollFingerprint => ({ + eventCount: 3, + headEventIds: ['$a', '$b'], + tailEventIds: ['$b', '$c'], + readUptoEventId: '$read', + layoutKey: 'compact:space', + ...overrides, +}); + +const position = (overrides: Partial> = {}) => + ({ + kind: 'anchor', + eventId: '$b', + offset: -24, + ...overrides, + }) as RoomScrollPosition; + describe('roomScrollCache', () => { it('load returns undefined for an unknown roomId', () => { expect(roomScrollCache.load(userId, '!unknown:test')).toBeUndefined(); @@ -12,10 +29,9 @@ describe('roomScrollCache', () => { it('stores and retrieves data for a roomId', () => { const data = { - cache: fakeCache(), - scrollOffset: 120, - atBottom: false, - headEventIds: ['$a', '$b'], + measurementCache: fakeCache(), + position: position(), + fingerprint: fingerprint(), }; roomScrollCache.save(userId, '!room1:test', data); expect(roomScrollCache.load(userId, '!room1:test')).toBe(data); @@ -23,16 +39,17 @@ describe('roomScrollCache', () => { it('overwrites existing data when saved again for the same roomId', () => { const first = { - cache: fakeCache(), - scrollOffset: 50, - atBottom: true, - headEventIds: ['$a', '$b'], + measurementCache: fakeCache(), + position: { kind: 'live' } as RoomScrollPosition, + fingerprint: fingerprint({ headEventIds: ['$a', '$b'] }), }; const second = { - cache: fakeCache(), - scrollOffset: 200, - atBottom: false, - headEventIds: ['$c', '$d'], + measurementCache: fakeCache(), + position: position({ eventId: '$d' }), + fingerprint: fingerprint({ + headEventIds: ['$c', '$d'], + tailEventIds: ['$d', '$e'], + }), }; roomScrollCache.save(userId, '!room2:test', first); roomScrollCache.save(userId, '!room2:test', second); @@ -41,16 +58,14 @@ describe('roomScrollCache', () => { it('keeps data for separate rooms independent', () => { const a = { - cache: fakeCache(), - scrollOffset: 10, - atBottom: true, - headEventIds: ['$a'], + measurementCache: fakeCache(), + position: { kind: 'live' } as RoomScrollPosition, + fingerprint: fingerprint({ headEventIds: ['$a'], tailEventIds: ['$a'], eventCount: 1 }), }; const b = { - cache: fakeCache(), - scrollOffset: 20, - atBottom: false, - headEventIds: ['$b'], + measurementCache: fakeCache(), + position: position({ eventId: '$b', offset: -12 }), + fingerprint: fingerprint({ headEventIds: ['$b'], tailEventIds: ['$b'], eventCount: 1 }), }; roomScrollCache.save(userId, '!roomA:test', a); roomScrollCache.save(userId, '!roomB:test', b); @@ -60,16 +75,14 @@ describe('roomScrollCache', () => { it('scopes data per userId', () => { const data1 = { - cache: fakeCache(), - scrollOffset: 100, - atBottom: true, - headEventIds: ['$a'], + measurementCache: fakeCache(), + position: { kind: 'live' } as RoomScrollPosition, + fingerprint: fingerprint({ headEventIds: ['$a'], tailEventIds: ['$a'], eventCount: 1 }), }; const data2 = { - cache: fakeCache(), - scrollOffset: 200, - atBottom: false, - headEventIds: ['$b'], + measurementCache: fakeCache(), + position: position({ eventId: '$b' }), + fingerprint: fingerprint({ headEventIds: ['$b'], tailEventIds: ['$b'], eventCount: 1 }), }; roomScrollCache.save('@alice:test', '!room:test', data1); roomScrollCache.save('@bob:test', '!room:test', data2); @@ -77,18 +90,43 @@ describe('roomScrollCache', () => { expect(roomScrollCache.load('@bob:test', '!room:test')).toBe(data2); }); - it('invalidates a cache when the current timeline head changes', () => { + it('drops only the measurement cache when the fingerprint changes', () => { const data = { - cache: fakeCache(), - scrollOffset: 120, - atBottom: false, - headEventIds: ['$a', '$b', '$c'], + measurementCache: fakeCache(), + position: position(), + fingerprint: fingerprint({ + eventCount: 4, + headEventIds: ['$a', '$b', '$c'], + tailEventIds: ['$b', '$c', '$d'], + }), }; roomScrollCache.save(userId, '!room3:test', data); - expect(roomScrollCache.load(userId, '!room3:test', ['$a', '$b', '$c', '$d'])).toBe(data); - expect(roomScrollCache.load(userId, '!room3:test', ['$x', '$a', '$b', '$c'])).toBeUndefined(); - expect(roomScrollCache.load(userId, '!room3:test', ['$a', '$x', '$c', '$d'])).toBeUndefined(); - expect(roomScrollCache.load(userId, '!room3:test', ['$a', '$b'])).toBeUndefined(); + expect(roomScrollCache.load(userId, '!room3:test', data.fingerprint)).toBe(data); + + const changedHead = roomScrollCache.load( + userId, + '!room3:test', + fingerprint({ + eventCount: 4, + headEventIds: ['$x', '$a', '$b'], + tailEventIds: ['$b', '$c', '$d'], + }) + ); + expect(changedHead?.measurementCache).toBeUndefined(); + expect(changedHead?.position).toEqual(data.position); + + const changedLayout = roomScrollCache.load( + userId, + '!room3:test', + fingerprint({ + eventCount: 4, + headEventIds: ['$a', '$b', '$c'], + tailEventIds: ['$b', '$c', '$d'], + layoutKey: 'modern:wide', + }) + ); + expect(changedLayout?.measurementCache).toBeUndefined(); + expect(changedLayout?.position).toEqual(data.position); }); }); diff --git a/src/app/utils/roomScrollCache.ts b/src/app/utils/roomScrollCache.ts index 21682604d..6e735a7c2 100644 --- a/src/app/utils/roomScrollCache.ts +++ b/src/app/utils/roomScrollCache.ts @@ -1,27 +1,47 @@ import { CacheSnapshot } from 'virtua'; +export type RoomScrollFingerprint = { + eventCount: number; + headEventIds: string[]; + tailEventIds: string[]; + readUptoEventId?: string; + layoutKey: string; +}; + +export type RoomScrollPosition = + | { + kind: 'live'; + } + | { + kind: 'anchor'; + eventId: string; + offset: number; + }; + export type RoomScrollCache = { /** VList item-size snapshot β€” restored via VList `cache=` prop on remount. */ - cache: CacheSnapshot; - /** Pixel scroll offset at the time the room was left. */ - scrollOffset: number; - /** Whether the view was pinned to the bottom (live) when the room was left. */ - atBottom: boolean; - /** - * Raw event IDs from the loaded head of the timeline when the snapshot was - * captured. Virtua's cache is index-based, so head changes invalidate it. - */ - headEventIds: string[]; + measurementCache?: CacheSnapshot; + /** Logical restore position captured from the rendered timeline. */ + position: RoomScrollPosition; + /** Timeline/layout fingerprint used to validate index-based measurements. */ + fingerprint: RoomScrollFingerprint; }; /** Session-scoped, per-room scroll cache. Not persisted across page reloads. */ const scrollCacheMap = new Map(); const cacheKey = (userId: string, roomId: string): string => `${userId}:${roomId}`; -const headMatches = (saved: string[], current: string[]): boolean => - saved.length > 0 && - current.length >= saved.length && - saved.every((eventId, index) => current[index] === eventId); +const fingerprintMatches = ( + saved: RoomScrollFingerprint, + current: RoomScrollFingerprint +): boolean => + saved.layoutKey === current.layoutKey && + saved.readUptoEventId === current.readUptoEventId && + saved.eventCount === current.eventCount && + saved.headEventIds.length > 0 && + saved.tailEventIds.length > 0 && + saved.headEventIds.every((eventId, index) => current.headEventIds[index] === eventId) && + saved.tailEventIds.every((eventId, index) => current.tailEventIds[index] === eventId); export const roomScrollCache = { save(userId: string, roomId: string, data: RoomScrollCache): void { @@ -30,12 +50,17 @@ export const roomScrollCache = { load( userId: string, roomId: string, - currentHeadEventIds?: string[] + currentFingerprint?: RoomScrollFingerprint ): RoomScrollCache | undefined { const cached = scrollCacheMap.get(cacheKey(userId, roomId)); if (!cached) return undefined; - if (!currentHeadEventIds) return cached; - if (!headMatches(cached.headEventIds, currentHeadEventIds)) return undefined; + if (!currentFingerprint) return cached; + if (!fingerprintMatches(cached.fingerprint, currentFingerprint)) { + return { + ...cached, + measurementCache: undefined, + }; + } return cached; }, }; From b4ee4eea15d30204a7a0d1bed35fe96d7dfc42ae Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 22:52:44 -0400 Subject: [PATCH 202/253] fix(timeline): resolve anchored cache restore wiring --- src/app/features/room/RoomTimeline.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 502119bf4..64dc95e39 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -385,7 +385,9 @@ export function RoomTimeline({ const containerTop = container.getBoundingClientRect().top; const anchors = Array.from(container.querySelectorAll(TIMELINE_ANCHOR_SELECTOR)); - const firstVisibleAnchor = anchors.find((anchor) => anchor.getBoundingClientRect().bottom > containerTop); + const firstVisibleAnchor = anchors.find( + (anchor) => anchor.getBoundingClientRect().bottom > containerTop + ); if (!firstVisibleAnchor) return undefined; const eventId = firstVisibleAnchor.dataset.timelineEventId; @@ -424,7 +426,8 @@ export function RoomTimeline({ ).find((element) => element.dataset.timelineEventId === position.eventId); if (!anchor) return; - const currentOffset = anchor.getBoundingClientRect().top - container.getBoundingClientRect().top; + const currentOffset = + anchor.getBoundingClientRect().top - container.getBoundingClientRect().top; const delta = currentOffset - position.offset; if (Math.abs(delta) > 2) { vListRef.current?.scrollTo(v.scrollOffset + delta); @@ -970,7 +973,7 @@ export function RoomTimeline({ } if (!eventId) { - saveRoomScrollState(v.cache, isNowAtBottom); + saveRoomScrollStateRef.current?.(v.cache, isNowAtBottom); } if (offset < 500 && canPaginateBackRef.current && backwardStatusRef.current === 'idle') { @@ -984,7 +987,7 @@ export function RoomTimeline({ timelineSyncRef.current.handleTimelinePagination(false); } }, - [eventId, saveRoomScrollState, setAtBottom] + [eventId, setAtBottom] ); const showLoadingPlaceholders = @@ -1145,7 +1148,11 @@ export function RoomTimeline({ currentScrollFingerprintRef.current = currentScrollFingerprint; if (!eventId) { - scrollCacheForRoomRef.current = roomScrollCache.load(mx.getUserId()!, room.roomId, currentScrollFingerprint); + scrollCacheForRoomRef.current = roomScrollCache.load( + mx.getUserId()!, + room.roomId, + currentScrollFingerprint + ); } else { scrollCacheForRoomRef.current = undefined; } @@ -1154,8 +1161,9 @@ export function RoomTimeline({ (measurementCache: RoomScrollCache['measurementCache'], atBottom: boolean) => { if (eventId) return; - const position = - atBottom ? ({ kind: 'live' } as RoomScrollPosition) : getRenderedAnchorPosition(); + const position = atBottom + ? ({ kind: 'live' } as RoomScrollPosition) + : getRenderedAnchorPosition(); if (!position) return; roomScrollCache.save(mx.getUserId()!, room.roomId, { From ed9915cb4094777a34018f160621be863c1e3ac1 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 22:55:33 -0400 Subject: [PATCH 203/253] fix(timeline): finalize anchored cache restore --- src/app/features/room/RoomTimeline.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 64dc95e39..797c794ca 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -390,12 +390,12 @@ export function RoomTimeline({ ); if (!firstVisibleAnchor) return undefined; - const eventId = firstVisibleAnchor.dataset.timelineEventId; - if (!eventId) return undefined; + const anchorEventId = firstVisibleAnchor.dataset.timelineEventId; + if (!anchorEventId) return undefined; return { kind: 'anchor', - eventId, + eventId: anchorEventId, offset: firstVisibleAnchor.getBoundingClientRect().top - containerTop, }; }, []); From efd857877d07fe428ae709dab9798d97ec3cdaf1 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 23:31:56 -0400 Subject: [PATCH 204/253] fix(timeline): align reset relinking with upstream --- .../hooks/timeline/useTimelineSync.test.tsx | 43 +--------------- src/app/hooks/timeline/useTimelineSync.ts | 49 ++----------------- 2 files changed, 7 insertions(+), 85 deletions(-) diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index e1fbb876c..46c445767 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -106,8 +106,8 @@ describe('useTimelineSync', () => { expect(scrollToBottom).not.toHaveBeenCalled(); }); - it('keeps a bottom-pinned user anchored after destructive TimelineReset', async () => { - const { room, timelineSet } = createRoom('!room:test', [{ getId: () => 'event-before' }]); + it('keeps a bottom-pinned user anchored after TimelineReset', async () => { + const { room, timelineSet } = createRoom(); const scrollToBottom = vi.fn(); renderHook(() => @@ -123,16 +123,7 @@ describe('useTimelineSync', () => { readUptoEventIdRef: { current: undefined }, }) ); - - // Replace with a new timeline object with a new last event (destructive reset) - const newTimeline = createTimeline([{ getId: () => 'event-after' }]); - timelineSet.getLiveTimeline = () => newTimeline as never; - await act(async () => { - // Simulate the SDK replacing the live timeline object, which is what - // a real TimelineReset does (resetLiveTimeline creates a new - // EventTimeline and swaps liveTimeline to it). - // getLiveTimeline was already updated above with newTimeline (new last event). timelineSet.emit(RoomEvent.TimelineReset); await Promise.resolve(); }); @@ -140,36 +131,6 @@ describe('useTimelineSync', () => { expect(scrollToBottom).toHaveBeenCalled(); }); - it('does not scroll after additive TimelineReset (same last event, new container)', async () => { - const { room, timelineSet } = createRoom('!room:test', [{ getId: () => 'same-event' }]); - const scrollToBottom = vi.fn(); - - renderHook(() => - useTimelineSync({ - room: room as Room, - mx: { getUserId: () => '@alice:test' } as never, - isAtBottom: true, - isAtBottomRef: { current: true }, - scrollToBottom, - unreadInfo: undefined, - setUnreadInfo: vi.fn(), - hideReadsRef: { current: false }, - readUptoEventIdRef: { current: undefined }, - }) - ); - - // Replace with a new timeline object but same last event ID (additive/structural reset) - const newTimeline = createTimeline([{ getId: () => 'same-event' }]); - timelineSet.getLiveTimeline = () => newTimeline as never; - - await act(async () => { - timelineSet.emit(RoomEvent.TimelineReset); - await Promise.resolve(); - }); - - expect(scrollToBottom).not.toHaveBeenCalled(); - }); - it('resets timeline state when room.roomId changes and eventId is not set', async () => { const roomOne = createRoom('!room:one'); const roomTwo = createRoom('!room:two'); diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index d08093324..511cb53c5 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -395,9 +395,6 @@ export function useTimelineSync({ | undefined >(); - const timelineRef = useRef(timeline); - timelineRef.current = timeline; - const resetAutoScrollPendingRef = useRef(false); const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines); @@ -541,48 +538,12 @@ export function useTimelineSync({ useLiveTimelineRefresh( room, useCallback(() => { - const newLinked = getInitialTimeline(room).linkedTimelines; - const prev = timelineRef.current.linkedTimelines; - if (prev.length === newLinked.length && prev.every((tl, i) => tl === newLinked[i])) { - return; - } - - // Only trigger the auto-scroll reset for destructive resets where the - // live-end event changed (e.g. reconnect). Sliding sync fires TimelineReset - // to replace the EventTimeline container while keeping the same live-end - // events β€” treating that as destructive would scroll the user unnecessarily. - const prevLastEventId = prev.at(-1)?.getEvents().at(-1)?.getId(); - - const applyUpdate = (linkedTimelines: EventTimeline[]) => { - const lastEventId = linkedTimelines.at(-1)?.getEvents().at(-1)?.getId(); - const isDestructive = prevLastEventId !== lastEventId; - if (isDestructive) { - const wasAtBottom = isAtBottomRef.current; - resetAutoScrollPendingRef.current = wasAtBottom; - if (wasAtBottom) scrollToBottom(); - } - setTimeline({ linkedTimelines }); - }; - - // If the new timeline is transiently empty (the SDK fires TimelineReset - // *before* it finishes adding events to the new timeline), defer the state - // update via a microtask so the SDK can finish populating the timeline. - // This prevents the briefly-empty timeline from triggering the blanked - // effect, which would hide the content and cause a visible flash. - if (getTimelinesEventsCount(newLinked) === 0 && getTimelinesEventsCount(prev) > 0) { - Promise.resolve().then(() => { - const refreshed = getInitialTimeline(room).linkedTimelines; - // If still empty after the microtask, the SDK may need more time. - // Skip the update β€” the blanked effect checks the SDK's live timeline - // directly and won't blank while the room genuinely has events. - if (getTimelinesEventsCount(refreshed) > 0) { - applyUpdate(refreshed); - } - }); - return; + const wasAtBottom = isAtBottomRef.current; + resetAutoScrollPendingRef.current = wasAtBottom; + setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); + if (wasAtBottom) { + scrollToBottom(); } - - applyUpdate(newLinked); }, [room, isAtBottomRef, scrollToBottom]) ); From ef017653e0b2a93bb35e4d6c8c854f9326fd0d2d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 19 Apr 2026 13:38:15 -0400 Subject: [PATCH 205/253] fix(presence): harden desktop auto-idle detection --- src/app/hooks/usePresenceAutoIdle.test.tsx | 13 +++++++ src/app/hooks/usePresenceAutoIdle.ts | 42 ++++++++++++++++++++-- 2 files changed, 52 insertions(+), 3 deletions(-) diff --git a/src/app/hooks/usePresenceAutoIdle.test.tsx b/src/app/hooks/usePresenceAutoIdle.test.tsx index 2fea1eddd..407e7f69c 100644 --- a/src/app/hooks/usePresenceAutoIdle.test.tsx +++ b/src/app/hooks/usePresenceAutoIdle.test.tsx @@ -170,6 +170,19 @@ describe('usePresenceAutoIdle', () => { expect(result.current).toBe(true); }); + it('still goes idle after the window loses focus', () => { + const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), { + wrapper, + }); + + act(() => { + window.dispatchEvent(new Event('blur')); + vi.advanceTimersByTime(5000); + }); + + expect(result.current).toBe(true); + }); + it('clears auto-idle when presenceMode changes away from online', () => { const { result, rerender } = renderHook( ({ mode }) => useAutoIdledReader(mockMx, mode, true, 5000), diff --git a/src/app/hooks/usePresenceAutoIdle.ts b/src/app/hooks/usePresenceAutoIdle.ts index c4f14a008..6dfad4968 100644 --- a/src/app/hooks/usePresenceAutoIdle.ts +++ b/src/app/hooks/usePresenceAutoIdle.ts @@ -6,6 +6,7 @@ import { createDebugLogger } from '$utils/debugLogger'; const debugLog = createDebugLogger('PresenceAutoIdle'); const ACTIVITY_EVENTS = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'wheel'] as const; +const IDLE_CHECK_INTERVAL_MS = 30_000; /** * Automatically transitions presence to idle after a configurable inactivity @@ -28,6 +29,8 @@ export function usePresenceAutoIdle( const setAutoIdled = useSetAtom(presenceAutoIdledAtom); const autoIdledRef = useRef(false); const timerRef = useRef(undefined); + const intervalRef = useRef(undefined); + const lastActivityAtRef = useRef(Date.now()); const clearTimer = useCallback(() => { if (timerRef.current !== undefined) { @@ -36,11 +39,19 @@ export function usePresenceAutoIdle( } }, []); + const clearIntervalTimer = useCallback(() => { + if (intervalRef.current !== undefined) { + window.clearInterval(intervalRef.current); + intervalRef.current = undefined; + } + }, []); + // Inactivity timer: go idle after timeoutMs without user input. useEffect(() => { const shouldAutoIdle = presenceMode === 'online' && sendPresence && timeoutMs > 0; if (!shouldAutoIdle) { clearTimer(); + clearIntervalTimer(); if (autoIdledRef.current) { autoIdledRef.current = false; setAutoIdled(false); @@ -49,19 +60,36 @@ export function usePresenceAutoIdle( } const goIdle = () => { + if (autoIdledRef.current) return; debugLog.info('general', 'Inactivity timeout β€” auto-idling'); autoIdledRef.current = true; setAutoIdled(true); }; + const checkIdleDeadline = () => { + const elapsedMs = Date.now() - lastActivityAtRef.current; + if (elapsedMs >= timeoutMs) { + goIdle(); + return; + } + clearTimer(); + timerRef.current = window.setTimeout(checkIdleDeadline, timeoutMs - elapsedMs); + }; + const handleActivity = () => { + lastActivityAtRef.current = Date.now(); clearTimer(); if (autoIdledRef.current) { debugLog.info('general', 'Activity detected β€” clearing auto-idle'); autoIdledRef.current = false; setAutoIdled(false); } - timerRef.current = window.setTimeout(goIdle, timeoutMs); + timerRef.current = window.setTimeout(checkIdleDeadline, timeoutMs); + }; + + const handleBlur = () => { + debugLog.info('general', 'Window blurred β€” keeping idle deadline active'); + checkIdleDeadline(); }; const handleVisibilityChange = () => { @@ -69,20 +97,28 @@ export function usePresenceAutoIdle( }; // Start the initial timer. - timerRef.current = window.setTimeout(goIdle, timeoutMs); + lastActivityAtRef.current = Date.now(); + timerRef.current = window.setTimeout(checkIdleDeadline, timeoutMs); + intervalRef.current = window.setInterval( + checkIdleDeadline, + Math.min(timeoutMs, IDLE_CHECK_INTERVAL_MS) + ); ACTIVITY_EVENTS.forEach((ev) => document.addEventListener(ev, handleActivity, { passive: true }) ); document.addEventListener('visibilitychange', handleVisibilityChange); window.addEventListener('focus', handleActivity); + window.addEventListener('blur', handleBlur); return () => { ACTIVITY_EVENTS.forEach((ev) => document.removeEventListener(ev, handleActivity)); document.removeEventListener('visibilitychange', handleVisibilityChange); window.removeEventListener('focus', handleActivity); + window.removeEventListener('blur', handleBlur); clearTimer(); + clearIntervalTimer(); }; - }, [clearTimer, presenceMode, sendPresence, setAutoIdled, timeoutMs]); + }, [clearIntervalTimer, clearTimer, presenceMode, sendPresence, setAutoIdled, timeoutMs]); // Multi-device sync: if another device sets us back to online, clear auto-idle. useEffect(() => { From 5814956c53568da1f08aa8006920f27a585b2eee Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 19 Apr 2026 13:38:16 -0400 Subject: [PATCH 206/253] fix(timeline): stabilize bottom pin and unread fallback --- src/app/features/room/RoomTimeline.tsx | 16 +++++++++++++--- src/app/utils/room.ts | 25 ------------------------- 2 files changed, 13 insertions(+), 28 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 797c794ca..35c364a00 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -160,6 +160,8 @@ const getDayDividerText = (ts: number) => { return timeDayMonthYear(ts); }; +const SCROLL_SETTLE_MS = 250; + const TIMELINE_ANCHOR_SELECTOR = '[data-timeline-event-id]'; const buildRoomScrollFingerprint = ( eventIds: string[], @@ -283,6 +285,7 @@ export function RoomTimeline({ const topSpacerHeightRef = useRef(0); const hasInitialScrolledRef = useRef(false); + const lastProgrammaticBottomPinAtRef = useRef(0); // Stored in a ref so eventsLength fluctuations (e.g. onLifecycle timeline reset // firing within the window) cannot cancel it via useLayoutEffect cleanup. const initialScrollTimerRef = useRef | undefined>(undefined); @@ -334,8 +337,10 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; + lastProgrammaticBottomPinAtRef.current = Date.now(); + setAtBottom(true); vListRef.current.scrollTo(vListRef.current.scrollSize); - }, []); + }, [setAtBottom]); const timelineSync = useTimelineSync({ room, @@ -936,6 +941,8 @@ export function RoomTimeline({ const distanceFromBottom = v.scrollSize - offset - v.viewportSize; const isNowAtBottom = distanceFromBottom < 100; + const withinSettleWindow = + Date.now() - lastProgrammaticBottomPinAtRef.current < SCROLL_SETTLE_MS; // When the user is pinned to the bottom and content grows (images, embeds, // video thumbnails loading), scrollSize increases while offset stays put, @@ -957,13 +964,16 @@ export function RoomTimeline({ // updates until the jump transition finishes and focusItem is cleared. if (timelineSyncRef.current.focusItem) return; - if (atBottomRef.current && !isNowAtBottom && contentGrew) { + if (atBottomRef.current && !isNowAtBottom && (contentGrew || withinSettleWindow)) { // Defer the chase to the next animation frame so VList finishes its // current layout pass. Synchronous scrollTo causes cascading scroll // events that produce visible jumps when images/embeds load. requestAnimationFrame(() => { const vl = vListRef.current; - if (vl && atBottomRef.current) vl.scrollTo(vl.scrollSize); + if (vl && atBottomRef.current) { + lastProgrammaticBottomPinAtRef.current = Date.now(); + vl.scrollTo(vl.scrollSize); + } }); return; } diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts index 3cebdb5c6..69d612af1 100644 --- a/src/app/utils/room.ts +++ b/src/app/utils/room.ts @@ -12,7 +12,6 @@ import { MatrixClient, MatrixEvent, NotificationCountType, - PushProcessor, RelationType, Room, RoomMember, @@ -332,30 +331,6 @@ export const getUnreadInfo = (room: Room, options?: UnreadInfoOptions): UnreadIn } } - // Fallback: SDK counters are stale/zero but there are receipt-confirmed unread - // messages. Walk the live timeline to compute real counts so the badge number - // and highlight colour reflect actual state rather than a hard-coded stub. - if (total === 0 && highlight === 0 && userId && roomHaveUnread(room.client, room)) { - const readUpToId = room.getEventReadUpTo(userId); - const liveEvents = room.getLiveTimeline().getEvents(); - let fallbackTotal = 0; - let fallbackHighlight = 0; - const pushProcessor = new PushProcessor(room.client); - for (let i = liveEvents.length - 1; i >= 0; i -= 1) { - const event = liveEvents[i]; - if (!event) break; - if (event.getId() === readUpToId) break; - if (isNotificationEvent(event, room, userId) && event.getSender() !== userId) { - fallbackTotal += 1; - const pushActions = pushProcessor.actionsForEvent(event); - if (pushActions?.tweaks?.highlight) fallbackHighlight += 1; - } - } - if (fallbackTotal > 0) { - return { roomId: room.roomId, highlight: fallbackHighlight, total: fallbackTotal }; - } - } - // For DMs with Default or AllMessages notification type: if there are unread messages, // ensure we show a notification badge (treat as highlight for badge color purposes). // This handles cases where push rules don't properly match (e.g., classic sync with From b2878b5b7edb796f8954883049bf12e6ffb69002 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 19 Apr 2026 14:03:29 -0400 Subject: [PATCH 207/253] fix(timeline): align initial room-fill thresholds --- src/app/features/room/RoomTimeline.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 35c364a00..99763c0c3 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -161,6 +161,7 @@ const getDayDividerText = (ts: number) => { }; const SCROLL_SETTLE_MS = 250; +const MIN_INITIAL_SCROLL_ROOM_PX = 300; const TIMELINE_ANCHOR_SELECTOR = '[data-timeline-event-id]'; const buildRoomScrollFingerprint = ( @@ -497,7 +498,7 @@ export function RoomTimeline({ const needsFill = canPaginateBackRef.current && v && - v.scrollSize <= v.viewportSize + 300 && + v.scrollSize <= v.viewportSize + MIN_INITIAL_SCROLL_ROOM_PX && backwardStatusRef.current !== 'error'; if (needsFill) { readyBlockedByPaginationRef.current = true; @@ -557,7 +558,11 @@ export function RoomTimeline({ const v = vListRef.current; if (!v) return; // Still not filled and can paginate more β€” keep waiting. - if (canPaginateBackRef.current && v.scrollSize <= v.viewportSize + 100) return; + if ( + canPaginateBackRef.current && + v.scrollSize <= v.viewportSize + MIN_INITIAL_SCROLL_ROOM_PX + ) + return; readyBlockedByPaginationRef.current = false; v.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); saveRoomScrollStateRef.current?.(v.cache, true); @@ -1257,7 +1262,7 @@ export function RoomTimeline({ const atTop = v.scrollOffset < 500; const noVisibleGrowth = processedEvents.length === processedLengthAtEffectStart; - const hasRealScrollRoom = v.scrollSize > v.viewportSize + 300; + const hasRealScrollRoom = v.scrollSize > v.viewportSize + MIN_INITIAL_SCROLL_ROOM_PX; if (!hasRealScrollRoom || (atTop && noVisibleGrowth)) { timelineSyncRef.current.handleTimelinePagination(true); From 1e15b4bd74cbf1fbc7c62c9dc5a0ad7caea3c614 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 13 Apr 2026 02:54:36 -0400 Subject: [PATCH 208/253] fix(notifications): open joined rooms at live timeline on notification click --- src/app/hooks/useNotificationJumper.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/hooks/useNotificationJumper.ts b/src/app/hooks/useNotificationJumper.ts index 43c358317..1c785d079 100644 --- a/src/app/hooks/useNotificationJumper.ts +++ b/src/app/hooks/useNotificationJumper.ts @@ -52,13 +52,17 @@ export function NotificationJumper() { const isJoined = room?.getMyMembership() === 'join'; if (isSyncing && isJoined) { - log.log('jumping to:', pending.roomId, pending.eventId); + // Always open joined rooms at the live timeline for notification clicks. + // Event-scoped navigation can create a sparse historical context where the + // room appears to contain only the notification event. + const targetEventId = undefined; + log.log('jumping to:', pending.roomId, targetEventId); jumpingRef.current = true; // Navigate directly to home or direct path β€” bypasses space routing which // on mobile shows the space-nav panel first instead of the room timeline. const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, pending.roomId); if (mDirects.has(pending.roomId)) { - navigate(getDirectRoomPath(roomIdOrAlias, pending.eventId)); + navigate(getDirectRoomPath(roomIdOrAlias, targetEventId)); } else { // If the room lives inside a space, route through the space path so // SpaceRouteRoomProvider can resolve it β€” HomeRouteRoomProvider only @@ -74,11 +78,11 @@ export function NotificationJumper() { getSpaceRoomPath( getCanonicalAliasOrRoomId(mx, parentSpace), roomIdOrAlias, - pending.eventId + targetEventId ) ); } else { - navigate(getHomeRoomPath(roomIdOrAlias, pending.eventId)); + navigate(getHomeRoomPath(roomIdOrAlias, targetEventId)); } } setPending(null); From 164a6b67b23b2ad2cf7bc0f10752b8edc339349d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 13 Apr 2026 02:58:37 -0400 Subject: [PATCH 209/253] fix(notifications): prefer live timeline before event-scoped jump --- src/app/hooks/useNotificationJumper.ts | 27 +++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/app/hooks/useNotificationJumper.ts b/src/app/hooks/useNotificationJumper.ts index 1c785d079..8a9f6aec2 100644 --- a/src/app/hooks/useNotificationJumper.ts +++ b/src/app/hooks/useNotificationJumper.ts @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef } from 'react'; import { useAtom, useAtomValue } from 'jotai'; import { useNavigate } from 'react-router-dom'; -import { SyncState, ClientEvent } from '$types/matrix-sdk'; +import { SyncState, ClientEvent, RoomEvent, Room, MatrixEvent } from '$types/matrix-sdk'; import { activeSessionIdAtom, pendingNotificationAtom } from '../state/sessions'; import { mDirectAtom } from '../state/mDirectList'; import { useSyncState } from './useSyncState'; @@ -52,10 +52,22 @@ export function NotificationJumper() { const isJoined = room?.getMyMembership() === 'join'; if (isSyncing && isJoined) { - // Always open joined rooms at the live timeline for notification clicks. - // Event-scoped navigation can create a sparse historical context where the - // room appears to contain only the notification event. - const targetEventId = undefined; + const liveEvents = + room?.getUnfilteredTimelineSet?.()?.getLiveTimeline?.()?.getEvents?.() ?? []; + const eventInLive = pending.eventId + ? liveEvents.some((event) => event.getId() === pending.eventId) + : false; + + // If the live timeline is empty the room data is not ready yet. + // Defer and retry on RoomEvent.Timeline so we can decide with real data. + if (!eventInLive && liveEvents.length === 0) { + log.log('live timeline empty, deferring jump...', { roomId: pending.roomId }); + return; + } + + // Keep event targeting when needed, but avoid event-scoped navigation for + // events already in the live timeline to prevent sparse historical context. + const targetEventId = eventInLive ? undefined : pending.eventId; log.log('jumping to:', pending.roomId, targetEventId); jumpingRef.current = true; // Navigate directly to home or direct path β€” bypasses space routing which @@ -121,11 +133,16 @@ export function NotificationJumper() { if (!pending) return undefined; const onRoom = () => performJumpRef.current(); + const onTimeline = (_event: MatrixEvent, eventRoom: Room | undefined) => { + if (eventRoom?.roomId === pending.roomId) performJumpRef.current(); + }; mx.on(ClientEvent.Room, onRoom); + mx.on(RoomEvent.Timeline, onTimeline); performJumpRef.current(); return () => { mx.removeListener(ClientEvent.Room, onRoom); + mx.removeListener(RoomEvent.Timeline, onTimeline); }; }, [pending, mx]); // performJump intentionally omitted β€” use ref above From 143e012b7338e2b45d6ac65694588b0c49d1996e Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 13 Apr 2026 03:21:33 -0400 Subject: [PATCH 210/253] fix(notifications): defer event-scoped jump until event appears in live timeline --- src/app/hooks/useNotificationJumper.ts | 43 ++++++++++++++++++++------ 1 file changed, 34 insertions(+), 9 deletions(-) diff --git a/src/app/hooks/useNotificationJumper.ts b/src/app/hooks/useNotificationJumper.ts index 8a9f6aec2..90df74293 100644 --- a/src/app/hooks/useNotificationJumper.ts +++ b/src/app/hooks/useNotificationJumper.ts @@ -12,6 +12,10 @@ import { getOrphanParents, guessPerfectParent } from '../utils/room'; import { roomToParentsAtom } from '../state/room/roomToParents'; import { createLogger } from '../utils/debug'; +// How long to wait for the notification event to appear in the live timeline +// before falling back to opening the room at the live bottom. +const JUMP_TIMEOUT_MS = 15_000; + export function NotificationJumper() { const [pending, setPending] = useAtom(pendingNotificationAtom); const activeSessionId = useAtomValue(activeSessionIdAtom); @@ -27,6 +31,9 @@ export function NotificationJumper() { // churn re-calls performJump (from the ClientEvent.Room listener or effect // re-runs) before React has committed the null, causing repeated navigation. const jumpingRef = useRef(false); + // Tracks when we first started waiting for the target event to appear in the + // live timeline. Reset whenever `pending` changes. + const jumpStartTimeRef = useRef(null); const performJump = useCallback(() => { if (!pending || jumpingRef.current) return; @@ -58,16 +65,33 @@ export function NotificationJumper() { ? liveEvents.some((event) => event.getId() === pending.eventId) : false; - // If the live timeline is empty the room data is not ready yet. - // Defer and retry on RoomEvent.Timeline so we can decide with real data. - if (!eventInLive && liveEvents.length === 0) { - log.log('live timeline empty, deferring jump...', { roomId: pending.roomId }); - return; + // Defer while the target event hasn't arrived in the live timeline yet. + // Navigating with an eventId not in the live timeline triggers a sparse + // historical context load β€” the room appears empty or shows only one message. + // Retry on each RoomEvent.Timeline until the event appears, then navigate + // with the eventId so the room scrolls to and highlights it in full context. + // After JUMP_TIMEOUT_MS fall back to opening the room at the live bottom. + if (pending.eventId && !eventInLive) { + if (jumpStartTimeRef.current === null) { + jumpStartTimeRef.current = Date.now(); + } + if (Date.now() - jumpStartTimeRef.current < JUMP_TIMEOUT_MS) { + log.log('event not yet in live timeline, deferring jump...', { + roomId: pending.roomId, + eventId: pending.eventId, + }); + return; + } + log.log('timed out waiting for event in live; falling back to live bottom', { + roomId: pending.roomId, + eventId: pending.eventId, + }); } - // Keep event targeting when needed, but avoid event-scoped navigation for - // events already in the live timeline to prevent sparse historical context. - const targetEventId = eventInLive ? undefined : pending.eventId; + // Pass eventId only when confirmed in the live timeline β€” scrolls to and + // highlights the event in full room context without a sparse historical load. + // Falls back to undefined (live bottom) when the event never appears in live. + const targetEventId = eventInLive ? pending.eventId : undefined; log.log('jumping to:', pending.roomId, targetEventId); jumpingRef.current = true; // Navigate directly to home or direct path β€” bypasses space routing which @@ -108,9 +132,10 @@ export function NotificationJumper() { } }, [pending, activeSessionId, mx, mDirects, roomToParents, navigate, setPending, log]); - // Reset the guard only when pending is replaced (new notification or cleared). + // Reset guards only when pending is replaced (new notification or cleared). useEffect(() => { jumpingRef.current = false; + jumpStartTimeRef.current = null; }, [pending]); // Keep a stable ref to the latest performJump so that the listeners below From 910d13a34bf0beb0f9ac75f93a873f4b0c714a65 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 17 Apr 2026 23:46:08 -0400 Subject: [PATCH 211/253] fix(notifications): improve notification jump reliability - Increase jump timeout from 15s to 30s for slow sync catch-up - Always pass eventId on navigation (even after timeout) so the room loads historical context around the notification message instead of dumping the user at live bottom Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/useNotificationJumper.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/app/hooks/useNotificationJumper.ts b/src/app/hooks/useNotificationJumper.ts index 90df74293..30d2259b8 100644 --- a/src/app/hooks/useNotificationJumper.ts +++ b/src/app/hooks/useNotificationJumper.ts @@ -13,8 +13,8 @@ import { roomToParentsAtom } from '../state/room/roomToParents'; import { createLogger } from '../utils/debug'; // How long to wait for the notification event to appear in the live timeline -// before falling back to opening the room at the live bottom. -const JUMP_TIMEOUT_MS = 15_000; +// before navigating with the eventId anyway (triggers historical context load). +const JUMP_TIMEOUT_MS = 30_000; export function NotificationJumper() { const [pending, setPending] = useAtom(pendingNotificationAtom); @@ -88,10 +88,11 @@ export function NotificationJumper() { }); } - // Pass eventId only when confirmed in the live timeline β€” scrolls to and - // highlights the event in full room context without a sparse historical load. - // Falls back to undefined (live bottom) when the event never appears in live. - const targetEventId = eventInLive ? pending.eventId : undefined; + // Pass eventId when confirmed in the live timeline (best case β€” scrolls to + // and highlights the event in full room context), OR when the timeout fires + // (triggers a historical context load so the user at least sees the message + // they tapped). Only omit eventId when we never had one in the first place. + const targetEventId = pending.eventId ?? undefined; log.log('jumping to:', pending.roomId, targetEventId); jumpingRef.current = true; // Navigate directly to home or direct path β€” bypasses space routing which From 67b1a114ca4202f40b0cad639d2c9e0e20d4ee2e Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 22:26:05 -0400 Subject: [PATCH 212/253] fix(notifications): guarantee jump timeout fallback --- src/app/hooks/useNotificationJumper.test.tsx | 121 +++++++++++++++++++ src/app/hooks/useNotificationJumper.ts | 40 +++++- 2 files changed, 158 insertions(+), 3 deletions(-) create mode 100644 src/app/hooks/useNotificationJumper.test.tsx diff --git a/src/app/hooks/useNotificationJumper.test.tsx b/src/app/hooks/useNotificationJumper.test.tsx new file mode 100644 index 000000000..f1076eaf4 --- /dev/null +++ b/src/app/hooks/useNotificationJumper.test.tsx @@ -0,0 +1,121 @@ +import { ReactNode } from 'react'; +import { act, render } from '@testing-library/react'; +import { Provider } from 'jotai'; +import { useHydrateAtoms } from 'jotai/utils'; +import { MemoryRouter } from 'react-router-dom'; +import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'; +import { SyncState } from '$types/matrix-sdk'; +import { getHomeRoomPath } from '$pages/pathUtils'; +import { activeSessionIdAtom, pendingNotificationAtom } from '$state/sessions'; +import { mDirectAtom } from '$state/mDirectList'; +import { roomToParentsAtom } from '$state/room/roomToParents'; +import { NotificationJumper } from './useNotificationJumper'; + +const navigateMock = vi.fn(); + +const roomTimelineEvents: { getId: () => string }[] = []; +const roomMock = { + roomId: '!room:test', + getMyMembership: vi.fn(() => 'join'), + getCanonicalAlias: vi.fn(() => undefined), + getUnfilteredTimelineSet: vi.fn(() => ({ + getLiveTimeline: () => ({ + getEvents: () => roomTimelineEvents, + }), + })), +}; + +const mxMock = { + getUserId: vi.fn(() => '@alice:test'), + getSyncState: vi.fn(() => SyncState.Syncing), + getRoom: vi.fn(() => roomMock), + getRooms: vi.fn(() => []), + on: vi.fn(), + removeListener: vi.fn(), +}; + +vi.mock('react-router-dom', async () => { + const actual = await vi.importActual('react-router-dom'); + return { + ...actual, + useNavigate: () => navigateMock, + }; +}); + +vi.mock('./useMatrixClient', () => ({ + useMatrixClient: () => mxMock, +})); + +vi.mock('./useSyncState', () => ({ + useSyncState: vi.fn(), +})); + +vi.mock('../utils/debug', () => ({ + createLogger: () => ({ + log: vi.fn(), + }), +})); + +type WrapperProps = { + children: ReactNode; +}; + +function HydrateAtoms({ children }: WrapperProps) { + useHydrateAtoms([ + [activeSessionIdAtom, '@alice:test'], + [pendingNotificationAtom, { roomId: '!room:test', eventId: '$event:test' }], + [mDirectAtom, new Set()], + [roomToParentsAtom, new Map()], + ]); + + return <>{children}; +} + +function HydratedWrapper({ children }: WrapperProps) { + return ( + + + {children} + + + ); +} + +describe('NotificationJumper', () => { + beforeEach(() => { + vi.useFakeTimers(); + navigateMock.mockReset(); + roomTimelineEvents.length = 0; + roomMock.getMyMembership.mockReturnValue('join'); + mxMock.getUserId.mockReturnValue('@alice:test'); + mxMock.getSyncState.mockReturnValue(SyncState.Syncing); + mxMock.getRoom.mockReturnValue(roomMock); + mxMock.getRooms.mockReturnValue([]); + mxMock.on.mockClear(); + mxMock.removeListener.mockClear(); + }); + + afterEach(() => { + vi.useRealTimers(); + }); + + it('navigates immediately when the target event is already in the live timeline', () => { + roomTimelineEvents.push({ getId: () => '$event:test' }); + + render(, { wrapper: HydratedWrapper }); + + expect(navigateMock).toHaveBeenCalledWith(getHomeRoomPath('!room:test', '$event:test')); + }); + + it('falls back after the timeout even if no further room events arrive', () => { + render(, { wrapper: HydratedWrapper }); + + expect(navigateMock).not.toHaveBeenCalled(); + + act(() => { + vi.advanceTimersByTime(30_000); + }); + + expect(navigateMock).toHaveBeenCalledWith(getHomeRoomPath('!room:test', '$event:test')); + }); +}); diff --git a/src/app/hooks/useNotificationJumper.ts b/src/app/hooks/useNotificationJumper.ts index 30d2259b8..71c376982 100644 --- a/src/app/hooks/useNotificationJumper.ts +++ b/src/app/hooks/useNotificationJumper.ts @@ -34,6 +34,14 @@ export function NotificationJumper() { // Tracks when we first started waiting for the target event to appear in the // live timeline. Reset whenever `pending` changes. const jumpStartTimeRef = useRef(null); + const jumpTimeoutRef = useRef | undefined>(undefined); + + const clearJumpTimeout = useCallback(() => { + if (jumpTimeoutRef.current !== undefined) { + clearTimeout(jumpTimeoutRef.current); + jumpTimeoutRef.current = undefined; + } + }, []); const performJump = useCallback(() => { if (!pending || jumpingRef.current) return; @@ -75,7 +83,14 @@ export function NotificationJumper() { if (jumpStartTimeRef.current === null) { jumpStartTimeRef.current = Date.now(); } - if (Date.now() - jumpStartTimeRef.current < JUMP_TIMEOUT_MS) { + const elapsedMs = Date.now() - jumpStartTimeRef.current; + if (elapsedMs < JUMP_TIMEOUT_MS) { + if (jumpTimeoutRef.current === undefined) { + jumpTimeoutRef.current = setTimeout(() => { + jumpTimeoutRef.current = undefined; + performJumpRef.current(); + }, JUMP_TIMEOUT_MS - elapsedMs); + } log.log('event not yet in live timeline, deferring jump...', { roomId: pending.roomId, eventId: pending.eventId, @@ -95,6 +110,7 @@ export function NotificationJumper() { const targetEventId = pending.eventId ?? undefined; log.log('jumping to:', pending.roomId, targetEventId); jumpingRef.current = true; + clearJumpTimeout(); // Navigate directly to home or direct path β€” bypasses space routing which // on mobile shows the space-nav panel first instead of the room timeline. const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, pending.roomId); @@ -131,13 +147,24 @@ export function NotificationJumper() { membership: room?.getMyMembership(), }); } - }, [pending, activeSessionId, mx, mDirects, roomToParents, navigate, setPending, log]); + }, [ + pending, + activeSessionId, + mx, + mDirects, + roomToParents, + navigate, + setPending, + log, + clearJumpTimeout, + ]); // Reset guards only when pending is replaced (new notification or cleared). useEffect(() => { + clearJumpTimeout(); jumpingRef.current = false; jumpStartTimeRef.current = null; - }, [pending]); + }, [pending, clearJumpTimeout]); // Keep a stable ref to the latest performJump so that the listeners below // always invoke the current version without adding performJump to their dep @@ -172,5 +199,12 @@ export function NotificationJumper() { }; }, [pending, mx]); // performJump intentionally omitted β€” use ref above + useEffect( + () => () => { + clearJumpTimeout(); + }, + [clearJumpTimeout] + ); + return null; } From a7f8c1aedae88cf41e943c5524d77c3f163a86cc Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:32:27 -0400 Subject: [PATCH 213/253] fix(sw): reuse preloaded session in handleMinimalPushPayload onPushNotification already fetches the persisted session and stores it in preloadedSession. Thread that through handleMinimalPushPayload's fallback chain so we skip the second cache.match() call on iOS restarts where the in-memory sessions Map is empty. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/sw.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/sw.ts b/src/sw.ts index d843963bd..e341e03f3 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -412,9 +412,19 @@ async function handleMinimalPushPayload( windowClients: readonly Client[] ): Promise { // On iOS the SW is killed and restarted for every push, clearing the in-memory sessions - // Map. Fall back to the Cache Storage copy that was written when the user last opened - // the app (same pattern as settings persistence). - const session = getAnyStoredSession() ?? (await loadPersistedSession()); + // Map. Fall back to the Cache Storage copy that was written when the user last opened + // the app (same pattern as settings persistence). If onPushNotification already loaded + // the persisted session into preloadedSession, reuse it to avoid a second cache read. + // Last resort: if neither the in-memory map nor the cache has a session, ask any live + // window client for a fresh token (the app may be backgrounded but still alive in memory). + let session = getAnyStoredSession() ?? preloadedSession ?? (await loadPersistedSession()); + if (!session && windowClients.length > 0) { + console.debug('[SW push] no cached session, requesting from window clients'); + const results = await Promise.all( + Array.from(windowClients).map((c) => requestSessionWithTimeout(c.id, 1500)) + ); + session = results.find((r) => r != null) ?? undefined; + } if (!session) { // No session anywhere β€” app was never opened since install, or the user logged out. From ce68c59e7aefcb2105c8e8803c20010c13749f24 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 13:35:58 -0400 Subject: [PATCH 214/253] fix(sw): improve push notification reliability and encrypted room handling - Use getEffectiveEvent()?.type for decrypted event type in BackgroundNotifications - Fix isEncryptedRoom flag in pushNotification.ts (was hardcoded false) - Add isEncryptedRoom: true to relay payload when decryption succeeds - Wrap push handlers in try/catch with fallback notifications (prevents silent drops on iOS) - Parallelize requestDecryptionFromClient with Promise.any + shared timeout (was sequential) --- .../pages/client/BackgroundNotifications.tsx | 7 +- src/sw.ts | 92 +++++++++++++------ src/sw/pushNotification.ts | 2 +- 3 files changed, 70 insertions(+), 31 deletions(-) diff --git a/src/app/pages/client/BackgroundNotifications.tsx b/src/app/pages/client/BackgroundNotifications.tsx index 395718223..6b712bb50 100644 --- a/src/app/pages/client/BackgroundNotifications.tsx +++ b/src/app/pages/client/BackgroundNotifications.tsx @@ -414,6 +414,11 @@ export function BackgroundNotifications() { const isEncryptedRoom = !!getStateEvent(room, StateEvent.RoomEncryption); + // After decryption, getType() still returns the wire type (m.room.encrypted). + // Use the effective event type to get the decrypted type when available. + const effectiveEventType = + (mEvent.getEffectiveEvent()?.type as string) ?? mEvent.getType(); + notifiedEventsRef.current.add(dedupeId); // Cap the set so it doesn't grow unbounded if (notifiedEventsRef.current.size > 200) { @@ -428,7 +433,7 @@ export function BackgroundNotifications() { recipientId: session.userId, previewText: resolveNotificationPreviewText({ content: mEvent.getContent(), - eventType: mEvent.getType(), + eventType: effectiveEventType, isEncryptedRoom, showMessageContent: showMessageContentRef.current, showEncryptedMessageContent: showEncryptedMessageContentRef.current, diff --git a/src/sw.ts b/src/sw.ts index e341e03f3..a4724632a 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -369,36 +369,40 @@ async function requestDecryptionFromClient( ): Promise { const eventId = rawEvent.event_id as string; - // Chain clients sequentially using reduce to avoid await-in-loop and for-of. - return Array.from(windowClients).reduce( - async (prevPromise, client) => { - const prev = await prevPromise; - if (prev?.success) return prev; - - const promise = new Promise((resolve) => { - decryptionPendingMap.set(eventId, resolve); - }); + // Try all window clients in parallel with a single shared timeout. + // This avoids the worst case of N Γ— 5s sequential timeouts when multiple + // tabs are frozen (common on iOS). + const clientAttempts = Array.from(windowClients).map((client) => { + const promise = new Promise((resolve) => { + decryptionPendingMap.set(eventId, resolve); + }); - const timeout = new Promise((resolve) => { - setTimeout(() => { - decryptionPendingMap.delete(eventId); - console.warn('[SW decryptRelay] timed out waiting for client', client.id); - resolve(undefined); - }, 5000); - }); + try { + (client as WindowClient).postMessage({ type: 'decryptPushEvent', rawEvent }); + } catch (err) { + decryptionPendingMap.delete(eventId); + console.warn('[SW decryptRelay] postMessage error', err); + return Promise.resolve(undefined as DecryptionResult | undefined); + } - try { - (client as WindowClient).postMessage({ type: 'decryptPushEvent', rawEvent }); - } catch (err) { - decryptionPendingMap.delete(eventId); - console.warn('[SW decryptRelay] postMessage error', err); - return undefined; - } + return promise as Promise; + }); - return Promise.race([promise, timeout]); - }, - Promise.resolve(undefined) as Promise - ); + if (clientAttempts.length === 0) return undefined; + + const timeout = new Promise((resolve) => { + setTimeout(() => { + decryptionPendingMap.delete(eventId); + console.warn('[SW decryptRelay] timed out waiting for all clients'); + resolve(undefined); + }, 5000); + }); + + // Return as soon as any client succeeds or the shared timeout fires. + return Promise.race([ + Promise.any(clientAttempts).catch(() => undefined), + timeout, + ]); } /** @@ -505,6 +509,7 @@ async function handleMinimalPushPayload( // Prefer relay's room name (has m.direct / computed SDK name); fall back to state fetch. room_name: result.room_name || resolvedRoomName, room_avatar_url: notificationAvatarUrl, + isEncryptedRoom: true, }); } else { // App is frozen or fully closed β€” show "Encrypted message" fallback. @@ -804,11 +809,40 @@ const onPushNotification = async (event: PushEvent) => { // to relay decryption to an open app tab. if (isMinimalPushPayload(pushData)) { console.debug('[SW push] minimal payload detected β€” fetching event', pushData.event_id); - await handleMinimalPushPayload(pushData.room_id, pushData.event_id, clients); + try { + await handleMinimalPushPayload(pushData.room_id, pushData.event_id, clients); + } catch (err) { + console.error('[SW push] handleMinimalPushPayload failed:', err); + // Show a generic fallback so the user still sees something on iOS. + await self.registration.showNotification('New Message', { + body: undefined, + icon: '/public/res/logo-maskable/cinny-logo-maskable-180x180.png', + badge: '/public/res/logo-maskable/cinny-logo-maskable-72x72.png', + tag: `room-${pushData.room_id}`, + renotify: true, + data: { room_id: pushData.room_id, event_id: pushData.event_id }, + } as NotificationOptions); + } return; } - await handlePushNotificationPushData(pushData); + try { + await handlePushNotificationPushData(pushData); + } catch (err) { + console.error('[SW push] handlePushNotificationPushData failed:', err); + await self.registration.showNotification('New Message', { + body: undefined, + icon: '/public/res/logo-maskable/cinny-logo-maskable-180x180.png', + badge: '/public/res/logo-maskable/cinny-logo-maskable-72x72.png', + tag: pushData.room_id ? `room-${pushData.room_id}` : (pushData.event_id ?? 'Cinny'), + renotify: true, + data: { + room_id: pushData.room_id, + event_id: pushData.event_id, + user_id: pushData.user_id, + }, + } as NotificationOptions); + } }; // --------------------------------------------------------------------------- diff --git a/src/sw/pushNotification.ts b/src/sw/pushNotification.ts index 1152d3d44..73bc1a495 100644 --- a/src/sw/pushNotification.ts +++ b/src/sw/pushNotification.ts @@ -88,7 +88,7 @@ export const createPushNotifications = ( previewText: resolveNotificationPreviewText({ content: pushData?.content, eventType: pushData?.type, - isEncryptedRoom: false, + isEncryptedRoom: pushData?.isEncryptedRoom === true, showMessageContent: getNotificationSettings().showMessageContent, showEncryptedMessageContent: getNotificationSettings().showEncryptedMessageContent, }), From 84fadae476bc4410b1486526ca47d9d597c0df01 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 19 Apr 2026 13:38:15 -0400 Subject: [PATCH 215/253] fix(sw): add media and notification diagnostics --- src/sw.ts | 93 ++++++++++++++++++++++++++++++++++++++ src/sw/pushNotification.ts | 10 ++++ 2 files changed, 103 insertions(+) diff --git a/src/sw.ts b/src/sw.ts index d843963bd..fba4568ce 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -637,6 +637,99 @@ function fetchConfig(token: string): RequestInit { }; } +/** + * Fetch a media URL, retrying once with the most-current in-memory session on 401. + * + * There is a timing window between when the SDK refreshes its access token + * (tokenRefreshFunction resolves) and when the resulting pushSessionToSW() + * postMessage is processed by the SW. Media requests that land in this window + * are sent with the stale token and receive 401. By the time the retry runs, + * the setSession message will normally have been processed and sessions will + * hold the new token. + * + * A second timing window exists at startup: preloadedSession may hold a stale + * token but the live setSession from the page hasn't arrived yet. In that case + * the in-memory check yields no fresher token, so we ask the live client tab + * directly (requestSessionWithTimeout) before giving up. + */ +async function fetchMediaWithRetry( + url: string, + token: string, + redirect: RequestRedirect, + clientId: string +): Promise { + let response = await fetch(url, { ...fetchConfig(token), redirect }); + if (!isAuthFailureStatus(response.status)) return response; + + console.warn('[SW media] Initial authenticated fetch failed', { + url, + status: response.status, + clientId, + hasClientBoundSession: !!(clientId && sessions.get(clientId)), + hasPreloadedSession: !!preloadedSession, + }); + + const attemptedTokens = new Set([token]); + const retrySessions: Array<{ session: SessionInfo; source: string }> = []; + const seenSessions = new Set(); + + const addRetrySession = (session: SessionInfo | undefined, source: string) => { + if (!session || !validMediaRequest(url, session.baseUrl)) return; + const key = `${session.baseUrl}\x00${session.accessToken}`; + if (seenSessions.has(key)) return; + seenSessions.add(key); + retrySessions.push({ session, source }); + }; + + if (clientId) addRetrySession(sessions.get(clientId), 'client_session'); + getMatchingSessions(url).forEach((session, index) => + addRetrySession(session, `matching_session_${index}`) + ); + addRetrySession(preloadedSession, 'preloaded_session'); + addRetrySession(await loadPersistedSession(), 'persisted_session'); + (await getLiveWindowSessions(url, clientId)).forEach((session, index) => + addRetrySession(session, `live_window_${index}`) + ); + + console.debug('[SW media] Retry candidates collected', { + url, + candidateSources: retrySessions.map(({ source }) => source), + candidateCount: retrySessions.length, + }); + + // Try each plausible token once. This handles token-refresh races and ambiguous + // multi-account sessions on the same homeserver, including no-clientId requests. + // Sequential await is intentional: we want to try one token at a time until one succeeds. + /* eslint-disable no-await-in-loop */ + for (let i = 0; i < retrySessions.length; i += 1) { + const candidate = retrySessions[i]; + if (!candidate || attemptedTokens.has(candidate.session.accessToken)) { + // skip this candidate + } else { + attemptedTokens.add(candidate.session.accessToken); + console.debug('[SW media] Retrying with alternate session', { + url, + source: candidate.source, + attempt: i + 1, + }); + response = await fetch(url, { ...fetchConfig(candidate.session.accessToken), redirect }); + if (!isAuthFailureStatus(response.status)) return response; + console.warn('[SW media] Alternate session also failed auth', { + url, + source: candidate.source, + status: response.status, + }); + } + } + /* eslint-enable no-await-in-loop */ + + console.warn('[SW media] Exhausted authenticated retry candidates', { + url, + finalStatus: response.status, + attemptedTokenCount: attemptedTokens.size, + }); + return response; +} self.addEventListener('message', (event: ExtendableMessageEvent) => { if (event.data.type === 'togglePush') { const token = event.data?.token; diff --git a/src/sw/pushNotification.ts b/src/sw/pushNotification.ts index 1152d3d44..d5572094f 100644 --- a/src/sw/pushNotification.ts +++ b/src/sw/pushNotification.ts @@ -45,7 +45,17 @@ export const createPushNotifications = ( silent, data, }; + const existingNotifications = await self.registration.getNotifications(); + const replacedCount = existingNotifications.filter( + (notification) => notification.tag === tag + ).length; console.debug('[SW showNotification] title:', title, '| data:', JSON.stringify(data, null, 2)); + console.debug('[SW showNotification] tag diagnostics:', { + tag, + roomId, + renotify, + replacedCount, + }); await self.registration.showNotification(title, notifOptions as NotificationOptions); }; From c4ca608e4ce5f7cc69ebf643fa34e98b669415d9 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 19 Apr 2026 13:38:16 -0400 Subject: [PATCH 216/253] fix(timeline): stabilize bottom pin and unread fallback --- src/app/features/room/RoomTimeline.tsx | 55 +++++++++++++++++++++++++- src/app/utils/room.ts | 50 ----------------------- 2 files changed, 54 insertions(+), 51 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index d026ec1fa..887dc39f3 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -108,6 +108,20 @@ const getDayDividerText = (ts: number) => { return timeDayMonthYear(ts); }; +const SCROLL_SETTLE_MS = 250; + +const TIMELINE_ANCHOR_SELECTOR = '[data-timeline-event-id]'; +const buildRoomScrollFingerprint = ( + eventIds: string[], + readUptoEventId: string | undefined, + layoutKey: string +): RoomScrollFingerprint => ({ + eventCount: eventIds.length, + headEventIds: eventIds.slice(0, 5), + tailEventIds: eventIds.slice(-5), + readUptoEventId, + layoutKey, +}); export type RoomTimelineProps = { room: Room; eventId?: string; @@ -214,6 +228,7 @@ export function RoomTimeline({ const topSpacerHeightRef = useRef(0); const mountScrollWindowRef = useRef(Date.now() + 3000); const hasInitialScrolledRef = useRef(false); + const lastProgrammaticBottomPinAtRef = useRef(0); // Stored in a ref so eventsLength fluctuations (e.g. onLifecycle timeline reset // firing within the window) cannot cancel it via useLayoutEffect cleanup. const initialScrollTimerRef = useRef | undefined>(undefined); @@ -245,8 +260,10 @@ export function RoomTimeline({ if (!vListRef.current) return; const lastIndex = processedEventsRef.current.length - 1; if (lastIndex < 0) return; + lastProgrammaticBottomPinAtRef.current = Date.now(); + setAtBottom(true); vListRef.current.scrollTo(vListRef.current.scrollSize); - }, []); + }, [setAtBottom]); const timelineSync = useTimelineSync({ room, @@ -631,6 +648,42 @@ export function RoomTimeline({ const distanceFromBottom = v.scrollSize - offset - v.viewportSize; const isNowAtBottom = distanceFromBottom < 100; + const withinSettleWindow = + Date.now() - lastProgrammaticBottomPinAtRef.current < SCROLL_SETTLE_MS; + + // When the user is pinned to the bottom and content grows (images, embeds, + // video thumbnails loading), scrollSize increases while offset stays put, + // pushing distanceFromBottom above the threshold. Instead of flipping + // atBottom to false (which shows the "Jump to Latest" button), chase the + // bottom so the user stays pinned. + const contentGrew = v.scrollSize > prevScrollSizeRef.current; + prevScrollSizeRef.current = v.scrollSize; + + // Skip content-chase and cache saves during init: the timeline is hidden + // (opacity 0) while VList measures items and fires intermediate scroll + // events. Chasing the bottom here causes cascading scrollTo calls that + // upstream doesn't have, producing visible layout churn after isReady. + if (!isReadyRef.current) return; + + // While a jump is in progress (focusItem set), VList fires scroll events + // from scrollToIndex that can incorrectly flip atBottom=true β€” especially + // if the target happens to be near the end. Ignore scroll-position + // updates until the jump transition finishes and focusItem is cleared. + if (timelineSyncRef.current.focusItem) return; + + if (atBottomRef.current && !isNowAtBottom && (contentGrew || withinSettleWindow)) { + // Defer the chase to the next animation frame so VList finishes its + // current layout pass. Synchronous scrollTo causes cascading scroll + // events that produce visible jumps when images/embeds load. + requestAnimationFrame(() => { + const vl = vListRef.current; + if (vl && atBottomRef.current) { + lastProgrammaticBottomPinAtRef.current = Date.now(); + vl.scrollTo(vl.scrollSize); + } + }); + return; + } if (isNowAtBottom !== atBottomRef.current) { setAtBottom(isNowAtBottom); } diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts index 9391dbc90..265670649 100644 --- a/src/app/utils/room.ts +++ b/src/app/utils/room.ts @@ -12,7 +12,6 @@ import { MatrixClient, MatrixEvent, NotificationCountType, - PushProcessor, RelationType, Room, RoomMember, @@ -332,55 +331,6 @@ export const getUnreadInfo = (room: Room, options?: UnreadInfoOptions): UnreadIn } } - // Fallback: SDK counters are stale/zero but there are receipt-confirmed unread - // messages. Walk the live timeline to compute real counts so the badge number - // and highlight colour reflect actual state rather than a hard-coded stub. - if (total === 0 && highlight === 0 && userId && roomHaveUnread(room.client, room)) { - const readUpToId = room.getEventReadUpTo(userId); - const liveEvents = room.getLiveTimeline().getEvents(); - let fallbackTotal = 0; - let fallbackHighlight = 0; - const pushProcessor = new PushProcessor(room.client); - for (let i = liveEvents.length - 1; i >= 0; i -= 1) { - const event = liveEvents[i]; - if (!event) break; - if (event.getId() === readUpToId) break; - if (isNotificationEvent(event, room, userId) && event.getSender() !== userId) { - fallbackTotal += 1; - const pushActions = pushProcessor.actionsForEvent(event); - if (pushActions?.tweaks?.highlight) fallbackHighlight += 1; - } - } - if (fallbackTotal > 0) { - return { roomId: room.roomId, highlight: fallbackHighlight, total: fallbackTotal }; - } - } - - // Sliding sync limitation: unvisited rooms don't have read receipt data, but may have - // timeline activity. Check for notification events from others in the timeline to show a - // badge even when SDK counts are 0 (or unreliable without receipts). - if (userId) { - const readUpToId = room.getEventReadUpTo(userId); - - // If we have no read receipt, SDK counts may be unreliable. Always check timeline. - if (!readUpToId) { - const liveEvents = room.getLiveTimeline().getEvents(); - - const hasActivity = liveEvents.some( - (event) => event.getSender() !== userId && isNotificationEvent(event, room, userId) - ); - - if (hasActivity) { - // If SDK already has counts, use those. Otherwise show dot badge (count=1). - if (total === 0 && highlight === 0) { - return { roomId: room.roomId, highlight: 0, total: 1 }; - } - // SDK has counts but no receipt - trust the counts and show them - return { roomId: room.roomId, highlight, total }; - } - } - } - // For DMs with Default or AllMessages notification type: if there are unread messages, // ensure we show a notification badge (treat as highlight for badge color purposes). // This handles cases where push rules don't properly match (e.g., classic sync with From 157df8180df8b78be3b25bd011f2eab83dd15c76 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 19 Apr 2026 14:03:29 -0400 Subject: [PATCH 217/253] fix(timeline): align initial room-fill thresholds --- src/app/features/room/RoomTimeline.tsx | 47 ++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 887dc39f3..41ea85e16 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -109,6 +109,8 @@ const getDayDividerText = (ts: number) => { }; const SCROLL_SETTLE_MS = 250; +const MIN_INITIAL_SCROLL_ROOM_PX = 300; +const MIN_INITIAL_SCROLL_ROOM_PX = 300; const TIMELINE_ANCHOR_SELECTOR = '[data-timeline-event-id]'; const buildRoomScrollFingerprint = ( @@ -322,11 +324,22 @@ export function RoomTimeline({ initialScrollTimerRef.current = setTimeout(() => { initialScrollTimerRef.current = undefined; if (processedEventsRef.current.length > 0) { - vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); - // Only mark ready once we've successfully scrolled. If processedEvents - // was empty when the timer fired (e.g. the onLifecycle reset cleared the - // timeline within the 80 ms window), defer setIsReady until the recovery - // effect below fires once events repopulate. + vListRef.current?.scrollToIndex(processedEventsRef.current.length - 1, { + align: 'end', + }); + const v = vListRef.current; + // If backward pagination can still fill the viewport, delay revealing + // until that pagination settles so the user never sees the 3β†’60 event jump. + const needsFill = + canPaginateBackRef.current && + v && + v.scrollSize <= v.viewportSize + MIN_INITIAL_SCROLL_ROOM_PX && + backwardStatusRef.current !== 'error'; + if (needsFill) { + readyBlockedByPaginationRef.current = true; + return; + } + saveRoomScrollStateRef.current?.(v?.cache, true); setIsReady(true); } else { pendingReadyRef.current = true; @@ -356,7 +369,27 @@ export function RoomTimeline({ if (timelineSync.eventsLength > 0) return; setIsReady(false); hasInitialScrolledRef.current = false; - }, [isReady, timelineSync.eventsLength]); + }, [isReady, timelineSync.eventsLength, room]); + + // Reveal the timeline once backward pagination has settled and the viewport is + // filled. This handles the case where the 80 ms timer fired before sliding sync + // had delivered enough events to fill the screen. + useLayoutEffect(() => { + if (!readyBlockedByPaginationRef.current) return; + if (timelineSync.backwardStatus === 'loading') return; + const v = vListRef.current; + if (!v) return; + // Still not filled and can paginate more β€” keep waiting. + if ( + canPaginateBackRef.current && + v.scrollSize <= v.viewportSize + MIN_INITIAL_SCROLL_ROOM_PX + ) + return; + readyBlockedByPaginationRef.current = false; + v.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); + saveRoomScrollStateRef.current?.(v.cache, true); + setIsReady(true); + }, [timelineSync.backwardStatus, timelineSync.eventsLength, timelineSync.canPaginateBack]); const recalcTopSpacer = useCallback(() => { const v = vListRef.current; @@ -861,7 +894,7 @@ export function RoomTimeline({ const atTop = v.scrollOffset < 500; const noVisibleGrowth = processedEvents.length === processedLengthAtEffectStart; - const hasRealScrollRoom = v.scrollSize > v.viewportSize + 300; + const hasRealScrollRoom = v.scrollSize > v.viewportSize + MIN_INITIAL_SCROLL_ROOM_PX; if (!hasRealScrollRoom || (atTop && noVisibleGrowth)) { timelineSyncRef.current.handleTimelinePagination(true); From be5bcd2ac6da3da09817378ecd0944ce94af8c20 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 23:31:56 -0400 Subject: [PATCH 218/253] fix(timeline): align reset relinking with upstream --- src/app/hooks/timeline/useTimelineSync.test.tsx | 3 +-- src/app/hooks/timeline/useTimelineSync.ts | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/hooks/timeline/useTimelineSync.test.tsx b/src/app/hooks/timeline/useTimelineSync.test.tsx index d53d74143..46c445767 100644 --- a/src/app/hooks/timeline/useTimelineSync.test.tsx +++ b/src/app/hooks/timeline/useTimelineSync.test.tsx @@ -123,13 +123,12 @@ describe('useTimelineSync', () => { readUptoEventIdRef: { current: undefined }, }) ); - await act(async () => { timelineSet.emit(RoomEvent.TimelineReset); await Promise.resolve(); }); - expect(scrollToBottom).toHaveBeenCalledWith('instant'); + expect(scrollToBottom).toHaveBeenCalled(); }); it('resets timeline state when room.roomId changes and eventId is not set', async () => { diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 51c85dda8..4313e82ad 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -528,7 +528,7 @@ export function useTimelineSync({ resetAutoScrollPendingRef.current = wasAtBottom; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); if (wasAtBottom) { - scrollToBottom('instant'); + scrollToBottom(); } }, [room, isAtBottomRef, scrollToBottom]) ); @@ -565,7 +565,7 @@ export function useTimelineSync({ if (eventsLength <= lastScrolledAtEventsLengthRef.current && !resetAutoScrollPending) return; lastScrolledAtEventsLengthRef.current = eventsLength; - scrollToBottom('instant'); + scrollToBottom(); }, [isAtBottom, liveTimelineLinked, eventsLength, scrollToBottom]); useEffect(() => { From 1fc16aeb1fe8099030bb81e0cc7b094831d80d38 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 17 Apr 2026 18:48:03 -0400 Subject: [PATCH 219/253] fix(notifications): skip in-app notification for active room MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add activeRoomIdAtom (synced from all RoomProviders) so BackgroundNotifications can detect when the user is already viewing the notification room. When the room matches and the window is focused, the background handler now returns early β€” no banner, no OS notification. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../pages/client/BackgroundNotifications.tsx | 15 +++++++++++++++ src/app/pages/client/direct/RoomProvider.tsx | 3 +++ src/app/pages/client/home/RoomProvider.tsx | 3 +++ src/app/pages/client/space/RoomProvider.tsx | 3 +++ src/app/state/room/activeRoomId.ts | 19 +++++++++++++++++++ 5 files changed, 43 insertions(+) create mode 100644 src/app/state/room/activeRoomId.ts diff --git a/src/app/pages/client/BackgroundNotifications.tsx b/src/app/pages/client/BackgroundNotifications.tsx index 395718223..d1099cbf3 100644 --- a/src/app/pages/client/BackgroundNotifications.tsx +++ b/src/app/pages/client/BackgroundNotifications.tsx @@ -35,6 +35,7 @@ import { createLogger } from '$utils/debug'; import { createDebugLogger } from '$utils/debugLogger'; import LogoSVG from '$public/res/svg/cinny-logo.svg'; import { nicknamesAtom } from '$state/nicknames'; +import { activeRoomIdAtom } from '$state/room/activeRoomId'; import { buildRoomMessageNotification, resolveNotificationPreviewText, @@ -110,8 +111,11 @@ export function BackgroundNotifications() { ); const shouldRunBackgroundNotifications = showNotifications || usePushNotifications; const nicknames = useAtomValue(nicknamesAtom); + const activeRoomId = useAtomValue(activeRoomIdAtom); const nicknamesRef = useRef(nicknames); nicknamesRef.current = nicknames; + const activeRoomIdRef = useRef(activeRoomId); + activeRoomIdRef.current = activeRoomId; // Refs so handleTimeline callbacks always read current settings without stale closures const showNotificationsRef = useRef(showNotifications); showNotificationsRef.current = showNotifications; @@ -451,6 +455,17 @@ export function BackgroundNotifications() { setPending({ roomId: room.roomId, eventId, targetSessionId: session.userId }); }; + // Skip notifications entirely when the active session is viewing + // this exact room and the window has focus β€” the user is already + // looking at the messages. + if (room.roomId === activeRoomIdRef.current && document.hasFocus()) { + debugLog.debug('notification', 'Skipping notification β€” room is active', { + roomId: room.roomId, + eventId, + }); + return; + } + // Show in-app banner when app is visible, mobile, and in-app notifications enabled const canShowInAppBanner = document.visibilityState === 'visible' && diff --git a/src/app/pages/client/direct/RoomProvider.tsx b/src/app/pages/client/direct/RoomProvider.tsx index 1780fa728..a7a5eac0d 100644 --- a/src/app/pages/client/direct/RoomProvider.tsx +++ b/src/app/pages/client/direct/RoomProvider.tsx @@ -4,6 +4,7 @@ import { useSelectedRoom } from '$hooks/router/useSelectedRoom'; import { IsDirectRoomProvider, RoomProvider } from '$hooks/useRoom'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { JoinBeforeNavigate } from '$features/join-before-navigate'; +import { useActiveRoomIdSync } from '$state/room/activeRoomId'; import { useDirectRooms } from './useDirectRooms'; export function DirectRouteRoomProvider({ children }: { children: ReactNode }) { @@ -16,6 +17,8 @@ export function DirectRouteRoomProvider({ children }: { children: ReactNode }) { const roomId = useSelectedRoom(); const room = mx.getRoom(roomId); + useActiveRoomIdSync(roomId); + if (!room || !rooms.includes(room.roomId)) { return ; } diff --git a/src/app/pages/client/home/RoomProvider.tsx b/src/app/pages/client/home/RoomProvider.tsx index b6f7ba7e3..c86ed8219 100644 --- a/src/app/pages/client/home/RoomProvider.tsx +++ b/src/app/pages/client/home/RoomProvider.tsx @@ -5,6 +5,7 @@ import { IsDirectRoomProvider, RoomProvider } from '$hooks/useRoom'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { JoinBeforeNavigate } from '$features/join-before-navigate'; import { useSearchParamsViaServers } from '$hooks/router/useSearchParamsViaServers'; +import { useActiveRoomIdSync } from '$state/room/activeRoomId'; import { useHomeRooms } from './useHomeRooms'; export function HomeRouteRoomProvider({ children }: { children: ReactNode }) { @@ -18,6 +19,8 @@ export function HomeRouteRoomProvider({ children }: { children: ReactNode }) { const roomId = useSelectedRoom(); const room = mx.getRoom(roomId); + useActiveRoomIdSync(roomId); + if (!room || !rooms.includes(room.roomId)) { return ( (undefined); + +/** Keep {@link activeRoomIdAtom} in sync with the current route's room. */ +export function useActiveRoomIdSync(roomId: string | undefined): void { + const setActiveRoomId = useSetAtom(activeRoomIdAtom); + useEffect(() => { + setActiveRoomId(roomId); + return () => setActiveRoomId(undefined); + }, [roomId, setActiveRoomId]); +} From 0491959aa99a6e231ba5de390a86876a381f67e8 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 17:10:26 -0400 Subject: [PATCH 220/253] fix(notifications): pass room and userId context to reaction notification filter --- .changeset/reaction-notification-context.md | 5 +++++ src/app/pages/client/BackgroundNotifications.tsx | 2 +- src/app/pages/client/ClientNonUIFeatures.tsx | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/reaction-notification-context.md diff --git a/.changeset/reaction-notification-context.md b/.changeset/reaction-notification-context.md new file mode 100644 index 000000000..18e22446b --- /dev/null +++ b/.changeset/reaction-notification-context.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Fix reaction notifications not being delivered by passing room and user context to the notification event filter diff --git a/src/app/pages/client/BackgroundNotifications.tsx b/src/app/pages/client/BackgroundNotifications.tsx index d1099cbf3..6b915159e 100644 --- a/src/app/pages/client/BackgroundNotifications.tsx +++ b/src/app/pages/client/BackgroundNotifications.tsx @@ -327,7 +327,7 @@ export function BackgroundNotifications() { return; } - if (!isNotificationEvent(mEvent)) { + if (!isNotificationEvent(mEvent, room, mx.getUserId() ?? undefined)) { return; } diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 26ac2f431..65bf1825a 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -336,7 +336,7 @@ function MessageNotifications() { return; } - if (!room || isHistoricalEvent || room.isSpaceRoom() || !isNotificationEvent(mEvent)) { + if (!room || isHistoricalEvent || room.isSpaceRoom() || !isNotificationEvent(mEvent, room, mx.getUserId() ?? undefined)) { return; } From f6a7cd763eed9b7cc8c2701719c795eee4158d21 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 00:43:11 -0400 Subject: [PATCH 221/253] fix(badge): only clear app badge when foregrounded When backgrounded, the service worker manages the badge from push payloads. The app's local unread state may be stale before sync catches up, causing the badge to flash on then immediately off. Guard clearAppBadge() with a visibility check so the SW badge persists. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/pages/client/ClientNonUIFeatures.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 65bf1825a..af821357f 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -134,7 +134,9 @@ function FaviconUpdater() { // for an OS-level app badge. if (highlightTotal > 0) { navigator.setAppBadge(highlightTotal); - } else { + } else if (document.visibilityState === 'visible') { + // Only clear when foregrounded β€” the SW sets the badge from push + // payloads while backgrounded, and local state may be stale. navigator.clearAppBadge(); } if (usePushNotifications) { From 2ef5386d0aa4db7de7dfb358dfd2d56cc5d8a279 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 19:41:02 -0400 Subject: [PATCH 222/253] fix(notifications): normalize DM room names --- src/app/pages/client/BackgroundNotifications.tsx | 5 +++-- src/app/pages/client/ClientNonUIFeatures.tsx | 7 ++++--- src/app/utils/room.ts | 10 ++++++++++ 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/app/pages/client/BackgroundNotifications.tsx b/src/app/pages/client/BackgroundNotifications.tsx index 395718223..a1c93ed98 100644 --- a/src/app/pages/client/BackgroundNotifications.tsx +++ b/src/app/pages/client/BackgroundNotifications.tsx @@ -26,6 +26,7 @@ import { getMemberDisplayName, getNotificationType, getStateEvent, + getRoomDisplayName, isNotificationEvent, getMDirects, isDMRoom, @@ -422,7 +423,7 @@ export function BackgroundNotifications() { } const notificationPayload = buildRoomMessageNotification({ - roomName: room.name ?? room.getCanonicalAlias() ?? room.roomId, + roomName: getRoomDisplayName(room), roomAvatar, username: senderName, recipientId: session.userId, @@ -467,7 +468,7 @@ export function BackgroundNotifications() { setInAppBannerRef.current({ id: dedupeId, title: notificationPayload.title, - roomName: room.name ?? room.getCanonicalAlias() ?? undefined, + roomName: getRoomDisplayName(room), senderName, body: notificationPayload.options.body, icon: notificationPayload.options.icon, diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 26ac2f431..a6d16692a 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -31,6 +31,7 @@ import { getMemberDisplayName, getNotificationType, getStateEvent, + getRoomDisplayName, isDMRoom, isNotificationEvent, } from '$utils/room'; @@ -409,7 +410,7 @@ function MessageNotifications() { const avatarMxc = room.getAvatarFallbackMember()?.getMxcAvatarUrl() ?? room.getMxcAvatarUrl(); const osPayload = buildRoomMessageNotification({ - roomName: room.name ?? 'Unknown', + roomName: getRoomDisplayName(room), roomAvatar: avatarMxc ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined) : undefined, @@ -485,7 +486,7 @@ function MessageNotifications() { } const payload = buildRoomMessageNotification({ - roomName: room.name ?? 'Unknown', + roomName: getRoomDisplayName(room), roomAvatar, username: resolvedSenderName, previewText, @@ -500,7 +501,7 @@ function MessageNotifications() { setInAppBanner({ id: eventId, title: payload.title, - roomName: room.name ?? undefined, + roomName: getRoomDisplayName(room), serverName, senderName: resolvedSenderName, body: previewText, diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts index 9391dbc90..fa6114466 100644 --- a/src/app/utils/room.ts +++ b/src/app/utils/room.ts @@ -536,6 +536,16 @@ export const getMemberDisplayName = ( return name; }; +/** + * Returns the room's display name, normalising the case where the SDK computes + * a raw Matrix user ID for unnamed DMs. In that case, use the localpart so + * notifications and banners do not show the full MXID. + */ +export const getRoomDisplayName = (room: Room): string => { + const { name } = room; + return name.match(/^@([^:]+):/)?.[1] ?? name; +}; + export const getMemberSearchStr = ( member: RoomMember, query: string, From afc2b4961aa1f7bdbfabb4b43165fc7ed16925bb Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 12 Apr 2026 17:36:42 -0400 Subject: [PATCH 223/253] feat(types): add experiment config, sessionSync types and useExperimentVariant to useClientConfig --- src/app/hooks/useClientConfig.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts index e523f15a7..8ca6dc78a 100644 --- a/src/app/hooks/useClientConfig.ts +++ b/src/app/hooks/useClientConfig.ts @@ -5,6 +5,15 @@ export type HashRouterConfig = { basename?: string; }; +export type SessionSyncConfig = { + phase1ForegroundResync?: boolean; + phase2VisibleHeartbeat?: boolean; + phase3AdaptiveBackoffJitter?: boolean; + foregroundDebounceMs?: number; + heartbeatIntervalMs?: number; + resumeHeartbeatSuppressMs?: number; + heartbeatMaxBackoffMs?: number; +}; export type ClientConfig = { defaultHomeserver?: number; homeserverList?: string[]; @@ -14,6 +23,7 @@ export type ClientConfig = { disableAccountSwitcher?: boolean; hideUsernamePasswordFields?: boolean; + sessionSync?: SessionSyncConfig; pushNotificationDetails?: { pushNotifyUrl?: string; vapidPublicKey?: string; From 6b89dc6c55f7fb3f30ea8d3113801a43ea6371fa Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 17:30:45 -0400 Subject: [PATCH 224/253] fix(sw): increase session TTL to 24h and add requestSessionWithTimeout fallback Matrix access tokens are long-lived and only invalidated on logout or server revocation. The previous 60s TTL caused iOS push handlers (which restart the SW per push) to reject cached sessions as stale, resulting in generic 'New Message' notifications. Also adds a requestSessionWithTimeout fallback in handleMinimalPushPayload that asks live window clients for a fresh session when neither the in-memory map nor the persisted cache contains a usable session. --- src/sw.ts | 222 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 189 insertions(+), 33 deletions(-) diff --git a/src/sw.ts b/src/sw.ts index d843963bd..2e73f7004 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -69,9 +69,12 @@ async function loadPersistedSettings() { async function persistSession(session: SessionInfo): Promise { try { const cache = await self.caches.open(SW_SESSION_CACHE); + const sessionWithTimestamp = { ...session, persistedAt: Date.now() }; await cache.put( SW_SESSION_URL, - new Response(JSON.stringify(session), { headers: { 'Content-Type': 'application/json' } }) + new Response(JSON.stringify(sessionWithTimestamp), { + headers: { 'Content-Type': 'application/json' }, + }) ); } catch { // Ignore β€” caches may be unavailable in some environments. @@ -91,13 +94,32 @@ async function loadPersistedSession(): Promise { try { const cache = await self.caches.open(SW_SESSION_CACHE); const response = await cache.match(SW_SESSION_URL); - if (!response) return undefined; - const s = await response.json(); - if (typeof s.accessToken === 'string' && typeof s.baseUrl === 'string') { + if (response) { + const s = await response.json(); + + // Reject persisted sessions older than 24 hours. Matrix access tokens are + // long-lived and are only invalidated on explicit logout or device revocation β€” + // not by the passage of time. A short TTL (e.g. 60 s) was too aggressive: it + // caused the SW to show generic "New Message" notifications whenever the app + // was backgrounded for more than a minute, because the cached session was + // rejected and requestSession had no live window client to reach. + // If the token truly is revoked the fetches in handleMinimalPushPayload will + // receive a 401 and gracefully fall back to a generic notification anyway. + const age = typeof s.persistedAt === 'number' ? Date.now() - s.persistedAt : Infinity; + const MAX_SESSION_AGE_MS = 24 * 60 * 60 * 1000; // 24 hours + if (age > MAX_SESSION_AGE_MS) { + console.debug('[SW] loadPersistedSession: session expired', { + age, + accessToken: s.accessToken.slice(0, 8), + }); + return undefined; + } + return { accessToken: s.accessToken, baseUrl: s.baseUrl, userId: typeof s.userId === 'string' ? s.userId : undefined, + persistedAt: s.persistedAt, }; } return undefined; @@ -111,6 +133,8 @@ type SessionInfo = { baseUrl: string; /** Matrix user ID of the account, used to identify which account a push belongs to. */ userId?: string; + /** Timestamp when this session was persisted to cache, used to expire stale tokens. */ + persistedAt?: number; }; /** @@ -414,7 +438,16 @@ async function handleMinimalPushPayload( // On iOS the SW is killed and restarted for every push, clearing the in-memory sessions // Map. Fall back to the Cache Storage copy that was written when the user last opened // the app (same pattern as settings persistence). - const session = getAnyStoredSession() ?? (await loadPersistedSession()); + // Last resort: if neither the in-memory map nor the cache has a session, ask any live + // window client for a fresh token (the app may be backgrounded but still alive in memory). + let session = getAnyStoredSession() ?? (await loadPersistedSession()); + if (!session && windowClients.length > 0) { + console.debug('[SW push] no cached session, requesting from window clients'); + const result = await Promise.race( + Array.from(windowClients).map((c) => requestSessionWithTimeout(c.id, 1500)) + ); + session = result ?? undefined; + } if (!session) { // No session anywhere β€” app was never opened since install, or the user logged out. @@ -555,6 +588,14 @@ self.addEventListener('message', (event: ExtendableMessageEvent) => { if (type === 'setSession') { setSession(client.id, accessToken, baseUrl, userId); + // Keep the SW alive until the cache write completes. persistSession is + // called fire-and-forget inside setSession; without waitUntil the browser + // can kill the SW before caches.put resolves, leaving the persisted session + // stale on the next restart and causing intermittent 401s on media fetches. + const persisted = sessions.get(client.id); + event.waitUntil( + (persisted ? persistSession(persisted) : clearPersistedSession()).catch(() => undefined) + ); event.waitUntil(cleanupDeadClients()); } if (type === 'pushDecryptResult') { @@ -604,12 +645,24 @@ self.addEventListener('message', (event: ExtendableMessageEvent) => { const MEDIA_PATHS = [ '/_matrix/client/v1/media/download', '/_matrix/client/v1/media/thumbnail', + '/_matrix/client/v1/media/preview_url', + '/_matrix/client/v3/media/download', + '/_matrix/client/v3/media/thumbnail', + '/_matrix/client/v3/media/preview_url', + '/_matrix/client/r0/media/download', + '/_matrix/client/r0/media/thumbnail', + '/_matrix/client/r0/media/preview_url', + '/_matrix/client/unstable/org.matrix.msc3916/media/download', + '/_matrix/client/unstable/org.matrix.msc3916/media/thumbnail', + '/_matrix/client/unstable/org.matrix.msc3916/media/preview_url', // Legacy unauthenticated endpoints β€” servers that require auth return 404/403 // for these when no token is present, so intercept and add auth here too. '/_matrix/media/v3/download', '/_matrix/media/v3/thumbnail', + '/_matrix/media/v3/preview_url', '/_matrix/media/r0/download', '/_matrix/media/r0/thumbnail', + '/_matrix/media/r0/preview_url', ]; function mediaPath(url: string): boolean { @@ -628,6 +681,39 @@ function validMediaRequest(url: string, baseUrl: string): boolean { }); } +function getMatchingSessions(url: string): SessionInfo[] { + return [...sessions.values()].filter((s) => validMediaRequest(url, s.baseUrl)); +} + +function isAuthFailureStatus(status: number): boolean { + return status === 401 || status === 403; +} + +async function getLiveWindowSessions(url: string, clientId: string): Promise { + const collected: SessionInfo[] = []; + const seen = new Set(); + const add = (session?: SessionInfo) => { + if (!session || !validMediaRequest(url, session.baseUrl)) return; + const key = `${session.baseUrl}\x00${session.accessToken}`; + if (seen.has(key)) return; + seen.add(key); + collected.push(session); + }; + + if (clientId) { + add(await requestSessionWithTimeout(clientId, 1500)); + return collected; + } + + const windowClients = await self.clients.matchAll({ type: 'window', includeUncontrolled: true }); + const liveSessions = await Promise.all( + windowClients.map((client) => requestSessionWithTimeout(client.id, 750)) + ); + liveSessions.forEach((session) => add(session)); + + return collected; +} + function fetchConfig(token: string): RequestInit { return { headers: { @@ -637,6 +723,67 @@ function fetchConfig(token: string): RequestInit { }; } +/** + * Fetch a media URL, retrying once with the most-current in-memory session on 401. + * + * There is a timing window between when the SDK refreshes its access token + * (tokenRefreshFunction resolves) and when the resulting pushSessionToSW() + * postMessage is processed by the SW. Media requests that land in this window + * are sent with the stale token and receive 401. By the time the retry runs, + * the setSession message will normally have been processed and sessions will + * hold the new token. + * + * A second timing window exists at startup: preloadedSession may hold a stale + * token but the live setSession from the page hasn't arrived yet. In that case + * the in-memory check yields no fresher token, so we ask the live client tab + * directly (requestSessionWithTimeout) before giving up. + */ +async function fetchMediaWithRetry( + url: string, + token: string, + redirect: RequestRedirect, + clientId: string +): Promise { + let response = await fetch(url, { ...fetchConfig(token), redirect }); + if (!isAuthFailureStatus(response.status)) return response; + + const attemptedTokens = new Set([token]); + const retrySessions: SessionInfo[] = []; + const seenSessions = new Set(); + + const addRetrySession = (session?: SessionInfo) => { + if (!session || !validMediaRequest(url, session.baseUrl)) return; + const key = `${session.baseUrl}\x00${session.accessToken}`; + if (seenSessions.has(key)) return; + seenSessions.add(key); + retrySessions.push(session); + }; + + if (clientId) addRetrySession(sessions.get(clientId)); + getMatchingSessions(url).forEach((session) => addRetrySession(session)); + addRetrySession(preloadedSession); + addRetrySession(await loadPersistedSession()); + (await getLiveWindowSessions(url, clientId)).forEach((session) => addRetrySession(session)); + + // Try each plausible token once. This handles token-refresh races and ambiguous + // multi-account sessions on the same homeserver, including no-clientId requests. + // Sequential await is intentional: we want to try one token at a time until one succeeds. + /* eslint-disable no-await-in-loop */ + for (let i = 0; i < retrySessions.length; i += 1) { + const candidate = retrySessions[i]; + if (!candidate || attemptedTokens.has(candidate.accessToken)) { + // skip this candidate + } else { + attemptedTokens.add(candidate.accessToken); + response = await fetch(url, { ...fetchConfig(candidate.accessToken), redirect }); + if (!isAuthFailureStatus(response.status)) return response; + } + } + /* eslint-enable no-await-in-loop */ + + return response; +} + self.addEventListener('message', (event: ExtendableMessageEvent) => { if (event.data.type === 'togglePush') { const token = event.data?.token; @@ -667,37 +814,24 @@ self.addEventListener('fetch', (event: FetchEvent) => { const session = clientId ? sessions.get(clientId) : undefined; if (session && validMediaRequest(url, session.baseUrl)) { - event.respondWith(fetch(url, { ...fetchConfig(session.accessToken), redirect })); - return; - } - - // Since widgets like element call have their own client ids, - // we need this logic. We just go through the sessions list and get a session - // with the right base url. Media requests to a homeserver simply are fine with any account - // on the homeserver authenticating it, so this is fine. But it can be technically wrong. - // If you have two tabs for different users on the same homeserver, it might authenticate - // as the wrong one. - // Thus any logic in the future which cares about which user is authenticating the request - // might break this. Also, again, it is technically wrong. - // Also checks preloadedSession β€” populated from cache at SW activate β€” for the window - // between SW restart and the first live setSession arriving from the page. - const byBaseUrl = - [...sessions.values()].find((s) => validMediaRequest(url, s.baseUrl)) ?? - (preloadedSession && validMediaRequest(url, preloadedSession.baseUrl) - ? preloadedSession - : undefined); - if (byBaseUrl) { - event.respondWith(fetch(url, { ...fetchConfig(byBaseUrl.accessToken), redirect })); + event.respondWith(fetchMediaWithRetry(url, session.accessToken, redirect, clientId)); return; } // No clientId: the fetch came from a context not associated with a specific - // window (e.g. a prerender). Fall back to the persisted session directly. + // window (e.g. a prerender). Fall back to persisted/unique-by-baseUrl sessions. if (!clientId) { event.respondWith( loadPersistedSession().then((persisted) => { if (persisted && validMediaRequest(url, persisted.baseUrl)) { - return fetch(url, { ...fetchConfig(persisted.accessToken), redirect }); + return fetchMediaWithRetry(url, persisted.accessToken, redirect, ''); + } + const matching = getMatchingSessions(url); + if (matching.length === 1) { + return fetchMediaWithRetry(url, matching[0].accessToken, redirect, ''); + } + if (preloadedSession && validMediaRequest(url, preloadedSession.baseUrl)) { + return fetchMediaWithRetry(url, preloadedSession.accessToken, redirect, ''); } return fetch(event.request); }) @@ -705,17 +839,30 @@ self.addEventListener('fetch', (event: FetchEvent) => { return; } + // Synchronous fast-path: check in-memory sessions by baseUrl and the + // preloaded session before paying the 3-second requestSessionWithTimeout + // cost. This restores the old byBaseUrl behaviour while keeping retry logic. + const syncByBaseUrl = getMatchingSessions(url); + if (syncByBaseUrl.length === 1) { + event.respondWith(fetchMediaWithRetry(url, syncByBaseUrl[0].accessToken, redirect, clientId)); + return; + } + if (preloadedSession && validMediaRequest(url, preloadedSession.baseUrl)) { + event.respondWith(fetchMediaWithRetry(url, preloadedSession.accessToken, redirect, clientId)); + return; + } + event.respondWith( requestSessionWithTimeout(clientId).then(async (s) => { // Primary: session received from the live client window. if (s && validMediaRequest(url, s.baseUrl)) { - return fetch(url, { ...fetchConfig(s.accessToken), redirect }); + return fetchMediaWithRetry(url, s.accessToken, redirect, clientId); } // Fallback: try the persisted session (helps when SW restarts on iOS and // the client window hasn't responded to requestSession yet). const persisted = await loadPersistedSession(); if (persisted && validMediaRequest(url, persisted.baseUrl)) { - return fetch(url, { ...fetchConfig(persisted.accessToken), redirect }); + return fetchMediaWithRetry(url, persisted.accessToken, redirect, clientId); } console.warn( '[SW fetch] No valid session for media request', @@ -749,10 +896,19 @@ const onPushNotification = async (event: PushEvent) => { // If the app is open and visible, skip the OS push notification β€” the in-app // pill notification handles the alert instead. - // Combine clients.matchAll() visibility with the explicit appIsVisible flag - // because iOS Safari PWA often returns empty or stale results from matchAll(). + // + // When clients.matchAll() returns β‰₯1 client, trust its visibilityState + // directly. iOS can suspend the JS thread before postMessage({ visible: + // false }) is processed, leaving appIsVisible stuck at true. matchAll() + // still reports the backgrounded client as 'hidden', so it is the + // authoritative and most reliable signal. + // + // When matchAll() returns zero clients (a separate iOS Safari PWA quirk), + // visibility is unknowable β€” do NOT suppress. Better to show a duplicate + // (handled gracefully by the in-app banner) than to silently drop a + // notification while the app is backgrounded. const hasVisibleClient = - appIsVisible || clients.some((client) => client.visibilityState === 'visible'); + clients.length > 0 ? clients.some((client) => client.visibilityState === 'visible') : false; console.debug( '[SW push] appIsVisible:', appIsVisible, From d8636958559b97a2334375fc706096fa7b6a9e56 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 11 Apr 2026 17:58:21 -0400 Subject: [PATCH 225/253] fix(sw): reset heartbeat backoff on foreground sync; warm preloadedSession from push handler When phase3AdaptiveBackoffJitter is enabled, successful foreground/focus session pushes (phase1ForegroundResync) now reset heartbeatFailuresRef to 0. Previously a period of SW controller absence (e.g. SW update) could inflate the heartbeat interval to its maximum (30 min) even after the SW became healthy again, reducing session-refresh frequency below the intended 10-minute rate. Also captures the loadPersistedSession() result in onPushNotification and assigns it to preloadedSession, avoiding a redundant second cache read in handleMinimalPushPayload when the SW is restarted by iOS for a push event. --- src/app/hooks/useAppVisibility.ts | 213 +++++++++++++++++++++++++++++- src/sw.ts | 8 +- 2 files changed, 216 insertions(+), 5 deletions(-) diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index 7fd5f2325..ed2d69cfb 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -1,23 +1,112 @@ -import { useEffect } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import { MatrixClient } from '$types/matrix-sdk'; +import { Session } from '$state/sessions'; import { useAtom } from 'jotai'; import { togglePusher } from '../features/settings/notifications/PushNotifications'; import { appEvents } from '../utils/appEvents'; -import { useClientConfig } from './useClientConfig'; +import { useClientConfig, useExperimentVariant } from './useClientConfig'; import { useSetting } from '../state/hooks/settings'; import { settingsAtom } from '../state/settings'; import { pushSubscriptionAtom } from '../state/pushSubscription'; import { mobileOrTablet } from '../utils/user-agent'; import { createDebugLogger } from '../utils/debugLogger'; +import { pushSessionToSW } from '../../sw-session'; const debugLog = createDebugLogger('AppVisibility'); -export function useAppVisibility(mx: MatrixClient | undefined) { +const DEFAULT_FOREGROUND_DEBOUNCE_MS = 1500; +const DEFAULT_HEARTBEAT_INTERVAL_MS = 10 * 60 * 1000; +const DEFAULT_RESUME_HEARTBEAT_SUPPRESS_MS = 60 * 1000; +const DEFAULT_HEARTBEAT_MAX_BACKOFF_MS = 30 * 60 * 1000; + +export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: Session) { const clientConfig = useClientConfig(); const [usePushNotifications] = useSetting(settingsAtom, 'usePushNotifications'); const pushSubAtom = useAtom(pushSubscriptionAtom); const isMobile = mobileOrTablet(); + const sessionSyncConfig = clientConfig.sessionSync; + const sessionSyncVariant = useExperimentVariant('sessionSyncStrategy', activeSession?.userId); + + // Derive phase flags from experiment variant; fall back to direct config when not in experiment. + const inSessionSync = sessionSyncVariant.inExperiment; + const syncVariant = sessionSyncVariant.variant; + const phase1ForegroundResync = inSessionSync + ? syncVariant === 'session-sync-heartbeat' || syncVariant === 'session-sync-adaptive' + : sessionSyncConfig?.phase1ForegroundResync === true; + const phase2VisibleHeartbeat = inSessionSync + ? syncVariant === 'session-sync-heartbeat' || syncVariant === 'session-sync-adaptive' + : sessionSyncConfig?.phase2VisibleHeartbeat === true; + const phase3AdaptiveBackoffJitter = inSessionSync + ? syncVariant === 'session-sync-adaptive' + : sessionSyncConfig?.phase3AdaptiveBackoffJitter === true; + + const foregroundDebounceMs = Math.max( + 0, + sessionSyncConfig?.foregroundDebounceMs ?? DEFAULT_FOREGROUND_DEBOUNCE_MS + ); + const heartbeatIntervalMs = Math.max( + 1000, + sessionSyncConfig?.heartbeatIntervalMs ?? DEFAULT_HEARTBEAT_INTERVAL_MS + ); + const resumeHeartbeatSuppressMs = Math.max( + 0, + sessionSyncConfig?.resumeHeartbeatSuppressMs ?? DEFAULT_RESUME_HEARTBEAT_SUPPRESS_MS + ); + const heartbeatMaxBackoffMs = Math.max( + heartbeatIntervalMs, + sessionSyncConfig?.heartbeatMaxBackoffMs ?? DEFAULT_HEARTBEAT_MAX_BACKOFF_MS + ); + + const lastForegroundPushAtRef = useRef(0); + const suppressHeartbeatUntilRef = useRef(0); + const heartbeatFailuresRef = useRef(0); + + const pushSessionNow = useCallback( + (reason: 'foreground' | 'focus' | 'heartbeat'): 'sent' | 'skipped' => { + const baseUrl = activeSession?.baseUrl; + const accessToken = activeSession?.accessToken; + const userId = activeSession?.userId; + const canPush = + !!mx && + typeof baseUrl === 'string' && + typeof accessToken === 'string' && + typeof userId === 'string' && + 'serviceWorker' in navigator && + !!navigator.serviceWorker.controller; + + if (!canPush) { + debugLog.warn('network', 'Skipped SW session sync', { + reason, + hasClient: !!mx, + hasBaseUrl: !!baseUrl, + hasAccessToken: !!accessToken, + hasUserId: !!userId, + hasSwController: !!navigator.serviceWorker?.controller, + }); + return 'skipped'; + } + + pushSessionToSW(baseUrl, accessToken, userId); + debugLog.info('network', 'Pushed session to SW', { + reason, + phase1ForegroundResync, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + }); + return 'sent'; + }, + [ + activeSession?.accessToken, + activeSession?.baseUrl, + activeSession?.userId, + mx, + phase1ForegroundResync, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + ] + ); + useEffect(() => { const handleVisibilityChange = () => { const isVisible = document.visibilityState === 'visible'; @@ -29,15 +118,66 @@ export function useAppVisibility(mx: MatrixClient | undefined) { appEvents.onVisibilityChange?.(isVisible); if (!isVisible) { appEvents.onVisibilityHidden?.(); + return; + } + + // Always kick the sync loop on foreground regardless of phase flags β€” + // the SDK may be sitting in exponential backoff after iOS froze the tab. + mx?.retryImmediately(); + + if (!phase1ForegroundResync) return; + + const now = Date.now(); + if (now - lastForegroundPushAtRef.current < foregroundDebounceMs) return; + lastForegroundPushAtRef.current = now; + + if (pushSessionNow('foreground') === 'sent') { + // A successful push proves the SW controller is up β€” reset adaptive backoff + // so the heartbeat returns to its normal interval immediately rather than + // staying on an inflated delay left over from a prior SW absence period. + if (phase3AdaptiveBackoffJitter) heartbeatFailuresRef.current = 0; + if (phase3AdaptiveBackoffJitter && phase2VisibleHeartbeat) { + suppressHeartbeatUntilRef.current = now + resumeHeartbeatSuppressMs; + } + } + }; + + const handleFocus = () => { + if (document.visibilityState !== 'visible') return; + + // Always kick the sync loop on focus for the same reason as above. + mx?.retryImmediately(); + + if (!phase1ForegroundResync) return; + + const now = Date.now(); + if (now - lastForegroundPushAtRef.current < foregroundDebounceMs) return; + lastForegroundPushAtRef.current = now; + + if (pushSessionNow('focus') === 'sent') { + if (phase3AdaptiveBackoffJitter) heartbeatFailuresRef.current = 0; + if (phase3AdaptiveBackoffJitter && phase2VisibleHeartbeat) { + suppressHeartbeatUntilRef.current = now + resumeHeartbeatSuppressMs; + } } }; document.addEventListener('visibilitychange', handleVisibilityChange); + window.addEventListener('focus', handleFocus); return () => { document.removeEventListener('visibilitychange', handleVisibilityChange); + window.removeEventListener('focus', handleFocus); }; - }, []); + }, [ + foregroundDebounceMs, + mx, + phase1ForegroundResync, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + pushSessionNow, + resumeHeartbeatSuppressMs, + ]); useEffect(() => { if (!mx) return; @@ -52,4 +192,69 @@ export function useAppVisibility(mx: MatrixClient | undefined) { appEvents.onVisibilityChange = null; }; }, [mx, clientConfig, usePushNotifications, pushSubAtom, isMobile]); + + useEffect(() => { + if (!phase2VisibleHeartbeat) return undefined; + + // Reset adaptive backoff/suppression so a config or session change starts fresh. + heartbeatFailuresRef.current = 0; + suppressHeartbeatUntilRef.current = 0; + + let timeoutId: number | undefined; + + const getDelayMs = (): number => { + let delay = heartbeatIntervalMs; + + if (phase3AdaptiveBackoffJitter) { + const failures = heartbeatFailuresRef.current; + const backoffFactor = Math.min(2 ** failures, heartbeatMaxBackoffMs / heartbeatIntervalMs); + delay = Math.min(heartbeatMaxBackoffMs, Math.round(heartbeatIntervalMs * backoffFactor)); + + // Add +-20% jitter to avoid synchronized heartbeat spikes across many clients. + const jitter = 0.8 + Math.random() * 0.4; + delay = Math.max(1000, Math.round(delay * jitter)); + } + + return delay; + }; + + const tick = () => { + const now = Date.now(); + + if (document.visibilityState !== 'visible' || !navigator.onLine) { + timeoutId = window.setTimeout(tick, getDelayMs()); + return; + } + + if (phase3AdaptiveBackoffJitter && now < suppressHeartbeatUntilRef.current) { + timeoutId = window.setTimeout(tick, getDelayMs()); + return; + } + + const result = pushSessionNow('heartbeat'); + if (phase3AdaptiveBackoffJitter) { + if (result === 'sent') { + heartbeatFailuresRef.current = 0; + } else { + // 'skipped' means prerequisites (SW controller, session) aren't ready. + // Treat as a transient failure so backoff grows until the SW is ready. + heartbeatFailuresRef.current += 1; + } + } + + timeoutId = window.setTimeout(tick, getDelayMs()); + }; + + timeoutId = window.setTimeout(tick, getDelayMs()); + + return () => { + if (timeoutId !== undefined) window.clearTimeout(timeoutId); + }; + }, [ + heartbeatIntervalMs, + heartbeatMaxBackoffMs, + phase2VisibleHeartbeat, + phase3AdaptiveBackoffJitter, + pushSessionNow, + ]); } diff --git a/src/sw.ts b/src/sw.ts index 2e73f7004..d8b5a8697 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -888,11 +888,17 @@ const onPushNotification = async (event: PushEvent) => { // The SW may have been restarted by the OS (iOS is aggressive about this), // so in-memory settings would be at their defaults. Reload from cache and // match active clients in parallel β€” they are independent operations. - const [, , clients] = await Promise.all([ + // Capture the persisted session result into preloadedSession so that + // getAnyStoredSession() returns it in handleMinimalPushPayload without a + // second cache read. + const [, persistedSession, clients] = await Promise.all([ loadPersistedSettings(), loadPersistedSession(), self.clients.matchAll({ type: 'window', includeUncontrolled: true }), ]); + if (persistedSession && !preloadedSession) { + preloadedSession = persistedSession; + } // If the app is open and visible, skip the OS push notification β€” the in-app // pill notification handles the alert instead. From 52bbbc6b3b2313d1e9a9705b2ebf0bc90e67e3e0 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 19:19:59 -0400 Subject: [PATCH 226/253] fix(notifications): restore background visibility sync --- src/app/hooks/useAppVisibility.ts | 19 ++++++++-- src/sw.ts | 60 +++++++++++++++++-------------- 2 files changed, 49 insertions(+), 30 deletions(-) diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index ed2d69cfb..c8cf46c6a 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -61,6 +61,7 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S const lastForegroundPushAtRef = useRef(0); const suppressHeartbeatUntilRef = useRef(0); const heartbeatFailuresRef = useRef(0); + const lastEmittedVisibilityRef = useRef(undefined); const pushSessionNow = useCallback( (reason: 'foreground' | 'focus' | 'heartbeat'): 'sent' | 'skipped' => { @@ -108,12 +109,14 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S ); useEffect(() => { - const handleVisibilityChange = () => { - const isVisible = document.visibilityState === 'visible'; + const handleVisibilityState = (isVisible: boolean, source: 'visibilitychange' | 'pagehide') => { + if (lastEmittedVisibilityRef.current === isVisible) return; + lastEmittedVisibilityRef.current = isVisible; + debugLog.info( 'general', `App visibility changed: ${isVisible ? 'visible (foreground)' : 'hidden (background)'}`, - { visibilityState: document.visibilityState } + { visibilityState: document.visibilityState, source } ); appEvents.onVisibilityChange?.(isVisible); if (!isVisible) { @@ -142,6 +145,14 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S } }; + const handleVisibilityChange = () => { + handleVisibilityState(document.visibilityState === 'visible', 'visibilitychange'); + }; + + const handlePageHide = () => { + handleVisibilityState(false, 'pagehide'); + }; + const handleFocus = () => { if (document.visibilityState !== 'visible') return; @@ -163,10 +174,12 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S }; document.addEventListener('visibilitychange', handleVisibilityChange); + window.addEventListener('pagehide', handlePageHide); window.addEventListener('focus', handleFocus); return () => { document.removeEventListener('visibilitychange', handleVisibilityChange); + window.removeEventListener('pagehide', handlePageHide); window.removeEventListener('focus', handleFocus); }; }, [ diff --git a/src/sw.ts b/src/sw.ts index d8b5a8697..3dad6d3fc 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -392,37 +392,43 @@ async function requestDecryptionFromClient( rawEvent: Record ): Promise { const eventId = rawEvent.event_id as string; + if (windowClients.length === 0) return undefined; + + // Broadcast to all clients, but resolve once from the first successful reply. + // The prior Promise.any implementation accidentally overwrote the pending + // resolver on each iteration, leaving only the last client able to satisfy + // the request for a given eventId. + const resultPromise = new Promise((resolve) => { + decryptionPendingMap.set(eventId, (result) => { + decryptionPendingMap.delete(eventId); + resolve(result); + }); + }); - // Chain clients sequentially using reduce to avoid await-in-loop and for-of. - return Array.from(windowClients).reduce( - async (prevPromise, client) => { - const prev = await prevPromise; - if (prev?.success) return prev; - - const promise = new Promise((resolve) => { - decryptionPendingMap.set(eventId, resolve); - }); + let postedToClient = false; + Array.from(windowClients).forEach((client) => { + try { + (client as WindowClient).postMessage({ type: 'decryptPushEvent', rawEvent }); + postedToClient = true; + } catch (err) { + console.warn('[SW decryptRelay] postMessage error', err); + } + }); - const timeout = new Promise((resolve) => { - setTimeout(() => { - decryptionPendingMap.delete(eventId); - console.warn('[SW decryptRelay] timed out waiting for client', client.id); - resolve(undefined); - }, 5000); - }); + if (!postedToClient) { + decryptionPendingMap.delete(eventId); + return undefined; + } - try { - (client as WindowClient).postMessage({ type: 'decryptPushEvent', rawEvent }); - } catch (err) { - decryptionPendingMap.delete(eventId); - console.warn('[SW decryptRelay] postMessage error', err); - return undefined; - } + const timeout = new Promise((resolve) => { + setTimeout(() => { + decryptionPendingMap.delete(eventId); + console.warn('[SW decryptRelay] timed out waiting for client response'); + resolve(undefined); + }, 5000); + }); - return Promise.race([promise, timeout]); - }, - Promise.resolve(undefined) as Promise - ); + return Promise.race([resultPromise, timeout]); } /** From ff509061503ddc751c930f2fbfc96a65a556ce38 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 19 Apr 2026 09:03:16 -0400 Subject: [PATCH 227/253] fix(sw): recover session sync without controller --- src/app/hooks/useAppVisibility.ts | 4 +-- src/sw-session.ts | 44 +++++++++++++++++++++++++++---- 2 files changed, 41 insertions(+), 7 deletions(-) diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index c8cf46c6a..590d746ae 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -73,8 +73,7 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S typeof baseUrl === 'string' && typeof accessToken === 'string' && typeof userId === 'string' && - 'serviceWorker' in navigator && - !!navigator.serviceWorker.controller; + 'serviceWorker' in navigator; if (!canPush) { debugLog.warn('network', 'Skipped SW session sync', { @@ -94,6 +93,7 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S phase1ForegroundResync, phase2VisibleHeartbeat, phase3AdaptiveBackoffJitter, + hasSwController: !!navigator.serviceWorker?.controller, }); return 'sent'; }, diff --git a/src/sw-session.ts b/src/sw-session.ts index e4d2672da..63d285d99 100644 --- a/src/sw-session.ts +++ b/src/sw-session.ts @@ -1,11 +1,45 @@ -export function pushSessionToSW(baseUrl?: string, accessToken?: string, userId?: string) { - if (!('serviceWorker' in navigator)) return; - if (!navigator.serviceWorker.controller) return; +type ServiceWorkerSessionPayload = { + type: 'setSession'; + accessToken?: string; + baseUrl?: string; + userId?: string; +}; - navigator.serviceWorker.controller.postMessage({ +function postSessionPayload( + target: ServiceWorker | null | undefined, + payload: ServiceWorkerSessionPayload, + seenTargets: WeakSet +) { + if (!target || seenTargets.has(target)) return false; + seenTargets.add(target); + target.postMessage(payload); + return true; +} + +export function pushSessionToSW(baseUrl?: string, accessToken?: string, userId?: string): boolean { + if (!('serviceWorker' in navigator)) return false; + + const payload: ServiceWorkerSessionPayload = { type: 'setSession', accessToken, baseUrl, userId, - }); + }; + const seenTargets = new WeakSet(); + postSessionPayload(navigator.serviceWorker.controller, payload, seenTargets); + + // Backgrounded/mobile browsers can drop the current controller reference even + // though the registration is still active. Post to any reachable worker from + // navigator.serviceWorker.ready so the session is restored without a reload. + void navigator.serviceWorker.ready + .then((registration) => { + postSessionPayload(registration.active, payload, seenTargets); + postSessionPayload(registration.waiting, payload, seenTargets); + postSessionPayload(registration.installing, payload, seenTargets); + }) + .catch(() => undefined); + + // Treat a queued ready() delivery as a successful attempt so foreground/heartbeat + // recovery keeps running even if controller is temporarily absent. + return true; } From f95c3968890fb9a33f02b76a5141d38048f449e7 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 22:26:41 -0400 Subject: [PATCH 228/253] test(notifications): align jumper room mock with room utils --- src/app/hooks/useNotificationJumper.test.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/hooks/useNotificationJumper.test.tsx b/src/app/hooks/useNotificationJumper.test.tsx index f1076eaf4..efcca25f2 100644 --- a/src/app/hooks/useNotificationJumper.test.tsx +++ b/src/app/hooks/useNotificationJumper.test.tsx @@ -18,6 +18,11 @@ const roomMock = { roomId: '!room:test', getMyMembership: vi.fn(() => 'join'), getCanonicalAlias: vi.fn(() => undefined), + getLiveTimeline: vi.fn(() => ({ + getState: vi.fn(() => ({ + getStateEvents: vi.fn(() => undefined), + })), + })), getUnfilteredTimelineSet: vi.fn(() => ({ getLiveTimeline: () => ({ getEvents: () => roomTimelineEvents, From 39e25e3540aa1241e4820d43e9c92d7c6f177c0a Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 22:27:06 -0400 Subject: [PATCH 229/253] test(notifications): use current jotai hydrate api --- src/app/hooks/useNotificationJumper.test.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/hooks/useNotificationJumper.test.tsx b/src/app/hooks/useNotificationJumper.test.tsx index efcca25f2..576a06581 100644 --- a/src/app/hooks/useNotificationJumper.test.tsx +++ b/src/app/hooks/useNotificationJumper.test.tsx @@ -66,12 +66,14 @@ type WrapperProps = { }; function HydrateAtoms({ children }: WrapperProps) { - useHydrateAtoms([ - [activeSessionIdAtom, '@alice:test'], - [pendingNotificationAtom, { roomId: '!room:test', eventId: '$event:test' }], - [mDirectAtom, new Set()], - [roomToParentsAtom, new Map()], - ]); + useHydrateAtoms( + new Map([ + [activeSessionIdAtom, '@alice:test'], + [pendingNotificationAtom, { roomId: '!room:test', eventId: '$event:test' }], + [mDirectAtom, new Set()], + [roomToParentsAtom, new Map()], + ]) + ); return <>{children}; } From e12a4b0082a0ccdd75985a3fd5d282631064c29c Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 22:27:37 -0400 Subject: [PATCH 230/253] test(notifications): initialize jumper atoms via jotai store --- src/app/hooks/useNotificationJumper.test.tsx | 28 +++++++------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/src/app/hooks/useNotificationJumper.test.tsx b/src/app/hooks/useNotificationJumper.test.tsx index 576a06581..55bde4b48 100644 --- a/src/app/hooks/useNotificationJumper.test.tsx +++ b/src/app/hooks/useNotificationJumper.test.tsx @@ -1,7 +1,6 @@ import { ReactNode } from 'react'; import { act, render } from '@testing-library/react'; -import { Provider } from 'jotai'; -import { useHydrateAtoms } from 'jotai/utils'; +import { Provider, createStore } from 'jotai'; import { MemoryRouter } from 'react-router-dom'; import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'; import { SyncState } from '$types/matrix-sdk'; @@ -65,25 +64,16 @@ type WrapperProps = { children: ReactNode; }; -function HydrateAtoms({ children }: WrapperProps) { - useHydrateAtoms( - new Map([ - [activeSessionIdAtom, '@alice:test'], - [pendingNotificationAtom, { roomId: '!room:test', eventId: '$event:test' }], - [mDirectAtom, new Set()], - [roomToParentsAtom, new Map()], - ]) - ); - - return <>{children}; -} - function HydratedWrapper({ children }: WrapperProps) { + const store = createStore(); + store.set(activeSessionIdAtom, '@alice:test'); + store.set(pendingNotificationAtom, { roomId: '!room:test', eventId: '$event:test' }); + store.set(mDirectAtom, { type: 'INITIALIZE', rooms: new Set() }); + store.set(roomToParentsAtom, { type: 'INITIALIZE', roomToParents: new Map() }); + return ( - - - {children} - + + {children} ); } From ead2bb1675f8abde7b0c5114dd373d5020d980de Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sat, 18 Apr 2026 22:35:14 -0400 Subject: [PATCH 231/253] fix(notifications): avoid jumper ref lint error --- src/app/hooks/useNotificationJumper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/hooks/useNotificationJumper.ts b/src/app/hooks/useNotificationJumper.ts index 71c376982..e04ad818d 100644 --- a/src/app/hooks/useNotificationJumper.ts +++ b/src/app/hooks/useNotificationJumper.ts @@ -35,6 +35,7 @@ export function NotificationJumper() { // live timeline. Reset whenever `pending` changes. const jumpStartTimeRef = useRef(null); const jumpTimeoutRef = useRef | undefined>(undefined); + const performJumpRef = useRef<() => void>(() => undefined); const clearJumpTimeout = useCallback(() => { if (jumpTimeoutRef.current !== undefined) { @@ -171,7 +172,6 @@ export function NotificationJumper() { // arrays. Adding performJump as a dep causes the effect to re-run (and call // performJump again) on every atom change during an account switch β€” that is // the second source of repeated navigation. - const performJumpRef = useRef(performJump); performJumpRef.current = performJump; useSyncState( From e6e6048357bb8a27ac17dc9f781f4d1d2bb520fb Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 09:06:39 -0400 Subject: [PATCH 232/253] fix: kick sliding sync on foreground return MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit retryImmediately() is a no-op on SlidingSyncSdk β€” it returns true without touching the polling loop. Call slidingSync.resend() on foreground/focus to abort a stale long-poll and start a fresh one. Also fixes activeSession references that should use mx methods (getHomeserverUrl/getAccessToken/getUserId). --- src/app/hooks/useAppVisibility.ts | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index 590d746ae..e6773290e 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef } from 'react'; import { MatrixClient } from '$types/matrix-sdk'; import { Session } from '$state/sessions'; import { useAtom } from 'jotai'; +import { getSlidingSyncManager } from '$client/initMatrix'; import { togglePusher } from '../features/settings/notifications/PushNotifications'; import { appEvents } from '../utils/appEvents'; import { useClientConfig, useExperimentVariant } from './useClientConfig'; @@ -65,9 +66,9 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S const pushSessionNow = useCallback( (reason: 'foreground' | 'focus' | 'heartbeat'): 'sent' | 'skipped' => { - const baseUrl = activeSession?.baseUrl; - const accessToken = activeSession?.accessToken; - const userId = activeSession?.userId; + const baseUrl = mx?.getHomeserverUrl(); + const accessToken = mx?.getAccessToken(); + const userId = mx?.getUserId(); const canPush = !!mx && typeof baseUrl === 'string' && @@ -97,15 +98,7 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S }); return 'sent'; }, - [ - activeSession?.accessToken, - activeSession?.baseUrl, - activeSession?.userId, - mx, - phase1ForegroundResync, - phase2VisibleHeartbeat, - phase3AdaptiveBackoffJitter, - ] + [mx, phase1ForegroundResync, phase2VisibleHeartbeat, phase3AdaptiveBackoffJitter] ); useEffect(() => { @@ -127,6 +120,9 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S // Always kick the sync loop on foreground regardless of phase flags β€” // the SDK may be sitting in exponential backoff after iOS froze the tab. mx?.retryImmediately(); + // retryImmediately() is a no-op on SlidingSyncSdk β€” call resend() on the + // SlidingSync instance directly to abort a stale long-poll and start fresh. + if (mx) getSlidingSyncManager(mx)?.slidingSync.resend(); if (!phase1ForegroundResync) return; @@ -158,6 +154,7 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S // Always kick the sync loop on focus for the same reason as above. mx?.retryImmediately(); + if (mx) getSlidingSyncManager(mx)?.slidingSync.resend(); if (!phase1ForegroundResync) return; From 449de0a6c98361fa664dd910eb5d035f4acf9397 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 18:25:27 -0400 Subject: [PATCH 233/253] fix(config): enable SW session sync phases for reliable mobile notifications Add sessionSync.phase1ForegroundResync and phase2VisibleHeartbeat to config.json so the service worker session stays fresh on iOS. Without these flags useAppVisibility disables both foreground resync (phase1) and the 10-min visible heartbeat (phase2), leaving the CacheStorage session to age out after 24 h with no refresh. When iOS kills the SW while backgrounded and the session has gone stale, push decryption fails and notifications are silently dropped. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- config.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/config.json b/config.json index f0c3c8b61..3659a35d2 100644 --- a/config.json +++ b/config.json @@ -19,6 +19,11 @@ "enabled": true }, + "sessionSync": { + "phase1ForegroundResync": true, + "phase2VisibleHeartbeat": true + }, + "featuredCommunities": { "openAsDefault": false, "spaces": [ From b851f430ab1518731ff20b67dd0b3bb7cc487655 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Thu, 16 Apr 2026 10:31:58 -0400 Subject: [PATCH 234/253] feat(cache): unregister service workers on Clear Cache Unregister all service worker registrations before reloading when the user clicks Clear Cache & Reload. On iOS/mobile, stale SWs can persist and serve outdated assets even after an app update; this ensures the next load starts completely fresh. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/client/initMatrix.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/client/initMatrix.ts b/src/client/initMatrix.ts index f6f428a10..316157340 100644 --- a/src/client/initMatrix.ts +++ b/src/client/initMatrix.ts @@ -614,6 +614,14 @@ export const clearCacheAndReload = async (mx: MatrixClient) => { stopClient(mx); clearNavToActivePathStore(mx.getSafeUserId()); await mx.store.deleteAllData(); + + // Unregister all service workers so the next load starts fresh. + // Especially important on iOS/mobile where stale SWs can persist. + if ('serviceWorker' in navigator) { + const registrations = await navigator.serviceWorker.getRegistrations(); + await Promise.all(registrations.map((r) => r.unregister())); + } + window.location.reload(); }; From a374275a1e82b5d6bfdb96d93a17e3508c65a32c Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 15 Apr 2026 17:52:48 -0400 Subject: [PATCH 235/253] fix(nav): check DM membership before space parents in useRoomNavigate Mirrors the fix already applied in useNotificationJumper: when a room belongs to both the direct-message list and a space, prefer the /direct route over the space route. Previously useRoomNavigate checked orphan space parents first, which caused bookmark jumps and room-nav clicks on DMs-in-spaces to open the room via the space path instead of the direct path. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/useRoomNavigate.ts | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/app/hooks/useRoomNavigate.ts b/src/app/hooks/useRoomNavigate.ts index 51555125c..c2918d5ca 100644 --- a/src/app/hooks/useRoomNavigate.ts +++ b/src/app/hooks/useRoomNavigate.ts @@ -37,7 +37,20 @@ export const useRoomNavigate = () => { const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId); const openSpaceTimeline = developerTools && spaceSelectedId === roomId; - const orphanParents = openSpaceTimeline ? [roomId] : getOrphanParents(roomToParents, roomId); + // Developer-mode: view the space's own timeline (must be checked first). + if (openSpaceTimeline) { + navigate(getSpaceRoomPath(roomIdOrAlias, roomId, eventId), opts); + return; + } + + // DMs take priority over space membership so direct chats always open + // via the direct route, even when the room also belongs to a space. + if (mDirects.has(roomId)) { + navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts); + return; + } + + const orphanParents = getOrphanParents(roomToParents, roomId); if (orphanParents.length > 0) { let parentSpace: string; if (spaceSelectedId && orphanParents.includes(spaceSelectedId)) { @@ -48,15 +61,7 @@ export const useRoomNavigate = () => { const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, parentSpace); - navigate( - getSpaceRoomPath(pSpaceIdOrAlias, openSpaceTimeline ? roomId : roomIdOrAlias, eventId), - opts - ); - return; - } - - if (mDirects.has(roomId)) { - navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts); + navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias, eventId), opts); return; } From ffd63b58bfae763d55e91a38b56e24dedd7a69fa Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 21 Apr 2026 18:33:20 -0400 Subject: [PATCH 236/253] fix(notifications): add registration.active fallback for SW message relay MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When navigator.serviceWorker.controller is null β€” which happens when a window is opened by a notification tap before the SW has claimed it, or transiently during a SW update cycle β€” postMessage calls were silently dropped. This caused the decryption-result reply to never reach the SW, so the 5-second timeout fired and the notification either showed "Encrypted message" or was skipped entirely. Subsequent notifications after the first tended to fail because the tab that received the push was often the freshly-opened uncontrolled window. The same null-controller bug affected enablePushNotifications / disablePushNotifications: if the togglePush message was dropped, the homeserver pusher state was never updated, so no further pushes arrived. Fix: mirror the pattern already used by SyncNotificationSettingsWithSW and setNotificationSettings in the same file β€” send to both controller (fast path, usually correct) and registration.active (belt-and-suspenders via ready.then). Double delivery is safe: the SW's decryptionPendingMap deduplicates pushDecryptResult, and duplicate pusher SET/DELETE requests to the homeserver are idempotent. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../notifications/PushNotifications.tsx | 27 +++++++------------ src/app/pages/client/ClientNonUIFeatures.tsx | 17 +++++++++--- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/app/features/settings/notifications/PushNotifications.tsx b/src/app/features/settings/notifications/PushNotifications.tsx index 46c0ebb0d..d71b52ba3 100644 --- a/src/app/features/settings/notifications/PushNotifications.tsx +++ b/src/app/features/settings/notifications/PushNotifications.tsx @@ -69,12 +69,9 @@ export async function enablePushNotifications( }, append: false, }; - navigator.serviceWorker.controller?.postMessage({ - url: mx.baseUrl, - type: 'togglePush', - pusherData, - token: mx.getAccessToken(), - }); + const toggleMsg = { url: mx.baseUrl, type: 'togglePush', pusherData, token: mx.getAccessToken() }; + navigator.serviceWorker.controller?.postMessage(toggleMsg); + navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(toggleMsg)); return; } @@ -118,12 +115,9 @@ export async function enablePushNotifications( append: false, }; - navigator.serviceWorker.controller?.postMessage({ - url: mx.baseUrl, - type: 'togglePush', - pusherData, - token: mx.getAccessToken(), - }); + const enableMsg = { url: mx.baseUrl, type: 'togglePush', pusherData, token: mx.getAccessToken() }; + navigator.serviceWorker.controller?.postMessage(enableMsg); + navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(enableMsg)); } /** @@ -144,12 +138,9 @@ export async function disablePushNotifications( pushkey: pushSubAtom?.keys?.p256dh, }; - navigator.serviceWorker.controller?.postMessage({ - url: mx.baseUrl, - type: 'togglePush', - pusherData, - token: mx.getAccessToken(), - }); + const disableMsg = { url: mx.baseUrl, type: 'togglePush', pusherData, token: mx.getAccessToken() }; + navigator.serviceWorker.controller?.postMessage(disableMsg); + navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(disableMsg)); } export async function deRegisterAllPushers(mx: MatrixClient): Promise { diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index d92ff9dbb..1ff6b0742 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -798,7 +798,7 @@ function HandleDecryptPushEvent() { appVisible: visible, }); - navigator.serviceWorker.controller?.postMessage({ + const successReply = { type: 'pushDecryptResult', eventId, success: true, @@ -807,7 +807,14 @@ function HandleDecryptPushEvent() { sender_display_name: senderName, room_name: room?.name ?? '', visibilityState: document.visibilityState, - }); + }; + navigator.serviceWorker.controller?.postMessage(successReply); + // Belt-and-suspenders: also post via registration.active so the reply + // reaches the SW even when controller is transiently null (e.g., the + // window was opened by a notification tap before the SW claimed it, or + // during a SW update cycle). The SW deduplicates via decryptionPendingMap + // β€” the second message is a no-op once the entry is already resolved. + navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(successReply)); } catch (err) { console.warn('[app] HandleDecryptPushEvent: failed to decrypt push event', err); pushRelayLog.error( @@ -815,12 +822,14 @@ function HandleDecryptPushEvent() { 'Push relay decryption failed', err instanceof Error ? err : new Error(String(err)) ); - navigator.serviceWorker.controller?.postMessage({ + const errorReply = { type: 'pushDecryptResult', eventId, success: false, visibilityState: document.visibilityState, - }); + }; + navigator.serviceWorker.controller?.postMessage(errorReply); + navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(errorReply)); } }; From 3484ec52493e72b6271c1da19384b78a45a36095 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 21 Apr 2026 18:37:10 -0400 Subject: [PATCH 237/253] fix(timeline): remove duplicate MIN_INITIAL_SCROLL_ROOM_PX declaration Duplicate const introduced during integration merge causing build failure. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 41ea85e16..721501dcc 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -110,7 +110,6 @@ const getDayDividerText = (ts: number) => { const SCROLL_SETTLE_MS = 250; const MIN_INITIAL_SCROLL_ROOM_PX = 300; -const MIN_INITIAL_SCROLL_ROOM_PX = 300; const TIMELINE_ANCHOR_SELECTOR = '[data-timeline-event-id]'; const buildRoomScrollFingerprint = ( From 953c7164276fd5049f6ce693e70dbaa0a69fd8eb Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 21 Apr 2026 19:09:49 -0400 Subject: [PATCH 238/253] fix(timeline): restore missing refs and roomScrollCache utility MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The integration rebuild partially included perf/timeline-rendering β€” it got the 'align initial room-fill thresholds' and 'stabilize bottom pin' commits but missed the 'feat(timeline): restore room cache by event anchor' commit chain. That commit introduced several refs and a utility module that the later commits depend on, causing a ReferenceError crash on room open: readyBlockedByPaginationRef is not defined (already restored earlier) saveRoomScrollStateRef / currentScrollFingerprintRef (type-only β€” no-op without wiring) prevScrollSizeRef (content-grow detection in handleVListScroll) isReadyRef (scroll-event guard during init) RoomScrollFingerprint type (return type of buildRoomScrollFingerprint) Restore: - src/app/utils/roomScrollCache.ts (deleted during merge) - import { roomScrollCache, RoomScrollCache, RoomScrollFingerprint, RoomScrollPosition } from roomScrollCache - const prevScrollSizeRef = useRef(0) - const isReadyRef = useRef(false); isReadyRef.current = isReady - const saveRoomScrollStateRef / currentScrollFingerprintRef The full scroll-position restore wiring (roomScrollCache.save/load, saveRoomScrollState callback, restoreRoomScrollPosition) is not yet wired up β€” the saveRoomScrollStateRef.current stays undefined so those call sites are no-ops β€” but all runtime references are now defined and the app no longer crashes on room open. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 17 +++++++ src/app/utils/roomScrollCache.ts | 67 ++++++++++++++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 src/app/utils/roomScrollCache.ts diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 721501dcc..cc5539971 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -13,6 +13,12 @@ import { useAtomValue, useSetAtom } from 'jotai'; import { PushProcessor, Room, Direction } from '$types/matrix-sdk'; import classNames from 'classnames'; import { VList, VListHandle } from 'virtua'; +import { + roomScrollCache, + RoomScrollCache, + RoomScrollFingerprint, + RoomScrollPosition, +} from '$utils/roomScrollCache'; import { as, Box, @@ -193,6 +199,7 @@ export function RoomTimeline({ hideReadsRef.current = hideReads; const prevViewportHeightRef = useRef(0); + const prevScrollSizeRef = useRef(0); const messageListRef = useRef(null); const mediaAuthentication = useMediaAuthentication(); @@ -238,9 +245,19 @@ export function RoomTimeline({ // A recovery useLayoutEffect watches for processedEvents becoming non-empty // and performs the final scroll + setIsReady when this flag is set. const pendingReadyRef = useRef(false); + // Set to true when the 80 ms timer fires but backward pagination hasn't yet + // filled the viewport. The pagination-settle effect below watches for this + // flag and performs the final scroll + setIsReady when pagination settles. + const readyBlockedByPaginationRef = useRef(false); const currentRoomIdRef = useRef(room.roomId); + const currentScrollFingerprintRef = useRef(undefined); + const saveRoomScrollStateRef = useRef< + ((measurementCache: RoomScrollCache['measurementCache'], atBottom: boolean) => void) | undefined + >(undefined); const [isReady, setIsReady] = useState(false); + const isReadyRef = useRef(false); + isReadyRef.current = isReady; if (currentRoomIdRef.current !== room.roomId) { hasInitialScrolledRef.current = false; diff --git a/src/app/utils/roomScrollCache.ts b/src/app/utils/roomScrollCache.ts new file mode 100644 index 000000000..9739a8fbe --- /dev/null +++ b/src/app/utils/roomScrollCache.ts @@ -0,0 +1,67 @@ +import { CacheSnapshot } from 'virtua'; + +export type RoomScrollFingerprint = { + eventCount: number; + headEventIds: string[]; + tailEventIds: string[]; + readUptoEventId?: string; + layoutKey: string; +}; + +export type RoomScrollPosition = + | { + kind: 'live'; + } + | { + kind: 'anchor'; + eventId: string; + offset: number; + }; + +export type RoomScrollCache = { + /** VList item-size snapshot β€” restored via VList `cache=` prop on remount. */ + measurementCache?: CacheSnapshot; + /** Logical restore position captured from the rendered timeline. */ + position: RoomScrollPosition; + /** Timeline/layout fingerprint used to validate index-based measurements. */ + fingerprint: RoomScrollFingerprint; +}; + +/** Session-scoped, per-room scroll cache. Not persisted across page reloads. */ +const scrollCacheMap = new Map(); + +const cacheKey = (userId: string, roomId: string): string => `${userId}:${roomId}`; + +const fingerprintMatches = ( + saved: RoomScrollFingerprint, + current: RoomScrollFingerprint +): boolean => + saved.layoutKey === current.layoutKey && + saved.readUptoEventId === current.readUptoEventId && + saved.eventCount === current.eventCount && + saved.headEventIds.length > 0 && + saved.tailEventIds.length > 0 && + saved.headEventIds.every((eventId, index) => current.headEventIds[index] === eventId) && + saved.tailEventIds.every((eventId, index) => current.tailEventIds[index] === eventId); + +export const roomScrollCache = { + save(userId: string, roomId: string, data: RoomScrollCache): void { + scrollCacheMap.set(cacheKey(userId, roomId), data); + }, + load( + userId: string, + roomId: string, + currentFingerprint?: RoomScrollFingerprint + ): RoomScrollCache | undefined { + const cached = scrollCacheMap.get(cacheKey(userId, roomId)); + if (!cached) return undefined; + if (!currentFingerprint) return cached; + if (!fingerprintMatches(cached.fingerprint, currentFingerprint)) { + return { + ...cached, + measurementCache: undefined, + }; + } + return cached; + }, +}; From 0b9b0fd7a40e52bdbdef90c4a66f374f1ad31965 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 21 Apr 2026 19:15:34 -0400 Subject: [PATCH 239/253] fix(lint): resolve all ESLint errors across integration - RoomTimeline: remove unused TIMELINE_ANCHOR_SELECTOR, buildRoomScrollFingerprint, currentScrollFingerprintRef (incomplete perf/timeline wiring stubs) - RoomTimeline: narrow import to RoomScrollCache only (RoomScrollFingerprint unused) - sw-session: remove void operator to satisfy no-void rule - Auto-fixed prettier formatting in PushNotifications, ClientNonUIFeatures, useProcessedTimeline, BackgroundNotifications Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 25 ++----------------- .../notifications/PushNotifications.tsx | 14 +++++++++-- .../hooks/timeline/useProcessedTimeline.ts | 4 +-- .../pages/client/BackgroundNotifications.tsx | 3 +-- src/app/pages/client/ClientNonUIFeatures.tsx | 7 +++++- src/sw-session.ts | 2 +- 6 files changed, 23 insertions(+), 32 deletions(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index cc5539971..2ded0025c 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -13,12 +13,7 @@ import { useAtomValue, useSetAtom } from 'jotai'; import { PushProcessor, Room, Direction } from '$types/matrix-sdk'; import classNames from 'classnames'; import { VList, VListHandle } from 'virtua'; -import { - roomScrollCache, - RoomScrollCache, - RoomScrollFingerprint, - RoomScrollPosition, -} from '$utils/roomScrollCache'; +import { RoomScrollCache } from '$utils/roomScrollCache'; import { as, Box, @@ -117,18 +112,6 @@ const getDayDividerText = (ts: number) => { const SCROLL_SETTLE_MS = 250; const MIN_INITIAL_SCROLL_ROOM_PX = 300; -const TIMELINE_ANCHOR_SELECTOR = '[data-timeline-event-id]'; -const buildRoomScrollFingerprint = ( - eventIds: string[], - readUptoEventId: string | undefined, - layoutKey: string -): RoomScrollFingerprint => ({ - eventCount: eventIds.length, - headEventIds: eventIds.slice(0, 5), - tailEventIds: eventIds.slice(-5), - readUptoEventId, - layoutKey, -}); export type RoomTimelineProps = { room: Room; eventId?: string; @@ -250,7 +233,6 @@ export function RoomTimeline({ // flag and performs the final scroll + setIsReady when pagination settles. const readyBlockedByPaginationRef = useRef(false); const currentRoomIdRef = useRef(room.roomId); - const currentScrollFingerprintRef = useRef(undefined); const saveRoomScrollStateRef = useRef< ((measurementCache: RoomScrollCache['measurementCache'], atBottom: boolean) => void) | undefined >(undefined); @@ -396,10 +378,7 @@ export function RoomTimeline({ const v = vListRef.current; if (!v) return; // Still not filled and can paginate more β€” keep waiting. - if ( - canPaginateBackRef.current && - v.scrollSize <= v.viewportSize + MIN_INITIAL_SCROLL_ROOM_PX - ) + if (canPaginateBackRef.current && v.scrollSize <= v.viewportSize + MIN_INITIAL_SCROLL_ROOM_PX) return; readyBlockedByPaginationRef.current = false; v.scrollToIndex(processedEventsRef.current.length - 1, { align: 'end' }); diff --git a/src/app/features/settings/notifications/PushNotifications.tsx b/src/app/features/settings/notifications/PushNotifications.tsx index d71b52ba3..f86e13ccd 100644 --- a/src/app/features/settings/notifications/PushNotifications.tsx +++ b/src/app/features/settings/notifications/PushNotifications.tsx @@ -69,7 +69,12 @@ export async function enablePushNotifications( }, append: false, }; - const toggleMsg = { url: mx.baseUrl, type: 'togglePush', pusherData, token: mx.getAccessToken() }; + const toggleMsg = { + url: mx.baseUrl, + type: 'togglePush', + pusherData, + token: mx.getAccessToken(), + }; navigator.serviceWorker.controller?.postMessage(toggleMsg); navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(toggleMsg)); return; @@ -138,7 +143,12 @@ export async function disablePushNotifications( pushkey: pushSubAtom?.keys?.p256dh, }; - const disableMsg = { url: mx.baseUrl, type: 'togglePush', pusherData, token: mx.getAccessToken() }; + const disableMsg = { + url: mx.baseUrl, + type: 'togglePush', + pusherData, + token: mx.getAccessToken(), + }; navigator.serviceWorker.controller?.postMessage(disableMsg); navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(disableMsg)); } diff --git a/src/app/hooks/timeline/useProcessedTimeline.ts b/src/app/hooks/timeline/useProcessedTimeline.ts index 3b5d7b957..72b9bfa49 100644 --- a/src/app/hooks/timeline/useProcessedTimeline.ts +++ b/src/app/hooks/timeline/useProcessedTimeline.ts @@ -108,9 +108,7 @@ export function useProcessedTimeline({ // via RoomEvent.Timeline listeners in PollEvent and must never render as timeline items. // Also check the effective (decrypted) type for encrypted events that have been decrypted. const effectiveType = - type === 'm.room.encrypted' - ? ((mEvent.getEffectiveEvent()?.type as string) ?? type) - : type; + type === 'm.room.encrypted' ? (mEvent.getEffectiveEvent()?.type ?? type) : type; if ( effectiveType === 'org.matrix.msc3381.poll.response' || effectiveType === 'org.matrix.msc3381.poll.end' || diff --git a/src/app/pages/client/BackgroundNotifications.tsx b/src/app/pages/client/BackgroundNotifications.tsx index 39a6641c9..536e31940 100644 --- a/src/app/pages/client/BackgroundNotifications.tsx +++ b/src/app/pages/client/BackgroundNotifications.tsx @@ -421,8 +421,7 @@ export function BackgroundNotifications() { // After decryption, getType() still returns the wire type (m.room.encrypted). // Use the effective event type to get the decrypted type when available. - const effectiveEventType = - (mEvent.getEffectiveEvent()?.type as string) ?? mEvent.getType(); + const effectiveEventType = mEvent.getEffectiveEvent()?.type ?? mEvent.getType(); notifiedEventsRef.current.add(dedupeId); // Cap the set so it doesn't grow unbounded diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 1ff6b0742..992ff0bd4 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -342,7 +342,12 @@ function MessageNotifications() { return; } - if (!room || isHistoricalEvent || room.isSpaceRoom() || !isNotificationEvent(mEvent, room, mx.getUserId() ?? undefined)) { + if ( + !room || + isHistoricalEvent || + room.isSpaceRoom() || + !isNotificationEvent(mEvent, room, mx.getUserId() ?? undefined) + ) { return; } diff --git a/src/sw-session.ts b/src/sw-session.ts index 63d285d99..326487c3a 100644 --- a/src/sw-session.ts +++ b/src/sw-session.ts @@ -31,7 +31,7 @@ export function pushSessionToSW(baseUrl?: string, accessToken?: string, userId?: // Backgrounded/mobile browsers can drop the current controller reference even // though the registration is still active. Post to any reachable worker from // navigator.serviceWorker.ready so the session is restored without a reload. - void navigator.serviceWorker.ready + navigator.serviceWorker.ready .then((registration) => { postSessionPayload(registration.active, payload, seenTargets); postSessionPayload(registration.waiting, payload, seenTargets); From 95c99937b0b0c5df6e0bd935d64ba0e337e919aa Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Tue, 21 Apr 2026 21:27:18 -0400 Subject: [PATCH 240/253] feat(timeline): configurable message grouping threshold Add Discord-style message grouping where consecutive messages from the same sender within a configurable time window collapse the sender header. - Add messageGroupingThreshold to Settings type (default: 2 min) - Replace hardcoded 2-min threshold in useProcessedTimeline with the setting - Wire useSetting in RoomTimeline and pass to useProcessedTimeline - Add MessageGrouping component in Experimental settings with 5 options: 2 min (default), 5 min, 15 min (Discord-style), 30 min, 60 min Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 2 + .../settings/experimental/Experimental.tsx | 2 + .../settings/experimental/MessageGrouping.tsx | 53 +++++++++++++++++++ .../hooks/timeline/useProcessedTimeline.ts | 11 +++- src/app/state/settings.ts | 6 +++ 5 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 src/app/features/settings/experimental/MessageGrouping.tsx diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index d026ec1fa..31aa9d67c 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -149,6 +149,7 @@ export function RoomTimeline({ const [autoplayStickers] = useSetting(settingsAtom, 'autoplayStickers'); const [autoplayEmojis] = useSetting(settingsAtom, 'autoplayEmojis'); const [hideMemberInReadOnly] = useSetting(settingsAtom, 'hideMembershipInReadOnly'); + const [messageGroupingThreshold] = useSetting(settingsAtom, 'messageGroupingThreshold'); const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview; const showClientUrlPreview = room.hasEncryptionStateEvent() @@ -740,6 +741,7 @@ export function RoomTimeline({ hideNickAvatarEvents, isReadOnly, hideMemberInReadOnly, + messageGroupingThreshold, }); processedEventsRef.current = processedEvents; diff --git a/src/app/features/settings/experimental/Experimental.tsx b/src/app/features/settings/experimental/Experimental.tsx index 330412185..6ffded609 100644 --- a/src/app/features/settings/experimental/Experimental.tsx +++ b/src/app/features/settings/experimental/Experimental.tsx @@ -10,6 +10,7 @@ import { Sync } from '../general'; import { SettingsSectionPage } from '../SettingsSectionPage'; import { BandwidthSavingEmojis } from './BandwithSavingEmojis'; import { MSC4268HistoryShare } from './MSC4268HistoryShare'; +import { MessageGrouping } from './MessageGrouping'; function PersonaToggle() { const [showPersonaSetting, setShowPersonaSetting] = useSetting( @@ -59,6 +60,7 @@ export function Experimental({ requestBack, requestClose }: Readonly + diff --git a/src/app/features/settings/experimental/MessageGrouping.tsx b/src/app/features/settings/experimental/MessageGrouping.tsx new file mode 100644 index 000000000..95ce8139f --- /dev/null +++ b/src/app/features/settings/experimental/MessageGrouping.tsx @@ -0,0 +1,53 @@ +import { Box, Text, config } from 'folds'; +import { settingsAtom } from '$state/settings'; +import { useSetting } from '$state/hooks/settings'; +import { SequenceCardStyle } from '$features/common-settings/styles.css'; +import { SettingTile } from '$components/setting-tile'; +import { SequenceCard } from '$components/sequence-card'; + +const THRESHOLD_OPTIONS: { value: number; label: string }[] = [ + { value: 2, label: '2 min (default)' }, + { value: 5, label: '5 min' }, + { value: 15, label: '15 min (Discord-style)' }, + { value: 30, label: '30 min' }, + { value: 60, label: '60 min' }, +]; + +export function MessageGrouping() { + const [threshold, setThreshold] = useSetting(settingsAtom, 'messageGroupingThreshold'); + + return ( + + Message Grouping + + setThreshold(Number(e.target.value))} + style={{ + background: 'var(--bg-surface)', + color: 'var(--tc-surface-high)', + border: '1px solid var(--bg-surface-border)', + borderRadius: config.radii.R300, + padding: `${config.space.S100} ${config.space.S200}`, + fontSize: config.fontSize.T300, + cursor: 'pointer', + }} + > + {THRESHOLD_OPTIONS.map(({ value, label }) => ( + + ))} + + } + /> + + + ); +} diff --git a/src/app/hooks/timeline/useProcessedTimeline.ts b/src/app/hooks/timeline/useProcessedTimeline.ts index 44e9500a2..9c94f7091 100644 --- a/src/app/hooks/timeline/useProcessedTimeline.ts +++ b/src/app/hooks/timeline/useProcessedTimeline.ts @@ -26,6 +26,12 @@ export interface UseProcessedTimelineOptions { * where every reply legitimately has `threadRootId` set to the root. */ skipThreadFilter?: boolean; + /** + * Minutes of inactivity before a new message from the same sender gets a + * full user header. Defaults to 2 (the original behaviour). Set higher + * (e.g. 15) for Discord-style compact grouping. + */ + messageGroupingThreshold?: number; } export interface ProcessedEvent { @@ -62,6 +68,7 @@ export function useProcessedTimeline({ isReadOnly, hideMemberInReadOnly, skipThreadFilter, + messageGroupingThreshold = 2, }: UseProcessedTimelineOptions): ProcessedEvent[] { return useMemo(() => { let prevEvent: MatrixEvent | undefined; @@ -145,7 +152,8 @@ export function useProcessedTimeline({ if (isMessageEvent) { const withinTimeThreshold = - minuteDifference(getPrevTs.call(prevEvent), getEvtTs.call(mEvent)) < 2; + minuteDifference(getPrevTs.call(prevEvent), getEvtTs.call(mEvent)) < + messageGroupingThreshold; const senderMatch = getPrevSender.call(prevEvent) === eventSender; const typeMatch = normalizeMessageType(getPrevType.call(prevEvent)) === normalizeMessageType(type); @@ -201,5 +209,6 @@ export function useProcessedTimeline({ isReadOnly, hideMemberInReadOnly, skipThreadFilter, + messageGroupingThreshold, ]); } diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 05bb8e0fb..45ca6d79b 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -119,6 +119,9 @@ export interface Settings { showPersonaSetting: boolean; closeFoldersByDefault: boolean; + // experimental + messageGroupingThreshold: number; + // furry stuff renderAnimals: boolean; } @@ -220,6 +223,9 @@ const defaultSettings: Settings = { showPersonaSetting: false, closeFoldersByDefault: false, + // experimental + messageGroupingThreshold: 2, + // furry stuff renderAnimals: true, }; From 1eb38473c5ee94c3b836f063ec29d11d4e7b0165 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 22 Apr 2026 08:16:08 -0400 Subject: [PATCH 241/253] fix(sw): defer skipWaiting to user-confirmed update prompt MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously skipWaiting() was called automatically in the install event, causing every new deployment to immediately activate the new SW mid-session. When users then navigated to a lazy-loaded route, the old chunk hash no longer existed on the server β†’ 404 β†’ chunk-error handler β†’ silent reload. This presented as the app 'randomly restarting' after deployments. Changes: - Remove auto-skipWaiting() from SW install handler - Add SKIP_WAITING_AND_CLAIM message handler β€” the update prompt already sends this message; now the SW acts on it with self.skipWaiting() - Deduplicate the double navigator.serviceWorker.register() call in index.tsx (was registering twice with different options in dev mode) - Move sendSessionToSW into the single registration .then() handler so the session is sent as soon as the registration resolves, and keep the .ready fallback for the case where registration already settled The new SW will now sit in 'waiting' state until the user confirms the update prompt ('A new version of the app is available. Refresh?'). Existing sessions are uninterrupted until then. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/index.tsx | 28 +++++++++++++--------------- src/sw.ts | 13 +++++++++++-- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 4f2e57245..cb0ee3479 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -59,7 +59,20 @@ if ('serviceWorker' in navigator) { } }; + const sendSessionToSW = () => { + // Use the active session from the new multi-session store, fall back to legacy + const sessions = getLocalStorageItem(MATRIX_SESSIONS_KEY, []); + const activeId = getLocalStorageItem(ACTIVE_SESSION_KEY, undefined); + const active = + sessions.find((s) => s.userId === activeId) ?? sessions[0] ?? getFallbackSession(); + pushSessionToSW(active?.baseUrl, active?.accessToken, active?.userId); + }; + navigator.serviceWorker.register(swUrl, swRegisterOptions).then((registration) => { + // Send session immediately so the SW can serve authenticated media fetches + // as soon as it is active, without waiting for the page to mount. + sendSessionToSW(); + registration.addEventListener('updatefound', () => { const installingWorker = registration.installing; if (installingWorker) { @@ -74,21 +87,6 @@ if ('serviceWorker' in navigator) { }); }); - const sendSessionToSW = () => { - // Use the active session from the new multi-session store, fall back to legacy - const sessions = getLocalStorageItem(MATRIX_SESSIONS_KEY, []); - const activeId = getLocalStorageItem(ACTIVE_SESSION_KEY, undefined); - const active = - sessions.find((s) => s.userId === activeId) ?? sessions[0] ?? getFallbackSession(); - pushSessionToSW(active?.baseUrl, active?.accessToken, active?.userId); - }; - - navigator.serviceWorker - .register(swUrl) - .then(sendSessionToSW) - .catch((err) => { - log.warn('SW registration failed:', err); - }); navigator.serviceWorker.ready.then(sendSessionToSW).catch((err) => { log.warn('SW ready failed:', err); }); diff --git a/src/sw.ts b/src/sw.ts index eb6328912..dfd1af713 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -561,8 +561,12 @@ async function handleMinimalPushPayload( } } -self.addEventListener('install', (event: ExtendableEvent) => { - event.waitUntil(self.skipWaiting()); +self.addEventListener('install', () => { + // Do NOT call skipWaiting() here. Activating immediately would discard the + // old SW mid-session; any lazy-loaded JS chunk that only existed in the old + // precache becomes a 404, causing the chunk-error handler to silently reload + // the page. Instead, the new SW waits until the update prompt is confirmed + // (SKIP_WAITING_AND_CLAIM message) or the user manually refreshes. }); self.addEventListener('activate', (event: ExtendableEvent) => { @@ -594,6 +598,11 @@ self.addEventListener('message', (event: ExtendableMessageEvent) => { if (!data || typeof data !== 'object') return; const { type, accessToken, baseUrl, userId } = data as Record; + if (type === 'SKIP_WAITING_AND_CLAIM') { + // Sent by the update prompt when the user confirms they want to update. + // skipWaiting() activates this SW immediately; the page then reloads. + event.waitUntil(self.skipWaiting()); + } if (type === 'setSession') { setSession(client.id, accessToken, baseUrl, userId); // Keep the SW alive until the cache write completes. persistSession is From 5ba7bd7a03060ec9b818aeaf5a8787f84b36878f Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 22 Apr 2026 08:16:25 -0400 Subject: [PATCH 242/253] Merge fix/sw-update-skipwaiting into integration Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> From 022649cfb4dc4c2bfa61285dc7b4d602d04d355a Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 22 Apr 2026 09:02:04 -0400 Subject: [PATCH 243/253] fix(room-nav): use stable room ID keys in virtualized room lists MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously all three room list virtualizers used `key={vItem.index}` (position-based). When a room moves position (e.g. a DM jumps to the top after a new message), React reuses the component at that index rather than remounting it. This caused `useRoomHasUnread`'s lazy `useState` initializer to retain stale state from the previous room at that index β€” resulting in the unread dot appearing on the wrong room until the next Timeline/Receipt event fired. Fix: add `getItemKey` to each `useVirtualizer` config so TanStack Virtual assigns stable room-ID-based keys, then use `vItem.key` on ``. React now correctly unmounts/remounts when a different room occupies a position, so all per-room state is fresh. - Direct.tsx: getItemKey = sortedDirects[index] - Home.tsx: getItemKey = sortedRooms[index] - Space.tsx: getItemKey = hierarchy[index]?.roomId ?? index Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/pages/client/direct/Direct.tsx | 3 ++- src/app/pages/client/home/Home.tsx | 3 ++- src/app/pages/client/space/Space.tsx | 11 ++++------- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx index 7bf4d153b..e2fb4c319 100644 --- a/src/app/pages/client/direct/Direct.tsx +++ b/src/app/pages/client/direct/Direct.tsx @@ -234,6 +234,7 @@ export function Direct() { getScrollElement: () => scrollRef.current, estimateSize: () => 38, overscan: 10, + getItemKey: (index) => sortedDirects[index], }); const handleCategoryClick = useCategoryHandler(setClosedCategories, (categoryId) => @@ -291,7 +292,7 @@ export function Direct() { return ( scrollRef.current, estimateSize: () => 38, overscan: 10, + getItemKey: (index) => sortedRooms[index], }); const handleCategoryClick = useCategoryHandler(setClosedCategories, (categoryId) => @@ -366,7 +367,7 @@ export function Home() { return ( scrollRef.current, estimateSize: () => 32, overscan: 10, + getItemKey: (index) => hierarchy[index]?.roomId ?? index, }); const virtualizedItems = virtualizer.getVirtualItems(); @@ -775,7 +776,7 @@ export function Space() { return (
@@ -799,7 +800,7 @@ export function Space() { return (
@@ -818,11 +819,7 @@ export function Space() { } return ( - +
Date: Wed, 22 Apr 2026 09:59:51 -0400 Subject: [PATCH 244/253] fix(presence): add heartbeat to win back online state on multi-device MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Matrix presence is per-user on the server, not per-device. When an idle device sends `setPresence({ presence: 'unavailable' })`, the shared server state changes for all clients. The active device's PresenceFeature only re-sends its state when `autoIdled`, `presenceMode`, or `sendPresence` changes β€” none of which fire on the active device, so the idle device permanently 'wins' until the user switches tabs or interacts. Fix: add a 2-minute heartbeat that re-asserts `{ presence: 'online' }` Within one heartbeat cycle the active device wins back the server state. The heartbeat is idle-free (stops when autoIdled or mode changes), so it doesn't fight against intentional DND/offline/idle changes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/pages/client/ClientNonUIFeatures.tsx | 24 ++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 9c5c76306..8d69332f4 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -827,6 +827,12 @@ function HandleDecryptPushEvent() { return null; } +// How often an active device re-asserts its online state to the server. +// Matrix presence is per-user (not per-device): if another device sets you to +// idle/unavailable, this heartbeat wins the server state back within one interval. +// Must be shorter than the shortest expected idle timeout (default 5 min). +const PRESENCE_HEARTBEAT_INTERVAL_MS = 2 * 60_000; // 2 minutes + function PresenceFeature() { const mx = useMatrixClient(); const [sendPresence] = useSetting(settingsAtom, 'sendPresence'); @@ -872,6 +878,24 @@ function PresenceFeature() { }; }, [autoIdled, mx, presenceMode, sendPresence]); + // Presence heartbeat: periodically re-assert online state while this device + // is active. Fixes a multi-device race where a different idle device sets the + // shared server presence to unavailable while the user is active here. + useEffect(() => { + const isActiveOnline = sendPresence && !autoIdled && presenceMode === 'online'; + if (!isActiveOnline) return undefined; + + const heartbeatId = window.setInterval(() => { + mx.setPresence({ presence: 'online' }).catch(() => { + // Silently ignore β€” the main effect will retry on next state change. + }); + }, PRESENCE_HEARTBEAT_INTERVAL_MS); + + return () => { + window.clearInterval(heartbeatId); + }; + }, [autoIdled, mx, presenceMode, sendPresence]); + return null; } From 13d1baf20f9fbd8e51dcaaddce1a1053f377350b Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 22 Apr 2026 16:07:40 -0400 Subject: [PATCH 245/253] fix(notifications): re-register pusher on mount and catch togglePusher errors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously, the pusher was only re-registered with Sygnal on visibility changes (backgrounding/foregrounding). If the browser rotated the push subscription endpoint while the app was closed, there was a window from app open until the first background event where pushes would silently fail (Sygnal 410s on the stale endpoint). Also, the togglePusher Promise was fire-and-forget β€” unhandled rejections from enablePushNotifications (e.g. pushManager.subscribe() failure due to transient network error) were silently swallowed, leaving the pusher in an unknown state with no log trail. Fixes: - Call togglePusher once immediately on mount with the current visibility state so the endpoint is always current on app startup - Wrap all togglePusher calls with .catch(debugLog.warn) so failures are surfaced in the debug log and Sentry Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/hooks/useAppVisibility.ts | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts index e6773290e..ba47af279 100644 --- a/src/app/hooks/useAppVisibility.ts +++ b/src/app/hooks/useAppVisibility.ts @@ -192,11 +192,24 @@ export function useAppVisibility(mx: MatrixClient | undefined, activeSession?: S useEffect(() => { if (!mx) return; - const handleVisibilityForNotifications = (isVisible: boolean) => { - togglePusher(mx, clientConfig, isVisible, usePushNotifications, pushSubAtom, isMobile); + const runTogglePusher = (isVisible: boolean) => { + togglePusher(mx, clientConfig, isVisible, usePushNotifications, pushSubAtom, isMobile).catch( + (err) => + debugLog.warn( + 'notification', + 'togglePusher failed', + err instanceof Error ? err : new Error(String(err)) + ) + ); }; - appEvents.onVisibilityChange = handleVisibilityForNotifications; + // Re-register the pusher on mount so the endpoint is always current after + // an app restart, SW update, or browser push-subscription rotation. + // togglePusher/enablePushNotifications is idempotent β€” it reuses the existing + // subscription when the endpoint hasn't changed, so this is cheap. + runTogglePusher(document.visibilityState === 'visible'); + + appEvents.onVisibilityChange = runTogglePusher; // eslint-disable-next-line consistent-return return () => { appEvents.onVisibilityChange = null; From 1c50d87a5a700485d1ec57719a1a2bb5d3a7d221 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 22 Apr 2026 16:24:48 -0400 Subject: [PATCH 246/253] fix(notifications): clear badge on foreground when highlights already zero FaviconUpdater's badge-clearing logic only runs inside the roomToUnread useEffect. If roomToUnread reached highlightTotal=0 while the app was hidden (background sync from another device), document.visibilityState was not 'visible' so clearAppBadge was skipped. When the user then foregrounds the app roomToUnread hasn't changed so the effect doesn't re-run and the stale badge stays set. Fix: add a visibilitychange listener that clears the badge on foreground whenever highlightTotalRef is 0. A ref tracks the latest value so the listener doesn't need to close over the roomToUnread effect. Also suppress the pre-existing no-console lint warning on the push relay error path with an inline disable comment. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/pages/client/ClientNonUIFeatures.tsx | 26 +++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index ae85b4dbb..4fe43747e 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -107,6 +107,9 @@ function FaviconUpdater() { const [usePushNotifications] = useSetting(settingsAtom, 'usePushNotifications'); const [faviconForMentionsOnly] = useSetting(settingsAtom, 'faviconForMentionsOnly'); const registration = useAtomValue(registrationAtom); + // Track the latest highlight total so the visibilitychange handler can check + // it without needing to be inside the roomToUnread effect. + const highlightTotalRef = useRef(0); useEffect(() => { let notification = false; @@ -126,6 +129,8 @@ function FaviconUpdater() { } }); + highlightTotalRef.current = highlightTotal; + if (highlight) { setFavicon(LogoHighlightSVG); } else if (!faviconForMentionsOnly && notification) { @@ -166,6 +171,25 @@ function FaviconUpdater() { } }, [roomToUnread, usePushNotifications, registration, faviconForMentionsOnly]); + // Clear the badge whenever the app comes to the foreground with no active + // highlights. The main effect above only runs when roomToUnread changes, so + // if highlights reached 0 while the app was backgrounded (e.g. read on + // another device during a background sync), the badge would stay set until + // the next roomToUnread change. This listener closes that gap. + useEffect(() => { + const handleVisibilityChange = () => { + if (document.visibilityState !== 'visible') return; + if (highlightTotalRef.current > 0) return; + try { + navigator.clearAppBadge(); + } catch { + // Badging API not supported β€” ignore + } + }; + document.addEventListener('visibilitychange', handleVisibilityChange); + return () => document.removeEventListener('visibilitychange', handleVisibilityChange); + }, []); + return null; } @@ -821,7 +845,7 @@ function HandleDecryptPushEvent() { // β€” the second message is a no-op once the entry is already resolved. navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(successReply)); } catch (err) { - console.warn('[app] HandleDecryptPushEvent: failed to decrypt push event', err); + console.warn('[app] HandleDecryptPushEvent: failed to decrypt push event', err); // eslint-disable-line no-console pushRelayLog.error( 'notification', 'Push relay decryption failed', From 708a76a9606d463df4ca2155a8d790b4d366fdc0 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Wed, 22 Apr 2026 16:29:05 -0400 Subject: [PATCH 247/253] fix(notifications): restore unread fallback paths for non-DM rooms Two fallback paths in getUnreadInfo were accidentally dropped during a checkpoint commit (2eaefb19d): 1. PushProcessor fallback: when SDK total/highlight are both 0 but roomHaveUnread() confirms there ARE unread events (stale SDK counters), walk the live timeline with PushProcessor to compute real counts. 2. No-receipt sliding sync fallback: rooms that have never been visited in sliding sync have no read receipt, making SDK counts unreliable. If the timeline has activity from other users, return total=1 (or the existing SDK counts when present) so the dot badge appears. These fallbacks are essential for non-DM rooms: DMs benefit from shouldForceDMHighlight which forces highlight=total, but regular rooms rely entirely on these paths when SDK counts are zero or stale. Restores parity with the dev branch. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/utils/room.ts | 50 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts index 615a01f3c..fa6114466 100644 --- a/src/app/utils/room.ts +++ b/src/app/utils/room.ts @@ -12,6 +12,7 @@ import { MatrixClient, MatrixEvent, NotificationCountType, + PushProcessor, RelationType, Room, RoomMember, @@ -331,6 +332,55 @@ export const getUnreadInfo = (room: Room, options?: UnreadInfoOptions): UnreadIn } } + // Fallback: SDK counters are stale/zero but there are receipt-confirmed unread + // messages. Walk the live timeline to compute real counts so the badge number + // and highlight colour reflect actual state rather than a hard-coded stub. + if (total === 0 && highlight === 0 && userId && roomHaveUnread(room.client, room)) { + const readUpToId = room.getEventReadUpTo(userId); + const liveEvents = room.getLiveTimeline().getEvents(); + let fallbackTotal = 0; + let fallbackHighlight = 0; + const pushProcessor = new PushProcessor(room.client); + for (let i = liveEvents.length - 1; i >= 0; i -= 1) { + const event = liveEvents[i]; + if (!event) break; + if (event.getId() === readUpToId) break; + if (isNotificationEvent(event, room, userId) && event.getSender() !== userId) { + fallbackTotal += 1; + const pushActions = pushProcessor.actionsForEvent(event); + if (pushActions?.tweaks?.highlight) fallbackHighlight += 1; + } + } + if (fallbackTotal > 0) { + return { roomId: room.roomId, highlight: fallbackHighlight, total: fallbackTotal }; + } + } + + // Sliding sync limitation: unvisited rooms don't have read receipt data, but may have + // timeline activity. Check for notification events from others in the timeline to show a + // badge even when SDK counts are 0 (or unreliable without receipts). + if (userId) { + const readUpToId = room.getEventReadUpTo(userId); + + // If we have no read receipt, SDK counts may be unreliable. Always check timeline. + if (!readUpToId) { + const liveEvents = room.getLiveTimeline().getEvents(); + + const hasActivity = liveEvents.some( + (event) => event.getSender() !== userId && isNotificationEvent(event, room, userId) + ); + + if (hasActivity) { + // If SDK already has counts, use those. Otherwise show dot badge (count=1). + if (total === 0 && highlight === 0) { + return { roomId: room.roomId, highlight: 0, total: 1 }; + } + // SDK has counts but no receipt - trust the counts and show them + return { roomId: room.roomId, highlight, total }; + } + } + } + // For DMs with Default or AllMessages notification type: if there are unread messages, // ensure we show a notification badge (treat as highlight for badge color purposes). // This handles cases where push rules don't properly match (e.g., classic sync with From 3e373ce96b1a69dfdd9348fd4063474e736d4ceb Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 24 Apr 2026 10:15:50 -0400 Subject: [PATCH 248/253] fix(sw): remove 24h session TTL and guard event.data.json() - Remove the 24h TTL check from loadPersistedSession(). Sessions cached before the persistedAt field was added (age=Infinity) were being incorrectly rejected, causing every push notification to fall back to the generic 'New Message' text until the user opened the app again. Matrix access tokens are long-lived; if a token is truly revoked the downstream 401 handling in handleMinimalPushPayload provides the graceful fallback already. - Wrap event.data.json() in a try/catch with a 'New Message' fallback notification. A malformed push payload previously caused an unhandled rejection in onPushNotification, which could silently drop the push event on iOS. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/sw.ts | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/sw.ts b/src/sw.ts index dfd1af713..59f36ac50 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -97,24 +97,14 @@ async function loadPersistedSession(): Promise { if (response) { const s = await response.json(); - // Reject persisted sessions older than 24 hours. Matrix access tokens are - // long-lived and are only invalidated on explicit logout or device revocation β€” - // not by the passage of time. A short TTL (e.g. 60 s) was too aggressive: it - // caused the SW to show generic "New Message" notifications whenever the app - // was backgrounded for more than a minute, because the cached session was - // rejected and requestSession had no live window client to reach. - // If the token truly is revoked the fetches in handleMinimalPushPayload will - // receive a 401 and gracefully fall back to a generic notification anyway. - const age = typeof s.persistedAt === 'number' ? Date.now() - s.persistedAt : Infinity; - const MAX_SESSION_AGE_MS = 24 * 60 * 60 * 1000; // 24 hours - if (age > MAX_SESSION_AGE_MS) { - console.debug('[SW] loadPersistedSession: session expired', { - age, - accessToken: s.accessToken.slice(0, 8), - }); - return undefined; - } - + // Matrix access tokens are long-lived and are only invalidated on explicit + // logout or device revocation β€” not by the passage of time. If the token truly + // is revoked the fetches in handleMinimalPushPayload will receive a 401 and + // gracefully fall back to a generic notification anyway. We intentionally do + // NOT apply a TTL here: sessions without a persistedAt field (stored before + // that field was added) would get age=Infinity and be incorrectly rejected, + // showing "New Message" for users who hadn't opened the app since the SW + // was last updated. return { accessToken: s.accessToken, baseUrl: s.baseUrl, @@ -976,7 +966,17 @@ const onPushNotification = async (event: PushEvent) => { return; } - const pushData = event.data.json(); + let pushData: any; + try { + pushData = event.data.json(); + } catch (err) { + console.error('[SW push] failed to parse push payload:', err); + await self.registration.showNotification('New Message', { + icon: '/public/res/logo-maskable/cinny-logo-maskable-180x180.png', + badge: '/public/res/logo-maskable/cinny-logo-maskable-72x72.png', + } as NotificationOptions); + return; + } console.debug('[SW push] raw payload:', JSON.stringify(pushData, null, 2)); try { From d570e4b931dd67758c5150a7da0dc625c8d5b0cf Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 24 Apr 2026 10:53:15 -0400 Subject: [PATCH 249/253] fix(sw): require focused+visible to suppress push on iOS On iOS PWA, visibilityState can get stuck at 'visible' after the user opens the app via a notification tap and then backgrounds it again. This caused all subsequent push notifications to be silently suppressed ("first notification works, second and beyond don't"). The fix: require BOTH visibilityState === 'visible' AND client.focused. The focused property transitions to false immediately when the user presses the home button (before visibilitychange fires), so it is the reliable signal that the user is actually looking at the app. Also log focused state in the existing debug output. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/sw.ts | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/sw.ts b/src/sw.ts index 59f36ac50..244ffcbb0 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -942,23 +942,27 @@ const onPushNotification = async (event: PushEvent) => { // If the app is open and visible, skip the OS push notification β€” the in-app // pill notification handles the alert instead. // - // When clients.matchAll() returns β‰₯1 client, trust its visibilityState - // directly. iOS can suspend the JS thread before postMessage({ visible: - // false }) is processed, leaving appIsVisible stuck at true. matchAll() - // still reports the backgrounded client as 'hidden', so it is the - // authoritative and most reliable signal. + // Require BOTH visibilityState === 'visible' AND focused === true. + // On iOS PWA, visibilityState can get stuck at 'visible' after the user opens + // the app via a notification tap and then backgrounds it again β€” the + // visibilitychange event doesn't always fire reliably on iOS. The focused + // property updates immediately when the user presses the home button (the + // window loses OS focus before visibilitychange fires), so it is the + // authoritative signal for "user is actually looking at the app right now". // - // When matchAll() returns zero clients (a separate iOS Safari PWA quirk), - // visibility is unknowable β€” do NOT suppress. Better to show a duplicate - // (handled gracefully by the in-app banner) than to silently drop a - // notification while the app is backgrounded. + // When matchAll() returns zero clients (iOS Safari PWA quirk where the app + // is fully suspended), visibility is unknowable β€” do NOT suppress. Better + // to show a duplicate (handled gracefully by the in-app banner) than to + // silently drop a notification while the app is backgrounded. const hasVisibleClient = - clients.length > 0 ? clients.some((client) => client.visibilityState === 'visible') : false; + clients.length > 0 + ? clients.some((client) => client.visibilityState === 'visible' && client.focused) + : false; console.debug( '[SW push] appIsVisible:', appIsVisible, '| clients:', - clients.map((c) => ({ url: c.url, visibility: c.visibilityState })) + clients.map((c) => ({ url: c.url, visibility: c.visibilityState, focused: c.focused })) ); console.debug('[SW push] hasVisibleClient:', hasVisibleClient); if (hasVisibleClient) { From b2b043cad23b99f30f3b34219f0e296b0950f2cb Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 24 Apr 2026 11:38:27 -0400 Subject: [PATCH 250/253] fix(timeline): restore visible timeline when loadEventTimeline fails When a user opens a room via notification tap and loadEventTimeline encounters an error (e.g. network not yet ready after iOS app resume), the onError handler resets to the live timeline but never called setIsReady(true). This left the timeline permanently invisible (opacity: 0), producing a blank white screen. Add onJumpError callback to UseTimelineSyncOptions. RoomTimeline passes handleJumpError which calls setIsReady(true). The error handler in useTimelineSync now calls onJumpError() after restoring the live timeline and scrolling to bottom, so the room becomes visible. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/features/room/RoomTimeline.tsx | 3 +++ src/app/hooks/timeline/useTimelineSync.ts | 6 +++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 853eaabab..80c7ba883 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -266,6 +266,8 @@ export function RoomTimeline({ vListRef.current.scrollTo(vListRef.current.scrollSize); }, [setAtBottom]); + const handleJumpError = useCallback(() => setIsReady(true), []); + const timelineSync = useTimelineSync({ room, mx, @@ -273,6 +275,7 @@ export function RoomTimeline({ isAtBottom: atBottomState, isAtBottomRef: atBottomRef, scrollToBottom, + onJumpError: handleJumpError, unreadInfo, setUnreadInfo, hideReadsRef, diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts index 4313e82ad..a9e82530b 100644 --- a/src/app/hooks/timeline/useTimelineSync.ts +++ b/src/app/hooks/timeline/useTimelineSync.ts @@ -352,6 +352,8 @@ export interface UseTimelineSyncOptions { isAtBottom: boolean; isAtBottomRef: React.MutableRefObject; scrollToBottom: (behavior?: 'instant' | 'smooth') => void; + /** Called when a loadEventTimeline jump fails so the caller can reveal the live timeline. */ + onJumpError?: () => void; unreadInfo: ReturnType; setUnreadInfo: Dispatch>>; hideReadsRef: React.MutableRefObject; @@ -365,6 +367,7 @@ export function useTimelineSync({ isAtBottom, isAtBottomRef, scrollToBottom, + onJumpError, unreadInfo, setUnreadInfo, hideReadsRef, @@ -461,7 +464,8 @@ export function useTimelineSync({ if (!alive()) return; setTimeline({ linkedTimelines: getInitialTimeline(room).linkedTimelines }); scrollToBottom('instant'); - }, [alive, room, scrollToBottom]) + onJumpError?.(); + }, [alive, room, scrollToBottom, onJumpError]) ); const lastScrolledAtEventsLengthRef = useRef(eventsLength); From 65b45ba3f24d57cabb0c81e1eb8157f350dd2628 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Fri, 24 Apr 2026 14:04:17 -0400 Subject: [PATCH 251/253] fix(SyncStatus): only show Connecting... on reconnect, not initial load MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit After iOS kills a backgrounded PWA and the app cold-starts, SyncStatus was showing a Connecting... banner for up to 20 seconds after the loading screen disappeared. This is because the banner fired on any transition where previous !== SyncState.Syncing, including the initial nullβ†’PREPAREDβ†’SYNCING cold-start sequence. With sliding sync the second long-poll can take up to 20 s (the poll timeout) when there are no new messages, keeping the banner visible the entire time even though the app is fully loaded and usable. Fix: only show Connecting... when recovering from an actual disconnect (previous === Reconnecting or previous === Error). The loading screen already covers the initial connection; the banner is only meaningful when we are re-connecting after a network disruption. State transitions: - null β†’ PREPARED: no banner (loading screen handles it) βœ“ - RECONNECTING β†’ PREPARED/SYNCING: shows banner βœ“ - ERROR β†’ PREPARED/SYNCING: shows banner βœ“ - SYNCING β†’ SYNCING: no banner βœ“ Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/pages/client/SyncStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/client/SyncStatus.tsx b/src/app/pages/client/SyncStatus.tsx index f55fe5e59..f2deeb2ec 100644 --- a/src/app/pages/client/SyncStatus.tsx +++ b/src/app/pages/client/SyncStatus.tsx @@ -47,7 +47,7 @@ export function SyncStatus({ mx }: SyncStatusProps) { (stateData.current === SyncState.Prepared || stateData.current === SyncState.Syncing || stateData.current === SyncState.Catchup) && - stateData.previous !== SyncState.Syncing + (stateData.previous === SyncState.Reconnecting || stateData.previous === SyncState.Error) ) { return ( From 9199a8736824fd173056801716e0e35d8831bfed Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 26 Apr 2026 11:02:11 -0400 Subject: [PATCH 252/253] fix(sw): guard decrypt-relay suppression with appFocused check The SW has two paths where it suppresses OS notifications when the app appears visible: 1. hasVisibleClient (already fixed): requires both visibilityState === 'visible' AND client.focused from clients.matchAll(). 2. Decrypt relay result (this commit): after requestDecryptionFromClient(), the code checked only result?.visibilityState === 'visible' to decide whether the in-app UI was already showing the message. On iOS PWA, document.visibilityState can get stuck at 'visible' after the user backgrounds the app because visibilitychange doesn't always fire. document.hasFocus() is updated by the browser process immediately when the OS removes window focus (home button press), so it is the reliable signal. Add appFocused: document.hasFocus() to both pushDecryptResult reply payloads in ClientNonUIFeatures.tsx. In sw.ts, require BOTH visibilityState === 'visible' AND appFocused === true before skipping the OS notification, mirroring the same dual-guard logic in hasVisibleClient. This closes the second suppression path that was silently dropping background push notifications on iOS after the user had previously opened the app from a notification tap. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/pages/client/ClientNonUIFeatures.tsx | 2 ++ src/sw.ts | 18 +++++++++++++++--- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index 4fe43747e..e25ff531f 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -836,6 +836,7 @@ function HandleDecryptPushEvent() { sender_display_name: senderName, room_name: room?.name ?? '', visibilityState: document.visibilityState, + appFocused: document.hasFocus(), }; navigator.serviceWorker.controller?.postMessage(successReply); // Belt-and-suspenders: also post via registration.active so the reply @@ -856,6 +857,7 @@ function HandleDecryptPushEvent() { eventId, success: false, visibilityState: document.visibilityState, + appFocused: document.hasFocus(), }; navigator.serviceWorker.controller?.postMessage(errorReply); navigator.serviceWorker.ready.then((reg) => reg.active?.postMessage(errorReply)); diff --git a/src/sw.ts b/src/sw.ts index 244ffcbb0..abb17692e 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -239,6 +239,14 @@ type DecryptionResult = { room_name?: string; /** document.visibilityState reported by the responding app tab. */ visibilityState?: string; + /** + * document.hasFocus() reported by the responding app tab. + * Unlike visibilityState, this is updated by the browser process immediately + * when the OS removes focus (e.g. home button on iOS) and does not get stuck + * at true after backgrounding. Used alongside visibilityState so that both + * must be true before suppressing the OS notification. + */ + appFocused?: boolean; }; /** Pending decryption requests keyed by event_id. */ @@ -509,9 +517,13 @@ async function handleMinimalPushPayload( ? await requestDecryptionFromClient(windowClients, rawEvent) : undefined; - // If the relay responded and the app is currently visible, the in-app UI is already - // displaying the message β€” skip the OS notification entirely. - if (result?.visibilityState === 'visible') return; + // If the relay responded and the app is currently visible AND focused, the + // in-app UI is already displaying the message β€” skip the OS notification. + // Require BOTH visibilityState === 'visible' AND appFocused === true here, + // mirroring the hasVisibleClient check above. document.visibilityState can + // get stuck at 'visible' on iOS PWA after backgrounding; document.hasFocus() + // (reported as appFocused) updates reliably when the OS removes focus. + if (result?.visibilityState === 'visible' && result?.appFocused === true) return; if (result?.success) { // App was backgrounded but not frozen β€” decryption succeeded. From d82f8e482b5e1430d2344b72b975d9a587d19515 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 26 Apr 2026 11:55:55 -0400 Subject: [PATCH 253/253] revert(SyncStatus): restore upstream connecting banner condition The previous change narrowed the 'Connecting...' banner to only show on reconnect/error. Reverting to upstream's condition: stateData.previous !== SyncState.Syncing Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/pages/client/SyncStatus.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/pages/client/SyncStatus.tsx b/src/app/pages/client/SyncStatus.tsx index f2deeb2ec..ae222b4f7 100644 --- a/src/app/pages/client/SyncStatus.tsx +++ b/src/app/pages/client/SyncStatus.tsx @@ -1,4 +1,5 @@ -import { MatrixClient, SyncState } from '$types/matrix-sdk'; +import type { MatrixClient } from '$types/matrix-sdk'; +import { SyncState } from '$types/matrix-sdk'; import { useCallback, useState } from 'react'; import { Box, config, Line, Text } from 'folds'; import * as Sentry from '@sentry/react'; @@ -47,7 +48,7 @@ export function SyncStatus({ mx }: SyncStatusProps) { (stateData.current === SyncState.Prepared || stateData.current === SyncState.Syncing || stateData.current === SyncState.Catchup) && - (stateData.previous === SyncState.Reconnecting || stateData.previous === SyncState.Error) + stateData.previous !== SyncState.Syncing ) { return (