v1.11.94

* fix: /tmp/element-web-config may already exist preventing the container from booting up

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

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
(cherry picked from commit 45497905be)

Co-authored-by: Itay Grudev <itay+github.com@grudev.com>

.github/CODEOWNERS

@@ -11,10 +11,11 @@
 /src/stores/SetupEncryptionStore.ts                                     @element-hq/element-crypto-web-reviewers
 /test/stores/SetupEncryptionStore-test.ts                               @element-hq/element-crypto-web-reviewers
 /src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx  @element-hq/element-crypto-web-reviewers
-/src/src/components/views/settings/encryption/                          @element-hq/element-crypto-web-reviewers
+/src/components/views/settings/encryption/                              @element-hq/element-crypto-web-reviewers
 /test/unit-tests/components/views/settings/encryption/                  @element-hq/element-crypto-web-reviewers
-/playwright/e2e/settings/encryption-user-tab/                           @element-hq/element-crypto-web-reviewers
 /src/components/views/dialogs/devtools/Crypto.tsx                       @element-hq/element-crypto-web-reviewers
+/playwright/e2e/crypto/                                                 @element-hq/element-crypto-web-reviewers
+/playwright/e2e/settings/encryption-user-tab/                           @element-hq/element-crypto-web-reviewers
 
 # Ignore translations as those will be updated by GHA for Localazy download
 /src/i18n/strings

.github/workflows/docker.yaml

@@ -1,8 +1,9 @@
-name: Dockerhub
+name: Docker
 on:
     workflow_dispatch: {}
     push:
         tags: [v*]
+    pull_request: {}
     schedule:
         # This job can take a while, and we have usage limits, so just publish develop only twice a day
         - cron: "0 7/12 * * *"
@@ -12,9 +13,12 @@ jobs:
     buildx:
         name: Docker Buildx
         runs-on: ubuntu-24.04
-        environment: dockerhub
+        environment: ${{ github.event_name != 'pull_request' && 'dockerhub' || '' }}
         permissions:
             id-token: write # needed for signing the images with GitHub OIDC Token
+            packages: write # needed for publishing packages to GHCR
+        env:
+            TEST_TAG: vectorim/element-web:test
         steps:
             - uses: actions/checkout@v4
               with:
@@ -22,6 +26,7 @@ jobs:
 
             - name: Install Cosign
               uses: sigstore/cosign-installer@dc72c7d5c4d10cd6bcb8cf6e3fd625a9e5e537da # v3
+              if: github.event_name != 'pull_request'
 
             - name: Set up QEMU
               uses: docker/setup-qemu-action@53851d14592bedcffcf25ea515637cff71ef929a # v3
@@ -33,16 +38,52 @@ jobs:
 
             - name: Login to Docker Hub
               uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # 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
