Merge remote-tracking branch 'origin/develop' into poll-votes

.eslintrc.js

@@ -117,10 +117,6 @@ module.exports = {
                             "!matrix-js-sdk/src/extensible_events_v1/PollResponseEvent",
                             "!matrix-js-sdk/src/extensible_events_v1/PollEndEvent",
                             "!matrix-js-sdk/src/extensible_events_v1/InvalidEventError",
-                            "!matrix-js-sdk/src/crypto",
-                            "!matrix-js-sdk/src/crypto/keybackup",
-                            "!matrix-js-sdk/src/crypto/deviceinfo",
-                            "!matrix-js-sdk/src/crypto/dehydration",
                             "!matrix-js-sdk/src/oidc",
                             "!matrix-js-sdk/src/oidc/discovery",
                             "!matrix-js-sdk/src/oidc/authorize",

.github/labels.yml

@@ -232,6 +232,9 @@
 - name: "Z-Flaky-Test"
   description: "A test is raising false alarms"
   color: "ededed"
+- name: "Z-Flaky-Jest-Test"
+  description: "A Jest test is raising false alarms"
+  color: "ededed"
 - name: "Z-FOSDEM"
   description: "Issues in chat.fosdem.org"
   color: "ededed"

.github/workflows/backport.yml

@@ -7,6 +7,8 @@ on:
         branches:
             - develop
 
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
 jobs:
     backport:
         name: Backport

.github/workflows/build.yml

@@ -10,6 +10,7 @@ env:
     # These must be set for fetchdep.sh to get the right branch
     REPOSITORY: ${{ github.repository }}
     PR_NUMBER: ${{ github.event.pull_request.number }}
+permissions: {} # No permissions required
 jobs:
     build:
         name: "Build on ${{ matrix.image }}"

.github/workflows/build_debian.yaml

@@ -3,6 +3,7 @@ on:
     release:
         types: [published]
 concurrency: ${{ github.workflow }}
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     build:
         name: Build package

.github/workflows/build_develop.yml

@@ -9,6 +9,7 @@ on:
 concurrency:
     group: ${{ github.repository_owner }}-${{ github.workflow }}-${{ github.ref_name }}
     cancel-in-progress: true
+permissions: {}
 jobs:
     build:
         name: "Build & Deploy develop.element.io"
@@ -16,6 +17,9 @@ jobs:
         if: github.repository == 'element-hq/element-web'
         runs-on: ubuntu-24.04
         environment: develop
+        permissions:
+            checks: read
+            pages: write
         env:
             R2_BUCKET: "element-web-develop"
             R2_URL: ${{ vars.CF_R2_S3_API }}

.github/workflows/dockerhub.yaml

@@ -7,14 +7,14 @@ on:
         # This job can take a while, and we have usage limits, so just publish develop only twice a day
         - cron: "0 7/12 * * *"
 concurrency: ${{ github.workflow }}-${{ github.ref_name }}
-
+permissions: {}
-permissions:
-    id-token: write # needed for signing the images with GitHub OIDC Token
 jobs:
     buildx:
         name: Docker Buildx
         runs-on: ubuntu-24.04
         environment: dockerhub
+        permissions:
+            id-token: write # needed for signing the images with GitHub OIDC Token
         steps:
             - uses: actions/checkout@v4
               with:

.github/workflows/docs.yml

@@ -5,10 +5,7 @@ on:
         branches: [develop]
     workflow_dispatch: {}
 
-permissions:
+permissions: {}
-    contents: read
-    pages: write
-    id-token: write
 
 concurrency:
     group: "pages"
@@ -100,6 +97,9 @@ jobs:
             name: github-pages
             url: ${{ steps.deployment.outputs.page_url }}
         runs-on: ubuntu-24.04
+        permissions:
+            pages: write
+            id-token: write
         needs: build
         steps:
             - name: Deploy to GitHub Pages

.github/workflows/end-to-end-tests-netlify.yaml

@@ -11,6 +11,8 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch || github.run_id }}
     cancel-in-progress: ${{ github.event.workflow_run.event == 'pull_request' }}
 
+permissions: {}
+
 jobs:
     report:
         if: github.event.workflow_run.conclusion != 'cancelled'
@@ -20,11 +22,12 @@ jobs:
         permissions:
             statuses: write
             deployments: write
+            actions: read
         steps:
             - name: Download HTML report
               uses: actions/download-artifact@v4
               with:
-                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}
                   name: html-report
                   path: playwright-report

.github/workflows/end-to-end-tests.yaml

@@ -33,6 +33,8 @@ env:
     # fetchdep.sh needs to know our PR number
     PR_NUMBER: ${{ github.event.pull_request.number }}
 
+permissions: {} # No permissions required
+
 jobs:
     build:
         name: "Build Element-Web"

.github/workflows/issue_closed.yml

@@ -4,6 +4,7 @@
 on:
     issues:
         types: [closed]
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     tidy:
         name: Tidy closed issues

.github/workflows/localazy_download.yaml

@@ -3,6 +3,7 @@ on:
     workflow_dispatch: {}
     schedule:
         - cron: "0 6 * * 1,3,5" # Every Monday, Wednesday and Friday at 6am UTC
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     download:
         uses: matrix-org/matrix-web-i18n/.github/workflows/localazy_download.yaml@main

.github/workflows/localazy_upload.yaml

@@ -4,6 +4,7 @@ on:
         branches: [develop]
         paths:
             - "src/i18n/strings/en_EN.json"
+permissions: {} # No permissions needed
 jobs:
     upload:
         uses: matrix-org/matrix-web-i18n/.github/workflows/localazy_upload.yaml@main

.github/workflows/netlify.yaml

@@ -11,6 +11,9 @@ jobs:
         if: github.event.workflow_run.conclusion != 'cancelled' && github.event.workflow_run.event == 'pull_request'
         runs-on: ubuntu-24.04
         environment: Netlify
+        permissions:
+            actions: read
+            deployments: write
         steps:
             - name: 📝 Create Deployment
               uses: bobheadxi/deployments@648679e8e4915b27893bd7dbc35cb504dc915bc8 # v1
@@ -27,7 +30,7 @@ jobs:
             - name: 📥 Download artifact
               uses: actions/download-artifact@v4
               with:
-                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}
                   name: webapp
                   path: webapp

.github/workflows/pending-reviews.yaml

@@ -6,6 +6,7 @@ on:
     #schedule:
     #    - cron: "*/10 * * * *"
 concurrency: ${{ github.workflow }}
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     bot:
         name: Pending reviews bot

.github/workflows/playwright-image-updates.yaml

@@ -3,9 +3,12 @@ on:
     workflow_dispatch: {}
     schedule:
         - cron: "0 6 * * *" # Every day at 6am UTC
+permissions: {}
 jobs:
     update:
         runs-on: ubuntu-24.04
+        permissions:
+            pull-requests: write
         steps:
             - uses: actions/checkout@v4
 

.github/workflows/pull_request.yaml

@@ -4,8 +4,11 @@ on:
         types: [opened, edited, labeled, unlabeled, synchronize]
     merge_group:
         types: [checks_requested]
+permissions: {}
 jobs:
     action:
         uses: matrix-org/matrix-js-sdk/.github/workflows/pull_request.yaml@develop
+        permissions:
+            pull-requests: read
         secrets:
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/pull_request_base_branch.yaml

@@ -2,6 +2,7 @@ name: Pull Request Base Branch
 on:
     pull_request:
         types: [opened, edited, synchronize]
