v1.8.2-rc.1

Translations update from Weblate

.env.example

@@ -1,14 +1,13 @@
-# If you want to have proper hot-reload css experience, define one and set this on.
+# To enable CSS hot-reload, set the following variable to 1.
 CSS_HOT_RELOAD=1
-# Define which one theme you want to load for hot-reload purposes.
-# To use a single theme just uncomment a line with the theme you want to use.
+# To use a single theme, uncomment the line with the theme you want to hot-reload.
 MATRIX_THEMES='light'
 #MATRIX_THEMES='dark'
 #MATRIX_THEMES='light-legacy'
 #MATRIX_THEMES='dark-legacy'
 #MATRIX_THEMES='light-custom'
 #MATRIX_THEMES='dark-custom'
-# You can load multiple themes at once, but switching between them may require full page reload.
-# It will also multiple compliation times by the number of turned on themes.
-# If you want to use multiple themes, define the combinations manually like below:
+# You can also enable multiple themes by using a comma-separated list.
+# When multiple themes are enabled, switching between them may require a full page reload.
+# Note that compilation times are proportional to the number of enabled themes.
 #MATRIX_THEMES='light,dark'

.github/ISSUE_TEMPLATE/bug-desktop.yml

@@ -57,3 +57,14 @@ body:
       placeholder: e.g. From https://element.io/get-started
     validations:
       required: false
+  - type: dropdown
+    id: rageshake
+    attributes:
+      label: Have you submitted a rageshake?
+      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 entry area followed by a description of the problem and send the command. This will automatically submit anonymous logs to the developers.
+      options:
+        - 'Yes'
+        - 'No'
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/bug-web.yml

@@ -57,3 +57,14 @@ body:
       placeholder: e.g. develop.element.io, app.element.io
     validations:
       required: false
+  - type: dropdown
+    id: rageshake
+    attributes:
+      label: Have you submitted a rageshake?
+      description:  |
+        Did you know that you can send a /rageshake command from the web applicaiton to submit logs for this issue? Trigger the defect, then type /rageshake into the message entry area followed by a description of the problem and send the command. This will automatically submit anonymous logs to the developers.
+      options:
+        - 'Yes'
+        - 'No'
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/enhancement.yml

@@ -15,7 +15,7 @@ body:
       value: |
         #### What would you like to do?
 
-        #### Why would you like to it?
+        #### Why would you like to do it?
 
         #### How would you like to achieve it?
     validations:

.github/workflows/issues_to_projects.yaml

@@ -2,9 +2,16 @@ on:
     issues:
         types: [labeled]
 jobs:
-    move_issues:
-        name: Move issues to project board
+    move_priority_design_issues:
+        name: Move priority X-Needs-Design issues to Design project board
         runs-on: ubuntu-latest
+        if: >
+            contains(github.event.issue.labels.*.name, 'X-Needs-Design') &&
+             (contains(github.event.issue.labels.*.name, 'O-Frequent') ||
+              contains(github.event.issue.labels.*.name, 'O-Intermediate')) &&
+             (contains(github.event.issue.labels.*.name, 'S-Critical') ||
+              contains(github.event.issue.labels.*.name, 'S-Major') ||
+              contains(github.event.issue.labels.*.name, 'S-Minor'))
         steps:
              - uses: konradpabjan/move-labeled-or-milestoned-issue@v2.0
                with:

.github/workflows/triage-priority-bugs.yml

@@ -0,0 +1,25 @@
+name: Move labelled issues into the Priority bugs column for the Web App Team
+
+on:
+  issues:
+    types: [labeled]
+
+jobs:
+  Move_high_priority_issues_to_team_workboard:
+    runs-on: ubuntu-latest
+    if: >
+        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-Intermediate')) ||
+        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@v0.8.1
+        with:
+          project: Web App Team
+          column: Priority bugs
+          repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+

CHANGELOG.md

