Merge branch 'develop' into tayeh/develop

* Fix room list handling of membership changes

Including knock->invite for ask to join

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* lint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

.eslintrc.js

@@ -1,3 +1,10 @@
+/*
+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.
+*/
+
 module.exports = {
     plugins: ["matrix-org", "eslint-plugin-react-compiler"],
     extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],

.github/workflows/build.yml

@@ -44,7 +44,7 @@ jobs:
         steps:
             - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   # Disable cache on Windows as it is slower than not caching
                   # https://github.com/actions/setup-node/issues/975
@@ -66,7 +66,7 @@ jobs:
               run: VERSION=$(scripts/get-version-from-git.sh) yarn build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: webapp-${{ matrix.image }}
                   path: webapp

.github/workflows/build_debian.yaml

@@ -62,7 +62,7 @@ jobs:
                   dpkg-gencontrol -v"$VERSION" -ldebian/tmp/DEBIAN/changelog
                   dpkg-deb -Zxz --root-owner-group --build debian/tmp element-web.deb
 
-            - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+            - uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: element-web.deb
                   path: element-web.deb

.github/workflows/build_develop.yml

@@ -28,7 +28,7 @@ jobs:
         steps:
             - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -53,7 +53,7 @@ jobs:
 
             - run: mv dist/element-*.tar.gz dist/develop.tar.gz
 
-            - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+            - uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: webapp
                   path: dist/develop.tar.gz

.github/workflows/docker.yaml

@@ -132,7 +132,7 @@ jobs:
                   cosign sign --yes ${images}
 
             - name: Update repo description
-              uses: peter-evans/dockerhub-description@432a30c9e07499fd01da9f8a49f0faf9e0ca5b77 # v4
+              uses: peter-evans/dockerhub-description@1b9a80c056b620d92cedb9d9b5a223409c68ddfa # v5
               if: github.event_name != 'pull_request'
               continue-on-error: true
               with:
@@ -141,7 +141,7 @@ jobs:
                   repository: vectorim/element-web
 
             - name: Repository Dispatch
-              uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # v3
+              uses: peter-evans/repository-dispatch@5fc4efd1a4797ddb68ffd0714a238564e4cc0e6f # v4
               if: github.event_name != 'pull_request'
               with:
                   repository: element-hq/element-web-pro

.github/workflows/docs.yml

@@ -33,7 +33,7 @@ jobs:
                   repository: matrix-org/matrix-js-sdk
                   path: matrix-js-sdk
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   cache-dependency-path: element-web/yarn.lock

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

@@ -25,7 +25,7 @@ jobs:
             actions: read
         steps:
             - name: Download HTML report
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}

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

@@ -54,7 +54,7 @@ jobs:
               with:
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -74,7 +74,7 @@ jobs:
               run: VERSION=$(scripts/get-version-from-git.sh) yarn build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: webapp
                   path: webapp
@@ -128,12 +128,12 @@ jobs:
                   repository: element-hq/element-web
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
               with:
                   name: webapp
                   path: webapp
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   cache-dependency-path: yarn.lock
@@ -172,7 +172,7 @@ jobs:
 
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: all-blob-reports-${{ matrix.project }}-${{ matrix.runner }}
                   path: blob-report
@@ -200,7 +200,7 @@ jobs:
                   persist-credentials: false
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               if: inputs.skip != true
               with:
                   cache: "yarn"
@@ -212,7 +212,7 @@ jobs:
 
             - name: Download blob reports from GitHub Actions Artifacts
               if: inputs.skip != true
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
               with:
                   pattern: all-blob-reports-*
                   path: all-blob-reports
@@ -228,7 +228,7 @@ jobs:
             # Upload the HTML report even if one of our reporters fails, this can happen when stale screenshots are detected
             - name: Upload HTML report
               if: always() && inputs.skip != true
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: html-report
                   path: playwright-report

.github/workflows/netlify.yaml

@@ -28,7 +28,7 @@ jobs:
                       Exercise caution. Use test accounts.
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}

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

@@ -0,0 +1,40 @@
+name: Publish shared component npm package
+on:
+    workflow_dispatch: {}
+
+concurrency: release
+jobs:
+    publish:
+        name: "Publish"
+        runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            id-token: write
+
+        steps:
+            - name: 🧮 Checkout code
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+
+            - name: 🔧 Set up node environment
+              uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+              with:
+                  cache: "yarn"
+                  node-version-file: ".node-version"
+                  registry-url: "https://registry.npmjs.org"
+
+            # Ensure npm 11.5.1 or later is installed
+            - name: Update npm
+              run: npm install -g npm@latest
+
+            # Need to setup element web too as it needs the translations
+            - name: 🛠️ Setup EW
+              run: yarn install --pure-lockfile
+
+            - name: 🛠️ Setup
+              # When running `install` it also calls the `prepare` step which generates
+              # a build
+              run: yarn --cwd packages/shared-components install --pure-lockfile
+
+            - name: 🚀 Publish to npm
+              working-directory: packages/shared-components
+              run: npm publish --access public --tag test --provenance

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

@@ -27,7 +27,7 @@ jobs:
               run: "sudo apt-get install -y tree"
 
             - name: Download Diffs
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}

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

@@ -26,7 +26,7 @@ jobs:
                   persist-credentials: false
                   repository: element-hq/element-web
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -55,22 +55,12 @@ jobs:
               if: steps.playwright-cache.outputs.cache-hit != 'true'
               run: "yarn playwright install --with-deps --only-shell"
 
-            - name: Build Element Web resources
-              # Needed to prepare language files
-              run: "yarn build:res"
-
-            - name: Build storybook dependencies
-              # When the first test is ran, it will fail because the dependencies are not yet built.
-              # This step is to ensure that the dependencies are built before running the tests.
-              run: "yarn --cwd packages/shared-components test:storybook:ci"
-              continue-on-error: true
-
             - name: Run Visual tests
               run: "yarn --cwd packages/shared-components test:storybook:ci"
 
             - name: Upload received images & diffs
               if: always()
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: received-images
                   path: packages/shared-components/playwright/shared-component-received

.github/workflows/static_analysis.yaml

@@ -24,7 +24,7 @@ jobs:
         steps:
             - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -75,7 +75,7 @@ jobs:
         steps:
             - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -99,7 +99,7 @@ jobs:
         steps:
             - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -117,7 +117,7 @@ jobs:
         steps:
             - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -135,7 +135,7 @@ jobs:
         steps:
             - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.github/workflows/tests.yml

@@ -29,8 +29,8 @@ env:
 permissions: {}
 
 jobs:
-    jest:
-        name: Jest
+    jest_ew:
+        name: Jest (Element Web)
         runs-on: ubuntu-24.04
         strategy:
             fail-fast: false
@@ -44,7 +44,7 @@ jobs:
                   repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}
 
             - name: Yarn cache
-              uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+              uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   node-version: "lts/*"
                   cache: "yarn"
@@ -84,7 +84,7 @@ jobs:
 
             - name: Upload Artifact
               if: env.ENABLE_COVERAGE == 'true'
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: coverage-${{ matrix.runner }}
                   path: |
@@ -93,13 +93,13 @@ jobs:
 
     complete:
         name: jest-tests
-        needs: jest
+        needs: jest_ew
         if: always()
         runs-on: ubuntu-24.04
         permissions:
             statuses: write
         steps:
-            - if: needs.jest.result != 'skipped' && needs.jest.result != 'success'
+            - if: needs.jest_ew.result != 'skipped' && needs.jest_ew.result != 'success'
               run: exit 1
 
             - name: Skip SonarCloud in merge queue
@@ -112,3 +112,56 @@ jobs:
                   context: SonarCloud Code Analysis
                   sha: ${{ github.sha }}
                   target_url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+
+    jest_sc:
+        name: Jest (Shared Components)
+        runs-on: ubuntu-24.04
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              with:
+                  repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}
+
+            - name: Yarn cache
+              uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+              with:
+                  node-version: "lts/*"
+                  cache: "yarn"
+
+            - name: Install EW Deps
+              run: "yarn install"
+
+            - name: Install Shared Component Deps
+              working-directory: "packages/shared-components"
+              run: "yarn install"
+
+            - name: Jest Cache
+              uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
+              with:
+                  path: /tmp/jest_cache
+                  key: ${{ hashFiles('**/yarn.lock') }}
+
+            - name: Get number of CPU cores
+              id: cpu-cores
+              uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2
+
+            - name: Run tests
+              working-directory: "packages/shared-components"
+              run: |
+                  yarn test \
+                      --coverage=${{ env.ENABLE_COVERAGE }} \
+                      --ci \
+                      --max-workers ${{ steps.cpu-cores.outputs.count }} \
+                      --cacheDirectory /tmp/jest_cache
+              env:
+                  # tell jest to use coloured output
+                  FORCE_COLOR: true
+
+            - name: Upload Artifact
+              if: env.ENABLE_COVERAGE == 'true'
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
+              with:
+                  name: coverage-sharedcomponents
+                  path: |
+                      packages/shared-components/coverage
+                      !packages/shared-components/coverage/lcov-report

.github/workflows/triage-stale.yml

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

.github/workflows/update-jitsi.yml

@@ -11,7 +11,7 @@ jobs:
         steps:
             - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.gitignore

@@ -36,3 +36,4 @@ storybook-static
 
 /packages/shared-components/node_modules
 /packages/shared-components/dist
+/packages/shared-components/src/i18nKeys.d.ts

.node-version

@@ -1 +1 @@
-22
+24

CHANGELOG.md

