From d282675bc643058c4835db499e68d7b34af0e13f Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Sun, 13 Oct 2019 15:08:50 +0300 Subject: [PATCH 001/179] Improve reply rendering Signed-off-by: Tulir Asokan --- res/css/_components.scss | 1 + res/css/views/elements/_ReplyThread.scss | 11 +- res/css/views/rooms/_ReplyPreview.scss | 7 +- res/css/views/rooms/_ReplyTile.scss | 96 +++++++ src/components/views/elements/ReplyThread.js | 15 +- .../views/messages/MImageReplyBody.js | 33 +++ src/components/views/messages/MessageEvent.js | 9 +- src/components/views/rooms/ReplyPreview.js | 12 +- src/components/views/rooms/ReplyTile.js | 234 ++++++++++++++++++ 9 files changed, 388 insertions(+), 30 deletions(-) create mode 100644 res/css/views/rooms/_ReplyTile.scss create mode 100644 src/components/views/messages/MImageReplyBody.js create mode 100644 src/components/views/rooms/ReplyTile.js diff --git a/res/css/_components.scss b/res/css/_components.scss index 4891fd90c0..2c54c5f37f 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -153,6 +153,7 @@ @import "./views/rooms/_PinnedEventsPanel.scss"; @import "./views/rooms/_PresenceLabel.scss"; @import "./views/rooms/_ReplyPreview.scss"; +@import "./views/rooms/_ReplyTile.scss"; @import "./views/rooms/_RoomBreadcrumbs.scss"; @import "./views/rooms/_RoomDropTarget.scss"; @import "./views/rooms/_RoomHeader.scss"; diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss index bf44a11728..0d53a6b6f4 100644 --- a/res/css/views/elements/_ReplyThread.scss +++ b/res/css/views/elements/_ReplyThread.scss @@ -18,20 +18,13 @@ limitations under the License. margin-top: 0; } -.mx_ReplyThread .mx_DateSeparator { - font-size: 1em !important; - margin-top: 0; - margin-bottom: 0; - padding-bottom: 1px; - bottom: -5px; -} - .mx_ReplyThread_show { cursor: pointer; } blockquote.mx_ReplyThread { margin-left: 0; + margin-bottom: 8px; padding-left: 10px; - border-left: 4px solid $blockquote-bar-color; + border-left: 4px solid $button-bg-color; } diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss index 4dc4cb2c40..08fbd27808 100644 --- a/res/css/views/rooms/_ReplyPreview.scss +++ b/res/css/views/rooms/_ReplyPreview.scss @@ -32,12 +32,16 @@ limitations under the License. } .mx_ReplyPreview_header { - margin: 12px; + margin: 8px; color: $primary-fg-color; font-weight: 400; opacity: 0.4; } +.mx_ReplyPreview_tile { + margin: 0 8px; +} + .mx_ReplyPreview_title { float: left; } @@ -45,6 +49,7 @@ limitations under the License. .mx_ReplyPreview_cancel { float: right; cursor: pointer; + display: flex; } .mx_ReplyPreview_clear { diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss new file mode 100644 index 0000000000..0a055297c6 --- /dev/null +++ b/res/css/views/rooms/_ReplyTile.scss @@ -0,0 +1,96 @@ +/* +Copyright 2019 Tulir Asokan + +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. +*/ + +.mx_ReplyTile { + max-width: 100%; + clear: both; + padding-top: 2px; + padding-bottom: 2px; + font-size: 14px; + position: relative; + line-height: 16px; +} + +.mx_ReplyTile > a { + display: block; + text-decoration: none; + color: $primary-fg-color; +} + +// We do reply size limiting with CSS to avoid duplicating the TextualBody component. +.mx_ReplyTile .mx_EventTile_content { + $reply-lines: 2; + $line-height: 22px; + + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $reply-lines; + line-height: $line-height; + + .mx_EventTile_body.mx_EventTile_bigEmoji { + line-height: $line-height !important; + // Override the big emoji override + font-size: 14px !important; + } +} + +.mx_ReplyTile.mx_ReplyTile_info { + padding-top: 0px; +} + +.mx_ReplyTile .mx_SenderProfile { + color: $primary-fg-color; + font-size: 14px; + display: inline-block; /* anti-zalgo, with overflow hidden */ + overflow: hidden; + cursor: pointer; + padding-left: 0px; /* left gutter */ + padding-bottom: 0px; + padding-top: 0px; + margin: 0px; + line-height: 17px; + /* the next three lines, along with overflow hidden, truncate long display names */ + white-space: nowrap; + text-overflow: ellipsis; + max-width: calc(100% - 65px); +} + +.mx_ReplyTile_redacted .mx_UnknownBody { + --lozenge-color: $event-redacted-fg-color; + --lozenge-border-color: $event-redacted-border-color; + display: block; + height: 22px; + width: 250px; + border-radius: 11px; + background: + repeating-linear-gradient( + -45deg, + var(--lozenge-color), + var(--lozenge-color) 3px, + transparent 3px, + transparent 6px + ); + box-shadow: 0px 0px 3px var(--lozenge-border-color) inset; +} + +.mx_ReplyTile_sending.mx_ReplyTile_redacted .mx_UnknownBody { + opacity: 0.4; +} + +.mx_ReplyTile_contextual { + opacity: 0.4; +} diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index fac0a71617..1764c008fa 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -304,20 +304,11 @@ export default class ReplyThread extends React.Component { header = ; } - const EventTile = sdk.getComponent('views.rooms.EventTile'); - const DateSeparator = sdk.getComponent('messages.DateSeparator'); + const ReplyTile = sdk.getComponent('views.rooms.ReplyTile'); const evTiles = this.state.events.map((ev) => { - let dateSep = null; - - if (wantsDateSeparator(this.props.parentEv.getDate(), ev.getDate())) { - dateSep = ; - } - return
- { dateSep } - ; }); - return
+ return
{ header }
{ evTiles }
; diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js new file mode 100644 index 0000000000..bb869919fc --- /dev/null +++ b/src/components/views/messages/MImageReplyBody.js @@ -0,0 +1,33 @@ +/* +Copyright 2019 Tulir Asokan + +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. +*/ + +import React from 'react'; +import MImageBody from './MImageBody'; + +export default class MImageReplyBody extends MImageBody { + onClick(ev) { + ev.preventDefault(); + } + + wrapImage(contentUrl, children) { + return children; + } + + // Don't show "Download this_file.png ..." + getFileBody() { + return null; + } +} diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js index a616dd96ed..28f2a471bb 100644 --- a/src/components/views/messages/MessageEvent.js +++ b/src/components/views/messages/MessageEvent.js @@ -43,6 +43,9 @@ module.exports = createReactClass({ /* the maximum image height to use, if the event is an image */ maxImageHeight: PropTypes.number, + + overrideBodyTypes: PropTypes.object, + overrideEventTypes: PropTypes.object, }, getEventTileOps: function() { @@ -60,9 +63,11 @@ module.exports = createReactClass({ 'm.file': sdk.getComponent('messages.MFileBody'), 'm.audio': sdk.getComponent('messages.MAudioBody'), 'm.video': sdk.getComponent('messages.MVideoBody'), + ...(this.props.overrideBodyTypes || {}), }; const evTypes = { 'm.sticker': sdk.getComponent('messages.MStickerBody'), + ...(this.props.overrideEventTypes || {}), }; const content = this.props.mxEvent.getContent(); @@ -81,7 +86,7 @@ module.exports = createReactClass({ } } - return ; + onHeightChanged={this.props.onHeightChanged} /> : null; }, }); diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js index caf8feeea2..a69a286a15 100644 --- a/src/components/views/rooms/ReplyPreview.js +++ b/src/components/views/rooms/ReplyPreview.js @@ -68,7 +68,7 @@ export default class ReplyPreview extends React.Component { render() { if (!this.state.event) return null; - const EventTile = sdk.getComponent('rooms.EventTile'); + const ReplyTile = sdk.getComponent('rooms.ReplyTile'); return
@@ -80,11 +80,11 @@ export default class ReplyPreview extends React.Component { onClick={cancelQuoting} />
- +
+ +
; } diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js new file mode 100644 index 0000000000..5a56ba9dc1 --- /dev/null +++ b/src/components/views/rooms/ReplyTile.js @@ -0,0 +1,234 @@ +/* +Copyright 2019 Tulir Asokan + +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. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +const classNames = require("classnames"); +import { _t, _td } from '../../../languageHandler'; + +const sdk = require('../../../index'); + +import dis from '../../../dispatcher'; +import SettingsStore from "../../../settings/SettingsStore"; +import {MatrixClient} from 'matrix-js-sdk'; + +const ObjectUtils = require('../../../ObjectUtils'); + +const eventTileTypes = { + 'm.room.message': 'messages.MessageEvent', + 'm.sticker': 'messages.MessageEvent', + 'm.call.invite': 'messages.TextualEvent', + 'm.call.answer': 'messages.TextualEvent', + 'm.call.hangup': 'messages.TextualEvent', +}; + +const stateEventTileTypes = { + 'm.room.aliases': 'messages.TextualEvent', + // 'm.room.aliases': 'messages.RoomAliasesEvent', // too complex + 'm.room.canonical_alias': 'messages.TextualEvent', + 'm.room.create': 'messages.RoomCreate', + 'm.room.member': 'messages.TextualEvent', + 'm.room.name': 'messages.TextualEvent', + 'm.room.avatar': 'messages.RoomAvatarEvent', + 'm.room.third_party_invite': 'messages.TextualEvent', + 'm.room.history_visibility': 'messages.TextualEvent', + 'm.room.encryption': 'messages.TextualEvent', + 'm.room.topic': 'messages.TextualEvent', + 'm.room.power_levels': 'messages.TextualEvent', + 'm.room.pinned_events': 'messages.TextualEvent', + 'm.room.server_acl': 'messages.TextualEvent', + 'im.vector.modular.widgets': 'messages.TextualEvent', + 'm.room.tombstone': 'messages.TextualEvent', + 'm.room.join_rules': 'messages.TextualEvent', + 'm.room.guest_access': 'messages.TextualEvent', + 'm.room.related_groups': 'messages.TextualEvent', +}; + +function getHandlerTile(ev) { + const type = ev.getType(); + return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type]; +} + +class ReplyTile extends React.Component { + static contextTypes = { + matrixClient: PropTypes.instanceOf(MatrixClient).isRequired, + } + + static propTypes = { + mxEvent: PropTypes.object.isRequired, + isRedacted: PropTypes.bool, + permalinkCreator: PropTypes.object, + onHeightChanged: PropTypes.func, + } + + static defaultProps = { + onHeightChanged: function() {}, + } + + constructor(props, context) { + super(props, context); + this.state = {}; + this.onClick = this.onClick.bind(this); + } + + componentDidMount() { + this.props.mxEvent.on("Event.decrypted", this._onDecrypted); + } + + shouldComponentUpdate(nextProps, nextState) { + if (!ObjectUtils.shallowEqual(this.state, nextState)) { + return true; + } + + return !this._propsEqual(this.props, nextProps); + } + + componentWillUnmount() { + const client = this.context.matrixClient; + this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted); + } + + _onDecrypted() { + this.forceUpdate(); + } + + _propsEqual(objA, objB) { + const keysA = Object.keys(objA); + const keysB = Object.keys(objB); + + if (keysA.length !== keysB.length) { + return false; + } + + for (let i = 0; i < keysA.length; i++) { + const key = keysA[i]; + + if (!objB.hasOwnProperty(key)) { + return false; + } + + if (objA[key] !== objB[key]) { + return false; + } + } + return true; + } + + onClick(e) { + // This allows the permalink to be opened in a new tab/window or copied as + // matrix.to, but also for it to enable routing within Riot when clicked. + e.preventDefault(); + dis.dispatch({ + action: 'view_room', + event_id: this.props.mxEvent.getId(), + highlighted: true, + room_id: this.props.mxEvent.getRoomId(), + }); + } + + render() { + const SenderProfile = sdk.getComponent('messages.SenderProfile'); + + const content = this.props.mxEvent.getContent(); + const msgtype = content.msgtype; + const eventType = this.props.mxEvent.getType(); + + // Info messages are basically information about commands processed on a room + let isInfoMessage = ( + eventType !== 'm.room.message' && eventType !== 'm.sticker' && eventType !== 'm.room.create' + ); + + let tileHandler = getHandlerTile(this.props.mxEvent); + // If we're showing hidden events in the timeline, we should use the + // source tile when there's no regular tile for an event and also for + // replace relations (which otherwise would display as a confusing + // duplicate of the thing they are replacing). + const useSource = !tileHandler || this.props.mxEvent.isRelation("m.replace"); + if (useSource && SettingsStore.getValue("showHiddenEventsInTimeline")) { + tileHandler = "messages.ViewSourceEvent"; + // Reuse info message avatar and sender profile styling + isInfoMessage = true; + } + // This shouldn't happen: the caller should check we support this type + // before trying to instantiate us + if (!tileHandler) { + const {mxEvent} = this.props; + console.warn(`Event type not supported: type:${mxEvent.getType()} isState:${mxEvent.isState()}`); + return
+ { _t('This event could not be displayed') } +
; + } + const EventTileType = sdk.getComponent(tileHandler); + + const classes = classNames({ + mx_ReplyTile: true, + mx_ReplyTile_info: isInfoMessage, + mx_ReplyTile_redacted: this.props.isRedacted, + }); + + let permalink = "#"; + if (this.props.permalinkCreator) { + permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId()); + } + + let sender; + let needsSenderProfile = tileHandler !== 'messages.RoomCreate' && !isInfoMessage; + + if (needsSenderProfile) { + let text = null; + if (msgtype === 'm.image') text = _td('%(senderName)s sent an image'); + else if (msgtype === 'm.video') text = _td('%(senderName)s sent a video'); + else if (msgtype === 'm.file') text = _td('%(senderName)s uploaded a file'); + sender = ; + } + + const MImageReplyBody = sdk.getComponent('messages.MImageReplyBody'); + const TextualBody = sdk.getComponent('messages.TextualBody'); + const msgtypeOverrides = { + "m.image": MImageReplyBody, + // We don't want a download link for files, just the file name is enough. + "m.file": TextualBody, + "m.sticker": TextualBody, + "m.audio": TextualBody, + "m.video": TextualBody, + }; + const evOverrides = { + "m.sticker": TextualBody, + }; + + return ( + + ) + } +} + +module.exports = ReplyTile; From 03d36f30ec1093dab132c8c2bbe9414da00cb9b2 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Thu, 5 Mar 2020 13:44:54 +0200 Subject: [PATCH 002/179] Fix lint errors --- src/components/views/elements/ReplyThread.js | 1 - src/components/views/messages/MImageReplyBody.js | 1 - src/components/views/messages/MessageEvent.js | 2 +- src/components/views/rooms/ReplyPreview.js | 1 - src/components/views/rooms/ReplyTile.js | 7 +++---- 5 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 25b39a2ad4..954c6b49c4 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -20,7 +20,6 @@ import * as sdk from '../../../index'; import {_t} from '../../../languageHandler'; import PropTypes from 'prop-types'; import dis from '../../../dispatcher'; -import {wantsDateSeparator} from '../../../DateUtils'; import {MatrixEvent} from 'matrix-js-sdk'; import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"; import SettingsStore from "../../../settings/SettingsStore"; diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js index bb869919fc..31b4d1fa82 100644 --- a/src/components/views/messages/MImageReplyBody.js +++ b/src/components/views/messages/MImageReplyBody.js @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; import MImageBody from './MImageBody'; export default class MImageReplyBody extends MImageBody { diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js index 14ab3c8757..3703d3a629 100644 --- a/src/components/views/messages/MessageEvent.js +++ b/src/components/views/messages/MessageEvent.js @@ -123,6 +123,6 @@ export default createReactClass({ editState={this.props.editState} onHeightChanged={this.props.onHeightChanged} onMessageAllowed={this.onTileUpdate} - /> : null + /> : null; }, }); diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js index 92e3f123a0..a22a85a2f1 100644 --- a/src/components/views/rooms/ReplyPreview.js +++ b/src/components/views/rooms/ReplyPreview.js @@ -19,7 +19,6 @@ import dis from '../../../dispatcher'; import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import RoomViewStore from '../../../stores/RoomViewStore'; -import SettingsStore from "../../../settings/SettingsStore"; import PropTypes from "prop-types"; import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"; diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js index 5a56ba9dc1..36cb07f092 100644 --- a/src/components/views/rooms/ReplyTile.js +++ b/src/components/views/rooms/ReplyTile.js @@ -97,7 +97,6 @@ class ReplyTile extends React.Component { } componentWillUnmount() { - const client = this.context.matrixClient; this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted); } @@ -185,7 +184,7 @@ class ReplyTile extends React.Component { } let sender; - let needsSenderProfile = tileHandler !== 'messages.RoomCreate' && !isInfoMessage; + const needsSenderProfile = tileHandler !== 'messages.RoomCreate' && !isInfoMessage; if (needsSenderProfile) { let text = null; @@ -224,10 +223,10 @@ class ReplyTile extends React.Component { showUrlPreview={false} overrideBodyTypes={msgtypeOverrides} overrideEventTypes={evOverrides} - maxImageHeight={96}/> + maxImageHeight={96} />
- ) + ); } } From 03299a28a4f27e96a5b9b0351945b3b9c3c5218d Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 14:23:34 +0300 Subject: [PATCH 003/179] Fix import/export things --- src/components/views/rooms/ReplyTile.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js index 36cb07f092..3ad6962f1a 100644 --- a/src/components/views/rooms/ReplyTile.js +++ b/src/components/views/rooms/ReplyTile.js @@ -1,5 +1,5 @@ /* -Copyright 2019 Tulir Asokan +Copyright 2020 Tulir Asokan Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -16,16 +16,16 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; -const classNames = require("classnames"); +import classNames from 'classnames'; import { _t, _td } from '../../../languageHandler'; -const sdk = require('../../../index'); +import * as sdk from '../../../index'; import dis from '../../../dispatcher'; import SettingsStore from "../../../settings/SettingsStore"; import {MatrixClient} from 'matrix-js-sdk'; -const ObjectUtils = require('../../../ObjectUtils'); +import * as ObjectUtils from '../../../ObjectUtils'; const eventTileTypes = { 'm.room.message': 'messages.MessageEvent', @@ -230,4 +230,4 @@ class ReplyTile extends React.Component { } } -module.exports = ReplyTile; +export default ReplyTile; From e64ff0f099ac6660e596fc640a839c9f76f9f79b Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 14:39:16 +0300 Subject: [PATCH 004/179] Change score color to match sender name --- res/css/views/elements/_ReplyThread.scss | 32 ++++++++++++++++++++ src/components/views/elements/ReplyThread.js | 9 ++++-- 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss index 0d53a6b6f4..d5388e4631 100644 --- a/res/css/views/elements/_ReplyThread.scss +++ b/res/css/views/elements/_ReplyThread.scss @@ -27,4 +27,36 @@ blockquote.mx_ReplyThread { margin-bottom: 8px; padding-left: 10px; border-left: 4px solid $button-bg-color; + + &.mx_ReplyThread_color1 { + border-left-color: $username-variant1-color; + } + + &.mx_ReplyThread_color2 { + border-left-color: $username-variant2-color; + } + + &.mx_ReplyThread_color3 { + border-left-color: $username-variant3-color; + } + + &.mx_ReplyThread_color4 { + border-left-color: $username-variant4-color; + } + + &.mx_ReplyThread_color5 { + border-left-color: $username-variant5-color; + } + + &.mx_ReplyThread_color6 { + border-left-color: $username-variant6-color; + } + + &.mx_ReplyThread_color7 { + border-left-color: $username-variant7-color; + } + + &.mx_ReplyThread_color8 { + border-left-color: $username-variant8-color; + } } diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 976b3a8815..92e87ad945 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -25,6 +25,7 @@ import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks import SettingsStore from "../../../settings/SettingsStore"; import escapeHtml from "escape-html"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; +import { getUserNameColorClass } from "../../../utils/FormattingUtils" // This component does no cycle detection, simply because the only way to make such a cycle would be to // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would @@ -285,6 +286,10 @@ export default class ReplyThread extends React.Component { dis.dispatch({action: 'focus_composer'}); } + getReplyThreadColorClass(ev) { + return getUserNameColorClass(ev.getSender()).replace("Username", "ReplyThread"); + } + render() { let header = null; @@ -299,7 +304,7 @@ export default class ReplyThread extends React.Component { const ev = this.state.loadedEv; const Pill = sdk.getComponent('elements.Pill'); const room = this.context.getRoom(ev.getRoomId()); - header =
+ header =
{ _t('In reply to ', {}, { 'a': (sub) => { sub }, @@ -315,7 +320,7 @@ export default class ReplyThread extends React.Component { const ReplyTile = sdk.getComponent('views.rooms.ReplyTile'); const evTiles = this.state.events.map((ev) => { - return
+ return
Date: Fri, 10 Apr 2020 14:52:24 +0300 Subject: [PATCH 005/179] Add missing semicolon --- src/components/views/elements/ReplyThread.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 92e87ad945..770f95f9dc 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -25,7 +25,7 @@ import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks import SettingsStore from "../../../settings/SettingsStore"; import escapeHtml from "escape-html"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -import { getUserNameColorClass } from "../../../utils/FormattingUtils" +import { getUserNameColorClass } from "../../../utils/FormattingUtils"; // This component does no cycle detection, simply because the only way to make such a cycle would be to // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would From 25af26323c3ca9048ab7a45d63ed74116e553aa8 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 15:45:59 +0300 Subject: [PATCH 006/179] Make image reply rendering even more compact --- res/css/_components.scss | 1 + res/css/views/messages/_MImageReplyBody.scss | 35 +++++++++++++++++++ .../views/messages/MImageReplyBody.js | 31 ++++++++++++++-- src/components/views/rooms/ReplyTile.js | 2 +- 4 files changed, 66 insertions(+), 3 deletions(-) create mode 100644 res/css/views/messages/_MImageReplyBody.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 607257400b..2d701bb1e1 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -130,6 +130,7 @@ @import "./views/messages/_MEmoteBody.scss"; @import "./views/messages/_MFileBody.scss"; @import "./views/messages/_MImageBody.scss"; +@import "./views/messages/_MImageReplyBody.scss"; @import "./views/messages/_MNoticeBody.scss"; @import "./views/messages/_MStickerBody.scss"; @import "./views/messages/_MTextBody.scss"; diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss new file mode 100644 index 0000000000..8169e027d1 --- /dev/null +++ b/res/css/views/messages/_MImageReplyBody.scss @@ -0,0 +1,35 @@ +/* +Copyright 2020 Tulir Asokan + +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. +*/ + +.mx_MImageReplyBody { + display: grid; + grid-template: "image sender" 20px + "image filename" 20px + / 44px auto; + grid-gap: 4px; +} + +.mx_MImageReplyBody_thumbnail { + grid-area: image; +} + +.mx_MImageReplyBody_sender { + grid-area: sender; +} + +.mx_MImageReplyBody_filename { + grid-area: filename; +} diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js index 31b4d1fa82..cdc78e46e8 100644 --- a/src/components/views/messages/MImageReplyBody.js +++ b/src/components/views/messages/MImageReplyBody.js @@ -1,5 +1,5 @@ /* -Copyright 2019 Tulir Asokan +Copyright 2020 Tulir Asokan Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,7 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ +import React from "react"; +import { _td } from "../../../languageHandler"; +import * as sdk from "../../../index"; import MImageBody from './MImageBody'; +import MFileBody from "./MFileBody"; export default class MImageReplyBody extends MImageBody { onClick(ev) { @@ -27,6 +31,29 @@ export default class MImageReplyBody extends MImageBody { // Don't show "Download this_file.png ..." getFileBody() { - return null; + return MFileBody.prototype.presentableTextForFile.call(this, this.props.mxEvent.getContent()); + } + + render() { + if (this.state.error !== null) { + return super.render(); + } + + const content = this.props.mxEvent.getContent(); + + const contentUrl = this._getContentUrl(); + const thumbnail = this._messageContent(contentUrl, this._getThumbUrl(), content); + const fileBody = this.getFileBody(); + const SenderProfile = sdk.getComponent('messages.SenderProfile'); + const sender = ; + + return
+
{ thumbnail }
+
{ sender }
+
{ fileBody }
+
; } } diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js index 3ad6962f1a..ca349baac2 100644 --- a/src/components/views/rooms/ReplyTile.js +++ b/src/components/views/rooms/ReplyTile.js @@ -184,7 +184,7 @@ class ReplyTile extends React.Component { } let sender; - const needsSenderProfile = tileHandler !== 'messages.RoomCreate' && !isInfoMessage; + const needsSenderProfile = msgtype !== 'm.image' && tileHandler !== 'messages.RoomCreate' && !isInfoMessage; if (needsSenderProfile) { let text = null; From ec7acd1c0fbaf5d96415f380a3b85b54d079aa9f Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 15:56:09 +0300 Subject: [PATCH 007/179] Fix rendering reply after event is decrypted --- src/components/views/rooms/ReplyTile.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js index ca349baac2..34b2c6ad38 100644 --- a/src/components/views/rooms/ReplyTile.js +++ b/src/components/views/rooms/ReplyTile.js @@ -82,6 +82,7 @@ class ReplyTile extends React.Component { super(props, context); this.state = {}; this.onClick = this.onClick.bind(this); + this._onDecrypted = this._onDecrypted.bind(this); } componentDidMount() { @@ -102,6 +103,9 @@ class ReplyTile extends React.Component { _onDecrypted() { this.forceUpdate(); + if (this.props.onHeightChanged) { + this.props.onHeightChanged(); + } } _propsEqual(objA, objB) { From da3bd5ebee68dc15f04e15c3b55183f769413ce9 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 16:03:27 +0300 Subject: [PATCH 008/179] Disable pointer events inside replies --- res/css/views/rooms/_ReplyTile.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 0a055297c6..a6cff00ff2 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -35,6 +35,8 @@ limitations under the License. $reply-lines: 2; $line-height: 22px; + pointer-events: none; + text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; From 6b96a161087f4cda8ab6dcafd155e2d689a5adff Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 16:18:06 +0300 Subject: [PATCH 009/179] Add absolute max height and some improvements for 
 replies

---
 res/css/views/rooms/_ReplyTile.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index a6cff00ff2..70a383a1cf 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -34,6 +34,7 @@ limitations under the License.
 .mx_ReplyTile .mx_EventTile_content {
     $reply-lines: 2;
     $line-height: 22px;
+    $max-height: 66px;
 
     pointer-events: none;
 
@@ -42,12 +43,26 @@ limitations under the License.
     -webkit-box-orient: vertical;
     -webkit-line-clamp: $reply-lines;
     line-height: $line-height;
+    max-height: $max-height;
 
     .mx_EventTile_body.mx_EventTile_bigEmoji {
         line-height: $line-height !important;
         // Override the big emoji override
         font-size: 14px !important;
     }
+
+    // Hack to cut content in 
 tags too
+    .mx_EventTile_pre_container > pre {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: $reply-lines;
+        padding: 4px;
+    }
+    .markdown-body blockquote, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul {
+        margin-bottom: 4px;
+    }
 }
 
 .mx_ReplyTile.mx_ReplyTile_info {

From e7ad9b82e0f42e6c7ac5511ade135e71a273e414 Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Fri, 10 Apr 2020 16:27:39 +0300
Subject: [PATCH 010/179] Fix stylelint issue and update header

---
 res/css/views/messages/_MImageReplyBody.scss | 7 ++++---
 res/css/views/rooms/_ReplyTile.scss          | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss
index 8169e027d1..9b25b4392a 100644
--- a/res/css/views/messages/_MImageReplyBody.scss
+++ b/res/css/views/messages/_MImageReplyBody.scss
@@ -16,9 +16,10 @@ limitations under the License.
 
 .mx_MImageReplyBody {
     display: grid;
-    grid-template: "image sender"   20px
-                   "image filename" 20px
-                  / 44px  auto;
+    grid-template:
+        "image sender"   20px
+        "image filename" 20px
+        / 44px  auto;
     grid-gap: 4px;
 }
 
diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index 70a383a1cf..fd68430157 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Tulir Asokan 
+Copyright 2020 Tulir Asokan 
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

From b554d59ed165d68b56a9b08faadeec86d2f7c2b7 Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Fri, 10 Apr 2020 17:05:29 +0300
Subject: [PATCH 011/179] Prevent reply thumbnail image from overflowing

---
 res/css/views/messages/_MImageReplyBody.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss
index 9b25b4392a..8c5cb97478 100644
--- a/res/css/views/messages/_MImageReplyBody.scss
+++ b/res/css/views/messages/_MImageReplyBody.scss
@@ -25,6 +25,10 @@ limitations under the License.
 
 .mx_MImageReplyBody_thumbnail {
     grid-area: image;
+
+    .mx_MImageBody_thumbnail_container {
+        max-height: 44px !important;
+    }
 }
 
 .mx_MImageReplyBody_sender {

From 466ecf191af65c453bb3e38d867e57fc211dc5c5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 13 Apr 2020 21:23:40 +0100
Subject: [PATCH 012/179] move urlSearchParamsToObject and global.d.ts to
 react-sdk

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 package.json                           |  1 +
 src/@types/global.d.ts                 | 31 ++++++++++++++++++++++++++
 src/utils/{UrlUtils.js => UrlUtils.ts} |  6 ++++-
 yarn.lock                              |  5 +++++
 4 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/@types/global.d.ts
 rename src/utils/{UrlUtils.js => UrlUtils.ts} (89%)

diff --git a/package.json b/package.json
index 616f3f541e..11803d321d 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,7 @@
     "@babel/register": "^7.7.4",
     "@peculiar/webcrypto": "^1.0.22",
     "@types/classnames": "^2.2.10",
+    "@types/modernizr": "^3.5.3",
     "@types/react": "16.9",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
new file mode 100644
index 0000000000..963ba9d702
--- /dev/null
+++ b/src/@types/global.d.ts
@@ -0,0 +1,31 @@
+/*
+Copyright 2020 New Vector Ltd
+
+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.
+*/
+
+import * as ModernizrStatic from "modernizr";
+
+declare global {
+    interface Window {
+        Modernizr: ModernizrStatic;
+        Olm: {
+            init: () => Promise;
+        };
+    }
+
+    // workaround for https://github.com/microsoft/TypeScript/issues/30933
+    interface ObjectConstructor {
+        fromEntries?(xs: [string|number|symbol, any][]): object
+    }
+}
diff --git a/src/utils/UrlUtils.js b/src/utils/UrlUtils.ts
similarity index 89%
rename from src/utils/UrlUtils.js
rename to src/utils/UrlUtils.ts
index 7b207c128e..7fe5ad0c89 100644
--- a/src/utils/UrlUtils.js
+++ b/src/utils/UrlUtils.ts
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import url from "url";
+import * as url from "url";
+
+export function urlSearchParamsToObject(params: URLSearchParams) {
+    return Object.fromEntries([...params.entries()]);
+}
 
 /**
  * If a url has no path component, etc. abbreviate it to just the hostname
diff --git a/yarn.lock b/yarn.lock
index 538a049bff..9c57ccf649 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1257,6 +1257,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
+"@types/modernizr@^3.5.3":
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/@types/modernizr/-/modernizr-3.5.3.tgz#8ef99e6252191c1d88647809109dc29884ba6d7a"
+  integrity sha512-jhMOZSS0UGYTS9pqvt6q3wtT3uvOSve5piTEmTMx3zzTuBLvSIMxSIBIc3d5lajVD5h4xc41AMZD2M5orN3PxA==
+
 "@types/node@*":
   version "13.11.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-13.11.0.tgz#390ea202539c61c8fa6ba4428b57e05bc36dc47b"

From af4ef38a4110f3cd785ae826b3271f28ade11012 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 13 Apr 2020 21:28:23 +0100
Subject: [PATCH 013/179] remove dependency on `qs`

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 package.json                             |   1 -
 src/components/views/elements/AppTile.js |   4 +-
 src/utils/HostingLink.js                 |   4 +-
 yarn.lock                                | 197 ++---------------------
 4 files changed, 16 insertions(+), 190 deletions(-)

diff --git a/package.json b/package.json
index 11803d321d..7b66c95d28 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,6 @@
     "prop-types": "^15.5.8",
     "qrcode": "^1.4.4",
     "qrcode-react": "^0.1.16",
-    "qs": "^6.6.0",
     "react": "^16.9.0",
     "react-addons-css-transition-group": "15.6.2",
     "react-beautiful-dnd": "^4.0.1",
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 73ed605edd..8762eb449e 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -18,7 +18,6 @@ limitations under the License.
 */
 
 import url from 'url';
-import qs from 'qs';
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
@@ -38,6 +37,7 @@ import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 import {aboveLeftOf, ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
 import PersistedElement from "./PersistedElement";
+import {urlSearchParamsToObject} from "../../../utils/UrlUtils";
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 const ENABLE_REACT_PERF = false;
@@ -234,7 +234,7 @@ export default class AppTile extends React.Component {
             // Append scalar_token as a query param if not already present
             this._scalarClient.scalarToken = token;
             const u = url.parse(this._addWurlParams(this.props.app.url));
-            const params = qs.parse(u.query);
+            const params = urlSearchParamsToObject(new URLSearchParams(u.query));
             if (!params.scalar_token) {
                 params.scalar_token = encodeURIComponent(token);
                 // u.search must be set to undefined, so that u.format() uses query parameters - https://nodejs.org/docs/latest/api/url.html#url_url_format_url_options
diff --git a/src/utils/HostingLink.js b/src/utils/HostingLink.js
index 580ed00de5..fce2f104bd 100644
--- a/src/utils/HostingLink.js
+++ b/src/utils/HostingLink.js
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import url from 'url';
-import qs from 'qs';
 
 import SdkConfig from '../SdkConfig';
 import {MatrixClientPeg} from '../MatrixClientPeg';
+import {urlSearchParamsToObject} from "./UrlUtils";
 
 export function getHostingLink(campaign) {
     const hostingLink = SdkConfig.get().hosting_signup_link;
@@ -29,7 +29,7 @@ export function getHostingLink(campaign) {
 
     try {
         const hostingUrl = url.parse(hostingLink);
-        const params = qs.parse(hostingUrl.query);
+        const params = urlSearchParamsToObject(new URLSearchParams(hostingUrl.query));
         params.utm_campaign = campaign;
         hostingUrl.search = undefined;
         hostingUrl.query = params;
diff --git a/yarn.lock b/yarn.lock
index 9c57ccf649..8dda986b46 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1501,11 +1501,6 @@ abab@^2.0.0:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
   integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
 
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
 acorn-globals@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
@@ -1639,19 +1634,11 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-aproba@^1.0.3, aproba@^1.1.1:
+aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
   integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
-are-we-there-yet@~1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
-  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -2558,11 +2545,6 @@ console-browserify@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
   integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
 
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
-
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -2808,7 +2790,7 @@ debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0, debug@^3.2.6:
+debug@^3.1.0:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -2884,11 +2866,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
-
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -2902,11 +2879,6 @@ detect-file@^1.0.0:
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@@ -3921,13 +3893,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
 fs-readdir-recursive@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
@@ -3990,20 +3955,6 @@ fuse.js@^2.2.0:
   resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-2.7.4.tgz#96e420fde7ef011ac49c258a621314fe576536f9"
   integrity sha1-luQg/efvARrEnCWKYhMU/ldlNvk=
 
-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
-
 gensync@^1.0.0-beta.1:
   version "1.0.0-beta.1"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
@@ -4201,11 +4152,6 @@ has-symbols@^1.0.0, has-symbols@^1.0.1:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
   integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
 
-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
-
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@@ -4393,7 +4339,7 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -4410,13 +4356,6 @@ iferr@^0.1.5:
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
   integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
-ignore-walk@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
-  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
-  dependencies:
-    minimatch "^3.0.4"
-
 ignore@^4.0.3, ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -5980,21 +5919,6 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, "minimist@~ 1.2.0":
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -6019,7 +5943,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3:
+mkdirp@^0.5.1, mkdirp@^0.5.3:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -6096,15 +6020,6 @@ nearley@^2.7.10:
     randexp "0.4.6"
     semver "^5.4.1"
 
-needle@^2.2.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.1.tgz#14af48732463d7475696f937626b1b993247a56a"
-  integrity sha512-x/gi6ijr4B7fwl6WYL9FwlCvRQKGlUNvnceho8wxkwXqN8jvVmmmATTmZPRRG7b/yC1eode26C2HO9jl78Du9g==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 neo-async@^2.5.0, neo-async@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
@@ -6182,35 +6097,11 @@ node-notifier@^5.4.2:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.53:
   version "1.1.53"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
   integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
 
-nopt@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
-  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
-  dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -6243,27 +6134,6 @@ normalize-selector@^0.2.0:
   resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
   integrity sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=
 
-npm-bundled@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
-  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
-npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-packlist@^1.1.6:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
-  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-    npm-normalize-package-bin "^1.0.1"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6271,16 +6141,6 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npmlog@^4.0.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
 nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -6430,11 +6290,6 @@ os-browserify@^0.3.0:
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
   integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
 os-locale@^3.0.0, os-locale@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
@@ -6444,19 +6299,11 @@ os-locale@^3.0.0, os-locale@^3.1.0:
     lcid "^2.0.0"
     mem "^4.0.0"
 
-os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
+os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
 p-defer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
@@ -7036,7 +6883,7 @@ qrcode@^1.4.4:
     pngjs "^3.3.0"
     yargs "^13.2.4"
 
-qs@^6.5.2, qs@^6.6.0:
+qs@^6.5.2:
   version "6.9.3"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.3.tgz#bfadcd296c2d549f1dffa560619132c977f5008e"
   integrity sha512-EbZYNarm6138UKKq46tdx08Yo/q9ZhFoAXAI1meAFd2GtbRDhbZY2WQSICskT0c5q99aFzLG1D4nvTk9tqfXIw==
@@ -7101,7 +6948,7 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
-rc@1.2.8, rc@^1.2.7, rc@^1.2.8:
+rc@1.2.8, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -7259,7 +7106,7 @@ read-pkg@^4.0.1:
     parse-json "^4.0.0"
     pify "^3.0.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -7619,7 +7466,7 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^2.4.3, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3:
+rimraf@^2.4.3, rimraf@^2.5.4, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -7781,7 +7628,7 @@ serialize-javascript@^2.1.2:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
   integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
 
-set-blocking@^2.0.0, set-blocking@~2.0.0:
+set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
@@ -8117,7 +7964,7 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
@@ -8398,19 +8245,6 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tar@^4.4.2:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 terser-webpack-plugin@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
@@ -9133,13 +8967,6 @@ which@^1.2.14, which@^1.2.9, which@^1.3.0, which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
-wide-align@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
-  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
-  dependencies:
-    string-width "^1.0.2 || 2"
-
 word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
@@ -9224,7 +9051,7 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
-yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
+yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==

From dfe277b78d1e7fe39fe91245646b41d72bb367fc Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Mon, 25 May 2020 19:24:03 +0300
Subject: [PATCH 014/179] Remove unnecessary right margin in reply blockquote

---
 res/css/views/elements/_ReplyThread.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss
index d5388e4631..af8ca956ba 100644
--- a/res/css/views/elements/_ReplyThread.scss
+++ b/res/css/views/elements/_ReplyThread.scss
@@ -24,6 +24,7 @@ limitations under the License.
 
 blockquote.mx_ReplyThread {
     margin-left: 0;
+    margin-right: 0;
     margin-bottom: 8px;
     padding-left: 10px;
     border-left: 4px solid $button-bg-color;

From c60483728fc8526538e43c1a27834c85d8c1984c Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Mon, 25 May 2020 19:33:30 +0300
Subject: [PATCH 015/179] Fix dispatcher import in ReplyTile.js

---
 src/components/views/rooms/ReplyTile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js
index 34b2c6ad38..f6c4a69def 100644
--- a/src/components/views/rooms/ReplyTile.js
+++ b/src/components/views/rooms/ReplyTile.js
@@ -21,7 +21,7 @@ import { _t, _td } from '../../../languageHandler';
 
 import * as sdk from '../../../index';
 
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import {MatrixClient} from 'matrix-js-sdk';
 

From cdf8f09ec256f8bd69e478ffc11ad26ff883c398 Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Sat, 20 Mar 2021 13:38:42 +0200
Subject: [PATCH 016/179] Remove unused import and run yarn i18n

---
 src/components/views/elements/ReplyThread.js | 1 -
 src/i18n/strings/en_EN.json                  | 3 +++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index eb29e52496..4129f1d14f 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -20,7 +20,6 @@ import * as sdk from '../../../index';
 import {_t} from '../../../languageHandler';
 import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
-import {wantsDateSeparator} from '../../../DateUtils';
 import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 63b19831bb..66b1843e64 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1500,6 +1500,9 @@
     "Seen by %(userName)s at %(dateTime)s": "Seen by %(userName)s at %(dateTime)s",
     "Seen by %(displayName)s (%(userName)s) at %(dateTime)s": "Seen by %(displayName)s (%(userName)s) at %(dateTime)s",
     "Replying": "Replying",
+    "%(senderName)s sent an image": "%(senderName)s sent an image",
+    "%(senderName)s sent a video": "%(senderName)s sent a video",
+    "%(senderName)s uploaded a file": "%(senderName)s uploaded a file",
     "Room %(name)s": "Room %(name)s",
     "Recently visited rooms": "Recently visited rooms",
     "No recently visited rooms": "No recently visited rooms",

From 330f222dd1a9df7aafe4488110be747d03fc5515 Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Sat, 1 May 2021 16:11:30 +0300
Subject: [PATCH 017/179] Remove redundant code and move presentableTextForFile
 out of MFileBody

Signed-off-by: Tulir Asokan 
---
 src/components/views/messages/MFileBody.js    | 62 +++++++++---------
 .../views/messages/MImageReplyBody.js         | 24 +++----
 src/components/views/rooms/EventTile.tsx      | 37 +----------
 src/components/views/rooms/ReplyPreview.js    |  8 ++-
 src/components/views/rooms/ReplyTile.js       | 64 ++-----------------
 5 files changed, 55 insertions(+), 140 deletions(-)

diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 8f464e08bd..5be4468a28 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -89,6 +89,35 @@ function computedStyle(element) {
     return cssText;
 }
 
+/**
+ * Extracts a human readable label for the file attachment to use as
+ * link text.
+ *
+ * @param {Object} content The "content" key of the matrix event.
+ * @param {boolean} withSize Whether to include size information. Default true.
+ * @return {string} the human readable link text for the attachment.
+ */
+export function presentableTextForFile(content, withSize = true) {
+    let linkText = _t("Attachment");
+    if (content.body && content.body.length > 0) {
+        // The content body should be the name of the file including a
+        // file extension.
+        linkText = content.body;
+    }
+
+    if (content.info && content.info.size && withSize) {
+        // If we know the size of the file then add it as human readable
+        // string to the end of the link text so that the user knows how
+        // big a file they are downloading.
+        // The content.info also contains a MIME-type but we don't display
+        // it since it is "ugly", users generally aren't aware what it
+        // means and the type of the attachment can usually be inferrered
+        // from the file extension.
+        linkText += ' (' + filesize(content.info.size) + ')';
+    }
+    return linkText;
+}
+
 @replaceableComponent("views.messages.MFileBody")
 export default class MFileBody extends React.Component {
     static propTypes = {
@@ -119,35 +148,6 @@ export default class MFileBody extends React.Component {
         this._dummyLink = createRef();
     }
 
-    /**
-     * Extracts a human readable label for the file attachment to use as
-     * link text.
-     *
-     * @param {Object} content The "content" key of the matrix event.
-     * @param {boolean} withSize Whether to include size information. Default true.
-     * @return {string} the human readable link text for the attachment.
-     */
-    presentableTextForFile(content, withSize = true) {
-        let linkText = _t("Attachment");
-        if (content.body && content.body.length > 0) {
-            // The content body should be the name of the file including a
-            // file extension.
-            linkText = content.body;
-        }
-
-        if (content.info && content.info.size && withSize) {
-            // If we know the size of the file then add it as human readable
-            // string to the end of the link text so that the user knows how
-            // big a file they are downloading.
-            // The content.info also contains a MIME-type but we don't display
-            // it since it is "ugly", users generally aren't aware what it
-            // means and the type of the attachment can usually be inferrered
-            // from the file extension.
-            linkText += ' (' + filesize(content.info.size) + ')';
-        }
-        return linkText;
-    }
-
     _getContentUrl() {
         const media = mediaFromContent(this.props.mxEvent.getContent());
         return media.srcHttp;
@@ -161,7 +161,7 @@ export default class MFileBody extends React.Component {
 
     render() {
         const content = this.props.mxEvent.getContent();
-        const text = this.presentableTextForFile(content);
+        const text = presentableTextForFile(content);
         const isEncrypted = content.file !== undefined;
         const fileName = content.body && content.body.length > 0 ? content.body : _t("Attachment");
         const contentUrl = this._getContentUrl();
@@ -173,7 +173,7 @@ export default class MFileBody extends React.Component {
             placeholder = (
                 

                     
-                    {this.presentableTextForFile(content, false)}
+                    {presentableTextForFile(content, false)}
                 

             );
         }
diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js
index cdc78e46e8..5ace22a560 100644
--- a/src/components/views/messages/MImageReplyBody.js
+++ b/src/components/views/messages/MImageReplyBody.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Tulir Asokan 
+Copyright 2020-2021 Tulir Asokan 
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import { _td } from "../../../languageHandler";
+import {_td} from "../../../languageHandler";
 import * as sdk from "../../../index";
 import MImageBody from './MImageBody';
-import MFileBody from "./MFileBody";
+import {presentableTextForFile} from "./MFileBody";
 
 export default class MImageReplyBody extends MImageBody {
     onClick(ev) {
@@ -31,7 +31,7 @@ export default class MImageReplyBody extends MImageBody {
 
     // Don't show "Download this_file.png ..."
     getFileBody() {
-        return MFileBody.prototype.presentableTextForFile.call(this, this.props.mxEvent.getContent());
+        return presentableTextForFile(this.props.mxEvent.getContent());
     }
 
     render() {
@@ -45,15 +45,17 @@ export default class MImageReplyBody extends MImageBody {
         const thumbnail = this._messageContent(contentUrl, this._getThumbUrl(), content);
         const fileBody = this.getFileBody();
         const SenderProfile = sdk.getComponent('messages.SenderProfile');
-        const sender = ;
+        const sender = ;
 
         return 

-            
{ thumbnail }

-            
{ sender }

-            
{ fileBody }

+            
{thumbnail}

+            
{sender}

+            
{fileBody}

         
;
     }
 }
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 19c5a7acaa..4411f94f02 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -247,7 +247,7 @@ interface IProps {
     // It could also be done by subclassing EventTile, but that'd be quite
     // boiilerplatey.  So just make the necessary render decisions conditional
     // for now.
-    tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
+    tileShape?: 'notif' | 'file_grid';
 
     // show twelve hour timestamps
     isTwelveHour?: boolean;
@@ -940,7 +940,7 @@ export default class EventTile extends React.Component {
         }
 
         if (needsSenderProfile) {
-            if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') {
+            if (!this.props.tileShape) {
                 sender =  {
                 );
             }
 
-            case 'reply':
-            case 'reply_preview': {
-                let thread;
-                if (this.props.tileShape === 'reply_preview') {
-                    thread = ReplyThread.makeThread(
-                        this.props.mxEvent,
-                        this.props.onHeightChanged,
-                        this.props.permalinkCreator,
-                        this.replyThread,
-                    );
-                }
-                return (
-                    

-                        { ircTimestamp }
-                        { avatar }
-                        { sender }
-                        { ircPadlock }
-                        

-                            { groupTimestamp }
-                            { groupPadlock }
-                            { thread }
-                            
-                        

-                    

-                );
-            }
             default: {
                 const thread = ReplyThread.makeThread(
                     this.props.mxEvent,
diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js
index 56a6609cc7..222fcea552 100644
--- a/src/components/views/rooms/ReplyPreview.js
+++ b/src/components/views/rooms/ReplyPreview.js
@@ -87,9 +87,11 @@ export default class ReplyPreview extends React.Component {
                 
                 

                 

-                    
+                    
                 

             

         ;
diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js
index 95503493f7..336c5a721b 100644
--- a/src/components/views/rooms/ReplyTile.js
+++ b/src/components/views/rooms/ReplyTile.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Tulir Asokan 
+Copyright 2020-2021 Tulir Asokan 
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,42 +25,8 @@ import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import {MatrixClient} from 'matrix-js-sdk';
 
-import { objectHasDiff } from '../../../utils/objects';
-
-const eventTileTypes = {
-    'm.room.message': 'messages.MessageEvent',
-    'm.sticker': 'messages.MessageEvent',
-    'm.call.invite': 'messages.TextualEvent',
-    'm.call.answer': 'messages.TextualEvent',
-    'm.call.hangup': 'messages.TextualEvent',
-};
-
-const stateEventTileTypes = {
-    'm.room.aliases': 'messages.TextualEvent',
-    // 'm.room.aliases': 'messages.RoomAliasesEvent', // too complex
-    'm.room.canonical_alias': 'messages.TextualEvent',
-    'm.room.create': 'messages.RoomCreate',
-    'm.room.member': 'messages.TextualEvent',
-    'm.room.name': 'messages.TextualEvent',
-    'm.room.avatar': 'messages.RoomAvatarEvent',
-    'm.room.third_party_invite': 'messages.TextualEvent',
-    'm.room.history_visibility': 'messages.TextualEvent',
-    'm.room.encryption': 'messages.TextualEvent',
-    'm.room.topic': 'messages.TextualEvent',
-    'm.room.power_levels': 'messages.TextualEvent',
-    'm.room.pinned_events': 'messages.TextualEvent',
-    'm.room.server_acl': 'messages.TextualEvent',
-    'im.vector.modular.widgets': 'messages.TextualEvent',
-    'm.room.tombstone': 'messages.TextualEvent',
-    'm.room.join_rules': 'messages.TextualEvent',
-    'm.room.guest_access': 'messages.TextualEvent',
-    'm.room.related_groups': 'messages.TextualEvent',
-};
-
-function getHandlerTile(ev) {
-    const type = ev.getType();
-    return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
-}
+import {objectHasDiff} from '../../../utils/objects';
+import {getHandlerTile} from "./EventTile";
 
 class ReplyTile extends React.Component {
     static contextTypes = {
@@ -94,7 +60,7 @@ class ReplyTile extends React.Component {
             return true;
         }
 
-        return !this._propsEqual(this.props, nextProps);
+        return objectHasDiff(this.props, nextProps);
     }
 
     componentWillUnmount() {
@@ -108,28 +74,6 @@ class ReplyTile extends React.Component {
         }
     }
 
-    _propsEqual(objA, objB) {
-        const keysA = Object.keys(objA);
-        const keysB = Object.keys(objB);
-
-        if (keysA.length !== keysB.length) {
-            return false;
-        }
-
-        for (let i = 0; i < keysA.length; i++) {
-            const key = keysA[i];
-
-            if (!objB.hasOwnProperty(key)) {
-                return false;
-            }
-
-            if (objA[key] !== objB[key]) {
-                return false;
-            }
-        }
-        return true;
-    }
-
     onClick(e) {
         // This allows the permalink to be opened in a new tab/window or copied as
         // matrix.to, but also for it to enable routing within Riot when clicked.

From 9f66bd0f652f0aeee604471a1509c9f9b6af37fc Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Tue, 15 Jun 2021 17:48:16 +0300
Subject: [PATCH 018/179] Remove extra space

---
 src/components/views/rooms/ReplyPreview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js
index 3cd88902ce..222fcea552 100644
--- a/src/components/views/rooms/ReplyPreview.js
+++ b/src/components/views/rooms/ReplyPreview.js
@@ -89,7 +89,7 @@ export default class ReplyPreview extends React.Component {
                 

                     
                 


From 4ec8cf11ea572d7e5ac3e1f27bc95e5ac3f9975d Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Tue, 15 Jun 2021 18:52:40 -0400
Subject: [PATCH 019/179] Add more types to TextForEvent

Signed-off-by: Robin Townsend 
---
 src/TextForEvent.ts | 50 +++++++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 649c53664e..6956da098e 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -13,6 +13,8 @@ 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.
 */
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+
 import {MatrixClientPeg} from './MatrixClientPeg';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
@@ -25,7 +27,7 @@ import {WIDGET_LAYOUT_EVENT_TYPE} from "./stores/widgets/WidgetLayoutStore";
 // any text to display at all. For this reason they return deferred values
 // to avoid the expense of looking up translations when they're not needed.
 
-function textForMemberEvent(ev): () => string | null {
+function textForMemberEvent(ev: MatrixEvent): () => string | null {
     // XXX: SYJS-16 "sender is sometimes null for join messages"
     const senderName = ev.sender ? ev.sender.name : ev.getSender();
     const targetName = ev.target ? ev.target.name : ev.getStateKey();
@@ -107,7 +109,7 @@ function textForMemberEvent(ev): () => string | null {
     }
 }
 
-function textForTopicEvent(ev): () => string | null {
+function textForTopicEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     return () => _t('%(senderDisplayName)s changed the topic to "%(topic)s".', {
         senderDisplayName,
@@ -115,7 +117,7 @@ function textForTopicEvent(ev): () => string | null {
     });
 }
 
-function textForRoomNameEvent(ev): () => string | null {
+function textForRoomNameEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
 
     if (!ev.getContent().name || ev.getContent().name.trim().length === 0) {
@@ -134,12 +136,12 @@ function textForRoomNameEvent(ev): () => string | null {
     });
 }
 
-function textForTombstoneEvent(ev): () => string | null {
+function textForTombstoneEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     return () => _t('%(senderDisplayName)s upgraded this room.', {senderDisplayName});
 }
 
-function textForJoinRulesEvent(ev): () => string | null {
+function textForJoinRulesEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     switch (ev.getContent().join_rule) {
         case "public":
@@ -159,7 +161,7 @@ function textForJoinRulesEvent(ev): () => string | null {
     }
 }
 
-function textForGuestAccessEvent(ev): () => string | null {
+function textForGuestAccessEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     switch (ev.getContent().guest_access) {
         case "can_join":
@@ -175,7 +177,7 @@ function textForGuestAccessEvent(ev): () => string | null {
     }
 }
 
-function textForRelatedGroupsEvent(ev): () => string | null {
+function textForRelatedGroupsEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     const groups = ev.getContent().groups || [];
     const prevGroups = ev.getPrevContent().groups || [];
@@ -205,7 +207,7 @@ function textForRelatedGroupsEvent(ev): () => string | null {
     }
 }
 
-function textForServerACLEvent(ev): () => string | null {
+function textForServerACLEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     const prevContent = ev.getPrevContent();
     const current = ev.getContent();
@@ -235,7 +237,7 @@ function textForServerACLEvent(ev): () => string | null {
     return getText;
 }
 
-function textForMessageEvent(ev): () => string | null {
+function textForMessageEvent(ev: MatrixEvent): () => string | null {
     return () => {
         const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
         let message = senderDisplayName + ': ' + ev.getContent().body;
@@ -248,7 +250,7 @@ function textForMessageEvent(ev): () => string | null {
     };
 }
 
-function textForCanonicalAliasEvent(ev): () => string | null {
+function textForCanonicalAliasEvent(ev: MatrixEvent): () => string | null {
     const senderName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     const oldAlias = ev.getPrevContent().alias;
     const oldAltAliases = ev.getPrevContent().alt_aliases || [];
@@ -299,7 +301,7 @@ function textForCanonicalAliasEvent(ev): () => string | null {
     });
 }
 
-function textForCallAnswerEvent(event): () => string | null {
+function textForCallAnswerEvent(event: MatrixEvent): () => string | null {
     return () => {
         const senderName = event.sender ? event.sender.name : _t('Someone');
         const supported = MatrixClientPeg.get().supportsVoip() ? '' : _t('(not supported by this browser)');
@@ -307,7 +309,7 @@ function textForCallAnswerEvent(event): () => string | null {
     };
 }
 
-function textForCallHangupEvent(event): () => string | null {
+function textForCallHangupEvent(event: MatrixEvent): () => string | null {
     const getSenderName = () => event.sender ? event.sender.name : _t('Someone');
     const eventContent = event.getContent();
     let getReason = () => "";
@@ -344,14 +346,14 @@ function textForCallHangupEvent(event): () => string | null {
     return () => _t('%(senderName)s ended the call.', {senderName: getSenderName()}) + ' ' + getReason();
 }
 
-function textForCallRejectEvent(event): () => string | null {
+function textForCallRejectEvent(event: MatrixEvent): () => string | null {
     return () => {
         const senderName = event.sender ? event.sender.name : _t('Someone');
         return _t('%(senderName)s declined the call.', {senderName});
     };
 }
 
-function textForCallInviteEvent(event): () => string | null {
+function textForCallInviteEvent(event: MatrixEvent): () => string | null {
     const getSenderName = () => event.sender ? event.sender.name : _t('Someone');
     // FIXME: Find a better way to determine this from the event?
     let isVoice = true;
@@ -383,7 +385,7 @@ function textForCallInviteEvent(event): () => string | null {
     }
 }
 
-function textForThreePidInviteEvent(event): () => string | null {
+function textForThreePidInviteEvent(event: MatrixEvent): () => string | null {
     const senderName = event.sender ? event.sender.name : event.getSender();
 
     if (!isValid3pidInvite(event)) {
@@ -399,7 +401,7 @@ function textForThreePidInviteEvent(event): () => string | null {
     });
 }
 
-function textForHistoryVisibilityEvent(event): () => string | null {
+function textForHistoryVisibilityEvent(event: MatrixEvent): () => string | null {
     const senderName = event.sender ? event.sender.name : event.getSender();
     switch (event.getContent().history_visibility) {
         case 'invited':
@@ -421,7 +423,7 @@ function textForHistoryVisibilityEvent(event): () => string | null {
 }
 
 // Currently will only display a change if a user's power level is changed
-function textForPowerEvent(event): () => string | null {
+function textForPowerEvent(event: MatrixEvent): () => string | null {
     const senderName = event.sender ? event.sender.name : event.getSender();
     if (!event.getPrevContent() || !event.getPrevContent().users ||
         !event.getContent() || !event.getContent().users) {
@@ -466,12 +468,12 @@ function textForPowerEvent(event): () => string | null {
     });
 }
 
-function textForPinnedEvent(event): () => string | null {
+function textForPinnedEvent(event: MatrixEvent): () => string | null {
     const senderName = event.sender ? event.sender.name : event.getSender();
     return () => _t("%(senderName)s changed the pinned messages for the room.", {senderName});
 }
 
-function textForWidgetEvent(event): () => string | null {
+function textForWidgetEvent(event: MatrixEvent): () => string | null {
     const senderName = event.getSender();
     const {name: prevName, type: prevType, url: prevUrl} = event.getPrevContent();
     const {name, type, url} = event.getContent() || {};
@@ -501,12 +503,12 @@ function textForWidgetEvent(event): () => string | null {
     }
 }
 
-function textForWidgetLayoutEvent(event): () => string | null {
+function textForWidgetLayoutEvent(event: MatrixEvent): () => string | null {
     const senderName = event.sender?.name || event.getSender();
     return () => _t("%(senderName)s has updated the widget layout", {senderName});
 }
 
-function textForMjolnirEvent(event): () => string | null {
+function textForMjolnirEvent(event: MatrixEvent): () => string | null {
     const senderName = event.getSender();
     const {entity: prevEntity} = event.getPrevContent();
     const {entity, recommendation, reason} = event.getContent();
@@ -594,7 +596,7 @@ function textForMjolnirEvent(event): () => string | null {
 }
 
 interface IHandlers {
-    [type: string]: (ev: any) => (() => string | null);
+    [type: string]: (ev: MatrixEvent) => (() => string | null);
 }
 
 const handlers: IHandlers = {
@@ -630,12 +632,12 @@ for (const evType of ALL_RULE_TYPES) {
     stateHandlers[evType] = textForMjolnirEvent;
 }
 
-export function hasText(ev): boolean {
+export function hasText(ev: MatrixEvent): boolean {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
     return Boolean(handler?.(ev));
 }
 
-export function textForEvent(ev): string {
+export function textForEvent(ev: MatrixEvent): string {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
     return handler?.(ev)?.() || '';
 }

From 819fe419b749f641a941a21cb21c08fbc637aca3 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Tue, 15 Jun 2021 18:59:42 -0400
Subject: [PATCH 020/179] Allow using cached setting values in TextForEvent

Signed-off-by: Robin Townsend 
---
 src/TextForEvent.ts | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 6956da098e..652a1d6e54 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -27,7 +27,7 @@ import {WIDGET_LAYOUT_EVENT_TYPE} from "./stores/widgets/WidgetLayoutStore";
 // any text to display at all. For this reason they return deferred values
 // to avoid the expense of looking up translations when they're not needed.
 
-function textForMemberEvent(ev: MatrixEvent): () => string | null {
+function textForMemberEvent(ev: MatrixEvent, showHiddenEvents?: boolean): () => string | null {
     // XXX: SYJS-16 "sender is sometimes null for join messages"
     const senderName = ev.sender ? ev.sender.name : ev.getSender();
     const targetName = ev.target ? ev.target.name : ev.getStateKey();
@@ -77,7 +77,7 @@ function textForMemberEvent(ev: MatrixEvent): () => string | null {
                     return () => _t('%(senderName)s changed their profile picture.', {senderName});
                 } else if (!prevContent.avatar_url && content.avatar_url) {
                     return () => _t('%(senderName)s set a profile picture.', {senderName});
-                } else if (SettingsStore.getValue("showHiddenEventsInTimeline")) {
+                } else if (showHiddenEvents ?? SettingsStore.getValue("showHiddenEventsInTimeline")) {
                     // This is a null rejoin, it will only be visible if the Labs option is enabled
                     return () => _t("%(senderName)s made no change.", {senderName});
                 } else {
@@ -596,7 +596,7 @@ function textForMjolnirEvent(event: MatrixEvent): () => string | null {
 }
 
 interface IHandlers {
-    [type: string]: (ev: MatrixEvent) => (() => string | null);
+    [type: string]: (ev: MatrixEvent, showHiddenEvents?: boolean) => (() => string | null);
 }
 
 const handlers: IHandlers = {
@@ -632,12 +632,24 @@ for (const evType of ALL_RULE_TYPES) {
     stateHandlers[evType] = textForMjolnirEvent;
 }
 
-export function hasText(ev: MatrixEvent): boolean {
+/**
+ * Determines whether the given event has text to display.
+ * @param ev The event
+ * @param showHiddenEvents An optional cached setting value for showHiddenEventsInTimeline
+ *     to avoid hitting the settings store
+ */
+export function hasText(ev: MatrixEvent, showHiddenEvents?: boolean): boolean {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
-    return Boolean(handler?.(ev));
+    return Boolean(handler?.(ev, showHiddenEvents));
 }
 
-export function textForEvent(ev: MatrixEvent): string {
+/**
+ * Gets the textual content of the given event.
+ * @param ev The event
+ * @param showHiddenEvents An optional cached setting value for showHiddenEventsInTimeline
+ *     to avoid hitting the settings store
+ */
+export function textForEvent(ev: MatrixEvent, showHiddenEvents?: boolean): string {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
-    return handler?.(ev)?.() || '';
+    return handler?.(ev, showHiddenEvents)?.() || '';
 }

From af11878e0c22212093c5a85aa4ce6b9a3dbc77b2 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Wed, 16 Jun 2021 20:40:47 -0400
Subject: [PATCH 021/179] Use cached setting values when calling TextForEvent

Signed-off-by: Robin Townsend 
---
 src/components/structures/MessagePanel.js      | 16 +++++++++-------
 src/components/structures/RoomView.tsx         |  7 ++++++-
 src/components/structures/TimelinePanel.js     |  3 ++-
 src/components/views/messages/TextualEvent.js  |  5 ++++-
 src/components/views/rooms/EventTile.tsx       |  4 ++--
 src/components/views/rooms/SearchResultTile.js |  5 ++++-
 src/contexts/RoomContext.ts                    |  1 +
 7 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index eb9611a6fc..b8d3f4f830 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -41,7 +41,7 @@ const continuedTypes = ['m.sticker', 'm.room.message'];
 
 // check if there is a previous event and it has the same sender as this event
 // and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
-function shouldFormContinuation(prevEvent, mxEvent) {
+function shouldFormContinuation(prevEvent, mxEvent, showHiddenEvents) {
     // sanity check inputs
     if (!prevEvent || !prevEvent.sender || !mxEvent.sender) return false;
     // check if within the max continuation period
@@ -61,7 +61,7 @@ function shouldFormContinuation(prevEvent, mxEvent) {
         mxEvent.sender.getMxcAvatarUrl() !== prevEvent.sender.getMxcAvatarUrl()) return false;
 
     // if we don't have tile for previous event then it was shown by showHiddenEvents and has no SenderProfile
-    if (!haveTileForEvent(prevEvent)) return false;
+    if (!haveTileForEvent(prevEvent, showHiddenEvents)) return false;
 
     return true;
 }
@@ -202,7 +202,8 @@ export default class MessagePanel extends React.Component {
         this._readReceiptsByUserId = {};
 
         // Cache hidden events setting on mount since Settings is expensive to
-        // query, and we check this in a hot code path.
+        // query, and we check this in a hot code path. This is also cached in
+        // our RoomContext, however we still need a fallback for roomless MessagePanels.
         this._showHiddenEventsInTimeline =
             SettingsStore.getValue("showHiddenEventsInTimeline");
 
@@ -372,11 +373,11 @@ export default class MessagePanel extends React.Component {
             return false; // ignored = no show (only happens if the ignore happens after an event was received)
         }
 
-        if (this._showHiddenEventsInTimeline) {
+        if (this.context?.showHiddenEventsInTimeline ?? this._showHiddenEventsInTimeline) {
             return true;
         }
 
-        if (!haveTileForEvent(mxEv)) {
+        if (!haveTileForEvent(mxEv, this.context?.showHiddenEventsInTimeline)) {
             return false; // no tile = no show
         }
 
@@ -613,7 +614,8 @@ export default class MessagePanel extends React.Component {
         }
 
         // is this a continuation of the previous message?
-        const continuation = !wantsDateSeparator && shouldFormContinuation(prevEvent, mxEv);
+        const continuation = !wantsDateSeparator &&
+            shouldFormContinuation(prevEvent, mxEv, this.context?.showHiddenEventsInTimeline);
 
         const eventId = mxEv.getId();
         const highlight = (eventId === this.props.highlightedEventId);
@@ -1168,7 +1170,7 @@ class MemberGrouper {
     add(ev) {
         if (ev.getType() === 'm.room.member') {
             // We can ignore any events that don't actually have a message to display
-            if (!hasText(ev)) return;
+            if (!hasText(ev, this.context?.showHiddenEventsInTimeline)) return;
         }
         this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
             ev.getId(),
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index fe90d2f873..d1c68f0cc7 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -181,6 +181,7 @@ export interface IState {
     canReply: boolean;
     layout: Layout;
     lowBandwidth: boolean;
+    showHiddenEventsInTimeline: boolean;
     showReadReceipts: boolean;
     showRedactions: boolean;
     showJoinLeaves: boolean;
@@ -244,6 +245,7 @@ export default class RoomView extends React.Component {
             canReply: false,
             layout: SettingsStore.getValue("layout"),
             lowBandwidth: SettingsStore.getValue("lowBandwidth"),
+            showHiddenEventsInTimeline: SettingsStore.getValue("showHiddenEventsInTimeline"),
             showReadReceipts: true,
             showRedactions: true,
             showJoinLeaves: true,
@@ -282,6 +284,9 @@ export default class RoomView extends React.Component {
             SettingsStore.watchSetting("lowBandwidth", null, () =>
                 this.setState({ lowBandwidth: SettingsStore.getValue("lowBandwidth") }),
             ),
+            SettingsStore.watchSetting("showHiddenEventsInTimeline", null, () =>
+                this.setState({ showHiddenEventsInTimeline: SettingsStore.getValue("showHiddenEventsInTimeline") }),
+            ),
         ];
     }
 
@@ -1411,7 +1416,7 @@ export default class RoomView extends React.Component {
                 continue;
             }
 
-            if (!haveTileForEvent(mxEv)) {
+            if (!haveTileForEvent(mxEv, this.state.showHiddenEventsInTimeline)) {
                 // XXX: can this ever happen? It will make the result count
                 // not match the displayed count.
                 continue;
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index bb62745d98..20f70df4dc 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -1291,7 +1291,8 @@ class TimelinePanel extends React.Component {
 
             const shouldIgnore = !!ev.status || // local echo
                 (ignoreOwn && ev.sender && ev.sender.userId == myUserId);   // own message
-            const isWithoutTile = !haveTileForEvent(ev) || shouldHideEvent(ev, this.context);
+            const isWithoutTile = !haveTileForEvent(ev, this.context?.showHiddenEventsInTimeline) ||
+                shouldHideEvent(ev, this.context);
 
             if (isWithoutTile || !node) {
                 // don't start counting if the event should be ignored,
diff --git a/src/components/views/messages/TextualEvent.js b/src/components/views/messages/TextualEvent.js
index a020cc6c52..0cdd573076 100644
--- a/src/components/views/messages/TextualEvent.js
+++ b/src/components/views/messages/TextualEvent.js
@@ -17,6 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import RoomContext from "../../../contexts/RoomContext";
 import * as TextForEvent from "../../../TextForEvent";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
@@ -27,8 +28,10 @@ export default class TextualEvent extends React.Component {
         mxEvent: PropTypes.object.isRequired,
     };
 
+    static contextType = RoomContext;
+
     render() {
-        const text = TextForEvent.textForEvent(this.props.mxEvent);
+        const text = TextForEvent.textForEvent(this.props.mxEvent, this.context?.showHiddenEventsInTimeline);
         if (text == null || text.length === 0) return null;
         return (
             
{ text }

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 85b9cac2c4..8de371ea15 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1217,7 +1217,7 @@ function isMessageEvent(ev) {
     return (messageTypes.includes(ev.getType()));
 }
 
-export function haveTileForEvent(e) {
+export function haveTileForEvent(e: MatrixEvent, showHiddenEvents?: boolean) {
     // Only messages have a tile (black-rectangle) if redacted
     if (e.isRedacted() && !isMessageEvent(e)) return false;
 
@@ -1227,7 +1227,7 @@ export function haveTileForEvent(e) {
     const handler = getHandlerTile(e);
     if (handler === undefined) return false;
     if (handler === 'messages.TextualEvent') {
-        return hasText(e);
+        return hasText(e, showHiddenEvents);
     } else if (handler === 'messages.RoomCreate') {
         return Boolean(e.getContent()['predecessor']);
     } else {
diff --git a/src/components/views/rooms/SearchResultTile.js b/src/components/views/rooms/SearchResultTile.js
index 3b79aa6246..2963265317 100644
--- a/src/components/views/rooms/SearchResultTile.js
+++ b/src/components/views/rooms/SearchResultTile.js
@@ -18,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
+import RoomContext from "../../../contexts/RoomContext";
 import {haveTileForEvent} from "./EventTile";
 import SettingsStore from "../../../settings/SettingsStore";
 import {UIFeature} from "../../../settings/UIFeature";
@@ -38,6 +39,8 @@ export default class SearchResultTile extends React.Component {
         onHeightChanged: PropTypes.func,
     };
 
+    static contextType = RoomContext;
+
     render() {
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
         const EventTile = sdk.getComponent('rooms.EventTile');
@@ -57,7 +60,7 @@ export default class SearchResultTile extends React.Component {
             if (!contextual) {
                 highlights = this.props.searchHighlights;
             }
-            if (haveTileForEvent(ev)) {
+            if (haveTileForEvent(ev, this.context?.showHiddenEventsInTimeline)) {
                 ret.push((
                     ({
     canReply: false,
     layout: Layout.Group,
     lowBandwidth: false,
+    showHiddenEventsInTimeline: false,
     showReadReceipts: true,
     showRedactions: true,
     showJoinLeaves: true,

From 9e2ab0d432d5ef7facae1ecccdf25dd71b0baeca Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Thu, 17 Jun 2021 07:35:40 -0400
Subject: [PATCH 022/179] Fix import whitespace in TextForEvent

Signed-off-by: Robin Townsend 
---
 src/TextForEvent.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 652a1d6e54..5275ff0a63 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -13,15 +13,15 @@ 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.
 */
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
-import {isValid3pidInvite} from "./RoomInvite";
+import { isValid3pidInvite } from "./RoomInvite";
 import SettingsStore from "./settings/SettingsStore";
-import {ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES} from "./mjolnir/BanList";
-import {WIDGET_LAYOUT_EVENT_TYPE} from "./stores/widgets/WidgetLayoutStore";
+import { ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES } from "./mjolnir/BanList";
+import { WIDGET_LAYOUT_EVENT_TYPE } from "./stores/widgets/WidgetLayoutStore";
 
 // These functions are frequently used just to check whether an event has
 // any text to display at all. For this reason they return deferred values

From e4250e254c7253dc1679b0e9ae84065a35fa6b61 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Thu, 17 Jun 2021 09:52:15 -0400
Subject: [PATCH 023/179] Propertly thread showHiddenEventsInTimeline through
 groupers

---
 src/components/structures/MessagePanel.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index b8d3f4f830..16563bd4e9 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -537,7 +537,7 @@ export default class MessagePanel extends React.Component {
 
             if (grouper) {
                 if (grouper.shouldGroup(mxEv)) {
-                    grouper.add(mxEv);
+                    grouper.add(mxEv, this.context?.showHiddenEventsInTimeline);
                     continue;
                 } else {
                     // not part of group, so get the group tiles, close the
@@ -1167,10 +1167,10 @@ class MemberGrouper {
         return isMembershipChange(ev);
     }
 
-    add(ev) {
+    add(ev, showHiddenEvents) {
         if (ev.getType() === 'm.room.member') {
             // We can ignore any events that don't actually have a message to display
-            if (!hasText(ev, this.context?.showHiddenEventsInTimeline)) return;
+            if (!hasText(ev, showHiddenEvents)) return;
         }
         this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
             ev.getId(),

From e35e836052d4f918c36f4c017aabf6a44534d8ae Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Thu, 24 Jun 2021 18:45:23 -0400
Subject: [PATCH 024/179] Convert TextualEvent and SearchResultTile to
 TypeScript

Signed-off-by: Robin Townsend 
---
 .../{TextualEvent.js => TextualEvent.tsx}     | 24 ++++----
 ...archResultTile.js => SearchResultTile.tsx} | 61 +++++++++----------
 2 files changed, 41 insertions(+), 44 deletions(-)
 rename src/components/views/messages/{TextualEvent.js => TextualEvent.tsx} (70%)
 rename src/components/views/rooms/{SearchResultTile.js => SearchResultTile.tsx} (64%)

diff --git a/src/components/views/messages/TextualEvent.js b/src/components/views/messages/TextualEvent.tsx
similarity index 70%
rename from src/components/views/messages/TextualEvent.js
rename to src/components/views/messages/TextualEvent.tsx
index 0cdd573076..e96390d7bc 100644
--- a/src/components/views/messages/TextualEvent.js
+++ b/src/components/views/messages/TextualEvent.tsx
@@ -15,26 +15,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import RoomContext from "../../../contexts/RoomContext";
 import * as TextForEvent from "../../../TextForEvent";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+interface IProps {
+    // The event to show
+    mxEvent: MatrixEvent;
+}
 
 @replaceableComponent("views.messages.TextualEvent")
-export default class TextualEvent extends React.Component {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
-    };
-
+export default class TextualEvent extends React.Component {
     static contextType = RoomContext;
 
-    render() {
+    public render() {
         const text = TextForEvent.textForEvent(this.props.mxEvent, this.context?.showHiddenEventsInTimeline);
         if (text == null || text.length === 0) return null;
-        return (
-            
{ text }

-        );
+        return 
{ text }
;
     }
 }
diff --git a/src/components/views/rooms/SearchResultTile.js b/src/components/views/rooms/SearchResultTile.tsx
similarity index 64%
rename from src/components/views/rooms/SearchResultTile.js
rename to src/components/views/rooms/SearchResultTile.tsx
index 2963265317..8af0fa5abd 100644
--- a/src/components/views/rooms/SearchResultTile.js
+++ b/src/components/views/rooms/SearchResultTile.tsx
@@ -15,41 +15,41 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
+import React from "react";
+import { SearchResult } from "matrix-js-sdk/src/models/search-result";
 import RoomContext from "../../../contexts/RoomContext";
-import {haveTileForEvent} from "./EventTile";
+import { haveTileForEvent } from "./EventTile";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import DateSeparator from "../messages/DateSeparator";
+import EventTile from "./EventTile";
+
+interface IProps {
+    // The details of this result
+    searchResult: SearchResult;
+    // Strings to be highlighted in the results
+    searchHighlights?: string[];
+    // href for the highlights in this result
+    resultLink?: string;
+    onHeightChanged: () => void;
+    permalinkCreator: RoomPermalinkCreator;
+}
 
 @replaceableComponent("views.rooms.SearchResultTile")
-export default class SearchResultTile extends React.Component {
-    static propTypes = {
-        // a matrix-js-sdk SearchResult containing the details of this result
-        searchResult: PropTypes.object.isRequired,
-
-        // a list of strings to be highlighted in the results
-        searchHighlights: PropTypes.array,
-
-        // href for the highlights in this result
-        resultLink: PropTypes.string,
-
-        onHeightChanged: PropTypes.func,
-    };
-
+export default class SearchResultTile extends React.Component {
     static contextType = RoomContext;
 
-    render() {
-        const DateSeparator = sdk.getComponent('messages.DateSeparator');
-        const EventTile = sdk.getComponent('rooms.EventTile');
+    public render() {
         const result = this.props.searchResult;
         const mxEv = result.context.getEvent();
         const eventId = mxEv.getId();
 
         const ts1 = mxEv.getTs();
         const ret = [];
+        const layout = SettingsStore.getValue("layout");
+        const isTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
         const alwaysShowTimestamps = SettingsStore.getValue("alwaysShowTimestamps");
 
         const timeline = result.context.getTimeline();
@@ -61,25 +61,24 @@ export default class SearchResultTile extends React.Component {
                 highlights = this.props.searchHighlights;
             }
             if (haveTileForEvent(ev, this.context?.showHiddenEventsInTimeline)) {
-                ret.push((
+                ret.push(
                     
-                ));
+                    />,
+                );
             }
         }
-        return (
-            
  • 
-                { ret }
-            
    • );
+
+        return 
  • { ret }
    • ;
     }
 }

From a921d32f44fdedc6489158ab69c43347da0bffcc Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Thu, 24 Jun 2021 18:51:46 -0400
Subject: [PATCH 025/179] Fix lint

Signed-off-by: Robin Townsend 
---
 src/components/structures/MessagePanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index c7d9944435..19ef6b3350 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/src/components/structures/MessagePanel.tsx
@@ -56,7 +56,7 @@ const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
 function shouldFormContinuation(
     prevEvent: MatrixEvent,
     mxEvent: MatrixEvent,
-    showHiddenEvents: boolean
+    showHiddenEvents: boolean,
 ): boolean {
     // sanity check inputs
     if (!prevEvent || !prevEvent.sender || !mxEvent.sender) return false;

From c0e10218d9039a248974959e8965c7218493c67a Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Tue, 29 Jun 2021 22:42:46 -0400
Subject: [PATCH 026/179] Fix lints

Signed-off-by: Robin Townsend 
---
 src/TextForEvent.tsx                           | 6 +++---
 src/components/views/messages/TextualEvent.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index ee57f7dacb..c6ade33cbe 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -693,9 +693,9 @@ export function hasText(ev: MatrixEvent, showHiddenEvents?: boolean): boolean {
  * @param showHiddenEvents An optional cached setting value for showHiddenEventsInTimeline
  *     to avoid hitting the settings store
  */
-export function textForEvent(
-    ev: MatrixEvent, allowJSX: boolean = false, showHiddenEvents?: boolean
-): string | JSX.Element {
+export function textForEvent(ev: MatrixEvent): string;
+export function textForEvent(ev: MatrixEvent, allowJSX: true, showHiddenEvents?: boolean): string | JSX.Element;
+export function textForEvent(ev: MatrixEvent, allowJSX = false, showHiddenEvents?: boolean): string | JSX.Element {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
     return handler?.(ev, allowJSX, showHiddenEvents)?.() ?? '';
 }
diff --git a/src/components/views/messages/TextualEvent.tsx b/src/components/views/messages/TextualEvent.tsx
index ab25b21323..beaf605e1f 100644
--- a/src/components/views/messages/TextualEvent.tsx
+++ b/src/components/views/messages/TextualEvent.tsx
@@ -32,7 +32,7 @@ export default class TextualEvent extends React.Component {
 
     public render() {
         const text = TextForEvent.textForEvent(this.props.mxEvent, true, this.context?.showHiddenEventsInTimeline);
-        if (text == null || text.length === 0) return null;
+        if (!text) return null;
         return 
    { text }
    ;
     }
 }

From 598689b059196c47e1d1455c823383fd062807c4 Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Fri, 2 Jul 2021 12:56:08 +0300
Subject: [PATCH 027/179] Run eslint

---
 src/components/views/messages/MImageReplyBody.js | 4 ++--
 src/components/views/rooms/ReplyTile.js          | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js
index 5ace22a560..2ed7a637bd 100644
--- a/src/components/views/messages/MImageReplyBody.js
+++ b/src/components/views/messages/MImageReplyBody.js
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import {_td} from "../../../languageHandler";
+import { _td } from "../../../languageHandler";
 import * as sdk from "../../../index";
 import MImageBody from './MImageBody';
-import {presentableTextForFile} from "./MFileBody";
+import { presentableTextForFile } from "./MFileBody";
 
 export default class MImageReplyBody extends MImageBody {
     onClick(ev) {
diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js
index 336c5a721b..23dcdc21a3 100644
--- a/src/components/views/rooms/ReplyTile.js
+++ b/src/components/views/rooms/ReplyTile.js
@@ -23,10 +23,10 @@ import * as sdk from '../../../index';
 
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
-import {MatrixClient} from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk';
 
-import {objectHasDiff} from '../../../utils/objects';
-import {getHandlerTile} from "./EventTile";
+import { objectHasDiff } from '../../../utils/objects';
+import { getHandlerTile } from "./EventTile";
 
 class ReplyTile extends React.Component {
     static contextTypes = {
@@ -112,7 +112,7 @@ class ReplyTile extends React.Component {
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
         if (!tileHandler) {
-            const {mxEvent} = this.props;
+            const { mxEvent } = this.props;
             console.warn(`Event type not supported: type:${mxEvent.getType()} isState:${mxEvent.isState()}`);
             return 
    
                 { _t('This event could not be displayed') }

From 38710eab88e4fb8a55948d431319982ba9a733df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 13:31:56 +0200
Subject: [PATCH 028/179] Export IProps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 2628170f9c..985160019e 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -43,14 +43,14 @@ const ZOOM_COEFFICIENT = 0.0025;
 // If we have moved only this much we can zoom
 const ZOOM_DISTANCE = 10;
 
-interface IProps {
+export interface IProps {
     src: string; // the source of the image being displayed
     name?: string; // the main title ('name') for the image
     link?: string; // the link (if any) applied to the name of the image
     width?: number; // width of the image src in pixels
     height?: number; // height of the image src in pixels
     fileSize?: number; // size of the image src in bytes
-    onFinished(): void; // callback when the lightbox is dismissed
+    onFinished?(): void; // callback when the lightbox is dismissed
 
     // the event (if any) that the Image is displaying. Used for event-specific stuff like
     // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit

From 869f31deef3a917b653ce36b4a24efd3d1bc7ed6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 13:46:42 +0200
Subject: [PATCH 029/179] Convert MImageBody to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../{MImageBody.js => MImageBody.tsx}         | 178 +++++++++---------
 1 file changed, 92 insertions(+), 86 deletions(-)
 rename src/components/views/messages/{MImageBody.js => MImageBody.tsx} (80%)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.tsx
similarity index 80%
rename from src/components/views/messages/MImageBody.js
rename to src/components/views/messages/MImageBody.tsx
index 5566f5aec0..c2553b51a3 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.tsx
@@ -17,8 +17,6 @@ limitations under the License.
 */
 
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
-
 import MFileBody from './MFileBody';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
@@ -31,36 +29,48 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
 import BlurhashPlaceholder from "../elements/BlurhashPlaceholder";
 import { BLURHASH_FIELD } from "../../../ContentMessages";
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
+import { IMediaEventContent } from '../../../customisations/models/IMediaEventContent';
+import { IProps as ImageViewIProps } from "../elements/ImageView";
+
+export interface IProps {
+    /* the MatrixEvent to show */
+    mxEvent: MatrixEvent,
+    /* called when the image has loaded */
+    onHeightChanged(): void,
+
+    /* the maximum image height to use */
+    maxImageHeight?: number,
+
+    /* the permalinkCreator */
+    permalinkCreator?: RoomPermalinkCreator,
+}
+
+interface IState {
+    decryptedUrl?: string,
+    decryptedThumbnailUrl?: string,
+    decryptedBlob?: Blob,
+    error,
+    imgError: boolean,
+    imgLoaded: boolean,
+    loadedImageDimensions?: {
+        naturalWidth: number;
+        naturalHeight: number;
+    },
+    hover: boolean,
+    showImage: boolean,
+}
 
 @replaceableComponent("views.messages.MImageBody")
-export default class MImageBody extends React.Component {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
-
-        /* called when the image has loaded */
-        onHeightChanged: PropTypes.func.isRequired,
-
-        /* the maximum image height to use */
-        maxImageHeight: PropTypes.number,
-
-        /* the permalinkCreator */
-        permalinkCreator: PropTypes.object,
-    };
-
+export default class MImageBody extends React.Component {
     static contextType = MatrixClientContext;
+    private unmounted = true;
+    private image = createRef();
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
-        this.onImageError = this.onImageError.bind(this);
-        this.onImageLoad = this.onImageLoad.bind(this);
-        this.onImageEnter = this.onImageEnter.bind(this);
-        this.onImageLeave = this.onImageLeave.bind(this);
-        this.onClientSync = this.onClientSync.bind(this);
-        this.onClick = this.onClick.bind(this);
-        this._isGif = this._isGif.bind(this);
-
         this.state = {
             decryptedUrl: null,
             decryptedThumbnailUrl: null,
@@ -72,12 +82,10 @@ export default class MImageBody extends React.Component {
             hover: false,
             showImage: SettingsStore.getValue("showImages"),
         };
-
-        this._image = createRef();
     }
 
     // FIXME: factor this out and apply it to MVideoBody and MAudioBody too!
-    onClientSync(syncState, prevState) {
+    private onClientSync = (syncState, prevState): void => {
         if (this.unmounted) return;
         // Consider the client reconnected if there is no error with syncing.
         // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
@@ -88,15 +96,15 @@ export default class MImageBody extends React.Component {
                 imgError: false,
             });
         }
-    }
+    };
 
-    showImage() {
+    protected showImage(): void {
         localStorage.setItem("mx_ShowImage_" + this.props.mxEvent.getId(), "true");
         this.setState({ showImage: true });
-        this._downloadImage();
+        this.downloadImage();
     }
 
-    onClick(ev) {
+    protected onClick = (ev: React.MouseEvent): void => {
         if (ev.button === 0 && !ev.metaKey) {
             ev.preventDefault();
             if (!this.state.showImage) {
@@ -104,12 +112,12 @@ export default class MImageBody extends React.Component {
                 return;
             }
 
-            const content = this.props.mxEvent.getContent();
-            const httpUrl = this._getContentUrl();
+            const content = this.props.mxEvent.getContent() as IMediaEventContent;
+            const httpUrl = this.getContentUrl();
             const ImageView = sdk.getComponent("elements.ImageView");
-            const params = {
+            const params: ImageViewIProps = {
                 src: httpUrl,
-                name: content.body && content.body.length > 0 ? content.body : _t('Attachment'),
+                name: content.body?.length > 0 ? content.body : _t('Attachment'),
                 mxEvent: this.props.mxEvent,
                 permalinkCreator: this.props.permalinkCreator,
             };
@@ -122,58 +130,54 @@ export default class MImageBody extends React.Component {
 
             Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
         }
-    }
+    };
 
-    _isGif() {
+    private isGif = (): boolean => {
         const content = this.props.mxEvent.getContent();
-        return (
-            content &&
-            content.info &&
-            content.info.mimetype === "image/gif"
-        );
-    }
+        return content?.info?.mimetype === "image/gif";
+    };
 
-    onImageEnter(e) {
+    private onImageEnter = (e: React.MouseEvent): void => {
         this.setState({ hover: true });
 
-        if (!this.state.showImage || !this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
             return;
         }
-        const imgElement = e.target;
-        imgElement.src = this._getContentUrl();
-    }
+        const imgElement = e.target as HTMLImageElement;
+        imgElement.src = this.getContentUrl();
+    };
 
-    onImageLeave(e) {
+    private onImageLeave = (e: React.MouseEvent): void => {
         this.setState({ hover: false });
 
-        if (!this.state.showImage || !this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
             return;
         }
-        const imgElement = e.target;
-        imgElement.src = this._getThumbUrl();
-    }
+        const imgElement = e.target as HTMLImageElement;
+        imgElement.src = this.getThumbUrl();
+    };
 
-    onImageError() {
+    private onImageError = (): void => {
         this.setState({
             imgError: true,
         });
-    }
+    };
 
-    onImageLoad() {
+    private onImageLoad = (): void => {
         this.props.onHeightChanged();
 
         let loadedImageDimensions;
 
-        if (this._image.current) {
-            const { naturalWidth, naturalHeight } = this._image.current;
+        if (this.image.current) {
+            const { naturalWidth, naturalHeight } = this.image.current;
             // this is only used as a fallback in case content.info.w/h is missing
             loadedImageDimensions = { naturalWidth, naturalHeight };
         }
 
         this.setState({ imgLoaded: true, loadedImageDimensions });
-    }
+    };
 
-    _getContentUrl() {
+    protected getContentUrl(): string {
         const media = mediaFromContent(this.props.mxEvent.getContent());
         if (media.isEncrypted) {
             return this.state.decryptedUrl;
@@ -182,7 +186,7 @@ export default class MImageBody extends React.Component {
         }
     }
 
-    _getThumbUrl() {
+    protected getThumbUrl(): string {
         // FIXME: we let images grow as wide as you like, rather than capped to 800x600.
         // So either we need to support custom timeline widths here, or reimpose the cap, otherwise the
         // thumbnail resolution will be unnecessarily reduced.
@@ -190,7 +194,7 @@ export default class MImageBody extends React.Component {
         const thumbWidth = 800;
         const thumbHeight = 600;
 
-        const content = this.props.mxEvent.getContent();
+        const content = this.props.mxEvent.getContent() as IMediaEventContent;
         const media = mediaFromContent(content);
 
         if (media.isEncrypted) {
@@ -218,7 +222,7 @@ export default class MImageBody extends React.Component {
             //   - If there's no sizing info in the event, default to thumbnail
             const info = content.info;
             if (
-                this._isGif() ||
+                this.isGif() ||
                 window.devicePixelRatio === 1.0 ||
                 (!info || !info.w || !info.h || !info.size)
             ) {
@@ -253,7 +257,7 @@ export default class MImageBody extends React.Component {
         }
     }
 
-    _downloadImage() {
+    private downloadImage(): void {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);
@@ -297,7 +301,7 @@ export default class MImageBody extends React.Component {
 
         if (showImage) {
             // Don't download anything becaue we don't want to display anything.
-            this._downloadImage();
+            this.downloadImage();
             this.setState({ showImage: true });
         }
 
@@ -327,7 +331,7 @@ export default class MImageBody extends React.Component {
     _afterComponentWillUnmount() {
     }
 
-    _messageContent(contentUrl, thumbUrl, content) {
+    protected messageContent(contentUrl: string, thumbUrl: string, content: IMediaEventContent): JSX.Element {
         let infoWidth;
         let infoHeight;
 
@@ -348,7 +352,7 @@ export default class MImageBody extends React.Component {
                     imageElement = ;
                 } else {
                     imageElement = (
-                        {content.body};
+            img = ;
             showPlaceholder = false; // because we're hiding the image, so don't show the placeholder.
         }
 
-        if (this._isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
+        if (this.isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
             gifLabel = 
    GIF
    ;
         }
 
@@ -427,14 +431,14 @@ export default class MImageBody extends React.Component {
     }
 
     // Overidden by MStickerBody
-    wrapImage(contentUrl, children) {
+    protected wrapImage(contentUrl: string, children: JSX.Element): JSX.Element {
         return 
             {children}
         ;
     }
 
     // Overidden by MStickerBody
-    getPlaceholder(width, height) {
+    protected getPlaceholder() {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
         if (blurhash) return ;
         return 
    
@@ -443,17 +447,17 @@ export default class MImageBody extends React.Component {
     }
 
     // Overidden by MStickerBody
-    getTooltip() {
+    protected getTooltip() {
         return null;
     }
 
     // Overidden by MStickerBody
-    getFileBody() {
+    protected getFileBody(): JSX.Element {
         return ;
     }
 
     render() {
-        const content = this.props.mxEvent.getContent();
+        const content = this.props.mxEvent.getContent() as IMediaEventContent;
 
         if (this.state.error !== null) {
             return (
@@ -464,15 +468,15 @@ export default class MImageBody extends React.Component {
             );
         }
 
-        const contentUrl = this._getContentUrl();
+        const contentUrl = this.getContentUrl();
         let thumbUrl;
-        if (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (this.isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
             thumbUrl = contentUrl;
         } else {
-            thumbUrl = this._getThumbUrl();
+            thumbUrl = this.getThumbUrl();
         }
 
-        const thumbnail = this._messageContent(contentUrl, thumbUrl, content);
+        const thumbnail = this.messageContent(contentUrl, thumbUrl, content);
         const fileBody = this.getFileBody();
 
         return 
@@ -482,16 +486,18 @@ export default class MImageBody extends React.Component {
     }
 }
 
-export class HiddenImagePlaceholder extends React.PureComponent {
-    static propTypes = {
-        hover: PropTypes.bool,
-    };
+interface PlaceholderIProps {
+    hover?: boolean;
+    maxWidth?: number;
+}
 
+export class HiddenImagePlaceholder extends React.PureComponent {
     render() {
+        const maxWidth = this.props.maxWidth ? this.props.maxWidth + "px" : null;
         let className = 'mx_HiddenImagePlaceholder';
         if (this.props.hover) className += ' mx_HiddenImagePlaceholder_hover';
         return (
-            
    
+            
    
                 
    
                     
                     {_t("Show image")}

From 969be0921023930c91f35827d18df03d68336498 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 13:50:34 +0200
Subject: [PATCH 030/179] Add a few things to IMediaEventContent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/customisations/models/IMediaEventContent.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/customisations/models/IMediaEventContent.ts b/src/customisations/models/IMediaEventContent.ts
index fb05d76a4d..62dfe4ee19 100644
--- a/src/customisations/models/IMediaEventContent.ts
+++ b/src/customisations/models/IMediaEventContent.ts
@@ -32,11 +32,16 @@ export interface IEncryptedFile {
 }
 
 export interface IMediaEventContent {
+    body?: string;
     url?: string; // required on unencrypted media
     file?: IEncryptedFile; // required for *encrypted* media
     info?: {
         thumbnail_url?: string; // eslint-disable-line camelcase
         thumbnail_file?: IEncryptedFile; // eslint-disable-line camelcase
+        mimetype: string;
+        w?: number;
+        h?: number;
+        size?: number;
     };
 }
 

From 5f49b2d374e9da04ab976dbade1e854bc633bac5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 13:53:38 +0200
Subject: [PATCH 031/179] Missing args
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/MImageBody.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index c2553b51a3..c6a4131d1d 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -438,7 +438,7 @@ export default class MImageBody extends React.Component {
     }
 
     // Overidden by MStickerBody
-    protected getPlaceholder() {
+    protected getPlaceholder(width: number, height: number) {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
         if (blurhash) return ;
         return 
    

From 5d78eb4a755ec664062f9c81b54a2db3e387bc43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 14:01:30 +0200
Subject: [PATCH 032/179] Member delimiter rules
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/MImageBody.tsx | 26 ++++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index c6a4131d1d..e29c87599f 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -36,30 +36,30 @@ import { IProps as ImageViewIProps } from "../elements/ImageView";
 
 export interface IProps {
     /* the MatrixEvent to show */
-    mxEvent: MatrixEvent,
+    mxEvent: MatrixEvent;
     /* called when the image has loaded */
-    onHeightChanged(): void,
+    onHeightChanged(): void;
 
     /* the maximum image height to use */
-    maxImageHeight?: number,
+    maxImageHeight?: number;
 
     /* the permalinkCreator */
-    permalinkCreator?: RoomPermalinkCreator,
+    permalinkCreator?: RoomPermalinkCreator;
 }
 
 interface IState {
-    decryptedUrl?: string,
-    decryptedThumbnailUrl?: string,
-    decryptedBlob?: Blob,
-    error,
-    imgError: boolean,
-    imgLoaded: boolean,
+    decryptedUrl?: string;
+    decryptedThumbnailUrl?: string;
+    decryptedBlob?: Blob;
+    error;
+    imgError: boolean;
+    imgLoaded: boolean;
     loadedImageDimensions?: {
         naturalWidth: number;
         naturalHeight: number;
-    },
-    hover: boolean,
-    showImage: boolean,
+    };
+    hover: boolean;
+    showImage: boolean;
 }
 
 @replaceableComponent("views.messages.MImageBody")

From 664503678079c500d970f8dc389981fbead88646 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 14:17:40 +0200
Subject: [PATCH 033/179] Convert MImageReplyBody to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 ...MImageReplyBody.js => MImageReplyBody.tsx} | 27 ++++++++++---------
 .../views/messages/SenderProfile.tsx          |  2 +-
 2 files changed, 15 insertions(+), 14 deletions(-)
 rename src/components/views/messages/{MImageReplyBody.js => MImageReplyBody.tsx} (69%)

diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.tsx
similarity index 69%
rename from src/components/views/messages/MImageReplyBody.js
rename to src/components/views/messages/MImageReplyBody.tsx
index 2ed7a637bd..da720fc00f 100644
--- a/src/components/views/messages/MImageReplyBody.js
+++ b/src/components/views/messages/MImageReplyBody.tsx
@@ -15,22 +15,26 @@ limitations under the License.
 */
 
 import React from "react";
-import { _td } from "../../../languageHandler";
-import * as sdk from "../../../index";
-import MImageBody from './MImageBody';
+import MImageBody, { IProps as MImageBodyIProps } from "./MImageBody";
 import { presentableTextForFile } from "./MFileBody";
+import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
+import SenderProfile from "./SenderProfile";
 
 export default class MImageReplyBody extends MImageBody {
-    onClick(ev) {
-        ev.preventDefault();
+    constructor(props: MImageBodyIProps) {
+        super(props);
     }
 
-    wrapImage(contentUrl, children) {
+    public onClick = (ev: React.MouseEvent): void => {
+        ev.preventDefault();
+    };
+
+    public wrapImage(contentUrl: string, children: JSX.Element): JSX.Element {
         return children;
     }
 
     // Don't show "Download this_file.png ..."
-    getFileBody() {
+    public getFileBody(): JSX.Element {
         return presentableTextForFile(this.props.mxEvent.getContent());
     }
 
@@ -39,17 +43,14 @@ export default class MImageReplyBody extends MImageBody {
             return super.render();
         }
 
-        const content = this.props.mxEvent.getContent();
+        const content = this.props.mxEvent.getContent() as IMediaEventContent;
 
-        const contentUrl = this._getContentUrl();
-        const thumbnail = this._messageContent(contentUrl, this._getThumbUrl(), content);
+        const contentUrl = this.getContentUrl();
+        const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content);
         const fileBody = this.getFileBody();
-        const SenderProfile = sdk.getComponent('messages.SenderProfile');
         const sender = ;
 
         return 
    
diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index 11c3ca4e3c..bdae9cec4a 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -24,7 +24,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 interface IProps {
     mxEvent: MatrixEvent;
-    onClick(): void;
+    onClick?(): void;
     enableFlair: boolean;
 }
 

From 0fe10e4502dfa234ef9e8388e91ac8ca481b99ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 14:22:46 +0200
Subject: [PATCH 034/179]  Fix replies to deleted messages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_RedactedBody.scss | 4 +++-
 res/css/views/rooms/_ReplyTile.scss       | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/res/css/views/messages/_RedactedBody.scss b/res/css/views/messages/_RedactedBody.scss
index 600ac0c6b7..767dfef736 100644
--- a/res/css/views/messages/_RedactedBody.scss
+++ b/res/css/views/messages/_RedactedBody.scss
@@ -20,6 +20,8 @@ limitations under the License.
     padding-left: 20px;
     position: relative;
 
+    line-height: 2.2rem;
+
     &::before {
         height: 14px;
         width: 14px;
@@ -30,7 +32,7 @@ limitations under the License.
         mask-size: contain;
         content: '';
         position: absolute;
-        top: 1px;
+        top: 4px;
         left: 0;
     }
 }
diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index fd68430157..487b616240 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -25,7 +25,8 @@ limitations under the License.
 }
 
 .mx_ReplyTile > a {
-    display: block;
+    display: flex;
+    flex-direction: column;
     text-decoration: none;
     color: $primary-fg-color;
 }

From 9a1b73f86735d12455ec1ac44ffa6de640437dd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 14:51:51 +0200
Subject: [PATCH 035/179] Convert ReplyTile to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../rooms/{ReplyTile.js => ReplyTile.tsx}     | 84 +++++++------------
 1 file changed, 31 insertions(+), 53 deletions(-)
 rename src/components/views/rooms/{ReplyTile.js => ReplyTile.tsx} (72%)

diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.tsx
similarity index 72%
rename from src/components/views/rooms/ReplyTile.js
rename to src/components/views/rooms/ReplyTile.tsx
index 23dcdc21a3..6a01e8dc97 100644
--- a/src/components/views/rooms/ReplyTile.js
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -15,66 +15,52 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { _t, _td } from '../../../languageHandler';
-
-import * as sdk from '../../../index';
-
+import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
-import { MatrixClient } from 'matrix-js-sdk';
-
-import { objectHasDiff } from '../../../utils/objects';
 import { getHandlerTile } from "./EventTile";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
+import SenderProfile from "../messages/SenderProfile";
+import TextualBody from "../messages/TextualBody";
+import MImageReplyBody from "../messages/MImageReplyBody";
+import * as sdk from '../../../index';
 
-class ReplyTile extends React.Component {
-    static contextTypes = {
-        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
-    }
-
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired,
-        isRedacted: PropTypes.bool,
-        permalinkCreator: PropTypes.object,
-        onHeightChanged: PropTypes.func,
-    }
+interface IProps {
+    mxEvent: MatrixEvent;
+    isRedacted?: boolean;
+    permalinkCreator?: RoomPermalinkCreator;
+    highlights?: Array;
+    highlightLink?: string;
+    onHeightChanged?(): void;
+}
 
+export default class ReplyTile extends React.PureComponent {
     static defaultProps = {
-        onHeightChanged: function() {},
-    }
+        onHeightChanged: () => {},
+    };
 
-    constructor(props, context) {
-        super(props, context);
-        this.state = {};
-        this.onClick = this.onClick.bind(this);
-        this._onDecrypted = this._onDecrypted.bind(this);
+    constructor(props: IProps) {
+        super(props);
     }
 
     componentDidMount() {
-        this.props.mxEvent.on("Event.decrypted", this._onDecrypted);
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        if (objectHasDiff(this.state, nextState)) {
-            return true;
-        }
-
-        return objectHasDiff(this.props, nextProps);
+        this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
     }
 
     componentWillUnmount() {
-        this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted);
+        this.props.mxEvent.removeListener("Event.decrypted", this.onDecrypted);
     }
 
-    _onDecrypted() {
+    private onDecrypted = (): void => {
         this.forceUpdate();
         if (this.props.onHeightChanged) {
             this.props.onHeightChanged();
         }
-    }
+    };
 
-    onClick(e) {
+    private onClick = (e: React.MouseEvent): void => {
         // This allows the permalink to be opened in a new tab/window or copied as
         // matrix.to, but also for it to enable routing within Riot when clicked.
         e.preventDefault();
@@ -84,11 +70,9 @@ class ReplyTile extends React.Component {
             highlighted: true,
             room_id: this.props.mxEvent.getRoomId(),
         });
-    }
+    };
 
     render() {
-        const SenderProfile = sdk.getComponent('messages.SenderProfile');
-
         const content = this.props.mxEvent.getContent();
         const msgtype = content.msgtype;
         const eventType = this.props.mxEvent.getType();
@@ -118,6 +102,7 @@ class ReplyTile extends React.Component {
                 { _t('This event could not be displayed') }
             
    ;
         }
+
         const EventTileType = sdk.getComponent(tileHandler);
 
         const classes = classNames({
@@ -135,18 +120,12 @@ class ReplyTile extends React.Component {
         const needsSenderProfile = msgtype !== 'm.image' && tileHandler !== 'messages.RoomCreate' && !isInfoMessage;
 
         if (needsSenderProfile) {
-            let text = null;
-            if (msgtype === 'm.image') text = _td('%(senderName)s sent an image');
-            else if (msgtype === 'm.video') text = _td('%(senderName)s sent a video');
-            else if (msgtype === 'm.file') text = _td('%(senderName)s uploaded a file');
-            sender = ;
+            />;
         }
 
-        const MImageReplyBody = sdk.getComponent('messages.MImageReplyBody');
-        const TextualBody = sdk.getComponent('messages.TextualBody');
         const msgtypeOverrides = {
             "m.image": MImageReplyBody,
             // We don't want a download link for files, just the file name is enough.
@@ -163,7 +142,8 @@ class ReplyTile extends React.Component {
             
    
                 
                     { sender }
-                    
Date: Fri, 2 Jul 2021 14:57:08 +0200
Subject: [PATCH 036/179] i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/i18n/strings/en_EN.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 908c023b48..618d5763fa 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1563,9 +1563,6 @@
     "Seen by %(userName)s at %(dateTime)s": "Seen by %(userName)s at %(dateTime)s",
     "Seen by %(displayName)s (%(userName)s) at %(dateTime)s": "Seen by %(displayName)s (%(userName)s) at %(dateTime)s",
     "Replying": "Replying",
-    "%(senderName)s sent an image": "%(senderName)s sent an image",
-    "%(senderName)s sent a video": "%(senderName)s sent a video",
-    "%(senderName)s uploaded a file": "%(senderName)s uploaded a file",
     "Room %(name)s": "Room %(name)s",
     "Recently visited rooms": "Recently visited rooms",
     "No recently visited rooms": "No recently visited rooms",

From e582b1559b1d6a30f64d0c223a26a043f32e5769 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 15:09:02 +0200
Subject: [PATCH 037/179] Fix redacted messages (again)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_RedactedBody.scss | 4 +---
 res/css/views/rooms/_ReplyTile.scss       | 9 +++++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/res/css/views/messages/_RedactedBody.scss b/res/css/views/messages/_RedactedBody.scss
index 767dfef736..600ac0c6b7 100644
--- a/res/css/views/messages/_RedactedBody.scss
+++ b/res/css/views/messages/_RedactedBody.scss
@@ -20,8 +20,6 @@ limitations under the License.
     padding-left: 20px;
     position: relative;
 
-    line-height: 2.2rem;
-
     &::before {
         height: 14px;
         width: 14px;
@@ -32,7 +30,7 @@ limitations under the License.
         mask-size: contain;
         content: '';
         position: absolute;
-        top: 4px;
+        top: 1px;
         left: 0;
     }
 }
diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index 487b616240..027b9626a6 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -31,6 +31,15 @@ limitations under the License.
     color: $primary-fg-color;
 }
 
+.mx_ReplyTile > .mx_RedactedBody {
+    padding: 18px;
+
+    &::before {
+        height: 13px;
+        width: 13px;
+    }
+}
+
 // We do reply size limiting with CSS to avoid duplicating the TextualBody component.
 .mx_ReplyTile .mx_EventTile_content {
     $reply-lines: 2;

From 0d8f84c769b9bee61acc299c461f9788547d9ec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 15:35:52 +0200
Subject: [PATCH 038/179] Delete lozenge effect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss          | 22 --------------------
 src/components/views/elements/ReplyThread.js |  1 -
 src/components/views/rooms/ReplyPreview.js   |  1 -
 src/components/views/rooms/ReplyTile.tsx     |  2 --
 4 files changed, 26 deletions(-)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index 027b9626a6..d8184d01be 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -96,28 +96,6 @@ limitations under the License.
     max-width: calc(100% - 65px);
 }
 
-.mx_ReplyTile_redacted .mx_UnknownBody {
-    --lozenge-color: $event-redacted-fg-color;
-    --lozenge-border-color: $event-redacted-border-color;
-    display: block;
-    height: 22px;
-    width: 250px;
-    border-radius: 11px;
-    background:
-        repeating-linear-gradient(
-            -45deg,
-            var(--lozenge-color),
-            var(--lozenge-color) 3px,
-            transparent 3px,
-            transparent 6px
-        );
-    box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
-}
-
-.mx_ReplyTile_sending.mx_ReplyTile_redacted .mx_UnknownBody {
-    opacity: 0.4;
-}
-
 .mx_ReplyTile_contextual {
     opacity: 0.4;
 }
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index f199cd53b5..d309c718dd 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -382,7 +382,6 @@ export default class ReplyThread extends React.Component {
                     mxEvent={ev}
                     onHeightChanged={this.props.onHeightChanged}
                     permalinkCreator={this.props.permalinkCreator}
-                    isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
                     layout={this.props.layout}
                     alwaysShowTimestamps={this.props.alwaysShowTimestamps}
diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js
index 1dbec2451a..ca95dbb62f 100644
--- a/src/components/views/rooms/ReplyPreview.js
+++ b/src/components/views/rooms/ReplyPreview.js
@@ -88,7 +88,6 @@ export default class ReplyPreview extends React.Component {
                 
    
                 
    
                     
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 6a01e8dc97..757c273b50 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -29,7 +29,6 @@ import * as sdk from '../../../index';
 
 interface IProps {
     mxEvent: MatrixEvent;
-    isRedacted?: boolean;
     permalinkCreator?: RoomPermalinkCreator;
     highlights?: Array;
     highlightLink?: string;
@@ -108,7 +107,6 @@ export default class ReplyTile extends React.PureComponent {
         const classes = classNames({
             mx_ReplyTile: true,
             mx_ReplyTile_info: isInfoMessage,
-            mx_ReplyTile_redacted: this.props.isRedacted,
         });
 
         let permalink = "#";

From 259b36c13d5d27b542e4d6bc9a43a682d231b90e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 2 Jul 2021 15:38:44 +0200
Subject: [PATCH 039/179] Remove unused code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ReplyThread.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index d309c718dd..585c4bbdc0 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -382,12 +382,6 @@ export default class ReplyThread extends React.Component {
                     mxEvent={ev}
                     onHeightChanged={this.props.onHeightChanged}
                     permalinkCreator={this.props.permalinkCreator}
-                    isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
-                    layout={this.props.layout}
-                    alwaysShowTimestamps={this.props.alwaysShowTimestamps}
-                    enableFlair={SettingsStore.getValue(UIFeature.Flair)}
-                    replacingEventId={ev.replacingEventId()}
-                    as="div"
                 />
    ; }); From 090acc4811f2dc3f03089cb5346a7bee44db9033 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 2 Jul 2021 15:41:36 +0200 Subject: [PATCH 040/179] Unused import MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ReplyThread.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 585c4bbdc0..b6368eb5b3 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -29,7 +29,6 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; import { Action } from "../../../dispatcher/actions"; import sanitizeHtml from "sanitize-html"; -import { UIFeature } from "../../../settings/UIFeature"; import { PERMITTED_URL_SCHEMES } from "../../../HtmlUtils"; import { replaceableComponent } from "../../../utils/replaceableComponent"; From 59e48ee0ba5e7fb7461dae1a032ccd07267a8ac4 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 1 Jul 2021 21:42:56 -0600 Subject: [PATCH 041/179] Convert NotificationUserSettingsTab to TS --- ...serSettingsTab.js => NotificationUserSettingsTab.tsx} | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) rename src/components/views/settings/tabs/user/{NotificationUserSettingsTab.js => NotificationUserSettingsTab.tsx} (86%) diff --git a/src/components/views/settings/tabs/user/NotificationUserSettingsTab.js b/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx similarity index 86% rename from src/components/views/settings/tabs/user/NotificationUserSettingsTab.js rename to src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx index 0aabdd24e2..a0f4e330bb 100644 --- a/src/components/views/settings/tabs/user/NotificationUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx @@ -1,5 +1,5 @@ /* -Copyright 2019 New Vector Ltd +Copyright 2019-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. @@ -16,17 +16,12 @@ limitations under the License. import React from 'react'; import { _t } from "../../../../../languageHandler"; -import * as sdk from "../../../../../index"; import { replaceableComponent } from "../../../../../utils/replaceableComponent"; +import Notifications from "../../Notifications"; @replaceableComponent("views.settings.tabs.user.NotificationUserSettingsTab") export default class NotificationUserSettingsTab extends React.Component { - constructor() { - super(); - } - render() { - const Notifications = sdk.getComponent("views.settings.Notifications"); return (
    {_t("Notifications")}
    From 436563be7b90a7a021d8e027654bb39095829ae4 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 1 Jul 2021 21:43:52 -0600 Subject: [PATCH 042/179] Change label on notification dropdown for a room by request of design, to reduce mental load --- src/components/views/rooms/RoomTile.tsx | 2 +- src/i18n/strings/en_EN.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 9be0274dd5..580ea01073 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -408,7 +408,7 @@ export default class RoomTile extends React.PureComponent { > Date: Thu, 1 Jul 2021 21:49:36 -0600 Subject: [PATCH 043/179] Convert Spinner to TS --- src/components/views/elements/Spinner.js | 39 -------------------- src/components/views/elements/Spinner.tsx | 45 +++++++++++++++++++++++ 2 files changed, 45 insertions(+), 39 deletions(-) delete mode 100644 src/components/views/elements/Spinner.js create mode 100644 src/components/views/elements/Spinner.tsx diff --git a/src/components/views/elements/Spinner.js b/src/components/views/elements/Spinner.js deleted file mode 100644 index 75f85d0441..0000000000 --- a/src/components/views/elements/Spinner.js +++ /dev/null @@ -1,39 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2019 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. -*/ - -import React from "react"; -import PropTypes from "prop-types"; -import { _t } from "../../../languageHandler"; - -const Spinner = ({ w = 32, h = 32, message }) => ( -
    - { message &&
    { message }
          } -
    -
    -); - -Spinner.propTypes = { - w: PropTypes.number, - h: PropTypes.number, - message: PropTypes.node, -}; - -export default Spinner; diff --git a/src/components/views/elements/Spinner.tsx b/src/components/views/elements/Spinner.tsx new file mode 100644 index 0000000000..93c8f9e5d4 --- /dev/null +++ b/src/components/views/elements/Spinner.tsx @@ -0,0 +1,45 @@ +/* +Copyright 2015-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. +*/ + +import React from "react"; +import { _t } from "../../../languageHandler"; + +interface IProps { + w?: number; + h?: number; + message?: string; +} + +export default class Spinner extends React.PureComponent { + public static defaultProps: Partial = { + w: 32, + h: 32, + }; + + public render() { + const { w, h, message } = this.props; + return ( +
    + { message &&
    { message }
          } +
    +
    + ); + } +} From 9556b610415d60e2a95fc69a7b98206a3dbf6292 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 1 Jul 2021 21:58:03 -0600 Subject: [PATCH 044/179] Crude conversion of Notifications.js to TS + cut out legacy code This is to make the file clearer during development and serves no practical purpose --- .../{Notifications.js => Notifications.tsx} | 78 +++---------------- 1 file changed, 9 insertions(+), 69 deletions(-) rename src/components/views/settings/{Notifications.js => Notifications.tsx} (92%) diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.tsx similarity index 92% rename from src/components/views/settings/Notifications.js rename to src/components/views/settings/Notifications.tsx index c263ff50c8..9f1929a35f 100644 --- a/src/components/views/settings/Notifications.js +++ b/src/components/views/settings/Notifications.tsx @@ -22,7 +22,6 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg'; import SettingsStore from '../../../settings/SettingsStore'; import Modal from '../../../Modal'; import { - NotificationUtils, VectorPushRulesDefinitions, PushRuleVectorState, ContentRules, @@ -40,31 +39,6 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; // TODO: this component also does a lot of direct poking into this.state, which // is VERY NAUGHTY. -/** - * Rules that Vector used to set in order to override the actions of default rules. - * These are used to port peoples existing overrides to match the current API. - * These can be removed and forgotten once everyone has moved to the new client. - */ -const LEGACY_RULES = { - "im.vector.rule.contains_display_name": ".m.rule.contains_display_name", - "im.vector.rule.room_one_to_one": ".m.rule.room_one_to_one", - "im.vector.rule.room_message": ".m.rule.message", - "im.vector.rule.invite_for_me": ".m.rule.invite_for_me", - "im.vector.rule.call": ".m.rule.call", - "im.vector.rule.notices": ".m.rule.suppress_notices", -}; - -function portLegacyActions(actions) { - const decoded = NotificationUtils.decodeActions(actions); - if (decoded !== null) { - return NotificationUtils.encodeActions(decoded); - } else { - // We don't recognise one of the actions here, so we don't try to - // canonicalise them. - return actions; - } -} - @replaceableComponent("views.settings.Notifications") export default class Notifications extends React.Component { static phases = { @@ -84,6 +58,7 @@ export default class Notifications extends React.Component { externalPushRules: [], // Push rules (except content rule) that have been defined outside Vector UI externalContentRules: [], // Keyword push rules that have been defined outside Vector UI threepids: [], // used for email notifications + pushers: undefined, }; componentDidMount() { @@ -199,7 +174,7 @@ export default class Notifications extends React.Component { onKeywordsClicked = (event) => { // Compute the keywords list to display - let keywords = []; + let keywords: any[]|string = []; for (const i in this.state.vectorContentRules.rules) { const rule = this.state.vectorContentRules.rules[i]; keywords.push(rule.pattern); @@ -448,48 +423,9 @@ export default class Notifications extends React.Component { ); } - // Check if any legacy im.vector rules need to be ported to the new API - // for overriding the actions of default rules. - _portRulesToNewAPI(rulesets) { - const needsUpdate = []; - const cli = MatrixClientPeg.get(); - - for (const kind in rulesets.global) { - const ruleset = rulesets.global[kind]; - for (let i = 0; i < ruleset.length; ++i) { - const rule = ruleset[i]; - if (rule.rule_id in LEGACY_RULES) { - console.log("Porting legacy rule", rule); - needsUpdate.push( function(kind, rule) { - return cli.setPushRuleActions( - 'global', kind, LEGACY_RULES[rule.rule_id], portLegacyActions(rule.actions), - ).then(() => - cli.deletePushRule('global', kind, rule.rule_id), - ).catch( (e) => { - console.warn(`Error when porting legacy rule: ${e}`); - }); - }(kind, rule)); - } - } - } - - if (needsUpdate.length > 0) { - // If some of the rules need to be ported then wait for the porting - // to happen and then fetch the rules again. - return Promise.all(needsUpdate).then(() => - cli.getPushRules(), - ); - } else { - // Otherwise return the rules that we already have. - return rulesets; - } - } - _refreshFromServer = () => { const self = this; - const pushRulesPromise = MatrixClientPeg.get().getPushRules().then( - self._portRulesToNewAPI, - ).then(function(rulesets) { + const pushRulesPromise = MatrixClientPeg.get().getPushRules().then(function(rulesets) { /// XXX seriously? wtf is this? MatrixClientPeg.get().pushRules = rulesets; @@ -803,7 +739,7 @@ export default class Notifications extends React.Component { } // Show keywords not displayed by the vector UI as a single external push rule - let externalKeywords = []; + let externalKeywords: any[]|string = []; for (const i in this.state.externalContentRules) { const rule = this.state.externalContentRules[i]; externalKeywords.push(rule.pattern); @@ -890,9 +826,13 @@ export default class Notifications extends React.Component { - + {/* @ts-ignore*/} + + {/* @ts-ignore*/} + {/* @ts-ignore*/} From 5b9fca3b91964d294e3d0f69bd5a93ae75dc3809 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sun, 11 Jul 2021 20:03:07 -0600 Subject: [PATCH 045/179] Migrate to js-sdk types for push rules --- src/notifications/ContentRules.ts | 19 ++-- src/notifications/NotificationUtils.ts | 21 ++--- src/notifications/PushRuleVectorState.ts | 5 +- src/notifications/types.ts | 114 ----------------------- 4 files changed, 21 insertions(+), 138 deletions(-) delete mode 100644 src/notifications/types.ts diff --git a/src/notifications/ContentRules.ts b/src/notifications/ContentRules.ts index 5f1281e58c..fe27bfd67b 100644 --- a/src/notifications/ContentRules.ts +++ b/src/notifications/ContentRules.ts @@ -1,6 +1,5 @@ /* -Copyright 2016 OpenMarket Ltd -Copyright 2019, 2020 The Matrix.org Foundation C.I.C. +Copyright 2016 - 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. @@ -16,12 +15,12 @@ limitations under the License. */ import { PushRuleVectorState, State } from "./PushRuleVectorState"; -import { IExtendedPushRule, IRuleSets } from "./types"; +import { IAnnotatedPushRule, IPushRules, PushRuleKind } from "matrix-js-sdk/src/@types/PushRules"; export interface IContentRules { vectorState: State; - rules: IExtendedPushRule[]; - externalRules: IExtendedPushRule[]; + rules: IAnnotatedPushRule[]; + externalRules: IAnnotatedPushRule[]; } export const SCOPE = "global"; @@ -39,9 +38,9 @@ export class ContentRules { * externalRules: a list of other keyword rules, with states other than * vectorState */ - static parseContentRules(rulesets: IRuleSets): IContentRules { + public static parseContentRules(rulesets: IPushRules): IContentRules { // first categorise the keyword rules in terms of their actions - const contentRules = this._categoriseContentRules(rulesets); + const contentRules = ContentRules.categoriseContentRules(rulesets); // Decide which content rules to display in Vector UI. // Vector displays a single global rule for a list of keywords @@ -95,8 +94,8 @@ export class ContentRules { } } - static _categoriseContentRules(rulesets: IRuleSets) { - const contentRules: Record<"on"|"on_but_disabled"|"loud"|"loud_but_disabled"|"other", IExtendedPushRule[]> = { + private static categoriseContentRules(rulesets: IPushRules) { + const contentRules: Record<"on"|"on_but_disabled"|"loud"|"loud_but_disabled"|"other", IAnnotatedPushRule[]> = { on: [], on_but_disabled: [], loud: [], @@ -109,7 +108,7 @@ export class ContentRules { const r = rulesets.global[kind][i]; // check it's not a default rule - if (r.rule_id[0] === '.' || kind !== "content") { + if (r.rule_id[0] === '.' || kind !== PushRuleKind.ContentSpecific) { continue; } diff --git a/src/notifications/NotificationUtils.ts b/src/notifications/NotificationUtils.ts index 1d5356e16b..fa7aa1186d 100644 --- a/src/notifications/NotificationUtils.ts +++ b/src/notifications/NotificationUtils.ts @@ -1,6 +1,5 @@ /* -Copyright 2016 OpenMarket Ltd -Copyright 2019, 2020 The Matrix.org Foundation C.I.C. +Copyright 2016 - 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. @@ -15,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Action, Actions } from "./types"; +import { PushRuleAction, PushRuleActionName, TweakHighlight, TweakSound } from "matrix-js-sdk/src/@types/PushRules"; interface IEncodedActions { notify: boolean; @@ -35,18 +34,18 @@ export class NotificationUtils { const sound = action.sound; const highlight = action.highlight; if (notify) { - const actions: Action[] = [Actions.Notify]; + const actions: PushRuleAction[] = [PushRuleActionName.Notify]; if (sound) { - actions.push({ "set_tweak": "sound", "value": sound }); + actions.push({ "set_tweak": "sound", "value": sound } as TweakSound); } if (highlight) { - actions.push({ "set_tweak": "highlight" }); + actions.push({ "set_tweak": "highlight" } as TweakHighlight); } else { - actions.push({ "set_tweak": "highlight", "value": false }); + actions.push({ "set_tweak": "highlight", "value": false } as TweakHighlight); } return actions; } else { - return [Actions.DontNotify]; + return [PushRuleActionName.DontNotify]; } } @@ -56,16 +55,16 @@ export class NotificationUtils { // "highlight: true/false, // } // If the actions couldn't be decoded then returns null. - static decodeActions(actions: Action[]): IEncodedActions { + static decodeActions(actions: PushRuleAction[]): IEncodedActions { let notify = false; let sound = null; let highlight = false; for (let i = 0; i < actions.length; ++i) { const action = actions[i]; - if (action === Actions.Notify) { + if (action === PushRuleActionName.Notify) { notify = true; - } else if (action === Actions.DontNotify) { + } else if (action === PushRuleActionName.DontNotify) { notify = false; } else if (typeof action === "object") { if (action.set_tweak === "sound") { diff --git a/src/notifications/PushRuleVectorState.ts b/src/notifications/PushRuleVectorState.ts index 78c7e4b43b..c0855af0b9 100644 --- a/src/notifications/PushRuleVectorState.ts +++ b/src/notifications/PushRuleVectorState.ts @@ -1,6 +1,5 @@ /* -Copyright 2016 OpenMarket Ltd -Copyright 2019, 2020 The Matrix.org Foundation C.I.C. +Copyright 2016 - 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. @@ -17,7 +16,7 @@ limitations under the License. import { StandardActions } from "./StandardActions"; import { NotificationUtils } from "./NotificationUtils"; -import { IPushRule } from "./types"; +import { IPushRule } from "matrix-js-sdk/src/@types/PushRules"; export enum State { /** The push rule is disabled */ diff --git a/src/notifications/types.ts b/src/notifications/types.ts deleted file mode 100644 index ea46552947..0000000000 --- a/src/notifications/types.ts +++ /dev/null @@ -1,114 +0,0 @@ -/* -Copyright 2020 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. -*/ - -export enum NotificationSetting { - AllMessages = "all_messages", // .m.rule.message = notify - DirectMessagesMentionsKeywords = "dm_mentions_keywords", // .m.rule.message = mark_unread. This is the new default. - MentionsKeywordsOnly = "mentions_keywords", // .m.rule.message = mark_unread; .m.rule.room_one_to_one = mark_unread - Never = "never", // .m.rule.master = enabled (dont_notify) -} - -export interface ISoundTweak { - // eslint-disable-next-line camelcase - set_tweak: "sound"; - value: string; -} -export interface IHighlightTweak { - // eslint-disable-next-line camelcase - set_tweak: "highlight"; - value?: boolean; -} - -export type Tweak = ISoundTweak | IHighlightTweak; - -export enum Actions { - Notify = "notify", - DontNotify = "dont_notify", // no-op - Coalesce = "coalesce", // unused - MarkUnread = "mark_unread", // new -} - -export type Action = Actions | Tweak; - -// Push rule kinds in descending priority order -export enum Kind { - Override = "override", - ContentSpecific = "content", - RoomSpecific = "room", - SenderSpecific = "sender", - Underride = "underride", -} - -export interface IEventMatchCondition { - kind: "event_match"; - key: string; - pattern: string; -} - -export interface IContainsDisplayNameCondition { - kind: "contains_display_name"; -} - -export interface IRoomMemberCountCondition { - kind: "room_member_count"; - is: string; -} - -export interface ISenderNotificationPermissionCondition { - kind: "sender_notification_permission"; - key: string; -} - -export type Condition = - IEventMatchCondition | - IContainsDisplayNameCondition | - IRoomMemberCountCondition | - ISenderNotificationPermissionCondition; - -export enum RuleIds { - MasterRule = ".m.rule.master", // The master rule (all notifications disabling) - MessageRule = ".m.rule.message", - EncryptedMessageRule = ".m.rule.encrypted", - RoomOneToOneRule = ".m.rule.room_one_to_one", - EncryptedRoomOneToOneRule = ".m.rule.room_one_to_one", -} - -export interface IPushRule { - enabled: boolean; - // eslint-disable-next-line camelcase - rule_id: RuleIds | string; - actions: Action[]; - default: boolean; - conditions?: Condition[]; // only applicable to `underride` and `override` rules - pattern?: string; // only applicable to `content` rules -} - -// push rule extended with kind, used by ContentRules and js-sdk's pushprocessor -export interface IExtendedPushRule extends IPushRule { - kind: Kind; -} - -export interface IPushRuleSet { - override: IPushRule[]; - content: IPushRule[]; - room: IPushRule[]; - sender: IPushRule[]; - underride: IPushRule[]; -} - -export interface IRuleSets { - global: IPushRuleSet; -} From 0e749e32ac3824c885fe529fa8294de09de83879 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sun, 11 Jul 2021 20:53:12 -0600 Subject: [PATCH 046/179] Clarify that vectorState is a VectorState --- src/notifications/ContentRules.ts | 18 +++++++++--------- src/notifications/PushRuleVectorState.ts | 22 +++++++++++----------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/notifications/ContentRules.ts b/src/notifications/ContentRules.ts index fe27bfd67b..2b45065568 100644 --- a/src/notifications/ContentRules.ts +++ b/src/notifications/ContentRules.ts @@ -14,11 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { PushRuleVectorState, State } from "./PushRuleVectorState"; +import { PushRuleVectorState, VectorState } from "./PushRuleVectorState"; import { IAnnotatedPushRule, IPushRules, PushRuleKind } from "matrix-js-sdk/src/@types/PushRules"; export interface IContentRules { - vectorState: State; + vectorState: VectorState; rules: IAnnotatedPushRule[]; externalRules: IAnnotatedPushRule[]; } @@ -58,7 +58,7 @@ export class ContentRules { if (contentRules.loud.length) { return { - vectorState: State.Loud, + vectorState: VectorState.Loud, rules: contentRules.loud, externalRules: [ ...contentRules.loud_but_disabled, @@ -69,25 +69,25 @@ export class ContentRules { }; } else if (contentRules.loud_but_disabled.length) { return { - vectorState: State.Off, + vectorState: VectorState.Off, rules: contentRules.loud_but_disabled, externalRules: [...contentRules.on, ...contentRules.on_but_disabled, ...contentRules.other], }; } else if (contentRules.on.length) { return { - vectorState: State.On, + vectorState: VectorState.On, rules: contentRules.on, externalRules: [...contentRules.on_but_disabled, ...contentRules.other], }; } else if (contentRules.on_but_disabled.length) { return { - vectorState: State.Off, + vectorState: VectorState.Off, rules: contentRules.on_but_disabled, externalRules: contentRules.other, }; } else { return { - vectorState: State.On, + vectorState: VectorState.On, rules: [], externalRules: contentRules.other, }; @@ -116,14 +116,14 @@ export class ContentRules { r.kind = kind; switch (PushRuleVectorState.contentRuleVectorStateKind(r)) { - case State.On: + case VectorState.On: if (r.enabled) { contentRules.on.push(r); } else { contentRules.on_but_disabled.push(r); } break; - case State.Loud: + case VectorState.Loud: if (r.enabled) { contentRules.loud.push(r); } else { diff --git a/src/notifications/PushRuleVectorState.ts b/src/notifications/PushRuleVectorState.ts index c0855af0b9..34f7dcf786 100644 --- a/src/notifications/PushRuleVectorState.ts +++ b/src/notifications/PushRuleVectorState.ts @@ -18,7 +18,7 @@ import { StandardActions } from "./StandardActions"; import { NotificationUtils } from "./NotificationUtils"; import { IPushRule } from "matrix-js-sdk/src/@types/PushRules"; -export enum State { +export enum VectorState { /** The push rule is disabled */ Off = "off", /** The user will receive push notification for this rule */ @@ -30,26 +30,26 @@ export enum State { export class PushRuleVectorState { // Backwards compatibility (things should probably be using the enum above instead) - static OFF = State.Off; - static ON = State.On; - static LOUD = State.Loud; + static OFF = VectorState.Off; + static ON = VectorState.On; + static LOUD = VectorState.Loud; /** * Enum for state of a push rule as defined by the Vector UI. * @readonly * @enum {string} */ - static states = State; + static states = VectorState; /** * Convert a PushRuleVectorState to a list of actions * * @return [object] list of push-rule actions */ - static actionsFor(pushRuleVectorState: State) { - if (pushRuleVectorState === State.On) { + static actionsFor(pushRuleVectorState: VectorState) { + if (pushRuleVectorState === VectorState.On) { return StandardActions.ACTION_NOTIFY; - } else if (pushRuleVectorState === State.Loud) { + } else if (pushRuleVectorState === VectorState.Loud) { return StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND; } } @@ -61,7 +61,7 @@ export class PushRuleVectorState { * category or in PushRuleVectorState.LOUD, regardless of its enabled * state. Returns null if it does not match these categories. */ - static contentRuleVectorStateKind(rule: IPushRule): State { + static contentRuleVectorStateKind(rule: IPushRule): VectorState { const decoded = NotificationUtils.decodeActions(rule.actions); if (!decoded) { @@ -79,10 +79,10 @@ export class PushRuleVectorState { let stateKind = null; switch (tweaks) { case 0: - stateKind = State.On; + stateKind = VectorState.On; break; case 2: - stateKind = State.Loud; + stateKind = VectorState.Loud; break; } return stateKind; From fd5a36fd0cf6131b25008d02fa0e6769b3e3633d Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 12 Jul 2021 21:48:20 -0600 Subject: [PATCH 047/179] Fix more types around notifications --- src/notifications/NotificationUtils.ts | 2 +- .../VectorPushRulesDefinitions.ts | 117 ++++++++---------- 2 files changed, 56 insertions(+), 63 deletions(-) diff --git a/src/notifications/NotificationUtils.ts b/src/notifications/NotificationUtils.ts index fa7aa1186d..3f07c56972 100644 --- a/src/notifications/NotificationUtils.ts +++ b/src/notifications/NotificationUtils.ts @@ -29,7 +29,7 @@ export class NotificationUtils { // "highlight: true/false, // } // to a list of push actions. - static encodeActions(action: IEncodedActions) { + static encodeActions(action: IEncodedActions): PushRuleAction[] { const notify = action.notify; const sound = action.sound; const highlight = action.highlight; diff --git a/src/notifications/VectorPushRulesDefinitions.ts b/src/notifications/VectorPushRulesDefinitions.ts index 38dd88e6c6..a8c617e786 100644 --- a/src/notifications/VectorPushRulesDefinitions.ts +++ b/src/notifications/VectorPushRulesDefinitions.ts @@ -1,6 +1,5 @@ /* -Copyright 2016 OpenMarket Ltd -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2016 - 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. @@ -17,19 +16,24 @@ limitations under the License. import { _td } from '../languageHandler'; import { StandardActions } from "./StandardActions"; -import { PushRuleVectorState } from "./PushRuleVectorState"; +import { PushRuleVectorState, VectorState } from "./PushRuleVectorState"; import { NotificationUtils } from "./NotificationUtils"; +import { PushRuleAction, PushRuleKind } from "matrix-js-sdk/src/@types/PushRules"; + +type StateToActionsMap = { + [state in VectorState]?: PushRuleAction[]; +}; interface IProps { - kind: Kind; + kind: PushRuleKind; description: string; - vectorStateToActions: Action; + vectorStateToActions: StateToActionsMap; } class VectorPushRuleDefinition { - private kind: Kind; + private kind: PushRuleKind; private description: string; - private vectorStateToActions: Action; + public readonly vectorStateToActions: StateToActionsMap; constructor(opts: IProps) { this.kind = opts.kind; @@ -73,73 +77,62 @@ class VectorPushRuleDefinition { } } -enum Kind { - Override = "override", - Underride = "underride", -} - -interface Action { - on: StandardActions; - loud: StandardActions; - off: StandardActions; -} - /** * The descriptions of rules managed by the Vector UI. */ export const VectorPushRulesDefinitions = { // Messages containing user's display name ".m.rule.contains_display_name": new VectorPushRuleDefinition({ - kind: Kind.Override, + kind: PushRuleKind.Override, description: _td("Messages containing my display name"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { // The actions for each vector state, or null to disable the rule. - on: StandardActions.ACTION_NOTIFY, - loud: StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND, - off: StandardActions.ACTION_DISABLED, + [VectorState.On]: StandardActions.ACTION_NOTIFY, + [VectorState.Loud]: StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND, + [VectorState.Off]: StandardActions.ACTION_DISABLED, }, }), // Messages containing user's username (localpart/MXID) ".m.rule.contains_user_name": new VectorPushRuleDefinition({ - kind: Kind.Override, + kind: PushRuleKind.Override, description: _td("Messages containing my username"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { // The actions for each vector state, or null to disable the rule. - on: StandardActions.ACTION_NOTIFY, - loud: StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND, - off: StandardActions.ACTION_DISABLED, + [VectorState.On]: StandardActions.ACTION_NOTIFY, + [VectorState.Loud]: StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND, + [VectorState.Off]: StandardActions.ACTION_DISABLED, }, }), // Messages containing @room ".m.rule.roomnotif": new VectorPushRuleDefinition({ - kind: Kind.Override, + kind: PushRuleKind.Override, description: _td("Messages containing @room"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { // The actions for each vector state, or null to disable the rule. - on: StandardActions.ACTION_NOTIFY, - loud: StandardActions.ACTION_HIGHLIGHT, - off: StandardActions.ACTION_DISABLED, + [VectorState.On]: StandardActions.ACTION_NOTIFY, + [VectorState.Loud]: StandardActions.ACTION_HIGHLIGHT, + [VectorState.Off]: StandardActions.ACTION_DISABLED, }, }), // Messages just sent to the user in a 1:1 room ".m.rule.room_one_to_one": new VectorPushRuleDefinition({ - kind: Kind.Underride, + kind: PushRuleKind.Underride, description: _td("Messages in one-to-one chats"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { - on: StandardActions.ACTION_NOTIFY, - loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, - off: StandardActions.ACTION_DONT_NOTIFY, + [VectorState.On]: StandardActions.ACTION_NOTIFY, + [VectorState.Loud]: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, + [VectorState.Off]: StandardActions.ACTION_DONT_NOTIFY, }, }), // Encrypted messages just sent to the user in a 1:1 room ".m.rule.encrypted_room_one_to_one": new VectorPushRuleDefinition({ - kind: Kind.Underride, + kind: PushRuleKind.Underride, description: _td("Encrypted messages in one-to-one chats"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { - on: StandardActions.ACTION_NOTIFY, - loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, - off: StandardActions.ACTION_DONT_NOTIFY, + [VectorState.On]: StandardActions.ACTION_NOTIFY, + [VectorState.Loud]: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, + [VectorState.Off]: StandardActions.ACTION_DONT_NOTIFY, }, }), @@ -147,12 +140,12 @@ export const VectorPushRulesDefinitions = { // 1:1 room messages are catched by the .m.rule.room_one_to_one rule if any defined // By opposition, all other room messages are from group chat rooms. ".m.rule.message": new VectorPushRuleDefinition({ - kind: Kind.Underride, + kind: PushRuleKind.Underride, description: _td("Messages in group chats"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { - on: StandardActions.ACTION_NOTIFY, - loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, - off: StandardActions.ACTION_DONT_NOTIFY, + [VectorState.On]: StandardActions.ACTION_NOTIFY, + [VectorState.Loud]: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, + [VectorState.Off]: StandardActions.ACTION_DONT_NOTIFY, }, }), @@ -160,57 +153,57 @@ export const VectorPushRulesDefinitions = { // Encrypted 1:1 room messages are catched by the .m.rule.encrypted_room_one_to_one rule if any defined // By opposition, all other room messages are from group chat rooms. ".m.rule.encrypted": new VectorPushRuleDefinition({ - kind: Kind.Underride, + kind: PushRuleKind.Underride, description: _td("Encrypted messages in group chats"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { - on: StandardActions.ACTION_NOTIFY, - loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, - off: StandardActions.ACTION_DONT_NOTIFY, + [VectorState.On]: StandardActions.ACTION_NOTIFY, + [VectorState.Loud]: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, + [VectorState.Off]: StandardActions.ACTION_DONT_NOTIFY, }, }), // Invitation for the user ".m.rule.invite_for_me": new VectorPushRuleDefinition({ - kind: Kind.Underride, + kind: PushRuleKind.Underride, description: _td("When I'm invited to a room"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { - on: StandardActions.ACTION_NOTIFY, - loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, - off: StandardActions.ACTION_DISABLED, + [VectorState.On]: StandardActions.ACTION_NOTIFY, + [VectorState.Loud]: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, + [VectorState.Off]: StandardActions.ACTION_DISABLED, }, }), // Incoming call ".m.rule.call": new VectorPushRuleDefinition({ - kind: Kind.Underride, + kind: PushRuleKind.Underride, description: _td("Call invitation"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { - on: StandardActions.ACTION_NOTIFY, - loud: StandardActions.ACTION_NOTIFY_RING_SOUND, - off: StandardActions.ACTION_DISABLED, + [VectorState.On]: StandardActions.ACTION_NOTIFY, + [VectorState.Loud]: StandardActions.ACTION_NOTIFY_RING_SOUND, + [VectorState.Off]: StandardActions.ACTION_DISABLED, }, }), // Notifications from bots ".m.rule.suppress_notices": new VectorPushRuleDefinition({ - kind: Kind.Override, + kind: PushRuleKind.Override, description: _td("Messages sent by bot"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { // .m.rule.suppress_notices is a "negative" rule, we have to invert its enabled value for vector UI - on: StandardActions.ACTION_DISABLED, - loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, - off: StandardActions.ACTION_DONT_NOTIFY, + [VectorState.On]: StandardActions.ACTION_DISABLED, + [VectorState.Loud]: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND, + [VectorState.Off]: StandardActions.ACTION_DONT_NOTIFY, }, }), // Room upgrades (tombstones) ".m.rule.tombstone": new VectorPushRuleDefinition({ - kind: Kind.Override, + kind: PushRuleKind.Override, description: _td("When rooms are upgraded"), // passed through _t() translation in src/components/views/settings/Notifications.js vectorStateToActions: { // The actions for each vector state, or null to disable the rule. - on: StandardActions.ACTION_NOTIFY, - loud: StandardActions.ACTION_HIGHLIGHT, - off: StandardActions.ACTION_DISABLED, + [VectorState.On]: StandardActions.ACTION_NOTIFY, + [VectorState.Loud]: StandardActions.ACTION_HIGHLIGHT, + [VectorState.Off]: StandardActions.ACTION_DISABLED, }, }), }; From 3ae76c84f6fae2292df8fb678f6034c07652e292 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 12 Jul 2021 23:55:08 -0600 Subject: [PATCH 048/179] Add a simple TagComposer for the keywords entry --- res/css/_components.scss | 3 +- res/css/views/elements/_TagComposer.scss | 77 ++++++++++++++++ res/img/subtract.svg | 3 + src/components/views/elements/TagComposer.tsx | 91 +++++++++++++++++++ 4 files changed, 173 insertions(+), 1 deletion(-) create mode 100644 res/css/views/elements/_TagComposer.scss create mode 100644 res/img/subtract.svg create mode 100644 src/components/views/elements/TagComposer.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index 8f80f1bf97..c623eba9d8 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -148,6 +148,7 @@ @import "./views/elements/_StyledCheckbox.scss"; @import "./views/elements/_StyledRadioButton.scss"; @import "./views/elements/_SyntaxHighlight.scss"; +@import "./views/elements/_TagComposer.scss"; @import "./views/elements/_TextWithTooltip.scss"; @import "./views/elements/_ToggleSwitch.scss"; @import "./views/elements/_Tooltip.scss"; @@ -260,9 +261,9 @@ @import "./views/toasts/_NonUrgentEchoFailureToast.scss"; @import "./views/verification/_VerificationShowSas.scss"; @import "./views/voip/_CallContainer.scss"; +@import "./views/voip/_CallPreview.scss"; @import "./views/voip/_CallView.scss"; @import "./views/voip/_CallViewForRoom.scss"; -@import "./views/voip/_CallPreview.scss"; @import "./views/voip/_DialPad.scss"; @import "./views/voip/_DialPadContextMenu.scss"; @import "./views/voip/_DialPadModal.scss"; diff --git a/res/css/views/elements/_TagComposer.scss b/res/css/views/elements/_TagComposer.scss new file mode 100644 index 0000000000..2ffd601765 --- /dev/null +++ b/res/css/views/elements/_TagComposer.scss @@ -0,0 +1,77 @@ +/* +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. +*/ + +.mx_TagComposer { + .mx_TagComposer_input { + display: flex; + + .mx_Field { + flex: 1; + margin: 0; // override from field styles + } + + .mx_AccessibleButton { + min-width: 70px; + padding: 0; // override from button styles + margin-left: 16px; // distance from + } + + .mx_Field, .mx_Field input, .mx_AccessibleButton { + // So they look related to each other by feeling the same + border-radius: 8px; + } + } + + .mx_TagComposer_tags { + display: flex; + flex-wrap: wrap; + margin-top: 12px; // this plus 12px from the tags makes 24px from the input + + .mx_TagComposer_tag { + padding: 6px 8px 8px 12px; + position: relative; + margin-right: 12px; + margin-top: 12px; + + // Cheaty way to get an opacified variable colour background + &::before { + content: ''; + border-radius: 20px; + background-color: $tertiary-fg-color; + opacity: 0.15; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + // Pass through the pointer otherwise we have effectively put a whole div + // on top of the component, which makes it hard to interact with buttons. + pointer-events: none; + } + } + + .mx_AccessibleButton { + background-image: url('$(res)/img/subtract.svg'); + width: 16px; + height: 16px; + margin-left: 8px; + display: inline-block; + vertical-align: middle; + cursor: pointer; + } + } +} diff --git a/res/img/subtract.svg b/res/img/subtract.svg new file mode 100644 index 0000000000..55e25831ef --- /dev/null +++ b/res/img/subtract.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/elements/TagComposer.tsx b/src/components/views/elements/TagComposer.tsx new file mode 100644 index 0000000000..ff104748a0 --- /dev/null +++ b/src/components/views/elements/TagComposer.tsx @@ -0,0 +1,91 @@ +/* +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. +*/ + +import React, { ChangeEvent, FormEvent } from "react"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import Field from "./Field"; +import { _t } from "../../../languageHandler"; +import AccessibleButton from "./AccessibleButton"; + +interface IProps { + tags: string[]; + onAdd: (tag: string) => void; + onRemove: (tag: string) => void; + disabled?: boolean; + label?: string; + placeholder?: string; +} + +interface IState { + newTag: string; +} + +/** + * A simple, controlled, composer for entering string tags. Contains a simple + * input, add button, and per-tag remove button. + */ +@replaceableComponent("views.elements.TagComposer") +export default class TagComposer extends React.PureComponent { + public constructor(props: IProps) { + super(props); + + this.state = { + newTag: "", + }; + } + + private onInputChange = (ev: ChangeEvent) => { + this.setState({ newTag: ev.target.value }); + }; + + private onAdd = (ev: FormEvent) => { + ev.preventDefault(); + if (!this.state.newTag) return; + + this.props.onAdd(this.state.newTag); + this.setState({ newTag: "" }); + }; + + private onRemove = (tag: string) => { + // We probably don't need to proxy this, but for + // sanity of `this` we'll do so anyways. + this.props.onRemove(tag); + }; + + public render() { + return
    +
    + + + { _t("Add") } + + +
    + { this.props.tags.map((t, i) => (
    + { t } + +
    )) } +
    +
    ; + } +} From ff7a18da562ae6559769e4a2f3ecb637c293ddf1 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 12 Jul 2021 23:57:54 -0600 Subject: [PATCH 049/179] Rewrite Notifications component for modern UI & processing --- res/css/views/settings/_Notifications.scss | 125 +- .../views/settings/Notifications.tsx | 1292 +++++++---------- src/i18n/strings/en_EN.json | 11 +- 3 files changed, 612 insertions(+), 816 deletions(-) diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss index 77a7bc5b68..2ec9f3fbea 100644 --- a/res/css/views/settings/_Notifications.scss +++ b/res/css/views/settings/_Notifications.scss @@ -1,5 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd +Copyright 2015 - 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. @@ -14,82 +14,79 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_UserNotifSettings_tableRow { - display: table-row; -} +.mx_UserNotifSettings { + color: $primary-fg-color; // override from default settings page styles -.mx_UserNotifSettings_inputCell { - display: table-cell; - padding-bottom: 8px; - padding-right: 8px; - width: 16px; -} + .mx_UserNotifSettings_pushRulesTable { + width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches + table-layout: fixed; + border-collapse: collapse; + border-spacing: 0; + margin-top: 40px; -.mx_UserNotifSettings_labelCell { - padding-bottom: 8px; - width: 400px; - display: table-cell; -} + tr > th { + font-weight: 600; // semi bold + } -.mx_UserNotifSettings_pushRulesTableWrapper { - padding-bottom: 8px; -} + tr > th:first-child { + text-align: left; + font-size: $font-18px; + } -.mx_UserNotifSettings_pushRulesTable { - width: 100%; - table-layout: fixed; -} + tr > th:nth-child(n + 2) { + color: $secondary-fg-color; + font-size: $font-12px; + vertical-align: middle; + width: 66px; + } -.mx_UserNotifSettings_pushRulesTable thead { - font-weight: bold; -} + tr > td:nth-child(n + 2) { + text-align: center; + } -.mx_UserNotifSettings_pushRulesTable tbody th { - font-weight: 400; -} + tr > td { + padding-top: 8px; + } -.mx_UserNotifSettings_pushRulesTable tbody th:first-child { - text-align: left; -} + // Override StyledRadioButton default styles + .mx_RadioButton { + justify-content: center; -.mx_UserNotifSettings_keywords { - cursor: pointer; - color: $accent-color; -} + .mx_RadioButton_content { + display: none; + } -.mx_UserNotifSettings_devicesTable td { - padding-left: 20px; - padding-right: 20px; -} + .mx_RadioButton_spacer { + display: none; + } + } + } -.mx_UserNotifSettings_notifTable { - display: table; - position: relative; -} + .mx_UserNotifSettings_floatingSection { + margin-top: 40px; -.mx_UserNotifSettings_notifTable .mx_Spinner { - position: absolute; -} + & > div:first-child { // section header + font-size: $font-18px; + font-weight: 600; // semi bold + } -.mx_NotificationSound_soundUpload { - display: none; -} + > table { + border-collapse: collapse; + border-spacing: 0; + margin-top: 8px; -.mx_NotificationSound_browse { - color: $accent-color; - border: 1px solid $accent-color; - background-color: transparent; -} + tr > td:first-child { + // Just for a bit of spacing + padding-right: 8px; + } + } + } -.mx_NotificationSound_save { - margin-left: 5px; - color: white; - background-color: $accent-color; -} + .mx_UserNotifSettings_clearNotifsButton { + margin-top: 8px; + } -.mx_NotificationSound_resetSound { - margin-top: 5px; - color: white; - border: $warning-color; - background-color: $warning-color; + .mx_TagComposer { + margin-top: 35px; // lots of distance from the last line of the table + } } diff --git a/src/components/views/settings/Notifications.tsx b/src/components/views/settings/Notifications.tsx index 9f1929a35f..4a733d7bf5 100644 --- a/src/components/views/settings/Notifications.tsx +++ b/src/components/views/settings/Notifications.tsx @@ -1,6 +1,5 @@ /* -Copyright 2016 OpenMarket Ltd -Copyright 2020 The Matrix.org Foundation C.I.C. +Copyright 2016 - 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. @@ -15,539 +14,240 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; -import * as sdk from '../../../index'; -import { _t } from '../../../languageHandler'; -import { MatrixClientPeg } from '../../../MatrixClientPeg'; -import SettingsStore from '../../../settings/SettingsStore'; -import Modal from '../../../Modal'; +import React from "react"; +import Spinner from "../elements/Spinner"; +import { MatrixClientPeg } from "../../../MatrixClientPeg"; +import { IAnnotatedPushRule, IPusher, PushRuleKind, RuleId, } from "matrix-js-sdk/src/@types/PushRules"; import { - VectorPushRulesDefinitions, - PushRuleVectorState, ContentRules, -} from '../../../notifications'; -import SdkConfig from "../../../SdkConfig"; + IContentRules, + PushRuleVectorState, + VectorPushRulesDefinitions, + VectorState, +} from "../../../notifications"; +import { _t, TranslatedString } from "../../../languageHandler"; +import { IThirdPartyIdentifier, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids"; import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; -import AccessibleButton from "../elements/AccessibleButton"; +import SettingsStore from "../../../settings/SettingsStore"; +import StyledRadioButton from "../elements/StyledRadioButton"; import { SettingLevel } from "../../../settings/SettingLevel"; -import { UIFeature } from "../../../settings/UIFeature"; -import { replaceableComponent } from "../../../utils/replaceableComponent"; +import Modal from "../../../Modal"; +import ErrorDialog from "../dialogs/ErrorDialog"; +import SdkConfig from "../../../SdkConfig"; +import AccessibleButton from "../elements/AccessibleButton"; +import TagComposer from "../elements/TagComposer"; +import { objectClone } from "../../../utils/objects"; +import { arrayDiff } from "../../../utils/arrays"; // TODO: this "view" component still has far too much application logic in it, // which should be factored out to other files. -// TODO: this component also does a lot of direct poking into this.state, which -// is VERY NAUGHTY. +enum Phase { + Loading = "loading", + Ready = "ready", + Persisting = "persisting", // technically a meta-state for Ready, but whatever + Error = "error", +} -@replaceableComponent("views.settings.Notifications") -export default class Notifications extends React.Component { - static phases = { - LOADING: "LOADING", // The component is loading or sending data to the hs - DISPLAY: "DISPLAY", // The component is ready and display data - ERROR: "ERROR", // There was an error +enum RuleClass { + Master = "master", + + // The vector sections map approximately to UI sections + VectorGlobal = "vector_global", + VectorMentions = "vector_mentions", + VectorOther = "vector_other", + Other = "other", // unknown rules, essentially +} + +const KEYWORD_RULE_ID = "_keywords"; // used as a placeholder "Rule ID" throughout this component +const KEYWORD_RULE_CATEGORY = RuleClass.VectorMentions; + +// This array doesn't care about categories: it's just used for a simple sort +const RULE_DISPLAY_ORDER: string[] = [ + // Global + RuleId.DM, + RuleId.EncryptedDM, + RuleId.Message, + RuleId.EncryptedMessage, + + // Mentions + RuleId.ContainsDisplayName, + RuleId.ContainsUserName, + RuleId.AtRoomNotification, + + // Other + RuleId.InviteToSelf, + RuleId.IncomingCall, + RuleId.SuppressNotices, + RuleId.Tombstone, +] + +interface IVectorPushRule { + ruleId: RuleId | typeof KEYWORD_RULE_ID | string; + rule?: IAnnotatedPushRule; + description: TranslatedString | string; + vectorState: VectorState; +} + +interface IProps {} + +interface IState { + phase: Phase; + + // Optional stuff is required when `phase === Ready` + masterPushRule?: IAnnotatedPushRule; + vectorKeywordRuleInfo?: IContentRules; + vectorPushRules?: { + [category in RuleClass]?: IVectorPushRule[]; }; + pushers?: IPusher[]; + threepids?: IThirdPartyIdentifier[]; +} - state = { - phase: Notifications.phases.LOADING, - masterPushRule: undefined, // The master rule ('.m.rule.master') - vectorPushRules: [], // HS default push rules displayed in Vector UI - vectorContentRules: { // Keyword push rules displayed in Vector UI - vectorState: PushRuleVectorState.ON, - rules: [], - }, - externalPushRules: [], // Push rules (except content rule) that have been defined outside Vector UI - externalContentRules: [], // Keyword push rules that have been defined outside Vector UI - threepids: [], // used for email notifications - pushers: undefined, - }; +export default class Notifications extends React.PureComponent { + public constructor(props: IProps) { + super(props); - componentDidMount() { - this._refreshFromServer(); + this.state = { + phase: Phase.Loading, + }; } - onEnableNotificationsChange = (checked) => { - const self = this; - this.setState({ - phase: Notifications.phases.LOADING, - }); - - MatrixClientPeg.get().setPushRuleEnabled( - 'global', self.state.masterPushRule.kind, self.state.masterPushRule.rule_id, !checked, - ).then(function() { - self._refreshFromServer(); - }); - }; - - onEnableDesktopNotificationsChange = (checked) => { - SettingsStore.setValue( - "notificationsEnabled", null, - SettingLevel.DEVICE, - checked, - ).finally(() => { - this.forceUpdate(); - }); - }; - - onEnableDesktopNotificationBodyChange = (checked) => { - SettingsStore.setValue( - "notificationBodyEnabled", null, - SettingLevel.DEVICE, - checked, - ).finally(() => { - this.forceUpdate(); - }); - }; - - onEnableAudioNotificationsChange = (checked) => { - SettingsStore.setValue( - "audioNotificationsEnabled", null, - SettingLevel.DEVICE, - checked, - ).finally(() => { - this.forceUpdate(); - }); - }; - - /* - * Returns the email pusher (pusher of type 'email') for a given - * email address. Email pushers all have the same app ID, so since - * pushers are unique over (app ID, pushkey), there will be at most - * one such pusher. - */ - getEmailPusher(pushers, address) { - if (pushers === undefined) { - return undefined; - } - for (let i = 0; i < pushers.length; ++i) { - if (pushers[i].kind === 'email' && pushers[i].pushkey === address) { - return pushers[i]; - } - } - return undefined; + private get isInhibited(): boolean { + // Caution: The master rule's enabled state is inverted from expectation. When + // the master rule is *enabled* it means all other rules are *disabled* (or + // inhibited). Conversely, when the master rule is *disabled* then all other rules + // are *enabled* (or operate fine). + return this.state.masterPushRule?.enabled; } - onEnableEmailNotificationsChange = (address, checked) => { - let emailPusherPromise; - if (checked) { - const data = {}; - data['brand'] = SdkConfig.get().brand; - emailPusherPromise = MatrixClientPeg.get().setPusher({ - kind: 'email', - app_id: 'm.email', - pushkey: address, - app_display_name: 'Email Notifications', - device_display_name: address, - lang: navigator.language, - data: data, - append: true, // We always append for email pushers since we don't want to stop other accounts notifying to the same email address - }); - } else { - const emailPusher = this.getEmailPusher(this.state.pushers, address); - emailPusher.kind = null; - emailPusherPromise = MatrixClientPeg.get().setPusher(emailPusher); - } - emailPusherPromise.then(() => { - this._refreshFromServer(); - }, (error) => { - const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - Modal.createTrackedDialog('Error saving email notification preferences', '', ErrorDialog, { - title: _t('Error saving email notification preferences'), - description: _t('An error occurred whilst saving your email notification preferences.'), - }); - }); - }; - - onNotifStateButtonClicked = (event) => { - // FIXME: use .bind() rather than className metadata here surely - const vectorRuleId = event.target.className.split("-")[0]; - const newPushRuleVectorState = event.target.className.split("-")[1]; - - if ("_keywords" === vectorRuleId) { - this._setKeywordsPushRuleVectorState(newPushRuleVectorState); - } else { - const rule = this.getRule(vectorRuleId); - if (rule) { - this._setPushRuleVectorState(rule, newPushRuleVectorState); - } - } - }; - - onKeywordsClicked = (event) => { - // Compute the keywords list to display - let keywords: any[]|string = []; - for (const i in this.state.vectorContentRules.rules) { - const rule = this.state.vectorContentRules.rules[i]; - keywords.push(rule.pattern); - } - if (keywords.length) { - // As keeping the order of per-word push rules hs side is a bit tricky to code, - // display the keywords in alphabetical order to the user - keywords.sort(); - - keywords = keywords.join(", "); - } else { - keywords = ""; - } - - const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog"); - Modal.createTrackedDialog('Keywords Dialog', '', TextInputDialog, { - title: _t('Keywords'), - description: _t('Enter keywords separated by a comma:'), - button: _t('OK'), - value: keywords, - onFinished: (shouldLeave, newValue) => { - if (shouldLeave && newValue !== keywords) { - let newKeywords = newValue.split(','); - for (const i in newKeywords) { - newKeywords[i] = newKeywords[i].trim(); - } - - // Remove duplicates and empty - newKeywords = newKeywords.reduce(function(array, keyword) { - if (keyword !== "" && array.indexOf(keyword) < 0) { - array.push(keyword); - } - return array; - }, []); - - this._setKeywords(newKeywords); - } - }, - }); - }; - - getRule(vectorRuleId) { - for (const i in this.state.vectorPushRules) { - const rule = this.state.vectorPushRules[i]; - if (rule.vectorRuleId === vectorRuleId) { - return rule; - } - } + public componentDidMount() { + // noinspection JSIgnoredPromiseFromCall + this.refreshFromServer(); } - _setPushRuleVectorState(rule, newPushRuleVectorState) { - if (rule && rule.vectorState !== newPushRuleVectorState) { + private async refreshFromServer() { + try { + const newState = (await Promise.all([ + this.refreshRules(), + this.refreshPushers(), + this.refreshThreepids(), + ])).reduce((p, c) => Object.assign(c, p), {}); + this.setState({ - phase: Notifications.phases.LOADING, - }); - - const self = this; - const cli = MatrixClientPeg.get(); - const deferreds = []; - const ruleDefinition = VectorPushRulesDefinitions[rule.vectorRuleId]; - - if (rule.rule) { - const actions = ruleDefinition.vectorStateToActions[newPushRuleVectorState]; - - if (!actions) { - // The new state corresponds to disabling the rule. - deferreds.push(cli.setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, false)); - } else { - // The new state corresponds to enabling the rule and setting specific actions - deferreds.push(this._updatePushRuleActions(rule.rule, actions, true)); - } - } - - Promise.all(deferreds).then(function() { - self._refreshFromServer(); - }, function(error) { - const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - console.error("Failed to change settings: " + error); - Modal.createTrackedDialog('Failed to change settings', '', ErrorDialog, { - title: _t('Failed to change settings'), - description: ((error && error.message) ? error.message : _t('Operation failed')), - onFinished: self._refreshFromServer, - }); + ...newState, + phase: Phase.Ready, }); + } catch (e) { + console.error("Error setting up notifications for settings: ", e); + this.setState({ phase: Phase.Error }); } } - _setKeywordsPushRuleVectorState(newPushRuleVectorState) { - // Is there really a change? - if (this.state.vectorContentRules.vectorState === newPushRuleVectorState - || this.state.vectorContentRules.rules.length === 0) { - return; - } + private async refreshRules(): Promise> { + const ruleSets = await MatrixClientPeg.get().getPushRules(); - const self = this; - const cli = MatrixClientPeg.get(); + const categories = { + [RuleId.Master]: RuleClass.Master, - this.setState({ - phase: Notifications.phases.LOADING, - }); + [RuleId.DM]: RuleClass.VectorGlobal, + [RuleId.EncryptedDM]: RuleClass.VectorGlobal, + [RuleId.Message]: RuleClass.VectorGlobal, + [RuleId.EncryptedMessage]: RuleClass.VectorGlobal, - // Update all rules in self.state.vectorContentRules - const deferreds = []; - for (const i in this.state.vectorContentRules.rules) { - const rule = this.state.vectorContentRules.rules[i]; + [RuleId.ContainsDisplayName]: RuleClass.VectorMentions, + [RuleId.ContainsUserName]: RuleClass.VectorMentions, + [RuleId.AtRoomNotification]: RuleClass.VectorMentions, - let enabled; let actions; - switch (newPushRuleVectorState) { - case PushRuleVectorState.ON: - if (rule.actions.length !== 1) { - actions = PushRuleVectorState.actionsFor(PushRuleVectorState.ON); - } + [RuleId.InviteToSelf]: RuleClass.VectorOther, + [RuleId.IncomingCall]: RuleClass.VectorOther, + [RuleId.SuppressNotices]: RuleClass.VectorOther, + [RuleId.Tombstone]: RuleClass.VectorOther, - if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) { - enabled = true; - } - break; - - case PushRuleVectorState.LOUD: - if (rule.actions.length !== 3) { - actions = PushRuleVectorState.actionsFor(PushRuleVectorState.LOUD); - } - - if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) { - enabled = true; - } - break; - - case PushRuleVectorState.OFF: - enabled = false; - break; - } - - if (actions) { - // Note that the workaround in _updatePushRuleActions will automatically - // enable the rule - deferreds.push(this._updatePushRuleActions(rule, actions, enabled)); - } else if (enabled != undefined) { - deferreds.push(cli.setPushRuleEnabled('global', rule.kind, rule.rule_id, enabled)); - } - } - - Promise.all(deferreds).then(function(resps) { - self._refreshFromServer(); - }, function(error) { - const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - console.error("Can't update user notification settings: " + error); - Modal.createTrackedDialog('Can\'t update user notifcation settings', '', ErrorDialog, { - title: _t('Can\'t update user notification settings'), - description: ((error && error.message) ? error.message : _t('Operation failed')), - onFinished: self._refreshFromServer, - }); - }); - } - - _setKeywords(newKeywords) { - this.setState({ - phase: Notifications.phases.LOADING, - }); - - const self = this; - const cli = MatrixClientPeg.get(); - const removeDeferreds = []; - - // Remove per-word push rules of keywords that are no more in the list - const vectorContentRulesPatterns = []; - for (const i in self.state.vectorContentRules.rules) { - const rule = self.state.vectorContentRules.rules[i]; - - vectorContentRulesPatterns.push(rule.pattern); - - if (newKeywords.indexOf(rule.pattern) < 0) { - removeDeferreds.push(cli.deletePushRule('global', rule.kind, rule.rule_id)); - } - } - - // If the keyword is part of `externalContentRules`, remove the rule - // before recreating it in the right Vector path - for (const i in self.state.externalContentRules) { - const rule = self.state.externalContentRules[i]; - - if (newKeywords.indexOf(rule.pattern) >= 0) { - removeDeferreds.push(cli.deletePushRule('global', rule.kind, rule.rule_id)); - } - } - - const onError = function(error) { - const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - console.error("Failed to update keywords: " + error); - Modal.createTrackedDialog('Failed to update keywords', '', ErrorDialog, { - title: _t('Failed to update keywords'), - description: ((error && error.message) ? error.message : _t('Operation failed')), - onFinished: self._refreshFromServer, - }); + // Everything maps to a generic "other" (unknown rule) }; - // Then, add the new ones - Promise.all(removeDeferreds).then(function(resps) { - const deferreds = []; + const defaultRules: { + [k in RuleClass]: IAnnotatedPushRule[]; + } = { + [RuleClass.Master]: [], + [RuleClass.VectorGlobal]: [], + [RuleClass.VectorMentions]: [], + [RuleClass.VectorOther]: [], + [RuleClass.Other]: [], + }; - let pushRuleVectorStateKind = self.state.vectorContentRules.vectorState; - if (pushRuleVectorStateKind === PushRuleVectorState.OFF) { - // When the current global keywords rule is OFF, we need to look at - // the flavor of rules in 'vectorContentRules' to apply the same actions - // when creating the new rule. - // Thus, this new rule will join the 'vectorContentRules' set. - if (self.state.vectorContentRules.rules.length) { - pushRuleVectorStateKind = PushRuleVectorState.contentRuleVectorStateKind( - self.state.vectorContentRules.rules[0], - ); - } else { - // ON is default - pushRuleVectorStateKind = PushRuleVectorState.ON; + for (const k in ruleSets.global) { + // noinspection JSUnfilteredForInLoop + const kind = k as PushRuleKind; + for (const r of ruleSets.global[kind]) { + const rule: IAnnotatedPushRule = Object.assign(r, {kind}); + const category = categories[rule.rule_id] ?? RuleClass.Other; + + if (rule.rule_id[0] === '.') { + defaultRules[category].push(rule); } } + } - for (const i in newKeywords) { - const keyword = newKeywords[i]; + const preparedNewState: Partial = {}; + if (defaultRules.master.length > 0) { + preparedNewState.masterPushRule = defaultRules.master[0]; + } else { + // XXX: Can this even happen? How do we safely recover? + throw new Error("Failed to locate a master push rule"); + } - if (vectorContentRulesPatterns.indexOf(keyword) < 0) { - if (self.state.vectorContentRules.vectorState !== PushRuleVectorState.OFF) { - deferreds.push(cli.addPushRule('global', 'content', keyword, { - actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind), - pattern: keyword, - })); - } else { - deferreds.push(self._addDisabledPushRule('global', 'content', keyword, { - actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind), - pattern: keyword, - })); - } - } - } + // Parse keyword rules + preparedNewState.vectorKeywordRuleInfo = ContentRules.parseContentRules(ruleSets); - Promise.all(deferreds).then(function(resps) { - self._refreshFromServer(); - }, onError); - }, onError); - } - - // Create a push rule but disabled - _addDisabledPushRule(scope, kind, ruleId, body) { - const cli = MatrixClientPeg.get(); - return cli.addPushRule(scope, kind, ruleId, body).then(() => - cli.setPushRuleEnabled(scope, kind, ruleId, false), - ); - } - - _refreshFromServer = () => { - const self = this; - const pushRulesPromise = MatrixClientPeg.get().getPushRules().then(function(rulesets) { - /// XXX seriously? wtf is this? - MatrixClientPeg.get().pushRules = rulesets; - - // Get homeserver default rules and triage them by categories - const ruleCategories = { - // The master rule (all notifications disabling) - '.m.rule.master': 'master', - - // The default push rules displayed by Vector UI - '.m.rule.contains_display_name': 'vector', - '.m.rule.contains_user_name': 'vector', - '.m.rule.roomnotif': 'vector', - '.m.rule.room_one_to_one': 'vector', - '.m.rule.encrypted_room_one_to_one': 'vector', - '.m.rule.message': 'vector', - '.m.rule.encrypted': 'vector', - '.m.rule.invite_for_me': 'vector', - //'.m.rule.member_event': 'vector', - '.m.rule.call': 'vector', - '.m.rule.suppress_notices': 'vector', - '.m.rule.tombstone': 'vector', - - // Others go to others - }; - - // HS default rules - const defaultRules = { master: [], vector: {}, others: [] }; - - for (const kind in rulesets.global) { - for (let i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) { - const r = rulesets.global[kind][i]; - const cat = ruleCategories[r.rule_id]; - r.kind = kind; - - if (r.rule_id[0] === '.') { - if (cat === 'vector') { - defaultRules.vector[r.rule_id] = r; - } else if (cat === 'master') { - defaultRules.master.push(r); - } else { - defaultRules['others'].push(r); - } - } - } - } - - // Get the master rule if any defined by the hs - if (defaultRules.master.length > 0) { - self.state.masterPushRule = defaultRules.master[0]; - } - - // parse the keyword rules into our state - const contentRules = ContentRules.parseContentRules(rulesets); - self.state.vectorContentRules = { - vectorState: contentRules.vectorState, - rules: contentRules.rules, - }; - self.state.externalContentRules = contentRules.externalRules; - - // Build the rules displayed in the Vector UI matrix table - self.state.vectorPushRules = []; - self.state.externalPushRules = []; - - const vectorRuleIds = [ - '.m.rule.contains_display_name', - '.m.rule.contains_user_name', - '.m.rule.roomnotif', - '_keywords', - '.m.rule.room_one_to_one', - '.m.rule.encrypted_room_one_to_one', - '.m.rule.message', - '.m.rule.encrypted', - '.m.rule.invite_for_me', - //'im.vector.rule.member_event', - '.m.rule.call', - '.m.rule.suppress_notices', - '.m.rule.tombstone', - ]; - for (const i in vectorRuleIds) { - const vectorRuleId = vectorRuleIds[i]; - - if (vectorRuleId === '_keywords') { - // keywords needs a special handling - // For Vector UI, this is a single global push rule but translated in Matrix, - // it corresponds to all content push rules (stored in self.state.vectorContentRule) - self.state.vectorPushRules.push({ - "vectorRuleId": "_keywords", - "description": ( - - { _t('Messages containing keywords', - {}, - { 'span': (sub) => - {sub}, - }, - )} - - ), - "vectorState": self.state.vectorContentRules.vectorState, - }); - } else { - const ruleDefinition = VectorPushRulesDefinitions[vectorRuleId]; - const rule = defaultRules.vector[vectorRuleId]; - - const vectorState = ruleDefinition.ruleToVectorState(rule); - - //console.log("Refreshing vectorPushRules for " + vectorRuleId +", "+ ruleDefinition.description +", " + rule +", " + vectorState); - - self.state.vectorPushRules.push({ - "vectorRuleId": vectorRuleId, - "description": _t(ruleDefinition.description), // Text from VectorPushRulesDefinitions.js - "rule": rule, - "vectorState": vectorState, - }); + // Prepare rendering for all of our known rules + preparedNewState.vectorPushRules = {}; + const vectorCategories = [RuleClass.VectorGlobal, RuleClass.VectorMentions, RuleClass.VectorOther]; + for (const category of vectorCategories) { + preparedNewState.vectorPushRules[category] = []; + for (const rule of defaultRules[category]) { + const definition = VectorPushRulesDefinitions[rule.rule_id]; + const vectorState = definition.ruleToVectorState(rule); + preparedNewState.vectorPushRules[category].push({ + ruleId: rule.rule_id, + rule, vectorState, + description: _t(definition.description), + }); + // XXX: Do we need this block from the previous component? + /* // if there was a rule which we couldn't parse, add it to the external list if (rule && !vectorState) { rule.description = ruleDefinition.description; self.state.externalPushRules.push(rule); } - } + */ } + // Quickly sort the rules for display purposes + preparedNewState.vectorPushRules[category].sort((a, b) => { + let idxA = RULE_DISPLAY_ORDER.indexOf(a.ruleId); + let idxB = RULE_DISPLAY_ORDER.indexOf(b.ruleId); + + // Assume unknown things go at the end + if (idxA < 0) idxA = RULE_DISPLAY_ORDER.length; + if (idxB < 0) idxB = RULE_DISPLAY_ORDER.length; + + return idxA - idxB; + }); + + if (category === KEYWORD_RULE_CATEGORY) { + preparedNewState.vectorPushRules[category].push({ + ruleId: KEYWORD_RULE_ID, + description: _t("Messages containing keywords"), + vectorState: preparedNewState.vectorKeywordRuleInfo.vectorState, + }); + } + } + + // XXX: Do we need this block from the previous component? + /* // Build the rules not managed by Vector UI const otherRulesDescriptions = { '.m.rule.message': _t('Notify for all other messages/rooms'), @@ -564,294 +264,384 @@ export default class Notifications extends React.Component { self.state.externalPushRules.push(rule); } } - }); + */ - const pushersPromise = MatrixClientPeg.get().getPushers().then(function(resp) { - self.setState({ pushers: resp.pushers }); - }); + return preparedNewState; + } - Promise.all([pushRulesPromise, pushersPromise]).then(function() { - self.setState({ - phase: Notifications.phases.DISPLAY, - }); - }, function(error) { - console.error(error); - self.setState({ - phase: Notifications.phases.ERROR, - }); - }).finally(() => { - // actually explicitly update our state having been deep-manipulating it - self.setState({ - masterPushRule: self.state.masterPushRule, - vectorContentRules: self.state.vectorContentRules, - vectorPushRules: self.state.vectorPushRules, - externalContentRules: self.state.externalContentRules, - externalPushRules: self.state.externalPushRules, - }); - }); + private async refreshPushers(): Promise> { + return { ...(await MatrixClientPeg.get().getPushers()) }; + } - MatrixClientPeg.get().getThreePids().then((r) => this.setState({ threepids: r.threepids })); + private async refreshThreepids(): Promise> { + return { ...(await MatrixClientPeg.get().getThreePids()) }; + } + + private showSaveError() { + Modal.createTrackedDialog('Error saving notification preferences', '', ErrorDialog, { + title: _t('Error saving notification preferences'), + description: _t('An error occurred whilst saving your notification preferences.'), + }); + } + + private onMasterRuleChanged = async (checked: boolean) => { + this.setState({ phase: Phase.Persisting }); + + try { + const masterRule = this.state.masterPushRule; + await MatrixClientPeg.get().setPushRuleEnabled('global', masterRule.kind, masterRule.rule_id, !checked); + await this.refreshFromServer(); + } catch (e) { + this.setState({ phase: Phase.Error }); + console.error("Error updating master push rule:", e); + this.showSaveError(); + } }; - _onClearNotifications = () => { - const cli = MatrixClientPeg.get(); + private onEmailNotificationsChanged = async (email: string, checked: boolean) => { + this.setState({ phase: Phase.Persisting }); - cli.getRooms().forEach(r => { + try { + if (checked) { + await MatrixClientPeg.get().setPusher({ + kind: "email", + app_id: "m.email", + pushkey: email, + app_display_name: "Email Notifications", + device_display_name: email, + lang: navigator.language, + data: { + brand: SdkConfig.get().brand, + }, + + // We always append for email pushers since we don't want to stop other + // accounts notifying to the same email address + append: true, + }); + } else { + const pusher = this.state.pushers.find(p => p.kind === "email" && p.pushkey === email); + pusher.kind = null; // flag for delete + await MatrixClientPeg.get().setPusher(pusher); + } + + await this.refreshFromServer(); + } catch (e) { + this.setState({ phase: Phase.Error }); + console.error("Error updating email pusher:", e); + this.showSaveError(); + } + }; + + private onDesktopNotificationsChanged = async (checked: boolean) => { + await SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, checked); + this.forceUpdate(); // the toggle is controlled by SettingsStore#getValue() + }; + + private onDesktopShowBodyChanged = async (checked: boolean) => { + await SettingsStore.setValue("notificationBodyEnabled", null, SettingLevel.DEVICE, checked); + this.forceUpdate(); // the toggle is controlled by SettingsStore#getValue() + }; + + private onAudioNotificationsChanged = async (checked: boolean) => { + await SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, checked); + this.forceUpdate(); // the toggle is controlled by SettingsStore#getValue() + }; + + private onRadioChecked = async (rule: IVectorPushRule, checkedState: VectorState) => { + this.setState({ phase: Phase.Persisting }); + + try { + if (rule.ruleId === KEYWORD_RULE_ID) { + console.log("@@ KEYWORDS"); + } else { + const definition = VectorPushRulesDefinitions[rule.ruleId]; + const actions = definition.vectorStateToActions[checkedState]; + if (!actions) { + await MatrixClientPeg.get().setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, false); + } else { + await MatrixClientPeg.get().setPushRuleActions('global', rule.rule.kind, rule.rule.rule_id, actions); + await MatrixClientPeg.get().setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, true); + } + } + + await this.refreshFromServer(); + } catch (e) { + this.setState({ phase: Phase.Error }); + console.error("Error updating push rule:", e); + this.showSaveError(); + } + }; + + private onClearNotificationsClicked = () => { + MatrixClientPeg.get().getRooms().forEach(r => { if (r.getUnreadNotificationCount() > 0) { const events = r.getLiveTimeline().getEvents(); - if (events.length) cli.sendReadReceipt(events.pop()); + if (events.length) { + // noinspection JSIgnoredPromiseFromCall + MatrixClientPeg.get().sendReadReceipt(events[events.length - 1]); + } } }); }; - _updatePushRuleActions(rule, actions, enabled) { - const cli = MatrixClientPeg.get(); + private async setKeywords(keywords: string[], originalRules: IAnnotatedPushRule[]) { + try { + // De-duplicate and remove empties + keywords = Array.from(new Set(keywords)).filter(k => !!k); + const oldKeywords = Array.from(new Set(originalRules.map(r => r.pattern))).filter(k => !!k); - return cli.setPushRuleActions( - 'global', rule.kind, rule.rule_id, actions, - ).then( function() { - // Then, if requested, enabled or disabled the rule - if (undefined != enabled) { - return cli.setPushRuleEnabled( - 'global', rule.kind, rule.rule_id, enabled, - ); + // Note: Technically because of the UI interaction (at the time of writing), the diff + // will only ever be +/-1 so we don't really have to worry about efficiently handling + // tons of keyword changes. + + const diff = arrayDiff(oldKeywords, keywords); + + for (const word of diff.removed) { + for (const rule of originalRules.filter(r => r.pattern === word)) { + await MatrixClientPeg.get().deletePushRule('global', rule.kind, rule.rule_id); + } } + + let ruleVectorState = this.state.vectorKeywordRuleInfo.vectorState; + if (ruleVectorState === VectorState.Off) { + // When the current global keywords rule is OFF, we need to look at + // the flavor of existing rules to apply the same actions + // when creating the new rule. + if (originalRules.length) { + ruleVectorState = PushRuleVectorState.contentRuleVectorStateKind(originalRules[0]); + } else { + ruleVectorState = VectorState.On; // default + } + } + const kind = PushRuleKind.ContentSpecific; + for (const word of diff.added) { + await MatrixClientPeg.get().addPushRule('global', kind, word, { + actions: PushRuleVectorState.actionsFor(ruleVectorState), + pattern: word, + }); + if (ruleVectorState === VectorState.Off) { + await MatrixClientPeg.get().setPushRuleEnabled('global', kind, word, false); + } + } + + await this.refreshFromServer(); + } catch (e) { + this.setState({ phase: Phase.Error }); + console.error("Error updating keyword push rules:", e); + this.showSaveError(); + } + } + + private onKeywordAdd = (keyword: string) => { + const originalRules = objectClone(this.state.vectorKeywordRuleInfo.rules); + + // We add the keyword immediately as a sort of local echo effect + this.setState({ + phase: Phase.Persisting, + vectorKeywordRuleInfo: { + ...this.state.vectorKeywordRuleInfo, + rules: [ + ...this.state.vectorKeywordRuleInfo.rules, + + // XXX: Horrible assumption that we don't need the remaining fields + { pattern: keyword } as IAnnotatedPushRule, + ], + }, + }, async () => { + await this.setKeywords(this.state.vectorKeywordRuleInfo.rules.map(r => r.pattern), originalRules); }); + }; + + private onKeywordRemove = (keyword: string) => { + const originalRules = objectClone(this.state.vectorKeywordRuleInfo.rules); + + // We remove the keyword immediately as a sort of local echo effect + this.setState({ + phase: Phase.Persisting, + vectorKeywordRuleInfo: { + ...this.state.vectorKeywordRuleInfo, + rules: this.state.vectorKeywordRuleInfo.rules.filter(r => r.pattern !== keyword), + }, + }, async () => { + await this.setKeywords(this.state.vectorKeywordRuleInfo.rules.map(r => r.pattern), originalRules); + }); + }; + + private renderTopSection() { + const masterSwitch = ; + + // If all the rules are inhibited, don't show anything. + if (this.isInhibited) { + return masterSwitch; + } + + const emailSwitches = this.state.threepids.filter(t => t.medium === ThreepidMedium.Email) + .map(e => p.kind === "email" && p.pushkey === e.address)} + label={_t("Enable email notifications for %(email)s", { email: e.address })} + onChange={this.onEmailNotificationsChanged.bind(this, e.address)} + disabled={this.state.phase === Phase.Persisting} + />); + + return <> + { masterSwitch } + + + + + + + + { emailSwitches } + ; } - renderNotifRulesTableRow(title, className, pushRuleVectorState) { - return ( -     - + private renderCategory(category: RuleClass) { + if (category !== RuleClass.VectorOther && this.isInhibited) { + return null; // nothing to show for the section + } - + let clearNotifsButton: JSX.Element; + if ( + category === RuleClass.VectorOther + && MatrixClientPeg.get().getRooms().some(r => r.getUnreadNotificationCount() > 0) + ) { + clearNotifsButton = { _t("Clear notifications") }; + } - + if (category === RuleClass.VectorOther && this.isInhibited) { + // only render the utility buttons (if needed) + if (clearNotifsButton) { + return
    +
    { _t("Other") }
    + { clearNotifsButton } +
    ; + } + return null; + } - - + let keywordComposer: JSX.Element; + if (category === RuleClass.VectorMentions) { + keywordComposer = r.pattern)} + onAdd={this.onKeywordAdd} + onRemove={this.onKeywordRemove} + disabled={this.state.phase === Phase.Persisting} + label={_t("Keyword")} + placeholder={_t("New keyword")} + />; + } + + const makeRadio = (r: IVectorPushRule, s: VectorState) => ( + ); - } - renderNotifRulesTableRows() { - const rows = []; - for (const i in this.state.vectorPushRules) { - const rule = this.state.vectorPushRules[i]; - if (rule.rule === undefined && rule.vectorRuleId.startsWith(".m.")) { - console.warn(`Skipping render of rule ${rule.vectorRuleId} due to no underlying rule`); - continue; - } - //console.log("rendering: " + rule.description + ", " + rule.vectorRuleId + ", " + rule.vectorState); - rows.push(this.renderNotifRulesTableRow(rule.description, rule.vectorRuleId, rule.vectorState)); - } - return rows; - } + const rows = this.state.vectorPushRules[category].map(r => + + + + + ); - hasEmailPusher(pushers, address) { - if (pushers === undefined) { - return false; - } - for (let i = 0; i < pushers.length; ++i) { - if (pushers[i].kind === 'email' && pushers[i].pushkey === address) { - return true; - } - } - return false; - } - - emailNotificationsRow(address, label) { - return ; - } - - render() { - let spinner; - if (this.state.phase === Notifications.phases.LOADING) { - const Loader = sdk.getComponent("elements.Spinner"); - spinner = ; + let sectionName: TranslatedString; + switch (category) { + case RuleClass.VectorGlobal: + sectionName = _t("Global"); + break; + case RuleClass.VectorMentions: + sectionName = _t("Mentions & keywords"); + break; + case RuleClass.VectorOther: + sectionName = _t("Other"); + break; + default: + throw new Error("Developer error: Unnamed notifications section: " + category); } - let masterPushRuleDiv; - if (this.state.masterPushRule) { - masterPushRuleDiv = ; - } - - let clearNotificationsButton; - if (MatrixClientPeg.get().getRooms().some(r => r.getUnreadNotificationCount() > 0)) { - clearNotificationsButton = - {_t("Clear notifications")} - ; - } - - // When enabled, the master rule inhibits all existing rules - // So do not show all notification settings - if (this.state.masterPushRule && this.state.masterPushRule.enabled) { - return ( -
    - {masterPushRuleDiv} - -
    - { _t('All notifications are currently disabled for all targets.') } -
    - - {clearNotificationsButton} -
    - ); - } - - const emailThreepids = this.state.threepids.filter((tp) => tp.medium === "email"); - let emailNotificationsRows; - if (emailThreepids.length > 0) { - emailNotificationsRows = emailThreepids.map((threePid) => this.emailNotificationsRow( - threePid.address, `${_t('Enable email notifications')} (${threePid.address})`, - )); - } else if (SettingsStore.getValue(UIFeature.ThirdPartyID)) { - emailNotificationsRows =
    - { _t('Add an email address to configure email notifications') } -
    ; - } - - // Build external push rules - const externalRules = []; - for (const i in this.state.externalPushRules) { - const rule = this.state.externalPushRules[i]; - externalRules.push(
  • { _t(rule.description) }
    • ); - } - - // Show keywords not displayed by the vector UI as a single external push rule - let externalKeywords: any[]|string = []; - for (const i in this.state.externalContentRules) { - const rule = this.state.externalContentRules[i]; - externalKeywords.push(rule.pattern); - } - if (externalKeywords.length) { - externalKeywords = externalKeywords.join(", "); - externalRules.push(
  • - {_t('Notifications on the following keywords follow rules which can’t be displayed here:') } - { externalKeywords } -
    • ); - } - - let devicesSection; - if (this.state.pushers === undefined) { - devicesSection =
    { _t('Unable to fetch notification target list') }
    ; - } else if (this.state.pushers.length === 0) { - devicesSection = null; - } else { - // TODO: It would be great to be able to delete pushers from here too, - // and this wouldn't be hard to add. - const rows = []; - for (let i = 0; i < this.state.pushers.length; ++i) { - rows.push(     - - - ); - } - devicesSection = (
    + {/* @ts-ignore*/} { _t('Off') }{ _t('On') }{ _t('Noisy') }
    - { title } - - - - - - -
    { r.description }{ makeRadio(r, VectorState.On) }{ makeRadio(r, VectorState.Off) }{ makeRadio(r, VectorState.Loud) }
    {this.state.pushers[i].app_display_name}{this.state.pushers[i].device_display_name}
    + return <> +
    + + + + + + + + - {rows} + { rows } -
    { sectionName }{ _t("On") }{ _t("Off") }{ _t("Noisy") }
    ); - } - if (devicesSection) { - devicesSection = (
    -

    { _t('Notification targets') }

    - { devicesSection } -
    ); + + { clearNotifsButton } + { keywordComposer } + ; + } + + private renderTargets() { + if (this.isInhibited) return null; // no targets if there's no notifications + + const rows = this.state.pushers.map(p => + { p.app_display_name } + { p.device_display_name } + ); + + if (!rows.length) return null; // no targets to show + + return
    +
    { _t("Notification targets") }
    + + + { rows } + +
    +
    ; + } + + public render() { + if (this.state.phase === Phase.Loading) { + // Ends up default centered + return ; + } else if (this.state.phase === Phase.Error) { + return

    { _t("There was an error loading your notification settings.") }

    ; } - let advancedSettings; - if (externalRules.length) { - const brand = SdkConfig.get().brand; - advancedSettings = ( -
    -

    { _t('Advanced notification settings') }

    - { _t('There are advanced notifications which are not shown here.') }
    - {_t( - 'You might have configured them in a client other than %(brand)s. ' + - 'You cannot tune them in %(brand)s but they still apply.', - { brand }, - )} -
      - { externalRules } -
    -
    - ); - } - - return ( -
    - - {masterPushRuleDiv} - -
    - - { spinner } - - - - - - - - { emailNotificationsRows } - -
    - - - - {/* @ts-ignore*/} - - {/* @ts-ignore*/} - - {/* @ts-ignore*/} - - - - - - { this.renderNotifRulesTableRows() } - - -
    - {/* @ts-ignore*/} - { _t('Off') }{ _t('On') }{ _t('Noisy') }
    -
    - - { advancedSettings } - - { devicesSection } - - { clearNotificationsButton } -
    - -
    - ); + return
    + { this.renderTopSection() } + { this.renderCategory(RuleClass.VectorGlobal) } + { this.renderCategory(RuleClass.VectorMentions) } + { this.renderCategory(RuleClass.VectorOther) } + { this.renderTargets() } +
    ; } } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 761d48e51b..cfee47e361 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1158,6 +1158,16 @@ "Off": "Off", "On": "On", "Noisy": "Noisy", + "Messages containing keywords": "Messages containing keywords", + "Error saving notification preferences": "Error saving notification preferences", + "An error occurred whilst saving your notification preferences.": "An error occurred whilst saving your notification preferences.", + "Enable for this account": "Enable for this account", + "Enable email notifications for %(email)s": "Enable email notifications for %(email)s", + "Keyword": "Keyword", + "New keyword": "New keyword", + "Global": "Global", + "Mentions & keywords": "Mentions & keywords", + "There was an error loading your notification settings.": "There was an error loading your notification settings.", "Failed to save your profile": "Failed to save your profile", "The operation could not be completed": "The operation could not be completed", "    Upgrade to your own domain": "Upgrade to your own domain", @@ -1656,7 +1666,6 @@ "Show %(count)s more|other": "Show %(count)s more", "Show %(count)s more|one": "Show %(count)s more", "Show less": "Show less", - "Global": "Global", "All messages": "All messages", "Mentions & Keywords": "Mentions & Keywords", "Notification options": "Notification options", From 4444ccb0794f77b60937282bbd9f78b8a3b100c9 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 13 Jul 2021 00:02:44 -0600 Subject: [PATCH 050/179] Appease the linter --- src/components/views/elements/Spinner.tsx | 2 +- src/components/views/settings/Notifications.tsx | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/views/elements/Spinner.tsx b/src/components/views/elements/Spinner.tsx index 93c8f9e5d4..ee43a5bf0e 100644 --- a/src/components/views/elements/Spinner.tsx +++ b/src/components/views/elements/Spinner.tsx @@ -36,7 +36,7 @@ export default class Spinner extends React.PureComponent { { message &&
    { message }
          }
    diff --git a/src/components/views/settings/Notifications.tsx b/src/components/views/settings/Notifications.tsx index 4a733d7bf5..6d74e19ab1 100644 --- a/src/components/views/settings/Notifications.tsx +++ b/src/components/views/settings/Notifications.tsx @@ -17,7 +17,7 @@ limitations under the License. import React from "react"; import Spinner from "../elements/Spinner"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; -import { IAnnotatedPushRule, IPusher, PushRuleKind, RuleId, } from "matrix-js-sdk/src/@types/PushRules"; +import { IAnnotatedPushRule, IPusher, PushRuleKind, RuleId } from "matrix-js-sdk/src/@types/PushRules"; import { ContentRules, IContentRules, @@ -80,7 +80,7 @@ const RULE_DISPLAY_ORDER: string[] = [ RuleId.IncomingCall, RuleId.SuppressNotices, RuleId.Tombstone, -] +]; interface IVectorPushRule { ruleId: RuleId | typeof KEYWORD_RULE_ID | string; @@ -181,7 +181,7 @@ export default class Notifications extends React.PureComponent { // noinspection JSUnfilteredForInLoop const kind = k as PushRuleKind; for (const r of ruleSets.global[kind]) { - const rule: IAnnotatedPushRule = Object.assign(r, {kind}); + const rule: IAnnotatedPushRule = Object.assign(r, { kind }); const category = categories[rule.rule_id] ?? RuleClass.Other; if (rule.rule_id[0] === '.') { @@ -356,11 +356,12 @@ export default class Notifications extends React.PureComponent { } else { const definition = VectorPushRulesDefinitions[rule.ruleId]; const actions = definition.vectorStateToActions[checkedState]; + const cli = MatrixClientPeg.get(); if (!actions) { - await MatrixClientPeg.get().setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, false); + await cli.setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, false); } else { - await MatrixClientPeg.get().setPushRuleActions('global', rule.rule.kind, rule.rule.rule_id, actions); - await MatrixClientPeg.get().setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, true); + await cli.setPushRuleActions('global', rule.rule.kind, rule.rule.rule_id, actions); + await cli.setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, true); } } From 9d60d29368290fa33dfc2eb8a4129ac99f136bab Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 13 Jul 2021 00:04:07 -0600 Subject: [PATCH 051/179] Clean up i18n --- src/i18n/strings/en_EN.json | 35 ++++++++--------------------------- 1 file changed, 8 insertions(+), 27 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index cfee47e361..ed794068e0 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1131,42 +1131,23 @@ "Connecting to integration manager...": "Connecting to integration manager...", "Cannot connect to integration manager": "Cannot connect to integration manager", "The integration manager is offline or it cannot reach your homeserver.": "The integration manager is offline or it cannot reach your homeserver.", - "Error saving email notification preferences": "Error saving email notification preferences", - "An error occurred whilst saving your email notification preferences.": "An error occurred whilst saving your email notification preferences.", - "Keywords": "Keywords", - "Enter keywords separated by a comma:": "Enter keywords separated by a comma:", - "Failed to change settings": "Failed to change settings", - "Can't update user notification settings": "Can't update user notification settings", - "Failed to update keywords": "Failed to update keywords", - "Messages containing keywords": "Messages containing keywords", - "Notify for all other messages/rooms": "Notify for all other messages/rooms", - "Notify me for anything else": "Notify me for anything else", - "Enable notifications for this account": "Enable notifications for this account", - "Clear notifications": "Clear notifications", - "All notifications are currently disabled for all targets.": "All notifications are currently disabled for all targets.", - "Enable email notifications": "Enable email notifications", - "Add an email address to configure email notifications": "Add an email address to configure email notifications", - "Notifications on the following keywords follow rules which can’t be displayed here:": "Notifications on the following keywords follow rules which can’t be displayed here:", - "Unable to fetch notification target list": "Unable to fetch notification target list", - "Notification targets": "Notification targets", - "Advanced notification settings": "Advanced notification settings", - "There are advanced notifications which are not shown here.": "There are advanced notifications which are not shown here.", - "You might have configured them in a client other than %(brand)s. You cannot tune them in %(brand)s but they still apply.": "You might have configured them in a client other than %(brand)s. You cannot tune them in %(brand)s but they still apply.", - "Enable desktop notifications for this session": "Enable desktop notifications for this session", - "Show message in desktop notification": "Show message in desktop notification", - "Enable audible notifications for this session": "Enable audible notifications for this session", - "Off": "Off", - "On": "On", - "Noisy": "Noisy", "Messages containing keywords": "Messages containing keywords", "Error saving notification preferences": "Error saving notification preferences", "An error occurred whilst saving your notification preferences.": "An error occurred whilst saving your notification preferences.", "Enable for this account": "Enable for this account", "Enable email notifications for %(email)s": "Enable email notifications for %(email)s", + "Enable desktop notifications for this session": "Enable desktop notifications for this session", + "Show message in desktop notification": "Show message in desktop notification", + "Enable audible notifications for this session": "Enable audible notifications for this session", + "Clear notifications": "Clear notifications", "Keyword": "Keyword", "New keyword": "New keyword", "Global": "Global", "Mentions & keywords": "Mentions & keywords", + "On": "On", + "Off": "Off", + "Noisy": "Noisy", + "Notification targets": "Notification targets", "There was an error loading your notification settings.": "There was an error loading your notification settings.", "Failed to save your profile": "Failed to save your profile", "The operation could not be completed": "The operation could not be completed", From 2e295a94ed61abc21ea1e404eaa5d2fda166cbd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 08:17:51 +0200 Subject: [PATCH 052/179] Don't export IProps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 2 +- src/components/views/messages/MImageBody.tsx | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 9d9559cdd1..91206e67e8 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -43,7 +43,7 @@ const ZOOM_COEFFICIENT = 0.0025; // If we have moved only this much we can zoom const ZOOM_DISTANCE = 10; -export interface IProps { +interface IProps { src: string; // the source of the image being displayed name?: string; // the main title ('name') for the image link?: string; // the link (if any) applied to the name of the image diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index cd0e259bef..48e5743212 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -16,12 +16,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { createRef } from 'react'; +import React, { ComponentProps, createRef } from 'react'; import { Blurhash } from "react-blurhash"; import MFileBody from './MFileBody'; import Modal from '../../../Modal'; -import * as sdk from '../../../index'; import { decryptFile } from '../../../utils/DecryptFile'; import { _t } from '../../../languageHandler'; import SettingsStore from "../../../settings/SettingsStore"; @@ -33,7 +32,7 @@ import { BLURHASH_FIELD } from "../../../ContentMessages"; import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks'; import { IMediaEventContent } from '../../../customisations/models/IMediaEventContent'; -import { IProps as ImageViewIProps } from "../elements/ImageView"; +import ImageView from '../elements/ImageView'; export interface IProps { /* the MatrixEvent to show */ @@ -115,8 +114,7 @@ export default class MImageBody extends React.Component { const content = this.props.mxEvent.getContent() as IMediaEventContent; const httpUrl = this.getContentUrl(); - const ImageView = sdk.getComponent("elements.ImageView"); - const params: ImageViewIProps = { + const params: ComponentProps = { src: httpUrl, name: content.body?.length > 0 ? content.body : _t('Attachment'), mxEvent: this.props.mxEvent, From 7bd7f704f91cd37dd2dd6b2c54ce073f8b774d9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 08:20:17 +0200 Subject: [PATCH 053/179] Extend IDialogProps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 91206e67e8..94f60d29eb 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -33,6 +33,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { normalizeWheelEvent } from "../../../utils/Mouse"; +import { IDialogProps } from '../dialogs/IDialogProps'; // Max scale to keep gaps around the image const MAX_SCALE = 0.95; @@ -43,14 +44,13 @@ const ZOOM_COEFFICIENT = 0.0025; // If we have moved only this much we can zoom const ZOOM_DISTANCE = 10; -interface IProps { +interface IProps extends IDialogProps { src: string; // the source of the image being displayed name?: string; // the main title ('name') for the image link?: string; // the link (if any) applied to the name of the image width?: number; // width of the image src in pixels height?: number; // height of the image src in pixels fileSize?: number; // size of the image src in bytes - onFinished?(): void; // callback when the lightbox is dismissed // the event (if any) that the Image is displaying. Used for event-specific stuff like // redactions, senders, timestamps etc. Other descriptors are taken from the explicit From cbe94c3c5fbd84b1f24ddf79a94d6e90c0ae37ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 08:23:01 +0200 Subject: [PATCH 054/179] Kill-off sdk.getComponent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ReplyThread.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index b6368eb5b3..c22225f766 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -16,7 +16,6 @@ See the License for the specific language governing permissions and limitations under the License. */ import React from 'react'; -import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import PropTypes from 'prop-types'; import dis from '../../../dispatcher/dispatcher'; @@ -31,6 +30,9 @@ import { Action } from "../../../dispatcher/actions"; import sanitizeHtml from "sanitize-html"; import { PERMITTED_URL_SCHEMES } from "../../../HtmlUtils"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import Spinner from './Spinner'; +import ReplyTile from "../rooms/ReplyTile"; +import Pill from './Pill'; // This component does no cycle detection, simply because the only way to make such a cycle would be to // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would @@ -352,7 +354,6 @@ export default class ReplyThread extends React.Component {
    ; } else if (this.state.loadedEv) { const ev = this.state.loadedEv; - const Pill = sdk.getComponent('elements.Pill'); const room = this.context.getRoom(ev.getRoomId()); header =
    { @@ -370,11 +371,9 @@ export default class ReplyThread extends React.Component { }
    ; } else if (this.state.loading) { - const Spinner = sdk.getComponent("elements.Spinner"); header = ; } - const ReplyTile = sdk.getComponent('views.rooms.ReplyTile'); const evTiles = this.state.events.map((ev) => { return
    Date: Tue, 13 Jul 2021 00:23:56 -0600 Subject: [PATCH 055/179] Copy over the whole feature of changing the state for keywords entirely --- .../views/settings/Notifications.tsx | 34 +++++++++++++++++-- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/src/components/views/settings/Notifications.tsx b/src/components/views/settings/Notifications.tsx index 6d74e19ab1..6baac8892e 100644 --- a/src/components/views/settings/Notifications.tsx +++ b/src/components/views/settings/Notifications.tsx @@ -17,7 +17,7 @@ limitations under the License. import React from "react"; import Spinner from "../elements/Spinner"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; -import { IAnnotatedPushRule, IPusher, PushRuleKind, RuleId } from "matrix-js-sdk/src/@types/PushRules"; +import { IAnnotatedPushRule, IPusher, PushRuleAction, PushRuleKind, RuleId } from "matrix-js-sdk/src/@types/PushRules"; import { ContentRules, IContentRules, @@ -351,12 +351,40 @@ export default class Notifications extends React.PureComponent { this.setState({ phase: Phase.Persisting }); try { + const cli = MatrixClientPeg.get(); if (rule.ruleId === KEYWORD_RULE_ID) { - console.log("@@ KEYWORDS"); + // Update all the keywords + for (const rule of this.state.vectorKeywordRuleInfo.rules) { + let enabled: boolean; + let actions: PushRuleAction[]; + if (checkedState === VectorState.On) { + if (rule.actions.length !== 1) { // XXX: Magic number + actions = PushRuleVectorState.actionsFor(checkedState); + } + if (this.state.vectorKeywordRuleInfo.vectorState === VectorState.Off) { + enabled = true; + } + } else if (checkedState === VectorState.Loud) { + if (rule.actions.length !== 3) { // XXX: Magic number + actions = PushRuleVectorState.actionsFor(checkedState); + } + if (this.state.vectorKeywordRuleInfo.vectorState === VectorState.Off) { + enabled = true; + } + } else { + enabled = false; + } + + if (actions) { + await cli.setPushRuleActions('global', rule.kind, rule.rule_id, actions); + } + if (enabled !== undefined) { + await cli.setPushRuleEnabled('global', rule.kind, rule.rule_id, enabled); + } + } } else { const definition = VectorPushRulesDefinitions[rule.ruleId]; const actions = definition.vectorStateToActions[checkedState]; - const cli = MatrixClientPeg.get(); if (!actions) { await cli.setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, false); } else { From 5f81cfe9d91316b71b099870014df3443bc4c8c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 08:24:18 +0200 Subject: [PATCH 056/179] Nicer formatting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index d8184d01be..8bf1d168f3 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -70,7 +70,14 @@ limitations under the License. -webkit-line-clamp: $reply-lines; padding: 4px; } - .markdown-body blockquote, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul { + + .markdown-body blockquote, + .markdown-body dl, + .markdown-body ol, + .markdown-body p, + .markdown-body pre, + .markdown-body table, + .markdown-body ul { margin-bottom: 4px; } } From ae5e10ff0cefa79c22b584d018cea6738eeb833f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 08:45:36 +0200 Subject: [PATCH 057/179] Burn sdk.getComponent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/ReplyPreview.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js index ca95dbb62f..2e06cb57bd 100644 --- a/src/components/views/rooms/ReplyPreview.js +++ b/src/components/views/rooms/ReplyPreview.js @@ -16,12 +16,12 @@ limitations under the License. import React from 'react'; import dis from '../../../dispatcher/dispatcher'; -import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import RoomViewStore from '../../../stores/RoomViewStore'; import PropTypes from "prop-types"; import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import ReplyTile from './ReplyTile'; function cancelQuoting() { dis.dispatch({ @@ -69,8 +69,6 @@ export default class ReplyPreview extends React.Component { render() { if (!this.state.event) return null; - const ReplyTile = sdk.getComponent('rooms.ReplyTile'); - return
    From 04098dc74cd106eadf58338de6b64d49971aea68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 08:46:45 +0200 Subject: [PATCH 058/179] Remove unnecessary constructor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageReplyBody.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx index da720fc00f..cf60ef2ed0 100644 --- a/src/components/views/messages/MImageReplyBody.tsx +++ b/src/components/views/messages/MImageReplyBody.tsx @@ -15,16 +15,12 @@ limitations under the License. */ import React from "react"; -import MImageBody, { IProps as MImageBodyIProps } from "./MImageBody"; +import MImageBody from "./MImageBody"; import { presentableTextForFile } from "./MFileBody"; import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent"; import SenderProfile from "./SenderProfile"; export default class MImageReplyBody extends MImageBody { - constructor(props: MImageBodyIProps) { - super(props); - } - public onClick = (ev: React.MouseEvent): void => { ev.preventDefault(); }; From b5baf404be3124faf64d2a7d5e00f55abb2f798c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 08:47:37 +0200 Subject: [PATCH 059/179] Don't use as MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageReplyBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx index cf60ef2ed0..9a12cd454c 100644 --- a/src/components/views/messages/MImageReplyBody.tsx +++ b/src/components/views/messages/MImageReplyBody.tsx @@ -39,7 +39,7 @@ export default class MImageReplyBody extends MImageBody { return super.render(); } - const content = this.props.mxEvent.getContent() as IMediaEventContent; + const content = this.props.mxEvent.getContent(); const contentUrl = this.getContentUrl(); const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content); From 70e94f9af5d7b18d8855bd13bb0cabfb170a4fca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 08:48:43 +0200 Subject: [PATCH 060/179] Formatting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageReplyBody.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx index 9a12cd454c..74cb8ac7a9 100644 --- a/src/components/views/messages/MImageReplyBody.tsx +++ b/src/components/views/messages/MImageReplyBody.tsx @@ -50,9 +50,9 @@ export default class MImageReplyBody extends MImageBody { />; return
    -
    {thumbnail}
    -
    {sender}
    -
    {fileBody}
    +
    { thumbnail }
    +
    { sender }
    +
    { fileBody }
    ; } } From 8f8377a71ccd5d6345457ad698632d1a2a365ef1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:16:01 +0200 Subject: [PATCH 061/179] Types MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 48e5743212..c56ec2f6c8 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -33,6 +33,7 @@ import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks'; import { IMediaEventContent } from '../../../customisations/models/IMediaEventContent'; import ImageView from '../elements/ImageView'; +import { SyncState } from 'matrix-js-sdk/src/sync.api'; export interface IProps { /* the MatrixEvent to show */ @@ -85,7 +86,7 @@ export default class MImageBody extends React.Component { } // FIXME: factor this out and apply it to MVideoBody and MAudioBody too! - private onClientSync = (syncState, prevState): void => { + private onClientSync = (syncState: SyncState, prevState: SyncState): void => { if (this.unmounted) return; // Consider the client reconnected if there is no error with syncing. // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP. From 5fc35565df19698fab4528175a3326ef8a472036 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:16:53 +0200 Subject: [PATCH 062/179] More TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index c56ec2f6c8..b4cb67e055 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -113,13 +113,14 @@ export default class MImageBody extends React.Component { return; } - const content = this.props.mxEvent.getContent() as IMediaEventContent; + const content = this.props.mxEvent.getContent(); const httpUrl = this.getContentUrl(); const params: ComponentProps = { src: httpUrl, name: content.body?.length > 0 ? content.body : _t('Attachment'), mxEvent: this.props.mxEvent, permalinkCreator: this.props.permalinkCreator, + onFinished: () => {}, }; if (content.info) { From 2a403f6cfef977372af42eac6610822c33fa9b3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:17:18 +0200 Subject: [PATCH 063/179] Remove additional ? MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index b4cb67e055..a72cfa01d4 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -135,7 +135,7 @@ export default class MImageBody extends React.Component { private isGif = (): boolean => { const content = this.props.mxEvent.getContent(); - return content?.info?.mimetype === "image/gif"; + return content.info?.mimetype === "image/gif"; }; private onImageEnter = (e: React.MouseEvent): void => { From bdbd03c4ff0eb7080faa4171c1de4f56d82056da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:18:05 +0200 Subject: [PATCH 064/179] Types MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index a72cfa01d4..f3ef1bf304 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -138,7 +138,7 @@ export default class MImageBody extends React.Component { return content.info?.mimetype === "image/gif"; }; - private onImageEnter = (e: React.MouseEvent): void => { + private onImageEnter = (e: React.MouseEvent): void => { this.setState({ hover: true }); if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) { From fa4977c4da0b9e9875bafb567358c75e46a4a71e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:18:34 +0200 Subject: [PATCH 065/179] Use current target MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index f3ef1bf304..91f1315f7a 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -144,7 +144,7 @@ export default class MImageBody extends React.Component { if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) { return; } - const imgElement = e.target as HTMLImageElement; + const imgElement = e.currentTarget; imgElement.src = this.getContentUrl(); }; From 6193bc2a828aab69251e4fb09ef0c0b4731bbf82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:19:19 +0200 Subject: [PATCH 066/179] Types MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 91f1315f7a..35975109e7 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -148,7 +148,7 @@ export default class MImageBody extends React.Component { imgElement.src = this.getContentUrl(); }; - private onImageLeave = (e: React.MouseEvent): void => { + private onImageLeave = (e: React.MouseEvent): void => { this.setState({ hover: false }); if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) { From 86580f3f20f7bef1937a8416c07a541514ea0c91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:19:45 +0200 Subject: [PATCH 067/179] current target MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 35975109e7..a669505181 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -154,7 +154,7 @@ export default class MImageBody extends React.Component { if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) { return; } - const imgElement = e.target as HTMLImageElement; + const imgElement = e.currentTarget; imgElement.src = this.getThumbUrl(); }; From af7769ce935a39c525adede743056963f765d8c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:20:13 +0200 Subject: [PATCH 068/179] Types! MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index a669505181..1e9678dbef 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -195,7 +195,7 @@ export default class MImageBody extends React.Component { const thumbWidth = 800; const thumbHeight = 600; - const content = this.props.mxEvent.getContent() as IMediaEventContent; + const content = this.props.mxEvent.getContent(); const media = mediaFromContent(content); if (media.isEncrypted) { From 4cf4ab2266959370f78eea4919cb0237813085ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:20:40 +0200 Subject: [PATCH 069/179] Return type MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 1e9678dbef..a4a615fa65 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -439,7 +439,7 @@ export default class MImageBody extends React.Component { } // Overidden by MStickerBody - protected getPlaceholder(width: number, height: number) { + protected getPlaceholder(width: number, height: number): JSX.Element { const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD]; if (blurhash) return ; return
    From e4d1859fb70d9ffa9b8e8c7516e793ed56224df2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:21:05 +0200 Subject: [PATCH 070/179] Ret type MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index a4a615fa65..2062191303 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -448,7 +448,7 @@ export default class MImageBody extends React.Component { } // Overidden by MStickerBody - protected getTooltip() { + protected getTooltip(): JSX.Element { return null; } From ef1a1ebe12c5033cfe01a47f3cf0bb88125c715c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:21:33 +0200 Subject: [PATCH 071/179] TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 2062191303..3f5f27eca8 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -458,7 +458,7 @@ export default class MImageBody extends React.Component { } render() { - const content = this.props.mxEvent.getContent() as IMediaEventContent; + const content = this.props.mxEvent.getContent(); if (this.state.error !== null) { return ( From 931bba747abbf9e2fe7f4974eed55441ff71125d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:22:13 +0200 Subject: [PATCH 072/179] Replaceable component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/ReplyTile.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index 757c273b50..227c5b6585 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -35,6 +35,7 @@ interface IProps { onHeightChanged?(): void; } +@replaceableComponent("views.rooms.ReplyTile") export default class ReplyTile extends React.PureComponent { static defaultProps = { onHeightChanged: () => {}, From 63ad95246a0a62bf5e24a207c5a054dd2764c89d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:23:57 +0200 Subject: [PATCH 073/179] EventType enum! MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/ReplyTile.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index 227c5b6585..775091a59f 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -26,6 +26,7 @@ import SenderProfile from "../messages/SenderProfile"; import TextualBody from "../messages/TextualBody"; import MImageReplyBody from "../messages/MImageReplyBody"; import * as sdk from '../../../index'; +import { EventType } from 'matrix-js-sdk/src/@types/event'; interface IProps { mxEvent: MatrixEvent; @@ -78,9 +79,11 @@ export default class ReplyTile extends React.PureComponent { const eventType = this.props.mxEvent.getType(); // Info messages are basically information about commands processed on a room - let isInfoMessage = ( - eventType !== 'm.room.message' && eventType !== 'm.sticker' && eventType !== 'm.room.create' - ); + let isInfoMessage = [ + EventType.RoomMessage, + EventType.Sticker, + EventType.RoomCreate, + ].includes(eventType as EventType); let tileHandler = getHandlerTile(this.props.mxEvent); // If we're showing hidden events in the timeline, we should use the From 22b029d11672186296558f4e570e76f0b851e925 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:24:40 +0200 Subject: [PATCH 074/179] Relation type MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/ReplyTile.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index 775091a59f..8807be680c 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -26,7 +26,7 @@ import SenderProfile from "../messages/SenderProfile"; import TextualBody from "../messages/TextualBody"; import MImageReplyBody from "../messages/MImageReplyBody"; import * as sdk from '../../../index'; -import { EventType } from 'matrix-js-sdk/src/@types/event'; +import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event'; interface IProps { mxEvent: MatrixEvent; @@ -90,7 +90,7 @@ export default class ReplyTile extends React.PureComponent { // source tile when there's no regular tile for an event and also for // replace relations (which otherwise would display as a confusing // duplicate of the thing they are replacing). - const useSource = !tileHandler || this.props.mxEvent.isRelation("m.replace"); + const useSource = !tileHandler || this.props.mxEvent.isRelation(RelationType.Replace); if (useSource && SettingsStore.getValue("showHiddenEventsInTimeline")) { tileHandler = "messages.ViewSourceEvent"; // Reuse info message avatar and sender profile styling From 0bf595d8d494f6bcd2e9d38c2147be1eb39099f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:26:27 +0200 Subject: [PATCH 075/179] Enums MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/ReplyTile.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index 8807be680c..f6a4bd7a18 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -26,7 +26,7 @@ import SenderProfile from "../messages/SenderProfile"; import TextualBody from "../messages/TextualBody"; import MImageReplyBody from "../messages/MImageReplyBody"; import * as sdk from '../../../index'; -import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event'; +import { EventType, MsgType, RelationType } from 'matrix-js-sdk/src/@types/event'; interface IProps { mxEvent: MatrixEvent; @@ -119,7 +119,7 @@ export default class ReplyTile extends React.PureComponent { } let sender; - const needsSenderProfile = msgtype !== 'm.image' && tileHandler !== 'messages.RoomCreate' && !isInfoMessage; + const needsSenderProfile = msgtype !== MsgType.Image && tileHandler !== EventType.RoomCreate && !isInfoMessage; if (needsSenderProfile) { sender = Date: Tue, 13 Jul 2021 09:27:22 +0200 Subject: [PATCH 076/179] More compact classNames MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/ReplyTile.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index f6a4bd7a18..1b9f3e2fac 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -108,8 +108,7 @@ export default class ReplyTile extends React.PureComponent { const EventTileType = sdk.getComponent(tileHandler); - const classes = classNames({ - mx_ReplyTile: true, + const classes = classNames("mx_ReplyTile", { mx_ReplyTile_info: isInfoMessage, }); From c44de3bea817bab53c3bcc74ecad7ef993d97a63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:30:52 +0200 Subject: [PATCH 077/179] Enums MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/ReplyTile.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index 1b9f3e2fac..593ebffedd 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -128,15 +128,15 @@ export default class ReplyTile extends React.PureComponent { } const msgtypeOverrides = { - "m.image": MImageReplyBody, + [MsgType.Image]: MImageReplyBody, // We don't want a download link for files, just the file name is enough. - "m.file": TextualBody, + [MsgType.File]: TextualBody, "m.sticker": TextualBody, - "m.audio": TextualBody, - "m.video": TextualBody, + [MsgType.Audio]: TextualBody, + [MsgType.Video]: TextualBody, }; const evOverrides = { - "m.sticker": TextualBody, + [EventType.Sticker]: TextualBody, }; return ( From 069180b16dda2cf02c97569017cbd27064f534ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:31:28 +0200 Subject: [PATCH 078/179] Remove contructor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/ReplyTile.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index 593ebffedd..9cc42faca3 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -42,10 +42,6 @@ export default class ReplyTile extends React.PureComponent { onHeightChanged: () => {}, }; - constructor(props: IProps) { - super(props); - } - componentDidMount() { this.props.mxEvent.on("Event.decrypted", this.onDecrypted); } From 43cf7bc6110cdbe6750f5a239224a0813e758ebb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:33:45 +0200 Subject: [PATCH 079/179] Remove 0px MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 8bf1d168f3..04dc34092a 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -83,7 +83,7 @@ limitations under the License. } .mx_ReplyTile.mx_ReplyTile_info { - padding-top: 0px; + padding-top: 0; } .mx_ReplyTile .mx_SenderProfile { @@ -92,10 +92,10 @@ limitations under the License. display: inline-block; /* anti-zalgo, with overflow hidden */ overflow: hidden; cursor: pointer; - padding-left: 0px; /* left gutter */ - padding-bottom: 0px; - padding-top: 0px; - margin: 0px; + padding-left: 0; /* left gutter */ + padding-bottom: 0; + padding-top: 0; + margin: 0; line-height: 17px; /* the next three lines, along with overflow hidden, truncate long display names */ white-space: nowrap; From e01d1572ac1521d2b4f845c794bd0a81762fb53d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:34:43 +0200 Subject: [PATCH 080/179] Formatting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MFileBody.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js index f6346e56d9..e95f397e40 100644 --- a/src/components/views/messages/MFileBody.js +++ b/src/components/views/messages/MFileBody.js @@ -173,7 +173,9 @@ export default class MFileBody extends React.Component { placeholder = (
    - {presentableTextForFile(content, false)} + + { presentableTextForFile(content, false) } +
    ); } From 562d43e81c48fae61a51a0561b28f248ff086238 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 13 Jul 2021 09:36:31 +0200 Subject: [PATCH 081/179] Font MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 04dc34092a..ff3a0d07d1 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -19,7 +19,7 @@ limitations under the License. clear: both; padding-top: 2px; padding-bottom: 2px; - font-size: 14px; + font-size: $font-14px; position: relative; line-height: 16px; } @@ -43,7 +43,7 @@ limitations under the License. // We do reply size limiting with CSS to avoid duplicating the TextualBody component. .mx_ReplyTile .mx_EventTile_content { $reply-lines: 2; - $line-height: 22px; + $line-height: $font-22px; $max-height: 66px; pointer-events: none; @@ -58,7 +58,7 @@ limitations under the License. .mx_EventTile_body.mx_EventTile_bigEmoji { line-height: $line-height !important; // Override the big emoji override - font-size: 14px !important; + font-size: $font-14px !important; } // Hack to cut content in 
     tags too
@@ -88,7 +88,7 @@ limitations under the License.
 
 .mx_ReplyTile .mx_SenderProfile {
     color: $primary-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     display: inline-block; /* anti-zalgo, with overflow hidden */
     overflow: hidden;
     cursor: pointer;
@@ -96,7 +96,7 @@ limitations under the License.
     padding-bottom: 0;
     padding-top: 0;
     margin: 0;
-    line-height: 17px;
+    line-height: $font-17px;
     /* the next three lines, along with overflow hidden, truncate long display names */
     white-space: nowrap;
     text-overflow: ellipsis;

From 9455a6d77270595d1b8c07d17c4d00a0a1332293 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 09:40:29 +0200
Subject: [PATCH 082/179] Import replaceableComponent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/ReplyTile.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 9cc42faca3..fdd43e3200 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -27,6 +27,7 @@ import TextualBody from "../messages/TextualBody";
 import MImageReplyBody from "../messages/MImageReplyBody";
 import * as sdk from '../../../index';
 import { EventType, MsgType, RelationType } from 'matrix-js-sdk/src/@types/event';
+import { replaceableComponent } from '../../../utils/replaceableComponent';
 
 interface IProps {
     mxEvent: MatrixEvent;

From bc7a8f8406e960772e16932dd4df96daf38ba6b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 10:12:24 +0200
Subject: [PATCH 083/179] Handle redaction
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/ReplyTile.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index fdd43e3200..fd90d2d536 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -45,6 +45,7 @@ export default class ReplyTile extends React.PureComponent {
 
     componentDidMount() {
         this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
+        this.props.mxEvent.on("Event.beforeRedaction", this.onBeforeRedaction);
     }
 
     componentWillUnmount() {
@@ -58,6 +59,11 @@ export default class ReplyTile extends React.PureComponent {
         }
     };
 
+    private onBeforeRedaction = (): void => {
+        // When the event gets redacted, update it, so that a different tile handler is used
+        this.forceUpdate();
+    };
+
     private onClick = (e: React.MouseEvent): void => {
         // This allows the permalink to be opened in a new tab/window or copied as
         // matrix.to, but also for it to enable routing within Riot when clicked.

From fca5125c5b1fc47c21d1cee9b856db7fd25f46a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 10:36:44 +0200
Subject: [PATCH 084/179] Improve redacted body look
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss      | 2 +-
 src/components/views/rooms/ReplyTile.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index ff3a0d07d1..dee68871c2 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -21,7 +21,7 @@ limitations under the License.
     padding-bottom: 2px;
     font-size: $font-14px;
     position: relative;
-    line-height: 16px;
+    line-height: $font-16px;
 }
 
 .mx_ReplyTile > a {
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index fd90d2d536..78e630a0a2 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -112,7 +112,7 @@ export default class ReplyTile extends React.PureComponent {
         const EventTileType = sdk.getComponent(tileHandler);
 
         const classes = classNames("mx_ReplyTile", {
-            mx_ReplyTile_info: isInfoMessage,
+            mx_ReplyTile_info: isInfoMessage && !this.props.mxEvent.isRedacted(),
         });
 
         let permalink = "#";

From 866a11d7e39b6746689453639018d221f40f94f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 11:49:49 +0200
Subject: [PATCH 085/179] Fix image alignment issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_MImageReplyBody.scss      | 14 +++-----------
 src/components/views/messages/MImageBody.tsx      | 13 +++++++++----
 src/components/views/messages/MImageReplyBody.tsx | 10 ++++++----
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss
index 8c5cb97478..f0401d21db 100644
--- a/res/css/views/messages/_MImageReplyBody.scss
+++ b/res/css/views/messages/_MImageReplyBody.scss
@@ -15,19 +15,11 @@ limitations under the License.
 */
 
 .mx_MImageReplyBody {
-    display: grid;
-    grid-template:
-        "image sender"   20px
-        "image filename" 20px
-        / 44px  auto;
-    grid-gap: 4px;
-}
-
-.mx_MImageReplyBody_thumbnail {
-    grid-area: image;
+    display: flex;
 
     .mx_MImageBody_thumbnail_container {
-        max-height: 44px !important;
+        flex: 1;
+        padding-right: 4px;
     }
 }
 
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 3f5f27eca8..0acdbaf253 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -332,7 +332,12 @@ export default class MImageBody extends React.Component {
     _afterComponentWillUnmount() {
     }
 
-    protected messageContent(contentUrl: string, thumbUrl: string, content: IMediaEventContent): JSX.Element {
+    protected messageContent(
+        contentUrl: string,
+        thumbUrl: string,
+        content: IMediaEventContent,
+        forcedHeight?: number,
+    ): JSX.Element {
         let infoWidth;
         let infoHeight;
 
@@ -367,7 +372,7 @@ export default class MImageBody extends React.Component {
         }
 
         // The maximum height of the thumbnail as it is rendered as an 
-        const maxHeight = Math.min(this.props.maxImageHeight || 600, infoHeight);
+        const maxHeight = forcedHeight || Math.min((this.props.maxImageHeight || 600), infoHeight);
         // The maximum width of the thumbnail, as dictated by its natural
         // maximum height.
         const maxWidth = infoWidth * maxHeight / infoHeight;
@@ -407,9 +412,9 @@ export default class MImageBody extends React.Component {
         }
 
         const thumbnail = (
-            
    
+            
    
                 { /* Calculate aspect ratio, using %padding will size _container correctly */ }
-                
    
+                
    
                 { showPlaceholder &&
                     
    ();
 
         const contentUrl = this.getContentUrl();
-        const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content);
+        const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content, 44);
         const fileBody = this.getFileBody();
         const sender = ;
 
         return 
    
-            
    { thumbnail }
    
-            
    { sender }
    
-            
    { fileBody }
    
+            { thumbnail }
+            
    
+                
    { sender }
    
+                
    { fileBody }
    
+            
    
         
    ;
     }
 }

From 75e7948ca8eed1ea98925af32cfbe62024f634b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 11:57:40 +0200
Subject: [PATCH 086/179] Handle event edits
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/ReplyTile.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 78e630a0a2..e751a8ddc3 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -45,11 +45,14 @@ export default class ReplyTile extends React.PureComponent {
 
     componentDidMount() {
         this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
-        this.props.mxEvent.on("Event.beforeRedaction", this.onBeforeRedaction);
+        this.props.mxEvent.on("Event.beforeRedaction", this.onEventRequiresUpdate);
+        this.props.mxEvent.on("Event.replaced", this.onEventRequiresUpdate);
     }
 
     componentWillUnmount() {
         this.props.mxEvent.removeListener("Event.decrypted", this.onDecrypted);
+        this.props.mxEvent.removeListener("Event.beforeRedaction", this.onEventRequiresUpdate);
+        this.props.mxEvent.removeListener("Event.replaced", this.onEventRequiresUpdate);
     }
 
     private onDecrypted = (): void => {
@@ -59,8 +62,8 @@ export default class ReplyTile extends React.PureComponent {
         }
     };
 
-    private onBeforeRedaction = (): void => {
-        // When the event gets redacted, update it, so that a different tile handler is used
+    private onEventRequiresUpdate = (): void => {
+        // Force update when necessary - redactions and edits
         this.forceUpdate();
     };
 
@@ -155,6 +158,7 @@ export default class ReplyTile extends React.PureComponent {
                         showUrlPreview={false}
                         overrideBodyTypes={msgtypeOverrides}
                         overrideEventTypes={evOverrides}
+                        replacingEventId={this.props.mxEvent.replacingEventId()}
                         maxImageHeight={96} />
                 
             
    

From b4ae54dcce460a6147fed525705c35f7224f62e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 12:15:22 +0200
Subject: [PATCH 087/179] Remove unused CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index dee68871c2..d059d553a9 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -15,8 +15,6 @@ limitations under the License.
 */
 
 .mx_ReplyTile {
-    max-width: 100%;
-    clear: both;
     padding-top: 2px;
     padding-bottom: 2px;
     font-size: $font-14px;
@@ -102,7 +100,3 @@ limitations under the License.
     text-overflow: ellipsis;
     max-width: calc(100% - 65px);
 }
-
-.mx_ReplyTile_contextual {
-    opacity: 0.4;
-}

From 8fc90e1d5341f1977cf93779897d508f57488389 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 12:26:14 +0200
Subject: [PATCH 088/179] Fix isInfoMessage regression
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/ReplyTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index e751a8ddc3..19da345579 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -85,7 +85,7 @@ export default class ReplyTile extends React.PureComponent {
         const eventType = this.props.mxEvent.getType();
 
         // Info messages are basically information about commands processed on a room
-        let isInfoMessage = [
+        let isInfoMessage = ![
             EventType.RoomMessage,
             EventType.Sticker,
             EventType.RoomCreate,

From d149cead5fb0348ba0c6cc8013a2e78beb4675ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 12:27:03 +0200
Subject: [PATCH 089/179] Remove unused CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index d059d553a9..21e5fedea9 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -98,5 +98,4 @@ limitations under the License.
     /* the next three lines, along with overflow hidden, truncate long display names */
     white-space: nowrap;
     text-overflow: ellipsis;
-    max-width: calc(100% - 65px);
 }

From 8e456b062ad5909dee2f3f3f009a2d051dedad55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 12:32:17 +0200
Subject: [PATCH 090/179] More unused CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index 21e5fedea9..007ed35ecf 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -42,7 +42,6 @@ limitations under the License.
 .mx_ReplyTile .mx_EventTile_content {
     $reply-lines: 2;
     $line-height: $font-22px;
-    $max-height: 66px;
 
     pointer-events: none;
 
@@ -51,7 +50,6 @@ limitations under the License.
     -webkit-box-orient: vertical;
     -webkit-line-clamp: $reply-lines;
     line-height: $line-height;
-    max-height: $max-height;
 
     .mx_EventTile_body.mx_EventTile_bigEmoji {
         line-height: $line-height !important;

From 2660e25d6e932627a0814cd7d3b34a4d26a9865a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 13:04:37 +0200
Subject: [PATCH 091/179] Deduplicate some code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/EventTile.tsx | 31 ++-----------------
 src/components/views/rooms/ReplyTile.tsx | 24 ++-------------
 src/utils/EventUtils.ts                  | 38 ++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index bf2438d267..b1e75443a0 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -54,6 +54,7 @@ import TooltipButton from '../elements/TooltipButton';
 import ReadReceiptMarker from "./ReadReceiptMarker";
 import MessageActionBar from "../messages/MessageActionBar";
 import ReactionsRow from '../messages/ReactionsRow';
+import { getEventDisplayInfo } from '../../../utils/EventUtils';
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -845,35 +846,9 @@ export default class EventTile extends React.Component {
     };
 
     render() {
-        //console.info("EventTile showUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
+        const msgtype = this.props.mxEvent.getContent().msgtype;
+        const { tileHandler, isBubbleMessage, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent);
 
-        const content = this.props.mxEvent.getContent();
-        const msgtype = content.msgtype;
-        const eventType = this.props.mxEvent.getType();
-
-        let tileHandler = getHandlerTile(this.props.mxEvent);
-
-        // Info messages are basically information about commands processed on a room
-        let isBubbleMessage = eventType.startsWith("m.key.verification") ||
-            (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) ||
-            (eventType === EventType.RoomCreate) ||
-            (eventType === EventType.RoomEncryption) ||
-            (tileHandler === "messages.MJitsiWidgetEvent");
-        let isInfoMessage = (
-            !isBubbleMessage && eventType !== EventType.RoomMessage &&
-            eventType !== EventType.Sticker && eventType !== EventType.RoomCreate
-        );
-
-        // If we're showing hidden events in the timeline, we should use the
-        // source tile when there's no regular tile for an event and also for
-        // replace relations (which otherwise would display as a confusing
-        // duplicate of the thing they are replacing).
-        if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(this.props.mxEvent)) {
-            tileHandler = "messages.ViewSourceEvent";
-            isBubbleMessage = false;
-            // Reuse info message avatar and sender profile styling
-            isInfoMessage = true;
-        }
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
         if (!tileHandler) {
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 19da345579..054a920d64 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -28,6 +28,7 @@ import MImageReplyBody from "../messages/MImageReplyBody";
 import * as sdk from '../../../index';
 import { EventType, MsgType, RelationType } from 'matrix-js-sdk/src/@types/event';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
+import { getEventDisplayInfo } from '../../../utils/EventUtils';
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -80,28 +81,9 @@ export default class ReplyTile extends React.PureComponent {
     };
 
     render() {
-        const content = this.props.mxEvent.getContent();
-        const msgtype = content.msgtype;
-        const eventType = this.props.mxEvent.getType();
+        const msgtype = this.props.mxEvent.getContent().msgtype;
 
-        // Info messages are basically information about commands processed on a room
-        let isInfoMessage = ![
-            EventType.RoomMessage,
-            EventType.Sticker,
-            EventType.RoomCreate,
-        ].includes(eventType as EventType);
-
-        let tileHandler = getHandlerTile(this.props.mxEvent);
-        // If we're showing hidden events in the timeline, we should use the
-        // source tile when there's no regular tile for an event and also for
-        // replace relations (which otherwise would display as a confusing
-        // duplicate of the thing they are replacing).
-        const useSource = !tileHandler || this.props.mxEvent.isRelation(RelationType.Replace);
-        if (useSource && SettingsStore.getValue("showHiddenEventsInTimeline")) {
-            tileHandler = "messages.ViewSourceEvent";
-            // Reuse info message avatar and sender profile styling
-            isInfoMessage = true;
-        }
+        const { tileHandler, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent);
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
         if (!tileHandler) {
diff --git a/src/utils/EventUtils.ts b/src/utils/EventUtils.ts
index 1a467b157f..d69c285e18 100644
--- a/src/utils/EventUtils.ts
+++ b/src/utils/EventUtils.ts
@@ -19,6 +19,9 @@ import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event';
 
 import { MatrixClientPeg } from '../MatrixClientPeg';
 import shouldHideEvent from "../shouldHideEvent";
+import { getHandlerTile, haveTileForEvent } from "../components/views/rooms/EventTile";
+import SettingsStore from "../settings/SettingsStore";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
 /**
  * Returns whether an event should allow actions like reply, reactions, edit, etc.
@@ -96,3 +99,38 @@ export function findEditableEvent(room: Room, isForward: boolean, fromEventId: s
     }
 }
 
+export function getEventDisplayInfo(mxEvent: MatrixEvent): {
+    isInfoMessage: boolean;
+    tileHandler;
+    isBubbleMessage: boolean;
+} {
+    const content = mxEvent.getContent();
+    const msgtype = content.msgtype;
+    const eventType = mxEvent.getType();
+
+    let tileHandler = getHandlerTile(mxEvent);
+
+    // Info messages are basically information about commands processed on a room
+    let isBubbleMessage = eventType.startsWith("m.key.verification") ||
+            (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) ||
+            (eventType === EventType.RoomCreate) ||
+            (eventType === EventType.RoomEncryption) ||
+            (tileHandler === "messages.MJitsiWidgetEvent");
+    let isInfoMessage = (
+        !isBubbleMessage && eventType !== EventType.RoomMessage &&
+            eventType !== EventType.Sticker && eventType !== EventType.RoomCreate
+    );
+
+    // If we're showing hidden events in the timeline, we should use the
+    // source tile when there's no regular tile for an event and also for
+    // replace relations (which otherwise would display as a confusing
+    // duplicate of the thing they are replacing).
+    if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(mxEvent)) {
+        tileHandler = "messages.ViewSourceEvent";
+        isBubbleMessage = false;
+        // Reuse info message avatar and sender profile styling
+        isInfoMessage = true;
+    }
+
+    return { tileHandler, isInfoMessage, isBubbleMessage };
+}

From 1ec4ead62d38e63851e55ff3bcb7f51c4e9cbe09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 13:04:59 +0200
Subject: [PATCH 092/179] Unused imports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/EventTile.tsx | 1 -
 src/components/views/rooms/ReplyTile.tsx | 4 +---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index b1e75443a0..553b7801cc 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -27,7 +27,6 @@ import { _t } from '../../../languageHandler';
 import { hasText } from "../../../TextForEvent";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
-import SettingsStore from "../../../settings/SettingsStore";
 import { Layout } from "../../../settings/Layout";
 import { formatTime } from "../../../DateUtils";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 054a920d64..c875553a96 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -18,15 +18,13 @@ import React from 'react';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
-import SettingsStore from "../../../settings/SettingsStore";
-import { getHandlerTile } from "./EventTile";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import SenderProfile from "../messages/SenderProfile";
 import TextualBody from "../messages/TextualBody";
 import MImageReplyBody from "../messages/MImageReplyBody";
 import * as sdk from '../../../index';
-import { EventType, MsgType, RelationType } from 'matrix-js-sdk/src/@types/event';
+import { EventType, MsgType } from 'matrix-js-sdk/src/@types/event';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
 import { getEventDisplayInfo } from '../../../utils/EventUtils';
 

From 8f831a89f62769e360546dbe5c56cd21a8e7d6c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 13:07:47 +0200
Subject: [PATCH 093/179] Remove unused code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ReplyThread.js | 31 --------------------
 1 file changed, 31 deletions(-)

diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index c22225f766..434900c8de 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -70,10 +70,7 @@ export default class ReplyThread extends React.Component {
         };
 
         this.unmounted = false;
-        this.context.on("Event.replaced", this.onEventReplaced);
         this.room = this.context.getRoom(this.props.parentEv.getRoomId());
-        this.room.on("Room.redaction", this.onRoomRedaction);
-        this.room.on("Room.redactionCancelled", this.onRoomRedaction);
 
         this.onQuoteClick = this.onQuoteClick.bind(this);
         this.canCollapse = this.canCollapse.bind(this);
@@ -239,36 +236,8 @@ export default class ReplyThread extends React.Component {
 
     componentWillUnmount() {
         this.unmounted = true;
-        this.context.removeListener("Event.replaced", this.onEventReplaced);
-        if (this.room) {
-            this.room.removeListener("Room.redaction", this.onRoomRedaction);
-            this.room.removeListener("Room.redactionCancelled", this.onRoomRedaction);
-        }
     }
 
-    updateForEventId = (eventId) => {
-        if (this.state.events.some(event => event.getId() === eventId)) {
-            this.forceUpdate();
-        }
-    };
-
-    onEventReplaced = (ev) => {
-        if (this.unmounted) return;
-
-        // If one of the events we are rendering gets replaced, force a re-render
-        this.updateForEventId(ev.getId());
-    };
-
-    onRoomRedaction = (ev) => {
-        if (this.unmounted) return;
-
-        const eventId = ev.getAssociatedId();
-        if (!eventId) return;
-
-        // If one of the events we are rendering gets redacted, force a re-render
-        this.updateForEventId(eventId);
-    };
-
     async initialize() {
         const { parentEv } = this.props;
         // at time of making this component we checked that props.parentEv has a parentEventId

From 1bca5371d1f6f92cff106e78861676390fa79801 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 13 Jul 2021 13:18:01 +0200
Subject: [PATCH 094/179] Fix redacted messages for the 100th #*&@*%^ time
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index 007ed35ecf..517ef79ef0 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -29,12 +29,13 @@ limitations under the License.
     color: $primary-fg-color;
 }
 
-.mx_ReplyTile > .mx_RedactedBody {
-    padding: 18px;
+.mx_ReplyTile .mx_RedactedBody {
+    padding: 4px 0 2px 20px;
 
     &::before {
         height: 13px;
         width: 13px;
+        top: 5px;
     }
 }
 

From 6c4f0526d7c2949ba4f39809dd51af03f5a0aae0 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Tue, 13 Jul 2021 23:26:09 -0400
Subject: [PATCH 095/179] Coalesce falsy values from TextForEvent handlers

Signed-off-by: Robin Townsend 
---
 src/TextForEvent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 3e3b5aa2e0..0056a37c85 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -705,5 +705,5 @@ export function textForEvent(ev: MatrixEvent): string;
 export function textForEvent(ev: MatrixEvent, allowJSX: true, showHiddenEvents?: boolean): string | JSX.Element;
 export function textForEvent(ev: MatrixEvent, allowJSX = false, showHiddenEvents?: boolean): string | JSX.Element {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
-    return handler?.(ev, allowJSX, showHiddenEvents)?.() ?? '';
+    return handler?.(ev, allowJSX, showHiddenEvents)?.() || '';
 }

From deab0407cb0d8f60ac6c5897d7b50db091207173 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Tue, 13 Jul 2021 23:27:49 -0400
Subject: [PATCH 096/179] Pull another settings lookup out of SearchResultTile
 loop

Signed-off-by: Robin Townsend 
---
 src/components/views/rooms/SearchResultTile.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/SearchResultTile.tsx b/src/components/views/rooms/SearchResultTile.tsx
index 47e9849214..c033855eb5 100644
--- a/src/components/views/rooms/SearchResultTile.tsx
+++ b/src/components/views/rooms/SearchResultTile.tsx
@@ -50,6 +50,7 @@ export default class SearchResultTile extends React.Component {
         const layout = SettingsStore.getValue("layout");
         const isTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
         const alwaysShowTimestamps = SettingsStore.getValue("alwaysShowTimestamps");
+        const enableFlair = SettingsStore.getValue(UIFeature.Flair);
 
         const timeline = result.context.getTimeline();
         for (let j = 0; j < timeline.length; j++) {
@@ -72,7 +73,7 @@ export default class SearchResultTile extends React.Component {
                         onHeightChanged={this.props.onHeightChanged}
                         isTwelveHour={isTwelveHour}
                         alwaysShowTimestamps={alwaysShowTimestamps}
-                        enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                        enableFlair={enableFlair}
                     />,
                 );
             }

From 9aae33e076443a9f9b38eff7426cb4cdfc59433b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 09:28:37 +0200
Subject: [PATCH 097/179] Use string[]
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/ReplyTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index c875553a96..cb2815ee6a 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -31,7 +31,7 @@ import { getEventDisplayInfo } from '../../../utils/EventUtils';
 interface IProps {
     mxEvent: MatrixEvent;
     permalinkCreator?: RoomPermalinkCreator;
-    highlights?: Array;
+    highlights?: string[];
     highlightLink?: string;
     onHeightChanged?(): void;
 }

From 74ff85ae305c03e96647620fbc01b8b91bf5a132 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 09:52:45 +0200
Subject: [PATCH 098/179] Remove m.sticker since it's not a message type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/ReplyTile.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index cb2815ee6a..41fc61aa7f 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -117,7 +117,6 @@ export default class ReplyTile extends React.PureComponent {
             [MsgType.Image]: MImageReplyBody,
             // We don't want a download link for files, just the file name is enough.
             [MsgType.File]: TextualBody,
-            "m.sticker": TextualBody,
             [MsgType.Audio]: TextualBody,
             [MsgType.Video]: TextualBody,
         };

From 58dedbeeffdaa090d0ee0deebbac929b7ab2f753 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 09:52:56 +0200
Subject: [PATCH 099/179] Add missing type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/utils/EventUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/EventUtils.ts b/src/utils/EventUtils.ts
index d69c285e18..849e546485 100644
--- a/src/utils/EventUtils.ts
+++ b/src/utils/EventUtils.ts
@@ -101,7 +101,7 @@ export function findEditableEvent(room: Room, isForward: boolean, fromEventId: s
 
 export function getEventDisplayInfo(mxEvent: MatrixEvent): {
     isInfoMessage: boolean;
-    tileHandler;
+    tileHandler: string;
     isBubbleMessage: boolean;
 } {
     const content = mxEvent.getContent();

From 7b35d2c27046c432dcdb9b768c1de40a1ca03c4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 09:53:40 +0200
Subject: [PATCH 100/179] FORCED_IMAGE_HEIGHT into a const
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/MImageReplyBody.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx
index b0f7415347..44acf18004 100644
--- a/src/components/views/messages/MImageReplyBody.tsx
+++ b/src/components/views/messages/MImageReplyBody.tsx
@@ -20,6 +20,8 @@ import { presentableTextForFile } from "./MFileBody";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
 import SenderProfile from "./SenderProfile";
 
+const FORCED_IMAGE_HEIGHT = 44;
+
 export default class MImageReplyBody extends MImageBody {
     public onClick = (ev: React.MouseEvent): void => {
         ev.preventDefault();
@@ -42,7 +44,7 @@ export default class MImageReplyBody extends MImageBody {
         const content = this.props.mxEvent.getContent();
 
         const contentUrl = this.getContentUrl();
-        const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content, 44);
+        const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content, FORCED_IMAGE_HEIGHT);
         const fileBody = this.getFileBody();
         const sender = 
Date: Wed, 14 Jul 2021 09:54:33 +0200
Subject: [PATCH 101/179] Omit onFinished
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/MImageBody.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 0acdbaf253..74d15dd9b5 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -115,12 +115,11 @@ export default class MImageBody extends React.Component {
 
             const content = this.props.mxEvent.getContent();
             const httpUrl = this.getContentUrl();
-            const params: ComponentProps = {
+            const params: Omit, "onFinished"> = {
                 src: httpUrl,
                 name: content.body?.length > 0 ? content.body : _t('Attachment'),
                 mxEvent: this.props.mxEvent,
                 permalinkCreator: this.props.permalinkCreator,
-                onFinished: () => {},
             };
 
             if (content.info) {

From 4afd985e7e63e03586b8e7d003690f9ef6653621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 09:55:14 +0200
Subject: [PATCH 102/179] Kill off _afterComponentWillUnmount
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/MImageBody.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 74d15dd9b5..96c8652aee 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -316,7 +316,6 @@ export default class MImageBody extends React.Component {
     componentWillUnmount() {
         this.unmounted = true;
         this.context.removeListener('sync', this.onClientSync);
-        this._afterComponentWillUnmount();
 
         if (this.state.decryptedUrl) {
             URL.revokeObjectURL(this.state.decryptedUrl);
@@ -326,11 +325,6 @@ export default class MImageBody extends React.Component {
         }
     }
 
-    // To be overridden by subclasses (e.g. MStickerBody) for further
-    // cleanup after componentWillUnmount
-    _afterComponentWillUnmount() {
-    }
-
     protected messageContent(
         contentUrl: string,
         thumbUrl: string,

From 18355599e88107f342dcef78dc6e5aa58704b4c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 10:07:41 +0200
Subject: [PATCH 103/179] Fix senderProfile getting cutoff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_MImageReplyBody.scss | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss
index f0401d21db..0b18308847 100644
--- a/res/css/views/messages/_MImageReplyBody.scss
+++ b/res/css/views/messages/_MImageReplyBody.scss
@@ -21,12 +21,17 @@ limitations under the License.
         flex: 1;
         padding-right: 4px;
     }
+
+    .mx_MImageReplyBody_info {
+        flex: 1;
+
+        .mx_MImageReplyBody_sender {
+            grid-area: sender;
+        }
+
+        .mx_MImageReplyBody_filename {
+            grid-area: filename;
+        }
+    }
 }
 
-.mx_MImageReplyBody_sender {
-    grid-area: sender;
-}
-
-.mx_MImageReplyBody_filename {
-    grid-area: filename;
-}

From 586e85cbff97da634fb7bf19491cffb2618487ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 10:14:44 +0200
Subject: [PATCH 104/179] Use MFileBody in replies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss      | 4 ++++
 src/components/views/rooms/ReplyTile.tsx | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index 517ef79ef0..552d54367e 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -20,6 +20,10 @@ limitations under the License.
     font-size: $font-14px;
     position: relative;
     line-height: $font-16px;
+
+    .mx_MFileBody_info {
+        margin: 5px 0;
+    }
 }
 
 .mx_ReplyTile > a {
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 41fc61aa7f..2911e538fc 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -27,6 +27,7 @@ import * as sdk from '../../../index';
 import { EventType, MsgType } from 'matrix-js-sdk/src/@types/event';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
 import { getEventDisplayInfo } from '../../../utils/EventUtils';
+import MFileBody from "../messages/MFileBody";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -116,7 +117,7 @@ export default class ReplyTile extends React.PureComponent {
         const msgtypeOverrides = {
             [MsgType.Image]: MImageReplyBody,
             // We don't want a download link for files, just the file name is enough.
-            [MsgType.File]: TextualBody,
+            [MsgType.File]: MFileBody,
             [MsgType.Audio]: TextualBody,
             [MsgType.Video]: TextualBody,
         };

From f26c75bdcc35f98c36ee4816ff72848f8c7ac9f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 10:23:10 +0200
Subject: [PATCH 105/179] Use margin instead of padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_MImageReplyBody.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss
index 0b18308847..70c53f8c9c 100644
--- a/res/css/views/messages/_MImageReplyBody.scss
+++ b/res/css/views/messages/_MImageReplyBody.scss
@@ -19,7 +19,7 @@ limitations under the License.
 
     .mx_MImageBody_thumbnail_container {
         flex: 1;
-        padding-right: 4px;
+        margin-right: 4px;
     }
 
     .mx_MImageReplyBody_info {

From ae4d8c291daf667a422dc6596d16ace2c3e5f927 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 10:23:24 +0200
Subject: [PATCH 106/179] It's not an override
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/ReplyTile.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 2911e538fc..a22fbc4494 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -27,7 +27,6 @@ import * as sdk from '../../../index';
 import { EventType, MsgType } from 'matrix-js-sdk/src/@types/event';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
 import { getEventDisplayInfo } from '../../../utils/EventUtils';
-import MFileBody from "../messages/MFileBody";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -117,7 +116,6 @@ export default class ReplyTile extends React.PureComponent {
         const msgtypeOverrides = {
             [MsgType.Image]: MImageReplyBody,
             // We don't want a download link for files, just the file name is enough.
-            [MsgType.File]: MFileBody,
             [MsgType.Audio]: TextualBody,
             [MsgType.Video]: TextualBody,
         };

From 04db6beb108fea542db2bb3f25afc93dfe8caed4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 10:30:24 +0200
Subject: [PATCH 107/179] Remove stale comment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/ReplyTile.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index a22fbc4494..8ac34afa28 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -115,7 +115,6 @@ export default class ReplyTile extends React.PureComponent {
 
         const msgtypeOverrides = {
             [MsgType.Image]: MImageReplyBody,
-            // We don't want a download link for files, just the file name is enough.
             [MsgType.Audio]: TextualBody,
             [MsgType.Video]: TextualBody,
         };

From 782563af5356281ef2a8264b32235554cec9a061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 10:47:29 +0200
Subject: [PATCH 108/179] Override audio and video body with file body
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss      | 10 ++++++++--
 src/components/views/rooms/ReplyTile.tsx |  6 ++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index 552d54367e..8fe3a3e94c 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -21,8 +21,14 @@ limitations under the License.
     position: relative;
     line-height: $font-16px;
 
-    .mx_MFileBody_info {
-        margin: 5px 0;
+    .mx_MFileBody {
+        .mx_MFileBody_info {
+            margin: 5px 0;
+        }
+
+        .mx_MFileBody_download {
+            display: none;
+        }
     }
 }
 
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 8ac34afa28..f2f75c4918 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -27,6 +27,7 @@ import * as sdk from '../../../index';
 import { EventType, MsgType } from 'matrix-js-sdk/src/@types/event';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
 import { getEventDisplayInfo } from '../../../utils/EventUtils';
+import MFileBody from "../messages/MFileBody";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -115,8 +116,9 @@ export default class ReplyTile extends React.PureComponent {
 
         const msgtypeOverrides = {
             [MsgType.Image]: MImageReplyBody,
-            [MsgType.Audio]: TextualBody,
-            [MsgType.Video]: TextualBody,
+            // Override audio and video body with file body. We also hide the download/decrypt button using CSS
+            [MsgType.Audio]: MFileBody,
+            [MsgType.Video]: MFileBody,
         };
         const evOverrides = {
             [EventType.Sticker]: TextualBody,

From 6c801fea53530f37b8d309e871869d81d46d3e2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 12:15:13 +0200
Subject: [PATCH 109/179] Use MImageReplyBody for stickers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/ReplyTile.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index f2f75c4918..49c904a940 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -80,7 +80,9 @@ export default class ReplyTile extends React.PureComponent {
     };
 
     render() {
-        const msgtype = this.props.mxEvent.getContent().msgtype;
+        const mxEvent = this.props.mxEvent;
+        const msgtype = mxEvent.getContent().msgtype;
+        const evType = mxEvent.getType() as EventType;
 
         const { tileHandler, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent);
         // This shouldn't happen: the caller should check we support this type
@@ -105,7 +107,12 @@ export default class ReplyTile extends React.PureComponent {
         }
 
         let sender;
-        const needsSenderProfile = msgtype !== MsgType.Image && tileHandler !== EventType.RoomCreate && !isInfoMessage;
+        const needsSenderProfile = (
+            !isInfoMessage &&
+            msgtype !== MsgType.Image &&
+            tileHandler !== EventType.RoomCreate &&
+            evType !== EventType.Sticker
+        );
 
         if (needsSenderProfile) {
             sender =  {
             [MsgType.Video]: MFileBody,
         };
         const evOverrides = {
-            [EventType.Sticker]: TextualBody,
+            // Use MImageReplyBody so that the sticker isn't taking up a lot of space
+            [EventType.Sticker]: MImageReplyBody,
         };
 
         return (

From 54d2784818e7c6908052997266a3613de97b575f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 14 Jul 2021 12:19:16 +0200
Subject: [PATCH 110/179] Remove unused import
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/ReplyTile.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 49c904a940..f44a75a264 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -21,7 +21,6 @@ import dis from '../../../dispatcher/dispatcher';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import SenderProfile from "../messages/SenderProfile";
-import TextualBody from "../messages/TextualBody";
 import MImageReplyBody from "../messages/MImageReplyBody";
 import * as sdk from '../../../index';
 import { EventType, MsgType } from 'matrix-js-sdk/src/@types/event';

From 8bf5e61acc72168a9f61a356806949c3af212ae8 Mon Sep 17 00:00:00 2001
From: James Salter 
Date: Wed, 14 Jul 2021 14:58:18 +0100
Subject: [PATCH 111/179] Add "Copy" to room context menu.

This menu item creates a matrix.to link for the room and copies it to the clipboard.
---
 src/components/structures/MatrixChat.tsx | 16 ++++++++++++++++
 src/components/views/rooms/RoomTile.tsx  | 16 ++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index d692b0fa7f..02558a3838 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -105,6 +105,8 @@ import VerificationRequestToast from '../views/toasts/VerificationRequestToast';
 import PerformanceMonitor, { PerformanceEntryNames } from "../../performance";
 import UIStore, { UI_EVENTS } from "../../stores/UIStore";
 import SoftLogout from './auth/SoftLogout';
+import { makeRoomPermalink } from "../../utils/permalinks/Permalinks";
+import { copyPlaintext } from "../../utils/strings";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -627,6 +629,9 @@ export default class MatrixChat extends React.PureComponent {
             case 'forget_room':
                 this.forgetRoom(payload.room_id);
                 break;
+            case 'copy_room':
+                this.copyRoom(payload.room_id);
+                break;
             case 'reject_invite':
                 Modal.createTrackedDialog('Reject invitation', '', QuestionDialog, {
                     title: _t('Reject invitation'),
@@ -1193,6 +1198,17 @@ export default class MatrixChat extends React.PureComponent {
         });
     }
 
+    private async copyRoom(roomId: string) {
+        const roomLink = makeRoomPermalink(roomId);
+        const success = await copyPlaintext(roomLink);
+        if (!success) {
+            Modal.createTrackedDialog("Unable to copy room", "", ErrorDialog, {
+                title: _t("Unable to copy room"),
+                description: _t("Unable to copy room"),
+            });
+        }
+    }
+
     /**
      * Starts a chat with the welcome user, if the user doesn't already have one
      * @returns {string} The room ID of the new room, or null if no room was created
diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index 9be0274dd5..8fb4d04791 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -358,6 +358,17 @@ export default class RoomTile extends React.PureComponent {
         this.setState({ generalMenuPosition: null }); // hide the menu
     };
 
+    private onCopyRoomClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        dis.dispatch({
+            action: 'copy_room',
+            room_id: this.props.room.roomId,
+        });
+        this.setState({ generalMenuPosition: null }); // hide the menu
+    };
+
     private onInviteClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -522,6 +533,11 @@ export default class RoomTile extends React.PureComponent {
                         label={_t("Settings")}
                         iconClassName="mx_RoomTile_iconSettings"
                     />
+                    
                 
                 
                     
Date: Wed, 14 Jul 2021 15:02:59 +0100
Subject: [PATCH 112/179] Add English i18n string

---
 src/i18n/strings/en_EN.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ced24e2547..ea52d779c3 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -3043,5 +3043,6 @@
     "Enter": "Enter",
     "Space": "Space",
     "End": "End",
-    "[number]": "[number]"
+    "[number]": "[number]",
+    "Unable to copy room": "Unable to copy room"
 }

From 2fe5ad5d4b5cf36d80ac26c1b323606d8ce808d4 Mon Sep 17 00:00:00 2001
From: James Salter 
Date: Wed, 14 Jul 2021 15:07:22 +0100
Subject: [PATCH 113/179] Slightly refine error message

---
 src/components/structures/MatrixChat.tsx | 2 +-
 src/i18n/strings/en_EN.json              | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 02558a3838..cadf66d11e 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -1204,7 +1204,7 @@ export default class MatrixChat extends React.PureComponent {
         if (!success) {
             Modal.createTrackedDialog("Unable to copy room", "", ErrorDialog, {
                 title: _t("Unable to copy room"),
-                description: _t("Unable to copy room"),
+                description: _t("Unable to copy the room to the clipboard."),
             });
         }
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ea52d779c3..03801a9899 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -3044,5 +3044,6 @@
     "Space": "Space",
     "End": "End",
     "[number]": "[number]",
-    "Unable to copy room": "Unable to copy room"
+    "Unable to copy room": "Unable to copy room",
+    "Unable to copy the room to the clipboard.": "Unable to copy the room to the clipboard."
 }

From e054af7f38d3f60eb7cd62acc0a31ccaa93f947c Mon Sep 17 00:00:00 2001
From: James Salter 
Date: Wed, 14 Jul 2021 15:35:57 +0100
Subject: [PATCH 114/179] Run yarn i18n

---
 src/i18n/strings/en_EN.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 03801a9899..d82d19fe3d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2671,6 +2671,8 @@
     "Are you sure you want to leave the space '%(spaceName)s'?": "Are you sure you want to leave the space '%(spaceName)s'?",
     "Are you sure you want to leave the room '%(roomName)s'?": "Are you sure you want to leave the room '%(roomName)s'?",
     "Failed to forget room %(errCode)s": "Failed to forget room %(errCode)s",
+    "Unable to copy room": "Unable to copy room",
+    "Unable to copy the room to the clipboard.": "Unable to copy the room to the clipboard.",
     "Signed Out": "Signed Out",
     "For security, this session has been signed out. Please sign in again.": "For security, this session has been signed out. Please sign in again.",
     "Terms and Conditions": "Terms and Conditions",
@@ -3043,7 +3045,5 @@
     "Enter": "Enter",
     "Space": "Space",
     "End": "End",
-    "[number]": "[number]",
-    "Unable to copy room": "Unable to copy room",
-    "Unable to copy the room to the clipboard.": "Unable to copy the room to the clipboard."
+    "[number]": "[number]"
 }

From d3823305ccb68e2639f6c0ee0e4e860ce42b3f5a Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Wed, 14 Jul 2021 16:21:02 +0100
Subject: [PATCH 115/179] Upgrade matrix-js-sdk to 12.1.0-rc.1

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 27c4f39a09..d7933e4c59 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "12.0.1",
+    "matrix-js-sdk": "12.1.0-rc.1",
     "matrix-widget-api": "^0.1.0-beta.15",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index 96c02681fd..432e25cf34 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5455,10 +5455,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.0.1:
-  version "12.0.1"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.0.1.tgz#3a63881f743420a4d39474daa39bd0fb90930d43"
-  integrity sha512-HkOWv8QHojceo3kPbC+vAIFUjsRAig6MBvEY35UygS3g2dL0UcJ5Qx09/2wcXtu6dowlDnWsz2HHk62tS2cklA==
+matrix-js-sdk@12.1.0-rc.1:
+  version "12.1.0-rc.1"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.1.0-rc.1.tgz#4bc4e2342525c622e1a87b264e6f55560632b90c"
+  integrity sha512-F7d1e1Bm8zZqXkTKIyNeT4uA85u65nfrW2b8NwDMV+gtKNF0DOzUfUzOGD7CnjJKpyKNTQluUiwka+bXiGAVkw==
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"

From 70c93a6fee88325d954a78fce9ecaf5815a6eb53 Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Wed, 14 Jul 2021 16:27:34 +0100
Subject: [PATCH 116/179] Prepare changelog for v3.26.0-rc.1

---
 CHANGELOG.md | 142 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 142 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22b35b7c59..392968c906 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,145 @@
+Changes in [3.26.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.26.0-rc.1) (2021-07-14)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.25.0...v3.26.0-rc.1)
+
+ * Fix voice messages in right panels
+   [\#6370](https://github.com/matrix-org/matrix-react-sdk/pull/6370)
+ * Use TileShape enum more universally
+   [\#6369](https://github.com/matrix-org/matrix-react-sdk/pull/6369)
+ * Translations update from Weblate
+   [\#6373](https://github.com/matrix-org/matrix-react-sdk/pull/6373)
+ * Hide world readable history option in encrypted rooms
+   [\#5947](https://github.com/matrix-org/matrix-react-sdk/pull/5947)
+ * Make the Image View buttons easier to hit
+   [\#6372](https://github.com/matrix-org/matrix-react-sdk/pull/6372)
+ * Reorder buttons in the Image View
+   [\#6368](https://github.com/matrix-org/matrix-react-sdk/pull/6368)
+ * Add VS Code to gitignore
+   [\#6367](https://github.com/matrix-org/matrix-react-sdk/pull/6367)
+ * Fix inviter exploding due to member being null
+   [\#6362](https://github.com/matrix-org/matrix-react-sdk/pull/6362)
+ * Increase sample count in voice message thumbnail
+   [\#6359](https://github.com/matrix-org/matrix-react-sdk/pull/6359)
+ * Improve arraySeed utility
+   [\#6360](https://github.com/matrix-org/matrix-react-sdk/pull/6360)
+ * Convert FontManager to TS and stub it out for tests
+   [\#6358](https://github.com/matrix-org/matrix-react-sdk/pull/6358)
+ * Adjust recording waveform behaviour for voice messages
+   [\#6357](https://github.com/matrix-org/matrix-react-sdk/pull/6357)
+ * Do not honor string power levels
+   [\#6245](https://github.com/matrix-org/matrix-react-sdk/pull/6245)
+ * Add alias and directory customisation points
+   [\#6343](https://github.com/matrix-org/matrix-react-sdk/pull/6343)
+ * Fix multiinviter user already in room and clean up code
+   [\#6354](https://github.com/matrix-org/matrix-react-sdk/pull/6354)
+ * Fix right panel not closing user info when changing rooms
+   [\#6341](https://github.com/matrix-org/matrix-react-sdk/pull/6341)
+ * Quit sticker picker on m.sticker
+   [\#5679](https://github.com/matrix-org/matrix-react-sdk/pull/5679)
+ * Don't autodetect language in inline code blocks
+   [\#6350](https://github.com/matrix-org/matrix-react-sdk/pull/6350)
+ * Make ghost button background transparent
+   [\#6331](https://github.com/matrix-org/matrix-react-sdk/pull/6331)
+ * only consider valid & loaded url previews for show N more prompt
+   [\#6346](https://github.com/matrix-org/matrix-react-sdk/pull/6346)
+ * Extract MXCs from _matrix/media/r0/ URLs for inline images in messages
+   [\#6335](https://github.com/matrix-org/matrix-react-sdk/pull/6335)
+ * Fix small visual regression with the site name on url previews
+   [\#6342](https://github.com/matrix-org/matrix-react-sdk/pull/6342)
+ * Make PIP CallView draggable/movable
+   [\#5952](https://github.com/matrix-org/matrix-react-sdk/pull/5952)
+ * Convert VoiceUserSettingsTab to TS
+   [\#6340](https://github.com/matrix-org/matrix-react-sdk/pull/6340)
+ * Simplify typescript definition for Modernizr
+   [\#6339](https://github.com/matrix-org/matrix-react-sdk/pull/6339)
+ * Remember the last used server for room directory searches
+   [\#6322](https://github.com/matrix-org/matrix-react-sdk/pull/6322)
+ * Focus composer after reacting
+   [\#6332](https://github.com/matrix-org/matrix-react-sdk/pull/6332)
+ * Fix bug which prevented more than one event getting pinned
+   [\#6336](https://github.com/matrix-org/matrix-react-sdk/pull/6336)
+ * Make DeviceListener also update on megolm key in SSSS
+   [\#6337](https://github.com/matrix-org/matrix-react-sdk/pull/6337)
+ * Improve URL previews
+   [\#6326](https://github.com/matrix-org/matrix-react-sdk/pull/6326)
+ * Don't close settings dialog when opening spaces feedback prompt
+   [\#6334](https://github.com/matrix-org/matrix-react-sdk/pull/6334)
+ * Update import location for types
+   [\#6330](https://github.com/matrix-org/matrix-react-sdk/pull/6330)
+ * Improve blurhash rendering performance
+   [\#6329](https://github.com/matrix-org/matrix-react-sdk/pull/6329)
+ * Use a proper color scheme for codeblocks
+   [\#6320](https://github.com/matrix-org/matrix-react-sdk/pull/6320)
+ * Burn `sdk.getComponent()` with 🔥
+   [\#6308](https://github.com/matrix-org/matrix-react-sdk/pull/6308)
+ * Fix instances of the Edit Message Composer's save button being wrongly
+   disabled
+   [\#6307](https://github.com/matrix-org/matrix-react-sdk/pull/6307)
+ * Do not generate a lockfile when running in CI
+   [\#6327](https://github.com/matrix-org/matrix-react-sdk/pull/6327)
+ * Update lockfile with correct dependencies
+   [\#6324](https://github.com/matrix-org/matrix-react-sdk/pull/6324)
+ * Clarify the keys we use when submitting rageshakes
+   [\#6321](https://github.com/matrix-org/matrix-react-sdk/pull/6321)
+ * Fix ImageView context menu
+   [\#6318](https://github.com/matrix-org/matrix-react-sdk/pull/6318)
+ * TypeScript migration
+   [\#6315](https://github.com/matrix-org/matrix-react-sdk/pull/6315)
+ * Move animation to compositor
+   [\#6310](https://github.com/matrix-org/matrix-react-sdk/pull/6310)
+ * Reorganize preferences
+   [\#5742](https://github.com/matrix-org/matrix-react-sdk/pull/5742)
+ * Fix being able to un-rotate images
+   [\#6313](https://github.com/matrix-org/matrix-react-sdk/pull/6313)
+ * Fix icon size in passphrase prompt
+   [\#6312](https://github.com/matrix-org/matrix-react-sdk/pull/6312)
+ * Use sleep & defer from js-sdk instead of duplicating it
+   [\#6305](https://github.com/matrix-org/matrix-react-sdk/pull/6305)
+ * Convert EventTimeline, EventTimelineSet and TimelineWindow to TS
+   [\#6295](https://github.com/matrix-org/matrix-react-sdk/pull/6295)
+ * Comply with new member-delimiter-style rule
+   [\#6306](https://github.com/matrix-org/matrix-react-sdk/pull/6306)
+ * Fix Test Linting
+   [\#6304](https://github.com/matrix-org/matrix-react-sdk/pull/6304)
+ * Convert Markdown to TypeScript
+   [\#6303](https://github.com/matrix-org/matrix-react-sdk/pull/6303)
+ * Convert RoomHeader to TS
+   [\#6302](https://github.com/matrix-org/matrix-react-sdk/pull/6302)
+ * Prevent RoomDirectory from exploding when filterString is wrongly nulled
+   [\#6296](https://github.com/matrix-org/matrix-react-sdk/pull/6296)
+ * Add support for blurhash (MSC2448)
+   [\#5099](https://github.com/matrix-org/matrix-react-sdk/pull/5099)
+ * Remove rateLimitedFunc
+   [\#6300](https://github.com/matrix-org/matrix-react-sdk/pull/6300)
+ * Convert some Key Verification classes to TypeScript
+   [\#6299](https://github.com/matrix-org/matrix-react-sdk/pull/6299)
+ * Typescript conversion of Composer components and more
+   [\#6292](https://github.com/matrix-org/matrix-react-sdk/pull/6292)
+ * Upgrade browserlist target versions
+   [\#6298](https://github.com/matrix-org/matrix-react-sdk/pull/6298)
+ * Fix browser crashing when searching for a malformed HTML tag
+   [\#6297](https://github.com/matrix-org/matrix-react-sdk/pull/6297)
+ * Add custom audio player
+   [\#6264](https://github.com/matrix-org/matrix-react-sdk/pull/6264)
+ * Lint MXC APIs to centralise access
+   [\#6293](https://github.com/matrix-org/matrix-react-sdk/pull/6293)
+ * Remove reminescent references to the tinter
+   [\#6290](https://github.com/matrix-org/matrix-react-sdk/pull/6290)
+ * More js-sdk type consolidation
+   [\#6263](https://github.com/matrix-org/matrix-react-sdk/pull/6263)
+ * Convert MessagePanel, TimelinePanel, ScrollPanel, and more to Typescript
+   [\#6243](https://github.com/matrix-org/matrix-react-sdk/pull/6243)
+ * Migrate to `eslint-plugin-matrix-org`
+   [\#6285](https://github.com/matrix-org/matrix-react-sdk/pull/6285)
+ * Avoid cyclic dependencies by moving watchers out of constructor
+   [\#6287](https://github.com/matrix-org/matrix-react-sdk/pull/6287)
+ * Add spacing between toast buttons with cross browser support in mind
+   [\#6284](https://github.com/matrix-org/matrix-react-sdk/pull/6284)
+ * Deprecate Tinter and TintableSVG
+   [\#6279](https://github.com/matrix-org/matrix-react-sdk/pull/6279)
+ * Migrate FilePanel to TypeScript
+   [\#6283](https://github.com/matrix-org/matrix-react-sdk/pull/6283)
+
 Changes in [3.25.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.25.0) (2021-07-05)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.25.0-rc.1...v3.25.0)

From 0fe91c07b854adfed9d927310fd79a0a0077c056 Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Wed, 14 Jul 2021 16:27:35 +0100
Subject: [PATCH 117/179] v3.26.0-rc.1

---
 package.json | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d7933e4c59..a47a337273 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.25.0",
+  "version": "3.26.0-rc.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -25,7 +25,7 @@
   "bin": {
     "reskindex": "scripts/reskindex.js"
   },
-  "main": "./src/index.js",
+  "main": "./lib/index.js",
   "matrix_src_main": "./src/index.js",
   "matrix_lib_main": "./lib/index.js",
   "matrix_lib_typings": "./lib/index.d.ts",
@@ -198,5 +198,6 @@
     "coverageReporters": [
       "text"
     ]
-  }
+  },
+  "typings": "./lib/index.d.ts"
 }

From 4d16cfc951fb1c427e843965f06f8a9b1f9a558c Mon Sep 17 00:00:00 2001
From: David Baker 
Date: Wed, 14 Jul 2021 16:41:01 +0100
Subject: [PATCH 118/179] Fix 'User' type import

---
 src/components/views/dialogs/VerificationRequestDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/VerificationRequestDialog.tsx b/src/components/views/dialogs/VerificationRequestDialog.tsx
index 4d3123c274..65b7f71dbd 100644
--- a/src/components/views/dialogs/VerificationRequestDialog.tsx
+++ b/src/components/views/dialogs/VerificationRequestDialog.tsx
@@ -21,7 +21,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import BaseDialog from "./BaseDialog";
 import EncryptionPanel from "../right_panel/EncryptionPanel";
-import { User } from 'matrix-js-sdk';
+import { User } from 'matrix-js-sdk/src/models/user';
 
 interface IProps {
     verificationRequest: VerificationRequest;

From f42382edbd8922a8d02549b767e1060a5b70e72e Mon Sep 17 00:00:00 2001
From: David Baker 
Date: Wed, 14 Jul 2021 23:29:54 +0100
Subject: [PATCH 119/179] Update PR template for new changelog stuff

---
 .github/PULL_REQUEST_TEMPLATE.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index fb237a5845..e9ede862d2 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,3 +1,15 @@
 
 
 
+
+

From 90d380c8aeb686963dfdef616b2bbf8222e74687 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 08:26:49 +0100
Subject: [PATCH 120/179] Cache value of feature_spaces* flags as they cause
 page refresh so are immutable

---
 src/Avatar.ts                                 |  4 +-
 src/autocomplete/Autocompleter.ts             |  5 +--
 src/autocomplete/RoomProvider.tsx             |  5 ++-
 src/components/structures/LoggedInView.tsx    |  3 +-
 src/components/structures/MatrixChat.tsx      |  8 ++--
 src/components/structures/RightPanel.tsx      |  3 +-
 src/components/structures/RoomView.tsx        |  9 ++---
 src/components/structures/SpaceRoomView.tsx   |  5 +--
 src/components/structures/UserMenu.tsx        |  4 +-
 .../views/dialogs/ForwardDialog.tsx           |  3 +-
 src/components/views/dialogs/InviteDialog.tsx |  3 +-
 src/components/views/right_panel/UserInfo.tsx | 17 ++++----
 src/components/views/rooms/MemberList.tsx     |  5 ++-
 src/components/views/rooms/RoomList.tsx       |  2 +-
 .../views/rooms/ThirdPartyMemberInfo.tsx      |  4 +-
 src/components/views/spaces/SpacePanel.tsx    |  5 +--
 src/stores/BreadcrumbsStore.ts                |  3 +-
 src/stores/SpaceStore.tsx                     | 39 ++++++++++++-------
 src/stores/room-list/RoomListStore.ts         | 11 +++---
 src/stores/room-list/SpaceWatcher.ts          |  5 +--
 src/stores/room-list/algorithms/Algorithm.ts  |  3 +-
 .../room-list/filters/VisibilityProvider.ts   |  4 +-
 22 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/src/Avatar.ts b/src/Avatar.ts
index 4c4bd1c265..198d4162a0 100644
--- a/src/Avatar.ts
+++ b/src/Avatar.ts
@@ -21,7 +21,7 @@ import { ResizeMethod } from "matrix-js-sdk/src/@types/partials";
 
 import DMRoomMap from './utils/DMRoomMap';
 import { mediaFromMxc } from "./customisations/Media";
-import SettingsStore from "./settings/SettingsStore";
+import SpaceStore from "./stores/SpaceStore";
 
 // Not to be used for BaseAvatar urls as that has similar default avatar fallback already
 export function avatarUrlForMember(
@@ -153,7 +153,7 @@ export function avatarUrlForRoom(room: Room, width: number, height: number, resi
     }
 
     // space rooms cannot be DMs so skip the rest
-    if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) return null;
+    if (SpaceStore.spacesEnabled && room.isSpaceRoom()) return null;
 
     let otherMember = null;
     const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
diff --git a/src/autocomplete/Autocompleter.ts b/src/autocomplete/Autocompleter.ts
index 7ab2ae70ea..acc7846510 100644
--- a/src/autocomplete/Autocompleter.ts
+++ b/src/autocomplete/Autocompleter.ts
@@ -27,8 +27,8 @@ import EmojiProvider from './EmojiProvider';
 import NotifProvider from './NotifProvider';
 import { timeout } from "../utils/promise";
 import AutocompleteProvider, { ICommand } from "./AutocompleteProvider";
-import SettingsStore from "../settings/SettingsStore";
 import SpaceProvider from "./SpaceProvider";
+import SpaceStore from "../stores/SpaceStore";
 
 export interface ISelectionRange {
     beginning?: boolean; // whether the selection is in the first block of the editor or not
@@ -58,8 +58,7 @@ const PROVIDERS = [
     DuckDuckGoProvider,
 ];
 
-// as the spaces feature is device configurable only, and toggling it refreshes the page, we can do this here
-if (SettingsStore.getValue("feature_spaces")) {
+if (SpaceStore.spacesEnabled) {
     PROVIDERS.push(SpaceProvider);
 } else {
     PROVIDERS.push(CommunityProvider);
diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx
index 7865a76daa..37ddf2c387 100644
--- a/src/autocomplete/RoomProvider.tsx
+++ b/src/autocomplete/RoomProvider.tsx
@@ -28,7 +28,7 @@ import { PillCompletion } from './Components';
 import { makeRoomPermalink } from "../utils/permalinks/Permalinks";
 import { ICompletion, ISelectionRange } from "./Autocompleter";
 import RoomAvatar from '../components/views/avatars/RoomAvatar';
-import SettingsStore from "../settings/SettingsStore";
+import SpaceStore from "../stores/SpaceStore";
 
 const ROOM_REGEX = /\B#\S*/g;
 
@@ -59,7 +59,8 @@ export default class RoomProvider extends AutocompleteProvider {
         const cli = MatrixClientPeg.get();
         let rooms = cli.getVisibleRooms();
 
-        if (SettingsStore.getValue("feature_spaces")) {
+        // if spaces are enabled then filter them out here as they get their own autocomplete provider
+        if (SpaceStore.spacesEnabled) {
             rooms = rooms.filter(r => !r.isSpaceRoom());
         }
 
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 89fa8db376..6c086ed17c 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -63,6 +63,7 @@ import ToastContainer from './ToastContainer';
 import MyGroups from "./MyGroups";
 import UserView from "./UserView";
 import GroupView from "./GroupView";
+import SpaceStore from "../../stores/SpaceStore";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -631,7 +632,7 @@ class LoggedInView extends React.Component {
                 >
                     
                     
    
-                        { SettingsStore.getValue("feature_spaces") ?  : null }
+                        { SpaceStore.spacesEnabled ?  : null }
                          {
 
     private leaveRoomWarnings(roomId: string) {
         const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
-        const isSpace = SettingsStore.getValue("feature_spaces") && roomToLeave?.isSpaceRoom();
+        const isSpace = SpaceStore.spacesEnabled && roomToLeave?.isSpaceRoom();
         // Show a warning if there are additional complications.
         const warnings = [];
 
@@ -1137,7 +1137,7 @@ export default class MatrixChat extends React.PureComponent {
         const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
         const warnings = this.leaveRoomWarnings(roomId);
 
-        const isSpace = SettingsStore.getValue("feature_spaces") && roomToLeave?.isSpaceRoom();
+        const isSpace = SpaceStore.spacesEnabled && roomToLeave?.isSpaceRoom();
         Modal.createTrackedDialog(isSpace ? "Leave space" : "Leave room", '', QuestionDialog, {
             title: isSpace ? _t("Leave space") : _t("Leave room"),
             description: (
@@ -1687,7 +1687,7 @@ export default class MatrixChat extends React.PureComponent {
             const type = screen === "start_sso" ? "sso" : "cas";
             PlatformPeg.get().startSingleSignOn(cli, type, this.getFragmentAfterLogin());
         } else if (screen === 'groups') {
-            if (SettingsStore.getValue("feature_spaces")) {
+            if (SpaceStore.spacesEnabled) {
                 dis.dispatch({ action: "view_home_page" });
                 return;
             }
@@ -1774,7 +1774,7 @@ export default class MatrixChat extends React.PureComponent {
                 subAction: params.action,
             });
         } else if (screen.indexOf('group/') === 0) {
-            if (SettingsStore.getValue("feature_spaces")) {
+            if (SpaceStore.spacesEnabled) {
                 dis.dispatch({ action: "view_home_page" });
                 return;
             }
diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx
index 63027ab627..2a3448b017 100644
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@@ -48,6 +48,7 @@ import NotificationPanel from "./NotificationPanel";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
 import { throttle } from 'lodash';
+import SpaceStore from "../../stores/SpaceStore";
 
 interface IProps {
     room?: Room; // if showing panels for a given room, this is set
@@ -107,7 +108,7 @@ export default class RightPanel extends React.Component {
                 return RightPanelPhases.GroupMemberList;
             }
             return rps.groupPanelPhase;
-        } else if (SettingsStore.getValue("feature_spaces") && this.props.room?.isSpaceRoom()
+        } else if (SpaceStore.spacesEnabled && this.props.room?.isSpaceRoom()
             && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase)
         ) {
             return RightPanelPhases.SpaceMemberList;
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 2c118149a0..a8f9e7ccb6 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -89,6 +89,7 @@ import RoomStatusBar from "./RoomStatusBar";
 import MessageComposer from '../views/rooms/MessageComposer';
 import JumpToBottomButton from "../views/rooms/JumpToBottomButton";
 import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar";
+import SpaceStore from "../../stores/SpaceStore";
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -1748,10 +1749,8 @@ export default class RoomView extends React.Component {
         }
 
         const myMembership = this.state.room.getMyMembership();
-        if (myMembership === "invite"
-            // SpaceRoomView handles invites itself
-            && (!SettingsStore.getValue("feature_spaces") || !this.state.room.isSpaceRoom())
-        ) {
+        // SpaceRoomView handles invites itself
+        if (myMembership === "invite" && (!SpaceStore.spacesEnabled || !this.state.room.isSpaceRoom())) {
             if (this.state.joining || this.state.rejecting) {
                 return (
                     
@@ -1882,7 +1881,7 @@ export default class RoomView extends React.Component {
                     room={this.state.room}
                 />
             );
-            if (!this.state.canPeek && (!SettingsStore.getValue("feature_spaces") || !this.state.room?.isSpaceRoom())) {
+            if (!this.state.canPeek && (!SpaceStore.spacesEnabled || !this.state.room?.isSpaceRoom())) {
                 return (
                     
    
                         { previewBar }
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index 24b460284f..0ee68a9578 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -62,7 +62,6 @@ import IconizedContextMenu, {
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { BetaPill } from "../views/beta/BetaCard";
 import { UserTab } from "../views/dialogs/UserSettingsDialog";
-import SettingsStore from "../../settings/SettingsStore";
 import Modal from "../../Modal";
 import BetaFeedbackDialog from "../views/dialogs/BetaFeedbackDialog";
 import SdkConfig from "../../SdkConfig";
@@ -178,7 +177,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
 
     const [busy, setBusy] = useState(false);
 
-    const spacesEnabled = SettingsStore.getValue("feature_spaces");
+    const spacesEnabled = SpaceStore.spacesEnabled;
 
     const cannotJoin = getEffectiveMembership(myMembership) === EffectiveMembership.Leave
         && space.getJoinRule() !== JoinRule.Public;
@@ -854,7 +853,7 @@ export default class SpaceRoomView extends React.PureComponent {
     private renderBody() {
         switch (this.state.phase) {
             case Phase.Landing:
-                if (this.state.myMembership === "join" && SettingsStore.getValue("feature_spaces")) {
+                if (this.state.myMembership === "join" && SpaceStore.spacesEnabled) {
                     return ;
                 } else {
                     return  {
         };
 
         OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
-        if (SettingsStore.getValue("feature_spaces")) {
+        if (SpaceStore.spacesEnabled) {
             SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
         }
 
@@ -115,7 +115,7 @@ export default class UserMenu extends React.Component {
         if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
         this.tagStoreRef.remove();
-        if (SettingsStore.getValue("feature_spaces")) {
+        if (SpaceStore.spacesEnabled) {
             SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
         }
         MatrixClientPeg.get().removeListener("Room", this.onRoom);
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index ba06436ae2..839ca6da2f 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -43,6 +43,7 @@ import QueryMatcher from "../../../autocomplete/QueryMatcher";
 import TruncatedList from "../elements/TruncatedList";
 import EntityTile from "../rooms/EntityTile";
 import BaseAvatar from "../avatars/BaseAvatar";
+import SpaceStore from "../../../stores/SpaceStore";
 
 const AVATAR_SIZE = 30;
 
@@ -180,7 +181,7 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr
     const [query, setQuery] = useState("");
     const lcQuery = query.toLowerCase();
 
-    const spacesEnabled = useFeatureEnabled("feature_spaces");
+    const spacesEnabled = SpaceStore.spacesEnabled;
     const flairEnabled = useFeatureEnabled(UIFeature.Flair);
     const previewLayout = useSettingValue("layout");
 
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index c9475d4849..2aa14449df 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -67,6 +67,7 @@ import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
 import QuestionDialog from "./QuestionDialog";
 import Spinner from "../elements/Spinner";
 import BaseDialog from "./BaseDialog";
+import SpaceStore from "../../../stores/SpaceStore";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -1364,7 +1365,7 @@ export default class InviteDialog extends React.PureComponent;
         } else if (this.props.kind === KIND_INVITE) {
             const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
-            const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom();
+            const isSpace = SpaceStore.spacesEnabled && room?.isSpaceRoom();
             title = isSpace
                 ? _t("Invite to %(spaceName)s", {
                     spaceName: room.name || _t("Unnamed Space"),
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index e9d80d49c5..fc3814136d 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -69,6 +69,7 @@ import RoomName from "../elements/RoomName";
 import { mediaFromMxc } from "../../../customisations/Media";
 import UIStore from "../../../stores/UIStore";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
+import SpaceStore from "../../../stores/SpaceStore";
 
 export interface IDevice {
     deviceId: string;
@@ -728,7 +729,7 @@ const MuteToggleButton: React.FC = ({ member, room, powerLevels,
         // if muting self, warn as it may be irreversible
         if (target === cli.getUserId()) {
             try {
-                if (!(await warnSelfDemote(SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()))) return;
+                if (!(await warnSelfDemote(SpaceStore.spacesEnabled && room?.isSpaceRoom()))) return;
             } catch (e) {
                 console.error("Failed to warn about self demotion: ", e);
                 return;
@@ -817,7 +818,7 @@ const RoomAdminToolsContainer: React.FC = ({
     if (canAffectUser && me.powerLevel >= kickPowerLevel) {
         kickButton = ;
     }
-    if (me.powerLevel >= redactPowerLevel && (!SettingsStore.getValue("feature_spaces") || !room.isSpaceRoom())) {
+    if (me.powerLevel >= redactPowerLevel && (!SpaceStore.spacesEnabled || !room.isSpaceRoom())) {
         redactButton = (
             
         );
@@ -1096,7 +1097,7 @@ const PowerLevelEditor: React.FC<{
         } else if (myUserId === target) {
             // If we are changing our own PL it can only ever be decreasing, which we cannot reverse.
             try {
-                if (!(await warnSelfDemote(SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()))) return;
+                if (!(await warnSelfDemote(SpaceStore.spacesEnabled && room?.isSpaceRoom()))) return;
             } catch (e) {
                 console.error("Failed to warn about self demotion: ", e);
             }
@@ -1326,10 +1327,10 @@ const BasicUserInfo: React.FC<{
     if (!isRoomEncrypted) {
         if (!cryptoEnabled) {
             text = _t("This client does not support end-to-end encryption.");
-        } else if (room && (!SettingsStore.getValue("feature_spaces") || !room.isSpaceRoom())) {
+        } else if (room && (!SpaceStore.spacesEnabled || !room.isSpaceRoom())) {
             text = _t("Messages in this room are not end-to-end encrypted.");
         }
-    } else if (!SettingsStore.getValue("feature_spaces") || !room.isSpaceRoom()) {
+    } else if (!SpaceStore.spacesEnabled || !room.isSpaceRoom()) {
         text = _t("Messages in this room are end-to-end encrypted.");
     }
 
@@ -1405,7 +1406,7 @@ const BasicUserInfo: React.FC<{
             canInvite={roomPermissions.canInvite}
             isIgnored={isIgnored}
             member={member as RoomMember}
-            isSpace={SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()}
+            isSpace={SpaceStore.spacesEnabled && room?.isSpaceRoom()}
         />
 
         { adminToolsContainer }
@@ -1568,7 +1569,7 @@ const UserInfo: React.FC = ({
         previousPhase = RightPanelPhases.RoomMemberInfo;
         refireParams = { member: member };
     } else if (room) {
-        previousPhase = previousPhase = SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()
+        previousPhase = previousPhase = SpaceStore.spacesEnabled && room.isSpaceRoom()
             ? RightPanelPhases.SpaceMemberList
             : RightPanelPhases.RoomMemberList;
     }
@@ -1617,7 +1618,7 @@ const UserInfo: React.FC = ({
     }
 
     let scopeHeader;
-    if (SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()) {
+    if (SpaceStore.spacesEnabled && room?.isSpaceRoom()) {
         scopeHeader = 
    
             
             
diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index f4df70c7ee..71e54404c0 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -43,6 +43,7 @@ import EntityTile from "./EntityTile";
 import MemberTile from "./MemberTile";
 import BaseAvatar from '../avatars/BaseAvatar';
 import { throttle } from 'lodash';
+import SpaceStore from "../../../stores/SpaceStore";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -509,7 +510,7 @@ export default class MemberList extends React.Component {
             const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat();
             if (chat && chat.roomId === this.props.roomId) {
                 inviteButtonText = _t("Invite to this community");
-            } else if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) {
+            } else if (SpaceStore.spacesEnabled && room.isSpaceRoom()) {
                 inviteButtonText = _t("Invite to this space");
             }
 
@@ -549,7 +550,7 @@ export default class MemberList extends React.Component {
         let previousPhase = RightPanelPhases.RoomSummary;
         // We have no previousPhase for when viewing a MemberList from a Space
         let scopeHeader;
-        if (SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()) {
+        if (SpaceStore.spacesEnabled && room?.isSpaceRoom()) {
             previousPhase = undefined;
             scopeHeader = 
    
                 
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index c94256800d..7ece6add9c 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -417,7 +417,7 @@ export default class RoomList extends React.PureComponent {
     }
 
     private renderCommunityInvites(): ReactComponentElement[] {
-        if (SettingsStore.getValue("feature_spaces")) return [];
+        if (SpaceStore.spacesEnabled) return [];
         // TODO: Put community invites in a more sensible place (not in the room list)
         // See https://github.com/vector-im/element-web/issues/14456
         return MatrixClientPeg.get().getGroups().filter(g => {
diff --git a/src/components/views/rooms/ThirdPartyMemberInfo.tsx b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
index 2bcc3ead57..51bb891c62 100644
--- a/src/components/views/rooms/ThirdPartyMemberInfo.tsx
+++ b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
@@ -25,9 +25,9 @@ import { isValid3pidInvite } from "../../../RoomInvite";
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import SettingsStore from "../../../settings/SettingsStore";
 import ErrorDialog from '../dialogs/ErrorDialog';
 import AccessibleButton from '../elements/AccessibleButton';
+import SpaceStore from "../../../stores/SpaceStore";
 
 interface IProps {
     event: MatrixEvent;
@@ -134,7 +134,7 @@ export default class ThirdPartyMemberInfo extends React.Component
                 
                 
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 5b3cf31cad..9cefbbd94c 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -42,7 +42,6 @@ import {
 import { Key } from "../../../Keyboard";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
-import SettingsStore from "../../../settings/SettingsStore";
 
 interface IButtonProps {
     space?: Room;
@@ -134,7 +133,7 @@ const InnerSpacePanel = React.memo(({ children, isPanelCo
     const [invites, spaces, activeSpace] = useSpaces();
     const activeSpaces = activeSpace ? [activeSpace] : [];
 
-    const homeNotificationState = SettingsStore.getValue("feature_spaces.all_rooms")
+    const homeNotificationState = SpaceStore.spacesTweakAllRoomsEnabled
         ? RoomNotificationStateStore.instance.globalState : SpaceStore.instance.getNotificationState(HOME_SPACE);
 
     return 
    
@@ -142,7 +141,7 @@ const InnerSpacePanel = React.memo(({ children, isPanelCo
             className="mx_SpaceButton_home"
             onClick={() => SpaceStore.instance.setActiveSpace(null)}
             selected={!activeSpace}
-            tooltip={SettingsStore.getValue("feature_spaces.all_rooms") ? _t("All rooms") : _t("Home")}
+            tooltip={SpaceStore.spacesTweakAllRoomsEnabled ? _t("All rooms") : _t("Home")}
             notificationState={homeNotificationState}
             isNarrow={isPanelCollapsed}
         />
diff --git a/src/stores/BreadcrumbsStore.ts b/src/stores/BreadcrumbsStore.ts
index a3b07435c6..aceaf8b898 100644
--- a/src/stores/BreadcrumbsStore.ts
+++ b/src/stores/BreadcrumbsStore.ts
@@ -22,6 +22,7 @@ import defaultDispatcher from "../dispatcher/dispatcher";
 import { arrayHasDiff } from "../utils/arrays";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import { SettingLevel } from "../settings/SettingLevel";
+import SpaceStore from "./SpaceStore";
 
 const MAX_ROOMS = 20; // arbitrary
 const AUTOJOIN_WAIT_THRESHOLD_MS = 90000; // 90s, the time we wait for an autojoined room to show up
@@ -122,7 +123,7 @@ export class BreadcrumbsStore extends AsyncStoreWithClient {
     }
 
     private async appendRoom(room: Room) {
-        if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) return; // hide space rooms
+        if (SpaceStore.spacesEnabled && room.isSpaceRoom()) return; // hide space rooms
         let updated = false;
         const rooms = (this.state.rooms || []).slice(); // cheap clone
 
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 99705a7aba..1a6b5109ec 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -59,7 +59,13 @@ export interface ISuggestedRoom extends ISpaceSummaryRoom {
 
 const MAX_SUGGESTED_ROOMS = 20;
 
-const homeSpaceKey = SettingsStore.getValue("feature_spaces.all_rooms") ? "ALL_ROOMS" : "HOME_SPACE";
+// All of these settings cause the page to reload and can be costly if read frequently, so read them here only
+const spacesEnabled = SettingsStore.getValue("feature_spaces");
+const spacesTweakAllRoomsEnabled = SettingsStore.getValue("feature_spaces.all_rooms");
+const spacesTweakSpaceMemberDMsEnabled = SettingsStore.getValue("feature_spaces.space_member_dms");
+const spacesTweakSpaceDMBadgesEnabled = SettingsStore.getValue("feature_spaces.space_dm_badges");
+
+const homeSpaceKey = spacesTweakAllRoomsEnabled ? "ALL_ROOMS" : "HOME_SPACE";
 const getSpaceContextKey = (space?: Room) => `mx_space_context_${space?.roomId || homeSpaceKey}`;
 
 const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces, rooms]
@@ -260,7 +266,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
     }
 
     public getSpaceFilteredRoomIds = (space: Room | null): Set => {
-        if (!space && SettingsStore.getValue("feature_spaces.all_rooms")) {
+        if (!space && spacesTweakAllRoomsEnabled) {
             return new Set(this.matrixClient.getVisibleRooms().map(r => r.roomId));
         }
         return this.spaceFilteredRooms.get(space?.roomId || HOME_SPACE) || new Set();
@@ -357,7 +363,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
     };
 
     private showInHomeSpace = (room: Room) => {
-        if (SettingsStore.getValue("feature_spaces.all_rooms")) return true;
+        if (spacesTweakAllRoomsEnabled) return true;
         if (room.isSpaceRoom()) return false;
         return !this.parentMap.get(room.roomId)?.size // put all orphaned rooms in the Home Space
             || DMRoomMap.shared().getUserIdForRoomId(room.roomId) // put all DMs in the Home Space
@@ -389,7 +395,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         const oldFilteredRooms = this.spaceFilteredRooms;
         this.spaceFilteredRooms = new Map();
 
-        if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+        if (!spacesTweakAllRoomsEnabled) {
             // put all room invites in the Home Space
             const invites = visibleRooms.filter(r => !r.isSpaceRoom() && r.getMyMembership() === "invite");
             this.spaceFilteredRooms.set(HOME_SPACE, new Set(invites.map(room => room.roomId)));
@@ -416,7 +422,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
                 const roomIds = new Set(childRooms.map(r => r.roomId));
                 const space = this.matrixClient?.getRoom(spaceId);
 
-                if (SettingsStore.getValue("feature_spaces.space_member_dms")) {
+                if (spacesTweakSpaceMemberDMsEnabled) {
                     // Add relevant DMs
                     space?.getMembers().forEach(member => {
                         if (member.membership !== "join" && member.membership !== "invite") return;
@@ -450,7 +456,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
             // Update NotificationStates
             this.getNotificationState(s)?.setRooms(visibleRooms.filter(room => {
                 if (roomIds.has(room.roomId)) {
-                    if (s !== HOME_SPACE && SettingsStore.getValue("feature_spaces.space_dm_badges")) return true;
+                    if (s !== HOME_SPACE && spacesTweakSpaceDMBadgesEnabled) return true;
 
                     return !DMRoomMap.shared().getUserIdForRoomId(room.roomId)
                         || RoomListStore.instance.getTagsForRoom(room).includes(DefaultTagID.Favourite);
@@ -549,7 +555,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
                 // TODO confirm this after implementing parenting behaviour
                 if (room.isSpaceRoom()) {
                     this.onSpaceUpdate();
-                } else if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+                } else if (!spacesTweakAllRoomsEnabled) {
                     this.onRoomUpdate(room);
                 }
                 this.emit(room.roomId);
@@ -573,7 +579,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
             if (order !== lastOrder) {
                 this.notifyIfOrderChanged();
             }
-        } else if (ev.getType() === EventType.Tag && !SettingsStore.getValue("feature_spaces.all_rooms")) {
+        } else if (ev.getType() === EventType.Tag && !spacesTweakAllRoomsEnabled) {
             // If the room was in favourites and now isn't or the opposite then update its position in the trees
             const oldTags = lastEv?.getContent()?.tags || {};
             const newTags = ev.getContent()?.tags || {};
@@ -613,13 +619,13 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
     }
 
     protected async onNotReady() {
-        if (!SettingsStore.getValue("feature_spaces")) return;
+        if (!SpaceStore.spacesEnabled) return;
         if (this.matrixClient) {
             this.matrixClient.removeListener("Room", this.onRoom);
             this.matrixClient.removeListener("Room.myMembership", this.onRoom);
             this.matrixClient.removeListener("Room.accountData", this.onRoomAccountData);
             this.matrixClient.removeListener("RoomState.events", this.onRoomState);
-            if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+            if (!spacesTweakAllRoomsEnabled) {
                 this.matrixClient.removeListener("accountData", this.onAccountData);
             }
         }
@@ -627,12 +633,12 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
     }
 
     protected async onReady() {
-        if (!SettingsStore.getValue("feature_spaces")) return;
+        if (!spacesEnabled) return;
         this.matrixClient.on("Room", this.onRoom);
         this.matrixClient.on("Room.myMembership", this.onRoom);
         this.matrixClient.on("Room.accountData", this.onRoomAccountData);
         this.matrixClient.on("RoomState.events", this.onRoomState);
-        if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+        if (!spacesTweakAllRoomsEnabled) {
             this.matrixClient.on("accountData", this.onAccountData);
         }
 
@@ -646,7 +652,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
     }
 
     protected async onAction(payload: ActionPayload) {
-        if (!SettingsStore.getValue("feature_spaces")) return;
+        if (!spacesEnabled) return;
         switch (payload.action) {
             case "view_room": {
                 // Don't auto-switch rooms when reacting to a context-switch
@@ -660,7 +666,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
                     // as it will cause you to end up in the wrong room
                     this.setActiveSpace(room, false);
                 } else if (
-                    (!SettingsStore.getValue("feature_spaces.all_rooms") || this.activeSpace) &&
+                    (!spacesTweakAllRoomsEnabled || this.activeSpace) &&
                     !this.getSpaceFilteredRoomIds(this.activeSpace).has(roomId)
                 ) {
                     this.switchToRelatedSpace(roomId);
@@ -752,6 +758,11 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
 }
 
 export default class SpaceStore {
+    public static spacesEnabled = spacesEnabled;
+    public static spacesTweakAllRoomsEnabled = spacesTweakAllRoomsEnabled;
+    public static spacesTweakSpaceMemberDMsEnabled = spacesTweakSpaceMemberDMsEnabled;
+    public static spacesTweakSpaceDMBadgesEnabled = spacesTweakSpaceDMBadgesEnabled;
+
     private static internalInstance = new SpaceStoreClass();
 
     public static get instance(): SpaceStoreClass {
diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index e26c80bb2d..a87e45acb7 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -35,6 +35,7 @@ import { NameFilterCondition } from "./filters/NameFilterCondition";
 import { RoomNotificationStateStore } from "../notifications/RoomNotificationStateStore";
 import { VisibilityProvider } from "./filters/VisibilityProvider";
 import { SpaceWatcher } from "./SpaceWatcher";
+import SpaceStore from "../SpaceStore";
 
 interface IState {
     tagsEnabled?: boolean;
@@ -76,7 +77,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
     }
 
     private setupWatchers() {
-        if (SettingsStore.getValue("feature_spaces")) {
+        if (SpaceStore.spacesEnabled) {
             this.spaceWatcher = new SpaceWatcher(this);
         } else {
             this.tagWatcher = new TagWatcher(this);
@@ -608,9 +609,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
 
         // if spaces are enabled only consider the prefilter conditions when there are no runtime conditions
         // for the search all spaces feature
-        if (this.prefilterConditions.length > 0
-            && (!SettingsStore.getValue("feature_spaces") || !this.filterConditions.length)
-        ) {
+        if (this.prefilterConditions.length > 0 && (!SpaceStore.spacesEnabled || !this.filterConditions.length)) {
             rooms = rooms.filter(r => {
                 for (const filter of this.prefilterConditions) {
                     if (!filter.isVisible(r)) {
@@ -682,7 +681,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
         } else {
             this.filterConditions.push(filter);
             // Runtime filters with spaces disable prefiltering for the search all spaces feature
-            if (SettingsStore.getValue("feature_spaces")) {
+            if (SpaceStore.spacesEnabled) {
                 // this has to be awaited so that `setKnownRooms` is called in time for the `addFilterCondition` below
                 // this way the runtime filters are only evaluated on one dataset and not both.
                 await this.recalculatePrefiltering();
@@ -715,7 +714,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
                 this.algorithm.removeFilterCondition(filter);
             }
             // Runtime filters with spaces disable prefiltering for the search all spaces feature
-            if (SettingsStore.getValue("feature_spaces")) {
+            if (SpaceStore.spacesEnabled) {
                 promise = this.recalculatePrefiltering();
             }
         }
diff --git a/src/stores/room-list/SpaceWatcher.ts b/src/stores/room-list/SpaceWatcher.ts
index a1f7786578..1cec612e6f 100644
--- a/src/stores/room-list/SpaceWatcher.ts
+++ b/src/stores/room-list/SpaceWatcher.ts
@@ -19,7 +19,6 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomListStoreClass } from "./RoomListStore";
 import { SpaceFilterCondition } from "./filters/SpaceFilterCondition";
 import SpaceStore, { UPDATE_SELECTED_SPACE } from "../SpaceStore";
-import SettingsStore from "../../settings/SettingsStore";
 
 /**
  * Watches for changes in spaces to manage the filter on the provided RoomListStore
@@ -29,7 +28,7 @@ export class SpaceWatcher {
     private activeSpace: Room = SpaceStore.instance.activeSpace;
 
     constructor(private store: RoomListStoreClass) {
-        if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+        if (!SpaceStore.spacesTweakAllRoomsEnabled) {
             this.filter = new SpaceFilterCondition();
             this.updateFilter();
             store.addFilter(this.filter);
@@ -41,7 +40,7 @@ export class SpaceWatcher {
         this.activeSpace = activeSpace;
 
         if (this.filter) {
-            if (activeSpace || !SettingsStore.getValue("feature_spaces.all_rooms")) {
+            if (activeSpace || !SpaceStore.spacesTweakAllRoomsEnabled) {
                 this.updateFilter();
             } else {
                 this.store.removeFilter(this.filter);
diff --git a/src/stores/room-list/algorithms/Algorithm.ts b/src/stores/room-list/algorithms/Algorithm.ts
index 024c484c41..f50d112248 100644
--- a/src/stores/room-list/algorithms/Algorithm.ts
+++ b/src/stores/room-list/algorithms/Algorithm.ts
@@ -34,6 +34,7 @@ import { OrderingAlgorithm } from "./list-ordering/OrderingAlgorithm";
 import { getListAlgorithmInstance } from "./list-ordering";
 import SettingsStore from "../../../settings/SettingsStore";
 import { VisibilityProvider } from "../filters/VisibilityProvider";
+import SpaceStore from "../../SpaceStore";
 
 /**
  * Fired when the Algorithm has determined a list has been updated.
@@ -199,7 +200,7 @@ export class Algorithm extends EventEmitter {
     }
 
     private async doUpdateStickyRoom(val: Room) {
-        if (SettingsStore.getValue("feature_spaces") && val?.isSpaceRoom() && val.getMyMembership() !== "invite") {
+        if (SpaceStore.spacesEnabled && val?.isSpaceRoom() && val.getMyMembership() !== "invite") {
             // no-op sticky rooms for spaces - they're effectively virtual rooms
             val = null;
         }
diff --git a/src/stores/room-list/filters/VisibilityProvider.ts b/src/stores/room-list/filters/VisibilityProvider.ts
index a6c55226b0..f63b622053 100644
--- a/src/stores/room-list/filters/VisibilityProvider.ts
+++ b/src/stores/room-list/filters/VisibilityProvider.ts
@@ -18,7 +18,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import CallHandler from "../../../CallHandler";
 import { RoomListCustomisations } from "../../../customisations/RoomList";
 import VoipUserMapper from "../../../VoipUserMapper";
-import SettingsStore from "../../../settings/SettingsStore";
+import SpaceStore from "../../SpaceStore";
 
 export class VisibilityProvider {
     private static internalInstance: VisibilityProvider;
@@ -50,7 +50,7 @@ export class VisibilityProvider {
         }
 
         // hide space rooms as they'll be shown in the SpacePanel
-        if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) {
+        if (SpaceStore.spacesEnabled && room.isSpaceRoom()) {
             return false;
         }
 

From 80f9793c733866a4292103bb1a8f52febba32bed Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 08:29:50 +0100
Subject: [PATCH 121/179] only show space beta tweaks if you have the beta
 enabled as they do nothing otherwise

---
 src/components/views/beta/BetaCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx
index 3127e1a915..ec662d831b 100644
--- a/src/components/views/beta/BetaCard.tsx
+++ b/src/components/views/beta/BetaCard.tsx
@@ -105,7 +105,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
             
    
             
         
    
-        { extraSettings && 
    
+        { extraSettings && value && 
    
             { extraSettings.map(key => (
                 
             )) }

From 316b21408dc42c81b1933df05ac5d4cbe8839322 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 10:59:52 +0100
Subject: [PATCH 122/179] Fix tests

---
 test/editor/caret-test.js       |  1 +
 test/editor/model-test.js       |  1 +
 test/editor/operations-test.js  |  1 +
 test/editor/position-test.js    |  1 +
 test/editor/range-test.js       |  1 +
 test/editor/serialize-test.js   |  1 +
 test/stores/SpaceStore-setup.ts | 23 +++++++++++++++++++++++
 test/stores/SpaceStore-test.ts  | 20 ++------------------
 8 files changed, 31 insertions(+), 18 deletions(-)
 create mode 100644 test/stores/SpaceStore-setup.ts

diff --git a/test/editor/caret-test.js b/test/editor/caret-test.js
index e1a66a4431..33b40e1c64 100644
--- a/test/editor/caret-test.js
+++ b/test/editor/caret-test.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import "../skinned-sdk"; // Must be first for skinning to work
 import { getLineAndNodePosition } from "../../src/editor/caret";
 import EditorModel from "../../src/editor/model";
 import { createPartCreator } from "./mock";
diff --git a/test/editor/model-test.js b/test/editor/model-test.js
index 35bd4143a7..15c5af5806 100644
--- a/test/editor/model-test.js
+++ b/test/editor/model-test.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import "../skinned-sdk"; // Must be first for skinning to work
 import EditorModel from "../../src/editor/model";
 import { createPartCreator, createRenderer } from "./mock";
 
diff --git a/test/editor/operations-test.js b/test/editor/operations-test.js
index 32ccaa5440..17a4c8ba11 100644
--- a/test/editor/operations-test.js
+++ b/test/editor/operations-test.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import "../skinned-sdk"; // Must be first for skinning to work
 import EditorModel from "../../src/editor/model";
 import { createPartCreator, createRenderer } from "./mock";
 import { toggleInlineFormat } from "../../src/editor/operations";
diff --git a/test/editor/position-test.js b/test/editor/position-test.js
index 813a8e9f7f..ea8658b216 100644
--- a/test/editor/position-test.js
+++ b/test/editor/position-test.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import "../skinned-sdk"; // Must be first for skinning to work
 import EditorModel from "../../src/editor/model";
 import { createPartCreator } from "./mock";
 
diff --git a/test/editor/range-test.js b/test/editor/range-test.js
index d411a0d911..87c5b06e44 100644
--- a/test/editor/range-test.js
+++ b/test/editor/range-test.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import "../skinned-sdk"; // Must be first for skinning to work
 import EditorModel from "../../src/editor/model";
 import { createPartCreator, createRenderer } from "./mock";
 
diff --git a/test/editor/serialize-test.js b/test/editor/serialize-test.js
index 691130bd34..085a8afdba 100644
--- a/test/editor/serialize-test.js
+++ b/test/editor/serialize-test.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import "../skinned-sdk"; // Must be first for skinning to work
 import EditorModel from "../../src/editor/model";
 import { htmlSerializeIfNeeded } from "../../src/editor/serialize";
 import { createPartCreator } from "./mock";
diff --git a/test/stores/SpaceStore-setup.ts b/test/stores/SpaceStore-setup.ts
new file mode 100644
index 0000000000..67d492255f
--- /dev/null
+++ b/test/stores/SpaceStore-setup.ts
@@ -0,0 +1,23 @@
+/*
+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 needs to be executed before the SpaceStore gets imported but due to ES6 import hoisting we have to do this here.
+// SpaceStore reads the SettingsStore which needs the localStorage values set at init time.
+
+localStorage.setItem("mx_labs_feature_feature_spaces", "true");
+localStorage.setItem("mx_labs_feature_feature_spaces.all_rooms", "true");
+localStorage.setItem("mx_labs_feature_feature_spaces.space_member_dms", "true");
+localStorage.setItem("mx_labs_feature_feature_spaces.space_dm_badges", "false");
diff --git a/test/stores/SpaceStore-test.ts b/test/stores/SpaceStore-test.ts
index 4cbd9f43c8..eb28a72d67 100644
--- a/test/stores/SpaceStore-test.ts
+++ b/test/stores/SpaceStore-test.ts
@@ -16,7 +16,9 @@ limitations under the License.
 
 import { EventEmitter } from "events";
 import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
+import "./SpaceStore-setup"; // enable space lab
 import "../skinned-sdk"; // Must be first for skinning to work
 import SpaceStore, {
     UPDATE_INVITED_SPACES,
@@ -26,13 +28,10 @@ import SpaceStore, {
 import { resetAsyncStoreWithClient, setupAsyncStoreWithClient } from "../utils/test-utils";
 import { mkEvent, mkStubRoom, stubClient } from "../test-utils";
 import { EnhancedMap } from "../../src/utils/maps";
-import SettingsStore from "../../src/settings/SettingsStore";
 import DMRoomMap from "../../src/utils/DMRoomMap";
 import { MatrixClientPeg } from "../../src/MatrixClientPeg";
 import defaultDispatcher from "../../src/dispatcher/dispatcher";
 
-type MatrixEvent = any; // importing from js-sdk upsets things
-
 jest.useFakeTimers();
 
 const mockStateEventImplementation = (events: MatrixEvent[]) => {
@@ -79,9 +78,6 @@ const mkSpace = (spaceId: string, children: string[] = []) => {
     return space;
 };
 
-const getValue = jest.fn();
-SettingsStore.getValue = getValue;
-
 const getUserIdForRoomId = jest.fn();
 // @ts-ignore
 DMRoomMap.sharedInstance = { getUserIdForRoomId };
@@ -122,18 +118,6 @@ describe("SpaceStore", () => {
     beforeEach(() => {
         jest.runAllTimers();
         client.getVisibleRooms.mockReturnValue(rooms = []);
-        getValue.mockImplementation(settingName => {
-            switch (settingName) {
-                case "feature_spaces":
-                    return true;
-                case "feature_spaces.all_rooms":
-                    return true;
-                case "feature_spaces.space_member_dms":
-                    return true;
-                case "feature_spaces.space_dm_badges":
-                    return false;
-            }
-        });
     });
     afterEach(async () => {
         await resetAsyncStoreWithClient(store);

From 59feff376306c64e94c8c8606e8252aa0863904c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 11:49:15 +0100
Subject: [PATCH 123/179] Silence RoomListStore possible memory leak warning

---
 src/stores/room-list/RoomListStore.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index e26c80bb2d..5d26056a7d 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -73,6 +73,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
 
     constructor() {
         super(defaultDispatcher);
+        this.setMaxListeners(20); // CustomRoomTagStore + RoomList + LeftPanel + 8xRoomSubList + spares
     }
 
     private setupWatchers() {

From b8ac40ae55a169dc9c27cabeaeb1fe5e21f99f2f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 11:49:44 +0100
Subject: [PATCH 124/179] Fix React missing key error

---
 src/components/views/rooms/EventTile.tsx | 31 ++++++++++++------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index b5a4bc41db..14eab5da2e 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1152,11 +1152,11 @@ export default class EventTile extends React.Component {
                     "aria-live": ariaLive,
                     "aria-atomic": true,
                     "data-scroll-tokens": scrollToken,
-                }, [
-                    ircTimestamp,
-                    avatar,
-                    sender,
-                    ircPadlock,
+                }, <>
+                    { ircTimestamp }
+                    { avatar }
+                    { sender }
+                    { ircPadlock }
                     
    
                         { groupTimestamp }
                         { groupPadlock }
@@ -1169,8 +1169,8 @@ export default class EventTile extends React.Component {
                             replacingEventId={this.props.replacingEventId}
                             showUrlPreview={false}
                         />
-                    
    ,
-                ]);
+                    
    
+                );
             }
             default: {
                 const thread = ReplyThread.makeThread(
@@ -1193,10 +1193,10 @@ export default class EventTile extends React.Component {
                         "data-scroll-tokens": scrollToken,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
-                    }, [
-                        ircTimestamp,
-                        sender,
-                        ircPadlock,
+                    }, <>
+                        { ircTimestamp }
+                        { sender }
+                        { ircPadlock }
                         
    
                             { groupTimestamp }
                             { groupPadlock }
@@ -1214,11 +1214,10 @@ export default class EventTile extends React.Component {
                             { keyRequestInfo }
                             { reactionsRow }
                             { actionBar }
-                        
    ,
-                        msgOption,
-                        avatar,
-
-                    ])
+                        
    
+                        { msgOption }
+                        { avatar }
+                    )
                 );
             }
         }

From 1eaf6dd4ed260f64b993c6be82a261e466e79da6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 11:49:55 +0100
Subject: [PATCH 125/179] Improve TS in SenderProfile

---
 .../views/messages/SenderProfile.tsx          | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index bdae9cec4a..5198effb32 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -15,12 +15,14 @@
  */
 
 import React from 'react';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 import Flair from '../elements/Flair';
 import FlairStore from '../../../stores/FlairStore';
 import { getUserNameColorClass } from '../../../utils/FormattingUtils';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { MsgType } from "matrix-js-sdk/lib/@types/event";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -50,7 +52,7 @@ export default class SenderProfile extends React.Component {
 
     componentDidMount() {
         this.unmounted = false;
-        this._updateRelatedGroups();
+        this.updateRelatedGroups();
 
         if (this.state.userGroups.length === 0) {
             this.getPublicisedGroups();
@@ -64,7 +66,7 @@ export default class SenderProfile extends React.Component {
         this.context.removeListener('RoomState.events', this.onRoomStateEvents);
     }
 
-    async getPublicisedGroups() {
+    private async getPublicisedGroups() {
         if (!this.unmounted) {
             const userGroups = await FlairStore.getPublicisedGroupsCached(
                 this.context, this.props.mxEvent.getSender(),
@@ -73,15 +75,15 @@ export default class SenderProfile extends React.Component {
         }
     }
 
-    onRoomStateEvents = event => {
+    private onRoomStateEvents = (event: MatrixEvent) => {
         if (event.getType() === 'm.room.related_groups' &&
             event.getRoomId() === this.props.mxEvent.getRoomId()
         ) {
-            this._updateRelatedGroups();
+            this.updateRelatedGroups();
         }
     };
 
-    _updateRelatedGroups() {
+    private updateRelatedGroups() {
         if (this.unmounted) return;
         const room = this.context.getRoom(this.props.mxEvent.getRoomId());
         if (!room) return;
@@ -92,7 +94,7 @@ export default class SenderProfile extends React.Component {
         });
     }
 
-    _getDisplayedGroups(userGroups, relatedGroups) {
+    private getDisplayedGroups(userGroups?: string[], relatedGroups?: string[]) {
         let displayedGroups = userGroups || [];
         if (relatedGroups && relatedGroups.length > 0) {
             displayedGroups = relatedGroups.filter((groupId) => {
@@ -113,7 +115,7 @@ export default class SenderProfile extends React.Component {
         const displayName = mxEvent.sender?.rawDisplayName || mxEvent.getSender() || "";
         const mxid = mxEvent.sender?.userId || mxEvent.getSender() || "";
 
-        if (msgtype === 'm.emote') {
+        if (msgtype === MsgType.Emote) {
             return null; // emote message must include the name so don't duplicate it
         }
 
@@ -128,7 +130,7 @@ export default class SenderProfile extends React.Component {
 
         let flair;
         if (this.props.enableFlair) {
-            const displayedGroups = this._getDisplayedGroups(
+            const displayedGroups = this.getDisplayedGroups(
                 this.state.userGroups, this.state.relatedGroups,
             );
 

From e9d56d4f135c7e61df1434722aed997fdd16c70d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 12:10:01 +0100
Subject: [PATCH 126/179] Fix possible uncaught exception for getUrlPreview
 which would cause 0 url previews if one url was faulty

---
 src/components/views/rooms/LinkPreviewGroup.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx
index 2541b2e375..c9842bdd33 100644
--- a/src/components/views/rooms/LinkPreviewGroup.tsx
+++ b/src/components/views/rooms/LinkPreviewGroup.tsx
@@ -40,10 +40,12 @@ const LinkPreviewGroup: React.FC = ({ links, mxEvent, onCancelClick, onH
 
     const ts = mxEvent.getTs();
     const previews = useAsyncMemo<[string, IPreviewUrlResponse][]>(async () => {
-        return Promise.all<[string, IPreviewUrlResponse] | void>(links.map(link => {
-            return cli.getUrlPreview(link, ts).then(preview => [link, preview], error => {
+        return Promise.all<[string, IPreviewUrlResponse] | void>(links.map(async link => {
+            try {
+                return [link, await cli.getUrlPreview(link, ts)];
+            } catch (error) {
                 console.error("Failed to get URL preview: " + error);
-            });
+            }
         })).then(a => a.filter(Boolean)) as Promise<[string, IPreviewUrlResponse][]>;
     }, [links, ts], []);
 

From 7c3c04d340e2cd255e4f5d271a5c80dc870ba82b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 12:10:54 +0100
Subject: [PATCH 127/179] Fix instances of setState calls after unmount

---
 src/components/structures/RoomView.tsx        | 33 +++++++++----------
 src/components/structures/TimelinePanel.tsx   |  4 +++
 .../views/messages/SenderProfile.tsx          | 19 ++++-------
 .../tabs/user/AppearanceUserSettingsTab.tsx   |  6 ++++
 4 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 2c118149a0..2d264b00e9 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -916,6 +916,7 @@ export default class RoomView extends React.Component {
     // called when state.room is first initialised (either at initial load,
     // after a successful peek, or after we join the room).
     private onRoomLoaded = (room: Room) => {
+        if (this.unmounted) return;
         // Attach a widget store listener only when we get a room
         WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(room), this.onWidgetLayoutChange);
         this.onWidgetLayoutChange(); // provoke an update
@@ -930,9 +931,9 @@ export default class RoomView extends React.Component {
     };
 
     private async calculateRecommendedVersion(room: Room) {
-        this.setState({
-            upgradeRecommendation: await room.getRecommendedVersion(),
-        });
+        const upgradeRecommendation = await room.getRecommendedVersion();
+        if (this.unmounted) return;
+        this.setState({ upgradeRecommendation });
     }
 
     private async loadMembersIfJoined(room: Room) {
@@ -1022,23 +1023,19 @@ export default class RoomView extends React.Component {
     };
 
     private async updateE2EStatus(room: Room) {
-        if (!this.context.isRoomEncrypted(room.roomId)) {
-            return;
-        }
-        if (!this.context.isCryptoEnabled()) {
-            // If crypto is not currently enabled, we aren't tracking devices at all,
-            // so we don't know what the answer is. Let's error on the safe side and show
-            // a warning for this case.
-            this.setState({
-                e2eStatus: E2EStatus.Warning,
-            });
-            return;
+        if (!this.context.isRoomEncrypted(room.roomId)) return;
+
+        // If crypto is not currently enabled, we aren't tracking devices at all,
+        // so we don't know what the answer is. Let's error on the safe side and show
+        // a warning for this case.
+        let e2eStatus = E2EStatus.Warning;
+        if (this.context.isCryptoEnabled()) {
+            /* At this point, the user has encryption on and cross-signing on */
+            e2eStatus = await shieldStatusForRoom(this.context, room);
         }
 
-        /* At this point, the user has encryption on and cross-signing on */
-        this.setState({
-            e2eStatus: await shieldStatusForRoom(this.context, room),
-        });
+        if (this.unmounted) return;
+        this.setState({ e2eStatus });
     }
 
     private onAccountData = (event: MatrixEvent) => {
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
index 85a048e9b8..c21aac790b 100644
--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@@ -1051,6 +1051,8 @@ class TimelinePanel extends React.Component {
             { windowLimit: this.props.timelineCap });
 
         const onLoaded = () => {
+            if (this.unmounted) return;
+
             // clear the timeline min-height when
             // (re)loading the timeline
             if (this.messagePanel.current) {
@@ -1092,6 +1094,8 @@ class TimelinePanel extends React.Component {
         };
 
         const onError = (error) => {
+            if (this.unmounted) return;
+
             this.setState({ timelineLoading: false });
             console.error(
                 `Error loading timeline panel at ${eventId}: ${error}`,
diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index 5198effb32..d62c10427d 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -38,7 +38,7 @@ interface IState {
 @replaceableComponent("views.messages.SenderProfile")
 export default class SenderProfile extends React.Component {
     static contextType = MatrixClientContext;
-    private unmounted: boolean;
+    private unmounted = false;
 
     constructor(props: IProps) {
         super(props);
@@ -51,7 +51,6 @@ export default class SenderProfile extends React.Component {
     }
 
     componentDidMount() {
-        this.unmounted = false;
         this.updateRelatedGroups();
 
         if (this.state.userGroups.length === 0) {
@@ -67,30 +66,24 @@ export default class SenderProfile extends React.Component {
     }
 
     private async getPublicisedGroups() {
-        if (!this.unmounted) {
-            const userGroups = await FlairStore.getPublicisedGroupsCached(
-                this.context, this.props.mxEvent.getSender(),
-            );
-            this.setState({ userGroups });
-        }
+        const userGroups = await FlairStore.getPublicisedGroupsCached(this.context, this.props.mxEvent.getSender());
+        if (this.unmounted) return;
+        this.setState({ userGroups });
     }
 
     private onRoomStateEvents = (event: MatrixEvent) => {
-        if (event.getType() === 'm.room.related_groups' &&
-            event.getRoomId() === this.props.mxEvent.getRoomId()
-        ) {
+        if (event.getType() === 'm.room.related_groups' && event.getRoomId() === this.props.mxEvent.getRoomId()) {
             this.updateRelatedGroups();
         }
     };
 
     private updateRelatedGroups() {
-        if (this.unmounted) return;
         const room = this.context.getRoom(this.props.mxEvent.getRoomId());
         if (!room) return;
 
         const relatedGroupsEvent = room.currentState.getStateEvents('m.room.related_groups', '');
         this.setState({
-            relatedGroups: relatedGroupsEvent ? relatedGroupsEvent.getContent().groups || [] : [],
+            relatedGroups: relatedGroupsEvent?.getContent().groups || [],
         });
     }
 
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 17aa9e5561..a94821e94a 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -76,6 +76,7 @@ export default class AppearanceUserSettingsTab extends React.Component
Date: Thu, 15 Jul 2021 12:18:17 +0100
Subject: [PATCH 128/179] improve types

---
 src/TextForEvent.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index ef24fb8e48..95341705bf 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -32,7 +32,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 // any text to display at all. For this reason they return deferred values
 // to avoid the expense of looking up translations when they're not needed.
 
-function textForMemberEvent(ev): () => string | null {
+function textForMemberEvent(ev: MatrixEvent): () => string | null {
     // XXX: SYJS-16 "sender is sometimes null for join messages"
     const senderName = ev.sender ? ev.sender.name : ev.getSender();
     const targetName = ev.target ? ev.target.name : ev.getStateKey();
@@ -127,7 +127,7 @@ function textForMemberEvent(ev): () => string | null {
     }
 }
 
-function textForTopicEvent(ev): () => string | null {
+function textForTopicEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     return () => _t('%(senderDisplayName)s changed the topic to "%(topic)s".', {
         senderDisplayName,
@@ -135,7 +135,7 @@ function textForTopicEvent(ev): () => string | null {
     });
 }
 
-function textForRoomNameEvent(ev): () => string | null {
+function textForRoomNameEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
 
     if (!ev.getContent().name || ev.getContent().name.trim().length === 0) {
@@ -154,12 +154,12 @@ function textForRoomNameEvent(ev): () => string | null {
     });
 }
 
-function textForTombstoneEvent(ev): () => string | null {
+function textForTombstoneEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     return () => _t('%(senderDisplayName)s upgraded this room.', { senderDisplayName });
 }
 
-function textForJoinRulesEvent(ev): () => string | null {
+function textForJoinRulesEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     switch (ev.getContent().join_rule) {
         case "public":
@@ -179,7 +179,7 @@ function textForJoinRulesEvent(ev): () => string | null {
     }
 }
 
-function textForGuestAccessEvent(ev): () => string | null {
+function textForGuestAccessEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     switch (ev.getContent().guest_access) {
         case "can_join":
@@ -195,7 +195,7 @@ function textForGuestAccessEvent(ev): () => string | null {
     }
 }
 
-function textForRelatedGroupsEvent(ev): () => string | null {
+function textForRelatedGroupsEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     const groups = ev.getContent().groups || [];
     const prevGroups = ev.getPrevContent().groups || [];
@@ -225,7 +225,7 @@ function textForRelatedGroupsEvent(ev): () => string | null {
     }
 }
 
-function textForServerACLEvent(ev): () => string | null {
+function textForServerACLEvent(ev: MatrixEvent): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     const prevContent = ev.getPrevContent();
     const current = ev.getContent();
@@ -255,7 +255,7 @@ function textForServerACLEvent(ev): () => string | null {
     return getText;
 }
 
-function textForMessageEvent(ev): () => string | null {
+function textForMessageEvent(ev: MatrixEvent): () => string | null {
     return () => {
         const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
         let message = senderDisplayName + ': ' + ev.getContent().body;
@@ -268,7 +268,7 @@ function textForMessageEvent(ev): () => string | null {
     };
 }
 
-function textForCanonicalAliasEvent(ev): () => string | null {
+function textForCanonicalAliasEvent(ev: MatrixEvent): () => string | null {
     const senderName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     const oldAlias = ev.getPrevContent().alias;
     const oldAltAliases = ev.getPrevContent().alt_aliases || [];
@@ -682,7 +682,7 @@ for (const evType of ALL_RULE_TYPES) {
     stateHandlers[evType] = textForMjolnirEvent;
 }
 
-export function hasText(ev): boolean {
+export function hasText(ev: MatrixEvent): boolean {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
     return Boolean(handler?.(ev));
 }

From 20e0356eb1b7e6623325c2be5b2ba94bd5e168bb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 12:25:26 +0100
Subject: [PATCH 129/179] why do my IDE be dumb

---
 src/components/views/messages/SenderProfile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index d62c10427d..d4b74db6d0 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -16,13 +16,13 @@
 
 import React from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { MsgType } from "matrix-js-sdk/src/@types/event";
 
 import Flair from '../elements/Flair';
 import FlairStore from '../../../stores/FlairStore';
 import { getUserNameColorClass } from '../../../utils/FormattingUtils';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { MsgType } from "matrix-js-sdk/lib/@types/event";
 
 interface IProps {
     mxEvent: MatrixEvent;

From 375e2798258f21578a66ac312f3c0eb4f04b3603 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Thu, 15 Jul 2021 15:15:48 +0200
Subject: [PATCH 130/179] Add speaker icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/img/element-icons/speaker.svg | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 res/img/element-icons/speaker.svg

diff --git a/res/img/element-icons/speaker.svg b/res/img/element-icons/speaker.svg
new file mode 100644
index 0000000000..fd811d2cda
--- /dev/null
+++ b/res/img/element-icons/speaker.svg
@@ -0,0 +1,5 @@
+
+
+
+
+

From 68640a4dbd8f140013fd857334f42413acd4ede2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Thu, 15 Jul 2021 15:16:05 +0200
Subject: [PATCH 131/179] Fix icon postion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_MFileBody.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.scss
index c215d69ec2..b91c461ce5 100644
--- a/res/css/views/messages/_MFileBody.scss
+++ b/res/css/views/messages/_MFileBody.scss
@@ -83,12 +83,12 @@ limitations under the License.
             mask-size: cover;
             mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
             background-color: $message-body-panel-icon-fg-color;
-            width: 13px;
+            width: 15px;
             height: 15px;
 
             position: absolute;
             top: 8px;
-            left: 9px;
+            left: 8px;
         }
     }
 

From 88da0f4dcf500c44c5bae2673b538f0f47ac76b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Thu, 15 Jul 2021 15:17:41 +0200
Subject: [PATCH 132/179] Give audio and video replies an icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss      | 8 ++++++++
 src/components/views/rooms/ReplyTile.tsx | 6 ++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index 8fe3a3e94c..ccb0069190 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -21,6 +21,14 @@ limitations under the License.
     position: relative;
     line-height: $font-16px;
 
+    &.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
+        mask-image: url("$(res)/img/element-icons/speaker.svg");
+    }
+
+    &.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
+        mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+    }
+
     .mx_MFileBody {
         .mx_MFileBody_info {
             margin: 5px 0;
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index f44a75a264..18b30d33d5 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -80,7 +80,7 @@ export default class ReplyTile extends React.PureComponent {
 
     render() {
         const mxEvent = this.props.mxEvent;
-        const msgtype = mxEvent.getContent().msgtype;
+        const msgType = mxEvent.getContent().msgtype;
         const evType = mxEvent.getType() as EventType;
 
         const { tileHandler, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent);
@@ -98,6 +98,8 @@ export default class ReplyTile extends React.PureComponent {
 
         const classes = classNames("mx_ReplyTile", {
             mx_ReplyTile_info: isInfoMessage && !this.props.mxEvent.isRedacted(),
+            mx_ReplyTile_audio: msgType === MsgType.Audio,
+            mx_ReplyTile_video: msgType === MsgType.Video,
         });
 
         let permalink = "#";
@@ -108,7 +110,7 @@ export default class ReplyTile extends React.PureComponent {
         let sender;
         const needsSenderProfile = (
             !isInfoMessage &&
-            msgtype !== MsgType.Image &&
+            msgType !== MsgType.Image &&
             tileHandler !== EventType.RoomCreate &&
             evType !== EventType.Sticker
         );

From 5d0afdb70673fb1401c9986ba1f72c843a8b8593 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Thu, 15 Jul 2021 15:38:07 +0200
Subject: [PATCH 133/179] Don't show  line number in replies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index ccb0069190..c8f76ee995 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -76,6 +76,11 @@ limitations under the License.
         font-size: $font-14px !important;
     }
 
+    // Hide line numbers
+    .mx_EventTile_lineNumbers {
+        display: none;
+    }
+
     // Hack to cut content in 
     tags too
     .mx_EventTile_pre_container > pre {
         overflow: hidden;

From b0053f36d3630f91e3f29694366ef87aff8a2b59 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 17:43:24 +0100
Subject: [PATCH 134/179] Fix instances of event.sender being read for just the
 userId - this field may not be set in time

---
 src/Notifier.ts                             | 2 +-
 src/Unread.ts                               | 6 ++----
 src/components/structures/MessagePanel.tsx  | 2 +-
 src/components/structures/TimelinePanel.tsx | 7 +++----
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/Notifier.ts b/src/Notifier.ts
index 415adcafc8..1137e44aec 100644
--- a/src/Notifier.ts
+++ b/src/Notifier.ts
@@ -328,7 +328,7 @@ export const Notifier = {
 
     onEvent: function(ev: MatrixEvent) {
         if (!this.isSyncing) return; // don't alert for any messages initially
-        if (ev.sender && ev.sender.userId === MatrixClientPeg.get().credentials.userId) return;
+        if (ev.getSender() === MatrixClientPeg.get().credentials.userId) return;
 
         MatrixClientPeg.get().decryptEventIfNeeded(ev);
 
diff --git a/src/Unread.ts b/src/Unread.ts
index 72f0bb4642..da5b883f92 100644
--- a/src/Unread.ts
+++ b/src/Unread.ts
@@ -30,7 +30,7 @@ import { haveTileForEvent } from "./components/views/rooms/EventTile";
  * @returns {boolean} True if the given event should affect the unread message count
  */
 export function eventTriggersUnreadCount(ev: MatrixEvent): boolean {
-    if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) {
+    if (ev.getSender() === MatrixClientPeg.get().credentials.userId) {
         return false;
     }
 
@@ -63,9 +63,7 @@ export function doesRoomHaveUnreadMessages(room: Room): boolean {
     //             https://github.com/vector-im/element-web/issues/2427
     // ...and possibly some of the others at
     //             https://github.com/vector-im/element-web/issues/3363
-    if (room.timeline.length &&
-        room.timeline[room.timeline.length - 1].sender &&
-        room.timeline[room.timeline.length - 1].sender.userId === myUserId) {
+    if (room.timeline.length && room.timeline[room.timeline.length - 1].getSender() === myUserId) {
         return false;
     }
 
diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index a0a1ac9b10..47f8c218dc 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/src/components/structures/MessagePanel.tsx
@@ -401,7 +401,7 @@ export default class MessagePanel extends React.Component {
 
     // TODO: Implement granular (per-room) hide options
     public shouldShowEvent(mxEv: MatrixEvent): boolean {
-        if (mxEv.sender && MatrixClientPeg.get().isUserIgnored(mxEv.sender.userId)) {
+        if (MatrixClientPeg.get().isUserIgnored(mxEv.getSender())) {
             return false; // ignored = no show (only happens if the ignore happens after an event was received)
         }
 
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
index c21aac790b..5f9d9b7026 100644
--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@@ -555,9 +555,8 @@ class TimelinePanel extends React.Component {
                 // more than the timeout on userActiveRecently.
                 //
                 const myUserId = MatrixClientPeg.get().credentials.userId;
-                const sender = ev.sender ? ev.sender.userId : null;
                 callRMUpdated = false;
-                if (sender != myUserId && !UserActivity.sharedInstance().userActiveRecently()) {
+                if (ev.getSender() !== myUserId && !UserActivity.sharedInstance().userActiveRecently()) {
                     updatedState.readMarkerVisible = true;
                 } else if (lastLiveEvent && this.getReadMarkerPosition() === 0) {
                     // we know we're stuckAtBottom, so we can advance the RM
@@ -863,7 +862,7 @@ class TimelinePanel extends React.Component {
         const myUserId = MatrixClientPeg.get().credentials.userId;
         for (i++; i < events.length; i++) {
             const ev = events[i];
-            if (!ev.sender || ev.sender.userId != myUserId) {
+            if (ev.getSender() !== myUserId) {
                 break;
             }
         }
@@ -1337,7 +1336,7 @@ class TimelinePanel extends React.Component {
             }
 
             const shouldIgnore = !!ev.status || // local echo
-                (ignoreOwn && ev.sender && ev.sender.userId == myUserId);   // own message
+                (ignoreOwn && ev.getSender() === myUserId); // own message
             const isWithoutTile = !haveTileForEvent(ev) || shouldHideEvent(ev, this.context);
 
             if (isWithoutTile || !node) {

From 923d68a0fa8f014f28a31b0156ccd0b00e08ed90 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 17:46:46 +0100
Subject: [PATCH 135/179] Fix EventIndex handling events twice

It awaits the decryption in onRoomTimeline as well as subscribing to EVent.decrypted
---
 src/indexing/EventIndex.ts | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/indexing/EventIndex.ts b/src/indexing/EventIndex.ts
index a5827fc599..a7142010f2 100644
--- a/src/indexing/EventIndex.ts
+++ b/src/indexing/EventIndex.ts
@@ -67,7 +67,6 @@ export default class EventIndex extends EventEmitter {
 
         client.on('sync', this.onSync);
         client.on('Room.timeline', this.onRoomTimeline);
-        client.on('Event.decrypted', this.onEventDecrypted);
         client.on('Room.timelineReset', this.onTimelineReset);
         client.on('Room.redaction', this.onRedaction);
         client.on('RoomState.events', this.onRoomStateEvent);
@@ -82,7 +81,6 @@ export default class EventIndex extends EventEmitter {
 
         client.removeListener('sync', this.onSync);
         client.removeListener('Room.timeline', this.onRoomTimeline);
-        client.removeListener('Event.decrypted', this.onEventDecrypted);
         client.removeListener('Room.timelineReset', this.onTimelineReset);
         client.removeListener('Room.redaction', this.onRedaction);
         client.removeListener('RoomState.events', this.onRoomStateEvent);
@@ -221,18 +219,6 @@ export default class EventIndex extends EventEmitter {
         }
     };
 
-    /*
-     * The Event.decrypted listener.
-     *
-     * Checks if the event was marked for addition in the Room.timeline
-     * listener, if so queues it up to be added to the index.
-     */
-    private onEventDecrypted = async (ev: MatrixEvent, err: Error) => {
-        // If the event isn't in our live event set, ignore it.
-        if (err) return;
-        await this.addLiveEventToIndex(ev);
-    };
-
     /*
      * The Room.redaction listener.
      *

From 14371882828acb8aa7abedc76e87715a49563a8e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 18:02:02 +0100
Subject: [PATCH 136/179] Also move effects handling from `event` to
 `Room.timeline` to wake up less

---
 src/components/structures/RoomView.tsx | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 2fe694a435..7e3bcbc962 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -253,7 +253,6 @@ export default class RoomView extends React.Component {
         this.context.on("userTrustStatusChanged", this.onUserVerificationChanged);
         this.context.on("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
         this.context.on("Event.decrypted", this.onEventDecrypted);
-        this.context.on("event", this.onEvent);
         // Start listening for RoomViewStore updates
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate);
@@ -637,7 +636,6 @@ export default class RoomView extends React.Component {
             this.context.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
             this.context.removeListener("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
             this.context.removeListener("Event.decrypted", this.onEventDecrypted);
-            this.context.removeListener("event", this.onEvent);
         }
 
         window.removeEventListener('beforeunload', this.onPageUnload);
@@ -837,8 +835,7 @@ export default class RoomView extends React.Component {
         if (this.unmounted) return;
 
         // ignore events for other rooms
-        if (!room) return;
-        if (!this.state.room || room.roomId != this.state.room.roomId) return;
+        if (!room || room.roomId !== this.state.room?.roomId) return;
 
         // ignore events from filtered timelines
         if (data.timeline.getTimelineSet() !== room.getUnfilteredTimelineSet()) return;
@@ -859,6 +856,10 @@ export default class RoomView extends React.Component {
         // we'll only be showing a spinner.
         if (this.state.joining) return;
 
+        if (!ev.isBeingDecrypted() && !ev.isDecryptionFailure()) {
+            this.handleEffects(ev);
+        }
+
         if (ev.getSender() !== this.context.credentials.userId) {
             // update unread count when scrolled up
             if (!this.state.searchResults && this.state.atEndOfLiveTimeline) {
@@ -871,20 +872,14 @@ export default class RoomView extends React.Component {
         }
     };
 
-    private onEventDecrypted = (ev) => {
+    private onEventDecrypted = (ev: MatrixEvent) => {
+        if (!this.state.room || !this.state.matrixClientIsReady) return; // not ready at all
+        if (ev.getRoomId() !== this.state.room.roomId) return; // not for us
         if (ev.isDecryptionFailure()) return;
         this.handleEffects(ev);
     };
 
-    private onEvent = (ev) => {
-        if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) return;
-        this.handleEffects(ev);
-    };
-
-    private handleEffects = (ev) => {
-        if (!this.state.room || !this.state.matrixClientIsReady) return; // not ready at all
-        if (ev.getRoomId() !== this.state.room.roomId) return; // not for us
-
+    private handleEffects = (ev: MatrixEvent) => {
         const notifState = RoomNotificationStateStore.instance.getRoomState(this.state.room);
         if (!notifState.isUnread) return;
 

From 831c4823715f2bfae710d6a652417967eb9ad99f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 15 Jul 2021 18:17:07 +0100
Subject: [PATCH 137/179] Stub out MatrixClient::isUserIgnored for tests

---
 test/test-utils.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/test-utils.js b/test/test-utils.js
index ad56522965..d75abc80f0 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -96,6 +96,7 @@ export function createTestClient() {
             },
         },
         decryptEventIfNeeded: () => Promise.resolve(),
+        isUserIgnored: jest.fn().mockReturnValue(false),
     };
 }
 

From 2690bb56f9f08c114d56c8e25a88b1af36285e2c Mon Sep 17 00:00:00 2001
From: Travis Ralston 
Date: Thu, 15 Jul 2021 13:39:54 -0600
Subject: [PATCH 138/179] Remove code we don't seem to need

---
 .../views/settings/Notifications.tsx          | 29 -------------------
 1 file changed, 29 deletions(-)

diff --git a/src/components/views/settings/Notifications.tsx b/src/components/views/settings/Notifications.tsx
index 6baac8892e..0cfcdd61af 100644
--- a/src/components/views/settings/Notifications.tsx
+++ b/src/components/views/settings/Notifications.tsx
@@ -214,15 +214,6 @@ export default class Notifications extends React.PureComponent {
                     rule, vectorState,
                     description: _t(definition.description),
                 });
-
-                // XXX: Do we need this block from the previous component?
-                /*
-                    // if there was a rule which we couldn't parse, add it to the external list
-                    if (rule && !vectorState) {
-                        rule.description = ruleDefinition.description;
-                        self.state.externalPushRules.push(rule);
-                    }
-                 */
             }
 
             // Quickly sort the rules for display purposes
@@ -246,26 +237,6 @@ export default class Notifications extends React.PureComponent {
             }
         }
 
-        // XXX: Do we need this block from the previous component?
-        /*
-            // Build the rules not managed by Vector UI
-            const otherRulesDescriptions = {
-                '.m.rule.message': _t('Notify for all other messages/rooms'),
-                '.m.rule.fallback': _t('Notify me for anything else'),
-            };
-
-            for (const i in defaultRules.others) {
-                const rule = defaultRules.others[i];
-                const ruleDescription = otherRulesDescriptions[rule.rule_id];
-
-                // Show enabled default rules that was modified by the user
-                if (ruleDescription && rule.enabled && !rule.default) {
-                    rule.description = ruleDescription;
-                    self.state.externalPushRules.push(rule);
-                }
-            }
-         */
-
         return preparedNewState;
     }
 

From a3792b75e2b1e47cecb63e622966e749f1e8fdc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 16 Jul 2021 07:53:20 +0200
Subject: [PATCH 139/179] Fix IRC layout replies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_IRCLayout.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 5e61c3b8a3..97190807ca 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -198,8 +198,9 @@ $irc-line-height: $font-18px;
     .mx_ReplyThread {
         margin: 0;
         .mx_SenderProfile {
+            order: unset;
+            max-width: unset;
             width: unset;
-            max-width: var(--name-width);
             background: transparent;
         }
 

From 32cc48ff7a714fab5ef802cf4e94358475ebe73b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 16 Jul 2021 08:49:19 +0100
Subject: [PATCH 140/179] Fix issue with room duplication caused by filtering
 and selecting room using keyboard

Wrap sticky room updates in lock to prevent setStickyRoom running in middle of setKnownRooms
---
 src/stores/room-list/algorithms/Algorithm.ts | 147 ++++++++++---------
 1 file changed, 80 insertions(+), 67 deletions(-)

diff --git a/src/stores/room-list/algorithms/Algorithm.ts b/src/stores/room-list/algorithms/Algorithm.ts
index f50d112248..2acce1ecd7 100644
--- a/src/stores/room-list/algorithms/Algorithm.ts
+++ b/src/stores/room-list/algorithms/Algorithm.ts
@@ -16,8 +16,10 @@ limitations under the License.
 
 import { Room } from "matrix-js-sdk/src/models/room";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
-import DMRoomMap from "../../../utils/DMRoomMap";
 import { EventEmitter } from "events";
+import AwaitLock from "await-lock";
+
+import DMRoomMap from "../../../utils/DMRoomMap";
 import { arrayDiff, arrayHasDiff } from "../../../utils/arrays";
 import { DefaultTagID, RoomUpdateCause, TagID } from "../models";
 import {
@@ -78,6 +80,7 @@ export class Algorithm extends EventEmitter {
     } = {};
     private allowedByFilter: Map = new Map();
     private allowedRoomsByFilters: Set = new Set();
+    private stickyLock = new AwaitLock();
 
     /**
      * Set to true to suspend emissions of algorithm updates.
@@ -123,7 +126,12 @@ export class Algorithm extends EventEmitter {
      * @param val The new room to sticky.
      */
     public async setStickyRoom(val: Room) {
-        await this.updateStickyRoom(val);
+        await this.stickyLock.acquireAsync();
+        try {
+            await this.updateStickyRoom(val);
+        } finally {
+            this.stickyLock.release();
+        }
     }
 
     public getTagSorting(tagId: TagID): SortAlgorithm {
@@ -519,82 +527,87 @@ export class Algorithm extends EventEmitter {
         if (isNullOrUndefined(rooms)) throw new Error(`Array of rooms cannot be null`);
         if (!this.sortAlgorithms) throw new Error(`Cannot set known rooms without a tag sorting map`);
 
-        if (!this.updatesInhibited) {
-            // We only log this if we're expecting to be publishing updates, which means that
-            // this could be an unexpected invocation. If we're inhibited, then this is probably
-            // an intentional invocation.
-            console.warn("Resetting known rooms, initiating regeneration");
-        }
+        await this.stickyLock.acquireAsync();
+        try {
+            if (!this.updatesInhibited) {
+                // We only log this if we're expecting to be publishing updates, which means that
+                // this could be an unexpected invocation. If we're inhibited, then this is probably
+                // an intentional invocation.
+                console.warn("Resetting known rooms, initiating regeneration");
+            }
 
-        // Before we go any further we need to clear (but remember) the sticky room to
-        // avoid accidentally duplicating it in the list.
-        const oldStickyRoom = this._stickyRoom;
-        await this.updateStickyRoom(null);
+            // Before we go any further we need to clear (but remember) the sticky room to
+            // avoid accidentally duplicating it in the list.
+            const oldStickyRoom = this._stickyRoom;
+            if (oldStickyRoom) await this.updateStickyRoom(null);
 
-        this.rooms = rooms;
+            this.rooms = rooms;
 
-        const newTags: ITagMap = {};
-        for (const tagId in this.sortAlgorithms) {
-            // noinspection JSUnfilteredForInLoop
-            newTags[tagId] = [];
-        }
+            const newTags: ITagMap = {};
+            for (const tagId in this.sortAlgorithms) {
+                // noinspection JSUnfilteredForInLoop
+                newTags[tagId] = [];
+            }
 
-        // If we can avoid doing work, do so.
-        if (!rooms.length) {
-            await this.generateFreshTags(newTags); // just in case it wants to do something
-            this.cachedRooms = newTags;
-            return;
-        }
+            // If we can avoid doing work, do so.
+            if (!rooms.length) {
+                await this.generateFreshTags(newTags); // just in case it wants to do something
+                this.cachedRooms = newTags;
+                return;
+            }
 
-        // Split out the easy rooms first (leave and invite)
-        const memberships = splitRoomsByMembership(rooms);
-        for (const room of memberships[EffectiveMembership.Invite]) {
-            newTags[DefaultTagID.Invite].push(room);
-        }
-        for (const room of memberships[EffectiveMembership.Leave]) {
-            newTags[DefaultTagID.Archived].push(room);
-        }
+            // Split out the easy rooms first (leave and invite)
+            const memberships = splitRoomsByMembership(rooms);
+            for (const room of memberships[EffectiveMembership.Invite]) {
+                newTags[DefaultTagID.Invite].push(room);
+            }
+            for (const room of memberships[EffectiveMembership.Leave]) {
+                newTags[DefaultTagID.Archived].push(room);
+            }
 
-        // Now process all the joined rooms. This is a bit more complicated
-        for (const room of memberships[EffectiveMembership.Join]) {
-            const tags = this.getTagsOfJoinedRoom(room);
+            // Now process all the joined rooms. This is a bit more complicated
+            for (const room of memberships[EffectiveMembership.Join]) {
+                const tags = this.getTagsOfJoinedRoom(room);
 
-            let inTag = false;
-            if (tags.length > 0) {
-                for (const tag of tags) {
-                    if (!isNullOrUndefined(newTags[tag])) {
-                        newTags[tag].push(room);
-                        inTag = true;
+                let inTag = false;
+                if (tags.length > 0) {
+                    for (const tag of tags) {
+                        if (!isNullOrUndefined(newTags[tag])) {
+                            newTags[tag].push(room);
+                            inTag = true;
+                        }
+                    }
+                }
+
+                if (!inTag) {
+                    if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
+                        newTags[DefaultTagID.DM].push(room);
+                    } else {
+                        newTags[DefaultTagID.Untagged].push(room);
                     }
                 }
             }
 
-            if (!inTag) {
-                if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
-                    newTags[DefaultTagID.DM].push(room);
-                } else {
-                    newTags[DefaultTagID.Untagged].push(room);
-                }
-            }
-        }
-
-        await this.generateFreshTags(newTags);
-
-        this.cachedRooms = newTags; // this recalculates the filtered rooms for us
-        this.updateTagsFromCache();
-
-        // Now that we've finished generation, we need to update the sticky room to what
-        // it was. It's entirely possible that it changed lists though, so if it did then
-        // we also have to update the position of it.
-        if (oldStickyRoom && oldStickyRoom.room) {
-            await this.updateStickyRoom(oldStickyRoom.room);
-            if (this._stickyRoom && this._stickyRoom.room) { // just in case the update doesn't go according to plan
-                if (this._stickyRoom.tag !== oldStickyRoom.tag) {
-                    // We put the sticky room at the top of the list to treat it as an obvious tag change.
-                    this._stickyRoom.position = 0;
-                    this.recalculateStickyRoom(this._stickyRoom.tag);
+            await this.generateFreshTags(newTags);
+
+            this.cachedRooms = newTags; // this recalculates the filtered rooms for us
+            this.updateTagsFromCache();
+
+            // Now that we've finished generation, we need to update the sticky room to what
+            // it was. It's entirely possible that it changed lists though, so if it did then
+            // we also have to update the position of it.
+            if (oldStickyRoom && oldStickyRoom.room) {
+                await this.updateStickyRoom(oldStickyRoom.room);
+                if (this._stickyRoom && this._stickyRoom.room) { // just in case the update doesn't go according to plan
+                    if (this._stickyRoom.tag !== oldStickyRoom.tag) {
+                        // We put the sticky room at the top of the list to treat it as an obvious tag change.
+                        this._stickyRoom.position = 0;
+                        this.recalculateStickyRoom(this._stickyRoom.tag);
+                    }
                 }
             }
+        } finally {
+            this.stickyLock.release();
         }
     }
 
@@ -685,9 +698,9 @@ export class Algorithm extends EventEmitter {
         if (!this.algorithms) throw new Error("Not ready: no algorithms to determine tags from");
 
         // Note: check the isSticky against the room ID just in case the reference is wrong
-        const isSticky = this._stickyRoom && this._stickyRoom.room && this._stickyRoom.room.roomId === room.roomId;
+        const isSticky = this._stickyRoom?.room?.roomId === room.roomId;
         if (cause === RoomUpdateCause.NewRoom) {
-            const isForLastSticky = this._lastStickyRoom && this._lastStickyRoom.room === room;
+            const isForLastSticky = this._lastStickyRoom?.room === room;
             const roomTags = this.roomIdsToTags[room.roomId];
             const hasTags = roomTags && roomTags.length > 0;
 

From 7464900f95976447fbd66b45b5d6814d7ee7675c Mon Sep 17 00:00:00 2001
From: James Salter 
Date: Fri, 16 Jul 2021 09:05:01 +0100
Subject: [PATCH 141/179] Change menu label to Copy Link

---
 src/components/views/rooms/RoomTile.tsx | 2 +-
 src/i18n/strings/en_EN.json             | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index 8fb4d04791..aa56412149 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -535,7 +535,7 @@ export default class RoomTile extends React.PureComponent {
                     />
                     
                 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d82d19fe3d..41839a1b2a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1665,6 +1665,7 @@
     "Favourite": "Favourite",
     "Low Priority": "Low Priority",
     "Invite People": "Invite People",
+    "Copy Link": "Copy Link",
     "Leave Room": "Leave Room",
     "Room options": "Room options",
     "%(count)s unread messages including mentions.|other": "%(count)s unread messages including mentions.",

From a1c658f187830c1105b62be4a6ec29e8b5474203 Mon Sep 17 00:00:00 2001
From: James Salter 
Date: Fri, 16 Jul 2021 09:07:52 +0100
Subject: [PATCH 142/179] Set Menu icon to link

---
 res/css/views/rooms/_RoomTile.scss      | 4 ++++
 src/components/views/rooms/RoomTile.tsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index 03146e0325..b8f4aeb6e7 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -193,6 +193,10 @@ limitations under the License.
         mask-image: url('$(res)/img/element-icons/settings.svg');
     }
 
+    .mx_RoomTile_iconCopyLink::before {
+        mask-image: url('$(res)/img/element-icons/link.svg');
+    }
+
     .mx_RoomTile_iconInvite::before {
         mask-image: url('$(res)/img/element-icons/room/invite.svg');
     }
diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index aa56412149..2417b4c6f3 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -536,7 +536,7 @@ export default class RoomTile extends React.PureComponent {
                     
                 
                 

From ff80bbc4a5a862de25b5b1f4eeb7e51d8cf657e3 Mon Sep 17 00:00:00 2001
From: James Salter 
Date: Fri, 16 Jul 2021 09:10:20 +0100
Subject: [PATCH 143/179] Move copy link to be before settings

---
 src/components/views/rooms/RoomTile.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index 2417b4c6f3..aade665b6b 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -528,16 +528,16 @@ export default class RoomTile extends React.PureComponent {
                             iconClassName="mx_RoomTile_iconInvite"
                         />
                     ) : null}
-                    
                     
+                                        
                 
                 
                     
Date: Fri, 16 Jul 2021 09:15:56 +0100
Subject: [PATCH 144/179] Make the critical sections of the RLS synchronous to
 avoid needing to mutex everything

---
 src/components/views/rooms/RoomSublist.tsx    |   4 +-
 src/stores/room-list/RoomListStore.ts         |  54 ++---
 src/stores/room-list/algorithms/Algorithm.ts  | 200 ++++++++----------
 .../list-ordering/ImportanceAlgorithm.ts      |  98 ++++-----
 .../list-ordering/NaturalAlgorithm.ts         |  58 +++--
 .../list-ordering/OrderingAlgorithm.ts        |  10 +-
 .../tag-sorting/AlphabeticAlgorithm.ts        |   2 +-
 .../algorithms/tag-sorting/IAlgorithm.ts      |   4 +-
 .../algorithms/tag-sorting/ManualAlgorithm.ts |   2 +-
 .../algorithms/tag-sorting/RecentAlgorithm.ts |   2 +-
 .../room-list/algorithms/tag-sorting/index.ts |   4 +-
 11 files changed, 199 insertions(+), 239 deletions(-)

diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
index fce9e297a1..8d825a2b53 100644
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@@ -408,10 +408,10 @@ export default class RoomSublist extends React.Component {
         this.setState({ addRoomContextMenuPosition: null });
     };
 
-    private onUnreadFirstChanged = async () => {
+    private onUnreadFirstChanged = () => {
         const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
         const newAlgorithm = isUnreadFirst ? ListAlgorithm.Natural : ListAlgorithm.Importance;
-        await RoomListStore.instance.setListOrder(this.props.tagId, newAlgorithm);
+        RoomListStore.instance.setListOrder(this.props.tagId, newAlgorithm);
         this.forceUpdate(); // because if the sublist doesn't have any changes then we will miss the list order change
     };
 
diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index bedbfebd7f..3913a2220f 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -132,8 +132,8 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
         // Update any settings here, as some may have happened before we were logically ready.
         console.log("Regenerating room lists: Startup");
         await this.readAndCacheSettingsFromStore();
-        await this.regenerateAllLists({ trigger: false });
-        await this.handleRVSUpdate({ trigger: false }); // fake an RVS update to adjust sticky room, if needed
+        this.regenerateAllLists({ trigger: false });
+        this.handleRVSUpdate({ trigger: false }); // fake an RVS update to adjust sticky room, if needed
 
         this.updateFn.mark(); // we almost certainly want to trigger an update.
         this.updateFn.trigger();
@@ -150,7 +150,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
         await this.updateState({
             tagsEnabled,
         });
-        await this.updateAlgorithmInstances();
+        this.updateAlgorithmInstances();
     }
 
     /**
@@ -158,23 +158,23 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
      * @param trigger Set to false to prevent a list update from being sent. Should only
      * be used if the calling code will manually trigger the update.
      */
-    private async handleRVSUpdate({ trigger = true }) {
+    private handleRVSUpdate({ trigger = true }) {
         if (!this.matrixClient) return; // We assume there won't be RVS updates without a client
 
         const activeRoomId = RoomViewStore.getRoomId();
         if (!activeRoomId && this.algorithm.stickyRoom) {
-            await this.algorithm.setStickyRoom(null);
+            this.algorithm.setStickyRoom(null);
         } else if (activeRoomId) {
             const activeRoom = this.matrixClient.getRoom(activeRoomId);
             if (!activeRoom) {
                 console.warn(`${activeRoomId} is current in RVS but missing from client - clearing sticky room`);
-                await this.algorithm.setStickyRoom(null);
+                this.algorithm.setStickyRoom(null);
             } else if (activeRoom !== this.algorithm.stickyRoom) {
                 if (SettingsStore.getValue("advancedRoomListLogging")) {
                     // TODO: Remove debug: https://github.com/vector-im/element-web/issues/14602
                     console.log(`Changing sticky room to ${activeRoomId}`);
                 }
-                await this.algorithm.setStickyRoom(activeRoom);
+                this.algorithm.setStickyRoom(activeRoom);
             }
         }
 
@@ -226,7 +226,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
                 console.log("Regenerating room lists: Settings changed");
                 await this.readAndCacheSettingsFromStore();
 
-                await this.regenerateAllLists({ trigger: false }); // regenerate the lists now
+                this.regenerateAllLists({ trigger: false }); // regenerate the lists now
                 this.updateFn.trigger();
             }
         }
@@ -368,7 +368,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
                                 // TODO: Remove debug: https://github.com/vector-im/element-web/issues/14602
                                 console.log(`[RoomListDebug] Clearing sticky room due to room upgrade`);
                             }
-                            await this.algorithm.setStickyRoom(null);
+                            this.algorithm.setStickyRoom(null);
                         }
 
                         // Note: we hit the algorithm instead of our handleRoomUpdate() function to
@@ -377,7 +377,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
                             // TODO: Remove debug: https://github.com/vector-im/element-web/issues/14602
                             console.log(`[RoomListDebug] Removing previous room from room list`);
                         }
-                        await this.algorithm.handleRoomUpdate(prevRoom, RoomUpdateCause.RoomRemoved);
+                        this.algorithm.handleRoomUpdate(prevRoom, RoomUpdateCause.RoomRemoved);
                     }
                 }
 
@@ -433,7 +433,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
             return; // don't do anything on new/moved rooms which ought not to be shown
         }
 
-        const shouldUpdate = await this.algorithm.handleRoomUpdate(room, cause);
+        const shouldUpdate = this.algorithm.handleRoomUpdate(room, cause);
         if (shouldUpdate) {
             if (SettingsStore.getValue("advancedRoomListLogging")) {
                 // TODO: Remove debug: https://github.com/vector-im/element-web/issues/14602
@@ -462,13 +462,13 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
 
         // Reset the sticky room before resetting the known rooms so the algorithm
         // doesn't freak out.
-        await this.algorithm.setStickyRoom(null);
-        await this.algorithm.setKnownRooms(rooms);
+        this.algorithm.setStickyRoom(null);
+        this.algorithm.setKnownRooms(rooms);
 
         // Set the sticky room back, if needed, now that we have updated the store.
         // This will use relative stickyness to the new room set.
         if (stickyIsStillPresent) {
-            await this.algorithm.setStickyRoom(currentSticky);
+            this.algorithm.setStickyRoom(currentSticky);
         }
 
         // Finally, mark an update and resume updates from the algorithm
@@ -477,12 +477,12 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
     }
 
     public async setTagSorting(tagId: TagID, sort: SortAlgorithm) {
-        await this.setAndPersistTagSorting(tagId, sort);
+        this.setAndPersistTagSorting(tagId, sort);
         this.updateFn.trigger();
     }
 
-    private async setAndPersistTagSorting(tagId: TagID, sort: SortAlgorithm) {
-        await this.algorithm.setTagSorting(tagId, sort);
+    private setAndPersistTagSorting(tagId: TagID, sort: SortAlgorithm) {
+        this.algorithm.setTagSorting(tagId, sort);
         // TODO: Per-account? https://github.com/vector-im/element-web/issues/14114
         localStorage.setItem(`mx_tagSort_${tagId}`, sort);
     }
@@ -520,13 +520,13 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
         return tagSort;
     }
 
-    public async setListOrder(tagId: TagID, order: ListAlgorithm) {
-        await this.setAndPersistListOrder(tagId, order);
+    public setListOrder(tagId: TagID, order: ListAlgorithm) {
+        this.setAndPersistListOrder(tagId, order);
         this.updateFn.trigger();
     }
 
-    private async setAndPersistListOrder(tagId: TagID, order: ListAlgorithm) {
-        await this.algorithm.setListOrdering(tagId, order);
+    private setAndPersistListOrder(tagId: TagID, order: ListAlgorithm) {
+        this.algorithm.setListOrdering(tagId, order);
         // TODO: Per-account? https://github.com/vector-im/element-web/issues/14114
         localStorage.setItem(`mx_listOrder_${tagId}`, order);
     }
@@ -563,7 +563,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
         return listOrder;
     }
 
-    private async updateAlgorithmInstances() {
+    private updateAlgorithmInstances() {
         // We'll require an update, so mark for one. Marking now also prevents the calls
         // to setTagSorting and setListOrder from causing triggers.
         this.updateFn.mark();
@@ -576,10 +576,10 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
             const listOrder = this.calculateListOrder(tag);
 
             if (tagSort !== definedSort) {
-                await this.setAndPersistTagSorting(tag, tagSort);
+                this.setAndPersistTagSorting(tag, tagSort);
             }
             if (listOrder !== definedOrder) {
-                await this.setAndPersistListOrder(tag, listOrder);
+                this.setAndPersistListOrder(tag, listOrder);
             }
         }
     }
@@ -632,7 +632,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
      * @param trigger Set to false to prevent a list update from being sent. Should only
      * be used if the calling code will manually trigger the update.
      */
-    public async regenerateAllLists({ trigger = true }) {
+    public regenerateAllLists({ trigger = true }) {
         console.warn("Regenerating all room lists");
 
         const rooms = this.getPlausibleRooms();
@@ -656,8 +656,8 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
             RoomListLayoutStore.instance.ensureLayoutExists(tagId);
         }
 
-        await this.algorithm.populateTags(sorts, orders);
-        await this.algorithm.setKnownRooms(rooms);
+        this.algorithm.populateTags(sorts, orders);
+        this.algorithm.setKnownRooms(rooms);
 
         this.initialListsGenerated = true;
 
diff --git a/src/stores/room-list/algorithms/Algorithm.ts b/src/stores/room-list/algorithms/Algorithm.ts
index 2acce1ecd7..8574f095d6 100644
--- a/src/stores/room-list/algorithms/Algorithm.ts
+++ b/src/stores/room-list/algorithms/Algorithm.ts
@@ -17,7 +17,6 @@ limitations under the License.
 import { Room } from "matrix-js-sdk/src/models/room";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import { EventEmitter } from "events";
-import AwaitLock from "await-lock";
 
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { arrayDiff, arrayHasDiff } from "../../../utils/arrays";
@@ -80,7 +79,6 @@ export class Algorithm extends EventEmitter {
     } = {};
     private allowedByFilter: Map = new Map();
     private allowedRoomsByFilters: Set = new Set();
-    private stickyLock = new AwaitLock();
 
     /**
      * Set to true to suspend emissions of algorithm updates.
@@ -125,13 +123,8 @@ export class Algorithm extends EventEmitter {
      * Awaitable version of the sticky room setter.
      * @param val The new room to sticky.
      */
-    public async setStickyRoom(val: Room) {
-        await this.stickyLock.acquireAsync();
-        try {
-            await this.updateStickyRoom(val);
-        } finally {
-            this.stickyLock.release();
-        }
+    public setStickyRoom(val: Room) {
+        this.updateStickyRoom(val);
     }
 
     public getTagSorting(tagId: TagID): SortAlgorithm {
@@ -139,13 +132,13 @@ export class Algorithm extends EventEmitter {
         return this.sortAlgorithms[tagId];
     }
 
-    public async setTagSorting(tagId: TagID, sort: SortAlgorithm) {
+    public setTagSorting(tagId: TagID, sort: SortAlgorithm) {
         if (!tagId) throw new Error("Tag ID must be defined");
         if (!sort) throw new Error("Algorithm must be defined");
         this.sortAlgorithms[tagId] = sort;
 
         const algorithm: OrderingAlgorithm = this.algorithms[tagId];
-        await algorithm.setSortAlgorithm(sort);
+        algorithm.setSortAlgorithm(sort);
         this._cachedRooms[tagId] = algorithm.orderedRooms;
         this.recalculateFilteredRoomsForTag(tagId); // update filter to re-sort the list
         this.recalculateStickyRoom(tagId); // update sticky room to make sure it appears if needed
@@ -156,7 +149,7 @@ export class Algorithm extends EventEmitter {
         return this.listAlgorithms[tagId];
     }
 
-    public async setListOrdering(tagId: TagID, order: ListAlgorithm) {
+    public setListOrdering(tagId: TagID, order: ListAlgorithm) {
         if (!tagId) throw new Error("Tag ID must be defined");
         if (!order) throw new Error("Algorithm must be defined");
         this.listAlgorithms[tagId] = order;
@@ -164,7 +157,7 @@ export class Algorithm extends EventEmitter {
         const algorithm = getListAlgorithmInstance(order, tagId, this.sortAlgorithms[tagId]);
         this.algorithms[tagId] = algorithm;
 
-        await algorithm.setRooms(this._cachedRooms[tagId]);
+        algorithm.setRooms(this._cachedRooms[tagId]);
         this._cachedRooms[tagId] = algorithm.orderedRooms;
         this.recalculateFilteredRoomsForTag(tagId); // update filter to re-sort the list
         this.recalculateStickyRoom(tagId); // update sticky room to make sure it appears if needed
@@ -191,31 +184,25 @@ export class Algorithm extends EventEmitter {
         }
     }
 
-    private async handleFilterChange() {
-        await this.recalculateFilteredRooms();
+    private handleFilterChange() {
+        this.recalculateFilteredRooms();
 
         // re-emit the update so the list store can fire an off-cycle update if needed
         if (this.updatesInhibited) return;
         this.emit(FILTER_CHANGED);
     }
 
-    private async updateStickyRoom(val: Room) {
-        try {
-            return await this.doUpdateStickyRoom(val);
-        } finally {
-            this._lastStickyRoom = null; // clear to indicate we're done changing
-        }
+    private updateStickyRoom(val: Room) {
+        this.doUpdateStickyRoom(val);
+        this._lastStickyRoom = null; // clear to indicate we're done changing
     }
 
-    private async doUpdateStickyRoom(val: Room) {
+    private doUpdateStickyRoom(val: Room) {
         if (SpaceStore.spacesEnabled && val?.isSpaceRoom() && val.getMyMembership() !== "invite") {
             // no-op sticky rooms for spaces - they're effectively virtual rooms
             val = null;
         }
 
-        // Note throughout: We need async so we can wait for handleRoomUpdate() to do its thing,
-        // otherwise we risk duplicating rooms.
-
         if (val && !VisibilityProvider.instance.isRoomVisible(val)) {
             val = null; // the room isn't visible - lie to the rest of this function
         }
@@ -231,7 +218,7 @@ export class Algorithm extends EventEmitter {
                 this._stickyRoom = null; // clear before we go to update the algorithm
 
                 // Lie to the algorithm and re-add the room to the algorithm
-                await this.handleRoomUpdate(stickyRoom, RoomUpdateCause.NewRoom);
+                this.handleRoomUpdate(stickyRoom, RoomUpdateCause.NewRoom);
                 return;
             }
             return;
@@ -277,10 +264,10 @@ export class Algorithm extends EventEmitter {
         // referential checks as the references can differ through the lifecycle.
         if (lastStickyRoom && lastStickyRoom.room && lastStickyRoom.room.roomId !== val.roomId) {
             // Lie to the algorithm and re-add the room to the algorithm
-            await this.handleRoomUpdate(lastStickyRoom.room, RoomUpdateCause.NewRoom);
+            this.handleRoomUpdate(lastStickyRoom.room, RoomUpdateCause.NewRoom);
         }
         // Lie to the algorithm and remove the room from it's field of view
-        await this.handleRoomUpdate(val, RoomUpdateCause.RoomRemoved);
+        this.handleRoomUpdate(val, RoomUpdateCause.RoomRemoved);
 
         // Check for tag & position changes while we're here. We also check the room to ensure
         // it is still the same room.
@@ -470,9 +457,8 @@ export class Algorithm extends EventEmitter {
      * them.
      * @param {ITagSortingMap} tagSortingMap The tags to generate.
      * @param {IListOrderingMap} listOrderingMap The ordering of those tags.
-     * @returns {Promise<*>} A promise which resolves when complete.
      */
-    public async populateTags(tagSortingMap: ITagSortingMap, listOrderingMap: IListOrderingMap): Promise {
+    public populateTags(tagSortingMap: ITagSortingMap, listOrderingMap: IListOrderingMap): void {
         if (!tagSortingMap) throw new Error(`Sorting map cannot be null or empty`);
         if (!listOrderingMap) throw new Error(`Ordering ma cannot be null or empty`);
         if (arrayHasDiff(Object.keys(tagSortingMap), Object.keys(listOrderingMap))) {
@@ -521,93 +507,87 @@ export class Algorithm extends EventEmitter {
      * Seeds the Algorithm with a set of rooms. The algorithm will discard all
      * previously known information and instead use these rooms instead.
      * @param {Room[]} rooms The rooms to force the algorithm to use.
-     * @returns {Promise<*>} A promise which resolves when complete.
      */
-    public async setKnownRooms(rooms: Room[]): Promise {
+    public setKnownRooms(rooms: Room[]): void {
         if (isNullOrUndefined(rooms)) throw new Error(`Array of rooms cannot be null`);
         if (!this.sortAlgorithms) throw new Error(`Cannot set known rooms without a tag sorting map`);
 
-        await this.stickyLock.acquireAsync();
-        try {
-            if (!this.updatesInhibited) {
-                // We only log this if we're expecting to be publishing updates, which means that
-                // this could be an unexpected invocation. If we're inhibited, then this is probably
-                // an intentional invocation.
-                console.warn("Resetting known rooms, initiating regeneration");
-            }
+        if (!this.updatesInhibited) {
+            // We only log this if we're expecting to be publishing updates, which means that
+            // this could be an unexpected invocation. If we're inhibited, then this is probably
+            // an intentional invocation.
+            console.warn("Resetting known rooms, initiating regeneration");
+        }
 
-            // Before we go any further we need to clear (but remember) the sticky room to
-            // avoid accidentally duplicating it in the list.
-            const oldStickyRoom = this._stickyRoom;
-            if (oldStickyRoom) await this.updateStickyRoom(null);
+        // Before we go any further we need to clear (but remember) the sticky room to
+        // avoid accidentally duplicating it in the list.
+        const oldStickyRoom = this._stickyRoom;
+        if (oldStickyRoom) this.updateStickyRoom(null);
 
-            this.rooms = rooms;
+        this.rooms = rooms;
 
-            const newTags: ITagMap = {};
-            for (const tagId in this.sortAlgorithms) {
-                // noinspection JSUnfilteredForInLoop
-                newTags[tagId] = [];
-            }
+        const newTags: ITagMap = {};
+        for (const tagId in this.sortAlgorithms) {
+            // noinspection JSUnfilteredForInLoop
+            newTags[tagId] = [];
+        }
 
-            // If we can avoid doing work, do so.
-            if (!rooms.length) {
-                await this.generateFreshTags(newTags); // just in case it wants to do something
-                this.cachedRooms = newTags;
-                return;
-            }
+        // If we can avoid doing work, do so.
+        if (!rooms.length) {
+            this.generateFreshTags(newTags); // just in case it wants to do something
+            this.cachedRooms = newTags;
+            return;
+        }
 
-            // Split out the easy rooms first (leave and invite)
-            const memberships = splitRoomsByMembership(rooms);
-            for (const room of memberships[EffectiveMembership.Invite]) {
-                newTags[DefaultTagID.Invite].push(room);
-            }
-            for (const room of memberships[EffectiveMembership.Leave]) {
-                newTags[DefaultTagID.Archived].push(room);
-            }
+        // Split out the easy rooms first (leave and invite)
+        const memberships = splitRoomsByMembership(rooms);
+        for (const room of memberships[EffectiveMembership.Invite]) {
+            newTags[DefaultTagID.Invite].push(room);
+        }
+        for (const room of memberships[EffectiveMembership.Leave]) {
+            newTags[DefaultTagID.Archived].push(room);
+        }
 
-            // Now process all the joined rooms. This is a bit more complicated
-            for (const room of memberships[EffectiveMembership.Join]) {
-                const tags = this.getTagsOfJoinedRoom(room);
+        // Now process all the joined rooms. This is a bit more complicated
+        for (const room of memberships[EffectiveMembership.Join]) {
+            const tags = this.getTagsOfJoinedRoom(room);
 
-                let inTag = false;
-                if (tags.length > 0) {
-                    for (const tag of tags) {
-                        if (!isNullOrUndefined(newTags[tag])) {
-                            newTags[tag].push(room);
-                            inTag = true;
-                        }
-                    }
-                }
-
-                if (!inTag) {
-                    if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
-                        newTags[DefaultTagID.DM].push(room);
-                    } else {
-                        newTags[DefaultTagID.Untagged].push(room);
+            let inTag = false;
+            if (tags.length > 0) {
+                for (const tag of tags) {
+                    if (!isNullOrUndefined(newTags[tag])) {
+                        newTags[tag].push(room);
+                        inTag = true;
                     }
                 }
             }
 
-            await this.generateFreshTags(newTags);
-
-            this.cachedRooms = newTags; // this recalculates the filtered rooms for us
-            this.updateTagsFromCache();
-
-            // Now that we've finished generation, we need to update the sticky room to what
-            // it was. It's entirely possible that it changed lists though, so if it did then
-            // we also have to update the position of it.
-            if (oldStickyRoom && oldStickyRoom.room) {
-                await this.updateStickyRoom(oldStickyRoom.room);
-                if (this._stickyRoom && this._stickyRoom.room) { // just in case the update doesn't go according to plan
-                    if (this._stickyRoom.tag !== oldStickyRoom.tag) {
-                        // We put the sticky room at the top of the list to treat it as an obvious tag change.
-                        this._stickyRoom.position = 0;
-                        this.recalculateStickyRoom(this._stickyRoom.tag);
-                    }
+            if (!inTag) {
+                if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
+                    newTags[DefaultTagID.DM].push(room);
+                } else {
+                    newTags[DefaultTagID.Untagged].push(room);
+                }
+            }
+        }
+
+        this.generateFreshTags(newTags);
+
+        this.cachedRooms = newTags; // this recalculates the filtered rooms for us
+        this.updateTagsFromCache();
+
+        // Now that we've finished generation, we need to update the sticky room to what
+        // it was. It's entirely possible that it changed lists though, so if it did then
+        // we also have to update the position of it.
+        if (oldStickyRoom && oldStickyRoom.room) {
+            this.updateStickyRoom(oldStickyRoom.room);
+            if (this._stickyRoom && this._stickyRoom.room) { // just in case the update doesn't go according to plan
+                if (this._stickyRoom.tag !== oldStickyRoom.tag) {
+                    // We put the sticky room at the top of the list to treat it as an obvious tag change.
+                    this._stickyRoom.position = 0;
+                    this.recalculateStickyRoom(this._stickyRoom.tag);
                 }
             }
-        } finally {
-            this.stickyLock.release();
         }
     }
 
@@ -665,16 +645,15 @@ export class Algorithm extends EventEmitter {
      * @param {ITagMap} updatedTagMap The tag map which needs populating. Each tag
      * will already have the rooms which belong to it - they just need ordering. Must
      * be mutated in place.
-     * @returns {Promise<*>} A promise which resolves when complete.
      */
-    private async generateFreshTags(updatedTagMap: ITagMap): Promise {
+    private generateFreshTags(updatedTagMap: ITagMap): void {
         if (!this.algorithms) throw new Error("Not ready: no algorithms to determine tags from");
 
         for (const tag of Object.keys(updatedTagMap)) {
             const algorithm: OrderingAlgorithm = this.algorithms[tag];
             if (!algorithm) throw new Error(`No algorithm for ${tag}`);
 
-            await algorithm.setRooms(updatedTagMap[tag]);
+            algorithm.setRooms(updatedTagMap[tag]);
             updatedTagMap[tag] = algorithm.orderedRooms;
         }
     }
@@ -686,11 +665,10 @@ export class Algorithm extends EventEmitter {
      * may no-op this request if no changes are required.
      * @param {Room} room The room which might have affected sorting.
      * @param {RoomUpdateCause} cause The reason for the update being triggered.
-     * @returns {Promise} A promise which resolve to true or false
-     * depending on whether or not getOrderedRooms() should be called after
-     * processing.
+     * @returns {Promise} A boolean of whether or not getOrderedRooms()
+     * should be called after processing.
      */
-    public async handleRoomUpdate(room: Room, cause: RoomUpdateCause): Promise {
+    public handleRoomUpdate(room: Room, cause: RoomUpdateCause): boolean {
         if (SettingsStore.getValue("advancedRoomListLogging")) {
             // TODO: Remove debug: https://github.com/vector-im/element-web/issues/14602
             console.log(`Handle room update for ${room.roomId} called with cause ${cause}`);
@@ -757,7 +735,7 @@ export class Algorithm extends EventEmitter {
                     }
                     const algorithm: OrderingAlgorithm = this.algorithms[rmTag];
                     if (!algorithm) throw new Error(`No algorithm for ${rmTag}`);
-                    await algorithm.handleRoomUpdate(room, RoomUpdateCause.RoomRemoved);
+                    algorithm.handleRoomUpdate(room, RoomUpdateCause.RoomRemoved);
                     this._cachedRooms[rmTag] = algorithm.orderedRooms;
                     this.recalculateFilteredRoomsForTag(rmTag); // update filter to re-sort the list
                     this.recalculateStickyRoom(rmTag); // update sticky room to make sure it moves if needed
@@ -769,7 +747,7 @@ export class Algorithm extends EventEmitter {
                     }
                     const algorithm: OrderingAlgorithm = this.algorithms[addTag];
                     if (!algorithm) throw new Error(`No algorithm for ${addTag}`);
-                    await algorithm.handleRoomUpdate(room, RoomUpdateCause.NewRoom);
+                    algorithm.handleRoomUpdate(room, RoomUpdateCause.NewRoom);
                     this._cachedRooms[addTag] = algorithm.orderedRooms;
                 }
 
@@ -802,7 +780,7 @@ export class Algorithm extends EventEmitter {
                     };
                 } else {
                     // We have to clear the lock as the sticky room change will trigger updates.
-                    await this.setStickyRoom(room);
+                    this.setStickyRoom(room);
                 }
             }
         }
@@ -865,7 +843,7 @@ export class Algorithm extends EventEmitter {
             const algorithm: OrderingAlgorithm = this.algorithms[tag];
             if (!algorithm) throw new Error(`No algorithm for ${tag}`);
 
-            await algorithm.handleRoomUpdate(room, cause);
+            algorithm.handleRoomUpdate(room, cause);
             this._cachedRooms[tag] = algorithm.orderedRooms;
 
             // Flag that we've done something
diff --git a/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts b/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts
index 80bdf74afb..1d35df331d 100644
--- a/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts
+++ b/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts
@@ -94,15 +94,15 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
         return state.color;
     }
 
-    public async setRooms(rooms: Room[]): Promise {
+    public setRooms(rooms: Room[]): void {
         if (this.sortingAlgorithm === SortAlgorithm.Manual) {
-            this.cachedOrderedRooms = await sortRoomsWithAlgorithm(rooms, this.tagId, this.sortingAlgorithm);
+            this.cachedOrderedRooms = sortRoomsWithAlgorithm(rooms, this.tagId, this.sortingAlgorithm);
         } else {
             // Every other sorting type affects the categories, not the whole tag.
             const categorized = this.categorizeRooms(rooms);
             for (const category of Object.keys(categorized)) {
                 const roomsToOrder = categorized[category];
-                categorized[category] = await sortRoomsWithAlgorithm(roomsToOrder, this.tagId, this.sortingAlgorithm);
+                categorized[category] = sortRoomsWithAlgorithm(roomsToOrder, this.tagId, this.sortingAlgorithm);
             }
 
             const newlyOrganized: Room[] = [];
@@ -118,12 +118,12 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
         }
     }
 
-    private async handleSplice(room: Room, cause: RoomUpdateCause): Promise {
+    private handleSplice(room: Room, cause: RoomUpdateCause): boolean {
         if (cause === RoomUpdateCause.NewRoom) {
             const category = this.getRoomCategory(room);
             this.alterCategoryPositionBy(category, 1, this.indices);
             this.cachedOrderedRooms.splice(this.indices[category], 0, room); // splice in the new room (pre-adjusted)
-            await this.sortCategory(category);
+            this.sortCategory(category);
         } else if (cause === RoomUpdateCause.RoomRemoved) {
             const roomIdx = this.getRoomIndex(room);
             if (roomIdx === -1) {
@@ -141,55 +141,49 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
         return true;
     }
 
-    public async handleRoomUpdate(room: Room, cause: RoomUpdateCause): Promise {
-        try {
-            await this.updateLock.acquireAsync();
-
-            if (cause === RoomUpdateCause.NewRoom || cause === RoomUpdateCause.RoomRemoved) {
-                return this.handleSplice(room, cause);
-            }
-
-            if (cause !== RoomUpdateCause.Timeline && cause !== RoomUpdateCause.ReadReceipt) {
-                throw new Error(`Unsupported update cause: ${cause}`);
-            }
-
-            const category = this.getRoomCategory(room);
-            if (this.sortingAlgorithm === SortAlgorithm.Manual) {
-                return; // Nothing to do here.
-            }
-
-            const roomIdx = this.getRoomIndex(room);
-            if (roomIdx === -1) {
-                throw new Error(`Room ${room.roomId} has no index in ${this.tagId}`);
-            }
-
-            // Try to avoid doing array operations if we don't have to: only move rooms within
-            // the categories if we're jumping categories
-            const oldCategory = this.getCategoryFromIndices(roomIdx, this.indices);
-            if (oldCategory !== category) {
-                // Move the room and update the indices
-                this.moveRoomIndexes(1, oldCategory, category, this.indices);
-                this.cachedOrderedRooms.splice(roomIdx, 1); // splice out the old index (fixed position)
-                this.cachedOrderedRooms.splice(this.indices[category], 0, room); // splice in the new room (pre-adjusted)
-                // Note: if moveRoomIndexes() is called after the splice then the insert operation
-                // will happen in the wrong place. Because we would have already adjusted the index
-                // for the category, we don't need to determine how the room is moving in the list.
-                // If we instead tried to insert before updating the indices, we'd have to determine
-                // whether the room was moving later (towards IDLE) or earlier (towards RED) from its
-                // current position, as it'll affect the category's start index after we remove the
-                // room from the array.
-            }
-
-            // Sort the category now that we've dumped the room in
-            await this.sortCategory(category);
-
-            return true; // change made
-        } finally {
-            await this.updateLock.release();
+    public handleRoomUpdate(room: Room, cause: RoomUpdateCause): boolean {
+        if (cause === RoomUpdateCause.NewRoom || cause === RoomUpdateCause.RoomRemoved) {
+            return this.handleSplice(room, cause);
         }
+
+        if (cause !== RoomUpdateCause.Timeline && cause !== RoomUpdateCause.ReadReceipt) {
+            throw new Error(`Unsupported update cause: ${cause}`);
+        }
+
+        const category = this.getRoomCategory(room);
+        if (this.sortingAlgorithm === SortAlgorithm.Manual) {
+            return; // Nothing to do here.
+        }
+
+        const roomIdx = this.getRoomIndex(room);
+        if (roomIdx === -1) {
+            throw new Error(`Room ${room.roomId} has no index in ${this.tagId}`);
+        }
+
+        // Try to avoid doing array operations if we don't have to: only move rooms within
+        // the categories if we're jumping categories
+        const oldCategory = this.getCategoryFromIndices(roomIdx, this.indices);
+        if (oldCategory !== category) {
+            // Move the room and update the indices
+            this.moveRoomIndexes(1, oldCategory, category, this.indices);
+            this.cachedOrderedRooms.splice(roomIdx, 1); // splice out the old index (fixed position)
+            this.cachedOrderedRooms.splice(this.indices[category], 0, room); // splice in the new room (pre-adjusted)
+            // Note: if moveRoomIndexes() is called after the splice then the insert operation
+            // will happen in the wrong place. Because we would have already adjusted the index
+            // for the category, we don't need to determine how the room is moving in the list.
+            // If we instead tried to insert before updating the indices, we'd have to determine
+            // whether the room was moving later (towards IDLE) or earlier (towards RED) from its
+            // current position, as it'll affect the category's start index after we remove the
+            // room from the array.
+        }
+
+        // Sort the category now that we've dumped the room in
+        this.sortCategory(category);
+
+        return true; // change made
     }
 
-    private async sortCategory(category: NotificationColor) {
+    private sortCategory(category: NotificationColor) {
         // This should be relatively quick because the room is usually inserted at the top of the
         // category, and most popular sorting algorithms will deal with trying to keep the active
         // room at the top/start of the category. For the few algorithms that will have to move the
@@ -201,7 +195,7 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
         const startIdx = this.indices[category];
         const numSort = nextCategoryStartIdx - startIdx; // splice() returns up to the max, so MAX_SAFE_INT is fine
         const unsortedSlice = this.cachedOrderedRooms.splice(startIdx, numSort);
-        const sorted = await sortRoomsWithAlgorithm(unsortedSlice, this.tagId, this.sortingAlgorithm);
+        const sorted = sortRoomsWithAlgorithm(unsortedSlice, this.tagId, this.sortingAlgorithm);
         this.cachedOrderedRooms.splice(startIdx, 0, ...sorted);
     }
 
diff --git a/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts b/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts
index cc2a28d892..91182dee16 100644
--- a/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts
+++ b/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts
@@ -29,42 +29,32 @@ export class NaturalAlgorithm extends OrderingAlgorithm {
         super(tagId, initialSortingAlgorithm);
     }
 
-    public async setRooms(rooms: Room[]): Promise {
-        this.cachedOrderedRooms = await sortRoomsWithAlgorithm(rooms, this.tagId, this.sortingAlgorithm);
+    public setRooms(rooms: Room[]): void {
+        this.cachedOrderedRooms = sortRoomsWithAlgorithm(rooms, this.tagId, this.sortingAlgorithm);
     }
 
-    public async handleRoomUpdate(room, cause): Promise {
-        try {
-            await this.updateLock.acquireAsync();
-
-            const isSplice = cause === RoomUpdateCause.NewRoom || cause === RoomUpdateCause.RoomRemoved;
-            const isInPlace = cause === RoomUpdateCause.Timeline || cause === RoomUpdateCause.ReadReceipt;
-            if (!isSplice && !isInPlace) {
-                throw new Error(`Unsupported update cause: ${cause}`);
-            }
-
-            if (cause === RoomUpdateCause.NewRoom) {
-                this.cachedOrderedRooms.push(room);
-            } else if (cause === RoomUpdateCause.RoomRemoved) {
-                const idx = this.getRoomIndex(room);
-                if (idx >= 0) {
-                    this.cachedOrderedRooms.splice(idx, 1);
-                } else {
-                    console.warn(`Tried to remove unknown room from ${this.tagId}: ${room.roomId}`);
-                }
-            }
-
-            // TODO: Optimize this to avoid useless operations: https://github.com/vector-im/element-web/issues/14457
-            // For example, we can skip updates to alphabetic (sometimes) and manually ordered tags
-            this.cachedOrderedRooms = await sortRoomsWithAlgorithm(
-                this.cachedOrderedRooms,
-                this.tagId,
-                this.sortingAlgorithm,
-            );
-
-            return true;
-        } finally {
-            await this.updateLock.release();
+    public handleRoomUpdate(room, cause): boolean {
+        const isSplice = cause === RoomUpdateCause.NewRoom || cause === RoomUpdateCause.RoomRemoved;
+        const isInPlace = cause === RoomUpdateCause.Timeline || cause === RoomUpdateCause.ReadReceipt;
+        if (!isSplice && !isInPlace) {
+            throw new Error(`Unsupported update cause: ${cause}`);
         }
+
+        if (cause === RoomUpdateCause.NewRoom) {
+            this.cachedOrderedRooms.push(room);
+        } else if (cause === RoomUpdateCause.RoomRemoved) {
+            const idx = this.getRoomIndex(room);
+            if (idx >= 0) {
+                this.cachedOrderedRooms.splice(idx, 1);
+            } else {
+                console.warn(`Tried to remove unknown room from ${this.tagId}: ${room.roomId}`);
+            }
+        }
+
+        // TODO: Optimize this to avoid useless operations: https://github.com/vector-im/element-web/issues/14457
+        // For example, we can skip updates to alphabetic (sometimes) and manually ordered tags
+        this.cachedOrderedRooms = sortRoomsWithAlgorithm(this.cachedOrderedRooms, this.tagId, this.sortingAlgorithm);
+
+        return true;
     }
 }
diff --git a/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts b/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
index c47a35523c..23a8e33a41 100644
--- a/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
+++ b/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
@@ -26,7 +26,6 @@ import AwaitLock from "await-lock";
 export abstract class OrderingAlgorithm {
     protected cachedOrderedRooms: Room[];
     protected sortingAlgorithm: SortAlgorithm;
-    protected readonly updateLock = new AwaitLock();
 
     protected constructor(protected tagId: TagID, initialSortingAlgorithm: SortAlgorithm) {
         // noinspection JSIgnoredPromiseFromCall
@@ -45,21 +44,20 @@ export abstract class OrderingAlgorithm {
      * @param newAlgorithm The new algorithm. Must be defined.
      * @returns Resolves when complete.
      */
-    public async setSortAlgorithm(newAlgorithm: SortAlgorithm) {
+    public setSortAlgorithm(newAlgorithm: SortAlgorithm) {
         if (!newAlgorithm) throw new Error("A sorting algorithm must be defined");
         this.sortingAlgorithm = newAlgorithm;
 
         // Force regeneration of the rooms
-        await this.setRooms(this.orderedRooms);
+        this.setRooms(this.orderedRooms);
     }
 
     /**
      * Sets the rooms the algorithm should be handling, implying a reconstruction
      * of the ordering.
      * @param rooms The rooms to use going forward.
-     * @returns Resolves when complete.
      */
-    public abstract setRooms(rooms: Room[]): Promise;
+    public abstract setRooms(rooms: Room[]): void;
 
     /**
      * Handle a room update. The Algorithm will only call this for causes which
@@ -69,7 +67,7 @@ export abstract class OrderingAlgorithm {
      * @param cause The cause of the update.
      * @returns True if the update requires the Algorithm to update the presentation layers.
      */
-    public abstract handleRoomUpdate(room: Room, cause: RoomUpdateCause): Promise;
+    public abstract handleRoomUpdate(room: Room, cause: RoomUpdateCause): boolean;
 
     protected getRoomIndex(room: Room): number {
         let roomIdx = this.cachedOrderedRooms.indexOf(room);
diff --git a/src/stores/room-list/algorithms/tag-sorting/AlphabeticAlgorithm.ts b/src/stores/room-list/algorithms/tag-sorting/AlphabeticAlgorithm.ts
index b016a4256c..45f6eaf843 100644
--- a/src/stores/room-list/algorithms/tag-sorting/AlphabeticAlgorithm.ts
+++ b/src/stores/room-list/algorithms/tag-sorting/AlphabeticAlgorithm.ts
@@ -23,7 +23,7 @@ import { compare } from "../../../../utils/strings";
  * Sorts rooms according to the browser's determination of alphabetic.
  */
 export class AlphabeticAlgorithm implements IAlgorithm {
-    public async sortRooms(rooms: Room[], tagId: TagID): Promise {
+    public sortRooms(rooms: Room[], tagId: TagID): Room[] {
         return rooms.sort((a, b) => {
             return compare(a.name, b.name);
         });
diff --git a/src/stores/room-list/algorithms/tag-sorting/IAlgorithm.ts b/src/stores/room-list/algorithms/tag-sorting/IAlgorithm.ts
index 6c22ee0c9c..588bbbffc9 100644
--- a/src/stores/room-list/algorithms/tag-sorting/IAlgorithm.ts
+++ b/src/stores/room-list/algorithms/tag-sorting/IAlgorithm.ts
@@ -25,7 +25,7 @@ export interface IAlgorithm {
      * Sorts the given rooms according to the sorting rules of the algorithm.
      * @param {Room[]} rooms The rooms to sort.
      * @param {TagID} tagId The tag ID in which the rooms are being sorted.
-     * @returns {Promise} Resolves to the sorted rooms.
+     * @returns {Room[]} Returns the sorted rooms.
      */
-    sortRooms(rooms: Room[], tagId: TagID): Promise;
+    sortRooms(rooms: Room[], tagId: TagID): Room[];
 }
diff --git a/src/stores/room-list/algorithms/tag-sorting/ManualAlgorithm.ts b/src/stores/room-list/algorithms/tag-sorting/ManualAlgorithm.ts
index b8c0357633..9be8ba5262 100644
--- a/src/stores/room-list/algorithms/tag-sorting/ManualAlgorithm.ts
+++ b/src/stores/room-list/algorithms/tag-sorting/ManualAlgorithm.ts
@@ -22,7 +22,7 @@ import { IAlgorithm } from "./IAlgorithm";
  * Sorts rooms according to the tag's `order` property on the room.
  */
 export class ManualAlgorithm implements IAlgorithm {
-    public async sortRooms(rooms: Room[], tagId: TagID): Promise {
+    public sortRooms(rooms: Room[], tagId: TagID): Room[] {
         const getOrderProp = (r: Room) => r.tags[tagId].order || 0;
         return rooms.sort((a, b) => {
             return getOrderProp(a) - getOrderProp(b);
diff --git a/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts b/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
index 49cfd9e520..f47458d1b1 100644
--- a/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
+++ b/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
@@ -97,7 +97,7 @@ export const sortRooms = (rooms: Room[]): Room[] => {
  * useful to the user.
  */
 export class RecentAlgorithm implements IAlgorithm {
-    public async sortRooms(rooms: Room[], tagId: TagID): Promise {
+    public sortRooms(rooms: Room[], tagId: TagID): Room[] {
         return sortRooms(rooms);
     }
 }
diff --git a/src/stores/room-list/algorithms/tag-sorting/index.ts b/src/stores/room-list/algorithms/tag-sorting/index.ts
index c22865f5ba..368c76f111 100644
--- a/src/stores/room-list/algorithms/tag-sorting/index.ts
+++ b/src/stores/room-list/algorithms/tag-sorting/index.ts
@@ -46,8 +46,8 @@ export function getSortingAlgorithmInstance(algorithm: SortAlgorithm): IAlgorith
  * @param {Room[]} rooms The rooms to sort.
  * @param {TagID} tagId The tag in which the sorting is occurring.
  * @param {SortAlgorithm} algorithm The algorithm to use for sorting.
- * @returns {Promise} Resolves to the sorted rooms.
+ * @returns {Room[]} Returns the sorted rooms.
  */
-export function sortRoomsWithAlgorithm(rooms: Room[], tagId: TagID, algorithm: SortAlgorithm): Promise {
+export function sortRoomsWithAlgorithm(rooms: Room[], tagId: TagID, algorithm: SortAlgorithm): Room[] {
     return getSortingAlgorithmInstance(algorithm).sortRooms(rooms, tagId);
 }

From 329f1c9d6a34167d97061cdc16e4cdfdbff84517 Mon Sep 17 00:00:00 2001
From: James Salter 
Date: Fri, 16 Jul 2021 09:22:17 +0100
Subject: [PATCH 145/179] Update src/components/views/rooms/RoomTile.tsx

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/RoomTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index aade665b6b..b1c9ed4d98 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -537,7 +537,7 @@ export default class RoomTile extends React.PureComponent {
                         onClick={this.onOpenRoomSettings}
                         label={_t("Settings")}
                         iconClassName="mx_RoomTile_iconSettings"
-                    />                    
+                    />
                 
                 
                     
Date: Fri, 16 Jul 2021 09:22:25 +0100
Subject: [PATCH 146/179] remove unused import

---
 .../room-list/algorithms/list-ordering/OrderingAlgorithm.ts      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts b/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
index 23a8e33a41..9d7b5f9ddb 100644
--- a/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
+++ b/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
@@ -17,7 +17,6 @@ limitations under the License.
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomUpdateCause, TagID } from "../../models";
 import { SortAlgorithm } from "../models";
-import AwaitLock from "await-lock";
 
 /**
  * Represents a list ordering algorithm. Subclasses should populate the

From 685b59235dfbc99109bc8d8f153b96750ad2523e Mon Sep 17 00:00:00 2001
From: James Salter 
Date: Fri, 16 Jul 2021 09:24:14 +0100
Subject: [PATCH 147/179] Make error message consistent with menu title

---
 src/components/structures/MatrixChat.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index cadf66d11e..c6ca965934 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -1202,9 +1202,9 @@ export default class MatrixChat extends React.PureComponent {
         const roomLink = makeRoomPermalink(roomId);
         const success = await copyPlaintext(roomLink);
         if (!success) {
-            Modal.createTrackedDialog("Unable to copy room", "", ErrorDialog, {
-                title: _t("Unable to copy room"),
-                description: _t("Unable to copy the room to the clipboard."),
+            Modal.createTrackedDialog("Unable to copy room link", "", ErrorDialog, {
+                title: _t("Unable to copy room link"),
+                description: _t("Unable to copy a link to the room to the clipboard."),
             });
         }
     }

From 767d97065d1367bd96c379b001e0d4a6547d0c38 Mon Sep 17 00:00:00 2001
From: James Salter 
Date: Fri, 16 Jul 2021 09:36:59 +0100
Subject: [PATCH 148/179] Run i18n

---
 src/i18n/strings/en_EN.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index edbb7719eb..abdb8c2fb2 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2675,8 +2675,8 @@
     "Are you sure you want to leave the space '%(spaceName)s'?": "Are you sure you want to leave the space '%(spaceName)s'?",
     "Are you sure you want to leave the room '%(roomName)s'?": "Are you sure you want to leave the room '%(roomName)s'?",
     "Failed to forget room %(errCode)s": "Failed to forget room %(errCode)s",
-    "Unable to copy room": "Unable to copy room",
-    "Unable to copy the room to the clipboard.": "Unable to copy the room to the clipboard.",
+    "Unable to copy room link": "Unable to copy room link",
+    "Unable to copy a link to the room to the clipboard.": "Unable to copy a link to the room to the clipboard.",
     "Signed Out": "Signed Out",
     "For security, this session has been signed out. Please sign in again.": "For security, this session has been signed out. Please sign in again.",
     "Terms and Conditions": "Terms and Conditions",

From 9d45a3760fd38928543f20343d4f27a48c7dbb42 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 16 Jul 2021 13:11:43 +0100
Subject: [PATCH 149/179] Fix types of the various query params dicts, arrays
 can be included e.g via

---
 src/Lifecycle.ts                         | 11 ++++++-----
 src/components/structures/MatrixChat.tsx | 16 ++++++++--------
 src/components/views/elements/AppTile.js |  1 -
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts
index 61ded93833..410124a637 100644
--- a/src/Lifecycle.ts
+++ b/src/Lifecycle.ts
@@ -21,6 +21,7 @@ import { createClient } from 'matrix-js-sdk/src/matrix';
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { decryptAES, encryptAES, IEncryptedPayload } from "matrix-js-sdk/src/crypto/aes";
+import { QueryDict } from 'matrix-js-sdk/src/utils';
 
 import { IMatrixClientCreds, MatrixClientPeg } from './MatrixClientPeg';
 import SecurityCustomisations from "./customisations/Security";
@@ -65,7 +66,7 @@ interface ILoadSessionOpts {
     guestIsUrl?: string;
     ignoreGuest?: boolean;
     defaultDeviceDisplayName?: string;
-    fragmentQueryParams?: Record;
+    fragmentQueryParams?: QueryDict;
 }
 
 /**
@@ -118,8 +119,8 @@ export async function loadSession(opts: ILoadSessionOpts = {}): Promise
         ) {
             console.log("Using guest access credentials");
             return doSetLoggedIn({
-                userId: fragmentQueryParams.guest_user_id,
-                accessToken: fragmentQueryParams.guest_access_token,
+                userId: fragmentQueryParams.guest_user_id as string,
+                accessToken: fragmentQueryParams.guest_access_token as string,
                 homeserverUrl: guestHsUrl,
                 identityServerUrl: guestIsUrl,
                 guest: true,
@@ -173,7 +174,7 @@ export async function getStoredSessionOwner(): Promise<[string, boolean]> {
  *    login, else false
  */
 export function attemptTokenLogin(
-    queryParams: Record,
+    queryParams: QueryDict,
     defaultDeviceDisplayName?: string,
     fragmentAfterLogin?: string,
 ): Promise {
@@ -198,7 +199,7 @@ export function attemptTokenLogin(
         homeserver,
         identityServer,
         "m.login.token", {
-            token: queryParams.loginToken,
+            token: queryParams.loginToken as string,
             initial_device_display_name: defaultDeviceDisplayName,
         },
     ).then(function(creds) {
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 15536f260d..785838ffca 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -19,7 +19,7 @@ import { createClient } from "matrix-js-sdk/src/matrix";
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { sleep, defer, IDeferred } from "matrix-js-sdk/src/utils";
+import { sleep, defer, IDeferred, QueryDict } from "matrix-js-sdk/src/utils";
 
 // focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss
 import 'focus-visible';
@@ -155,7 +155,7 @@ const ONBOARDING_FLOW_STARTERS = [
 
 interface IScreen {
     screen: string;
-    params?: object;
+    params?: QueryDict;
 }
 
 /* eslint-disable camelcase */
@@ -185,9 +185,9 @@ interface IProps { // TODO type things better
     onNewScreen: (screen: string, replaceLast: boolean) => void;
     enableGuest?: boolean;
     // the queryParams extracted from the [real] query-string of the URI
-    realQueryParams?: Record;
+    realQueryParams?: QueryDict;
     // the initial queryParams extracted from the hash-fragment of the URI
-    startingFragmentQueryParams?: Record;
+    startingFragmentQueryParams?: QueryDict;
     // called when we have completed a token login
     onTokenLoginCompleted?: () => void;
     // Represents the screen to display as a result of parsing the initial window.location
@@ -195,7 +195,7 @@ interface IProps { // TODO type things better
     // displayname, if any, to set on the device when logging in/registering.
     defaultDeviceDisplayName?: string;
     // A function that makes a registration URL
-    makeRegistrationUrl: (object) => string;
+    makeRegistrationUrl: (params: QueryDict) => string;
 }
 
 interface IState {
@@ -298,7 +298,7 @@ export default class MatrixChat extends React.PureComponent {
             if (this.screenAfterLogin.screen.startsWith("room/") && params['signurl'] && params['email']) {
                 // probably a threepid invite - try to store it
                 const roomId = this.screenAfterLogin.screen.substring("room/".length);
-                ThreepidInviteStore.instance.storeInvite(roomId, params as IThreepidInviteWireFormat);
+                ThreepidInviteStore.instance.storeInvite(roomId, params as unknown as IThreepidInviteWireFormat);
             }
         }
 
@@ -1952,7 +1952,7 @@ export default class MatrixChat extends React.PureComponent {
         this.setState({ serverConfig });
     };
 
-    private makeRegistrationUrl = (params: {[key: string]: string}) => {
+    private makeRegistrationUrl = (params: QueryDict) => {
         if (this.props.startingFragmentQueryParams.referrer) {
             params.referrer = this.props.startingFragmentQueryParams.referrer;
         }
@@ -2107,7 +2107,7 @@ export default class MatrixChat extends React.PureComponent {
                     onForgotPasswordClick={showPasswordReset ? this.onForgotPasswordClick : undefined}
                     onServerConfigChange={this.onServerConfigChange}
                     fragmentAfterLogin={fragmentAfterLogin}
-                    defaultUsername={this.props.startingFragmentQueryParams.defaultUsername}
+                    defaultUsername={this.props.startingFragmentQueryParams.defaultUsername as string}
                     {...this.getServerProperties()}
                 />
             );
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 1ddca61c22..7e98537180 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -39,7 +39,6 @@ import { MatrixCapabilities } from "matrix-widget-api";
 import RoomWidgetContextMenu from "../context_menus/WidgetContextMenu";
 import WidgetAvatar from "../avatars/WidgetAvatar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { urlSearchParamsToObject } from "../../../utils/UrlUtils";
 
 @replaceableComponent("views.elements.AppTile")
 export default class AppTile extends React.Component {

From 3b13eb7b44debf727c0ed7c75b42d0ea3c0a17b2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 16 Jul 2021 13:18:12 +0100
Subject: [PATCH 150/179] Prefer URL constructor over `url` dependency

---
 src/HtmlUtils.tsx        |  5 +----
 src/utils/HostingLink.js | 10 ++--------
 src/utils/UrlUtils.ts    |  4 ----
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index 5e83fdc2a0..a37b7f0ac9 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -25,7 +25,6 @@ import _linkifyElement from 'linkifyjs/element';
 import _linkifyString from 'linkifyjs/string';
 import classNames from 'classnames';
 import EMOJIBASE_REGEX from 'emojibase-regex';
-import url from 'url';
 import katex from 'katex';
 import { AllHtmlEntities } from 'html-entities';
 import { IContent } from 'matrix-js-sdk/src/models/event';
@@ -153,10 +152,8 @@ export function getHtmlText(insaneHtml: string): string {
  */
 export function isUrlPermitted(inputUrl: string): boolean {
     try {
-        const parsed = url.parse(inputUrl);
-        if (!parsed.protocol) return false;
         // URL parser protocol includes the trailing colon
-        return PERMITTED_URL_SCHEMES.includes(parsed.protocol.slice(0, -1));
+        return PERMITTED_URL_SCHEMES.includes(new URL(inputUrl).protocol.slice(0, -1));
     } catch (e) {
         return false;
     }
diff --git a/src/utils/HostingLink.js b/src/utils/HostingLink.js
index 7595bdd482..134e045ca2 100644
--- a/src/utils/HostingLink.js
+++ b/src/utils/HostingLink.js
@@ -14,11 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import url from 'url';
-
 import SdkConfig from '../SdkConfig';
 import { MatrixClientPeg } from '../MatrixClientPeg';
-import { urlSearchParamsToObject } from "./UrlUtils";
 
 export function getHostingLink(campaign) {
     const hostingLink = SdkConfig.get().hosting_signup_link;
@@ -28,11 +25,8 @@ export function getHostingLink(campaign) {
     if (MatrixClientPeg.get().getDomain() !== 'matrix.org') return null;
 
     try {
-        const hostingUrl = url.parse(hostingLink);
-        const params = urlSearchParamsToObject(new URLSearchParams(hostingUrl.query));
-        params.utm_campaign = campaign;
-        hostingUrl.search = undefined;
-        hostingUrl.query = params;
+        const hostingUrl = new URL(hostingLink);
+        hostingUrl.searchParams.set("utm_campaign", campaign);
         return hostingUrl.format();
     } catch (e) {
         return hostingLink;
diff --git a/src/utils/UrlUtils.ts b/src/utils/UrlUtils.ts
index 392b44c5e9..ba43340ff5 100644
--- a/src/utils/UrlUtils.ts
+++ b/src/utils/UrlUtils.ts
@@ -16,10 +16,6 @@ limitations under the License.
 
 import * as url from "url";
 
-export function urlSearchParamsToObject(params: URLSearchParams) {
-    return Object.fromEntries([...params.entries()]);
-}
-
 /**
  * If a url has no path component, etc. abbreviate it to just the hostname
  *

From 74bd7cad3f768be14abf57280887c4c463a19c66 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 16 Jul 2021 13:40:53 +0100
Subject: [PATCH 151/179] remove unrelated change

---
 src/utils/UrlUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/UrlUtils.ts b/src/utils/UrlUtils.ts
index ba43340ff5..6f441ff98e 100644
--- a/src/utils/UrlUtils.ts
+++ b/src/utils/UrlUtils.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as url from "url";
+import url from "url";
 
 /**
  * If a url has no path component, etc. abbreviate it to just the hostname

From 41d5865dd72e4a9fb9c67932d39531097ce909e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 16 Jul 2021 19:26:04 +0200
Subject: [PATCH 152/179] Cleanup _ReplyTile.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/rooms/_ReplyTile.scss | 142 ++++++++++++++--------------
 1 file changed, 69 insertions(+), 73 deletions(-)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index c8f76ee995..f3e204e415 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -15,10 +15,9 @@ limitations under the License.
 */
 
 .mx_ReplyTile {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    font-size: $font-14px;
     position: relative;
+    padding: 2px 0;
+    font-size: $font-14px;
     line-height: $font-16px;
 
     &.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
@@ -38,86 +37,83 @@ limitations under the License.
             display: none;
         }
     }
-}
 
-.mx_ReplyTile > a {
-    display: flex;
-    flex-direction: column;
-    text-decoration: none;
-    color: $primary-fg-color;
-}
-
-.mx_ReplyTile .mx_RedactedBody {
-    padding: 4px 0 2px 20px;
-
-    &::before {
-        height: 13px;
-        width: 13px;
-        top: 5px;
-    }
-}
-
-// We do reply size limiting with CSS to avoid duplicating the TextualBody component.
-.mx_ReplyTile .mx_EventTile_content {
-    $reply-lines: 2;
-    $line-height: $font-22px;
-
-    pointer-events: none;
-
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: $reply-lines;
-    line-height: $line-height;
-
-    .mx_EventTile_body.mx_EventTile_bigEmoji {
-        line-height: $line-height !important;
-        // Override the big emoji override
-        font-size: $font-14px !important;
+    > a {
+        display: flex;
+        flex-direction: column;
+        text-decoration: none;
+        color: $primary-fg-color;
     }
 
-    // Hide line numbers
-    .mx_EventTile_lineNumbers {
-        display: none;
+    .mx_RedactedBody {
+        padding: 4px 0 2px 20px;
+
+        &::before {
+            height: 13px;
+            width: 13px;
+            top: 5px;
+        }
     }
 
-    // Hack to cut content in 
     tags too
-    .mx_EventTile_pre_container > pre {
-        overflow: hidden;
+    // We do reply size limiting with CSS to avoid duplicating the TextualBody component.
+    .mx_EventTile_content {
+        $reply-lines: 2;
+        $line-height: $font-22px;
+
+        pointer-events: none;
+
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: $reply-lines;
-        padding: 4px;
+        line-height: $line-height;
+
+        .mx_EventTile_body.mx_EventTile_bigEmoji {
+            line-height: $line-height !important;
+            font-size: $font-14px !important; // Override the big emoji override
+        }
+
+        // Hide line numbers
+        .mx_EventTile_lineNumbers {
+            display: none;
+        }
+
+        // Hack to cut content in 
     tags too
+        .mx_EventTile_pre_container > pre {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: $reply-lines;
+            padding: 4px;
+        }
+
+        .markdown-body blockquote,
+        .markdown-body dl,
+        .markdown-body ol,
+        .markdown-body p,
+        .markdown-body pre,
+        .markdown-body table,
+        .markdown-body ul {
+            margin-bottom: 4px;
+        }
     }
 
-    .markdown-body blockquote,
-    .markdown-body dl,
-    .markdown-body ol,
-    .markdown-body p,
-    .markdown-body pre,
-    .markdown-body table,
-    .markdown-body ul {
-        margin-bottom: 4px;
+    &.mx_ReplyTile_info {
+        padding-top: 0;
+    }
+
+    .mx_SenderProfile {
+        font-size: $font-14px;
+        line-height: $font-17px;
+
+        display: inline-block; // anti-zalgo, with overflow hidden
+        padding: 0;
+        margin: 0;
+
+        // truncate long display names
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 }
-
-.mx_ReplyTile.mx_ReplyTile_info {
-    padding-top: 0;
-}
-
-.mx_ReplyTile .mx_SenderProfile {
-    color: $primary-fg-color;
-    font-size: $font-14px;
-    display: inline-block; /* anti-zalgo, with overflow hidden */
-    overflow: hidden;
-    cursor: pointer;
-    padding-left: 0; /* left gutter */
-    padding-bottom: 0;
-    padding-top: 0;
-    margin: 0;
-    line-height: $font-17px;
-    /* the next three lines, along with overflow hidden, truncate long display names */
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}

From 25e6a0e5705e27223b98a46fe0d84dd78412702a Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Fri, 16 Jul 2021 14:19:36 -0400
Subject: [PATCH 153/179] Match colors of room and user avatars in DMs

Signed-off-by: Robin Townsend 
---
 src/components/views/avatars/RoomAvatar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index 8ac8de8233..a07990c3bb 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -22,6 +22,7 @@ import ImageView from '../elements/ImageView';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
+import DMRoomMap from "../../../utils/DMRoomMap";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { IOOBData } from '../../../stores/ThreepidInviteStore';
@@ -131,11 +132,14 @@ export default class RoomAvatar extends React.Component {
         const { room, oobData, viewAvatarOnClick, onClick, ...otherProps } = this.props;
 
         const roomName = room ? room.name : oobData.name;
+        // If the room is a DM, we use the other user's ID for the color hash
+        // in order to match the room avatar with their avatar
+        const idName = room ? (DMRoomMap.shared().getUserIdForRoomId(room.roomId) ?? room.roomId) : null;
 
         return (
             

From eefadf6a4653d0acbe9858a8960b64d2e52ac196 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Fri, 16 Jul 2021 15:30:26 -0400
Subject: [PATCH 154/179] Fix tests

Signed-off-by: Robin Townsend 
---
 test/components/views/messages/TextualBody-test.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js
index fd11a9d46b..85a02aad7b 100644
--- a/test/components/views/messages/TextualBody-test.js
+++ b/test/components/views/messages/TextualBody-test.js
@@ -23,6 +23,7 @@ import { mkEvent, mkStubRoom } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import * as languageHandler from "../../../../src/languageHandler";
 import * as TestUtils from "../../../test-utils";
+import DMRoomMap from "../../../../src/utils/DMRoomMap";
 
 const _TextualBody = sdk.getComponent("views.messages.TextualBody");
 const TextualBody = TestUtils.wrapInMatrixClientContext(_TextualBody);
@@ -41,6 +42,7 @@ describe("", () => {
             isGuest: () => false,
             mxcUrlToHttp: (s) => s,
         };
+        DMRoomMap.makeShared();
 
         const ev = mkEvent({
             type: "m.room.message",
@@ -66,6 +68,7 @@ describe("", () => {
             isGuest: () => false,
             mxcUrlToHttp: (s) => s,
         };
+        DMRoomMap.makeShared();
 
         const ev = mkEvent({
             type: "m.room.message",
@@ -92,6 +95,7 @@ describe("", () => {
                 isGuest: () => false,
                 mxcUrlToHttp: (s) => s,
             };
+            DMRoomMap.makeShared();
         });
 
         it("simple message renders as expected", () => {
@@ -146,6 +150,7 @@ describe("", () => {
                 isGuest: () => false,
                 mxcUrlToHttp: (s) => s,
             };
+            DMRoomMap.makeShared();
         });
 
         it("italics, bold, underline and strikethrough render as expected", () => {
@@ -292,6 +297,7 @@ describe("", () => {
             isGuest: () => false,
             mxcUrlToHttp: (s) => s,
         };
+        DMRoomMap.makeShared();
 
         const ev = mkEvent({
             type: "m.room.message",

From f9b45677d60224e5f3876c447e1f2ab006b3f100 Mon Sep 17 00:00:00 2001
From: David Baker 
Date: Fri, 16 Jul 2021 22:27:31 +0100
Subject: [PATCH 155/179] Fix bug where 'other homeserver' would unfocus

It turns out the answer to this was not all that complex: we had
two nested