Merge branch 'develop' into hs/remove-legacy-setting-toggle

* feat(new room list): add space menu in view model

* test(new room list): add space menu in view model

* feat(new room list): add space menu in room list header

* chore: update i18n

* test(new room list): add tests for space menu

* test(new room list): update room list tests

* test(e2e): add tests for space menu

.github/workflows/docker.yaml

@@ -25,14 +25,14 @@ jobs:
                   fetch-depth: 0 # needed for docker-package to be able to calculate the version
 
             - name: Install Cosign
-              uses: sigstore/cosign-installer@dc72c7d5c4d10cd6bcb8cf6e3fd625a9e5e537da # v3
+              uses: sigstore/cosign-installer@c56c2d3e59e4281cc41dea2217323ba5694b171e # v3
               if: github.event_name != 'pull_request'
 
             - name: Set up QEMU
-              uses: docker/setup-qemu-action@53851d14592bedcffcf25ea515637cff71ef929a # v3
+              uses: docker/setup-qemu-action@4574d27a4764455b42196d70a065bc6853246a25 # v3
 
             - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@6524bf65af31da8d45b59e8c27de4bd072b392f5 # v3
+              uses: docker/setup-buildx-action@f7ce87c1d6bead3e36075b2ce75da1f6cc28aaca # v3
               with:
                   install: true
 
@@ -52,26 +52,41 @@ jobs:
                   password: ${{ secrets.GITHUB_TOKEN }}
 
             - name: Build and load
+              id: test-build
               uses: docker/build-push-action@ca877d9245402d1537745e0e356eab47c3520991 # v6
               with:
                   context: .
                   load: true
-                  tags: ${{ env.TEST_TAG }}
 
             - name: Test the image
+              env:
+                  IMAGEID: ${{ steps.test-build.outputs.imageid }}
               run: |
+                  set -x
+
                   # Make a fake module to test the image
                   MODULE_PATH="modules/module_name/index.js"
                   mkdir -p $(dirname $MODULE_PATH)
                   echo 'alert("Testing");' > $MODULE_PATH
 
                   # Spin up a container of the image
-                  CONTAINER_ID=$(docker run --rm -dp 80:80 -v $(pwd)/modules:/tmp/element-web-modules ${{ env.TEST_TAG }})
+                  ELEMENT_WEB_PORT=8181
+                  CONTAINER_ID=$(
+                      docker run \
+                          --rm \
+                          -e "ELEMENT_WEB_PORT=$ELEMENT_WEB_PORT" \
+                          -dp "$ELEMENT_WEB_PORT:$ELEMENT_WEB_PORT" \
+                          -v $(pwd)/modules:/tmp/element-web-modules \
+                          "$IMAGEID" \
+                  )
 
                   # Run some smoke tests
