v1.11.98-rc.0

Upgrade dependency to matrix-js-sdk@37.4.0-rc.0
Refactor RoomAvatar into a functional component. (#29743 )
2025-04-15 13:29:49 +00:00 · 2025-04-15 13:22:58 +00:00 · 2025-04-15 09:23:26 +00:00 · 2025-04-15 08:41:04 +00:00 · 2025-04-15 08:01:35 +00:00 · 2025-04-15 07:43:28 +00:00
634 changed files with 13499 additions and 10203 deletions
--- a/.github/workflows/docker.yaml
+++ b/.github/workflows/docker.yaml
@@ -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@0505d8b04853a30189aee66f5bb7fd1511bbac71 # v4
              if: github.event_name != 'pull_request'
              continue-on-error: true
              with:
--- a/.github/workflows/static_analysis.yaml
+++ b/.github/workflows/static_analysis.yaml
@@ -51,6 +51,7 @@ jobs:
                error|invalid_json
                error|misconfigured
                welcome_to_element
+                devtools|settings|elementCallUrl

    rethemendex_lint:
        name: "Rethemendex Check"
--- a/.github/workflows/tests.yml
+++ b/.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@fe98467f9071758c7fc214af9dbac7f301bd23d4
+              uses: guibranco/github-status-action-v2@9b1d102b3c32583174557f58c53e3b09d43d1b1d
              with:
                  authToken: ${{ secrets.GITHUB_TOKEN }}
                  state: success
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,81 @@
+Changes in [1.11.97](https://github.com/element-hq/element-web/releases/tag/v1.11.97) (2025-04-08)
+==================================================================================================
+## ✨ Features
+
+* New room list: reduce padding between avatar and room list border ([#29634](https://github.com/element-hq/element-web/pull/29634)). Contributed by @florianduros.
+* Bundle Element Call with Element Web packages ([#29309](https://github.com/element-hq/element-web/pull/29309)). Contributed by @t3chguy.
+* Hide an event notification if it is redacted ([#29605](https://github.com/element-hq/element-web/pull/29605)). Contributed by @Half-Shot.
+* Docker: Use nginx-unprivileged as base image ([#29353](https://github.com/element-hq/element-web/pull/29353)). Contributed by @AndrewFerr.
+* Switch away from nesting React trees and mangling the DOM ([#29586](https://github.com/element-hq/element-web/pull/29586)). Contributed by @t3chguy.
+* New room list: add notification decoration ([#29552](https://github.com/element-hq/element-web/pull/29552)). Contributed by @florianduros.
+* RoomListStore: Unread filter should match rooms that were marked as unread ([#29580](https://github.com/element-hq/element-web/pull/29580)). Contributed by @MidhunSureshR.
+* Add support for hiding videos ([#29496](https://github.com/element-hq/element-web/pull/29496)). Contributed by @Half-Shot.
+* Use an outline icon for the report room button ([#29573](https://github.com/element-hq/element-web/pull/29573)). Contributed by @robintown.
+* Generate/load pickle key on SSO ([#29568](https://github.com/element-hq/element-web/pull/29568)). Contributed by @Jujure.
+* Add report room dialog button/dialog. ([#29513](https://github.com/element-hq/element-web/pull/29513)). Contributed by @Half-Shot.
+* RoomListViewModel: Make the active room sticky in the list ([#29551](https://github.com/element-hq/element-web/pull/29551)). Contributed by @MidhunSureshR.
+* Replace checkboxes with Compound checkboxes, and appropriately label each checkbox. ([#29363](https://github.com/element-hq/element-web/pull/29363)). Contributed by @Half-Shot.
+* New room list: add selection decoration ([#29531](https://github.com/element-hq/element-web/pull/29531)). Contributed by @florianduros.
+* Simplified Sliding Sync ([#28515](https://github.com/element-hq/element-web/pull/28515)). Contributed by @dbkr.
+* Add ability to hide images after clicking "show image" ([#29467](https://github.com/element-hq/element-web/pull/29467)). Contributed by @Half-Shot.
+
+## 🐛 Bug Fixes
+
+* Fix scroll issues in memberlist ([#29392](https://github.com/element-hq/element-web/pull/29392)). Contributed by @MidhunSureshR.
+* Ensure clicks on spoilers do not get handled by the hidden content ([#29618](https://github.com/element-hq/element-web/pull/29618)). Contributed by @t3chguy.
+* New room list: add cursor pointer on room list item ([#29627](https://github.com/element-hq/element-web/pull/29627)). Contributed by @florianduros.
+* Fix missing ambiguous url tooltips on Element Desktop ([#29619](https://github.com/element-hq/element-web/pull/29619)). Contributed by @t3chguy.
+* New room list: fix spacing and padding ([#29607](https://github.com/element-hq/element-web/pull/29607)). Contributed by @florianduros.
+* Make fetchdep check out matching branch name ([#29601](https://github.com/element-hq/element-web/pull/29601)). Contributed by @dbkr.
+* Fix MFileBody fileName not considering `filename` ([#29589](https://github.com/element-hq/element-web/pull/29589)). Contributed by @t3chguy.
+* Fix token expiry racing with login causing wrong error to be shown ([#29566](https://github.com/element-hq/element-web/pull/29566)). Contributed by @t3chguy.
+* Fix bug which caused startup to hang if the clock was wound back since a previous session ([#29558](https://github.com/element-hq/element-web/pull/29558)). Contributed by @richvdh.
+* RoomListViewModel: Reset any primary filter on secondary filter change ([#29562](https://github.com/element-hq/element-web/pull/29562)). Contributed by @MidhunSureshR.
+* RoomListStore: Unread filter should only filter rooms having unread counts ([#29555](https://github.com/element-hq/element-web/pull/29555)). Contributed by @MidhunSureshR.
+* In force-verify mode, prevent bypassing by cancelling device verification ([#29487](https://github.com/element-hq/element-web/pull/29487)). Contributed by @andybalaam.
+* Add title attribute to user identifier ([#29547](https://github.com/element-hq/element-web/pull/29547)). Contributed by @arpitbatra123.
+
+
+Changes in [1.11.96](https://github.com/element-hq/element-web/releases/tag/v1.11.96) (2025-03-25)
+==================================================================================================
+## ✨ Features
+
+* RoomListViewModel: Track the index of the active room in the list ([#29519](https://github.com/element-hq/element-web/pull/29519)). Contributed by @MidhunSureshR.
+* New room list: add empty state ([#29512](https://github.com/element-hq/element-web/pull/29512)). Contributed by @florianduros.
+* Implement `MessagePreviewViewModel` ([#29514](https://github.com/element-hq/element-web/pull/29514)). Contributed by @MidhunSureshR.
+* RoomListViewModel: Add functionality to toggle message preview setting ([#29511](https://github.com/element-hq/element-web/pull/29511)). Contributed by @MidhunSureshR.
+* New room list: add more options menu on room list item ([#29445](https://github.com/element-hq/element-web/pull/29445)). Contributed by @florianduros.
+* RoomListViewModel: Provide a way to resort the room list and track the active sort method ([#29499](https://github.com/element-hq/element-web/pull/29499)). Contributed by @MidhunSureshR.
+* Change \*All rooms\* meta space name to \*All Chats\* ([#29498](https://github.com/element-hq/element-web/pull/29498)). Contributed by @florianduros.
+* Add setting to hide avatars of rooms you have been invited to. ([#29497](https://github.com/element-hq/element-web/pull/29497)). Contributed by @Half-Shot.
+* Room List Store: Save preferred sorting algorithm and use that on app launch ([#29493](https://github.com/element-hq/element-web/pull/29493)). Contributed by @MidhunSureshR.
+* Add key storage toggle to Encryption settings ([#29310](https://github.com/element-hq/element-web/pull/29310)). Contributed by @dbkr.
+* New room list: add primary filters ([#29481](https://github.com/element-hq/element-web/pull/29481)). Contributed by @florianduros.
+* Implement MSC4142: Remove unintentional intentional mentions in replies ([#28209](https://github.com/element-hq/element-web/pull/28209)). Contributed by @tulir.
+* White background for 'They do not match' button ([#29470](https://github.com/element-hq/element-web/pull/29470)). Contributed by @andybalaam.
+* RoomListViewModel: Support secondary filters in the view model ([#29465](https://github.com/element-hq/element-web/pull/29465)). Contributed by @MidhunSureshR.
+* RoomListViewModel: Support primary filters in the view model ([#29454](https://github.com/element-hq/element-web/pull/29454)). Contributed by @MidhunSureshR.
+* Room List Store: Implement secondary filters ([#29458](https://github.com/element-hq/element-web/pull/29458)). Contributed by @MidhunSureshR.
+* Room List Store: Implement rest of the primary filters ([#29444](https://github.com/element-hq/element-web/pull/29444)). Contributed by @MidhunSureshR.
+* Room List Store: Support filters by implementing just the favourite filter ([#29433](https://github.com/element-hq/element-web/pull/29433)). Contributed by @MidhunSureshR.
+* Move toggle switch for integration manager for a11y ([#29436](https://github.com/element-hq/element-web/pull/29436)). Contributed by @Half-Shot.
+* New room list: basic flat list ([#29368](https://github.com/element-hq/element-web/pull/29368)). Contributed by @florianduros.
+* Improve rageshake upload experience by providing useful error information ([#29378](https://github.com/element-hq/element-web/pull/29378)). Contributed by @Half-Shot.
+* Add more functionality to the room list vm ([#29402](https://github.com/element-hq/element-web/pull/29402)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* New room list: fix compose menu action in space  ([#29500](https://github.com/element-hq/element-web/pull/29500)). Contributed by @florianduros.
+* Change ToggleHiddenEventVisibility \& GoToHome KeyBindingActions ([#29374](https://github.com/element-hq/element-web/pull/29374)). Contributed by @gy-mate.
+* Fix Docker Healthcheck ([#29471](https://github.com/element-hq/element-web/pull/29471)). Contributed by @benbz.
+* Room List Store: Fetch rooms after space store is ready + attach store to window ([#29453](https://github.com/element-hq/element-web/pull/29453)). Contributed by @MidhunSureshR.
+* Room List Store: Fix bug where left rooms appear in room list ([#29452](https://github.com/element-hq/element-web/pull/29452)). Contributed by @MidhunSureshR.
+* Add space to the bottom of the room summary actions below leave room ([#29270](https://github.com/element-hq/element-web/pull/29270)). Contributed by @langleyd.
+* Show error screens in group calls ([#29254](https://github.com/element-hq/element-web/pull/29254)). Contributed by @robintown.
+* Prevent user from accidentally triggering multiple identity resets ([#29388](https://github.com/element-hq/element-web/pull/29388)). Contributed by @uhoreg.
+* Remove buggy tooltip on room intro \& homepage ([#29406](https://github.com/element-hq/element-web/pull/29406)). Contributed by @t3chguy.
+
+
 Changes in [1.11.95](https://github.com/element-hq/element-web/releases/tag/v1.11.95) (2025-03-11)
 ==================================================================================================
 ## ✨ Features
--- a/12
+++ b/12
@@ -19,7 +19,10 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json

 # App
-FROM nginx:alpine-slim
+FROM nginxinc/nginx-unprivileged:alpine-slim
+
+# Need root user to install packages & manipulate the usr directory
+USER root

 # Install jq and moreutils for sponge, both used by our entrypoints
 RUN apk add jq moreutils
@@ -31,13 +34,6 @@ COPY --from=builder /src/webapp /app
 COPY /docker/nginx-templates/* /etc/nginx/templates/
 COPY /docker/docker-entrypoint.d/* /docker-entrypoint.d/

-# Tell nginx to put its pidfile elsewhere, so it can run as non-root
-RUN sed -i -e 's,/var/run/nginx.pid,/tmp/nginx.pid,' /etc/nginx/nginx.conf
-
-# nginx user must own the cache and etc directory to write cache and tweak the nginx config
-RUN chown -R nginx:0 /var/cache/nginx /etc/nginx
-RUN chmod -R g+w /var/cache/nginx /etc/nginx
-
 RUN rm -rf /usr/share/nginx/html \
  && ln -s /app /usr/share/nginx/html

--- a/contribute.json
+++ b/contribute.json
@@ -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"]
-}
--- a/docs/SUMMARY.md
+++ b/docs/SUMMARY.md
@@ -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)
--- a/docs/config.md
+++ b/docs/config.md
@@ -384,8 +384,6 @@ The VoIP and Jitsi options are:
 5. `audio_stream_url`: Optional URL to pass to Jitsi to enable live streaming. This option is considered experimental and may be removed
   at any time without notice.
 6. `element_call`: Optional configuration for native group calls using Element Call, with the following subkeys:
-    - `url`: The URL of the Element Call instance to use for native group calls. This option is considered experimental
-      and may be removed at any time without notice. Defaults to `https://call.element.io`.
    - `use_exclusively`: A boolean specifying whether Element Call should be used exclusively as the only VoIP stack in
      the app, removing the ability to start legacy 1:1 calls or Jitsi calls. Defaults to `false`.
    - `participant_limit`: The maximum number of users who can join a call; if
--- a/knip.ts
+++ b/knip.ts
@@ -40,6 +40,8 @@ export default {
        // Used by webpack
        "process",
        "util",
+        // Embedded into webapp
+        "@element-hq/element-call-embedded",
    ],
    ignoreBinaries: [
        // Used in scripts & workflows
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.11.95",
+    "version": "1.11.98-rc.0",
    "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": [
@@ -65,16 +64,18 @@
        "test:playwright:screenshots": "playwright-screenshots --project=Chrome",
        "coverage": "yarn test --coverage",
        "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
-        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
+        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
+        "postinstall": "patch-package"
    },
    "resolutions": {
+        "**/pretty-format/react-is": "19.0.0",
        "@playwright/test": "1.51.1",
-        "@types/react": "18.3.18",
-        "@types/react-dom": "18.3.5",
+        "@types/react": "19.0.10",
+        "@types/react-dom": "19.0.4",
        "oidc-client-ts": "3.2.0",
        "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001704",
-        "testcontainers": "10.21.0",
+        "caniuse-lite": "1.0.30001707",
+        "testcontainers": "10.23.0",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
    },
@@ -92,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.7.2",
-        "@vector-im/matrix-wysiwyg": "2.38.2",
+        "@vector-im/compound-web": "^7.10.1",
+        "@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",
@@ -107,6 +108,7 @@
        "css-tree": "^3.0.0",
        "diff-dom": "^5.0.0",
        "diff-match-patch": "^1.0.5",
+        "domutils": "^3.2.2",
        "emojibase-regex": "15.3.2",
        "escape-html": "^1.0.3",
        "file-saver": "^2.0.5",
@@ -115,12 +117,12 @@
        "glob-to-regexp": "^0.4.1",
        "highlight.js": "^11.3.1",
        "html-entities": "^2.0.0",
+        "html-react-parser": "^5.2.2",
        "is-ip": "^3.1.0",
        "js-xxhash": "^4.0.0",
        "jsrsasign": "^11.0.0",
        "jszip": "^3.7.0",
        "katex": "^0.16.0",
-        "linkify-element": "4.2.0",
        "linkify-react": "4.2.0",
        "linkify-string": "4.2.0",
        "linkifyjs": "4.2.0",
@@ -128,7 +130,7 @@
        "maplibre-gl": "^5.0.0",
        "matrix-encrypt-attachment": "^1.0.3",
        "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+        "matrix-js-sdk": "37.4.0-rc.0",
        "matrix-widget-api": "^1.10.0",
        "memoize-one": "^6.0.0",
        "mime": "^4.0.4",
@@ -139,18 +141,19 @@
        "posthog-js": "1.157.2",
        "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"
@@ -177,6 +180,7 @@
        "@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-web-playwright-common": "^1.1.5",
        "@peculiar/webcrypto": "^1.4.3",
        "@playwright/test": "^1.50.1",
@@ -207,11 +211,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.0.10",
        "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "18.3.5",
+        "@types/react-dom": "19.0.4",
        "@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",
@@ -263,6 +267,7 @@
        "minimist": "^1.2.6",
        "modernizr": "^3.12.0",
        "node-fetch": "^2.6.7",
+        "patch-package": "^8.0.0",
        "playwright-core": "^1.51.0",
        "postcss": "8.4.46",
        "postcss-easings": "^4.0.0",
--- a/patches/@matrix-org+react-sdk-module-api+2.5.0.patch
+++ b/patches/@matrix-org+react-sdk-module-api+2.5.0.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts b/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
+index 917a7fc..a2710c6 100644
+--- a/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
+++ b/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
+@@ -37,7 +37,7 @@ export interface ModuleApi {
+      * @returns Whether the user submitted the dialog or closed it, and the model returned by the
+      * dialog component if submitted.
+      */
+-    openDialog<M extends object, P extends DialogProps = DialogProps, C extends DialogContent<P> = DialogContent<P>>(initialTitleOrOptions: string | ModuleUiDialogOptions, body: (props: P, ref: React.RefObject<C>) => React.ReactNode, props?: Omit<P, keyof DialogProps>): Promise<{
+    openDialog<M extends object, P extends DialogProps = DialogProps, C extends DialogContent<P> = DialogContent<P>>(initialTitleOrOptions: string | ModuleUiDialogOptions, body: (props: P, ref: React.RefObject<C | null>) => React.ReactNode, props?: Omit<P, keyof DialogProps>): Promise<{
+         didOkOrSubmit: boolean;
+         model: M;
+     }>;
--- a/patches/@types+react+19.0.10.patch
+++ b/patches/@types+react+19.0.10.patch
@@ -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.
--- a/patches/react-blurhash+0.3.0.patch
+++ b/patches/react-blurhash+0.3.0.patch
@@ -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 };
--- a/playwright/e2e/crypto/backups.spec.ts
+++ b/playwright/e2e/crypto/backups.spec.ts
@@ -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();
-        },
-    );
-});
--- a/playwright/e2e/crypto/crypto.spec.ts
+++ b/playwright/e2e/crypto/crypto.spec.ts
@@ -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,85 +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 }) => {
-        const secretStorageKey = await enableKeyBackup(app);
+        await app.client.bootstrapCrossSigning(aliceCredentials);
+        await enableKeyBackup(app);

        // Fetch the current cross-signing keys
        async function fetchMasterKey() {
@@ -176,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);
@@ -197,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(
--- a/playwright/e2e/crypto/dehydration.spec.ts
+++ b/playwright/e2e/crypto/dehydration.spec.ts
@@ -27,16 +27,22 @@ test.use({
 test.describe("Dehydration", () => {
    test.skip(isDendrite, "does not yet support dehydration v2");

-    test("'Set up secure backup' creates dehydrated device", async ({ page, user, app }, workerInfo) => {
-        // Create a backup (which will create SSSS, and dehydrated device)
+    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)

        const securityTab = await app.settings.openUserSettings("Security & Privacy");
-
-        await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
        await expect(securityTab.getByText("Offline device enabled")).not.toBeVisible();
-        await securityTab.getByRole("button", { name: "Set up", exact: true }).click();

-        await completeCreateSecretStorageDialog(page);
+        await app.closeDialog();
+
+        // Verify the device by resetting the 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();
+        await page.getByRole("button", { name: "Continue" }).click();
+        await page.getByRole("button", { name: "Done" }).click();

        await expectDehydratedDeviceEnabled(app);

--- a/playwright/e2e/crypto/event-shields.spec.ts
+++ b/playwright/e2e/crypto/event-shields.spec.ts
@@ -324,7 +324,7 @@ test.describe("Cryptography", function () {
            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
            await lastE2eIcon.focus();
            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
-                "Sender's verified identity has changed",
+                "Sender's verified identity was reset",
            );
        });
    });
--- a/playwright/e2e/crypto/invisible-crypto.spec.ts
+++ b/playwright/e2e/crypto/invisible-crypto.spec.ts
@@ -52,6 +52,6 @@ test.describe("Invisible cryptography", () => {
        /* should show an error for a message from a previously verified device */
        await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
        const lastTile = page.locator(".mx_EventTile_last");
-        await expect(lastTile).toContainText("Sender's verified identity has changed");
+        await expect(lastTile).toContainText("Sender's verified identity was reset");
    });
 });
--- a/playwright/e2e/crypto/utils.ts
+++ b/playwright/e2e/crypto/utils.ts
@@ -292,17 +292,28 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
 }

 /**
- * Open the security settings and enable secure key backup.
- *
- * Assumes that the current device has been cross-signed (which means that we skip a step where we set it up).
+ * Open the encryption settings and enable key storage and recovery
+ * Assumes that the current device has been verified
 *
 * Returns the recovery key
 */
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
-    await app.settings.openUserSettings("Security & Privacy");
-    await app.page.getByRole("button", { name: "Set up Secure Backup" }).click();
+    const encryptionTab = await app.settings.openUserSettings("Encryption");

-    return await completeCreateSecretStorageDialog(app.page);
+    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+    if (!(await keyStorageToggle.isChecked())) {
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+    }
+
+    await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
+    await encryptionTab.getByRole("button", { name: "Continue" }).click();
+
+    const recoveryKey = await encryptionTab.getByTestId("recoveryKey").innerText();
+    await encryptionTab.getByRole("button", { name: "Continue" }).click();
+    await encryptionTab.getByRole("textbox").fill(recoveryKey);
+    await encryptionTab.getByRole("button", { name: "Finish set up" }).click();
+    await app.settings.closeDialog();
+    return recoveryKey;
 }

 /**
--- a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
@@ -22,31 +22,82 @@ 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("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", () => {
-        /**
-         * Get the room list
-         * @param page
-         */
-        function getRoomList(page: Page) {
-            return page.getByTestId("room-list");
-        }
+        let unReadDmId: string | undefined;
+        let unReadRoomId: string | undefined;

        test.beforeEach(async ({ page, app, bot, user }) => {
            await app.client.createRoom({ name: "empty room" });

-            const unReadDmId = await bot.createRoom({
+            unReadDmId = await bot.createRoom({
                name: "unread dm",
                invite: [user.userId],
                is_direct: true,
            });
+            await app.client.joinRoom(unReadDmId);
            await bot.sendMessage(unReadDmId, "I am a robot. Beep.");

-            const unReadRoomId = await app.client.createRoom({ name: "unread room" });
+            unReadRoomId = await app.client.createRoom({ name: "unread room" });
            await app.client.inviteUser(unReadRoomId, bot.credentials.userId);
            await bot.joinRoom(unReadRoomId);
            await bot.sendMessage(unReadRoomId, "I am a robot. Beep.");
@@ -88,6 +139,30 @@ test.describe("Room list filters and sort", () => {
            await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
            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);
+
+            // 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!
+            await expect(roomListView.getByRole("gridcell", { name: "Open room unread room" })).toBeVisible();
+            await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
+        });
    });

    test.describe("Empty room list", () => {
--- a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
@@ -7,12 +7,15 @@

 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({
        displayName: "Alice",
        labsFlags: ["feature_new_room_list"],
+        botCreateOpts: {
+            displayName: "BotBob",
+        },
    });

    /**
@@ -26,71 +29,267 @@ test.describe("Room list", () => {
    test.beforeEach(async ({ page, app, user }) => {
        // The notification toast is displayed above the search section
        await app.closeNotificationToast();
-        for (let i = 0; i < 30; i++) {
-            await app.client.createRoom({ name: `room${i}` });
-        }
    });

-    test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
-        const roomListView = getRoomList(page);
-        await expect(roomListView.getByRole("gridcell", { name: "Open room room29" })).toBeVisible();
-        await expect(roomListView).toMatchScreenshot("room-list.png");
+    test.describe("Room list", () => {
+        test.beforeEach(async ({ page, app, user }) => {
+            for (let i = 0; i < 30; i++) {
+                await app.client.createRoom({ name: `room${i}` });
+            }
+        });

-        await roomListView.hover();
-        // Scroll to the end of the room list
-        await page.mouse.wheel(0, 1000);
-        await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
-        await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
+        test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            const roomListView = getRoomList(page);
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room29" })).toBeVisible();
+            await expect(roomListView).toMatchScreenshot("room-list.png");
+
+            await roomListView.hover();
+            // Scroll to the end of the room list
+            await page.mouse.wheel(0, 1000);
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+            await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
+        });
+
+        test("should open the room when it is clicked", async ({ page, app, user }) => {
+            const roomListView = getRoomList(page);
+            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+            await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
+        });
+
+        test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            const roomListView = getRoomList(page);
+            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+            await roomItem.hover();
+
+            await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
+            const roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
+            await roomItemMenu.click();
+            await expect(page).toMatchScreenshot("room-list-item-open-more-options.png");
+
+            // It should make the room favourited
+            await page.getByRole("menuitemcheckbox", { name: "Favourited" }).click();
+
+            // Check that the room is favourited
+            await roomItem.hover();
+            await roomItemMenu.click();
+            await expect(page.getByRole("menuitemcheckbox", { name: "Favourited" })).toBeChecked();
+            // It should show the invite dialog
+            await page.getByRole("menuitem", { name: "invite" }).click();
+            await expect(page.getByRole("heading", { name: "Invite to room29" })).toBeVisible();
+            await app.closeDialog();
+
+            // It should leave the room
+            await roomItem.hover();
+            await roomItemMenu.click();
+            await page.getByRole("menuitem", { name: "leave room" }).click();
+            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();
+            // Scroll to the end of the room list
+            await page.mouse.wheel(0, 1000);
+
+            await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();
+
+            const filters = page.getByRole("listbox", { name: "Room list filters" });
+            await filters.getByRole("option", { name: "People" }).click();
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).not.toBeVisible();
+
+            await filters.getByRole("option", { name: "People" }).click();
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+        });
    });

-    test("should open the room when it is clicked", async ({ page, app, user }) => {
-        const roomListView = getRoomList(page);
-        await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
-        await expect(page.getByRole("heading", { name: "room29", 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("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
-        const roomListView = getRoomList(page);
-        const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
-        await roomItem.hover();
+    test.describe("Notification decoration", () => {
+        test("should render the invitation decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            const roomListView = getRoomList(page);

-        await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
-        const roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
-        await roomItemMenu.click();
-        await expect(page).toMatchScreenshot("room-list-item-open-more-options.png");
+            await bot.createRoom({
+                name: "invited room",
+                invite: [user.userId],
+                is_direct: true,
+            });
+            const invitedRoom = roomListView.getByRole("gridcell", { name: "invited room" });
+            await expect(invitedRoom).toBeVisible();
+            await expect(invitedRoom).toMatchScreenshot("room-list-item-invited.png");
+        });

-        // It should make the room favourited
-        await page.getByRole("menuitemcheckbox", { name: "Favourited" }).click();
+        test("should render the regular decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            const roomListView = getRoomList(page);

-        // Check that the room is favourited
-        await roomItem.hover();
-        await roomItemMenu.click();
-        await expect(page.getByRole("menuitemcheckbox", { name: "Favourited" })).toBeChecked();
-        // It should show the invite dialog
-        await page.getByRole("menuitem", { name: "invite" }).click();
-        await expect(page.getByRole("heading", { name: "Invite to room29" })).toBeVisible();
-        await app.closeDialog();
+            const roomId = await app.client.createRoom({ name: "2 notifications" });
+            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await bot.joinRoom(roomId);

-        // It should leave the room
-        await roomItem.hover();
-        await roomItemMenu.click();
-        await page.getByRole("menuitem", { name: "leave room" }).click();
-        await expect(roomItem).not.toBeVisible();
-    });
+            await bot.sendMessage(roomId, "I am a robot. Beep.");
+            await bot.sendMessage(roomId, "I am a robot. Beep.");

-    test("should scroll to the current room", async ({ page, app, user }) => {
-        const roomListView = getRoomList(page);
-        await roomListView.hover();
-        // Scroll to the end of the room list
-        await page.mouse.wheel(0, 1000);
+            const room = roomListView.getByRole("gridcell", { name: "2 notifications" });
+            await expect(room).toBeVisible();
+            await expect(room.getByTestId("notification-decoration")).toHaveText("2");
+            await expect(room).toMatchScreenshot("room-list-item-notification.png");
+        });

-        await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();
+        test("should render the mention decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            const roomListView = getRoomList(page);

-        const filters = page.getByRole("listbox", { name: "Room list filters" });
-        await filters.getByRole("option", { name: "People" }).click();
-        await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).not.toBeVisible();
+            const roomId = await app.client.createRoom({ name: "mention" });
+            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await bot.joinRoom(roomId);

-        await filters.getByRole("option", { name: "People" }).click();
-        await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+            const clientBot = await bot.prepareClient();
+            await clientBot.evaluate(
+                async (client, { roomId, userId }) => {
+                    await client.sendMessage(roomId, {
+                        // @ts-ignore ignore usage of MsgType.text
+                        "msgtype": "m.text",
+                        "body": "User",
+                        "format": "org.matrix.custom.html",
+                        "formatted_body": `<a href="https://matrix.to/#/${userId}">User</a>`,
+                        "m.mentions": {
+                            user_ids: [userId],
+                        },
+                    });
+                },
+                { roomId, userId: user.userId },
+            );
+            await bot.sendMessage(roomId, "I am a robot. Beep.");
+
+            const room = roomListView.getByRole("gridcell", { name: "mention" });
+            await expect(room).toBeVisible();
+            await expect(room).toMatchScreenshot("room-list-item-mention.png");
+        });
+
+        test("should render an activity decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            const roomListView = getRoomList(page);
+
+            const otherRoomId = await app.client.createRoom({ name: "other room" });
+
+            const roomId = await app.client.createRoom({ name: "activity" });
+            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await bot.joinRoom(roomId);
+
+            await app.viewRoomById(roomId);
+            await app.settings.openRoomSettings("Notifications");
+            await page.getByText("@mentions & keywords").click();
+            await app.settings.closeDialog();
+
+            await app.settings.openUserSettings("Notifications");
+            await page.getByText("Show all activity in the room list (dots or number of unread messages)").click();
+            await app.settings.closeDialog();
+
+            // Switch to the other room to avoid the notification to be cleared
+            await app.viewRoomById(otherRoomId);
+            await bot.sendMessage(roomId, "I am a robot. Beep.");
+
+            const room = roomListView.getByRole("gridcell", { name: "activity" });
+            await expect(room.getByTestId("notification-decoration")).toBeVisible();
+            await expect(room).toMatchScreenshot("room-list-item-activity.png");
+        });
+
+        test("should render a mark as unread decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            const roomListView = getRoomList(page);
+
+            const roomId = await app.client.createRoom({ name: "mark as unread" });
+            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await bot.joinRoom(roomId);
+
+            const room = roomListView.getByRole("gridcell", { name: "mark as unread" });
+            await room.hover();
+            await room.getByRole("button", { name: "More Options" }).click();
+            await page.getByRole("menuitem", { name: "mark as unread" }).click();
+
+            // Remove hover on the room list item
+            await roomListView.hover();
+
+            await expect(room).toMatchScreenshot("room-list-item-mark-as-unread.png");
+        });
+
+        test("should render silent decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+            const roomListView = getRoomList(page);
+
+            const roomId = await app.client.createRoom({ name: "silent" });
+            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await bot.joinRoom(roomId);
+
+            await app.viewRoomById(roomId);
+            await app.settings.openRoomSettings("Notifications");
+            await page.getByText("Off").click();
+            await app.settings.closeDialog();
+
+            const room = roomListView.getByRole("gridcell", { name: "silent" });
+            await expect(room.getByTestId("notification-decoration")).toBeVisible();
+            await expect(room).toMatchScreenshot("room-list-item-silent.png");
+        });
    });
 });
--- a/playwright/e2e/login/login-consent.spec.ts
+++ b/playwright/e2e/login/login-consent.spec.ts
@@ -13,6 +13,7 @@ import { selectHomeserver } from "../utils";
 import { type Credentials, type HomeserverInstance } from "../../plugins/homeserver";
 import { consentHomeserver } from "../../plugins/homeserver/synapse/consentHomeserver.ts";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { createBot } from "../crypto/utils.ts";

 // This test requires fixed credentials for the device signing keys below to work
 const username = "user1234";
@@ -258,6 +259,34 @@ test.describe("Login", () => {

                    await expect(h1.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
                });
+
+                test("Continues to show verification prompt after cancelling device verification", async ({
+                    page,
+                    homeserver,
+                    credentials,
+                }) => {
+                    // Create a different device which is cross-signed, meaning we need to verify this device
+                    await createBot(page, homeserver, credentials, true);
+
+                    // Wait to avoid homeserver rate limit on logins
+                    await page.waitForTimeout(100);
+
+                    // Load the page and see that we are asked to verify
+                    await page.goto("/#/welcome");
+                    await login(page, homeserver, credentials);
+                    let h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
+                    await expect(h1).toBeVisible();
+
+                    // Click "Verify with another device"
+                    await page.getByRole("button", { name: "Verify with another device" }).click();
+
+                    // Cancel the new dialog
+                    await page.getByRole("button", { name: "Close dialog" }).click();
+
+                    // Check that we are still being asked to verify
+                    h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
+                    await expect(h1).toBeVisible();
+                });
            });
        });
    });
--- a/playwright/e2e/oidc/oidc-native.spec.ts
+++ b/playwright/e2e/oidc/oidc-native.spec.ts
@@ -73,4 +73,33 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
        await revokeAccessTokenPromise;
        await revokeRefreshTokenPromise;
    });
+
+    test(
+        "it should log out the user & wipe data when logging out via MAS",
+        { tag: "@screenshot" },
+        async ({ mas, page, mailpitClient }, testInfo) => {
+            // We use this over the `user` fixture to ensure we get an OIDC session rather than a compatibility one
+            await page.goto("/#/login");
+            await page.getByRole("button", { name: "Continue" }).click();
+
+            const userId = `alice_${testInfo.testId}`;
+            await registerAccountMas(page, mailpitClient, userId, "alice@email.com", "Pa$sW0rD!");
+
+            await expect(page.getByText("Welcome")).toBeVisible();
+            await page.goto("about:blank");
+
+            // @ts-expect-error
+            const result = await mas.manage("kill-sessions", userId);
+            expect(result.output).toContain("Ended 1 active OAuth 2.0 session");
+
+            await page.goto("http://localhost:8080");
+            await expect(
+                page.getByText("For security, this session has been signed out. Please sign in again."),
+            ).toBeVisible();
+            await expect(page).toMatchScreenshot("token-expired.png", { includeDialogBackground: true });
+
+            const localStorageKeys = await page.evaluate(() => Object.keys(localStorage));
+            expect(localStorageKeys).toHaveLength(0);
+        },
+    );
 });
--- a/playwright/e2e/regression-tests/pills-click-in-app.spec.ts
+++ b/playwright/e2e/regression-tests/pills-click-in-app.spec.ts
@@ -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
--- a/playwright/e2e/right-panel/right-panel.spec.ts
+++ b/playwright/e2e/right-panel/right-panel.spec.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -10,6 +10,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";

 const ROOM_NAME = "Test room";
 const ROOM_NAME_LONG =
@@ -133,6 +134,34 @@ test.describe("RightPanel", () => {
            await page.getByLabel("Room info").nth(1).click();
            await checkRoomSummaryCard(page, ROOM_NAME);
        });
+        test.describe("room reporting", () => {
+            test.skip(isDendrite, "Dendrite does not implement room reporting");
+            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();
+
+                // 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);
+            });
+        });
    });

    test.describe("in spaces", () => {
--- a/playwright/e2e/room/invites.spec.ts
+++ b/playwright/e2e/room/invites.spec.ts
@@ -0,0 +1,67 @@
+/*
+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");
+    });
+
+    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();
+        },
+    );
+});
--- a/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2023 Suguru Hirahara

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -50,8 +50,8 @@ test.describe("Appearance user settings tab", () => {
        // Click "Show advanced" link button
        await tab.getByRole("button", { name: "Show advanced" }).click();

-        await tab.locator(".mx_Checkbox", { hasText: "Use bundled emoji font" }).click();
-        await tab.locator(".mx_Checkbox", { hasText: "Use a system font" }).click();
+        await tab.getByLabel("Use bundled emoji font").click();
+        await tab.getByLabel("Use a system font").click();

        // Assert that the font-family value was removed
        await expect(page.locator("body")).toHaveCSS("font-family", '""');
--- a/playwright/e2e/settings/preferences-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/preferences-user-settings-tab.spec.ts
@@ -28,7 +28,10 @@ test.describe("Preferences user settings tab", () => {
        const tab = await app.settings.openUserSettings("Preferences");
        // Assert that the top heading is rendered
        await expect(tab.getByRole("heading", { name: "Preferences" })).toBeVisible();
-        await expect(tab).toMatchScreenshot("Preferences-user-settings-tab-should-be-rendered-properly-1.png");
+        await expect(tab).toMatchScreenshot("Preferences-user-settings-tab-should-be-rendered-properly-1.png", {
+            // masked due to daylight saving time
+            mask: [tab.locator("#mx_dropdownUserTimezone_value")],
+        });
    });

    test("should be able to change the app language", { tag: ["@no-firefox", "@no-webkit"] }, async ({ uut, user }) => {
--- a/playwright/e2e/sliding-sync/sliding-sync.spec.ts
+++ b/playwright/e2e/sliding-sync/sliding-sync.spec.ts
@@ -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"),
--- a/playwright/e2e/spaces/spaces.spec.ts
+++ b/playwright/e2e/spaces/spaces.spec.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -35,17 +35,18 @@ function spaceCreateOptions(spaceName: string, roomIds: string[] = []): ICreateR
                    name: spaceName,
                },
            },
-            ...roomIds.map(spaceChildInitialState),
+            ...roomIds.map((r) => spaceChildInitialState(r)),
        ],
    };
 }

-function spaceChildInitialState(roomId: string): ICreateRoomOpts["initial_state"]["0"] {
+function spaceChildInitialState(roomId: string, order?: string): ICreateRoomOpts["initial_state"]["0"] {
    return {
        type: "m.space.child",
        state_key: roomId,
        content: {
            via: [roomId.split(":")[1]],
+            order,
        },
    };
 }
@@ -121,9 +122,10 @@ test.describe("Spaces", () => {
        await page.getByRole("button", { name: "Skip for now" }).click();

        // Assert rooms exist in the room list
-        await expect(page.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
-        await expect(page.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
-        await expect(page.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();
+        const roomList = page.getByRole("tree", { name: "Rooms" });
+        await expect(roomList.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
+        await expect(roomList.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
+        await expect(roomList.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();

        // Assert rooms exist in the space explorer
        await expect(
@@ -155,7 +157,7 @@ test.describe("Spaces", () => {

        await page.getByRole("button", { name: "Just me" }).click();

-        await page.getByText("Sample Room").click({ force: true }); // force click as checkbox size is zero
+        await page.getByRole("checkbox", { name: "Sample Room" }).click();

        // Temporal implementation as multiple elements with the role "button" and name "Add" are found
        await page.locator(".mx_AddExistingToSpace_footer").getByRole("button", { name: "Add" }).click();
@@ -165,6 +167,50 @@ test.describe("Spaces", () => {
        ).toBeVisible();
    });

+    test(
+        "should allow user to add an existing room to a space after creation",
+        { tag: "@screenshot" },
+        async ({ page, app, user }) => {
+            await app.client.createRoom({
+                name: "Sample Room",
+            });
+            await app.client.createRoom({
+                name: "A Room that will not be selected",
+            });
+
+            const menu = await openSpaceCreateMenu(page);
+            await menu.getByRole("button", { name: "Private" }).click();
+
+            await menu
+                .locator('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
+                .setInputFiles("playwright/sample-files/riot.png");
+            await expect(menu.getByRole("textbox", { name: "Address" })).not.toBeVisible();
+            await menu
+                .getByRole("textbox", { name: "Description" })
+                .fill("This is a personal space to mourn Riot.im...");
+            await menu.getByRole("textbox", { name: "Name" }).fill("This is my Riot");
+            await menu.getByRole("textbox", { name: "Name" }).press("Enter");
+
+            await page.getByRole("button", { name: "Just me" }).click();
+
+            await page.getByRole("button", { name: "Skip for now" }).click();
+
+            await page.getByRole("button", { name: "Add room" }).click();
+            await page.getByRole("menuitem", { name: "Add existing room" }).click();
+
+            await page.getByRole("checkbox", { name: "Sample Room" }).click();
+
+            await expect(page.getByRole("dialog", { name: "Avatar Add existing rooms" })).toMatchScreenshot(
+                "add-existing-rooms-dialog.png",
+            );
+
+            await page.getByRole("button", { name: "Add" }).click();
+            await expect(
+                page.locator(".mx_SpaceHierarchy_list").getByRole("treeitem", { name: "Sample Room" }),
+            ).toBeVisible();
+        },
+    );
+
    test("should allow user to invite another to a space", { tag: "@no-webkit" }, async ({ page, app, user, bot }) => {
        await app.client.createSpace({
            visibility: "public" as any,
@@ -291,4 +337,36 @@ test.describe("Spaces", () => {
        // Assert we get shown the new room intro, and thus not the soft crash screen
        await expect(page.locator(".mx_NewRoomIntro")).toBeVisible();
    });
+
+    test("should render spaces view", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
+        axe.disableRules([
+            // Disable this check as it triggers on nested roving tab index elements which are in practice fine
+            "nested-interactive",
+            // XXX: We have some known contrast issues here
+            "color-contrast",
+        ]);
+
+        const childSpaceId1 = await app.client.createSpace({
+            name: "Child Space 1",
+            initial_state: [],
+        });
+        const childSpaceId2 = await app.client.createSpace({
+            name: "Child Space 2",
+            initial_state: [],
+        });
+        const childSpaceId3 = await app.client.createSpace({
+            name: "Child Space 3",
+            initial_state: [],
+        });
+        await app.client.createSpace({
+            name: "Root Space",
+            initial_state: [
+                spaceChildInitialState(childSpaceId1, "a"),
+                spaceChildInitialState(childSpaceId2, "b"),
+                spaceChildInitialState(childSpaceId3, "c"),
+            ],
+        });
+        await app.viewSpaceByName("Root Space");
+        await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png");
+    });
 });
--- a/playwright/e2e/timeline/timeline.spec.ts
+++ b/playwright/e2e/timeline/timeline.spec.ts
@@ -28,6 +28,8 @@ const NEW_AVATAR = fs.readFileSync("playwright/sample-files/element.png");
 const OLD_NAME = "Alan";
 const NEW_NAME = "Alan (away)";

+const VIDEO_FILE = fs.readFileSync("playwright/sample-files/5secvid.webm");
+
 const getEventTilesWithBodies = (page: Page): Locator => {
    return page.locator(".mx_EventTile").filter({ has: page.locator(".mx_EventTile_body") });
 };
@@ -916,7 +918,27 @@ test.describe("Timeline", () => {
            await page.getByRole("button", { name: "Hide" }).click();

            // Check that the image is now hidden.
-            await expect(page.getByRole("link", { name: "Show image" })).toBeVisible();
+            await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
+        });
+
+        test("should be able to hide a video", async ({ page, app, room, context }) => {
+            await app.viewRoomById(room.roomId);
+            const upload = await app.client.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
+            await app.client.sendEvent(room.roomId, null, "m.room.message" as EventType, {
+                msgtype: "m.video" as MsgType,
+                body: "bbb.webm",
+                url: upload.content_uri,
+            });
+
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MVideoBody").first();
+            await expect(imgTile).toBeVisible();
+            await imgTile.hover();
+            await page.getByRole("button", { name: "Hide" }).click();
+
+            // Check that the video is now hidden.
+            await expect(page.getByRole("button", { name: "Show video" })).toBeVisible();
+            await expect(page.locator("video")).not.toBeVisible();
        });
    });

@@ -1319,4 +1341,44 @@ test.describe("Timeline", () => {
            );
        });
    });
+
+    test.describe("spoilers", { tag: "@screenshot" }, () => {
+        test("clicking a spoiler containing the pill de-spoilers on 1st click, then follows link on 2nd", async ({
+            page,
+            user,
+            app,
+            room,
+        }) => {
+            // View room
+            await page.goto(`/#/room/${room.roomId}`);
+
+            // Send a spoilered pill
+            await app.client.sendMessage(room.roomId, {
+                msgtype: "m.text",
+                body: user.userId,
+                format: "org.matrix.custom.html",
+                formatted_body: `<span data-mx-spoiler>https://matrix.to/#/${user.userId}</span>`,
+            });
+
+            const screenshotOptions = {
+                css: `
+                    .mx_MessageTimestamp {
+                        display: none !important;
+                    }
+                `,
+            };
+
+            const eventTile = page.locator(".mx_RoomView_body .mx_EventTile_last");
+            await expect(eventTile).toMatchScreenshot("spoiler.png", screenshotOptions);
+
+            const rightPanelButton = page.getByText("Share profile");
+            const pill = page.locator(".mx_UserPill");
+            await pill.click({ force: true }); // force to click the spoiler wrapper instead
+            await expect(eventTile).toMatchScreenshot("spoiler-uncovered.png", screenshotOptions);
+            await expect(rightPanelButton).not.toBeVisible(); // assert the right panel is not yet open
+
+            await pill.click();
+            await expect(rightPanelButton).toBeVisible(); // assert the right panel is open
+        });
+    });
 });
--- a/playwright/pages/ElementAppPage.ts
+++ b/playwright/pages/ElementAppPage.ts
@@ -114,7 +114,7 @@ export class ElementAppPage {
     * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
     */
    public getComposerField(isRightPanel?: boolean): Locator {
-        return this.getComposer(isRightPanel).locator("[contenteditable]");
+        return this.getComposer(isRightPanel).locator("div[contenteditable]");
    }

    /**
--- a/playwright/sample-files/5secvid.webm
+++ b/playwright/sample-files/5secvid.webm
--- a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png
--- a/playwright/snapshots/oidc/oidc-native.spec.ts/token-expired-linux.png
+++ b/playwright/snapshots/oidc/oidc-native.spec.ts/token-expired-linux.png
--- a/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png
+++ b/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png
--- a/playwright/snapshots/right-panel/right-panel.spec.ts/with-leave-room-linux.png
+++ b/playwright/snapshots/right-panel/right-panel.spec.ts/with-leave-room-linux.png
--- a/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png
+++ b/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png
--- a/playwright/snapshots/room/invites.spec.ts/Invites-room-view-linux.png
+++ b/playwright/snapshots/room/invites.spec.ts/Invites-room-view-linux.png
--- a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
+++ b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
--- a/playwright/snapshots/settings/encryption-user-tab/encryption-tab.spec.ts/default-tab-linux.png
+++ b/playwright/snapshots/settings/encryption-user-tab/encryption-tab.spec.ts/default-tab-linux.png
--- a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
+++ b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
--- a/playwright/snapshots/settings/quick-settings-menu.spec.ts/quick-settings-linux.png
+++ b/playwright/snapshots/settings/quick-settings-menu.spec.ts/quick-settings-linux.png
--- a/playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png
+++ b/playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png
--- a/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png
+++ b/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/spoiler-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/spoiler-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png
--- a/playwright/testcontainers/synapse.ts
+++ b/playwright/testcontainers/synapse.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.

 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";

-const TAG = "develop@sha256:4285f51332a658ba6d4871b04d33f49261e6118e751d70fd2894aca97bd587c3";
+const TAG = "develop@sha256:66955f34a593cfc3b6e77b8d5510c60c6094f5bade8a17d2feaefbb8662ccf09";

 /**
 * SynapseContainer which freezes the docker digest to stabilise tests,
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -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";
@@ -128,7 +129,6 @@
@import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
@import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
@import "./views/dialogs/_BugReportDialog.pcss";
-@import "./views/dialogs/_BulkRedactDialog.pcss";
@import "./views/dialogs/_ChangelogDialog.pcss";
@import "./views/dialogs/_CompoundDialog.pcss";
@import "./views/dialogs/_ConfirmSpaceUserActionDialog.pcss";
@@ -153,6 +153,7 @@
@import "./views/dialogs/_ModalWidgetDialog.pcss";
@import "./views/dialogs/_PollCreateDialog.pcss";
@import "./views/dialogs/_RegistrationEmailPromptDialog.pcss";
+@import "./views/dialogs/_ReportRoomDialog.pcss";
@import "./views/dialogs/_RoomSettingsDialog.pcss";
@import "./views/dialogs/_RoomSettingsDialogBridges.pcss";
@import "./views/dialogs/_RoomUpgradeDialog.pcss";
@@ -212,7 +213,6 @@
@import "./views/elements/_ServerPicker.pcss";
@import "./views/elements/_SettingsFlag.pcss";
@import "./views/elements/_Spinner.pcss";
-@import "./views/elements/_StyledCheckbox.pcss";
@import "./views/elements/_StyledRadioButton.pcss";
@import "./views/elements/_SyntaxHighlight.pcss";
@import "./views/elements/_TagComposer.pcss";
@@ -228,6 +228,7 @@
@import "./views/messages/_DisambiguatedProfile.pcss";
@import "./views/messages/_EventTileBubble.pcss";
@import "./views/messages/_HiddenBody.pcss";
+@import "./views/messages/_HiddenMediaPlaceholder.pcss";
@import "./views/messages/_JumpToDatePicker.pcss";
@import "./views/messages/_LegacyCallEvent.pcss";
@import "./views/messages/_MEmoteBody.pcss";
@@ -340,8 +341,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 +353,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";
--- a/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss
+++ b/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -16,9 +16,9 @@ Please see LICENSE files in the repository root for full details.
 .mx_SelectableDeviceTile_checkbox {
    flex: 1 0;

-    .mx_Checkbox_background + div {
-        flex: 1 0;
-        /* override more specific selector */
-        margin-left: $spacing-16 !important;
+    > div {
+        margin-top: auto;
+        margin-bottom: auto;
+        margin-right: var(--cpd-space-1x);
    }
 }
--- a/res/css/structures/_QuickSettingsButton.pcss
+++ b/res/css/structures/_QuickSettingsButton.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -70,38 +70,26 @@ Please see LICENSE files in the repository root for full details.
        text-transform: uppercase;
        color: var(--cpd-color-text-secondary);
        margin: 20px 0 12px;
-    }
-
-    .mx_QuickSettingsButton_pinToSidebarHeading {
-        padding-left: 24px;
        position: relative;
-    }
-
-    .mx_Checkbox {
-        margin-bottom: 8px;
-    }
-
-    .mx_QuickSettingsButton_favouritesCheckbox,
-    .mx_QuickSettingsButton_peopleCheckbox {
-        .mx_Checkbox_background + div {
-            padding-left: 22px;
-            position: relative;
-            margin-left: 6px;
-            font-size: $font-15px;
-            line-height: $font-24px;
-            color: var(--cpd-color-text-primary);
-        }
+        display: flex;
    }

    .mx_QuickSettingsButton_moreOptionsButton {
-        padding-left: 22px;
-        margin-left: 22px;
+        margin-left: var(--cpd-space-7x);
        font-size: $font-15px;
        line-height: $font-24px;
        color: var(--cpd-color-text-primary);
        position: relative;
        margin-bottom: 16px;
    }
+
+    .mx_QuickSettingsButton_option {
+        margin-bottom: var(--cpd-space-3x);
+        label {
+            /* Correctly line up icons and text. */
+            display: flex;
+        }
+    }
 }

 .mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
@@ -111,15 +99,10 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_QuickSettingsButton_icon {
-    // TODO remove when all icons have fill=currentColor
-    * {
-        fill: $secondary-content;
-    }
+    margin-right: var(--cpd-space-1x);
    color: $secondary-content;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
+    width: 18px;
+    height: 18px;
+    margin-top: auto;
+    margin-bottom: auto;
 }
--- a/res/css/structures/_SpaceHierarchy.pcss
+++ b/res/css/structures/_SpaceHierarchy.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -247,15 +247,6 @@ Please see LICENSE files in the repository root for full details.
                    .mx_AccessibleButton_kind_primary_outline {
                        padding: 3px 16px; /* to account for the 1px border */
                    }
-
-                    .mx_Checkbox {
-                        display: inline-flex;
-
-                        label {
-                            width: 16px;
-                            height: 16px;
-                        }
-                    }
                }

                &:hover,
--- a/res/css/views/avatars/_RoomAvatarView.pcss
+++ b/res/css/views/avatars/_RoomAvatarView.pcss
@@ -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);
+    }
+}
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -32,6 +32,11 @@ Please see LICENSE files in the repository root for full details.
    .mx_AddExistingToSpace_section {
        margin-right: 12px;

+        ul {
+            list-style: none;
+            padding-left: 0;
+        }
+
        // provides space for scrollbar so that checkbox and scrollbar do not collide

        &:not(:first-child) {
@@ -214,6 +219,12 @@ Please see LICENSE files in the repository root for full details.
    display: flex;
    margin-top: 12px;

+    form {
+        /* Align checkboxes. */
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+
    .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
        margin-right: 12px;
    }
@@ -227,8 +238,4 @@ Please see LICENSE files in the repository root for full details.
        text-overflow: ellipsis;
        margin-right: 12px;
    }
-
-    .mx_Checkbox {
-        align-items: center;
-    }
 }
--- a/res/css/views/dialogs/_BulkRedactDialog.pcss
+++ b/res/css/views/dialogs/_BulkRedactDialog.pcss
@@ -1,19 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 Robin Townsend <robin@robin.town>
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_BulkRedactDialog {
-    .mx_Checkbox,
-    .mx_BulkRedactDialog_checkboxMicrocopy {
-        line-height: $font-20px;
-    }
-
-    .mx_BulkRedactDialog_checkboxMicrocopy {
-        margin-left: 26px;
-        color: $secondary-content;
-    }
-}
--- a/res/css/views/dialogs/_ExportDialog.pcss
+++ b/res/css/views/dialogs/_ExportDialog.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -43,11 +43,6 @@ Please see LICENSE files in the repository root for full details.
        .mx_Field_valid.mx_Field:focus-within {
            border-color: $input-border-color;
        }
-
-        .mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
-            background: $info-plinth-fg-color;
-            border-color: $info-plinth-fg-color;
-        }
    }

    .mx_ExportDialog_progress {
--- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
+++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -74,10 +74,6 @@ Please see LICENSE files in the repository root for full details.
                line-height: $font-15px;
                color: $tertiary-content;
            }
-
-            .mx_Checkbox {
-                align-items: center;
-            }
        }
    }

--- a/res/css/views/dialogs/_ReportRoomDialog.pcss
+++ b/res/css/views/dialogs/_ReportRoomDialog.pcss
@@ -0,0 +1,41 @@
+/*
+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_ReportRoomDialog,
+.mx_DeclineAndBlockInviteDialog {
+    textarea {
+        font: var(--cpd-font-body-md-regular);
+        border: 1px solid var(--cpd-color-border-interactive-primary);
+        background: var(--cpd-color-bg-canvas-default);
+        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);
+    }
+}
--- a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss
+++ b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -19,13 +19,6 @@ Please see LICENSE files in the repository root for full details.
        margin-top: 20px;
        font-size: $font-15px;
        line-height: $font-15px;
-
-        .mx_WidgetCapabilitiesPromptDialog_byline {
-            color: $muted-fg-color;
-            margin-left: 26px;
-            font-size: $font-12px;
-            line-height: $font-12px;
-        }
    }

    .mx_Dialog_buttons {
--- a/res/css/views/elements/_LabelledCheckbox.pcss
+++ b/res/css/views/elements/_LabelledCheckbox.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -7,26 +7,5 @@ Please see LICENSE files in the repository root for full details.
 */

 .mx_LabelledCheckbox {
-    display: flex;
-    gap: 8px;
-    flex-direction: row;
-
-    .mx_Checkbox {
-        margin-top: 3px; /* visually align with label text */
-    }
-
-    .mx_LabelledCheckbox_labels {
-        flex: 1;
-
-        .mx_LabelledCheckbox_label {
-            vertical-align: middle;
-        }
-
-        .mx_LabelledCheckbox_byline {
-            display: block;
-            padding-top: $spacing-4;
-            color: $muted-fg-color;
-            font-size: $font-11px;
-        }
-    }
+    margin-top: var(--cpd-space-2x);
 }
--- a/res/css/views/elements/_StyledCheckbox.pcss
+++ b/res/css/views/elements/_StyledCheckbox.pcss
@@ -1,98 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_Checkbox {
-    $size: $font-16px;
-    $border-radius: 0.27rem;
-
-    display: flex;
-    align-items: flex-start;
-
-    input[type="checkbox"] {
-        appearance: none;
-        margin: 0;
-        padding: 0;
-
-        & + label {
-            display: flex;
-            align-items: center;
-
-            flex-grow: 1;
-        }
-
-        & + label > .mx_Checkbox_background {
-            display: inline-flex;
-            position: relative;
-
-            flex-shrink: 0;
-
-            height: $size;
-            width: $size;
-            size: 0.5rem;
-            border: 1px solid var(--cpd-color-border-interactive-primary);
-            box-sizing: border-box;
-            border-radius: $border-radius;
-
-            .mx_Checkbox_checkmark {
-                display: none;
-
-                height: 100%;
-                width: 100%;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-                mask-position: center;
-                mask-size: 100%;
-                mask-repeat: no-repeat;
-            }
-        }
-
-        &:checked + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-            display: block;
-        }
-
-        & + label > *:not(.mx_Checkbox_background) {
-            margin-left: 10px;
-        }
-
-        &:disabled + label {
-            cursor: not-allowed;
-        }
-
-        &:focus-visible {
-            & + label .mx_Checkbox_background {
-                @mixin unreal-focus;
-            }
-        }
-    }
-}
-
-.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
-    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-        background: var(--cpd-color-icon-on-solid-primary);
-    }
-
-    &:checked + label > .mx_Checkbox_background {
-        background: var(--cpd-color-bg-accent-rest);
-        border-color: var(--cpd-color-bg-accent-rest);
-    }
-
-    &:checked:disabled + label > .mx_Checkbox_background {
-        background: var(--cpd-color-bg-action-primary-disabled);
-        border-color: var(--cpd-color-bg-action-primary-disabled);
-    }
-}
-
-.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
-    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-        background: var(--cpd-color-bg-accent-rest);
-    }
-
-    &:checked + label > .mx_Checkbox_background {
-        background: transparent;
-        border-color: var(--cpd-color-bg-accent-rest);
-    }
-}
--- a/res/css/views/messages/_HiddenMediaPlaceholder.pcss
+++ b/res/css/views/messages/_HiddenMediaPlaceholder.pcss
@@ -0,0 +1,29 @@
+.mx_HiddenMediaPlaceholder {
+    border: none;
+    width: 100%;
+    height: 100%;
+    inset: 0;
+
+    /* To center the text in the middle of the frame */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    cursor: pointer;
+    background-color: $header-panel-bg-color;
+
+    > div {
+        color: $accent;
+        /* Icon alignment */
+        display: flex;
+        > svg {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+    }
+}
+
+.mx_EventTile:hover .mx_HiddenMediaPlaceholder {
+    background-color: $background;
+}
--- a/res/css/views/messages/_MImageBody.pcss
+++ b/res/css/views/messages/_MImageBody.pcss
@@ -79,39 +79,3 @@ Please see LICENSE files in the repository root for full details.
    color: $imagebody-giflabel-color;
    pointer-events: none;
 }
-
-.mx_HiddenImagePlaceholder {
-    position: absolute;
-    inset: 0;
-
-    /* To center the text in the middle of the frame */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-
-    cursor: pointer;
-    background-color: $header-panel-bg-color;
-
-    .mx_HiddenImagePlaceholder_button {
-        color: $accent;
-
-        span.mx_HiddenImagePlaceholder_eye {
-            margin-right: 8px;
-
-            background-color: $accent;
-            mask-image: url("$(res)/img/element-icons/eye.svg");
-            display: inline-block;
-            width: 18px;
-            height: 14px;
-        }
-
-        span:not(.mx_HiddenImagePlaceholder_eye) {
-            vertical-align: text-bottom;
-        }
-    }
-}
-
-.mx_EventTile:hover .mx_HiddenImagePlaceholder {
-    background-color: $background;
-}
--- a/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/res/css/views/right_panel/_RoomSummaryCard.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -101,6 +101,6 @@ Please see LICENSE files in the repository root for full details.
    margin: $spacing-12 0 $spacing-4;
 }

-.mx_RoomSummaryCard_leave {
+.mx_RoomSummaryCard_bottomOptions {
    margin: 0 0 var(--cpd-space-8x);
 }
--- a/res/css/views/right_panel/_UserInfo.pcss
+++ b/res/css/views/right_panel/_UserInfo.pcss
@@ -119,9 +119,6 @@ Please see LICENSE files in the repository root for full details.
            word-break: break-all;
            text-overflow: ellipsis;

-            /* Don't spill over the container */
-            width: 90%;
-
            /* E2E icon wrapper */
            .mx_Flex > span {
                display: inline-block;
@@ -130,15 +127,11 @@ Please see LICENSE files in the repository root for full details.

        .mx_UserInfo_profile_name {
            height: 30px;
-            text-wrap: nowrap;
        }

        .mx_UserInfo_profile_mxid {
            color: var(--cpd-color-text-secondary);
            height: 28px;
-            max-width: 100%;
-            /* MXIDs are one long "word" */
-            word-break: break-all;
        }

        .mx_UserInfo_profileStatus {
--- a/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss
@@ -21,10 +21,6 @@
        }
    }

-    button {
-        color: var(--cpd-color-icon-secondary);
-    }
-
    .mx_SpaceMenu_button {
        svg {
            transition: transform 0.1s linear;
--- a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
@@ -16,18 +16,22 @@
 */
 .mx_RoomListItemView {
    all: unset;
+    cursor: pointer;

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

    .mx_RoomListItemView_container {
-        padding-left: var(--cpd-space-3x);
+        padding-left: var(--cpd-space-2x);
        font: var(--cpd-font-body-md-regular);
        height: 100%;

        .mx_RoomListItemView_content {
-            padding-right: var(--cpd-space-3x);
            height: 100%;
            flex: 1;
            /* The border is only under the room name and the future hover menu  */
@@ -35,7 +39,7 @@
            box-sizing: border-box;
            min-width: 0;

-            span {
+            .mx_RoomListItemView_roomName {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
@@ -46,8 +50,28 @@

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

 .mx_RoomListItemView_selected {
    background-color: var(--cpd-color-bg-action-secondary-pressed);
 }
+
+.mx_RoomListItemView_notification_decoration {
+    .mx_RoomListItemView_content {
+        padding-right: var(--cpd-space-2x);
+    }
+}
+
+.mx_RoomListItemView_empty {
+    .mx_RoomListItemView_content {
+        padding-right: var(--cpd-space-3x);
+    }
+}
+
+.mx_RoomListItemView_bold .mx_RoomListItemView_roomName {
+    font: var(--cpd-font-body-md-semibold);
+}
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -816,11 +816,13 @@ $left-gutter: 64px;
    .mx_EventTile_spoiler_content {
        filter: blur(5px) saturate(0.1) sepia(1);
        transition-duration: 0.5s;
+        pointer-events: none;
    }

    &.visible > .mx_EventTile_spoiler_content {
        filter: none;
        user-select: auto;
+        pointer-events: auto;
    }
 }

--- a/res/css/views/rooms/_RoomSublist.pcss
+++ b/res/css/views/rooms/_RoomSublist.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -393,8 +393,7 @@ Please see LICENSE files in the repository root for full details.
        margin-bottom: 4px;
    }

-    .mx_StyledRadioButton,
-    .mx_Checkbox {
+    .mx_StyledRadioButton {
        margin-top: 8px;
    }
 }
--- a/res/css/views/settings/_CrossSigningPanel.pcss
+++ b/res/css/views/settings/_CrossSigningPanel.pcss
@@ -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;
-}
--- a/res/css/views/settings/_CryptographyPanel.pcss
+++ b/res/css/views/settings/_CryptographyPanel.pcss
@@ -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;
-}
--- a/res/css/views/settings/_SecureBackupPanel.pcss
+++ b/res/css/views/settings/_SecureBackupPanel.pcss
@@ -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;
-}
--- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
@@ -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;
 }
--- a/res/css/views/settings/tabs/user/_SidebarUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_SidebarUserSettingsTab.pcss
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -14,17 +14,12 @@ Please see LICENSE files in the repository root for full details.
    }
 }

-.mx_SidebarUserSettingsTab_checkbox {
-    margin-bottom: $spacing-8;
-    /* override checkbox styles */
-    label {
-        align-items: flex-start !important;
-    }
-
-    svg {
-        height: 16px;
-        width: 16px;
-        margin-right: $spacing-8;
-        margin-bottom: -1px;
-    }
+.mx_SidebarUserSettingsTab_icon {
+    margin-right: var(--cpd-space-2x);
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.mx_SidebarUserSettingsTab_checkbox label {
+    display: flex;
 }
--- a/res/css/views/verification/_VerificationShowSas.pcss
+++ b/res/css/views/verification/_VerificationShowSas.pcss
@@ -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 {
--- a/res/img/element-icons/roomlist/room-avatar-view-icon-mask.svg
+++ b/res/img/element-icons/roomlist/room-avatar-view-icon-mask.svg
@@ -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>
--- a/res/img/element-icons/roomlist/room-avatar-view-presence-mask.svg
+++ b/res/img/element-icons/roomlist/room-avatar-view-presence-mask.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/scripts/docker-package.sh
+++ b/scripts/docker-package.sh
@@ -3,7 +3,6 @@
 set -ex

 BRANCH=$(git rev-parse --abbrev-ref HEAD)
-DIST_VERSION=$(git describe --abbrev=0 --tags)

 DIR=$(dirname "$0")

@@ -13,6 +12,8 @@ DIR=$(dirname "$0")
 if [[ $BRANCH != HEAD && ! $BRANCH =~ heads/v.+ ]]
 then
    DIST_VERSION=$("$DIR"/get-version-from-git.sh)
+else
+    DIST_VERSION=$(git describe --abbrev=0 --tags)
 fi

 DIST_VERSION=$("$DIR"/normalize-version.sh "$DIST_VERSION")
--- a/scripts/fetchdep.sh
+++ b/scripts/fetchdep.sh
@@ -45,10 +45,7 @@ getPRInfo() {

 # Some CIs don't give us enough info, so we just get the PR number and ask the
 # GH API for more info - "fork:branch". Some give us this directly.
-if [ -n "$BUILDKITE_BRANCH" ]; then
-    # BuildKite
-    head=$BUILDKITE_BRANCH
-elif [ -n "$PR_NUMBER" ]; then
+if [ -n "$PR_NUMBER" ]; then
    # GitHub
    getPRInfo $PR_NUMBER
 elif [ -n "$REVIEW_ID" ]; then
@@ -79,11 +76,14 @@ if [[ "$GITHUB_EVENT_NAME" == "merge_group" ]]; then
    clone $deforg $defrepo ${withoutPrefix%%/pr-*}
 fi

-# Try the target branch of the push or PR.
-if [ -n "$GITHUB_BASE_REF" ]; then
-    clone $deforg $defrepo $GITHUB_BASE_REF
-elif [ -n "$BUILDKITE_PULL_REQUEST_BASE_BRANCH" ]; then
-    clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH
+# Try the target branch of the push or PR, or the branch that was pushed to
+# (ie. the 'master' branch should use matching 'master' dependencies)
+base_or_branch=$GITHUB_BASE_REF
+if [[ "$GITHUB_EVENT_NAME" == "push" ]]; then
+    base_or_branch=${GITHUB_REF}
+fi
+if [ -n "$base_or_branch" ]; then
+    clone $deforg $defrepo $base_or_branch
 fi

 # Try HEAD which is the branch name in Netlify (not BRANCH which is pull/xxxx/head for PR builds)
--- a/src/@types/common.ts
+++ b/src/@types/common.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import { type JSXElementConstructor } from "react";
+import { type JSX, type JSXElementConstructor } from "react";

 export type { NonEmptyArray, XOR, Writeable } from "matrix-js-sdk/src/matrix";

--- a/src/@types/react.d.ts
+++ b/src/@types/react.d.ts
@@ -18,4 +18,9 @@ declare module "react" {

    // Fix lazy types - https://stackoverflow.com/a/71017028
    function lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): T;
+
+    // Standardize defaultProps for FunctionComponent so we can write generics assuming `defaultProps` exists on ComponentType
+    interface FunctionComponent {
+        defaultProps?: unknown;
+    }
 }
--- a/src/Avatar.ts
+++ b/src/Avatar.ts
@@ -147,11 +147,12 @@ export function avatarUrlForRoom(
    width?: number,
    height?: number,
    resizeMethod?: ResizeMethod,
+    avatarMxcOverride?: string,
 ): string | null {
    if (!room) return null; // null-guard
-
-    if (room.getMxcAvatarUrl()) {
-        const media = mediaFromMxc(room.getMxcAvatarUrl() ?? undefined);
+    const mxc = avatarMxcOverride ?? room.getMxcAvatarUrl();
+    if (mxc) {
+        const media = mediaFromMxc(mxc);
        if (width !== undefined && height !== undefined) {
            return media.getThumbnailOfSourceHttp(width, height, resizeMethod);
        }
--- a/Show More
+++ b/Show More