Merge remote-tracking branch 'upstream/master' into synodim

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged --concurrent false

.lintstagedrc

@@ -0,0 +1,7 @@
+{
+    "*": "prettier --write",
+    "src/**/*.(ts|tsx)": ["eslint --fix"],
+    "scripts/**/*.(ts|tsx)": ["eslint --fix"],
+    "module_system/**/*.(ts|tsx)": ["eslint --fix --config .eslintrc-module_system.js module_system"],
+    "*.pcss": ["stylelint --fix"]
+}

CHANGELOG.md

@@ -1,3 +1,36 @@
+Changes in [1.11.74](https://github.com/element-hq/element-web/releases/tag/v1.11.74) (2024-08-13)
+==================================================================================================
+## ✨ Features
+
+* Update unsupported browser react component to new designs ([#27857](https://github.com/element-hq/element-web/pull/27857)). Contributed by @t3chguy.
+* Invite dialog: display MXID on its own line ([#11756](https://github.com/matrix-org/matrix-react-sdk/pull/11756)). Contributed by @AndrewFerr.
+* Align RoomSummaryCard styles with Figma ([#12793](https://github.com/matrix-org/matrix-react-sdk/pull/12793)). Contributed by @t3chguy.
+* Extract Extensions into their own right panel tab ([#12844](https://github.com/matrix-org/matrix-react-sdk/pull/12844)). Contributed by @t3chguy.
+* Remove topic from new room header and expand right panel topic ([#12842](https://github.com/matrix-org/matrix-react-sdk/pull/12842)). Contributed by @t3chguy.
+* Rework how the onboarding notifications task works ([#12839](https://github.com/matrix-org/matrix-react-sdk/pull/12839)). Contributed by @t3chguy.
+* Update toast styles to match Figma ([#12833](https://github.com/matrix-org/matrix-react-sdk/pull/12833)). Contributed by @t3chguy.
+* Warn users on unsupported browsers before they lack features ([#12830](https://github.com/matrix-org/matrix-react-sdk/pull/12830)). Contributed by @t3chguy.
+* Add sign out button to settings profile section ([#12666](https://github.com/matrix-org/matrix-react-sdk/pull/12666)). Contributed by @dbkr.
+* Remove MatrixRTC realted import ES lint exceptions using a index.ts for matrixrtc ([#12780](https://github.com/matrix-org/matrix-react-sdk/pull/12780)). Contributed by @toger5.
+* Fix unwanted ringing of other devices even though the user is already connected to the call. ([#12742](https://github.com/matrix-org/matrix-react-sdk/pull/12742)). Contributed by @toger5.
+* Acknowledge `DeviceMute` widget actions ([#12790](https://github.com/matrix-org/matrix-react-sdk/pull/12790)). Contributed by @toger5.
+
+## 🐛 Bug Fixes
+
+* Update Element icons ([#27900](https://github.com/element-hq/element-web/pull/27900)). Contributed by @t3chguy.
+* Fix Jitsi by updating device mute updates over postMessage API ([#27858](https://github.com/element-hq/element-web/pull/27858)). Contributed by @t3chguy.
+* Fix formatting of rich text emotes ([#12862](https://github.com/matrix-org/matrix-react-sdk/pull/12862)). Contributed by @dbkr.
+* Fixed custom emotes background color #27745 ([#12798](https://github.com/matrix-org/matrix-react-sdk/pull/12798)). Contributed by @asimdelvi.
+* Ignore permalink\_prefix when serializing pills ([#11726](https://github.com/matrix-org/matrix-react-sdk/pull/11726)). Contributed by @herkulessi.
+* Deflake the chat export test ([#12854](https://github.com/matrix-org/matrix-react-sdk/pull/12854)). Contributed by @dbkr.
+* Fix alignment of RTL messages ([#12837](https://github.com/matrix-org/matrix-react-sdk/pull/12837)). Contributed by @dbkr.
+* Handle media download errors better ([#12848](https://github.com/matrix-org/matrix-react-sdk/pull/12848)). Contributed by @t3chguy.
+* Make micIcon display on primary ([#11908](https://github.com/matrix-org/matrix-react-sdk/pull/11908)). Contributed by @kdanielm.
+* Fix compound typography font component issues ([#12826](https://github.com/matrix-org/matrix-react-sdk/pull/12826)). Contributed by @t3chguy.
+* Allow Chrome page translator to translate messages in rooms ([#11113](https://github.com/matrix-org/matrix-react-sdk/pull/11113)). Contributed by @lukaszpolowczyk.
+
+
+
 Changes in [1.11.73](https://github.com/element-hq/element-web/releases/tag/v1.11.73) (2024-08-06)
 ==================================================================================================
 Fixes for CVE-2024-42347 / GHSA-f83w-wqhc-cfp4

README.md

@@ -17,20 +17,30 @@ React SDK](https://github.com/matrix-org/matrix-react-sdk).
 Element has several tiers of support for different environments:
 
 -   Supported
-    -   Definition: Issues **actively triaged**, regressions **block** the release
+    -   Definition:
+        -   Issues **actively triaged**, regressions **block** the release
     -   Last 2 major versions of Chrome, Firefox, and Edge on desktop OSes
     -   Last 2 versions of Safari
     -   Latest release of official Element Desktop app on desktop OSes
     -   Desktop OSes means macOS, Windows, and Linux versions for desktop devices
         that are actively supported by the OS vendor and receive security updates
--   Experimental
-    -   Definition: Issues **accepted**, regressions **do not block** the release
-    -   Element as an installed PWA via current stable version of Chrome
+-   Best effort
+    -   Definition:
+        -   Issues **accepted**, regressions **do not block** the release
+        -   The wider Element Products(including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
+        -   The element web project and its contributors should keep the client functioning and gracefully degrade where other sibling features (E.g. Element Call) may not function.
+    -   Last major release of Firefox ESR and Chrome/Edge Extended Stable
+-   Community Supported
+    -   Definition:
+        -   Issues **accepted**, regressions **do not block** the release
+        -   Community contributions are welcome to support these issues
     -   Mobile web for current stable version of Chrome, Firefox, and Safari on Android, iOS, and iPadOS
 -   Not supported
     -   Definition: Issues only affecting unsupported environments are **closed**
     -   Everything else
 
+The period of support for these tiers should last until the releases specified above, plus 1 app release cycle(2 weeks). In the case of Firefox ESR this is extended further to allow it land in Debian Stable.
+
 For accessing Element on an Android or iOS device, we currently recommend the
 native apps [element-android](https://github.com/element-hq/element-android)
 and [element-ios](https://github.com/element-hq/element-ios).

babel.config.js

@@ -10,15 +10,15 @@ module.exports = {
                     "last 2 Safari versions",
                     "last 2 Edge versions",
                 ],
+                include: ["@babel/plugin-transform-class-properties"],
             },
         ],
-        "@babel/preset-typescript",
+        ["@babel/preset-typescript", { allowDeclareFields: true }],
         "@babel/preset-react",
     ],
     plugins: [
         "@babel/plugin-proposal-export-default-from",
         "@babel/plugin-transform-numeric-separator",
-        "@babel/plugin-transform-class-properties",
         "@babel/plugin-transform-object-rest-spread",
         "@babel/plugin-transform-optional-chaining",
         "@babel/plugin-transform-nullish-coalescing-operator",

docs/config.md

@@ -167,6 +167,10 @@ Starting with `desktop_builds`, the following subproperties are available:
 1. `available`: Required. When `true`, the desktop app can be downloaded from somewhere.
 2. `logo`: Required. A URL to a logo (SVG), intended to be shown at 24x24 pixels.
 3. `url`: Required. The download URL for the app. This is used as a hyperlink.
+4. `url_macos`: Optional. Direct link to download macOS desktop app.
+5. `url_win32`: Optional. Direct link to download Windows 32-bit desktop app.
+6. `url_win64`: Optional. Direct link to download Windows 64-bit desktop app.
+7. `url_linux`: Optional. Direct link to download Linux desktop app.
 
 When `desktop_builds` is not specified at all, the app will assume desktop downloads are available from https://element.io
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.73",
+    "version": "1.11.74",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -68,16 +68,22 @@
     },
     "resolutions": {
         "@types/react-dom": "17.0.25",
-        "@types/react": "17.0.80"
+        "@types/react": "17.0.80",
+        "@vector-im/compound-design-tokens": "1.7.0",
+        "@vector-im/compound-web": "5.5.0",
+        "@floating-ui/react": "0.26.11",
+        "@radix-ui/react-id": "1.1.0"
     },
     "dependencies": {
         "@formatjs/intl-segmenter": "^11.5.7",
         "@matrix-org/react-sdk-module-api": "^2.3.0",
+        "@vector-im/compound-design-tokens": "^1.6.1",
+        "@vector-im/compound-web": "^5.5.0",
         "jsrsasign": "^11.0.0",
         "katex": "^0.16.0",
         "lodash": "^4.17.21",
-        "matrix-js-sdk": "34.2.0",
-        "matrix-react-sdk": "3.105.1",
+        "matrix-js-sdk": "34.3.0",
+        "matrix-react-sdk": "3.106.0",
         "matrix-widget-api": "^1.3.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
@@ -103,7 +109,7 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/register": "^7.12.10",
         "@babel/runtime": "^7.12.5",
-        "@casualbot/jest-sonar-reporter": "2.2.7",
+        "@casualbot/jest-sonar-reporter": "2.3.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@sentry/webpack-plugin": "^2.7.1",
         "@svgr/webpack": "^8.0.0",
@@ -163,29 +169,31 @@
         "fetch-mock-jest": "^1.5.1",
         "file-loader": "^6.0.0",
         "html-webpack-plugin": "^5.5.3",
+        "husky": "^8.0.3",
         "jest": "^29.0.0",
         "jest-canvas-mock": "2.5.2",
         "jest-environment-jsdom": "^29.0.0",
         "jest-mock": "^29.0.0",
         "jest-raw-loader": "^1.0.1",
+        "lint-staged": "^15.1.0",
         "matrix-mock-request": "^2.5.0",
         "matrix-web-i18n": "^3.2.1",
-        "mini-css-extract-plugin": "2.8.0",
+        "mini-css-extract-plugin": "2.9.0",
         "minimist": "^1.2.6",
         "mkdirp": "^3.0.0",
         "modernizr": "^3.12.0",
         "node-fetch": "^2.6.7",
-        "postcss": "8.4.33",
+        "postcss": "8.4.38",
         "postcss-easings": "^4.0.0",
         "postcss-hexrgba": "2.1.0",
-        "postcss-import": "16.0.0",
-        "postcss-loader": "8.1.0",
+        "postcss-import": "16.1.0",
+        "postcss-loader": "8.1.1",
         "postcss-mixins": "^10.0.0",
         "postcss-nested": "^6.0.0",
         "postcss-preset-env": "^9.5.14",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.3.2",
+        "prettier": "3.3.3",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
@@ -198,7 +206,7 @@
         "terser-webpack-plugin": "^5.3.9",
         "ts-node": "^10.9.1",
         "ts-prune": "^0.10.3",
-        "typescript": "5.5.3",
+        "typescript": "5.5.4",
         "util": "^0.12.5",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.8.0",

res/css/structures/ErrorView.pcss

@@ -14,94 +14,61 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* import font-size variables manually,
-   ideally this file would get loaded by the theme which has all variables in context */
-@import "../../../node_modules/matrix-react-sdk/res/css/_font-sizes.pcss";
-
 .mx_ErrorView {
-    background: #c5e0f7;
-    background: -moz-linear-gradient(top, #c5e0f7 0%, #ffffff 100%);
-    background: -webkit-linear-gradient(top, #c5e0f7 0%, #ffffff 100%);
-    background: linear-gradient(to bottom, #c5e0f7 0%, #ffffff 100%);
-    /* stylelint-disable-next-line function-no-unknown */
-    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#c5e0f7', endColorstr='#ffffff', GradientType=0);
+    --width: 520px;
+    --cpd-separator-inset: calc(50% - (var(--width) / 2));
+    --cpd-separator-spacing: var(--cpd-space-8x);
+
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
         "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    color: #000;
+    text-align: center;
+    color: var(--cpd-color-text-primary);
     width: 100%;
     height: 100%;
-    overflow: auto;
-    padding: 0 20px;
     box-sizing: border-box;
+    overflow: auto;
+    padding: var(--cpd-space-20x);
 
-    .mx_ErrorView_container {
-        max-width: 680px;
-        margin: auto;
-    }
+    background-color: var(--cpd-color-theme-bg);
+    background-image: url("../../themes/element/img/compound/fade-arc-light.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
 
-    .mx_Button {
-        border: 0;
-        border-radius: 4px;
-        font-size: $font-18px;
-        margin-left: 4px;
-        margin-right: 4px;
-        min-width: 80px;
-        background-color: #03b381;
-        color: #fff;
-        cursor: pointer;
-        padding: 12px 22px;
-        word-break: break-word;
-        text-decoration: none;
+    .mx_ErrorView_logo {
+        display: block;
+        margin: 0 auto;
     }
 
-    .mx_Center {
-        justify-content: center;
+    .mx_ErrorView_container {
+        max-width: var(--width);
+        margin: 0 auto var(--cpd-space-8x);
     }
 
-    .mx_HomePage_header {
-        color: #2e2f32;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    h1,
+    h2 {
+        color: var(--cpd-color-text-primary);
     }
 
-    font-size: $font-16px;
-    h1 {
-        font-size: $font-32px;
-    }
     h2 {
-        font-size: $font-24px;
-        color: #000;
+        margin: var(--cpd-space-8x) 0;
+        /* Workaround for heading sm being broken in Compound design tokens */
+        font-size: var(--cpd-font-size-heading-sm);
+        line-height: var(--cpd-font-line-height-tight);
+        font-weight: var(--cpd-font-weight-semibold);
     }
 
-    .mx_HomePage_col {
-        display: flex;
-        flex-direction: row;
+    p {
+        color: var(--cpd-color-text-secondary);
     }
 
-    .mx_HomePage_row {
-        flex: 1 1 0;
-        display: flex;
-        flex-direction: row;
+    .mx_Flex {
+        margin: 0 auto;
+        max-width: max-content;
         flex-wrap: wrap;
+        justify-content: space-evenly;
     }
 
-    .mx_HomePage_logo {
-        margin: auto 20px auto 0;
-    }
-
-    h1,
-    h2 {
-        font-weight: 600;
-        margin-bottom: 32px;
-    }
-
-    .mx_Spacer {
-        margin-top: 24px;
-    }
-
-    .mx_FooterLink {
-        color: #368bd6;
-        text-decoration: none;
+    .mx_ErrorView_buttons {
+        margin-top: var(--cpd-space-6x);
     }
 }