[create-pull-request] automated change (#28212)

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>

.dockerignore

@@ -7,6 +7,3 @@ karma-reports/
 .idea/
 .tmp/
 config.json*
-# Exclude the playwright directory as much as we can as the snapshots are huge and we bind mount it in
-playwright/
-!playwright/docker-entrypoint.sh

.editorconfig

@@ -18,7 +18,7 @@ trim_trailing_whitespace = true
 indent_size = 4
 
 [package.json]
-indent_size = 4
+indent_size = 2
 
 [*.tsx.snap]
 trim_trailing_whitespace = false

.eslintrc.js

@@ -198,8 +198,6 @@ module.exports = {
                 "@typescript-eslint/ban-ts-comment": "off",
                 // We're okay with assertion errors when we ask for them
                 "@typescript-eslint/no-non-null-assertion": "off",
-                // We do this sometimes to brand interfaces
-                "@typescript-eslint/no-empty-object-type": "off",
             },
         },
         // temporary override for offending icon require files

.github/workflows/backport.yml

@@ -10,7 +10,7 @@ on:
 jobs:
     backport:
         name: Backport
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         # Only react to merged PRs for security reasons.
         # See https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target.
         if: >

.github/workflows/build.yml

@@ -18,15 +18,15 @@ jobs:
             fail-fast: false
             matrix:
                 image:
-                    - ubuntu-24.04
-                    - windows-2022
-                    - macos-14
+                    - ubuntu-latest
+                    - windows-latest
+                    - macos-latest
                 isDevelop:
                     - ${{ github.event_name == 'push' && github.ref_name == 'develop' }}
-                # Skip the ubuntu-24.04 build for the develop branch as the dedicated CD build_develop workflow handles that
+                # Skip the ubuntu-latest build for the develop branch as the dedicated CD build_develop workflow handles that
                 exclude:
                     - isDevelop: true
-                      image: ubuntu-24.04
+                      image: ubuntu-latest
         runs-on: ${{ matrix.image }}
         defaults:
             run:

.github/workflows/build_debian.yaml

@@ -7,7 +7,7 @@ jobs:
     build:
         name: Build package
         environment: packages.element.io
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         env:
             R2_INCOMING_BUCKET: ${{ vars.R2_INCOMING_BUCKET }}
             R2_URL: ${{ vars.CF_R2_S3_API }}

.github/workflows/build_develop.yml

@@ -14,7 +14,7 @@ jobs:
         name: "Build & Deploy develop.element.io"
         # Only respect triggers from our develop branch, ignore that of forks
         if: github.repository == 'element-hq/element-web'
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         environment: develop
         env:
             R2_BUCKET: "element-web-develop"

.github/workflows/dockerhub.yaml