+permissions: {} # No permissions required
 jobs:
     check_base_branch:
         name: Check PR base branch

.github/workflows/release-drafter.yml

@@ -4,6 +4,9 @@ on:
         branches: [staging]
     workflow_dispatch: {}
 concurrency: ${{ github.workflow }}
+permissions: {}
 jobs:
     draft:
+        permissions:
+            contents: write
         uses: matrix-org/matrix-js-sdk/.github/workflows/release-drafter-workflow.yml@develop

.github/workflows/release-gitflow.yml

@@ -4,6 +4,7 @@ on:
     push:
         branches: [master]
 concurrency: ${{ github.repository }}-${{ github.workflow }}
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     merge:
         uses: matrix-org/matrix-js-sdk/.github/workflows/release-gitflow.yml@develop

.github/workflows/release.yml

@@ -11,9 +11,13 @@ on:
                     - rc
                     - final
 concurrency: ${{ github.workflow }}
+permissions: {}
 jobs:
     release:
         uses: matrix-org/matrix-js-sdk/.github/workflows/release-make.yml@develop
+        permissions:
+            contents: write
+            issues: write
         secrets:
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
             GPG_PRIVATE_KEY: ${{ secrets.GPG_PRIVATE_KEY }}
@@ -42,6 +46,8 @@ jobs:
         name: Post release checks
         needs: release
         runs-on: ubuntu-24.04
+        permissions:
+            checks: read
         steps:
             - name: Wait for dockerhub
               uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork

.github/workflows/release_prepare.yml

@@ -17,6 +17,7 @@ on:
                 required: true
                 type: boolean
                 default: true
+permissions: {} # Uses ELEMENT_BOT_TOKEN instead
 jobs:
     prepare:
         runs-on: ubuntu-24.04

.github/workflows/sonarqube.yml

@@ -7,11 +7,16 @@ on:
 concurrency:
     group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
     cancel-in-progress: true
+permissions: {}
 jobs:
     sonarqube:
         name: 🩻 SonarQube
         if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event != 'merge_group'
         uses: matrix-org/matrix-js-sdk/.github/workflows/sonarcloud.yml@develop
+        permissions:
+            actions: read
+            statuses: write
+            id-token: write # sonar
         secrets:
             SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/static_analysis.yaml

@@ -16,6 +16,8 @@ env:
     REPOSITORY: ${{ github.repository }}
     PR_NUMBER: ${{ github.event.pull_request.number }}
 
+permissions: {} # No permissions required
+
 jobs:
     ts_lint:
         name: "Typescript Syntax Check"
@@ -37,6 +39,8 @@ jobs:
     i18n_lint:
         name: "i18n Check"
         uses: matrix-org/matrix-web-i18n/.github/workflows/i18n_check.yml@main
+        permissions:
+            pull-requests: read
         with:
             hardcoded-words: "Element"
             allowed-hardcoded-keys: |

.github/workflows/sync-labels.yml

@@ -8,6 +8,9 @@ on:
             - develop
         paths:
             - .github/labels.yml
+
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
 jobs:
     sync-labels:
         uses: element-hq/element-meta/.github/workflows/sync-labels.yml@develop

.github/workflows/tests.yml

@@ -26,6 +26,8 @@ env:
     # fetchdep.sh needs to know our PR number
     PR_NUMBER: ${{ github.event.pull_request.number }}
 
+permissions: {}
+
 jobs:
     jest:
         name: Jest
@@ -94,13 +96,15 @@ jobs:
         needs: jest
         if: always()
         runs-on: ubuntu-24.04
+        permissions:
+            statuses: write
         steps:
             - if: needs.jest.result != 'skipped' && needs.jest.result != 'success'
               run: exit 1
 
             - name: Skip SonarCloud in merge queue
               if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: Sibz/github-status-action@faaa4d96fecf273bd762985e0e7f9f933c774918 # v1
+              uses: guibranco/github-status-action-v2@1f26a0237cd1a57626fbb5a0eb2494c9b8797d07
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success

.github/workflows/triage-assigned.yml

@@ -4,6 +4,8 @@ on:
     issues:
         types: [assigned]
 
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
 jobs:
     web-app-team:
         runs-on: ubuntu-24.04

.github/workflows/triage-incoming.yml

@@ -4,6 +4,8 @@ on:
     issues:
         types: [opened]
 
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
 jobs:
     automate-project-columns:
         runs-on: ubuntu-24.04

.github/workflows/triage-labelled.yml

@@ -8,6 +8,8 @@ on:
             ELEMENT_BOT_TOKEN:
                 required: true
 
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
 jobs:
     apply_Z-Labs_label:
         name: Add Z-Labs label for features behind labs flags

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

@@ -3,6 +3,7 @@ on:
     pull_request_target:
         types: [review_requested]
 
+permissions: {} # Uses ELEMENT_BOT_TOKEN instead
 jobs:
     add_design_pr_to_project:
         name: Move PRs asking for design review to the design board

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

@@ -2,6 +2,7 @@ name: Close stale flaky issues
 on:
     schedule:
         - cron: "30 1 * * *"
+permissions: {}
 jobs:
     close:
         runs-on: ubuntu-24.04

.github/workflows/triage-unlabelled.yml

@@ -3,11 +3,13 @@ name: Move unlabelled from needs info columns to triaged
 on:
     issues:
         types: [unlabeled]
-
+permissions: {}
 jobs:
     Move_Unabeled_Issue_On_Project_Board:
         name: Move no longer X-Needs-Info issues to Triaged
         runs-on: ubuntu-24.04
+        permissions:
+            repository-projects: read
         if: >
             ${{
             !contains(github.event.issue.labels.*.name, 'X-Needs-Info') }}

.github/workflows/update-jitsi.yml

@@ -4,6 +4,7 @@ on:
     workflow_dispatch: {}
     schedule:
         - cron: "0 3 * * 0" # 3am every Sunday
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     update:
         runs-on: ubuntu-24.04

.github/workflows/update-topics.yaml

@@ -15,6 +15,7 @@ on:
                 required: true
                 type: string
 concurrency: ${{ github.workflow }}
+permissions: {} # No permissions required
 jobs:
     bot:
         name: Release topic update

.stylelintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
     extends: ["stylelint-config-standard"],
     customSyntax: "postcss-scss",
-    plugins: ["stylelint-scss"],
+    plugins: ["stylelint-scss", "stylelint-value-no-unknown-custom-properties"],
     rules: {
         "comment-empty-line-before": null,
         "declaration-empty-line-before": null,
@@ -46,5 +46,33 @@ module.exports = {
         "number-max-precision": null,
         "no-invalid-double-slash-comments": true,
         "media-feature-range-notation": null,
+        "csstools/value-no-unknown-custom-properties": [
+            true,
+            {
+                importFrom: [
+                    { from: "res/css/_common.pcss", type: "css" },
+                    { from: "res/themes/light/css/_light.pcss", type: "css" },
+                    // Right now our styles share vars all over the place, this is not ideal but acceptable for now
+                    { from: "res/css/views/rooms/_EventTile.pcss", type: "css" },
+                    { from: "res/css/views/rooms/_IRCLayout.pcss", type: "css" },
+                    { from: "res/css/views/rooms/_EventBubbleTile.pcss", type: "css" },
+                    { from: "res/css/views/rooms/_ReadReceiptGroup.pcss", type: "css" },
+                    { from: "res/css/views/rooms/_EditMessageComposer.pcss", type: "css" },
+                    { from: "res/css/views/right_panel/_BaseCard.pcss", type: "css" },
+                    { from: "res/css/views/messages/_MessageTimestamp.pcss", type: "css" },
+                    { from: "res/css/views/messages/_EventTileBubble.pcss", type: "css" },
+                    { from: "res/css/views/messages/_MessageActionBar.pcss", type: "css" },
+                    { from: "res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss", type: "css" },
+                    { from: "res/css/views/elements/_ToggleSwitch.pcss", type: "css" },
+                    { from: "res/css/views/settings/tabs/_SettingsTab.pcss", type: "css" },
+                    { from: "res/css/structures/_RoomView.pcss", type: "css" },
+                    // Compound vars
+                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-base.css",
+                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-semantic.css",
+                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-base-mq.css",
+                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-semantic-mq.css",
+                ],
+            },
+        ],
     },
 };

