Merge branch 'develop' into florianduros/rip-out-legacy-crypto/migrate-EventTile-isRoomEncrypted

# Conflicts: # test/test-utils/test-utils.ts
2024-11-27 10:30:50 +01:00 · 2024-11-27 10:30:50 +01:00 · 2e303902a3
commit 2e303902a3
parent ce1f66813c ec460326f1
59 changed files with 2115 additions and 472 deletions
--- a/.github/actions/download-verify-element-tarball/action.yml
+++ b/.github/actions/download-verify-element-tarball/action.yml
@ -0,0 +1,33 @@
+name: Upload release assets
+description: Uploads assets to an existing release and optionally signs them
+inputs:
+    tag:
+        description: GitHub release tag to fetch assets from.
+        required: true
+    out-file-path:
+        description: Path to where the webapp should be extracted to.
+        required: true
+runs:
+    using: composite
+    steps:
+        - name: Download current version for its old bundles
+          id: current_download
+          uses: robinraju/release-downloader@a96f54c1b5f5e09e47d9504526e96febd949d4c2 # v1
+          with:
+              tag: steps.current_version.outputs.version
+              fileName: element-*.tar.gz*
+              out-file-path: ${{ runner.temp }}/download-verify-element-tarball
+
+        - name: Verify tarball
+          run: gpg --verify element-*.tar.gz.asc element-*.tar.gz
+          working-directory: ${{ runner.temp }}/download-verify-element-tarball
+
+        - name: Extract tarball
+          run: tar xvzf element-*.tar.gz -C webapp --strip-components=1
+          working-directory: ${{ runner.temp }}/download-verify-element-tarball
+
+        - name: Move webapp to out-file-path
+          run: mv ${{ runner.temp }}/download-verify-element-tarball/webapp ${{ inputs.out-file-path }}
+
+        - name: Clean up temp directory
+          run: rm -R ${{ runner.temp }}/download-verify-element-tarball
--- a/.github/workflows/build_develop.yml
+++ b/.github/workflows/build_develop.yml
@ -20,6 +20,7 @@ jobs:
        permissions:
            checks: read
            pages: write
+            deployments: write
        env:
            R2_BUCKET: "element-web-develop"
            R2_URL: ${{ vars.CF_R2_S3_API }}
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@ -0,0 +1,88 @@
+# Manual deploy workflow for deploying to app.element.io & staging.element.io
+# Runs automatically for staging.element.io when an RC or Release is published
+# Note: Does *NOT* run automatically for app.element.io so that it gets tested on staging.element.io beforehand
+name: Build and Deploy ${{ inputs.site || 'staging.element.io' }}
+on:
+    release:
+        types: [published]
+    workflow_dispatch:
+        inputs:
+            site:
+                description: Which site to deploy to
+                required: true
+                default: staging.element.io
+                type: choice
+                options:
+                    - staging.element.io
+                    - app.element.io
+concurrency: ${{ inputs.site || 'staging.element.io' }}
+permissions: {}
+jobs:
+    deploy:
+        name: "Deploy to Cloudflare Pages"
+        runs-on: ubuntu-24.04
+        environment: ${{ inputs.site || 'staging.element.io' }}
+        permissions:
+            checks: read
+            deployments: write
+        env:
+            SITE: ${{ inputs.site || 'staging.element.io' }}
+        steps:
+            - name: Load GPG key
+              run: |
+                  curl https://packages.element.io/element-release-key.gpg | gpg --import
+                  gpg -k "$GPG_FINGERPRINT"
+              env:
+                  GPG_FINGERPRINT: ${{ secrets.GPG_FINGERPRINT }}
+
+            - name: Check current version on deployment
+              id: current_version
+              run: |
+                  echo "version=$(curl -s https://$SITE/version)" >> $GITHUB_OUTPUT
+
+            # The current version bundle melding dance is skipped if the version we're deploying is the same
+            # as then we're just doing a re-deploy of the same version with potentially different configs.
+            - name: Download current version for its old bundles
+              id: current_download
+              if: steps.current_version.outputs.version != github.ref_name
+              uses: element-hq/element-web/.github/actions/download-verify-element-tarball@${{ github.ref_name }}
+              with:
+                  tag: steps.current_version.outputs.version
+                  out-file-path: current_version
+
+            - name: Download target version
+              uses: element-hq/element-web/.github/actions/download-verify-element-tarball@${{ github.ref_name }}
+              with:
+                  tag: ${{ github.ref_name }}
+                  out-file-path: _deploy
+
+            - name: Merge current bundles into target
+              if: steps.current_download.outcome == 'success'
+              run: cp -vnpr current_version/bundles/* _deploy/bundles/
+
+            - name: Copy config
+              run: cp element.io/app/config.json _deploy/config.json
+
+            - name: Populate 404.html
+              run: echo "404 Not Found" > _deploy/404.html
+
+            - name: Populate _headers
+              run: cp .github/cfp_headers _deploy/_headers
+
+            - name: Wait for other steps to succeed
+              uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
+              with:
+                  ref: ${{ github.sha }}
+                  running-workflow-name: "Build and Deploy ${{ env.SITE }}"
+                  repo-token: ${{ secrets.GITHUB_TOKEN }}
+                  wait-interval: 10
+                  check-regexp: ^((?!SonarCloud|SonarQube|issue|board|label|Release|prepare|GitHub Pages).)*$
+
+            - name: Deploy to Cloudflare Pages
+              uses: cloudflare/pages-action@f0a1cd58cd66095dee69bfa18fa5efd1dde93bca # v1
+              with:
+                  apiToken: ${{ secrets.CF_PAGES_TOKEN }}
+                  accountId: ${{ secrets.CF_PAGES_ACCOUNT_ID }}
+                  projectName: ${{ env.SITE == 'staging.element.io' && 'element-web-staging' || 'element-web' }}
+                  directory: _deploy
+                  gitHubToken: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/dockerhub.yaml
+++ b/.github/workflows/dockerhub.yaml
@ -39,7 +39,7 @@ jobs:

            - name: Docker meta
              id: meta
-              uses: docker/metadata-action@8e5442c4ef9f78752691e2d8f8d19755c6f78e81 # v5
+              uses: docker/metadata-action@369eb591f429131d6889c46b94e711f089e6ca96 # v5
              with:
                  images: |
                      vectorim/element-web
@ -51,7 +51,7 @@ jobs:

            - name: Build and push
              id: build-and-push
-              uses: docker/build-push-action@4f58ea79222b3b9dc2c8bbdd6debcef730109a75 # v6
+              uses: docker/build-push-action@48aba3b46d1b1fec4febb7c5d0c644b249a11355 # v6
              with:
                  context: .
                  push: true
--- a/.github/workflows/pull_request.yaml
+++ b/.github/workflows/pull_request.yaml
@ -9,6 +9,6 @@ jobs:
    action:
        uses: matrix-org/matrix-js-sdk/.github/workflows/pull_request.yaml@develop
        permissions:
-            pull-requests: read
+            pull-requests: write
        secrets:
            ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -18,6 +18,7 @@ jobs:
        permissions:
            contents: write
            issues: write
+            pull-requests: read
        secrets:
            ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
            GPG_PRIVATE_KEY: ${{ secrets.GPG_PRIVATE_KEY }}
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@ -104,7 +104,7 @@ jobs:

            - name: Skip SonarCloud in merge queue
              if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@1f26a0237cd1a57626fbb5a0eb2494c9b8797d07
+              uses: guibranco/github-status-action-v2@66088c44e212a906c32a047529a213d81809ec1c
              with:
                  authToken: ${{ secrets.GITHUB_TOKEN }}
                  state: success
--- a/mocks/FontManager.js
+++ b/mocks/FontManager.js
@ -1,6 +0,0 @@
-// Stub out FontManager for tests as it doesn't validate anything we don't already know given
-// our fixed test environment and it requires the installation of node-canvas.
-
-module.exports = {
-    fixupColorFonts: () => Promise.resolve(),
-};
--- a/jest.config.ts
+++ b/jest.config.ts
@ -32,7 +32,6 @@ const config: Config = {
        "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
        "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
        "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
-        "FontManager.ts": "<rootDir>/__mocks__/FontManager.js",
        "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
        "^!!raw-loader!.*": "jest-raw-loader",
        "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
--- a/package.json
+++ b/package.json
@ -114,10 +114,10 @@
        "jsrsasign": "^11.0.0",
        "jszip": "^3.7.0",
        "katex": "^0.16.0",
-        "linkify-element": "4.1.3",
-        "linkify-react": "4.1.3",
-        "linkify-string": "4.1.3",
-        "linkifyjs": "4.1.3",
+        "linkify-element": "4.1.4",
+        "linkify-react": "4.1.4",
+        "linkify-string": "4.1.4",
+        "linkifyjs": "4.1.4",
        "lodash": "^4.17.21",
        "maplibre-gl": "^4.0.0",
        "matrix-encrypt-attachment": "^1.0.3",
--- a/playwright/Dockerfile
+++ b/playwright/Dockerfile
@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.48.2-jammy
+FROM mcr.microsoft.com/playwright:v1.49.0-jammy

 WORKDIR /work

--- a/playwright/e2e/crypto/decryption-failure-messages.spec.ts
+++ b/playwright/e2e/crypto/decryption-failure-messages.spec.ts
@ -67,6 +67,9 @@ test.describe("Cryptography", function () {
            await page.locator(".mx_AuthPage").getByRole("button", { name: "I'll verify later" }).click();
            await app.viewRoomByName("Test room");

+            // In this case, the call to cryptoApi.isEncryptionEnabledInRoom is taking a long time to resolve
+            await page.waitForTimeout(1000);
+
            // There should be two historical events in the timeline
            const tiles = await page.locator(".mx_EventTile").all();
            expect(tiles.length).toBeGreaterThanOrEqual(2);
--- a/playwright/e2e/crypto/event-shields.spec.ts
+++ b/playwright/e2e/crypto/event-shields.spec.ts
@ -16,6 +16,7 @@ import {
    logOutOfElement,
    verify,
 } from "./utils";
+import { bootstrapCrossSigningForClient } from "../../pages/client.ts";

 test.describe("Cryptography", function () {
    test.use({
@ -307,5 +308,30 @@ test.describe("Cryptography", function () {
            const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" });
            await expect(penultimate.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
        });
+
+        test("should show correct shields on events sent by users with changed identity", async ({
+            page,
+            app,
+            bot: bob,
+            homeserver,
+        }) => {
+            // Verify Bob
+            await verify(app, bob);
+
+            // Bob logs in a new device and resets cross-signing
+            const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
+            await bootstrapCrossSigningForClient(await bobSecondDevice.prepareClient(), bob.credentials, true);
+
+            /* should show an error for a message from a previously verified device */
+            await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
+            const last = page.locator(".mx_EventTile_last");
+            await expect(last).toContainText("test encrypted from user that was previously verified");
+            const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
+            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+            await lastE2eIcon.focus();
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                "Sender's verified identity has changed",
+            );
+        });
    });
 });