@@ -13,8 +13,17 @@ permissions:
 jobs:
     buildx:
         name: Docker Buildx
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         environment: dockerhub
+        strategy:
+            fail-fast: false
+            matrix:
+                include:
+                    - variant: vanilla
+                    # Variant we ship to aid ESS in providing a build on the OpenCoDE platform including specific modules
+                    - variant: opendesk
+                      flavor: suffix=-opendesk,onlatest=true
+                      prepare: mv variants/openDesk/* .
         steps:
             - uses: actions/checkout@v4
               with:
@@ -23,6 +32,10 @@ jobs:
             - name: Install Cosign
               uses: sigstore/cosign-installer@4959ce089c160fddf62f7b42464195ba1a56d382 # v3
 
+            - name: Prepare
+              if: matrix.prepare
+              run: ${{ matrix.prepare }}
+
             - name: Set up QEMU
               uses: docker/setup-qemu-action@49b3bc8e6bdd4a60e6116a5414239cba5943d3cf # v3
 
@@ -48,6 +61,7 @@ jobs:
                       type=ref,event=tag
                   flavor: |
                       latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
+                      ${{ matrix.flavor }}
 
             - name: Build and push
               id: build-and-push
@@ -71,6 +85,7 @@ jobs:
                   cosign sign --yes ${images}
 
             - name: Update repo description
+              if: matrix.variant == 'vanilla'
               uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
               continue-on-error: true
               with:

.github/workflows/docs.yml

@@ -17,7 +17,7 @@ concurrency:
 jobs:
     build:
         name: GitHub Pages
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - name: Fetch element-desktop
               uses: actions/checkout@v4
@@ -99,7 +99,7 @@ jobs:
         environment:
             name: github-pages
             url: ${{ steps.deployment.outputs.page_url }}
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         needs: build
         steps:
             - name: Deploy to GitHub Pages

.github/workflows/issue_closed.yml

@@ -7,7 +7,7 @@ on:
 jobs:
     tidy:
         name: Tidy closed issues
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - uses: actions/github-script@v7
               id: main

.github/workflows/pending-reviews.yaml

@@ -9,7 +9,7 @@ concurrency: ${{ github.workflow }}
 jobs:
     bot:
         name: Pending reviews bot
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         environment: Matrix
         env:
             URL: "https://github.com/pulls?q=is%3Apr+is%3Aopen+repo%3Amatrix-org%2Fmatrix-js-sdk+repo%3Amatrix-org%2Fmatrix-react-sdk+repo%3Aelement-hq%2Felement-web+repo%3Aelement-hq%2Felement-desktop+review-requested%3A%40me+sort%3Aupdated-desc+"

.github/workflows/release.yml

@@ -27,7 +27,7 @@ jobs:
     notify-downstream:
         name: Trigger release drafter downstream
         needs: release
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - name: Notify element-desktop repo that element-web release has completed to re-trigger release-drafter
               uses: benc-uk/workflow-dispatch@e2e5e9a103e331dad343f381a29e654aea3cf8fc # v1
@@ -41,7 +41,7 @@ jobs:
     check:
         name: Post release checks
         needs: release
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - name: Wait for dockerhub
               uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork

.github/workflows/release_prepare.yml

@@ -19,7 +19,7 @@ on:
                 default: true
 jobs:
     prepare:
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - name: Checkout Element Desktop
               uses: actions/checkout@v4

.github/workflows/static_analysis.yaml

@@ -19,7 +19,7 @@ env:
 jobs:
     ts_lint:
         name: "Typescript Syntax Check"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
 
@@ -81,7 +81,7 @@ jobs:
 
     js_lint:
         name: "ESLint"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
 
@@ -99,7 +99,7 @@ jobs:
 
     style_lint:
         name: "Style Lint"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
 
@@ -117,7 +117,7 @@ jobs:
 
     workflow_lint:
         name: "Workflow Lint"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
 
@@ -135,7 +135,7 @@ jobs:
 
     analyse_dead_code:
         name: "Analyse Dead Code"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
 

.github/workflows/triage-assigned.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
     web-app-team:
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: |
             contains(github.event.issue.assignees.*.login, 't3chguy') ||
             contains(github.event.issue.assignees.*.login, 'andybalaam') ||

.github/workflows/triage-incoming.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
     automate-project-columns:
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - uses: actions/add-to-project@main
               with:

.github/workflows/triage-labelled.yml

@@ -11,7 +11,7 @@ on:
 jobs:
     apply_Z-Labs_label:
         name: Add Z-Labs label for features behind labs flags
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'A-Maths') ||
             contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
@@ -37,7 +37,7 @@ jobs:
 
     apply_Help-Wanted_label:
         name: Add "Help Wanted" label to all "good first issue" and Hacktoberfest
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'good first issue') ||
             contains(github.event.issue.labels.*.name, 'Hacktoberfest')
@@ -54,7 +54,7 @@ jobs:
 
     move_needs_info_issues:
         name: X-Needs-Info issues to Need info column on triage board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'X-Needs-Info')
         steps:
@@ -77,7 +77,7 @@ jobs:
 
     move_flakey_test_issues:
         name: Z-Flaky-Test issues to Sized for maintainer column on triage board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'Z-Flaky-Test')
         steps:
@@ -100,7 +100,7 @@ jobs:
 
     add_priority_design_issues_to_project:
         name: P1 X-Needs-Design to Design project board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'X-Needs-Design') &&
             (contains(github.event.issue.labels.*.name, 'S-Critical') &&
@@ -117,7 +117,7 @@ jobs:
 
     add_product_issues:
         name: X-Needs-Product to product project board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'X-Needs-Product')
         steps:
@@ -128,7 +128,7 @@ jobs:
 
     Search_issues_to_board:
         name: Search issues to project board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'A-New-Search-Experience')
         steps:
@@ -139,7 +139,7 @@ jobs:
 
     voip:
         name: Add labelled issues to VoIP project board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'Team: VoIP')
         steps:
@@ -150,7 +150,7 @@ jobs:
 
     verticals_feature:
         name: Add labelled issues to Verticals Feature project
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'Team: Verticals Feature')
         steps:
@@ -161,7 +161,7 @@ jobs:
 
     tech_debt:
         name: Add labelled issues to tech debt project
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'A-Developer-Experience') ||
             contains(github.event.issue.labels.*.name, 'A-Documentation') ||

.github/workflows/triage-move-review-requests.yml

@@ -6,7 +6,7 @@ on:
 jobs:
     add_design_pr_to_project:
         name: Move PRs asking for design review to the design board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - uses: octokit/graphql-action@v2.x
               id: find_team_members
@@ -73,7 +73,7 @@ jobs:
 
     add_product_pr_to_project:
         name: Move PRs asking for design review to the design board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - uses: octokit/graphql-action@v2.x
               id: find_team_members

.github/workflows/triage-stale-flaky-tests.yml

@@ -4,7 +4,7 @@ on:
         - cron: "30 1 * * *"
 jobs:
     close:
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         permissions:
             actions: write
             issues: write

.github/workflows/triage-unlabelled.yml

@@ -7,7 +7,7 @@ on:
 jobs:
     Move_Unabeled_Issue_On_Project_Board:
         name: Move no longer X-Needs-Info issues to Triaged
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             ${{
             !contains(github.event.issue.labels.*.name, 'X-Needs-Info') }}
@@ -44,7 +44,7 @@ jobs:
 
     remove_Z-Labs_label:
         name: Remove Z-Labs label when features behind labs flags are removed
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         if: >
             !(contains(github.event.issue.labels.*.name, 'A-Maths') ||
             contains(github.event.issue.labels.*.name, 'A-Message-Pinning') ||

.github/workflows/update-jitsi.yml

@@ -6,7 +6,7 @@ on:
         - cron: "0 3 * * 0" # 3am every Sunday
 jobs:
     update:
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
 

.github/workflows/update-topics.yaml

@@ -18,7 +18,7 @@ concurrency: ${{ github.workflow }}
 jobs:
     bot:
         name: Release topic update
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
         environment: Matrix
         steps:
             - uses: actions/github-script@v7
@@ -56,7 +56,7 @@ jobs:
                               headers,
                               body: "{}",
                           });
-
+                          
                           let res = await fetch(apiUrl, {
                               method: "GET",
                               headers,
@@ -69,7 +69,7 @@ jobs:
 
                           const data = await res.json();
                           console.log(roomId, "got event", data);
-
+                          
                           const topic = data.topic.replace(regex, releaseTopic);
                           if (topic === data.topic) {
                               console.log(roomId, "nothing to do");
@@ -89,7 +89,7 @@ jobs:
                               }),
                               headers,
                           });
-
+                          
                           if (res.ok) {
                               console.log(roomId, "topic updated:", topic);
                           } else {

.prettierignore

@@ -37,10 +37,5 @@ package-lock.json
 
 # Downloaded and already minified
 res/jitsi_external_api.min.js
-
 # This file is also machine-generated
 /playwright/e2e/crypto/test_indexeddb_cryptostore_dump/dump.json
-/playwright/test-results/
-/playwright/html-report/
-/playwright/logs/
-/playwright/snapshots/

CHANGELOG.md

@@ -1,76 +1,3 @@
-Changes in [1.11.85](https://github.com/element-hq/element-web/releases/tag/v1.11.85) (2024-11-12)
-==================================================================================================
-# Security
-- Fixes for [CVE-2024-51750](https://www.cve.org/CVERecord?id=CVE-2024-51750) / [GHSA-w36j-v56h-q9pc](https://github.com/element-hq/element-web/security/advisories/GHSA-w36j-v56h-q9pc)
-- Fixes for [CVE-2024-51749](https://www.cve.org/CVERecord?id=CVE-2024-51749) / [GHSA-5486-384g-mcx2](https://github.com/element-hq/element-web/security/advisories/GHSA-5486-384g-mcx2)
-- Update JS SDK with the fixes for [CVE-2024-50336](https://www.cve.org/CVERecord?id=CVE-2024-50336) / [GHSA-xvg8-m4x3-w6xr](https://github.com/matrix-org/matrix-js-sdk/security/advisories/GHSA-xvg8-m4x3-w6xr)
-
-
-Changes in [1.11.84](https://github.com/element-hq/element-web/releases/tag/v1.11.84) (2024-11-05)
-==================================================================================================
-## ✨ Features
-
-* Remove abandoned MSC3886, MSC3903, MSC3906 implementations ([#28274](https://github.com/element-hq/element-web/pull/28274)). Contributed by @t3chguy.
-* Update to React 18 ([#24763](https://github.com/element-hq/element-web/pull/24763)). Contributed by @t3chguy.
-* Deduplicate icons using Compound ([#28239](https://github.com/element-hq/element-web/pull/28239)). Contributed by @t3chguy.
-* Replace legacy Tooltips with Compound tooltips ([#28231](https://github.com/element-hq/element-web/pull/28231)). Contributed by @t3chguy.
-* Deduplicate icons using Compound Design Tokens ([#28219](https://github.com/element-hq/element-web/pull/28219)). Contributed by @t3chguy.
-* Add reactions to html export ([#28210](https://github.com/element-hq/element-web/pull/28210)). Contributed by @langleyd.
-* Remove feature\_dehydration ([#28173](https://github.com/element-hq/element-web/pull/28173)). Contributed by @florianduros.
-
-## 🐛 Bug Fixes
-
-* Remove upgrade encryption in `DeviceListener` and `SetupEncryptionToast` ([#28299](https://github.com/element-hq/element-web/pull/28299)). Contributed by @florianduros.
-* Fix 'remove alias' button in room settings ([#28269](https://github.com/element-hq/element-web/pull/28269)). Contributed by @Dev-Gurjar.
-* Add back unencrypted path in `StopGapWidgetDriver.sendToDevice` ([#28295](https://github.com/element-hq/element-web/pull/28295)). Contributed by @florianduros.
-* Fix other devices not being decorated as such ([#28279](https://github.com/element-hq/element-web/pull/28279)). Contributed by @t3chguy.
-* Fix pill contrast in invitation dialog ([#28250](https://github.com/element-hq/element-web/pull/28250)). Contributed by @florianduros.
-* Close right panel chat when minimising maximised voip widget ([#28241](https://github.com/element-hq/element-web/pull/28241)). Contributed by @t3chguy.
-* Fix develop changelog parsing ([#28232](https://github.com/element-hq/element-web/pull/28232)). Contributed by @t3chguy.
-* Fix Ctrl+F shortcut not working with minimised room summary card ([#28223](https://github.com/element-hq/element-web/pull/28223)). Contributed by @t3chguy.
-* Fix network dropdown missing checkbox \& aria-checked ([#28220](https://github.com/element-hq/element-web/pull/28220)). Contributed by @t3chguy.
-
-
-Changes in [1.11.83](https://github.com/element-hq/element-web/releases/tag/v1.11.83) (2024-10-29)
-==================================================================================================
-## ✨ Features
-
-* Enable Element Call by default on release instances ([#28314](https://github.com/element-hq/element-web/pull/28314)). Contributed by @t3chguy.
-
-
-
-Changes in [1.11.82](https://github.com/element-hq/element-web/releases/tag/v1.11.82) (2024-10-22)
-==================================================================================================
-## ✨ Features
-
-* Deduplicate more icons using Compound Design Tokens ([#132](https://github.com/element-hq/matrix-react-sdk/pull/132)). Contributed by @t3chguy.
-* Always show link new device flow even if unsupported ([#147](https://github.com/element-hq/matrix-react-sdk/pull/147)). Contributed by @t3chguy.
-* Update design of files list in right panel ([#144](https://github.com/element-hq/matrix-react-sdk/pull/144)). Contributed by @t3chguy.
-* Remove feature\_dehydration ([#138](https://github.com/element-hq/matrix-react-sdk/pull/138)). Contributed by @florianduros.
-* Upgrade emojibase-bindings and remove local handling of emoticon variations ([#127](https://github.com/element-hq/matrix-react-sdk/pull/127)). Contributed by @langleyd.
-* Add support for rendering media captions ([#43](https://github.com/element-hq/matrix-react-sdk/pull/43)). Contributed by @tulir.
-* Replace composer icons with Compound variants ([#123](https://github.com/element-hq/matrix-react-sdk/pull/123)). Contributed by @t3chguy.
-* Tweak default right panel size to be 320px except for maximised widgets at 420px ([#110](https://github.com/element-hq/matrix-react-sdk/pull/110)). Contributed by @t3chguy.
-* Add a pinned message badge under a pinned message ([#118](https://github.com/element-hq/matrix-react-sdk/pull/118)). Contributed by @florianduros.
-* Ditch right panel tabs and re-add close button ([#99](https://github.com/element-hq/matrix-react-sdk/pull/99)). Contributed by @t3chguy.
-* Force verification even for refreshed clients ([#44](https://github.com/element-hq/matrix-react-sdk/pull/44)). Contributed by @dbkr.
-* Update emoji text, border and background colour in timeline ([#119](https://github.com/element-hq/matrix-react-sdk/pull/119)). Contributed by @florianduros.
-* Disable ICE fallback based on well-known configuration ([#111](https://github.com/element-hq/matrix-react-sdk/pull/111)). Contributed by @t3chguy.
-* Remove legacy room header and promote beta room header ([#105](https://github.com/element-hq/matrix-react-sdk/pull/105)). Contributed by @t3chguy.
-* Respect `io.element.jitsi` `useFor1To1Calls` in well-known ([#112](https://github.com/element-hq/matrix-react-sdk/pull/112)). Contributed by @t3chguy.
-* Use Compound close icon in favour of mishmash of x/close icons ([#108](https://github.com/element-hq/matrix-react-sdk/pull/108)). Contributed by @t3chguy.
-
-## 🐛 Bug Fixes
-
-* Correct typo in option documentation ([#28148](https://github.com/element-hq/element-web/pull/28148)). Contributed by @AndrewKvalheim.
-* Revert #124 and #135 ([#139](https://github.com/element-hq/matrix-react-sdk/pull/139)). Contributed by @dbkr.
-* Add aria-label to e2e icon ([#136](https://github.com/element-hq/matrix-react-sdk/pull/136)). Contributed by @florianduros.
-* Fix bell icons on room list hover being black squares ([#135](https://github.com/element-hq/matrix-react-sdk/pull/135)). Contributed by @dbkr.
-* Fix vertical overflow on the mobile register screen ([#137](https://github.com/element-hq/matrix-react-sdk/pull/137)). Contributed by @langleyd.
-* Allow to unpin redacted event ([#98](https://github.com/element-hq/matrix-react-sdk/pull/98)). Contributed by @florianduros.
-
-
-
 Changes in [1.11.81](https://github.com/element-hq/element-web/releases/tag/v1.11.81) (2024-10-15)
 ==================================================================================================
 This release fixes High severity vulnerability CVE-2024-47771 / GHSA-963w-49j9-gxj6

element.io/app/config.json

@@ -46,13 +46,5 @@
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx",
     "setting_defaults": {
         "RustCrypto.staged_rollout_percent": 60
-    },
-    "features": {
-        "feature_video_rooms": true,
-        "feature_group_calls": true,
-        "feature_element_call_video_rooms": true
-    },
-    "element_call": {
-        "url": "https://call.element.io"
     }
 }

jest.config.ts

@@ -38,14 +38,12 @@ const config: Config = {
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
     },
-    transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
+    transformIgnorePatterns: ["/node_modules/(?!matrix-js-sdk).+$"],
     collectCoverageFrom: [
         "<rootDir>/src/**/*.{js,ts,tsx}",
         // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is
         // not available in that contest. So, turn off coverage instrumentation for it.
         "!<rootDir>/src/utils/SessionLock.ts",
