v1.12.8

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
     parserOptions: {
         project: ["./tsconfig.json"],
+        tsconfigRootDir: __dirname,
     },
     env: {
         browser: true,

.github/labels.yml

@@ -279,3 +279,6 @@
 - name: "Z-Flaky-Test-Disabled"
   description: "The flaking test has been disabled"
   color: "ededed"
+- name: "Z-Skip-Coverage"
+  description: "Skip SonarQube coverage for this PR"
+  color: "ededed"

.github/workflows/build.yml

@@ -42,9 +42,9 @@ jobs:
             run:
                 shell: bash
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   # Disable cache on Windows as it is slower than not caching
                   # https://github.com/actions/setup-node/issues/975

.github/workflows/build_debian.yaml

@@ -14,7 +14,7 @@ jobs:
             R2_URL: ${{ vars.CF_R2_S3_API }}
             VERSION: ${{ github.ref_name }}
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
             - name: Download package
               run: |

.github/workflows/build_develop.yml

@@ -26,9 +26,9 @@ jobs:
             R2_URL: ${{ vars.CF_R2_S3_API }}
             R2_PUBLIC_URL: "https://element-web-develop.element.io"
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.github/workflows/deploy.yml

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

.github/workflows/docker.yaml

@@ -20,7 +20,7 @@ jobs:
         env:
             TEST_TAG: vectorim/element-web:test
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   fetch-depth: 0 # needed for docker-package to be able to calculate the version
 
@@ -96,7 +96,7 @@ jobs:
 
             - name: Docker meta
               id: meta
-              uses: docker/metadata-action@318604b99e75e41977312d83839a89be02ca4893 # v5
+              uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5
               if: github.event_name != 'pull_request'
               with:
                   images: |
@@ -141,7 +141,7 @@ jobs:
                   repository: vectorim/element-web
 
             - name: Repository Dispatch
-              uses: peter-evans/repository-dispatch@5fc4efd1a4797ddb68ffd0714a238564e4cc0e6f # v4
+              uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697 # v4
               if: github.event_name != 'pull_request'
               with:
                   repository: element-hq/element-web-pro

.github/workflows/docs.yml

@@ -17,23 +17,23 @@ jobs:
         runs-on: ubuntu-24.04
         steps:
             - name: Fetch element-desktop
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   repository: element-hq/element-desktop
                   path: element-desktop
 
             - name: Fetch element-web
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   path: element-web
 
             - name: Fetch matrix-js-sdk
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   repository: matrix-org/matrix-js-sdk
                   path: matrix-js-sdk
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   cache-dependency-path: element-web/yarn.lock
@@ -49,7 +49,7 @@ jobs:
             - name: Setup mdBook
               uses: peaceiris/actions-mdbook@ee69d230fe19748b7abf22df32acaa93833fad08 # v2
               with:
-                  mdbook-version: "0.4.10"
+                  mdbook-version: "0.5.1"
 
             - name: Install mdbook extensions
               run: cargo install mdbook-combiner mdbook-mermaid

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

@@ -50,11 +50,11 @@ jobs:
             runners-matrix: ${{ steps.runner-vars.outputs.matrix }}
         steps:
             - name: Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -122,7 +122,7 @@ jobs:
                     - runAllTests: false
                       project: Pinecone
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
@@ -133,7 +133,7 @@ jobs:
                   name: webapp
                   path: webapp
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   cache-dependency-path: yarn.lock
@@ -194,13 +194,13 @@ jobs:
         if: always()
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               if: inputs.skip != true
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               if: inputs.skip != true
               with:
                   cache: "yarn"

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

@@ -10,7 +10,7 @@ jobs:
         permissions:
             pull-requests: write
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
             - name: Update synapse image
               run: |
@@ -32,7 +32,7 @@ jobs:
 
             - name: Create Pull Request
               id: cpr
-              uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7
+              uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/playwright-image-updates

.github/workflows/release_prepare.yml

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

.github/workflows/shared-component-publish.yaml

@@ -13,10 +13,10 @@ jobs:
 
         steps:
             - name: 🧮 Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
             - name: 🔧 Set up node environment
-              uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+              uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   node-version-file: ".node-version"

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

@@ -21,12 +21,12 @@ jobs:
             issues: read
             pull-requests: read
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.github/workflows/static_analysis.yaml

@@ -22,9 +22,9 @@ jobs:
         name: "Typescript Syntax Check"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -63,7 +63,7 @@ jobs:
         name: "Rethemendex Check"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
             - run: ./res/css/rethemendex.sh
 
@@ -73,9 +73,9 @@ jobs:
         name: "ESLint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -97,9 +97,9 @@ jobs:
         name: "Style Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -115,9 +115,9 @@ jobs:
         name: "Workflow Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -133,9 +133,9 @@ jobs:
         name: "Analyse Dead Code"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.github/workflows/tests.yml

@@ -39,12 +39,12 @@ jobs:
                 runner: [1, 2]
         steps:
             - name: Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}
 
             - name: Yarn cache
-              uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+              uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   node-version: "lts/*"
                   cache: "yarn"
@@ -118,12 +118,12 @@ jobs:
         runs-on: ubuntu-24.04
         steps:
             - name: Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}
 
             - name: Yarn cache
-              uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+              uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   node-version: "lts/*"
                   cache: "yarn"

.github/workflows/triage-stale.yml

@@ -12,7 +12,7 @@ jobs:
             issues: write
             pull-requests: write
         steps:
-            - uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10
+            - uses: actions/stale@997185467fa4f803885201cee163a9f38240193d # v10
               with:
                   operations-per-run: 100
 

.github/workflows/update-jitsi.yml

@@ -9,9 +9,9 @@ jobs:
     update:
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -23,7 +23,7 @@ jobs:
               run: "yarn update:jitsi"
 
             - name: Create Pull Request
-              uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7
+              uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/jitsi-update

.github/workflows/update-topics.yaml

@@ -26,13 +26,13 @@ jobs:
               env:
                   HS_URL: ${{ secrets.BETABOT_HS_URL }}
                   LOBBY_ROOM_ID: ${{ secrets.ROOM_ID }}
-                  PUBLIC_ROOM_ID: "!IemiTbwVankHTFiEoh:matrix.org"
-                  ANNOUNCEMENT_ROOM_ID: "!bijaLdadorKgNGtHdA:matrix.org"
+                  PUBLIC_DISCUSSION_ROOM_ID: "!xUW4PpAe1CmThA3r2wI8IrgwwsK006-zqWdJCljpd10"
+                  ANNOUNCEMENT_ROOM_ID: "!ars5ndgI6IIYZXECiJ-u8YljHNzShJn3nHdB-3rYI2M"
                   TOKEN: ${{ secrets.BETABOT_ACCESS_TOKEN }}
                   RELEASE_STATUS: "Release status: ${{ inputs.expected_status }} expected ${{ inputs.expected_date }}"
               with:
                   script: |
