v1.9.9

Prepare changelog for v1.9.9
Upgrade matrix-react-sdk to 3.38.0
2025-12-05 01:10:40 +00:00 · 2022-01-17 14:30:03 +00:00 · 2022-01-17 14:30:02 +00:00 · 2022-01-17 14:28:24 +00:00 · 2022-01-17 14:27:59 +00:00 · 2022-01-11 15:11:25 +00:00
86 changed files with 5002 additions and 1934 deletions
--- a/.env.example
+++ b/.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'
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -0,0 +1 @@
+* @vector-im/element-web
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,48 +0,0 @@
-<!-- A picture's worth a thousand words: PLEASE INCLUDE A SCREENSHOT :P -->
-
-<!-- Please report security issues by email to security@matrix.org -->
-
-<!-- This is a bug report template. By following the instructions below and
-filling out the sections with your information, you will help the us to get all
-the necessary data to fix your issue.
-
-You can also preview your report before submitting it. You may remove sections
-that aren't relevant to your particular case.
-
-Text between <!-- and --> marks will be invisible in the report.
-->
-
-#### Description
-
-Describe here the problem that you are experiencing, or the feature you are requesting.
-
-#### Steps to reproduce
-
- For bugs, list the steps
- that reproduce the bug
- using hyphens as bullet points
-
-Describe how what happens differs from what you expected.
-
-Log: sent/not sent?    <!-- You can send us the app's logs via the 'Report bug'
-link on the 'Settings' page. Very important for hard-to-reproduce bugs. Please
-file a bug here too! -->
-
-<!-- Include screenshots if possible: you can drag and drop images below. -->
-
-#### Version information
-
-<!-- IMPORTANT: please answer the following questions, to help us narrow down the problem -->
-
- **Platform**: web (in-browser) or desktop?
-
-For the web app:
-
- **Browser**: Chrome, Firefox, Safari, Edge? which version?
- **OS**: Windows, macOS, Ubuntu, Arch Linux, etc?
- **URL**: develop.element.io / app.element.io / somewhere else? If a private server, what version of Element Web?
-
-For the desktop app:
-
- **OS**: Windows, macOS, Ubuntu, Arch Linux, etc?
- **Version**: 1.x.y <!-- check the user settings panel if unsure -->
--- a/.github/ISSUE_TEMPLATE/bug-desktop.yml
+++ b/.github/ISSUE_TEMPLATE/bug-desktop.yml
@@ -0,0 +1,75 @@
+name: Bug report for the Element desktop app (not in a browser)
+description: File a bug report if you are using the desktop Element application.
+labels: [T-Defect]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+
+        Please report security issues by email to security@matrix.org
+  - type: textarea
+    id: reproduction-steps
+    attributes:
+      label: Steps to reproduce
+      description: Please attach screenshots, videos or logs if you can.
+      placeholder: Tell us what you see!
+      value: |
+        1. Where are you starting? What can you see?
+        2. What do you click?
+        3. More steps…
+    validations:
+      required: true
+  - type: textarea
+    id: result
+    attributes:
+      label: Outcome
+      placeholder: Tell us what went wrong
+      value: |
+        #### What did you expect?
+
+        #### What happened instead?
+    validations:
+      required: true
+  - type: input
+    id: os
+    attributes:
+      label: Operating system
+      placeholder: Windows, macOS, Ubuntu, Arch Linux…
+    validations:
+      required: false
+  - type: input
+    id: version
+    attributes:
+      label: Application version
+      description: You can find the version information in Settings -> Help & About. 
+      placeholder: e.g. Element version 1.7.34, olm version 3.2.3 
+    validations:
+      required: false
+  - type: input
+    id: source
+    attributes:
+      label: How did you install the app?
+      description: Where did you install the app from? Please give a link or a description.
+      placeholder: e.g. From https://element.io/get-started
+    validations:
+      required: false
+  - type: input
+    id: homeserver
+    attributes:
+      label: Homeserver
+      description: Which server is your account registered on?
+      placeholder: e.g. matrix.org
+    validations:
+      required: false
+  - type: dropdown
+    id: rageshake
+    attributes:
+      label: Will you send logs?
+      description:  |
+        Did you know that you can send a /rageshake command from your application to submit logs for this issue? Trigger the defect, then type `/rageshake` into the message input area followed by a description of the problem and send the command. You will be able to add a link to this defect report and submit anonymous logs to the developers.
+      options:
+        - 'Yes'
+        - 'No'
+    validations:
+      required: true
--- a/.github/ISSUE_TEMPLATE/bug-web.yml
+++ b/.github/ISSUE_TEMPLATE/bug-web.yml
@@ -0,0 +1,83 @@
+name: Bug report for Element Web (in browser)
+description: File a bug report if you are using Element in a web browser like Firefox, Chrome, Edge, and so on.
+labels: [T-Defect]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+
+        Please report security issues by email to security@matrix.org
+  - type: textarea
+    id: reproduction-steps
+    attributes:
+      label: Steps to reproduce
+      description: Please attach screenshots, videos or logs if you can.
+      placeholder: Tell us what you see!
+      value: |
+        1. Where are you starting? What can you see?
+        2. What do you click?
+        3. More steps…
+    validations:
+      required: true
+  - type: textarea
+    id: result
+    attributes:
+      label: Outcome
+      placeholder: Tell us what went wrong
+      value: |
+        #### What did you expect?
+
+        #### What happened instead?
+    validations:
+      required: true
+  - type: input
+    id: os
+    attributes:
+      label: Operating system
+      placeholder: Windows, macOS, Ubuntu, Arch Linux…
+    validations:
+      required: false
+  - type: input
+    id: browser
+    attributes:
+      label: Browser information
+      description: Which browser are you using? Which version? 
+      placeholder: e.g. Chromium Version 92.0.4515.131
+    validations:
+      required: false
+  - type: input
+    id: webapp-url
+    attributes:
+      label: URL for webapp
+      description: Which URL are you using to access the webapp? If a private server, tell us what version of Element Web you are using.
+      placeholder: e.g. develop.element.io, app.element.io
+    validations:
+      required: false
+  - type: input
+    id: version
+    attributes:
+      label: Application version
+      description: You can find the version information in Settings -> Help & About.
+      placeholder: e.g. Element version 1.7.34, olm version 3.2.3
+    validations:
+      required: false
+  - type: input
+    id: homeserver
+    attributes:
+      label: Homeserver
+      description: Which server is your account registered on?
+      placeholder: e.g. matrix.org
+    validations:
+      required: false
+  - type: dropdown
+    id: rageshake
+    attributes:
+      label: Will you send logs?
+      description:  |
+        Did you know that you can send a /rageshake command from the web application to submit logs for this issue? Trigger the defect, then type `/rageshake` into the message input area followed by a description of the problem and send the command. You will be able to add a link to this defect report and submit anonymous logs to the developers.
+      options:
+        - 'Yes'
+        - 'No'
+    validations:
+      required: true
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,58 +0,0 @@
---
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: T-Defect
-assignees: ''
-
---
-
-<!-- A picture's worth a thousand words: PLEASE INCLUDE A SCREENSHOT :P -->
-
-<!-- Please report security issues by email to security@matrix.org -->
-
-<!-- This is a bug report template. By following the instructions below and
-filling out the sections with your information, you will help the us to get all
-the necessary data to fix your issue.
-
-You can also preview your report before submitting it. You may remove sections
-that aren't relevant to your particular case.
-
-Text between <!-- and --> marks will be invisible in the report.
-->
-
-#### Description
-
-Describe here the problem that you are experiencing, or the feature you are requesting.
-
-#### Steps to reproduce
-
- For bugs, list the steps
- that reproduce the bug
- using hyphens as bullet points
-
-Describe how what happens differs from what you expected.
-
-<!-- Please send us logs for your bug report. They're very important for bugs
-which are hard to reproduce. To do this, create this issue then go to your
-account settings and click 'Submit Debug Logs' from the Help & About tab -->
-Logs being sent: yes/no
-
-<!-- Include screenshots if possible: you can drag and drop images below. -->
-
-#### Version information
-
-<!-- IMPORTANT: please answer the following questions, to help us narrow down the problem -->
-
- **Platform**: web (in-browser) or desktop?
-
-For the web app:
-
- **Browser**: Chrome, Firefox, Safari, Edge? which version?
- **OS**: Windows, macOS, Ubuntu, Arch Linux, etc?
- **URL**: develop.element.io / app.element.io / somewhere else? If a private server, what version of Element Web?
-
-For the desktop app:
-
- **OS**: Windows, macOS, Ubuntu, Arch Linux, etc?
- **Version**: 1.x.y <!-- check the user settings panel if unsure -->
--- a/.github/ISSUE_TEMPLATE/enhancement.yml
+++ b/.github/ISSUE_TEMPLATE/enhancement.yml
@@ -0,0 +1,36 @@
+name: Enhancement request
+description: Do you have a suggestion or feature request?
+labels: [T-Enhancement]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for taking the time to propose a new feature or make a suggestion.
+  - type: textarea
+    id: usecase
+    attributes:
+      label: Your use case
+      description: What would you like to be able to do? Please feel welcome to include screenshots or mock ups.
+      placeholder: Tell us what you would like to do!
+      value: |
+        #### What would you like to do?
+
+        #### Why would you like to do it?
+
+        #### How would you like to achieve it?
+    validations:
+      required: true
+  - type: textarea
+    id: alternative
+    attributes:
+      label: Have you considered any alternatives?
+      placeholder: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: false
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      placeholder: Is there anything else you'd like to add?
+    validations:
+      required: false
--- a/.github/ISSUE_TEMPLATE/suggestion-or-feature-request.md
+++ b/.github/ISSUE_TEMPLATE/suggestion-or-feature-request.md
@@ -1,20 +0,0 @@
---
-name: Suggestion or Feature request
-about: Suggest an idea for this project
-title: ''
-labels: T-Enhancement
-assignees: ''
-
---
-
-#### Is your suggestion related to a problem? Please describe.
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-#### Describe the solution you'd like.
-A clear and concise description of what you want to happen.
-
-#### Describe alternatives you've considered.
-A clear and concise description of any alternative solutions or features you've considered.
-
-#### Additional context
-Add any other context or screenshots about the feature request here.
--- a/.github/workflows/preview_changelog.yaml
+++ b/.github/workflows/preview_changelog.yaml
@@ -0,0 +1,12 @@
+name: Preview Changelog
+on:
+  pull_request_target:
+    types: [ opened, edited, labeled ]
+jobs:
+    changelog:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Preview Changelog
+              uses: matrix-org/allchange@main
+              with:
+                  ghToken: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/sentry-sourcemaps.yaml
+++ b/.github/workflows/sentry-sourcemaps.yaml
@@ -0,0 +1,26 @@
+name: Upload Sentry Sourcemaps
+on:
+    push:
+        branches:
+            - develop
+    repository_dispatch:
+        types: [ element-web-notify ]
+jobs:
+    upload-sentry-sourcemaps:
+        runs-on: ubuntu-latest
+        environment: develop
+        steps:
+            -   uses: actions/checkout@v2
+            -   uses: actions/setup-node@v2
+                with:
+                    node-version: '14'
+                    cache: 'yarn'
+            -   run: ./scripts/fetch-develop.deps.sh --depth 1
+            -   run: yarn install
+            -   run: ./scripts/ci_package.sh
+                env:
+                    SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+                    SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+                    SENTRY_URL: ${{ secrets.SENTRY_URL }}
+                    SENTRY_ORG: sentry
+                    SENTRY_PROJECT: riot-web
--- a/.github/workflows/triage-incoming.yml
+++ b/.github/workflows/triage-incoming.yml
@@ -0,0 +1,15 @@
+name: Move new issues into Issue triage board
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  automate-project-columns:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+        with:
+          project: Issue triage
+          column: Incoming
+          repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
--- a/.github/workflows/triage-move-labelled.yml
+++ b/.github/workflows/triage-move-labelled.yml
@@ -0,0 +1,169 @@
+name: Move labelled issues to correct boards and columns
+
+on:
+  issues:
+    types: [labeled]
+    
+jobs:
+  apply_Z-Labs_label:
+    name: Add Z-Labs label for features behind labs flags
+    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-Threads') ||
+        contains(github.event.issue.labels.*.name, 'A-Polls') ||
+        contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
+        contains(github.event.issue.labels.*.name, 'A-Message-Bubbles') ||
+        contains(github.event.issue.labels.*.name, 'Z-Maximised-Widgets') ||
+        contains(github.event.issue.labels.*.name, 'Z-IA') ||
+        contains(github.event.issue.labels.*.name, 'A-Themes-Custom') ||
+        contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') ||
+        contains(github.event.issue.labels.*.name, 'A-Tags')
+    steps:
+      - uses: actions/github-script@v5
+        with:
+          script: |
+            github.rest.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ['Z-Labs']
+            })
+ 
+  move_needs_info_issues:
+    name: X-Needs-Info issues to Need info column on triage board
+    runs-on: ubuntu-latest
+    steps:
+      - uses: konradpabjan/move-labeled-or-milestoned-issue@219d384e03fa4b6460cd24f9f37d19eb033a4338
+        with:
+          action-token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
+          project-url: "https://github.com/vector-im/element-web/projects/27"
+          column-name: "Need info"
+          label-name: "X-Needs-Info"
+
+  add_priority_design_issues_to_project:
+    name: P1 X-Needs-Design to Design project board
+    runs-on: ubuntu-latest
+    if: >
+        contains(github.event.issue.labels.*.name, 'X-Needs-Design') &&
+        (contains(github.event.issue.labels.*.name, 'S-Critical') &&
+         (contains(github.event.issue.labels.*.name, 'O-Frequent') ||
+          contains(github.event.issue.labels.*.name, 'O-Occasional')) ||
+         contains(github.event.issue.labels.*.name, 'S-Major') &&
+         contains(github.event.issue.labels.*.name, 'O-Frequent') ||
+         contains(github.event.issue.labels.*.name, 'A11y') &&
+         contains(github.event.issue.labels.*.name, 'O-Frequent'))
+    steps:
+      - uses: octokit/graphql-action@v2.x
+        id: add_to_project
+        with:
+          headers: '{"GraphQL-Features": "projects_next_graphql"}'
+          query: |
+            mutation add_to_project($projectid:ID!,$contentid:ID!) {
+              addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }
+          projectid: ${{ env.PROJECT_ID }}
+          contentid: ${{ github.event.issue.node_id }}
+        env:
+          PROJECT_ID: "PN_kwDOAM0swc0sUA"
+          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+  Delight_issues_to_board:
+    name: Delight issues to project board
+    runs-on: ubuntu-latest
+    if: >
+        contains(github.event.issue.labels.*.name, 'A-Spaces') ||
+        contains(github.event.issue.labels.*.name, 'A-Space-Settings') ||
+        contains(github.event.issue.labels.*.name, 'A-Subspaces') ||
+        contains(github.event.issue.labels.*.name, 'Z-IA')
+    steps:
+      - uses: octokit/graphql-action@v2.x
+        with:
+          headers: '{"GraphQL-Features": "projects_next_graphql"}'
+          query: |
+            mutation add_to_project($projectid:ID!,$contentid:ID!) {
+              addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }
+          projectid: ${{ env.PROJECT_ID }}
+          contentid: ${{ github.event.issue.node_id }}
+        env:
+          PROJECT_ID: "PN_kwDOAM0swc1HvQ"
+          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+  move_voice-message_issues:
+    name: A-Voice Messages to voice message board
+    runs-on: ubuntu-latest
+    if: >
+        contains(github.event.issue.labels.*.name, 'A-Voice Messages')
+    steps:
+      - uses: octokit/graphql-action@v2.x
+        with:
+          headers: '{"GraphQL-Features": "projects_next_graphql"}'
+          query: |
+            mutation add_to_project($projectid:ID!,$contentid:ID!) {
+              addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }
+          projectid: ${{ env.PROJECT_ID }}
+          contentid: ${{ github.event.issue.node_id }}
+        env:
+          PROJECT_ID: "PN_kwDOAM0swc2KCw"
+          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+  move_threads_issues:
+    name: A-Threads to Thread board
+    runs-on: ubuntu-latest
+    if: >
+        contains(github.event.issue.labels.*.name, 'A-Threads')
+    steps:
+      - uses: octokit/graphql-action@v2.x
+        with:
+          headers: '{"GraphQL-Features": "projects_next_graphql"}'
+          query: |
+            mutation add_to_project($projectid:ID!,$contentid:ID!) {
+              addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }
+          projectid: ${{ env.PROJECT_ID }}
+          contentid: ${{ github.event.issue.node_id }}
+        env:
+          PROJECT_ID: "PN_kwDOAM0swc0rRA"
+          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+  move_message_bubbles_issues:
+    name: A-Message-Bubbles to Message bubbles board
+    runs-on: ubuntu-latest
+    if: >
+        contains(github.event.issue.labels.*.name, 'A-Message-Bubbles')
+    steps:
+      - uses: octokit/graphql-action@v2.x
+        with:
+          headers: '{"GraphQL-Features": "projects_next_graphql"}'
+          query: |
+            mutation add_to_project($projectid:ID!,$contentid:ID!) {
+              addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }
+          projectid: ${{ env.PROJECT_ID }}
+          contentid: ${{ github.event.issue.node_id }}
+        env:
+          PROJECT_ID: "PN_kwDOAM0swc3m-g"
+          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
--- a/.github/workflows/triage-move-review-requests.yml
+++ b/.github/workflows/triage-move-review-requests.yml
@@ -0,0 +1,72 @@
+name: Move pull requests asking for review to the relevant project
+on:
+  pull_request_target:
+    types: [review_requested]
+
+jobs:
+  add_design_pr_to_project:
+    name: Move PRs asking for design review to the design board
+    runs-on: ubuntu-latest
+    steps:
+      - uses: octokit/graphql-action@v2.x
+        id: find_team_members
+        with:
+          headers: '{"GraphQL-Features": "projects_next_graphql"}'
+          query: |
+            query find_team_members($team: String!) {
+              organization(login: "vector-im") {
+                team(slug: $team) {
+                  members {
+                    nodes {
+                      login
+                    }
+                  }
+                }
+              }
+            }
+          team: ${{ env.TEAM }}
+        env:
+          TEAM: "design"
+          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+      - id: any_matching_reviewers
+        run: |
+          # Fetch requested reviewers, and people who are on the team
+          echo '${{ tojson(fromjson(steps.find_team_members.outputs.data).organization.team.members.nodes[*].login) }}' | tee /tmp/team_members.json
+          echo '${{ tojson(github.event.pull_request.requested_reviewers[*].login) }}' | tee /tmp/reviewers.json
+          jq --raw-output .[] < /tmp/team_members.json | sort | tee /tmp/team_members.txt
+          jq --raw-output .[] < /tmp/reviewers.json | sort | tee /tmp/reviewers.txt
+
+          # Fetch requested team reviewers, and the name of the team
+          echo '${{ tojson(github.event.pull_request.requested_teams[*].slug) }}' | tee /tmp/team_reviewers.json
+          jq --raw-output .[] < /tmp/team_reviewers.json | sort | tee /tmp/team_reviewers.txt
+          echo '${{ env.TEAM }}' | tee /tmp/team.txt
+
+          # If either a reviewer matches a team member, or a team matches our team, say "true"
+          if [ $(join /tmp/team_members.txt /tmp/reviewers.txt | wc -l) != 0 ]; then
+            echo "::set-output name=match::true"
+          elif [ $(join /tmp/team.txt /tmp/team_reviewers.txt | wc -l) != 0 ]; then
+            echo "::set-output name=match::true"
+          else
+            echo "::set-output name=match::false"
+          fi
+        env:
+          TEAM: "design"
+      - uses: octokit/graphql-action@v2.x
+        id: add_to_project
+        if: steps.any_matching_reviewers.outputs.match == 'true'
+        with:
+          headers: '{"GraphQL-Features": "projects_next_graphql"}'
+          query: |
+            mutation add_to_project($projectid:ID!, $contentid:ID!) {
+              addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }
+          projectid: ${{ env.PROJECT_ID }}
+          contentid: ${{ github.event.pull_request.node_id }}
+        env:
+          PROJECT_ID: "PN_kwDOAM0swc0sUA"
+          TEAM: "design"
+          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
--- a/.github/workflows/triage-move-unlabelled.yml
+++ b/.github/workflows/triage-move-unlabelled.yml
@@ -0,0 +1,61 @@
+name: Move unlabelled from needs info columns to triaged
+
+on:
+  issues:
+    types: [unlabeled]
+
+jobs:
+  Move_Unabeled_Issue_On_Project_Board:
+    name: Move no longer X-Needs-Info issues to Triaged
+    runs-on: ubuntu-latest
+    if: >
+        ${{
+        !contains(github.event.issue.labels.*.name, 'X-Needs-Info') }}
+    env:
+      BOARD_NAME: "Issue triage"
+      OWNER: ${{ github.repository_owner }}
+      REPO: ${{ github.event.repository.name }}
+      ISSUE: ${{ github.event.issue.number }}
+    steps:
+      - name: Check if issue is already in "${{ env.BOARD_NAME }}"
+        run: |
+          if curl -i -H 'Content-Type: application/json' -H "Authorization: bearer ${{ secrets.GITHUB_TOKEN }}" -X POST -d '{"query": "query($issue: Int!, $owner: String!, $repo: String!) { repository(owner: $owner, name: $repo) { issue(number: $issue) { projectCards { nodes { project { name } } } } } } ", "variables" : "{ \"issue\": '${ISSUE}', \"owner\": \"'${OWNER}'\", \"repo\": \"'${REPO}'\" }" }' https://api.github.com/graphql | grep "\b$BOARD_NAME\b"; then
+            echo "Issue is already in Project '$BOARD_NAME', proceeding";
+            echo "ALREADY_IN_BOARD=true" >> $GITHUB_ENV
+          else
+            echo "Issue is not in project '$BOARD_NAME', cancelling this workflow"
+            echo "ALREADY_IN_BOARD=false" >> $GITHUB_ENV
+          fi
+      - name: Move issue
+        uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+        if: ${{ env.ALREADY_IN_BOARD == 'true' }}
+        with:
+          project: Issue triage
+          column: Triaged
+          repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+  remove_Z-Labs_label:
+    name: Remove Z-Labs label when features behind labs flags are removed
+    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-Threads') ||
+        contains(github.event.issue.labels.*.name, 'A-Polls') ||
+        contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
+        contains(github.event.issue.labels.*.name, 'A-Message-Bubbles') ||
+        contains(github.event.issue.labels.*.name, 'Z-Maximised-Widgets') ||
+        contains(github.event.issue.labels.*.name, 'Z-IA') ||
+        contains(github.event.issue.labels.*.name, 'A-Themes-Custom') ||
+        contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') ||
+        contains(github.event.issue.labels.*.name, 'A-Tags'))
+    steps:
+      - uses: actions/github-script@v5
+        with:
+          script: |
+            github.rest.issues.removeLabel({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              name: ['Z-Labs']
+            })
--- a/.github/workflows/triage-priority-bugs.yml
+++ b/.github/workflows/triage-priority-bugs.yml
@@ -0,0 +1,55 @@
+name: Move P1 bugs to boards
+
+on:
+  issues:
+    types: [labeled, unlabeled]
+
+jobs:
+  p1_issues_to_team_workboard:
+    runs-on: ubuntu-latest
+    if: >
+        (!contains(github.event.issue.labels.*.name, 'A-E2EE') &&
+         !contains(github.event.issue.labels.*.name, 'A-E2EE-Cross-Signing') &&
+         !contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') &&
+         !contains(github.event.issue.labels.*.name, 'A-E2EE-Key-Backup') &&
+         !contains(github.event.issue.labels.*.name, 'A-E2EE-SAS-Verification') &&
+         !contains(github.event.issue.labels.*.name, 'A-Spaces') &&
+         !contains(github.event.issue.labels.*.name, 'A-Spaces-Settings') &&
+         !contains(github.event.issue.labels.*.name, 'A-Subspaces')) &&
+        (contains(github.event.issue.labels.*.name, 'T-Defect') &&
+         contains(github.event.issue.labels.*.name, 'S-Critical') &&
+         (contains(github.event.issue.labels.*.name, 'O-Frequent') ||
+          contains(github.event.issue.labels.*.name, 'O-Occasional')) ||
+         contains(github.event.issue.labels.*.name, 'S-Major') &&
+         contains(github.event.issue.labels.*.name, 'O-Frequent') ||
+         contains(github.event.issue.labels.*.name, 'A11y') &&
+         contains(github.event.issue.labels.*.name, 'O-Frequent'))
+    steps:
+      - uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+        with:
+          project: Web App Team
+          column: P1
+          repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+  P1_issues_to_crypto_team_workboard:
+    runs-on: ubuntu-latest
+    if: >
+        (contains(github.event.issue.labels.*.name, 'A-E2EE') ||
+         contains(github.event.issue.labels.*.name, 'A-E2EE-Cross-Signing') ||
+         contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') ||
+         contains(github.event.issue.labels.*.name, 'A-E2EE-Key-Backup') ||
+         contains(github.event.issue.labels.*.name, 'A-E2EE-SAS-Verification')) &&
+        (contains(github.event.issue.labels.*.name, 'T-Defect') &&
+         contains(github.event.issue.labels.*.name, 'S-Critical') &&
+         (contains(github.event.issue.labels.*.name, 'O-Frequent') ||
+          contains(github.event.issue.labels.*.name, 'O-Occasional')) ||
+         contains(github.event.issue.labels.*.name, 'S-Major') &&
+         contains(github.event.issue.labels.*.name, 'O-Frequent') ||
+         contains(github.event.issue.labels.*.name, 'A11y') &&
+         contains(github.event.issue.labels.*.name, 'O-Frequent'))
+    steps:
+      - uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+        with:
+          project: Crypto Team
+          column: Ready
+          repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ electron/pub
 /webpack-stats.json
 .vscode
 .vscode/
