Cache the key backup status whether enabled or not

* respect UIFeature.Voip

* Add unit tests

* reset sdk and mocks

* Update RoomHeader-test.tsx.snap

* use useSettingValue

* lint

.eslintrc.js

@@ -30,6 +30,10 @@ module.exports = {
                 ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
                 "Use UIStore to access window dimensions instead.",
             ),
+            ...buildRestrictedPropertiesOptions(
+                ["React.forwardRef", "*.forwardRef", "forwardRef"],
+                "Use ref props instead.",
+            ),
             ...buildRestrictedPropertiesOptions(
                 ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
                 "Use Media helper instead to centralise access for customisation.",
@@ -55,6 +59,11 @@ module.exports = {
             "error",
             {
                 paths: [
+                    {
+                        name: "react",
+                        importNames: ["forwardRef"],
+                        message: "Use ref props instead.",
+                    },
                     {
                         name: "@testing-library/react",
                         message: "Please use jest-matrix-react instead",

.github/workflows/docker.yaml

@@ -132,7 +132,7 @@ jobs:
                   cosign sign --yes ${images}
 
             - name: Update repo description
-              uses: peter-evans/dockerhub-description@0505d8b04853a30189aee66f5bb7fd1511bbac71 # v4
+              uses: peter-evans/dockerhub-description@432a30c9e07499fd01da9f8a49f0faf9e0ca5b77 # v4
               if: github.event_name != 'pull_request'
               continue-on-error: true
               with:

.github/workflows/release_prepare.yml

@@ -100,7 +100,7 @@ jobs:
                   repo: matrix-org/matrix-js-sdk
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: draft
+                  check-name: "draft / draft"
                   allowed-conclusions: success
 
             - name: Wait for element-web draft
@@ -111,7 +111,7 @@ jobs:
                   repo: element-hq/element-web
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: draft
+                  check-name: "draft / draft"
                   allowed-conclusions: success
 
             - name: Wait for element-desktop draft
@@ -122,5 +122,5 @@ jobs:
                   repo: element-hq/element-desktop
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: draft
+                  check-name: "draft / draft"
                   allowed-conclusions: success

.github/workflows/tests.yml

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

.github/workflows/triage-assigned.yml

@@ -11,7 +11,8 @@ jobs:
         runs-on: ubuntu-24.04
         if: |
             contains(github.event.issue.assignees.*.login, 't3chguy') ||
-            contains(github.event.issue.assignees.*.login, 'andybalaam') ||
+            contains(github.event.issue.assignees.*.login, 'florianduros') ||
+            contains(github.event.issue.assignees.*.login, 'dbkr') ||
             contains(github.event.issue.assignees.*.login, 'MidhunSureshR')
         steps:
             - uses: actions/add-to-project@main

.gitignore

@@ -25,7 +25,6 @@ electron/pub
 .env
 /coverage
 # Auto-generated file
-/src/modules.ts
 /src/modules.js
 /build_config.yaml
 /book

CHANGELOG.md

@@ -1,3 +1,39 @@
+Changes in [1.11.99](https://github.com/element-hq/element-web/releases/tag/v1.11.99) (2025-04-23)
+==================================================================================================
+No changes, just bumping the version to accommodate a new Element Desktop release
+
+Changes in [1.11.98](https://github.com/element-hq/element-web/releases/tag/v1.11.98) (2025-04-22)
+==================================================================================================
+## ✨ Features
+
+* print better errors in the search view instead of a blocking modal ([#29724](https://github.com/element-hq/element-web/pull/29724)). Contributed by @Jujure.
+* New room list: video room and video call decoration  ([#29693](https://github.com/element-hq/element-web/pull/29693)). Contributed by @florianduros.
+* Remove Secure Backup, Cross-signing and Cryptography sections in `Security & Privacy` user settings ([#29088](https://github.com/element-hq/element-web/pull/29088)). Contributed by @florianduros.
+* Allow reporting a room when rejecting an invite. ([#29570](https://github.com/element-hq/element-web/pull/29570)). Contributed by @Half-Shot.
+* RoomListViewModel: Reset primary and secondary filters on space change ([#29672](https://github.com/element-hq/element-web/pull/29672)). Contributed by @MidhunSureshR.
+* RoomListStore: Support specific sorting requirements for muted rooms ([#29665](https://github.com/element-hq/element-web/pull/29665)). Contributed by @MidhunSureshR.
+* New room list: add notification options menu ([#29639](https://github.com/element-hq/element-web/pull/29639)). Contributed by @florianduros.
+* Room List: Scroll to top of the list when active room is not in the list ([#29650](https://github.com/element-hq/element-web/pull/29650)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* Fix unwanted form submit behaviour in memberlist ([#29747](https://github.com/element-hq/element-web/pull/29747)). Contributed by @MidhunSureshR.
+* New room list: fix public room icon visibility when filter change ([#29737](https://github.com/element-hq/element-web/pull/29737)). Contributed by @florianduros.
+* Fix custom theme support for short hex \& rgba hex strings ([#29726](https://github.com/element-hq/element-web/pull/29726)). Contributed by @t3chguy.
+* New room list: minor visual fixes ([#29723](https://github.com/element-hq/element-web/pull/29723)). Contributed by @florianduros.
+* Fix getOidcCallbackUrl for Element Desktop ([#29711](https://github.com/element-hq/element-web/pull/29711)). Contributed by @t3chguy.
+* Fix some webp images improperly marked as animated ([#29713](https://github.com/element-hq/element-web/pull/29713)). Contributed by @Petersmit27.
+* Revert deletion of hydrateSession ([#29703](https://github.com/element-hq/element-web/pull/29703)). Contributed by @Jujure.
+* Fix converttoroom \& converttodm not working ([#29705](https://github.com/element-hq/element-web/pull/29705)). Contributed by @t3chguy.
+* Ensure forceCloseAllModals also closes priority/static modals ([#29706](https://github.com/element-hq/element-web/pull/29706)). Contributed by @t3chguy.
+* Continue button is disabled when uploading a recovery key file ([#29695](https://github.com/element-hq/element-web/pull/29695)). Contributed by @Giwayume.
+* Catch errors after syncing recovery ([#29691](https://github.com/element-hq/element-web/pull/29691)). Contributed by @andybalaam.
+* New room list: fix multiple visual issues ([#29673](https://github.com/element-hq/element-web/pull/29673)). Contributed by @florianduros.
+* New Room List: Fix mentions filter matching rooms with any highlight ([#29668](https://github.com/element-hq/element-web/pull/29668)). Contributed by @MidhunSureshR.
+*  Fix truncated emoji label during emoji SAS ([#29643](https://github.com/element-hq/element-web/pull/29643)). Contributed by @florianduros.
+* Remove duplicate jitsi link ([#29642](https://github.com/element-hq/element-web/pull/29642)). Contributed by @dbkr.
+
+
 Changes in [1.11.97](https://github.com/element-hq/element-web/releases/tag/v1.11.97) (2025-04-08)
 ==================================================================================================
 ## ✨ Features

Dockerfile

@@ -1,4 +1,4 @@
-# syntax=docker.io/docker/dockerfile:1.14-labs
+# syntax=docker.io/docker/dockerfile:1.15-labs
 
 # Builder
 FROM --platform=$BUILDPLATFORM node:22-bullseye AS builder

docs/labs.md

@@ -101,10 +101,6 @@ Under the hood this stops Element Web from adding the `perParticipantE2EE` flag
 
 This is useful while we experiment with encryption and to make calling compatible with platforms that don't use encryption yet.
 
-## Rich text in room topics (`feature_html_topic`) [In Development]
-
-Enables rendering of MD / HTML in room topics.
-
 ## Enable the notifications panel in the room header (`feature_notifications`)
 
 Unreliable in encrypted rooms.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.97",
+    "version": "1.11.99",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -68,14 +68,14 @@
         "postinstall": "patch-package"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.0.0",
-        "@playwright/test": "1.51.1",
-        "@types/react": "19.0.10",
-        "@types/react-dom": "19.0.4",
+        "**/pretty-format/react-is": "19.1.0",
+        "@playwright/test": "1.52.0",
+        "@types/react": "19.1.2",
+        "@types/react-dom": "19.1.2",
         "oidc-client-ts": "3.2.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001707",
-        "testcontainers": "10.23.0",
+        "caniuse-lite": "1.0.30001715",
+        "testcontainers": "10.24.2",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
@@ -86,14 +86,14 @@
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
         "@matrix-org/analytics-events": "^0.29.2",
-        "@matrix-org/emojibase-bindings": "^1.4.0",
+        "@matrix-org/emojibase-bindings": "^1.3.4",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^9.0.0",
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^4.0.0",
-        "@vector-im/compound-web": "^7.10.1",
+        "@vector-im/compound-web": "^7.10.2",
         "@vector-im/matrix-wysiwyg": "2.38.3",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
@@ -109,7 +109,7 @@
         "diff-dom": "^5.0.0",
         "diff-match-patch": "^1.0.5",
         "domutils": "^3.2.2",
-        "emojibase-regex": "16.0.0",
+        "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
         "filesize": "10.1.6",
@@ -138,7 +138,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.157.2",
+        "posthog-js": "1.236.7",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -151,7 +151,7 @@
         "react-virtualized": "^9.22.5",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.15.0",
+        "sanitize-html": "2.16.0",
         "tar-js": "^0.3.0",
         "temporal-polyfill": "^0.3.0",
         "ua-parser-js": "^1.0.2",
@@ -180,13 +180,14 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.9.0",
+        "@element-hq/element-call-embedded": "0.10.0",
         "@element-hq/element-web-playwright-common": "^1.1.5",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
+        "@rrweb/types": "^2.0.0-alpha.18",
         "@sentry/webpack-plugin": "^3.0.0",
-        "@stylistic/eslint-plugin": "^3.0.0",
+        "@stylistic/eslint-plugin": "^4.0.0",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
@@ -211,9 +212,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.0.10",
+        "@types/react": "19.1.2",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.0.4",
+        "@types/react-dom": "19.1.2",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.15.0",
         "@types/semver": "^7.5.8",
@@ -246,7 +247,7 @@
         "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-unicorn": "^56.0.0",
-        "express": "^4.18.2",
+        "express": "^5.0.0",
         "fake-indexeddb": "^6.0.0",
         "fetch-mock": "9.11.0",
         "fetch-mock-jest": "^1.5.1",
@@ -286,13 +287,13 @@
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
         "stylelint": "^16.13.0",
-        "stylelint-config-standard": "^37.0.0",
+        "stylelint-config-standard": "^38.0.0",
         "stylelint-scss": "^6.0.0",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
         "testcontainers": "^10.20.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.8.2",
+        "typescript": "5.8.3",
         "util": "^0.12.5",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",

playwright/e2e/crypto/dehydration.spec.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { test, expect } from "../../element-web-test";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { completeCreateSecretStorageDialog, createBot, logIntoElement } from "./utils.ts";
+import { createBot, logIntoElement } from "./utils.ts";
 import { type Client } from "../../pages/client.ts";
 import { type ElementAppPage } from "../../pages/ElementAppPage.ts";
 
@@ -28,21 +28,27 @@ test.describe("Dehydration", () => {
     test.skip(isDendrite, "does not yet support dehydration v2");
 
     test("Verify device and reset creates dehydrated device", async ({ page, user, credentials, app }, workerInfo) => {
-        // Verify the device by resetting the key (which will create SSSS, and dehydrated device)
+        // Verify the device by resetting the identity key, and then set up recovery (which will create SSSS, and dehydrated device)
 
         const securityTab = await app.settings.openUserSettings("Security & Privacy");
         await expect(securityTab.getByText("Offline device enabled")).not.toBeVisible();
 
         await app.closeDialog();
 
-        // Verify the device by resetting the key
+        // Reset the identity key
         const settings = await app.settings.openUserSettings("Encryption");
         await settings.getByRole("button", { name: "Verify this device" }).click();
         await page.getByRole("button", { name: "Proceed with reset" }).click();
         await page.getByRole("button", { name: "Continue" }).click();
-        await page.getByRole("button", { name: "Copy" }).click();
+
+        // Set up recovery
+        await page.getByRole("button", { name: "Set up recovery" }).click();
         await page.getByRole("button", { name: "Continue" }).click();
-        await page.getByRole("button", { name: "Done" }).click();
+        const recoveryKey = await page.getByTestId("recoveryKey").innerText();
+        await page.getByRole("button", { name: "Continue" }).click();
+        await page.getByRole("textbox").fill(recoveryKey);
+        await page.getByRole("button", { name: "Finish set up" }).click();
+        await page.getByRole("button", { name: "Close" }).click();
 
         await expectDehydratedDeviceEnabled(app);
 
@@ -80,7 +86,7 @@ test.describe("Dehydration", () => {
         await expectDehydratedDeviceEnabled(app);
     });
 
-    test("Reset recovery key during login re-creates dehydrated device", async ({
+    test("Reset identity during login and set up recovery re-creates dehydrated device", async ({
         page,
         homeserver,
         app,
@@ -99,16 +105,26 @@ test.describe("Dehydration", () => {
         // Log in our client
         await logIntoElement(page, credentials);
 
-        // Oh no, we forgot our recovery key
+        // Oh no, we forgot our recovery key - reset our identity
         await page.locator(".mx_AuthPage").getByRole("button", { name: "Reset all" }).click();
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Proceed with reset" }).click();
+        await expect(
+            page.getByRole("heading", { name: "Are you sure you want to reset your identity?" }),
+        ).toBeVisible();
+        await page.getByRole("button", { name: "Continue", exact: true }).click();
+        await page.getByPlaceholder("Password").fill(credentials.password);
+        await page.getByRole("button", { name: "Continue" }).click();
 
-        await completeCreateSecretStorageDialog(page, { accountPassword: credentials.password });
+        // And set up recovery
+        const settings = await app.settings.openUserSettings("Encryption");
+        await settings.getByRole("button", { name: "Set up recovery" }).click();
+        await settings.getByRole("button", { name: "Continue" }).click();
+        const recoveryKey = await settings.getByTestId("recoveryKey").innerText();
+        await settings.getByRole("button", { name: "Continue" }).click();
+        await settings.getByRole("textbox").fill(recoveryKey);
+        await settings.getByRole("button", { name: "Finish set up" }).click();
 
         // There should be a brand new dehydrated device
-        const dehydratedDeviceIds = await getDehydratedDeviceIds(app.client);
-        expect(dehydratedDeviceIds.length).toBe(1);
-        expect(dehydratedDeviceIds[0]).not.toEqual(initialDehydratedDeviceIds[0]);
+        await expectDehydratedDeviceEnabled(app);
     });
 
     test("'Reset cryptographic identity' removes dehydrated device", async ({ page, homeserver, app, credentials }) => {

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

@@ -6,7 +6,7 @@
  */
 
 import { expect, test } from "../../../element-web-test";
-import type { Page } from "@playwright/test";
+import type { Locator, Page } from "@playwright/test";
 
 test.describe("Room list filters and sort", () => {
     test.use({
@@ -18,10 +18,14 @@ test.describe("Room list filters and sort", () => {
         labsFlags: ["feature_new_room_list"],
     });
 
-    function getPrimaryFilters(page: Page) {
+    function getPrimaryFilters(page: Page): Locator {
         return page.getByRole("listbox", { name: "Room list filters" });
     }
 
+    function getSecondaryFilters(page: Page): Locator {
+        return page.getByRole("button", { name: "Filter" });
+    }
+
     /**
      * Get the room list
      * @param page
@@ -106,6 +110,11 @@ test.describe("Room list filters and sort", () => {
             await app.client.evaluate(async (client, favouriteId) => {
                 await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
             }, favouriteId);
+
+            const lowPrioId = await app.client.createRoom({ name: "Low prio room" });
+            await app.client.evaluate(async (client, id) => {
+                await client.setRoomTag(id, "m.lowpriority", { order: 0.5 });
+            }, lowPrioId);
         });
 
         test("should filter the list (with primary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
@@ -137,32 +146,50 @@ test.describe("Room list filters and sort", () => {
             await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
             await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
             await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(3);
+            expect(await roomList.locator("role=gridcell").count()).toBe(4);
         });
 
-        test("unread filter should only match unread rooms that have a count", async ({ page, app, bot }) => {
-            const roomListView = getRoomList(page);
+        test("should filter the list (with secondary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            const roomList = getRoomList(page);
+            const secondaryFilters = getSecondaryFilters(page);
+            await secondaryFilters.click();
 
-            // Let's configure unread dm room so that we only get notification for mentions and keywords
-            await app.viewRoomById(unReadDmId);
-            await app.settings.openRoomSettings("Notifications");
-            await page.getByText("@mentions & keywords").click();
-            await app.settings.closeDialog();
+            await expect(page.getByRole("menu", { name: "Filter" })).toMatchScreenshot("filter-menu.png");
 
-            // Let's open a room other than unread room or unread dm
-            await roomListView.getByRole("gridcell", { name: "Open room favourite room" }).click();
-
-            // Let's make the bot send a new message in both rooms
-            await bot.sendMessage(unReadDmId, "Hello!");
-            await bot.sendMessage(unReadRoomId, "Hello!");
-
-            // Let's activate the unread filter now
-            await page.getByRole("option", { name: "Unread" }).click();
-
-            // Unread filter should only show unread room and not unread dm!
-            await expect(roomListView.getByRole("gridcell", { name: "Open room unread room" })).toBeVisible();
-            await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
+            await page.getByRole("menuitem", { name: "Low priority" }).click();
+            await expect(roomList.getByRole("gridcell", { name: "Low prio room" })).toBeVisible();
+            expect(await roomList.locator("role=gridcell").count()).toBe(1);
         });
+
+        test(
+            "unread filter should only match unread rooms that have a count",
+            { tag: "@screenshot" },
+            async ({ page, app, bot }) => {
+                const roomListView = getRoomList(page);
+
+                // Let's configure unread dm room so that we only get notification for mentions and keywords
+                await app.viewRoomById(unReadDmId);
+                await app.settings.openRoomSettings("Notifications");
+                await page.getByText("@mentions & keywords").click();
+                await app.settings.closeDialog();
+
+                // Let's open a room other than unread room or unread dm
+                await roomListView.getByRole("gridcell", { name: "Open room favourite room" }).click();
+
+                // Let's make the bot send a new message in both rooms
+                await bot.sendMessage(unReadDmId, "Hello!");
+                await bot.sendMessage(unReadRoomId, "Hello!");
+
+                // Let's activate the unread filter now
+                await page.getByRole("option", { name: "Unread" }).click();
+
+                // Unread filter should only show unread room and not unread dm!
+                const unreadDm = roomListView.getByRole("gridcell", { name: "Open room unread room" });
+                await expect(unreadDm).toBeVisible();
+                await expect(unreadDm).toMatchScreenshot("unread-dm.png");
+                await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
+            },
+        );
     });
 
     test.describe("Empty room list", () => {

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

@@ -142,6 +142,47 @@ test.describe("Room list", () => {
             await filters.getByRole("option", { name: "People" }).click();
             await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
         });
+
+        test.describe("Shortcuts", () => {
+            test("should select the next room", async ({ page, app, user }) => {
+                const roomListView = getRoomList(page);
+                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+                await page.keyboard.press("Alt+ArrowDown");
+
+                await expect(page.getByRole("heading", { name: "room28", level: 1 })).toBeVisible();
+            });
+
+            test("should select the previous room", async ({ page, app, user }) => {
+                const roomListView = getRoomList(page);
+                await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
+                await page.keyboard.press("Alt+ArrowUp");
+
+                await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
+            });
+
+            test("should select the last room", async ({ page, app, user }) => {
+                const roomListView = getRoomList(page);
+                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+                await page.keyboard.press("Alt+ArrowUp");
+
+                await expect(page.getByRole("heading", { name: "room0", level: 1 })).toBeVisible();
+            });
+
+            test("should select the next unread room", async ({ page, app, user, bot }) => {
+                const roomListView = getRoomList(page);
+
+                const roomId = await app.client.createRoom({ name: "1 notification" });
+                await app.client.inviteUser(roomId, bot.credentials.userId);
+                await bot.joinRoom(roomId);
+                await bot.sendMessage(roomId, "I am a robot. Beep.");
+
+                await roomListView.getByRole("gridcell", { name: "Open room room20" }).click();
+
+                await page.keyboard.press("Alt+Shift+ArrowDown");
+
+                await expect(page.getByRole("heading", { name: "1 notification", level: 1 })).toBeVisible();
+            });
+        });
     });
 
     test.describe("Avatar decoration", () => {
@@ -230,6 +271,22 @@ test.describe("Room list", () => {
             await expect(room).toMatchScreenshot("room-list-item-mention.png");
         });
 
+        test("should render a message preview", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            const roomListView = getRoomList(page);
+
+            await page.getByRole("button", { name: "Room Options" }).click();
+            await page.getByRole("menuitemcheckbox", { name: "Show message previews" }).click();
+
+            const roomId = await app.client.createRoom({ name: "activity" });
+            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await bot.joinRoom(roomId);
+            await bot.sendMessage(roomId, "I am a robot. Beep.");
+
+            const room = roomListView.getByRole("gridcell", { name: "activity" });
+            await expect(room.getByText("I am a robot. Beep.")).toBeVisible();
+            await expect(room).toMatchScreenshot("room-list-item-message-preview.png");
+        });
+
         test("should render an activity decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
             const roomListView = getRoomList(page);
 

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

@@ -288,6 +288,43 @@ test.describe("Login", () => {
                     await expect(h1).toBeVisible();
                 });
             });
+
+            test("Can reset identity to become verified", async ({ page, homeserver, request, credentials }) => {
+                // Log in
+                const res = await request.post(`${homeserver.baseUrl}/_matrix/client/v3/keys/device_signing/upload`, {
+                    headers: { Authorization: `Bearer ${credentials.accessToken}` },
+                    data: DEVICE_SIGNING_KEYS_BODY,
+                });
+                if (!res.ok()) {
+                    console.log(`Uploading dummy keys failed with HTTP status ${res.status}`, await res.json());
+                    throw new Error("Uploading dummy keys failed");
+                }
+
+                await page.goto("/");
+                await login(page, homeserver, credentials);
+
+                await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();
+
+                // Start the reset process
+                await page.getByRole("button", { name: "Proceed with reset" }).click();
+
+                // First try cancelling and restarting
+                await page.getByRole("button", { name: "Cancel" }).click();
+                await page.getByRole("button", { name: "Proceed with reset" }).click();
+
+                // Then click outside the dialog and restart
+                await page.getByRole("link", { name: "Powered by Matrix" }).click({ force: true });
+                await page.getByRole("button", { name: "Proceed with reset" }).click();
+
+                // Finally we actually continue
+                await page.getByRole("button", { name: "Continue" }).click();
+                await page.getByPlaceholder("Password").fill(credentials.password);
+                await page.getByRole("button", { name: "Continue" }).click();
+
+                // We end up at the Home screen
+                await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
+                await expect(page.getByRole("heading", { name: "Welcome Dave", exact: true })).toBeVisible();
+            });
         });
     });
 

playwright/e2e/right-panel/right-panel.spec.ts

@@ -11,6 +11,7 @@ import { type Locator, type Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import { checkRoomSummaryCard, viewRoomSummaryByName } from "./utils";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { Bot } from "../../pages/bot";
 
 const ROOM_NAME = "Test room";
 const ROOM_NAME_LONG =
@@ -21,20 +22,23 @@ const ROOM_NAME_LONG =
     "officia deserunt mollit anim id est laborum.";
 const SPACE_NAME = "Test space";
 const NAME = "Alice";
+const LONG_NAME = "Bob long long long long long long long long long long long long long long long name";
+
 const ROOM_ADDRESS_LONG =
     "loremIpsumDolorSitAmetConsecteturAdipisicingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliqua";
 
 function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
+    return page.locator(".mx_MemberListView .mx_MemberTileView_name").filter({ hasText: name });
 }
 
 test.describe("RightPanel", () => {
+    let testRoomId: string;
     test.use({
         displayName: NAME,
     });
 
     test.beforeEach(async ({ app, user }) => {
-        await app.client.createRoom({ name: ROOM_NAME });
+        testRoomId = await app.client.createRoom({ name: ROOM_NAME });
         await app.client.createSpace({ name: SPACE_NAME });
     });
 
@@ -134,6 +138,37 @@ test.describe("RightPanel", () => {
             await page.getByLabel("Room info").nth(1).click();
             await checkRoomSummaryCard(page, ROOM_NAME);
         });
+
+        test(
+            "should handle viewing long room member name",
+            { tag: "@screenshot" },
+            async ({ page, homeserver, app }) => {
+                const bobLongName = new Bot(page, homeserver, { displayName: LONG_NAME });
+                await bobLongName.prepareClient();
+                await app.client.inviteUser(testRoomId, bobLongName.credentials.userId);
+                await bobLongName.joinRoom(testRoomId);
+
+                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, LONG_NAME).click();
+                await expect(page.locator(".mx_UserInfo")).toBeVisible();
+                await expect(page.locator(".mx_UserInfo_profile").getByText(LONG_NAME)).toBeVisible();
+
+                await expect(page.locator(".mx_UserInfo")).toMatchScreenshot("with-long-name.png", {
+                    mask: [page.locator(".mx_UserInfo_profile_mxid")],
+                    css: `
+                        /* Use monospace font for consistent mask width */
+                        .mx_UserInfo_profile_mxid {
+                            font-family: Inconsolata !important;
+                        }
+                    `,
+                });
+            },
+        );
+
         test.describe("room reporting", () => {
             test.skip(isDendrite, "Dendrite does not implement room reporting");
             test("should handle reporting a room", { tag: "@screenshot" }, async ({ page, app }) => {

playwright/e2e/room/invites.spec.ts

@@ -19,7 +19,14 @@ test.describe("Invites", () => {
         const roomId = await bot.createRoom({ is_direct: true });
         await bot.inviteUser(roomId, user.userId);
         await app.viewRoomByName("Bob");
-        await expect(page.locator(".mx_RoomView")).toMatchScreenshot("Invites_room_view.png");
+        await expect(page.locator(".mx_RoomView")).toMatchScreenshot("Invites_room_view.png", {
+            // Hide the mxid, which is not stable.
+            css: `
+                .mx_RoomPreviewBar_inviter_mxid {
+                    display: none !important;
+                }
+            `,
+        });
     });
 
     test("should be able to decline an invite", async ({ page, homeserver, user, bot, app }) => {

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

@@ -19,126 +19,162 @@ import {
 test.describe("Encryption tab", () => {
     test.use({ displayName: "Alice" });
 
-    let recoveryKey: GeneratedSecretStorageKey;
-    let expectedBackupVersion: string;
+    test.describe("when encryption is set up", () => {
+        let recoveryKey: GeneratedSecretStorageKey;
+        let expectedBackupVersion: string;
 
-    test.beforeEach(async ({ page, homeserver, credentials }) => {
-        // The bot bootstraps cross-signing, creates a key backup and sets up a recovery key
-        const res = await createBot(page, homeserver, credentials);
-        recoveryKey = res.recoveryKey;
-        expectedBackupVersion = res.expectedBackupVersion;
-    });
+        test.beforeEach(async ({ page, homeserver, credentials }) => {
+            // The bot bootstraps cross-signing, creates a key backup and sets up a recovery key
+            const res = await createBot(page, homeserver, credentials);
+            recoveryKey = res.recoveryKey;
+            expectedBackupVersion = res.expectedBackupVersion;
+        });
 
-    test(
-        "should show a 'Verify this device' button if the device is unverified",
-        { tag: "@screenshot" },
-        async ({ page, app, util }) => {
-            const dialog = await util.openEncryptionTab();
-            const content = util.getEncryptionTabContent();
+        test(
+            "should show a 'Verify this device' button if the device is unverified",
+            { tag: "@screenshot" },
+            async ({ page, app, util }) => {
+                const dialog = await util.openEncryptionTab();
+                const content = util.getEncryptionTabContent();
 
-            // The user's device is in an unverified state, therefore the only option available to them here is to verify it
-            const verifyButton = dialog.getByRole("button", { name: "Verify this device" });
-            await expect(verifyButton).toBeVisible();
-            await expect(content).toMatchScreenshot("verify-device-encryption-tab.png");
-            await verifyButton.click();
+                // The user's device is in an unverified state, therefore the only option available to them here is to verify it
+                const verifyButton = dialog.getByRole("button", { name: "Verify this device" });
+                await expect(verifyButton).toBeVisible();
+                await expect(content).toMatchScreenshot("verify-device-encryption-tab.png");
+                await verifyButton.click();
 
-            await util.verifyDevice(recoveryKey);
+                await util.verifyDevice(recoveryKey);
 
-            await expect(content).toMatchScreenshot("default-tab.png", {
-                mask: [content.getByTestId("deviceId"), content.getByTestId("sessionKey")],
-            });
+                await expect(content).toMatchScreenshot("default-tab.png", {
+                    mask: [content.getByTestId("deviceId"), content.getByTestId("sessionKey")],
+                });
 
-            // Check that our device is now cross-signed
-            await checkDeviceIsCrossSigned(app);
+                // Check that our device is now cross-signed
+                await checkDeviceIsCrossSigned(app);
 
-            // Check that the current device is connected to key backup
-            // The backup decryption key should be in cache also, as we got it directly from the 4S
-            await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
-        },
-    );
+                // Check that the current device is connected to key backup
+                // The backup decryption key should be in cache also, as we got it directly from the 4S
+                await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
+            },
+        );
 
-    // Test what happens if the cross-signing secrets are in secret storage but are not cached in the local DB.
-    //
-    // This can happen if we verified another device and secret-gossiping failed, or the other device itself lacked the secrets.
-    // We simulate this case by deleting the cached secrets in the indexedDB.
-    test(
-        "should prompt to enter the recovery key when the secrets are not cached locally",
-        { tag: "@screenshot" },
-        async ({ page, app, util }) => {
+        // Test what happens if the cross-signing secrets are in secret storage but are not cached in the local DB.
+        //
+        // This can happen if we verified another device and secret-gossiping failed, or the other device itself lacked the secrets.
+        // We simulate this case by deleting the cached secrets in the indexedDB.
+        test(
+            "should prompt to enter the recovery key when the secrets are not cached locally",
+            { tag: "@screenshot" },
+            async ({ page, app, util }) => {
+                await verifySession(app, recoveryKey.encodedPrivateKey);
+                // We need to delete the cached secrets
+                await deleteCachedSecrets(page);
+
+                await util.openEncryptionTab();
+                // We ask the user to enter the recovery key
+                const dialog = util.getEncryptionTabContent();
+                const enterKeyButton = dialog.getByRole("button", { name: "Enter recovery key" });
+                await expect(enterKeyButton).toBeVisible();
+                await expect(dialog).toMatchScreenshot("out-of-sync-recovery.png");
+                await enterKeyButton.click();
+
+                // Fill the recovery key
+                await util.enterRecoveryKey(recoveryKey);
+                await expect(dialog).toMatchScreenshot("default-tab.png", {
+                    mask: [dialog.getByTestId("deviceId"), dialog.getByTestId("sessionKey")],
+                });
+
+                // Check that our device is now cross-signed
+                await checkDeviceIsCrossSigned(app);
+
+                // Check that the current device is connected to key backup
+                // The backup decryption key should be in cache also, as we got it directly from the 4S
+                await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
+            },
+        );
+
+        test("should display the reset identity panel when the user clicks on 'Forgot recovery key?'", async ({
+            page,
+            app,
+            util,
+        }) => {
             await verifySession(app, recoveryKey.encodedPrivateKey);
             // We need to delete the cached secrets
             await deleteCachedSecrets(page);
 
+            // The "Key storage is out sync" section is displayed and the user click on the "Forgot recovery key?" button
             await util.openEncryptionTab();
-            // We ask the user to enter the recovery key
             const dialog = util.getEncryptionTabContent();
-            const enterKeyButton = dialog.getByRole("button", { name: "Enter recovery key" });
-            await expect(enterKeyButton).toBeVisible();
-            await expect(dialog).toMatchScreenshot("out-of-sync-recovery.png");
-            await enterKeyButton.click();
+            await dialog.getByRole("button", { name: "Forgot recovery key?" }).click();
 
-            // Fill the recovery key
-            await util.enterRecoveryKey(recoveryKey);
-            await expect(dialog).toMatchScreenshot("default-tab.png", {
-                mask: [dialog.getByTestId("deviceId"), dialog.getByTestId("sessionKey")],
-            });
+            // The user is prompted to reset their identity
+            await expect(
+                dialog.getByText("Forgot your recovery key? You’ll need to reset your identity."),
+            ).toBeVisible();
+        });
 
-            // Check that our device is now cross-signed
-            await checkDeviceIsCrossSigned(app);
+        test("should warn before turning off key storage", { tag: "@screenshot" }, async ({ page, app, util }) => {
+            await verifySession(app, recoveryKey.encodedPrivateKey);
+            await util.openEncryptionTab();
 
-            // Check that the current device is connected to key backup
-            // The backup decryption key should be in cache also, as we got it directly from the 4S
-            await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
-        },
-    );
+            await page.getByRole("checkbox", { name: "Allow key storage" }).click();
 
-    test("should display the reset identity panel when the user clicks on 'Forgot recovery key?'", async ({
-        page,
-        app,
-        util,
-    }) => {
-        await verifySession(app, recoveryKey.encodedPrivateKey);
-        // We need to delete the cached secrets
-        await deleteCachedSecrets(page);
+            await expect(
+                page.getByRole("heading", { name: "Are you sure you want to turn off key storage and delete it?" }),
+            ).toBeVisible();
 
-        // The "Key storage is out sync" section is displayed and the user click on the "Forgot recovery key?" button
-        await util.openEncryptionTab();
-        const dialog = util.getEncryptionTabContent();
-        await dialog.getByRole("button", { name: "Forgot recovery key?" }).click();
+            await expect(util.getEncryptionTabContent()).toMatchScreenshot("delete-key-storage-confirm.png");
 
-        // The user is prompted to reset their identity
-        await expect(dialog.getByText("Forgot your recovery key? You’ll need to reset your identity.")).toBeVisible();
+            const deleteRequestPromises = [
+                page.waitForRequest((req) => req.url().endsWith("/account_data/m.cross_signing.master")),
+                page.waitForRequest((req) => req.url().endsWith("/account_data/m.cross_signing.self_signing")),
+                page.waitForRequest((req) => req.url().endsWith("/account_data/m.cross_signing.user_signing")),
+                page.waitForRequest((req) => req.url().endsWith("/account_data/m.megolm_backup.v1")),
+                page.waitForRequest((req) => req.url().endsWith("/account_data/m.secret_storage.default_key")),
+                page.waitForRequest((req) => req.url().includes("/account_data/m.secret_storage.key.")),
+            ];
+
+            await page.getByRole("button", { name: "Delete key storage" }).click();
+
+            await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();
+
+            for (const prom of deleteRequestPromises) {
+                const request = await prom;
+                expect(request.method()).toBe("PUT");
+                expect(request.postData()).toBe(JSON.stringify({}));
+            }
+        });
     });
 
-    test("should warn before turning off key storage", { tag: "@screenshot" }, async ({ page, app, util }) => {
-        await verifySession(app, recoveryKey.encodedPrivateKey);
-        await util.openEncryptionTab();
+    test.describe("when encryption is not set up", () => {
+        test("'Verify this device' allows us to become verified", async ({
+            page,
+            user,
+            credentials,
+            app,
+        }, workerInfo) => {
+            const settings = await app.settings.openUserSettings("Encryption");
 
-        await page.getByRole("checkbox", { name: "Allow key storage" }).click();
+            // Initially, our device is not verified
+            await expect(settings.getByRole("heading", { name: "Device not verified" })).toBeVisible();
 
-        await expect(
-            page.getByRole("heading", { name: "Are you sure you want to turn off key storage and delete it?" }),
-        ).toBeVisible();
+            // We will reset our identity
+            await settings.getByRole("button", { name: "Verify this device" }).click();
+            await page.getByRole("button", { name: "Proceed with reset" }).click();
 
-        await expect(util.getEncryptionTabContent()).toMatchScreenshot("delete-key-storage-confirm.png");
+            // First try cancelling and restarting
+            await page.getByRole("button", { name: "Cancel" }).click();
+            await page.getByRole("button", { name: "Proceed with reset" }).click();
 
-        const deleteRequestPromises = [
-            page.waitForRequest((req) => req.url().endsWith("/account_data/m.cross_signing.master")),
-            page.waitForRequest((req) => req.url().endsWith("/account_data/m.cross_signing.self_signing")),
-            page.waitForRequest((req) => req.url().endsWith("/account_data/m.cross_signing.user_signing")),
-            page.waitForRequest((req) => req.url().endsWith("/account_data/m.megolm_backup.v1")),
-            page.waitForRequest((req) => req.url().endsWith("/account_data/m.secret_storage.default_key")),
-            page.waitForRequest((req) => req.url().includes("/account_data/m.secret_storage.key.")),
-        ];
+            // Then click outside the dialog and restart
+            await page.locator("li").filter({ hasText: "Encryption" }).click({ force: true });
+            await page.getByRole("button", { name: "Proceed with reset" }).click();
 
-        await page.getByRole("button", { name: "Delete key storage" }).click();
+            // Finally we actually continue
+            await page.getByRole("button", { name: "Continue" }).click();
 
-        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();
-
-        for (const prom of deleteRequestPromises) {
-            const request = await prom;
-            expect(request.method()).toBe("PUT");
-            expect(request.postData()).toBe(JSON.stringify({}));
-        }
+            // Now we are verified, so we see the Key storage toggle
+            await expect(settings.getByRole("heading", { name: "Key storage" })).toBeVisible();
+        });
     });
 });

playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts

@@ -37,6 +37,15 @@ test.describe("Roles & Permissions room settings tab", () => {
         // Change the role of Alice to Moderator (50)
         await combobox.selectOption("Moderator");
         await expect(combobox).toHaveValue("50");
+
+        // Should display a modal to warn that we are demoting the only admin user
+        const modal = await page.locator(".mx_Dialog", {
+            hasText: "Warning",
+        });
+        await expect(modal).toBeVisible();
+        // Click on the continue button in the modal
+        await modal.getByRole("button", { name: "Continue" }).click();
+
         const respPromise = page.waitForRequest("**/state/**");
         await applyButton.click();
         await respPromise;

playwright/e2e/timeline/media-preview-settings.spec.ts

@@ -0,0 +1,139 @@
+/*
+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 * as fs from "node:fs";
+import { type EventType, type MsgType, type RoomJoinRulesEventContent } from "matrix-js-sdk/src/types";
+
+import { test, expect } from "../../element-web-test";
+
+const MEDIA_FILE = fs.readFileSync("playwright/sample-files/riot.png");
+
+test.describe("Media preview settings", () => {
+    test.use({
+        displayName: "Alan",
+        botCreateOpts: {
+            displayName: "Bob",
+        },
+        room: async ({ app, page, homeserver, bot, user }, use) => {
+            const mxc = (await bot.uploadContent(MEDIA_FILE, { name: "image.png", type: "image/png" })).content_uri;
+            const roomId = await bot.createRoom({
+                name: "Test room",
+                invite: [user.userId],
+                initial_state: [{ type: "m.room.avatar", content: { url: mxc }, state_key: "" }],
+            });
+            await bot.sendEvent(roomId, null, "m.room.message" as EventType, {
+                msgtype: "m.image" as MsgType,
+                body: "image.png",
+                url: mxc,
+            });
+
+            await use({ roomId });
+        },
+    });
+
+    test("should be able to hide avatars of inviters", { tag: "@screenshot" }, async ({ page, app, room, user }) => {
+        let settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Hide avatars of room and inviter").click();
+        await app.closeDialog();
+        await app.viewRoomById(room.roomId);
+        await expect(
+            page.getByRole("complementary").filter({ hasText: "Do you want to join Test room" }),
+        ).toMatchScreenshot("invite-no-avatar.png", {
+            // Hide the mxid, which is not stable.
+            css: `
+                .mx_RoomPreviewBar_inviter_mxid {
+                    display: none !important;
+                }
+            `,
+        });
+        await expect(
+            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Test room" }),
+        ).toMatchScreenshot("invite-room-tree-no-avatar.png");
+
+        // And then go back to being visible
+        settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Hide avatars of room and inviter").click();
+        await app.closeDialog();
+        await page.goto("#/home");
+        await app.viewRoomById(room.roomId);
+        await expect(
+            page.getByRole("complementary").filter({ hasText: "Do you want to join Test room" }),
+        ).toMatchScreenshot("invite-with-avatar.png", {
+            // Hide the mxid, which is not stable.
+            css: `
+                .mx_RoomPreviewBar_inviter_mxid {
+                    display: none !important;
+                }
+            `,
+        });
+        await expect(
+            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Test room" }),
+        ).toMatchScreenshot("invite-room-tree-with-avatar.png");
+    });
+
+    test("should be able to hide media in rooms globally", async ({ page, app, room, user }) => {
+        const settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always hide" }).click();
+        await app.closeDialog();
+        await app.viewRoomById(room.roomId);
+        await page.getByRole("button", { name: "Accept" }).click();
+        await expect(page.getByText("Show image")).toBeVisible();
+    });
+    test("should be able to hide media in non-private rooms globally", async ({ page, app, room, user, bot }) => {
+        await bot.sendStateEvent(room.roomId, "m.room.join_rules", {
+            join_rule: "public",
+        });
+        const settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Show media in timeline").getByLabel("In private rooms").click();
+        await app.closeDialog();
+        await app.viewRoomById(room.roomId);
+        await page.getByRole("button", { name: "Accept" }).click();
+        await expect(page.getByText("Show image")).toBeVisible();
+        for (const joinRule of ["invite", "knock", "restricted"] as RoomJoinRulesEventContent["join_rule"][]) {
+            await bot.sendStateEvent(room.roomId, "m.room.join_rules", {
+                join_rule: joinRule,
+            } satisfies RoomJoinRulesEventContent);
+            await expect(page.getByText("Show image")).not.toBeVisible();
+        }
+    });
+    test("should be able to show media in rooms globally", async ({ page, app, room, user }) => {
+        const settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always show" }).click();
+        await app.closeDialog();
+        await app.viewRoomById(room.roomId);
+        await page.getByRole("button", { name: "Accept" }).click();
+        await expect(page.getByText("Show image")).not.toBeVisible();
+    });
+    test("should be able to hide media in an individual room", async ({ page, app, room, user }) => {
+        const settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always show" }).click();
+        await app.closeDialog();
+
+        await app.viewRoomById(room.roomId);
+        await page.getByRole("button", { name: "Accept" }).click();
+
+        const roomSettings = await app.settings.openRoomSettings("General");
+        await roomSettings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always hide" }).click();
+        await app.closeDialog();
+
+        await expect(page.getByText("Show image")).toBeVisible();
+    });
+    test("should be able to show media in an individual room", async ({ page, app, room, user }) => {
+        const settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always hide" }).click();
+        await app.closeDialog();
+
+        await app.viewRoomById(room.roomId);
+        await page.getByRole("button", { name: "Accept" }).click();
+
+        const roomSettings = await app.settings.openRoomSettings("General");
+        await roomSettings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always show" }).click();
+        await app.closeDialog();
+
+        await expect(page.getByText("Show image")).not.toBeVisible();
+    });
+});

res/css/_components.pcss

@@ -279,6 +279,8 @@
 @import "./views/rooms/RoomListPanel/_RoomListPanel.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListSecondaryFilters.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListSkeleton.pcss";
 @import "./views/rooms/_AppsDrawer.pcss";
 @import "./views/rooms/_Autocomplete.pcss";
 @import "./views/rooms/_AuxPanel.pcss";
@@ -378,6 +380,7 @@
 @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_MediaPreviewAccountSettings.pcss";
 @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";

res/css/components/views/elements/_FilterDropdown.pcss

@@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details.
 
         border: 1px solid $quinary-content;
         border-radius: 8px;
-        box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
+        box-shadow: 0px 1px 3px rgb(23, 25, 28, 0.05);
 
         background-color: $system;
 

res/css/components/views/location/_Marker.pcss

@@ -14,7 +14,7 @@ Please see LICENSE files in the repository root for full details.
     width: 42px;
     height: 42px;
     border-radius: 50%;
-    filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
+    filter: drop-shadow(0px 3px 5px rgb(0, 0, 0, 0.2));
     background-color: currentColor;
 
     display: flex;

res/css/components/views/location/_ZoomButtons.pcss

@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
         height: $ZoomButtons_button-size;
         width: $ZoomButtons_button-size;
         background: $background;
-        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
+        box-shadow: 0px 4px 12px rgb(0, 0, 0, 0.25);
 
         .mx_ZoomButtons_icon {
             $ZoomButtons_icon-size: 12px;

res/css/components/views/pips/_WidgetPip.pcss

@@ -48,7 +48,7 @@ $height: 220px;
     display: flex;
     font-size: $font-12px;
     font-weight: var(--cpd-font-weight-semibold);
-    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgb(0, 0, 0, 0.9), rgb(0, 0, 0, 0));
 }
 
 .mx_WidgetPip_backButton {
@@ -69,5 +69,5 @@ $height: 220px;
     display: flex;
     justify-content: flex-end;
     align-items: flex-end;
-    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.9));
 }

res/css/structures/_ContextualMenu.pcss

@@ -23,7 +23,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_ContextualMenu {
     border-radius: 12px;
-    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
     background-color: var(--cpd-color-bg-canvas-default);
     border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
     color: $primary-content;

res/css/structures/_GenericDropdownMenu.pcss

@@ -41,7 +41,7 @@ Please see LICENSE files in the repository root for full details.
         padding-bottom: 10px;
 
         border: 1px solid $quinary-content;
-        box-shadow: 0 1px 3px rgba(23, 25, 28, 0.05);
+        box-shadow: 0 1px 3px rgb(23, 25, 28, 0.05);
     }
 
     .mx_ContextualMenu_chevron_top {

res/css/structures/_SpaceHierarchy.pcss

@@ -293,7 +293,7 @@ Please see LICENSE files in the repository root for full details.
     > hr {
         border: none;
         height: 1px;
-        background-color: rgba(141, 151, 165, 0.2);
+        background-color: rgb(141, 151, 165, 0.2);
         margin: 20px 0;
     }
 

res/css/structures/_SpacePanel.pcss

@@ -352,9 +352,9 @@ Please see LICENSE files in the repository root for full details.
             mask-image: linear-gradient(
                 to top,
                 transparent,
-                rgba(255, 255, 255, 30%) 4px,
-                rgba(255, 255, 255, 55%) 8px,
-                rgba(255, 255, 255, 75%) 12px,
+                rgb(255, 255, 255, 30%) 4px,
+                rgb(255, 255, 255, 55%) 8px,
+                rgb(255, 255, 255, 75%) 12px,
                 black 16px
             );
         }
@@ -370,9 +370,9 @@ Please see LICENSE files in the repository root for full details.
                 linear-gradient(
                     to top,
                     transparent,
-                    rgba(255, 255, 255, 30%) 4px,
-                    rgba(255, 255, 255, 55%) 8px,
-                    rgba(255, 255, 255, 75%) 12px,
+                    rgb(255, 255, 255, 30%) 4px,
+                    rgb(255, 255, 255, 55%) 8px,
+                    rgb(255, 255, 255, 75%) 12px,
                     black 16px
                 );
             mask-position:

res/css/structures/_SplashPage.pcss

@@ -19,12 +19,12 @@ Please see LICENSE files in the repository root for full details.
         background-image:
             radial-gradient(
                 53.85% 66.75% at 87.55% 0%,
-                hsla(250deg, 76%, 71%, 0.261) 0%,
-                hsla(250deg, 100%, 88%, 0) 100%
+                hsl(250deg, 76%, 71%, 0.261) 0%,
+                hsl(250deg, 100%, 88%, 0) 100%
             ),
-            radial-gradient(41.93% 41.93% at 0% 0%, hsla(222deg, 29%, 20%, 0.28) 0%, hsla(250deg, 100%, 88%, 0) 100%),
-            radial-gradient(100% 100% at 0% 0%, hsla(250deg, 100%, 88%, 0.174) 0%, hsla(0deg, 100%, 86%, 0) 100%),
-            radial-gradient(106.35% 96.26% at 100% 0%, hsla(250deg, 100%, 88%, 0.4) 0%, hsla(167deg, 76%, 82%, 0) 100%);
+            radial-gradient(41.93% 41.93% at 0% 0%, hsl(222deg, 29%, 20%, 0.28) 0%, hsl(250deg, 100%, 88%, 0) 100%),
+            radial-gradient(100% 100% at 0% 0%, hsl(250deg, 100%, 88%, 0.174) 0%, hsl(0deg, 100%, 86%, 0) 100%),
+            radial-gradient(106.35% 96.26% at 100% 0%, hsl(250deg, 100%, 88%, 0.4) 0%, hsl(167deg, 76%, 82%, 0) 100%);
         /* blur to reduce color banding issues due to alpha-blending multiple gradients */
         filter: blur(8px);
         inset: -9px;
@@ -34,8 +34,8 @@ Please see LICENSE files in the repository root for full details.
             /* gradient to apply different amounts of dithering to different parts of the gradient */
                 linear-gradient(
                     to bottom,
-                    /* 10% dithering at the top */ rgba(0, 0, 0, 0.9) 20%,
-                    /* 80% dithering at the bottom */ rgba(0, 0, 0, 0.2) 100%
+                    /* 10% dithering at the top */ rgb(0, 0, 0, 0.9) 20%,
+                    /* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100%
                 );
     }
 }

res/css/structures/_ToastContainer.pcss

@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
         grid-row: 2 / 4;
         grid-column: 1;
         background-color: $system;
-        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
+        box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.5);
         border-radius: 8px;
     }
 
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
         grid-column: 1;
         background-color: var(--cpd-color-bg-canvas-default);
         color: $primary-content;
-        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
+        box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
         border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
         border-radius: 12px;
         overflow: hidden;

res/css/structures/auth/_Registration.pcss

@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
     justify-content: space-between;
     padding-top: 16px;
     margin-top: 16px;
-    border-top: 1px solid rgba(141, 151, 165, 0.2);
+    border-top: 1px solid rgb(141, 151, 165, 0.2);
 
     > * {
         flex-basis: content;

res/css/views/auth/_AuthFooter.pcss

@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
     font: var(--cpd-font-body-md-regular);
     opacity: 0.72;
     padding: 20px 0;
-    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.8));
 }
 
 .mx_AuthFooter a:link,