Coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Coverage
2025-12-11 01:40:42 +00:00 · 2025-08-08 09:28:47 +01:00 · 2025-08-08 09:10:29 +01:00 · 2025-08-07 16:20:39 +01:00 · 2025-08-07 15:12:04 +01:00 · 2025-08-07 13:51:47 +01:00
741 changed files with 9360 additions and 21125 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -17,16 +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
-/playwright/e2e/voip/element-call.spec.ts @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

--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.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.
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -10,7 +10,8 @@ concurrency:
    cancel-in-progress: ${{ github.event_name == 'pull_request' }}
 # develop pushes and repository_dispatch handled in build_develop.yaml
 env:
-    # This must be set for fetchdep.sh to get the right branch
+    # These must be set for fetchdep.sh to get the right branch
+    REPOSITORY: ${{ github.repository }}
    PR_NUMBER: ${{ github.event.pull_request.number }}
 permissions: {} # No permissions required
 jobs:
@@ -42,9 +43,9 @@ jobs:
            run:
                shell: bash
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  # Disable cache on Windows as it is slower than not caching
                  # https://github.com/actions/setup-node/issues/975
@@ -55,7 +56,15 @@ jobs:
            - run: yarn config set network-timeout 300000

            - name: Fetch layered build
-              run: ./scripts/layered.sh
+              id: layered_build
+              env:
+                  # tell layered.sh to check out the right sha of the JS-SDK & EW, if they were given one
+                  JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
+              run: |
+                  scripts/layered.sh
+                  JSSDK_SHA=$(git -C matrix-js-sdk rev-parse --short=12 HEAD)
+                  VECTOR_SHA=$(git rev-parse --short=12 HEAD)
+                  echo "VERSION=$VECTOR_SHA--js-$JSSDK_SHA" >> $GITHUB_OUTPUT

            - name: Copy config
              run: cp element.io/develop/config.json config.json
@@ -63,7 +72,9 @@ jobs:
            - name: Build
              env:
                  CI_PACKAGE: true
-              run: VERSION=$(scripts/get-version-from-git.sh) yarn build
+                  VERSION: "${{ steps.layered_build.outputs.VERSION }}"
+              run: |
+                  yarn build

            - name: Upload Artifact
              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
--- a/.github/workflows/build_debian.yaml
+++ b/.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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

            - name: Download package
              run: |
--- a/.github/workflows/build_develop.yml
+++ b/.github/workflows/build_develop.yml
@@ -26,9 +26,9 @@ jobs:
            R2_URL: ${{ vars.CF_R2_S3_API }}
            R2_PUBLIC_URL: "https://element-web-develop.element.io"
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  node-version: "lts/*"
--- a/.github/workflows/deploy.yml
+++ b/.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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

            - name: Load GPG key
              run: |
--- a/.github/workflows/docker.yaml
+++ b/.github/workflows/docker.yaml
@@ -20,7 +20,7 @@ jobs:
        env:
            TEST_TAG: vectorim/element-web:test
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              with:
                  fetch-depth: 0 # needed for docker-package to be able to calculate the version

@@ -37,14 +37,14 @@ jobs:
                  install: true

            - name: Login to Docker Hub
-              uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3
+              uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # 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@5e57cd118135c172c3672efd75eb46360885c0ef # v3
+              uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3
              if: github.event_name != 'pull_request'
              with:
                  registry: ghcr.io
--- a/.github/workflows/docs.yml
+++ b/.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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              with:
                  repository: element-hq/element-desktop
                  path: element-desktop

            - name: Fetch element-web
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              with:
                  path: element-web

            - name: Fetch matrix-js-sdk
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              with:
                  repository: matrix-org/matrix-js-sdk
                  path: matrix-js-sdk

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  cache-dependency-path: element-web/yarn.lock
@@ -88,7 +88,7 @@ jobs:
              run: mdbook build

            - name: Upload artifact
-              uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4
+              uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
              with:
                  path: ./book

--- a/.github/workflows/end-to-end-tests-netlify.yaml
+++ b/.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@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
              with:
                  github-token: ${{ secrets.GITHUB_TOKEN }}
                  run-id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/end-to-end-tests.yaml
+++ b/.github/workflows/end-to-end-tests.yaml
@@ -50,20 +50,25 @@ jobs:
            runners-matrix: ${{ steps.runner-vars.outputs.matrix }}
        steps:
            - name: Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              with:
                  repository: element-hq/element-web

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  node-version: "lts/*"

            - name: Fetch layered build
+              id: layered_build
              env:
                  # tell layered.sh to check out the right sha of the JS-SDK & EW, if they were given one
                  JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
-              run: scripts/layered.sh
+              run: |
+                  scripts/layered.sh
+                  JSSDK_SHA=$(git -C matrix-js-sdk rev-parse --short=12 HEAD)
+                  VECTOR_SHA=$(git rev-parse --short=12 HEAD)
+                  echo "VERSION=$VECTOR_SHA--js-$JSSDK_SHA" >> $GITHUB_OUTPUT

            - name: Copy config
              run: cp element.io/develop/config.json config.json
@@ -71,7 +76,9 @@ jobs:
            - name: Build
              env:
                  CI_PACKAGE: true
-              run: VERSION=$(scripts/get-version-from-git.sh) yarn build
+                  VERSION: "${{ steps.layered_build.outputs.VERSION }}"
+              run: |
+                  yarn build

            - name: Upload Artifact
              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
@@ -82,7 +89,7 @@ jobs:

            - name: Calculate runner variables
              id: runner-vars
-              uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+              uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
              with:
                  script: |
                      const numRunners = parseInt(process.env.NUM_RUNNERS, 10);
@@ -122,18 +129,18 @@ jobs:
                    - runAllTests: false
                      project: Pinecone
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              with:
                  persist-credentials: false
                  repository: element-hq/element-web

            - name: 📥 Download artifact
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
              with:
                  name: webapp
                  path: webapp

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  cache-dependency-path: yarn.lock
@@ -147,7 +154,7 @@ 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@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
              id: playwright-cache
              with:
                  path: ~/.cache/ms-playwright
@@ -194,13 +201,13 @@ jobs:
        if: always()
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              if: inputs.skip != true
              with:
                  persist-credentials: false
                  repository: element-hq/element-web

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              if: inputs.skip != true
              with:
                  cache: "yarn"
@@ -212,7 +219,7 @@ jobs:

            - name: Download blob reports from GitHub Actions Artifacts
              if: inputs.skip != true
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
              with:
                  pattern: all-blob-reports-*
                  path: all-blob-reports
--- a/.github/workflows/issue_closed.yml
+++ b/.github/workflows/issue_closed.yml
@@ -10,7 +10,7 @@ jobs:
        name: Tidy closed issues
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
              id: main
              with:
                  # PAT needed as the GITHUB_TOKEN won't be able to see cross-references from other orgs (matrix-org)
@@ -142,7 +142,7 @@ jobs:
                          });
                        }
                      }
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
              name: Close duplicate as Not Planned
              if: steps.main.outputs.closeAsNotPlanned
              with:
--- a/.github/workflows/netlify.yaml
+++ b/.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@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
              with:
                  github-token: ${{ secrets.GITHUB_TOKEN }}
                  run-id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/pending-reviews.yaml
+++ b/.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@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
              env:
                  HS_URL: ${{ secrets.BETABOT_HS_URL }}
                  ROOM_ID: ${{ secrets.ROOM_ID }}
--- a/.github/workflows/playwright-image-updates.yaml
+++ b/.github/workflows/playwright-image-updates.yaml
@@ -10,7 +10,7 @@ jobs:
        permissions:
            pull-requests: write
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # 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
--- a/.github/workflows/pull_request_base_branch.yaml
+++ b/.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@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
              with:
                  script: |
                      const baseBranch = context.payload.pull_request.base.ref;
--- a/.github/workflows/release_prepare.yml
+++ b/.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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              if: inputs.element-desktop
              with:
                  repository: element-hq/element-desktop
@@ -51,7 +51,7 @@ jobs:
                  fetch-tags: true
                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
            - name: Checkout Element Web
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              if: inputs.element-web
              with:
                  repository: element-hq/element-web
@@ -61,7 +61,7 @@ jobs:
                  fetch-tags: true
                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
            - name: Checkout Matrix JS SDK
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              if: inputs.matrix-js-sdk
              with:
                  repository: matrix-org/matrix-js-sdk
--- a/.github/workflows/shared-component-visual-tests-netlify.yaml
+++ b/.github/workflows/shared-component-visual-tests-netlify.yaml
@@ -27,7 +27,7 @@ jobs:
              run: "sudo apt-get install -y tree"

            - name: Download Diffs
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
              with:
                  github-token: ${{ secrets.GITHUB_TOKEN }}
                  run-id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/shared-component-visual-tests.yaml
+++ b/.github/workflows/shared-component-visual-tests.yaml
@@ -21,12 +21,12 @@ jobs:
            issues: read
            pull-requests: read
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              with:
                  persist-credentials: false
                  repository: element-hq/element-web

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -39,7 +39,7 @@ 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@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
              id: playwright-cache
              with:
                  path: ~/.cache/ms-playwright
--- a/.github/workflows/static_analysis.yaml
+++ b/.github/workflows/static_analysis.yaml
@@ -12,7 +12,8 @@ concurrency:
    cancel-in-progress: true

 env:
-    # This must be set for fetchdep.sh to get the right branch
+    # These must be set for fetchdep.sh to get the right branch
+    REPOSITORY: ${{ github.repository }}
    PR_NUMBER: ${{ github.event.pull_request.number }}

 permissions: {} # No permissions required
@@ -22,9 +23,9 @@ jobs:
        name: "Typescript Syntax Check"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -51,13 +52,12 @@ jobs:
                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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

            - run: ./res/css/rethemendex.sh

@@ -67,9 +67,9 @@ jobs:
        name: "ESLint"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -85,9 +85,9 @@ jobs:
        name: "Style Lint"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -103,9 +103,9 @@ jobs:
        name: "Workflow Lint"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -121,9 +121,9 @@ jobs:
        name: "Analyse Dead Code"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  node-version: "lts/*"
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -39,12 +39,12 @@ jobs:
                runner: [1, 2]
        steps:
            - name: Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
              with:
                  repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}

            - name: Yarn cache
-              uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  node-version: "lts/*"
                  cache: "yarn"
@@ -55,7 +55,7 @@ jobs:
                  JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}

            - name: Jest Cache
-              uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
              with:
                  path: /tmp/jest_cache
                  key: ${{ hashFiles('**/yarn.lock') }}
@@ -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@5530c593759f489bba08272e96986ffc571c1ea1
+              uses: guibranco/github-status-action-v2@741ea90ba6c3ca76fe0d43ba11a90cda97d5e685
              with:
                  authToken: ${{ secrets.GITHUB_TOKEN }}
                  state: success
--- a/.github/workflows/triage-assigned.yml
+++ b/.github/workflows/triage-assigned.yml
@@ -15,7 +15,7 @@ jobs:
            contains(github.event.issue.assignees.*.login, 'dbkr') ||
            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 }}
--- a/.github/workflows/triage-incoming.yml
+++ b/.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 }}
--- a/.github/workflows/triage-labelled.yml
+++ b/.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@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
              with:
                  script: |
                      github.rest.issues.addLabels({
@@ -44,7 +44,7 @@ jobs:
            contains(github.event.issue.labels.*.name, 'good first issue') ||
            contains(github.event.issue.labels.*.name, 'Hacktoberfest')
        steps:
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
              with:
                  script: |
                      github.rest.issues.addLabels({
@@ -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,7 +145,7 @@ 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 }}
@@ -156,7 +156,7 @@ jobs:
        if: >
            contains(github.event.issue.labels.*.name, 'Team: Crypto')
        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
                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -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 }}
--- a/.github/workflows/triage-move-review-requests.yml
+++ b/.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:
--- a/.github/workflows/triage-stale.yml
+++ b/.github/workflows/triage-stale.yml
@@ -12,7 +12,7 @@ jobs:
            issues: write
            pull-requests: write
        steps:
-            - uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10
+            - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9
              with:
                  operations-per-run: 100

--- a/.github/workflows/triage-unlabelled.yml
+++ b/.github/workflows/triage-unlabelled.yml
@@ -5,25 +5,44 @@ on:
        types: [unlabeled]
 permissions: {}
 jobs:
-    move_no_longer_needs_info_issues:
+    Move_Unabeled_Issue_On_Project_Board:
        name: Move no longer X-Needs-Info issues to Triaged
        runs-on: ubuntu-24.04
+        permissions:
+            repository-projects: read
        if: >
-            !contains(github.event.issue.labels.*.name, 'X-Needs-Info')
-        steps:
-            - id: set_fields
-              uses: nipe0324/update-project-v2-item-field@c4af58452d1c5a788c1ea4f20e073fa722ec4a6b #v2.0.2
-              with:
-                  project-url: ${{ env.PROJECT_URL }}
-                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
-                  skip-update-script: |
-                      const isIssue = item.type === 'ISSUE'
-                      const status = item.fieldValues['Status']
-                      return !isIssue || status !== 'Needs info'
-                  field-name: Status
-                  field-value: "Triaged"
+            ${{
+            !contains(github.event.issue.labels.*.name, 'X-Needs-Info') }}
        env:
-            PROJECT_URL: https://github.com/orgs/element-hq/projects/120
+            BOARD_NAME: "Issue triage"
+            OWNER: ${{ github.repository_owner }}
+            REPO: ${{ github.event.repository.name }}
+            ISSUE: ${{ github.event.issue.number }}
+        steps:
+            - name: Check if issue is already in "${{ env.BOARD_NAME }}"
+              run: |
+                  json=$(curl -s -H 'Content-Type: application/json' -H "Authorization: bearer ${{ secrets.GITHUB_TOKEN }}" -X POST -d '{"query": "query($issue: Int!, $owner: String!, $repo: String!) { repository(owner: $owner, name: $repo) { issue(number: $issue) { projectCards { nodes { project { name } isArchived } } } } } ", "variables" : "{ \"issue\": '${ISSUE}', \"owner\": \"'${OWNER}'\", \"repo\": \"'${REPO}'\" }" }' https://api.github.com/graphql)
+                  if echo $json | jq '.data.repository.issue.projectCards.nodes | length'; then
+                    if [[ $(echo $json | jq '.data.repository.issue.projectCards.nodes[0].project.name') =~ "${BOARD_NAME}" ]]; then
+                      if [[ $(echo $json | jq '.data.repository.issue.projectCards.nodes[0].isArchived') == 'true' ]]; then
+                        echo "Issue is already in Project '$BOARD_NAME', but is archived - skipping workflow";
+                        echo "SKIP_ACTION=true" >> $GITHUB_ENV
+                      else
+                        echo "Issue is already in Project '$BOARD_NAME', proceeding";
+                        echo "ALREADY_IN_BOARD=true" >> $GITHUB_ENV
+                      fi
+                    else
+                      echo "Issue is not in project '$BOARD_NAME', cancelling this workflow"
+                      echo "ALREADY_IN_BOARD=false" >> $GITHUB_ENV
+                    fi
+                  fi
+            - name: Move issue
+              uses: alex-page/github-project-automation-plus@303f24a24c67ce7adf565a07e96720faf126fe36
+              if: ${{ env.ALREADY_IN_BOARD == 'true' && env.SKIP_ACTION != 'true' }}
+              with:
+                  project: Issue triage
+                  column: Triaged
+                  repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

    remove_Z-Labs_label:
        name: Remove Z-Labs label when features behind labs flags are removed
@@ -43,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@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
              with:
                  script: |
                      github.rest.issues.removeLabel({
--- a/.github/workflows/update-jitsi.yml
+++ b/.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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4

-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
              with:
                  cache: "yarn"
                  node-version: "lts/*"
--- a/.github/workflows/update-topics.yaml
+++ b/.github/workflows/update-topics.yaml
@@ -22,7 +22,7 @@ jobs:
        runs-on: ubuntu-24.04
        environment: Matrix
        steps:
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
              env:
                  HS_URL: ${{ secrets.BETABOT_HS_URL }}
                  LOBBY_ROOM_ID: ${{ secrets.ROOM_ID }}
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -13,7 +13,7 @@ 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"],
+    addons: ["@storybook/addon-docs", "@storybook/addon-designs"],
    framework: "@storybook/react-vite",
    core: {
        disableTelemetry: true,
@@ -36,11 +36,5 @@ const config: StorybookConfig = {
            },
        });
    },
-    refs: {
-        "compound-web": {
-            title: "Compound Web",
-            url: "https://element-hq.github.io/compound-web/",
-        },
-    },
 };
 export default config;
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,11 +1,12 @@
-import type { ArgTypes, Preview, Decorator, ReactRenderer, StrictArgs } from "@storybook/react-vite";
+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";
-import { StoryContext } from "storybook/internal/csf";

 export const globalTypes = {
    theme: {
@@ -58,9 +59,29 @@ const withThemeProvider: Decorator = (Story, context) => {
    );
 };

-async function languageLoader(context: StoryContext<ReactRenderer, StrictArgs>): Promise<void> {
-    await setLanguage(context.globals.language);
-}
+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 (
@@ -72,22 +93,14 @@ const withTooltipProvider: Decorator = (Story) => {

 const preview: Preview = {
    tags: ["autodocs"],
-    decorators: [withThemeProvider, withTooltipProvider],
+    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",
-        },
    },
-    loaders: [languageLoader],
 };

 export default preview;
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,128 +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
--- a/CONTRIBUTING.md
+++ b/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
--- a/6
+++ b/6
@@ -1,7 +1,7 @@
-# syntax=docker.io/docker/dockerfile:1.18-labs@sha256:79cdc14e1c220efb546ad14a8ebc816e3277cd72d27195ced5bebdd226dd1025
+# syntax=docker.io/docker/dockerfile:1.17-labs@sha256:9187104f31e3a002a8a6a3209ea1f937fb7486c093cbbde1e14b0fa0d7e4f1b5

 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:5e638ea282ab9f0224949e8cfc7bb4621710e5d21b19fc3cf6e8884fcb5839f0 AS builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:2d63e0f812d023c4c764e83d7e30dc94949304443ebc372d5c445e63a5ae49c1 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,7 +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:13d1e0acc26b7ce8a40d155473759387e04d1433e73726d4bb49c67bdb197fe5
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:e61b77b27c8f3124fad6d19e894ca5b603bcaf6a34a2df035511299dfa6fad35

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

 ### Practical guidelines for MVVM in element-web

-A first documentation and implementation of MVVM was done in [MVVM-v1.md](MVVM-v1.md). This v1 version is now deprecated and this document describes the current implementation.
-
 #### Model

 This is anywhere your data or business logic comes from. If your view model is accessing something simple exposed from `matrix-js-sdk`, then the sdk is your model. If you're using something more high level in element-web to get your data/logic (eg: `MemberListStore`), then that becomes your model.

-#### View
-
-1. Located in [`shared-components`](https://github.com/element-hq/element-web/tree/develop/src/shared-components). Develop it in storybook!
-2. Views are simple react components (eg: `FooView`).
-3. Views use [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore) internally where the view model is the external store.
-4. Views should define the interface of the view model they expect:
-
-    ```tsx
-    // Snapshot is the return type of your view model
-    interface FooViewSnapshot {
-        value: string;
-    }
-
-    // To call function on the view model
-    interface FooViewActions {
-        doSomething: () => void;
-    }
-
-    // ViewModel is a type defining the methods needed for `useSyncExternalStore`
-    // https://github.com/element-hq/element-web/blob/develop/src/shared-components/ViewModel.ts
-    type FooViewModel = ViewModel<FooViewSnapshot> & FooViewActions;
-
-    interface FooViewProps {
-        vm: FooViewModel;
-    }
-
-    function FooView({ vm }: FooViewProps) {
-        // useViewModel is a helper function that uses useSyncExternalStore under the hood
-        const { value } = useViewModel(vm);
-        return (
-            <button type="button" onClick={() => vm.doSomething()}>
-                {value}
-            </button>
-        );
-    }
-    ```
-
-5. Multiple views can share the same view model if necessary.
-6. A full example is available [here](https://github.com/element-hq/element-web/blob/develop/src/shared-components/audio/AudioPlayerView/AudioPlayerView.tsx)
-
 #### View Model

-1. A View model is a class extending [`BaseViewModel`](https://github.com/element-hq/element-web/blob/develop/src/viewmodels/base/BaseViewModel.ts).
-2. Implements the interface defined in the view (e.g `FooViewModel` in the example above).
-3. View models define a snapshot type that defines the data the view will consume. The snapshot is immutable and can only be changed by calling `this.snapshot.set(...)` in the view model. This will trigger a re-render in the view.
-
+1. View model is always a custom react hook named like `useFooViewModel()`.
+2. The return type of your view model (known as view state) must be defined as a typescript interface:
    ```ts
-    interface Props {
-        propsValue: string;
-    }
-
-    class FooViewModel extends BaseViewModel<FooViewSnapshot, Props> implements FooViewModel {
-        constructor(props: Props) {
-            // Call super with initial snapshot
-            super(props, { value: "initial" });
-        }
-
-        public doSomething() {
-            // Call this.snapshot.set to update the snapshot
-            this.snapshot.set({ value: "changed" });
-        }
+    inteface FooViewState {
+    	somethingUseful: string;
+    	somethingElse: BarType;
+    	update: () => Promise<void>
+    	...
    }
    ```
+3. Any react state that your UI needs must be in the view model.

-4. A full example is available [here](https://github.com/element-hq/element-web/blob/develop/src/viewmodels/audio/AudioPlayerViewModel.ts)
+#### View
+
+1. Views are simple react components (eg: `FooView`).
+2. Views usually start by calling the view model hook, eg:
+    ```tsx
+    const FooView: React.FC<IProps> = (props: IProps) => {
+    	const vm = useFooViewModel();
+    	....
+    	return(
+    		<div>
+    			{vm.somethingUseful}
+    		</div>
+    	);
+    }
+    ```
+3. Views are also allowed to accept the view model as a prop, eg:
+    ```tsx
+    const FooView: React.FC<IProps> = ({ vm }: IProps) => {
+    	....
+    	return(
+    		<div>
+    			{vm.somethingUseful}
+    		</div>
+    	);
+    }
+    ```
+4. Multiple views can share the same view model if necessary.

 ### Benefits

 1. MVVM forces a separation of concern i.e we will no longer have large react components that have a lot of state and rendering code mixed together. This improves code readability and makes it easier to introduce changes.
 2. Introduces the possibility of code reuse. You can reuse an old view model with a new view or vice versa.
 3. Adding to the point above, in future you could import element-web view models to your project and supply your own views thus creating something similar to the [hydrogen sdk](https://github.com/element-hq/hydrogen-web/blob/master/doc/SDK.md).
+
+### Example
+
+We started experimenting with MVVM in the redesigned memberlist, you can see the code [here](https://github.com/vector-im/element-web/blob/develop/src/components/views/rooms/MemberList/MemberListView.tsx).
--- a/docs/config.md
+++ b/docs/config.md
@@ -585,8 +585,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

--- a/docs/e2ee.md
+++ b/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

--- a/jest.config.ts
+++ b/jest.config.ts
@@ -41,9 +41,7 @@ const config: Config = {
        "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
        "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
    },
-    transformIgnorePatterns: [
-        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
-    ],
+    transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
    collectCoverageFrom: [
        "<rootDir>/src/**/*.{js,ts,tsx}",
        // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is
--- a/knip.ts
+++ b/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: [
@@ -39,18 +42,10 @@ export default {
        "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;
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.12.0",
+    "version": "1.11.108",
    "description": "Element: the future of secure communication",
    "author": "New Vector Ltd.",
    "repository": {
@@ -75,11 +75,11 @@
    "resolutions": {
        "**/pretty-format/react-is": "19.1.1",
        "@playwright/test": "1.54.2",
-        "@types/react": "19.1.14",
-        "@types/react-dom": "19.1.9",
+        "@types/react": "19.1.9",
+        "@types/react-dom": "19.1.7",
        "oidc-client-ts": "3.3.0",
        "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001745",
+        "caniuse-lite": "1.0.30001724",
        "testcontainers": "^11.0.0",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
@@ -96,9 +96,10 @@
        "@matrix-org/spec": "^1.7.0",
        "@sentry/browser": "^10.0.0",
        "@types/png-chunks-extract": "^1.0.2",
+        "@types/react-virtualized": "^9.21.30",
        "@vector-im/compound-design-tokens": "^6.0.0",
        "@vector-im/compound-web": "^8.1.2",
-        "@vector-im/matrix-wysiwyg": "2.40.0",
+        "@vector-im/matrix-wysiwyg": "2.39.0",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
        "@zxcvbn-ts/language-en": "^3.0.2",
@@ -116,7 +117,7 @@
        "emojibase-regex": "15.3.2",
        "escape-html": "^1.0.3",
        "file-saver": "^2.0.5",
-        "filesize": "11.0.13",
+        "filesize": "11.0.2",
        "github-markdown-css": "^5.5.1",
        "glob-to-regexp": "^0.4.1",
        "highlight.js": "^11.3.1",
@@ -142,7 +143,7 @@
        "opus-recorder": "^8.0.3",
        "pako": "^2.0.3",
        "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.268.6",
+        "posthog-js": "1.257.0",
        "qrcode": "1.5.4",
        "re-resizable": "6.11.2",
        "react": "^19.0.0",
@@ -150,17 +151,17 @@
        "react-blurhash": "^0.3.0",
        "react-dom": "^19.0.0",
        "react-focus-lock": "^2.5.1",
-        "react-merge-refs": "^3.0.2",
        "react-string-replace": "^1.1.1",
        "react-transition-group": "^4.4.1",
-        "react-virtuoso": "^4.14.0",
+        "react-virtualized": "^9.22.5",
+        "react-virtuoso": "^4.12.6",
        "rfc4648": "^1.4.0",
        "sanitize-filename": "^1.6.3",
        "sanitize-html": "2.17.0",
        "tar-js": "^0.3.0",
        "temporal-polyfill": "^0.3.0",
-        "ua-parser-js": "1.0.40",
-        "uuid": "^13.0.0",
+        "ua-parser-js": "^1.0.2",
+        "uuid": "^11.0.0",
        "what-input": "^5.2.10"
    },
    "devDependencies": {
@@ -185,14 +186,13 @@
        "@babel/preset-typescript": "^7.12.7",
        "@babel/runtime": "^7.12.5",
        "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.16.0",
-        "@element-hq/element-web-playwright-common": "^1.4.6",
+        "@element-hq/element-call-embedded": "0.14.1",
+        "@element-hq/element-web-playwright-common": "^1.4.4",
        "@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",
@@ -205,7 +205,6 @@
        "@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",
@@ -224,15 +223,15 @@
        "@types/node-fetch": "^2.6.2",
        "@types/pako": "^2.0.0",
        "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.14",
+        "@types/react": "19.1.9",
        "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.9",
+        "@types/react-dom": "19.1.7",
        "@types/react-transition-group": "^4.4.0",
        "@types/sanitize-html": "2.16.0",
-        "@types/sdp-transform": "^2.4.10",
        "@types/semver": "^7.5.8",
        "@types/tar-js": "^0.3.5",
        "@types/ua-parser-js": "^0.7.36",
+        "@types/uuid": "^10.0.0",
        "@typescript-eslint/eslint-plugin": "^8.19.0",
        "@typescript-eslint/parser": "^8.19.0",
        "babel-jest": "^29.0.0",
--- a/patches/@matrix-org+react-sdk-module-api+2.5.0.patch
+++ b/patches/@matrix-org+react-sdk-module-api+2.5.0.patch
@@ -11,42 +11,3 @@ index 917a7fc..a2710c6 100644
         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;
-     }
-   }, {
--- a/playwright/e2e/accessibility/keyboard-navigation.spec.ts
+++ b/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();
--- a/playwright/e2e/composer/CIDER.spec.ts
+++ b/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({
@@ -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();
-        });
    });
 });
--- a/playwright/e2e/create-room/create-room.spec.ts
+++ b/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);
+    });
+});
--- a/playwright/e2e/crypto/backups-mas.spec.ts
+++ b/playwright/e2e/crypto/backups-mas.spec.ts
@@ -49,7 +49,7 @@ test.describe("Encryption state after registration", () => {
            "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();
@@ -78,7 +78,7 @@ test.describe("Key backup reset from elsewhere", () => {
        await page.getByRole("button", { name: "Continue" }).click();
        await registerAccountMas(page, mailpitClient, testUsername, `${testUsername}@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();
--- a/playwright/e2e/crypto/crypto.spec.ts
+++ b/playwright/e2e/crypto/crypto.spec.ts
@@ -21,11 +21,12 @@ 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.getByRole("option", { name: bob.credentials.displayName }).click();
-    await expect(page.getByTestId("invite-dialog-input-wrapper").getByText("Bob")).toBeVisible();
+    await page.locator(".mx_InviteDialog_tile_nameStack_name").getByText("Bob").click();
+    await expect(
+        page.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText("Bob"),
+    ).toBeVisible();
    await page.getByRole("button", { name: "Go" }).click();
 };

@@ -146,29 +147,6 @@ test.describe("Cryptography", function () {
        }).toPass();
    });

-    // When the user resets their identity, key storage also gets enabled.
-    // Check that the toggle updates to show the correct state.
-    test("Key backup status updates after resetting identity", async ({ page, app, user: aliceCredentials }) => {
-        await app.client.bootstrapCrossSigning(aliceCredentials);
-
-        const encryptionTab = await app.settings.openUserSettings("Encryption");
-        const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
-        // Check that key storage starts off as disabled
-        expect(await keyStorageToggle.isChecked()).toBe(false);
-        // Find "the Reset cryptographic identity" button
-        await encryptionTab.getByRole("button", { name: "Reset cryptographic identity" }).click();
-
-        // Confirm
-        await encryptionTab.getByRole("button", { name: "Continue" }).click();
-
-        // Enter the password
-        await page.getByPlaceholder("Password").fill(aliceCredentials.password);
-        await page.getByRole("button", { name: "Continue" }).click();
-
-        // Key storage should now be enabled
-        expect(await keyStorageToggle.isChecked()).toBe(true);
-    });
-
    test(
        "creating a DM should work, being e2e-encrypted / user verification",
        { tag: "@screenshot" },
@@ -176,12 +154,11 @@ test.describe("Cryptography", function () {
            await app.client.bootstrapCrossSigning(aliceCredentials);
            await startDMWithBob(page, bob);
            // send first message
-            await page.getByRole("textbox", { name: "Send a message…" }).fill("Hey!");
-            await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
+            await page.getByRole("textbox", { name: "Send an unencrypted message…" }).fill("Hey!");
+            await page.getByRole("textbox", { name: "Send an unencrypted 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 expect(page.locator(".mx_MessageComposer_e2eIcon")).toMatchScreenshot("composer-e2e-icon-normal.png");

            await testMessages(page, bob, bobRoomId);
            await verify(app, bob);
--- a/playwright/e2e/crypto/decryption-failure-messages.spec.ts
+++ b/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
--- a/playwright/e2e/crypto/dehydration.spec.ts
+++ b/playwright/e2e/crypto/dehydration.spec.ts
@@ -38,7 +38,7 @@ test.describe("Dehydration", () => {
        // 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: "Proceed with reset" }).click();
        await page.getByRole("button", { name: "Continue" }).click();

        // Set up recovery
@@ -106,7 +106,7 @@ test.describe("Dehydration", () => {
        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 page.locator(".mx_AuthPage").getByRole("button", { name: "Reset all" }).click();
        await expect(
            page.getByRole("heading", { name: "Are you sure you want to reset your identity?" }),
        ).toBeVisible();
--- a/playwright/e2e/crypto/device-verification.spec.ts
+++ b/playwright/e2e/crypto/device-verification.spec.ts
@@ -36,13 +36,13 @@ 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;
@@ -146,8 +146,8 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
        );

        // Confirm that the bot user scanned successfully
-        await expect(infoDialog.getByText("Confirm that you see a green shield on your other device")).toBeVisible();
-        await infoDialog.getByRole("button", { name: "Yes, I see a green shield" }).click();
+        await expect(infoDialog.getByText("Almost there! Is your other device showing the same shield?")).toBeVisible();
+        await infoDialog.getByRole("button", { name: "Yes" }).click();
        await infoDialog.getByRole("button", { name: "Got it" }).click();

        // wait for the bot to see we have finished
@@ -201,33 +201,9 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
        await enterRecoveryKeyAndCheckVerified(page, app, recoveryKey);
    });

-    test("After cancelling verify with another device, I can try again #29882", async ({ page, app, credentials }) => {
-        // Regression test for https://github.com/element-hq/element-web/issues/29882
-
-        // Log in without verifying
-        await logIntoElement(page, credentials);
-        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");
-
-        // Start to verify with "Use another device" but cancel
-        const settings = await app.settings.openUserSettings("Encryption");
-        await settings.getByRole("button", { name: "Verify this device" }).click();
-        await page.getByRole("button", { name: "Use another device" }).click();
-        await page.locator("#mx_Dialog_Container").getByRole("button", { name: "Close dialog" }).click();
-
-        // Start again
-        await settings.getByRole("button", { name: "Verify this device" }).click();
-
-        // We should be offered to use another device again.
-        // (In the bug, we were immediately told that verification has been cancelled.)
-        await expect(page.getByRole("button", { name: "Use another device" })).toBeVisible();
-    });
-
    /** 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();
+        await page.getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();

        // Enter the recovery key
        const dialog = page.locator(".mx_Dialog");
@@ -270,7 +246,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
        // it should contain the device ID of the requesting device
        await expect(toast.getByText(`${aliceBotClient.credentials.deviceId} from `)).toBeVisible();
        // Accept
-        await toast.getByRole("button", { name: "Start verification" }).click();
+        await toast.getByRole("button", { name: "Verify Session" }).click();

        /* Click 'Start' to start SAS verification */
        await page.getByRole("button", { name: "Start" }).click();
@@ -285,7 +261,10 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
        /* And we're all done! */
        const infoDialog = page.locator(".mx_InfoDialog");
        await infoDialog.getByRole("button", { name: "They match" }).click();
-        await expect(infoDialog.getByText("Device verified")).toBeVisible();
+        // We don't assert the full string as the device name is unset on Synapse but set to the user ID on Dendrite
+        await expect(infoDialog.getByText(`You've successfully verified`)).toContainText(
+            `(${aliceBotClient.credentials.deviceId})`,
+        );
        await infoDialog.getByRole("button", { name: "Got it" }).click();
    });
 });
--- a/playwright/e2e/crypto/event-shields.spec.ts
+++ b/playwright/e2e/crypto/event-shields.spec.ts
@@ -14,7 +14,7 @@ import {
    createSecondBotDevice,
    createSharedRoomWithUser,
    enableKeyBackup,
-    logIntoElementAndVerify,
+    logIntoElement,
    logOutOfElement,
    verify,
    waitForDevices,
@@ -58,108 +58,108 @@ 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 toasts nagging us, otherwise they get in the way of clicking the room list
+            await page.getByRole("button", { name: "Dismiss" }).click();
+            await page.getByRole("button", { name: "Yes, dismiss" }).click();

-                await bob.sendEvent(testRoomId, null, "m.room.encrypted", {
-                    algorithm: "m.megolm.v1.aes-sha2",
-                    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 +195,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);
--- a/playwright/e2e/crypto/toasts.spec.ts
+++ b/playwright/e2e/crypto/toasts.spec.ts
@@ -8,7 +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 { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement } from "./utils";
 import { type Bot } from "../../pages/bot";

 test.describe("Key storage out of sync toast", () => {
@@ -18,12 +18,12 @@ 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();
@@ -65,10 +65,10 @@ test.describe("'Turn on key storage' toast", () => {
        const recoveryKey = res.recoveryKey;
        botClient = res.botClient;

-        await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);
+        await logIntoElement(page, credentials, recoveryKey.encodedPrivateKey);

        // We won't be prompted for crypto setup unless we have an e2e room, so make one
-        await page.getByRole("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();
@@ -126,7 +126,7 @@ test.describe("'Turn on key storage' toast", () => {
        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();
+        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();

        // And when we close that
        await page.getByRole("button", { name: "Close dialog" }).click();
@@ -153,7 +153,7 @@ test.describe("'Turn on key storage' toast", () => {
        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();
+        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();

        // And when we close that, see the toast, click Dismiss, and Yes, Dismiss
        await page.getByRole("button", { name: "Close dialog" }).click();
--- a/playwright/e2e/crypto/utils.ts
+++ b/playwright/e2e/crypto/utils.ts
@@ -206,42 +206,32 @@ 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 the user has set a recovery *passphrase*, they'll be prompted for that first and have to click
+        // through to enter the recovery key which is what we have here. If they haven't, they'll be prompted
+        // for a recovery key straight away. We click the button if it's there so this works in both cases.
+        if (await useSecurityKey.isVisible()) {
+            await useSecurityKey.click();
+        }
+        // Fill in the recovery key
+        await page.locator(".mx_Dialog").getByTitle("Recovery key").fill(securityKey);
+        await page.getByRole("button", { name: "Continue", disabled: false }).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,7 +262,7 @@ 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.getByRole("button", { name: "Verify with Recovery Key" }).click();
    await app.page.locator(".mx_Dialog").getByTitle("Recovery key").fill(securityKey);
    await app.page.getByRole("button", { name: "Continue", disabled: false }).click();
    await app.page.getByRole("button", { name: "Done" }).click();
@@ -310,9 +300,9 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
    const encryptionTab = await app.settings.openUserSettings("Encryption");

-    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
    if (!(await keyStorageToggle.isChecked())) {
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
    }

    await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
@@ -333,11 +323,11 @@ export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
 export async function disableKeyBackup(app: ElementAppPage): Promise<void> {
    const encryptionTab = await app.settings.openUserSettings("Encryption");

-    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
    if (await keyStorageToggle.isChecked()) {
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
        await encryptionTab.getByRole("button", { name: "Delete key storage" }).click();
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).isVisible();
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).isVisible();

        // Wait for the update to account data to stick
        await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -438,8 +428,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");

--- a/playwright/e2e/devtools/devtools.spec.ts
+++ b/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;
-            }`,
-        });
-    });
-});
--- a/playwright/e2e/devtools/upgraderoom.spec.ts
+++ b/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");
-        },
-    );
-});
--- a/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts
+++ b/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");
-        },
-    );
-});
--- a/playwright/e2e/invite/invite-dialog.spec.ts
+++ b/playwright/e2e/invite/invite-dialog.spec.ts
@@ -50,11 +50,15 @@ test.describe("Invite dialog", function () {
        await expect(other.locator(".mx_InviteDialog_identityServer")).toBeVisible();

        // Assert that the bot id is rendered properly
-        await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials.userId)).toBeVisible();
+        await expect(
+            other.locator(".mx_InviteDialog_tile_nameStack_userId").getByText(bot.credentials.userId),
+        ).toBeVisible();

-        await other.getByRole("option", { name: botName }).click();
+        await other.locator(".mx_InviteDialog_tile_nameStack_name").getByText(botName).click();

-        await expect(other.getByTestId("invite-dialog-input-wrapper").getByText(botName)).toBeVisible();
+        await expect(
+            other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
+        ).toBeVisible();

        // Take a snapshot of the invite dialog with a user pill
        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-room-with-user-pill.png");
@@ -73,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
@@ -90,10 +93,14 @@ test.describe("Invite dialog", function () {

            await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);

-            await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials.userId)).toBeVisible();
-            await other.getByRole("option", { name: botName }).click();
+            await expect(
+                other.locator(".mx_InviteDialog_tile_nameStack").getByText(bot.credentials.userId),
+            ).toBeVisible();
+            await other.locator(".mx_InviteDialog_tile_nameStack").getByText(botName).click();

-            await expect(other.getByTestId("invite-dialog-input-wrapper").getByText(botName)).toBeVisible();
+            await expect(
+                other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
+            ).toBeVisible();

            // Take a snapshot of the invite dialog with a user pill
            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-with-user-pill.png");
--- a/playwright/e2e/knock/knock-into-room.spec.ts
+++ b/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();
--- a/playwright/e2e/left-panel/left-panel.spec.ts
+++ b/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();
        }
    });
 });
--- a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
@@ -68,7 +68,7 @@ test.describe("Room list filters and sort", () => {
        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" });
+        const oldRoomTile = roomListView.getByRole("gridcell", { name: "Open room Old Room" });
        await expect(oldRoomTile).toBeVisible();

        /*
@@ -139,9 +139,8 @@ test.describe("Room list filters and sort", () => {

            // 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);
+            const tile = roomListView.getByRole("gridcell", { name: "Open room room-non-fav" });
+            await tile.scrollIntoViewIfNeeded();
            await tile.click();

            // Enable Favourite filter
@@ -152,7 +151,7 @@ test.describe("Room list filters and sort", () => {

            // Ensure the room list is not scrolled
            const isScrolledDown = await page
-                .getByRole("listbox", { name: "Room list", exact: true })
+                .getByRole("grid", { name: "Room list" })
                .evaluate((e) => e.scrollTop !== 0);
            expect(isScrolledDown).toStrictEqual(false);
        });
@@ -228,37 +227,37 @@ test.describe("Room list filters and sort", () => {

            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(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(4);
            await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");

            await primaryFilters.getByRole("option", { name: "People" }).click();
-            await expect(roomList.getByRole("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 expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+            await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=gridcell").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 expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
+            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+            await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
+            await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
+            await expect(roomList.getByRole("gridcell", { name: "Low prio room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=gridcell").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 expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=gridcell").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 expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=gridcell").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 expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);

            await getFilterCollapseButton(page).click();
            await expect(primaryFilters.locator("role=option").first()).toHaveText("Invites");
@@ -269,7 +268,6 @@ test.describe("Room list filters and sort", () => {
            { 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);
@@ -278,20 +276,20 @@ test.describe("Room list filters and sort", () => {
                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();
+                await roomListView.getByRole("gridcell", { name: "Open room favourite room" }).click();

                // Let's make the bot send a new message in both rooms
                await bot.sendMessage(unReadDmId, "Hello!");
                await bot.sendMessage(unReadRoomId, "Hello!");

                // Let's activate the unread filter now
-                await primaryFilters.getByRole("option", { name: "Unread" }).click();
+                await page.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" });
+                const unreadDm = roomListView.getByRole("gridcell", { name: "Open room unread room" });
                await expect(unreadDm).toBeVisible();
                await expect(unreadDm).toMatchScreenshot("unread-dm.png");
-                await expect(roomListView.getByRole("option", { name: "Open room unread dm" })).not.toBeVisible();
+                await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
            },
        );

@@ -301,7 +299,7 @@ test.describe("Room list filters and sort", () => {
            await getRoomOptionsMenu(page).click();
            await page.getByRole("menuitemradio", { name: "A-Z" }).click();

-            await expect(roomListView.getByRole("option").first()).toHaveText(/empty room/);
+            await expect(roomListView.getByRole("gridcell").first()).toHaveText(/empty room/);
        });

        test("should move room to the top on message when sorting by activity", async ({ page, bot }) => {
@@ -309,7 +307,7 @@ test.describe("Room list filters and sort", () => {

            await bot.sendMessage(unReadDmId, "Hello!");

-            await expect(roomListView.getByRole("option").first()).toHaveText(/unread dm/);
+            await expect(roomListView.getByRole("gridcell").first()).toHaveText(/unread dm/);
        });
    });

@@ -322,13 +320,6 @@ test.describe("Room list filters and sort", () => {
            return page.getByTestId("empty-room-list");
        }

-        test("should render the primary filters", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            const primaryFilters = getPrimaryFilters(page);
-            await expect(primaryFilters).toMatchScreenshot("collapsed-primary-filters.png");
-            await getFilterExpandButton(page).click();
-            await expect(primaryFilters).toMatchScreenshot("expanded-primary-filters.png");
-        });
-
        test(
            "should render the default placeholder when there is no filter",
            { tag: "@screenshot" },
--- a/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts
@@ -38,7 +38,7 @@ test.describe("Room list panel", () => {
    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");
    });

--- a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
@@ -41,38 +41,33 @@ test.describe("Room list", () => {
            }
        });

-        test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
+        test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
            const roomListView = getRoomList(page);
-            await expect(roomListView.getByRole("option", { name: "Open room room29" })).toBeVisible();
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room29" })).toBeVisible();
            await expect(roomListView).toMatchScreenshot("room-list.png");

            // Put focus on the room list
-            await roomListView.getByRole("option", { name: "Open room room29" }).click();
+            await roomListView.getByRole("gridcell", { 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 app.scrollListToBottom(page.locator(".mx_RoomList_List"));
            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 roomListView.getByRole("gridcell", { 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 roomListView.getByRole("gridcell", { 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" });
+            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
            await roomItem.hover();

            await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
@@ -102,7 +97,7 @@ test.describe("Room list", () => {
        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" });
+            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
            await roomItem.hover();

            await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
@@ -122,10 +117,10 @@ test.describe("Room list", () => {
            await expect(roomItem.getByTestId("notification-decoration")).not.toBeVisible();

            // Put focus on the room list
-            await roomListView.getByRole("option", { name: "Open room room28" }).click();
+            await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();

            // Scroll to the end of the room list
-            await app.scrollListToBottom(roomListView);
+            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));

            // The room decoration should have the muted icon
            await expect(roomItem.getByTestId("notification-decoration")).toBeVisible();
@@ -144,25 +139,25 @@ test.describe("Room list", () => {
        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();
+            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
            // Scroll to the end of the room list
-            await app.scrollListToBottom(roomListView);
+            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));

-            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
-            await roomListView.getByRole("option", { name: "Open room room0" }).click();
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+            await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();

            const filters = page.getByRole("listbox", { name: "Room list filters" });
            await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("option", { name: "Open room room0" })).not.toBeVisible();
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).not.toBeVisible();

            await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
        });

        test.describe("Shortcuts", () => {
            test("should select the next room", async ({ page, app, user }) => {
                const roomListView = getRoomList(page);
-                await roomListView.getByRole("option", { name: "Open room room29" }).click();
+                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
                await page.keyboard.press("Alt+ArrowDown");

                await expect(page.getByRole("heading", { name: "room28", level: 1 })).toBeVisible();
@@ -170,7 +165,7 @@ test.describe("Room list", () => {

            test("should select the previous room", async ({ page, app, user }) => {
                const roomListView = getRoomList(page);
-                await roomListView.getByRole("option", { name: "Open room room28" }).click();
+                await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
                await page.keyboard.press("Alt+ArrowUp");

                await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
@@ -178,7 +173,7 @@ test.describe("Room list", () => {

            test("should select the last room", async ({ page, app, user }) => {
                const roomListView = getRoomList(page);
-                await roomListView.getByRole("option", { name: "Open room room29" }).click();
+                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
                await page.keyboard.press("Alt+ArrowUp");

                await expect(page.getByRole("heading", { name: "room0", level: 1 })).toBeVisible();
@@ -192,10 +187,7 @@ test.describe("Room list", () => {
                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 roomListView.getByRole("gridcell", { name: "Open room room20" }).click();

                await page.keyboard.press("Alt+Shift+ArrowDown");

@@ -207,8 +199,8 @@ test.describe("Room list", () => {
            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" });
+                const room29 = roomListView.getByRole("gridcell", { name: "Open room room29" });
+                const room28 = roomListView.getByRole("gridcell", { name: "Open room room28" });

                // open the room
                await room29.click();
@@ -227,7 +219,7 @@ test.describe("Room list", () => {

            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 room29 = roomListView.getByRole("gridcell", { name: "Open room room29" });
                const moreButton = room29.getByRole("button", { name: "More options" });
                const notificationButton = room29.getByRole("button", { name: "Notification options" });

@@ -252,26 +244,6 @@ test.describe("Room list", () => {
                // Focus should be back on the notification button
                await expect(notificationButton).toBeFocused();
            });
-
-            test("should navigate to the top and then bottom of the room list", async ({ page, app, user }) => {
-                const roomListView = getRoomList(page);
-
-                const topRoom = roomListView.getByRole("option", { name: "Open room room29" });
-
-                // open the room
-                await topRoom.click();
-                // put focus back on the room list item
-                await topRoom.click();
-                await expect(topRoom).toBeFocused();
-
-                await page.keyboard.press("End");
-                const bottomRoom = roomListView.getByRole("option", { name: "Open room room0" });
-                await expect(bottomRoom).toBeFocused();
-
-                await page.keyboard.press("Home");
-                const topRoomAgain = roomListView.getByRole("option", { name: "Open room room29" });
-                await expect(topRoomAgain).toBeFocused();
-            });
        });
    });

@@ -286,7 +258,7 @@ test.describe("Room list", () => {
            await page.getByRole("button", { name: "User menu" }).focus();

            const roomListView = getRoomList(page);
-            const publicRoom = roomListView.getByRole("option", { name: "public room" });
+            const publicRoom = roomListView.getByRole("gridcell", { name: "public room" });

            await expect(publicRoom).toBeVisible();
            await expect(publicRoom).toMatchScreenshot("room-list-item-public.png");
@@ -296,7 +268,7 @@ test.describe("Room list", () => {
            // @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" });
+            const publicRoom = roomListView.getByRole("gridcell", { name: "low priority room" });

            // Make room low priority
            await publicRoom.hover();
@@ -321,7 +293,7 @@ test.describe("Room list", () => {
            await page.getByRole("button", { name: "Create video room" }).click();

            const roomListView = getRoomList(page);
-            const videoRoom = roomListView.getByRole("option", { name: "video room" });
+            const videoRoom = roomListView.getByRole("gridcell", { name: "video room" });

            // focus the user menu to avoid to have hover decoration
            await page.getByRole("button", { name: "User menu" }).focus();
@@ -340,7 +312,7 @@ test.describe("Room list", () => {
                invite: [user.userId],
                is_direct: true,
            });
-            const invitedRoom = roomListView.getByRole("option", { name: "invited room" });
+            const invitedRoom = roomListView.getByRole("gridcell", { name: "invited room" });
            await expect(invitedRoom).toBeVisible();
            await expect(invitedRoom).toMatchScreenshot("room-list-item-invited.png");
        });
@@ -355,7 +327,7 @@ test.describe("Room list", () => {
            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" });
+            const room = roomListView.getByRole("gridcell", { name: "2 notifications" });
            await expect(room).toBeVisible();
            await expect(room.getByTestId("notification-decoration")).toHaveText("2");
            await expect(room).toMatchScreenshot("room-list-item-notification.png");
@@ -386,7 +358,7 @@ test.describe("Room list", () => {
            );
            await bot.sendMessage(roomId, "I am a robot. Beep.");

-            const room = roomListView.getByRole("option", { name: "mention" });
+            const room = roomListView.getByRole("gridcell", { name: "mention" });
            await expect(room).toBeVisible();
            await expect(room).toMatchScreenshot("room-list-item-mention.png");
        });
@@ -407,7 +379,7 @@ test.describe("Room list", () => {
            await bot.joinRoom(roomId);
            await bot.sendMessage(roomId, "I am a robot. Beep.");

-            const room = roomListView.getByRole("option", { name: "activity" });
+            const room = roomListView.getByRole("gridcell", { name: "activity" });
            await expect(room.getByText("I am a robot. Beep.")).toBeVisible();
            await expect(room).toMatchScreenshot("room-list-item-message-preview.png");
        });
@@ -434,7 +406,7 @@ test.describe("Room list", () => {
            await app.viewRoomById(otherRoomId);
            await bot.sendMessage(roomId, "I am a robot. Beep.");

-            const room = roomListView.getByRole("option", { name: "activity" });
+            const room = roomListView.getByRole("gridcell", { name: "activity" });
            await expect(room.getByTestId("notification-decoration")).toBeVisible();
            await expect(room).toMatchScreenshot("room-list-item-activity.png");
        });
@@ -446,7 +418,7 @@ test.describe("Room list", () => {
            await app.client.inviteUser(roomId, bot.credentials.userId);
            await bot.joinRoom(roomId);

-            const room = roomListView.getByRole("option", { name: "mark as unread" });
+            const room = roomListView.getByRole("gridcell", { name: "mark as unread" });
            await room.hover();
            await room.getByRole("button", { name: "More Options" }).click();
            await page.getByRole("menuitem", { name: "mark as unread" }).click();
@@ -469,7 +441,7 @@ test.describe("Room list", () => {
            await page.getByText("Off").click();
            await app.settings.closeDialog();

-            const room = roomListView.getByRole("option", { name: "silent" });
+            const room = roomListView.getByRole("gridcell", { name: "silent" });
            await expect(room.getByTestId("notification-decoration")).toBeVisible();
            await expect(room).toMatchScreenshot("room-list-item-silent.png");
        });
--- a/playwright/e2e/location/location.spec.ts
+++ b/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");
-        },
-    );
 });
--- a/playwright/e2e/login/login-consent.spec.ts
+++ b/playwright/e2e/login/login-consent.spec.ts
@@ -186,7 +186,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 +219,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,10 +254,10 @@ 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 ({
@@ -274,18 +274,18 @@ test.describe("Login", () => {
                    // 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();
+                    let h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
+                    await expect(h1).toBeVisible();

-                    // Click "Use another device"
-                    await page.getByRole("button", { name: "Use another device" }).click();
+                    // Click "Verify with another device"
+                    await page.getByRole("button", { name: "Verify with another device" }).click();

                    // Cancel the new dialog
                    await page.getByRole("button", { name: "Close dialog" }).click();

                    // Check that we are still being asked to verify
-                    h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
-                    await expect(h2).toBeVisible();
+                    h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
+                    await expect(h1).toBeVisible();
                });
            });

@@ -303,18 +303,18 @@ 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();

                // Start the reset process
-                await page.getByRole("button", { name: "Can't confirm?" }).click();
+                await page.getByRole("button", { name: "Proceed with reset" }).click();

                // First try cancelling and restarting
                await page.getByRole("button", { name: "Cancel" }).click();
-                await page.getByRole("button", { name: "Can't confirm?" }).click();
+                await page.getByRole("button", { name: "Proceed with reset" }).click();

                // Then click outside the dialog and restart
                await page.getByRole("link", { name: "Powered by Matrix" }).click({ force: true });
-                await page.getByRole("button", { name: "Can't confirm?" }).click();
+                await page.getByRole("button", { name: "Proceed with reset" }).click();

                // Finally we actually continue
                await page.getByRole("button", { name: "Continue" }).click();
--- a/playwright/e2e/oidc/oidc-native.spec.ts
+++ b/playwright/e2e/oidc/oidc-native.spec.ts
@@ -95,6 +95,10 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
            const result = await mas.manage("kill-sessions", userId);
            expect(result.output).toContain("Ended 1 active OAuth 2.0 session");

+            // Workaround for Synapse's 2 minute cache on MAS token validity
+            // (https://github.com/element-hq/synapse/pull/18231)
+            await homeserver.restart();
+
            await page.goto("http://localhost:8080");
            await expect(
                page.getByText("For security, this session has been signed out. Please sign in again."),
@@ -129,8 +133,8 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
        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();
+        // We should be in (we see an error because we have no recovery key).
+        await expect(page.getByText("Unable to verify this device")).toBeVisible();
    });

    test.describe("with force_verification on", () => {
@@ -162,7 +166,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
            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();
+            await expect(page.getByText("Unable to verify this device")).toBeVisible();

            // And there should be no way to close this prompt
            await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
@@ -210,7 +214,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
                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();
+                await page.getByRole("button", { name: "Verify with another device" }).click();

                // And then cancel it
                await page.getByRole("button", { name: "Close dialog" }).click();
@@ -227,8 +231,8 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 * 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: "Start verification" }).click();
+    await deviceToVerifyPage.getByRole("button", { name: "Verify with another device" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "Verify session" }).click();
    await alreadyVerifiedDevicePage.getByRole("button", { name: "Start" }).click();
    await alreadyVerifiedDevicePage.getByRole("button", { name: "They match" }).click();
    await deviceToVerifyPage.getByRole("button", { name: "They match" }).click();
--- a/playwright/e2e/permalinks/permalinks.spec.ts
+++ b/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);
-    });
-});
--- a/playwright/e2e/read-receipts/index.ts
+++ b/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);
        }
    }
 }
--- a/playwright/e2e/read-receipts/read-receipts.spec.ts
+++ b/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}`);
--- a/playwright/e2e/read-receipts/room-list-order.spec.ts
+++ b/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();

--- a/playwright/e2e/release-announcement/index.ts
+++ b/playwright/e2e/release-announcement/index.ts
@@ -30,8 +30,9 @@ export class Helpers {
    /**
     * Get the release announcement with the given name.
     * @param name
+     * @private
     */
-    public getReleaseAnnouncement(name: string) {
+    private getReleaseAnnouncement(name: string) {
        return this.page.getByRole("dialog", { name });
    }

@@ -54,6 +55,16 @@ export class Helpers {
    assertReleaseAnnouncementIsNotVisible(name: string) {
        return expect(this.getReleaseAnnouncement(name)).not.toBeVisible();
    }
+
+    /**
+     * Mark the release announcement with the given name as read.
+     * If the release announcement is not visible, this will throw an error.
+     * @param name
+     */
+    async markReleaseAnnouncementAsRead(name: string) {
+        const dialog = this.getReleaseAnnouncement(name);
+        await dialog.getByRole("button", { name: "Ok" }).click();
+    }
 }

 export { expect };
--- a/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
+++ b/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
@@ -22,36 +22,27 @@ test.describe("Release announcement", () => {
            await app.viewRoomById(roomId);
            await use({ roomId });
        },
-        labsFlags: ["feature_new_room_list"],
    });

    test(
-        "should display the new room list release announcement",
+        "should display the pinned messages release announcement",
        { tag: "@screenshot" },
        async ({ page, app, room, util }) => {
-            // dismiss the toast so the announcement appears
-            await page.getByRole("button", { name: "Dismiss" }).click();
+            await app.toggleRoomInfoPanel();

-            const newSoundsName = "We’ve refreshed your sounds";
-            // The new sounds release announcement should be displayed
-            await util.assertReleaseAnnouncementIsVisible(newSoundsName);
-            // Hide the new sounds release announcement
-            const newSoundsDialog = util.getReleaseAnnouncement(newSoundsName);
-            await newSoundsDialog.getByRole("button", { name: "OK" }).click();
+            const name = "All new pinned messages";

-            const newRoomListName = "Chats has a new look!";
-            // The new room list release announcement should be displayed
-            await util.assertReleaseAnnouncementIsVisible(newRoomListName);
-            // Hide the new room list release announcement
-            const dialog = util.getReleaseAnnouncement(newRoomListName);
-            await dialog.getByRole("button", { name: "Next" }).click();
-
-            await util.assertReleaseAnnouncementIsNotVisible(newRoomListName);
+            // The release announcement should be displayed
+            await util.assertReleaseAnnouncementIsVisible(name);
+            // Hide the release announcement
+            await util.markReleaseAnnouncementAsRead(name);
+            await util.assertReleaseAnnouncementIsNotVisible(name);

            await page.reload();
-            await expect(page.getByRole("button", { name: "Room options" })).toBeVisible();
-            // Check that once the release announcements has been marked as viewed, it does not appear again
-            await util.assertReleaseAnnouncementIsNotVisible(newRoomListName);
+            await app.toggleRoomInfoPanel();
+            await expect(page.getByRole("menuitem", { name: "Pinned messages" })).toBeVisible();
+            // Check that once the release announcement has been marked as viewed, it does not appear again
+            await util.assertReleaseAnnouncementIsNotVisible(name);
        },
    );
 });
--- a/playwright/e2e/right-panel/file-panel.spec.ts
+++ b/playwright/e2e/right-panel/file-panel.spec.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import { type Page } from "@playwright/test";
+import { type Download, type Page } from "@playwright/test";

 import { test, expect } from "../../element-web-test";
 import { viewRoomSummaryByName } from "./utils";
@@ -189,13 +189,23 @@ test.describe("FilePanel", () => {

            const link = imageBody.locator(".mx_MFileBody_download a");

-            const downloadPromise = page.waitForEvent("download");
+            const newPagePromise = context.waitForEvent("page");
+
+            const downloadPromise = new Promise<Download>((resolve) => {
+                page.once("download", resolve);
+            });

            // Click the anchor link (not the image itself)
            await link.click();

-            const download = await downloadPromise;
-            expect(download.suggestedFilename()).toBe("riot.png");
+            const newPage = await newPagePromise;
+            // XXX: Clicking the link opens the image in a new tab on some browsers rather than downloading
+            await expect(newPage)
+                .toHaveURL(/.+\/_matrix\/media\/\w+\/download\/localhost\/\w+/)
+                .catch(async () => {
+                    const download = await downloadPromise;
+                    expect(download.suggestedFilename()).toBe("riot.png");
+                });
        });
    });
 });
--- a/playwright/e2e/room/create-room.spec.ts
+++ b/playwright/e2e/room/create-room.spec.ts
@@ -1,113 +0,0 @@
-/*
-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 { SettingLevel } from "../../../src/settings/SettingLevel";
-import { UIFeature } from "../../../src/settings/UIFeature";
-import { test, expect } from "../../element-web-test";
-
-const name = "Test room";
-const topic = "A decently explanatory topic for a test room.";
-
-test.describe("Create Room", () => {
-    test.use({ displayName: "Jim" });
-
-    test(
-        "should create a public room with name, topic & address set",
-        { tag: "@screenshot" },
-        async ({ page, user, app, axe }) => {
-            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-create-room-standard");
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            // Snapshot it
-            await expect(dialog).toMatchScreenshot("create-room.png");
-
-            // Submit
-            await dialog.getByRole("button", { name: "Create room" }).click();
-
-            await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-standard:${user.homeServer}`));
-            const header = page.locator(".mx_RoomHeader");
-            await expect(header).toContainText(name);
-        },
-    );
-
-    test("should allow us to start a chat and show encryption state", async ({ page, user, app }) => {
-        await page.getByRole("button", { name: "Add", exact: true }).click();
-        await page.getByRole("menuitem", { name: "Start chat" }).click();
-
-        await page.getByTestId("invite-dialog-input").fill(user.userId);
-
-        await page.getByRole("button", { name: "Go" }).click();
-
-        await expect(page.getByText("Encryption enabled")).toBeVisible();
-        await expect(page.getByText("Send your first message to")).toBeVisible();
-
-        const composer = page.getByRole("region", { name: "Message composer" });
-        await expect(composer.getByRole("textbox", { name: "Send a message…" })).toBeVisible();
-    });
-
-    test("should create a video room", { tag: "@screenshot" }, async ({ page, user, app }) => {
-        await app.settings.setValue("feature_video_rooms", null, SettingLevel.DEVICE, true);
-
-        const dialog = await app.openCreateRoomDialog("New video room");
-        // 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-create-room-video");
-        // Snapshot it
-        await expect(dialog).toMatchScreenshot("create-video-room.png");
-
-        // Submit
-        await dialog.getByRole("button", { name: "Create video room" }).click();
-
-        await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-video:${user.homeServer}`));
-        const header = page.locator(".mx_RoomHeader");
-        await expect(header).toContainText(name);
-    });
-
-    test.describe("Should hide public room option if not allowed", () => {
-        test.use({
-            config: {
-                setting_defaults: {
-                    [UIFeature.AllowCreatingPublicRooms]: false,
-                },
-            },
-        });
-
-        test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app, axe }) => {
-            const dialog = await app.openCreateRoomDialog();
-            // Fill name & topic
-            await dialog.getByRole("textbox", { name: "Name" }).fill(name);
-            await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            // Snapshot it
-            await expect(dialog).toMatchScreenshot("create-room-no-public.png");
-
-            // Submit
-            await dialog.getByRole("button", { name: "Create room" }).click();
-
-            await expect(page).toHaveURL(new RegExp(`/#/room/!.+`));
-            const header = page.locator(".mx_RoomHeader");
-            await expect(header).toContainText(name);
-        });
-    });
-});
--- a/playwright/e2e/room/room-header.spec.ts
+++ b/playwright/e2e/room/room-header.spec.ts
@@ -15,11 +15,6 @@ import { type ElementAppPage } from "../../pages/ElementAppPage";
 test.describe("Room Header", () => {
    test.use({
        displayName: "Sakura",
-        config: {
-            features: {
-                feature_new_room_list: false,
-            },
-        },
    });

    test.describe("with feature_notifications enabled", () => {
@@ -28,7 +23,7 @@ test.describe("Room Header", () => {
        });
        test("should render default buttons properly", { tag: "@screenshot" }, async ({ page, app, user }) => {
            await app.client.createRoom({ name: "Test Room" });
-            await app.viewRoomByNameOnOldRoomList("Test Room");
+            await app.viewRoomByName("Test Room");

            const header = page.locator(".mx_RoomHeader");

@@ -42,8 +37,11 @@ test.describe("Room Header", () => {
            await expect(header.locator(".mx_FacePile")).toBeVisible();

            // There should be both a voice and a video call button
-            await expect(header.getByRole("button", { name: "Video call" })).toBeVisible();
-            await expect(header.getByRole("button", { name: "Voice call" })).toBeVisible();
+            // but they'll be disabled
+            const callButtons = header.getByRole("button", { name: "There's no one here to call" });
+            await expect(callButtons).toHaveCount(2);
+            await expect(callButtons.first()).toBeVisible();
+            await expect(callButtons.last()).toBeVisible();

            await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
            await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
@@ -66,7 +64,7 @@ test.describe("Room Header", () => {
                    "officia deserunt mollit anim id est laborum.";

                await app.client.createRoom({ name: LONG_ROOM_NAME });
-                await app.viewRoomByNameOnOldRoomList(LONG_ROOM_NAME);
+                await app.viewRoomByName(LONG_ROOM_NAME);

                const header = page.locator(".mx_RoomHeader");
                // Wait until the room name is set
@@ -91,7 +89,7 @@ test.describe("Room Header", () => {

        test("should render room header icon correctly", { tag: "@screenshot" }, async ({ page, app, user }) => {
            await app.client.createRoom({ name: "Test Room", visibility: "public" as Visibility });
-            await app.viewRoomByNameOnOldRoomList("Test Room");
+            await app.viewRoomByName("Test Room");

            const header = page.locator(".mx_RoomHeader");

@@ -111,7 +109,7 @@ test.describe("Room Header", () => {

            await page.getByRole("button", { name: "Create video room" }).click();

-            await app.viewRoomByNameOnOldRoomList("Test video room");
+            await app.viewRoomByName("Test video room");
        };

        test.describe("and with feature_notifications enabled", () => {
--- a/playwright/e2e/room_options/marked_unread.spec.ts
+++ b/playwright/e2e/room_options/marked_unread.spec.ts
@@ -34,7 +34,7 @@ test.describe("Mark as Unread", () => {
        await bot.sendMessage(roomId, "I am a robot. Beep.");

        // Regular notification on new message
-        await expect(page.getByLabel(`Open room ${TEST_ROOM_NAME} with 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(TEST_ROOM_NAME + " 1 unread message.")).toBeVisible();
        await expect(page).toHaveTitle("Element [1]");

        await page.goto("/#/room/" + roomId);
@@ -48,12 +48,9 @@ test.describe("Mark as Unread", () => {

        const roomTile = page.getByLabel(TEST_ROOM_NAME);
        await roomTile.focus();
-        await roomTile.getByRole("button", { name: "More Options" }).click();
+        await roomTile.getByRole("button", { name: "Room 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(roomTile.getByTestId("notification-decoration")).toBeVisible();
+        await expect(page.getByLabel(TEST_ROOM_NAME + " Unread messages.")).toBeVisible();
    });
 });
--- a/playwright/e2e/settings/appearance-user-settings-tab/index.ts
+++ b/playwright/e2e/settings/appearance-user-settings-tab/index.ts
@@ -85,7 +85,7 @@ class Helpers {
     * Return the system theme toggle
     */
    getMatchSystemThemeCheckbox() {
-        return this.getThemePanel().getByRole("switch", { name: "Match system theme" });
+        return this.getThemePanel().getByRole("checkbox", { name: "Match system theme" });
    }

    /**
@@ -219,7 +219,7 @@ class Helpers {
     * Return the compact layout checkbox
     */
    getCompactLayoutCheckbox() {
-        return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
+        return this.getMessageLayoutPanel().getByRole("checkbox", { name: "Show compact text and messages" });
    }

    /**
--- a/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
+++ b/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
@@ -117,7 +117,7 @@ test.describe("Encryption tab", () => {
            await verifySession(app, recoveryKey.encodedPrivateKey);
            await util.openEncryptionTab();

-            await page.getByRole("switch", { name: "Allow key storage" }).click();
+            await page.getByRole("checkbox", { name: "Allow key storage" }).click();

            await expect(
                page.getByRole("heading", { name: "Are you sure you want to turn off key storage and delete it?" }),
@@ -136,7 +136,7 @@ test.describe("Encryption tab", () => {

            await page.getByRole("button", { name: "Delete key storage" }).click();

-            await expect(page.getByRole("switch", { name: "Allow key storage" })).not.toBeChecked();
+            await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();

            for (const prom of deleteRequestPromises) {
                const request = await prom;
@@ -160,15 +160,15 @@ test.describe("Encryption tab", () => {

            // We will reset our identity
            await settings.getByRole("button", { name: "Verify this device" }).click();
-            await page.getByRole("button", { name: "Can't confirm?" }).click();
+            await page.getByRole("button", { name: "Proceed with reset" }).click();

            // First try cancelling and restarting
            await page.getByRole("button", { name: "Cancel" }).click();
-            await page.getByRole("button", { name: "Can't confirm?" }).click();
+            await page.getByRole("button", { name: "Proceed with reset" }).click();

            // Then click outside the dialog and restart
            await page.locator("li").filter({ hasText: "Encryption" }).click({ force: true });
-            await page.getByRole("button", { name: "Can't confirm?" }).click();
+            await page.getByRole("button", { name: "Proceed with reset" }).click();

            // Finally we actually continue
            await page.getByRole("button", { name: "Continue" }).click();
--- a/playwright/e2e/settings/encryption-user-tab/index.ts
+++ b/playwright/e2e/settings/encryption-user-tab/index.ts
@@ -43,7 +43,7 @@ class Helpers {
     */
    async verifyDevice(recoveryKey: GeneratedSecretStorageKey) {
        // Select the security phrase
-        await this.page.getByRole("button", { name: "Use recovery key" }).click();
+        await this.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
        await this.enterRecoveryKey(recoveryKey);
        await this.page.getByRole("button", { name: "Done" }).click();
    }
@@ -104,10 +104,7 @@ class Helpers {

        const clipboardContent = await this.app.getClipboard();
        await dialog.getByRole("textbox").fill(clipboardContent);
-        const button = dialog.getByRole("button", { name: confirmButtonLabel });
-        await button.click();
-        // Button should disable immediately after clicking.
-        await expect(button).toBeDisabled();
+        await dialog.getByRole("button", { name: confirmButtonLabel }).click();
        await expect(this.getEncryptionRecoverySection()).toMatchScreenshot("default-recovery.png");
    }
 }
--- a/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts
+++ b/playwright/e2e/settings/notifications/notifications-settings-2-tab.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";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-
-test.describe("Notifications 2 tab", () => {
-    test.use({
-        displayName: "Alice",
-    });
-
-    test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
-        await app.settings.setValue("feature_notification_settings2", null, SettingLevel.DEVICE, true);
-        await page.setViewportSize({ width: 1024, height: 2000 });
-        const settings = await app.settings.openUserSettings("Notifications");
-
-        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-        await expect(axe).toHaveNoViolations();
-        await expect(settings).toMatchScreenshot("standard-notifications-2-settings.png", {
-            // Mask the mxid.
-            mask: [settings.locator("#mx_NotificationSettings2_MentionCheckbox span")],
-        });
-    });
-});
--- a/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts
+++ b/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts
@@ -1,25 +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("Notifications tab", () => {
-    test.use({
-        displayName: "Alice",
-    });
-
-    test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
-        await page.setViewportSize({ width: 1024, height: 1400 });
-        const settings = await app.settings.openUserSettings("Notifications");
-        await settings.getByLabel("Enable notifications for this account").check();
-        await settings.getByLabel("Enable notifications for this device").check();
-
-        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-        await expect(axe).toHaveNoViolations();
-        await expect(settings).toMatchScreenshot("standard-notification-settings.png");
-    });
-});
--- a/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts
+++ b/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts
@@ -8,7 +8,7 @@

 import { type Locator } from "@playwright/test";

