Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/playwright-tenbin

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

# Conflicts:
#	.github/workflows/end-to-end-tests.yaml
#	package.json
#	playwright/e2e/crypto/backups-mas.spec.ts
#	playwright/e2e/csAPI.ts
#	playwright/e2e/login/utils.ts
#	playwright/e2e/right-panel/right-panel.spec.ts
#	playwright/e2e/spotlight/spotlight.spec.ts
#	playwright/element-web-test.ts
#	playwright/pages/client.ts
#	playwright/plugins/homeserver/index.ts
#	playwright/plugins/homeserver/synapse/legacyOAuthHomeserver.ts
#	playwright/plugins/oauth_server/index.ts
#	playwright/services.ts
#	playwright/testcontainers/HomeserverContainer.ts
#	playwright/testcontainers/dendrite.ts
#	playwright/testcontainers/mas.ts
#	playwright/testcontainers/synapse.ts
#	playwright/testcontainers/utils.ts
#	yarn.lock

.github/actions/download-verify-element-tarball/action.yml

@@ -11,7 +11,7 @@ runs:
     using: composite
     steps:
         - name: Download release tarball
-          uses: robinraju/release-downloader@daf26c55d821e836577a15f77d86ddc078948b05 # v1
+          uses: robinraju/release-downloader@a96f54c1b5f5e09e47d9504526e96febd949d4c2 # v1
           with:
               tag: ${{ inputs.tag }}
               fileName: element-*.tar.gz*

.github/workflows/build_develop.yml

@@ -26,6 +26,12 @@ jobs:
             R2_URL: ${{ vars.CF_R2_S3_API }}
             R2_PUBLIC_URL: "https://element-web-develop.element.io"
         steps:
+            # Workaround for https://www.cloudflarestatus.com/incidents/t5nrjmpxc1cj
+            - uses: unfor19/install-aws-cli-action@v1
+              with:
+                  version: 2.22.35
+                  verbose: false
+                  arch: amd64
             - uses: actions/checkout@v4
 
             - uses: actions/setup-node@v4
@@ -109,11 +115,10 @@ jobs:
             # We keep the latest develop.tar.gz on R2 instead of relying on the github artifact uploaded earlier
             # as the expires after 24h and requires auth to download.
             # Element Desktop's fetch script uses this tarball to fetch latest develop to build Nightlies.
-            # Checksum algorithm specified as per https://developers.cloudflare.com/r2/examples/aws/aws-cli/
             - name: Deploy to R2
               run: |
-                  aws s3 cp dist/develop.tar.gz s3://$R2_BUCKET/develop.tar.gz --endpoint-url $R2_URL --region=auto --checksum-algorithm CRC32
-                  aws s3 cp _deploy/ s3://$R2_BUCKET/ --recursive --endpoint-url $R2_URL --region=auto --checksum-algorithm CRC32
+                  aws s3 cp dist/develop.tar.gz s3://$R2_BUCKET/develop.tar.gz --endpoint-url $R2_URL --region=auto
+                  aws s3 cp _deploy/ s3://$R2_BUCKET/ --recursive --endpoint-url $R2_URL --region=auto
               env:
                   AWS_ACCESS_KEY_ID: ${{ secrets.CF_R2_ACCESS_KEY_ID }}
                   AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_R2_TOKEN }}

.github/workflows/docker.yaml

@@ -37,14 +37,14 @@ jobs:
                   install: true
 
             - name: Login to Docker Hub
-              uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3
+              uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
               if: github.event_name != 'pull_request'
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
 
             - name: Login to GitHub Container Registry
-              uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3
+              uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
               if: github.event_name != 'pull_request'
               with:
                   registry: ghcr.io
@@ -132,7 +132,7 @@ jobs:
                   cosign sign --yes ${images}
 
             - name: Update repo description
-              uses: peter-evans/dockerhub-description@432a30c9e07499fd01da9f8a49f0faf9e0ca5b77 # v4
+              uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
               if: github.event_name != 'pull_request'
               continue-on-error: true
               with:

.github/workflows/end-to-end-tests.yaml

@@ -54,6 +54,17 @@ jobs:
               with:
                   repository: element-hq/element-web
 
+            # Restore playwright-results.json file, which records the execution time of each test file.
+            # The splitTests function uses this file for sharding.
+            # We do this in the build stage to ensure it remains consistent if a playwright test got manually restarted
+            - name: Restore playwright-results.json
+              uses: actions/cache/restore@v4
+              with:
+                  path: playwright-results.json
+                  key: playwright-results
+                  restore-keys: |
+                      playwright-results-*
+
             - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
@@ -77,15 +88,17 @@ jobs:
               env:
                   CI_PACKAGE: true
                   VERSION: "${{ steps.layered_build.outputs.VERSION }}"
-              run: |
-                  yarn build
+              run: yarn build
 
             - name: Upload Artifact
               uses: actions/upload-artifact@v4
               with:
-                  name: webapp
-                  path: webapp
+                  name: build
+                  path: |
+                      webapp
+                      playwright-results.json
                   retention-days: 1
+                  if-no-files-found: error
 
             - name: Calculate runner variables
               id: runner-vars
@@ -128,6 +141,8 @@ jobs:
                       project: Dendrite
                     - runAllTests: false
                       project: Pinecone
+        env:
+            SHARD_BLOB_NAME: blob-report-${{ matrix.project }}-${{ matrix.runner }}
         steps:
             - uses: actions/checkout@v4
               with:
@@ -137,8 +152,7 @@ jobs:
             - name: 📥 Download artifact
               uses: actions/download-artifact@v4
               with:
-                  name: webapp
-                  path: webapp
+                  name: build
 
             - uses: actions/setup-node@v4
               with:
@@ -174,63 +188,77 @@ jobs:
             - name: Run Playwright tests
               run: |
                   yarn playwright test \
-                      --shard "${{ matrix.runner }}/${{ needs.build.outputs.num-runners }}" \
                       --project="${{ matrix.project }}" \
                       ${{ (github.event_name == 'pull_request' && matrix.runAllTests == false ) && '--grep-invert @mergequeue' || '' }}
+              env:
+                  SHARD: "${{ matrix.runner }}/${{ needs.build.outputs.num-runners }}"
+                  PLAYWRIGHT_BLOB_OUTPUT_FILE: ${{ env.SHARD_BLOB_NAME }}.zip
 
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()
               uses: actions/upload-artifact@v4
               with:
-                  name: all-blob-reports-${{ matrix.project }}-${{ matrix.runner }}
-                  path: blob-report
+                  name: ${{ env.SHARD_BLOB_NAME }}
+                  path: ${{ env.SHARD_BLOB_NAME }}.zip
                   retention-days: 1
+                  if-no-files-found: error
 
-    complete:
-        name: end-to-end-tests
+    report:
+        name: Report results
         needs: playwright
-        if: always()
+        if: ${{ !cancelled() && inputs.skip != true }}
         runs-on: ubuntu-24.04
         steps:
             - uses: actions/checkout@v4
-              if: inputs.skip != true
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
             - uses: actions/setup-node@v4
-              if: inputs.skip != true
               with:
                   cache: "yarn"
                   node-version: "lts/*"
 
             - name: Install dependencies
-              if: inputs.skip != true
               run: yarn install --frozen-lockfile
 
             - name: Download blob reports from GitHub Actions Artifacts
-              if: inputs.skip != true
               uses: actions/download-artifact@v4
               with:
-                  pattern: all-blob-reports-*
+                  pattern: blob-report-*
                   path: all-blob-reports
                   merge-multiple: true
 
             - name: Merge into HTML Report
-              if: inputs.skip != true
-              run: yarn playwright merge-reports --reporter=html,./playwright/flaky-reporter.ts,./playwright/stale-screenshot-reporter.ts ./all-blob-reports
+              run: yarn playwright merge-reports --reporter=html,json,./playwright/flaky-reporter.ts,./playwright/stale-screenshot-reporter.ts ./all-blob-reports
               env:
                   # Only pass creds to the flaky-reporter on main branch runs
                   GITHUB_TOKEN: ${{ github.ref_name == 'develop' && secrets.ELEMENT_BOT_TOKEN || '' }}
+                  PLAYWRIGHT_JSON_OUTPUT_NAME: playwright-results.json
+
+            - name: Cache playwright-results.json
+              uses: actions/cache/save@v4
+              with:
+                  path: playwright-results.json
+                  key: playwright-results-${{ github.run_id }}
 
             # Upload the HTML report even if one of our reporters fails, this can happen when stale screenshots are detected
             - name: Upload HTML report
-              if: always() && inputs.skip != true
+              if: always()
               uses: actions/upload-artifact@v4
               with:
                   name: html-report
                   path: playwright-report
                   retention-days: 14
+                  if-no-files-found: error
 
-            - if: needs.playwright.result != 'skipped' && needs.playwright.result != 'success'
+    complete:
+        name: end-to-end-tests
+        needs:
+            - playwright
+            - report
+        if: ${{ !cancelled() }}
+        runs-on: ubuntu-24.04
+        steps:
+            - if: needs.playwright.result == 'failure' || needs.report.result == 'failure'
               run: exit 1

.github/workflows/release_prepare.yml

@@ -100,7 +100,7 @@ jobs:
                   repo: matrix-org/matrix-js-sdk
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: "draft / draft"
+                  check-name: draft
                   allowed-conclusions: success
 
             - name: Wait for element-web draft
@@ -111,7 +111,7 @@ jobs:
                   repo: element-hq/element-web
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: "draft / draft"
+                  check-name: draft
                   allowed-conclusions: success
 
             - name: Wait for element-desktop draft
@@ -122,5 +122,5 @@ jobs:
                   repo: element-hq/element-desktop
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: "draft / draft"
+                  check-name: draft
                   allowed-conclusions: success

.github/workflows/static_analysis.yaml

@@ -51,7 +51,6 @@ jobs:
                 error|invalid_json
                 error|misconfigured
                 welcome_to_element
-                devtools|settings|elementCallUrl
 
     rethemendex_lint:
         name: "Rethemendex Check"

.github/workflows/tests.yml

@@ -64,6 +64,16 @@ jobs:
               id: cpu-cores
               uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2
 
+            # Restore tenbin-report.json file, which records the execution time of each test file.
+            # @tenbin/jest/sequencer uses this file for sharding.
+            - name: Restore tenbin-report.json
+              uses: actions/cache/restore@v4
+              with:
+                  path: tenbin-report.json
+                  key: tenbin-report
+                  restore-keys: |
+                      tenbin-report-*
+
             - name: Run tests
               run: |
                   yarn test \
@@ -78,6 +88,13 @@ jobs:
                   # tell jest to use coloured output
                   FORCE_COLOR: true
 
+            # @tenbin/jest/reporter generates tenbin-report.json for each shard.
+            - name: Upload tenbin-report.json
+              uses: actions/upload-artifact@v4
+              with:
+                  name: tenbin-report-${{ matrix.runner }}
+                  path: tenbin-report.json
+
             - name: Move coverage files into place
               if: env.ENABLE_COVERAGE == 'true'
               run: mv coverage/lcov.info coverage/${{ steps.setupNode.outputs.node-version }}-${{ matrix.runner }}.lcov.info
@@ -104,7 +121,7 @@ jobs:
 
             - name: Skip SonarCloud in merge queue
               if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@5f2b01ce1394109f70954ae6b69ef41cf7928e63
+              uses: guibranco/github-status-action-v2@5ef6e175c333bc629f3718b083c8a2ff6e0bbfbc
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success
@@ -112,3 +129,16 @@ jobs:
                   context: SonarCloud Code Analysis
                   sha: ${{ github.sha }}
                   target_url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+
+            # Download, merge & upload tenbin-report.json
+            - uses: actions/download-artifact@v4
+              with:
+                  path: tenbin-report
+                  pattern: tenbin-report-*
+            - name: Merge  tenbin-report
+              run: jq -s add tenbin-report/**/tenbin-report.json > tenbin-report.json
+            - name: Cache tenbin-report.json
+              uses: actions/cache/save@v4
+              with:
+                  path: tenbin-report.json
+                  key: tenbin-report-${{ github.run_id }}

.github/workflows/triage-assigned.yml

@@ -11,8 +11,7 @@ jobs:
         runs-on: ubuntu-24.04
         if: |
             contains(github.event.issue.assignees.*.login, 't3chguy') ||
-            contains(github.event.issue.assignees.*.login, 'florianduros') ||
-            contains(github.event.issue.assignees.*.login, 'dbkr') ||
+            contains(github.event.issue.assignees.*.login, 'andybalaam') ||
             contains(github.event.issue.assignees.*.login, 'MidhunSureshR')
         steps:
             - uses: actions/add-to-project@main

CHANGELOG.md

