Merge branch 'develop' of ssh://github.com/element-hq/element-web into t3chguy/css-masks-again

# Conflicts:
#	res/css/views/rooms/_EventTile.pcss

.github/workflows/build.yml

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

.github/workflows/build_debian.yaml

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

.github/workflows/build_develop.yml

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

.github/workflows/deploy.yml

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

.github/workflows/docker.yaml

@@ -20,7 +20,7 @@ jobs:
         env:
             TEST_TAG: vectorim/element-web:test
         steps:
-            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   fetch-depth: 0 # needed for docker-package to be able to calculate the version
 
@@ -96,7 +96,7 @@ jobs:
 
             - name: Docker meta
               id: meta
-              uses: docker/metadata-action@318604b99e75e41977312d83839a89be02ca4893 # v5
+              uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5
               if: github.event_name != 'pull_request'
               with:
                   images: |

.github/workflows/docs.yml

@@ -17,23 +17,23 @@ jobs:
         runs-on: ubuntu-24.04
         steps:
             - name: Fetch element-desktop
-              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   repository: element-hq/element-desktop
                   path: element-desktop
 
             - name: Fetch element-web
-              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   path: element-web
 
             - name: Fetch matrix-js-sdk
-              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
               with:
                   repository: matrix-org/matrix-js-sdk
                   path: matrix-js-sdk
 
-            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
               with:
                   cache: "yarn"
                   cache-dependency-path: element-web/yarn.lock

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

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

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

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

.github/workflows/release_prepare.yml

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

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

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

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

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

.github/workflows/static_analysis.yaml

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

.github/workflows/tests.yml

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

.github/workflows/triage-stale.yml

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

.github/workflows/update-jitsi.yml

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

Dockerfile

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

jest.config.ts

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

package.json

@@ -69,12 +69,12 @@
         "postinstall": "patch-package"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.2.0",
+        "**/pretty-format/react-is": "19.2.1",
-        "@types/react": "19.2.6",
+        "@types/react": "19.2.7",
         "@types/react-dom": "19.2.3",
         "oidc-client-ts": "3.4.1",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001756",
+        "caniuse-lite": "1.0.30001759",
         "testcontainers": "^11.0.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
@@ -92,7 +92,7 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "6.4.1",
+        "@vector-im/compound-design-tokens": "6.4.2",
         "@vector-im/compound-web": "^8.3.1",
         "@vector-im/matrix-wysiwyg": "2.40.0",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -117,7 +117,7 @@
         "highlight.js": "^11.3.1",
         "html-entities": "^2.0.0",
         "html-react-parser": "^5.2.2",
-        "is-ip": "^3.1.0",
+        "is-ip": "^5.0.0",
         "js-xxhash": "^5.0.0",
         "jsrsasign": "^11.0.0",
         "jszip": "^3.7.0",
@@ -137,7 +137,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.297.2",
+        "posthog-js": "1.302.2",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -179,8 +179,8 @@
         "@babel/preset-react": "^7.12.10",
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
-        "@casualbot/jest-sonar-reporter": "2.4.0",
+        "@casualbot/jest-sonar-reporter": "2.5.0",
-        "@element-hq/element-call-embedded": "0.16.1",
+        "@element-hq/element-call-embedded": "0.16.3",
         "@element-hq/element-web-playwright-common": "^2.0.0",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "1.57.0",
@@ -213,7 +213,7 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.2.6",
+        "@types/react": "19.2.7",
         "@types/react-beautiful-dnd": "^13.0.0",
         "@types/react-dom": "19.2.3",
         "@types/react-transition-group": "^4.4.0",
@@ -228,7 +228,7 @@
         "babel-loader": "^10.0.0",
         "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
         "blob-polyfill": "^9.0.0",
-        "chokidar": "^4.0.0",
+        "chokidar": "^5.0.0",
         "concurrently": "^9.0.0",
         "copy-webpack-plugin": "^13.0.0",
         "core-js": "^3.38.1",
@@ -281,7 +281,7 @@
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.6.2",
+        "prettier": "3.7.4",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",

packages/shared-components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@element-hq/web-shared-components",
-    "version": "0.0.0-test.11",
+    "version": "0.0.0-test.12",
     "description": "Shared components for Element",
     "author": "New Vector Ltd.",
     "repository": {

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

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+import { type Meta, type StoryFn } from "@storybook/react-vite";
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import { useMockedViewModel } from "../../useMockedViewModel";
+import {
+    HistoryVisibleBannerView,
+    type HistoryVisibleBannerViewActions,
+    type HistoryVisibleBannerViewSnapshot,
+} from "./HistoryVisibleBannerView";
+
+type HistoryVisibleBannerProps = HistoryVisibleBannerViewSnapshot & HistoryVisibleBannerViewActions;
+
+const HistoryVisibleBannerViewWrapper = ({ onClose, ...rest }: HistoryVisibleBannerProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        onClose,
+    });
+    return <HistoryVisibleBannerView vm={vm} />;
+};
+
+export default {
+    title: "composer/HistoryVisibleBannerView",
+    component: HistoryVisibleBannerViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {
+        visible: true,
+        onClose: fn(),
+    },
+} as Meta<typeof HistoryVisibleBannerViewWrapper>;
+
+const Template: StoryFn<typeof HistoryVisibleBannerViewWrapper> = (args) => (
+    <HistoryVisibleBannerViewWrapper {...args} />
+);
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { render } from "jest-matrix-react";
+import { composeStories } from "@storybook/react-vite";
+
+import * as stories from "./HistoryVisibleBannerView.stories.tsx";
+
+const { Default } = composeStories(stories);
+
+describe("HistoryVisibleBannerView", () => {
+    it("renders a history visible banner", () => {
+        const dismissFn = jest.fn();
+
+        const { container } = render(<Default onClose={dismissFn} />);
+        expect(container).toMatchSnapshot();
+
+        const button = container.querySelector("button");
+        expect(button).not.toBeNull();
+        button?.click();
+        expect(dismissFn).toHaveBeenCalled();
+    });
+});

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

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

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

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

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

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export * from "./HistoryVisibleBannerView";

