Move props into IProps

.eslintrc.js

@@ -1,11 +1,6 @@
 module.exports = {
     plugins: ["matrix-org", "eslint-plugin-react-compiler"],
-    extends: [
-        "plugin:matrix-org/babel",
-        "plugin:matrix-org/react",
-        "plugin:matrix-org/a11y",
-        "plugin:storybook/recommended",
-    ],
+    extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
     parserOptions: {
         project: ["./tsconfig.json"],
     },
@@ -35,10 +30,6 @@ 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.",
@@ -64,11 +55,6 @@ module.exports = {
             "error",
             {
                 paths: [
-                    {
-                        name: "react",
-                        importNames: ["forwardRef"],
-                        message: "Use ref props instead.",
-                    },
                     {
                         name: "@testing-library/react",
                         message: "Please use jest-matrix-react instead",

.github/CODEOWNERS

@@ -17,15 +17,9 @@
 /playwright/e2e/crypto/                                                 @element-hq/element-crypto-web-reviewers
 /playwright/e2e/settings/encryption-user-tab/                           @element-hq/element-crypto-web-reviewers
 
-
-/src/models/Call.ts             @element-hq/element-call-reviewers
-/src/call-types.ts              @element-hq/element-call-reviewers
-/src/components/views/voip      @element-hq/element-call-reviewers
-
 # Ignore translations as those will be updated by GHA for Localazy download
 /src/i18n/strings
 /src/i18n/strings/en_EN.json  @element-hq/element-web-reviewers
-# Ignore the synapse & mas plugins as this is updated by GHA for docker image updating
+# Ignore the synapse plugin as this is updated by GHA for docker image updating
 /playwright/testcontainers/synapse.ts
-/playwright/testcontainers/mas.ts
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,7 +2,6 @@
 
 ## Checklist
 
-- [ ] I have read through [review guidelines](../docs/review.md) and [CONTRIBUTING.md](../CONTRIBUTING.md).
 - [ ] Tests written for new code (and old code if feasible).
 - [ ] New or updated `public`/`exported` symbols have accurate [TSDoc](https://tsdoc.org/) documentation.
 - [ ] Linter and other CI checks pass.

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

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

.github/workflows/build.yml

@@ -43,9 +43,9 @@ jobs:
             run:
                 shell: bash
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+            - uses: actions/upload-artifact@v4
               with:
                   name: element-web.deb
                   path: element-web.deb

.github/workflows/build_develop.yml

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

.github/workflows/deploy.yml

@@ -34,7 +34,7 @@ jobs:
         env:
             SITE: ${{ inputs.site || 'staging.element.io' }}
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
 
             - name: Load GPG key
               run: |

.github/workflows/docker.yaml

@@ -20,31 +20,31 @@ jobs:
         env:
             TEST_TAG: vectorim/element-web:test
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - 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@398d4b0eeef1380460a10c8013a76f728fb906ac # v3
+              uses: sigstore/cosign-installer@d7d6bc7722e3daa8354c50bcb52f4837da5e9b6a # 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@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3
+              uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3
               with:
                   install: true
 
             - name: Login to Docker Hub
-              uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3
+              uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
               if: github.event_name != 'pull_request'
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
 
             - name: Login to GitHub Container Registry
-              uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3
+              uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
               if: github.event_name != 'pull_request'
               with:
                   registry: ghcr.io
@@ -53,7 +53,7 @@ jobs:
 
             - name: Build and load
               id: test-build
-              uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
+              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
               with:
                   context: .
                   load: true
@@ -96,7 +96,7 @@ jobs:
 
             - name: Docker meta
               id: meta
-              uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f # v5
+              uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5
               if: github.event_name != 'pull_request'
               with:
                   images: |
@@ -110,7 +110,7 @@ jobs:
 
             - name: Build and push
               id: build-and-push
-              uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
+              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
               if: github.event_name != 'pull_request'
               with:
                   context: .
@@ -132,23 +132,10 @@ jobs:
                   cosign sign --yes ${images}
 
             - name: Update repo description
-              uses: peter-evans/dockerhub-description@432a30c9e07499fd01da9f8a49f0faf9e0ca5b77 # v4
+              uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
               if: github.event_name != 'pull_request'
               continue-on-error: true
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
                   repository: vectorim/element-web
-
-            - name: Repository Dispatch
-              uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # v3
-              if: github.event_name != 'pull_request'
-              with:
-                  repository: element-hq/element-web-pro
-                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
-                  event-type: image-built
-                  # Stable way to determine the :version
-                  client-payload: |-
-                      {
-                          "base-ref": "${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}"
-                      }

.github/workflows/docs.yml

@@ -17,23 +17,23 @@ jobs:
         runs-on: ubuntu-24.04
         steps:
             - name: Fetch element-desktop
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@v4
               with:
                   repository: element-hq/element-desktop
                   path: element-desktop
 
             - name: Fetch element-web
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@v4
               with:
                   path: element-web
 
             - name: Fetch matrix-js-sdk
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@v4
               with:
                   repository: matrix-org/matrix-js-sdk
                   path: matrix-js-sdk
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@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@ee69d230fe19748b7abf22df32acaa93833fad08 # v2
+              uses: peaceiris/actions-mdbook@v2
               with:
                   mdbook-version: "0.4.10"
 
@@ -88,7 +88,7 @@ jobs:
               run: mdbook build
 
             - name: Upload artifact
-              uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4
+              uses: actions/upload-pages-artifact@v3
               with:
                   path: ./book
 
@@ -104,4 +104,4 @@ jobs:
         steps:
             - name: Deploy to GitHub Pages
               id: deployment
-              uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4
+              uses: actions/deploy-pages@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@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@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@9805cd123fc9a7e421e35340a05e1ebc5dee46b5 # v3
+              uses: matrix-org/netlify-pr-preview@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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@v4
               with:
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -81,7 +81,7 @@ jobs:
                   yarn build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@v4
               with:
                   name: webapp
                   path: webapp
@@ -89,7 +89,7 @@ jobs:
 
             - name: Calculate runner variables
               id: runner-vars
-              uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+              uses: actions/github-script@v7
               with:
                   script: |
                       const numRunners = parseInt(process.env.NUM_RUNNERS, 10);
@@ -129,18 +129,18 @@ jobs:
                     - runAllTests: false
                       project: Pinecone
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@v4
               with:
                   name: webapp
                   path: webapp
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
                   cache-dependency-path: yarn.lock
@@ -154,11 +154,12 @@ 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@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
+              uses: actions/cache@v4
               id: playwright-cache
               with:
-                  path: ~/.cache/ms-playwright
-                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}
+                  path: |
+                      ~/.cache/ms-playwright
+                  key: ${{ runner.os }}-playwright-${{ steps.playwright.outputs.version }}
 
             - name: Install Playwright browsers
               if: steps.playwright-cache.outputs.cache-hit != 'true'
@@ -179,35 +180,25 @@ jobs:
 
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@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
-            - downstream-modules
+        needs: playwright
         if: always()
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
               if: inputs.skip != true
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@v4
               if: inputs.skip != true
               with:
                   cache: "yarn"
@@ -219,7 +210,7 @@ jobs:
 
             - name: Download blob reports from GitHub Actions Artifacts
               if: inputs.skip != true
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@v4
               with:
                   pattern: all-blob-reports-*
                   path: all-blob-reports
@@ -227,7 +218,7 @@ jobs:
 
             - name: Merge into HTML Report
               if: inputs.skip != true
-              run: yarn playwright merge-reports --reporter=html,./playwright/flaky-reporter.ts,@element-hq/element-web-playwright-common/lib/stale-screenshot-reporter.js ./all-blob-reports
+              run: yarn playwright merge-reports --reporter=html,./playwright/flaky-reporter.ts,./playwright/stale-screenshot-reporter.ts ./all-blob-reports
               env:
                   # Only pass creds to the flaky-reporter on main branch runs
                   GITHUB_TOKEN: ${{ github.ref_name == 'develop' && secrets.ELEMENT_BOT_TOKEN || '' }}
@@ -235,11 +226,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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@v4
               with:
                   name: html-report
                   path: playwright-report
                   retention-days: 14
 
-            - if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')
+            - if: needs.playwright.result != 'skipped' && needs.playwright.result != 'success'
               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@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@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@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@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@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@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@9805cd123fc9a7e421e35340a05e1ebc5dee46b5 # v3
+              uses: matrix-org/netlify-pr-preview@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@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
 
             - name: Update synapse image
               run: |
@@ -21,15 +21,6 @@ jobs:
               env:
                   IMAGE: ghcr.io/element-hq/synapse:develop
 
-            - name: Update MAS image
-              run: |
-                  docker pull "$IMAGE"
-                  INSPECT=$(docker inspect --format='{{index .RepoDigests 0}}' "$IMAGE")
-                  DIGEST=${INSPECT#*@}
-                  sed -i "s/const TAG.*/const TAG = \"main@$DIGEST\";/" playwright/testcontainers/mas.ts
-              env:
-                  IMAGE: ghcr.io/element-hq/matrix-authentication-service:main
-
             - name: Create Pull Request
               id: cpr
               uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7

.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@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@v7
               with:
                   script: |
                       const baseBranch = context.payload.pull_request.base.ref;

.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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@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 / draft"
+                  check-name: draft
                   allowed-conclusions: success
 
             - name: Wait for element-web draft
@@ -111,7 +111,7 @@ jobs:
                   repo: element-hq/element-web
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: "draft / draft"
+                  check-name: draft
                   allowed-conclusions: success
 
             - name: Wait for element-desktop draft
@@ -122,5 +122,5 @@ jobs:
                   repo: element-hq/element-desktop
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: "draft / draft"
+                  check-name: draft
                   allowed-conclusions: success

.github/workflows/shared-component-visual-tests-netlify.yaml

@@ -1,51 +0,0 @@
-# Triggers after the shared component tests have finished,
-# It uploads the received images and diffs to netlify, printing the URLs to the console
-name: Upload Shared Component Visual Test Diffs
-on:
-    workflow_run:
-        workflows: ["Shared Component Visual Tests"]
-        types:
-            - completed
-
-concurrency:
-    group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch || github.run_id }}
-    cancel-in-progress: ${{ github.event.workflow_run.event == 'pull_request' }}
-
-permissions: {}
-
-jobs:
-    report:
-        if: github.event.workflow_run.conclusion == 'failure'
-        name: Upload Diffs
-        runs-on: ubuntu-24.04
-        environment: Netlify
-        permissions:
-            actions: read
-            deployments: write
-        steps:
-            - name: Install tree
-              run: "sudo apt-get install -y tree"
-
-            - name: Download Diffs
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
-              with:
-                  github-token: ${{ secrets.GITHUB_TOKEN }}
-                  run-id: ${{ github.event.workflow_run.id }}
-                  name: received-images
-                  path: received-images
-
-            - name: Generate Index
-              run: "cd received-images && tree -L 1 --noreport -H '' -o index.html ."
-
-            - name: 📤 Deploy to Netlify
-              uses: matrix-org/netlify-pr-preview@9805cd123fc9a7e421e35340a05e1ebc5dee46b5 # v3
-              with:
-                  path: received-images
-                  owner: ${{ github.event.workflow_run.head_repository.owner.login }}
-                  branch: ${{ github.event.workflow_run.head_branch }}
-                  revision: ${{ github.event.workflow_run.head_sha }}
-                  token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-                  site_id: ${{ vars.NETLIFY_SITE_ID }}
-                  desc: Shared Component Visual Diffs
-                  deployment_env: SharedComponentDiffs
-                  prefix: "diffs-"

.github/workflows/shared-component-visual-tests.yaml

@@ -1,70 +0,0 @@
-name: Shared Component Visual Tests
-on:
-    pull_request: {}
-    merge_group:
-        types: [checks_requested]
-    push:
-        branches: [develop, master]
-
-concurrency:
-    group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event_name }}
-    cancel-in-progress: true
-
-permissions: {} # No permissions required
-
-jobs:
-    testStorybook:
-        name: "Run Visual Tests"
-        runs-on: ubuntu-24.04
-        permissions:
-            actions: read
-            issues: read
-            pull-requests: read
-        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
-              with:
-                  persist-credentials: false
-                  repository: element-hq/element-web
-
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
-              with:
-                  cache: "yarn"
-                  node-version: "lts/*"
-
-            - name: Install dependencies
-              run: yarn install --frozen-lockfile
-
-            - name: Get installed Playwright version
-              id: playwright
-              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@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
-              id: playwright-cache
-              with:
-                  path: ~/.cache/ms-playwright
-                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}-onlyshell
-
-            - name: Install Playwright browsers
-              if: steps.playwright-cache.outputs.cache-hit != 'true'
-              run: "yarn playwright install --with-deps --only-shell"
-
-            - name: Build Element Web resources
-              # Needed to prepare language files
-              run: "yarn build:res"
-
-            - name: Build storybook dependencies
-              # When the first test is ran, it will fail because the dependencies are not yet built.
-              # This step is to ensure that the dependencies are built before running the tests.
-              run: "yarn test:storybook:ci"
-              continue-on-error: true
-
-            - name: Run Visual tests
-              run: "yarn test:storybook:ci"
-
-            - name: Upload received images & diffs
-              if: always()
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
-              with:
-                  name: received-images
-                  path: playwright/shared-component-received

.github/workflows/static_analysis.yaml

@@ -23,9 +23,9 @@ jobs:
         name: "Typescript Syntax Check"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -51,14 +51,12 @@ jobs:
                 error|invalid_json
                 error|misconfigured
                 welcome_to_element
-                devtools|settings|elementCallUrl
-                labs|sliding_sync_description
 
     rethemendex_lint:
         name: "Rethemendex Check"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
 
             - run: ./res/css/rethemendex.sh
 
@@ -68,9 +66,9 @@ jobs:
         name: "ESLint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -86,9 +84,9 @@ jobs:
         name: "Style Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -104,9 +102,9 @@ jobs:
         name: "Workflow Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -122,9 +120,9 @@ jobs:
         name: "Analyse Dead Code"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@v4
               with:
                   repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}
 
             - name: Yarn cache
-              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+              uses: actions/setup-node@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@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
+              uses: actions/cache@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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@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@741ea90ba6c3ca76fe0d43ba11a90cda97d5e685
+              uses: guibranco/github-status-action-v2@5ef6e175c333bc629f3718b083c8a2ff6e0bbfbc
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success

.github/workflows/triage-assigned.yml

@@ -11,11 +11,10 @@ jobs:
         runs-on: ubuntu-24.04
         if: |
             contains(github.event.issue.assignees.*.login, 't3chguy') ||
-            contains(github.event.issue.assignees.*.login, 'florianduros') ||
-            contains(github.event.issue.assignees.*.login, 'dbkr') ||
+            contains(github.event.issue.assignees.*.login, 'andybalaam') ||
             contains(github.event.issue.assignees.*.login, 'MidhunSureshR')
         steps:
-            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               with:
                   project-url: https://github.com/orgs/element-hq/projects/67
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/triage-incoming.yml

@@ -10,7 +10,7 @@ jobs:
     automate-project-columns:
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               with:
                   project-url: https://github.com/orgs/element-hq/projects/120
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

.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@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@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@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@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@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+              uses: actions/add-to-project@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@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+              uses: actions/add-to-project@v1.0.2
               with:
                   project-url: ${{ env.PROJECT_URL }}
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -112,7 +112,7 @@ jobs:
              contains(github.event.issue.labels.*.name, 'O-Frequent') ||
              contains(github.event.issue.labels.*.name, 'A11y'))
         steps:
-            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               with:
                   project-url: https://github.com/orgs/element-hq/projects/18
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -123,7 +123,7 @@ jobs:
         if: >
             contains(github.event.issue.labels.*.name, 'X-Needs-Product')
         steps:
-            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               with:
                   project-url: https://github.com/orgs/element-hq/projects/28
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -134,7 +134,7 @@ jobs:
         if: >
             contains(github.event.issue.labels.*.name, 'A-New-Search-Experience')
         steps:
-            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               with:
                   project-url: https://github.com/orgs/element-hq/projects/48
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -145,20 +145,20 @@ jobs:
         if: >
             contains(github.event.issue.labels.*.name, 'Team: VoIP')
         steps:
-            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               with:
                   project-url: https://github.com/orgs/element-hq/projects/41
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
 
-    crypto:
-        name: Add labelled issues to Crypto project
+    verticals_feature:
+        name: Add labelled issues to Verticals Feature project
         runs-on: ubuntu-24.04
         if: >
-            contains(github.event.issue.labels.*.name, 'Team: Crypto')
+            contains(github.event.issue.labels.*.name, 'Team: Verticals Feature')
         steps:
-            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               with:
-                  project-url: https://github.com/orgs/element-hq/projects/76
+                  project-url: https://github.com/orgs/element-hq/projects/57
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
 
     tech_debt:
@@ -172,7 +172,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'A-Testing') ||
             contains(github.event.issue.labels.*.name, 'Z-Flaky-Test')
         steps:
-            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               with:
                   project-url: https://github.com/orgs/element-hq/projects/101
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/triage-move-review-requests.yml

@@ -9,7 +9,7 @@ jobs:
         name: Move PRs asking for design review to the design board
         runs-on: ubuntu-24.04
         steps:
-            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@v2.x
               id: find_team_members
               with:
                   headers: '{"GraphQL-Features": "projects_next_graphql"}'
@@ -52,7 +52,7 @@ jobs:
                   fi
               env:
                   TEAM: "design"
-            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@v2.x
               id: add_to_project
               if: steps.any_matching_reviewers.outputs.match == 'true'
               with:
@@ -76,7 +76,7 @@ jobs:
         name: Move PRs asking for design review to the design board
         runs-on: ubuntu-24.04
         steps:
-            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@v2.x
               id: find_team_members
               with:
                   headers: '{"GraphQL-Features": "projects_next_graphql"}'
@@ -119,7 +119,7 @@ jobs:
                   fi
               env:
                   TEAM: "product"
-            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@v2.x
               id: add_to_project
               if: steps.any_matching_reviewers.outputs.match == 'true'
               with:

.github/workflows/triage-stale.yml

@@ -12,17 +12,15 @@ jobs:
             issues: write
             pull-requests: write
         steps:
-            - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9
+            - uses: actions/stale@v9
               with:
                   operations-per-run: 100
-
                   # Flaky test issue closing
-                  any-of-issue-labels: "Z-Flaky-Test-Chrome,Z-Flaky-Test-Firefox,Z-Flaky-Test-Webkit"
+                  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

.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@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@v4
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.github/workflows/update-topics.yaml

@@ -22,11 +22,11 @@ jobs:
         runs-on: ubuntu-24.04
         environment: Matrix
         steps:
