Revert mistaken s/checkbox/switch/

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>

README.md

@@ -27,7 +27,7 @@ Element has several tiers of support for different environments:
 - Best effort
     - Definition:
         - Issues **accepted**, regressions **do not block** the release
-        - The wider Element Products(including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
+        - The wider Element Products (including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
         - The element web project and its contributors should keep the client functioning and gracefully degrade where other sibling features (E.g. Element Call) may not function.
     - Last major release of Firefox ESR and Chrome/Edge Extended Stable
 - Community Supported

package.json

@@ -96,7 +96,6 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^6.0.0",
         "@vector-im/compound-web": "^8.1.2",
         "@vector-im/matrix-wysiwyg": "2.39.0",
@@ -153,8 +152,7 @@
         "react-focus-lock": "^2.5.1",
         "react-string-replace": "^1.1.1",
         "react-transition-group": "^4.4.1",
-        "react-virtualized": "^9.22.5",
-        "react-virtuoso": "^4.12.6",
+        "react-virtuoso": "^4.14.0",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
         "sanitize-html": "2.17.0",
@@ -307,7 +305,7 @@
         "terser-webpack-plugin": "^5.3.9",
         "testcontainers": "^11.0.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.9.2",
+        "typescript": "5.8.3",
         "util": "^0.12.5",
         "vite": "^7.0.1",
         "vite-plugin-node-polyfills": "^0.24.0",

patches/@matrix-org+react-sdk-module-api+2.5.0.patch

@@ -11,50 +11,3 @@ index 917a7fc..a2710c6 100644
          didOkOrSubmit: boolean;
          model: M;
      }>;
-diff --git a/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.d.ts b/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.d.ts
-index cb5f2e5..51daa51 100644
---- a/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.d.ts
-+++ b/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.d.ts
-@@ -66,23 +66,23 @@ export interface SetupEncryptionStoreProjection {
- export interface ProvideCryptoSetupExtensions {
-     examineLoginResponse(response: any, credentials: ExtendedMatrixClientCreds): void;
-     persistCredentials(credentials: ExtendedMatrixClientCreds): void;
--    getSecretStorageKey(): Uint8Array | null;
--    createSecretStorageKey(): Uint8Array | null;
-+    getSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-+    createSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-     catchAccessSecretStorageError(e: Error): void;
-     setupEncryptionNeeded: (args: CryptoSetupArgs) => boolean;
-     /** @deprecated This callback is no longer used by matrix-react-sdk */
--    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array) => void) => Promise<Uint8Array>) | null;
-+    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array<ArrayBuffer>) => void) => Promise<Uint8Array<ArrayBuffer>>) | null;
-     SHOW_ENCRYPTION_SETUP_UI: boolean;
- }
- export declare abstract class CryptoSetupExtensionsBase implements ProvideCryptoSetupExtensions {
-     abstract examineLoginResponse(response: any, credentials: ExtendedMatrixClientCreds): void;
-     abstract persistCredentials(credentials: ExtendedMatrixClientCreds): void;
--    abstract getSecretStorageKey(): Uint8Array | null;
--    abstract createSecretStorageKey(): Uint8Array | null;
-+    abstract getSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-+    abstract createSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-     abstract catchAccessSecretStorageError(e: Error): void;
-     abstract setupEncryptionNeeded(args: CryptoSetupArgs): boolean;
-     /** `getDehydrationKeyCallback` is no longer used; we provide an empty impl for type compatibility. */
--    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array) => void) => Promise<Uint8Array>) | null;
-+    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array<ArrayBuffer>) => void) => Promise<Uint8Array<ArrayBuffer>>) | null;
-     abstract SHOW_ENCRYPTION_SETUP_UI: boolean;
- }
- export interface CryptoSetupArgs {
-@@ -98,9 +98,9 @@ export declare class DefaultCryptoSetupExtensions extends CryptoSetupExtensionsB
-     SHOW_ENCRYPTION_SETUP_UI: boolean;
-     examineLoginResponse(response: any, credentials: ExtendedMatrixClientCreds): void;
-     persistCredentials(credentials: ExtendedMatrixClientCreds): void;
--    getSecretStorageKey(): Uint8Array | null;
--    createSecretStorageKey(): Uint8Array | null;
-+    getSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-+    createSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-     catchAccessSecretStorageError(e: Error): void;
-     setupEncryptionNeeded(args: CryptoSetupArgs): boolean;
--    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array) => void) => Promise<Uint8Array>) | null;
-+    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array<ArrayBuffer>) => void) => Promise<Uint8Array<ArrayBuffer>>) | null;
- }

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

