Update shell script

.env.example

@@ -0,0 +1,16 @@
+# To enable CSS hot-reload, set the following variable to 1.
+CSS_HOT_RELOAD=1
+# To use the full page error dialog, set this to 1. Please report false positives to
+# the issue tracker for handling.
+FULL_PAGE_ERRORS=0
+# To use a single theme, uncomment the line with the theme you want to hot-reload.
+MATRIX_THEMES='light'
+#MATRIX_THEMES='dark'
+#MATRIX_THEMES='legacy-light'
+#MATRIX_THEMES='legacy-dark'
+#MATRIX_THEMES='light-custom'
+#MATRIX_THEMES='dark-custom'
+# You can also enable multiple themes by using a comma-separated list.
+# When multiple themes are enabled, switching between them may require a full page reload.
+# Note that compilation times are proportional to the number of enabled themes.
+#MATRIX_THEMES='light,dark'

.github/release-drafter.yml

@@ -1,3 +1,3 @@
-_extends: element-hq/matrix-react-sdk
+_extends: matrix-org/matrix-react-sdk
 version-resolver:
     default: patch

.github/workflows/dockerhub.yaml

@@ -30,7 +30,7 @@ jobs:
                   fetch-depth: 0 # needed for docker-package to be able to calculate the version
 
             - name: Install Cosign
-              uses: sigstore/cosign-installer@4959ce089c160fddf62f7b42464195ba1a56d382 # v3
+              uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 # v3
 
             - name: Prepare
               if: matrix.prepare
@@ -65,7 +65,7 @@ jobs:
 
             - name: Build and push
               id: build-and-push
-              uses: docker/build-push-action@4f58ea79222b3b9dc2c8bbdd6debcef730109a75 # v6
+              uses: docker/build-push-action@5cd11c3a4ced054e52742c5fd54dca954e0edd85 # v6
               with:
                   context: .
                   push: true

.github/workflows/docs.yml

@@ -33,7 +33,7 @@ jobs:
             - name: Fetch matrix-react-sdk
               uses: actions/checkout@v4
               with:
-                  repository: element-hq/matrix-react-sdk
+                  repository: matrix-org/matrix-react-sdk
                   path: matrix-react-sdk
 
             - name: Fetch matrix-js-sdk

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

@@ -16,14 +16,14 @@ concurrency:
 jobs:
     playwright:
         name: Playwright
-        uses: element-hq/matrix-react-sdk/.github/workflows/end-to-end-tests.yaml@develop
+        uses: matrix-org/matrix-react-sdk/.github/workflows/end-to-end-tests.yaml@develop
         permissions:
             actions: read
             issues: read
             pull-requests: read
         with:
             element-web-sha: ${{ github.sha }}
-            react-sdk-repository: element-hq/matrix-react-sdk
+            react-sdk-repository: matrix-org/matrix-react-sdk
             # We only want to run the playwright tests on merge queue to prevent regressions
             # from creeping in. They take a long time to run and consume multiple concurrent runners.
             skip: ${{ github.event_name != 'merge_group' }}

.github/workflows/pending-reviews.yaml

@@ -1,10 +1,8 @@
 name: Pending reviews automation
 on:
-    # The bot exceeded its API rate limit. Disabling for now (adding workflow dispatch so the workflow file stays valid & we can test to see if it starts working again)
-    workflow_dispatch: {}
     # We run it on a schedule instead of on pull_request_* events to not create confusing messaging in the PR
-    #schedule:
-    #    - cron: "*/10 * * * *"
+    schedule:
+        - cron: "*/10 * * * *"
 concurrency: ${{ github.workflow }}
 jobs:
     bot:
@@ -64,7 +62,7 @@ jobs:
                       const repos = [
                           "element-hq/element-desktop",
                           "element-hq/element-web",
-                          "element-hq/matrix-react-sdk",
+                          "matrix-org/matrix-react-sdk",
                           "matrix-org/matrix-js-sdk",
                       ];
                       const teams = [

.github/workflows/release_prepare.yml

@@ -53,7 +53,7 @@ jobs:
               uses: actions/checkout@v4
               if: inputs.matrix-react-sdk
               with:
-                  repository: element-hq/matrix-react-sdk
+                  repository: matrix-org/matrix-react-sdk
                   path: matrix-react-sdk
                   ref: staging
                   fetch-depth: 0
@@ -70,27 +70,11 @@ jobs:
                   fetch-tags: true
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
 
-            - name: Prepare Git
+            - name: Merge develop
               run: |
                   git config --global user.email "releases@riot.im"
                   git config --global user.name "RiotRobot"
-
-            - name: Merge Element Desktop
-              if: inputs.element-desktop
-              run: |
-                  git -C "element-desktop" merge origin/develop
-            - name: Merge Element Web
-              if: inputs.element-web
-              run: |
-                  git -C "element-web" merge origin/develop
-            - name: Merge React SDK
-              if: inputs.matrix-react-sdk
-              run: |
-                  git -C "matrix-react-sdk" merge origin/develop
-            - name: Merge JS SDK
-              if: inputs.matrix-js-sdk
-              run: |
-                  git -C "matrix-js-sdk" merge origin/develop
+                  for REPO in $REPOS; do [ -d "$REPO" ] && git -C "$REPO" merge origin/develop; done
 
             - name: Push staging
               run: for REPO in $REPOS; do [ -d "$REPO" ] && git -C "$REPO" push origin staging; done
@@ -111,7 +95,7 @@ jobs:
               uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
               with:
                   ref: staging
-                  repo: element-hq/matrix-react-sdk
+                  repo: matrix-org/matrix-react-sdk
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
                   check-name: draft

.github/workflows/triage-labelled.yml

@@ -14,6 +14,7 @@ jobs:
         runs-on: ubuntu-latest
         if: >
             contains(github.event.issue.labels.*.name, 'A-Maths') ||
+            contains(github.event.issue.labels.*.name, 'A-Message-Pinning') ||
             contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
             contains(github.event.issue.labels.*.name, 'Z-IA') ||
             contains(github.event.issue.labels.*.name, 'A-Jump-To-Date ') ||
@@ -174,3 +175,26 @@ jobs:
               with:
                   project-url: https://github.com/orgs/element-hq/projects/101
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+    element_r:
+        name: Add Element R issues to Crypto Team board
+        runs-on: ubuntu-latest
+        if: >
+            contains(github.event.issue.labels.*.name, 'A-Element-R')
+        steps:
+            - id: add_to_project
+              uses: actions/add-to-project@v1.0.2
+              with:
+                  project-url: ${{ env.PROJECT_URL }}
+                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+            - id: set_fields
+              uses: titoportas/update-project-fields@421a54430b3cdc9eefd8f14f9ce0142ab7678751 # v0.1.0
+              with:
+                  project-url: ${{ env.PROJECT_URL }}
+                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  item-id: ${{ steps.add_to_project.outputs.itemId }} # Use the item-id output of the previous step
+                  field-keys: Workstream,module
+                  field-values: Element-R,web
+        env:
+            PROJECT_URL: https://github.com/orgs/element-hq/projects/76

.github/workflows/update-jitsi.yml

@@ -22,7 +22,7 @@ jobs:
               run: "yarn update:jitsi"
 
             - name: Create Pull Request
-              uses: peter-evans/create-pull-request@5e914681df9dc83aa4e4905692ca88beb2f9e91f # v7
+              uses: peter-evans/create-pull-request@4320041ed380b20e97d388d56a7fb4f9b8c20e79 # v7
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/jitsi-update

CHANGELOG.md

@@ -1,133 +1,3 @@
-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
-
-Changes in [1.11.80](https://github.com/element-hq/element-web/releases/tag/v1.11.80) (2024-10-08)
-==================================================================================================
-## ✨ Features
-
-* Add doc for 'force\_verification config option ([#28035](https://github.com/element-hq/element-web/pull/28035)). Contributed by @dbkr.
-* Roll back change to device isolation mode ([#104](https://github.com/element-hq/matrix-react-sdk/pull/104)). Contributed by @richvdh.
-* Remove right panel toggling behaviour on room header buttons ([#100](https://github.com/element-hq/matrix-react-sdk/pull/100)). Contributed by @t3chguy.
-* Improve error display for messages sent from insecure devices ([#93](https://github.com/element-hq/matrix-react-sdk/pull/93)). Contributed by @richvdh.
-* Add labs option to exclude unverified devices ([#92](https://github.com/element-hq/matrix-react-sdk/pull/92)). Contributed by @richvdh.
-* Improve contrast for timestamps, date separators \& spotlight trigger ([#91](https://github.com/element-hq/matrix-react-sdk/pull/91)). Contributed by @t3chguy.
-* Open room settings on room header avatar click ([#88](https://github.com/element-hq/matrix-react-sdk/pull/88)). Contributed by @t3chguy.
-* Use `strong` over `b` for improved a11y semantics ([#41](https://github.com/element-hq/matrix-react-sdk/pull/41)). Contributed by @t3chguy.
-* Grant Element Call widget capabilities for "raise hand" feature ([#82](https://github.com/element-hq/matrix-react-sdk/pull/82)). Contributed by @AndrewFerr.
-* Mobile registration optimizations and tests ([#62](https://github.com/element-hq/matrix-react-sdk/pull/62)). Contributed by @langleyd.
-* Ignore chat effect when older than 48h ([#48](https://github.com/element-hq/matrix-react-sdk/pull/48)). Contributed by @florianduros.
-
-## 🐛 Bug Fixes
-
-* Update native OIDC callback url to be RFC8252 compliant ([#28096](https://github.com/element-hq/element-web/pull/28096)). Contributed by @t3chguy.
-* Update icons to include transparency ([#28040](https://github.com/element-hq/element-web/pull/28040)). Contributed by @t3chguy.
-* Fix default\_widget\_container\_height in sample config ([#28034](https://github.com/element-hq/element-web/pull/28034)). Contributed by @dbkr.
-* Fix untranslated keys being rendered in `/help` dialog ([#90](https://github.com/element-hq/matrix-react-sdk/pull/90)). Contributed by @t3chguy.
-* Ensure timeline search results are visible even in video rooms ([#96](https://github.com/element-hq/matrix-react-sdk/pull/96)). Contributed by @t3chguy.
-* Pop right panel timeline when unmaximising widget to avoid double timeline ([#94](https://github.com/element-hq/matrix-react-sdk/pull/94)). Contributed by @t3chguy.
-* Fix accessible label on left panel spotlight trigger ([#87](https://github.com/element-hq/matrix-react-sdk/pull/87)). Contributed by @t3chguy.
-* Crypto: fix display of device key ([#86](https://github.com/element-hq/matrix-react-sdk/pull/86)). Contributed by @richvdh.
-
-
-
-Changes in [1.11.79](https://github.com/element-hq/element-web/releases/tag/v1.11.79) (2024-10-01)
-==================================================================================================
-* No changes
-
-## ✨ Features
-
-* [Backport staging] Allow joining calls and video rooms without enabling the labs flags ([#106](https://github.com/element-hq/matrix-react-sdk/pull/106)). Contributed by @RiotRobot.
-
-
-
-Changes in [1.11.78](https://github.com/element-hq/element-web/releases/tag/v1.11.78) (2024-09-24)
-==================================================================================================
-## ✨ Features
-
-* Add Release announcement for the pinning message list ([#46](https://github.com/element-hq/matrix-react-sdk/pull/46)). Contributed by @florianduros.
-* Unlabs feature pinning ([#22](https://github.com/element-hq/matrix-react-sdk/pull/22)). Contributed by @florianduros.
-* Add mobile registration ([#42](https://github.com/element-hq/matrix-react-sdk/pull/42)). Contributed by @langleyd.
-* Add support for `org.matrix.cross_signing_reset` UIA stage flow ([#34](https://github.com/element-hq/matrix-react-sdk/pull/34)). Contributed by @t3chguy.
-* Add timezone to user profile ([#20](https://github.com/element-hq/matrix-react-sdk/pull/20)). Contributed by @Half-Shot.
-* Add config option to force verification ([#29](https://github.com/element-hq/matrix-react-sdk/pull/29)). Contributed by @dbkr.
-* Reduce pinned message banner size ([#28](https://github.com/element-hq/matrix-react-sdk/pull/28)). Contributed by @florianduros.
-* Enable message pinning labs by default ([#25](https://github.com/element-hq/matrix-react-sdk/pull/25)). Contributed by @florianduros.
-* Remove release announcement of the new header ([#23](https://github.com/element-hq/matrix-react-sdk/pull/23)). Contributed by @florianduros.
-
-## 🐛 Bug Fixes
-
-* Fix timeout type ([#40](https://github.com/element-hq/matrix-react-sdk/pull/40)). Contributed by @dbkr.
-* Fix huge usage bandwidth and performance issue of pinned message banner. ([#37](https://github.com/element-hq/matrix-react-sdk/pull/37)). Contributed by @florianduros.
-* Reverse order of pinned message list ([#19](https://github.com/element-hq/matrix-react-sdk/pull/19)). Contributed by @florianduros.
-
-
-Changes in [1.11.77](https://github.com/element-hq/element-web/releases/tag/v1.11.77) (2024-09-10)
-==================================================================================================
-## ✨ Features
-
-* Add docs for widget container height option ([#27922](https://github.com/element-hq/element-web/pull/27922)). Contributed by @dbkr.
-* Allow user to set timezone ([#12775](https://github.com/matrix-org/matrix-react-sdk/pull/12775)). Contributed by @Timshel.
-* Implement download\_file in widget driver ([#12931](https://github.com/matrix-org/matrix-react-sdk/pull/12931)). Contributed by @weeman1337.
-* Sort the pinning message list in the same order than the banner. By timeline order. ([#12937](https://github.com/matrix-org/matrix-react-sdk/pull/12937)). Contributed by @florianduros.
-* Display pinned messages on a banner at the top of a room ([#12917](https://github.com/matrix-org/matrix-react-sdk/pull/12917)). Contributed by @florianduros.
-* Add a config option to control the default widget container height ([#12893](https://github.com/matrix-org/matrix-react-sdk/pull/12893)). Contributed by @dbkr.
-* RTE drafts ([#12674](https://github.com/matrix-org/matrix-react-sdk/pull/12674)). Contributed by @langleyd.
-* Add thread information in pinned message list ([#12902](https://github.com/matrix-org/matrix-react-sdk/pull/12902)). Contributed by @florianduros.
-* Add Pin/Unpin action in quick access of the message action bar ([#12897](https://github.com/matrix-org/matrix-react-sdk/pull/12897)). Contributed by @florianduros.
-
-## 🐛 Bug Fixes
-
-* Fix read receipt animation ([#12923](https://github.com/matrix-org/matrix-react-sdk/pull/12923)). Contributed by @dbkr.
-* Display the indicator even with one message in pinned message banner ([#12946](https://github.com/matrix-org/matrix-react-sdk/pull/12946)). Contributed by @florianduros.
-* Always display last pinned message on the banner ([#12945](https://github.com/matrix-org/matrix-react-sdk/pull/12945)). Contributed by @florianduros.
-* The pinned message banner or list are triggering  🎉 effect. ([#12944](https://github.com/matrix-org/matrix-react-sdk/pull/12944)). Contributed by @florianduros.
-* Fix reply message truncation on 2 lines ([#12929](https://github.com/matrix-org/matrix-react-sdk/pull/12929)). Contributed by @florianduros.
-* Fix pin/unpin slowness and non refresh from the message action bar ([#12934](https://github.com/matrix-org/matrix-react-sdk/pull/12934)). Contributed by @florianduros.
-* Ignore desktop for minimum browser support. ([#12928](https://github.com/matrix-org/matrix-react-sdk/pull/12928)). Contributed by @florianduros.
-
-
-
 Changes in [1.11.76](https://github.com/element-hq/element-web/releases/tag/v1.11.76) (2024-08-27)
 ==================================================================================================
 ## ✨ Features

README.md

@@ -206,6 +206,10 @@ internet. So please don't depend on resources (JS libs, CSS, images, fonts)
 hosted by external CDNs or servers but instead please package all dependencies
 into Element itself.
 
+CSS hot-reload is available as an opt-in development feature. You can enable it
+by defining a `CSS_HOT_RELOAD` environment variable, in a `.env` file in the root
+of the repository. See `.env.example` for documentation and an example.
+
 # Setting up a dev environment
 
 Much of the functionality in Element is actually in the `matrix-react-sdk` and

config.sample.json

@@ -12,7 +12,6 @@
     "disable_guests": false,
     "disable_login_language_selector": false,
     "disable_3pid_login": false,
-    "force_verification": false,
     "brand": "Element",
     "integrations_ui_url": "https://scalar.vector.im/",
     "integrations_rest_url": "https://scalar.vector.im/api",
@@ -23,7 +22,7 @@
         "https://scalar-staging.vector.im/api",
         "https://scalar-staging.riot.im/scalar/api"
     ],
-    "default_widget_container_height": 280,
+    "default_widget_height": 280,
     "default_country_code": "GB",
     "show_labs_settings": false,
     "features": {},

docs/config.md

@@ -154,8 +154,7 @@ complete re-branding/private labeling, a more personalised experience can be ach
     2. `description`: Required. The description to use for the notice.
     3. `show_once`: Optional. If true then the notice will only be shown once per device.
 18. `help_url`: The URL to point users to for help with the app, defaults to `https://element.io/help`.
-19. `help_encryption_url`: The URL to point users to for help with encryption, defaults to `https://element.io/help#encryption`.
-20. `force_verification`: If true, users must verify new logins (eg. with another device / their security key)
+19. `help_encrption_url`: The URL to point users to for help with encryption, defaults to `https://element.io/help#encryption`.
 
 ### `desktop_builds` and `mobile_builds`
 

docs/labs.md

@@ -83,7 +83,7 @@ Enables sharing your current location to the timeline, with live updates.
 
 ## Video rooms (`feature_video_rooms`)
 
-Enables support for creating video rooms, which are persistent video chats that users can jump in and out of.
+Enables support for creating and joining video rooms, which are persistent video chats that users can jump in and out of.
 
 ## Element Call video rooms (`feature_element_call_video_rooms`) [In Development]
 
@@ -93,7 +93,7 @@ This flag will not have any effect unless `feature_video_rooms` is also enabled.
 
 ## New group call experience (`feature_group_calls`) [In Development]
 
-This feature allows users to place native [MSC3401](https://github.com/matrix-org/matrix-spec-proposals/pull/3401) group calls in compatible rooms, using Element Call.
+This feature allows users to place and join native [MSC3401](https://github.com/matrix-org/matrix-spec-proposals/pull/3401) group calls in compatible rooms, using Element Call.
 
 If you're enabling this at the deployment level, you may also want to reference the docs for the `element_call` config section.
 
@@ -110,6 +110,10 @@ This is useful while we experiment with encryption and to make calling compatibl
 
 Enables rendering of MD / HTML in room topics.
 
+## New room header & details (`feature_new_room_decoration_ui`) [In Development]
+
+Refactors visually the room header and room sidebar
+
 ## Enable the notifications panel in the room header (`feature_notifications`)
 
 Unreliable in encrypted rooms.

docs/release.md

@@ -200,9 +200,9 @@ switched back to the version of the dependency from the master branch to not lea
 
 ### Matrix React SDK
 
--   [ ] Check the draft release which has been generated by [the automation](https://github.com/element-hq/matrix-react-sdk/actions/workflows/release-drafter.yml)
+-   [ ] Check the draft release which has been generated by [the automation](https://github.com/matrix-org/matrix-react-sdk/actions/workflows/release-drafter.yml)
 -   [ ] Make any changes to the release notes in the draft release as are necessary - **Do not click publish, only save draft**
--   [ ] Kick off a release using [the automation](https://github.com/element-hq/matrix-react-sdk/actions/workflows/release.yml) - making sure to select the right type of release. For anything other than an RC: choose final. You should not need to ever switch off either of the Publishing options.
+-   [ ] Kick off a release using [the automation](https://github.com/matrix-org/matrix-react-sdk/actions/workflows/release.yml) - making sure to select the right type of release. For anything other than an RC: choose final. You should not need to ever switch off either of the Publishing options.
 
 ### Element Web
 
@@ -256,7 +256,7 @@ For the first RC of a given release cycle do these steps:
 
 -   [ ] Go to the [matrix-js-sdk Renovate dashboard](https://github.com/matrix-org/matrix-js-sdk/issues/2406) and click the checkbox to create/update its PRs.
 
--   [ ] Go to the [matrix-react-sdk Renovate dashboard](https://github.com/element-hq/matrix-react-sdk/issues/6) and click the checkbox to create/update its PRs.
+-   [ ] Go to the [matrix-react-sdk Renovate dashboard](https://github.com/matrix-org/matrix-react-sdk/issues/9667) and click the checkbox to create/update its PRs.
 
 -   [ ] Go to the [element-web Renovate dashboard](https://github.com/element-hq/element-web/issues/22941) and click the checkbox to create/update its PRs.
 

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"
     }
 }

element.io/develop/config.json

@@ -50,12 +50,11 @@
     "features": {
         "threadsActivityCentre": true,
         "feature_video_rooms": true,
-        "feature_group_calls": true,
+        "feature_new_room_decoration_ui": true,
         "feature_element_call_video_rooms": true
     },
     "setting_defaults": {
-        "RustCrypto.staged_rollout_percent": 100,
-        "Registration.mobileRegistrationHelper": true
+        "RustCrypto.staged_rollout_percent": 100
     },
     "element_call": {
         "url": "https://call.element.dev"

jest.config.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { env } from "process";

module_system/BuildConfig.ts

@@ -2,7 +2,7 @@
 Copyright 2022-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import * as YAML from "yaml";

module_system/installer.ts

@@ -2,7 +2,7 @@
 Copyright 2022-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import * as fs from "fs";

module_system/scripts/install.ts

@@ -2,7 +2,7 @@
 Copyright 2022-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { readBuildConfig } from "../BuildConfig";

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.83",
+    "version": "1.11.76",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -68,9 +68,9 @@
     },
     "resolutions": {
         "@types/react-dom": "17.0.25",
-        "@types/react": "17.0.82",
+        "@types/react": "17.0.80",
         "@vector-im/compound-design-tokens": "1.8.0",
-        "@vector-im/compound-web": "7.0.0",
+        "@vector-im/compound-web": "5.5.0",
         "@floating-ui/react": "0.26.11",
         "@radix-ui/react-id": "1.1.0"
     },
@@ -78,12 +78,12 @@
         "@formatjs/intl-segmenter": "^11.5.7",
         "@matrix-org/react-sdk-module-api": "^2.3.0",
         "@vector-im/compound-design-tokens": "^1.8.0",
-        "@vector-im/compound-web": "^7.0.0",
+        "@vector-im/compound-web": "^5.5.0",
         "jsrsasign": "^11.0.0",
         "katex": "^0.16.0",
         "lodash": "^4.17.21",
-        "matrix-js-sdk": "34.9.0",
-        "matrix-react-sdk": "3.114.0",
+        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+        "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#develop",
         "matrix-widget-api": "^1.8.2",
         "react": "17.0.2",
         "react-dom": "17.0.2",
@@ -132,7 +132,7 @@
         "@types/node-fetch": "^2.6.4",
         "@types/pako": "^2.0.3",
         "@types/qrcode": "^1.5.5",
-        "@types/react": "17.0.82",
+        "@types/react": "17.0.80",
         "@types/react-beautiful-dnd": "^13.1.7",
         "@types/react-dom": "17.0.25",
         "@types/react-transition-group": "^4.4.9",
@@ -148,14 +148,14 @@
         "babel-loader": "^9.0.0",
         "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
         "buffer": "^6.0.3",
-        "chokidar": "^4.0.0",
-        "concurrently": "^9.0.0",
+        "chokidar": "^3.5.1",
+        "concurrently": "^8.0.0",
         "copy-webpack-plugin": "^12.0.0",
         "cronstrue": "^2.41.0",
         "css-loader": "^7.0.0",
         "css-minimizer-webpack-plugin": "^7.0.0",
         "dotenv": "^16.0.2",
-        "eslint": "8.57.1",
+        "eslint": "8.57.0",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-deprecate": "0.8.5",
@@ -188,7 +188,7 @@
         "postcss-hexrgba": "2.1.0",
         "postcss-import": "16.1.0",
         "postcss-loader": "8.1.1",
-        "postcss-mixins": "^11.0.0",
+        "postcss-mixins": "^10.0.0",
         "postcss-nested": "^6.0.0",
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
@@ -198,13 +198,15 @@
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "semver": "^7.5.2",
+        "string-replace-loader": "3",
+        "style-loader": "4",
         "stylelint": "^16.1.0",
         "stylelint-config-standard": "^36.0.0",
         "stylelint-scss": "^6.0.0",
         "terser-webpack-plugin": "^5.3.9",
         "ts-node": "^10.9.1",
         "ts-prune": "^0.10.3",
-        "typescript": "5.6.2",
+        "typescript": "5.5.4",
         "util": "^0.12.5",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.8.0",

recorder-worklet-loader.js

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 // Inspired by https://github.com/reklawnos/worklet-loader which doesn't

res/css/structures/ErrorView.pcss

@@ -2,7 +2,7 @@
 Copyright 2020-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.
+Please see LICENSE in the repository root for full details.
 */
 
 .mx_ErrorView {

scripts/fetch-develop.deps.sh

@@ -86,7 +86,7 @@ yarn link matrix-js-sdk
 
 echo 'Setting up matrix-react-sdk'
 
-dodep element-hq matrix-react-sdk
+dodep matrix-org matrix-react-sdk
 
 pushd matrix-react-sdk
 yarn link

scripts/genflags.sh

@@ -1,9 +1,7 @@
 # Copyright 2017-2024 New Vector Ltd.
-
 # SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 # Please see LICENSE in the repository root for full details.
 
-
 # genflags.sh - Generates pngs for use with CountryDropdown.js
 #
 # Dependencies:

scripts/layered.sh

@@ -40,7 +40,7 @@ if [ -d matrix-analytics-events ]; then
 fi
 
 # Now set up the react-sdk
-node_modules/matrix-react-sdk/scripts/fetchdep.sh element-hq matrix-react-sdk develop
+node_modules/matrix-react-sdk/scripts/fetchdep.sh matrix-org matrix-react-sdk develop
 pushd matrix-react-sdk
 yarn link
 yarn link matrix-js-sdk

src/@types/global.d.ts

@@ -2,7 +2,7 @@
 Copyright 2020-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import "matrix-react-sdk/src/@types/global"; // load matrix-react-sdk's type extensions first
@@ -26,7 +26,6 @@ type ElectronChannel =
     | "userDownloadAction"
     | "openDesktopCapturerSourcePicker"
     | "userAccessToken"
-    | "homeserverUrl"
     | "serverSupportedVersions";
 
 declare global {

src/@types/jitsi-meet.d.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import "jitsi-meet";

src/@types/svg.d.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 declare module "*.svg" {

src/async-components/structures/ErrorView.tsx

@@ -2,7 +2,7 @@
 Copyright 2020-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import React, { ReactNode } from "react";

src/components/views/auth/VectorAuthFooter.tsx

@@ -3,7 +3,7 @@ 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.
+Please see LICENSE in the repository root for full details.
 */
 
 import React, { ReactElement } from "react";

src/components/views/auth/VectorAuthHeaderLogo.tsx

@@ -3,7 +3,7 @@ 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.
+Please see LICENSE in the repository root for full details.
 */
 
 import * as React from "react";

src/components/views/auth/VectorAuthPage.tsx

@@ -2,7 +2,7 @@
 Copyright 2019-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import * as React from "react";

src/favicon.ts

@@ -2,7 +2,7 @@
 Copyright 2020-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.
+Please see LICENSE in the repository root for full details.
 */
 
 interface IParams {

src/languageHandler.tsx

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import React from "react";

src/serviceworker/index.ts

@@ -2,7 +2,7 @@
 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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { idbLoad } from "matrix-react-sdk/src/utils/StorageAccess";
@@ -40,15 +40,12 @@ global.addEventListener("fetch", (event: FetchEvent) => {
 
     // Note: ideally we'd keep the request headers etc, but in practice we can't even see those details.
     // See https://stackoverflow.com/a/59152482
-    const url = new URL(event.request.url);
+    let url = event.request.url;
 
     // We only intercept v3 download and thumbnail requests as presumably everything else is deliberate.
     // For example, `/_matrix/media/unstable` or `/_matrix/media/v3/preview_url` are something well within
     // the control of the application, and appear to be choices made at a higher level than us.
-    if (
-        !url.pathname.startsWith("/_matrix/media/v3/download") &&
-        !url.pathname.startsWith("/_matrix/media/v3/thumbnail")
-    ) {
+    if (!url.includes("/_matrix/media/v3/download") && !url.includes("/_matrix/media/v3/thumbnail")) {
         return; // not a URL we care about
     }
 
@@ -56,42 +53,34 @@ global.addEventListener("fetch", (event: FetchEvent) => {
     // later on we need to proxy the request through if it turns out the server doesn't support authentication.
     event.respondWith(
         (async (): Promise<Response> => {
-            let auth: { accessToken?: string; homeserver: string } | undefined;
+            let accessToken: string | undefined;
             try {
                 // Figure out which homeserver we're communicating with
-                const csApi = url.origin;
+                const csApi = url.substring(0, url.indexOf("/_matrix/media/v3"));
 
                 // Add jitter to reduce request spam, particularly to `/versions` on initial page load
                 await new Promise<void>((resolve) => setTimeout(() => resolve(), Math.random() * 10));
 
-                // Locate the access token and homeserver url
+                // Locate our access token, and populate the fetchConfig with the authentication header.
                 // @ts-expect-error - service worker types are not available. See 'fetch' event handler.
                 const client = await global.clients.get(event.clientId);
-                auth = await getAuthData(client);
-
-                // Is this request actually going to the homeserver?
-                const isRequestToHomeServer = url.origin === new URL(auth.homeserver).origin;
-                if (!isRequestToHomeServer) {
-                    throw new Error("Request appears to be for media endpoint but wrong homeserver!");
-                }
+                accessToken = await getAccessToken(client);
 
                 // Update or populate the server support map using a (usually) authenticated `/versions` call.
-                await tryUpdateServerSupportMap(csApi, auth.accessToken);
+                await tryUpdateServerSupportMap(csApi, accessToken);
 
                 // If we have server support (and a means of authentication), rewrite the URL to use MSC3916 endpoints.
-                if (serverSupportMap[csApi].supportsAuthedMedia && auth.accessToken) {
-                    url.href = url.href.replace(/\/media\/v3\/(.*)\//, "/client/v1/media/$1/");
+                if (serverSupportMap[csApi].supportsAuthedMedia && accessToken) {
+                    url = url.replace(/\/media\/v3\/(.*)\//, "/client/v1/media/$1/");
                 } // else by default we make no changes
             } catch (err) {
-                // In case of some error, we stay safe by not adding the access-token to the request.
-                auth = undefined;
                 console.error("SW: Error in request rewrite.", err);
             }
 
             // Add authentication and send the request. We add authentication even if MSC3916 endpoints aren't
             // being used to ensure patches like this work:
             // https://github.com/matrix-org/synapse/commit/2390b66bf0ec3ff5ffb0c7333f3c9b239eeb92bb
-            return fetch(url, fetchConfigForToken(auth?.accessToken));
+            return fetch(url, fetchConfigForToken(accessToken));
         })(),
     );
 });
@@ -117,36 +106,35 @@ async function tryUpdateServerSupportMap(clientApiUrl: string, accessToken?: str
 
 // Ideally we'd use the `Client` interface for `client`, but since it's not available (see 'fetch' listener), we use
 // unknown for now and force-cast it to something close enough later.
-async function getAuthData(client: unknown): Promise<{ accessToken: string; homeserver: string }> {
+async function getAccessToken(client: unknown): Promise<string | undefined> {
     // Access tokens are encrypted at rest, so while we can grab the "access token", we'll need to do work to get the
     // real thing.
     const encryptedAccessToken = await idbLoad("account", "mx_access_token");
 
     // We need to extract a user ID and device ID from localstorage, which means calling WebPlatform for the
     // read operation. Service workers can't access localstorage.
-    const { userId, deviceId, homeserver } = await askClientForUserIdParams(client);
+    const { userId, deviceId } = await askClientForUserIdParams(client);
 
     // ... and this is why we need the user ID and device ID: they're index keys for the pickle key table.
     const pickleKeyData = await idbLoad("pickleKey", [userId, deviceId]);
     if (pickleKeyData && (!pickleKeyData.encrypted || !pickleKeyData.iv || !pickleKeyData.cryptoKey)) {
-        throw new Error("SW: Invalid pickle key loaded - ignoring");
+        console.error("SW: Invalid pickle key loaded - ignoring");
+        return undefined;
     }
 
     // Finally, try decrypting the thing and return that. This may fail, but that's okay.
     try {
         const pickleKey = await buildAndEncodePickleKey(pickleKeyData, userId, deviceId);
-        const accessToken = await tryDecryptToken(pickleKey, encryptedAccessToken, ACCESS_TOKEN_IV);
-        return { accessToken, homeserver };
+        return tryDecryptToken(pickleKey, encryptedAccessToken, ACCESS_TOKEN_IV);
     } catch (e) {
-        throw new Error("SW: Error decrypting access token.", { cause: e });
+        console.error("SW: Error decrypting access token.", e);
+        return undefined;
     }
 }
 
 // Ideally we'd use the `Client` interface for `client`, but since it's not available (see 'fetch' listener), we use
 // unknown for now and force-cast it to something close enough inside the function.
-async function askClientForUserIdParams(
-    client: unknown,
-): Promise<{ userId: string; deviceId: string; homeserver: string }> {
+async function askClientForUserIdParams(client: unknown): Promise<{ userId: string; deviceId: string }> {
     return new Promise((resolve, reject) => {
         // Dev note: this uses postMessage, which is a highly insecure channel. postMessage is typically visible to other
         // tabs, windows, browser extensions, etc, making it far from ideal for sharing sensitive information. This is

src/vector/app.tsx

@@ -1,13 +1,12 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2018, 2019 New Vector Ltd
+Copyright 2018-2024 New Vector Ltd.
 Copyright 2017 Vector Creations 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.
+Please see LICENSE in the repository root for full details.
 */
 
 // To ensure we load the browser-matrix version first

src/vector/devcss.ts

@@ -0,0 +1,38 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * This code is removed on production builds.
+ *
+ * Webpack's `string-replace-loader` searches for the `use theming` string
+ * in this specific file, and replaces it with CSS requires statements that
+ * are specific to the themes we have enabled.
+ *
+ * Without this workaround, webpack would import the CSS of all themes, which
+ * would defeat the purpose of hot-reloading since all themes would be compiled,
+ * which would result in compilation times on the order of 30s, even on a
+ * powerful machine.
+ *
+ * For more details, see webpack.config.js:184 (string-replace-loader)
+ */
+if (process.env.NODE_ENV === "development") {
+    ("use theming");
+    /**
+     * Clean up old hot-module script injections as they hog up memory
+     * and anything other than the newest one is really not needed at all.
+     * We don't need to do it more frequently than every half a minute or so,
+     * but it's done to delay full page reload due to app slowness.
+     */
+    setInterval(() => {
+        const elements = Array.from(document.querySelectorAll("script[src*=hot-update]"));
+        if (elements.length > 1) {
+            const oldInjects = elements.slice(0, elements.length - 1);
+            oldInjects.forEach((e) => e.remove());
+        }
+    }, 1000);
+}

src/vector/getconfig.ts

@@ -2,7 +2,7 @@
 Copyright 2018-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import type { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";

src/vector/index.html

@@ -75,11 +75,11 @@
     <img src="<%= require('matrix-react-sdk/res/img/warning.svg').default %>" aria-hidden alt="" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <img src="<%= require('matrix-react-sdk/res/img/e2e/warning.svg').default %>" aria-hidden alt="" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <img src="<%= require('matrix-react-sdk/res/img/feather-customised/warning-triangle.svg').default %>" aria-hidden alt="" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('@vector-im/compound-design-tokens/icons/bold.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('@vector-im/compound-design-tokens/icons/inline-code.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('@vector-im/compound-design-tokens/icons/italic.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('@vector-im/compound-design-tokens/icons/quote.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('@vector-im/compound-design-tokens/icons/strikethrough.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/bold.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/code.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/italics.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/quote.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/strikethrough.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
 
     <!-- let CSS themes pass constants to the app -->
     <div id="mx_theme_accentColor"></div><div id="mx_theme_secondaryAccentColor"></div><div id="mx_theme_tertiaryAccentColor"></div>

src/vector/index.ts

@@ -1,13 +1,12 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2018, 2019 New Vector Ltd
+Copyright 2018-2024 New Vector Ltd.
 Copyright 2017 Vector Creations 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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
@@ -22,6 +21,14 @@ import "./modernizr";
 // in webpack.config.js
 require("katex/dist/katex.css");
 
+/**
+ * This require is necessary only for purposes of CSS hot-reload, as otherwise
+ * webpack has some incredible problems figuring out which CSS files should be
+ * hot-reloaded, even with proper hints for the loader.
+ *
+ * On production build it's going to be an empty module, so don't worry about that.
+ */
+require("./devcss");
 require("./localstorage-fix");
 
 async function settled(...promises: Array<Promise<any>>): Promise<void> {
@@ -54,6 +61,11 @@ function checkBrowserFeatures(): boolean {
     );
     // ES2019: http://262.ecma-international.org/10.0/#sec-object.fromentries
     window.Modernizr.addTest("objectfromentries", () => typeof window.Object?.fromEntries === "function");
+    // ES2024: https://tc39.es/ecma262/2024/#sec-get-regexp.prototype.unicodesets
+    window.Modernizr.addTest(
+        "regexpunicodesets",
+        () => window.RegExp?.prototype && "unicodeSets" in window.RegExp.prototype,
+    );
     // ES2024: https://402.ecma-international.org/9.0/#sec-intl.segmenter
     // The built-in modernizer 'intl' check only checks for the presence of the Intl object, not the Segmenter,
     // and older Firefox has the former but not the latter, so we add our own.

src/vector/indexeddb-worker.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2017 Vector Creations Ltd
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { IndexedDBStoreWorker } from "matrix-js-sdk/src/indexeddb-worker";

src/vector/init.tsx

@@ -1,11 +1,11 @@
 /*
-Copyright 2018-2024 New Vector Ltd.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2018-2024 New Vector Ltd.
 Copyright 2017 Vector Creations 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.
+Please see LICENSE in the repository root for full details.
 */
 
 import * as ReactDOM from "react-dom";

src/vector/jitsi/index.pcss

@@ -2,7 +2,7 @@
 Copyright 2020-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.
+Please see LICENSE in the repository root for full details.
 */
 
 /* TODO: Match the user's theme: https://github.com/element-hq/element-web/issues/12794 */

src/vector/jitsi/index.ts

@@ -2,7 +2,7 @@
 Copyright 2020-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { KJUR } from "jsrsasign";

src/vector/platform/ElectronPlatform.tsx

@@ -1,13 +1,12 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>
-Copyright 2018-2021 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2018-2024 New Vector Ltd.
 Copyright 2016 Aviral Dasgupta
 Copyright 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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { UpdateCheckStatus, UpdateStatus } from "matrix-react-sdk/src/BasePlatform";
@@ -126,11 +125,6 @@ export default class ElectronPlatform extends VectorBasePlatform {
             window.electron!.send("userAccessToken", MatrixClientPeg.get()?.getAccessToken());
         });
 
-        // `homeserverUrl` (IPC) is requested by the main process. A reply is sent over the same channel.
-        window.electron.on("homeserverUrl", () => {
-            window.electron!.send("homeserverUrl", MatrixClientPeg.get()?.getHomeserverUrl());
-        });
-
         // `serverSupportedVersions` is requested by the main process when it needs to know if the
         // server supports a particular version. This is primarily used to detect authenticated media
         // support. A reply is sent over the same channel.
@@ -477,12 +471,6 @@ export default class ElectronPlatform extends VectorBasePlatform {
     public getOidcCallbackUrl(): URL {
         const url = super.getOidcCallbackUrl();
         url.protocol = "io.element.desktop";
-        // Trim the double slash into a single slash to comply with https://datatracker.ietf.org/doc/html/rfc8252#section-7.1
-        // Chrome seems to have a strange issue where non-standard protocols prevent URL object mutations on pathname
-        // field, so we cannot mutate `pathname` reliably and instead have to rewrite the href manually.
-        if (url.pathname.startsWith("//")) {
-            url.href = url.href.replace(url.pathname, url.pathname.slice(1));
-        }
         return url;
     }
 }

src/vector/platform/IPCManager.ts

@@ -2,7 +2,7 @@
 Copyright 2022-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { defer, IDeferred } from "matrix-js-sdk/src/utils";

src/vector/platform/PWAPlatform.ts

@@ -2,7 +2,7 @@
 Copyright 2020-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";

src/vector/platform/SeshatIndexManager.ts

@@ -2,7 +2,7 @@
 Copyright 2022-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import BaseEventIndexManager, {

src/vector/platform/VectorBasePlatform.ts

@@ -1,11 +1,11 @@
 /*
-Copyright 2018-2024 New Vector Ltd.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2018-2024 New Vector Ltd.
 Copyright 2016 Aviral Dasgupta
 Copyright 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.
+Please see LICENSE in the repository root for full details.
 */
 
 import BasePlatform from "matrix-react-sdk/src/BasePlatform";

src/vector/platform/WebPlatform.ts

@@ -4,7 +4,7 @@ Copyright 2016 Aviral Dasgupta
 Copyright 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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { UpdateCheckStatus, UpdateStatus } from "matrix-react-sdk/src/BasePlatform";
@@ -14,7 +14,6 @@ import { Action } from "matrix-react-sdk/src/dispatcher/actions";
 import { CheckUpdatesPayload } from "matrix-react-sdk/src/dispatcher/payloads/CheckUpdatesPayload";
 import UAParser from "ua-parser-js";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
 
 import VectorBasePlatform from "./VectorBasePlatform";
 import { parseQs } from "../url_utils";
@@ -63,12 +62,10 @@ export default class WebPlatform extends VectorBasePlatform {
             if (event.data?.["type"] === "userinfo" && event.data?.["responseKey"]) {
                 const userId = localStorage.getItem("mx_user_id");
                 const deviceId = localStorage.getItem("mx_device_id");
-                const homeserver = MatrixClientPeg.get()?.getHomeserverUrl();
                 event.source!.postMessage({
                     responseKey: event.data["responseKey"],
                     userId,
                     deviceId,
-                    homeserver,
                 });
             }
         } catch (e) {

src/vector/rageshakesetup.ts

@@ -1,10 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2018 New Vector Ltd
+Copyright 2018-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.
+Please see LICENSE in the repository root for full details.
 */
 
 /*

src/vector/routing.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 // Parse the given window.location and return parameters that can be used when calling

src/vector/url_utils.ts

@@ -2,7 +2,7 @@
 Copyright 2018-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { QueryDict, decodeParams } from "matrix-js-sdk/src/utils";

test/app-tests/server-config-test.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2023 Yorusaka Miyabi <shadowrz@disroot.org>
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";

test/app-tests/wrapper-test.tsx

@@ -1,10 +1,10 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2023 Mikhail Aheichyk
 Copyright 2023 Nordeck IT + Consulting GmbH.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import React from "react";

test/jest-mocks.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2020-2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 // https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

test/setup/setupLanguage.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import fetchMock from "fetch-mock-jest";

test/test-utils.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2016-2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { RenderResult, screen, waitFor } from "@testing-library/react";

test/unit-tests/async-components/structures/ErrorView-test.tsx

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import * as React from "react";

test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap

@@ -102,7 +102,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
       >
         <button
-          class="_button_i91xf_17 _has-icon_i91xf_66"
+          class="_button_zt6rp_17 _has-icon_zt6rp_61"
           data-kind="secondary"
           data-size="sm"
           role="button"
@@ -143,7 +143,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
     >
       <a
-        class="_button_i91xf_17 _has-icon_i91xf_66"
+        class="_button_zt6rp_17 _has-icon_zt6rp_61"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/macos/Element.dmg"
@@ -158,7 +158,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Mac
       </a>
       <a
-        class="_button_i91xf_17 _has-icon_i91xf_66"
+        class="_button_zt6rp_17 _has-icon_zt6rp_61"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
@@ -173,7 +173,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Windows (64-bit)
       </a>
       <a
-        class="_button_i91xf_17 _has-icon_i91xf_66"
+        class="_button_zt6rp_17 _has-icon_zt6rp_61"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/ia32/Element%20Setup.exe"
@@ -188,7 +188,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Windows (32-bit)
       </a>
       <a
-        class="_button_i91xf_17 _has-icon_i91xf_66"
+        class="_button_zt6rp_17 _has-icon_zt6rp_61"
         data-kind="secondary"
         data-size="lg"
         href="https://element.io/download#linux"

test/unit-tests/components/views/auth/VectorAuthFooter-test.tsx

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import * as React from "react";

test/unit-tests/components/views/auth/VectorAuthHeaderLogo-test.tsx

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import * as React from "react";

test/unit-tests/components/views/auth/VectorAuthPage-test.tsx

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import * as React from "react";

test/unit-tests/favicon-test.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import "jest-canvas-mock";

test/unit-tests/vector/getconfig-test.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import fetchMock from "fetch-mock-jest";

test/unit-tests/vector/platform/ElectronPlatform-test.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";

test/unit-tests/vector/platform/PWAPlatform-test.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { mocked } from "jest-mock";

test/unit-tests/vector/platform/WebPlatform-test.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import fetchMock from "fetch-mock-jest";

test/unit-tests/vector/routing-test.ts

@@ -1,9 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
+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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { getInitialScreenAfterLogin, onNewScreen } from "../../../src/vector/routing";

test/unit-tests/vector/url_utils-test.ts

@@ -2,7 +2,7 @@
 Copyright 2020-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.
+Please see LICENSE in the repository root for full details.
 */
 
 import { parseQsFromFragment, parseQs } from "../../../src/vector/url_utils";

webpack.config.js

@@ -36,6 +36,15 @@ const cssThemes = {
     "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.pcss",
 };
 
+function getActiveThemes() {
+    // Default to `light` theme when the MATRIX_THEMES environment variable is not defined.
+    const theme = process.env.MATRIX_THEMES ?? "light";
+    return theme
+        .split(",")
+        .map((x) => x.trim())
+        .filter(Boolean);
+}
+
 // See docs/customisations.md
 let fileOverrides = {
     /* {[file: string]: string} */
@@ -96,6 +105,7 @@ module.exports = (env, argv) => {
     //      (called to build nightly and develop.element.io)
     const nodeEnv = argv.mode;
     const devMode = nodeEnv !== "production";
+    const useHMR = process.env.CSS_HOT_RELOAD === "1" && devMode;
     const enableMinification = !devMode && !process.env.CI_PACKAGE;
 
     const development = {};
@@ -120,6 +130,19 @@ module.exports = (env, argv) => {
     const reactSdkSrcDir = path.resolve(require.resolve("matrix-react-sdk/package.json"), "..", "src");
     const jsSdkSrcDir = path.resolve(require.resolve("matrix-js-sdk/package.json"), "..", "src");
 
+    const ACTIVE_THEMES = getActiveThemes();
+    function getThemesImports() {
+        const imports = ACTIVE_THEMES.map((t) => {
+            return cssThemes[`theme-${t}`].replace("./node_modules/", ""); // theme import path
+        });
+        const s = JSON.stringify(ACTIVE_THEMES);
+        return `
+            window.MX_insertedThemeStylesCounter = 0;
+            window.MX_DEV_ACTIVE_THEMES = (${s});
+            ${imports.map((i) => `import("${i}")`).join("\n")};
+        `;
+    }
+
     return {
         ...development,
 
@@ -134,7 +157,7 @@ module.exports = (env, argv) => {
                 import: "./src/serviceworker/index.ts",
                 filename: "sw.js", // update WebPlatform if this changes
             },
-            ...cssThemes,
+            ...(useHMR ? {} : cssThemes),
         },
 
         optimization: {
@@ -253,6 +276,14 @@ module.exports = (env, argv) => {
                 /highlight\.js[\\/]lib[\\/]languages/,
             ],
             rules: [
+                useHMR && {
+                    test: /devcss\.ts$/,
+                    loader: "string-replace-loader",
+                    options: {
+                        search: '"use theming";',
+                        replace: getThemesImports(),
+                    },
+                },
                 {
                     test: /\.(ts|js)x?$/,
                     include: (f) => {
@@ -338,7 +369,42 @@ module.exports = (env, argv) => {
                 {
                     test: /\.pcss$/,
                     use: [
-                        MiniCssExtractPlugin.loader,
+                        /**
+                         * This code is hopeful that no .pcss outside of our themes will be directly imported in any
+                         * of the JS/TS files.
+                         * Should be MUCH better with webpack 5, but we're stuck to this solution for now.
+                         */
+                        useHMR
+                            ? {
+                                  loader: "style-loader",
+                                  /**
+                                   * If we refactor the `theme.js` in `matrix-react-sdk` a little bit,
+                                   * we could try using `lazyStyleTag` here to add and remove styles on demand,
+                                   * that would nicely resolve issues of race conditions for themes,
+                                   * at least for development purposes.
+                                   */
+                                  options: {
+                                      insert: function insertBeforeAt(element) {
+                                          const parent = document.querySelector("head");
+                                          // We're in iframe
+                                          if (!window.MX_DEV_ACTIVE_THEMES) {
+                                              parent.appendChild(element);
+                                              return;
+                                          }
+                                          // Properly disable all other instances of themes
+                                          element.disabled = true;
+                                          element.onload = () => {
+                                              element.disabled = true;
+                                          };
+                                          const theme =
+                                              window.MX_DEV_ACTIVE_THEMES[window.MX_insertedThemeStylesCounter];
+                                          element.setAttribute("data-mx-theme", theme);
+                                          window.MX_insertedThemeStylesCounter++;
+                                          parent.appendChild(element);
+                                      },
+                                  },
+                              }
+                            : MiniCssExtractPlugin.loader,
                         {
                             loader: "css-loader",
                             options: {
@@ -576,8 +642,8 @@ module.exports = (env, argv) => {
 
             // This exports our CSS using the splitChunks and loaders above.
             new MiniCssExtractPlugin({
-                filename: "bundles/[fullhash]/[name].css",
-                chunkFilename: "bundles/[fullhash]/[name].css",
+                filename: useHMR ? "bundles/[name].css" : "bundles/[fullhash]/[name].css",
+                chunkFilename: useHMR ? "bundles/[name].css" : "bundles/[fullhash]/[name].css",
                 ignoreOrder: false, // Enable to remove warnings about conflicting order
             }),