-        // Coverage chokes on type definition files
-        "!<rootDir>/src/**/*.d.ts",
     ],
     coverageReporters: ["text-summary", "lcov"],
     testResultsProcessor: "@casualbot/jest-sonar-reporter",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.85",
+    "version": "1.11.81",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -67,16 +67,22 @@
         "test:playwright:open": "yarn test:playwright --ui",
         "test:playwright:screenshots": "yarn test:playwright:screenshots:build && yarn test:playwright:screenshots:run",
         "test:playwright:screenshots:build": "docker build playwright -t element-web-playwright",
-        "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v $(node -e 'console.log(require(`path`).dirname(require.resolve(`matrix-js-sdk/package.json`)))'):/work/node_modules/matrix-js-sdk -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright",
+        "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright",
         "coverage": "yarn test --coverage",
         "analyse:unused-exports": "ts-node ./scripts/analyse_unused_exports.ts",
         "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"
     },
     "resolutions": {
+        "@types/react-dom": "17.0.25",
+        "@types/react": "17.0.83",
         "@types/seedrandom": "3.0.8",
-        "oidc-client-ts": "3.1.0",
+        "oidc-client-ts": "3.0.1",
         "jwt-decode": "4.0.0",
+        "@vector-im/compound-design-tokens": "1.8.0",
+        "@vector-im/compound-web": "7.0.0",
+        "@floating-ui/react": "0.26.11",
+        "@radix-ui/react-id": "1.1.0",
         "caniuse-lite": "1.0.30001668",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
@@ -84,14 +90,15 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@formatjs/intl-segmenter": "^11.5.7",
-        "@matrix-org/analytics-events": "^0.27.0",
+        "@matrix-org/analytics-events": "^0.26.0",
         "@matrix-org/emojibase-bindings": "^1.3.3",
+        "@vector-im/matrix-wysiwyg": "2.37.13",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
+        "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.8.0",
-        "@vector-im/compound-web": "^7.1.0",
-        "@vector-im/matrix-wysiwyg": "2.37.13",
+        "@vector-im/compound-web": "^7.0.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -108,14 +115,14 @@
         "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
-        "filesize": "10.1.6",
+        "filesize": "10.1.4",
         "github-markdown-css": "^5.5.1",
         "glob-to-regexp": "^0.4.1",
         "highlight.js": "^11.3.1",
         "html-entities": "^2.0.0",
         "is-ip": "^3.1.0",
-        "js-xxhash": "^4.0.0",
         "jsrsasign": "^11.0.0",
+        "js-xxhash": "^4.0.0",
         "jszip": "^3.7.0",
         "katex": "^0.16.0",
         "linkify-element": "4.1.3",
@@ -126,26 +133,25 @@
         "maplibre-gl": "^2.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "34.11.1",
+        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
         "matrix-widget-api": "^1.9.0",
         "memoize-one": "^6.0.0",
-        "mime": "^4.0.4",
         "oidc-client-ts": "^3.0.1",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
         "posthog-js": "1.157.2",
         "qrcode": "1.5.4",
-        "re-resizable": "6.9.17",
-        "react": "^18.3.1",
+        "re-resizable": "^6.9.0",
+        "react": "17.0.2",
         "react-beautiful-dnd": "^13.1.0",
         "react-blurhash": "^0.3.0",
-        "react-dom": "^18.3.1",
+        "react-dom": "17.0.2",
         "react-focus-lock": "^2.5.1",
         "react-transition-group": "^4.4.1",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.13.1",
+        "sanitize-html": "2.13.0",
         "tar-js": "^0.3.0",
         "temporal-polyfill": "^0.2.5",
         "ua-parser-js": "^1.0.2",
@@ -180,12 +186,11 @@
         "@playwright/test": "^1.40.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@sentry/webpack-plugin": "^2.7.1",
-        "@stylistic/eslint-plugin": "^2.9.0",
         "@svgr/webpack": "^8.0.0",
-        "@testing-library/dom": "^10.4.0",
-        "@testing-library/jest-dom": "^6.4.8",
-        "@testing-library/react": "^16.0.0",
-        "@testing-library/user-event": "^14.5.2",
+        "@testing-library/dom": "^9.0.0",
+        "@testing-library/jest-dom": "^6.0.0",
+        "@testing-library/react": "^12.1.5",
+        "@testing-library/user-event": "^14.4.3",
         "@types/commonmark": "^0.27.4",
         "@types/content-type": "^1.1.5",
         "@types/counterpart": "^0.18.1",
@@ -207,9 +212,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "18.3.3",
+        "@types/react": "17.0.83",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "18.3.0",
+        "@types/react-dom": "17.0.25",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.13.0",
         "@types/sdp-transform": "^2.4.6",
@@ -218,8 +223,8 @@
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
         "@types/uuid": "^10.0.0",
-        "@typescript-eslint/eslint-plugin": "^8.0.0",
-        "@typescript-eslint/parser": "^8.0.0",
+        "@typescript-eslint/eslint-plugin": "^7.0.0",
+        "@typescript-eslint/parser": "^7.0.0",
         "axe-core": "4.10.0",
         "babel-jest": "^29.0.0",
         "babel-loader": "^9.0.0",
@@ -241,7 +246,7 @@
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-jest": "^28.0.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-matrix-org": "^2.0.2",
+        "eslint-plugin-matrix-org": "1.2.1",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
         "eslint-plugin-unicorn": "^56.0.0",
@@ -256,7 +261,7 @@
         "husky": "^9.0.0",
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
-        "jest-environment-jsdom": "^29.7.0",
+        "jest-environment-jsdom": "^29.6.2",
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",

playwright.config.ts

@@ -26,7 +26,6 @@ export default defineConfig({
         command: process.env.CI ? "npx serve -p 8080 -L ./webapp" : "yarn start",
         url: `${baseURL}/config.json`,
         reuseExistingServer: true,
-        timeout: (process.env.CI ? 30 : 120) * 1000,
     },
     testDir: "playwright/e2e",
     outputDir: "playwright/test-results",

playwright/.gitignore

@@ -4,5 +4,3 @@
 # Only commit snapshots from Linux
 /snapshots/**/*.png
 !/snapshots/**/*-linux.png
-# This file is machine-generated
-/e2e/crypto/test_indexeddb_cryptostore_dump/dump.json

playwright/e2e/accessibility/keyboard-navigation.spec.ts

@@ -15,9 +15,6 @@ test.describe("Landmark navigation tests", () => {
     });
 
     test("without any rooms", async ({ page, homeserver, app, user }) => {
-        // sometimes the space button doesn't appear right away
-        await expect(page.locator(".mx_SpaceButton_active")).toBeVisible();
-
         /**
          * Without any rooms, there is no tile in the roomlist to be focused.
          * So the next landmark in the list should be focused instead.

playwright/e2e/audio-player/audio-player.spec.ts

@@ -242,7 +242,6 @@ test.describe("Audio player", () => {
 
         // Find and click "Reply" button
         const clickButtonReply = async () => {
-            await tile.scrollIntoViewIfNeeded();
             await tile.hover();
             await tile.getByRole("button", { name: "Reply", exact: true }).click();
         };

playwright/e2e/chat-export/html-export.spec.ts

@@ -96,10 +96,7 @@ test.describe("HTML Export", () => {
 
         // Send a bunch of messages to populate the room
         for (let i = 1; i < 10; i++) {
-            const respone = await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
-            if (i == 1) {
-                await app.client.reactToMessage(room.roomId, null, respone.event_id, "🙃");
-            }
+            await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
         }
 
         // Wait for all the messages to be displayed

playwright/e2e/composer/RTE.spec.ts

@@ -96,7 +96,8 @@ test.describe("Composer", () => {
                     },
                 });
 
-                test("autocomplete behaviour tests", async ({ page, app, bot: bob }) => {
+                // https://github.com/vector-im/element-web/issues/26037
+                test.skip("autocomplete behaviour tests", async ({ page, app, bot: bob }) => {
                     // Set up a private room so we have another user to mention
                     await app.client.createRoom({
                         is_direct: true,
@@ -137,10 +138,10 @@ test.describe("Composer", () => {
                         .pressSequentially(`initial text @${bob.credentials.displayName.slice(0, 1)} abc`);
                     await expect(page.getByTestId("autocomplete-wrapper")).toBeEmpty();
                     // Move the cursor left by 4 to put it to: `@B| abc`, check autocomplete displays
-                    await page.getByRole("textbox").press("ArrowLeft");
-                    await page.getByRole("textbox").press("ArrowLeft");
-                    await page.getByRole("textbox").press("ArrowLeft");
-                    await page.getByRole("textbox").press("ArrowLeft");
+                    await page.getByRole("textbox").press("LeftArrow");
+                    await page.getByRole("textbox").press("LeftArrow");
+                    await page.getByRole("textbox").press("LeftArrow");
+                    await page.getByRole("textbox").press("LeftArrow");
                     await expect(page.getByTestId("autocomplete-wrapper")).not.toBeEmpty();
 
                     // Selecting the autocomplete option using Enter inserts it into the composer

playwright/e2e/crypto/crypto.spec.ts

@@ -114,10 +114,13 @@ test.describe("Cryptography", function () {
                 await dialog.getByRole("button", { name: "Continue" }).click();
                 await copyAndContinue(page);
 
-                // If the device is unverified, there should be a "Setting up keys" step; however, it
-                // can be quite quick, and playwright can miss it, so we can't test for it.
+                // When the device is verified, the `Setting up keys` step is skipped
+                if (!isDeviceVerified) {
+                    const uiaDialogTitle = page.locator(".mx_InteractiveAuthDialog .mx_Dialog_title");
+                    await expect(uiaDialogTitle.getByText("Setting up keys")).toBeVisible();
+                    await expect(uiaDialogTitle.getByText("Setting up keys")).not.toBeVisible();
+                }
 
-                // Either way, we end up at a success dialog:
                 await expect(dialog.getByText("Secure Backup successful")).toBeVisible();
                 await dialog.getByRole("button", { name: "Done" }).click();
                 await expect(dialog.getByText("Secure Backup successful")).not.toBeVisible();

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

@@ -60,11 +60,6 @@ test.describe("User verification", () => {
         // Accept
         await toast.getByRole("button", { name: "Verify User" }).click();
 
-        // Wait for the QR code to be rendered. If we don't do this, then the QR code can be rendered just as
-        // Playwright tries to click the "Verify by emoji" button, which seems to make it miss the button.
-        // (richvdh: I thought Playwright was supposed to be resilient to such things, but empirically not.)
-        await expect(page.getByAltText("QR Code")).toBeVisible();
-
         // request verification by emoji
         await page.locator("#mx_RightPanel").getByRole("button", { name: "Verify by emoji" }).click();
 
@@ -106,20 +101,13 @@ test.describe("User verification", () => {
         const toast = await toasts.getToast("Verification requested");
         await toast.getByRole("button", { name: "Verify User" }).click();
 
-        // Wait for the QR code to be rendered. If we don't do this, then the QR code can be rendered just as
-        // Playwright tries to click the "Verify by emoji" button, which seems to make it miss the button.
-        // (richvdh: I thought Playwright was supposed to be resilient to such things, but empirically not.)
-        await expect(page.getByAltText("QR Code")).toBeVisible();
-
         // request verification by emoji
         await page.locator("#mx_RightPanel").getByRole("button", { name: "Verify by emoji" }).click();
 
         /* on the bot side, wait for the verifier to exist ... */
         const botVerifier = await awaitVerifier(bobVerificationRequest);
-        // ... and confirm. We expect the verification to fail; we catch the error on the DOM side
-        // to stop playwright marking the evaluate as failing in the UI.
-        const botVerification = botVerifier.evaluate((verifier) => verifier.verify().catch(() => {}));
-
+        // ... confirm ...
+        botVerifier.evaluate((verifier) => verifier.verify()).catch(() => {});
         // ... and abort the verification
         await page.getByRole("button", { name: "They don't match" }).click();
 
@@ -127,8 +115,6 @@ test.describe("User verification", () => {
         await expect(dialog.getByText("Your messages are not secure")).toBeVisible();
         await dialog.getByRole("button", { name: "OK" }).click();
         await expect(dialog).not.toBeVisible();
-
-        await botVerification;
     });
 });
 

playwright/e2e/editing/editing.spec.ts

@@ -263,6 +263,7 @@ test.describe("Editing", () => {
         checkA11y,
     }) => {
         axe.disableRules("color-contrast"); // XXX: We have some known contrast issues here
+        axe.exclude(".mx_Tooltip_visible"); // XXX: this is fine but would be good to fix
 
         await page.goto(`#/room/${room.roomId}`);
 

playwright/e2e/login/login.spec.ts

@@ -217,7 +217,7 @@ test.describe("Login", () => {
                     const h1 = await page.getByRole("heading", { name: "Verify this device", level: 1 });
                     await expect(h1).toBeVisible();
 
-                    await expect(h1.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
+                    expect(h1.locator(".mx_CompleteSecurity_skip")).not.toBeVisible();
                 });
             });
         });