-                  wget --retry-connrefused --tries=5 -q --wait=3 --spider http://localhost:80/modules/module_name/index.js
-                  MODULE_1=$(curl http://localhost:80/config.json | jq -r .modules[0])
-                  test "$MODULE_1" = "/${MODULE_PATH}"
+                  wget --retry-connrefused --tries=5 -q --wait=3 --spider "http://localhost:$ELEMENT_WEB_PORT/modules/module_name/index.js"
+                  MODULE_0=$(curl "http://localhost:$ELEMENT_WEB_PORT/config.json" | jq -r .modules[0])
+                  test "$MODULE_0" = "/${MODULE_PATH}"
+
+                  # Check healthcheck
+                  test "$(docker inspect -f {{.State.Running}} $CONTAINER_ID)" == "true"
 
                   # Clean up
                   docker stop "$CONTAINER_ID"

.github/workflows/release.yml

@@ -19,6 +19,7 @@ jobs:
             contents: write
             issues: write
             pull-requests: read
+            id-token: write
         secrets:
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
             GPG_PRIVATE_KEY: ${{ secrets.GPG_PRIVATE_KEY }}

.github/workflows/tests.yml

@@ -104,7 +104,7 @@ jobs:
 
             - name: Skip SonarCloud in merge queue
               if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@119b3320db3f04d89e91df840844b92d57ce3468
+              uses: guibranco/github-status-action-v2@7ca807c2ba3401be532d29a876b93262108099fb
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success

Dockerfile

@@ -46,3 +46,5 @@ USER nginx
 
 # HTTP listen port
 ENV ELEMENT_WEB_PORT=80
+
+HEALTHCHECK --start-period=5s CMD wget --retry-connrefused --tries=5 -q --wait=3 --spider http://localhost:$ELEMENT_WEB_PORT/config.json

docs/MVVM.md

@@ -0,0 +1,67 @@
+# MVVM
+
+General description of the pattern can be found [here](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel). But the gist of it is that you divide your code into three sections:
+
+1. Model: This is where the business logic and data resides.
+2. View Model: This code exists to provide the logic necessary for the UI. It directly uses the Model code.
+3. View: This is the UI code itself and depends on the view model.
+
+If you do MVVM right, your view should be dumb i.e it gets data from the view model and merely displays it.
+
+### Practical guidelines for MVVM in element-web
+
+#### Model
+
+This is anywhere your data or business logic comes from. If your view model is accessing something simple exposed from `matrix-js-sdk`, then the sdk is your model. If you're using something more high level in element-web to get your data/logic (eg: `MemberListStore`), then that becomes your model.
+
+#### View Model
+
+1. View model is always a custom react hook named like `useFooViewModel()`.
+2. The return type of your view model (known as view state) must be defined as a typescript interface:
+    ```ts
+    inteface FooViewState {
+    	somethingUseful: string;
+    	somethingElse: BarType;
+    	update: () => Promise<void>
+    	...
+    }
+    ```
+3. Any react state that your UI needs must be in the view model.
+
+#### View
+
+1. Views are simple react components (eg: `FooView`).
+2. Views usually start by calling the view model hook, eg:
+    ```tsx
+    const FooView: React.FC<IProps> = (props: IProps) => {
+    	const vm = useFooViewModel();
+    	....
+    	return(
+    		<div>
+    			{vm.somethingUseful}
+    		</div>
+    	);
+    }
+    ```
+3. Views are also allowed to accept the view model as a prop, eg:
+    ```tsx
+    const FooView: React.FC<IProps> = ({ vm }: IProps) => {
+    	....
+    	return(
+    		<div>
+    			{vm.somethingUseful}
+    		</div>
+    	);
+    }
+    ```
+4. Multiple views can share the same view model if necessary.
+
+### Benefits
+
+1. MVVM forces a separation of concern i.e we will no longer have large react components that have a lot of state and rendering code mixed together. This improves code readability and makes it easier to introduce changes.
+2. Introduces the possibility of code reuse. You can reuse an old view model with a new view or vice versa.
+3. Adding to the point above, in future you could import element-web view models to your project and supply your own views thus creating something similar to the [hydrogen sdk](https://github.com/element-hq/hydrogen-web/blob/master/doc/SDK.md).
+
+### Example
+
+We started experimenting with MVVM in the redesigned memberlist, you can see the code [here](https://github.com/vector-im/element-web/blob/develop/src/components/views/rooms/MemberList/MemberListView.tsx).

docs/config.md

@@ -163,14 +163,14 @@ These two options describe the various availability for the application. When th
 such as trying to get the user to use an Android app or the desktop app for encrypted search, the config options will be looked
 at to see if the link should be to somewhere else.
 
-Starting with `desktop_builds`, the following subproperties are available:
+Starting with `desktop_builds`, the following sub-properties are available:
 
 1. `available`: Required. When `true`, the desktop app can be downloaded from somewhere.
 2. `logo`: Required. A URL to a logo (SVG), intended to be shown at 24x24 pixels.
 3. `url`: Required. The download URL for the app. This is used as a hyperlink.
 4. `url_macos`: Optional. Direct link to download macOS desktop app.
-5. `url_win32`: Optional. Direct link to download Windows 32-bit desktop app.
-6. `url_win64`: Optional. Direct link to download Windows 64-bit desktop app.
+5. `url_win64`: Optional. Direct link to download Windows x86 64-bit desktop app.
+6. `url_win64arm`: Optional. Direct link to download Windows ARM 64-bit desktop app.
 7. `url_linux`: Optional. Direct link to download Linux desktop app.
 
 When `desktop_builds` is not specified at all, the app will assume desktop downloads are available from https://element.io

package.json

@@ -74,7 +74,7 @@
         "@types/react-dom": "18.3.5",
         "oidc-client-ts": "3.1.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001697",
+        "caniuse-lite": "1.0.30001699",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
@@ -88,11 +88,11 @@
         "@matrix-org/emojibase-bindings": "^1.3.4",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
-        "@sentry/browser": "^8.0.0",
+        "@sentry/browser": "^9.0.0",
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
-        "@vector-im/compound-design-tokens": "^3.0.0",
-        "@vector-im/compound-web": "^7.6.1",
+        "@vector-im/compound-design-tokens": "^4.0.0",
+        "@vector-im/compound-web": "^7.6.4",
         "@vector-im/matrix-wysiwyg": "2.38.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
@@ -128,7 +128,7 @@
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "37.0.0",
+        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
         "matrix-widget-api": "^1.10.0",
         "memoize-one": "^6.0.0",
         "mime": "^4.0.4",
@@ -274,7 +274,7 @@
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.4.2",
+        "prettier": "3.5.1",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",

playwright/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.49.1-noble
+FROM mcr.microsoft.com/playwright:v1.50.1-noble
 
 WORKDIR /work
 

playwright/e2e/crypto/dehydration.spec.ts

@@ -116,6 +116,40 @@ test.describe("Dehydration", () => {
         expect(dehydratedDeviceIds.length).toBe(1);
         expect(dehydratedDeviceIds[0]).not.toEqual(initialDehydratedDeviceIds[0]);
     });
+
+    test("'Reset cryptographic identity' removes dehydrated device", async ({ page, homeserver, app, credentials }) => {
+        await logIntoElement(page, credentials);
+
+        // Create a dehydrated device by setting up recovery (see "'Set up
+        // recovery' creates dehydrated device" test above)
+        const settingsDialogLocator = await app.settings.openUserSettings("Encryption");
+        await settingsDialogLocator.getByRole("button", { name: "Set up recovery" }).click();
+
+        // First it displays an informative panel about the recovery key
+        await expect(settingsDialogLocator.getByRole("heading", { name: "Set up recovery" })).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        // Next, it displays the new recovery key. We click on the copy button.
+        await expect(settingsDialogLocator.getByText("Save your recovery key somewhere safe")).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Copy" }).click();
+        const recoveryKey = await app.getClipboard();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        await expect(
+            settingsDialogLocator.getByText("Enter your recovery key to confirm", { exact: true }),
+        ).toBeVisible();
+        await settingsDialogLocator.getByRole("textbox").fill(recoveryKey);
+        await settingsDialogLocator.getByRole("button", { name: "Finish set up" }).click();
+
+        await expectDehydratedDeviceEnabled(app);
+
+        // After recovery is set up, we reset our cryptographic identity, which
+        // should drop the dehydrated device.
+        await settingsDialogLocator.getByRole("button", { name: "Reset cryptographic identity" }).click();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        await expectDehydratedDeviceDisabled(app);
+    });
 });
 
 async function getDehydratedDeviceIds(client: Client): Promise<string[]> {
@@ -144,3 +178,16 @@ async function expectDehydratedDeviceEnabled(app: ElementAppPage): Promise<void>
         })
         .toEqual(1);
 }
+
+/** Wait for our user to not have a dehydrated device */
+async function expectDehydratedDeviceDisabled(app: ElementAppPage): Promise<void> {
+    // It might be nice to do this via the UI, but currently this info is not exposed via the UI.
+    //
+    // Note we might have to wait for the device list to be refreshed, so we wrap in `expect.poll`.
+    await expect
+        .poll(async () => {
+            const dehydratedDeviceIds = await getDehydratedDeviceIds(app.client);
+            return dehydratedDeviceIds.length;
+        })
+        .toEqual(0);
+}

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

