v1.11.112

Merge commit from fork
* Validate room upgrade relationships properly Ensures only correctly related rooms are left when leaving the latest version of a room. Ensures the room list does not wrongly hide rooms which have not yet been upgraded. Ensures the breadcrumbs store finds the correct latest version of a room for a given stored room. Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-09-17 11:04:05 +02:00 · 2025-09-16 11:52:32 +00:00 · 2025-09-16 12:43:49 +01:00 · 2025-09-16 11:41:51 +00:00 · 2025-09-16 12:05:08 +01:00 · 2025-09-16 09:41:11 +01:00
245 changed files with 3406 additions and 5777 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -17,11 +17,6 @@
 /playwright/e2e/crypto/                                                 @element-hq/element-crypto-web-reviewers
 /playwright/e2e/settings/encryption-user-tab/                           @element-hq/element-crypto-web-reviewers

-
-/src/models/Call.ts             @element-hq/element-call-reviewers
-/src/call-types.ts              @element-hq/element-call-reviewers
-/src/components/views/voip      @element-hq/element-call-reviewers
-
 # Ignore translations as those will be updated by GHA for Localazy download
 /src/i18n/strings
 /src/i18n/strings/en_EN.json  @element-hq/element-web-reviewers
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -88,7 +88,7 @@ jobs:
              run: mdbook build

            - name: Upload artifact
-              uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4
+              uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
              with:
                  path: ./book