packages/shared-components/src/index.ts

@@ -12,12 +12,14 @@ export * from "./audio/PlayPauseButton";
 export * from "./audio/SeekBar";
 export * from "./avatar/AvatarWithDetails";
 export * from "./composer/Banner";
+export * from "./composer/HistoryVisibleBannerView";
 export * from "./event-tiles/TextualEventView";
 export * from "./message-body/MediaBody";
 export * from "./pill-input/Pill";
 export * from "./pill-input/PillInput";
 export * from "./rich-list/RichItem";
 export * from "./rich-list/RichList";
+export * from "./room-list/RoomListSearchView";
 export * from "./utils/Box";
 export * from "./utils/Flex";
 

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

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.view {
+    /* From figma, this should be aligned with the room header */
+    min-height: 64px;
+    box-sizing: border-box;
+    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary);
+    padding: 0 var(--cpd-space-3x);
+}
+
+.search {
+    /* The search button should take all the remaining space */
+    flex: 1;
+    /* !important is needed to override compound button in EW */
+    font: var(--cpd-font-body-md-regular) !important;
+    color: var(--cpd-color-text-secondary) !important;
+    min-width: 0;
+
+    svg {
+        fill: var(--cpd-color-icon-secondary);
+    }
+}
+
+.search_container {
+    flex: 1;
+
+    /* Shrink and truncate the search text */
+    white-space: nowrap;
+    overflow: hidden;
+
+    kbd {
+        font-family: inherit;
+    }
+}
+
+.search_text {
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: start;
+}

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

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import {
+    RoomListSearchView,
+    type RoomListSearchViewActions,
+    type RoomListSearchViewSnapshot,
+} from "./RoomListSearchView";
+import { useMockedViewModel } from "../../useMockedViewModel";
+
+type RoomListSearchProps = RoomListSearchViewSnapshot & RoomListSearchViewActions;
+
+const RoomListSearchViewWrapper = ({
+    onSearchClick,
+    onDialPadClick,
+    onExploreClick,
+    ...rest
+}: RoomListSearchProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        onSearchClick,
+        onDialPadClick,
+        onExploreClick,
+    });
+    return <RoomListSearchView vm={vm} />;
+};
+
+export default {
+    title: "Room List/RoomListSearchView",
+    component: RoomListSearchViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        displayExploreButton: true,
+        displayDialButton: false,
+        searchShortcut: "⌘ K",
+        onSearchClick: fn(),
+        onDialPadClick: fn(),
+        onExploreClick: fn(),
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/vlmt46QDdE4dgXDiyBJXqp/ER-33-Left-Panel-2025?node-id=98-1979&t=vafb4zoYMNLRuAbh-4",
+        },
+    },
+} as Meta<typeof RoomListSearchViewWrapper>;
+
+const Template: StoryFn<typeof RoomListSearchViewWrapper> = (args) => <RoomListSearchViewWrapper {...args} />;
+
+export const Default = Template.bind({});
+
+export const WithDialPad = Template.bind({});
+WithDialPad.args = {
+    displayDialButton: true,
+};
+
+export const WithoutExplore = Template.bind({});
+WithoutExplore.args = {
+    displayExploreButton: false,
+};
+
+export const AllButtons = Template.bind({});
+AllButtons.args = {
+    displayExploreButton: true,
+    displayDialButton: true,
+    searchShortcut: "⌘ K",
+};

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

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { render, screen } from "jest-matrix-react";
+import { composeStories } from "@storybook/react-vite";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+
+import * as stories from "./RoomListSearchView.stories";
+import {
+    RoomListSearchView,
+    type RoomListSearchViewActions,
+    type RoomListSearchViewSnapshot,
+} from "./RoomListSearchView";
+import { MockViewModel } from "../../viewmodel/MockViewModel";
+
+const { Default, WithDialPad, WithoutExplore, AllButtons } = composeStories(stories);
+
+describe("RoomListSearchView", () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe("Storybook snapshots", () => {
+        it("renders the default state", () => {
+            const { container } = render(<Default />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("renders with dial pad button", () => {
+            const { container } = render(<WithDialPad />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("renders without explore button", () => {
+            const { container } = render(<WithoutExplore />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("renders with all buttons visible", () => {
+            const { container } = render(<AllButtons />);
+            expect(container).toMatchSnapshot();
+        });
+    });
+
+    describe("User interactions", () => {
+        const onSearchClick = jest.fn();
+        const onDialPadClick = jest.fn();
+        const onExploreClick = jest.fn();
+
+        class TestViewModel extends MockViewModel<RoomListSearchViewSnapshot> implements RoomListSearchViewActions {
+            public onSearchClick = onSearchClick;
+            public onDialPadClick = onDialPadClick;
+            public onExploreClick = onExploreClick;
+        }
+
+        it("should call onSearchClick when search button is clicked", async () => {
+            const user = userEvent.setup();
+            const vm = new TestViewModel({
+                displayExploreButton: false,
+                displayDialButton: false,
+                searchShortcut: "⌘ K",
+            });
+
+            render(<RoomListSearchView vm={vm} />);
+
+            await user.click(screen.getByRole("button", { name: "Search ⌘ K" }));
+            expect(onSearchClick).toHaveBeenCalledTimes(1);
+        });
+
+        it("should call onDialPadClick when dial pad button is clicked", async () => {
+            const user = userEvent.setup();
+            const vm = new TestViewModel({
+                displayExploreButton: false,
+                displayDialButton: true,
+                searchShortcut: "⌘ K",
+            });
+
+            render(<RoomListSearchView vm={vm} />);
+
+            await user.click(screen.getByRole("button", { name: "Open dial pad" }));
+            expect(onDialPadClick).toHaveBeenCalledTimes(1);
+        });
+
+        it("should call onExploreClick when explore button is clicked", async () => {
+            const user = userEvent.setup();
+            const vm = new TestViewModel({
+                displayExploreButton: true,
+                displayDialButton: false,
+                searchShortcut: "⌘ K",
+            });
+
+            render(<RoomListSearchView vm={vm} />);
+
+            await user.click(screen.getByRole("button", { name: "Explore rooms" }));
+            expect(onExploreClick).toHaveBeenCalledTimes(1);
+        });
+    });
+});

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

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

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

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

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

@@ -0,0 +1,9 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export type { RoomListSearchViewModel, RoomListSearchViewSnapshot } from "./RoomListSearchView";
+export { RoomListSearchView } from "./RoomListSearchView";

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

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

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

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

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

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

playwright/e2e/composer/CIDER.spec.ts

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

playwright/e2e/crypto/crypto.spec.ts

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

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

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

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

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

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

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

playwright/e2e/pinned-messages/index.ts

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

playwright/e2e/read-receipts/index.ts

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

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

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

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

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

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

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

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

@@ -207,7 +207,7 @@ test.describe("RightPanel", () => {
 
             // \d represents the number of the space members
             await page
-                .locator(".mx_RoomInfoLine_private")
+                .locator(".mx_RoomInfoLine")
                 .getByRole("button", { name: /\d member/ })
                 .click();
             await expect(page.locator(".mx_MemberListView")).toBeVisible();

playwright/e2e/voip/element-call.spec.ts

@@ -264,6 +264,7 @@ test.describe("Element Call", () => {
                     preset: "trusted_private_chat" as Preset.TrustedPrivateChat,
                     invite: [bot.credentials.userId],
                 });
+                await bot.awaitRoomMembership(roomId);
                 await app.client.setAccountData("m.direct" as EventType.Direct, {
                     [bot.credentials.userId]: [roomId],
                 });

playwright/e2e/voip/pstn.spec.ts

@@ -24,7 +24,7 @@ test.describe("PSTN", () => {
         await toasts.rejectToast("Notifications");
         await toasts.assertNoToasts();
 
-        await expect(page.locator(".mx_RoomListSearch")).toMatchScreenshot("dialpad-trigger.png");
+        await expect(page.getByTestId("room-list-search")).toMatchScreenshot("dialpad-trigger.png");
         await page.getByLabel("Open dial pad").click();
         await expect(page.locator(".mx_Dialog")).toMatchScreenshot("dialpad.png");
     });

playwright/pages/ElementAppPage.ts

@@ -244,24 +244,6 @@ export class ElementAppPage {
         await this.page.getByRole("dialog").getByRole("button", { name: "Invite" }).click();
     }
 
-    /**
-     * Get a locator for the tooltip associated with an element
-     * @param e The element with the tooltip
-     * @returns Locator to the tooltip
-     */
-    public async getTooltipForElement(e: Locator): Promise<Locator> {
-        const [labelledById, describedById] = await Promise.all([
-            e.getAttribute("aria-labelledby"),
-            e.getAttribute("aria-describedby"),
-        ]);
-        if (!labelledById && !describedById) {
-            throw new Error(
-                "Element has no aria-labelledby or aria-describedy attributes! The tooltip should have added either one of these.",
-            );
-        }
-        return this.page.locator(`id=${labelledById ?? describedById}`);
-    }
-
     /**
      * Close the notification toast
      */

playwright/testcontainers/mas.ts

@@ -10,7 +10,7 @@ import {
     type StartedPostgreSqlContainer,
 } from "@element-hq/element-web-playwright-common/lib/testcontainers";
 
-const TAG = "main@sha256:1921169527f1914f8322866da95a2395d617ead1b9f0592f27f7c777a2b0c8d1";
+const TAG = "main@sha256:1ffa26f3d7b1e7481e10ec23bbb65afc0394a1f0416462601b8ef5b0eaf9aced";
 
 /**
  * MatrixAuthenticationServiceContainer which freezes the docker digest to

playwright/testcontainers/synapse.ts

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
 
-const TAG = "develop@sha256:b2c1ae44f6e048d0cdd23b2469271d3a4e33b4c6528f051f1d29ac3e4ffe622f";
+const TAG = "develop@sha256:a2790ff0be7d8da93e26c09bcfedded2f5410affac87065cfe11309a85b4c728";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,

res/css/_components.pcss

@@ -79,6 +79,7 @@
 @import "./structures/_SearchBox.pcss";
 @import "./structures/_SpaceHierarchy.pcss";
 @import "./structures/_SpacePanel.pcss";
+@import "./structures/_SpacePillButton.pcss";
 @import "./structures/_SpaceRoomView.pcss";
 @import "./structures/_SplashPage.pcss";
 @import "./structures/_TabbedView.pcss";
@@ -120,9 +121,6 @@
 @import "./views/context_menus/_DeviceContextMenu.pcss";
 @import "./views/context_menus/_IconizedContextMenu.pcss";
 @import "./views/context_menus/_LegacyCallContextMenu.pcss";
-@import "./views/context_menus/_MessageContextMenu.pcss";
-@import "./views/context_menus/_RoomGeneralContextMenu.pcss";
-@import "./views/context_menus/_RoomNotificationContextMenu.pcss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
 @import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
 @import "./views/dialogs/_BugReportDialog.pcss";
@@ -276,7 +274,6 @@
 @import "./views/rooms/RoomListPanel/_RoomListItemView.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListPanel.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss";
-@import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListSecondaryFilters.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListSkeleton.pcss";
 @import "./views/rooms/_AppsDrawer.pcss";
@@ -284,7 +281,6 @@
 @import "./views/rooms/_AuxPanel.pcss";
 @import "./views/rooms/_BasicMessageComposer.pcss";
 @import "./views/rooms/_CallGuestLinkButton.pcss";
-@import "./views/rooms/_DecryptionFailureBar.pcss";
 @import "./views/rooms/_E2EIcon.pcss";
 @import "./views/rooms/_E2EIconView.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";
@@ -386,7 +382,6 @@
 @import "./views/spaces/_SpaceBasicSettings.pcss";
 @import "./views/spaces/_SpaceChildrenPicker.pcss";
 @import "./views/spaces/_SpaceCreateMenu.pcss";
-@import "./views/spaces/_SpacePublicShare.pcss";
 @import "./views/terms/_InlineTermsAgreement.pcss";
 @import "./views/toasts/_AnalyticsToast.pcss";
 @import "./views/toasts/_IncomingCallToast.pcss";

res/css/structures/_LeftPanel.pcss

@@ -114,67 +114,30 @@ Please see LICENSE files in the repository root for full details.
                 margin-top: 12px;
             }
 
-            .mx_LeftPanel_dialPadButton {
+            .mx_LeftPanel_dialPadButton,
-                width: 32px;
+            .mx_LeftPanel_exploreButton {
-                height: 32px;
+                width: 20px;
+                height: 20px;
+                padding: var(--cpd-space-1-5x);
                 border-radius: 8px;
                 background-color: $panel-actions;
-                position: relative;
                 margin-left: 8px;
 
-                &::before {
+                svg {
-                    content: "";
+                    width: inherit;
-                    position: absolute;
+                    height: inherit;
-                    top: 6px;
+                    display: block;
-                    left: 6px;
+                    color: $secondary-content;
-                    width: 20px;
-                    height: 20px;
-                    mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg");
-                    mask-position: center;
-                    mask-size: contain;
-                    mask-repeat: no-repeat;
-                    background-color: $secondary-content;
-                }
-            }
-
-            .mx_LeftPanel_exploreButton,
-            .mx_LeftPanel_recentsButton {
-                width: 32px;
-                height: 32px;
-                border-radius: 8px;
-                background-color: $panel-actions;
-                position: relative;
-                margin-left: 8px;
-
-                &::before {
-                    content: "";
-                    position: absolute;
-                    top: 8px;
-                    left: 8px;
-                    width: 16px;
-                    height: 16px;
-                    mask-position: center;
-                    mask-size: contain;
-                    mask-repeat: no-repeat;
-                    background-color: $secondary-content;
                 }
 
                 &:hover {
                     background-color: $tertiary-content;
 
-                    &::before {
+                    svg {
-                        background-color: $background;
+                        color: $background;
                     }
                 }
             }
-
-            .mx_LeftPanel_exploreButton::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
-            }
-
-            .mx_LeftPanel_recentsButton::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/time.svg");
-            }
         }
 
         .mx_LegacyRoomListHeader:first-child {
@@ -228,8 +191,7 @@ Please see LICENSE files in the repository root for full details.
                     background-color: transparent;
                 }
 
-                .mx_LeftPanel_exploreButton,
+                .mx_LeftPanel_exploreButton {
-                .mx_LeftPanel_recentsButton {
                     margin-left: 0;
                     margin-top: 8px;
                 }

res/css/structures/_RoomStatusBar.pcss

@@ -99,34 +99,17 @@ Please see LICENSE files in the repository root for full details.
             position: relative;
             user-select: none;
 
-            &:nth-child(2) {
+            & + .mx_AccessibleButton {
                 border-left: 1px solid $resend-button-divider-color;
             }
 
-            &::before {
+            svg {
-                content: "";
-                position: absolute;
                 left: 10px; /* inset for regular button padding */
-                background-color: $muted-fg-color;
+
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
                 width: 18px;
                 height: 18px;
-                top: 50%; /* text sizes are dynamic */
+                vertical-align: middle;
-                transform: translateY(-50%);
+                color: $muted-fg-color;
-            }
-
-            &.mx_RoomStatusBar_unsentCancelAllBtn::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
-            }
-
-            &.mx_RoomStatusBar_unsentRetry {
-                padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
-
-                &::before {
-                    mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
-                }
             }
         }
 

res/css/structures/_RoomView.pcss

@@ -76,6 +76,8 @@ Please see LICENSE files in the repository root for full details.
     flex-direction: column;
     flex: 1;
     min-width: 0;
+    container-type: size;
+    container-name: roomview;
 
     .mx_RoomView_messagePanel,
     .mx_RoomView_messagePanelSpinner,

res/css/structures/_SearchBox.pcss

@@ -17,13 +17,14 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_SearchBox_closeButton {
         cursor: pointer;
-        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: 16px;
-        width: 16px;
         height: 16px;
+        width: 16px;
         padding: 9px;
-        background-color: var(--cpd-color-icon-secondary);
+
+        svg {
+            height: inherit;
+            width: inherit;
+            color: var(--cpd-color-icon-secondary);
+        }
     }
 }

res/css/structures/_SpacePanel.pcss

@@ -44,29 +44,23 @@ Please see LICENSE files in the repository root for full details.
         top: 19px; /* v-align with avatar */
         right: -8px;
 
-        &::before {
+        svg {
-            content: "";
-            position: absolute;
-            width: inherit;
             height: inherit;
-            mask-position: center;
+            width: inherit;
-            mask-size: contain;
+            display: inline-block;
-            mask-repeat: no-repeat;
+            color: $background;
-            background-color: $background;
+            /* Slight alignment tweak to center the asset */
-            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
+            margin-left: 1px;
-            transform: rotate(270deg);
         }
 
         &:not(.expanded) {
             opacity: 0;
-
-            &::before {
-                mask-position: center 1px;
-            }
         }
 
-        &.expanded::before {
+        &.expanded svg {
-            transform: rotate(90deg);
+            transform: rotate(180deg);
+            /* Slight alignment tweak to center the asset */
+            margin-left: -1px;
         }
     }
 
@@ -103,7 +97,6 @@ Please see LICENSE files in the repository root for full details.
         & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
             padding: 0 10px;
             margin: 0 -10px;
-            transform: rotate(-90deg);
         }
 
         & > .mx_SpaceTreeLevel {
@@ -166,109 +159,67 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpaceButton_toggleCollapse {
-            width: var(--gutterSize);
-            padding: 10px 0;
-            min-width: var(--gutterSize);
             height: 20px;
-            mask-position: center;
+            width: var(--gutterSize);
-            mask-size: 20px;
+            flex-shrink: 0;
-            mask-repeat: no-repeat;
+            padding: 10px 0;
-            background-color: $tertiary-content;
+
-            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
+            svg {
+                width: 20px;
+                height: inherit;
+                display: inline-block;
+                color: $tertiary-content;
+                /* Re-align with parent */
+                margin-left: -3px;
+            }
         }
 
         .mx_SpaceButton_icon {
-            width: var(--height-topLevel);
+            /* Calculate height excluding padding to allow svg to inherit */
-            min-width: var(--height-topLevel);
+            width: calc(var(--height-topLevel) - 14px);
-            height: var(--height-topLevel);
+            height: calc(var(--height-topLevel) - 14px);
+            flex-shrink: 0;
             border-radius: 8px;
-            position: relative;
+            padding: 7px;
-
-            &::before {
-                position: absolute;
-                content: "";
-                width: var(--height-topLevel);
-                height: var(--height-topLevel);
-                top: 0;
-                left: 0;
-                mask-position: center;
-                mask-repeat: no-repeat;
-                mask-size: 18px;
-            }
-        }
-
-        &.mx_SpaceButton_home,
-        &.mx_SpaceButton_favourites,
-        &.mx_SpaceButton_people,
-        &.mx_SpaceButton_orphans,
-        &.mx_SpaceButton_videoRooms {
-            .mx_SpaceButton_icon {
-                background-color: $panel-actions;
-
-                &::before {
-                    background-color: $secondary-content;
-                }
-            }
-        }
-
-        &.mx_SpaceButton_withIcon .mx_SpaceButton_icon {
             background-color: $panel-actions;
-        }
 
-        &.mx_SpaceButton_home .mx_SpaceButton_icon::before {
+            svg {
-            mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
+                width: inherit;
-        }
+                height: inherit;
-
+                display: block;
-        &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
+                color: $secondary-content;
-            mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
+            }
-        }
-
-        &.mx_SpaceButton_people .mx_SpaceButton_icon::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
-        }
-
-        &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
-        }
-
-        &.mx_SpaceButton_videoRooms .mx_SpaceButton_icon::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
         }
 
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
-            &::before {
+            background-color: unset;
-                background-color: $primary-content;
+
-                mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
+            svg {
+                color: $primary-content;
                 transition: all 0.2s ease-in-out; /* TODO transition */
             }
         }
 
-        &.mx_SpaceButton_newCancel .mx_SpaceButton_icon::before {
+        &.mx_SpaceButton_newCancel .mx_SpaceButton_icon svg {
             transform: rotate(45deg);
         }
 
         .mx_SpaceButton_menuButton {
-            width: 20px;
+            width: 16px;
-            min-width: 20px; /* yay flex */
+            height: 16px;
-            height: 20px;
+            padding: var(--cpd-space-0-5x);
+            flex-shrink: 0;
             margin-top: auto;
             margin-bottom: auto;
             display: none;
             position: absolute;
             right: 4px;
 
-            &::before {
+            svg {
-                top: 3px;
+                width: inherit;
-                left: 2px;
+                height: inherit;
-                content: "";
+                display: block;
-                width: 16px;
+                color: $primary-content;
-                height: 16px;
-                position: absolute;
-                mask-position: center;
-                mask-size: contain;
-                mask-repeat: no-repeat;
-                mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-                background: $primary-content;
             }
         }
     }
@@ -341,18 +292,6 @@ Please see LICENSE files in the repository root for full details.
         padding: 0 0 16px 0;
         scrollbar-gutter: stable;
 
-        & > .mx_SpaceButton {
-            height: var(--height-topLevel);
-
-            &.mx_SpaceButton_active::before {
-                height: var(--height-topLevel);
-            }
-        }
-
-        & > ul {
-            padding-left: 0;
-        }
-
         &.mx_IndicatorScrollbar_topOverflow {
             mask-image: linear-gradient(to bottom, transparent, black 16px);
         }
@@ -428,46 +367,6 @@ Please see LICENSE files in the repository root for full details.
         white-space: nowrap;
     }
 
-    .mx_SpacePanel_iconHome::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
-    }
-
-    .mx_SpacePanel_iconInvite::before {
-        mask-image: url("$(res)/img/element-icons/room/invite.svg");
-    }
-
-    .mx_SpacePanel_iconSettings::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
-    }
-
-    .mx_SpacePanel_iconLeave::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
-    }
-
-    .mx_SpacePanel_iconMembers::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
-    }
-
-    .mx_SpacePanel_iconPlus::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
-    }
-
-    .mx_SpacePanel_iconExplore::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
-    }
-
-    .mx_SpacePanel_iconPreferences::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/preferences.svg");
-    }
-
-    .mx_SpacePanel_noIcon {
-        display: none;
-
-        & + .mx_IconizedContextMenu_label {
-            padding-left: 5px !important; /* override default iconized label style to align with header */
-        }
-    }
-
     .mx_SpacePanel_contextMenu_separatorLabel {
         color: $tertiary-content;
         font-size: $font-10px;

res/css/structures/_SpacePillButton.pcss

@@ -0,0 +1,48 @@
+/*
+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.
+*/
+
+.mx_SpacePillButton {
+    position: relative;
+    padding: 16px 32px 16px 72px;
+    width: 432px;
+    box-sizing: border-box;
+    border-radius: 8px;
+    border: 1px solid $input-border-color;
+    font-size: $font-17px;
+    font-weight: var(--cpd-font-weight-semibold);
+    margin: 20px 0;
+
+    > div {
+        margin-top: 4px;
+        font-weight: normal;
+        font-size: $font-15px;
+        color: $secondary-content;
+    }
+
+    svg {
+        position: absolute;
+        content: "";
+        width: 28px;
+        height: 28px;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 22px;
+        color: $tertiary-content;
+    }
+
+    &:hover {
+        border-color: var(--cpd-color-bg-action-primary-rest);
+
+        svg {
+            color: var(--cpd-color-icon-primary);
+        }
+
+        > span {
+            color: $primary-content;
+        }
+    }
+}

res/css/structures/_SpaceRoomView.pcss

@@ -6,51 +6,6 @@ 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.
 */
 
-@define-mixin SpacePillButton {
-    position: relative;
-    padding: 16px 32px 16px 72px;
-    width: 432px;
-    box-sizing: border-box;
-    border-radius: 8px;
-    border: 1px solid $input-border-color;
-    font-size: $font-17px;
-    font-weight: var(--cpd-font-weight-semibold);
-    margin: 20px 0;
-
-    > div {
-        margin-top: 4px;
-        font-weight: normal;
-        font-size: $font-15px;
-        color: $secondary-content;
-    }
-
-    &::before {
-        position: absolute;
-        content: "";
-        width: 28px;
-        height: 28px;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 22px;
-        mask-position: center;
-        mask-repeat: no-repeat;
-        mask-size: 28px;
-        background-color: $tertiary-content;
-    }
-
-    &:hover {
-        border-color: var(--cpd-color-bg-action-primary-rest);
-
-        &::before {
-            background-color: var(--cpd-color-icon-primary);
-        }
-
-        > span {
-            color: $primary-content;
-        }
-    }
-}
-
 .mx_SpaceRoomView {
     --innerWidth: 428px;
 
@@ -242,20 +197,6 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    .mx_SpaceRoomView_privateScope {
-        > .mx_AccessibleButton {
-            @mixin SpacePillButton;
-        }
-
-        .mx_SpaceRoomView_privateScope_justMeButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
-        }
-
-        .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
-        }
-    }
-
     .mx_SpaceRoomView_inviteTeammates {
         .mx_SpaceRoomView_inviteTeammates_buttons {
             color: $secondary-content;

res/css/structures/_SplashPage.pcss

@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
             /* mask to dither resulting combined gradient */
             url("$(res)/img/noise.png"),
             /* gradient to apply different amounts of dithering to different parts of the gradient */
-                linear-gradient(
+            linear-gradient(
                     to bottom,
                     /* 10% dithering at the top */ rgb(0, 0, 0, 0.9) 20%,
                     /* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100%

res/css/structures/_ToastContainer.pcss

@@ -41,42 +41,10 @@ Please see LICENSE files in the repository root for full details.
         padding: var(--cpd-space-3x);
 
         &.mx_Toast_hasIcon {
-            &::before,
+            svg {
-            &::after {
-                content: "";
                 width: 22px;
                 height: 22px;
                 grid-column: 1;
-                grid-row: 1;
-                mask-size: 100%;
-                mask-position: center;
-                mask-repeat: no-repeat;
-                background-size: 100%;
-                background-repeat: no-repeat;
-            }
-
-            &.mx_Toast_icon_verification::after {
-                mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-                background-color: $primary-content;
-            }
-
-            &.mx_Toast_icon_verification_warning {
-                /* white infill for the hollow svg mask */
-                &::before {
-                    background-color: #ffffff;
-                    mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-                    mask-size: 80%;
-                }
-
-                &::after {
-                    mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
-                    background-color: $e2e-warning-color;
-                }
-            }
-
-            &.mx_Toast_icon_key_storage::after {
-                mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
-                background-color: $primary-content;
             }
 
             .mx_Toast_title,

res/css/structures/_UploadBar.pcss

@@ -7,12 +7,44 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_UploadBar {
-    padding-left: 65px; /* line up with the shield area in the composer */
+    /* line up with the shield area in the composer */
-    padding-top: 5px;
+    padding: 5px 21px 0;
     position: relative;
 
+    display: grid;
+    grid-template:
+        "icon     filename cancel" auto
+        "progress progress progress" auto
+        / min-content auto min-content;
+    gap: var(--cpd-space-1-5x);
+
+    & > svg {
+        grid-area: icon;
+        height: 18px;
+        width: 18px;
+        color: $muted-fg-color;
+        align-self: center;
+    }
+
+    .mx_UploadBar_filename {
+        grid-area: filename;
+        color: $muted-fg-color;
+        position: relative;
+        font-size: $font-15px;
+        vertical-align: middle;
+    }
+
+    .mx_UploadBar_cancel {
+        grid-area: cancel;
+        height: 16px;
+        width: 16px;
+        color: $muted-fg-color;
+        align-self: center;
+    }
+
     .mx_ProgressBar {
-        width: calc(100% - 40px); /* cheating at a right margin */
+        grid-area: progress;
+        width: 100%;
     }
 }
 
@@ -21,39 +53,3 @@ Please see LICENSE files in the repository root for full details.
         padding-left: 0;
     }
 }
-
-.mx_UploadBar_filename {
-    color: $muted-fg-color;
-    position: relative;
-    padding-right: 38px; /* 32px for cancel icon, 6px for padding */
-    padding-left: 22px; /* 18px for icon, 4px for padding */
-    font-size: $font-15px;
-    vertical-align: middle;
-
-    &::before {
-        content: "";
-        height: 18px;
-        width: 18px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        background-color: $muted-fg-color;
-        mask-image: url("@vector-im/compound-design-tokens/icons/share.svg");
-    }
-}
-
-.mx_UploadBar_cancel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 16px;
-    width: 16px;
-    margin-right: 16px; /* align over rightmost button in composer */
-    margin-top: 5px;
-    mask-repeat: no-repeat;
-    mask-position: center;
-    background-color: $muted-fg-color;
-    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-}