@@ -21,6 +21,7 @@ import {
     waitForVerificationRequest,
 } from "./utils";
 import { type Bot } from "../../pages/bot";
+import { Toasts } from "../../pages/toasts.ts";
 
 test.describe("Device verification", { tag: "@no-webkit" }, () => {
     let aliceBotClient: Bot;
@@ -72,6 +73,51 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false);
     });
 
+    // Regression test for https://github.com/element-hq/element-web/issues/29110
+    test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => {
+        // Before we log in, the bot creates an encrypted room, so that we can test the toast behaviour that only happens
+        // when we are in an encrypted room.
+        await aliceBotClient.createRoom({
+            initial_state: [
+                {
+                    type: "m.room.encryption",
+                    state_key: "",
+                    content: { algorithm: "m.megolm.v1.aes-sha2" },
+                },
+            ],
+        });
+
+        // In order to simulate a real environment more accurately, we need to slow down the arrival of the
+        // `m.secret.send` to-device messages. That's slightly tricky to do directly, so instead we delay the *outgoing*
+        // `m.secret.request` messages.
+        await page.route("**/_matrix/client/v3/sendToDevice/m.secret.request/**", async (route) => {
+            await route.fulfill({ json: {} });
+            await new Promise((f) => setTimeout(f, 1000));
+            await route.fetch();
+        });
+
+        await logIntoElement(page, credentials);
+
+        // Launch the verification request between alice and the bot
+        const verificationRequest = await initiateAliceVerificationRequest(page);
+
+        // Handle emoji SAS verification
+        const infoDialog = page.locator(".mx_InfoDialog");
+        // the bot chooses to do an emoji verification
+        const verifier = await verificationRequest.evaluateHandle((request) => request.startVerification("m.sas.v1"));
+
+        // Handle emoji request and check that emojis are matching
+        await doTwoWaySasVerification(page, verifier);
+
+        await infoDialog.getByRole("button", { name: "They match" }).click();
+        await infoDialog.getByRole("button", { name: "Got it" }).click();
+
+        // There should be no toast (other than the notifications one)
+        const toasts = new Toasts(page);
+        await toasts.rejectToast("Notifications");
+        await toasts.assertNoToasts();
+    });
+
     test("Verify device with QR code during login", async ({ page, app, credentials, homeserver }) => {
         // A mode 0x02 verification: "self-verifying in which the current device does not yet trust the master key"
         await logIntoElement(page, credentials);

playwright/e2e/forgot-password/forgot-password.spec.ts

@@ -6,22 +6,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { expect, test as base } from "../../element-web-test";
+import { type CredentialsWithDisplayName, expect, test as base } from "../../element-web-test";
 import { selectHomeserver } from "../utils";
 import { emailHomeserver } from "../../plugins/homeserver/synapse/emailHomeserver.ts";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { type Credentials } from "../../plugins/homeserver";
 
 const email = "user@nowhere.dummy";
 
-const test = base.extend<{ credentials: Pick<Credentials, "username" | "password"> }>({
+const test = base.extend({
     // eslint-disable-next-line no-empty-pattern
     credentials: async ({}, use, testInfo) => {
         await use({
             username: `user_${testInfo.testId}`,
             // this has to be password-like enough to please zxcvbn. Needless to say it's just from pwgen.
             password: "oETo7MPf0o",
-        });
+        } as CredentialsWithDisplayName);
     },
 });
 

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

@@ -0,0 +1,87 @@
+/*
+ * 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 type { Page } from "@playwright/test";
+
+test.describe("Header section of the room list", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the header section of the room list
+     * @param page
+     */
+    function getHeaderSection(page: Page) {
+        return page.getByTestId("room-list-header");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("should render the header section", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListHeader = getHeaderSection(page);
+        await expect(roomListHeader).toMatchScreenshot("room-list-header.png");
+
+        const composeMenu = roomListHeader.getByRole("button", { name: "Add" });
+        await composeMenu.click();
+
+        await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-compose-menu.png");
+
+        // New message should open the direct messages dialog
+        await page.getByRole("menuitem", { name: "New message" }).click();
+        await expect(page.getByRole("heading", { name: "Direct Messages" })).toBeVisible();
+        await app.closeDialog();
+
+        // New room should open the room creation dialog
+        await composeMenu.click();
+        await page.getByRole("menuitem", { name: "New room" }).click();
+        await expect(page.getByRole("heading", { name: "Create a private room" })).toBeVisible();
+        await app.closeDialog();
+    });
+
+    test("should render the header section for a space", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        await app.client.createSpace({ name: "MySpace" });
+        await page.getByRole("button", { name: "MySpace" }).click();
+
+        const roomListHeader = getHeaderSection(page);
+        await expect(roomListHeader).toMatchScreenshot("room-list-space-header.png");
+
+        await expect(roomListHeader.getByRole("heading", { name: "MySpace" })).toBeVisible();
+        await expect(roomListHeader.getByRole("button", { name: "Add" })).toBeVisible();
+
+        const spaceMenu = roomListHeader.getByRole("button", { name: "Open space menu" });
+        await spaceMenu.click();
+
+        await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-space-menu.png");
+
+        // It should open the space home
+        await page.getByRole("menuitem", { name: "Space home" }).click();
+        await expect(page.getByRole("main").getByRole("heading", { name: "MySpace" })).toBeVisible();
+
+        // It should open the invite dialog
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Invite" }).click();
+        await expect(page.getByRole("heading", { name: "Invite to MySpace" })).toBeVisible();
+        await app.closeDialog();
+
+        // It should open the space preferences
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Preferences" }).click();
+        await expect(page.getByRole("heading", { name: "Preferences" })).toBeVisible();
+        await app.closeDialog();
+
+        // It should open the space settings
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Space Settings" }).click();
+        await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
+        await app.closeDialog();
+    });
+});