-import { test, expect } from "../../../element-web-test";
+import { test, expect } from "../../element-web-test";

 test.describe("Roles & Permissions room settings tab", () => {
    const roomName = "Test room";
--- a/playwright/e2e/settings/room-settings/room-security-tab.spec.ts
+++ b/playwright/e2e/settings/room-settings/room-security-tab.spec.ts
@@ -1,121 +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 Locator } from "@playwright/test";
-
-import { test, expect } from "../../../element-web-test";
-
-test.describe("Roles & Permissions room settings tab", () => {
-    const roomName = "Test room";
-
-    test.use({
-        displayName: "Alice",
-    });
-
-    let settings: Locator;
-
-    test.beforeEach(async ({ user, app }) => {
-        await app.client.createRoom({
-            name: roomName,
-            power_level_content_override: {
-                events: {
-                    // Set the join rules as lower than the history vis to test an edge case.
-                    ["m.room.join_rules"]: 80,
-                    ["m.room.history_visibility"]: 100,
-                },
-            },
-        });
-        await app.viewRoomByName(roomName);
-        settings = await app.settings.openRoomSettings("Security & Privacy");
-    });
-
-    test(
-        "should be able to toggle on encryption in a room",
-        { tag: "@screenshot" },
-        async ({ page, app, user, axe }) => {
-            await page.setViewportSize({ width: 1024, height: 1400 });
-            const encryptedToggle = settings.getByLabel("Encrypted");
-            await encryptedToggle.click();
-
-            // Accept the dialog.
-            await page.getByRole("button", { name: "Ok " }).click();
-
-            await expect(encryptedToggle).toBeChecked();
-            await expect(encryptedToggle).toBeDisabled();
-
-            await settings.getByLabel("Only send messages to verified users.").check();
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(settings).toMatchScreenshot("room-security-settings.png");
-        },
-    );
-
-    test(
-        "should automatically adjust history visibility when a room is changed from public to private",
-        { tag: "@screenshot" },
-        async ({ page, app, user, axe }) => {
-            await page.setViewportSize({ width: 1024, height: 1400 });
-
-            const settingsGroupAccess = page.getByRole("group", { name: "Access" });
-            const settingsGroupHistory = page.getByRole("group", { name: "Who can read history?" });
-
-            await settingsGroupAccess.getByText("Public").click();
-            await settingsGroupHistory.getByText("Anyone").click();
-
-            // Test that we have the warning appear.
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(settings).toMatchScreenshot("room-security-settings-world-readable.png");
-
-            await settingsGroupAccess.getByText("Private (invite only)").click();
-            // Element should have automatically set the room to "sharing" history visibility
-            await expect(
-                settingsGroupHistory.getByText("Members only (since the point in time of selecting this option)"),
-            ).toBeChecked();
-        },
-    );
-
-    test(
-        "should disallow changing from public to private if the user cannot alter history",
-        { tag: "@screenshot" },
-        async ({ page, app, user, bot }) => {
-            await page.setViewportSize({ width: 1024, height: 1400 });
-
-            const settingsGroupAccess = page.getByRole("group", { name: "Access" });
-            const settingsGroupHistory = page.getByRole("group", { name: "Who can read history?" });
-
-            await settingsGroupAccess.getByText("Public").click();
-            await settingsGroupHistory.getByText("Anyone").click();
-
-            // De-op ourselves
-            await app.settings.switchTab("Roles & Permissions");
-
-            // Wait for the permissions list to be visible
-            await expect(settings.getByRole("heading", { name: "Permissions" })).toBeVisible();
-
-            const ourComboBox = settings.getByRole("combobox", { name: user.userId });
-            await ourComboBox.selectOption("Custom level");
-            const ourPl = settings.getByRole("spinbutton", { name: user.userId });
-            await ourPl.fill("80");
-            await ourPl.blur(); // Shows a warning on
-
-            // Accept the de-op
-            await page.getByRole("button", { name: "Continue" }).click();
-            await settings.getByRole("button", { name: "Apply", disabled: false }).click();
-
-            await app.settings.switchTab("Security & Privacy");
-
-            await settingsGroupAccess.getByText("Private (invite only)").click();
-            // Element should have automatically set the room to "sharing" history visibility
-            const errorDialog = page.getByRole("heading", { name: "Cannot make room private" });
-            await expect(errorDialog).toBeVisible();
-            await errorDialog.getByLabel("OK");
-            await expect(settingsGroupHistory.getByText("Anyone")).toBeChecked();
-        },
-    );
-});
--- a/playwright/e2e/settings/room-settings/room-video-tab.spec.ts
+++ b/playwright/e2e/settings/room-settings/room-video-tab.spec.ts
@@ -1,42 +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 Locator } from "@playwright/test";
-
-import { test, expect } from "../../../element-web-test";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-
-test.describe("Voice & Video room settings tab", () => {
-    const roomName = "Test room";
-
-    test.use({
-        displayName: "Alice",
-    });
-
-    let settings: Locator;
-
-    test.beforeEach(async ({ user, app, page }) => {
-        // Execute client actions before setting, as the setting will force a reload.
-        await app.client.createRoom({ name: roomName });
-        await app.settings.setValue("feature_group_calls", null, SettingLevel.DEVICE, true);
-        await app.viewRoomByName(roomName);
-        settings = await app.settings.openRoomSettings("Voice & Video");
-    });
-
-    test(
-        "should be able to toggle on Element Call in the room",
-        { tag: "@screenshot" },
-        async ({ page, app, user, axe }) => {
-            await page.setViewportSize({ width: 1024, height: 1400 });
-            const callToggle = settings.getByLabel("Enable Element Call as an additional calling option in this room");
-            await callToggle.check();
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(settings).toMatchScreenshot("room-video-settings.png");
-        },
-    );
-});
--- a/playwright/e2e/settings/security-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/security-user-settings-tab.spec.ts
@@ -41,18 +41,6 @@ test.describe("Security user settings tab", () => {
            });
        });