-            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@v7
               env:
                   HS_URL: ${{ secrets.BETABOT_HS_URL }}
                   LOBBY_ROOM_ID: ${{ secrets.ROOM_ID }}
-                  PUBLIC_ROOM_ID: "!IemiTbwVankHTFiEoh:matrix.org"
+                  PUBLIC_ROOM_ID: "!YTvKGNlinIzlkMTVRl:matrix.org"
                   ANNOUNCEMENT_ROOM_ID: "!bijaLdadorKgNGtHdA:matrix.org"
                   TOKEN: ${{ secrets.BETABOT_ACCESS_TOKEN }}
                   RELEASE_STATUS: "Release status: ${{ inputs.expected_status }} expected ${{ inputs.expected_date }}"
@@ -81,11 +81,6 @@ jobs:
                                   d.body = d.body.replace(regex, releaseTopic);
                               });
                           }
-                          if (data["m.topic"]) {
-                              data["m.topic"].forEach(d => {
-                                  d.body = d.body.replace(regex, releaseTopic);
-                              });
-                          }
 
                           res = await fetch(apiUrl, {
                               method: "PUT",

.gitignore

@@ -25,12 +25,10 @@ electron/pub
 .env
 /coverage
 # Auto-generated file
+/src/modules.ts
 /src/modules.js
 /build_config.yaml
 /book
 /index.html
 # version file and tarball created by `npm pack` / `yarn pack`
 /git-revision.txt
-
-*storybook.log
-storybook-static

.storybook/ElementTheme.ts

@@ -1,28 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { create } from "storybook/theming";
-
-export default create({
-    base: "light",
-
-    // Colors
-    textColor: "#1b1d22",
-    colorSecondary: "#111111",
-
-    // UI
-    appBg: "#ffffff",
-    appContentBg: "#ffffff",
-
-    // Toolbar
-    barBg: "#ffffff",
-
-    brandTitle: "Element Web",
-    brandUrl: "https://github.com/element-hq/element-web",
-    brandImage: "https://element.io/images/logo-ele-secondary.svg",
-    brandTarget: "_self",
-});

.storybook/languageAddon.tsx

@@ -1,61 +0,0 @@
-/*
- * Copyright 2025 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import { Addon, types, useGlobals } from "storybook/manager-api";
-import { WithTooltip, IconButton, TooltipLinkList } from "storybook/internal/components";
-import React from "react";
-import { GlobeIcon } from "@storybook/icons";
-
-// We can't import `shared/i18n.tsx` directly here.
-// The storybook addon doesn't seem to benefit the vite config of storybook and we can't resolve the alias in i18n.tsx.
-import json from "../webapp/i18n/languages.json";
-const languages = Object.keys(json).filter((lang) => lang !== "default");
-
-/**
- * Returns the title of a language in the user's locale.
- */
-function languageTitle(language: string): string {
-    return new Intl.DisplayNames([language], { type: "language", style: "short" }).of(language) || language;
-}
-
-export const languageAddon: Addon = {
-    title: "Language Selector",
-    type: types.TOOL,
-    render: ({ active }) => {
-        const [globals, updateGlobals] = useGlobals();
-        const selectedLanguage = globals.language || "en";
-
-        return (
-            <WithTooltip
-                placement="top"
-                trigger="click"
-                closeOnOutsideClick
-                tooltip={({ onHide }) => {
-                    return (
-                        <TooltipLinkList
-                            links={languages.map((language) => ({
-                                id: language,
-                                title: languageTitle(language),
-                                active: selectedLanguage === language,
-                                onClick: async () => {
-                                    // Update the global state with the selected language
-                                    updateGlobals({ language });
-                                    onHide();
-                                },
-                            }))}
-                        />
-                    );
-                }}
-            >
-                <IconButton title="Language">
-                    <GlobeIcon />
-                    {languageTitle(selectedLanguage)}
-                </IconButton>
-            </WithTooltip>
-        );
-    },
-};

.storybook/main.ts

@@ -1,40 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import type { StorybookConfig } from "@storybook/react-vite";
-import path from "node:path";
-import { nodePolyfills } from "vite-plugin-node-polyfills";
-import { mergeConfig } from "vite";
-
-const config: StorybookConfig = {
-    stories: ["../src/shared-components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-    staticDirs: ["../webapp"],
-    addons: ["@storybook/addon-docs", "@storybook/addon-designs", "@storybook/addon-a11y"],
-    framework: "@storybook/react-vite",
-    core: {
-        disableTelemetry: true,
-    },
-    typescript: {
-        reactDocgen: "react-docgen-typescript",
-    },
-    async viteFinal(config) {
-        return mergeConfig(config, {
-            resolve: {
-                alias: {
-                    // Alias used by i18n.tsx
-                    $webapp: path.resolve("webapp"),
-                },
-            },
-            // Needed for counterpart to work
-            plugins: [nodePolyfills({ include: ["process", "util"] })],
-            server: {
-                allowedHosts: ["localhost", ".docker.internal"],
-            },
-        });
-    },
-};
-export default config;

.storybook/manager.js

@@ -1,18 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-
-import { addons } from "storybook/manager-api";
-import ElementTheme from "./ElementTheme";
-import { languageAddon } from "./languageAddon";
-
-addons.setConfig({
-    theme: ElementTheme,
-});
-
-addons.register("elementhq/language", () => addons.add("language", languageAddon));

.storybook/preview.css

@@ -1,10 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.docs-story {
-    background: var(--cpd-color-bg-canvas-default);
-}

.storybook/preview.tsx

@@ -1,113 +0,0 @@
-import type { ArgTypes, Preview, Decorator } from "@storybook/react-vite";
-import { addons } from "storybook/preview-api";
-
-import "../res/css/shared.pcss";
-import "./preview.css";
-import React, { useLayoutEffect } from "react";
-import { FORCE_RE_RENDER } from "storybook/internal/core-events";
-import { setLanguage } from "../src/shared-components/utils/i18n";
-import { TooltipProvider } from "@vector-im/compound-web";
-
-export const globalTypes = {
-    theme: {
-        name: "Theme",
-        description: "Global theme for components",
-        toolbar: {
-            icon: "circlehollow",
-            title: "Theme",
-            items: [
-                { title: "System", value: "system", icon: "browser" },
-                { title: "Light", value: "light", icon: "sun" },
-                { title: "Light (high contrast)", value: "light-hc", icon: "sun" },
-                { title: "Dark", value: "dark", icon: "moon" },
-                { title: "Dark (high contrast)", value: "dark-hc", icon: "moon" },
-            ],
-        },
-    },
-    language: {
-        name: "Language",
-        description: "Global language for components",
-    },
-    initialGlobals: {
-        theme: "system",
-        language: "en",
-    },
-} satisfies ArgTypes;
-
-const allThemesClasses = globalTypes.theme.toolbar.items.map(({ value }) => `cpd-theme-${value}`);
-
-const ThemeSwitcher: React.FC<{
-    theme: string;
-}> = ({ theme }) => {
-    useLayoutEffect(() => {
-        document.documentElement.classList.remove(...allThemesClasses);
-        if (theme !== "system") {
-            document.documentElement.classList.add(`cpd-theme-${theme}`);
-        }
-        return () => document.documentElement.classList.remove(...allThemesClasses);
-    }, [theme]);
-
-    return null;
-};
-
-const withThemeProvider: Decorator = (Story, context) => {
-    return (
-        <>
-            <ThemeSwitcher theme={context.globals.theme} />
-            <Story />
-        </>
-    );
-};
-
-const LanguageSwitcher: React.FC<{
-    language: string;
-}> = ({ language }) => {
-    useLayoutEffect(() => {
-        const changeLanguage = async (language: string) => {
-            await setLanguage(language);
-            // Force the component to re-render to apply the new language
-            addons.getChannel().emit(FORCE_RE_RENDER);
-        };
-        changeLanguage(language);
-    }, [language]);
-
-    return null;
-};
-
-export const withLanguageProvider: Decorator = (Story, context) => {
-    return (
-        <>
-            <LanguageSwitcher language={context.globals.language} />
-            <Story />
-        </>
-    );
-};
-
-const withTooltipProvider: Decorator = (Story) => {
-    return (
-        <TooltipProvider>
-            <Story />
-        </TooltipProvider>
-    );
-};
-
-const preview: Preview = {
-    tags: ["autodocs"],
-    decorators: [withThemeProvider, withLanguageProvider, withTooltipProvider],
-    parameters: {
-        options: {
-            storySort: {
-                method: "alphabetical",
-            },
-        },
-        a11y: {
-            /*
-             * Configure test behavior
-             * See: https://storybook.js.org/docs/next/writing-tests/accessibility-testing#test-behavior
-             */
-            test: "error",
-        },
-    },
-};
-
-export default preview;

.storybook/test-runner.js

@@ -1,37 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { waitForPageReady } from "@storybook/test-runner";
-import { toMatchImageSnapshot } from "jest-image-snapshot";
-
-const customSnapshotsDir = `${process.cwd()}/playwright/shared-component-snapshots/`;
-const customReceivedDir = `${process.cwd()}/playwright/shared-component-received/`;
-
-/**
- * @type {import('@storybook/test-runner').TestRunnerConfig}
- */
-const config = {
-    setup(page) {
-        expect.extend({ toMatchImageSnapshot });
-    },
-    async postVisit(page, context) {
-        await waitForPageReady(page);
-
-        // If you want to take screenshot of multiple browsers, use
-        // page.context().browser().browserType().name() to get the browser name to prefix the file name
-        const image = await page.screenshot();
-        expect(image).toMatchImageSnapshot({
-            customSnapshotsDir,
-            customSnapshotIdentifier: `${context.id}-${process.platform}`,
-            storeReceivedOnFailure: true,
-            customReceivedDir,
-            customDiffDir: customReceivedDir,
-        });
-    },
-};
-
-export default config;

.stylelintrc.js

@@ -70,13 +70,5 @@ module.exports = {
                 ],
             },
         ],
-        "property-no-deprecated": [
-            true,
-            {
-                ignoreProperties: ["-webkit-box-orient", "word-wrap"],
-            },
-        ],
-        "nesting-selector-no-missing-scoping-root": null,
-        "no-invalid-position-declaration": null,
     },
 };

AUTHORS.rst