playwright/e2e/room/room-header.spec.ts

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Page } from "@playwright/test";
+import { type Visibility } from "matrix-js-sdk/src/matrix";
 
 import { test, expect } from "../../element-web-test";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
@@ -85,6 +86,15 @@ test.describe("Room Header", () => {
                 await expect(header).toMatchScreenshot("room-header-long-name.png");
             },
         );
+
+        test("should render room header icon correctly", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            await app.client.createRoom({ name: "Test Room", visibility: "public" as Visibility });
+            await app.viewRoomByName("Test Room");
+
+            const header = page.locator(".mx_RoomHeader");
+
+            await expect(header).toMatchScreenshot("room-header-with-icon.png");
+        });
     });
 
     test.describe("with a video room", () => {

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

@@ -50,8 +50,8 @@ test.describe("Appearance user settings tab", () => {
         // Click "Show advanced" link button
         await tab.getByRole("button", { name: "Show advanced" }).click();
 
-        await tab.locator(".mx_Checkbox", { hasText: "Use bundled emoji font" }).click();
-        await tab.locator(".mx_Checkbox", { hasText: "Use a system font" }).click();
+        await tab.getByRole("switch", { name: "Use bundled emoji font" }).click();
+        await tab.getByRole("switch", { name: "Use a system font" }).click();
 
         // Assert that the font-family value was removed
         await expect(page.locator("body")).toHaveCSS("font-family", '""');

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

@@ -32,7 +32,7 @@ test.describe("Security user settings tab", () => {
         });
 
         test.describe("AnalyticsLearnMoreDialog", () => {
-            test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page }) => {
+            test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => {
                 const tab = await app.settings.openUserSettings("Security");
                 await tab.getByRole("button", { name: "Learn more" }).click();
                 await expect(page.locator(".mx_AnalyticsLearnMoreDialog_wrapper .mx_Dialog")).toMatchScreenshot(
@@ -41,16 +41,57 @@ test.describe("Security user settings tab", () => {
             });
         });
 
-        test("should contain section to set ID server", async ({ app }) => {
+        test("should be able to set an ID server", async ({ app, context, user, page }) => {
             const tab = await app.settings.openUserSettings("Security");
 
-            const setIdServer = tab.locator(".mx_SetIdServer");
+            await context.route("https://identity.example.org/_matrix/identity/v2", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {},
+                });
+            });
+            await context.route("https://identity.example.org/_matrix/identity/v2/account/register", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {
+                        token: "AToken",
+                    },
+                });
+            });
+            await context.route("https://identity.example.org/_matrix/identity/v2/account", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {
+                        user_id: user.userId,
+                    },
+                });
+            });
+            await context.route("https://identity.example.org/_matrix/identity/v2/terms", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {
+                        policies: {},
+                    },
+                });
+            });
+            const setIdServer = tab.locator(".mx_IdentityServerPicker");
             await setIdServer.scrollIntoViewIfNeeded();
-            // Assert that an input area for identity server exists
-            await expect(setIdServer.getByRole("textbox", { name: "Enter a new identity server" })).toBeVisible();
+
+            const textElement = setIdServer.getByRole("textbox", { name: "Enter a new identity server" });
+            await textElement.click();
+            await textElement.fill("https://identity.example.org");
+            await setIdServer.getByRole("button", { name: "Change" }).click();
+
+            await expect(setIdServer.getByText("Checking server")).toBeVisible();
+            // Accept terms
+            await page.getByTestId("dialog-primary-button").click();
+            // Check identity has changed.
+            await expect(setIdServer.getByText("Your identity server has been changed")).toBeVisible();
+            // Ensure section title is updated.
+            await expect(tab.getByText(`Identity server (identity.example.org)`, { exact: true })).toBeVisible();
         });
 