@@ -1,3 +1,46 @@
+Changes in [1.8.2-rc.1](https://github.com/vector-im/element-desktop/releases/tag/v1.8.2-rc.1) (2021-08-24)
+===========================================================================================================
+
+## ✨ Features
+ * Documentation for sentry config ([\#18608](https://github.com/vector-im/element-web/pull/18608)). Contributed by [novocaine](https://github.com/novocaine).
+ * Add a warning on E2EE rooms if you try to make them public ([\#5698](https://github.com/matrix-org/matrix-react-sdk/pull/5698)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Allow pagination of the space hierarchy and use new APIs ([\#6507](https://github.com/matrix-org/matrix-react-sdk/pull/6507)). Fixes #18089 and #18427.
+ * Improve emoji in composer ([\#6650](https://github.com/matrix-org/matrix-react-sdk/pull/6650)). Fixes #18593 and #18593. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Allow playback of replied-to voice message ([\#6629](https://github.com/matrix-org/matrix-react-sdk/pull/6629)). Fixes #18599 and #18599. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Format autocomplete suggestions vertically ([\#6620](https://github.com/matrix-org/matrix-react-sdk/pull/6620)). Fixes #17574 and #17574. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Remember last `MemberList` search query per-room ([\#6640](https://github.com/matrix-org/matrix-react-sdk/pull/6640)). Fixes #18613 and #18613. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Sentry rageshakes ([\#6597](https://github.com/matrix-org/matrix-react-sdk/pull/6597)). Fixes #11111 and #11111. Contributed by [novocaine](https://github.com/novocaine).
+ * Autocomplete has been updated to match modern accessibility standards. Navigate via up/down arrows rather than Tab. Enter or Tab to confirm a suggestion. This should be familiar to Slack & Discord users. You can now use Tab to navigate around the application and do more without touching your mouse. No more accidentally sending half of people's names because the completion didn't fire on Enter! ([\#5659](https://github.com/matrix-org/matrix-react-sdk/pull/5659)). Fixes #4872, #11071, #17171, #15646 #4872 and #4872.
+ * Add new call tile states ([\#6610](https://github.com/matrix-org/matrix-react-sdk/pull/6610)). Fixes #18521 and #18521. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Left align call tiles ([\#6609](https://github.com/matrix-org/matrix-react-sdk/pull/6609)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Make loading encrypted images look snappier ([\#6590](https://github.com/matrix-org/matrix-react-sdk/pull/6590)). Fixes #17878 and #17862. Contributed by [Palid](https://github.com/Palid).
+ * Offer a way to create a space based on existing community ([\#6543](https://github.com/matrix-org/matrix-react-sdk/pull/6543)). Fixes #18092.
+ * Accessibility improvements in and around Spaces ([\#6569](https://github.com/matrix-org/matrix-react-sdk/pull/6569)). Fixes #18094 and #18094.
+
+## 🐛 Bug Fixes
+ * Fix images not rendering when sent from other clients. ([\#6661](https://github.com/matrix-org/matrix-react-sdk/pull/6661)). Fixes #18702 and #18702.
+ * Fix autocomplete scrollbar and make the autocomplete a little smaller ([\#6655](https://github.com/matrix-org/matrix-react-sdk/pull/6655)). Fixes #18682 and #18682. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix replies on the bubble layout ([\#6451](https://github.com/matrix-org/matrix-react-sdk/pull/6451)). Fixes #18184. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Show "Enable encryption in settings" only when the user can do that ([\#6646](https://github.com/matrix-org/matrix-react-sdk/pull/6646)). Fixes #18646 and #18646. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix cross signing setup from settings screen ([\#6633](https://github.com/matrix-org/matrix-react-sdk/pull/6633)). Fixes #17761 and #17761.
+ * Fix call tiles on the bubble layout ([\#6647](https://github.com/matrix-org/matrix-react-sdk/pull/6647)). Fixes #18648 and #18648. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix error on accessing encrypted media without encryption keys ([\#6625](https://github.com/matrix-org/matrix-react-sdk/pull/6625)). Contributed by [Palid](https://github.com/Palid).
+ * Fix jitsi widget sometimes being permanently stuck in the bottom-right corner ([\#6632](https://github.com/matrix-org/matrix-react-sdk/pull/6632)). Fixes #17226 and #17226. Contributed by [Palid](https://github.com/Palid).
+ * Fix FilePanel pagination in E2EE rooms ([\#6630](https://github.com/matrix-org/matrix-react-sdk/pull/6630)). Fixes #18415 and #18415. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix call tile buttons ([\#6624](https://github.com/matrix-org/matrix-react-sdk/pull/6624)). Fixes #18565 and #18565. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix vertical call tile spacing issues ([\#6621](https://github.com/matrix-org/matrix-react-sdk/pull/6621)). Fixes #18558 and #18558. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix long display names in call tiles ([\#6618](https://github.com/matrix-org/matrix-react-sdk/pull/6618)). Fixes #18562 and #18562. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Avoid access token overflow ([\#6616](https://github.com/matrix-org/matrix-react-sdk/pull/6616)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Properly handle media errors  ([\#6615](https://github.com/matrix-org/matrix-react-sdk/pull/6615)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix glare related regressions ([\#6614](https://github.com/matrix-org/matrix-react-sdk/pull/6614)). Fixes #18538 and #18538. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix long display names in call toasts ([\#6617](https://github.com/matrix-org/matrix-react-sdk/pull/6617)). Fixes #18557 and #18557. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix PiP of held calls ([\#6611](https://github.com/matrix-org/matrix-react-sdk/pull/6611)). Fixes #18539 and #18539. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix call tile behaviour on narrow layouts ([\#6556](https://github.com/matrix-org/matrix-react-sdk/pull/6556)). Fixes #18398. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix video call persisting when widget removed ([\#6608](https://github.com/matrix-org/matrix-react-sdk/pull/6608)). Fixes #15703 and #15703.
+ * Fix toast colors ([\#6606](https://github.com/matrix-org/matrix-react-sdk/pull/6606)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Remove tiny scrollbar dot from code blocks ([\#6596](https://github.com/matrix-org/matrix-react-sdk/pull/6596)). Fixes #18474. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Improve handling of pills in the composer ([\#6353](https://github.com/matrix-org/matrix-react-sdk/pull/6353)). Fixes #10134 #10896 and #15037. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+
 Changes in [1.8.1](https://github.com/vector-im/element-desktop/releases/tag/v1.8.1) (2021-08-17)
 =================================================================================================
 

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).

README.md

@@ -122,7 +122,7 @@ 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`.
@@ -267,9 +267,9 @@ 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 currently an opt-in development feature, and if you want to have
-it working properly on your environment, create a `.env` file in this repository
-with proper environmental, see `.env.example` for documentation and example.
+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
 ============================
@@ -401,83 +401,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-web/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. __Prevalence__ — All issues labeled `T-Defect` are also assigned a prevalence:
-   * __[P-High](https://github.com/vector-im/element-web/labels/P-High):__ Affects most users regularly or impacts most users' first experience (e.g. registration) 
-   * __[P-Medium](https://github.com/vector-im/element-web/labels/P-Medium):__ Affects some users regularly or most users rarely
-   * __[P-Low](https://github.com/vector-im/element-web/labels/P-Low):__ Most users are unlikely to come across this or it is a corner case
- 
-   This label may also be used for other types of issues.
-
-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.
-
-The Priority label is now deprecated. Defects will now be classed based on their severity and prevalence:
-| Labels    | Equivalent priority | What it means |
-| ----------- | ----------- | ----------- |
-| S‑Critical and P‑High<br />S‑Critical and P‑Medium<br />S‑Major and P‑High | P1        | These issues should be worked on in this sprint or next sprint. If the backlog of issues is too long, we should reevaluate why the bugs are not caught earlier. |
-| S‑Critical and P‑Low<br />S‑Major and P‑Medium<br />S‑Minor and P‑High     | P2        | When all the highest priority bugs are done, this is the next set to tackle. Ideally we should be fixing a few issues from this group every week. |
-| S‑Major and P‑Low<br />S‑Minor and P‑Medium<br />S‑Tolerable and P‑High    | P3        | These issues are wishful thinking for now. We hope to get to them one day, but they are low priority. There are likely to be some good new contributor issues in here. |
-| S‑Minor and P‑Low<br />S‑Tolerable&nbsp;and&nbsp;P‑Medium<br />S‑Minor and P‑Low     | P4 and P5 | These issues are unlikely to be actively looked at by the webapp team, but may be picked up by community. |
-
-
-### 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-web/wiki/Issue-labelling) to sort all incoming issues.

docs/config.md

@@ -139,6 +139,9 @@ For a good example, see https://develop.element.io/config.json.
 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
 
 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

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-web",
-  "version": "1.8.1",
+  "version": "1.8.2-rc.1",
   "description": "A feature-rich client for Matrix.org",
   "author": "New Vector Ltd.",
   "repository": {
@@ -61,8 +61,8 @@
     "highlight.js": "^10.5.0",
     "jsrsasign": "^10.2.0",
     "katex": "^0.12.0",
-    "matrix-js-sdk": "12.3.1",
-    "matrix-react-sdk": "3.28.1",
+    "matrix-js-sdk": "12.4.0-rc.1",
+    "matrix-react-sdk": "3.29.0-rc.1",
     "matrix-widget-api": "^0.1.0-beta.15",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
@@ -88,6 +88,7 @@
     "@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",
     "@types/flux": "^3.1.9",
     "@types/modernizr": "^3.5.3",
@@ -140,6 +141,7 @@
     "postcss-scss": "^2.1.1",
     "postcss-simple-vars": "^5.0.2",
     "postcss-strip-inline-comments": "^0.1.5",
+    "react-refresh": "^0.10.0",
     "rimraf": "^3.0.2",
     "shell-escape": "^0.2.0",
     "simple-proxy-agent": "^1.1.0",

src/i18n/strings/ar.json

@@ -32,5 +32,6 @@
     "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 على المحمول"
 }

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

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

src/i18n/strings/nl.json

@@ -7,7 +7,7 @@
     "Decentralised, encrypted chat & collaboration powered by [matrix]": "Gedecentraliseerd en versleuteld chatten & samenwerken dankzij [matrix]",
     "Sign In": "Inloggen",
     "Create Account": "Registreren",
-    "Explore rooms": "Kamers ontdekken",
+    "Explore rooms": "Kamersgids",
     "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.",

src/vector/app.tsx

@@ -38,6 +38,8 @@ import { createClient } from "matrix-js-sdk/src/matrix";
 
 let lastLocationHashSet: string = null;
 
+console.log(`Application is running in ${process.env.NODE_ENV} mode`);
+
 // Parse the given window.location and return parameters that can be used when calling
 // MatrixChat.showScreen(screen, params)
 function getScreenFromLocation(location: Location) {

src/vector/devcss.ts

@@ -15,15 +15,16 @@ limitations under the License.
 */
 
 /**
- * This code will be autoremoved on production builds.
- * The purpose of this code is that the webpack's `string-replace-loader`
- * pretty much search for this string in this specific file and replaces it
- * like a macro before any previous compilations, which allows us to inject
- * some css requires statements that are specific to the themes we have turned
- * on by ourselves. Without that very specific workaround, webpack would just
- * import all the CSSes, which would make the whole thing useless, as on my
- * machine with i9 the recompilation for all themes turned ou would take way
- * over 30s, which is definitely too high for nice css reloads speed.
+ * 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)
  */

src/vector/index.ts

@@ -26,9 +26,9 @@ require('highlight.js/styles/github.css');
 require('katex/dist/katex.css');
 
 /**
- * This require is necessary only for purposes of CSS hot reload, as otherwise
- * webpack has some incredibly problems figuring out which css files should be
- * hot reloaded, even with proper hints for the loader.
+ * 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.
  */

webpack.config.js

@@ -8,6 +8,7 @@ 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');
 
 dotenv.config();
 let ogImageUrl = process.env.RIOT_OG_IMAGE_URL;
@@ -24,8 +25,8 @@ const cssThemes = {
 };
 
 function getActiveThemes() {
-    // We want to use `light` theme by default if it's not defined.
-    const theme = process.env.MATRIX_THEMES ?? 'dark';
+    // 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;
 }
@@ -46,7 +47,7 @@ module.exports = (env, argv) => {
         nodeEnv = "production";
     }
     const devMode = nodeEnv !== 'production';
-    const useCssHotReload = process.env.CSS_HOT_RELOAD === '1' && devMode;
+    const useHMR = process.env.CSS_HOT_RELOAD === '1' && devMode;
 
     const development = {};
     if (argv.mode === "production") {
@@ -89,7 +90,7 @@ module.exports = (env, argv) => {
             "mobileguide": "./src/vector/mobile_guide/index.ts",
             "jitsi": "./src/vector/jitsi/index.ts",
             "usercontent": "./node_modules/matrix-react-sdk/src/usercontent/index.js",
-            ...(useCssHotReload ? {} : cssThemes),
+            ...(useHMR ? {} : cssThemes),
         },
 
         optimization: {
@@ -173,7 +174,7 @@ module.exports = (env, argv) => {
                 /olm[\\/](javascript[\\/])?olm\.js$/,
             ],
             rules: [
-                useCssHotReload && {
+                useHMR && {
                     test: /devcss\.ts$/,
                     loader: 'string-replace-loader',
                     options: {
@@ -207,6 +208,9 @@ module.exports = (env, argv) => {
                     loader: 'babel-loader',
                     options: {
                         cacheDirectory: true,
+                        plugins: [
+                            useHMR && require.resolve('react-refresh/babel'),
+                        ].filter(Boolean),
                     },
                 },
                 {
@@ -266,7 +270,7 @@ module.exports = (env, argv) => {
                          * of the JS/TS files.
                          * Should be MUCH better with webpack 5, but we're stuck to this solution for now.
                          */
-                        useCssHotReload ? {
+                        useHMR ? {
                             loader: 'style-loader',
                             /**
                              * If we refactor the `theme.js` in `matrix-react-sdk` a little bit,
@@ -458,15 +462,10 @@ module.exports = (env, argv) => {
         },
 
         plugins: [
-            new webpack.EnvironmentPlugin({
-                NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
-                DEBUG: false,
-            }),
-
             // This exports our CSS using the splitChunks and loaders above.
             new MiniCssExtractPlugin({
-                filename: useCssHotReload ? "bundles/[name].css" : "bundles/[hash]/[name].css",
-                chunkFilename: useCssHotReload ? "bundles/[name].css" : "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
             }),
 
@@ -526,8 +525,9 @@ module.exports = (env, argv) => {
             new HtmlWebpackInjectPreload({
                 files: [{ match: /.*Inter.*\.woff2$/ }],
             }),
+            useHMR && new ReactRefreshWebpackPlugin(),
 
-        ],
+        ].filter(Boolean),
 
         output: {
             path: path.join(__dirname, "webapp"),
@@ -553,8 +553,6 @@ module.exports = (env, argv) => {
             // Only output errors, warnings, or new compilations.
             // This hides the massive list of modules.
             stats: 'minimal',
-            // hot: false,
-            // injectHot: false,
             hotOnly: true,
             inline: true,
         },

yarn.lock

@@ -1459,11 +1459,86 @@
   dependencies:
     "@octokit/openapi-types" "^9.5.0"
 
+"@pmmmwh/react-refresh-webpack-plugin@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz#1eec460596d200c0236bf195b078a5d1df89b766"
+  integrity sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==
+  dependencies:
+    ansi-html "^0.0.7"
+    error-stack-parser "^2.0.6"
+    html-entities "^1.2.1"
+    native-url "^0.2.6"
+    schema-utils "^2.6.5"
+    source-map "^0.7.3"
+
 "@principalstudio/html-webpack-inject-preload@^1.2.7":
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/@principalstudio/html-webpack-inject-preload/-/html-webpack-inject-preload-1.2.7.tgz#0c1f0b32a34d814b36ce84111f89990441cc64e8"
   integrity sha512-KJKkiKG63ugBjf8U0e9jUcI9CLPTFIsxXplEDE0oi3mPpxd90X9SJovo3W2l7yh/ARKIYXhQq8fSXUN7M29TzQ==
 
+"@sentry/browser@^6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.11.0.tgz#9e90bbc0488ebcdd1e67937d8d5b4f13c3f6dee0"
+  integrity sha512-Qr2QRA0t5/S9QQqxzYKvM9W8prvmiWuldfwRX4hubovXzcXLgUi4WK0/H612wSbYZ4dNAEcQbtlxFWJNN4wxdg==
+  dependencies:
+    "@sentry/core" "6.11.0"
+    "@sentry/types" "6.11.0"
+    "@sentry/utils" "6.11.0"
+    tslib "^1.9.3"
+
+"@sentry/core@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.11.0.tgz#40e94043afcf6407a109be26655c77832c64e740"
+  integrity sha512-09TB+f3pqEq8LFahFWHO6I/4DxHo+NcS52OkbWMDqEi6oNZRD7PhPn3i14LfjsYVv3u3AESU8oxSEGbFrr2UjQ==
+  dependencies:
+    "@sentry/hub" "6.11.0"
+    "@sentry/minimal" "6.11.0"
+    "@sentry/types" "6.11.0"
+    "@sentry/utils" "6.11.0"
+    tslib "^1.9.3"
+
+"@sentry/hub@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.11.0.tgz#ddf9ddb0577d1c8290dc02c0242d274fe84d6c16"
+  integrity sha512-pT9hf+ZJfVFpoZopoC+yJmFNclr4NPqPcl2cgguqCHb69DklD1NxgBNWK8D6X05qjnNFDF991U6t1mxP9HrGuw==
+  dependencies:
+    "@sentry/types" "6.11.0"
+    "@sentry/utils" "6.11.0"
+    tslib "^1.9.3"
+
+"@sentry/minimal@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.11.0.tgz#806d5512658370e40827b3e3663061db708fff33"
+  integrity sha512-XkZ7qrdlGp4IM/gjGxf1Q575yIbl5RvPbg+WFeekpo16Ufvzx37Mr8c2xsZaWosISVyE6eyFpooORjUlzy8EDw==
+  dependencies:
+    "@sentry/hub" "6.11.0"
+    "@sentry/types" "6.11.0"
+    tslib "^1.9.3"
+
+"@sentry/tracing@^6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.11.0.tgz#9bd9287addea1ebc12c75b226f71c7713c0fac4f"
+  integrity sha512-9VA1/SY++WeoMQI4K6n/sYgIdRtCu9NLWqmGqu/5kbOtESYFgAt1DqSyqGCr00ZjQiC2s7tkDkTNZb38K6KytQ==
+  dependencies:
+    "@sentry/hub" "6.11.0"
+    "@sentry/minimal" "6.11.0"
+    "@sentry/types" "6.11.0"
+    "@sentry/utils" "6.11.0"
+    tslib "^1.9.3"
+
+"@sentry/types@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.11.0.tgz#5122685478d32ddacd3a891cbcf550012df85f7c"
+  integrity sha512-gm5H9eZhL6bsIy/h3T+/Fzzz2vINhHhqd92CjHle3w7uXdTdFV98i2pDpErBGNTSNzbntqOMifYEB5ENtZAvcg==
+
+"@sentry/utils@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.11.0.tgz#d1dee4faf4d9c42c54bba88d5a66fb96b902a14c"
+  integrity sha512-IOvyFHcnbRQxa++jO+ZUzRvFHEJ1cZjrBIQaNVc0IYF0twUOB5PTP6joTcix38ldaLeapaPZ9LGfudbvYvxkdg==
+  dependencies:
+    "@sentry/types" "6.11.0"
+    tslib "^1.9.3"
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -2130,7 +2205,7 @@ ansi-escapes@^4.2.1:
   dependencies:
     type-fest "^0.21.3"
 
-ansi-html@0.0.7:
+ansi-html@0.0.7, ansi-html@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
   integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
@@ -4377,6 +4452,13 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-stack-parser@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8"
+  integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
+  dependencies:
+    stackframe "^1.1.1"
+
 es-abstract@^1.17.2, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2, es-abstract@^1.18.2:
   version "1.18.3"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.3.tgz#25c4c3380a27aa203c44b2b685bba94da31b63e0"
@@ -5766,7 +5848,7 @@ html-encoding-sniffer@^2.0.1:
   dependencies:
     whatwg-encoding "^1.0.5"
 
-html-entities@^1.3.1, html-entities@^1.4.0:
+html-entities@^1.2.1, html-entities@^1.3.1, html-entities@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
   integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
@@ -7595,10 +7677,10 @@ mathml-tag-names@^2.1.3:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
-matrix-js-sdk@12.3.1:
-  version "12.3.1"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.3.1.tgz#efa9172e96722afb03cb0e866b047022a7c6cb17"
-  integrity sha512-ysF6FQIjz8NaQHpXRs0VD1uh5kNi4tZh7NNPq54nS9YoDC7F681n2srFhoQn4M/Bv5tBLWWGNjKufXTLHp5j5g==
+matrix-js-sdk@12.4.0-rc.1:
+  version "12.4.0-rc.1"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.4.0-rc.1.tgz#6eee9f159bcc5dd968346a9ce5c7b7427636f57c"
+  integrity sha512-6AGIEJvgWlNYyzxPj/V13s9JUg8zsiJ9Hyj6yTpDahufkAUT5yhpFzdPNNRaLlVxHox5HlwJJBdyNQtML727Og==
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"
@@ -7619,12 +7701,14 @@ matrix-mock-request@^1.2.3:
     bluebird "^3.5.0"
     expect "^1.20.2"
 
-matrix-react-sdk@3.28.1:
-  version "3.28.1"
-  resolved "https://registry.yarnpkg.com/matrix-react-sdk/-/matrix-react-sdk-3.28.1.tgz#9f7c10949df2e30d65b3e765ef427bafee86c092"
-  integrity sha512-QHdYCPx9tme2u6H3RA/4JwS1e768xSLwoWzzET0Ntkh4XonaxSmSUF26nKQKsEjH9LZYN+2KKUkFKvVK5S4gPA==
+matrix-react-sdk@3.29.0-rc.1:
+  version "3.29.0-rc.1"
+  resolved "https://registry.yarnpkg.com/matrix-react-sdk/-/matrix-react-sdk-3.29.0-rc.1.tgz#0987bbc15e76d3f1b09908f07ea2fed91344376b"
+  integrity sha512-xAKC8rnp4NFdz7jyPuBOfC0OzFhxe0Ot6V1ucVYLTdXavSBVNvtHOLUy0i26+JoqGik3nj6RacnpcwmWVSNFew==
   dependencies:
     "@babel/runtime" "^7.12.5"
+    "@sentry/browser" "^6.11.0"
+    "@sentry/tracing" "^6.11.0"
     await-lock "^2.1.0"
     blurhash "^1.1.3"
     browser-encrypt-attachment "^0.3.0"
@@ -7650,7 +7734,7 @@ matrix-react-sdk@3.28.1:
     katex "^0.12.0"
     linkifyjs "^2.1.9"
     lodash "^4.17.20"
-    matrix-js-sdk "12.3.1"
+    matrix-js-sdk "12.4.0-rc.1"
     matrix-widget-api "^0.1.0-beta.15"
     minimist "^1.2.5"
     opus-recorder "^8.0.3"
@@ -8110,6 +8194,13 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+native-url@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.2.6.tgz#ca1258f5ace169c716ff44eccbddb674e10399ae"
+  integrity sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==
+  dependencies:
+    querystring "^0.2.0"
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -9843,6 +9934,11 @@ querystring@0.2.0:
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
+querystring@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
+  integrity sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==
+
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -9977,6 +10073,11 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^16.13.1"
 
+react-refresh@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.10.0.tgz#2f536c9660c0b9b1d500684d9e52a65e7404f7e3"
+  integrity sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==
+
 react-transition-group@^4.4.1:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -11005,6 +11106,11 @@ stack-utils@^2.0.2:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+stackframe@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
+  integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"