res/css/structures/_UserMenu.pcss

@@ -116,48 +116,7 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    .mx_IconizedContextMenu_icon {
+    .mx_IconizedContextMenu_icon svg {
-        width: 16px;
+        color: $icon-button-color;
-        height: 16px;
-        display: block;
-
-        &::before {
-            content: "";
-            width: 16px;
-            height: 16px;
-            display: block;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background: $icon-button-color;
-        }
-    }
-
-    .mx_UserMenu_iconHome::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
-    }
-
-    .mx_UserMenu_iconBell::before {
-        mask-image: url("$(res)/img/element-icons/notifications.svg");
-    }
-
-    .mx_UserMenu_iconLock::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-    }
-
-    .mx_UserMenu_iconSettings::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
-    }
-
-    .mx_UserMenu_iconMessage::before {
-        mask-image: url("$(res)/img/element-icons/feedback.svg");
-    }
-
-    .mx_UserMenu_iconSignOut::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
-    }
-
-    .mx_UserMenu_iconQr::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/qr-code.svg");
     }
 }

res/css/structures/auth/_CompleteSecurity.pcss

@@ -11,17 +11,16 @@ Please see LICENSE files in the repository root for full details.
     align-items: center;
 }
 
-.mx_CompleteSecurity_headerIcon {
+.mx_E2EIcon.mx_CompleteSecurity_headerIcon {
     width: 24px;
     height: 24px;
     margin-right: 4px;
-    position: relative;
+    display: inline-block;
 }
 
-.mx_CompleteSecurity_heroIcon {
+.mx_E2EIcon.mx_CompleteSecurity_heroIcon {
     width: 128px;
     height: 128px;
-    position: relative;
     margin: 0 auto;
 }
 

res/css/views/context_menus/_DeviceContextMenu.pcss

@@ -9,10 +9,6 @@ Please see LICENSE files in the repository root for full details.
 .mx_DeviceContextMenu {
     max-width: 252px;
 
-    .mx_DeviceContextMenu_device_icon {
-        display: none;
-    }
-
     .mx_IconizedContextMenu_label {
         padding-left: 0 !important;
     }

res/css/views/context_menus/_IconizedContextMenu.pcss

@@ -68,19 +68,6 @@ Please see LICENSE files in the repository root for full details.
                 cursor: not-allowed;
             }
 
-            img,
-            svg,
-            .mx_IconizedContextMenu_icon {
-                /* icons */
-                width: 16px;
-                min-width: 16px;
-                max-width: 16px;
-
-                & + .mx_IconizedContextMenu_label {
-                    padding-left: 14px;
-                }
-            }
-
             span.mx_IconizedContextMenu_label {
                 /* labels */
                 width: 100%;
@@ -92,27 +79,23 @@ Please see LICENSE files in the repository root for full details.
                 white-space: nowrap;
             }
 
+            svg {
+                width: 16px;
+                height: 16px;
+                display: block;
+                flex-shrink: 0;
+
+                & + .mx_IconizedContextMenu_label {
+                    padding-left: 14px;
+                }
+            }
+
             .mx_BetaCard_betaPill {
                 margin-left: 16px;
             }
         }
     }
 
