build res on prepare

because shared-components needs languages.json

.eslintrc.js

@@ -1,6 +1,11 @@
 module.exports = {
     plugins: ["matrix-org", "eslint-plugin-react-compiler"],
-    extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
+    extends: [
+        "plugin:matrix-org/babel",
+        "plugin:matrix-org/react",
+        "plugin:matrix-org/a11y",
+        "plugin:storybook/recommended",
+    ],
     parserOptions: {
         project: ["./tsconfig.json"],
     },

.github/CODEOWNERS

@@ -17,9 +17,16 @@
 /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 plugin as this is updated by GHA for docker image updating
+# Ignore the synapse & mas plugins as this is updated by GHA for docker image updating
 /playwright/testcontainers/synapse.ts
+/playwright/testcontainers/mas.ts
 

.github/PULL_REQUEST_TEMPLATE.md

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

.github/workflows/build.yml

@@ -10,8 +10,7 @@ concurrency:
     cancel-in-progress: ${{ github.event_name == 'pull_request' }}
 # develop pushes and repository_dispatch handled in build_develop.yaml
 env:
-    # These must be set for fetchdep.sh to get the right branch
-    REPOSITORY: ${{ github.repository }}
+    # This must be set for fetchdep.sh to get the right branch
     PR_NUMBER: ${{ github.event.pull_request.number }}
 permissions: {} # No permissions required
 jobs:
@@ -43,9 +42,9 @@ jobs:
             run:
                 shell: bash
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   # Disable cache on Windows as it is slower than not caching
                   # https://github.com/actions/setup-node/issues/975
@@ -56,15 +55,7 @@ jobs:
             - run: yarn config set network-timeout 300000
 
             - 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
-                  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
+              run: ./scripts/layered.sh
 
             - name: Copy config
               run: cp element.io/develop/config.json config.json
@@ -72,12 +63,10 @@ jobs:
             - name: Build
               env:
                   CI_PACKAGE: true
-                  VERSION: "${{ steps.layered_build.outputs.VERSION }}"
-              run: |
-                  yarn build
+              run: VERSION=$(scripts/get-version-from-git.sh) yarn build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: webapp-${{ matrix.image }}
                   path: webapp

.github/workflows/build_debian.yaml

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

.github/workflows/build_develop.yml

@@ -26,9 +26,9 @@ jobs:
             R2_URL: ${{ vars.CF_R2_S3_API }}
             R2_PUBLIC_URL: "https://element-web-develop.element.io"
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -53,7 +53,7 @@ jobs:
 
             - run: mv dist/element-*.tar.gz dist/develop.tar.gz
 
-            - uses: actions/upload-artifact@v4
+            - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: webapp
                   path: dist/develop.tar.gz

.github/workflows/deploy.yml

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

.github/workflows/docker.yaml

@@ -20,31 +20,31 @@ jobs:
         env:
             TEST_TAG: vectorim/element-web:test
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               with:
                   fetch-depth: 0 # needed for docker-package to be able to calculate the version
 
             - name: Install Cosign
-              uses: sigstore/cosign-installer@d7d6bc7722e3daa8354c50bcb52f4837da5e9b6a # v3
+              uses: sigstore/cosign-installer@398d4b0eeef1380460a10c8013a76f728fb906ac # v3
               if: github.event_name != 'pull_request'
 
             - name: Set up QEMU
               uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3
 
             - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3
+              uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3
               with:
                   install: true
 
             - name: Login to Docker Hub
-              uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3
+              uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3
               if: github.event_name != 'pull_request'
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
 
             - name: Login to GitHub Container Registry
-              uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3
+              uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3
               if: github.event_name != 'pull_request'
               with:
                   registry: ghcr.io
@@ -53,7 +53,7 @@ jobs:
 
             - name: Build and load
               id: test-build
-              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+              uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
               with:
                   context: .
                   load: true
@@ -96,7 +96,7 @@ jobs:
 
             - name: Docker meta
               id: meta
-              uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5
+              uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f # v5
               if: github.event_name != 'pull_request'
               with:
                   images: |
@@ -110,7 +110,7 @@ jobs:
 
             - name: Build and push
               id: build-and-push
-              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+              uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
               if: github.event_name != 'pull_request'
               with:
                   context: .
@@ -139,3 +139,16 @@ jobs:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
                   repository: vectorim/element-web
+
+            - name: Repository Dispatch
+              uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # v3
+              if: github.event_name != 'pull_request'
+              with:
+                  repository: element-hq/element-web-pro
+                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  event-type: image-built
+                  # Stable way to determine the :version
+                  client-payload: |-
+                      {
+                          "base-ref": "${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}"
+                      }

.github/workflows/docs.yml

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

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

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

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

@@ -50,25 +50,20 @@ jobs:
             runners-matrix: ${{ steps.runner-vars.outputs.matrix }}
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               with:
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               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
-                  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
+              run: scripts/layered.sh
 
             - name: Copy config
               run: cp element.io/develop/config.json config.json
@@ -76,12 +71,10 @@ jobs:
             - name: Build
               env:
                   CI_PACKAGE: true
-                  VERSION: "${{ steps.layered_build.outputs.VERSION }}"
-              run: |
-                  yarn build
+              run: VERSION=$(scripts/get-version-from-git.sh) yarn build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: webapp
                   path: webapp
@@ -89,7 +82,7 @@ jobs:
 
             - name: Calculate runner variables
               id: runner-vars
-              uses: actions/github-script@v7
+              uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
               with:
                   script: |
                       const numRunners = parseInt(process.env.NUM_RUNNERS, 10);
@@ -129,18 +122,18 @@ jobs:
                     - runAllTests: false
                       project: Pinecone
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@v4
+              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
               with:
                   name: webapp
                   path: webapp
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   cache-dependency-path: yarn.lock
@@ -154,12 +147,11 @@ jobs:
               run: echo "version=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_OUTPUT
 
             - name: Cache playwright binaries
-              uses: actions/cache@v4
+              uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               id: playwright-cache
               with:
-                  path: |
-                      ~/.cache/ms-playwright
-                  key: ${{ runner.os }}-playwright-${{ steps.playwright.outputs.version }}
+                  path: ~/.cache/ms-playwright
+                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}
 
             - name: Install Playwright browsers
               if: steps.playwright-cache.outputs.cache-hit != 'true'
@@ -180,25 +172,35 @@ jobs:
 
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: all-blob-reports-${{ matrix.project }}-${{ matrix.runner }}
                   path: blob-report
                   retention-days: 1
 
+    downstream-modules:
+        name: Downstream Playwright tests [element-modules]
+        needs: build
+        if: inputs.skip != true && github.event_name == 'merge_group'
+        uses: element-hq/element-modules/.github/workflows/reusable-playwright-tests.yml@main
+        with:
+            webapp-artifact: webapp
+
     complete:
         name: end-to-end-tests
-        needs: playwright
+        needs:
+            - playwright
+            - downstream-modules
         if: always()
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               if: inputs.skip != true
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               if: inputs.skip != true
               with:
                   cache: "yarn"
@@ -210,7 +212,7 @@ jobs:
 
             - name: Download blob reports from GitHub Actions Artifacts
               if: inputs.skip != true
-              uses: actions/download-artifact@v4
+              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
               with:
                   pattern: all-blob-reports-*
                   path: all-blob-reports
@@ -218,7 +220,7 @@ jobs:
 
             - name: Merge into HTML Report
               if: inputs.skip != true
-              run: yarn playwright merge-reports --reporter=html,./playwright/flaky-reporter.ts,./playwright/stale-screenshot-reporter.ts ./all-blob-reports
+              run: yarn playwright merge-reports --reporter=html,./playwright/flaky-reporter.ts,@element-hq/element-web-playwright-common/lib/stale-screenshot-reporter.js ./all-blob-reports
               env:
                   # Only pass creds to the flaky-reporter on main branch runs
                   GITHUB_TOKEN: ${{ github.ref_name == 'develop' && secrets.ELEMENT_BOT_TOKEN || '' }}
@@ -226,11 +228,11 @@ jobs:
             # Upload the HTML report even if one of our reporters fails, this can happen when stale screenshots are detected
             - name: Upload HTML report
               if: always() && inputs.skip != true
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: html-report
                   path: playwright-report
                   retention-days: 14
 
-            - if: needs.playwright.result != 'skipped' && needs.playwright.result != 'success'
+            - if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')
               run: exit 1

.github/workflows/issue_closed.yml

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

.github/workflows/netlify.yaml

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

.github/workflows/pending-reviews.yaml

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

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

@@ -10,7 +10,7 @@ jobs:
         permissions:
             pull-requests: write
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
             - name: Update synapse image
               run: |
@@ -21,6 +21,15 @@ jobs:
               env:
                   IMAGE: ghcr.io/element-hq/synapse:develop
 
+            - name: Update MAS image
+              run: |
+                  docker pull "$IMAGE"
+                  INSPECT=$(docker inspect --format='{{index .RepoDigests 0}}' "$IMAGE")
+                  DIGEST=${INSPECT#*@}
+                  sed -i "s/const TAG.*/const TAG = \"main@$DIGEST\";/" playwright/testcontainers/mas.ts
+              env:
+                  IMAGE: ghcr.io/element-hq/matrix-authentication-service:main
+
             - name: Create Pull Request
               id: cpr
               uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7

.github/workflows/pull_request_base_branch.yaml

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

.github/workflows/release_prepare.yml

@@ -41,7 +41,7 @@ jobs:
             REPOS: matrix-js-sdk element-web element-desktop
         steps:
             - name: Checkout Element Desktop
-              uses: actions/checkout@v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               if: inputs.element-desktop
               with:
                   repository: element-hq/element-desktop
@@ -51,7 +51,7 @@ jobs:
                   fetch-tags: true
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
             - name: Checkout Element Web
-              uses: actions/checkout@v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               if: inputs.element-web
               with:
                   repository: element-hq/element-web
@@ -61,7 +61,7 @@ jobs:
                   fetch-tags: true
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
             - name: Checkout Matrix JS SDK
-              uses: actions/checkout@v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               if: inputs.matrix-js-sdk
               with:
                   repository: matrix-org/matrix-js-sdk

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

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

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

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

.github/workflows/static_analysis.yaml

@@ -12,8 +12,7 @@ concurrency:
     cancel-in-progress: true
 
 env:
-    # These must be set for fetchdep.sh to get the right branch
-    REPOSITORY: ${{ github.repository }}
+    # This must be set for fetchdep.sh to get the right branch
     PR_NUMBER: ${{ github.event.pull_request.number }}
 
 permissions: {} # No permissions required
@@ -23,9 +22,9 @@ jobs:
         name: "Typescript Syntax Check"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -52,12 +51,13 @@ 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@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
             - run: ./res/css/rethemendex.sh
 
@@ -67,9 +67,9 @@ jobs:
         name: "ESLint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -85,9 +85,9 @@ jobs:
         name: "Style Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -103,9 +103,9 @@ jobs:
         name: "Workflow Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -121,9 +121,9 @@ jobs:
         name: "Analyse Dead Code"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.github/workflows/tests.yml

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

.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@main
+            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: https://github.com/orgs/element-hq/projects/67
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/triage-incoming.yml

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

.github/workflows/triage-labelled.yml

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

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

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

.github/workflows/triage-stale.yml

@@ -12,15 +12,17 @@ jobs:
             issues: write
             pull-requests: write
         steps:
-            - uses: actions/stale@v9
+            - uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10
               with:
                   operations-per-run: 100
+
                   # Flaky test issue closing
-                  only-issue-labels: "Z-Flaky-Test"
+                  any-of-issue-labels: "Z-Flaky-Test-Chrome,Z-Flaky-Test-Firefox,Z-Flaky-Test-Webkit"
                   days-before-issue-stale: 14
                   days-before-issue-close: 0
                   close-issue-message: "This flaky test issue has not been updated in 14 days. It is being closed as presumed resolved."
                   exempt-issue-labels: "Z-Flaky-Test-Disabled"
+
                   # Stale PR closing
                   days-before-pr-stale: 180
                   days-before-pr-close: 0

.github/workflows/triage-unlabelled.yml

@@ -5,44 +5,25 @@ on:
         types: [unlabeled]
 permissions: {}
 jobs:
-    Move_Unabeled_Issue_On_Project_Board:
+    move_no_longer_needs_info_issues:
         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') }}
-        env:
-            BOARD_NAME: "Issue triage"
-            OWNER: ${{ github.repository_owner }}
-            REPO: ${{ github.event.repository.name }}
-            ISSUE: ${{ github.event.issue.number }}
+            !contains(github.event.issue.labels.*.name, 'X-Needs-Info')
         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' }}
+            - id: set_fields
+              uses: nipe0324/update-project-v2-item-field@c4af58452d1c5a788c1ea4f20e073fa722ec4a6b #v2.0.2
               with:
-                  project: Issue triage
-                  column: Triaged
-                  repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  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"
+        env:
+            PROJECT_URL: https://github.com/orgs/element-hq/projects/120
 
     remove_Z-Labs_label:
         name: Remove Z-Labs label when features behind labs flags are removed
@@ -62,7 +43,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'A-Element-Call')) &&
             contains(github.event.issue.labels.*.name, 'Z-Labs')
         steps:
-            - uses: actions/github-script@v7
+            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
               with:
                   script: |
                       github.rest.issues.removeLabel({

.github/workflows/update-jitsi.yml

@@ -9,9 +9,9 @@ jobs:
     update:
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.github/workflows/update-topics.yaml

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

.gitignore

@@ -31,3 +31,8 @@ electron/pub
 /index.html
 # version file and tarball created by `npm pack` / `yarn pack`
 /git-revision.txt
+
+*storybook.log
+storybook-static
+
+shared-component-dist

.storybook/ElementTheme.ts

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

.storybook/languageAddon.tsx

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

.storybook/main.ts

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

.storybook/manager.js

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

.storybook/preview.css

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

.storybook/preview.tsx

@@ -0,0 +1,93 @@
+import type { ArgTypes, Preview, Decorator, ReactRenderer, StrictArgs } from "@storybook/react-vite";
+
+import "../res/css/shared.pcss";
+import "./preview.css";
+import React, { useLayoutEffect } from "react";
+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: {
+        name: "Theme",
+        description: "Global theme for components",
+        toolbar: {
+            icon: "circlehollow",
+            title: "Theme",
+            items: [
+                { title: "System", value: "system", icon: "browser" },
+                { title: "Light", value: "light", icon: "sun" },
+                { title: "Light (high contrast)", value: "light-hc", icon: "sun" },
+                { title: "Dark", value: "dark", icon: "moon" },
+                { title: "Dark (high contrast)", value: "dark-hc", icon: "moon" },
+            ],
+        },
+    },
+    language: {
+        name: "Language",
+        description: "Global language for components",
+    },
+    initialGlobals: {
+        theme: "system",
+        language: "en",
+    },
+} satisfies ArgTypes;
+
+const allThemesClasses = globalTypes.theme.toolbar.items.map(({ value }) => `cpd-theme-${value}`);
+
+const ThemeSwitcher: React.FC<{
+    theme: string;
+}> = ({ theme }) => {
+    useLayoutEffect(() => {
+        document.documentElement.classList.remove(...allThemesClasses);
+        if (theme !== "system") {
+            document.documentElement.classList.add(`cpd-theme-${theme}`);
+        }
+        return () => document.documentElement.classList.remove(...allThemesClasses);
+    }, [theme]);
+
+    return null;
+};
+
+const withThemeProvider: Decorator = (Story, context) => {
+    return (
+        <>
+            <ThemeSwitcher theme={context.globals.theme} />
+            <Story />
+        </>
+    );
+};
+
+async function languageLoader(context: StoryContext<ReactRenderer, StrictArgs>): Promise<void> {
+    await setLanguage(context.globals.language);
+}
+
+const withTooltipProvider: Decorator = (Story) => {
+    return (
+        <TooltipProvider>
+            <Story />
+        </TooltipProvider>
+    );
+};
+
+const preview: Preview = {
+    tags: ["autodocs"],
+    decorators: [withThemeProvider, 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;

.storybook/test-runner.js

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

.stylelintrc.js

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

AUTHORS.rst

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

CHANGELOG.md

@@ -1,3 +1,302 @@
+Changes in [1.12.0](https://github.com/element-hq/element-web/releases/tag/v1.12.0) (2025-09-23)
+================================================================================================
+## 🦖 Deprecations
+
+* Remove remaining support for outdated .well-known settings ([#30702](https://github.com/element-hq/element-web/pull/30702)). Contributed by @richvdh.
+
+## ✨ Features
+
+* Add decline button to call notification toast (use new notification event) ([#30729](https://github.com/element-hq/element-web/pull/30729)). Contributed by @toger5.
+* Use the new room list by default ([#30640](https://github.com/element-hq/element-web/pull/30640)). Contributed by @langleyd.
+* "Verify this device" redesign ([#30596](https://github.com/element-hq/element-web/pull/30596)). Contributed by @uhoreg.
+* Set Element Call "intents" when starting and answering DM calls. ([#30730](https://github.com/element-hq/element-web/pull/30730)). Contributed by @Half-Shot.
+* Add axe compliance for new room list ([#30700](https://github.com/element-hq/element-web/pull/30700)). Contributed by @langleyd.
+* Stop ringing and remove toast if another device answers a RTC call. ([#30728](https://github.com/element-hq/element-web/pull/30728)). Contributed by @Half-Shot.
+* Automatically adjust history visibility when making a room private ([#30713](https://github.com/element-hq/element-web/pull/30713)). Contributed by @Half-Shot.
+* Release announcement for new room list ([#30675](https://github.com/element-hq/element-web/pull/30675)). Contributed by @dbkr.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Room list: make the filter resize correctly ([#30795](https://github.com/element-hq/element-web/pull/30795)). Contributed by @RiotRobot.
+* [Backport staging] Avoid flicker of the room list filter on resize ([#30794](https://github.com/element-hq/element-web/pull/30794)). Contributed by @RiotRobot.
+* Don't show release announcements while toasts are displayed ([#30770](https://github.com/element-hq/element-web/pull/30770)). Contributed by @dbkr.
+* Fix enabling key backup not working if there is an untrusted key backup ([#30707](https://github.com/element-hq/element-web/pull/30707)). Contributed by @Half-Shot.
+* Force `preload` to be false when setting an intent on an Element Call. ([#30759](https://github.com/element-hq/element-web/pull/30759)). Contributed by @Half-Shot.
+* Fix handling of 413 server response when uploading media ([#30737](https://github.com/element-hq/element-web/pull/30737)). Contributed by @hughns.
+* Make landmark navigation work with new room list ([#30747](https://github.com/element-hq/element-web/pull/30747)). Contributed by @dbkr.
+* Prevent voice message from displaying spurious errors ([#30736](https://github.com/element-hq/element-web/pull/30736)). Contributed by @florianduros.
+* Align default avatar and fix colors in composer pills ([#30739](https://github.com/element-hq/element-web/pull/30739)). Contributed by @florianduros.
+* Use configured URL for link to desktop app in message search settings ([#30742](https://github.com/element-hq/element-web/pull/30742)). Contributed by @t3chguy.
+* Fix history visibility when creating space rooms ([#30745](https://github.com/element-hq/element-web/pull/30745)). Contributed by @dbkr.
+* Check HTML-encoded quotes when handling translations for embedded pages (such as welcome.html) ([#30743](https://github.com/element-hq/element-web/pull/30743)). Contributed by @Half-Shot.
+* Fix local room encryption status always not enabled ([#30461](https://github.com/element-hq/element-web/pull/30461)). Contributed by @BillCarsonFr.
+* fix: make url in topic in room intro clickable ([#30686](https://github.com/element-hq/element-web/pull/30686)). Contributed by @florianduros.
+* Block change recovery key button while a change is ongoing. ([#30664](https://github.com/element-hq/element-web/pull/30664)). Contributed by @Half-Shot.
+* Hide advanced settings during room creation when `UIFeature.advancedSettings=false` ([#30684](https://github.com/element-hq/element-web/pull/30684)). Contributed by @florianduros.
+* A11y: improve accessibility of pinned messages ([#30558](https://github.com/element-hq/element-web/pull/30558)). Contributed by @florianduros.
+
+
+Changes in [1.11.112](https://github.com/element-hq/element-web/releases/tag/v1.11.112) (2025-09-16)
+====================================================================================================
+Fix [CVE-2025-59161](https://www.cve.org/CVERecord?id=CVE-2025-59161) / [GHSA-m6c8-98f4-75rr](https://github.com/element-hq/element-web/security/advisories/GHSA-m6c8-98f4-75rr)
+
+
+Changes in [1.11.111](https://github.com/element-hq/element-web/releases/tag/v1.11.111) (2025-09-10)
+====================================================================================================
+## ✨ Features
+
+* Do not hide media from your own user by default ([#29797](https://github.com/element-hq/element-web/pull/29797)). Contributed by @Half-Shot.
+* Remember whether sidebar is shown for calls when switching rooms ([#30262](https://github.com/element-hq/element-web/pull/30262)). Contributed by @bojidar-bg.
+* Open the proper integration settings on integrations disabled error ([#30538](https://github.com/element-hq/element-web/pull/30538)). Contributed by @Half-Shot.
+* Show a "progress" dialog while invites are being sent ([#30561](https://github.com/element-hq/element-web/pull/30561)). Contributed by @richvdh.
+* Move the room list to the new ListView(backed by react-virtuoso)  ([#30515](https://github.com/element-hq/element-web/pull/30515)). Contributed by @langleyd.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Ensure container starts if it is mounted with an empty /modules directory. ([#30705](https://github.com/element-hq/element-web/pull/30705)). Contributed by @RiotRobot.
+* Fix room joining over federation not specifying vias or using aliases ([#30641](https://github.com/element-hq/element-web/pull/30641)). Contributed by @t3chguy.
+* Fix stable-suffixed MSC4133 support ([#30649](https://github.com/element-hq/element-web/pull/30649)). Contributed by @dbkr.
+* Fix i18n of message when a setting is disabled ([#30646](https://github.com/element-hq/element-web/pull/30646)). Contributed by @dbkr.
+* ListView should not handle the arrow keys if there is a modifier applied ([#30633](https://github.com/element-hq/element-web/pull/30633)). Contributed by @langleyd.
+* Make BaseDialog's div keyboard focusable and fix test. ([#30631](https://github.com/element-hq/element-web/pull/30631)). Contributed by @langleyd.
+* Fix: Allow triple-click text selection to flow around pills ([#30349](https://github.com/element-hq/element-web/pull/30349)). Contributed by @AlirezaMrtz.
+* Watch for a 'join' action to know when the call is connected ([#29492](https://github.com/element-hq/element-web/pull/29492)). Contributed by @robintown.
+* Fix: add missing tooltip and aria-label to lock icon next to composer ([#30623](https://github.com/element-hq/element-web/pull/30623)). Contributed by @florianduros.
+* Don't render context menu when scrolling ([#30613](https://github.com/element-hq/element-web/pull/30613)). Contributed by @langleyd.
+
+
+Changes in [1.11.110](https://github.com/element-hq/element-web/releases/tag/v1.11.110) (2025-08-27)
+====================================================================================================
+## ✨ Features
+
+* Hide recovery key when re-entering it while creating or changing it ([#30499](https://github.com/element-hq/element-web/pull/30499)). Contributed by @andybalaam.
+* Add `?no_universal_links=true` to OIDC url so EX doesn't try to handle it ([#29439](https://github.com/element-hq/element-web/pull/29439)). Contributed by @t3chguy.
+* Show a blue lock for unencrypted rooms and hide the grey shield for encrypted rooms ([#30440](https://github.com/element-hq/element-web/pull/30440)). Contributed by @langleyd.
+* Add support for Module API 1.4 ([#30185](https://github.com/element-hq/element-web/pull/30185)). Contributed by @t3chguy.
+* MVVM - Introduce some helpers for snapshot management ([#30398](https://github.com/element-hq/element-web/pull/30398)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* A11y: move focus to right panel when opened ([#30553](https://github.com/element-hq/element-web/pull/30553)). Contributed by @florianduros.
+* Fix e2e warning icon should be white ([#30539](https://github.com/element-hq/element-web/pull/30539)). Contributed by @florianduros.
+* Remove NoOneHere disabled reason. ([#30524](https://github.com/element-hq/element-web/pull/30524)). Contributed by @toger5.
+* Fix downloading files with authenticated media API ([#30520](https://github.com/element-hq/element-web/pull/30520)). Contributed by @t3chguy.
+* Fix call permissions check confusion around element call ([#30521](https://github.com/element-hq/element-web/pull/30521)). Contributed by @t3chguy.
+* Fix line wrap around emoji verification ([#30523](https://github.com/element-hq/element-web/pull/30523)). Contributed by @t3chguy.
+* Don't highlight redacted events ([#30519](https://github.com/element-hq/element-web/pull/30519)). Contributed by @t3chguy.
+* Fix matrix.to links not being handled in the app ([#30522](https://github.com/element-hq/element-web/pull/30522)). Contributed by @t3chguy.
+* Fix issue of new room list taking up the full width ([#30459](https://github.com/element-hq/element-web/pull/30459)). Contributed by @langleyd.
+* Fix widget persistence in React development mode ([#30509](https://github.com/element-hq/element-web/pull/30509)). Contributed by @robintown.
+* Fix widget initialization in React development mode ([#30463](https://github.com/element-hq/element-web/pull/30463)). Contributed by @robintown.
+
+
+Changes in [1.11.109](https://github.com/element-hq/element-web/releases/tag/v1.11.109) (2025-08-11)
+====================================================================================================
+This release supports the upcoming v12 ("hydra") Matrix room version and is necessary to view and participate in these rooms.
+
+## ✨ Features
+
+* [Backport staging] Allow /upgraderoom command without developer mode enabled ([#30529](https://github.com/element-hq/element-web/pull/30529)). Contributed by @RiotRobot.
+* [Backport staging] Support for creator/owner power level ([#30526](https://github.com/element-hq/element-web/pull/30526)). Contributed by @RiotRobot.
+* New room list: change icon and label of menu item for to start a DM ([#30470](https://github.com/element-hq/element-web/pull/30470)). Contributed by @florianduros.
+* Implement the member list with virtuoso ([#29869](https://github.com/element-hq/element-web/pull/29869)). Contributed by @langleyd.
+* Add labs option for history sharing on invite ([#30313](https://github.com/element-hq/element-web/pull/30313)). Contributed by @richvdh.
+* Bump wysiwyg to 2.39.0 adding support for pasting rich text content in the Rich Text Edtior ([#30421](https://github.com/element-hq/element-web/pull/30421)). Contributed by @langleyd.
+* Support `EventShieldReason.MISMATCHED_SENDER` ([#30403](https://github.com/element-hq/element-web/pull/30403)). Contributed by @richvdh.
+* Change unencrypted and public pills to blue ([#30399](https://github.com/element-hq/element-web/pull/30399)). Contributed by @florianduros.
+* Change color of public room icon ([#30390](https://github.com/element-hq/element-web/pull/30390)). Contributed by @florianduros.
+* Script for updating storybook screenshots ([#30340](https://github.com/element-hq/element-web/pull/30340)). Contributed by @dbkr.
+* Add toggle to hide empty state in devtools ([#30352](https://github.com/element-hq/element-web/pull/30352)). Contributed by @toger5.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Use userId to filter users in non-federated rooms when showing the InviteDialog ([#30537](https://github.com/element-hq/element-web/pull/30537)). Contributed by @RiotRobot.
+* [Backport staging] Catch error when encountering invalid m.room.pinned\_events event ([#30536](https://github.com/element-hq/element-web/pull/30536)). Contributed by @RiotRobot.
+* Update for compatibility with v12 rooms ([#30452](https://github.com/element-hq/element-web/pull/30452)). Contributed by @dbkr.
+* New room list: fix tooltip on presence ([#30474](https://github.com/element-hq/element-web/pull/30474)). Contributed by @florianduros.
+* New room list: add tooltip for presence and room status ([#30472](https://github.com/element-hq/element-web/pull/30472)). Contributed by @florianduros.
+* Fix: Clicking on an item in the member list causes it to scroll to the top rather than show the profile view ([#30455](https://github.com/element-hq/element-web/pull/30455)). Contributed by @langleyd.
+* Put the 'decrypting' tooltip back ([#30446](https://github.com/element-hq/element-web/pull/30446)). Contributed by @dbkr.
+* Use server name explicitly for via. ([#30362](https://github.com/element-hq/element-web/pull/30362)). Contributed by @Half-Shot.
+* fix: replace hardcoded string in poll history dialog ([#30402](https://github.com/element-hq/element-web/pull/30402)). Contributed by @florianduros.
+* fix: replace hardcoded string on qr code back button ([#30401](https://github.com/element-hq/element-web/pull/30401)). Contributed by @florianduros.
+* Fix color of icon button with outline ([#30361](https://github.com/element-hq/element-web/pull/30361)). Contributed by @florianduros.
+
+
+Changes in [1.11.108](https://github.com/element-hq/element-web/releases/tag/v1.11.108) (2025-07-30)
+====================================================================================================
+## 🐛 Bug Fixes
+
+* [Backport staging] Fix downloaded attachments not being decrypted ([#30434](https://github.com/element-hq/element-web/pull/30434)). Contributed by @RiotRobot.
+
+
+Changes in [1.11.107](https://github.com/element-hq/element-web/releases/tag/v1.11.107) (2025-07-29)
+====================================================================================================
+## ✨ Features
+
+* Message preview should show tooltip with the full message on hover ([#30265](https://github.com/element-hq/element-web/pull/30265)). Contributed by @MidhunSureshR.
+* Support rendering notification badges on platforms that do their own icon overlays ([#30315](https://github.com/element-hq/element-web/pull/30315)). Contributed by @Half-Shot.
+* Add SubscriptionViewModel base class ([#30297](https://github.com/element-hq/element-web/pull/30297)). Contributed by @dbkr.
+* Enhancement: Save image on CTRL+S ([#30330](https://github.com/element-hq/element-web/pull/30330)). Contributed by @ioalexander.
+* Add quote functionality to MessageContextMenu (#29893) ([#30323](https://github.com/element-hq/element-web/pull/30323)). Contributed by @AlirezaMrtz.
+* Initial structure for shared component views ([#30216](https://github.com/element-hq/element-web/pull/30216)). Contributed by @dbkr.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Fix e2e shield being invisible in white mode for encrypted room ([#30411](https://github.com/element-hq/element-web/pull/30411)). Contributed by @RiotRobot.
+* Force ED titlebar color for new room list ([#30332](https://github.com/element-hq/element-web/pull/30332)). Contributed by @florianduros.
+* Add a background color to left panel for macos titlebar in element desktop ([#30328](https://github.com/element-hq/element-web/pull/30328)). Contributed by @florianduros.
+* Fix: Prevent page refresh on Enter key in right panel member search ([#30312](https://github.com/element-hq/element-web/pull/30312)). Contributed by @AlirezaMrtz.
+
+
+Changes in [1.11.106](https://github.com/element-hq/element-web/releases/tag/v1.11.106) (2025-07-15)
+====================================================================================================
+## ✨ Features
+
+* [Backport staging] Fix e2e icon colour ([#30304](https://github.com/element-hq/element-web/pull/30304)). Contributed by @RiotRobot.
+* Add support for module message hint `allowDownloadingMedia` ([#30252](https://github.com/element-hq/element-web/pull/30252)). Contributed by @Half-Shot.
+* Update the mobile\_guide page to the new design and link out to Element X by default. ([#30172](https://github.com/element-hq/element-web/pull/30172)). Contributed by @pixlwave.
+* Filter settings exported when rageshaking ([#30236](https://github.com/element-hq/element-web/pull/30236)). Contributed by @Half-Shot.
+* Allow Element Call to learn the room name ([#30213](https://github.com/element-hq/element-web/pull/30213)). Contributed by @robintown.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Fix missing image download button ([#30322](https://github.com/element-hq/element-web/pull/30322)). Contributed by @RiotRobot.
+* Fix transparent verification checkmark in dark mode ([#30235](https://github.com/element-hq/element-web/pull/30235)). Contributed by @Banbuii.
+* Fix logic in DeviceListener ([#30230](https://github.com/element-hq/element-web/pull/30230)). Contributed by @uhoreg.
+* Disable file drag-and-drop if insufficient permissions ([#30186](https://github.com/element-hq/element-web/pull/30186)). Contributed by @t3chguy.
+
+
+Changes in [1.11.105](https://github.com/element-hq/element-web/releases/tag/v1.11.105) (2025-07-01)
+====================================================================================================
+## ✨ Features
+
+* New room list: add context menu to room list item ([#29952](https://github.com/element-hq/element-web/pull/29952)). Contributed by @florianduros.
+* Support for custom message components via Module API ([#30074](https://github.com/element-hq/element-web/pull/30074)). Contributed by @Half-Shot.
+* Prompt users to set up recovery ([#30075](https://github.com/element-hq/element-web/pull/30075)). Contributed by @uhoreg.
+* Update `IconButton` colors ([#30124](https://github.com/element-hq/element-web/pull/30124)). Contributed by @florianduros.
+* New room list: filter list can be collapsed  ([#29992](https://github.com/element-hq/element-web/pull/29992)). Contributed by @florianduros.
+* Show `EmptyRoomListView` when low priority filter matches zero rooms ([#30122](https://github.com/element-hq/element-web/pull/30122)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* Fix untranslatable string "People" in notifications beta ([#30165](https://github.com/element-hq/element-web/pull/30165)). Contributed by @t3chguy.
+* Force verification even after logging in via delegate ([#30141](https://github.com/element-hq/element-web/pull/30141)). Contributed by @andybalaam.
+* Hide add integrations button based on UIComponent.AddIntegrations ([#30140](https://github.com/element-hq/element-web/pull/30140)). Contributed by @t3chguy.
+* Use nav for new room list and label sections ([#30134](https://github.com/element-hq/element-web/pull/30134)). Contributed by @dbkr.
+* Spacestore should emit event after rebuilding home space ([#30132](https://github.com/element-hq/element-web/pull/30132)). Contributed by @MidhunSureshR.
+* Handle m.room.pinned\_events being invalid ([#30129](https://github.com/element-hq/element-web/pull/30129)). Contributed by @t3chguy.
+
+
+Changes in [1.11.104](https://github.com/element-hq/element-web/releases/tag/v1.11.104) (2025-06-17)
+====================================================================================================
+## ✨ Features
+
+* Update the mobile\_guide page to the new design. ([#30006](https://github.com/element-hq/element-web/pull/30006)). Contributed by @pixlwave.
+* Provide a devtool for manually verifying other devices ([#30094](https://github.com/element-hq/element-web/pull/30094)). Contributed by @andybalaam.
+* Implement MSC4155: Invite filtering ([#29603](https://github.com/element-hq/element-web/pull/29603)). Contributed by @Half-Shot.
+* Add low priority avatar decoration to room tile ([#30065](https://github.com/element-hq/element-web/pull/30065)). Contributed by @MidhunSureshR.
+* Add ability to prevent window content being captured by other apps (Desktop) ([#30098](https://github.com/element-hq/element-web/pull/30098)). Contributed by @t3chguy.
+* New room list: move message preview in user settings ([#30023](https://github.com/element-hq/element-web/pull/30023)). Contributed by @florianduros.
+* New room list: change room options icon ([#30029](https://github.com/element-hq/element-web/pull/30029)). Contributed by @florianduros.
+* RoomListStore: Sort low priority rooms to the bottom of the list ([#30070](https://github.com/element-hq/element-web/pull/30070)). Contributed by @MidhunSureshR.
+* Add low priority filter pill to the room list UI ([#30060](https://github.com/element-hq/element-web/pull/30060)). Contributed by @MidhunSureshR.
+* New room list: remove color gradient in space panel ([#29721](https://github.com/element-hq/element-web/pull/29721)). Contributed by @florianduros.
+* /share?msg=foo endpoint using forward message dialog ([#29874](https://github.com/element-hq/element-web/pull/29874)). Contributed by @ara4n.
+
+## 🐛 Bug Fixes
+
+* Do not send empty auth when setting up cross-signing keys ([#29914](https://github.com/element-hq/element-web/pull/29914)). Contributed by @gnieto.
+* Settings: flip local video feed by default ([#29501](https://github.com/element-hq/element-web/pull/29501)). Contributed by @jbtrystram.
+* AccessSecretStorageDialog: various fixes ([#30093](https://github.com/element-hq/element-web/pull/30093)). Contributed by @richvdh.
+* AccessSecretStorageDialog: fix inability to enter recovery key ([#30090](https://github.com/element-hq/element-web/pull/30090)). Contributed by @richvdh.
+* Fix failure to upload thumbnail causing image to send as file ([#30086](https://github.com/element-hq/element-web/pull/30086)). Contributed by @t3chguy.
+* Low priority menu item should be a toggle ([#30071](https://github.com/element-hq/element-web/pull/30071)). Contributed by @MidhunSureshR.
+* Add sanity checks to prevent users from ignoring themselves ([#30079](https://github.com/element-hq/element-web/pull/30079)). Contributed by @MidhunSureshR.
+* Fix issue with duplicate images ([#30073](https://github.com/element-hq/element-web/pull/30073)). Contributed by @fatlewis.
+* Handle errors returned from Seshat ([#30083](https://github.com/element-hq/element-web/pull/30083)). Contributed by @richvdh.
+
+
+Changes in [1.11.103](https://github.com/element-hq/element-web/releases/tag/v1.11.103) (2025-06-10)
+====================================================================================================
+## 🐛 Bug Fixes
+
++ Check the sender of an event matches owner of session, preventing sender spoofing by homeserver owners.
+[13c1d20](https://github.com/matrix-org/matrix-rust-sdk/commit/13c1d2048286bbabf5e7bc6b015aafee98f04d55) (High, [GHSA-x958-rvg6-956w](https://github.com/matrix-org/matrix-rust-sdk/security/advisories/GHSA-x958-rvg6-956w)).
+
+Changes in [1.11.102](https://github.com/element-hq/element-web/releases/tag/v1.11.102) (2025-06-03)
+====================================================================================================
+## ✨ Features
+
+* EW: Modernize the recovery key input modal ([#29819](https://github.com/element-hq/element-web/pull/29819)). Contributed by @uhoreg.
+* New room list: move secondary filters into primary filters ([#29972](https://github.com/element-hq/element-web/pull/29972)). Contributed by @florianduros.
+* Prompt the user when key storage is unexpectedly off ([#29912](https://github.com/element-hq/element-web/pull/29912)). Contributed by @andybalaam.
+* New room list: move sort menu in room list header ([#29983](https://github.com/element-hq/element-web/pull/29983)). Contributed by @florianduros.
+* New room list: rework spacing of room list item ([#29965](https://github.com/element-hq/element-web/pull/29965)). Contributed by @florianduros.
+* RLS: Remove forgotten room from skiplist ([#29933](https://github.com/element-hq/element-web/pull/29933)). Contributed by @MidhunSureshR.
+* Add room list sorting ([#29951](https://github.com/element-hq/element-web/pull/29951)). Contributed by @dbkr.
+* Don't use the minimised width(68px) on the new room list ([#29778](https://github.com/element-hq/element-web/pull/29778)). Contributed by @langleyd.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Close call options popup menu when option has been selected ([#30054](https://github.com/element-hq/element-web/pull/30054)). Contributed by @RiotRobot.
+* RoomListStoreV3: Only add new rooms that pass `VisibilityProvider` check ([#29974](https://github.com/element-hq/element-web/pull/29974)). Contributed by @MidhunSureshR.
+* Re-order primary filters ([#29957](https://github.com/element-hq/element-web/pull/29957)). Contributed by @dbkr.
+* Fix leaky CSS adding `!` to all H1 elements ([#29964](https://github.com/element-hq/element-web/pull/29964)). Contributed by @t3chguy.
+* Fix extensions panel style ([#29273](https://github.com/element-hq/element-web/pull/29273)). Contributed by @langleyd.
+* Fix state events being hidden from widgets in read\_events actions ([#29954](https://github.com/element-hq/element-web/pull/29954)). Contributed by @robintown.
+* Remove old filter test ([#29963](https://github.com/element-hq/element-web/pull/29963)). Contributed by @dbkr.
+
+
+Changes in [1.11.101](https://github.com/element-hq/element-web/releases/tag/v1.11.101) (2025-05-20)
+====================================================================================================
+## ✨ Features
+
+* New room list: add keyboard navigation support ([#29805](https://github.com/element-hq/element-web/pull/29805)). Contributed by @florianduros.
+* Use the JoinRuleSettings component for the guest link access prompt. ([#28614](https://github.com/element-hq/element-web/pull/28614)). Contributed by @toger5.
+* Add loading state to the new room list view ([#29725](https://github.com/element-hq/element-web/pull/29725)). Contributed by @langleyd.
+* Make OIDC identity reset consistent with EX ([#29854](https://github.com/element-hq/element-web/pull/29854)). Contributed by @andybalaam.
+* Support error code for email / phone adding unsupported (MSC4178) ([#29855](https://github.com/element-hq/element-web/pull/29855)). Contributed by @dbkr.
+* Update identity reset UI (Make consistent with EX) ([#29701](https://github.com/element-hq/element-web/pull/29701)). Contributed by @andybalaam.
+* Add secondary filters to the new room list ([#29818](https://github.com/element-hq/element-web/pull/29818)). Contributed by @dbkr.
+* Fix battery drain from Web Audio ([#29203](https://github.com/element-hq/element-web/pull/29203)). Contributed by @mbachry.
+
+## 🐛 Bug Fixes
+
+* Fix go home shortcut on macos and change toggle action events shortcut ([#29929](https://github.com/element-hq/element-web/pull/29929)). Contributed by @florianduros.
+* New room list: fix outdated message preview when space or filter change ([#29925](https://github.com/element-hq/element-web/pull/29925)). Contributed by @florianduros.
+* Stop migrating to MSC4278 if the config exists. ([#29924](https://github.com/element-hq/element-web/pull/29924)). Contributed by @Half-Shot.
+* Ensure consistent download file name on download from ImageView ([#29913](https://github.com/element-hq/element-web/pull/29913)). Contributed by @t3chguy.
+* Add error toast when service worker registration fails ([#29895](https://github.com/element-hq/element-web/pull/29895)). Contributed by @t3chguy.
+* New Room List: Prevent old tombstoned rooms from appearing in the list ([#29881](https://github.com/element-hq/element-web/pull/29881)). Contributed by @MidhunSureshR.
+* Remove lag in search field ([#29885](https://github.com/element-hq/element-web/pull/29885)). Contributed by @florianduros.
+* Respect UIFeature.Voip ([#29873](https://github.com/element-hq/element-web/pull/29873)). Contributed by @langleyd.
+* Allow jumping to message search from spotlight ([#29850](https://github.com/element-hq/element-web/pull/29850)). Contributed by @t3chguy.
+
+
+Changes in [1.11.100](https://github.com/element-hq/element-web/releases/tag/v1.11.100) (2025-05-06)
+====================================================================================================
+## ✨ Features
+
+* Move rich topics out of labs / stabilise MSC3765 ([#29817](https://github.com/element-hq/element-web/pull/29817)). Contributed by @Johennes.
+* Spell out that Element Web does \*not\* work on mobile. ([#29211](https://github.com/element-hq/element-web/pull/29211)). Contributed by @ara4n.
+* Add message preview support to the new room list ([#29784](https://github.com/element-hq/element-web/pull/29784)). Contributed by @dbkr.
+* Global configuration flag for media previews ([#29582](https://github.com/element-hq/element-web/pull/29582)). Contributed by @Half-Shot.
+* New room list: add partial keyboard shortcuts support ([#29783](https://github.com/element-hq/element-web/pull/29783)). Contributed by @florianduros.
+* MVVM RoomSummaryCard Topic ([#29710](https://github.com/element-hq/element-web/pull/29710)). Contributed by @MarcWadai.
+* Warn on self change from settings > roles ([#28926](https://github.com/element-hq/element-web/pull/28926)). Contributed by @MarcWadai.
+* New room list: new visual for invitation ([#29773](https://github.com/element-hq/element-web/pull/29773)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* Fix incorrect display of the user info display name ([#29826](https://github.com/element-hq/element-web/pull/29826)). Contributed by @langleyd.
+* RoomListStore: Remove invite rooms on decline ([#29804](https://github.com/element-hq/element-web/pull/29804)). Contributed by @MidhunSureshR.
+* Fix the buttons not being displayed with long preview text ([#29811](https://github.com/element-hq/element-web/pull/29811)). Contributed by @dbkr.
+* New room list: fix missing/incorrect notification decoration  ([#29796](https://github.com/element-hq/element-web/pull/29796)). Contributed by @florianduros.
+* New Room List: Prevent potential scroll jump/flicker when switching spaces ([#29781](https://github.com/element-hq/element-web/pull/29781)). Contributed by @MidhunSureshR.
+* New room list: fix incorrect decoration ([#29770](https://github.com/element-hq/element-web/pull/29770)). Contributed by @florianduros.
+
+
 Changes in [1.11.99](https://github.com/element-hq/element-web/releases/tag/v1.11.99) (2025-04-23)
 ==================================================================================================
 No changes, just bumping the version to accommodate a new Element Desktop release

CONTRIBUTING.md

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

Dockerfile

@@ -1,7 +1,7 @@
-# syntax=docker.io/docker/dockerfile:1.15-labs
+# syntax=docker.io/docker/dockerfile:1.18-labs@sha256:79cdc14e1c220efb546ad14a8ebc816e3277cd72d27195ced5bebdd226dd1025
 
 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye AS builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:5e638ea282ab9f0224949e8cfc7bb4621710e5d21b19fc3cf6e8884fcb5839f0 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
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:13d1e0acc26b7ce8a40d155473759387e04d1433e73726d4bb49c67bdb197fe5
 
 # Need root user to install packages & manipulate the usr directory
 USER root

README.md

@@ -27,7 +27,7 @@ Element has several tiers of support for different environments:
 - Best effort
     - Definition:
         - Issues **accepted**, regressions **do not block** the release
-        - The wider Element Products(including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
+        - The wider Element Products (including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
         - The element web project and its contributors should keep the client functioning and gracefully degrade where other sibling features (E.g. Element Call) may not function.
     - Last major release of Firefox ESR and Chrome/Edge Extended Stable
 - Community Supported
@@ -126,7 +126,7 @@ guide](https://classic.yarnpkg.com/en/docs/install) if you do not have it alread
 1. Install the prerequisites: `yarn install`.
     - If you're using the `develop` branch, then it is recommended to set up a
       proper development environment (see [Setting up a dev
-      environment](#setting-up-a-dev-environment) below). Alternatively, you
+      environment](./developer_guide.md#setting-up-a-dev-environment) below). Alternatively, you
       can use <https://develop.element.io> - the continuous integration release of
       the develop branch.
 1. Configure the app by copying `config.sample.json` to `config.json` and

code_style.md

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

config.sample.json

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

declaration.d.ts

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

developer_guide.md

@@ -109,7 +109,7 @@ yarn test
 
 ### End-to-End tests
 
-See [matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/#end-to-end-tests) for how to run the end-to-end tests.
+See [`docs/playwright.md`](./docs/playwright.md) for how to run the end-to-end tests.
 
 ## General github guidelines
 

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

@@ -14,10 +14,9 @@ entrypoint_log() {
 mkdir -p /tmp/element-web-config
 cp /app/config*.json /tmp/element-web-config/
 
-# If there are modules to be loaded
-if [ -d "/modules" ]; then
+# If the module directory exists AND the module directory has modules in it
+if [ -d "/modules" ] && [ "$( ls -A '/modules' )" ]; then
     cd /modules
-
     for MODULE in *
     do
         # If the module has a package.json, use its main field as the entrypoint

docs/MVVM-v1.md

@@ -0,0 +1,69 @@
+# 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).

docs/MVVM.md

@@ -10,58 +10,80 @@ 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 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:
+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
-    const FooView: React.FC<IProps> = (props: IProps) => {
-    	const vm = useFooViewModel();
-    	....
-    	return(
-    		<div>
-    			{vm.somethingUseful}
-    		</div>
-    	);
+    // 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>
+        );
     }
     ```
-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>
-    	);
+
+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.
+
+    ```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" });
+        }
     }
     ```
-4. Multiple views can share the same view model if necessary.
+
+4. A full example is available [here](https://github.com/element-hq/element-web/blob/develop/src/viewmodels/audio/AudioPlayerViewModel.ts)
 
 ### Benefits
 
 1. MVVM forces a separation of concern i.e we will no longer have large react components that have a lot of state and rendering code mixed together. This improves code readability and makes it easier to introduce changes.
 2. Introduces the possibility of code reuse. You can reuse an old view model with a new view or vice versa.
 3. Adding to the point above, in future you could import element-web view models to your project and supply your own views thus creating something similar to the [hydrogen sdk](https://github.com/element-hq/hydrogen-web/blob/master/doc/SDK.md).
-
-### Example
-
-We started experimenting with MVVM in the redesigned memberlist, you can see the code [here](https://github.com/vector-im/element-web/blob/develop/src/components/views/rooms/MemberList/MemberListView.tsx).

docs/config.md

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

docs/e2ee.md

@@ -38,45 +38,20 @@ 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.
 
-# Secure backup
+# Setting up recovery
 
 By default, Element strongly encourages (but does not require) users to set up
-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.
+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.
 
-## Requiring secure backup
+## Removal of old settings
 
-To require Secure Backup to be configured before Element can be used, set the
-following on your homeserver's `/.well-known/matrix/client` config:
+Support for the configuration options `secure_backup_required` and `secure_backup_setup_methods`
+in the `/.well-known/matrix/client` config has been removed.
 
-```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"]`.
+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.
 
 # Compatibility
 

docs/kubernetes.md

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

element.io/app/config.json

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

element.io/develop/config.json

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

jest.config.ts

@@ -17,11 +17,13 @@ const config: Config = {
         // This is needed to be able to load dual CJS/ESM WASM packages e.g. rust crypto & matrix-wywiwyg
         customExportConditions: ["browser", "node"],
     },
-    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)"],
+    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)", "<rootDir>/src/shared-components/**/*.test.[t]s?(x)"],
     globalSetup: "<rootDir>/test/globalSetup.ts",
     setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
     setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
     moduleNameMapper: {
+        // Support CSS module
+        "\\.(module.css)$": "identity-obj-proxy",
         "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",
@@ -38,10 +40,10 @@ const config: Config = {
         "^!!raw-loader!.*": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
-        // Requires ESM which is incompatible with our current Jest setup
-        "^@element-hq/element-web-module-api$": "<rootDir>/__mocks__/empty.js",
     },
-    transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
+    transformIgnorePatterns: [
+        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
+    ],
     collectCoverageFrom: [
         "<rootDir>/src/**/*.{js,ts,tsx}",
         // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is

knip.ts

@@ -2,7 +2,6 @@ import { KnipConfig } from "knip";
 
 export default {
     entry: [
-        "src/vector/index.ts",
         "src/serviceworker/index.ts",
         "src/workers/*.worker.ts",
         "src/utils/exportUtils/exportJS.js",
@@ -12,8 +11,6 @@ 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: [
@@ -42,10 +39,18 @@ 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;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.99",
+    "version": "1.12.0",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -35,6 +35,7 @@
         "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
         "make-component": "node scripts/make-react-component.js",
         "rethemendex": "./res/css/rethemendex.sh",
+        "prepare": "yarn run build:res && vite build",
         "clean": "rimraf lib webapp",
         "build": "yarn clean && yarn build:genfiles && yarn build:bundle",
         "build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
@@ -65,23 +66,28 @@
         "coverage": "yarn test --coverage",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
         "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
-        "postinstall": "patch-package"
+        "postinstall": "patch-package",
+        "storybook": "storybook dev -p 6007",
+        "build-storybook": "storybook build",
+        "test:storybook": "test-storybook --url http://localhost:6007/",
+        "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
+        "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.1.0",
-        "@playwright/test": "1.52.0",
-        "@types/react": "19.1.2",
-        "@types/react-dom": "19.1.2",
-        "oidc-client-ts": "3.2.0",
+        "**/pretty-format/react-is": "19.1.1",
+        "@playwright/test": "1.54.2",
+        "@types/react": "19.1.14",
+        "@types/react-dom": "19.1.9",
+        "oidc-client-ts": "3.3.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001715",
-        "testcontainers": "10.24.2",
+        "caniuse-lite": "1.0.30001745",
+        "testcontainers": "^11.0.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "^0.1.1",
+        "@element-hq/element-web-module-api": "1.4.1",
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
@@ -89,12 +95,11 @@
         "@matrix-org/emojibase-bindings": "^1.3.4",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
-        "@sentry/browser": "^9.0.0",
+        "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@types/react-virtualized": "^9.21.30",
-        "@vector-im/compound-design-tokens": "^4.0.0",
-        "@vector-im/compound-web": "^7.10.2",
-        "@vector-im/matrix-wysiwyg": "2.38.3",
+        "@vector-im/compound-design-tokens": "^6.0.0",
+        "@vector-im/compound-web": "^8.1.2",
+        "@vector-im/matrix-wysiwyg": "2.40.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -112,7 +117,7 @@
         "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
-        "filesize": "10.1.6",
+        "filesize": "11.0.13",
         "github-markdown-css": "^5.5.1",
         "glob-to-regexp": "^0.4.1",
         "highlight.js": "^11.3.1",
@@ -123,9 +128,9 @@
         "jsrsasign": "^11.0.0",
         "jszip": "^3.7.0",
         "katex": "^0.16.0",
-        "linkify-react": "4.2.0",
-        "linkify-string": "4.2.0",
-        "linkifyjs": "4.2.0",
+        "linkify-react": "4.3.2",
+        "linkify-string": "4.3.2",
+        "linkifyjs": "4.3.2",
         "lodash": "^4.17.21",
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
@@ -138,7 +143,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.236.7",
+        "posthog-js": "1.268.6",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -146,16 +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-virtualized": "^9.22.5",
+        "react-virtuoso": "^4.14.0",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.16.0",
+        "sanitize-html": "2.17.0",
         "tar-js": "^0.3.0",
         "temporal-polyfill": "^0.3.0",
-        "ua-parser-js": "^1.0.2",
-        "uuid": "^11.0.0",
+        "ua-parser-js": "1.0.40",
+        "uuid": "^13.0.0",
         "what-input": "^5.2.10"
     },
     "devDependencies": {
@@ -180,20 +186,27 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.10.0",
-        "@element-hq/element-web-playwright-common": "^1.1.5",
+        "@element-hq/element-call-embedded": "0.16.0",
+        "@element-hq/element-web-playwright-common": "^1.4.6",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@rrweb/types": "^2.0.0-alpha.18",
-        "@sentry/webpack-plugin": "^3.0.0",
-        "@stylistic/eslint-plugin": "^4.0.0",
+        "@sentry/webpack-plugin": "^4.0.0",
+        "@storybook/addon-a11y": "^9.0.18",
+        "@storybook/addon-designs": "^10.0.1",
+        "@storybook/addon-docs": "^9.0.12",
+        "@storybook/icons": "^1.4.0",
+        "@storybook/react-vite": "^9.0.15",
+        "@storybook/test-runner": "^0.23.0",
+        "@stylistic/eslint-plugin": "^5.0.0",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
+        "@types/content-type": "^1.1.9",
         "@types/counterpart": "^0.18.1",
         "@types/css-tree": "^2.3.8",
         "@types/diff-match-patch": "^1.0.32",
@@ -212,15 +225,15 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.2",
+        "@types/react": "19.1.14",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.2",
+        "@types/react-dom": "19.1.9",
         "@types/react-transition-group": "^4.4.0",
-        "@types/sanitize-html": "2.15.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",
@@ -231,10 +244,10 @@
         "concurrently": "^9.0.0",
         "copy-webpack-plugin": "^13.0.0",
         "core-js": "^3.38.1",
-        "cronstrue": "^2.41.0",
+        "cronstrue": "^3.0.0",
         "css-loader": "^7.0.0",
         "css-minimizer-webpack-plugin": "^7.0.0",
-        "dotenv": "^16.0.2",
+        "dotenv": "^17.0.0",
         "eslint": "8.57.1",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^10.0.0",
@@ -246,23 +259,25 @@
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
         "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-storybook": "^9.0.12",
         "eslint-plugin-unicorn": "^56.0.0",
         "express": "^5.0.0",
         "fake-indexeddb": "^6.0.0",
         "fetch-mock": "9.11.0",
         "fetch-mock-jest": "^1.5.1",
         "file-loader": "^6.0.0",
-        "glob": "^11.0.0",
         "html-webpack-plugin": "^5.5.3",
         "husky": "^9.0.0",
+        "identity-obj-proxy": "^3.0.0",
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
         "jest-environment-jsdom": "^29.7.0",
+        "jest-image-snapshot": "^6.5.1",
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",
         "knip": "^5.36.2",
-        "lint-staged": "^15.0.2",
+        "lint-staged": "^16.0.0",
         "matrix-web-i18n": "^3.2.1",
         "mini-css-extract-plugin": "2.9.2",
         "minimist": "^1.2.6",
@@ -275,26 +290,30 @@
         "postcss-hexrgba": "2.1.0",
         "postcss-import": "16.1.0",
         "postcss-loader": "8.1.1",
-        "postcss-mixins": "^11.0.0",
+        "postcss-mixins": "^12.0.0",
         "postcss-nested": "^7.0.0",
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.5.3",
+        "prettier": "3.6.2",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
-        "stylelint": "^16.13.0",
-        "stylelint-config-standard": "^38.0.0",
+        "storybook": "^9.0.12",
+        "stylelint": "^16.23.0",
+        "stylelint-config-standard": "^39.0.0",
         "stylelint-scss": "^6.0.0",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
-        "testcontainers": "^10.20.0",
+        "testcontainers": "^11.0.0",
         "ts-node": "^10.9.1",
         "typescript": "5.8.3",
         "util": "^0.12.5",
+        "vite": "^7.0.1",
+        "vite-plugin-dts": "^4.5.4",
+        "vite-plugin-node-polyfills": "^0.24.0",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.8.0",
@@ -311,5 +330,6 @@
     },
     "engines": {
         "node": ">=20.0.0"
-    }
+    },
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

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

@@ -11,3 +11,42 @@ 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;
+     }
+   }, {

patches/@types+mdx+2.0.13.patch

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

patches/@types+react+19.0.10.patch

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

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_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).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_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).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_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).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_RoomTile_selected")).toBeFocused();
+        await expect(page.locator(".mx_RoomListItemView_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_RoomTile_selected")).toBeFocused();
+        await expect(page.locator(".mx_RoomListItemView_selected")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).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_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).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_RoomTile")).toBeFocused();
+        await expect(page.locator(".mx_RoomListItemView")).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_RoomTile")).toBeFocused();
+        await expect(page.locator(".mx_RoomListItemView")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
         await expect(page.locator(".mx_SpaceButton_active")).toBeFocused();

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

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

playwright/e2e/composer/CIDER.spec.ts

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

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

@@ -1,34 +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 { test, expect } from "../../element-web-test";
-
-test.describe("Create Room", () => {
-    test.use({ displayName: "Jim" });
-
-    test("should allow us to create a public room with name, topic & address set", async ({ page, user, app }) => {
-        const name = "Test room 1";
-        const topic = "This room is dedicated to this test and this test only!";
-
-        const dialog = await app.openCreateRoomDialog();
-        // Fill name & topic
-        await dialog.getByRole("textbox", { name: "Name" }).fill(name);
-        await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
-        // Change room to public
-        await dialog.getByRole("button", { name: "Room visibility" }).click();
-        await dialog.getByRole("option", { name: "Public room" }).click();
-        // Fill room address
-        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1");
-        // Submit
-        await dialog.getByRole("button", { name: "Create room" }).click();
-
-        await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`));
-        const header = page.locator(".mx_RoomHeader");
-        await expect(header).toContainText(name);
-    });
-});

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

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

playwright/e2e/crypto/crypto.spec.ts

@@ -21,12 +21,11 @@ const checkDMRoom = async (page: Page) => {
 };
 
 const startDMWithBob = async (page: Page, bob: Bot) => {
-    await page.locator(".mx_LegacyRoomList").getByRole("button", { name: "Start chat" }).click();
+    await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+    await page.getByRole("menuitem", { name: "Start chat" }).click();
     await page.getByTestId("invite-dialog-input").fill(bob.credentials.userId);
-    await page.locator(".mx_InviteDialog_tile_nameStack_name").getByText("Bob").click();
-    await expect(
-        page.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText("Bob"),
-    ).toBeVisible();
+    await page.getByRole("option", { name: bob.credentials.displayName }).click();
+    await expect(page.getByTestId("invite-dialog-input-wrapper").getByText("Bob")).toBeVisible();
     await page.getByRole("button", { name: "Go" }).click();
 };
 
@@ -158,6 +157,9 @@ test.describe("Cryptography", function () {
             await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
             await checkDMRoom(page);
             const bobRoomId = await bobJoin(page, bob);
+            // We no longer show the grey badge in the composer, check that it is not there.
+            await expect(page.locator(".mx_MessageComposer_e2eIcon")).toHaveCount(0);
+
             await testMessages(page, bob, bobRoomId);
             await verify(app, bob);
 
@@ -168,6 +170,7 @@ test.describe("Cryptography", function () {
 
             // Take a snapshot of RoomSummaryCard with a verified E2EE icon
             await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("RoomSummaryCard-with-verified-e2ee.png");
+            await expect(page.locator(".mx_MessageComposer_e2eIcon")).toMatchScreenshot("composer-e2e-icon.png");
         },
     );
 

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

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

playwright/e2e/crypto/dehydration.spec.ts

@@ -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: "Proceed with reset" }).click();
+        await page.getByRole("button", { name: "Can't confirm?" }).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: "Reset all" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Can't confirm" }).click();
         await expect(
             page.getByRole("heading", { name: "Are you sure you want to reset your identity?" }),
         ).toBeVisible();

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

@@ -22,6 +22,7 @@ import {
 } from "./utils";
 import { type Bot } from "../../pages/bot";
 import { Toasts } from "../../pages/toasts.ts";
+import type { ElementAppPage } from "../../pages/ElementAppPage.ts";
 
 test.describe("Device verification", { tag: "@no-webkit" }, () => {
     let aliceBotClient: Bot;
@@ -35,43 +36,50 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         expectedBackupVersion = res.expectedBackupVersion;
     });
 
-    // Click the "Verify with another device" button, and have the bot client auto-accept it.
+    // Click the "Use 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 "Verify with another device"
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with another device" }).click();
+        // Click on "Use another device"
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Use another device" }).click();
 
         // alice bot responds yes to verification request from alice
         return promiseVerificationRequest;
     }
 
-    test("Verify device with SAS during login", async ({ page, app, credentials, homeserver }) => {
-        await logIntoElement(page, credentials);
+    test(
+        "Verify device with SAS during login",
+        { tag: "@screenshot" },
+        async ({ page, app, credentials, homeserver }) => {
+            await logIntoElement(page, credentials);
 
-        // Launch the verification request between alice and the bot
-        const verificationRequest = await initiateAliceVerificationRequest(page);
+            // Launch the verification request between alice and the bot
+            const verificationRequest = await initiateAliceVerificationRequest(page);
 
-        // Handle emoji SAS verification
-        const infoDialog = page.locator(".mx_InfoDialog");
-        // the bot chooses to do an emoji verification
-        const verifier = await verificationRequest.evaluateHandle((request) => request.startVerification("m.sas.v1"));
+            // Handle emoji SAS verification
+            const infoDialog = page.locator(".mx_InfoDialog");
+            // the bot chooses to do an emoji verification
+            const verifier = await verificationRequest.evaluateHandle((request) =>
+                request.startVerification("m.sas.v1"),
+            );
 
-        // Handle emoji request and check that emojis are matching
-        await doTwoWaySasVerification(page, verifier);
+            // Handle emoji request and check that emojis are matching
+            await doTwoWaySasVerification(page, verifier);
 
-        await infoDialog.getByRole("button", { name: "They match" }).click();
-        await infoDialog.getByRole("button", { name: "Got it" }).click();
+            await infoDialog.getByRole("button", { name: "They match" }).click();
+            await expect(page.locator(".mx_E2EIcon_verified")).toMatchScreenshot("device-verified-e2eIcon.png");
+            await infoDialog.getByRole("button", { name: "Got it" }).click();
 
-        // Check that our device is now cross-signed
-        await checkDeviceIsCrossSigned(app);
+            // Check that our device is now cross-signed
+            await checkDeviceIsCrossSigned(app);
 
-        // Check that the current device is connected to key backup
-        // For now we don't check that the backup key is in cache because it's a bit flaky,
-        // as we need to wait for the secret gossiping to happen.
-        await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false);
-    });
+            // Check that the current device is connected to key backup
+            // For now we don't check that the backup key is in cache because it's a bit flaky,
+            // as we need to wait for the secret gossiping to happen.
+            await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false);
+        },
+    );
 
     // Regression test for https://github.com/element-hq/element-web/issues/29110
     test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => {
@@ -116,6 +124,10 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         const toasts = new Toasts(page);
         await toasts.rejectToast("Notifications");
         await toasts.assertNoToasts();
+
+        // There may still be a `/sendToDevice/m.secret.request` in flight, which will later throw an error and cause
+        // a *subsequent* test to fail. Tell playwright to ignore any errors resulting from in-flight routes.
+        await page.unrouteAll({ behavior: "ignoreErrors" });
     });
 
     test("Verify device with QR code during login", async ({ page, app, credentials, homeserver }) => {
@@ -134,8 +146,8 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         );
 
         // Confirm that the bot user scanned successfully
-        await expect(infoDialog.getByText("Almost there! Is your other device showing the same shield?")).toBeVisible();
-        await infoDialog.getByRole("button", { name: "Yes" }).click();
+        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 infoDialog.getByRole("button", { name: "Got it" }).click();
 
         // wait for the bot to see we have finished
@@ -163,39 +175,68 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
 
     test("Verify device with Security Phrase during login", async ({ page, app, credentials, homeserver }) => {
         await logIntoElement(page, credentials);
-
-        // Select the security phrase
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();
-
-        // Fill the passphrase
-        const dialog = page.locator(".mx_Dialog");
-        await dialog.locator("input").fill("new passphrase");
-        await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
-
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Done" }).click();
-
-        // Check that our device is now cross-signed
-        await checkDeviceIsCrossSigned(app);
-
-        // Check that the current device is connected to key backup
-        // The backup decryption key should be in cache also, as we got it directly from the 4S
-        await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
+        await enterRecoveryKeyAndCheckVerified(page, app, "new passphrase");
     });
 
     test("Verify device with Recovery Key during login", async ({ page, app, credentials, homeserver }) => {
+        const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey;
+
+        await logIntoElement(page, credentials);
+        await enterRecoveryKeyAndCheckVerified(page, app, recoveryKey);
+    });
+
+    test("Verify device with Recovery Key from settings", async ({ page, app, credentials }) => {
+        const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey;
+
         await logIntoElement(page, credentials);
 
-        // Select the security phrase
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();
+        /* Dismiss "Verify this device" */
+        const authPage = page.locator(".mx_AuthPage");
+        await authPage.getByRole("button", { name: "Skip verification for now" }).click();
+        await authPage.getByRole("button", { name: "I'll verify later" }).click();
+        await page.waitForSelector(".mx_MatrixChat");
 
-        // Fill the recovery key
+        const settings = await app.settings.openUserSettings("Encryption");
+        await settings.getByRole("button", { name: "Verify this device" }).click();
+        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();
+
+        // Enter the recovery key
         const dialog = page.locator(".mx_Dialog");
-        await dialog.getByRole("button", { name: "use your Recovery Key" }).click();
-        const aliceRecoveryKey = await aliceBotClient.getRecoveryKey();
-        await dialog.locator("#mx_securityKey").fill(aliceRecoveryKey.encodedPrivateKey);
-        await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
+        // We use `pressSequentially` here to make sure that the FocusLock isn't causing us any problems
+        // (cf https://github.com/element-hq/element-web/issues/30089)
+        await dialog.getByTitle("Recovery key").pressSequentially(recoveryKey);
+        await dialog.getByRole("button", { name: "Continue", disabled: false }).click();
 
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Done" }).click();
+        await page.getByRole("button", { name: "Done" }).click();
 
         // Check that our device is now cross-signed
         await checkDeviceIsCrossSigned(app);
@@ -203,7 +244,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         // Check that the current device is connected to key backup
         // The backup decryption key should be in cache also, as we got it directly from the 4S
         await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
-    });
+    }
 
     test("Handle incoming verification request with SAS", async ({ page, credentials, homeserver, toasts }) => {
         await logIntoElement(page, credentials);
@@ -229,7 +270,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: "Verify Session" }).click();
+        await toast.getByRole("button", { name: "Start verification" }).click();
 
         /* Click 'Start' to start SAS verification */
         await page.getByRole("button", { name: "Start" }).click();
@@ -244,10 +285,7 @@ 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();
-        // 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 expect(infoDialog.getByText("Device verified")).toBeVisible();
         await infoDialog.getByRole("button", { name: "Got it" }).click();
     });
 });

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

@@ -14,7 +14,7 @@ import {
     createSecondBotDevice,
     createSharedRoomWithUser,
     enableKeyBackup,
-    logIntoElement,
+    logIntoElementAndVerify,
     logOutOfElement,
     verify,
     waitForDevices,
@@ -58,107 +58,108 @@ test.describe("Cryptography", function () {
             await app.client.network.setupRoute();
         });
 
-        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);
+        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);
 
-            // Dismiss the toast nagging us to set up recovery otherwise it gets in the way of clicking the room list
-            await page.getByRole("button", { name: "Not now" }).click();
+                // Dismiss the toasts nagging us, otherwise they get in the way of clicking the room list
+                await page.getByRole("button", { name: "Dismiss" }).click();
+                await page.getByRole("button", { name: "Yes, dismiss" }).click();
 
-            await bob.sendEvent(testRoomId, null, "m.room.encrypted", {
-                algorithm: "m.megolm.v1.aes-sha2",
-                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 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 expect(lastE2eIcon).toMatchScreenshot("event-shield-warning.png");
+                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,
@@ -194,7 +195,7 @@ test.describe("Cryptography", function () {
                 window.localStorage.clear();
             });
             await page.reload();
-            await logIntoElement(page, aliceCredentials, securityKey);
+            await logIntoElementAndVerify(page, aliceCredentials, securityKey);
 
             /* go back to the test room and find Bob's message again */
             await app.viewRoomById(testRoomId);

playwright/e2e/crypto/toasts.spec.ts

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

playwright/e2e/crypto/utils.ts

@@ -206,32 +206,42 @@ 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, securityKey?: string) {
+export async function logIntoElement(page: Page, credentials: Credentials) {
     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();
+}
 
-    // 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();
+/**
+ * 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);
 
-        const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "use your Recovery Key" });
-        // If the user has set a recovery *passphrase*, they'll be prompted for that first and have to click
-        // through to enter the recovery key which is what we have here. If they haven't, they'll be prompted
-        // for a recovery key straight away. We click the button if it's there so this works in both cases.
-        if (await useSecurityKey.isVisible()) {
-            await useSecurityKey.click();
-        }
-        // Fill in the recovery key
-        await page.locator(".mx_Dialog").locator('input[type="password"]').fill(securityKey);
-        await page.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
-        await page.getByRole("button", { name: "Done" }).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();
     }
+
+    // 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");
 }
 
 /**
@@ -262,8 +272,8 @@ export async function logOutOfElement(page: Page, discardKeys: boolean = false)
 export async function verifySession(app: ElementAppPage, securityKey: string) {
     const settings = await app.settings.openUserSettings("Encryption");
     await settings.getByRole("button", { name: "Verify this device" }).click();
-    await app.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
-    await app.page.locator(".mx_Dialog").locator('input[type="password"]').fill(securityKey);
+    await app.page.getByRole("button", { name: "Use recovery key" }).click();
+    await app.page.locator(".mx_Dialog").getByTitle("Recovery key").fill(securityKey);
     await app.page.getByRole("button", { name: "Continue", disabled: false }).click();
     await app.page.getByRole("button", { name: "Done" }).click();
     await app.settings.closeDialog();
@@ -300,9 +310,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("checkbox", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
     if (!(await keyStorageToggle.isChecked())) {
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
     }
 
     await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
@@ -316,6 +326,25 @@ export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
     return recoveryKey;
 }
 
+/**
+ * Open the encryption settings and disable key storage (and recovery)
+ * Assumes that the current device has been verified
+ */
+export async function disableKeyBackup(app: ElementAppPage): Promise<void> {
+    const encryptionTab = await app.settings.openUserSettings("Encryption");
+
+    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
+    if (await keyStorageToggle.isChecked()) {
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("button", { name: "Delete key storage" }).click();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).isVisible();
+
+        // Wait for the update to account data to stick
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+    }
+    await app.settings.closeDialog();
+}
+
 /**
  * Go through the "Set up Secure Backup" dialog (aka the `CreateSecretStorageDialog`).
  *
@@ -409,8 +438,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("button", { name: "Add room" }).click();
-    await page.locator(".mx_IconizedContextMenu").getByRole("menuitem", { name: "New room" }).click();
+    await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+    await page.getByRole("menuitem", { name: "New room" }).click();
 
     const dialog = page.locator(".mx_Dialog");
 

playwright/e2e/devtools/devtools.spec.ts

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

playwright/e2e/devtools/upgraderoom.spec.ts

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

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

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

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

@@ -50,15 +50,11 @@ test.describe("Invite dialog", function () {
         await expect(other.locator(".mx_InviteDialog_identityServer")).toBeVisible();
 
         // Assert that the bot id is rendered properly
-        await expect(
-            other.locator(".mx_InviteDialog_tile_nameStack_userId").getByText(bot.credentials.userId),
-        ).toBeVisible();
+        await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials.userId)).toBeVisible();
 
-        await other.locator(".mx_InviteDialog_tile_nameStack_name").getByText(botName).click();
+        await other.getByRole("option", { name: botName }).click();
 
-        await expect(
-            other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
-        ).toBeVisible();
+        await expect(other.getByTestId("invite-dialog-input-wrapper").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");
@@ -77,7 +73,8 @@ test.describe("Invite dialog", function () {
         "should support inviting a user to Direct Messages",
         { tag: "@screenshot" },
         async ({ page, app, user, bot }) => {
-            await page.locator(".mx_LegacyRoomList").getByRole("button", { name: "Start chat" }).click();
+            await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+            await page.getByRole("menuitem", { name: "Start chat" }).click();
 
             const other = page.locator(".mx_InviteDialog_other");
             // Assert that the header is rendered
@@ -93,14 +90,10 @@ test.describe("Invite dialog", function () {
 
             await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
 
-            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.getByRole("option", { name: botName }).getByText(bot.credentials.userId)).toBeVisible();
+            await other.getByRole("option", { name: botName }).click();
 
-            await expect(
-                other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
-            ).toBeVisible();
+            await expect(other.getByTestId("invite-dialog-input-wrapper").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");

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.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room 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.getByRole("group", { name: "Invites" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room 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.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room 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.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room 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.getByRole("group", { name: "Invites" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room 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.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room 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.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" });
+        page.getByTestId("room-list").getByRole("option", { name: "Open room 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.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
         ).not.toBeVisible();
     });
 
@@ -244,7 +244,7 @@ test.describe("Knock Into Room", () => {
 
         // Knocked room should appear in Rooms
         await expect(
-            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
         ).toBeVisible();
 
         // bot waits for knock request from Alice
@@ -262,13 +262,10 @@ 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
-                .getByRole("group", { name: "Rooms" })
-                .getByRole("treeitem", { name: "Cybersecurity 1 unread mention." }),
+                .getByTestId("room-list")
+                .getByRole("option", { name: "Open room Cybersecurity with 1 unread mention." }),
         ).toBeVisible();
 
         await expect(roomPreviewBar.getByRole("heading", { name: "You have been denied access" })).toBeVisible();

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

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

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

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

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

@@ -5,8 +5,11 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import { type Visibility } from "matrix-js-sdk/src/matrix";
+import { type Locator, type Page } from "@playwright/test";
+
 import { expect, test } from "../../../element-web-test";
-import type { Locator, Page } from "@playwright/test";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
 
 test.describe("Room list filters and sort", () => {
     test.use({
@@ -19,11 +22,19 @@ test.describe("Room list filters and sort", () => {
     });
 
     function getPrimaryFilters(page: Page): Locator {
-        return page.getByRole("listbox", { name: "Room list filters" });
+        return page.getByTestId("primary-filters");
     }
 
-    function getSecondaryFilters(page: Page): Locator {
-        return page.getByRole("button", { name: "Filter" });
+    function getRoomOptionsMenu(page: Page): Locator {
+        return page.getByRole("button", { name: "Room Options" });
+    }
+
+    function getFilterExpandButton(page: Page): Locator {
+        return getPrimaryFilters(page).getByRole("button", { name: "Expand filter list" });
+    }
+
+    function getFilterCollapseButton(page: Page): Locator {
+        return getPrimaryFilters(page).getByRole("button", { name: "Collapse filter list" });
     }
 
     /**
@@ -39,6 +50,65 @@ test.describe("Room list filters and sort", () => {
         await app.closeNotificationToast();
     });
 
+    test("Tombstoned rooms are not shown even when they receive updates", async ({ page, app, bot }) => {
+        // This bug shows up with this setting turned on
+        await app.settings.setValue("Spaces.allRoomsInHome", null, SettingLevel.DEVICE, true);
+
+        /*
+        We will first create a room named 'Old Room' and will invite the bot user to this room.
+        We will also send a simple message in this room.
+        */
+        const oldRoomId = await app.client.createRoom({ name: "Old Room" });
+        await app.client.inviteUser(oldRoomId, bot.credentials.userId);
+        await bot.joinRoom(oldRoomId);
+        const response = await app.client.sendMessage(oldRoomId, "Hello!");
+
+        /*
+        At this point, we haven't done anything interesting.
+        So we expect 'Old Room' to show up in the room list.
+        */
+        const roomListView = getRoomList(page);
+        const oldRoomTile = roomListView.getByRole("option", { name: "Open room Old Room" });
+        await expect(oldRoomTile).toBeVisible();
+
+        /*
+        Now let's tombstone 'Old Room'.
+        First we create a new room ('New Room') with the predecessor set to the old room..
+        */
+        const newRoomId = await bot.createRoom({
+            name: "New Room",
+            creation_content: {
+                predecessor: {
+                    event_id: response.event_id,
+                    room_id: oldRoomId,
+                },
+            },
+            visibility: "public" as Visibility,
+        });
+
+        /*
+        Now we can send the tombstone event itself to the 'Old Room'.
+        */
+        await app.client.sendStateEvent(oldRoomId, "m.room.tombstone", {
+            body: "This room has been replaced",
+            replacement_room: newRoomId,
+        });
+
+        // Let's join the replaced room.
+        await app.client.joinRoom(newRoomId);
+
+        // We expect 'Old Room' to be hidden from the room list.
+        await expect(oldRoomTile).not.toBeVisible();
+
+        /*
+        Let's say some user in the 'Old Room' changes their display name.
+        This will send events to the all the rooms including 'Old Room'.
+        Nevertheless, the replaced room should not be shown in the room list.
+        */
+        await bot.setDisplayName("MyNewName");
+        await expect(oldRoomTile).not.toBeVisible();
+    });
+
     test.describe("Scroll behaviour", () => {
         test("should scroll to the top of list when filter is applied and active room is not in filtered list", async ({
             page,
@@ -69,18 +139,20 @@ test.describe("Room list filters and sort", () => {
 
             // Open the non-favourite room
             const roomListView = getRoomList(page);
-            const tile = roomListView.getByRole("gridcell", { name: "Open room room-non-fav" });
-            await tile.scrollIntoViewIfNeeded();
+            const tile = roomListView.getByRole("option", { name: "Open room room-non-fav" });
+            // item may not be in the DOM using scrollListToBottom rather than scrollIntoViewIfNeeded
+            await app.scrollListToBottom(roomListView);
             await tile.click();
 
             // Enable Favourite filter
+            await getFilterExpandButton(page).click();
             const primaryFilters = getPrimaryFilters(page);
             await primaryFilters.getByRole("option", { name: "Favourite" }).click();
             await expect(tile).not.toBeVisible();
 
             // Ensure the room list is not scrolled
             const isScrolledDown = await page
-                .getByRole("grid", { name: "Room list" })
+                .getByRole("listbox", { name: "Room list", exact: true })
                 .evaluate((e) => e.scrollTop !== 0);
             expect(isScrolledDown).toStrictEqual(false);
         });
@@ -115,6 +187,33 @@ test.describe("Room list filters and sort", () => {
             await app.client.evaluate(async (client, id) => {
                 await client.setRoomTag(id, "m.lowpriority", { order: 0.5 });
             }, lowPrioId);
+
+            await bot.createRoom({
+                name: "invited room",
+                invite: [user.userId],
+                is_direct: true,
+            });
+
+            const mentionRoomId = await app.client.createRoom({ name: "room with mention" });
+            await app.client.inviteUser(mentionRoomId, bot.credentials.userId);
+            await bot.joinRoom(mentionRoomId);
+
+            const clientBot = await bot.prepareClient();
+            await clientBot.evaluate(
+                async (client, { mentionRoomId, userId }) => {
+                    await client.sendMessage(mentionRoomId, {
+                        // @ts-ignore ignore usage of MsgType.text
+                        "msgtype": "m.text",
+                        "body": "User",
+                        "format": "org.matrix.custom.html",
+                        "formatted_body": `<a href="https://matrix.to/#/${userId}">User</a>`,
+                        "m.mentions": {
+                            user_ids: [userId],
+                        },
+                    });
+                },
+                { mentionRoomId, userId: user.userId },
+            );
         });
 
         test("should filter the list (with primary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
@@ -129,36 +228,40 @@ test.describe("Room list filters and sort", () => {
 
             await primaryFilters.getByRole("option", { name: "Unread" }).click();
             // only one room should be visible
-            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(2);
+            await expect(roomList.getByRole("option", { name: "unread dm" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "unread room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(4);
             await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
 
-            await primaryFilters.getByRole("option", { name: "Favourite" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(1);
-
             await primaryFilters.getByRole("option", { name: "People" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(1);
+            await expect(roomList.getByRole("option", { name: "unread dm" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "invited room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(2);
 
             await primaryFilters.getByRole("option", { name: "Rooms" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(4);
-        });
+            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);
 
-        test("should filter the list (with secondary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            const roomList = getRoomList(page);
-            const secondaryFilters = getSecondaryFilters(page);
-            await secondaryFilters.click();
+            await getFilterExpandButton(page).click();
 
-            await expect(page.getByRole("menu", { name: "Filter" })).toMatchScreenshot("filter-menu.png");
+            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 page.getByRole("menuitem", { name: "Low priority" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "Low prio room" })).toBeVisible();
-            expect(await 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 primaryFilters.getByRole("option", { name: "Invites" }).click();
+            await expect(roomList.getByRole("option", { name: "invited room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
+
+            await getFilterCollapseButton(page).click();
+            await expect(primaryFilters.locator("role=option").first()).toHaveText("Invites");
         });
 
         test(
@@ -166,6 +269,7 @@ 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);
@@ -174,22 +278,39 @@ 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("gridcell", { name: "Open room favourite room" }).click();
+                await roomListView.getByRole("option", { name: "Open room favourite room" }).click();
 
                 // Let's make the bot send a new message in both rooms
                 await bot.sendMessage(unReadDmId, "Hello!");
                 await bot.sendMessage(unReadRoomId, "Hello!");
 
                 // Let's activate the unread filter now
-                await page.getByRole("option", { name: "Unread" }).click();
+                await primaryFilters.getByRole("option", { name: "Unread" }).click();
 
                 // Unread filter should only show unread room and not unread dm!
-                const unreadDm = roomListView.getByRole("gridcell", { name: "Open room unread room" });
+                const unreadDm = roomListView.getByRole("option", { name: "Open room unread room" });
                 await expect(unreadDm).toBeVisible();
                 await expect(unreadDm).toMatchScreenshot("unread-dm.png");
-                await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
+                await expect(roomListView.getByRole("option", { name: "Open room unread dm" })).not.toBeVisible();
             },
         );
+
+        test("should sort the room list alphabetically", async ({ page }) => {
+            const roomListView = getRoomList(page);
+
+            await getRoomOptionsMenu(page).click();
+            await page.getByRole("menuitemradio", { name: "A-Z" }).click();
+
+            await expect(roomListView.getByRole("option").first()).toHaveText(/empty room/);
+        });
+
+        test("should move room to the top on message when sorting by activity", async ({ page, bot }) => {
+            const roomListView = getRoomList(page);
+
+            await bot.sendMessage(unReadDmId, "Hello!");
+
+            await expect(roomListView.getByRole("option").first()).toHaveText(/unread dm/);
+        });
     });
 
     test.describe("Empty room list", () => {
@@ -201,25 +322,46 @@ 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" },
             async ({ page, app, user }) => {
                 const emptyRoomList = getEmptyRoomList(page);
                 await expect(emptyRoomList).toMatchScreenshot("default-empty-room-list.png");
-                await expect(page.getByTestId("room-list-panel")).toMatchScreenshot("room-panel-empty-room-list.png");
+                await expect(page.getByRole("navigation", { name: "Room list" })).toMatchScreenshot(
+                    "room-panel-empty-room-list.png",
+                );
             },
         );
 
-        test("should render the placeholder for unread filter", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            const primaryFilters = getPrimaryFilters(page);
-            await primaryFilters.getByRole("option", { name: "Unread" }).click();
+        [
+            { filter: "Unreads", action: "Show all chats" },
+            { filter: "Mentions", action: "See all activity" },
+            { filter: "Invites", action: "See all activity" },
+        ].forEach(({ filter, action }) => {
+            test(
+                `should render the placeholder for ${filter} filter`,
+                { tag: "@screenshot" },
+                async ({ page, app, user }) => {
+                    const primaryFilters = getPrimaryFilters(page);
+                    await getFilterExpandButton(page).click();
 
-            const emptyRoomList = getEmptyRoomList(page);
-            await expect(emptyRoomList).toMatchScreenshot("unread-empty-room-list.png");
+                    await primaryFilters.getByRole("option", { name: filter }).click();
 
-            await emptyRoomList.getByRole("button", { name: "show all chats" }).click();
-            await expect(primaryFilters.getByRole("option", { name: "Unread" })).not.toBeChecked();
+                    const emptyRoomList = getEmptyRoomList(page);
+                    await expect(emptyRoomList).toMatchScreenshot(`${filter}-empty-room-list.png`);
+
+                    await emptyRoomList.getByRole("button", { name: action }).click();
+                    await expect(primaryFilters.getByRole("option", { name: filter })).not.toBeChecked();
+                },
+            );
         });
 
         ["People", "Rooms", "Favourite"].forEach((filter) => {
@@ -228,6 +370,8 @@ test.describe("Room list filters and sort", () => {
                 { tag: "@screenshot" },
                 async ({ page, app, user }) => {
                     const primaryFilters = getPrimaryFilters(page);
+                    await getFilterExpandButton(page).click();
+
                     await primaryFilters.getByRole("option", { name: filter }).click();
 
                     const emptyRoomList = getEmptyRoomList(page);

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

@@ -35,8 +35,8 @@ test.describe("Header section of the room list", () => {
 
         await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-compose-menu.png");
 
-        // New message should open the direct messages dialog
-        await page.getByRole("menuitem", { name: "New message" }).click();
+        // Start chat should open the direct messages dialog
+        await page.getByRole("menuitem", { name: "Start chat" }).click();
         await expect(page.getByRole("heading", { name: "Direct Messages" })).toBeVisible();
         await app.closeDialog();
 

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

@@ -19,7 +19,7 @@ test.describe("Room list panel", () => {
      * @param page
      */
     function getRoomListView(page: Page) {
-        return page.getByTestId("room-list-panel");
+        return page.getByRole("navigation", { name: "Room list" });
     }
 
     test.beforeEach(async ({ page, app, user }) => {
@@ -30,12 +30,21 @@ test.describe("Room list panel", () => {
         for (let i = 0; i < 20; i++) {
             await app.client.createRoom({ name: `room${i}` });
         }
+
+        // focus the user menu to avoid to have hover decoration
+        await page.getByRole("button", { name: "User menu" }).focus();
     });
 
     test("should render the room list panel", { tag: "@screenshot" }, async ({ page, app, user }) => {
         const roomListView = getRoomListView(page);
         // Wait for the last room to be visible
-        await expect(roomListView.getByRole("gridcell", { name: "Open room room19" })).toBeVisible();
+        await expect(roomListView.getByRole("option", { name: "Open room room19" })).toBeVisible();
         await expect(roomListView).toMatchScreenshot("room-list-panel.png");
     });
+
+    test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
+        await page.setViewportSize({ width: 575, height: 600 });
+        const roomListPanel = getRoomListView(page);
+        await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
+    });
 });

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

@@ -29,6 +29,9 @@ test.describe("Room list", () => {
     test.beforeEach(async ({ page, app, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
+
+        // focus the user menu to avoid to have hover decoration
+        await page.getByRole("button", { name: "User menu" }).focus();
     });
 
     test.describe("Room list", () => {
@@ -38,27 +41,38 @@ test.describe("Room list", () => {
             }
         });
 
-        test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
             const roomListView = getRoomList(page);
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room29" })).toBeVisible();
+            await expect(roomListView.getByRole("option", { name: "Open room room29" })).toBeVisible();
             await expect(roomListView).toMatchScreenshot("room-list.png");
 
-            await roomListView.hover();
+            // Put focus on the room list
+            await roomListView.getByRole("option", { name: "Open room room29" }).click();
             // Scroll to the end of the room list
-            await page.mouse.wheel(0, 1000);
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+            await app.scrollListToBottom(roomListView);
+
+            // scrollListToBottom seems to leave the mouse hovered over the list, move it away.
+            await page.getByRole("button", { name: "User menu" }).hover();
+
+            await expect(axe).toHaveNoViolations();
             await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
         });
 
         test("should open the room when it is clicked", async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+            await roomListView.getByRole("option", { name: "Open room room29" }).click();
             await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
         });
 
+        test("should open the context menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            const roomListView = getRoomList(page);
+            await roomListView.getByRole("option", { name: "Open room room29" }).click({ button: "right" });
+            await expect(page.getByRole("menu", { name: "More Options" })).toBeVisible();
+        });
+
         test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+            const roomItem = roomListView.getByRole("option", { name: "Open room room29" });
             await roomItem.hover();
 
             await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
@@ -88,7 +102,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("gridcell", { name: "Open room room29" });
+            const roomItem = roomListView.getByRole("option", { name: "Open room room29" });
             await roomItem.hover();
 
             await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
@@ -105,13 +119,13 @@ test.describe("Room list", () => {
             // It should make the room muted
             await page.getByRole("menuitem", { name: "Mute room" }).click();
 
-            // Remove hover on the room list item
-            await roomListView.hover();
+            await expect(roomItem.getByTestId("notification-decoration")).not.toBeVisible();
 
-            // Scroll to the bottom of the list
-            await page.getByRole("grid", { name: "Room list" }).evaluate((e) => {
-                e.scrollTop = e.scrollHeight;
-            });
+            // Put focus on the room list
+            await roomListView.getByRole("option", { name: "Open room room28" }).click();
+
+            // Scroll to the end of the room list
+            await app.scrollListToBottom(roomListView);
 
             // The room decoration should have the muted icon
             await expect(roomItem.getByTestId("notification-decoration")).toBeVisible();
@@ -129,24 +143,26 @@ test.describe("Room list", () => {
 
         test("should scroll to the current room", async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            await roomListView.hover();
+            // Put focus on the room list
+            await roomListView.getByRole("option", { name: "Open room room29" }).click();
             // Scroll to the end of the room list
-            await page.mouse.wheel(0, 1000);
+            await app.scrollListToBottom(roomListView);
 
-            await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();
+            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
+            await roomListView.getByRole("option", { name: "Open room room0" }).click();
 
             const filters = page.getByRole("listbox", { name: "Room list filters" });
             await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).not.toBeVisible();
+            await expect(roomListView.getByRole("option", { name: "Open room room0" })).not.toBeVisible();
 
             await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
         });
 
         test.describe("Shortcuts", () => {
             test("should select the next room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+                await roomListView.getByRole("option", { name: "Open room room29" }).click();
                 await page.keyboard.press("Alt+ArrowDown");
 
                 await expect(page.getByRole("heading", { name: "room28", level: 1 })).toBeVisible();
@@ -154,7 +170,7 @@ test.describe("Room list", () => {
 
             test("should select the previous room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
+                await roomListView.getByRole("option", { name: "Open room room28" }).click();
                 await page.keyboard.press("Alt+ArrowUp");
 
                 await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
@@ -162,7 +178,7 @@ test.describe("Room list", () => {
 
             test("should select the last room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+                await roomListView.getByRole("option", { name: "Open room room29" }).click();
                 await page.keyboard.press("Alt+ArrowUp");
 
                 await expect(page.getByRole("heading", { name: "room0", level: 1 })).toBeVisible();
@@ -176,13 +192,87 @@ test.describe("Room list", () => {
                 await bot.joinRoom(roomId);
                 await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-                await roomListView.getByRole("gridcell", { name: "Open room room20" }).click();
+                await roomListView.getByRole("option", { name: "Open room room20" }).click();
+
+                // Make sure the room with the unread is visible before we press the keyboard action to select it
+                await expect(roomListView.getByRole("option", { name: "1 notification" })).toBeVisible();
 
                 await page.keyboard.press("Alt+Shift+ArrowDown");
 
                 await expect(page.getByRole("heading", { name: "1 notification", level: 1 })).toBeVisible();
             });
         });
+
+        test.describe("Keyboard navigation", () => {
+            test("should navigate to the room list", async ({ page, app, user }) => {
+                const roomListView = getRoomList(page);
+
+                const room29 = roomListView.getByRole("option", { name: "Open room room29" });
+                const room28 = roomListView.getByRole("option", { name: "Open room room28" });
+
+                // open the room
+                await room29.click();
+                // put focus back on the room list item
+                await room29.click();
+                await expect(room29).toBeFocused();
+
+                await page.keyboard.press("ArrowDown");
+                await expect(room28).toBeFocused();
+                await expect(room29).not.toBeFocused();
+
+                await page.keyboard.press("ArrowUp");
+                await expect(room29).toBeFocused();
+                await expect(room28).not.toBeFocused();
+            });
+
+            test("should navigate to the notification menu", async ({ page, app, user }) => {
+                const roomListView = getRoomList(page);
+                const room29 = roomListView.getByRole("option", { name: "Open room room29" });
+                const moreButton = room29.getByRole("button", { name: "More options" });
+                const notificationButton = room29.getByRole("button", { name: "Notification options" });
+
+                await room29.click();
+                // put focus back on the room list item
+                await room29.click();
+                await page.keyboard.press("Tab");
+                await expect(moreButton).toBeFocused();
+                await page.keyboard.press("Tab");
+                await expect(notificationButton).toBeFocused();
+
+                // Open the menu
+                await page.keyboard.press("Enter");
+                // Wait for the menu to be open
+                await expect(page.getByRole("menuitem", { name: "Match default settings" })).toHaveAttribute(
+                    "aria-selected",
+                    "true",
+                );
+
+                await page.keyboard.press("ArrowDown");
+                await page.keyboard.press("Escape");
+                // Focus should be back on the notification button
+                await expect(notificationButton).toBeFocused();
+            });
+
+            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();
+            });
+        });
     });
 
     test.describe("Avatar decoration", () => {
@@ -191,21 +281,51 @@ test.describe("Room list", () => {
         test("should be a public room", { tag: "@screenshot" }, async ({ page, app, user }) => {
             // @ts-ignore Visibility enum is not accessible
             await app.client.createRoom({ name: "public room", visibility: "public" });
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+
             const roomListView = getRoomList(page);
-            const publicRoom = roomListView.getByRole("gridcell", { name: "public room" });
+            const publicRoom = roomListView.getByRole("option", { name: "public room" });
 
             await expect(publicRoom).toBeVisible();
             await expect(publicRoom).toMatchScreenshot("room-list-item-public.png");
         });
 
+        test("should be a low priority room", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            // @ts-ignore Visibility enum is not accessible
+            await app.client.createRoom({ name: "low priority room", visibility: "public" });
+            const roomListView = getRoomList(page);
+            const publicRoom = roomListView.getByRole("option", { name: "low priority room" });
+
+            // Make room low priority
+            await publicRoom.hover();
+            const roomItemMenu = publicRoom.getByRole("button", { name: "More Options" });
+            await roomItemMenu.click();
+            await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click();
+
+            // Should have low priority decoration
+            await expect(publicRoom.locator(".mx_RoomAvatarView_icon")).toHaveAccessibleName(
+                "This is a low priority room",
+            );
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+            await expect(publicRoom).toMatchScreenshot("room-list-item-low-priority.png");
+        });
+
         test("should be a video room", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            await page.getByTestId("room-list-panel").getByRole("button", { name: "Add" }).click();
+            await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
             await page.getByRole("menuitem", { name: "New video room" }).click();
             await page.getByRole("textbox", { name: "Name" }).fill("video room");
             await page.getByRole("button", { name: "Create video room" }).click();
 
             const roomListView = getRoomList(page);
-            const videoRoom = roomListView.getByRole("gridcell", { name: "video room" });
+            const videoRoom = roomListView.getByRole("option", { name: "video room" });
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+
             await expect(videoRoom).toBeVisible();
             await expect(videoRoom).toMatchScreenshot("room-list-item-video.png");
         });
@@ -220,7 +340,7 @@ test.describe("Room list", () => {
                 invite: [user.userId],
                 is_direct: true,
             });
-            const invitedRoom = roomListView.getByRole("gridcell", { name: "invited room" });
+            const invitedRoom = roomListView.getByRole("option", { name: "invited room" });
             await expect(invitedRoom).toBeVisible();
             await expect(invitedRoom).toMatchScreenshot("room-list-item-invited.png");
         });
@@ -235,7 +355,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("gridcell", { name: "2 notifications" });
+            const room = roomListView.getByRole("option", { name: "2 notifications" });
             await expect(room).toBeVisible();
             await expect(room.getByTestId("notification-decoration")).toHaveText("2");
             await expect(room).toMatchScreenshot("room-list-item-notification.png");
@@ -266,23 +386,28 @@ test.describe("Room list", () => {
             );
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "mention" });
+            const room = roomListView.getByRole("option", { name: "mention" });
             await expect(room).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-mention.png");
         });
 
         test("should render a message preview", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            await app.settings.openUserSettings("Preferences");
+            await page.getByRole("switch", { name: "Show message previews" }).click();
+            await app.closeDialog();
+
             const roomListView = getRoomList(page);
 
-            await page.getByRole("button", { name: "Room Options" }).click();
-            await page.getByRole("menuitemcheckbox", { name: "Show message previews" }).click();
-
             const roomId = await app.client.createRoom({ name: "activity" });
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+
             await app.client.inviteUser(roomId, bot.credentials.userId);
             await bot.joinRoom(roomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "activity" });
+            const room = roomListView.getByRole("option", { name: "activity" });
             await expect(room.getByText("I am a robot. Beep.")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-message-preview.png");
         });
@@ -309,7 +434,7 @@ test.describe("Room list", () => {
             await app.viewRoomById(otherRoomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "activity" });
+            const room = roomListView.getByRole("option", { name: "activity" });
             await expect(room.getByTestId("notification-decoration")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-activity.png");
         });
@@ -321,13 +446,13 @@ test.describe("Room list", () => {
             await app.client.inviteUser(roomId, bot.credentials.userId);
             await bot.joinRoom(roomId);
 
-            const room = roomListView.getByRole("gridcell", { name: "mark as unread" });
+            const room = roomListView.getByRole("option", { name: "mark as unread" });
             await room.hover();
             await room.getByRole("button", { name: "More Options" }).click();
             await page.getByRole("menuitem", { name: "mark as unread" }).click();
 
-            // Remove hover on the room list item
-            await roomListView.hover();
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
 
             await expect(room).toMatchScreenshot("room-list-item-mark-as-unread.png");
         });
@@ -344,7 +469,7 @@ test.describe("Room list", () => {
             await page.getByText("Off").click();
             await app.settings.closeDialog();
 
-            const room = roomListView.getByRole("gridcell", { name: "silent" });
+            const room = roomListView.getByRole("option", { name: "silent" });
             await expect(room.getByTestId("notification-decoration")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-silent.png");
         });

playwright/e2e/location/location.spec.ts

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

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

@@ -186,7 +186,7 @@ test.describe("Login", () => {
                 await page.goto("/");
                 await login(page, homeserver, credentials);
 
-                await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();
+                await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).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: "Verify this device", level: 1 })).toBeVisible();
+                    await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).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 h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
-                    await expect(h1).toBeVisible();
+                    const h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
+                    await expect(h2).toBeVisible();
 
-                    await expect(h1.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
+                    await expect(h2.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 h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
-                    await expect(h1).toBeVisible();
+                    let h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
+                    await expect(h2).toBeVisible();
 
-                    // Click "Verify with another device"
-                    await page.getByRole("button", { name: "Verify with another device" }).click();
+                    // Click "Use another device"
+                    await page.getByRole("button", { name: "Use another device" }).click();
 
                     // Cancel the new dialog
                     await page.getByRole("button", { name: "Close dialog" }).click();
 
                     // Check that we are still being asked to verify
-                    h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
-                    await expect(h1).toBeVisible();
+                    h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
+                    await expect(h2).toBeVisible();
                 });
             });
 
@@ -303,18 +303,18 @@ test.describe("Login", () => {
                 await page.goto("/");
                 await login(page, homeserver, credentials);
 
-                await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();
+                await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).toBeVisible();
 
                 // Start the reset process
-                await page.getByRole("button", { name: "Proceed with reset" }).click();
+                await page.getByRole("button", { name: "Can't confirm?" }).click();
 
                 // First try cancelling and restarting
                 await page.getByRole("button", { name: "Cancel" }).click();
-                await page.getByRole("button", { name: "Proceed with reset" }).click();
+                await page.getByRole("button", { name: "Can't confirm?" }).click();
 
                 // Then click outside the dialog and restart
                 await page.getByRole("link", { name: "Powered by Matrix" }).click({ force: true });
-                await page.getByRole("button", { name: "Proceed with reset" }).click();
+                await page.getByRole("button", { name: "Can't confirm?" }).click();
 
                 // Finally we actually continue
                 await page.getByRole("button", { name: "Continue" }).click();

playwright/e2e/messages/messages.spec.ts

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

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

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

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

@@ -0,0 +1,160 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Page } from "@playwright/test";
+import fs from "node:fs";
+
+import { test, expect } from "../../element-web-test";
+
+const screenshotOptions = (page: Page) => ({
+    mask: [page.locator(".mx_MessageTimestamp")],
+    // Hide the jump to bottom button in the timeline to avoid flakiness
+    // Exclude timestamp and read marker from snapshot
+    css: `
+        .mx_JumpToBottomButton {
+            display: none !important;
+        }
+        .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
+            display: none !important;
+        }
+    `,
+});
+
+const IMAGE_FILE = fs.readFileSync("playwright/sample-files/element.png");
+
+test.describe("Custom Component API", () => {
+    test.use({
+        displayName: "Manny",
+        config: {
+            modules: ["/modules/custom-component-module.js"],
+        },
+        page: async ({ page }, use) => {
+            await page.route("/modules/custom-component-module.js", async (route) => {
+                await route.fulfill({ path: "playwright/sample-files/custom-component-module.js" });
+            });
+            await use(page);
+        },
+        room: async ({ page, app, user, bot }, use) => {
+            const roomId = await app.client.createRoom({ name: "TestRoom" });
+            await use({ roomId });
+        },
+    });
+    test.describe("basic functionality", () => {
+        test(
+            "should replace the render method of a textual event",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Simple message");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-tile.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test(
+            "should fall through if one module does not render a component",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Fall through here");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-tile-fall-through.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test(
+            "should render the original content of a textual event conditionally",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Do not replace me");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-tile-original.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test("should disallow editing when the allowEditingEvent hint is set to false", async ({ page, room, app }) => {
+            await app.viewRoomById(room.roomId);
+            await app.client.sendMessage(room.roomId, "Do not show edits");
+            await page.getByText("Do not show edits").hover();
+            await expect(
+                await page.getByRole("toolbar", { name: "Message Actions" }).getByRole("button", { name: "Edit" }),
+            ).not.toBeVisible();
+        });
+        test("should disallow downloading media when the allowDownloading hint is set to false", async ({
+            page,
+            room,
+            app,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await app.viewRoomById(room.roomId);
+            const upload = await app.client.uploadContent(IMAGE_FILE, { name: "bad.png", type: "image/png" });
+            await app.client.sendEvent(room.roomId, null, "m.room.message", {
+                msgtype: "m.image",
+                body: "bad.png",
+                url: upload.content_uri,
+            });
+
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MImageBody").first();
+            await expect(imgTile).toBeVisible();
+            await imgTile.hover();
+            await expect(page.getByRole("button", { name: "Download" })).not.toBeVisible();
+            await imgTile.click();
+            await expect(page.getByLabel("Image view").getByLabel("Download")).not.toBeVisible();
+        });
+        test("should allow downloading media when the allowDownloading hint is set to true", async ({
+            page,
+            room,
+            app,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await app.viewRoomById(room.roomId);
+            const upload = await app.client.uploadContent(IMAGE_FILE, { name: "good.png", type: "image/png" });
+            await app.client.sendEvent(room.roomId, null, "m.room.message", {
+                msgtype: "m.image",
+                body: "good.png",
+                url: upload.content_uri,
+            });
+
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MImageBody").first();
+            await expect(imgTile).toBeVisible();
+            await imgTile.hover();
+            await expect(page.getByRole("button", { name: "Download" })).toBeVisible();
+            await imgTile.click();
+            await expect(page.getByLabel("Image view").getByLabel("Download")).toBeVisible();
+        });
+        test(
+            "should render the next registered component if the filter function throws",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Crash the filter!");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-crash-handle-filter.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test(
+            "should render original component if the render function throws",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Crash the renderer!");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-crash-handle-renderer.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+    });
+});

playwright/e2e/modules/loader.spec.ts

@@ -15,6 +15,7 @@ test.describe("Module loading", () => {
     test.describe("Example Module", () => {
         test.use({
             config: {
+                brand: "TestBrand",
                 modules: ["/modules/example-module.js"],
             },
             page: async ({ page }, use) => {
@@ -25,11 +26,31 @@ test.describe("Module loading", () => {
             },
         });
 
-        test("should show alert", async ({ page }) => {
-            const dialogPromise = page.waitForEvent("dialog");
-            await page.goto("/");
-            const dialog = await dialogPromise;
-            expect(dialog.message()).toBe("Testing module loading successful!");
-        });
+        const testCases = [
+            ["en", "TestBrand module loading successful!"],
+            ["de", "TestBrand-Module erfolgreich geladen!"],
+        ];
+
+        for (const [lang, message] of testCases) {
+            test.describe(`language-${lang}`, () => {
+                test.use({
+                    config: async ({ config }, use) => {
+                        await use({
+                            ...config,
+                            setting_defaults: {
+                                language: lang,
+                            },
+                        });
+                    },
+                });
+
+                test("should show alert", async ({ page }) => {
+                    const dialogPromise = page.waitForEvent("dialog");
+                    await page.goto("/");
+                    const dialog = await dialogPromise;
+                    expect(dialog.message()).toBe(message);
+                });
+            });
+        }
     });
 });

playwright/e2e/oidc/index.ts

@@ -11,6 +11,9 @@ import { type Page } from "@playwright/test";
 
 import { expect } from "../../element-web-test";
 
+/**
+ * Click through registering a new user in the MAS UI.
+ */
 export async function registerAccountMas(
     page: Page,
     mailpit: MailpitClient,
@@ -37,6 +40,22 @@ export async function registerAccountMas(
 
     await page.getByRole("textbox", { name: "6-digit code" }).fill(code);
     await page.getByRole("button", { name: "Continue" }).click();
+    await page.getByRole("textbox", { name: "Display Name" }).fill(username);
+    await page.getByRole("button", { name: "Continue" }).click();
+    await expect(page.getByText("Allow access to your account?")).toBeVisible();
+    await page.getByRole("button", { name: "Continue" }).click();
+}
+
+/**
+ * Click through entering username and password into the MAS login prompt.
+ */
+export async function logInAccountMas(page: Page, username: string, password: string): Promise<void> {
+    await expect(page.getByText("Please sign in to continue:")).toBeVisible();
+
+    await page.getByRole("textbox", { name: "Username" }).fill(username);
+    await page.getByRole("textbox", { name: "Password", exact: true }).fill(password);
+    await page.getByRole("button", { name: "Continue" }).click();
+
     await expect(page.getByText("Allow access to your account?")).toBeVisible();
     await page.getByRole("button", { name: "Continue" }).click();
 }

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

@@ -6,8 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+import { type Config, CONFIG_JSON } from "@element-hq/element-web-playwright-common";
+import { type Browser, type Page } from "@playwright/test";
+import { type StartedHomeserverContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/HomeserverContainer";
+
 import { test, expect } from "../../element-web-test.ts";
-import { registerAccountMas } from ".";
+import { logInAccountMas, registerAccountMas } from ".";
 import { ElementAppPage } from "../../pages/ElementAppPage.ts";
 import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";
 
@@ -33,7 +37,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await page.getByRole("button", { name: "Continue" }).click();
 
         const userId = `alice_${testInfo.testId}`;
-        await registerAccountMas(page, mailpitClient, userId, "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
 
         // Eventually, we should end up at the home screen.
         await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
@@ -55,7 +59,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         const newPage = await newPagePromise;
         await newPage.getByText("Devices").click();
         await newPage.getByText(deviceId).click();
-        await expect(newPage.getByText("Element")).toBeVisible();
+        await expect(newPage.getByText("Element", { exact: true })).toBeVisible();
         await expect(newPage.getByText("http://localhost:8080/")).toBeVisible();
         await expect(newPage).toHaveURL(/\/oauth2_session/);
         await newPage.close();
@@ -77,18 +81,17 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
     test(
         "it should log out the user & wipe data when logging out via MAS",
         { tag: "@screenshot" },
-        async ({ mas, page, mailpitClient }, testInfo) => {
+        async ({ mas, page, mailpitClient, homeserver }, testInfo) => {
             // We use this over the `user` fixture to ensure we get an OIDC session rather than a compatibility one
             await page.goto("/#/login");
             await page.getByRole("button", { name: "Continue" }).click();
 
             const userId = `alice_${testInfo.testId}`;
-            await registerAccountMas(page, mailpitClient, userId, "alice@email.com", "Pa$sW0rD!");
+            await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
 
             await expect(page.getByText("Welcome")).toBeVisible();
             await page.goto("about:blank");
 
-            // @ts-expect-error
             const result = await mas.manage("kill-sessions", userId);
             expect(result.output).toContain("Ended 1 active OAuth 2.0 session");
 
@@ -96,10 +99,160 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await expect(
                 page.getByText("For security, this session has been signed out. Please sign in again."),
             ).toBeVisible();
-            await expect(page).toMatchScreenshot("token-expired.png", { includeDialogBackground: true });
+            //await expect(page).toMatchScreenshot("token-expired.png", { includeDialogBackground: true });
 
             const localStorageKeys = await page.evaluate(() => Object.keys(localStorage));
             expect(localStorageKeys).toHaveLength(0);
         },
     );
+
+    test("can log in to an existing MAS account", { tag: "@screenshot" }, async ({ page, mailpitClient }, testInfo) => {
+        // Register an account with MAS
+        await page.goto("/#/login");
+        await page.getByRole("button", { name: "Continue" }).click();
+
+        const userId = `alice_${testInfo.testId}`;
+        await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
+        await expect(page.getByText("Welcome")).toBeVisible();
+
+        // Log out
+        await page.getByRole("button", { name: "User menu" }).click();
+        await expect(page.getByText(userId, { exact: true })).toBeVisible();
+
+        // Allow the outstanding requests queue to settle before logging out
+        await page.waitForTimeout(2000);
+        await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+        await expect(page).toHaveURL(/\/#\/login$/);
+
+        // Log in again
+        await page.goto("/#/login");
+        await page.getByRole("button", { name: "Continue" }).click();
+        await page.getByRole("button", { name: "Continue" }).click();
+
+        // We should be in
+        await expect(page.getByText("Confirm your identity")).toBeVisible();
+    });
+
+    test.describe("with force_verification on", () => {
+        test.use({
+            config: {
+                force_verification: true,
+            },
+        });
+
+        test("verify dialog cannot be dismissed", { tag: "@screenshot" }, async ({ page, mailpitClient }, testInfo) => {
+            // Register an account with MAS
+            await page.goto("/#/login");
+            await page.getByRole("button", { name: "Continue" }).click();
+
+            const userId = `alice_${testInfo.testId}`;
+            await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
+            await expect(page.getByText("Welcome")).toBeVisible();
+
+            // Log out
+            await page.getByRole("button", { name: "User menu" }).click();
+            await expect(page.getByText(userId, { exact: true })).toBeVisible();
+            await page.waitForTimeout(2000);
+            await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+            await expect(page).toHaveURL(/\/#\/login$/);
+
+            // Log in again
+            await page.goto("/#/login");
+            await page.getByRole("button", { name: "Continue" }).click();
+            await page.getByRole("button", { name: "Continue" }).click();
+
+            // We should be being warned that we need to verify (but we can't)
+            await expect(page.getByText("Confirm your identity")).toBeVisible();
+
+            // And there should be no way to close this prompt
+            await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
+        });
+
+        test(
+            "continues to show verification prompt after cancelling device verification",
+            { tag: "@screenshot" },
+            async ({ browser, config, homeserver, page, mailpitClient }, testInfo) => {
+                // Register an account with MAS
+                await page.goto("/#/login");
+                await page.getByRole("button", { name: "Continue" }).click();
+
+                const userId = `alice_${testInfo.testId}`;
+                const password = "Pa$sW0rD!";
+                await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, password);
+                await expect(page.getByText("Welcome")).toBeVisible();
+
+                // Log in an additional account, and verify it.
+                //
+                // This means that when we log out and in again, we are offered
+                // to verify using another device.
+                const otherContext = await newContext(browser, config, homeserver);
+                const otherDevicePage = await otherContext.newPage();
+                await otherDevicePage.goto("/#/login");
+                await otherDevicePage.getByRole("button", { name: "Continue" }).click();
+                await logInAccountMas(otherDevicePage, userId, password);
+                await verifyUsingOtherDevice(otherDevicePage, page);
+                await otherDevicePage.close();
+
+                // Log out
+                await page.getByRole("button", { name: "User menu" }).click();
+                await expect(page.getByText(userId, { exact: true })).toBeVisible();
+                await page.waitForTimeout(2000);
+                await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+                await expect(page).toHaveURL(/\/#\/login$/);
+
+                // Log in again
+                await page.goto("/#/login");
+                await page.getByRole("button", { name: "Continue" }).click();
+                await page.getByRole("button", { name: "Continue" }).click();
+
+                // We should be in, and not able to dismiss the verify dialog
+                await expect(page.getByText("Verify this device")).toBeVisible();
+                await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
+
+                // When we start verifying with another device
+                await page.getByRole("button", { name: "Use another device" }).click();
+
+                // And then cancel it
+                await page.getByRole("button", { name: "Close dialog" }).click();
+
+                // Then we should still be at the unskippable verify prompt
+                await expect(page.getByText("Verify this device")).toBeVisible();
+                await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
+            },
+        );
+    });
 });
+
+/**
+ * Perform interactive emoji verification for a new device.
+ */
+async function verifyUsingOtherDevice(deviceToVerifyPage: Page, alreadyVerifiedDevicePage: Page) {
+    await deviceToVerifyPage.getByRole("button", { name: "Use another device" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "Start verification" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "Start" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "They match" }).click();
+    await deviceToVerifyPage.getByRole("button", { name: "They match" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "Got it" }).click();
+    await deviceToVerifyPage.getByRole("button", { name: "Got it" }).click();
+}
+
+/**
+ * Create a new browser context which serves up the default config plus what you supplied, and sets m.homeserver to the
+ * supplied homeserver's URL.
+ */
+async function newContext(browser: Browser, config: Partial<Partial<Config>>, homeserver: StartedHomeserverContainer) {
+    const otherContext = await browser.newContext();
+    await otherContext.route(`http://localhost:8080/config.json*`, async (route) => {
+        const json = {
+            ...CONFIG_JSON,
+            ...config,
+            default_server_config: {
+                "m.homeserver": {
+                    base_url: homeserver.baseUrl,
+                },
+            },
+        };
+        await route.fulfill({ json });
+    });
+    return otherContext;
+}

playwright/e2e/permalinks/permalinks.spec.ts

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

playwright/e2e/read-receipts/index.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import type { JSHandle, Page } from "@playwright/test";
+import type { JSHandle, Locator, 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("treeitem", { name: new RegExp("^" + label) });
+        return this.page.getByRole("option", { name: new RegExp("^Open room " + label) });
     }
 
     /**
@@ -446,8 +446,8 @@ class Helpers {
      */
     async assertRead(room: RoomRef) {
         const tile = this.getRoomListTile(room.name);
-        await expect(tile.locator(".mx_NotificationBadge_dot")).not.toBeVisible();
-        await expect(tile.locator(".mx_NotificationBadge_count")).not.toBeVisible();
+        await expect(tile.getByTestId("notification-decoration")).not.toBeVisible();
+        await expect(tile).not.toHaveAccessibleName(/with \d* unread message/);
     }
 
     /**
@@ -463,15 +463,18 @@ 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, or if "." specified then a bold/dot (no count) state is asserted
+     * @param count - the numeric count to assert
      */
-    async assertUnread(room: RoomRef, count: number | ".") {
+    async assertUnread(room: RoomRef, count: number) {
         const tile = this.getRoomListTile(room.name);
-        if (count === ".") {
-            await expect(tile.locator(".mx_NotificationBadge_dot")).toBeVisible();
-        } else {
-            await expect(tile.locator(".mx_NotificationBadge_count")).toHaveText(count.toString());
-        }
+        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;
     }
 
     /**
@@ -487,7 +490,7 @@ class Helpers {
         // .toBeLessThan doesn't have a retry mechanism, so we use .poll
         await expect
             .poll(async () => {
-                return parseInt(await tile.locator(".mx_NotificationBadge_count").textContent(), 10);
+                return this.unreadCountForRoomTile(tile);
             })
             .toBeLessThan(lessThan);
     }
@@ -505,7 +508,7 @@ class Helpers {
         // .toBeGreaterThan doesn't have a retry mechanism, so we use .poll
         await expect
             .poll(async () => {
-                return parseInt(await tile.locator(".mx_NotificationBadge_count").textContent(), 10);
+                return this.unreadCountForRoomTile(tile);
             })
             .toBeGreaterThan(greaterThan);
     }
@@ -596,24 +599,15 @@ 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 roomList = this.page.locator(".mx_RoomTile_title");
+        const roomListContainer = this.page.getByTestId("room-list");
+        const roomTiles = roomListContainer.getByRole("option");
         for (const [i, room] of rooms.entries()) {
-            await expect(roomList.nth(i)).toHaveText(room.name);
+            await expect(roomTiles.nth(i)).toHaveAccessibleName(new RegExp(`${room.name}`));
         }
     }
 }

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

@@ -112,7 +112,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         const main3 = await sendMessage(bot);
 
         // (So the room starts off unread)
-        await expect(page.getByLabel(`${otherRoomName} 3 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 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} 3 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 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} 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 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} 3 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 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} 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 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} 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 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} 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 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} 2 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 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} 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();
     });
 
     /**
@@ -291,7 +291,9 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         const uriEncodedLastMessageId = encodeURIComponent(lastMessageId);
 
         // wait until all messages have been received
-        await expect(page.getByLabel(`${otherRoomName} ${sendMessageResponses.length} unread messages.`)).toBeVisible();
+        await expect(
+            page.getByLabel(`${otherRoomName} with ${sendMessageResponses.length} unread messages.`),
+        ).toBeVisible();
 
         // switch to the room with the messages
         await page.goto(`/#/room/${otherRoomId}`);

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

@@ -12,7 +12,7 @@ import { test } from ".";
 
 test.describe("Read receipts", { tag: "@mergequeue" }, () => {
     test.describe("Room list order", () => {
-        test("Rooms with unread messages appear at the top of room list if 'unread first' is selected", async ({
+        test("Rooms with unread messages appear at the top of room list with default 'activity' ordering", async ({
             roomAlpha: room1,
             roomBeta: room2,
             util,
@@ -22,15 +22,18 @@ 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 if 'unread first' is selected", async ({
+        test("Rooms with unread threads appear at the top of room list with default 'activity' order", async ({
             roomAlpha: room1,
             roomBeta: room2,
             util,
@@ -42,7 +45,6 @@ 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();
 

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

@@ -29,7 +29,7 @@ test.describe("Pills", () => {
 
         // send a message using the built-in room mention functionality (autocomplete)
         await page
-            .getByRole("textbox", { name: "Send a message…" })
+            .getByRole("textbox", { name: "Send an unencrypted message…" })
             .pressSequentially(`Hello world! Join here: #${targetLocalpart.substring(0, 3)}`);
         await page.locator(".mx_Autocomplete_Completion_title").click();
         await page.getByRole("button", { name: "Send message" }).click();

playwright/e2e/release-announcement/index.ts

@@ -30,9 +30,8 @@ export class Helpers {
     /**
      * Get the release announcement with the given name.
      * @param name
-     * @private
      */
-    private getReleaseAnnouncement(name: string) {
+    public getReleaseAnnouncement(name: string) {
         return this.page.getByRole("dialog", { name });
     }
 
@@ -42,7 +41,10 @@ export class Helpers {
      */
     async assertReleaseAnnouncementIsVisible(name: string) {
         await expect(this.getReleaseAnnouncement(name)).toBeVisible();
-        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`, { showTooltips: true });
+        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`, {
+            showTooltips: true,
+            hideJumpToBottomButton: true,
+        });
     }
 
     /**
@@ -52,16 +54,6 @@ 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 };

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

@@ -15,20 +15,43 @@ test.describe("Release announcement", () => {
                 feature_release_announcement: true,
             },
         },
-        labsFlags: ["threadsActivityCentre"],
+        room: async ({ app, user }, use) => {
+            const roomId = await app.client.createRoom({
+                name: "Test room",
+            });
+            await app.viewRoomById(roomId);
+            await use({ roomId });
+        },
+        labsFlags: ["feature_new_room_list"],
     });
 
-    test("should display the release announcement process", { tag: "@screenshot" }, async ({ page, app, util }) => {
-        // The TAC release announcement should be displayed
-        await util.assertReleaseAnnouncementIsVisible("Threads Activity Centre");
-        // Hide the release announcement
-        await util.markReleaseAnnouncementAsRead("Threads Activity Centre");
-        await util.assertReleaseAnnouncementIsNotVisible("Threads Activity Centre");
+    test(
+        "should display the new room list release announcement",
+        { tag: "@screenshot" },
+        async ({ page, app, room, util }) => {
+            // dismiss the toast so the announcement appears
+            await page.getByRole("button", { name: "Dismiss" }).click();
 
-        await page.reload();
-        // Wait for EW to load
-        await expect(page.getByRole("navigation", { name: "Spaces" })).toBeVisible();
-        // Check that once the release announcement has been marked as viewed, it does not appear again
-        await util.assertReleaseAnnouncementIsNotVisible("Threads Activity Centre");
-    });
+            const 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 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);
+
+            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);
+        },
+    );
 });

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 Download, type Page } from "@playwright/test";
+import { type Page } from "@playwright/test";
 
 import { test, expect } from "../../element-web-test";
 import { viewRoomSummaryByName } from "./utils";
@@ -63,9 +63,7 @@ test.describe("FilePanel", () => {
             await expect(roomViewBody.locator(".mx_EventTile[data-layout='group'] img[alt='riot.png']")).toBeVisible();
 
             // Assert that the audio player is rendered
-            await expect(
-                roomViewBody.locator(".mx_EventTile[data-layout='group'] .mx_AudioPlayer_container"),
-            ).toBeVisible();
+            await expect(roomViewBody.getByRole("region", { name: "Audio player" })).toBeVisible();
 
             // Assert that the file button exists
             await expect(
@@ -97,9 +95,7 @@ test.describe("FilePanel", () => {
             await expect(image.locator("img[alt='riot.png']")).toBeVisible();
 
             // Detect the audio file
-            const audio = filePanelMessageList.locator(
-                ".mx_EventTile_mediaLine .mx_MAudioBody .mx_AudioPlayer_container",
-            );
+            const audio = filePanelMessageList.getByRole("region", { name: "Audio player" });
             // Assert that the play button is rendered
             await expect(audio.getByRole("button", { name: "Play" })).toBeVisible();
 
@@ -130,7 +126,7 @@ test.describe("FilePanel", () => {
             // Take a snapshot of file tiles list on FilePanel
             await expect(filePanelMessageList).toMatchScreenshot("file-tiles-list.png", {
                 // Exclude timestamps & flaky seek bar from snapshot
-                mask: [page.locator(".mx_MessageTimestamp, .mx_AudioPlayer_seek")],
+                mask: [page.locator(".mx_MessageTimestamp"), page.getByTestId("audio-player-seek")],
             });
         });
 
@@ -138,21 +134,19 @@ test.describe("FilePanel", () => {
             // Upload an image file
             await uploadFile(page, "playwright/sample-files/1sec.ogg");
 
-            const audioBody = page.locator(
-                ".mx_FilePanel .mx_RoomView_MessageList .mx_EventTile_mediaLine .mx_MAudioBody .mx_AudioPlayer_container",
-            );
+            const audioBody = page.getByTestId("right-panel").getByRole("region", { name: "Audio player" });
+
             // Assert that the audio player is rendered
-            // Assert that the audio file information is rendered
-            const mediaInfo = audioBody.locator(".mx_AudioPlayer_mediaInfo");
-            await expect(mediaInfo.locator(".mx_AudioPlayer_mediaName").getByText("1sec.ogg")).toBeVisible();
-            await expect(mediaInfo.locator(".mx_AudioPlayer_byline", { hasText: "00:01" })).toBeVisible();
-            await expect(mediaInfo.locator(".mx_AudioPlayer_byline", { hasText: "(3.56 KB)" })).toBeVisible(); // actual size
+            // Assert that the audio file information is rendered;
+            await expect(audioBody.getByText("1sec.ogg")).toBeVisible(); // extension
+            await expect(audioBody.getByRole("time")).toHaveText("00:01"); // duration
+            await expect(audioBody.getByText("(3.56 KB)")).toBeVisible(); // actual size;
 
             // Assert that the duration counter is 00:01 before clicking the play button
-            await expect(audioBody.locator(".mx_AudioPlayer_mediaInfo time", { hasText: "00:01" })).toBeVisible();
+            await expect(audioBody.getByRole("time")).toHaveText("00:01");
 
             // Assert that the counter is zero before clicking the play button
-            await expect(audioBody.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
+            await expect(audioBody.getByRole("timer")).toHaveText("00:00");
 
             // Click the play button
             await audioBody.getByRole("button", { name: "Play" }).click();
@@ -161,7 +155,7 @@ test.describe("FilePanel", () => {
             await expect(audioBody.getByRole("button", { name: "Pause" })).toBeVisible();
 
             // Assert that the timer is reset when the audio file finished playing
-            await expect(audioBody.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
+            await expect(audioBody.getByRole("timer")).toHaveText("00:00");
 
             // Assert that the play button is rendered
             await expect(audioBody.getByRole("button", { name: "Play" })).toBeVisible();
@@ -195,23 +189,13 @@ test.describe("FilePanel", () => {
 
             const link = imageBody.locator(".mx_MFileBody_download a");
 
-            const newPagePromise = context.waitForEvent("page");
-
-            const downloadPromise = new Promise<Download>((resolve) => {
-                page.once("download", resolve);
-            });
+            const downloadPromise = page.waitForEvent("download");
 
             // Click the anchor link (not the image itself)
             await link.click();
 
-            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");
-                });
+            const download = await downloadPromise;
+            expect(download.suggestedFilename()).toBe("riot.png");
         });
     });
 });