--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -13,7 +13,7 @@ import { mergeConfig } from "vite";
 const config: StorybookConfig = {
    stories: ["../src/shared-components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    staticDirs: ["../webapp"],
-    addons: ["@storybook/addon-docs", "@storybook/addon-designs", "@storybook/addon-a11y"],
+    addons: ["@storybook/addon-docs", "@storybook/addon-designs"],
    framework: "@storybook/react-vite",
    core: {
        disableTelemetry: true,
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -100,13 +100,6 @@ const preview: Preview = {
                method: "alphabetical",
            },
        },
-        a11y: {
-            /*
-             * Configure test behavior
-             * See: https://storybook.js.org/docs/next/writing-tests/accessibility-testing#test-behavior
-             */
-            test: "error",
-        },
    },
 };

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+Changes in [1.11.112](https://github.com/element-hq/element-web/releases/tag/v1.11.112) (2025-09-16)
+====================================================================================================
+Fix [CVE-2025-59161](https://www.cve.org/CVERecord?id=CVE-2025-59161) / [GHSA-m6c8-98f4-75rr](https://github.com/element-hq/element-web/security/advisories/GHSA-m6c8-98f4-75rr)
+
+
 Changes in [1.11.111](https://github.com/element-hq/element-web/releases/tag/v1.11.111) (2025-09-10)
 ====================================================================================================
 ## ✨ Features
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,11 +2,6 @@

 Everyone is welcome to contribute code to Element Web, provided that they are willing to license their contributions to Element under a [Contributor License Agreement](https://cla-assistant.io/element-hq/element-web) (CLA). This ensures that their contribution will be made available under an OSI-approved open-source license, currently licensed under Affero General Public License v3 (AGPLv3) or General Public License v3 (GPLv3) at your choice.

-If you're contributing, or thinking about contributing, please come & chat to
-us in our development room, [#element-dev](https://matrix.to/#/#element-dev:matrix.org).
-This is the best place to ask questions about the code, how to work on the project
-or whether a change is likely to be accepted.
-
 ## How to contribute

 The preferred and easiest way to contribute changes to the project is to fork
--- a/4
+++ b/4
@@ -1,7 +1,7 @@
 # syntax=docker.io/docker/dockerfile:1.17-labs@sha256:9187104f31e3a002a8a6a3209ea1f937fb7486c093cbbde1e14b0fa0d7e4f1b5

 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:f7f28d1962d93cc096ea6327378d990284757fec281ce48e42436e7b4b167fa2 AS builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:9e34ba52e1f3c31ed9bd4d0bcf784f5909db17cda61c220e29c8d7a8ebfb402e AS builder

 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -19,7 +19,7 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json

 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:0d019e980f83728002de7a6d8819d0d4af7179046d3946b8b37749953fbb28e6
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:ea6c4b8b568824ea94cd1fabd47e1c4e7c0c04744f344a3793f7e9c8ac3a3636

 # Need root user to install packages & manipulate the usr directory
 USER root
--- a/docs/config.md
+++ b/docs/config.md
@@ -585,8 +585,6 @@ Currently, the following UI feature flags are supported:
 - `UIFeature.BulkUnverifiedSessionsReminder` - Display popup reminders to verify or remove unverified sessions. Defaults
  to true.
 - `UIFeature.locationSharing` - Whether or not location sharing menus will be shown.
- `UIFeature.allowCreatingPublicRooms` - Whether or not public rooms can be created.
- `UIFeature.allowCreatingPublicSpaces` - Whether or not public spaces can be created.

 ## Undocumented / developer options

--- a/docs/e2ee.md
+++ b/docs/e2ee.md
@@ -38,20 +38,45 @@ When `force_disable` is true:
 Note: If the server is configured to forcibly enable encryption for some or all rooms,
 this behaviour will be overridden.

-# Setting up recovery
+# Secure backup

 By default, Element strongly encourages (but does not require) users to set up
-recovery so that you can access history on your new devices as well as retain access to your message history and cryptographic identity when you lose all of your devices.
+Secure Backup so that cross-signing identity key and message keys can be
+recovered in case of a disaster where you lose access to all active devices.

-## Removal of old settings
+## Requiring secure backup

-Support for the configuration options `secure_backup_required` and `secure_backup_setup_methods`
-in the `/.well-known/matrix/client` config has been removed.
+To require Secure Backup to be configured before Element can be used, set the
+following on your homeserver's `/.well-known/matrix/client` config:

-Setting up recovery is now always recommended to all users by showing a one-off toast and a
-permanent red dot on the _Encryption_ tab in the _Settings_ dialog. When creating a new
-recovery key, the UI only supports auto-generated keys. Using an existing (custom) passphrase
-still works, but is not exposed in the UI when setting up recovery.
+```json
+{
+    "io.element.e2ee": {
+        "secure_backup_required": true
+    }
+}
+```
+
+## Preferring setup methods
+
+By default, Element offers users a choice of a random key or user-chosen
+passphrase when setting up Secure Backup. If a homeserver admin would like to
+only offer one of these, you can signal this via the
+`/.well-known/matrix/client` config, for example:
+
+```json
+{
+    "io.element.e2ee": {
+        "secure_backup_setup_methods": ["passphrase"]
+    }
+}
+```
+
+The field `secure_backup_setup_methods` is an array listing the methods the
+client should display. Supported values currently include `key` and
+`passphrase`. If the `secure_backup_setup_methods` field is not present or
+exists but does not contain any supported methods, Element will fallback to the
+default value of: `["key", "passphrase"]`.

 # Compatibility

--- a/knip.ts
+++ b/knip.ts
@@ -2,6 +2,7 @@ import { KnipConfig } from "knip";

 export default {
    entry: [
+        "src/vector/index.ts",
        "src/serviceworker/index.ts",
        "src/workers/*.worker.ts",
        "src/utils/exportUtils/exportJS.js",
@@ -11,6 +12,8 @@ export default {
        "res/decoder-ring/**",
        "res/jitsi_external_api.min.js",
        "docs/**",
+        // Used by jest
+        "__mocks__/maplibre-gl.js",
    ],
    project: ["**/*.{js,ts,jsx,tsx}"],
    ignore: [
@@ -50,7 +53,6 @@ export default {
    ignoreBinaries: [
        // Used in scripts & workflows
        "jq",
-        "wait-on",
    ],
    ignoreExportsUsedInFile: true,
 } satisfies KnipConfig;
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.11.111",
+    "version": "1.11.112",
    "description": "Element: the future of secure communication",
    "author": "New Vector Ltd.",
    "repository": {
@@ -75,8 +75,8 @@
    "resolutions": {
        "**/pretty-format/react-is": "19.1.1",
        "@playwright/test": "1.54.2",
-        "@types/react": "19.1.12",
-        "@types/react-dom": "19.1.9",
+        "@types/react": "19.1.10",
+        "@types/react-dom": "19.1.7",
        "oidc-client-ts": "3.3.0",
        "jwt-decode": "4.0.0",
        "caniuse-lite": "1.0.30001724",
@@ -134,7 +134,7 @@
        "maplibre-gl": "^5.0.0",
        "matrix-encrypt-attachment": "^1.0.3",
        "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+        "matrix-js-sdk": "38.2.0",
        "matrix-widget-api": "^1.10.0",
        "memoize-one": "^6.0.0",
        "mime": "^4.0.4",
@@ -142,7 +142,7 @@
        "opus-recorder": "^8.0.3",
        "pako": "^2.0.3",
        "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.261.0",
+        "posthog-js": "1.260.1",
        "qrcode": "1.5.4",
        "re-resizable": "6.11.2",
        "react": "^19.0.0",
@@ -158,7 +158,7 @@
        "sanitize-html": "2.17.0",
        "tar-js": "^0.3.0",
        "temporal-polyfill": "^0.3.0",
-        "ua-parser-js": "1.0.40",
+        "ua-parser-js": "^1.0.2",
        "uuid": "^11.0.0",
        "what-input": "^5.2.10"
    },
@@ -184,14 +184,13 @@
        "@babel/preset-typescript": "^7.12.7",
        "@babel/runtime": "^7.12.5",
        "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.15.0",
+        "@element-hq/element-call-embedded": "0.14.1",
        "@element-hq/element-web-playwright-common": "^1.4.6",
        "@peculiar/webcrypto": "^1.4.3",
        "@playwright/test": "^1.50.1",
        "@principalstudio/html-webpack-inject-preload": "^1.2.7",
        "@rrweb/types": "^2.0.0-alpha.18",
        "@sentry/webpack-plugin": "^4.0.0",
-        "@storybook/addon-a11y": "^9.0.18",
        "@storybook/addon-designs": "^10.0.1",
        "@storybook/addon-docs": "^9.0.12",
        "@storybook/icons": "^1.4.0",
@@ -223,9 +222,9 @@
        "@types/node-fetch": "^2.6.2",
        "@types/pako": "^2.0.0",
        "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.12",
+        "@types/react": "19.1.10",
        "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.9",
+        "@types/react-dom": "19.1.7",
        "@types/react-transition-group": "^4.4.0",
        "@types/sanitize-html": "2.16.0",
        "@types/sdp-transform": "^2.4.10",
--- a/patches/@matrix-org+react-sdk-module-api+2.5.0.patch
+++ b/patches/@matrix-org+react-sdk-module-api+2.5.0.patch
@@ -11,42 +11,3 @@ index 917a7fc..a2710c6 100644
         didOkOrSubmit: boolean;
         model: M;
     }>;
-diff --git a/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js b/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js
-index 5d422ed..b823add 100644
--- a/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js
-+++ b/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js
-@@ -124,34 +124,28 @@ var DefaultCryptoSetupExtensions = /*#__PURE__*/function (_CryptoSetupExtension)
-   (0, _createClass2["default"])(DefaultCryptoSetupExtensions, [{
-     key: "examineLoginResponse",
-     value: function examineLoginResponse(response, credentials) {
-      console.log("Default empty examineLoginResponse() => void");
-     }
-   }, {
-     key: "persistCredentials",
-     value: function persistCredentials(credentials) {
-      console.log("Default empty persistCredentials() => void");
-     }
-   }, {
-     key: "getSecretStorageKey",
-     value: function getSecretStorageKey() {
-      console.log("Default empty getSecretStorageKey() => null");
-       return null;
-     }
-   }, {
-     key: "createSecretStorageKey",
-     value: function createSecretStorageKey() {
-      console.log("Default empty createSecretStorageKey() => null");
-       return null;
-     }
-   }, {
-     key: "catchAccessSecretStorageError",
-     value: function catchAccessSecretStorageError(e) {
-      console.log("Default catchAccessSecretStorageError() => void");
-     }
-   }, {
-     key: "setupEncryptionNeeded",
-     value: function setupEncryptionNeeded(args) {
-      console.log("Default setupEncryptionNeeded() => false");
-       return false;
-     }
-   }, {
--- a/playwright/e2e/composer/CIDER.spec.ts
+++ b/playwright/e2e/composer/CIDER.spec.ts
@@ -14,9 +14,6 @@ const CtrlOrMeta = process.platform === "darwin" ? "Meta" : "Control";
 test.describe("Composer", () => {
    test.use({
        displayName: "Janet",
-        botCreateOpts: {
-            displayName: "Bob",
-        },
    });

    test.use({
@@ -97,22 +94,5 @@ test.describe("Composer", () => {
                ).toBeVisible();
            });
        });
-
-        test("can send mention", { tag: "@screenshot" }, async ({ page, bot, app }) => {
-            // Set up a private room so we have another user to mention
-            await app.client.createRoom({
-                is_direct: true,
-                invite: [bot.credentials.userId],
-            });
-            await app.viewRoomByName("Bob");
-
-            const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
-            await composer.pressSequentially("@bob");
-            await page.getByRole("option", { name: "Bob" }).click();
-            await expect(composer.getByText("Bob")).toBeVisible();
-            await expect(composer).toMatchScreenshot("mention.png");
-            await composer.press("Enter");
-            await expect(page.locator(".mx_EventTile_body", { hasText: "Bob" })).toBeVisible();
-        });
    });
 });
--- a/playwright/e2e/create-room/create-room.spec.ts
+++ b/playwright/e2e/create-room/create-room.spec.ts
@@ -0,0 +1,34 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Create Room", () => {
+    test.use({ displayName: "Jim" });
+
+    test("should allow us to create a public room with name, topic & address set", async ({ page, user, app }) => {
+        const name = "Test room 1";
+        const topic = "This room is dedicated to this test and this test only!";
+
+        const dialog = await app.openCreateRoomDialog();
+        // Fill name & topic
+        await dialog.getByRole("textbox", { name: "Name" }).fill(name);
+        await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
+        // Change room to public
+        await dialog.getByRole("button", { name: "Room visibility" }).click();
+        await dialog.getByRole("option", { name: "Public room" }).click();
+        // Fill room address
+        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1");
+        // Submit
+        await dialog.getByRole("button", { name: "Create room" }).click();
+
+        await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`));
+        const header = page.locator(".mx_RoomHeader");
+        await expect(header).toContainText(name);
+    });
+});
--- a/playwright/e2e/crypto/crypto.spec.ts
+++ b/playwright/e2e/crypto/crypto.spec.ts
@@ -154,8 +154,8 @@ test.describe("Cryptography", function () {
            await app.client.bootstrapCrossSigning(aliceCredentials);
            await startDMWithBob(page, bob);
            // send first message
-            await page.getByRole("textbox", { name: "Send a message…" }).fill("Hey!");
-            await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
+            await page.getByRole("textbox", { name: "Send an unencrypted message…" }).fill("Hey!");
+            await page.getByRole("textbox", { name: "Send an unencrypted message…" }).press("Enter");
            await checkDMRoom(page);
            const bobRoomId = await bobJoin(page, bob);
            // We no longer show the grey badge in the composer, check that it is not there.
--- a/playwright/e2e/crypto/dehydration.spec.ts
+++ b/playwright/e2e/crypto/dehydration.spec.ts
@@ -38,7 +38,7 @@ test.describe("Dehydration", () => {
        // Reset the identity key
        const settings = await app.settings.openUserSettings("Encryption");
        await settings.getByRole("button", { name: "Verify this device" }).click();
-        await page.getByRole("button", { name: "Can't confirm?" }).click();
+        await page.getByRole("button", { name: "Proceed with reset" }).click();
        await page.getByRole("button", { name: "Continue" }).click();

        // Set up recovery
@@ -106,7 +106,7 @@ test.describe("Dehydration", () => {
        await logIntoElement(page, credentials);

        // Oh no, we forgot our recovery key - reset our identity
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Can't confirm" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Reset all" }).click();
        await expect(
            page.getByRole("heading", { name: "Are you sure you want to reset your identity?" }),
        ).toBeVisible();
--- a/playwright/e2e/crypto/device-verification.spec.ts
+++ b/playwright/e2e/crypto/device-verification.spec.ts
@@ -36,13 +36,13 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
        expectedBackupVersion = res.expectedBackupVersion;
    });

-    // Click the "Use another device" button, and have the bot client auto-accept it.
+    // Click the "Verify with another device" button, and have the bot client auto-accept it.
    async function initiateAliceVerificationRequest(page: Page): Promise<JSHandle<VerificationRequest>> {
        // alice bot waits for verification request
        const promiseVerificationRequest = waitForVerificationRequest(aliceBotClient);

-        // Click on "Use another device"
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Use another device" }).click();
+        // Click on "Verify with another device"
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with another device" }).click();

        // alice bot responds yes to verification request from alice
        return promiseVerificationRequest;
@@ -203,7 +203,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {

    /** Helper for the three tests above which verify by recovery key */
    async function enterRecoveryKeyAndCheckVerified(page: Page, app: ElementAppPage, recoveryKey: string) {
-        await page.getByRole("button", { name: "Use recovery key" }).click();
+        await page.getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();

        // Enter the recovery key
        const dialog = page.locator(".mx_Dialog");
--- a/playwright/e2e/crypto/event-shields.spec.ts
+++ b/playwright/e2e/crypto/event-shields.spec.ts
@@ -14,7 +14,7 @@ import {
    createSecondBotDevice,
    createSharedRoomWithUser,
    enableKeyBackup,
-    logIntoElementAndVerify,
+    logIntoElement,
    logOutOfElement,
    verify,
    waitForDevices,
@@ -195,7 +195,7 @@ test.describe("Cryptography", function () {
                window.localStorage.clear();
            });
            await page.reload();
-            await logIntoElementAndVerify(page, aliceCredentials, securityKey);
+            await logIntoElement(page, aliceCredentials, securityKey);

            /* go back to the test room and find Bob's message again */
            await app.viewRoomById(testRoomId);
--- a/playwright/e2e/crypto/toasts.spec.ts
+++ b/playwright/e2e/crypto/toasts.spec.ts
@@ -8,7 +8,7 @@
 import { type GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";

 import { test, expect } from "../../element-web-test";
-import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElementAndVerify } from "./utils";
+import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement } from "./utils";
 import { type Bot } from "../../pages/bot";

 test.describe("Key storage out of sync toast", () => {
@@ -18,7 +18,7 @@ test.describe("Key storage out of sync toast", () => {
        const res = await createBot(page, homeserver, credentials);
        recoveryKey = res.recoveryKey;

-        await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);
+        await logIntoElement(page, credentials, recoveryKey.encodedPrivateKey);

        await deleteCachedSecrets(page);

@@ -65,7 +65,7 @@ test.describe("'Turn on key storage' toast", () => {
        const recoveryKey = res.recoveryKey;
        botClient = res.botClient;

-        await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);
+        await logIntoElement(page, credentials, recoveryKey.encodedPrivateKey);

        // We won't be prompted for crypto setup unless we have an e2e room, so make one
        await page.getByRole("button", { name: "Add room" }).click();
--- a/playwright/e2e/crypto/utils.ts
+++ b/playwright/e2e/crypto/utils.ts
@@ -206,42 +206,32 @@ export async function checkDeviceIsConnectedKeyBackup(

 /**
 * Fill in the login form in element with the given creds.
+ *
+ * If a `securityKey` is given, verifies the new device using the key.
 */
-export async function logIntoElement(page: Page, credentials: Credentials) {
+export async function logIntoElement(page: Page, credentials: Credentials, securityKey?: string) {
    await page.goto("/#/login");

    await page.getByRole("textbox", { name: "Username" }).fill(credentials.userId);
    await page.getByPlaceholder("Password").fill(credentials.password);
    await page.getByRole("button", { name: "Sign in" }).click();
-}

-/**
- * Fill in the login form in Element with the given creds, and then complete the `CompleteSecurity` step, using the
- * given recovery key. (Normally this will verify the new device using the secrets from 4S.)
- *
- * Afterwards, waits for the application to redirect to the home page.
- */
-export async function logIntoElementAndVerify(page: Page, credentials: Credentials, recoveryKey: string) {
-    await logIntoElement(page, credentials);
+    // if a securityKey was given, verify the new device
+    if (securityKey !== undefined) {
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key" }).click();

-    await page.locator(".mx_AuthPage").getByRole("button", { name: "Use recovery key" }).click();
-
-    const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "Use recovery key" });
-    // If the user has set a recovery *passphrase*, they'll be prompted for that first and have to click
-    // through to enter the recovery key which is what we have here. If they haven't, they'll be prompted
-    // for a recovery key straight away. We click the button if it's there so this works in both cases.
-    if (await useSecurityKey.isVisible()) {
-        await useSecurityKey.click();
+        const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "use your Recovery Key" });
+        // If the user has set a recovery *passphrase*, they'll be prompted for that first and have to click
+        // through to enter the recovery key which is what we have here. If they haven't, they'll be prompted
+        // for a recovery key straight away. We click the button if it's there so this works in both cases.
+        if (await useSecurityKey.isVisible()) {
+            await useSecurityKey.click();
+        }
+        // Fill in the recovery key
+        await page.locator(".mx_Dialog").getByTitle("Recovery key").fill(securityKey);
+        await page.getByRole("button", { name: "Continue", disabled: false }).click();
+        await page.getByRole("button", { name: "Done" }).click();
    }
-
-    // Fill in the recovery key
-    await page.locator(".mx_Dialog").getByTitle("Recovery key").fill(recoveryKey);
-    await page.getByRole("button", { name: "Continue", disabled: false }).click();
-    await page.getByRole("button", { name: "Done" }).click();
-
-    // The application should now redirect to `/#/home`. Wait for that to happen, otherwise if a test immediately does
-    // a `viewRoomById` or similar, it could race.
-    await page.waitForURL("/#/home");
 }

 /**
@@ -272,7 +262,7 @@ export async function logOutOfElement(page: Page, discardKeys: boolean = false)
 export async function verifySession(app: ElementAppPage, securityKey: string) {
    const settings = await app.settings.openUserSettings("Encryption");
    await settings.getByRole("button", { name: "Verify this device" }).click();
-    await app.page.getByRole("button", { name: "Use recovery key" }).click();
+    await app.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
    await app.page.locator(".mx_Dialog").getByTitle("Recovery key").fill(securityKey);
    await app.page.getByRole("button", { name: "Continue", disabled: false }).click();
    await app.page.getByRole("button", { name: "Done" }).click();
--- a/playwright/e2e/devtools/devtools.spec.ts
+++ b/playwright/e2e/devtools/devtools.spec.ts
@@ -1,33 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { test, expect } from "../../element-web-test";
-
-test.describe("Devtools", () => {
-    test.use({
-        displayName: "Alice",
-    });
-
-    test("should render the devtools", { tag: "@screenshot" }, async ({ page, homeserver, user, app, axe }) => {
-        await app.client.createRoom({ name: "Test Room" });
-        await app.viewRoomByName("Test Room");
-
-        const composer = app.getComposer().locator("[contenteditable]");
-        await composer.fill("/devtools");
-        await composer.press("Enter");
-        const dialog = page.locator(".mx_Dialog");
-        await dialog.getByLabel("Developer mode").check();
-
-        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-        await expect(axe).toHaveNoViolations();
-        await expect(dialog).toMatchScreenshot("devtools-dialog.png", {
-            css: `.mx_CopyableText {
-                display: none;
-            }`,
-        });
-    });
-});
--- a/playwright/e2e/devtools/upgraderoom.spec.ts
+++ b/playwright/e2e/devtools/upgraderoom.spec.ts
@@ -1,38 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { SettingLevel } from "../../../src/settings/SettingLevel";
-import { test, expect } from "../../element-web-test";
-
-test.describe("Room upgrade dialog", () => {
-    test.use({
-        displayName: "Alice",
-    });
-
-    test(
-        "should render the room upgrade dialog",
-        { tag: "@screenshot" },
-        async ({ page, homeserver, user, app, axe }) => {
-            // Enable developer mode
-            await app.settings.setValue("developerMode", null, SettingLevel.ACCOUNT, true);
-
-            await app.client.createRoom({ name: "Test Room" });
-            await app.viewRoomByName("Test Room");
-
-            const composer = app.getComposer().locator("[contenteditable]");
-            // Pick a room version that is likely to be supported by all our target homeservers.
-            await composer.fill("/upgraderoom 5");
-            await composer.press("Enter");
-            const dialog = page.locator(".mx_Dialog");
-            await dialog.getByLabel("Automatically invite members from this room to the new one").check();
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(dialog).toMatchScreenshot("upgrade-room.png");
-        },
-    );
-});
--- a/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts
+++ b/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts
@@ -1,28 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { test, expect } from "../../element-web-test";
-
-test.describe("Decline and block invite dialog", function () {
-    test.use({
-        displayName: "Hanako",
-    });
-
-    test(
-        "should show decline and block dialog for a room",
-        { tag: "@screenshot" },
-        async ({ page, app, user, bot, axe }) => {
-            await bot.createRoom({ name: "Test Room", invite: [user.userId] });
-            await app.viewRoomByName("Test Room");
-            await page.getByRole("button", { name: "Decline and block" }).click();
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("decline-and-block-invite-empty.png");
-        },
-    );
-});
--- a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
@@ -41,7 +41,7 @@ test.describe("Room list", () => {
            }
        });

-        test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
+        test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
            const roomListView = getRoomList(page);
            await expect(roomListView.getByRole("option", { name: "Open room room29" })).toBeVisible();
            await expect(roomListView).toMatchScreenshot("room-list.png");
@@ -54,7 +54,6 @@ test.describe("Room list", () => {
            // scrollListToBottom seems to leave the mouse hovered over the list, move it away.
            await page.getByRole("button", { name: "User menu" }).hover();

-            await expect(axe).toHaveNoViolations();
            await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
        });

--- a/playwright/e2e/location/location.spec.ts
+++ b/playwright/e2e/location/location.spec.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -57,26 +57,4 @@ test.describe("Location sharing", { tag: "@no-firefox" }, () => {

        await expect(page.locator(".mx_Marker")).toBeVisible();
    });
-
-    test(
-        "is prompted for and can consent to live location sharing",
-        { tag: "@screenshot" },
-        async ({ page, user, app, axe }) => {
-            await app.viewRoomById(await app.client.createRoom({}));
-
-            const composerOptions = await app.openMessageComposerOptions();
-            await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click();
-            const menu = page.locator(".mx_LocationShareMenu");
-
-            await menu.getByRole("button", { name: "My live location" }).click();
-            await menu.getByLabel("Enable live location sharing").check();
-
-            axe.disableRules([
-                "color-contrast", // XXX: Inheriting colour contrast issues from room view.
-                "region", // XXX: ContextMenu managed=false does not provide a role.
-            ]);
-            await expect(axe).toHaveNoViolations();
-            await expect(menu).toMatchScreenshot("location-live-share-dialog.png");
-        },
-    );
 });
--- a/playwright/e2e/login/login-consent.spec.ts
+++ b/playwright/e2e/login/login-consent.spec.ts
@@ -186,7 +186,7 @@ test.describe("Login", () => {
                await page.goto("/");
                await login(page, homeserver, credentials);

-                await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).toBeVisible();
+                await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();

                await expect(page.getByRole("button", { name: "Skip verification for now" })).toBeVisible();
            });
@@ -219,7 +219,7 @@ test.describe("Login", () => {
                    await page.goto("/");
                    await login(page, homeserver, credentials);

-                    await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).toBeVisible();
+                    await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();

                    await expect(page.getByRole("button", { name: "Skip verification for now" })).toBeVisible();
                });
@@ -254,10 +254,10 @@ test.describe("Login", () => {
                    await page.goto("/");
                    await login(page, homeserver, credentials);

-                    const h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
-                    await expect(h2).toBeVisible();
+                    const h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
+                    await expect(h1).toBeVisible();

-                    await expect(h2.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
+                    await expect(h1.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
                });

                test("Continues to show verification prompt after cancelling device verification", async ({
@@ -274,18 +274,18 @@ test.describe("Login", () => {
                    // Load the page and see that we are asked to verify
                    await page.goto("/#/welcome");
                    await login(page, homeserver, credentials);
-                    let h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
-                    await expect(h2).toBeVisible();
+                    let h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
+                    await expect(h1).toBeVisible();

-                    // Click "Use another device"
-                    await page.getByRole("button", { name: "Use another device" }).click();
+                    // Click "Verify with another device"
+                    await page.getByRole("button", { name: "Verify with another device" }).click();

                    // Cancel the new dialog
                    await page.getByRole("button", { name: "Close dialog" }).click();

                    // Check that we are still being asked to verify
-                    h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
-                    await expect(h2).toBeVisible();
+                    h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
+                    await expect(h1).toBeVisible();
                });
            });

@@ -303,18 +303,18 @@ test.describe("Login", () => {
                await page.goto("/");
                await login(page, homeserver, credentials);

-                await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).toBeVisible();
+                await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();

                // Start the reset process
-                await page.getByRole("button", { name: "Can't confirm?" }).click();
+                await page.getByRole("button", { name: "Proceed with reset" }).click();

                // First try cancelling and restarting
                await page.getByRole("button", { name: "Cancel" }).click();
-                await page.getByRole("button", { name: "Can't confirm?" }).click();
+                await page.getByRole("button", { name: "Proceed with reset" }).click();

                // Then click outside the dialog and restart
                await page.getByRole("link", { name: "Powered by Matrix" }).click({ force: true });
-                await page.getByRole("button", { name: "Can't confirm?" }).click();
+                await page.getByRole("button", { name: "Proceed with reset" }).click();

                // Finally we actually continue
                await page.getByRole("button", { name: "Continue" }).click();
--- a/playwright/e2e/oidc/oidc-native.spec.ts
+++ b/playwright/e2e/oidc/oidc-native.spec.ts
@@ -129,8 +129,8 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
        await page.getByRole("button", { name: "Continue" }).click();
        await page.getByRole("button", { name: "Continue" }).click();

-        // We should be in
-        await expect(page.getByText("Confirm your identity")).toBeVisible();
+        // We should be in (we see an error because we have no recovery key).
+        await expect(page.getByText("Unable to verify this device")).toBeVisible();
    });

    test.describe("with force_verification on", () => {
@@ -162,7 +162,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
            await page.getByRole("button", { name: "Continue" }).click();

            // We should be being warned that we need to verify (but we can't)
-            await expect(page.getByText("Confirm your identity")).toBeVisible();
+            await expect(page.getByText("Unable to verify this device")).toBeVisible();

            // And there should be no way to close this prompt
            await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
@@ -210,7 +210,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
                await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();

                // When we start verifying with another device
-                await page.getByRole("button", { name: "Use another device" }).click();
+                await page.getByRole("button", { name: "Verify with another device" }).click();

                // And then cancel it
                await page.getByRole("button", { name: "Close dialog" }).click();
@@ -227,7 +227,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 * Perform interactive emoji verification for a new device.
 */
 async function verifyUsingOtherDevice(deviceToVerifyPage: Page, alreadyVerifiedDevicePage: Page) {
-    await deviceToVerifyPage.getByRole("button", { name: "Use another device" }).click();
+    await deviceToVerifyPage.getByRole("button", { name: "Verify with another device" }).click();
    await alreadyVerifiedDevicePage.getByRole("button", { name: "Verify session" }).click();
    await alreadyVerifiedDevicePage.getByRole("button", { name: "Start" }).click();
    await alreadyVerifiedDevicePage.getByRole("button", { name: "They match" }).click();
--- a/playwright/e2e/release-announcement/index.ts
+++ b/playwright/e2e/release-announcement/index.ts
@@ -30,8 +30,9 @@ export class Helpers {
    /**
     * Get the release announcement with the given name.
     * @param name
+     * @private
     */
-    public getReleaseAnnouncement(name: string) {
+    private getReleaseAnnouncement(name: string) {
        return this.page.getByRole("dialog", { name });
    }

@@ -54,6 +55,16 @@ export class Helpers {
    assertReleaseAnnouncementIsNotVisible(name: string) {
        return expect(this.getReleaseAnnouncement(name)).not.toBeVisible();
    }
+
+    /**
+     * Mark the release announcement with the given name as read.
+     * If the release announcement is not visible, this will throw an error.
+     * @param name
+     */
+    async markReleaseAnnouncementAsRead(name: string) {
+        const dialog = this.getReleaseAnnouncement(name);
+        await dialog.getByRole("button", { name: "Ok" }).click();
+    }
 }

 export { expect };
--- a/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
+++ b/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
@@ -22,25 +22,25 @@ test.describe("Release announcement", () => {
            await app.viewRoomById(roomId);
            await use({ roomId });
        },
-        labsFlags: ["feature_new_room_list"],
    });

    test(
-        "should display the new room list release announcement",
+        "should display the pinned messages release announcement",
        { tag: "@screenshot" },
        async ({ page, app, room, util }) => {
-            const name = "Chats has a new look!";
+            await app.toggleRoomInfoPanel();
+
+            const name = "All new pinned messages";

            // The release announcement should be displayed
            await util.assertReleaseAnnouncementIsVisible(name);
            // Hide the release announcement
-            const dialog = util.getReleaseAnnouncement(name);
-            await dialog.getByRole("button", { name: "Next" }).click();
-
+            await util.markReleaseAnnouncementAsRead(name);
            await util.assertReleaseAnnouncementIsNotVisible(name);

            await page.reload();
-            await expect(page.getByRole("button", { name: "Room options" })).toBeVisible();
+            await app.toggleRoomInfoPanel();
+            await expect(page.getByRole("menuitem", { name: "Pinned messages" })).toBeVisible();
            // Check that once the release announcement has been marked as viewed, it does not appear again
            await util.assertReleaseAnnouncementIsNotVisible(name);
        },
--- a/playwright/e2e/room/create-room.spec.ts
+++ b/playwright/e2e/room/create-room.spec.ts
@@ -1,113 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { SettingLevel } from "../../../src/settings/SettingLevel";
-import { UIFeature } from "../../../src/settings/UIFeature";
-import { test, expect } from "../../element-web-test";
-
-const name = "Test room";
-const topic = "A decently explanatory topic for a test room.";
-
-test.describe("Create Room", () => {
-    test.use({ displayName: "Jim" });
-
-    test(
-        "should create a public room with name, topic & address set",
-        { tag: "@screenshot" },
-        async ({ page, user, app, axe }) => {
-            const dialog = await app.openCreateRoomDialog();
-            // Fill name & topic
-            await dialog.getByRole("textbox", { name: "Name" }).fill(name);
-            await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
-            // Change room to public
-            await dialog.getByRole("button", { name: "Room visibility" }).click();
-            await dialog.getByRole("option", { name: "Public room" }).click();
-            // Fill room address
-            await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-standard");
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            // Snapshot it
-            await expect(dialog).toMatchScreenshot("create-room.png");
-
-            // Submit
-            await dialog.getByRole("button", { name: "Create room" }).click();
-
-            await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-standard:${user.homeServer}`));
-            const header = page.locator(".mx_RoomHeader");
-            await expect(header).toContainText(name);
-        },
-    );
-
-    test("should allow us to start a chat and show encryption state", async ({ page, user, app }) => {
-        await page.getByRole("button", { name: "Add", exact: true }).click();
-        await page.getByText("Start new chat").click();
-
-        await page.getByTestId("invite-dialog-input").fill(user.userId);
-
-        await page.getByRole("button", { name: "Go" }).click();
-
-        await expect(page.getByText("Encryption enabled")).toBeVisible();
-        await expect(page.getByText("Send your first message to")).toBeVisible();
-
-        const composer = page.getByRole("region", { name: "Message composer" });
-        await expect(composer.getByRole("textbox", { name: "Send a message…" })).toBeVisible();
-    });
-
-    test("should create a video room", { tag: "@screenshot" }, async ({ page, user, app }) => {
-        await app.settings.setValue("feature_video_rooms", null, SettingLevel.DEVICE, true);
-
-        const dialog = await app.openCreateRoomDialog("New video room");
-        // Fill name & topic
-        await dialog.getByRole("textbox", { name: "Name" }).fill(name);
-        await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
-        // Change room to public
-        await dialog.getByRole("button", { name: "Room visibility" }).click();
-        await dialog.getByRole("option", { name: "Public room" }).click();
-        // Fill room address
-        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-video");
-        // Snapshot it
-        await expect(dialog).toMatchScreenshot("create-video-room.png");
-
-        // Submit
-        await dialog.getByRole("button", { name: "Create video room" }).click();
-
-        await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-video:${user.homeServer}`));
-        const header = page.locator(".mx_RoomHeader");
-        await expect(header).toContainText(name);
-    });
-
-    test.describe("Should hide public room option if not allowed", () => {
-        test.use({
-            config: {
-                setting_defaults: {
-                    [UIFeature.AllowCreatingPublicRooms]: false,
-                },
-            },
-        });
-
-        test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app, axe }) => {
-            const dialog = await app.openCreateRoomDialog();
-            // Fill name & topic
-            await dialog.getByRole("textbox", { name: "Name" }).fill(name);
-            await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            // Snapshot it
-            await expect(dialog).toMatchScreenshot("create-room-no-public.png");
-
-            // Submit
-            await dialog.getByRole("button", { name: "Create room" }).click();
-
-            await expect(page).toHaveURL(new RegExp(`/#/room/!.+`));
-            const header = page.locator(".mx_RoomHeader");
-            await expect(header).toContainText(name);
-        });
-    });
-});
--- a/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
+++ b/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
@@ -160,15 +160,15 @@ test.describe("Encryption tab", () => {

            // We will reset our identity
            await settings.getByRole("button", { name: "Verify this device" }).click();
-            await page.getByRole("button", { name: "Can't confirm?" }).click();
+            await page.getByRole("button", { name: "Proceed with reset" }).click();

            // First try cancelling and restarting
            await page.getByRole("button", { name: "Cancel" }).click();
-            await page.getByRole("button", { name: "Can't confirm?" }).click();
+            await page.getByRole("button", { name: "Proceed with reset" }).click();

            // Then click outside the dialog and restart
            await page.locator("li").filter({ hasText: "Encryption" }).click({ force: true });
-            await page.getByRole("button", { name: "Can't confirm?" }).click();
+            await page.getByRole("button", { name: "Proceed with reset" }).click();

            // Finally we actually continue
            await page.getByRole("button", { name: "Continue" }).click();
--- a/playwright/e2e/settings/encryption-user-tab/index.ts
+++ b/playwright/e2e/settings/encryption-user-tab/index.ts
@@ -43,7 +43,7 @@ class Helpers {
     */
    async verifyDevice(recoveryKey: GeneratedSecretStorageKey) {
        // Select the security phrase
-        await this.page.getByRole("button", { name: "Use recovery key" }).click();
+        await this.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
        await this.enterRecoveryKey(recoveryKey);
        await this.page.getByRole("button", { name: "Done" }).click();
    }
@@ -104,10 +104,7 @@ class Helpers {

        const clipboardContent = await this.app.getClipboard();
        await dialog.getByRole("textbox").fill(clipboardContent);
-        const button = dialog.getByRole("button", { name: confirmButtonLabel });
-        await button.click();
-        // Button should disable immediately after clicking.
-        await expect(button).toBeDisabled();
+        await dialog.getByRole("button", { name: confirmButtonLabel }).click();
        await expect(this.getEncryptionRecoverySection()).toMatchScreenshot("default-recovery.png");
    }
 }
--- a/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts
+++ b/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts
@@ -1,28 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { test, expect } from "../../../element-web-test";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-
-test.describe("Notifications 2 tab", () => {
-    test.use({
-        displayName: "Alice",
-    });
-
-    test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
-        await app.settings.setValue("feature_notification_settings2", null, SettingLevel.DEVICE, true);
-        await page.setViewportSize({ width: 1024, height: 2000 });
-        const settings = await app.settings.openUserSettings("Notifications");
-
-        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-        await expect(axe).toHaveNoViolations();
-        await expect(settings).toMatchScreenshot("standard-notifications-2-settings.png", {
-            // Mask the mxid.
-            mask: [settings.locator("#mx_NotificationSettings2_MentionCheckbox span")],
-        });
-    });
-});
--- a/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts
+++ b/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts
@@ -1,25 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { test, expect } from "../../../element-web-test";
-
-test.describe("Notifications tab", () => {
-    test.use({
-        displayName: "Alice",
-    });
-
-    test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
-        await page.setViewportSize({ width: 1024, height: 1400 });
-        const settings = await app.settings.openUserSettings("Notifications");
-        await settings.getByLabel("Enable notifications for this account").check();
-        await settings.getByLabel("Enable notifications for this device").check();
-
-        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-        await expect(axe).toHaveNoViolations();
-        await expect(settings).toMatchScreenshot("standard-notification-settings.png");
-    });
-});
--- a/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts
+++ b/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts
@@ -8,7 +8,7 @@

 import { type Locator } from "@playwright/test";

-import { test, expect } from "../../../element-web-test";
+import { test, expect } from "../../element-web-test";

 test.describe("Roles & Permissions room settings tab", () => {
    const roomName = "Test room";
--- a/playwright/e2e/settings/room-settings/room-security-tab.spec.ts
+++ b/playwright/e2e/settings/room-settings/room-security-tab.spec.ts
@@ -1,121 +0,0 @@
-/*
- * Copyright 2025 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import { type Locator } from "@playwright/test";
-
-import { test, expect } from "../../../element-web-test";
-
-test.describe("Roles & Permissions room settings tab", () => {
-    const roomName = "Test room";
-
-    test.use({
-        displayName: "Alice",
-    });
-
-    let settings: Locator;
-
-    test.beforeEach(async ({ user, app }) => {
-        await app.client.createRoom({
-            name: roomName,
-            power_level_content_override: {
-                events: {
-                    // Set the join rules as lower than the history vis to test an edge case.
-                    ["m.room.join_rules"]: 80,
-                    ["m.room.history_visibility"]: 100,
-                },
-            },
-        });
-        await app.viewRoomByName(roomName);
-        settings = await app.settings.openRoomSettings("Security & Privacy");
-    });
-
-    test(
-        "should be able to toggle on encryption in a room",
-        { tag: "@screenshot" },
-        async ({ page, app, user, axe }) => {
-            await page.setViewportSize({ width: 1024, height: 1400 });
-            const encryptedToggle = settings.getByLabel("Encrypted");
-            await encryptedToggle.click();
-
-            // Accept the dialog.
-            await page.getByRole("button", { name: "Ok " }).click();
-
-            await expect(encryptedToggle).toBeChecked();
-            await expect(encryptedToggle).toBeDisabled();
-
-            await settings.getByLabel("Only send messages to verified users.").check();
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(settings).toMatchScreenshot("room-security-settings.png");
-        },
-    );
-
-    test(
-        "should automatically adjust history visibility when a room is changed from public to private",
-        { tag: "@screenshot" },
-        async ({ page, app, user, axe }) => {
-            await page.setViewportSize({ width: 1024, height: 1400 });
-
-            const settingsGroupAccess = page.getByRole("group", { name: "Access" });
-            const settingsGroupHistory = page.getByRole("group", { name: "Who can read history?" });
-
-            await settingsGroupAccess.getByText("Public").click();
-            await settingsGroupHistory.getByText("Anyone").click();
-
-            // Test that we have the warning appear.
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(settings).toMatchScreenshot("room-security-settings-world-readable.png");
-
-            await settingsGroupAccess.getByText("Private (invite only)").click();
-            // Element should have automatically set the room to "sharing" history visibility
-            await expect(
-                settingsGroupHistory.getByText("Members only (since the point in time of selecting this option)"),
-            ).toBeChecked();
-        },
-    );
-
-    test(
-        "should disallow changing from public to private if the user cannot alter history",
-        { tag: "@screenshot" },
-        async ({ page, app, user, bot }) => {
-            await page.setViewportSize({ width: 1024, height: 1400 });
-
-            const settingsGroupAccess = page.getByRole("group", { name: "Access" });
-            const settingsGroupHistory = page.getByRole("group", { name: "Who can read history?" });
-
-            await settingsGroupAccess.getByText("Public").click();
-            await settingsGroupHistory.getByText("Anyone").click();
-
-            // De-op ourselves
-            await app.settings.switchTab("Roles & Permissions");
-
-            // Wait for the permissions list to be visible
-            await expect(settings.getByRole("heading", { name: "Permissions" })).toBeVisible();
-
-            const ourComboBox = settings.getByRole("combobox", { name: user.userId });
-            await ourComboBox.selectOption("Custom level");
-            const ourPl = settings.getByRole("spinbutton", { name: user.userId });
-            await ourPl.fill("80");
-            await ourPl.blur(); // Shows a warning on
-
-            // Accept the de-op
-            await page.getByRole("button", { name: "Continue" }).click();
-            await settings.getByRole("button", { name: "Apply", disabled: false }).click();
-
-            await app.settings.switchTab("Security & Privacy");
-
-            await settingsGroupAccess.getByText("Private (invite only)").click();
-            // Element should have automatically set the room to "sharing" history visibility
-            const errorDialog = page.getByRole("heading", { name: "Cannot make room private" });
-            await expect(errorDialog).toBeVisible();
-            await errorDialog.getByLabel("OK");
-            await expect(settingsGroupHistory.getByText("Anyone")).toBeChecked();
-        },
-    );
-});
--- a/playwright/e2e/settings/room-settings/room-video-tab.spec.ts
+++ b/playwright/e2e/settings/room-settings/room-video-tab.spec.ts
@@ -1,42 +0,0 @@
-/*
- * Copyright 2025 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import { type Locator } from "@playwright/test";
-
-import { test, expect } from "../../../element-web-test";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-
-test.describe("Voice & Video room settings tab", () => {
-    const roomName = "Test room";
-
-    test.use({
-        displayName: "Alice",
-    });
-
-    let settings: Locator;
-
-    test.beforeEach(async ({ user, app, page }) => {
-        // Execute client actions before setting, as the setting will force a reload.
-        await app.client.createRoom({ name: roomName });
-        await app.settings.setValue("feature_group_calls", null, SettingLevel.DEVICE, true);
-        await app.viewRoomByName(roomName);
-        settings = await app.settings.openRoomSettings("Voice & Video");
-    });
-
-    test(
-        "should be able to toggle on Element Call in the room",
-        { tag: "@screenshot" },
-        async ({ page, app, user, axe }) => {
-            await page.setViewportSize({ width: 1024, height: 1400 });
-            const callToggle = settings.getByLabel("Enable Element Call as an additional calling option in this room");
-            await callToggle.check();
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(settings).toMatchScreenshot("room-video-settings.png");
-        },
-    );
-});
--- a/playwright/e2e/settings/security-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/security-user-settings-tab.spec.ts
@@ -41,18 +41,6 @@ test.describe("Security user settings tab", () => {
            });
        });

-        test("should render the security tab", { tag: "@screenshot" }, async ({ app, page, user }) => {
-            await page.setViewportSize({ width: 1024, height: 1400 });
-            const tab = await app.settings.openUserSettings("Security");
-            await expect(tab).toMatchScreenshot("security-settings-tab.png", {
-                mask: [
-                    // Contains IM name.
-                    tab.locator("#mx_SetIntegrationManager_BodyText"),
-                    tab.locator("#mx_SetIntegrationManager_ManagerName"),
-                ],
-            });
-        });
-
        test("should be able to set an ID server", async ({ app, context, user, page }) => {
            const tab = await app.settings.openUserSettings("Security");

--- a/playwright/e2e/spaces/spaces.spec.ts
+++ b/playwright/e2e/spaces/spaces.spec.ts
@@ -11,7 +11,6 @@ import { test, expect } from "../../element-web-test";
 import type { Preset, ICreateRoomOpts } from "matrix-js-sdk/src/matrix";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { UIFeature } from "../../../src/settings/UIFeature";

 async function openSpaceCreateMenu(page: Page): Promise<Locator> {
    await page.getByRole("button", { name: "Create a space" }).click();
@@ -377,68 +376,4 @@ test.describe("Spaces", () => {
        await app.viewSpaceByName("Root Space");
        await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png");
    });
-
-    test("should render spaces visibility settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
-        await app.client.createSpace({
-            name: "My Space",
-        });
-        await app.viewSpaceByName("My space");
-        await page.getByLabel("Settings", { exact: true }).click();
-        await app.settings.switchTab("Visibility");
-
-        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-        await expect(axe).toHaveNoViolations();
-        await expect(page.locator("#mx_tabpanel_SPACE_VISIBILITY_TAB")).toMatchScreenshot(
-            "space-visibility-settings.png",
-        );
-    });
-
-    test.describe("Should hide public spaces option if not allowed", () => {
-        test.use({
-            config: {
-                setting_defaults: {
-                    [UIFeature.AllowCreatingPublicSpaces]: false,
-                },
-            },
-        });
-
-        test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app }) => {
-            const menu = await openSpaceCreateMenu(page);
-            await menu
-                .locator('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
-                .setInputFiles("playwright/sample-files/riot.png");
-            await menu.getByRole("textbox", { name: "Name" }).fill("This is a private space");
-            await expect(menu.getByRole("textbox", { name: "Address" })).not.toBeVisible();
-            await menu
-                .getByRole("textbox", { name: "Description" })
-                .fill("This is a private space because we can't make public ones");
-            await menu.getByRole("button", { name: "Create" }).click();
-
-            await page.getByRole("button", { name: "Me and my teammates" }).click();
-
-            // Create the default General & Random rooms, as well as a custom "Projects" room
-            await expect(page.getByPlaceholder("General")).toBeVisible();
-            await expect(page.getByPlaceholder("Random")).toBeVisible();
-            await page.getByPlaceholder("Support").fill("Projects");
-            await page.getByRole("button", { name: "Continue" }).click();
-            await page.getByRole("button", { name: "Skip for now" }).click();
-
-            // Assert rooms exist in the room list
-            const roomList = page.getByRole("tree", { name: "Rooms" });
-            await expect(roomList.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
-            await expect(roomList.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
-            await expect(roomList.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();
-
-            // Assert rooms exist in the space explorer
-            await expect(
-                page.locator(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", { hasText: "General" }),
-            ).toBeVisible();
-            await expect(
-                page.locator(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", { hasText: "Random" }),
-            ).toBeVisible();
-            await expect(
-                page.locator(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", { hasText: "Projects" }),
-            ).toBeVisible();
-        });
-    });
 });
--- a/playwright/e2e/spotlight/spotlight.spec.ts
+++ b/playwright/e2e/spotlight/spotlight.spec.ts
@@ -30,7 +30,7 @@ async function startDM(app: ElementAppPage, page: Page, name: string): Promise<v
    await result.first().click();

    // send first message to start DM
-    const locator = page.getByRole("textbox", { name: "Send a message…" });
+    const locator = page.getByRole("textbox", { name: "Send an unencrypted message…" });
    await expect(locator).toBeFocused();
    await locator.fill("Hey!");
    await locator.press("Enter");
@@ -260,7 +260,7 @@ test.describe("Spotlight", () => {

        // Send first message to actually start DM
        await expect(roomHeaderName(page)).toHaveText(bot2.credentials.displayName);
-        const locator = page.getByRole("textbox", { name: "Send a message…" });
+        const locator = page.getByRole("textbox", { name: "Send an unencrypted message…" });
        await locator.fill("Hey!");
        await locator.press("Enter");

--- a/playwright/e2e/widgets/permissions-dialog.spec.ts
+++ b/playwright/e2e/widgets/permissions-dialog.spec.ts
@@ -1,98 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { test, expect } from "../../element-web-test";
-
-const DEMO_WIDGET_ID = "demo-widget-id";
-const DEMO_WIDGET_NAME = "Demo Widget";
-const DEMO_WIDGET_TYPE = "demo";
-const ROOM_NAME = "Demo";
-
-const DEMO_WIDGET_HTML = `
-    <html lang="en">
-        <head>
-            <title>Demo Widget</title>
-            <script>
-                let sendEventCount = 0
-                window.onmessage = ev => {
-                    if (ev.data.action === 'capabilities') {
-                        window.parent.postMessage(Object.assign({
-                            response: {
-                                capabilities: [
-                                    "org.matrix.msc2762.timeline:*",
-                                    "org.matrix.msc2762.receive.state_event:m.room.topic",
-                                    "org.matrix.msc2762.send.event:net.widget_echo"
-                                ]
-                            },
-                        }, ev.data), '*');
-                    }
-                };
-            </script>
-        </head>
-    </html>
-`;
-
-test.describe("Widger permissions dialog", () => {
-    test.use({
-        displayName: "Mike",
-    });
-
-    let demoWidgetUrl: string;
-    test.beforeEach(async ({ webserver }) => {
-        demoWidgetUrl = webserver.start(DEMO_WIDGET_HTML);
-    });
-
-    test(
-        "should be updated if user is re-invited into the room with updated state event",
-        { tag: "@screenshot" },
-        async ({ page, app, user, axe }) => {
-            const roomId = await app.client.createRoom({
-                name: ROOM_NAME,
-            });
-
-            // setup widget via state event
-            await app.client.sendStateEvent(
-                roomId,
-                "im.vector.modular.widgets",
-                {
-                    id: DEMO_WIDGET_ID,
-                    creatorUserId: "somebody",
-                    type: DEMO_WIDGET_TYPE,
-                    name: DEMO_WIDGET_NAME,
-                    url: demoWidgetUrl,
-                },
-                DEMO_WIDGET_ID,
-            );
-
-            // set initial layout
-            await app.client.sendStateEvent(
-                roomId,
-                "io.element.widgets.layout",
-                {
-                    widgets: {
-                        [DEMO_WIDGET_ID]: {
-                            container: "top",
-                            index: 1,
-                            width: 100,
-                            height: 0,
-                        },
-                    },
-                },
-                "",
-            );
-
-            // open the room
-            await app.viewRoomByName(ROOM_NAME);
-
-            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
-            await expect(axe).toHaveNoViolations();
-            await expect(page.locator(".mx_WidgetCapabilitiesPromptDialog")).toMatchScreenshot(
-                "widget-capabilites-prompt.png",
-            );
-        },
-    );
-});
--- a/playwright/pages/ElementAppPage.ts
+++ b/playwright/pages/ElementAppPage.ts
@@ -51,9 +51,9 @@ export class ElementAppPage {
    /**
     * Open room creation dialog.
     */
-    public async openCreateRoomDialog(roomKindname: "New room" | "New video room" = "New room"): Promise<Locator> {
+    public async openCreateRoomDialog(): Promise<Locator> {
        await this.page.getByRole("button", { name: "Add room", exact: true }).click();
-        await this.page.getByRole("menuitem", { name: roomKindname, exact: true }).click();
+        await this.page.getByRole("menuitem", { name: "New room", exact: true }).click();
        return this.page.locator(".mx_CreateRoomDialog");
    }

--- a/playwright/pages/settings.ts
+++ b/playwright/pages/settings.ts
@@ -43,7 +43,7 @@ export class Settings {
     * @param {*} value The new value of the setting, may be null.
     * @return {Promise} Resolves when the setting has been changed.
     */
-    public async setValue(settingName: string, roomId: string | null, level: SettingLevel, value: any): Promise<void> {
+    public async setValue(settingName: string, roomId: string, level: SettingLevel, value: any): Promise<void> {
        return this.page.evaluate<
            Promise<void>,
            {
--- a/playwright/snapshots/composer/CIDER.spec.ts/mention-linux.png
+++ b/playwright/snapshots/composer/CIDER.spec.ts/mention-linux.png
--- a/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png
+++ b/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png
--- a/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png
+++ b/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png
--- a/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png
+++ b/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png
--- a/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png
+++ b/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png
--- a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png
+++ b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png
--- a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png
+++ b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png
--- a/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png
+++ b/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png
--- a/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png
+++ b/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png
--- a/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png
+++ b/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png
--- a/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png
+++ b/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png
--- a/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png
+++ b/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png
--- a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png
+++ b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png
--- a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png
+++ b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png
--- a/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png
+++ b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png
--- a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png
+++ b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png
--- a/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png
+++ b/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png
--- a/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png
+++ b/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png
--- a/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png
+++ b/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png
--- a/playwright/testcontainers/mas.ts
+++ b/playwright/testcontainers/mas.ts
@@ -10,7 +10,7 @@ import {
    type StartedPostgreSqlContainer,
 } from "@element-hq/element-web-playwright-common/lib/testcontainers";

-const TAG = "main@sha256:64b638f2c0ddd7aa0ddcbc39d21cdf3cedab91508b5d7953e2e85c9901ac5b26";
+const TAG = "main@sha256:430b1f00e74c3f89f078670f676b4333f6bbe5a339962344b3ae84e99e9bcd7f";

 /**
 * MatrixAuthenticationServiceContainer which freezes the docker digest to
--- a/playwright/testcontainers/synapse.ts
+++ b/playwright/testcontainers/synapse.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.

 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";

-const TAG = "develop@sha256:1784031f7b07de2abffe5b823b59be87a1fb1329a18ae3fc87e66f00f8b79fab";
+const TAG = "develop@sha256:8ce4c1a466e1e32bcffde390250a6785527d235436ae42afa9bf94d2a9288746";

 /**
 * SynapseContainer which freezes the docker digest to stabilise tests,
--- a/res/css/structures/auth/_SetupEncryptionBody.pcss
+++ b/res/css/structures/auth/_SetupEncryptionBody.pcss
@@ -6,6 +6,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-.mx_SetupEncryptionBody {
-    width: 600px;
+.mx_SetupEncryptionBody_reset {
+    color: $light-fg-color;
+    margin-top: $font-14px;
+
+    .mx_SetupEncryptionBody_reset_link {
+        &.mx_AccessibleButton_kind_link_inline {
+            color: $alert;
+        }
+    }
 }
--- a/res/css/views/auth/_AuthPage.pcss
+++ b/res/css/views/auth/_AuthPage.pcss
@@ -19,6 +19,7 @@ Please see LICENSE files in the repository root for full details.
    display: flex;
    margin: 100px auto auto;
    border-radius: 4px;
+    box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
    background-color: $authpage-modal-bg-color;

    @media only screen and (max-height: 768px) {
@@ -28,9 +29,4 @@ Please see LICENSE files in the repository root for full details.
    @media only screen and (max-width: 480px) {
        margin-top: 0;
    }
-
-    /* Apply a blurred shadow around the modal */
-    &.mx_AuthPage_modal_withBlur {
-        box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
-    }
 }
--- a/res/css/views/auth/_CompleteSecurityBody.pcss
+++ b/res/css/views/auth/_CompleteSecurityBody.pcss
@@ -8,10 +8,11 @@ Please see LICENSE files in the repository root for full details.
 */

 .mx_CompleteSecurityBody {
+    width: 600px;
    color: $authpage-primary-color;
    background-color: $background;
    border-radius: 4px;
-    padding: 20px 20px 60px 20px;
+    padding: 20px;
    box-sizing: border-box;

    h2 {
--- a/res/css/views/dialogs/_DevtoolsDialog.pcss
+++ b/res/css/views/dialogs/_DevtoolsDialog.pcss
@@ -24,12 +24,6 @@ Please see LICENSE files in the repository root for full details.
    }
 }

-.mx_DevTools_toolHeading {
-    color: var(--cpd-color-text-secondary);
-    font-weight: var(--cpd-font-weight-semibold);
-    font-size: var(--cpd-font-size-heading-sm);
-}
-
 .mx_DevTools_content {
    overflow-y: auto;
 }
--- a/res/css/views/messages/_PinnedMessageBadge.pcss
+++ b/res/css/views/messages/_PinnedMessageBadge.pcss
@@ -13,7 +13,7 @@

    padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-1x);
    font: var(--cpd-font-body-xs-medium);
-    background-color: var(--cpd-color-bg-subtle-secondary);
+    background-color: var(--cpd-color-alpha-gray-200);
    color: var(--cpd-color-text-secondary);

    border-radius: 99px;
--- a/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss
@@ -32,8 +32,4 @@
            transform: rotate(180deg);
        }
    }
-
-    .mx_RoomListHeaderView_ReleaseAnnouncementAnchor {
-        display: inline-flex;
-    }
 }
--- a/res/css/views/rooms/_AppsDrawer.pcss
+++ b/res/css/views/rooms/_AppsDrawer.pcss
@@ -208,7 +208,7 @@ Please see LICENSE files in the repository root for full details.
            margin-right: 12px;
        }

-        h1 {
+        h3 {
            font-size: inherit;
            margin: 0;
        }
--- a/res/css/views/rooms/_BasicMessageComposer.pcss
+++ b/res/css/views/rooms/_BasicMessageComposer.pcss
@@ -10,7 +10,6 @@ Please see LICENSE files in the repository root for full details.
    /* These are set in Javascript */
    --avatar-letter: "";
    --avatar-background: unset;
-    --avatar-color: unset;
    --placeholder: "";

    position: relative;
@@ -55,8 +54,6 @@ Please see LICENSE files in the repository root for full details.
            span.mx_UserPill,
            span.mx_RoomPill,
            span.mx_SpacePill {
-                display: inline-flex;
-                align-items: center;
                user-select: all;
                position: relative;
                cursor: unset; /* We don't want indicate clickability */
--- a/res/css/views/settings/encryption/_EncryptionCard.pcss
+++ b/res/css/views/settings/encryption/_EncryptionCard.pcss
@@ -30,13 +30,6 @@
            text-align: center;
        }
    }
-
-    /* extra class for specifying that we don't need a border */
-    &.mx_EncryptionCard_noBorder {
-        border: 0px none;
-        box-shadow: none;
-        padding: 0px;
-    }
 }

 .mx_EncryptionCard_buttons {
--- a/res/media/message.mp3
+++ b/res/media/message.mp3
--- a/res/media/message.ogg
+++ b/res/media/message.ogg
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -68,7 +68,8 @@ type ElectronChannel =
    | "openDesktopCapturerSourcePicker"
    | "userAccessToken"
    | "homeserverUrl"
-    | "serverSupportedVersions";
+    | "serverSupportedVersions"
+    | "showToast";

 declare global {
    // use `number` as the return type in all cases for globalThis.set{Interval,Timeout},
--- a/src/Avatar.ts
+++ b/src/Avatar.ts
@@ -13,18 +13,14 @@ import DMRoomMap from "./utils/DMRoomMap";
 import { mediaFromMxc } from "./customisations/Media";
 import { isLocalRoom } from "./utils/localRoom/isLocalRoom";
 import { getFirstGrapheme } from "./utils/strings";
-import ThemeWatcher from "./settings/watchers/ThemeWatcher";

 /**
 * Hardcoded from the Compound colors.
 * Shade for background as defined in the compound web implementation
 * https://github.com/vector-im/compound-web/blob/main/src/components/Avatar
 */
-const AVATAR_BG_LIGHT_COLORS = ["#e0f8d9", "#e3f5f8", "#faeefb", "#f1efff", "#ffecf0", "#ffefe4"];
-const AVATAR_TEXT_LIGHT_COLORS = ["#005f00", "#00548c", "#822198", "#5d26cd", "#9f0850", "#9b2200"];
-
-const AVATAR_BG_DARK_COLORS = ["#002600", "#001b4e", "#37004e", "#22006a", "#450018", "#470000"];
-const AVATAR_TEXT_DARK_COLORS = ["#56c02c", "#21bacd", "#d991de", "#ad9cfe", "#fe84a2", "#f6913d"];
+const AVATAR_BG_COLORS = ["#e9f2ff", "#faeefb", "#e3f7ed", "#ffecf0", "#ffefe4", "#e3f5f8", "#f1efff", "#e0f8d9"];
+const AVATAR_TEXT_COLORS = ["#043894", "#671481", "#004933", "#7e0642", "#850000", "#004077", "#4c05b5", "#004b00"];

 // Not to be used for BaseAvatar urls as that has similar default avatar fallback already
 export function avatarUrlForMember(
@@ -46,13 +42,6 @@ export function avatarUrlForMember(
    return url;
 }

-/**
- * Determines if the current theme is dark
- */
-function isDarkTheme(): boolean {
-    return new ThemeWatcher().getEffectiveTheme() === "dark";
-}
-
 /**
 * Determines the HEX color to use in the avatar pills
 * @param id the user or room ID
@@ -62,8 +51,7 @@ export function getAvatarTextColor(id: string): string {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const index = useIdColorHash(id);

-    // Use light colors by default
-    return isDarkTheme() ? AVATAR_TEXT_DARK_COLORS[index - 1] : AVATAR_TEXT_LIGHT_COLORS[index - 1];
+    return AVATAR_TEXT_COLORS[index - 1];
 }

 export function avatarUrlForUser(
@@ -115,10 +103,7 @@ export function defaultAvatarUrlForString(s: string): string {
    // overwritten color value in custom themes
    const cssVariable = `--avatar-background-colors_${colorIndex}`;
    const cssValue = getComputedStyle(document.body).getPropertyValue(cssVariable);
-    // Light colors are the default
-    const color =
-        cssValue || isDarkTheme() ? AVATAR_BG_DARK_COLORS[colorIndex - 1] : AVATAR_BG_LIGHT_COLORS[colorIndex - 1];
-
+    const color = cssValue || AVATAR_BG_COLORS[colorIndex - 1];
    let dataUrl = colorToDataURLCache.get(color);
    if (!dataUrl) {
        // validate color as this can come from account_data
--- a/src/ContentMessages.ts
+++ b/src/ContentMessages.ts
@@ -63,12 +63,7 @@ import { blobIsAnimated } from "./utils/Image.ts";
 const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];

 export class UploadCanceledError extends Error {}
-export class UploadFailedError extends Error {
-    public constructor(cause: any) {
-        super();
-        this.cause = cause;
-    }
-}
+export class UploadFailedError extends Error {}

 interface IMediaConfig {
    "m.upload.size"?: number;
@@ -372,7 +367,7 @@ export async function uploadFile(
        } catch (e) {
            if (abortController.signal.aborted) throw new UploadCanceledError();
            console.error("Failed to upload file", e);
-            throw new UploadFailedError(e);
+            throw new UploadFailedError();
        }
        if (abortController.signal.aborted) throw new UploadCanceledError();

@@ -391,7 +386,7 @@ export async function uploadFile(
        } catch (e) {
            if (abortController.signal.aborted) throw new UploadCanceledError();
            console.error("Failed to upload file", e);
-            throw new UploadFailedError(e);
+            throw new UploadFailedError();
        }
        if (abortController.signal.aborted) throw new UploadCanceledError();
        // If the attachment isn't encrypted then include the URL directly.
@@ -643,18 +638,15 @@ export default class ContentMessages {
            dis.dispatch<UploadFinishedPayload>({ action: Action.UploadFinished, upload });
            dis.dispatch({ action: "message_sent" });
        } catch (error) {
-            // Unwrap UploadFailedError to get the underlying error
-            const unwrappedError = error instanceof UploadFailedError && error.cause ? error.cause : error;
-
            // 413: File was too big or upset the server in some way:
            // clear the media size limit so we fetch it again next time we try to upload
-            if (unwrappedError instanceof HTTPError && unwrappedError.httpStatus === 413) {
+            if (error instanceof HTTPError && error.httpStatus === 413) {
                this.mediaConfig = null;
            }

            if (!upload.cancelled) {
                let desc = _t("upload_failed_generic", { fileName: upload.fileName });
-                if (unwrappedError instanceof HTTPError && unwrappedError.httpStatus === 413) {
+                if (error instanceof HTTPError && error.httpStatus === 413) {
                    desc = _t("upload_failed_size", {
                        fileName: upload.fileName,
                    });
--- a/src/Notifier.ts
+++ b/src/Notifier.ts
@@ -486,27 +486,13 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
    private performCustomEventHandling(ev: MatrixEvent): void {
        const cli = MatrixClientPeg.safeGet();
        const room = cli.getRoom(ev.getRoomId());
-        const type = ev.getType();
        const thisUserHasConnectedDevice =
            room && MatrixRTCSession.callMembershipsForRoom(room).some((m) => m.sender === cli.getUserId());

-        if (EventType.GroupCallMemberPrefix === type && thisUserHasConnectedDevice) {
-            const content = ev.getContent();
-
-            if (typeof content.call_id !== "string") {
-                logger.warn(
-                    "Received malformatted GroupCallMemberPrefix event. Did not contain 'call_id' of type 'string'",
-                );
-                return;
-            }
-            // One of our devices has joined the call, so dismiss it.
-            ToastStore.sharedInstance().dismissToast(getIncomingCallToastKey(content.call_id, room.roomId));
-        }
        // Check maximum age (<= 15 seconds) of a call notify event that will trigger a ringing notification
-        else if (EventType.CallNotify === type && (ev.getAge() ?? 0) < 15000 && !thisUserHasConnectedDevice) {
+        if (EventType.CallNotify === ev.getType() && (ev.getAge() ?? 0) < 15000 && !thisUserHasConnectedDevice) {
            const content = ev.getContent();
            const roomId = ev.getRoomId();
-
            if (typeof content.call_id !== "string") {
                logger.warn("Received malformatted CallNotify event. Did not contain 'call_id' of type 'string'");
                return;
--- a/src/SecurityManager.ts
+++ b/src/SecurityManager.ts
@@ -14,6 +14,7 @@ import { logger as rootLogger } from "matrix-js-sdk/src/logger";
 import Modal from "./Modal";
 import { MatrixClientPeg } from "./MatrixClientPeg";
 import { _t } from "./languageHandler";
+import { isSecureBackupRequired } from "./utils/WellKnownUtils";
 import AccessSecretStorageDialog, {
    type KeyParams,
 } from "./components/views/dialogs/security/AccessSecretStorageDialog";
@@ -231,6 +232,15 @@ async function doAccessSecretStorage(func: () => Promise<void>, opts: AccessSecr
                undefined,
                /* priority = */ false,
                /* static = */ true,
+                /* options = */ {
+                    onBeforeClose: async (reason): Promise<boolean> => {
+                        // If Secure Backup is required, you cannot leave the modal.
+                        if (reason === "backgroundClick") {
+                            return !isSecureBackupRequired(cli);
+                        }
+                        return true;
+                    },
+                },
            );
            const [confirmed] = await finished;
            if (!confirmed) {
--- a/src/accessibility/LandmarkNavigation.ts
+++ b/src/accessibility/LandmarkNavigation.ts
@@ -9,7 +9,6 @@
 import { TimelineRenderingType } from "../contexts/RoomContext";
 import { Action } from "../dispatcher/actions";
 import defaultDispatcher from "../dispatcher/dispatcher";
-import SettingsStore from "../settings/SettingsStore";

 export const enum Landmark {
    // This is the space/home button in the left panel.
@@ -73,16 +72,10 @@ export class LandmarkNavigation {
 const landmarkToDomElementMap: Record<Landmark, () => HTMLElement | null | undefined> = {
    [Landmark.ACTIVE_SPACE_BUTTON]: () => document.querySelector<HTMLElement>(".mx_SpaceButton_active"),

-    [Landmark.ROOM_SEARCH]: () =>
-        SettingsStore.getValue("feature_new_room_list")
-            ? document.querySelector<HTMLElement>(".mx_RoomListSearch_search")
-            : document.querySelector<HTMLElement>(".mx_RoomSearch"),
+    [Landmark.ROOM_SEARCH]: () => document.querySelector<HTMLElement>(".mx_RoomSearch"),
    [Landmark.ROOM_LIST]: () =>
-        SettingsStore.getValue("feature_new_room_list")
-            ? document.querySelector<HTMLElement>(".mx_RoomListItemView_selected") ||
-              document.querySelector<HTMLElement>(".mx_RoomListItemView")
-            : document.querySelector<HTMLElement>(".mx_RoomTile_selected") ||
-              document.querySelector<HTMLElement>(".mx_RoomTile"),
+        document.querySelector<HTMLElement>(".mx_RoomTile_selected") ||
+        document.querySelector<HTMLElement>(".mx_RoomTile"),

    [Landmark.MESSAGE_COMPOSER_OR_HOME]: () => {
        const isComposerOpen = !!document.querySelector(".mx_MessageComposer");
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
@@ -25,6 +25,11 @@ import StyledRadioButton from "../../../../components/views/elements/StyledRadio
 import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
 import DialogButtons from "../../../../components/views/elements/DialogButtons";
 import InlineSpinner from "../../../../components/views/elements/InlineSpinner";
+import {
+    getSecureBackupSetupMethods,
+    isSecureBackupRequired,
+    SecureBackupSetupMethod,
+} from "../../../../utils/WellKnownUtils";
 import { ModuleRunner } from "../../../../modules/ModuleRunner";
 import type Field from "../../../../components/views/elements/Field";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
@@ -34,11 +39,6 @@ import { type IValidationResult } from "../../../../components/views/elements/Va
 import PassphraseConfirmField from "../../../../components/views/auth/PassphraseConfirmField";
 import { initialiseDehydrationIfEnabled } from "../../../../utils/device/dehydration";

-enum SecureBackupSetupMethod {
-    Key = "key",
-    Passphrase = "passphrase",
-}
-
 // I made a mistake while converting this and it has to be fixed!
 enum Phase {
    Loading = "loading",
@@ -68,6 +68,7 @@ interface IState {
    downloaded: boolean;
    setPassphrase: boolean;

+    canSkip: boolean;
    passPhraseKeySelected: string;
    error?: boolean;
 }
@@ -92,6 +93,16 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
    public constructor(props: IProps) {
        super(props);

+        const cli = MatrixClientPeg.safeGet();
+
+        let passPhraseKeySelected: SecureBackupSetupMethod;
+        const setupMethods = getSecureBackupSetupMethods(cli);
+        if (setupMethods.includes(SecureBackupSetupMethod.Key)) {
+            passPhraseKeySelected = SecureBackupSetupMethod.Key;
+        } else {
+            passPhraseKeySelected = SecureBackupSetupMethod.Passphrase;
+        }
+
        const keyFromCustomisations = ModuleRunner.instance.extensions.cryptoSetup.createSecretStorageKey();
        const phase = keyFromCustomisations ? Phase.Loading : Phase.ChooseKeyPassphrase;

@@ -103,7 +114,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
            copied: false,
            downloaded: false,
            setPassphrase: false,
-            passPhraseKeySelected: SecureBackupSetupMethod.Key,
+            canSkip: !isSecureBackupRequired(cli),
+            passPhraseKeySelected,
        };
    }

@@ -379,8 +391,11 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
    }

    private renderPhaseChooseKeyPassphrase(): JSX.Element {
-        const optionKey = this.renderOptionKey();
-        const optionPassphrase = this.renderOptionPassphrase();
+        const setupMethods = getSecureBackupSetupMethods(MatrixClientPeg.safeGet());
+        const optionKey = setupMethods.includes(SecureBackupSetupMethod.Key) ? this.renderOptionKey() : null;
+        const optionPassphrase = setupMethods.includes(SecureBackupSetupMethod.Passphrase)
+            ? this.renderOptionPassphrase()
+            : null;

        return (
            <form onSubmit={this.onChooseKeyPassphraseFormSubmit}>
@@ -395,6 +410,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                    primaryButton={_t("action|continue")}
                    onPrimaryButtonClick={this.onChooseKeyPassphraseFormSubmit}
                    onCancel={this.onCancelClick}
+                    hasCancel={this.state.canSkip}
                />
            </form>
        );
@@ -585,6 +601,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                    <DialogButtons
                        primaryButton={_t("action|retry")}
                        onPrimaryButtonClick={this.onLoadRetryClick}
+                        hasCancel={this.state.canSkip}
                        onCancel={this.onCancel}
                    />
                </div>
@@ -655,6 +672,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                        <DialogButtons
                            primaryButton={_t("action|retry")}
                            onPrimaryButtonClick={this.bootstrapSecretStorage}
+                            hasCancel={this.state.canSkip}
                            onCancel={this.onCancel}
                        />
                    </div>
--- a/src/audio/Playback.ts
+++ b/src/audio/Playback.ts
@@ -20,7 +20,6 @@ import { DEFAULT_WAVEFORM, PLAYBACK_WAVEFORM_SAMPLES } from "./consts";
 import { PlaybackEncoder } from "../PlaybackEncoder";

 export enum PlaybackState {
-    Preparing = "preparing", // preparing to decode
    Decoding = "decoding",
    Stopped = "stopped", // no progress on timeline
    Paused = "paused", // some progress on timeline
@@ -147,8 +146,6 @@ export class Playback extends EventEmitter implements IDestroyable, PlaybackInte
            return;
        }

-        this.state = PlaybackState.Preparing;
-
        // The point where we use an audio element is fairly arbitrary, though we don't want
        // it to be too low. As of writing, voice messages want to show a waveform but audio
        // messages do not. Using an audio element means we can't show a waveform preview, so
--- a/src/components/structures/EmbeddedPage.tsx
+++ b/src/components/structures/EmbeddedPage.tsx
@@ -72,11 +72,7 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
            return;
        }

-        // Replace '," and HTML encoded variants
-        let body = (await res.text()).replace(
-            /_t\((?:['"]|(?:&#(?:34|27);))([\s\S]*?)(?:['"]|(?:&#(?:34|27);))\)/gm,
-            (match, g1) => this.translate(g1),
-        );
+        let body = (await res.text()).replace(/_t\(['"]([\s\S]*?)['"]\)/gm, (match, g1) => this.translate(g1));

        if (this.props.replaceMap) {
            Object.keys(this.props.replaceMap).forEach((key) => {
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -133,7 +133,6 @@ import { PinnedMessageBanner } from "../views/rooms/PinnedMessageBanner";
 import { ScopedRoomContextProvider, useScopedRoomContext } from "../../contexts/ScopedRoomContext";
 import { DeclineAndBlockInviteDialog } from "../views/dialogs/DeclineAndBlockInviteDialog";
 import { type FocusMessageSearchPayload } from "../../dispatcher/payloads/FocusMessageSearchPayload.ts";
-import { isRoomEncrypted } from "../../hooks/useIsEncrypted";

 const DEBUG = false;
 const PREVENT_MULTIPLE_JITSI_WITHIN = 30_000;
@@ -258,7 +257,6 @@ interface LocalRoomViewProps {
    roomView: RefObject<HTMLElement | null>;
    onFileDrop: (dataTransfer: DataTransfer) => Promise<void>;
    mainSplitContentType: MainSplitContentType;
-    e2eStatus?: E2EStatus;
 }

 /**
@@ -306,7 +304,6 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
    } else {
        composer = (
            <MessageComposer
-                e2eStatus={props.e2eStatus}
                room={props.localRoom}
                resizeNotifier={props.resizeNotifier}
                permalinkCreator={props.permalinkCreator}
@@ -1400,13 +1397,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
    }

    private async getIsRoomEncrypted(roomId = this.state.roomId): Promise<boolean> {
-        if (!roomId) return false;
-
-        const room = this.context.client?.getRoom(roomId);
        const crypto = this.context.client?.getCrypto();
-        if (!room || !crypto) return false;
+        if (!crypto || !roomId) return false;

-        return isRoomEncrypted(room, crypto);
+        return await crypto.isEncryptionEnabledInRoom(roomId);
    }

    private async calculateRecommendedVersion(room: Room): Promise<void> {
@@ -2067,7 +2061,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        return (
            <ScopedRoomContextProvider {...this.state}>
                <LocalRoomView
-                    e2eStatus={this.state.e2eStatus}
                    localRoom={localRoom}
                    resizeNotifier={this.props.resizeNotifier}
                    permalinkCreator={this.permalinkCreator}
--- a/src/components/structures/auth/CompleteSecurity.tsx
+++ b/src/components/structures/auth/CompleteSecurity.tsx
@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { Glass } from "@vector-im/compound-web";

 import { _t } from "../../../languageHandler";
 import { SetupEncryptionStore, Phase } from "../../../stores/SetupEncryptionStore";
@@ -23,17 +22,15 @@ interface IProps {

 interface IState {
    phase?: Phase;
+    lostKeys: boolean;
 }

-/**
- * Prompts the user to verify their device when they first log in.
- */
 export default class CompleteSecurity extends React.Component<IProps, IState> {
    public constructor(props: IProps) {
        super(props);
        const store = SetupEncryptionStore.sharedInstance();
        store.start();
-        this.state = { phase: store.phase };
+        this.state = { phase: store.phase, lostKeys: store.lostKeys() };
    }

    public componentDidMount(): void {
@@ -43,7 +40,7 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {

    private onStoreUpdate = (): void => {
        const store = SetupEncryptionStore.sharedInstance();
-        this.setState({ phase: store.phase });
+        this.setState({ phase: store.phase, lostKeys: store.lostKeys() });
    };

    private onSkipClick = (): void => {
@@ -58,14 +55,20 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
    }

    public render(): React.ReactNode {
-        const { phase } = this.state;
+        const { phase, lostKeys } = this.state;
        let icon;
        let title;

        if (phase === Phase.Loading) {
            return null;
        } else if (phase === Phase.Intro) {
-            // We don't specify an icon nor title since `SetupEncryptionBody` provides its own
+            if (lostKeys) {
+                icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+                title = _t("encryption|verification|after_new_login|unable_to_verify");
+            } else {
+                icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+                title = _t("encryption|verification|after_new_login|verify_this_device");
+            }
        } else if (phase === Phase.Done) {
            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified" />;
            title = _t("encryption|verification|after_new_login|device_verified");
@@ -95,19 +98,17 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
        }

        return (
-            <AuthPage addBlur={false}>
-                <Glass className="mx_Dialog_border">
-                    <CompleteSecurityBody>
-                        <h1 className="mx_CompleteSecurity_header">
-                            {icon}
-                            {title}
-                            {skipButton}
-                        </h1>
-                        <div className="mx_CompleteSecurity_body">
-                            <SetupEncryptionBody onFinished={this.props.onFinished} allowLogout={true} />
-                        </div>
-                    </CompleteSecurityBody>
-                </Glass>
+            <AuthPage>
+                <CompleteSecurityBody>
+                    <h1 className="mx_CompleteSecurity_header">
+                        {icon}
+                        {title}
+                        {skipButton}
+                    </h1>
+                    <div className="mx_CompleteSecurity_body">
+                        <SetupEncryptionBody onFinished={this.props.onFinished} />
+                    </div>
+                </CompleteSecurityBody>
            </AuthPage>
        );
    }
--- a/src/components/structures/auth/SetupEncryptionBody.tsx
+++ b/src/components/structures/auth/SetupEncryptionBody.tsx
@@ -9,9 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { type KeyBackupInfo, type VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 import { logger } from "matrix-js-sdk/src/logger";
-import DevicesIcon from "@vector-im/compound-design-tokens/assets/web/icons/devices";
-import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid";
-import { Button } from "@vector-im/compound-web";
+import { type SecretStorageKeyDescription } from "matrix-js-sdk/src/secret-storage";

 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -19,38 +17,25 @@ import Modal from "../../../Modal";
 import VerificationRequestDialog from "../../views/dialogs/VerificationRequestDialog";
 import { SetupEncryptionStore, Phase } from "../../../stores/SetupEncryptionStore";
 import EncryptionPanel from "../../views/right_panel/EncryptionPanel";
-import AccessibleButton from "../../views/elements/AccessibleButton";
+import AccessibleButton, { type ButtonEvent } from "../../views/elements/AccessibleButton";
 import Spinner from "../../views/elements/Spinner";
 import { ResetIdentityDialog } from "../../views/dialogs/ResetIdentityDialog";
-import { EncryptionCard } from "../../views/settings/encryption/EncryptionCard";
-import { EncryptionCardButtons } from "../../views/settings/encryption/EncryptionCardButtons";
-import { EncryptionCardEmphasisedContent } from "../../views/settings/encryption/EncryptionCardEmphasisedContent";
-import ExternalLink from "../../views/elements/ExternalLink";
-import dispatcher from "../../../dispatcher/dispatcher";
+
+function keyHasPassphrase(keyInfo: SecretStorageKeyDescription): boolean {
+    return Boolean(keyInfo.passphrase && keyInfo.passphrase.salt && keyInfo.passphrase.iterations);
+}

 interface IProps {
    onFinished: () => void;
-    /**
-     * Offer the user an option to log out, instead of setting up encryption.
-     *
-     * This is used when this component is shown when the user is initially
-     * prompted to set up encryption, before the user is shown the main chat
-     * interface.
-     *
-     * Defaults to `false` if omitted.
-     */
-    allowLogout?: boolean;
 }

 interface IState {
    phase?: Phase;
    verificationRequest: VerificationRequest | null;
    backupInfo: KeyBackupInfo | null;
+    lostKeys: boolean;
 }

-/**
- * Component to set up encryption by verifying the current device.
- */
 export default class SetupEncryptionBody extends React.Component<IProps, IState> {
    public constructor(props: IProps) {
        super(props);
@@ -63,6 +48,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
            // Because of the latter, it lives in the state.
            verificationRequest: store.verificationRequest,
            backupInfo: store.backupInfo,
+            lostKeys: store.lostKeys(),
        };
    }

@@ -81,6 +67,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
            phase: store.phase,
            verificationRequest: store.verificationRequest,
            backupInfo: store.backupInfo,
+            lostKeys: store.lostKeys(),
        });
    };

@@ -125,8 +112,8 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
        store.returnAfterSkip();
    };

-    private onCantConfirmClick = (): void => {
-        const store = SetupEncryptionStore.sharedInstance();
+    private onResetClick = (ev: ButtonEvent): void => {
+        ev.preventDefault();
        Modal.createDialog(ResetIdentityDialog, {
            onReset: () => {
                // The user completed the reset process - close this dialog
@@ -134,14 +121,10 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                const store = SetupEncryptionStore.sharedInstance();
                store.done();
            },
-            variant: store.lostKeys() ? "no_verification_method" : "confirm",
+            variant: "confirm",
        });
    };

-    private onSignOutClick = (): void => {
-        dispatcher.dispatch({ action: "logout" });
-    };
-
    private onDoneClick = (): void => {
        const store = SetupEncryptionStore.sharedInstance();
        store.done();
@@ -153,7 +136,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>

    public render(): React.ReactNode {
        const cli = MatrixClientPeg.safeGet();
-        const { phase } = this.state;
+        const { phase, lostKeys } = this.state;

        if (this.state.verificationRequest && cli.getUser(this.state.verificationRequest.otherUserId)) {
            return (
@@ -166,59 +149,69 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                />
            );
        } else if (phase === Phase.Intro) {
-            const store = SetupEncryptionStore.sharedInstance();
+            if (lostKeys) {
+                return (
+                    <div>
+                        <p>{_t("encryption|verification|no_key_or_device")}</p>

-            let verifyButton;
-            if (store.hasDevicesToVerifyAgainst) {
-                verifyButton = (
-                    <Button kind="primary" onClick={this.onVerifyClick}>
-                        <DevicesIcon /> {_t("encryption|verification|use_another_device")}
-                    </Button>
+                        <div className="mx_CompleteSecurity_actionRow">
+                            <AccessibleButton kind="primary" onClick={this.onResetClick}>
+                                {_t("encryption|verification|reset_proceed_prompt")}
+                            </AccessibleButton>
+                        </div>
+                    </div>
+                );
+            } else {
+                const store = SetupEncryptionStore.sharedInstance();
+                let recoveryKeyPrompt;
+                if (store.keyInfo && keyHasPassphrase(store.keyInfo)) {
+                    recoveryKeyPrompt = _t("encryption|verification|verify_using_key_or_phrase");
+                } else if (store.keyInfo) {
+                    recoveryKeyPrompt = _t("encryption|verification|verify_using_key");
+                }
+
+                let useRecoveryKeyButton;
+                if (recoveryKeyPrompt) {
+                    useRecoveryKeyButton = (
+                        <AccessibleButton kind="primary" onClick={this.onUsePassphraseClick}>
+                            {recoveryKeyPrompt}
+                        </AccessibleButton>
+                    );
+                }
+
+                let verifyButton;
+                if (store.hasDevicesToVerifyAgainst) {
+                    verifyButton = (
+                        <AccessibleButton kind="primary" onClick={this.onVerifyClick}>
+                            {_t("encryption|verification|verify_using_device")}
+                        </AccessibleButton>
+                    );
+                }
+
+                return (
+                    <div>
+                        <p>{_t("encryption|verification|verification_description")}</p>
+
+                        <div className="mx_CompleteSecurity_actionRow">
+                            {verifyButton}
+                            {useRecoveryKeyButton}
+                        </div>
+                        <div className="mx_SetupEncryptionBody_reset">
+                            {_t("encryption|reset_all_button", undefined, {
+                                a: (sub) => (
+                                    <AccessibleButton
+                                        kind="link_inline"
+                                        className="mx_SetupEncryptionBody_reset_link"
+                                        onClick={this.onResetClick}
+                                    >
+                                        {sub}
+                                    </AccessibleButton>
+                                ),
+                            })}
+                        </div>
+                    </div>
                );
            }
-
-            let useRecoveryKeyButton;
-            if (store.keyInfo) {
-                useRecoveryKeyButton = (
-                    <Button kind="primary" onClick={this.onUsePassphraseClick}>
-                        {_t("encryption|verification|use_recovery_key")}
-                    </Button>
-                );
-            }
-
-            let signOutButton;
-            if (this.props.allowLogout) {
-                signOutButton = (
-                    <Button kind="tertiary" onClick={this.onSignOutClick}>
-                        {_t("action|sign_out")}
-                    </Button>
-                );
-            }
-
-            return (
-                <EncryptionCard
-                    title={_t("encryption|verification|confirm_identity_title")}
-                    Icon={LockIcon}
-                    className="mx_EncryptionCard_noBorder mx_SetupEncryptionBody"
-                >
-                    <EncryptionCardEmphasisedContent>
-                        <span>{_t("encryption|verification|confirm_identity_description")}</span>
-                        <span>
-                            <ExternalLink href="https://element.io/help#encryption-device-verification">
-                                {_t("action|learn_more")}
-                            </ExternalLink>
-                        </span>
-                    </EncryptionCardEmphasisedContent>
-                    <EncryptionCardButtons>
-                        {verifyButton}
-                        {useRecoveryKeyButton}
-                        <Button kind="secondary" onClick={this.onCantConfirmClick}>
-                            {_t("encryption|verification|cant_confirm")}
-                        </Button>
-                        {signOutButton}
-                    </EncryptionCardButtons>
-                </EncryptionCard>
-            );
        } else if (phase === Phase.Done) {
            let message: JSX.Element;
            if (this.state.backupInfo) {
--- a/src/components/utils/ListView.tsx
+++ b/src/components/utils/ListView.tsx
@@ -285,10 +285,7 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex

    return (
        <Virtuoso
-            // note that either the container of direct children must be focusable to be axe
-            // compliant, so we leave tabIndex as the default so the container can be focused
-            // (virtuoso wraps the children inside another couple of elements so setting it
-            // on those doesn't seem to work, unfortunately)
+            tabIndex={props.tabIndex || undefined} // We don't need to focus the container, so leave it undefined by default
            ref={virtuosoHandleRef}
            scrollerRef={scrollerRef}
            onKeyDown={keyDownCallback}
--- a/src/components/viewmodels/settings/encryption/KeyStoragePanelViewModel.ts
+++ b/src/components/viewmodels/settings/encryption/KeyStoragePanelViewModel.ts
@@ -79,30 +79,12 @@ export function useKeyStoragePanelViewModel(): KeyStoragePanelState {
                    return;
                }
                if (enable) {
-                    const childLogger = logger.getChild("[enable key storage]");
-                    childLogger.info("User requested enabling key storage");
-                    let currentKeyBackup = await crypto.checkKeyBackupAndEnable();
-                    if (currentKeyBackup) {
-                        logger.info(
-                            `Existing key backup is present. version: ${currentKeyBackup.backupInfo.version}`,
-                            currentKeyBackup.trustInfo,
-                        );
-                        // Check if the current key backup can be used. Either of these properties causes the key backup to be used.
-                        if (currentKeyBackup.trustInfo.trusted || currentKeyBackup.trustInfo.matchesDecryptionKey) {
-                            logger.info("Existing key backup can be used");
-                        } else {
-                            logger.warn("Existing key backup cannot be used, creating new backup");
-                            // There aren't any *usable* backups, so we need to create a new one.
-                            currentKeyBackup = null;
-                        }
-                    } else {
-                        logger.info("No existing key backup versions are present, creating new backup");
-                    }
-
-                    // If there is no usable key backup on the server, create one.
-                    // `resetKeyBackup` will delete any existing backup, so we only do this if there is no usable backup.
+                    // If there is no existing key backup on the server, create one.
+                    // `resetKeyBackup` will delete any existing backup, so we only do this if there is no existing backup.
+                    const currentKeyBackup = await crypto.checkKeyBackupAndEnable();
                    if (currentKeyBackup === null) {
                        await crypto.resetKeyBackup();
+
                        // resetKeyBackup fires this off in the background without waiting, so we need to do it
                        // explicitly and wait for it, otherwise it won't be enabled yet when we check again.
                        await crypto.checkKeyBackupAndEnable();
@@ -111,7 +93,6 @@ export function useKeyStoragePanelViewModel(): KeyStoragePanelState {
                    // Set the flag so that EX no longer thinks the user wants backup disabled
                    await matrixClient.setAccountData(BACKUP_DISABLED_ACCOUNT_DATA_KEY, { disabled: false });
                } else {
-                    logger.info("User requested disabling key backup");
                    // This method will delete the key backup as well as server side recovery keys and other
                    // server-side crypto data.
                    await crypto.disableKeyStorage();
--- a/src/components/views/audio_messages/RecordingPlayback.tsx
+++ b/src/components/views/audio_messages/RecordingPlayback.tsx
@@ -74,11 +74,7 @@ export default class RecordingPlayback extends AudioPlayerBase<IProps> {
        }

        return (
-            <div
-                className="mx_MediaBody mx_VoiceMessagePrimaryContainer"
-                onKeyDown={this.onKeyDown}
-                data-testid="recording-playback"
-            >
+            <div className="mx_MediaBody mx_VoiceMessagePrimaryContainer" onKeyDown={this.onKeyDown}>
                <PlayPauseButton
                    playback={this.props.playback}
                    playbackPhase={this.state.playbackPhase}
--- a/src/components/views/auth/AuthPage.tsx
+++ b/src/components/views/auth/AuthPage.tsx
@@ -8,22 +8,11 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import classNames from "classnames";

 import SdkConfig from "../../../SdkConfig";
 import AuthFooter from "./AuthFooter";

-interface IProps {
-    /**
-     * Whether to add a blurred shadow around the modal.
-     *
-     * If the modal component provides its own shadow or blurring, this can be
-     * disabled.  Defaults to `true`.
-     */
-    addBlur?: boolean;
-}
-
-export default class AuthPage extends React.PureComponent<React.PropsWithChildren<IProps>> {
+export default class AuthPage extends React.PureComponent<React.PropsWithChildren> {
    private static welcomeBackgroundUrl?: string;

    // cache the url as a static to prevent it changing without refreshing
@@ -69,26 +58,14 @@ export default class AuthPage extends React.PureComponent<React.PropsWithChildre
        const modalContentStyle: React.CSSProperties = {
            display: "flex",
            zIndex: 1,
+            background: "rgba(255, 255, 255, 0.59)",
            borderRadius: "8px",
        };

-        let modalBlur;
-        if (this.props.addBlur !== false) {
-            // Blur out the background: add a `div` which covers the content behind the modal,
-            // and blurs it out, and make the modal's background semitransparent.
-            modalBlur = <div className="mx_AuthPage_modalBlur" style={blurStyle} />;
-            modalContentStyle.background = "rgba(255, 255, 255, 0.59)";
-        }
-
-        const modalClasses = classNames({
-            mx_AuthPage_modal: true,
-            mx_AuthPage_modal_withBlur: this.props.addBlur !== false,
-        });
-
        return (
            <div className="mx_AuthPage" style={pageStyle}>
-                <div className={modalClasses} style={modalStyle}>
-                    {modalBlur}
+                <div className="mx_AuthPage_modal" style={modalStyle}>
+                    <div className="mx_AuthPage_modalBlur" style={blurStyle} />
                    <div className="mx_AuthPage_modalContent" style={modalContentStyle}>
                        {this.props.children}
                    </div>
--- a/src/components/views/avatars/WidgetAvatar.tsx
+++ b/src/components/views/avatars/WidgetAvatar.tsx
@@ -37,8 +37,6 @@ const WidgetAvatar: React.FC<IProps> = ({ app, className, size = "20px", ...prop
    return (
        <BaseAvatar
            {...props}
-            // Span elements cannot have a label
-            role="img"
            name={app.id}
            className={classNames("mx_WidgetAvatar", className)}
            // MSC2765
--- a/src/components/views/dialogs/CreateRoomDialog.tsx
+++ b/src/components/views/dialogs/CreateRoomDialog.tsx
@@ -26,7 +26,6 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { privateShouldBeEncrypted } from "../../../utils/rooms";
 import SettingsStore from "../../../settings/SettingsStore";
 import LabelledCheckbox from "../elements/LabelledCheckbox";
-import { UIFeature } from "../../../settings/UIFeature";

 interface IProps {
    type?: RoomType;
@@ -84,8 +83,6 @@ interface IState {

 export default class CreateRoomDialog extends React.Component<IProps, IState> {
    private readonly askToJoinEnabled: boolean;
-    private readonly advancedSettingsEnabled: boolean;
-    private readonly allowCreatingPublicRooms: boolean;
    private readonly supportsRestricted: boolean;
    private nameField = createRef<Field>();
    private aliasField = createRef<RoomAliasField>();
@@ -94,14 +91,10 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
        super(props);

        this.askToJoinEnabled = SettingsStore.getValue("feature_ask_to_join");
-        this.advancedSettingsEnabled = SettingsStore.getValue(UIFeature.AdvancedSettings);
-        this.allowCreatingPublicRooms = SettingsStore.getValue(UIFeature.AllowCreatingPublicRooms);
-
        this.supportsRestricted = !!this.props.parentSpace;
-        const defaultPublic = this.allowCreatingPublicRooms && this.props.defaultPublic;

        let joinRule = JoinRule.Invite;
-        if (defaultPublic) {
+        if (this.props.defaultPublic) {
            joinRule = JoinRule.Public;
        } else if (this.supportsRestricted) {
            joinRule = JoinRule.Restricted;
@@ -109,7 +102,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {

        const cli = MatrixClientPeg.safeGet();
        this.state = {
-            isPublicKnockRoom: defaultPublic || false,
+            isPublicKnockRoom: this.props.defaultPublic || false,
            isEncrypted: this.props.defaultEncrypted ?? privateShouldBeEncrypted(cli),
            joinRule,
            name: this.props.defaultName || "",
@@ -422,7 +415,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                            labelKnock={
                                this.askToJoinEnabled ? _t("room_settings|security|join_rule_knock") : undefined
                            }
-                            labelPublic={this.allowCreatingPublicRooms ? _t("common|public_room") : undefined}
+                            labelPublic={_t("common|public_room")}
                            labelRestricted={
                                this.supportsRestricted ? _t("create_room|join_rule_restricted") : undefined
                            }
@@ -434,21 +427,19 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                        {visibilitySection}
                        {e2eeSection}
                        {aliasField}
-                        {this.advancedSettingsEnabled && (
-                            <details onToggle={this.onDetailsToggled} className="mx_CreateRoomDialog_details">
-                                <summary className="mx_CreateRoomDialog_details_summary">
-                                    {this.state.detailsOpen ? _t("action|hide_advanced") : _t("action|show_advanced")}
-                                </summary>
-                                <LabelledToggleSwitch
-                                    label={_t("create_room|unfederated", {
-                                        serverName: MatrixClientPeg.safeGet().getDomain(),
-                                    })}
-                                    onChange={this.onNoFederateChange}
-                                    value={this.state.noFederate}
-                                />
-                                <p>{federateLabel}</p>
-                            </details>
-                        )}
+                        <details onToggle={this.onDetailsToggled} className="mx_CreateRoomDialog_details">
+                            <summary className="mx_CreateRoomDialog_details_summary">
+                                {this.state.detailsOpen ? _t("action|hide_advanced") : _t("action|show_advanced")}
+                            </summary>
+                            <LabelledToggleSwitch
+                                label={_t("create_room|unfederated", {
+                                    serverName: MatrixClientPeg.safeGet().getDomain(),
+                                })}
+                                onChange={this.onNoFederateChange}
+                                value={this.state.noFederate}
+                            />
+                            <p>{federateLabel}</p>
+                        </details>
                    </div>
                </form>
                <DialogButtons
--- a/src/components/views/dialogs/DevtoolsDialog.tsx
+++ b/src/components/views/dialogs/DevtoolsDialog.tsx
@@ -84,9 +84,7 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
            <BaseTool onBack={onBack}>
                {Object.entries(Tools).map(([category, tools]) => (
                    <div key={category}>
-                        <h2 className="mx_DevTools_toolHeading">
-                            {_t(categoryLabels[category as unknown as Category])}
-                        </h2>
+                        <h3>{_t(categoryLabels[category as unknown as Category])}</h3>
                        {tools.map(([label, tool]) => {
                            const onClick = (): void => {
                                setTool([label, tool]);
@@ -100,7 +98,7 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                    </div>
                ))}
                <div>
-                    <h2 className="mx_DevTools_toolHeading">{_t("common|options")}</h2>
+                    <h3>{_t("common|options")}</h3>
                    <SettingsFlag name="developerMode" level={SettingLevel.ACCOUNT} />
                    <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
                    <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
--- a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
+++ b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
@@ -10,19 +10,55 @@ import React from "react";

 import SetupEncryptionBody from "../../../structures/auth/SetupEncryptionBody";
 import BaseDialog from "../BaseDialog";
+import { _t } from "../../../../languageHandler";
+import { SetupEncryptionStore, Phase } from "../../../../stores/SetupEncryptionStore";
+
+function iconFromPhase(phase?: Phase): string {
+    if (phase === Phase.Done) {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        return require("../../../../../res/img/e2e/verified-deprecated.svg").default;
+    } else {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        return require("../../../../../res/img/e2e/warning-deprecated.svg").default;
+    }
+}

 interface IProps {
    onFinished(): void;
 }
+interface IState {
+    icon: string;
+}
+
+export default class SetupEncryptionDialog extends React.Component<IProps, IState> {
+    private store: SetupEncryptionStore;

-export default class SetupEncryptionDialog extends React.Component<IProps> {
    public constructor(props: IProps) {
        super(props);
+
+        this.store = SetupEncryptionStore.sharedInstance();
+        this.state = { icon: iconFromPhase(this.store.phase) };
    }

+    public componentDidMount(): void {
+        this.store.on("update", this.onStoreUpdate);
+    }
+
+    public componentWillUnmount(): void {
+        this.store.removeListener("update", this.onStoreUpdate);
+    }
+
+    private onStoreUpdate = (): void => {
+        this.setState({ icon: iconFromPhase(this.store.phase) });
+    };
+
    public render(): React.ReactNode {
        return (
-            <BaseDialog onFinished={this.props.onFinished} fixedWidth={false}>
+            <BaseDialog
+                headerImage={this.state.icon}
+                onFinished={this.props.onFinished}
+                title={_t("encryption|verify_toast_title")}
+            >
                <SetupEncryptionBody onFinished={this.props.onFinished} />
            </BaseDialog>
        );
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@@ -572,7 +572,7 @@ export default class AppTile extends React.Component<IProps, IState> {
        return (
            <span>
                <WidgetAvatar app={this.props.app} size="20px" />
-                <h1>{name}</h1>
+                <h3>{name}</h3>
                <span>
                    {title ? titleSpacer : ""}
                    {title}
--- a/src/components/views/elements/JoinRuleDropdown.tsx
+++ b/src/components/views/elements/JoinRuleDropdown.tsx
@@ -19,7 +19,7 @@ interface IProps {
    width?: number;
    labelInvite: string;
    labelKnock?: string;
-    labelPublic?: string;
+    labelPublic: string;
    labelRestricted?: string; // if omitted then this option will be hidden, e.g if unsupported
    onChange(value: JoinRule): void;
 }
@@ -38,18 +38,11 @@ const JoinRuleDropdown: React.FC<IProps> = ({
        <div key={JoinRule.Invite} className="mx_JoinRuleDropdown_invite">
            {labelInvite}
        </div>,
+        <div key={JoinRule.Public} className="mx_JoinRuleDropdown_public">
+            {labelPublic}
+        </div>,
    ] as NonEmptyArray<ReactElement & { key: string }>;

-    if (labelPublic) {
-        options.push(
-            (
-                <div key={JoinRule.Public} className="mx_JoinRuleDropdown_public">
-                    {labelPublic}
-                </div>
-            ) as ReactElement & { key: string },
-        );
-    }
-
    if (labelKnock) {
        options.unshift(
            (
@@ -79,7 +72,6 @@ const JoinRuleDropdown: React.FC<IProps> = ({
            menuWidth={width}
            value={value}
            label={label}
-            disabled={options.length === 1}
        >
            {options}
        </Dropdown>
--- a/src/components/views/messages/IBodyProps.ts
+++ b/src/components/views/messages/IBodyProps.ts
@@ -48,9 +48,4 @@ export interface IBodyProps {
    // Set to `true` to disable interactions (e.g. video controls) and to remove controls from the tab order.
    // This may be useful when displaying a preview of the event.
    inhibitInteraction?: boolean;
-
-    /**
-     * Optional ID for the root element.
-     */
-    id?: string;
 }
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type JSX, useEffect, useMemo } from "react";
+import React from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type IContent } from "matrix-js-sdk/src/matrix";
 import { type MediaEventContent } from "matrix-js-sdk/src/types";
@@ -17,6 +17,8 @@ import { _t } from "../../../languageHandler";
 import MFileBody from "./MFileBody";
 import { type IBodyProps } from "./IBodyProps";
 import { PlaybackManager } from "../../../audio/PlaybackManager";
+import { isVoiceMessage } from "../../../utils/EventUtils";
+import { PlaybackQueue } from "../../../audio/PlaybackQueue";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import MediaProcessingError from "./shared/MediaProcessingError";
 import { AudioPlayerViewModel } from "../../../viewmodels/audio/AudioPlayerViewModel";
@@ -25,6 +27,7 @@ import { AudioPlayerView } from "../../../shared-components/audio/AudioPlayerVie
 interface IState {
    error?: boolean;
    playback?: Playback;
+    audioPlayerVm?: AudioPlayerViewModel;
 }

 export default class MAudioBody extends React.PureComponent<IBodyProps, IState> {
@@ -35,6 +38,7 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>

    public async componentDidMount(): Promise<void> {
        let buffer: ArrayBuffer;
+
        try {
            try {
                const blob = await this.props.mediaEventHelper!.sourceBlob.value;
@@ -59,16 +63,18 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
        // We should have a buffer to work with now: let's set it up
        const playback = PlaybackManager.instance.createPlaybackInstance(buffer, waveform);
        playback.clockInfo.populatePlaceholdersFrom(this.props.mxEvent);
-        this.setState({ playback });
+        this.setState({ playback, audioPlayerVm: new AudioPlayerViewModel({ playback, mediaName: content.body }) });

-        this.onMount(playback);
-        // Note: the components later on will handle preparing the Playback class for us
+        if (isVoiceMessage(this.props.mxEvent)) {
+            PlaybackQueue.forRoom(this.props.mxEvent.getRoomId()!).unsortedEnqueue(this.props.mxEvent, playback);
+        }
+
+        // Note: the components later on will handle preparing the Playback class for us.
    }

-    protected onMount(playback: Playback): void {}
-
    public componentWillUnmount(): void {
        this.state.playback?.destroy();
+        this.state.audioPlayerVm?.dispose();
    }

    protected get showFileBody(): boolean {
@@ -110,35 +116,9 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
        // At this point we should have a playable state
        return (
            <span className="mx_MAudioBody">
-                <AudioPlayer playback={this.state.playback} mediaName={this.props.mxEvent.getContent().body} />
+                {this.state.audioPlayerVm && <AudioPlayerView vm={this.state.audioPlayerVm} />}
                {this.showFileBody && <MFileBody {...this.props} showGenericPlaceholder={false} />}
            </span>
        );
    }
 }
-
-interface AudioPlayerProps {
-    /**
-     * The playback instance to control audio playback.
-     */
-    playback: Playback;
-    /**
-     * The name of the media being played
-     */
-    mediaName: string;
-}
-
-/**
- * AudioPlayer component that initializes the AudioPlayerViewModel and renders the AudioPlayerView.
- */
-function AudioPlayer({ playback, mediaName }: AudioPlayerProps): JSX.Element {
-    const vm = useMemo(() => new AudioPlayerViewModel({ playback, mediaName }), [playback, mediaName]);
-
-    useEffect(() => {
-        return () => {
-            vm.dispose();
-        };
-    }, [vm]);
-
-    return <AudioPlayerView vm={vm} />;
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
RiotRobot	87d40ab0e0	v1.11.112	2025-09-16 11:52:32 +00:00
Michael Telatynski	8e9a43d70c	Merge commit from fork * Validate room upgrade relationships properly Ensures only correctly related rooms are left when leaving the latest version of a room. Ensures the room list does not wrongly hide rooms which have not yet been upgraded. Ensures the breadcrumbs store finds the correct latest version of a room for a given stored room. Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2025-09-16 12:43:49 +01:00
RiotRobot	9a11a80483	Upgrade dependency to matrix-js-sdk@38.2.0	2025-09-16 11:41:51 +00:00
ElementRobot	8d07e797c5	Hold Electron toasts until after the client starts (#30768 ) (#30769 ) Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>	2025-09-16 12:05:08 +01:00
ElementRobot	2e8e6e92cc	Add mechanism for Electron to render toasts (#30765 ) (#30767 ) Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>	2025-09-16 09:41:11 +01:00