--- a/playwright/plugins/homeserver/synapse/index.ts
+++ b/playwright/plugins/homeserver/synapse/index.ts
@ -20,7 +20,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for synapse docker image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:127c68d4468019ce363c8b2fd7a42a3ef50710eb3aaf288a2295dd4623ce9f54";
+const DOCKER_TAG = "develop@sha256:e163b15bf4905e4067dece856cca00e6ac8d1d655f4f1307978eee256b3ea775";

 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
    const templateDir = path.join(__dirname, "templates", opts.template);
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@ -319,6 +319,7 @@
@import "./views/rooms/_ThirdPartyMemberInfo.pcss";
@import "./views/rooms/_ThreadSummary.pcss";
@import "./views/rooms/_TopUnreadMessagesBar.pcss";
+@import "./views/rooms/_UserIdentityWarning.pcss";
@import "./views/rooms/_VoiceRecordComposerTile.pcss";
@import "./views/rooms/_WhoIsTypingTile.pcss";
@import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";
--- a/res/css/views/rooms/_UserIdentityWarning.pcss
+++ b/res/css/views/rooms/_UserIdentityWarning.pcss
@ -0,0 +1,28 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserIdentityWarning {
+    /* 42px is the padding-left of .mx_MessageComposer_wrapper in res/css/views/rooms/_MessageComposer.pcss */
+    margin-left: calc(-42px + var(--RoomView_MessageList-padding));
+
+    .mx_UserIdentityWarning_row {
+        display: flex;
+        align-items: center;
+
+        .mx_BaseAvatar {
+            margin-left: var(--cpd-space-2x);
+        }
+        .mx_UserIdentityWarning_main {
+            margin-left: var(--cpd-space-6x);
+            flex-grow: 1;
+        }
+    }
+}
+
+.mx_MessageComposer.mx_MessageComposer--compact > .mx_UserIdentityWarning {
+    margin-left: calc(-25px + var(--RoomView_MessageList-padding));
+}
--- a/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2
+++ b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2
--- a/res/themes/light/css/_fonts.pcss
+++ b/res/themes/light/css/_fonts.pcss
@ -143,3 +143,21 @@ $inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/* Twemoji COLR */
+@font-face {
+    font-family: "Twemoji";
+    font-weight: 400;
+    src: url("$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2") format("woff2");
+}
+/* For at least Chrome on Windows 10, we have to explictly add extra weights for the emoji to appear in bold messages, etc. */
+@font-face {
+    font-family: "Twemoji";
+    font-weight: 600;
+    src: url("$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Twemoji";
+    font-weight: 700;
+    src: url("$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2") format("woff2");
+}
--- a/src/@types/matrix-js-sdk.d.ts
+++ b/src/@types/matrix-js-sdk.d.ts
@ -22,6 +22,13 @@ declare module "matrix-js-sdk/src/types" {
        [BLURHASH_FIELD]?: string;
    }

+    export interface ImageInfo {
+        /**
+         * @see https://github.com/matrix-org/matrix-spec-proposals/pull/4230
+         */
+        "org.matrix.msc4230.is_animated"?: boolean;
+    }
+
    export interface StateEvents {
        // Jitsi-backed video room state events
        [JitsiCallMemberEventType]: JitsiCallMemberContent;
--- a/src/ContentMessages.ts
+++ b/src/ContentMessages.ts
@ -56,6 +56,7 @@ import { createThumbnail } from "./utils/image-media";
 import { attachMentions, attachRelation } from "./components/views/rooms/SendMessageComposer";
 import { doMaybeLocalRoomAction } from "./utils/local-room";
 import { SdkContextClass } from "./contexts/SDKContext";
+import { blobIsAnimated } from "./utils/Image.ts";

 // scraped out of a macOS hidpi (5660ppm) screenshot png
 //                  5669 px (x-axis)      , 5669 px (y-axis)      , per metre
@ -150,15 +151,20 @@ async function infoForImageFile(matrixClient: MatrixClient, roomId: string, imag
        thumbnailType = "image/jpeg";
    }

+    // We don't await this immediately so it can happen in the background
+    const isAnimatedPromise = blobIsAnimated(imageFile.type, imageFile);
+
    const imageElement = await loadImageElement(imageFile);

    const result = await createThumbnail(imageElement.img, imageElement.width, imageElement.height, thumbnailType);
    const imageInfo = result.info;

+    imageInfo["org.matrix.msc4230.is_animated"] = await isAnimatedPromise;
+
    // For lesser supported image types, always include the thumbnail even if it is larger
    if (!ALWAYS_INCLUDE_THUMBNAIL.includes(imageFile.type)) {
        // we do all sizing checks here because we still rely on thumbnail generation for making a blurhash from.
-        const sizeDifference = imageFile.size - imageInfo.thumbnail_info!.size;
+        const sizeDifference = imageFile.size - imageInfo.thumbnail_info!.size!;
        if (
            // image is small enough already
            imageFile.size <= IMAGE_SIZE_THRESHOLD_THUMBNAIL ||
--- a/src/DeviceListener.ts
+++ b/src/DeviceListener.ts
@ -230,12 +230,15 @@ export default class DeviceListener {
    private async getKeyBackupInfo(): Promise<KeyBackupInfo | null> {
        if (!this.client) return null;
        const now = new Date().getTime();
+        const crypto = this.client.getCrypto();
+        if (!crypto) return null;
+
        if (
            !this.keyBackupInfo ||
            !this.keyBackupFetchedAt ||
            this.keyBackupFetchedAt < now - KEY_BACKUP_POLL_INTERVAL
        ) {
-            this.keyBackupInfo = await this.client.getKeyBackupVersion();
+            this.keyBackupInfo = await crypto.getKeyBackupInfo();
            this.keyBackupFetchedAt = now;
        }
        return this.keyBackupInfo;
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
@ -279,7 +279,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
        if (!forceReset) {
            try {
                this.setState({ phase: Phase.Loading });
-                backupInfo = await cli.getKeyBackupVersion();
+                backupInfo = await crypto.getKeyBackupInfo();
            } catch (e) {
                logger.error("Error fetching backup data from server", e);
                this.setState({ phase: Phase.LoadError });
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@ -23,7 +23,6 @@ import classNames from "classnames";
 import { isOnlyCtrlOrCmdKeyEvent, Key } from "../../Keyboard";
 import PageTypes from "../../PageTypes";
 import MediaDeviceHandler from "../../MediaDeviceHandler";
-import { fixupColorFonts } from "../../utils/FontManager";
 import dis from "../../dispatcher/dispatcher";
 import { IMatrixClientCreds } from "../../MatrixClientPeg";
 import SettingsStore from "../../settings/SettingsStore";
@ -149,8 +148,6 @@ class LoggedInView extends React.Component<IProps, IState> {

        MediaDeviceHandler.loadDevices();

-        fixupColorFonts();
-
        this._roomView = React.createRef();
        this._resizeContainer = React.createRef();
        this.resizeHandler = React.createRef();
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@ -1638,7 +1638,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
            } else {
                // otherwise check the server to see if there's a new one
                try {
-                    newVersionInfo = await cli.getKeyBackupVersion();
+                    newVersionInfo = (await cli.getCrypto()?.getKeyBackupInfo()) ?? null;
                    if (newVersionInfo !== null) haveNewVersion = true;
                } catch (e) {
                    logger.error("Saw key backup error but failed to check backup version!", e);
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@ -9,7 +9,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import React, { ChangeEvent, ComponentProps, createRef, ReactElement, ReactNode, RefObject, useContext } from "react";
+import React, {
+    ChangeEvent,
+    ComponentProps,
+    createRef,
+    ReactElement,
+    ReactNode,
+    RefObject,
+    useContext,
+    JSX,
+} from "react";
 import classNames from "classnames";
 import {
    IRecommendedVersion,
@ -29,6 +38,7 @@ import {
    MatrixError,
    ISearchResults,
    THREAD_RELATION_TYPE,
+    MatrixClient,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
@ -233,6 +243,11 @@ export interface IRoomState {
    liveTimeline?: EventTimeline;
    narrow: boolean;
    msc3946ProcessDynamicPredecessor: boolean;
+    /**
+     * Whether the room is encrypted or not.
+     * If null, we are still determining the encryption status.
+     */
+    isRoomEncrypted: boolean | null;

    canAskToJoin: boolean;
    promptAskToJoin: boolean;
@ -417,6 +432,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
            canAskToJoin: this.askToJoinEnabled,
            promptAskToJoin: false,
            viewRoomOpts: { buttons: [] },
+            isRoomEncrypted: null,
        };
    }

@ -847,7 +863,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        return isManuallyShown && widgets.length > 0;
    }

-    public componentDidMount(): void {
+    public async componentDidMount(): Promise<void> {
        this.unmounted = false;

        this.dispatcherRef = defaultDispatcher.register(this.onAction);
@ -1342,13 +1358,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        this.context.widgetLayoutStore.on(WidgetLayoutStore.emissionForRoom(room), this.onWidgetLayoutChange);

        this.calculatePeekRules(room);
-        this.updatePreviewUrlVisibility(room);
        this.loadMembersIfJoined(room);
        this.calculateRecommendedVersion(room);
-        this.updateE2EStatus(room);
        this.updatePermissions(room);
        this.checkWidgets(room);
        this.loadVirtualRoom(room);
+        this.updateRoomEncrypted(room);

        if (
            this.getMainSplitContentType(room) !== MainSplitContentType.Timeline &&
@ -1377,6 +1392,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        return room?.currentState.getStateEvents(EventType.RoomTombstone, "") ?? undefined;
    }

+    private async getIsRoomEncrypted(roomId = this.state.roomId): Promise<boolean> {
+        const crypto = this.context.client?.getCrypto();
+        if (!crypto || !roomId) return false;
+
+        return await crypto.isEncryptionEnabledInRoom(roomId);
+    }
+
    private async calculateRecommendedVersion(room: Room): Promise<void> {
        const upgradeRecommendation = await room.getRecommendedVersion();
        if (this.unmounted) return;
@ -1409,12 +1431,15 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        });
    }

-    private updatePreviewUrlVisibility({ roomId }: Room): void {
-        // URL Previews in E2EE rooms can be a privacy leak so use a different setting which is per-room explicit
-        const key = this.context.client?.isRoomEncrypted(roomId) ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled";
-        this.setState({
-            showUrlPreview: SettingsStore.getValue(key, roomId),
-        });
+    private updatePreviewUrlVisibility(room: Room): void {
+        this.setState(({ isRoomEncrypted }) => ({
+            showUrlPreview: this.getPreviewUrlVisibility(room, isRoomEncrypted),
+        }));
+    }
+
+    private getPreviewUrlVisibility({ roomId }: Room, isRoomEncrypted: boolean | null): boolean {
+        const key = isRoomEncrypted ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled";
+        return SettingsStore.getValue(key, roomId);
    }

    private onRoom = (room: Room): void => {
@ -1456,7 +1481,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
    };

    private async updateE2EStatus(room: Room): Promise<void> {
-        if (!this.context.client?.isRoomEncrypted(room.roomId)) return;
+        if (!this.context.client || !this.state.isRoomEncrypted) return;

        // If crypto is not currently enabled, we aren't tracking devices at all,
        // so we don't know what the answer is. Let's error on the safe side and show
@ -1467,33 +1492,54 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {

        if (this.context.client.getCrypto()) {
            /* At this point, the user has encryption on and cross-signing on */
-            e2eStatus = await shieldStatusForRoom(this.context.client, room);
-            RoomView.e2eStatusCache.set(room.roomId, e2eStatus);
+            e2eStatus = await this.cacheAndGetE2EStatus(room, this.context.client);
            if (this.unmounted) return;
            this.setState({ e2eStatus });
        }
    }

+    private async cacheAndGetE2EStatus(room: Room, client: MatrixClient): Promise<E2EStatus> {
+        const e2eStatus = await shieldStatusForRoom(client, room);
+        RoomView.e2eStatusCache.set(room.roomId, e2eStatus);
+        return e2eStatus;
+    }
+
    private onUrlPreviewsEnabledChange = (): void => {
        if (this.state.room) {
            this.updatePreviewUrlVisibility(this.state.room);
        }
    };

-    private onRoomStateEvents = (ev: MatrixEvent, state: RoomState): void => {
+    private onRoomStateEvents = async (ev: MatrixEvent, state: RoomState): Promise<void> => {
        // ignore if we don't have a room yet
-        if (!this.state.room || this.state.room.roomId !== state.roomId) return;
+        if (!this.state.room || this.state.room.roomId !== state.roomId || !this.context.client) return;

        switch (ev.getType()) {
            case EventType.RoomTombstone:
                this.setState({ tombstone: this.getRoomTombstone() });
                break;
-
+            case EventType.RoomEncryption: {
+                await this.updateRoomEncrypted();
+                break;
+            }
            default:
                this.updatePermissions(this.state.room);
        }
    };

+    private async updateRoomEncrypted(room = this.state.room): Promise<void> {
+        if (!room || !this.context.client) return;
+
+        const isRoomEncrypted = await this.getIsRoomEncrypted(room.roomId);
+        const newE2EStatus = isRoomEncrypted ? await this.cacheAndGetE2EStatus(room, this.context.client) : null;
+
+        this.setState({
+            isRoomEncrypted,
+            showUrlPreview: this.getPreviewUrlVisibility(room, isRoomEncrypted),
+            ...(newE2EStatus && { e2eStatus: newE2EStatus }),
+        });
+    }
+
    private onRoomStateUpdate = (state: RoomState): void => {
        // ignore members in other rooms
        if (state.roomId !== this.state.room?.roomId) {
@ -2027,6 +2073,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {

    public render(): ReactNode {
        if (!this.context.client) return null;
+        const { isRoomEncrypted } = this.state;
+        const isRoomEncryptionLoading = isRoomEncrypted === null;

        if (this.state.room instanceof LocalRoom) {
            if (this.state.room.state === LocalRoomState.CREATING) {
@ -2242,14 +2290,16 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        let aux: JSX.Element | undefined;
        let previewBar;
        if (this.state.timelineRenderingType === TimelineRenderingType.Search) {
+            if (!isRoomEncryptionLoading) {
                aux = (
                    <RoomSearchAuxPanel
                        searchInfo={this.state.search}
                        onCancelClick={this.onCancelSearchClick}
                        onSearchScopeChange={this.onSearchScopeChange}
-                    isRoomEncrypted={this.context.client.isRoomEncrypted(this.state.room.roomId)}
+                        isRoomEncrypted={isRoomEncrypted}
                    />
                );
+            }
        } else if (showRoomUpgradeBar) {
            aux = <RoomUpgradeWarningBar room={this.state.room} />;
        } else if (myMembership !== KnownMembership.Join) {
@ -2325,8 +2375,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {

        let messageComposer;
        const showComposer =
+            !isRoomEncryptionLoading &&
            // joined and not showing search results
-            myMembership === KnownMembership.Join && !this.state.search;
+            myMembership === KnownMembership.Join &&
+            !this.state.search;
        if (showComposer) {
            messageComposer = (
                <MessageComposer
@ -2367,7 +2419,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
            highlightedEventId = this.state.initialEventId;
        }

-        const messagePanel = (
+        let messagePanel: JSX.Element | undefined;
+        if (!isRoomEncryptionLoading) {
+            messagePanel = (
                <TimelinePanel
                    ref={this.gatherTimelinePanelRef}
                    timelineSet={this.state.room.getUnfilteredTimelineSet()}
@ -2395,6 +2449,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                    editState={this.state.editState}
                />
            );
+        }

        let topUnreadMessagesBar: JSX.Element | undefined;
        // Do not show TopUnreadMessagesBar if we have search results showing, it makes no sense
@ -2415,7 +2470,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
            );
        }

-        const showRightPanel = this.state.room && this.state.showRightPanel;
+        const showRightPanel = !isRoomEncryptionLoading && this.state.room && this.state.showRightPanel;

        const rightPanel = showRightPanel ? (
            <RightPanel
--- a/src/components/views/dialogs/LogoutDialog.tsx
+++ b/src/components/views/dialogs/LogoutDialog.tsx
@ -109,7 +109,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
        }

        // backup is not active. see if there is a backup version on the server we ought to back up to.
-        const backupInfo = await client.getKeyBackupVersion();
+        const backupInfo = await crypto.getKeyBackupInfo();
        this.setState({ backupStatus: backupInfo ? BackupStatus.SERVER_BACKUP_BUT_DISABLED : BackupStatus.NO_BACKUP });
    }

--- a/src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx
+++ b/src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx
@ -258,7 +258,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
        });
        try {
            const cli = MatrixClientPeg.safeGet();
-            const backupInfo = await cli.getKeyBackupVersion();
+            const backupInfo = (await cli.getCrypto()?.getKeyBackupInfo()) ?? null;
            const has4S = await cli.secretStorage.hasKey();
            const backupKeyStored = has4S ? await cli.isKeyBackupKeyStored() : null;
            this.setState({
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@ -275,7 +275,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
        }

        const content = this.props.mxEvent.getContent<ImageContent>();
-        let isAnimated = mayBeAnimated(content.info?.mimetype);
+        let isAnimated = content.info?.["org.matrix.msc4230.is_animated"] ?? mayBeAnimated(content.info?.mimetype);

        // If there is no included non-animated thumbnail then we will generate our own, we can't depend on the server
        // because 1. encryption and 2. we can't ask the server specifically for a non-animated thumbnail.
@ -298,8 +298,15 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                }

                try {
-                    const blob = await this.props.mediaEventHelper!.sourceBlob.value;
-                    if (!(await blobIsAnimated(content.info?.mimetype, blob))) {
+                    // If we didn't receive the MSC4230 is_animated flag
+                    // then we need to check if the image is animated by downloading it.
+                    if (
+                        content.info?.["org.matrix.msc4230.is_animated"] === false ||
+                        !(await blobIsAnimated(
+                            content.info?.mimetype,
+                            await this.props.mediaEventHelper!.sourceBlob.value,
+                        ))
+                    ) {
                        isAnimated = false;
                    }

--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@ -785,6 +785,14 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                case EventShieldReason.MISMATCHED_SENDER_KEY:
                    shieldReasonMessage = _t("encryption|event_shield_reason_mismatched_sender_key");
                    break;
+
+                case EventShieldReason.SENT_IN_CLEAR:
+                    shieldReasonMessage = _t("common|unencrypted");
+                    break;
+
+                case EventShieldReason.VERIFICATION_VIOLATION:
+                    shieldReasonMessage = _t("timeline|decryption_failure|sender_identity_previously_verified");
+                    break;
            }

            if (this.state.shieldColour === EventShieldColour.GREY) {
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@ -30,6 +30,7 @@ import E2EIcon from "./E2EIcon";
 import SettingsStore from "../../../settings/SettingsStore";
 import { aboveLeftOf, MenuProps } from "../../structures/ContextMenu";
 import ReplyPreview from "./ReplyPreview";
+import { UserIdentityWarning } from "./UserIdentityWarning";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
 import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
@ -669,6 +670,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
            <Tooltip open={isTooltipOpen} description={formatTimeLeft(secondsLeft)} placement="bottom">
                <div className={classes} ref={this.ref} role="region" aria-label={_t("a11y|message_composer")}>
                    <div className="mx_MessageComposer_wrapper">
+                        <UserIdentityWarning room={this.props.room} key={this.props.room.roomId} />
                        <ReplyPreview
                            replyToEvent={this.props.replyToEvent}
                            permalinkCreator={this.props.permalinkCreator}
--- a/src/components/views/rooms/UserIdentityWarning.tsx
+++ b/src/components/views/rooms/UserIdentityWarning.tsx
@ -0,0 +1,328 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { useCallback, useRef, useState } from "react";
+import { EventType, KnownMembership, MatrixEvent, Room, RoomStateEvent, RoomMember } from "matrix-js-sdk/src/matrix";
+import { CryptoApi, CryptoEvent, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
+import { logger } from "matrix-js-sdk/src/logger";
+import { Button, Separator } from "@vector-im/compound-web";
+
+import { _t } from "../../../languageHandler";
+import MemberAvatar from "../avatars/MemberAvatar";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
+import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
+
+interface UserIdentityWarningProps {
+    /**
+     * The current room being viewed.
+     */
+    room: Room;
+    /**
+     * The ID of the room being viewed.  This is used to ensure that the
+     * component's state and references are cleared when the room changes.
+     */
+    key: string;
+}
+
+/**
+ * Does the given user's identity need to be approved?
+ */
+async function userNeedsApproval(crypto: CryptoApi, userId: string): Promise<boolean> {
+    const verificationStatus = await crypto.getUserVerificationStatus(userId);
+    return verificationStatus.needsUserApproval;
+}
+
+/**
+ * Whether the component is uninitialised, is in the process of initialising, or
+ * has completed initialising.
+ */
+enum InitialisationStatus {
+    Uninitialised,
+    Initialising,
+    Completed,
+}
+
+/**
+ * Displays a banner warning when there is an issue with a user's identity.
+ *
+ * Warns when an unverified user's identity has changed, and gives the user a
+ * button to acknowledge the change.
+ */
+export const UserIdentityWarning: React.FC<UserIdentityWarningProps> = ({ room }) => {
+    const cli = useMatrixClientContext();
+    const crypto = cli.getCrypto();
+
+    // The current room member that we are prompting the user to approve.
+    // `undefined` means we are not currently showing a prompt.
+    const [currentPrompt, setCurrentPrompt] = useState<RoomMember | undefined>(undefined);
+
+    // Whether or not we've already initialised the component by loading the
+    // room membership.
+    const initialisedRef = useRef<InitialisationStatus>(InitialisationStatus.Uninitialised);
+    // Which room members need their identity approved.
+    const membersNeedingApprovalRef = useRef<Map<string, RoomMember>>(new Map());
+    // For each user, we assign a sequence number to each verification status
+    // that we get, or fetch.
+    //
+    // Since fetching a verification status is asynchronous, we could get an
+    // update in the middle of fetching the verification status, which could
+    // mean that the status that we fetched is out of date.  So if the current
+    // sequence number is not the same as the sequence number when we started
+    // the fetch, then we drop our fetched result, under the assumption that the
+    // update that we received is the most up-to-date version.  If it is in fact
+    // not the most up-to-date version, then we should be receiving a new update
+    // soon with the newer value, so it will fix itself in the end.
+    //
+    // We also assign a sequence number when the user leaves the room, in order
+    // to prevent prompting about a user who leaves while we are fetching their
+    // verification status.
+    const verificationStatusSequencesRef = useRef<Map<string, number>>(new Map());
+    const incrementVerificationStatusSequence = (userId: string): number => {
+        const verificationStatusSequences = verificationStatusSequencesRef.current;
+        const value = verificationStatusSequences.get(userId);
+        const newValue = value === undefined ? 1 : value + 1;
+        verificationStatusSequences.set(userId, newValue);
+        return newValue;
+    };
+
+    // Update the current prompt.  Select a new user if needed, or hide the
+    // warning if we don't have anyone to warn about.
+    const updateCurrentPrompt = useCallback((): undefined => {
+        const membersNeedingApproval = membersNeedingApprovalRef.current;
+        // We have to do this in a callback to `setCurrentPrompt`
+        // because this function could have been called after an
+        // `await`, and the `currentPrompt` that this function would
+        // have may be outdated.
+        setCurrentPrompt((currentPrompt) => {
+            // If we're already displaying a warning, and that user still needs
+            // approval, continue showing that user.
+            if (currentPrompt && membersNeedingApproval.has(currentPrompt.userId)) return currentPrompt;
+
+            if (membersNeedingApproval.size === 0) {
+                return undefined;
+            }
+
+            // We pick the user with the smallest user ID.
+            const keys = Array.from(membersNeedingApproval.keys()).sort((a, b) => a.localeCompare(b));
+            const selection = membersNeedingApproval.get(keys[0]!);
+            return selection;
+        });
+    }, []);
+
+    // Add a user to the membersNeedingApproval map, and update the current
+    // prompt if necessary. The user will only be added if they are actually a
+    // member of the room. If they are not a member, this function will do
+    // nothing.
+    const addMemberNeedingApproval = useCallback(
+        (userId: string, member?: RoomMember): void => {
+            if (userId === cli.getUserId()) {
+                // We always skip our own user, because we can't pin our own identity.
+                return;
+            }
+            member = member ?? room.getMember(userId) ?? undefined;
+            if (!member) return;
+
+            membersNeedingApprovalRef.current.set(userId, member);
+            // We only select the prompt if we are done initialising,
+            // because we will select the prompt after we're done
+            // initialising, and we want to start by displaying a warning
+            // for the user with the smallest ID.
+            if (initialisedRef.current === InitialisationStatus.Completed) {
+                updateCurrentPrompt();
+            }
+        },
+        [cli, room, updateCurrentPrompt],
+    );
+
+    // For each user in the list check if their identity needs approval, and if
+    // so, add them to the membersNeedingApproval map and update the prompt if
+    // needed.
+    const addMembersWhoNeedApproval = useCallback(
+        async (members: RoomMember[]): Promise<void> => {
+            const verificationStatusSequences = verificationStatusSequencesRef.current;
+
+            const promises: Promise<void>[] = [];
+
+            for (const member of members) {
+                const userId = member.userId;
+                const sequenceNum = incrementVerificationStatusSequence(userId);
+                promises.push(
+                    userNeedsApproval(crypto!, userId).then((needsApproval) => {
+                        if (needsApproval) {
+                            // Only actually update the list if we have the most
+                            // recent value.
+                            if (verificationStatusSequences.get(userId) === sequenceNum) {
+                                addMemberNeedingApproval(userId, member);
+                            }
+                        }
+                    }),
+                );
+            }
+
+            await Promise.all(promises);
+        },
+        [crypto, addMemberNeedingApproval],
+    );
+
+    // Remove a user from the membersNeedingApproval map, and update the current
+    // prompt if necessary.
+    const removeMemberNeedingApproval = useCallback(
+        (userId: string): void => {
+            membersNeedingApprovalRef.current.delete(userId);
+            updateCurrentPrompt();
+        },
+        [updateCurrentPrompt],
+    );
+
+    // Initialise the component.  Get the room members, check which ones need
+    // their identity approved, and pick one to display.
+    const loadMembers = useCallback(async (): Promise<void> => {
+        if (!crypto || initialisedRef.current !== InitialisationStatus.Uninitialised) {
+            return;
+        }
+        // If encryption is not enabled in the room, we don't need to do
+        // anything.  If encryption gets enabled later, we will retry, via
+        // onRoomStateEvent.
+        if (!(await crypto.isEncryptionEnabledInRoom(room.roomId))) {
+            return;
+        }
+        initialisedRef.current = InitialisationStatus.Initialising;
+
+        const members = await room.getEncryptionTargetMembers();
+        await addMembersWhoNeedApproval(members);
+
+        updateCurrentPrompt();
+        initialisedRef.current = InitialisationStatus.Completed;
+    }, [crypto, room, addMembersWhoNeedApproval, updateCurrentPrompt]);
+
+    loadMembers().catch((e) => {
+        logger.error("Error initialising UserIdentityWarning:", e);
+    });
+
+    // When a user's verification status changes, we check if they need to be
+    // added/removed from the set of members needing approval.
+    const onUserVerificationStatusChanged = useCallback(
+        (userId: string, verificationStatus: UserVerificationStatus): void => {
+            // If we haven't started initialising, that means that we're in a
+            // room where we don't need to display any warnings.
+            if (initialisedRef.current === InitialisationStatus.Uninitialised) {
+                return;
+            }
+
+            incrementVerificationStatusSequence(userId);
+
+            if (verificationStatus.needsUserApproval) {
+                addMemberNeedingApproval(userId);
+            } else {
+                removeMemberNeedingApproval(userId);
+            }
+        },
+        [addMemberNeedingApproval, removeMemberNeedingApproval],
+    );
+    useTypedEventEmitter(cli, CryptoEvent.UserTrustStatusChanged, onUserVerificationStatusChanged);
+
+    // We watch for encryption events (since we only display warnings in
+    // encrypted rooms), and for membership changes (since we only display
+    // warnings for users in the room).
+    const onRoomStateEvent = useCallback(
+        async (event: MatrixEvent): Promise<void> => {
+            if (!crypto || event.getRoomId() !== room.roomId) {
+                return;
+            }
+
+            const eventType = event.getType();
+            if (eventType === EventType.RoomEncryption && event.getStateKey() === "") {
+                // Room is now encrypted, so we can initialise the component.
+                return loadMembers().catch((e) => {
+                    logger.error("Error initialising UserIdentityWarning:", e);
+                });
+            } else if (eventType !== EventType.RoomMember) {
+                return;
+            }
+
+            // We're processing an m.room.member event
+
+            if (initialisedRef.current === InitialisationStatus.Uninitialised) {
+                return;
+            }
+
+            const userId = event.getStateKey();
+
+            if (!userId) return;
+
+            if (
+                event.getContent().membership === KnownMembership.Join ||
+                (event.getContent().membership === KnownMembership.Invite && room.shouldEncryptForInvitedMembers())
+            ) {
+                // Someone's membership changed and we will now encrypt to them.  If
+                // their identity needs approval, show a warning.
+                const member = room.getMember(userId);
+                if (member) {
+                    await addMembersWhoNeedApproval([member]).catch((e) => {
+                        logger.error("Error adding member in UserIdentityWarning:", e);
+                    });
+                }
+            } else {
+                // Someone's membership changed and we no longer encrypt to them.
+                // If we're showing a warning about them, we don't need to any more.
+                removeMemberNeedingApproval(userId);
+                incrementVerificationStatusSequence(userId);
+            }
+        },
+        [crypto, room, addMembersWhoNeedApproval, removeMemberNeedingApproval, loadMembers],
+    );
+    useTypedEventEmitter(cli, RoomStateEvent.Events, onRoomStateEvent);
+
+    if (!crypto || !currentPrompt) return null;
+
+    const confirmIdentity = async (): Promise<void> => {
+        await crypto.pinCurrentUserIdentity(currentPrompt.userId);
+    };
+
+    return (
+        <div className="mx_UserIdentityWarning">
+            <Separator />
+            <div className="mx_UserIdentityWarning_row">
+                <MemberAvatar member={currentPrompt} title={currentPrompt.userId} size="30px" />
+                <span className="mx_UserIdentityWarning_main">
+                    {currentPrompt.rawDisplayName === currentPrompt.userId
+                        ? _t(
+                              "encryption|pinned_identity_changed_no_displayname",
+                              { userId: currentPrompt.userId },
+                              {
+                                  a: substituteATag,
+                                  b: substituteBTag,
+                              },
+                          )
+                        : _t(
+                              "encryption|pinned_identity_changed",
+                              { displayName: currentPrompt.rawDisplayName, userId: currentPrompt.userId },
+                              {
+                                  a: substituteATag,
+                                  b: substituteBTag,
+                              },
+                          )}
+                </span>
+                <Button kind="primary" size="sm" onClick={confirmIdentity}>
+                    {_t("action|ok")}
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+function substituteATag(sub: string): React.ReactNode {
+    return (
+        <a href="https://element.io/help#encryption18" target="_blank" rel="noreferrer noopener">
+            {sub}
+        </a>
+    );
+}
+
+function substituteBTag(sub: string): React.ReactNode {
+    return <b>{sub}</b>;
+}
--- a/src/components/views/settings/SecureBackupPanel.tsx
+++ b/src/components/views/settings/SecureBackupPanel.tsx
@ -118,7 +118,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
        this.getUpdatedDiagnostics();
        try {
            const cli = MatrixClientPeg.safeGet();
-            const backupInfo = await cli.getKeyBackupVersion();
+            const backupInfo = (await cli.getCrypto()?.getKeyBackupInfo()) ?? null;
            const backupTrustInfo = backupInfo ? await cli.getCrypto()?.isKeyBackupTrusted(backupInfo) : undefined;

            const activeBackupVersion = (await cli.getCrypto()?.getActiveSessionBackupVersion()) ?? null;
@ -192,12 +192,9 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
                if (!proceed) return;
                this.setState({ loading: true });
                const versionToDelete = this.state.backupInfo!.version!;
-                MatrixClientPeg.safeGet()
-                    .getCrypto()
-                    ?.deleteKeyBackupVersion(versionToDelete)
-                    .then(() => {
-                        this.loadBackupStatus();
-                    });
+                // deleteKeyBackupVersion fires a key backup status event
+                // which will update the UI
+                MatrixClientPeg.safeGet().getCrypto()?.deleteKeyBackupVersion(versionToDelete);
            },
        });
    };
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@ -17,6 +17,7 @@ import {
    EventType,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { InlineSpinner } from "@vector-im/compound-web";

 import { Icon as WarningIcon } from "../../../../../../res/img/warning.svg";
 import { _t } from "../../../../../languageHandler";
@ -53,7 +54,7 @@ interface IState {
    guestAccess: GuestAccess;
    history: HistoryVisibility;
    hasAliases: boolean;
-    encrypted: boolean;
+    encrypted: boolean | null;
    showAdvancedSection: boolean;
 }

@ -78,7 +79,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                HistoryVisibility.Shared,
            ),
            hasAliases: false, // async loaded in componentDidMount
-            encrypted: false, // async loaded in componentDidMount
+            encrypted: null, // async loaded in componentDidMount
            showAdvancedSection: false,
        };
    }
@ -419,6 +420,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
        const client = this.context;
        const room = this.props.room;
        const isEncrypted = this.state.encrypted;
+        const isEncryptionLoading = isEncrypted === null;
        const hasEncryptionPermission = room.currentState.mayClientSendStateEvent(EventType.RoomEncryption, client);
        const isEncryptionForceDisabled = shouldForceDisableEncryption(client);
        const canEnableEncryption = !isEncrypted && !isEncryptionForceDisabled && hasEncryptionPermission;
@ -451,6 +453,10 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                                : _t("room_settings|security|encryption_permanent")
                        }
                    >
+                        {isEncryptionLoading ? (
+                            <InlineSpinner />
+                        ) : (
+                            <>
                                <LabelledToggleSwitch
                                    value={isEncrypted}
                                    onChange={this.onEncryptionChange}
@ -461,8 +467,9 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                                    <Caption>{_t("room_settings|security|encryption_forced")}</Caption>
                                )}
                                {encryptionSettings}
+                            </>
+                        )}
                    </SettingsFieldset>
-
                    {this.renderJoinRule()}
                    {historySection}
                </SettingsSection>
--- a/src/components/views/verification/VerificationShowSas.tsx
+++ b/src/components/views/verification/VerificationShowSas.tsx
@ -14,7 +14,6 @@ import SasEmoji from "@matrix-org/spec/sas-emoji.json";
 import { _t, getNormalizedLanguageKeys, getUserLanguage } from "../../../languageHandler";
 import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
-import { fixupColorFonts } from "../../../utils/FontManager";

 interface IProps {
    pending?: boolean;
@ -88,11 +87,6 @@ export default class VerificationShowSas extends React.Component<IProps, IState>
        this.state = {
            pending: false,
        };
-
-        // As this component is also used before login (during complete security),
-        // also make sure we have a working emoji font to display the SAS emojis here.
-        // This is also done from LoggedInView.
-        fixupColorFonts();
    }

    private onMatchClick = (): void => {
--- a/src/contexts/RoomContext.ts
+++ b/src/contexts/RoomContext.ts
@ -75,6 +75,7 @@ const RoomContext = createContext<
    canAskToJoin: false,
    promptAskToJoin: false,
    viewRoomOpts: { buttons: [] },
+    isRoomEncrypted: null,
 });
 RoomContext.displayName = "RoomContext";
 export default RoomContext;
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@ -905,6 +905,8 @@
            "warning": "If you didn't set the new recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings."
        },
        "not_supported": "<not supported>",
+        "pinned_identity_changed": "%(displayName)s's (<b>%(userId)s</b>) identity appears to have changed. <a>Learn more</a>",
+        "pinned_identity_changed_no_displayname": "<b>%(userId)s</b>'s identity appears to have changed. <a>Learn more</a>",
        "recovery_method_removed": {
            "description_1": "This session has detected that your Security Phrase and key for Secure Messages have been removed.",
            "description_2": "If you did this accidentally, you can setup Secure Messages on this session which will re-encrypt this session's message history with a new recovery method.",
--- a/src/stores/SetupEncryptionStore.ts
+++ b/src/stores/SetupEncryptionStore.ts
@ -125,7 +125,7 @@ export class SetupEncryptionStore extends EventEmitter {
        this.emit("update");
        try {
            const cli = MatrixClientPeg.safeGet();
-            const backupInfo = await cli.getKeyBackupVersion();
+            const backupInfo = (await cli.getCrypto()?.getKeyBackupInfo()) ?? null;
            this.backupInfo = backupInfo;
            this.emit("update");

--- a/src/utils/FontManager.ts
+++ b/src/utils/FontManager.ts
@ -1,124 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019-2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-/*
- * Based on...
- * ChromaCheck 1.16
- * author Roel Nieskens, https://pixelambacht.nl
- * MIT license
- */
-import { logger } from "matrix-js-sdk/src/logger";
-
-function safariVersionCheck(ua: string): boolean {
-    logger.log("Browser is Safari - checking version for COLR support");
-    try {
-        const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|.]+).*Safari/);
-        if (safariVersionMatch) {
-            const macOSVersionStr = safariVersionMatch[1];
-            const safariVersionStr = safariVersionMatch[2];
-            const macOSVersion = macOSVersionStr.split("_").map((n) => parseInt(n, 10));
-            const safariVersion = safariVersionStr.split(".").map((n) => parseInt(n, 10));
-            const colrFontSupported =
-                macOSVersion[0] >= 10 && macOSVersion[1] >= 14 && safariVersion[0] >= 12 && safariVersion[0] < 17;
-            // https://www.colorfonts.wtf/ states Safari supports COLR fonts from this version on but Safari 17 breaks it
-            logger.log(
-                `COLR support on Safari requires macOS 10.14 and Safari 12-16, ` +
-                    `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr}, ` +
-                    `COLR supported: ${colrFontSupported}`,
-            );
-            return colrFontSupported;
-        }
-    } catch (err) {
-        logger.error("Error in Safari COLR version check", err);
-    }
-    logger.warn("Couldn't determine Safari version to check COLR font support, assuming no.");
-    return false;
-}
-
-async function isColrFontSupported(): Promise<boolean> {
-    logger.log("Checking for COLR support");
-
-    const { userAgent } = navigator;
-    // Firefox has supported COLR fonts since version 26
-    // but doesn't support the check below without
-    // "Extract canvas data" permissions
-    // when content blocking is enabled.
-    if (userAgent.includes("Firefox")) {
-        logger.log("Browser is Firefox - assuming COLR is supported");
-        return true;
-    }
-    // Safari doesn't wait for the font to load (if it doesn't have it in cache)
-    // to emit the load event on the image, so there is no way to not make the check
-    // reliable. Instead sniff the version.
-    // Excluding "Chrome", as it's user agent unhelpfully also contains Safari...
-    if (!userAgent.includes("Chrome") && userAgent.includes("Safari")) {
-        return safariVersionCheck(userAgent);
-    }
-
-    try {
-        const canvas = document.createElement("canvas");
-        const context = canvas.getContext("2d")!;
-        const img = new Image();
-        // eslint-disable-next-line
-        const fontCOLR =
-            "d09GRgABAAAAAAKAAAwAAAAAAowAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDT0xSAAACVAAAABYAAAAYAAIAJUNQQUwAAAJsAAAAEgAAABLJAAAQT1MvMgAAAYAAAAA6AAAAYBfxJ0pjbWFwAAABxAAAACcAAAAsAAzpM2dseWYAAAH0AAAAGgAAABoNIh0kaGVhZAAAARwAAAAvAAAANgxLumdoaGVhAAABTAAAABUAAAAkCAEEAmhtdHgAAAG8AAAABgAAAAYEAAAAbG9jYQAAAewAAAAGAAAABgANAABtYXhwAAABZAAAABsAAAAgAg4AHW5hbWUAAAIQAAAAOAAAAD4C5wsecG9zdAAAAkgAAAAMAAAAIAADAAB4AWNgZGAAYQ5+qdB4fpuvDNIsDCBwaQGTAIi+VlscBaJZGMDiHAxMIAoAtjIF/QB4AWNgZGBgYQACOAkUQQWMAAGRABAAAAB4AWNgZGBgYGJgAdMMUJILJMQgAWICAAH3AC4AeAFjYGFhYJzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgFkDgKQMBw4CXDSwYWEBdIYgAFBgYA/8sIdAAABAAAAAAAAAB4AWNgYGBkYAZiBgYeBhYGBSDNAoRA/kuG//8hpDgjWJ4BAFVMBiYAAAAAAAANAAAAAQAAAAAEAAQAAAMAABEhESEEAPwABAD8AAAAeAEtxgUNgAAAAMHHIQTShTlOAty9/4bf7AARCwlBNhBw4L/43qXjYGUmf19TMuLcj/BJL3XfBg54AWNgZsALAAB9AAR4AWNgYGAEYj4gFgGygGwICQACOwAoAAAAAAABAAEAAQAAAA4AAAAAyP8AAA==";
-        const svg = `
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="100" style="background:#fff;fill:#000;">
-            <style type="text/css">
-                @font-face {
-                    font-family: "chromacheck-colr";
-                    src: url(data:application/x-font-woff;base64,${fontCOLR}) format("woff");
-                }
-            </style>
-            <text x="0" y="0" font-size="20">
-                <tspan font-family="chromacheck-colr" x="0" dy="20">&#xe900;</tspan>
-            </text>
-        </svg>`;
-        canvas.width = 20;
-        canvas.height = 100;
-
-        img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
-
-        logger.log("Waiting for COLR SVG to load");
-        await new Promise((resolve) => (img.onload = resolve));
-        logger.log("Drawing canvas to detect COLR support");
-        context.drawImage(img, 0, 0);
-        const colrFontSupported = context.getImageData(10, 10, 1, 1).data[0] === 200;
-        logger.log("Canvas check revealed COLR is supported? " + colrFontSupported);
-        return colrFontSupported;
-    } catch (e) {
-        logger.error("Couldn't load COLR font", e);
-        return false;
-    }
-}
-
-let colrFontCheckStarted = false;
-export async function fixupColorFonts(): Promise<void> {
-    if (colrFontCheckStarted) {
-        return;
-    }
-    colrFontCheckStarted = true;
-
-    if (await isColrFontSupported()) {
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2")}')`;
-        document.fonts.add(new FontFace("Twemoji", path, {}));
-        // For at least Chrome on Windows 10, we have to explictly add extra
-        // weights for the emoji to appear in bold messages, etc.
-        document.fonts.add(new FontFace("Twemoji", path, { weight: "600" }));
-        document.fonts.add(new FontFace("Twemoji", path, { weight: "700" }));
-    } else {
-        // fall back to SBIX, generated via https://github.com/matrix-org/twemoji-colr/tree/matthew/sbix
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2")}')`;
-        document.fonts.add(new FontFace("Twemoji", path, {}));
-        document.fonts.add(new FontFace("Twemoji", path, { weight: "600" }));
-        document.fonts.add(new FontFace("Twemoji", path, { weight: "700" }));
-    }
-    // ...and if SBIX is not supported, the browser will fall back to one of the native fonts specified.
-}
--- a/src/utils/image-media.ts
+++ b/src/utils/image-media.ts
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import { EncryptedFile } from "matrix-js-sdk/src/types";
+import { ImageInfo } from "matrix-js-sdk/src/types";

 import { BlurhashEncoder } from "../BlurhashEncoder";

@ -15,19 +15,7 @@ type ThumbnailableElement = HTMLImageElement | HTMLVideoElement;
 export const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448

 interface IThumbnail {
-    info: {
-        thumbnail_info?: {
-            w: number;
-            h: number;
-            mimetype: string;
-            size: number;
-        };
-        w: number;
-        h: number;
-        [BLURHASH_FIELD]?: string;
-        thumbnail_url?: string;
-        thumbnail_file?: EncryptedFile;
-    };
+    info: ImageInfo;
    thumbnail: Blob;
 }

--- a/src/vector/platform/ElectronPlatform.tsx
+++ b/src/vector/platform/ElectronPlatform.tsx
@ -474,10 +474,8 @@ export default class ElectronPlatform extends BasePlatform {
        const url = super.getOidcCallbackUrl();
        url.protocol = "io.element.desktop";
        // Trim the double slash into a single slash to comply with https://datatracker.ietf.org/doc/html/rfc8252#section-7.1
-        // Chrome seems to have a strange issue where non-standard protocols prevent URL object mutations on pathname
-        // field, so we cannot mutate `pathname` reliably and instead have to rewrite the href manually.
-        if (url.pathname.startsWith("//")) {
-            url.href = url.href.replace(url.pathname, url.pathname.slice(1));
+        if (url.href.startsWith(`${url.protocol}://`)) {
+            url.href = url.href.replace("://", ":/");
        }
        return url;
    }
--- a/test/test-utils/client.ts
+++ b/test/test-utils/client.ts
@ -143,7 +143,6 @@ export const mockClientMethodsCrypto = (): Partial<
 > => ({
    isKeyBackupKeyStored: jest.fn(),
    getCrossSigningCacheCallbacks: jest.fn().mockReturnValue({ getCrossSigningKeyCache: jest.fn() }),
-    getKeyBackupVersion: jest.fn().mockResolvedValue(null),
    secretStorage: { hasKey: jest.fn() },
    getCrypto: jest.fn().mockReturnValue({
        getUserDeviceInfo: jest.fn(),
@ -163,6 +162,7 @@ export const mockClientMethodsCrypto = (): Partial<
        getOwnDeviceKeys: jest.fn().mockReturnValue(new Promise(() => {})),
        getCrossSigningKeyId: jest.fn(),
        isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(false),
+        getKeyBackupInfo: jest.fn().mockResolvedValue(null),
    }),
 });

--- a/test/test-utils/room.ts
+++ b/test/test-utils/room.ts
@ -85,7 +85,7 @@ export function getRoomContext(room: Room, override: Partial<IRoomState>): IRoom
        canAskToJoin: false,
        promptAskToJoin: false,
        viewRoomOpts: { buttons: [] },
-
+        isRoomEncrypted: false,
        ...override,
    };
 }
--- a/test/test-utils/test-utils.ts
+++ b/test/test-utils/test-utils.ts
@ -99,7 +99,6 @@ export function createTestClient(): MatrixClient {
        getDevices: jest.fn().mockResolvedValue({ devices: [{ device_id: "ABCDEFGHI" }] }),
        getSessionId: jest.fn().mockReturnValue("iaszphgvfku"),
        credentials: { userId: "@userId:matrix.org" },
-        getKeyBackupVersion: jest.fn(),

        secretStorage: {
            get: jest.fn(),
@ -117,7 +116,7 @@ export function createTestClient(): MatrixClient {

        getCrypto: jest.fn().mockReturnValue({
            getOwnDeviceKeys: jest.fn(),
-            getUserDeviceInfo: jest.fn(),
+            getUserDeviceInfo: jest.fn().mockResolvedValue(new Map()),
            getUserVerificationStatus: jest.fn(),
            getDeviceVerificationStatus: jest.fn(),
            resetKeyBackup: jest.fn(),
@ -135,6 +134,7 @@ export function createTestClient(): MatrixClient {
            restoreKeyBackupWithPassphrase: jest.fn(),
            loadSessionBackupPrivateKeyFromSecretStorage: jest.fn(),
            storeSessionBackupPrivateKey: jest.fn(),
+            getKeyBackupInfo: jest.fn().mockResolvedValue(null),
            getEncryptionInfoForEvent: jest.fn().mockResolvedValue(null),
        }),

--- a/test/unit-tests/DeviceListener-test.ts
+++ b/test/unit-tests/DeviceListener-test.ts
@ -96,12 +96,12 @@ describe("DeviceListener", () => {
            }),
            getSessionBackupPrivateKey: jest.fn(),
            isEncryptionEnabledInRoom: jest.fn(),
+            getKeyBackupInfo: jest.fn().mockResolvedValue(null),
        } as unknown as Mocked<CryptoApi>;
        mockClient = getMockClientWithEventEmitter({
            isGuest: jest.fn(),
            getUserId: jest.fn().mockReturnValue(userId),
            getSafeUserId: jest.fn().mockReturnValue(userId),
-            getKeyBackupVersion: jest.fn().mockResolvedValue(undefined),
            getRooms: jest.fn().mockReturnValue([]),
            isVersionSupported: jest.fn().mockResolvedValue(true),
            isInitialSyncComplete: jest.fn().mockReturnValue(true),
@ -354,7 +354,7 @@ describe("DeviceListener", () => {

                it("shows set up encryption toast when user has a key backup available", async () => {
                    // non falsy response
-                    mockClient!.getKeyBackupVersion.mockResolvedValue({} as unknown as KeyBackupInfo);
+                    mockCrypto.getKeyBackupInfo.mockResolvedValue({} as unknown as KeyBackupInfo);
                    await createAndStart();

                    expect(SetupEncryptionToast.showToast).toHaveBeenCalledWith(
@ -673,7 +673,7 @@ describe("DeviceListener", () => {
                describe("When Room Key Backup is not enabled", () => {
                    beforeEach(() => {
                        // no backup
-                        mockClient.getKeyBackupVersion.mockResolvedValue(null);
+                        mockCrypto.getKeyBackupInfo.mockResolvedValue(null);
                    });

                    it("Should report recovery state as Enabled", async () => {
@ -722,7 +722,7 @@ describe("DeviceListener", () => {
                        });

                        // no backup
-                        mockClient.getKeyBackupVersion.mockResolvedValue(null);
+                        mockCrypto.getKeyBackupInfo.mockResolvedValue(null);

                        await createAndStart();

@ -872,7 +872,7 @@ describe("DeviceListener", () => {
                describe("When Room Key Backup is enabled", () => {
                    beforeEach(() => {
                        // backup enabled - just need a mock object
-                        mockClient.getKeyBackupVersion.mockResolvedValue({} as KeyBackupInfo);
+                        mockCrypto.getKeyBackupInfo.mockResolvedValue({} as KeyBackupInfo);
                    });

                    const testCases = [
--- a/test/unit-tests/components/structures/MatrixChat-test.tsx
+++ b/test/unit-tests/components/structures/MatrixChat-test.tsx
@ -139,6 +139,7 @@ describe("<MatrixChat />", () => {
            globalBlacklistUnverifiedDevices: false,
            // This needs to not finish immediately because we need to test the screen appears
            bootstrapCrossSigning: jest.fn().mockImplementation(() => bootstrapDeferred.promise),
+            getKeyBackupInfo: jest.fn().mockResolvedValue(null),
        }),
        secretStorage: {
            isStored: jest.fn().mockReturnValue(null),
@ -148,7 +149,6 @@ describe("<MatrixChat />", () => {
        whoami: jest.fn(),
        logout: jest.fn(),
        getDeviceId: jest.fn(),
-        getKeyBackupVersion: jest.fn().mockResolvedValue(null),
    });
    let mockClient: Mocked<MatrixClient>;
    const serverConfig = {
--- a/test/unit-tests/components/structures/RoomView-test.tsx
+++ b/test/unit-tests/components/structures/RoomView-test.tsx
@ -10,18 +10,19 @@ import React, { createRef, RefObject } from "react";
 import { mocked, MockedObject } from "jest-mock";
 import {
    ClientEvent,
+    EventTimeline,
+    EventType,
+    IEvent,
+    JoinRule,
    MatrixClient,
+    MatrixError,
+    MatrixEvent,
    Room,
    RoomEvent,
-    EventType,
-    JoinRule,
-    MatrixError,
    RoomStateEvent,
-    MatrixEvent,
    SearchResult,
-    IEvent,
 } from "matrix-js-sdk/src/matrix";
-import { CryptoApi, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
+import { CryptoApi, UserVerificationStatus, CryptoEvent } from "matrix-js-sdk/src/crypto-api";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import {
    fireEvent,
@ -34,6 +35,7 @@ import {
    cleanup,
 } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
+import { defer } from "matrix-js-sdk/src/utils";

 import {
    stubClient,
@ -87,8 +89,7 @@ describe("RoomView", () => {

    beforeEach(() => {
        mockPlatformPeg({ reload: () => {} });
-        stubClient();
-        cli = mocked(MatrixClientPeg.safeGet());
+        cli = mocked(stubClient());

        room = new Room(`!${roomCount++}:example.org`, cli, "@alice:example.org");
        jest.spyOn(room, "findPredecessor");
@ -247,8 +248,9 @@ describe("RoomView", () => {

    it("updates url preview visibility on encryption state change", async () => {
        room.getMyMembership = jest.fn().mockReturnValue(KnownMembership.Join);
+        jest.spyOn(cli, "getCrypto").mockReturnValue(crypto);
        // we should be starting unencrypted
-        expect(cli.isRoomEncrypted(room.roomId)).toEqual(false);
+        expect(await cli.getCrypto()?.isEncryptionEnabledInRoom(room.roomId)).toEqual(false);

        const roomViewInstance = await getRoomViewInstance();

@ -263,23 +265,38 @@ describe("RoomView", () => {
        expect(roomViewInstance.state.showUrlPreview).toBe(true);

        // now enable encryption
-        cli.isRoomEncrypted.mockReturnValue(true);
+        jest.spyOn(cli.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);

        // and fake an encryption event into the room to prompt it to re-check
-        await act(() =>
-            room.addLiveEvents([
-                new MatrixEvent({
-                    type: "m.room.encryption",
+        act(() => {
+            const encryptionEvent = new MatrixEvent({
+                type: EventType.RoomEncryption,
                sender: cli.getUserId()!,
                content: {},
                event_id: "someid",
                room_id: room.roomId,
-                }),
-            ]),
-        );
+            });
+            const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS)!;
+            cli.emit(RoomStateEvent.Events, encryptionEvent, roomState, null);
+        });

        // URL previews should now be disabled
-        expect(roomViewInstance.state.showUrlPreview).toBe(false);
+        await waitFor(() => expect(roomViewInstance.state.showUrlPreview).toBe(false));
+    });
+
+    it("should not display the timeline when the room encryption is loading", async () => {
+        jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
+        jest.spyOn(cli, "getCrypto").mockReturnValue(crypto);
+        const deferred = defer<boolean>();
+        jest.spyOn(cli.getCrypto()!, "isEncryptionEnabledInRoom").mockImplementation(() => deferred.promise);
+
+        const { asFragment, container } = await mountRoomView();
+        expect(container.querySelector(".mx_RoomView_messagePanel")).toBeNull();
+        expect(asFragment()).toMatchSnapshot();
+
+        deferred.resolve(true);
+        await waitFor(() => expect(container.querySelector(".mx_RoomView_messagePanel")).not.toBeNull());
+        expect(asFragment()).toMatchSnapshot();
    });

    it("updates live timeline when a timeline reset happens", async () => {
@ -290,6 +307,32 @@ describe("RoomView", () => {
        expect(roomViewInstance.state.liveTimeline).not.toEqual(oldTimeline);
    });

+    it("should update when the e2e status when the user verification changed", async () => {
+        room.currentState.setStateEvents([
+            mkRoomMemberJoinEvent(cli.getSafeUserId(), room.roomId),
+            mkRoomMemberJoinEvent("user@example.com", room.roomId),
+        ]);
+        room.getMyMembership = jest.fn().mockReturnValue(KnownMembership.Join);
+        // Not all the calls to cli.isRoomEncrypted are migrated, so we need to mock both.
+        mocked(cli.isRoomEncrypted).mockReturnValue(true);
+        jest.spyOn(cli, "getCrypto").mockReturnValue(crypto);
+        jest.spyOn(cli.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
+        jest.spyOn(cli.getCrypto()!, "getUserVerificationStatus").mockResolvedValue(
+            new UserVerificationStatus(false, false, false),
+        );
+        jest.spyOn(cli.getCrypto()!, "getUserDeviceInfo").mockResolvedValue(
+            new Map([["user@example.com", new Map<string, any>()]]),
+        );
+
+        const { container } = await renderRoomView();
+        await waitFor(() => expect(container.querySelector(".mx_E2EIcon_normal")).toBeInTheDocument());
+
+        const verificationStatus = new UserVerificationStatus(true, true, false);
+        jest.spyOn(cli.getCrypto()!, "getUserVerificationStatus").mockResolvedValue(verificationStatus);
+        cli.emit(CryptoEvent.UserTrustStatusChanged, cli.getSafeUserId(), verificationStatus);
+        await waitFor(() => expect(container.querySelector(".mx_E2EIcon_verified")).toBeInTheDocument());
+    });
+
    describe("with virtual rooms", () => {
        it("checks for a virtual room on initial load", async () => {
            const { container } = await renderRoomView();
@ -427,7 +470,8 @@ describe("RoomView", () => {
            ]);
            jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(cli.getSafeUserId());
            jest.spyOn(DMRoomMap.shared(), "getRoomIds").mockReturnValue(new Set([room.roomId]));
-            mocked(cli).isRoomEncrypted.mockReturnValue(true);
+            jest.spyOn(cli, "getCrypto").mockReturnValue(crypto);
+            jest.spyOn(cli.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
            await renderRoomView();
        });

--- a/test/unit-tests/components/structures/snapshots/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/snapshots/RoomView-test.tsx.snap
@ -62,7 +62,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
-              aria-labelledby=":rbc:"
+              aria-labelledby=":rg4:"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@ -78,7 +78,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
        <button
          aria-disabled="false"
          aria-label="Voice call"
-          aria-labelledby=":rbh:"
+          aria-labelledby=":rg9:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -103,7 +103,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
        </button>
        <button
          aria-label="Room info"
-          aria-labelledby=":rbm:"
+          aria-labelledby=":rge:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -128,7 +128,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
        </button>
        <button
          aria-label="Threads"
-          aria-labelledby=":rbr:"
+          aria-labelledby=":rgj:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -157,7 +157,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
      >
        <div
          aria-label="2 members"
-          aria-labelledby=":rc0:"
+          aria-labelledby=":rgo:"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@ -280,7 +280,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
-              aria-labelledby=":rca:"
+              aria-labelledby=":rh2:"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@ -296,7 +296,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
        <button
          aria-disabled="false"
          aria-label="Voice call"
-          aria-labelledby=":rcf:"
+          aria-labelledby=":rh7:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -321,7 +321,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
        </button>
        <button
          aria-label="Room info"
-          aria-labelledby=":rck:"
+          aria-labelledby=":rhc:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -346,7 +346,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
        </button>
        <button
          aria-label="Threads"
-          aria-labelledby=":rcp:"
+          aria-labelledby=":rhh:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -375,7 +375,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
      >
        <div
          aria-label="2 members"
-          aria-labelledby=":rcu:"
+          aria-labelledby=":rhm:"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@ -583,7 +583,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
-              aria-labelledby=":r70:"
+              aria-labelledby=":rbo:"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@ -599,7 +599,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
        <button
          aria-disabled="false"
          aria-label="Voice call"
-          aria-labelledby=":r75:"
+          aria-labelledby=":rbt:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -624,7 +624,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
        </button>
        <button
          aria-label="Room info"
-          aria-labelledby=":r7a:"
+          aria-labelledby=":rc2:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -649,7 +649,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
        </button>
        <button
          aria-label="Threads"
-          aria-labelledby=":r7f:"
+          aria-labelledby=":rc7:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -678,7 +678,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
      >
        <div
          aria-label="2 members"
-          aria-labelledby=":r7k:"
+          aria-labelledby=":rcc:"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@ -963,7 +963,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
-              aria-labelledby=":r96:"
+              aria-labelledby=":rdu:"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
@ -979,7 +979,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
        <button
          aria-disabled="false"
          aria-label="Voice call"
-          aria-labelledby=":r9b:"
+          aria-labelledby=":re3:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -1004,7 +1004,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
        </button>
        <button
          aria-label="Room info"
-          aria-labelledby=":r9g:"
+          aria-labelledby=":re8:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -1029,7 +1029,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
        </button>
        <button
          aria-label="Threads"
-          aria-labelledby=":r9l:"
+          aria-labelledby=":red:"
          class="_icon-button_bh2qc_17"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -1058,7 +1058,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
      >
        <div
          aria-label="2 members"
-          aria-labelledby=":r9q:"
+          aria-labelledby=":rei:"
          class="mx_AccessibleButton mx_FacePile"
          role="button"
          tabindex="0"
@ -1276,6 +1276,571 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
 </div>
 `;

+exports[`RoomView should not display the timeline when the room encryption is loading 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_RoomView"
+  >
+    <canvas
+      aria-hidden="true"
+      height="768"
+      style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
+      width="0"
+    />
+    <div
+      class="mx_MainSplit"
+    >
+      <div
+        class="mx_RoomView_body mx_MainSplit_timeline"
+        data-layout="group"
+      >
+        <header
+          class="mx_Flex mx_RoomHeader light-panel"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+        >
+          <button
+            aria-label="Open room settings"
+            aria-live="off"
+            class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+            data-color="1"
+            data-testid="avatar-img"
+            data-type="round"
+            role="button"
+            style="--cpd-avatar-size: 40px;"
+            tabindex="-1"
+          >
+            !
+          </button>
+          <button
+            aria-label="Room info"
+            class="mx_RoomHeader_infoWrapper"
+            tabindex="0"
+          >
+            <div
+              class="mx_Box mx_RoomHeader_info mx_Box--flex"
+              style="--mx-box-flex: 1;"
+            >
+              <div
+                aria-level="1"
+                class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
+                dir="auto"
+                role="heading"
+              >
+                <span
+                  class="mx_RoomHeader_truncated mx_lineClamp"
+                >
+                  !5:example.org
+                </span>
+              </div>
+            </div>
+          </button>
+          <div
+            class="mx_Flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+          >
+            <button
+              aria-disabled="true"
+              aria-label="There's no one here to call"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
+              >
+                <svg
+                  aria-labelledby=":r2c:"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+                  />
+                </svg>
+              </div>
+            </button>
+            <button
+              aria-disabled="true"
+              aria-label="There's no one here to call"
+              aria-labelledby=":r2h:"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+                  />
+                </svg>
+              </div>
+            </button>
+            <button
+              aria-label="Room info"
+              aria-labelledby=":r2m:"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%;"
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                  />
+                </svg>
+              </div>
+            </button>
+            <button
+              aria-label="Threads"
+              aria-labelledby=":r2r:"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%;"
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
+          <div
+            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
+          >
+            <div
+              aria-label="0 members"
+              aria-labelledby=":r30:"
+              class="mx_AccessibleButton mx_FacePile"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="_stacked-avatars_mcap2_111"
+              />
+              0
+            </div>
+          </div>
+        </header>
+        <div
+          class="mx_AutoHideScrollbar mx_AuxPanel"
+          role="region"
+          tabindex="-1"
+        >
+          <div />
+        </div>
+        <main
+          class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
+        />
+        <div
+          aria-label="Room status bar"
+          class="mx_RoomView_statusArea"
+          role="region"
+        >
+          <div
+            class="mx_RoomView_statusAreaBox"
+          >
+            <div
+              class="mx_RoomView_statusAreaBox_line"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RoomView should not display the timeline when the room encryption is loading 2`] = `
+<DocumentFragment>
+  <div
+    class="mx_RoomView"
+  >
+    <canvas
+      aria-hidden="true"
+      height="768"
+      style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
+      width="0"
+    />
+    <div
+      class="mx_MainSplit"
+    >
+      <div
+        class="mx_RoomView_body mx_MainSplit_timeline"
+        data-layout="group"
+      >
+        <header
+          class="mx_Flex mx_RoomHeader light-panel"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+        >
+          <button
+            aria-label="Open room settings"
+            aria-live="off"
+            class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+            data-color="1"
+            data-testid="avatar-img"
+            data-type="round"
+            role="button"
+            style="--cpd-avatar-size: 40px;"
+            tabindex="-1"
+          >
+            !
+          </button>
+          <button
+            aria-label="Room info"
+            class="mx_RoomHeader_infoWrapper"
+            tabindex="0"
+          >
+            <div
+              class="mx_Box mx_RoomHeader_info mx_Box--flex"
+              style="--mx-box-flex: 1;"
+            >
+              <div
+                aria-level="1"
+                class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
+                dir="auto"
+                role="heading"
+              >
+                <span
+                  class="mx_RoomHeader_truncated mx_lineClamp"
+                >
+                  !5:example.org
+                </span>
+              </div>
+            </div>
+          </button>
+          <div
+            class="mx_Flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+          >
+            <button
+              aria-disabled="true"
+              aria-label="There's no one here to call"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
+              >
+                <svg
+                  aria-labelledby=":r2c:"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+                  />
+                </svg>
+              </div>
+            </button>
+            <button
+              aria-disabled="true"
+              aria-label="There's no one here to call"
+              aria-labelledby=":r2h:"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+                  />
+                </svg>
+              </div>
+            </button>
+            <button
+              aria-label="Room info"
+              aria-labelledby=":r2m:"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%;"
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                  />
+                </svg>
+              </div>
+            </button>
+            <button
+              aria-label="Threads"
+              aria-labelledby=":r2r:"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%;"
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
+          <div
+            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
+          >
+            <div
+              aria-label="0 members"
+              aria-labelledby=":r30:"
+              class="mx_AccessibleButton mx_FacePile"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="_stacked-avatars_mcap2_111"
+              />
+              0
+            </div>
+          </div>
+        </header>
+        <div
+          class="mx_AutoHideScrollbar mx_AuxPanel"
+          role="region"
+          tabindex="-1"
+        >
+          <div />
+        </div>
+        <main
+          class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
+        >
+          <div
+            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+            tabindex="-1"
+          >
+            <div
+              class="mx_RoomView_messageListWrapper"
+            >
+              <ol
+                aria-live="polite"
+                class="mx_RoomView_MessageList"
+                style="height: 400px;"
+              />
+            </div>
+          </div>
+        </main>
+        <div
+          aria-label="Room status bar"
+          class="mx_RoomView_statusArea"
+          role="region"
+        >
+          <div
+            class="mx_RoomView_statusAreaBox"
+          >
+            <div
+              class="mx_RoomView_statusAreaBox_line"
+            />
+          </div>
+        </div>
+        <div
+          aria-label="Message composer"
+          class="mx_MessageComposer mx_MessageComposer_e2eStatus"
+          role="region"
+        >
+          <div
+            class="mx_MessageComposer_wrapper"
+          >
+            <div
+              class="mx_MessageComposer_row"
+            >
+              <div
+                class="mx_MessageComposer_e2eIconWrapper"
+              >
+                <span
+                  tabindex="0"
+                >
+                  <div
+                    aria-labelledby=":r3e:"
+                    class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
+                  />
+                </span>
+              </div>
+              <div
+                class="mx_SendMessageComposer"
+              >
+                <div
+                  class="mx_BasicMessageComposer"
+                >
+                  <div
+                    aria-label="Formatting"
+                    class="mx_MessageComposerFormatBar"
+                    role="toolbar"
+                  >
+                    <button
+                      aria-label="Bold"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                      role="button"
+                      tabindex="0"
+                      type="button"
+                    />
+                    <button
+                      aria-label="Italics"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                      role="button"
+                      tabindex="-1"
+                      type="button"
+                    />
+                    <button
+                      aria-label="Strikethrough"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                      role="button"
+                      tabindex="-1"
+                      type="button"
+                    />
+                    <button
+                      aria-label="Code block"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                      role="button"
+                      tabindex="-1"
+                      type="button"
+                    />
+                    <button
+                      aria-label="Quote"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                      role="button"
+                      tabindex="-1"
+                      type="button"
+                    />
+                    <button
+                      aria-label="Insert link"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                      role="button"
+                      tabindex="-1"
+                      type="button"
+                    />
+                  </div>
+                  <div
+                    aria-autocomplete="list"
+                    aria-disabled="false"
+                    aria-haspopup="listbox"
+                    aria-label="Send an encrypted message…"
+                    aria-multiline="true"
+                    class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
+                    contenteditable="true"
+                    data-testid="basicmessagecomposer"
+                    dir="auto"
+                    role="textbox"
+                    style="--placeholder: 'Send\\ an\\ encrypted\\ message…';"
+                    tabindex="0"
+                    translate="no"
+                  >
+                    <div>
+                      <br />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="mx_MessageComposer_actions"
+              >
+                <div
+                  aria-label="Emoji"
+                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                  role="button"
+                  tabindex="0"
+                />
+                <div
+                  aria-label="Attachment"
+                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                  role="button"
+                  tabindex="0"
+                />
+                <div
+                  aria-label="More options"
+                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
+                  role="button"
+                  tabindex="0"
+                />
+                <input
+                  multiple=""
+                  style="display: none;"
+                  type="file"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`RoomView should show error view if failed to look up room alias 1`] = `
 <DocumentFragment>
  <div
@ -1332,7 +1897,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
            aria-label="Open room settings"
            aria-live="off"
            class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
-            data-color="3"
+            data-color="5"
            data-testid="avatar-img"
            data-type="round"
            role="button"
@ -1359,7 +1924,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                <span
                  class="mx_RoomHeader_truncated mx_lineClamp"
                >
-                  !10:example.org
+                  !12:example.org
                </span>
              </div>
            </div>
@ -1370,7 +1935,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
          >
            <button
              aria-label="Room info"
-              aria-labelledby=":r2k:"
+              aria-labelledby=":r7c:"
              class="_icon-button_bh2qc_17"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@ -1395,7 +1960,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
            </button>
            <button
              aria-label="Chat"
-              aria-labelledby=":r2p:"
+              aria-labelledby=":r7h:"
              class="_icon-button_bh2qc_17"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@ -1420,7 +1985,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
            </button>
            <button
              aria-label="Threads"
-              aria-labelledby=":r2u:"
+              aria-labelledby=":r7m:"
              class="_icon-button_bh2qc_17"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@ -1449,7 +2014,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
          >
            <div
              aria-label="0 members"
-              aria-labelledby=":r33:"
+              aria-labelledby=":r7r:"
              class="mx_AccessibleButton mx_FacePile"
              role="button"
              tabindex="0"
@ -1487,7 +2052,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                </p>
              </div>
              <button
-                aria-labelledby=":r3c:"
+                aria-labelledby=":r84:"
                class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
                data-testid="base-card-close-button"
                role="button"
--- a/test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx
@ -22,7 +22,6 @@ describe("LogoutDialog", () => {
    beforeEach(() => {
        mockClient = getMockClientWithEventEmitter({
            ...mockClientMethodsCrypto(),
-            getKeyBackupVersion: jest.fn(),
        });

        mockCrypto = mocked(mockClient.getCrypto()!);
@ -50,14 +49,14 @@ describe("LogoutDialog", () => {
    });

    it("Prompts user to connect backup if there is a backup on the server", async () => {
-        mockClient.getKeyBackupVersion.mockResolvedValue({} as KeyBackupInfo);
+        mockCrypto.getKeyBackupInfo.mockResolvedValue({} as KeyBackupInfo);
        const rendered = renderComponent();
        await rendered.findByText("Connect this session to Key Backup");
        expect(rendered.container).toMatchSnapshot();
    });

    it("Prompts user to set up backup if there is no backup on the server", async () => {
-        mockClient.getKeyBackupVersion.mockResolvedValue(null);
+        mockCrypto.getKeyBackupInfo.mockResolvedValue(null);
        const rendered = renderComponent();
        await rendered.findByText("Start using Key Backup");
        expect(rendered.container).toMatchSnapshot();
@ -69,7 +68,7 @@ describe("LogoutDialog", () => {
    describe("when there is an error fetching backups", () => {
        filterConsole("Unable to fetch key backup status");
        it("prompts user to set up backup", async () => {
-            mockClient.getKeyBackupVersion.mockImplementation(async () => {
+            mockCrypto.getKeyBackupInfo.mockImplementation(async () => {
                throw new Error("beep");
            });
            const rendered = renderComponent();
--- a/test/unit-tests/components/views/dialogs/security/CreateSecretStorageDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/security/CreateSecretStorageDialog-test.tsx
@ -77,7 +77,7 @@ describe("CreateSecretStorageDialog", () => {
        filterConsole("Error fetching backup data from server");

        it("shows an error", async () => {
-            mockClient.getKeyBackupVersion.mockImplementation(async () => {
+            jest.spyOn(mockClient.getCrypto()!, "getKeyBackupInfo").mockImplementation(async () => {
                throw new Error("bleh bleh");
            });

@ -92,7 +92,7 @@ describe("CreateSecretStorageDialog", () => {
            expect(result.container).toMatchSnapshot();

            // Now we can get the backup and we retry
-            mockClient.getKeyBackupVersion.mockRestore();
+            jest.spyOn(mockClient.getCrypto()!, "getKeyBackupInfo").mockRestore();
            await userEvent.click(screen.getByRole("button", { name: "Retry" }));
            await screen.findByText("Your keys are now being backed up from this device.");
        });
--- a/test/unit-tests/components/views/dialogs/security/RestoreKeyBackupDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/security/RestoreKeyBackupDialog-test.tsx
@ -28,7 +28,7 @@ describe("<RestoreKeyBackupDialog />", () => {
    beforeEach(() => {
        matrixClient = stubClient();
        jest.spyOn(recoveryKeyModule, "decodeRecoveryKey").mockReturnValue(new Uint8Array(32));
-        jest.spyOn(matrixClient, "getKeyBackupVersion").mockResolvedValue({ version: "1" } as KeyBackupInfo);
+        jest.spyOn(matrixClient.getCrypto()!, "getKeyBackupInfo").mockResolvedValue({ version: "1" } as KeyBackupInfo);
    });

    it("should render", async () => {
@ -99,7 +99,7 @@ describe("<RestoreKeyBackupDialog />", () => {

    test("should restore key backup when passphrase is filled", async () => {
        // Determine that the passphrase is required
-        jest.spyOn(matrixClient, "getKeyBackupVersion").mockResolvedValue({
+        jest.spyOn(matrixClient.getCrypto()!, "getKeyBackupInfo").mockResolvedValue({
            version: "1",
            auth_data: {
                private_key_salt: "salt",
--- a/test/unit-tests/components/views/rooms/EventTile-test.tsx
+++ b/test/unit-tests/components/views/rooms/EventTile-test.tsx
@ -304,6 +304,8 @@ describe("EventTile", () => {
            [EventShieldReason.UNKNOWN_DEVICE, "unknown or deleted device"],
            [EventShieldReason.AUTHENTICITY_NOT_GUARANTEED, "can't be guaranteed"],
            [EventShieldReason.MISMATCHED_SENDER_KEY, "Encrypted by an unverified session"],
+            [EventShieldReason.SENT_IN_CLEAR, "Not encrypted"],
+            [EventShieldReason.VERIFICATION_VIOLATION, "Sender's verified identity has changed"],
        ])("shows the correct reason code for %i (%s)", async (reasonCode: EventShieldReason, expectedText: string) => {
            mxEvent = await mkEncryptedMatrixEvent({
                plainContent: { msgtype: "m.text", body: "msg1" },
--- a/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
@ -77,6 +77,7 @@ describe("<SendMessageComposer/>", () => {
        canAskToJoin: false,
        promptAskToJoin: false,
        viewRoomOpts: { buttons: [] },
+        isRoomEncrypted: false,
    };
    describe("createMessageContent", () => {
        it("sends plaintext messages correctly", () => {
--- a/test/unit-tests/components/views/rooms/UserIdentityWarning-test.tsx
+++ b/test/unit-tests/components/views/rooms/UserIdentityWarning-test.tsx
@ -0,0 +1,534 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { sleep } from "matrix-js-sdk/src/utils";
+import {
+    EventType,
+    MatrixClient,
+    MatrixEvent,
+    Room,
+    RoomState,
+    RoomStateEvent,
+    RoomMember,
+} from "matrix-js-sdk/src/matrix";
+import { CryptoEvent, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
+import { act, render, screen, waitFor } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+
+import { stubClient } from "../../../../test-utils";
+import { UserIdentityWarning } from "../../../../../src/components/views/rooms/UserIdentityWarning";
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
+
+const ROOM_ID = "!room:id";
+
+function mockRoom(): Room {
+    const room = {
+        getEncryptionTargetMembers: jest.fn(async () => []),
+        getMember: jest.fn((userId) => {}),
+        roomId: ROOM_ID,
+        shouldEncryptForInvitedMembers: jest.fn(() => true),
+    } as unknown as Room;
+
+    return room;
+}
+
+function mockRoomMember(userId: string, name?: string): RoomMember {
+    return {
+        userId,
+        name: name ?? userId,
+        rawDisplayName: name ?? userId,
+        roomId: ROOM_ID,
+        getMxcAvatarUrl: jest.fn(),
+    } as unknown as RoomMember;
+}
+
+function dummyRoomState(): RoomState {
+    return new RoomState(ROOM_ID);
+}
+
+/**
+ * Get the warning element, given the warning text (excluding the "Learn more"
+ * link).  This is needed because the warning text contains a `<b>` tag, so the
+ * normal `getByText` doesn't work.
+ */
+function getWarningByText(text: string): Element {
+    return screen.getByText((content?: string, element?: Element | null): boolean => {
+        return (
+            !!element &&
+            element.classList.contains("mx_UserIdentityWarning_main") &&
+            element.textContent === text + " Learn more"
+        );
+    });
+}
+
+function renderComponent(client: MatrixClient, room: Room) {
+    return render(<UserIdentityWarning room={room} key={ROOM_ID} />, {
+        wrapper: ({ ...rest }) => <MatrixClientContext.Provider value={client} {...rest} />,
+    });
+}
+
+describe("UserIdentityWarning", () => {
+    let client: MatrixClient;
+    let room: Room;
+
+    beforeEach(async () => {
+        client = stubClient();
+        room = mockRoom();
+        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    // This tests the basic functionality of the component.  If we have a room
+    // member whose identity needs accepting, we should display a warning.  When
+    // the "OK" button gets pressed, it should call `pinCurrentUserIdentity`.
+    it("displays a warning when a user's identity needs approval", async () => {
+        jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+            mockRoomMember("@alice:example.org", "Alice"),
+        ]);
+        const crypto = client.getCrypto()!;
+        jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+            new UserVerificationStatus(false, false, false, true),
+        );
+        crypto.pinCurrentUserIdentity = jest.fn();
+        renderComponent(client, room);
+
+        await waitFor(() =>
+            expect(
+                getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+            ).toBeInTheDocument(),
+        );
+        await userEvent.click(screen.getByRole("button")!);
+        await waitFor(() => expect(crypto.pinCurrentUserIdentity).toHaveBeenCalledWith("@alice:example.org"));
+    });
+
+    // We don't display warnings in non-encrypted rooms, but if encryption is
+    // enabled, then we should display a warning if there are any users whose
+    // identity need accepting.
+    it("displays pending warnings when encryption is enabled", async () => {
+        jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+            mockRoomMember("@alice:example.org", "Alice"),
+        ]);
+        // Start the room off unencrypted.  We shouldn't display anything.
+        const crypto = client.getCrypto()!;
+        jest.spyOn(crypto, "isEncryptionEnabledInRoom").mockResolvedValue(false);
+        jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+            new UserVerificationStatus(false, false, false, true),
+        );
+
+        renderComponent(client, room);
+        await sleep(10); // give it some time to finish initialising
+        expect(() => getWarningByText("Alice's (@alice:example.org) identity appears to have changed.")).toThrow();
+
+        // Encryption gets enabled in the room.  We should now warn that Alice's
+        // identity changed.
+        jest.spyOn(crypto, "isEncryptionEnabledInRoom").mockResolvedValue(true);
+        client.emit(
+            RoomStateEvent.Events,
+            new MatrixEvent({
+                event_id: "$event_id",
+                type: EventType.RoomEncryption,
+                state_key: "",
+                content: {
+                    algorithm: "m.megolm.v1.aes-sha2",
+                },
+                room_id: ROOM_ID,
+                sender: "@alice:example.org",
+            }),
+            dummyRoomState(),
+            null,
+        );
+        await waitFor(() =>
+            expect(
+                getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+            ).toBeInTheDocument(),
+        );
+    });
+
+    // When a user's identity needs approval, or has been approved, the display
+    // should update appropriately.
+    it("updates the display when identity changes", async () => {
+        jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+            mockRoomMember("@alice:example.org", "Alice"),
+        ]);
+        jest.spyOn(room, "getMember").mockReturnValue(mockRoomMember("@alice:example.org", "Alice"));
+        const crypto = client.getCrypto()!;
+        jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+            new UserVerificationStatus(false, false, false, false),
+        );
+        renderComponent(client, room);
+        await sleep(10); // give it some time to finish initialising
+        expect(() => getWarningByText("Alice's (@alice:example.org) identity appears to have changed.")).toThrow();
+
+        // The user changes their identity, so we should show the warning.
+        act(() => {
+            client.emit(
+                CryptoEvent.UserTrustStatusChanged,
+                "@alice:example.org",
+                new UserVerificationStatus(false, false, false, true),
+            );
+        });
+        await waitFor(() =>
+            expect(
+                getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+            ).toBeInTheDocument(),
+        );
+
+        // Simulate the user's new identity having been approved, so we no
+        // longer show the warning.
+        act(() => {
+            client.emit(
+                CryptoEvent.UserTrustStatusChanged,
+                "@alice:example.org",
+                new UserVerificationStatus(false, false, false, false),
+            );
+        });
+        await waitFor(() =>
+            expect(() => getWarningByText("Alice's (@alice:example.org) identity appears to have changed.")).toThrow(),
+        );
+    });
+
+    // We only display warnings about users in the room.  When someone
+    // joins/leaves, we should update the warning appropriately.
+    describe("updates the display when a member joins/leaves", () => {
+        it("when invited users can see encrypted messages", async () => {
+            // Nobody in the room yet
+            jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([]);
+            jest.spyOn(room, "getMember").mockImplementation((userId) => mockRoomMember(userId));
+            jest.spyOn(room, "shouldEncryptForInvitedMembers").mockReturnValue(true);
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+                new UserVerificationStatus(false, false, false, true),
+            );
+            renderComponent(client, room);
+            await sleep(10); // give it some time to finish initialising
+
+            // Alice joins.  Her identity needs approval, so we should show a warning.
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@alice:example.org",
+                    content: {
+                        membership: "join",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@alice:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+            await waitFor(() =>
+                expect(getWarningByText("@alice:example.org's identity appears to have changed.")).toBeInTheDocument(),
+            );
+
+            // Bob is invited.  His identity needs approval, so we should show a
+            // warning for him after Alice's warning is resolved by her leaving.
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@bob:example.org",
+                    content: {
+                        membership: "invite",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@carol:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+
+            // Alice leaves, so we no longer show her warning, but we will show
+            // a warning for Bob.
+            act(() => {
+                client.emit(
+                    RoomStateEvent.Events,
+                    new MatrixEvent({
+                        event_id: "$event_id",
+                        type: EventType.RoomMember,
+                        state_key: "@alice:example.org",
+                        content: {
+                            membership: "leave",
+                        },
+                        room_id: ROOM_ID,
+                        sender: "@alice:example.org",
+                    }),
+                    dummyRoomState(),
+                    null,
+                );
+            });
+            await waitFor(() =>
+                expect(() => getWarningByText("@alice:example.org's identity appears to have changed.")).toThrow(),
+            );
+            await waitFor(() =>
+                expect(getWarningByText("@bob:example.org's identity appears to have changed.")).toBeInTheDocument(),
+            );
+        });
+
+        it("when invited users cannot see encrypted messages", async () => {
+            // Nobody in the room yet
+            jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([]);
+            jest.spyOn(room, "getMember").mockImplementation((userId) => mockRoomMember(userId));
+            jest.spyOn(room, "shouldEncryptForInvitedMembers").mockReturnValue(false);
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+                new UserVerificationStatus(false, false, false, true),
+            );
+            renderComponent(client, room);
+            await sleep(10); // give it some time to finish initialising
+
+            // Alice joins.  Her identity needs approval, so we should show a warning.
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@alice:example.org",
+                    content: {
+                        membership: "join",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@alice:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+            await waitFor(() =>
+                expect(getWarningByText("@alice:example.org's identity appears to have changed.")).toBeInTheDocument(),
+            );
+
+            // Bob is invited. His identity needs approval, but we don't encrypt
+            // to him, so we won't show a warning. (When Alice leaves, the
+            // display won't be updated to show a warningfor Bob.)
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@bob:example.org",
+                    content: {
+                        membership: "invite",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@carol:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+
+            // Alice leaves, so we no longer show her warning, and we don't show
+            // a warning for Bob.
+            act(() => {
+                client.emit(
+                    RoomStateEvent.Events,
+                    new MatrixEvent({
+                        event_id: "$event_id",
+                        type: EventType.RoomMember,
+                        state_key: "@alice:example.org",
+                        content: {
+                            membership: "leave",
+                        },
+                        room_id: ROOM_ID,
+                        sender: "@alice:example.org",
+                    }),
+                    dummyRoomState(),
+                    null,
+                );
+            });
+            await waitFor(() =>
+                expect(() => getWarningByText("@alice:example.org's identity appears to have changed.")).toThrow(),
+            );
+            await waitFor(() =>
+                expect(() => getWarningByText("@bob:example.org's identity appears to have changed.")).toThrow(),
+            );
+        });
+
+        it("when member leaves immediately after component is loaded", async () => {
+            jest.spyOn(room, "getEncryptionTargetMembers").mockImplementation(async () => {
+                setTimeout(() => {
+                    // Alice immediately leaves after we get the room
+                    // membership, so we shouldn't show the warning any more
+                    client.emit(
+                        RoomStateEvent.Events,
+                        new MatrixEvent({
+                            event_id: "$event_id",
+                            type: EventType.RoomMember,
+                            state_key: "@alice:example.org",
+                            content: {
+                                membership: "leave",
+                            },
+                            room_id: ROOM_ID,
+                            sender: "@alice:example.org",
+                        }),
+                        dummyRoomState(),
+                        null,
+                    );
+                });
+                return [mockRoomMember("@alice:example.org")];
+            });
+            jest.spyOn(room, "getMember").mockImplementation((userId) => mockRoomMember(userId));
+            jest.spyOn(room, "shouldEncryptForInvitedMembers").mockReturnValue(false);
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+                new UserVerificationStatus(false, false, false, true),
+            );
+            renderComponent(client, room);
+
+            await sleep(10);
+            expect(() => getWarningByText("@alice:example.org's identity appears to have changed.")).toThrow();
+        });
+
+        it("when member leaves immediately after joining", async () => {
+            // Nobody in the room yet
+            jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([]);
+            jest.spyOn(room, "getMember").mockImplementation((userId) => mockRoomMember(userId));
+            jest.spyOn(room, "shouldEncryptForInvitedMembers").mockReturnValue(false);
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+                new UserVerificationStatus(false, false, false, true),
+            );
+            renderComponent(client, room);
+            await sleep(10); // give it some time to finish initialising
+
+            // Alice joins.  Her identity needs approval, so we should show a warning.
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@alice:example.org",
+                    content: {
+                        membership: "join",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@alice:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+            // ... but she immediately leaves, so we shouldn't show the warning any more
+            client.emit(
+                RoomStateEvent.Events,
+                new MatrixEvent({
+                    event_id: "$event_id",
+                    type: EventType.RoomMember,
+                    state_key: "@alice:example.org",
+                    content: {
+                        membership: "leave",
+                    },
+                    room_id: ROOM_ID,
+                    sender: "@alice:example.org",
+                }),
+                dummyRoomState(),
+                null,
+            );
+            await sleep(10); // give it some time to finish
+            expect(() => getWarningByText("@alice:example.org's identity appears to have changed.")).toThrow();
+        });
+    });
+
+    // When we have multiple users whose identity needs approval, one user's
+    // identity no longer needs approval (e.g. their identity was approved),
+    // then we show the next one.
+    it("displays the next user when the current user's identity is approved", async () => {
+        jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+            mockRoomMember("@alice:example.org", "Alice"),
+            mockRoomMember("@bob:example.org"),
+        ]);
+        const crypto = client.getCrypto()!;
+        jest.spyOn(crypto, "getUserVerificationStatus").mockResolvedValue(
+            new UserVerificationStatus(false, false, false, true),
+        );
+
+        renderComponent(client, room);
+        // We should warn about Alice's identity first.
+        await waitFor(() =>
+            expect(
+                getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+            ).toBeInTheDocument(),
+        );
+
+        // Simulate Alice's new identity having been approved, so now we warn
+        // about Bob's identity.
+        act(() => {
+            client.emit(
+                CryptoEvent.UserTrustStatusChanged,
+                "@alice:example.org",
+                new UserVerificationStatus(false, false, false, false),
+            );
+        });
+        await waitFor(() =>
+            expect(getWarningByText("@bob:example.org's identity appears to have changed.")).toBeInTheDocument(),
+        );
+    });
+
+    // If we get an update for a user's verification status while we're fetching
+    // that user's verification status, we should display based on the updated
+    // value.
+    describe("handles races between fetching verification status and receiving updates", () => {
+        // First case: check that if the update says that the user identity
+        // needs approval, but the fetch says it doesn't, we show the warning.
+        it("update says identity needs approval", async () => {
+            jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+                mockRoomMember("@alice:example.org", "Alice"),
+            ]);
+            jest.spyOn(room, "getMember").mockReturnValue(mockRoomMember("@alice:example.org", "Alice"));
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockImplementation(async () => {
+                act(() => {
+                    client.emit(
+                        CryptoEvent.UserTrustStatusChanged,
+                        "@alice:example.org",
+                        new UserVerificationStatus(false, false, false, true),
+                    );
+                });
+                return Promise.resolve(new UserVerificationStatus(false, false, false, false));
+            });
+            renderComponent(client, room);
+            await sleep(10); // give it some time to finish initialising
+            await waitFor(() =>
+                expect(
+                    getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+                ).toBeInTheDocument(),
+            );
+        });
+
+        // Second case: check that if the update says that the user identity
+        // doesn't needs approval, but the fetch says it does, we don't show the
+        // warning.
+        it("update says identity doesn't need approval", async () => {
+            jest.spyOn(room, "getEncryptionTargetMembers").mockResolvedValue([
+                mockRoomMember("@alice:example.org", "Alice"),
+            ]);
+            jest.spyOn(room, "getMember").mockReturnValue(mockRoomMember("@alice:example.org", "Alice"));
+            const crypto = client.getCrypto()!;
+            jest.spyOn(crypto, "getUserVerificationStatus").mockImplementation(async () => {
+                act(() => {
+                    client.emit(
+                        CryptoEvent.UserTrustStatusChanged,
+                        "@alice:example.org",
+                        new UserVerificationStatus(false, false, false, false),
+                    );
+                });
+                return Promise.resolve(new UserVerificationStatus(false, false, false, true));
+            });
+            renderComponent(client, room);
+            await sleep(10); // give it some time to finish initialising
+            await waitFor(() =>
+                expect(() =>
+                    getWarningByText("Alice's (@alice:example.org) identity appears to have changed."),
+                ).toThrow(),
+            );
+        });
+    });
+});
--- a/test/unit-tests/components/views/settings/SecureBackupPanel-test.tsx
+++ b/test/unit-tests/components/views/settings/SecureBackupPanel-test.tsx
@ -28,14 +28,13 @@ describe("<SecureBackupPanel />", () => {
    const client = getMockClientWithEventEmitter({
        ...mockClientMethodsUser(userId),
        ...mockClientMethodsCrypto(),
-        getKeyBackupVersion: jest.fn().mockReturnValue("1"),
        getClientWellKnown: jest.fn(),
    });

    const getComponent = () => render(<SecureBackupPanel />);

    beforeEach(() => {
-        client.getKeyBackupVersion.mockResolvedValue({
+        jest.spyOn(client.getCrypto()!, "getKeyBackupInfo").mockResolvedValue({
            version: "1",
            algorithm: "test",
            auth_data: {
@ -52,7 +51,6 @@ describe("<SecureBackupPanel />", () => {
        });

        mocked(client.secretStorage.hasKey).mockClear().mockResolvedValue(false);
-        client.getKeyBackupVersion.mockClear();

        mocked(accessSecretStorage).mockClear().mockResolvedValue();
    });
@ -65,8 +63,8 @@ describe("<SecureBackupPanel />", () => {
    });

    it("handles error fetching backup", async () => {
-        // getKeyBackupVersion can fail for various reasons
-        client.getKeyBackupVersion.mockImplementation(async () => {
+        // getKeyBackupInfo can fail for various reasons
+        jest.spyOn(client.getCrypto()!, "getKeyBackupInfo").mockImplementation(async () => {
            throw new Error("beep beep");
        });
        const renderResult = getComponent();
@ -75,9 +73,9 @@ describe("<SecureBackupPanel />", () => {
    });

    it("handles absence of backup", async () => {
-        client.getKeyBackupVersion.mockResolvedValue(null);
+        jest.spyOn(client.getCrypto()!, "getKeyBackupInfo").mockResolvedValue(null);
        getComponent();
-        // flush getKeyBackupVersion promise
+        // flush getKeyBackupInfo promise
        await flushPromises();
        expect(screen.getByText("Back up your keys before signing out to avoid losing them.")).toBeInTheDocument();
    });
@ -120,7 +118,7 @@ describe("<SecureBackupPanel />", () => {
    });

    it("deletes backup after confirmation", async () => {
-        client.getKeyBackupVersion
+        jest.spyOn(client.getCrypto()!, "getKeyBackupInfo")
            .mockResolvedValueOnce({
                version: "1",
                algorithm: "test",
@ -157,7 +155,7 @@ describe("<SecureBackupPanel />", () => {
        // flush checkKeyBackup promise
        await flushPromises();

-        client.getKeyBackupVersion.mockClear();
+        jest.spyOn(client.getCrypto()!, "getKeyBackupInfo").mockClear();
        mocked(client.getCrypto()!).isKeyBackupTrusted.mockClear();

        fireEvent.click(screen.getByText("Reset"));
@ -167,7 +165,7 @@ describe("<SecureBackupPanel />", () => {
        await flushPromises();

        // backup status refreshed
-        expect(client.getKeyBackupVersion).toHaveBeenCalled();
+        expect(client.getCrypto()!.getKeyBackupInfo).toHaveBeenCalled();
        expect(client.getCrypto()!.isKeyBackupTrusted).toHaveBeenCalled();
    });
 });
--- a/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx
+++ b/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx
@ -75,7 +75,7 @@ describe("<SecurityRoomSettingsTab />", () => {

    beforeEach(async () => {
        client.sendStateEvent.mockReset().mockResolvedValue({ event_id: "test" });
-        client.isRoomEncrypted.mockReturnValue(false);
+        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
        client.getClientWellKnown.mockReturnValue(undefined);
        jest.spyOn(SettingsStore, "getValue").mockRestore();

@ -313,7 +313,7 @@ describe("<SecurityRoomSettingsTab />", () => {
            setRoomStateEvents(room);
            getComponent(room);

-            expect(screen.getByLabelText("Encrypted")).not.toBeChecked();
+            await waitFor(() => expect(screen.getByLabelText("Encrypted")).not.toBeChecked());

            fireEvent.click(screen.getByLabelText("Encrypted"));

@ -330,7 +330,7 @@ describe("<SecurityRoomSettingsTab />", () => {
            setRoomStateEvents(room);
            getComponent(room);

-            expect(screen.getByLabelText("Encrypted")).not.toBeChecked();
+            await waitFor(() => expect(screen.getByLabelText("Encrypted")).not.toBeChecked());

            fireEvent.click(screen.getByLabelText("Encrypted"));

@ -416,12 +416,12 @@ describe("<SecurityRoomSettingsTab />", () => {
                expect(screen.getByText("Once enabled, encryption cannot be disabled.")).toBeInTheDocument();
            });

-            it("displays unencrypted rooms with toggle disabled", () => {
+            it("displays unencrypted rooms with toggle disabled", async () => {
                const room = new Room(roomId, client, userId);
                setRoomStateEvents(room);
                getComponent(room);

-                expect(screen.getByLabelText("Encrypted")).not.toBeChecked();
+                await waitFor(() => expect(screen.getByLabelText("Encrypted")).not.toBeChecked());
                expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true");
                expect(screen.queryByText("Once enabled, encryption cannot be disabled.")).not.toBeInTheDocument();
                expect(screen.getByText("Your server requires encryption to be disabled.")).toBeInTheDocument();
--- a/test/unit-tests/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
+++ b/test/unit-tests/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
@ -34,7 +34,6 @@ describe("<SecurityUserSettingsTab />", () => {
        ...mockClientMethodsCrypto(),
        getRooms: jest.fn().mockReturnValue([]),
        getIgnoredUsers: jest.fn(),
-        getKeyBackupVersion: jest.fn(),
    });

    const sdkContext = new SdkContextClass();
--- a/test/unit-tests/linkify-matrix-test.ts
+++ b/test/unit-tests/linkify-matrix-test.ts
@ -332,7 +332,7 @@ describe("linkify-matrix", () => {

            const event = new MouseEvent("mousedown");
            event.preventDefault = jest.fn();
-            handlers.click(event);
+            handlers!.click(event);
            expect(event.preventDefault).toHaveBeenCalled();
            expect(dispatchSpy).toHaveBeenCalledWith(
                expect.objectContaining({
@ -372,7 +372,7 @@ describe("linkify-matrix", () => {

            const event = new MouseEvent("mousedown");
            event.preventDefault = jest.fn();
-            handlers.click(event);
+            handlers!.click(event);
            expect(event.preventDefault).toHaveBeenCalled();
            expect(dispatchSpy).toHaveBeenCalledWith(
                expect.objectContaining({
--- a/test/unit-tests/stores/SetupEncryptionStore-test.ts
+++ b/test/unit-tests/stores/SetupEncryptionStore-test.ts
@ -37,6 +37,7 @@ describe("SetupEncryptionStore", () => {
            getDeviceVerificationStatus: jest.fn(),
            isDehydrationSupported: jest.fn().mockResolvedValue(false),
            startDehydration: jest.fn(),
+            getKeyBackupInfo: jest.fn().mockResolvedValue(null),
        } as unknown as Mocked<CryptoApi>;
        client.getCrypto.mockReturnValue(mockCrypto);

--- a/yarn.lock
+++ b/yarn.lock
@ -1585,13 +1585,13 @@
  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==

-"@formatjs/ecma402-abstract@2.2.3":
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.3.tgz#dc5a032e1971c709b32b9ab511fa35504a7d3bc9"
-  integrity sha512-aElGmleuReGnk2wtYOzYFmNWYoiWWmf1pPPCYg0oiIQSJj0mjc4eUfzUXaSOJ4S8WzI/cLqnCTWjqz904FT2OQ==
+"@formatjs/ecma402-abstract@2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.4.tgz#355e42d375678229d46dc8ad7a7139520dd03e7b"
+  integrity sha512-lFyiQDVvSbQOpU+WFd//ILolGj4UgA/qXrKeZxdV14uKiAUiPAtX6XAn7WBCRi7Mx6I7EybM9E5yYn4BIpZWYg==
  dependencies:
    "@formatjs/fast-memoize" "2.2.3"
-    "@formatjs/intl-localematcher" "0.5.7"
+    "@formatjs/intl-localematcher" "0.5.8"
    tslib "2"

 "@formatjs/fast-memoize@2.2.3":
@ -1601,20 +1601,20 @@
  dependencies:
    tslib "2"

-"@formatjs/intl-localematcher@0.5.7":
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.7.tgz#f889d076881b785d11ff993b966f527d199436d0"
-  integrity sha512-GGFtfHGQVFe/niOZp24Kal5b2i36eE2bNL0xi9Sg/yd0TR8aLjcteApZdHmismP5QQax1cMnZM9yWySUUjJteA==
+"@formatjs/intl-localematcher@0.5.8":
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.8.tgz#b11bbd04bd3551f7cadcb1ef1e231822d0e3c97e"
+  integrity sha512-I+WDNWWJFZie+jkfkiK5Mp4hEDyRSEvmyfYadflOno/mmKJKcB17fEpEH0oJu/OWhhCJ8kJBDz2YMd/6cDl7Mg==
  dependencies:
    tslib "2"

 "@formatjs/intl-segmenter@^11.5.7":
-  version "11.7.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-segmenter/-/intl-segmenter-11.7.3.tgz#aeb49c33c81fec68419922c64c72188b659eaa5a"
-  integrity sha512-IvEDQRe0t0ouqaqZK2KobGt/+BhwDHdtbS8GWhdl+fjmWbhXMz2mHihu5fAYkYChum5eNfGhEF5P+bLCeYq67w==
+  version "11.7.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-segmenter/-/intl-segmenter-11.7.4.tgz#f99d87ee3f98515069285438a4913681fc243252"
+  integrity sha512-pyHgFO86/CReKl20oK9jgaTMzSaG/nIMteMW8YuwUcS22EoMI1qbGTZ65oQ38KMT05SiHiMee2CP3WZvCi8YSQ==
  dependencies:
-    "@formatjs/ecma402-abstract" "2.2.3"
-    "@formatjs/intl-localematcher" "0.5.7"
+    "@formatjs/ecma402-abstract" "2.2.4"
+    "@formatjs/intl-localematcher" "0.5.8"
    tslib "2"

 "@humanwhocodes/config-array@^0.13.0":
@ -2073,11 +2073,11 @@
    webcrypto-core "^1.8.0"

 "@playwright/test@^1.40.1":
-  version "1.48.2"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.48.2.tgz#87dd40633f980872283404c8142a65744d3f13d6"
-  integrity sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.49.0.tgz#74227385b58317ee076b86b56d0e1e1b25cff01e"
+  integrity sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==
  dependencies:
-    playwright "1.48.2"
+    playwright "1.49.0"

 "@polka/url@^1.0.0-next.24":
  version "1.0.0-next.28"
@ -2375,43 +2375,39 @@
  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==

-"@sentry-internal/browser-utils@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-8.37.1.tgz#374028d8e37047aeda14b226707e6601de65996e"
-  integrity sha512-OSR/V5GCsSCG7iapWtXCT/y22uo3HlawdEgfM1NIKk1mkP15UyGQtGEzZDdih2H+SNuX1mp9jQLTjr5FFp1A5w==
+"@sentry-internal/browser-utils@8.40.0":
+  version "8.40.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-8.40.0.tgz#972925a9d600723dd1a022297100e97e92f4c903"
+  integrity sha512-tx7gb/PWMbTEyil/XPETVeRUeS3nKHIvQY2omyebw30TbhyLnibPZsUmXJiaIysL5PcY3k9maub3W/o0Y37T7Q==
  dependencies:
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry/core" "8.40.0"
+    "@sentry/types" "8.40.0"

-"@sentry-internal/feedback@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-8.37.1.tgz#e2d5fc934ca3b4925a5f5d0e63549830a1cf147e"
-  integrity sha512-Se25NXbSapgS2S+JssR5YZ48b3OY4UGmAuBOafgnMW91LXMxRNWRbehZuNUmjjHwuywABMxjgu+Yp5uJDATX+g==
+"@sentry-internal/feedback@8.40.0":
+  version "8.40.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-8.40.0.tgz#5549f73d32b9a2509ffb0a07bf462ed8085178ec"
+  integrity sha512-1O9F3z80HNE0VfepKS+v+dixdatNqWlrlwgvvWl4BGzzoA+XhqvZo+HWxiOt7yx7+k1TuZNrB6Gy3u/QvpozXA==
  dependencies:
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry/core" "8.40.0"
+    "@sentry/types" "8.40.0"

-"@sentry-internal/replay-canvas@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-8.37.1.tgz#e8a5e350e486b16938b3dd99886be23b7b6eff18"
-  integrity sha512-1JLAaPtn1VL5vblB0BMELFV0D+KUm/iMGsrl4/JpRm0Ws5ESzQl33DhXVv1IX/ZAbx9i14EjR7MG9+Hj70tieQ==
+"@sentry-internal/replay-canvas@8.40.0":
+  version "8.40.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-8.40.0.tgz#6de0d67ee2fe3e503c6f85faeefab5df742a3ebe"
+  integrity sha512-Zr+m/le0SH4RowZB7rBCM0aRnvH3wZTaOFhwUk03/oGf2BRcgKuDCUMjnXKC9MyOpmey7UYXkzb8ro+81R6Q8w==
  dependencies:
-    "@sentry-internal/replay" "8.37.1"
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry-internal/replay" "8.40.0"
+    "@sentry/core" "8.40.0"
+    "@sentry/types" "8.40.0"

-"@sentry-internal/replay@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay/-/replay-8.37.1.tgz#6dc2e3955879f6e7ab830db1ddee54e0a9b401f3"
-  integrity sha512-E/Plhisk/pXJjOdOU12sg8m/APTXTA21iEniidP6jW3/+O0tD/H/UovEqa4odNTqxPMa798xHQSQNt5loYiaLA==
+"@sentry-internal/replay@8.40.0":
+  version "8.40.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay/-/replay-8.40.0.tgz#54c7f1e3d115f9324f34e1b8875a95463a23049f"
+  integrity sha512-0SaDsBCSWxNVgNmPKu23frrHEXzN/MKl0hIkfuO55vL5TgjLTwpgkf0Ne4rNvaZQ5omIKk9Qd63HuQP3PHAMaw==
  dependencies:
-    "@sentry-internal/browser-utils" "8.37.1"
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry-internal/browser-utils" "8.40.0"
+    "@sentry/core" "8.40.0"
+    "@sentry/types" "8.40.0"

 "@sentry/babel-plugin-component-annotate@2.22.5":
  version "2.22.5"
@ -2419,17 +2415,16 @@
  integrity sha512-+93qwB9vTX1nj4hD8AMWowXZsZVkvmP9OwTqSh5d4kOeiJ+dZftUk4+FKeKkAX9lvY2reyHV8Gms5mo67c27RQ==

 "@sentry/browser@^8.0.0":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-8.37.1.tgz#2e6e4accc395ad9e6313e07b09415370c71e5874"
-  integrity sha512-5ym+iGiIpjIKKpMWi9S3/tXh9xneS+jqxwRTJqed3cb8i4ydfMAAP8sM3U8xMCWWABpWyIUW+fpewC0tkhE1aQ==
+  version "8.40.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-8.40.0.tgz#de7b4531be2ac4667755e9e1b5da3808851392ae"
+  integrity sha512-m/Yor6IDBeDHtQochu8n6z4HXrXkrPhu6+o5Ouve0Zi3ptthSoK1FOGvJxVBat3nRq0ydQyuuPuTB6WfdWbwHQ==
  dependencies:
-    "@sentry-internal/browser-utils" "8.37.1"
-    "@sentry-internal/feedback" "8.37.1"
-    "@sentry-internal/replay" "8.37.1"
-    "@sentry-internal/replay-canvas" "8.37.1"
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry-internal/browser-utils" "8.40.0"
+    "@sentry-internal/feedback" "8.40.0"
+    "@sentry-internal/replay" "8.40.0"
+    "@sentry-internal/replay-canvas" "8.40.0"
+    "@sentry/core" "8.40.0"
+    "@sentry/types" "8.40.0"

 "@sentry/bundler-plugin-core@2.22.5":
  version "2.22.5"
@ -2499,25 +2494,17 @@
    "@sentry/cli-win32-i686" "2.37.0"
    "@sentry/cli-win32-x64" "2.37.0"

-"@sentry/core@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.37.1.tgz#4bafb25c762ec8680874056f6160df276c1cc7c6"
-  integrity sha512-82csXby589iDupM3VgCHJeWZagUyEEaDnbFcoZ/Z91QX2Sjq8FcF5OsforoXjw09i0XTFqlkFAnQVpDBmMXcpQ==
+"@sentry/core@8.40.0":
+  version "8.40.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.40.0.tgz#cb5c02d12e29070bf88692c64cfd7db7700be4ea"
+  integrity sha512-u/U2CJpG/+SmTR2bPM4ZZoPYTJAOUuxzj/0IURnvI0v9+rNu939J/fzrO9huA5IJVxS5TiYykhQm7o6I3Zuo3Q==
  dependencies:
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry/types" "8.40.0"

-"@sentry/types@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-8.37.1.tgz#e92a7d346cfa29116568f4ffb58f65caedee0149"
-  integrity sha512-ryMOTROLSLINKFEbHWvi7GigNrsQhsaScw2NddybJGztJQ5UhxIGESnxGxWCufBmWFDwd7+5u0jDPCVUJybp7w==
-
-"@sentry/utils@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-8.37.1.tgz#6e020cd222d56d79953ea9d4630d91b3e323ceda"
-  integrity sha512-Qtn2IfpII12K17txG/ZtTci35XYjYi4CxbQ3j7nXY7toGv/+MqPXwV5q2i9g94XaSXlE5Wy9/hoCZoZpZs/djA==
-  dependencies:
-    "@sentry/types" "8.37.1"
+"@sentry/types@8.40.0":
+  version "8.40.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-8.40.0.tgz#a98d2bcc48adbc066b403713688ded3ac5eb1cec"
+  integrity sha512-nuCf3U3deolPM9BjNnwCc33UtFl9ec15/r74ngAkNccn+A2JXdIAsDkGJMO/9mgSFykLe1QyeJ0pQFRisCGOiA==

 "@sentry/webpack-plugin@^2.7.1":
  version "2.22.5"
@ -2562,11 +2549,11 @@
    p-map "^4.0.0"

 "@stylistic/eslint-plugin@^2.9.0":
-  version "2.10.1"
-  resolved "https://registry.yarnpkg.com/@stylistic/eslint-plugin/-/eslint-plugin-2.10.1.tgz#809924752a1a13ebff2b0b6d7884fd61d389a907"
-  integrity sha512-U+4yzNXElTf9q0kEfnloI9XbOyD4cnEQCxjUI94q0+W++0GAEQvJ/slwEj9lwjDHfGADRSr+Tco/z0XJvmDfCQ==
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@stylistic/eslint-plugin/-/eslint-plugin-2.11.0.tgz#50d0289f36f7201055b7fa1729fdc1d8c46e93fa"
+  integrity sha512-PNRHbydNG5EH8NK4c+izdJlxajIR6GxcUhzsYNRsn6Myep4dsZt0qFCz3rCPnkvgO5FYibDcMqgNHUT+zvjYZw==
  dependencies:
-    "@typescript-eslint/utils" "^8.12.2"
+    "@typescript-eslint/utils" "^8.13.0"
    eslint-visitor-keys "^4.2.0"
    espree "^10.3.0"
    estraverse "^5.3.0"
@ -2836,9 +2823,9 @@
  integrity sha512-aqBg5oAGo/qh/+wxUfuMadDu2WO0MEWOblyzwaM1Ske2xilUxBfgPqapAFVAfrVTDMVwa0UMarzGot8m64IAzA==

 "@types/css-tree@^2.3.8":
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/@types/css-tree/-/css-tree-2.3.8.tgz#0eabc115e45051b2f7abe51ee1531074b234ed19"
-  integrity sha512-zABG3nI2UENsx7AQv63tI5/ptoAG/7kQR1H0OvG+WTWYHOR5pfAT3cGgC8SdyCrgX/TTxJBZNmx82IjCXs1juQ==
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/@types/css-tree/-/css-tree-2.3.9.tgz#54c404e0a803e7e660fdc08c84fe73ee5266cece"
+  integrity sha512-g1FE6xkPDP4tsccmTd6jIugjKZdxIDqAf9h2pc+4LsGgYbOyfa9phNjBHYbm6FtwIlNfT1NBx3f2zSeqO7aRAw==

 "@types/diff-match-patch@^1.0.32":
  version "1.0.36"
@ -2861,9 +2848,9 @@
  integrity sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g==

 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.0.tgz#91f06cda1049e8f17eeab364798ed79c97488a1c"
-  integrity sha512-AbXMTZGt40T+KON9/Fdxx0B2WK5hsgxcfXJLr5bFpZ7b4JCex2WyQPTEKdXqfHiY5nKKBScZ7yCoO6Pvgxfvnw==
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.2.tgz#812d2871e5eea17fb0bd5214dda7a7b748c0e12a"
+  integrity sha512-vluaspfvWEtE4vcSDlKRNer52DvOGrB2xv6diXy6UKyKW0lqZiWHGNApSyxOv+8DE5Z27IzVvE7hNkxg7EXIcg==
  dependencies:
    "@types/node" "*"
    "@types/qs" "*"
@ -3065,9 +3052,9 @@
  integrity sha512-yslwR0zZ3zAT1qXcCPxIcD23CZ6W6nKsl6JufSJHAmdwOBuYwCVJkaMsEo9yzxGV7ATfoX8S+RgtnajOEtKxYA==

 "@types/node-fetch@^2.6.2":
-  version "2.6.11"
-  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.11.tgz#9b39b78665dae0e82a08f02f4967d62c66f95d24"
-  integrity sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.12.tgz#8ab5c3ef8330f13100a7479e2cd56d3386830a03"
+  integrity sha512-8nneRWKCg3rMtF69nLQJnOYUcbafYeFSjqkw3jCRLsqkWFlHaoQrr5mXmofFGOx3DKn7UfmBMyov8ySvLRVldA==
  dependencies:
    "@types/node" "*"
    form-data "^4.0.0"
@ -3080,16 +3067,16 @@
    "@types/node" "*"

 "@types/node@*":
-  version "22.7.6"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.7.6.tgz#3ec3e2b071e136cd11093c19128405e1d1f92f33"
-  integrity sha512-/d7Rnj0/ExXDMcioS78/kf1lMzYk4BZV8MZGTBKzTGZ6/406ukkbYlIsZmMPhcR5KlkunDHQLrtAVmSq7r+mSw==
+  version "22.10.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.0.tgz#89bfc9e82496b9c7edea3382583fa94f75896e81"
+  integrity sha512-XC70cRZVElFHfIUB40FgZOBbgJYFKKMa5nb9lxcwYstFG/Mi+/Y0bGS+rs6Dmhmkpq4pnNiLiuZAbc02YCOnmA==
  dependencies:
-    undici-types "~6.19.2"
+    undici-types "~6.20.0"

 "@types/node@18":
-  version "18.19.64"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.64.tgz#122897fb79f2a9ec9c979bded01c11461b2b1478"
-  integrity sha512-955mDqvO2vFf/oL7V3WiUtiz+BugyX8uVbaT2H8oj3+8dRyH2FLiNdowe7eNqRM7IOIZvzDH76EoAT+gwm6aIQ==
+  version "18.19.66"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.66.tgz#0937a47904ceba5994eedf5cf4b6d503d8d6136c"
+  integrity sha512-14HmtUdGxFUalGRfLLn9Gc1oNWvWh5zNbsyOLo5JV6WARSeN1QcEBKRnZm9QqNfrutgsl/hY4eJW63aZ44aBCg==
  dependencies:
    undici-types "~5.26.4"

@ -3317,6 +3304,14 @@
    "@typescript-eslint/types" "8.14.0"
    "@typescript-eslint/visitor-keys" "8.14.0"

+"@typescript-eslint/scope-manager@8.16.0":
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.16.0.tgz#ebc9a3b399a69a6052f3d88174456dd399ef5905"
+  integrity sha512-mwsZWubQvBki2t5565uxF0EYvG+FwdFb8bMtDuGQLdCCnGPrDEDvm1gtfynuKlnpzeBRqdFCkMf9jg1fnAK8sg==
+  dependencies:
+    "@typescript-eslint/types" "8.16.0"
+    "@typescript-eslint/visitor-keys" "8.16.0"
+
 "@typescript-eslint/scope-manager@8.9.0":
  version "8.9.0"
  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.9.0.tgz#c98fef0c4a82a484e6a1eb610a55b154d14d46f3"
@ -3340,6 +3335,11 @@
  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.14.0.tgz#0d33d8d0b08479c424e7d654855fddf2c71e4021"
  integrity sha512-yjeB9fnO/opvLJFAsPNYlKPnEM8+z4og09Pk504dkqonT02AyL5Z9SSqlE0XqezS93v6CXn49VHvB2G7XSsl0g==

+"@typescript-eslint/types@8.16.0":
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.16.0.tgz#49c92ae1b57942458ab83d9ec7ccab3005e64737"
+  integrity sha512-NzrHj6thBAOSE4d9bsuRNMvk+BvaQvmY4dDglgkgGC0EW/tB3Kelnp3tAKH87GEwzoxgeQn9fNGRyFJM/xd+GQ==
+
 "@typescript-eslint/types@8.9.0":
  version "8.9.0"
  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.9.0.tgz#b733af07fb340b32e962c6c63b1062aec2dc0fe6"
@ -3359,6 +3359,20 @@
    semver "^7.6.0"
    ts-api-utils "^1.3.0"

+"@typescript-eslint/typescript-estree@8.16.0":
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.16.0.tgz#9d741e56e5b13469b5190e763432ce5551a9300c"
+  integrity sha512-E2+9IzzXMc1iaBy9zmo+UYvluE3TW7bCGWSF41hVWUE01o8nzr1rvOQYSxelxr6StUvRcTMe633eY8mXASMaNw==
+  dependencies:
+    "@typescript-eslint/types" "8.16.0"
+    "@typescript-eslint/visitor-keys" "8.16.0"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/typescript-estree@8.9.0":
  version "8.9.0"
  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.9.0.tgz#1714f167e9063062dc0df49c1d25afcbc7a96199"
@ -3373,7 +3387,7 @@
    semver "^7.6.0"
    ts-api-utils "^1.3.0"

-"@typescript-eslint/utils@8.14.0", "@typescript-eslint/utils@^8.12.2":
+"@typescript-eslint/utils@8.14.0":
  version "8.14.0"
  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.14.0.tgz#ac2506875e03aba24e602364e43b2dfa45529dbd"
  integrity sha512-OGqj6uB8THhrHj0Fk27DcHPojW7zKwKkPmHXHvQ58pLYp4hy8CSUdTKykKeh+5vFqTTVmjz0zCOOPKRovdsgHA==
@ -3393,6 +3407,16 @@
    "@typescript-eslint/types" "8.9.0"
    "@typescript-eslint/typescript-estree" "8.9.0"

+"@typescript-eslint/utils@^8.13.0":
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.16.0.tgz#c71264c437157feaa97842809836254a6fc833c3"
+  integrity sha512-C1zRy/mOL8Pj157GiX4kaw7iyRLKfJXBR3L82hk5kS/GyHcOFmy4YUq/zfZti72I9wnuQtA/+xzft4wCC8PJdA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.16.0"
+    "@typescript-eslint/types" "8.16.0"
+    "@typescript-eslint/typescript-estree" "8.16.0"
+
 "@typescript-eslint/visitor-keys@8.14.0":
  version "8.14.0"
  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.14.0.tgz#2418d5a54669af9658986ade4e6cfb7767d815ad"
@ -3401,6 +3425,14 @@
    "@typescript-eslint/types" "8.14.0"
    eslint-visitor-keys "^3.4.3"

+"@typescript-eslint/visitor-keys@8.16.0":
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.16.0.tgz#d5086afc060b01ff7a4ecab8d49d13d5a7b07705"
+  integrity sha512-pq19gbaMOmFE3CbL0ZB8J8BFCo2ckfHBfaIsaOZgBIF4EoISJIdLX5xRhd0FGB0LlHReNRuzoJoMGpTjq8F2CQ==
+  dependencies:
+    "@typescript-eslint/types" "8.16.0"
+    eslint-visitor-keys "^4.2.0"
+
 "@typescript-eslint/visitor-keys@8.9.0":
  version "8.9.0"
  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.9.0.tgz#5f11f4d9db913f37da42776893ffe0dd1ae78f78"
@ -3415,9 +3447,9 @@
  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==

 "@vector-im/compound-design-tokens@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-2.0.1.tgz#add14494caab16cdbe98f2bdabe726908739def4"
-  integrity sha512-4nkPcrPII+sejispn+UkWZYFN7LecN39e4WGBupdceiMq0NJrfXrnVtJ9/6BDLgSqHInb6R/IWQkIbPbzfqRMg==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-2.1.1.tgz#d6175a99fe4b97688464126f255386990f3048d6"
+  integrity sha512-QnUi2K14D9KTXxcLQKUU3V75cforZLMwhaaJDNftT8F5mG86950hAM+qhgDNEpEU+pkTffQj0/g/5859YmqWzQ==

 "@vector-im/compound-web@^7.4.0":
  version "7.4.0"
@ -8064,10 +8096,10 @@ lines-and-columns@^1.1.6:
  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==

-linkify-element@4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/linkify-element/-/linkify-element-4.1.3.tgz#c0de98f2a36683bf3a4bfa28eaa23c4c917bd546"
-  integrity sha512-oUoG7BWaR3Q6kAKdlLi8slsu5rkVRxbiDVVlkpoL7vtidY5THggLzRHIBtmcj+tvMpcAUQomJApDxg0ub0qpdA==
+linkify-element@4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/linkify-element/-/linkify-element-4.1.4.tgz#d4050b41fb47c44871e5eed93bc11865e403cc90"
+  integrity sha512-XhSTTF7b7OoX4KIkwVG8MET5DSFEHohT0Gp5pjmsByYp+JCyZq5rSZGsar5dYzeuKUV6TqTSLtsH/NzBBwBxgQ==

 linkify-it@^4.0.1:
  version "4.0.1"
@ -8076,20 +8108,20 @@ linkify-it@^4.0.1:
  dependencies:
    uc.micro "^1.0.1"

-linkify-react@4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/linkify-react/-/linkify-react-4.1.3.tgz#461d348b4bdab3fcd0452ae1b5bbc22536395b97"
-  integrity sha512-rhI3zM/fxn5BfRPHfi4r9N7zgac4vOIxub1wHIWXLA5ENTMs+BGaIaFO1D1PhmxgwhIKmJz3H7uCP0Dg5JwSlA==
+linkify-react@4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/linkify-react/-/linkify-react-4.1.4.tgz#6c709f3f96543914874982f4b0b00f9c9270ce93"
+  integrity sha512-UI9nqHtFzHYRUvVRrYeua5GIXkc0Jy3RpLsJBWEht7HwqjAa2qSaIksGmNSLqclNpO/5AkwaxUJv71I/pQsk9Q==

-linkify-string@4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/linkify-string/-/linkify-string-4.1.3.tgz#a47dbbf64c9fbd2f6ae5e26cd41ec2e5748a54d1"
-  integrity sha512-6dAgx4MiTcvEX87OS5aNpAioO7cSELUXp61k7azOvMYOLSmREx0w4yM1Uf0+O3JLC08YdkUyZhAX+YkasRt/mw==
+linkify-string@4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/linkify-string/-/linkify-string-4.1.4.tgz#89fb814e05c5b22f76d2a2a640bc8b1db4c6694f"
+  integrity sha512-4z2UEzEi4SxnhWMzzZ8Pa8vIOwX/2U0XWxk/0UIA7lI+Dn0ZRKqTE9ildnO6Jl6K5hqVuLKTeMD8p4bdFW6P8g==

-linkifyjs@4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.3.tgz#0edbc346428a7390a23ea2e5939f76112c9ae07f"
-  integrity sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg==
+linkifyjs@4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.4.tgz#2766605a20078d50c90f35af22275a42dfb7dfc4"
+  integrity sha512-0/NxkHNpiJ0k9VrYCkAn9OtU1eu8xEr1tCCpDtSsVRm/SF0xAak2Gzv3QimSfgUgqLBCDlfhMbu73XvaEHUTPQ==

 lint-staged@^15.0.2:
  version "15.2.10"
@ -9163,17 +9195,17 @@ pkg-dir@^7.0.0:
  dependencies:
    find-up "^6.3.0"

-playwright-core@1.48.2, playwright-core@^1.45.1:
-  version "1.48.2"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.48.2.tgz#cd76ed8af61690edef5c05c64721c26a8db2f3d7"
-  integrity sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==
+playwright-core@1.49.0, playwright-core@^1.45.1:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.49.0.tgz#8e69ffed3f41855b854982f3632f2922c890afcb"
+  integrity sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==

-playwright@1.48.2:
-  version "1.48.2"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.48.2.tgz#fca45ae8abdc34835c715718072aaff7e305167e"
-  integrity sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==
+playwright@1.49.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.49.0.tgz#df6b9e05423377a99658202844a294a8afb95d0a"
+  integrity sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==
  dependencies:
-    playwright-core "1.48.2"
+    playwright-core "1.49.0"
  optionalDependencies:
    fsevents "2.3.2"

@ -11114,9 +11146,9 @@ stylelint-config-standard@^36.0.0:
    stylelint-config-recommended "^14.0.1"

 stylelint-scss@^6.0.0:
-  version "6.9.0"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-6.9.0.tgz#a5ab9b2a8ed7e0a9c113558fdbd1b66ad673b259"
-  integrity sha512-oWOR+g6ccagfrENecImGmorWWjVyWpt2R8bmkhOW8FkNNPGStZPQMqb8QWMW4Lwu9TyPqmyjHkkAsy3weqsnNw==
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-6.10.0.tgz#ba5b807793e145421e9879dd15ae672af6820a45"
+  integrity sha512-y03if6Qw9xBMoVaf7tzp5BbnYhYvudIKzURkhSHzcHG0bW0fAYvQpTUVJOe7DyhHaxeThBil4ObEMvGbV7+M+w==
  dependencies:
    css-tree "^3.0.1"
    is-plain-object "^5.0.0"
@ -11124,7 +11156,7 @@ stylelint-scss@^6.0.0:
    mdn-data "^2.12.2"
    postcss-media-query-parser "^0.2.3"
    postcss-resolve-nested-selector "^0.1.6"
-    postcss-selector-parser "^6.1.2"
+    postcss-selector-parser "^7.0.0"
    postcss-value-parser "^4.2.0"

 stylelint-value-no-unknown-custom-properties@^6.0.1:
@ -11438,9 +11470,9 @@ truncate-utf8-bytes@^1.0.0:
    utf8-byte-length "^1.0.1"

 ts-api-utils@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.0.tgz#709c6f2076e511a81557f3d07a0cbd566ae8195c"
-  integrity sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.2.tgz#a6a6dff26117ac7965624fc118525971edc6a82a"
+  integrity sha512-ZF5gQIQa/UmzfvxbHZI3JXN0/Jt+vnAfAviNRAMc491laiK6YCLpCW9ft8oaCRFOTxCZtUTE6XB0ZQAe3olntw==

 ts-morph@^13.0.1:
  version "13.0.3"
@ -11625,10 +11657,10 @@ undici-types@~5.26.4:
  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==

-undici-types@~6.19.2:
-  version "6.19.8"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
-  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+undici-types@~6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
+  integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==

 unhomoglyph@^1.0.6:
  version "1.0.6"