-        test("should render the security tab", { tag: "@screenshot" }, async ({ app, page, user }) => {
-            await page.setViewportSize({ width: 1024, height: 1400 });
-            const tab = await app.settings.openUserSettings("Security");
-            await expect(tab).toMatchScreenshot("security-settings-tab.png", {
-                mask: [
-                    // Contains IM name.
-                    tab.locator("#mx_SetIntegrationManager_BodyText"),
-                    tab.locator("#mx_SetIntegrationManager_ManagerName"),
-                ],
-            });
-        });
-
        test("should be able to set an ID server", async ({ app, context, user, page }) => {
            const tab = await app.settings.openUserSettings("Security");

--- a/playwright/e2e/share-dialog/share-by-url.spec.ts
+++ b/playwright/e2e/share-dialog/share-by-url.spec.ts
@@ -18,14 +18,13 @@ test.describe("share from URL", () => {

    test("should share message when users navigates to share URL", async ({ page, user, room, app }) => {
        await page.goto("/#/share?msg=Hello+world");
-        const dialog = page.getByRole("dialog", { name: "Forward message" });
        // The forward message dialog doesn't update as new infomation arrives via sync, which means sometimes
        // this is just says, "Empty room". For the same reason, we can't reliably write a test for loading the
        // app straight away with a /#/share url as the room doesn't appear until the client syncs.]
        // Ideally we should fix the forward dialog to update and eliminate races, until then, there is only one
        // room so we click the first button.
-        await dialog.getByRole("listitem" /*, { name: "A test room" }*/).getByRole("button", { name: "Send" }).click();
-        await dialog.getByRole("button", { name: "Close" }).click();
+        await page.getByRole("listitem" /*, { name: "A test room" }*/).getByRole("button", { name: "Send" }).click();
+        await page.keyboard.press("Escape");
        await app.viewRoomByName("A test room");
        const lastMessage = page.locator(".mx_RoomView_MessageList .mx_EventTile_last");
        await expect(lastMessage).toBeVisible();
--- a/playwright/e2e/sliding-sync/sliding-sync.spec.ts
+++ b/playwright/e2e/sliding-sync/sliding-sync.spec.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import { type Locator, type Page, type Request } from "@playwright/test";
+import { type Page, type Request } from "@playwright/test";

 import { test as base, expect } from "../../element-web-test";
 import type { ElementAppPage } from "../../pages/ElementAppPage";
@@ -38,7 +38,7 @@ const test = base.extend<{

 test.describe("Sliding Sync", () => {
    const checkOrder = async (wantOrder: string[], page: Page) => {
-        await expect(page.getByTestId("room-list").locator(".mx_RoomListItemView_text")).toHaveText(wantOrder);
+        await expect(page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomTile_title")).toHaveText(wantOrder);
    };

    const bumpRoom = async (roomId: string, app: ElementAppPage) => {
@@ -50,18 +50,6 @@ test.describe("Sliding Sync", () => {
        });
    };

-    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" });
-    }
-
    test.use({
        config: {
            features: {
@@ -81,15 +69,20 @@ test.describe("Sliding Sync", () => {
        // create rooms and check room names are correct
        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
            await app.client.createRoom({ name: fruit });
-            await expect(page.getByRole("option", { name: `Open room ${fruit}` })).toBeVisible();
+            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
        }
-        const roomList = page.getByTestId("room-list");
+
        // Check count, 3 fruits + 1 testRoom = 4
-        await expect(roomList.getByRole("option")).toHaveCount(4);
+        await expect(page.locator(".mx_RoomSublist_tiles").getByRole("treeitem")).toHaveCount(4);
        await checkOrder(["Orange", "Pineapple", "Apple", "Test Room"], page);

-        await getRoomOptionsMenu(page).click();
-        await page.getByRole("menuitemradio", { name: "A-Z" }).click();
+        const locator = page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomSublist_headerContainer");
+        await locator.hover();
+        await locator.getByRole("button", { name: "List options" }).click();
+
+        // force click as the radio button's size is zero
+        await page.getByRole("menuitemradio", { name: "A-Z" }).dispatchEvent("click");
+        await expect(page.locator(".mx_StyledRadioButton_checked").getByText("A-Z")).toBeVisible();

        await checkOrder(["Apple", "Orange", "Pineapple", "Test Room"], page);
    });
@@ -100,11 +93,11 @@ test.describe("Sliding Sync", () => {
        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
            const id = await app.client.createRoom({ name: fruit });
            roomIds.push(id);
-            await expect(page.getByRole("option", { name: `Open room ${fruit}` })).toBeVisible();
+            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
        }

        // Select the Test Room
-        await page.getByRole("option", { name: "Open room Test Room" }).click();
+        await page.getByRole("treeitem", { name: "Test Room" }).click();
        const [apple, pineapple, orange] = roomIds;
        await checkOrder(["Orange", "Pineapple", "Apple", "Test Room"], page);
        await bumpRoom(apple, app);
@@ -123,7 +116,7 @@ test.describe("Sliding Sync", () => {
        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
            const id = await app.client.createRoom({ name: fruit });
            roomIds.push(id);
-            await expect(page.getByRole("option", { name: `Open room ${fruit}` })).toBeVisible();
+            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
        }

        // Given a list of Orange, Pineapple, Apple - if Pineapple is active and a message is sent in Apple, the list should
@@ -131,7 +124,7 @@ test.describe("Sliding Sync", () => {
        // be Apple, Orange Pineapple - only when you click on a different room do things reshuffle.

        // Select the Pineapple room
-        await page.getByRole("option", { name: "Open room Pineapple" }).click();
+        await page.getByRole("treeitem", { name: "Pineapple" }).click();
        await checkOrder(["Orange", "Pineapple", "Apple", "Test Room"], page);

        // Move Apple
@@ -139,7 +132,7 @@ test.describe("Sliding Sync", () => {
        await checkOrder(["Apple", "Pineapple", "Orange", "Test Room"], page);

        // Select the Test Room
-        await page.getByRole("option", { name: "Open room Test Room" }).click();
+        await page.getByRole("treeitem", { name: "Test Room" }).click();

        // the rooms reshuffle to match reality
        await checkOrder(["Apple", "Orange", "Pineapple", "Test Room"], page);
@@ -149,20 +142,25 @@ test.describe("Sliding Sync", () => {
        // send a message in the test room: unread notification count should increment
        await bob.sendMessage(testRoom.roomId, "Hello World");

-        const itemLocator1 = page.getByRole("option", { name: "Open room David Langley with 1 unread message." });
-        await expect(itemLocator1.getByTestId("notification-decoration")).toHaveText("1");
+        const treeItemLocator1 = page.getByRole("treeitem", { name: "Test Room 1 unread message." });
+        await expect(treeItemLocator1.locator(".mx_NotificationBadge_count")).toHaveText("1");
+        // await expect(page.locator(".mx_NotificationBadge")).not.toHaveClass("mx_NotificationBadge_highlighted");
+        await expect(treeItemLocator1.locator(".mx_NotificationBadge")).not.toHaveClass(
+            /mx_NotificationBadge_highlighted/,
+        );

        // send an @mention: highlight count (red) should be 2.
        await bob.sendMessage(testRoom.roomId, `Hello ${user.displayName}`);
-        const itemLocator2 = page.getByRole("treeitem", {
-            name: "Open room Test Room 2 unread messages including mentions.",
+        const treeItemLocator2 = page.getByRole("treeitem", {
+            name: "Test Room 2 unread messages including mentions.",
        });
-        await expect(itemLocator2.getByTestId("notification-decoration")).toHaveText("2");
+        await expect(treeItemLocator2.locator(".mx_NotificationBadge_count")).toHaveText("2");
+        await expect(treeItemLocator2.locator(".mx_NotificationBadge")).toHaveClass(/mx_NotificationBadge_highlighted/);

        // click on the room, the notif counts should disappear
-        await page.getByRole("option", { name: "Open room Test Room 2 unread messages including mentions." }).click();
+        await page.getByRole("treeitem", { name: "Test Room 2 unread messages including mentions." }).click();
        await expect(
-            page.getByRole("option", { name: "Open room Test Room" }).getByTestId("notification-decoration"),
+            page.getByRole("treeitem", { name: "Test Room" }).locator("mx_NotificationBadge_count"),
        ).not.toBeAttached();
    });

@@ -177,9 +175,7 @@ test.describe("Sliding Sync", () => {
        // wait for this message to arrive, tell by the room list resorting
        await checkOrder(["Test Room", "Dummy"], page);

-        await expect(
-            page.getByRole("option", { name: "Open room Test Room" }).getByTestId("notification-decoration"),
-        ).toBeAttached();
+        await expect(page.getByRole("treeitem", { name: "Test Room" }).locator(".mx_NotificationBadge")).toBeAttached();
    });

    test("should update user settings promptly", async ({ page, app }) => {
@@ -197,7 +193,7 @@ test.describe("Sliding Sync", () => {
        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
            const id = await app.client.createRoom({ name: fruit });
            roomIds.push(id);
-            await expect(page.getByRole("option", { name: `Open room ${fruit}` })).toBeVisible();
+            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
        }
        const [roomAId, roomPId] = roomIds;

@@ -210,7 +206,7 @@ test.describe("Sliding Sync", () => {
        // Select the Test Room and wait for playwright to get the request
        const [request] = await Promise.all([
            page.waitForRequest(matchRoomSubRequest(roomAId)),
-            page.getByRole("option", { name: "Open room Apple", exact: true }).click(),
+            page.getByRole("treeitem", { name: "Apple", exact: true }).click(),
        ]);
        const roomSubscriptions = request.postDataJSON().room_subscriptions;
        expect(roomSubscriptions, "room_subscriptions is object").toBeDefined();
@@ -218,7 +214,7 @@ test.describe("Sliding Sync", () => {
        // Switch to another room and wait for playwright to get the request
        await Promise.all([
            page.waitForRequest(matchRoomSubRequest(roomPId)),
-            page.getByRole("option", { name: "Open room Pineapple", exact: true }).click(),
+            page.getByRole("treeitem", { name: "Pineapple", exact: true }).click(),
        ]);
    });

@@ -244,29 +240,34 @@ test.describe("Sliding Sync", () => {
            { roomNames, clientUserId },
        );

-        await getFilterExpandButton(page).click();
-        const primaryFilters = getPrimaryFilters(page);
-        await primaryFilters.getByRole("option", { name: "Invites" }).click();
-
-        await expect(page.getByTestId("room-list").getByRole("option")).toHaveCount(3);
+        await expect(
+            page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
+        ).toHaveCount(3);

        // Select the room to join
-        await page.getByRole("option", { name: "Open room Room to Join" }).click();
+        await page.getByRole("treeitem", { name: "Room to Join" }).click();

        // Accept the invite
        await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();

-        await checkOrder(["Room to Rescind", "Room to Reject"], page);
+        await checkOrder(["Room to Join", "Test Room"], page);

        // Select the room to reject
-        await page.getByRole("option", { name: "Open room Room to Reject" }).click();
+        await page.getByRole("treeitem", { name: "Room to Reject" }).click();

        // Decline the invite
        await page.locator(".mx_RoomView").getByRole("button", { name: "Decline", exact: true }).click();

-        await expect(page.getByTestId("room-list").getByRole("option")).toHaveCount(1);
+        await expect(
+            page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
+        ).toHaveCount(2);

-        await expect(page.getByRole("option", { name: "Open room Room to Rescind" })).toBeVisible();
+        // check the lists are correct
+        await checkOrder(["Room to Join", "Test Room"], page);
+
+        const titleLocator = page.getByRole("group", { name: "Invites" }).locator(".mx_RoomTile_title");
+        await expect(titleLocator).toHaveCount(1);
+        await expect(titleLocator).toHaveText("Room to Rescind");

        // now rescind the invite
        await bot.evaluate(
@@ -276,14 +277,10 @@ test.describe("Sliding Sync", () => {
            { roomRescind, clientUserId },
        );

-        await page.getByRole("option", { name: "Open room Room to Rescind" }).click();
-
-        await page.locator(".mx_RoomView").getByRole("button", { name: "Forget this room", exact: true }).click();
-
-        await primaryFilters.getByRole("option", { name: "Invites" }).click();
-
        // Wait for the rescind to take effect and check the joined list once more
-        await expect(page.getByTestId("room-list").getByRole("option")).toHaveCount(2);
+        await expect(
+            page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
+        ).toHaveCount(2);

        await checkOrder(["Room to Join", "Test Room"], page);
    });
@@ -296,27 +293,19 @@ test.describe("Sliding Sync", () => {
        await app.client.evaluate(async (client, roomId) => {
            await client.setRoomTag(roomId, "m.favourite", { order: 0.5 });
        }, roomId);
-
-        await getFilterExpandButton(page).click();
-        const primaryFilters = getPrimaryFilters(page);
-        await primaryFilters.getByRole("option", { name: "Favourites" }).click();
-
-        await expect(page.getByRole("option", { name: "Favourite DM" })).toBeVisible();
-
-        await primaryFilters.getByRole("option", { name: "People" }).click();
-
-        await expect(page.getByRole("option", { name: "Favourite DM" })).not.toBeAttached();
+        await expect(page.getByRole("group", { name: "Favourites" }).getByText("Favourite DM")).toBeVisible();
+        await expect(page.getByRole("group", { name: "People" }).getByText("Favourite DM")).not.toBeAttached();
    });

    // Regression test for a bug in SS mode, but would be useful to have in non-SS mode too.
    // This ensures we are setting RoomViewStore state correctly.
    test("should clear the reply to field when swapping rooms", async ({ page, app, testRoom }) => {
        await app.client.createRoom({ name: "Other Room" });
-        await expect(page.getByRole("option", { name: "Open room Other Room" })).toBeVisible();
+        await expect(page.getByRole("treeitem", { name: "Other Room" })).toBeVisible();
        await app.client.sendMessage(testRoom.roomId, "Hello world");

        // select the room
-        await page.getByRole("option", { name: "Open room Test Room" }).click();
+        await page.getByRole("treeitem", { name: "Test Room" }).click();

        await expect(page.locator(".mx_ReplyPreview")).not.toBeAttached();

@@ -329,13 +318,13 @@ test.describe("Sliding Sync", () => {
        await expect(page.locator(".mx_ReplyPreview")).toBeVisible();

        // now click Other Room
-        await page.getByRole("option", { name: "Open room Other Room" }).click();
+        await page.getByRole("treeitem", { name: "Other Room" }).click();

        // ensure the reply-to disappears
        await expect(page.locator(".mx_ReplyPreview")).not.toBeAttached();

        // click back
-        await page.getByRole("option", { name: "Open room Test Room" }).click();
+        await page.getByRole("treeitem", { name: "Test Room" }).click();

        // ensure the reply-to reappears
        await expect(page.locator(".mx_ReplyPreview")).toBeVisible();
@@ -349,7 +338,7 @@ test.describe("Sliding Sync", () => {
        await app.client.sendMessage(testRoom.roomId, "Reply to me");

        // select the room
-        await page.getByRole("option", { name: "Open room Test Room" }).click();
+        await page.getByRole("treeitem", { name: "Test Room" }).click();
        await expect(page.locator(".mx_ReplyPreview")).not.toBeAttached();

        // click reply-to on the Reply to me message
--- a/playwright/e2e/spaces/spaces.spec.ts
+++ b/playwright/e2e/spaces/spaces.spec.ts
@@ -11,7 +11,6 @@ import { test, expect } from "../../element-web-test";
 import type { Preset, ICreateRoomOpts } from "matrix-js-sdk/src/matrix";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { UIFeature } from "../../../src/settings/UIFeature";

 async function openSpaceCreateMenu(page: Page): Promise<Locator> {
    await page.getByRole("button", { name: "Create a space" }).click();
@@ -96,9 +95,9 @@ test.describe("Spaces", () => {
            await page.getByRole("button", { name: "Go to my first room" }).click();

            // Assert rooms exist in the room list
-            await expect(page.getByRole("option", { name: "General" })).toBeVisible();
-            await expect(page.getByRole("option", { name: "Random" })).toBeVisible();
-            await expect(page.getByRole("option", { name: "Jokes" })).toBeVisible();
+            await expect(page.getByRole("treeitem", { name: "General" })).toBeVisible();
+            await expect(page.getByRole("treeitem", { name: "Random" })).toBeVisible();
+            await expect(page.getByRole("treeitem", { name: "Jokes" })).toBeVisible();
        },
    );

@@ -127,10 +126,10 @@ test.describe("Spaces", () => {
        await page.getByRole("button", { name: "Skip for now" }).click();

        // Assert rooms exist in the room list
-        const roomList = page.getByRole("listbox", { name: "Room list", exact: true });
-        await expect(roomList.getByRole("option", { name: "General" })).toBeVisible();
-        await expect(roomList.getByRole("option", { name: "Random" })).toBeVisible();
-        await expect(roomList.getByRole("option", { name: "Projects" })).toBeVisible();
+        const roomList = page.getByRole("tree", { name: "Rooms" });
+        await expect(roomList.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
+        await expect(roomList.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
+        await expect(roomList.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();

        // Assert rooms exist in the space explorer
        await expect(
@@ -200,7 +199,7 @@ test.describe("Spaces", () => {

            await page.getByRole("button", { name: "Skip for now" }).click();

-            await page.getByRole("main").getByRole("button", { name: "Add" }).click();
+            await page.getByRole("button", { name: "Add room" }).click();
            await page.getByRole("menuitem", { name: "Add existing room" }).click();

            await page.getByRole("checkbox", { name: "Sample Room" }).click();
@@ -377,68 +376,4 @@ test.describe("Spaces", () => {
        await app.viewSpaceByName("Root Space");
        await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png");
    });
-
-    test("should render spaces visibility settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
-        await app.client.createSpace({
-            name: "My Space",
-        });
-        await app.viewSpaceByName("My space");
-        await page.getByLabel("Settings", { exact: true }).click();
-        await app.settings.switchTab("Visibility");
-
-        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-        await expect(axe).toHaveNoViolations();
-        await expect(page.locator("#mx_tabpanel_SPACE_VISIBILITY_TAB")).toMatchScreenshot(
-            "space-visibility-settings.png",
-        );
-    });
-
-    test.describe("Should hide public spaces option if not allowed", () => {
-        test.use({
-            config: {
-                setting_defaults: {
-                    [UIFeature.AllowCreatingPublicSpaces]: false,
-                },
-            },
-        });
-
-        test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app }) => {
-            const menu = await openSpaceCreateMenu(page);
-            await menu
-                .locator('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
-                .setInputFiles("playwright/sample-files/riot.png");
-            await menu.getByRole("textbox", { name: "Name" }).fill("This is a private space");
-            await expect(menu.getByRole("textbox", { name: "Address" })).not.toBeVisible();
-            await menu
-                .getByRole("textbox", { name: "Description" })
-                .fill("This is a private space because we can't make public ones");
-            await menu.getByRole("button", { name: "Create" }).click();
-
-            await page.getByRole("button", { name: "Me and my teammates" }).click();
-
-            // Create the default General & Random rooms, as well as a custom "Projects" room
-            await expect(page.getByPlaceholder("General")).toBeVisible();
-            await expect(page.getByPlaceholder("Random")).toBeVisible();
-            await page.getByPlaceholder("Support").fill("Projects");
-            await page.getByRole("button", { name: "Continue" }).click();
-            await page.getByRole("button", { name: "Skip for now" }).click();
-
-            // Assert rooms exist in the room list
-            const roomList = page.getByRole("listbox", { name: "Room list", exact: true });
-            await expect(roomList.getByRole("option", { name: "General" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "Random" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "Projects" })).toBeVisible();
-
-            // Assert rooms exist in the space explorer
-            await expect(
-                page.locator(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", { hasText: "General" }),
-            ).toBeVisible();
-            await expect(
-                page.locator(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", { hasText: "Random" }),
-            ).toBeVisible();
-            await expect(
-                page.locator(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", { hasText: "Projects" }),
-            ).toBeVisible();
-        });
-    });
 });
--- a/playwright/e2e/spaces/threads-activity-centre/index.ts
+++ b/playwright/e2e/spaces/threads-activity-centre/index.ts
@@ -377,7 +377,7 @@ export class Helpers {
     * Expand the space panel
     */
    expandSpacePanel() {
-        return this.page.getByRole("navigation", { name: "Spaces" }).getByRole("button", { name: "Expand" }).click();
+        return this.page.getByRole("button", { name: "Expand" }).click();
    }

    /**
--- a/playwright/e2e/spotlight/spotlight.spec.ts
+++ b/playwright/e2e/spotlight/spotlight.spec.ts
@@ -30,13 +30,13 @@ async function startDM(app: ElementAppPage, page: Page, name: string): Promise<v
    await result.first().click();

    // send first message to start DM
-    const locator = page.getByRole("textbox", { name: "Send a message…" });
+    const locator = page.getByRole("textbox", { name: "Send an unencrypted message…" });
    await expect(locator).toBeFocused();
    await locator.fill("Hey!");
    await locator.press("Enter");
    // The DM room is created at this point, this can take a little bit of time
    await expect(page.locator(".mx_EventTile_body").getByText("Hey!")).toBeAttached({ timeout: 3000 });
-    await expect(page.getByTestId("room-list").getByRole("option", { name: `Open room ${name}` })).toBeVisible();
+    await expect(page.getByRole("group", { name: "People" }).getByText(name)).toBeAttached();
 }

 type RoomRef = { name: string; roomId: string };
@@ -260,15 +260,13 @@ test.describe("Spotlight", () => {

        // Send first message to actually start DM
        await expect(roomHeaderName(page)).toHaveText(bot2.credentials.displayName);
-        const locator = page.getByRole("textbox", { name: "Send a message…" });
+        const locator = page.getByRole("textbox", { name: "Send an unencrypted message…" });
        await locator.fill("Hey!");
        await locator.press("Enter");

        // Assert DM exists by checking for the first message and the room being in the room list
        await expect(page.locator(".mx_EventTile_body").filter({ hasText: "Hey!" })).toBeAttached({ timeout: 3000 });
-        await expect(
-            page.getByTestId("room-list").getByRole("option", { name: `Open room ${bot2.credentials.displayName}` }),
-        ).toBeVisible();
+        await expect(page.getByRole("group", { name: "People" })).toContainText(bot2.credentials.displayName);

        // Invite BotBob into existing DM with ByteBot
        const dmRooms = await app.client.evaluate((client, userId) => {
@@ -281,9 +279,7 @@ test.describe("Spotlight", () => {
        const groupDmName = await app.client.evaluate((client, id) => client.getRoom(id).name, dmRooms[0]);
        await app.client.inviteUser(dmRooms[0], bot1.credentials.userId);
        await expect(roomHeaderName(page).first()).toContainText(groupDmName);
-        await expect(
-            page.getByTestId("room-list").getByRole("option", { name: `Open room ${groupDmName}` }),
-        ).toBeVisible();
+        await expect(page.getByRole("group", { name: "People" }).first()).toContainText(groupDmName);

        // Search for BotBob by id, should return group DM and user
        spotlight = await app.openSpotlight();
--- a/playwright/e2e/timeline/media-preview-settings.spec.ts
+++ b/playwright/e2e/timeline/media-preview-settings.spec.ts
@@ -50,12 +50,9 @@ test.describe("Media preview settings", () => {
                }
            `,
        });
-
-        const testRoomTile = page
-            .getByRole("listbox", { name: "Room list" })
-            .getByRole("option", { name: "Test room" });
-        await expect(testRoomTile).toBeVisible();
-        await expect(testRoomTile).toMatchScreenshot("invite-room-tree-no-avatar.png");
+        await expect(
+            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Test room" }),
+        ).toMatchScreenshot("invite-room-tree-no-avatar.png");

        // And then go back to being visible
        settings = await app.settings.openUserSettings("Preferences");
@@ -73,7 +70,9 @@ test.describe("Media preview settings", () => {
                }
            `,
        });
-        await expect(testRoomTile).toMatchScreenshot("invite-room-tree-with-avatar.png");
+        await expect(
+            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Test room" }),
+        ).toMatchScreenshot("invite-room-tree-with-avatar.png");
    });

    test("should be able to hide media in rooms globally", async ({ page, app, room, user }) => {
--- a/playwright/e2e/timeline/timeline.spec.ts
+++ b/playwright/e2e/timeline/timeline.spec.ts
@@ -908,37 +908,23 @@ test.describe("Timeline", () => {
            });
        });

-        test(
-            "should be able to hide an image",
-            { tag: "@screenshot" },
-            async ({ page, app, homeserver, room, context }) => {
-                await app.viewRoomById(room.roomId);
-
-                const bot = new Bot(page, homeserver, {});
-                await bot.prepareClient();
-                await app.client.inviteUser(room.roomId, bot.credentials.userId);
-
-                await sendImage(bot, room.roomId, NEW_AVATAR);
-                await app.timeline.scrollToBottom();
-                const imgTile = page.locator(".mx_MImageBody").first();
-                await expect(imgTile).toBeVisible();
-                await imgTile.hover();
-                await page.getByRole("button", { name: "Hide" }).click();
-
-                // Check that the image is now hidden.
-                await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
-            },
-        );
-
-        test("should be able to hide a video", async ({ page, app, homeserver, room, context }) => {
+        test("should be able to hide an image", { tag: "@screenshot" }, async ({ page, app, room, context }) => {
            await app.viewRoomById(room.roomId);
+            await sendImage(app.client, room.roomId, NEW_AVATAR);
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MImageBody").first();
+            await expect(imgTile).toBeVisible();
+            await imgTile.hover();
+            await page.getByRole("button", { name: "Hide" }).click();

-            const bot = new Bot(page, homeserver, {});
-            await bot.prepareClient();
-            await app.client.inviteUser(room.roomId, bot.credentials.userId);
+            // Check that the image is now hidden.
+            await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
+        });

-            const upload = await bot.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
-            await bot.sendEvent(room.roomId, null, "m.room.message" as EventType, {
+        test("should be able to hide a video", async ({ page, app, room, context }) => {
+            await app.viewRoomById(room.roomId);
+            const upload = await app.client.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
+            await app.client.sendEvent(room.roomId, null, "m.room.message" as EventType, {
                msgtype: "m.video" as MsgType,
                body: "bbb.webm",
                url: upload.content_uri,
--- a/playwright/e2e/voip/element-call.spec.ts
+++ b/playwright/e2e/voip/element-call.spec.ts
@@ -1,339 +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 { EventType, Preset } from "matrix-js-sdk/src/matrix";
-import { SettingLevel } from "../../../src/settings/SettingLevel";
-import { test, expect } from "../../element-web-test";
-import type { Credentials } from "../../plugins/homeserver";
-import type { Bot } from "../../pages/bot";
-
-function assertCommonCallParameters(
-    url: URLSearchParams,
-    hash: URLSearchParams,
-    user: Credentials,
-    room: { roomId: string },
-): void {
-    expect(url.has("widgetId")).toEqual(true);
-    expect(url.has("parentUrl")).toEqual(true);
-
-    expect(hash.get("perParticipantE2EE")).toEqual("false");
-    expect(hash.get("userId")).toEqual(user.userId);
-    expect(hash.get("deviceId")).toEqual(user.deviceId);
-    expect(hash.get("roomId")).toEqual(room.roomId);
-    expect(hash.get("preload")).toEqual("false");
-}
-
-async function sendRTCState(bot: Bot, roomId: string, notification?: "ring" | "notification") {
-    const resp = await bot.sendStateEvent(
-        roomId,
-        "org.matrix.msc3401.call.member",
-        {
-            application: "m.call",
-            call_id: "",
-            device_id: "OiDFxsZrjz",
-            expires: 180000000,
-            foci_preferred: [
-                {
-                    livekit_alias: roomId,
-                    livekit_service_url: "https://example.org",
-                    type: "livekit",
-                },
-            ],
-            focus_active: {
-                focus_selection: "oldest_membership",
-                type: "livekit",
-            },
-            scope: "m.room",
-        },
-        `_@${bot.credentials.userId}_OiDFxsZrjz_m.call`,
-    );
-    if (!notification) {
-        return;
-    }
-    await bot.sendEvent(roomId, null, "org.matrix.msc4075.rtc.notification", {
-        "lifetime": 30000,
-        "m.mentions": {
-            room: true,
-            user_ids: [],
-        },
-        "m.relates_to": {
-            event_id: resp.event_id,
-            rel_type: "org.matrix.msc4075.rtc.notification.parent",
-        },
-        "notification_type": notification,
-        "sender_ts": 1758611895996,
-    });
-}
-
-test.describe("Element Call", () => {
-    test.use({
-        config: {
-            element_call: {
-                use_exclusively: false,
-            },
-            features: {
-                feature_group_calls: true,
-            },
-        },
-        displayName: "Alice",
-        botCreateOpts: {
-            autoAcceptInvites: true,
-            displayName: "Bob",
-        },
-    });
-
-    test.beforeEach(async ({ page, user, app }) => {
-        // Mock a widget page. It doesn't need to actually be Element Call.
-        await page.route("/widget.html", async (route) => {
-            await route.fulfill({
-                status: 200,
-                body: "<p> Hello world </p>",
-            });
-        });
-        await app.settings.setValue(
-            "Developer.elementCallUrl",
-            null,
-            SettingLevel.DEVICE,
-            new URL("/widget.html#", page.url()).toString(),
-        );
-    });
-
-    test.describe("Group Chat", () => {
-        test.use({
-            room: async ({ page, app, user, bot }, use) => {
-                const roomId = await app.client.createRoom({ name: "TestRoom", invite: [bot.credentials.userId] });
-                await use({ roomId });
-            },
-        });
-        test("should be able to start a video call", async ({ page, user, room, app }) => {
-            await app.viewRoomById(room.roomId);
-            await expect(page.getByText("Bob joined the room")).toBeVisible();
-
-            await page.getByRole("button", { name: "Video call" }).click();
-            await page.getByRole("menuitem", { name: "Element Call" }).click();
-
-            const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            await expect(frameUrlStr).toBeDefined();
-            // Ensure we set the correct parameters for ECall.
-            const url = new URL(frameUrlStr);
-            const hash = new URLSearchParams(url.hash.slice(1));
-            assertCommonCallParameters(url.searchParams, hash, user, room);
-            expect(hash.get("intent")).toEqual("start_call");
-            expect(hash.get("skipLobby")).toEqual(null);
-        });
-
-        test("should be able to skip lobby by holding down shift", async ({ page, user, bot, room, app }) => {
-            await app.viewRoomById(room.roomId);
-            await expect(page.getByText("Bob joined the room")).toBeVisible();
-
-            await page.getByRole("button", { name: "Video call" }).click();
-            await page.keyboard.down("Shift");
-            await page.getByRole("menuitem", { name: "Element Call" }).click();
-            await page.keyboard.up("Shift");
-
-            const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            await expect(frameUrlStr).toBeDefined();
-            const url = new URL(frameUrlStr);
-            const hash = new URLSearchParams(url.hash.slice(1));
-            assertCommonCallParameters(url.searchParams, hash, user, room);
-            expect(hash.get("intent")).toEqual("start_call");
-            expect(hash.get("skipLobby")).toEqual("true");
-        });
-
-        test("should be able to join a call in progress", async ({ page, user, bot, room, app }) => {
-            await app.viewRoomById(room.roomId);
-            // Allow bob to create a call
-            await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
-            await expect(page.getByText("Bob joined the room")).toBeVisible();
-            // Fake a start of a call
-            await sendRTCState(bot, room.roomId);
-            const button = page.getByTestId("join-call-button");
-            await expect(button).toBeInViewport({ timeout: 5000 });
-            // And test joining
-            await button.click();
-            const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            console.log(frameUrlStr);
-            await expect(frameUrlStr).toBeDefined();
-            const url = new URL(frameUrlStr);
-            const hash = new URLSearchParams(url.hash.slice(1));
-            assertCommonCallParameters(url.searchParams, hash, user, room);
-
-            expect(hash.get("intent")).toEqual("join_existing");
-            expect(hash.get("skipLobby")).toEqual(null);
-        });
-
-        [true, false].forEach((skipLobbyToggle) => {
-            test(
-                `should be able to join a call via incoming call toast (skipLobby=${skipLobbyToggle})`,
-                { tag: ["@screenshot"] },
-                async ({ page, user, bot, room, app }) => {
-                    await app.viewRoomById(room.roomId);
-                    // Allow bob to create a call
-                    await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
-                    await expect(page.getByText("Bob joined the room")).toBeVisible();
-                    // Fake a start of a call
-                    await sendRTCState(bot, room.roomId, "notification");
-                    const toast = page.locator(".mx_Toast_toast");
-                    const button = toast.getByRole("button", { name: "Join" });
-                    if (skipLobbyToggle) {
-                        await toast.getByRole("switch").check();
-                        await expect(toast).toMatchScreenshot("incoming-call-group-video-toast-checked.png");
-                    } else {
-                        await toast.getByRole("switch").uncheck();
-                        await expect(toast).toMatchScreenshot("incoming-call-group-video-toast-unchecked.png");
-                    }
-
-                    // And test joining
-                    await button.click();
-                    const frameUrlStr = await page.locator("iframe").getAttribute("src");
-                    console.log(frameUrlStr);
-                    await expect(frameUrlStr).toBeDefined();
-                    const url = new URL(frameUrlStr);
-                    const hash = new URLSearchParams(url.hash.slice(1));
-                    assertCommonCallParameters(url.searchParams, hash, user, room);
-
-                    expect(hash.get("intent")).toEqual("join_existing");
-                    expect(hash.get("skipLobby")).toEqual(skipLobbyToggle.toString());
-                },
-            );
-        });
-    });
-
-    test.describe("DMs", () => {
-        test.use({
-            room: async ({ page, app, user, bot }, use) => {
-                const roomId = await app.client.createRoom({
-                    preset: "trusted_private_chat" as Preset.TrustedPrivateChat,
-                    invite: [bot.credentials.userId],
-                });
-                await app.client.setAccountData("m.direct" as EventType.Direct, {
-                    [bot.credentials.userId]: [roomId],
-                });
-                await use({ roomId });
-            },
-        });
-
-        test("should be able to start a video call", async ({ page, user, room, app }) => {
-            await app.viewRoomById(room.roomId);
-            await expect(page.getByText("Bob joined the room")).toBeVisible();
-
-            await page.getByRole("button", { name: "Video call" }).click();
-            await page.getByRole("menuitem", { name: "Element Call" }).click();
-            const frameUrlStr = await page.locator("iframe").getAttribute("src");
-
-            await expect(frameUrlStr).toBeDefined();
-            const url = new URL(frameUrlStr);
-            const hash = new URLSearchParams(url.hash.slice(1));
-            assertCommonCallParameters(url.searchParams, hash, user, room);
-            expect(hash.get("intent")).toEqual("start_call_dm");
-            expect(hash.get("skipLobby")).toEqual(null);
-        });
-
-        test("should be able to skip lobby by holding down shift", async ({ page, user, room, app }) => {
-            await app.viewRoomById(room.roomId);
-            await expect(page.getByText("Bob joined the room")).toBeVisible();
-
-            await page.getByRole("button", { name: "Video call" }).click();
-            await page.keyboard.down("Shift");
-            await page.getByRole("menuitem", { name: "Element Call" }).click();
-            await page.keyboard.up("Shift");
-            const frameUrlStr = await page.locator("iframe").getAttribute("src");
-
-            await expect(frameUrlStr).toBeDefined();
-            const url = new URL(frameUrlStr);
-            const hash = new URLSearchParams(url.hash.slice(1));
-            assertCommonCallParameters(url.searchParams, hash, user, room);
-            expect(hash.get("intent")).toEqual("start_call_dm");
-            expect(hash.get("skipLobby")).toEqual("true");
-        });
-
-        test("should be able to join a call in progress", async ({ page, user, bot, room, app }) => {
-            await app.viewRoomById(room.roomId);
-            // Allow bob to create a call
-            await expect(page.getByText("Bob joined the room")).toBeVisible();
-            // Fake a start of a call
-            await sendRTCState(bot, room.roomId);
-            const button = page.getByTestId("join-call-button");
-            await expect(button).toBeInViewport({ timeout: 5000 });
-            // And test joining
-            await button.click();
-            const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            console.log(frameUrlStr);
-            await expect(frameUrlStr).toBeDefined();
-            const url = new URL(frameUrlStr);
-            const hash = new URLSearchParams(url.hash.slice(1));
-            assertCommonCallParameters(url.searchParams, hash, user, room);
-
-            expect(hash.get("intent")).toEqual("join_existing_dm");
-            expect(hash.get("skipLobby")).toEqual(null);
-        });
-
-        [true, false].forEach((skipLobbyToggle) => {
-            test(
-                `should be able to join a call via incoming call toast (skipLobby=${skipLobbyToggle})`,
-                { tag: ["@screenshot"] },
-                async ({ page, user, bot, room, app }) => {
-                    await app.viewRoomById(room.roomId);
-                    // Allow bob to create a call
-                    await expect(page.getByText("Bob joined the room")).toBeVisible();
-                    // Fake a start of a call
-                    await sendRTCState(bot, room.roomId, "ring");
-                    const toast = page.locator(".mx_Toast_toast");
-                    const button = toast.getByRole("button", { name: "Join" });
-                    if (skipLobbyToggle) {
-                        await toast.getByRole("switch").check();
-                        await expect(toast).toMatchScreenshot("incoming-call-dm-video-toast-checked.png");
-                    } else {
-                        await toast.getByRole("switch").uncheck();
-                        await expect(toast).toMatchScreenshot("incoming-call-dm-video-toast-unchecked.png");
-                    }
-
-                    // And test joining
-                    await button.click();
-                    const frameUrlStr = await page.locator("iframe").getAttribute("src");
-                    console.log(frameUrlStr);
-                    await expect(frameUrlStr).toBeDefined();
-                    const url = new URL(frameUrlStr);
-                    const hash = new URLSearchParams(url.hash.slice(1));
-                    assertCommonCallParameters(url.searchParams, hash, user, room);
-
-                    expect(hash.get("intent")).toEqual("join_existing_dm");
-                    expect(hash.get("skipLobby")).toEqual(skipLobbyToggle.toString());
-                },
-            );
-        });
-    });
-
-    test.describe("Video Rooms", () => {
-        test.use({
-            config: {
-                features: {
-                    feature_video_rooms: true,
-                    feature_element_call_video_rooms: true,
-                },
-            },
-        });
-        test("should be able to create and join a video room", async ({ page, 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("Test room");
-            await page.getByRole("button", { name: "Create video room" }).click();
-            await expect(page).toHaveURL(new RegExp(`/#/room/`));
-            const roomId = new URL(page.url()).hash.slice("#/room/".length);
-
-            const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            await expect(frameUrlStr).toBeDefined();
-            // Ensure we set the correct parameters for ECall.
-            const url = new URL(frameUrlStr);
-            const hash = new URLSearchParams(url.hash.slice(1));
-            assertCommonCallParameters(url.searchParams, hash, user, { roomId });
-            expect(hash.get("intent")).toEqual("join_existing");
-            expect(hash.get("skipLobby")).toEqual("false");
-            expect(hash.get("returnToLobby")).toEqual("true");
-        });
-    });
-});
--- a/playwright/e2e/voip/pstn.spec.ts
+++ b/playwright/e2e/voip/pstn.spec.ts
@@ -24,7 +24,7 @@ test.describe("PSTN", () => {
        await toasts.rejectToast("Notifications");
        await toasts.assertNoToasts();

-        await expect(page.locator(".mx_RoomListSearch")).toMatchScreenshot("dialpad-trigger.png");
+        await expect(page.locator(".mx_LeftPanel_filterContainer")).toMatchScreenshot("dialpad-trigger.png");
        await page.getByLabel("Open dial pad").click();
        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("dialpad.png");
    });
--- a/playwright/e2e/widgets/jitsi.spec.ts
+++ b/playwright/e2e/widgets/jitsi.spec.ts
@@ -1,51 +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 as base, expect } from "../../element-web-test";
-import { Bot } from "../../pages/bot";
-
-const ROOM_NAME = "Jitsi Room";
-
-const test = base.extend<{
-    bot1: Bot;
-    bot2: Bot;
-}>({
-    bot2: async ({ page, homeserver }, use, testInfo) => {
-        const bot = new Bot(page, homeserver, { displayName: `ByteBot_${testInfo.testId}` });
-        await bot.prepareClient(); // eagerly register the bot
-        await use(bot);
-    },
-});
-
-test.describe("Jitsi Calls", () => {
-    test.use({
-        displayName: "Jimmy",
-        botCreateOpts: { displayName: "Bot", autoAcceptInvites: false },
-    });
-
-    test("should be able to pop out a jitsi widget", async ({ page, app, bot, bot2, context }) => {
-        const roomId = await app.client.createRoom({
-            name: ROOM_NAME,
-            invite: [bot.credentials.userId, bot2.credentials.userId],
-        });
-
-        await bot.joinRoom(roomId);
-        await bot2.joinRoom(roomId);
-
-        // open the room
-        await app.viewRoomByName(ROOM_NAME);
-
-        await page.getByRole("button", { name: "Video call" }).click();
-
-        const pagePromise = context.waitForEvent("page");
-
-        await page.getByRole("button", { name: "Popout widget" }).click();
-
-        const newPage = await pagePromise;
-        await expect(newPage.getByRole("button", { name: "Join Conference" })).toBeVisible();
-    });
-});
--- a/playwright/e2e/widgets/permissions-dialog.spec.ts
+++ b/playwright/e2e/widgets/permissions-dialog.spec.ts
@@ -1,98 +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";
-
-const DEMO_WIDGET_ID = "demo-widget-id";
-const DEMO_WIDGET_NAME = "Demo Widget";
-const DEMO_WIDGET_TYPE = "demo";
-const ROOM_NAME = "Demo";
-
-const DEMO_WIDGET_HTML = `
-    <html lang="en">
-        <head>
-            <title>Demo Widget</title>
-            <script>
-                let sendEventCount = 0
-                window.onmessage = ev => {
-                    if (ev.data.action === 'capabilities') {
-                        window.parent.postMessage(Object.assign({
-                            response: {
-                                capabilities: [
-                                    "org.matrix.msc2762.timeline:*",
-                                    "org.matrix.msc2762.receive.state_event:m.room.topic",
-                                    "org.matrix.msc2762.send.event:net.widget_echo"
-                                ]
-                            },
-                        }, ev.data), '*');
-                    }
-                };
-            </script>
-        </head>
-    </html>
-`;
-
-test.describe("Widger permissions dialog", () => {
-    test.use({
-        displayName: "Mike",
-    });
-
-    let demoWidgetUrl: string;
-    test.beforeEach(async ({ webserver }) => {
-        demoWidgetUrl = webserver.start(DEMO_WIDGET_HTML);
-    });
-
-    test(
-        "should be updated if user is re-invited into the room with updated state event",
-        { tag: "@screenshot" },
-        async ({ page, app, user, axe }) => {
-            const roomId = await app.client.createRoom({
-                name: ROOM_NAME,
-            });
-
-            // setup widget via state event
-            await app.client.sendStateEvent(
-                roomId,
-                "im.vector.modular.widgets",
-                {
-                    id: DEMO_WIDGET_ID,
-                    creatorUserId: "somebody",
-                    type: DEMO_WIDGET_TYPE,
-                    name: DEMO_WIDGET_NAME,
-                    url: demoWidgetUrl,
-                },
-                DEMO_WIDGET_ID,
-            );
-
-            // set initial layout
-            await app.client.sendStateEvent(
-                roomId,
-                "io.element.widgets.layout",
-                {
-                    widgets: {
-                        [DEMO_WIDGET_ID]: {
-                            container: "top",
-                            index: 1,
-                            width: 100,
-                            height: 0,
-                        },
-                    },
-                },
-                "",
-            );
-
-            // open the room
-            await app.viewRoomByName(ROOM_NAME);
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(page.locator(".mx_WidgetCapabilitiesPromptDialog")).toMatchScreenshot(
-                "widget-capabilites-prompt.png",
-            );
-        },
-    );
-});
--- a/playwright/pages/ElementAppPage.ts
+++ b/playwright/pages/ElementAppPage.ts
@@ -51,10 +51,9 @@ export class ElementAppPage {
    /**
     * Open room creation dialog.
     */
-
-    public async openCreateRoomDialog(roomKindname: "New room" | "New video room" = "New room"): Promise<Locator> {
-        await this.page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
-        await this.page.getByRole("menuitem", { name: roomKindname }).click();
+    public async openCreateRoomDialog(): Promise<Locator> {
+        await this.page.getByRole("button", { name: "Add room", exact: true }).click();
+        await this.page.getByRole("menuitem", { name: "New room", exact: true }).click();
        return this.page.locator(".mx_CreateRoomDialog");
    }

@@ -71,23 +70,12 @@ export class ElementAppPage {

    /**
     * Opens the given room by name. The room must be visible in the
-     * room list and the room may contain unread messages.
-     *
-     * @param name The exact room name to find and click on/open.
-     */
-    public async viewRoomByName(name: string): Promise<void> {
-        // We get the room list by test-id which is a listbox and matching title=name
-        return this.page.getByTestId("room-list").locator(`[title="${name}"]`).first().click();
-    }
-
-    /**
-     * Opens the given room on the old room list by name. The room must be visible in the
     * room list, but the room list may be folded horizontally, and the
     * room may contain unread messages.
     *
     * @param name The exact room name to find and click on/open.
     */
-    public async viewRoomByNameOnOldRoomList(name: string): Promise<void> {
+    public async viewRoomByName(name: string): Promise<void> {
        // We look for the room inside the room list, which is a tree called Rooms.
        //
        // There are 3 cases:
--- a/playwright/pages/client.ts
+++ b/playwright/pages/client.ts
@@ -469,27 +469,6 @@ export class Client {
        );
    }

-    /**
-     * Set a power level to one or multiple users.
-     * Will apply changes atop of current power level event.
-     * @param roomId - the room to update power levels in
-     * @param userId - the ID of the user or users to update power levels of
-     * @param powerLevel - the numeric power level to update given users to
-     */
-    public async setPowerLevel(
-        roomId: string,
-        userId: string | string[],
-        powerLevel: number,
-    ): Promise<ISendEventResponse> {
-        const client = await this.prepareClient();
-        return client.evaluate(
-            async (client, { roomId, userId, powerLevel }) => {
-                return client.setPowerLevel(roomId, userId, powerLevel);
-            },
-            { roomId, userId, powerLevel },
-        );
-    }
-
    /**
     * Leaves the given room.
     * @param roomId ID of the room to leave
--- a/playwright/pages/settings.ts
+++ b/playwright/pages/settings.ts
@@ -43,7 +43,7 @@ export class Settings {
     * @param {*} value The new value of the setting, may be null.
     * @return {Promise} Resolves when the setting has been changed.
     */
-    public async setValue(settingName: string, roomId: string | null, level: SettingLevel, value: any): Promise<void> {
+    public async setValue(settingName: string, roomId: string, level: SettingLevel, value: any): Promise<void> {
        return this.page.evaluate<
            Promise<void>,
            {
--- a/playwright/plugins/homeserver/synapse/masHomeserver.ts
+++ b/playwright/plugins/homeserver/synapse/masHomeserver.ts
@@ -1,49 +1,38 @@
 /*
-Copyright 2024-2025 New Vector Ltd.
+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 { MatrixAuthenticationServiceContainer } from "../../../testcontainers/mas.ts";
+import { MatrixAuthenticationServiceContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
+
 import { type Fixtures } from "../../../element-web-test.ts";

 export const masHomeserver: Fixtures = {
    mas: [
        async ({ _homeserver: homeserver, logger, network, postgres, mailpit }, use) => {
-            const secret = "AnotherRandomSecret";
+            const config = {
+                clients: [
+                    {
+                        client_id: "0000000000000000000SYNAPSE",
+                        client_auth_method: "client_secret_basic",
+                        client_secret: "SomeRandomSecret",
+                    },
+                ],
+                matrix: {
+                    homeserver: "localhost",
+                    secret: "AnotherRandomSecret",
+                    endpoint: "http://homeserver:8008",
+                },
+            };

-            const limits = { burst: 10, per_second: 10 };
            const container = await new MatrixAuthenticationServiceContainer(postgres)
                .withNetwork(network)
                .withNetworkAliases("mas")
                .withLogConsumer(logger.getConsumer("mas"))
-                .withConfig({
-                    matrix: {
-                        kind: "synapse",
-                        homeserver: "localhost",
-                        secret,
-                        endpoint: "http://homeserver:8008",
-                    },
-                    rate_limiting: {
-                        login: {
-                            per_ip: limits,
-                            per_account: limits,
-                        },
-                        registration: limits,
-                        email_authentication: {
-                            per_ip: limits,
-                            per_address: limits,
-                            emails_per_session: limits,
-                            attempt_per_session: limits,
-                        },
-                        account_recovery: {
-                            per_ip: limits,
-                            per_address: limits,
-                        },
-                    },
-                })
+                .withConfig(config)
                .start();

            homeserver.withConfig({
@@ -51,10 +40,16 @@ export const masHomeserver: Fixtures = {
                enable_registration_without_verification: undefined,
                disable_msisdn_registration: undefined,
                password_config: undefined,
-                matrix_authentication_service: {
-                    enabled: true,
-                    endpoint: "http://mas:8080/",
-                    secret,
+                experimental_features: {
+                    msc3861: {
+                        enabled: true,
+                        issuer: `http://mas:8080/`,
+                        introspection_endpoint: "http://mas:8080/oauth2/introspect",
+                        client_id: config.clients[0].client_id,
+                        client_auth_method: config.clients[0].client_auth_method,
+                        client_secret: config.clients[0].client_secret,
+                        admin_token: config.matrix.secret,
+                    },
                },
            });

@@ -64,6 +59,28 @@ export const masHomeserver: Fixtures = {
        { scope: "worker" },
    ],

+    config: async ({ homeserver, context, mas }, use) => {
+        const issuer = `${mas.baseUrl}/`;
+        const wellKnown = {
+            "m.homeserver": {
+                base_url: homeserver.baseUrl,
+            },
+            "org.matrix.msc2965.authentication": {
+                issuer,
+                account: `${issuer}account`,
+            },
+        };
+
+        // Ensure org.matrix.msc2965.authentication is in well-known
+        await context.route("https://localhost/.well-known/matrix/client", async (route) => {
+            await route.fulfill({ json: wellKnown });
+        });
+
+        await use({
+            default_server_config: wellKnown,
+        });
+    },
+
    context: async ({ homeserverType, context }, use, testInfo) => {
        testInfo.skip(homeserverType !== "synapse", "does not yet support MAS");
        await use(context);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Michael Telatynski	01ffd72b9d	Coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-08-08 09:28:47 +01:00
Michael Telatynski	0eee4e3a18	Coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-08-08 09:10:29 +01:00
Michael Telatynski	98ed46b0f3	types Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-08-07 16:20:39 +01:00
Michael Telatynski	78690f032d	Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-08-07 15:12:04 +01:00
Michael Telatynski	607dbb03df	Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/module-api-1.3.0 # Conflicts: # src/stores/RoomViewStore.tsx	2025-08-07 13:51:47 +01:00
Michael Telatynski	07e6f0af35	Fix test mocks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-07-29 10:44:43 +01:00
Michael Telatynski	be318f9cb8	Update module API and remove jest stub Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-07-29 10:32:10 +01:00
Michael Telatynski	5ff42e8548	Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/module-api-1.3.0 # Conflicts: # yarn.lock	2025-07-29 09:49:44 +01:00
Michael Telatynski	6599601000	Bump module API Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-07-28 16:03:31 +01:00
Michael Telatynski	6fb9098c30	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-07-25 09:52:27 +01:00
Michael Telatynski	9e50e59168	Fix import Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-07-25 09:47:19 +01:00
Michael Telatynski	008b004976	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-07-24 16:25:22 +01:00
Michael Telatynski	68a2748813	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-07-23 15:22:07 +01:00
Michael Telatynski	61e266e8e5	Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-07-17 17:31:41 +01:00
Michael Telatynski	a7c7c27ae8	Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/module-api-1.3.0	2025-07-17 16:16:23 +01:00
Michael Telatynski	1414b8ff54	Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/module-api-1.3.0	2025-07-16 14:56:15 +01:00
Michael Telatynski	c6a5d288ed	Add missing import Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-07-07 12:49:35 +01:00
Michael Telatynski	8c2a035302	Add support for Module API 1.3.0 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-07-07 12:49:06 +01:00