@@ -19,6 +19,3 @@ include:
 
 * Thom Cleary (https://github.com/thomcatdotrocks)
   Small update for tarball deployment
-
-* Alexander (https://github.com/ioalexander)
-  Save image on CTRL + S shortcut

CHANGELOG.md

@@ -1,416 +1,3 @@
-Changes in [1.12.0](https://github.com/element-hq/element-web/releases/tag/v1.12.0) (2025-09-23)
-================================================================================================
-## 🦖 Deprecations
-
-* Remove remaining support for outdated .well-known settings ([#30702](https://github.com/element-hq/element-web/pull/30702)). Contributed by @richvdh.
-
-## ✨ Features
-
-* Add decline button to call notification toast (use new notification event) ([#30729](https://github.com/element-hq/element-web/pull/30729)). Contributed by @toger5.
-* Use the new room list by default ([#30640](https://github.com/element-hq/element-web/pull/30640)). Contributed by @langleyd.
-* "Verify this device" redesign ([#30596](https://github.com/element-hq/element-web/pull/30596)). Contributed by @uhoreg.
-* Set Element Call "intents" when starting and answering DM calls. ([#30730](https://github.com/element-hq/element-web/pull/30730)). Contributed by @Half-Shot.
-* Add axe compliance for new room list ([#30700](https://github.com/element-hq/element-web/pull/30700)). Contributed by @langleyd.
-* Stop ringing and remove toast if another device answers a RTC call. ([#30728](https://github.com/element-hq/element-web/pull/30728)). Contributed by @Half-Shot.
-* Automatically adjust history visibility when making a room private ([#30713](https://github.com/element-hq/element-web/pull/30713)). Contributed by @Half-Shot.
-* Release announcement for new room list ([#30675](https://github.com/element-hq/element-web/pull/30675)). Contributed by @dbkr.
-
-## 🐛 Bug Fixes
-
-* [Backport staging] Room list: make the filter resize correctly ([#30795](https://github.com/element-hq/element-web/pull/30795)). Contributed by @RiotRobot.
-* [Backport staging] Avoid flicker of the room list filter on resize ([#30794](https://github.com/element-hq/element-web/pull/30794)). Contributed by @RiotRobot.
-* Don't show release announcements while toasts are displayed ([#30770](https://github.com/element-hq/element-web/pull/30770)). Contributed by @dbkr.
-* Fix enabling key backup not working if there is an untrusted key backup ([#30707](https://github.com/element-hq/element-web/pull/30707)). Contributed by @Half-Shot.
-* Force `preload` to be false when setting an intent on an Element Call. ([#30759](https://github.com/element-hq/element-web/pull/30759)). Contributed by @Half-Shot.
-* Fix handling of 413 server response when uploading media ([#30737](https://github.com/element-hq/element-web/pull/30737)). Contributed by @hughns.
-* Make landmark navigation work with new room list ([#30747](https://github.com/element-hq/element-web/pull/30747)). Contributed by @dbkr.
-* Prevent voice message from displaying spurious errors ([#30736](https://github.com/element-hq/element-web/pull/30736)). Contributed by @florianduros.
-* Align default avatar and fix colors in composer pills ([#30739](https://github.com/element-hq/element-web/pull/30739)). Contributed by @florianduros.
-* Use configured URL for link to desktop app in message search settings ([#30742](https://github.com/element-hq/element-web/pull/30742)). Contributed by @t3chguy.
-* Fix history visibility when creating space rooms ([#30745](https://github.com/element-hq/element-web/pull/30745)). Contributed by @dbkr.
-* Check HTML-encoded quotes when handling translations for embedded pages (such as welcome.html) ([#30743](https://github.com/element-hq/element-web/pull/30743)). Contributed by @Half-Shot.
-* Fix local room encryption status always not enabled ([#30461](https://github.com/element-hq/element-web/pull/30461)). Contributed by @BillCarsonFr.
-* fix: make url in topic in room intro clickable ([#30686](https://github.com/element-hq/element-web/pull/30686)). Contributed by @florianduros.
-* Block change recovery key button while a change is ongoing. ([#30664](https://github.com/element-hq/element-web/pull/30664)). Contributed by @Half-Shot.
-* Hide advanced settings during room creation when `UIFeature.advancedSettings=false` ([#30684](https://github.com/element-hq/element-web/pull/30684)). Contributed by @florianduros.
-* A11y: improve accessibility of pinned messages ([#30558](https://github.com/element-hq/element-web/pull/30558)). Contributed by @florianduros.
-
-
-Changes in [1.11.112](https://github.com/element-hq/element-web/releases/tag/v1.11.112) (2025-09-16)
-====================================================================================================
-Fix [CVE-2025-59161](https://www.cve.org/CVERecord?id=CVE-2025-59161) / [GHSA-m6c8-98f4-75rr](https://github.com/element-hq/element-web/security/advisories/GHSA-m6c8-98f4-75rr)
-
-
-Changes in [1.11.111](https://github.com/element-hq/element-web/releases/tag/v1.11.111) (2025-09-10)
-====================================================================================================
-## ✨ Features
-
-* Do not hide media from your own user by default ([#29797](https://github.com/element-hq/element-web/pull/29797)). Contributed by @Half-Shot.
-* Remember whether sidebar is shown for calls when switching rooms ([#30262](https://github.com/element-hq/element-web/pull/30262)). Contributed by @bojidar-bg.
-* Open the proper integration settings on integrations disabled error ([#30538](https://github.com/element-hq/element-web/pull/30538)). Contributed by @Half-Shot.
-* Show a "progress" dialog while invites are being sent ([#30561](https://github.com/element-hq/element-web/pull/30561)). Contributed by @richvdh.
-* Move the room list to the new ListView(backed by react-virtuoso)  ([#30515](https://github.com/element-hq/element-web/pull/30515)). Contributed by @langleyd.
-
-## 🐛 Bug Fixes
-
-* [Backport staging] Ensure container starts if it is mounted with an empty /modules directory. ([#30705](https://github.com/element-hq/element-web/pull/30705)). Contributed by @RiotRobot.
-* Fix room joining over federation not specifying vias or using aliases ([#30641](https://github.com/element-hq/element-web/pull/30641)). Contributed by @t3chguy.
-* Fix stable-suffixed MSC4133 support ([#30649](https://github.com/element-hq/element-web/pull/30649)). Contributed by @dbkr.
-* Fix i18n of message when a setting is disabled ([#30646](https://github.com/element-hq/element-web/pull/30646)). Contributed by @dbkr.
-* ListView should not handle the arrow keys if there is a modifier applied ([#30633](https://github.com/element-hq/element-web/pull/30633)). Contributed by @langleyd.
-* Make BaseDialog's div keyboard focusable and fix test. ([#30631](https://github.com/element-hq/element-web/pull/30631)). Contributed by @langleyd.
-* Fix: Allow triple-click text selection to flow around pills ([#30349](https://github.com/element-hq/element-web/pull/30349)). Contributed by @AlirezaMrtz.
-* Watch for a 'join' action to know when the call is connected ([#29492](https://github.com/element-hq/element-web/pull/29492)). Contributed by @robintown.
-* Fix: add missing tooltip and aria-label to lock icon next to composer ([#30623](https://github.com/element-hq/element-web/pull/30623)). Contributed by @florianduros.
-* Don't render context menu when scrolling ([#30613](https://github.com/element-hq/element-web/pull/30613)). Contributed by @langleyd.
-
-
-Changes in [1.11.110](https://github.com/element-hq/element-web/releases/tag/v1.11.110) (2025-08-27)
-====================================================================================================
-## ✨ Features
-
-* Hide recovery key when re-entering it while creating or changing it ([#30499](https://github.com/element-hq/element-web/pull/30499)). Contributed by @andybalaam.
-* Add `?no_universal_links=true` to OIDC url so EX doesn't try to handle it ([#29439](https://github.com/element-hq/element-web/pull/29439)). Contributed by @t3chguy.
-* Show a blue lock for unencrypted rooms and hide the grey shield for encrypted rooms ([#30440](https://github.com/element-hq/element-web/pull/30440)). Contributed by @langleyd.
-* Add support for Module API 1.4 ([#30185](https://github.com/element-hq/element-web/pull/30185)). Contributed by @t3chguy.
-* MVVM - Introduce some helpers for snapshot management ([#30398](https://github.com/element-hq/element-web/pull/30398)). Contributed by @MidhunSureshR.
-
-## 🐛 Bug Fixes
-
-* A11y: move focus to right panel when opened ([#30553](https://github.com/element-hq/element-web/pull/30553)). Contributed by @florianduros.
-* Fix e2e warning icon should be white ([#30539](https://github.com/element-hq/element-web/pull/30539)). Contributed by @florianduros.
-* Remove NoOneHere disabled reason. ([#30524](https://github.com/element-hq/element-web/pull/30524)). Contributed by @toger5.
-* Fix downloading files with authenticated media API ([#30520](https://github.com/element-hq/element-web/pull/30520)). Contributed by @t3chguy.
-* Fix call permissions check confusion around element call ([#30521](https://github.com/element-hq/element-web/pull/30521)). Contributed by @t3chguy.
-* Fix line wrap around emoji verification ([#30523](https://github.com/element-hq/element-web/pull/30523)). Contributed by @t3chguy.
-* Don't highlight redacted events ([#30519](https://github.com/element-hq/element-web/pull/30519)). Contributed by @t3chguy.
-* Fix matrix.to links not being handled in the app ([#30522](https://github.com/element-hq/element-web/pull/30522)). Contributed by @t3chguy.
-* Fix issue of new room list taking up the full width ([#30459](https://github.com/element-hq/element-web/pull/30459)). Contributed by @langleyd.
-* Fix widget persistence in React development mode ([#30509](https://github.com/element-hq/element-web/pull/30509)). Contributed by @robintown.
-* Fix widget initialization in React development mode ([#30463](https://github.com/element-hq/element-web/pull/30463)). Contributed by @robintown.
-
-
-Changes in [1.11.109](https://github.com/element-hq/element-web/releases/tag/v1.11.109) (2025-08-11)
-====================================================================================================
-This release supports the upcoming v12 ("hydra") Matrix room version and is necessary to view and participate in these rooms.
-
-## ✨ Features
-
-* [Backport staging] Allow /upgraderoom command without developer mode enabled ([#30529](https://github.com/element-hq/element-web/pull/30529)). Contributed by @RiotRobot.
-* [Backport staging] Support for creator/owner power level ([#30526](https://github.com/element-hq/element-web/pull/30526)). Contributed by @RiotRobot.
-* New room list: change icon and label of menu item for to start a DM ([#30470](https://github.com/element-hq/element-web/pull/30470)). Contributed by @florianduros.
-* Implement the member list with virtuoso ([#29869](https://github.com/element-hq/element-web/pull/29869)). Contributed by @langleyd.
-* Add labs option for history sharing on invite ([#30313](https://github.com/element-hq/element-web/pull/30313)). Contributed by @richvdh.
-* Bump wysiwyg to 2.39.0 adding support for pasting rich text content in the Rich Text Edtior ([#30421](https://github.com/element-hq/element-web/pull/30421)). Contributed by @langleyd.
-* Support `EventShieldReason.MISMATCHED_SENDER` ([#30403](https://github.com/element-hq/element-web/pull/30403)). Contributed by @richvdh.
-* Change unencrypted and public pills to blue ([#30399](https://github.com/element-hq/element-web/pull/30399)). Contributed by @florianduros.
-* Change color of public room icon ([#30390](https://github.com/element-hq/element-web/pull/30390)). Contributed by @florianduros.
-* Script for updating storybook screenshots ([#30340](https://github.com/element-hq/element-web/pull/30340)). Contributed by @dbkr.
-* Add toggle to hide empty state in devtools ([#30352](https://github.com/element-hq/element-web/pull/30352)). Contributed by @toger5.
-
-## 🐛 Bug Fixes
-
-* [Backport staging] Use userId to filter users in non-federated rooms when showing the InviteDialog ([#30537](https://github.com/element-hq/element-web/pull/30537)). Contributed by @RiotRobot.
-* [Backport staging] Catch error when encountering invalid m.room.pinned\_events event ([#30536](https://github.com/element-hq/element-web/pull/30536)). Contributed by @RiotRobot.
-* Update for compatibility with v12 rooms ([#30452](https://github.com/element-hq/element-web/pull/30452)). Contributed by @dbkr.
-* New room list: fix tooltip on presence ([#30474](https://github.com/element-hq/element-web/pull/30474)). Contributed by @florianduros.
-* New room list: add tooltip for presence and room status ([#30472](https://github.com/element-hq/element-web/pull/30472)). Contributed by @florianduros.
-* Fix: Clicking on an item in the member list causes it to scroll to the top rather than show the profile view ([#30455](https://github.com/element-hq/element-web/pull/30455)). Contributed by @langleyd.
-* Put the 'decrypting' tooltip back ([#30446](https://github.com/element-hq/element-web/pull/30446)). Contributed by @dbkr.
-* Use server name explicitly for via. ([#30362](https://github.com/element-hq/element-web/pull/30362)). Contributed by @Half-Shot.
-* fix: replace hardcoded string in poll history dialog ([#30402](https://github.com/element-hq/element-web/pull/30402)). Contributed by @florianduros.
-* fix: replace hardcoded string on qr code back button ([#30401](https://github.com/element-hq/element-web/pull/30401)). Contributed by @florianduros.
-* Fix color of icon button with outline ([#30361](https://github.com/element-hq/element-web/pull/30361)). Contributed by @florianduros.
-
-
-Changes in [1.11.108](https://github.com/element-hq/element-web/releases/tag/v1.11.108) (2025-07-30)
-====================================================================================================
-## 🐛 Bug Fixes
-
-* [Backport staging] Fix downloaded attachments not being decrypted ([#30434](https://github.com/element-hq/element-web/pull/30434)). Contributed by @RiotRobot.
-
-
-Changes in [1.11.107](https://github.com/element-hq/element-web/releases/tag/v1.11.107) (2025-07-29)
-====================================================================================================
-## ✨ Features
-
-* Message preview should show tooltip with the full message on hover ([#30265](https://github.com/element-hq/element-web/pull/30265)). Contributed by @MidhunSureshR.
-* Support rendering notification badges on platforms that do their own icon overlays ([#30315](https://github.com/element-hq/element-web/pull/30315)). Contributed by @Half-Shot.
-* Add SubscriptionViewModel base class ([#30297](https://github.com/element-hq/element-web/pull/30297)). Contributed by @dbkr.
-* Enhancement: Save image on CTRL+S ([#30330](https://github.com/element-hq/element-web/pull/30330)). Contributed by @ioalexander.
-* Add quote functionality to MessageContextMenu (#29893) ([#30323](https://github.com/element-hq/element-web/pull/30323)). Contributed by @AlirezaMrtz.
-* Initial structure for shared component views ([#30216](https://github.com/element-hq/element-web/pull/30216)). Contributed by @dbkr.
-
-## 🐛 Bug Fixes
-
-* [Backport staging] Fix e2e shield being invisible in white mode for encrypted room ([#30411](https://github.com/element-hq/element-web/pull/30411)). Contributed by @RiotRobot.
-* Force ED titlebar color for new room list ([#30332](https://github.com/element-hq/element-web/pull/30332)). Contributed by @florianduros.
-* Add a background color to left panel for macos titlebar in element desktop ([#30328](https://github.com/element-hq/element-web/pull/30328)). Contributed by @florianduros.
-* Fix: Prevent page refresh on Enter key in right panel member search ([#30312](https://github.com/element-hq/element-web/pull/30312)). Contributed by @AlirezaMrtz.
-
-
-Changes in [1.11.106](https://github.com/element-hq/element-web/releases/tag/v1.11.106) (2025-07-15)
-====================================================================================================
-## ✨ Features
-
-* [Backport staging] Fix e2e icon colour ([#30304](https://github.com/element-hq/element-web/pull/30304)). Contributed by @RiotRobot.
-* Add support for module message hint `allowDownloadingMedia` ([#30252](https://github.com/element-hq/element-web/pull/30252)). Contributed by @Half-Shot.
-* Update the mobile\_guide page to the new design and link out to Element X by default. ([#30172](https://github.com/element-hq/element-web/pull/30172)). Contributed by @pixlwave.
-* Filter settings exported when rageshaking ([#30236](https://github.com/element-hq/element-web/pull/30236)). Contributed by @Half-Shot.
-* Allow Element Call to learn the room name ([#30213](https://github.com/element-hq/element-web/pull/30213)). Contributed by @robintown.
-
-## 🐛 Bug Fixes
-
-* [Backport staging] Fix missing image download button ([#30322](https://github.com/element-hq/element-web/pull/30322)). Contributed by @RiotRobot.
-* Fix transparent verification checkmark in dark mode ([#30235](https://github.com/element-hq/element-web/pull/30235)). Contributed by @Banbuii.
-* Fix logic in DeviceListener ([#30230](https://github.com/element-hq/element-web/pull/30230)). Contributed by @uhoreg.
-* Disable file drag-and-drop if insufficient permissions ([#30186](https://github.com/element-hq/element-web/pull/30186)). Contributed by @t3chguy.
-
-
-Changes in [1.11.105](https://github.com/element-hq/element-web/releases/tag/v1.11.105) (2025-07-01)
-====================================================================================================
-## ✨ Features
-
-* New room list: add context menu to room list item ([#29952](https://github.com/element-hq/element-web/pull/29952)). Contributed by @florianduros.
-* Support for custom message components via Module API ([#30074](https://github.com/element-hq/element-web/pull/30074)). Contributed by @Half-Shot.
-* Prompt users to set up recovery ([#30075](https://github.com/element-hq/element-web/pull/30075)). Contributed by @uhoreg.
-* Update `IconButton` colors ([#30124](https://github.com/element-hq/element-web/pull/30124)). Contributed by @florianduros.
-* New room list: filter list can be collapsed  ([#29992](https://github.com/element-hq/element-web/pull/29992)). Contributed by @florianduros.
-* Show `EmptyRoomListView` when low priority filter matches zero rooms ([#30122](https://github.com/element-hq/element-web/pull/30122)). Contributed by @MidhunSureshR.
-
-## 🐛 Bug Fixes
-
-* Fix untranslatable string "People" in notifications beta ([#30165](https://github.com/element-hq/element-web/pull/30165)). Contributed by @t3chguy.
-* Force verification even after logging in via delegate ([#30141](https://github.com/element-hq/element-web/pull/30141)). Contributed by @andybalaam.
-* Hide add integrations button based on UIComponent.AddIntegrations ([#30140](https://github.com/element-hq/element-web/pull/30140)). Contributed by @t3chguy.
-* Use nav for new room list and label sections ([#30134](https://github.com/element-hq/element-web/pull/30134)). Contributed by @dbkr.
-* Spacestore should emit event after rebuilding home space ([#30132](https://github.com/element-hq/element-web/pull/30132)). Contributed by @MidhunSureshR.
-* Handle m.room.pinned\_events being invalid ([#30129](https://github.com/element-hq/element-web/pull/30129)). Contributed by @t3chguy.
-
-
-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

CONTRIBUTING.md

@@ -2,11 +2,6 @@
 
 Everyone is welcome to contribute code to Element Web, provided that they are willing to license their contributions to Element under a [Contributor License Agreement](https://cla-assistant.io/element-hq/element-web) (CLA). This ensures that their contribution will be made available under an OSI-approved open-source license, currently licensed under Affero General Public License v3 (AGPLv3) or General Public License v3 (GPLv3) at your choice.
 
-If you're contributing, or thinking about contributing, please come & chat to
-us in our development room, [#element-dev](https://matrix.to/#/#element-dev:matrix.org).
-This is the best place to ask questions about the code, how to work on the project
-or whether a change is likely to be accepted.
-
 ## How to contribute
 
 The preferred and easiest way to contribute changes to the project is to fork

Dockerfile

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

README.md

@@ -27,7 +27,7 @@ Element has several tiers of support for different environments:
 - Best effort
     - Definition:
         - Issues **accepted**, regressions **do not block** the release
-        - The wider Element Products (including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
+        - The wider Element Products(including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
         - The element web project and its contributors should keep the client functioning and gracefully degrade where other sibling features (E.g. Element Call) may not function.
     - Last major release of Firefox ESR and Chrome/Edge Extended Stable
 - Community Supported
@@ -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](./developer_guide.md#setting-up-a-dev-environment) below). Alternatively, you
+      environment](#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

code_style.md

@@ -127,6 +127,7 @@ Unless otherwise specified, the following applies to all code:
     2. "Conflicted" typically refers to a getter which wants the same name as the underlying variable.
 20. Prefer readonly members over getters backed by a variable, unless an internal setter is required.
 21. Prefer Interfaces for object definitions, and types for parameter-value-only declarations.
+
     1. Note that an explicit type is optional if not expected to be used outside of the function call,
        unlike in this example:
 
@@ -160,6 +161,7 @@ Unless otherwise specified, the following applies to all code:
 28. Export only what can be reused.
 29. Prefer a type like `Optional<X>` (`type Optional<T> = T | null | undefined`) instead
     of truly optional parameters.
+
     1. A notable exception is when the likelihood of a bug is minimal, such as when a function
        takes an argument that is more often not required than required. An example where the
        `?` operator is inappropriate is when taking a room ID: typically the caller should
@@ -258,6 +260,7 @@ Inheriting all the rules of TypeScript, the following additionally apply:
 12. Interdependence between stores should be kept to a minimum. Break functions and constants out to utilities
     if at all possible.
 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).
 
 14. Curly braces within JSX should be padded with a space, however properties on those components should not.
@@ -385,6 +388,7 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
    properties should be clearly documented.
 
 4. Inside a function, there is no need to comment every line, but consider:
+
     - before a particular multiline section of code within the function, give an overview of what it does,
       to make it easier for a reader to follow the flow through the function as a whole.
     - if it is anything less than obvious, explain _why_ we are doing a particular operation, with particular emphasis

config.sample.json

@@ -20,7 +20,8 @@
         "https://scalar.vector.im/_matrix/integrations/v1",
         "https://scalar.vector.im/api",
         "https://scalar-staging.vector.im/_matrix/integrations/v1",
-        "https://scalar-staging.vector.im/api"
+        "https://scalar-staging.vector.im/api",
+        "https://scalar-staging.riot.im/scalar/api"
     ],
     "default_widget_container_height": 280,
     "default_country_code": "GB",

contribute.json

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

declaration.d.ts

@@ -1,8 +0,0 @@
-/*
- * Copyright 2025 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-declare module "*.module.css";

developer_guide.md

@@ -109,7 +109,7 @@ yarn test
 
 ### End-to-End tests
 
-See [`docs/playwright.md`](./docs/playwright.md) for how to run the 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
 

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

@@ -14,9 +14,10 @@ entrypoint_log() {
 mkdir -p /tmp/element-web-config
 cp /app/config*.json /tmp/element-web-config/
 
-# If the module directory exists AND the module directory has modules in it
-if [ -d "/modules" ] && [ "$( ls -A '/modules' )" ]; then
+# 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

docs/SUMMARY.md

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

docs/config.md

@@ -130,37 +130,32 @@ complete re-branding/private labeling, a more personalised experience can be ach
 6. `mobile_builds`: Optional. Like `desktop_builds`, except for the mobile apps. Also described in more detail down below.
 7. `mobile_guide_toast`: When `true` (default), users accessing the Element Web instance from a mobile device will be prompted to
    download the app instead.
-8. `mobile_guide_app_variant`: Optional. The mobile app that the user is prompted to download from the `/mobile_guide` page. When omitted
-   the mobile guide will be configured for the new Element X apps. Allowed values are as follows:
-    1. `element`: Element X Android/iOS.
-    2. `element-classic`: Element Classic Android/iOS.
-    3. `element-pro`: Element Pro Android/iOS.
-9. `update_base_url`: For the desktop app only, the URL where to acquire update packages. If specified, must be a path to a directory
+8. `update_base_url`: For the desktop app only, the URL where to acquire update packages. If specified, must be a path to a directory
    containing `macos` and `win32` directories, with the update packages within. Defaults to `https://packages.element.io/desktop/update/`
    in production.
-10. `map_style_url`: Map tile server style URL for location sharing. e.g. `https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY_GOES_HERE`
-    This setting is ignored if your homeserver provides `/.well-known/matrix/client` in its well-known location, and the JSON file
-    at that location has a key `m.tile_server` (or the unstable version `org.matrix.msc3488.tile_server`). In this case, the
-    configuration found in the well-known location is used instead.
-11. `welcome_user_id`: **DEPRECATED** An optional user ID to start a DM with after creating an account. Defaults to nothing (no DM created).
-12. `custom_translations_url`: An optional URL to allow overriding of translatable strings. The JSON file must be in a format of
+9. `map_style_url`: Map tile server style URL for location sharing. e.g. `https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY_GOES_HERE`
+   This setting is ignored if your homeserver provides `/.well-known/matrix/client` in its well-known location, and the JSON file
+   at that location has a key `m.tile_server` (or the unstable version `org.matrix.msc3488.tile_server`). In this case, the
+   configuration found in the well-known location is used instead.
+10. `welcome_user_id`: **DEPRECATED** An optional user ID to start a DM with after creating an account. Defaults to nothing (no DM created).
+11. `custom_translations_url`: An optional URL to allow overriding of translatable strings. The JSON file must be in a format of
     `{"affected|translation|key": {"languageCode": "new string"}}`. See https://github.com/matrix-org/matrix-react-sdk/pull/7886 for details.
-13. `branding`: Options for configuring various assets used within the app. Described in more detail down below.
-14. `embedded_pages`: Further optional URLs for various assets used within the app. Described in more detail down below.
-15. `disable_3pid_login`: When `false` (default), **enables** the options to log in with email address or phone number. Set to
+12. `branding`: Options for configuring various assets used within the app. Described in more detail down below.
+13. `embedded_pages`: Further optional URLs for various assets used within the app. Described in more detail down below.
+14. `disable_3pid_login`: When `false` (default), **enables** the options to log in with email address or phone number. Set to
     `true` to hide these options.
-16. `disable_login_language_selector`: When `false` (default), **enables** the language selector on the login pages. Set to `true`
+15. `disable_login_language_selector`: When `false` (default), **enables** the language selector on the login pages. Set to `true`
     to hide this dropdown.
-17. `disable_guests`: When `false` (default), **enable** guest-related functionality (peeking/previewing rooms, etc) for unregistered
+16. `disable_guests`: When `false` (default), **enable** guest-related functionality (peeking/previewing rooms, etc) for unregistered
     users. Set to `true` to disable this functionality.
-18. `user_notice`: Optional notice to show to the user, e.g. for sunsetting a deployment and pushing users to move in their own time.
+17. `user_notice`: Optional notice to show to the user, e.g. for sunsetting a deployment and pushing users to move in their own time.
     Takes a configuration object as below:
     1. `title`: Required. Title to show at the top of the notice.
     2. `description`: Required. The description to use for the notice.
     3. `show_once`: Optional. If true then the notice will only be shown once per device.
-19. `help_url`: The URL to point users to for help with the app, defaults to `https://element.io/help`.
-20. `help_encryption_url`: The URL to point users to for help with encryption, defaults to `https://element.io/help#encryption`.
-21. `force_verification`: If true, users must verify new logins (eg. with another device / their recovery key)
+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 recovery key)
 
 ### `desktop_builds` and `mobile_builds`
 
@@ -389,6 +384,8 @@ The VoIP and Jitsi options are:
 5. `audio_stream_url`: Optional URL to pass to Jitsi to enable live streaming. This option is considered experimental and may be removed
    at any time without notice.
 6. `element_call`: Optional configuration for native group calls using Element Call, with the following subkeys:
+    - `url`: The URL of the Element Call instance to use for native group calls. This option is considered experimental
+      and may be removed at any time without notice. Defaults to `https://call.element.io`.
     - `use_exclusively`: A boolean specifying whether Element Call should be used exclusively as the only VoIP stack in
       the app, removing the ability to start legacy 1:1 calls or Jitsi calls. Defaults to `false`.
     - `participant_limit`: The maximum number of users who can join a call; if
@@ -450,7 +447,8 @@ If you would like to use Scalar, the integration manager maintained by Element,
         "https://scalar.vector.im/_matrix/integrations/v1",
         "https://scalar.vector.im/api",
         "https://scalar-staging.vector.im/_matrix/integrations/v1",
-        "https://scalar-staging.vector.im/api"
+        "https://scalar-staging.vector.im/api",
+        "https://scalar-staging.riot.im/scalar/api"
     ]
 }
 ```
@@ -585,8 +583,6 @@ Currently, the following UI feature flags are supported:
 - `UIFeature.BulkUnverifiedSessionsReminder` - Display popup reminders to verify or remove unverified sessions. Defaults
   to true.
 - `UIFeature.locationSharing` - Whether or not location sharing menus will be shown.
-- `UIFeature.allowCreatingPublicRooms` - Whether or not public rooms can be created.
-- `UIFeature.allowCreatingPublicSpaces` - Whether or not public spaces can be created.
 
 ## Undocumented / developer options
 

docs/e2ee.md

@@ -38,20 +38,45 @@ When `force_disable` is true:
 Note: If the server is configured to forcibly enable encryption for some or all rooms,
 this behaviour will be overridden.
 
-# Setting up recovery
+# Secure backup
 
 By default, Element strongly encourages (but does not require) users to set up
-recovery so that you can access history on your new devices as well as retain access to your message history and cryptographic identity when you lose all of your devices.
+Secure Backup so that cross-signing identity key and message keys can be
+recovered in case of a disaster where you lose access to all active devices.
 
-## Removal of old settings
+## Requiring secure backup
 
-Support for the configuration options `secure_backup_required` and `secure_backup_setup_methods`
-in the `/.well-known/matrix/client` config has been removed.
+To require Secure Backup to be configured before Element can be used, set the
+following on your homeserver's `/.well-known/matrix/client` config:
 
-Setting up recovery is now always recommended to all users by showing a one-off toast and a
-permanent red dot on the _Encryption_ tab in the _Settings_ dialog. When creating a new
-recovery key, the UI only supports auto-generated keys. Using an existing (custom) passphrase
-still works, but is not exposed in the UI when setting up recovery.
+```json
+{
+    "io.element.e2ee": {
+        "secure_backup_required": true
+    }
+}
+```
+
+## Preferring setup methods
+
+By default, Element offers users a choice of a random key or user-chosen
+passphrase when setting up Secure Backup. If a homeserver admin would like to
+only offer one of these, you can signal this via the
+`/.well-known/matrix/client` config, for example:
+
+```json
+{
+    "io.element.e2ee": {
+        "secure_backup_setup_methods": ["passphrase"]
+    }
+}
+```
+
+The field `secure_backup_setup_methods` is an array listing the methods the
+client should display. Supported values currently include `key` and
+`passphrase`. If the `secure_backup_setup_methods` field is not present or
+exists but does not contain any supported methods, Element will fallback to the
+default value of: `["key", "passphrase"]`.
 
 # Compatibility
 

docs/kubernetes.md

@@ -55,7 +55,8 @@ Then you can deploy it to your cluster with something like `kubectl apply -f my-
                     "https://scalar.vector.im/_matrix/integrations/v1",
                     "https://scalar.vector.im/api",
                     "https://scalar-staging.vector.im/_matrix/integrations/v1",
-                    "https://scalar-staging.vector.im/api"
+                    "https://scalar-staging.vector.im/api",
+                    "https://scalar-staging.riot.im/scalar/api"
             ],
             "bug_report_endpoint_url": "https://element.io/bugreports/submit",
             "defaultCountryCode": "GB",

docs/labs.md

@@ -101,6 +101,10 @@ 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.

element.io/app/config.json

@@ -15,7 +15,8 @@
         "https://scalar.vector.im/_matrix/integrations/v1",
         "https://scalar.vector.im/api",
         "https://scalar-staging.vector.im/_matrix/integrations/v1",
-        "https://scalar-staging.vector.im/api"
+        "https://scalar-staging.vector.im/api",
+        "https://scalar-staging.riot.im/scalar/api"
     ],
     "bug_report_endpoint_url": "https://element.io/bugreports/submit",
     "uisi_autorageshake_app": "element-auto-uisi",

element.io/develop/config.json

@@ -15,7 +15,8 @@
         "https://scalar.vector.im/_matrix/integrations/v1",
         "https://scalar.vector.im/api",
         "https://scalar-staging.vector.im/_matrix/integrations/v1",
-        "https://scalar-staging.vector.im/api"
+        "https://scalar-staging.vector.im/api",
+        "https://scalar-staging.riot.im/scalar/api"
     ],
     "bug_report_endpoint_url": "https://element.io/bugreports/submit",
     "uisi_autorageshake_app": "element-auto-uisi",

jest.config.ts

@@ -17,13 +17,11 @@ const config: Config = {
         // This is needed to be able to load dual CJS/ESM WASM packages e.g. rust crypto & matrix-wywiwyg
         customExportConditions: ["browser", "node"],
     },
-    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)", "<rootDir>/src/shared-components/**/*.test.[t]s?(x)"],
+    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)"],
     globalSetup: "<rootDir>/test/globalSetup.ts",
     setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
     setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
     moduleNameMapper: {
-        // Support CSS module
-        "\\.(module.css)$": "identity-obj-proxy",
         "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",
@@ -40,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

@@ -2,6 +2,7 @@ import { KnipConfig } from "knip";
 
 export default {
     entry: [
+        "src/vector/index.ts",
         "src/serviceworker/index.ts",
         "src/workers/*.worker.ts",
         "src/utils/exportUtils/exportJS.js",
@@ -11,6 +12,8 @@ export default {
         "res/decoder-ring/**",
         "res/jitsi_external_api.min.js",
         "docs/**",
+        // Used by jest
+        "__mocks__/maplibre-gl.js",
     ],
     project: ["**/*.{js,ts,jsx,tsx}"],
     ignore: [
@@ -37,20 +40,10 @@ export default {
         // Used by webpack
         "process",
         "util",
-        // Embedded into webapp
-        "@element-hq/element-call-embedded",
-
-        // Used by matrix-js-sdk, which means we have to include them as a
-        // dependency so that // we can run `tsc` (since we import the typescript
-        // source of js-sdk, rather than the transpiled and annotated JS like you
-        // would with a normal library).
-        "@types/content-type",
-        "@types/sdp-transform",
     ],
     ignoreBinaries: [
         // Used in scripts & workflows
         "jq",
-        "wait-on",
     ],
     ignoreExportsUsedInFile: true,
 } satisfies KnipConfig;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.12.0",
+    "version": "1.11.95",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -22,7 +22,8 @@
         "LICENSE",
         "README.md",
         "AUTHORS.rst",
-        "package.json"
+        "package.json",
+        "contribute.json"
     ],
     "style": "bundle.css",
     "matrix_i18n_extra_translation_funcs": [
@@ -64,29 +65,22 @@
         "test:playwright:screenshots": "playwright-screenshots --project=Chrome",
         "coverage": "yarn test --coverage",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
-        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
-        "postinstall": "patch-package",
-        "storybook": "storybook dev -p 6007",
-        "build-storybook": "storybook build",
-        "test:storybook": "test-storybook --url http://localhost:6007/",
-        "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
-        "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
+        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.1.1",
-        "@playwright/test": "1.54.2",
-        "@types/react": "19.1.12",
-        "@types/react-dom": "19.1.9",
-        "oidc-client-ts": "3.3.0",
+        "@playwright/test": "1.50.1",
+        "@types/react": "18.3.18",
+        "@types/react-dom": "18.3.5",
+        "oidc-client-ts": "3.1.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001724",
-        "testcontainers": "^11.0.0",
+        "caniuse-lite": "1.0.30001701",
+        "testcontainers": "10.20.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.4.1",
+        "@element-hq/element-web-module-api": "^0.1.1",
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
@@ -94,11 +88,12 @@
         "@matrix-org/emojibase-bindings": "^1.3.4",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
-        "@sentry/browser": "^10.0.0",
+        "@sentry/browser": "^9.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "^6.0.0",
-        "@vector-im/compound-web": "^8.1.2",
-        "@vector-im/matrix-wysiwyg": "2.39.0",
+        "@types/react-virtualized": "^9.21.30",
+        "@vector-im/compound-design-tokens": "^4.0.0",
+        "@vector-im/compound-web": "^7.7.2",
+        "@vector-im/matrix-wysiwyg": "2.38.2",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -112,29 +107,28 @@
         "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",
-        "filesize": "11.0.2",
+        "filesize": "10.1.6",
         "github-markdown-css": "^5.5.1",
         "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-react": "4.3.2",
-        "linkify-string": "4.3.2",
-        "linkifyjs": "4.3.2",
+        "linkify-element": "4.2.0",
+        "linkify-react": "4.2.0",
+        "linkify-string": "4.2.0",
+        "linkifyjs": "4.2.0",
         "lodash": "^4.17.21",
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "38.3.0",
+        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
         "matrix-widget-api": "^1.10.0",
         "memoize-one": "^6.0.0",
         "mime": "^4.0.4",
@@ -142,23 +136,22 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.261.0",
+        "posthog-js": "1.157.2",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
-        "react": "^19.0.0",
+        "react": "^18.3.1",
         "react-beautiful-dnd": "^13.1.0",
         "react-blurhash": "^0.3.0",
-        "react-dom": "^19.0.0",
+        "react-dom": "^18.3.1",
         "react-focus-lock": "^2.5.1",
-        "react-string-replace": "^1.1.1",
         "react-transition-group": "^4.4.1",
-        "react-virtuoso": "^4.14.0",
+        "react-virtualized": "^9.22.5",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.17.0",
+        "sanitize-html": "2.14.0",
         "tar-js": "^0.3.0",
-        "temporal-polyfill": "^0.3.0",
-        "ua-parser-js": "1.0.40",
+        "temporal-polyfill": "^0.2.5",
+        "ua-parser-js": "^1.0.2",
         "uuid": "^11.0.0",
         "what-input": "^5.2.10"
     },
@@ -184,27 +177,18 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.15.0",
-        "@element-hq/element-web-playwright-common": "^1.4.6",
+        "@element-hq/element-web-playwright-common": "^1.1.5",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
-        "@rrweb/types": "^2.0.0-alpha.18",
-        "@sentry/webpack-plugin": "^4.0.0",
-        "@storybook/addon-a11y": "^9.0.18",
-        "@storybook/addon-designs": "^10.0.1",
-        "@storybook/addon-docs": "^9.0.12",
-        "@storybook/icons": "^1.4.0",
-        "@storybook/react-vite": "^9.0.15",
-        "@storybook/test-runner": "^0.23.0",
-        "@stylistic/eslint-plugin": "^5.0.0",
+        "@sentry/webpack-plugin": "^3.0.0",
+        "@stylistic/eslint-plugin": "^3.0.0",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
-        "@types/content-type": "^1.1.9",
         "@types/counterpart": "^0.18.1",
         "@types/css-tree": "^2.3.8",
         "@types/diff-match-patch": "^1.0.32",
@@ -223,12 +207,11 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.12",
+        "@types/react": "18.3.18",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.9",
+        "@types/react-dom": "18.3.5",
         "@types/react-transition-group": "^4.4.0",
-        "@types/sanitize-html": "2.16.0",
-        "@types/sdp-transform": "^2.4.10",
+        "@types/sanitize-html": "2.13.0",
         "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
@@ -243,10 +226,10 @@
         "concurrently": "^9.0.0",
         "copy-webpack-plugin": "^13.0.0",
         "core-js": "^3.38.1",
-        "cronstrue": "^3.0.0",
+        "cronstrue": "^2.41.0",
         "css-loader": "^7.0.0",
         "css-minimizer-webpack-plugin": "^7.0.0",
-        "dotenv": "^17.0.0",
+        "dotenv": "^16.0.2",
         "eslint": "8.57.1",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^10.0.0",
@@ -258,60 +241,54 @@
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
         "eslint-plugin-react-hooks": "^5.0.0",
-        "eslint-plugin-storybook": "^9.0.12",
         "eslint-plugin-unicorn": "^56.0.0",
-        "express": "^5.0.0",
+        "express": "^4.18.2",
         "fake-indexeddb": "^6.0.0",
         "fetch-mock": "9.11.0",
         "fetch-mock-jest": "^1.5.1",
         "file-loader": "^6.0.0",
+        "glob": "^11.0.0",
         "html-webpack-plugin": "^5.5.3",
         "husky": "^9.0.0",
-        "identity-obj-proxy": "^3.0.0",
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
         "jest-environment-jsdom": "^29.7.0",
-        "jest-image-snapshot": "^6.5.1",
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",
         "knip": "^5.36.2",
-        "lint-staged": "^16.0.0",
+        "lint-staged": "^15.0.2",
         "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",
-        "patch-package": "^8.0.0",
         "playwright-core": "^1.51.0",
         "postcss": "8.4.46",
         "postcss-easings": "^4.0.0",
         "postcss-hexrgba": "2.1.0",
         "postcss-import": "16.1.0",
         "postcss-loader": "8.1.1",
-        "postcss-mixins": "^12.0.0",
+        "postcss-mixins": "^11.0.0",
         "postcss-nested": "^7.0.0",
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.6.2",
+        "prettier": "3.5.2",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
-        "storybook": "^9.0.12",
-        "stylelint": "^16.23.0",
-        "stylelint-config-standard": "^39.0.0",
+        "stylelint": "^16.13.0",
+        "stylelint-config-standard": "^37.0.0",
         "stylelint-scss": "^6.0.0",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
-        "testcontainers": "^11.0.0",
+        "testcontainers": "^10.20.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.8.3",
+        "typescript": "5.8.2",
         "util": "^0.12.5",
-        "vite": "^7.0.1",
-        "vite-plugin-node-polyfills": "^0.24.0",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.8.0",
@@ -328,6 +305,5 @@
     },
     "engines": {
         "node": ">=20.0.0"
-    },
-    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+    }
 }

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

@@ -1,52 +0,0 @@
-diff --git a/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts b/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
-index 917a7fc..a2710c6 100644
---- a/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
-+++ b/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
-@@ -37,7 +37,7 @@ export interface ModuleApi {
-      * @returns Whether the user submitted the dialog or closed it, and the model returned by the
-      * dialog component if submitted.
-      */
--    openDialog<M extends object, P extends DialogProps = DialogProps, C extends DialogContent<P> = DialogContent<P>>(initialTitleOrOptions: string | ModuleUiDialogOptions, body: (props: P, ref: React.RefObject<C>) => React.ReactNode, props?: Omit<P, keyof DialogProps>): Promise<{
-+    openDialog<M extends object, P extends DialogProps = DialogProps, C extends DialogContent<P> = DialogContent<P>>(initialTitleOrOptions: string | ModuleUiDialogOptions, body: (props: P, ref: React.RefObject<C | null>) => React.ReactNode, props?: Omit<P, keyof DialogProps>): Promise<{
-         didOkOrSubmit: boolean;
-         model: M;
-     }>;
-diff --git a/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js b/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js
-index 5d422ed..b823add 100644
---- a/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js
-+++ b/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js
-@@ -124,34 +124,28 @@ var DefaultCryptoSetupExtensions = /*#__PURE__*/function (_CryptoSetupExtension)
-   (0, _createClass2["default"])(DefaultCryptoSetupExtensions, [{
-     key: "examineLoginResponse",
-     value: function examineLoginResponse(response, credentials) {
--      console.log("Default empty examineLoginResponse() => void");
-     }
-   }, {
-     key: "persistCredentials",
-     value: function persistCredentials(credentials) {
--      console.log("Default empty persistCredentials() => void");
-     }
-   }, {
-     key: "getSecretStorageKey",
-     value: function getSecretStorageKey() {
--      console.log("Default empty getSecretStorageKey() => null");
-       return null;
-     }
-   }, {
-     key: "createSecretStorageKey",
-     value: function createSecretStorageKey() {
--      console.log("Default empty createSecretStorageKey() => null");
-       return null;
-     }
-   }, {
-     key: "catchAccessSecretStorageError",
-     value: function catchAccessSecretStorageError(e) {
--      console.log("Default catchAccessSecretStorageError() => void");
-     }
-   }, {
-     key: "setupEncryptionNeeded",
-     value: function setupEncryptionNeeded(args) {
--      console.log("Default setupEncryptionNeeded() => false");
-       return false;
-     }
-   }, {

patches/@types+mdx+2.0.13.patch

@@ -1,46 +0,0 @@
-diff --git a/node_modules/@types/mdx/types.d.ts b/node_modules/@types/mdx/types.d.ts
-index 498bb69..4e89216 100644
---- a/node_modules/@types/mdx/types.d.ts
-+++ b/node_modules/@types/mdx/types.d.ts
-@@ -5,7 +5,7 @@
-  */
- // @ts-ignore JSX runtimes may optionally define JSX.ElementType. The MDX types need to work regardless whether this is
- // defined or not.
--type ElementType = any extends JSX.ElementType ? never : JSX.ElementType;
-+type ElementType = any extends JSX.ElementType ? never : React.JSX.ElementType;
- 
- /**
-  * This matches any function component types that ar part of `ElementType`.
-@@ -20,12 +20,12 @@ type ClassElementType = Extract<ElementType, new(props: Record<string, any>) =>
- /**
-  * A valid JSX string component.
-  */
--type StringComponent = Extract<keyof JSX.IntrinsicElements, ElementType extends never ? string : ElementType>;
-+type StringComponent = Extract<keyof React.JSX.IntrinsicElements, ElementType extends never ? string : ElementType>;
- 
- /**
-  * A JSX element returned by MDX content.
-  */
--export type Element = JSX.Element;
-+export type Element = React.JSX.Element;
- 
- /**
-  * A valid JSX function component.
-@@ -44,7 +44,7 @@ type FunctionComponent<Props> = ElementType extends never
-  */
- type ClassComponent<Props> = ElementType extends never
-     // If JSX.ElementType isn’t defined, the valid return type is a constructor that returns JSX.ElementClass
--    ? new(props: Props) => JSX.ElementClass
-+    ? new(props: Props) => React.JSX.ElementClass
-     : ClassElementType extends never
-     // If JSX.ElementType is defined, but doesn’t allow constructors, function components are disallowed.
-         ? never
-@@ -70,7 +70,7 @@ interface NestedMDXComponents {
- export type MDXComponents =
-     & NestedMDXComponents
-     & {
--        [Key in StringComponent]?: Component<JSX.IntrinsicElements[Key]>;
-+        [Key in StringComponent]?: Component<React.JSX.IntrinsicElements[Key]>;
-     }
-     & {
-         /**

patches/react-blurhash+0.3.0.patch

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

playwright/e2e/accessibility/keyboard-navigation.spec.ts

@@ -29,7 +29,7 @@ test.describe("Landmark navigation tests", () => {
 
         // Pressing Control+F6 again will focus room search
         await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
 
         // Pressing Control+F6 again will focus the message composer
         await page.keyboard.press("ControlOrMeta+F6");
@@ -44,7 +44,7 @@ test.describe("Landmark navigation tests", () => {
         await expect(page.locator(".mx_HomePage")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
         await expect(page.locator(".mx_SpaceButton_active")).toBeFocused();
@@ -75,11 +75,11 @@ test.describe("Landmark navigation tests", () => {
 
         // Pressing Control+F6 again will focus room search
         await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
 
         // Pressing Control+F6 again will focus the room tile in the room list
         await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomListItemView_selected")).toBeFocused();
+        await expect(page.locator(".mx_RoomTile_selected")).toBeFocused();
 
         // Pressing Control+F6 again will focus the message composer
         await page.keyboard.press("ControlOrMeta+F6");
@@ -94,10 +94,10 @@ test.describe("Landmark navigation tests", () => {
         await expect(page.locator(".mx_BasicMessageComposer_input")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomListItemView_selected")).toBeFocused();
+        await expect(page.locator(".mx_RoomTile_selected")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
         await expect(page.locator(".mx_SpaceButton_active")).toBeFocused();
@@ -131,11 +131,11 @@ test.describe("Landmark navigation tests", () => {
 
         // Pressing Control+F6 again will focus room search
         await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
 
         // Pressing Control+F6 again will focus the room tile in the room list
         await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomListItemView")).toBeFocused();
+        await expect(page.locator(".mx_RoomTile")).toBeFocused();
 
         // Pressing Control+F6 again will focus the home section
         await page.keyboard.press("ControlOrMeta+F6");
@@ -150,10 +150,10 @@ test.describe("Landmark navigation tests", () => {
         await expect(page.locator(".mx_HomePage")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomListItemView")).toBeFocused();
+        await expect(page.locator(".mx_RoomTile")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
         await expect(page.locator(".mx_SpaceButton_active")).toBeFocused();

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

@@ -19,7 +19,6 @@ const clickButtonReply = async (tile: Locator) => {
         await tile.hover();
         await tile.getByRole("button", { name: "Reply", exact: true }).click();
     }).toPass();
-    await expect(tile.page().getByText("Replying", { exact: true })).toBeVisible();
 };
 
 test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
@@ -40,7 +39,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         // wait for the tile to finish loading
         await expect(
             page
-                .getByTestId("audio-player-name")
+                .locator(".mx_AudioPlayer_mediaName")
                 .last()
                 .filter({ hasText: file.split("/").at(-1) }),
         ).toBeVisible();
@@ -55,10 +54,12 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         // Check that the audio player is rendered and its button becomes visible
         const checkPlayerVisibility = async (locator: Locator) => {
             // Assert that the audio player and media information are visible
-            const mediaInfo = locator.getByRole("region", { name: "Audio player" });
-            await expect(mediaInfo.getByText(".ogg")).toBeVisible(); // extension
-            await expect(mediaInfo.getByRole("time")).toHaveText("00:01"); // duration
-            await expect(mediaInfo.getByText("(3.56 KB)")).toBeVisible(); // actual size;
+            const mediaInfo = locator.locator(
+                ".mx_EventTile_mediaLine .mx_MAudioBody .mx_AudioPlayer_container .mx_AudioPlayer_mediaInfo",
+            );
+            await expect(mediaInfo.locator(".mx_AudioPlayer_mediaName", { hasText: ".ogg" })).toBeVisible(); // extension
+            await expect(mediaInfo.locator(".mx_AudioPlayer_byline", { hasText: "00:01" })).toBeVisible();
+            await expect(mediaInfo.locator(".mx_AudioPlayer_byline", { hasText: "(3.56 KB)" })).toBeVisible(); // actual size
 
             // Assert that the play button can be found and is visible
             await expect(locator.getByRole("button", { name: "Play" })).toBeVisible();
@@ -77,7 +78,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         }
 
         // Check the status of the seek bar
-        expect(await page.getByRole("region", { name: "Audio player" }).getByRole("slider").count()).toBeGreaterThan(0);
+        expect(await page.locator(".mx_AudioPlayer_seek input[type='range']").count()).toBeGreaterThan(0);
 
         // Enable IRC layout
         await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
@@ -99,7 +100,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
                     display: none !important;
                 }
             `,
-            mask: [page.getByTestId("audio-player-seek")],
+            mask: [page.locator(".mx_AudioPlayer_seek")],
         };
 
         // Take a snapshot of mx_EventTile_last on IRC layout
@@ -185,9 +186,9 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await uploadFile(page, "playwright/sample-files/1sec.ogg");
 
         // Assert that the audio player is rendered
-        const container = page.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" });
+        const container = page.locator(".mx_EventTile_last .mx_AudioPlayer_container");
         // Assert that the counter is zero before clicking the play button
-        await expect(container.getByRole("timer")).toHaveText("00:00");
+        await expect(container.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
 
         // Find and click "Play" button, the wait is to make the test less flaky
         await expect(container.getByRole("button", { name: "Play" })).toBeVisible();
@@ -197,7 +198,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await expect(container.getByRole("button", { name: "Pause" })).toBeVisible();
 
         // Assert that the timer is reset when the audio file finished playing
-        await expect(container.getByRole("timer")).toHaveText("00:00");
+        await expect(container.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
 
         // Assert that "Play" button can be found
         await expect(container.getByRole("button", { name: "Play" })).toBeVisible();
@@ -225,7 +226,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await uploadFile(page, "playwright/sample-files/1sec.ogg");
 
             // Assert the audio player is rendered
-            await expect(page.getByRole("region", { name: "Audio player" })).toBeVisible();
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
 
             // Find and click "Reply" button on MessageActionBar
             const tile = page.locator(".mx_EventTile_last");
@@ -235,7 +236,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await uploadFile(page, "playwright/sample-files/1sec.ogg");
 
             // Assert that the audio player is rendered
-            await expect(tile.getByRole("region", { name: "Audio player" })).toBeVisible();
+            await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
 
             // Assert that replied audio file is rendered as file button inside ReplyChain
             const button = tile.locator(".mx_ReplyChain_wrapper .mx_MFileBody_info[role='button']");
@@ -260,9 +261,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await uploadFile(page, "playwright/sample-files/upload-first.ogg");
 
             // Assert that the audio player is rendered
-            await expect(
-                page.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" }),
-            ).toBeVisible();
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
 
             await clickButtonReply(tile);
 
@@ -270,9 +269,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await uploadFile(page, "playwright/sample-files/upload-second.ogg");
 
             // Assert that the audio player is rendered
-            await expect(
-                page.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" }),
-            ).toBeVisible();
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
 
             await clickButtonReply(tile);
 
@@ -280,7 +277,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await uploadFile(page, "playwright/sample-files/upload-third.ogg");
 
             // Assert that the audio player is rendered
-            await expect(tile.getByRole("region", { name: "Audio player" })).toBeVisible();
+            await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
 
             // Assert that there are two "mx_ReplyChain" elements
             await expect(tile.locator(".mx_ReplyChain")).toHaveCount(2);
@@ -316,9 +313,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         // On the main timeline
         const messageList = page.locator(".mx_RoomView_MessageList");
         // Assert the audio player is rendered
-        await expect(
-            messageList.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" }),
-        ).toBeVisible();
+        await expect(messageList.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
         // Find and click "Reply in thread" button
         await messageList.locator(".mx_EventTile_last").hover();
         await messageList.locator(".mx_EventTile_last").getByRole("button", { name: "Reply in thread" }).click();
@@ -326,10 +321,10 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         // On a thread
         const thread = page.locator(".mx_ThreadView");
         const threadTile = thread.locator(".mx_EventTile_last");
-        const audioPlayer = threadTile.getByRole("region", { name: "Audio player" });
+        const audioPlayer = threadTile.locator(".mx_AudioPlayer_container");
 
         // Assert that the counter is zero before clicking the play button
-        await expect(audioPlayer.getByRole("timer")).toHaveText("00:00");
+        await expect(audioPlayer.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
 
         // Find and click "Play" button, the wait is to make the test less flaky
         await expect(audioPlayer.getByRole("button", { name: "Play" })).toBeVisible();
@@ -339,7 +334,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await expect(audioPlayer.getByRole("button", { name: "Pause" })).toBeVisible();
 
         // Assert that the timer is reset when the audio file finished playing
-        await expect(audioPlayer.getByRole("timer")).toHaveText("00:00");
+        await expect(audioPlayer.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
 
         // Assert that "Play" button can be found
         await expect(audioPlayer.getByRole("button", { name: "Play" })).not.toBeDisabled();

playwright/e2e/composer/CIDER.spec.ts

@@ -14,9 +14,6 @@ const CtrlOrMeta = process.platform === "darwin" ? "Meta" : "Control";
 test.describe("Composer", () => {
     test.use({
         displayName: "Janet",
-        botCreateOpts: {
-            displayName: "Bob",
-        },
     });
 
     test.use({
@@ -31,7 +28,7 @@ test.describe("Composer", () => {
 
     test.describe("CIDER", () => {
         test("sends a message when you click send or press Enter", async ({ page }) => {
-            const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+            const composer = page.getByRole("textbox", { name: "Send a message…" });
 
             // Type a message
             await composer.pressSequentially("my message 0");
@@ -55,7 +52,7 @@ test.describe("Composer", () => {
         });
 
         test("can write formatted text", async ({ page }) => {
-            const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+            const composer = page.getByRole("textbox", { name: "Send a message…" });
 
             await composer.pressSequentially("my bold");
             await composer.press(`${CtrlOrMeta}+KeyB`);
@@ -71,7 +68,7 @@ test.describe("Composer", () => {
             await page.getByTestId("mx_EmojiPicker").locator(".mx_EmojiPicker_item", { hasText: "😇" }).click();
 
             await page.locator(".mx_ContextualMenu_background").click(); // Close emoji picker
-            await page.getByRole("textbox", { name: "Send an unencrypted message…" }).press("Enter"); // Send message
+            await page.getByRole("textbox", { name: "Send a message…" }).press("Enter"); // Send message
 
             await expect(page.locator(".mx_EventTile_body", { hasText: "😇" })).toBeVisible();
         });
@@ -82,7 +79,7 @@ test.describe("Composer", () => {
             });
 
             test("only sends when you press Control+Enter", async ({ page }) => {
-                const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+                const composer = page.getByRole("textbox", { name: "Send a message…" });
                 // Type a message and press Enter
                 await composer.pressSequentially("my message 3");
                 await composer.press("Enter");
@@ -97,25 +94,5 @@ test.describe("Composer", () => {
                 ).toBeVisible();
             });
         });
-
-        test("can send mention", { tag: "@screenshot" }, async ({ page, bot, app }) => {
-            // Set up a private room so we have another user to mention
-            await app.client.createRoom({
-                is_direct: true,
-                invite: [bot.credentials.userId],
-            });
-            await app.viewRoomByName("Bob");
-
-            const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
-            await composer.pressSequentially("@bob");
-
-            // Note that we include the user ID here as the room tile is also an 'option' role
-            // with text 'Bob'
-            await page.getByRole("option", { name: `Bob ${bot.credentials.userId}` }).click();
-            await expect(composer.getByText("Bob")).toBeVisible();
-            await expect(composer).toMatchScreenshot("mention.png");
-            await composer.press("Enter");
-            await expect(page.locator(".mx_EventTile_body", { hasText: "Bob" })).toBeVisible();
-        });
     });
 });

playwright/e2e/create-room/create-room.spec.ts

@@ -0,0 +1,34 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Create Room", () => {
+    test.use({ displayName: "Jim" });
+
+    test("should allow us to create a public room with name, topic & address set", async ({ page, user, app }) => {
+        const name = "Test room 1";
+        const topic = "This room is dedicated to this test and this test only!";
+
+        const dialog = await app.openCreateRoomDialog();
+        // Fill name & topic
+        await dialog.getByRole("textbox", { name: "Name" }).fill(name);
+        await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
+        // Change room to public
+        await dialog.getByRole("button", { name: "Room visibility" }).click();
+        await dialog.getByRole("option", { name: "Public room" }).click();
+        // Fill room address
+        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1");
+        // Submit
+        await dialog.getByRole("button", { name: "Create room" }).click();
+
+        await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`));
+        const header = page.locator(".mx_RoomHeader");
+        await expect(header).toContainText(name);
+    });
+});

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

@@ -23,13 +23,7 @@ test.describe("Encryption state after registration", () => {
     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,
-            mailpitClient,
-            `alice_${testInfo.testId}`,
-            `alice_${testInfo.testId}@email.com`,
-            "Pa$sW0rD!",
-        );
+        await registerAccountMas(page, mailpitClient, `alice_${testInfo.testId}`, "alice@email.com", "Pa$sW0rD!");
 
         // Wait for the ui to load
         await expect(page.locator(".mx_MatrixChat")).toBeVisible();
@@ -41,15 +35,9 @@ test.describe("Encryption state after registration", () => {
     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,
-            mailpitClient,
-            `alice_${testInfo.testId}`,
-            `alice_${testInfo.testId}@email.com`,
-            "Pa$sW0rD!",
-        );
+        await registerAccountMas(page, mailpitClient, `alice_${testInfo.testId}`, "alice@email.com", "Pa$sW0rD!");
 
-        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+        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();
@@ -76,9 +64,9 @@ test.describe("Key backup reset from elsewhere", () => {
 
         await page.goto("/#/login");
         await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailpitClient, testUsername, `${testUsername}@email.com`, testPassword);
+        await registerAccountMas(page, mailpitClient, testUsername, "alice@email.com", testPassword);
 
-        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+        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();
@@ -91,10 +79,10 @@ test.describe("Key backup reset from elsewhere", () => {
 
         await csAPI.deleteBackupVersion(backupInfo.version);
 
-        await page.getByRole("textbox", { name: "Send a message…" }).fill("/discardsession");
+        await page.getByRole("textbox", { name: "Send an encrypted message…" }).fill("/discardsession");
         await page.getByRole("button", { name: "Send message" }).click();
 
-        await page.getByRole("textbox", { name: "Send a message…" }).fill("Message with broken key backup");
+        await page.getByRole("textbox", { name: "Send an encrypted message…" }).fill("Message with broken key backup");
         await page.getByRole("button", { name: "Send message" }).click();
 
         // Should be the message we sent plus the room creation event

playwright/e2e/crypto/backups.spec.ts

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

playwright/e2e/crypto/crypto.spec.ts

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

playwright/e2e/crypto/decryption-failure-messages.spec.ts

@@ -143,7 +143,10 @@ test.describe("Cryptography", function () {
                 );
 
                 // Alice accepts the invite
-                await page.getByRole("option", { name: "Test room" }).click();
+                await expect(
+                    page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
+                ).toHaveCount(1);
+                await page.getByRole("treeitem", { name: "Test room" }).click();
                 await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
 
                 // Bob sends an encrypted event and an undecryptable event
@@ -277,7 +280,10 @@ test.describe("Cryptography", function () {
                 );
 
                 // Alice accepts the invite
-                await page.getByRole("option", { name: "Test room" }).click();
+                await expect(
+                    page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
+                ).toHaveCount(1);
+                await page.getByRole("treeitem", { name: "Test room" }).click();
                 await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
 
                 // wait until we're joined and see the timeline

playwright/e2e/crypto/dehydration.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 { isDendrite } from "../../plugins/homeserver/dendrite";
-import { createBot, logIntoElement } from "./utils.ts";
+import { completeCreateSecretStorageDialog, createBot, logIntoElement } from "./utils.ts";
 import { type Client } from "../../pages/client.ts";
 import { type ElementAppPage } from "../../pages/ElementAppPage.ts";
 
@@ -27,28 +27,16 @@ test.use({
 test.describe("Dehydration", () => {
     test.skip(isDendrite, "does not yet support dehydration v2");
 
-    test("Verify device and reset creates dehydrated device", async ({ page, user, credentials, app }, workerInfo) => {
-        // Verify the device by resetting the identity key, and then set up recovery (which will create SSSS, and dehydrated device)
+    test("'Set up secure backup' creates dehydrated device", async ({ page, user, app }, workerInfo) => {
+        // Create a backup (which will create SSSS, and dehydrated device)
 
         const securityTab = await app.settings.openUserSettings("Security & Privacy");
+
+        await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
         await expect(securityTab.getByText("Offline device enabled")).not.toBeVisible();
+        await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
 
-        await app.closeDialog();
-
-        // 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: "Can't confirm?" }).click();
-        await page.getByRole("button", { name: "Continue" }).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();
+        await completeCreateSecretStorageDialog(page);
 
         await expectDehydratedDeviceEnabled(app);
 
@@ -86,7 +74,7 @@ test.describe("Dehydration", () => {
         await expectDehydratedDeviceEnabled(app);
     });
 
-    test("Reset identity during login and set up recovery re-creates dehydrated device", async ({
+    test("Reset recovery key during login re-creates dehydrated device", async ({
         page,
         homeserver,
         app,
@@ -105,26 +93,16 @@ test.describe("Dehydration", () => {
         // 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: "Can't confirm" }).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();
+        // Oh no, we forgot our recovery key
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Reset all" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Proceed with reset" }).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();
+        await completeCreateSecretStorageDialog(page, { accountPassword: credentials.password });
 
         // There should be a brand new dehydrated device
-        await expectDehydratedDeviceEnabled(app);
+        const dehydratedDeviceIds = await getDehydratedDeviceIds(app.client);
+        expect(dehydratedDeviceIds.length).toBe(1);
+        expect(dehydratedDeviceIds[0]).not.toEqual(initialDehydratedDeviceIds[0]);
     });
 
     test("'Reset cryptographic identity' removes dehydrated device", async ({ page, homeserver, app, credentials }) => {

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

@@ -22,7 +22,6 @@ import {
 } from "./utils";
 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;
@@ -36,50 +35,43 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         expectedBackupVersion = res.expectedBackupVersion;
     });
 
-    // Click the "Use another device" button, and have the bot client auto-accept it.
+    // Click the "Verify with another device" button, and have the bot client auto-accept it.
     async function initiateAliceVerificationRequest(page: Page): Promise<JSHandle<VerificationRequest>> {
         // alice bot waits for verification request
         const promiseVerificationRequest = waitForVerificationRequest(aliceBotClient);
 
-        // Click on "Use another device"
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Use another device" }).click();
+        // Click on "Verify with another device"
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with another device" }).click();
 
         // alice bot responds yes to verification request from alice
         return promiseVerificationRequest;
     }
 
-    test(
-        "Verify device with SAS during login",
-        { tag: "@screenshot" },
-        async ({ page, app, credentials, homeserver }) => {
-            await logIntoElement(page, credentials);
+    test("Verify device with SAS during login", async ({ page, app, credentials, homeserver }) => {
+        await logIntoElement(page, credentials);
 
-            // Launch the verification request between alice and the bot
-            const verificationRequest = await initiateAliceVerificationRequest(page);
+        // 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 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);
+        // Handle emoji request and check that emojis are matching
+        await doTwoWaySasVerification(page, verifier);
 
-            await infoDialog.getByRole("button", { name: "They match" }).click();
-            await expect(page.locator(".mx_E2EIcon_verified")).toMatchScreenshot("device-verified-e2eIcon.png");
-            await infoDialog.getByRole("button", { name: "Got it" }).click();
+        await infoDialog.getByRole("button", { name: "They match" }).click();
+        await infoDialog.getByRole("button", { name: "Got it" }).click();
 
-            // Check that our device is now cross-signed
-            await checkDeviceIsCrossSigned(app);
+        // Check that our device is now cross-signed
+        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.
-            await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false);
-        },
-    );
+        // 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.
+        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 }) => {
@@ -124,10 +116,6 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         const toasts = new Toasts(page);
         await toasts.rejectToast("Notifications");
         await toasts.assertNoToasts();
-
-        // There may still be a `/sendToDevice/m.secret.request` in flight, which will later throw an error and cause
-        // a *subsequent* test to fail. Tell playwright to ignore any errors resulting from in-flight routes.
-        await page.unrouteAll({ behavior: "ignoreErrors" });
     });
 
     test("Verify device with QR code during login", async ({ page, app, credentials, homeserver }) => {
@@ -175,44 +163,16 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
 
     test("Verify device with Security Phrase during login", async ({ page, app, credentials, homeserver }) => {
         await logIntoElement(page, credentials);
-        await enterRecoveryKeyAndCheckVerified(page, app, "new passphrase");
-    });
 
-    test("Verify device with Recovery Key during login", async ({ page, app, credentials, homeserver }) => {
-        const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey;
+        // Select the security phrase
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();
 
-        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);
-
-        /* 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");
-
-        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: "Use recovery key" }).click();
-
-        // Enter the recovery key
+        // Fill the passphrase
         const dialog = page.locator(".mx_Dialog");
-        // 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.getByTitle("Recovery key").pressSequentially(recoveryKey);
-        await dialog.getByRole("button", { name: "Continue", disabled: false }).click();
+        await dialog.locator("input").fill("new passphrase");
+        await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
 
-        await page.getByRole("button", { name: "Done" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Done" }).click();
 
         // Check that our device is now cross-signed
         await checkDeviceIsCrossSigned(app);
@@ -220,7 +180,30 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         // 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(app, expectedBackupVersion, true);
-    }
+    });
+
+    test("Verify device with Recovery Key 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 Recovery Key or Phrase" }).click();
+
+        // Fill the recovery key
+        const dialog = page.locator(".mx_Dialog");
+        await dialog.getByRole("button", { name: "use your Recovery 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();
+
+        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(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

@@ -14,7 +14,7 @@ import {
     createSecondBotDevice,
     createSharedRoomWithUser,
     enableKeyBackup,
-    logIntoElementAndVerify,
+    logIntoElement,
     logOutOfElement,
     verify,
     waitForDevices,
@@ -58,108 +58,107 @@ test.describe("Cryptography", function () {
             await app.client.network.setupRoute();
         });
 
-        test(
-            "should show the correct shield on e2e events",
-            { tag: "@screenshot" },
-            async ({ page, app, bot: bob, homeserver }, workerInfo) => {
-                // Bob has a second, not cross-signed, device
-                const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
+        test("should show the correct shield on e2e events", async ({
+            page,
+            app,
+            bot: bob,
+            homeserver,
+        }, workerInfo) => {
+            // Bob has a second, not cross-signed, device
+            const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
 
-                // 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();
+            // 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();
 
-                await bob.sendEvent(testRoomId, null, "m.room.encrypted", {
-                    algorithm: "m.megolm.v1.aes-sha2",
-                    ciphertext: "the bird is in the hand",
-                });
+            await bob.sendEvent(testRoomId, null, "m.room.encrypted", {
+                algorithm: "m.megolm.v1.aes-sha2",
+                ciphertext: "the bird is in the hand",
+            });
 
-                const last = page.locator(".mx_EventTile_last");
-                await expect(last).toContainText("Unable to decrypt message");
-                const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
-                await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/);
-                await lastE2eIcon.focus();
-                await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
-                    "This message could not be decrypted",
-                );
+            const last = page.locator(".mx_EventTile_last");
+            await expect(last).toContainText("Unable to decrypt message");
+            const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
+            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/);
+            await lastE2eIcon.focus();
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                "This message could not be decrypted",
+            );
 
-                /* Should show a red padlock for an unencrypted message in an e2e room */
-                await bob.evaluate(
-                    (cli, testRoomId) =>
-                        cli.http.authedRequest(
-                            window.matrixcs.Method.Put,
-                            `/rooms/${encodeURIComponent(testRoomId)}/send/m.room.message/test_txn_1`,
-                            undefined,
-                            {
-                                msgtype: "m.text",
-                                body: "test unencrypted",
-                            },
-                        ),
-                    testRoomId,
-                );
+            /* Should show a red padlock for an unencrypted message in an e2e room */
+            await bob.evaluate(
+                (cli, testRoomId) =>
+                    cli.http.authedRequest(
+                        window.matrixcs.Method.Put,
+                        `/rooms/${encodeURIComponent(testRoomId)}/send/m.room.message/test_txn_1`,
+                        undefined,
+                        {
+                            msgtype: "m.text",
+                            body: "test unencrypted",
+                        },
+                    ),
+                testRoomId,
+            );
 
-                await expect(last).toContainText("test unencrypted");
-                await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
-                await expect(lastE2eIcon).toMatchScreenshot("event-shield-warning.png");
-                await lastE2eIcon.focus();
-                await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted");
+            await expect(last).toContainText("test unencrypted");
+            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+            await lastE2eIcon.focus();
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted");
 
-                /* Should show no padlock for an unverified user */
-                // bob sends a valid event
-                await bob.sendMessage(testRoomId, "test encrypted 1");
+            /* Should show no padlock for an unverified user */
+            // bob sends a valid event
+            await bob.sendMessage(testRoomId, "test encrypted 1");
 
-                // the message should appear, decrypted, with no warning, but also no "verified"
-                const lastTile = page.locator(".mx_EventTile_last");
-                const lastTileE2eIcon = lastTile.locator(".mx_EventTile_e2eIcon");
-                await expect(lastTile).toContainText("test encrypted 1");
-                // no e2e icon
-                await expect(lastTileE2eIcon).not.toBeVisible();
+            // the message should appear, decrypted, with no warning, but also no "verified"
+            const lastTile = page.locator(".mx_EventTile_last");
+            const lastTileE2eIcon = lastTile.locator(".mx_EventTile_e2eIcon");
+            await expect(lastTile).toContainText("test encrypted 1");
+            // no e2e icon
+            await expect(lastTileE2eIcon).not.toBeVisible();
 
-                /* Now verify Bob */
-                await verify(app, bob);
+            /* Now verify Bob */
+            await verify(app, bob);
 
-                /* Existing message should be updated when user is verified. */
-                await expect(last).toContainText("test encrypted 1");
-                // still no e2e icon
-                await expect(last.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
+            /* Existing message should be updated when user is verified. */
+            await expect(last).toContainText("test encrypted 1");
+            // still no e2e icon
+            await expect(last.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
 
-                /* should show no padlock, and be verified, for a message from a verified device */
-                await bob.sendMessage(testRoomId, "test encrypted 2");
+            /* should show no padlock, and be verified, for a message from a verified device */
+            await bob.sendMessage(testRoomId, "test encrypted 2");
 
-                await expect(lastTile).toContainText("test encrypted 2");
-                // no e2e icon
-                await expect(lastTileE2eIcon).not.toBeVisible();
+            await expect(lastTile).toContainText("test encrypted 2");
+            // no e2e icon
+            await expect(lastTileE2eIcon).not.toBeVisible();
 
-                /* should show red padlock for a message from an unverified device */
-                await bobSecondDevice.sendMessage(testRoomId, "test encrypted from unverified");
-                await expect(lastTile).toContainText("test encrypted from unverified");
-                await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
-                await lastTileE2eIcon.focus();
-                await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
-                    "Encrypted by a device not verified by its owner.",
-                );
+            /* should show red padlock for a message from an unverified device */
+            await bobSecondDevice.sendMessage(testRoomId, "test encrypted from unverified");
+            await expect(lastTile).toContainText("test encrypted from unverified");
+            await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+            await lastTileE2eIcon.focus();
+            await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
+                "Encrypted by a device not verified by its owner.",
+            );
 
-                /* Should show a red padlock for a message from an unverified device.
-                 * Rust crypto remembers the verification state of the sending device, so it will know that the device was
-                 * unverified, even if it gets deleted. */
-                // bob deletes his second device
-                await bobSecondDevice.evaluate((cli) => cli.logout(true));
+            /* Should show a red padlock for a message from an unverified device.
+             * Rust crypto remembers the verification state of the sending device, so it will know that the device was
+             * unverified, even if it gets deleted. */
+            // bob deletes his second device
+            await bobSecondDevice.evaluate((cli) => cli.logout(true));
 
-                // wait for the logout to propagate.
-                await waitForDevices(app, bob.credentials.userId, 1);
+            // 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");
-                await app.viewRoomByName("TestRoom");
+            // close and reopen the room, to get the shield to update.
+            await app.viewRoomByName("Bob");
+            await app.viewRoomByName("TestRoom");
 
-                await expect(last).toContainText("test encrypted from unverified");
-                await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
-                await lastE2eIcon.focus();
-                await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
-                    "Encrypted by a device not verified by its owner.",
-                );
-            },
-        );
+            await expect(last).toContainText("test encrypted from unverified");
+            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+            await lastE2eIcon.focus();
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                "Encrypted by a device not verified by its owner.",
+            );
+        });
 
         test("Should show a grey padlock for a key restored from backup", async ({
             page,
@@ -195,7 +194,7 @@ test.describe("Cryptography", function () {
                 window.localStorage.clear();
             });
             await page.reload();
-            await logIntoElementAndVerify(page, aliceCredentials, securityKey);
+            await logIntoElement(page, aliceCredentials, securityKey);
 
             /* go back to the test room and find Bob's message again */
             await app.viewRoomById(testRoomId);
@@ -325,7 +324,7 @@ test.describe("Cryptography", function () {
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastE2eIcon.focus();
             await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
-                "Sender's verified identity was reset",
+                "Sender's verified identity has changed",
             );
         });
     });

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

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

playwright/e2e/crypto/toasts.spec.ts

@@ -8,8 +8,7 @@
 import { type GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
 
 import { test, expect } from "../../element-web-test";
-import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElementAndVerify } from "./utils";
-import { type Bot } from "../../pages/bot";
+import { createBot, deleteCachedSecrets, logIntoElement } from "./utils";
 
 test.describe("Key storage out of sync toast", () => {
     let recoveryKey: GeneratedSecretStorageKey;
@@ -18,21 +17,19 @@ test.describe("Key storage out of sync toast", () => {
         const res = await createBot(page, homeserver, credentials);
         recoveryKey = res.recoveryKey;
 
-        await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);
+        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("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+        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.
+        // Need to wait for 2 to appear since playwright only evaluates 'first()' initially, so the waiting won't work
         await expect(page.getByRole("alert")).toHaveCount(2);
         await expect(page.getByRole("alert").first()).toMatchScreenshot("key-storage-out-of-sync-toast.png");
 
@@ -54,114 +51,3 @@ test.describe("Key storage out of sync toast", () => {
         ).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 logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);
-
-        // We won't be prompted for crypto setup unless we have an e2e room, so make one
-        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).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("switch", { 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("switch", { 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/utils.ts

@@ -206,42 +206,29 @@ export async function checkDeviceIsConnectedKeyBackup(
 
 /**
  * Fill in the login form in element with the given creds.
+ *
+ * If a `securityKey` is given, verifies the new device using the key.
  */
-export async function logIntoElement(page: Page, credentials: Credentials) {
+export async function logIntoElement(page: Page, credentials: Credentials, securityKey?: string) {
     await page.goto("/#/login");
 
     await page.getByRole("textbox", { name: "Username" }).fill(credentials.userId);
     await page.getByPlaceholder("Password").fill(credentials.password);
     await page.getByRole("button", { name: "Sign in" }).click();
-}
 
-/**
- * Fill in the login form in Element with the given creds, and then complete the `CompleteSecurity` step, using the
- * given recovery key. (Normally this will verify the new device using the secrets from 4S.)
- *
- * Afterwards, waits for the application to redirect to the home page.
- */
-export async function logIntoElementAndVerify(page: Page, credentials: Credentials, recoveryKey: string) {
-    await logIntoElement(page, credentials);
+    // if a securityKey was given, verify the new device
+    if (securityKey !== undefined) {
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key" }).click();
 
-    await page.locator(".mx_AuthPage").getByRole("button", { name: "Use recovery key" }).click();
-
-    const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "Use 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();
+        const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "use your Recovery Key" });
+        if (await useSecurityKey.isVisible()) {
+            await useSecurityKey.click();
+        }
+        // Fill in the recovery 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.getByRole("button", { name: "Done" }).click();
     }
-
-    // Fill in the recovery key
-    await page.locator(".mx_Dialog").getByTitle("Recovery key").fill(recoveryKey);
-    await page.getByRole("button", { name: "Continue", disabled: false }).click();
-    await page.getByRole("button", { name: "Done" }).click();
-
-    // The application should now redirect to `/#/home`. Wait for that to happen, otherwise if a test immediately does
-    // a `viewRoomById` or similar, it could race.
-    await page.waitForURL("/#/home");
 }
 
 /**
@@ -272,8 +259,8 @@ export async function logOutOfElement(page: Page, discardKeys: boolean = false)
 export async function verifySession(app: ElementAppPage, securityKey: string) {
     const settings = await app.settings.openUserSettings("Encryption");
     await settings.getByRole("button", { name: "Verify this device" }).click();
-    await app.page.getByRole("button", { name: "Use recovery key" }).click();
-    await app.page.locator(".mx_Dialog").getByTitle("Recovery key").fill(securityKey);
+    await app.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
+    await app.page.locator(".mx_Dialog").locator('input[type="password"]').fill(securityKey);
     await app.page.getByRole("button", { name: "Continue", disabled: false }).click();
     await app.page.getByRole("button", { name: "Done" }).click();
     await app.settings.closeDialog();
@@ -302,47 +289,17 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
 }
 
 /**
- * Open the encryption settings and enable key storage and recovery
- * Assumes that the current device has been verified
+ * Open the security settings and enable secure key backup.
+ *
+ * Assumes that the current device has been cross-signed (which means that we skip a step where we set it up).
  *
  * Returns the recovery key
  */
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
-    const encryptionTab = await app.settings.openUserSettings("Encryption");
+    await app.settings.openUserSettings("Security & Privacy");
+    await app.page.getByRole("button", { name: "Set up Secure Backup" }).click();
 
-    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
-    if (!(await keyStorageToggle.isChecked())) {
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
-    }
-
-    await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
-    await encryptionTab.getByRole("button", { name: "Continue" }).click();
-
-    const recoveryKey = await encryptionTab.getByTestId("recoveryKey").innerText();
-    await encryptionTab.getByRole("button", { name: "Continue" }).click();
-    await encryptionTab.getByRole("textbox").fill(recoveryKey);
-    await encryptionTab.getByRole("button", { name: "Finish set up" }).click();
-    await app.settings.closeDialog();
-    return recoveryKey;
-}
-
-/**
- * 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("switch", { name: "Allow key storage" });
-    if (await keyStorageToggle.isChecked()) {
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
-        await encryptionTab.getByRole("button", { name: "Delete key storage" }).click();
-        await encryptionTab.getByRole("switch", { 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();
+    return await completeCreateSecretStorageDialog(app.page);
 }
 
 /**
@@ -438,8 +395,8 @@ export async function sendMessageInCurrentRoom(page: Page, message: string): Pro
  * @param isEncrypted - Whether the room should be encrypted
  */
 export async function createRoom(page: Page, roomName: string, isEncrypted: boolean): Promise<void> {
-    await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
-    await page.getByRole("menuitem", { name: "New room" }).click();
+    await page.getByRole("button", { name: "Add room" }).click();
+    await page.locator(".mx_IconizedContextMenu").getByRole("menuitem", { name: "New room" }).click();
 
     const dialog = page.locator(".mx_Dialog");
 

playwright/e2e/devtools/devtools.spec.ts

@@ -1,33 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { test, expect } from "../../element-web-test";
-
-test.describe("Devtools", () => {
-    test.use({
-        displayName: "Alice",
-    });
-
-    test("should render the devtools", { tag: "@screenshot" }, async ({ page, homeserver, user, app, axe }) => {
-        await app.client.createRoom({ name: "Test Room" });
-        await app.viewRoomByName("Test Room");
-
-        const composer = app.getComposer().locator("[contenteditable]");
-        await composer.fill("/devtools");
-        await composer.press("Enter");
-        const dialog = page.locator(".mx_Dialog");
-        await dialog.getByLabel("Developer mode").check();
-
-        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-        await expect(axe).toHaveNoViolations();
-        await expect(dialog).toMatchScreenshot("devtools-dialog.png", {
-            css: `.mx_CopyableText {
-                display: none;
-            }`,
-        });
-    });
-});

playwright/e2e/devtools/upgraderoom.spec.ts

@@ -1,38 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { SettingLevel } from "../../../src/settings/SettingLevel";
-import { test, expect } from "../../element-web-test";
-
-test.describe("Room upgrade dialog", () => {
-    test.use({
-        displayName: "Alice",
-    });
-
-    test(
-        "should render the room upgrade dialog",
-        { tag: "@screenshot" },
-        async ({ page, homeserver, user, app, axe }) => {
-            // Enable developer mode
-            await app.settings.setValue("developerMode", null, SettingLevel.ACCOUNT, true);
-
-            await app.client.createRoom({ name: "Test Room" });
-            await app.viewRoomByName("Test Room");
-
-            const composer = app.getComposer().locator("[contenteditable]");
-            // Pick a room version that is likely to be supported by all our target homeservers.
-            await composer.fill("/upgraderoom 5");
-            await composer.press("Enter");
-            const dialog = page.locator(".mx_Dialog");
-            await dialog.getByLabel("Automatically invite members from this room to the new one").check();
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(dialog).toMatchScreenshot("upgrade-room.png");
-        },
-    );
-});

playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts

@@ -1,28 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { test, expect } from "../../element-web-test";
-
-test.describe("Decline and block invite dialog", function () {
-    test.use({
-        displayName: "Hanako",
-    });
-
-    test(
-        "should show decline and block dialog for a room",
-        { tag: "@screenshot" },
-        async ({ page, app, user, bot, axe }) => {
-            await bot.createRoom({ name: "Test Room", invite: [user.userId] });
-            await app.viewRoomByName("Test Room");
-            await page.getByRole("button", { name: "Decline and block" }).click();
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("decline-and-block-invite-empty.png");
-        },
-    );
-});

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

@@ -77,8 +77,7 @@ test.describe("Invite dialog", function () {
         "should support inviting a user to Direct Messages",
         { tag: "@screenshot" },
         async ({ page, app, user, bot }) => {
-            await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
-            await page.getByRole("menuitem", { 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/knock/knock-into-room.spec.ts

@@ -59,7 +59,7 @@ test.describe("Knock Into Room", () => {
 
         // Knocked room should appear in Rooms
         await expect(
-            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
+            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
         // bot waits for knock request from Alice
@@ -77,7 +77,7 @@ test.describe("Knock Into Room", () => {
         await bot.inviteUser(room.roomId, user.userId);
 
         await expect(
-            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
+            page.getByRole("group", { name: "Invites" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
         // Alice have to accept invitation in order to join the room.
@@ -85,7 +85,7 @@ test.describe("Knock Into Room", () => {
         await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
 
         await expect(
-            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
+            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
         await expect(page.getByText("Alice joined the room")).toBeVisible();
@@ -136,7 +136,7 @@ test.describe("Knock Into Room", () => {
 
         // Knocked room should appear in Rooms
         await expect(
-            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
+            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
         // bot waits for knock request from Alice
@@ -154,7 +154,7 @@ test.describe("Knock Into Room", () => {
         await bot.inviteUser(room.roomId, user.userId);
 
         await expect(
-            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
+            page.getByRole("group", { name: "Invites" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
         // Alice have to accept invitation in order to join the room.
@@ -162,7 +162,7 @@ test.describe("Knock Into Room", () => {
         await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
 
         await expect(
-            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
+            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
         await expect(page.getByText("Alice joined the room")).toBeVisible();
@@ -215,14 +215,14 @@ test.describe("Knock Into Room", () => {
         await expect(roomPreviewBar.getByRole("heading", { name: "Request to join sent" })).toBeVisible();
 
         // Knocked room should appear in Rooms
-        page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" });
+        page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" });
 
         await roomPreviewBar.getByRole("button", { name: "Cancel request" }).click();
         await expect(roomPreviewBar.getByRole("heading", { name: "Ask to join Cybersecurity?" })).toBeVisible();
         await expect(roomPreviewBar.getByRole("button", { name: "Request access" })).toBeVisible();
 
         await expect(
-            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
+            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).not.toBeVisible();
     });
 
@@ -244,7 +244,7 @@ test.describe("Knock Into Room", () => {
 
         // Knocked room should appear in Rooms
         await expect(
-            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
+            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
         // bot waits for knock request from Alice
@@ -262,10 +262,13 @@ test.describe("Knock Into Room", () => {
         await bot.kick(room.roomId, user.userId);
 
         // Room should stay in Rooms and have red badge when knock is denied
+        await expect(
+            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity", exact: true }),
+        ).not.toBeVisible();
         await expect(
             page
-                .getByTestId("room-list")
-                .getByRole("option", { name: "Open room Cybersecurity with 1 unread mention." }),
+                .getByRole("group", { name: "Rooms" })
+                .getByRole("treeitem", { name: "Cybersecurity 1 unread mention." }),
         ).toBeVisible();
 
         await expect(roomPreviewBar.getByRole("heading", { name: "You have been denied access" })).toBeVisible();

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

@@ -30,10 +30,6 @@ test.describe("Lazy Loading", () => {
     });
 
     test.beforeEach(async ({ page, homeserver, user, bot, app }) => {
-        // The charlies were running off the bottom of the screen.
-        // We no longer overscan the member list so the result is they are not in the dom.
-        // Increase the viewport size to ensure they are.
-        await page.setViewportSize({ width: 1000, height: 1000 });
         for (let i = 1; i <= 10; i++) {
             const displayName = `Charly #${i}`;
             const bot = new Bot(page, homeserver, { displayName, startClient: false, autoAcceptInvites: false });

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

@@ -17,7 +17,7 @@ test.describe("LeftPanel", () => {
         // create rooms and check room names are correct
         for (const name of ["Apple", "Pineapple", "Orange"]) {
             await app.client.createRoom({ name });
-            await expect(page.getByRole("option", { name: `Open room ${name}` })).toBeVisible();
+            await expect(page.getByRole("treeitem", { name })).toBeVisible();
         }
     });
 });

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

@@ -5,11 +5,8 @@
  * 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";
+import type { Page } from "@playwright/test";
 
 test.describe("Room list filters and sort", () => {
     test.use({
@@ -21,22 +18,6 @@ test.describe("Room list filters and sort", () => {
         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
@@ -45,332 +26,63 @@ test.describe("Room list filters and sort", () => {
         return page.getByTestId("room-list");
     }
 
+    function getPrimaryFilters(page: Page) {
+        return page.getByRole("listbox", { name: "Room list filters" });
+    }
+
     test.beforeEach(async ({ page, app, bot, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
+
+        await app.client.createRoom({ name: "empty room" });
+
+        const unReadDmId = await bot.createRoom({
+            name: "unread dm",
+            invite: [user.userId],
+            is_direct: true,
+        });
+        await bot.sendMessage(unReadDmId, "I am a robot. Beep.");
+
+        const unReadRoomId = await app.client.createRoom({ name: "unread room" });
+        await app.client.inviteUser(unReadRoomId, bot.credentials.userId);
+        await bot.joinRoom(unReadRoomId);
+        await bot.sendMessage(unReadRoomId, "I am a robot. Beep.");
+
+        const favouriteId = await app.client.createRoom({ name: "favourite room" });
+        await app.client.evaluate(async (client, favouriteId) => {
+            await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
+        }, favouriteId);
     });
 
-    test("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);
+    test("should filter the list (with primary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomList = getRoomList(page);
+        const primaryFilters = getPrimaryFilters(page);
 
-        /*
-        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("option", { 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("option", { name: "Open room room-non-fav" });
-            // item may not be in the DOM using scrollListToBottom rather than scrollIntoViewIfNeeded
-            await app.scrollListToBottom(roomListView);
-            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("listbox", { name: "Room list", exact: true })
-                .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("option", { name: "unread dm" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "unread room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(4);
-            await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
-
-            await primaryFilters.getByRole("option", { name: "People" }).click();
-            await expect(roomList.getByRole("option", { name: "unread dm" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "invited room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(2);
-
-            await primaryFilters.getByRole("option", { name: "Rooms" }).click();
-            await expect(roomList.getByRole("option", { name: "unread room" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "empty room" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "Low prio room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(5);
-
-            await getFilterExpandButton(page).click();
-
-            await primaryFilters.getByRole("option", { name: "Favourite" }).click();
-            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
-
-            await primaryFilters.getByRole("option", { name: "Mentions" }).click();
-            await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
-
-            await primaryFilters.getByRole("option", { name: "Invites" }).click();
-            await expect(roomList.getByRole("option", { name: "invited room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").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);
-                const primaryFilters = getPrimaryFilters(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("option", { 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 primaryFilters.getByRole("option", { name: "Unread" }).click();
-
-                // Unread filter should only show unread room and not unread dm!
-                const unreadDm = roomListView.getByRole("option", { name: "Open room unread room" });
-                await expect(unreadDm).toBeVisible();
-                await expect(unreadDm).toMatchScreenshot("unread-dm.png");
-                await expect(roomListView.getByRole("option", { 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("option").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("option").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");
+        const allFilters = await primaryFilters.locator("option").all();
+        for (const filter of allFilters) {
+            expect(await filter.getAttribute("aria-selected")).toBe("false");
         }
+        await expect(primaryFilters).toMatchScreenshot("unselected-primary-filters.png");
 
-        test(
-            "should render the default placeholder when there is no filter",
-            { tag: "@screenshot" },
-            async ({ page, app, user }) => {
-                const emptyRoomList = getEmptyRoomList(page);
-                await expect(emptyRoomList).toMatchScreenshot("default-empty-room-list.png");
-                await expect(page.getByRole("navigation", { name: "Room list" })).toMatchScreenshot(
-                    "room-panel-empty-room-list.png",
-                );
-            },
-        );
+        await primaryFilters.getByRole("option", { name: "Unread" }).click();
+        // only one room should be visible
+        await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(2);
+        await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
 
-        [
-            { 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: "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: filter }).click();
+        await primaryFilters.getByRole("option", { name: "People" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(1);
 
-                    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`);
-                },
-            );
-        });
+        await primaryFilters.getByRole("option", { name: "Rooms" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(3);
     });
 });

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

@@ -35,8 +35,8 @@ test.describe("Header section of the room list", () => {
 
         await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-compose-menu.png");
 
-        // Start chat should open the direct messages dialog
-        await page.getByRole("menuitem", { name: "Start chat" }).click();
+        // 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();
 

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

@@ -19,7 +19,7 @@ test.describe("Room list panel", () => {
      * @param page
      */
     function getRoomListView(page: Page) {
-        return page.getByRole("navigation", { name: "Room list" });
+        return page.getByTestId("room-list-panel");
     }
 
     test.beforeEach(async ({ page, app, user }) => {
@@ -30,21 +30,12 @@ test.describe("Room list panel", () => {
         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("option", { name: "Open room room19" })).toBeVisible();
+        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.spec.ts

@@ -7,15 +7,12 @@
 
 import { type Page } from "@playwright/test";
 
-import { expect, test } from "../../../element-web-test";
+import { test, expect } from "../../../element-web-test";
 
 test.describe("Room list", () => {
     test.use({
         displayName: "Alice",
         labsFlags: ["feature_new_room_list"],
-        botCreateOpts: {
-            displayName: "BotBob",
-        },
     });
 
     /**
@@ -29,429 +26,55 @@ test.describe("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();
+        for (let i = 0; i < 30; i++) {
+            await app.client.createRoom({ name: `room${i}` });
+        }
     });
 
-    test.describe("Room list", () => {
-        test.beforeEach(async ({ page, app, user }) => {
-            for (let i = 0; i < 30; i++) {
-                await app.client.createRoom({ name: `room${i}` });
-            }
-        });
+    test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room29" })).toBeVisible();
+        await expect(roomListView).toMatchScreenshot("room-list.png");
 
-        test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
-            const roomListView = getRoomList(page);
-            await expect(roomListView.getByRole("option", { name: "Open room room29" })).toBeVisible();
-            await expect(roomListView).toMatchScreenshot("room-list.png");
-
-            // Put focus on the room list
-            await roomListView.getByRole("option", { name: "Open room room29" }).click();
-            // Scroll to the end of the room list
-            await app.scrollListToBottom(roomListView);
-
-            // scrollListToBottom seems to leave the mouse hovered over the list, move it away.
-            await page.getByRole("button", { name: "User menu" }).hover();
-
-            await expect(axe).toHaveNoViolations();
-            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("option", { name: "Open room room29" }).click();
-            await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
-        });
-
-        test("should open the context menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            const roomListView = getRoomList(page);
-            await roomListView.getByRole("option", { name: "Open room room29" }).click({ button: "right" });
-            await expect(page.getByRole("menu", { name: "More Options" })).toBeVisible();
-        });
-
-        test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            const roomListView = getRoomList(page);
-            const roomItem = roomListView.getByRole("option", { 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("option", { 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();
-
-            await expect(roomItem.getByTestId("notification-decoration")).not.toBeVisible();
-
-            // Put focus on the room list
-            await roomListView.getByRole("option", { name: "Open room room28" }).click();
-
-            // Scroll to the end of the room list
-            await app.scrollListToBottom(roomListView);
-
-            // 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("option", { name: "Open room room29" }).click();
-            // Scroll to the end of the room list
-            await app.scrollListToBottom(roomListView);
-
-            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
-            await roomListView.getByRole("option", { 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("option", { name: "Open room room0" })).not.toBeVisible();
-
-            await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("option", { 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("option", { 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("option", { 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("option", { 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("option", { name: "Open room room20" }).click();
-
-                // Make sure the room with the unread is visible before we press the keyboard action to select it
-                await expect(roomListView.getByRole("option", { name: "1 notification" })).toBeVisible();
-
-                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("option", { name: "Open room room29" });
-                const room28 = roomListView.getByRole("option", { 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("option", { 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 page.keyboard.press("Enter");
-                // Wait for the menu to be open
-                await expect(page.getByRole("menuitem", { name: "Match default settings" })).toHaveAttribute(
-                    "aria-selected",
-                    "true",
-                );
-
-                await page.keyboard.press("ArrowDown");
-                await page.keyboard.press("Escape");
-                // Focus should be back on the notification button
-                await expect(notificationButton).toBeFocused();
-            });
-        });
+        await roomListView.hover();
+        // Scroll to the end of the room list
+        await page.mouse.wheel(0, 1000);
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+        await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
     });
 
-    test.describe("Avatar decoration", () => {
-        test.use({ labsFlags: ["feature_video_rooms", "feature_new_room_list"] });
-
-        test("should be a public room", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            // @ts-ignore Visibility enum is not accessible
-            await app.client.createRoom({ name: "public room", visibility: "public" });
-
-            // 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("option", { 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("option", { 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("option", { 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("should open the room when it is clicked", async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+        await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
     });
 
-    test.describe("Notification decoration", () => {
-        test("should render the invitation decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
-            const roomListView = getRoomList(page);
+    test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+        await roomItem.hover();
 
-            await bot.createRoom({
-                name: "invited room",
-                invite: [user.userId],
-                is_direct: true,
-            });
-            const invitedRoom = roomListView.getByRole("option", { name: "invited room" });
-            await expect(invitedRoom).toBeVisible();
-            await expect(invitedRoom).toMatchScreenshot("room-list-item-invited.png");
-        });
+        await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
+        const roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
+        await roomItemMenu.click();
+        await expect(page).toMatchScreenshot("room-list-item-open-more-options.png");
 
-        test("should render the regular decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
-            const roomListView = getRoomList(page);
+        // It should make the room favourited
+        await page.getByRole("menuitemcheckbox", { name: "Favourited" }).click();
 
-            const roomId = await app.client.createRoom({ name: "2 notifications" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
-            await bot.joinRoom(roomId);
+        // Check that the room is favourited
+        await roomItem.hover();
+        await roomItemMenu.click();
+        await expect(page.getByRole("menuitemcheckbox", { name: "Favourited" })).toBeChecked();
+        // It should show the invite dialog
+        await page.getByRole("menuitem", { name: "invite" }).click();
+        await expect(page.getByRole("heading", { name: "Invite to room29" })).toBeVisible();
+        await app.closeDialog();
 
-            await bot.sendMessage(roomId, "I am a robot. Beep.");
-            await bot.sendMessage(roomId, "I am a robot. Beep.");
-
-            const room = roomListView.getByRole("option", { 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("option", { 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("option", { 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("option", { 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("option", { 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("option", { name: "silent" });
-            await expect(room.getByTestId("notification-decoration")).toBeVisible();
-            await expect(room).toMatchScreenshot("room-list-item-silent.png");
-        });
+        // It should leave the room
+        await roomItem.hover();
+        await roomItemMenu.click();
+        await page.getByRole("menuitem", { name: "leave room" }).click();
+        await expect(roomItem).not.toBeVisible();
     });
 });

playwright/e2e/location/location.spec.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -57,26 +57,4 @@ test.describe("Location sharing", { tag: "@no-firefox" }, () => {
 
         await expect(page.locator(".mx_Marker")).toBeVisible();
     });
-
-    test(
-        "is prompted for and can consent to live location sharing",
-        { tag: "@screenshot" },
-        async ({ page, user, app, axe }) => {
-            await app.viewRoomById(await app.client.createRoom({}));
-
-            const composerOptions = await app.openMessageComposerOptions();
-            await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click();
-            const menu = page.locator(".mx_LocationShareMenu");
-
-            await menu.getByRole("button", { name: "My live location" }).click();
-            await menu.getByLabel("Enable live location sharing").check();
-
-            axe.disableRules([
-                "color-contrast", // XXX: Inheriting colour contrast issues from room view.
-                "region", // XXX: ContextMenu managed=false does not provide a role.
-            ]);
-            await expect(axe).toHaveNoViolations();
-            await expect(menu).toMatchScreenshot("location-live-share-dialog.png");
-        },
-    );
 });

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

@@ -13,7 +13,6 @@ import { selectHomeserver } from "../utils";
 import { type Credentials, type HomeserverInstance } from "../../plugins/homeserver";
 import { consentHomeserver } from "../../plugins/homeserver/synapse/consentHomeserver.ts";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { createBot } from "../crypto/utils.ts";
 
 // This test requires fixed credentials for the device signing keys below to work
 const username = "user1234";
@@ -186,7 +185,7 @@ test.describe("Login", () => {
                 await page.goto("/");
                 await login(page, homeserver, credentials);
 
-                await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).toBeVisible();
+                await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();
 
                 await expect(page.getByRole("button", { name: "Skip verification for now" })).toBeVisible();
             });
@@ -219,7 +218,7 @@ test.describe("Login", () => {
                     await page.goto("/");
                     await login(page, homeserver, credentials);
 
-                    await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).toBeVisible();
+                    await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();
 
                     await expect(page.getByRole("button", { name: "Skip verification for now" })).toBeVisible();
                 });
@@ -254,76 +253,11 @@ test.describe("Login", () => {
                     await page.goto("/");
                     await login(page, homeserver, credentials);
 
-                    const h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
-                    await expect(h2).toBeVisible();
+                    const h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
+                    await expect(h1).toBeVisible();
 
-                    await expect(h2.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
+                    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 h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
-                    await expect(h2).toBeVisible();
-
-                    // Click "Use another device"
-                    await page.getByRole("button", { name: "Use another device" }).click();
-
-                    // Cancel the new dialog
-                    await page.getByRole("button", { name: "Close dialog" }).click();
-
-                    // Check that we are still being asked to verify
-                    h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
-                    await expect(h2).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: "Confirm your identity", level: 2 })).toBeVisible();
-
-                // Start the reset process
-                await page.getByRole("button", { name: "Can't confirm?" }).click();
-
-                // First try cancelling and restarting
-                await page.getByRole("button", { name: "Cancel" }).click();
-                await page.getByRole("button", { name: "Can't confirm?" }).click();
-
-                // Then click outside the dialog and restart
-                await page.getByRole("link", { name: "Powered by Matrix" }).click({ force: true });
-                await page.getByRole("button", { name: "Can't confirm?" }).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/messages/messages.spec.ts

@@ -13,7 +13,7 @@ import { type Locator, type Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 
 async function sendMessage(page: Page, message: string): Promise<Locator> {
-    await page.getByRole("textbox", { name: "Send an unencrypted message…" }).fill(message);
+    await page.getByRole("textbox", { name: "Send a message…" }).fill(message);
     await page.getByRole("button", { name: "Send message" }).click();
 
     const msgTile = page.locator(".mx_EventTile_last");
@@ -22,7 +22,7 @@ async function sendMessage(page: Page, message: string): Promise<Locator> {
 }
 
 async function sendMultilineMessages(page: Page, messages: string[]) {
-    await page.getByRole("textbox", { name: "Send an unencrypted message…" }).focus();
+    await page.getByRole("textbox", { name: "Send a message…" }).focus();
     for (let i = 0; i < messages.length; i++) {
         await page.keyboard.type(messages[i]);
         if (i < messages.length - 1) await page.keyboard.press("Shift+Enter");
@@ -40,7 +40,7 @@ async function replyMessage(page: Page, message: Locator, replyMessage: string):
     await line.hover();
     await line.getByRole("button", { name: "Reply", exact: true }).click();
 
-    await page.getByRole("textbox", { name: "Send an unencrypted reply…" }).fill(replyMessage);
+    await page.getByRole("textbox", { name: "Send a reply…" }).fill(replyMessage);
     await page.getByRole("button", { name: "Send message" }).click();
 
     const msgTile = page.locator(".mx_EventTile_last");

playwright/e2e/mobile-guide/mobile-guide.spec.ts

@@ -1,36 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { test, expect } from "../../element-web-test";
-import { MobileAppVariant } from "../../../src/vector/mobile_guide/mobile-apps";
-
-const variants = [MobileAppVariant.Classic, MobileAppVariant.X, MobileAppVariant.Pro];
-
-test.describe("Mobile Guide Screenshots", { tag: "@screenshot" }, () => {
-    for (const variant of variants) {
-        test.describe(`for variant ${variant}`, () => {
-            test.use({
-                config: {
-                    default_server_config: {
-                        "m.homeserver": {
-                            base_url: "https://matrix.server.invalid",
-                            server_name: "server.invalid",
-                        },
-                    },
-                    mobile_guide_app_variant: variant,
-                },
-                viewport: { width: 390, height: 844 }, // iPhone 16e
-            });
-
-            test("should match the mobile_guide screenshot", async ({ page, axe }) => {
-                await page.goto("/mobile_guide/");
-                await expect(page).toMatchScreenshot(`mobile-guide-${variant}.png`);
-                await expect(axe).toHaveNoViolations();
-            });
-        });
-    }
-});

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

@@ -1,160 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Page } from "@playwright/test";
-import fs from "node:fs";
-
-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;
-        }
-    `,
-});
-
-const IMAGE_FILE = fs.readFileSync("playwright/sample-files/element.png");
-
-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 disallow downloading media when the allowDownloading hint is set to false", async ({
-            page,
-            room,
-            app,
-        }) => {
-            await app.viewRoomById(room.roomId);
-            await app.viewRoomById(room.roomId);
-            const upload = await app.client.uploadContent(IMAGE_FILE, { name: "bad.png", type: "image/png" });
-            await app.client.sendEvent(room.roomId, null, "m.room.message", {
-                msgtype: "m.image",
-                body: "bad.png",
-                url: upload.content_uri,
-            });
-
-            await app.timeline.scrollToBottom();
-            const imgTile = page.locator(".mx_MImageBody").first();
-            await expect(imgTile).toBeVisible();
-            await imgTile.hover();
-            await expect(page.getByRole("button", { name: "Download" })).not.toBeVisible();
-            await imgTile.click();
-            await expect(page.getByLabel("Image view").getByLabel("Download")).not.toBeVisible();
-        });
-        test("should allow downloading media when the allowDownloading hint is set to true", async ({
-            page,
-            room,
-            app,
-        }) => {
-            await app.viewRoomById(room.roomId);
-            await app.viewRoomById(room.roomId);
-            const upload = await app.client.uploadContent(IMAGE_FILE, { name: "good.png", type: "image/png" });
-            await app.client.sendEvent(room.roomId, null, "m.room.message", {
-                msgtype: "m.image",
-                body: "good.png",
-                url: upload.content_uri,
-            });
-
-            await app.timeline.scrollToBottom();
-            const imgTile = page.locator(".mx_MImageBody").first();
-            await expect(imgTile).toBeVisible();
-            await imgTile.hover();
-            await expect(page.getByRole("button", { name: "Download" })).toBeVisible();
-            await imgTile.click();
-            await expect(page.getByLabel("Image view").getByLabel("Download")).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

@@ -15,7 +15,6 @@ test.describe("Module loading", () => {
     test.describe("Example Module", () => {
         test.use({
             config: {
-                brand: "TestBrand",
                 modules: ["/modules/example-module.js"],
             },
             page: async ({ page }, use) => {
@@ -26,31 +25,11 @@ test.describe("Module loading", () => {
             },
         });
 
-        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);
-                });
-            });
-        }
+        test("should show alert", async ({ page }) => {
+            const dialogPromise = page.waitForEvent("dialog");
+            await page.goto("/");
+            const dialog = await dialogPromise;
+            expect(dialog.message()).toBe("Testing module loading successful!");
+        });
     });
 });

playwright/e2e/oidc/index.ts

@@ -11,9 +11,6 @@ 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,
     mailpit: MailpitClient,
@@ -40,22 +37,6 @@ export async function registerAccountMas(
 
     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,12 +6,8 @@ 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 { logInAccountMas, registerAccountMas } from ".";
+import { registerAccountMas } from ".";
 import { ElementAppPage } from "../../pages/ElementAppPage.ts";
 import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";
 
@@ -37,7 +33,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, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
+        await registerAccountMas(page, mailpitClient, userId, "alice@email.com", "Pa$sW0rD!");
 
         // Eventually, we should end up at the home screen.
         await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
@@ -59,7 +55,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", { exact: true })).toBeVisible();
+        await expect(newPage.getByText("Element")).toBeVisible();
         await expect(newPage.getByText("http://localhost:8080/")).toBeVisible();
         await expect(newPage).toHaveURL(/\/oauth2_session/);
         await newPage.close();
@@ -77,182 +73,4 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await revokeAccessTokenPromise;
         await revokeRefreshTokenPromise;
     });
-
-    test(
-        "it should log out the user & wipe data when logging out via MAS",
-        { tag: "@screenshot" },
-        async ({ mas, page, mailpitClient, homeserver }, 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
-        await expect(page.getByText("Confirm your identity")).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("Confirm your identity")).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: "Use 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: "Use 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/permalinks/permalinks.spec.ts

@@ -100,51 +100,3 @@ test.describe("permalinks", () => {
         });
     });
 });
-
-test.describe("triple-click message selection", () => {
-    test.use({
-        displayName: "Alice",
-    });
-
-    test("should select entire message line when triple-clicking on message with pills", async ({
-        page,
-        app,
-        user,
-        bot,
-    }) => {
-        await bot.prepareClient();
-
-        const roomId = await app.client.createRoom({ name: "Test Room" });
-        await app.client.inviteUser(roomId, bot.credentials.userId);
-        await app.viewRoomByName("Test Room");
-
-        // Send a message with user and room pills
-        await app.client.sendMessage(
-            roomId,
-            `Testing triple-click message selection. ` +
-                `User: ${permalinkPrefix}${bot.credentials.userId}, ` +
-                `Room: ${permalinkPrefix}${roomId}, ` +
-                `Message: ${permalinkPrefix}${roomId}/$dummy-event, ` +
-                `and @room mention.`,
-        );
-
-        const timeline = page.locator(".mx_RoomView_timeline");
-        const messageTile = timeline.locator(".mx_EventTile").last();
-
-        // Triple-click on the message body to select its entire content
-        const messageBody = messageTile.locator(".mx_EventTile_body");
-        await messageBody.click({ clickCount: 3 });
-
-        // Get the expected text content of the message, including pills
-        const expectedText = await messageBody.innerText();
-
-        // Get the currently selected text from the page
-        const selectedText = await page.evaluate(() => {
-            const selection = window.getSelection();
-            return selection ? selection.toString().trim() : "";
-        });
-
-        // Verify that the selected text exactly matches the message content
-        expect(selectedText).toBe(expectedText);
-    });
-});

playwright/e2e/read-receipts/index.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 type { JSHandle, Locator, Page } from "@playwright/test";
+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 { type Bot } from "../../pages/bot";
@@ -428,7 +428,7 @@ class Helpers {
     }
 
     getRoomListTile(label: string) {
-        return this.page.getByRole("option", { name: new RegExp("^Open room " + label) });
+        return this.page.getByRole("treeitem", { name: new RegExp("^" + label) });
     }
 
     /**
@@ -446,8 +446,8 @@ class Helpers {
      */
     async assertRead(room: RoomRef) {
         const tile = this.getRoomListTile(room.name);
-        await expect(tile.getByTestId("notification-decoration")).not.toBeVisible();
-        await expect(tile).not.toHaveAccessibleName(/with \d* unread message/);
+        await expect(tile.locator(".mx_NotificationBadge_dot")).not.toBeVisible();
+        await expect(tile.locator(".mx_NotificationBadge_count")).not.toBeVisible();
     }
 
     /**
@@ -463,18 +463,15 @@ class Helpers {
     /**
      * Assert a given room is marked as unread (via the room list tile)
      * @param room - the name of the room to check
-     * @param count - the numeric count to assert
+     * @param count - the numeric count to assert, or if "." specified then a bold/dot (no count) state is asserted
      */
-    async assertUnread(room: RoomRef, count: number) {
+    async assertUnread(room: RoomRef, count: number | ".") {
         const tile = this.getRoomListTile(room.name);
-        await expect(tile).toBeVisible();
-        await expect(tile).toHaveAccessibleName(/with \d* unread message/);
-    }
-
-    async unreadCountForRoomTile(tile: Locator): Promise<number> {
-        const accessibleName = await tile.getAttribute("aria-label");
-        const match = accessibleName?.match(/(\d+)\s+unread message/);
-        return match ? parseInt(match[1], 10) : 0;
+        if (count === ".") {
+            await expect(tile.locator(".mx_NotificationBadge_dot")).toBeVisible();
+        } else {
+            await expect(tile.locator(".mx_NotificationBadge_count")).toHaveText(count.toString());
+        }
     }
 
     /**
@@ -490,7 +487,7 @@ class Helpers {
         // .toBeLessThan doesn't have a retry mechanism, so we use .poll
         await expect
             .poll(async () => {
-                return this.unreadCountForRoomTile(tile);
+                return parseInt(await tile.locator(".mx_NotificationBadge_count").textContent(), 10);
             })
             .toBeLessThan(lessThan);
     }
@@ -508,7 +505,7 @@ class Helpers {
         // .toBeGreaterThan doesn't have a retry mechanism, so we use .poll
         await expect
             .poll(async () => {
-                return this.unreadCountForRoomTile(tile);
+                return parseInt(await tile.locator(".mx_NotificationBadge_count").textContent(), 10);
             })
             .toBeGreaterThan(greaterThan);
     }
@@ -599,15 +596,24 @@ class Helpers {
         await button.click();
     }
 
+    /**
+     * Toggle the `Show rooms with unread messages first` option for the room list
+     */
+    async toggleRoomUnreadOrder() {
+        await this.toggleRoomListMenu();
+        await this.page.getByText("Show rooms with unread messages first").click();
+        // Close contextual menu
+        await this.page.locator(".mx_ContextualMenu_background").click();
+    }
+
     /**
      * Assert that the room list is ordered as expected
      * @param rooms
      */
     async assertRoomListOrder(rooms: Array<{ name: string }>) {
-        const roomListContainer = this.page.getByTestId("room-list");
-        const roomTiles = roomListContainer.getByRole("option");
+        const roomList = this.page.locator(".mx_RoomTile_title");
         for (const [i, room] of rooms.entries()) {
-            await expect(roomTiles.nth(i)).toHaveAccessibleName(new RegExp(`${room.name}`));
+            await expect(roomList.nth(i)).toHaveText(room.name);
         }
     }
 }

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

@@ -112,7 +112,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         const main3 = await sendMessage(bot);
 
         // (So the room starts off unread)
-        await expect(page.getByLabel(`${otherRoomName} with 3 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} 3 unread messages.`)).toBeVisible();
 
         // When we send a threaded receipt for the last event in main
         // And an unthreaded receipt for an earlier event
@@ -147,13 +147,13 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         await sendMessage(bot);
 
         // (The room starts off unread)
-        await expect(page.getByLabel(`${otherRoomName} with 3 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} 3 unread messages.`)).toBeVisible();
 
         // When we send a threaded receipt for the second-last event in main
         await sendThreadedReadReceipt(app, main2);
 
         // Then the room has only one unread
-        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} 1 unread message.`)).toBeVisible();
     });
 
     test("Considers room read if there is only a main thread and we have a main receipt", async ({
@@ -166,7 +166,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         await sendMessage(bot);
         const main3 = await sendMessage(bot);
         // (The room starts off unread)
-        await expect(page.getByLabel(`${otherRoomName} with 3 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} 3 unread messages.`)).toBeVisible();
 
         // When we send a threaded receipt for the last event in main
         await sendThreadedReadReceipt(app, main3);
@@ -186,7 +186,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         const thread1a = await botSendThreadMessage(bot, main1.event_id);
         await botSendThreadMessage(bot, main1.event_id);
         // 1 unread on the main thread, 2 in the new thread that aren't shown
-        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} 1 unread message.`)).toBeVisible();
 
         // When we send receipts for main, and the second-last in the thread
         await sendThreadedReadReceipt(app, main1);
@@ -203,7 +203,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         await botSendThreadMessage(bot, main1.event_id);
         const thread1b = await botSendThreadMessage(bot, main1.event_id);
         // 1 unread on the main thread, 2 in the new thread which don't show
-        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} 1 unread message.`)).toBeVisible();
 
         // When we send receipts for main, and the last in the thread
         await sendThreadedReadReceipt(app, main1);
@@ -226,7 +226,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         const thread1a = await botSendThreadMessage(bot, main1.event_id);
         await botSendThreadMessage(bot, main1.event_id);
         // 1 unread on the main thread, 2 in the new thread which don't count
-        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} 1 unread message.`)).toBeVisible();
 
         // When we send an unthreaded receipt for the second-last in the thread
         await sendUnthreadedReadReceipt(app, thread1a);
@@ -251,7 +251,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         const thread1b = await botSendThreadMessage(bot, main1.event_id);
         await sendMessage(bot);
         // 2 unreads on the main thread, 2 in the new thread which don't count
-        await expect(page.getByLabel(`${otherRoomName} with 2 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} 2 unread messages.`)).toBeVisible();
 
         // When we send an unthreaded receipt for the last in the thread
         await sendUnthreadedReadReceipt(app, thread1b);
@@ -259,7 +259,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         // Then the room has only one unread - the one in the
         // main thread, because it is later than the unthreaded
         // receipt.
-        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} 1 unread message.`)).toBeVisible();
     });
 
     /**
@@ -291,9 +291,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         const uriEncodedLastMessageId = encodeURIComponent(lastMessageId);
 
         // wait until all messages have been received
-        await expect(
-            page.getByLabel(`${otherRoomName} with ${sendMessageResponses.length} unread messages.`),
-        ).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} ${sendMessageResponses.length} unread messages.`)).toBeVisible();
 
         // switch to the room with the messages
         await page.goto(`/#/room/${otherRoomId}`);

playwright/e2e/read-receipts/room-list-order.spec.ts

@@ -12,7 +12,7 @@ import { test } from ".";
 
 test.describe("Read receipts", { tag: "@mergequeue" }, () => {
     test.describe("Room list order", () => {
-        test("Rooms with unread messages appear at the top of room list with default 'activity' ordering", async ({
+        test("Rooms with unread messages appear at the top of room list if 'unread first' is selected", async ({
             roomAlpha: room1,
             roomBeta: room2,
             util,
@@ -22,18 +22,15 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
             await util.goTo(room2);
 
             // Display the unread first room
+            await util.toggleRoomUnreadOrder();
             await util.receiveMessages(room1, ["Msg1"]);
             await page.reload();
 
-            // switch rooms so they can re-order in the list
-            await util.goTo(room1);
-
             // Room 1 has an unread message and should be displayed first
-            // (as the default is to sort by activity)
             await util.assertRoomListOrder([room1, room2]);
         });
 
-        test("Rooms with unread threads appear at the top of room list with default 'activity' order", async ({
+        test("Rooms with unread threads appear at the top of room list if 'unread first' is selected", async ({
             roomAlpha: room1,
             roomBeta: room2,
             util,
@@ -45,6 +42,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
             await util.assertRead(room1);
 
             // Display the unread first room
+            await util.toggleRoomUnreadOrder();
             await util.receiveMessages(room1, [msg.threadedOff("Msg1", "Resp1")]);
             await util.saveAndReload();