Add module APIs for rendering the information on the user's profile.

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,7 +2,6 @@
 
 ## Checklist
 
-- [ ] I have read through [review guidelines](../docs/review.md) and [CONTRIBUTING.md](../CONTRIBUTING.md).
 - [ ] Tests written for new code (and old code if feasible).
 - [ ] New or updated `public`/`exported` symbols have accurate [TSDoc](https://tsdoc.org/) documentation.
 - [ ] Linter and other CI checks pass.

.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
 

CHANGELOG.md

@@ -1,28 +1,3 @@
-Changes in [1.11.110](https://github.com/element-hq/element-web/releases/tag/v1.11.110) (2025-08-27)
-====================================================================================================
-## ✨ Features
-
-* Hide recovery key when re-entering it while creating or changing it ([#30499](https://github.com/element-hq/element-web/pull/30499)). Contributed by @andybalaam.
-* Add `?no_universal_links=true` to OIDC url so EX doesn't try to handle it ([#29439](https://github.com/element-hq/element-web/pull/29439)). Contributed by @t3chguy.
-* Show a blue lock for unencrypted rooms and hide the grey shield for encrypted rooms ([#30440](https://github.com/element-hq/element-web/pull/30440)). Contributed by @langleyd.
-* Add support for Module API 1.4 ([#30185](https://github.com/element-hq/element-web/pull/30185)). Contributed by @t3chguy.
-* MVVM - Introduce some helpers for snapshot management ([#30398](https://github.com/element-hq/element-web/pull/30398)). Contributed by @MidhunSureshR.
-
-## 🐛 Bug Fixes
-
-* A11y: move focus to right panel when opened ([#30553](https://github.com/element-hq/element-web/pull/30553)). Contributed by @florianduros.
-* Fix e2e warning icon should be white ([#30539](https://github.com/element-hq/element-web/pull/30539)). Contributed by @florianduros.
-* Remove NoOneHere disabled reason. ([#30524](https://github.com/element-hq/element-web/pull/30524)). Contributed by @toger5.
-* Fix downloading files with authenticated media API ([#30520](https://github.com/element-hq/element-web/pull/30520)). Contributed by @t3chguy.
-* Fix call permissions check confusion around element call ([#30521](https://github.com/element-hq/element-web/pull/30521)). Contributed by @t3chguy.
-* Fix line wrap around emoji verification ([#30523](https://github.com/element-hq/element-web/pull/30523)). Contributed by @t3chguy.
-* Don't highlight redacted events ([#30519](https://github.com/element-hq/element-web/pull/30519)). Contributed by @t3chguy.
-* Fix matrix.to links not being handled in the app ([#30522](https://github.com/element-hq/element-web/pull/30522)). Contributed by @t3chguy.
-* Fix issue of new room list taking up the full width ([#30459](https://github.com/element-hq/element-web/pull/30459)). Contributed by @langleyd.
-* Fix widget persistence in React development mode ([#30509](https://github.com/element-hq/element-web/pull/30509)). Contributed by @robintown.
-* Fix widget initialization in React development mode ([#30463](https://github.com/element-hq/element-web/pull/30463)). Contributed by @robintown.
-
-
 Changes in [1.11.109](https://github.com/element-hq/element-web/releases/tag/v1.11.109) (2025-08-11)
 ====================================================================================================
 This release supports the upcoming v12 ("hydra") Matrix room version and is necessary to view and participate in these rooms.

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

Dockerfile

@@ -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

docker/docker-entrypoint.d/18-load-element-modules.sh

@@ -14,9 +14,10 @@ entrypoint_log() {
 mkdir -p /tmp/element-web-config
 cp /app/config*.json /tmp/element-web-config/
 
-# If the module directory exists AND the module directory has modules in it
-if [ -d "/modules" ] && [ "$( ls -A '/modules' )" ]; then
+# If there are modules to be loaded
+if [ -d "/modules" ]; then
     cd /modules
+
     for MODULE in *
     do
         # If the module has a package.json, use its main field as the entrypoint

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
 

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
 

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: [
@@ -39,18 +42,10 @@ export default {
         "util",
         // Embedded into webapp
         "@element-hq/element-call-embedded",
-
-        // Used by matrix-js-sdk, which means we have to include them as a
-        // dependency so that // we can run `tsc` (since we import the typescript
-        // source of js-sdk, rather than the transpiled and annotated JS like you
-        // would with a normal library).
-        "@types/content-type",
-        "@types/sdp-transform",
     ],
     ignoreBinaries: [
         // Used in scripts & workflows
         "jq",
-        "wait-on",
     ],
     ignoreExportsUsedInFile: true,
 } satisfies KnipConfig;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.110",
+    "version": "1.11.109",
     "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",
@@ -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,7 +184,7 @@
         "@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",
@@ -203,7 +203,6 @@
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
-        "@types/content-type": "^1.1.9",
         "@types/counterpart": "^0.18.1",
         "@types/css-tree": "^2.3.8",
         "@types/diff-match-patch": "^1.0.32",
@@ -222,12 +221,11 @@
         "@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",
         "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",

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;
-     }
-   }, {

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);
+    });
+});

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.

playwright/e2e/crypto/toasts.spec.ts

@@ -126,7 +126,7 @@ test.describe("'Turn on key storage' toast", () => {
         await toast.getByRole("button", { name: "Continue" }).click();
 
         // Then we see the Encryption settings dialog with an option to turn on key storage
-        await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
 
         // And when we close that
         await page.getByRole("button", { name: "Close dialog" }).click();
@@ -153,7 +153,7 @@ test.describe("'Turn on key storage' toast", () => {
         await page.getByRole("button", { name: "Go to Settings" }).click();
 
         // Then we see Encryption settings again
-        await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
 
         // And when we close that, see the toast, click Dismiss, and Yes, Dismiss
         await page.getByRole("button", { name: "Close dialog" }).click();

playwright/e2e/crypto/utils.ts

@@ -300,9 +300,9 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
     const encryptionTab = await app.settings.openUserSettings("Encryption");
 
-    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
     if (!(await keyStorageToggle.isChecked())) {
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
     }
 
     await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
@@ -323,11 +323,11 @@ export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
 export async function disableKeyBackup(app: ElementAppPage): Promise<void> {
     const encryptionTab = await app.settings.openUserSettings("Encryption");
 
-    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
     if (await keyStorageToggle.isChecked()) {
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
         await encryptionTab.getByRole("button", { name: "Delete key storage" }).click();
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).isVisible();
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).isVisible();
 
         // Wait for the update to account data to stick
         await new Promise((resolve) => setTimeout(resolve, 2000));

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;
-            }`,
-        });
-    });
-});

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");
-        },
-    );
-});

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");
-        },
-    );
-});

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

@@ -193,9 +193,6 @@ test.describe("Room list", () => {
 
                 await roomListView.getByRole("option", { name: "Open room room20" }).click();
 
-                // Make sure the room with the unread is visible before we press the keyboard action to select it
-                await expect(roomListView.getByRole("option", { name: "1 notification" })).toBeVisible();
-
                 await page.keyboard.press("Alt+Shift+ArrowDown");
 
                 await expect(page.getByRole("heading", { name: "1 notification", level: 1 })).toBeVisible();

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");
-        },
-    );
 });

playwright/e2e/permalinks/permalinks.spec.ts

@@ -100,51 +100,3 @@ test.describe("permalinks", () => {
         });
     });
 });
-
-test.describe("triple-click message selection", () => {
-    test.use({
-        displayName: "Alice",
-    });
-
-    test("should select entire message line when triple-clicking on message with pills", async ({
-        page,
-        app,
-        user,
-        bot,
-    }) => {
-        await bot.prepareClient();
-
-        const roomId = await app.client.createRoom({ name: "Test Room" });
-        await app.client.inviteUser(roomId, bot.credentials.userId);
-        await app.viewRoomByName("Test Room");
-
-        // Send a message with user and room pills
-        await app.client.sendMessage(
-            roomId,
-            `Testing triple-click message selection. ` +
-                `User: ${permalinkPrefix}${bot.credentials.userId}, ` +
-                `Room: ${permalinkPrefix}${roomId}, ` +
-                `Message: ${permalinkPrefix}${roomId}/$dummy-event, ` +
-                `and @room mention.`,
-        );
-
-        const timeline = page.locator(".mx_RoomView_timeline");
-        const messageTile = timeline.locator(".mx_EventTile").last();
-
-        // Triple-click on the message body to select its entire content
-        const messageBody = messageTile.locator(".mx_EventTile_body");
-        await messageBody.click({ clickCount: 3 });
-
-        // Get the expected text content of the message, including pills
-        const expectedText = await messageBody.innerText();
-
-        // Get the currently selected text from the page
-        const selectedText = await page.evaluate(() => {
-            const selection = window.getSelection();
-            return selection ? selection.toString().trim() : "";
-        });
-
-        // Verify that the selected text exactly matches the message content
-        expect(selectedText).toBe(expectedText);
-    });
-});

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 };

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);
         },

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);
-        });
-    });
-});

playwright/e2e/settings/appearance-user-settings-tab/index.ts

@@ -85,7 +85,7 @@ class Helpers {
      * Return the system theme toggle
      */
     getMatchSystemThemeCheckbox() {
-        return this.getThemePanel().getByRole("switch", { name: "Match system theme" });
+        return this.getThemePanel().getByRole("checkbox", { name: "Match system theme" });
     }
 
     /**
@@ -219,7 +219,7 @@ class Helpers {
      * Return the compact layout checkbox
      */
     getCompactLayoutCheckbox() {
-        return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
+        return this.getMessageLayoutPanel().getByRole("checkbox", { name: "Show compact text and messages" });
     }
 
     /**

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

@@ -117,7 +117,7 @@ test.describe("Encryption tab", () => {
             await verifySession(app, recoveryKey.encodedPrivateKey);
             await util.openEncryptionTab();
 
-            await page.getByRole("switch", { name: "Allow key storage" }).click();
+            await page.getByRole("checkbox", { name: "Allow key storage" }).click();
 
             await expect(
                 page.getByRole("heading", { name: "Are you sure you want to turn off key storage and delete it?" }),
@@ -136,7 +136,7 @@ test.describe("Encryption tab", () => {
 
             await page.getByRole("button", { name: "Delete key storage" }).click();
 
-            await expect(page.getByRole("switch", { name: "Allow key storage" })).not.toBeChecked();
+            await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();
 
             for (const prom of deleteRequestPromises) {
                 const request = await prom;

playwright/e2e/settings/encryption-user-tab/index.ts

@@ -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");
     }
 }

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")],
-        });
-    });
-});

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");
-    });
-});

playwright/e2e/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";

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();
-        },
-    );
-});

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");
-        },
-    );
-});

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");
 

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();
-        });
-    });
 });

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");
 

playwright/e2e/timeline/timeline.spec.ts

@@ -908,37 +908,23 @@ test.describe("Timeline", () => {
             });
         });
 
-        test(
-            "should be able to hide an image",
-            { tag: "@screenshot" },
-            async ({ page, app, homeserver, room, context }) => {
-                await app.viewRoomById(room.roomId);
-
-                const bot = new Bot(page, homeserver, {});
-                await bot.prepareClient();
-                await app.client.inviteUser(room.roomId, bot.credentials.userId);
-
-                await sendImage(bot, room.roomId, NEW_AVATAR);
-                await app.timeline.scrollToBottom();
-                const imgTile = page.locator(".mx_MImageBody").first();
-                await expect(imgTile).toBeVisible();
-                await imgTile.hover();
-                await page.getByRole("button", { name: "Hide" }).click();
-
-                // Check that the image is now hidden.
-                await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
-            },
-        );
-
-        test("should be able to hide a video", async ({ page, app, homeserver, room, context }) => {
+        test("should be able to hide an image", { tag: "@screenshot" }, async ({ page, app, room, context }) => {
             await app.viewRoomById(room.roomId);
+            await sendImage(app.client, room.roomId, NEW_AVATAR);
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MImageBody").first();
+            await expect(imgTile).toBeVisible();
+            await imgTile.hover();
+            await page.getByRole("button", { name: "Hide" }).click();
 
-            const bot = new Bot(page, homeserver, {});
-            await bot.prepareClient();
-            await app.client.inviteUser(room.roomId, bot.credentials.userId);
+            // Check that the image is now hidden.
+            await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
+        });
 
-            const upload = await bot.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
-            await bot.sendEvent(room.roomId, null, "m.room.message" as EventType, {
+        test("should be able to hide a video", async ({ page, app, room, context }) => {
+            await app.viewRoomById(room.roomId);
+            const upload = await app.client.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
+            await app.client.sendEvent(room.roomId, null, "m.room.message" as EventType, {
                 msgtype: "m.video" as MsgType,
                 body: "bbb.webm",
                 url: upload.content_uri,

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",
-            );
-        },
-    );
-});

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");
     }
 

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>,
             {

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

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:18e9e77eac01709e9ab4d26cf20c36bf5a1567756bb5a78c00cabf366d65a950";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,

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;
 }

res/css/views/elements/_Pill.pcss

@@ -11,7 +11,8 @@ Please see LICENSE files in the repository root for full details.
     line-height: $font-17px;
     border-radius: $font-16px;
     vertical-align: text-top;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     box-sizing: border-box;
     max-width: 100%;
     overflow: hidden;
@@ -56,8 +57,6 @@ Please see LICENSE files in the repository root for full details.
         margin-inline-start: -0.3em; /* Otherwise the gap is too large */
         margin-inline-end: 0.2em;
         min-width: $font-16px; /* ensure the avatar is not compressed */
-        user-select: text;
-        vertical-align: -2.5px;
     }
 
     .mx_Pill_text {

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;

res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss

@@ -32,8 +32,4 @@
             transform: rotate(180deg);
         }
     }
-
-    .mx_RoomListHeaderView_ReleaseAnnouncementAnchor {
-        display: inline-flex;
-    }
 }

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;
         }

src/@types/global.d.ts

@@ -71,13 +71,6 @@ type ElectronChannel =
     | "serverSupportedVersions";
 
 declare global {
-    // use `number` as the return type in all cases for globalThis.set{Interval,Timeout},
-    // so we don't accidentally use the methods on NodeJS.Timeout - they only exist in a subset of environments.
-    // The overload for clear{Interval,Timeout} is resolved as expected.
-    // We use `ReturnType<typeof setTimeout>` in the code to be agnostic of if this definition gets loaded.
-    function setInterval(handler: TimerHandler, timeout: number, ...arguments: any[]): number;
-    function setTimeout(handler: TimerHandler, timeout: number, ...arguments: any[]): number;
-
     interface Window {
         mxSendRageshake: (text: string, withLogs?: boolean) => void;
         matrixLogger: typeof logger;

src/LegacyCallHandler.tsx

@@ -112,7 +112,6 @@ export enum LegacyCallHandlerEvent {
     CallsChanged = "calls_changed",
     CallChangeRoom = "call_change_room",
     SilencedCallsChanged = "silenced_calls_changed",
-    ShownSidebarsChanged = "shown_sidebars_changed",
     CallState = "call_state",
     ProtocolSupport = "protocol_support",
 }
@@ -121,7 +120,6 @@ type EventEmitterMap = {
     [LegacyCallHandlerEvent.CallsChanged]: (calls: Map<string, MatrixCall>) => void;
     [LegacyCallHandlerEvent.CallChangeRoom]: (call: MatrixCall) => void;
     [LegacyCallHandlerEvent.SilencedCallsChanged]: (calls: Set<string>) => void;
-    [LegacyCallHandlerEvent.ShownSidebarsChanged]: (sidebarsShown: Map<string, boolean>) => void;
     [LegacyCallHandlerEvent.CallState]: (mappedRoomId: string | null, status: CallState) => void;
     [LegacyCallHandlerEvent.ProtocolSupport]: () => void;
 };
@@ -146,8 +144,6 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
 
     private silencedCalls = new Set<string>(); // callIds
 
-    private shownSidebars = new Map<string, boolean>(); // callId (call) -> sidebar show
-
     private backgroundAudio = new BackgroundAudio();
     private playingSources: Record<string, AudioBufferSourceNode> = {}; // Record them for stopping
 
@@ -244,15 +240,6 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
         return false;
     }
 
-    public setCallSidebarShown(callId: string, sidebarShown: boolean): void {
-        this.shownSidebars.set(callId, sidebarShown);
-        this.emit(LegacyCallHandlerEvent.ShownSidebarsChanged, this.shownSidebars);
-    }
-
-    public isCallSidebarShown(callId?: string): boolean {
-        return !!callId && (this.shownSidebars.get(callId) ?? true);
-    }
-
     private async checkProtocols(maxTries: number): Promise<void> {
         try {
             const protocols = await MatrixClientPeg.safeGet().getThirdpartyProtocols();

src/RoomAliasCache.ts

@@ -6,8 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-type CacheResult = { roomId: string; viaServers: string[] };
-
 /**
  * This is meant to be a cache of room alias to room ID so that moving between
  * rooms happens smoothly (for example using browser back / forward buttons).
@@ -18,12 +16,12 @@ type CacheResult = { roomId: string; viaServers: string[] };
  * A similar thing could also be achieved via `pushState` with a state object,
  * but keeping it separate like this seems easier in case we do want to extend.
  */
-const cache = new Map<string, CacheResult>();
+const aliasToIDMap = new Map<string, string>();
 
-export function storeRoomAliasInCache(alias: string, roomId: string, viaServers: string[]): void {
-    cache.set(alias, { roomId, viaServers });
+export function storeRoomAliasInCache(alias: string, id: string): void {
+    aliasToIDMap.set(alias, id);
 }
 
-export function getCachedRoomIdForAlias(alias: string): CacheResult | undefined {
-    return cache.get(alias);
+export function getCachedRoomIDForAlias(alias: string): string | undefined {
+    return aliasToIDMap.get(alias);
 }

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) {

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>

src/components/structures/MatrixChat.tsx

@@ -51,7 +51,7 @@ import ThemeController from "../../settings/controllers/ThemeController";
 import { startAnyRegistrationFlow } from "../../Registration";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import AutoDiscoveryUtils from "../../utils/AutoDiscoveryUtils";
-import { calculateRoomVia, makeRoomPermalink } from "../../utils/permalinks/Permalinks";
+import { makeRoomPermalink } from "../../utils/permalinks/Permalinks";
 import ThemeWatcher, { ThemeWatcherEvent } from "../../settings/watchers/ThemeWatcher";
 import { FontWatcher } from "../../settings/watchers/FontWatcher";
 import { storeRoomAliasInCache } from "../../RoomAliasCache";
@@ -238,8 +238,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     private readonly stores: SdkContextClass;
     private loadSessionAbortController = new AbortController();
 
-    private sessionLoadStarted = false;
-
     public constructor(props: IProps) {
         super(props);
         this.stores = SdkContextClass.instance;
@@ -472,20 +470,15 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.fontWatcher.start();
 
         initSentry(SdkConfig.get("sentry"));
-        window.addEventListener("resize", this.onWindowResized);
 
-        // Once we start loading the MatrixClient, we can't stop, even if MatrixChat gets unmounted (as it does
-        // in React's Strict Mode). So, start loading the session now, but only if this MatrixChat was not previously
-        // mounted.
-        if (!this.sessionLoadStarted) {
-            this.sessionLoadStarted = true;
-            if (!checkSessionLockFree()) {
-                // another instance holds the lock; confirm its theft before proceeding
-                setTimeout(() => this.setState({ view: Views.CONFIRM_LOCK_THEFT }), 0);
-            } else {
-                this.startInitSession();
-            }
+        if (!checkSessionLockFree()) {
+            // another instance holds the lock; confirm its theft before proceeding
+            setTimeout(() => this.setState({ view: Views.CONFIRM_LOCK_THEFT }), 0);
+        } else {
+            this.startInitSession();
         }
+
+        window.addEventListener("resize", this.onWindowResized);
     }
 
     public componentDidUpdate(prevProps: IProps, prevState: IState): void {
@@ -1026,7 +1019,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 presentedId = theAlias;
                 // Store display alias of the presented room in cache to speed future
                 // navigation.
-                storeRoomAliasInCache(theAlias, room.roomId, calculateRoomVia(room));
+                storeRoomAliasInCache(theAlias, room.roomId);
             }
 
             // Store this as the ID of the last room accessed. This is so that we can

src/components/structures/PipContainer.tsx

@@ -245,7 +245,6 @@ class PipContainerInner extends React.Component<IProps, IState> {
                     secondaryCall={this.state.secondaryCall}
                     pipMode={pipMode}
                     onResize={onResize}
-                    sidebarShown={false}
                 />
             ));
         }

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}

src/components/utils/ListView.tsx

@@ -184,32 +184,28 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
 
             // Guard against null/undefined events and modified keys which we don't want to handle here but do
             // at the settings level shortcuts(E.g. Select next room, etc )
-            // Guard against null/undefined events and modified keys
-            if (!e || isModifiedKeyEvent(e)) {
-                onKeyDown?.(e);
-                return;
-            }
-
-            if (e.code === Key.ARROW_UP && currentIndex !== undefined) {
-                scrollToItem(currentIndex - 1, false);
-                handled = true;
-            } else if (e.code === Key.ARROW_DOWN && currentIndex !== undefined) {
-                scrollToItem(currentIndex + 1, true);
-                handled = true;
-            } else if (e.code === Key.HOME) {
-                scrollToIndex(0);
-                handled = true;
-            } else if (e.code === Key.END) {
-                scrollToIndex(items.length - 1);
-                handled = true;
-            } else if (e.code === Key.PAGE_DOWN && visibleRange && currentIndex !== undefined) {
-                const numberDisplayed = visibleRange.endIndex - visibleRange.startIndex;
-                scrollToItem(Math.min(currentIndex + numberDisplayed, items.length - 1), true, `start`);
-                handled = true;
-            } else if (e.code === Key.PAGE_UP && visibleRange && currentIndex !== undefined) {
-                const numberDisplayed = visibleRange.endIndex - visibleRange.startIndex;
-                scrollToItem(Math.max(currentIndex - numberDisplayed, 0), false, `start`);
-                handled = true;
+            if (e || !isModifiedKeyEvent(e)) {
+                if (e.code === Key.ARROW_UP && currentIndex !== undefined) {
+                    scrollToItem(currentIndex - 1, false);
+                    handled = true;
+                } else if (e.code === Key.ARROW_DOWN && currentIndex !== undefined) {
+                    scrollToItem(currentIndex + 1, true);
+                    handled = true;
+                } else if (e.code === Key.HOME) {
+                    scrollToIndex(0);
+                    handled = true;
+                } else if (e.code === Key.END) {
+                    scrollToIndex(items.length - 1);
+                    handled = true;
+                } else if (e.code === Key.PAGE_DOWN && visibleRange && currentIndex !== undefined) {
+                    const numberDisplayed = visibleRange.endIndex - visibleRange.startIndex;
+                    scrollToItem(Math.min(currentIndex + numberDisplayed, items.length - 1), true, `start`);
+                    handled = true;
+                } else if (e.code === Key.PAGE_UP && visibleRange && currentIndex !== undefined) {
+                    const numberDisplayed = visibleRange.endIndex - visibleRange.startIndex;
+                    scrollToItem(Math.max(currentIndex - numberDisplayed, 0), false, `start`);
+                    handled = true;
+                }
             }
 
             if (handled) {

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

src/components/views/dialogs/BaseDialog.tsx

@@ -145,9 +145,6 @@ export default class BaseDialog extends React.Component<IProps> {
         const lockProps: Record<string, any> = {
             "onKeyDown": this.onKeyDown,
             "role": "dialog",
-            // Allow the dialog to be keyboard focusable
-            // So the escape key handling works in more cases (say you select the header)
-            "tabIndex": -1,
             // This should point to a node describing the dialog.
             // If we were about to completely follow this recommendation we'd need to
             // make all the components relying on BaseDialog to be aware of it.

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

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} />

src/components/views/dialogs/IntegrationsDisabledDialog.tsx

@@ -1,53 +1,55 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2019 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 React, { useCallback } from "react";
+import React from "react";
 
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import { UserTab } from "./UserTab";
 
 interface IProps {
     onFinished(): void;
 }
 
-export const IntegrationsDisabledDialog: React.FC<IProps> = ({ onFinished }) => {
-    const onOpenSettingsClick = useCallback(() => {
-        onFinished();
-        dis.dispatch({
-            action: Action.ViewUserSettings,
-            initialTabId: UserTab.Security,
-        });
-    }, [onFinished]);
+export default class IntegrationsDisabledDialog extends React.Component<IProps> {
+    private onAcknowledgeClick = (): void => {
+        this.props.onFinished();
+    };
 
-    return (
-        <BaseDialog
-            className="mx_IntegrationsDisabledDialog"
-            hasCancel={true}
-            onFinished={onFinished}
-            title={_t("integrations|disabled_dialog_title")}
-        >
-            <div className="mx_IntegrationsDisabledDialog_content">
-                <p>
-                    {_t("integrations|disabled_dialog_description", {
-                        manageIntegrations: _t("integration_manager|manage_title"),
-                    })}
-                </p>
-            </div>
-            <DialogButtons
-                primaryButton={_t("common|settings")}
-                onPrimaryButtonClick={onOpenSettingsClick}
-                cancelButton={_t("action|ok")}
-                onCancel={onFinished}
-            />
-        </BaseDialog>
-    );
-};
+    private onOpenSettingsClick = (): void => {
+        this.props.onFinished();
+        dis.fire(Action.ViewUserSettings);
+    };
+
+    public render(): React.ReactNode {
+        return (
+            <BaseDialog
+                className="mx_IntegrationsDisabledDialog"
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("integrations|disabled_dialog_title")}
+            >
+                <div className="mx_IntegrationsDisabledDialog_content">
+                    <p>
+                        {_t("integrations|disabled_dialog_description", {
+                            manageIntegrations: _t("integration_manager|manage_title"),
+                        })}
+                    </p>
+                </div>
+                <DialogButtons
+                    primaryButton={_t("common|settings")}
+                    onPrimaryButtonClick={this.onOpenSettingsClick}
+                    cancelButton={_t("action|ok")}
+                    onCancel={this.onAcknowledgeClick}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -53,7 +53,7 @@ import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
 import { _t } from "../../../../languageHandler";
 import { MatrixClientPeg } from "../../../../MatrixClientPeg";
 import { PosthogAnalytics } from "../../../../PosthogAnalytics";
-import { getCachedRoomIdForAlias } from "../../../../RoomAliasCache";
+import { getCachedRoomIDForAlias } from "../../../../RoomAliasCache";
 import { showStartChatInviteDialog } from "../../../../RoomInvite";
 import { SettingLevel } from "../../../../settings/SettingLevel";
 import SettingsStore from "../../../../settings/SettingsStore";
@@ -912,7 +912,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         if (
             trimmedQuery.startsWith("#") &&
             trimmedQuery.includes(":") &&
-            (!getCachedRoomIdForAlias(trimmedQuery) || !cli.getRoom(getCachedRoomIdForAlias(trimmedQuery)!.roomId))
+            (!getCachedRoomIDForAlias(trimmedQuery) || !cli.getRoom(getCachedRoomIDForAlias(trimmedQuery)))
         ) {
             joinRoomSection = (
                 <div className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches" role="group">

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}

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>

src/components/views/messages/EventContentBody.tsx

@@ -151,7 +151,7 @@ interface Props extends ReplacerOptions {
 const EventContentBody = memo(
     ({ as, mxEvent, stripReply, content, linkify, highlights, includeDir = true, ref, ...options }: Props) => {
         const enableBigEmoji = useSettingValue("TextualBody.enableBigEmoji");
-        const [mediaIsVisible] = useMediaVisible(mxEvent);
+        const [mediaIsVisible] = useMediaVisible(mxEvent?.getId(), mxEvent?.getRoomId());
 
         const replacer = useReplacer(content, mxEvent, options);
         const linkifyOptions = useMemo(

src/components/views/messages/HideActionButton.tsx

@@ -25,7 +25,7 @@ interface IProps {
  * Quick action button for marking a media event as hidden.
  */
 export const HideActionButton: React.FC<IProps> = ({ mxEvent }) => {
-    const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent);
+    const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent.getId(), mxEvent.getRoomId());
 
     if (!mediaIsVisible) {
         return;

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;
 }

src/components/views/messages/MImageBody.tsx

@@ -686,7 +686,7 @@ export class MImageBodyInner extends React.Component<IProps, IState> {
 
 // Wrap MImageBody component so we can use a hook here.
 const MImageBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
     return <MImageBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MImageReplyBody.tsx

@@ -38,7 +38,7 @@ class MImageReplyBodyInner extends MImageBodyInner {
     }
 }
 const MImageReplyBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
     return <MImageReplyBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MStickerBody.tsx

@@ -20,7 +20,7 @@ class MStickerBodyInner extends MImageBodyInner {
     protected onClick = (ev: React.MouseEvent): void => {
         ev.preventDefault();
         if (!this.props.mediaVisible) {
-            this.props.setMediaVisible(true);
+            this.props.setMediaVisible?.(true);
         }
     };
 
@@ -79,7 +79,7 @@ class MStickerBodyInner extends MImageBodyInner {
 }
 
 const MStickerBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
     return <MStickerBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MVideoBody.tsx

@@ -342,7 +342,7 @@ class MVideoBodyInner extends React.PureComponent<IProps, IState> {
 
 // Wrap MVideoBody component so we can use a hook here.
 const MVideoBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
     return <MVideoBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MessageEvent.tsx

@@ -51,11 +51,6 @@ interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper
     getRelationsForEvent?: GetRelationsForEvent;
 
     isSeeingThroughMessageHiddenForModeration?: boolean;
-
-    /**
-     * Optional ID for the root element.
-     */
-    id?: string;
 }
 
 export interface IOperableEventTile {
@@ -313,7 +308,6 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
             getRelationsForEvent: this.props.getRelationsForEvent,
             isSeeingThroughMessageHiddenForModeration: this.props.isSeeingThroughMessageHiddenForModeration,
             inhibitInteraction: this.props.inhibitInteraction,
-            id: this.props.id,
         };
         if (hasCaption) {
             return <CaptionBody {...bodyProps} WrappedBodyType={BodyType} />;

src/components/views/messages/PinnedMessageBadge.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type HTMLProps, type JSX } from "react";
+import React, { type JSX } from "react";
 import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
 
 import { _t } from "../../../languageHandler";
@@ -13,9 +13,9 @@ import { _t } from "../../../languageHandler";
 /**
  * A badge to indicate that a message is pinned.
  */
-export function PinnedMessageBadge(props: Readonly<HTMLProps<HTMLDivElement>>): JSX.Element {
+export function PinnedMessageBadge(): JSX.Element {
     return (
-        <div {...props} className="mx_PinnedMessageBadge">
+        <div className="mx_PinnedMessageBadge">
             <PinIcon width="16px" height="16px" />
             {_t("room|pinned_message_badge")}
         </div>

src/components/views/messages/SenderProfile.tsx

@@ -12,7 +12,9 @@ import { type MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
 
 import DisambiguatedProfile from "./DisambiguatedProfile";
 import { useRoomMemberProfile } from "../../../hooks/room/useRoomMemberProfile";
-
+import ModuleApi from "../../../modules/Api";
+import { CustomComponentsApi } from "../../../modules/customComponentApi";
+import { MessageProfileComponentProps } from "@element-hq/element-web-module-api";
 interface IProps {
     mxEvent: MatrixEvent;
     onClick?(): void;
@@ -24,17 +26,25 @@ export default function SenderProfile({ mxEvent, onClick, withTooltip }: IProps)
         userId: mxEvent.getSender(),
         member: mxEvent.sender,
     });
+    
+    if (mxEvent.getContent().msgtype === MsgType.Emote) {
+        return <></>;
+    }
+    const moduleRenderer = ModuleApi.customComponents.messageProfileRenderer;
+    const renderFn = (moduleProps: MessageProfileComponentProps) => <DisambiguatedProfile
+        fallbackName={moduleProps.mxEvent.sender ?? ""}
+        onClick={moduleProps.onClick}
+        member={moduleProps.member}
+        colored={true}
+        emphasizeDisplayName={true}
+        withTooltip={withTooltip}
+    />;
 
-    return mxEvent.getContent().msgtype !== MsgType.Emote ? (
-        <DisambiguatedProfile
-            fallbackName={mxEvent.getSender() ?? ""}
-            onClick={onClick}
-            member={member}
-            colored={true}
-            emphasizeDisplayName={true}
-            withTooltip={withTooltip}
-        />
-    ) : (
-        <></>
-    );
+    const modProps = {
+        onClick,
+        mxEvent: CustomComponentsApi.getModuleMatrixEvent(mxEvent)!,
+        member: member || undefined,
+    };
+
+    return moduleRenderer ? moduleRenderer(modProps, renderFn) : renderFn(modProps);
 }

src/components/views/messages/TextualBody.tsx

@@ -384,12 +384,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
         if (isEmote) {
             return (
-                <div
-                    id={this.props.id}
-                    className="mx_MEmoteBody mx_EventTile_content"
-                    onClick={this.onBodyLinkClick}
-                    dir="auto"
-                >
+                <div className="mx_MEmoteBody mx_EventTile_content" onClick={this.onBodyLinkClick} dir="auto">
                     *&nbsp;
                     <span className="mx_MEmoteBody_sender" onClick={this.onEmoteSenderClick}>
                         {mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()}
@@ -402,7 +397,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         }
         if (isNotice) {
             return (
-                <div id={this.props.id} className="mx_MNoticeBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
+                <div className="mx_MNoticeBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
                     {body}
                     {widgets}
                 </div>
@@ -410,14 +405,14 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         }
         if (isCaption) {
             return (
-                <div id={this.props.id} className="mx_MTextBody mx_EventTile_caption" onClick={this.onBodyLinkClick}>
+                <div className="mx_MTextBody mx_EventTile_caption" onClick={this.onBodyLinkClick}>
                     {body}
                     {widgets}
                 </div>
             );
         }
         return (
-            <div id={this.props.id} className="mx_MTextBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
+            <div className="mx_MTextBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
                 {body}
                 {widgets}
             </div>

src/components/views/right_panel/RoomSummaryCardView.tsx

@@ -49,6 +49,7 @@ import RoomName from "../elements/RoomName.tsx";
 import { Flex } from "../../../shared-components/utils/Flex";
 import { Linkify, topicToHtml } from "../../../HtmlUtils.tsx";
 import { Box } from "../../../shared-components/utils/Box";
+import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
 import { useRoomSummaryCardViewModel } from "../../viewmodels/right_panel/RoomSummaryCardViewModel.tsx";
 import { useRoomTopicViewModel } from "../../viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx";
 
@@ -250,15 +251,25 @@ const RoomSummaryCardView: React.FC<IProps> = ({
                 <MenuItem Icon={ThreadsIcon} label={_t("common|threads")} onSelect={vm.onRoomThreadsClick} />
                 {!vm.isVideoRoom && (
                     <>
-                        <MenuItem
-                            Icon={PinIcon}
-                            label={_t("right_panel|pinned_messages_button")}
-                            onSelect={vm.onRoomPinsClick}
+                        <ReleaseAnnouncement
+                            feature="pinningMessageList"
+                            header={_t("right_panel|pinned_messages|release_announcement|title")}
+                            description={_t("right_panel|pinned_messages|release_announcement|description")}
+                            closeLabel={_t("right_panel|pinned_messages|release_announcement|close")}
+                            placement="top"
                         >
-                            <Text as="span" size="sm">
-                                {vm.pinCount}
-                            </Text>
-                        </MenuItem>
+                            <div>
+                                <MenuItem
+                                    Icon={PinIcon}
+                                    label={_t("right_panel|pinned_messages_button")}
+                                    onSelect={vm.onRoomPinsClick}
+                                >
+                                    <Text as="span" size="sm">
+                                        {vm.pinCount}
+                                    </Text>
+                                </MenuItem>
+                            </div>
+                        </ReleaseAnnouncement>
                         <MenuItem
                             Icon={FilesIcon}
                             label={_t("right_panel|files_button")}

src/components/views/right_panel/WidgetCard.tsx

@@ -64,7 +64,7 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
 
     const header = (
         <div className="mx_BaseCard_header_title">
-            <Heading size="4" className="mx_BaseCard_header_title_heading" as="h1">
+            <Heading size="4" className="mx_BaseCard_header_title_heading">
                 {WidgetUtils.getWidgetName(app)}
             </Heading>
             <ContextMenuButton

src/components/views/right_panel/user_info/UserInfoHeaderView.tsx

@@ -16,6 +16,7 @@ import { Flex } from "../../../../shared-components/utils/Flex";
 import PresenceLabel from "../../rooms/PresenceLabel";
 import CopyableText from "../../elements/CopyableText";
 import { UserInfoHeaderVerificationView } from "./UserInfoHeaderVerificationView";
+import ModuleApi from "../../../../modules/Api";
 
 export interface UserInfoHeaderViewProps {
     member: Member;
@@ -48,6 +49,27 @@ export const UserInfoHeaderView: React.FC<UserInfoHeaderViewProps> = ({
         );
     }
 
+    const moduleRenderer = ModuleApi.customComponents.userInfoRenderer;
+    let usernameSection;
+    if (moduleRenderer && vm.userIdentifier) {
+         usernameSection = moduleRenderer(
+            {
+                userId: vm.userIdentifier,
+            },
+            (props) => <Text size="sm" weight="semibold" className="mx_UserInfo_profile_mxid">
+                <CopyableText getTextToCopy={() => props.userId} border={false}>
+                    {props.userId}
+                </CopyableText>
+            </Text>,
+        );
+    } else {
+        usernameSection = <Text size="sm" weight="semibold" className="mx_UserInfo_profile_mxid">
+            <CopyableText getTextToCopy={() => vm.userIdentifier} border={false}>
+                {vm.userIdentifier}
+            </CopyableText>
+        </Text>;
+    }
+
     return (
         <React.Fragment>
             <div className="mx_UserInfo_avatar">
@@ -83,11 +105,7 @@ export const UserInfoHeaderView: React.FC<UserInfoHeaderViewProps> = ({
                             </Flex>
                         </Tooltip>
                     )}
-                    <Text size="sm" weight="semibold" className="mx_UserInfo_profile_mxid">
-                        <CopyableText getTextToCopy={() => vm.userIdentifier} border={false}>
-                            {vm.userIdentifier}
-                        </CopyableText>
-                    </Text>
+                    {usernameSection}
                 </Flex>
                 {!hideVerificationSection && <UserInfoHeaderVerificationView member={member} devices={devices} />}
             </Container>

src/components/views/rooms/EventTile.tsx

@@ -34,7 +34,6 @@ import {
     type UserVerificationStatus,
 } from "matrix-js-sdk/src/crypto-api";
 import { Tooltip } from "@vector-im/compound-web";
-import { uniqueId } from "lodash";
 
 import ReplyChain from "../elements/ReplyChain";
 import { _t } from "../../../languageHandler";
@@ -919,8 +918,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
     public render(): ReactNode {
         const msgtype = this.props.mxEvent.getContent().msgtype;
         const eventType = this.props.mxEvent.getType();
-        const id = uniqueId();
-
         const {
             hasRenderer,
             isBubbleMessage,
@@ -1145,7 +1142,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
         let pinnedMessageBadge: JSX.Element | undefined;
         if (PinningUtils.isPinned(MatrixClientPeg.safeGet(), this.props.mxEvent)) {
-            pinnedMessageBadge = <PinnedMessageBadge aria-describedby={id} tabIndex={0} />;
+            pinnedMessageBadge = <PinnedMessageBadge />;
         }
 
         let reactionsRow: JSX.Element | undefined;
@@ -1240,7 +1237,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                             {avatar}
                             {sender}
                         </div>,
-                        <div id={id} className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu}>
+                        <div className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu}>
                             {this.renderContextMenu()}
                             {replyChain}
                             {renderTile(TimelineRenderingType.Thread, {
@@ -1428,7 +1425,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                         {sender}
                         {ircPadlock}
                         {avatar}
-                        <div id={id} className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu}>
+                        <div className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu}>
                             {this.renderContextMenu()}
                             {groupTimestamp}
                             {groupPadlock}

src/components/views/rooms/LinkPreviewGroup.tsx

@@ -30,7 +30,7 @@ interface IProps {
 const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick }) => {
     const cli = useContext(MatrixClientContext);
     const [expanded, toggleExpanded] = useStateToggle();
-    const [mediaVisible] = useMediaVisible(mxEvent);
+    const [mediaVisible] = useMediaVisible(mxEvent.getId(), mxEvent.getRoomId());
 
     const ts = mxEvent.getTs();
     const previews = useAsyncMemo<[string, IPreviewUrlResponse][]>(

src/components/views/rooms/MessageComposer.tsx

@@ -531,15 +531,12 @@ export class MessageComposer extends React.Component<IProps, IState> {
             if (!this.props.e2eStatus) {
                 leftIcon = (
                     <div className="mx_MessageComposer_e2eIconWrapper">
-                        <Tooltip label={_t("composer|room_unencrypted")}>
-                            <LockOffIcon
-                                aria-label={_t("composer|room_unencrypted")}
-                                width={12}
-                                height={12}
-                                color="var(--cpd-color-icon-info-primary)"
-                                className="mx_E2EIcon mx_MessageComposer_e2eIcon"
-                            />
-                        </Tooltip>
+                        <LockOffIcon
+                            width={12}
+                            height={12}
+                            color="var(--cpd-color-icon-info-primary)"
+                            className="mx_E2EIcon mx_MessageComposer_e2eIcon"
+                        />
                     </div>
                 );
             } else if (this.props.e2eStatus !== E2EStatus.Normal) {

src/components/views/rooms/NewRoomIntro.tsx

@@ -30,8 +30,6 @@ import { privateShouldBeEncrypted } from "../../../utils/rooms";
 import { LocalRoom } from "../../../models/LocalRoom";
 import { shouldEncryptRoomWithSingle3rdPartyInvite } from "../../../utils/room/shouldEncryptRoomWithSingle3rdPartyInvite";
 import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
-import { useTopic } from "../../../hooks/room/useTopic";
-import { topicToHtml, Linkify } from "../../../HtmlUtils";
 
 function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean {
     const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId);
@@ -54,7 +52,6 @@ const determineIntroMessage = (room: Room, encryptedSingle3rdPartyInvite: boolea
 const NewRoomIntro: React.FC = () => {
     const cli = useContext(MatrixClientContext);
     const { room, roomId } = useScopedRoomContext("room", "roomId");
-    const topic = useTopic(room);
 
     if (!room || !roomId) {
         throw new Error("Unable to create a NewRoomIntro without room and roomId");
@@ -109,6 +106,7 @@ const NewRoomIntro: React.FC = () => {
         );
     } else {
         const inRoom = room && room.getMyMembership() === KnownMembership.Join;
+        const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic;
         const canAddTopic = inRoom && room.currentState.maySendStateEvent(EventType.RoomTopic, cli.getSafeUserId());
 
         const onTopicClick = (): void => {
@@ -128,23 +126,18 @@ const NewRoomIntro: React.FC = () => {
         let topicText;
         if (canAddTopic && topic) {
             topicText = _t(
-                "room|intro|edit_topic",
-                {},
+                "room|intro|topic_edit",
+                { topic },
                 {
                     a: (sub) => (
                         <AccessibleButton element="a" kind="link_inline" onClick={onTopicClick}>
                             {sub}
                         </AccessibleButton>
                     ),
-                    topic: () => <Linkify>{topicToHtml(topic?.text, topic?.html)}</Linkify>,
                 },
             );
         } else if (topic) {
-            topicText = _t(
-                "room|intro|display_topic",
-                {},
-                { topic: () => <Linkify>{topicToHtml(topic?.text, topic?.html)}</Linkify> },
-            );
+            topicText = _t("room|intro|topic", { topic });
         } else if (canAddTopic) {
             topicText = _t(
                 "room|intro|no_topic",
@@ -252,7 +245,7 @@ const NewRoomIntro: React.FC = () => {
                         },
                     )}
                 </p>
-                <p data-testid="topic">{topicText}</p>
+                <p>{topicText}</p>
                 {buttons}
             </React.Fragment>
         );