-    .mx_IconizedContextMenu_icon {
-        position: relative;
-
-        &::before {
-            content: "";
-            width: inherit;
-            height: inherit;
-            position: absolute;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: var(--cpd-color-icon-primary);
-        }
-    }
-
     .mx_IconizedContextMenu_optionList_red {
         .mx_IconizedContextMenu_item {
             color: $alert !important;
@@ -121,10 +104,6 @@ Please see LICENSE files in the repository root for full details.
         svg {
             color: var(--cpd-color-icon-critical-primary);
         }
-
-        .mx_IconizedContextMenu_icon::before {
-            background-color: var(--cpd-color-icon-critical-primary);
-        }
     }
 
     .mx_IconizedContextMenu_option_red {
@@ -133,24 +112,16 @@ Please see LICENSE files in the repository root for full details.
         svg {
             color: $alert;
         }
-
-        .mx_IconizedContextMenu_icon::before {
-            background-color: $alert;
-        }
     }
 
     .mx_IconizedContextMenu_active {
         &.mx_IconizedContextMenu_item,
         .mx_IconizedContextMenu_item {
             color: $accent !important;
-        }
 
-        svg {
+            svg {
-            color: $accent;
+                color: $accent;
-        }
+            }
-
-        .mx_IconizedContextMenu_icon::before {
-            background-color: $accent;
         }
     }
 
@@ -160,24 +131,11 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    .mx_IconizedContextMenu_checked,
+    svg.mx_IconizedContextMenu_checked {
-    .mx_IconizedContextMenu_unchecked {
         margin-left: 16px;
         margin-right: -5px;
     }
 
-    .mx_IconizedContextMenu_developerTools::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/labs.svg");
-    }
-
-    .mx_IconizedContextMenu_checked::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-    }
-
-    .mx_IconizedContextMenu_unchecked::before {
-        content: unset;
-    }
-
     .mx_IconizedContextMenu_sublabel {
         margin-left: 20px;
         color: $tertiary-content;

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -1,113 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
-Copyright 2015, 2016 OpenMarket 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.
-*/
-
-.mx_MessageContextMenu {
-    .mx_IconizedContextMenu_icon {
-        width: 16px;
-        height: 16px;
-        display: block;
-
-        &::before {
-            content: "";
-            width: 16px;
-            height: 16px;
-            display: block;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-        }
-    }
-
-    .mx_MessageContextMenu_iconCollapse::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
-    }
-
-    .mx_MessageContextMenu_iconReport::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
-    }
-
-    .mx_MessageContextMenu_iconLink::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
-    }
-
-    .mx_MessageContextMenu_iconPermalink::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/share.svg");
-    }
-
-    .mx_MessageContextMenu_iconUnhidePreview::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
-    }
-
-    .mx_MessageContextMenu_iconOpenInMapSite::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
-    }
-
-    .mx_MessageContextMenu_iconEndPoll::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-    }
-
-    .mx_MessageContextMenu_iconForward::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/forward.svg");
-    }
-
-    .mx_MessageContextMenu_iconRedact::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
-    }
-
-    .mx_MessageContextMenu_iconResend::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
-    }
-
-    .mx_MessageContextMenu_iconSource::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
-    }
-
-    .mx_MessageContextMenu_iconQuote::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
-    }
-
-    .mx_MessageContextMenu_iconPin::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/pin.svg");
-    }
-
-    .mx_MessageContextMenu_iconUnpin::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/unpin.svg");
-    }
-
-    .mx_MessageContextMenu_iconCopy::before {
-        height: 16px;
-        mask-image: url($copy-button-url);
-        position: relative;
-        width: 16px;
-    }
-
-    .mx_MessageContextMenu_iconEdit::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/edit.svg");
-    }
-
-    .mx_MessageContextMenu_iconReply::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/reply.svg");
-    }
-
-    .mx_MessageContextMenu_iconReplyInThread::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
-    }
-
-    .mx_MessageContextMenu_iconReact::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/reaction-add.svg");
-    }
-
-    .mx_MessageContextMenu_iconViewInRoom::before {
-        mask-image: url("$(res)/img/element-icons/view-in-room.svg");
-    }
-
-    .mx_MessageContextMenu_jumpToEvent::before {
-        mask-image: url("$(res)/img/element-icons/child-relationship.svg");
-    }
-}