CHANGELOG.md

@@ -1,3 +1,23 @@
+Changes in [1.11.86](https://github.com/element-hq/element-web/releases/tag/v1.11.86) (2024-11-19)
+==================================================================================================
+## ✨ Features
+
+* Deduplicate icons using Compound Design Tokens ([#28419](https://github.com/element-hq/element-web/pull/28419)). Contributed by @t3chguy.
+* Let widget driver send error details ([#28357](https://github.com/element-hq/element-web/pull/28357)). Contributed by @AndrewFerr.
+* Deduplicate icons using Compound Design Tokens ([#28381](https://github.com/element-hq/element-web/pull/28381)). Contributed by @t3chguy.
+* Auto approvoce `io.element.call.reaction` capability for element call widgets ([#28401](https://github.com/element-hq/element-web/pull/28401)). Contributed by @toger5.
+* Show message type prefix in thread root \& reply previews ([#28361](https://github.com/element-hq/element-web/pull/28361)). Contributed by @t3chguy.
+* Support sending encrypted to device messages from widgets ([#28315](https://github.com/element-hq/element-web/pull/28315)). Contributed by @hughns.
+
+## 🐛 Bug Fixes
+
+* Feed events to widgets as they are decrypted (even if out of order) ([#28376](https://github.com/element-hq/element-web/pull/28376)). Contributed by @robintown.
+* Handle authenticated media when downloading from ImageView ([#28379](https://github.com/element-hq/element-web/pull/28379)). Contributed by @t3chguy.
+* Ignore `m.3pid_changes` for Identity service 3PID changes ([#28375](https://github.com/element-hq/element-web/pull/28375)). Contributed by @t3chguy.
+* Fix markdown escaping wrongly passing html through ([#28363](https://github.com/element-hq/element-web/pull/28363)). Contributed by @t3chguy.
+* Remove "Upgrade your encryption" flow in `CreateSecretStorageDialog` ([#28290](https://github.com/element-hq/element-web/pull/28290)). Contributed by @florianduros.
+
+
 Changes in [1.11.85](https://github.com/element-hq/element-web/releases/tag/v1.11.85) (2024-11-12)
 ==================================================================================================
 # Security

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.85",
+    "version": "1.11.86",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -86,7 +86,7 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@vector-im/compound-design-tokens": "^2.0.1",
-        "@vector-im/compound-web": "^7.3.0",
+        "@vector-im/compound-web": "^7.4.0",
         "@vector-im/matrix-wysiwyg": "2.37.13",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
@@ -276,6 +276,7 @@
         "stylelint": "^16.1.0",
         "stylelint-config-standard": "^36.0.0",
         "stylelint-scss": "^6.0.0",
+        "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
         "ts-node": "^10.9.1",
         "ts-prune": "^0.10.3",

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:b1b5693fa954ec0124e330dba8a28260ac1cc4d9948a778724a421be9f934284";
+const DOCKER_TAG = "develop@sha256:127c68d4468019ce363c8b2fd7a42a3ef50710eb3aaf288a2295dd4623ce9f54";
 
 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
     const templateDir = path.join(__dirname, "templates", opts.template);

res/css/_components.pcss

@@ -320,6 +320,7 @@
 @import "./views/rooms/_ThirdPartyMemberInfo.pcss";
 @import "./views/rooms/_ThreadSummary.pcss";
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
+@import "./views/rooms/_UserIdentityWarning.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";
 @import "./views/rooms/_WhoIsTypingTile.pcss";
 @import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";

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

@@ -11,7 +11,8 @@ Please see LICENSE files in the repository root for full details.
     font-size: $font-12px;
     width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */
     overflow-y: scroll;
-    .mx_AppPermission_bolder {
+    .mx_AppPermission_bolder,
+    .mx_AppPermission_content_bolder {
         font-weight: var(--cpd-font-weight-semibold);
     }
     .mx_AppPermission_content {
@@ -21,10 +22,6 @@ Please see LICENSE files in the repository root for full details.
             margin-block: 12px;
         }
 
-        .mx_AppPermission_content_bolder {
-            font-weight: var(--font-semi-bold);
-        }
-
         .mx_TextWithTooltip_target--helpIcon {
             display: inline-block;
             height: $font-14px; /* align with characters on the same line */

res/css/structures/_RightPanel.pcss

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_threadsButton::before {
-    mask-image: url("$(res)/img/element-icons/room/thread.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/threads-solid.svg");
 }
 
 .mx_RightPanel_notifsButton::before {
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_RightPanel_roomSummaryButton::before {
-    mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
     mask-position: center;
 }
 

res/css/structures/_RoomView.pcss

@@ -207,62 +207,3 @@ Please see LICENSE files in the repository root for full details.
         min-height: 42px;
     }
 }
-
-@keyframes mx_Indicator_pulse {
-    0% {
-        transform: scale(0.95);
-    }
-
-    70% {
-        transform: scale(1);
-    }
-
-    100% {
-        transform: scale(0.95);
-    }
-}
-
-@keyframes mx_Indicator_pulse_shadow {
-    0% {
-        opacity: 0.7;
-    }
-
-    70% {
-        transform: scale(2.2);
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-.mx_Indicator {
-    position: absolute;
-    right: -3px;
-    top: -3px;
-    width: var(--RoomHeader-indicator-dot-size);
-    height: var(--RoomHeader-indicator-dot-size);
-    border-radius: 50%;
-    transform: scale(1);
-    background: var(--RoomHeader-indicator-pulseColor);
-    box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
-    animation: mx_Indicator_pulse 2s infinite;
-    animation-iteration-count: 1;
-
-    &::after {
-        content: "";
-        position: absolute;
-        width: inherit;
-        height: inherit;
-        top: 0;
-        left: 0;
-        transform: scale(1);
-        transform-origin: center center;
-        animation-name: mx_Indicator_pulse_shadow;
-        animation-duration: inherit;
-        animation-iteration-count: inherit;
-        border-radius: 50%;
-        background: inherit;
-    }
-}

res/css/structures/_SpacePanel.pcss

@@ -211,11 +211,11 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
-            mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
         }
 
         &.mx_SpaceButton_people .mx_SpaceButton_icon::before {
-            mask-image: url("$(res)/img/element-icons/room/members.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
         }
 
         &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
@@ -426,11 +426,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconLeave::before {
-        mask-image: url("$(res)/img/element-icons/leave.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
     }
 
     .mx_SpacePanel_iconMembers::before {
-        mask-image: url("$(res)/img/element-icons/room/members.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
     }
 
     .mx_SpacePanel_iconPlus::before {

res/css/structures/_SpaceRoomView.pcss

@@ -39,7 +39,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     &:hover {
-        border-color: var(--cpd-color-bg-interactive-primary-rest);
+        border-color: var(--cpd-color-bg-action-primary-rest);
 
         &::before {
             background-color: var(--cpd-color-icon-primary);
@@ -248,7 +248,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpaceRoomView_privateScope_justMeButton::before {
-            mask-image: url("$(res)/img/element-icons/room/members.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
         }
 
         .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {

res/css/structures/_UserMenu.pcss

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

res/css/views/audio_messages/_PlaybackContainer.pcss

@@ -28,10 +28,11 @@ Please see LICENSE files in the repository root for full details.
 
     /* Waveforms are present in live recording only */
     .mx_Waveform {
+        /* default, overridden in JS */
+        --barHeight: 1;
         .mx_Waveform_bar {
             background-color: $quaternary-content;
             height: 100%;
-            /* Variable set by a JS component */
             transform: scaleY(max(0.05, var(--barHeight)));
 
             &.mx_Waveform_bar_100pct {

res/css/views/audio_messages/_SeekBar.pcss

@@ -12,6 +12,9 @@ Please see LICENSE files in the repository root for full details.
 /* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
 
 .mx_SeekBar {
+    /* default, overridden in JS */
+    --fillTo: 1;
+
     /* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
     /* need to support IE. */
 

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -33,7 +33,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconLink::before {
-        mask-image: url("$(res)/img/element-icons/link.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
     }
 
     .mx_MessageContextMenu_iconPermalink::before {
@@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconForward::before {
-        mask-image: url("$(res)/img/element-icons/message/fwd.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/forward.svg");
     }
 
     .mx_MessageContextMenu_iconRedact::before {
@@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReplyInThread::before {
-        mask-image: url("$(res)/img/element-icons/message/thread.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
     }
 
     .mx_MessageContextMenu_iconReact::before {

res/css/views/context_menus/_RoomGeneralContextMenu.pcss

@@ -1,5 +1,5 @@
 .mx_RoomGeneralContextMenu_iconStar::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconArrowDown::before {
@@ -31,7 +31,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconPeople::before {
-    mask-image: url("$(res)/img/element-icons/room/members.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconFiles::before {
@@ -43,7 +43,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconWidgets::before {
-    mask-image: url("$(res)/img/element-icons/room/apps.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconSettings::before {
@@ -51,7 +51,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconExport::before {
-    mask-image: url("$(res)/img/element-icons/export.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconDeveloperTools::before {
@@ -59,7 +59,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconCopyLink::before {
-    mask-image: url("$(res)/img/element-icons/link.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconInvite::before {
@@ -67,5 +67,5 @@
 }
 
 .mx_RoomGeneralContextMenu_iconSignOut::before {
-    mask-image: url("$(res)/img/element-icons/leave.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
 }

res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss

@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $secondary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
-            mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
             mask-position: center;
         }
     }

res/css/views/dialogs/_LeaveSpaceDialog.pcss

@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
                         background-color: $secondary-content;
                         mask-repeat: no-repeat;
                         mask-size: contain;
-                        mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+                        mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
                         mask-position: center;
                     }
                 }

res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss

@@ -108,7 +108,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $secondary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
-            mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
             mask-position: center;
         }
     }

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_SpotlightDialog_filterPeople::before {
-                mask-image: url("$(res)/img/element-icons/room/members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
             }
 
             &.mx_SpotlightDialog_filterPublicRooms::before {
@@ -400,7 +400,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
-            mask-image: url("$(res)/img/element-icons/link.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
         }
 
         .mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
@@ -432,7 +432,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_SpotlightDialog_startChat::before {
-                mask-image: url("$(res)/img/element-icons/room/members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
             }
 
             .mx_SpotlightDialog_joinRoomAlias::before {
@@ -512,11 +512,11 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_SpotlightDialog_metaspaceResult_favourites-space {
-                mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
             }
 
             &.mx_SpotlightDialog_metaspaceResult_people-space {
-                mask-image: url("$(res)/img/element-icons/room/members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
             }
 
             &.mx_SpotlightDialog_metaspaceResult_orphans-space {

res/css/views/elements/_InfoTooltip.pcss

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

res/css/views/elements/_ProgressBar.pcss

@@ -16,16 +16,7 @@ progress.mx_ProgressBar {
     @mixin ProgressBarBorderRadius 6px;
     @mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
     @mixin ProgressBarBgColour $progressbar-bg-color;
-    ::-webkit-progress-value {
+    &::-webkit-progress-value {
         transition: width 1s;
     }
-    ::-moz-progress-bar {
-        transition: padding-bottom 1s;
-        padding-bottom: var(--value);
-        transform-origin: 0 0;
-        transform: rotate(-90deg) translateX(-15px);
-        padding-left: 15px;
-
-        height: 0;
-    }
 }

res/css/views/messages/_MessageActionBar.pcss

@@ -108,6 +108,10 @@ Please see LICENSE files in the repository root for full details.
             color: var(--cpd-color-icon-primary);
         }
 
+        &.mx_MessageActionBar_threadButton {
+            --MessageActionBar-icon-size: 20px;
+        }
+
         &.mx_MessageActionBar_retryButton {
             --MessageActionBar-icon-size: 16px;
         }

res/css/views/right_panel/_ThreadPanel.pcss

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

res/css/views/rooms/_BasicMessageComposer.pcss

@@ -7,6 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_BasicMessageComposer {
+    /* These are set in Javascript */
+    --avatar-letter: "";
+    --avatar-background: unset;
+    --placeholder: "";
+
     position: relative;
 
     .mx_BasicMessageComposer_inputEmpty > :first-child::before {

res/css/views/rooms/_EventBubbleTile.pcss

@@ -334,7 +334,6 @@ Please see LICENSE files in the repository root for full details.
 
         .mx_MImageBody {
             width: 100%;
-            height: 100%;
 
             .mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
                 position: unset;

res/css/views/rooms/_EventTile.pcss

@@ -1017,16 +1017,6 @@ $left-gutter: 64px;
     visibility: visible;
 }
 
-/* Inverse of the above to *disable* the animation on any indicators. This approach */
-/* is less pretty, but is easier to target because otherwise we need to define the */
-/* animation for when it's shown which means duplicating the style definition in */
-/* multiple places. */
-.mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput="keyboard"] :focus-within) {
-    &:not(:focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
-        animation: none;
-    }
-}
-
 .mx_EventTile[data-shape="ThreadsList"],
 .mx_EventTile[data-shape="Notification"] {
     --topOffset: $spacing-12;

res/css/views/rooms/_RoomList.pcss

@@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details.
     mask-image: url("$(res)/img/element-icons/roomlist/dialpad.svg");
 }
 .mx_RoomList_iconStartChat::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
 }
 .mx_RoomList_iconInvite::before {
     mask-image: url("$(res)/img/element-icons/room/share.svg");

res/css/views/rooms/_RoomListHeader.pcss

@@ -92,7 +92,7 @@ Please see LICENSE files in the repository root for full details.
     mask-image: url("$(res)/img/element-icons/room/invite.svg");
 }
 .mx_RoomListHeader_iconStartChat::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
 }
 .mx_RoomListHeader_iconNewRoom::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");

res/css/views/rooms/_RoomPreviewCard.pcss

@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
             mask-repeat: no-repeat;
             mask-position: center;
             mask-size: contain;
-            mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
             background-color: $secondary-content;
         }
     }

res/css/views/rooms/_RoomTile.pcss

@@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_RoomTile_contextMenu {
     .mx_RoomTile_iconStar::before {
-        mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
     }
 
     .mx_RoomTile_iconArrowDown::before {
@@ -206,7 +206,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconPeople::before {
-        mask-image: url("$(res)/img/element-icons/room/members.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
     }
 
     .mx_RoomTile_iconFiles::before {
@@ -218,7 +218,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconWidgets::before {
-        mask-image: url("$(res)/img/element-icons/room/apps.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
     }
 
     .mx_RoomTile_iconSettings::before {
@@ -226,11 +226,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconExport::before {
-        mask-image: url("$(res)/img/element-icons/export.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
     }
 
     .mx_RoomTile_iconCopyLink::before {
-        mask-image: url("$(res)/img/element-icons/link.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
     }
 
     .mx_RoomTile_iconInvite::before {
@@ -238,6 +238,6 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconSignOut::before {
-        mask-image: url("$(res)/img/element-icons/leave.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
     }
 }

res/css/views/rooms/_UserIdentityWarning.pcss

@@ -0,0 +1,28 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserIdentityWarning {
+    /* 42px is the padding-left of .mx_MessageComposer_wrapper in res/css/views/rooms/_MessageComposer.pcss */
+    margin-left: calc(-42px + var(--RoomView_MessageList-padding));
+
+    .mx_UserIdentityWarning_row {
+        display: flex;
+        align-items: center;
+
+        .mx_BaseAvatar {
+            margin-left: var(--cpd-space-2x);
+        }
+        .mx_UserIdentityWarning_main {
+            margin-left: var(--cpd-space-6x);
+            flex-grow: 1;
+        }
+    }
+}
+
+.mx_MessageComposer.mx_MessageComposer--compact > .mx_UserIdentityWarning {
+    margin-left: calc(-25px + var(--RoomView_MessageList-padding));
+}

res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss

@@ -7,6 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_WysiwygComposer_Editor_container {
+    /* These are set in Javascript */
+    --avatar-letter: "";
+    --avatar-background: unset;
+    --placeholder: "";
+
     @keyframes visualbell {
         from {
             background-color: $visual-bell-bg-color;

res/css/views/spaces/_SpacePublicShare.pcss

@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
         @mixin SpacePillButton;
 
         &.mx_SpacePublicShare_shareButton::before {
-            mask-image: url("$(res)/img/element-icons/link.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
         }
 
         &.mx_SpacePublicShare_inviteButton::before {

res/img/element-icons/export.svg

@@ -1,8 +0,0 @@
-<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <mask id="hole">
-        <rect width="100%" height="100%" fill="white"/>
-        <circle cx="13" cy="11" r="5" fill="black"/>
-    </mask>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.20757 14.9221C12.1427 14.9221 15.3327 11.7309 15.3327 7.79434C15.3327 3.85781 12.1427 0.666626 8.20757 0.666626C4.27246 0.666626 1.08243 3.85781 1.08243 7.79434C1.08243 8.89706 1.33275 9.9413 1.77965 10.8733L0.90483 13.7175C0.644577 14.5636 1.43951 15.3549 2.28444 15.0908L5.10044 14.2104C6.03948 14.6664 7.09367 14.9221 8.20757 14.9221Z" fill="#737D8C" mask="url(#hole)"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6 8.19998C13.6 7.8686 13.3314 7.59998 13 7.59998C12.6686 7.59998 12.4 7.8686 12.4 8.19998L12.4 12.3514L10.8243 10.7757C10.59 10.5414 10.2101 10.5414 9.97574 10.7757C9.74142 11.01 9.74142 11.3899 9.97574 11.6242L12.5757 14.2242C12.8101 14.4585 13.19 14.4585 13.4243 14.2242L16.0243 11.6242C16.2586 11.3899 16.2586 11.01 16.0243 10.7757C15.79 10.5414 15.4101 10.5414 15.1757 10.7757L13.6 12.3514L13.6 8.19998Z" fill="#7C7C7C"/>
-</svg>

res/img/element-icons/info.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="10" cy="10" r="9.5" stroke="#787878"/>
-<path d="M9.79248 14H11.2065V8H9.79248V14ZM10.5034 7.14844C10.9526 7.14844 11.3198 6.80469 11.3198 6.38281C11.3198 5.95703 10.9526 5.61328 10.5034 5.61328C10.0503 5.61328 9.68311 5.95703 9.68311 6.38281C9.68311 6.80469 10.0503 7.14844 10.5034 7.14844Z" fill="#787878"/>
-</svg>

res/img/element-icons/leave.svg

@@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 4L18.2139 2.44654C19.1211 2.21972 20 2.90592 20 3.84112V20.1589C20 21.0941 19.1211 21.7803 18.2139 21.5535L12 20V4Z" fill="black"/>
-<mask id="path-2-inside-1" fill="white">
-<rect x="4" y="4" width="10" height="16" rx="1.4375"/>
-</mask>
-<rect x="4" y="4" width="10" height="16" rx="1.4375" stroke="black" stroke-width="4" mask="url(#path-2-inside-1)"/>
-</svg>

res/img/element-icons/link.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5285 6.54089L13.0273 6.04207C14.4052 4.66426 16.6259 4.65104 17.9874 6.01253C19.349 7.37402 19.3357 9.59466 17.9579 10.9725L15.5878 13.3425C14.21 14.7203 11.9893 14.7335 10.6277 13.372M11.4717 17.4589L10.9727 17.9579C9.59481 19.3357 7.37409 19.349 6.01256 17.9875C4.65102 16.626 4.66426 14.4053 6.04211 13.0275L8.41203 10.6577C9.78988 9.27988 12.0106 9.26665 13.3721 10.6281" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-</svg>

res/img/element-icons/location.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 1.99999C8.13 1.99999 5 5.2152 5 9.19054C5 13.4741 9.42 19.3806 11.24 21.6302C11.64 22.1233 12.37 22.1233 12.77 21.6302C14.58 19.3806 19 13.4741 19 9.19054C19 5.2152 15.87 1.99999 12 1.99999ZM12 11.7586C10.62 11.7586 9.5 10.6081 9.5 9.19054C9.5 7.77298 10.62 6.62249 12 6.62249C13.38 6.62249 14.5 7.77298 14.5 9.19054C14.5 10.6081 13.38 11.7586 12 11.7586Z" fill="currentColor"/>
-</svg>

res/img/element-icons/message/fwd.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9454 4.27941C10.653 3.98601 10.6539 3.51114 10.9472 3.21875C11.2406 2.92637 11.7155 2.92719 12.0079 3.22059L15.5312 6.75612C15.8229 7.0488 15.8229 7.52226 15.5312 7.81494L12.0079 11.3505C11.7155 11.6439 11.2407 11.6447 10.9473 11.3523C10.6539 11.06 10.653 10.5851 10.9454 10.2917L13.2292 8H6.36588C4.95064 8 3.75282 9.20272 3.75282 10.75C3.75282 12.2973 4.95064 13.5 6.36588 13.5H7.93524C8.34945 13.5 8.68524 13.8358 8.68524 14.25C8.68524 14.6642 8.34945 15 7.93524 15H6.36588C4.06634 15 2.25282 13.0687 2.25282 10.75C2.25282 8.43128 4.06634 6.5 6.36588 6.5H13.1583L10.9454 4.27941Z" fill="black"/>
-</svg>

res/img/element-icons/message/thread.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="currentColor" d="M5 5.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H5ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z"/><path fill="currentColor" fill-rule="evenodd" d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM1.75 3c0-.69.56-1.25 1.25-1.25h12c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25H5.666a2.75 2.75 0 0 0-1.65.55L1.75 15.5V3Z" clip-rule="evenodd"/></svg>

res/img/element-icons/room/apps.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="14" y="2" width="8" height="8" rx="2" fill="#0DBD8B"/>
-<rect x="14" y="14" width="8" height="8" rx="2" fill="#0DBD8B"/>
-<rect x="2" y="14" width="8" height="8" rx="2" fill="#0DBD8B"/>
-<rect x="2" y="2" width="8" height="8" rx="2" fill="#0DBD8B"/>
-</svg>

res/img/element-icons/room/members.svg

@@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5911 20.2922C15.9951 21.3704 14.0711 22 12 22C9.74879 22 7.67132 21.2561 6 20.0007C3.5711 18.1763 2 15.2716 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 15.4518 20.2511 18.4951 17.5911 20.2922ZM12 12.5C13.6569 12.5 15 11.0449 15 9.25C15 7.45507 13.6569 6 12 6C10.3431 6 9 7.45507 9 9.25C9 11.0449 10.3431 12.5 12 12.5ZM12 20C14.162 20 16.1236 19.1424 17.5634 17.7488C16.673 15.5506 14.5176 14 12 14C9.48242 14 7.32699 15.5506 6.43662 17.7488C7.87635 19.1424 9.83802 20 12 20Z"/>
-</mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5911 20.2922C15.9951 21.3704 14.0711 22 12 22C9.74879 22 7.67132 21.2561 6 20.0007C3.5711 18.1763 2 15.2716 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 15.4518 20.2511 18.4951 17.5911 20.2922ZM12 12.5C13.6569 12.5 15 11.0449 15 9.25C15 7.45507 13.6569 6 12 6C10.3431 6 9 7.45507 9 9.25C9 11.0449 10.3431 12.5 12 12.5ZM12 20C14.162 20 16.1236 19.1424 17.5634 17.7488C16.673 15.5506 14.5176 14 12 14C9.48242 14 7.32699 15.5506 6.43662 17.7488C7.87635 19.1424 9.83802 20 12 20Z" fill="currentColor"/>
-<path d="M17.5911 20.2922L16.4715 18.6349L17.5911 20.2922ZM6 20.0007L4.79885 21.5999L4.79885 21.5999L6 20.0007ZM17.5634 17.7488L18.9544 19.1859L19.9234 18.2479L19.4171 16.998L17.5634 17.7488ZM6.43662 17.7488L4.5829 16.998L4.07662 18.2479L5.04563 19.1859L6.43662 17.7488ZM12 24C14.4825 24 16.7945 23.244 18.7107 21.9494L16.4715 18.6349C15.1957 19.4968 13.6596 20 12 20V24ZM4.79885 21.5999C6.80462 23.1065 9.30085 24 12 24V20C10.1967 20 8.53802 19.4058 7.20115 18.4016L4.79885 21.5999ZM0 12C0 15.9273 1.88868 19.414 4.79885 21.5999L7.20115 18.4016C5.25353 16.9387 4 14.616 4 12H0ZM12 0C5.37258 0 0 5.37258 0 12H4C4 7.58172 7.58172 4 12 4V0ZM24 12C24 5.37258 18.6274 0 12 0V4C16.4183 4 20 7.58172 20 12H24ZM18.7107 21.9494C21.8977 19.7963 24 16.144 24 12H20C20 14.7596 18.6045 17.1939 16.4715 18.6349L18.7107 21.9494ZM13 9.25C13 10.0941 12.4046 10.5 12 10.5V14.5C14.9091 14.5 17 11.9958 17 9.25H13ZM12 8C12.4046 8 13 8.4059 13 9.25H17C17 6.50425 14.9091 4 12 4V8ZM11 9.25C11 8.4059 11.5954 8 12 8V4C9.09086 4 7 6.50425 7 9.25H11ZM12 10.5C11.5954 10.5 11 10.0941 11 9.25H7C7 11.9958 9.09086 14.5 12 14.5V10.5ZM16.1724 16.3118C15.0906 17.3588 13.6223 18 12 18V22C14.7017 22 17.1567 20.926 18.9544 19.1859L16.1724 16.3118ZM12 16C13.6752 16 15.1146 17.0305 15.7097 18.4996L19.4171 16.998C18.2314 14.0707 15.3599 12 12 12V16ZM8.29033 18.4996C8.88541 17.0305 10.3248 16 12 16V12C8.64008 12 5.76858 14.0707 4.5829 16.998L8.29033 18.4996ZM12 18C10.3777 18 8.90936 17.3588 7.82761 16.3118L5.04563 19.1859C6.84334 20.926 9.2983 22 12 22V18Z" fill="currentColor" mask="url(#path-1-inside-1)"/>
-</svg>

res/img/element-icons/room/message-bar/reply.svg

@@ -1,4 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.0663 14.25H11.636C13.4938 14.25 14.9998 12.683 14.9998 10.75C14.9998 8.817 13.4938 7.25 11.636 7.25H4.53369" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M6.52417 3.75L3.00006 7.28553L6.52417 10.8211" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

res/img/element-icons/room/room-summary.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM10 12C10 12.5523 10.4477 13 11 13V16.5C11 17.0523 11.4477 17.5 12 17.5H13.5C14.0523 17.5 14.5 17.0523 14.5 16.5C14.5 15.9477 14.0523 15.5 13.5 15.5H13V12C13 11.4477 12.5523 11 12 11H11C10.4477 11 10 11.4477 10 12ZM12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10Z" fill="black"/>
-</svg>

res/img/element-icons/room/thread.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#17191C" fill-rule="evenodd" d="M2 5a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H7.667a1 1 0 0 0-.6.2L3.6 22.8A1 1 0 0 1 2 22V5Zm3 4a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H6Z" clip-rule="evenodd"/></svg>

res/img/element-icons/roomlist/favorite.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.41411 1.43218C8.59217 0.855939 9.40783 0.855941 9.58589 1.43218L11.1715 6.56319H16.3856C16.9721 6.56319 17.224 7.30764 16.7578 7.66373L12.5135 10.9061L14.1185 16.1001C14.2948 16.6705 13.6348 17.1309 13.1604 16.7684L9 13.5902L4.83965 16.7684C4.3652 17.1309 3.70521 16.6705 3.88148 16.1001L5.4865 10.9061L1.24216 7.66373C0.776033 7.30764 1.02785 6.56319 1.61443 6.56319H6.82854L8.41411 1.43218Z" fill="currentColor"/>
-</svg>

res/img/element-icons/roomlist/member-plus.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3831 1C11.7973 1 12.1331 1.33579 12.1331 1.75V3.30005L13.5833 3.30005C13.9975 3.30005 14.3333 3.63584 14.3333 4.05005C14.3333 4.46426 13.9975 4.80005 13.5833 4.80005L12.1331 4.80005V6.25C12.1331 6.66421 11.7973 7 11.3831 7C10.9689 7 10.6331 6.66421 10.6331 6.25V4.80005L9.08331 4.80005C8.6691 4.80005 8.33331 4.46426 8.33331 4.05005C8.33331 3.63583 8.6691 3.30005 9.08331 3.30005L10.6331 3.30005V1.75C10.6331 1.33579 10.9689 1 11.3831 1ZM5.74076 9.00014C6.88624 9.00014 7.81483 8.07155 7.81483 6.92607C7.81483 5.78059 6.88624 4.85199 5.74076 4.85199C4.59528 4.85199 3.66669 5.78059 3.66669 6.92607C3.66669 8.07155 4.59528 9.00014 5.74076 9.00014ZM5.88889 10.7778C3.00889 10.7778 1 12.2415 1 14.3333V14.926H10.7778V14.3333C10.7778 12.2356 8.76889 10.7778 5.88889 10.7778Z" fill="#737D8C"/>
-</svg>

src/DeviceListener.ts

@@ -46,6 +46,7 @@ import SettingsStore, { CallbackFn } from "./settings/SettingsStore";
 import { UIFeature } from "./settings/UIFeature";
 import { isBulkUnverifiedDeviceReminderSnoozed } from "./utils/device/snoozeBulkUnverifiedDeviceReminder";
 import { getUserDeviceIds } from "./utils/crypto/deviceInfo";
+import { asyncSomeParallel } from "./utils/arrays.ts";
 
 const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
 
@@ -240,13 +241,16 @@ export default class DeviceListener {
         return this.keyBackupInfo;
     }
 
-    private shouldShowSetupEncryptionToast(): boolean {
+    private async shouldShowSetupEncryptionToast(): Promise<boolean> {
         // If we're in the middle of a secret storage operation, we're likely
         // modifying the state involved here, so don't add new toasts to setup.
         if (isSecretStorageBeingAccessed()) return false;
         // Show setup toasts once the user is in at least one encrypted room.
         const cli = this.client;
-        return cli?.getRooms().some((r) => cli.isRoomEncrypted(r.roomId)) ?? false;
+        const cryptoApi = cli?.getCrypto();
+        if (!cli || !cryptoApi) return false;
+
+        return await asyncSomeParallel(cli.getRooms(), ({ roomId }) => cryptoApi.isEncryptionEnabledInRoom(roomId));
     }
 
     private recheck(): void {
@@ -283,7 +287,7 @@ export default class DeviceListener {
             hideSetupEncryptionToast();
 
             this.checkKeyBackupStatus();
-        } else if (this.shouldShowSetupEncryptionToast()) {
+        } else if (await this.shouldShowSetupEncryptionToast()) {
             // make sure our keys are finished downloading
             await crypto.getUserDeviceInfo([cli.getSafeUserId()]);
 

src/ScalarMessaging.ts

@@ -514,7 +514,7 @@ function getWidgets(event: MessageEvent<any>, roomId: string | null): void {
     sendResponse(event, widgetStateEvents);
 }
 
-function getRoomEncState(event: MessageEvent<any>, roomId: string): void {
+async function getRoomEncState(event: MessageEvent<any>, roomId: string): Promise<void> {
     const client = MatrixClientPeg.get();
     if (!client) {
         sendError(event, _t("widget|error_need_to_be_logged_in"));
@@ -525,7 +525,7 @@ function getRoomEncState(event: MessageEvent<any>, roomId: string): void {
         sendError(event, _t("scalar|error_room_unknown"));
         return;
     }
-    const roomIsEncrypted = MatrixClientPeg.safeGet().isRoomEncrypted(roomId);
+    const roomIsEncrypted = Boolean(await client.getCrypto()?.isEncryptionEnabledInRoom(roomId));
 
     sendResponse(event, roomIsEncrypted);
 }

src/Searching.ts

@@ -596,7 +596,7 @@ async function combinedPagination(
     return result;
 }
 
-function eventIndexSearch(
+async function eventIndexSearch(
     client: MatrixClient,
     term: string,
     roomId?: string,
@@ -605,7 +605,7 @@ function eventIndexSearch(
     let searchPromise: Promise<ISearchResults>;
 
     if (roomId !== undefined) {
-        if (client.isRoomEncrypted(roomId)) {
+        if (await client.getCrypto()?.isEncryptionEnabledInRoom(roomId)) {
             // The search is for a single encrypted room, use our local
             // search method.
             searchPromise = localSearchProcess(client, term, roomId);

src/SecurityManager.ts

@@ -186,6 +186,15 @@ export async function withSecretStorageKeyCache<T>(func: () => Promise<T>): Prom
     }
 }
 
+export interface AccessSecretStorageOpts {
+    /** Reset secret storage even if it's already set up. */
+    forceReset?: boolean;
+    /** Create new cross-signing keys. Only applicable if `forceReset` is `true`. */
+    resetCrossSigning?: boolean;
+    /** The cached account password, if available. */
+    accountPassword?: string;
+}
+
 /**
  * This helper should be used whenever you need to access secret storage. It
  * ensures that secret storage (and also cross-signing since they each depend on
@@ -205,14 +214,17 @@ export async function withSecretStorageKeyCache<T>(func: () => Promise<T>): Prom
  *
  * @param {Function} [func] An operation to perform once secret storage has been
  * bootstrapped. Optional.
- * @param {bool} [forceReset] Reset secret storage even if it's already set up
+ * @param [opts] The options to use when accessing secret storage.
  */
-export async function accessSecretStorage(func = async (): Promise<void> => {}, forceReset = false): Promise<void> {
+export async function accessSecretStorage(
-    await withSecretStorageKeyCache(() => doAccessSecretStorage(func, forceReset));
+    func = async (): Promise<void> => {},
+    opts: AccessSecretStorageOpts = {},
+): Promise<void> {
+    await withSecretStorageKeyCache(() => doAccessSecretStorage(func, opts));
 }
 
 /** Helper for {@link #accessSecretStorage} */
-async function doAccessSecretStorage(func: () => Promise<void>, forceReset: boolean): Promise<void> {
+async function doAccessSecretStorage(func: () => Promise<void>, opts: AccessSecretStorageOpts): Promise<void> {
     try {
         const cli = MatrixClientPeg.safeGet();
         const crypto = cli.getCrypto();
@@ -221,7 +233,7 @@ async function doAccessSecretStorage(func: () => Promise<void>, forceReset: bool
         }
 
         let createNew = false;
-        if (forceReset) {
+        if (opts.forceReset) {
             logger.debug("accessSecretStorage: resetting 4S");
             createNew = true;
         } else if (!(await cli.secretStorage.hasKey())) {
@@ -234,9 +246,7 @@ async function doAccessSecretStorage(func: () => Promise<void>, forceReset: bool
             // passphrase creation.
             const { finished } = Modal.createDialog(
                 lazy(() => import("./async-components/views/dialogs/security/CreateSecretStorageDialog")),
-                {
+                opts,
-                    forceReset,
-                },
                 undefined,
                 /* priority = */ false,
                 /* static = */ true,

src/SlidingSyncManager.ts

@@ -229,7 +229,7 @@ export class SlidingSyncManager {
             subscriptions.delete(roomId);
         }
         const room = this.client?.getRoom(roomId);
-        let shouldLazyLoad = !this.client?.isRoomEncrypted(roomId);
+        let shouldLazyLoad = !(await this.client?.getCrypto()?.isEncryptionEnabledInRoom(roomId));
         if (!room) {
             // default to safety: request all state if we can't work it out. This can happen if you
             // refresh the app whilst viewing a room: we call setRoomVisible before we know anything

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

@@ -58,6 +58,7 @@ interface IProps {
     hasCancel?: boolean;
     accountPassword?: string;
     forceReset?: boolean;
+    resetCrossSigning?: boolean;
     onFinished(ok?: boolean): void;
 }
 
@@ -91,6 +92,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
     public static defaultProps: Partial<IProps> = {
         hasCancel: true,
         forceReset: false,
+        resetCrossSigning: false,
     };
     private recoveryKey?: GeneratedSecretStorageKey;
     private recoveryKeyNode = createRef<HTMLElement>();
@@ -270,7 +272,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
     private bootstrapSecretStorage = async (): Promise<void> => {
         const cli = MatrixClientPeg.safeGet();
         const crypto = cli.getCrypto()!;
-        const { forceReset } = this.props;
+        const { forceReset, resetCrossSigning } = this.props;
 
         let backupInfo;
         // First, unless we know we want to do a reset, we see if there is an existing key backup
@@ -292,12 +294,28 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
 
         try {
             if (forceReset) {
+                /* Resetting cross-signing requires secret storage to be reset
+                 * (otherwise it will try to store the cross-signing keys in the
+                 * old secret storage, and may prompt for the old key, which is
+                 * probably not available), and resetting key backup requires
+                 * cross-signing to be reset (so that the new backup can be
+                 * signed by the new cross-signing key).  So we reset secret
+                 * storage first, then cross-signing, then key backup.
+                 */
                 logger.log("Forcing secret storage reset");
                 await crypto.bootstrapSecretStorage({
                     createSecretStorageKey: async () => this.recoveryKey!,
-                    setupNewKeyBackup: true,
                     setupNewSecretStorage: true,
                 });
+                if (resetCrossSigning) {
+                    logger.log("Resetting cross signing");
+                    await crypto.bootstrapCrossSigning({
+                        authUploadDeviceSigningKeys: this.doBootstrapUIAuth,
+                        setupNewCrossSigning: true,
+                    });
+                }
+                logger.log("Resetting key backup");
+                await crypto.resetKeyBackup();
             } else {
                 // For password authentication users after 2020-09, this cross-signing
                 // step will be a no-op since it is now setup during registration or login

src/components/structures/MatrixChat.tsx

@@ -427,7 +427,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             }
         } else if (
             (await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) &&
-            !shouldSkipSetupEncryption(cli)
+            !(await shouldSkipSetupEncryption(cli))
         ) {
             // if cross-signing is not yet set up, do so now if possible.
             this.setStateForNewView({ view: Views.E2E_SETUP });

src/components/structures/auth/ForgotPassword.tsx

@@ -75,6 +75,7 @@ interface State {
 }
 
 export default class ForgotPassword extends React.Component<Props, State> {
+    private unmounted = false;
     private reset: PasswordReset;
     private fieldPassword: Field | null = null;
     private fieldPasswordConfirm: Field | null = null;
@@ -108,14 +109,20 @@ export default class ForgotPassword extends React.Component<Props, State> {
         }
     }
 
-    private async checkServerLiveliness(serverConfig: ValidatedServerConfig): Promise<void> {
+    public componentWillUnmount(): void {
+        this.unmounted = true;
+    }
+
+    private async checkServerLiveliness(serverConfig: ValidatedServerConfig): Promise<boolean> {
         try {
             await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(serverConfig.hsUrl, serverConfig.isUrl);
+            if (this.unmounted) return false;
 
             this.setState({
                 serverIsAlive: true,
             });
         } catch (e: any) {
+            if (this.unmounted) return false;
             const { serverIsAlive, serverDeadError } = AutoDiscoveryUtils.authComponentStateForError(
                 e,
                 "forgot_password",
@@ -124,7 +131,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
                 serverIsAlive,
                 errorText: serverDeadError,
             });
+            return serverIsAlive;
         }
+        return true;
     }
 
     private async onPhaseEmailInputSubmit(): Promise<void> {
@@ -292,10 +301,10 @@ export default class ForgotPassword extends React.Component<Props, State> {
         });
 
         // Refresh the server errors. Just in case the server came back online of went offline.
-        await this.checkServerLiveliness(this.props.serverConfig);
+        const serverIsAlive = await this.checkServerLiveliness(this.props.serverConfig);
 
         // Server error
-        if (!this.state.serverIsAlive) return;
+        if (!serverIsAlive) return;
 
         switch (this.state.phase) {
             case Phase.EnterEmail:

src/components/views/auth/AuthFooter.tsx

@@ -16,7 +16,7 @@ const AuthFooter = (): ReactElement => {
     const brandingConfig = SdkConfig.getObject("branding");
     const links = brandingConfig?.get("auth_footer_links") ?? [
         { text: "Blog", url: "https://element.io/blog" },
-        { text: "Twitter", url: "https://twitter.com/element_hq" },
+        { text: "Mastodon", url: "https://mastodon.matrix.org/@Element" },
         { text: "GitHub", url: "https://github.com/element-hq/element-web" },
     ];
 

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -256,7 +256,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
     });
 
     public render(): React.ReactNode {
-        const isVideoRoom = this.props.type === RoomType.ElementVideo;
+        const isVideoRoom = this.props.type === RoomType.ElementVideo || this.props.type === RoomType.UnstableCall;
 
         let aliasField: JSX.Element | undefined;
         if (this.state.joinRule === JoinRule.Public) {

src/components/views/dialogs/ReportEventDialog.tsx

@@ -43,6 +43,10 @@ interface IState {
     // If we know it, the nature of the abuse, as specified by MSC3215.
     nature?: ExtendedNature;
     ignoreUserToo: boolean; // if true, user will be ignored/blocked on submit
+    /*
+     * Whether the room is encrypted.
+     */
+    isRoomEncrypted: boolean;
 }
 
 const MODERATED_BY_STATE_EVENT_TYPE = [
@@ -188,9 +192,20 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
             // If specified, the nature of the abuse, as specified by MSC3215.
             nature: undefined,
             ignoreUserToo: false, // default false, for now. Could easily be argued as default true
+            isRoomEncrypted: false, // async, will be set later
         };
     }
 
+    public componentDidMount = async (): Promise<void> => {
+        const crypto = MatrixClientPeg.safeGet().getCrypto();
+        const roomId = this.props.mxEvent.getRoomId();
+        if (!crypto || !roomId) return;
+
+        this.setState({
+            isRoomEncrypted: await crypto.isEncryptionEnabledInRoom(roomId),
+        });
+    };
+
     private onIgnoreUserTooChanged = (newVal: boolean): void => {
         this.setState({ ignoreUserToo: newVal });
     };
@@ -319,7 +334,6 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
         if (this.moderation) {
             // Display report-to-moderator dialog.
             // We let the user pick a nature.
-            const client = MatrixClientPeg.safeGet();
             const homeServerName = SdkConfig.get("validated_server_config")!.hsName;
             let subtitle: string;
             switch (this.state.nature) {
@@ -336,7 +350,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                     subtitle = _t("report_content|nature_spam");
                     break;
                 case NonStandardValue.Admin:
-                    if (client.isRoomEncrypted(this.props.mxEvent.getRoomId()!)) {
+                    if (this.state.isRoomEncrypted) {
                         subtitle = _t("report_content|nature_nonstandard_admin_encrypted", {
                             homeserver: homeServerName,
                         });