Reuse PushProcessor from MatrixClient (#29561)

* Reuse PushProcessor from MatrixClient

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Reuse PushProcessor getPushRuleGlobRegex

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update regex handling

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

.github/actions/download-verify-element-tarball/action.yml

@@ -11,7 +11,7 @@ runs:
     using: composite
     steps:
         - name: Download release tarball
-          uses: robinraju/release-downloader@a96f54c1b5f5e09e47d9504526e96febd949d4c2 # v1
+          uses: robinraju/release-downloader@daf26c55d821e836577a15f77d86ddc078948b05 # v1
           with:
               tag: ${{ inputs.tag }}
               fileName: element-*.tar.gz*

.github/workflows/build_develop.yml

@@ -26,12 +26,6 @@ jobs:
             R2_URL: ${{ vars.CF_R2_S3_API }}
             R2_PUBLIC_URL: "https://element-web-develop.element.io"
         steps:
-            # Workaround for https://www.cloudflarestatus.com/incidents/t5nrjmpxc1cj
-            - uses: unfor19/install-aws-cli-action@v1
-              with:
-                  version: 2.22.35
-                  verbose: false
-                  arch: amd64
             - uses: actions/checkout@v4
 
             - uses: actions/setup-node@v4
@@ -115,10 +109,11 @@ jobs:
             # We keep the latest develop.tar.gz on R2 instead of relying on the github artifact uploaded earlier
             # as the expires after 24h and requires auth to download.
             # Element Desktop's fetch script uses this tarball to fetch latest develop to build Nightlies.
+            # Checksum algorithm specified as per https://developers.cloudflare.com/r2/examples/aws/aws-cli/
             - name: Deploy to R2
               run: |
-                  aws s3 cp dist/develop.tar.gz s3://$R2_BUCKET/develop.tar.gz --endpoint-url $R2_URL --region=auto
-                  aws s3 cp _deploy/ s3://$R2_BUCKET/ --recursive --endpoint-url $R2_URL --region=auto
+                  aws s3 cp dist/develop.tar.gz s3://$R2_BUCKET/develop.tar.gz --endpoint-url $R2_URL --region=auto --checksum-algorithm CRC32
+                  aws s3 cp _deploy/ s3://$R2_BUCKET/ --recursive --endpoint-url $R2_URL --region=auto --checksum-algorithm CRC32
               env:
                   AWS_ACCESS_KEY_ID: ${{ secrets.CF_R2_ACCESS_KEY_ID }}
                   AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_R2_TOKEN }}

.github/workflows/docker.yaml

@@ -37,14 +37,14 @@ jobs:
                   install: true
 
             - name: Login to Docker Hub
-              uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
+              uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3
               if: github.event_name != 'pull_request'
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
 
             - name: Login to GitHub Container Registry
-              uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
+              uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3
               if: github.event_name != 'pull_request'
               with:
                   registry: ghcr.io

.github/workflows/tests.yml

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

package.json

@@ -68,13 +68,13 @@
         "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
     },
     "resolutions": {
-        "@playwright/test": "1.50.1",
+        "@playwright/test": "1.51.1",
         "@types/react": "18.3.18",
         "@types/react-dom": "18.3.5",
-        "oidc-client-ts": "3.1.0",
+        "oidc-client-ts": "3.2.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001701",
-        "testcontainers": "10.20.0",
+        "caniuse-lite": "1.0.30001704",
+        "testcontainers": "10.21.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
@@ -274,7 +274,7 @@
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.5.2",
+        "prettier": "3.5.3",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",

playwright/e2e/crypto/toasts.spec.ts

@@ -29,7 +29,9 @@ test.describe("Key storage out of sync toast", () => {
     });
 
     test("should prompt for recovery key if 'enter recovery key' pressed", { tag: "@screenshot" }, async ({ page }) => {
-        // Need to wait for 2 to appear since playwright only evaluates 'first()' initially, so the waiting won't work
+        // We need to wait for there to be two toasts as the wait below won't work in isolation:
+        // playwright only evaluates the 'first()' call initially, not subsequent times it checks, so
+        // it would always be checking the same toast, even if another one is now the first.
         await expect(page.getByRole("alert")).toHaveCount(2);
         await expect(page.getByRole("alert").first()).toMatchScreenshot("key-storage-out-of-sync-toast.png");
 

playwright/e2e/crypto/utils.ts

@@ -221,6 +221,9 @@ export async function logIntoElement(page: Page, credentials: Credentials, secur
         await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key" }).click();
 
         const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "use your Recovery Key" });
+        // If the user has set a recovery *passphrase*, they'll be prompted for that first and have to click
+        // through to enter the recovery key which is what we have here. If they haven't, they'll be prompted
+        // for a recovery key straight away. We click the button if it's there so this works in both cases.
         if (await useSecurityKey.isVisible()) {
             await useSecurityKey.click();
         }

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

@@ -18,14 +18,6 @@ test.describe("Room list filters and sort", () => {
         labsFlags: ["feature_new_room_list"],
     });
 
-    /**
-     * Get the room list
-     * @param page
-     */
-    function getRoomList(page: Page) {
-        return page.getByTestId("room-list");
-    }
-
     function getPrimaryFilters(page: Page) {
         return page.getByRole("listbox", { name: "Room list filters" });
     }
@@ -33,56 +25,113 @@ test.describe("Room list filters and sort", () => {
     test.beforeEach(async ({ page, app, bot, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
-
-        await app.client.createRoom({ name: "empty room" });
-
-        const unReadDmId = await bot.createRoom({
-            name: "unread dm",
-            invite: [user.userId],
-            is_direct: true,
-        });
-        await bot.sendMessage(unReadDmId, "I am a robot. Beep.");
-
-        const unReadRoomId = await app.client.createRoom({ name: "unread room" });
-        await app.client.inviteUser(unReadRoomId, bot.credentials.userId);
-        await bot.joinRoom(unReadRoomId);
-        await bot.sendMessage(unReadRoomId, "I am a robot. Beep.");
-
-        const favouriteId = await app.client.createRoom({ name: "favourite room" });
-        await app.client.evaluate(async (client, favouriteId) => {
-            await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
-        }, favouriteId);
     });
 
-    test("should filter the list (with primary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
-        const roomList = getRoomList(page);
-        const primaryFilters = getPrimaryFilters(page);
-
-        const allFilters = await primaryFilters.locator("option").all();
-        for (const filter of allFilters) {
-            expect(await filter.getAttribute("aria-selected")).toBe("false");
+    test.describe("Room list", () => {
+        /**
+         * Get the room list
+         * @param page
+         */
+        function getRoomList(page: Page) {
+            return page.getByTestId("room-list");
         }
-        await expect(primaryFilters).toMatchScreenshot("unselected-primary-filters.png");
 
-        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();
-        expect(await roomList.locator("role=gridcell").count()).toBe(2);
-        await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
+        test.beforeEach(async ({ page, app, bot, user }) => {
+            await app.client.createRoom({ name: "empty room" });
 
-        await primaryFilters.getByRole("option", { name: "Favourite" }).click();
-        await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
-        expect(await roomList.locator("role=gridcell").count()).toBe(1);
+            const unReadDmId = await bot.createRoom({
+                name: "unread dm",
+                invite: [user.userId],
+                is_direct: true,
+            });
+            await bot.sendMessage(unReadDmId, "I am a robot. Beep.");
 
-        await primaryFilters.getByRole("option", { name: "People" }).click();
-        await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
-        expect(await roomList.locator("role=gridcell").count()).toBe(1);
+            const unReadRoomId = await app.client.createRoom({ name: "unread room" });
+            await app.client.inviteUser(unReadRoomId, bot.credentials.userId);
+            await bot.joinRoom(unReadRoomId);
+            await bot.sendMessage(unReadRoomId, "I am a robot. Beep.");
 
-        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();
-        expect(await roomList.locator("role=gridcell").count()).toBe(3);
+            const favouriteId = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, favouriteId) => {
+                await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
+            }, favouriteId);
+        });
+
+        test("should filter the list (with primary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            const roomList = getRoomList(page);
+            const primaryFilters = getPrimaryFilters(page);
+
+            const allFilters = await primaryFilters.locator("option").all();
+            for (const filter of allFilters) {
+                expect(await filter.getAttribute("aria-selected")).toBe("false");
+            }
+            await expect(primaryFilters).toMatchScreenshot("unselected-primary-filters.png");
+
+            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();
+            expect(await roomList.locator("role=gridcell").count()).toBe(2);
+            await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
+
+            await primaryFilters.getByRole("option", { name: "Favourite" }).click();
+            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+            expect(await roomList.locator("role=gridcell").count()).toBe(1);
+
+            await primaryFilters.getByRole("option", { name: "People" }).click();
+            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+            expect(await roomList.locator("role=gridcell").count()).toBe(1);
+
+            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();
+            expect(await roomList.locator("role=gridcell").count()).toBe(3);
+        });
+    });
+
+    test.describe("Empty room list", () => {
+        /**
+         * Get the empty state
+         * @param page
+         */
+        function getEmptyRoomList(page: Page) {
+            return page.getByTestId("empty-room-list");
+        }
+
+        test(
+            "should render the default placeholder when there is no filter",
+            { tag: "@screenshot" },
+            async ({ page, app, user }) => {
+                const emptyRoomList = getEmptyRoomList(page);
+                await expect(emptyRoomList).toMatchScreenshot("default-empty-room-list.png");
+                await expect(page.getByTestId("room-list-panel")).toMatchScreenshot("room-panel-empty-room-list.png");
+            },
+        );
+
+        test("should render the placeholder for unread filter", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            const primaryFilters = getPrimaryFilters(page);
+            await primaryFilters.getByRole("option", { name: "Unread" }).click();
+
+            const emptyRoomList = getEmptyRoomList(page);
+            await expect(emptyRoomList).toMatchScreenshot("unread-empty-room-list.png");
+
+            await emptyRoomList.getByRole("button", { name: "show all chats" }).click();
+            await expect(primaryFilters.getByRole("option", { name: "Unread" })).not.toBeChecked();
+        });
+
+        ["People", "Rooms", "Favourite"].forEach((filter) => {
+            test(
+                `should render the placeholder for ${filter} filter`,
+                { tag: "@screenshot" },
+                async ({ page, app, user }) => {
+                    const primaryFilters = getPrimaryFilters(page);
+                    await primaryFilters.getByRole("option", { name: filter }).click();
+
+                    const emptyRoomList = getEmptyRoomList(page);
+                    await expect(emptyRoomList).toMatchScreenshot(`${filter}-empty-room-list.png`);
+                },
+            );
+        });
     });
 });

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

@@ -77,4 +77,57 @@ test.describe("Room list", () => {
         await page.getByRole("menuitem", { name: "leave room" }).click();
         await expect(roomItem).not.toBeVisible();
     });
+
+    test("should scroll to the current room", async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        await roomListView.hover();
+        // Scroll to the end of the room list
+        await page.mouse.wheel(0, 1000);
+
+        await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();
+
+        const filters = page.getByRole("listbox", { name: "Room list filters" });
+        await filters.getByRole("option", { name: "People" }).click();
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).not.toBeVisible();
+
+        await filters.getByRole("option", { name: "People" }).click();
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+    });
+
+    test("unread filter should only match unread rooms that have a count", async ({ page, app, bot }) => {
+        const roomListView = getRoomList(page);
+        // Let's create a new room and invite the bot
+        const room1Id = await app.client.createRoom({
+            name: "Unread Room 1",
+            invite: [bot.credentials?.userId],
+        });
+        await bot.awaitRoomMembership(room1Id);
+
+        // Let's create another room as well
+        const room2Id = await app.client.createRoom({
+            name: "Unread Room 2",
+            invite: [bot.credentials?.userId],
+        });
+        await bot.awaitRoomMembership(room2Id);
+
+        // Let's configure unread room 1 so that we only get notification for mentions and keywords
+        await app.viewRoomById(room1Id);
+        await app.settings.openRoomSettings("Notifications");
+        await page.getByText("@mentions & keywords").click();
+        await app.settings.closeDialog();
+
+        // Let's open a room other than room 1 or room 2
+        await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+
+        // Let's make the bot send a new message in both room 1 and room 2
+        await bot.sendMessage(room1Id, "Hello!");
+        await bot.sendMessage(room2Id, "Hello!");
+
+        // Let's activate the unread filter now
+        await page.getByRole("option", { name: "Unread" }).click();
+
+        // Unread filter should only show room 2!!
+        await expect(roomListView.getByRole("gridcell", { name: "Open room Unread Room 2" })).toBeVisible();
+        await expect(roomListView.getByRole("gridcell", { name: "Open room Unread Room 1" })).not.toBeVisible();
+    });
 });

playwright/e2e/login/login-consent.spec.ts

@@ -13,6 +13,7 @@ import { selectHomeserver } from "../utils";
 import { type Credentials, type HomeserverInstance } from "../../plugins/homeserver";
 import { consentHomeserver } from "../../plugins/homeserver/synapse/consentHomeserver.ts";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { createBot } from "../crypto/utils.ts";
 
 // This test requires fixed credentials for the device signing keys below to work
 const username = "user1234";