@@ -1,3 +1,50 @@
+Changes in [1.12.3](https://github.com/element-hq/element-web/releases/tag/v1.12.3) (2025-11-04)
+================================================================================================
+## 🦖 Deprecations
+
+* Remove allowVoipWithNoMedia feature flag ([#31087](https://github.com/element-hq/element-web/pull/31087)). Contributed by @Half-Shot.
+
+## ✨ Features
+
+* Change module API to be an instance getter ([#31025](https://github.com/element-hq/element-web/pull/31025)). Contributed by @dbkr.
+
+## 🐛 Bug Fixes
+
+* Show hover elements when keyboard focus is within an event tile ([#31078](https://github.com/element-hq/element-web/pull/31078)). Contributed by @t3chguy.
+* Ensure toolbar navigation pattern works in MessageActionBar ([#31080](https://github.com/element-hq/element-web/pull/31080)). Contributed by @t3chguy.
+* Ensure sent markers are hidden when showing thread summary. ([#31076](https://github.com/element-hq/element-web/pull/31076)). Contributed by @Half-Shot.
+* Fix translation in dev mode ([#31045](https://github.com/element-hq/element-web/pull/31045)). Contributed by @florianduros.
+* Fix sort order in space hierarchy ([#30975](https://github.com/element-hq/element-web/pull/30975)). Contributed by @t3chguy.
+* New Room list: don't display message preview of thread ([#31043](https://github.com/element-hq/element-web/pull/31043)). Contributed by @florianduros.
+* Revert "A11y: move focus to right panel when opened" ([#30999](https://github.com/element-hq/element-web/pull/30999)). Contributed by @florianduros.
+* Fix highlights in messages (or search results) breaking links ([#30264](https://github.com/element-hq/element-web/pull/30264)). Contributed by @bojidar-bg.
+* Add prepare script ([#31030](https://github.com/element-hq/element-web/pull/31030)). Contributed by @dbkr.
+* Fix html exports by adding SDKContext ([#30987](https://github.com/element-hq/element-web/pull/30987)). Contributed by @t3chguy.
+
+
+Changes in [1.12.2](https://github.com/element-hq/element-web/releases/tag/v1.12.2) (2025-10-21)
+================================================================================================
+## ✨ Features
+
+* Room List: Extend the viewport to avoid so many black spots when scrolling the room list ([#30867](https://github.com/element-hq/element-web/pull/30867)). Contributed by @langleyd.
+* Hide calling buttons in room header before a room is created ([#30816](https://github.com/element-hq/element-web/pull/30816)). Contributed by @Half-Shot.
+* Improve invite dialog ui - Part 2 ([#30836](https://github.com/element-hq/element-web/pull/30836)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* Fix platform settings race condition and make auto-launch tri-state ([#30977](https://github.com/element-hq/element-web/pull/30977)). Contributed by @t3chguy.
+* Fix: member count in header and member list ([#30982](https://github.com/element-hq/element-web/pull/30982)). Contributed by @florianduros.
+* Fix duration of voice message in timeline ([#30973](https://github.com/element-hq/element-web/pull/30973)). Contributed by @florianduros.
+* Fix voice notes rendering at 00:00 when playback had not begun. ([#30961](https://github.com/element-hq/element-web/pull/30961)). Contributed by @Half-Shot.
+* Improve handling of animated images, add support for AVIF animations ([#30932](https://github.com/element-hq/element-web/pull/30932)). Contributed by @t3chguy.
+* Update key storage toggle when key storage status changes ([#30934](https://github.com/element-hq/element-web/pull/30934)). Contributed by @uhoreg.
+* Fix jitsi widget popout ([#30908](https://github.com/element-hq/element-web/pull/30908)). Contributed by @dbkr.
+* Improve keyboard navigation on invite dialog ([#30930](https://github.com/element-hq/element-web/pull/30930)). Contributed by @florianduros.
+* Prefer UIA flows with supported UIA stages ([#30926](https://github.com/element-hq/element-web/pull/30926)). Contributed by @richvdh.
+* Enhance accessibility of dropdown ([#30928](https://github.com/element-hq/element-web/pull/30928)). Contributed by @florianduros.
+* Improve accessibility of the `\<AvatarSetting> component ([#30907](https://github.com/element-hq/element-web/pull/30907)). Contributed by @MidhunSureshR.
+
+
 Changes in [1.12.1](https://github.com/element-hq/element-web/releases/tag/v1.12.1) (2025-10-07)
 ================================================================================================
 ## ✨ Features

Dockerfile

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

docs/MVVM.md

@@ -18,7 +18,7 @@ This is anywhere your data or business logic comes from. If your view model is a
 
 #### View
 
-1. Located in [`shared-components`](https://github.com/element-hq/element-web/tree/develop/src/shared-components). Develop it in storybook!
+1. Located in [`shared-components`](https://github.com/element-hq/element-web/tree/develop/packages/shared-components). Develop it in storybook!
 2. Views are simple react components (eg: `FooView`).
 3. Views use [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore) internally where the view model is the external store.
 4. Views should define the interface of the view model they expect:
@@ -35,7 +35,7 @@ This is anywhere your data or business logic comes from. If your view model is a
     }
 
     // ViewModel is a type defining the methods needed for `useSyncExternalStore`
-    // https://github.com/element-hq/element-web/blob/develop/src/shared-components/ViewModel.ts
+    // https://github.com/element-hq/element-web/blob/develop/packages/shared-components/src/ViewModel.ts
     type FooViewModel = ViewModel<FooViewSnapshot> & FooViewActions;
 
     interface FooViewProps {
@@ -54,7 +54,7 @@ This is anywhere your data or business logic comes from. If your view model is a
     ```
 
 5. Multiple views can share the same view model if necessary.
-6. A full example is available [here](https://github.com/element-hq/element-web/blob/develop/src/shared-components/audio/AudioPlayerView/AudioPlayerView.tsx)
+6. A full example is available [here](https://github.com/element-hq/element-web/blob/develop/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.tsx)
 
 #### View Model
 

docs/config.md

@@ -407,7 +407,7 @@ The VoIP and Jitsi options are:
 If you run your own rageshake server to collect bug reports, the following options may be of interest:
 
 1. `bug_report_endpoint_url`: URL for where to submit rageshake logs to. Rageshakes include feedback submissions and bug reports. When
-   not present in the config, the app will disable all rageshake functionality. Set to `https://element.io/bugreports/submit` to submit
+   not present in the config, the app will disable all rageshake functionality. Set to `https://rageshakes.element.io/api/submit` to submit
    rageshakes to us, or use your own rageshake server.
 2. `uisi_autorageshake_app`: If a user has enabled the "automatically send debug logs on decryption errors" flag, this option will be sent
    alongside the rageshake so the rageshake server can filter them by app name. By default, this will be `element-auto-uisi`

docs/install.md

@@ -8,16 +8,64 @@ There are some exceptions like when using localhost, which is considered a [secu
 
 ## Release tarball
 
-1. Download the latest version from <https://github.com/element-hq/element-web/releases>
-1. Untar the tarball on your web server
-1. Move (or symlink) the `element-x.x.x` directory to an appropriate name
-1. Configure the correct caching headers in your webserver (see below)
-1. Configure the app by copying `config.sample.json` to `config.json` and
-   modifying it. See the [configuration docs](config.md) for details.
-1. Enter the URL into your browser and log into Element!
+The release tarball contains a pre-built, production-ready version of Element Web that you can deploy to any static web server.
 
-Releases are signed using gpg and the OpenPGP standard,
-and can be checked against the public key located at <https://packages.element.io/element-release-key.asc>.
+### Installation Steps
+
+1. **Download the latest release**
+
+    Download from <https://github.com/element-hq/element-web/releases>
+
+    Releases are signed using GPG and the OpenPGP standard. You can verify the signature against the public key at <https://packages.element.io/element-release-key.asc>
+
+2. **Extract the tarball**
+
+    ```bash
+    tar -xzf element-v*.tar.gz
+    ```
+
+    This creates a directory named `element-x.x.x` containing all the static files.
+
+3. **Deploy to your web server**
+
+    Move or symlink the directory to your web server's document root:
+
+    ```bash
+    # Example: Move to /var/www/element
+    sudo mv element-x.x.x /var/www/element
+
+    # Or create a symlink for easier version management
+    sudo ln -s /var/www/element-x.x.x /var/www/element
+    ```
+
+4. **Configure Element Web**
+
+    Copy the sample configuration and customize it:
+
+    ```bash
+    cd /var/www/element
+    cp config.sample.json config.json
+    ```
+
+    Edit `config.json` to configure your homeserver and other settings. See the [configuration docs](config.md) for details.
+
+5. **Configure your web server**
+
+    Set up proper caching headers and security settings. See the [web server configuration examples](#web-server-configuration) below.
+
+6. **Access Element Web**
+
+    Navigate to your server's URL (e.g., `https://element.example.com`) and log in!
+
+### Web Server Configuration
+
+Element Web requires specific caching headers to work correctly. The following files **must not be cached** to ensure users always get the latest version:
+
+- `/index.html`
+- `/version`
+- `/config*.json` (including `config.json` and `config.domain.json`)
+
+Additionally, configure `Cache-Control: no-cache` for `/` to force browsers to revalidate on page load.
 
 ## Debian package
 

docs/kubernetes.md

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

element.io/app/config.json

@@ -17,7 +17,7 @@
         "https://scalar-staging.vector.im/_matrix/integrations/v1",
         "https://scalar-staging.vector.im/api"
     ],
-    "bug_report_endpoint_url": "https://element.io/bugreports/submit",
+    "bug_report_endpoint_url": "https://rageshakes.element.io/api/submit",
     "uisi_autorageshake_app": "element-auto-uisi",
     "show_labs_settings": false,
     "room_directory": {

element.io/develop/config.json

@@ -17,7 +17,7 @@
         "https://scalar-staging.vector.im/_matrix/integrations/v1",
         "https://scalar-staging.vector.im/api"
     ],
-    "bug_report_endpoint_url": "https://element.io/bugreports/submit",
+    "bug_report_endpoint_url": "https://rageshakes.element.io/api/submit",
     "uisi_autorageshake_app": "element-auto-uisi",
     "show_labs_settings": true,
     "room_directory": {

jest.config.ts

@@ -17,7 +17,7 @@ const config: Config = {
         // This is needed to be able to load dual CJS/ESM WASM packages e.g. rust crypto & matrix-wywiwyg
         customExportConditions: ["browser", "node"],
     },
-    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)", "<rootDir>/src/shared-components/**/*.test.[t]s?(x)"],
+    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)"],
     globalSetup: "<rootDir>/test/globalSetup.ts",
     setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
     setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
@@ -40,12 +40,14 @@ const config: Config = {
         "^!!raw-loader!.*": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
+        "counterpart": "<rootDir>/node_modules/counterpart",
     },
     transformIgnorePatterns: [
         "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
     ],
     collectCoverageFrom: [
         "<rootDir>/src/**/*.{js,ts,tsx}",
+        "<rootDir>/packages/**/*.{js,ts,tsx}",
         // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is
         // not available in that contest. So, turn off coverage instrumentation for it.
         "!<rootDir>/src/utils/SessionLock.ts",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.12.1",
+    "version": "1.12.3",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -29,7 +29,7 @@
         "UserFriendlyError"
     ],
     "scripts": {
-        "i18n": "matrix-gen-i18n src res packages/shared-components && yarn i18n:sort && yarn i18n:lint",
+        "i18n": "matrix-gen-i18n src res packages/shared-components/src && yarn i18n:sort && yarn i18n:lint",
         "i18n:sort": "jq --sort-keys '.' src/i18n/strings/en_EN.json > src/i18n/strings/en_EN.json.tmp && mv src/i18n/strings/en_EN.json.tmp src/i18n/strings/en_EN.json",
         "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
         "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
@@ -68,20 +68,22 @@
         "postinstall": "patch-package"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.1.1",
-        "@playwright/test": "1.54.2",
-        "@types/react": "19.1.14",
-        "@types/react-dom": "19.1.9",
+        "**/pretty-format/react-is": "19.2.0",
+        "@playwright/test": "1.56.1",
+        "@types/react": "19.2.2",
+        "@types/react-dom": "19.2.2",
+        "@types/serve-static": "1.15.10",
         "oidc-client-ts": "3.3.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001745",
+        "caniuse-lite": "1.0.30001751",
         "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.4.1",
+        "@element-hq/element-web-module-api": "1.5.0",
+        "@element-hq/web-shared-components": "file:packages/shared-components",
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
@@ -103,7 +105,6 @@
         "browserslist": "^4.23.2",
         "classnames": "^2.2.6",
         "commonmark": "^0.31.0",
-        "counterpart": "^0.18.6",
         "css-tree": "^3.0.0",
         "diff-dom": "^5.0.0",
         "diff-match-patch": "^1.0.5",
@@ -122,6 +123,7 @@
         "jsrsasign": "^11.0.0",
         "jszip": "^3.7.0",
         "katex": "^0.16.0",
+        "linkify-html": "4.3.2",
         "linkify-react": "4.3.2",
         "linkify-string": "4.3.2",
         "linkifyjs": "4.3.2",
@@ -137,7 +139,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.268.6",
+        "posthog-js": "1.280.1",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -180,13 +182,13 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.16.0",
+        "@element-hq/element-call-embedded": "0.16.1",
         "@element-hq/element-web-playwright-common": "^2.0.0",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
-        "@rrweb/types": "^2.0.0-alpha.18",
         "@sentry/webpack-plugin": "^4.0.0",
+        "@storybook/react-vite": "^9.1.10",
         "@stylistic/eslint-plugin": "^5.0.0",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^10.4.0",
@@ -213,9 +215,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.14",
+        "@types/react": "19.2.2",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.9",
+        "@types/react-dom": "19.2.2",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.16.0",
         "@types/sdp-transform": "^2.4.10",
@@ -239,14 +241,14 @@
         "eslint": "8.57.1",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^10.0.0",
-        "eslint-plugin-deprecate": "0.8.5",
+        "eslint-plugin-deprecate": "0.8.7",
         "eslint-plugin-import": "^2.25.4",
-        "eslint-plugin-jest": "^28.0.0",
+        "eslint-plugin-jest": "^29.0.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-matrix-org": "^2.0.2",
+        "eslint-plugin-matrix-org": "^3.0.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
-        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-hooks": "^7.0.0",
         "eslint-plugin-unicorn": "^56.0.0",
         "express": "^5.0.0",
         "fake-indexeddb": "^6.0.0",
@@ -287,6 +289,7 @@
         "rimraf": "^6.0.0",
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
+        "storybook": "^9.1.10",
         "stylelint": "^16.23.0",
         "stylelint-config-standard": "^39.0.0",
         "stylelint-scss": "^6.0.0",

packages/shared-components/.eslintrc.js

@@ -1,4 +1,12 @@
+/*
+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.
+*/
+
 module.exports = {
+    root: true,
     plugins: ["matrix-org", "eslint-plugin-react-compiler"],
     extends: [
         "plugin:matrix-org/babel",

packages/shared-components/.prettierignore

@@ -1 +1,2 @@
 dist/
+i18n/i18nKeys.d.ts

packages/shared-components/babel.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    sourceMaps: true,
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                include: ["@babel/plugin-transform-class-properties"],
+            },
+        ],
+        ["@babel/preset-typescript", { allowDeclareFields: true }],
+        "@babel/preset-react",
+    ],
+    plugins: [
+        "@babel/plugin-proposal-export-default-from",
+        "@babel/plugin-transform-numeric-separator",
+        "@babel/plugin-transform-object-rest-spread",
+        "@babel/plugin-transform-optional-chaining",
+        "@babel/plugin-transform-nullish-coalescing-operator",
+        "@babel/plugin-transform-runtime",
+    ],
+};

packages/shared-components/jest.config.ts

@@ -0,0 +1,58 @@
+/*
+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 { env } from "process";
+
+import type { Config } from "jest";
+
+const config: Config = {
+    testEnvironment: "jsdom",
+    testEnvironmentOptions: {
+        url: "http://localhost/",
+    },
+    testMatch: ["<rootDir>/src/**/*.test.[tj]s?(x)"],
+    setupFilesAfterEnv: ["<rootDir>/src/test/setupTests.ts"],
+    moduleNameMapper: {
+        // Support CSS module
+        "\\.(module.css)$": "identity-obj-proxy",
+        "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
+        "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
+        "\\.svg$": "<rootDir>/__mocks__/svg.js",
+        "\\$webapp/i18n/languages.json": "<rootDir>/../../__mocks__/languages.json",
+        "^react$": "<rootDir>/node_modules/react",
+        "^react-dom$": "<rootDir>/node_modules/react-dom",
+        "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
+        "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
+        "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
+    },
+    transformIgnorePatterns: [
+        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
+    ],
+    collectCoverageFrom: [
+        "<rootDir>/src/**/*.{js,ts,tsx}",
+        "<rootDir>/packages/**/*.{js,ts,tsx}",
+        // Coverage chokes on type definition files
+        "!<rootDir>/src/**/*.d.ts",
+    ],
+    coverageReporters: ["text-summary", "lcov"],
+    testResultsProcessor: "@casualbot/jest-sonar-reporter",
+    prettierPath: null,
+    moduleDirectories: ["node_modules", "./src/test/utils"],
+};
+
+// if we're running under GHA, enable the GHA reporter
+if (env["GITHUB_ACTIONS"] !== undefined) {
+    const reporters: Config["reporters"] = [["github-actions", { silent: false }], "summary"];
+
+    // if we're running against the develop branch, also enable the slow test reporter
+    if (env["GITHUB_REF"] == "refs/heads/develop") {
+        reporters.push("<rootDir>/../../test/slowReporter.cjs");
+    }
+    config.reporters = reporters;
+}
+
+export default config;

packages/shared-components/package.json

@@ -1,22 +1,41 @@
 {
-    "name": "element-web-shared-components",
-    "version": "1.12.1",
+    "name": "@element-hq/web-shared-components",
+    "version": "0.0.0-test.7",
     "description": "Shared components for Element",
     "author": "New Vector Ltd.",
     "repository": {
         "type": "git",
         "url": "https://github.com/element-hq/element-web"
     },
-    "license": "SEE LICENSE IN README.md",
+    "exports": {
+        ".": {
+            "require": {
+                "style": "./dist/element-web-shared-components.css",
+                "types": "./dist/element-web-shared-components.d.ts",
+                "default": "./dist/element-web-shared-components.umd.js"
+            },
+            "import": {
+                "style": "./dist/element-web-shared-components.css",
+                "types": "./dist/element-web-shared-components.d.ts",
+                "default": "./dist/element-web-shared-components.mjs"
+            }
+        },
+        "./dist/element-web-shared-components.css": {
+            "require": "./dist/element-web-shared-components.css",
+            "import": "./dist/element-web-shared-components.css"
+        }
+    },
+    "types": "dist/element-web-shared-components.d.ts",
     "files": [
-        "lib",
+        "dist",
         "src",
         "LICENSE",
         "README.md",
         "package.json"
     ],
     "scripts": {
-        "postinstall": "patch-package",
+        "test": "jest",
+        "prepare": "patch-package && yarn --cwd ../.. build:res && ts-node scripts/gatherTranslationKeys.ts && vite build",
         "storybook": "storybook dev -p 6007",
         "build-storybook": "storybook build",
         "lint": "yarn lint:types && yarn lint:js",
@@ -24,29 +43,52 @@
         "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 yarn --with-node-modules && 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/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
+    },
+    "dependencies": {
+        "classnames": "^2.5.1",
+        "counterpart": "^0.18.6",
+        "lodash": "^4.17.21",
+        "matrix-web-i18n": "^3.4.0",
+        "patch-package": "^8.0.1",
+        "react-merge-refs": "^3.0.2",
+        "temporal-polyfill": "^0.3.0"
     },
-    "dependencies": {},
     "devDependencies": {
+        "@element-hq/element-web-playwright-common": "^2.0.0",
+        "@playwright/test": "^1.50.1",
         "@storybook/addon-a11y": "^9.1.10",
         "@storybook/addon-designs": "^10.0.2",
         "@storybook/addon-docs": "^9.1.10",
         "@storybook/icons": "^1.6.0",
         "@storybook/react-vite": "^9.1.10",
         "@storybook/test-runner": "^0.23.0",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.0",
+        "@types/counterpart": "^0.18.4",
+        "@types/lodash": "^4.17.20",
+        "@types/react": "^19.2.2",
         "concurrently": "^9.2.1",
         "eslint": "8",
-        "eslint-plugin-storybook": "^9.1.10",
+        "eslint-plugin-matrix-org": "^3.0.0",
+        "eslint-plugin-storybook": "^10.0.0",
+        "jest": "^30.2.0",
         "jest-image-snapshot": "^6.5.1",
         "patch-package": "^8.0.1",
         "prettier": "^3.6.2",
         "storybook": "^9.1.10",
+        "ts-node": "^10.9.2",
         "typescript": "^5.9.3",
         "vite": "^7.1.9",
+        "vite-plugin-dts": "^4.5.4",
         "vite-plugin-node-polyfills": "^0.24.0"
     },
     "engines": {
         "node": ">=20.0.0"
     },
-    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+    "peerDependencies": {
+        "@vector-im/compound-design-tokens": "^6.0.0",
+        "@vector-im/compound-web": "^8.2.5"
+    }
 }

packages/shared-components/scripts/gatherTranslationKeys.ts

@@ -0,0 +1,61 @@
+/*
+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.
+*/
+
+// Gathers all the translation keys from element-web's en_EN.json into a TypeScript type definition file
+// that exports a type `TranslationKey` which is a union of all supported translation keys.
+// This prevents having to import the json file and make typescript do the work as this results in vite-dts
+// generating an import to the json file in the .d.ts which doesn't work at runtime: this way, the type
+// gets put into the bundle.
+// XXX: It should *not* be in the 'src' directory, being a generated file, but if it isn't then the type
+// bundler won't bundle the types and will leave the file as a relative import, which will break.
+
+import * as fs from "fs";
+import * as path from "path";
+
+const i18nStringsPath = path.resolve(__dirname, "../../../src/i18n/strings/en_EN.json");
+const outPath = path.resolve(__dirname, "../src/i18nKeys.d.ts");
+
+function gatherKeys(obj: any, prefix: string[] = []): string[] {
+    if (typeof obj !== "object" || obj === null) return [];
+    let keys: string[] = [];
+    for (const key of Object.keys(obj)) {
+        const value = obj[key];
+
+        // add the path (for both leaves and intermediates as then we include plurals)
+        keys.push([...prefix, key].join("|"));
+        if (typeof value === "object" && value !== null) {
+            // If the value is an object, recurse
+            keys = keys.concat(gatherKeys(value, [...prefix, key]));
+        }
+    }
+    return keys;
+}
+
+function main() {
+    const json = JSON.parse(fs.readFileSync(i18nStringsPath, "utf8"));
+    const keys = gatherKeys(json);
+    const typeDef =
+        "/*\n" +
+        " * Copyright 2025 Element Creations Ltd.\n" +
+        " *\n" +
+        " * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial\n" +
+        " * Please see LICENSE files in the repository root for full details.\n" +
+        " */\n" +
+        "\n" +
+        "// This file is auto-generated by gatherTranslationKeys.ts\n" +
+        "// Do not edit manually.\n\n" +
+        "export type TranslationKey =\n" +
+        keys.map((k) => `    | \"${k}\"`).join("\n") +
+        ";\n";
+    fs.mkdirSync(path.dirname(outPath), { recursive: true });
+    fs.writeFileSync(outPath, typeDef, "utf8");
+    console.log(`Wrote ${keys.length} keys to ${outPath}`);
+}
+
+if (require.main === module) {
+    main();
+}

packages/shared-components/src/ViewWrapper.tsx

@@ -1,52 +0,0 @@
-/*
- * Copyright 2025 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import React, { type JSX, useMemo, type ComponentType } from "react";
-import { omitBy, pickBy } from "lodash";
-
-import { MockViewModel } from "./MockViewModel";
-import { type ViewModel } from "./ViewModel";
-
-interface ViewWrapperProps<V> {
-    /**
-     * The component to render, which should accept a `vm` prop of type `V`.
-     */
-    Component: ComponentType<{ vm: V }>;
-    /**
-     * The props to pass to the component, which can include both snapshot data and actions.
-     */
-    props: Record<string, any>;
-}
-
-/**
- * A wrapper component that creates a view model instance and passes it to the specified component.
- * This is useful for testing components in isolation with a mocked view model and allows to use primitive types in stories.
- *
- * Props is parsed and split into snapshot and actions. Where values that are functions (`typeof Function`) are considered actions and the rest is considered the snapshot.
- *
- * @example
- * ```tsx
- * <ViewWrapper<SnapshotType, ViewModelType> props={Snapshot&Actions} Component={MyComponent} />
- * ```
- */
-export function ViewWrapper<T, V extends ViewModel<T>>({
-    props,
-    Component,
-}: Readonly<ViewWrapperProps<V>>): JSX.Element {
-    const vm = useMemo(() => {
-        const isFunction = (value: any): value is typeof Function => typeof value === typeof Function;
-        const snapshot = omitBy(props, isFunction) as T;
-        const actions = pickBy(props, isFunction);
-
-        const vm = new MockViewModel<T>(snapshot);
-        Object.assign(vm, actions);
-
-        return vm as unknown as V;
-    }, [props]);
-
-    return <Component vm={vm} />;
-}

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.module.css

@@ -6,7 +6,7 @@
  */
 
 .audioPlayer {
-    padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x);
+    padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) !important;
 }
 
 .mediaInfo {

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

@@ -9,18 +9,18 @@ import React, { type JSX } from "react";
 import { fn } from "storybook/test";
 
 import type { Meta, StoryFn } from "@storybook/react-vite";
-import {
-    AudioPlayerView,
-    type AudioPlayerViewActions,
-    type AudioPlayerViewSnapshot,
-    type AudioPlayerViewModel,
-} from "./AudioPlayerView";
-import { ViewWrapper } from "../../ViewWrapper";
+import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
+import { useMockedViewModel } from "../../useMockedViewModel";
 
 type AudioPlayerProps = AudioPlayerViewSnapshot & AudioPlayerViewActions;
-const AudioPlayerViewWrapper = (props: AudioPlayerProps): JSX.Element => (
-    <ViewWrapper<AudioPlayerViewSnapshot, AudioPlayerViewModel> Component={AudioPlayerView} props={props} />
-);
+const AudioPlayerViewWrapper = ({ togglePlay, onKeyDown, onSeekbarChange, ...rest }: AudioPlayerProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        togglePlay,
+        onKeyDown,
+        onSeekbarChange,
+    });
+    return <AudioPlayerView vm={vm} />;
+};
 
 export default {
     title: "Audio/AudioPlayerView",

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

@@ -13,7 +13,7 @@ import { fireEvent } from "@testing-library/dom";
 
 import * as stories from "./AudioPlayerView.stories.tsx";
 import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
-import { MockViewModel } from "../../MockViewModel";
+import { MockViewModel } from "../../viewmodel/MockViewModel.ts";
 
 const { Default, NoMediaName, NoSize, HasError } = composeStories(stories);
 

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

@@ -7,7 +7,7 @@
 
 import React, { type ChangeEventHandler, type JSX, type KeyboardEventHandler, type MouseEventHandler } from "react";
 
-import { type ViewModel } from "../../ViewModel";
+import { type ViewModel } from "../../viewmodel/ViewModel";
 import { useViewModel } from "../../useViewModel";
 import { MediaBody } from "../../message-body/MediaBody";
 import { Flex } from "../../utils/Flex";

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AudioPlayerView renders the audio player in default state 1`] = `
 <div>
@@ -15,7 +15,7 @@ exports[`AudioPlayerView renders the audio player in default state 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="_icon-button_1pz9o_8 button"
         data-kind="primary"
         role="button"
@@ -106,7 +106,7 @@ exports[`AudioPlayerView renders the audio player in error state 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="«ri»"
+        aria-labelledby="_r_i_"
         class="_icon-button_1pz9o_8 button"
         data-kind="primary"
         role="button"
@@ -202,7 +202,7 @@ exports[`AudioPlayerView renders the audio player without media name 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="«r6»"
+        aria-labelledby="_r_6_"
         class="_icon-button_1pz9o_8 button"
         data-kind="primary"
         role="button"
@@ -293,7 +293,7 @@ exports[`AudioPlayerView renders the audio player without size 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="«rc»"
+        aria-labelledby="_r_c_"
         class="_icon-button_1pz9o_8 button"
         data-kind="primary"
         role="button"

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Clock renders the clock 1`] = `
 <div>

packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css

@@ -6,6 +6,6 @@
  */
 
 .button {
-    border-radius: 32px;
-    background-color: var(--cpd-color-bg-subtle-primary);
+    border-radius: 32px !important;
+    background-color: var(--cpd-color-bg-subtle-primary) !important;
 }

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

@@ -1,11 +1,11 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PlayPauseButton renders the button in default state 1`] = `
 <div>
   <button
     aria-disabled="false"
     aria-label="Play"
-    aria-labelledby="«r0»"
+    aria-labelledby="_r_0_"
     class="_icon-button_1pz9o_8 button"
     data-kind="primary"
     role="button"
@@ -37,7 +37,7 @@ exports[`PlayPauseButton renders the button in playing state 1`] = `
   <button
     aria-disabled="false"
     aria-label="Pause"
-    aria-labelledby="«r6»"
+    aria-labelledby="_r_6_"
     class="_icon-button_1pz9o_8 button"
     data-kind="primary"
     role="button"

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Seekbar renders the clock 1`] = `
 <div>

packages/shared-components/src/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarWithDetails renders a textual event 1`] = `
 <div>

packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.stories.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { type Meta, type StoryFn } from "@storybook/react-vite";
 
 import { TextualEventView as TextualEventComponent } from "./TextualEventView";
-import { MockViewModel } from "../../MockViewModel";
+import { MockViewModel } from "../../viewmodel/MockViewModel";
 
 export default {
     title: "Event/TextualEvent",

packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ReactNode, type JSX } from "react";
 
-import { type ViewModel } from "../../ViewModel";
+import { type ViewModel } from "../../viewmodel/ViewModel";
 import { useViewModel } from "../../useViewModel";
 
 export type TextualEventViewSnapshot = {

packages/shared-components/src/event-tiles/TextualEventView/__snapshots__/TextualEventView.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextualEventView renders a textual event 1`] = `
 <div>

packages/shared-components/src/event-tiles/TextualEventView/index.ts

@@ -5,4 +5,4 @@ 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.
 */
 
-export { TextualEventView } from "./TextualEventView";
+export { TextualEventView, type TextualEventViewSnapshot } from "./TextualEventView";

packages/shared-components/src/index.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+// Components
+export * from "./audio/AudioPlayerView";
+export * from "./audio/Clock";
+export * from "./audio/PlayPauseButton";
+export * from "./audio/SeekBar";
+export * from "./avatar/AvatarWithDetails";
+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 "./utils/Box";
+export * from "./utils/Flex";
+
+// Utils
+export * from "./utils/i18n";
+export * from "./utils/humanize";
+export * from "./utils/DateUtils";
+export * from "./utils/numbers";
+export * from "./utils/FormattingUtils";
+
+// MVVM
+export * from "./viewmodel";
+export * from "./useMockedViewModel";
+export * from "./useViewModel";
+
+// i18n (we must export this directly in order to not confuse the type bundler, it seems,
+// otherwise it will leave it as a relative import rather than bundling it)
+export type * from "./i18nKeys.d.ts";

packages/shared-components/src/message-body/MediaBody/MediaBody.module.css

@@ -7,7 +7,7 @@
 
 .mediaBody {
     background-color: var(--cpd-color-bg-subtle-secondary);
-    border-radius: var(--cpd-space-2x);
+    border-radius: var(--cpd-space-2x) !important;
     max-width: 243px; /* use max-width instead of width so it fits within right panels */
 
     font: var(--cpd-font-body-md-regular);

packages/shared-components/src/message-body/MediaBody/__snapshots__/MediaBody.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MediaBody renders the media body 1`] = `
 <div>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Pill renders the pill 1`] = `
 <div>
@@ -11,12 +11,12 @@ exports[`Pill renders the pill 1`] = `
     />
     <span
       class="label"
-      id="«r0»"
+      id="_r_0_"
     >
       Pill
     </span>
     <button
-      aria-describedby="«r0»"
+      aria-describedby="_r_0_"
       aria-label="Delete"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
@@ -57,7 +57,7 @@ exports[`Pill renders the pill without close button 1`] = `
     />
     <span
       class="label"
-      id="«r1»"
+      id="_r_1_"
     >
       Pill
     </span>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PillInput renders only the input without children 1`] = `
 <div>

packages/shared-components/src/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RichItem renders the item in default state 1`] = `
 <div>

packages/shared-components/src/rich-list/RichList/__snapshots__/RichList.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RichItem renders the list 1`] = `
 <div>
@@ -11,12 +11,12 @@ exports[`RichItem renders the list 1`] = `
     >
       <span
         class="title"
-        id="«r0»"
+        id="_r_0_"
       >
         Rich List Title
       </span>
       <ul
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="content"
         role="listbox"
         tabindex="0"
@@ -174,7 +174,7 @@ exports[`RichItem renders the list with isEmpty=true 1`] = `
     >
       <span
         class="title"
-        id="«r1»"
+        id="_r_1_"
       >
         Rich List Title
       </span>

packages/shared-components/src/test/setupTests.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 fetchMock from "fetch-mock-jest";
+
+import { setLanguage } from "../../src/utils/i18n";
+import en from "../../../../src/i18n/strings/en_EN.json";
+
+export function setupLanguageMock(): void {
+    fetchMock
+        .get("/i18n/languages.json", {
+            en: "en_EN.json",
+        })
+        .get("end:en_EN.json", en);
+}
+setupLanguageMock();
+
+setLanguage("en");

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

@@ -0,0 +1,47 @@
+/*
+Copyright 2025 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// Copied from element-web/test/test-utils because, seemingly, if we
+// set that as the modules directory to use it directly, it fails to
+// actually put the right thing in the context somehow.
+
+import React, { type ReactElement } from "react";
+// eslint-disable-next-line no-restricted-imports
+import { render, type RenderOptions } from "@testing-library/react";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"]) => {
+    return ({ children }: { children: React.ReactNode }) => {
+        if (Wrapper) {
+            return (
+                <Wrapper>
+                    <TooltipProvider>{children}</TooltipProvider>
+                </Wrapper>
+            );
+        } else {
+            return <TooltipProvider>{children}</TooltipProvider>;
+        }
+    };
+};
+
+const customRender = (ui: ReactElement, options: RenderOptions = {}): ReturnType<typeof render> => {
+    return render(ui, {
+        ...options,
+        wrapper: wrapWithTooltipProvider(options?.wrapper) as RenderOptions["wrapper"],
+    }) as ReturnType<typeof render>;
+};
+
+// eslint-disable-next-line no-restricted-imports
+export * from "@testing-library/react";
+
+/**
+ * This custom render function wraps your component with a TooltipProvider.
+ * See https://testing-library.com/docs/react-testing-library/setup/#custom-render
+ */
+export { customRender as render };

packages/shared-components/src/useMockedViewModel.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 { useMemo } from "react";
+
+import { MockViewModel, type ViewModel } from "./viewmodel";
+
+/**
+ * Hook helper to return a mocked view model created with the given snapshot and actions.
+ * This is useful for testing components in isolation with a mocked view model and allows to use primitive types in stories.
+ *
+ * @param snapshot
+ * @param actions
+ */
+export function useMockedViewModel<S, A>(snapshot: S, actions: A): ViewModel<S> & A {
+    return useMemo(() => {
+        const vm = new MockViewModel<S>(snapshot);
+        Object.assign(vm, actions);
+        return vm as unknown as ViewModel<S> & A;
+    }, [snapshot, actions]);
+}

packages/shared-components/src/useViewModel.ts

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { useSyncExternalStore } from "react";
 
-import { type ViewModel } from "./ViewModel";
+import { type ViewModel } from "./viewmodel/ViewModel";
 
 /**
  * A small wrapper around useSyncExternalStore to use a view model in a shared component view

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

@@ -0,0 +1,46 @@
+/*
+ * 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 counterpart from "counterpart";
+
+import { registerTranslations, setMissingEntryGenerator, getLocale, setLocale } from "./i18n";
+
+describe("i18n utils", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("should wrap registerTranslations", () => {
+        jest.spyOn(counterpart, "registerTranslations");
+
+        registerTranslations("en", { test: "This is a test" });
+        expect(counterpart.registerTranslations).toHaveBeenCalledWith("en", { test: "This is a test" });
+    });
+
+    it("should wrap setMissingEntryGenerator", () => {
+        jest.spyOn(counterpart, "setMissingEntryGenerator");
+
+        const dummyFn = jest.fn();
+
+        setMissingEntryGenerator(dummyFn);
+        expect(counterpart.setMissingEntryGenerator).toHaveBeenCalledWith(dummyFn);
+    });
+
+    it("should wrap getLocale", () => {
+        jest.spyOn(counterpart, "getLocale");
+
+        getLocale();
+        expect(counterpart.getLocale).toHaveBeenCalled();
+    });
+
+    it("should wrap setLocale", () => {
+        jest.spyOn(counterpart, "setLocale");
+
+        setLocale("en");
+        expect(counterpart.setLocale).toHaveBeenCalledWith("en");
+    });
+});

packages/shared-components/src/utils/i18n.tsx

@@ -22,10 +22,10 @@
  * @return a React <span> component if any non-strings were used in substitutions, otherwise a string
  */
 import React from "react";
-import { type TranslationKey as _TranslationKey, KEY_SEPARATOR } from "matrix-web-i18n";
+import { KEY_SEPARATOR } from "matrix-web-i18n";
 import counterpart from "counterpart";
 
-import type Translations from "../../../../src/i18n/strings/en_EN.json";
+import type { TranslationKey } from "../index";
 
 // @ts-ignore - $webapp is a webpack resolve alias pointing to the output directory, see webpack config
 import webpackLangJsonUrl from "$webapp/i18n/languages.json";
@@ -45,16 +45,23 @@ counterpart.setSeparator(KEY_SEPARATOR);
 const FALLBACK_LOCALE = "en";
 counterpart.setFallbackLocale(FALLBACK_LOCALE);
 
-/**
- * A type representing the union of possible keys into the translation file using `|` delimiter to access nested fields.
- * @example `common|error` to access `error` within the `common` sub-object.
- * {
- *     "common": {
- *         "error": "Error"
- *     }
- * }
- */
-export type TranslationKey = _TranslationKey<typeof Translations>;
+// export wrappers around these functions because if we used counterpart directly from
+// element-web, it operates on a different instance of counterpart
+export function registerTranslations(locale: string, data: object): void {
+    counterpart.registerTranslations(locale, data);
+}
+
+export function setMissingEntryGenerator(callback: (value: string) => void): void {
+    counterpart.setMissingEntryGenerator(callback);
+}
+
+export function getLocale(): string {
+    return counterpart.getLocale();
+}
+
+export function setLocale(value: string): string {
+    return counterpart.setLocale(value);
+}
 
 // Function which only purpose is to mark that a string is translatable
 // Does not actually do anything. It's helpful for automatic extraction of translatable strings

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

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type ViewModel } from "../../../packages/shared-components/src/ViewModel";
+import { type ViewModel } from "./ViewModel";
 import { Disposables } from "./Disposables";
 import { Snapshot } from "./Snapshot";
 import { ViewModelSubscriptions } from "./ViewModelSubscriptions";

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

@@ -0,0 +1,13 @@
+/*
+ * 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 * from "./BaseViewModel";
+export * from "./Disposables";
+export * from "./Snapshot";
+export * from "./ViewModelSubscriptions";
+export type * from "./ViewModel";
+export * from "./MockViewModel";

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

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { EventEmitter } from "events";
 
-import { Disposables } from "../../../src/viewmodels/base/Disposables";
+import { Disposables } from "..";
 
 describe("Disposable", () => {
     it("isDisposed is true after dispose() is called", () => {

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

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { Snapshot } from "../../../src/viewmodels/base/Snapshot";
+import { Snapshot } from "..";
 
 interface TestSnapshot {
     key1: string;

packages/shared-components/tsconfig.json

@@ -17,7 +17,7 @@
         "lib": ["es2022", "es2024.promise", "dom", "dom.iterable"],
         "strict": true,
         "paths": {
-            "jest-matrix-react": ["../../test/test-utils/jest-matrix-react"],
+            "jest-matrix-react": ["./src/test/utils/jest-matrix-react"],
             "rollup/parseAst": ["./node_modules/rollup/dist/parseAst"]
         }
     },

packages/shared-components/vite.config.js

@@ -0,0 +1,54 @@
+/*
+ *
+ * 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 { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+    build: {
+        lib: {
+            entry: resolve(__dirname, "src/index.ts"),
+            name: "Element Web Shared Components",
+            // the proper extensions will be added
+            fileName: "element-web-shared-components",
+        },
+        outDir: "dist",
+        rollupOptions: {
+            // make sure to externalize deps that shouldn't be bundled
+            // into your library
+            external: ["react", "react-dom", "@vector-im/compound-design-tokens", "@vector-im/compound-web"],
+            output: {
+                // Provide global variables to use in the UMD build
+                // for externalized deps
+                globals: {
+                    "react": "react",
+                    "react-dom": "ReactDom",
+                },
+            },
+        },
+    },
+    resolve: {
+        alias: {
+            // Alias used by i18n.tsx
+            $webapp: resolve(__dirname, "..", "..", "webapp"),
+        },
+    },
+    plugins: [
+        dts({
+            rollupTypes: true,
+            include: ["src/**/*.{ts,tsx}"],
+            exclude: ["src/**/*.test.{ts,tsx}"],
+            copyDtsFiles: true,
+        }),
+    ],
+});

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

@@ -92,7 +92,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             css: `
                 /* The timestamp is of inconsistent width depending on the time the test runs at */
                 .mx_MessageTimestamp {
-                    display: none !important;
+                    visibility: hidden;
                 }
                 /* The MAB showing up on hover is not needed for the test */
                 .mx_MessageActionBar {

playwright/e2e/chat-export/html-export.spec.ts

@@ -124,11 +124,12 @@ test.describe("HTML Export", () => {
             const zip = await extractZipFileToPath(zipPath, dirPath);
             await page.goto(`file://${dirPath}/${Object.keys(zip.files)[0]}/messages.html`);
             await expect(page).toMatchScreenshot("html-export.png", {
-                mask: [
-                    // We need to mask the whole thing because the width of the time part changes
-                    page.locator(".mx_TimelineSeparator"),
-                    page.locator(".mx_MessageTimestamp"),
-                ],
+                mask: [page.locator(".mx_TimelineSeparator")],
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
             });
         },
     );

playwright/e2e/composer/CIDER.spec.ts

@@ -76,6 +76,57 @@ test.describe("Composer", () => {
             await expect(page.locator(".mx_EventTile_body", { hasText: "😇" })).toBeVisible();
         });
 
+        test.describe("render emoji picker with larger viewport height", async () => {
+            test.use({ viewport: { width: 1280, height: 720 } });
+            test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
+                await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
+                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker.png");
+            });
+        });
+
+        test.describe("render emoji picker with small viewport height", async () => {
+            test.use({ viewport: { width: 1280, height: 360 } });
+            test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
+                await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
+                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker-small.png");
+            });
+        });
+
+        test("should have focus lock in emoji picker", async ({ page, app }) => {
+            const emojiButton = app.getComposer(false).getByRole("button", { name: "Emoji" });
+
+            // Open emoji picker by clicking the button
+            await emojiButton.click();
+
+            // Wait for emoji picker to be visible
+            const emojiPicker = page.getByTestId("mx_EmojiPicker");
+            await expect(emojiPicker).toBeVisible();
+
+            // Get initial focused element (should be search input)
+            const searchInput = emojiPicker.getByRole("textbox", { name: "Search" });
+            await expect(searchInput).toBeFocused();
+
+            // Try to tab multiple times - focus should stay within emoji picker
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+
+            // Verify we're still within the emoji picker (not back to composer)
+            const focusedElement = await page.evaluate(() => document.activeElement?.closest(".mx_EmojiPicker"));
+            expect(focusedElement).not.toBeNull();
+
+            // Close with Escape key
+            await page.keyboard.press("Escape");
+
+            // Verify emoji picker is closed
+            await expect(emojiPicker).not.toBeVisible();
+
+            // Verify focus returns to emoji button
+            await expect(emojiButton).toBeFocused();
+        });
+
         test.describe("when Control+Enter is required to send", () => {
             test.beforeEach(async ({ app }) => {
                 await app.settings.setValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true);

playwright/e2e/crypto/history-sharing.spec.ts

@@ -56,4 +56,85 @@ test.describe("History sharing", function () {
             });
         },
     );
+
+    test("Messages sent when we believed the room history was unshared should not be visible", async ({
+        labsFlags,
+        browser,
+        page: alicePage,
+        user: aliceCredentials,
+        app: aliceElementApp,
+        homeserver,
+    }, testInfo) => {
+        test.setTimeout(60000);
+
+        // In this test:
+        //   1. Alice creates an encrypted room with Bob.
+        //   2. She sets the history visibility to "shared", but Bob doesn't receive the memo
+        //   3. Bob sends a message
+        //   4. Alice invites Charlie
+        //   5. Charlie can't see the message.
+
+        await aliceElementApp.client.bootstrapCrossSigning(aliceCredentials);
+        await createRoom(alicePage, "TestRoom", true);
+
+        // Register a second user, and open it in a second instance of the app
+        const bobCredentials = await homeserver.registerUser(`user_${testInfo.testId}_bob`, "password", "Bob");
+        const bobPage = await createNewInstance(browser, bobCredentials, {}, labsFlags);
+        const bobElementApp = new ElementAppPage(bobPage);
+        await bobElementApp.client.bootstrapCrossSigning(bobCredentials);
+
+        // ... and a third
+        const charlieCredentials = await homeserver.registerUser(
+            `user_${testInfo.testId}_charlie`,
+            "password",
+            "Charlie",
+        );
+        const charliePage = await createNewInstance(browser, charlieCredentials, {}, labsFlags);
+        const charlieElementApp = new ElementAppPage(charliePage);
+        await charlieElementApp.client.bootstrapCrossSigning(charlieCredentials);
+
+        // Alice invites Bob, and Bob accepts
+        const roomId = await aliceElementApp.getCurrentRoomIdFromUrl();
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await bobPage.getByRole("option", { name: "TestRoom" }).click();
+        await bobPage.getByRole("button", { name: "Accept" }).click();
+
+        // Bob sends a message with "shared" visibility
+        await sendMessageInCurrentRoom(bobPage, "Message1: 'shared' visibility");
+        await expect(alicePage.getByText("Message1")).toBeVisible();
+
+        // Alice sets the history visibility to "joined"
+        await aliceElementApp.client.sendStateEvent(roomId, "m.room.history_visibility", {
+            history_visibility: "joined",
+        });
+        await expect(
+            bobPage.getByText(
+                "Alice made future room history visible to all room members, from the point they joined.",
+            ),
+        ).toBeVisible();
+
+        // Bob stops syncing, and sends a message with "joined" visibility.
+        // (Stopping syncing *before* sending the message means that the active sync will be flushed by sending the
+        // message, so that Alice's change to the history viz below won't be seen by Bob.)
+        await bobPage.route(`**/sync*`, (route) => route.fulfill({}));
+        await sendMessageInCurrentRoom(bobPage, "Message2: 'joined' visibility");
+        await expect(alicePage.getByText("Message2")).toBeVisible();
+
+        // Alice changes the history viz, but Bob doesn't receive the memo
+        await aliceElementApp.client.sendStateEvent(roomId, "m.room.history_visibility", {
+            history_visibility: "shared",
+        });
+        await sendMessageInCurrentRoom(bobPage, "Message3: 'shared' visibility, but Bob thinks it is still 'joined'");
+
+        // Alice now invites Charlie
+        await aliceElementApp.inviteUserToCurrentRoom(charlieCredentials.userId);
+        await charliePage.getByRole("option", { name: "TestRoom" }).click();
+        await charliePage.getByRole("button", { name: "Accept" }).click();
+
+        // Message1 should be visible
+        // Message2 should be invisible
+        // Message3 should be undecryptable
+        await expect(charliePage.getByText("Message1")).toBeVisible();
+        await expect(charliePage.getByText("You don't have access to this message")).toBeVisible();
+    });
 });

playwright/e2e/editing/editing.spec.ts

@@ -138,7 +138,11 @@ test.describe("Editing", () => {
 
             // Take a snapshot of the dialog
             await expect(dialog).toMatchScreenshot("message-edit-history-dialog.png", {
-                mask: [page.locator(".mx_MessageTimestamp")],
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
             });
 
             {

playwright/e2e/location/location.spec.ts

@@ -30,33 +30,42 @@ test.describe("Location sharing", { tag: "@no-firefox" }, () => {
         });
     });
 
-    test("sends and displays pin drop location message successfully", async ({ page, user, app }) => {
-        const roomId = await app.client.createRoom({});
-        await page.goto(`/#/room/${roomId}`);
+    test(
+        "sends and displays pin drop location message successfully",
+        { tag: "@screenshot" },
+        async ({ page, user, app }) => {
+            const roomId = await app.client.createRoom({});
+            await page.goto(`/#/room/${roomId}`);
 
-        const composerOptions = await app.openMessageComposerOptions();
-        await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click();
+            const composerOptions = await app.openMessageComposerOptions();
+            await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click();
 
-        await selectLocationShareTypeOption(page, "Pin").click();
+            await selectLocationShareTypeOption(page, "Pin").click();
 
-        await page.locator("#mx_LocationPicker_map").click();
+            await page.locator("#mx_LocationPicker_map").click();
 
-        await submitShareLocation(page);
+            await submitShareLocation(page);
 
-        await page.locator(".mx_RoomView_body .mx_EventTile .mx_MLocationBody").click({
-            position: {
-                x: 225,
-                y: 150,
-            },
-        });
+            await page.locator(".mx_RoomView_body .mx_EventTile .mx_MLocationBody").click({
+                position: {
+                    x: 225,
+                    y: 150,
+                },
+            });
 
-        // clicking location tile opens maximised map
-        await expect(page.getByRole("dialog")).toBeVisible();
+            // Wait for map to load
+            await expect(page.getByRole("region", { name: "Map" })).toMatchScreenshot(
+                "location-pin-drop-message-map.png",
+            );
 
-        await app.closeDialog();
+            // clicking location tile opens maximised map
+            await expect(page.getByRole("dialog")).toBeVisible();
 
-        await expect(page.locator(".mx_Marker")).toBeVisible();
-    });
+            await app.closeDialog();
+
+            await expect(page.locator(".mx_Marker")).toBeVisible();
+        },
+    );
 
     test(
         "is prompted for and can consent to live location sharing",

playwright/e2e/messages/messages.spec.ts

@@ -59,9 +59,11 @@ async function editMessage(page: Page, message: Locator, newMsg: string): Promis
 }
 
 const screenshotOptions = (page?: Page) => ({
-    mask: page ? [page.locator(".mx_MessageTimestamp")] : undefined,
     // Hide the jump to bottom button in the timeline to avoid flakiness
     css: `
+        .mx_MessageTimestamp {
+            visibility: hidden;
+        }
         .mx_JumpToBottomButton {
             display: none !important;
         }

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

@@ -11,10 +11,12 @@ import fs from "node:fs";
 import { test, expect } from "../../element-web-test";
 
 const screenshotOptions = (page: Page) => ({
-    mask: [page.locator(".mx_MessageTimestamp")],
     // Hide the jump to bottom button in the timeline to avoid flakiness
     // Exclude timestamp and read marker from snapshot
     css: `
+        .mx_MessageTimestamp {
+            visibility: hidden;
+        }
         .mx_JumpToBottomButton {
             display: none !important;
         }

playwright/e2e/permalinks/permalinks.spec.ts

@@ -93,10 +93,12 @@ test.describe("permalinks", () => {
         getPill(timeline, danielleId);
 
         await expect(timeline).toMatchScreenshot("permalink-rendering.png", {
-            mask: [
-                // Exclude timestamps from the snapshot, for consistency.
-                page.locator(".mx_MessageTimestamp"),
-            ],
+            // Exclude timestamps from the snapshot, for consistency.
+            css: `
+                .mx_MessageTimestamp {
+                    visibility: hidden;
+                }
+            `,
         });
     });
 });

playwright/e2e/polls/polls.spec.ts

@@ -121,7 +121,11 @@ test.describe("Polls", () => {
             .filter({ hasText: pollParams.title })
             .getAttribute("data-scroll-tokens");
         await expect(getPollTile(page, pollId)).toMatchScreenshot("Polls_Timeline_tile_no_votes.png", {
-            mask: [page.locator(".mx_MessageTimestamp")],
+            css: `
+                .mx_MessageTimestamp {
+                    visibility: hidden;
+                }
+            `,
         });
 
         // Bot votes 'Maybe' in the poll
@@ -293,7 +297,11 @@ test.describe("Polls", () => {
             await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
                 "ThreadView_with_a_poll_on_bubble_layout.png",
                 {
-                    mask: [page.locator(".mx_MessageTimestamp")],
+                    css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                    `,
                 },
             );
 
@@ -303,7 +311,11 @@ test.describe("Polls", () => {
             await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
                 "ThreadView_with_a_poll_on_group_layout.png",
                 {
-                    mask: [page.locator(".mx_MessageTimestamp")],
+                    css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                    `,
                 },
             );
 

playwright/e2e/right-panel/file-panel.spec.ts

@@ -126,7 +126,12 @@ test.describe("FilePanel", () => {
             // Take a snapshot of file tiles list on FilePanel
             await expect(filePanelMessageList).toMatchScreenshot("file-tiles-list.png", {
                 // Exclude timestamps & flaky seek bar from snapshot
-                mask: [page.locator(".mx_MessageTimestamp"), page.getByTestId("audio-player-seek")],
+                mask: [page.getByTestId("audio-player-seek")],
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
             });
         });
 

playwright/e2e/settings/preferences-user-settings-tab.spec.ts

@@ -31,8 +31,13 @@ test.describe("Preferences user settings tab", () => {
         // Assert that the top heading is rendered
         await expect(tab.getByRole("heading", { name: "Preferences" })).toBeVisible();
         await expect(tab).toMatchScreenshot("Preferences-user-settings-tab-should-be-rendered-properly-1.png", {
-            // masked due to daylight saving time
+            // masked with fixed-width due to daylight saving time making the text content vary
             mask: [tab.locator("#mx_dropdownUserTimezone_value")],
+            css: `
+                #mx_dropdownUserTimezone_value {
+                    width: 200px;
+                }
+            `,
         });
     });
 

playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -361,7 +361,9 @@ test.describe("Sliding Sync", () => {
         await expect(page.locator(".mx_ReplyPreview")).toBeVisible();
 
         // now click on the permalink for Permalink me
-        await page.locator(".mx_EventTile").filter({ hasText: "Permalink me" }).locator("a").dispatchEvent("click");
+        const tile = page.locator(".mx_EventTile").filter({ hasText: "Permalink me" });
+        await tile.hover();
+        await tile.locator("a").dispatchEvent("click");
 
         // make sure it is now selected with the little green |
         await expect(page.locator(".mx_EventTile_selected").filter({ hasText: "Permalink me" })).toBeVisible();

playwright/e2e/threads/threads.spec.ts

@@ -39,7 +39,12 @@ test.describe("Threads", () => {
 
         const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start
         // Exclude timestamp and read marker from snapshots
-        const mask = [page.locator(".mx_MessageTimestamp"), page.locator(".mx_MessagePanel_myReadMarker")];
+        const mask = [page.locator(".mx_MessagePanel_myReadMarker")];
+        const css = `
+            .mx_MessageTimestamp {
+                visibility: hidden;
+            }
+        `;
 
         const roomViewLocator = page.locator(".mx_RoomView_body");
         // User sends message
@@ -74,13 +79,15 @@ test.describe("Threads", () => {
 
         // Take snapshots in group layout and bubble layout (IRC layout is not available on ThreadView)
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Initial_ThreadView_on_group_layout.png", {
-            mask: mask,
+            mask,
+            css,
         });
         await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
         await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']")).toHaveCount(2);
 
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Initial_ThreadView_on_bubble_layout.png", {
-            mask: mask,
+            mask,
+            css,
         });
 
         // Set the group layout
@@ -154,7 +161,8 @@ test.describe("Threads", () => {
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
             "ThreadView_with_reaction_and_a_hidden_event_on_group_layout.png",
             {
-                mask: mask,
+                mask,
+                css,
             },
         );
 
@@ -178,7 +186,8 @@ test.describe("Threads", () => {
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
             "ThreadView_with_reaction_and_a_hidden_event_on_bubble_layout.png",
             {
-                mask: mask,
+                mask,
+                css,
             },
         );
 
@@ -214,7 +223,8 @@ test.describe("Threads", () => {
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
             "ThreadView_with_redacted_messages_on_group_layout.png",
             {
-                mask: mask,
+                mask,
+                css,
             },
         );
         await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
@@ -222,7 +232,8 @@ test.describe("Threads", () => {
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
             "ThreadView_with_redacted_messages_on_bubble_layout.png",
             {
-                mask: mask,
+                mask,
+                css,
             },
         );
 
@@ -445,7 +456,7 @@ test.describe("Threads", () => {
         await expect(locator.locator(".mx_EventTile").last().getByText("Hello Mr. User")).toBeAttached();
     });
 
-    test("navigate through right panel", async ({ page, app, user }) => {
+    test("navigate through right panel", { tag: "@screenshot" }, async ({ page, app, user }) => {
         // Create room
         const roomId = await app.client.createRoom({});
         await page.goto("/#/room/" + roomId);
@@ -497,6 +508,9 @@ test.describe("Threads", () => {
         await expect(
             threadPanel.locator(".mx_EventTile_last").getByText("Hello again Mr. User in a thread"),
         ).toBeVisible();
+        await expect(threadPanel).toMatchScreenshot("thread-panel.png", {
+            css: ".mx_MessageTimestamp { visibility: hidden !important; }",
+        });
 
         const rightPanel = page.locator(".mx_RightPanel");
         // Check that the threads are listed

playwright/e2e/timeline/timeline.spec.ts

@@ -181,8 +181,10 @@ test.describe("Timeline", () => {
                 await expect(gels.getByRole("button", { name: "Collapse" })).toBeVisible();
 
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-irc-layout.png", {
-                    mask: [page.locator(".mx_MessageTimestamp")],
                     css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }
@@ -215,8 +217,10 @@ test.describe("Timeline", () => {
                 await expect(gels.getByRole("button", { name: "Collapse" })).toBeVisible();
 
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-modern-layout.png", {
-                    mask: [page.locator(".mx_MessageTimestamp")],
                     css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }
@@ -255,7 +259,11 @@ test.describe("Timeline", () => {
                 // Save snapshot of expanded generic event list summary on bubble layout
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-bubble-layout.png", {
                     // Exclude timestamp from snapshot
-                    mask: [page.locator(".mx_MessageTimestamp")],
+                    css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                    `,
                 });
 
                 // Click "collapse" link button on the first hovered info event line
@@ -271,7 +279,11 @@ test.describe("Timeline", () => {
 
                 // Save snapshot of collapsed generic event list summary on bubble layout
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("collapsed-gels-bubble-layout.png", {
-                    mask: [page.locator(".mx_MessageTimestamp")],
+                    css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                    `,
                 });
             },
         );
@@ -312,12 +324,14 @@ test.describe("Timeline", () => {
                     "event-line-inline-start-margin-irc-layout.png",
                     {
                         // Exclude timestamp and read marker from snapshot
-                        mask: [page.locator(".mx_MessageTimestamp")],
                         css: `
-                    .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
-                        display: none !important;
-                    }
-                `,
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                        .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
+                            display: none !important;
+                        }
+                    `,
                     },
                 );
                 await expect(axe).toHaveNoViolations();
@@ -409,7 +423,11 @@ test.describe("Timeline", () => {
                     "collapsed-gels-and-messages-irc-layout.png",
                     {
                         // Exclude timestamp from snapshot of mx_MainSplit
-                        mask: [page.locator(".mx_MessageTimestamp")],
+                        css: `
+                            .mx_MessageTimestamp {
+                                visibility: hidden;
+                            }
+                        `,
                     },
                 );
 
@@ -428,7 +446,11 @@ test.describe("Timeline", () => {
                     "expanded-gels-and-messages-irc-layout.png",
                     {
                         // Exclude timestamp from snapshot of mx_MainSplit
-                        mask: [page.locator(".mx_MessageTimestamp")],
+                        css: `
+                            .mx_MessageTimestamp {
+                                visibility: hidden;
+                            }
+                        `,
                     },
                 );
 
@@ -453,7 +475,11 @@ test.describe("Timeline", () => {
                     "expanded-gels-redaction-placeholder.png",
                     {
                         // Exclude timestamp from snapshot of mx_MainSplit
-                        mask: [page.locator(".mx_MessageTimestamp")],
+                        css: `
+                            .mx_MessageTimestamp {
+                                visibility: hidden;
+                            }
+                        `,
                     },
                 );
 
@@ -481,7 +507,11 @@ test.describe("Timeline", () => {
                 // Record alignment of expanded GELS, placeholder of deleted message, and emote
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-emote-irc-layout.png", {
                     // Exclude timestamp from snapshot of mx_MainSplit
-                    mask: [page.locator(".mx_MessageTimestamp")],
+                    css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                    `,
                 });
             },
         );
@@ -492,12 +522,14 @@ test.describe("Timeline", () => {
             async ({ page, app, room }) => {
                 const screenshotOptions = {
                     // Hide because flaky - See https://github.com/vector-im/element-web/issues/24957
-                    mask: [page.locator(".mx_MessageTimestamp")],
                     css: `
-                    .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
-                        display: none !important;
-                    }
-                `,
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                        .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
+                            display: none !important;
+                        }
+                    `,
                 };
 
                 await sendEvent(app.client, room.roomId);
@@ -605,12 +637,10 @@ test.describe("Timeline", () => {
                 await messageEdit(page);
 
                 // Click timestamp to highlight hidden event line
-                const timestamp = page.locator(".mx_RoomView_body .mx_EventTile_info a", {
-                    has: page.locator(".mx_MessageTimestamp"),
-                });
+                const timestamp = page.locator(".mx_RoomView_body .mx_EventTile_info a.mx_MessageTimestamp");
                 // wait for the remote echo otherwise we get an error modal due to a 404 on the /event/ API
                 await expect(timestamp).not.toHaveAttribute("href", /~!/);
-                await timestamp.locator(".mx_MessageTimestamp").click();
+                await timestamp.click();
 
                 // should not add inline start padding to a hidden event line on IRC layout
                 await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
@@ -620,12 +650,14 @@ test.describe("Timeline", () => {
 
                 // Exclude timestamp and read marker from snapshot
                 const screenshotOptions = {
-                    mask: [page.locator(".mx_MessageTimestamp")],
                     css: `
-                    .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
-                        display: none !important;
-                    }
-                `,
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                        .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
+                            display: none !important;
+                        }
+                    `,
                 };
 
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
@@ -654,7 +686,11 @@ test.describe("Timeline", () => {
 
             // Exclude timestamp from snapshot
             const screenshotOptions = {
-                mask: [page.locator(".mx_MessageTimestamp")],
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
             };
 
             await sendEvent(app.client, room.roomId);
@@ -795,8 +831,10 @@ test.describe("Timeline", () => {
             await app.timeline.scrollToBottom();
             await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot("url-preview.png", {
                 // Exclude timestamp and read marker from snapshot
-                mask: [page.locator(".mx_MessageTimestamp")],
                 css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }
@@ -892,7 +930,13 @@ test.describe("Timeline", () => {
 
             const tile = page.locator(".mx_EventTile");
             await expect(tile).toBeVisible();
-            await expect(tile).toMatchScreenshot("code-block.png", { mask: [page.locator(".mx_MessageTimestamp")] });
+            await expect(tile).toMatchScreenshot("code-block.png", {
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
+            });
 
             // Edit a code block and assert the edited code block has been correctly rendered
             await tile.hover();
@@ -904,7 +948,11 @@ test.describe("Timeline", () => {
 
             const newTile = page.locator(".mx_EventTile");
             await expect(newTile).toMatchScreenshot("edited-code-block.png", {
-                mask: [page.locator(".mx_MessageTimestamp")],
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
             });
         });
 
@@ -1107,8 +1155,10 @@ test.describe("Timeline", () => {
 
             // Exclude timestamp and read marker from snapshot
             const screenshotOptions = {
-                mask: [page.locator(".mx_MessageTimestamp")],
                 css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }
@@ -1233,12 +1283,14 @@ test.describe("Timeline", () => {
 
                 // Exclude timestamp and read marker from snapshot
                 const screenshotOptions = {
-                    mask: [page.locator(".mx_MessageTimestamp")],
                     css: `
-                    .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
-                        display: none !important;
-                    }
-                `,
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                        .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
+                            display: none !important;
+                        }
+                    `,
                 };
 
                 // Make sure the strings do not overflow on IRC layout
@@ -1297,8 +1349,10 @@ test.describe("Timeline", () => {
 
             // Exclude timestamp and read marker from snapshot
             const screenshotOptions = {
-                mask: [page.locator(".mx_MessageTimestamp")],
                 css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }

playwright/pages/ElementAppPage.ts

@@ -199,6 +199,21 @@ export class ElementAppPage {
         return this.page.locator(".mx_RightPanel");
     }
 
+    /**
+     * Opens the room info panel if it is not already open.
+     *
+     * TODO: fix this so that it works correctly if, say, the member list was open instead of the room info panel.
+     *
+     * @returns locator to the right panel
+     */
+    public async openRoomInfoPanel(): Promise<Locator> {
+        const locator = this.page.getByTestId("right-panel");
+        if (!(await locator.isVisible())) {
+            await this.page.getByRole("button", { name: "Room info" }).first().click();
+        }
+        return locator;
+    }
+
     /**
      * Opens/closes the memberlist panel
      * @returns locator to the memberlist panel
@@ -217,8 +232,8 @@ export class ElementAppPage {
      * @param userId - The user to invite to the room.
      */
     public async inviteUserToCurrentRoom(userId: string): Promise<void> {
-        await this.toggleRoomInfoPanel(); // TODO skip this if the room info panel is already open
-        await this.page.getByLabel("Right panel").getByRole("menuitem", { name: "Invite" }).click();
+        const rightPanel = await this.openRoomInfoPanel();
+        await rightPanel.getByRole("menuitem", { name: "Invite" }).click();
 
         const input = this.page.getByRole("dialog").getByTestId("invite-dialog-input");
         await input.fill(userId);