lint

Pass the freshLogin parameter along to doSetLoggedIn when restoring a session,
instead of hard-coding it to always be false.

.eslintignore

@@ -7,3 +7,7 @@ test/end-to-end-tests/lib/
 src/component-index.js
 # Auto-generated file
 src/modules.ts
+src/modules.js
+# Test result files
+/playwright/test-results/
+/playwright/html-report/

.eslintrc.js

@@ -30,6 +30,10 @@ module.exports = {
                 ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
                 "Use UIStore to access window dimensions instead.",
             ),
+            ...buildRestrictedPropertiesOptions(
+                ["React.forwardRef", "*.forwardRef", "forwardRef"],
+                "Use ref props instead.",
+            ),
             ...buildRestrictedPropertiesOptions(
                 ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
                 "Use Media helper instead to centralise access for customisation.",
@@ -55,6 +59,11 @@ module.exports = {
             "error",
             {
                 paths: [
+                    {
+                        name: "react",
+                        importNames: ["forwardRef"],
+                        message: "Use ref props instead.",
+                    },
                     {
                         name: "@testing-library/react",
                         message: "Please use jest-matrix-react instead",
@@ -200,8 +209,13 @@ module.exports = {
                 "@typescript-eslint/ban-ts-comment": "off",
                 // We're okay with assertion errors when we ask for them
                 "@typescript-eslint/no-non-null-assertion": "off",
-                // We do this sometimes to brand interfaces
-                "@typescript-eslint/no-empty-object-type": "off",
+                "@typescript-eslint/no-empty-object-type": [
+                    "error",
+                    {
+                        // We do this sometimes to brand interfaces
+                        allowInterfaces: "with-single-extends",
+                    },
+                ],
             },
         },
         // temporary override for offending icon require files
@@ -247,6 +261,7 @@ module.exports = {
                 // We don't need super strict typing in test utilities
                 "@typescript-eslint/explicit-function-return-type": "off",
                 "@typescript-eslint/explicit-member-accessibility": "off",
+                "@typescript-eslint/no-empty-object-type": "off",
 
                 // Jest/Playwright specific
 

.github/CODEOWNERS

@@ -10,10 +10,12 @@
 /test/components/views/dialogs/security/                                @element-hq/element-crypto-web-reviewers
 /src/stores/SetupEncryptionStore.ts                                     @element-hq/element-crypto-web-reviewers
 /test/stores/SetupEncryptionStore-test.ts                               @element-hq/element-crypto-web-reviewers
-/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx   @element-hq/element-crypto-web-reviewers
-/src/src/components/views/settings/encryption/                          @element-hq/element-crypto-web-reviewers
+/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx  @element-hq/element-crypto-web-reviewers
+/src/components/views/settings/encryption/                              @element-hq/element-crypto-web-reviewers
 /test/unit-tests/components/views/settings/encryption/                  @element-hq/element-crypto-web-reviewers
-/playwright/e2e/settings/encryption-user-tab/                            @element-hq/element-crypto-web-reviewers
+/src/components/views/dialogs/devtools/Crypto.tsx                       @element-hq/element-crypto-web-reviewers
+/playwright/e2e/crypto/                                                 @element-hq/element-crypto-web-reviewers
+/playwright/e2e/settings/encryption-user-tab/                           @element-hq/element-crypto-web-reviewers
 
 # Ignore translations as those will be updated by GHA for Localazy download
 /src/i18n/strings

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

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

.github/workflows/build.yml

@@ -43,9 +43,9 @@ jobs:
             run:
                 shell: bash
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   # Disable cache on Windows as it is slower than not caching
                   # https://github.com/actions/setup-node/issues/975
@@ -77,7 +77,7 @@ jobs:
                   yarn build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: webapp-${{ matrix.image }}
                   path: webapp

.github/workflows/build_debian.yaml

@@ -14,7 +14,7 @@ jobs:
             R2_URL: ${{ vars.CF_R2_S3_API }}
             VERSION: ${{ github.ref_name }}
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - name: Download package
               run: |
@@ -62,7 +62,7 @@ jobs:
                   dpkg-gencontrol -v"$VERSION" -ldebian/tmp/DEBIAN/changelog
                   dpkg-deb -Zxz --root-owner-group --build debian/tmp element-web.deb
 
-            - uses: actions/upload-artifact@v4
+            - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: element-web.deb
                   path: element-web.deb

.github/workflows/build_develop.yml

@@ -26,9 +26,9 @@ jobs:
             R2_URL: ${{ vars.CF_R2_S3_API }}
             R2_PUBLIC_URL: "https://element-web-develop.element.io"
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -53,7 +53,7 @@ jobs:
 
             - run: mv dist/element-*.tar.gz dist/develop.tar.gz
 
-            - uses: actions/upload-artifact@v4
+            - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: webapp
                   path: dist/develop.tar.gz
@@ -109,10 +109,11 @@ 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
-                  aws s3 cp _deploy/ s3://$R2_BUCKET/ --recursive --endpoint-url $R2_URL --region=auto
+                  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
               env:
                   AWS_ACCESS_KEY_ID: ${{ secrets.CF_R2_ACCESS_KEY_ID }}
                   AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_R2_TOKEN }}

.github/workflows/deploy.yml

@@ -34,7 +34,7 @@ jobs:
         env:
             SITE: ${{ inputs.site || 'staging.element.io' }}
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - name: Load GPG key
               run: |
@@ -96,3 +96,4 @@ jobs:
                   projectName: ${{ env.SITE == 'staging.element.io' && 'element-web-staging' || 'element-web' }}
                   directory: _deploy
                   gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+                  branch: main

.github/workflows/docker.yaml

@@ -0,0 +1,141 @@
+name: Docker
+on:
+    workflow_dispatch: {}
+    push:
+        tags: [v*]
+    pull_request: {}
+    schedule:
+        # This job can take a while, and we have usage limits, so just publish develop only twice a day
+        - cron: "0 7/12 * * *"
+concurrency: ${{ github.workflow }}-${{ github.ref_name }}
+permissions: {}
+jobs:
+    buildx:
+        name: Docker Buildx
+        runs-on: ubuntu-24.04
+        environment: ${{ github.event_name != 'pull_request' && 'dockerhub' || '' }}
+        permissions:
+            id-token: write # needed for signing the images with GitHub OIDC Token
+            packages: write # needed for publishing packages to GHCR
+        env:
+            TEST_TAG: vectorim/element-web:test
+        steps:
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+              with:
+                  fetch-depth: 0 # needed for docker-package to be able to calculate the version
+
+            - name: Install Cosign
+              uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # v3
+              if: github.event_name != 'pull_request'
+
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3
+
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3
+              with:
+                  install: true
+
+            - name: Login to Docker Hub
+              uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # 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
+              if: github.event_name != 'pull_request'
+              with:
+                  registry: ghcr.io
+                  username: ${{ github.repository_owner }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Build and load
+              id: test-build
+              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+              with:
+                  context: .
+                  load: true
+
+            - name: Test the image
+              env:
+                  IMAGEID: ${{ steps.test-build.outputs.imageid }}
+              timeout-minutes: 2
+              run: |
+                  set -x
+
+                  # Make a fake module to test the image
+                  MODULE_PATH="modules/module_name/index.js"
+                  mkdir -p $(dirname $MODULE_PATH)
+                  echo 'alert("Testing");' > $MODULE_PATH
+
+                  # Spin up a container of the image
+                  ELEMENT_WEB_PORT=8181
+                  CONTAINER_ID=$(
+                      docker run \
+                          --rm \
+                          -e "ELEMENT_WEB_PORT=$ELEMENT_WEB_PORT" \
+                          -dp "$ELEMENT_WEB_PORT:$ELEMENT_WEB_PORT" \
+                          -v $(pwd)/modules:/modules \
+                          "$IMAGEID" \
+                  )
+
+                  # Run some smoke tests
+                  wget --retry-connrefused --tries=5 -q --wait=3 --spider "http://localhost:$ELEMENT_WEB_PORT/modules/module_name/index.js"
+                  MODULE_0=$(curl "http://localhost:$ELEMENT_WEB_PORT/config.json" | jq -r .modules[0])
+                  test "$MODULE_0" = "/${MODULE_PATH}"
+
+                  # Check healthcheck
+                  until test "$(docker inspect -f {{.State.Health.Status}} $CONTAINER_ID)" == "healthy"; do
+                      sleep 1
+                  done
+
+                  # Clean up
+                  docker stop "$CONTAINER_ID"
+
+            - name: Docker meta
+              id: meta
+              uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5
+              if: github.event_name != 'pull_request'
+              with:
+                  images: |
+                      vectorim/element-web
+                      ghcr.io/element-hq/element-web
+                  tags: |
+                      type=ref,event=branch
+                      type=ref,event=tag
+                  flavor: |
+                      latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
+
+            - name: Build and push
+              id: build-and-push
+              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+              if: github.event_name != 'pull_request'
+              with:
+                  context: .
+                  push: true
+                  platforms: linux/amd64,linux/arm64
+                  tags: ${{ steps.meta.outputs.tags }}
+                  labels: ${{ steps.meta.outputs.labels }}
+
+            - name: Sign the images with GitHub OIDC Token
+              env:
+                  DIGEST: ${{ steps.build-and-push.outputs.digest }}
+                  TAGS: ${{ steps.meta.outputs.tags }}
+              if: github.event_name != 'pull_request'
+              run: |
+                  images=""
+                  for tag in ${TAGS}; do
+                      images+="${tag}@${DIGEST} "
+                  done
+                  cosign sign --yes ${images}
+
+            - name: Update repo description
+              uses: peter-evans/dockerhub-description@432a30c9e07499fd01da9f8a49f0faf9e0ca5b77 # v4
+              if: github.event_name != 'pull_request'
+              continue-on-error: true
+              with:
+                  username: ${{ secrets.DOCKERHUB_USERNAME }}
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
+                  repository: vectorim/element-web

.github/workflows/dockerhub.yaml

@@ -1,79 +0,0 @@
-name: Dockerhub
-on:
-    workflow_dispatch: {}
-    push:
-        tags: [v*]
-    schedule:
-        # This job can take a while, and we have usage limits, so just publish develop only twice a day
-        - cron: "0 7/12 * * *"
-concurrency: ${{ github.workflow }}-${{ github.ref_name }}
-permissions: {}
-jobs:
-    buildx:
-        name: Docker Buildx
-        runs-on: ubuntu-24.04
-        environment: dockerhub
-        permissions:
-            id-token: write # needed for signing the images with GitHub OIDC Token
-        steps:
-            - uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0 # needed for docker-package to be able to calculate the version
-
-            - name: Install Cosign
-              uses: sigstore/cosign-installer@dc72c7d5c4d10cd6bcb8cf6e3fd625a9e5e537da # v3
-
-            - name: Set up QEMU
-              uses: docker/setup-qemu-action@53851d14592bedcffcf25ea515637cff71ef929a # v3
-
-            - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@6524bf65af31da8d45b59e8c27de4bd072b392f5 # v3
-              with:
-                  install: true
-
-            - name: Login to Docker Hub
-              uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
-              with:
-                  username: ${{ secrets.DOCKERHUB_USERNAME }}
-                  password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-            - name: Docker meta
-              id: meta
-              uses: docker/metadata-action@369eb591f429131d6889c46b94e711f089e6ca96 # v5
-              with:
-                  images: |
-                      vectorim/element-web
-                  tags: |
-                      type=ref,event=branch
-                      type=ref,event=tag
-                  flavor: |
-                      latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
-
-            - name: Build and push
-              id: build-and-push
-              uses: docker/build-push-action@b32b51a8eda65d6793cd0494a773d4f6bcef32dc # v6
-              with:
-                  context: .
-                  push: true
-                  platforms: linux/amd64,linux/arm64
-                  tags: ${{ steps.meta.outputs.tags }}
-                  labels: ${{ steps.meta.outputs.labels }}
-
-            - name: Sign the images with GitHub OIDC Token
-              env:
-                  DIGEST: ${{ steps.build-and-push.outputs.digest }}
-                  TAGS: ${{ steps.meta.outputs.tags }}
-              run: |
-                  images=""
-                  for tag in ${TAGS}; do
-                      images+="${tag}@${DIGEST} "
-                  done
-                  cosign sign --yes ${images}
-
-            - name: Update repo description
-              uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
-              continue-on-error: true
-              with:
-                  username: ${{ secrets.DOCKERHUB_USERNAME }}
-                  password: ${{ secrets.DOCKERHUB_TOKEN }}
-                  repository: vectorim/element-web

.github/workflows/docs.yml

@@ -17,23 +17,23 @@ jobs:
         runs-on: ubuntu-24.04
         steps:
             - name: Fetch element-desktop
-              uses: actions/checkout@v4
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   repository: element-hq/element-desktop
                   path: element-desktop
 
             - name: Fetch element-web
-              uses: actions/checkout@v4
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   path: element-web
 
             - name: Fetch matrix-js-sdk
-              uses: actions/checkout@v4
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   repository: matrix-org/matrix-js-sdk
                   path: matrix-js-sdk
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   cache-dependency-path: element-web/yarn.lock
@@ -47,7 +47,7 @@ jobs:
                   echo "-   [Automations](automations.md)" >> docs/SUMMARY.md
 
             - name: Setup mdBook
-              uses: peaceiris/actions-mdbook@v2
+              uses: peaceiris/actions-mdbook@ee69d230fe19748b7abf22df32acaa93833fad08 # v2
               with:
                   mdbook-version: "0.4.10"
 
@@ -88,7 +88,7 @@ jobs:
               run: mdbook build
 
             - name: Upload artifact
-              uses: actions/upload-pages-artifact@v3
+              uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
               with:
                   path: ./book
 
@@ -104,4 +104,4 @@ jobs:
         steps:
             - name: Deploy to GitHub Pages
               id: deployment
-              uses: actions/deploy-pages@v4
+              uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4

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

@@ -25,7 +25,7 @@ jobs:
             actions: read
         steps:
             - name: Download HTML report
-              uses: actions/download-artifact@v4
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}
@@ -33,7 +33,7 @@ jobs:
                   path: playwright-report
 
             - name: 📤 Deploy to Netlify
-              uses: matrix-org/netlify-pr-preview@v3
+              uses: matrix-org/netlify-pr-preview@9805cd123fc9a7e421e35340a05e1ebc5dee46b5 # v3
               with:
                   path: playwright-report
                   owner: ${{ github.event.workflow_run.head_repository.owner.login }}

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

@@ -50,11 +50,11 @@ jobs:
             runners-matrix: ${{ steps.runner-vars.outputs.matrix }}
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -81,7 +81,7 @@ jobs:
                   yarn build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: webapp
                   path: webapp
@@ -89,7 +89,7 @@ jobs:
 
             - name: Calculate runner variables
               id: runner-vars
-              uses: actions/github-script@v7
+              uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
               with:
                   script: |
                       const numRunners = parseInt(process.env.NUM_RUNNERS, 10);
@@ -129,18 +129,18 @@ jobs:
                     - runAllTests: false
                       project: Pinecone
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@v4
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
               with:
                   name: webapp
                   path: webapp
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   cache-dependency-path: yarn.lock
@@ -154,12 +154,11 @@ jobs:
               run: echo "version=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_OUTPUT
 
             - name: Cache playwright binaries
-              uses: actions/cache@v4
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
               id: playwright-cache
               with:
-                  path: |
-                      ~/.cache/ms-playwright
-                  key: ${{ runner.os }}-playwright-${{ steps.playwright.outputs.version }}
+                  path: ~/.cache/ms-playwright
+                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}
 
             - name: Install Playwright browsers
               if: steps.playwright-cache.outputs.cache-hit != 'true'
@@ -180,25 +179,35 @@ jobs:
 
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: all-blob-reports-${{ matrix.project }}-${{ matrix.runner }}
                   path: blob-report
                   retention-days: 1
 
+    downstream-modules:
+        name: Downstream Playwright tests [element-modules]
+        needs: build
+        if: inputs.skip != true && github.event_name == 'merge_group'
+        uses: element-hq/element-modules/.github/workflows/reusable-playwright-tests.yml@main
+        with:
+            webapp-artifact: webapp
+
     complete:
         name: end-to-end-tests
-        needs: playwright
+        needs:
+            - playwright
+            - downstream-modules
         if: always()
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               if: inputs.skip != true
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               if: inputs.skip != true
               with:
                   cache: "yarn"
@@ -210,7 +219,7 @@ jobs:
 
             - name: Download blob reports from GitHub Actions Artifacts
               if: inputs.skip != true
-              uses: actions/download-artifact@v4
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
               with:
                   pattern: all-blob-reports-*
                   path: all-blob-reports
@@ -226,11 +235,11 @@ jobs:
             # 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
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: html-report
                   path: playwright-report
                   retention-days: 14
 
-            - if: needs.playwright.result != 'skipped' && needs.playwright.result != 'success'
+            - if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')
               run: exit 1

.github/workflows/issue_closed.yml

@@ -10,7 +10,7 @@ jobs:
         name: Tidy closed issues
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/github-script@v7
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
               id: main
               with:
                   # PAT needed as the GITHUB_TOKEN won't be able to see cross-references from other orgs (matrix-org)
@@ -142,7 +142,7 @@ jobs:
                           });
                         }
                       }
-            - uses: actions/github-script@v7
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
               name: Close duplicate as Not Planned
               if: steps.main.outputs.closeAsNotPlanned
               with:

.github/workflows/netlify.yaml

@@ -28,7 +28,7 @@ jobs:
                       Exercise caution. Use test accounts.
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@v4
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}
@@ -36,7 +36,7 @@ jobs:
                   path: webapp
 
             - name: 📤 Deploy to Netlify
-              uses: matrix-org/netlify-pr-preview@v3
+              uses: matrix-org/netlify-pr-preview@9805cd123fc9a7e421e35340a05e1ebc5dee46b5 # v3
               with:
                   path: webapp
                   owner: ${{ github.event.workflow_run.head_repository.owner.login }}

.github/workflows/pending-reviews.yaml

@@ -16,7 +16,7 @@ jobs:
             URL: "https://github.com/pulls?q=is%3Apr+is%3Aopen+repo%3Amatrix-org%2Fmatrix-js-sdk+repo%3Amatrix-org%2Fmatrix-react-sdk+repo%3Aelement-hq%2Felement-web+repo%3Aelement-hq%2Felement-desktop+review-requested%3A%40me+sort%3Aupdated-desc+"
             RELEASE_BLOCKERS_URL: "https://github.com/pulls?q=is%3Aopen+repo%3Amatrix-org%2Fmatrix-js-sdk+repo%3Amatrix-org%2Fmatrix-react-sdk+repo%3Aelement-hq%2Felement-web+repo%3Aelement-hq%2Felement-desktop+sort%3Aupdated-desc+label%3AX-Release-Blocker+"
         steps:
-            - uses: actions/github-script@v7
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
               env:
                   HS_URL: ${{ secrets.BETABOT_HS_URL }}
                   ROOM_ID: ${{ secrets.ROOM_ID }}

.github/workflows/playwright-image-updates.yaml

@@ -10,7 +10,7 @@ jobs:
         permissions:
             pull-requests: write
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - name: Update synapse image
               run: |
@@ -23,7 +23,7 @@ jobs:
 
             - name: Create Pull Request
               id: cpr
-              uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7
+              uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/playwright-image-updates

.github/workflows/pull_request_base_branch.yaml

@@ -8,7 +8,7 @@ jobs:
         name: Check PR base branch
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/github-script@v7
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
               with:
                   script: |
                       const baseBranch = context.payload.pull_request.base.ref;

.github/workflows/release.yml

@@ -19,6 +19,7 @@ jobs:
             contents: write
             issues: write
             pull-requests: read
+            id-token: write
         secrets:
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
             GPG_PRIVATE_KEY: ${{ secrets.GPG_PRIVATE_KEY }}
@@ -50,7 +51,7 @@ jobs:
         permissions:
             checks: read
         steps:
-            - name: Wait for dockerhub
+            - name: Wait for docker build
               uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
               with:
                   ref: master

.github/workflows/release_prepare.yml

@@ -41,7 +41,7 @@ jobs:
             REPOS: matrix-js-sdk element-web element-desktop
         steps:
             - name: Checkout Element Desktop
-              uses: actions/checkout@v4
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               if: inputs.element-desktop
               with:
                   repository: element-hq/element-desktop
@@ -51,7 +51,7 @@ jobs:
                   fetch-tags: true
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
             - name: Checkout Element Web
-              uses: actions/checkout@v4
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               if: inputs.element-web
               with:
                   repository: element-hq/element-web
@@ -61,7 +61,7 @@ jobs:
                   fetch-tags: true
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
             - name: Checkout Matrix JS SDK
-              uses: actions/checkout@v4
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               if: inputs.matrix-js-sdk
               with:
                   repository: matrix-org/matrix-js-sdk
@@ -100,7 +100,7 @@ jobs:
                   repo: matrix-org/matrix-js-sdk
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: draft
+                  check-name: "draft / 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
+                  check-name: "draft / 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
+                  check-name: "draft / draft"
                   allowed-conclusions: success

.github/workflows/static_analysis.yaml

@@ -23,9 +23,9 @@ jobs:
         name: "Typescript Syntax Check"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -51,12 +51,13 @@ jobs:
                 error|invalid_json
                 error|misconfigured
                 welcome_to_element
+                devtools|settings|elementCallUrl
 
     rethemendex_lint:
         name: "Rethemendex Check"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - run: ./res/css/rethemendex.sh
 
@@ -66,9 +67,9 @@ jobs:
         name: "ESLint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -84,9 +85,9 @@ jobs:
         name: "Style Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -102,9 +103,9 @@ jobs:
         name: "Workflow Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -120,9 +121,9 @@ jobs:
         name: "Analyse Dead Code"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.github/workflows/tests.yml

@@ -39,12 +39,12 @@ jobs:
                 runner: [1, 2]
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}
 
             - name: Yarn cache
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: "lts/*"
                   cache: "yarn"
@@ -55,7 +55,7 @@ jobs:
                   JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
 
             - name: Jest Cache
-              uses: actions/cache@v4
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
               with:
                   path: /tmp/jest_cache
                   key: ${{ hashFiles('**/yarn.lock') }}
@@ -84,7 +84,7 @@ jobs:
 
             - name: Upload Artifact
               if: env.ENABLE_COVERAGE == 'true'
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: coverage-${{ matrix.runner }}
                   path: |
@@ -104,7 +104,7 @@ jobs:
 
             - name: Skip SonarCloud in merge queue
               if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@56cd38caf0615dd03f49d42ed301f1469911ac61
+              uses: guibranco/github-status-action-v2@5f2b01ce1394109f70954ae6b69ef41cf7928e63
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success

.github/workflows/triage-assigned.yml

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

.github/workflows/triage-labelled.yml

@@ -27,7 +27,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'A-Rich-Text-Editor') ||
             contains(github.event.issue.labels.*.name, 'A-Element-Call')
         steps:
-            - uses: actions/github-script@v7
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
               with:
                   script: |
                       github.rest.issues.addLabels({
@@ -44,7 +44,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'good first issue') ||
             contains(github.event.issue.labels.*.name, 'Hacktoberfest')
         steps:
-            - uses: actions/github-script@v7
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
               with:
                   script: |
                       github.rest.issues.addLabels({
@@ -61,7 +61,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'X-Needs-Info')
         steps:
             - id: add_to_project
-              uses: actions/add-to-project@v1.0.2
+              uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: ${{ env.PROJECT_URL }}
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -84,7 +84,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'Z-Flaky-Test')
         steps:
             - id: add_to_project
-              uses: actions/add-to-project@v1.0.2
+              uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: ${{ env.PROJECT_URL }}
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -150,15 +150,15 @@ jobs:
                   project-url: https://github.com/orgs/element-hq/projects/41
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
 
-    verticals_feature:
-        name: Add labelled issues to Verticals Feature project
+    crypto:
+        name: Add labelled issues to Crypto project
         runs-on: ubuntu-24.04
         if: >
-            contains(github.event.issue.labels.*.name, 'Team: Verticals Feature')
+            contains(github.event.issue.labels.*.name, 'Team: Crypto')
         steps:
             - uses: actions/add-to-project@main
               with:
-                  project-url: https://github.com/orgs/element-hq/projects/57
+                  project-url: https://github.com/orgs/element-hq/projects/76
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
 
     tech_debt:

.github/workflows/triage-stale-flaky-tests.yml

@@ -1,21 +0,0 @@
-name: Close stale flaky issues
-on:
-    workflow_dispatch: {}
-    schedule:
-        - cron: "30 1 * * *"
-permissions: {}
-jobs:
-    close:
-        runs-on: ubuntu-24.04
-        permissions:
-            actions: write
-            issues: write
-        steps:
-            - uses: actions/stale@v9
-              with:
-                  only-labels: "Z-Flaky-Test"
-                  days-before-stale: 14
-                  days-before-close: 0
-                  close-issue-message: "This flaky test issue has not been updated in 14 days. It is being closed as presumed resolved."
-                  exempt-issue-labels: "Z-Flaky-Test-Disabled"
-                  operations-per-run: 100

.github/workflows/triage-stale.yml

@@ -0,0 +1,27 @@
+name: Close stale issues & PRs
+on:
+    workflow_dispatch: {}
+    schedule:
+        - cron: "30 1 * * *"
+permissions: {}
+jobs:
+    close:
+        runs-on: ubuntu-24.04
+        permissions:
+            actions: write
+            issues: write
+            pull-requests: write
+        steps:
+            - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9
+              with:
+                  operations-per-run: 100
+                  # Flaky test issue closing
+                  only-issue-labels: "Z-Flaky-Test"
+                  days-before-issue-stale: 14
+                  days-before-issue-close: 0
+                  close-issue-message: "This flaky test issue has not been updated in 14 days. It is being closed as presumed resolved."
+                  exempt-issue-labels: "Z-Flaky-Test-Disabled"
+                  # Stale PR closing
+                  days-before-pr-stale: 180
+                  days-before-pr-close: 0
+                  close-pr-message: "This PR has been automatically closed because it has been stale for 180 days. If you wish to continue working on this PR, please ping a maintainer to reopen it."

.github/workflows/triage-unlabelled.yml

@@ -62,7 +62,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'A-Element-Call')) &&
             contains(github.event.issue.labels.*.name, 'Z-Labs')
         steps:
-            - uses: actions/github-script@v7
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
               with:
                   script: |
                       github.rest.issues.removeLabel({

.github/workflows/update-jitsi.yml

@@ -9,9 +9,9 @@ jobs:
     update:
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -23,7 +23,7 @@ jobs:
               run: "yarn update:jitsi"
 
             - name: Create Pull Request
-              uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7
+              uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/jitsi-update

.github/workflows/update-topics.yaml

@@ -22,7 +22,7 @@ jobs:
         runs-on: ubuntu-24.04
         environment: Matrix
         steps:
-            - uses: actions/github-script@v7
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
               env:
                   HS_URL: ${{ secrets.BETABOT_HS_URL }}
                   LOBBY_ROOM_ID: ${{ secrets.ROOM_ID }}

.gitignore

@@ -25,7 +25,7 @@ electron/pub
 .env
 /coverage
 # Auto-generated file
-/src/modules.ts
+/src/modules.js
 /build_config.yaml
 /book
 /index.html

.prettierignore

@@ -17,6 +17,7 @@ electron/pub
 /coverage
 # Auto-generated file
 /src/modules.ts
+/src/modules.js
 /src/i18n/strings
 /build_config.yaml
 # Raises an error because it contains a template var breaking the script tag

.stylelintrc.js

@@ -33,19 +33,15 @@ module.exports = {
         "import-notation": null,
         "value-keyword-case": null,
         "declaration-block-no-redundant-longhand-properties": null,
-        "declaration-block-no-duplicate-properties": [
-            true,
-            // useful for fallbacks
-            { ignore: ["consecutive-duplicates-with-different-values"] },
-        ],
         "shorthand-property-no-redundant-values": null,
         "property-no-vendor-prefix": null,
-        "value-no-vendor-prefix": null,
         "selector-no-vendor-prefix": null,
         "media-feature-name-no-vendor-prefix": null,
         "number-max-precision": null,
         "no-invalid-double-slash-comments": true,
         "media-feature-range-notation": null,
+        "declaration-property-value-no-unknown": null,
+        "declaration-property-value-keyword-no-deprecated": null,
         "csstools/value-no-unknown-custom-properties": [
             true,
             {

CHANGELOG.md

@@ -1,3 +1,339 @@
+Changes in [1.11.104](https://github.com/element-hq/element-web/releases/tag/v1.11.104) (2025-06-17)
+====================================================================================================
+## ✨ Features
+
+* Update the mobile\_guide page to the new design. ([#30006](https://github.com/element-hq/element-web/pull/30006)). Contributed by @pixlwave.
+* Provide a devtool for manually verifying other devices ([#30094](https://github.com/element-hq/element-web/pull/30094)). Contributed by @andybalaam.
+* Implement MSC4155: Invite filtering ([#29603](https://github.com/element-hq/element-web/pull/29603)). Contributed by @Half-Shot.
+* Add low priority avatar decoration to room tile ([#30065](https://github.com/element-hq/element-web/pull/30065)). Contributed by @MidhunSureshR.
+* Add ability to prevent window content being captured by other apps (Desktop) ([#30098](https://github.com/element-hq/element-web/pull/30098)). Contributed by @t3chguy.
+* New room list: move message preview in user settings ([#30023](https://github.com/element-hq/element-web/pull/30023)). Contributed by @florianduros.
+* New room list: change room options icon ([#30029](https://github.com/element-hq/element-web/pull/30029)). Contributed by @florianduros.
+* RoomListStore: Sort low priority rooms to the bottom of the list ([#30070](https://github.com/element-hq/element-web/pull/30070)). Contributed by @MidhunSureshR.
+* Add low priority filter pill to the room list UI ([#30060](https://github.com/element-hq/element-web/pull/30060)). Contributed by @MidhunSureshR.
+* New room list: remove color gradient in space panel ([#29721](https://github.com/element-hq/element-web/pull/29721)). Contributed by @florianduros.
+* /share?msg=foo endpoint using forward message dialog ([#29874](https://github.com/element-hq/element-web/pull/29874)). Contributed by @ara4n.
+
+## 🐛 Bug Fixes
+
+* Do not send empty auth when setting up cross-signing keys ([#29914](https://github.com/element-hq/element-web/pull/29914)). Contributed by @gnieto.
+* Settings: flip local video feed by default ([#29501](https://github.com/element-hq/element-web/pull/29501)). Contributed by @jbtrystram.
+* AccessSecretStorageDialog: various fixes ([#30093](https://github.com/element-hq/element-web/pull/30093)). Contributed by @richvdh.
+* AccessSecretStorageDialog: fix inability to enter recovery key ([#30090](https://github.com/element-hq/element-web/pull/30090)). Contributed by @richvdh.
+* Fix failure to upload thumbnail causing image to send as file ([#30086](https://github.com/element-hq/element-web/pull/30086)). Contributed by @t3chguy.
+* Low priority menu item should be a toggle ([#30071](https://github.com/element-hq/element-web/pull/30071)). Contributed by @MidhunSureshR.
+* Add sanity checks to prevent users from ignoring themselves ([#30079](https://github.com/element-hq/element-web/pull/30079)). Contributed by @MidhunSureshR.
+* Fix issue with duplicate images ([#30073](https://github.com/element-hq/element-web/pull/30073)). Contributed by @fatlewis.
+* Handle errors returned from Seshat ([#30083](https://github.com/element-hq/element-web/pull/30083)). Contributed by @richvdh.
+
+
+Changes in [1.11.103](https://github.com/element-hq/element-web/releases/tag/v1.11.103) (2025-06-10)
+====================================================================================================
+## 🐛 Bug Fixes
+
++ Check the sender of an event matches owner of session, preventing sender spoofing by homeserver owners.
+[13c1d20](https://github.com/matrix-org/matrix-rust-sdk/commit/13c1d2048286bbabf5e7bc6b015aafee98f04d55) (High, [GHSA-x958-rvg6-956w](https://github.com/matrix-org/matrix-rust-sdk/security/advisories/GHSA-x958-rvg6-956w)).
+
+Changes in [1.11.102](https://github.com/element-hq/element-web/releases/tag/v1.11.102) (2025-06-03)
+====================================================================================================
+## ✨ Features
+
+* EW: Modernize the recovery key input modal ([#29819](https://github.com/element-hq/element-web/pull/29819)). Contributed by @uhoreg.
+* New room list: move secondary filters into primary filters ([#29972](https://github.com/element-hq/element-web/pull/29972)). Contributed by @florianduros.
+* Prompt the user when key storage is unexpectedly off ([#29912](https://github.com/element-hq/element-web/pull/29912)). Contributed by @andybalaam.
+* New room list: move sort menu in room list header ([#29983](https://github.com/element-hq/element-web/pull/29983)). Contributed by @florianduros.
+* New room list: rework spacing of room list item ([#29965](https://github.com/element-hq/element-web/pull/29965)). Contributed by @florianduros.
+* RLS: Remove forgotten room from skiplist ([#29933](https://github.com/element-hq/element-web/pull/29933)). Contributed by @MidhunSureshR.
+* Add room list sorting ([#29951](https://github.com/element-hq/element-web/pull/29951)). Contributed by @dbkr.
+* Don't use the minimised width(68px) on the new room list ([#29778](https://github.com/element-hq/element-web/pull/29778)). Contributed by @langleyd.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Close call options popup menu when option has been selected ([#30054](https://github.com/element-hq/element-web/pull/30054)). Contributed by @RiotRobot.
+* RoomListStoreV3: Only add new rooms that pass `VisibilityProvider` check ([#29974](https://github.com/element-hq/element-web/pull/29974)). Contributed by @MidhunSureshR.
+* Re-order primary filters ([#29957](https://github.com/element-hq/element-web/pull/29957)). Contributed by @dbkr.
+* Fix leaky CSS adding `!` to all H1 elements ([#29964](https://github.com/element-hq/element-web/pull/29964)). Contributed by @t3chguy.
+* Fix extensions panel style ([#29273](https://github.com/element-hq/element-web/pull/29273)). Contributed by @langleyd.
+* Fix state events being hidden from widgets in read\_events actions ([#29954](https://github.com/element-hq/element-web/pull/29954)). Contributed by @robintown.
+* Remove old filter test ([#29963](https://github.com/element-hq/element-web/pull/29963)). Contributed by @dbkr.
+
+
+Changes in [1.11.101](https://github.com/element-hq/element-web/releases/tag/v1.11.101) (2025-05-20)
+====================================================================================================
+## ✨ Features
+
+* New room list: add keyboard navigation support ([#29805](https://github.com/element-hq/element-web/pull/29805)). Contributed by @florianduros.
+* Use the JoinRuleSettings component for the guest link access prompt. ([#28614](https://github.com/element-hq/element-web/pull/28614)). Contributed by @toger5.
+* Add loading state to the new room list view ([#29725](https://github.com/element-hq/element-web/pull/29725)). Contributed by @langleyd.
+* Make OIDC identity reset consistent with EX ([#29854](https://github.com/element-hq/element-web/pull/29854)). Contributed by @andybalaam.
+* Support error code for email / phone adding unsupported (MSC4178) ([#29855](https://github.com/element-hq/element-web/pull/29855)). Contributed by @dbkr.
+* Update identity reset UI (Make consistent with EX) ([#29701](https://github.com/element-hq/element-web/pull/29701)). Contributed by @andybalaam.
+* Add secondary filters to the new room list ([#29818](https://github.com/element-hq/element-web/pull/29818)). Contributed by @dbkr.
+* Fix battery drain from Web Audio ([#29203](https://github.com/element-hq/element-web/pull/29203)). Contributed by @mbachry.
+
+## 🐛 Bug Fixes
+
+* Fix go home shortcut on macos and change toggle action events shortcut ([#29929](https://github.com/element-hq/element-web/pull/29929)). Contributed by @florianduros.
+* New room list: fix outdated message preview when space or filter change ([#29925](https://github.com/element-hq/element-web/pull/29925)). Contributed by @florianduros.
+* Stop migrating to MSC4278 if the config exists. ([#29924](https://github.com/element-hq/element-web/pull/29924)). Contributed by @Half-Shot.
+* Ensure consistent download file name on download from ImageView ([#29913](https://github.com/element-hq/element-web/pull/29913)). Contributed by @t3chguy.
+* Add error toast when service worker registration fails ([#29895](https://github.com/element-hq/element-web/pull/29895)). Contributed by @t3chguy.
+* New Room List: Prevent old tombstoned rooms from appearing in the list ([#29881](https://github.com/element-hq/element-web/pull/29881)). Contributed by @MidhunSureshR.
+* Remove lag in search field ([#29885](https://github.com/element-hq/element-web/pull/29885)). Contributed by @florianduros.
+* Respect UIFeature.Voip ([#29873](https://github.com/element-hq/element-web/pull/29873)). Contributed by @langleyd.
+* Allow jumping to message search from spotlight ([#29850](https://github.com/element-hq/element-web/pull/29850)). Contributed by @t3chguy.
+
+
+Changes in [1.11.100](https://github.com/element-hq/element-web/releases/tag/v1.11.100) (2025-05-06)
+====================================================================================================
+## ✨ Features
+
+* Move rich topics out of labs / stabilise MSC3765 ([#29817](https://github.com/element-hq/element-web/pull/29817)). Contributed by @Johennes.
+* Spell out that Element Web does \*not\* work on mobile. ([#29211](https://github.com/element-hq/element-web/pull/29211)). Contributed by @ara4n.
+* Add message preview support to the new room list ([#29784](https://github.com/element-hq/element-web/pull/29784)). Contributed by @dbkr.
+* Global configuration flag for media previews ([#29582](https://github.com/element-hq/element-web/pull/29582)). Contributed by @Half-Shot.
+* New room list: add partial keyboard shortcuts support ([#29783](https://github.com/element-hq/element-web/pull/29783)). Contributed by @florianduros.
+* MVVM RoomSummaryCard Topic ([#29710](https://github.com/element-hq/element-web/pull/29710)). Contributed by @MarcWadai.
+* Warn on self change from settings > roles ([#28926](https://github.com/element-hq/element-web/pull/28926)). Contributed by @MarcWadai.
+* New room list: new visual for invitation ([#29773](https://github.com/element-hq/element-web/pull/29773)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* Fix incorrect display of the user info display name ([#29826](https://github.com/element-hq/element-web/pull/29826)). Contributed by @langleyd.
+* RoomListStore: Remove invite rooms on decline ([#29804](https://github.com/element-hq/element-web/pull/29804)). Contributed by @MidhunSureshR.
+* Fix the buttons not being displayed with long preview text ([#29811](https://github.com/element-hq/element-web/pull/29811)). Contributed by @dbkr.
+* New room list: fix missing/incorrect notification decoration  ([#29796](https://github.com/element-hq/element-web/pull/29796)). Contributed by @florianduros.
+* New Room List: Prevent potential scroll jump/flicker when switching spaces ([#29781](https://github.com/element-hq/element-web/pull/29781)). Contributed by @MidhunSureshR.
+* New room list: fix incorrect decoration ([#29770](https://github.com/element-hq/element-web/pull/29770)). Contributed by @florianduros.
+
+
+Changes in [1.11.99](https://github.com/element-hq/element-web/releases/tag/v1.11.99) (2025-04-23)
+==================================================================================================
+No changes, just bumping the version to accommodate a new Element Desktop release
+
+Changes in [1.11.98](https://github.com/element-hq/element-web/releases/tag/v1.11.98) (2025-04-22)
+==================================================================================================
+## ✨ Features
+
+* print better errors in the search view instead of a blocking modal ([#29724](https://github.com/element-hq/element-web/pull/29724)). Contributed by @Jujure.
+* New room list: video room and video call decoration  ([#29693](https://github.com/element-hq/element-web/pull/29693)). Contributed by @florianduros.
+* Remove Secure Backup, Cross-signing and Cryptography sections in `Security & Privacy` user settings ([#29088](https://github.com/element-hq/element-web/pull/29088)). Contributed by @florianduros.
+* Allow reporting a room when rejecting an invite. ([#29570](https://github.com/element-hq/element-web/pull/29570)). Contributed by @Half-Shot.
+* RoomListViewModel: Reset primary and secondary filters on space change ([#29672](https://github.com/element-hq/element-web/pull/29672)). Contributed by @MidhunSureshR.
+* RoomListStore: Support specific sorting requirements for muted rooms ([#29665](https://github.com/element-hq/element-web/pull/29665)). Contributed by @MidhunSureshR.
+* New room list: add notification options menu ([#29639](https://github.com/element-hq/element-web/pull/29639)). Contributed by @florianduros.
+* Room List: Scroll to top of the list when active room is not in the list ([#29650](https://github.com/element-hq/element-web/pull/29650)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* Fix unwanted form submit behaviour in memberlist ([#29747](https://github.com/element-hq/element-web/pull/29747)). Contributed by @MidhunSureshR.
+* New room list: fix public room icon visibility when filter change ([#29737](https://github.com/element-hq/element-web/pull/29737)). Contributed by @florianduros.
+* Fix custom theme support for short hex \& rgba hex strings ([#29726](https://github.com/element-hq/element-web/pull/29726)). Contributed by @t3chguy.
+* New room list: minor visual fixes ([#29723](https://github.com/element-hq/element-web/pull/29723)). Contributed by @florianduros.
+* Fix getOidcCallbackUrl for Element Desktop ([#29711](https://github.com/element-hq/element-web/pull/29711)). Contributed by @t3chguy.
+* Fix some webp images improperly marked as animated ([#29713](https://github.com/element-hq/element-web/pull/29713)). Contributed by @Petersmit27.
+* Revert deletion of hydrateSession ([#29703](https://github.com/element-hq/element-web/pull/29703)). Contributed by @Jujure.
+* Fix converttoroom \& converttodm not working ([#29705](https://github.com/element-hq/element-web/pull/29705)). Contributed by @t3chguy.
+* Ensure forceCloseAllModals also closes priority/static modals ([#29706](https://github.com/element-hq/element-web/pull/29706)). Contributed by @t3chguy.
+* Continue button is disabled when uploading a recovery key file ([#29695](https://github.com/element-hq/element-web/pull/29695)). Contributed by @Giwayume.
+* Catch errors after syncing recovery ([#29691](https://github.com/element-hq/element-web/pull/29691)). Contributed by @andybalaam.
+* New room list: fix multiple visual issues ([#29673](https://github.com/element-hq/element-web/pull/29673)). Contributed by @florianduros.
+* New Room List: Fix mentions filter matching rooms with any highlight ([#29668](https://github.com/element-hq/element-web/pull/29668)). Contributed by @MidhunSureshR.
+*  Fix truncated emoji label during emoji SAS ([#29643](https://github.com/element-hq/element-web/pull/29643)). Contributed by @florianduros.
+* Remove duplicate jitsi link ([#29642](https://github.com/element-hq/element-web/pull/29642)). Contributed by @dbkr.
+
+
+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
+
+* Room List Store: Filter rooms by active space ([#29399](https://github.com/element-hq/element-web/pull/29399)). Contributed by @MidhunSureshR.
+* Room List - Update the room list store on actions from the dispatcher ([#29397](https://github.com/element-hq/element-web/pull/29397)). Contributed by @MidhunSureshR.
+* Room List  - Implement a minimal view model ([#29357](https://github.com/element-hq/element-web/pull/29357)). Contributed by @MidhunSureshR.
+* New room list: add space menu in room header ([#29352](https://github.com/element-hq/element-web/pull/29352)). Contributed by @florianduros.
+* Room List - Store sorted rooms in skip list ([#29345](https://github.com/element-hq/element-web/pull/29345)). Contributed by @MidhunSureshR.
+* New room list: add dial to search section ([#29359](https://github.com/element-hq/element-web/pull/29359)). Contributed by @florianduros.
+* New room list: add compose menu for spaces in header ([#29347](https://github.com/element-hq/element-web/pull/29347)). Contributed by @florianduros.
+* Use EditInPlace control for Identity Server picker to improve a11y ([#29280](https://github.com/element-hq/element-web/pull/29280)). Contributed by @Half-Shot.
+* First step to add header to new room list ([#29320](https://github.com/element-hq/element-web/pull/29320)). Contributed by @florianduros.
+* Add Windows 64-bit arm link and remove 32-bit link on compatibility page ([#29312](https://github.com/element-hq/element-web/pull/29312)). Contributed by @t3chguy.
+* Honour the backup disable flag from Element X ([#29290](https://github.com/element-hq/element-web/pull/29290)). Contributed by @dbkr.
+
+## 🐛 Bug Fixes
+
+* Fix edited code block width ([#29394](https://github.com/element-hq/element-web/pull/29394)). Contributed by @florianduros.
+* new room list: keep space name in one line in header ([#29369](https://github.com/element-hq/element-web/pull/29369)). Contributed by @florianduros.
+* Dismiss "Key storage out of sync" toast when secrets received ([#29348](https://github.com/element-hq/element-web/pull/29348)). Contributed by @richvdh.
+* Minor CSS fixes for the new room list ([#29334](https://github.com/element-hq/element-web/pull/29334)). Contributed by @florianduros.
+* Add padding to room header icon ([#29271](https://github.com/element-hq/element-web/pull/29271)). Contributed by @langleyd.
+
+
+Changes in [1.11.94](https://github.com/element-hq/element-web/releases/tag/v1.11.94) (2025-02-27)
+==================================================================================================
+## 🐛 Bug Fixes
+
+* [Backport staging] fix: /tmp/element-web-config may already exist preventing the container from booting up ([#29377](https://github.com/element-hq/element-web/pull/29377)). Contributed by @RiotRobot.
+
+
+Changes in [1.11.93](https://github.com/element-hq/element-web/releases/tag/v1.11.93) (2025-02-25)
+==================================================================================================
+## ✨ Features
+
+* [backport] Dynamically load Element Web modules in Docker entrypoint ([#29358](https://github.com/element-hq/element-web/pull/29358)). Contributed by @t3chguy.
+* ChangeRecoveryKey: error handling ([#29262](https://github.com/element-hq/element-web/pull/29262)). Contributed by @richvdh.
+* Dehydration: enable dehydrated device on "Set up recovery" ([#29265](https://github.com/element-hq/element-web/pull/29265)). Contributed by @richvdh.
+* Render reason for invite rejection. ([#29257](https://github.com/element-hq/element-web/pull/29257)). Contributed by @Half-Shot.
+* New room list: add search section ([#29251](https://github.com/element-hq/element-web/pull/29251)). Contributed by @florianduros.
+* New room list: hide favourites and people meta spaces ([#29241](https://github.com/element-hq/element-web/pull/29241)). Contributed by @florianduros.
+* New Room List: Create new labs flag ([#29239](https://github.com/element-hq/element-web/pull/29239)). Contributed by @MidhunSureshR.
+* Stop URl preview from covering message box ([#29215](https://github.com/element-hq/element-web/pull/29215)). Contributed by @edent.
+* Rename "security key" into "recovery key" ([#29217](https://github.com/element-hq/element-web/pull/29217)). Contributed by @florianduros.
+* Add new verification section to user profile ([#29200](https://github.com/element-hq/element-web/pull/29200)). Contributed by @MidhunSureshR.
+* Initial support for runtime modules ([#29104](https://github.com/element-hq/element-web/pull/29104)). Contributed by @t3chguy.
+* Add `Forgot recovery key?` button to encryption tab ([#29202](https://github.com/element-hq/element-web/pull/29202)). Contributed by @florianduros.
+* Add KeyIcon to key storage out of sync toast ([#29201](https://github.com/element-hq/element-web/pull/29201)). Contributed by @florianduros.
+* Improve rendering of empty topics in the timeline  ([#29152](https://github.com/element-hq/element-web/pull/29152)). Contributed by @Half-Shot.
+
+## 🐛 Bug Fixes
+
+* Fix font scaling in member list ([#29285](https://github.com/element-hq/element-web/pull/29285)). Contributed by @florianduros.
+* Grow member list search field when resizing the right panel ([#29267](https://github.com/element-hq/element-web/pull/29267)). Contributed by @langleyd.
+* Don't reload roomview on offline connectivity check ([#29243](https://github.com/element-hq/element-web/pull/29243)). Contributed by @dbkr.
+* Respect user's 12/24 hour preference consistently ([#29237](https://github.com/element-hq/element-web/pull/29237)). Contributed by @t3chguy.
+* Restore the accessibility role on call views ([#29225](https://github.com/element-hq/element-web/pull/29225)). Contributed by @robintown.
+* Revert `GoToHome` keyboard shortcut to `Ctrl`–`Shift`–`H` on macOS ([#28577](https://github.com/element-hq/element-web/pull/28577)). Contributed by @gy-mate.
+* Encryption tab: display correct encryption panel when user cancels the reset identity flow ([#29216](https://github.com/element-hq/element-web/pull/29216)). Contributed by @florianduros.
+
+
+Changes in [1.11.92](https://github.com/element-hq/element-web/releases/tag/v1.11.92) (2025-02-11)
+==================================================================================================
+## ✨ Features
+
+* [Backport staging] Log when we show, and hide, encryption setup toasts ([#29238](https://github.com/element-hq/element-web/pull/29238)). Contributed by @richvdh.
+* Make profile header section match the designs ([#29163](https://github.com/element-hq/element-web/pull/29163)). Contributed by @MidhunSureshR.
+* Always show back button in the right panel ([#29128](https://github.com/element-hq/element-web/pull/29128)). Contributed by @MidhunSureshR.
+* Schedule dehydration on reload if the dehydration key is already cached locally ([#29021](https://github.com/element-hq/element-web/pull/29021)). Contributed by @uhoreg.
+* update to twemoji 15.1.0 ([#29115](https://github.com/element-hq/element-web/pull/29115)). Contributed by @ara4n.
+* Update matrix-widget-api ([#29112](https://github.com/element-hq/element-web/pull/29112)). Contributed by @toger5.
+* Allow navigating through the memberlist using up/down keys ([#28949](https://github.com/element-hq/element-web/pull/28949)). Contributed by @MidhunSureshR.
+* Style room header icons and facepile for toggled state ([#28968](https://github.com/element-hq/element-web/pull/28968)). Contributed by @MidhunSureshR.
+* Move threads header below base card header ([#28969](https://github.com/element-hq/element-web/pull/28969)). Contributed by @MidhunSureshR.
+* Add `Advanced` section to the user settings encryption tab ([#28804](https://github.com/element-hq/element-web/pull/28804)). Contributed by @florianduros.
+* Fix outstanding UX issues with replies/mentions/keyword notifs ([#28270](https://github.com/element-hq/element-web/pull/28270)). Contributed by @taffyko.
+* Distinguish room state and timeline events when dealing with widgets ([#28681](https://github.com/element-hq/element-web/pull/28681)). Contributed by @robintown.
+* Switch OIDC primarily to new `/auth_metadata` API ([#29019](https://github.com/element-hq/element-web/pull/29019)). Contributed by @t3chguy.
+* More memberlist changes ([#29069](https://github.com/element-hq/element-web/pull/29069)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Wire up the "Forgot recovery key" button for the "Key storage out of sync" toast ([#29190](https://github.com/element-hq/element-web/pull/29190)). Contributed by @RiotRobot.
+* Encryption tab: hide `Advanced` section when the key storage is out of sync ([#29129](https://github.com/element-hq/element-web/pull/29129)). Contributed by @florianduros.
+* Fix share button in discovery settings being disabled incorrectly ([#29151](https://github.com/element-hq/element-web/pull/29151)). Contributed by @t3chguy.
+* Ensure switching rooms does not wrongly focus timeline search ([#29153](https://github.com/element-hq/element-web/pull/29153)). Contributed by @t3chguy.
+* Stop showing a dialog prompting the user to enter an old recovery key ([#29143](https://github.com/element-hq/element-web/pull/29143)). Contributed by @richvdh.
+* Make themed widgets reflect the effective theme ([#28342](https://github.com/element-hq/element-web/pull/28342)). Contributed by @robintown.
+* support non-VS16 emoji ligatures in TwemojiMozilla ([#29100](https://github.com/element-hq/element-web/pull/29100)). Contributed by @ara4n.
+* e2e test: Verify session with the encryption tab instead of the security \& privacy tab ([#29090](https://github.com/element-hq/element-web/pull/29090)). Contributed by @florianduros.
+* Work around cloudflare R2 / aws client incompatability ([#29086](https://github.com/element-hq/element-web/pull/29086)). Contributed by @dbkr.
+* Fix identity server settings visibility ([#29083](https://github.com/element-hq/element-web/pull/29083)). Contributed by @dbkr.
+
+
+Changes in [1.11.91](https://github.com/element-hq/element-web/releases/tag/v1.11.91) (2025-01-28)
+==================================================================================================
+## ✨ Features
+
+* Implement changes to memberlist from feedback ([#29029](https://github.com/element-hq/element-web/pull/29029)). Contributed by @MidhunSureshR.
+* Add toast for recovery keys being out of sync ([#28946](https://github.com/element-hq/element-web/pull/28946)). Contributed by @dbkr.
+* Refactor LegacyCallHandler event emitter to use TypedEventEmitter ([#29008](https://github.com/element-hq/element-web/pull/29008)). Contributed by @t3chguy.
+* Add `Recovery` section in the new user settings `Encryption` tab ([#28673](https://github.com/element-hq/element-web/pull/28673)). Contributed by @florianduros.
+* Retry loading chunks to make the app more resilient ([#29001](https://github.com/element-hq/element-web/pull/29001)). Contributed by @t3chguy.
+* Clear account idb table on logout ([#28996](https://github.com/element-hq/element-web/pull/28996)). Contributed by @t3chguy.
+* Implement new memberlist design with MVVM architecture  ([#28874](https://github.com/element-hq/element-web/pull/28874)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Switch to secure random strings ([#29035](https://github.com/element-hq/element-web/pull/29035)). Contributed by @RiotRobot.
+* React to MatrixEvent sender/target being updated for rendering state events ([#28947](https://github.com/element-hq/element-web/pull/28947)). Contributed by @t3chguy.
+
+
 Changes in [1.11.90](https://github.com/element-hq/element-web/releases/tag/v1.11.90) (2025-01-14)
 ==================================================================================================
 ## ✨ Features

CONTRIBUTING.md

@@ -189,89 +189,6 @@ give away to contributors - if you feel that Matrix-branded apparel is missing
 from your life, please mail us your shipping address to matrix at matrix.org
 and we'll try to fix it :)
 
-## Sign off
-
-In order to have a concrete record that your contribution is intentional
-and you agree to license it under the same terms as the project's license, we've
-adopted the same lightweight approach that the Linux Kernel
-(https://www.kernel.org/doc/html/latest/process/submitting-patches.html), Docker
-(https://github.com/docker/docker/blob/master/CONTRIBUTING.md), and many other
-projects use: the DCO (Developer Certificate of Origin:
-http://developercertificate.org/). This is a simple declaration that you wrote
-the contribution or otherwise have the right to contribute it to Matrix:
-
-```
-Developer Certificate of Origin
-Version 1.1
-
-Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
-660 York Street, Suite 102,
-San Francisco, CA 94110 USA
-
-Everyone is permitted to copy and distribute verbatim copies of this
-license document, but changing it is not allowed.
-
-Developer's Certificate of Origin 1.1
-
-By making a contribution to this project, I certify that:
-
-(a) The contribution was created in whole or in part by me and I
-    have the right to submit it under the open source license
-    indicated in the file; or
-
-(b) The contribution is based upon previous work that, to the best
-    of my knowledge, is covered under an appropriate open source
-    license and I have the right under that license to submit that
-    work with modifications, whether created in whole or in part
-    by me, under the same open source license (unless I am
-    permitted to submit under a different license), as indicated
-    in the file; or
-
-(c) The contribution was provided directly to me by some other
-    person who certified (a), (b) or (c) and I have not modified
-    it.
-
-(d) I understand and agree that this project and the contribution
-    are public and that a record of the contribution (including all
-    personal information I submit with it, including my sign-off) is
-    maintained indefinitely and may be redistributed consistent with
-    this project or the open source license(s) involved.
-```
-
-If you agree to this for your contribution, then all that's needed is to
-include the line in your commit or pull request comment:
-
-```
-Signed-off-by: Your Name <your@email.example.org>
-```
-
-We accept contributions under a legally identifiable name, such as your name on
-government documentation or common-law names (names claimed by legitimate usage
-or repute). Unfortunately, we cannot accept anonymous contributions at this
-time.
-
-Git allows you to add this signoff automatically when using the `-s` flag to
-`git commit`, which uses the name and email set in your `user.name` and
-`user.email` git configs.
-
-If you forgot to sign off your commits before making your pull request and are
-on Git 2.17+ you can mass signoff using rebase:
-
-```
-git rebase --signoff origin/develop
-```
-
-## Private sign off
-
-If you would like to provide your legal name privately to the Matrix.org
-Foundation (instead of in a public commit or comment), you can do so by emailing
-your legal name and a link to the pull request to dco@matrix.org. It helps to
-include "sign off" or similar in the subject line. You will then be instructed
-further.
-
-Once private sign off is complete, doing so for future contributions will not
-be required.
-
 # Review expectations
 
 See https://github.com/element-hq/element-meta/wiki/Review-process

Dockerfile

@@ -1,5 +1,7 @@
+# syntax=docker.io/docker/dockerfile:1.16-labs@sha256:bb5e2b225985193779991f3256d1901a0b3e6a0b284c7bffa0972064f4a6d458
+
 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye AS builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:f16d8e8af67bb6361231e932b8b3e7afa040cbfed181719a450b02c3821b26c1 AS builder
 
 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -8,7 +10,7 @@ ARG JS_SDK_BRANCH="master"
 
 WORKDIR /src
 
-COPY . /src
+COPY --exclude=docker . /src
 RUN /src/scripts/docker-link-repos.sh
 RUN yarn --network-timeout=200000 install
 RUN /src/scripts/docker-package.sh
@@ -17,20 +19,20 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json
 
 # App
-FROM nginx:alpine-slim
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:66e34aa81c2faf290ea4e4c28a490f2b35a07478265a2d5994c8637506045eee
+
+# Need root user to install packages & manipulate the usr directory
+USER root
+
+# Install jq and moreutils for sponge, both used by our entrypoints
+RUN apk add jq moreutils
 
 COPY --from=builder /src/webapp /app
 
 # Override default nginx config. Templates in `/etc/nginx/templates` are passed
 # through `envsubst` by the nginx docker image entry point.
 COPY /docker/nginx-templates/* /etc/nginx/templates/
-
-# 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
+COPY /docker/docker-entrypoint.d/* /docker-entrypoint.d/
 
 RUN rm -rf /usr/share/nginx/html \
   && ln -s /app /usr/share/nginx/html
@@ -40,3 +42,5 @@ USER nginx
 
 # HTTP listen port
 ENV ELEMENT_WEB_PORT=80
+
+HEALTHCHECK --start-period=5s CMD wget -q --spider http://localhost:$ELEMENT_WEB_PORT/config.json

README.md

@@ -126,7 +126,7 @@ guide](https://classic.yarnpkg.com/en/docs/install) if you do not have it alread
 1. Install the prerequisites: `yarn install`.
     - If you're using the `develop` branch, then it is recommended to set up a
       proper development environment (see [Setting up a dev
-      environment](#setting-up-a-dev-environment) below). Alternatively, you
+      environment](./developer_guide.md#setting-up-a-dev-environment) below). Alternatively, you
       can use <https://develop.element.io> - the continuous integration release of
       the develop branch.
 1. Configure the app by copying `config.sample.json` to `config.json` and
@@ -182,123 +182,11 @@ Dockerfile.
 
 # Development
 
-Before attempting to develop on Element you **must** read the [developer guide
-for `matrix-react-sdk`](https://github.com/matrix-org/matrix-react-sdk#developer-guide), which
-also defines the design, architecture and style for Element too.
+Please read through the following:
 
-Read the [Choosing an issue](docs/choosing-an-issue.md) page for some guidance
-about where to start. Before starting work on a feature, it's best to ensure
-your plan aligns well with our vision for Element. Please chat with the team in
-[#element-dev:matrix.org](https://matrix.to/#/#element-dev:matrix.org) before
-you start so we can ensure it's something we'd be willing to merge.
-
-You should also familiarise yourself with the ["Here be Dragons" guide
-](https://docs.google.com/document/d/12jYzvkidrp1h7liEuLIe6BMdU0NUjndUYI971O06ooM)
-to the tame & not-so-tame dragons (gotchas) which exist in the codebase.
-
-The idea of Element is to be a relatively lightweight "skin" of customisations on
-top of the underlying `matrix-react-sdk`. `matrix-react-sdk` provides both the
-higher and lower level React components useful for building Matrix communication
-apps using React.
-
-Please note that Element is intended to run correctly without access to the public
-internet. So please don't depend on resources (JS libs, CSS, images, fonts)
-hosted by external CDNs or servers but instead please package all dependencies
-into Element itself.
-
-# Setting up a dev environment
-
-Much of the functionality in Element is actually in the `matrix-js-sdk` module.
-It is possible to set these up in a way that makes it easy to track the `develop` branches
-in git and to make local changes without having to manually rebuild each time.
-
-First clone and build `matrix-js-sdk`:
-
-```bash
-git clone https://github.com/matrix-org/matrix-js-sdk.git
-pushd matrix-js-sdk
-yarn link
-yarn install
-popd
-```
-
-Clone the repo and switch to the `element-web` directory:
-
-```bash
-git clone https://github.com/element-hq/element-web.git
-cd element-web
-```
-
-Configure the app by copying `config.sample.json` to `config.json` and
-modifying it. See the [configuration docs](docs/config.md) for details.
-
-Finally, build and start Element itself:
-
-```bash
-yarn link matrix-js-sdk
-yarn install
-yarn start
-```
-
-Wait a few seconds for the initial build to finish; you should see something like:
-
-```
-[element-js] <s> [webpack.Progress] 100%
-[element-js]
-[element-js] ℹ ｢wdm｣:    1840 modules
-[element-js] ℹ ｢wdm｣: Compiled successfully.
-```
-
-Remember, the command will not terminate since it runs the web server
-and rebuilds source files when they change. This development server also
-disables caching, so do NOT use it in production.
-
-Open <http://127.0.0.1:8080/> in your browser to see your newly built Element.
-
-**Note**: The build script uses inotify by default on Linux to monitor directories
-for changes. If the inotify limits are too low your build will fail silently or with
-`Error: EMFILE: too many open files`. To avoid these issues, we recommend a watch limit
-of at least `128M` and instance limit around `512`.
-
-You may be interested in issues [#15750](https://github.com/element-hq/element-web/issues/15750) and
-[#15774](https://github.com/element-hq/element-web/issues/15774) for further details.
-
-To set a new inotify watch and instance limit, execute:
-
-```
-sudo sysctl fs.inotify.max_user_watches=131072
-sudo sysctl fs.inotify.max_user_instances=512
-sudo sysctl -p
-```
-
-If you wish, you can make the new limits permanent, by executing:
-
-```
-echo fs.inotify.max_user_watches=131072 | sudo tee -a /etc/sysctl.conf
-echo fs.inotify.max_user_instances=512 | sudo tee -a /etc/sysctl.conf
-sudo sysctl -p
-```
-
----
-
-When you make changes to `matrix-js-sdk` they should be automatically picked up by webpack and built.
-
-If any of these steps error with, `file table overflow`, you are probably on a mac
-which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again.
-You'll need to do this in each new terminal you open before building Element.
-
-## Running the tests
-
-There are a number of application-level tests in the `tests` directory; these
-are designed to run with Jest and JSDOM. To run them
-
-```
-yarn test
-```
-
-### End-to-End tests
-
-See [matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/#end-to-end-tests) for how to run the end-to-end tests.
+1. [Developer guide](./developer_guide.md)
+2. [Code style](./code_style.md)
+3. [Contribution guide](./CONTRIBUTING.md)
 
 # Translations
 

babel.config.js

@@ -31,5 +31,7 @@ module.exports = {
 
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",
+        ["@babel/plugin-proposal-decorators", { version: "2023-11" }], // only needed by the js-sdk
+        "@babel/plugin-transform-class-static-block", // only needed by the js-sdk for decorators
     ],
 };

code_style.md

@@ -5,15 +5,6 @@ adjacent to. As of writing, these are:
 
 - element-desktop
 - element-web
-- matrix-js-sdk
-
-Other projects might extend this code style for increased strictness. For example, matrix-events-sdk
-has stricter code organization to reduce the maintenance burden. These projects will declare their code
-style within their own repos.
-
-Note that some requirements will be layer-specific. Where the requirements don't make sense for the
-project, they are used to the best of their ability, used in spirit, or ignored if not applicable,
-in that order.
 
 ## Guiding principles
 
@@ -234,17 +225,19 @@ Unless otherwise specified, the following applies to all code:
 
 Inheriting all the rules of TypeScript, the following additionally apply:
 
-1. Types for lifecycle functions are not required (render, componentDidMount, and so on).
-2. Class components must always have a `Props` interface declared immediately above them. It can be
+1. Component source files are named with upper camel case (e.g. views/rooms/EventTile.js)
+2. They are organised in a typically two-level hierarchy - first whether the component is a view or a structure, and then a broad functional grouping (e.g. 'rooms' here)
+3. Types for lifecycle functions are not required (render, componentDidMount, and so on).
+4. Class components must always have a `Props` interface declared immediately above them. It can be
    empty if the component accepts no props.
-3. Class components should have an `State` interface declared immediately above them, but after `Props`.
-4. Props and State should not be exported. Use `React.ComponentProps<typeof ComponentNameHere>`
+5. Class components should have an `State` interface declared immediately above them, but after `Props`.
+6. Props and State should not be exported. Use `React.ComponentProps<typeof ComponentNameHere>`
    instead.
-5. One component per file, except when a component is a utility component specifically for the "primary"
+7. One component per file, except when a component is a utility component specifically for the "primary"
    component. The utility component should not be exported.
-6. Exported constants, enums, interfaces, functions, etc must be separate from files containing components
+8. Exported constants, enums, interfaces, functions, etc must be separate from files containing components
    or stores.
-7. Stores should use a singleton pattern with a static instance property:
+9. Stores should use a singleton pattern with a static instance property:
 
     ```typescript
     class FooStore {
@@ -261,44 +254,41 @@ Inheriting all the rules of TypeScript, the following additionally apply:
     }
     ```
 
-8. Stores must support using an alternative MatrixClient and dispatcher instance.
-9. Utilities which require JSX must be split out from utilities which do not. This is to prevent import
-   cycles during runtime where components accidentally include more of the app than they intended.
-10. Interdependence between stores should be kept to a minimum. Break functions and constants out to utilities
+10. Stores must support using an alternative MatrixClient and dispatcher instance.
+11. Utilities which require JSX must be split out from utilities which do not. This is to prevent import
+    cycles during runtime where components accidentally include more of the app than they intended.
+12. Interdependence between stores should be kept to a minimum. Break functions and constants out to utilities
     if at all possible.
-11. A component should only use CSS class names in line with the component name.
+13. A component should only use CSS class names in line with the component name.
 
     1. When knowingly using a class name from another component, document it with a [comment](#comments).
 
-12. Curly braces within JSX should be padded with a space, however properties on those components should not.
+14. Curly braces within JSX should be padded with a space, however properties on those components should not.
     See above code example.
-13. Functions used as properties should either be defined on the class or stored in a variable. They should not
+15. Functions used as properties should either be defined on the class or stored in a variable. They should not
     be inline unless mocking/short-circuiting the value.
-14. Prefer hooks (functional components) over class components. Be consistent with the existing area if unsure
+16. Prefer hooks (functional components) over class components. Be consistent with the existing area if unsure
     which should be used.
     1. Unless the component is considered a "structure", in which case use classes.
-15. Write more views than structures. Structures are chunks of functionality like MatrixChat while views are
+17. Write more views than structures. Structures are chunks of functionality like MatrixChat while views are
     isolated components.
-16. Components should serve a single, or near-single, purpose.
-17. Prefer to derive information from component properties rather than establish state.
-18. Do not use `React.Component::forceUpdate`.
+18. Components should serve a single, or near-single, purpose.
+19. Prefer to derive information from component properties rather than establish state.
+20. Do not use `React.Component::forceUpdate`.
 
 ## Stylesheets (\*.pcss = PostCSS + Plugins)
 
 Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, but actually it is not.
 
-1. Class names must be prefixed with "mx\_".
-2. Class names must denote the component which defines them, followed by any context.
-   The context is not further specified here in terms of meaning or syntax.
-   Use whatever is appropriate for your implementation use case.
-   Some examples:
-    1. `mx_MyFoo`
-    2. `mx_MyFoo_avatar`
-    3. `mx_MyFoo_avatarUser`
-    4. `mx_MyFoo_avatar--user`
-3. Use the `$font` variables instead of manual values.
-4. Keep indentation/nesting to a minimum. Maximum suggested nesting is 5 layers.
-5. Use the whole class name instead of shortcuts:
+1. The view's CSS file MUST have the same name as the component (e.g. `view/rooms/_MessageTile.css` for `MessageTile.tsx` component).
+2. Per-view CSS is optional - it could choose to inherit all its styling from the context of the rest of the app, although this is unusual.
+3. Class names must be prefixed with "mx\_".
+4. Class names must strictly denote the component which defines them.
+   For example: `mx_MyFoo` for `MyFoo` component.
+5. Class names for DOM elements within a view which aren't components are named by appending a lower camel case identifier to the view's class name - e.g. .mx_MyFoo_randomDiv is how you'd name the class of an arbitrary div within the MyFoo view.
+6. Use the `$font` variables instead of manual values.
+7. Keep indentation/nesting to a minimum. Maximum suggested nesting is 5 layers.
+8. Use the whole class name instead of shortcuts:
 
     ```scss
     .mx_MyFoo {
@@ -309,7 +299,7 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
     }
     ```
 
-6. Break multiple selectors over multiple lines this way:
+9. Break multiple selectors over multiple lines this way:
 
     ```scss
     .mx_MyFoo,
@@ -319,9 +309,9 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
     }
     ```
 
-7. Non-shared variables should use $lowerCamelCase. Shared variables use $dashed-naming.
-8. Overrides to Z indexes, adjustments of dimensions/padding with pixels, and so on should all be
-   [documented](#comments) for what the values mean:
+10. Non-shared variables should use $lowerCamelCase. Shared variables use $dashed-naming.
+11. Overrides to Z indexes, adjustments of dimensions/padding with pixels, and so on should all be
+    [documented](#comments) for what the values mean:
 
     ```scss
     .mx_MyFoo {
@@ -331,7 +321,9 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
     }
     ```
 
-9. Avoid the use of `!important`. If `!important` is necessary, add a [comment](#comments) explaining why.
+12. Avoid the use of `!important`. If `!important` is necessary, add a [comment](#comments) explaining why.
+13. The CSS for a component can override the rules for child components. For instance, .mxRoomList .mx_RoomTile {} would be the selector to override styles of RoomTiles when viewed in the context of a RoomList view. Overrides must be scoped to the View's CSS class - i.e. don't just define .mx_RoomTile {} in RoomList.css - only RoomTile.css is allowed to define its own CSS. Instead, say .mx_RoomList .mx_RoomTile {} to scope the override only to the context of RoomList views. N.B. overrides should be relatively rare as in general CSS inheritance should be enough.
+14. Components should render only within the bounding box of their outermost DOM element. Page-absolute positioning and negative CSS margins and similar are generally not cool and stop the component from being reused easily in different places.
 
 ## Tests
 

contribute.json

@@ -1,13 +0,0 @@
-{
-    "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"]
-}

debian/control

@@ -8,6 +8,6 @@ Package: element-web
 Architecture: all
 Recommends: httpd, element-io-archive-keyring
 Description:
-  A feature-rich client for Matrix.org
+  Element: the future of secure communication
   This package contains the web-based client that can be served through a web
    server.

developer_guide.md

@@ -0,0 +1,126 @@
+# Developer Guide
+
+## Development
+
+Read the [Choosing an issue](docs/choosing-an-issue.md) page for some guidance
+about where to start. Before starting work on a feature, it's best to ensure
+your plan aligns well with our vision for Element. Please chat with the team in
+[#element-dev:matrix.org](https://matrix.to/#/#element-dev:matrix.org) before
+you start so we can ensure it's something we'd be willing to merge.
+
+You should also familiarise yourself with the ["Here be Dragons" guide
+](https://docs.google.com/document/d/12jYzvkidrp1h7liEuLIe6BMdU0NUjndUYI971O06ooM)
+to the tame & not-so-tame dragons (gotchas) which exist in the codebase.
+
+Please note that Element is intended to run correctly without access to the public
+internet. So please don't depend on resources (JS libs, CSS, images, fonts)
+hosted by external CDNs or servers but instead please package all dependencies
+into Element itself.
+
+## Setting up a dev environment
+
+Much of the functionality in Element is actually in the `matrix-js-sdk` module.
+It is possible to set these up in a way that makes it easy to track the `develop` branches
+in git and to make local changes without having to manually rebuild each time.
+
+First clone and build `matrix-js-sdk`:
+
+```bash
+git clone https://github.com/matrix-org/matrix-js-sdk.git
+pushd matrix-js-sdk
+yarn link
+yarn install
+popd
+```
+
+Clone the repo and switch to the `element-web` directory:
+
+```bash
+git clone https://github.com/element-hq/element-web.git
+cd element-web
+```
+
+Configure the app by copying `config.sample.json` to `config.json` and
+modifying it. See the [configuration docs](docs/config.md) for details.
+
+Finally, build and start Element itself:
+
+```bash
+yarn link matrix-js-sdk
+yarn install
+yarn start
+```
+
+Wait a few seconds for the initial build to finish; you should see something like:
+
+```
+[element-js] <s> [webpack.Progress] 100%
+[element-js]
+[element-js] ℹ ｢wdm｣:    1840 modules
+[element-js] ℹ ｢wdm｣: Compiled successfully.
+```
+
+Remember, the command will not terminate since it runs the web server
+and rebuilds source files when they change. This development server also
+disables caching, so do NOT use it in production.
+
+Open <http://127.0.0.1:8080/> in your browser to see your newly built Element.
+
+**Note**: The build script uses inotify by default on Linux to monitor directories
+for changes. If the inotify limits are too low your build will fail silently or with
+`Error: EMFILE: too many open files`. To avoid these issues, we recommend a watch limit
+of at least `128M` and instance limit around `512`.
+
+You may be interested in issues [#15750](https://github.com/element-hq/element-web/issues/15750) and
+[#15774](https://github.com/element-hq/element-web/issues/15774) for further details.
+
+To set a new inotify watch and instance limit, execute:
+
+```
+sudo sysctl fs.inotify.max_user_watches=131072
+sudo sysctl fs.inotify.max_user_instances=512
+sudo sysctl -p
+```
+
+If you wish, you can make the new limits permanent, by executing:
+
+```
+echo fs.inotify.max_user_watches=131072 | sudo tee -a /etc/sysctl.conf
+echo fs.inotify.max_user_instances=512 | sudo tee -a /etc/sysctl.conf
+sudo sysctl -p
+```
+
+---
+
+When you make changes to `matrix-js-sdk` they should be automatically picked up by webpack and built.
+
+If any of these steps error with, `file table overflow`, you are probably on a mac
+which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again.
+You'll need to do this in each new terminal you open before building Element.
+
+## Running the tests
+
+There are a number of application-level tests in the `tests` directory; these
+are designed to run with Jest and JSDOM. To run them
+
+```
+yarn test
+```
+
+### End-to-End tests
+
+See [matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/#end-to-end-tests) for how to run the end-to-end tests.
+
+## General github guidelines
+
+1. **Pull requests must only be filed against the `develop` branch.**
+2. Try to keep your pull requests concise. Split them up if necessary.
+3. Ensure that you provide a description that explains the fix/feature and its intent.
+
+## Adding new code
+
+New code should be committed as follows:
+
+- All new components: https://github.com/element-hq/element-web/tree/develop/src/components
+- CSS: https://github.com/element-hq/element-web/tree/develop/res/css
+- Theme specific CSS & resources: https://github.com/element-hq/element-web/tree/develop/res/themes

docker/docker-entrypoint.d/18-load-element-modules.sh

@@ -0,0 +1,34 @@
+#!/bin/sh
+
+# Loads modules from `/modules` into config.json's `modules` field
+
+set -e
+
+entrypoint_log() {
+    if [ -z "${NGINX_ENTRYPOINT_QUIET_LOGS:-}" ]; then
+        echo "$@"
+    fi
+}
+
+# Copy these config files as a base
+mkdir -p /tmp/element-web-config
+cp /app/config*.json /tmp/element-web-config/
+
+# If there are modules to be loaded
+if [ -d "/modules" ]; then
+    cd /modules
+
+    for MODULE in *
+    do
+        # If the module has a package.json, use its main field as the entrypoint
+        ENTRYPOINT="index.js"
+        if [ -f "/modules/$MODULE/package.json" ]; then
+            ENTRYPOINT=$(jq -r '.main' "/modules/$MODULE/package.json")
+        fi
+
+        entrypoint_log "Loading module $MODULE with entrypoint $ENTRYPOINT"
+
+        # Append the module to the config
+        jq ".modules += [\"/modules/$MODULE/$ENTRYPOINT\"]" /tmp/element-web-config/config.json | sponge /tmp/element-web-config/config.json
+    done
+fi

docker/nginx-templates/default.conf.template

@@ -18,8 +18,12 @@ server {
     }
     # covers config.json and config.hostname.json requests as it is prefix.
     location /config {
+        root /tmp/element-web-config;
         add_header Cache-Control "no-cache";
     }
+    location /modules {
+        alias /modules;
+    }
     # redirect server error pages to the static page /50x.html
     #
     error_page   500 502 503 504  /50x.html;

docs/MVVM.md

@@ -0,0 +1,67 @@
+# MVVM
+
+General description of the pattern can be found [here](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel). But the gist of it is that you divide your code into three sections:
+
+1. Model: This is where the business logic and data resides.
+2. View Model: This code exists to provide the logic necessary for the UI. It directly uses the Model code.
+3. View: This is the UI code itself and depends on the view model.
+
+If you do MVVM right, your view should be dumb i.e it gets data from the view model and merely displays it.
+
+### Practical guidelines for MVVM in element-web
+
+#### Model
+
+This is anywhere your data or business logic comes from. If your view model is accessing something simple exposed from `matrix-js-sdk`, then the sdk is your model. If you're using something more high level in element-web to get your data/logic (eg: `MemberListStore`), then that becomes your model.
+
+#### View Model
+
+1. View model is always a custom react hook named like `useFooViewModel()`.
+2. The return type of your view model (known as view state) must be defined as a typescript interface:
+    ```ts
+    inteface FooViewState {
+    	somethingUseful: string;
+    	somethingElse: BarType;
+    	update: () => Promise<void>
+    	...
+    }
+    ```
+3. Any react state that your UI needs must be in the view model.
+
+#### View
+
+1. Views are simple react components (eg: `FooView`).
+2. Views usually start by calling the view model hook, eg:
+    ```tsx
+    const FooView: React.FC<IProps> = (props: IProps) => {
+    	const vm = useFooViewModel();
+    	....
+    	return(
+    		<div>
+    			{vm.somethingUseful}
+    		</div>
+    	);
+    }
+    ```
+3. Views are also allowed to accept the view model as a prop, eg:
+    ```tsx
+    const FooView: React.FC<IProps> = ({ vm }: IProps) => {
+    	....
+    	return(
+    		<div>
+    			{vm.somethingUseful}
+    		</div>
+    	);
+    }
+    ```
+4. Multiple views can share the same view model if necessary.
+
+### Benefits
+
+1. MVVM forces a separation of concern i.e we will no longer have large react components that have a lot of state and rendering code mixed together. This improves code readability and makes it easier to introduce changes.
+2. Introduces the possibility of code reuse. You can reuse an old view model with a new view or vice versa.
+3. Adding to the point above, in future you could import element-web view models to your project and supply your own views thus creating something similar to the [hydrogen sdk](https://github.com/element-hq/hydrogen-web/blob/master/doc/SDK.md).
+
+### Example
+
+We started experimenting with MVVM in the redesigned memberlist, you can see the code [here](https://github.com/vector-im/element-web/blob/develop/src/components/views/rooms/MemberList/MemberListView.tsx).

docs/SUMMARY.md

@@ -46,7 +46,6 @@
 - [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

@@ -155,7 +155,7 @@ complete re-branding/private labeling, a more personalised experience can be ach
     3. `show_once`: Optional. If true then the notice will only be shown once per device.
 18. `help_url`: The URL to point users to for help with the app, defaults to `https://element.io/help`.
 19. `help_encryption_url`: The URL to point users to for help with encryption, defaults to `https://element.io/help#encryption`.
-20. `force_verification`: If true, users must verify new logins (eg. with another device / their security key)
+20. `force_verification`: If true, users must verify new logins (eg. with another device / their recovery key)
 
 ### `desktop_builds` and `mobile_builds`
 
@@ -163,14 +163,14 @@ These two options describe the various availability for the application. When th
 such as trying to get the user to use an Android app or the desktop app for encrypted search, the config options will be looked
 at to see if the link should be to somewhere else.
 
-Starting with `desktop_builds`, the following subproperties are available:
+Starting with `desktop_builds`, the following sub-properties are available:
 
 1. `available`: Required. When `true`, the desktop app can be downloaded from somewhere.
 2. `logo`: Required. A URL to a logo (SVG), intended to be shown at 24x24 pixels.
 3. `url`: Required. The download URL for the app. This is used as a hyperlink.
 4. `url_macos`: Optional. Direct link to download macOS desktop app.
-5. `url_win32`: Optional. Direct link to download Windows 32-bit desktop app.
-6. `url_win64`: Optional. Direct link to download Windows 64-bit desktop app.
+5. `url_win64`: Optional. Direct link to download Windows x86 64-bit desktop app.
+6. `url_win64arm`: Optional. Direct link to download Windows ARM 64-bit desktop app.
 7. `url_linux`: Optional. Direct link to download Linux desktop app.
 
 When `desktop_builds` is not specified at all, the app will assume desktop downloads are available from https://element.io
@@ -384,8 +384,6 @@ 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
@@ -592,3 +590,4 @@ The following are undocumented or intended for developer use only.
 2. `sync_timeline_limit`
 3. `dangerously_allow_unsafe_and_insecure_passwords`
 4. `latex_maths_delims`: An optional setting to override the default delimiters used for maths parsing. See https://github.com/matrix-org/matrix-react-sdk/pull/5939 for details. Only used when `feature_latex_maths` is enabled.
+5. `modules`: An optional list of modules to load. This is used for testing and development purposes only.

docs/install.md

@@ -66,6 +66,18 @@ on other runtimes may require root privileges. To resolve this, either run the
 image as root (`docker run --user 0`) or, better, change the port that nginx
 listens on via the `ELEMENT_WEB_PORT` environment variable.
 
+[Element Web Modules](https://github.com/element-hq/element-modules/tree/main/packages/element-web-module-api) can be dynamically loaded
+by being made available (e.g. via bind mount) in a directory within `/modules/`.
+The default entrypoint will be index.js in that directory but can be overridden if a package.json file is found with a `main` directive.
+These modules will be presented in a `/modules` subdirectory within the webroot, and automatically added to the config.json `modules` field.
+
+If you wish to use docker in read-only mode,
+you should follow the [upstream instructions](https://hub.docker.com/_/nginx#:~:text=Running%20nginx%20in%20read%2Donly%20mode)
+but additionally include the following directories:
+
+- /tmp/
+- /etc/nginx/conf.d/
+
 The behaviour of the docker image can be customised via the following
 environment variables:
 

docs/labs.md

@@ -101,10 +101,6 @@ Under the hood this stops Element Web from adding the `perParticipantE2EE` flag
 
 This is useful while we experiment with encryption and to make calling compatible with platforms that don't use encryption yet.
 
-## Rich text in room topics (`feature_html_topic`) [In Development]
-
-Enables rendering of MD / HTML in room topics.
-
 ## Enable the notifications panel in the room header (`feature_notifications`)
 
 Unreliable in encrypted rooms.
@@ -112,3 +108,7 @@ Unreliable in encrypted rooms.
 ## Knock rooms (`feature_ask_to_join`) [In Development]
 
 Enables knock feature for rooms. This allows users to ask to join a room.
+
+## New room list (`feature_new_room_list`) [In Development]
+
+Enable the new room list that is currently in development.

docs/release.md

@@ -8,11 +8,13 @@
 
 #### develop
 
-The develop branch holds the very latest and greatest code we have to offer, as such it may be less stable. It corresponds to the develop.element.io CD platform.
+The develop branch holds the very latest and greatest code we have to offer, as such it may be less stable.
+It is auto-deployed on every commit to element-web or matrix-js-sdk to develop.element.io via GitHub Actions `build_develop.yml`.
 
 #### staging
 
 The staging branch corresponds to the very latest release regardless of whether it is an RC or not. Deployed to staging.element.io manually.
+It is auto-deployed on every release of element-web to staging.element.io via GitHub Actions `deploy.yml`.
 
 #### master
 
@@ -126,7 +128,7 @@ flowchart TD
 
     subgraph Deploying
         D1[\Deploy staging.element.io/]
-        D2[\Check dockerhub/]
+        D2[\Check docker build/]
         D3[\Deploy app.element.io/]
         D4[\Check desktop package/]
 
@@ -211,11 +213,11 @@ switched back to the version of the dependency from the master branch to not lea
 # Deploying
 
 We ship the SDKs to npm, this happens as part of the release process.
-We ship Element Web to dockerhub, `*.element.io`, and packages.element.io.
+We ship Element Web to dockerhub, ghcr.io, `*.element.io`, and packages.element.io.
 We ship Element Desktop to packages.element.io.
 
-- [ ] Check that element-web has shipped to dockerhub
-- [ ] Deploy staging.element.io. [See docs.](https://handbook.element.io/books/element-web-team/page/deploying-appstagingelementio)
+- [ ] Check that element-web has shipped to dockerhub & ghcr.io
+- [ ] Check that the staging [deployment](https://github.com/element-hq/element-web/actions/workflows/deploy.yml) has completed successfully
 - [ ] Test staging.element.io
 
 For final releases additionally do these steps:
@@ -225,6 +227,9 @@ For final releases additionally do these steps:
 - [ ] Ensure Element Web package has shipped to packages.element.io
 - [ ] Ensure Element Desktop packages have shipped to packages.element.io
 
+If you need to roll back a deployment to staging.element.io,
+you can run the `deploy.yml` automation choosing an older tag which you wish to deploy.
+
 # Housekeeping
 
 We have some manual housekeeping to do in order to prepare for the next release.

jest.config.ts

@@ -38,6 +38,8 @@ const config: Config = {
         "^!!raw-loader!.*": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
+        // Requires ESM which is incompatible with our current Jest setup
+        "^@element-hq/element-web-module-api$": "<rootDir>/__mocks__/empty.js",
     },
     transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
     collectCoverageFrom: [

knip.ts

@@ -19,6 +19,7 @@ export default {
     ignore: [
         // Keep for now
         "src/hooks/useLocalStorageState.ts",
+        "src/hooks/useTimeout.ts",
         "src/components/views/elements/InfoTooltip.tsx",
         "src/components/views/elements/StyledCheckbox.tsx",
     ],
@@ -39,6 +40,8 @@ export default {
         // Used by webpack
         "process",
         "util",
+        // Embedded into webapp
+        "@element-hq/element-call-embedded",
     ],
     ignoreBinaries: [
         // Used in scripts & workflows

module_system/installer.ts

@@ -9,7 +9,7 @@ import * as fs from "fs";
 import * as childProcess from "child_process";
 import * as semver from "semver";
 
-import { BuildConfig } from "./BuildConfig";
+import { type BuildConfig } from "./BuildConfig";
 
 // This expects to be run from ./scripts/install.ts
 
@@ -23,10 +23,9 @@ const MODULES_TS_HEADER = `
  * You are not a salmon.
  */
 
-import { RuntimeModule } from "@matrix-org/react-sdk-module-api/lib/RuntimeModule";
 `;
 const MODULES_TS_DEFINITIONS = `
-export const INSTALLED_MODULES: RuntimeModule[] = [];
+export const INSTALLED_MODULES = [];
 `;
 
 export function installer(config: BuildConfig): void {
@@ -78,8 +77,8 @@ export function installer(config: BuildConfig): void {
             return; // hit the finally{} block before exiting
         }
 
-        // If we reach here, everything seems fine. Write modules.ts and log some output
-        // Note: we compile modules.ts in two parts for developer friendliness if they
+        // If we reach here, everything seems fine. Write modules.js and log some output
+        // Note: we compile modules.js in two parts for developer friendliness if they
         // happen to look at it.
         console.log("The following modules have been installed: ", installedModules);
         let modulesTsHeader = MODULES_TS_HEADER;
@@ -193,5 +192,5 @@ function isModuleVersionCompatible(ourApiVersion: string, moduleApiVersion: stri
 }
 
 function writeModulesTs(content: string): void {
-    fs.writeFileSync("./src/modules.ts", content, "utf-8");
+    fs.writeFileSync("./src/modules.js", content, "utf-8");
 }

package.json

@@ -1,7 +1,7 @@
 {
     "name": "element-web",
-    "version": "1.11.90",
-    "description": "A feature-rich client for Matrix.org",
+    "version": "1.11.104",
+    "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
         "type": "git",
@@ -22,8 +22,7 @@
         "LICENSE",
         "README.md",
         "AUTHORS.rst",
-        "package.json",
-        "contribute.json"
+        "package.json"
     ],
     "style": "bundle.css",
     "matrix_i18n_extra_translation_funcs": [
@@ -62,37 +61,40 @@
         "test": "jest",
         "test:playwright": "playwright test",
         "test:playwright:open": "yarn test:playwright --ui",
-        "test:playwright:screenshots": "yarn test:playwright:screenshots:build && yarn test:playwright:screenshots:run",
-        "test:playwright:screenshots:build": "docker build playwright -t element-web-playwright",
-        "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v $(node -e 'console.log(require(`path`).dirname(require.resolve(`matrix-js-sdk/package.json`)))'):/work/node_modules/matrix-js-sdk -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright --grep @screenshot --project=Chrome",
+        "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"
+        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
+        "postinstall": "patch-package"
     },
     "resolutions": {
-        "@types/react": "18.3.18",
-        "@types/react-dom": "18.3.5",
-        "oidc-client-ts": "3.1.0",
+        "**/pretty-format/react-is": "19.1.0",
+        "@playwright/test": "1.52.0",
+        "@types/react": "19.1.6",
+        "@types/react-dom": "19.1.6",
+        "oidc-client-ts": "3.2.1",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001690",
+        "caniuse-lite": "1.0.30001721",
+        "testcontainers": "^11.0.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
+        "@element-hq/element-web-module-api": "1.2.0",
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
-        "@matrix-org/analytics-events": "^0.29.0",
-        "@matrix-org/emojibase-bindings": "^1.3.3",
+        "@matrix-org/analytics-events": "^0.29.2",
+        "@matrix-org/emojibase-bindings": "^1.3.4",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
-        "@sentry/browser": "^8.0.0",
+        "@sentry/browser": "^9.0.0",
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
-        "@vector-im/compound-design-tokens": "^2.1.0",
-        "@vector-im/compound-web": "^7.5.0",
-        "@vector-im/matrix-wysiwyg": "2.38.0",
+        "@vector-im/compound-design-tokens": "^4.0.0",
+        "@vector-im/compound-web": "^8.0.0",
+        "@vector-im/matrix-wysiwyg": "2.38.3",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -106,6 +108,7 @@
         "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",
@@ -114,15 +117,15 @@
         "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",
+        "linkify-react": "4.3.1",
+        "linkify-string": "4.3.1",
+        "linkifyjs": "4.3.1",
         "lodash": "^4.17.21",
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
@@ -135,21 +138,22 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.157.2",
+        "posthog-js": "1.249.4",
         "qrcode": "1.5.4",
-        "re-resizable": "6.10.3",
-        "react": "^18.3.1",
+        "re-resizable": "6.11.2",
+        "react": "^19.0.0",
         "react-beautiful-dnd": "^13.1.0",
         "react-blurhash": "^0.3.0",
-        "react-dom": "^18.3.1",
+        "react-dom": "^19.0.0",
         "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.14.0",
+        "sanitize-html": "2.17.0",
         "tar-js": "^0.3.0",
-        "temporal-polyfill": "^0.2.5",
+        "temporal-polyfill": "^0.3.0",
         "ua-parser-js": "^1.0.2",
         "uuid": "^11.0.0",
         "what-input": "^5.2.10"
@@ -157,13 +161,14 @@
     "devDependencies": {
         "@action-validator/cli": "^0.6.0",
         "@action-validator/core": "^0.6.0",
-        "@axe-core/playwright": "^4.8.1",
         "@babel/core": "^7.12.10",
         "@babel/eslint-parser": "^7.12.10",
         "@babel/eslint-plugin": "^7.12.10",
+        "@babel/plugin-proposal-decorators": "^7.25.9",
         "@babel/plugin-proposal-export-default-from": "^7.12.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-transform-class-properties": "^7.12.1",
+        "@babel/plugin-transform-class-static-block": "^7.26.0",
         "@babel/plugin-transform-logical-assignment-operators": "^7.20.7",
         "@babel/plugin-transform-nullish-coalescing-operator": "^7.12.1",
         "@babel/plugin-transform-numeric-separator": "^7.12.7",
@@ -175,13 +180,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.12.2",
+        "@element-hq/element-web-playwright-common": "^1.1.5",
         "@peculiar/webcrypto": "^1.4.3",
-        "@playwright/test": "^1.40.1",
+        "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
-        "@sentry/webpack-plugin": "^2.7.1",
-        "@stylistic/eslint-plugin": "^2.9.0",
+        "@rrweb/types": "^2.0.0-alpha.18",
+        "@sentry/webpack-plugin": "^3.0.0",
+        "@stylistic/eslint-plugin": "^4.0.0",
         "@svgr/webpack": "^8.0.0",
-        "@testcontainers/postgresql": "^10.16.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
         "@testing-library/react": "^16.0.0",
@@ -205,11 +212,11 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "18.3.18",
+        "@types/react": "19.1.6",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "18.3.5",
+        "@types/react-dom": "19.1.6",
         "@types/react-transition-group": "^4.4.0",
-        "@types/sanitize-html": "2.13.0",
+        "@types/sanitize-html": "2.16.0",
         "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
@@ -217,12 +224,12 @@
         "@typescript-eslint/eslint-plugin": "^8.19.0",
         "@typescript-eslint/parser": "^8.19.0",
         "babel-jest": "^29.0.0",
-        "babel-loader": "^9.0.0",
+        "babel-loader": "^10.0.0",
         "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
         "blob-polyfill": "^9.0.0",
         "chokidar": "^4.0.0",
         "concurrently": "^9.0.0",
-        "copy-webpack-plugin": "^12.0.0",
+        "copy-webpack-plugin": "^13.0.0",
         "core-js": "^3.38.1",
         "cronstrue": "^2.41.0",
         "css-loader": "^7.0.0",
@@ -230,7 +237,7 @@
         "dotenv": "^16.0.2",
         "eslint": "8.57.1",
         "eslint-config-google": "^0.14.0",
-        "eslint-config-prettier": "^9.0.0",
+        "eslint-config-prettier": "^10.0.0",
         "eslint-plugin-deprecate": "0.8.5",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-jest": "^28.0.0",
@@ -240,7 +247,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": "^4.18.2",
+        "express": "^5.0.0",
         "fake-indexeddb": "^6.0.0",
         "fetch-mock": "9.11.0",
         "fetch-mock-jest": "^1.5.1",
@@ -255,14 +262,14 @@
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",
         "knip": "^5.36.2",
-        "lint-staged": "^15.0.2",
-        "mailhog": "^4.16.0",
+        "lint-staged": "^16.0.0",
         "matrix-web-i18n": "^3.2.1",
         "mini-css-extract-plugin": "2.9.2",
         "minimist": "^1.2.6",
         "modernizr": "^3.12.0",
         "node-fetch": "^2.6.7",
-        "playwright-core": "^1.45.1",
+        "patch-package": "^8.0.0",
+        "playwright-core": "^1.51.0",
         "postcss": "8.4.46",
         "postcss-easings": "^4.0.0",
         "postcss-hexrgba": "2.1.0",
@@ -273,21 +280,20 @@
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.4.2",
+        "prettier": "3.5.3",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
-        "strip-ansi": "^7.1.0",
-        "stylelint": "^16.1.0",
-        "stylelint-config-standard": "^36.0.0",
+        "stylelint": "^16.13.0",
+        "stylelint-config-standard": "^38.0.0",
         "stylelint-scss": "^6.0.0",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
-        "testcontainers": "^10.16.0",
+        "testcontainers": "^11.0.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.7.2",
+        "typescript": "5.8.3",
         "util": "^0.12.5",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",
@@ -305,5 +311,6 @@
     },
     "engines": {
         "node": ">=20.0.0"
-    }
+    },
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

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

@@ -0,0 +1,13 @@
+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.1.4.patch

@@ -0,0 +1,31 @@
+diff --git a/node_modules/@types/react/index.d.ts b/node_modules/@types/react/index.d.ts
+index d3318dc..c2b2c77 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`.
+@@ -945,7 +945,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
+@@ -1117,7 +1117,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

@@ -0,0 +1,22 @@
+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

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { defineConfig, devices } from "@playwright/test";
 
-import { Options } from "./playwright/services";
+import { type WorkerOptions } from "./playwright/services";
 
 const baseURL = process.env["BASE_URL"] ?? "http://localhost:8080";
 
@@ -21,7 +21,7 @@ const chromeProject = {
     },
 };
 
-export default defineConfig<Options>({
+export default defineConfig<WorkerOptions>({
     projects: [
         {
             name: "Chrome",
@@ -83,6 +83,7 @@ export default defineConfig<Options>({
         url: `${baseURL}/config.json`,
         reuseExistingServer: true,
         timeout: (process.env.CI ? 30 : 120) * 1000,
+        stdout: "pipe",
     },
     testDir: "playwright/e2e",
     outputDir: "playwright/test-results",

playwright/@types/playwright-core.d.ts

@@ -1,12 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2024 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.
-*/
-
-declare module "playwright-core/lib/utils" {
-    // This type is not public in playwright-core utils
-    export function sanitizeForFilePath(filePath: string): string;
-}

playwright/Dockerfile

@@ -1,9 +0,0 @@
-FROM mcr.microsoft.com/playwright:v1.49.1-noble
-
-WORKDIR /work
-
-# fonts-dejavu is needed for the same RTL rendering as on CI
-RUN apt-get update && apt-get -y install docker.io fonts-dejavu
-
-COPY docker-entrypoint.sh /opt/docker-entrypoint.sh
-ENTRYPOINT ["bash", "/opt/docker-entrypoint.sh"]

playwright/docker-entrypoint.sh

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-set -e
-
-npx playwright test --update-snapshots --reporter line $@

playwright/e2e/audio-player/audio-player.spec.ts

@@ -11,7 +11,7 @@ import type { Locator, Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { Layout } from "../../../src/settings/enums/Layout";
-import { ElementAppPage } from "../../pages/ElementAppPage";
+import { type ElementAppPage } from "../../pages/ElementAppPage";
 
 // Find and click "Reply" button
 const clickButtonReply = async (tile: Locator) => {

playwright/e2e/crypto/backups-mas.spec.ts

@@ -11,6 +11,7 @@ import { registerAccountMas } from "../oidc";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 import { TestClientServerAPI } from "../csAPI";
 import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";
+import { checkDeviceIsConnectedKeyBackup } from "./utils";
 
 // These tests register an account with MAS because then we go through the "normal" registration flow
 // and crypto gets set up. Using the 'user' fixture create a user and synthesizes an existing login,
@@ -19,19 +20,34 @@ test.use(masHomeserver);
 test.describe("Encryption state after registration", () => {
     test.skip(isDendrite, "does not yet support MAS");
 
-    test("Key backup is enabled by default", async ({ page, mailhogClient, app }, testInfo) => {
+    test("Key backup is enabled by default", async ({ page, mailpitClient, app }, testInfo) => {
         await page.goto("/#/login");
         await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailhogClient, `alice_${testInfo.testId}`, "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(
+            page,
+            mailpitClient,
+            `alice_${testInfo.testId}`,
+            `alice_${testInfo.testId}@email.com`,
+            "Pa$sW0rD!",
+        );
 
-        await app.settings.openUserSettings("Security & Privacy");
-        await expect(page.getByText("This session is backing up your keys.")).toBeVisible();
+        // Wait for the ui to load
+        await expect(page.locator(".mx_MatrixChat")).toBeVisible();
+
+        // Recovery is not set up yet
+        await checkDeviceIsConnectedKeyBackup(app, "1", true, false);
     });
 
-    test("user is prompted to set up recovery", async ({ page, mailhogClient, app }, testInfo) => {
+    test("user is prompted to set up recovery", async ({ page, mailpitClient, app }, testInfo) => {
         await page.goto("/#/login");
         await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailhogClient, `alice_${testInfo.testId}`, "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(
+            page,
+            mailpitClient,
+            `alice_${testInfo.testId}`,
+            `alice_${testInfo.testId}@email.com`,
+            "Pa$sW0rD!",
+        );
 
         await page.getByRole("button", { name: "Add room" }).click();
         await page.getByRole("menuitem", { name: "New room" }).click();
@@ -47,7 +63,7 @@ test.describe("Key backup reset from elsewhere", () => {
 
     test("Key backup is disabled when reset from elsewhere", async ({
         page,
-        mailhogClient,
+        mailpitClient,
         request,
         homeserver,
     }, testInfo) => {
@@ -60,7 +76,7 @@ test.describe("Key backup reset from elsewhere", () => {
 
         await page.goto("/#/login");
         await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailhogClient, testUsername, "alice@email.com", testPassword);
+        await registerAccountMas(page, mailpitClient, testUsername, `${testUsername}@email.com`, testPassword);
 
         await page.getByRole("button", { name: "Add room" }).click();
         await page.getByRole("menuitem", { name: "New room" }).click();

playwright/e2e/crypto/backups.spec.ts

@@ -1,118 +0,0 @@
-/*
-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";
-
-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 currentDialogLocator = page.locator(".mx_Dialog");
-
-            // It's the first time and secure storage is not set up, so it will create one
-            await expect(currentDialogLocator.getByRole("heading", { name: "Set up Secure Backup" })).toBeVisible();
-            await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
-            await expect(currentDialogLocator.getByRole("heading", { name: "Save your Security Key" })).toBeVisible();
-            await currentDialogLocator.getByRole("button", { name: "Copy", exact: true }).click();
-            // copy the recovery key to use it later
-            const securityKey = await app.getClipboard();
-            await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
-
-            await expect(currentDialogLocator.getByRole("heading", { name: "Secure Backup successful" })).toBeVisible();
-            await currentDialogLocator.getByRole("button", { name: "Done", 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, "1");
-
-            await securityTab.getByRole("button", { name: "Delete Backup", exact: true }).click();
-            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: "Security Key" })).toBeVisible();
-            await currentDialogLocator.getByLabel("Security 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: "Security Key" })).toBeVisible();
-            // But cancel the security 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,9 +8,9 @@ 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, copyAndContinue, createSharedRoomWithUser, enableKeyBackup, verify } from "./utils";
-import { Bot } from "../../pages/bot";
-import { ElementAppPage } from "../../pages/ElementAppPage";
+import { autoJoin, createSharedRoomWithUser, enableKeyBackup, verify } from "./utils";
+import { type Bot } from "../../pages/bot";
+import { type ElementAppPage } from "../../pages/ElementAppPage";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 const checkDMRoom = async (page: Page) => {
@@ -21,7 +21,7 @@ const checkDMRoom = async (page: Page) => {
 };
 
 const startDMWithBob = async (page: Page, bob: Bot) => {
-    await page.locator(".mx_RoomList").getByRole("button", { name: "Start chat" }).click();
+    await page.locator(".mx_LegacyRoomList").getByRole("button", { name: "Start chat" }).click();
     await page.getByTestId("invite-dialog-input").fill(bob.credentials.userId);
     await page.locator(".mx_InviteDialog_tile_nameStack_name").getByText("Bob").click();
     await expect(
@@ -77,96 +77,43 @@ test.describe("Cryptography", function () {
         },
     });
 
-    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();
-            }
+    /**
+     * 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,
+        );
 
-            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();
-
-                const dialog = page.locator(".mx_Dialog");
-                // Recovery key is selected by default
-                await dialog.getByRole("button", { name: "Continue" }).click();
-                await copyAndContinue(page);
-
-                // If the device is unverified, there should be a "Setting up keys" step; however, it
-                // can be quite quick, and playwright can miss it, so we can't test for it.
-
-                // Either way, we end up at a success dialog:
-                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("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");
-            });
-        });
+        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("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 }) => {
-        const secretStorageKey = await enableKeyBackup(app);
+        await app.client.bootstrapCrossSigning(aliceCredentials);
+        await enableKeyBackup(app);
 
         // Fetch the current cross-signing keys
         async function fetchMasterKey() {
@@ -180,18 +127,15 @@ test.describe("Cryptography", function () {
                 return k;
             });
         }
+
         const masterKey1 = await fetchMasterKey();
 
-        // 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();
+        // Find "the Reset cryptographic identity" button
+        const encryptionTab = await app.settings.openUserSettings("Encryption");
+        await encryptionTab.getByRole("button", { name: "Reset cryptographic identity" }).click();
 
         // Confirm
-        await page.getByRole("button", { name: "Clear cross-signing keys" }).click();
-
-        // Enter the 4S key
-        await page.getByPlaceholder("Security Key").fill(secretStorageKey);
-        await page.getByRole("button", { name: "Continue" }).click();
+        await encryptionTab.getByRole("button", { name: "Continue" }).click();
 
         // Enter the password
         await page.getByPlaceholder("Password").fill(aliceCredentials.password);
@@ -201,9 +145,6 @@ 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

@@ -6,19 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { Locator, type Page } from "@playwright/test";
-
 import { test, expect } from "../../element-web-test";
-import { viewRoomSummaryByName } from "../right-panel/utils";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { createBot, logIntoElement } from "./utils.ts";
+import { type Client } from "../../pages/client.ts";
+import { type ElementAppPage } from "../../pages/ElementAppPage.ts";
 
-const ROOM_NAME = "Test room";
 const NAME = "Alice";
 
-function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
-}
-
 test.use({
     displayName: NAME,
     synapseConfig: {
@@ -27,73 +22,182 @@ test.use({
             msc3814_enabled: true,
         },
     },
-    config: async ({ config, context }, use) => {
-        const wellKnown = {
-            ...config.default_server_config,
-            "org.matrix.msc3814": true,
-        };
-
-        await context.route("https://localhost/.well-known/matrix/client", async (route) => {
-            await route.fulfill({ json: wellKnown });
-        });
-
-        await use(config);
-    },
 });
 
 test.describe("Dehydration", () => {
     test.skip(isDendrite, "does not yet support dehydration v2");
 
-    test("Create dehydrated device", async ({ page, user, app }, workerInfo) => {
-        // Create a backup (which will create SSSS, and dehydrated device)
+    test("Verify device and reset creates dehydrated device", async ({ page, user, credentials, app }, workerInfo) => {
+        // Verify the device by resetting the identity key, and then set up recovery (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();
 
-        const currentDialogLocator = page.locator(".mx_Dialog");
+        await app.closeDialog();
 
-        // It's the first time and secure storage is not set up, so it will create one
-        await expect(currentDialogLocator.getByRole("heading", { name: "Set up Secure Backup" })).toBeVisible();
-        await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
-        await expect(currentDialogLocator.getByRole("heading", { name: "Save your Security Key" })).toBeVisible();
-        await currentDialogLocator.getByRole("button", { name: "Copy", exact: true }).click();
-        await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
+        // Reset the identity 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 expect(currentDialogLocator.getByRole("heading", { name: "Secure Backup successful" })).toBeVisible();
-        await currentDialogLocator.getByRole("button", { name: "Done", exact: true }).click();
+        // Set up recovery
+        await page.getByRole("button", { name: "Set up recovery" }).click();
+        await page.getByRole("button", { name: "Continue" }).click();
+        const recoveryKey = await page.getByTestId("recoveryKey").innerText();
+        await page.getByRole("button", { name: "Continue" }).click();
+        await page.getByRole("textbox").fill(recoveryKey);
+        await page.getByRole("button", { name: "Finish set up" }).click();
+        await page.getByRole("button", { name: "Close" }).click();
 
-        // Open the settings again
-        await app.settings.openUserSettings("Security & Privacy");
-
-        // The Security tab should indicate that there is a dehydrated device present
-        await expect(securityTab.getByText("Offline device enabled")).toBeVisible();
-
-        await app.settings.closeDialog();
+        await expectDehydratedDeviceEnabled(app);
 
         // the dehydrated device gets created with the name "Dehydrated
         // device".  We want to make sure that it is not visible as a normal
         // device.
         const sessionsTab = await app.settings.openUserSettings("Sessions");
         await expect(sessionsTab.getByText("Dehydrated device")).not.toBeVisible();
+    });
+
+    test("'Set up recovery' creates dehydrated device", async ({ app, credentials, page }) => {
+        await logIntoElement(page, credentials);
+
+        const settingsDialogLocator = await app.settings.openUserSettings("Encryption");
+        await settingsDialogLocator.getByRole("button", { name: "Set up recovery" }).click();
+
+        // First it displays an informative panel about the recovery key
+        await expect(settingsDialogLocator.getByRole("heading", { name: "Set up recovery" })).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        // Next, it displays the new recovery key. We click on the copy button.
+        await expect(settingsDialogLocator.getByText("Save your recovery key somewhere safe")).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Copy" }).click();
+        const recoveryKey = await app.getClipboard();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        await expect(
+            settingsDialogLocator.getByText("Enter your recovery key to confirm", { exact: true }),
+        ).toBeVisible();
+        await settingsDialogLocator.getByRole("textbox").fill(recoveryKey);
+        await settingsDialogLocator.getByRole("button", { name: "Finish set up" }).click();
 
         await app.settings.closeDialog();
 
-        // now check that the user info right-panel shows the dehydrated device
-        // as a feature rather than as a normal device
-        await app.client.createRoom({ name: ROOM_NAME });
+        await expectDehydratedDeviceEnabled(app);
+    });
 
-        await viewRoomSummaryByName(page, app, ROOM_NAME);
+    test("Reset identity during login and set up recovery re-creates dehydrated device", async ({
+        page,
+        homeserver,
+        app,
+        credentials,
+    }) => {
+        // Set up cross-signing and recovery
+        const { botClient } = await createBot(page, homeserver, credentials);
+        // ... and dehydration
+        await botClient.evaluate(async (client) => await client.getCrypto().startDehydration());
 
-        await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
-        await expect(page.locator(".mx_MemberListView")).toBeVisible();
+        const initialDehydratedDeviceIds = await getDehydratedDeviceIds(botClient);
+        expect(initialDehydratedDeviceIds.length).toBe(1);
 
-        await getMemberTileByName(page, NAME).click();
-        await page.locator(".mx_UserInfo_devices .mx_UserInfo_expand").click();
+        await botClient.evaluate(async (client) => client.stopClient());
 
-        await expect(page.locator(".mx_UserInfo_devices").getByText("Offline device enabled")).toBeVisible();
-        await expect(page.locator(".mx_UserInfo_devices").getByText("Dehydrated device")).not.toBeVisible();
+        // Log in our client
+        await logIntoElement(page, credentials);
+
+        // Oh no, we forgot our recovery key - reset our identity
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Reset all" }).click();
+        await expect(
+            page.getByRole("heading", { name: "Are you sure you want to reset your identity?" }),
+        ).toBeVisible();
+        await page.getByRole("button", { name: "Continue", exact: true }).click();
+        await page.getByPlaceholder("Password").fill(credentials.password);
+        await page.getByRole("button", { name: "Continue" }).click();
+
+        // And set up recovery
+        const settings = await app.settings.openUserSettings("Encryption");
+        await settings.getByRole("button", { name: "Set up recovery" }).click();
+        await settings.getByRole("button", { name: "Continue" }).click();
+        const recoveryKey = await settings.getByTestId("recoveryKey").innerText();
+        await settings.getByRole("button", { name: "Continue" }).click();
+        await settings.getByRole("textbox").fill(recoveryKey);
+        await settings.getByRole("button", { name: "Finish set up" }).click();
+
+        // There should be a brand new dehydrated device
+        await expectDehydratedDeviceEnabled(app);
+    });
+
+    test("'Reset cryptographic identity' removes dehydrated device", async ({ page, homeserver, app, credentials }) => {
+        await logIntoElement(page, credentials);
+
+        // Create a dehydrated device by setting up recovery (see "'Set up
+        // recovery' creates dehydrated device" test above)
+        const settingsDialogLocator = await app.settings.openUserSettings("Encryption");
+        await settingsDialogLocator.getByRole("button", { name: "Set up recovery" }).click();
+
+        // First it displays an informative panel about the recovery key
+        await expect(settingsDialogLocator.getByRole("heading", { name: "Set up recovery" })).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        // Next, it displays the new recovery key. We click on the copy button.
+        await expect(settingsDialogLocator.getByText("Save your recovery key somewhere safe")).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Copy" }).click();
+        const recoveryKey = await app.getClipboard();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        await expect(
+            settingsDialogLocator.getByText("Enter your recovery key to confirm", { exact: true }),
+        ).toBeVisible();
+        await settingsDialogLocator.getByRole("textbox").fill(recoveryKey);
+        await settingsDialogLocator.getByRole("button", { name: "Finish set up" }).click();
+
+        await expectDehydratedDeviceEnabled(app);
+
+        // After recovery is set up, we reset our cryptographic identity, which
+        // should drop the dehydrated device.
+        await settingsDialogLocator.getByRole("button", { name: "Reset cryptographic identity" }).click();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        await expectDehydratedDeviceDisabled(app);
     });
 });
+
+async function getDehydratedDeviceIds(client: Client): Promise<string[]> {
+    return await client.evaluate(async (client) => {
+        const userId = client.getUserId();
+        const devices = await client.getCrypto().getUserDeviceInfo([userId]);
+        return Array.from(
+            devices
+                .get(userId)
+                .values()
+                .filter((d) => d.dehydrated)
+                .map((d) => d.deviceId),
+        );
+    });
+}
+
+/** Wait for our user to have a dehydrated device */
+async function expectDehydratedDeviceEnabled(app: ElementAppPage): Promise<void> {
+    // It might be nice to do this via the UI, but currently this info is not exposed via the UI.
+    //
+    // Note we might have to wait for the device list to be refreshed, so we wrap in `expect.poll`.
+    await expect
+        .poll(async () => {
+            const dehydratedDeviceIds = await getDehydratedDeviceIds(app.client);
+            return dehydratedDeviceIds.length;
+        })
+        .toEqual(1);
+}
+
+/** Wait for our user to not have a dehydrated device */
+async function expectDehydratedDeviceDisabled(app: ElementAppPage): Promise<void> {
+    // It might be nice to do this via the UI, but currently this info is not exposed via the UI.
+    //
+    // Note we might have to wait for the device list to be refreshed, so we wrap in `expect.poll`.
+    await expect
+        .poll(async () => {
+            const dehydratedDeviceIds = await getDehydratedDeviceIds(app.client);
+            return dehydratedDeviceIds.length;
+        })
+        .toEqual(0);
+}

playwright/e2e/crypto/device-verification.spec.ts

@@ -20,7 +20,9 @@ import {
     logIntoElement,
     waitForVerificationRequest,
 } from "./utils";
-import { Bot } from "../../pages/bot";
+import { type Bot } from "../../pages/bot";
+import { Toasts } from "../../pages/toasts.ts";
+import type { ElementAppPage } from "../../pages/ElementAppPage.ts";
 
 test.describe("Device verification", { tag: "@no-webkit" }, () => {
     let aliceBotClient: Bot;
@@ -29,7 +31,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
     let expectedBackupVersion: string;
 
     test.beforeEach(async ({ page, homeserver, credentials }) => {
-        const res = await createBot(page, homeserver, credentials);
+        const res = await createBot(page, homeserver, credentials, true);
         aliceBotClient = res.botClient;
         expectedBackupVersion = res.expectedBackupVersion;
     });
@@ -68,8 +70,53 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
 
         // Check that the current device is connected to key backup
         // For now we don't check that the backup key is in cache because it's a bit flaky,
-        // as we need to wait for the secret gossiping to happen and the settings dialog doesn't refresh automatically.
-        await checkDeviceIsConnectedKeyBackup(page, expectedBackupVersion, false);
+        // as we need to wait for the secret gossiping to happen.
+        await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false);
+    });
+
+    // Regression test for https://github.com/element-hq/element-web/issues/29110
+    test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => {
+        // Before we log in, the bot creates an encrypted room, so that we can test the toast behaviour that only happens
+        // when we are in an encrypted room.
+        await aliceBotClient.createRoom({
+            initial_state: [
+                {
+                    type: "m.room.encryption",
+                    state_key: "",
+                    content: { algorithm: "m.megolm.v1.aes-sha2" },
+                },
+            ],
+        });
+
+        // In order to simulate a real environment more accurately, we need to slow down the arrival of the
+        // `m.secret.send` to-device messages. That's slightly tricky to do directly, so instead we delay the *outgoing*
+        // `m.secret.request` messages.
+        await page.route("**/_matrix/client/v3/sendToDevice/m.secret.request/**", async (route) => {
+            await route.fulfill({ json: {} });
+            await new Promise((f) => setTimeout(f, 1000));
+            await route.fetch();
+        });
+
+        await logIntoElement(page, credentials);
+
+        // Launch the verification request between alice and the bot
+        const verificationRequest = await initiateAliceVerificationRequest(page);
+
+        // Handle emoji SAS verification
+        const infoDialog = page.locator(".mx_InfoDialog");
+        // the bot chooses to do an emoji verification
+        const verifier = await verificationRequest.evaluateHandle((request) => request.startVerification("m.sas.v1"));
+
+        // Handle emoji request and check that emojis are matching
+        await doTwoWaySasVerification(page, verifier);
+
+        await infoDialog.getByRole("button", { name: "They match" }).click();
+        await infoDialog.getByRole("button", { name: "Got it" }).click();
+
+        // There should be no toast (other than the notifications one)
+        const toasts = new Toasts(page);
+        await toasts.rejectToast("Notifications");
+        await toasts.assertNoToasts();
     });
 
     test("Verify device with QR code during login", async ({ page, app, credentials, homeserver }) => {
@@ -112,54 +159,57 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await checkDeviceIsCrossSigned(app);
 
         // Check that the current device is connected to key backup
-        // For now we don't check that the backup key is in cache because it's a bit flaky,
-        // as we need to wait for the secret gossiping to happen and the settings dialog doesn't refresh automatically.
-        await checkDeviceIsConnectedKeyBackup(page, expectedBackupVersion, false);
+        await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
     });
 
     test("Verify device with Security Phrase during login", async ({ page, app, credentials, homeserver }) => {
         await logIntoElement(page, credentials);
-
-        // Select the security phrase
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key or Phrase" }).click();
-
-        // Fill the passphrase
-        const dialog = page.locator(".mx_Dialog");
-        await dialog.locator("input").fill("new passphrase");
-        await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
-
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Done" }).click();
-
-        // Check that our device is now cross-signed
-        await checkDeviceIsCrossSigned(app);
-
-        // Check that the current device is connected to key backup
-        // The backup decryption key should be in cache also, as we got it directly from the 4S
-        await checkDeviceIsConnectedKeyBackup(page, expectedBackupVersion, true);
+        await enterRecoveryKeyAndCheckVerified(page, app, "new passphrase");
     });
 
-    test("Verify device with Security Key during login", async ({ page, app, credentials, homeserver }) => {
+    test("Verify device with Recovery Key during login", async ({ page, app, credentials, homeserver }) => {
+        const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey;
+
+        await logIntoElement(page, credentials);
+        await enterRecoveryKeyAndCheckVerified(page, app, recoveryKey);
+    });
+
+    test("Verify device with Recovery Key from settings", async ({ page, app, credentials }) => {
+        const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey;
+
         await logIntoElement(page, credentials);
 
-        // Select the security phrase
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key or Phrase" }).click();
+        /* Dismiss "Verify this device" */
+        const authPage = page.locator(".mx_AuthPage");
+        await authPage.getByRole("button", { name: "Skip verification for now" }).click();
+        await authPage.getByRole("button", { name: "I'll verify later" }).click();
+        await page.waitForSelector(".mx_MatrixChat");
 
-        // Fill the security key
+        const settings = await app.settings.openUserSettings("Encryption");
+        await settings.getByRole("button", { name: "Verify this device" }).click();
+        await enterRecoveryKeyAndCheckVerified(page, app, recoveryKey);
+    });
+
+    /** Helper for the three tests above which verify by recovery key */
+    async function enterRecoveryKeyAndCheckVerified(page: Page, app: ElementAppPage, recoveryKey: string) {
+        await page.getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();
+
+        // Enter the recovery key
         const dialog = page.locator(".mx_Dialog");
-        await dialog.getByRole("button", { name: "use your Security Key" }).click();
-        const aliceRecoveryKey = await aliceBotClient.getRecoveryKey();
-        await dialog.locator("#mx_securityKey").fill(aliceRecoveryKey.encodedPrivateKey);
-        await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
+        // We use `pressSequentially` here to make sure that the FocusLock isn't causing us any problems
+        // (cf https://github.com/element-hq/element-web/issues/30089)
+        await dialog.locator("textarea").pressSequentially(recoveryKey);
+        await dialog.getByRole("button", { name: "Continue", disabled: false }).click();
 
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Done" }).click();
+        await page.getByRole("button", { name: "Done" }).click();
 
         // Check that our device is now cross-signed
         await checkDeviceIsCrossSigned(app);
 
         // Check that the current device is connected to key backup
         // The backup decryption key should be in cache also, as we got it directly from the 4S
-        await checkDeviceIsConnectedKeyBackup(page, expectedBackupVersion, true);
-    });
+        await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
+    }
 
     test("Handle incoming verification request with SAS", async ({ page, credentials, homeserver, toasts }) => {
         await logIntoElement(page, credentials);

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

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { Locator } from "@playwright/test";
+import { type Locator } from "@playwright/test";
 
 import { expect, test } from "../../element-web-test";
 import {
@@ -17,9 +17,10 @@ import {
     logIntoElement,
     logOutOfElement,
     verify,
+    waitForDevices,
 } from "./utils";
 import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
-import { ElementAppPage } from "../../pages/ElementAppPage.ts";
+import { type ElementAppPage } from "../../pages/ElementAppPage.ts";
 
 test.describe("Cryptography", function () {
     test.use({
@@ -66,8 +67,9 @@ test.describe("Cryptography", function () {
             // Bob has a second, not cross-signed, device
             const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
 
-            // Dismiss the toast nagging us to set up recovery otherwise it gets in the way of clicking the room list
-            await page.getByRole("button", { name: "Not now" }).click();
+            // Dismiss the toasts nagging us, otherwise they get in the way of clicking the room list
+            await page.getByRole("button", { name: "Dismiss" }).click();
+            await page.getByRole("button", { name: "Yes, dismiss" }).click();
 
             await bob.sendEvent(testRoomId, null, "m.room.encrypted", {
                 algorithm: "m.megolm.v1.aes-sha2",
@@ -144,25 +146,8 @@ test.describe("Cryptography", function () {
             // bob deletes his second device
             await bobSecondDevice.evaluate((cli) => cli.logout(true));
 
-            // wait for the logout to propagate. Workaround for https://github.com/vector-im/element-web/issues/26263 by repeatedly closing and reopening Bob's user info.
-            async function awaitOneDevice(iterations = 1) {
-                const rightPanel = page.locator(".mx_RightPanel");
-                await rightPanel.getByTestId("base-card-back-button").click();
-                await rightPanel.getByText("Bob").click();
-                const sessionCountText = await rightPanel
-                    .locator(".mx_UserInfo_devices")
-                    .getByText(" session", { exact: false })
-                    .textContent();
-                // cf https://github.com/vector-im/element-web/issues/26279: Element-R uses the wrong text here
-                if (sessionCountText != "1 session" && sessionCountText != "1 verified session") {
-                    if (iterations >= 10) {
-                        throw new Error(`Bob still has ${sessionCountText} after 10 iterations`);
-                    }
-                    await awaitOneDevice(iterations + 1);
-                }
-            }
-
-            await awaitOneDevice();
+            // wait for the logout to propagate.
+            await waitForDevices(app, bob.credentials.userId, 1);
 
             // close and reopen the room, to get the shield to update.
             await app.viewRoomByName("Bob");
@@ -285,11 +270,7 @@ test.describe("Cryptography", function () {
             // Workaround for https://github.com/element-hq/element-web/issues/28640:
             // make sure that Alice has seen Bob's identity before she goes offline. We do this by opening
             // his user info.
-            await app.toggleRoomInfoPanel();
-            const rightPanel = page.locator(".mx_RightPanel");
-            await rightPanel.getByRole("menuitem", { name: "People" }).click();
-            await rightPanel.getByRole("button", { name: bob.credentials!.userId }).click();
-            await expect(rightPanel.locator(".mx_UserInfo_devices")).toContainText("1 session");
+            await waitForDevices(app, bob.credentials.userId, 1);
 
             // Our app is blocked from syncing while Bob sends his messages.
             await app.client.network.goOffline();
@@ -344,7 +325,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 has changed",
+                "Sender's verified identity was reset",
             );
         });
     });

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 has changed");
+        await expect(lastTile).toContainText("Sender's verified identity was reset");
     });
 });

playwright/e2e/crypto/toasts.spec.ts

@@ -0,0 +1,167 @@
+/*
+ * 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 { type GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
+
+import { test, expect } from "../../element-web-test";
+import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement } from "./utils";
+import { type Bot } from "../../pages/bot";
+
+test.describe("Key storage out of sync toast", () => {
+    let recoveryKey: GeneratedSecretStorageKey;
+
+    test.beforeEach(async ({ page, homeserver, credentials }) => {
+        const res = await createBot(page, homeserver, credentials);
+        recoveryKey = res.recoveryKey;
+
+        await logIntoElement(page, credentials, recoveryKey.encodedPrivateKey);
+
+        await deleteCachedSecrets(page);
+
+        // We won't be prompted for crypto setup unless we have an e2e room, so make one
+        await page.getByRole("button", { name: "Add room" }).click();
+        await page.getByRole("menuitem", { name: "New room" }).click();
+        await page.getByRole("textbox", { name: "Name" }).fill("Test room");
+        await page.getByRole("button", { name: "Create room" }).click();
+    });
+
+    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.
+        await expect(page.getByRole("alert")).toHaveCount(2);
+        await expect(page.getByRole("alert").first()).toMatchScreenshot("key-storage-out-of-sync-toast.png");
+
+        await page.getByRole("button", { name: "Enter recovery key" }).click();
+
+        await page.getByRole("textbox", { name: "Recovery Key" }).fill(recoveryKey.encodedPrivateKey);
+        await page.getByRole("button", { name: "Continue" }).click();
+
+        await expect(page.getByRole("button", { name: "Enter recovery key" })).not.toBeVisible();
+    });
+
+    test("should open settings to reset flow if 'forgot recovery key' pressed", async ({ page, app, credentials }) => {
+        await expect(page.getByRole("button", { name: "Enter recovery key" })).toBeVisible();
+
+        await page.getByRole("button", { name: "Forgot recovery key?" }).click();
+
+        await expect(
+            page.getByRole("heading", { name: "Forgot your recovery key? You’ll need to reset your identity." }),
+        ).toBeVisible();
+    });
+});
+
+test.describe("'Turn on key storage' toast", () => {
+    let botClient: Bot | undefined;
+
+    test.beforeEach(async ({ page, homeserver, credentials, toasts }) => {
+        // Set up all crypto stuff. Key storage defaults to on.
+
+        const res = await createBot(page, homeserver, credentials);
+        const recoveryKey = res.recoveryKey;
+        botClient = res.botClient;
+
+        await logIntoElement(page, credentials, recoveryKey.encodedPrivateKey);
+
+        // We won't be prompted for crypto setup unless we have an e2e room, so make one
+        await page.getByRole("button", { name: "Add room" }).click();
+        await page.getByRole("menuitem", { name: "New room" }).click();
+        await page.getByRole("textbox", { name: "Name" }).fill("Test room");
+        await page.getByRole("button", { name: "Create room" }).click();
+
+        await toasts.rejectToast("Notifications");
+    });
+
+    test("should not show toast if key storage is on", async ({ page, toasts }) => {
+        // Given the default situation after signing in
+        // Then no toast is shown (because key storage is on)
+        await toasts.assertNoToasts();
+
+        // When we reload
+        await page.reload();
+
+        // Give the toasts time to appear
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+
+        // Then still no toast is shown
+        await toasts.assertNoToasts();
+    });
+
+    test("should not show toast if key storage is off because we turned it off", async ({ app, page, toasts }) => {
+        // Given the backup is disabled because we disabled it
+        await disableKeyBackup(app);
+
+        // Then no toast is shown
+        await toasts.assertNoToasts();
+
+        // When we reload
+        await page.reload();
+
+        // Give the toasts time to appear
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+
+        // Then still no toast is shown
+        await toasts.assertNoToasts();
+    });
+
+    test("should show toast if key storage is off but account data is missing", async ({ app, page, toasts }) => {
+        // Given the backup is disabled but we didn't set account data saying that is expected
+        await disableKeyBackup(app);
+        await botClient.setAccountData("m.org.matrix.custom.backup_disabled", { disabled: false });
+
+        // Wait for the account data setting to stick
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+
+        // When we enter the app
+        await page.reload();
+
+        // Then the toast is displayed
+        let toast = await toasts.getToast("Turn on key storage");
+
+        // And when we click "Continue"
+        await toast.getByRole("button", { name: "Continue" }).click();
+
+        // Then we see the Encryption settings dialog with an option to turn on key storage
+        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
+
+        // And when we close that
+        await page.getByRole("button", { name: "Close dialog" }).click();
+
+        // Then we see the toast again
+        toast = await toasts.getToast("Turn on key storage");
+
+        // And when we click "Dismiss"
+        await toast.getByRole("button", { name: "Dismiss" }).click();
+
+        // Then we see the "are you sure?" dialog
+        await expect(
+            page.getByRole("heading", { name: "Are you sure you want to keep key storage turned off?" }),
+        ).toBeVisible();
+
+        // And when we close it by clicking away
+        await page.getByTestId("dialog-background").click({ force: true, position: { x: 10, y: 10 } });
+
+        // Then we see the toast again
+        toast = await toasts.getToast("Turn on key storage");
+
+        // And when we click Dismiss and then "Go to Settings"
+        await toast.getByRole("button", { name: "Dismiss" }).click();
+        await page.getByRole("button", { name: "Go to Settings" }).click();
+
+        // Then we see Encryption settings again
+        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
+
+        // And when we close that, see the toast, click Dismiss, and Yes, Dismiss
+        await page.getByRole("button", { name: "Close dialog" }).click();
+        toast = await toasts.getToast("Turn on key storage");
+        await toast.getByRole("button", { name: "Dismiss" }).click();
+        await page.getByRole("button", { name: "Yes, dismiss" }).click();
+
+        // Then the toast is gone
+        await toasts.assertNoToasts();
+    });
+});

playwright/e2e/crypto/user-verification.spec.ts

@@ -8,10 +8,9 @@ Please see LICENSE files in the repository root for full details.
 
 import { type Preset, type Visibility } from "matrix-js-sdk/src/matrix";
 
-import type { Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
-import { doTwoWaySasVerification, awaitVerifier } from "./utils";
-import { Client } from "../../pages/client";
+import { doTwoWaySasVerification, awaitVerifier, waitForDevices } from "./utils";
+import { type Client } from "../../pages/client";
 
 test.describe("User verification", () => {
     // note that there are other tests that check user verification works in `crypto.spec.ts`.
@@ -33,13 +32,17 @@ test.describe("User verification", () => {
     });
 
     test("can receive a verification request when there is no existing DM", async ({
+        app,
         page,
         bot: bob,
         user: aliceCredentials,
         toasts,
         room: { roomId: dmRoomId },
     }) => {
-        await waitForDeviceKeys(page);
+        await waitForDevices(app, bob.credentials.userId, 1);
+        await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
+        const avatar = page.getByRole("button", { name: "Avatar" });
+        await avatar.click();
 
         // once Alice has joined, Bob starts the verification
         const bobVerificationRequest = await bob.evaluateHandle(
@@ -84,13 +87,17 @@ test.describe("User verification", () => {
     });
 
     test("can abort emoji verification when emoji mismatch", async ({
+        app,
         page,
         bot: bob,
         user: aliceCredentials,
         toasts,
         room: { roomId: dmRoomId },
     }) => {
-        await waitForDeviceKeys(page);
+        await waitForDevices(app, bob.credentials.userId, 1);
+        await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
+        const avatar = page.getByRole("button", { name: "Avatar" });
+        await avatar.click();
 
         // once Alice has joined, Bob starts the verification
         const bobVerificationRequest = await bob.evaluateHandle(
@@ -154,15 +161,3 @@ async function createDMRoom(client: Client, userId: string): Promise<string> {
         ],
     });
 }
-
-/**
- * Wait until we get the other user's device keys.
- * In newer rust-crypto versions, the verification request will be ignored if we
- * don't have the sender's device keys.
- */
-async function waitForDeviceKeys(page: Page): Promise<void> {
-    await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
-    const avatar = await page.getByRole("button", { name: "Avatar" });
-    await avatar.click();
-    await expect(page.getByText("1 session")).toBeVisible();
-}

playwright/e2e/crypto/utils.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { expect, JSHandle, type Page } from "@playwright/test";
+import { expect, type JSHandle, type Page } from "@playwright/test";
 
 import type { ICreateRoomOpts, MatrixClient } from "matrix-js-sdk/src/matrix";
 import type {
@@ -18,9 +18,9 @@ import type {
     Verifier,
     VerifierEvent,
 } from "matrix-js-sdk/src/crypto-api";
-import { Credentials, HomeserverInstance } from "../../plugins/homeserver";
-import { Client } from "../../pages/client";
-import { ElementAppPage } from "../../pages/ElementAppPage";
+import { type Credentials, type HomeserverInstance } from "../../plugins/homeserver";
+import { type Client } from "../../pages/client";
+import { type ElementAppPage } from "../../pages/ElementAppPage";
 import { Bot } from "../../pages/bot";
 
 /**
@@ -28,11 +28,13 @@ import { Bot } from "../../pages/bot";
  * @param page - the playwright `page` fixture
  * @param homeserver - the homeserver to use
  * @param credentials - the credentials to use for the bot client
+ * @param usePassphrase - whether to use a passphrase when creating the recovery key
  */
 export async function createBot(
     page: Page,
     homeserver: HomeserverInstance,
     credentials: Credentials,
+    usePassphrase = false,
 ): Promise<{ botClient: Bot; recoveryKey: GeneratedSecretStorageKey; expectedBackupVersion: string }> {
     // Visit the login page of the app, to load the matrix sdk
     await page.goto("/#/login");
@@ -44,6 +46,7 @@ export async function createBot(
     const botClient = new Bot(page, homeserver, {
         bootstrapCrossSigning: true,
         bootstrapSecretStorage: true,
+        usePassphrase,
     });
     botClient.setCredentials(credentials);
     // Backup is prepared in the background. Poll until it is ready.
@@ -139,14 +142,16 @@ export async function checkDeviceIsCrossSigned(app: ElementAppPage): Promise<voi
  * Check that the current device is connected to the expected key backup.
  * Also checks that the decryption key is known and cached locally.
  *
- * @param page - the page to check
+ * @param app -` ElementAppPage` wrapper for the playwright `Page`.
  * @param expectedBackupVersion - the version of the backup we expect to be connected to.
- * @param checkBackupKeyInCache - whether to check that the backup key is cached locally.
+ * @param checkBackupPrivateKeyInCache - whether to check that the backup decryption key is cached locally
+ * @param checkBackupKeyIn4S - whether to check that the backup key is stored in 4S
  */
 export async function checkDeviceIsConnectedKeyBackup(
-    page: Page,
+    app: ElementAppPage,
     expectedBackupVersion: string,
-    checkBackupKeyInCache: boolean,
+    checkBackupPrivateKeyInCache: boolean,
+    checkBackupKeyIn4S: boolean = true,
 ): Promise<void> {
     // Sanity check the given backup version: if it's null, something went wrong earlier in the test.
     if (!expectedBackupVersion) {
@@ -155,23 +160,48 @@ export async function checkDeviceIsConnectedKeyBackup(
         );
     }
 
-    await page.getByRole("button", { name: "User menu" }).click();
-    await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Security & Privacy" }).click();
-    await expect(page.locator(".mx_Dialog").getByRole("button", { name: "Restore from Backup" })).toBeVisible();
+    const backupData = await app.client.evaluate(async (client: MatrixClient) => {
+        const crypto = client.getCrypto();
+        if (!crypto) return;
 
-    // expand the advanced section to see the active version in the reports
-    await page.locator(".mx_SecureBackupPanel_advanced").locator("..").click();
+        const backupInfo = await crypto.getKeyBackupInfo();
+        const backupKeyIn4S = Boolean(await client.isKeyBackupKeyStored());
+        const backupPrivateKeyFromCache = await crypto.getSessionBackupPrivateKey();
+        const hasBackupPrivateKeyFromCache = Boolean(backupPrivateKeyFromCache);
+        const backupPrivateKeyWellFormed = backupPrivateKeyFromCache instanceof Uint8Array;
+        const activeBackupVersion = await crypto.getActiveSessionBackupVersion();
 
-    if (checkBackupKeyInCache) {
-        const cacheDecryptionKeyStatusElement = page.locator(".mx_SecureBackupPanel_statusList tr:nth-child(2) td");
-        await expect(cacheDecryptionKeyStatusElement).toHaveText("cached locally, well formed");
+        return {
+            backupInfo,
+            hasBackupPrivateKeyFromCache,
+            backupPrivateKeyWellFormed,
+            backupKeyIn4S,
+            activeBackupVersion,
+        };
+    });
+
+    if (!backupData) {
+        throw new Error("Crypto module is not available");
     }
 
-    await expect(page.locator(".mx_SecureBackupPanel_statusList tr:nth-child(5) td")).toHaveText(
-        expectedBackupVersion + " (Algorithm: m.megolm_backup.v1.curve25519-aes-sha2)",
-    );
+    const { backupInfo, backupKeyIn4S, hasBackupPrivateKeyFromCache, backupPrivateKeyWellFormed, activeBackupVersion } =
+        backupData;
 
-    await expect(page.locator(".mx_SecureBackupPanel_statusList tr:nth-child(6) td")).toHaveText(expectedBackupVersion);
+    // We have a key backup
+    expect(backupInfo).toBeDefined();
+    // The key backup version is as expected
+    expect(backupInfo.version).toBe(expectedBackupVersion);
+    // The active backup version is as expected
+    expect(activeBackupVersion).toBe(expectedBackupVersion);
+    // The backup key is stored in 4S
+    if (checkBackupKeyIn4S) expect(backupKeyIn4S).toBe(true);
+
+    if (checkBackupPrivateKeyInCache) {
+        // The backup key is available locally
+        expect(hasBackupPrivateKeyFromCache).toBe(true);
+        // The backup key is well-formed
+        expect(backupPrivateKeyWellFormed).toBe(true);
+    }
 }
 
 /**
@@ -188,10 +218,18 @@ export async function logIntoElement(page: Page, credentials: Credentials, secur
 
     // if a securityKey was given, verify the new device
     if (securityKey !== undefined) {
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key" }).click();
-        // Fill in the security key
-        await page.locator(".mx_Dialog").locator('input[type="password"]').fill(securityKey);
-        await page.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
+        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();
+        }
+        // Fill in the recovery key
+        await page.locator(".mx_Dialog").locator("textarea").fill(securityKey);
+        await page.getByRole("button", { name: "Continue", disabled: false }).click();
         await page.getByRole("button", { name: "Done" }).click();
     }
 }
@@ -216,18 +254,19 @@ export async function logOutOfElement(page: Page, discardKeys: boolean = false)
 }
 
 /**
- * Open the security settings, and verify the current session using the security key.
+ * Open the encryption settings, and verify the current session using the recovery key.
  *
  * @param app - `ElementAppPage` wrapper for the playwright `Page`.
- * @param securityKey - The security key (i.e., 4S key), set up during a previous session.
+ * @param securityKey - The recovery key (i.e., 4S key), set up during a previous session.
  */
 export async function verifySession(app: ElementAppPage, securityKey: string) {
-    const settings = await app.settings.openUserSettings("Security & Privacy");
-    await settings.getByRole("button", { name: "Verify this session" }).click();
-    await app.page.getByRole("button", { name: "Verify with Security Key" }).click();
-    await app.page.locator(".mx_Dialog").locator('input[type="password"]').fill(securityKey);
+    const settings = await app.settings.openUserSettings("Encryption");
+    await settings.getByRole("button", { name: "Verify this device" }).click();
+    await app.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
+    await app.page.locator(".mx_Dialog").locator("textarea").fill(securityKey);
     await app.page.getByRole("button", { name: "Continue", disabled: false }).click();
     await app.page.getByRole("button", { name: "Done" }).click();
+    await app.settings.closeDialog();
 }
 
 /**
@@ -253,32 +292,95 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
 }
 
 /**
- * Open the security settings and enable secure key backup.
+ * Open the encryption settings and enable key storage and recovery
+ * Assumes that the current device has been verified
  *
- * Assumes that the current device has been cross-signed (which means that we skip a step where we set it up).
- *
- * Returns the security key
+ * Returns the recovery key
  */
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
-    await app.settings.openUserSettings("Security & Privacy");
-    await app.page.getByRole("button", { name: "Set up Secure Backup" }).click();
-    const dialog = app.page.locator(".mx_Dialog");
-    // Recovery key is selected by default
-    await dialog.getByRole("button", { name: "Continue" }).click({ timeout: 60000 });
+    const encryptionTab = await app.settings.openUserSettings("Encryption");
 
-    // copy the text ourselves
-    const securityKey = await dialog.locator(".mx_CreateSecretStorageDialog_recoveryKey code").textContent();
-    await copyAndContinue(app.page);
+    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+    if (!(await keyStorageToggle.isChecked())) {
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+    }
 
-    await expect(dialog.getByText("Secure Backup successful")).toBeVisible();
-    await dialog.getByRole("button", { name: "Done" }).click();
-    await expect(dialog.getByText("Secure Backup successful")).not.toBeVisible();
+    await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
+    await encryptionTab.getByRole("button", { name: "Continue" }).click();
 
-    return securityKey;
+    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;
 }
 
 /**
- * Click on copy and continue buttons to dismiss the security key dialog
+ * Open the encryption settings and disable key storage (and recovery)
+ * Assumes that the current device has been verified
+ */
+export async function disableKeyBackup(app: ElementAppPage): Promise<void> {
+    const encryptionTab = await app.settings.openUserSettings("Encryption");
+
+    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: "Delete key storage" }).click();
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).isVisible();
+
+        // Wait for the update to account data to stick
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+    }
+    await app.settings.closeDialog();
+}
+
+/**
+ * Go through the "Set up Secure Backup" dialog (aka the `CreateSecretStorageDialog`).
+ *
+ * Assumes the dialog is already open for some reason (see also {@link enableKeyBackup}).
+ *
+ * @param page - The playwright `Page` fixture.
+ * @param opts - Options object
+ * @param opts.accountPassword - The user's account password. If we are also resetting cross-signing, then we will need
+ *   to upload the public cross-signing keys, which will cause the app to prompt for the password.
+ *
+ * @returns the new recovery key.
+ */
+export async function completeCreateSecretStorageDialog(
+    page: Page,
+    opts?: { accountPassword?: string },
+): Promise<string> {
+    const currentDialogLocator = page.locator(".mx_Dialog");
+
+    await expect(currentDialogLocator.getByRole("heading", { name: "Set up Secure Backup" })).toBeVisible();
+    // "Generate a Recovery Key" is selected by default
+    await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
+    await expect(currentDialogLocator.getByRole("heading", { name: "Save your Recovery Key" })).toBeVisible();
+    await currentDialogLocator.getByRole("button", { name: "Copy", exact: true }).click();
+    // copy the recovery key to use it later
+    const recoveryKey = await page.evaluate(() => navigator.clipboard.readText());
+    await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
+
+    // If the device is unverified, there should be a "Setting up keys" step.
+    // If this is not the first time we are setting up cross-signing, the app will prompt for our password; otherwise
+    // the step is quite quick, and playwright can miss it, so we can't test for it.
+    if (opts && Object.hasOwn(opts, "accountPassword")) {
+        await expect(currentDialogLocator.getByRole("heading", { name: "Setting up keys" })).toBeVisible();
+        await page.getByPlaceholder("Password").fill(opts!.accountPassword);
+        await currentDialogLocator.getByRole("button", { name: "Continue" }).click();
+    }
+
+    // Either way, we end up at a success dialog:
+    await expect(currentDialogLocator.getByRole("heading", { name: "Secure Backup successful" })).toBeVisible();
+    await currentDialogLocator.getByRole("button", { name: "Done", exact: true }).click();
+    await expect(currentDialogLocator.getByText("Secure Backup successful")).not.toBeVisible();
+
+    return recoveryKey;
+}
+
+/**
+ * Click on copy and continue buttons to dismiss the recovery key dialog
  */
 export async function copyAndContinue(page: Page) {
     await page.getByRole("button", { name: "Copy" }).click();
@@ -435,3 +537,31 @@ export async function deleteCachedSecrets(page: Page) {
     });
     await page.reload();
 }
+
+/**
+ * Wait until the given user has a given number of devices.
+ * This function will check the device keys ten times and if
+ * the expected number of devices were not found by then, an
+ * error is thrown.
+ */
+export async function waitForDevices(
+    app: ElementAppPage,
+    userId: string,
+    expectedNumberOfDevices: number,
+): Promise<void> {
+    const result = await app.client.evaluate(
+        async (cli, { userId, expectedNumberOfDevices }) => {
+            for (let i = 0; i < 10; ++i) {
+                const userDeviceMap = await cli.getCrypto()?.getUserDeviceInfo([userId], true);
+                const deviceMap = userDeviceMap?.get(userId);
+                if (deviceMap.size === expectedNumberOfDevices) return true;
+                await new Promise((r) => setTimeout(r, 500));
+            }
+            return false;
+        },
+        { userId, expectedNumberOfDevices },
+    );
+    if (!result) {
+        throw new Error(`User ${userId} did not have ${expectedNumberOfDevices} devices within ten iterations!`);
+    }
+}

playwright/e2e/csAPI.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { APIRequestContext } from "playwright-core";
-import { KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
+import { type APIRequestContext } from "@playwright/test";
+import { type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
+import { ClientServerApi } from "@element-hq/element-web-playwright-common/lib/utils/api.js";
 
-import { HomeserverInstance } from "../plugins/homeserver";
-import { ClientServerApi } from "../plugins/utils/api.ts";
+import { type HomeserverInstance } from "../plugins/homeserver";
 
 /**
  * A small subset of the Client-Server API used to manipulate the state of the

playwright/e2e/editing/editing.spec.ts

@@ -6,11 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { Locator, Page } from "@playwright/test";
+import { type Locator, type Page } from "@playwright/test";
 
 import type { EventType, IContent, ISendEventResponse, MsgType, Visibility } from "matrix-js-sdk/src/matrix";
 import { expect, test } from "../../element-web-test";
-import { ElementAppPage } from "../../pages/ElementAppPage";
+import { type ElementAppPage } from "../../pages/ElementAppPage";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
@@ -267,7 +267,6 @@ test.describe("Editing", () => {
         app,
         room,
         axe,
-        checkA11y,
     }) => {
         axe.disableRules("color-contrast"); // XXX: We have some known contrast issues here
 
@@ -282,7 +281,7 @@ test.describe("Editing", () => {
             const line = tile.locator(".mx_EventTile_line");
             await line.hover();
             await line.getByRole("button", { name: "Edit" }).click();
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
             const editComposer = page.getByRole("textbox", { name: "Edit message" });
             await editComposer.pressSequentially("Foo");
             await editComposer.press("Backspace");
@@ -290,7 +289,7 @@ test.describe("Editing", () => {
             await editComposer.press("Backspace");
             await editComposer.press("Enter");
             await app.getComposerField().hover(); // XXX: move the hover to get rid of the "Edit" tooltip
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
         }
         await expect(
             page.locator(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", { hasText: "Message" }),
@@ -305,7 +304,6 @@ test.describe("Editing", () => {
         user,
         app,
         axe,
-        checkA11y,
         bot: bob,
     }) => {
         // This tests the behaviour when a message has been edited some time after it has been sent, and we

playwright/e2e/forgot-password/forgot-password.spec.ts

@@ -6,22 +6,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { expect, test as base } from "../../element-web-test";
+import { type CredentialsWithDisplayName, expect, test as base } from "../../element-web-test";
 import { selectHomeserver } from "../utils";
 import { emailHomeserver } from "../../plugins/homeserver/synapse/emailHomeserver.ts";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { Credentials } from "../../plugins/homeserver";
 
 const email = "user@nowhere.dummy";
 
-const test = base.extend<{ credentials: Pick<Credentials, "username" | "password"> }>({
+const test = base.extend({
     // eslint-disable-next-line no-empty-pattern
     credentials: async ({}, use, testInfo) => {
         await use({
             username: `user_${testInfo.testId}`,
             // this has to be password-like enough to please zxcvbn. Needless to say it's just from pwgen.
             password: "oETo7MPf0o",
-        });
+        } as CredentialsWithDisplayName);
     },
 });
 

playwright/e2e/invite/invite-dialog.spec.ts

@@ -77,7 +77,7 @@ test.describe("Invite dialog", function () {
         "should support inviting a user to Direct Messages",
         { tag: "@screenshot" },
         async ({ page, app, user, bot }) => {
-            await page.locator(".mx_RoomList").getByRole("button", { name: "Start chat" }).click();
+            await page.locator(".mx_LegacyRoomList").getByRole("button", { name: "Start chat" }).click();
 
             const other = page.locator(".mx_InviteDialog_other");
             // Assert that the header is rendered

playwright/e2e/lazy-loading/lazy-loading.spec.ts

@@ -10,7 +10,7 @@ import { Bot } from "../../pages/bot";
 import type { Locator, Page } from "@playwright/test";
 import type { ElementAppPage } from "../../pages/ElementAppPage";
 import { test, expect } from "../../element-web-test";
-import { Credentials } from "../../plugins/homeserver";
+import { type Credentials } from "../../plugins/homeserver";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 test.describe("Lazy Loading", () => {

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

@@ -0,0 +1,374 @@
+/*
+ * 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 { type Visibility } from "matrix-js-sdk/src/matrix";
+import { type Locator, type Page } from "@playwright/test";
+
+import { expect, test } from "../../../element-web-test";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+
+test.describe("Room list filters and sort", () => {
+    test.use({
+        displayName: "Alice",
+        botCreateOpts: {
+            displayName: "BotBob",
+            autoAcceptInvites: true,
+        },
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    function getPrimaryFilters(page: Page): Locator {
+        return page.getByTestId("primary-filters");
+    }
+
+    function getRoomOptionsMenu(page: Page): Locator {
+        return page.getByRole("button", { name: "Room Options" });
+    }
+
+    function getFilterExpandButton(page: Page): Locator {
+        return getPrimaryFilters(page).getByRole("button", { name: "Expand filter list" });
+    }
+
+    function getFilterCollapseButton(page: Page): Locator {
+        return getPrimaryFilters(page).getByRole("button", { name: "Collapse filter list" });
+    }
+
+    /**
+     * Get the room list
+     * @param page
+     */
+    function getRoomList(page: Page) {
+        return page.getByTestId("room-list");
+    }
+
+    test.beforeEach(async ({ page, app, bot, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("Tombstoned rooms are not shown even when they receive updates", async ({ page, app, bot }) => {
+        // This bug shows up with this setting turned on
+        await app.settings.setValue("Spaces.allRoomsInHome", null, SettingLevel.DEVICE, true);
+
+        /*
+        We will first create a room named 'Old Room' and will invite the bot user to this room.
+        We will also send a simple message in this room.
+        */
+        const oldRoomId = await app.client.createRoom({ name: "Old Room" });
+        await app.client.inviteUser(oldRoomId, bot.credentials.userId);
+        await bot.joinRoom(oldRoomId);
+        const response = await app.client.sendMessage(oldRoomId, "Hello!");
+
+        /*
+        At this point, we haven't done anything interesting.
+        So we expect 'Old Room' to show up in the room list.
+        */
+        const roomListView = getRoomList(page);
+        const oldRoomTile = roomListView.getByRole("gridcell", { name: "Open room Old Room" });
+        await expect(oldRoomTile).toBeVisible();
+
+        /*
+        Now let's tombstone 'Old Room'.
+        First we create a new room ('New Room') with the predecessor set to the old room..
+        */
+        const newRoomId = await bot.createRoom({
+            name: "New Room",
+            creation_content: {
+                predecessor: {
+                    event_id: response.event_id,
+                    room_id: oldRoomId,
+                },
+            },
+            visibility: "public" as Visibility,
+        });
+
+        /*
+        Now we can send the tombstone event itself to the 'Old Room'.
+        */
+        await app.client.sendStateEvent(oldRoomId, "m.room.tombstone", {
+            body: "This room has been replaced",
+            replacement_room: newRoomId,
+        });
+
+        // Let's join the replaced room.
+        await app.client.joinRoom(newRoomId);
+
+        // We expect 'Old Room' to be hidden from the room list.
+        await expect(oldRoomTile).not.toBeVisible();
+
+        /*
+        Let's say some user in the 'Old Room' changes their display name.
+        This will send events to the all the rooms including 'Old Room'.
+        Nevertheless, the replaced room should not be shown in the room list.
+        */
+        await bot.setDisplayName("MyNewName");
+        await expect(oldRoomTile).not.toBeVisible();
+    });
+
+    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);
+            };
+
+            // 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
+            await getFilterExpandButton(page).click();
+            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);
+
+            const lowPrioId = await app.client.createRoom({ name: "Low prio room" });
+            await app.client.evaluate(async (client, id) => {
+                await client.setRoomTag(id, "m.lowpriority", { order: 0.5 });
+            }, lowPrioId);
+
+            await bot.createRoom({
+                name: "invited room",
+                invite: [user.userId],
+                is_direct: true,
+            });
+
+            const mentionRoomId = await app.client.createRoom({ name: "room with mention" });
+            await app.client.inviteUser(mentionRoomId, bot.credentials.userId);
+            await bot.joinRoom(mentionRoomId);
+
+            const clientBot = await bot.prepareClient();
+            await clientBot.evaluate(
+                async (client, { mentionRoomId, userId }) => {
+                    await client.sendMessage(mentionRoomId, {
+                        // @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],
+                        },
+                    });
+                },
+                { mentionRoomId, userId: user.userId },
+            );
+        });
+
+        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(4);
+            await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
+
+            await primaryFilters.getByRole("option", { name: "People" }).click();
+            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+            await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
+            expect(await roomList.locator("role=gridcell").count()).toBe(2);
+
+            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();
+            await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
+            await expect(roomList.getByRole("gridcell", { name: "Low prio room" })).toBeVisible();
+            expect(await roomList.locator("role=gridcell").count()).toBe(5);
+
+            await getFilterExpandButton(page).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);
+
+            await primaryFilters.getByRole("option", { name: "Mentions" }).click();
+            await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
+            expect(await roomList.locator("role=gridcell").count()).toBe(1);
+
+            await primaryFilters.getByRole("option", { name: "Invites" }).click();
+            await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
+            expect(await roomList.locator("role=gridcell").count()).toBe(1);
+
+            await getFilterCollapseButton(page).click();
+            await expect(primaryFilters.locator("role=option").first()).toHaveText("Invites");
+        });
+
+        test(
+            "unread filter should only match unread rooms that have a count",
+            { tag: "@screenshot" },
+            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!
+                const unreadDm = roomListView.getByRole("gridcell", { name: "Open room unread room" });
+                await expect(unreadDm).toBeVisible();
+                await expect(unreadDm).toMatchScreenshot("unread-dm.png");
+                await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
+            },
+        );
+
+        test("should sort the room list alphabetically", async ({ page }) => {
+            const roomListView = getRoomList(page);
+
+            await getRoomOptionsMenu(page).click();
+            await page.getByRole("menuitemradio", { name: "A-Z" }).click();
+
+            await expect(roomListView.getByRole("gridcell").first()).toHaveText(/empty room/);
+        });
+
+        test("should move room to the top on message when sorting by activity", async ({ page, bot }) => {
+            const roomListView = getRoomList(page);
+
+            await bot.sendMessage(unReadDmId, "Hello!");
+
+            await expect(roomListView.getByRole("gridcell").first()).toHaveText(/unread dm/);
+        });
+    });
+
+    test.describe("Empty room list", () => {
+        /**
+         * Get the empty state
+         * @param page
+         */
+        function getEmptyRoomList(page: Page) {
+            return page.getByTestId("empty-room-list");
+        }
+
+        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.getByRole("navigation", { name: "Room list" })).toMatchScreenshot(
+                    "room-panel-empty-room-list.png",
+                );
+            },
+        );
+
+        [
+            { filter: "Unreads", action: "Show all chats" },
+            { filter: "Mentions", action: "See all activity" },
+            { filter: "Invites", action: "See all activity" },
+        ].forEach(({ filter, action }) => {
+            test(
+                `should render the placeholder for ${filter} filter`,
+                { tag: "@screenshot" },
+                async ({ page, app, user }) => {
+                    const primaryFilters = getPrimaryFilters(page);
+                    await getFilterExpandButton(page).click();
+
+                    await primaryFilters.getByRole("option", { name: filter }).click();
+
+                    const emptyRoomList = getEmptyRoomList(page);
+                    await expect(emptyRoomList).toMatchScreenshot(`${filter}-empty-room-list.png`);
+
+                    await emptyRoomList.getByRole("button", { name: action }).click();
+                    await expect(primaryFilters.getByRole("option", { name: filter })).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 getFilterExpandButton(page).click();
+
+                    await primaryFilters.getByRole("option", { name: filter }).click();
+
+                    const emptyRoomList = getEmptyRoomList(page);
+                    await expect(emptyRoomList).toMatchScreenshot(`${filter}-empty-room-list.png`);
+                },
+            );
+        });
+    });
+});

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

@@ -0,0 +1,87 @@
+/*
+ * 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";
+import type { Page } from "@playwright/test";
+
+test.describe("Header section of the room list", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the header section of the room list
+     * @param page
+     */
+    function getHeaderSection(page: Page) {
+        return page.getByTestId("room-list-header");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("should render the header section", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListHeader = getHeaderSection(page);
+        await expect(roomListHeader).toMatchScreenshot("room-list-header.png");
+
+        const composeMenu = roomListHeader.getByRole("button", { name: "Add" });
+        await composeMenu.click();
+
+        await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-compose-menu.png");
+
+        // New message should open the direct messages dialog
+        await page.getByRole("menuitem", { name: "New message" }).click();
+        await expect(page.getByRole("heading", { name: "Direct Messages" })).toBeVisible();
+        await app.closeDialog();
+
+        // New room should open the room creation dialog
+        await composeMenu.click();
+        await page.getByRole("menuitem", { name: "New room" }).click();
+        await expect(page.getByRole("heading", { name: "Create a private room" })).toBeVisible();
+        await app.closeDialog();
+    });
+
+    test("should render the header section for a space", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        await app.client.createSpace({ name: "MySpace" });
+        await page.getByRole("button", { name: "MySpace" }).click();
+
+        const roomListHeader = getHeaderSection(page);
+        await expect(roomListHeader).toMatchScreenshot("room-list-space-header.png");
+
+        await expect(roomListHeader.getByRole("heading", { name: "MySpace" })).toBeVisible();
+        await expect(roomListHeader.getByRole("button", { name: "Add" })).toBeVisible();
+
+        const spaceMenu = roomListHeader.getByRole("button", { name: "Open space menu" });
+        await spaceMenu.click();
+
+        await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-space-menu.png");
+
+        // It should open the space home
+        await page.getByRole("menuitem", { name: "Space home" }).click();
+        await expect(page.getByRole("main").getByRole("heading", { name: "MySpace" })).toBeVisible();
+
+        // It should open the invite dialog
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Invite" }).click();
+        await expect(page.getByRole("heading", { name: "Invite to MySpace" })).toBeVisible();
+        await app.closeDialog();
+
+        // It should open the space preferences
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Preferences" }).click();
+        await expect(page.getByRole("heading", { name: "Preferences" })).toBeVisible();
+        await app.closeDialog();
+
+        // It should open the space settings
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Space Settings" }).click();
+        await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
+        await app.closeDialog();
+    });
+});

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

@@ -0,0 +1,50 @@
+/*
+ * 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 { type Page } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Room list panel", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the room list view
+     * @param page
+     */
+    function getRoomListView(page: Page) {
+        return page.getByRole("navigation", { name: "Room list" });
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+
+        // Populate the room list
+        for (let i = 0; i < 20; i++) {
+            await app.client.createRoom({ name: `room${i}` });
+        }
+
+        // focus the user menu to avoid to have hover decoration
+        await page.getByRole("button", { name: "User menu" }).focus();
+    });
+
+    test("should render the room list panel", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomListView(page);
+        // Wait for the last room to be visible
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room19" })).toBeVisible();
+        await expect(roomListView).toMatchScreenshot("room-list-panel.png");
+    });
+
+    test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
+        await page.setViewportSize({ width: 575, height: 600 });
+        const roomListPanel = getRoomListView(page);
+        await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
+    });
+});

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

@@ -0,0 +1,53 @@
+/*
+ * 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 { type Page } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Search section of the room list", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the search section of the room list
+     * @param page
+     */
+    function getSearchSection(page: Page) {
+        return page.getByRole("search");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("should render the search section", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        // exact=false to ignore the shortcut which is related to the OS
+        await expect(searchSection.getByRole("button", { name: "Search", exact: false })).toBeVisible();
+        await expect(searchSection).toMatchScreenshot("search-section.png");
+    });
+
+    test("should open the spotlight when the search button is clicked", async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        await searchSection.getByRole("button", { name: "Search", exact: false }).click();
+        // The spotlight should be displayed
+        await expect(page.getByRole("dialog", { name: "Search Dialog" })).toBeVisible();
+    });
+
+    test("should open the room directory when the search button is clicked", async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        await searchSection.getByRole("button", { name: "Explore rooms" }).click();
+        const dialog = page.getByRole("dialog", { name: "Search Dialog" });
+        // The room directory should be displayed
+        await expect(dialog).toBeVisible();
+        // The public room filter should be displayed
+        await expect(dialog.getByText("Public rooms")).toBeVisible();
+    });
+});

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

@@ -0,0 +1,440 @@
+/*
+ * 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 { type Page } from "@playwright/test";
+
+import { expect, test } from "../../../element-web-test";
+
+test.describe("Room list", () => {
+    test.use({
+        displayName: "Alice",
+        labsFlags: ["feature_new_room_list"],
+        botCreateOpts: {
+            displayName: "BotBob",
+        },
+    });
+
+    /**
+     * Get the room list
+     * @param page
+     */
+    function getRoomList(page: Page) {
+        return page.getByTestId("room-list");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+
+        // focus the user menu to avoid to have hover decoration
+        await page.getByRole("button", { name: "User menu" }).focus();
+    });
+
+    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");
+
+            // Put focus on the room list
+            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+            // 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();
+
+            // Put focus on the room list
+            await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
+            // Scroll to the end of the room list
+            await page.mouse.wheel(0, 1000);
+
+            // 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);
+            // Put focus on the room list
+            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+            // 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();
+        });
+
+        test.describe("Shortcuts", () => {
+            test("should select the next room", async ({ page, app, user }) => {
+                const roomListView = getRoomList(page);
+                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+                await page.keyboard.press("Alt+ArrowDown");
+
+                await expect(page.getByRole("heading", { name: "room28", level: 1 })).toBeVisible();
+            });
+
+            test("should select the previous room", async ({ page, app, user }) => {
+                const roomListView = getRoomList(page);
+                await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
+                await page.keyboard.press("Alt+ArrowUp");
+
+                await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
+            });
+
+            test("should select the last room", async ({ page, app, user }) => {
+                const roomListView = getRoomList(page);
+                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+                await page.keyboard.press("Alt+ArrowUp");
+
+                await expect(page.getByRole("heading", { name: "room0", level: 1 })).toBeVisible();
+            });
+
+            test("should select the next unread room", async ({ page, app, user, bot }) => {
+                const roomListView = getRoomList(page);
+
+                const roomId = await app.client.createRoom({ name: "1 notification" });
+                await app.client.inviteUser(roomId, bot.credentials.userId);
+                await bot.joinRoom(roomId);
+                await bot.sendMessage(roomId, "I am a robot. Beep.");
+
+                await roomListView.getByRole("gridcell", { name: "Open room room20" }).click();
+
+                await page.keyboard.press("Alt+Shift+ArrowDown");
+
+                await expect(page.getByRole("heading", { name: "1 notification", level: 1 })).toBeVisible();
+            });
+        });
+
+        test.describe("Keyboard navigation", () => {
+            test("should navigate to the room list", async ({ page, app, user }) => {
+                const roomListView = getRoomList(page);
+
+                const room29 = roomListView.getByRole("gridcell", { name: "Open room room29" });
+                const room28 = roomListView.getByRole("gridcell", { name: "Open room room28" });
+
+                // open the room
+                await room29.click();
+                // put focus back on the room list item
+                await room29.click();
+                await expect(room29).toBeFocused();
+
+                await page.keyboard.press("ArrowDown");
+                await expect(room28).toBeFocused();
+                await expect(room29).not.toBeFocused();
+
+                await page.keyboard.press("ArrowUp");
+                await expect(room29).toBeFocused();
+                await expect(room28).not.toBeFocused();
+            });
+
+            test("should navigate to the notification menu", async ({ page, app, user }) => {
+                const roomListView = getRoomList(page);
+                const room29 = roomListView.getByRole("gridcell", { name: "Open room room29" });
+                const moreButton = room29.getByRole("button", { name: "More options" });
+                const notificationButton = room29.getByRole("button", { name: "Notification options" });
+
+                await room29.click();
+                // put focus back on the room list item
+                await room29.click();
+                await page.keyboard.press("Tab");
+                await expect(moreButton).toBeFocused();
+                await page.keyboard.press("Tab");
+                await expect(notificationButton).toBeFocused();
+
+                // Open the menu
+                await notificationButton.click();
+                // Wait for the menu to be open
+                await expect(page.getByRole("menuitem", { name: "Match default settings" })).toHaveAttribute(
+                    "aria-selected",
+                    "true",
+                );
+
+                // Close the menu
+                await page.keyboard.press("Escape");
+                // Focus should be back on the room list item
+                await expect(room29).toBeFocused();
+            });
+        });
+    });
+
+    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" });
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+
+            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 low priority room", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            // @ts-ignore Visibility enum is not accessible
+            await app.client.createRoom({ name: "low priority room", visibility: "public" });
+            const roomListView = getRoomList(page);
+            const publicRoom = roomListView.getByRole("gridcell", { name: "low priority room" });
+
+            // Make room low priority
+            await publicRoom.hover();
+            const roomItemMenu = publicRoom.getByRole("button", { name: "More Options" });
+            await roomItemMenu.click();
+            await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click();
+
+            // Should have low priority decoration
+            await expect(publicRoom.locator(".mx_RoomAvatarView_icon")).toHaveAccessibleName(
+                "This is a low priority room",
+            );
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+            await expect(publicRoom).toMatchScreenshot("room-list-item-low-priority.png");
+        });
+
+        test("should be a video room", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            await page.getByRole("navigation", { name: "Room list" }).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" });
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+
+            await expect(videoRoom).toBeVisible();
+            await expect(videoRoom).toMatchScreenshot("room-list-item-video.png");
+        });
+    });
+
+    test.describe("Notification decoration", () => {
+        test("should render the invitation decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            const roomListView = getRoomList(page);
+
+            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");
+        });
+
+        test("should render the regular decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            const roomListView = getRoomList(page);
+
+            const roomId = await app.client.createRoom({ name: "2 notifications" });
+            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await bot.joinRoom(roomId);
+
+            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 a message preview", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            await app.settings.openUserSettings("Preferences");
+            await page.getByRole("switch", { name: "Show message previews" }).click();
+            await app.closeDialog();
+
+            const roomListView = getRoomList(page);
+
+            const roomId = await app.client.createRoom({ name: "activity" });
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+
+            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await bot.joinRoom(roomId);
+            await bot.sendMessage(roomId, "I am a robot. Beep.");
+
+            const room = roomListView.getByRole("gridcell", { name: "activity" });
+            await expect(room.getByText("I am a robot. Beep.")).toBeVisible();
+            await expect(room).toMatchScreenshot("room-list-item-message-preview.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();
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+
+            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");
+        });
+    });
+});

playwright/e2e/location/location.spec.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { Locator, Page } from "@playwright/test";
+import { type Locator, type Page } from "@playwright/test";
 
 import { test, expect } from "../../element-web-test";
 

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

@@ -6,13 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { Page } from "playwright-core";
+import { type Page } from "@playwright/test";
 
 import { expect, test } from "../../element-web-test";
 import { selectHomeserver } from "../utils";
-import { Credentials, HomeserverInstance } from "../../plugins/homeserver";
+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";
@@ -120,7 +121,7 @@ test.describe("Login", () => {
             credentials,
             page,
             homeserver,
-            checkA11y,
+            axe,
         }) => {
             await page.goto("/");
 
@@ -149,7 +150,7 @@ test.describe("Login", () => {
             await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
             // Disabled because flaky - see https://github.com/vector-im/element-web/issues/24688
             // cy.percySnapshot("Login");
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
 
             await page.getByRole("textbox", { name: "Username" }).fill(credentials.username);
             await page.getByPlaceholder("Password").fill(credentials.password);
@@ -258,6 +259,71 @@ 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();
+                });
+            });
+
+            test("Can reset identity to become verified", async ({ page, homeserver, request, credentials }) => {
+                // Log in
+                const res = await request.post(`${homeserver.baseUrl}/_matrix/client/v3/keys/device_signing/upload`, {
+                    headers: { Authorization: `Bearer ${credentials.accessToken}` },
+                    data: DEVICE_SIGNING_KEYS_BODY,
+                });
+                if (!res.ok()) {
+                    console.log(`Uploading dummy keys failed with HTTP status ${res.status}`, await res.json());
+                    throw new Error("Uploading dummy keys failed");
+                }
+
+                await page.goto("/");
+                await login(page, homeserver, credentials);
+
+                await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();
+
+                // Start the reset process
+                await page.getByRole("button", { name: "Proceed with reset" }).click();
+
+                // First try cancelling and restarting
+                await page.getByRole("button", { name: "Cancel" }).click();
+                await page.getByRole("button", { name: "Proceed with reset" }).click();
+
+                // Then click outside the dialog and restart
+                await page.getByRole("link", { name: "Powered by Matrix" }).click({ force: true });
+                await page.getByRole("button", { name: "Proceed with reset" }).click();
+
+                // Finally we actually continue
+                await page.getByRole("button", { name: "Continue" }).click();
+                await page.getByPlaceholder("Password").fill(credentials.password);
+                await page.getByRole("button", { name: "Continue" }).click();
+
+                // We end up at the Home screen
+                await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
+                await expect(page.getByRole("heading", { name: "Welcome Dave", exact: true })).toBeVisible();
             });
         });
     });

playwright/e2e/login/utils.ts

@@ -6,9 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { Page, expect, TestInfo } from "@playwright/test";
+import { type Page, expect, type TestInfo } from "@playwright/test";
 
-import { Credentials, HomeserverInstance } from "../../plugins/homeserver";
+import { type Credentials, type HomeserverInstance } from "../../plugins/homeserver";
 
 /** Visit the login page, choose to log in with "OAuth test", register a new account, and redirect back to Element
  */

playwright/e2e/messages/messages.spec.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 /* See readme.md for tips on writing these tests. */
 
-import { Locator, Page } from "playwright-core";
+import { type Locator, type Page } from "@playwright/test";
 
 import { test, expect } from "../../element-web-test";
 

playwright/e2e/modules/custom-component.spec.ts

@@ -0,0 +1,112 @@
+/*
+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 { type Page } from "@playwright/test";
+
+import { test, expect } from "../../element-web-test";
+
+const screenshotOptions = (page: Page) => ({
+    mask: [page.locator(".mx_MessageTimestamp")],
+    // Hide the jump to bottom button in the timeline to avoid flakiness
+    // Exclude timestamp and read marker from snapshot
+    css: `
+        .mx_JumpToBottomButton {
+            display: none !important;
+        }
+        .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
+            display: none !important;
+        }
+    `,
+});
+test.describe("Custom Component API", () => {
+    test.use({
+        displayName: "Manny",
+        config: {
+            modules: ["/modules/custom-component-module.js"],
+        },
+        page: async ({ page }, use) => {
+            await page.route("/modules/custom-component-module.js", async (route) => {
+                await route.fulfill({ path: "playwright/sample-files/custom-component-module.js" });
+            });
+            await use(page);
+        },
+        room: async ({ page, app, user, bot }, use) => {
+            const roomId = await app.client.createRoom({ name: "TestRoom" });
+            await use({ roomId });
+        },
+    });
+    test.describe("basic functionality", () => {
+        test(
+            "should replace the render method of a textual event",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Simple message");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-tile.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test(
+            "should fall through if one module does not render a component",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Fall through here");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-tile-fall-through.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test(
+            "should render the original content of a textual event conditionally",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Do not replace me");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-tile-original.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test("should disallow editing when the allowEditingEvent hint is set to false", async ({ page, room, app }) => {
+            await app.viewRoomById(room.roomId);
+            await app.client.sendMessage(room.roomId, "Do not show edits");
+            await page.getByText("Do not show edits").hover();
+            await expect(
+                await page.getByRole("toolbar", { name: "Message Actions" }).getByRole("button", { name: "Edit" }),
+            ).not.toBeVisible();
+        });
+        test(
+            "should render the next registered component if the filter function throws",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Crash the filter!");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-crash-handle-filter.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test(
+            "should render original component if the render function throws",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Crash the renderer!");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-crash-handle-renderer.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+    });
+});

playwright/e2e/modules/loader.spec.ts

@@ -0,0 +1,56 @@
+/*
+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("Module loading", () => {
+    test.use({
+        displayName: "Manny",
+    });
+
+    test.describe("Example Module", () => {
+        test.use({
+            config: {
+                brand: "TestBrand",
+                modules: ["/modules/example-module.js"],
+            },
+            page: async ({ page }, use) => {
+                await page.route("/modules/example-module.js", async (route) => {
+                    await route.fulfill({ path: "playwright/sample-files/example-module.js" });
+                });
+                await use(page);
+            },
+        });
+
+        const testCases = [
+            ["en", "TestBrand module loading successful!"],
+            ["de", "TestBrand-Module erfolgreich geladen!"],
+        ];
+
+        for (const [lang, message] of testCases) {
+            test.describe(`language-${lang}`, () => {
+                test.use({
+                    config: async ({ config }, use) => {
+                        await use({
+                            ...config,
+                            setting_defaults: {
+                                language: lang,
+                            },
+                        });
+                    },
+                });
+
+                test("should show alert", async ({ page }) => {
+                    const dialogPromise = page.waitForEvent("dialog");
+                    await page.goto("/");
+                    const dialog = await dialogPromise;
+                    expect(dialog.message()).toBe(message);
+                });
+            });
+        }
+    });
+});

playwright/e2e/oidc/index.ts

@@ -6,14 +6,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { API, Messages } from "mailhog";
-import { Page } from "@playwright/test";
+import { type MailpitClient } from "@element-hq/element-web-playwright-common/lib/testcontainers";
+import { type Page } from "@playwright/test";
 
 import { expect } from "../../element-web-test";
 
+/**
+ * Click through registering a new user in the MAS UI.
+ */
 export async function registerAccountMas(
     page: Page,
-    mailhog: API,
+    mailpit: MailpitClient,
     username: string,
     email: string,
     password: string,
@@ -27,16 +30,32 @@ export async function registerAccountMas(
     await page.getByRole("textbox", { name: "Confirm Password" }).fill(password);
     await page.getByRole("button", { name: "Continue" }).click();
 
-    let messages: Messages;
+    let code: string;
     await expect(async () => {
-        messages = await mailhog.messages();
-        expect(messages.items).toHaveLength(1);
+        const messages = await mailpit.listMessages();
+        expect(messages.messages[0].To[0].Address).toEqual(email);
+        const text = await mailpit.renderMessageText(messages.messages[0].ID);
+        [, code] = text.match(/Your verification code to confirm this email address is: (\d{6})/);
     }).toPass();
-    expect(messages.items[0].to).toEqual(`${username} <${email}>`);
-    const [, code] = messages.items[0].text.match(/Your verification code to confirm this email address is: (\d{6})/);
 
     await page.getByRole("textbox", { name: "6-digit code" }).fill(code);
     await page.getByRole("button", { name: "Continue" }).click();
+    await page.getByRole("textbox", { name: "Display Name" }).fill(username);
+    await page.getByRole("button", { name: "Continue" }).click();
+    await expect(page.getByText("Allow access to your account?")).toBeVisible();
+    await page.getByRole("button", { name: "Continue" }).click();
+}
+
+/**
+ * Click through entering username and password into the MAS login prompt.
+ */
+export async function logInAccountMas(page: Page, username: string, password: string): Promise<void> {
+    await expect(page.getByText("Please sign in to continue:")).toBeVisible();
+
+    await page.getByRole("textbox", { name: "Username" }).fill(username);
+    await page.getByRole("textbox", { name: "Password", exact: true }).fill(password);
+    await page.getByRole("button", { name: "Continue" }).click();
+
     await expect(page.getByText("Allow access to your account?")).toBeVisible();
     await page.getByRole("button", { name: "Continue" }).click();
 }

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

@@ -6,8 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+import { type Config, CONFIG_JSON } from "@element-hq/element-web-playwright-common";
+import { type Browser, type Page } from "@playwright/test";
+import { type StartedHomeserverContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/HomeserverContainer";
+
 import { test, expect } from "../../element-web-test.ts";
-import { registerAccountMas } from ".";
+import { logInAccountMas, registerAccountMas } from ".";
 import { ElementAppPage } from "../../pages/ElementAppPage.ts";
 import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";
 
@@ -19,7 +23,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         context,
         page,
         homeserver,
-        mailhogClient,
+        mailpitClient,
         mas,
     }, testInfo) => {
         await page.clock.install();
@@ -33,7 +37,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await page.getByRole("button", { name: "Continue" }).click();
 
         const userId = `alice_${testInfo.testId}`;
-        await registerAccountMas(page, mailhogClient, userId, "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
 
         // Eventually, we should end up at the home screen.
         await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
@@ -55,7 +59,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         const newPage = await newPagePromise;
         await newPage.getByText("Devices").click();
         await newPage.getByText(deviceId).click();
-        await expect(newPage.getByText("Element")).toBeVisible();
+        await expect(newPage.getByText("Element", { exact: true })).toBeVisible();
         await expect(newPage.getByText("http://localhost:8080/")).toBeVisible();
         await expect(newPage).toHaveURL(/\/oauth2_session/);
         await newPage.close();
@@ -73,4 +77,182 @@ 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, `${userId}@email.com`, "Pa$sW0rD!");
+
+            await expect(page.getByText("Welcome")).toBeVisible();
+            await page.goto("about:blank");
+
+            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);
+        },
+    );
+
+    test("can log in to an existing MAS account", { tag: "@screenshot" }, async ({ page, mailpitClient }, testInfo) => {
+        // Register an account with MAS
+        await page.goto("/#/login");
+        await page.getByRole("button", { name: "Continue" }).click();
+
+        const userId = `alice_${testInfo.testId}`;
+        await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
+        await expect(page.getByText("Welcome")).toBeVisible();
+
+        // Log out
+        await page.getByRole("button", { name: "User menu" }).click();
+        await expect(page.getByText(userId, { exact: true })).toBeVisible();
+
+        // Allow the outstanding requests queue to settle before logging out
+        await page.waitForTimeout(2000);
+        await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+        await expect(page).toHaveURL(/\/#\/login$/);
+
+        // Log in again
+        await page.goto("/#/login");
+        await page.getByRole("button", { name: "Continue" }).click();
+        await page.getByRole("button", { name: "Continue" }).click();
+
+        // We should be in (we see an error because we have no recovery key).
+        await expect(page.getByText("Unable to verify this device")).toBeVisible();
+    });
+
+    test.describe("with force_verification on", () => {
+        test.use({
+            config: {
+                force_verification: true,
+            },
+        });
+
+        test("verify dialog cannot be dismissed", { tag: "@screenshot" }, async ({ page, mailpitClient }, testInfo) => {
+            // Register an account with MAS
+            await page.goto("/#/login");
+            await page.getByRole("button", { name: "Continue" }).click();
+
+            const userId = `alice_${testInfo.testId}`;
+            await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
+            await expect(page.getByText("Welcome")).toBeVisible();
+
+            // Log out
+            await page.getByRole("button", { name: "User menu" }).click();
+            await expect(page.getByText(userId, { exact: true })).toBeVisible();
+            await page.waitForTimeout(2000);
+            await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+            await expect(page).toHaveURL(/\/#\/login$/);
+
+            // Log in again
+            await page.goto("/#/login");
+            await page.getByRole("button", { name: "Continue" }).click();
+            await page.getByRole("button", { name: "Continue" }).click();
+
+            // We should be being warned that we need to verify (but we can't)
+            await expect(page.getByText("Unable to verify this device")).toBeVisible();
+
+            // And there should be no way to close this prompt
+            await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
+        });
+
+        test(
+            "continues to show verification prompt after cancelling device verification",
+            { tag: "@screenshot" },
+            async ({ browser, config, homeserver, page, mailpitClient }, testInfo) => {
+                // Register an account with MAS
+                await page.goto("/#/login");
+                await page.getByRole("button", { name: "Continue" }).click();
+
+                const userId = `alice_${testInfo.testId}`;
+                const password = "Pa$sW0rD!";
+                await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, password);
+                await expect(page.getByText("Welcome")).toBeVisible();
+
+                // Log in an additional account, and verify it.
+                //
+                // This means that when we log out and in again, we are offered
+                // to verify using another device.
+                const otherContext = await newContext(browser, config, homeserver);
+                const otherDevicePage = await otherContext.newPage();
+                await otherDevicePage.goto("/#/login");
+                await otherDevicePage.getByRole("button", { name: "Continue" }).click();
+                await logInAccountMas(otherDevicePage, userId, password);
+                await verifyUsingOtherDevice(otherDevicePage, page);
+                await otherDevicePage.close();
+
+                // Log out
+                await page.getByRole("button", { name: "User menu" }).click();
+                await expect(page.getByText(userId, { exact: true })).toBeVisible();
+                await page.waitForTimeout(2000);
+                await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+                await expect(page).toHaveURL(/\/#\/login$/);
+
+                // Log in again
+                await page.goto("/#/login");
+                await page.getByRole("button", { name: "Continue" }).click();
+                await page.getByRole("button", { name: "Continue" }).click();
+
+                // We should be in, and not able to dismiss the verify dialog
+                await expect(page.getByText("Verify this device")).toBeVisible();
+                await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
+
+                // When we start verifying with another device
+                await page.getByRole("button", { name: "Verify with another device" }).click();
+
+                // And then cancel it
+                await page.getByRole("button", { name: "Close dialog" }).click();
+
+                // Then we should still be at the unskippable verify prompt
+                await expect(page.getByText("Verify this device")).toBeVisible();
+                await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
+            },
+        );
+    });
 });
+
+/**
+ * Perform interactive emoji verification for a new device.
+ */
+async function verifyUsingOtherDevice(deviceToVerifyPage: Page, alreadyVerifiedDevicePage: Page) {
+    await deviceToVerifyPage.getByRole("button", { name: "Verify with another device" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "Verify session" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "Start" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "They match" }).click();
+    await deviceToVerifyPage.getByRole("button", { name: "They match" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "Got it" }).click();
+    await deviceToVerifyPage.getByRole("button", { name: "Got it" }).click();
+}
+
+/**
+ * Create a new browser context which serves up the default config plus what you supplied, and sets m.homeserver to the
+ * supplied homeserver's URL.
+ */
+async function newContext(browser: Browser, config: Partial<Partial<Config>>, homeserver: StartedHomeserverContainer) {
+    const otherContext = await browser.newContext();
+    await otherContext.route(`http://localhost:8080/config.json*`, async (route) => {
+        const json = {
+            ...CONFIG_JSON,
+            ...config,
+            default_server_config: {
+                "m.homeserver": {
+                    base_url: homeserver.baseUrl,
+                },
+            },
+        };
+        await route.fulfill({ json });
+    });
+    return otherContext;
+}

playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { test as base, expect } from "../../element-web-test";
-import { Credentials } from "../../plugins/homeserver";
+import { type Credentials } from "../../plugins/homeserver";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 const test = base.extend<{

playwright/e2e/pinned-messages/index.ts

@@ -6,12 +6,12 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { Page } from "@playwright/test";
+import { type Page } from "@playwright/test";
 
 import { test as base, expect } from "../../element-web-test";
-import { Client } from "../../pages/client";
-import { ElementAppPage } from "../../pages/ElementAppPage";
-import { Bot } from "../../pages/bot";
+import { type Client } from "../../pages/client";
+import { type ElementAppPage } from "../../pages/ElementAppPage";
+import { type Bot } from "../../pages/bot";
 
 type RoomRef = { name: string; roomId: string };
 

playwright/e2e/polls/pollHistory.spec.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import { test, expect } from "../../element-web-test";
 import type { Bot } from "../../pages/bot";
 import type { Client } from "../../pages/client";
-import { ElementAppPage } from "../../pages/ElementAppPage";
+import { type ElementAppPage } from "../../pages/ElementAppPage";
 
 test.describe("Poll history", () => {
     type CreatePollOptions = {

playwright/e2e/read-receipts/index.ts

@@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
 import type { JSHandle, Page } from "@playwright/test";
 import type { MatrixEvent, Room, IndexedDBStore, ReceiptType } from "matrix-js-sdk/src/matrix";
 import { test as base, expect } from "../../element-web-test";
-import { Bot } from "../../pages/bot";
-import { Client } from "../../pages/client";
-import { ElementAppPage } from "../../pages/ElementAppPage";
+import { type Bot } from "../../pages/bot";
+import { type Client } from "../../pages/client";
+import { type ElementAppPage } from "../../pages/ElementAppPage";
 
 type RoomRef = { name: string; roomId: string };
 
@@ -526,9 +526,10 @@ class Helpers {
         await expect(threadPanel).toBeVisible();
         await threadPanel.evaluate(($panel) => {
             const $button = $panel.querySelector<HTMLElement>('[data-testid="base-card-back-button"]');
+            const title = $panel.querySelector<HTMLElement>(".mx_BaseCard_header_title")?.textContent;
             // If the Threads back button is present then click it - the
             // threads button can open either threads list or thread panel
-            if ($button) {
+            if ($button && title !== "Threads") {
                 $button.click();
             }
         });

playwright/e2e/read-receipts/new-messages-thread-roots.spec.ts

@@ -57,8 +57,8 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
                 await util.openThread("ThreadRoot");
 
                 // Then the thread root is marked as read in the main timeline,
-                // 30 remaining messages are unread - 7 messages are displayed under the thread root
-                await util.assertUnread(room2, 30 - 7);
+                // 30 remaining messages are unread - 6 messages are displayed under the thread root
+                await util.assertUnread(room2, 30 - 6);
             });
 
             test("Creating a new thread based on a reply makes the room unread", async ({

playwright/e2e/read-receipts/read-receipts.spec.ts

@@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import type { JSHandle } from "@playwright/test";
 import type { MatrixEvent, ISendEventResponse, ReceiptType } from "matrix-js-sdk/src/matrix";
 import { expect } from "../../element-web-test";
-import { ElementAppPage } from "../../pages/ElementAppPage";
-import { Bot } from "../../pages/bot";
+import { type ElementAppPage } from "../../pages/ElementAppPage";
+import { type Bot } from "../../pages/bot";
 import { test } from ".";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 

playwright/e2e/register/email.spec.ts

@@ -34,7 +34,7 @@ test.describe("Email Registration", async () => {
     test(
         "registers an account and lands on the home page",
         { tag: "@screenshot" },
-        async ({ page, mailhogClient, request, checkA11y }) => {
+        async ({ page, mailpitClient, request, axe }) => {
             await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
             // Hide the server text as it contains the randomly allocated Homeserver port
             const screenshotOptions = { mask: [page.locator(".mx_ServerPicker_server")] };
@@ -47,14 +47,15 @@ test.describe("Email Registration", async () => {
 
             await expect(page.getByText("Check your email to continue")).toBeVisible();
             await expect(page).toMatchScreenshot("registration_check_your_email.png", screenshotOptions);
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
 
             await expect(page.getByText("An error was encountered when sending the email")).not.toBeVisible();
 
-            const messages = await mailhogClient.messages();
-            expect(messages.items).toHaveLength(1);
-            expect(messages.items[0].to).toEqual("alice@email.com");
-            const [emailLink] = messages.items[0].text.match(/http.+/);
+            const messages = await mailpitClient.listMessages();
+            expect(messages.messages).toHaveLength(1);
+            expect(messages.messages[0].To[0].Address).toEqual("alice@email.com");
+            const text = await mailpitClient.renderMessageText(messages.messages[0].ID);
+            const [emailLink] = text.match(/http.+/);
             await request.get(emailLink); // "Click" the link in the email
 
             await expect(page.getByText("Welcome alice")).toBeVisible();

playwright/e2e/register/register.spec.ts

@@ -33,12 +33,12 @@ test.describe("Registration", () => {
     test(
         "registers an account and lands on the home screen",
         { tag: "@screenshot" },
-        async ({ homeserver, page, checkA11y, crypto }) => {
+        async ({ homeserver, page, axe, crypto }) => {
             await page.getByRole("button", { name: "Edit", exact: true }).click();
             await expect(page.getByRole("button", { name: "Continue", exact: true })).toBeVisible();
 
             await expect(page.locator(".mx_Dialog")).toMatchScreenshot("server-picker.png");
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
 
             await page.getByRole("textbox", { name: "Other homeserver" }).fill(homeserver.baseUrl);
             await page.getByRole("button", { name: "Continue", exact: true }).click();
@@ -52,7 +52,7 @@ test.describe("Registration", () => {
                 includeDialogBackground: true,
             };
             await expect(page).toMatchScreenshot("registration.png", screenshotOptions);
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
 
             await page.getByRole("textbox", { name: "Username", exact: true }).fill("alice");
             await page.getByPlaceholder("Password", { exact: true }).fill("totally a great password");
@@ -62,12 +62,12 @@ test.describe("Registration", () => {
             const dialog = page.getByRole("dialog");
             await expect(dialog).toBeVisible();
             await expect(page).toMatchScreenshot("email-prompt.png", screenshotOptions);
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
             await dialog.getByRole("button", { name: "Continue", exact: true }).click();
 
             await expect(page.locator(".mx_InteractiveAuthEntryComponents_termsPolicy")).toBeVisible();
             await expect(page).toMatchScreenshot("terms-prompt.png", screenshotOptions);
-            await checkA11y();
+            await expect(axe).toHaveNoViolations();
 
             const termsPolicy = page.locator(".mx_InteractiveAuthEntryComponents_termsPolicy");
             await termsPolicy.getByRole("checkbox").click(); // Click the checkbox before terms of service anchor link

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

@@ -43,6 +43,7 @@ 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/release-announcement/index.ts

@@ -6,7 +6,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { Page } from "@playwright/test";
+import { type Page } from "@playwright/test";
 
 import { test as base, expect } from "../../element-web-test";
 

playwright/e2e/release-announcement/releaseAnnouncement.spec.ts

@@ -15,20 +15,34 @@ test.describe("Release announcement", () => {
                 feature_release_announcement: true,
             },
         },
-        labsFlags: ["threadsActivityCentre"],
+        room: async ({ app, user }, use) => {
+            const roomId = await app.client.createRoom({
+                name: "Test room",
+            });
+            await app.viewRoomById(roomId);
+            await use({ roomId });
+        },
     });
 
-    test("should display the release announcement process", { tag: "@screenshot" }, async ({ page, app, util }) => {
-        // The TAC release announcement should be displayed
-        await util.assertReleaseAnnouncementIsVisible("Threads Activity Centre");
-        // Hide the release announcement
-        await util.markReleaseAnnouncementAsRead("Threads Activity Centre");
-        await util.assertReleaseAnnouncementIsNotVisible("Threads Activity Centre");
+    test(
+        "should display the pinned messages release announcement",
+        { tag: "@screenshot" },
+        async ({ page, app, room, util }) => {
+            await app.toggleRoomInfoPanel();
 
-        await page.reload();
-        // Wait for EW to load
-        await expect(page.getByRole("navigation", { name: "Spaces" })).toBeVisible();
-        // Check that once the release announcement has been marked as viewed, it does not appear again
-        await util.assertReleaseAnnouncementIsNotVisible("Threads Activity Centre");
-    });
+            const name = "All new pinned messages";
+
+            // The release announcement should be displayed
+            await util.assertReleaseAnnouncementIsVisible(name);
+            // Hide the release announcement
+            await util.markReleaseAnnouncementAsRead(name);
+            await util.assertReleaseAnnouncementIsNotVisible(name);
+
+            await page.reload();
+            await app.toggleRoomInfoPanel();
+            await expect(page.getByRole("menuitem", { name: "Pinned messages" })).toBeVisible();
+            // Check that once the release announcement has been marked as viewed, it does not appear again
+            await util.assertReleaseAnnouncementIsNotVisible(name);
+        },
+    );
 });