playwright/e2e/pinned-messages/pinned-messages.spec.ts

@@ -31,12 +31,6 @@ test.describe("Pinned messages", () => {
         const tile = util.getEventTile("Msg1");
         await expect(tile).toMatchScreenshot("pinned-message-Msg1.png", {
             mask: [tile.locator(".mx_MessageTimestamp")],
-            // Hide the jump to bottom button in the timeline to avoid flakiness
-            css: `
-                .mx_JumpToBottomButton {
-                    display: none !important;
-                }
-            `,
         });
     });
 

playwright/e2e/read-receipts/index.ts

@@ -69,7 +69,7 @@ export class MessageBuilder {
     /**
      * Map of message content -> event.
      */
-    messages = new Map<string, Promise<JSHandle<MatrixEvent>>>();
+    messages = new Map<String, Promise<JSHandle<MatrixEvent>>>();
 
     /**
      * Utility to find a MatrixEvent by its body content
@@ -222,7 +222,14 @@ export class MessageBuilder {
                     threadId: !ev.isThreadRoot ? ev.threadRootId : undefined,
                 }));
                 const roomId = await room.evaluate((room) => room.roomId);
-                await bot.reactToMessage(roomId, threadId, id, reaction);
+
+                await bot.sendEvent(roomId, threadId ?? null, "m.reaction", {
+                    "m.relates_to": {
+                        rel_type: "m.annotation",
+                        event_id: id,
+                        key: reaction,
+                    },
+                });
             }
         })(this);
     }

playwright/e2e/register/register.spec.ts

@@ -96,7 +96,7 @@ test.describe("Registration", () => {
             });
         });
         await page.getByRole("textbox", { name: "Username", exact: true }).fill("_alice");
-        await expect(page.getByRole("tooltip").filter({ hasText: "Some characters not allowed" })).toBeVisible();
+        await expect(page.getByRole("alert").filter({ hasText: "Some characters not allowed" })).toBeVisible();
 
         await page.route("**/_matrix/client/*/register/available?username=bob", async (route) => {
             await route.fulfill({
@@ -108,9 +108,9 @@ test.describe("Registration", () => {
             });
         });
         await page.getByRole("textbox", { name: "Username", exact: true }).fill("bob");
-        await expect(page.getByRole("tooltip").filter({ hasText: "Someone already has that username" })).toBeVisible();
+        await expect(page.getByRole("alert").filter({ hasText: "Someone already has that username" })).toBeVisible();
 
         await page.getByRole("textbox", { name: "Username", exact: true }).fill("foobar");
-        await expect(page.getByRole("tooltip")).not.toBeVisible();
+        await expect(page.getByRole("alert")).not.toBeVisible();
     });
 });

playwright/e2e/release-announcement/index.ts

@@ -42,7 +42,7 @@ export class Helpers {
      */
     async assertReleaseAnnouncementIsVisible(name: string) {
         await expect(this.getReleaseAnnouncement(name)).toBeVisible();
-        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`, { showTooltips: true });
+        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`);
     }
 
     /**

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

@@ -140,51 +140,4 @@ test.describe("Account user settings tab", () => {
         await expect(page.locator(".mx_UserMenu .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
         await expect(page.locator(".mx_RoomView_wrapper .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
     });
-
-    // ported to a playwright test because the jest test was very flakey for no obvious reason
-    test("should display an error if the code is incorrect when adding a phone number", async ({ uut, page }) => {
-        const dummyUrl = "https://nowhere.dummy/_matrix/client/unstable/add_threepid/msisdn/submit_token";
-
-        await page.route(
-            `**/_matrix/client/v3/account/3pid/msisdn/requestToken`,
-            async (route) => {
-                await route.fulfill({
-                    json: {
-                        success: true,
-                        sid: "1",
-                        msisdn: "447700900000",
-                        intl_fmt: "+44 7700 900000",
-                        submit_url: dummyUrl,
-                    },
-                });
-            },
-            { times: 1 },
-        );
-
-        await page.route(
-            dummyUrl,
-            async (route) => {
-                await route.fulfill({
-                    status: 400,
-                    json: {
-                        errcode: "M_THREEPID_AUTH_FAILED",
-                        error: "That code is definitely wrong",
-                    },
-                });
-            },
-            { times: 1 },
-        );
-
-        const phoneSection = page.getByTestId("mx_AccountPhoneNumbers");
-        await phoneSection.getByRole("textbox", { name: "Phone Number" }).fill("07700900000");
-        await phoneSection.getByRole("button", { name: "Add" }).click();
-
-        await phoneSection
-            .getByRole("textbox", { name: "Verification code" })
-            .fill("A small eurasian field mouse dancing the paso doble");
-
-        await phoneSection.getByRole("button", { name: "Continue" }).click();
-
-        await expect(page.getByRole("heading", { name: "Unable to verify phone number." })).toBeVisible();
-    });
 });

playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts

@@ -74,7 +74,7 @@ test.describe("Appearance user settings tab", () => {
                 await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-added.png");
 
                 await util.removeCustomTheme();
-                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-removed.png");
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme.png");
             });
         });
     });

playwright/e2e/spaces/threads-activity-centre/index.ts

@@ -70,7 +70,7 @@ export class MessageBuilder {
     /**
      * Map of message content -> event.
      */
-    messages = new Map<string, Promise<JSHandle<MatrixEvent>>>();
+    messages = new Map<String, Promise<JSHandle<MatrixEvent>>>();
 
     /**
      * Utility to find a MatrixEvent by its body content

playwright/e2e/spotlight/spotlight.spec.ts

@@ -216,7 +216,7 @@ test.describe("Spotlight", () => {
      *
      * https://github.com/matrix-org/synapse/issues/16472
      */
-    test("should find unknown people", async ({ page, app }) => {
+    test.skip("should find unknown people", async ({ page, app }) => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);

playwright/e2e/timeline/timeline.spec.ts

@@ -653,7 +653,7 @@ test.describe("Timeline", () => {
             const toggleEventButton = viewSourceEventExpanded.getByRole("button", { name: "toggle event" });
             // Check size and position of toggle on expanded view source event
             // See: _ViewSourceEvent.pcss
-            await expect(toggleEventButton).toHaveCSS("height", "16px"); // --ViewSourceEvent_toggle-size
+            await expect(toggleEventButton).toHaveCSS("height", "12px"); // --ViewSourceEvent_toggle-size
             await expect(toggleEventButton).toHaveCSS("align-self", "flex-end");
             // Click again to collapse the source
             await toggleEventButton.click({ position: { x: 0, y: 0 } });
@@ -679,7 +679,7 @@ test.describe("Timeline", () => {
             );
 
             // Click view source event toggle
-            await viewSourceEventIrc.getByRole("button", { name: "toggle event" }).click({ position: { x: 8, y: 8 } });
+            await viewSourceEventIrc.getByRole("button", { name: "toggle event" }).click({ position: { x: 0, y: 0 } });
 
             // Make sure the expand toggle worked
             await expect(page.locator(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded")).toBeVisible();

playwright/e2e/widgets/stickers.spec.ts

@@ -6,48 +6,32 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as fs from "node:fs";
-
 import type { Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import { ElementAppPage } from "../../pages/ElementAppPage";
-import { Credentials } from "../../plugins/homeserver";
 
 const STICKER_PICKER_WIDGET_ID = "fake-sticker-picker";
 const STICKER_PICKER_WIDGET_NAME = "Fake Stickers";
 const STICKER_NAME = "Test Sticker";
 const ROOM_NAME_1 = "Sticker Test";
 const ROOM_NAME_2 = "Sticker Test Two";
-const STICKER_IMAGE = fs.readFileSync("playwright/sample-files/riot.png");
-
-function getStickerMessage(contentUri: string, mimetype: string): string {
-    return JSON.stringify({
-        action: "m.sticker",
-        api: "fromWidget",
-        data: {
-            name: "teststicker",
-            description: STICKER_NAME,
-            file: "test.png",
-            content: {
-                body: STICKER_NAME,
-                info: {
-                    h: 480,
-                    mimetype: mimetype,
-                    size: 13818,
-                    w: 480,
-                },
-                msgtype: "m.sticker",
-                url: contentUri,
-            },
+const STICKER_MESSAGE = JSON.stringify({
+    action: "m.sticker",
+    api: "fromWidget",
+    data: {
+        name: "teststicker",
+        description: STICKER_NAME,
+        file: "test.png",
+        content: {
+            body: STICKER_NAME,
+            msgtype: "m.sticker",
+            url: "mxc://localhost/somewhere",
         },
-        requestId: "1",
-        widgetId: STICKER_PICKER_WIDGET_ID,
-    });
-}
-
-function getWidgetHtml(contentUri: string, mimetype: string) {
-    const stickerMessage = getStickerMessage(contentUri, mimetype);
-    return `
+    },
+    requestId: "1",
+    widgetId: STICKER_PICKER_WIDGET_ID,
+});
+const WIDGET_HTML = `
     <html lang="en">
         <head>
             <title>Fake Sticker Picker</title>
@@ -67,13 +51,13 @@ function getWidgetHtml(contentUri: string, mimetype: string) {
             <button name="Send" id="sendsticker">Press for sticker</button>
             <script>
                 document.getElementById('sendsticker').onclick = () => {
-                    window.parent.postMessage(${stickerMessage}, '*')
+                    window.parent.postMessage(${STICKER_MESSAGE}, '*')
                 };
             </script>
         </body>
     </html>
 `;