@@ -258,6 +259,34 @@ test.describe("Login", () => {
 
                     await expect(h1.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
                 });
+
+                test("Continues to show verification prompt after cancelling device verification", async ({
+                    page,
+                    homeserver,
+                    credentials,
+                }) => {
+                    // Create a different device which is cross-signed, meaning we need to verify this device
+                    await createBot(page, homeserver, credentials, true);
+
+                    // Wait to avoid homeserver rate limit on logins
+                    await page.waitForTimeout(100);
+
+                    // Load the page and see that we are asked to verify
+                    await page.goto("/#/welcome");
+                    await login(page, homeserver, credentials);
+                    let h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
+                    await expect(h1).toBeVisible();
+
+                    // Click "Verify with another device"
+                    await page.getByRole("button", { name: "Verify with another device" }).click();
+
+                    // Cancel the new dialog
+                    await page.getByRole("button", { name: "Close dialog" }).click();
+
+                    // Check that we are still being asked to verify
+                    h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
+                    await expect(h1).toBeVisible();
+                });
             });
         });
     });

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

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2023 Suguru Hirahara
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -50,8 +50,8 @@ test.describe("Appearance user settings tab", () => {
         // Click "Show advanced" link button
         await tab.getByRole("button", { name: "Show advanced" }).click();
 
-        await tab.locator(".mx_Checkbox", { hasText: "Use bundled emoji font" }).click();
-        await tab.locator(".mx_Checkbox", { hasText: "Use a system font" }).click();
+        await tab.getByLabel("Use bundled emoji font").click();
+        await tab.getByLabel("Use a system font").click();
 
         // Assert that the font-family value was removed
         await expect(page.locator("body")).toHaveCSS("font-family", '""');

playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -7,47 +7,15 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Page, type Request } from "@playwright/test";
-import { GenericContainer, type StartedTestContainer, Wait } from "testcontainers";
 
 import { test as base, expect } from "../../element-web-test";
 import type { ElementAppPage } from "../../pages/ElementAppPage";
 import type { Bot } from "../../pages/bot";
 
 const test = base.extend<{
-    slidingSyncProxy: StartedTestContainer;
     testRoom: { roomId: string; name: string };
     joinedBot: Bot;
 }>({
-    slidingSyncProxy: async ({ logger, network, postgres, page, homeserver }, use, testInfo) => {
-        const container = await new GenericContainer("ghcr.io/matrix-org/sliding-sync:v0.99.3")
-            .withNetwork(network)
-            .withExposedPorts(8008)
-            .withLogConsumer(logger.getConsumer("sliding-sync-proxy"))
-            .withWaitStrategy(Wait.forHttp("/client/server.json", 8008))
-            .withEnvironment({
-                SYNCV3_SECRET: "bwahahaha",
-                SYNCV3_DB: `user=${postgres.getUsername()} dbname=postgres password=${postgres.getPassword()} host=postgres sslmode=disable`,
-                SYNCV3_SERVER: `http://homeserver:8008`,
-            })
-            .start();
-
-        const proxyAddress = `http://${container.getHost()}:${container.getMappedPort(8008)}`;
-        await page.addInitScript((proxyAddress) => {
-            window.localStorage.setItem(
-                "mx_local_settings",
-                JSON.stringify({
-                    feature_sliding_sync_proxy_url: proxyAddress,
-                }),
-            );
-            window.localStorage.setItem("mx_labs_feature_feature_sliding_sync", "true");
-        }, proxyAddress);
-        await use(container);
-        await container.stop();
-    },
-    // Ensure slidingSyncProxy is set up before the user fixture as it relies on an init script
-    credentials: async ({ slidingSyncProxy, credentials }, use) => {
-        await use(credentials);
-    },
     testRoom: async ({ user, app }, use) => {
         const name = "Test Room";
         const roomId = await app.client.createRoom({ name });
@@ -82,6 +50,14 @@ test.describe("Sliding Sync", () => {
         });
     };
 
+    test.use({
+        config: {
+            features: {
+                feature_simplified_sliding_sync: true,
+            },
+        },
+    });
+
     // Load the user fixture for all tests
     test.beforeEach(({ user }) => {});
 
@@ -188,15 +164,7 @@ test.describe("Sliding Sync", () => {
         ).not.toBeAttached();
     });
 
-    test("should not show unread indicators", async ({ page, app, joinedBot: bot, testRoom }) => {
-        // TODO: for now. Later we should.
-
-        // disable notifs in this room (TODO: CS API call?)
-        const locator = page.getByRole("treeitem", { name: "Test Room" });
-        await locator.hover();
-        await locator.getByRole("button", { name: "Notification options" }).click();
-        await page.getByRole("menuitemradio", { name: "Mute room" }).click();
-
+    test("should show unread indicators", async ({ page, app, joinedBot: bot, testRoom }) => {
         // create a new room so we know when the message has been received as it'll re-shuffle the room list
         await app.client.createRoom({ name: "Dummy" });
 
@@ -207,9 +175,7 @@ test.describe("Sliding Sync", () => {
         // wait for this message to arrive, tell by the room list resorting
         await checkOrder(["Test Room", "Dummy"], page);
 
-        await expect(
-            page.getByRole("treeitem", { name: "Test Room" }).locator(".mx_NotificationBadge"),
-        ).not.toBeAttached();
+        await expect(page.getByRole("treeitem", { name: "Test Room" }).locator(".mx_NotificationBadge")).toBeAttached();
     });
 
     test("should update user settings promptly", async ({ page, app }) => {
@@ -221,6 +187,37 @@ test.describe("Sliding Sync", () => {
         await expect(locator.locator(".mx_ToggleSwitch_on")).toBeAttached();
     });
 
+    test("should send subscribe_rooms on room switch if room not already subscribed", async ({ page, app }) => {
+        // create rooms and check room names are correct
+        const roomIds: string[] = [];
+        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
+            const id = await app.client.createRoom({ name: fruit });
+            roomIds.push(id);
+            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
+        }
+        const [roomAId, roomPId] = roomIds;
+
+        const matchRoomSubRequest = (subRoomId: string) => (request: Request) => {
+            if (!request.url().includes("/sync")) return false;
+            const body = request.postDataJSON();
+            return body.room_subscriptions?.[subRoomId];
+        };
+
+        // Select the Test Room and wait for playwright to get the request
+        const [request] = await Promise.all([
+            page.waitForRequest(matchRoomSubRequest(roomAId)),
+            page.getByRole("treeitem", { name: "Apple", exact: true }).click(),
+        ]);
+        const roomSubscriptions = request.postDataJSON().room_subscriptions;
+        expect(roomSubscriptions, "room_subscriptions is object").toBeDefined();
+
+        // Switch to another room and wait for playwright to get the request
+        await Promise.all([
+            page.waitForRequest(matchRoomSubRequest(roomPId)),
+            page.getByRole("treeitem", { name: "Pineapple", exact: true }).click(),
+        ]);
+    });
+
     test("should show and be able to accept/reject/rescind invites", async ({
         page,
         app,
@@ -361,52 +358,4 @@ test.describe("Sliding Sync", () => {
         // ensure the reply-to does not disappear
         await expect(page.locator(".mx_ReplyPreview")).toBeVisible();
     });
-
-    test("should send unsubscribe_rooms for every room switch", async ({ page, app }) => {
-        // create rooms and check room names are correct
-        const roomIds: string[] = [];
-        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
-            const id = await app.client.createRoom({ name: fruit });
-            roomIds.push(id);
-            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
-        }
-        const [roomAId, roomPId, roomOId] = roomIds;
-
-        const matchRoomSubRequest = (subRoomId: string) => (request: Request) => {
-            if (!request.url().includes("/sync")) return false;
-            const body = request.postDataJSON();
-            return body.txn_id && body.room_subscriptions?.[subRoomId];
-        };
-        const matchRoomUnsubRequest = (unsubRoomId: string) => (request: Request) => {
-            if (!request.url().includes("/sync")) return false;
-            const body = request.postDataJSON();
-            return (
-                body.txn_id && body.unsubscribe_rooms?.includes(unsubRoomId) && !body.room_subscriptions?.[unsubRoomId]
-            );
-        };
-
-        // Select the Test Room and wait for playwright to get the request
-        const [request] = await Promise.all([
-            page.waitForRequest(matchRoomSubRequest(roomAId)),
-            page.getByRole("treeitem", { name: "Apple", exact: true }).click(),
-        ]);
-        const roomSubscriptions = request.postDataJSON().room_subscriptions;
-        expect(roomSubscriptions, "room_subscriptions is object").toBeDefined();
-
-        // Switch to another room and wait for playwright to get the request
-        await Promise.all([
-            page.waitForRequest(matchRoomSubRequest(roomPId)),
-            page.waitForRequest(matchRoomUnsubRequest(roomAId)),
-            page.getByRole("treeitem", { name: "Pineapple", exact: true }).click(),
-        ]);
-
-        // And switch to even another room and wait for playwright to get the request
-        await Promise.all([
-            page.waitForRequest(matchRoomSubRequest(roomOId)),
-            page.waitForRequest(matchRoomUnsubRequest(roomPId)),
-            page.getByRole("treeitem", { name: "Orange", exact: true }).click(),
-        ]);
-
-        // TODO: Add tests for encrypted rooms
-    });
 });

playwright/e2e/spaces/spaces.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
@@ -35,17 +35,18 @@ function spaceCreateOptions(spaceName: string, roomIds: string[] = []): ICreateR
                     name: spaceName,
                 },
             },
-            ...roomIds.map(spaceChildInitialState),
+            ...roomIds.map((r) => spaceChildInitialState(r)),
         ],
     };
 }
 
-function spaceChildInitialState(roomId: string): ICreateRoomOpts["initial_state"]["0"] {
+function spaceChildInitialState(roomId: string, order?: string): ICreateRoomOpts["initial_state"]["0"] {
     return {
         type: "m.space.child",
         state_key: roomId,
         content: {
             via: [roomId.split(":")[1]],
+            order,
         },
     };
 }
@@ -121,9 +122,10 @@ test.describe("Spaces", () => {
         await page.getByRole("button", { name: "Skip for now" }).click();
 
         // Assert rooms exist in the room list
-        await expect(page.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
-        await expect(page.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
-        await expect(page.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();
+        const roomList = page.getByRole("tree", { name: "Rooms" });
+        await expect(roomList.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
+        await expect(roomList.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
+        await expect(roomList.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();
 
         // Assert rooms exist in the space explorer
         await expect(
@@ -155,7 +157,7 @@ test.describe("Spaces", () => {
 
         await page.getByRole("button", { name: "Just me" }).click();
 
-        await page.getByText("Sample Room").click({ force: true }); // force click as checkbox size is zero
+        await page.getByRole("checkbox", { name: "Sample Room" }).click();
 
         // Temporal implementation as multiple elements with the role "button" and name "Add" are found
         await page.locator(".mx_AddExistingToSpace_footer").getByRole("button", { name: "Add" }).click();
@@ -165,6 +167,50 @@ test.describe("Spaces", () => {
         ).toBeVisible();
     });
 
+    test(
+        "should allow user to add an existing room to a space after creation",
+        { tag: "@screenshot" },
+        async ({ page, app, user }) => {
+            await app.client.createRoom({
+                name: "Sample Room",
+            });
+            await app.client.createRoom({
+                name: "A Room that will not be selected",
+            });
+
+            const menu = await openSpaceCreateMenu(page);
+            await menu.getByRole("button", { name: "Private" }).click();
+
+            await menu
+                .locator('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
+                .setInputFiles("playwright/sample-files/riot.png");
+            await expect(menu.getByRole("textbox", { name: "Address" })).not.toBeVisible();
+            await menu
+                .getByRole("textbox", { name: "Description" })
+                .fill("This is a personal space to mourn Riot.im...");
+            await menu.getByRole("textbox", { name: "Name" }).fill("This is my Riot");
+            await menu.getByRole("textbox", { name: "Name" }).press("Enter");
+
+            await page.getByRole("button", { name: "Just me" }).click();
+
+            await page.getByRole("button", { name: "Skip for now" }).click();
+
+            await page.getByRole("button", { name: "Add room" }).click();
+            await page.getByRole("menuitem", { name: "Add existing room" }).click();
+
+            await page.getByRole("checkbox", { name: "Sample Room" }).click();
+
+            await expect(page.getByRole("dialog", { name: "Avatar Add existing rooms" })).toMatchScreenshot(
+                "add-existing-rooms-dialog.png",
+            );
+
+            await page.getByRole("button", { name: "Add" }).click();
+            await expect(
+                page.locator(".mx_SpaceHierarchy_list").getByRole("treeitem", { name: "Sample Room" }),
+            ).toBeVisible();
+        },
+    );
+
     test("should allow user to invite another to a space", { tag: "@no-webkit" }, async ({ page, app, user, bot }) => {
         await app.client.createSpace({
             visibility: "public" as any,
@@ -291,4 +337,36 @@ test.describe("Spaces", () => {
         // Assert we get shown the new room intro, and thus not the soft crash screen
         await expect(page.locator(".mx_NewRoomIntro")).toBeVisible();
     });
+
+    test("should render spaces view", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
+        axe.disableRules([
+            // Disable this check as it triggers on nested roving tab index elements which are in practice fine
+            "nested-interactive",
+            // XXX: We have some known contrast issues here
+            "color-contrast",
+        ]);
+
+        const childSpaceId1 = await app.client.createSpace({
+            name: "Child Space 1",
+            initial_state: [],
+        });
+        const childSpaceId2 = await app.client.createSpace({
+            name: "Child Space 2",
+            initial_state: [],
+        });
+        const childSpaceId3 = await app.client.createSpace({
+            name: "Child Space 3",
+            initial_state: [],
+        });
+        await app.client.createSpace({
+            name: "Root Space",
+            initial_state: [
+                spaceChildInitialState(childSpaceId1, "a"),
+                spaceChildInitialState(childSpaceId2, "b"),
+                spaceChildInitialState(childSpaceId3, "c"),
+            ],
+        });
+        await app.viewSpaceByName("Root Space");
+        await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png");
+    });
 });

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:2ea87d45fc7ff3327c671b3b4447e6b2032d4f5ca07d62d8aef0d900e105c2f4";
+const TAG = "develop@sha256:4285f51332a658ba6d4871b04d33f49261e6118e751d70fd2894aca97bd587c3";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,

res/css/_components.pcss

@@ -128,7 +128,6 @@
 @import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
 @import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
 @import "./views/dialogs/_BugReportDialog.pcss";
-@import "./views/dialogs/_BulkRedactDialog.pcss";
 @import "./views/dialogs/_ChangelogDialog.pcss";
 @import "./views/dialogs/_CompoundDialog.pcss";
 @import "./views/dialogs/_ConfirmSpaceUserActionDialog.pcss";
@@ -212,7 +211,6 @@
 @import "./views/elements/_ServerPicker.pcss";
 @import "./views/elements/_SettingsFlag.pcss";
 @import "./views/elements/_Spinner.pcss";
-@import "./views/elements/_StyledCheckbox.pcss";
 @import "./views/elements/_StyledRadioButton.pcss";
 @import "./views/elements/_SyntaxHighlight.pcss";
 @import "./views/elements/_TagComposer.pcss";
@@ -270,6 +268,7 @@
 @import "./views/right_panel/_VerificationPanel.pcss";
 @import "./views/right_panel/_WidgetCard.pcss";
 @import "./views/room_settings/_AliasSettings.pcss";
+@import "./views/rooms/RoomListPanel/_EmptyRoomList.pcss";
 @import "./views/rooms/RoomListPanel/_RoomList.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListHeaderView.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListItemMenuView.pcss";

res/css/components/views/settings/devices/_SelectableDeviceTile.pcss

@@ -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
@@ -16,9 +16,9 @@ Please see LICENSE files in the repository root for full details.
 .mx_SelectableDeviceTile_checkbox {
     flex: 1 0;
 
-    .mx_Checkbox_background + div {
-        flex: 1 0;
-        /* override more specific selector */
-        margin-left: $spacing-16 !important;
+    > div {
+        margin-top: auto;
+        margin-bottom: auto;
+        margin-right: var(--cpd-space-1x);
     }
 }

res/css/structures/_QuickSettingsButton.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -70,38 +70,26 @@ Please see LICENSE files in the repository root for full details.
         text-transform: uppercase;
         color: var(--cpd-color-text-secondary);
         margin: 20px 0 12px;
-    }
-
-    .mx_QuickSettingsButton_pinToSidebarHeading {
-        padding-left: 24px;
         position: relative;
-    }
-
-    .mx_Checkbox {
-        margin-bottom: 8px;
-    }
-
-    .mx_QuickSettingsButton_favouritesCheckbox,
-    .mx_QuickSettingsButton_peopleCheckbox {
-        .mx_Checkbox_background + div {
-            padding-left: 22px;
-            position: relative;
-            margin-left: 6px;
-            font-size: $font-15px;
-            line-height: $font-24px;
-            color: var(--cpd-color-text-primary);
-        }
+        display: flex;
     }
 
     .mx_QuickSettingsButton_moreOptionsButton {
-        padding-left: 22px;
-        margin-left: 22px;
+        margin-left: var(--cpd-space-7x);
         font-size: $font-15px;
         line-height: $font-24px;
         color: var(--cpd-color-text-primary);
         position: relative;
         margin-bottom: 16px;
     }
+
+    .mx_QuickSettingsButton_option {
+        margin-bottom: var(--cpd-space-3x);
+        label {
+            /* Correctly line up icons and text. */
+            display: flex;
+        }
+    }
 }
 
 .mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
@@ -111,15 +99,10 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_QuickSettingsButton_icon {
-    // TODO remove when all icons have fill=currentColor
-    * {
-        fill: $secondary-content;
-    }
+    margin-right: var(--cpd-space-1x);
     color: $secondary-content;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
+    width: 18px;
+    height: 18px;
+    margin-top: auto;
+    margin-bottom: auto;
 }

res/css/structures/_SpaceHierarchy.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -247,15 +247,6 @@ Please see LICENSE files in the repository root for full details.
                     .mx_AccessibleButton_kind_primary_outline {
                         padding: 3px 16px; /* to account for the 1px border */
                     }
-
-                    .mx_Checkbox {
-                        display: inline-flex;
-
-                        label {
-                            width: 16px;
-                            height: 16px;
-                        }
-                    }
                 }
 
                 &:hover,

res/css/views/dialogs/_AddExistingToSpaceDialog.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -32,6 +32,11 @@ Please see LICENSE files in the repository root for full details.
     .mx_AddExistingToSpace_section {
         margin-right: 12px;
 
+        ul {
+            list-style: none;
+            padding-left: 0;
+        }
+
         // provides space for scrollbar so that checkbox and scrollbar do not collide
 
         &:not(:first-child) {
@@ -214,6 +219,12 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     margin-top: 12px;
 
+    form {
+        /* Align checkboxes. */
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+
     .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
         margin-right: 12px;
     }
@@ -227,8 +238,4 @@ Please see LICENSE files in the repository root for full details.
         text-overflow: ellipsis;
         margin-right: 12px;
     }
-
-    .mx_Checkbox {
-        align-items: center;
-    }
 }

res/css/views/dialogs/_BulkRedactDialog.pcss

@@ -1,19 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 Robin Townsend <robin@robin.town>
-
-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_BulkRedactDialog {
-    .mx_Checkbox,
-    .mx_BulkRedactDialog_checkboxMicrocopy {
-        line-height: $font-20px;
-    }
-
-    .mx_BulkRedactDialog_checkboxMicrocopy {
-        margin-left: 26px;
-        color: $secondary-content;
-    }
-}

res/css/views/dialogs/_ExportDialog.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -43,11 +43,6 @@ Please see LICENSE files in the repository root for full details.
         .mx_Field_valid.mx_Field:focus-within {
             border-color: $input-border-color;
         }
-
-        .mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
-            background: $info-plinth-fg-color;
-            border-color: $info-plinth-fg-color;
-        }
     }
 
     .mx_ExportDialog_progress {

res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -74,10 +74,6 @@ Please see LICENSE files in the repository root for full details.
                 line-height: $font-15px;
                 color: $tertiary-content;
             }
-
-            .mx_Checkbox {
-                align-items: center;
-            }
         }
     }
 

res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -19,13 +19,6 @@ Please see LICENSE files in the repository root for full details.
         margin-top: 20px;
         font-size: $font-15px;
         line-height: $font-15px;
-
-        .mx_WidgetCapabilitiesPromptDialog_byline {
-            color: $muted-fg-color;
-            margin-left: 26px;
-            font-size: $font-12px;
-            line-height: $font-12px;
-        }
     }
 
     .mx_Dialog_buttons {

res/css/views/elements/_LabelledCheckbox.pcss

@@ -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
@@ -7,26 +7,5 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_LabelledCheckbox {
-    display: flex;
-    gap: 8px;
-    flex-direction: row;
-
-    .mx_Checkbox {
-        margin-top: 3px; /* visually align with label text */
-    }
-
-    .mx_LabelledCheckbox_labels {
-        flex: 1;
-
-        .mx_LabelledCheckbox_label {
-            vertical-align: middle;
-        }
-
-        .mx_LabelledCheckbox_byline {
-            display: block;
-            padding-top: $spacing-4;
-            color: $muted-fg-color;
-            font-size: $font-11px;
-        }
-    }
+    margin-top: var(--cpd-space-2x);
 }

res/css/views/elements/_StyledCheckbox.pcss

@@ -1,98 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_Checkbox {
-    $size: $font-16px;
-    $border-radius: 0.27rem;
-
-    display: flex;
-    align-items: flex-start;
-
-    input[type="checkbox"] {
-        appearance: none;
-        margin: 0;
-        padding: 0;
-
-        & + label {
-            display: flex;
-            align-items: center;
-
-            flex-grow: 1;
-        }
-
-        & + label > .mx_Checkbox_background {
-            display: inline-flex;
-            position: relative;
-
-            flex-shrink: 0;
-
-            height: $size;
-            width: $size;
-            size: 0.5rem;
-            border: 1px solid var(--cpd-color-border-interactive-primary);
-            box-sizing: border-box;
-            border-radius: $border-radius;
-
-            .mx_Checkbox_checkmark {
-                display: none;
-
-                height: 100%;
-                width: 100%;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-                mask-position: center;
-                mask-size: 100%;
-                mask-repeat: no-repeat;
-            }
-        }
-
-        &:checked + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-            display: block;
-        }
-
-        & + label > *:not(.mx_Checkbox_background) {
-            margin-left: 10px;
-        }
-
-        &:disabled + label {
-            cursor: not-allowed;
-        }
-
-        &:focus-visible {
-            & + label .mx_Checkbox_background {
-                @mixin unreal-focus;
-            }
-        }
-    }
-}
-
-.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
-    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-        background: var(--cpd-color-icon-on-solid-primary);
-    }
-
-    &:checked + label > .mx_Checkbox_background {
-        background: var(--cpd-color-bg-accent-rest);
-        border-color: var(--cpd-color-bg-accent-rest);
-    }
-
-    &:checked:disabled + label > .mx_Checkbox_background {
-        background: var(--cpd-color-bg-action-primary-disabled);
-        border-color: var(--cpd-color-bg-action-primary-disabled);
-    }
-}
-
-.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
-    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-        background: var(--cpd-color-bg-accent-rest);
-    }
-
-    &:checked + label > .mx_Checkbox_background {
-        background: transparent;
-        border-color: var(--cpd-color-bg-accent-rest);
-    }
-}

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

@@ -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.
+ */
+
+.mx_EmptyRoomList_GenericPlaceholder {
+    align-self: center;
+    /** It should take 2/3 of the width **/
+    width: 66%;
+    /** It should be positioned at 1/3 of the height **/
+    padding-top: 33%;
+
+    .mx_EmptyRoomList_GenericPlaceholder_title {
+        font: var(--cpd-font-body-lg-semibold);
+        text-align: center;
+    }
+
+    .mx_EmptyRoomList_GenericPlaceholder_description {
+        font: var(--cpd-font-body-sm-regular);
+        color: var(--cpd-color-text-secondary);
+        text-align: center;
+    }
+
+    .mx_EmptyRoomList_DefaultPlaceholder {
+        margin-top: var(--cpd-space-4x);
+    }
+
+    button {
+        width: 100%;
+    }
+}

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

@@ -7,9 +7,4 @@
 
 .mx_RoomList {
     height: 100%;
-
-    .mx_RoomList_List {
-        /* Avoid when on hover, the background color to be on top of the right border */
-        padding-right: 1px;
-    }
 }

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

@@ -47,3 +47,7 @@
 .mx_RoomListItemView_menu_open {
     background-color: var(--cpd-color-bg-action-secondary-hovered);
 }
+
+.mx_RoomListItemView_selected {
+    background-color: var(--cpd-color-bg-action-secondary-pressed);
+}

res/css/views/rooms/_RoomSublist.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -393,8 +393,7 @@ Please see LICENSE files in the repository root for full details.
         margin-bottom: 4px;
     }
 
-    .mx_StyledRadioButton,
-    .mx_Checkbox {
+    .mx_StyledRadioButton {
         margin-top: 8px;
     }
 }

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

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -14,17 +14,12 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_SidebarUserSettingsTab_checkbox {
-    margin-bottom: $spacing-8;
-    /* override checkbox styles */
-    label {
-        align-items: flex-start !important;
-    }
-
-    svg {
-        height: 16px;
-        width: 16px;
-        margin-right: $spacing-8;
-        margin-bottom: -1px;
-    }
+.mx_SidebarUserSettingsTab_icon {
+    margin-right: var(--cpd-space-2x);
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.mx_SidebarUserSettingsTab_checkbox label {
+    display: flex;
 }

src/LegacyCallHandler.tsx

@@ -22,7 +22,6 @@ import {
     type MatrixCall,
 } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from "matrix-js-sdk/src/logger";
-import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler";
 
 import { MatrixClientPeg } from "./MatrixClientPeg";
@@ -596,7 +595,7 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
 
         switch (newState) {
             case CallState.Ringing: {
-                const incomingCallPushRule = new PushProcessor(MatrixClientPeg.safeGet()).getPushRuleById(
+                const incomingCallPushRule = MatrixClientPeg.safeGet().pushProcessor.getPushRuleById(
                     RuleId.IncomingCall,
                 );
                 const pushRuleEnabled = incomingCallPushRule?.enabled;

src/MatrixClientPeg.ts

@@ -299,6 +299,12 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         opts.threadSupport = true;
 
         if (SettingsStore.getValue("feature_sliding_sync")) {
+            throw new UserFriendlyError("sliding_sync_legacy_no_longer_supported");
+        }
+
+        // If the user has enabled the labs feature for sliding sync, set it up
+        // otherwise check if the feature is supported
+        if (SettingsStore.getValue("feature_simplified_sliding_sync")) {
             opts.slidingSync = await SlidingSyncManager.instance.setup(this.matrixClient);
         } else {
             SlidingSyncManager.instance.checkSupport(this.matrixClient);

src/SlashCommands.tsx

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as React from "react";
+import React from "react";
 import {
     ContentHelpers,
     Direction,

src/SlidingSyncManager.ts

@@ -36,45 +36,51 @@ Please see LICENSE files in the repository root for full details.
  *                      list ops)
  */
 
-import { type MatrixClient, EventType, AutoDiscovery, Method, timeoutSignal } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient, ClientEvent, EventType, type Room } from "matrix-js-sdk/src/matrix";
 import {
     type MSC3575Filter,
     type MSC3575List,
+    type MSC3575SlidingSyncResponse,
     MSC3575_STATE_KEY_LAZY,
     MSC3575_STATE_KEY_ME,
     MSC3575_WILDCARD,
     SlidingSync,
+    SlidingSyncEvent,
+    SlidingSyncState,
 } from "matrix-js-sdk/src/sliding-sync";
 import { logger } from "matrix-js-sdk/src/logger";
 import { defer, sleep } from "matrix-js-sdk/src/utils";
 
-import SettingsStore from "./settings/SettingsStore";
-import SlidingSyncController from "./settings/controllers/SlidingSyncController";
-
 // how long to long poll for
 const SLIDING_SYNC_TIMEOUT_MS = 20 * 1000;
 
+// The state events we will get for every single room/space/old room/etc
+// This list is only augmented when a direct room subscription is made. (e.g you view a room)
+const REQUIRED_STATE_LIST = [
+    [EventType.RoomJoinRules, ""], // the public icon on the room list
+    [EventType.RoomAvatar, ""], // any room avatar
+    [EventType.RoomCanonicalAlias, ""], // for room name calculations
+    [EventType.RoomTombstone, ""], // lets JS SDK hide rooms which are dead
+    [EventType.RoomEncryption, ""], // lets rooms be configured for E2EE correctly
+    [EventType.RoomCreate, ""], // for isSpaceRoom checks
+    [EventType.SpaceChild, MSC3575_WILDCARD], // all space children
+    [EventType.SpaceParent, MSC3575_WILDCARD], // all space parents
+    [EventType.RoomMember, MSC3575_STATE_KEY_ME], // lets the client calculate that we are in fact in the room
+];
+
 // the things to fetch when a user clicks on a room
 const DEFAULT_ROOM_SUBSCRIPTION_INFO = {
     timeline_limit: 50,
     // missing required_state which will change depending on the kind of room
     include_old_rooms: {
         timeline_limit: 0,
-        required_state: [
-            // state needed to handle space navigation and tombstone chains
-            [EventType.RoomCreate, ""],
-            [EventType.RoomTombstone, ""],
-            [EventType.SpaceChild, MSC3575_WILDCARD],
-            [EventType.SpaceParent, MSC3575_WILDCARD],
-            [EventType.RoomMember, MSC3575_STATE_KEY_ME],
-        ],
+        required_state: REQUIRED_STATE_LIST,
     },
 };
 // lazy load room members so rooms like Matrix HQ don't take forever to load
 const UNENCRYPTED_SUBSCRIPTION_NAME = "unencrypted";
 const UNENCRYPTED_SUBSCRIPTION = {
     required_state: [
-        [MSC3575_WILDCARD, MSC3575_WILDCARD], // all events
         [EventType.RoomMember, MSC3575_STATE_KEY_ME], // except for m.room.members, get our own membership
         [EventType.RoomMember, MSC3575_STATE_KEY_LAZY], // ...and lazy load the rest.
     ],
@@ -90,6 +96,72 @@ const ENCRYPTED_SUBSCRIPTION = {
     ...DEFAULT_ROOM_SUBSCRIPTION_INFO,
 };
 
+// the complete set of lists made in SSS. The manager will spider all of these lists depending
+// on the count for each one.
+const sssLists: Record<string, MSC3575List> = {
+    spaces: {
+        ranges: [[0, 10]],
+        timeline_limit: 0, // we don't care about the most recent message for spaces
+        required_state: REQUIRED_STATE_LIST,
+        include_old_rooms: {
+            timeline_limit: 0,
+            required_state: REQUIRED_STATE_LIST,
+        },
+        filters: {
+            room_types: ["m.space"],
+        },
+    },
+    invites: {
+        ranges: [[0, 10]],
+        timeline_limit: 1, // most recent message display
+        required_state: REQUIRED_STATE_LIST,
+        include_old_rooms: {
+            timeline_limit: 0,
+            required_state: REQUIRED_STATE_LIST,
+        },
+        filters: {
+            is_invite: true,
+        },
+    },
+    favourites: {
+        ranges: [[0, 10]],
+        timeline_limit: 1, // most recent message display
+        required_state: REQUIRED_STATE_LIST,
+        include_old_rooms: {
+            timeline_limit: 0,
+            required_state: REQUIRED_STATE_LIST,
+        },
+        filters: {
+            tags: ["m.favourite"],
+        },
+    },
+    dms: {
+        ranges: [[0, 10]],
+        timeline_limit: 1, // most recent message display
+        required_state: REQUIRED_STATE_LIST,
+        include_old_rooms: {
+            timeline_limit: 0,
+            required_state: REQUIRED_STATE_LIST,
+        },
+        filters: {
+            is_dm: true,
+            is_invite: false,
+            // If a DM has a Favourite & Low Prio tag then it'll be shown in those lists instead
+            not_tags: ["m.favourite", "m.lowpriority"],
+        },
+    },
+    untagged: {
+        // SSS will dupe suppress invites/dms from here, so we don't need "not dms, not invites"
+        ranges: [[0, 10]],
+        timeline_limit: 1, // most recent message display
+        required_state: REQUIRED_STATE_LIST,
+        include_old_rooms: {
+            timeline_limit: 0,
+            required_state: REQUIRED_STATE_LIST,
+        },
+    },
+};
+
 export type PartialSlidingSyncRequest = {
     filters?: MSC3575Filter;
     sort?: string[];
@@ -103,6 +175,8 @@ export type PartialSlidingSyncRequest = {
  * sync options and code.
  */
 export class SlidingSyncManager {
+    public static serverSupportsSlidingSync: boolean;
+
     public static readonly ListSpaces = "space_list";
     public static readonly ListSearch = "search_list";
     private static readonly internalInstance = new SlidingSyncManager();
@@ -116,48 +190,17 @@ export class SlidingSyncManager {
         return SlidingSyncManager.internalInstance;
     }
 
-    public configure(client: MatrixClient, proxyUrl: string): SlidingSync {
+    private configure(client: MatrixClient, proxyUrl: string): SlidingSync {
         this.client = client;
+        // create the set of lists we will use.
+        const lists = new Map();
+        for (const listName in sssLists) {
+            lists.set(listName, sssLists[listName]);
+        }
         // by default use the encrypted subscription as that gets everything, which is a safer
         // default than potentially missing member events.
-        this.slidingSync = new SlidingSync(
-            proxyUrl,
-            new Map(),
-            ENCRYPTED_SUBSCRIPTION,
-            client,
-            SLIDING_SYNC_TIMEOUT_MS,
-        );
+        this.slidingSync = new SlidingSync(proxyUrl, lists, ENCRYPTED_SUBSCRIPTION, client, SLIDING_SYNC_TIMEOUT_MS);
         this.slidingSync.addCustomSubscription(UNENCRYPTED_SUBSCRIPTION_NAME, UNENCRYPTED_SUBSCRIPTION);
-        // set the space list
-        this.slidingSync.setList(SlidingSyncManager.ListSpaces, {
-            ranges: [[0, 20]],
-            sort: ["by_name"],
-            slow_get_all_rooms: true,
-            timeline_limit: 0,
-            required_state: [
-                [EventType.RoomJoinRules, ""], // the public icon on the room list
-                [EventType.RoomAvatar, ""], // any room avatar
-                [EventType.RoomTombstone, ""], // lets JS SDK hide rooms which are dead
-                [EventType.RoomEncryption, ""], // lets rooms be configured for E2EE correctly
-                [EventType.RoomCreate, ""], // for isSpaceRoom checks
-                [EventType.SpaceChild, MSC3575_WILDCARD], // all space children
-                [EventType.SpaceParent, MSC3575_WILDCARD], // all space parents
-                [EventType.RoomMember, MSC3575_STATE_KEY_ME], // lets the client calculate that we are in fact in the room
-            ],
-            include_old_rooms: {
-                timeline_limit: 0,
-                required_state: [
-                    [EventType.RoomCreate, ""],
-                    [EventType.RoomTombstone, ""], // lets JS SDK hide rooms which are dead
-                    [EventType.SpaceChild, MSC3575_WILDCARD], // all space children
-                    [EventType.SpaceParent, MSC3575_WILDCARD], // all space parents
-                    [EventType.RoomMember, MSC3575_STATE_KEY_ME], // lets the client calculate that we are in fact in the room
-                ],
-            },
-            filters: {
-                room_types: ["m.space"],
-            },
-        });
         this.configureDefer.resolve();
         return this.slidingSync;
     }
@@ -220,99 +263,113 @@ export class SlidingSyncManager {
         return this.slidingSync!.getListParams(listKey)!;
     }
 
-    public async setRoomVisible(roomId: string, visible: boolean): Promise<string> {
+    /**
+     * Announces that the user has chosen to view the given room and that room will now
+     * be displayed, so it should have more state loaded.
+     * @param roomId The room to set visible
+     */
+    public async setRoomVisible(roomId: string): Promise<void> {
         await this.configureDefer.promise;
         const subscriptions = this.slidingSync!.getRoomSubscriptions();
-        if (visible) {
-            subscriptions.add(roomId);
-        } else {
-            subscriptions.delete(roomId);
-        }
+        if (subscriptions.has(roomId)) return;
+
+        subscriptions.add(roomId);
+
         const room = this.client?.getRoom(roomId);
-        let shouldLazyLoad = !(await this.client?.getCrypto()?.isEncryptionEnabledInRoom(roomId));
-        if (!room) {
-            // default to safety: request all state if we can't work it out. This can happen if you
-            // refresh the app whilst viewing a room: we call setRoomVisible before we know anything
-            // about the room.
-            shouldLazyLoad = false;
+        // default to safety: request all state if we can't work it out. This can happen if you
+        // refresh the app whilst viewing a room: we call setRoomVisible before we know anything
+        // about the room.
+        let shouldLazyLoad = false;
+        if (room) {
+            // do not lazy load encrypted rooms as we need the entire member list.
+            shouldLazyLoad = !(await this.client?.getCrypto()?.isEncryptionEnabledInRoom(roomId));
         }
-        logger.log("SlidingSync setRoomVisible:", roomId, visible, "shouldLazyLoad:", shouldLazyLoad);
+        logger.log("SlidingSync setRoomVisible:", roomId, "shouldLazyLoad:", shouldLazyLoad);
         if (shouldLazyLoad) {
             // lazy load this room
             this.slidingSync!.useCustomSubscription(roomId, UNENCRYPTED_SUBSCRIPTION_NAME);
         }
-        const p = this.slidingSync!.modifyRoomSubscriptions(subscriptions);
+        this.slidingSync!.modifyRoomSubscriptions(subscriptions);
         if (room) {
-            return roomId; // we have data already for this room, show immediately e.g it's in a list
+            return; // we have data already for this room, show immediately e.g it's in a list
         }
-        try {
-            // wait until the next sync before returning as RoomView may need to know the current state
-            await p;
-        } catch {
-            logger.warn("SlidingSync setRoomVisible:", roomId, visible, "failed to confirm transaction");
-        }
-        return roomId;
+        // wait until we know about this room. This may take a little while.
+        return new Promise((resolve) => {
+            logger.log(`SlidingSync setRoomVisible room ${roomId} not found, waiting for ClientEvent.Room`);
+            const waitForRoom = (r: Room): void => {
+                if (r.roomId === roomId) {
+                    this.client?.off(ClientEvent.Room, waitForRoom);
+                    logger.log(`SlidingSync room ${roomId} found, resolving setRoomVisible`);
+                    resolve();
+                }
+            };
+            this.client?.on(ClientEvent.Room, waitForRoom);
+        });
     }
 
     /**
-     * Retrieve all rooms on the user's account. Used for pre-populating the local search cache.
-     * Retrieval is gradual over time.
+     * Retrieve all rooms on the user's account. Retrieval is gradual over time.
+     * This function MUST be called BEFORE the first sync request goes out.
      * @param batchSize The number of rooms to return in each request.
      * @param gapBetweenRequestsMs The number of milliseconds to wait between requests.
      */
-    public async startSpidering(batchSize: number, gapBetweenRequestsMs: number): Promise<void> {
-        await sleep(gapBetweenRequestsMs); // wait a bit as this is called on first render so let's let things load
-        let startIndex = batchSize;
-        let hasMore = true;
-        let firstTime = true;
-        while (hasMore) {
-            const endIndex = startIndex + batchSize - 1;
-            try {
-                const ranges = [
-                    [0, batchSize - 1],
-                    [startIndex, endIndex],
-                ];
-                if (firstTime) {
-                    await this.slidingSync!.setList(SlidingSyncManager.ListSearch, {
-                        // e.g [0,19] [20,39] then [0,19] [40,59]. We keep [0,20] constantly to ensure
-                        // any changes to the list whilst spidering are caught.
-                        ranges: ranges,
-                        sort: [
-                            "by_recency", // this list isn't shown on the UI so just sorting by timestamp is enough
-                        ],
-                        timeline_limit: 0, // we only care about the room details, not messages in the room
-                        required_state: [
-                            [EventType.RoomJoinRules, ""], // the public icon on the room list
-                            [EventType.RoomAvatar, ""], // any room avatar
-                            [EventType.RoomTombstone, ""], // lets JS SDK hide rooms which are dead
-                            [EventType.RoomEncryption, ""], // lets rooms be configured for E2EE correctly
-                            [EventType.RoomCreate, ""], // for isSpaceRoom checks
-                            [EventType.RoomMember, MSC3575_STATE_KEY_ME], // lets the client calculate that we are in fact in the room
-                        ],
-                        // we don't include_old_rooms here in an effort to reduce the impact of spidering all rooms
-                        // on the user's account. This means some data in the search dialog results may be inaccurate
-                        // e.g membership of space, but this will be corrected when the user clicks on the room
-                        // as the direct room subscription does include old room iterations.
-                        filters: {
-                            // we get spaces via a different list, so filter them out
-                            not_room_types: ["m.space"],
-                        },
-                    });
-                } else {
-                    await this.slidingSync!.setListRanges(SlidingSyncManager.ListSearch, ranges);
-                }
-            } catch {
-                // do nothing, as we reject only when we get interrupted but that's fine as the next
-                // request will include our data
-            } finally {
-                // gradually request more over time, even on errors.
-                await sleep(gapBetweenRequestsMs);
+    private async startSpidering(
+        slidingSync: SlidingSync,
+        batchSize: number,
+        gapBetweenRequestsMs: number,
+    ): Promise<void> {
+        // The manager has created several lists (see `sssLists` in this file), all of which will be spidered simultaneously.
+        // There are multiple lists to ensure that we can populate invites/favourites/DMs sections immediately, rather than
+        // potentially waiting minutes if they are all very old rooms (and hence are returned last by the server). In this
+        // way, the lists are effectively priority requests. We don't actually care which room goes into which list at this
+        // point, as the RoomListStore will calculate this based on the returned data.
+
+        // copy the initial set of list names and ranges, we'll keep this map updated.
+        const listToUpperBound = new Map(
+            Object.keys(sssLists).map((listName) => {
+                return [listName, sssLists[listName].ranges[0][1]];
+            }),
+        );
+        console.log("startSpidering:", listToUpperBound);
+
+        // listen for a response from the server. ANY 200 OK will do here, as we assume that it is ACKing
+        // the request change we have sent out. TODO: this may not be true if you concurrently subscribe to a room :/
+        // but in that case, for spidering at least, it isn't the end of the world as request N+1 includes all indexes
+        // from request N.
+        const lifecycle = async (
+            state: SlidingSyncState,
+            _: MSC3575SlidingSyncResponse | null,
+            err?: Error,
+        ): Promise<void> => {
+            if (state !== SlidingSyncState.Complete) {
+                return;
             }
-            const listData = this.slidingSync!.getListData(SlidingSyncManager.ListSearch)!;
-            hasMore = endIndex + 1 < listData.joinedCount;
-            startIndex += batchSize;
-            firstTime = false;
-        }
+            await sleep(gapBetweenRequestsMs); // don't tightloop; even on errors
+            if (err) {
+                return;
+            }
+
+            // for all lists with total counts > range => increase the range
+            let hasSetRanges = false;
+            listToUpperBound.forEach((currentUpperBound, listName) => {
+                const totalCount = slidingSync.getListData(listName)?.joinedCount || 0;
+                if (currentUpperBound < totalCount) {
+                    // increment the upper bound
+                    const newUpperBound = currentUpperBound + batchSize;
+                    console.log(`startSpidering: ${listName} ${currentUpperBound} => ${newUpperBound}`);
+                    listToUpperBound.set(listName, newUpperBound);
+                    // make the next request. This will only send the request when this callback has finished, so if
+                    // we set all the list ranges at once we will only send 1 new request.
+                    slidingSync.setListRanges(listName, [[0, newUpperBound]]);
+                    hasSetRanges = true;
+                }
+            });
+            if (!hasSetRanges) {
+                // finish spidering
+                slidingSync.off(SlidingSyncEvent.Lifecycle, lifecycle);
+            }
+        };
+        slidingSync.on(SlidingSyncEvent.Lifecycle, lifecycle);
     }
 
     /**
@@ -325,42 +382,10 @@ export class SlidingSyncManager {
      * @returns A working Sliding Sync or undefined
      */
     public async setup(client: MatrixClient): Promise<SlidingSync | undefined> {
-        const baseUrl = client.baseUrl;
-        const proxyUrl = SettingsStore.getValue("feature_sliding_sync_proxy_url");
-        const wellKnownProxyUrl = await this.getProxyFromWellKnown(client);
-
-        const slidingSyncEndpoint = proxyUrl || wellKnownProxyUrl || baseUrl;
-
-        this.configure(client, slidingSyncEndpoint);
-        logger.info("Sliding sync activated at", slidingSyncEndpoint);
-        this.startSpidering(100, 50); // 100 rooms at a time, 50ms apart
-
-        return this.slidingSync;
-    }
-
-    /**
-     * Get the sliding sync proxy URL from the client well known
-     * @param client The MatrixClient to use
-     * @return The proxy url
-     */
-    public async getProxyFromWellKnown(client: MatrixClient): Promise<string | undefined> {
-        let proxyUrl: string | undefined;
-
-        try {
-            const clientDomain = await client.getDomain();
-            if (clientDomain === null) {
-                throw new RangeError("Homeserver domain is null");
-            }
-            const clientWellKnown = await AutoDiscovery.findClientConfig(clientDomain);
-            proxyUrl = clientWellKnown?.["org.matrix.msc3575.proxy"]?.url;
-        } catch {
-            // Either client.getDomain() is null so we've shorted out, or is invalid so `AutoDiscovery.findClientConfig` has thrown
-        }
-
-        if (proxyUrl != undefined) {
-            logger.log("getProxyFromWellKnown: client well-known declares sliding sync proxy at", proxyUrl);
-        }
-        return proxyUrl;
+        const slidingSync = this.configure(client, client.baseUrl);
+        logger.info("Simplified Sliding Sync activated at", client.baseUrl);
+        this.startSpidering(slidingSync, 50, 50); // 50 rooms at a time, 50ms apart
+        return slidingSync;
     }
 
     /**
@@ -371,9 +396,9 @@ export class SlidingSyncManager {
     public async nativeSlidingSyncSupport(client: MatrixClient): Promise<boolean> {
         // Per https://github.com/matrix-org/matrix-spec-proposals/pull/3575/files#r1589542561
         // `client` can be undefined/null in tests for some reason.
-        const support = await client?.doesServerSupportUnstableFeature("org.matrix.msc3575");
+        const support = await client?.doesServerSupportUnstableFeature("org.matrix.simplified_msc3575");
         if (support) {
-            logger.log("nativeSlidingSyncSupport: sliding sync advertised as unstable");
+            logger.log("nativeSlidingSyncSupport: org.matrix.simplified_msc3575 sliding sync advertised as unstable");
         }
         return support;
     }
@@ -387,20 +412,9 @@ export class SlidingSyncManager {
      */
     public async checkSupport(client: MatrixClient): Promise<void> {
         if (await this.nativeSlidingSyncSupport(client)) {
-            SlidingSyncController.serverSupportsSlidingSync = true;
+            SlidingSyncManager.serverSupportsSlidingSync = true;
             return;
         }
-
-        const proxyUrl = await this.getProxyFromWellKnown(client);
-        if (proxyUrl != undefined) {
-            const response = await fetch(new URL("/client/server.json", proxyUrl), {
-                method: Method.Get,
-                signal: timeoutSignal(10 * 1000), // 10s
-            });
-            if (response.status === 200) {
-                logger.log("checkSupport: well-known sliding sync proxy is up at", proxyUrl);
-                SlidingSyncController.serverSupportsSlidingSync = true;
-            }
-        }
+        SlidingSyncManager.serverSupportsSlidingSync = false;
     }
 }

src/Unread.ts

@@ -11,7 +11,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import shouldHideEvent from "./shouldHideEvent";
 import { haveRendererForEvent } from "./events/EventTileFactory";
-import SettingsStore from "./settings/SettingsStore";
 import { RoomNotifState, getRoomNotifsState } from "./RoomNotifs";
 
 /**
@@ -44,12 +43,6 @@ export function eventTriggersUnreadCount(client: MatrixClient, ev: MatrixEvent):
 }
 
 export function doesRoomHaveUnreadMessages(room: Room, includeThreads: boolean): boolean {
-    if (SettingsStore.getValue("feature_sliding_sync")) {
-        // TODO: https://github.com/vector-im/element-web/issues/23207
-        // Sliding Sync doesn't support unread indicator dots (yet...)
-        return false;
-    }
-
     const toCheck: Array<Room | Thread> = [room];
     if (includeThreads) {
         toCheck.push(...room.getThreads());

src/accessibility/context_menu/StyledMenuItemCheckbox.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2019 The Matrix.org Foundation C.I.C.
 Copyright 2018 New Vector Ltd
 Copyright 2015, 2016 OpenMarket Ltd
@@ -16,13 +16,12 @@ import { KeyBindingAction } from "../KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 
 interface IProps extends React.ComponentProps<typeof StyledCheckbox> {
-    label?: string;
     onChange(): void; // we handle keyup/down ourselves so lose the ChangeEvent
     onClose(): void; // gets called after onChange on KeyBindingAction.ActivateSelectedButton
 }
 
 // Semantic component for representing a styled role=menuitemcheckbox
-export const StyledMenuItemCheckbox: React.FC<IProps> = ({ children, label, onChange, onClose, ...props }) => {
+export const StyledMenuItemCheckbox: React.FC<IProps> = ({ children, onChange, onClose, ...props }) => {
     const [onFocus, isActive, ref] = useRovingTabIndex<HTMLInputElement>();
 
     const onKeyDown = (e: React.KeyboardEvent): void => {
@@ -63,7 +62,6 @@ export const StyledMenuItemCheckbox: React.FC<IProps> = ({ children, label, onCh
         <StyledCheckbox
             {...props}
             role="menuitemcheckbox"
-            aria-label={label}
             onChange={onChange}
             onKeyDown={onKeyDown}
             onKeyUp={onKeyUp}

src/components/structures/EmbeddedPage.tsx

@@ -40,8 +40,8 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
     private unmounted = false;
     private dispatcherRef?: string;
 
-    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             page: "",

src/components/structures/MatrixChat.tsx

@@ -1388,7 +1388,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 // so show the homepage.
                 dis.dispatch<ViewHomePagePayload>({ action: Action.ViewHomePage, justRegistered: true });
             }
-        } else {
+        } else if (!(await this.shouldForceVerification())) {
             this.showScreenAfterLogin();
         }
 
@@ -2003,9 +2003,17 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     };
 
     // complete security / e2e setup has finished
-    private onCompleteSecurityE2eSetupFinished = (): void => {
-        // This is async but we making this function async to wait for it isn't useful
-        this.onShowPostLoginScreen().catch((e) => {
+    private onCompleteSecurityE2eSetupFinished = async (): Promise<void> => {
+        const forceVerify = await this.shouldForceVerification();
+        if (forceVerify) {
+            const isVerified = await MatrixClientPeg.safeGet().getCrypto()?.isCrossSigningReady();
+            if (!isVerified) {
+                // We must verify but we haven't yet verified - don't continue logging in
+                return;
+            }
+        }
+
+        await this.onShowPostLoginScreen().catch((e) => {
             logger.error("Exception showing post-login screen", e);
         });
     };

src/components/structures/MessagePanel.tsx

@@ -259,8 +259,8 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     // A map to allow groupers to maintain consistent keys even if their first event is uprooted due to back-pagination.
     public grouperKeyMap = new WeakMap<MatrixEvent, string>();
 
-    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             // previous positions the read marker has been in, so we can

src/components/structures/NonUrgentToastContainer.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as React from "react";
+import React from "react";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
 
 import { type ComponentClass } from "../../@types/common";

src/components/structures/NotificationPanel.tsx

@@ -38,8 +38,8 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
 
     private card = React.createRef<HTMLDivElement>();
 
-    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             narrow: false,

src/components/structures/RightPanel.tsx

@@ -64,8 +64,10 @@ export default class RightPanel extends React.Component<Props, IState> {
     public static contextType = MatrixClientContext;
     declare public context: React.ContextType<typeof MatrixClientContext>;
 
-    public constructor(props: Props, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+    public constructor(props: Props) {
+        super(props);
+
+        this.state = RightPanel.getDerivedStateFromProps(props);
     }
 
     private readonly delayedUpdate = throttle(

src/components/structures/RoomSearch.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import * as React from "react";
+import React from "react";
 
 import { ALTERNATE_KEY_NAME } from "../../accessibility/KeyboardShortcuts";
 import defaultDispatcher from "../../dispatcher/dispatcher";

src/components/structures/SpaceHierarchy.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021-2023 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -16,6 +16,7 @@ import React, {
     useCallback,
     useContext,
     useEffect,
+    useId,
     useMemo,
     useRef,
     useState,
@@ -116,6 +117,7 @@ const Tile: React.FC<ITileProps> = ({
     const [showChildren, toggleShowChildren] = useStateToggle(true);
     const [onFocus, isActive, ref, nodeRef] = useRovingTabIndex();
     const [busy, setBusy] = useState(false);
+    const checkboxLabelId = useId();
 
     const onPreviewClick = (ev: ButtonEvent): void => {
         ev.preventDefault();
@@ -172,7 +174,14 @@ const Tile: React.FC<ITileProps> = ({
     let checkbox: ReactElement | undefined;
     if (onToggleClick) {
         if (hasPermissions) {
-            checkbox = <StyledCheckbox checked={!!selected} onChange={onToggleClick} tabIndex={isActive ? 0 : -1} />;
+            checkbox = (
+                <StyledCheckbox
+                    role="presentation"
+                    aria-labelledby={checkboxLabelId}
+                    checked={!!selected}
+                    tabIndex={-1}
+                />
+            );
         } else {
             checkbox = (
                 <TextWithTooltip
@@ -181,7 +190,12 @@ const Tile: React.FC<ITileProps> = ({
                         ev.stopPropagation();
                     }}
                 >
-                    <StyledCheckbox disabled={true} tabIndex={isActive ? 0 : -1} />
+                    <StyledCheckbox
+                        role="presentation"
+                        aria-labelledby={checkboxLabelId}
+                        disabled={true}
+                        tabIndex={-1}
+                    />
                 </TextWithTooltip>
             );
         }
@@ -248,7 +262,7 @@ const Tile: React.FC<ITileProps> = ({
             <div className="mx_SpaceHierarchy_roomTile_item">
                 <div className="mx_SpaceHierarchy_roomTile_avatar">{avatar}</div>
                 <div className="mx_SpaceHierarchy_roomTile_name">
-                    {name}
+                    <span id={checkboxLabelId}>{name}</span>
                     {joinedSection}
                     {suggestedSection}
                 </div>
@@ -330,11 +344,14 @@ const Tile: React.FC<ITileProps> = ({
         };
     }
 
+    const shouldToggle = hasPermissions && onToggleClick;
+
     return (
         <li
             className="mx_SpaceHierarchy_roomTileWrapper"
             role="treeitem"
             aria-selected={selected}
+            aria-labelledby={checkboxLabelId}
             aria-expanded={children ? showChildren : undefined}
         >
             <AccessibleButton
@@ -342,7 +359,7 @@ const Tile: React.FC<ITileProps> = ({
                     mx_SpaceHierarchy_subspace: room.room_type === RoomType.Space,
                     mx_SpaceHierarchy_joining: busy,
                 })}
-                onClick={hasPermissions && onToggleClick ? onToggleClick : onPreviewClick}
+                onClick={shouldToggle ? onToggleClick : onPreviewClick}
                 onKeyDown={onKeyDown}
                 ref={ref}
                 onFocus={onFocus}

src/components/structures/ThreadView.tsx

@@ -86,8 +86,8 @@ export default class ThreadView extends React.Component<IProps, IState> {
     // Set by setEventId in ctor.
     private eventId!: string;
 
-    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.setEventId(this.props.mxEvent);
         const thread = this.props.room.getThread(this.eventId) ?? undefined;

src/components/structures/ToastContainer.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as React from "react";
+import React from "react";
 import classNames from "classnames";
 import { Text } from "@vector-im/compound-web";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";

src/components/structures/UserMenu.tsx

@@ -83,8 +83,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
     private readonly dndWatcherRef?: string;
     private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
 
-    public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             contextMenuPosition: null,
@@ -370,6 +370,13 @@ export default class UserMenu extends React.Component<IProps, IState> {
             ? toRightOf(this.state.contextMenuPosition)
             : below(this.state.contextMenuPosition);
 
+        const userIdentifierString = UserIdentifierCustomisations.getDisplayUserIdentifier(
+            MatrixClientPeg.safeGet().getSafeUserId(),
+            {
+                withDisplayName: true,
+            },
+        );
+
         return (
             <IconizedContextMenu {...position} onFinished={this.onCloseMenu} className="mx_UserMenu_contextMenu">
                 <div className="mx_UserMenu_contextMenu_header">
@@ -377,13 +384,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         <span className="mx_UserMenu_contextMenu_displayName">
                             {OwnProfileStore.instance.displayName}
                         </span>
-                        <span className="mx_UserMenu_contextMenu_userId">
-                            {UserIdentifierCustomisations.getDisplayUserIdentifier(
-                                MatrixClientPeg.safeGet().getSafeUserId(),
-                                {
-                                    withDisplayName: true,
-                                },
-                            )}
+                        <span className="mx_UserMenu_contextMenu_userId" title={userIdentifierString || ""}>
+                            {userIdentifierString}
                         </span>
                     </div>
 

src/components/structures/UserView.tsx

@@ -34,8 +34,8 @@ export default class UserView extends React.Component<IProps, IState> {
     public static contextType = MatrixClientContext;
     declare public context: React.ContextType<typeof MatrixClientContext>;
 
-    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
         this.state = {
             loading: true,
         };

src/components/structures/auth/SoftLogout.tsx

@@ -66,8 +66,8 @@ export default class SoftLogout extends React.Component<IProps, IState> {
     public static contextType = SDKContext;
     declare public context: React.ContextType<typeof SDKContext>;
 
-    public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             loginView: LoginView.Loading,

src/components/viewmodels/roomlist/MessagePreviewViewModel.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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 { useCallback, useEffect, useState } from "react";
+
+import type { Room } from "matrix-js-sdk/src/matrix";
+import { type MessagePreview, MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+
+interface MessagePreviewViewState {
+    /**
+     * A string representation of the message preview if available.
+     */
+    message?: string;
+}
+
+/**
+ * View model for rendering a message preview for a given room list item.
+ * @param room The room for which we're rendering the message preview.
+ * @see {@link MessagePreviewViewState} for what this view model returns.
+ */
+export function useMessagePreviewViewModel(room: Room): MessagePreviewViewState {
+    const [messagePreview, setMessagePreview] = useState<MessagePreview | null>(null);
+
+    const updatePreview = useCallback(async (): Promise<void> => {
+        /**
+         * The second argument to getPreviewForRoom is a tag id which doesn't really make
+         * much sense within the context of the new room list. We can pass an empty string
+         * to match all tags for now but we should remember to actually change the implementation
+         * in the store once we remove the legacy room list.
+         */
+        const newPreview = await MessagePreviewStore.instance.getPreviewForRoom(room, "");
+        setMessagePreview(newPreview);
+    }, [room]);
+
+    /**
+     * Update when the message preview has changed for this room.
+     */
+    useEventEmitter(MessagePreviewStore.instance, MessagePreviewStore.getPreviewChangedEventName(room), () => {
+        updatePreview();
+    });
+
+    /**
+     * Do an initial fetch of the message preview.
+     */
+    useEffect(() => {
+        updatePreview();
+    }, [updatePreview]);
+
+    return {
+        message: messagePreview?.text,
+    };
+}

src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx

@@ -6,10 +6,8 @@
  */
 
 import { useCallback } from "react";
-import { EventTimeline, EventType, JoinRule, type Room, RoomEvent, RoomType } from "matrix-js-sdk/src/matrix";
+import { JoinRule, type Room, RoomEvent, RoomType } from "matrix-js-sdk/src/matrix";
 
-import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
-import { UIComponent } from "../../../settings/UIFeature";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import PosthogTrackers from "../../../PosthogTrackers";
@@ -32,6 +30,7 @@ import {
 } from "../../../utils/space";
 import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
+import { createRoom, hasCreateRoomRights } from "./utils";
 
 /**
  * Hook to get the active space and its title.
@@ -128,14 +127,7 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
     const { activeSpace, title } = useSpace();
     const isSpaceRoom = Boolean(activeSpace);
 
-    const canCreateRoomInSpace = Boolean(
-        activeSpace
-            ?.getLiveTimeline()
-            .getState(EventTimeline.FORWARDS)
-            ?.maySendStateEvent(EventType.RoomAvatar, matrixClient.getSafeUserId()),
-    );
-    // If we are in a space, we check canCreateRoomInSpace
-    const canCreateRoom = shouldShowComponent(UIComponent.CreateRooms) && (!isSpaceRoom || canCreateRoomInSpace);
+    const canCreateRoom = hasCreateRoomRights(matrixClient, activeSpace);
     const canCreateVideoRoom = useFeatureEnabled("feature_video_rooms");
     const displayComposeMenu = canCreateRoom || canCreateVideoRoom;
     const displaySpaceMenu = isSpaceRoom;
@@ -151,13 +143,9 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
         PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateChatItem", e);
     }, []);
 
-    const createRoom = useCallback(
+    const createRoomMemoized = useCallback(
         (e: Event) => {
-            if (activeSpace) {
-                showCreateNewRoom(activeSpace);
-            } else {
-                defaultDispatcher.fire(Action.CreateRoom);
-            }
+            createRoom(activeSpace);
             PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateRoomItem", e);
         },
         [activeSpace],
@@ -213,7 +201,7 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
         canInviteInSpace,
         canAccessSpaceSettings,
         createChatRoom,
-        createRoom,
+        createRoom: createRoomMemoized,
         createVideoRoom,
         openSpaceHome,
         inviteInSpace,

src/components/viewmodels/roomlist/RoomListViewModel.tsx

@@ -5,21 +5,56 @@ 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 } from "react";
+
 import type { Room } from "matrix-js-sdk/src/matrix";
 import { type PrimaryFilter, type SecondaryFilters, useFilteredRooms } from "./useFilteredRooms";
 import { type SortOption, useSorter } from "./useSorter";
+import { useMessagePreviewToggle } from "./useMessagePreviewToggle";
+import { createRoom as createRoomFunc, hasCreateRoomRights } from "./utils";
+import { useEventEmitterState } from "../../../hooks/useEventEmitter";
+import { UPDATE_SELECTED_SPACE } from "../../../stores/spaces";
+import SpaceStore from "../../../stores/spaces/SpaceStore";
+import dispatcher from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
+import { useIndexForActiveRoom } from "./useIndexForActiveRoom";
 
 export interface RoomListViewState {
     /**
      * A list of rooms to be displayed in the left panel.
      */
     rooms: Room[];
+
+    /**
+     * Create a chat room
+     * @param e - The click event
+     */
+    createChatRoom: () => void;
+
+    /**
+     * Whether the user can create a room in the current space
+     */
+    canCreateRoom: boolean;
+
+    /**
+     * Create a room
+     * @param e - The click event
+     */
+    createRoom: () => void;
+
     /**
      * A list of objects that provide the view enough information
      * to render primary room filters.
      */
     primaryFilters: PrimaryFilter[];
 
+    /**
+     * The currently active primary filter.
+     * If no primary filter is active, this will be undefined.
+     */
+    activePrimaryFilter?: PrimaryFilter;
+
     /**
      * A function to activate a given secondary filter.
      */
@@ -39,6 +74,21 @@ export interface RoomListViewState {
      * The currently active sort option.
      */
     activeSortOption: SortOption;
+
+    /**
+     * Whether message previews must be shown or not.
+     */
+    shouldShowMessagePreview: boolean;
+
+    /**
+     * A function to turn on/off message previews.
+     */
+    toggleMessagePreview: () => void;
+
+    /**
+     * The index of the active room in the room list.
+     */
+    activeIndex: number | undefined;
 }
 
 /**
@@ -46,15 +96,37 @@ export interface RoomListViewState {
  * @see {@link RoomListViewState} for more information about what this view model returns.
  */
 export function useRoomListViewModel(): RoomListViewState {
-    const { primaryFilters, rooms, activateSecondaryFilter, activeSecondaryFilter } = useFilteredRooms();
+    const matrixClient = useMatrixClientContext();
+    const { primaryFilters, activePrimaryFilter, rooms, activateSecondaryFilter, activeSecondaryFilter } =
+        useFilteredRooms();
+
+    const currentSpace = useEventEmitterState<Room | null>(
+        SpaceStore.instance,
+        UPDATE_SELECTED_SPACE,
+        () => SpaceStore.instance.activeSpaceRoom,
+    );
+    const canCreateRoom = hasCreateRoomRights(matrixClient, currentSpace);
+
+    const activeIndex = useIndexForActiveRoom(rooms);
     const { activeSortOption, sort } = useSorter();
+    const { shouldShowMessagePreview, toggleMessagePreview } = useMessagePreviewToggle();
+
+    const createChatRoom = useCallback(() => dispatcher.fire(Action.CreateChat), []);
+    const createRoom = useCallback(() => createRoomFunc(currentSpace), [currentSpace]);
 
     return {
         rooms,
+        canCreateRoom,
+        createRoom,
+        createChatRoom,
         primaryFilters,
+        activePrimaryFilter,
         activateSecondaryFilter,
         activeSecondaryFilter,
         activeSortOption,
         sort,
+        shouldShowMessagePreview,
+        toggleMessagePreview,
+        activeIndex,
     };
 }

src/components/viewmodels/roomlist/useFilteredRooms.tsx

@@ -27,6 +27,8 @@ export interface PrimaryFilter {
     active: boolean;
     // Text that can be used in the UI to represent this filter.
     name: string;
+    // The key of the filter
+    key: FilterKey;
 }
 
 interface FilteredRooms {
@@ -34,6 +36,11 @@ interface FilteredRooms {
     rooms: Room[];
     activateSecondaryFilter: (filter: SecondaryFilters) => void;
     activeSecondaryFilter: SecondaryFilters;
+    /**
+     * The currently active primary filter.
+     * If no primary filter is active, this will be undefined.
+     */
+    activePrimaryFilter?: PrimaryFilter;
 }
 
 const filterKeyToNameMap: Map<FilterKey, TranslationKey> = new Map([
@@ -138,22 +145,14 @@ export function useFilteredRooms(): FilteredRooms {
             // SecondaryFilter is an enum for the UI, let's convert it to something
             // that the store will understand.
             const secondary = secondaryFiltersToFilterKeyMap.get(filter);
-
-            // Active primary filter may need to be toggled off when applying this secondary filer.
-            let primary = primaryFilter;
-            if (
-                primaryFilter !== undefined &&
-                secondary !== undefined &&
-                !isPrimaryFilterCompatible(primaryFilter, secondary)
-            ) {
-                primary = undefined;
-            }
-
             setActiveSecondaryFilter(filter);
-            setPrimaryFilter(primary);
-            updateRoomsFromStore(filterUndefined([primary, secondary]));
+
+            // Reset any active primary filters.
+            setPrimaryFilter(undefined);
+
+            updateRoomsFromStore(filterUndefined([secondary]));
         },
-        [activeSecondaryFilter, primaryFilter, updateRoomsFromStore],
+        [activeSecondaryFilter, updateRoomsFromStore],
     );
 
     /**
@@ -172,6 +171,7 @@ export function useFilteredRooms(): FilteredRooms {
                 },
                 active: primaryFilter === key,
                 name,
+                key,
             };
         };
         const filters: PrimaryFilter[] = [];
@@ -184,5 +184,7 @@ export function useFilteredRooms(): FilteredRooms {
         return filters;
     }, [primaryFilter, updateRoomsFromStore, secondaryFilter]);
 
-    return { primaryFilters, rooms, activateSecondaryFilter, activeSecondaryFilter };
+    const activePrimaryFilter = useMemo(() => primaryFilters.find((filter) => filter.active), [primaryFilters]);
+
+    return { primaryFilters, activePrimaryFilter, rooms, activateSecondaryFilter, activeSecondaryFilter };
 }

src/components/viewmodels/roomlist/useIndexForActiveRoom.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 { useCallback, useEffect, useState } from "react";
+
+import { SdkContextClass } from "../../../contexts/SDKContext";
+import { useDispatcher } from "../../../hooks/useDispatcher";
+import dispatcher from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import type { Room } from "matrix-js-sdk/src/matrix";
+
+/**
+ * Tracks the index of the active room in the given array of rooms.
+ * @param rooms list of rooms
+ * @returns index of the active room or undefined otherwise.
+ */
+export function useIndexForActiveRoom(rooms: Room[]): number | undefined {
+    const [index, setIndex] = useState<number | undefined>(undefined);
+
+    const calculateIndex = useCallback(
+        (newRoomId?: string) => {
+            const activeRoomId = newRoomId ?? SdkContextClass.instance.roomViewStore.getRoomId();
+            const index = rooms.findIndex((room) => room.roomId === activeRoomId);
+            setIndex(index === -1 ? undefined : index);
+        },
+        [rooms],
+    );
+
+    // Re-calculate the index when the active room has changed.
+    useDispatcher(dispatcher, (payload) => {
+        if (payload.action === Action.ActiveRoomChanged) calculateIndex(payload.newRoomId);
+    });
+
+    // Re-calculate the index when the list of rooms has changed.
+    useEffect(() => {
+        calculateIndex();
+    }, [calculateIndex, rooms]);
+
+    return index;
+}

src/components/viewmodels/roomlist/useMessagePreviewToggle.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { useCallback, useState } from "react";
+
+import SettingsStore from "../../../settings/SettingsStore";
+import { SettingLevel } from "../../../settings/SettingLevel";
+
+interface MessagePreviewToggleState {
+    shouldShowMessagePreview: boolean;
+    toggleMessagePreview: () => void;
+}
+
+/**
+ * This hook:
+ * - Provides a state that tracks whether message previews are turned on or off.
+ * - Provides a function to toggle message previews.
+ */
+export function useMessagePreviewToggle(): MessagePreviewToggleState {
+    const [shouldShowMessagePreview, setShouldShowMessagePreview] = useState(() =>
+        SettingsStore.getValue("RoomList.showMessagePreview"),
+    );
+
+    const toggleMessagePreview = useCallback((): void => {
+        setShouldShowMessagePreview((current) => {
+            const toggled = !current;
+            SettingsStore.setValue("RoomList.showMessagePreview", null, SettingLevel.DEVICE, toggled);
+            return toggled;
+        });
+    }, []);
+
+    return { toggleMessagePreview, shouldShowMessagePreview };
+}

src/components/viewmodels/roomlist/utils.ts

@@ -5,11 +5,14 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type Room, KnownMembership } from "matrix-js-sdk/src/matrix";
+import { type Room, KnownMembership, EventTimeline, EventType, type MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { isKnockDenied } from "../../../utils/membership";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
+import { showCreateNewRoom } from "../../../utils/space";
+import dispatcher from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
 
 /**
  * Check if the user has access to the options menu.
@@ -23,3 +26,33 @@ export function hasAccessToOptionsMenu(room: Room): boolean {
             shouldShowComponent(UIComponent.RoomOptionsMenu))
     );
 }
+
+/**
+ * Create a room
+ * @param space - The space to create the room in
+ */
+export async function createRoom(space?: Room | null): Promise<void> {
+    if (space) {
+        await showCreateNewRoom(space);
+    } else {
+        dispatcher.fire(Action.CreateRoom);
+    }
+}
+
+/**
+ * Check if the user has the rights to create a room in the given space
+ * If the space is not provided, it will check if the user has the rights to create a room in general
+ * @param matrixClient
+ * @param space
+ */
+export function hasCreateRoomRights(matrixClient: MatrixClient, space?: Room | null): boolean {
+    const hasUIRight = shouldShowComponent(UIComponent.CreateRooms);
+    if (!space || !hasUIRight) return hasUIRight;
+
+    return Boolean(
+        space
+            ?.getLiveTimeline()
+            .getState(EventTimeline.FORWARDS)
+            ?.maySendStateEvent(EventType.RoomAvatar, matrixClient.getSafeUserId()),
+    );
+}

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -6,8 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as React from "react";
-import { createRef } from "react";
+import React, { createRef } from "react";
 import { type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";

src/components/views/context_menus/MessageContextMenu.tsx

@@ -130,8 +130,8 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
 
     private reactButtonRef = createRef<any>(); // XXX Ref to a functional component
 
-    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             canRedact: false,

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -1,12 +1,12 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ReactElement, type ReactNode, useContext, useMemo, useRef, useState } from "react";
+import React, { type ReactElement, type ReactNode, useContext, useId, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import { type Room, EventType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
@@ -53,8 +53,9 @@ export const Entry: React.FC<{
     checked: boolean;
     onChange?(value: boolean): void;
 }> = ({ room, checked, onChange }) => {
+    const id = useId();
     return (
-        <label className="mx_AddExistingToSpace_entry">
+        <li id={id} className="mx_AddExistingToSpace_entry" aria-label={room.name}>
             {room?.isSpaceRoom() ? (
                 <RoomAvatar room={room} size="32px" />
             ) : (
@@ -62,11 +63,12 @@ export const Entry: React.FC<{
             )}
             <span className="mx_AddExistingToSpace_entry_name">{room.name}</span>
             <StyledCheckbox
+                aria-labelledby={id}
                 onChange={onChange ? (e) => onChange(e.currentTarget.checked) : undefined}
                 checked={checked}
                 disabled={!onChange}
             />
-        </label>
+        </li>
     );
 };
 
@@ -357,6 +359,7 @@ const defaultRendererFactory =
         <div className="mx_AddExistingToSpace_section">
             <h3>{_t(title)}</h3>
             <LazyRenderList
+                element="ul"
                 itemHeight={ROW_HEIGHT}
                 items={rooms}
                 scrollTop={scrollTop}

src/components/views/dialogs/BulkRedactDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -113,12 +113,13 @@ const BulkRedactDialog: React.FC<Props> = (props) => {
                 <div className="mx_Dialog_content" id="mx_Dialog_content">
                     <p>{_t("user_info|redact|confirm_description_1", { count, user })}</p>
                     <p>{_t("user_info|redact|confirm_description_2")}</p>
-                    <StyledCheckbox checked={keepStateEvents} onChange={(e) => setKeepStateEvents(e.target.checked)}>
+                    <StyledCheckbox
+                        description={_t("user_info|redact|confirm_keep_state_explainer")}
+                        checked={keepStateEvents}
+                        onChange={(e) => setKeepStateEvents(e.target.checked)}
+                    >
                         {_t("user_info|redact|confirm_keep_state_label")}
                     </StyledCheckbox>
-                    <div className="mx_BulkRedactDialog_checkboxMicrocopy">
-                        {_t("user_info|redact|confirm_keep_state_explainer")}
-                    </div>
                 </div>
                 <DialogButtons
                     primaryButton={_t("user_info|redact|confirm_button", { count })}

src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -78,7 +78,6 @@ const GenericFeatureFeedbackDialog: React.FC<IProps> = ({
                         }}
                         autoFocus={true}
                     />
-
                     <StyledCheckbox
                         checked={canContact}
                         onChange={(e) => setCanContact((e.target as HTMLInputElement).checked)}

src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -44,22 +44,23 @@ const Entry: React.FC<{
     }
 
     return (
-        <label className="mx_ManageRestrictedJoinRuleDialog_entry">
-            <div>
-                <div>
-                    {localRoom ? <RoomAvatar room={room} size="20px" /> : <RoomAvatar oobData={room} size="20px" />}
-                    <span className="mx_ManageRestrictedJoinRuleDialog_entry_name">{room.name}</span>
-                </div>
-                {description && (
-                    <div className="mx_ManageRestrictedJoinRuleDialog_entry_description">{description}</div>
-                )}
-            </div>
+        <div className="mx_ManageRestrictedJoinRuleDialog_entry">
             <StyledCheckbox
                 onChange={onChange ? (e) => onChange(e.target.checked) : undefined}
                 checked={checked}
                 disabled={!onChange}
-            />
-        </label>
+                description={description}
+            >
+                <div>
+                    {localRoom ? (
+                        <RoomAvatar role="none" room={room} size="20px" />
+                    ) : (
+                        <RoomAvatar oobData={room} size="20px" />
+                    )}
+                    <span className="mx_ManageRestrictedJoinRuleDialog_entry_name">{room.name}</span>
+                </div>
+            </StyledCheckbox>
+        </div>
     );
 };
 

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as React from "react";
+import React from "react";
 import {
     ClientWidgetApi,
     type IModalWidgetCloseRequest,

src/components/views/dialogs/RegistrationEmailPromptDialog.tsx

@@ -6,8 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as React from "react";
-import { type SyntheticEvent, useRef, useState } from "react";
+import React, { type SyntheticEvent, useRef, useState } from "react";
 
 import { _t, _td } from "../../../languageHandler";
 import type Field from "../elements/Field";

src/components/views/dialogs/SpacePreferencesDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -45,14 +45,13 @@ const SpacePreferencesAppearanceTab: React.FC<Pick<IProps, "space">> = ({ space
                                 !showPeople,
                             );
                         }}
+                        description={_t("space|preferences|show_people_in_space", {
+                            spaceName: space.name,
+                        })}
                     >
                         {_t("common|people")}
                     </StyledCheckbox>
-                    <SettingsSubsectionText>
-                        {_t("space|preferences|show_people_in_space", {
-                            spaceName: space.name,
-                        })}
-                    </SettingsSubsectionText>
+                    <SettingsSubsectionText />
                 </SettingsSubsection>
             </SettingsSection>
         </SettingsTab>

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -50,6 +50,11 @@ import { EncryptionUserSettingsTab } from "../settings/tabs/user/EncryptionUserS
 interface IProps {
     initialTabId?: UserTab;
     showMsc4108QrCode?: boolean;
+    /**
+     * If `true`, the flow for a user to reset their encryption will be shown. In this case, `initialTabId` must be `UserTab.Encryption`.
+     *
+     * If false or undefined, show the tab as normal.
+     */
     showResetIdentity?: boolean;
     sdkContext: SdkContextClass;
     onFinished(): void;
@@ -92,7 +97,7 @@ function titleForTabID(tabId: UserTab): React.ReactNode {
 export default function UserSettingsDialog(props: IProps): JSX.Element {
     const voipEnabled = useSettingValue(UIFeature.Voip);
     const mjolnirEnabled = useSettingValue("feature_mjolnir");
-    // store these props in state as changing tabs back and forth should clear it
+    // store these props in state as changing tabs back and forth should clear them
     const [showMsc4108QrCode, setShowMsc4108QrCode] = useState(props.showMsc4108QrCode);
     const [showResetIdentity, setShowResetIdentity] = useState(props.showResetIdentity);
 

src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -100,16 +100,12 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
         });
         const checkboxRows = orderedCapabilities.map(([cap, isChecked], i) => {
             const text = CapabilityText.for(cap, this.props.widgetKind);
-            const byline = text.byline ? (
-                <span className="mx_WidgetCapabilitiesPromptDialog_byline">{text.byline}</span>
-            ) : null;
 
             return (
                 <div className="mx_WidgetCapabilitiesPromptDialog_cap" key={cap + i}>
-                    <StyledCheckbox checked={isChecked} onChange={() => this.onToggle(cap)}>
+                    <StyledCheckbox checked={isChecked} onChange={() => this.onToggle(cap)} description={text.byline}>
                         {text.primary}
                     </StyledCheckbox>
-                    {byline}
                 </div>
             );
         });

src/components/views/elements/DialPadBackspaceButton.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as React from "react";
+import React from "react";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";

src/components/views/elements/LabelledCheckbox.tsx

@@ -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
@@ -28,13 +28,16 @@ interface IProps {
 
 const LabelledCheckbox: React.FC<IProps> = ({ value, label, byline, disabled, onChange, className }) => {
     return (
-        <label className={classnames("mx_LabelledCheckbox", className)}>
-            <StyledCheckbox disabled={disabled} checked={value} onChange={(e) => onChange(e.target.checked)} />
-            <div className="mx_LabelledCheckbox_labels">
+        <div className={classnames("mx_LabelledCheckbox", className)}>
+            <StyledCheckbox
+                description={byline}
+                disabled={disabled}
+                checked={value}
+                onChange={(e) => onChange(e.target.checked)}
+            >
                 <span className="mx_LabelledCheckbox_label">{label}</span>
-                {byline ? <span className="mx_LabelledCheckbox_byline">{byline}</span> : null}
-            </div>
-        </label>
+            </StyledCheckbox>
+        </div>
     );
 };
 

src/components/views/elements/QRCode.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as React from "react";
+import React from "react";
 import { toDataURL, type QRCodeSegment, type QRCodeToDataURLOptions, type QRCodeRenderersOptions } from "qrcode";
 import classNames from "classnames";
 

src/components/views/elements/ReplyChain.tsx

@@ -71,8 +71,8 @@ export default class ReplyChain extends React.Component<IProps, IState> {
     private room: Room;
     private blockquoteRef = React.createRef<HTMLQuoteElement>();
 
-    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             events: [],

src/components/views/elements/RoomAliasField.tsx

@@ -37,8 +37,8 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
 
     private fieldRef = createRef<Field>();
 
-    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             isValid: true,

src/components/views/elements/StyledCheckbox.tsx

@@ -1,64 +1,51 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type Ref } from "react";
+import React, { useId, type ReactNode, type Ref } from "react";
 import { secureRandomString } from "matrix-js-sdk/src/randomstring";
-import classnames from "classnames";
-
-export enum CheckboxStyle {
-    Solid = "solid",
-    Outline = "outline",
-}
+import { CheckboxInput, Form, HelpMessage, InlineField, Label } from "@vector-im/compound-web";
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
     inputRef?: Ref<HTMLInputElement>;
-    kind?: CheckboxStyle;
     id?: string;
+    description?: ReactNode;
 }
 
-export default class StyledCheckbox extends React.PureComponent<IProps> {
-    private id: string;
+const StyledCheckbox: React.FC<IProps> = ({
+    id: initialId,
+    children: label,
+    className,
+    inputRef,
+    description,
+    ...otherProps
+}) => {
+    const id = initialId || "checkbox_" + secureRandomString(10);
+    const name = useId();
+    const descriptionId = useId();
+    return (
+        <Form.Root>
+            <InlineField
+                className={className}
+                name={name}
+                control={
+                    <CheckboxInput
+                        ref={inputRef}
+                        aria-describedby={description ? descriptionId : undefined}
+                        id={id}
+                        {...otherProps}
+                    />
+                }
+            >
+                {label && <Label htmlFor={id}>{label}</Label>}
+                {description && <HelpMessage id={descriptionId}>{description}</HelpMessage>}
+            </InlineField>
+        </Form.Root>
+    );
+};
 
-    public static readonly defaultProps = {
-        className: "",
-    };
-
-    public constructor(props: IProps) {
-        super(props);
-        // 56^10 so unlikely chance of collision.
-        this.id = this.props.id || "checkbox_" + secureRandomString(10);
-    }
-
-    public render(): React.ReactNode {
-        /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { children, className, kind = CheckboxStyle.Solid, inputRef, ...otherProps } = this.props;
-
-        const newClassName = classnames("mx_Checkbox", className, {
-            mx_Checkbox_hasKind: kind,
-            [`mx_Checkbox_kind_${kind}`]: kind,
-        });
-        return (
-            <span className={newClassName}>
-                <input
-                    // Pass through the ref - used for keyboard shortcut access to some buttons
-                    ref={inputRef}
-                    id={this.id}
-                    {...otherProps}
-                    type="checkbox"
-                />
-                <label htmlFor={this.id}>
-                    {/* Using the div to center the image */}
-                    <div className="mx_Checkbox_background">
-                        <div className="mx_Checkbox_checkmark" />
-                    </div>
-                    {!!this.props.children && <div>{this.props.children}</div>}
-                </label>
-            </span>
-        );
-    }
-}
+export default StyledCheckbox;

src/components/views/emojipicker/ReactionPicker.tsx

@@ -31,8 +31,8 @@ class ReactionPicker extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
     declare public context: React.ContextType<typeof RoomContext>;
 
-    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             selectedEmojis: new Set(Object.keys(this.getReactions())),

src/components/views/location/LocationPicker.tsx

@@ -47,8 +47,8 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
     private geolocate?: maplibregl.GeolocateControl;
     private marker?: maplibregl.Marker;
 
-    public constructor(props: ILocationPickerProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+    public constructor(props: ILocationPickerProps) {
+        super(props);
 
         this.state = {
             position: undefined,

src/components/views/messages/MLocationBody.tsx

@@ -36,8 +36,8 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
     private mapId: string;
     private reconnectedListener: ClientEventHandlerMap[ClientEvent.Sync];
 
-    public constructor(props: IBodyProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+    public constructor(props: IBodyProps) {
+        super(props);
 
         // multiple instances of same map might be in document
         // eg thread and main timeline, reply

src/components/views/messages/MPollBody.tsx

@@ -142,8 +142,8 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
     declare public context: React.ContextType<typeof MatrixClientContext>;
     private seenEventIds: string[] = []; // Events we have already seen
 
-    public constructor(props: IBodyProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+    public constructor(props: IBodyProps) {
+        super(props);
 
         this.state = {
             selected: null,

src/components/views/messages/MessageEvent.tsx

@@ -27,7 +27,6 @@ import UnknownBody from "./UnknownBody";
 import { type IMediaBody } from "./IMediaBody";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { type IBodyProps } from "./IBodyProps";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import TextualBody from "./TextualBody";
 import MImageBody from "./MImageBody";
 import MFileBody from "./MFileBody";
@@ -83,11 +82,8 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
     private bodyTypes = new Map<string, React.ComponentType<IBodyProps>>(baseBodyTypes.entries());
     private evTypes = new Map<string, React.ComponentType<IBodyProps>>(baseEvTypes.entries());
 
-    public static contextType = MatrixClientContext;
-    declare public context: React.ContextType<typeof MatrixClientContext>;
-
-    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         if (MediaEventHelper.isEligible(this.props.mxEvent)) {
             this.mediaHelper = new MediaEventHelper(this.props.mxEvent);

src/components/views/messages/TextualBody.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { createRef, type SyntheticEvent, type MouseEvent, StrictMode } from "react";
 import { MsgType, PushRuleKind } from "matrix-js-sdk/src/matrix";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { globToRegexp } from "matrix-js-sdk/src/utils";
+import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 
 import * as HtmlUtils from "../../../HtmlUtils";
 import { formatDate } from "../../../DateUtils";
@@ -110,7 +110,10 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
             pushDetails.rule.kind === PushRuleKind.ContentSpecific &&
             pushDetails.rule.pattern
         ) {
-            this.pillifyNotificationKeywords([content], this.regExpForKeywordPattern(pushDetails.rule.pattern));
+            this.pillifyNotificationKeywords(
+                [content],
+                PushProcessor.getPushRuleGlobRegex(pushDetails.rule.pattern, true),
+            );
         }
     }
 
@@ -235,12 +238,12 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
                     continue;
                 }
                 const match = text.match(exp);
-                if (!match || match.length < 3) {
+                if (!match || match.length < 2) {
                     node = node.nextSibling;
                     continue;
                 }
-                const keywordText = match[2];
-                const idx = match.index! + match[1].length;
+                const keywordText = match[1];
+                const idx = match.index!;
                 const before = text.substring(0, idx);
                 const after = text.substring(idx + keywordText.length);
 
@@ -265,12 +268,6 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         }
     }
 
-    private regExpForKeywordPattern(pattern: string): RegExp {
-        // Reflects the push notification pattern-matching implementation at
-        // https://github.com/matrix-org/matrix-js-sdk/blob/dbd7d26968b94700827bac525c39afff2c198e61/src/pushprocessor.ts#L570
-        return new RegExp("(^|\\W)(" + globToRegexp(pattern) + ")(\\W|$)", "i");
-    }
-
     private findLinks(nodes: ArrayLike<Element>): string[] {
         let links: string[] = [];
 

src/components/views/right_panel/TimelineCard.tsx

@@ -77,8 +77,8 @@ export default class TimelineCard extends React.Component<IProps, IState> {
     private card = React.createRef<HTMLDivElement>();
     private readReceiptsSettingWatcher: string | undefined;
 
-    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
         this.state = {
             showReadReceipts: SettingsStore.getValue("showReadReceipts", props.room.roomId),
             layout: SettingsStore.getValue("layout"),

src/components/views/room_settings/AliasSettings.tsx

@@ -101,8 +101,8 @@ export default class AliasSettings extends React.Component<IProps, IState> {
         canSetCanonicalAlias: false,
     };
 
-    public constructor(props: IProps, context: ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         const state: IState = {
             altAliases: [],

src/components/views/rooms/Autocomplete.tsx

@@ -55,8 +55,8 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
     public static contextType = RoomContext;
     declare public context: React.ContextType<typeof RoomContext>;
 
-    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             // list of completionResults, each containing completions

src/components/views/rooms/LegacyRoomList.tsx

@@ -437,8 +437,8 @@ export default class LegacyRoomList extends React.PureComponent<IProps, IState>
     public static contextType = MatrixClientContext;
     declare public context: React.ContextType<typeof MatrixClientContext>;
 
-    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+    public constructor(props: IProps) {
+        super(props);
 
         this.state = {
             sublists: {},

src/components/views/rooms/MessageComposer.tsx

@@ -124,9 +124,8 @@ export class MessageComposer extends React.Component<IProps, IState> {
         isRichTextEnabled: true,
     };
 
-    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
-        super(props, context);
-        this.context = context; // otherwise React will only set it prior to render due to type def above
+    public constructor(props: IProps) {
+        super(props);
 
         const isWysiwygLabEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
         let isRichTextEnabled = true;

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

@@ -0,0 +1,149 @@
+/*
+ * 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, { type JSX, type PropsWithChildren } from "react";
+import { Button } from "@vector-im/compound-web";
+import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
+import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
+
+import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
+import { Flex } from "../../../utils/Flex";
+import { _t } from "../../../../languageHandler";
+import { FilterKey } from "../../../../stores/room-list-v3/skip-list/filters";
+import { type PrimaryFilter } from "../../../viewmodels/roomlist/useFilteredRooms";
+
+interface EmptyRoomListProps {
+    /**
+     * The view model for the room list
+     */
+    vm: RoomListViewState;
+}
+
+/**
+ * The empty state for the room list
+ */
+export function EmptyRoomList({ vm }: EmptyRoomListProps): JSX.Element | undefined {
+    // If there is no active primary filter, show the default empty state
+    if (!vm.activePrimaryFilter) return <DefaultPlaceholder vm={vm} />;
+
+    switch (vm.activePrimaryFilter.key) {
+        case FilterKey.FavouriteFilter:
+            return (
+                <GenericPlaceholder
+                    title={_t("room_list|empty|no_favourites")}
+                    description={_t("room_list|empty|no_favourites_description")}
+                />
+            );
+        case FilterKey.PeopleFilter:
+            return (
+                <GenericPlaceholder
+                    title={_t("room_list|empty|no_people")}
+                    description={_t("room_list|empty|no_people_description")}
+                />
+            );
+        case FilterKey.RoomsFilter:
+            return (
+                <GenericPlaceholder
+                    title={_t("room_list|empty|no_rooms")}
+                    description={_t("room_list|empty|no_rooms_description")}
+                />
+            );
+        case FilterKey.UnreadFilter:
+            return <UnreadPlaceholder filter={vm.activePrimaryFilter} />;
+        default:
+            return undefined;
+    }
+}
+
+interface GenericPlaceholderProps {
+    /**
+     * The title of the placeholder
+     */
+    title: string;
+    /**
+     * The description of the placeholder
+     */
+    description?: string;
+}
+
+/**
+ * A generic placeholder for the room list
+ */
+function GenericPlaceholder({ title, description, children }: PropsWithChildren<GenericPlaceholderProps>): JSX.Element {
+    return (
+        <Flex
+            data-testid="empty-room-list"
+            className="mx_EmptyRoomList_GenericPlaceholder"
+            direction="column"
+            align="stretch"
+            justify="center"
+            gap="var(--cpd-space-2x)"
+        >
+            <span className="mx_EmptyRoomList_GenericPlaceholder_title">{title}</span>
+            {description && <span className="mx_EmptyRoomList_GenericPlaceholder_description">{description}</span>}
+            {children}
+        </Flex>
+    );
+}
+
+interface DefaultPlaceholderProps {
+    /**
+     * The view model for the room list
+     */
+    vm: RoomListViewState;
+}
+
+/**
+ * The default empty state for the room list when no primary filter is active
+ * The user can create chat or room (if they have the permission)
+ */
+function DefaultPlaceholder({ vm }: DefaultPlaceholderProps): JSX.Element {
+    return (
+        <GenericPlaceholder
+            title={_t("room_list|empty|no_chats")}
+            description={
+                vm.canCreateRoom
+                    ? _t("room_list|empty|no_chats_description")
+                    : _t("room_list|empty|no_chats_description_no_room_rights")
+            }
+        >
+            <Flex
+                className="mx_EmptyRoomList_DefaultPlaceholder"
+                align="center"
+                justify="center"
+                direction="column"
+                gap="var(--cpd-space-4x)"
+            >
+                <Button size="sm" kind="secondary" Icon={UserAddIcon} onClick={vm.createChatRoom}>
+                    {_t("action|new_message")}
+                </Button>
+                {vm.canCreateRoom && (
+                    <Button size="sm" kind="secondary" Icon={RoomIcon} onClick={vm.createRoom}>
+                        {_t("action|new_room")}
+                    </Button>
+                )}
+            </Flex>
+        </GenericPlaceholder>
+    );
+}
+
+interface UnreadPlaceholderProps {
+    filter: PrimaryFilter;
+}
+
+/**
+ * The empty state for the room list when the unread filter is active
+ */
+function UnreadPlaceholder({ filter }: UnreadPlaceholderProps): JSX.Element {
+    return (
+        <GenericPlaceholder title={_t("room_list|empty|no_unread")}>
+            <Button kind="tertiary" onClick={filter.toggle}>
+                {_t("room_list|empty|show_chats")}
+            </Button>
+        </GenericPlaceholder>
+    );
+}

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

@@ -22,10 +22,12 @@ interface RoomListProps {
 /**
  * A virtualized list of rooms.
  */
-export function RoomList({ vm: { rooms } }: RoomListProps): JSX.Element {
+export function RoomList({ vm: { rooms, activeIndex } }: RoomListProps): JSX.Element {
     const roomRendererMemoized = useCallback(
-        ({ key, index, style }: ListRowProps) => <RoomListItemView room={rooms[index]} key={key} style={style} />,
-        [rooms],
+        ({ key, index, style }: ListRowProps) => (
+            <RoomListItemView room={rooms[index]} key={key} style={style} isSelected={activeIndex === index} />
+        ),
+        [rooms, activeIndex],
     );
 
     // The first div is needed to make the virtualized list take all the remaining space and scroll correctly
@@ -41,6 +43,7 @@ export function RoomList({ vm: { rooms } }: RoomListProps): JSX.Element {
                         rowHeight={48}
                         height={height}
                         width={width}
+                        scrollToIndex={activeIndex}
                     />
                 )}
             </AutoSizer>

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

@@ -20,12 +20,16 @@ interface RoomListItemViewPropsProps extends React.HTMLAttributes<HTMLButtonElem
      * The room to display
      */
     room: Room;
+    /**
+     * Whether the room is selected
+     */
+    isSelected: boolean;
 }
 
 /**
  * An item in the room list
  */
-export function RoomListItemView({ room, ...props }: RoomListItemViewPropsProps): JSX.Element {
+export function RoomListItemView({ room, isSelected, ...props }: RoomListItemViewPropsProps): JSX.Element {
     const vm = useRoomListItemViewModel(room);
 
     const [isHover, setIsHover] = useState(false);
@@ -38,8 +42,10 @@ export function RoomListItemView({ room, ...props }: RoomListItemViewPropsProps)
         <button
             className={classNames("mx_RoomListItemView", {
                 mx_RoomListItemView_menu_open: showHoverDecoration,
+                mx_RoomListItemView_selected: isSelected,
             })}
             type="button"
+            aria-selected={isSelected}
             aria-label={_t("room_list|room|open_room", { roomName: room.name })}
             onClick={() => vm.openRoom()}
             onMouseOver={() => setIsHover(true)}