res/css/views/context_menus/_RoomGeneralContextMenu.pcss

@@ -1,31 +0,0 @@
-.mx_RoomGeneralContextMenu_iconStar::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
-}
-
-.mx_RoomGeneralContextMenu_iconArrowDown::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/arrow-down.svg");
-}
-
-.mx_RoomGeneralContextMenu_iconMarkAsRead::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/mark-as-read.svg");
-}
-
-.mx_RoomGeneralContextMenu_iconMarkAsUnread::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/mark-as-unread.svg");
-}
-
-.mx_RoomGeneralContextMenu_iconSettings::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
-}
-
-.mx_RoomGeneralContextMenu_iconCopyLink::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
-}
-
-.mx_RoomGeneralContextMenu_iconInvite::before {
-    mask-image: url("$(res)/img/element-icons/room/invite.svg");
-}
-
-.mx_RoomGeneralContextMenu_iconSignOut::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
-}

res/css/views/context_menus/_RoomNotificationContextMenu.pcss

@@ -1,12 +0,0 @@
-.mx_RoomNotificationContextMenu_iconBell::before {
-    mask-image: url("$(res)/img/element-icons/notifications.svg");
-}
-.mx_RoomNotificationContextMenu_iconBellDot::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg");
-}
-.mx_RoomNotificationContextMenu_iconBellMentions::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg");
-}
-.mx_RoomNotificationContextMenu_iconBellCrossed::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg");
-}

