Update settings toggles to use consistent design across app.

package.json

@@ -97,7 +97,7 @@
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^5.0.0",
-        "@vector-im/compound-web": "^8.1.2",
+        "@vector-im/compound-web": "^8.2.0",
         "@vector-im/matrix-wysiwyg": "2.38.4",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",

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("checkbox", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("switch", { 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("checkbox", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("switch", { 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("checkbox", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
     if (!(await keyStorageToggle.isChecked())) {
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("switch", { 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("checkbox", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
     if (await keyStorageToggle.isChecked()) {
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
         await encryptionTab.getByRole("button", { name: "Delete key storage" }).click();
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).isVisible();
+        await encryptionTab.getByRole("switch", { 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

@@ -0,0 +1,31 @@
+/*
+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 }) => {
+        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();
+
+        await expect(dialog).toMatchScreenshot("devtools-dialog.png", {
+            css: `.mx_CopyableText {
+                display: none;
+            }`,
+        });
+    });
+});

playwright/e2e/devtools/upgraderoom.spec.ts

@@ -0,0 +1,31 @@
+/*
+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 }) => {
+        // 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();
+        await expect(dialog).toMatchScreenshot("upgrade-room.png");
+    });
+});

playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts

@@ -0,0 +1,25 @@
+/*
+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 }) => {
+            await bot.createRoom({ name: "Test Room", invite: [user.userId] });
+            await app.viewRoomByName("Test Room");
+            await page.getByRole("button", { name: "Decline and block" }).click();
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("decline-and-block-invite-empty.png");
+        },
+    );
+});

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

@@ -1,3 +1,3 @@
 /*
  * Copyright 2025 New Vector Ltd.
  *
@@ -51,7 +51,7 @@
             // Scroll to the end of the room list
             await page.mouse.wheel(0, 1000);
             await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
             await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
         });
 
         test("should open the room when it is clicked", async ({ page, app, user }) => {
@@ -147,7 +147,7 @@
             await page.mouse.wheel(0, 1000);
 
             await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
             await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();
 
             const filters = page.getByRole("listbox", { name: "Room list filters" });
             await filters.getByRole("option", { name: "People" }).click();
@@ -402,7 +402,9 @@
             await app.settings.closeDialog();
 
             await app.settings.openUserSettings("Notifications");
-            await page.getByText("Show all activity in the room list (dots or number of unread messages)").click();
+            await page
+                .getByRole("switch", { name: "Show all activity in the room list (dots or number of unread messages)" })
+                .check();
             await app.settings.closeDialog();
 
             // Switch to the other room to avoid the notification to be cleared

playwright/e2e/location/location.spec.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 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,4 +57,20 @@ 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 }) => {
+            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();
+            await expect(menu).toMatchScreenshot("location-live-share-dialog.png");
+        },
+    );
 });

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

@@ -38,12 +38,11 @@ test.describe("Room Directory", () => {
             // Publish into the public rooms directory
             const publishedAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Published Addresses" });
             await expect(publishedAddresses.locator("#canonicalAlias")).toHaveValue(`#gaming:${user.homeServer}`);
-            const checkbox = publishedAddresses
-                .locator(".mx_SettingsFlag", {
-                    hasText: `Publish this room to the public in ${user.homeServer}'s room directory?`,
-                })
-                .getByRole("switch");
-            await checkbox.check();
+            const checkbox = publishedAddresses.getByRole("switch", {
+                name: `Publish this room to the public in ${user.homeServer}'s room directory?`,
+            });
+            // .click() rather than .check() as checking happens after publish
+            await checkbox.click();
             await expect(checkbox).toBeChecked();
 
             await app.closeDialog();

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

@@ -0,0 +1,64 @@
+/*
+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";
+
+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 }) => {
+            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");
+            // 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 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);
+    });
+});

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.getByLabel("Use bundled emoji font").click();
-        await tab.getByLabel("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/appearance-user-settings-tab/index.ts

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

playwright/e2e/settings/appearance-user-settings-tab/message-layout-panel.spec.ts

@@ -40,9 +40,9 @@ test.describe("Appearance user settings tab", () => {
         );
 
         test("should enable compact layout when the modern layout is selected", async ({ page, app, user, util }) => {
-            await expect(util.getCompactLayoutCheckbox()).not.toBeChecked();
+            await expect(util.getCompactLayoutSwitch()).not.toBeChecked();
 
-            await util.getCompactLayoutCheckbox().click();
+            await util.getCompactLayoutSwitch().click();
             await util.assertCompactLayout();
         });
 
@@ -52,11 +52,11 @@ test.describe("Appearance user settings tab", () => {
             user,
             util,
         }) => {
-            await expect(util.getCompactLayoutCheckbox()).not.toBeDisabled();
+            await expect(util.getCompactLayoutSwitch()).not.toBeDisabled();
 
             // Select the bubble layout, which should disable the compact layout checkbox
             await util.getBubbleLayout().click();
-            await expect(util.getCompactLayoutCheckbox()).toBeDisabled();
+            await expect(util.getCompactLayoutSwitch()).toBeDisabled();
         });
     });
 });

playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts

@@ -25,7 +25,7 @@ test.describe("Appearance user settings tab", () => {
             { tag: "@screenshot" },
             async ({ page, app, util }) => {
                 // Assert that 'Match system theme' is not checked
-                await expect(util.getMatchSystemThemeCheckbox()).not.toBeChecked();
+                await expect(util.getMatchSystemThemeSwitch()).not.toBeChecked();
 
                 // Assert that the light theme is selected
                 await expect(util.getLightTheme()).toBeChecked();
@@ -41,7 +41,7 @@ test.describe("Appearance user settings tab", () => {
             "should disable the themes when the system theme is clicked",
             { tag: "@screenshot" },
             async ({ page, app, util }) => {
-                await util.getMatchSystemThemeCheckbox().click();
+                await util.getMatchSystemThemeSwitch().click();
 
                 // Assert that the themes are disabled
                 await expect(util.getLightTheme()).toBeDisabled();

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("checkbox", { name: "Allow key storage" }).click();
+            await page.getByRole("switch", { 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("checkbox", { name: "Allow key storage" })).not.toBeChecked();
+            await expect(page.getByRole("switch", { name: "Allow key storage" })).not.toBeChecked();
 
             for (const prom of deleteRequestPromises) {
                 const request = await prom;