-                      const { HS_URL, TOKEN, RELEASE_STATUS, LOBBY_ROOM_ID, PUBLIC_ROOM_ID, ANNOUNCEMENT_ROOM_ID } = process.env;
+                      const { HS_URL, TOKEN, RELEASE_STATUS, LOBBY_ROOM_ID, PUBLIC_DISCUSSION_ROOM_ID, ANNOUNCEMENT_ROOM_ID } = process.env;
 
                       const repo = context.repo;
                       const { data } = await github.rest.repos.getLatestRelease({
@@ -71,18 +71,23 @@ jobs:
                           const data = await res.json();
                           console.log(roomId, "got event", data);
 
+                          if (!regex.test(data.topic)) {
+                              core.setFailed("Topic format is incorrect for room " + roomId);
+                              return;
+                          }
+
                           const topic = data.topic.replace(regex, releaseTopic);
                           if (topic === data.topic) {
                               console.log(roomId, "nothing to do");
                               return;
                           }
                           if (data["org.matrix.msc3765.topic"]) {
-                              data["org.matrix.msc3765.topic"].forEach(d => {
+                              data["org.matrix.msc3765.topic"]?.["m.text"].forEach(d => {
                                   d.body = d.body.replace(regex, releaseTopic);
                               });
                           }
                           if (data["m.topic"]) {
-                              data["m.topic"].forEach(d => {
+                              data["m.topic"]?.["m.text"].forEach(d => {
                                   d.body = d.body.replace(regex, releaseTopic);
                               });
                           }
@@ -97,12 +102,18 @@ jobs:
                           });
 
                           if (res.ok) {
-                              console.log(roomId, "topic updated:", topic);
+                              const resJson = res.json();
+                              if (resJson.errcode) {
+                                  core.setFailed(`Error updating ${roomId}: ${resJson.error}`);
+                              } else {
+                                  console.log(roomId, "topic updated:", topic);
+                              }
                           } else {
-                              console.log(roomId, await res.text());
+                              const errText = await res.text();
+                              core.setFailed(`Error updating ${roomId}: ${errText}`);
                           }
                       }
 
                       await updateReleaseInTopic(LOBBY_ROOM_ID);
-                      await updateReleaseInTopic(PUBLIC_ROOM_ID);
+                      await updateReleaseInTopic(PUBLIC_DISCUSSION_ROOM_ID);
                       await updateReleaseInTopic(ANNOUNCEMENT_ROOM_ID);

CHANGELOG.md

@@ -1,3 +1,102 @@
+Changes in [1.12.8](https://github.com/element-hq/element-web/releases/tag/v1.12.8) (2026-01-13)
+================================================================================================
+## 🦖 Deprecations
+
+* Remove `element_call.participant_limit` config and associated code. ([#31638](https://github.com/element-hq/element-web/pull/31638)). Contributed by @Half-Shot.
+
+## ✨ Features
+
+* Switch to rendering svg icons rather than masking them ([#31557](https://github.com/element-hq/element-web/pull/31557)). Contributed by @t3chguy.
+* Update history visibility UX ([#31635](https://github.com/element-hq/element-web/pull/31635)). Contributed by @langleyd.
+* Show correct call icon for joining a call. ([#31489](https://github.com/element-hq/element-web/pull/31489)). Contributed by @Half-Shot.
+* Update StopGapWidgetDriver to support sticky events ([#31205](https://github.com/element-hq/element-web/pull/31205)). Contributed by @Half-Shot.
+* Remove release announcements for new sounds \& room list ([#31544](https://github.com/element-hq/element-web/pull/31544)). Contributed by @t3chguy.
+* Add button to restore from backup into /devtools ([#31581](https://github.com/element-hq/element-web/pull/31581)). Contributed by @mxandreas.
+* Switch to non-solid compound icons for room settings \& composer ([#31561](https://github.com/element-hq/element-web/pull/31561)). Contributed by @t3chguy.
+* Support encrypted state events MSC4362 ([#31513](https://github.com/element-hq/element-web/pull/31513)). Contributed by @andybalaam.
+* Update prop type \& documentation for HistoryVisibleBanner and VM. ([#31545](https://github.com/element-hq/element-web/pull/31545)). Contributed by @kaylendog.
+* Switch to Compound icons in more places ([#31560](https://github.com/element-hq/element-web/pull/31560)). Contributed by @t3chguy.
+* Switch to rendering svg icons rather than masking them ([#31550](https://github.com/element-hq/element-web/pull/31550)). Contributed by @t3chguy.
+* Make AccessibleButton contrast control compatible ([#31308](https://github.com/element-hq/element-web/pull/31308)). Contributed by @t3chguy.
+* Switch to compound-design-tokens for platform icons ([#31543](https://github.com/element-hq/element-web/pull/31543)). Contributed by @t3chguy.
+* Switch to rendering svg icons rather than masking them ([#31531](https://github.com/element-hq/element-web/pull/31531)). Contributed by @t3chguy.
+* Switch to rendering svg icons rather than css masking ([#31517](https://github.com/element-hq/element-web/pull/31517)). Contributed by @t3chguy.
+* Auto approve matrix rtc member event (`m.rtc.member`) (sticky events) ([#31452](https://github.com/element-hq/element-web/pull/31452)). Contributed by @toger5.
+* Size Autocomplete relative to the RoomView height rather than the viewport height ([#31425](https://github.com/element-hq/element-web/pull/31425)). Contributed by @langleyd.
+* Implement UI for history visibility acknowledgement. ([#31156](https://github.com/element-hq/element-web/pull/31156)). Contributed by @kaylendog.
+* Export disposing hook from package ([#31498](https://github.com/element-hq/element-web/pull/31498)). Contributed by @MidhunSureshR.
+* Change `header-panel-bg-hover` to use `var(--cpd-color-bg-action-secondary-hovered)` for better custom theming ([#31457](https://github.com/element-hq/element-web/pull/31457)). Contributed by @th0mcat.
+* Improve icon rendering in iconized context menu ([#31458](https://github.com/element-hq/element-web/pull/31458)). Contributed by @t3chguy.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Fix space settings visibility tab crashing ([#31705](https://github.com/element-hq/element-web/pull/31705)). Contributed by @RiotRobot.
+* Fix expand/collapse reply preview not showing in some cases ([#31639](https://github.com/element-hq/element-web/pull/31639)). Contributed by @t3chguy.
+* Fix bundled font or custom font not applied after theme switch ([#31591](https://github.com/element-hq/element-web/pull/31591)). Contributed by @florianduros.
+* Add ol override CSS for markdown-body ([#31618](https://github.com/element-hq/element-web/pull/31618)). Contributed by @niamu.
+* Fix reaction left margin in timeline card ([#31625](https://github.com/element-hq/element-web/pull/31625)). Contributed by @t3chguy.
+* Open right panel timeline when jumping to event with maximised widget ([#31626](https://github.com/element-hq/element-web/pull/31626)). Contributed by @t3chguy.
+* Fix Compound Link elements not having an underline. ([#31583](https://github.com/element-hq/element-web/pull/31583)). Contributed by @Half-Shot.
+* Recalculate mentions metadata of forwarded messages based on message body ([#31193](https://github.com/element-hq/element-web/pull/31193)). Contributed by @twassman.
+* Fix Room Preview Card Layout ([#31611](https://github.com/element-hq/element-web/pull/31611)). Contributed by @germain-gg.
+* Fix: WidgetMessaging not properly closed causing side effects and bugs ([#31598](https://github.com/element-hq/element-web/pull/31598)). Contributed by @BillCarsonFr.
+* Handle cross-signing keys missing locally and/or from secret storage ([#31367](https://github.com/element-hq/element-web/pull/31367)). Contributed by @uhoreg.
+* fix: Allow wrapping in `Banner` component. ([#31532](https://github.com/element-hq/element-web/pull/31532)). Contributed by @kaylendog.
+* Update algorithm for history visible banner. ([#31577](https://github.com/element-hq/element-web/pull/31577)). Contributed by @kaylendog.
+* Fix styling issue when using EW modules ([#31533](https://github.com/element-hq/element-web/pull/31533)). Contributed by @florianduros.
+* Prevent history visible banner from displaying in threads. ([#31535](https://github.com/element-hq/element-web/pull/31535)). Contributed by @kaylendog.
+* Make the feedback icon be the right color in dark theme ([#31527](https://github.com/element-hq/element-web/pull/31527)). Contributed by @robintown.
+
+
+Changes in [1.12.7](https://github.com/element-hq/element-web/releases/tag/v1.12.7) (2025-12-16)
+================================================================================================
+## ✨ Features
+
+* Replace legacy icons with compound ([#31424](https://github.com/element-hq/element-web/pull/31424)). Contributed by @t3chguy.
+* Update polls UX to match EX Mobile and improve accessibility ([#31245](https://github.com/element-hq/element-web/pull/31245)). Contributed by @langleyd.
+* Add option to enable read receipt and marker when user interact with UI ([#31353](https://github.com/element-hq/element-web/pull/31353)). Contributed by @florianduros.
+* Introduce a hook to auto dispose view models ([#31178](https://github.com/element-hq/element-web/pull/31178)). Contributed by @MidhunSureshR.
+* Update settings toggles to use consistent design across app. ([#30169](https://github.com/element-hq/element-web/pull/30169)). Contributed by @Half-Shot.
+* Add ability to the room view to hide widgets ([#31400](https://github.com/element-hq/element-web/pull/31400)). Contributed by @langleyd.
+* call: Pass the echo cancellation and noise suppression settings to EC ([#31317](https://github.com/element-hq/element-web/pull/31317)). Contributed by @BillCarsonFr.
+* Tweak rendering of icons for a11y ([#31358](https://github.com/element-hq/element-web/pull/31358)). Contributed by @t3chguy.
+* Implement new `renderNotificationDecoration` from module API  ([#31389](https://github.com/element-hq/element-web/pull/31389)). Contributed by @MidhunSureshR.
+* Replace more icons with compound ([#31381](https://github.com/element-hq/element-web/pull/31381)). Contributed by @t3chguy.
+* Replace more icons with compound ([#31378](https://github.com/element-hq/element-web/pull/31378)). Contributed by @t3chguy.
+* `<Banner/>`: Hide `Dismiss` button if `onClose` handler is not provided. ([#31362](https://github.com/element-hq/element-web/pull/31362)). Contributed by @kaylendog.
+* Replace batch of legacy icons with compound design tokens ([#31360](https://github.com/element-hq/element-web/pull/31360)). Contributed by @t3chguy.
+* MSC4380: Invite blocking ([#31268](https://github.com/element-hq/element-web/pull/31268)). Contributed by @richvdh.
+* Tweak rendering of icons for accessibility ([#31346](https://github.com/element-hq/element-web/pull/31346)). Contributed by @t3chguy.
+* Implement a shared `Banner` component. ([#31266](https://github.com/element-hq/element-web/pull/31266)). Contributed by @kaylendog.
+* Allow the Login screen to use the dark theme ([#31293](https://github.com/element-hq/element-web/pull/31293)). Contributed by @richvdh.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Amend e2e normal icon from lock-solid to info ([#31559](https://github.com/element-hq/element-web/pull/31559)). Contributed by @t3chguy.
+* [Backport staging] Fix CSS specificity causing icon issues in e2e verification ([#31548](https://github.com/element-hq/element-web/pull/31548)). Contributed by @RiotRobot.
+* [Backport staging] Fix e2e icons in CompleteSecurity \& SetupEncryptionBody ([#31522](https://github.com/element-hq/element-web/pull/31522)). Contributed by @RiotRobot.
+* [Backport staging] Remove an extra paragraph in advanced room settings ([#31511](https://github.com/element-hq/element-web/pull/31511)). Contributed by @RiotRobot.
+* [Backport staging] Don't show the key storage out of sync toast when backup disabled ([#31507](https://github.com/element-hq/element-web/pull/31507)). Contributed by @RiotRobot.
+* Fix composer button visibility in contrast colour mode ([#31255](https://github.com/element-hq/element-web/pull/31255)). Contributed by @t3chguy.
+* Ensure correct room version is used and permissions are appropriately sert when creating rooms ([#31464](https://github.com/element-hq/element-web/pull/31464)). Contributed by @Half-Shot.
+* Fix e2e icon rendering ([#31454](https://github.com/element-hq/element-web/pull/31454)). Contributed by @t3chguy.
+* EventIndexer: ensure we add initial checkpoints when the db is first opened ([#31448](https://github.com/element-hq/element-web/pull/31448)). Contributed by @richvdh.
+* Fix `/join <alias>` command failing due to race condition ([#31433](https://github.com/element-hq/element-web/pull/31433)). Contributed by @MidhunSureshR.
+* MessageEventIndexDialog: distinguish indexed rooms ([#31436](https://github.com/element-hq/element-web/pull/31436)). Contributed by @richvdh.
+* Move `EditInPlace` out of `Form` (Fixes: reloading EW on EC url update) ([#31434](https://github.com/element-hq/element-web/pull/31434)). Contributed by @toger5.
+* Fixes issue where cursor would jump to the beginning of the input field after converting Japanese text and pressing Tab ([#31432](https://github.com/element-hq/element-web/pull/31432)). Contributed by @shinaoka.
+* Fix widgets getting stuck in loading states ([#31314](https://github.com/element-hq/element-web/pull/31314)). Contributed by @robintown.
+* Room list: fix room options remaining on room item after mouse leaving ([#31414](https://github.com/element-hq/element-web/pull/31414)). Contributed by @florianduros.
+* Make `RoomList.showMessagePreview` configurable by `config.json` ([#31419](https://github.com/element-hq/element-web/pull/31419)). Contributed by @florianduros.
+* Fix bug which caused app not to load correctly when `force_verification` is enabled ([#31265](https://github.com/element-hq/element-web/pull/31265)). Contributed by @richvdh.
+* Room list: display the menu option on the room list item when clicked/opened ([#31380](https://github.com/element-hq/element-web/pull/31380)). Contributed by @florianduros.
+* Fix handling of SVGs ([#31359](https://github.com/element-hq/element-web/pull/31359)). Contributed by @t3chguy.
+* Fix word wrapping in expanded left panel buttons ([#31377](https://github.com/element-hq/element-web/pull/31377)). Contributed by @t3chguy.
+* Fix aspect ratio on error view background ([#31361](https://github.com/element-hq/element-web/pull/31361)). Contributed by @t3chguy.
+* Fix failure to request persistent storage perms ([#31299](https://github.com/element-hq/element-web/pull/31299)). Contributed by @richvdh.
+* Fix calls sometimes not knowing that they're presented ([#31313](https://github.com/element-hq/element-web/pull/31313)). Contributed by @robintown.
+
+
 Changes in [1.12.6](https://github.com/element-hq/element-web/releases/tag/v1.12.6) (2025-12-03)
 ================================================================================================
 This release fixes a bug where 1:1 calling was incorrectly not available if no Element Call focus was set.

Dockerfile

@@ -1,7 +1,7 @@
-# syntax=docker.io/docker/dockerfile:1.19-labs@sha256:dce1c693ef318bca08c964ba3122ae6248e45a1b96d65c4563c8dc6fe80349a2
+# syntax=docker.io/docker/dockerfile:1.20-labs@sha256:dbcde2ebc4abc8bb5c3c499b9c9a6876842bf5da243951cd2697f921a7aeb6a9
 
 # Builder
-FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:de951ccb5f52277af681a421e3328760fc4d22fbf20c391d78ef85af58430df6 AS builder
+FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:5583cbe5d3347db372d9a9100eba272b548ca1f53246b9b769334bcd0eef2c26 AS builder
 
 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -19,7 +19,7 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json
 
 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:e2b324ae5571b5ea49ddeb03c966b240f43e5ecbdf73adcd528b49399fe11ad6
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:a6bec37058b9047ece799c01d98dc6d5aa0542b6583cc69f187652f91331a752
 
 # Need root user to install packages & manipulate the usr directory
 USER root

book.toml

@@ -4,7 +4,6 @@
 title = "Element Web & Desktop"
 authors = ["New Vector Ltd.", "The Matrix.org Foundation C.I.C."]
 language = "en"
-multilingual = false
 
 # The directory that documentation files are stored in
 src = "docs"

code_style.md

@@ -79,7 +79,7 @@ Unless otherwise specified, the following applies to all code:
 11. If a variable is not receiving a value on declaration, its type must be defined.
 
     ```typescript
-    let errorMessage: Optional<string>;
+    let errorMessage: string;
     ```
 
 12. Objects can use shorthand declarations, including mixing of types.

config.sample.json

@@ -43,7 +43,6 @@
     },
     "element_call": {
         "url": "https://call.element.io",
-        "participant_limit": 8,
         "brand": "Element Call"
     },
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"

docs/config.md

@@ -391,8 +391,6 @@ The VoIP and Jitsi options are:
 6. `element_call`: Optional configuration for native group calls using Element Call, with the following subkeys:
     - `use_exclusively`: A boolean specifying whether Element Call should be used exclusively as the only VoIP stack in
       the app, removing the ability to start legacy 1:1 calls or Jitsi calls. Defaults to `false`.
-    - `participant_limit`: The maximum number of users who can join a call; if
-      this number is exceeded, the user will not be able to join a given call.
     - `brand`: Optional name for the app. Defaults to `Element Call`. This is
       used throughout the application in various strings/locations.
     - `guest_spa_url`: Optional URL for an Element Call single-page app (SPA),
@@ -588,6 +586,22 @@ Currently, the following UI feature flags are supported:
 - `UIFeature.allowCreatingPublicRooms` - Whether or not public rooms can be created.
 - `UIFeature.allowCreatingPublicSpaces` - Whether or not public spaces can be created.
 
+## Modules
+
+`modules`: An optional array of module paths to load at runtime. Each entry is a URL or path to a JavaScript module entry point that will be dynamically imported when Element Web starts.
+
+**Note:** This is separate from the build-time module system configured via `build_config.yaml`. Runtime modules are loaded dynamically from the paths specified in `config.json`, while build-time modules are bundled during compilation.
+
+**Example:**
+
+```json
+{
+    "modules": ["https://example.com/my-module.js", "/path/to/local-module.js"]
+}
+```
+
+Each module URL is loaded using dynamic import (`import()`). The modules are loaded in order after Element Web initializes but before the application fully starts. Modules must be accessible from the browser and should export a compatible module format that works with the [Module API](https://github.com/element-hq/element-modules/tree/main/packages/element-web-module-api).
+
 ## Undocumented / developer options
 
 The following are undocumented or intended for developer use only.
@@ -596,4 +610,3 @@ The following are undocumented or intended for developer use only.
 2. `sync_timeline_limit`
 3. `dangerously_allow_unsafe_and_insecure_passwords`
 4. `latex_maths_delims`: An optional setting to override the default delimiters used for maths parsing. See https://github.com/matrix-org/matrix-react-sdk/pull/5939 for details. Only used when `feature_latex_maths` is enabled.
-5. `modules`: An optional list of modules to load. This is used for testing and development purposes only.

docs/labs.md

@@ -112,3 +112,25 @@ Enables knock feature for rooms. This allows users to ask to join a room.
 ## New room list (`feature_new_room_list`) [In Development]
 
 Enable the new room list that is currently in development.
+
+## Exclude insecure devices when sending/receiving messages (`feature_exclude_insecure_devices`)
+
+Do not send or receive messages to/from devices that are not properly verified. Users with unverified devices will not
+receive your messages at all on those devices, and if they send messages, you will not be able to read them, but you
+will be aware that a message exists.
+
+## Share encrypted history with new members (`feature_share_history_on_invite`) [In Development]
+
+When inviting users to an encrypted room with shared history (i.e. a room with the "Who can read history?" setting set
+to "Members only (since the point in time of selecting this option)"), send the keys for previous messages to the
+invitee so they can read them.
+
+Both the inviter and the invitee must set this labs flag, before the invitation is sent.
+
+## Encrypted state events (MSC4362) (`feature_msc4362_encrypted_state_events`)
+
+Encrypt most of the state events in the room, including the room name and topic.
+
+WARNING: this means that users joining a room who do not have access to its history will not be able to see the name or
+topic of the room, or any other room state information. It also means the room name and topic are not available before
+joining a room.

docs/playwright.md

@@ -2,216 +2,485 @@
 
 ## Contents
 
-- How to run the tests
-- How the tests work
-- How to write great Playwright tests
-- Visual testing
+- [Overview](#overview)
+- [Prerequisites](#prerequisites)
+- [Running the Tests](#running-the-tests)
+    - [Element Web E2E Tests](#element-web-e2e-tests)
+    - [Shared Components Tests](#shared-components-tests)
+    - [Projects](#projects)
+- [How the Tests Work](#how-the-tests-work)
+    - [Test Structure](#test-structure)
+    - [Homeserver Setup](#homeserver-setup)
+    - [Fixtures](#fixtures)
+- [Writing Tests](#writing-tests)
+    - [Getting a Homeserver](#getting-a-homeserver)
+    - [Logging In](#logging-in)
+    - [Joining a Room](#joining-a-room)
+    - [Using matrix-js-sdk](#using-matrix-js-sdk)
+    - [Best Practices](#best-practices)
+- [Visual Testing](#visual-testing)
+- [Test Tags](#test-tags)
+- [Supported Container Runtimes](#supported-container-runtimes)
+
+## Overview
+
+Element Web contains two sets of Playwright tests:
+
+1. **Element Web E2E Tests** (`playwright/e2e/`) - Full end-to-end tests of the Element Web application with real homeserver instances
+2. **Shared Components Tests** (`packages/shared-components/`) - Visual regression tests for the shared component library using Storybook
+
+Both test suites run automatically in CI on every pull request and on every merge to develop & master.
+
+## Prerequisites
+
+Before running Playwright tests, ensure you have the following set up:
+
+### 1. Install Playwright Browsers and System Dependencies
+
+Follow the Playwright installation instructions:
+
+- **Browsers:** <https://playwright.dev/docs/browsers#install-browsers>
+- **System dependencies:** <https://playwright.dev/docs/browsers#install-system-dependencies>
+
+```sh
+yarn playwright install --with-deps
+```
+
+### 2. Container Runtime
+
+See [Supported Container Runtimes](#supported-container-runtimes) for details on supported container runtimes (Docker, Podman, Colima).
+
+### 3. Element Web Server (for E2E tests)
+
+Element Web E2E tests require an instance running on `http://localhost:8080` (configured in `playwright.config.ts`).
+
+You can either:
+
+- **Run manually:** `yarn start` in a separate terminal (not working for screenshot tests running in a docker environment).
+- **Auto-start:** Playwright will start the webserver automatically if it's not already running
 
 ## Running the Tests
 
-Our Playwright tests run automatically as part of our CI along with our other tests,
-on every pull request and on every merge to develop & master.
+### Element Web E2E Tests
 
-You may need to follow instructions to set up your development environment for running
-Playwright by following <https://playwright.dev/docs/browsers#install-browsers> and
-<https://playwright.dev/docs/browsers#install-system-dependencies>.
+Our main Playwright tests run against a full Element Web instance with Synapse/Dendrite homeservers.
 
-However the Playwright tests are run, an element-web instance must be running on
-http://localhost:8080 (this is configured in `playwright.config.ts`) - this is what will
-be tested. When running Playwright tests yourself, the standard `yarn start` from the
-element-web project is fine: leave it running it a different terminal as you would
-when developing. Alternatively if you followed the development set up from element-web then
-Playwright will be capable of running the webserver on its own if it isn't already running.
+**Run all E2E tests:**
 
-The tests use [testcontainers](https://node.testcontainers.org/) to launch Homeserver (Synapse or Dendrite)
-instances to test against, so you'll also need to one of the
-[supported container runtimes](#supporter-container-runtimes)
-installed and working in order to run the Playwright tests.
-
-There are a few different ways to run the tests yourself. The simplest is to run:
-
-```shell
+```sh
 yarn run test:playwright
 ```
 
-This will run the Playwright tests once, non-interactively.
+**Run a specific test file:**
 
-You can also run individual tests this way too, as you'd expect:
-
-```shell
-yarn run test:playwright --spec playwright/e2e/register/register.spec.ts
+```sh
+yarn run test:playwright playwright/e2e/register/register.spec.ts
 ```
 
-Playwright also has its own UI that you can use to run and debug the tests.
-To launch it:
+**Run tests interactively with Playwright UI:**
 
-```shell
-yarn run test:playwright:open --headed --debug
+```sh
+yarn run test:playwright:open
 ```
 
-See more command line options at <https://playwright.dev/docs/test-cli>.
+**Run screenshot tests only:**
 
-## Projects
+> [!WARNING]
+> This command run the playwright tests in a docker environment.
 
-By default, Playwright will run all "Projects", this means tests will run against Chrome, Firefox and "Safari" (Webkit).
-We only run tests against Chrome in pull request CI, but all projects in the merge queue.
-Some tests are excluded from running on certain browsers due to incompatibilities in the test harness.
+```sh
+yarn run test:playwright:screenshots
+```
+
+For more information about visual testing, see [Visual Testing](playwright#visual-testing).
+
+**Additional command line options:** <https://playwright.dev/docs/test-cli>
+
+### Shared Components Tests
+
+The shared-components package uses Playwright (via Storybook test runner) to validate component rendering across different states and configurations.
+
+**Run Storybook tests:**
+
+```sh
+cd packages/shared-components
+yarn test:storybook
+```
+
+**Run Storybook tests in CI mode:**
+
+```sh
+cd packages/shared-components
+yarn test:storybook:ci
+```
+
+**Update Storybook screenshots:**
+
+```sh
+cd packages/shared-components
+yarn test:storybook:update
+```
+
+This uses the same Docker-based screenshot rendering as Element Web to ensure consistency across platforms.
+
+### Projects
+
+By default, Playwright runs tests against all "Projects": Chrome, Firefox, "Safari" (Webkit), Dendrite and Picone.
+
+- Chrome, Firefox, Safari run against Synapse
+- Dendrite and Picone run against Chrome
+
+Misc:
+
+- **Pull Request CI:** Tests run only against Chrome
+- **Merge Queue:** Tests run against all projects
+- Some tests are excluded from certain browsers due to incompatibilities (see [Test Tags](#test-tags))
 
 ## How the Tests Work
 
-Everything Playwright-related lives in the `playwright/` subdirectory
-as is typical for Playwright tests. Likewise, tests live in `playwright/e2e`.
+### Test Structure
 
-`playwright/testcontainers` contains the testcontainers which start instances
-of Synapse/Dendrite. These servers are what Element-web runs against in the tests.
+**Element Web tests** are located in the `playwright/` subdirectory:
 
-Synapse can be launched with different configurations in order to test element
-in different configurations. You can specify `synapseConfig` as such:
+- `playwright/e2e/` - E2E test files
+- `playwright/testcontainers/` - Testcontainers for Synapse/Dendrite instances
+- `playwright/snapshots/` - Visual regression test screenshots
+- `playwright/pages/` - Page object models
+- `playwright/plugins/` - Custom Playwright plugins
+
+**Shared components tests** are located in `packages/shared-components/`:
+
+- `packages/shared-components/playwright/snapshots/` - Storybook screenshot baselines
+- `packages/shared-components/.storybook/` - Storybook configuration
+
+The shared components use Storybook's test runner (powered by Playwright) to validate component rendering across different states and configurations.
+
+### Homeserver Setup
+
+Homeservers (Synapse or Dendrite) are launched by Playwright workers and reused for all tests matching the worker configuration.
+
+**Configure Synapse options:**
 
 ```typescript
 test.use({
     synapseConfig: {
-        // The config options to pass to the Synapse instance
+        // Configuration options for the Synapse instance
     },
 });
 ```
 
-The appropriate homeserver will be launched by the Playwright worker and reused for all tests which match the worker configuration.
-Due to homeservers being reused between tests, please use unique names for any rooms put into the room directory as
-they may be visible from other tests, the suggested approach is to use `testInfo.testId` within the name or lodash's uniqueId.
-We remove public rooms from the room directory between tests but deleting users doesn't have a homeserver agnostic solution.
-The logs from testcontainers will be attached to any reports output from Playwright.
+**Important notes:**
+
+- Homeservers are reused between tests for efficiency
+- Please use unique names for any rooms put into the room directory as they may be visible from other tests, the suggested approach is to use `testInfo.testId` within the name or lodash's uniqueId.
+- We remove public rooms from the room directory between tests but deleting users doesn't have a homeserver agnostic solution.
+- Homeserver logs are attached to Playwright test reports
+
+### Fixtures
+
+We heavily leverage [Playwright fixtures](https://playwright.dev/docs/test-fixtures) to provide:
+
+- Homeserver instances (`homeserver`)
+- Logged-in users (`user`)
+- Bot users (`bot`)
+- Application state (`app`)
+
+See [Writing Tests](#writing-tests) for usage examples.
 
 ## Writing Tests
 
-Mostly this is the same advice as for writing any other Playwright test: the Playwright
-docs are well worth a read if you're not already familiar with Playwright testing, eg.
-https://playwright.dev/docs/best-practices. To avoid your tests being flaky it is also
-recommended to use [auto-retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions).
+For general Playwright best practices, see:
 
-### Getting a Synapse
+- <https://playwright.dev/docs/best-practices>
+- <https://playwright.dev/docs/test-assertions#auto-retrying-assertions> (recommended for avoiding flaky tests)
 
-We heavily leverage the magic of [Playwright fixtures](https://playwright.dev/docs/test-fixtures).
-To acquire a homeserver within a test just add the `homeserver` fixture to the test:
+### Getting a Homeserver
+
+Use the `homeserver` fixture to acquire a Homeserver instance:
 
 ```typescript
 test("should do something", async ({ homeserver }) => {
-    // homeserver is a Synapse/Dendrite instance
+    // homeserver is a ready-to-use Synapse/Dendrite instance
 });
 ```
 
-This returns an object with information about the Homeserver instance, including what port
-it was started on and the ID that needs to be passed to shut it down again. It also
-returns the registration shared secret (`registrationSecret`) that can be used to
-register users via the REST API. The Homeserver has been ensured ready to go by awaiting
-its internal health-check.
+**The fixture provides:**
 
-Homeserver instances should be reasonably cheap to start (you may see the first one take a
-while as it pulls the Docker image).
-You do not need to explicitly clean up the instance as it will be cleaned up by the fixture.
+- Server port information
+- Instance ID for shutdown
+- Registration shared secret (`registrationSecret`) for registering users via REST API
+
+Homeserver instances are:
+
+- Reasonably cheap to start (first run may be slow while pulling Docker image)
+- Automatically cleaned up by the fixture
 
 ### Logging In
 
-We again heavily leverage the magic of [Playwright fixtures](https://playwright.dev/docs/test-fixtures).
-To acquire a logged-in user within a test just add the `user` fixture to the test:
+Use the `user` fixture to get a logged-in user:
 
 ```typescript
 test("should do something", async ({ user }) => {
-    // user is a logged in user
+    // user is logged in and ready to use
 });
 ```
 
-You can specify a display name for the user via `test.use` `displayName`,
-otherwise a random one will be generated.
-This will register a random userId using the registrationSecret with a random password
-and the given display name. The user fixture will contain details about the credentials for if
-they are needed for User-Interactive Auth or similar but localStorage will already be seeded with them
-and the app loaded (path `/`).
+**Customize the user:**
+
+```typescript
+test.use({
+    displayName: "Alice",
+});
+
+test("should do something", async ({ user }) => {
+    // user is logged in as "Alice"
+});
+```
+
+**What the fixture does:**
+
+- Registers a random userId with the `registrationSecret`
+- Generates a random password (or uses specified display name)
+- Seeds localStorage with credentials
+- Loads the app at path `/`
+- Provides user details for User-Interactive Auth if needed
 
 ### Joining a Room
 
-Many tests will also want to start with the client in a room, ready to send & receive messages. Best
-way to do this may be to get an access token for the user and use this to create a room with the REST
-API before logging the user in.
-You can make use of the bot fixture and the `client` field on the app fixture to do this.
+To start with a user in a room:
 
-### Try to write tests from the users' perspective
+```typescript
+test("should send a message", async ({ user, app, bot }) => {
+    // Use the bot client to create a room
+    const roomId = await bot.createRoom({
+        name: "Test Room",
+        invite: [user.userId],
+    });
 
-Like for instance a user will not look for a button by querying a CSS selector.
-Instead, you should work with roles / labels etc, see https://playwright.dev/docs/locators.
+    // Accept the invite using the app client
+    await app.client.joinRoom(roomId);
+
+    // Now ready to test messaging
+});
+```
+
+**Best practice:** Use the REST API (via `bot` or `app.client`) to set up room state rather than driving the UI.
 
 ### Using matrix-js-sdk
 
-Due to the way we run the Playwright tests in CI, at this time you can only use the matrix-js-sdk module
-exposed on `window.matrixcs`. This has the limitation that it is only accessible with the app loaded.
-This may be revisited in the future.
+Due to CI constraints, use the matrix-js-sdk module exposed on `window.matrixcs`:
 
-## Good Test Hygiene
+```typescript
+const matrixcs = window.matrixcs;
+```
 
-This section mostly summarises general good Playwright testing practice, and should not be news to anyone
-already familiar with Playwright.
+**Limitation:** Only accessible when the app is loaded. This may be revisited in the future.
 
-1. Test a well-isolated unit of functionality. The more specific, the easier it will be to tell what's
-   wrong when they fail.
-1. Don't depend on state from other tests: any given test should be able to run in isolation.
-1. Try to avoid driving the UI for anything other than the UI you're trying to test. e.g. if you're
-   testing that the user can send a reaction to a message, it's best to send a message using a REST
-   API, then react to it using the UI, rather than using the element-web UI to send the message.
-1. Avoid explicit waits. Playwright locators & assertions will implicitly wait for the specified
-   element to appear and all assertions are retried until they either pass or time out, so you should
-   never need to manually wait for an element.
-    - For example, for asserting about editing an already-edited message, you can't wait for the
-      'edited' element to appear as there was already one there, but you can assert that the body
-      of the message is what is should be after the second edit and this assertion will pass once
-      it becomes true. You can then assert that the 'edited' element is still in the DOM.
-    - You can also wait for other things like network requests in the
-      browser to complete (https://playwright.dev/docs/api/class-page#page-wait-for-response).
-      Needing to wait for things can also be because of race conditions in the app itself, which ideally
-      shouldn't be there!
+### Best Practices
 
-This is a small selection - the Playwright best practices guide, linked above, has more good advice, and we
-should generally try to adhere to them.
+For more guidance, see the [Playwright best practices guide](https://playwright.dev/docs/best-practices).
 
-## Screenshot testing
+#### 1. Test from the User's Perspective
 
-When we previously used Cypress we also dabbled with Percy, and whilst powerful it did not
-lend itself well to being executed on all PRs without needing to budget it substantially.
+Work with roles, labels, and accessible elements rather than CSS selectors:
+
+```typescript
+// Good
+await page.getByRole("button", { name: "Send" }).click();
+
+// Avoid
+await page.locator(".mx_MessageComposer_sendButton").click();
+```
+
+See <https://playwright.dev/docs/locators> for more guidance.
+
+#### 2. Test Well-Isolated Functionality
+
+- Focus on specific, well-defined units of functionality
+- Easier to debug when tests fail
+- More maintainable over time
+
+#### 3. Maintain Test Independence
+
+- Each test should run successfully in isolation
+- Don't depend on state from other tests
+- Clean up after your test if needed
+
+#### 4. Minimize UI Driving for Setup
+
+- Use REST APIs to set up test state when possible
+- Only drive the UI for the functionality you're actually testing
+
+**Example:**
+
+```typescript
+// Testing reactions - good approach
+test("should react to a message", async ({ page, app, bot }) => {
+    // Send message via API
+    const eventId = await bot.sendMessage(roomId, "Hello");
+
+    // Test the reaction UI
+    await page.getByText("Hello").hover();
+    await page.getByRole("button", { name: "React" }).click();
+    await page.getByLabel("😀").click();
+
+    // Verify reaction was sent
+    await expect(page.getByLabel("😀 1")).toBeVisible();
+});
+```
+
+#### 5. Avoid Explicit Waits
+
+Playwright locators and assertions automatically wait and retry:
+
+```typescript
+// Good - implicit waiting
+await expect(page.getByText("Message sent")).toBeVisible();
+
+// Avoid - explicit waits
+await page.waitForTimeout(1000);
+```
+
+**For dynamic content:**
+
+```typescript
+// Assert on the final state - Playwright will wait for it
+await expect(page.getByRole("textbox")).toHaveValue("Edited message");
+await expect(page.getByText("edited")).toBeVisible();
+```
+
+**When you do need to wait:**
+
+```typescript
+// Wait for network requests
+await page.waitForResponse("**/messages");
+
+// Wait for specific conditions
+await page.waitForFunction(() => window.matrixcs !== undefined);
+```
+
+## Visual Testing
 
 Playwright has built-in support for [visual comparison testing](https://playwright.dev/docs/test-snapshots).
-Screenshots are saved in `playwright/snapshots` and are rendered in a Linux Docker environment for stability.
 
-One must be careful to exclude any dynamic content from the screenshot, such as timestamps, avatars, etc,
-via the `mask` option. See the [Playwright docs](https://playwright.dev/docs/test-snapshots#masking).
+**Screenshot location:** `playwright/snapshots/`
 
-Some UI elements render differently between test runs, such as BaseAvatar when
-there is no avatar set, choosing a colour from the theme palette based on the
-hash of the user/room's Matrix ID. To avoid this creating flaky tests we inject
-some custom CSS, for this to happen we use the custom assertion `toMatchScreenshot`
-instead of the native `toHaveScreenshot`.
+**Rendering environment:** Linux Docker (for consistency across environments)
 
-If you are running Linux and are unfortunate that the screenshots are not rendering identically,
-you may wish to specify `--ignore-snapshots` and rely on Docker to render them for you.
+### Test Tag for Screenshots
+
+All screenshot tests must use the `@screenshot` tag:
+
+```typescript
+test("should render message list", { tag: "@screenshot" }, async ({ page }) => {
+    await expect(page).toMatchScreenshot("message-list.png");
+});
+```
+
+**Purpose of `@screenshot` tag:**
+
+- Allows running only screenshot tests via `test:playwright:screenshots`
+- Speeds up screenshot test runs and updates
+
+### Taking Screenshots
+
+Use the custom `toMatchScreenshot` assertion (not the native `toHaveScreenshot`):
+
+```typescript
+await expect(page).toMatchScreenshot("my-screenshot.png");
+```
+
+**Why a custom assertion?** We inject custom CSS to stabilize dynamic UI elements (e.g., BaseAvatar color selection based on Matrix ID hash).
+
+### Masking Dynamic Content
+
+Always mask dynamic content that changes between runs:
+
+```typescript
+await expect(page).toMatchScreenshot("chat.png", {
+    mask: [page.locator(".mx_MessageTimestamp"), page.locator(".mx_BaseAvatar")],
+});
+```
+
+Common elements to mask:
+
+- Timestamps
+- Avatars (when dynamic)
+- Animated elements
+- User-generated IDs
+
+See [Playwright masking docs](https://playwright.dev/docs/test-snapshots#masking) for more details.
+
+### Updating Screenshots
+
+This command runs only tests tagged with `@screenshot` in the Docker environment.
+When you need to update screenshot baselines (e.g., after intentional UI changes):
+
+```sh
+yarn run test:playwright:screenshots
+```
+
+**Important:** Always use this command to update screenshots rather than running tests locally with `--update-snapshots`.
+
+**Why?** Screenshots must be rendered in a consistent Linux Docker environment because:
+
+- Font rendering differs between operating systems (macOS, Windows, Linux)
+- Subpixel rendering varies across systems
+- Browser rendering engines have platform-specific differences
+
+Using `test:playwright:screenshots` ensures screenshots are generated in the same Docker environment used in CI, preventing false failures due to rendering differences.
 
 ## Test Tags
 
-We use test tags to categorise tests for running subsets more efficiently.
+Test tags categorize tests for efficient subset execution.
 
-- `@mergequeue`: Tests that are slow or flaky and cover areas of the app we update seldom, should not be run on every PR commit but will be run in the Merge Queue.
-- `@screenshot`: Tests that use `toMatchScreenshot` to speed up a run of `test:playwright:screenshots`. A test with this tag must not also have the `@mergequeue` tag as this would cause false positives in the stale screenshot detection.
-- `@no-$project`: Tests which are unsupported in $Project. These tests will be skipped when running in $Project.
+### Available Tags
 
-Anything testing Matrix media will need to have `@no-firefox` and `@no-webkit` as those rely on the service worker which
-has to be disabled in Playwright on Firefox & Webkit to retain routing functionality.
-Anything testing VoIP/microphone will need to have `@no-webkit` as fake microphone functionality is not available
-there at this time.
+- **`@mergequeue`**: Slow or flaky tests covering rarely-updated app areas
+    - Not run on every PR commit
+    - Run in the Merge Queue
 
-If you wish to run all tests in a PR, you can give it the label `X-Run-All-Tests`.
+- **`@screenshot`**: Tests using `toMatchScreenshot` for visual regression testing
+    - See the [Visual Testing](#visual-testing) section for detailed usage
 
-## Supporter container runtimes
+- **`@no-firefox`**: Tests unsupported in Firefox
+    - Automatically skipped in Firefox project
+    - Common reason: Service worker required (disabled in Playwright Firefox for routing)
 
-We use testcontainers to spin up various instances of Synapse, Matrix Authentication Service, and more.
-It supports Docker out of the box but also has support for Podman, Colima, Rancher, you just need to follow some instructions to achieve it:
-https://node.testcontainers.org/supported-container-runtimes/
+- **`@no-webkit`**: Tests unsupported in Webkit
+    - Automatically skipped in Webkit project
+    - Common reasons: Service worker required, microphone functionality unavailable
 
-If you are running under Colima, you may need to set the environment variable `TMPDIR` to `/tmp/colima` or a path
-within `$HOME` to allow bind mounting temporary directories into the Docker containers.
+### Running All Tests in a PR
+
+Add the `X-Run-All-Tests` label to your pull request to run all tests, including `@mergequeue` tests.
+
+## Supported Container Runtimes
+
+We use [testcontainers](https://node.testcontainers.org/) to manage Synapse, Matrix Authentication Service, and other service instances.
+
+**Supported runtimes:**
+
+- Docker (default, recommended)
+- Podman
+- Colima
+  See setup instructions: <https://node.testcontainers.org/supported-container-runtimes/>
+
+### Platform-Specific Configuration
+
+**Colima users:**
+
+If using Colima, you may need to set the `TMPDIR` environment variable to allow bind mounting temporary directories:
+
+```sh
+export TMPDIR=/tmp/colima
+# or
+export TMPDIR=$HOME/tmp
+```
+
+**macOS users:**
+
+Docker Desktop and Colima are both well-supported on macOS.
+
+> [!CAUTION]
+> Do not set `DOCKER_HOST` when running tests. Element Web uses [element-web-playwright-common](https://github.com/element-hq/element-modules/tree/main/packages/element-web-playwright-common), and setting `DOCKER_HOST` causes issues with testcontainers when running in the container VM.

docs/translating-dev.md

@@ -58,6 +58,12 @@ We are aiming for a set of common strings to be shared then some more localised
 Edits to existing strings should be performed only via Localazy.
 There you can also require all translations to be redone if the meaning of the string has changed significantly.
 
+## Removing existing strings
+
+You can remove an existing string by removing the key from `en_EN.json`. Do not modify other language json files for this purpose.
+
+Localazy will mark the keys you removed as deprecated. See https://localazy.com/docs/general/editing-source-language#source-key-states for more information about the difference between deprecated keys and deleted keys.
+
 ## Adding variables inside a string.
 
 1. Extend your `_t()` call. Instead of `_t(TKEY)` use `_t(TKEY, {})`
@@ -66,7 +72,7 @@ There you can also require all translations to be redone if the meaning of the s
 1. Add the variable inside the string. The syntax for variables is `%(variable)s`. Please note the _s_ at the end. The name of the variable has to match the previous used name.
 
 - You can use the special `count` variable to choose between multiple versions of the same string, in order to get the correct pluralization. E.g. `_t('You have %(count)s new messages', { count: 2 })` would show 'You have 2 new messages', while `_t('You have %(count)s new messages', { count: 1 })` would show 'You have one new message' (assuming a singular version of the string has been added to the translation file. See above). Passing in `count` is much preferred over having an if-statement choose the correct string to use, because some languages have much more complicated plural rules than english (e.g. they might need a completely different form if there are three things rather than two).
-- If you want to translate text that includes e.g. hyperlinks or other HTML you have to also use tag substitution, e.g. `_t('<a>Click here!</a>', {}, { 'a': (sub) => <a>{sub}</a> })`. If you don't do the tag substitution you will end up showing literally '<a>' rather than making a hyperlink.
+- If you want to translate text that includes e.g. hyperlinks or other HTML you have to also use tag substitution, e.g. `_t('<a>Click here!</a>', {}, { 'a': (sub) => <a>{sub}</a> })`. If you don't do the tag substitution you will end up showing literally `<a>` rather than making a hyperlink.
 - You can also use React components with normal variable substitution if you want to insert HTML markup, e.g. `_t('Your email address is %(emailAddress)s', { emailAddress: <i>{userEmailAddress}</i> })`.
 
 ## Things to know/Style Guides
@@ -78,4 +84,4 @@ There you can also require all translations to be redone if the meaning of the s
 - Concatenating strings often also introduces an implicit assumption about word order (e.g. that the subject of the sentence comes first), which is incorrect for many languages.
 - Translation 'smell test': If you have a string that does not begin with a capital letter (is not the start of a sentence) or it ends with e.g. ':' or a preposition (e.g. 'to') you should recheck that you are not trying to translate a partial sentence.
 - If you have multiple strings, that are almost identical, except some part (e.g. a word or two) it is still better to translate the full sentence multiple times. It may seem like inefficient repetition, but unlike programming where you try to minimize repetition, translation is much faster if you have many, full, clear, sentences to work with, rather than fewer, but incomplete sentence fragments.
-- Don't forget curly braces when you assign an expression to JSX attributes in the render method)
+- Don't forget curly braces when you assign an expression to JSX attributes in the render method.

jest.config.ts

@@ -43,7 +43,7 @@ const config: Config = {
         "counterpart": "<rootDir>/node_modules/counterpart",
     },
     transformIgnorePatterns: [
-        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
+        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|is-ip|ip-regex|super-regex|function-timeout|time-span|convert-hrtime|clone-regexp|is-regexp)).+$",
     ],
     collectCoverageFrom: [
         "<rootDir>/src/**/*.{js,ts,tsx}",

knip.ts

@@ -42,6 +42,8 @@ export default {
         "util",
         // Embedded into webapp
         "@element-hq/element-call-embedded",
+        // Transitive dep of jest
+        "jsdom",
 
         // 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

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.12.6",
+    "version": "1.12.8",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -69,20 +69,19 @@
         "postinstall": "patch-package"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.2.0",
-        "@playwright/test": "1.56.1",
-        "@types/react": "19.2.2",
-        "@types/react-dom": "19.2.2",
-        "oidc-client-ts": "3.3.0",
+        "**/pretty-format/react-is": "19.2.1",
+        "@types/react": "19.2.7",
+        "@types/react-dom": "19.2.3",
+        "oidc-client-ts": "3.4.1",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001754",
+        "caniuse-lite": "1.0.30001759",
         "testcontainers": "^11.0.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.6.0",
+        "@element-hq/element-web-module-api": "1.9.0",
         "@element-hq/web-shared-components": "link:packages/shared-components",
         "@fontsource/fira-code": "^5",
         "@fontsource/inter": "^5",
@@ -93,8 +92,8 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "^6.0.0",
-        "@vector-im/compound-web": "^8.1.2",
+        "@vector-im/compound-design-tokens": "6.4.3",
+        "@vector-im/compound-web": "^8.3.4",
         "@vector-im/matrix-wysiwyg": "2.40.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
@@ -118,8 +117,8 @@
         "highlight.js": "^11.3.1",
         "html-entities": "^2.0.0",
         "html-react-parser": "^5.2.2",
-        "is-ip": "^3.1.0",
-        "js-xxhash": "^4.0.0",
+        "is-ip": "^5.0.0",
+        "js-xxhash": "^5.0.0",
         "jsrsasign": "^11.0.0",
         "jszip": "^3.7.0",
         "katex": "^0.16.0",
@@ -130,16 +129,15 @@
         "lodash": "^4.17.21",
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
-        "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "39.3.0",
-        "matrix-widget-api": "^1.14.0",
+        "matrix-js-sdk": "40.0.0",
+        "matrix-widget-api": "^1.15.0",
         "memoize-one": "^6.0.0",
         "mime": "^4.0.4",
         "oidc-client-ts": "^3.0.1",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.290.0",
+        "posthog-js": "1.302.2",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -181,11 +179,11 @@
         "@babel/preset-react": "^7.12.10",
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
-        "@casualbot/jest-sonar-reporter": "2.4.0",
-        "@element-hq/element-call-embedded": "0.16.1",
+        "@casualbot/jest-sonar-reporter": "2.5.0",
+        "@element-hq/element-call-embedded": "0.16.3",
         "@element-hq/element-web-playwright-common": "^2.0.0",
         "@peculiar/webcrypto": "^1.4.3",
-        "@playwright/test": "^1.50.1",
+        "@playwright/test": "1.57.0",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@sentry/webpack-plugin": "^4.0.0",
         "@storybook/react-vite": "^10.0.7",
@@ -215,9 +213,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.2.2",
+        "@types/react": "19.2.7",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.2.2",
+        "@types/react-dom": "19.2.3",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.16.0",
         "@types/sdp-transform": "^2.4.10",
@@ -230,7 +228,7 @@
         "babel-loader": "^10.0.0",
         "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
         "blob-polyfill": "^9.0.0",
-        "chokidar": "^4.0.0",
+        "chokidar": "^5.0.0",
         "concurrently": "^9.0.0",
         "copy-webpack-plugin": "^13.0.0",
         "core-js": "^3.38.1",
@@ -283,7 +281,7 @@
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.6.2",
+        "prettier": "3.7.4",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
@@ -300,7 +298,7 @@
         "util": "^0.12.5",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",
-        "webpack-bundle-analyzer": "^4.8.0",
+        "webpack-bundle-analyzer": "^5.0.0",
         "webpack-cli": "^6.0.0",
         "webpack-dev-server": "^5.0.0",
         "webpack-retry-chunk-load-plugin": "^3.1.1",

packages/shared-components/.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     ],
     parserOptions: {
         project: ["./tsconfig.json"],
+        tsconfigRootDir: __dirname,
     },
     env: {
         browser: true,

packages/shared-components/.storybook/preview.tsx

@@ -6,6 +6,7 @@ import React, { useLayoutEffect } from "react";
 import { setLanguage } from "../src/utils/i18n";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { StoryContext } from "storybook/internal/csf";
+import { I18nApi, I18nContext } from "../src";
 
 export const globalTypes = {
     theme: {
@@ -70,9 +71,17 @@ const withTooltipProvider: Decorator = (Story) => {
     );
 };
 
+const withI18nProvider: Decorator = (Story) => {
+    return (
+        <I18nContext.Provider value={new I18nApi()}>
+            <Story />
+        </I18nContext.Provider>
+    );
+};
+
 const preview: Preview = {
     tags: ["autodocs"],
-    decorators: [withThemeProvider, withTooltipProvider],
+    decorators: [withThemeProvider, withTooltipProvider, withI18nProvider],
     parameters: {
         options: {
             storySort: {

packages/shared-components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@element-hq/web-shared-components",
-    "version": "0.0.0-test.8",
+    "version": "0.0.0-test.12",
     "description": "Shared components for Element",
     "author": "New Vector Ltd.",
     "repository": {
@@ -43,9 +43,14 @@
         "lint:types": "tsc --noEmit --jsx react",
         "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 /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
+        "test:storybook:update": "playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules"
+    },
+    "resolutions": {
+        "playwright": "1.57.0"
     },
     "dependencies": {
+        "@element-hq/element-web-module-api": "^1.8.0",
+        "@vector-im/compound-design-tokens": "^6.4.3",
         "classnames": "^2.5.1",
         "counterpart": "^0.18.6",
         "lodash": "^4.17.21",
@@ -56,11 +61,11 @@
     },
     "devDependencies": {
         "@element-hq/element-web-playwright-common": "^2.0.0",
-        "@playwright/test": "^1.50.1",
+        "@playwright/test": "1.57.0",
         "@storybook/addon-a11y": "^10.0.7",
         "@storybook/addon-designs": "^11.0.1",
         "@storybook/addon-docs": "^10.0.7",
-        "@storybook/icons": "^1.6.0",
+        "@storybook/icons": "^2.0.0",
         "@storybook/react-vite": "^10.0.7",
         "@storybook/test-runner": "^0.24.1",
         "@testing-library/dom": "^10.4.1",
@@ -88,7 +93,6 @@
     },
     "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
     "peerDependencies": {
-        "@vector-im/compound-design-tokens": "^6.0.0",
-        "@vector-im/compound-web": "^8.2.5"
+        "@vector-im/compound-web": "^8.3.4"
     }
 }

packages/shared-components/scripts/storybook-screenshot-update.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+#
+# Update storybook screenshots
+#
+# This script should be used as the entrypoint parameter of the `playwright-screenshots` script. It
+# installs the yarn dependencies, and then runs `test-storybook` to update the storybook screenshots.
+#
+# It expects to find a storybook instance running at :6007 on the host machine. It also requires that
+# `playwright-screenshots` is given the `--with-node-modules` parameter.
+#
+# Example:
+#
+#        test-storybook --url http://localhost:6007/
+#        playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules
+#
+#
+# Note: even though this script is small, it is important because the alternative is running
+# `playwright-screenshots` twice in quick succession (once to do `yarn install`, a second to do the
+# actual updates): and that fails, because running `playwright-screenshots` without actually starting
+# Testcontainers leaves a ryuk container hanging around for up to 60s, which will block the second
+# invocation.
+
+set -e
+
+# First install dependencies. We have to do this within the playwright container rather than the host,
+# because we have which must be built for the right architecture (and some environments use a VM
+# to run docker containers, meaning that things inside a container use a different architecture than
+# those on the host).
+yarn
+
+# Now run the screenshot update
+/work/node_modules/.bin/test-storybook --url http://host.docker.internal:6007/ --updateSnapshot

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx

@@ -14,6 +14,8 @@ import { fireEvent } from "@testing-library/dom";
 import * as stories from "./AudioPlayerView.stories.tsx";
 import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
 import { MockViewModel } from "../../viewmodel/MockViewModel.ts";
+import { I18nContext } from "../../utils/i18nContext.ts";
+import { I18nApi } from "../../index.ts";
 
 const { Default, NoMediaName, NoSize, HasError } = composeStories(stories);
 
@@ -64,7 +66,9 @@ describe("AudioPlayerView", () => {
             error: false,
         });
 
-        render(<AudioPlayerView vm={vm} />);
+        render(<AudioPlayerView vm={vm} />, {
+            wrapper: ({ children }) => <I18nContext.Provider value={new I18nApi()}>{children}</I18nContext.Provider>,
+        });
         await user.click(screen.getByRole("button", { name: "Play" }));
         expect(togglePlay).toHaveBeenCalled();
 

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.tsx

@@ -14,7 +14,7 @@ import { Flex } from "../../utils/Flex";
 import styles from "./AudioPlayerView.module.css";
 import { PlayPauseButton } from "../PlayPauseButton";
 import { type PlaybackState } from "../playback";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";
 import { formatBytes } from "../../utils/FormattingUtils";
 import { Clock } from "../Clock";
 import { SeekBar } from "../SeekBar";
@@ -90,6 +90,8 @@ interface AudioPlayerViewProps {
  * ```
  */
 export function AudioPlayerView({ vm }: Readonly<AudioPlayerViewProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+
     const {
         playbackState,
         mediaName = _t("timeline|m.audio|unnamed_audio"),

packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`AudioPlayerView renders the audio player in default state 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -114,7 +114,7 @@ exports[`AudioPlayerView renders the audio player in error state 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -210,7 +210,7 @@ exports[`AudioPlayerView renders the audio player without media name 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -301,7 +301,7 @@ exports[`AudioPlayerView renders the audio player without size 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg

packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx

@@ -11,7 +11,7 @@ import Play from "@vector-im/compound-design-tokens/assets/web/icons/play-solid"
 import Pause from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid";
 
 import styles from "./PlayPauseButton.module.css";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";
 
 export interface PlayPauseButtonProps extends HTMLAttributes<HTMLButtonElement> {
     /**
@@ -46,6 +46,8 @@ export function PlayPauseButton({
     togglePlay,
     ...rest
 }: Readonly<PlayPauseButtonProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+
     const label = playing ? _t("action|pause") : _t("action|play");
 
     return (

packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`PlayPauseButton renders the button in default state 1`] = `
     tabindex="0"
   >
     <div
-      class="_indicator-icon_zr2a0_17"
+      class="_indicator-icon_147l5_17"
       style="--cpd-icon-button-size: 100%;"
     >
       <svg
@@ -45,7 +45,7 @@ exports[`PlayPauseButton renders the button in playing state 1`] = `
     tabindex="0"
   >
     <div
-      class="_indicator-icon_zr2a0_17"
+      class="_indicator-icon_147l5_17"
       style="--cpd-icon-button-size: 100%;"
     >
       <svg

packages/shared-components/src/audio/SeekBar/SeekBar.tsx

@@ -10,7 +10,7 @@ import { throttle } from "lodash";
 import classNames from "classnames";
 
 import style from "./SeekBar.module.css";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";
 
 export interface SeekBarProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /**
@@ -33,6 +33,8 @@ interface ISeekCSS extends CSSProperties {
  * ```
  */
 export function SeekBar({ value = 0, className, ...rest }: Readonly<SeekBarProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+
     const [newValue, setNewValue] = useState(value);
     // Throttle the value setting to avoid excessive re-renders
     const setThrottledValue = useMemo(() => throttle(setNewValue, 10), []);

packages/shared-components/src/composer/Banner/Banner.module.css

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2025 Element Creations 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.
+ */
+
+:root {
+    --cpd-color-gradient-critical-linear: linear-gradient(
+        180deg,
+        var(--cpd-color-alpha-red-500) 0%,
+        var(--cpd-color-alpha-red-400) 20%,
+        var(--cpd-color-alpha-red-300) 40%,
+        var(--cpd-color-alpha-red-200) 60%,
+        var(--cpd-color-alpha-red-100) 80%,
+        var(--cpd-color-transparent) 100%
+    );
+}
+
+.banner {
+    container-type: inline-size;
+    container-name: banner;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: var(--cpd-space-3x);
+    padding: var(--cpd-space-4x);
+
+    border-top: 1px solid var(--cpd-color-gray-400);
+}
+
+.banner[data-type="success"] {
+    background: var(--cpd-color-gradient-subtle-linear);
+    border-color: var(--cpd-color-green-900);
+}
+
+.banner[data-type="critical"] {
+    background: var(--cpd-color-gradient-critical-linear);
+    border-color: var(--cpd-color-border-critical-primary);
+}
+
+.banner[data-type="info"] {
+    background: var(--cpd-color-gradient-info-linear);
+    border-color: var(--cpd-color-blue-900);
+}
+
+.banner[data-type="info"] :is(svg) {
+    color: var(--cpd-color-blue-900);
+}
+
+.banner[data-type="success"] :is(.content, svg) {
+    color: var(--cpd-color-green-900);
+}
+
+.banner[data-type="critical"] :is(.content, svg) {
+    color: var(--cpd-color-red-900);
+}
+
+.banner p {
+    margin: 0;
+}
+
+.icon {
+    /* lock icon dimensions */
+    min-width: 32px;
+    min-height: 32px;
+    max-width: 32px;
+    max-height: 32px;
+
+    margin: 4px;
+
+    /* centre svg icons, as they are not full width */
+    flex: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon img {
+    border-radius: 50%;
+}
+
+.actions {
+    margin-left: auto;
+
+    flex: 0;
+    display: flex;
+    flex-direction: row;
+    gap: var(--cpd-space-1x);
+    align-self: center;
+
+    white-space: nowrap;
+}

packages/shared-components/src/composer/Banner/Banner.stories.tsx

@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) 2025 Element Creations 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 { fn } from "storybook/test";
+import { type Meta, type StoryObj } from "@storybook/react-vite";
+import { Button } from "@vector-im/compound-web";
+
+import { Banner } from "./Banner";
+
+const meta = {
+    title: "room/Banner",
+    component: Banner,
+    tags: ["autodocs"],
+    args: {
+        children: <p>Hello! This is a status banner.</p>,
+        onClose: fn(),
+    },
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Info: Story = {
+    args: {
+        type: "info",
+    },
+};
+export const Success: Story = {
+    args: {
+        type: "success",
+    },
+};
+export const Critical: Story = {
+    args: {
+        type: "critical",
+    },
+};
+export const WithAction: Story = {
+    args: {
+        children: (
+            <p>
+                Alice's (<b>@alice:example.com</b>) identity was reset. <a href="https://example.org">Learn more</a>
+            </p>
+        ),
+        actions: (
+            <Button kind="primary" size="sm">
+                Withdraw verification
+            </Button>
+        ),
+    },
+};
+
+export const WithAvatarImage: Story = {
+    args: {
+        avatar: <img alt="Example" src="https://picsum.photos/32/32" />,
+    },
+};
+
+export const WithoutClose: Story = {
+    args: {
+        onClose: undefined,
+    },
+};
+
+export const WithLoadsOfContent: Story = {
+    args: {
+        type: "info",
+        children: (
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis massa facilisis, venenatis risus
+                consectetur, sagittis libero. Aenean et scelerisque justo. Nunc luctus, mi sed facilisis suscipit, magna
+                ante pharetra sem, eu rutrum purus quam quis arcu. Sed eleifend arcu vitae magna sodales, sit amet
+                fermentum urna dictum. Mauris vel velit pulvinar enim mollis tincidunt. Vivamus egestas rhoncus
+                sagittis. Curabitur auctor vehicula massa, et cursus lacus laoreet a. Maecenas et sollicitudin lectus,
+                in ligula.
+            </p>
+        ),
+    },
+};

packages/shared-components/src/composer/Banner/Banner.test.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2025 Element Creations 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 { render } from "jest-matrix-react";
+import { composeStories } from "@storybook/react-vite";
+
+import * as stories from "./Banner.stories.tsx";
+
+const { Default, Info, Success, WithAction, WithAvatarImage, Critical } = composeStories(stories);
+
+describe("AvatarWithDetails", () => {
+    it("renders a default banner", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a info banner", () => {
+        const { container } = render(<Info />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a success banner", () => {
+        const { container } = render(<Success />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a critical banner", () => {
+        const { container } = render(<Critical />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a banner with an action", () => {
+        const { container } = render(<WithAction />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a banner with an avatar iamge", () => {
+        const { container } = render(<WithAvatarImage />);
+        expect(container).toMatchSnapshot();
+    });
+});

packages/shared-components/src/composer/Banner/Banner.tsx

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2025 Element Creations 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 classNames from "classnames";
+import React, {
+    type MouseEventHandler,
+    type ReactElement,
+    type ReactNode,
+    type PropsWithChildren,
+    useMemo,
+} from "react";
+import { Button } from "@vector-im/compound-web";
+import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
+import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
+
+import styles from "./Banner.module.css";
+import { _t } from "../../utils/i18n";
+
+interface BannerProps {
+    /**
+     * The type of the status banner.
+     */
+    type?: "success" | "info" | "critical";
+
+    /**
+     * The banner avatar.
+     */
+    avatar?: React.ReactNode;
+
+    className?: string;
+
+    /**
+     * Actions presented to the user in the right-hand side of the banner alongside the dismiss button.
+     */
+    actions?: ReactNode;
+    /**
+     * Called when the user presses the "dismiss" button.
+     */
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+}
+
+/**
+ * A banner component used for displaying user-facing information above the message composer.
+ *
+ * @example
+ * ```tsx
+ *   <Banner  onClose={onCloseHandler} />
+ * ```
+ */
+export function Banner({
+    type,
+    children,
+    avatar,
+    className,
+    actions,
+    onClose,
+    ...props
+}: PropsWithChildren<BannerProps>): ReactElement {
+    const classes = classNames(styles.banner, className);
+
+    const icon = useMemo(() => {
+        switch (type) {
+            case "critical":
+                return <ErrorIcon fontSize={24} {...props} />;
+            case "info":
+                return <InfoIcon fontSize={24} {...props} />;
+            case "success":
+                return <CheckCircleIcon fontSize={24} {...props} />;
+            default:
+                return <InfoIcon fontSize={24} {...props} />;
+        }
+    }, [type, props]);
+
+    return (
+        <div {...props} className={classes} data-type={type}>
+            <div className={styles.icon}>{avatar ?? icon}</div>
+            <div className={styles.content}>{children}</div>
+            <div className={styles.actions}>
+                {actions}
+                {onClose && (
+                    <Button kind="secondary" size="sm" onClick={onClose}>
+                        {_t("action|dismiss")}
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}

packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap

@@ -0,0 +1,299 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`AvatarWithDetails renders a banner with an action 1`] = `
+<div>
+  <div
+    class="banner"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      class="content"
+    >
+      <p>
+        Alice's (
+        <b>
+          @alice:example.com
+        </b>
+        ) identity was reset. 
+        <a
+          href="https://example.org"
+        >
+          Learn more
+        </a>
+      </p>
+    </div>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_13vu4_8"
+        data-kind="primary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Withdraw verification
+      </button>
+      <button
+        class="_button_13vu4_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarWithDetails renders a banner with an avatar iamge 1`] = `
+<div>
+  <div
+    class="banner"
+  >
+    <div
+      class="icon"
+    >
+      <img
+        alt="Example"
+        src="https://picsum.photos/32/32"
+      />
+    </div>
+    <div
+      class="content"
+    >
+      <p>
+        Hello! This is a status banner.
+      </p>
+    </div>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_13vu4_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarWithDetails renders a critical banner 1`] = `
+<div>
+  <div
+    class="banner"
+    data-type="critical"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+        />
+      </svg>
+    </div>
+    <div
+      class="content"
+    >
+      <p>
+        Hello! This is a status banner.
+      </p>
+    </div>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_13vu4_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarWithDetails renders a default banner 1`] = `
+<div>
+  <div
+    class="banner"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      class="content"
+    >
+      <p>
+        Hello! This is a status banner.
+      </p>
+    </div>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_13vu4_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarWithDetails renders a info banner 1`] = `
+<div>
+  <div
+    class="banner"
+    data-type="info"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      class="content"
+    >
+      <p>
+        Hello! This is a status banner.
+      </p>
+    </div>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_13vu4_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarWithDetails renders a success banner 1`] = `
+<div>
+  <div
+    class="banner"
+    data-type="success"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m10.6 13.8-2.15-2.15a.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275.95.95 0 0 0-.275.7q0 .425.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65a.95.95 0 0 0 .275-.7.95.95 0 0 0-.275-.7.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
+        />
+      </svg>
+    </div>
+    <div
+      class="content"
+    >
+      <p>
+        Hello! This is a status banner.
+      </p>
+    </div>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_13vu4_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;

packages/shared-components/src/composer/Banner/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2025 Element Creations 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.
+ */
+
+export * from "./Banner";

packages/shared-components/src/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.stories.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2025 Element Creations 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 Meta, type StoryFn } from "@storybook/react-vite";
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import { useMockedViewModel } from "../../useMockedViewModel";
+import {
+    HistoryVisibleBannerView,
+    type HistoryVisibleBannerViewActions,
+    type HistoryVisibleBannerViewSnapshot,
+} from "./HistoryVisibleBannerView";
+
+type HistoryVisibleBannerProps = HistoryVisibleBannerViewSnapshot & HistoryVisibleBannerViewActions;
+
+const HistoryVisibleBannerViewWrapper = ({ onClose, ...rest }: HistoryVisibleBannerProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        onClose,
+    });
+    return <HistoryVisibleBannerView vm={vm} />;
+};
+
+export default {
+    title: "composer/HistoryVisibleBannerView",
+    component: HistoryVisibleBannerViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {
+        visible: true,
+        onClose: fn(),
+    },
+} as Meta<typeof HistoryVisibleBannerViewWrapper>;
+
+const Template: StoryFn<typeof HistoryVisibleBannerViewWrapper> = (args) => (
+    <HistoryVisibleBannerViewWrapper {...args} />
+);
+
+export const Default = Template.bind({});

packages/shared-components/src/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.test.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2025 Element Creations 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 { render } from "jest-matrix-react";
+import { composeStories } from "@storybook/react-vite";
+
+import * as stories from "./HistoryVisibleBannerView.stories.tsx";
+
+const { Default } = composeStories(stories);
+
+describe("HistoryVisibleBannerView", () => {
+    it("renders a history visible banner", () => {
+        const dismissFn = jest.fn();
+
+        const { container } = render(<Default onClose={dismissFn} />);
+        expect(container).toMatchSnapshot();
+
+        const button = container.querySelector("button");
+        expect(button).not.toBeNull();
+        button?.click();
+        expect(dismissFn).toHaveBeenCalled();
+    });
+});

packages/shared-components/src/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2025 Element Creations 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 { Link } from "@vector-im/compound-web";
+import React, { type JSX } from "react";
+
+import { useViewModel } from "../../useViewModel";
+import { _t } from "../../utils/i18n";
+import { type ViewModel } from "../../viewmodel";
+import { Banner } from "../Banner";
+
+export interface HistoryVisibleBannerViewActions {
+    /**
+     * Called when the user dismisses the banner.
+     */
+    onClose: () => void;
+}
+
+export interface HistoryVisibleBannerViewSnapshot {
+    /**
+     * Whether the banner is currently visible.
+     */
+    visible: boolean;
+}
+
+/**
+ * The view model for the banner.
+ */
+export type HistoryVisibleBannerViewModel = ViewModel<HistoryVisibleBannerViewSnapshot> &
+    HistoryVisibleBannerViewActions;
+
+interface HistoryVisibleBannerViewProps {
+    /**
+     * The view model for the banner.
+     */
+    vm: HistoryVisibleBannerViewModel;
+}
+
+/**
+ * A component to alert that history is shared to new members of the room.
+ *
+ * @example
+ * ```tsx
+ * <HistoryVisibleBannerView vm={historyVisibleBannerViewModel} />
+ * ```
+ */
+export function HistoryVisibleBannerView({ vm }: Readonly<HistoryVisibleBannerViewProps>): JSX.Element {
+    const { visible } = useViewModel(vm);
+
+    const contents = _t(
+        "room|status_bar|history_visible",
+        {},
+        {
+            a: substituteATag,
+        },
+    );
+
+    return (
+        <>
+            {visible && (
+                <Banner type="info" onClose={() => vm.onClose()}>
+                    {contents}
+                </Banner>
+            )}
+        </>
+    );
+}
+
+function substituteATag(sub: string): JSX.Element {
+    return (
+        <Link href="https://element.io/en/help#e2ee-history-sharing" target="_blank">
+            {sub}
+        </Link>
+    );
+}

packages/shared-components/src/composer/HistoryVisibleBannerView/__snapshots__/HistoryVisibleBannerView.test.tsx.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`HistoryVisibleBannerView renders a history visible banner 1`] = `
+<div>
+  <div
+    class="banner"
+    data-type="info"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      class="content"
+    >
+      <span>
+        This room has been configured so that new members can read history. 
+        <a
+          class="_link_1v5rz_8"
+          data-kind="primary"
+          data-size="medium"
+          href="https://element.io/en/help#e2ee-history-sharing"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          Learn More
+        </a>
+      </span>
+    </div>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_13vu4_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;

packages/shared-components/src/composer/HistoryVisibleBannerView/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2025 Element Creations 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.
+ */
+
+export * from "./HistoryVisibleBannerView";

packages/shared-components/src/index.ts

@@ -11,21 +11,26 @@ export * from "./audio/Clock";
 export * from "./audio/PlayPauseButton";
 export * from "./audio/SeekBar";
 export * from "./avatar/AvatarWithDetails";
+export * from "./composer/Banner";
+export * from "./composer/HistoryVisibleBannerView";
 export * from "./event-tiles/TextualEventView";
 export * from "./message-body/MediaBody";
 export * from "./pill-input/Pill";
 export * from "./pill-input/PillInput";
 export * from "./rich-list/RichItem";
 export * from "./rich-list/RichList";
+export * from "./room-list/RoomListSearchView";
 export * from "./utils/Box";
 export * from "./utils/Flex";
 
 // Utils
 export * from "./utils/i18n";
+export * from "./utils/i18nContext";
 export * from "./utils/humanize";
 export * from "./utils/DateUtils";
 export * from "./utils/numbers";
 export * from "./utils/FormattingUtils";
+export * from "./utils/I18nApi";
 
 // MVVM
 export * from "./viewmodel";

packages/shared-components/src/pill-input/Pill/Pill.tsx

@@ -12,7 +12,7 @@ import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"
 
 import { Flex } from "../../utils/Flex";
 import styles from "./Pill.module.css";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";
 
 export interface PillProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
     /**
@@ -39,6 +39,7 @@ export interface PillProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick
  */
 export function Pill({ className, children, label, onClick, ...props }: PropsWithChildren<PillProps>): JSX.Element {
     const id = useId();
+    const { translate: _t } = useI18n();
 
     return (
         <Flex

packages/shared-components/src/pill-input/Pill/__snapshots__/Pill.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`Pill renders the pill 1`] = `
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg

packages/shared-components/src/rich-list/RichItem/RichItem.stories.tsx

@@ -8,8 +8,8 @@
 import React from "react";
 import { fn } from "storybook/test";
 
-import { RichItem } from "./RichItem";
 import type { Meta, StoryFn } from "@storybook/react-vite";
+import { RichItem } from "./RichItem";
 
 const currentTimestamp = new Date("2025-03-09T12:00:00Z").getTime();
 

packages/shared-components/src/rich-list/RichItem/RichItem.tsx

@@ -9,8 +9,8 @@ import React, { type HTMLAttributes, type JSX, memo } from "react";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 
 import styles from "./RichItem.module.css";
-import { humanizeTime } from "../../utils/humanize";
 import { Flex } from "../../utils/Flex";
+import { useI18n } from "../../utils/i18nContext";
 
 export interface RichItemProps extends HTMLAttributes<HTMLLIElement> {
     /**
@@ -63,6 +63,8 @@ export const RichItem = memo(function RichItem({
     selected,
     ...props
 }: RichItemProps): JSX.Element {
+    const i18n = useI18n();
+
     return (
         <li
             className={styles.richItem}
@@ -77,7 +79,7 @@ export const RichItem = memo(function RichItem({
             <span className={styles.description}>{description}</span>
             {timestamp && (
                 <span role="timer" className={styles.timestamp}>
-                    {humanizeTime(timestamp)}
+                    {i18n.humanizeTime(timestamp)}
                 </span>
             )}
         </li>

packages/shared-components/src/room-list/RoomListSearchView/RoomListSearchView.module.css

@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+.view {
+    /* From figma, this should be aligned with the room header */
+    min-height: 64px;
+    box-sizing: border-box;
+    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary);
+    padding: 0 var(--cpd-space-3x);
+}
+
+.search {
+    /* The search button should take all the remaining space */
+    flex: 1;
+    /* !important is needed to override compound button in EW */
+    font: var(--cpd-font-body-md-regular) !important;
+    color: var(--cpd-color-text-secondary) !important;
+    min-width: 0;
+
+    svg {
+        fill: var(--cpd-color-icon-secondary);
+    }
+}
+
+.search_container {
+    flex: 1;
+
+    /* Shrink and truncate the search text */
+    white-space: nowrap;
+    overflow: hidden;
+
+    kbd {
+        font-family: inherit;
+    }
+}
+
+.search_text {
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: start;
+}

packages/shared-components/src/room-list/RoomListSearchView/RoomListSearchView.stories.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import {
+    RoomListSearchView,
+    type RoomListSearchViewActions,
+    type RoomListSearchViewSnapshot,
+} from "./RoomListSearchView";
+import { useMockedViewModel } from "../../useMockedViewModel";
+
+type RoomListSearchProps = RoomListSearchViewSnapshot & RoomListSearchViewActions;
+
+const RoomListSearchViewWrapper = ({
+    onSearchClick,
+    onDialPadClick,
+    onExploreClick,
+    ...rest
+}: RoomListSearchProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        onSearchClick,
+        onDialPadClick,
+        onExploreClick,
+    });
+    return <RoomListSearchView vm={vm} />;
+};
+
+export default {
+    title: "Room List/RoomListSearchView",
+    component: RoomListSearchViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        displayExploreButton: true,
+        displayDialButton: false,
+        searchShortcut: "⌘ K",
+        onSearchClick: fn(),
+        onDialPadClick: fn(),
+        onExploreClick: fn(),
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/vlmt46QDdE4dgXDiyBJXqp/ER-33-Left-Panel-2025?node-id=98-1979&t=vafb4zoYMNLRuAbh-4",
+        },
+    },
+} as Meta<typeof RoomListSearchViewWrapper>;
+
+const Template: StoryFn<typeof RoomListSearchViewWrapper> = (args) => <RoomListSearchViewWrapper {...args} />;
+
+export const Default = Template.bind({});
+
+export const WithDialPad = Template.bind({});
+WithDialPad.args = {
+    displayDialButton: true,
+};
+
+export const WithoutExplore = Template.bind({});
+WithoutExplore.args = {
+    displayExploreButton: false,
+};
+
+export const AllButtons = Template.bind({});
+AllButtons.args = {
+    displayExploreButton: true,
+    displayDialButton: true,
+    searchShortcut: "⌘ K",
+};

packages/shared-components/src/room-list/RoomListSearchView/RoomListSearchView.test.tsx

@@ -0,0 +1,103 @@
+/*
+ * 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 { render, screen } from "jest-matrix-react";
+import { composeStories } from "@storybook/react-vite";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+
+import * as stories from "./RoomListSearchView.stories";
+import {
+    RoomListSearchView,
+    type RoomListSearchViewActions,
+    type RoomListSearchViewSnapshot,
+} from "./RoomListSearchView";
+import { MockViewModel } from "../../viewmodel/MockViewModel";
+
+const { Default, WithDialPad, WithoutExplore, AllButtons } = composeStories(stories);
+
+describe("RoomListSearchView", () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe("Storybook snapshots", () => {
+        it("renders the default state", () => {
+            const { container } = render(<Default />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("renders with dial pad button", () => {
+            const { container } = render(<WithDialPad />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("renders without explore button", () => {
+            const { container } = render(<WithoutExplore />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("renders with all buttons visible", () => {
+            const { container } = render(<AllButtons />);
+            expect(container).toMatchSnapshot();
+        });
+    });
+
+    describe("User interactions", () => {
+        const onSearchClick = jest.fn();
+        const onDialPadClick = jest.fn();
+        const onExploreClick = jest.fn();
+
+        class TestViewModel extends MockViewModel<RoomListSearchViewSnapshot> implements RoomListSearchViewActions {
+            public onSearchClick = onSearchClick;
+            public onDialPadClick = onDialPadClick;
+            public onExploreClick = onExploreClick;
+        }
+
+        it("should call onSearchClick when search button is clicked", async () => {
+            const user = userEvent.setup();
+            const vm = new TestViewModel({
+                displayExploreButton: false,
+                displayDialButton: false,
+                searchShortcut: "⌘ K",
+            });
+
+            render(<RoomListSearchView vm={vm} />);
+
+            await user.click(screen.getByRole("button", { name: "Search ⌘ K" }));
+            expect(onSearchClick).toHaveBeenCalledTimes(1);
+        });
+
+        it("should call onDialPadClick when dial pad button is clicked", async () => {
+            const user = userEvent.setup();
+            const vm = new TestViewModel({
+                displayExploreButton: false,
+                displayDialButton: true,
+                searchShortcut: "⌘ K",
+            });
+
+            render(<RoomListSearchView vm={vm} />);
+
+            await user.click(screen.getByRole("button", { name: "Open dial pad" }));
+            expect(onDialPadClick).toHaveBeenCalledTimes(1);
+        });
+
+        it("should call onExploreClick when explore button is clicked", async () => {
+            const user = userEvent.setup();
+            const vm = new TestViewModel({
+                displayExploreButton: true,
+                displayDialButton: false,
+                searchShortcut: "⌘ K",
+            });
+
+            render(<RoomListSearchView vm={vm} />);
+
+            await user.click(screen.getByRole("button", { name: "Explore rooms" }));
+            expect(onExploreClick).toHaveBeenCalledTimes(1);
+        });
+    });
+});

packages/shared-components/src/room-list/RoomListSearchView/RoomListSearchView.tsx

@@ -0,0 +1,119 @@
+/*
+ * 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, { type JSX, type MouseEventHandler } from "react";
+import { Button } from "@vector-im/compound-web";
+import ExploreIcon from "@vector-im/compound-design-tokens/assets/web/icons/explore";
+import SearchIcon from "@vector-im/compound-design-tokens/assets/web/icons/search";
+import DialPadIcon from "@vector-im/compound-design-tokens/assets/web/icons/dial-pad";
+
+import styles from "./RoomListSearchView.module.css";
+import { type ViewModel } from "../../viewmodel/ViewModel";
+import { useViewModel } from "../../useViewModel";
+import { Flex } from "../../utils/Flex";
+import { useI18n } from "../../utils/i18nContext";
+
+export interface RoomListSearchViewSnapshot {
+    /**
+     * Whether to display the explore button.
+     */
+    displayExploreButton: boolean;
+    /**
+     * Whether to display the dial pad button.
+     */
+    displayDialButton: boolean;
+    /**
+     * The keyboard shortcut text to display for the search action.
+     * For example: "⌘ K" on macOS or "Ctrl K" on other platforms.
+     */
+    searchShortcut: string;
+}
+
+export interface RoomListSearchViewActions {
+    /**
+     * Handles the click event on the search button.
+     */
+    onSearchClick: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Handles the click event on the dial pad button.
+     */
+    onDialPadClick: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Handles the click event on the explore button.
+     */
+    onExploreClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+/**
+ * The view model for the room list search component.
+ */
+export type RoomListSearchViewModel = ViewModel<RoomListSearchViewSnapshot> & RoomListSearchViewActions;
+
+interface RoomListSearchViewProps {
+    /**
+     * The view model for the room list search component.
+     */
+    vm: RoomListSearchViewModel;
+}
+
+/**
+ * A search component to be displayed at the top of the room list.
+ * The component provides search functionality, optional dial pad access, and optional room exploration.
+ *
+ * @example
+ * ```tsx
+ * <RoomListSearchView vm={roomListSearchViewModel} />
+ * ```
+ */
+export function RoomListSearchView({ vm }: Readonly<RoomListSearchViewProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+    const { displayExploreButton, displayDialButton, searchShortcut } = useViewModel(vm);
+
+    return (
+        <Flex
+            data-testid="room-list-search"
+            className={styles.view}
+            role="search"
+            gap="var(--cpd-space-2x)"
+            align="center"
+        >
+            <Button
+                id="room-list-search-button"
+                className={styles.search}
+                kind="secondary"
+                size="sm"
+                Icon={SearchIcon}
+                onClick={vm.onSearchClick}
+            >
+                <Flex className={styles["search_container"]} as="span" justify="space-between">
+                    <span className={styles["search_text"]}>{_t("action|search")}</span>
+                    <kbd>{searchShortcut}</kbd>
+                </Flex>
+            </Button>
+            {displayDialButton && (
+                <Button
+                    kind="secondary"
+                    size="sm"
+                    Icon={DialPadIcon}
+                    iconOnly={true}
+                    aria-label={_t("left_panel|open_dial_pad")}
+                    onClick={vm.onDialPadClick}
+                />
+            )}
+            {displayExploreButton && (
+                <Button
+                    kind="secondary"
+                    size="sm"
+                    Icon={ExploreIcon}
+                    iconOnly={true}
+                    aria-label={_t("action|explore_rooms")}
+                    onClick={vm.onExploreClick}
+                />
+            )}
+        </Flex>
+    );
+}

packages/shared-components/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap

@@ -0,0 +1,290 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`RoomListSearchView Storybook snapshots renders the default state 1`] = `
+<div>
+  <div
+    class="flex view"
+    data-testid="room-list-search"
+    role="search"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <button
+      class="_button_13vu4_8 search _has-icon_13vu4_60"
+      data-kind="secondary"
+      data-size="sm"
+      id="room-list-search-button"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
+        />
+      </svg>
+      <span
+        class="flex search_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="search_text"
+        >
+          Search
+        </span>
+        <kbd>
+          ⌘ K
+        </kbd>
+      </span>
+    </button>
+    <button
+      aria-label="Explore rooms"
+      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+      data-kind="secondary"
+      data-size="sm"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 13a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 12q0-.424.287-.713A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 12 13m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20m0 0q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4t5.675 2.325T20 12t-2.325 5.675T12 20m1.675-5.85q.15-.075.275-.2t.2-.275l2.925-6.25q.125-.25-.062-.437-.188-.188-.438-.063l-6.25 2.925q-.15.075-.275.2t-.2.275l-2.925 6.25q-.125.25.063.438.186.186.437.062z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`RoomListSearchView Storybook snapshots renders with all buttons visible 1`] = `
+<div>
+  <div
+    class="flex view"
+    data-testid="room-list-search"
+    role="search"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <button
+      class="_button_13vu4_8 search _has-icon_13vu4_60"
+      data-kind="secondary"
+      data-size="sm"
+      id="room-list-search-button"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
+        />
+      </svg>
+      <span
+        class="flex search_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="search_text"
+        >
+          Search
+        </span>
+        <kbd>
+          ⌘ K
+        </kbd>
+      </span>
+    </button>
+    <button
+      aria-label="Open dial pad"
+      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+      data-kind="secondary"
+      data-size="sm"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 18.6c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8M6.6 2.4c-.99 0-1.8.81-1.8 1.8S5.61 6 6.6 6s1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m0 5.4c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m0 5.4c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8M17.4 6c.99 0 1.8-.81 1.8-1.8s-.81-1.8-1.8-1.8-1.8.81-1.8 1.8.81 1.8 1.8 1.8M12 13.2c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m5.4 0c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m0-5.4c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m-5.4 0c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m0-5.4c-.99 0-1.8.81-1.8 1.8S11.01 6 12 6s1.8-.81 1.8-1.8-.81-1.8-1.8-1.8"
+        />
+      </svg>
+    </button>
+    <button
+      aria-label="Explore rooms"
+      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+      data-kind="secondary"
+      data-size="sm"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 13a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 12q0-.424.287-.713A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 12 13m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20m0 0q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4t5.675 2.325T20 12t-2.325 5.675T12 20m1.675-5.85q.15-.075.275-.2t.2-.275l2.925-6.25q.125-.25-.062-.437-.188-.188-.438-.063l-6.25 2.925q-.15.075-.275.2t-.2.275l-2.925 6.25q-.125.25.063.438.186.186.437.062z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`RoomListSearchView Storybook snapshots renders with dial pad button 1`] = `
+<div>
+  <div
+    class="flex view"
+    data-testid="room-list-search"
+    role="search"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <button
+      class="_button_13vu4_8 search _has-icon_13vu4_60"
+      data-kind="secondary"
+      data-size="sm"
+      id="room-list-search-button"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
+        />
+      </svg>
+      <span
+        class="flex search_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="search_text"
+        >
+          Search
+        </span>
+        <kbd>
+          ⌘ K
+        </kbd>
+      </span>
+    </button>
+    <button
+      aria-label="Open dial pad"
+      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+      data-kind="secondary"
+      data-size="sm"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 18.6c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8M6.6 2.4c-.99 0-1.8.81-1.8 1.8S5.61 6 6.6 6s1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m0 5.4c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m0 5.4c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8M17.4 6c.99 0 1.8-.81 1.8-1.8s-.81-1.8-1.8-1.8-1.8.81-1.8 1.8.81 1.8 1.8 1.8M12 13.2c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m5.4 0c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m0-5.4c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m-5.4 0c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8m0-5.4c-.99 0-1.8.81-1.8 1.8S11.01 6 12 6s1.8-.81 1.8-1.8-.81-1.8-1.8-1.8"
+        />
+      </svg>
+    </button>
+    <button
+      aria-label="Explore rooms"
+      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+      data-kind="secondary"
+      data-size="sm"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 13a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 12q0-.424.287-.713A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 12 13m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20m0 0q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4t5.675 2.325T20 12t-2.325 5.675T12 20m1.675-5.85q.15-.075.275-.2t.2-.275l2.925-6.25q.125-.25-.062-.437-.188-.188-.438-.063l-6.25 2.925q-.15.075-.275.2t-.2.275l-2.925 6.25q-.125.25.063.438.186.186.437.062z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`RoomListSearchView Storybook snapshots renders without explore button 1`] = `
+<div>
+  <div
+    class="flex view"
+    data-testid="room-list-search"
+    role="search"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <button
+      class="_button_13vu4_8 search _has-icon_13vu4_60"
+      data-kind="secondary"
+      data-size="sm"
+      id="room-list-search-button"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
+        />
+      </svg>
+      <span
+        class="flex search_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="search_text"
+        >
+          Search
+        </span>
+        <kbd>
+          ⌘ K
+        </kbd>
+      </span>
+    </button>
+  </div>
+</div>
+`;

packages/shared-components/src/room-list/RoomListSearchView/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export type { RoomListSearchViewModel, RoomListSearchViewSnapshot } from "./RoomListSearchView";
+export { RoomListSearchView } from "./RoomListSearchView";

packages/shared-components/src/test/utils/jest-matrix-react.tsx

@@ -16,16 +16,24 @@ import React, { type ReactElement } from "react";
 import { render, type RenderOptions } from "@testing-library/react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
+import { I18nApi, I18nContext } from "../..";
+
 const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"]) => {
     return ({ children }: { children: React.ReactNode }) => {
         if (Wrapper) {
             return (
-                <Wrapper>
-                    <TooltipProvider>{children}</TooltipProvider>
-                </Wrapper>
+                <I18nContext.Provider value={new I18nApi()}>
+                    <Wrapper>
+                        <TooltipProvider>{children}</TooltipProvider>
+                    </Wrapper>
+                </I18nContext.Provider>
             );
         } else {
-            return <TooltipProvider>{children}</TooltipProvider>;
+            return (
+                <I18nContext.Provider value={new I18nApi()}>
+                    <TooltipProvider>{children}</TooltipProvider>
+                </I18nContext.Provider>
+            );
         }
     };
 };

packages/shared-components/src/utils/I18nApi.test.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 Element Creations 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 TranslationKey } from "../i18nKeys";
+import { I18nApi } from "./I18nApi";
+
+describe("I18nApi", () => {
+    it("can register a translation and use it", () => {
+        const i18n = new I18nApi();
+        i18n.register({
+            "hello.world": {
+                en: "Hello, World!",
+            },
+        });
+
+        expect(i18n.translate("hello.world" as TranslationKey)).toBe("Hello, World!");
+    });
+});

packages/shared-components/src/utils/I18nApi.ts

@@ -6,16 +6,17 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type I18nApi as II18nApi, type Variables, type Translations } from "@element-hq/element-web-module-api";
-import { registerTranslations } from "@element-hq/web-shared-components";
 
-import { _t, getCurrentLanguage, type TranslationKey } from "../languageHandler.tsx";
+import { humanizeTime } from "./humanize";
+import { _t, getLocale, registerTranslations } from "./i18n";
+import { type TranslationKey } from "../i18nKeys";
 
 export class I18nApi implements II18nApi {
     /**
      * Read the current language of the user in IETF Language Tag format
      */
     public get language(): string {
-        return getCurrentLanguage();
+        return getLocale();
     }
 
     /**
@@ -44,4 +45,8 @@ export class I18nApi implements II18nApi {
     public translate(key: TranslationKey, variables?: Variables): string {
         return _t(key, variables);
     }
+
+    public humanizeTime(timeMillis: number): string {
+        return humanizeTime(timeMillis, this);
+    }
 }

packages/shared-components/src/utils/humanize.ts

@@ -6,7 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { _t } from "./i18n";
+import { type I18nApi } from "@element-hq/element-web-module-api";
+
+import { _t as _tFromModule } from "./i18n";
 
 // These are the constants we use for when to break the text
 const MILLISECONDS_RECENT = 15000;
@@ -21,13 +23,15 @@ const HOURS_1_DAY = 26;
  * @param {number} timeMillis The time in millis to compare against.
  * @returns {string} The humanized time.
  */
-export function humanizeTime(timeMillis: number): string {
+export function humanizeTime(timeMillis: number, i18nApi?: I18nApi): string {
     const now = Date.now();
     let msAgo = now - timeMillis;
     const minutes = Math.abs(Math.ceil(msAgo / 60000));
     const hours = Math.ceil(minutes / 60);
     const days = Math.ceil(hours / 24);
 
+    const _t = i18nApi?.translate ?? _tFromModule;
+
     if (msAgo >= 0) {
         // Past
         if (msAgo <= MILLISECONDS_RECENT) return _t("time|few_seconds_ago");

packages/shared-components/src/utils/i18nContext.ts

@@ -0,0 +1,27 @@
+/*
+Copyright 2025 Element Creations 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 { createContext, useContext } from "react";
+import { type I18nApi } from "@element-hq/element-web-module-api";
+
+export const I18nContext = createContext<I18nApi | null>(null);
+I18nContext.displayName = "I18nContext";
+
+/**
+ * A hook to get the i18n API from the context. Will throw if no i18n context is found.
+ * @throws If no i18n context is found
+ * @returns The i18n API from the context
+ */
+export function useI18n(): I18nApi {
+    const i18n = useContext(I18nContext);
+
+    if (!i18n) {
+        throw new Error("useI18n must be used within an I18nContext.Provider");
+    }
+
+    return i18n;
+}

packages/shared-components/src/viewmodel/index.ts

@@ -11,3 +11,4 @@ export * from "./Snapshot";
 export * from "./ViewModelSubscriptions";
 export type * from "./ViewModel";
 export * from "./MockViewModel";
+export * from "./useCreateAutoDisposedViewModel";

packages/shared-components/src/viewmodel/tests/useCreateAutoDisposedViewModel.test.ts

@@ -0,0 +1,47 @@
+/*
+Copyright 2025 Element Creations 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 { renderHook } from "jest-matrix-react";
+
+import { BaseViewModel } from "../BaseViewModel";
+import { useCreateAutoDisposedViewModel } from "../useCreateAutoDisposedViewModel";
+
+class TestViewModel extends BaseViewModel<{ count: number }, { initial: number }> {
+    public constructor(props: { initial: number }) {
+        super(props, { count: props.initial });
+    }
+
+    public increment(): void {
+        const newCount = this.getSnapshot().count + 1;
+        this.snapshot.set({ count: newCount });
+    }
+}
+
+describe("useAutoDisposedViewModel", () => {
+    it("should return view-model", () => {
+        const vmCreator = (): TestViewModel => new TestViewModel({ initial: 0 });
+        const { result } = renderHook(() => useCreateAutoDisposedViewModel(vmCreator));
+        const vm = result.current;
+        expect(vm).toBeInstanceOf(TestViewModel);
+        expect(vm.isDisposed).toStrictEqual(false);
+    });
+
+    it("should dispose view-model on unmount", () => {
+        const vmCreator = (): TestViewModel => new TestViewModel({ initial: 0 });
+        const { result, unmount } = renderHook(() => useCreateAutoDisposedViewModel(vmCreator));
+        const vm = result.current;
+        vm.increment();
+        unmount();
+        expect(vm.isDisposed).toStrictEqual(true);
+    });
+
+    it("should recreate view-model on react strict mode", async () => {
+        const vmCreator = (): TestViewModel => new TestViewModel({ initial: 0 });
+        const output = renderHook(() => useCreateAutoDisposedViewModel(vmCreator), { reactStrictMode: true });
+        const vm = output.result.current;
+        expect(vm.isDisposed).toStrictEqual(false);
+    });
+});

packages/shared-components/src/viewmodel/useCreateAutoDisposedViewModel.ts

@@ -0,0 +1,68 @@
+/*
+Copyright 2025 Element Creations 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 { useEffect, useState } from "react";
+
+import type { BaseViewModel } from "./BaseViewModel";
+
+type VmCreator<B extends BaseViewModel<unknown, unknown>> = () => B;
+
+/**
+ * Instantiate a view-model that gets disposed when the calling react component unmounts.
+ * In other words, this hook ties the lifecycle of a view-model to the lifecycle of a
+ * react component.
+ *
+ * @param vmCreator A function that returns a view-model instance
+ * @returns view-model instance from vmCreator
+ * @example
+ * const vm = useCreateAutoDisposedViewModel(() => new FooViewModel({prop1, prop2, ...});
+ */
+export function useCreateAutoDisposedViewModel<B extends BaseViewModel<unknown, unknown>>(vmCreator: VmCreator<B>): B {
+    /**
+     * The view-model instance may be replaced by a different instance in some scenarios.
+     * We want to be sure that whichever react component called this hook gets re-rendered
+     * when this happens, hence the state.
+     */
+    const [viewModel, setViewModel] = useState<B>(vmCreator);
+
+    /**
+     * Our intention here is to ensure that the dispose method of the view-model gets called
+     * when the component that uses this hook unmounts.
+     * We can do that by combining a useEffect cleanup with an empty dependency array.
+     */
+    useEffect(() => {
+        let toDispose = viewModel;
+
+        /**
+         * Because we use react strict mode, react will run our effects twice in dev mode to make
+         * sure that they are pure.
+         * This presents a complication - the vm instance that we created in our state initializer
+         * will get disposed on the first cleanup.
+         * So we'll recreate the view-model if it's already disposed.
+         */
+        if (viewModel.isDisposed) {
+            const newViewModel = vmCreator();
+            // Change toDispose so that we don't end up disposing the already disposed vm.
+            toDispose = newViewModel;
+            setViewModel(newViewModel);
+        }
+        return () => {
+            // Dispose the view-model when this component unmounts
+            toDispose.dispose();
+        };
+
+        /**
+         * We explicitly provide an empty dependency array as we don't expect the viewModel/viewCreator to
+         * change.
+         * Or to put it in another way, the only reason to use this hook is to create/dispose the view-model
+         * and that is something that should only happen at the start/end of the lifecycle of this component.
+         */
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return viewModel;
+}

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

@@ -29,7 +29,7 @@ test.describe("Landmark navigation tests", () => {
 
         // Pressing Control+F6 again will focus room search
         await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator("#room-list-search-button")).toBeFocused();
 
         // Pressing Control+F6 again will focus the message composer
         await page.keyboard.press("ControlOrMeta+F6");
@@ -44,7 +44,7 @@ test.describe("Landmark navigation tests", () => {
         await expect(page.locator(".mx_HomePage")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator("#room-list-search-button")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
         await expect(page.locator(".mx_SpaceButton_active")).toBeFocused();
@@ -75,7 +75,7 @@ test.describe("Landmark navigation tests", () => {
 
         // Pressing Control+F6 again will focus room search
         await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator("#room-list-search-button")).toBeFocused();
 
         // Pressing Control+F6 again will focus the room tile in the room list
         await page.keyboard.press("ControlOrMeta+F6");
@@ -97,7 +97,7 @@ test.describe("Landmark navigation tests", () => {
         await expect(page.locator(".mx_RoomListItemView_selected")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator("#room-list-search-button")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
         await expect(page.locator(".mx_SpaceButton_active")).toBeFocused();
@@ -131,7 +131,7 @@ test.describe("Landmark navigation tests", () => {
 
         // Pressing Control+F6 again will focus room search
         await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator("#room-list-search-button")).toBeFocused();
 
         // Pressing Control+F6 again will focus the room tile in the room list
         await page.keyboard.press("ControlOrMeta+F6");
@@ -153,7 +153,7 @@ test.describe("Landmark navigation tests", () => {
         await expect(page.locator(".mx_RoomListItemView")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();
+        await expect(page.locator("#room-list-search-button")).toBeFocused();
 
         await page.keyboard.press("ControlOrMeta+Shift+F6");
         await expect(page.locator(".mx_SpaceButton_active")).toBeFocused();

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

@@ -351,7 +351,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         const composer = thread.locator(".mx_MessageComposer--compact");
         // Assert that the reply preview contains audio ReplyTile the file info button
         await expect(
-            composer.locator(".mx_ReplyPreview .mx_ReplyTile_audio .mx_MFileBody_info[role='button']"),
+            composer.locator(".mx_ReplyPreview .mx_ReplyTile .mx_MFileBody_info[role='button']"),
         ).toBeVisible();
 
         // Select :smile: emoji and send it
@@ -360,6 +360,6 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await composer.getByTestId("basicmessagecomposer").press("Enter");
 
         // Assert that the file name is rendered on the file button
-        await expect(threadTile.locator(".mx_ReplyTile_audio .mx_MFileBody_info[role='button']")).toBeVisible();
+        await expect(threadTile.locator(".mx_ReplyTile .mx_MFileBody_info[role='button']")).toBeVisible();
     });
 });

playwright/e2e/composer/CIDER.spec.ts

@@ -168,5 +168,19 @@ test.describe("Composer", () => {
             await composer.press("Enter");
             await expect(page.locator(".mx_EventTile_body", { hasText: "Bob" })).toBeVisible();
         });
+
+        test("renders emoji autocomplete", { tag: "@screenshot" }, async ({ page }) => {
+            const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+
+            // Type ":+1" to trigger emoji autocomplete
+            await composer.pressSequentially(":+1");
+
+            // Wait for autocomplete to appear
+            const autocomplete = page.locator("#mx_Autocomplete");
+            await expect(autocomplete).toBeVisible();
+
+            // Take a screenshot of the autocomplete
+            await expect(autocomplete).toMatchScreenshot("emoji-autocomplete.png");
+        });
     });
 });

playwright/e2e/crypto/crypto.spec.ts

@@ -31,15 +31,11 @@ const startDMWithBob = async (page: Page, bob: Bot) => {
 
 const testMessages = async (page: Page, bob: Bot, bobRoomId: string) => {
     // check the invite message
-    await expect(
-        page.locator(".mx_EventTile", { hasText: "Hey!" }).locator(".mx_EventTile_e2eIcon_warning"),
-    ).not.toBeVisible();
+    await expect(page.locator(".mx_EventTile", { hasText: "Hey!" }).locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
 
     // Bob sends a response
     await bob.sendMessage(bobRoomId, "Hoo!");
-    await expect(
-        page.locator(".mx_EventTile", { hasText: "Hoo!" }).locator(".mx_EventTile_e2eIcon_warning"),
-    ).not.toBeVisible();
+    await expect(page.locator(".mx_EventTile", { hasText: "Hoo!" }).locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
 };
 
 const bobJoin = async (page: Page, bob: Bot) => {

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

@@ -30,69 +30,80 @@ test.describe("Cryptography", function () {
     test.describe("decryption failure messages", () => {
         test.skip(isDendrite, "Dendrite lacks support for MSC3967 so requires additional auth here");
 
-        test("should handle device-relative historical messages", async ({
-            homeserver,
-            page,
-            app,
-            credentials,
-            user,
-        }) => {
-            test.setTimeout(60000);
+        test(
+            "should handle device-relative historical messages",
+            { tag: "@screenshot" },
+            async ({ homeserver, page, app, credentials, user }) => {
+                test.setTimeout(60000);
 
-            // Start with a logged-in session, without key backup, and send a message.
-            await createRoom(page, "Test room", true);
-            await sendMessageInCurrentRoom(page, "test test");
+                // Start with a logged-in session, without key backup, and send a message.
+                await createRoom(page, "Test room", true);
+                await sendMessageInCurrentRoom(page, "test test");
 
-            // Log out, discarding the key for the sent message.
-            await logOutOfElement(page, true);
+                // Log out, discarding the key for the sent message.
+                await logOutOfElement(page, true);
 
-            // Log in again, and see how the message looks.
-            await logIntoElement(page, credentials);
-            await app.viewRoomByName("Test room");
-            const lastTile = page.locator(".mx_EventTile").last();
-            await expect(lastTile).toContainText("Historical messages are not available on this device");
-            await expect(lastTile.locator(".mx_EventTile_e2eIcon_decryption_failure")).toBeVisible();
+                // Log in again, and see how the message looks.
+                await logIntoElement(page, credentials);
+                await app.viewRoomByName("Test room");
+                const lastTile = page.locator(".mx_EventTile").last();
+                await expect(lastTile).toContainText("Historical messages are not available on this device");
+                await expect(lastTile.locator(".mx_EventTile_e2eIcon")).toHaveAccessibleName(
+                    "This message could not be decrypted",
+                );
+                await expect(lastTile).toMatchScreenshot("history-not-available.png", {
+                    mask: [page.locator(".mx_MessageTimestamp")],
+                });
 
-            // Now, we set up key backup, and then send another message.
-            const secretStorageKey = await enableKeyBackup(app);
-            await app.viewRoomByName("Test room");
-            await sendMessageInCurrentRoom(page, "test2 test2");
+                // Now, we set up key backup, and then send another message.
+                const secretStorageKey = await enableKeyBackup(app);
+                await app.viewRoomByName("Test room");
+                await sendMessageInCurrentRoom(page, "test2 test2");
 
-            // Workaround for https://github.com/element-hq/element-web/issues/27267. It can take up to 10 seconds for
-            // the key to be backed up.
-            await page.waitForTimeout(10000);
+                // Workaround for https://github.com/element-hq/element-web/issues/27267. It can take up to 10 seconds for
+                // the key to be backed up.
+                await page.waitForTimeout(10000);
 
-            // Finally, log out again, and back in, skipping verification for now, and see what we see.
-            await logOutOfElement(page);
-            await logIntoElement(page, credentials);
-            await page.locator(".mx_AuthPage").getByRole("button", { name: "Skip verification for now" }).click();
-            await page.locator(".mx_AuthPage").getByRole("button", { name: "I'll verify later" }).click();
-            await app.viewRoomByName("Test room");
+                // Finally, log out again, and back in, skipping verification for now, and see what we see.
+                await logOutOfElement(page);
+                await logIntoElement(page, credentials);
+                await page.locator(".mx_AuthPage").getByRole("button", { name: "Skip verification for now" }).click();
+                await page.locator(".mx_AuthPage").getByRole("button", { name: "I'll verify later" }).click();
+                await app.viewRoomByName("Test room");
 
-            // In this case, the call to cryptoApi.isEncryptionEnabledInRoom is taking a long time to resolve
-            await page.waitForTimeout(1000);
+                // In this case, the call to cryptoApi.isEncryptionEnabledInRoom is taking a long time to resolve
+                await page.waitForTimeout(1000);
 
-            // There should be two historical events in the timeline
-            const tiles = await page.locator(".mx_EventTile").all();
-            expect(tiles.length).toBeGreaterThanOrEqual(2);
-            // look at the last two tiles only
-            for (const tile of tiles.slice(-2)) {
-                await expect(tile).toContainText("You need to verify this device for access to historical messages");
-                await expect(tile.locator(".mx_EventTile_e2eIcon_decryption_failure")).toBeVisible();
-            }
+                // There should be two historical events in the timeline
+                const tiles = await page.locator(".mx_EventTile").all();
+                expect(tiles.length).toBeGreaterThanOrEqual(2);
+                // look at the last two tiles only
+                for (const tile of tiles.slice(-2)) {
+                    await expect(tile).toContainText(
+                        "You need to verify this device for access to historical messages",
+                    );
+                    await expect(tile.locator(".mx_EventTile_e2eIcon")).toHaveAccessibleName(
+                        "This message could not be decrypted",
+                    );
+                }
 
-            // Now verify our device (setting up key backup), and check what happens
-            await verifySession(app, secretStorageKey);
-            const tilesAfterVerify = (await page.locator(".mx_EventTile").all()).slice(-2);
+                // Now verify our device (setting up key backup), and check what happens
+                await verifySession(app, secretStorageKey);
+                const tilesAfterVerify = (await page.locator(".mx_EventTile").all()).slice(-2);
 
-            // The first message still cannot be decrypted, because it was never backed up. It's now a regular UTD though.
-            await expect(tilesAfterVerify[0]).toContainText("Unable to decrypt message");
-            await expect(tilesAfterVerify[0].locator(".mx_EventTile_e2eIcon_decryption_failure")).toBeVisible();
+                // The first message still cannot be decrypted, because it was never backed up. It's now a regular UTD though.
+                await expect(tilesAfterVerify[0]).toContainText("Unable to decrypt message");
+                await expect(tilesAfterVerify[0].locator(".mx_EventTile_e2eIcon")).toHaveAccessibleName(
+                    "This message could not be decrypted",
+                );
 
-            // The second message should now be decrypted, with a grey shield
-            await expect(tilesAfterVerify[1]).toContainText("test2 test2");
-            await expect(tilesAfterVerify[1].locator(".mx_EventTile_e2eIcon_normal")).toBeVisible();
-        });
+                // The second message should now be decrypted, with a grey shield
+                await expect(tilesAfterVerify[1]).toContainText("test2 test2");
+                await expect(tilesAfterVerify[1].locator(".mx_EventTile_e2eIcon")).toHaveAccessibleName(
+                    "The authenticity of this encrypted message can't be guaranteed on this device.",
+                );
+            },
+        );
 
         test.describe("non-joined historical messages", () => {
             test.skip(isDendrite, "does not yet support membership on events");
@@ -186,7 +197,9 @@ test.describe("Cryptography", function () {
                 // The first message from Bob was sent before Alice was in the room, so should
                 // be different from the standard UTD message
                 await expect(tiles[tiles.length - 5]).toContainText("You don't have access to this message");
-                await expect(tiles[tiles.length - 5].locator(".mx_EventTile_e2eIcon_decryption_failure")).toBeVisible();
+                await expect(tiles[tiles.length - 5].locator(".mx_EventTile_e2eIcon")).toHaveAccessibleName(
+                    "This message could not be decrypted",
+                );
 
                 // The second message from Bob should be decryptable
                 await expect(tiles[tiles.length - 2]).toContainText("This should be decryptable");
@@ -196,7 +209,9 @@ test.describe("Cryptography", function () {
                 // in the room and is expected to be decryptable, so this should have the
                 // standard UTD message
                 await expect(tiles[tiles.length - 1]).toContainText("Unable to decrypt message");
-                await expect(tiles[tiles.length - 1].locator(".mx_EventTile_e2eIcon_decryption_failure")).toBeVisible();
+                await expect(tiles[tiles.length - 1].locator(".mx_EventTile_e2eIcon")).toHaveAccessibleName(
+                    "This message could not be decrypted",
+                );
             });
 
             test("should be able to jump to a message sent before our last join event", async ({

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

@@ -68,7 +68,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
             await doTwoWaySasVerification(page, verifier);
 
             await infoDialog.getByRole("button", { name: "They match" }).click();
-            await expect(page.locator(".mx_E2EIcon_verified")).toMatchScreenshot("device-verified-e2eIcon.png");
+            await expect(page.locator(".mx_E2EIcon")).toMatchScreenshot("device-verified-e2eIcon.png");
             await infoDialog.getByRole("button", { name: "Got it" }).click();
 
             // Check that our device is now cross-signed
@@ -130,53 +130,68 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await page.unrouteAll({ behavior: "ignoreErrors" });
     });
 
-    test("Verify device with QR code during login", async ({ page, app, credentials, homeserver }) => {
-        // A mode 0x02 verification: "self-verifying in which the current device does not yet trust the master key"
-        await logIntoElement(page, credentials);
+    test(
+        "Verify device with QR code during login",
+        { tag: "@screenshot" },
+        async ({ page, app, credentials, homeserver }) => {
+            // A mode 0x02 verification: "self-verifying in which the current device does not yet trust the master key"
+            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);
 
-        const infoDialog = page.locator(".mx_InfoDialog");
-        // feed the QR code into the verification request.
-        const qrData = await readQrCode(infoDialog);
-        const verifier = await verificationRequest.evaluateHandle(
-            (request, qrData) => request.scanQRCode(new Uint8ClampedArray(qrData)),
-            [...qrData],
-        );
+            const infoDialog = page.locator(".mx_InfoDialog");
+            // feed the QR code into the verification request.
+            const qrData = await readQrCode(infoDialog);
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("qr-code.png", {
+                mask: [infoDialog.locator("img")],
+            });
+            const verifier = await verificationRequest.evaluateHandle(
+                (request, qrData) => request.scanQRCode(new Uint8ClampedArray(qrData)),
+                [...qrData],
+            );
 
-        // Confirm that the bot user scanned successfully
-        await expect(infoDialog.getByText("Confirm that you see a green shield on your other device")).toBeVisible();
-        await infoDialog.getByRole("button", { name: "Yes, I see a green shield" }).click();
-        await infoDialog.getByRole("button", { name: "Got it" }).click();
+            // Confirm that the bot user scanned successfully
+            await expect(
+                infoDialog.getByText("Confirm that you see a green shield on your other device"),
+            ).toBeVisible();
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("confirm-green-shield.png");
+            await infoDialog.getByRole("button", { name: "Yes, I see a green shield" }).click();
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("got-it.png");
+            await infoDialog.getByRole("button", { name: "Got it" }).click();
 
-        // wait for the bot to see we have finished
-        await verifier.evaluate((verifier) => verifier.verify());
+            // wait for the bot to see we have finished
+            await verifier.evaluate((verifier) => verifier.verify());
 
-        // the bot uploads the signatures asynchronously, so wait for that to happen
-        await page.waitForTimeout(1000);
+            // the bot uploads the signatures asynchronously, so wait for that to happen
+            await page.waitForTimeout(1000);
 
-        // our device should trust the bot device
-        await app.client.evaluate(async (cli, aliceBotCredentials) => {
-            const deviceStatus = await cli
-                .getCrypto()!
-                .getDeviceVerificationStatus(aliceBotCredentials.userId, aliceBotCredentials.deviceId);
-            if (!deviceStatus.isVerified()) {
-                throw new Error("Bot device was not verified after QR code verification");
-            }
-        }, aliceBotClient.credentials);
+            // our device should trust the bot device
+            await app.client.evaluate(async (cli, aliceBotCredentials) => {
+                const deviceStatus = await cli
+                    .getCrypto()!
+                    .getDeviceVerificationStatus(aliceBotCredentials.userId, aliceBotCredentials.deviceId);
+                if (!deviceStatus.isVerified()) {
+                    throw new Error("Bot device was not verified after QR code verification");
+                }
+            }, aliceBotClient.credentials);
 
-        // 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
-        await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
-    });
+            // Check that the current device is connected to key backup
+            await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
+        },
+    );
 
-    test("Verify device with Security Phrase during login", async ({ page, app, credentials, homeserver }) => {
-        await logIntoElement(page, credentials);
-        await enterRecoveryKeyAndCheckVerified(page, app, "new passphrase");
-    });
+    test(
+        "Verify device with Security Phrase during login",
+        { tag: "@screenshot" },
+        async ({ page, app, credentials, homeserver }) => {
+            await logIntoElement(page, credentials);
+            await enterRecoveryKeyAndCheckVerified(page, app, "new passphrase", true);
+        },
+    );
 
     test("Verify device with Recovery Key during login", async ({ page, app, credentials, homeserver }) => {
         const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey;
@@ -226,7 +241,12 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
     });
 
     /** Helper for the three tests above which verify by recovery key */
-    async function enterRecoveryKeyAndCheckVerified(page: Page, app: ElementAppPage, recoveryKey: string) {
+    async function enterRecoveryKeyAndCheckVerified(
+        page: Page,
+        app: ElementAppPage,
+        recoveryKey: string,
+        screenshot = false,
+    ) {
         await page.getByRole("button", { name: "Use recovery key" }).click();
 
         // Enter the recovery key
@@ -234,8 +254,12 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         // 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);
+        if (screenshot) {
+            await expect(page.locator(".mx_Dialog").filter({ hasText: "Enter your recovery key" })).toMatchScreenshot(
+                "recovery-key.png",
+            );
+        }
         await dialog.getByRole("button", { name: "Continue", disabled: false }).click();
-
         await page.getByRole("button", { name: "Done" }).click();
 
         // Check that our device is now cross-signed

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

@@ -77,11 +77,8 @@ test.describe("Cryptography", function () {
                 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",
-                );
+                await expect(lastE2eIcon).toHaveAccessibleName("This message could not be decrypted");
+                await expect(lastE2eIcon).toMatchScreenshot("event-shield-utd.png");
 
                 /* Should show a red padlock for an unencrypted message in an e2e room */
                 await bob.evaluate(
@@ -99,10 +96,8 @@ test.describe("Cryptography", function () {
                 );
 
                 await expect(last).toContainText("test unencrypted");
-                await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+                await expect(lastE2eIcon).toHaveAccessibleName("Not encrypted");
                 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
@@ -133,11 +128,8 @@ test.describe("Cryptography", function () {
                 /* 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.",
-                );
+                await expect(lastTileE2eIcon).toHaveAccessibleName("Encrypted by a device not verified by its owner.");
+                await expect(lastE2eIcon).toMatchScreenshot("event-shield-not-verified.png");
 
                 /* 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
@@ -153,64 +145,58 @@ test.describe("Cryptography", function () {
                 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(lastE2eIcon).toHaveAccessibleName("Encrypted by a device not verified by its owner.");
+                await expect(lastE2eIcon).toMatchScreenshot("event-shield-not-verified.png");
             },
         );
 
-        test("Should show a grey padlock for a key restored from backup", async ({
-            page,
-            app,
-            bot: bob,
-            homeserver,
-            user: aliceCredentials,
-        }) => {
-            test.slow();
-            const securityKey = await enableKeyBackup(app);
+        test(
+            "Should show a grey padlock for a key restored from backup",
+            { tag: "@screenshot" },
+            async ({ page, app, bot: bob, homeserver, user: aliceCredentials }) => {
+                test.slow();
+                const securityKey = await enableKeyBackup(app);
 
-            // bob sends a valid event
-            await bob.sendMessage(testRoomId, "test encrypted 1");
+                // bob sends a valid event
+                await bob.sendMessage(testRoomId, "test encrypted 1");
 
-            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();
+                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();
 
-            // Workaround for https://github.com/element-hq/element-web/issues/27267. It can take up to 10 seconds for
-            // the key to be backed up.
-            await page.waitForTimeout(10000);
+                // Workaround for https://github.com/element-hq/element-web/issues/27267. It can take up to 10 seconds for
+                // the key to be backed up.
+                await page.waitForTimeout(10000);
 
-            /* log out, and back in */
-            await logOutOfElement(page);
-            // Reload to work around a Rust crypto bug where it can hold onto the indexeddb even after logout
-            // https://github.com/element-hq/element-web/issues/25779
-            await page.addInitScript(() => {
-                // When we reload, the initScript created by the `user`/`pageWithCredentials` fixtures
-                // will re-inject the original credentials into localStorage, which we don't want.
-                // To work around, we add a second initScript which will clear localStorage again.
-                window.localStorage.clear();
-            });
-            await page.reload();
-            await logIntoElementAndVerify(page, aliceCredentials, securityKey);
+                /* log out, and back in */
+                await logOutOfElement(page);
+                // Reload to work around a Rust crypto bug where it can hold onto the indexeddb even after logout
+                // https://github.com/element-hq/element-web/issues/25779
+                await page.addInitScript(() => {
+                    // When we reload, the initScript created by the `user`/`pageWithCredentials` fixtures
+                    // will re-inject the original credentials into localStorage, which we don't want.
+                    // To work around, we add a second initScript which will clear localStorage again.
+                    window.localStorage.clear();
+                });
+                await page.reload();
+                await logIntoElementAndVerify(page, aliceCredentials, securityKey);
 
-            /* go back to the test room and find Bob's message again */
-            await app.viewRoomById(testRoomId);
-            await expect(lastTile).toContainText("test encrypted 1");
-            // The gray shield would be a mx_EventTile_e2eIcon_normal. The red shield would be a mx_EventTile_e2eIcon_warning.
-            // No shield would have no div mx_EventTile_e2eIcon at all.
-            await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_normal/);
-            await lastTileE2eIcon.hover();
-            // The key is coming from backup, so it is not anymore possible to establish if the claimed device
-            // creator of this key is authentic. The tooltip should be "The authenticity of this encrypted message can't be guaranteed on this device."
-            // It is not "Encrypted by an unknown or deleted device." even if the claimed device is actually deleted.
-            await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
-                "The authenticity of this encrypted message can't be guaranteed on this device.",
-            );
-        });
+                /* go back to the test room and find Bob's message again */
+                await app.viewRoomById(testRoomId);
+                await expect(lastTile).toContainText("test encrypted 1");
+                // The gray shield would be a Compound info icon. The red shield would be a Compound error solid icon.
+                // No shield would have no div mx_EventTile_e2eIcon at all.
+                // The key is coming from backup, so it is not anymore possible to establish if the claimed device
+                // creator of this key is authentic. The tooltip should be "The authenticity of this encrypted message can't be guaranteed on this device."
+                // It is not "Encrypted by an unknown or deleted device." even if the claimed device is actually deleted.
+                await expect(lastTileE2eIcon).toHaveAccessibleName(
+                    "The authenticity of this encrypted message can't be guaranteed on this device.",
+                );
+                await expect(lastTileE2eIcon).toMatchScreenshot("event-shield-authenticity.png");
+            },
+        );
 
         test("should show the correct shield on edited e2e events", async ({ page, app, bot: bob, homeserver }) => {
             // bob has a second, not cross-signed, device
@@ -224,7 +210,7 @@ test.describe("Cryptography", function () {
 
             // the message should appear, decrypted, with no warning
             await expect(
-                page.locator(".mx_EventTile", { hasText: "Hoo!" }).locator(".mx_EventTile_e2eIcon_warning"),
+                page.locator(".mx_EventTile", { hasText: "Hoo!" }).locator(".mx_EventTile_e2eIcon"),
             ).not.toBeVisible();
 
             // bob sends an edit to the first message with his unverified device
@@ -241,7 +227,7 @@ test.describe("Cryptography", function () {
 
             // the edit should have a warning
             await expect(
-                page.locator(".mx_EventTile", { hasText: "Haa!" }).locator(".mx_EventTile_e2eIcon_warning"),
+                page.locator(".mx_EventTile", { hasText: "Haa!" }).locator(".mx_EventTile_e2eIcon"),
             ).toBeVisible();
 
             // a second edit from the verified device should be ok
@@ -257,77 +243,69 @@ test.describe("Cryptography", function () {
             });
 
             await expect(
-                page.locator(".mx_EventTile", { hasText: "Hee!" }).locator(".mx_EventTile_e2eIcon_warning"),
+                page.locator(".mx_EventTile", { hasText: "Hee!" }).locator(".mx_EventTile_e2eIcon"),
             ).not.toBeVisible();
         });
 
-        test("should show correct shields on events sent by devices which have since been deleted", async ({
-            page,
-            app,
-            bot: bob,
-            homeserver,
-        }) => {
-            // Workaround for https://github.com/element-hq/element-web/issues/28640:
-            // make sure that Alice has seen Bob's identity before she goes offline. We do this by opening
-            // his user info.
-            await waitForDevices(app, bob.credentials.userId, 1);
+        test(
+            "should show correct shields on events sent by devices which have since been deleted",
+            { tag: "@screenshot" },
+            async ({ page, app, bot: bob, homeserver }) => {
+                // Workaround for https://github.com/element-hq/element-web/issues/28640:
+                // make sure that Alice has seen Bob's identity before she goes offline. We do this by opening
+                // his user info.
+                await waitForDevices(app, bob.credentials.userId, 1);
 
-            // Our app is blocked from syncing while Bob sends his messages.
-            await app.client.network.goOffline();
+                // Our app is blocked from syncing while Bob sends his messages.
+                await app.client.network.goOffline();
 
-            // Bob sends a message from his verified device
-            await bob.sendMessage(testRoomId, "test encrypted from verified");
+                // Bob sends a message from his verified device
+                await bob.sendMessage(testRoomId, "test encrypted from verified");
 
-            // And one from a second, not cross-signed, device
-            const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
-            await bobSecondDevice.waitForNextSync(); // make sure the client knows the room is encrypted
-            await bobSecondDevice.sendMessage(testRoomId, "test encrypted from unverified");
+                // And one from a second, not cross-signed, device
+                const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
+                await bobSecondDevice.waitForNextSync(); // make sure the client knows the room is encrypted
+                await bobSecondDevice.sendMessage(testRoomId, "test encrypted from unverified");
 
-            // ... and then logs out both devices.
-            await bob.evaluate((cli) => cli.logout(true));
-            await bobSecondDevice.evaluate((cli) => cli.logout(true));
+                // ... and then logs out both devices.
+                await bob.evaluate((cli) => cli.logout(true));
+                await bobSecondDevice.evaluate((cli) => cli.logout(true));
 
-            // Let our app start syncing again
-            await app.client.network.goOnline();
+                // Let our app start syncing again
+                await app.client.network.goOnline();
 
-            // Wait for the messages to arrive. It can take quite a while for the sync to wake up.
-            const last = page.locator(".mx_EventTile_last");
-            await expect(last).toContainText("test encrypted from unverified", { timeout: 20000 });
-            const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
-            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.",
-            );
+                // Wait for the messages to arrive. It can take quite a while for the sync to wake up.
+                const last = page.locator(".mx_EventTile_last");
+                await expect(last).toContainText("test encrypted from unverified", { timeout: 20000 });
+                const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
+                await expect(lastE2eIcon).toHaveAccessibleName("Encrypted by a device not verified by its owner.");
+                await expect(lastE2eIcon).toMatchScreenshot("event-shield-not-verified.png");
 
-            const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" });
-            await assertNoE2EIcon(penultimate, app);
-        });
+                const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" });
+                await assertNoE2EIcon(penultimate, app);
+            },
+        );
 
-        test("should show correct shields on events sent by users with changed identity", async ({
-            page,
-            app,
-            bot: bob,
-            homeserver,
-        }) => {
-            // Verify Bob
-            await verify(app, bob);
+        test(
+            "should show correct shields on events sent by users with changed identity",
+            { tag: "@screenshot" },
+            async ({ page, app, bot: bob, homeserver }) => {
+                // Verify Bob
+                await verify(app, bob);
 
-            // Bob logs in a new device and resets cross-signing
-            const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
-            await bootstrapCrossSigningForClient(await bobSecondDevice.prepareClient(), bob.credentials, true);
+                // Bob logs in a new device and resets cross-signing
+                const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
+                await bootstrapCrossSigningForClient(await bobSecondDevice.prepareClient(), bob.credentials, true);
 
-            /* should show an error for a message from a previously verified device */
-            await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
-            const last = page.locator(".mx_EventTile_last");
-            await expect(last).toContainText("test encrypted from user that was previously verified");
-            const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
-            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
-            await lastE2eIcon.focus();
-            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
-                "Sender's verified identity was reset",
-            );
-        });
+                /* should show an error for a message from a previously verified device */
+                await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
+                const last = page.locator(".mx_EventTile_last");
+                await expect(last).toContainText("test encrypted from user that was previously verified");
+                const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
+                await expect(lastE2eIcon).toHaveAccessibleName("Sender's verified identity was reset");
+                await expect(lastE2eIcon).toMatchScreenshot("event-shield-identity-reset.png");
+            },
+        );
     });
 });
 
@@ -343,8 +321,6 @@ async function assertNoE2EIcon(messageLocator: Locator, app: ElementAppPage) {
     const e2eIcon = messageLocator.locator(".mx_EventTile_e2eIcon");
     if ((await e2eIcon.count()) > 0) {
         // uh-oh, there is an e2e icon. Let's find out what it's about so that we can throw a helpful error.
-        await e2eIcon.focus();
-        const tooltip = await app.getTooltipForElement(e2eIcon);
-        throw new Error(`Found an unexpected e2eIcon with tooltip '${await tooltip.textContent()}'`);
+        await expect(e2eIcon).toHaveAccessibleName("None");
     }
 }

playwright/e2e/devtools/devtools.spec.ts

@@ -29,5 +29,12 @@ test.describe("Devtools", () => {
                 display: none;
             }`,
         });
+
+        // Try entering a value for the Developer.elementCallUrl setting
+        const input = page.getByRole("textbox", { name: "Element Call URL" });
+        await input.fill("https://example.com");
+        await input.press("Enter");
+        // expect EW NOT to reload
+        await page.getByText("Saved").isVisible();
     });
 });

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

@@ -299,9 +299,7 @@ test.describe("Room list", () => {
             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 publicRoom.click({ button: "right" });
             await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click();
 
             // Should have low priority decoration
@@ -309,8 +307,8 @@ test.describe("Room list", () => {
                 "This is a low priority room",
             );
 
-            // focus the user menu to avoid to have hover decoration
-            await page.getByRole("button", { name: "User menu" }).focus();
+            // focus the header to avoid to have hover decoration
+            await page.getByTestId("room-list-header").click();
             await expect(publicRoom).toMatchScreenshot("room-list-item-low-priority.png");
         });
 
@@ -430,7 +428,9 @@ test.describe("Room list", () => {
             await app.settings.closeDialog();
 
             await app.settings.openUserSettings("Notifications");
-            await page.getByText("Show all activity in the room list (dots or number of unread messages)").click();
+            await page
+                .getByRole("switch", { name: "Show all activity in the room list (dots or number of unread messages)" })
+                .check();
             await app.settings.closeDialog();
 
             // Switch to the other room to avoid the notification to be cleared
@@ -450,12 +450,11 @@ test.describe("Room list", () => {
             await bot.joinRoom(roomId);
 
             const room = roomListView.getByRole("option", { name: "mark as unread" });
-            await room.hover();
-            await room.getByRole("button", { name: "More Options" }).click();
+            await room.click({ button: "right" });
             await page.getByRole("menuitem", { name: "mark as unread" }).click();
 
-            // focus the user menu to avoid to have hover decoration
-            await page.getByRole("button", { name: "User menu" }).focus();
+            // focus the header to avoid to have hover decoration
+            await page.getByTestId("room-list-header").click();
 
             await expect(room).toMatchScreenshot("room-list-item-mark-as-unread.png");
         });

playwright/e2e/login/login.spec.ts

@@ -0,0 +1,30 @@
+/*
+Copyright 2025 Element Creations 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 { expect, test } from "../../element-web-test";
+import { logIntoElement } from "../crypto/utils.ts";
+
+test.describe(`With force_verification: true`, () => {
+    test.use({
+        config: {
+            force_verification: true,
+        },
+    });
+
+    test("Can reload after login", async ({ page, credentials }) => {
+        // The page should reload fine when going to the base client URL
+        // Regression test for https://github.com/element-hq/element-web/issues/31203
+        await logIntoElement(page, credentials);
+
+        // We should auto-upload the E2EE keys, and show a welcome page
+        await expect(page.getByRole("heading", { name: `Welcome ${credentials.displayName}` })).toBeVisible();
+
+        await page.goto("/");
+
+        await expect(page.getByRole("heading", { name: `Welcome ${credentials.displayName}` })).toBeVisible();
+    });
+});

playwright/e2e/oidc/index.ts

@@ -42,7 +42,7 @@ export async function registerAccountMas(
     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 expect(page.getByText("Continue to Element?")).toBeVisible();
     await page.getByRole("button", { name: "Continue" }).click();
 }
 
@@ -56,6 +56,6 @@ export async function logInAccountMas(page: Page, username: string, password: st
     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 expect(page.getByText("Continue to Element?")).toBeVisible();
     await page.getByRole("button", { name: "Continue" }).click();
 }

playwright/e2e/pinned-messages/index.ts

@@ -29,6 +29,7 @@ export const test = base.extend<{
     room1Name: "Room 1",
     room1: async ({ room1Name: name, app, user, bot }, use) => {
         const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        await bot.awaitRoomMembership(roomId);
         await use({ name, roomId });
     },
 

playwright/e2e/read-receipts/index.ts

@@ -36,11 +36,13 @@ export const test = base.extend<{
     roomAlphaName: "Room Alpha",
     roomAlpha: async ({ roomAlphaName: name, app, user, bot }, use) => {
         const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        await bot.awaitRoomMembership(roomId);
         await use({ name, roomId });
     },
     roomBetaName: "Room Beta",
     roomBeta: async ({ roomBetaName: name, app, user, bot }, use) => {
         const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        await bot.awaitRoomMembership(roomId);
         await use({ name, roomId });
     },
     msg: async ({ page, app, util }, use) => {

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

@@ -13,72 +13,30 @@ import { test } from ".";
 test.describe("Read receipts", { tag: "@mergequeue" }, () => {
     test.describe("Message ordering", () => {
         test.describe("in the main timeline", () => {
-            test.fixme(
-                "A receipt for the last event in sync order (even with wrong ts) marks a room as read",
-                () => {},
-            );
-            test.fixme(
-                "A receipt for a non-last event in sync order (even when ts makes it last) leaves room unread",
-                () => {},
-            );
+            test.fixme("A receipt for the last event in sync order (even with wrong ts) marks a room as read", () => {});
+            test.fixme("A receipt for a non-last event in sync order (even when ts makes it last) leaves room unread", () => {});
         });
 
         test.describe("in threads", () => {
             // These don't pass yet - we need MSC4033 - we don't even know the Sync order yet
-            test.fixme(
-                "A receipt for the last event in sync order (even with wrong ts) marks a thread as read",
-                () => {},
-            );
-            test.fixme(
-                "A receipt for a non-last event in sync order (even when ts makes it last) leaves thread unread",
-                () => {},
-            );
+            test.fixme("A receipt for the last event in sync order (even with wrong ts) marks a thread as read", () => {});
+            test.fixme("A receipt for a non-last event in sync order (even when ts makes it last) leaves thread unread", () => {});
 
             // These pass now and should not later - we should use order from MSC4033 instead of ts
             // These are broken out
-            test.fixme(
-                "A receipt for last threaded event in ts order (even when it was received non-last) marks a thread as read",
-                () => {},
-            );
-            test.fixme(
-                "A receipt for non-last threaded event in ts order (even when it was received last) leaves thread unread",
-                () => {},
-            );
-            test.fixme(
-                "A receipt for last threaded edit in ts order (even when it was received non-last) marks a thread as read",
-                () => {},
-            );
-            test.fixme(
-                "A receipt for non-last threaded edit in ts order (even when it was received last) leaves thread unread",
-                () => {},
-            );
-            test.fixme(
-                "A receipt for last threaded reaction in ts order (even when it was received non-last) marks a thread as read",
-                () => {},
-            );
-            test.fixme(
-                "A receipt for non-last threaded reaction in ts order (even when it was received last) leaves thread unread",
-                () => {},
-            );
+            test.fixme("A receipt for last threaded event in ts order (even when it was received non-last) marks a thread as read", () => {});
+            test.fixme("A receipt for non-last threaded event in ts order (even when it was received last) leaves thread unread", () => {});
+            test.fixme("A receipt for last threaded edit in ts order (even when it was received non-last) marks a thread as read", () => {});
+            test.fixme("A receipt for non-last threaded edit in ts order (even when it was received last) leaves thread unread", () => {});
+            test.fixme("A receipt for last threaded reaction in ts order (even when it was received non-last) marks a thread as read", () => {});
+            test.fixme("A receipt for non-last threaded reaction in ts order (even when it was received last) leaves thread unread", () => {});
         });
 
         test.describe("thread roots", () => {
-            test.fixme(
-                "A receipt for last reaction to thread root in sync order (even when ts makes it last) marks room as read",
-                () => {},
-            );
-            test.fixme(
-                "A receipt for non-last reaction to thread root in sync order (even when ts makes it last) leaves room unread",
-                () => {},
-            );
-            test.fixme(
-                "A receipt for last edit to thread root in sync order (even when ts makes it last) marks room as read",
-                () => {},
-            );
-            test.fixme(
-                "A receipt for non-last edit to thread root in sync order (even when ts makes it last) leaves room unread",
-                () => {},
-            );
+            test.fixme("A receipt for last reaction to thread root in sync order (even when ts makes it last) marks room as read", () => {});
+            test.fixme("A receipt for non-last reaction to thread root in sync order (even when ts makes it last) leaves room unread", () => {});
+            test.fixme("A receipt for last edit to thread root in sync order (even when ts makes it last) marks room as read", () => {});
+            test.fixme("A receipt for non-last edit to thread root in sync order (even when ts makes it last) leaves room unread", () => {});
         });
     });
 });

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

@@ -12,18 +12,20 @@ import { test } from ".";
 
 test.describe("Read receipts", { tag: "@mergequeue" }, () => {
     test.describe("messages with missing referents", () => {
-        test.fixme(
-            "A message in an unknown thread is not visible and the room is read",
-            async ({ roomAlpha: room1, roomBeta: room2, util, msg }) => {
-                // Given a thread existed and the room is read
-                await util.goTo(room1);
-                await util.receiveMessages(room2, ["Root1", msg.threadedOff("Root1", "T1a")]);
+        test.fixme("A message in an unknown thread is not visible and the room is read", async ({
+            roomAlpha: room1,
+            roomBeta: room2,
+            util,
+            msg,
+        }) => {
+            // Given a thread existed and the room is read
+            await util.goTo(room1);
+            await util.receiveMessages(room2, ["Root1", msg.threadedOff("Root1", "T1a")]);
 
-                // When I restart, forgetting the thread root
-                // And I receive a message on that thread
-                // Then the message is invisible and the room remains read
-            },
-        );
+            // When I restart, forgetting the thread root
+            // And I receive a message on that thread
+            // Then the message is invisible and the room remains read
+        });
         test.fixme("When a message's thread root appears later the thread appears and the room is unread", () => {});
         test.fixme("An edit of an unknown message is not visible and the room is read", () => {});
         test.fixme("When an edit's message appears later the edited version appears and the room is unread", () => {});

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

@@ -14,14 +14,8 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
     test.describe("Notifications", () => {
         test.describe("in the main timeline", () => {
             test.fixme("A new message that mentions me shows a notification", () => {});
-            test.fixme(
-                "Reading a notifying message reduces the notification count in the room list, space and tab",
-                () => {},
-            );
-            test.fixme(
-                "Reading the last notifying message removes the notification marker from room list, space and tab",
-                () => {},
-            );
+            test.fixme("Reading a notifying message reduces the notification count in the room list, space and tab", () => {});
+            test.fixme("Reading the last notifying message removes the notification marker from room list, space and tab", () => {});
             test.fixme("Editing a message to mentions me shows a notification", () => {});
             test.fixme("Reading the last notifying edited message removes the notification marker", () => {});
             test.fixme("Redacting a notifying message removes the notification marker", () => {});
@@ -30,18 +24,9 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         test.describe("in threads", () => {
             test.fixme("A new threaded message that mentions me shows a notification", () => {});
             test.fixme("Reading a notifying threaded message removes the notification count", () => {});
-            test.fixme(
-                "Notification count remains steady when reading threads that contain seen notifications",
-                () => {},
-            );
-            test.fixme(
-                "Notification count remains steady when paging up thread view even when threads contain seen notifications",
-                () => {},
-            );
-            test.fixme(
-                "Notification count remains steady when paging up thread view after mark as unread even if older threads contain notifications",
-                () => {},
-            );
+            test.fixme("Notification count remains steady when reading threads that contain seen notifications", () => {});
+            test.fixme("Notification count remains steady when paging up thread view even when threads contain seen notifications", () => {});
+            test.fixme("Notification count remains steady when paging up thread view after mark as unread even if older threads contain notifications", () => {});
             test.fixme("Redacting a notifying threaded message removes the notification marker", () => {});
         });
     });