res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss

@@ -32,27 +32,20 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_ConfirmSpaceUserActionDialog_warning {
-        position: relative;
         border-radius: 8px;
-        padding: 12px 8px 12px 42px;
+        padding: 12px 8px;
         background-color: $header-panel-bg-color;
 
         font-size: $font-12px;
         line-height: $font-15px;
         color: $secondary-content;
 
-        &::before {
+        svg {
-            content: "";
-            position: absolute;
-            left: 10px;
-            top: calc(50% - 8px); /* vertical centering */
             height: 16px;
             width: 16px;
-            background-color: $secondary-content;
+            vertical-align: -4px;
-            mask-repeat: no-repeat;
+            margin-right: var(--cpd-space-1-5x);
-            mask-size: contain;
+            color: $secondary-content;
-            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
-            mask-position: center;
         }
     }
 }

res/css/views/dialogs/_FeedbackDialog.pcss

@@ -55,33 +55,17 @@ Please see LICENSE files in the repository root for full details.
             text-decoration: underline;
         }
 
-        &::before,
+        & > svg {
-        &::after {
-            content: "";
             position: absolute;
-            width: 40px;
-            height: 40px;
             left: 16px;
             top: 12px;
-        }
+            padding: var(--cpd-space-2x);
-
+            width: 24px;
-        &::before {
+            height: 24px;
             background-color: $icon-button-color;
+            color: $avatar-initial-color;
             border-radius: 8px;
         }
-
-        &::after {
-            background: $avatar-initial-color; /* TODO */
-            mask-position: center;
-            mask-size: 24px;
-            mask-repeat: no-repeat;
-        }
-    }
-
-    .mx_FeedbackDialog_reportBug {
-        &::after {
-            mask-image: url("$(res)/img/feather-customised/bug.svg");
-        }
     }
 
     .mx_FeedbackDialog_rateApp {
@@ -125,9 +109,5 @@ Please see LICENSE files in the repository root for full details.
             font-size: 24px;
             border-color: var(--cpd-color-bg-action-primary-rest);
         }