-        test("should enable show integrations as enabled", async ({ app, page }) => {
+        test("should enable show integrations as enabled", async ({ app, page, user }) => {
             const tab = await app.settings.openUserSettings("Security");
 
             const setIntegrationManager = tab.locator(".mx_SetIntegrationManager");

playwright/testcontainers/synapse.ts

@@ -25,7 +25,7 @@ import { type HomeserverContainer, type StartedHomeserverContainer } from "./Hom
 import { type StartedMatrixAuthenticationServiceContainer } from "./mas.ts";
 import { Api, ClientServerApi, type Verb } from "../plugins/utils/api.ts";
 
-const TAG = "develop@sha256:32ee365ad97dde86033e8a33e143048167271299e4c727413f3cdff48c65f8d9";
+const TAG = "develop@sha256:8d1c531cf6010b63142a04e1b138a60720946fa131ad404813232f02db4ce7ba";
 
 const DEFAULT_CONFIG = {
     server_name: "localhost",

res/css/_common.pcss

@@ -589,18 +589,21 @@ legend {
  * in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
  * We should go through and have one consistent set of styles for buttons throughout the app.
  * For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
- *
- * Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
- * For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
  */
 .mx_Dialog
-    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
-        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
-        .mx_EncryptionUserSettingsTab button
+    button:not(
+        .mx_EncryptionUserSettingsTab button,
+        .mx_UserProfileSettings button,
+        .mx_ShareDialog button,
+        .mx_UnpinAllDialog button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_Dialog_nonDialogButton,
+        .mx_AccessibleButton,
+        .mx_IdentityServerPicker button,
+        [class|="maplibregl"]
     ),
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),
 .mx_Dialog input[type="submit"],
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
     @mixin mx_DialogButton;
     margin-left: 0px;
@@ -616,32 +619,46 @@ legend {
 }
 
 .mx_Dialog
-    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
-        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+    button:not(
+        .mx_Dialog_nonDialogButton,
+        [class|="maplibregl"],
+        .mx_AccessibleButton,
+        .mx_UserProfileSettings button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_UnpinAllDialog button,
+        .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button
     ):last-child {
     margin-right: 0px;
 }
 
 .mx_Dialog
-    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
-        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+    button:not(
+        .mx_Dialog_nonDialogButton,
+        [class|="maplibregl"],
+        .mx_AccessibleButton,
+        .mx_UserProfileSettings button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_UnpinAllDialog button,
+        .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button
     ):focus,
 .mx_Dialog input[type="submit"]:focus,
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
     filter: brightness($focus-brightness);
 }
 
-.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
+.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
 .mx_Dialog input[type="submit"].mx_Dialog_primary,
 .mx_Dialog_buttons
-    button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
-        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+    button:not(
+        .mx_Dialog_nonDialogButton,
+        .mx_AccessibleButton,
+        .mx_UserProfileSettings button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_UnpinAllDialog button,
+        .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button
     ),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
@@ -651,32 +668,43 @@ legend {
     min-width: 156px;
 }
 
-.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
+.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
 .mx_Dialog input[type="submit"].danger,
 .mx_Dialog_buttons
-    button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
-        .mx_ThemeChoicePanel_CustomTheme button
-    ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(.mx_EncryptionUserSettingsTab button),
+    button.danger:not(
+        .mx_Dialog_nonDialogButton,
+        .mx_AccessibleButton,
+        .mx_UserProfileSettings button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_UnpinAllDialog button,
+        .mx_ShareDialog button,
+        .mx_EncryptionUserSettingsTab button
+    ),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
     border: solid 1px var(--cpd-color-bg-critical-primary);
     color: var(--cpd-color-text-on-solid-primary);
 }
 
-.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
+.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
 .mx_Dialog input[type="submit"].warning {
     border: solid 1px var(--cpd-color-border-critical-subtle);
     color: var(--cpd-color-text-critical-primary);
 }
 
 .mx_Dialog
-    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
-        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+    button:not(
+        .mx_Dialog_nonDialogButton,
+        [class|="maplibregl"],
+        .mx_AccessibleButton,
+        .mx_UserProfileSettings button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_UnpinAllDialog button,
+        .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button
     ):disabled,
 .mx_Dialog input[type="submit"]:disabled,
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {
     background-color: $light-fg-color;
     border: solid 1px $light-fg-color;

res/css/_components.pcss

@@ -269,6 +269,7 @@
 @import "./views/right_panel/_VerificationPanel.pcss";
 @import "./views/right_panel/_WidgetCard.pcss";
 @import "./views/room_settings/_AliasSettings.pcss";
+@import "./views/rooms/RoomListView/_RoomListHeaderView.pcss";
 @import "./views/rooms/RoomListView/_RoomListSearch.pcss";
 @import "./views/rooms/RoomListView/_RoomListView.pcss";
 @import "./views/rooms/_AppsDrawer.pcss";
@@ -288,6 +289,7 @@
 @import "./views/rooms/_IRCLayout.pcss";
 @import "./views/rooms/_InvitedIconView.pcss";
 @import "./views/rooms/_JumpToBottomButton.pcss";
+@import "./views/rooms/_LegacyRoomListHeader.pcss";
 @import "./views/rooms/_LinkPreviewGroup.pcss";
 @import "./views/rooms/_LinkPreviewWidget.pcss";
 @import "./views/rooms/_LiveContentSummary.pcss";
@@ -312,7 +314,6 @@
 @import "./views/rooms/_RoomInfoLine.pcss";
 @import "./views/rooms/_RoomKnocksBar.pcss";
 @import "./views/rooms/_RoomList.pcss";
-@import "./views/rooms/_RoomListHeader.pcss";
 @import "./views/rooms/_RoomPreviewBar.pcss";
 @import "./views/rooms/_RoomPreviewCard.pcss";
 @import "./views/rooms/_RoomSearchAuxPanel.pcss";
@@ -348,7 +349,6 @@
 @import "./views/settings/_PowerLevelSelector.pcss";
 @import "./views/settings/_RoomProfileSettings.pcss";
 @import "./views/settings/_SecureBackupPanel.pcss";
-@import "./views/settings/_SetIdServer.pcss";
 @import "./views/settings/_SetIntegrationManager.pcss";
 @import "./views/settings/_SettingsFieldset.pcss";
 @import "./views/settings/_SettingsHeader.pcss";
@@ -360,8 +360,8 @@
 @import "./views/settings/encryption/_AdvancedPanel.pcss";
 @import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
 @import "./views/settings/encryption/_EncryptionCard.pcss";
+@import "./views/settings/encryption/_EncryptionCardEmphasisedContent.pcss";
 @import "./views/settings/encryption/_RecoveryPanelOutOfSync.pcss";
-@import "./views/settings/encryption/_ResetIdentityPanel.pcss";
 @import "./views/settings/tabs/_SettingsBanner.pcss";
 @import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";

res/css/structures/ErrorView.pcss

@@ -10,8 +10,9 @@ Please see LICENSE files in the repository root for full details.
     --cpd-separator-inset: calc(50% - (var(--width) / 2));
     --cpd-separator-spacing: var(--cpd-space-8x);
 
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+        "Segoe UI Emoji", "Segoe UI Symbol";
     text-align: center;
     color: var(--cpd-color-text-primary);
     width: 100%;

res/css/structures/_LeftPanel.pcss

@@ -113,7 +113,7 @@ Please see LICENSE files in the repository root for full details.
             display: flex;
             align-items: center;
 
-            & + .mx_RoomListHeader {
+            & + .mx_LegacyRoomListHeader {
                 margin-top: 12px;
             }
 
@@ -180,7 +180,7 @@ Please see LICENSE files in the repository root for full details.
             }
         }
 
-        .mx_RoomListHeader:first-child {
+        .mx_LegacyRoomListHeader:first-child {
             margin-top: 12px;
         }
 

res/css/structures/_SpaceHierarchy.pcss

@@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details.
             height: 16px;
             width: 16px;
             left: 0;
-            background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
             background-size: cover;
             background-repeat: no-repeat;
         }

res/css/structures/_SpacePanel.pcss

@@ -365,7 +365,8 @@ Please see LICENSE files in the repository root for full details.
                Note the top fade is much smaller because the spaces start close to the top,
                so otherwise a large gradient suddenly appears when you scroll down.
              */
-            mask-image: linear-gradient(to bottom, transparent, black 16px),
+            mask-image:
+                linear-gradient(to bottom, transparent, black 16px),
                 linear-gradient(
                     to top,
                     transparent,

res/css/structures/_SplashPage.pcss

@@ -16,7 +16,8 @@ Please see LICENSE files in the repository root for full details.
         position: absolute;
         z-index: -1;
         opacity: 0.6;
-        background-image: radial-gradient(
+        background-image:
+            radial-gradient(
                 53.85% 66.75% at 87.55% 0%,
                 hsla(250deg, 76%, 71%, 0.261) 0%,
                 hsla(250deg, 100%, 88%, 0) 100%

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReport::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
     }
 
     .mx_MessageContextMenu_iconLink::before {

res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
 
         &.mx_AccessSecretStorageDialog_resetBadge::before {
             /* The image isn't capable of masking, so we use a background instead. */
-            background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
             background-size: 24px;
             background-color: transparent;
         }
@@ -120,7 +120,7 @@ Please see LICENSE files in the repository root for full details.
                         width: 16px;
                         left: 0;
                         top: 2px; /* alignment */
-                        background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+                        background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
                         background-size: contain;
                     }
 

res/css/views/elements/_InfoTooltip.pcss

@@ -29,5 +29,5 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_InfoTooltip_icon_warning::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
 }

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

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+.mx_RoomListHeaderView {
+    height: 60px;
+    padding: 0 var(--cpd-space-3x);
+
+    h1 {
+        all: unset;
+        font: var(--cpd-font-heading-sm-semibold);
+    }
+
+    button {
+        color: var(--cpd-color-icon-secondary);
+    }
+
+    .mx_SpaceMenu_button {
+        svg {
+            transition: transform 0.1s linear;
+        }
+    }
+
+    .mx_SpaceMenu_button[aria-expanded="true"] {
+        svg {
+            transform: rotate(180deg);
+        }
+    }
+}

res/css/views/rooms/RoomListView/_RoomListSearch.pcss

@@ -9,7 +9,7 @@
     /* From figma, this should be aligned with the room header */
     height: 64px;
     box-sizing: border-box;
-    border-bottom: 1px solid var(--cpd-color-bg-subtle-primary);
+    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary);
     padding: 0 var(--cpd-space-3x);
 
     svg {
@@ -31,7 +31,7 @@
         }
     }
 
-    .mx_RoomListSearch_explore:hover {
+    .mx_RoomListSearch_button:hover {
         svg {
             fill: var(--cpd-color-icon-primary);
         }

res/css/views/rooms/_LegacyRoomListHeader.pcss

@@ -6,12 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_RoomListHeader {
+.mx_LegacyRoomListHeader {
     display: flex;
     align-items: center;
 
-    .mx_RoomListHeader_contextLessTitle,
-    .mx_RoomListHeader_contextMenuButton {
+    .mx_LegacyRoomListHeader_contextLessTitle,
+    .mx_LegacyRoomListHeader_contextMenuButton {
         font: var(--cpd-font-heading-sm-semibold);
         font-weight: var(--cpd-font-weight-semibold);
         padding: 1px 24px 1px 4px;
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
         user-select: none;
     }
 
-    .mx_RoomListHeader_contextMenuButton {
+    .mx_LegacyRoomListHeader_contextMenuButton {
         border-radius: 6px;
 
         &:hover {
@@ -54,7 +54,7 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    .mx_RoomListHeader_plusButton {
+    .mx_LegacyRoomListHeader_plusButton {
         width: 32px;
         height: 32px;
         border-radius: 8px;
@@ -88,21 +88,21 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_RoomListHeader_iconInvite::before {
+.mx_LegacyRoomListHeader_iconInvite::before {
     mask-image: url("$(res)/img/element-icons/room/invite.svg");
 }
-.mx_RoomListHeader_iconStartChat::before {
+.mx_LegacyRoomListHeader_iconStartChat::before {
     mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
 }
-.mx_RoomListHeader_iconNewRoom::before {
+.mx_LegacyRoomListHeader_iconNewRoom::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");
 }
-.mx_RoomListHeader_iconNewVideoRoom::before {
+.mx_LegacyRoomListHeader_iconNewVideoRoom::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-video.svg");
 }
-.mx_RoomListHeader_iconExplore::before {
+.mx_LegacyRoomListHeader_iconExplore::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
 }
-.mx_RoomListHeader_iconPlus::before {
+.mx_LegacyRoomListHeader_iconPlus::before {
     mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
 }

res/css/views/rooms/_RoomHeader.pcss

@@ -59,6 +59,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_RoomHeader_icon {
     flex-shrink: 0;
+    padding: var(--cpd-space-1x);
 }
 
 .mx_RoomHeader .mx_FacePile {

res/css/views/settings/_SetIdServer.pcss

@@ -1,23 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019-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.
-*/
-
-.mx_SetIdServer {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: $spacing-8;
-
-    .mx_Field {
-        width: 100%;
-        margin: 0;
-    }
-}
-
-.mx_SetIdServer_tooltip {
-    max-width: var(--SettingsTab_tooltip-max-width);
-}

res/css/views/settings/encryption/_EncryptionCardEmphasisedContent.pcss

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2024 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.
+ */
+
+.mx_EncryptionCard_emphasisedContent {
+    span {
+        font: var(--cpd-font-body-md-medium);
+        text-align: center;
+    }
+}

res/css/views/settings/encryption/_ResetIdentityPanel.pcss

@@ -1,19 +0,0 @@
-/*
- * Copyright 2024 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.
- */
-
-.mx_ResetIdentityPanel {
-    .mx_ResetIdentityPanel_content {
-        display: flex;
-        flex-direction: column;
-        gap: var(--cpd-space-3x);
-
-        > span {
-            font: var(--cpd-font-body-md-medium);
-            text-align: center;
-        }
-    }
-}

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss

@@ -8,6 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
     width: 256px;
-    /* matches checkbox box + padding to align with checkbox label */
-    margin-inline-start: calc($font-16px + 10px);
+    /* Line up with Settings field toggle button */
+    margin-inline-start: 0;
 }

res/themes/dark/css/_dark.pcss

@@ -309,11 +309,8 @@ body {
 
 /* Splash Page Gradient */
 .mx_SplashPage::before {
-    background-image: radial-gradient(
-            53.85% 66.75% at 87.55% 0%,
-            hsla(0deg, 0%, 11%, 0.15) 0%,
-            hsla(250deg, 100%, 88%, 0) 100%
-        ),
+    background-image:
+        radial-gradient(53.85% 66.75% at 87.55% 0%, hsla(0deg, 0%, 11%, 0.15) 0%, hsla(250deg, 100%, 88%, 0) 100%),
         radial-gradient(41.93% 41.93% at 0% 0%, hsla(0deg, 0%, 38%, 0.28) 0%, hsla(250deg, 100%, 88%, 0) 100%),
         radial-gradient(100% 100% at 0% 0%, hsla(250deg, 100%, 88%, 0.3) 0%, hsla(0deg, 100%, 86%, 0) 100%),
         radial-gradient(106.35% 96.26% at 100% 0%, hsla(25deg, 100%, 88%, 0.4) 0%, hsla(167deg, 76%, 82%, 0) 100%) !important;

res/themes/legacy-light/css/_legacy-light.pcss

@@ -10,11 +10,13 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: "Nunito", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica",
-    sans-serif, "Noto Color Emoji";
+$font-family:
+    "Nunito", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
+    "Noto Color Emoji";
 
-$monospace-font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier",
-    monospace, "Noto Color Emoji";
+$monospace-font-family:
+    "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
+    "Noto Color Emoji";
 
 /* unified palette */
 /* try to use these colors when possible */

res/themes/light/css/_light.pcss

@@ -10,11 +10,13 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: "Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica",
-    sans-serif, "Noto Color Emoji";
+$font-family:
+    "Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
+    "Noto Color Emoji";
 
-$monospace-font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier",
-    monospace, "Noto Color Emoji";
+$monospace-font-family:
+    "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
+    "Noto Color Emoji";
 
 /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */
 /* ******************** */

src/DeviceListener.ts

@@ -15,9 +15,10 @@ import {
     type SyncState,
     ClientStoppedError,
 } from "matrix-js-sdk/src/matrix";
-import { logger as baseLogger } from "matrix-js-sdk/src/logger";
+import { logger as baseLogger, LogSpan } from "matrix-js-sdk/src/logger";
 import { CryptoEvent, type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
 import { type CryptoSessionStateChange } from "@matrix-org/analytics-events/types/typescript/CryptoSessionStateChange";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 
 import { PosthogAnalytics } from "./PosthogAnalytics";
 import dis from "./dispatcher/dispatcher";
@@ -48,6 +49,11 @@ import { asyncSomeParallel } from "./utils/arrays.ts";
 
 const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
 
+// Unfortunately named account data key used by Element X to indicate that the user
+// has chosen to disable server side key backups. We need to set and honour this
+// to prevent Element X from automatically turning key backup back on.
+const BACKUP_DISABLED_ACCOUNT_DATA_KEY = "m.org.matrix.custom.backup_disabled";
+
 const logger = baseLogger.getChild("DeviceListener:");
 
 export default class DeviceListener {
@@ -91,6 +97,7 @@ export default class DeviceListener {
         this.client.on(ClientEvent.AccountData, this.onAccountData);
         this.client.on(ClientEvent.Sync, this.onSync);
         this.client.on(RoomStateEvent.Events, this.onRoomStateEvents);
+        this.client.on(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
         this.shouldRecordClientInformation = SettingsStore.getValue("deviceClientInformationOptIn");
         // only configurable in config, so we don't need to watch the value
         this.enableBulkUnverifiedSessionsReminder = SettingsStore.getValue(UIFeature.BulkUnverifiedSessionsReminder);
@@ -113,6 +120,7 @@ export default class DeviceListener {
             this.client.removeListener(ClientEvent.AccountData, this.onAccountData);
             this.client.removeListener(ClientEvent.Sync, this.onSync);
             this.client.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
+            this.client.removeListener(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
         }
         SettingsStore.unwatchSetting(this.deviceClientInformationSettingWatcherRef);
         dis.unregister(this.dispatcherRef);
@@ -220,6 +228,11 @@ export default class DeviceListener {
         this.updateClientInformation();
     };
 
+    private onToDeviceEvent = (event: MatrixEvent): void => {
+        // Receiving a 4S secret can mean we are in sync where we were not before.
+        if (event.getType() === EventType.SecretSend) this.recheck();
+    };
+
     /**
      * Fetch the key backup information from the server.
      *
@@ -268,18 +281,29 @@ export default class DeviceListener {
 
     private async doRecheck(): Promise<void> {
         if (!this.running || !this.client) return; // we have been stopped
+        const logSpan = new LogSpan(logger, "check_" + secureRandomString(4));
+
         const cli = this.client;
 
         // cross-signing support was added to Matrix in MSC1756, which landed in spec v1.1
-        if (!(await cli.isVersionSupported("v1.1"))) return;
+        if (!(await cli.isVersionSupported("v1.1"))) {
+            logSpan.debug("cross-signing not supported");
+            return;
+        }
 
         const crypto = cli.getCrypto();
-        if (!crypto) return;
+        if (!crypto) {
+            logSpan.debug("crypto not enabled");
+            return;
+        }
 
         // don't recheck until the initial sync is complete: lots of account data events will fire
         // while the initial sync is processing and we don't need to recheck on each one of them
         // (we add a listener on sync to do once check after the initial sync is done)
-        if (!cli.isInitialSyncComplete()) return;
+        if (!cli.isInitialSyncComplete()) {
+            logSpan.debug("initial sync not yet complete");
+            return;
+        }
 
         const crossSigningReady = await crypto.isCrossSigningReady();
         const secretStorageReady = await crypto.isSecretStorageReady();
@@ -301,6 +325,7 @@ export default class DeviceListener {
         await this.reportCryptoSessionStateToAnalytics(cli);
 
         if (this.dismissedThisDeviceToast || allSystemsReady) {
+            logSpan.info("No toast needed");
             hideSetupEncryptionToast();
 
             this.checkKeyBackupStatus();
@@ -311,25 +336,33 @@ export default class DeviceListener {
             if (!crossSigningReady) {
                 // This account is legacy and doesn't have cross-signing set up at all.
                 // Prompt the user to set it up.
-                logger.info("Cross-signing not ready: showing SET_UP_ENCRYPTION toast");
+                logSpan.info("Cross-signing not ready: showing SET_UP_ENCRYPTION toast");
                 showSetupEncryptionToast(SetupKind.SET_UP_ENCRYPTION);
             } else if (!isCurrentDeviceTrusted) {
                 // cross signing is ready but the current device is not trusted: prompt the user to verify
-                logger.info("Current device not verified: showing VERIFY_THIS_SESSION toast");
+                logSpan.info("Current device not verified: showing VERIFY_THIS_SESSION toast");
                 showSetupEncryptionToast(SetupKind.VERIFY_THIS_SESSION);
             } else if (!allCrossSigningSecretsCached) {
                 // cross signing ready & device trusted, but we are missing secrets from our local cache.
                 // prompt the user to enter their recovery key.
-                logger.info("Some secrets not cached: showing KEY_STORAGE_OUT_OF_SYNC toast");
+                logSpan.info(
+                    "Some secrets not cached: showing KEY_STORAGE_OUT_OF_SYNC toast",
+                    crossSigningStatus.privateKeysCachedLocally,
+                );
                 showSetupEncryptionToast(SetupKind.KEY_STORAGE_OUT_OF_SYNC);
             } else if (defaultKeyId === null) {
-                // the user just hasn't set up 4S yet: prompt them to do so
-                logger.info("No default 4S key: showing SET_UP_RECOVERY toast");
-                showSetupEncryptionToast(SetupKind.SET_UP_RECOVERY);
+                // the user just hasn't set up 4S yet: prompt them to do so (unless they've explicitly said no to key storage)
+                const disabledEvent = cli.getAccountData(BACKUP_DISABLED_ACCOUNT_DATA_KEY);
+                if (!disabledEvent?.getContent().disabled) {
+                    logSpan.info("No default 4S key: showing SET_UP_RECOVERY toast");
+                    showSetupEncryptionToast(SetupKind.SET_UP_RECOVERY);
+                } else {
+                    logSpan.info("No default 4S key but backup disabled: no toast needed");
+                }
             } else {
                 // some other condition... yikes! Show the 'set up encryption' toast: this is what we previously did
                 // in 'other' situations. Possibly we should consider prompting for a full reset in this case?
-                logger.warn("Couldn't match encryption state to a known case: showing 'setup encryption' prompt", {
+                logSpan.warn("Couldn't match encryption state to a known case: showing 'setup encryption' prompt", {
                     crossSigningReady,
                     secretStorageReady,
                     allCrossSigningSecretsCached,
@@ -338,6 +371,8 @@ export default class DeviceListener {
                 });
                 showSetupEncryptionToast(SetupKind.SET_UP_ENCRYPTION);
             }
+        } else {
+            logSpan.info("Not yet ready, but shouldShowSetupEncryptionToast==false");
         }
 
         // This needs to be done after awaiting on getUserDeviceInfo() above, so
@@ -370,9 +405,9 @@ export default class DeviceListener {
             }
         }
 
-        logger.debug("Old unverified sessions: " + Array.from(oldUnverifiedDeviceIds).join(","));
-        logger.debug("New unverified sessions: " + Array.from(newUnverifiedDeviceIds).join(","));
-        logger.debug("Currently showing toasts for: " + Array.from(this.displayingToastsForDeviceIds).join(","));
+        logSpan.debug("Old unverified sessions: " + Array.from(oldUnverifiedDeviceIds).join(","));
+        logSpan.debug("New unverified sessions: " + Array.from(newUnverifiedDeviceIds).join(","));
+        logSpan.debug("Currently showing toasts for: " + Array.from(this.displayingToastsForDeviceIds).join(","));
 
         const isBulkUnverifiedSessionsReminderSnoozed = isBulkUnverifiedDeviceReminderSnoozed();
 
@@ -397,7 +432,7 @@ export default class DeviceListener {
         // ...and hide any we don't need any more
         for (const deviceId of this.displayingToastsForDeviceIds) {
             if (!newUnverifiedDeviceIds.has(deviceId)) {
-                logger.debug("Hiding unverified session toast for " + deviceId);
+                logSpan.debug("Hiding unverified session toast for " + deviceId);
                 hideUnverifiedSessionsToast(deviceId);
             }
         }

src/IConfigOptions.ts

@@ -71,7 +71,7 @@ export interface IConfigOptions {
         url: string; // download url
         url_macos?: string;
         url_win64?: string;
-        url_win32?: string;
+        url_win64arm?: string;
         url_linux?: string;
     };
     mobile_builds: {

src/SdkConfig.ts

@@ -59,7 +59,7 @@ export const DEFAULTS: DeepReadonly<IConfigOptions> = {
         url: "https://element.io/download",
         url_macos: "https://packages.element.io/desktop/install/macos/Element.dmg",
         url_win64: "https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe",
-        url_win32: "https://packages.element.io/desktop/install/win32/ia32/Element%20Setup.exe",
+        url_win64arm: "https://packages.element.io/desktop/install/win32/arm64/Element%20Setup.exe",
         url_linux: "https://element.io/download#linux",
     },
     mobile_builds: {