+.env
--- a/.sentryclirc
+++ b/.sentryclirc
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,4 @@
 Contributing code to Element
 ============================

-Element follows the same pattern as https://github.com/matrix-org/matrix-js-sdk/blob/master/CONTRIBUTING.rst.
+Element follows the same pattern as the [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md).
--- a/10
+++ b/10
@@ -16,15 +16,12 @@ WORKDIR /src
 COPY . /src
 RUN dos2unix /src/scripts/docker-link-repos.sh && bash /src/scripts/docker-link-repos.sh
 RUN yarn --network-timeout=100000 install
-RUN yarn build
+
+RUN dos2unix /src/scripts/docker-package.sh && bash /src/scripts/docker-package.sh

 # Copy the config now so that we don't create another layer in the app image
 RUN cp /src/config.sample.json /src/webapp/config.json

-# Ensure we populate the version file
-RUN dos2unix /src/scripts/docker-write-version.sh && bash /src/scripts/docker-write-version.sh
-
-
 # App
 FROM nginx:alpine

@@ -33,5 +30,8 @@ COPY --from=builder /src/webapp /app
 # Insert wasm type into Nginx mime.types file so they load correctly.
 RUN sed -i '3i\ \ \ \ application/wasm wasm\;' /etc/nginx/mime.types

+# Override default nginx config
+COPY /nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
+
 RUN rm -rf /usr/share/nginx/html \
  && ln -s /app /usr/share/nginx/html
