v1.11.100

Upgrade dependency to matrix-js-sdk@37.5.0
v1.11.100-rc.0
2025-05-06 14:03:49 +00:00 · 2025-05-06 13:50:34 +00:00 · 2025-04-29 11:08:33 +00:00 · 2025-04-29 10:44:08 +00:00 · 2025-04-28 16:05:36 +00:00 · 2025-04-28 15:46:05 +00:00
436 changed files with 13403 additions and 10581 deletions
@@ -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",
@@ -132,7 +132,7 @@ jobs:
                  cosign sign --yes ${images}

            - name: Update repo description
-              uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
+              uses: peter-evans/dockerhub-description@432a30c9e07499fd01da9f8a49f0faf9e0ca5b77 # v4
              if: github.event_name != 'pull_request'
              continue-on-error: true
              with:
@@ -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
@@ -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@fe98467f9071758c7fc214af9dbac7f301bd23d4
+              uses: guibranco/github-status-action-v2@5f2b01ce1394109f70954ae6b69ef41cf7928e63
              with:
                  authToken: ${{ secrets.GITHUB_TOKEN }}
                  state: success
@@ -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
@@ -1,3 +1,62 @@
+Changes in [1.11.100](https://github.com/element-hq/element-web/releases/tag/v1.11.100) (2025-05-06)
+====================================================================================================
+## ✨ Features
+
+* Move rich topics out of labs / stabilise MSC3765 ([#29817](https://github.com/element-hq/element-web/pull/29817)). Contributed by @Johennes.
+* Spell out that Element Web does \*not\* work on mobile. ([#29211](https://github.com/element-hq/element-web/pull/29211)). Contributed by @ara4n.
+* Add message preview support to the new room list ([#29784](https://github.com/element-hq/element-web/pull/29784)). Contributed by @dbkr.
+* Global configuration flag for media previews ([#29582](https://github.com/element-hq/element-web/pull/29582)). Contributed by @Half-Shot.
+* New room list: add partial keyboard shortcuts support ([#29783](https://github.com/element-hq/element-web/pull/29783)). Contributed by @florianduros.
+* MVVM RoomSummaryCard Topic ([#29710](https://github.com/element-hq/element-web/pull/29710)). Contributed by @MarcWadai.
+* Warn on self change from settings > roles ([#28926](https://github.com/element-hq/element-web/pull/28926)). Contributed by @MarcWadai.
+* New room list: new visual for invitation ([#29773](https://github.com/element-hq/element-web/pull/29773)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* Fix incorrect display of the user info display name ([#29826](https://github.com/element-hq/element-web/pull/29826)). Contributed by @langleyd.
+* RoomListStore: Remove invite rooms on decline ([#29804](https://github.com/element-hq/element-web/pull/29804)). Contributed by @MidhunSureshR.
+* Fix the buttons not being displayed with long preview text ([#29811](https://github.com/element-hq/element-web/pull/29811)). Contributed by @dbkr.
+* New room list: fix missing/incorrect notification decoration  ([#29796](https://github.com/element-hq/element-web/pull/29796)). Contributed by @florianduros.
+* New Room List: Prevent potential scroll jump/flicker when switching spaces ([#29781](https://github.com/element-hq/element-web/pull/29781)). Contributed by @MidhunSureshR.
+* New room list: fix incorrect decoration ([#29770](https://github.com/element-hq/element-web/pull/29770)). Contributed by @florianduros.
+
+
+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
@@ -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
@@ -1,13 +0,0 @@
-{
-    "name": "Element",
-    "description": "A glossy Matrix collaboration client for the web.",
-    "repository": {
-        "url": "https://github.com/element-hq/element-web",
-        "license": "AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial"
-    },
-    "bugs": {
-        "list": "https://github.com/element-hq/element-web/issues",
-        "report": "https://github.com/element-hq/element-web/issues/new/choose"
-    },
-    "keywords": ["chat", "riot", "matrix"]
-}
@@ -46,7 +46,6 @@
 - [Skinning](skinning.md)
 - [Cider editor](ciderEditor.md)
 - [Iconography](icons.md)
- [Jitsi](jitsi.md)
 - [Local echo](local-echo-dev.md)
 - [Media](media-handling.md)
 - [Room List Store](room-list-store.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.
@@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.11.97",
+    "version": "1.11.100",
    "description": "Element: the future of secure communication",
    "author": "New Vector Ltd.",
    "repository": {
@@ -22,8 +22,7 @@
        "LICENSE",
        "README.md",
        "AUTHORS.rst",
-        "package.json",
-        "contribute.json"
+        "package.json"
    ],
    "style": "bundle.css",
    "matrix_i18n_extra_translation_funcs": [
@@ -69,13 +68,14 @@
        "postinstall": "patch-package"
    },
    "resolutions": {
+        "**/pretty-format/react-is": "19.1.0",
        "@playwright/test": "1.51.1",
-        "@types/react": "18.3.18",
-        "@types/react-dom": "18.3.5",
+        "@types/react": "19.1.1",
+        "@types/react-dom": "19.1.2",
        "oidc-client-ts": "3.2.0",
        "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001704",
-        "testcontainers": "10.21.0",
+        "caniuse-lite": "1.0.30001714",
+        "testcontainers": "10.24.2",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
    },
@@ -93,8 +93,8 @@
        "@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.9.0",
-        "@vector-im/matrix-wysiwyg": "2.38.2",
+        "@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",
        "@zxcvbn-ts/language-en": "^3.0.2",
@@ -130,7 +130,7 @@
        "maplibre-gl": "^5.0.0",
        "matrix-encrypt-attachment": "^1.0.3",
        "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "37.3.0",
+        "matrix-js-sdk": "37.5.0",
        "matrix-widget-api": "^1.10.0",
        "memoize-one": "^6.0.0",
        "mime": "^4.0.4",
@@ -138,22 +138,22 @@
        "opus-recorder": "^8.0.3",
        "pako": "^2.0.3",
        "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.157.2",
+        "posthog-js": "1.236.1",
        "qrcode": "1.5.4",
        "re-resizable": "6.11.2",
-        "react": "^18.3.1",
+        "react": "^19.0.0",
        "react-beautiful-dnd": "^13.1.0",
        "react-blurhash": "^0.3.0",
-        "react-dom": "^18.3.1",
+        "react-dom": "^19.0.0",
        "react-focus-lock": "^2.5.1",
        "react-string-replace": "^1.1.1",
        "react-transition-group": "^4.4.1",
        "react-virtualized": "^9.22.5",
        "rfc4648": "^1.4.0",
        "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.14.0",
+        "sanitize-html": "2.15.0",
        "tar-js": "^0.3.0",
-        "temporal-polyfill": "^0.2.5",
+        "temporal-polyfill": "^0.3.0",
        "ua-parser-js": "^1.0.2",
        "uuid": "^11.0.0",
        "what-input": "^5.2.10"
@@ -185,8 +185,9 @@
        "@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,11 +212,11 @@
        "@types/node-fetch": "^2.6.2",
        "@types/pako": "^2.0.0",
        "@types/qrcode": "^1.3.5",
-        "@types/react": "18.3.18",
+        "@types/react": "19.1.1",
        "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "18.3.5",
+        "@types/react-dom": "19.1.2",
        "@types/react-transition-group": "^4.4.0",
-        "@types/sanitize-html": "2.13.0",
+        "@types/sanitize-html": "2.15.0",
        "@types/semver": "^7.5.8",
        "@types/tar-js": "^0.3.5",
        "@types/ua-parser-js": "^0.7.36",
@@ -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",
@@ -1,76 +0,0 @@
-diff --git a/node_modules/@types/react/index.d.ts b/node_modules/@types/react/index.d.ts
-index 6ea73ef..cb51757 100644
--- a/node_modules/@types/react/index.d.ts
-+++ b/node_modules/@types/react/index.d.ts
-@@ -151,7 +151,7 @@ declare namespace React {
-         /**
-          * The current value of the ref.
-          */
-        readonly current: T | null;
-+        current: T;
-     }
- 
-     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {
-@@ -186,7 +186,7 @@ declare namespace React {
-      * @see {@link RefObject}
-      */
- 
-    type Ref<T> = RefCallback<T> | RefObject<T> | null;
-+    type Ref<T> = RefCallback<T> | RefObject<T | null> | null;
-     /**
-      * A legacy implementation of refs where you can pass a string to a ref prop.
-      *
-@@ -300,7 +300,7 @@ declare namespace React {
-          *
-          * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
-          */
-        ref?: LegacyRef<T> | undefined;
-+        ref?: LegacyRef<T | null> | undefined;
-     }
- 
-     /**
-@@ -1234,7 +1234,7 @@ declare namespace React {
-      *
-      * @see {@link ForwardRefRenderFunction}
-      */
-    type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
-+    type ForwardedRef<T> = ((instance: T | null) => void) | RefObject<T | null> | null;
- 
-     /**
-      * The type of the function passed to {@link forwardRef}. This is considered different
-@@ -1565,7 +1565,7 @@ declare namespace React {
-         [propertyName: string]: any;
-     }
- 
-    function createRef<T>(): RefObject<T>;
-+    function createRef<T>(): RefObject<T | null>;
- 
-     /**
-      * The type of the component returned from {@link forwardRef}.
-@@ -1989,7 +1989,7 @@ declare namespace React {
-      * @version 16.8.0
-      * @see {@link https://react.dev/reference/react/useRef}
-      */
-    function useRef<T>(initialValue: T): MutableRefObject<T>;
-+    function useRef<T>(initialValue: T): RefObject<T>;
-     // convenience overload for refs given as a ref prop as they typically start with a null value
-     /**
-      * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
-@@ -2004,7 +2004,7 @@ declare namespace React {
-      * @version 16.8.0
-      * @see {@link https://react.dev/reference/react/useRef}
-      */
-    function useRef<T>(initialValue: T | null): RefObject<T>;
-+    function useRef<T>(initialValue: T | null): RefObject<T | null>;
-     // convenience overload for potentially undefined initialValue / call with 0 arguments
-     // has a default to stop it from defaulting to {} instead
-     /**
-@@ -2017,7 +2017,7 @@ declare namespace React {
-      * @version 16.8.0
-      * @see {@link https://react.dev/reference/react/useRef}
-      */
-    function useRef<T = undefined>(initialValue?: undefined): MutableRefObject<T | undefined>;
-+    function useRef<T>(initialValue: T | undefined): RefObject<T | undefined>;
-     /**
-      * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.
-      * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside
@@ -0,0 +1,31 @@
+diff --git a/node_modules/@types/react/index.d.ts b/node_modules/@types/react/index.d.ts
+index 2272032..18bd20a 100644
+--- a/node_modules/@types/react/index.d.ts
+++ b/node_modules/@types/react/index.d.ts
+@@ -134,7 +134,7 @@ declare namespace React {
+             props: P,
+         ) => ReactNode | Promise<ReactNode>)
+         // constructor signature must match React.Component
+-        | (new(props: P) => Component<any, any>);
+        | (new(props: P, context?: any) => Component<any, any>);
+ 
+     /**
+      * Created by {@link createRef}, or {@link useRef} when passed `null`.
+@@ -941,7 +941,7 @@ declare namespace React {
+         context: unknown;
+ 
+         // Keep in sync with constructor signature of JSXElementConstructor and ComponentClass.
+-        constructor(props: P);
+        constructor(props: P, context?: unknown);
+ 
+         // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
+         // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
+@@ -1113,7 +1113,7 @@ declare namespace React {
+      */
+     interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
+         // constructor signature must match React.Component
+-        new(props: P): Component<P, S>;
+        new(props: P, context?: any): Component<P, S>;
+         /**
+          * Ignored by React.
+          * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
@@ -0,0 +1,22 @@
+diff --git a/node_modules/react-blurhash/dist/index.d.ts b/node_modules/react-blurhash/dist/index.d.ts
+index 3adbd0a..32e8c13 100644
+--- a/node_modules/react-blurhash/dist/index.d.ts
+++ b/node_modules/react-blurhash/dist/index.d.ts
+@@ -19,7 +19,7 @@ declare class Blurhash extends React.PureComponent<Props$1> {
+         resolutionY: number;
+     };
+     componentDidUpdate(): void;
+-    render(): JSX.Element;
+    render(): React.JSX.Element;
+ }
+ 
+ declare type Props = React.CanvasHTMLAttributes<HTMLCanvasElement> & {
+@@ -37,7 +37,7 @@ declare class BlurhashCanvas extends React.PureComponent<Props> {
+     componentDidUpdate(): void;
+     handleRef: (canvas: HTMLCanvasElement) => void;
+     draw: () => void;
+-    render(): JSX.Element;
+    render(): React.JSX.Element;
+ }
+ 
+ export { Blurhash, BlurhashCanvas };
@@ -1,108 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Page } from "@playwright/test";
-
-import { test, expect } from "../../element-web-test";
-import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { completeCreateSecretStorageDialog } from "./utils.ts";
-
-async function expectBackupVersionToBe(page: Page, version: string) {
-    await expect(page.locator(".mx_SecureBackupPanel_statusList tr:nth-child(5) td")).toHaveText(
-        version + " (Algorithm: m.megolm_backup.v1.curve25519-aes-sha2)",
-    );
-
-    await expect(page.locator(".mx_SecureBackupPanel_statusList tr:nth-child(6) td")).toHaveText(version);
-}
-
-test.describe("Backups", () => {
-    test.skip(isDendrite, "Dendrite lacks support for MSC3967 so requires additional auth here");
-    test.use({
-        displayName: "Hanako",
-    });
-
-    test(
-        "Create, delete and recreate a keys backup",
-        { tag: "@no-webkit" },
-        async ({ page, user, app }, workerInfo) => {
-            // Create a backup
-            const securityTab = await app.settings.openUserSettings("Security & Privacy");
-
-            await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
-            await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
-
-            const securityKey = await completeCreateSecretStorageDialog(page);
-
-            // Open the settings again
-            await app.settings.openUserSettings("Security & Privacy");
-            await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
-
-            // expand the advanced section to see the active version in the reports
-            await page
-                .locator(".mx_Dialog .mx_SettingsSubsection_content details .mx_SecureBackupPanel_advanced")
-                .locator("..")
-                .click();
-
-            await expectBackupVersionToBe(page, "1");
-
-            await securityTab.getByRole("button", { name: "Delete Backup", exact: true }).click();
-            const currentDialogLocator = page.locator(".mx_Dialog");
-            await expect(currentDialogLocator.getByRole("heading", { name: "Delete Backup" })).toBeVisible();
-            // Delete it
-            await currentDialogLocator.getByTestId("dialog-primary-button").click(); // Click "Delete Backup"
-
-            // Create another
-            await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
-            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
-            await expect(currentDialogLocator.getByRole("heading", { name: "Success!" })).toBeVisible();
-            await currentDialogLocator.getByRole("button", { name: "OK", exact: true }).click();
-
-            // Open the settings again
-            await app.settings.openUserSettings("Security & Privacy");
-            await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
-
-            // expand the advanced section to see the active version in the reports
-            await page
-                .locator(".mx_Dialog .mx_SettingsSubsection_content details .mx_SecureBackupPanel_advanced")
-                .locator("..")
-                .click();
-
-            await expectBackupVersionToBe(page, "2");
-
-            // ==
-            // Ensure that if you don't have the secret storage passphrase the backup won't be created
-            // ==
-
-            // First delete version 2
-            await securityTab.getByRole("button", { name: "Delete Backup", exact: true }).click();
-            await expect(currentDialogLocator.getByRole("heading", { name: "Delete Backup" })).toBeVisible();
-            // Click "Delete Backup"
-            await currentDialogLocator.getByTestId("dialog-primary-button").click();
-
-            // Try to create another
-            await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
-            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();
-            // check that it failed
-            await expect(currentDialogLocator.getByText("Unable to create key backup")).toBeVisible();
-            // cancel
-            await currentDialogLocator.getByTestId("dialog-cancel-button").click();
-
-            // go back to the settings to check that no backup was created (the setup button should still be there)
-            await app.settings.openUserSettings("Security & Privacy");
-            await expect(securityTab.getByRole("button", { name: "Set up", exact: true })).toBeVisible();
-        },
-    );
-});
@@ -8,14 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import type { Page } from "@playwright/test";
 import { expect, test } from "../../element-web-test";
-import {
-    autoJoin,
-    completeCreateSecretStorageDialog,
-    copyAndContinue,
-    createSharedRoomWithUser,
-    enableKeyBackup,
-    verify,
-} from "./utils";
+import { autoJoin, createSharedRoomWithUser, enableKeyBackup, verify } from "./utils";
 import { type Bot } from "../../pages/bot";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
@@ -84,86 +77,43 @@ test.describe("Cryptography", function () {
        },
    });

-    for (const isDeviceVerified of [true, false]) {
-        test.describe(`setting up secure key backup should work isDeviceVerified=${isDeviceVerified}`, () => {
-            /**
-             * Verify that the `m.cross_signing.${keyType}` key is available on the account data on the server
-             * @param keyType
-             */
-            async function verifyKey(app: ElementAppPage, keyType: "master" | "self_signing" | "user_signing") {
-                const accountData: { encrypted: Record<string, Record<string, string>> } = await app.client.evaluate(
-                    (cli, keyType) => cli.getAccountDataFromServer(`m.cross_signing.${keyType}`),
-                    keyType,
-                );
-                expect(accountData.encrypted).toBeDefined();
-                const keys = Object.keys(accountData.encrypted);
-                const key = accountData.encrypted[keys[0]];
-                expect(key.ciphertext).toBeDefined();
-                expect(key.iv).toBeDefined();
-                expect(key.mac).toBeDefined();
-            }
+    /**
+     * Verify that the `m.cross_signing.${keyType}` key is available on the account data on the server
+     * @param keyType
+     */
+    async function verifyKey(app: ElementAppPage, keyType: "master" | "self_signing" | "user_signing") {
+        const accountData: { encrypted: Record<string, Record<string, string>> } = await app.client.evaluate(
+            (cli, keyType) => cli.getAccountDataFromServer(`m.cross_signing.${keyType}`),
+            keyType,
+        );

-            test("by recovery code", async ({ page, app, user: aliceCredentials }) => {
-                // Verified the device
-                if (isDeviceVerified) {
-                    await app.client.bootstrapCrossSigning(aliceCredentials);
-                }
-
-                await page.route("**/_matrix/client/v3/keys/signatures/upload", async (route) => {
-                    // We delay this API otherwise the `Setting up keys` may happen too quickly and cause flakiness
-                    await new Promise((resolve) => setTimeout(resolve, 500));
-                    await route.continue();
-                });
-
-                await app.settings.openUserSettings("Security & Privacy");
-                await page.getByRole("button", { name: "Set up Secure Backup" }).click();
-
-                await completeCreateSecretStorageDialog(page);
-
-                // Verify that the SSSS keys are in the account data stored in the server
-                await verifyKey(app, "master");
-                await verifyKey(app, "self_signing");
-                await verifyKey(app, "user_signing");
-            });
-
-            test("by passphrase", async ({ page, app, user: aliceCredentials }) => {
-                // Verified the device
-                if (isDeviceVerified) {
-                    await app.client.bootstrapCrossSigning(aliceCredentials);
-                }
-
-                await app.settings.openUserSettings("Security & Privacy");
-                await page.getByRole("button", { name: "Set up Secure Backup" }).click();
-
-                const dialog = page.locator(".mx_Dialog");
-                // Select passphrase option
-                await dialog.getByText("Enter a Security Phrase").click();
-                await dialog.getByRole("button", { name: "Continue" }).click();
-
-                // Fill passphrase input
-                await dialog.locator("input").fill("new passphrase for setting up a secure key backup");
-                await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
-                // Confirm passphrase
-                await dialog.locator("input").fill("new passphrase for setting up a secure key backup");
-                await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
-
-                await copyAndContinue(page);
-
-                await expect(dialog.getByText("Secure Backup successful")).toBeVisible();
-                await dialog.getByRole("button", { name: "Done" }).click();
-                await expect(dialog.getByText("Secure Backup successful")).not.toBeVisible();
-
-                // Verify that the SSSS keys are in the account data stored in the server
-                await verifyKey(app, "master");
-                await verifyKey(app, "self_signing");
-                await verifyKey(app, "user_signing");
-            });
-        });
+        expect(accountData.encrypted).toBeDefined();
+        const keys = Object.keys(accountData.encrypted);
+        const key = accountData.encrypted[keys[0]];
+        expect(key.ciphertext).toBeDefined();
+        expect(key.iv).toBeDefined();
+        expect(key.mac).toBeDefined();
    }

+    test("Setting up key backup by recovery key", async ({ page, app, user: aliceCredentials }) => {
+        await app.client.bootstrapCrossSigning(aliceCredentials);
+
+        await enableKeyBackup(app);
+
+        // Wait for the cross signing keys to be uploaded
+        // Waiting for "Change the recovery key" button ensure that all the secrets are uploaded and cached locally
+        const encryptionTab = await app.settings.openUserSettings("Encryption");
+        await expect(encryptionTab.getByRole("button", { name: "Change recovery key" })).toBeVisible();
+
+        // Verify that the SSSS keys are in the account data stored in the server
+        await verifyKey(app, "master");
+        await verifyKey(app, "self_signing");
+        await verifyKey(app, "user_signing");
+    });
+
    test("Can reset cross-signing keys", async ({ page, app, user: aliceCredentials }) => {
        await app.client.bootstrapCrossSigning(aliceCredentials);
-        const secretStorageKey = await enableKeyBackup(app);
+        await enableKeyBackup(app);

        // Fetch the current cross-signing keys
        async function fetchMasterKey() {
@@ -177,18 +127,15 @@ test.describe("Cryptography", function () {
                return k;
            });
        }
+
        const masterKey1 = await fetchMasterKey();

-        // Find the "reset cross signing" button, and click it
-        await app.settings.openUserSettings("Security & Privacy");
-        await page.locator("div.mx_CrossSigningPanel_buttonRow").getByRole("button", { name: "Reset" }).click();
+        // Find "the Reset cryptographic identity" button
+        const encryptionTab = await app.settings.openUserSettings("Encryption");
+        await encryptionTab.getByRole("button", { name: "Reset cryptographic identity" }).click();

        // Confirm
-        await page.getByRole("button", { name: "Clear cross-signing keys" }).click();
-
-        // Enter the 4S key
-        await page.getByPlaceholder("Recovery Key").fill(secretStorageKey);
-        await page.getByRole("button", { name: "Continue" }).click();
+        await encryptionTab.getByRole("button", { name: "Continue" }).click();

        // Enter the password
        await page.getByPlaceholder("Password").fill(aliceCredentials.password);
@@ -198,9 +145,6 @@ test.describe("Cryptography", function () {
            const masterKey2 = await fetchMasterKey();
            expect(masterKey1).not.toEqual(masterKey2);
        }).toPass();
-
-        // The dialog should have gone away
-        await expect(page.locator(".mx_Dialog")).toHaveCount(1);
    });

    test(
@@ -22,20 +22,67 @@ test.describe("Room list filters and sort", () => {
        return page.getByRole("listbox", { name: "Room list filters" });
    }

+    /**
+     * Get the room list
+     * @param page
+     */
+    function getRoomList(page: Page) {
+        return page.getByTestId("room-list");
+    }
+
    test.beforeEach(async ({ page, app, bot, user }) => {
        // The notification toast is displayed above the search section
        await app.closeNotificationToast();
    });

-    test.describe("Room list", () => {
-        /**
-         * Get the room list
-         * @param page
-         */
-        function getRoomList(page: Page) {
-            return page.getByTestId("room-list");
-        }
+    test.describe("Scroll behaviour", () => {
+        test("should scroll to the top of list when filter is applied and active room is not in filtered list", async ({
+            page,
+            app,
+        }) => {
+            const createFavouriteRoom = async (name: string) => {
+                const id = await app.client.createRoom({
+                    name,
+                });
+                await app.client.evaluate(async (client, favouriteId) => {
+                    await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
+                }, id);
+            };

+            // Create 5 favourite rooms
+            let i = 0;
+            for (; i < 5; i++) {
+                await createFavouriteRoom(`room${i}-fav`);
+            }
+
+            // Create a non-favourite room
+            await app.client.createRoom({ name: `room-non-fav` });
+
+            // Create rest of the favourite rooms
+            for (; i < 20; i++) {
+                await createFavouriteRoom(`room${i}-fav`);
+            }
+
+            // Open the non-favourite room
+            const roomListView = getRoomList(page);
+            const tile = roomListView.getByRole("gridcell", { name: "Open room room-non-fav" });
+            await tile.scrollIntoViewIfNeeded();
+            await tile.click();
+
+            // Enable Favourite filter
+            const primaryFilters = getPrimaryFilters(page);
+            await primaryFilters.getByRole("option", { name: "Favourite" }).click();
+            await expect(tile).not.toBeVisible();
+
+            // Ensure the room list is not scrolled
+            const isScrolledDown = await page
+                .getByRole("grid", { name: "Room list" })
+                .evaluate((e) => e.scrollTop !== 0);
+            expect(isScrolledDown).toStrictEqual(false);
+        });
+    });
+
+    test.describe("Room list", () => {
        let unReadDmId: string | undefined;
        let unReadRoomId: string | undefined;

@@ -93,29 +140,35 @@ test.describe("Room list filters and sort", () => {
            expect(await roomList.locator("role=gridcell").count()).toBe(3);
        });

-        test("unread filter should only match unread rooms that have a count", async ({ page, app, bot }) => {
-            const roomListView = getRoomList(page);
+        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 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 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 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();
+                // 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();
-        });
+                // 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", () => {
@@ -7,7 +7,7 @@

 import { type Page } from "@playwright/test";

-import { test, expect } from "../../../element-web-test";
+import { expect, test } from "../../../element-web-test";

 test.describe("Room list", () => {
    test.use({
@@ -85,6 +85,48 @@ test.describe("Room list", () => {
            await expect(roomItem).not.toBeVisible();
        });

+        test("should open the notification options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            const roomListView = getRoomList(page);
+
+            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+            await roomItem.hover();
+
+            await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
+            let roomItemMenu = roomItem.getByRole("button", { name: "Notification options" });
+            await roomItemMenu.click();
+
+            // Default settings should be selected
+            await expect(page.getByRole("menuitem", { name: "Match default settings" })).toHaveAttribute(
+                "aria-selected",
+                "true",
+            );
+            await expect(page).toMatchScreenshot("room-list-item-open-notification-options.png");
+
+            // It should make the room muted
+            await page.getByRole("menuitem", { name: "Mute room" }).click();
+
+            // Remove hover on the room list item
+            await roomListView.hover();
+
+            // Scroll to the bottom of the list
+            await page.getByRole("grid", { name: "Room list" }).evaluate((e) => {
+                e.scrollTop = e.scrollHeight;
+            });
+
+            // The room decoration should have the muted icon
+            await expect(roomItem.getByTestId("notification-decoration")).toBeVisible();
+
+            await roomItem.hover();
+            // On hover, the room should show the muted icon
+            await expect(roomItem).toMatchScreenshot("room-list-item-hover-silent.png");
+
+            roomItemMenu = roomItem.getByRole("button", { name: "Notification options" });
+            await roomItemMenu.click();
+            // The Mute room option should be selected
+            await expect(page.getByRole("menuitem", { name: "Mute room" })).toHaveAttribute("aria-selected", "true");
+            await expect(page).toMatchScreenshot("room-list-item-open-notification-options-selection.png");
+        });
+
        test("should scroll to the current room", async ({ page, app, user }) => {
            const roomListView = getRoomList(page);
            await roomListView.hover();
@@ -100,6 +142,73 @@ 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", () => {
+        test.use({ labsFlags: ["feature_video_rooms", "feature_new_room_list"] });
+
+        test("should be a public room", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            // @ts-ignore Visibility enum is not accessible
+            await app.client.createRoom({ name: "public room", visibility: "public" });
+            const roomListView = getRoomList(page);
+            const publicRoom = roomListView.getByRole("gridcell", { name: "public room" });
+
+            await expect(publicRoom).toBeVisible();
+            await expect(publicRoom).toMatchScreenshot("room-list-item-public.png");
+        });
+
+        test("should be a video room", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            await page.getByTestId("room-list-panel").getByRole("button", { name: "Add" }).click();
+            await page.getByRole("menuitem", { name: "New video room" }).click();
+            await page.getByRole("textbox", { name: "Name" }).fill("video room");
+            await page.getByRole("button", { name: "Create video room" }).click();
+
+            const roomListView = getRoomList(page);
+            const videoRoom = roomListView.getByRole("gridcell", { name: "video room" });
+            await expect(videoRoom).toBeVisible();
+            await expect(videoRoom).toMatchScreenshot("room-list-item-video.png");
+        });
    });

    test.describe("Notification decoration", () => {
@@ -162,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);

@@ -43,6 +43,7 @@ test.describe("Pills", () => {

        // go back to the message room and try to click on the pill text, as a user would
        await app.viewRoomByName(messageRoom);
+        await expect(page).toHaveURL(new RegExp(`/#/room/${messageRoomId}`));
        const pillText = page.locator(".mx_EventTile_body .mx_Pill .mx_Pill_text");
        await expect(pillText).toHaveCSS("pointer-events", "none");
        await pillText.click({ force: true }); // force is to ensure we bypass pointer-events
@@ -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,15 +138,55 @@ 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");
+            },
+        );
+
        test.describe("room reporting", () => {
            test.skip(isDendrite, "Dendrite does not implement room reporting");
-            test("should handle reporting a room", async ({ page, app }) => {
+            test("should handle reporting a room", { tag: "@screenshot" }, async ({ page, app }) => {
                await viewRoomSummaryByName(page, app, ROOM_NAME);
+
                await page.getByRole("menuitem", { name: "Report room" }).click();
                const dialog = await page.getByRole("dialog", { name: "Report Room" });
                await dialog.getByLabel("reason").fill("This room should be reported");
+                await expect(dialog).toMatchScreenshot("room-report-dialog.png");
                await dialog.getByRole("button", { name: "Send report" }).click();
-                await expect(page.getByText("Your report was sent.")).toBeVisible();
+
+                // Dialog should have gone
+                await expect(page.locator(".mx_Dialog")).toHaveCount(0);
+            });
+            test("should handle reporting a room and leaving the room", async ({ page, app }) => {
+                await viewRoomSummaryByName(page, app, ROOM_NAME);
+
+                await page.getByRole("menuitem", { name: "Report room" }).click();
+                const dialog = await page.getByRole("dialog", { name: "Report room" });
+                await dialog.getByRole("switch", { name: "Leave room" }).click();
+                await dialog.getByLabel("reason").fill("This room should be reported");
+                await dialog.getByRole("button", { name: "Send report" }).click();
+                await page.getByRole("dialog", { name: "Leave room" }).getByRole("button", { name: "Leave" }).click();
+
+                // Dialog should have gone
+                await expect(page.locator(".mx_Dialog")).toHaveCount(0);
            });
        });
    });
@@ -0,0 +1,74 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Invites", () => {
+    test.use({
+        displayName: "Alice",
+        botCreateOpts: {
+            displayName: "Bob",
+        },
+    });
+
+    test("should render an invite view", { tag: "@screenshot" }, async ({ page, homeserver, user, bot, app }) => {
+        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", {
+            // 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 }) => {
+        const roomId = await bot.createRoom({ is_direct: true });
+        await bot.inviteUser(roomId, user.userId);
+        await app.viewRoomByName("Bob");
+        await page.getByRole("button", { name: "Decline", exact: true }).click();
+        await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+        await expect(
+            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Bob", exact: true }),
+        ).not.toBeVisible();
+    });
+
+    test(
+        "should be able to decline an invite, report the room and ignore the user",
+        { tag: "@screenshot" },
+        async ({ page, homeserver, user, bot, app }) => {
+            const roomId = await bot.createRoom({ is_direct: true });
+            await bot.inviteUser(roomId, user.userId);
+            await app.viewRoomByName("Bob");
+            await page.getByRole("button", { name: "Decline and block" }).click();
+            await page.getByLabel("Ignore user").click();
+            await page.getByLabel("Report room").click();
+            await page.getByLabel("Reason").fill("Do not want the room");
+            const roomReported = page.waitForRequest(
+                (req) =>
+                    req.url().endsWith(`/_matrix/client/v3/rooms/${encodeURIComponent(roomId)}/report`) &&
+                    req.method() === "POST",
+            );
+            await expect(page.getByRole("dialog", { name: "Decline invitation" })).toMatchScreenshot(
+                "Invites_reject_dialog.png",
+            );
+            await page.getByRole("button", { name: "Decline invite" }).click();
+
+            // Check room was reported.
+            await roomReported;
+
+            // Check user is ignored.
+            await app.settings.openUserSettings("Security & Privacy");
+            const ignoredUsersList = page.getByRole("list", { name: "Ignored users" });
+            await ignoredUsersList.scrollIntoViewIfNeeded();
+            await expect(ignoredUsersList.getByRole("listitem", { name: bot.credentials.userId })).toBeVisible();
+        },
+    );
+});
@@ -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;
@@ -255,8 +255,8 @@ test.describe("Sliding Sync", () => {
        // Select the room to reject
        await page.getByRole("treeitem", { name: "Room to Reject" }).click();

-        // Reject the invite
-        await page.locator(".mx_RoomView").getByRole("button", { name: "Reject", exact: true }).click();
+        // Decline the invite
+        await page.locator(".mx_RoomView").getByRole("button", { name: "Decline", exact: true }).click();

        await expect(
            page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
@@ -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();
+    });
+});
@@ -116,6 +116,7 @@
@import "./views/auth/_Welcome.pcss";
@import "./views/avatars/_BaseAvatar.pcss";
@import "./views/avatars/_DecoratedRoomAvatar.pcss";
+@import "./views/avatars/_RoomAvatarView.pcss";
@import "./views/avatars/_WidgetAvatar.pcss";
@import "./views/avatars/_WithPresenceIndicator.pcss";
@import "./views/beta/_BetaCard.pcss";
@@ -278,6 +279,7 @@
@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/_AppsDrawer.pcss";
@import "./views/rooms/_Autocomplete.pcss";
@import "./views/rooms/_AuxPanel.pcss";
@@ -340,8 +342,6 @@
@import "./views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss";
@import "./views/rooms/wysiwyg_composer/components/_LinkModal.pcss";
@import "./views/settings/_AvatarSetting.pcss";
-@import "./views/settings/_CrossSigningPanel.pcss";
-@import "./views/settings/_CryptographyPanel.pcss";
@import "./views/settings/_FontScalingPanel.pcss";
@import "./views/settings/_ImageSizePanel.pcss";
@import "./views/settings/_IntegrationManager.pcss";
@@ -354,7 +354,6 @@
@import "./views/settings/_PhoneNumbers.pcss";
@import "./views/settings/_PowerLevelSelector.pcss";
@import "./views/settings/_RoomProfileSettings.pcss";
-@import "./views/settings/_SecureBackupPanel.pcss";
@import "./views/settings/_SetIntegrationManager.pcss";
@import "./views/settings/_SettingsFieldset.pcss";
@import "./views/settings/_SettingsHeader.pcss";
@@ -380,6 +379,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";
@@ -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;

@@ -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;
@@ -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;
@@ -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));
 }
@@ -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;
@@ -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 {
@@ -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;
    }

@@ -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:
@@ -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%
                );
    }
 }
@@ -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;
@@ -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;
@@ -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,
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
    display: flex;
    margin: 100px auto auto;
    border-radius: 4px;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
+    box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
    background-color: $authpage-modal-bg-color;

    @media only screen and (max-height: 768px) {
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_RoomAvatarView {
+    --room-avatar-size: 32px;
+
+    position: relative;
+
+    /* Keep the container to the same size than the avatar */
+    inline-size: var(--room-avatar-size);
+    block-size: var(--room-avatar-size);
+
+    .mx_RoomAvatarView_RoomAvatar {
+        mask-position: center;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+    }
+
+    .mx_RoomAvatarView_RoomAvatar_icon {
+        mask-image: url("$(res)/img/element-icons/roomlist/room-avatar-view-icon-mask.svg");
+    }
+
+    .mx_RoomAvatarView_RoomAvatar_presence {
+        mask-image: url("$(res)/img/element-icons/roomlist/room-avatar-view-presence-mask.svg");
+    }
+
+    .mx_RoomAvatarView_icon {
+        position: absolute;
+
+        /* Place half the icon inside the avatar */
+        /* Avatar size - (icon size (16px) / 2) */
+        left: calc((var(--room-avatar-size) - 8px));
+        bottom: var(--cpd-space-0-5x);
+    }
+
+    .mx_RoomAvatarView_PresenceDecoration {
+        position: absolute;
+
+        /* Place half the icon inside the avatar */
+        /* Avatar size - (icon size (8px) / 2) */
+        left: calc((var(--room-avatar-size) - 4px));
+        bottom: var(--cpd-space-0-5x);
+    }
+}
@@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details.
    max-height: 80%;

    .mx_CompoundDialog_footer {
-        box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */
+        box-shadow: 0px -4px 4px rgb(0, 0, 0, 0.05); /* hardcoded colour for both themes */
        z-index: 1; /* needed to make footer & shadow appear above dialog content */
    }
 }
@@ -34,13 +34,13 @@ Please see LICENSE files in the repository root for full details.

    .mx_EditHistoryMessage_deletion {
        color: rgb(255, 76, 85);
-        background-color: rgba(255, 76, 85, 0.1);
+        background-color: rgb(255, 76, 85, 0.1);
        text-decoration: line-through;
    }

    .mx_EditHistoryMessage_insertion {
        color: rgb(26, 169, 123);
-        background-color: rgba(26, 169, 123, 0.1);
+        background-color: rgb(26, 169, 123, 0.1);
        text-decoration: underline;
    }

@@ -5,7 +5,8 @@ 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.
 */

-.mx_ReportRoomDialog {
+.mx_ReportRoomDialog,
+.mx_DeclineAndBlockInviteDialog {
    textarea {
        font: var(--cpd-font-body-md-regular);
        border: 1px solid var(--cpd-color-border-interactive-primary);
@@ -13,4 +14,28 @@ Please see LICENSE files in the repository root for full details.
        border-radius: 0.5rem;
        padding: var(--cpd-space-3x) var(--cpd-space-4x);
    }
+
+    /*
+      Workaround to fix labels appearing with the wrong color.
+
+      .mx_Dialog (in res/css/_common.pcss) redefines the body color
+      as $light-fg-color rather than the standard primary color.
+
+      This forces the colour to match the Compound style, but
+      in the future the Dialogs should not force a color.
+    */
+    form label {
+        color: var(--cpd-color-text-primary);
+    }
+}
+
+.mx_DeclineAndBlockInviteDialog {
+    div[aria-disabled="true"] > label {
+        color: var(--cpd-color-text-secondary);
+    }
+
+    .mx_SettingsFlag_label {
+        color: var(--cpd-color-text-primary);
+        font-weight: var(--cpd-font-weight-semibold);
+    }
 }
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_ServerPicker {
    margin-bottom: 14px;
    padding-bottom: $spacing-16;
-    border-bottom: 1px solid rgba(141, 151, 165, 0.2);
+    border-bottom: 1px solid rgb(141, 151, 165, 0.2);
    display: grid;
    grid-template-columns: auto min-content;
    grid-template-rows: auto auto auto;
@@ -20,7 +20,7 @@ Please see LICENSE files in the repository root for full details.
    flex: 1;
    overflow-y: scroll;
    scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+    scrollbar-color: rgb(0, 0, 0, 0.2) transparent;
 }

 .mx_EmojiPicker_header {
@@ -201,7 +201,7 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_EmojiPicker_item_selected {
-    color: rgba(0, 0, 0, 0.5);
+    color: rgb(0, 0, 0, 0.5);
    border: 1px solid $accent;
    padding: 4px;
 }
@@ -76,7 +76,7 @@ Please see LICENSE files in the repository root for full details.
    pointer-events: none;

    span {
-        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
+        box-shadow: 0px 4px 15px rgb(0, 0, 0, 0.15);
        border-radius: 8px;
        padding: $spacing-8;
        background-color: $background;
@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
    overflow: hidden;

    /* Hardcoded colours because it's the same on all themes */
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: rgb(0, 0, 0, 0.6);
    color: #ffffff;
 }

@@ -99,7 +99,7 @@ Please see LICENSE files in the repository root for full details.

        .mx_AccessibleButton_kind_secondary {
            color: $secondary-content;
-            background-color: rgba(141, 151, 165, 0.2);
+            background-color: rgb(141, 151, 165, 0.2);
            font: var(--cpd-font-body-md-semibold);
        }

@@ -125,7 +125,7 @@ Please see LICENSE files in the repository root for full details.
        padding-bottom: 10px;

        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
-        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
+        box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
    }

    .mx_ContextualMenu_chevron_top {
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
        height: 775px;
        right: -253.77px;
        top: 0;
-        background: radial-gradient(49.95% 49.95% at 50% 50%, rgba(13, 189, 139, 0.12) 0%, rgba(18, 115, 235, 0) 100%);
+        background: radial-gradient(49.95% 49.95% at 50% 50%, rgb(13, 189, 139, 0.12) 0%, rgb(18, 115, 235, 0) 100%);
        transform: rotate(-89.69deg);
        overflow: hidden;
    }
@@ -70,7 +70,7 @@ Please see LICENSE files in the repository root for full details.
                    top: var(--cpd-space-2x); /* equal to padding-top of parent */
                    left: 0;
                    border-radius: 12px;
-                    background-color: rgba(141, 151, 165, 0.1);
+                    background-color: rgb(141, 151, 165, 0.1);
                }
            }

@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
        display: flex;
        justify-content: center;
        align-items: center;
-        box-shadow: 0 4px 24px 0 rgba(27, 29, 34, 0.1);
+        box-shadow: 0 4px 24px 0 rgb(27, 29, 34, 0.1);
        background: var(--cpd-color-bg-canvas-default);
    }

@@ -109,6 +109,15 @@ Please see LICENSE files in the repository root for full details.
            font-size: $font-20px;
            line-height: $font-25px;

+            /* E2E icon wrapper */
+            .mx_Flex > span {
+                display: inline-block;
+            }
+        }
+
+        .mx_UserInfo_profile_name {
+            min-height: 30px;
+
            /* limit to 2 lines, show an ellipsis if it overflows */
            /* this looks webkit specific but is supported by Firefox 68+ */
            display: -webkit-box;
@@ -118,15 +127,6 @@ Please see LICENSE files in the repository root for full details.
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
-
-            /* E2E icon wrapper */
-            .mx_Flex > span {
-                display: inline-block;
-            }
-        }
-
-        .mx_UserInfo_profile_name {
-            height: 30px;
        }

        .mx_UserInfo_profile_mxid {
@@ -21,10 +21,6 @@
        }
    }

-    button {
-        color: var(--cpd-color-icon-secondary);
-    }
-
    .mx_SpaceMenu_button {
        svg {
            transition: transform 0.1s linear;
@@ -20,10 +20,6 @@

    &:hover {
        background-color: var(--cpd-color-bg-action-secondary-hovered);
-
-        .mx_RoomListItemView_content {
-            padding-right: var(--cpd-space-1-5x);
-        }
    }

    .mx_RoomListItemView_container {
@@ -39,7 +35,19 @@
            box-sizing: border-box;
            min-width: 0;

-            span {
+            .mx_RoomListItemView_text {
+                min-width: 0;
+            }
+
+            .mx_RoomListItemView_roomName {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .mx_RoomListItemView_messagePreview {
+                font: var(--cpd-font-body-sm-regular);
+                color: var(--cpd-color-text-secondary);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
@@ -71,3 +79,7 @@
        padding-right: var(--cpd-space-3x);
    }
 }
+
+.mx_RoomListItemView_bold .mx_RoomListItemView_roomName {
+    font: var(--cpd-font-body-md-semibold);
+}
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_RoomListSecondaryFilters {
+    font: var(--cpd-font-body-md-medium);
+    margin: var(--cpd-space-2x);
+    margin-left: var(--cpd-space-1x);
+}
+
+.mx_RoomListSecondaryFilters_roomOptionsButton {
+    /* Size the button appropriately (should this be in em, maybe,
+     * so it gets bigger with font size? These values taken from the figma.
+     */
+    width: 28px;
+    height: 28px;
+    margin-left: auto;
+
+    svg {
+        color: var(--cpd-color-icon-primary);
+    }
+}
@@ -312,7 +312,7 @@ Please see LICENSE files in the repository root for full details.
                .mx_MessageTimestamp {
                    border-radius: var(--MBody-border-radius);
                    /* Hardcoded colours because it's the same on all themes */
-                    background-color: rgba(0, 0, 0, 0.6);
+                    background-color: rgb(0, 0, 0, 0.6);
                    color: #ffffff;
                    padding: 0px 4px 0px 4px;
                }
@@ -19,7 +19,7 @@
    border-bottom: 1px solid var(--cpd-color-gray-400);

    /* From figma */
-    box-shadow: 0 var(--cpd-space-2x) var(--cpd-space-6x) calc(var(--cpd-space-2x) * -1) rgba(27, 29, 34, 0.1);
+    box-shadow: 0 var(--cpd-space-2x) var(--cpd-space-6x) calc(var(--cpd-space-2x) * -1) rgb(27, 29, 34, 0.1);

    .mx_PinnedMessageBanner_main {
        background: transparent;
@@ -1,36 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_CrossSigningPanel_statusList {
-    border-spacing: 0;
-
-    th {
-        text-align: start;
-    }
-
-    td,
-    th {
-        padding: 0;
-
-        &:first-of-type {
-            padding-inline-end: 1em;
-        }
-    }
-}
-
-.mx_CrossSigningPanel_buttonRow {
-    margin: 1em 0;
-
-    :nth-child(n + 1) {
-        margin-inline-end: 10px;
-    }
-}
-
-.mx_CrossSigningPanel_advanced {
-    width: fit-content;
-}
@@ -1,32 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_CryptographyPanel_sessionInfo {
-    padding: 0em;
-    border-spacing: 0px;
-}
-.mx_CryptographyPanel_sessionInfo > tr {
-    vertical-align: baseline;
-    padding: 0em;
-
-    th {
-        text-align: start;
-    }
-
-    td,
-    th {
-        padding: 0 1em 0 0;
-    }
-}
-
-.mx_CryptographyPanel_importExportButtons {
-    display: inline-flex;
-    flex-flow: wrap;
-    row-gap: $spacing-8;
-    column-gap: $spacing-8;
-}
@@ -1,44 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
-Copyright 2018 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_SecureBackupPanel_deviceName {
-    font-style: italic;
-}
-
-.mx_SecureBackupPanel_buttonRow {
-    margin: 1em 0;
-    display: inline-flex;
-    flex-flow: wrap;
-    row-gap: 10px;
-
-    :nth-child(n + 1) {
-        margin-inline-end: 10px;
-    }
-}
-
-.mx_SecureBackupPanel_statusList {
-    border-spacing: 0;
-
-    th {
-        text-align: start;
-    }
-
-    td,
-    th {
-        padding: 0;
-
-        &:first-of-type {
-            padding-inline-end: 1em;
-        }
-    }
-}
-
-.mx_SecureBackupPanel_advanced {
-    width: fit-content;
-}
@@ -12,7 +12,7 @@
    padding: var(--cpd-space-10x);
    border-radius: var(--cpd-space-4x);
    /* From figma */
-    box-shadow: 0 1.2px 2.4px 0 rgba(27, 29, 34, 0.15);
+    box-shadow: 0 1.2px 2.4px 0 rgb(27, 29, 34, 0.15);
    border: 1px solid var(--cpd-color-gray-400);

    .mx_EncryptionCard_header {
@@ -0,0 +1,28 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MediaPreviewAccountSetting_Radio {
+    margin: var(--cpd-space-1x) 0;
+}
+
+.mx_MediaPreviewAccountSetting {
+    margin-top: var(--cpd-space-1x);
+}
+
+.mx_MediaPreviewAccountSetting_RadioHelp {
+    margin-top: 0;
+    margin-bottom: var(--cpd-space-1x);
+}
+
+.mx_MediaPreviewAccountSetting_Form {
+    width: 100%;
+}
+
+.mx_MediaPreviewAccountSetting_ToggleSwitch {
+    font: var(--cpd-font-body-md-medium);
+    letter-spacing: var(--cpd-font-letter-spacing-body-md);
+}
@@ -11,6 +11,12 @@ Please see LICENSE files in the repository root for full details.
    column-gap: $spacing-8;
 }

+.mx_SecurityUserSettingsTab_ignoredUsers {
+    padding-left: 0;
+    margin: 0;
+    list-style: none;
+}
+
 .mx_SecurityUserSettingsTab_ignoredUser {
    margin-bottom: $spacing-4;
 }
@@ -46,10 +46,8 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_VerificationShowSas_emojiSas_label {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
    font-size: $font-12px;
+    word-break: break-all;
 }

 .mx_VerificationShowSas_emojiSas_break {
@@ -95,7 +95,7 @@ Please see LICENSE files in the repository root for full details.
                    height: 100%;
                    left: 0;
                    right: 0;
-                    background-color: rgba(0, 0, 0, 0.6);
+                    background-color: rgb(0, 0, 0, 0.6);
                }
            }

@@ -144,7 +144,7 @@ Please see LICENSE files in the repository root for full details.
        border-radius: 8px;

        background-color: $system;
-        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+        box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.2);

        .mx_LegacyCallViewButtons {
            bottom: 13px;
@@ -56,7 +56,7 @@ Please see LICENSE files in the repository root for full details.
        width: 24px;
        height: 24px;

-        background-color: rgba(0, 0, 0, 0.5); /* Same on both themes */
+        background-color: rgb(0, 0, 0, 0.5); /* Same on both themes */
        border-radius: 100%;

        &::before {
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M32 0H0V32H32C26.4772 32 22 27.5228 22 22C22 16.4772 26.4772 12 32 12V0Z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M36 -4H-4V36H36V30.4722C34.9385 31.4223 33.5367 32 32 32C28.6863 32 26 29.3137 26 26C26 22.6863 28.6863 20 32 20C33.5367 20 34.9385 20.5777 36 21.5278V-4Z" />
+</svg>
--- a/Show More
+++ b/Show More