-}
+
 async function openStickerPicker(app: ElementAppPage) {
     const options = await app.openMessageComposerOptions();
     await options.getByRole("menuitem", { name: "Sticker" }).click();
@@ -87,8 +71,7 @@ async function sendStickerFromPicker(page: Page) {
     await expect(page.locator(".mx_AppTileFullWidth#stickers")).not.toBeVisible();
 }
 
-async function expectTimelineSticker(page: Page, roomId: string, contentUri: string) {
-    const contentId = contentUri.split("/").slice(-1)[0];
+async function expectTimelineSticker(page: Page, roomId: string) {
     // Make sure it's in the right room
     await expect(page.locator(".mx_EventTile_sticker > a")).toHaveAttribute("href", new RegExp(`/${roomId}/`));
 
@@ -97,43 +80,13 @@ async function expectTimelineSticker(page: Page, roomId: string, contentUri: str
     // download URL.
     await expect(page.locator(`img[alt="${STICKER_NAME}"]`)).toHaveAttribute(
         "src",
-        new RegExp(`/localhost/${contentId}`),
+        new RegExp("/download/localhost/somewhere"),
     );
 }
 
-async function expectFileTile(page: Page, roomId: string, contentUri: string) {
-    await expect(page.locator(".mx_MFileBody_info_filename")).toContainText(STICKER_NAME);
-}
-
-async function setWidgetAccountData(
-    app: ElementAppPage,
-    user: Credentials,
-    stickerPickerUrl: string,
-    provideCreatorUserId: boolean = true,
-) {
-    await app.client.setAccountData("m.widgets", {
-        [STICKER_PICKER_WIDGET_ID]: {
-            content: {
-                type: "m.stickerpicker",
-                name: STICKER_PICKER_WIDGET_NAME,
-                url: stickerPickerUrl,
-                creatorUserId: provideCreatorUserId ? user.userId : undefined,
-            },
-            sender: user.userId,
-            state_key: STICKER_PICKER_WIDGET_ID,
-            type: "m.widget",
-            id: STICKER_PICKER_WIDGET_ID,
-        },
-    });
-}
-
 test.describe("Stickers", () => {
     test.use({
         displayName: "Sally",
-        room: async ({ app }, use) => {
-            const roomId = await app.client.createRoom({ name: ROOM_NAME_1 });
-            await use({ roomId });
-        },
     });
 
     // We spin up a web server for the sticker picker so that we're not testing to see if
@@ -143,19 +96,34 @@ test.describe("Stickers", () => {
     //
     // See sendStickerFromPicker() for more detail on iframe comms.
     let stickerPickerUrl: string;
+    test.beforeEach(async ({ webserver }) => {
+        stickerPickerUrl = webserver.start(WIDGET_HTML);
+    });
 
-    test("should send a sticker to multiple rooms", async ({ webserver, page, app, user, room }) => {
+    test("should send a sticker to multiple rooms", async ({ page, app, user }) => {
+        const roomId1 = await app.client.createRoom({ name: ROOM_NAME_1 });
         const roomId2 = await app.client.createRoom({ name: ROOM_NAME_2 });
-        const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
-        const widgetHtml = getWidgetHtml(contentUri, "image/png");
-        stickerPickerUrl = webserver.start(widgetHtml);
-        setWidgetAccountData(app, user, stickerPickerUrl);
+
+        await app.client.setAccountData("m.widgets", {
+            [STICKER_PICKER_WIDGET_ID]: {
+                content: {
+                    type: "m.stickerpicker",
+                    name: STICKER_PICKER_WIDGET_NAME,
+                    url: stickerPickerUrl,
+                    creatorUserId: user.userId,
+                },
+                sender: user.userId,
+                state_key: STICKER_PICKER_WIDGET_ID,
+                type: "m.widget",
+                id: STICKER_PICKER_WIDGET_ID,
+            },
+        });
 
         await app.viewRoomByName(ROOM_NAME_1);
-        await expect(page).toHaveURL(`/#/room/${room.roomId}`);
+        await expect(page).toHaveURL(`/#/room/${roomId1}`);
         await openStickerPicker(app);
         await sendStickerFromPicker(page);
-        await expectTimelineSticker(page, room.roomId, contentUri);
+        await expectTimelineSticker(page, roomId1);
 
         // Ensure that when we switch to a different room that the sticker
         // goes to the right place
@@ -163,40 +131,31 @@ test.describe("Stickers", () => {
         await expect(page).toHaveURL(`/#/room/${roomId2}`);
         await openStickerPicker(app);
         await sendStickerFromPicker(page);
-        await expectTimelineSticker(page, roomId2, contentUri);
+        await expectTimelineSticker(page, roomId2);
     });
 
-    test("should handle a sticker picker widget missing creatorUserId", async ({
-        webserver,
-        page,
-        app,
-        user,
-        room,
-    }) => {
-        const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
-        const widgetHtml = getWidgetHtml(contentUri, "image/png");
-        stickerPickerUrl = webserver.start(widgetHtml);
-        setWidgetAccountData(app, user, stickerPickerUrl, false);
+    test("should handle a sticker picker widget missing creatorUserId", async ({ page, app, user }) => {
+        const roomId1 = await app.client.createRoom({ name: ROOM_NAME_1 });
 
-        await app.viewRoomByName(ROOM_NAME_1);
-        await expect(page).toHaveURL(`/#/room/${room.roomId}`);
-        await openStickerPicker(app);
-        await sendStickerFromPicker(page);
-        await expectTimelineSticker(page, room.roomId, contentUri);
-    });
-
-    test("should render invalid mimetype as a file", async ({ webserver, page, app, user, room }) => {
-        const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, {
-            type: "application/octet-stream",
+        await app.client.setAccountData("m.widgets", {
+            [STICKER_PICKER_WIDGET_ID]: {
+                content: {
+                    type: "m.stickerpicker",
+                    name: STICKER_PICKER_WIDGET_NAME,
+                    url: stickerPickerUrl,
+                    // No creatorUserId
+                },
+                sender: user.userId,
+                state_key: STICKER_PICKER_WIDGET_ID,
+                type: "m.widget",
+                id: STICKER_PICKER_WIDGET_ID,
+            },
         });
-        const widgetHtml = getWidgetHtml(contentUri, "application/octet-stream");
-        stickerPickerUrl = webserver.start(widgetHtml);
-        setWidgetAccountData(app, user, stickerPickerUrl);
 
         await app.viewRoomByName(ROOM_NAME_1);
-        await expect(page).toHaveURL(`/#/room/${room.roomId}`);
+        await expect(page).toHaveURL(`/#/room/${roomId1}`);
         await openStickerPicker(app);
         await sendStickerFromPicker(page);
-        await expectFileTile(page, room.roomId, contentUri);
+        await expectTimelineSticker(page, roomId1);
     });
 });

playwright/element-web-test.ts

@@ -224,7 +224,7 @@ export const test = base.extend<{
     },
 
     axe: async ({ page }, use) => {
-        await use(new AxeBuilder({ page }).exclude("[data-floating-ui-portal]"));
+        await use(new AxeBuilder({ page }).exclude("[id^='floating-ui-']"));
     },
     checkA11y: async ({ axe }, use, testInfo) =>
         use(async () => {
@@ -345,8 +345,8 @@ export const expect = baseExpect.extend({
 
         if (!options?.showTooltips) {
             css += `
-                [data-floating-ui-portal],
-                [role="tooltip"] {
+                [role="tooltip"],
+                .mx_Tooltip_visible {
                     visibility: hidden !important;
                 }
             `;

playwright/pages/ElementAppPage.ts

@@ -188,6 +188,6 @@ export class ElementAppPage {
                 "Element has no aria-labelledby or aria-describedy attributes! The tooltip should have added either one of these.",
             );
         }
-        return this.page.locator(`id=${labelledById ?? describedById}`);
+        return this.page.locator(`#${labelledById ?? describedById}`);
     }
 }

playwright/pages/client.ts

@@ -143,29 +143,6 @@ export class Client {
         );
     }
 
-    /**
-     * Send a reaction to to a message
-     * @param roomId ID of the room to send the reaction into
-     * @param threadId ID of the thread to send into or null for main timeline
-     * @param eventId Event ID of the message you are reacting to
-     * @param reaction The reaction text to send
-     * @returns
-     */
-    public async reactToMessage(
-        roomId: string,
-        threadId: string | null,
-        eventId: string,
-        reaction: string,
-    ): Promise<ISendEventResponse> {
-        return this.sendEvent(roomId, threadId ?? null, "m.reaction", {
-            "m.relates_to": {
-                rel_type: "m.annotation",
-                event_id: eventId,
-                key: reaction,
-            },
-        });
-    }
-
     /**
      * Create a room with given options.
      * @param options the options to apply when creating the room

playwright/plugins/homeserver/synapse/index.ts

@@ -20,7 +20,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for synapse docker image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:eee8e1551640da28f017b93dbf2264a89a092709d12475c785a52c91cf580c6a";
+const DOCKER_TAG = "develop@sha256:fd6ba2d8471a0807e1bccef4124b22d17f0058f2cf9285066fdd94d8c631964a";
 
 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
     const templateDir = path.join(__dirname, "templates", opts.template);

res/css/_components.pcss

@@ -217,6 +217,7 @@
 @import "./views/elements/_TagComposer.pcss";
 @import "./views/elements/_TextWithTooltip.pcss";
 @import "./views/elements/_ToggleSwitch.pcss";
+@import "./views/elements/_Tooltip.pcss";
 @import "./views/elements/_UseCaseSelection.pcss";
 @import "./views/elements/_UseCaseSelectionButton.pcss";
 @import "./views/elements/_Validation.pcss";
@@ -286,6 +287,7 @@
 @import "./views/rooms/_HistoryTile.pcss";
 @import "./views/rooms/_IRCLayout.pcss";
 @import "./views/rooms/_JumpToBottomButton.pcss";
+@import "./views/rooms/_LegacyRoomHeader.pcss";
 @import "./views/rooms/_LinkPreviewGroup.pcss";
 @import "./views/rooms/_LinkPreviewWidget.pcss";
 @import "./views/rooms/_LiveContentSummary.pcss";

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

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

res/css/structures/_GenericDropdownMenu.pcss

@@ -99,11 +99,11 @@ Please see LICENSE files in the repository root for full details.
 
             &[aria-checked="true"]::before {
                 content: "";
-                width: 16px;
-                height: 16px;
-                margin-left: -22px;
-                margin-right: 6px;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                width: 12px;
+                height: 12px;
+                margin-left: -20px;
+                margin-right: 8px;
+                mask-image: url("$(res)/img/feather-customised/check.svg");
                 mask-size: 100%;
                 mask-repeat: no-repeat;
                 background-color: $primary-content;

res/css/structures/_RoomStatusBar.pcss

@@ -118,7 +118,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_RoomStatusBar_unsentCancelAllBtn::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
+                mask-image: url("$(res)/img/element-icons/trashcan.svg");
             }
 
             &.mx_RoomStatusBar_unsentRetry {

res/css/structures/_RoomView.pcss

@@ -181,6 +181,11 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
+/* Rooms with immersive content */
+.mx_RoomView_immersive .mx_LegacyRoomHeader_wrapper {
+    border: unset;
+}
+
 .mx_RoomView_inCall {
     .mx_RoomView_statusAreaBox_line {
         margin-top: 2px;

res/css/structures/_SpacePanel.pcss

@@ -229,7 +229,7 @@ Please see LICENSE files in the repository root for full details.
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
             &::before {
                 background-color: $primary-content;
-                mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
+                mask-image: url("$(res)/img/element-icons/plus.svg");
                 transition: all 0.2s ease-in-out; /* TODO transition */
             }
         }
@@ -434,7 +434,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconPlus::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
+        mask-image: url("$(res)/img/element-icons/plus.svg");
     }
 
     .mx_SpacePanel_iconExplore::before {

res/css/views/auth/_PassphraseField.pcss

@@ -16,8 +16,7 @@ progress.mx_PassphraseField_progress {
     border: 0;
     height: 4px;
     position: absolute;
-    top: -10px;
-    left: 0;
+    top: -12px;
 
     @mixin ProgressBarBorderRadius "2px";
     @mixin ProgressBarColour $PassphraseStrengthLow;

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconCollapse::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
+        mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
     }
 
     .mx_MessageContextMenu_iconReport::before {
@@ -57,7 +57,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconRedact::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
+        mask-image: url("$(res)/img/element-icons/trashcan.svg");
     }
 
     .mx_MessageContextMenu_iconResend::before {
@@ -92,7 +92,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReply::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/reply.svg");
+        mask-image: url("$(res)/img/element-icons/room/message-bar/reply.svg");
     }
 
     .mx_MessageContextMenu_iconReplyInThread::before {

res/css/views/dialogs/_InviteDialog.pcss

@@ -143,15 +143,14 @@ Please see LICENSE files in the repository root for full details.
     margin-inline-end: $spacing-8;
 
     .mx_InviteDialog_userTile_pill {
-        background-color: var(--cpd-color-bg-canvas-default);
-        border: 1px solid var(--cpd-color-gray-400);
-        border-radius: 99px;
+        background-color: var(--cpd-color-bg-success-subtle);
+        border-radius: 12px;
         display: inline-block;
         height: 24px;
         line-height: $font-24px;
         padding-inline: $spacing-8;
         vertical-align: middle;
-        color: var(--cpd-color-gray-1100);
+        color: $primary-content;
 
         .mx_SearchResultAvatar {
             border-radius: 20px;
@@ -352,7 +351,7 @@ Please see LICENSE files in the repository root for full details.
                 height: 24px;
                 grid-column: 1;
                 grid-row: 1;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                mask-image: url("$(res)/img/feather-customised/check.svg");
                 mask-size: 100%;
                 mask-repeat: no-repeat;
                 position: absolute;

res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

@@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
                 color: $accent;
 
                 &::before {
-                    mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                    mask-image: url("$(res)/img/feather-customised/check.svg");
                     background-color: $accent;
                 }
             }

res/css/views/elements/_AccessibleButton.pcss

@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: var(--cpd-color-bg-action-primary-rest);
 
             &::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                mask-image: url("$(res)/img/feather-customised/check.svg");
             }
         }
 

res/css/views/elements/_EditableItemList.pcss

@@ -18,9 +18,10 @@ Please see LICENSE files in the repository root for full details.
 .mx_EditableItem_delete {
     @mixin customisedCancelButton;
     order: 3;
+    margin-right: 5px;
     vertical-align: middle;
-    width: 28px;
-    height: 28px;
+    width: 14px;
+    height: 14px;
     background-color: $alert;
     mask-size: 100%;
 }
@@ -41,7 +42,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_EditableItem_item {
     flex: auto 1 0;
     order: 1;
-    width: calc(100% - 28px); /* leave space for the remove button */
+    width: calc(100% - 14px); /* leave space for the remove button */
     overflow-x: hidden;
     text-overflow: ellipsis;
 }

res/css/views/elements/_Field.pcss

@@ -164,6 +164,14 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
+.mx_Field_tooltip {
+    width: 200px;
+}
+
+.mx_Field_tooltip.mx_Field_valid {
+    animation: mx_fadeout 1s 2s forwards;
+}
+
 /* Customise other components when placed inside a Field */
 
 .mx_Field .mx_Dropdown_input {

res/css/views/elements/_ImageView.pcss

@@ -129,8 +129,7 @@ $button-gap: 24px;
 }
 
 .mx_ImageView_button_more::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-    mask-size: 28px;
+    mask-image: url("$(res)/img/image-view/more.svg");
 }
 
 .mx_ImageView_button_close {

res/css/views/elements/_InviteReason.pcss

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
             content: "";
             margin-right: 8px;
             background-color: $secondary-content;
-            mask-image: url("$(res)/img/element-icons/eye.svg");
+            mask-image: url("$(res)/img/feather-customised/eye.svg");
             display: inline-block;
             width: 18px;
             height: 14px;

res/css/views/elements/_MiniAvatarUploader.pcss

@@ -10,6 +10,18 @@ Please see LICENSE files in the repository root for full details.
     position: relative;
     width: min-content;
 
+    /* this isn't a floating tooltip so override some things to not need to bother with z-index and floating */
+    .mx_Tooltip {
+        display: inline-block;
+        position: absolute;
+        z-index: unset;
+        width: max-content;
+        left: 72px;
+        /* top edge starting at 50 % of parent - 50 % of itself -> centered vertically */
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
     .mx_MiniAvatarUploader_indicator {
         position: absolute;
 

res/css/views/elements/_StyledCheckbox.pcss

@@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
 
                 height: 100%;
                 width: 100%;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                mask-image: url("$(res)/img/feather-customised/check.svg");
                 mask-position: center;
                 mask-size: 100%;
                 mask-repeat: no-repeat;

res/css/views/elements/_Tooltip.pcss

@@ -0,0 +1,107 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+@keyframes mx_fadein {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes mx_fadeout {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+.mx_Tooltip_chevron {
+    position: absolute;
+    left: -7px;
+    top: calc(50% - 6px);
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-right: 7px solid $menu-border-color;
+    border-bottom: 7px solid transparent;
+}
+
+.mx_Tooltip_chevron::after {
+    content: "";
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-right: 6px solid $menu-bg-color;
+    border-bottom: 6px solid transparent;
+    position: absolute;
+    top: -6px;
+    left: 1px;
+}
+
+.mx_Tooltip {
+    display: none;
+    position: fixed;
+    border-radius: 8px;
+    z-index: 6000; /* Higher than context menu so tooltips can be used everywhere */
+    padding: 10px;
+    pointer-events: none;
+    line-height: $font-14px;
+    font-size: $font-12px;
+    font-weight: 500;
+    max-width: 300px;
+    word-break: break-word;
+
+    background-color: var(--cpd-color-alpha-gray-1400);
+    color: var(--cpd-color-text-on-solid-primary);
+    border: 0;
+    text-align: center;
+
+    .mx_Tooltip_chevron {
+        display: none;
+    }
+
+    &.mx_Tooltip_visible {
+        animation: mx_fadein 0.2s forwards;
+    }
+
+    &.mx_Tooltip_invisible {
+        animation: mx_fadeout 0.1s forwards;
+    }
+
+    ul,
+    ol {
+        text-align: start; /* for list items */
+    }
+}
+
+/* These tooltips use an older style with a chevron */
+.mx_Field_tooltip {
+    background-color: $menu-bg-color;
+    color: $primary-content;
+    border: 1px solid $menu-border-color;
+    text-align: unset;
+
+    .mx_Tooltip_chevron {
+        display: unset;
+    }
+}
+
+.mx_Tooltip_title {
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.mx_Tooltip_sub {
+    opacity: 0.7;
+    margin-top: 4px;
+}

res/css/views/elements/_Validation.pcss

@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_Validation {
     position: relative;
-    max-width: 200px;
 }
 
 .mx_Validation_details {
@@ -45,7 +44,7 @@ Please see LICENSE files in the repository root for full details.
         color: $accent;
 
         &::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+            mask-image: url("$(res)/img/feather-customised/check.svg");
             background-color: $accent;
         }
     }

res/css/views/messages/_MImageBody.pcss

@@ -100,7 +100,7 @@ Please see LICENSE files in the repository root for full details.
             margin-right: 8px;
 
             background-color: $accent;
-            mask-image: url("$(res)/img/element-icons/eye.svg");
+            mask-image: url("$(res)/img/feather-customised/eye.svg");
             display: inline-block;
             width: 18px;
             height: 14px;

res/css/views/messages/_MessageActionBar.pcss

@@ -122,8 +122,4 @@ Please see LICENSE files in the repository root for full details.
             --MessageActionBar-icon-size: 12px;
         }
     }
-
-    .mx_MessageActionBar_optionsButton {
-        --MessageActionBar-icon-size: 22px;
-    }
 }

res/css/views/messages/_RedactedBody.pcss

@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
         height: 14px;
         width: 14px;
         background-color: $icon-button-color;
-        mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
+        mask-image: url("$(res)/img/feather-customised/trash.custom.svg");
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: contain;

res/css/views/messages/_ViewSourceEvent.pcss

@@ -25,18 +25,19 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_ViewSourceEvent_toggle {
-        --ViewSourceEvent_toggle-size: 16px;
+        --ViewSourceEvent_toggle-size: 12px;
 
         visibility: hidden;
+        /* override styles from AccessibleButton */
+        border-radius: 0;
         /* icon */
+        mask-repeat: no-repeat;
+        mask-position: 0 center;
+        mask-size: auto var(--ViewSourceEvent_toggle-size);
         width: var(--ViewSourceEvent_toggle-size);
         min-width: var(--ViewSourceEvent_toggle-size);
-
-        svg {
-            color: $accent;
-            width: var(--ViewSourceEvent_toggle-size);
-            height: var(--ViewSourceEvent_toggle-size);
-        }
+        background-color: $accent;
+        mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
 
         .mx_EventTile:hover & {
             visibility: visible;
@@ -46,5 +47,8 @@ Please see LICENSE files in the repository root for full details.
     &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
         align-self: flex-end;
         height: var(--ViewSourceEvent_toggle-size);
+        mask-position: 0 bottom;
+        margin-bottom: 5px;
+        mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
     }
 }

res/css/views/right_panel/_BaseCard.pcss

@@ -73,7 +73,7 @@ Please see LICENSE files in the repository root for full details.
                     width: 100%;
                     mask-repeat: no-repeat;
                     mask-position: center;
-                    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+                    mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
                     background-color: $secondary-content;
                 }
 

res/css/views/right_panel/_ThreadPanel.pcss

@@ -191,7 +191,7 @@ Please see LICENSE files in the repository root for full details.
                 width: 12px;
                 height: 12px;
                 margin-right: 8px;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                mask-image: url("$(res)/img/feather-customised/check.svg");
                 mask-size: 100%;
                 mask-repeat: no-repeat;
                 background-color: $primary-content;

res/css/views/rooms/_EventTile.pcss

@@ -982,11 +982,11 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile_collapseButton {
-    mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg");
+    mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
 }
 
 .mx_EventTile_expandButton {
-    mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
+    mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
 }
 
 .mx_EventTile_tileError {

res/css/views/rooms/_JumpToBottomButton.pcss

@@ -53,9 +53,9 @@ Please see LICENSE files in the repository root for full details.
     content: "";
     position: absolute;
     inset: 0;
-    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
+    mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
     mask-repeat: no-repeat;
-    mask-size: 24px;
+    mask-size: 20px;
     mask-position: center 6px;
     transform: rotate(180deg);
     background: var(--cpd-color-icon-tertiary);

res/css/views/rooms/_LegacyRoomHeader.pcss

@@ -0,0 +1,281 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+:root {
+    --RoomHeader-indicator-dot-size: 8px;
+    --RoomHeader-indicator-dot-offset: -3px;
+    --RoomHeader-indicator-pulseColor: $alert;
+}
+
+.mx_LegacyRoomHeader {
+    flex: 0 0 50px;
+    border-bottom: 1px solid $primary-hairline-color;
+    background-color: $background;
+
+    .mx_LegacyRoomHeader_icon {
+        height: 12px;
+        width: 12px;
+
+        &.mx_LegacyRoomHeader_icon_video {
+            height: 14px;
+            width: 14px;
+            background-color: $secondary-content;
+            mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+            mask-size: 100%;
+        }
+
+        &.mx_E2EIcon {
+            margin: 0;
+            height: 100%; /* To give the tooltip room to breathe */
+        }
+    }
+
+    .mx_CallDuration {
+        margin-top: calc(($font-15px - $font-13px) / 2); /* To align with the name */
+        font-size: $font-13px;
+    }
+}
+
+.mx_LegacyRoomHeader_wrapper {
+    height: 44px;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    padding: 10px 20px 9px 16px;
+    border-bottom: 1px solid $separator;
+
+    .mx_InviteOnlyIcon_large {
+        margin: 0;
+    }
+
+    .mx_BetaCard_betaPill {
+        margin-right: $spacing-8;
+    }
+
+    /* The container of E2EIcon in the legacy header needs to have its height set */
+    & > span {
+        height: 100%;
+    }
+}
+
+.mx_LegacyRoomHeader_name {
+    flex: 0 1 auto;
+    overflow: hidden;
+    color: $primary-content;
+    font: var(--cpd-font-heading-sm-semibold);
+    font-weight: var(--cpd-font-weight-semibold);
+    min-height: 24px;
+    align-items: center;
+    border-radius: 6px;
+    margin: 0 3px;
+    padding: 1px 4px;
+    display: flex;
+    user-select: none;
+    cursor: pointer;
+
+    &:hover {
+        background-color: $quinary-content;
+    }
+
+    .mx_LegacyRoomHeader_nametext {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .mx_LegacyRoomHeader_chevron {
+        align-self: center;
+        width: 20px;
+        height: 20px;
+        mask-position: center;
+        mask-size: 20px;
+        mask-repeat: no-repeat;
+        mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+        background-color: $tertiary-content;
+    }
+
+    &.mx_LegacyRoomHeader_name--textonly {
+        cursor: unset;
+
+        &:hover {
+            background-color: unset;
+        }
+    }
+
+    &[aria-expanded="true"] {
+        background-color: $separator;
+
+        .mx_LegacyRoomHeader_chevron {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+.mx_LegacyRoomHeader_settingsHint {
+    color: $settings-grey-fg-color !important;
+}
+
+.mx_LegacyRoomHeader_searchStatus {
+    font-weight: normal;
+    opacity: 0.6;
+}
+
+.mx_RoomTopic {
+    position: relative;
+    cursor: pointer;
+}
+
+.mx_LegacyRoomHeader_topic {
+    $lines: 2;
+
+    flex: 1;
+    color: $secondary-content;
+    font: var(--cpd-font-body-sm-regular);
+    line-height: 1rem;
+    max-height: calc(1rem * $lines);
+
+    overflow: hidden;
+    -webkit-line-clamp: $lines; /* See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp */
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+}
+
+.mx_LegacyRoomHeader_topic .mx_Emoji {
+    /* Undo font size increase to prevent vertical cropping and ensure the same size */
+    /* as in plain text emojis */
+    font-size: inherit;
+}
+
+.mx_LegacyRoomHeader_avatar {
+    flex: 0;
+    margin: 0 7px;
+    position: relative;
+    cursor: pointer;
+}
+
+.mx_LegacyRoomHeader_button_unreadIndicator_bg {
+    position: absolute;
+    right: var(--RoomHeader-indicator-dot-offset);
+    top: var(--RoomHeader-indicator-dot-offset);
+    margin: 4px;
+    width: var(--RoomHeader-indicator-dot-size);
+    height: var(--RoomHeader-indicator-dot-size);
+    border-radius: 50%;
+    transform: scale(1.6);
+    transform-origin: center center;
+    background: $background;
+}
+
+.mx_LegacyRoomHeader_button_unreadIndicator {
+    position: absolute;
+    right: var(--RoomHeader-indicator-dot-offset);
+    top: var(--RoomHeader-indicator-dot-offset);
+    margin: 4px;
+
+    &.mx_Indicator_highlight {
+        background: var(--cpd-color-icon-critical-primary);
+        box-shadow: var(--cpd-color-icon-critical-primary);
+    }
+
+    &.mx_Indicator_notification {
+        background: var(--cpd-color-icon-success-primary);
+        box-shadow: var(--cpd-color-icon-success-primary);
+    }
+
+    &.mx_Indicator_activity {
+        background: var(--cpd-color-icon-primary);
+        box-shadow: var(--cpd-color-icon-primary);
+    }
+}
+
+.mx_LegacyRoomHeader_forgetButton::before {
+    mask-image: url("$(res)/img/element-icons/leave.svg");
+    width: 26px;
+}
+
+.mx_LegacyRoomHeader_appsButton::before {
+    mask-image: url("$(res)/img/element-icons/room/apps.svg");
+}
+
+.mx_LegacyRoomHeader_appsButton_highlight::before {
+    background-color: $accent;
+}
+
+.mx_LegacyRoomHeader_searchButton::before {
+    mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
+}
+
+.mx_LegacyRoomHeader_inviteButton::before {
+    mask-image: url("$(res)/img/element-icons/room/invite.svg");
+}
+
+.mx_LegacyRoomHeader_voiceCallButton::before {
+    mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
+
+    /* The call button SVG is padded slightly differently, so match it up to the size */
+    /* of the other icons */
+    mask-size: 20px;
+    mask-position: center;
+}
+
+.mx_LegacyRoomHeader_videoCallButton::before {
+    mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+}
+
+.mx_LegacyRoomHeader_layoutButton--freedom::before,
+.mx_LegacyRoomHeader_freedomIcon::before {
+    mask-image: url("$(res)/img/element-icons/call/freedom.svg");
+}
+
+.mx_LegacyRoomHeader_layoutButton--spotlight::before,
+.mx_LegacyRoomHeader_spotlightIcon::before {
+    mask-image: url("$(res)/img/element-icons/call/spotlight.svg");
+}
+
+.mx_LegacyRoomHeader_closeButton {
+    &::before {
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
+        mask-size: 20px;
+        mask-position: center;
+    }
+
+    &:hover {
+        background: unset; /* remove background color on hover */
+
+        &::before {
+            background-color: $icon-button-color; /* set the default background color */
+        }
+    }
+}
+
+.mx_LegacyRoomHeader_minimiseButton::before {
+    mask-image: url("$(res)/img/element-icons/reduce.svg");
+}
+
+.mx_LegacyRoomHeader_layoutMenu .mx_IconizedContextMenu_icon::before {
+    content: "";
+    width: 16px;
+    height: 16px;
+    display: block;
+    mask-position: center;
+    mask-size: 20px;
+    mask-repeat: no-repeat;
+    background: $primary-content;
+}
+
+@media only screen and (max-width: 480px) {
+    .mx_LegacyRoomHeader_wrapper {
+        padding: 0;
+        margin: 0;
+    }
+
+    .mx_LegacyRoomHeader {
+        overflow: hidden;
+    }
+}

res/css/views/rooms/_MessageComposer.pcss

@@ -277,8 +277,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_MessageComposer_buttonMenu::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-    mask-size: 24px;
+    mask-image: url("$(res)/img/image-view/more.svg");
 }
 
 .mx_MessageComposer_sendMessage {