-
-        &::after {
-            mask-image: url("$(res)/img/element-icons/feedback.svg");
-        }
     }
 }

res/css/views/dialogs/_ForwardDialog.pcss

@@ -40,8 +40,7 @@ Please see LICENSE files in the repository root for full details.
         /* that our preview is unencrypted, which doesn't actually matter */
         /* We also hide download links to not encourage users to try interacting */
         .mx_EventTile_msgOption,
-        .mx_EventTile_e2eIcon_unencrypted,
+        .mx_EventTile_e2eIcon,
-        .mx_EventTile_e2eIcon_warning,
         .mx_MFileBody_download {
             display: none;
         }

res/css/views/dialogs/_InviteDialog.pcss

@@ -28,9 +28,9 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_InviteDialog_goButton {
-        min-width: 48px;
+        min-width: 86px;
         margin-inline-start: 10px;
-        height: 25px;
+        height: 41px;
         line-height: $font-25px;
     }
 }
@@ -223,14 +223,6 @@ Please see LICENSE files in the repository root for full details.
     margin-inline-start: auto;
 }
 
-.mx_InviteDialog_userDirectoryIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
-}
-
-.mx_InviteDialog_dialPadIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg");
-}
-
 .mx_InviteDialog_tile {
     cursor: pointer;
     display: grid;