@@ -1,81 +1,3 @@
-Changes in [1.11.97](https://github.com/element-hq/element-web/releases/tag/v1.11.97) (2025-04-08)
-==================================================================================================
-## ✨ Features
-
-* New room list: reduce padding between avatar and room list border ([#29634](https://github.com/element-hq/element-web/pull/29634)). Contributed by @florianduros.
-* Bundle Element Call with Element Web packages ([#29309](https://github.com/element-hq/element-web/pull/29309)). Contributed by @t3chguy.
-* Hide an event notification if it is redacted ([#29605](https://github.com/element-hq/element-web/pull/29605)). Contributed by @Half-Shot.
-* Docker: Use nginx-unprivileged as base image ([#29353](https://github.com/element-hq/element-web/pull/29353)). Contributed by @AndrewFerr.
-* Switch away from nesting React trees and mangling the DOM ([#29586](https://github.com/element-hq/element-web/pull/29586)). Contributed by @t3chguy.
-* New room list: add notification decoration ([#29552](https://github.com/element-hq/element-web/pull/29552)). Contributed by @florianduros.
-* RoomListStore: Unread filter should match rooms that were marked as unread ([#29580](https://github.com/element-hq/element-web/pull/29580)). Contributed by @MidhunSureshR.
-* Add support for hiding videos ([#29496](https://github.com/element-hq/element-web/pull/29496)). Contributed by @Half-Shot.
-* Use an outline icon for the report room button ([#29573](https://github.com/element-hq/element-web/pull/29573)). Contributed by @robintown.
-* Generate/load pickle key on SSO ([#29568](https://github.com/element-hq/element-web/pull/29568)). Contributed by @Jujure.
-* Add report room dialog button/dialog. ([#29513](https://github.com/element-hq/element-web/pull/29513)). Contributed by @Half-Shot.
-* RoomListViewModel: Make the active room sticky in the list ([#29551](https://github.com/element-hq/element-web/pull/29551)). Contributed by @MidhunSureshR.
-* Replace checkboxes with Compound checkboxes, and appropriately label each checkbox. ([#29363](https://github.com/element-hq/element-web/pull/29363)). Contributed by @Half-Shot.
-* New room list: add selection decoration ([#29531](https://github.com/element-hq/element-web/pull/29531)). Contributed by @florianduros.
-* Simplified Sliding Sync ([#28515](https://github.com/element-hq/element-web/pull/28515)). Contributed by @dbkr.
-* Add ability to hide images after clicking "show image" ([#29467](https://github.com/element-hq/element-web/pull/29467)). Contributed by @Half-Shot.
-
-## 🐛 Bug Fixes
-
-* Fix scroll issues in memberlist ([#29392](https://github.com/element-hq/element-web/pull/29392)). Contributed by @MidhunSureshR.
-* Ensure clicks on spoilers do not get handled by the hidden content ([#29618](https://github.com/element-hq/element-web/pull/29618)). Contributed by @t3chguy.
-* New room list: add cursor pointer on room list item ([#29627](https://github.com/element-hq/element-web/pull/29627)). Contributed by @florianduros.
-* Fix missing ambiguous url tooltips on Element Desktop ([#29619](https://github.com/element-hq/element-web/pull/29619)). Contributed by @t3chguy.
-* New room list: fix spacing and padding ([#29607](https://github.com/element-hq/element-web/pull/29607)). Contributed by @florianduros.
-* Make fetchdep check out matching branch name ([#29601](https://github.com/element-hq/element-web/pull/29601)). Contributed by @dbkr.
-* Fix MFileBody fileName not considering `filename` ([#29589](https://github.com/element-hq/element-web/pull/29589)). Contributed by @t3chguy.
-* Fix token expiry racing with login causing wrong error to be shown ([#29566](https://github.com/element-hq/element-web/pull/29566)). Contributed by @t3chguy.
-* Fix bug which caused startup to hang if the clock was wound back since a previous session ([#29558](https://github.com/element-hq/element-web/pull/29558)). Contributed by @richvdh.
-* RoomListViewModel: Reset any primary filter on secondary filter change ([#29562](https://github.com/element-hq/element-web/pull/29562)). Contributed by @MidhunSureshR.
-* RoomListStore: Unread filter should only filter rooms having unread counts ([#29555](https://github.com/element-hq/element-web/pull/29555)). Contributed by @MidhunSureshR.
-* In force-verify mode, prevent bypassing by cancelling device verification ([#29487](https://github.com/element-hq/element-web/pull/29487)). Contributed by @andybalaam.
-* Add title attribute to user identifier ([#29547](https://github.com/element-hq/element-web/pull/29547)). Contributed by @arpitbatra123.
-
-
-Changes in [1.11.96](https://github.com/element-hq/element-web/releases/tag/v1.11.96) (2025-03-25)
-==================================================================================================
-## ✨ Features
-
-* RoomListViewModel: Track the index of the active room in the list ([#29519](https://github.com/element-hq/element-web/pull/29519)). Contributed by @MidhunSureshR.
-* New room list: add empty state ([#29512](https://github.com/element-hq/element-web/pull/29512)). Contributed by @florianduros.
-* Implement `MessagePreviewViewModel` ([#29514](https://github.com/element-hq/element-web/pull/29514)). Contributed by @MidhunSureshR.
-* RoomListViewModel: Add functionality to toggle message preview setting ([#29511](https://github.com/element-hq/element-web/pull/29511)). Contributed by @MidhunSureshR.
-* New room list: add more options menu on room list item ([#29445](https://github.com/element-hq/element-web/pull/29445)). Contributed by @florianduros.
-* RoomListViewModel: Provide a way to resort the room list and track the active sort method ([#29499](https://github.com/element-hq/element-web/pull/29499)). Contributed by @MidhunSureshR.
-* Change \*All rooms\* meta space name to \*All Chats\* ([#29498](https://github.com/element-hq/element-web/pull/29498)). Contributed by @florianduros.
-* Add setting to hide avatars of rooms you have been invited to. ([#29497](https://github.com/element-hq/element-web/pull/29497)). Contributed by @Half-Shot.
-* Room List Store: Save preferred sorting algorithm and use that on app launch ([#29493](https://github.com/element-hq/element-web/pull/29493)). Contributed by @MidhunSureshR.
-* Add key storage toggle to Encryption settings ([#29310](https://github.com/element-hq/element-web/pull/29310)). Contributed by @dbkr.
-* New room list: add primary filters ([#29481](https://github.com/element-hq/element-web/pull/29481)). Contributed by @florianduros.
-* Implement MSC4142: Remove unintentional intentional mentions in replies ([#28209](https://github.com/element-hq/element-web/pull/28209)). Contributed by @tulir.
-* White background for 'They do not match' button ([#29470](https://github.com/element-hq/element-web/pull/29470)). Contributed by @andybalaam.
-* RoomListViewModel: Support secondary filters in the view model ([#29465](https://github.com/element-hq/element-web/pull/29465)). Contributed by @MidhunSureshR.
-* RoomListViewModel: Support primary filters in the view model ([#29454](https://github.com/element-hq/element-web/pull/29454)). Contributed by @MidhunSureshR.
-* Room List Store: Implement secondary filters ([#29458](https://github.com/element-hq/element-web/pull/29458)). Contributed by @MidhunSureshR.
-* Room List Store: Implement rest of the primary filters ([#29444](https://github.com/element-hq/element-web/pull/29444)). Contributed by @MidhunSureshR.
-* Room List Store: Support filters by implementing just the favourite filter ([#29433](https://github.com/element-hq/element-web/pull/29433)). Contributed by @MidhunSureshR.
-* Move toggle switch for integration manager for a11y ([#29436](https://github.com/element-hq/element-web/pull/29436)). Contributed by @Half-Shot.
-* New room list: basic flat list ([#29368](https://github.com/element-hq/element-web/pull/29368)). Contributed by @florianduros.
-* Improve rageshake upload experience by providing useful error information ([#29378](https://github.com/element-hq/element-web/pull/29378)). Contributed by @Half-Shot.
-* Add more functionality to the room list vm ([#29402](https://github.com/element-hq/element-web/pull/29402)). Contributed by @MidhunSureshR.
-
-## 🐛 Bug Fixes
-
-* New room list: fix compose menu action in space  ([#29500](https://github.com/element-hq/element-web/pull/29500)). Contributed by @florianduros.
-* Change ToggleHiddenEventVisibility \& GoToHome KeyBindingActions ([#29374](https://github.com/element-hq/element-web/pull/29374)). Contributed by @gy-mate.
-* Fix Docker Healthcheck ([#29471](https://github.com/element-hq/element-web/pull/29471)). Contributed by @benbz.
-* Room List Store: Fetch rooms after space store is ready + attach store to window ([#29453](https://github.com/element-hq/element-web/pull/29453)). Contributed by @MidhunSureshR.
-* Room List Store: Fix bug where left rooms appear in room list ([#29452](https://github.com/element-hq/element-web/pull/29452)). Contributed by @MidhunSureshR.
-* Add space to the bottom of the room summary actions below leave room ([#29270](https://github.com/element-hq/element-web/pull/29270)). Contributed by @langleyd.
-* Show error screens in group calls ([#29254](https://github.com/element-hq/element-web/pull/29254)). Contributed by @robintown.
-* Prevent user from accidentally triggering multiple identity resets ([#29388](https://github.com/element-hq/element-web/pull/29388)). Contributed by @uhoreg.
-* Remove buggy tooltip on room intro \& homepage ([#29406](https://github.com/element-hq/element-web/pull/29406)). Contributed by @t3chguy.
-
-
 Changes in [1.11.95](https://github.com/element-hq/element-web/releases/tag/v1.11.95) (2025-03-11)
 ==================================================================================================
 ## ✨ Features

Dockerfile

@@ -1,4 +1,4 @@
-# syntax=docker.io/docker/dockerfile:1.15-labs
+# syntax=docker.io/docker/dockerfile:1.14-labs
 
 # Builder
 FROM --platform=$BUILDPLATFORM node:22-bullseye AS builder
@@ -19,10 +19,7 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json
 
 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim
-
-# Need root user to install packages & manipulate the usr directory
-USER root
+FROM nginx:alpine-slim
 
 # Install jq and moreutils for sponge, both used by our entrypoints
 RUN apk add jq moreutils
@@ -34,6 +31,13 @@ COPY --from=builder /src/webapp /app
 COPY /docker/nginx-templates/* /etc/nginx/templates/
 COPY /docker/docker-entrypoint.d/* /docker-entrypoint.d/
 
+# Tell nginx to put its pidfile elsewhere, so it can run as non-root
+RUN sed -i -e 's,/var/run/nginx.pid,/tmp/nginx.pid,' /etc/nginx/nginx.conf
+
+# nginx user must own the cache and etc directory to write cache and tweak the nginx config
+RUN chown -R nginx:0 /var/cache/nginx /etc/nginx
+RUN chmod -R g+w /var/cache/nginx /etc/nginx
+
 RUN rm -rf /usr/share/nginx/html \
   && ln -s /app /usr/share/nginx/html
 

contribute.json

@@ -0,0 +1,13 @@
+{
+    "name": "Element",
+    "description": "A glossy Matrix collaboration client for the web.",
+    "repository": {
+        "url": "https://github.com/element-hq/element-web",
+        "license": "AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial"
+    },
+    "bugs": {
+        "list": "https://github.com/element-hq/element-web/issues",
+        "report": "https://github.com/element-hq/element-web/issues/new/choose"
+    },
+    "keywords": ["chat", "riot", "matrix"]
+}

docs/SUMMARY.md

@@ -46,6 +46,7 @@
 - [Skinning](skinning.md)
 - [Cider editor](ciderEditor.md)
 - [Iconography](icons.md)
+- [Jitsi](jitsi.md)
 - [Local echo](local-echo-dev.md)
 - [Media](media-handling.md)
 - [Room List Store](room-list-store.md)

docs/config.md

@@ -384,6 +384,8 @@ The VoIP and Jitsi options are:
 5. `audio_stream_url`: Optional URL to pass to Jitsi to enable live streaming. This option is considered experimental and may be removed
    at any time without notice.
 6. `element_call`: Optional configuration for native group calls using Element Call, with the following subkeys:
+    - `url`: The URL of the Element Call instance to use for native group calls. This option is considered experimental
+      and may be removed at any time without notice. Defaults to `https://call.element.io`.
     - `use_exclusively`: A boolean specifying whether Element Call should be used exclusively as the only VoIP stack in
       the app, removing the ability to start legacy 1:1 calls or Jitsi calls. Defaults to `false`.
     - `participant_limit`: The maximum number of users who can join a call; if

jest.config.ts

@@ -54,11 +54,12 @@ const config: Config = {
     testResultsProcessor: "@casualbot/jest-sonar-reporter",
     prettierPath: null,
     moduleDirectories: ["node_modules", "test/test-utils"],
+    testSequencer: "@tenbin/jest/sequencer",
 };
 
 // if we're running under GHA, enable the GHA reporter
 if (env["GITHUB_ACTIONS"] !== undefined) {
-    const reporters: Config["reporters"] = [["github-actions", { silent: false }], "summary"];
+    const reporters: Config["reporters"] = [["github-actions", { silent: false }], "summary", "@tenbin/jest/reporter"];
 
     // if we're running against the develop branch, also enable the slow test reporter
     if (env["GITHUB_REF"] == "refs/heads/develop") {

knip.ts

@@ -40,8 +40,6 @@ export default {
         // Used by webpack
         "process",
         "util",
-        // Embedded into webapp
-        "@element-hq/element-call-embedded",
     ],
     ignoreBinaries: [
         // Used in scripts & workflows

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.97",
+    "version": "1.11.95",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -22,7 +22,8 @@
         "LICENSE",
         "README.md",
         "AUTHORS.rst",
-        "package.json"
+        "package.json",
+        "contribute.json"
     ],
     "style": "bundle.css",
     "matrix_i18n_extra_translation_funcs": [
@@ -64,18 +65,16 @@
         "test:playwright:screenshots": "playwright-screenshots --project=Chrome",
         "coverage": "yarn test --coverage",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
-        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
-        "postinstall": "patch-package"
+        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.1.0",
-        "@playwright/test": "1.51.1",
-        "@types/react": "19.1.1",
-        "@types/react-dom": "19.1.2",
-        "oidc-client-ts": "3.2.0",
+        "@playwright/test": "1.50.1",
+        "@types/react": "18.3.18",
+        "@types/react-dom": "18.3.5",
+        "oidc-client-ts": "3.1.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001714",
-        "testcontainers": "10.24.2",
+        "caniuse-lite": "1.0.30001701",
+        "testcontainers": "10.20.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
@@ -93,8 +92,8 @@
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^4.0.0",
-        "@vector-im/compound-web": "^7.10.1",
-        "@vector-im/matrix-wysiwyg": "2.38.3",
+        "@vector-im/compound-web": "^7.7.2",
+        "@vector-im/matrix-wysiwyg": "2.38.2",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -108,7 +107,6 @@
         "css-tree": "^3.0.0",
         "diff-dom": "^5.0.0",
         "diff-match-patch": "^1.0.5",
-        "domutils": "^3.2.2",
         "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
@@ -117,12 +115,12 @@
         "glob-to-regexp": "^0.4.1",
         "highlight.js": "^11.3.1",
         "html-entities": "^2.0.0",
-        "html-react-parser": "^5.2.2",
         "is-ip": "^3.1.0",
         "js-xxhash": "^4.0.0",
         "jsrsasign": "^11.0.0",
         "jszip": "^3.7.0",
         "katex": "^0.16.0",
+        "linkify-element": "4.2.0",
         "linkify-react": "4.2.0",
         "linkify-string": "4.2.0",
         "linkifyjs": "4.2.0",
@@ -138,22 +136,21 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.236.1",
+        "posthog-js": "1.157.2",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
-        "react": "^19.0.0",
+        "react": "^18.3.1",
         "react-beautiful-dnd": "^13.1.0",
         "react-blurhash": "^0.3.0",
-        "react-dom": "^19.0.0",
+        "react-dom": "^18.3.1",
         "react-focus-lock": "^2.5.1",
-        "react-string-replace": "^1.1.1",
         "react-transition-group": "^4.4.1",
         "react-virtualized": "^9.22.5",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.15.0",
+        "sanitize-html": "2.14.0",
         "tar-js": "^0.3.0",
-        "temporal-polyfill": "^0.3.0",
+        "temporal-polyfill": "^0.2.5",
         "ua-parser-js": "^1.0.2",
         "uuid": "^11.0.0",
         "what-input": "^5.2.10"
@@ -180,15 +177,15 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.9.0",
         "@element-hq/element-web-playwright-common": "^1.1.5",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
-        "@rrweb/types": "^2.0.0-alpha.18",
         "@sentry/webpack-plugin": "^3.0.0",
-        "@stylistic/eslint-plugin": "^4.0.0",
+        "@stylistic/eslint-plugin": "^3.0.0",
         "@svgr/webpack": "^8.0.0",
+        "@tenbin/jest": "^0.5.0",
+        "@tenbin/playwright": "^0.5.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
         "@testing-library/react": "^16.0.0",
@@ -212,11 +209,11 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.1",
+        "@types/react": "18.3.18",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.2",
+        "@types/react-dom": "18.3.5",
         "@types/react-transition-group": "^4.4.0",
-        "@types/sanitize-html": "2.15.0",
+        "@types/sanitize-html": "2.13.0",
         "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
@@ -247,7 +244,7 @@
         "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-unicorn": "^56.0.0",
-        "express": "^5.0.0",
+        "express": "^4.18.2",
         "fake-indexeddb": "^6.0.0",
         "fetch-mock": "9.11.0",
         "fetch-mock-jest": "^1.5.1",
@@ -268,9 +265,8 @@
         "minimist": "^1.2.6",
         "modernizr": "^3.12.0",
         "node-fetch": "^2.6.7",
-        "patch-package": "^8.0.0",
         "playwright-core": "^1.51.0",
-        "postcss": "8.5.3",
+        "postcss": "8.4.46",
         "postcss-easings": "^4.0.0",
         "postcss-hexrgba": "2.1.0",
         "postcss-import": "16.1.0",
@@ -280,20 +276,20 @@
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.5.3",
+        "prettier": "3.5.2",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
         "stylelint": "^16.13.0",
-        "stylelint-config-standard": "^38.0.0",
+        "stylelint-config-standard": "^37.0.0",
         "stylelint-scss": "^6.0.0",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
         "testcontainers": "^10.20.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.8.3",
+        "typescript": "5.8.2",
         "util": "^0.12.5",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",

patches/@matrix-org+react-sdk-module-api+2.5.0.patch

@@ -1,13 +0,0 @@
-diff --git a/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts b/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
-index 917a7fc..a2710c6 100644
---- a/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
-+++ b/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
-@@ -37,7 +37,7 @@ export interface ModuleApi {
-      * @returns Whether the user submitted the dialog or closed it, and the model returned by the
-      * dialog component if submitted.
-      */
--    openDialog<M extends object, P extends DialogProps = DialogProps, C extends DialogContent<P> = DialogContent<P>>(initialTitleOrOptions: string | ModuleUiDialogOptions, body: (props: P, ref: React.RefObject<C>) => React.ReactNode, props?: Omit<P, keyof DialogProps>): Promise<{
-+    openDialog<M extends object, P extends DialogProps = DialogProps, C extends DialogContent<P> = DialogContent<P>>(initialTitleOrOptions: string | ModuleUiDialogOptions, body: (props: P, ref: React.RefObject<C | null>) => React.ReactNode, props?: Omit<P, keyof DialogProps>): Promise<{
-         didOkOrSubmit: boolean;
-         model: M;
-     }>;

patches/@types+react+19.0.10.patch

@@ -1,31 +0,0 @@
-diff --git a/node_modules/@types/react/index.d.ts b/node_modules/@types/react/index.d.ts
-index 2272032..18bd20a 100644
---- a/node_modules/@types/react/index.d.ts
-+++ b/node_modules/@types/react/index.d.ts
-@@ -134,7 +134,7 @@ declare namespace React {
-             props: P,
-         ) => ReactNode | Promise<ReactNode>)
-         // constructor signature must match React.Component
--        | (new(props: P) => Component<any, any>);
-+        | (new(props: P, context?: any) => Component<any, any>);
- 
-     /**
-      * Created by {@link createRef}, or {@link useRef} when passed `null`.
-@@ -941,7 +941,7 @@ declare namespace React {
-         context: unknown;
- 
-         // Keep in sync with constructor signature of JSXElementConstructor and ComponentClass.
--        constructor(props: P);
-+        constructor(props: P, context?: unknown);
- 
-         // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
-         // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
-@@ -1113,7 +1113,7 @@ declare namespace React {
-      */
-     interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
-         // constructor signature must match React.Component
--        new(props: P): Component<P, S>;
-+        new(props: P, context?: any): Component<P, S>;
-         /**
-          * Ignored by React.
-          * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.

patches/react-blurhash+0.3.0.patch

@@ -1,22 +0,0 @@
-diff --git a/node_modules/react-blurhash/dist/index.d.ts b/node_modules/react-blurhash/dist/index.d.ts
-index 3adbd0a..32e8c13 100644
---- a/node_modules/react-blurhash/dist/index.d.ts
-+++ b/node_modules/react-blurhash/dist/index.d.ts
-@@ -19,7 +19,7 @@ declare class Blurhash extends React.PureComponent<Props$1> {
-         resolutionY: number;
-     };
-     componentDidUpdate(): void;
--    render(): JSX.Element;
-+    render(): React.JSX.Element;
- }
- 
- declare type Props = React.CanvasHTMLAttributes<HTMLCanvasElement> & {
-@@ -37,7 +37,7 @@ declare class BlurhashCanvas extends React.PureComponent<Props> {
-     componentDidUpdate(): void;
-     handleRef: (canvas: HTMLCanvasElement) => void;
-     draw: () => void;
--    render(): JSX.Element;
-+    render(): React.JSX.Element;
- }
- 
- export { Blurhash, BlurhashCanvas };

playwright.config.ts

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { defineConfig, devices } from "@playwright/test";
+import { splitTests } from "@tenbin/playwright";
 
 import { type WorkerOptions } from "./playwright/services";
 
@@ -93,4 +94,11 @@ export default defineConfig<WorkerOptions>({
     snapshotDir: "playwright/snapshots",
     snapshotPathTemplate: "{snapshotDir}/{testFilePath}/{arg}-{platform}{ext}",
     forbidOnly: !!process.env.CI,
+    testMatch: process.env.SHARD
+        ? splitTests({
+              shard: process.env.SHARD,
+              pattern: ["playwright/e2e/**/*.spec.ts"],
+              reportFile: "playwright-results.json",
+          })
+        : undefined,
 });

playwright/e2e/crypto/backups.spec.ts

@@ -0,0 +1,108 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Page } from "@playwright/test";
+
+import { test, expect } from "../../element-web-test";
+import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { completeCreateSecretStorageDialog } from "./utils.ts";
+
+async function expectBackupVersionToBe(page: Page, version: string) {
+    await expect(page.locator(".mx_SecureBackupPanel_statusList tr:nth-child(5) td")).toHaveText(
+        version + " (Algorithm: m.megolm_backup.v1.curve25519-aes-sha2)",
+    );
+
+    await expect(page.locator(".mx_SecureBackupPanel_statusList tr:nth-child(6) td")).toHaveText(version);
+}
+
+test.describe("Backups", () => {
+    test.skip(isDendrite, "Dendrite lacks support for MSC3967 so requires additional auth here");
+    test.use({
+        displayName: "Hanako",
+    });
+
+    test(
+        "Create, delete and recreate a keys backup",
+        { tag: "@no-webkit" },
+        async ({ page, user, app }, workerInfo) => {
+            // Create a backup
+            const securityTab = await app.settings.openUserSettings("Security & Privacy");
+
+            await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
+            await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
+
+            const securityKey = await completeCreateSecretStorageDialog(page);
+
+            // Open the settings again
+            await app.settings.openUserSettings("Security & Privacy");
+            await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
+
+            // expand the advanced section to see the active version in the reports
+            await page
+                .locator(".mx_Dialog .mx_SettingsSubsection_content details .mx_SecureBackupPanel_advanced")
+                .locator("..")
+                .click();
+
+            await expectBackupVersionToBe(page, "1");
+
+            await securityTab.getByRole("button", { name: "Delete Backup", exact: true }).click();
+            const currentDialogLocator = page.locator(".mx_Dialog");
+            await expect(currentDialogLocator.getByRole("heading", { name: "Delete Backup" })).toBeVisible();
+            // Delete it
+            await currentDialogLocator.getByTestId("dialog-primary-button").click(); // Click "Delete Backup"
+
+            // Create another
+            await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
+            await expect(currentDialogLocator.getByRole("heading", { name: "Recovery Key" })).toBeVisible();
+            await currentDialogLocator.getByLabel("Recovery Key").fill(securityKey);
+            await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
+
+            // Should be successful
+            await expect(currentDialogLocator.getByRole("heading", { name: "Success!" })).toBeVisible();
+            await currentDialogLocator.getByRole("button", { name: "OK", exact: true }).click();
+
+            // Open the settings again
+            await app.settings.openUserSettings("Security & Privacy");
+            await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
+
+            // expand the advanced section to see the active version in the reports
+            await page
+                .locator(".mx_Dialog .mx_SettingsSubsection_content details .mx_SecureBackupPanel_advanced")
+                .locator("..")
+                .click();
+
+            await expectBackupVersionToBe(page, "2");
+
+            // ==
+            // Ensure that if you don't have the secret storage passphrase the backup won't be created
+            // ==
+
+            // First delete version 2
+            await securityTab.getByRole("button", { name: "Delete Backup", exact: true }).click();
+            await expect(currentDialogLocator.getByRole("heading", { name: "Delete Backup" })).toBeVisible();
+            // Click "Delete Backup"
+            await currentDialogLocator.getByTestId("dialog-primary-button").click();
+
+            // Try to create another
+            await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
+            await expect(currentDialogLocator.getByRole("heading", { name: "Recovery Key" })).toBeVisible();
+            // But cancel the recovery key dialog, to simulate not having the secret storage passphrase
+            await currentDialogLocator.getByTestId("dialog-cancel-button").click();
+
+            await expect(currentDialogLocator.getByRole("heading", { name: "Starting backup…" })).toBeVisible();
+            // check that it failed
+            await expect(currentDialogLocator.getByText("Unable to create key backup")).toBeVisible();
+            // cancel
+            await currentDialogLocator.getByTestId("dialog-cancel-button").click();
+
+            // go back to the settings to check that no backup was created (the setup button should still be there)
+            await app.settings.openUserSettings("Security & Privacy");
+            await expect(securityTab.getByRole("button", { name: "Set up", exact: true })).toBeVisible();
+        },
+    );
+});

playwright/e2e/crypto/crypto.spec.ts

@@ -8,7 +8,14 @@ Please see LICENSE files in the repository root for full details.
 
 import type { Page } from "@playwright/test";
 import { expect, test } from "../../element-web-test";
-import { autoJoin, createSharedRoomWithUser, enableKeyBackup, verify } from "./utils";
+import {
+    autoJoin,
+    completeCreateSecretStorageDialog,
+    copyAndContinue,
+    createSharedRoomWithUser,
+    enableKeyBackup,
+    verify,
+} from "./utils";
 import { type Bot } from "../../pages/bot";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
@@ -77,43 +84,85 @@ test.describe("Cryptography", function () {
         },
     });
 
-    /**
-     * Verify that the `m.cross_signing.${keyType}` key is available on the account data on the server
-     * @param keyType
-     */
-    async function verifyKey(app: ElementAppPage, keyType: "master" | "self_signing" | "user_signing") {
-        const accountData: { encrypted: Record<string, Record<string, string>> } = await app.client.evaluate(
-            (cli, keyType) => cli.getAccountDataFromServer(`m.cross_signing.${keyType}`),
-            keyType,
-        );
+    for (const isDeviceVerified of [true, false]) {
+        test.describe(`setting up secure key backup should work isDeviceVerified=${isDeviceVerified}`, () => {
+            /**
+             * Verify that the `m.cross_signing.${keyType}` key is available on the account data on the server
+             * @param keyType
+             */
+            async function verifyKey(app: ElementAppPage, keyType: "master" | "self_signing" | "user_signing") {
+                const accountData: { encrypted: Record<string, Record<string, string>> } = await app.client.evaluate(
+                    (cli, keyType) => cli.getAccountDataFromServer(`m.cross_signing.${keyType}`),
+                    keyType,
+                );
+                expect(accountData.encrypted).toBeDefined();
+                const keys = Object.keys(accountData.encrypted);
+                const key = accountData.encrypted[keys[0]];
+                expect(key.ciphertext).toBeDefined();
+                expect(key.iv).toBeDefined();
+                expect(key.mac).toBeDefined();
+            }
 
-        expect(accountData.encrypted).toBeDefined();
-        const keys = Object.keys(accountData.encrypted);
-        const key = accountData.encrypted[keys[0]];
-        expect(key.ciphertext).toBeDefined();
-        expect(key.iv).toBeDefined();
-        expect(key.mac).toBeDefined();
+            test("by recovery code", async ({ page, app, user: aliceCredentials }) => {
+                // Verified the device
+                if (isDeviceVerified) {
+                    await app.client.bootstrapCrossSigning(aliceCredentials);
+                }
+
+                await page.route("**/_matrix/client/v3/keys/signatures/upload", async (route) => {
+                    // We delay this API otherwise the `Setting up keys` may happen too quickly and cause flakiness
+                    await new Promise((resolve) => setTimeout(resolve, 500));
+                    await route.continue();
+                });
+
+                await app.settings.openUserSettings("Security & Privacy");
+                await page.getByRole("button", { name: "Set up Secure Backup" }).click();
+
+                await completeCreateSecretStorageDialog(page);
+
+                // Verify that the SSSS keys are in the account data stored in the server
+                await verifyKey(app, "master");
+                await verifyKey(app, "self_signing");
+                await verifyKey(app, "user_signing");
+            });
+
+            test("by passphrase", async ({ page, app, user: aliceCredentials }) => {
+                // Verified the device
+                if (isDeviceVerified) {
+                    await app.client.bootstrapCrossSigning(aliceCredentials);
+                }
+
+                await app.settings.openUserSettings("Security & Privacy");
+                await page.getByRole("button", { name: "Set up Secure Backup" }).click();
+
+                const dialog = page.locator(".mx_Dialog");
+                // Select passphrase option
+                await dialog.getByText("Enter a Security Phrase").click();
+                await dialog.getByRole("button", { name: "Continue" }).click();
+
+                // Fill passphrase input
+                await dialog.locator("input").fill("new passphrase for setting up a secure key backup");
+                await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
+                // Confirm passphrase
+                await dialog.locator("input").fill("new passphrase for setting up a secure key backup");
+                await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
+
+                await copyAndContinue(page);
+
+                await expect(dialog.getByText("Secure Backup successful")).toBeVisible();
+                await dialog.getByRole("button", { name: "Done" }).click();
+                await expect(dialog.getByText("Secure Backup successful")).not.toBeVisible();
+
+                // Verify that the SSSS keys are in the account data stored in the server
+                await verifyKey(app, "master");
+                await verifyKey(app, "self_signing");
+                await verifyKey(app, "user_signing");
+            });
+        });
     }
 
-    test("Setting up key backup by recovery key", async ({ page, app, user: aliceCredentials }) => {
-        await app.client.bootstrapCrossSigning(aliceCredentials);
-
-        await enableKeyBackup(app);
-
-        // Wait for the cross signing keys to be uploaded
-        // Waiting for "Change the recovery key" button ensure that all the secrets are uploaded and cached locally
-        const encryptionTab = await app.settings.openUserSettings("Encryption");
-        await expect(encryptionTab.getByRole("button", { name: "Change recovery key" })).toBeVisible();
-
-        // Verify that the SSSS keys are in the account data stored in the server
-        await verifyKey(app, "master");
-        await verifyKey(app, "self_signing");
-        await verifyKey(app, "user_signing");
-    });
-
     test("Can reset cross-signing keys", async ({ page, app, user: aliceCredentials }) => {
-        await app.client.bootstrapCrossSigning(aliceCredentials);
-        await enableKeyBackup(app);
+        const secretStorageKey = await enableKeyBackup(app);
 
         // Fetch the current cross-signing keys
         async function fetchMasterKey() {
@@ -127,15 +176,18 @@ test.describe("Cryptography", function () {
                 return k;
             });
         }
-
         const masterKey1 = await fetchMasterKey();
 
-        // Find "the Reset cryptographic identity" button
-        const encryptionTab = await app.settings.openUserSettings("Encryption");
-        await encryptionTab.getByRole("button", { name: "Reset cryptographic identity" }).click();
+        // Find the "reset cross signing" button, and click it
+        await app.settings.openUserSettings("Security & Privacy");
+        await page.locator("div.mx_CrossSigningPanel_buttonRow").getByRole("button", { name: "Reset" }).click();
 
         // Confirm
-        await encryptionTab.getByRole("button", { name: "Continue" }).click();
+        await page.getByRole("button", { name: "Clear cross-signing keys" }).click();
+
+        // Enter the 4S key
+        await page.getByPlaceholder("Recovery Key").fill(secretStorageKey);
+        await page.getByRole("button", { name: "Continue" }).click();
 
         // Enter the password
         await page.getByPlaceholder("Password").fill(aliceCredentials.password);
@@ -145,6 +197,9 @@ test.describe("Cryptography", function () {
             const masterKey2 = await fetchMasterKey();
             expect(masterKey1).not.toEqual(masterKey2);
         }).toPass();
+
+        // The dialog should have gone away
+        await expect(page.locator(".mx_Dialog")).toHaveCount(1);
     });
 
     test(

playwright/e2e/crypto/dehydration.spec.ts

@@ -27,22 +27,16 @@ test.use({
 test.describe("Dehydration", () => {
     test.skip(isDendrite, "does not yet support dehydration v2");
 
-    test("Verify device and reset creates dehydrated device", async ({ page, user, credentials, app }, workerInfo) => {
-        // Verify the device by resetting the key (which will create SSSS, and dehydrated device)
+    test("'Set up secure backup' creates dehydrated device", async ({ page, user, app }, workerInfo) => {
+        // Create a backup (which will create SSSS, and dehydrated device)
 
         const securityTab = await app.settings.openUserSettings("Security & Privacy");
+
+        await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
         await expect(securityTab.getByText("Offline device enabled")).not.toBeVisible();
+        await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
 
-        await app.closeDialog();
-
-        // Verify the device by resetting the key
-        const settings = await app.settings.openUserSettings("Encryption");
-        await settings.getByRole("button", { name: "Verify this device" }).click();
-        await page.getByRole("button", { name: "Proceed with reset" }).click();
-        await page.getByRole("button", { name: "Continue" }).click();
-        await page.getByRole("button", { name: "Copy" }).click();
-        await page.getByRole("button", { name: "Continue" }).click();
-        await page.getByRole("button", { name: "Done" }).click();
+        await completeCreateSecretStorageDialog(page);
 
         await expectDehydratedDeviceEnabled(app);
 

playwright/e2e/crypto/event-shields.spec.ts

@@ -324,7 +324,7 @@ test.describe("Cryptography", function () {
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastE2eIcon.focus();
             await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
-                "Sender's verified identity was reset",
+                "Sender's verified identity has changed",
             );
         });
     });

playwright/e2e/crypto/invisible-crypto.spec.ts

@@ -52,6 +52,6 @@ test.describe("Invisible cryptography", () => {
         /* should show an error for a message from a previously verified device */
         await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
         const lastTile = page.locator(".mx_EventTile_last");
-        await expect(lastTile).toContainText("Sender's verified identity was reset");
+        await expect(lastTile).toContainText("Sender's verified identity has changed");
     });
 });

playwright/e2e/crypto/toasts.spec.ts

@@ -29,9 +29,7 @@ test.describe("Key storage out of sync toast", () => {
     });
 
     test("should prompt for recovery key if 'enter recovery key' pressed", { tag: "@screenshot" }, async ({ page }) => {
-        // We need to wait for there to be two toasts as the wait below won't work in isolation:
-        // playwright only evaluates the 'first()' call initially, not subsequent times it checks, so
-        // it would always be checking the same toast, even if another one is now the first.
+        // Need to wait for 2 to appear since playwright only evaluates 'first()' initially, so the waiting won't work
         await expect(page.getByRole("alert")).toHaveCount(2);
         await expect(page.getByRole("alert").first()).toMatchScreenshot("key-storage-out-of-sync-toast.png");
 

playwright/e2e/crypto/utils.ts

@@ -221,9 +221,6 @@ export async function logIntoElement(page: Page, credentials: Credentials, secur
         await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key" }).click();
 
         const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "use your Recovery Key" });
-        // If the user has set a recovery *passphrase*, they'll be prompted for that first and have to click
-        // through to enter the recovery key which is what we have here. If they haven't, they'll be prompted
-        // for a recovery key straight away. We click the button if it's there so this works in both cases.
         if (await useSecurityKey.isVisible()) {
             await useSecurityKey.click();
         }
@@ -292,28 +289,17 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
 }
 
 /**
- * Open the encryption settings and enable key storage and recovery
- * Assumes that the current device has been verified
+ * Open the security settings and enable secure key backup.
+ *
+ * Assumes that the current device has been cross-signed (which means that we skip a step where we set it up).
  *
  * Returns the recovery key
  */
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
-    const encryptionTab = await app.settings.openUserSettings("Encryption");
+    await app.settings.openUserSettings("Security & Privacy");
+    await app.page.getByRole("button", { name: "Set up Secure Backup" }).click();
 
-    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
-    if (!(await keyStorageToggle.isChecked())) {
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
-    }
-
-    await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
-    await encryptionTab.getByRole("button", { name: "Continue" }).click();
-
-    const recoveryKey = await encryptionTab.getByTestId("recoveryKey").innerText();
-    await encryptionTab.getByRole("button", { name: "Continue" }).click();
-    await encryptionTab.getByRole("textbox").fill(recoveryKey);
-    await encryptionTab.getByRole("button", { name: "Finish set up" }).click();
-    await app.settings.closeDialog();
-    return recoveryKey;
+    return await completeCreateSecretStorageDialog(app.page);
 }
 
 /**

playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts

@@ -18,10 +18,6 @@ test.describe("Room list filters and sort", () => {
         labsFlags: ["feature_new_room_list"],
     });
 
-    function getPrimaryFilters(page: Page) {
-        return page.getByRole("listbox", { name: "Room list filters" });
-    }
-
     /**
      * Get the room list
      * @param page
@@ -30,183 +26,63 @@ test.describe("Room list filters and sort", () => {
         return page.getByTestId("room-list");
     }
 
+    function getPrimaryFilters(page: Page) {
+        return page.getByRole("listbox", { name: "Room list filters" });
+    }
+
     test.beforeEach(async ({ page, app, bot, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
+
+        await app.client.createRoom({ name: "empty room" });
+
+        const unReadDmId = await bot.createRoom({
+            name: "unread dm",
+            invite: [user.userId],
+            is_direct: true,
+        });
+        await bot.sendMessage(unReadDmId, "I am a robot. Beep.");
+
+        const unReadRoomId = await app.client.createRoom({ name: "unread room" });
+        await app.client.inviteUser(unReadRoomId, bot.credentials.userId);
+        await bot.joinRoom(unReadRoomId);
+        await bot.sendMessage(unReadRoomId, "I am a robot. Beep.");
+
+        const favouriteId = await app.client.createRoom({ name: "favourite room" });
+        await app.client.evaluate(async (client, favouriteId) => {
+            await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
+        }, favouriteId);
     });
 
-    test.describe("Scroll behaviour", () => {
-        test("should scroll to the top of list when filter is applied and active room is not in filtered list", async ({
-            page,
-            app,
-        }) => {
-            const createFavouriteRoom = async (name: string) => {
-                const id = await app.client.createRoom({
-                    name,
-                });
-                await app.client.evaluate(async (client, favouriteId) => {
-                    await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
-                }, id);
-            };
+    test("should filter the list (with primary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomList = getRoomList(page);
+        const primaryFilters = getPrimaryFilters(page);
 
-            // Create 5 favourite rooms
-            let i = 0;
-            for (; i < 5; i++) {
-                await createFavouriteRoom(`room${i}-fav`);
-            }
-
-            // Create a non-favourite room
-            await app.client.createRoom({ name: `room-non-fav` });
-
-            // Create rest of the favourite rooms
-            for (; i < 20; i++) {
-                await createFavouriteRoom(`room${i}-fav`);
-            }
-
-            // Open the non-favourite room
-            const roomListView = getRoomList(page);
-            const tile = roomListView.getByRole("gridcell", { name: "Open room room-non-fav" });
-            await tile.scrollIntoViewIfNeeded();
-            await tile.click();
-
-            // Enable Favourite filter
-            const primaryFilters = getPrimaryFilters(page);
-            await primaryFilters.getByRole("option", { name: "Favourite" }).click();
-            await expect(tile).not.toBeVisible();
-
-            // Ensure the room list is not scrolled
-            const isScrolledDown = await page
-                .getByRole("grid", { name: "Room list" })
-                .evaluate((e) => e.scrollTop !== 0);
-            expect(isScrolledDown).toStrictEqual(false);
-        });
-    });
-
-    test.describe("Room list", () => {
-        let unReadDmId: string | undefined;
-        let unReadRoomId: string | undefined;
-
-        test.beforeEach(async ({ page, app, bot, user }) => {
-            await app.client.createRoom({ name: "empty room" });
-
-            unReadDmId = await bot.createRoom({
-                name: "unread dm",
-                invite: [user.userId],
-                is_direct: true,
-            });
-            await app.client.joinRoom(unReadDmId);
-            await bot.sendMessage(unReadDmId, "I am a robot. Beep.");
-
-            unReadRoomId = await app.client.createRoom({ name: "unread room" });
-            await app.client.inviteUser(unReadRoomId, bot.credentials.userId);
-            await bot.joinRoom(unReadRoomId);
-            await bot.sendMessage(unReadRoomId, "I am a robot. Beep.");
-
-            const favouriteId = await app.client.createRoom({ name: "favourite room" });
-            await app.client.evaluate(async (client, favouriteId) => {
-                await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
-            }, favouriteId);
-        });
-
-        test("should filter the list (with primary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            const roomList = getRoomList(page);
-            const primaryFilters = getPrimaryFilters(page);
-
-            const allFilters = await primaryFilters.locator("option").all();
-            for (const filter of allFilters) {
-                expect(await filter.getAttribute("aria-selected")).toBe("false");
-            }
-            await expect(primaryFilters).toMatchScreenshot("unselected-primary-filters.png");
-
-            await primaryFilters.getByRole("option", { name: "Unread" }).click();
-            // only one room should be visible
-            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(2);
-            await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
-
-            await primaryFilters.getByRole("option", { name: "Favourite" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(1);
-
-            await primaryFilters.getByRole("option", { name: "People" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(1);
-
-            await primaryFilters.getByRole("option", { name: "Rooms" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(3);
-        });
-
-        test("unread filter should only match unread rooms that have a count", async ({ page, app, bot }) => {
-            const roomListView = getRoomList(page);
-
-            // Let's configure unread dm room so that we only get notification for mentions and keywords
-            await app.viewRoomById(unReadDmId);
-            await app.settings.openRoomSettings("Notifications");
-            await page.getByText("@mentions & keywords").click();
-            await app.settings.closeDialog();
-
-            // Let's open a room other than unread room or unread dm
-            await roomListView.getByRole("gridcell", { name: "Open room favourite room" }).click();
-
-            // Let's make the bot send a new message in both rooms
-            await bot.sendMessage(unReadDmId, "Hello!");
-            await bot.sendMessage(unReadRoomId, "Hello!");
-
-            // Let's activate the unread filter now
-            await page.getByRole("option", { name: "Unread" }).click();
-
-            // Unread filter should only show unread room and not unread dm!
-            await expect(roomListView.getByRole("gridcell", { name: "Open room unread room" })).toBeVisible();
-            await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
-        });
-    });
-
-    test.describe("Empty room list", () => {
-        /**
-         * Get the empty state
-         * @param page
-         */
-        function getEmptyRoomList(page: Page) {
-            return page.getByTestId("empty-room-list");
+        const allFilters = await primaryFilters.locator("option").all();
+        for (const filter of allFilters) {
+            expect(await filter.getAttribute("aria-selected")).toBe("false");
         }
+        await expect(primaryFilters).toMatchScreenshot("unselected-primary-filters.png");
 
-        test(
-            "should render the default placeholder when there is no filter",
-            { tag: "@screenshot" },
-            async ({ page, app, user }) => {
-                const emptyRoomList = getEmptyRoomList(page);
-                await expect(emptyRoomList).toMatchScreenshot("default-empty-room-list.png");
-                await expect(page.getByTestId("room-list-panel")).toMatchScreenshot("room-panel-empty-room-list.png");
-            },
-        );
+        await primaryFilters.getByRole("option", { name: "Unread" }).click();
+        // only one room should be visible
+        await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(2);
+        await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
 
-        test("should render the placeholder for unread filter", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            const primaryFilters = getPrimaryFilters(page);
-            await primaryFilters.getByRole("option", { name: "Unread" }).click();
+        await primaryFilters.getByRole("option", { name: "Favourite" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(1);
 
-            const emptyRoomList = getEmptyRoomList(page);
-            await expect(emptyRoomList).toMatchScreenshot("unread-empty-room-list.png");
+        await primaryFilters.getByRole("option", { name: "People" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(1);
 
-            await emptyRoomList.getByRole("button", { name: "show all chats" }).click();
-            await expect(primaryFilters.getByRole("option", { name: "Unread" })).not.toBeChecked();
-        });
-
-        ["People", "Rooms", "Favourite"].forEach((filter) => {
-            test(
-                `should render the placeholder for ${filter} filter`,
-                { tag: "@screenshot" },
-                async ({ page, app, user }) => {
-                    const primaryFilters = getPrimaryFilters(page);
-                    await primaryFilters.getByRole("option", { name: filter }).click();
-
-                    const emptyRoomList = getEmptyRoomList(page);
-                    await expect(emptyRoomList).toMatchScreenshot(`${filter}-empty-room-list.png`);
-                },
-            );
-        });
+        await primaryFilters.getByRole("option", { name: "Rooms" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(3);
     });
 });

playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -7,15 +7,12 @@
 
 import { type Page } from "@playwright/test";
 
-import { expect, test } from "../../../element-web-test";
+import { test, expect } from "../../../element-web-test";
 
 test.describe("Room list", () => {
     test.use({
         displayName: "Alice",
         labsFlags: ["feature_new_room_list"],
-        botCreateOpts: {
-            displayName: "BotBob",
-        },
     });
 
     /**
@@ -29,267 +26,55 @@ test.describe("Room list", () => {
     test.beforeEach(async ({ page, app, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
+        for (let i = 0; i < 30; i++) {
+            await app.client.createRoom({ name: `room${i}` });
+        }
     });
 
-    test.describe("Room list", () => {
-        test.beforeEach(async ({ page, app, user }) => {
-            for (let i = 0; i < 30; i++) {
-                await app.client.createRoom({ name: `room${i}` });
-            }
-        });
+    test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room29" })).toBeVisible();
+        await expect(roomListView).toMatchScreenshot("room-list.png");
 
-        test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            const roomListView = getRoomList(page);
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room29" })).toBeVisible();
-            await expect(roomListView).toMatchScreenshot("room-list.png");
-
-            await roomListView.hover();
-            // Scroll to the end of the room list
-            await page.mouse.wheel(0, 1000);
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
-            await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
-        });
-
-        test("should open the room when it is clicked", async ({ page, app, user }) => {
-            const roomListView = getRoomList(page);
-            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
-            await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
-        });
-
-        test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            const roomListView = getRoomList(page);
-            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
-            await roomItem.hover();
-
-            await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
-            const roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
-            await roomItemMenu.click();
-            await expect(page).toMatchScreenshot("room-list-item-open-more-options.png");
-
-            // It should make the room favourited
-            await page.getByRole("menuitemcheckbox", { name: "Favourited" }).click();
-
-            // Check that the room is favourited
-            await roomItem.hover();
-            await roomItemMenu.click();
-            await expect(page.getByRole("menuitemcheckbox", { name: "Favourited" })).toBeChecked();
-            // It should show the invite dialog
-            await page.getByRole("menuitem", { name: "invite" }).click();
-            await expect(page.getByRole("heading", { name: "Invite to room29" })).toBeVisible();
-            await app.closeDialog();
-
-            // It should leave the room
-            await roomItem.hover();
-            await roomItemMenu.click();
-            await page.getByRole("menuitem", { name: "leave room" }).click();
-            await expect(roomItem).not.toBeVisible();
-        });
-
-        test("should open the notification options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            const roomListView = getRoomList(page);
-
-            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
-            await roomItem.hover();
-
-            await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
-            let roomItemMenu = roomItem.getByRole("button", { name: "Notification options" });
-            await roomItemMenu.click();
-
-            // Default settings should be selected
-            await expect(page.getByRole("menuitem", { name: "Match default settings" })).toHaveAttribute(
-                "aria-selected",
-                "true",
-            );
-            await expect(page).toMatchScreenshot("room-list-item-open-notification-options.png");
-
-            // It should make the room muted
-            await page.getByRole("menuitem", { name: "Mute room" }).click();
-
-            // Remove hover on the room list item
-            await roomListView.hover();
-
-            // Scroll to the bottom of the list
-            await page.getByRole("grid", { name: "Room list" }).evaluate((e) => {
-                e.scrollTop = e.scrollHeight;
-            });
-
-            // The room decoration should have the muted icon
-            await expect(roomItem.getByTestId("notification-decoration")).toBeVisible();
-
-            await roomItem.hover();
-            // On hover, the room should show the muted icon
-            await expect(roomItem).toMatchScreenshot("room-list-item-hover-silent.png");
-
-            roomItemMenu = roomItem.getByRole("button", { name: "Notification options" });
-            await roomItemMenu.click();
-            // The Mute room option should be selected
-            await expect(page.getByRole("menuitem", { name: "Mute room" })).toHaveAttribute("aria-selected", "true");
-            await expect(page).toMatchScreenshot("room-list-item-open-notification-options-selection.png");
-        });
-
-        test("should scroll to the current room", async ({ page, app, user }) => {
-            const roomListView = getRoomList(page);
-            await roomListView.hover();
-            // Scroll to the end of the room list
-            await page.mouse.wheel(0, 1000);
-
-            await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();
-
-            const filters = page.getByRole("listbox", { name: "Room list filters" });
-            await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).not.toBeVisible();
-
-            await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
-        });
+        await roomListView.hover();
+        // Scroll to the end of the room list
+        await page.mouse.wheel(0, 1000);
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+        await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
     });
 
-    test.describe("Avatar decoration", () => {
-        test.use({ labsFlags: ["feature_video_rooms", "feature_new_room_list"] });
-
-        test("should be a public room", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            // @ts-ignore Visibility enum is not accessible
-            await app.client.createRoom({ name: "public room", visibility: "public" });
-            const roomListView = getRoomList(page);
-            const publicRoom = roomListView.getByRole("gridcell", { name: "public room" });
-
-            await expect(publicRoom).toBeVisible();
-            await expect(publicRoom).toMatchScreenshot("room-list-item-public.png");
-        });
-
-        test("should be a video room", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            await page.getByTestId("room-list-panel").getByRole("button", { name: "Add" }).click();
-            await page.getByRole("menuitem", { name: "New video room" }).click();
-            await page.getByRole("textbox", { name: "Name" }).fill("video room");
-            await page.getByRole("button", { name: "Create video room" }).click();
-
-            const roomListView = getRoomList(page);
-            const videoRoom = roomListView.getByRole("gridcell", { name: "video room" });
-            await expect(videoRoom).toBeVisible();
-            await expect(videoRoom).toMatchScreenshot("room-list-item-video.png");
-        });
+    test("should open the room when it is clicked", async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+        await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
     });
 
-    test.describe("Notification decoration", () => {
-        test("should render the invitation decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
-            const roomListView = getRoomList(page);
+    test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+        await roomItem.hover();
 
-            await bot.createRoom({
-                name: "invited room",
-                invite: [user.userId],
-                is_direct: true,
-            });
-            const invitedRoom = roomListView.getByRole("gridcell", { name: "invited room" });
-            await expect(invitedRoom).toBeVisible();
-            await expect(invitedRoom).toMatchScreenshot("room-list-item-invited.png");
-        });
+        await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
+        const roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
+        await roomItemMenu.click();
+        await expect(page).toMatchScreenshot("room-list-item-open-more-options.png");
 
-        test("should render the regular decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
-            const roomListView = getRoomList(page);
+        // It should make the room favourited
+        await page.getByRole("menuitemcheckbox", { name: "Favourited" }).click();
 
-            const roomId = await app.client.createRoom({ name: "2 notifications" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
-            await bot.joinRoom(roomId);
+        // Check that the room is favourited
+        await roomItem.hover();
+        await roomItemMenu.click();
+        await expect(page.getByRole("menuitemcheckbox", { name: "Favourited" })).toBeChecked();
+        // It should show the invite dialog
+        await page.getByRole("menuitem", { name: "invite" }).click();
+        await expect(page.getByRole("heading", { name: "Invite to room29" })).toBeVisible();
+        await app.closeDialog();
 
-            await bot.sendMessage(roomId, "I am a robot. Beep.");
-            await bot.sendMessage(roomId, "I am a robot. Beep.");
-
-            const room = roomListView.getByRole("gridcell", { name: "2 notifications" });
-            await expect(room).toBeVisible();
-            await expect(room.getByTestId("notification-decoration")).toHaveText("2");
-            await expect(room).toMatchScreenshot("room-list-item-notification.png");
-        });
-
-        test("should render the mention decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
-            const roomListView = getRoomList(page);
-
-            const roomId = await app.client.createRoom({ name: "mention" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
-            await bot.joinRoom(roomId);
-
-            const clientBot = await bot.prepareClient();
-            await clientBot.evaluate(
-                async (client, { roomId, userId }) => {
-                    await client.sendMessage(roomId, {
-                        // @ts-ignore ignore usage of MsgType.text
-                        "msgtype": "m.text",
-                        "body": "User",
-                        "format": "org.matrix.custom.html",
-                        "formatted_body": `<a href="https://matrix.to/#/${userId}">User</a>`,
-                        "m.mentions": {
-                            user_ids: [userId],
-                        },
-                    });
-                },
-                { roomId, userId: user.userId },
-            );
-            await bot.sendMessage(roomId, "I am a robot. Beep.");
-
-            const room = roomListView.getByRole("gridcell", { name: "mention" });
-            await expect(room).toBeVisible();
-            await expect(room).toMatchScreenshot("room-list-item-mention.png");
-        });
-
-        test("should render an activity decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
-            const roomListView = getRoomList(page);
-
-            const otherRoomId = await app.client.createRoom({ name: "other room" });
-
-            const roomId = await app.client.createRoom({ name: "activity" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
-            await bot.joinRoom(roomId);
-
-            await app.viewRoomById(roomId);
-            await app.settings.openRoomSettings("Notifications");
-            await page.getByText("@mentions & keywords").click();
-            await app.settings.closeDialog();
-
-            await app.settings.openUserSettings("Notifications");
-            await page.getByText("Show all activity in the room list (dots or number of unread messages)").click();
-            await app.settings.closeDialog();
-
-            // Switch to the other room to avoid the notification to be cleared
-            await app.viewRoomById(otherRoomId);
-            await bot.sendMessage(roomId, "I am a robot. Beep.");
-
-            const room = roomListView.getByRole("gridcell", { name: "activity" });
-            await expect(room.getByTestId("notification-decoration")).toBeVisible();
-            await expect(room).toMatchScreenshot("room-list-item-activity.png");
-        });
-
-        test("should render a mark as unread decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
-            const roomListView = getRoomList(page);
-
-            const roomId = await app.client.createRoom({ name: "mark as unread" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
-            await bot.joinRoom(roomId);
-
-            const room = roomListView.getByRole("gridcell", { name: "mark as unread" });
-            await room.hover();
-            await room.getByRole("button", { name: "More Options" }).click();
-            await page.getByRole("menuitem", { name: "mark as unread" }).click();
-
-            // Remove hover on the room list item
-            await roomListView.hover();
-
-            await expect(room).toMatchScreenshot("room-list-item-mark-as-unread.png");
-        });
-
-        test("should render silent decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
-            const roomListView = getRoomList(page);
-
-            const roomId = await app.client.createRoom({ name: "silent" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
-            await bot.joinRoom(roomId);
-
-            await app.viewRoomById(roomId);
-            await app.settings.openRoomSettings("Notifications");
-            await page.getByText("Off").click();
-            await app.settings.closeDialog();
-
-            const room = roomListView.getByRole("gridcell", { name: "silent" });
-            await expect(room.getByTestId("notification-decoration")).toBeVisible();
-            await expect(room).toMatchScreenshot("room-list-item-silent.png");
-        });
+        // It should leave the room
+        await roomItem.hover();
+        await roomItemMenu.click();
+        await page.getByRole("menuitem", { name: "leave room" }).click();
+        await expect(roomItem).not.toBeVisible();
     });
 });

playwright/e2e/login/login-consent.spec.ts

@@ -13,7 +13,6 @@ import { selectHomeserver } from "../utils";
 import { type Credentials, type HomeserverInstance } from "../../plugins/homeserver";
 import { consentHomeserver } from "../../plugins/homeserver/synapse/consentHomeserver.ts";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { createBot } from "../crypto/utils.ts";
 
 // This test requires fixed credentials for the device signing keys below to work
 const username = "user1234";
@@ -259,34 +258,6 @@ test.describe("Login", () => {
 
                     await expect(h1.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
                 });
-
-                test("Continues to show verification prompt after cancelling device verification", async ({
-                    page,
-                    homeserver,
-                    credentials,
-                }) => {
-                    // Create a different device which is cross-signed, meaning we need to verify this device
-                    await createBot(page, homeserver, credentials, true);
-
-                    // Wait to avoid homeserver rate limit on logins
-                    await page.waitForTimeout(100);
-
-                    // Load the page and see that we are asked to verify
-                    await page.goto("/#/welcome");
-                    await login(page, homeserver, credentials);
-                    let h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
-                    await expect(h1).toBeVisible();
-
-                    // Click "Verify with another device"
-                    await page.getByRole("button", { name: "Verify with another device" }).click();
-
-                    // Cancel the new dialog
-                    await page.getByRole("button", { name: "Close dialog" }).click();
-
-                    // Check that we are still being asked to verify
-                    h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
-                    await expect(h1).toBeVisible();
-                });
             });
         });
     });

playwright/e2e/oidc/oidc-native.spec.ts

@@ -73,33 +73,4 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await revokeAccessTokenPromise;
         await revokeRefreshTokenPromise;
     });
-
-    test(
-        "it should log out the user & wipe data when logging out via MAS",
-        { tag: "@screenshot" },
-        async ({ mas, page, mailpitClient }, testInfo) => {
-            // We use this over the `user` fixture to ensure we get an OIDC session rather than a compatibility one
-            await page.goto("/#/login");
-            await page.getByRole("button", { name: "Continue" }).click();
-
-            const userId = `alice_${testInfo.testId}`;
-            await registerAccountMas(page, mailpitClient, userId, "alice@email.com", "Pa$sW0rD!");
-
-            await expect(page.getByText("Welcome")).toBeVisible();
-            await page.goto("about:blank");
-
-            // @ts-expect-error
-            const result = await mas.manage("kill-sessions", userId);
-            expect(result.output).toContain("Ended 1 active OAuth 2.0 session");
-
-            await page.goto("http://localhost:8080");
-            await expect(
-                page.getByText("For security, this session has been signed out. Please sign in again."),
-            ).toBeVisible();
-            await expect(page).toMatchScreenshot("token-expired.png", { includeDialogBackground: true });
-
-            const localStorageKeys = await page.evaluate(() => Object.keys(localStorage));
-            expect(localStorageKeys).toHaveLength(0);
-        },
-    );
 });

playwright/e2e/regression-tests/pills-click-in-app.spec.ts

@@ -43,7 +43,6 @@ test.describe("Pills", () => {
 
         // go back to the message room and try to click on the pill text, as a user would
         await app.viewRoomByName(messageRoom);
-        await expect(page).toHaveURL(new RegExp(`/#/room/${messageRoomId}`));
         const pillText = page.locator(".mx_EventTile_body .mx_Pill .mx_Pill_text");
         await expect(pillText).toHaveCSS("pointer-events", "none");
         await pillText.click({ force: true }); // force is to ensure we bypass pointer-events

playwright/e2e/right-panel/right-panel.spec.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -10,7 +10,6 @@ import { type Locator, type Page } from "@playwright/test";
 
 import { test, expect } from "../../element-web-test";
 import { checkRoomSummaryCard, viewRoomSummaryByName } from "./utils";
-import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 const ROOM_NAME = "Test room";
 const ROOM_NAME_LONG =
@@ -134,34 +133,6 @@ test.describe("RightPanel", () => {
             await page.getByLabel("Room info").nth(1).click();
             await checkRoomSummaryCard(page, ROOM_NAME);
         });
-        test.describe("room reporting", () => {
-            test.skip(isDendrite, "Dendrite does not implement room reporting");
-            test("should handle reporting a room", { tag: "@screenshot" }, async ({ page, app }) => {
-                await viewRoomSummaryByName(page, app, ROOM_NAME);
-
-                await page.getByRole("menuitem", { name: "Report room" }).click();
-                const dialog = await page.getByRole("dialog", { name: "Report Room" });
-                await dialog.getByLabel("reason").fill("This room should be reported");
-                await expect(dialog).toMatchScreenshot("room-report-dialog.png");
-                await dialog.getByRole("button", { name: "Send report" }).click();
-
-                // Dialog should have gone
-                await expect(page.locator(".mx_Dialog")).toHaveCount(0);
-            });
-            test("should handle reporting a room and leaving the room", async ({ page, app }) => {
-                await viewRoomSummaryByName(page, app, ROOM_NAME);
-
-                await page.getByRole("menuitem", { name: "Report room" }).click();
-                const dialog = await page.getByRole("dialog", { name: "Report room" });
-                await dialog.getByRole("switch", { name: "Leave room" }).click();
-                await dialog.getByLabel("reason").fill("This room should be reported");
-                await dialog.getByRole("button", { name: "Send report" }).click();
-                await page.getByRole("dialog", { name: "Leave room" }).getByRole("button", { name: "Leave" }).click();
-
-                // Dialog should have gone
-                await expect(page.locator(".mx_Dialog")).toHaveCount(0);
-            });
-        });
     });
 
     test.describe("in spaces", () => {

playwright/e2e/room/invites.spec.ts

@@ -1,74 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { test, expect } from "../../element-web-test";
-
-test.describe("Invites", () => {
-    test.use({
-        displayName: "Alice",
-        botCreateOpts: {
-            displayName: "Bob",
-        },
-    });
-
-    test("should render an invite view", { tag: "@screenshot" }, async ({ page, homeserver, user, bot, app }) => {
-        const roomId = await bot.createRoom({ is_direct: true });
-        await bot.inviteUser(roomId, user.userId);
-        await app.viewRoomByName("Bob");
-        await expect(page.locator(".mx_RoomView")).toMatchScreenshot("Invites_room_view.png", {
-            // Hide the mxid, which is not stable.
-            css: `
-                .mx_RoomPreviewBar_inviter_mxid {
-                    display: none !important;
-                }
-            `,
-        });
-    });
-
-    test("should be able to decline an invite", async ({ page, homeserver, user, bot, app }) => {
-        const roomId = await bot.createRoom({ is_direct: true });
-        await bot.inviteUser(roomId, user.userId);
-        await app.viewRoomByName("Bob");
-        await page.getByRole("button", { name: "Decline", exact: true }).click();
-        await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
-        await expect(
-            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Bob", exact: true }),
-        ).not.toBeVisible();
-    });
-
-    test(
-        "should be able to decline an invite, report the room and ignore the user",
-        { tag: "@screenshot" },
-        async ({ page, homeserver, user, bot, app }) => {
-            const roomId = await bot.createRoom({ is_direct: true });
-            await bot.inviteUser(roomId, user.userId);
-            await app.viewRoomByName("Bob");
-            await page.getByRole("button", { name: "Decline and block" }).click();
-            await page.getByLabel("Ignore user").click();
-            await page.getByLabel("Report room").click();
-            await page.getByLabel("Reason").fill("Do not want the room");
-            const roomReported = page.waitForRequest(
-                (req) =>
-                    req.url().endsWith(`/_matrix/client/v3/rooms/${encodeURIComponent(roomId)}/report`) &&
-                    req.method() === "POST",
-            );
-            await expect(page.getByRole("dialog", { name: "Decline invitation" })).toMatchScreenshot(
-                "Invites_reject_dialog.png",
-            );
-            await page.getByRole("button", { name: "Decline invite" }).click();
-
-            // Check room was reported.
-            await roomReported;
-
-            // Check user is ignored.
-            await app.settings.openUserSettings("Security & Privacy");
-            const ignoredUsersList = page.getByRole("list", { name: "Ignored users" });
-            await ignoredUsersList.scrollIntoViewIfNeeded();
-            await expect(ignoredUsersList.getByRole("listitem", { name: bot.credentials.userId })).toBeVisible();
-        },
-    );
-});

playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024,2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2023 Suguru Hirahara
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -50,8 +50,8 @@ test.describe("Appearance user settings tab", () => {
         // Click "Show advanced" link button
         await tab.getByRole("button", { name: "Show advanced" }).click();
 
-        await tab.getByLabel("Use bundled emoji font").click();
-        await tab.getByLabel("Use a system font").click();
+        await tab.locator(".mx_Checkbox", { hasText: "Use bundled emoji font" }).click();
+        await tab.locator(".mx_Checkbox", { hasText: "Use a system font" }).click();
 
         // Assert that the font-family value was removed
         await expect(page.locator("body")).toHaveCSS("font-family", '""');

playwright/e2e/settings/preferences-user-settings-tab.spec.ts

@@ -28,10 +28,7 @@ test.describe("Preferences user settings tab", () => {
         const tab = await app.settings.openUserSettings("Preferences");
         // Assert that the top heading is rendered
         await expect(tab.getByRole("heading", { name: "Preferences" })).toBeVisible();
-        await expect(tab).toMatchScreenshot("Preferences-user-settings-tab-should-be-rendered-properly-1.png", {
-            // masked due to daylight saving time
-            mask: [tab.locator("#mx_dropdownUserTimezone_value")],
-        });
+        await expect(tab).toMatchScreenshot("Preferences-user-settings-tab-should-be-rendered-properly-1.png");
     });
 
     test("should be able to change the app language", { tag: ["@no-firefox", "@no-webkit"] }, async ({ uut, user }) => {

playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -7,15 +7,47 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Page, type Request } from "@playwright/test";
+import { GenericContainer, type StartedTestContainer, Wait } from "testcontainers";
 
 import { test as base, expect } from "../../element-web-test";
 import type { ElementAppPage } from "../../pages/ElementAppPage";
 import type { Bot } from "../../pages/bot";
 
 const test = base.extend<{
+    slidingSyncProxy: StartedTestContainer;
     testRoom: { roomId: string; name: string };
     joinedBot: Bot;
 }>({
+    slidingSyncProxy: async ({ logger, network, postgres, page, homeserver }, use, testInfo) => {
+        const container = await new GenericContainer("ghcr.io/matrix-org/sliding-sync:v0.99.3")
+            .withNetwork(network)
+            .withExposedPorts(8008)
+            .withLogConsumer(logger.getConsumer("sliding-sync-proxy"))
+            .withWaitStrategy(Wait.forHttp("/client/server.json", 8008))
+            .withEnvironment({
+                SYNCV3_SECRET: "bwahahaha",
+                SYNCV3_DB: `user=${postgres.getUsername()} dbname=postgres password=${postgres.getPassword()} host=postgres sslmode=disable`,
+                SYNCV3_SERVER: `http://homeserver:8008`,
+            })
+            .start();
+
+        const proxyAddress = `http://${container.getHost()}:${container.getMappedPort(8008)}`;
+        await page.addInitScript((proxyAddress) => {
+            window.localStorage.setItem(
+                "mx_local_settings",
+                JSON.stringify({
+                    feature_sliding_sync_proxy_url: proxyAddress,
+                }),
+            );
+            window.localStorage.setItem("mx_labs_feature_feature_sliding_sync", "true");
+        }, proxyAddress);
+        await use(container);
+        await container.stop();
+    },
+    // Ensure slidingSyncProxy is set up before the user fixture as it relies on an init script
+    credentials: async ({ slidingSyncProxy, credentials }, use) => {
+        await use(credentials);
+    },
     testRoom: async ({ user, app }, use) => {
         const name = "Test Room";
         const roomId = await app.client.createRoom({ name });
@@ -50,14 +82,6 @@ test.describe("Sliding Sync", () => {
         });
     };
 
-    test.use({
-        config: {
-            features: {
-                feature_simplified_sliding_sync: true,
-            },
-        },
-    });
-
     // Load the user fixture for all tests
     test.beforeEach(({ user }) => {});
 
@@ -164,7 +188,15 @@ test.describe("Sliding Sync", () => {
         ).not.toBeAttached();
     });
 
-    test("should show unread indicators", async ({ page, app, joinedBot: bot, testRoom }) => {
+    test("should not show unread indicators", async ({ page, app, joinedBot: bot, testRoom }) => {
+        // TODO: for now. Later we should.
+
+        // disable notifs in this room (TODO: CS API call?)
+        const locator = page.getByRole("treeitem", { name: "Test Room" });
+        await locator.hover();
+        await locator.getByRole("button", { name: "Notification options" }).click();
+        await page.getByRole("menuitemradio", { name: "Mute room" }).click();
+
         // create a new room so we know when the message has been received as it'll re-shuffle the room list
         await app.client.createRoom({ name: "Dummy" });
 
@@ -175,7 +207,9 @@ test.describe("Sliding Sync", () => {
         // wait for this message to arrive, tell by the room list resorting
         await checkOrder(["Test Room", "Dummy"], page);
 
-        await expect(page.getByRole("treeitem", { name: "Test Room" }).locator(".mx_NotificationBadge")).toBeAttached();
+        await expect(
+            page.getByRole("treeitem", { name: "Test Room" }).locator(".mx_NotificationBadge"),
+        ).not.toBeAttached();
     });
 
     test("should update user settings promptly", async ({ page, app }) => {
@@ -187,37 +221,6 @@ test.describe("Sliding Sync", () => {
         await expect(locator.locator(".mx_ToggleSwitch_on")).toBeAttached();
     });
 
-    test("should send subscribe_rooms on room switch if room not already subscribed", async ({ page, app }) => {
-        // create rooms and check room names are correct
-        const roomIds: string[] = [];
-        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
-            const id = await app.client.createRoom({ name: fruit });
-            roomIds.push(id);
-            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
-        }
-        const [roomAId, roomPId] = roomIds;
-
-        const matchRoomSubRequest = (subRoomId: string) => (request: Request) => {
-            if (!request.url().includes("/sync")) return false;
-            const body = request.postDataJSON();
-            return body.room_subscriptions?.[subRoomId];
-        };
-
-        // Select the Test Room and wait for playwright to get the request
-        const [request] = await Promise.all([
-            page.waitForRequest(matchRoomSubRequest(roomAId)),
-            page.getByRole("treeitem", { name: "Apple", exact: true }).click(),
-        ]);
-        const roomSubscriptions = request.postDataJSON().room_subscriptions;
-        expect(roomSubscriptions, "room_subscriptions is object").toBeDefined();
-
-        // Switch to another room and wait for playwright to get the request
-        await Promise.all([
-            page.waitForRequest(matchRoomSubRequest(roomPId)),
-            page.getByRole("treeitem", { name: "Pineapple", exact: true }).click(),
-        ]);
-    });
-
     test("should show and be able to accept/reject/rescind invites", async ({
         page,
         app,
@@ -255,8 +258,8 @@ test.describe("Sliding Sync", () => {
         // Select the room to reject
         await page.getByRole("treeitem", { name: "Room to Reject" }).click();
 
-        // Decline the invite
-        await page.locator(".mx_RoomView").getByRole("button", { name: "Decline", exact: true }).click();
+        // Reject the invite
+        await page.locator(".mx_RoomView").getByRole("button", { name: "Reject", exact: true }).click();
 
         await expect(
             page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
@@ -358,4 +361,52 @@ test.describe("Sliding Sync", () => {
         // ensure the reply-to does not disappear
         await expect(page.locator(".mx_ReplyPreview")).toBeVisible();
     });
+
+    test("should send unsubscribe_rooms for every room switch", async ({ page, app }) => {
+        // create rooms and check room names are correct
+        const roomIds: string[] = [];
+        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
+            const id = await app.client.createRoom({ name: fruit });
+            roomIds.push(id);
+            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
+        }
+        const [roomAId, roomPId, roomOId] = roomIds;
+
+        const matchRoomSubRequest = (subRoomId: string) => (request: Request) => {
+            if (!request.url().includes("/sync")) return false;
+            const body = request.postDataJSON();
+            return body.txn_id && body.room_subscriptions?.[subRoomId];
+        };
+        const matchRoomUnsubRequest = (unsubRoomId: string) => (request: Request) => {
+            if (!request.url().includes("/sync")) return false;
+            const body = request.postDataJSON();
+            return (
+                body.txn_id && body.unsubscribe_rooms?.includes(unsubRoomId) && !body.room_subscriptions?.[unsubRoomId]
+            );
+        };
+
+        // Select the Test Room and wait for playwright to get the request
+        const [request] = await Promise.all([
+            page.waitForRequest(matchRoomSubRequest(roomAId)),
+            page.getByRole("treeitem", { name: "Apple", exact: true }).click(),
+        ]);
+        const roomSubscriptions = request.postDataJSON().room_subscriptions;
+        expect(roomSubscriptions, "room_subscriptions is object").toBeDefined();
+
+        // Switch to another room and wait for playwright to get the request
+        await Promise.all([
+            page.waitForRequest(matchRoomSubRequest(roomPId)),
+            page.waitForRequest(matchRoomUnsubRequest(roomAId)),
+            page.getByRole("treeitem", { name: "Pineapple", exact: true }).click(),
+        ]);
+
+        // And switch to even another room and wait for playwright to get the request
+        await Promise.all([
+            page.waitForRequest(matchRoomSubRequest(roomOId)),
+            page.waitForRequest(matchRoomUnsubRequest(roomPId)),
+            page.getByRole("treeitem", { name: "Orange", exact: true }).click(),
+        ]);
+
+        // TODO: Add tests for encrypted rooms
+    });
 });

playwright/e2e/spaces/spaces.spec.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024,2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -35,18 +35,17 @@ function spaceCreateOptions(spaceName: string, roomIds: string[] = []): ICreateR
                     name: spaceName,
                 },
             },
-            ...roomIds.map((r) => spaceChildInitialState(r)),
+            ...roomIds.map(spaceChildInitialState),
         ],
     };
 }
 
-function spaceChildInitialState(roomId: string, order?: string): ICreateRoomOpts["initial_state"]["0"] {
+function spaceChildInitialState(roomId: string): ICreateRoomOpts["initial_state"]["0"] {
     return {
         type: "m.space.child",
         state_key: roomId,
         content: {
             via: [roomId.split(":")[1]],
-            order,
         },
     };
 }
@@ -122,10 +121,9 @@ test.describe("Spaces", () => {
         await page.getByRole("button", { name: "Skip for now" }).click();
 
         // Assert rooms exist in the room list
-        const roomList = page.getByRole("tree", { name: "Rooms" });
-        await expect(roomList.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
-        await expect(roomList.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
-        await expect(roomList.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();
+        await expect(page.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
+        await expect(page.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
+        await expect(page.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();
 
         // Assert rooms exist in the space explorer
         await expect(
@@ -157,7 +155,7 @@ test.describe("Spaces", () => {
 
         await page.getByRole("button", { name: "Just me" }).click();
 
-        await page.getByRole("checkbox", { name: "Sample Room" }).click();
+        await page.getByText("Sample Room").click({ force: true }); // force click as checkbox size is zero
 
         // Temporal implementation as multiple elements with the role "button" and name "Add" are found
         await page.locator(".mx_AddExistingToSpace_footer").getByRole("button", { name: "Add" }).click();
@@ -167,50 +165,6 @@ test.describe("Spaces", () => {
         ).toBeVisible();
     });
 
-    test(
-        "should allow user to add an existing room to a space after creation",
-        { tag: "@screenshot" },
-        async ({ page, app, user }) => {
-            await app.client.createRoom({
-                name: "Sample Room",
-            });
-            await app.client.createRoom({
-                name: "A Room that will not be selected",
-            });
-
-            const menu = await openSpaceCreateMenu(page);
-            await menu.getByRole("button", { name: "Private" }).click();
-
-            await menu
-                .locator('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
-                .setInputFiles("playwright/sample-files/riot.png");
-            await expect(menu.getByRole("textbox", { name: "Address" })).not.toBeVisible();
-            await menu
-                .getByRole("textbox", { name: "Description" })
-                .fill("This is a personal space to mourn Riot.im...");
-            await menu.getByRole("textbox", { name: "Name" }).fill("This is my Riot");
-            await menu.getByRole("textbox", { name: "Name" }).press("Enter");
-
-            await page.getByRole("button", { name: "Just me" }).click();
-
-            await page.getByRole("button", { name: "Skip for now" }).click();
-
-            await page.getByRole("button", { name: "Add room" }).click();
-            await page.getByRole("menuitem", { name: "Add existing room" }).click();
-
-            await page.getByRole("checkbox", { name: "Sample Room" }).click();
-
-            await expect(page.getByRole("dialog", { name: "Avatar Add existing rooms" })).toMatchScreenshot(
-                "add-existing-rooms-dialog.png",
-            );
-
-            await page.getByRole("button", { name: "Add" }).click();
-            await expect(
-                page.locator(".mx_SpaceHierarchy_list").getByRole("treeitem", { name: "Sample Room" }),
-            ).toBeVisible();
-        },
-    );
-
     test("should allow user to invite another to a space", { tag: "@no-webkit" }, async ({ page, app, user, bot }) => {
         await app.client.createSpace({
             visibility: "public" as any,
@@ -337,36 +291,4 @@ test.describe("Spaces", () => {
         // Assert we get shown the new room intro, and thus not the soft crash screen
         await expect(page.locator(".mx_NewRoomIntro")).toBeVisible();
     });
-
-    test("should render spaces view", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
-        axe.disableRules([
-            // Disable this check as it triggers on nested roving tab index elements which are in practice fine
-            "nested-interactive",
-            // XXX: We have some known contrast issues here
-            "color-contrast",
-        ]);
-
-        const childSpaceId1 = await app.client.createSpace({
-            name: "Child Space 1",
-            initial_state: [],
-        });
-        const childSpaceId2 = await app.client.createSpace({
-            name: "Child Space 2",
-            initial_state: [],
-        });
-        const childSpaceId3 = await app.client.createSpace({
-            name: "Child Space 3",
-            initial_state: [],
-        });
-        await app.client.createSpace({
-            name: "Root Space",
-            initial_state: [
-                spaceChildInitialState(childSpaceId1, "a"),
-                spaceChildInitialState(childSpaceId2, "b"),
-                spaceChildInitialState(childSpaceId3, "c"),
-            ],
-        });
-        await app.viewSpaceByName("Root Space");
-        await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png");
-    });
 });

playwright/e2e/timeline/timeline.spec.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -28,8 +28,6 @@ const NEW_AVATAR = fs.readFileSync("playwright/sample-files/element.png");
 const OLD_NAME = "Alan";
 const NEW_NAME = "Alan (away)";
 
-const VIDEO_FILE = fs.readFileSync("playwright/sample-files/5secvid.webm");
-
 const getEventTilesWithBodies = (page: Page): Locator => {
     return page.locator(".mx_EventTile").filter({ has: page.locator(".mx_EventTile_body") });
 };
@@ -907,39 +905,6 @@ test.describe("Timeline", () => {
                 mask: [page.locator(".mx_MessageTimestamp")],
             });
         });
-
-        test("should be able to hide an image", { tag: "@screenshot" }, async ({ page, app, room, context }) => {
-            await app.viewRoomById(room.roomId);
-            await sendImage(app.client, room.roomId, NEW_AVATAR);
-            await app.timeline.scrollToBottom();
-            const imgTile = page.locator(".mx_MImageBody").first();
-            await expect(imgTile).toBeVisible();
-            await imgTile.hover();
-            await page.getByRole("button", { name: "Hide" }).click();
-
-            // Check that the image is now hidden.
-            await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
-        });
-
-        test("should be able to hide a video", async ({ page, app, room, context }) => {
-            await app.viewRoomById(room.roomId);
-            const upload = await app.client.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
-            await app.client.sendEvent(room.roomId, null, "m.room.message" as EventType, {
-                msgtype: "m.video" as MsgType,
-                body: "bbb.webm",
-                url: upload.content_uri,
-            });
-
-            await app.timeline.scrollToBottom();
-            const imgTile = page.locator(".mx_MVideoBody").first();
-            await expect(imgTile).toBeVisible();
-            await imgTile.hover();
-            await page.getByRole("button", { name: "Hide" }).click();
-
-            // Check that the video is now hidden.
-            await expect(page.getByRole("button", { name: "Show video" })).toBeVisible();
-            await expect(page.locator("video")).not.toBeVisible();
-        });
     });
 
     test.describe("message sending", { tag: ["@no-firefox", "@no-webkit"] }, () => {
@@ -1341,44 +1306,4 @@ test.describe("Timeline", () => {
             );
         });
     });
-
-    test.describe("spoilers", { tag: "@screenshot" }, () => {
-        test("clicking a spoiler containing the pill de-spoilers on 1st click, then follows link on 2nd", async ({
-            page,
-            user,
-            app,
-            room,
-        }) => {
-            // View room
-            await page.goto(`/#/room/${room.roomId}`);
-
-            // Send a spoilered pill
-            await app.client.sendMessage(room.roomId, {
-                msgtype: "m.text",
-                body: user.userId,
-                format: "org.matrix.custom.html",
-                formatted_body: `<span data-mx-spoiler>https://matrix.to/#/${user.userId}</span>`,
-            });
-
-            const screenshotOptions = {
-                css: `
-                    .mx_MessageTimestamp {
-                        display: none !important;
-                    }
-                `,
-            };
-
-            const eventTile = page.locator(".mx_RoomView_body .mx_EventTile_last");
-            await expect(eventTile).toMatchScreenshot("spoiler.png", screenshotOptions);
-
-            const rightPanelButton = page.getByText("Share profile");
-            const pill = page.locator(".mx_UserPill");
-            await pill.click({ force: true }); // force to click the spoiler wrapper instead
-            await expect(eventTile).toMatchScreenshot("spoiler-uncovered.png", screenshotOptions);
-            await expect(rightPanelButton).not.toBeVisible(); // assert the right panel is not yet open
-
-            await pill.click();
-            await expect(rightPanelButton).toBeVisible(); // assert the right panel is open
-        });
-    });
 });

playwright/pages/ElementAppPage.ts

@@ -114,7 +114,7 @@ export class ElementAppPage {
      * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
      */
     public getComposerField(isRightPanel?: boolean): Locator {
-        return this.getComposer(isRightPanel).locator("div[contenteditable]");
+        return this.getComposer(isRightPanel).locator("[contenteditable]");
     }
 
     /**

playwright/testcontainers/synapse.ts

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
 
-const TAG = "develop@sha256:66955f34a593cfc3b6e77b8d5510c60c6094f5bade8a17d2feaefbb8662ccf09";
+const TAG = "develop@sha256:2ea87d45fc7ff3327c671b3b4447e6b2032d4f5ca07d62d8aef0d900e105c2f4";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,

res/css/_components.pcss

@@ -116,7 +116,6 @@
 @import "./views/auth/_Welcome.pcss";
 @import "./views/avatars/_BaseAvatar.pcss";
 @import "./views/avatars/_DecoratedRoomAvatar.pcss";
-@import "./views/avatars/_RoomAvatarView.pcss";
 @import "./views/avatars/_WidgetAvatar.pcss";
 @import "./views/avatars/_WithPresenceIndicator.pcss";
 @import "./views/beta/_BetaCard.pcss";
@@ -129,6 +128,7 @@
 @import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
 @import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
 @import "./views/dialogs/_BugReportDialog.pcss";
+@import "./views/dialogs/_BulkRedactDialog.pcss";
 @import "./views/dialogs/_ChangelogDialog.pcss";
 @import "./views/dialogs/_CompoundDialog.pcss";
 @import "./views/dialogs/_ConfirmSpaceUserActionDialog.pcss";
@@ -153,7 +153,6 @@
 @import "./views/dialogs/_ModalWidgetDialog.pcss";
 @import "./views/dialogs/_PollCreateDialog.pcss";
 @import "./views/dialogs/_RegistrationEmailPromptDialog.pcss";
-@import "./views/dialogs/_ReportRoomDialog.pcss";
 @import "./views/dialogs/_RoomSettingsDialog.pcss";
 @import "./views/dialogs/_RoomSettingsDialogBridges.pcss";
 @import "./views/dialogs/_RoomUpgradeDialog.pcss";
@@ -213,6 +212,7 @@
 @import "./views/elements/_ServerPicker.pcss";
 @import "./views/elements/_SettingsFlag.pcss";
 @import "./views/elements/_Spinner.pcss";
+@import "./views/elements/_StyledCheckbox.pcss";
 @import "./views/elements/_StyledRadioButton.pcss";
 @import "./views/elements/_SyntaxHighlight.pcss";
 @import "./views/elements/_TagComposer.pcss";
@@ -228,7 +228,6 @@
 @import "./views/messages/_DisambiguatedProfile.pcss";
 @import "./views/messages/_EventTileBubble.pcss";
 @import "./views/messages/_HiddenBody.pcss";
-@import "./views/messages/_HiddenMediaPlaceholder.pcss";
 @import "./views/messages/_JumpToDatePicker.pcss";
 @import "./views/messages/_LegacyCallEvent.pcss";
 @import "./views/messages/_MEmoteBody.pcss";
@@ -271,7 +270,6 @@
 @import "./views/right_panel/_VerificationPanel.pcss";
 @import "./views/right_panel/_WidgetCard.pcss";
 @import "./views/room_settings/_AliasSettings.pcss";
-@import "./views/rooms/RoomListPanel/_EmptyRoomList.pcss";
 @import "./views/rooms/RoomListPanel/_RoomList.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListHeaderView.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListItemMenuView.pcss";
@@ -341,6 +339,8 @@
 @import "./views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss";
 @import "./views/rooms/wysiwyg_composer/components/_LinkModal.pcss";
 @import "./views/settings/_AvatarSetting.pcss";
+@import "./views/settings/_CrossSigningPanel.pcss";
+@import "./views/settings/_CryptographyPanel.pcss";
 @import "./views/settings/_FontScalingPanel.pcss";
 @import "./views/settings/_ImageSizePanel.pcss";
 @import "./views/settings/_IntegrationManager.pcss";
@@ -353,6 +353,7 @@
 @import "./views/settings/_PhoneNumbers.pcss";
 @import "./views/settings/_PowerLevelSelector.pcss";
 @import "./views/settings/_RoomProfileSettings.pcss";
+@import "./views/settings/_SecureBackupPanel.pcss";
 @import "./views/settings/_SetIntegrationManager.pcss";
 @import "./views/settings/_SettingsFieldset.pcss";
 @import "./views/settings/_SettingsHeader.pcss";

res/css/components/views/elements/_FilterDropdown.pcss

@@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details.
 
         border: 1px solid $quinary-content;
         border-radius: 8px;
-        box-shadow: 0px 1px 3px rgb(23, 25, 28, 0.05);
+        box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
 
         background-color: $system;
 

res/css/components/views/location/_Marker.pcss

@@ -14,7 +14,7 @@ Please see LICENSE files in the repository root for full details.
     width: 42px;
     height: 42px;
     border-radius: 50%;
-    filter: drop-shadow(0px 3px 5px rgb(0, 0, 0, 0.2));
+    filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
     background-color: currentColor;
 
     display: flex;

res/css/components/views/location/_ZoomButtons.pcss

@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
         height: $ZoomButtons_button-size;
         width: $ZoomButtons_button-size;
         background: $background;
-        box-shadow: 0px 4px 12px rgb(0, 0, 0, 0.25);
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
 
         .mx_ZoomButtons_icon {
             $ZoomButtons_icon-size: 12px;

res/css/components/views/pips/_WidgetPip.pcss

@@ -48,7 +48,7 @@ $height: 220px;
     display: flex;
     font-size: $font-12px;
     font-weight: var(--cpd-font-weight-semibold);
-    background: linear-gradient(rgb(0, 0, 0, 0.9), rgb(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
 }
 
 .mx_WidgetPip_backButton {
@@ -69,5 +69,5 @@ $height: 220px;
     display: flex;
     justify-content: flex-end;
     align-items: flex-end;
-    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.9));
+    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
 }

res/css/components/views/settings/devices/_SelectableDeviceTile.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024,2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -16,9 +16,9 @@ Please see LICENSE files in the repository root for full details.
 .mx_SelectableDeviceTile_checkbox {
     flex: 1 0;
 
-    > div {
-        margin-top: auto;
-        margin-bottom: auto;
-        margin-right: var(--cpd-space-1x);
+    .mx_Checkbox_background + div {
+        flex: 1 0;
+        /* override more specific selector */
+        margin-left: $spacing-16 !important;
     }
 }

res/css/structures/_ContextualMenu.pcss

@@ -23,7 +23,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_ContextualMenu {
     border-radius: 12px;
-    box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
+    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
     background-color: var(--cpd-color-bg-canvas-default);
     border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
     color: $primary-content;

res/css/structures/_GenericDropdownMenu.pcss

@@ -41,7 +41,7 @@ Please see LICENSE files in the repository root for full details.
         padding-bottom: 10px;
 
         border: 1px solid $quinary-content;
-        box-shadow: 0 1px 3px rgb(23, 25, 28, 0.05);
+        box-shadow: 0 1px 3px rgba(23, 25, 28, 0.05);
     }
 
     .mx_ContextualMenu_chevron_top {

res/css/structures/_QuickSettingsButton.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024,2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -70,26 +70,38 @@ Please see LICENSE files in the repository root for full details.
         text-transform: uppercase;
         color: var(--cpd-color-text-secondary);
         margin: 20px 0 12px;
+    }
+
+    .mx_QuickSettingsButton_pinToSidebarHeading {
+        padding-left: 24px;
         position: relative;
-        display: flex;
+    }
+
+    .mx_Checkbox {
+        margin-bottom: 8px;
+    }
+
+    .mx_QuickSettingsButton_favouritesCheckbox,
+    .mx_QuickSettingsButton_peopleCheckbox {
+        .mx_Checkbox_background + div {
+            padding-left: 22px;
+            position: relative;
+            margin-left: 6px;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: var(--cpd-color-text-primary);
+        }
     }
 
     .mx_QuickSettingsButton_moreOptionsButton {
-        margin-left: var(--cpd-space-7x);
+        padding-left: 22px;
+        margin-left: 22px;
         font-size: $font-15px;
         line-height: $font-24px;
         color: var(--cpd-color-text-primary);
         position: relative;
         margin-bottom: 16px;
     }
-
-    .mx_QuickSettingsButton_option {
-        margin-bottom: var(--cpd-space-3x);
-        label {
-            /* Correctly line up icons and text. */
-            display: flex;
-        }
-    }
 }
 
 .mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
@@ -99,10 +111,15 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_QuickSettingsButton_icon {
-    margin-right: var(--cpd-space-1x);
+    // TODO remove when all icons have fill=currentColor
+    * {
+        fill: $secondary-content;
+    }
     color: $secondary-content;
-    width: 18px;
-    height: 18px;
-    margin-top: auto;
-    margin-bottom: auto;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
 }

res/css/structures/_SpaceHierarchy.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024,2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -247,6 +247,15 @@ Please see LICENSE files in the repository root for full details.
                     .mx_AccessibleButton_kind_primary_outline {
                         padding: 3px 16px; /* to account for the 1px border */
                     }
+
+                    .mx_Checkbox {
+                        display: inline-flex;
+
+                        label {
+                            width: 16px;
+                            height: 16px;
+                        }
+                    }
                 }
 
                 &:hover,
@@ -293,7 +302,7 @@ Please see LICENSE files in the repository root for full details.
     > hr {
         border: none;
         height: 1px;
-        background-color: rgb(141, 151, 165, 0.2);
+        background-color: rgba(141, 151, 165, 0.2);
         margin: 20px 0;
     }
 

res/css/structures/_SpacePanel.pcss

@@ -352,9 +352,9 @@ Please see LICENSE files in the repository root for full details.
             mask-image: linear-gradient(
                 to top,
                 transparent,
-                rgb(255, 255, 255, 30%) 4px,
-                rgb(255, 255, 255, 55%) 8px,
-                rgb(255, 255, 255, 75%) 12px,
+                rgba(255, 255, 255, 30%) 4px,
+                rgba(255, 255, 255, 55%) 8px,
+                rgba(255, 255, 255, 75%) 12px,
                 black 16px
             );
         }
@@ -370,9 +370,9 @@ Please see LICENSE files in the repository root for full details.
                 linear-gradient(
                     to top,
                     transparent,
-                    rgb(255, 255, 255, 30%) 4px,
-                    rgb(255, 255, 255, 55%) 8px,
-                    rgb(255, 255, 255, 75%) 12px,
+                    rgba(255, 255, 255, 30%) 4px,
+                    rgba(255, 255, 255, 55%) 8px,
+                    rgba(255, 255, 255, 75%) 12px,
                     black 16px
                 );
             mask-position:

res/css/structures/_SplashPage.pcss

@@ -19,12 +19,12 @@ Please see LICENSE files in the repository root for full details.
         background-image:
             radial-gradient(
                 53.85% 66.75% at 87.55% 0%,
-                hsl(250deg, 76%, 71%, 0.261) 0%,
-                hsl(250deg, 100%, 88%, 0) 100%
+                hsla(250deg, 76%, 71%, 0.261) 0%,
+                hsla(250deg, 100%, 88%, 0) 100%
             ),
-            radial-gradient(41.93% 41.93% at 0% 0%, hsl(222deg, 29%, 20%, 0.28) 0%, hsl(250deg, 100%, 88%, 0) 100%),
-            radial-gradient(100% 100% at 0% 0%, hsl(250deg, 100%, 88%, 0.174) 0%, hsl(0deg, 100%, 86%, 0) 100%),
-            radial-gradient(106.35% 96.26% at 100% 0%, hsl(250deg, 100%, 88%, 0.4) 0%, hsl(167deg, 76%, 82%, 0) 100%);
+            radial-gradient(41.93% 41.93% at 0% 0%, hsla(222deg, 29%, 20%, 0.28) 0%, hsla(250deg, 100%, 88%, 0) 100%),
+            radial-gradient(100% 100% at 0% 0%, hsla(250deg, 100%, 88%, 0.174) 0%, hsla(0deg, 100%, 86%, 0) 100%),
+            radial-gradient(106.35% 96.26% at 100% 0%, hsla(250deg, 100%, 88%, 0.4) 0%, hsla(167deg, 76%, 82%, 0) 100%);
         /* blur to reduce color banding issues due to alpha-blending multiple gradients */
         filter: blur(8px);
         inset: -9px;
@@ -34,8 +34,8 @@ Please see LICENSE files in the repository root for full details.
             /* gradient to apply different amounts of dithering to different parts of the gradient */
                 linear-gradient(
                     to bottom,
-                    /* 10% dithering at the top */ rgb(0, 0, 0, 0.9) 20%,
-                    /* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100%
+                    /* 10% dithering at the top */ rgba(0, 0, 0, 0.9) 20%,
+                    /* 80% dithering at the bottom */ rgba(0, 0, 0, 0.2) 100%
                 );
     }
 }

res/css/structures/_ToastContainer.pcss

@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
         grid-row: 2 / 4;
         grid-column: 1;
         background-color: $system;
-        box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.5);
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
     }
 
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
         grid-column: 1;
         background-color: var(--cpd-color-bg-canvas-default);
         color: $primary-content;
-        box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
+        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
         border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
         border-radius: 12px;
         overflow: hidden;

res/css/structures/auth/_Registration.pcss

@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
     justify-content: space-between;
     padding-top: 16px;
     margin-top: 16px;
-    border-top: 1px solid rgb(141, 151, 165, 0.2);
+    border-top: 1px solid rgba(141, 151, 165, 0.2);
 
     > * {
         flex-basis: content;

res/css/views/auth/_AuthFooter.pcss

@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
     font: var(--cpd-font-body-md-regular);
     opacity: 0.72;
     padding: 20px 0;
-    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.8));
+    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
 }
 
 .mx_AuthFooter a:link,

res/css/views/auth/_AuthPage.pcss

@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     margin: 100px auto auto;
     border-radius: 4px;
-    box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
     background-color: $authpage-modal-bg-color;
 
     @media only screen and (max-height: 768px) {

res/css/views/avatars/_RoomAvatarView.pcss

@@ -1,48 +0,0 @@
-/*
- * Copyright 2025 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-.mx_RoomAvatarView {
-    --room-avatar-size: 32px;
-
-    position: relative;
-
-    /* Keep the container to the same size than the avatar */
-    inline-size: var(--room-avatar-size);
-    block-size: var(--room-avatar-size);
-
-    .mx_RoomAvatarView_RoomAvatar {
-        mask-position: center;
-        mask-size: contain;
-        mask-repeat: no-repeat;
-    }
-
-    .mx_RoomAvatarView_RoomAvatar_icon {
-        mask-image: url("$(res)/img/element-icons/roomlist/room-avatar-view-icon-mask.svg");
-    }
-
-    .mx_RoomAvatarView_RoomAvatar_presence {
-        mask-image: url("$(res)/img/element-icons/roomlist/room-avatar-view-presence-mask.svg");
-    }
-
-    .mx_RoomAvatarView_icon {
-        position: absolute;
-
-        /* Place half the icon inside the avatar */
-        /* Avatar size - (icon size (16px) / 2) */
-        left: calc((var(--room-avatar-size) - 8px));
-        bottom: var(--cpd-space-0-5x);
-    }
-
-    .mx_RoomAvatarView_PresenceDecoration {
-        position: absolute;
-
-        /* Place half the icon inside the avatar */
-        /* Avatar size - (icon size (8px) / 2) */
-        left: calc((var(--room-avatar-size) - 4px));
-        bottom: var(--cpd-space-0-5x);
-    }
-}

res/css/views/dialogs/_AddExistingToSpaceDialog.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024,2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -32,11 +32,6 @@ Please see LICENSE files in the repository root for full details.
     .mx_AddExistingToSpace_section {
         margin-right: 12px;
 
-        ul {
-            list-style: none;
-            padding-left: 0;
-        }
-
         // provides space for scrollbar so that checkbox and scrollbar do not collide
 
         &:not(:first-child) {
@@ -219,12 +214,6 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     margin-top: 12px;
 
-    form {
-        /* Align checkboxes. */
-        margin-top: auto;
-        margin-bottom: auto;
-    }
-
     .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
         margin-right: 12px;
     }
@@ -238,4 +227,8 @@ Please see LICENSE files in the repository root for full details.
         text-overflow: ellipsis;
         margin-right: 12px;
     }
+
+    .mx_Checkbox {
+        align-items: center;
+    }
 }

res/css/views/dialogs/_BulkRedactDialog.pcss

@@ -0,0 +1,19 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Robin Townsend <robin@robin.town>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_BulkRedactDialog {
+    .mx_Checkbox,
+    .mx_BulkRedactDialog_checkboxMicrocopy {
+        line-height: $font-20px;
+    }
+
+    .mx_BulkRedactDialog_checkboxMicrocopy {
+        margin-left: 26px;
+        color: $secondary-content;
+    }
+}

res/css/views/dialogs/_CompoundDialog.pcss

@@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details.
     max-height: 80%;
 
     .mx_CompoundDialog_footer {
-        box-shadow: 0px -4px 4px rgb(0, 0, 0, 0.05); /* hardcoded colour for both themes */
+        box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */
         z-index: 1; /* needed to make footer & shadow appear above dialog content */
     }
 }