+              if: github.event_name != 'pull_request'
+              with:
+                  registry: ghcr.io
+                  username: ${{ github.repository_owner }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Build and load
+              uses: docker/build-push-action@ca877d9245402d1537745e0e356eab47c3520991 # v6
+              with:
+                  context: .
+                  load: true
+                  tags: ${{ env.TEST_TAG }}
+
+            - name: Test the image
+              run: |
+                  # Make a fake module to test the image
+                  MODULE_PATH="modules/module_name/index.js"
+                  mkdir -p $(dirname $MODULE_PATH)
+                  echo 'alert("Testing");' > $MODULE_PATH
+
+                  # Spin up a container of the image
+                  CONTAINER_ID=$(docker run --rm -dp 80:80 -v $(pwd)/modules:/tmp/element-web-modules ${{ env.TEST_TAG }})
+
+                  # Run some smoke tests
+                  wget --retry-connrefused --tries=5 -q --wait=3 --spider http://localhost:80/modules/module_name/index.js
+                  MODULE_1=$(curl http://localhost:80/config.json | jq -r .modules[0])
+                  test "$MODULE_1" = "/${MODULE_PATH}"
+
+                  # Clean up
+                  docker stop "$CONTAINER_ID"
+
             - name: Docker meta
               id: meta
               uses: docker/metadata-action@369eb591f429131d6889c46b94e711f089e6ca96 # v5
+              if: github.event_name != 'pull_request'
               with:
                   images: |
                       vectorim/element-web
+                      ghcr.io/element-hq/element-web
                   tags: |
                       type=ref,event=branch
                       type=ref,event=tag
@@ -52,6 +93,7 @@ jobs:
             - name: Build and push
               id: build-and-push
               uses: docker/build-push-action@ca877d9245402d1537745e0e356eab47c3520991 # v6
+              if: github.event_name != 'pull_request'
               with:
                   context: .
                   push: true
@@ -63,6 +105,7 @@ jobs:
               env:
                   DIGEST: ${{ steps.build-and-push.outputs.digest }}
                   TAGS: ${{ steps.meta.outputs.tags }}
+              if: github.event_name != 'pull_request'
               run: |
                   images=""
                   for tag in ${TAGS}; do
@@ -72,6 +115,7 @@ jobs:
 
             - name: Update repo description
               uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
+              if: github.event_name != 'pull_request'
               continue-on-error: true
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}

.github/workflows/release.yml

@@ -50,7 +50,7 @@ jobs:
         permissions:
             checks: read
         steps:
-            - name: Wait for dockerhub
+            - name: Wait for docker build
               uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
               with:
                   ref: master

CHANGELOG.md

@@ -1,3 +1,73 @@
+Changes in [1.11.94](https://github.com/element-hq/element-web/releases/tag/v1.11.94) (2025-02-27)
+==================================================================================================
+## 🐛 Bug Fixes
+
+* [Backport staging] fix: /tmp/element-web-config may already exist preventing the container from booting up ([#29377](https://github.com/element-hq/element-web/pull/29377)). Contributed by @RiotRobot.
+
+
+Changes in [1.11.93](https://github.com/element-hq/element-web/releases/tag/v1.11.93) (2025-02-25)
+==================================================================================================
+## ✨ Features
+
+* [backport] Dynamically load Element Web modules in Docker entrypoint ([#29358](https://github.com/element-hq/element-web/pull/29358)). Contributed by @t3chguy.
+* ChangeRecoveryKey: error handling ([#29262](https://github.com/element-hq/element-web/pull/29262)). Contributed by @richvdh.
+* Dehydration: enable dehydrated device on "Set up recovery" ([#29265](https://github.com/element-hq/element-web/pull/29265)). Contributed by @richvdh.
+* Render reason for invite rejection. ([#29257](https://github.com/element-hq/element-web/pull/29257)). Contributed by @Half-Shot.
+* New room list: add search section ([#29251](https://github.com/element-hq/element-web/pull/29251)). Contributed by @florianduros.
+* New room list: hide favourites and people meta spaces ([#29241](https://github.com/element-hq/element-web/pull/29241)). Contributed by @florianduros.
+* New Room List: Create new labs flag ([#29239](https://github.com/element-hq/element-web/pull/29239)). Contributed by @MidhunSureshR.
+* Stop URl preview from covering message box ([#29215](https://github.com/element-hq/element-web/pull/29215)). Contributed by @edent.
+* Rename "security key" into "recovery key" ([#29217](https://github.com/element-hq/element-web/pull/29217)). Contributed by @florianduros.
+* Add new verification section to user profile ([#29200](https://github.com/element-hq/element-web/pull/29200)). Contributed by @MidhunSureshR.
+* Initial support for runtime modules ([#29104](https://github.com/element-hq/element-web/pull/29104)). Contributed by @t3chguy.
+* Add `Forgot recovery key?` button to encryption tab ([#29202](https://github.com/element-hq/element-web/pull/29202)). Contributed by @florianduros.
+* Add KeyIcon to key storage out of sync toast ([#29201](https://github.com/element-hq/element-web/pull/29201)). Contributed by @florianduros.
+* Improve rendering of empty topics in the timeline  ([#29152](https://github.com/element-hq/element-web/pull/29152)). Contributed by @Half-Shot.
+
+## 🐛 Bug Fixes
+
+* Fix font scaling in member list ([#29285](https://github.com/element-hq/element-web/pull/29285)). Contributed by @florianduros.
+* Grow member list search field when resizing the right panel ([#29267](https://github.com/element-hq/element-web/pull/29267)). Contributed by @langleyd.
+* Don't reload roomview on offline connectivity check ([#29243](https://github.com/element-hq/element-web/pull/29243)). Contributed by @dbkr.
+* Respect user's 12/24 hour preference consistently ([#29237](https://github.com/element-hq/element-web/pull/29237)). Contributed by @t3chguy.
+* Restore the accessibility role on call views ([#29225](https://github.com/element-hq/element-web/pull/29225)). Contributed by @robintown.
+* Revert `GoToHome` keyboard shortcut to `Ctrl`–`Shift`–`H` on macOS ([#28577](https://github.com/element-hq/element-web/pull/28577)). Contributed by @gy-mate.
+* Encryption tab: display correct encryption panel when user cancels the reset identity flow ([#29216](https://github.com/element-hq/element-web/pull/29216)). Contributed by @florianduros.
+
+
+Changes in [1.11.92](https://github.com/element-hq/element-web/releases/tag/v1.11.92) (2025-02-11)
+==================================================================================================
+## ✨ Features
+
+* [Backport staging] Log when we show, and hide, encryption setup toasts ([#29238](https://github.com/element-hq/element-web/pull/29238)). Contributed by @richvdh.
+* Make profile header section match the designs ([#29163](https://github.com/element-hq/element-web/pull/29163)). Contributed by @MidhunSureshR.
+* Always show back button in the right panel ([#29128](https://github.com/element-hq/element-web/pull/29128)). Contributed by @MidhunSureshR.
+* Schedule dehydration on reload if the dehydration key is already cached locally ([#29021](https://github.com/element-hq/element-web/pull/29021)). Contributed by @uhoreg.
+* update to twemoji 15.1.0 ([#29115](https://github.com/element-hq/element-web/pull/29115)). Contributed by @ara4n.
+* Update matrix-widget-api ([#29112](https://github.com/element-hq/element-web/pull/29112)). Contributed by @toger5.
+* Allow navigating through the memberlist using up/down keys ([#28949](https://github.com/element-hq/element-web/pull/28949)). Contributed by @MidhunSureshR.
+* Style room header icons and facepile for toggled state ([#28968](https://github.com/element-hq/element-web/pull/28968)). Contributed by @MidhunSureshR.
+* Move threads header below base card header ([#28969](https://github.com/element-hq/element-web/pull/28969)). Contributed by @MidhunSureshR.
+* Add `Advanced` section to the user settings encryption tab ([#28804](https://github.com/element-hq/element-web/pull/28804)). Contributed by @florianduros.
+* Fix outstanding UX issues with replies/mentions/keyword notifs ([#28270](https://github.com/element-hq/element-web/pull/28270)). Contributed by @taffyko.
+* Distinguish room state and timeline events when dealing with widgets ([#28681](https://github.com/element-hq/element-web/pull/28681)). Contributed by @robintown.
+* Switch OIDC primarily to new `/auth_metadata` API ([#29019](https://github.com/element-hq/element-web/pull/29019)). Contributed by @t3chguy.
+* More memberlist changes ([#29069](https://github.com/element-hq/element-web/pull/29069)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Wire up the "Forgot recovery key" button for the "Key storage out of sync" toast ([#29190](https://github.com/element-hq/element-web/pull/29190)). Contributed by @RiotRobot.
+* Encryption tab: hide `Advanced` section when the key storage is out of sync ([#29129](https://github.com/element-hq/element-web/pull/29129)). Contributed by @florianduros.
+* Fix share button in discovery settings being disabled incorrectly ([#29151](https://github.com/element-hq/element-web/pull/29151)). Contributed by @t3chguy.
+* Ensure switching rooms does not wrongly focus timeline search ([#29153](https://github.com/element-hq/element-web/pull/29153)). Contributed by @t3chguy.
+* Stop showing a dialog prompting the user to enter an old recovery key ([#29143](https://github.com/element-hq/element-web/pull/29143)). Contributed by @richvdh.
+* Make themed widgets reflect the effective theme ([#28342](https://github.com/element-hq/element-web/pull/28342)). Contributed by @robintown.
+* support non-VS16 emoji ligatures in TwemojiMozilla ([#29100](https://github.com/element-hq/element-web/pull/29100)). Contributed by @ara4n.
+* e2e test: Verify session with the encryption tab instead of the security \& privacy tab ([#29090](https://github.com/element-hq/element-web/pull/29090)). Contributed by @florianduros.
+* Work around cloudflare R2 / aws client incompatability ([#29086](https://github.com/element-hq/element-web/pull/29086)). Contributed by @dbkr.
+* Fix identity server settings visibility ([#29083](https://github.com/element-hq/element-web/pull/29083)). Contributed by @dbkr.
+
+
 Changes in [1.11.91](https://github.com/element-hq/element-web/releases/tag/v1.11.91) (2025-01-28)
 ==================================================================================================
 ## ✨ Features

Dockerfile

@@ -1,3 +1,5 @@
+# syntax=docker.io/docker/dockerfile:1.7-labs
+
 # Builder
 FROM --platform=$BUILDPLATFORM node:22-bullseye AS builder
 
@@ -8,7 +10,7 @@ ARG JS_SDK_BRANCH="master"
 
 WORKDIR /src
 
-COPY . /src
+COPY --exclude=docker . /src
 RUN /src/scripts/docker-link-repos.sh
 RUN yarn --network-timeout=200000 install
 RUN /src/scripts/docker-package.sh
@@ -19,11 +21,15 @@ RUN cp /src/config.sample.json /src/webapp/config.json
 # App
 FROM nginx:alpine-slim
 
+# Install jq and moreutils for sponge, both used by our entrypoints
+RUN apk add jq moreutils
+
 COPY --from=builder /src/webapp /app
 
 # Override default nginx config. Templates in `/etc/nginx/templates` are passed
 # through `envsubst` by the nginx docker image entry point.
 COPY /docker/nginx-templates/* /etc/nginx/templates/
+COPY /docker/docker-entrypoint.d/* /docker-entrypoint.d/
 
 # Tell nginx to put its pidfile elsewhere, so it can run as non-root
 RUN sed -i -e 's,/var/run/nginx.pid,/tmp/nginx.pid,' /etc/nginx/nginx.conf

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

@@ -0,0 +1,34 @@
+#!/bin/sh
+
+# Loads modules from `/tmp/element-web-modules` into config.json's `modules` field
+
+set -e
+
+entrypoint_log() {
+    if [ -z "${NGINX_ENTRYPOINT_QUIET_LOGS:-}" ]; then
+        echo "$@"
+    fi
+}
+
+# Copy these config files as a base
+mkdir -p /tmp/element-web-config
+cp /app/config*.json /tmp/element-web-config/
+
+# If there are modules to be loaded
+if [ -d "/tmp/element-web-modules" ]; then
+    cd /tmp/element-web-modules
+
+    for MODULE in *
+    do
+        # If the module has a package.json, use its main field as the entrypoint
+        ENTRYPOINT="index.js"
+        if [ -f "/tmp/element-web-modules/$MODULE/package.json" ]; then
+            ENTRYPOINT=$(jq -r '.main' "/tmp/element-web-modules/$MODULE/package.json")
+        fi
+
+        entrypoint_log "Loading module $MODULE with entrypoint $ENTRYPOINT"
+
+        # Append the module to the config
+        jq ".modules += [\"/modules/$MODULE/$ENTRYPOINT\"]" /tmp/element-web-config/config.json | sponge /tmp/element-web-config/config.json
+    done
+fi

docker/nginx-templates/default.conf.template

@@ -18,8 +18,12 @@ server {
     }
     # covers config.json and config.hostname.json requests as it is prefix.
     location /config {
+        root /tmp/element-web-config;
         add_header Cache-Control "no-cache";
     }
+    location /modules {
+        alias /tmp/element-web-modules;
+    }
     # redirect server error pages to the static page /50x.html
     #
     error_page   500 502 503 504  /50x.html;

docs/config.md

@@ -155,7 +155,7 @@ complete re-branding/private labeling, a more personalised experience can be ach
     3. `show_once`: Optional. If true then the notice will only be shown once per device.
 18. `help_url`: The URL to point users to for help with the app, defaults to `https://element.io/help`.
 19. `help_encryption_url`: The URL to point users to for help with encryption, defaults to `https://element.io/help#encryption`.
-20. `force_verification`: If true, users must verify new logins (eg. with another device / their security key)
+20. `force_verification`: If true, users must verify new logins (eg. with another device / their recovery key)
 
 ### `desktop_builds` and `mobile_builds`
 

docs/install.md

@@ -66,6 +66,18 @@ on other runtimes may require root privileges. To resolve this, either run the
 image as root (`docker run --user 0`) or, better, change the port that nginx
 listens on via the `ELEMENT_WEB_PORT` environment variable.
 
+[Element Web Modules](https://github.com/element-hq/element-modules/tree/main/packages/element-web-module-api) can be dynamically loaded
+by being made available (e.g. via bind mount) in a directory within `/tmp/element-web-modules/`.
+The default entrypoint will be index.js in that directory but can be overridden if a package.json file is found with a `main` directive.
+These modules will be presented in a `/modules` subdirectory within the webroot, and automatically added to the config.json `modules` field.
+
+If you wish to use docker in read-only mode,
+you should follow the [upstream instructions](https://hub.docker.com/_/nginx#:~:text=Running%20nginx%20in%20read%2Donly%20mode)
+but additionally include the following directories:
+
+- /tmp/element-web-config/
+- /etc/nginx/conf.d/
+
 The behaviour of the docker image can be customised via the following
 environment variables:
 

docs/labs.md

@@ -112,3 +112,7 @@ Unreliable in encrypted rooms.
 ## Knock rooms (`feature_ask_to_join`) [In Development]
 
 Enables knock feature for rooms. This allows users to ask to join a room.
+
+## New room list (`feature_new_room_list`) [In Development]
+
+Enable the new room list that is currently in development.

docs/release.md

@@ -128,7 +128,7 @@ flowchart TD
 
     subgraph Deploying
         D1[\Deploy staging.element.io/]
-        D2[\Check dockerhub/]
+        D2[\Check docker build/]
         D3[\Deploy app.element.io/]
         D4[\Check desktop package/]
 
@@ -213,10 +213,10 @@ switched back to the version of the dependency from the master branch to not lea
 # Deploying
 
 We ship the SDKs to npm, this happens as part of the release process.
-We ship Element Web to dockerhub, `*.element.io`, and packages.element.io.
+We ship Element Web to dockerhub, ghcr.io, `*.element.io`, and packages.element.io.
 We ship Element Desktop to packages.element.io.
 
-- [ ] Check that element-web has shipped to dockerhub
+- [ ] Check that element-web has shipped to dockerhub & ghcr.io
 - [ ] Check that the staging [deployment](https://github.com/element-hq/element-web/actions/workflows/deploy.yml) has completed successfully
 - [ ] Test staging.element.io
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.91",
+    "version": "1.11.94",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -128,7 +128,7 @@
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+        "matrix-js-sdk": "37.0.0",
         "matrix-widget-api": "^1.10.0",
         "memoize-one": "^6.0.0",
         "mime": "^4.0.4",

playwright/e2e/crypto/backups-mas.spec.ts

@@ -11,6 +11,7 @@ import { registerAccountMas } from "../oidc";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 import { TestClientServerAPI } from "../csAPI";
 import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";
+import { checkDeviceIsConnectedKeyBackup } from "./utils";
 
 // These tests register an account with MAS because then we go through the "normal" registration flow
 // and crypto gets set up. Using the 'user' fixture create a user and synthesizes an existing login,
@@ -24,8 +25,11 @@ test.describe("Encryption state after registration", () => {
         await page.getByRole("button", { name: "Continue" }).click();
         await registerAccountMas(page, mailpitClient, `alice_${testInfo.testId}`, "alice@email.com", "Pa$sW0rD!");
 
-        await app.settings.openUserSettings("Security & Privacy");
-        await expect(page.getByText("This session is backing up your keys.")).toBeVisible();
+        // Wait for the ui to load
+        await expect(page.locator(".mx_MatrixChat")).toBeVisible();
+
+        // Recovery is not set up yet
+        await checkDeviceIsConnectedKeyBackup(app, "1", true, false);
     });
 
     test("user is prompted to set up recovery", async ({ page, mailpitClient, app }, testInfo) => {

playwright/e2e/crypto/backups.spec.ts

@@ -58,8 +58,8 @@ test.describe("Backups", () => {
 
             // Create another
             await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
-            await expect(currentDialogLocator.getByRole("heading", { name: "Security Key" })).toBeVisible();
-            await currentDialogLocator.getByLabel("Security Key").fill(securityKey);
+            await expect(currentDialogLocator.getByRole("heading", { name: "Recovery Key" })).toBeVisible();
+            await currentDialogLocator.getByLabel("Recovery Key").fill(securityKey);
             await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
 
             // Should be successful
@@ -90,8 +90,8 @@ test.describe("Backups", () => {
 
             // Try to create another
             await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
-            await expect(currentDialogLocator.getByRole("heading", { name: "Security Key" })).toBeVisible();
-            // But cancel the security key dialog, to simulate not having the secret storage passphrase
+            await expect(currentDialogLocator.getByRole("heading", { name: "Recovery Key" })).toBeVisible();
+            // But cancel the recovery key dialog, to simulate not having the secret storage passphrase
             await currentDialogLocator.getByTestId("dialog-cancel-button").click();
 
             await expect(currentDialogLocator.getByRole("heading", { name: "Starting backup…" })).toBeVisible();

playwright/e2e/crypto/crypto.spec.ts

@@ -186,7 +186,7 @@ test.describe("Cryptography", function () {
         await page.getByRole("button", { name: "Clear cross-signing keys" }).click();
 
         // Enter the 4S key
-        await page.getByPlaceholder("Security Key").fill(secretStorageKey);
+        await page.getByPlaceholder("Recovery Key").fill(secretStorageKey);
         await page.getByRole("button", { name: "Continue" }).click();
 
         // Enter the password

playwright/e2e/crypto/dehydration.spec.ts

@@ -6,21 +6,14 @@ 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 { type Locator, type Page } from "@playwright/test";
-
 import { test, expect } from "../../element-web-test";
-import { viewRoomSummaryByName } from "../right-panel/utils";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 import { completeCreateSecretStorageDialog, createBot, logIntoElement } from "./utils.ts";
 import { type Client } from "../../pages/client.ts";
+import { type ElementAppPage } from "../../pages/ElementAppPage.ts";
 
-const ROOM_NAME = "Test room";
 const NAME = "Alice";
 
-function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
-}
-
 test.use({
     displayName: NAME,
     synapseConfig: {
@@ -57,36 +50,40 @@ test.describe("Dehydration", () => {
 
         await completeCreateSecretStorageDialog(page);
 
-        // Open the settings again
-        await app.settings.openUserSettings("Security & Privacy");
-
-        // The Security tab should indicate that there is a dehydrated device present
-        await expect(securityTab.getByText("Offline device enabled")).toBeVisible();
-
-        await app.settings.closeDialog();
+        await expectDehydratedDeviceEnabled(app);
 
         // the dehydrated device gets created with the name "Dehydrated
         // device".  We want to make sure that it is not visible as a normal
         // device.
         const sessionsTab = await app.settings.openUserSettings("Sessions");
         await expect(sessionsTab.getByText("Dehydrated device")).not.toBeVisible();
+    });
+
+    test("'Set up recovery' creates dehydrated device", async ({ app, credentials, page }) => {
+        await logIntoElement(page, credentials);
+
+        const settingsDialogLocator = await app.settings.openUserSettings("Encryption");
+        await settingsDialogLocator.getByRole("button", { name: "Set up recovery" }).click();
+
+        // First it displays an informative panel about the recovery key
+        await expect(settingsDialogLocator.getByRole("heading", { name: "Set up recovery" })).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        // Next, it displays the new recovery key. We click on the copy button.
+        await expect(settingsDialogLocator.getByText("Save your recovery key somewhere safe")).toBeVisible();
+        await settingsDialogLocator.getByRole("button", { name: "Copy" }).click();
+        const recoveryKey = await app.getClipboard();
+        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
+
+        await expect(
+            settingsDialogLocator.getByText("Enter your recovery key to confirm", { exact: true }),
+        ).toBeVisible();
+        await settingsDialogLocator.getByRole("textbox").fill(recoveryKey);
+        await settingsDialogLocator.getByRole("button", { name: "Finish set up" }).click();
 
         await app.settings.closeDialog();
 
-        // now check that the user info right-panel shows the dehydrated device
-        // as a feature rather than as a normal device
-        await app.client.createRoom({ name: ROOM_NAME });
-
-        await viewRoomSummaryByName(page, app, ROOM_NAME);
-
-        await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
-        await expect(page.locator(".mx_MemberListView")).toBeVisible();
-
-        await getMemberTileByName(page, NAME).click();
-        await page.locator(".mx_UserInfo_devices .mx_UserInfo_expand").click();
-
-        await expect(page.locator(".mx_UserInfo_devices").getByText("Offline device enabled")).toBeVisible();
-        await expect(page.locator(".mx_UserInfo_devices").getByText("Dehydrated device")).not.toBeVisible();
+        await expectDehydratedDeviceEnabled(app);
     });
 
     test("Reset recovery key during login re-creates dehydrated device", async ({
@@ -134,3 +131,16 @@ async function getDehydratedDeviceIds(client: Client): Promise<string[]> {
         );
     });
 }
+
+/** Wait for our user to have a dehydrated device */
+async function expectDehydratedDeviceEnabled(app: ElementAppPage): Promise<void> {
+    // It might be nice to do this via the UI, but currently this info is not exposed via the UI.
+    //
+    // Note we might have to wait for the device list to be refreshed, so we wrap in `expect.poll`.
+    await expect
+        .poll(async () => {
+            const dehydratedDeviceIds = await getDehydratedDeviceIds(app.client);
+            return dehydratedDeviceIds.length;
+        })
+        .toEqual(1);
+}

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

@@ -119,7 +119,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await logIntoElement(page, credentials);
 
         // Select the security phrase
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key or Phrase" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();
 
         // Fill the passphrase
         const dialog = page.locator(".mx_Dialog");
@@ -136,15 +136,15 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
     });
 
-    test("Verify device with Security Key during login", async ({ page, app, credentials, homeserver }) => {
+    test("Verify device with Recovery Key during login", async ({ page, app, credentials, homeserver }) => {
         await logIntoElement(page, credentials);
 
         // Select the security phrase
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key or Phrase" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();
 
-        // Fill the security key
+        // Fill the recovery key
         const dialog = page.locator(".mx_Dialog");
-        await dialog.getByRole("button", { name: "use your Security Key" }).click();
+        await dialog.getByRole("button", { name: "use your Recovery Key" }).click();
         const aliceRecoveryKey = await aliceBotClient.getRecoveryKey();
         await dialog.locator("#mx_securityKey").fill(aliceRecoveryKey.encodedPrivateKey);
         await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();

playwright/e2e/crypto/event-shields.spec.ts

@@ -17,6 +17,7 @@ import {
     logIntoElement,
     logOutOfElement,
     verify,
+    waitForDevices,
 } from "./utils";
 import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
 import { type ElementAppPage } from "../../pages/ElementAppPage.ts";
@@ -144,25 +145,8 @@ test.describe("Cryptography", function () {
             // bob deletes his second device
             await bobSecondDevice.evaluate((cli) => cli.logout(true));
 
-            // wait for the logout to propagate. Workaround for https://github.com/vector-im/element-web/issues/26263 by repeatedly closing and reopening Bob's user info.
-            async function awaitOneDevice(iterations = 1) {
-                const rightPanel = page.locator(".mx_RightPanel");
-                await rightPanel.getByTestId("base-card-back-button").click();
-                await rightPanel.getByText("Bob").click();
-                const sessionCountText = await rightPanel
-                    .locator(".mx_UserInfo_devices")
-                    .getByText(" session", { exact: false })
-                    .textContent();
-                // cf https://github.com/vector-im/element-web/issues/26279: Element-R uses the wrong text here
-                if (sessionCountText != "1 session" && sessionCountText != "1 verified session") {
-                    if (iterations >= 10) {
-                        throw new Error(`Bob still has ${sessionCountText} after 10 iterations`);
-                    }
-                    await awaitOneDevice(iterations + 1);
-                }
-            }
-
-            await awaitOneDevice();
+            // wait for the logout to propagate.
+            await waitForDevices(app, bob.credentials.userId, 1);
 
             // close and reopen the room, to get the shield to update.
             await app.viewRoomByName("Bob");
@@ -285,11 +269,7 @@ test.describe("Cryptography", function () {
             // Workaround for https://github.com/element-hq/element-web/issues/28640:
             // make sure that Alice has seen Bob's identity before she goes offline. We do this by opening
             // his user info.
-            await app.toggleRoomInfoPanel();
-            const rightPanel = page.locator(".mx_RightPanel");
-            await rightPanel.getByRole("menuitem", { name: "People" }).click();
-            await rightPanel.getByRole("button", { name: bob.credentials!.userId }).click();
-            await expect(rightPanel.locator(".mx_UserInfo_devices")).toContainText("1 session");
+            await waitForDevices(app, bob.credentials.userId, 1);
 
             // Our app is blocked from syncing while Bob sends his messages.
             await app.client.network.goOffline();

playwright/e2e/crypto/toasts.spec.ts

@@ -35,7 +35,7 @@ test.describe("Key storage out of sync toast", () => {
 
         await page.getByRole("button", { name: "Enter recovery key" }).click();
 
-        await page.getByRole("textbox", { name: "Security key" }).fill(recoveryKey.encodedPrivateKey);
+        await page.getByRole("textbox", { name: "Recovery Key" }).fill(recoveryKey.encodedPrivateKey);
         await page.getByRole("button", { name: "Continue" }).click();
 
         await expect(page.getByRole("button", { name: "Enter recovery key" })).not.toBeVisible();

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

@@ -8,9 +8,8 @@ Please see LICENSE files in the repository root for full details.
 
 import { type Preset, type Visibility } from "matrix-js-sdk/src/matrix";
 
-import type { Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
-import { doTwoWaySasVerification, awaitVerifier } from "./utils";
+import { doTwoWaySasVerification, awaitVerifier, waitForDevices } from "./utils";
 import { type Client } from "../../pages/client";
 
 test.describe("User verification", () => {
@@ -33,13 +32,17 @@ test.describe("User verification", () => {
     });
 
     test("can receive a verification request when there is no existing DM", async ({
+        app,
         page,
         bot: bob,
         user: aliceCredentials,
         toasts,
         room: { roomId: dmRoomId },
     }) => {
-        await waitForDeviceKeys(page);
+        await waitForDevices(app, bob.credentials.userId, 1);
+        await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
+        const avatar = page.getByRole("button", { name: "Avatar" });
+        await avatar.click();
 
         // once Alice has joined, Bob starts the verification
         const bobVerificationRequest = await bob.evaluateHandle(
@@ -84,13 +87,17 @@ test.describe("User verification", () => {
     });
 
     test("can abort emoji verification when emoji mismatch", async ({
+        app,
         page,
         bot: bob,
         user: aliceCredentials,
         toasts,
         room: { roomId: dmRoomId },
     }) => {
-        await waitForDeviceKeys(page);
+        await waitForDevices(app, bob.credentials.userId, 1);
+        await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
+        const avatar = page.getByRole("button", { name: "Avatar" });
+        await avatar.click();
 
         // once Alice has joined, Bob starts the verification
         const bobVerificationRequest = await bob.evaluateHandle(
@@ -154,15 +161,3 @@ async function createDMRoom(client: Client, userId: string): Promise<string> {
         ],
     });
 }
-
-/**
- * Wait until we get the other user's device keys.
- * In newer rust-crypto versions, the verification request will be ignored if we
- * don't have the sender's device keys.
- */
-async function waitForDeviceKeys(page: Page): Promise<void> {
-    await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
-    const avatar = await page.getByRole("button", { name: "Avatar" });
-    await avatar.click();
-    await expect(page.getByText("1 session")).toBeVisible();
-}

playwright/e2e/crypto/utils.ts

@@ -145,11 +145,13 @@ export async function checkDeviceIsCrossSigned(app: ElementAppPage): Promise<voi
  * @param app -` ElementAppPage` wrapper for the playwright `Page`.
  * @param expectedBackupVersion - the version of the backup we expect to be connected to.
  * @param checkBackupPrivateKeyInCache - whether to check that the backup decryption key is cached locally
+ * @param checkBackupKeyIn4S - whether to check that the backup key is stored in 4S
  */
 export async function checkDeviceIsConnectedKeyBackup(
     app: ElementAppPage,
     expectedBackupVersion: string,
     checkBackupPrivateKeyInCache: boolean,
+    checkBackupKeyIn4S: boolean = true,
 ): Promise<void> {
     // Sanity check the given backup version: if it's null, something went wrong earlier in the test.
     if (!expectedBackupVersion) {
@@ -192,7 +194,7 @@ export async function checkDeviceIsConnectedKeyBackup(
     // The active backup version is as expected
     expect(activeBackupVersion).toBe(expectedBackupVersion);
     // The backup key is stored in 4S
-    expect(backupKeyIn4S).toBe(true);
+    if (checkBackupKeyIn4S) expect(backupKeyIn4S).toBe(true);
 
     if (checkBackupPrivateKeyInCache) {
         // The backup key is available locally
@@ -216,13 +218,13 @@ export async function logIntoElement(page: Page, credentials: Credentials, secur
 
     // if a securityKey was given, verify the new device
     if (securityKey !== undefined) {
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Security Key" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key" }).click();
 
-        const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "use your Security Key" });
+        const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "use your Recovery Key" });
         if (await useSecurityKey.isVisible()) {
             await useSecurityKey.click();
         }
-        // Fill in the security key
+        // Fill in the recovery key
         await page.locator(".mx_Dialog").locator('input[type="password"]').fill(securityKey);
         await page.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
         await page.getByRole("button", { name: "Done" }).click();
@@ -249,15 +251,15 @@ export async function logOutOfElement(page: Page, discardKeys: boolean = false)
 }
 
 /**
- * Open the encryption settings, and verify the current session using the security key.
+ * Open the encryption settings, and verify the current session using the recovery key.
  *
  * @param app - `ElementAppPage` wrapper for the playwright `Page`.
- * @param securityKey - The security key (i.e., 4S key), set up during a previous session.
+ * @param securityKey - The recovery key (i.e., 4S key), set up during a previous session.
  */
 export async function verifySession(app: ElementAppPage, securityKey: string) {
     const settings = await app.settings.openUserSettings("Encryption");
     await settings.getByRole("button", { name: "Verify this device" }).click();
-    await app.page.getByRole("button", { name: "Verify with Security Key" }).click();
+    await app.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
     await app.page.locator(".mx_Dialog").locator('input[type="password"]').fill(securityKey);
     await app.page.getByRole("button", { name: "Continue", disabled: false }).click();
     await app.page.getByRole("button", { name: "Done" }).click();
@@ -291,7 +293,7 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
  *
  * Assumes that the current device has been cross-signed (which means that we skip a step where we set it up).
  *
- * Returns the security key
+ * Returns the recovery key
  */
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
     await app.settings.openUserSettings("Security & Privacy");
@@ -319,9 +321,9 @@ export async function completeCreateSecretStorageDialog(
     const currentDialogLocator = page.locator(".mx_Dialog");
 
     await expect(currentDialogLocator.getByRole("heading", { name: "Set up Secure Backup" })).toBeVisible();
-    // "Generate a Security Key" is selected by default
+    // "Generate a Recovery Key" is selected by default
     await currentDialogLocator.getByRole("button", { name: "Continue", exact: true }).click();
-    await expect(currentDialogLocator.getByRole("heading", { name: "Save your Security Key" })).toBeVisible();
+    await expect(currentDialogLocator.getByRole("heading", { name: "Save your Recovery Key" })).toBeVisible();
     await currentDialogLocator.getByRole("button", { name: "Copy", exact: true }).click();
     // copy the recovery key to use it later
     const recoveryKey = await page.evaluate(() => navigator.clipboard.readText());
@@ -345,7 +347,7 @@ export async function completeCreateSecretStorageDialog(
 }
 
 /**
- * Click on copy and continue buttons to dismiss the security key dialog
+ * Click on copy and continue buttons to dismiss the recovery key dialog
  */
 export async function copyAndContinue(page: Page) {
     await page.getByRole("button", { name: "Copy" }).click();
@@ -502,3 +504,31 @@ export async function deleteCachedSecrets(page: Page) {
     });
     await page.reload();
 }
+
+/**
+ * Wait until the given user has a given number of devices.
+ * This function will check the device keys ten times and if
+ * the expected number of devices were not found by then, an
+ * error is thrown.
+ */
+export async function waitForDevices(
+    app: ElementAppPage,
+    userId: string,
+    expectedNumberOfDevices: number,
+): Promise<void> {
+    const result = await app.client.evaluate(
+        async (cli, { userId, expectedNumberOfDevices }) => {
+            for (let i = 0; i < 10; ++i) {
+                const userDeviceMap = await cli.getCrypto()?.getUserDeviceInfo([userId], true);
+                const deviceMap = userDeviceMap?.get(userId);
+                if (deviceMap.size === expectedNumberOfDevices) return true;
+                await new Promise((r) => setTimeout(r, 500));
+            }
+            return false;
+        },
+        { userId, expectedNumberOfDevices },
+    );
+    if (!result) {
+        throw new Error(`User ${userId} did not have ${expectedNumberOfDevices} devices within ten iterations!`);
+    }
+}

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

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Page } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Search section of the room list", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the search section of the room list
+     * @param page
+     */
+    function getSearchSection(page: Page) {
+        return page.getByRole("search");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("should render the search section", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        // exact=false to ignore the shortcut which is related to the OS
+        await expect(searchSection.getByRole("button", { name: "Search", exact: false })).toBeVisible();
+        await expect(searchSection).toMatchScreenshot("search-section.png");
+    });
+
+    test("should open the spotlight when the search button is clicked", async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        await searchSection.getByRole("button", { name: "Search", exact: false }).click();
+        // The spotlight should be displayed
+        await expect(page.getByRole("dialog", { name: "Search Dialog" })).toBeVisible();
+    });
+
+    test("should open the room directory when the search button is clicked", async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        await searchSection.getByRole("button", { name: "Explore rooms" }).click();
+        const dialog = page.getByRole("dialog", { name: "Search Dialog" });
+        // The room directory should be displayed
+        await expect(dialog).toBeVisible();
+        // The public room filter should be displayed
+        await expect(dialog.getByText("Public rooms")).toBeVisible();
+    });
+});

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Page } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Search section of the room list", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the room list view
+     * @param page
+     */
+    function getRoomListView(page: Page) {
+        return page.getByTestId("room-list-view");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("should render the room list view", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomListView(page);
+        await expect(roomListView).toMatchScreenshot("room-list-view.png");
+    });
+});

playwright/e2e/read-receipts/new-messages-thread-roots.spec.ts

@@ -57,8 +57,8 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
                 await util.openThread("ThreadRoot");
 
                 // Then the thread root is marked as read in the main timeline,
-                // 30 remaining messages are unread - 7 messages are displayed under the thread root
-                await util.assertUnread(room2, 30 - 7);
+                // 30 remaining messages are unread - 6 messages are displayed under the thread root
+                await util.assertUnread(room2, 30 - 6);
             });
 
             test("Creating a new thread based on a reply makes the room unread", async ({

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

@@ -111,21 +111,4 @@ test.describe("Encryption tab", () => {
         // The user is prompted to reset their identity
         await expect(dialog.getByText("Forgot your recovery key? You’ll need to reset your identity.")).toBeVisible();
     });
-
-    test("should warn before turning off key storage", { tag: "@screenshot" }, async ({ page, app, util }) => {
-        await verifySession(app, recoveryKey.encodedPrivateKey);
-        await util.openEncryptionTab();
-
-        await page.getByRole("checkbox", { name: "Allow key storage" }).click();
-
-        await expect(
-            page.getByRole("heading", { name: "Are you sure you want to turn off key storage and delete it?" }),
-        ).toBeVisible();
-
-        await expect(util.getEncryptionTabContent()).toMatchScreenshot("delete-key-storage-confirm.png");
-
-        await page.getByRole("button", { name: "Delete key storage" }).click();
-
-        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();
-    });
 });

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

@@ -43,7 +43,7 @@ class Helpers {
      */
     async verifyDevice(recoveryKey: GeneratedSecretStorageKey) {
         // Select the security phrase
-        await this.page.getByRole("button", { name: "Verify with Security Key" }).click();
+        await this.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
         await this.enterRecoveryKey(recoveryKey);
         await this.page.getByRole("button", { name: "Done" }).click();
     }
@@ -91,7 +91,7 @@ class Helpers {
     }
 
     /**
-     * Get the security key from the clipboard and fill in the input field
+     * Get the recovery key from the clipboard and fill in the input field
      * Then click on the finish button
      * @param title - The title of the dialog
      * @param confirmButtonLabel - The label of the confirm button

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

@@ -25,13 +25,9 @@ test.describe("Security user settings tab", () => {
             },
         });
 
-        test.beforeEach(async ({ page, user }) => {
+        test.beforeEach(async ({ page, app, user }) => {
             // Dismiss "Notification" toast
-            await page
-                .locator(".mx_Toast_toast", { hasText: "Notifications" })
-                .getByRole("button", { name: "Dismiss" })
-                .click();
-
+            await app.closeNotificationToast();
             await page.locator(".mx_Toast_buttons").getByRole("button", { name: "Yes" }).click(); // Allow analytics
         });
 

playwright/e2e/user-view/user-view.spec.ts

@@ -19,7 +19,6 @@ test.describe("UserView", () => {
 
         const rightPanel = page.locator("#mx_RightPanel");
         await expect(rightPanel.getByRole("heading", { name: bot.credentials.displayName, exact: true })).toBeVisible();
-        await expect(rightPanel.getByText("1 session")).toBeVisible();
         await expect(rightPanel).toMatchScreenshot("user-info.png", {
             mask: [page.locator(".mx_UserInfo_profile_mxid")],
             css: `

playwright/pages/ElementAppPage.ts

@@ -202,4 +202,15 @@ export class ElementAppPage {
         }
         return this.page.locator(`id=${labelledById ?? describedById}`);
     }
+
+    /**
+     * Close the notification toast
+     */
+    public closeNotificationToast(): Promise<void> {
+        // Dismiss "Notification" toast
+        return this.page
+            .locator(".mx_Toast_toast", { hasText: "Notifications" })
+            .getByRole("button", { name: "Dismiss" })
+            .click();
+    }
 }

playwright/testcontainers/synapse.ts

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

res/css/_components.pcss

@@ -48,7 +48,6 @@
 @import "./components/views/settings/devices/_FilteredDeviceListHeader.pcss";
 @import "./components/views/settings/devices/_SecurityRecommendations.pcss";
 @import "./components/views/settings/devices/_SelectableDeviceTile.pcss";
-@import "./components/views/settings/encryption/_KeyStoragePanel.pcss";
 @import "./components/views/settings/shared/_SettingsSubsection.pcss";
 @import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss";
 @import "./components/views/spaces/_QuickThemeSwitcher.pcss";
@@ -270,6 +269,8 @@
 @import "./views/right_panel/_VerificationPanel.pcss";
 @import "./views/right_panel/_WidgetCard.pcss";
 @import "./views/room_settings/_AliasSettings.pcss";
+@import "./views/rooms/RoomListView/_RoomListSearch.pcss";
+@import "./views/rooms/RoomListView/_RoomListView.pcss";
 @import "./views/rooms/_AppsDrawer.pcss";
 @import "./views/rooms/_Autocomplete.pcss";
 @import "./views/rooms/_AuxPanel.pcss";
@@ -358,9 +359,9 @@
 @import "./views/settings/_UserProfileSettings.pcss";
 @import "./views/settings/encryption/_AdvancedPanel.pcss";
 @import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
-@import "./views/settings/encryption/_DestructiveComponent.pcss";
 @import "./views/settings/encryption/_EncryptionCard.pcss";
 @import "./views/settings/encryption/_RecoveryPanelOutOfSync.pcss";
+@import "./views/settings/encryption/_ResetIdentityPanel.pcss";
 @import "./views/settings/tabs/_SettingsBanner.pcss";
 @import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";

res/css/components/views/settings/encryption/_KeyStoragePanel.pcss

@@ -1,3 +0,0 @@
-.mx_KeyBackupPanel_toggleRow {
-    flex-direction: row;
-}

res/css/structures/_QuickSettingsButton.pcss

@@ -104,6 +104,12 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
+.mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
+    .mx_QuickThemeSwitcher {
+        margin-top: var(--cpd-space-2x);
+    }
+}
+
 .mx_QuickSettingsButton_icon {
     // TODO remove when all icons have fill=currentColor
     * {

res/css/structures/_RoomView.pcss

@@ -35,6 +35,7 @@ Please see LICENSE files in the repository root for full details.
         width: 100%;
         flex: 0 0 auto;
         margin-right: 2px;
+        padding-bottom: 1em;
     }
 }
 

res/css/views/right_panel/_UserInfo.pcss

@@ -37,10 +37,6 @@ Please see LICENSE files in the repository root for full details.
         padding: var(--cpd-space-2x) 0 var(--cpd-space-4x);
         margin: 0 var(--cpd-space-4x);
 
-        .mx_UserInfo_container_verifyButton {
-            margin-top: $spacing-8;
-        }
-
         & + .mx_UserInfo_container {
             border-top: 1px solid $separator;
         }
@@ -180,6 +176,28 @@ Please see LICENSE files in the repository root for full details.
         opacity: 1;
     }
 
+    .mx_UserInfo_verification {
+        margin-top: var(--cpd-space-4x);
+        height: 36px;
+
+        .mx_UserInfo_verified_badge {
+            min-width: 68px;
+            height: 20px;
+
+            .mx_UserInfo_verified_icon {
+                flex-shrink: 0;
+            }
+
+            .mx_UserInfo_verified_label {
+                margin: 0;
+            }
+        }
+
+        .mx_UserInfo_verification_unavailable {
+            color: var(--cpd-color-text-secondary);
+        }
+    }
+
     .mx_UserInfo_memberDetails {
         .mx_UserInfo_profileField {
             display: flex;
@@ -226,45 +244,6 @@ Please see LICENSE files in the repository root for full details.
         flex: 1 1 0;
     }
 
-    .mx_UserInfo_devices {
-        .mx_UserInfo_device {
-            display: flex;
-            margin: $spacing-8 0;
-
-            &.mx_UserInfo_device_verified {
-                .mx_UserInfo_device_trusted {
-                    color: $accent;
-                }
-            }
-            &.mx_UserInfo_device_unverified {
-                .mx_UserInfo_device_trusted {
-                    color: $alert;
-                }
-            }
-
-            .mx_UserInfo_device_name {
-                flex: 1;
-                margin: 0 5px;
-                word-break: break-word;
-            }
-        }
-
-        /* both for icon in expand button and device item */
-        .mx_E2EIcon {
-            /* don't squeeze */
-            flex: 0 0 auto;
-            margin: 0;
-            width: 12px;
-            height: 12px;
-        }
-
-        .mx_UserInfo_expand {
-            column-gap: 5px; /* cf: mx_UserInfo_device_name */
-            margin-bottom: 11px;
-            align-items: initial; /* Cancel the default property */
-        }
-    }
-
     &.mx_UserInfo_smallAvatar {
         .mx_UserInfo_avatar {
             .mx_UserInfo_avatar_transition {

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

@@ -0,0 +1,39 @@
+/*
+ * 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_RoomListSearch {
+    /* From figma, this should be aligned with the room header */
+    height: 64px;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--cpd-color-bg-subtle-primary);
+    padding: 0 var(--cpd-space-3x);
+
+    svg {
+        fill: var(--cpd-color-icon-secondary);
+    }
+
+    .mx_RoomListSearch_search {
+        /* The search button should take all the remaining space */
+        flex: 1;
+        font: var(--cpd-font-body-md-regular);
+        color: var(--cpd-color-text-secondary);
+
+        span {
+            flex: 1;
+
+            kbd {
+                font-family: inherit;
+            }
+        }
+    }
+
+    .mx_RoomListSearch_explore:hover {
+        svg {
+            fill: var(--cpd-color-icon-primary);
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+/*
+ * 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_RoomListView {
+    background-color: var(--cpd-color-bg-canvas-default);
+    height: 100%;
+    border-right: 1px solid var(--cpd-color-bg-subtle-primary);
+}

res/css/views/rooms/_MemberListHeaderView.pcss

@@ -16,6 +16,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_MemberListHeaderView_invite_small {
         margin-left: var(--cpd-space-3x);
+        margin-right: var(--cpd-space-4x);
     }
 
     .mx_MemberListHeaderView_invite_large {
@@ -33,5 +34,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_MemberListHeaderView_search {
         width: 240px;
+        flex-grow: 1;
+        margin-left: var(--cpd-space-4x);
     }
 }

res/css/views/rooms/_MemberTileView.pcss

@@ -27,13 +27,11 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_MemberTileView_name {
         font: var(--cpd-font-body-md-medium);
-        font-size: 15px;
         min-width: 0;
     }
 
     .mx_MemberTileView_userLabel {
         font: var(--cpd-font-body-sm-regular);
-        font-size: 13px;
         color: var(--cpd-color-text-secondary);
         margin-left: var(--cpd-space-4x);
     }

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

@@ -69,11 +69,4 @@
         flex-direction: column;
         gap: var(--cpd-space-8x);
     }
-
-    .mx_ChangeRecoveryKey_footer {
-        display: flex;
-        flex-direction: column;
-        gap: var(--cpd-space-4x);
-        justify-content: center;
-    }
 }

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

@@ -31,3 +31,10 @@
         }
     }
 }
+
+.mx_EncryptionCard_buttons {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-4x);
+    justify-content: center;
+}

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

@@ -5,11 +5,8 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-/**
- * Shared by multiple components that confirm a destructive action in the user settings dialog.
- */
-.mx_DestructiveComponent {
-    .mx_DestructiveComponent_content {
+.mx_ResetIdentityPanel {
+    .mx_ResetIdentityPanel_content {
         display: flex;
         flex-direction: column;
         gap: var(--cpd-space-3x);
@@ -19,11 +16,4 @@
             text-align: center;
         }
     }
-
-    .mx_DestructiveComponent_footer {
-        display: flex;
-        flex-direction: column;
-        gap: var(--cpd-space-4x);
-        justify-content: center;
-    }
 }

scripts/fetchdep.sh

@@ -72,6 +72,13 @@ if [[ "$head" == *":"* ]]; then
 fi
 clone ${TRY_ORG} $defrepo ${TRY_BRANCH}
 
+# For merge queue runs we need to extract the temporary branch name
+# the ref_name will look like `gh-readonly-queue/<branch>/pr-<number>-<sha>`
+if [[ "$GITHUB_EVENT_NAME" == "merge_group" ]]; then
+    withoutPrefix=${GITHUB_REF_NAME#gh-readonly-queue/}
+    clone $deforg $defrepo ${withoutPrefix%%/pr-*}
+fi
+
 # Try the target branch of the push or PR.
 if [ -n "$GITHUB_BASE_REF" ]; then
     clone $deforg $defrepo $GITHUB_BASE_REF

src/AddThreepid.ts

@@ -16,7 +16,6 @@ import {
     MatrixError,
     HTTPError,
     type IThreepid,
-    type UIAResponse,
 } from "matrix-js-sdk/src/matrix";
 
 import Modal from "./Modal";
@@ -181,9 +180,7 @@ export default class AddThreepid {
      * with a "message" property which contains a human-readable message detailing why
      * the request failed.
      */
-    public async checkEmailLinkClicked(): Promise<
-        [success?: boolean, result?: UIAResponse<IAddThreePidOnlyBody> | Error | null]
-    > {
+    public async checkEmailLinkClicked(): Promise<[success?: boolean, result?: IAddThreePidOnlyBody | Error | null]> {
         try {
             if (this.bind) {
                 const authClient = new IdentityAuthClient();
@@ -270,7 +267,7 @@ export default class AddThreepid {
      */
     public async haveMsisdnToken(
         msisdnToken: string,
-    ): Promise<[success?: boolean, result?: UIAResponse<IAddThreePidOnlyBody> | Error | null]> {
+    ): Promise<[success?: boolean, result?: IAddThreePidOnlyBody | Error | null]> {
         const authClient = new IdentityAuthClient();
 
         if (this.submitUrl) {

src/CreateCrossSigning.ts

@@ -7,7 +7,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 { type AuthDict, type MatrixClient, MatrixError, type UIAResponse } from "matrix-js-sdk/src/matrix";
+import { type AuthDict, type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
 
 import { SSOAuthEntry } from "./components/views/auth/InteractiveAuthEntryComponents";
 import Modal from "./Modal";
@@ -38,7 +38,7 @@ export async function createCrossSigning(cli: MatrixClient): Promise<void> {
 
 export async function uiAuthCallback(
     matrixClient: MatrixClient,
-    makeRequest: (authData: AuthDict) => Promise<UIAResponse<void>>,
+    makeRequest: (authData: AuthDict) => Promise<void>,
 ): Promise<void> {
     try {
         await makeRequest({});

src/DateUtils.ts

@@ -38,7 +38,7 @@ export function getMonthsArray(month: Intl.DateTimeFormatOptions["month"] = "sho
 
 // XXX: Ideally we could just specify `hour12: boolean` but it has issues on Chrome in the `en` locale
 // https://support.google.com/chrome/thread/29828561?hl=en
-function getTwelveHourOptions(showTwelveHour: boolean): Intl.DateTimeFormatOptions {
+export function getTwelveHourOptions(showTwelveHour: boolean): Intl.DateTimeFormatOptions {
     return {
         hourCycle: showTwelveHour ? "h12" : "h23",
     };

src/DeviceListener.ts

@@ -15,7 +15,7 @@ import {
     type SyncState,
     ClientStoppedError,
 } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
+import { logger as baseLogger } from "matrix-js-sdk/src/logger";
 import { CryptoEvent, type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
 import { type CryptoSessionStateChange } from "@matrix-org/analytics-events/types/typescript/CryptoSessionStateChange";
 
@@ -48,6 +48,8 @@ import { asyncSomeParallel } from "./utils/arrays.ts";
 
 const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
 
+const logger = baseLogger.getChild("DeviceListener:");
+
 export default class DeviceListener {
     private dispatcherRef?: string;
     // device IDs for which the user has dismissed the verify toast ('Later')
@@ -131,7 +133,7 @@ export default class DeviceListener {
      * @param {String[]} deviceIds List of device IDs to dismiss notifications for
      */
     public async dismissUnverifiedSessions(deviceIds: Iterable<string>): Promise<void> {
-        logger.log("Dismissing unverified sessions: " + Array.from(deviceIds).join(","));
+        logger.debug("Dismissing unverified sessions: " + Array.from(deviceIds).join(","));
         for (const d of deviceIds) {
             this.dismissed.add(d);
         }
@@ -309,20 +311,21 @@ export default class DeviceListener {
             if (!crossSigningReady) {
                 // This account is legacy and doesn't have cross-signing set up at all.
                 // Prompt the user to set it up.
+                logger.info("Cross-signing not ready: showing SET_UP_ENCRYPTION toast");
                 showSetupEncryptionToast(SetupKind.SET_UP_ENCRYPTION);
             } else if (!isCurrentDeviceTrusted) {
                 // cross signing is ready but the current device is not trusted: prompt the user to verify
+                logger.info("Current device not verified: showing VERIFY_THIS_SESSION toast");
                 showSetupEncryptionToast(SetupKind.VERIFY_THIS_SESSION);
             } else if (!allCrossSigningSecretsCached) {
                 // cross signing ready & device trusted, but we are missing secrets from our local cache.
                 // prompt the user to enter their recovery key.
+                logger.info("Some secrets not cached: showing KEY_STORAGE_OUT_OF_SYNC toast");
                 showSetupEncryptionToast(SetupKind.KEY_STORAGE_OUT_OF_SYNC);
             } else if (defaultKeyId === null) {
-                // the user just hasn't set up 4S yet: prompt them to do so (unless they've explicitly said no to backups)
-                const disabledEvent = cli.getAccountData("m.org.matrix.custom.backup_disabled");
-                if (!disabledEvent || !disabledEvent.getContent()?.disabled) {
-                    showSetupEncryptionToast(SetupKind.SET_UP_RECOVERY);
-                }
+                // the user just hasn't set up 4S yet: prompt them to do so
+                logger.info("No default 4S key: showing SET_UP_RECOVERY toast");
+                showSetupEncryptionToast(SetupKind.SET_UP_RECOVERY);
             } else {
                 // some other condition... yikes! Show the 'set up encryption' toast: this is what we previously did
                 // in 'other' situations. Possibly we should consider prompting for a full reset in this case?

src/MatrixClientPeg.ts

@@ -41,7 +41,7 @@ import PlatformPeg from "./PlatformPeg";
 import { formatList } from "./utils/FormattingUtils";
 import SdkConfig from "./SdkConfig";
 import { setDeviceIsolationMode } from "./settings/controllers/DeviceIsolationModeController.ts";
-import { initialiseDehydration } from "./utils/device/dehydration";
+import { initialiseDehydrationIfEnabled } from "./utils/device/dehydration";
 
 export interface IMatrixClientCreds {
     homeserverUrl: string;
@@ -347,7 +347,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         // is a new login, we will start dehydration after Secret Storage is
         // unlocked.
         try {
-            await initialiseDehydration({ onlyIfKeyCached: true, rehydrate: false }, this.matrixClient);
+            await initialiseDehydrationIfEnabled(this.matrixClient, { onlyIfKeyCached: true, rehydrate: false });
         } catch (e) {
             // We may get an error dehydrating, such as if cross-signing and
             // SSSS are not set up yet.  Just log the error and continue.

src/TextForEvent.tsx

@@ -191,7 +191,10 @@ function textForMemberEvent(
         case KnownMembership.Leave:
             if (ev.getSender() === ev.getStateKey()) {
                 if (prevContent.membership === KnownMembership.Invite) {
-                    return () => _t("timeline|m.room.member|reject_invite", { targetName });
+                    return () =>
+                        reason
+                            ? _t("timeline|m.room.member|reject_invite_reason", { targetName, reason })
+                            : _t("timeline|m.room.member|reject_invite", { targetName });
                 } else {
                     return () =>
                         reason

src/accessibility/KeyboardShortcuts.ts

@@ -520,7 +520,7 @@ export const KEYBOARD_SHORTCUTS: IKeyboardShortcuts = {
     },
     [KeyBindingAction.GoToHome]: {
         default: {
-            ctrlOrCmdKey: true,
+            ctrlKey: true,
             altKey: !IS_MAC,
             shiftKey: IS_MAC,
             key: Key.H,

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

@@ -10,13 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { createRef } from "react";
 import FileSaver from "file-saver";
 import { logger } from "matrix-js-sdk/src/logger";
-import {
-    type AuthDict,
-    type CrossSigningKeys,
-    MatrixError,
-    type UIAFlow,
-    type UIAResponse,
-} from "matrix-js-sdk/src/matrix";
+import { type AuthDict } from "matrix-js-sdk/src/matrix";
 import { type GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
 import classNames from "classnames";
 import CheckmarkIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
@@ -43,7 +37,7 @@ import Spinner from "../../../../components/views/elements/Spinner";
 import InteractiveAuthDialog from "../../../../components/views/dialogs/InteractiveAuthDialog";
 import { type IValidationResult } from "../../../../components/views/elements/Validation";
 import PassphraseConfirmField from "../../../../components/views/auth/PassphraseConfirmField";
-import { initialiseDehydration } from "../../../../utils/device/dehydration";
+import { initialiseDehydrationIfEnabled } from "../../../../utils/device/dehydration";
 
 // I made a mistake while converting this and it has to be fixed!
 enum Phase {
@@ -61,8 +55,6 @@ enum Phase {
 const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
 
 interface IProps {
-    hasCancel?: boolean;
-    accountPassword?: string;
     forceReset?: boolean;
     resetCrossSigning?: boolean;
     onFinished(ok?: boolean): void;
@@ -77,11 +69,6 @@ interface IState {
     downloaded: boolean;
     setPassphrase: boolean;
 
-    // does the server offer a UI auth flow with just m.login.password
-    // for /keys/device_signing/upload?
-    canUploadKeysWithPasswordOnly: boolean | null;
-    accountPassword: string;
-    accountPasswordCorrect: boolean | null;
     canSkip: boolean;
     passPhraseKeySelected: string;
     error?: boolean;
@@ -96,7 +83,6 @@ interface IState {
  */
 export default class CreateSecretStorageDialog extends React.PureComponent<IProps, IState> {
     public static defaultProps: Partial<IProps> = {
-        hasCancel: true,
         forceReset: false,
         resetCrossSigning: false,
     };
@@ -117,16 +103,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
             passPhraseKeySelected = SecureBackupSetupMethod.Passphrase;
         }
 
-        const accountPassword = props.accountPassword || "";
-        let canUploadKeysWithPasswordOnly: boolean | null = null;
-        if (accountPassword) {
-            // If we have an account password in memory, let's simplify and
-            // assume it means password auth is also supported for device
-            // signing key upload as well. This avoids hitting the server to
-            // test auth flows, which may be slow under high load.
-            canUploadKeysWithPasswordOnly = true;
-        }
-
         const keyFromCustomisations = ModuleRunner.instance.extensions.cryptoSetup.createSecretStorageKey();
         const phase = keyFromCustomisations ? Phase.Loading : Phase.ChooseKeyPassphrase;
 
@@ -138,23 +114,14 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
             copied: false,
             downloaded: false,
             setPassphrase: false,
-            // does the server offer a UI auth flow with just m.login.password
-            // for /keys/device_signing/upload?
-            accountPasswordCorrect: null,
             canSkip: !isSecureBackupRequired(cli),
-            canUploadKeysWithPasswordOnly,
             passPhraseKeySelected,
-            accountPassword,
         };
     }
 
     public componentDidMount(): void {
         const keyFromCustomisations = ModuleRunner.instance.extensions.cryptoSetup.createSecretStorageKey();
         if (keyFromCustomisations) this.initExtension(keyFromCustomisations);
-
-        if (this.state.canUploadKeysWithPasswordOnly === null) {
-            this.queryKeyUploadAuth();
-        }
     }
 
     private initExtension(keyFromCustomisations: Uint8Array): void {
@@ -165,27 +132,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
         this.bootstrapSecretStorage();
     }
 
-    private async queryKeyUploadAuth(): Promise<void> {
-        try {
-            await MatrixClientPeg.safeGet().uploadDeviceSigningKeys(undefined, {} as CrossSigningKeys);
-            // We should never get here: the server should always require
-            // UI auth to upload device signing keys. If we do, we upload
-            // no keys which would be a no-op.
-            logger.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!");
-        } catch (error) {
-            if (!(error instanceof MatrixError) || !error.data || !error.data.flows) {
-                logger.log("uploadDeviceSigningKeys advertised no flows!");
-                return;
-            }
-            const canUploadKeysWithPasswordOnly = error.data.flows.some((f: UIAFlow) => {
-                return f.stages.length === 1 && f.stages[0] === "m.login.password";
-            });
-            this.setState({
-                canUploadKeysWithPasswordOnly,
-            });
-        }
-    }
-
     private onKeyPassphraseChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             passPhraseKeySelected: e.target.value,
@@ -231,47 +177,34 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
         });
     };
 
-    private doBootstrapUIAuth = async (
-        makeRequest: (authData: AuthDict) => Promise<UIAResponse<void>>,
-    ): Promise<void> => {
-        if (this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) {
-            await makeRequest({
-                type: "m.login.password",
-                identifier: {
-                    type: "m.id.user",
-                    user: MatrixClientPeg.safeGet().getSafeUserId(),
-                },
-                password: this.state.accountPassword,
-            });
-        } else {
-            const dialogAesthetics = {
-                [SSOAuthEntry.PHASE_PREAUTH]: {
-                    title: _t("auth|uia|sso_title"),
-                    body: _t("auth|uia|sso_preauth_body"),
-                    continueText: _t("auth|sso"),
-                    continueKind: "primary",
-                },
-                [SSOAuthEntry.PHASE_POSTAUTH]: {
-                    title: _t("encryption|confirm_encryption_setup_title"),
-                    body: _t("encryption|confirm_encryption_setup_body"),
-                    continueText: _t("action|confirm"),
-                    continueKind: "primary",
-                },
-            };
+    private doBootstrapUIAuth = async (makeRequest: (authData: AuthDict) => Promise<void>): Promise<void> => {
+        const dialogAesthetics = {
+            [SSOAuthEntry.PHASE_PREAUTH]: {
+                title: _t("auth|uia|sso_title"),
+                body: _t("auth|uia|sso_preauth_body"),
+                continueText: _t("auth|sso"),
+                continueKind: "primary",
+            },
+            [SSOAuthEntry.PHASE_POSTAUTH]: {
+                title: _t("encryption|confirm_encryption_setup_title"),
+                body: _t("encryption|confirm_encryption_setup_body"),
+                continueText: _t("action|confirm"),
+                continueKind: "primary",
+            },
+        };
 
-            const { finished } = Modal.createDialog(InteractiveAuthDialog, {
-                title: _t("encryption|bootstrap_title"),
-                matrixClient: MatrixClientPeg.safeGet(),
-                makeRequest,
-                aestheticsForStagePhases: {
-                    [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
-                    [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
-                },
-            });
-            const [confirmed] = await finished;
-            if (!confirmed) {
-                throw new Error("Cross-signing key upload auth canceled");
-            }
+        const { finished } = Modal.createDialog(InteractiveAuthDialog, {
+            title: _t("encryption|bootstrap_title"),
+            matrixClient: MatrixClientPeg.safeGet(),
+            makeRequest,
+            aestheticsForStagePhases: {
+                [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+                [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+            },
+        });
+        const [confirmed] = await finished;
+        if (!confirmed) {
+            throw new Error("Cross-signing key upload auth canceled");
         }
     };
 
@@ -338,7 +271,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                     setupNewKeyBackup: !backupInfo,
                 });
             }
-            await initialiseDehydration({ createNewKey: true });
+            await initialiseDehydrationIfEnabled(cli, { createNewKey: true });
 
             this.setState({
                 phase: Phase.Stored,
@@ -811,7 +744,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                 top={this.topComponent}
                 title={this.titleForPhase(this.state.phase)}
                 titleClass={titleClass}
-                hasCancel={this.props.hasCancel && [Phase.Passphrase].includes(this.state.phase)}
+                hasCancel={false}
                 fixedWidth={false}
             >
                 <div>{content}</div>

src/components/structures/InteractiveAuth.tsx

@@ -27,13 +27,10 @@ import Spinner from "../views/elements/Spinner";
 
 export const ERROR_USER_CANCELLED = new Error("User cancelled auth session");
 
-type InteractiveAuthCallbackSuccess<T> = (
-    success: true,
-    response: T,
-    extra?: { emailSid?: string; clientSecret?: string },
-) => Promise<void>;
-type InteractiveAuthCallbackFailure = (success: false, response: IAuthData | Error) => Promise<void>;
-export type InteractiveAuthCallback<T> = InteractiveAuthCallbackSuccess<T> & InteractiveAuthCallbackFailure;
+export type InteractiveAuthCallback<T> = {
+    (success: true, response: T, extra?: { emailSid?: string; clientSecret?: string }): Promise<void>;
+    (success: false, response: IAuthData | Error): Promise<void>;
+};
 
 export interface InteractiveAuthProps<T> {
     // matrix client to use for UI auth requests
@@ -49,10 +46,6 @@ export interface InteractiveAuthProps<T> {
     emailSid?: string;
     // If true, poll to see if the auth flow has been completed out-of-band
     poll?: boolean;
-    // If true, components will be told that the 'Continue' button
-    // is managed by some other party and should not be managed by
-    // the component itself.
-    continueIsManaged?: boolean;
     // continueText and continueKind are passed straight through to the AuthEntryComponent.
     continueText?: string;
     continueKind?: ContinueKind;
@@ -288,7 +281,6 @@ export default class InteractiveAuthComponent<T> extends React.Component<Interac
                 stageState={this.state.stageState}
                 fail={this.onAuthStageFailed}
                 setEmailSid={this.setEmailSid}
-                showContinue={!this.props.continueIsManaged}
                 onPhaseChange={this.onPhaseChange}
                 requestEmailToken={this.authLogic.requestEmailToken}
                 continueText={this.props.continueText}

src/components/structures/LeftPanel.tsx

@@ -12,7 +12,7 @@ import classNames from "classnames";
 
 import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
-import RoomList from "../views/rooms/RoomList";
+import LegacyRoomList from "../views/rooms/LegacyRoomList";
 import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
 import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
 import { Action } from "../../dispatcher/actions";
@@ -36,6 +36,8 @@ import AccessibleButton, { type ButtonEvent } from "../views/elements/Accessible
 import PosthogTrackers from "../../PosthogTrackers";
 import type PageType from "../../PageTypes";
 import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation";
+import SettingsStore from "../../settings/SettingsStore";
+import { RoomListView } from "../views/rooms/RoomListView";
 
 interface IProps {
     isMinimized: boolean;
@@ -56,7 +58,7 @@ interface IState {
 
 export default class LeftPanel extends React.Component<IProps, IState> {
     private listContainerRef = createRef<HTMLDivElement>();
-    private roomListRef = createRef<RoomList>();
+    private roomListRef = createRef<LegacyRoomList>();
     private focusedElement: Element | null = null;
     private isDoingStickyHeaders = false;
 
@@ -377,8 +379,25 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     }
 
     public render(): React.ReactNode {
+        const containerClasses = classNames({
+            mx_LeftPanel: true,
+            mx_LeftPanel_minimized: this.props.isMinimized,
+        });
+
+        const roomListClasses = classNames("mx_LeftPanel_actualRoomListContainer", "mx_AutoHideScrollbar");
+        const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
+        if (useNewRoomList) {
+            return (
+                <div className={containerClasses}>
+                    <div className="mx_LeftPanel_roomListContainer">
+                        <RoomListView activeSpace={this.state.activeSpace} />
+                    </div>
+                </div>
+            );
+        }
+
         const roomList = (
-            <RoomList
+            <LegacyRoomList
                 onKeyDown={this.onKeyDown}
                 resizeNotifier={this.props.resizeNotifier}
                 onFocus={this.onFocus}
@@ -391,13 +410,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             />
         );
 
-        const containerClasses = classNames({
-            mx_LeftPanel: true,
-            mx_LeftPanel_minimized: this.props.isMinimized,
-        });
-
-        const roomListClasses = classNames("mx_LeftPanel_actualRoomListContainer", "mx_AutoHideScrollbar");
-
         return (
             <div className={containerClasses}>
                 <div className="mx_LeftPanel_roomListContainer">

src/components/structures/LoggedInView.tsx

@@ -501,9 +501,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                 handled = true;
                 break;
             case KeyBindingAction.FilterRooms:
-                dis.dispatch({
-                    action: "focus_room_filter",
-                });
+                dis.fire(Action.OpenSpotlight);
                 handled = true;
                 break;
             case KeyBindingAction.ToggleUserMenu:

src/components/structures/RoomSearch.tsx

@@ -11,7 +11,6 @@ import * as React from "react";
 
 import { ALTERNATE_KEY_NAME } from "../../accessibility/KeyboardShortcuts";
 import defaultDispatcher from "../../dispatcher/dispatcher";
-import { type ActionPayload } from "../../dispatcher/payloads";
 import { IS_MAC, Key } from "../../Keyboard";
 import { _t } from "../../languageHandler";
 import AccessibleButton from "../views/elements/AccessibleButton";
@@ -22,26 +21,10 @@ interface IProps {
 }
 
 export default class RoomSearch extends React.PureComponent<IProps> {
-    private dispatcherRef?: string;
-
-    public componentDidMount(): void {
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-    }
-
-    public componentWillUnmount(): void {
-        defaultDispatcher.unregister(this.dispatcherRef);
-    }
-
     private openSpotlight(): void {
         defaultDispatcher.fire(Action.OpenSpotlight);
     }
 
-    private onAction = (payload: ActionPayload): void => {
-        if (payload.action === "focus_room_filter") {
-            this.openSpotlight();
-        }
-    };
-
     public render(): React.ReactNode {
         const classes = classNames(
             {

src/components/structures/RoomView.tsx

@@ -1151,13 +1151,14 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 break;
             case "MatrixActions.sync":
                 if (!this.state.matrixClientIsReady) {
+                    const isReadyNow = Boolean(this.context.client?.isInitialSyncComplete());
                     this.setState(
                         {
-                            matrixClientIsReady: !!this.context.client?.isInitialSyncComplete(),
+                            matrixClientIsReady: isReadyNow,
                         },
                         () => {
                             // send another "initial" RVS update to trigger peeking if needed
-                            this.onRoomViewStoreUpdate(true);
+                            if (isReadyNow) this.onRoomViewStoreUpdate(true);
                         },
                     );
                 }

src/components/viewmodels/settings/encryption/KeyStoragePanelViewModel.ts

@@ -1,130 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { useCallback, useEffect, useState } from "react";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
-
-interface KeyStoragePanelState {
-    /**
-     * Whether key storage is enabled, or 'undefined' if the state is still loading.
-     */
-    isEnabled: boolean | undefined;
-
-    /**
-     * A function that can be called to enable or disable key storage.
-     * @param enable True to turn key storage on or false to turn it off
-     */
-    setEnabled: (enable: boolean) => void;
-
-    /**
-     * True if the state is still loading for the first time
-     */
-    loading: boolean;
-
-    /**
-     * True if the status is in the process of being changed
-     */
-    busy: boolean;
-}
-
-export function useKeyStoragePanelViewModel(): KeyStoragePanelState {
-    const [isEnabled, setIsEnabled] = useState<boolean | undefined>(undefined);
-    const [loading, setLoading] = useState(true);
-    // Whilst the change is being made, the toggle will reflect the pending value rather than the actual state
-    const [pendingValue, setPendingValue] = useState<boolean | undefined>(undefined);
-
-    const matrixClient = useMatrixClientContext();
-
-    const checkStatus = useCallback(async () => {
-        const crypto = matrixClient.getCrypto();
-        if (!crypto) {
-            logger.error("Can't check key backup status: no crypto module available");
-            return;
-        }
-        const info = await crypto.getKeyBackupInfo();
-        setIsEnabled(Boolean(info?.version));
-    }, [matrixClient]);
-
-    useEffect(() => {
-        (async () => {
-            await checkStatus();
-            setLoading(false);
-        })();
-    }, [checkStatus]);
-
-    const setEnabled = useCallback(
-        async (enable: boolean) => {
-            setPendingValue(enable);
-            try {
-                const crypto = matrixClient.getCrypto();
-                if (!crypto) {
-                    logger.error("Can't change key backup status: no crypto module available");
-                    return;
-                }
-                if (enable) {
-                    const currentKeyBackup = await crypto.checkKeyBackupAndEnable();
-                    if (currentKeyBackup === null) {
-                        await crypto.resetKeyBackup();
-                    }
-
-                    // resetKeyBackup fires this off in the background without waiting, so we need to do it
-                    // explicitly and wait for it, otherwise it won't be enabled yet when we check again.
-                    await crypto.checkKeyBackupAndEnable();
-
-                    // Set the flag so that EX no longer thinks the user wants backup disabled
-                    await matrixClient.setAccountData("m.org.matrix.custom.backup_disabled", { disabled: false });
-                } else {
-                    // Get the key backup version we're using
-                    const info = await crypto.getKeyBackupInfo();
-                    if (!info?.version) {
-                        logger.error("Can't delete key backup version: no version available");
-                        return;
-                    }
-
-                    // Bye bye backup
-                    await crypto.deleteKeyBackupVersion(info.version);
-
-                    // also turn off 4S, since this is also storing keys on the server.
-                    // Delete the cross signing keys from secret storage
-                    await matrixClient.deleteAccountData("m.cross_signing.master");
-                    await matrixClient.deleteAccountData("m.cross_signing.self_signing");
-                    await matrixClient.deleteAccountData("m.cross_signing.user_signing");
-                    // and the key backup key (we just turned it off anyway)
-                    await matrixClient.deleteAccountData("m.megolm_backup.v1");
-
-                    // Delete the key information
-                    const defaultKey = await matrixClient.secretStorage.getDefaultKeyId();
-                    if (defaultKey) {
-                        await matrixClient.deleteAccountData(`m.secret_storage.key.${defaultKey}`);
-
-                        // ...and the default key pointer
-                        await matrixClient.deleteAccountData("m.secret_storage.default_key");
-                    }
-
-                    // finally, set a flag to say that the user doesn't want key backup.
-                    // Element X uses this to determine whether to set up automatically,
-                    // so this will stop EX turning it back on spontaneously.
-                    await matrixClient.setAccountData("m.org.matrix.custom.backup_disabled", { disabled: true });
-                }
-
-                await checkStatus();
-            } finally {
-                setPendingValue(undefined);
-            }
-        },
-        [setPendingValue, checkStatus, matrixClient],
-    );
-
-    return {
-        isEnabled: pendingValue ?? isEnabled,
-        setEnabled,
-        loading,
-        busy: pendingValue !== undefined,
-    };
-}

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -85,7 +85,6 @@ interface IAuthEntryProps {
     requestEmailToken?: () => Promise<void>;
     fail: (error: Error) => void;
     clientSecret: string;
-    showContinue: boolean;
 }
 
 interface IPasswordAuthEntryState {
@@ -361,9 +360,11 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
             );
         }
 
-        let submitButton: JSX.Element | undefined;
-        if (this.props.showContinue !== false) {
-            submitButton = (
+        return (
+            <div className="mx_InteractiveAuthEntryComponents">
+                <p>{_t("auth|uia|terms")}</p>
+                {checkboxes}
+                {errorSection}
                 <AccessibleButton
                     kind="primary"
                     className="mx_InteractiveAuthEntryComponents_termsSubmit"
@@ -372,15 +373,6 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
                 >
                     {_t("action|accept")}
                 </AccessibleButton>
-            );
-        }
-
-        return (
-            <div className="mx_InteractiveAuthEntryComponents">
-                <p>{_t("auth|uia|terms")}</p>
-                {checkboxes}
-                {errorSection}
-                {submitButton}
             </div>
         );
     }

src/components/views/dialogs/InteractiveAuthDialog.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { type MatrixClient, type UIAResponse } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { type AuthType } from "matrix-js-sdk/src/interactive-auth";
 
 import { _t } from "../../../languageHandler";
@@ -63,7 +63,7 @@ export interface InteractiveAuthDialogProps<T = unknown>
     // Default is defined in _getDefaultDialogAesthetics()
     aestheticsForStagePhases?: DialogAesthetics;
 
-    onFinished(success?: boolean, result?: UIAResponse<T> | Error | null): void;
+    onFinished(success?: boolean, result?: T | Error | null): void;
 }
 
 interface IState {
@@ -111,7 +111,7 @@ export default class InteractiveAuthDialog<T> extends React.Component<Interactiv
 
     private onAuthFinished: InteractiveAuthCallback<T> = async (success, result): Promise<void> => {
         if (success) {
-            this.props.onFinished(true, result);
+            this.props.onFinished(true, result as T);
         } else {
             if (result === ERROR_USER_CANCELLED) {
                 this.props.onFinished(false, null);

src/components/views/right_panel/UserInfo.tsx

@@ -25,7 +25,8 @@ import {
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { type UserVerificationStatus, type VerificationRequest, CryptoEvent } from "matrix-js-sdk/src/crypto-api";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Heading, MenuItem, Text, Tooltip } from "@vector-im/compound-web";
+import { Badge, Button, Heading, InlineSpinner, MenuItem, Text, Tooltip } from "@vector-im/compound-web";
+import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified";
 import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share";
@@ -42,21 +43,19 @@ import dis from "../../../dispatcher/dispatcher";
 import Modal from "../../../Modal";
 import { _t, UserFriendlyError } from "../../../languageHandler";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
+import { type ButtonEvent } from "../elements/AccessibleButton";
 import SdkConfig from "../../../SdkConfig";
 import MultiInviter from "../../../utils/MultiInviter";
-import E2EIcon from "../rooms/E2EIcon";
 import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
 import { textualPowerLevel } from "../../../Roles";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import EncryptionPanel from "./EncryptionPanel";
 import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
-import { verifyDevice, verifyUser } from "../../../verification";
+import { verifyUser } from "../../../verification";
 import { Action } from "../../../dispatcher/actions";
 import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
 import BaseCard from "./BaseCard";
-import { E2EStatus } from "../../../utils/ShieldUtils";
 import ImageView from "../elements/ImageView";
 import Spinner from "../elements/Spinner";
 import PowerSelector from "../elements/PowerSelector";
@@ -81,7 +80,6 @@ import PosthogTrackers from "../../../PosthogTrackers";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { DirectoryMember, startDmOnFirstMessage } from "../../../utils/direct-messages";
 import { SdkContextClass } from "../../../contexts/SDKContext";
-import { asyncSome } from "../../../utils/arrays";
 import { Flex } from "../../utils/Flex";
 import CopyableText from "../elements/CopyableText";
 import { useUserTimezone } from "../../../hooks/useUserTimezone";
@@ -107,32 +105,6 @@ export const disambiguateDevices = (devices: IDevice[]): void => {
     }
 };
 
-export const getE2EStatus = async (
-    cli: MatrixClient,
-    userId: string,
-    devices: IDevice[],
-): Promise<E2EStatus | undefined> => {
-    const crypto = cli.getCrypto();
-    if (!crypto) return undefined;
-    const isMe = userId === cli.getUserId();
-    const userTrust = await crypto.getUserVerificationStatus(userId);
-    if (!userTrust.isCrossSigningVerified()) {
-        return userTrust.wasCrossSigningVerified() ? E2EStatus.Warning : E2EStatus.Normal;
-    }
-
-    const anyDeviceUnverified = await asyncSome(devices, async (device) => {
-        const { deviceId } = device;
-        // For your own devices, we use the stricter check of cross-signing
-        // verification to encourage everyone to trust their own devices via
-        // cross-signing so that other users can then safely trust you.
-        // For other people's devices, the more general verified check that
-        // includes locally verified devices can be used.
-        const deviceTrust = await crypto.getDeviceVerificationStatus(userId, deviceId);
-        return isMe ? !deviceTrust?.crossSigningVerified : !deviceTrust?.isVerified();
-    });
-    return anyDeviceUnverified ? E2EStatus.Warning : E2EStatus.Verified;
-};
-
 /**
  * Converts the member to a DirectoryMember and starts a DM with them.
  */
@@ -146,251 +118,6 @@ async function openDmForUser(matrixClient: MatrixClient, user: Member): Promise<
     await startDmOnFirstMessage(matrixClient, [startDmUser]);
 }
 
-type SetUpdating = (updating: boolean) => void;
-
-function useHasCrossSigningKeys(
-    cli: MatrixClient,
-    member: User,
-    canVerify: boolean,
-    setUpdating: SetUpdating,
-): boolean | undefined {
-    return useAsyncMemo(async () => {
-        if (!canVerify) {
-            return undefined;
-        }
-        setUpdating(true);
-        try {
-            return await cli.getCrypto()?.userHasCrossSigningKeys(member.userId, true);
-        } finally {
-            setUpdating(false);
-        }
-    }, [cli, member, canVerify]);
-}
-
-/**
- * Display one device and the related actions
- * @param userId current user id
- * @param device device to display
- * @param isUserVerified false when the user is not verified
- * @constructor
- */
-export function DeviceItem({
-    userId,
-    device,
-    isUserVerified,
-}: {
-    userId: string;
-    device: IDevice;
-    isUserVerified: boolean;
-}): JSX.Element {
-    const cli = useContext(MatrixClientContext);
-    const isMe = userId === cli.getUserId();
-
-    /** is the device verified? */
-    const isVerified = useAsyncMemo(async () => {
-        const deviceTrust = await cli.getCrypto()?.getDeviceVerificationStatus(userId, device.deviceId);
-        if (!deviceTrust) return false;
-
-        // For your own devices, we use the stricter check of cross-signing
-        // verification to encourage everyone to trust their own devices via
-        // cross-signing so that other users can then safely trust you.
-        // For other people's devices, the more general verified check that
-        // includes locally verified devices can be used.
-        return isMe ? deviceTrust.crossSigningVerified : deviceTrust.isVerified();
-    }, [cli, userId, device]);
-
-    const classes = classNames("mx_UserInfo_device", {
-        mx_UserInfo_device_verified: isVerified,
-        mx_UserInfo_device_unverified: !isVerified,
-    });
-    const iconClasses = classNames("mx_E2EIcon", {
-        mx_E2EIcon_normal: !isUserVerified,
-        mx_E2EIcon_verified: isVerified,
-        mx_E2EIcon_warning: isUserVerified && !isVerified,
-    });
-
-    const onDeviceClick = (): void => {
-        const user = cli.getUser(userId);
-        if (user) {
-            verifyDevice(cli, user, device);
-        }
-    };
-
-    let deviceName;
-    if (!device.displayName?.trim()) {
-        deviceName = device.deviceId;
-    } else {
-        deviceName = device.ambiguous ? device.displayName + " (" + device.deviceId + ")" : device.displayName;
-    }
-
-    let trustedLabel: string | undefined;
-    if (isUserVerified) trustedLabel = isVerified ? _t("common|trusted") : _t("common|not_trusted");
-
-    if (isVerified === undefined) {
-        // we're still deciding if the device is verified
-        return <div className={classes} title={device.deviceId} />;
-    } else if (isVerified) {
-        return (
-            <div className={classes} title={device.deviceId}>
-                <div className={iconClasses} />
-                <div className="mx_UserInfo_device_name">{deviceName}</div>
-                <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
-            </div>
-        );
-    } else {
-        return (
-            <AccessibleButton
-                className={classes}
-                title={device.deviceId}
-                aria-label={deviceName}
-                onClick={onDeviceClick}
-            >
-                <div className={iconClasses} />
-                <div className="mx_UserInfo_device_name">{deviceName}</div>
-                <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
-            </AccessibleButton>
-        );
-    }
-}
-
-/**
- * Display a list of devices
- * @param devices devices to display
- * @param userId current user id
- * @param loading displays a spinner instead of the device section
- * @param isUserVerified is false when
- *  - the user is not verified, or
- *  - `MatrixClient.getCrypto.getUserVerificationStatus` async call is in progress (in which case `loading` will also be `true`)
- * @constructor
- */
-function DevicesSection({
-    devices,
-    userId,
-    loading,
-    isUserVerified,
-}: {
-    devices: IDevice[];
-    userId: string;
-    loading: boolean;
-    isUserVerified: boolean;
-}): JSX.Element {
-    const cli = useContext(MatrixClientContext);
-
-    const [isExpanded, setExpanded] = useState(false);
-
-    const deviceTrusts = useAsyncMemo(() => {
-        const cryptoApi = cli.getCrypto();
-        if (!cryptoApi) return Promise.resolve(undefined);
-        return Promise.all(devices.map((d) => cryptoApi.getDeviceVerificationStatus(userId, d.deviceId)));
-    }, [cli, userId, devices]);
-
-    if (loading || deviceTrusts === undefined) {
-        // still loading
-        return <Spinner />;
-    }
-    const isMe = userId === cli.getUserId();
-
-    let expandSectionDevices: IDevice[] = [];
-    const unverifiedDevices: IDevice[] = [];
-
-    let expandCountCaption;
-    let expandHideCaption;
-    let expandIconClasses = "mx_E2EIcon";
-
-    const dehydratedDeviceIds: string[] = [];
-    for (const device of devices) {
-        if (device.dehydrated) {
-            dehydratedDeviceIds.push(device.deviceId);
-        }
-    }
-    // If the user has exactly one device marked as dehydrated, we consider
-    // that as the dehydrated device, and hide it as a normal device (but
-    // indicate that the user is using a dehydrated device).  If the user has
-    // more than one, that is anomalous, and we show all the devices so that
-    // nothing is hidden.
-    const dehydratedDeviceId: string | undefined = dehydratedDeviceIds.length == 1 ? dehydratedDeviceIds[0] : undefined;
-    let dehydratedDeviceInExpandSection = false;
-
-    if (isUserVerified) {
-        for (let i = 0; i < devices.length; ++i) {
-            const device = devices[i];
-            const deviceTrust = deviceTrusts[i];
-            // For your own devices, we use the stricter check of cross-signing
-            // verification to encourage everyone to trust their own devices via
-            // cross-signing so that other users can then safely trust you.
-            // For other people's devices, the more general verified check that
-            // includes locally verified devices can be used.
-            const isVerified = deviceTrust && (isMe ? deviceTrust.crossSigningVerified : deviceTrust.isVerified());
-
-            if (isVerified) {
-                // don't show dehydrated device as a normal device, if it's
-                // verified
-                if (device.deviceId === dehydratedDeviceId) {
-                    dehydratedDeviceInExpandSection = true;
-                } else {
-                    expandSectionDevices.push(device);
-                }
-            } else {
-                unverifiedDevices.push(device);
-            }
-        }
-        expandCountCaption = _t("user_info|count_of_verified_sessions", { count: expandSectionDevices.length });
-        expandHideCaption = _t("user_info|hide_verified_sessions");
-        expandIconClasses += " mx_E2EIcon_verified";
-    } else {
-        if (dehydratedDeviceId) {
-            devices = devices.filter((device) => device.deviceId !== dehydratedDeviceId);
-            dehydratedDeviceInExpandSection = true;
-        }
-        expandSectionDevices = devices;
-        expandCountCaption = _t("user_info|count_of_sessions", { count: devices.length });
-        expandHideCaption = _t("user_info|hide_sessions");
-        expandIconClasses += " mx_E2EIcon_normal";
-    }
-
-    let expandButton;
-    if (expandSectionDevices.length) {
-        if (isExpanded) {
-            expandButton = (
-                <AccessibleButton kind="link" className="mx_UserInfo_expand" onClick={() => setExpanded(false)}>
-                    <div>{expandHideCaption}</div>
-                </AccessibleButton>
-            );
-        } else {
-            expandButton = (
-                <AccessibleButton kind="link" className="mx_UserInfo_expand" onClick={() => setExpanded(true)}>
-                    <div className={expandIconClasses} />
-                    <div>{expandCountCaption}</div>
-                </AccessibleButton>
-            );
-        }
-    }
-
-    let deviceList = unverifiedDevices.map((device, i) => {
-        return <DeviceItem key={i} userId={userId} device={device} isUserVerified={isUserVerified} />;
-    });
-    if (isExpanded) {
-        const keyStart = unverifiedDevices.length;
-        deviceList = deviceList.concat(
-            expandSectionDevices.map((device, i) => {
-                return (
-                    <DeviceItem key={i + keyStart} userId={userId} device={device} isUserVerified={isUserVerified} />
-                );
-            }),
-        );
-        if (dehydratedDeviceInExpandSection) {
-            deviceList.push(<div>{_t("user_info|dehydrated_device_enabled")}</div>);
-        }
-    }
-
-    return (
-        <div className="mx_UserInfo_devices">
-            <div>{deviceList}</div>
-            <div>{expandButton}</div>
-        </div>
-    );
-}
-
 const MessageButton = ({ member }: { member: Member }): JSX.Element => {
     const cli = useContext(MatrixClientContext);
     const [busy, setBusy] = useState(false);
@@ -1400,12 +1127,84 @@ export const useDevices = (userId: string): IDevice[] | undefined | null => {
     return devices;
 };
 
+function useHasCrossSigningKeys(cli: MatrixClient, member: User, canVerify: boolean): boolean | undefined {
+    return useAsyncMemo(async () => {
+        if (!canVerify) return undefined;
+        return await cli.getCrypto()?.userHasCrossSigningKeys(member.userId, true);
+    }, [cli, member, canVerify]);
+}
+
+const VerificationSection: React.FC<{
+    member: User | RoomMember;
+    devices: IDevice[];
+}> = ({ member, devices }) => {
+    const cli = useContext(MatrixClientContext);
+    let content;
+    const homeserverSupportsCrossSigning = useHomeserverSupportsCrossSigning(cli);
+
+    const userTrust = useAsyncMemo<UserVerificationStatus | undefined>(
+        async () => cli.getCrypto()?.getUserVerificationStatus(member.userId),
+        [member.userId],
+        // the user verification status is not initialized
+        undefined,
+    );
+    const hasUserVerificationStatus = Boolean(userTrust);
+    const isUserVerified = Boolean(userTrust?.isVerified());
+    const isMe = member.userId === cli.getUserId();
+    const canVerify =
+        hasUserVerificationStatus &&
+        homeserverSupportsCrossSigning &&
+        !isUserVerified &&
+        !isMe &&
+        devices &&
+        devices.length > 0;
+
+    const hasCrossSigningKeys = useHasCrossSigningKeys(cli, member as User, canVerify);
+
+    if (isUserVerified) {
+        content = (
+            <Badge kind="green" className="mx_UserInfo_verified_badge">
+                <VerifiedIcon className="mx_UserInfo_verified_icon" height="16px" width="16px" />
+                <Text size="sm" weight="medium" className="mx_UserInfo_verified_label">
+                    {_t("common|verified")}
+                </Text>
+            </Badge>
+        );
+    } else if (hasCrossSigningKeys === undefined) {
+        // We are still fetching the cross-signing keys for the user, show spinner.
+        content = <InlineSpinner size={24} />;
+    } else if (canVerify && hasCrossSigningKeys) {
+        content = (
+            <div className="mx_UserInfo_container_verifyButton">
+                <Button
+                    className="mx_UserInfo_verify_button"
+                    kind="tertiary"
+                    size="sm"
+                    onClick={() => verifyUser(cli, member as User)}
+                >
+                    {_t("user_info|verify_button")}
+                </Button>
+            </div>
+        );
+    } else {
+        content = (
+            <Text className="mx_UserInfo_verification_unavailable" size="sm">
+                ({_t("user_info|verification_unavailable")})
+            </Text>
+        );
+    }
+
+    return (
+        <Flex justify="center" align="center" className="mx_UserInfo_verification">
+            {content}
+        </Flex>
+    );
+};
+
 const BasicUserInfo: React.FC<{
     room: Room;
     member: User | RoomMember;
-    devices: IDevice[];
-    isRoomEncrypted: boolean;
-}> = ({ room, member, devices, isRoomEncrypted }) => {
+}> = ({ room, member }) => {
     const cli = useContext(MatrixClientContext);
 
     const powerLevels = useRoomPowerLevels(cli, room);
@@ -1503,111 +1302,10 @@ const BasicUserInfo: React.FC<{
         spinner = <Spinner />;
     }
 
-    // only display the devices list if our client supports E2E
-    const cryptoEnabled = Boolean(cli.getCrypto());
-
-    let text;
-    if (!isRoomEncrypted) {
-        if (!cryptoEnabled) {
-            text = _t("encryption|unsupported");
-        } else if (room && !room.isSpaceRoom()) {
-            text = _t("user_info|room_unencrypted");
-        }
-    } else if (!room.isSpaceRoom()) {
-        text = _t("user_info|room_encrypted");
-    }
-
-    let verifyButton;
-    const homeserverSupportsCrossSigning = useHomeserverSupportsCrossSigning(cli);
-
-    const userTrust = useAsyncMemo<UserVerificationStatus | undefined>(
-        async () => cli.getCrypto()?.getUserVerificationStatus(member.userId),
-        [member.userId],
-        // the user verification status is not initialized
-        undefined,
-    );
-    const hasUserVerificationStatus = Boolean(userTrust);
-    const isUserVerified = Boolean(userTrust?.isVerified());
     const isMe = member.userId === cli.getUserId();
-    const canVerify =
-        hasUserVerificationStatus &&
-        homeserverSupportsCrossSigning &&
-        !isUserVerified &&
-        !isMe &&
-        devices &&
-        devices.length > 0;
-
-    const setUpdating: SetUpdating = (updating) => {
-        setPendingUpdateCount((count) => count + (updating ? 1 : -1));
-    };
-    const hasCrossSigningKeys = useHasCrossSigningKeys(cli, member as User, canVerify, setUpdating);
-
-    // Display the spinner only when
-    // - the devices are not populated yet, or
-    // - the crypto is available and we don't have the user verification status yet
-    const showDeviceListSpinner = (cryptoEnabled && !hasUserVerificationStatus) || devices === undefined;
-    if (canVerify) {
-        if (hasCrossSigningKeys !== undefined) {
-            // Note: mx_UserInfo_verifyButton is for the end-to-end tests
-            verifyButton = (
-                <div className="mx_UserInfo_container_verifyButton">
-                    <AccessibleButton
-                        kind="link"
-                        className="mx_UserInfo_field mx_UserInfo_verifyButton"
-                        onClick={() => verifyUser(cli, member as User)}
-                    >
-                        {_t("action|verify")}
-                    </AccessibleButton>
-                </div>
-            );
-        } else if (!showDeviceListSpinner) {
-            // HACK: only show a spinner if the device section spinner is not shown,
-            // to avoid showing a double spinner
-            // We should ask for a design that includes all the different loading states here
-            verifyButton = <Spinner />;
-        }
-    }
-
-    let editDevices;
-    if (member.userId == cli.getUserId()) {
-        editDevices = (
-            <div>
-                <AccessibleButton
-                    kind="link"
-                    className="mx_UserInfo_field"
-                    onClick={() => {
-                        dis.dispatch({
-                            action: Action.ViewUserDeviceSettings,
-                        });
-                    }}
-                >
-                    {_t("user_info|edit_own_devices")}
-                </AccessibleButton>
-            </div>
-        );
-    }
-
-    const securitySection = (
-        <Container>
-            <h2>{_t("common|security")}</h2>
-            <p>{text}</p>
-            {verifyButton}
-            {cryptoEnabled && (
-                <DevicesSection
-                    loading={showDeviceListSpinner}
-                    devices={devices}
-                    userId={member.userId}
-                    isUserVerified={isUserVerified}
-                />
-            )}
-            {editDevices}
-        </Container>
-    );
 
     return (
         <React.Fragment>
-            {securitySection}
-
             <UserOptionsSection
                 canInvite={roomPermissions.canInvite}
                 member={member as RoomMember}
@@ -1615,15 +1313,12 @@ const BasicUserInfo: React.FC<{
             >
                 {memberDetails}
             </UserOptionsSection>
-
             {adminToolsContainer}
-
             {!isMe && (
                 <Container>
                     <IgnoreToggleButton member={member} />
                 </Container>
             )}
-
             {spinner}
         </React.Fragment>
     );
@@ -1633,9 +1328,10 @@ export type Member = User | RoomMember;
 
 export const UserInfoHeader: React.FC<{
     member: Member;
-    e2eStatus?: E2EStatus;
+    devices: IDevice[];
     roomId?: string;
-}> = ({ member, e2eStatus, roomId }) => {
+    hideVerificationSection?: boolean;
+}> = ({ member, devices, roomId, hideVerificationSection }) => {
     const cli = useContext(MatrixClientContext);
 
     const onMemberAvatarClick = useCallback(() => {
@@ -1686,7 +1382,6 @@ export const UserInfoHeader: React.FC<{
 
     const timezoneInfo = useUserTimezone(cli, member.userId);
 
-    const e2eIcon = e2eStatus ? <E2EIcon size={18} status={e2eStatus} isUser={true} /> : null;
     const userIdentifier = UserIdentifierCustomisations.getDisplayUserIdentifier?.(member.userId, {
         roomId,
         withDisplayName: true,
@@ -1715,7 +1410,6 @@ export const UserInfoHeader: React.FC<{
                     <Heading size="sm" weight="semibold" as="h1" dir="auto">
                         <Flex className="mx_UserInfo_profile_name" direction="row-reverse" align="center">
                             {displayName}
-                            {e2eIcon}
                         </Flex>
                     </Heading>
                     {presenceLabel}
@@ -1734,6 +1428,7 @@ export const UserInfoHeader: React.FC<{
                         </CopyableText>
                     </Text>
                 </Flex>
+                {!hideVerificationSection && <VerificationSection member={member} devices={devices} />}
             </Container>
         </React.Fragment>
     );
@@ -1757,13 +1452,6 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
     const isRoomEncrypted = useIsEncrypted(cli, room);
     const devices = useDevices(user.userId) ?? [];
 
-    const e2eStatus = useAsyncMemo(async () => {
-        if (!isRoomEncrypted || !devices) {
-            return undefined;
-        }
-        return await getE2EStatus(cli, user.userId, devices);
-    }, [cli, isRoomEncrypted, user.userId, devices]);
-
     const classes = ["mx_UserInfo"];
 
     let cardState: IRightPanelCardState = {};
@@ -1779,14 +1467,7 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
     let content: JSX.Element | undefined;
     switch (phase) {
         case RightPanelPhases.MemberInfo:
-            content = (
-                <BasicUserInfo
-                    room={room as Room}
-                    member={member as User}
-                    devices={devices}
-                    isRoomEncrypted={Boolean(isRoomEncrypted)}
-                />
-            );
+            content = <BasicUserInfo room={room as Room} member={member as User} />;
             break;
         case RightPanelPhases.EncryptionPanel:
             classes.push("mx_UserInfo_smallAvatar");
@@ -1811,7 +1492,12 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
 
     const header = (
         <>
-            <UserInfoHeader member={member} e2eStatus={e2eStatus} roomId={room?.roomId} />
+            <UserInfoHeader
+                hideVerificationSection={phase === RightPanelPhases.EncryptionPanel}
+                member={member}
+                devices={devices}
+                roomId={room?.roomId}
+            />
         </>
     );
 

src/components/views/rooms/LegacyRoomList.tsx

@@ -9,26 +9,26 @@ Please see LICENSE files in the repository root for full details.
 import { EventType, type Room, RoomType } from "matrix-js-sdk/src/matrix";
 import React, { type ComponentType, createRef, type ReactComponentElement, type SyntheticEvent } from "react";
 
-import { type IState as IRovingTabIndexState, RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
-import { Action } from "../../../dispatcher/actions";
-import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { type ActionPayload } from "../../../dispatcher/payloads";
-import { type ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload";
-import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { useEventEmitterState } from "../../../hooks/useEventEmitter";
-import { _t, _td, type TranslationKey } from "../../../languageHandler";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import PosthogTrackers from "../../../PosthogTrackers";
-import SettingsStore from "../../../settings/SettingsStore";
-import { useFeatureEnabled } from "../../../hooks/useSettings";
-import { UIComponent } from "../../../settings/UIFeature";
-import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
-import { type ITagMap } from "../../../stores/room-list/algorithms/models";
-import { DefaultTagID, type TagID } from "../../../stores/room-list/models";
-import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
+import { type IState as IRovingTabIndexState, RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex.tsx";
+import MatrixClientContext from "../../../contexts/MatrixClientContext.tsx";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents.ts";
+import { Action } from "../../../dispatcher/actions.ts";
+import defaultDispatcher from "../../../dispatcher/dispatcher.ts";
+import { type ActionPayload } from "../../../dispatcher/payloads.ts";
+import { type ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload.ts";
+import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload.ts";
+import { useEventEmitterState } from "../../../hooks/useEventEmitter.ts";
+import { _t, _td, type TranslationKey } from "../../../languageHandler.tsx";
+import { MatrixClientPeg } from "../../../MatrixClientPeg.ts";
+import PosthogTrackers from "../../../PosthogTrackers.ts";
+import SettingsStore from "../../../settings/SettingsStore.ts";
+import { useFeatureEnabled } from "../../../hooks/useSettings.ts";
+import { UIComponent } from "../../../settings/UIFeature.ts";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore.ts";
+import { type ITagMap } from "../../../stores/room-list/algorithms/models.ts";
+import { DefaultTagID, type TagID } from "../../../stores/room-list/models.ts";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore.ts";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore.ts";
 import {
     isMetaSpace,
     type ISuggestedRoom,
@@ -36,26 +36,36 @@ import {
     type SpaceKey,
     UPDATE_SELECTED_SPACE,
     UPDATE_SUGGESTED_ROOMS,
-} from "../../../stores/spaces";
-import SpaceStore from "../../../stores/spaces/SpaceStore";
-import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays";
-import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
-import type ResizeNotifier from "../../../utils/ResizeNotifier";
-import { shouldShowSpaceInvite, showAddExistingRooms, showCreateNewRoom, showSpaceInvite } from "../../../utils/space";
-import { ChevronFace, ContextMenuTooltipButton, type MenuProps, useContextMenu } from "../../structures/ContextMenu";
-import RoomAvatar from "../avatars/RoomAvatar";
-import { BetaPill } from "../beta/BetaCard";
+} from "../../../stores/spaces/index.ts";
+import SpaceStore from "../../../stores/spaces/SpaceStore.ts";
+import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays.ts";
+import { objectShallowClone, objectWithOnly } from "../../../utils/objects.ts";
+import type ResizeNotifier from "../../../utils/ResizeNotifier.ts";
+import {
+    shouldShowSpaceInvite,
+    showAddExistingRooms,
+    showCreateNewRoom,
+    showSpaceInvite,
+} from "../../../utils/space.tsx";
+import {
+    ChevronFace,
+    ContextMenuTooltipButton,
+    type MenuProps,
+    useContextMenu,
+} from "../../structures/ContextMenu.tsx";
+import RoomAvatar from "../avatars/RoomAvatar.tsx";
+import { BetaPill } from "../beta/BetaCard.tsx";
 import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
-} from "../context_menus/IconizedContextMenu";
-import ExtraTile from "./ExtraTile";
-import RoomSublist, { type IAuxButtonProps } from "./RoomSublist";
-import { SdkContextClass } from "../../../contexts/SDKContext";
-import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
-import { getKeyBindingsManager } from "../../../KeyBindingsManager";
-import AccessibleButton from "../elements/AccessibleButton";
-import { Landmark, LandmarkNavigation } from "../../../accessibility/LandmarkNavigation";
+} from "../context_menus/IconizedContextMenu.tsx";
+import ExtraTile from "./ExtraTile.tsx";
+import RoomSublist, { type IAuxButtonProps } from "./RoomSublist.tsx";
+import { SdkContextClass } from "../../../contexts/SDKContext.ts";
+import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts.ts";
+import { getKeyBindingsManager } from "../../../KeyBindingsManager.ts";
+import AccessibleButton from "../elements/AccessibleButton.tsx";
+import { Landmark, LandmarkNavigation } from "../../../accessibility/LandmarkNavigation.ts";
 import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../LegacyCallHandler.tsx";
 
 interface IProps {
@@ -420,7 +430,7 @@ const TAG_AESTHETICS: TagAestheticsMap = {
     },
 };
 
-export default class RoomList extends React.PureComponent<IProps, IState> {
+export default class LegacyRoomList extends React.PureComponent<IProps, IState> {
     private dispatcherRef?: string;
     private treeRef = createRef<HTMLDivElement>();
 

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

@@ -0,0 +1,69 @@
+/*
+ * 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 } from "react";
+import { Button } from "@vector-im/compound-web";
+import ExploreIcon from "@vector-im/compound-design-tokens/assets/web/icons/explore";
+import SearchIcon from "@vector-im/compound-design-tokens/assets/web/icons/search";
+
+import { IS_MAC, Key } from "../../../../Keyboard";
+import { _t } from "../../../../languageHandler";
+import { ALTERNATE_KEY_NAME } from "../../../../accessibility/KeyboardShortcuts";
+import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../../settings/UIFeature";
+import { MetaSpace } from "../../../../stores/spaces";
+import { Action } from "../../../../dispatcher/actions";
+import PosthogTrackers from "../../../../PosthogTrackers";
+import defaultDispatcher from "../../../../dispatcher/dispatcher";
+import { Flex } from "../../../utils/Flex";
+
+type RoomListSearchProps = {
+    /**
+     * Current active space
+     * The explore button is only displayed in the Home meta space
+     */
+    activeSpace: string;
+};
+
+/**
+ * A search component to be displayed at the top of the room list
+ * The `Explore` button is displayed only in the Home meta space and when UIComponent.ExploreRooms is enabled.
+ */
+export function RoomListSearch({ activeSpace }: RoomListSearchProps): JSX.Element {
+    const displayExploreButton = activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms);
+
+    return (
+        <Flex className="mx_RoomListSearch" role="search" gap="var(--cpd-space-2x)" align="center">
+            <Button
+                className="mx_RoomListSearch_search"
+                kind="secondary"
+                size="sm"
+                Icon={SearchIcon}
+                onClick={() => defaultDispatcher.fire(Action.OpenSpotlight)}
+            >
+                <Flex as="span" justify="space-between">
+                    {_t("action|search")}
+                    <kbd>{IS_MAC ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K"}</kbd>
+                </Flex>
+            </Button>
+            {displayExploreButton && (
+                <Button
+                    className="mx_RoomListSearch_explore"
+                    kind="secondary"
+                    size="sm"
+                    Icon={ExploreIcon}
+                    iconOnly={true}
+                    aria-label={_t("action|explore_rooms")}
+                    onClick={(ev) => {
+                        defaultDispatcher.fire(Action.ViewRoomDirectory);
+                        PosthogTrackers.trackInteraction("WebLeftPanelExploreRoomsButton", ev);
+                    }}
+                />
+            )}
+        </Flex>
+    );
+}

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

@@ -0,0 +1,33 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+
+import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../../settings/UIFeature";
+import { RoomListSearch } from "./RoomListSearch";
+
+type RoomListViewProps = {
+    /**
+     * Current active space
+     * See {@link RoomListSearch}
+     */
+    activeSpace: string;
+};
+
+/**
+ * A view component for the room list.
+ */
+export const RoomListView: React.FC<RoomListViewProps> = ({ activeSpace }) => {
+    const displayRoomSearch = shouldShowComponent(UIComponent.FilterContainer);
+
+    return (
+        <div className="mx_RoomListView" data-testid="room-list-view">
+            {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
+        </div>
+    );
+};

src/components/views/rooms/RoomListView/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { RoomListView } from "./RoomListView";

src/components/views/settings/encryption/ChangeRecoveryKey.tsx

@@ -19,14 +19,16 @@ import {
 } from "@vector-im/compound-web";
 import CopyIcon from "@vector-im/compound-design-tokens/assets/web/icons/copy";
 import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
-import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../../languageHandler";
 import { EncryptionCard } from "./EncryptionCard";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
 import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
 import { copyPlaintext } from "../../../../utils/strings";
+import { initialiseDehydrationIfEnabled } from "../../../../utils/device/dehydration.ts";
 import { withSecretStorageKeyCache } from "../../../../SecurityManager";
+import { EncryptionCardButtons } from "./EncryptionCardButtons";
+import { logErrorAndShowErrorDialog } from "../../../../utils/ErrorUtils.tsx";
 
 /**
  * The possible states of the component.
@@ -122,15 +124,16 @@ export function ChangeRecoveryKey({
                         try {
                             // We need to enable the cache to avoid to prompt the user to enter the new key
                             // when we will try to access the secret storage during the bootstrap
-                            await withSecretStorageKeyCache(() =>
-                                crypto.bootstrapSecretStorage({
+                            await withSecretStorageKeyCache(async () => {
+                                await crypto.bootstrapSecretStorage({
                                     setupNewSecretStorage: true,
                                     createSecretStorageKey: async () => recoveryKey,
-                                }),
-                            );
+                                });
+                                await initialiseDehydrationIfEnabled(matrixClient, { createNewKey: true });
+                            });
                             onFinish();
                         } catch (e) {
-                            logger.error("Failed to bootstrap secret storage", e);
+                            logErrorAndShowErrorDialog("Failed to set up secret storage", e);
                         }
                     }}
                     submitButtonLabel={
@@ -237,12 +240,12 @@ function InformationPanel({ onContinueClick, onCancelClick }: InformationPanelPr
             <Text as="span" weight="medium" className="mx_InformationPanel_description">
                 {_t("settings|encryption|recovery|set_up_recovery_secondary_description")}
             </Text>
-            <div className="mx_ChangeRecoveryKey_footer">
+            <EncryptionCardButtons>
                 <Button onClick={onContinueClick}>{_t("action|continue")}</Button>
                 <Button kind="tertiary" onClick={onCancelClick}>
                     {_t("action|cancel")}
                 </Button>
-            </div>
+            </EncryptionCardButtons>
         </>
     );
 }
@@ -284,12 +287,12 @@ function KeyPanel({ recoveryKey, onConfirmClick, onCancelClick }: KeyPanelProps)
                     <CopyIcon />
                 </IconButton>
             </div>
-            <div className="mx_ChangeRecoveryKey_footer">
+            <EncryptionCardButtons>
                 <Button onClick={onConfirmClick}>{_t("action|continue")}</Button>
                 <Button kind="tertiary" onClick={onCancelClick}>
                     {_t("action|cancel")}
                 </Button>
-            </div>
+            </EncryptionCardButtons>
         </>
     );
 }
@@ -347,12 +350,12 @@ function KeyForm({ onCancelClick, onSubmit, recoveryKey, submitButtonLabel }: Ke
                     <ErrorMessage>{_t("settings|encryption|recovery|enter_key_error")}</ErrorMessage>
                 )}
             </Field>
-            <div className="mx_ChangeRecoveryKey_footer">
+            <EncryptionCardButtons>
                 <Button disabled={!isKeyValid}>{submitButtonLabel}</Button>
                 <Button kind="tertiary" onClick={onCancelClick}>
                     {_t("action|cancel")}
                 </Button>
-            </div>
+            </EncryptionCardButtons>
         </Root>
     );
 }

src/components/views/settings/encryption/DeleteKeyStoragePanel.tsx

@@ -1,78 +0,0 @@
-/*
- * Copyright 2025 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import { Breadcrumb, Button, VisualList, VisualListItem } from "@vector-im/compound-web";
-import CrossIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
-import React, { useCallback, useState } from "react";
-
-import { _t } from "../../../../languageHandler";
-import { EncryptionCard } from "./EncryptionCard";
-import { useKeyStoragePanelViewModel } from "../../../viewmodels/settings/encryption/KeyStoragePanelViewModel";
-import SdkConfig from "../../../../SdkConfig";
-
-interface Props {
-    /**
-     * Called when the user either cancels the operation or key storage has been disabled
-     */
-    onFinish: () => void;
-}
-
-/**
- * Confirms that the user really wants to turn off and delete their key storage
- */
-export function DeleteKeyStoragePanel({ onFinish }: Props): JSX.Element {
-    const { setEnabled } = useKeyStoragePanelViewModel();
-    const [busy, setBusy] = useState(false);
-
-    const onDeleteClick = useCallback(async () => {
-        setBusy(true);
-        try {
-            await setEnabled(false);
-        } finally {
-            setBusy(false);
-        }
-        onFinish();
-    }, [setEnabled, onFinish]);
-
-    return (
-        <>
-            <Breadcrumb
-                backLabel={_t("action|back")}
-                onBackClick={onFinish}
-                pages={[_t("settings|encryption|title"), _t("settings|encryption|delete_key_storage|breadcrumb_page")]}
-                onPageClick={onFinish}
-            />
-            <EncryptionCard
-                Icon={ErrorIcon}
-                destructive={true}
-                title={_t("settings|encryption|delete_key_storage|title")}
-                className="mx_DestructiveComponent"
-            >
-                <div className="mx_DestructiveComponent_content">
-                    {_t("settings|encryption|delete_key_storage|description")}
-                    <VisualList>
-                        <VisualListItem Icon={CrossIcon} destructive={true}>
-                            {_t("settings|encryption|delete_key_storage|list_first")}
-                        </VisualListItem>
-                        <VisualListItem Icon={CrossIcon} destructive={true}>
-                            {_t("settings|encryption|delete_key_storage|list_second", { brand: SdkConfig.get().brand })}
-                        </VisualListItem>
-                    </VisualList>
-                </div>
-                <div className="mx_DestructiveComponent_footer">
-                    <Button destructive={true} onClick={onDeleteClick} disabled={busy}>
-                        {_t("settings|encryption|delete_key_storage|confirm")}
-                    </Button>
-                    <Button kind="tertiary" onClick={onFinish}>
-                        {_t("action|cancel")}
-                    </Button>
-                </div>
-            </EncryptionCard>
-        </>
-    );
-}

src/components/views/settings/encryption/EncryptionCardButtons.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type PropsWithChildren } from "react";
+
+/**
+ * A component to present action buttons at the bottom of an {@link EncryptionCard}
+ * (mostly as somewhere for the common CSS to live).
+ */
+export function EncryptionCardButtons({ children }: PropsWithChildren): JSX.Element {
+    return <div className="mx_EncryptionCard_buttons">{children}</div>;
+}

src/components/views/settings/encryption/KeyStoragePanel.tsx

@@ -1,73 +0,0 @@
-/*
- * Copyright 2025 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import React, { useCallback } from "react";
-import { InlineField, InlineSpinner, Label, Root, ToggleControl } from "@vector-im/compound-web";
-
-import type { FormEvent } from "react";
-import { SettingsSection } from "../shared/SettingsSection";
-import { _t } from "../../../../languageHandler";
-import { SettingsHeader } from "../SettingsHeader";
-import { useKeyStoragePanelViewModel } from "../../../viewmodels/settings/encryption/KeyStoragePanelViewModel";
-
-interface Props {
-    /**
-     * Called when the user turns off the "allow key storage" toggle
-     */
-    onKeyStorageDisableClick: () => void;
-}
-
-/**
- * This component allows the user to set up or change their recovery key.
- */
-export const KeyStoragePanel: React.FC<Props> = ({ onKeyStorageDisableClick }) => {
-    const { isEnabled, setEnabled, loading, busy } = useKeyStoragePanelViewModel();
-
-    const onKeyBackupChange = useCallback(
-        (e: FormEvent<HTMLInputElement>) => {
-            if (e.currentTarget.checked) {
-                setEnabled(true);
-            } else {
-                onKeyStorageDisableClick();
-            }
-        },
-        [setEnabled, onKeyStorageDisableClick],
-    );
-
-    if (loading) {
-        return <InlineSpinner aria-label={_t("common|loading")} />;
-    }
-
-    return (
-        <SettingsSection
-            legacy={false}
-            heading={
-                <SettingsHeader
-                    hasRecommendedTag={isEnabled === false}
-                    label={_t("settings|encryption|key_storage|title")}
-                />
-            }
-            subHeading={_t("settings|encryption|key_storage|description", undefined, {
-                a: (sub) => (
-                    <a href="https://element.io/help#encryption5" target="_blank" rel="noreferrer noopener">
-                        {sub}
-                    </a>
-                ),
-            })}
-        >
-            <Root className="mx_KeyBackupPanel_toggleRow">
-                <InlineField
-                    name="keyStorage"
-                    control={<ToggleControl name="keyStorage" checked={isEnabled} onChange={onKeyBackupChange} />}
-                >
-                    <Label>{_t("settings|encryption|key_storage|allow_key_storage")}</Label>
-                </InlineField>
-                {busy && <InlineSpinner />}
-            </Root>
-        </SettingsSection>
-    );
-};

src/components/views/settings/encryption/ResetIdentityPanel.tsx

@@ -15,6 +15,7 @@ import { _t } from "../../../../languageHandler";
 import { EncryptionCard } from "./EncryptionCard";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
 import { uiAuthCallback } from "../../../../CreateCrossSigning";
+import { EncryptionCardButtons } from "./EncryptionCardButtons";
 
 interface ResetIdentityPanelProps {
     /**
@@ -58,9 +59,9 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
                         ? _t("settings|encryption|advanced|breadcrumb_title_forgot")
                         : _t("settings|encryption|advanced|breadcrumb_title")
                 }
-                className="mx_DestructiveComponent"
+                className="mx_ResetIdentityPanel"
             >
-                <div className="mx_DestructiveComponent_content">
+                <div className="mx_ResetIdentityPanel_content">
                     <VisualList>
                         <VisualListItem Icon={CheckIcon} success={true}>
                             {_t("settings|encryption|advanced|breadcrumb_first_description")}
@@ -74,7 +75,7 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
                     </VisualList>
                     {variant === "compromised" && <span>{_t("settings|encryption|advanced|breadcrumb_warning")}</span>}
                 </div>
-                <div className="mx_DestructiveComponent_footer">
+                <EncryptionCardButtons>
                     <Button
                         destructive={true}
                         onClick={async (evt) => {
@@ -89,7 +90,7 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
                     <Button kind="tertiary" onClick={onCancelClick}>
                         {_t("action|cancel")}
                     </Button>
-                </div>
+                </EncryptionCardButtons>
             </EncryptionCard>
         </>
     );

src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx

@@ -8,9 +8,7 @@
 import React, { type JSX, useCallback, useEffect, useState } from "react";
 import { Button, InlineSpinner, Separator } from "@vector-im/compound-web";
 import ComputerIcon from "@vector-im/compound-design-tokens/assets/web/icons/computer";
-import { ClientEvent } from "matrix-js-sdk/src/matrix";
 
-import type { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import SettingsTab from "../SettingsTab";
 import { RecoveryPanel } from "../../encryption/RecoveryPanel";
 import { ChangeRecoveryKey } from "../../encryption/ChangeRecoveryKey";
@@ -23,9 +21,6 @@ import { SettingsSubheader } from "../../SettingsSubheader";
 import { AdvancedPanel } from "../../encryption/AdvancedPanel";
 import { ResetIdentityPanel } from "../../encryption/ResetIdentityPanel";
 import { RecoveryPanelOutOfSync } from "../../encryption/RecoveryPanelOutOfSync";
-import { useTypedEventEmitter } from "../../../../../hooks/useEventEmitter";
-import { KeyStoragePanel } from "../../encryption/KeyStoragePanel";
-import { DeleteKeyStoragePanel } from "../../encryption/DeleteKeyStoragePanel";
 
 /**
  * The state in the encryption settings tab.
@@ -39,10 +34,8 @@ import { DeleteKeyStoragePanel } from "../../encryption/DeleteKeyStoragePanel";
  *                        This happens when the user doesn't have a key a recovery key and the user clicks on "Set up recovery key" button of the RecoveryPanel.
  *  - "reset_identity_compromised": The panel to show when the user is resetting their identity, in te case where their key is compromised.
  * - "reset_identity_forgot": The panel to show when the user is resetting their identity, in the case where they forgot their recovery key.
- * - "secrets_not_cached": The secrets are not cached locally. This can happen if we verified another device and secret-gossiping failed, or the other device itself lacked the secrets.
+ * - `secrets_not_cached`: The secrets are not cached locally. This can happen if we verified another device and secret-gossiping failed, or the other device itself lacked the secrets.
  *                          If the "set_up_encryption" and "secrets_not_cached" conditions are both filled, "set_up_encryption" prevails.
- * - "key_storage_delete": The confirmation page asking if the user realy wants to turn off key storage
- * - "key_storage_disabled": The user has chosen to disable key storage and options are unavailable as a result.
  */
 export type State =
     | "loading"
@@ -52,9 +45,7 @@ export type State =
     | "set_recovery_key"
     | "reset_identity_compromised"
     | "reset_identity_forgot"
-    | "secrets_not_cached"
-    | "key_storage_delete"
-    | "key_storage_disabled";
+    | "secrets_not_cached";
 
 interface EncryptionUserSettingsTabProps {
     /**
@@ -72,7 +63,6 @@ export function EncryptionUserSettingsTab({ initialState = "loading" }: Encrypti
     const checkEncryptionState = useCheckEncryptionState(state, setState);
 
     let content: JSX.Element;
-
     switch (state) {
         case "loading":
             content = <InlineSpinner aria-label={_t("common|loading")} />;
@@ -88,23 +78,16 @@ export function EncryptionUserSettingsTab({ initialState = "loading" }: Encrypti
                 />
             );
             break;
-        case "key_storage_disabled":
         case "main":
             content = (
                 <>
-                    <KeyStoragePanel onKeyStorageDisableClick={() => setState("key_storage_delete")} />
+                    <RecoveryPanel
+                        onChangeRecoveryKeyClick={(setupNewKey) =>
+                            setupNewKey ? setState("set_recovery_key") : setState("change_recovery_key")
+                        }
+                    />
                     <Separator kind="section" />
-                    {state === "main" && (
-                        <>
-                            <RecoveryPanel
-                                onChangeRecoveryKeyClick={(setupNewKey) =>
-                                    setupNewKey ? setState("set_recovery_key") : setState("change_recovery_key")
-                                }
-                            />
-                            <Separator kind="section" />
-                        </>
-                    )}
-                    <AdvancedPanel onResetIdentityClick={() => setState("reset_identity_compromised")} />{" "}
+                    <AdvancedPanel onResetIdentityClick={() => setState("reset_identity_compromised")} />
                 </>
             );
             break;
@@ -128,9 +111,6 @@ export function EncryptionUserSettingsTab({ initialState = "loading" }: Encrypti
                 />
             );
             break;
-        case "key_storage_delete":
-            content = <DeleteKeyStoragePanel onFinish={() => setState("main")} />;
-            break;
     }
 
     return (
@@ -144,7 +124,6 @@ export function EncryptionUserSettingsTab({ initialState = "loading" }: Encrypti
  * Hook to check if the user needs:
  * - to go through the SetupEncryption flow.
  * - to enter their recovery key, if the secrets are not cached locally.
- * ...and also whether key backup is enabled.
  *
  * If the user needs to set up the encryption, the state will be set to "set_up_encryption".
  * If the user secrets are not cached, the state will be set to "secrets_not_cached".
@@ -167,14 +146,8 @@ function useCheckEncryptionState(state: State, setState: (state: State) => void)
         const cachedSecrets = (await crypto.getCrossSigningStatus()).privateKeysCachedLocally;
         const secretsOk = cachedSecrets.masterKey && cachedSecrets.selfSigningKey && cachedSecrets.userSigningKey;
 
-        // Also check the key backup status
-        const backupInfo = await crypto.getKeyBackupInfo();
-
-        const keyStorageEnabled = Boolean(backupInfo?.version);
-
-        if (isCrossSigningReady && keyStorageEnabled && secretsOk) setState("main");
+        if (isCrossSigningReady && secretsOk) setState("main");
         else if (!isCrossSigningReady) setState("set_up_encryption");
-        else if (!keyStorageEnabled) setState("key_storage_disabled");
         else setState("secrets_not_cached");
     }, [matrixClient, setState]);
 
@@ -183,14 +156,6 @@ function useCheckEncryptionState(state: State, setState: (state: State) => void)
         if (state === "loading") checkEncryptionState();
     }, [checkEncryptionState, state]);
 
-    useTypedEventEmitter(matrixClient, ClientEvent.AccountData, (event: MatrixEvent): void => {
-        const type = event.getType();
-        // Recheck the status if this account data has been updated as this implies it has changed
-        if (type === "m.org.matrix.custom.backup_disabled") {
-            checkEncryptionState();
-        }
-    });
-
     // Also return the callback so that the component can re-run the logic.
     return checkEncryptionState;
 }

src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

@@ -72,6 +72,9 @@ const SidebarUserSettingsTab: React.FC = () => {
         PosthogTrackers.trackInteraction("WebSettingsSidebarTabSpacesCheckbox", event, 1);
     };
 
+    // "Favourites" and "People" meta spaces are not available in the new room list
+    const newRoomListEnabled = useSettingValue("feature_new_room_list");
+
     return (
         <SettingsTab>
             <SettingsSection>
@@ -109,33 +112,43 @@ const SidebarUserSettingsTab: React.FC = () => {
                         </SettingsSubsectionText>
                     </StyledCheckbox>
 
-                    <StyledCheckbox
-                        checked={!!favouritesEnabled}
-                        onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites, "WebSettingsSidebarTabSpacesCheckbox")}
-                        className="mx_SidebarUserSettingsTab_checkbox"
-                    >
-                        <SettingsSubsectionText>
-                            <FavouriteSolidIcon />
-                            {_t("common|favourites")}
-                        </SettingsSubsectionText>
-                        <SettingsSubsectionText>
-                            {_t("settings|sidebar|metaspaces_favourites_description")}
-                        </SettingsSubsectionText>
-                    </StyledCheckbox>
+                    {!newRoomListEnabled && (
+                        <>
+                            <StyledCheckbox
+                                checked={!!favouritesEnabled}
+                                onChange={onMetaSpaceChangeFactory(
+                                    MetaSpace.Favourites,
+                                    "WebSettingsSidebarTabSpacesCheckbox",
+                                )}
+                                className="mx_SidebarUserSettingsTab_checkbox"
+                            >
+                                <SettingsSubsectionText>
+                                    <FavouriteSolidIcon />
+                                    {_t("common|favourites")}
+                                </SettingsSubsectionText>
+                                <SettingsSubsectionText>
+                                    {_t("settings|sidebar|metaspaces_favourites_description")}
+                                </SettingsSubsectionText>
+                            </StyledCheckbox>
 
-                    <StyledCheckbox
-                        checked={!!peopleEnabled}
-                        onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebSettingsSidebarTabSpacesCheckbox")}
-                        className="mx_SidebarUserSettingsTab_checkbox"
-                    >
-                        <SettingsSubsectionText>
-                            <UserProfileSolidIcon />
-                            {_t("common|people")}
-                        </SettingsSubsectionText>
-                        <SettingsSubsectionText>
-                            {_t("settings|sidebar|metaspaces_people_description")}
-                        </SettingsSubsectionText>
-                    </StyledCheckbox>
+                            <StyledCheckbox
+                                checked={!!peopleEnabled}
+                                onChange={onMetaSpaceChangeFactory(
+                                    MetaSpace.People,
+                                    "WebSettingsSidebarTabSpacesCheckbox",
+                                )}
+                                className="mx_SidebarUserSettingsTab_checkbox"
+                            >
+                                <SettingsSubsectionText>
+                                    <UserProfileSolidIcon />
+                                    {_t("common|people")}
+                                </SettingsSubsectionText>
+                                <SettingsSubsectionText>
+                                    {_t("settings|sidebar|metaspaces_people_description")}
+                                </SettingsSubsectionText>
+                            </StyledCheckbox>
+                        </>
+                    )}
 
                     <StyledCheckbox
                         checked={!!orphansEnabled}