--- a/README.md
+++ b/README.md
@@ -30,14 +30,14 @@ and [element-ios](https://github.com/vector-im/element-ios).
 Getting Started
 ===============

-The easiest way to test Element is to just use the hosted copy at https://app.element.io.
-The `develop` branch is continuously deployed to https://develop.element.io
+The easiest way to test Element is to just use the hosted copy at <https://app.element.io>.
+The `develop` branch is continuously deployed to <https://develop.element.io>
 for those who like living dangerously.

 To host your own copy of Element, the quickest bet is to use a pre-built
 released version of Element:

-1. Download the latest version from https://github.com/vector-im/element-web/releases
+1. Download the latest version from <https://github.com/vector-im/element-web/releases>
 1. Untar the tarball on your web server
 1. Move (or symlink) the `element-x.x.x` directory to an appropriate name
 1. Configure the correct caching headers in your webserver (see below)
@@ -46,7 +46,7 @@ released version of Element:
 1. Enter the URL into your browser and log into Element!

 Releases are signed using gpg and the OpenPGP standard, and can be checked against the public key located
-at https://packages.riot.im/element-release-key.asc.
+at <https://packages.riot.im/element-release-key.asc>.

 Note that for the security of your chats will need to serve Element
 over HTTPS. Major browsers also do not allow you to use VoIP/video
@@ -72,7 +72,7 @@ access to Element (or other apps) due to sharing the same domain.

 We have put some coarse mitigations into place to try to protect against this
 situation, but it's still not good practice to do it in the first place.  See
-https://github.com/vector-im/element-web/issues/1977 for more details.
+<https://github.com/vector-im/element-web/issues/1977> for more details.

 Configuration best practices
 ----------------------------
@@ -80,15 +80,15 @@ Configuration best practices
 Unless you have special requirements, you will want to add the following to
 your web server configuration when hosting Element Web:

- The `X-Frame-Options: SAMEORIGIN` header, to prevent Element Web from being
+* The `X-Frame-Options: SAMEORIGIN` header, to prevent Element Web from being
  framed and protect from [clickjacking][owasp-clickjacking].
- The `frame-ancestors 'none'` directive to your `Content-Security-Policy`
+* The `frame-ancestors 'none'` directive to your `Content-Security-Policy`
  header, as the modern replacement for `X-Frame-Options` (though both should be
  included since not all browsers support it yet, see
  [this][owasp-clickjacking-csp]).
- The `X-Content-Type-Options: nosniff` header, to [disable MIME
+* The `X-Content-Type-Options: nosniff` header, to [disable MIME
  sniffing][mime-sniffing].
- The `X-XSS-Protection: 1; mode=block;` header, for basic XSS protection in
+* The `X-XSS-Protection: 1; mode=block;` header, for basic XSS protection in
  legacy browsers.

 [mime-sniffing]:
@@ -122,15 +122,15 @@ Ensure you have the latest LTS version of Node.js installed.
 Using `yarn` instead of `npm` is recommended. Please see the Yarn [install
 guide](https://classic.yarnpkg.com/en/docs/install) if you do not have it already.

-1. Install or update `node.js` so that your `node` is at least v10.x.
+1. Install or update `node.js` so that your `node` is at least v14.x.
 1. Install `yarn` if not present already.
 1. Clone the repo: `git clone https://github.com/vector-im/element-web.git`.
 1. Switch to the element-web directory: `cd element-web`.
 1. Install the prerequisites: `yarn install`.
-   *  If you're using the `develop` branch, then it is recommended to set up a
+   * If you're using the `develop` branch, then it is recommended to set up a
      proper development environment (see [Setting up a dev
      environment](#setting-up-a-dev-environment) below). Alternatively, you
-      can use https://develop.element.io - the continuous integration release of
+      can use <https://develop.element.io> - the continuous integration release of
      the develop branch.
 1. Configure the app by copying `config.sample.json` to `config.json` and
   modifying it. See the [configuration docs](docs/config.md) for details.
@@ -148,15 +148,16 @@ Running as a Desktop app
 ========================

 Element can also be run as a desktop app, wrapped in Electron. You can download a
-pre-built version from https://element.io/get-started or, if you prefer,
+pre-built version from <https://element.io/get-started> or, if you prefer,
 build it yourself.

-To build it yourself, follow the instructions at https://github.com/vector-im/element-desktop.
+To build it yourself, follow the instructions at <https://github.com/vector-im/element-desktop>.

 Many thanks to @aviraldg for the initial work on the Electron integration.

 Other options for running as a desktop app:
- * @asdf:matrix.org points out that you can use nativefier and it just works(tm)
+
+* @asdf:matrix.org points out that you can use nativefier and it just works(tm)

 ```bash
 yarn global add nativefier
@@ -171,6 +172,7 @@ Running from Docker

 The Docker image can be used to serve element-web as a web server. The easiest way to use
 it is to use the prebuilt image:
+
 ```bash
 docker run -p 80:80 vectorim/element-web
 ```
@@ -178,11 +180,13 @@ docker run -p 80:80 vectorim/element-web
 To supply your own custom `config.json`, map a volume to `/app/config.json`. For example,
 if your custom config was located at `/etc/element-web/config.json` then your Docker command
 would be:
+
 ```bash
 docker run -p 80:80 -v /etc/element-web/config.json:/app/config.json vectorim/element-web
 ```

 To build the image yourself:
+
 ```bash
 git clone https://github.com/vector-im/element-web.git element-web
 cd element-web
@@ -192,6 +196,7 @@ docker build .

 If you're building a custom branch, or want to use the develop branch, check out the appropriate
 element-web branch and then run:
+
 ```bash
 docker build -t \
    --build-arg USE_CUSTOM_SDKS=true \
@@ -224,6 +229,7 @@ Caching requirements
 ====================

 Element requires the following URLs not to be cached, when/if you are serving Element from your own webserver:
+
 ```
 /config.*.json
 /i18n
@@ -232,6 +238,11 @@ Element requires the following URLs not to be cached, when/if you are serving El
 /index.html
 ```

+We also recommend that you force browsers to re-validate any cached copy of Element on page load by configuring your
+webserver to return `Cache-Control: no-cache` for `/`. This ensures the browser will fetch a new version of Element on
+the next page load after it's been deployed. Note that this is already configured for you in the nginx config of our
+Dockerfile.
+
 Development
 ===========

@@ -261,6 +272,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
 ============================

@@ -302,14 +317,15 @@ yarn reskindex
 yarn start
 ```

-
 Wait a few seconds for the initial build to finish; you should see something like:
+
 ```
 [element-js] <s> [webpack.Progress] 100%
 [element-js]
 [element-js] ℹ ｢wdm｣:    1840 modules
 [element-js] ℹ ｢wdm｣: Compiled successfully.
 ```
+
   Remember, the command will not terminate since it runs the web server
   and rebuilds source files when they change. This development server also
   disables caching, so do NOT use it in production.
@@ -317,7 +333,7 @@ Wait a few seconds for the initial build to finish; you should see something lik
 Configure the app by copying `config.sample.json` to `config.json` and
 modifying it. See the [configuration docs](docs/config.md) for details.

-Open http://127.0.0.1:8080/ in your browser to see your newly built Element.
+Open <http://127.0.0.1:8080/> in your browser to see your newly built Element.

 **Note**: The build script uses inotify by default on Linux to monitor directories
 for changes. If the inotify limits are too low your build will fail silently or with
@@ -359,20 +375,11 @@ Running the tests
 -----------------

 There are a number of application-level tests in the `tests` directory; these
-are designed to run in a browser instance under the control of
-[karma](https://karma-runner.github.io). To run them:
+are designed to run with Jest and JSDOM. To run them

-* Make sure you have Chrome installed (a recent version, like 59)
-* Make sure you have `matrix-js-sdk` and `matrix-react-sdk` installed and
-  built, as above
-* `yarn test`
-
-The above will run the tests under Chrome in a `headless` mode.
-
-You can also tell karma to run the tests in a loop (every time the source
-changes), in an instance of Chrome on your desktop, with `yarn
-test-multi`. This also gives you the option of running the tests in 'debug'
-mode, which is useful for stepping through the tests in the developer tools.
+```
+yarn test
+```

 ### End-to-End tests

@@ -390,76 +397,6 @@ For a developer guide, see the [translating dev doc](docs/translating-dev.md).
 Triaging issues
 ===============

-We strive to completely cover all applicable issues with these core labels:
+Issues are triaged by community members and the Web App Team, following the [triage process](https://github.com/vector-im/element-meta/wiki/Triage-process).

-1. __Type__ — Every issue is assigned a type:
-   - __[T-Defect](https://github.com/vector-im/element-web/labels/T-Defect):__
-     Bugs, crashes, hangs, vulnerabilities, or other reported problems
-   - __[T-Enhancement](https://github.com/vector-im/element-web/labels/T-Enhancement):__
-     New features, changes in functionality, performance boosts, user-facing
-     improvements
-   - __[T-Task](https://github.com/vector-im/element-web/labels/T-Task):__
-     Refactoring, enabling or disabling functionality, other engineering tasks
-   - __[T-Other](https://github.com/vector-im/element-web/labels/T-Other):__
-     Questions, user support, anything else
-
-2. __Severity__ — All issues labeled `T-Defect` are also assigned a severity:
-   * __[S-Critical](https://github.com/vector-im/element-web/labels/S-Critical):__
-     Prevents work, causes data loss, affects many users, and/or has no
-     workaround
-   * __[S-Major](https://github.com/vector-im/element-web/labels/S-Major):__
-     Severely degrades major functionality or product features, with no
-     satisfactory workaround
-   * __[S-Minor](https://github.com/vector-im/element-web/labels/S-Minor):__
-     Impairs non-critical functionality, or suitable workarounds exist
-   * __[S-Tolerable](https://github.com/vector-im/element-web/labels/S-Tolerable):__
-     Purely cosmetic or low / no impact to users
-
-3. __Priority__ — All issues which are not `T-Other` are assigned a priority:
-   * __[P1](https://github.com/vector-im/element-web/labels/P1):__ Next
-   * __[P2](https://github.com/vector-im/element-web/labels/P2):__ Later
-   * __[P3](https://github.com/vector-im/element-web/labels/P3):__ Eventually
-   * __[P4](https://github.com/vector-im/element-web/labels/P4):__ Interesting —
-     Not yet scheduled, will accept patches
-   * __[P5](https://github.com/vector-im/element-web/labels/P5):__ Dubious —
-     Will not schedule, would consider patches
-
-4. __Area__ — Most issues are assigned one or several "areas" using one of the
-   many `A-` prefixed labels, e.g. `A-Composer` or `A-Spaces`. Each area label
-   maps to a group of features or portion of the UI surface in the app.
-
-### Other common labels
-
-We have a handful of other labels which are added on an as-needed basis, and not expected to be exhaustive:
-
-* __Exceptions__ — Special flags for issues and pull requests:
-  * __[X-Needs-Info](https://github.com/vector-im/element-web/labels/X-Needs-Info):__
-    This issue is blocked pending further information from the reporter
-  * __[X-Regression](https://github.com/vector-im/element-web/labels/X-Regression):__
-    Denotes things breaking which previously worked
-  * __[X-Release-Blocker](https://github.com/vector-im/element-web/labels/X-Release-Blocker):__
-    Issues which must be resolved before making a release
-
-* __[Easy](https://github.com/vector-im/element-web/labels/Easy)__ / __[Help
-  Wanted](https://github.com/vector-im/element-web/labels/Help%20Wanted)__ —
-  Well-defined issues which are suitable for folks new to the codebase
-
-* __[A11y](https://github.com/vector-im/element-web/labels/A11y)__ /
-  __[Meta](https://github.com/vector-im/element-web/labels/Meta)__ /
-  __[I18n](https://github.com/vector-im/element-web/labels/I18n)__ /
-  __[Privacy](https://github.com/vector-im/element-web/labels/Privacy)__ /
-  __[Security](https://github.com/vector-im/element-web/labels/Security)__ —
-  Issues which fall under these conceptual themes (which apply to many software
-  projects and are not specific to Element)
-
-* __[Sponsored](https://github.com/vector-im/element-web/labels/Sponsored)__ —
-  Used internally by Element to denote issues with external funding
-
-### Ad hoc labels (`Z-`)
-
-We have reserved the `Z-` prefix for ad hoc labels.
-
-Any member of the core team is welcome to create labels beginning with `Z-` for
-any purpose, such as tracking personal areas of interest or providing a common
-way to label cross-repo initiatives. The prefix avoids interference with the
-project's main labels.
+We use [issue labels](https://github.com/vector-im/element-meta/wiki/Issue-labelling) to sort all incoming issues.
--- a/docs/config.md
+++ b/docs/config.md
@@ -22,9 +22,19 @@ For a good example, see https://develop.element.io/config.json.
     `default_hs_url` is specified. When multiple sources are specified, it is unclear
     which should take priority and therefore the application cannot continue.
   * As of Element 1.4.0, identity servers are optional. See [Identity servers](#identity-servers) below.
-1. `sso_immediate_redirect`: When `true`, Element will assume the default server supports SSO
-   and attempt to send the user there to continue (if they aren't already logged in). Default
-   `false`. Note that this disables all usage of the welcome page.
+1. `sso_redirect_options`: Optionally defines how Element will behave with a server which supports
+   Single Sign On (SSO). By default, Element will do nothing special and simply show a button where
+   needed for the user to click to navigate to the SSO system. This behaviour can be tuned with the
+   config options below (as properties of the `sso_redirect_options` object). None of the options apply
+   if Element thinks the user is already logged in, and similarly Element will assume the default server
+   supports SSO if these redirect options are used.
+   * `immediate`: When `true` (default `false`), Element will automatically redirect all unauthenticated
+     users to the SSO system to log in regardless of how they reached the app. This overrides the use of
+     other redirect options.
+   * `on_welcome_page`: When `true` (default `false`), Element will automatically redirect all unauthenticated
+     users to the SSO to log in if the user lands on the welcome page or no specific page. For example,
+     https://app.element.io/#/welcome and https://app.element.io would redirect if set up to use this option.
+     This can be useful to maintain guest experience until an account is needed.
 1. `features`: Lookup of optional features that may be force-enabled (`true`) or force-disabled (`false`).
   When features are not listed here, their defaults will be used, and users can turn them on/off if `showLabsSettings`
   allows them to. The available optional experimental features vary from release to release and are
@@ -136,6 +146,16 @@ For a good example, see https://develop.element.io/config.json.
   1. `obeyAssertedIdentity`: If set, MSC3086 asserted identity messages sent
      on VoIP calls will cause the call to appear in the room corresponding to the
      asserted identity. This *must* only be set in trusted environments.
+1. `posthog`: [Posthog](https://posthog.com/) integration config. If not set, Posthog analytics are disabled.
+   1. `projectApiKey`: The Posthog project API key
+   2. `apiHost`: The Posthog API host
+1. `sentry`: [Sentry](https://sentry.io/) configuration for rageshake data being sent to sentry.
+   1. `dsn`: the Sentry [DSN](https://docs.sentry.io/product/sentry-basics/dsn-explainer/)
+   2. `environment`: (optional) The [Environment](https://docs.sentry.io/product/sentry-basics/environments/) to pass to sentry
+1. `map_style_url`: Maptile server URL for location sharing. e.g.
+   'https://api.maptiler.com/maps/basic/style.json?key=YOUR_KEY_GOES_HERE'
+1. `analyticsOwner`: The entity that analytics data is being sent to. Used in copy
+   when explaining to the user where data is being sent. If not set, defaults to `brand`.

 Note that `index.html` also has an og:image meta tag that is set to an image
 hosted on riot.im. This is the image used if links to your copy of Element
@@ -220,3 +240,4 @@ Currently, the following UI feature flags are supported:
  user.
 * `UIFeature.roomHistorySettings` - Whether or not the room history settings are shown to the user.
  This should only be used if the room history visibility options are managed by the server.
+* `UIFeature.TimelineEnableRelativeDates` - Display relative date separators (eg: 'Today', 'Yesterday') in the timeline for recent messages. When false day dates will be used.
--- a/docs/jitsi.md
+++ b/docs/jitsi.md
@@ -64,10 +64,3 @@ The domain used is the one specified by the `/.well-known/matrix/client` endpoin
 For active Jitsi widgets in the room, a native Jitsi widget UI is created and points to the instance specified in the `domain` key of the widget content data.

 Element Android manages allowed native widgets permissions a bit differently than web widgets (as the data shared are different and never shared with the widget URL). For Jitsi widgets, permissions are requested only once per domain (consent saved in account data).
-
-## Element iOS
-
-Currently the Element mobile apps do not support custom Jitsi servers and will instead
-use the default `jitsi.riot.im` server. When users on the mobile apps join the call,
-they will be joining a different conference which has the same name, but not the same
-participants. This is a known bug and which needs to be fixed.
--- a/docs/labs.md
+++ b/docs/labs.md
@@ -12,14 +12,6 @@ dropped. Ask in the room if you are unclear about any details here.**
 A new version of the "Report" dialog that lets users send abuse reports directly to room moderators,
 if the room supports it.

-## Matrix Spaces [MSC1772](https://github.com/matrix-org/matrix-doc/pull/1772) support (`feature_spaces`)
-
-Enables showing, using, creating, and managing spaces. Create Spaces from the all new Space Panel (to left of Room List).
-
-Incompatible with (will disable) `feature_custom_tags`, `feature_communities_v2_prototypes` and stable Communities/Groups support.
-
-Still in heavy development.
-
 ## Render LaTeX maths in messages (`feature_latex_maths`)

 Enables rendering of LaTeX maths in messages using [KaTeX](https://katex.org/). LaTeX between single dollar-signs is interpreted as inline maths and double dollar-signs as display maths (i.e. centred on its own line).
@@ -125,15 +117,51 @@ or feedback for this functionality at this time.
 Allows users to receive encrypted messages by creating a device that is stored
 encrypted on the server, as described in [MSC2697](https://github.com/matrix-org/matrix-doc/pull/2697).

-## Voice messages (`feature_voice_messages`)
-
-Offers a way to send more time-sensitive information through the power of voice. When enabled, use the microphone
-icon on the lower right to start recording your message. You will have a chance to review after you're done recording,
-and if it sounds fine then send it off for the rest of the room to hear.
-
-Voice messages are automatically downloaded to ensure they are ready for playback as soon as possible.
-
 ## Do not disturb (`feature_dnd`)

 Enables UI for turning on "do not disturb" mode for the current device. When DND mode is engaged, popups
 and notification noises are suppressed. Not perfect, but can help reduce noise.
+
+## Hidden read receipts (`feature_hidden_read_receipts`)
+
+Enables sending hidden read receipts as per [MSC2285](https://github.com/matrix-org/matrix-doc/pull/2285)
+
+## New layout switcher (with message bubbles) (`feature_new_layout_switcher`)
+
+Adds a "Message layout" section under `Settings -> Appearance`, where the user can select their preferred message layout (e.g. IRC or Modern). Additionally, adds a new "Message bubbles" layout.
+
+## Polls (`feature_polls`) [In Development]
+
+Polls are a way to gauge interest from your community about a certain topic with a simple voting mechanic
+within the message timeline. Note that this feature is currently under active development and therefore is
+entirely incomplete and may not work at all - it is not recommended for general use at this time.
+
+Bug reports, feature requests, etc are not currently accepted for this feature flag. A later stage of
+development will provide opportunities for feedback.
+
+## Metaspaces (`feature_spaces_metaspaces`) [In Development]
+
+Metaspaces are automatically populated spaces you can enable in your Space panel.
+By default, you'll have Home or All rooms, but you can opt in to a People, Favourites, and Other Rooms metaspace too.
+
+## Location sharing (`feature_location_share`) [In Development]
+
+Allows users to send and display location data using [maplibre](https://maplibre.org).
+
+The current implementation is a quick in-progress development spike to
+demonstrate viability and prove [MSC3488](https://github.com/matrix-org/matrix-doc/pull/3488)
+and [MSC3489](https://github.com/matrix-org/matrix-doc/pull/3489) - **the UI has not yet
+been designed, and it will not exit labs until it has**.
+
+For this to work, you must specify a valid maptiler.com API key in
+`"map_style_url": "https://api.maptiler.com/maps/basic/style.json?key=YOUR_KEY_GOES_HERE"`
+in your config.json, or find an alternative map tile server.
+
+## Breadcrumbs v2 (`feature_breadcrumbs_v2`)
+
+Instead of showing the horizontal list of breadcrumbs under the filter field, the new UX is an interactive context menu
+triggered by the button to the right of the filter field.
+
+## Spotlight search (`feature_spotlight`) [In Development]
+
+Switches to a new room search experience.
--- a/docs/pr-previews.md
+++ b/docs/pr-previews.md
@@ -5,10 +5,7 @@ automatically set up a preview site with a full deployment of Element with the
 changes from the pull request added in so that anyone can easily test and review
 them. This is especially useful for checking visual and interactive changes.

-To access the preview site, scroll down to the bottom of the PR where the
-various CI results are displayed:
-
-![Pull request: checks section](./img/pr-checks.png)
+To access the preview site, click the link in the description of the PR.

 The checks section could be collapsed at first, so you may need to click "Show
 all checks" to reveal them. Look for an entry that mentions `deploy-preview`. It
--- a/docs/translating-dev.md
+++ b/docs/translating-dev.md
@@ -2,7 +2,7 @@

 ## Requirements

- A working [Development Setup](../../#setting-up-a-dev-environment)
+- A working [Development Setup](../README.md#setting-up-a-dev-environment)
  - Including up-to-date versions of matrix-react-sdk and matrix-js-sdk
 - Latest LTS version of Node.js installed
 - Be able to understand English
--- a/element.io/develop/config.json
+++ b/element.io/develop/config.json
@@ -48,5 +48,17 @@
      "privacyPolicyUrl": "https://element.io/privacy",
      "termsOfServiceUrl": "https://element.io/terms-of-service",
      "url": "https://ems.element.io/element-home/in-app-loader"
-    }
+    },
+    "sentry": {
+        "dsn": "https://029a0eb289f942508ae0fb17935bd8c5@sentry.matrix.org/6",
+        "environment": "develop"
+    },
+    "posthog": {
+        "projectApiKey": "phc_Jzsm6DTm6V2705zeU5dcNvQDlonOR68XvX2sh1sEOHO",
+        "apiHost": "https://posthog.hss.element.io"
+    },
+    "features": {
+        "feature_spaces_metaspaces": true
+    },
+    "map_style_url": "https://api.maptiler.com/maps/basic/style.json?key=JCdnMQY3oGklTYYLIvtI"
 }
--- a/nginx/conf.d/default.conf
+++ b/nginx/conf.d/default.conf
@@ -0,0 +1,18 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    root   /usr/share/nginx/html;
+    index  index.html;
+
+    # Set no-cache for the index.html only so that browsers always check for a new copy of Element Web.
+    location = /index.html {
+        add_header Cache-Control "no-cache";
+    }
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+}
+
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-web",
-  "version": "1.7.33",
+  "version": "1.9.9",
  "description": "A feature-rich client for Matrix.org",
  "author": "New Vector Ltd.",
  "repository": {
@@ -46,7 +46,7 @@
    "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,reskindex-react,res,element-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js\"",
    "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,reskindex-react,res,element-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js --https\"",
    "start:res": "yarn build:jitsi && node scripts/copy-res.js -w",
-    "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development --disable-host-check",
+    "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development --disable-host-check --hot",
    "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
    "lint:js": "eslint --max-warnings 0 src",
    "lint:js-fix": "eslint --fix src",
@@ -55,18 +55,17 @@
    "test": "jest"
  },
  "dependencies": {
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
    "browser-request": "^0.3.3",
    "gfm.css": "^1.1.2",
-    "highlight.js": "^10.5.0",
    "jsrsasign": "^10.2.0",
    "katex": "^0.12.0",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-    "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#develop",
-    "matrix-widget-api": "^0.1.0-beta.15",
+    "matrix-js-sdk": "15.4.0",
+    "matrix-react-sdk": "3.38.0",
+    "matrix-widget-api": "^0.1.0-beta.18",
    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
    "sanitize-html": "^2.3.2",
    "ua-parser-js": "^0.7.24"
  },
@@ -88,15 +87,19 @@
    "@babel/preset-typescript": "^7.12.7",
    "@babel/register": "^7.12.10",
    "@babel/runtime": "^7.12.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "@principalstudio/html-webpack-inject-preload": "^1.2.7",
+    "@sentry/webpack-plugin": "^1.18.1",
    "@types/flux": "^3.1.9",
+    "@types/jest": "^27.0.2",
    "@types/modernizr": "^3.5.3",
    "@types/node": "^14.14.22",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "17.0.14",
+    "@types/react-dom": "17.0.9",
    "@types/sanitize-html": "^2.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.17.0",
-    "@typescript-eslint/parser": "^4.17.0",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
+    "allchange": "^1.0.6",
    "autoprefixer": "^9.8.6",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
@@ -104,9 +107,11 @@
    "concurrently": "^5.3.0",
    "cpx": "^1.5.0",
    "css-loader": "^3.6.0",
+    "dotenv": "^10.0.0",
    "eslint": "7.18.0",
    "eslint-config-google": "^0.14.0",
-    "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#main",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-matrix-org": "^0.4.0",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
@@ -116,6 +121,7 @@
    "html-webpack-plugin": "^4.5.2",
    "jest": "^26.6.3",
    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-raw-loader": "^1.0.1",
    "json-loader": "^0.5.7",
    "loader-utils": "^1.4.0",
    "matrix-mock-request": "^1.2.3",
@@ -138,23 +144,31 @@
    "postcss-scss": "^2.1.1",
    "postcss-simple-vars": "^5.0.2",
    "postcss-strip-inline-comments": "^0.1.5",
+    "raw-loader": "^4.0.2",
+    "react-refresh": "^0.10.0",
    "rimraf": "^3.0.2",
    "shell-escape": "^0.2.0",
    "simple-proxy-agent": "^1.1.0",
+    "string-replace-loader": "2",
+    "style-loader": "2",
    "stylelint": "^13.9.0",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-scss": "^3.18.0",
    "terser-webpack-plugin": "^2.3.8",
-    "typescript": "^4.1.3",
+    "typescript": "^4.5.3",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2",
-    "worker-loader": "^2.0.0"
+    "worker-loader": "^2.0.0",
+    "worklet-loader": "^2.0.0"
+  },
+  "resolutions": {
+    "@types/react": "17.0.14"
  },
  "jest": {
    "testEnvironment": "jest-environment-jsdom-sixteen",
    "testMatch": [
-      "<rootDir>/test/**/*-test.[tj]s"
+      "<rootDir>/test/**/*-test.[tj]s?(x)"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/node_modules/matrix-react-sdk/test/setupTests.js"
@@ -173,7 +187,9 @@
      "waveWorker\\.min\\.js": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
      "context-filter-polyfill": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
      "FontManager.ts": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/FontManager.js",
-      "workers/(.+)\\.worker\\.ts": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/workerMock.js"
+      "workers/(.+)\\.worker\\.ts": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/workerMock.js",
+      "^!!raw-loader!.*": "jest-raw-loader",
+      "RecorderWorklet": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!matrix-js-sdk).+$",
--- a/release_config.yaml
+++ b/release_config.yaml
@@ -1 +1,4 @@
 signing_id: releases@riot.im
+subprojects:
+    matrix-react-sdk:
+        includeByDefault: true
--- a/res/decoder-ring/index.html
+++ b/res/decoder-ring/index.html
@@ -11,7 +11,7 @@
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <!--<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>-->
-        <script crossorigin src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
+        <script crossorigin src="https://unpkg.com/rxjs/dist/bundles/rxjs.umd.min.js"></script>
        <script src="datatypes.js"></script>
        <script src="decoder.js"></script>

--- a/scripts/ci_package.sh
+++ b/scripts/ci_package.sh
@@ -1,17 +1,11 @@
 #!/bin/bash

-# Runs package.sh setting the version to git hashes of the element-web,
-# react-sdk & js-sdk checkouts, for the case where these dependencies
-# are git checkouts.
+# Runs package.sh, passing DIST_VERSION determined by git

 set -ex

 rm dist/element-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist

-# Since the deps are fetched from git, we can rev-parse
-REACT_SHA=$(cd node_modules/matrix-react-sdk; git rev-parse --short=12 HEAD)
-JSSDK_SHA=$(cd node_modules/matrix-js-sdk; git rev-parse --short=12 HEAD)
+DIST_VERSION=`$(dirname $0)/get-version-from-git.sh`

-VECTOR_SHA=$(git rev-parse --short=12 HEAD) # use the ACTUAL SHA rather than assume develop
-
-CI_PACKAGE=true DIST_VERSION=$VECTOR_SHA-react-$REACT_SHA-js-$JSSDK_SHA scripts/package.sh
+CI_PACKAGE=true DIST_VERSION=$DIST_VERSION scripts/package.sh
--- a/scripts/copy-res.js
+++ b/scripts/copy-res.js
@@ -29,6 +29,7 @@ const INCLUDE_LANGS = [
    {'value': 'he', 'label': 'עברית'},
    {'value': 'hi', 'label': 'हिन्दी'},
    {'value': 'hu', 'label': 'Magyar'},
+    {'value': 'id', 'label': 'Bahasa Indonesia'},
    {'value': 'is', 'label': 'íslenska'},
    {'value': 'it', 'label': 'Italiano'},
    {'value': 'ja', 'label': '日本語'},
@@ -52,6 +53,7 @@ const INCLUDE_LANGS = [
    {'value': 'th', 'label': 'ไทย'},
    {'value': 'tr', 'label': 'Türkçe'},
    {'value': 'uk', 'label': 'українська мова'},
+    {'value': 'vi', 'label': 'Tiếng Việt'},
    {'value': 'vls', 'label': 'West-Vlaams'},
    {'value': 'zh_Hans', 'label': '简体中文'}, // simplified chinese
    {'value': 'zh_Hant', 'label': '繁體中文'}, // traditional chinese
--- a/scripts/docker-write-version.sh
+++ b/scripts/docker-write-version.sh
@@ -13,10 +13,9 @@ DIST_VERSION=$TAG
 # for an appropriately tagged branch as well (heads/v1.2.3).
 if [[ $BRANCH != HEAD && ! $BRANCH =~ heads/v.+ ]]
 then
-    REACT_SHA=$(cd node_modules/matrix-react-sdk; git rev-parse --short=12 HEAD)
-    JSSDK_SHA=$(cd node_modules/matrix-js-sdk; git rev-parse --short=12 HEAD)
-    VECTOR_SHA=$(git rev-parse --short=12 HEAD) # use the ACTUAL SHA rather than assume develop
-    DIST_VERSION=$VECTOR_SHA-react-$REACT_SHA-js-$JSSDK_SHA
+    DIST_VERSION=`$(dirname $0)/get-version-from-git.sh`
 fi

+DIST_VERSION=`$(dirname $0)/normalize-version.sh ${DIST_VERSION}`
+VERSION=$DIST_VERSION yarn build
 echo $DIST_VERSION > /src/webapp/version
--- a/scripts/fetch-develop.deps.sh
+++ b/scripts/fetch-develop.deps.sh
@@ -25,7 +25,8 @@ function clone() {
    if [ -n "$branch" ]
    then
        echo "Trying to use $org/$repo#$branch"
-        git clone git://github.com/$org/$repo.git $repo --branch $branch \
+        # Disable auth prompts: https://serverfault.com/a/665959
+        GIT_TERMINAL_PROMPT=0 git clone https://github.com/$org/$repo.git $repo --branch $branch \
            "${GIT_CLONE_ARGS[@]}"
        return $?
    fi
--- a/scripts/get-version-from-git.sh
+++ b/scripts/get-version-from-git.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Echoes a version based on the git hashes of the element-web, react-sdk & js-sdk checkouts, for the case where
+# these dependencies are git checkouts.
+
+# Since the deps are fetched from git, we can rev-parse
+REACT_SHA=$(cd node_modules/matrix-react-sdk; git rev-parse --short=12 HEAD)
+JSSDK_SHA=$(cd node_modules/matrix-js-sdk; git rev-parse --short=12 HEAD)
+VECTOR_SHA=$(git rev-parse --short=12 HEAD) # use the ACTUAL SHA rather than assume develop
+echo $VECTOR_SHA-react-$REACT_SHA-js-$JSSDK_SHA
--- a/scripts/normalize-version.sh
+++ b/scripts/normalize-version.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+
+# If $1 looks like v1.2.3 or v1.2.3-foo, strip the leading v, then print it to stdout
+if [[ $1 =~ ^v[[:digit:]]+\.[[:digit:]]+\.[[:digit:]]+(-.+)?$ ]]; then
+    echo ${1:1}
+else
+    echo $1
+fi
--- a/scripts/package.sh
+++ b/scripts/package.sh
@@ -9,7 +9,7 @@ else
 fi

 yarn clean
-yarn build
+VERSION=$version yarn build

 # include the sample config in the tarball. Arguably this should be done by
 # `yarn build`, but it's just too painful.
@@ -21,12 +21,7 @@ cp -r webapp element-$version
 # Just in case you have a local config, remove it before packaging
 rm element-$version/config.json || true

-# if $version looks like semver with leading v, strip it before writing to file
-if [[ ${version} =~ ^v[[:digit:]]+\.[[:digit:]]+\.[[:digit:]]+(-.+)?$ ]]; then
-    echo ${version:1} > element-$version/version
-else
-    echo ${version} > element-$version/version
-fi
+$(dirname $0)/normalize-version.sh ${version} > element-$version/version

 tar chvzf dist/element-$version.tar.gz element-$version
 rm -r element-$version
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -16,6 +16,7 @@ limitations under the License.

 import "matrix-react-sdk/src/@types/global"; // load matrix-react-sdk's type extensions first
 import type { Renderer } from "react-dom";
+import type { logger } from "matrix-js-sdk/src/logger";

 type ElectronChannel =
    "app_onAction" |
@@ -31,11 +32,12 @@ type ElectronChannel =
    "setBadgeCount" |
    "update-downloaded" |
    "userDownloadCompleted" |
-    "userDownloadOpen";
+    "userDownloadAction";

 declare global {
    interface Window {
        mxSendRageshake: (text: string, withLogs?: boolean) => void;
+        matrixLogger: typeof logger;
        matrixChat: ReturnType<Renderer>;

        // electron-only
--- a/src/@types/raw-loader.d.ts
+++ b/src/@types/raw-loader.d.ts
@@ -0,0 +1,4 @@
+declare module '!!raw-loader!*' {
+    const contents: string;
+    export default contents;
+}
--- a/src/i18n/strings/ar.json
+++ b/src/i18n/strings/ar.json
@@ -32,5 +32,7 @@
    "I understand the risks and wish to continue": "أفهم المخاطرة وأود المواصلة",
    "Go to element.io": "انتقل إلى element.io",
    "Failed to start": "فشل البدء",
-    "Powered by Matrix": "تدعمه «ماترِكس»"
+    "Powered by Matrix": "تدعمه «ماترِكس»",
+    "Use %(brand)s on mobile": "استعمل %(brand)s على المحمول",
+    "Switch to space by number": "التبديل إلى المساحة بالرقم"
 }
--- a/src/i18n/strings/bn_IN.json
+++ b/src/i18n/strings/bn_IN.json
@@ -1 +1,5 @@
-{}
+{
+    "Your Element is misconfigured": "আপনার এলিমেন্ট টি ভুল ভাবে কনফিগার করা হয়েছে",
+    "Invalid configuration: no default server specified.": "ভুল কনফিগারেশনঃ কোনো মূল সার্ভার উল্লেখ করা হয়নি।",
+    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "ভুল কনফিগারেশনঃ এদের মধ্যে কেবলমাত্র একটাই উল্লেখ করা যেতে পারেঃ default_server_config, default_server_name অথবা default_hs_url."
+}
--- a/src/i18n/strings/el.json
+++ b/src/i18n/strings/el.json
@@ -32,5 +32,7 @@
    "Failed to start": "Αποτυχία έναρξης",
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
    "%(brand)s Desktop (%(platformName)s)": "%(brand)s Desktop (%(platformName)s)",
-    "Missing indexeddb worker script!": "Απουσία indexeddb worker script!"
+    "Missing indexeddb worker script!": "Απουσία indexeddb worker script!",
+    "Use %(brand)s on mobile": "Χρήση %(brand)s σε κινητό",
+    "Switch to space by number": "Εναλλαγή σε space με αριθμό"
 }
--- a/src/i18n/strings/en_US.json
+++ b/src/i18n/strings/en_US.json
@@ -32,5 +32,6 @@
    "Unable to load config file: please refresh the page to try again.": "Unable to load config file: please refresh the page to try again.",
    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.",
    "Your Element is misconfigured": "Your Element is misconfigured",
-    "Missing indexeddb worker script!": "Missing indexeddb worker script!"
+    "Missing indexeddb worker script!": "Missing indexeddb worker script!",
+    "Switch to space by number": "Switch to space by number"
 }
--- a/src/i18n/strings/eo.json
+++ b/src/i18n/strings/eo.json
@@ -33,5 +33,6 @@
    "Your browser can't run %(brand)s": "Via foliumilo ne povas ruli %(brand)s",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s uzas specialajn funkciojn de foliumilo, kiujn via nuna foliumilo ne subtenas.",
    "Powered by Matrix": "Povigata de Matrix",
-    "Use %(brand)s on mobile": "Uzi %(brand)s telefone"
+    "Use %(brand)s on mobile": "Uzi %(brand)s telefone",
+    "Switch to space by number": "Baskuli al aro laŭ numero"
 }
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -33,6 +33,6 @@
    "Your browser can't run %(brand)s": "%(brand)s ei toimi sinu brauseris",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s kasutab mitmeid uusi brauseri-põhiseid tehnoloogiaid, mis ei ole veel sinu veebibrauseris toetatud.",
    "Powered by Matrix": "Põhineb Matrix'il",
-    "Use %(brand)s on mobile": "Kasuta %(brand)s rakendust nutiseadmes",
+    "Use %(brand)s on mobile": "Kasuta rakendust %(brand)s nutiseadmes",
    "Switch to space by number": "Vaata kogukonnakeskust tema numbri alusel"
 }
--- a/src/i18n/strings/fi.json
+++ b/src/i18n/strings/fi.json
@@ -2,7 +2,7 @@
    "Dismiss": "Hylkää",
    "Unknown device": "Tuntematon laite",
    "Welcome to Element": "Tervetuloa Element-sovellukseen",
-    "You need to be using HTTPS to place a screen-sharing call.": "Sinun täytyy käyttää HTTPS-yhteyttä, jotta voit jakaa ruudun puhelussa.",
+    "You need to be using HTTPS to place a screen-sharing call.": "Sinun täytyy käyttää HTTPS-yhteyttä, jotta voit jakaa näytön puhelussa.",
    "powered by Matrix": "moottorina Matrix",
    "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Hajautettua ja salattua viestintää Matrix-teknologialla",
    "Sign In": "Kirjaudu",
@@ -32,5 +32,7 @@
    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Element-asetuksesi sisältävät epäkelpoa JSONia. Korjaa ongelma ja lataa sivu uudelleen.",
    "Powered by Matrix": "Moottorina Matrix",
    "Your browser can't run %(brand)s": "%(brand)s ei toimi selaimessasi",
-    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s käyttää edistyneitä selaimen ominaisuuksia, joita nykyinen selaimesi ei tue."
+    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s käyttää edistyneitä selaimen ominaisuuksia, joita nykyinen selaimesi ei tue.",
+    "Use %(brand)s on mobile": "Käytä %(brand)sia mobiilisti",
+    "Switch to space by number": "Vaihda avaruuteen käyttäen numeroa"
 }
--- a/src/i18n/strings/fr.json
+++ b/src/i18n/strings/fr.json
@@ -33,5 +33,6 @@
    "Your browser can't run %(brand)s": "Votre navigateur ne peut pas exécuter %(brand)s",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s nécessite des fonctionnalités avancées que votre navigateur actuel ne prend pas en charge.",
    "Powered by Matrix": "Propulsé par Matrix",
-    "Use %(brand)s on mobile": "Utiliser %(brand)s sur téléphone"
+    "Use %(brand)s on mobile": "Utiliser %(brand)s sur téléphone",
+    "Switch to space by number": "Afficher un espace par son numéro"
 }
--- a/src/i18n/strings/fy.json
+++ b/src/i18n/strings/fy.json
@@ -0,0 +1,36 @@
+{
+    "Sign In": "Oanmelde",
+    "Failed to start": "Opstarten mislearre",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Jo kinne fierder gean mei jo eigen browser, mar guon funksjes kinne net wurkje en uterlik kin de applikaasje der ôfwikend útsjen.",
+    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Graach <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, of<safariLink>Safari</safariLink> ynstallearje foar de beste ûnderfining.",
+    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s brûkt avansearre browserfunksjes dy’t net stipe wurde troch de browser dy’t jo no brûke.",
+    "Powered by Matrix": "Mooglik makke troch Matrix",
+    "%(brand)s Desktop (%(platformName)s)": "%(brand)s Desktop (%(platformName)s)",
+    "Previous/next recently visited room or community": "Foarige/Folgjende resintlik besochte keamer as mienskip",
+    "Switch to space by number": "Wikselje fan romte mei nûmer",
+    "Unexpected error preparing the app. See console for details.": "Unferwachte flater by it klearmeitsjen fan de applikaasje. Sjoch yn de console foar details.",
+    "The message from the parser is: %(message)s": "It berjocht fan de ferwurker is: %(message)s",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Jo Element-konfiguraasje hat ûnjildige JSON. Nei dat jo dit oplost ha, kin dizze side ferfarske wurde.",
+    "Use %(brand)s on mobile": "Brûk %(brand)s op mobyl",
+    "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Desintralisearre, fersifere chat &amp; gearwurking fersoarge troch [matrix]",
+    "You need to be using HTTPS to place a screen-sharing call.": "Oproppen mei skerm dielen fereasket HTTPS.",
+    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
+    "Go to your browser to complete Sign In": "Gean nei jo browser om it ynskriuwen te foltôgjen",
+    "Download Completed": "Download foltôge",
+    "Unable to load config file: please refresh the page to try again.": "Kin konfiguraasjebestân net lade: ferfarskje de side en probearje it nochris.",
+    "Open user settings": "Brûkersynstellingen iepenje",
+    "Dismiss": "Slute",
+    "Explore rooms": "Keamers ûntdekke",
+    "Create Account": "Registrearje",
+    "Welcome to Element": "Wolkom by Element",
+    "I understand the risks and wish to continue": "Ik begryp de risiko's en wol graach fierder gean",
+    "Go to element.io": "Gean nei element.io",
+    "Your browser can't run %(brand)s": "Jo browser kin %(brand)s net útfiere",
+    "Unsupported browser": "Net stipe browser",
+    "Unknown device": "Unbekend apparaat",
+    "Open": "Iepenje",
+    "Invalid JSON": "Unjildige JSON",
+    "Your Element is misconfigured": "Jo Element is net goed konfigurearre",
+    "Invalid configuration: no default server specified.": "Unjildiche konfiguraasje: gjin standertserver selektearre.",
+    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Unjildige konfiguraasje: kin allinnich kieze út default_server_config, default_server_name, as default_hs_url."
+}
--- a/src/i18n/strings/ga.json
+++ b/src/i18n/strings/ga.json
@@ -33,5 +33,6 @@
    "Go to element.io": "Téigh go element.io",
    "Open user settings": "Oscail socruithe úsáideora",
    "Open": "Oscail",
-    "Use %(brand)s on mobile": "Úsáid %(brand)s ar guthán póca"
+    "Use %(brand)s on mobile": "Úsáid %(brand)s ar guthán póca",
+    "Switch to space by number": "Athraigh go spás de réir uimhreach"
 }
--- a/src/i18n/strings/he.json
+++ b/src/i18n/strings/he.json
@@ -12,7 +12,7 @@
    "Go to your browser to complete Sign In": "עבור לדפדפן להמשך ההתחברות",
    "Explore rooms": "גלה חדרים",
    "Create Account": "יצירת חשבון",
-    "Sign In": "כניסה",
+    "Sign In": "התחברות",
    "Previous/next recently visited room or community": "הבא\\קודם חדרים וקהילות שביקרתם לאחרונה",
    "Open": "פתח",
    "Download Completed": "ההורדה הושלמה",
@@ -33,5 +33,6 @@
    "%(brand)s Desktop (%(platformName)s)": "%(brand)s שולחן עבודה %(platformName)s",
    "The message from the parser is: %(message)s": "ההודעה מהמנתח היא: %(message)s",
    "Missing indexeddb worker script!": "סקריפט indexeddb worker חסר!",
-    "Switch to space by number": "עבור אל 'Space' על פי מספרו"
+    "Switch to space by number": "עבור 'למרחב' על פי המספר שלו",
+    "Use %(brand)s on mobile": "השתמש ב%(brand)s  במכשיר הנייד"
 }
--- a/src/i18n/strings/id.json
+++ b/src/i18n/strings/id.json
@@ -1,38 +1,38 @@
 {
    "Dismiss": "Abaikan",
    "powered by Matrix": "didukung oleh Matrix",
-    "Unknown device": "Perangkat Tidak Diketahui",
-    "You need to be using HTTPS to place a screen-sharing call.": "Anda perlu menggunakan HTTPS untuk melakukan panggilan berbagi-layar.",
+    "Unknown device": "Perangkat tidak dikenal",
+    "You need to be using HTTPS to place a screen-sharing call.": "Anda perlu menggunakan HTTPS untuk melakukan panggilan berbagi layar.",
    "Welcome to Element": "Selamat datang di Element",
-    "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Obrolan terenkripsi, terdesentralisasi &amp; kolaborasi didukung oleh [matrix]",
-    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Konfigurasi Element Anda mengandung JSON yang tidak valid. Mohon perbaiki masalahnya dan muat ulang halaman nya.",
-    "Invalid configuration: no default server specified.": "Konfigurasi tidak valid: server default belum ditentukan.",
+    "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Obrolan &amp; kolaborasi terdecentralisasi dan terenkripsi, diberdayakan oleh [matrix]",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Konfigurasi Element Anda berisi JSON yang tidak valid. Mohon perbaiki masalahnya dan muat ulang halamannya.",
+    "Invalid configuration: no default server specified.": "Konfigurasi tidak valid: server bawaan belum ditentukan.",
    "Missing indexeddb worker script!": "Tidak ada script worker indexeddb!",
-    "Explore rooms": "Jelajahi ruang",
+    "Explore rooms": "Jelajahi ruangan",
    "Create Account": "Buat Akun",
-    "Switch to space by number": "Beralih ke ruang dengan nomor",
-    "Go to your browser to complete Sign In": "Buka browser Anda untuk menyelesaikan Masuk",
+    "Switch to space by number": "Beralih ke space bedasarkan angka",
+    "Go to your browser to complete Sign In": "Buka browser Anda untuk menyelesaikan Sign In",
    "Sign In": "Masuk",
    "Failed to start": "Gagal untuk memulai",
    "Go to element.io": "Buka element.io",
    "I understand the risks and wish to continue": "Saya memahami risikonya dan ingin melanjutkan",
    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Anda dapat lanjut menggunakan browser Anda saat ini, tetapi beberapa atau semua fitur mungkin tidak berfungsi dan tampilan serta nuansa aplikasi mungkin salah.",
-    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Mohon instal <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, atau <safariLink>Safari</safariLink> untuk pengalaman terbaik.",
+    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Mohon instal <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, atau <safariLink>Safari</safariLink> untuk pengalaman yang terbaik.",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s menggunakan fitur browser lanjutan yang tidak didukung oleh browser Anda saat ini.",
-    "Your browser can't run %(brand)s": "Browser Anda tidak bisa menjalankan %(brand)s",
+    "Your browser can't run %(brand)s": "Browser Anda tidak dapat menjalankan %(brand)s",
    "Unsupported browser": "Browser tidak didukung",
    "Use %(brand)s on mobile": "Gunakan %(brand)s di ponsel",
-    "Powered by Matrix": "Didukung oleh Matrix",
+    "Powered by Matrix": "Diberdayakan oleh Matrix",
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
    "%(brand)s Desktop (%(platformName)s)": "%(brand)s Desktop (%(platformName)s)",
-    "Previous/next recently visited room or community": "Ruangan atau komunitas yang baru saja dikunjungi sebelum/berikutnya",
+    "Previous/next recently visited room or community": "Ruangan atau komunitas yang baru saja dikunjungi sebelumnya/berikutnya",
    "Open user settings": "Buka pengaturan pengguna",
    "Open": "Buka",
-    "Download Completed": "Unduh Selesai",
+    "Download Completed": "Unduhan Selesai",
    "Unexpected error preparing the app. See console for details.": "Kesalahan tak terduga saat menyiapkan aplikasi. Lihat konsol untuk detail.",
-    "Unable to load config file: please refresh the page to try again.": "Tidak bisa muat file konfigurasi: mohon segarkan halaman untuk mencoba lagi.",
+    "Unable to load config file: please refresh the page to try again.": "Tidak dapat memuat file konfigurasi: mohon muat ulang halaman ini untuk mencoba lagi.",
    "Invalid JSON": "JSON tidak valid",
    "The message from the parser is: %(message)s": "Pesan dari pengurai adalah: %(message)s",
-    "Your Element is misconfigured": "Element Anda salah dikonfigurasi",
+    "Your Element is misconfigured": "Anda mengatur Element dengan salah",
    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Konfigurasi tidak valid: hanya bisa menentukan satu dari default_server_config, default_server_name, atau default_hs_url."
 }
--- a/src/i18n/strings/kab.json
+++ b/src/i18n/strings/kab.json
@@ -32,5 +32,7 @@
    "Open": "Ldi",
    "Your browser can't run %(brand)s": "Iminig-inek·inem ur isselkan ara %(brand)s",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s isseqdac timahilin n yiminig leqqayen ur yessefrak ara yiminig-ik·im amiran.",
-    "Powered by Matrix": "Iteddu s lmendad n Matrix"
+    "Powered by Matrix": "Iteddu s lmendad n Matrix",
+    "Use %(brand)s on mobile": "Seqdec %(brand)s deg tiliɣri",
+    "Switch to space by number": "Ddu ɣer space s uṭṭun"
 }
--- a/src/i18n/strings/ko.json
+++ b/src/i18n/strings/ko.json
@@ -24,5 +24,14 @@
    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "현재 사용중이신 브라우저를 계속 사용하셔도 됩니다, 다만 일부 기능들이 작동하지 않을 수 있으며 애플리케이션이 잘못돼 보일 수 있습니다.",
    "I understand the risks and wish to continue": "위험하다는 것을 이해했으며 계속하고 싶습니다",
    "Go to element.io": "element.io으로 가기",
-    "Failed to start": "시작 실패"
+    "Failed to start": "시작 실패",
+    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s 는 당신의 브라우저에서 지원되지 않는 고급 기능을 사용합니다.",
+    "Your browser can't run %(brand)s": "당신의 브라우저는 %(brand)s 를 작동할 수 없습니다",
+    "Use %(brand)s on mobile": "모바일에서 %(brand)s 사용",
+    "Powered by Matrix": "Matrix로 지원됨",
+    "Switch to space by number": "숫자로 스페이스 전환하기",
+    "Open": "열기",
+    "Download Completed": "다운로드 완료",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "당신의 Element 설정은 유효하지 않은 JSON을 포함합니다. 이 문제를 해결하고 페이지를 새로고침해주세요.",
+    "Your Element is misconfigured": "당신의 Element가 잘못 설정되었습니다"
 }
--- a/src/i18n/strings/lv.json
+++ b/src/i18n/strings/lv.json
@@ -2,35 +2,37 @@
    "Dismiss": "Aizvērt",
    "powered by Matrix": "Tiek darbināta ar Matrix",
    "Unknown device": "Nezināma ierīce",
-    "You need to be using HTTPS to place a screen-sharing call.": "Lai veiktu ekrāna kopīgošanas zvanu, nepieciešams izmantot HTTPS savienojumu.",
-    "Welcome to Element": "Esiet laipni gaidīti Element",
-    "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Decentralizēta, šifrēta čata &amp; kopdarbošanās sistēma uz [matrix] bāzes",
-    "Sign In": "Pierakstīties",
+    "You need to be using HTTPS to place a screen-sharing call.": "Ekrāna kopīgošanai nepieciešams izmantot HTTPS savienojumu.",
+    "Welcome to Element": "Esiet laipni gaidīti Elementā",
+    "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Decentralizēta, šifrēta tērziņu &amp; kopdarbības vide uz [matrix] bāzes",
+    "Sign In": "Ierakstīties",
    "Create Account": "Izveidot kontu",
    "Explore rooms": "Pārlūkot istabas",
    "Unexpected error preparing the app. See console for details.": "Negaidīta kļūda, sagatavojot lietotni. Sīkāku informāciju skatiet konsolē.",
    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Kļūdaina konfigurācija: var norādīt tikai vienu no parametriem default_server_config, default_server_name, vai default_hs_url.",
    "Invalid configuration: no default server specified.": "Kļūdaina konfigurācija: nav norādīts noklusējuma serveris.",
-    "The message from the parser is: %(message)s": "Ziņojums no parsētāja ir: %(message)s",
+    "The message from the parser is: %(message)s": "No pārsētāja ir ziņa: %(message)s",
    "Invalid JSON": "Kļūdains JSON",
-    "Unable to load config file: please refresh the page to try again.": "Neizdevās ielādēt konfigurācijas datni. Lūdzu, pārlādējiet lapu, lai mēģinātu vēlreiz.",
+    "Unable to load config file: please refresh the page to try again.": "Neizdevās ielādēt konfigurācijas failu. Lai atkārtotu mēģinātu, lūdzu pārlādējiet lapu.",
    "Open user settings": "Atvērt lietotāja iestatījumus",
-    "Go to your browser to complete Sign In": "Pārejiet uz pārlūku, lai pabeigtu pierakstīšanos",
+    "Go to your browser to complete Sign In": "Dodieties uz pārlūku, lai pabeigtu pierakstīšanos",
    "Unsupported browser": "Neatbalstīts pārlūks",
-    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Labākajai izmantošanas pieredzei, lūdzu, instalējiet <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink> vai <safariLink>Safari</safariLink> pārlūku.",
-    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Jūs varat turpināt lietot savu pašreizējo pārlūku, bet dažas vai visas funkcijas nestrādās, un lietotnes izskats var būt nepareizs.",
-    "I understand the risks and wish to continue": "Es pieņemu riskus un vēlos turpināt",
-    "Go to element.io": "Ej uz element.io",
+    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Lai gūtu labāko lietošanas pieredzi, lūdzu, instalējiet <chromeLink>Chromium</chromeLink>, <firefoxLink>Firefox</firefoxLink> vai <safariLink>Safari</safariLink> pārlūku.",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Jūs varat turpināt lietot savu pašreizējo pārlūku, bet dažas funkcijas nestrādās un lietotnes izskats/saskarne var būt atspoguļoti nekorekti.",
+    "I understand the risks and wish to continue": "Es apzinos riskus un vēlos turpināt",
+    "Go to element.io": "Doties uz element.io",
    "Failed to start": "Neizdevās palaist",
-    "Powered by Matrix": "Darbojas uz Matrix",
+    "Powered by Matrix": "Griežas uz Matrix tehnoloģijas",
    "Previous/next recently visited room or community": "Iepriekšējā/nākošā nesen apmeklētā istaba vai kopiena",
-    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s izmanto pārlūku papildus funkcijas, kas netiek atbalstītas šajā pārlūkā.",
+    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s izmanto pārlūku papildfunkcijas, kuras netiek atbalstītas šajā pārlūkā.",
    "Your browser can't run %(brand)s": "Jūsu pārlūks nevar palaist %(brand)s",
    "Missing indexeddb worker script!": "Trūkst indexeddb worker skripta!",
    "Open": "Atvērt",
-    "Download Completed": "Lejupielāde pabeigta",
-    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Jūsu Element konfigurācija satur kļūdainu JSON. Lūdzu, salabojiet problēmu un pārlādējiet lapu.",
+    "Download Completed": "Lejuplāde pabeigta",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Jūsu Element konfigurācija satur kļūdainu JSON. Lūdzu, izlabojiet un pārlādējiet lapu.",
    "Your Element is misconfigured": "Jūsu Element ir nokonfigurēts kļūdaini",
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
-    "%(brand)s Desktop (%(platformName)s)": "%(brand)s Desktop (%(platformName)s)"
+    "%(brand)s Desktop (%(platformName)s)": "%(brand)s Galdvirsmas (%(platformName)s)",
+    "Switch to space by number": "Pārslēgties uz atstarpi/tukšumu ar numuru",
+    "Use %(brand)s on mobile": "Mobilajā tālrunī izmanojiet %(brand)s"
 }
--- a/src/i18n/strings/nb_NO.json
+++ b/src/i18n/strings/nb_NO.json
@@ -32,5 +32,7 @@
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s bruker avanserte nettleserfunksjoner som ikke støttes av din nåværende nettleser.",
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
    "%(brand)s Desktop (%(platformName)s)": "%(brand)s Skrivebord (%(platformName)s)",
-    "Open": "Åpne"
+    "Open": "Åpne",
+    "Use %(brand)s on mobile": "Bruk %(brand)s på mobil",
+    "Switch to space by number": "Bytt til plass etter nummer"
 }
--- a/src/i18n/strings/nl.json
+++ b/src/i18n/strings/nl.json
@@ -4,10 +4,10 @@
    "Unknown device": "Onbekend apparaat",
    "You need to be using HTTPS to place a screen-sharing call.": "Oproepen met schermdelen vergen HTTPS.",
    "Welcome to Element": "Welkom bij Element",
-    "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Gedecentraliseerd en versleuteld chatten &amp; samenwerken dankzij [matrix]",
+    "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Decentrale en versleutelde chat &amp; samenwerken dankzij [matrix]",
    "Sign In": "Inloggen",
    "Create Account": "Registreren",
-    "Explore rooms": "Gesprekken ontdekken",
+    "Explore rooms": "Ontdek kamers",
    "Unexpected error preparing the app. See console for details.": "Er is een onverwachte fout opgetreden bij het voorbereiden van de app. Zie de console voor details.",
    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Configuratiefout: kan slechts één van default_server_config, default_server_name, of default_hs_url opgeven.",
    "Invalid configuration: no default server specified.": "Configuratie ongeldig: geen standaardserver opgegeven.",
@@ -34,5 +34,5 @@
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s gebruikt geavanceerde functies die niet ondersteund worden in uw huidige browser.",
    "Powered by Matrix": "Mogelijk gemaakt door Matrix",
    "Use %(brand)s on mobile": "Gebruik %(brand)s op uw mobiel",
-    "Switch to space by number": "Wissel naar space per nummer"
+    "Switch to space by number": "Wissel naar Space met nummer"
 }
--- a/src/i18n/strings/nn.json
+++ b/src/i18n/strings/nn.json
@@ -12,11 +12,26 @@
    "Invalid JSON": "Ugyldig JSON",
    "Unexpected error preparing the app. See console for details.": "Uventa feil under lasting av programmet. Sjå konsollen for detaljar.",
    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Ugyldig oppsett: berre muleg å berre spesifiere ein av default_server_config, default_server_name eller default_hs_url.",
-    "Invalid configuration: no default server specified.": "Ugyldig oppsett:  ingen \"default server\" er spesifisert.",
+    "Invalid configuration: no default server specified.": "Ugyldig oppsett: Ingen standardserver er spesifisert.",
    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Oppsettet for din Element inneheld ugyldig JSON. Sjekk konfigurasjonsfila, deretter last om sida.",
    "Unable to load config file: please refresh the page to try again.": "Fekk ikkje til å lasta konfigurasjonsfila: last inn sida for å prøva om att.",
    "Go to your browser to complete Sign In": "Opna nettlesaren din for å fullføra innlogginga",
    "Unsupported browser": "Nettlesaren er ikkje støtta",
    "Your browser can't run %(brand)s": "Din nettlesar kan ikkje køyra %(brand)s",
-    "Go to element.io": "Gå til element.io"
+    "Go to element.io": "Gå til element.io",
+    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Du kan fortsetja å bruka gjeldande nettlesar, men nokre eller alle funksjonane fungerer kanskje ikkje, og utsjånaden og kjensla av applikasjonen kan vera feil.",
+    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Installer <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, eller <safariLink>Safari</safariLink> for den beste opplevinga.",
+    "I understand the risks and wish to continue": "Eg forstår risikoen og ynskjer å fortsetja",
+    "Previous/next recently visited room or community": "Føregåande/neste nyleg besøkte rom eller samfunn",
+    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s brukar avanserte nettlesarfunksjonar som ikkje er støtta av den gjeldande nettlesaren din.",
+    "Use %(brand)s on mobile": "Bruk %(brand)s på mobil",
+    "Powered by Matrix": "Driven av Matrix",
+    "%(brand)s Desktop (%(platformName)s)": "%(brand)s Skrivebord (%(platformName)s)",
+    "Your Element is misconfigured": "Element er feilkonfigurert",
+    "Failed to start": "Klarte ikkje å starta",
+    "Open user settings": "Opna brukarinnstillingar",
+    "Switch to space by number": "Byt til plass etter nummer",
+    "Open": "Opna",
+    "Download Completed": "Nedlasting Fullført"
 }
--- a/src/i18n/strings/pl.json
+++ b/src/i18n/strings/pl.json
@@ -33,5 +33,6 @@
    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Konfiguracja Elementa zawiera niepoprawny JSON. Popraw konfiguracje i odśwież stronę.",
    "Your Element is misconfigured": "Element jest nieprawidłowo skonfigurowany",
    "Powered by Matrix": "Zasilane przez Matrix",
-    "Use %(brand)s on mobile": "Użyj %(brand)s w telefonie"
+    "Use %(brand)s on mobile": "Użyj %(brand)s w telefonie",
+    "Switch to space by number": "Przełącz na przestrzeń według numeru"
 }
--- a/src/i18n/strings/ru.json
+++ b/src/i18n/strings/ru.json
@@ -9,7 +9,7 @@
    "Create Account": "Создать учётную запись",
    "Explore rooms": "Список комнат",
    "Unexpected error preparing the app. See console for details.": "Неожиданная ошибка при подготовке приложения. Подробности см. в консоли.",
-    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Неверная конфигурация: может указывать только один из следующих параметров: default_server_config, default_server_name или default_hs_url.",
+    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Неверная конфигурация: можно указывать только один из следующих параметров: default_server_config, default_server_name или default_hs_url.",
    "Invalid configuration: no default server specified.": "Неверная конфигурация: сервер по умолчанию не указан.",
    "The message from the parser is: %(message)s": "Сообщение из парсера: %(message)s",
    "Invalid JSON": "Нерабочий JSON",
@@ -33,5 +33,6 @@
    "Your browser can't run %(brand)s": "Ваш браузер не может запустить %(brand)s",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s использует расширенные возможности, которые не поддерживаются вашим браузером.",
    "Powered by Matrix": "На технологии Matrix",
-    "Use %(brand)s on mobile": "Воспользуйтесь %(brand)s на мобильном телефоне"
+    "Use %(brand)s on mobile": "Воспользуйтесь %(brand)s на мобильном телефоне",
+    "Switch to space by number": "Переключение на пространство по номеру"
 }
--- a/src/i18n/strings/sk.json
+++ b/src/i18n/strings/sk.json
@@ -4,7 +4,7 @@
    "Dismiss": "Zamietnuť",
    "powered by Matrix": "poháňa Matrix",
    "Welcome to Element": "Víta vás Element",
-    "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Decentralizovaný, šifrovaný chat a spolupráca na platforme [matrix]",
+    "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Decentralizované, šifrované konverzácie a spolupráca na platforme [matrix]",
    "Sign In": "Prihlásiť sa",
    "Create Account": "Vytvoriť účet",
    "Explore rooms": "Preskúmať miestnosti",
@@ -32,5 +32,7 @@
    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Vaša konfigurácia Elementu obsahuje nesprávny údaj JSON. Prosím, opravte chybu a obnovte stránku.",
    "Your browser can't run %(brand)s": "Váš prehliadač nerozbehne %(brand)s",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s používa pokročilé funkcie prehliadača, ktoré nie sú podporované vaším aktuálnym prehliadačom.",
-    "Powered by Matrix": "používa protokol Matrix"
+    "Powered by Matrix": "používa protokol Matrix",
+    "Use %(brand)s on mobile": "Používať %(brand)s pri mobilných zariadeniach",
+    "Switch to space by number": "Prepnúť do priestoru podľa čísla"
 }
--- a/src/i18n/strings/th.json
+++ b/src/i18n/strings/th.json
@@ -15,5 +15,16 @@
    "Go to element.io": "ไปยัง element.io",
    "Failed to start": "ไม่สามารถเริ่ม",
    "Open": "เปิด",
-    "Powered by Matrix": "ขับเคลื่อนโดย Matrix"
+    "Powered by Matrix": "ขับเคลื่อนโดย Matrix",
+    "Unexpected error preparing the app. See console for details.": "เกิดข้อผิดพลาดที่ไม่คาดคิดขณะการเตรียมพร้อมโปรแกรม. คุณสามารถดูรายละเอียดข้อผิดพลาดได้ที่หน้าคอนโซล.",
+    "Unable to load config file: please refresh the page to try again.": "ไม่สามารถโหลดการตั้งค่า: โปรดรีเฟรชหน้าเว็บเพื่อลองใหม่อีกครั้ง.",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "การตั้งค่าของ Element จะต้องอยู่ในรูปแบบ JSON. โปรดแก้ไขการตั้งค่าและโหลดหน้านี้ใหม่อีกครั้ง.",
+    "Your Element is misconfigured": "การตั้งค่าของคุณไม่ถูกต้อง",
+    "Invalid configuration: no default server specified.": "คุณยังไม่ได้ตั้งค่าเซิฟเวอร์หลักในการตั้งค่า.",
+    "I understand the risks and wish to continue": "ฉันเข้าใจความเสี่ยง และดำเนินการต่อ",
+    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "กรุณาติดตั้ง <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, หรือ <safariLink>Safari</safariLink> เพื่อประสิทธิภาพการใช้งานที่ดีที่สุด.",
+    "Your browser can't run %(brand)s": "เบราว์เซอร์ของคุณไม่สามารถใช้งาน %(brand)s ได้",
+    "Unsupported browser": "เบราว์เซอร์ไม่รองรับ",
+    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
+    "Previous/next recently visited room or community": "ห้อง/ชุมชน ที่เคยเยี่ยมชมไปก่อนหน้า"
 }
--- a/src/i18n/strings/tr.json
+++ b/src/i18n/strings/tr.json
@@ -8,10 +8,10 @@
    "Sign In": "Giriş Yap",
    "Create Account": "Hesap Oluştur",
    "Explore rooms": "Odaları keşfet",
-    "Invalid JSON": "JSON geçersiz",
+    "Invalid JSON": "Hatalı JSON",
    "Unexpected error preparing the app. See console for details.": "Uygulama hazırlanırken beklenmeyen bir hata oldu. Detaylar için konsola bakın.",
    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Hatalı ayarlar: default_server_config, default_server_name ve default_hs_url ayarlarından en fazla biri girilebilir.",
-    "Invalid configuration: no default server specified.": "Geçersiz yapılandırma: varsayılan sunucu seçilmemiş.",
+    "Invalid configuration: no default server specified.": "Hatalı ayarlar: varsayılan sunucu belirlenmemiş.",
    "The message from the parser is: %(message)s": "Ayrıştırıcıdan gelen mesaj: %(message)s",
    "Go to your browser to complete Sign In": "Oturum açmayı tamamlamak için tarayıcınıza gidin",
    "Open user settings": "Kullanıcı ayarlarını aç",
--- a/src/i18n/strings/uk.json
+++ b/src/i18n/strings/uk.json
@@ -18,7 +18,7 @@
    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Ви можете продовжити, користуючись вашим поточним браузером, але деякі функції можуть не працювати, а застосунок може виглядати неправильно.",
    "I understand the risks and wish to continue": "Я усвідомлюю ризик і бажаю продовжити",
    "Go to element.io": "Перейти на element.io",
-    "Failed to start": "Запуск не вдався",
+    "Failed to start": "Не вдалося запустити",
    "Download Completed": "Завантаження завершено",
    "Missing indexeddb worker script!": "Відсутній робочий сценарій IndexedDB!",
    "Your Element is misconfigured": "Ваш Element налаштовано неправильно",
--- a/src/i18n/strings/uz.json
+++ b/src/i18n/strings/uz.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/strings/vi.json
+++ b/src/i18n/strings/vi.json
@@ -33,5 +33,6 @@
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
    "Missing indexeddb worker script!": "Thiếu tệp lệnh làm việc của indexeddb!",
    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Thiết lập Element của bạn chứa JSON không hợp lệ. Vui lòng sửa vấn đề và tải lại trang.",
-    "Your Element is misconfigured": "Element của bạn bị thiết lập sai"
+    "Your Element is misconfigured": "Element của bạn bị thiết lập sai",
+    "Switch to space by number": "Chuyển sang Space bằng số"
 }
--- a/src/i18n/strings/zh_Hans.json
+++ b/src/i18n/strings/zh_Hans.json
@@ -11,8 +11,8 @@
    "The message from the parser is: %(message)s": "语法分析器的信息：%(message)s",
    "Invalid JSON": "无效的 JSON",
    "Unexpected error preparing the app. See console for details.": "软件准备时出错，详细信息请查看控制台。",
-    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "无效的配置：只能设置 default_server_config，default_server_name 或 default_hs_url 中的一个。",
-    "Invalid configuration: no default server specified.": "无效的配置：没有设置默认服务器。",
+    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "配置无效: 只能设置 default_server_config、default_server_name 或 default_hs_url。",
+    "Invalid configuration: no default server specified.": "配置无效：没有设置默认服务器。",
    "Missing indexeddb worker script!": "缺少 IndexedDB 辅助脚本！",
    "Unable to load config file: please refresh the page to try again.": "无法加载配置文件：请再次刷新页面。",
    "Open user settings": "打开用户设置",
--- a/src/vector/app.tsx
+++ b/src/vector/app.tsx
@@ -19,25 +19,30 @@ limitations under the License.
 */

 import React from 'react';
-// add React and ReactPerf to the global namespace, to make them easier to access via the console
-// this incidentally means we can forget our React imports in JSX files without penalty.
-window.React = React;
-
 import * as sdk from 'matrix-react-sdk';
 import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
 import { _td, newTranslatableError } from 'matrix-react-sdk/src/languageHandler';
 import AutoDiscoveryUtils from 'matrix-react-sdk/src/utils/AutoDiscoveryUtils';
 import { AutoDiscovery } from "matrix-js-sdk/src/autodiscovery";
 import * as Lifecycle from "matrix-react-sdk/src/Lifecycle";
-import type MatrixChatType from "matrix-react-sdk/src/components/structures/MatrixChat";
-import SdkConfig from "matrix-react-sdk/src/SdkConfig";
-
-import { parseQs, parseQsFromFragment } from './url_utils';
-import VectorBasePlatform from "./platform/VectorBasePlatform";
+import SdkConfig, { parseSsoRedirectOptions } from "matrix-react-sdk/src/SdkConfig";
+import { logger } from "matrix-js-sdk/src/logger";
 import { createClient } from "matrix-js-sdk/src/matrix";

+import type MatrixChatType from "matrix-react-sdk/src/components/structures/MatrixChat";
+import { parseQs, parseQsFromFragment } from './url_utils';
+import VectorBasePlatform from "./platform/VectorBasePlatform";
+
+// add React and ReactPerf to the global namespace, to make them easier to access via the console
+// this incidentally means we can forget our React imports in JSX files without penalty.
+window.React = React;
+
 let lastLocationHashSet: string = null;

+logger.log(`Application is running in ${process.env.NODE_ENV} mode`);
+
+window.matrixLogger = logger;
+
 // Parse the given window.location and return parameters that can be used when calling
 // MatrixChat.showScreen(screen, params)
 function getScreenFromLocation(location: Location) {
@@ -53,7 +58,7 @@ function getScreenFromLocation(location: Location) {
 function routeUrl(location: Location) {
    if (!window.matrixChat) return;

-    console.log("Routing URL ", location.href);
+    logger.log("Routing URL ", location.href);
    const s = getScreenFromLocation(location);
    (window.matrixChat as MatrixChatType).showScreen(s.screen, s.params);
 }
@@ -69,7 +74,7 @@ function onHashChange(ev: HashChangeEvent) {
 // This will be called whenever the SDK changes screens,
 // so a web page can update the URL bar appropriately.
 function onNewScreen(screen: string, replaceLast = false) {
-    console.log("newscreen " + screen);
+    logger.log("newscreen " + screen);
    const hash = '#/' + screen;
    lastLocationHashSet = hash;

@@ -131,7 +136,7 @@ function onTokenLoginCompleted() {

    url.searchParams.delete("loginToken");

-    console.log(`Redirecting to ${url.href} to drop loginToken from queryparams`);
+    logger.log(`Redirecting to ${url.href} to drop loginToken from queryparams`);
    window.history.replaceState(null, "", url.href);
 }

@@ -143,7 +148,7 @@ export async function loadApp(fragParams: {}) {
    const params = parseQs(window.location);

    const urlWithoutQuery = window.location.protocol + '//' + window.location.host + window.location.pathname;
-    console.log("Vector starting at " + urlWithoutQuery);
+    logger.log("Vector starting at " + urlWithoutQuery);

    (platform as VectorBasePlatform).startUpdater();

@@ -154,9 +159,15 @@ export async function loadApp(fragParams: {}) {
    const [userId] = await Lifecycle.getStoredSessionOwner();
    const hasPossibleToken = !!userId;
    const isReturningFromSso = !!params.loginToken;
-    const autoRedirect = config['sso_immediate_redirect'] === true;
+    const ssoRedirects = parseSsoRedirectOptions(config);
+    let autoRedirect = ssoRedirects.immediate === true;
+    // XXX: This path matching is a bit brittle, but better to do it early instead of in the app code.
+    const isWelcomeOrLanding = window.location.hash === '#/welcome' || window.location.hash === '#';
+    if (!autoRedirect && ssoRedirects.on_welcome_page && isWelcomeOrLanding) {
+        autoRedirect = true;
+    }
    if (!hasPossibleToken && !isReturningFromSso && autoRedirect) {
-        console.log("Bypassing app load to redirect to SSO");
+        logger.log("Bypassing app load to redirect to SSO");
        const tempCli = createClient({
            baseUrl: config['validated_server_config'].hsUrl,
            idBaseUrl: config['validated_server_config'].isUrl,
@@ -186,7 +197,7 @@ export async function loadApp(fragParams: {}) {
 async function verifyServerConfig() {
    let validatedConfig;
    try {
-        console.log("Verifying homeserver configuration");
+        logger.log("Verifying homeserver configuration");

        // Note: the query string may include is_url and hs_url - we only respect these in the
        // context of email validation. Because we don't respect them otherwise, we do not need
@@ -217,8 +228,8 @@ async function verifyServerConfig() {
        }

        if (hsUrl) {
-            console.log("Config uses a default_hs_url - constructing a default_server_config using this information");
-            console.warn(
+            logger.log("Config uses a default_hs_url - constructing a default_server_config using this information");
+            logger.warn(
                "DEPRECATED CONFIG OPTION: In the future, default_hs_url will not be accepted. Please use " +
                "default_server_config instead.",
            );
@@ -237,13 +248,13 @@ async function verifyServerConfig() {

        let discoveryResult = null;
        if (wkConfig) {
-            console.log("Config uses a default_server_config - validating object");
+            logger.log("Config uses a default_server_config - validating object");
            discoveryResult = await AutoDiscovery.fromDiscoveryConfig(wkConfig);
        }

        if (serverName) {
-            console.log("Config uses a default_server_name - doing .well-known lookup");
-            console.warn(
+            logger.log("Config uses a default_server_name - doing .well-known lookup");
+            logger.warn(
                "DEPRECATED CONFIG OPTION: In the future, default_server_name will not be accepted. Please " +
                "use default_server_config instead.",
            );
@@ -254,10 +265,10 @@ async function verifyServerConfig() {
    } catch (e) {
        const { hsUrl, isUrl, userId } = await Lifecycle.getStoredSessionVars();
        if (hsUrl && userId) {
-            console.error(e);
-            console.warn("A session was found - suppressing config error and using the session's homeserver");
+            logger.error(e);
+            logger.warn("A session was found - suppressing config error and using the session's homeserver");

-            console.log("Using pre-existing hsUrl and isUrl: ", { hsUrl, isUrl });
+            logger.log("Using pre-existing hsUrl and isUrl: ", { hsUrl, isUrl });
            validatedConfig = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, isUrl, true);
        } else {
            // the user is not logged in, so scream
@@ -268,10 +279,10 @@ async function verifyServerConfig() {
    validatedConfig.isDefault = true;

    // Just in case we ever have to debug this
-    console.log("Using homeserver config:", validatedConfig);
+    logger.log("Using homeserver config:", validatedConfig);

    // Add the newly built config to the actual config for use by the app
-    console.log("Updating SdkConfig with validated discovery information");
+    logger.log("Updating SdkConfig with validated discovery information");
    SdkConfig.add({ "validated_server_config": validatedConfig });

    return SdkConfig.get();
--- a/src/vector/devcss.ts
+++ b/src/vector/devcss.ts
@@ -0,0 +1,47 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+ * 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);
+}
+
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -32,7 +32,7 @@
        font-src 'self' data:;
        media-src * blob: data:;
        child-src * blob: data:;
-        worker-src 'self';
+        worker-src 'self' blob:;
        frame-src * blob: data:;
        form-action 'self';
        manifest-src 'self';
@@ -43,7 +43,7 @@
        if (match) {
            var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
        %>
-           <link rel="stylesheet" disabled="disabled" title="<%= title %>" href="<%= file %>">
+           <link rel="stylesheet" disabled="disabled" data-mx-theme="<%= title %>" title="<%= title %>" href="<%= file %>">
        <% } else { %>
           <link rel="stylesheet" href="<%= file %>">
        <% }
@@ -58,23 +58,20 @@
    } %>

  </head>
-  <body
-      style="height: 100%; margin: 0;"
-      data-vector-recorder-worklet-script="<%= htmlWebpackPlugin.files.js.find(entry => entry.includes("recorder-worklet.js")) %>"
-  >
+  <body style="height: 100%; margin: 0;">
    <noscript>Sorry, Element requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
    <section id="matrixchat" style="height: 100%;" class="notranslate"></section>
    <script src="<%= htmlWebpackPlugin.files.js.find(entry => entry.includes("bundle.js")) %>"></script>

    <!-- Legacy supporting Prefetch images -->
-    <img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('matrix-react-sdk/res/img/e2e/warning.svg') %>" 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') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('matrix-react-sdk/res/img/format/bold.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('matrix-react-sdk/res/img/format/code.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('matrix-react-sdk/res/img/format/italics.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('matrix-react-sdk/res/img/format/quote.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('matrix-react-sdk/res/img/format/strikethrough.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" 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') %>" 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') %>" aria-hidden alt="" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/bold.svg') %>" 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') %>" 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') %>" 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') %>" 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') %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>

    <audio id="messageAudio">
        <source src="media/message.ogg" type="audio/ogg" />
--- a/src/vector/index.ts
+++ b/src/vector/index.ts
@@ -18,30 +18,41 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-// Require common CSS here; this will make webpack process it into bundle.css.
-// Our own CSS (which is themed) is imported via separate webpack entry points
-// in webpack.config.js
-require('gfm.css/gfm.css');
-require('highlight.js/styles/github.css');
-require('katex/dist/katex.css');
+import { logger } from "matrix-js-sdk/src/logger";

 // These are things that can run before the skin loads - be careful not to reference the react-sdk though.
 import { parseQsFromFragment } from "./url_utils";
 import './modernizr';

+// Require common CSS here; this will make webpack process it into bundle.css.
+// Our own CSS (which is themed) is imported via separate webpack entry points
+// in webpack.config.js
+require('gfm.css/gfm.css');
+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>>) {
    for (const prom of promises) {
        try {
            await prom;
        } catch (e) {
-            console.error(e);
+            logger.error(e);
        }
    }
 }

 function checkBrowserFeatures() {
    if (!window.Modernizr) {
-        console.error("Cannot check features - Modernizr global is missing.");
+        logger.error("Cannot check features - Modernizr global is missing.");
        return false;
    }

@@ -68,14 +79,14 @@ function checkBrowserFeatures() {
    let featureComplete = true;
    for (let i = 0; i < featureList.length; i++) {
        if (window.Modernizr[featureList[i]] === undefined) {
-            console.error(
+            logger.error(
                "Looked for feature '%s' but Modernizr has no results for this. " +
                "Has it been configured correctly?", featureList[i],
            );
            return false;
        }
        if (window.Modernizr[featureList[i]] === false) {
-            console.error("Browser missing feature: '%s'", featureList[i]);
+            logger.error("Browser missing feature: '%s'", featureList[i]);
            // toggle flag rather than return early so we log all missing features rather than just the first.
            featureComplete = false;
        }
@@ -164,13 +175,13 @@ async function start() {
        // ##########################
        if (!acceptBrowser) {
            await new Promise<void>(resolve => {
-                console.error("Browser is missing required features.");
+                logger.error("Browser is missing required features.");
                // take to a different landing page to AWOOOOOGA at the user
                showIncompatibleBrowser(() => {
                    if (window.localStorage) {
                        window.localStorage.setItem('mx_accepts_unsupported_browser', String(true));
                    }
-                    console.log("User accepts the compatibility risks.");
+                    logger.log("User accepts the compatibility risks.");
                    resolve();
                });
            });
@@ -213,7 +224,7 @@ async function start() {
        // run on the components.
        await loadApp(fragparts.params);
    } catch (err) {
-        console.error(err);
+        logger.error(err);
        // Like the compatibility page, AWOOOOOGA at the user
        // This uses the default brand since the app config is unavailable.
        await showError(_t("Your Element is misconfigured"), [
@@ -223,7 +234,7 @@ async function start() {
 }

 start().catch(err => {
-    console.error(err);
+    logger.error(err);
    // show the static error in an iframe to not lose any context / console data
    // with some basic styling to make the iframe full page
    delete document.body.style.height;
--- a/src/vector/init.tsx
+++ b/src/vector/init.tsx
@@ -23,29 +23,29 @@ import olmWasmPath from "@matrix-org/olm/olm.wasm";
 import Olm from '@matrix-org/olm';
 import * as ReactDOM from "react-dom";
 import * as React from "react";
-
 import * as languageHandler from "matrix-react-sdk/src/languageHandler";
 import SettingsStore from "matrix-react-sdk/src/settings/SettingsStore";
-import ElectronPlatform from "./platform/ElectronPlatform";
-import PWAPlatform from "./platform/PWAPlatform";
-import WebPlatform from "./platform/WebPlatform";
 import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
 import { setTheme } from "matrix-react-sdk/src/theme";
+import { logger } from "matrix-js-sdk/src/logger";

+import ElectronPlatform from "./platform/ElectronPlatform";
+import PWAPlatform from "./platform/PWAPlatform";
+import WebPlatform from "./platform/WebPlatform";
 import { initRageshake, initRageshakeStore } from "./rageshakesetup";

 export const rageshakePromise = initRageshake();

 export function preparePlatform() {
    if (window.electron) {
-        console.log("Using Electron platform");
+        logger.log("Using Electron platform");
        PlatformPeg.set(new ElectronPlatform());
    } else if (window.matchMedia('(display-mode: standalone)').matches) {
-        console.log("Using PWA platform");
+        logger.log("Using PWA platform");
        PlatformPeg.set(new PWAPlatform());
    } else {
-        console.log("Using Web platform");
+        logger.log("Using Web platform");
        PlatformPeg.set(new WebPlatform());
    }
 }
@@ -54,7 +54,7 @@ export function setupLogStorage() {
    if (SdkConfig.get().bug_report_endpoint_url) {
        return initRageshakeStore();
    }
-    console.warn("No bug report endpoint set - logs will not be persisted");
+    logger.warn("No bug report endpoint set - logs will not be persisted");
    return Promise.resolve();
 }

@@ -82,9 +82,9 @@ export function loadOlm(): Promise<void> {
    return Olm.init({
        locateFile: () => olmWasmPath,
    }).then(() => {
-        console.log("Using WebAssembly Olm");
+        logger.log("Using WebAssembly Olm");
    }).catch((e) => {
-        console.log("Failed to load Olm: trying legacy version", e);
+        logger.log("Failed to load Olm: trying legacy version", e);
        return new Promise((resolve, reject) => {
            const s = document.createElement('script');
            s.src = 'olm_legacy.js'; // XXX: This should be cache-busted too
@@ -96,9 +96,9 @@ export function loadOlm(): Promise<void> {
            // not 'Olm' which is still the failed wasm version.
            return window.Olm.init();
        }).then(() => {
-            console.log("Using legacy Olm");
+            logger.log("Using legacy Olm");
        }).catch((e) => {
-            console.log("Both WebAssembly and asm.js Olm failed!", e);
+            logger.log("Both WebAssembly and asm.js Olm failed!", e);
        });
    });
 }
@@ -118,14 +118,14 @@ export async function loadLanguage() {
        await languageHandler.setLanguage(langs);
        document.documentElement.setAttribute("lang", languageHandler.getCurrentLanguage());
    } catch (e) {
-        console.error("Unable to set language", e);
+        logger.error("Unable to set language", e);
    }
 }

 export async function loadSkin() {
    // Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference
    // the SDK until we have to in imports.
-    console.log("Loading skin...");
+    logger.log("Loading skin...");
    // load these async so that its code is not executed immediately and we can catch any exceptions
    const [sdk, skin] = await Promise.all([
        import(
@@ -140,7 +140,7 @@ export async function loadSkin() {
            "../component-index"),
    ]);
    sdk.loadSkin(skin);
-    console.log("Skin loaded!");
+    logger.log("Skin loaded!");
 }

 export async function loadTheme() {
--- a/src/vector/jitsi/index.ts
+++ b/src/vector/jitsi/index.ts
@@ -14,9 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-// We have to trick webpack into loading our CSS for us.
-require("./index.scss");
-
 import { KJUR } from 'jsrsasign';
 import {
    IOpenIDCredentials,
@@ -25,6 +22,10 @@ import {
    WidgetApi,
 } from "matrix-widget-api";
 import { ElementWidgetActions } from "matrix-react-sdk/src/stores/widgets/ElementWidgetActions";
+import { logger } from "matrix-js-sdk/src/logger";
+
+// We have to trick webpack into loading our CSS for us.
+require("./index.scss");

 const JITSI_OPENIDTOKEN_JWT_AUTH = 'openidtoken-jwt';

@@ -45,6 +46,7 @@ let jitsiAuth: string;
 let roomId: string;
 let openIdToken: IOpenIDCredentials;
 let roomName: string;
+let startAudioOnly: boolean;

 let widgetApi: WidgetApi;
 let meetApi: any; // JitsiMeetExternalAPI
@@ -94,7 +96,7 @@ let meetApi: any; // JitsiMeetExternalAPI
            ]);
            widgetApi.start();
        } else {
-            console.warn("No parent URL or no widget ID - assuming no widget API is available");
+            logger.warn("No parent URL or no widget ID - assuming no widget API is available");
        }

        // Populate the Jitsi params now
@@ -106,6 +108,7 @@ let meetApi: any; // JitsiMeetExternalAPI
        jitsiAuth = qsParam('auth', true);
        roomId = qsParam('roomId', true);
        roomName = qsParam('roomName', true);
+        startAudioOnly = qsParam('isAudioOnly', true) === "true";

        if (widgetApi) {
            await readyPromise;
@@ -115,7 +118,7 @@ let meetApi: any; // JitsiMeetExternalAPI
            if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
                // Request credentials, give callback to continue when received
                openIdToken = await widgetApi.requestOpenIDConnectToken();
-                console.log("Got OpenID Connect token");
+                logger.log("Got OpenID Connect token");
            }

            // TODO: register widgetApi listeners for PTT controls (https://github.com/vector-im/element-web/issues/12795)
@@ -146,7 +149,7 @@ let meetApi: any; // JitsiMeetExternalAPI

        enableJoinButton(); // always enable the button
    } catch (e) {
-        console.error("Error setting up Jitsi widget", e);
+        logger.error("Error setting up Jitsi widget", e);
        document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
    }
 })();
@@ -206,7 +209,7 @@ function joinConference() { // event handler bound in HTML
    if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
        if (!openIdToken?.access_token) { // eslint-disable-line camelcase
            // We've failing to get a token, don't try to init conference
-            console.warn('Expected to have an OpenID credential, cannot initialize widget.');
+            logger.warn('Expected to have an OpenID credential, cannot initialize widget.');
            document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
            return;
        }
@@ -221,7 +224,7 @@ function joinConference() { // event handler bound in HTML
        widgetApi.setAlwaysOnScreen(true);
    }

-    console.warn(
+    logger.warn(
        "[Jitsi Widget] The next few errors about failing to parse URL parameters are fine if " +
        "they mention 'external_api' or 'jitsi' in the stack. They're just Jitsi Meet trying to parse " +
        "our fragment values and not recognizing the options.",
@@ -237,6 +240,9 @@ function joinConference() { // event handler bound in HTML
            MAIN_TOOLBAR_BUTTONS: [],
            VIDEO_LAYOUT_FIT: "height",
        },
+        configOverwrite: {
+            startAudioOnly,
+        },
        jwt: jwt,
    };

--- a/src/vector/localstorage-fix.ts
+++ b/src/vector/localstorage-fix.ts
@@ -0,0 +1,12 @@
+/**
+ * Because we've been saving a lot of additional logger data in the localStorage for no particular reason
+ * we need to, hopefully, unbrick user's devices by geting rid of unnecessary data.
+ * */
+
+if (window.localStorage) {
+    Object.keys(window.localStorage).forEach(key => {
+        if (key.indexOf('loglevel:') === 0) {
+            window.localStorage.removeItem(key);
+        }
+    });
+}
--- a/src/vector/mobile_guide/index.ts
+++ b/src/vector/mobile_guide/index.ts
@@ -1,3 +1,5 @@
+import { logger } from "matrix-js-sdk/src/logger";
+
 import { getVectorConfig } from '../getconfig';

 function onBackToElementClick(): void {
@@ -76,7 +78,7 @@ async function initPage(): Promise<void> {
                }
            }
        } catch (e) {
-            console.error(e);
+            logger.error(e);
            return renderConfigError("Unable to fetch homeserver configuration");
        }
    }
--- a/src/vector/platform/ElectronPlatform.tsx
+++ b/src/vector/platform/ElectronPlatform.tsx
@@ -52,6 +52,8 @@ import ToastStore from "matrix-react-sdk/src/stores/ToastStore";
 import GenericExpiringToast from "matrix-react-sdk/src/components/views/toasts/GenericExpiringToast";
 import SettingsStore from 'matrix-react-sdk/src/settings/SettingsStore';
 import { IMatrixProfile, IEventWithRoomId as IMatrixEvent, IResultRoomEvents } from "matrix-js-sdk/src/@types/search";
+import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";

 import VectorBasePlatform from './VectorBasePlatform';

@@ -124,12 +126,12 @@ class SeshatIndexManager extends BaseEventIndexManager {

    private onIpcReply = (ev: {}, payload: IPCPayload) => {
        if (payload.id === undefined) {
-            console.warn("Ignoring IPC reply with no ID");
+            logger.warn("Ignoring IPC reply with no ID");
            return;
        }

        if (this.pendingIpcCalls[payload.id] === undefined) {
-            console.warn("Unknown IPC payload ID: " + payload.id);
+            logger.warn("Unknown IPC payload ID: " + payload.id);
            return;
        }

@@ -245,7 +247,7 @@ export default class ElectronPlatform extends VectorBasePlatform {

        // try to flush the rageshake logs to indexeddb before quit.
        electron.on('before-quit', function() {
-            console.log('element-desktop closing');
+            logger.log('element-desktop closing');
            rageshake.flush();
        });

@@ -256,19 +258,27 @@ export default class ElectronPlatform extends VectorBasePlatform {
            dis.fire(Action.ViewUserSettings);
        });

-        electron.on('userDownloadCompleted', (ev, { path, name }) => {
+        electron.on('userDownloadCompleted', (ev, { id, name }) => {
+            const key = `DOWNLOAD_TOAST_${id}`;
+
            const onAccept = () => {
-                electron.send('userDownloadOpen', { path });
+                electron.send('userDownloadAction', { id, open: true });
+                ToastStore.sharedInstance().dismissToast(key);
+            };
+
+            const onDismiss = () => {
+                electron.send('userDownloadAction', { id });
            };

            ToastStore.sharedInstance().addOrReplaceToast({
-                key: `DOWNLOAD_TOAST_${path}`,
+                key,
                title: _t("Download Completed"),
                props: {
                    description: name,
                    acceptLabel: _t("Open"),
                    onAccept,
                    dismissLabel: _t("Dismiss"),
+                    onDismiss,
                    numSeconds: 10,
                },
                component: GenericExpiringToast,
@@ -363,7 +373,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
        return true;
    }

-    displayNotification(title: string, msg: string, avatarUrl: string, room: Room): Notification {
+    displayNotification(title: string, msg: string, avatarUrl: string, room: Room, ev?: MatrixEvent): Notification {
        // GNOME notification spec parses HTML tags for styling...
        // Electron Docs state all supported linux notification systems follow this markup spec
        // https://github.com/electron/electron/blob/master/docs/tutorial/desktop-environment-integration.md#linux
@@ -374,27 +384,24 @@ export default class ElectronPlatform extends VectorBasePlatform {
            msg = msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
        }

-        // Notifications in Electron use the HTML5 notification API
-        const notifBody = {
-            body: msg,
-            silent: true, // we play our own sounds
-        };
-        if (avatarUrl) notifBody['icon'] = avatarUrl;
-        const notification = new window.Notification(title, notifBody);
+        const notification = super.displayNotification(
+            title,
+            msg,
+            avatarUrl,
+            room,
+            ev,
+        );

+        const handler = notification.onclick as Function;
        notification.onclick = () => {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: room.roomId,
-            });
-            window.focus();
+            handler?.();
            this.ipcCall('focusWindow');
        };

        return notification;
    }

-    loudNotification(ev: Event, room: Object) {
+    loudNotification(ev: MatrixEvent, room: Room) {
        electron.send('loudNotification');
    }

@@ -486,10 +493,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
    }

    reload() {
-        // we used to remote to the main process to get it to
-        // reload the webcontents, but in practice this is unnecessary:
-        // the normal way works fine.
-        window.location.reload(false);
+        window.location.reload();
    }

    private async ipcCall(name: string, ...args: any[]): Promise<any> {
@@ -503,12 +507,12 @@ export default class ElectronPlatform extends VectorBasePlatform {

    private onIpcReply = (ev, payload) => {
        if (payload.id === undefined) {
-            console.warn("Ignoring IPC reply with no ID");
+            logger.warn("Ignoring IPC reply with no ID");
            return;
        }

        if (this.pendingIpcCalls[payload.id] === undefined) {
-            console.warn("Unknown IPC payload ID: " + payload.id);
+            logger.warn("Unknown IPC payload ID: " + payload.id);
            return;
        }

@@ -531,8 +535,8 @@ export default class ElectronPlatform extends VectorBasePlatform {

    setSpellCheckLanguages(preferredLangs: string[]) {
        this.ipcCall('setSpellCheckLanguages', preferredLangs).catch(error => {
-            console.log("Failed to send setSpellCheckLanguages IPC to Electron");
-            console.error(error);
+            logger.log("Failed to send setSpellCheckLanguages IPC to Electron");
+            logger.error(error);
        });
    }

@@ -563,6 +567,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
    private navigateForwardBack(back: boolean) {
        this.ipcCall(back ? "navigateBack" : "navigateForward");
    }
+
    private navigateToSpace(num: number) {
        dis.dispatch<SwitchSpacePayload>({
            action: Action.SwitchSpace,
@@ -594,8 +599,9 @@ export default class ElectronPlatform extends VectorBasePlatform {
        if (!handled &&
            // ideally we would use SpaceStore.spacesEnabled here but importing SpaceStore in this platform
            // breaks skinning as the platform is instantiated prior to the skin being loaded
-            SettingsStore.getValue("feature_spaces") &&
+            !SettingsStore.getValue("showCommunitiesInsteadOfSpaces") &&
            ev.code.startsWith("Digit") &&
+            ev.code !== "Digit0" && // this is the shortcut for reset zoom, don't override it
            isOnlyCtrlOrCmdKeyEvent(ev)
        ) {
            const spaceNumber = ev.code.slice(5); // Cut off the first 5 characters - "Digit"
--- a/src/vector/platform/PWAPlatform.ts
+++ b/src/vector/platform/PWAPlatform.ts
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+import { logger } from "matrix-js-sdk/src/logger";
+
 import WebPlatform from "./WebPlatform";

 export default class PWAPlatform extends WebPlatform {
@@ -23,7 +25,7 @@ export default class PWAPlatform extends WebPlatform {
        this.notificationCount = count;

        navigator.setAppBadge(count).catch(e => {
-            console.error("Failed to update PWA app badge", e);
+            logger.error("Failed to update PWA app badge", e);
        });
    }
 }
--- a/src/vector/platform/VectorBasePlatform.ts
+++ b/src/vector/platform/VectorBasePlatform.ts
@@ -19,8 +19,8 @@ limitations under the License.

 import BasePlatform from 'matrix-react-sdk/src/BasePlatform';
 import { _t } from 'matrix-react-sdk/src/languageHandler';
-import { getVectorConfig } from "../getconfig";

+import { getVectorConfig } from "../getconfig";
 import Favicon from "../../favicon";

 /**
--- a/src/vector/platform/WebPlatform.ts
+++ b/src/vector/platform/WebPlatform.ts
@@ -16,23 +16,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import VectorBasePlatform from './VectorBasePlatform';
 import { UpdateCheckStatus } from "matrix-react-sdk/src/BasePlatform";
 import request from 'browser-request';
 import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
 import { _t } from 'matrix-react-sdk/src/languageHandler';
-import { Room } from "matrix-js-sdk/src/models/room";
 import { hideToast as hideUpdateToast, showToast as showUpdateToast } from "matrix-react-sdk/src/toasts/UpdateToast";
 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 VectorBasePlatform from './VectorBasePlatform';

 const POKE_RATE_MS = 10 * 60 * 1000; // 10 min

 export default class WebPlatform extends VectorBasePlatform {
-    private runningVersion: string = null;
-
    constructor() {
        super();
        // Register service worker if available on this platform
@@ -79,35 +77,14 @@ export default class WebPlatform extends VectorBasePlatform {
        });
    }

-    displayNotification(title: string, msg: string, avatarUrl: string, room: Room) {
-        const notifBody = {
-            body: msg,
-            tag: "vector",
-            silent: true, // we play our own sounds
-        };
-        if (avatarUrl) notifBody['icon'] = avatarUrl;
-        const notification = new window.Notification(title, notifBody);
-
-        notification.onclick = function() {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: room.roomId,
-            });
-            window.focus();
-            notification.close();
-        };
-
-        return notification;
-    }
-
-    private getVersion(): Promise<string> {
+    private getMostRecentVersion(): Promise<string> {
        // We add a cachebuster to the request to make sure that we know about
        // the most recent version on the origin server. That might not
        // actually be the version we'd get on a reload (particularly in the
        // presence of intermediate caching proxies), but still: we're trying
        // to tell the user that there is a new version.

-        return new Promise(function(resolve, reject) {
+        return new Promise((resolve, reject) => {
            request(
                {
                    method: "GET",
@@ -121,18 +98,24 @@ export default class WebPlatform extends VectorBasePlatform {
                        return;
                    }

-                    const ver = body.trim();
-                    resolve(ver);
+                    resolve(this.getNormalizedAppVersion(body.trim()));
                },
            );
        });
    }

-    getAppVersion(): Promise<string> {
-        if (this.runningVersion !== null) {
-            return Promise.resolve(this.runningVersion);
+    getNormalizedAppVersion(version: string): string {
+        // if version looks like semver with leading v, strip it
+        // (matches scripts/normalize-version.sh)
+        const semVerRegex = new RegExp("^v[0-9]+.[0-9]+.[0-9]+(-.+)?$");
+        if (semVerRegex.test(version)) {
+            return version.substr(1);
        }
-        return this.getVersion();
+        return version;
+    }
+
+    getAppVersion(): Promise<string> {
+        return Promise.resolve(this.getNormalizedAppVersion(process.env.VERSION));
    }

    startUpdater() {
@@ -145,12 +128,12 @@ export default class WebPlatform extends VectorBasePlatform {
    }

    pollForUpdate = () => {
-        return this.getVersion().then((ver) => {
-            if (this.runningVersion === null) {
-                this.runningVersion = ver;
-            } else if (this.runningVersion !== ver) {
-                if (this.shouldShowUpdate(ver)) {
-                    showUpdateToast(this.runningVersion, ver);
+        return this.getMostRecentVersion().then((mostRecentVersion) => {
+            const currentVersion = this.getNormalizedAppVersion(process.env.VERSION);
+
+            if (currentVersion !== mostRecentVersion) {
+                if (this.shouldShowUpdate(mostRecentVersion)) {
+                    showUpdateToast(currentVersion, mostRecentVersion);
                }
                return { status: UpdateCheckStatus.Ready };
            } else {
@@ -159,7 +142,7 @@ export default class WebPlatform extends VectorBasePlatform {

            return { status: UpdateCheckStatus.NotAvailable };
        }, (err) => {
-            console.error("Failed to poll for update", err);
+            logger.error("Failed to poll for update", err);
            return {
                status: UpdateCheckStatus.Error,
                detail: err.message || err.status ? err.status.toString() : 'Unknown Error',
@@ -178,7 +161,7 @@ export default class WebPlatform extends VectorBasePlatform {
    }

    installUpdate() {
-        window.location.reload(true);
+        window.location.reload();
    }

    getDefaultDeviceDisplayName(): string {
@@ -212,8 +195,6 @@ export default class WebPlatform extends VectorBasePlatform {
    }

    reload() {
-        // forceReload=false since we don't really need new HTML/JS files
-        // we just need to restart the JS runtime.
-        window.location.reload(false);
+        window.location.reload();
    }
 }
--- a/src/vector/rageshakesetup.ts
+++ b/src/vector/rageshakesetup.ts
@@ -29,24 +29,25 @@ limitations under the License.
 import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
 import sendBugReport from "matrix-react-sdk/src/rageshake/submit-rageshake";
+import { logger } from "matrix-js-sdk/src/logger";

 export function initRageshake() {
    // we manually check persistence for rageshakes ourselves
    const prom = rageshake.init(/*setUpPersistence=*/false);
    prom.then(() => {
-        console.log("Initialised rageshake.");
-        console.log("To fix line numbers in Chrome: " +
+        logger.log("Initialised rageshake.");
+        logger.log("To fix line numbers in Chrome: " +
            "Meatball menu → Settings → Ignore list → Add /rageshake\\.js$");

        window.addEventListener('beforeunload', (e) => {
-            console.log('element-web closing');
+            logger.log('element-web closing');
            // try to flush the logs to indexeddb
            rageshake.flush();
        });

        rageshake.cleanup();
    }, (err) => {
-        console.error("Failed to initialise rageshake: " + err);
+        logger.error("Failed to initialise rageshake: " + err);
    });
    return prom;
 }
@@ -58,22 +59,22 @@ export function initRageshakeStore() {
 window.mxSendRageshake = function(text: string, withLogs?: boolean) {
    const url = SdkConfig.get().bug_report_endpoint_url;
    if (!url) {
-        console.error("Cannot send a rageshake - no bug_report_endpoint_url configured");
+        logger.error("Cannot send a rageshake - no bug_report_endpoint_url configured");
        return;
    }

    if (withLogs === undefined) withLogs = true;
    if (!text || !text.trim()) {
-        console.error("Cannot send a rageshake without a message - please tell us what went wrong");
+        logger.error("Cannot send a rageshake without a message - please tell us what went wrong");
        return;
    }
    sendBugReport(url, {
        userText: text,
        sendLogs: withLogs,
-        progressCallback: console.log.bind(console),
+        progressCallback: logger.log.bind(console),
    }).then(() => {
-        console.log("Bug report sent!");
+        logger.log("Bug report sent!");
    }, (err) => {
-        console.error(err);
+        logger.error(err);
    });
 };
--- a/test/app-tests/joining-test.tsx
+++ b/test/app-tests/joining-test.tsx
@@ -31,12 +31,12 @@ import {sleep} from "../test-utils";
 import * as test_utils from "../test-utils";
 import MockHttpBackend from "matrix-mock-request";
 import "fake-indexeddb/auto";
+import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/structures/RoomView';


 const MatrixChat = sdk.getComponent('structures.MatrixChat');
 const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
 const RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');
-const RoomView = sdk.getComponent('structures.RoomView');

 const HS_URL='http://localhost';
 const IS_URL='http://localhost';
@@ -50,7 +50,6 @@ describe('joining a room', function() {
        let matrixChat;

        beforeEach(function() {
-            test_utils.beforeEach(this);
            httpBackend = new MockHttpBackend();
            jssdk.request(httpBackend.requestFn);
            parentDiv = document.createElement('div');
@@ -78,6 +77,7 @@ describe('joining a room', function() {
            const ROOM_ALIAS = '#alias:localhost';
            const ROOM_ID = '!id:localhost';

+            httpBackend.when('GET', '/capabilities').respond(200, { capabilities : {} });
            httpBackend.when('GET', '/pushrules').respond(200, {});
            httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });

@@ -148,7 +148,7 @@ describe('joining a room', function() {

                // enter an alias in the input, and simulate enter
                const input = ReactTestUtils.findRenderedDOMComponentWithTag(
-                    roomDir, 'input');
+                    roomDir, 'input') as HTMLInputElement;
                input.value = ROOM_ALIAS;
                ReactTestUtils.Simulate.change(input);
                ReactTestUtils.Simulate.keyUp(input, {key: 'Enter'});
@@ -165,7 +165,7 @@ describe('joining a room', function() {

                // we should now have a roomview
                roomView = ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, RoomView);
+                    matrixChat, RoomViewClass);

                // the preview bar may take a tick to be displayed
                return sleep(1);
@@ -228,7 +228,7 @@ describe('joining a room', function() {
                return httpBackend.flush();
            }).then(() => {
                // now the room should have loaded
-                expect(roomView.state.room).toExist();
+                expect(roomView.state.room).toBeTruthy();
            });
        });
    });
--- a/test/app-tests/loading-test.tsx
+++ b/test/app-tests/loading-test.tsx
@@ -39,6 +39,8 @@ import {sleep} from "../test-utils";
 import "fake-indexeddb/auto";
 import {cleanLocalstorage} from "../test-utils";
 import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
+import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/structures/RoomView';
+import LoginComponent from 'matrix-react-sdk/src/components/structures/auth/Login';

 const DEFAULT_HS_URL='http://my_server';
 const DEFAULT_IS_URL='http://my_is';
@@ -94,7 +96,7 @@ describe('loading:', function() {
     * TODO: it would be nice to factor some of this stuff out of index.js so
     * that we can test it rather than our own implementation of it.
     */
-    function loadApp(opts) {
+    function loadApp(opts?) {
        opts = opts || {};
        const queryString = opts.queryString || "";
        const uriFragment = opts.uriFragment || "";
@@ -164,7 +166,7 @@ describe('loading:', function() {
    // http requests until we do.
    //
    // returns a promise resolving to the received request
-    async function expectAndAwaitSync(opts) {
+    async function expectAndAwaitSync(opts?) {
        let syncRequest = null;
        const isGuest = opts && opts.isGuest;
        if (!isGuest) {
@@ -311,6 +313,7 @@ describe('loading:', function() {
        });

        it('shows the last known room by default', function() {
+            httpBackend.when('GET', '/capabilities').respond(200, { capabilities: {} });
            httpBackend.when('GET', '/pushrules').respond(200, {});

            loadApp();
@@ -330,6 +333,7 @@ describe('loading:', function() {
        it('shows a home page by default if we have no joined rooms', function() {
            localStorage.removeItem("mx_last_room_id");

+            httpBackend.when('GET', '/capabilities').respond(200, { capabilities : {} });
            httpBackend.when('GET', '/pushrules').respond(200, {});

            loadApp();
@@ -347,6 +351,7 @@ describe('loading:', function() {
        });

        it('shows a room view if we followed a room link', function() {
+            httpBackend.when('GET', '/capabilities').respond(200, { capabilities : {} });
            httpBackend.when('GET', '/pushrules').respond(200, {});

            loadApp({
@@ -633,7 +638,7 @@ describe('loading:', function() {
    async function completeLogin(matrixChat) {
        // we expect a single <Login> component
        const login = ReactTestUtils.findRenderedComponentWithType(
-            matrixChat, sdk.getComponent('structures.auth.Login'));
+            matrixChat, LoginComponent);

        // When we switch to the login component, it'll hit the login endpoint
        // for proof of life and to get flows. We'll only give it one option.
@@ -661,6 +666,7 @@ describe('loading:', function() {
            // Wait for another trip around the event loop for the UI to update
            return sleep(1);
        }).then(() => {
+            httpBackend.when('GET', '/capabilities').respond(200, { capabilities : {} });
            httpBackend.when('GET', '/pushrules').respond(200, {});
            return expectAndAwaitSync().catch((e) => {
                throw new Error("Never got /sync after login: did the client start?");
@@ -673,7 +679,7 @@ describe('loading:', function() {

 // assert that we are on the loading page
 function assertAtLoadingSpinner(matrixChat) {
-    const domComponent = ReactDOM.findDOMNode(matrixChat);
+    const domComponent = ReactDOM.findDOMNode(matrixChat) as Element;
    expect(domComponent.className).toEqual("mx_MatrixChat_splash");

    // just the spinner
@@ -691,14 +697,14 @@ function awaitLoggedIn(matrixChat) {
            }
            console.log(Date.now() + ": Received on_logged_in action");
            dis.unregister(dispatcherRef);
-            resolve();
+            resolve(undefined);
        };
        const dispatcherRef = dis.register(onAction);
        console.log(Date.now() + ": Waiting for on_logged_in action");
    });
 }

-function awaitRoomView(matrixChat, retryLimit, retryCount) {
+function awaitRoomView(matrixChat, retryLimit?, retryCount?) {
    if (retryLimit === undefined) {
        retryLimit = 5;
    }
@@ -721,17 +727,17 @@ function awaitRoomView(matrixChat, retryLimit, retryCount) {

    // state looks good, check the rendered output
    ReactTestUtils.findRenderedComponentWithType(
-        matrixChat, sdk.getComponent('structures.RoomView'));
+        matrixChat, RoomViewClass);
    return Promise.resolve();
 }

-function awaitLoginComponent(matrixChat, attempts) {
+function awaitLoginComponent(matrixChat, attempts?) {
    return MatrixReactTestUtils.waitForRenderedComponentWithType(
        matrixChat, sdk.getComponent('structures.auth.Login'), attempts,
    );
 }

-function awaitWelcomeComponent(matrixChat, attempts) {
+function awaitWelcomeComponent(matrixChat, attempts?) {
    return MatrixReactTestUtils.waitForRenderedComponentWithType(
        matrixChat, sdk.getComponent('auth.Welcome'), attempts,
    );
--- a/test/jest-mocks.js
+++ b/test/jest-mocks.js
@@ -12,3 +12,6 @@ Object.defineProperty(window, 'matchMedia', {
        dispatchEvent: jest.fn(),
    })),
 });
+
+// maplibre requires a createObjectURL mock
+global.URL.createObjectURL = jest.fn();
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,11 +12,6 @@
    "outDir": "./lib",
    "declaration": true,
    "jsx": "react",
-    "types": [
-      "node",
-      "react",
-      "flux"
-    ],
    "lib": [
      "es2019",
      "dom",
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,42 +1,73 @@
 /* eslint-disable quote-props */

+const dotenv = require('dotenv');
 const path = require('path');
+const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const SentryCliPlugin = require("@sentry/webpack-plugin");

+dotenv.config();
 let ogImageUrl = process.env.RIOT_OG_IMAGE_URL;
 if (!ogImageUrl) ogImageUrl = 'https://app.element.io/themes/element/img/logos/opengraph.png';

-const additionalPlugins = [
-    // This is where you can put your customisation replacements.
-];
+if (!process.env.VERSION) {
+    console.warn("Unset VERSION variable - this may affect build output");
+    process.env.VERSION = "!!UNSET!!";
+}
+
+const cssThemes = {
+    // CSS themes
+    "theme-legacy-light": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.scss",
+    "theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.scss",
+    "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
+    "theme-light-high-contrast":
+        "./node_modules/matrix-react-sdk/res/themes/light-high-contrast/css/light-high-contrast.scss",
+    "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
+    "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
+    "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
+};
+
+function getActiveThemes() {
+    // Default to `light` theme when the MATRIX_THEMES environment variable is not defined.
+    const theme = process.env.MATRIX_THEMES ?? 'light';
+    const themes = theme.split(',').filter(x => x).map(x => x.trim()).filter(x => x);
+    return themes;
+}

 module.exports = (env, argv) => {
-    let nodeEnv = argv.mode;
-    if (process.env.CI_PACKAGE) {
-        // Don't run minification for CI builds (this is only set for runs on develop)
-        // We override this via environment variable to avoid duplicating the scripts
-        // in `package.json` just for a different mode.
-        argv.mode = "development";
-
-        // More and more people are using nightly build as their main client
-        // Libraries like React have a development build that is useful
-        // when working on the app but adds significant runtime overhead
-        // We want to use the React production build but not compile the whole
-        // application to productions standards
-        nodeEnv = "production";
-    }
+    // Establish settings based on the environment and args.
+    //
+    // argv.mode is always set to "production" by yarn build
+    //      (called to build prod, nightly and develop.element.io)
+    // arg.mode is set to "delopment" by yarn start
+    //      (called by developers, runs the continuous reload script)
+    // process.env.CI_PACKAGE is set when yarn build is called from scripts/ci_package.sh
+    //      (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 fullPageErrors = process.env.FULL_PAGE_ERRORS === '1' && devMode;
+    const enableMinification = !devMode && !process.env.CI_PACKAGE;

    const development = {};
-    if (argv.mode === "production") {
-        development['devtool'] = 'nosources-source-map';
+    if (devMode) {
+        // High quality, embedded source maps for dev builds
+        development['devtool'] = "eval-source-map";
    } else {
-        // This makes the sourcemaps human readable for developers. We use eval-source-map
-        // because the plain source-map devtool ruins the alignment.
-        development['devtool'] = 'eval-source-map';
+        if (process.env.CI_PACKAGE) {
+            // High quality source maps in separate .map files which include the source. This doesn't bulk up the .js
+            // payload file size, which is nice for performance but also necessary to get the bundle to a small enough
+            // size that sentry will accept the upload.
+            development['devtool'] = 'source-map';
+        } else {
+            // High quality source maps in separate .map files which don't include the source
+            development['devtool'] = 'nosources-source-map';
+        }
    }

    // Resolve the directories for the react-sdk and js-sdk for later use. We resolve these early so we
@@ -45,9 +76,22 @@ 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, index) => {
+            const themeImportPath = cssThemes[`theme-${ t }`].replace('./node_modules/', '');
+            return themeImportPath;
+        });
+        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,
-
        node: {
            // Mock out the NodeFS module: The opus decoder imports this wrongly.
            fs: 'empty',
@@ -57,16 +101,8 @@ module.exports = (env, argv) => {
            "bundle": "./src/vector/index.ts",
            "mobileguide": "./src/vector/mobile_guide/index.ts",
            "jitsi": "./src/vector/jitsi/index.ts",
-            "usercontent": "./node_modules/matrix-react-sdk/src/usercontent/index.js",
-            "recorder-worklet": "./node_modules/matrix-react-sdk/src/audio/RecorderWorklet.ts",
-
-            // CSS themes
-            "theme-legacy": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.scss",
-            "theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.scss",
-            "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
-            "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
-            "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
-            "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
+            "usercontent": "./node_modules/matrix-react-sdk/src/usercontent/index.ts",
+            ...(useHMR ? {} : cssThemes),
        },

        optimization: {
@@ -93,8 +129,8 @@ module.exports = (env, argv) => {

            // Minification is normally enabled by default for webpack in production mode, but
            // we use a CSS optimizer too and need to manage it ourselves.
-            minimize: argv.mode === 'production',
-            minimizer: argv.mode === 'production' ? [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})] : [],
+            minimize: enableMinification,
+            minimizer: enableMinification ? [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})] : [],

            // Set the value of `process.env.NODE_ENV` for libraries like React
            // See also https://v4.webpack.js.org/configuration/optimization/#optimizationnodeenv
@@ -150,6 +186,14 @@ module.exports = (env, argv) => {
                /olm[\\/](javascript[\\/])?olm\.js$/,
            ],
            rules: [
+                useHMR && {
+                    test: /devcss\.ts$/,
+                    loader: 'string-replace-loader',
+                    options: {
+                        search: '"use theming";',
+                        replace: getThemesImports(),
+                    },
+                },
                {
                    test: /\.worker\.ts$/,
                    loader: "worker-loader",
@@ -176,6 +220,9 @@ module.exports = (env, argv) => {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
+                        plugins: [
+                            useHMR && require.resolve('react-refresh/babel'),
+                        ].filter(Boolean),
                    },
                },
                {
@@ -219,7 +266,7 @@ module.exports = (env, argv) => {

                                    // It's important that this plugin is last otherwise we end
                                    // up with broken CSS.
-                                    require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}),
+                                    require('postcss-preset-env')({ stage: 3, browsers: 'last 2 versions' }),
                                ],
                                parser: "postcss-scss",
                                "local-plugins": true,
@@ -230,7 +277,40 @@ module.exports = (env, argv) => {
                {
                    test: /\.scss$/,
                    use: [
-                        MiniCssExtractPlugin.loader,
+                        /**
+                         * This code is hopeful that no .scss 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: {
@@ -257,7 +337,7 @@ module.exports = (env, argv) => {

                                    // It's important that this plugin is last otherwise we end
                                    // up with broken CSS.
-                                    require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}),
+                                    require('postcss-preset-env')({ stage: 3, browsers: 'last 2 versions' }),
                                ],
                                parser: "postcss-scss",
                                "local-plugins": true,
@@ -286,6 +366,26 @@ module.exports = (env, argv) => {
                        outputPath: '.',
                    },
                },
+                {
+                    // Special case the recorder worklet as it can't end up HMR'd, but the worker-loader
+                    // isn't good enough for us. Note that the worklet-loader is listed as "do not use",
+                    // however it seems to work fine for our purposes.
+                    test: /RecorderWorklet\.ts$/,
+                    type: "javascript/auto",
+                    use: [ // executed last -> first, for some reason.
+                        {
+                            loader: "worklet-loader",
+                            options: {
+                                // Override name so we know what it is in the output.
+                                name: 'recorder-worklet.[hash:7].js',
+                            },
+                        },
+                        {
+                            // TS -> JS because the worklet-loader won't do this for us.
+                            loader: "babel-loader",
+                        },
+                    ],
+                },
                {
                    // This is from the same place as the encoderWorker above, but only needed
                    // for Safari support.
@@ -370,13 +470,14 @@ module.exports = (env, argv) => {
                        },
                    ],
                },
-            ],
+            ].filter(Boolean),
        },

        plugins: [
            // This exports our CSS using the splitChunks and loaders above.
            new MiniCssExtractPlugin({
-                filename: 'bundles/[hash]/[name].css',
+                filename: useHMR ? "bundles/[name].css" : "bundles/[hash]/[name].css",
+                chunkFilename: useHMR ? "bundles/[name].css" : "bundles/[hash]/[name].css",
                ignoreOrder: false, // Enable to remove warnings about conflicting order
            }),

@@ -436,9 +537,16 @@ module.exports = (env, argv) => {
            new HtmlWebpackInjectPreload({
                files: [{ match: /.*Inter.*\.woff2$/ }],
            }),
+            useHMR && new ReactRefreshWebpackPlugin(fullPageErrors ? undefined : { overlay: { entry: false } }),

-            ...additionalPlugins,
-        ],
+            // upload to sentry if sentry env is present
+            process.env.SENTRY_DSN &&
+                new SentryCliPlugin({
+                    release: process.env.VERSION,
+                    include: "./webapp/bundles",
+                }),
+            new webpack.EnvironmentPlugin(['VERSION']),
+        ].filter(Boolean),

        output: {
            path: path.join(__dirname, "webapp"),
@@ -457,17 +565,15 @@ module.exports = (env, argv) => {
        // configuration for the webpack-dev-server
        devServer: {
            // serve unwebpacked assets from webapp.
-            contentBase: './webapp',
+            contentBase: [
+                './webapp',
+            ],

            // Only output errors, warnings, or new compilations.
            // This hides the massive list of modules.
            stats: 'minimal',
-
-            // hot module replacement doesn't work (I think we'd need react-hot-reload?)
-            // so webpack-dev-server reloads the page on every update which is quite
-            // tedious in Riot since that can take a while.
-            hot: false,
-            inline: false,
+            hotOnly: true,
+            inline: true,
        },
    };
 };
--- a/yarn.lock
+++ b/yarn.lock