@@ -1,34 +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 { 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/devtools/devtools.spec.ts

@@ -0,0 +1,33 @@
+/*
+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

@@ -0,0 +1,38 @@
+/*
+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

@@ -0,0 +1,28 @@
+/*
+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-filter-sort.spec.ts

@@ -68,7 +68,7 @@ test.describe("Room list filters and sort", () => {
         So we expect 'Old Room' to show up in the room list.
         */
         const roomListView = getRoomList(page);
-        const oldRoomTile = roomListView.getByRole("gridcell", { name: "Open room Old Room" });
+        const oldRoomTile = roomListView.getByRole("option", { name: "Open room Old Room" });
         await expect(oldRoomTile).toBeVisible();
 
         /*
@@ -139,8 +139,9 @@ test.describe("Room list filters and sort", () => {
 
             // Open the non-favourite room
             const roomListView = getRoomList(page);
-            const tile = roomListView.getByRole("gridcell", { name: "Open room room-non-fav" });
-            await tile.scrollIntoViewIfNeeded();
+            const tile = roomListView.getByRole("option", { name: "Open room room-non-fav" });
+            // item may not be in the DOM using scrollListToBottom rather than scrollIntoViewIfNeeded
+            await app.scrollListToBottom(roomListView);
             await tile.click();
 
             // Enable Favourite filter
@@ -151,7 +152,7 @@ test.describe("Room list filters and sort", () => {
 
             // Ensure the room list is not scrolled
             const isScrolledDown = await page
-                .getByRole("grid", { name: "Room list" })
+                .getByRole("listbox", { name: "Room list", exact: true })
                 .evaluate((e) => e.scrollTop !== 0);
             expect(isScrolledDown).toStrictEqual(false);
         });
@@ -227,37 +228,37 @@ test.describe("Room list filters and sort", () => {
 
             await primaryFilters.getByRole("option", { name: "Unread" }).click();
             // only one room should be visible
-            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(4);
+            await expect(roomList.getByRole("option", { name: "unread dm" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "unread room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(4);
             await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
 
             await primaryFilters.getByRole("option", { name: "People" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(2);
+            await expect(roomList.getByRole("option", { name: "unread dm" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "invited room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(2);
 
             await primaryFilters.getByRole("option", { name: "Rooms" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "Low prio room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(5);
+            await expect(roomList.getByRole("option", { name: "unread room" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "empty room" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Low prio room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(5);
 
             await getFilterExpandButton(page).click();
 
             await primaryFilters.getByRole("option", { name: "Favourite" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
+            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
 
             await primaryFilters.getByRole("option", { name: "Mentions" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
+            await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
 
             await primaryFilters.getByRole("option", { name: "Invites" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
+            await expect(roomList.getByRole("option", { name: "invited room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
 
             await getFilterCollapseButton(page).click();
             await expect(primaryFilters.locator("role=option").first()).toHaveText("Invites");
@@ -268,6 +269,7 @@ test.describe("Room list filters and sort", () => {
             { tag: "@screenshot" },
             async ({ page, app, bot }) => {
                 const roomListView = getRoomList(page);
+                const primaryFilters = getPrimaryFilters(page);
 
                 // Let's configure unread dm room so that we only get notification for mentions and keywords
                 await app.viewRoomById(unReadDmId);
@@ -276,20 +278,20 @@ test.describe("Room list filters and sort", () => {
                 await app.settings.closeDialog();
 
                 // Let's open a room other than unread room or unread dm
-                await roomListView.getByRole("gridcell", { name: "Open room favourite room" }).click();
+                await roomListView.getByRole("option", { name: "Open room favourite room" }).click();
 
                 // Let's make the bot send a new message in both rooms
                 await bot.sendMessage(unReadDmId, "Hello!");
                 await bot.sendMessage(unReadRoomId, "Hello!");
 
                 // Let's activate the unread filter now
-                await page.getByRole("option", { name: "Unread" }).click();
+                await primaryFilters.getByRole("option", { name: "Unread" }).click();
 
                 // Unread filter should only show unread room and not unread dm!
-                const unreadDm = roomListView.getByRole("gridcell", { name: "Open room unread room" });
+                const unreadDm = roomListView.getByRole("option", { name: "Open room unread room" });
                 await expect(unreadDm).toBeVisible();
                 await expect(unreadDm).toMatchScreenshot("unread-dm.png");
-                await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
+                await expect(roomListView.getByRole("option", { name: "Open room unread dm" })).not.toBeVisible();
             },
         );
 
@@ -299,7 +301,7 @@ test.describe("Room list filters and sort", () => {
             await getRoomOptionsMenu(page).click();
             await page.getByRole("menuitemradio", { name: "A-Z" }).click();
 
-            await expect(roomListView.getByRole("gridcell").first()).toHaveText(/empty room/);
+            await expect(roomListView.getByRole("option").first()).toHaveText(/empty room/);
         });
 
         test("should move room to the top on message when sorting by activity", async ({ page, bot }) => {
@@ -307,7 +309,7 @@ test.describe("Room list filters and sort", () => {
 
             await bot.sendMessage(unReadDmId, "Hello!");
 
-            await expect(roomListView.getByRole("gridcell").first()).toHaveText(/unread dm/);
+            await expect(roomListView.getByRole("option").first()).toHaveText(/unread dm/);
         });
     });
 

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

@@ -38,7 +38,7 @@ test.describe("Room list panel", () => {
     test("should render the room list panel", { tag: "@screenshot" }, async ({ page, app, user }) => {
         const roomListView = getRoomListView(page);
         // Wait for the last room to be visible
-        await expect(roomListView.getByRole("gridcell", { name: "Open room room19" })).toBeVisible();
+        await expect(roomListView.getByRole("option", { name: "Open room room19" })).toBeVisible();
         await expect(roomListView).toMatchScreenshot("room-list-panel.png");
     });
 

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

@@ -43,31 +43,35 @@ test.describe("Room list", () => {
 
         test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room29" })).toBeVisible();
+            await expect(roomListView.getByRole("option", { name: "Open room room29" })).toBeVisible();
             await expect(roomListView).toMatchScreenshot("room-list.png");
 
             // Put focus on the room list
-            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+            await roomListView.getByRole("option", { name: "Open room room29" }).click();
             // Scroll to the end of the room list
-            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
+            await app.scrollListToBottom(roomListView);
+
+            // scrollListToBottom seems to leave the mouse hovered over the list, move it away.
+            await page.getByRole("button", { name: "User menu" }).hover();
+
             await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
         });
 
         test("should open the room when it is clicked", async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+            await roomListView.getByRole("option", { name: "Open room room29" }).click();
             await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
         });
 
         test("should open the context menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click({ button: "right" });
+            await roomListView.getByRole("option", { name: "Open room room29" }).click({ button: "right" });
             await expect(page.getByRole("menu", { name: "More Options" })).toBeVisible();
         });
 
         test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+            const roomItem = roomListView.getByRole("option", { name: "Open room room29" });
             await roomItem.hover();
 
             await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
@@ -97,7 +101,7 @@ test.describe("Room list", () => {
         test("should open the notification options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
 
-            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+            const roomItem = roomListView.getByRole("option", { name: "Open room room29" });
             await roomItem.hover();
 
             await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
@@ -117,10 +121,10 @@ test.describe("Room list", () => {
             await expect(roomItem.getByTestId("notification-decoration")).not.toBeVisible();
 
             // Put focus on the room list
-            await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
+            await roomListView.getByRole("option", { name: "Open room room28" }).click();
 
             // Scroll to the end of the room list
-            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
+            await app.scrollListToBottom(roomListView);
 
             // The room decoration should have the muted icon
             await expect(roomItem.getByTestId("notification-decoration")).toBeVisible();
@@ -139,25 +143,25 @@ test.describe("Room list", () => {
         test("should scroll to the current room", async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
             // Put focus on the room list
-            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+            await roomListView.getByRole("option", { name: "Open room room29" }).click();
             // Scroll to the end of the room list
-            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
+            await app.scrollListToBottom(roomListView);
 
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
-            await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();
+            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
+            await roomListView.getByRole("option", { name: "Open room room0" }).click();
 
             const filters = page.getByRole("listbox", { name: "Room list filters" });
             await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).not.toBeVisible();
+            await expect(roomListView.getByRole("option", { name: "Open room room0" })).not.toBeVisible();
 
             await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
         });
 
         test.describe("Shortcuts", () => {
             test("should select the next room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+                await roomListView.getByRole("option", { name: "Open room room29" }).click();
                 await page.keyboard.press("Alt+ArrowDown");
 
                 await expect(page.getByRole("heading", { name: "room28", level: 1 })).toBeVisible();
@@ -165,7 +169,7 @@ test.describe("Room list", () => {
 
             test("should select the previous room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
+                await roomListView.getByRole("option", { name: "Open room room28" }).click();
                 await page.keyboard.press("Alt+ArrowUp");
 
                 await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
@@ -173,7 +177,7 @@ test.describe("Room list", () => {
 
             test("should select the last room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+                await roomListView.getByRole("option", { name: "Open room room29" }).click();
                 await page.keyboard.press("Alt+ArrowUp");
 
                 await expect(page.getByRole("heading", { name: "room0", level: 1 })).toBeVisible();
@@ -187,7 +191,7 @@ test.describe("Room list", () => {
                 await bot.joinRoom(roomId);
                 await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-                await roomListView.getByRole("gridcell", { name: "Open room room20" }).click();
+                await roomListView.getByRole("option", { name: "Open room room20" }).click();
 
                 await page.keyboard.press("Alt+Shift+ArrowDown");
 
@@ -199,8 +203,8 @@ test.describe("Room list", () => {
             test("should navigate to the room list", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
 
-                const room29 = roomListView.getByRole("gridcell", { name: "Open room room29" });
-                const room28 = roomListView.getByRole("gridcell", { name: "Open room room28" });
+                const room29 = roomListView.getByRole("option", { name: "Open room room29" });
+                const room28 = roomListView.getByRole("option", { name: "Open room room28" });
 
                 // open the room
                 await room29.click();
@@ -219,7 +223,7 @@ test.describe("Room list", () => {
 
             test("should navigate to the notification menu", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                const room29 = roomListView.getByRole("gridcell", { name: "Open room room29" });
+                const room29 = roomListView.getByRole("option", { name: "Open room room29" });
                 const moreButton = room29.getByRole("button", { name: "More options" });
                 const notificationButton = room29.getByRole("button", { name: "Notification options" });
 
@@ -258,7 +262,7 @@ test.describe("Room list", () => {
             await page.getByRole("button", { name: "User menu" }).focus();
 
             const roomListView = getRoomList(page);
-            const publicRoom = roomListView.getByRole("gridcell", { name: "public room" });
+            const publicRoom = roomListView.getByRole("option", { name: "public room" });
 
             await expect(publicRoom).toBeVisible();
             await expect(publicRoom).toMatchScreenshot("room-list-item-public.png");
@@ -268,7 +272,7 @@ test.describe("Room list", () => {
             // @ts-ignore Visibility enum is not accessible
             await app.client.createRoom({ name: "low priority room", visibility: "public" });
             const roomListView = getRoomList(page);
-            const publicRoom = roomListView.getByRole("gridcell", { name: "low priority room" });
+            const publicRoom = roomListView.getByRole("option", { name: "low priority room" });
 
             // Make room low priority
             await publicRoom.hover();
@@ -293,7 +297,7 @@ test.describe("Room list", () => {
             await page.getByRole("button", { name: "Create video room" }).click();
 
             const roomListView = getRoomList(page);
-            const videoRoom = roomListView.getByRole("gridcell", { name: "video room" });
+            const videoRoom = roomListView.getByRole("option", { name: "video room" });
 
             // focus the user menu to avoid to have hover decoration
             await page.getByRole("button", { name: "User menu" }).focus();
@@ -312,7 +316,7 @@ test.describe("Room list", () => {
                 invite: [user.userId],
                 is_direct: true,
             });
-            const invitedRoom = roomListView.getByRole("gridcell", { name: "invited room" });
+            const invitedRoom = roomListView.getByRole("option", { name: "invited room" });
             await expect(invitedRoom).toBeVisible();
             await expect(invitedRoom).toMatchScreenshot("room-list-item-invited.png");
         });
@@ -327,7 +331,7 @@ test.describe("Room list", () => {
             await bot.sendMessage(roomId, "I am a robot. Beep.");
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "2 notifications" });
+            const room = roomListView.getByRole("option", { name: "2 notifications" });
             await expect(room).toBeVisible();
             await expect(room.getByTestId("notification-decoration")).toHaveText("2");
             await expect(room).toMatchScreenshot("room-list-item-notification.png");
@@ -358,7 +362,7 @@ test.describe("Room list", () => {
             );
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "mention" });
+            const room = roomListView.getByRole("option", { name: "mention" });
             await expect(room).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-mention.png");
         });
@@ -379,7 +383,7 @@ test.describe("Room list", () => {
             await bot.joinRoom(roomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "activity" });
+            const room = roomListView.getByRole("option", { name: "activity" });
             await expect(room.getByText("I am a robot. Beep.")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-message-preview.png");
         });
@@ -406,7 +410,7 @@ test.describe("Room list", () => {
             await app.viewRoomById(otherRoomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "activity" });
+            const room = roomListView.getByRole("option", { name: "activity" });
             await expect(room.getByTestId("notification-decoration")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-activity.png");
         });
@@ -418,7 +422,7 @@ test.describe("Room list", () => {
             await app.client.inviteUser(roomId, bot.credentials.userId);
             await bot.joinRoom(roomId);
 
-            const room = roomListView.getByRole("gridcell", { name: "mark as unread" });
+            const room = roomListView.getByRole("option", { name: "mark as unread" });
             await room.hover();
             await room.getByRole("button", { name: "More Options" }).click();
             await page.getByRole("menuitem", { name: "mark as unread" }).click();
@@ -441,7 +445,7 @@ test.describe("Room list", () => {
             await page.getByText("Off").click();
             await app.settings.closeDialog();
 
-            const room = roomListView.getByRole("gridcell", { name: "silent" });
+            const room = roomListView.getByRole("option", { name: "silent" });
             await expect(room.getByTestId("notification-decoration")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-silent.png");
         });

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,26 @@ 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/room/create-room.spec.ts

@@ -0,0 +1,68 @@
+/*
+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 { 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 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/notifications/notifications-settings-2-tab.spec.ts

@@ -0,0 +1,28 @@
+/*
+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

@@ -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("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/room-settings/roles-permissions-room-settings-tab.spec.ts

@@ -8,7 +8,7 @@
 
 import { type Locator } from "@playwright/test";
 
-import { test, expect } from "../../element-web-test";
+import { test, expect } from "../../../element-web-test";
 
 test.describe("Roles & Permissions room settings tab", () => {
     const roomName = "Test room";

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

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

playwright/e2e/settings/room-settings/room-video-tab.spec.ts

@@ -0,0 +1,42 @@
+/*
+ * 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,6 +41,18 @@ 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

@@ -376,4 +376,19 @@ 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",
+        );
+    });
 });

playwright/e2e/widgets/permissions-dialog.spec.ts

@@ -0,0 +1,98 @@
+/*
+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(): Promise<Locator> {
+    public async openCreateRoomDialog(roomKindname: "New room" | "New video room" = "New room"): Promise<Locator> {
         await this.page.getByRole("button", { name: "Add room", exact: true }).click();
-        await this.page.getByRole("menuitem", { name: "New room", exact: true }).click();
+        await this.page.getByRole("menuitem", { name: roomKindname, 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, level: SettingLevel, value: any): Promise<void> {
+    public async setValue(settingName: string, roomId: string | null, 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:e1004d0213a985064766c99df344b0ac799869aff503be5aba1a720478258873";
+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:78b32934c4a7a616ada0a0af6e6ba3a102f97ff747fc0d2d1e3bd930e16e529e";
+const TAG = "develop@sha256:18e9e77eac01709e9ab4d26cf20c36bf5a1567756bb5a78c00cabf366d65a950";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,

res/css/_components.pcss

@@ -142,6 +142,7 @@
 @import "./views/dialogs/_GenericFeatureFeedbackDialog.pcss";
 @import "./views/dialogs/_IncomingSasDialog.pcss";
 @import "./views/dialogs/_InviteDialog.pcss";
+@import "./views/dialogs/_InviteProgressBody.pcss";
 @import "./views/dialogs/_JoinRuleDropdown.pcss";
 @import "./views/dialogs/_LeaveSpaceDialog.pcss";
 @import "./views/dialogs/_LocationViewDialog.pcss";

res/css/views/dialogs/_DevtoolsDialog.pcss

@@ -24,6 +24,12 @@ 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/dialogs/_InviteDialog.pcss

@@ -63,17 +63,6 @@ Please see LICENSE files in the repository root for full details.
         height: 25px;
         line-height: $font-25px;
     }
-
-    .mx_InviteDialog_buttonAndSpinner {
-        .mx_Spinner {
-            /* Width and height are required to trick the layout engine. */
-            width: 20px;
-            height: 20px;
-            margin-inline-start: 5px;
-            display: inline-block;
-            vertical-align: middle;
-        }
-    }
 }
 
 .mx_InviteDialog_section {
@@ -218,6 +207,10 @@ Please see LICENSE files in the repository root for full details.
     flex-direction: column;
     flex-grow: 1;
     overflow: hidden;
+
+    .mx_InviteProgressBody {
+        margin-top: var(--cpd-space-12x);
+    }
 }
 
 .mx_InviteDialog_transfer {

res/css/views/dialogs/_InviteProgressBody.pcss

@@ -0,0 +1,16 @@
+/*
+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_InviteProgressBody {
+    text-align: center;
+    font: var(--cpd-font-body-lg-regular);
+
+    h1 {
+        color: var(--cpd-color-text-primary);
+        font: var(--cpd-font-heading-sm-semibold);
+    }
+}

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

@@ -15,40 +15,44 @@
  * |-------------------------------------------------------|
  */
 .mx_RoomListItemView {
-    all: unset;
+    /* Remove button default style */
+    background: unset;
+    border: none;
+    padding: 0;
+    text-align: unset;
+
     cursor: pointer;
+    height: 48px;
+    width: 100%;
 
-    .mx_RoomListItemView_container {
-        padding-left: var(--cpd-space-3x);
-        font: var(--cpd-font-body-md-regular);
+    padding-left: var(--cpd-space-3x);
+    font: var(--cpd-font-body-md-regular);
+
+    .mx_RoomListItemView_content {
         height: 100%;
+        flex: 1;
+        /* The border is only under the room name and the future hover menu  */
+        border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
+        box-sizing: border-box;
+        min-width: 0;
+        padding-right: var(--cpd-space-5x);
 
-        .mx_RoomListItemView_content {
-            height: 100%;
-            flex: 1;
-            /* The border is only under the room name and the future hover menu  */
-            border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
-            box-sizing: border-box;
+        .mx_RoomListItemView_text {
             min-width: 0;
-            padding-right: var(--cpd-space-5x);
+        }
 
-            .mx_RoomListItemView_text {
-                min-width: 0;
-            }
+        .mx_RoomListItemView_roomName {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
-            .mx_RoomListItemView_roomName {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-
-            .mx_RoomListItemView_messagePreview {
-                font: var(--cpd-font-body-sm-regular);
-                color: var(--cpd-color-text-secondary);
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
+        .mx_RoomListItemView_messagePreview {
+            font: var(--cpd-font-body-sm-regular);
+            color: var(--cpd-color-text-secondary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 }
@@ -57,7 +61,7 @@
     background-color: var(--cpd-color-bg-action-secondary-hovered);
 }
 
-.mx_RoomListItemView_menu_open .mx_RoomListItemView_container .mx_RoomListItemView_content {
+.mx_RoomListItemView_menu_open .mx_RoomListItemView_content {
     /**
      * The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331
      * the icon size of the menu is 18px instead of 20px with a different internal padding

res/css/views/rooms/_AppsDrawer.pcss

@@ -208,7 +208,7 @@ Please see LICENSE files in the repository root for full details.
             margin-right: 12px;
         }
 
-        h3 {
+        h1 {
             font-size: inherit;
             margin: 0;
         }

src/Keyboard.ts

@@ -79,3 +79,12 @@ export function isOnlyCtrlOrCmdKeyEvent(ev: React.KeyboardEvent | KeyboardEvent)
         return ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey;
     }
 }
+
+/**
+ * Checks if the given keyboard event is a modified key event (i.e., if any modifier keys are active).
+ * @param ev The keyboard event to check
+ * @returns True if the event is a modified key event, false otherwise
+ */
+export function isModifiedKeyEvent(ev: React.KeyboardEvent | KeyboardEvent): boolean {
+    return ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey;
+}

src/SecurityManager.ts

@@ -26,7 +26,7 @@ import InteractiveAuthDialog from "./components/views/dialogs/InteractiveAuthDia
 // during the same single operation. Use `accessSecretStorage` below to scope a
 // single secret storage operation, as it will clear the cached keys once the
 // operation ends.
-let secretStorageKeys: Record<string, Uint8Array<ArrayBuffer>> = {};
+let secretStorageKeys: Record<string, Uint8Array> = {};
 let secretStorageKeyInfo: Record<string, SecretStorage.SecretStorageKeyDescription> = {};
 let secretStorageBeingAccessed = false;
 
@@ -51,8 +51,8 @@ export class AccessCancelledError extends Error {
 
 function makeInputToKey(
     keyInfo: SecretStorage.SecretStorageKeyDescription,
-): (keyParams: KeyParams) => Promise<Uint8Array<ArrayBuffer>> {
-    return async ({ passphrase, recoveryKey }): Promise<Uint8Array<ArrayBuffer>> => {
+): (keyParams: KeyParams) => Promise<Uint8Array> {
+    return async ({ passphrase, recoveryKey }): Promise<Uint8Array> => {
         if (passphrase) {
             return deriveRecoveryKeyFromPassphrase(passphrase, keyInfo.passphrase.salt, keyInfo.passphrase.iterations);
         } else if (recoveryKey) {
@@ -69,7 +69,7 @@ async function getSecretStorageKey(
         keys: Record<string, SecretStorage.SecretStorageKeyDescription>;
     },
     secretName: string,
-): Promise<[string, Uint8Array<ArrayBuffer>]> {
+): Promise<[string, Uint8Array]> {
     const cli = MatrixClientPeg.safeGet();
     const defaultKeyId = await cli.secretStorage.getDefaultKeyId();
 
@@ -139,7 +139,7 @@ async function getSecretStorageKey(
 function cacheSecretStorageKey(
     keyId: string,
     keyInfo: SecretStorage.SecretStorageKeyDescription,
-    key: Uint8Array<ArrayBuffer>,
+    key: Uint8Array,
 ): void {
     if (secretStorageBeingAccessed) {
         logger.debug(`Caching 4S key ${keyId}`);

src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx

@@ -124,7 +124,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
         if (keyFromCustomisations) this.initExtension(keyFromCustomisations);
     }
 
-    private initExtension(keyFromCustomisations: Uint8Array<ArrayBuffer>): void {
+    private initExtension(keyFromCustomisations: Uint8Array): void {
         logger.log("CryptoSetupExtension: Created key via extension, jumping to bootstrap step");
         this.recoveryKey = {
             privateKey: keyFromCustomisations,

src/audio/VoiceMessageRecording.ts

@@ -142,7 +142,7 @@ export class VoiceMessageRecording implements IDestroyable {
         this.buffer = concat(this.buffer, buf);
     };
 
-    private get audioBuffer(): Uint8Array<ArrayBuffer> {
+    private get audioBuffer(): Uint8Array {
         // We need a clone of the buffer to avoid accidentally changing the position
         // on the real thing.
         return this.buffer.slice(0);

src/components/utils/ListView.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useRef, type JSX, useCallback, useEffect, useState } from "react";
 import { type VirtuosoHandle, type ListRange, Virtuoso, type VirtuosoProps } from "react-virtuoso";
 
+import { isModifiedKeyEvent, Key } from "../../Keyboard";
 /**
  * Context object passed to each list item containing the currently focused key
  * and any additional context data from the parent component.
@@ -34,6 +35,7 @@ export interface IListViewProps<Item, Context>
      * @param index - The index of the item in the list
      * @param item - The data item to render
      * @param context - The context object containing the focused key and any additional data
+     * @param onFocus - A callback that is required to be called when the item component receives focus
      * @returns JSX element representing the rendered item
      */
     getItemComponent: (
@@ -62,6 +64,14 @@ export interface IListViewProps<Item, Context>
      * @return The key to use for focusing the item
      */
     getItemKey: (item: Item) => string;
+    /**
+     * Callback function to handle key down events on the list container.
+     * ListView handles keyboard navigation for focus(up, down, home, end, pageUp, pageDown)
+     * and stops propagation otherwise the event bubbles and this callback is called for the use of the parent.
+     * @param e - The keyboard event
+     * @returns
+     */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 /**
@@ -73,7 +83,7 @@ export interface IListViewProps<Item, Context>
  */
 export function ListView<Item, Context = any>(props: IListViewProps<Item, Context>): React.ReactElement {
     // Extract our custom props to avoid conflicts with Virtuoso props
-    const { items, getItemComponent, isItemFocusable, getItemKey, context, ...virtuosoProps } = props;
+    const { items, getItemComponent, isItemFocusable, getItemKey, context, onKeyDown, ...virtuosoProps } = props;
     /** Reference to the Virtuoso component for programmatic scrolling */
     const virtuosoHandleRef = useRef<VirtuosoHandle>(null);
     /** Reference to the DOM element containing the virtualized list */
@@ -125,7 +135,7 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
                 const key = getItemKey(items[clampedIndex]);
                 setTabIndexKey(key);
                 isScrollingToItem.current = true;
-                virtuosoHandleRef?.current?.scrollIntoView({
+                virtuosoHandleRef.current?.scrollIntoView({
                     index: clampedIndex,
                     align: align,
                     behavior: "auto",
@@ -168,40 +178,44 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
      * Supports Arrow keys, Home, End, Page Up/Down, Enter, and Space.
      */
     const keyDownCallback = useCallback(
-        (e: React.KeyboardEvent) => {
-            if (!e) return; // Guard against null/undefined events
-
+        (e: React.KeyboardEvent<HTMLDivElement>) => {
             const currentIndex = tabIndexKey ? keyToIndexMap.get(tabIndexKey) : undefined;
-
             let handled = false;
-            if (e.code === "ArrowUp" && currentIndex !== undefined) {
-                scrollToItem(currentIndex - 1, false);
-                handled = true;
-            } else if (e.code === "ArrowDown" && currentIndex !== undefined) {
-                scrollToItem(currentIndex + 1, true);
-                handled = true;
-            } else if (e.code === "Home") {
-                scrollToIndex(0);
-                handled = true;
-            } else if (e.code === "End") {
-                scrollToIndex(items.length - 1);
-                handled = true;
-            } else if (e.code === "PageDown" && 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 === "PageUp" && visibleRange && currentIndex !== undefined) {
-                const numberDisplayed = visibleRange.endIndex - visibleRange.startIndex;
-                scrollToItem(Math.max(currentIndex - numberDisplayed, 0), false, `start`);
-                handled = true;
+
+            // 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 )
+            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) {
                 e.stopPropagation();
                 e.preventDefault();
+            } else {
+                onKeyDown?.(e);
             }
         },
-        [scrollToIndex, scrollToItem, tabIndexKey, keyToIndexMap, visibleRange, items],
+        [scrollToIndex, scrollToItem, tabIndexKey, keyToIndexMap, visibleRange, items, onKeyDown],
     );
 
     /**
@@ -251,8 +265,12 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
         [keyToIndexMap, visibleRange, scrollToIndex, tabIndexKey],
     );
 
-    const onBlur = useCallback((): void => {
-        setIsFocused(false);
+    const onBlur = useCallback((event: React.FocusEvent<HTMLDivElement>): void => {
+        // Only set isFocused to false if the focus is moving outside the list
+        // This prevents the list from losing focus when interacting with menus inside it
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+            setIsFocused(false);
+        }
     }, []);
 
     const listContext: ListContext<Context> = {
@@ -264,8 +282,8 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
     return (
         <Virtuoso
             tabIndex={props.tabIndex || undefined} // We don't need to focus the container, so leave it undefined by default
-            scrollerRef={scrollerRef}
             ref={virtuosoHandleRef}
+            scrollerRef={scrollerRef}
             onKeyDown={keyDownCallback}
             context={listContext}
             rangeChanged={setVisibleRange}

src/components/viewmodels/roomlist/RoomListViewModel.tsx

@@ -18,6 +18,7 @@ import { Action } from "../../../dispatcher/actions";
 import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import { useStickyRoomList } from "./useStickyRoomList";
 import { useRoomListNavigation } from "./useRoomListNavigation";
+import { type RoomsResult } from "../../../stores/room-list-v3/RoomListStoreV3";
 
 export interface RoomListViewState {
     /**
@@ -26,9 +27,9 @@ export interface RoomListViewState {
     isLoadingRooms: boolean;
 
     /**
-     * A list of rooms to be displayed in the left panel.
+     * The room results to be displayed (along with the spaceId and filter keys at the time of query)
      */
-    rooms: Room[];
+    roomsResult: RoomsResult;
 
     /**
      * Create a chat room
@@ -71,10 +72,10 @@ export interface RoomListViewState {
  */
 export function useRoomListViewModel(): RoomListViewState {
     const matrixClient = useMatrixClientContext();
-    const { isLoadingRooms, primaryFilters, activePrimaryFilter, rooms: filteredRooms } = useFilteredRooms();
-    const { activeIndex, rooms } = useStickyRoomList(filteredRooms);
+    const { isLoadingRooms, primaryFilters, activePrimaryFilter, roomsResult: filteredRooms } = useFilteredRooms();
+    const { activeIndex, roomsResult } = useStickyRoomList(filteredRooms);
 
-    useRoomListNavigation(rooms);
+    useRoomListNavigation(roomsResult.rooms);
 
     const currentSpace = useEventEmitterState<Room | null>(
         SpaceStore.instance,
@@ -88,7 +89,7 @@ export function useRoomListViewModel(): RoomListViewState {
 
     return {
         isLoadingRooms,
-        rooms,
+        roomsResult,
         canCreateRoom,
         createRoom,
         createChatRoom,

src/components/viewmodels/roomlist/useFilteredRooms.tsx

@@ -5,12 +5,15 @@ 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 { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
-import type { Room } from "matrix-js-sdk/src/matrix";
 import { FilterKey } from "../../../stores/room-list-v3/skip-list/filters";
 import { _t, _td, type TranslationKey } from "../../../languageHandler";
-import RoomListStoreV3, { LISTS_LOADED_EVENT, LISTS_UPDATE_EVENT } from "../../../stores/room-list-v3/RoomListStoreV3";
+import RoomListStoreV3, {
+    LISTS_LOADED_EVENT,
+    LISTS_UPDATE_EVENT,
+    type RoomsResult,
+} from "../../../stores/room-list-v3/RoomListStoreV3";
 import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
 import { UPDATE_SELECTED_SPACE } from "../../../stores/spaces";
@@ -35,7 +38,7 @@ export interface PrimaryFilter {
 interface FilteredRooms {
     primaryFilters: PrimaryFilter[];
     isLoadingRooms: boolean;
-    rooms: Room[];
+    roomsResult: RoomsResult;
     /**
      * The currently active primary filter.
      * If no primary filter is active, this will be undefined.
@@ -63,12 +66,12 @@ export function useFilteredRooms(): FilteredRooms {
      */
     const [primaryFilter, setPrimaryFilter] = useState<FilterKey | undefined>();
 
-    const [rooms, setRooms] = useState(() => RoomListStoreV3.instance.getSortedRoomsInActiveSpace());
+    const [roomsResult, setRoomsResult] = useState(() => RoomListStoreV3.instance.getSortedRoomsInActiveSpace());
     const [isLoadingRooms, setIsLoadingRooms] = useState(() => RoomListStoreV3.instance.isLoadingRooms);
 
     const updateRoomsFromStore = useCallback((filters: FilterKey[] = []): void => {
         const newRooms = RoomListStoreV3.instance.getSortedRoomsInActiveSpace(filters);
-        setRooms(newRooms);
+        setRoomsResult(newRooms);
     }, []);
 
     // Reset filters when active space changes
@@ -77,9 +80,15 @@ export function useFilteredRooms(): FilteredRooms {
     const filterUndefined = (array: (FilterKey | undefined)[]): FilterKey[] =>
         array.filter((f) => f !== undefined) as FilterKey[];
 
-    const getAppliedFilters = (): FilterKey[] => {
+    const getAppliedFilters = useCallback((): FilterKey[] => {
         return filterUndefined([primaryFilter]);
-    };
+    }, [primaryFilter]);
+
+    useEffect(() => {
+        // Update the rooms state when the primary filter changes
+        const filters = getAppliedFilters();
+        updateRoomsFromStore(filters);
+    }, [getAppliedFilters, updateRoomsFromStore]);
 
     useEventEmitter(RoomListStoreV3.instance, LISTS_UPDATE_EVENT, () => {
         const filters = getAppliedFilters();
@@ -122,6 +131,6 @@ export function useFilteredRooms(): FilteredRooms {
         isLoadingRooms,
         primaryFilters,
         activePrimaryFilter,
-        rooms,
+        roomsResult,
     };
 }

src/components/viewmodels/roomlist/useStickyRoomList.tsx

@@ -14,6 +14,7 @@ import { Action } from "../../../dispatcher/actions";
 import type { Room } from "matrix-js-sdk/src/matrix";
 import type { Optional } from "matrix-events-sdk";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
+import { type RoomsResult } from "../../../stores/room-list-v3/RoomListStoreV3";
 
 function getIndexByRoomId(rooms: Room[], roomId: Optional<string>): number | undefined {
     const index = rooms.findIndex((room) => room.roomId === roomId);
@@ -67,11 +68,11 @@ function getRoomsWithStickyRoom(
     return { newIndex: oldIndex, newRooms };
 }
 
-interface StickyRoomListResult {
+export interface StickyRoomListResult {
     /**
-     * List of rooms with sticky active room.
+     * The rooms result with the active sticky room applied
      */
-    rooms: Room[];
+    roomsResult: RoomsResult;
     /**
      * Index of the active room in the room list.
      */
@@ -85,10 +86,10 @@ interface StickyRoomListResult {
  * @param rooms list of rooms
  * @see {@link StickyRoomListResult} details what this hook returns..
  */
-export function useStickyRoomList(rooms: Room[]): StickyRoomListResult {
-    const [listState, setListState] = useState<{ index: number | undefined; roomsWithStickyRoom: Room[] }>({
-        index: undefined,
-        roomsWithStickyRoom: rooms,
+export function useStickyRoomList(roomsResult: RoomsResult): StickyRoomListResult {
+    const [listState, setListState] = useState<StickyRoomListResult>({
+        activeIndex: getIndexByRoomId(roomsResult.rooms, SdkContextClass.instance.roomViewStore.getRoomId()),
+        roomsResult: roomsResult,
     });
 
     const currentSpaceRef = useRef(SpaceStore.instance.activeSpace);
@@ -97,13 +98,18 @@ export function useStickyRoomList(rooms: Room[]): StickyRoomListResult {
         (newRoomId: string | null, isRoomChange: boolean = false) => {
             setListState((current) => {
                 const activeRoomId = newRoomId ?? SdkContextClass.instance.roomViewStore.getRoomId();
-                const newActiveIndex = getIndexByRoomId(rooms, activeRoomId);
-                const oldIndex = current.index;
-                const { newIndex, newRooms } = getRoomsWithStickyRoom(rooms, oldIndex, newActiveIndex, isRoomChange);
-                return { index: newIndex, roomsWithStickyRoom: newRooms };
+                const newActiveIndex = getIndexByRoomId(roomsResult.rooms, activeRoomId);
+                const oldIndex = current.activeIndex;
+                const { newIndex, newRooms } = getRoomsWithStickyRoom(
+                    roomsResult.rooms,
+                    oldIndex,
+                    newActiveIndex,
+                    isRoomChange,
+                );
+                return { activeIndex: newIndex, roomsResult: { ...roomsResult, rooms: newRooms } };
             });
         },
-        [rooms],
+        [roomsResult],
     );
 
     // Re-calculate the index when the active room has changed.
@@ -115,20 +121,19 @@ export function useStickyRoomList(rooms: Room[]): StickyRoomListResult {
     useEffect(() => {
         let newRoomId: string | null = null;
         let isRoomChange = false;
-        const newSpace = SpaceStore.instance.activeSpace;
-        if (currentSpaceRef.current !== newSpace) {
+        if (currentSpaceRef.current !== roomsResult.spaceId) {
             /*
             If the space has changed, we check if we can immediately set the active
             index to the last opened room in that space. Otherwise, we might see a
             flicker because of the delay between the space change event and
             active room change dispatch.
             */
-            newRoomId = SpaceStore.instance.getLastSelectedRoomIdForSpace(newSpace);
+            newRoomId = SpaceStore.instance.getLastSelectedRoomIdForSpace(roomsResult.spaceId);
             isRoomChange = true;
-            currentSpaceRef.current = newSpace;
+            currentSpaceRef.current = roomsResult.spaceId;
         }
         updateRoomsAndIndex(newRoomId, isRoomChange);
-    }, [rooms, updateRoomsAndIndex]);
+    }, [roomsResult, updateRoomsAndIndex]);
 
-    return { activeIndex: listState.index, rooms: listState.roomsWithStickyRoom };
+    return listState;
 }

src/components/views/avatars/WidgetAvatar.tsx

@@ -37,6 +37,8 @@ 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/DevtoolsDialog.tsx

@@ -84,7 +84,9 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
             <BaseTool onBack={onBack}>
                 {Object.entries(Tools).map(([category, tools]) => (
                     <div key={category}>
-                        <h3>{_t(categoryLabels[category as unknown as Category])}</h3>
+                        <h2 className="mx_DevTools_toolHeading">
+                            {_t(categoryLabels[category as unknown as Category])}
+                        </h2>
                         {tools.map(([label, tool]) => {
                             const onClick = (): void => {
                                 setTool([label, tool]);
@@ -98,7 +100,7 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                     </div>
                 ))}
                 <div>
-                    <h3>{_t("common|options")}</h3>
+                    <h2 className="mx_DevTools_toolHeading">{_t("common|options")}</h2>
                     <SettingsFlag name="developerMode" level={SettingLevel.ACCOUNT} />
                     <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
                     <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />

src/components/views/dialogs/InviteDialog.tsx

@@ -40,7 +40,6 @@ import Field from "../elements/Field";
 import TabbedView, { Tab, TabLocation } from "../../structures/TabbedView";
 import Dialpad from "../voip/DialPad";
 import QuestionDialog from "./QuestionDialog";
-import Spinner from "../elements/Spinner";
 import BaseDialog from "./BaseDialog";
 import DialPadBackspaceButton from "../elements/DialPadBackspaceButton";
 import LegacyCallHandler from "../../../LegacyCallHandler";
@@ -65,6 +64,7 @@ import { UNKNOWN_PROFILE_ERRORS } from "../../../utils/MultiInviter";
 import AskInviteAnywayDialog, { type UnknownProfiles } from "./AskInviteAnywayDialog";
 import { SdkContextClass } from "../../../contexts/SDKContext";
 import { type UserProfilesStore } from "../../../stores/UserProfilesStore";
+import InviteProgressBody from "./InviteProgressBody.tsx";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -329,8 +329,14 @@ interface IInviteDialogState {
     dialPadValue: string;
     currentTabId: TabId;
 
-    // These two flags are used for the 'Go' button to communicate what is going on.
+    /**
+     * True if we are sending the invites.
+     *
+     * We will grey out the action button, hide the suggestions, and display a spinner.
+     */
     busy: boolean;
+
+    /** Error from the last attempt to send invites. */
     errorText?: string;
 }
 
@@ -617,7 +623,10 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
 
         try {
-            const result = await inviteMultipleToRoom(cli, this.props.roomId, targetIds);
+            const result = await inviteMultipleToRoom(cli, this.props.roomId, targetIds, {
+                // We show our own progress body, so don't pop up a separate dialog.
+                inhibitProgressDialog: true,
+            });
             if (!this.shouldAbortAfterInviteError(result, room)) {
                 // handles setting error message too
                 this.props.onFinished(true);
@@ -1328,11 +1337,6 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
      * "CallTransfer" one.
      */
     private renderMainTab(): JSX.Element {
-        let spinner: JSX.Element | undefined;
-        if (this.state.busy) {
-            spinner = <Spinner w={20} h={20} />;
-        }
-
         let helpText;
         let buttonText;
         let goButtonFn: (() => Promise<void>) | null = null;
@@ -1437,12 +1441,9 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                 <p className="mx_InviteDialog_helpText">{helpText}</p>
                 <div className="mx_InviteDialog_addressBar">
                     {this.renderEditor()}
-                    <div className="mx_InviteDialog_buttonAndSpinner">
-                        {goButton}
-                        {spinner}
-                    </div>
+                    {goButton}
                 </div>
-                {this.renderSuggestions()}
+                {this.state.busy ? <InviteProgressBody /> : this.renderSuggestions()}
             </React.Fragment>
         );
     }

src/components/views/dialogs/InviteProgressBody.tsx

@@ -0,0 +1,24 @@
+/*
+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 React from "react";
+
+import InlineSpinner from "../elements/InlineSpinner";
+import { _t } from "../../../languageHandler";
+
+/** The common body of components that show the progress of sending room invites. */
+const InviteProgressBody: React.FC = () => {
+    return (
+        <div className="mx_InviteProgressBody">
+            <InlineSpinner w={32} h={32} />
+            <h1>{_t("invite|progress|preparing")}</h1>
+            {_t("invite|progress|dont_close")}
+        </div>
+    );
+};
+
+export default InviteProgressBody;

src/components/views/dialogs/InviteProgressDialog.tsx

@@ -0,0 +1,38 @@
+/*
+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 React from "react";
+
+import Modal from "../../../Modal.tsx";
+import InviteProgressBody from "./InviteProgressBody.tsx";
+
+/** A Modal dialog that pops up while room invites are being sent. */
+const InviteProgressDialog: React.FC = (_) => {
+    return <InviteProgressBody />;
+};
+
+/**
+ * Open the invite progress dialog.
+ *
+ * Returns a callback which will close the dialog again.
+ */
+export function openInviteProgressDialog(): () => void {
+    const onBeforeClose = async (reason?: string): Promise<boolean> => {
+        // Inhibit closing via background click
+        return reason != "backgroundClick";
+    };
+
+    const { close } = Modal.createDialog(
+        InviteProgressDialog,
+        /* props */ {},
+        /* className */ undefined,
+        /* isPriorityModal */ false,
+        /* isStaticModal */ false,
+        { onBeforeClose },
+    );
+    return close;
+}

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" />
-                <h3>{name}</h3>
+                <h1>{name}</h1>
                 <span>
                     {title ? titleSpacer : ""}
                     {title}

src/components/views/messages/MAudioBody.tsx

@@ -74,6 +74,7 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
 
     public componentWillUnmount(): void {
         this.state.playback?.destroy();
+        this.state.audioPlayerVm?.dispose();
     }
 
     protected get showFileBody(): boolean {

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">
+            <Heading size="4" className="mx_BaseCard_header_title_heading" as="h1">
                 {WidgetUtils.getWidgetName(app)}
             </Heading>
             <ContextMenuButton

src/components/views/rooms/RoomListPanel/RoomList.tsx

@@ -5,13 +5,16 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { useCallback, type JSX } from "react";
-import { AutoSizer, List, type ListRowProps } from "react-virtualized";
+import React, { useCallback, useRef, type JSX } from "react";
+import { type Room } from "matrix-js-sdk/src/matrix";
+import { type ScrollIntoViewLocation } from "react-virtuoso";
+import { isEqual } from "lodash";
 
 import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
 import { _t } from "../../../../languageHandler";
 import { RoomListItemView } from "./RoomListItemView";
-import { RovingTabIndexProvider } from "../../../../accessibility/RovingTabIndex";
+import { type ListContext, ListView } from "../../../utils/ListView";
+import { type FilterKey } from "../../../../stores/room-list-v3/skip-list/filters";
 import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
 import { Landmark, LandmarkNavigation } from "../../../../accessibility/LandmarkNavigation";
@@ -26,55 +29,93 @@ interface RoomListProps {
 /**
  * A virtualized list of rooms.
  */
-export function RoomList({ vm: { rooms, activeIndex } }: RoomListProps): JSX.Element {
-    const roomRendererMemoized = useCallback(
-        ({ key, index, style }: ListRowProps) => (
-            <RoomListItemView room={rooms[index]} key={key} style={style} isSelected={activeIndex === index} />
-        ),
-        [rooms, activeIndex],
+export function RoomList({ vm: { roomsResult, activeIndex } }: RoomListProps): JSX.Element {
+    const lastSpaceId = useRef<string | undefined>(undefined);
+    const lastFilterKeys = useRef<FilterKey[] | undefined>(undefined);
+    const roomCount = roomsResult.rooms.length;
+    const getItemComponent = useCallback(
+        (
+            index: number,
+            item: Room,
+            context: ListContext<{
+                spaceId: string;
+                filterKeys: FilterKey[] | undefined;
+            }>,
+            onFocus: (e: React.FocusEvent) => void,
+        ): JSX.Element => {
+            const itemKey = item.roomId;
+            const isRovingItem = itemKey === context.tabIndexKey;
+            const isFocused = isRovingItem && context.focused;
+            const isSelected = activeIndex === index;
+            return (
+                <RoomListItemView
+                    room={item}
+                    key={itemKey}
+                    isSelected={isSelected}
+                    isFocused={isFocused}
+                    tabIndex={isRovingItem ? 0 : -1}
+                    roomIndex={index}
+                    roomCount={roomCount}
+                    onFocus={onFocus}
+                />
+            );
+        },
+        [activeIndex, roomCount],
     );
 
-    // The first div is needed to make the virtualized list take all the remaining space and scroll correctly
+    const getItemKey = useCallback((item: Room): string => {
+        return item.roomId;
+    }, []);
+
+    const scrollIntoViewOnChange = useCallback(
+        (params: {
+            context: ListContext<{ spaceId: string; filterKeys: FilterKey[] | undefined }>;
+        }): ScrollIntoViewLocation | null | undefined | false | void => {
+            const { spaceId, filterKeys } = params.context.context;
+            const shouldScrollIndexIntoView =
+                lastSpaceId.current !== spaceId || !isEqual(lastFilterKeys.current, filterKeys);
+            lastFilterKeys.current = filterKeys;
+            lastSpaceId.current = spaceId;
+
+            if (shouldScrollIndexIntoView) {
+                return {
+                    align: `start`,
+                    index: activeIndex || 0,
+                    behavior: "auto",
+                };
+            }
+            return false;
+        },
+        [activeIndex],
+    );
+
+    const keyDownCallback = useCallback((ev: React.KeyboardEvent) => {
+        const navAction = getKeyBindingsManager().getNavigationAction(ev);
+        if (navAction === KeyBindingAction.NextLandmark || navAction === KeyBindingAction.PreviousLandmark) {
+            LandmarkNavigation.findAndFocusNextLandmark(
+                Landmark.ROOM_LIST,
+                navAction === KeyBindingAction.PreviousLandmark,
+            );
+            ev.stopPropagation();
+            ev.preventDefault();
+            return;
+        }
+    }, []);
+
     return (
-        <RovingTabIndexProvider handleHomeEnd={true} handleUpDown={true}>
-            {({ onKeyDownHandler }) => (
-                <div
-                    className="mx_RoomList"
-                    data-testid="room-list"
-                    onKeyDown={(ev) => {
-                        const navAction = getKeyBindingsManager().getNavigationAction(ev);
-                        if (
-                            navAction === KeyBindingAction.NextLandmark ||
-                            navAction === KeyBindingAction.PreviousLandmark
-                        ) {
-                            LandmarkNavigation.findAndFocusNextLandmark(
-                                Landmark.ROOM_LIST,
-                                navAction === KeyBindingAction.PreviousLandmark,
-                            );
-                            ev.stopPropagation();
-                            ev.preventDefault();
-                            return;
-                        }
-                        onKeyDownHandler(ev);
-                    }}
-                >
-                    <AutoSizer>
-                        {({ height, width }) => (
-                            <List
-                                aria-label={_t("room_list|list_title")}
-                                className="mx_RoomList_List"
-                                rowRenderer={roomRendererMemoized}
-                                rowCount={rooms.length}
-                                rowHeight={48}
-                                height={height}
-                                width={width}
-                                scrollToIndex={activeIndex ?? 0}
-                                tabIndex={-1}
-                            />
-                        )}
-                    </AutoSizer>
-                </div>
-            )}
-        </RovingTabIndexProvider>
+        <ListView
+            context={{ spaceId: roomsResult.spaceId, filterKeys: roomsResult.filterKeys }}
+            scrollIntoViewOnChange={scrollIntoViewOnChange}
+            initialTopMostItemIndex={activeIndex}
+            data-testid="room-list"
+            role="listbox"
+            aria-label={_t("room_list|list_title")}
+            fixedItemHeight={48}
+            items={roomsResult.rooms}
+            getItemComponent={getItemComponent}
+            getItemKey={getItemKey}
+            isItemFocusable={() => true}
+            onKeyDown={keyDownCallback}
+        />
     );
 }

src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx

@@ -97,7 +97,10 @@ interface MoreOptionContentProps {
 
 export function MoreOptionContent({ vm }: MoreOptionContentProps): JSX.Element {
     return (
-        <>
+        <div
+            // We don't want keyboard navigation events to bubble up to the ListView changing the focused item
+            onKeyDown={(e) => e.stopPropagation()}
+        >
             {vm.canMarkAsRead && (
                 <MenuItem
                     Icon={MarkAsReadIcon}
@@ -157,7 +160,7 @@ export function MoreOptionContent({ vm }: MoreOptionContentProps): JSX.Element {
                 onClick={(evt) => evt.stopPropagation()}
                 hideChevron={true}
             />
-        </>
+        </div>
     );
 }
 
@@ -196,54 +199,59 @@ function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Eleme
     const checkComponent = <CheckIcon width="24px" height="24px" color="var(--cpd-color-icon-primary)" />;
 
     return (
-        <Menu
-            open={open}
-            onOpenChange={(isOpen) => {
-                setOpen(isOpen);
-                setMenuOpen(isOpen);
-            }}
-            title={_t("room_list|notification_options")}
-            showTitle={false}
-            align="start"
-            trigger={<NotificationButton isRoomMuted={vm.isNotificationMute} size="24px" />}
+        <div
+            // We don't want keyboard navigation events to bubble up to the ListView changing the focused item
+            onKeyDown={(e) => e.stopPropagation()}
         >
-            <MenuItem
-                aria-selected={vm.isNotificationAllMessage}
-                hideChevron={true}
-                label={_t("notifications|default_settings")}
-                onSelect={() => vm.setRoomNotifState(RoomNotifState.AllMessages)}
-                onClick={(evt) => evt.stopPropagation()}
+            <Menu
+                open={open}
+                onOpenChange={(isOpen) => {
+                    setOpen(isOpen);
+                    setMenuOpen(isOpen);
+                }}
+                title={_t("room_list|notification_options")}
+                showTitle={false}
+                align="start"
+                trigger={<NotificationButton isRoomMuted={vm.isNotificationMute} size="24px" />}
             >
-                {vm.isNotificationAllMessage && checkComponent}
-            </MenuItem>
-            <MenuItem
-                aria-selected={vm.isNotificationAllMessageLoud}
-                hideChevron={true}
-                label={_t("notifications|all_messages")}
-                onSelect={() => vm.setRoomNotifState(RoomNotifState.AllMessagesLoud)}
-                onClick={(evt) => evt.stopPropagation()}
-            >
-                {vm.isNotificationAllMessageLoud && checkComponent}
-            </MenuItem>
-            <MenuItem
-                aria-selected={vm.isNotificationMentionOnly}
-                hideChevron={true}
-                label={_t("notifications|mentions_keywords")}
-                onSelect={() => vm.setRoomNotifState(RoomNotifState.MentionsOnly)}
-                onClick={(evt) => evt.stopPropagation()}
-            >
-                {vm.isNotificationMentionOnly && checkComponent}
-            </MenuItem>
-            <MenuItem
-                aria-selected={vm.isNotificationMute}
-                hideChevron={true}
-                label={_t("notifications|mute_room")}
-                onSelect={() => vm.setRoomNotifState(RoomNotifState.Mute)}
-                onClick={(evt) => evt.stopPropagation()}
-            >
-                {vm.isNotificationMute && checkComponent}
-            </MenuItem>
-        </Menu>
+                <MenuItem
+                    aria-selected={vm.isNotificationAllMessage}
+                    hideChevron={true}
+                    label={_t("notifications|default_settings")}
+                    onSelect={() => vm.setRoomNotifState(RoomNotifState.AllMessages)}
+                    onClick={(evt) => evt.stopPropagation()}
+                >
+                    {vm.isNotificationAllMessage && checkComponent}
+                </MenuItem>
+                <MenuItem
+                    aria-selected={vm.isNotificationAllMessageLoud}
+                    hideChevron={true}
+                    label={_t("notifications|all_messages")}
+                    onSelect={() => vm.setRoomNotifState(RoomNotifState.AllMessagesLoud)}
+                    onClick={(evt) => evt.stopPropagation()}
+                >
+                    {vm.isNotificationAllMessageLoud && checkComponent}
+                </MenuItem>
+                <MenuItem
+                    aria-selected={vm.isNotificationMentionOnly}
+                    hideChevron={true}
+                    label={_t("notifications|mentions_keywords")}
+                    onSelect={() => vm.setRoomNotifState(RoomNotifState.MentionsOnly)}
+                    onClick={(evt) => evt.stopPropagation()}
+                >
+                    {vm.isNotificationMentionOnly && checkComponent}
+                </MenuItem>
+                <MenuItem
+                    aria-selected={vm.isNotificationMute}
+                    hideChevron={true}
+                    label={_t("notifications|mute_room")}
+                    onSelect={() => vm.setRoomNotifState(RoomNotifState.Mute)}
+                    onClick={(evt) => evt.stopPropagation()}
+                >
+                    {vm.isNotificationMute && checkComponent}
+                </MenuItem>
+            </Menu>
+        </div>
     );
 }
 

src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type JSX, memo, useCallback, useRef, useState } from "react";
+import React, { type JSX, memo, useCallback, useEffect, useRef, useState } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 
@@ -14,7 +14,6 @@ import { Flex } from "../../../../shared-components/utils/Flex";
 import { RoomListItemMenuView } from "./RoomListItemMenuView";
 import { NotificationDecoration } from "../NotificationDecoration";
 import { RoomAvatarView } from "../../avatars/RoomAvatarView";
-import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
 import { RoomListItemContextMenuView } from "./RoomListItemContextMenuView";
 
 interface RoomListItemViewProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -26,6 +25,22 @@ interface RoomListItemViewProps extends React.HTMLAttributes<HTMLButtonElement>
      * Whether the room is selected
      */
     isSelected: boolean;
+    /**
+     * Whether the room is focused
+     */
+    isFocused: boolean;
+    /**
+     * A callback that indicates the item has received focus
+     */
+    onFocus: (e: React.FocusEvent) => void;
+    /**
+     * The index of the room in the list
+     */
+    roomIndex: number;
+    /**
+     * The total number of rooms in the list
+     */
+    roomCount: number;
 }
 
 /**
@@ -34,18 +49,19 @@ interface RoomListItemViewProps extends React.HTMLAttributes<HTMLButtonElement>
 export const RoomListItemView = memo(function RoomListItemView({
     room,
     isSelected,
+    isFocused,
+    onFocus,
+    roomIndex: index,
+    roomCount: count,
     ...props
 }: RoomListItemViewProps): JSX.Element {
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const [onFocus, isActive, ref] = useRovingTabIndex(buttonRef);
-
+    const ref = useRef<HTMLButtonElement>(null);
     const vm = useRoomListItemViewModel(room);
-
-    const [isHover, setIsHoverWithDelay] = useIsHover();
+    const [isHover, setHover] = useState(false);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     // The compound menu in RoomListItemMenuView needs to be rendered when the hover menu is shown
     // Using display: none; and then display:flex when hovered in CSS causes the menu to be misaligned
-    const showHoverDecoration = isMenuOpen || isHover;
+    const showHoverDecoration = isMenuOpen || isFocused || isHover;
     const showHoverMenu = showHoverDecoration && vm.showHoverMenu;
 
     const closeMenu = useCallback(() => {
@@ -54,8 +70,15 @@ export const RoomListItemView = memo(function RoomListItemView({
         setTimeout(() => setIsMenuOpen(false), 10);
     }, []);
 
+    useEffect(() => {
+        if (isFocused) {
+            ref.current?.focus({ preventScroll: true, focusVisible: true });
+        }
+    }, [isFocused]);
+
     const content = (
-        <button
+        <Flex
+            as="button"
             ref={ref}
             className={classNames("mx_RoomListItemView", {
                 mx_RoomListItemView_hover: showHoverDecoration,
@@ -63,63 +86,59 @@ export const RoomListItemView = memo(function RoomListItemView({
                 mx_RoomListItemView_selected: isSelected,
                 mx_RoomListItemView_bold: vm.isBold,
             })}
+            gap="var(--cpd-space-3x)"
+            align="center"
             type="button"
+            role="option"
+            aria-posinset={index + 1}
+            aria-setsize={count}
             aria-selected={isSelected}
             aria-label={vm.a11yLabel}
             onClick={() => vm.openRoom()}
-            onMouseOver={() => setIsHoverWithDelay(true)}
-            onMouseOut={() => setIsHoverWithDelay(false)}
-            onFocus={() => {
-                setIsHoverWithDelay(true);
-                onFocus();
-            }}
-            // Adding a timeout because when tabbing to go to the more options and notification menu, the focus moves out of the button
-            // The blur makes the button lose the hover state and these menu are not shown
-            // We delay the blur event to give time to the focus to move to the menu
-            onBlur={() => setIsHoverWithDelay(false, 10)}
-            tabIndex={isActive ? 0 : -1}
+            onFocus={onFocus}
+            onMouseOver={() => setHover(true)}
+            onMouseOut={() => setHover(false)}
+            onBlur={() => setHover(false)}
+            tabIndex={isFocused ? 0 : -1}
             {...props}
         >
-            {/* We need this extra div between the button and the content in order to add a padding which is not messing with the virtualized list */}
-            <Flex className="mx_RoomListItemView_container" gap="var(--cpd-space-3x)" align="center">
-                <RoomAvatarView room={room} />
-                <Flex
-                    className="mx_RoomListItemView_content"
-                    gap="var(--cpd-space-2x)"
-                    align="center"
-                    justify="space-between"
-                >
-                    {/* We truncate the room name when too long. Title here is to show the full name on hover */}
-                    <div className="mx_RoomListItemView_text">
-                        <div className="mx_RoomListItemView_roomName" title={vm.name}>
-                            {vm.name}
-                        </div>
-                        {vm.messagePreview && (
-                            <div className="mx_RoomListItemView_messagePreview" title={vm.messagePreview}>
-                                {vm.messagePreview}
-                            </div>
-                        )}
+            <RoomAvatarView room={room} />
+            <Flex
+                className="mx_RoomListItemView_content"
+                gap="var(--cpd-space-2x)"
+                align="center"
+                justify="space-between"
+            >
+                {/* We truncate the room name when too long. Title here is to show the full name on hover */}
+                <div className="mx_RoomListItemView_text">
+                    <div className="mx_RoomListItemView_roomName" title={vm.name}>
+                        {vm.name}
                     </div>
-                    {showHoverMenu ? (
-                        <RoomListItemMenuView
-                            room={room}
-                            setMenuOpen={(isOpen) => (isOpen ? setIsMenuOpen(true) : closeMenu())}
-                        />
-                    ) : (
-                        <>
-                            {/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */}
-                            {vm.showNotificationDecoration && (
-                                <NotificationDecoration
-                                    notificationState={vm.notificationState}
-                                    aria-hidden={true}
-                                    hasVideoCall={vm.hasParticipantInCall}
-                                />
-                            )}
-                        </>
+                    {vm.messagePreview && (
+                        <div className="mx_RoomListItemView_messagePreview" title={vm.messagePreview}>
+                            {vm.messagePreview}
+                        </div>
                     )}
-                </Flex>
+                </div>
+                {showHoverMenu ? (
+                    <RoomListItemMenuView
+                        room={room}
+                        setMenuOpen={(isOpen) => (isOpen ? setIsMenuOpen(true) : closeMenu())}
+                    />
+                ) : (
+                    <>
+                        {/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */}
+                        {vm.showNotificationDecoration && (
+                            <NotificationDecoration
+                                notificationState={vm.notificationState}
+                                aria-hidden={true}
+                                hasVideoCall={vm.hasParticipantInCall}
+                            />
+                        )}
+                    </>
+                )}
             </Flex>
-        </button>
+        </Flex>
     );
 
     if (!vm.showContextMenu) return content;
@@ -140,33 +159,3 @@ export const RoomListItemView = memo(function RoomListItemView({
         </RoomListItemContextMenuView>
     );
 });
-
-/**
- * Custom hook to manage the hover state of the room list item
- * If the timeout is set, it will set the hover state after the timeout
- * If the timeout is not set, it will set the hover state immediately
- * When the set method is called, it will clear any existing timeout
- *
- * @returns {boolean} isHover - The hover state
- */
-function useIsHover(): [boolean, (value: boolean, timeout?: number) => void] {
-    const [isHover, setIsHover] = useState(false);
-    // Store the timeout ID
-    const timeoutRef = useRef<number | undefined>(undefined);
-
-    const setIsHoverWithDelay = useCallback((value: boolean, timeout?: number): void => {
-        // Clear the timeout if it exists
-        clearTimeout(timeoutRef.current);
-
-        // No delay, set the value immediately
-        if (timeout === undefined) {
-            setIsHover(value);
-            return;
-        }
-
-        // Set a timeout to set the value after the delay
-        timeoutRef.current = setTimeout(() => setIsHover(value), timeout);
-    }, []);
-
-    return [isHover, setIsHoverWithDelay];
-}

src/components/views/rooms/RoomListPanel/RoomListView.tsx

@@ -17,7 +17,7 @@ import { RoomListPrimaryFilters } from "./RoomListPrimaryFilters";
  */
 export function RoomListView(): JSX.Element {
     const vm = useRoomListViewModel();
-    const isRoomListEmpty = vm.rooms.length === 0;
+    const isRoomListEmpty = vm.roomsResult.rooms.length === 0;
     let listBody;
     if (vm.isLoadingRooms) {
         listBody = <div className="mx_RoomListSkeleton" />;

src/components/views/settings/JoinRuleSettings.tsx

@@ -18,7 +18,7 @@ import SpaceStore from "../../../stores/spaces/SpaceStore";
 import Modal from "../../../Modal";
 import ManageRestrictedJoinRuleDialog from "../dialogs/ManageRestrictedJoinRuleDialog";
 import RoomUpgradeWarningDialog, { type IFinishedOpts } from "../dialogs/RoomUpgradeWarningDialog";
-import { upgradeRoom } from "../../../utils/RoomUpgrade";
+import { type RoomUpgradeProgress, upgradeRoom } from "../../../utils/RoomUpgrade";
 import { arrayHasDiff } from "../../../utils/arrays";
 import { useLocalEcho } from "../../../hooks/useLocalEcho";
 import dis from "../../../dispatcher/dispatcher";
@@ -120,7 +120,7 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
                 opts: IFinishedOpts,
                 fn: (progressText: string, progress: number, total: number) => void,
             ): Promise<void> => {
-                const roomId = await upgradeRoom(room, targetVersion, opts.invite, true, true, true, (progress) => {
+                const progressCallback = (progress: RoomUpgradeProgress): void => {
                     const total = 2 + progress.updateSpacesTotal + progress.inviteUsersTotal;
                     if (!progress.roomUpgraded) {
                         fn(_t("room_settings|security|join_rule_upgrade_upgrading_room"), 0, total);
@@ -151,7 +151,20 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
                             total,
                         );
                     }
-                });
+                };
+                const roomId = await upgradeRoom(
+                    room,
+                    targetVersion,
+                    opts.invite,
+                    true,
+                    true,
+                    true,
+                    progressCallback,
+
+                    // We want to keep the RoomUpgradeDialog open during the upgrade, so don't replace it with the
+                    // invite progress dialog.
+                    /* inhibitInviteProgressDialog: */ true,
+                );
 
                 closeSettingsFn?.();
 

src/components/views/settings/Notifications.tsx

@@ -807,7 +807,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
         return (
             <div>
                 <div data-testid={`notif-section-${category}`} className="mx_UserNotifSettings_grid">
-                    <SettingsSubsectionHeading heading={sectionName} />
+                    <SettingsSubsectionHeading heading={sectionName} as="h2" />
                     <span className="mx_UserNotifSettings_gridColumnLabel">{VectorStateToLabel[VectorState.Off]}</span>
                     <span className="mx_UserNotifSettings_gridColumnLabel">{VectorStateToLabel[VectorState.On]}</span>
                     <span className="mx_UserNotifSettings_gridColumnLabel">{VectorStateToLabel[VectorState.Loud]}</span>

src/components/views/settings/notifications/NotificationSettings2.tsx

@@ -34,6 +34,7 @@ import { SettingsSection } from "../shared/SettingsSection";
 import { SettingsSubsection } from "../shared/SettingsSubsection";
 import { NotificationPusherSettings } from "./NotificationPusherSettings";
 import SettingsFlag from "../../elements/SettingsFlag";
+import { SettingsSubsectionHeading } from "../shared/SettingsSubsectionHeading";
 
 enum NotificationDefaultLevels {
     AllMessages = "all_messages",
@@ -151,7 +152,12 @@ export default function NotificationSettings2(): JSX.Element {
                     />
                 </div>
                 <SettingsSubsection
-                    heading={_t("settings|notifications|default_setting_section")}
+                    heading={
+                        <SettingsSubsectionHeading
+                            heading={_t("settings|notifications|default_setting_section")}
+                            as="h2"
+                        />
+                    }
                     description={_t("settings|notifications|default_setting_description")}
                 >
                     <StyledRadioGroup
@@ -178,7 +184,12 @@ export default function NotificationSettings2(): JSX.Element {
                     />
                 </SettingsSubsection>
                 <SettingsSubsection
-                    heading={_t("settings|notifications|play_sound_for_section")}
+                    heading={
+                        <SettingsSubsectionHeading
+                            heading={_t("settings|notifications|play_sound_for_section")}
+                            as="h2"
+                        />
+                    }
                     description={_t("settings|notifications|play_sound_for_description")}
                 >
                     <LabelledCheckbox
@@ -224,7 +235,9 @@ export default function NotificationSettings2(): JSX.Element {
                         }}
                     />
                 </SettingsSubsection>
-                <SettingsSubsection heading={_t("settings|notifications|other_section")}>
+                <SettingsSubsection
+                    heading={<SettingsSubsectionHeading heading={_t("settings|notifications|other_section")} as="h2" />}
+                >
                     <LabelledCheckbox
                         label={_t("settings|notifications|invites")}
                         value={settings.activity.invite}
@@ -269,7 +282,9 @@ export default function NotificationSettings2(): JSX.Element {
                     />
                 </SettingsSubsection>
                 <SettingsSubsection
-                    heading={_t("settings|notifications|mentions_keywords")}
+                    heading={
+                        <SettingsSubsectionHeading heading={_t("settings|notifications|mentions_keywords")} as="h2" />
+                    }
                     description={_t(
                         "settings|notifications|keywords",
                         {},

src/components/views/settings/shared/SettingsSubsectionHeading.tsx

@@ -12,13 +12,19 @@ import Heading from "../../typography/Heading";
 
 export interface SettingsSubsectionHeadingProps extends HTMLAttributes<HTMLDivElement> {
     heading: string;
+    as?: React.ComponentProps<typeof Heading>["as"];
     children?: React.ReactNode;
 }
 
-export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({ heading, children, ...rest }) => {
+export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({
+    heading,
+    as = "h3",
+    children,
+    ...rest
+}) => {
     return (
         <div {...rest} className="mx_SettingsSubsectionHeading">
-            <Heading className="mx_SettingsSubsectionHeading_heading" size="4" as="h3">
+            <Heading className="mx_SettingsSubsectionHeading_heading" size="4" as={as}>
                 {heading}
             </Heading>
             {children}

src/i18n/strings/en_EN.json

@@ -1366,6 +1366,10 @@
         "name_email_mxid_share_space": "Invite someone using their name, email address, username (like <userId/>) or <a>share this space</a>.",
         "name_mxid_share_room": "Invite someone using their name, username (like <userId/>) or <a>share this room</a>.",
         "name_mxid_share_space": "Invite someone using their name, username (like <userId/>) or <a>share this space</a>.",
+        "progress": {
+            "dont_close": "Do not close the app until finished.",
+            "preparing": "Preparing invitations..."
+        },
         "recents_section": "Recent Conversations",
         "room_failed_partial": "We sent the others, but the below people couldn't be invited to <RoomName/>",
         "room_failed_partial_title": "Some invites couldn't be sent",

src/i18n/strings/nb_NO.json

@@ -1366,6 +1366,10 @@
         "name_email_mxid_share_space": "Inviter noen ved å bruke navn, e-postadresse, brukernavn (lik <userId/>) eller <a> del dette området</a>.",
         "name_mxid_share_room": "Inviter noen ved å bruke navnet, brukernavnet (som <userId/>) eller <a>del dette rommet</a>.",
         "name_mxid_share_space": "Inviter noen ved å bruke navnet sitt, brukernavnet (lik <userId/>) eller <a> dele dette området</a>.",
+        "progress": {
+            "dont_close": "Ikke lukk appen før den er ferdig.",
+            "preparing": "Forbereder invitasjoner..."
+        },
         "recents_section": "Nylige samtaler",
         "room_failed_partial": "Vi sendte de andre, men folkene nedenfor kunne ikke inviteres til <RoomName/>",
         "room_failed_partial_title": "Noen invitasjoner kunne ikke sendes",

src/i18n/strings/sk.json

@@ -1380,6 +1380,10 @@
         "name_email_mxid_share_space": "Pozvite niekoho pomocou jeho mena, e-mailovej adresy, používateľského mena (napríklad <userId/>) alebo <a>zdieľajte tento priestor</a>.",
         "name_mxid_share_room": "Pozvite niekoho pomocou jeho mena, používateľského mena (napríklad <userId/>) alebo <a>zdieľate túto miestnosť</a>.",
         "name_mxid_share_space": "Pozvite niekoho pomocou jeho mena, používateľského mena (napríklad <userId/>) alebo <a>zdieľajte tento priestor</a>.",
+        "progress": {
+            "dont_close": "Nezatvárajte aplikáciu, kým nie je proces dokončený.",
+            "preparing": "Príprava pozvánok..."
+        },
         "recents_section": "Nedávne konverzácie",
         "room_failed_partial": "Ostatným sme pozvánky poslali, ale nižšie uvedené osoby nemohli byť pozvané do <RoomName/>",
         "room_failed_partial_title": "Niektoré pozvánky nebolo možné odoslať",
@@ -1782,6 +1786,7 @@
     },
     "power_level": {
         "admin": "Správca",
+        "creator": "Vlastník",
         "custom": "Vlastný (%(level)s)",
         "custom_level": "Vlastná úroveň",
         "default": "Predvolené",
@@ -1940,6 +1945,7 @@
         "thread_list": {
             "context_menu_label": "Možnosti vlákna"
         },
+        "title": "Pravý panel",
         "video_room_chat": {
             "title": "Konverzácia"
         }

src/i18n/strings/sv.json

@@ -1366,6 +1366,10 @@
         "name_email_mxid_share_space": "Bjud in någon med deras namn, e-postadress eller användarnamn (som <userId/>), eller <a>dela det här rummet</a>.",
         "name_mxid_share_room": "Bjud in någon med deras namn eller användarnamn (som <userId/>) eller <a>dela det här rummet</a>.",
         "name_mxid_share_space": "Bjud in någon med deras namn eller användarnamn (som <userId/>), eller <a>dela det här utrymmet</a>.",
+        "progress": {
+            "dont_close": "Stäng inte appen förrän det är klart.",
+            "preparing": "Förbereder inbjudningar …"
+        },
         "recents_section": "Senaste konversationerna",
         "room_failed_partial": "Vi skickade de andra, men personerna nedan kunde inte bjudas in till <RoomName/>",
         "room_failed_partial_title": "Vissa inbjudningar kunde inte skickas",
@@ -1763,6 +1767,7 @@
     },
     "power_level": {
         "admin": "Administratör",
+        "creator": "Ägare",
         "custom": "Anpassad (%(level)s)",
         "custom_level": "Anpassad nivå",
         "default": "Standard",
@@ -1915,6 +1920,7 @@
         "thread_list": {
             "context_menu_label": "Trådalternativ"
         },
+        "title": "Högerpanel",
         "video_room_chat": {
             "title": "Chatt"
         }

src/stores/room-list-v3/RoomListStoreV3.ts

@@ -22,7 +22,7 @@ import { AlphabeticSorter } from "./skip-list/sorters/AlphabeticSorter";
 import { readReceiptChangeIsFor } from "../../utils/read-receipts";
 import { EffectiveMembership, getEffectiveMembership, getEffectiveMembershipTag } from "../../utils/membership";
 import SpaceStore from "../spaces/SpaceStore";
-import { UPDATE_HOME_BEHAVIOUR, UPDATE_SELECTED_SPACE } from "../spaces";
+import { type SpaceKey, UPDATE_HOME_BEHAVIOUR, UPDATE_SELECTED_SPACE } from "../spaces";
 import { FavouriteFilter } from "./skip-list/filters/FavouriteFilter";
 import { UnreadFilter } from "./skip-list/filters/UnreadFilter";
 import { PeopleFilter } from "./skip-list/filters/PeopleFilter";
@@ -56,6 +56,16 @@ export enum RoomListStoreV3Event {
     ListsLoaded = "lists_loaded",
 }
 
+// The result object for returning rooms from the store
+export type RoomsResult = {
+    // The ID of the active space queried
+    spaceId: SpaceKey;
+    // The filter queried
+    filterKeys?: FilterKey[];
+    // The resulting list of rooms
+    rooms: Room[];
+};
+
 export const LISTS_UPDATE_EVENT = RoomListStoreV3Event.ListsUpdate;
 export const LISTS_LOADED_EVENT = RoomListStoreV3Event.ListsLoaded;
 /**
@@ -107,9 +117,15 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
 
      * @param filterKeys Optional array of filters that the rooms must match against.
      */
-    public getSortedRoomsInActiveSpace(filterKeys?: FilterKey[]): Room[] {
-        if (this.roomSkipList?.initialized) return Array.from(this.roomSkipList.getRoomsInActiveSpace(filterKeys));
-        else return [];
+    public getSortedRoomsInActiveSpace(filterKeys?: FilterKey[]): RoomsResult {
+        const spaceId = SpaceStore.instance.activeSpace;
+        if (this.roomSkipList?.initialized)
+            return {
+                spaceId: spaceId,
+                filterKeys,
+                rooms: Array.from(this.roomSkipList.getRoomsInActiveSpace(filterKeys)),
+            };
+        else return { spaceId: spaceId, filterKeys, rooms: [] };
     }
 
     /**

src/utils/MegolmExportEncryption.ts

@@ -58,14 +58,14 @@ export async function decryptMegolmKeyFile(data: ArrayBuffer, password: string):
         throw friendlyError("Invalid file: too short", _t("encryption|import_invalid_keyfile", { brand }));
     }
 
-    const salt = body.subarray(1, 1 + 16).slice();
-    const iv = body.subarray(17, 17 + 16).slice();
+    const salt = body.subarray(1, 1 + 16);
+    const iv = body.subarray(17, 17 + 16);
     const iterations = (body[33] << 24) | (body[34] << 16) | (body[35] << 8) | body[36];
-    const ciphertext = body.subarray(37, 37 + ciphertextLength).slice();
-    const hmac = body.subarray(-32).slice();
+    const ciphertext = body.subarray(37, 37 + ciphertextLength);
+    const hmac = body.subarray(-32);
 
     const [aesKey, hmacKey] = await deriveKeys(salt, iterations, password);
-    const toVerify = body.subarray(0, -32).slice();
+    const toVerify = body.subarray(0, -32);
 
     let isValid;
     try {
@@ -180,11 +180,7 @@ export async function encryptMegolmKeyFile(
  * @param {String} password  password
  * @return {Promise<[CryptoKey, CryptoKey]>} promise for [aes key, hmac key]
  */
-async function deriveKeys(
-    salt: Uint8Array<ArrayBuffer>,
-    iterations: number,
-    password: string,
-): Promise<[CryptoKey, CryptoKey]> {
+async function deriveKeys(salt: Uint8Array, iterations: number, password: string): Promise<[CryptoKey, CryptoKey]> {
     const start = new Date();
 
     let key;

src/utils/MultiInviter.ts

@@ -16,6 +16,7 @@ import Modal from "../Modal";
 import SettingsStore from "../settings/SettingsStore";
 import AskInviteAnywayDialog from "../components/views/dialogs/AskInviteAnywayDialog";
 import ConfirmUserActionDialog from "../components/views/dialogs/ConfirmUserActionDialog";
+import { openInviteProgressDialog } from "../components/views/dialogs/InviteProgressDialog.tsx";
 
 export enum InviteState {
     Invited = "invited",
@@ -44,6 +45,12 @@ const USER_BANNED = "IO.ELEMENT.BANNED";
 export interface MultiInviterOptions {
     /** Optional callback, fired after each invite */
     progressCallback?: () => void;
+
+    /**
+     * By default, we will pop up a "Preparing invitations..." dialog while the invites are being sent. Set this to
+     * `true` to inhibit it (in which case, you probably want to implement another bit of feedback UI).
+     */
+    inhibitProgressDialog?: boolean;
 }
 
 /**
@@ -88,49 +95,59 @@ export default class MultiInviter {
         this.addresses.push(...addresses);
         this.reason = reason;
 
-        for (const addr of this.addresses) {
-            if (getAddressType(addr) === null) {
-                this.completionStates[addr] = InviteState.Error;
-                this.errors[addr] = {
-                    errcode: "M_INVALID",
-                    errorText: _t("invite|invalid_address"),
-                };
-            }
+        let closeDialog: (() => void) | undefined;
+        if (!this.options.inhibitProgressDialog) {
+            closeDialog = openInviteProgressDialog();
         }
 
-        for (const addr of this.addresses) {
-            // don't try to invite it if it's an invalid address
-            // (it will already be marked as an error though,
-            // so no need to do so again)
-            if (getAddressType(addr) === null) {
-                continue;
+        try {
+            for (const addr of this.addresses) {
+                if (getAddressType(addr) === null) {
+                    this.completionStates[addr] = InviteState.Error;
+                    this.errors[addr] = {
+                        errcode: "M_INVALID",
+                        errorText: _t("invite|invalid_address"),
+                    };
+                }
             }
 
-            // don't re-invite (there's no way in the UI to do this, but
-            // for sanity's sake)
-            if (this.completionStates[addr] === InviteState.Invited) {
-                continue;
+            for (const addr of this.addresses) {
+                // don't try to invite it if it's an invalid address
+                // (it will already be marked as an error though,
+                // so no need to do so again)
+                if (getAddressType(addr) === null) {
+                    continue;
+                }
+
+                // don't re-invite (there's no way in the UI to do this, but
+                // for sanity's sake)
+                if (this.completionStates[addr] === InviteState.Invited) {
+                    continue;
+                }
+
+                await this.doInvite(addr, false);
+
+                if (this._fatal) {
+                    // `doInvite` suffered a fatal error. The error should have been recorded in `errors`; it's up
+                    // to the caller to report back to the user.
+                    return this.completionStates;
+                }
             }
 
-            await this.doInvite(addr, false);
+            if (Object.keys(this.errors).length > 0) {
+                // There were problems inviting some people - see if we can invite them
+                // without caring if they exist or not.
+                const unknownProfileUsers = Object.keys(this.errors).filter((a) =>
+                    UNKNOWN_PROFILE_ERRORS.includes(this.errors[a].errcode),
+                );
 
-            if (this._fatal) {
-                // `doInvite` suffered a fatal error. The error should have been recorded in `errors`; it's up
-                // to the caller to report back to the user.
-                return this.completionStates;
-            }
-        }
-
-        if (Object.keys(this.errors).length > 0) {
-            // There were problems inviting some people - see if we can invite them
-            // without caring if they exist or not.
-            const unknownProfileUsers = Object.keys(this.errors).filter((a) =>
-                UNKNOWN_PROFILE_ERRORS.includes(this.errors[a].errcode),
-            );
-
-            if (unknownProfileUsers.length > 0) {
-                await this.handleUnknownProfileUsers(unknownProfileUsers);
+                if (unknownProfileUsers.length > 0) {
+                    await this.handleUnknownProfileUsers(unknownProfileUsers);
+                }
             }
+        } finally {
+            // Remember to close the progress dialog, if we opened one.
+            closeDialog?.();
         }
 
         return this.completionStates;

src/utils/RoomUpgrade.ts

@@ -16,8 +16,9 @@ import { _t } from "../languageHandler";
 import ErrorDialog from "../components/views/dialogs/ErrorDialog";
 import SpaceStore from "../stores/spaces/SpaceStore";
 import Spinner from "../components/views/elements/Spinner";
+import type { MultiInviterOptions } from "./MultiInviter";
 
-interface IProgress {
+export interface RoomUpgradeProgress {
     roomUpgraded: boolean;
     roomSynced?: boolean;
     inviteUsersProgress?: number;
@@ -50,7 +51,8 @@ export async function upgradeRoom(
     handleError = true,
     updateSpaces = true,
     awaitRoom = false,
-    progressCallback?: (progress: IProgress) => void,
+    progressCallback?: (progress: RoomUpgradeProgress) => void,
+    inhibitInviteProgressDialog = false,
 ): Promise<string> {
     const cli = room.client;
     let spinnerModal: IHandle<any> | undefined;
@@ -77,7 +79,7 @@ export async function upgradeRoom(
             ) as Room[];
     }
 
-    const progress: IProgress = {
+    const progress: RoomUpgradeProgress = {
         roomUpgraded: false,
         roomSynced: awaitRoom || inviteUsers ? false : undefined,
         inviteUsersProgress: inviteUsers ? 0 : undefined,
@@ -112,9 +114,12 @@ export async function upgradeRoom(
 
     if (toInvite.length > 0) {
         // Errors are handled internally to this function
-        await inviteUsersToRoom(cli, newRoomId, toInvite, () => {
-            progress.inviteUsersProgress!++;
-            progressCallback?.(progress);
+        await inviteUsersToRoom(cli, newRoomId, toInvite, {
+            progressCallback: () => {
+                progress.inviteUsersProgress!++;
+                progressCallback?.(progress);
+            },
+            inhibitProgressDialog: inhibitInviteProgressDialog,
         });
     }
 
@@ -150,9 +155,9 @@ async function inviteUsersToRoom(
     client: MatrixClient,
     roomId: string,
     userIds: string[],
-    progressCallback?: () => void,
+    inviteOptions: MultiInviterOptions,
 ): Promise<void> {
-    const result = await inviteMultipleToRoom(client, roomId, userIds, { progressCallback });
+    const result = await inviteMultipleToRoom(client, roomId, userIds, inviteOptions);
     const room = client.getRoom(roomId)!;
     showAnyInviteErrors(result.states, room, result.inviter);
 }

src/utils/arrays.ts

@@ -297,8 +297,8 @@ export class GroupedArray<K, T> {
     }
 }
 
-export const concat = (...arrays: Uint8Array<ArrayBuffer>[]): Uint8Array<ArrayBuffer> => {
-    return arrays.reduce((concatenatedSoFar: Uint8Array<ArrayBuffer>, toBeConcatenated: Uint8Array<ArrayBuffer>) => {
+export const concat = (...arrays: Uint8Array[]): Uint8Array => {
+    return arrays.reduce((concatenatedSoFar: Uint8Array, toBeConcatenated: Uint8Array) => {
         const concatenated = new Uint8Array(concatenatedSoFar.length + toBeConcatenated.length);
         concatenated.set(concatenatedSoFar, 0);
         concatenated.set(toBeConcatenated, concatenatedSoFar.length);

src/utils/tokens/pickling.ts

@@ -48,7 +48,7 @@ export interface EncryptedPickleKey {
  * @param {string} deviceId The device ID which owns the pickle key.
  * @return {Uint8Array} The additional data as a Uint8Array.
  */
-export function getPickleAdditionalData(userId: string, deviceId: string): Uint8Array<ArrayBuffer> {
+export function getPickleAdditionalData(userId: string, deviceId: string): Uint8Array {
     const additionalData = new Uint8Array(userId.length + deviceId.length + 1);
     for (let i = 0; i < userId.length; i++) {
         additionalData[i] = userId.charCodeAt(i);
@@ -70,7 +70,7 @@ export function getPickleAdditionalData(userId: string, deviceId: string): Uint8
  * @returns Data object ready for storing in indexeddb.
  */
 export async function encryptPickleKey(
-    pickleKey: Uint8Array<ArrayBuffer>,
+    pickleKey: Uint8Array,
     userId: string,
     deviceId: string,
 ): Promise<EncryptedPickleKey | undefined> {

src/utils/tokens/tokens.ts

@@ -39,7 +39,7 @@ export const HAS_REFRESH_TOKEN_STORAGE_KEY = "mx_has_refresh_token";
  * @param pickleKey
  * @returns AES key
  */
-async function pickleKeyToAesKey(pickleKey: string): Promise<Uint8Array<ArrayBuffer>> {
+async function pickleKeyToAesKey(pickleKey: string): Promise<Uint8Array> {
     const pickleKeyBuffer = new Uint8Array(pickleKey.length);
     for (let i = 0; i < pickleKey.length; i++) {
         pickleKeyBuffer[i] = pickleKey.charCodeAt(i);