Merge branch 'matrix-org:develop' into Bubble-bericht

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -1,7 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations 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,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
+import React, { ChangeEvent, createRef, FormEvent, MouseEvent } from 'react';
+import classNames from 'classnames';
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -27,6 +25,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import Spinner from "../elements/Spinner";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { LocalisedPolicy, Policies } from '../../../Terms';
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -74,36 +73,72 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
  *    focus: set the input focus appropriately in the form.
  */
 
+enum AuthType {
+    Password = "m.login.password",
+    Recaptcha = "m.login.recaptcha",
+    Terms = "m.login.terms",
+    Email = "m.login.email.identity",
+    Msisdn = "m.login.msisdn",
+    Sso = "m.login.sso",
+    SsoUnstable = "org.matrix.login.sso",
+}
+
+/* eslint-disable camelcase */
+interface IAuthDict {
+    type?: AuthType;
+    // TODO: Remove `user` once servers support proper UIA
+    // See https://github.com/vector-im/element-web/issues/10312
+    user?: string;
+    identifier?: any;
+    password?: string;
+    response?: string;
+    // TODO: Remove `threepid_creds` once servers support proper UIA
+    // See https://github.com/vector-im/element-web/issues/10312
+    // See https://github.com/matrix-org/matrix-doc/issues/2220
+    threepid_creds?: any;
+    threepidCreds?: any;
+}
+/* eslint-enable camelcase */
+
 export const DEFAULT_PHASE = 0;
 
-@replaceableComponent("views.auth.PasswordAuthEntry")
-export class PasswordAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.password";
+interface IAuthEntryProps {
+    matrixClient: MatrixClient;
+    loginType: string;
+    authSessionId: string;
+    errorText?: string;
+    // Is the auth logic currently waiting for something to happen?
+    busy?: boolean;
+    onPhaseChange: (phase: number) => void;
+    submitAuthDict: (auth: IAuthDict) => void;
+}
 
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        errorText: PropTypes.string,
-        // is the auth logic currently waiting for something to
-        // happen?
-        busy: PropTypes.bool,
-        onPhaseChange: PropTypes.func.isRequired,
-    };
+interface IPasswordAuthEntryState {
+    password: string;
+}
+
+@replaceableComponent("views.auth.PasswordAuthEntry")
+export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswordAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Password;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            password: "",
+        };
+    }
 
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    state = {
-        password: "",
-    };
-
-    _onSubmit = e => {
+    private onSubmit = (e: FormEvent) => {
         e.preventDefault();
         if (this.props.busy) return;
 
         this.props.submitAuthDict({
-            type: PasswordAuthEntry.LOGIN_TYPE,
+            type: AuthType.Password,
             // TODO: Remove `user` once servers support proper UIA
             // See https://github.com/vector-im/element-web/issues/10312
             user: this.props.matrixClient.credentials.userId,
@@ -115,7 +150,7 @@ export class PasswordAuthEntry extends React.Component {
         });
     };
 
-    _onPasswordFieldChange = ev => {
+    private onPasswordFieldChange = (ev: ChangeEvent<HTMLInputElement>) => {
         // enable the submit button iff the password is non-empty
         this.setState({
             password: ev.target.value,
@@ -123,7 +158,7 @@ export class PasswordAuthEntry extends React.Component {
     };
 
     render() {
-        const passwordBoxClass = classnames({
+        const passwordBoxClass = classNames({
             "error": this.props.errorText,
         });
 
@@ -155,7 +190,7 @@ export class PasswordAuthEntry extends React.Component {
         return (
             <div>
                 <p>{ _t("Confirm your identity by entering your account password below.") }</p>
-                <form onSubmit={this._onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
+                <form onSubmit={this.onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
                     <Field
                         className={passwordBoxClass}
                         type="password"
@@ -163,7 +198,7 @@ export class PasswordAuthEntry extends React.Component {
                         label={_t('Password')}
                         autoFocus={true}
                         value={this.state.password}
-                        onChange={this._onPasswordFieldChange}
+                        onChange={this.onPasswordFieldChange}
                     />
                     <div className="mx_button_row">
                         { submitButtonOrSpinner }
@@ -175,26 +210,26 @@ export class PasswordAuthEntry extends React.Component {
     }
 }
 
-@replaceableComponent("views.auth.RecaptchaAuthEntry")
-export class RecaptchaAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.recaptcha";
-
-    static propTypes = {
-        submitAuthDict: PropTypes.func.isRequired,
-        stageParams: PropTypes.object.isRequired,
-        errorText: PropTypes.string,
-        busy: PropTypes.bool,
-        onPhaseChange: PropTypes.func.isRequired,
+/* eslint-disable camelcase */
+interface IRecaptchaAuthEntryProps extends IAuthEntryProps {
+    stageParams?: {
+        public_key?: string;
     };
+}
+/* eslint-enable camelcase */
+
+@replaceableComponent("views.auth.RecaptchaAuthEntry")
+export class RecaptchaAuthEntry extends React.Component<IRecaptchaAuthEntryProps> {
+    static LOGIN_TYPE = AuthType.Recaptcha;
 
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    _onCaptchaResponse = response => {
+    private onCaptchaResponse = (response: string) => {
         CountlyAnalytics.instance.track("onboarding_grecaptcha_submit");
         this.props.submitAuthDict({
-            type: RecaptchaAuthEntry.LOGIN_TYPE,
+            type: AuthType.Recaptcha,
             response: response,
         });
     };
@@ -230,7 +265,7 @@ export class RecaptchaAuthEntry extends React.Component {
         return (
             <div>
                 <CaptchaForm sitePublicKey={sitePublicKey}
-                    onCaptchaResponse={this._onCaptchaResponse}
+                    onCaptchaResponse={this.onCaptchaResponse}
                 />
                 { errorSection }
             </div>
@@ -238,18 +273,28 @@ export class RecaptchaAuthEntry extends React.Component {
     }
 }
 
-@replaceableComponent("views.auth.TermsAuthEntry")
-export class TermsAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.terms";
-
-    static propTypes = {
-        submitAuthDict: PropTypes.func.isRequired,
-        stageParams: PropTypes.object.isRequired,
-        errorText: PropTypes.string,
-        busy: PropTypes.bool,
-        showContinue: PropTypes.bool,
-        onPhaseChange: PropTypes.func.isRequired,
+interface ITermsAuthEntryProps extends IAuthEntryProps {
+    stageParams?: {
+        policies?: Policies;
     };
+    showContinue: boolean;
+}
+
+interface LocalisedPolicyWithId extends LocalisedPolicy {
+    id: string;
+}
+
+interface ITermsAuthEntryState {
+    policies: LocalisedPolicyWithId[];
+    toggledPolicies: {
+        [policy: string]: boolean;
+    };
+    errorText?: string;
+}
+
+@replaceableComponent("views.auth.TermsAuthEntry")
+export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITermsAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Terms;
 
     constructor(props) {
         super(props);
@@ -294,8 +339,11 @@ export class TermsAuthEntry extends React.Component {
 
             initToggles[policyId] = false;
 
-            langPolicy.id = policyId;
-            pickedPolicies.push(langPolicy);
+            pickedPolicies.push({
+                id: policyId,
+                name: langPolicy.name,
+                url: langPolicy.url,
+            });
         }
 
         this.state = {
@@ -311,11 +359,11 @@ export class TermsAuthEntry extends React.Component {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    tryContinue = () => {
-        this._trySubmit();
+    public tryContinue = () => {
+        this.trySubmit();
     };
 
-    _togglePolicy(policyId) {
+    private togglePolicy(policyId: string) {
         const newToggles = {};
         for (const policy of this.state.policies) {
             let checked = this.state.toggledPolicies[policy.id];
@@ -326,7 +374,7 @@ export class TermsAuthEntry extends React.Component {
         this.setState({"toggledPolicies": newToggles});
     }
 
-    _trySubmit = () => {
+    private trySubmit = () => {
         let allChecked = true;
         for (const policy of this.state.policies) {
             const checked = this.state.toggledPolicies[policy.id];
@@ -334,7 +382,7 @@ export class TermsAuthEntry extends React.Component {
         }
 
         if (allChecked) {
-            this.props.submitAuthDict({type: TermsAuthEntry.LOGIN_TYPE});
+            this.props.submitAuthDict({type: AuthType.Terms});
             CountlyAnalytics.instance.track("onboarding_terms_complete");
         } else {
             this.setState({errorText: _t("Please review and accept all of the homeserver's policies")});
@@ -356,7 +404,7 @@ export class TermsAuthEntry extends React.Component {
             checkboxes.push(
                 // XXX: replace with StyledCheckbox
                 <label key={"policy_checkbox_" + policy.id} className="mx_InteractiveAuthEntryComponents_termsPolicy">
-                    <input type="checkbox" onChange={() => this._togglePolicy(policy.id)} checked={checked} />
+                    <input type="checkbox" onChange={() => this.togglePolicy(policy.id)} checked={checked} />
                     <a href={policy.url} target="_blank" rel="noreferrer noopener">{ policy.name }</a>
                 </label>,
             );
@@ -375,7 +423,7 @@ export class TermsAuthEntry extends React.Component {
         if (this.props.showContinue !== false) {
             // XXX: button classes
             submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
-                onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
+                onClick={this.trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
         }
 
         return (
@@ -389,21 +437,18 @@ export class TermsAuthEntry extends React.Component {
     }
 }
 
-@replaceableComponent("views.auth.EmailIdentityAuthEntry")
-export class EmailIdentityAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.email.identity";
-
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        authSessionId: PropTypes.string.isRequired,
-        clientSecret: PropTypes.string.isRequired,
-        inputs: PropTypes.object.isRequired,
-        stageState: PropTypes.object.isRequired,
-        fail: PropTypes.func.isRequired,
-        setEmailSid: PropTypes.func.isRequired,
-        onPhaseChange: PropTypes.func.isRequired,
+interface IEmailIdentityAuthEntryProps extends IAuthEntryProps {
+    inputs?: {
+        emailAddress?: string;
     };
+    stageState?: {
+        emailSid: string;
+    };
+}
+
+@replaceableComponent("views.auth.EmailIdentityAuthEntry")
+export class EmailIdentityAuthEntry extends React.Component<IEmailIdentityAuthEntryProps> {
+    static LOGIN_TYPE = AuthType.Email;
 
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
@@ -427,7 +472,7 @@ export class EmailIdentityAuthEntry extends React.Component {
             return (
                 <div className="mx_InteractiveAuthEntryComponents_emailWrapper">
                     <p>{ _t("A confirmation email has been sent to %(emailAddress)s",
-                        { emailAddress: (sub) => <b>{ this.props.inputs.emailAddress }</b> },
+                        { emailAddress: <b>{ this.props.inputs.emailAddress }</b> },
                     ) }
                     </p>
                     <p>{ _t("Open the link in the email to continue registration.") }</p>
@@ -437,37 +482,44 @@ export class EmailIdentityAuthEntry extends React.Component {
     }
 }
 
+interface IMsisdnAuthEntryProps extends IAuthEntryProps {
+    inputs: {
+        phoneCountry: string;
+        phoneNumber: string;
+    };
+    clientSecret: string;
+    fail: (error: Error) => void;
+}
+
+interface IMsisdnAuthEntryState {
+    token: string;
+    requestingToken: boolean;
+    errorText: string;
+}
+
 @replaceableComponent("views.auth.MsisdnAuthEntry")
-export class MsisdnAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.msisdn";
+export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsisdnAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Msisdn;
 
-    static propTypes = {
-        inputs: PropTypes.shape({
-            phoneCountry: PropTypes.string,
-            phoneNumber: PropTypes.string,
-        }),
-        fail: PropTypes.func,
-        clientSecret: PropTypes.func,
-        submitAuthDict: PropTypes.func.isRequired,
-        matrixClient: PropTypes.object,
-        onPhaseChange: PropTypes.func.isRequired,
-    };
+    private submitUrl: string;
+    private sid: string;
+    private msisdn: string;
 
-    state = {
-        token: '',
-        requestingToken: false,
-    };
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            token: '',
+            requestingToken: false,
+            errorText: '',
+        };
+    }
 
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
 
-        this._submitUrl = null;
-        this._sid = null;
-        this._msisdn = null;
-        this._tokenBox = null;
-
         this.setState({requestingToken: true});
-        this._requestMsisdnToken().catch((e) => {
+        this.requestMsisdnToken().catch((e) => {
             this.props.fail(e);
         }).finally(() => {
             this.setState({requestingToken: false});
@@ -477,26 +529,26 @@ export class MsisdnAuthEntry extends React.Component {
     /*
      * Requests a verification token by SMS.
      */
-    _requestMsisdnToken() {
+    private requestMsisdnToken(): Promise<void> {
         return this.props.matrixClient.requestRegisterMsisdnToken(
             this.props.inputs.phoneCountry,
             this.props.inputs.phoneNumber,
             this.props.clientSecret,
             1, // TODO: Multiple send attempts?
         ).then((result) => {
-            this._submitUrl = result.submit_url;
-            this._sid = result.sid;
-            this._msisdn = result.msisdn;
+            this.submitUrl = result.submit_url;
+            this.sid = result.sid;
+            this.msisdn = result.msisdn;
         });
     }
 
-    _onTokenChange = e => {
+    private onTokenChange = (e: ChangeEvent<HTMLInputElement>) => {
         this.setState({
             token: e.target.value,
         });
     };
 
-    _onFormSubmit = async e => {
+    private onFormSubmit = async (e: FormEvent) => {
         e.preventDefault();
         if (this.state.token == '') return;
 
@@ -506,20 +558,20 @@ export class MsisdnAuthEntry extends React.Component {
 
         try {
             let result;
-            if (this._submitUrl) {
+            if (this.submitUrl) {
                 result = await this.props.matrixClient.submitMsisdnTokenOtherUrl(
-                    this._submitUrl, this._sid, this.props.clientSecret, this.state.token,
+                    this.submitUrl, this.sid, this.props.clientSecret, this.state.token,
                 );
             } else {
                 throw new Error("The registration with MSISDN flow is misconfigured");
             }
             if (result.success) {
                 const creds = {
-                    sid: this._sid,
+                    sid: this.sid,
                     client_secret: this.props.clientSecret,
                 };
                 this.props.submitAuthDict({
-                    type: MsisdnAuthEntry.LOGIN_TYPE,
+                    type: AuthType.Msisdn,
                     // TODO: Remove `threepid_creds` once servers support proper UIA
                     // See https://github.com/vector-im/element-web/issues/10312
                     // See https://github.com/matrix-org/matrix-doc/issues/2220
@@ -543,7 +595,7 @@ export class MsisdnAuthEntry extends React.Component {
             return <Loader />;
         } else {
             const enableSubmit = Boolean(this.state.token);
-            const submitClasses = classnames({
+            const submitClasses = classNames({
                 mx_InteractiveAuthEntryComponents_msisdnSubmit: true,
                 mx_GeneralButton: true,
             });
@@ -558,16 +610,16 @@ export class MsisdnAuthEntry extends React.Component {
             return (
                 <div>
                     <p>{ _t("A text message has been sent to %(msisdn)s",
-                        { msisdn: <i>{ this._msisdn }</i> },
+                        { msisdn: <i>{ this.msisdn }</i> },
                     ) }
                     </p>
                     <p>{ _t("Please enter the code it contains:") }</p>
                     <div className="mx_InteractiveAuthEntryComponents_msisdnWrapper">
-                        <form onSubmit={this._onFormSubmit}>
+                        <form onSubmit={this.onFormSubmit}>
                             <input type="text"
                                 className="mx_InteractiveAuthEntryComponents_msisdnEntry"
                                 value={this.state.token}
-                                onChange={this._onTokenChange}
+                                onChange={this.onTokenChange}
                                 aria-label={ _t("Code")}
                             />
                             <br />
@@ -584,40 +636,40 @@ export class MsisdnAuthEntry extends React.Component {
     }
 }
 
-@replaceableComponent("views.auth.SSOAuthEntry")
-export class SSOAuthEntry extends React.Component {
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        authSessionId: PropTypes.string.isRequired,
-        loginType: PropTypes.string.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        errorText: PropTypes.string,
-        onPhaseChange: PropTypes.func.isRequired,
-        continueText: PropTypes.string,
-        continueKind: PropTypes.string,
-        onCancel: PropTypes.func,
-    };
+interface ISSOAuthEntryProps extends IAuthEntryProps {
+    continueText?: string;
+    continueKind?: string;
+    onCancel?: () => void;
+}
 
-    static LOGIN_TYPE = "m.login.sso";
-    static UNSTABLE_LOGIN_TYPE = "org.matrix.login.sso";
+interface ISSOAuthEntryState {
+    phase: number;
+    attemptFailed: boolean;
+}
+
+@replaceableComponent("views.auth.SSOAuthEntry")
+export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Sso;
+    static UNSTABLE_LOGIN_TYPE = AuthType.SsoUnstable;
 
     static PHASE_PREAUTH = 1; // button to start SSO
     static PHASE_POSTAUTH = 2; // button to confirm SSO completed
 
-    _ssoUrl: string;
+    private ssoUrl: string;
+    private popupWindow: Window;
 
     constructor(props) {
         super(props);
 
         // We actually send the user through fallback auth so we don't have to
         // deal with a redirect back to us, losing application context.
-        this._ssoUrl = props.matrixClient.getFallbackAuthUrl(
+        this.ssoUrl = props.matrixClient.getFallbackAuthUrl(
             this.props.loginType,
             this.props.authSessionId,
         );
 
-        this._popupWindow = null;
-        window.addEventListener("message", this._onReceiveMessage);
+        this.popupWindow = null;
+        window.addEventListener("message", this.onReceiveMessage);
 
         this.state = {
             phase: SSOAuthEntry.PHASE_PREAUTH,
@@ -625,44 +677,44 @@ export class SSOAuthEntry extends React.Component {
         };
     }
 
-    componentDidMount(): void {
+    componentDidMount() {
         this.props.onPhaseChange(SSOAuthEntry.PHASE_PREAUTH);
     }
 
     componentWillUnmount() {
-        window.removeEventListener("message", this._onReceiveMessage);
-        if (this._popupWindow) {
-            this._popupWindow.close();
-            this._popupWindow = null;
+        window.removeEventListener("message", this.onReceiveMessage);
+        if (this.popupWindow) {
+            this.popupWindow.close();
+            this.popupWindow = null;
         }
     }
 
-    attemptFailed = () => {
+    public attemptFailed = () => {
         this.setState({
             attemptFailed: true,
         });
     };
 
-    _onReceiveMessage = event => {
+    private onReceiveMessage = (event: MessageEvent) => {
         if (event.data === "authDone" && event.origin === this.props.matrixClient.getHomeserverUrl()) {
-            if (this._popupWindow) {
-                this._popupWindow.close();
-                this._popupWindow = null;
+            if (this.popupWindow) {
+                this.popupWindow.close();
+                this.popupWindow = null;
             }
         }
     };
 
-    onStartAuthClick = () => {
+    private onStartAuthClick = () => {
         // Note: We don't use PlatformPeg's startSsoAuth functions because we almost
         // certainly will need to open the thing in a new tab to avoid losing application
         // context.
 
-        this._popupWindow = window.open(this._ssoUrl, "_blank");
+        this.popupWindow = window.open(this.ssoUrl, "_blank");
         this.setState({phase: SSOAuthEntry.PHASE_POSTAUTH});
         this.props.onPhaseChange(SSOAuthEntry.PHASE_POSTAUTH);
     };
 
-    onConfirmClick = () => {
+    private onConfirmClick = () => {
         this.props.submitAuthDict({});
     };
 
@@ -716,46 +768,37 @@ export class SSOAuthEntry extends React.Component {
 }
 
 @replaceableComponent("views.auth.FallbackAuthEntry")
-export class FallbackAuthEntry extends React.Component {
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        authSessionId: PropTypes.string.isRequired,
-        loginType: PropTypes.string.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        errorText: PropTypes.string,
-        onPhaseChange: PropTypes.func.isRequired,
-    };
+export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
+    private popupWindow: Window;
+    private fallbackButton = createRef<HTMLAnchorElement>();
 
     constructor(props) {
         super(props);
 
         // we have to make the user click a button, as browsers will block
         // the popup if we open it immediately.
-        this._popupWindow = null;
-        window.addEventListener("message", this._onReceiveMessage);
-
-        this._fallbackButton = createRef();
+        this.popupWindow = null;
+        window.addEventListener("message", this.onReceiveMessage);
     }
 
-
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
     componentWillUnmount() {
-        window.removeEventListener("message", this._onReceiveMessage);
-        if (this._popupWindow) {
-            this._popupWindow.close();
+        window.removeEventListener("message", this.onReceiveMessage);
+        if (this.popupWindow) {
+            this.popupWindow.close();
         }
     }
 
-    focus = () => {
-        if (this._fallbackButton.current) {
-            this._fallbackButton.current.focus();
+    public focus = () => {
+        if (this.fallbackButton.current) {
+            this.fallbackButton.current.focus();
         }
     };
 
-    _onShowFallbackClick = e => {
+    private onShowFallbackClick = (e: MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -763,10 +806,10 @@ export class FallbackAuthEntry extends React.Component {
             this.props.loginType,
             this.props.authSessionId,
         );
-        this._popupWindow = window.open(url, "_blank");
+        this.popupWindow = window.open(url, "_blank");
     };
 
-    _onReceiveMessage = event => {
+    private onReceiveMessage = (event: MessageEvent) => {
         if (
             event.data === "authDone" &&
             event.origin === this.props.matrixClient.getHomeserverUrl()
@@ -786,27 +829,31 @@ export class FallbackAuthEntry extends React.Component {
         }
         return (
             <div>
-                <a href="" ref={this._fallbackButton} onClick={this._onShowFallbackClick}>{ _t("Start authentication") }</a>
+                <a href="" ref={this.fallbackButton} onClick={this.onShowFallbackClick}>{
+                    _t("Start authentication")
+                }</a>
                 {errorSection}
             </div>
         );
     }
 }
 
-const AuthEntryComponents = [
-    PasswordAuthEntry,
-    RecaptchaAuthEntry,
-    EmailIdentityAuthEntry,
-    MsisdnAuthEntry,
-    TermsAuthEntry,
-    SSOAuthEntry,
-];
-
-export default function getEntryComponentForLoginType(loginType) {
-    for (const c of AuthEntryComponents) {
-        if (c.LOGIN_TYPE === loginType || c.UNSTABLE_LOGIN_TYPE === loginType) {
-            return c;
-        }
+export default function getEntryComponentForLoginType(loginType: AuthType): typeof React.Component {
+    switch (loginType) {
+        case AuthType.Password:
+            return PasswordAuthEntry;
+        case AuthType.Recaptcha:
+            return RecaptchaAuthEntry;
+        case AuthType.Email:
+            return EmailIdentityAuthEntry;
+        case AuthType.Msisdn:
+            return MsisdnAuthEntry;
+        case AuthType.Terms:
+            return TermsAuthEntry;
+        case AuthType.Sso:
+        case AuthType.SsoUnstable:
+            return SSOAuthEntry;
+        default:
+            return FallbackAuthEntry;
     }
-    return FallbackAuthEntry;
 }

src/components/views/avatars/BaseAvatar.tsx

@@ -22,6 +22,7 @@ import classNames from 'classnames';
 import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
+import RoomContext from "../../../contexts/RoomContext";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import {toPx} from "../../../utils/units";
@@ -44,12 +45,12 @@ interface IProps {
     className?: string;
 }
 
-const calculateUrls = (url, urls) => {
+const calculateUrls = (url, urls, lowBandwidth) => {
     // work out the full set of urls to try to load. This is formed like so:
     // imageUrls: [ props.url, ...props.urls ]
 
     let _urls = [];
-    if (!SettingsStore.getValue("lowBandwidth")) {
+    if (!lowBandwidth) {
         _urls = urls || [];
 
         if (url) {
@@ -63,7 +64,13 @@ const calculateUrls = (url, urls) => {
 };
 
 const useImageUrl = ({url, urls}): [string, () => void] => {
-    const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls));
+    // Since this is a hot code path and the settings store can be slow, we
+    // use the cached lowBandwidth value from the room context if it exists
+    const roomContext = useContext(RoomContext);
+    const lowBandwidth = roomContext ?
+        roomContext.lowBandwidth : SettingsStore.getValue("lowBandwidth");
+
+    const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls, lowBandwidth));
     const [urlsIndex, setIndex] = useState<number>(0);
 
     const onError = useCallback(() => {
@@ -71,7 +78,7 @@ const useImageUrl = ({url, urls}): [string, () => void] => {
     }, []);
 
     useEffect(() => {
-        setUrls(calculateUrls(url, urls));
+        setUrls(calculateUrls(url, urls, lowBandwidth));
         setIndex(0);
     }, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -179,7 +186,7 @@ const BaseAvatar = (props: IProps) => {
                     width: toPx(width),
                     height: toPx(height),
                 }}
-                title={title} alt=""
+                title={title} alt={_t("Avatar")}
                 inputRef={inputRef}
                 {...otherProps} />
         );

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -20,7 +20,6 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { User } from "matrix-js-sdk/src/models/user";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-import { TagID } from '../../../stores/room-list/models';
 import RoomAvatar from "./RoomAvatar";
 import NotificationBadge from '../rooms/NotificationBadge';
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
@@ -35,7 +34,6 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 interface IProps {
     room: Room;
     avatarSize: number;
-    tag: TagID;
     displayBadge?: boolean;
     forceCount?: boolean;
     oobData?: object;
@@ -121,7 +119,10 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         if (this.props.room.roomId !== room.roomId) return;
 
         if (ev.getType() === 'm.room.join_rules' || ev.getType() === 'm.room.member') {
-            this.setState({icon: this.calculateIcon()});
+            const newIcon = this.calculateIcon();
+            if (newIcon !== this.state.icon) {
+                this.setState({icon: newIcon});
+            }
         }
     };
 

src/components/views/beta/BetaCard.tsx

@@ -0,0 +1,108 @@
+/*
+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 from "react";
+import classNames from "classnames";
+
+import {_t} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import SettingsStore from "../../../settings/SettingsStore";
+import {SettingLevel} from "../../../settings/SettingLevel";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import Modal from "../../../Modal";
+import BetaFeedbackDialog from "../dialogs/BetaFeedbackDialog";
+import SdkConfig from "../../../SdkConfig";
+
+interface IProps {
+    title?: string;
+    featureId: string;
+}
+
+export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
+    if (onClick) {
+        return <TextWithTooltip
+            class={classNames("mx_BetaCard_betaPill", {
+                mx_BetaCard_betaPill_clickable: !!onClick,
+            })}
+            tooltip={<div>
+                <div className="mx_Tooltip_title">
+                    { _t("Spaces is a beta feature") }
+                </div>
+                <div className="mx_Tooltip_sub">
+                    { _t("Tap for more info") }
+                </div>
+            </div>}
+            onClick={onClick}
+            tooltipProps={{ yOffset: -10 }}
+        >
+            { _t("Beta") }
+        </TextWithTooltip>;
+    }
+
+    return <span
+        className={classNames("mx_BetaCard_betaPill", {
+            mx_BetaCard_betaPill_clickable: !!onClick,
+        })}
+        onClick={onClick}
+    >
+        { _t("Beta") }
+    </span>;
+};
+
+const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
+    const info = SettingsStore.getBetaInfo(featureId);
+    if (!info) return null; // Beta is invalid/disabled
+
+    const { title, caption, disclaimer, image, feedbackLabel, feedbackSubheading } = info;
+    const value = SettingsStore.getValue(featureId);
+
+    let feedbackButton;
+    if (value && feedbackLabel && feedbackSubheading && SdkConfig.get().bug_report_endpoint_url) {
+        feedbackButton = <AccessibleButton
+            onClick={() => {
+                Modal.createTrackedDialog("Beta Feedback", featureId, BetaFeedbackDialog, { featureId });
+            }}
+            kind="primary"
+        >
+            { _t("Feedback") }
+        </AccessibleButton>;
+    }
+
+    return <div className="mx_BetaCard">
+        <div>
+            <h3 className="mx_BetaCard_title">
+                { titleOverride || _t(title) }
+                <BetaPill />
+            </h3>
+            <span className="mx_BetaCard_caption">{ _t(caption) }</span>
+            <div>
+                { feedbackButton }
+                <AccessibleButton
+                    onClick={() => SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
+                    kind={feedbackButton ? "primary_outline" : "primary"}
+                >
+                    { value ? _t("Leave the beta") : _t("Join the beta") }
+                </AccessibleButton>
+            </div>
+            { disclaimer && <div className="mx_BetaCard_disclaimer">
+                { disclaimer(value) }
+            </div> }
+        </div>
+        <img src={image} alt="" />
+    </div>;
+};
+
+export default BetaCard;

src/components/views/context_menus/MessageContextMenu.js

@@ -17,9 +17,9 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {EventStatus} from 'matrix-js-sdk/src/models/event';
+import { EventStatus } from 'matrix-js-sdk/src/models/event';
 
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -28,9 +28,11 @@ import Resend from '../../../Resend';
 import SettingsStore from '../../../settings/SettingsStore';
 import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
-import {MenuItem} from "../../structures/ContextMenu";
-import {EventType} from "matrix-js-sdk/src/@types/event";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MenuItem } from "../../structures/ContextMenu";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard";
+import ForwardDialog from "../dialogs/ForwardDialog";
 
 export function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -78,9 +80,11 @@ export default class MessageContextMenu extends React.Component {
 
         // We explicitly decline to show the redact option on ACL events as it has a potential
         // to obliterate the room - https://github.com/matrix-org/synapse/issues/4042
+        // Similarly for encryption events, since redacting them "breaks everything"
         const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId)
-            && this.props.mxEvent.getType() !== EventType.RoomServerAcl;
-        let canPin = room.currentState.mayClientSendStateEvent('m.room.pinned_events', cli);
+            && this.props.mxEvent.getType() !== EventType.RoomServerAcl
+            && this.props.mxEvent.getType() !== EventType.RoomEncryption;
+        let canPin = room.currentState.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli);
 
         // HACK: Intentionally say we can't pin if the user doesn't want to use the functionality
         if (!SettingsStore.getValue("feature_pinning")) canPin = false;
@@ -90,7 +94,7 @@ export default class MessageContextMenu extends React.Component {
 
     _isPinned() {
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-        const pinnedEvent = room.currentState.getStateEvents('m.room.pinned_events', '');
+        const pinnedEvent = room.currentState.getStateEvents(EventType.RoomPinnedEvents, '');
         if (!pinnedEvent) return false;
         const content = pinnedEvent.getContent();
         return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
@@ -154,34 +158,32 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onForwardClick = () => {
-        if (this.props.onCloseDialog) this.props.onCloseDialog();
-        dis.dispatch({
-            action: 'forward_event',
+        Modal.createTrackedDialog('Forward Message', '', ForwardDialog, {
+            matrixClient: MatrixClientPeg.get(),
             event: this.props.mxEvent,
+            permalinkCreator: this.props.permalinkCreator,
         });
         this.closeMenu();
     };
 
     onPinClick = () => {
-        MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '')
-            .catch((e) => {
-                // Intercept the Event Not Found error and fall through the promise chain with no event.
-                if (e.errcode === "M_NOT_FOUND") return null;
-                throw e;
-            })
-            .then((event) => {
-                const eventIds = (event ? event.pinned : []) || [];
-                if (!eventIds.includes(this.props.mxEvent.getId())) {
-                    // Not pinned - add
-                    eventIds.push(this.props.mxEvent.getId());
-                } else {
-                    // Pinned - remove
-                    eventIds.splice(eventIds.indexOf(this.props.mxEvent.getId()), 1);
-                }
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.mxEvent.getRoomId());
+        const eventId = this.props.mxEvent.getId();
 
-                const cli = MatrixClientPeg.get();
-                cli.sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
+        const pinnedIds = room?.currentState?.getStateEvents(EventType.RoomPinnedEvents, "")?.pinned || [];
+        if (pinnedIds.includes(eventId)) {
+            pinnedIds.splice(pinnedIds.indexOf(eventId), 1);
+        } else {
+            pinnedIds.push(eventId);
+            cli.setRoomAccountData(room.roomId, ReadPinsEventId, {
+                event_ids: [
+                    ...room.getAccountData(ReadPinsEventId)?.getContent()?.event_ids,
+                    eventId,
+                ],
             });
+        }
+        cli.sendStateEvent(this.props.mxEvent.getRoomId(), EventType.RoomPinnedEvents, { pinned: pinnedIds }, "");
         this.closeMenu();
     };
 

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -40,6 +40,8 @@ interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
     showUnpin?: boolean;
     // override delete handler
     onDeleteClick?(): void;
+    // override edit handler
+    onEditClick?(): void;
 }
 
 const WidgetContextMenu: React.FC<IProps> = ({
@@ -47,6 +49,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
     app,
     userWidget,
     onDeleteClick,
+    onEditClick,
     showUnpin,
     ...props
 }) => {
@@ -89,12 +92,16 @@ const WidgetContextMenu: React.FC<IProps> = ({
 
     let editButton;
     if (canModify && WidgetUtils.isManagedByManager(app)) {
-        const onEditClick = () => {
-            WidgetUtils.editWidget(room, app);
+        const _onEditClick = () => {
+            if (onEditClick) {
+                onEditClick();
+            } else {
+                WidgetUtils.editWidget(room, app);
+            }
             onFinished();
         };
 
-        editButton = <IconizedContextMenuOption onClick={onEditClick} label={_t("Edit")} />;
+        editButton = <IconizedContextMenuOption onClick={_onEditClick} label={_t("Edit")} />;
     }
 
     let snapshotButton;
@@ -116,24 +123,29 @@ const WidgetContextMenu: React.FC<IProps> = ({
 
     let deleteButton;
     if (onDeleteClick || canModify) {
-        const onDeleteClickDefault = () => {
-            // Show delete confirmation dialog
-            Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
-                title: _t("Delete Widget"),
-                description: _t(
-                    "Deleting a widget removes it for all users in this room." +
-                    " Are you sure you want to delete this widget?"),
-                button: _t("Delete widget"),
-                onFinished: (confirmed) => {
-                    if (!confirmed) return;
-                    WidgetUtils.setRoomWidget(roomId, app.id);
-                },
-            });
+        const _onDeleteClick = () => {
+            if (onDeleteClick) {
+                onDeleteClick();
+            } else {
+                // Show delete confirmation dialog
+                Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
+                    title: _t("Delete Widget"),
+                    description: _t(
+                        "Deleting a widget removes it for all users in this room." +
+                        " Are you sure you want to delete this widget?"),
+                    button: _t("Delete widget"),
+                    onFinished: (confirmed) => {
+                        if (!confirmed) return;
+                        WidgetUtils.setRoomWidget(roomId, app.id);
+                    },
+                });
+            }
+
             onFinished();
         };
 
         deleteButton = <IconizedContextMenuOption
-            onClick={onDeleteClick || onDeleteClickDefault}
+            onClick={_onDeleteClick}
             label={userWidget ? _t("Remove") : _t("Remove for everyone")}
         />;
     }

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext, useMemo, useState} from "react";
+import React, {ReactNode, useContext, useMemo, useState} from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClient} from "matrix-js-sdk/src/client";
@@ -36,6 +36,9 @@ import StyledCheckbox from "../elements/StyledCheckbox";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import ProgressBar from "../elements/ProgressBar";
+import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import QueryMatcher from "../../../autocomplete/QueryMatcher";
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -45,7 +48,10 @@ interface IProps extends IDialogProps {
 
 const Entry = ({ room, checked, onChange }) => {
     return <label className="mx_AddExistingToSpace_entry">
-        <RoomAvatar room={room} height={32} width={32} />
+        { room?.isSpaceRoom()
+            ? <RoomAvatar room={room} height={32} width={32} />
+            : <DecoratedRoomAvatar room={room} avatarSize={32} />
+        }
         <span className="mx_AddExistingToSpace_entry_name">{ room.name }</span>
         <StyledCheckbox
             onChange={onChange ? (e) => onChange(e.target.checked) : null}
@@ -57,150 +63,59 @@ const Entry = ({ room, checked, onChange }) => {
 
 interface IAddExistingToSpaceProps {
     space: Room;
-    selected: Set<Room>;
-    onChange(checked: boolean, room: Room): void;
+    footerPrompt?: ReactNode;
+    emptySelectionButton?: ReactNode;
+    onFinished(added: boolean): void;
 }
 
-export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({ space, selected, onChange }) => {
+export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
+    space,
+    footerPrompt,
+    emptySelectionButton,
+    onFinished,
+}) => {
     const cli = useContext(MatrixClientContext);
-    const visibleRooms = useMemo(() => sortRooms(cli.getVisibleRooms()), [cli]);
+    const visibleRooms = useMemo(() => cli.getVisibleRooms().filter(r => r.getMyMembership() === "join"), [cli]);
 
-    const [query, setQuery] = useState("");
-    const lcQuery = query.toLowerCase();
-
-    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
-    const existingSubspacesSet = new Set(existingSubspaces);
-    const existingRoomsSet = new Set(SpaceStore.instance.getChildRooms(space.roomId));
-
-    const joinRule = space.getJoinRule();
-    const [spaces, rooms, dms] = visibleRooms.reduce((arr, room) => {
-        if (room.getMyMembership() !== "join") return arr;
-        if (!room.name.toLowerCase().includes(lcQuery)) return arr;
-
-        if (room.isSpaceRoom()) {
-            if (room !== space && !existingSubspacesSet.has(room)) {
-                arr[0].push(room);
-            }
-        } else if (!existingRoomsSet.has(room)) {
-            if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
-                arr[1].push(room);
-            } else if (joinRule !== "public") {
-                // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones.
-                arr[2].push(room);
-            }
-        }
-        return arr;
-    }, [[], [], []]);
-
-    return <div className="mx_AddExistingToSpace">
-        <SearchBox
-            className="mx_textinput_icon mx_textinput_search"
-            placeholder={ _t("Filter your rooms and spaces") }
-            onSearch={setQuery}
-            autoComplete={true}
-            autoFocus={true}
-        />
-        <AutoHideScrollbar className="mx_AddExistingToSpace_content" id="mx_AddExistingToSpace">
-            { rooms.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section">
-                    <h3>{ _t("Rooms") }</h3>
-                    { rooms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selected.has(room)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, room);
-                            } : null}
-                        />;
-                    }) }
-                </div>
-            ) : undefined }
-
-            { spaces.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section mx_AddExistingToSpace_section_spaces">
-                    <h3>{ _t("Spaces") }</h3>
-                    { spaces.map(space => {
-                        return <Entry
-                            key={space.roomId}
-                            room={space}
-                            checked={selected.has(space)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, space);
-                            } : null}
-                        />;
-                    }) }
-                </div>
-            ) : null }
-
-            { dms.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section">
-                    <h3>{ _t("Direct Messages") }</h3>
-                    { dms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selected.has(room)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, room);
-                            } : null}
-                        />;
-                    }) }
-                </div>
-            ) : null }
-
-            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpace_noResults">
-                { _t("No results") }
-            </span> : undefined }
-        </AutoHideScrollbar>
-    </div>;
-};
-
-const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
-    const [selectedSpace, setSelectedSpace] = useState(space);
-    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
     const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
-
     const [progress, setProgress] = useState<number>(null);
     const [error, setError] = useState<Error>(null);
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase().trim();
 
-    let spaceOptionSection;
-    if (existingSubspaces.length > 0) {
-        const options = [space, ...existingSubspaces].map((space) => {
-            const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
-                mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
+    const existingSubspacesSet = useMemo(() => new Set(SpaceStore.instance.getChildSpaces(space.roomId)), [space]);
+    const existingRoomsSet = useMemo(() => new Set(SpaceStore.instance.getChildRooms(space.roomId)), [space]);
+
+    const [spaces, rooms, dms] = useMemo(() => {
+        let rooms = visibleRooms;
+
+        if (lcQuery) {
+            const matcher = new QueryMatcher<Room>(visibleRooms, {
+                keys: ["name"],
+                funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
+                shouldMatchWordsOnly: false,
             });
-            return <div key={space.roomId} className={classes}>
-                <RoomAvatar room={space} width={24} height={24} />
-                { space.name || getDisplayAliasForRoom(space) || space.roomId }
-            </div>;
-        });
 
-        spaceOptionSection = (
-            <Dropdown
-                id="mx_SpaceSelectDropdown"
-                onOptionChange={(key: string) => {
-                    setSelectedSpace(existingSubspaces.find(space => space.roomId === key) || space);
-                }}
-                value={selectedSpace.roomId}
-                label={_t("Space selection")}
-            >
-                { options }
-            </Dropdown>
-        );
-    } else {
-        spaceOptionSection = <div className="mx_AddExistingToSpaceDialog_onlySpace">
-            { space.name || getDisplayAliasForRoom(space) || space.roomId }
-        </div>;
-    }
+            rooms = matcher.match(lcQuery);
+        }
 
-    const title = <React.Fragment>
-        <RoomAvatar room={selectedSpace} height={40} width={40} />
-        <div>
-            <h1>{ _t("Add existing rooms") }</h1>
-            { spaceOptionSection }
-        </div>
-    </React.Fragment>;
+        const joinRule = space.getJoinRule();
+        return sortRooms(rooms).reduce((arr, room) => {
+            if (room.isSpaceRoom()) {
+                if (room !== space && !existingSubspacesSet.has(room)) {
+                    arr[0].push(room);
+                }
+            } else if (!existingRoomsSet.has(room)) {
+                if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
+                    arr[1].push(room);
+                } else if (joinRule !== "public") {
+                    // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones.
+                    arr[2].push(room);
+                }
+            }
+            return arr;
+        }, [[], [], []]);
+    }, [visibleRooms, space, lcQuery, existingRoomsSet, existingSubspacesSet]);
 
     const addRooms = async () => {
         setError(null);
@@ -264,20 +179,145 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
             </div>
         </span>;
     } else {
+        let button = emptySelectionButton;
+        if (!button || selectedToAdd.size > 0) {
+            button = <AccessibleButton kind="primary" disabled={selectedToAdd.size < 1} onClick={addRooms}>
+                { _t("Add") }
+            </AccessibleButton>;
+        }
+
         footer = <>
             <span>
-                <div>{ _t("Want to add a new room instead?") }</div>
-                <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
-                    { _t("Create a new room") }
-                </AccessibleButton>
+                { footerPrompt }
             </span>
 
-            <AccessibleButton kind="primary" disabled={selectedToAdd.size < 1} onClick={addRooms}>
-                { _t("Add") }
-            </AccessibleButton>
+            { button }
         </>;
     }
 
+    const onChange = !busy && !error ? (checked, room) => {
+        if (checked) {
+            selectedToAdd.add(room);
+        } else {
+            selectedToAdd.delete(room);
+        }
+        setSelectedToAdd(new Set(selectedToAdd));
+    } : null;
+
+    return <div className="mx_AddExistingToSpace">
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={ _t("Filter your rooms and spaces") }
+            onSearch={setQuery}
+            autoComplete={true}
+            autoFocus={true}
+        />
+        <AutoHideScrollbar className="mx_AddExistingToSpace_content">
+            { rooms.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section">
+                    <h3>{ _t("Rooms") }</h3>
+                    { rooms.map(room => {
+                        return <Entry
+                            key={room.roomId}
+                            room={room}
+                            checked={selectedToAdd.has(room)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : undefined }
+
+            { spaces.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section mx_AddExistingToSpace_section_spaces">
+                    <h3>{ _t("Spaces") }</h3>
+                    <div className="mx_AddExistingToSpace_section_experimental">
+                        <div>{ _t("Feeling experimental?") }</div>
+                        <div>{ _t("You can add existing spaces to a space.") }</div>
+                    </div>
+                    { spaces.map(space => {
+                        return <Entry
+                            key={space.roomId}
+                            room={space}
+                            checked={selectedToAdd.has(space)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, space);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { dms.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section">
+                    <h3>{ _t("Direct Messages") }</h3>
+                    { dms.map(room => {
+                        return <Entry
+                            key={room.roomId}
+                            room={room}
+                            checked={selectedToAdd.has(room)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpace_noResults">
+                { _t("No results") }
+            </span> : undefined }
+        </AutoHideScrollbar>
+
+        <div className="mx_AddExistingToSpace_footer">
+            { footer }
+        </div>
+    </div>;
+};
+
+const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
+    const [selectedSpace, setSelectedSpace] = useState(space);
+    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
+
+    let spaceOptionSection;
+    if (existingSubspaces.length > 0) {
+        const options = [space, ...existingSubspaces].map((space) => {
+            const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
+                mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
+            });
+            return <div key={space.roomId} className={classes}>
+                <RoomAvatar room={space} width={24} height={24} />
+                { space.name || getDisplayAliasForRoom(space) || space.roomId }
+            </div>;
+        });
+
+        spaceOptionSection = (
+            <Dropdown
+                id="mx_SpaceSelectDropdown"
+                onOptionChange={(key: string) => {
+                    setSelectedSpace(existingSubspaces.find(space => space.roomId === key) || space);
+                }}
+                value={selectedSpace.roomId}
+                label={_t("Space selection")}
+            >
+                { options }
+            </Dropdown>
+        );
+    } else {
+        spaceOptionSection = <div className="mx_AddExistingToSpaceDialog_onlySpace">
+            { space.name || getDisplayAliasForRoom(space) || space.roomId }
+        </div>;
+    }
+
+    const title = <React.Fragment>
+        <RoomAvatar room={selectedSpace} height={40} width={40} />
+        <div>
+            <h1>{ _t("Add existing rooms") }</h1>
+            { spaceOptionSection }
+        </div>
+    </React.Fragment>;
+
     return <BaseDialog
         title={title}
         className="mx_AddExistingToSpaceDialog"
@@ -288,21 +328,17 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
         <MatrixClientContext.Provider value={cli}>
             <AddExistingToSpace
                 space={space}
-                selected={selectedToAdd}
-                onChange={!busy && !error ? (checked, room) => {
-                    if (checked) {
-                        selectedToAdd.add(room);
-                    } else {
-                        selectedToAdd.delete(room);
-                    }
-                    setSelectedToAdd(new Set(selectedToAdd));
-                } : null}
+                onFinished={onFinished}
+                footerPrompt={<>
+                    <div>{ _t("Want to add a new room instead?") }</div>
+                    <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
+                        { _t("Create a new room") }
+                    </AccessibleButton>
+                </>}
             />
         </MatrixClientContext.Provider>
 
-        <div className="mx_AddExistingToSpaceDialog_footer">
-            { footer }
-        </div>
+        <SpaceFeedbackPrompt onClick={() => onFinished(false)} />
     </BaseDialog>;
 };
 

src/components/views/dialogs/BetaFeedbackDialog.tsx

@@ -0,0 +1,106 @@
+/*
+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, {useState} from "react";
+
+import QuestionDialog from './QuestionDialog';
+import { _t } from '../../../languageHandler';
+import Field from "../elements/Field";
+import SdkConfig from "../../../SdkConfig";
+import {IDialogProps} from "./IDialogProps";
+import SettingsStore from "../../../settings/SettingsStore";
+import {submitFeedback} from "../../../rageshake/submit-rageshake";
+import StyledCheckbox from "../elements/StyledCheckbox";
+import Modal from "../../../Modal";
+import InfoDialog from "./InfoDialog";
+import AccessibleButton from "../elements/AccessibleButton";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {USER_LABS_TAB} from "./UserSettingsDialog";
+
+interface IProps extends IDialogProps {
+    featureId: string;
+}
+
+const BetaFeedbackDialog: React.FC<IProps> = ({featureId, onFinished}) => {
+    const info = SettingsStore.getBetaInfo(featureId);
+
+    const [comment, setComment] = useState("");
+    const [canContact, setCanContact] = useState(false);
+
+    const sendFeedback = async (ok: boolean) => {
+        if (!ok) return onFinished(false);
+
+        submitFeedback(SdkConfig.get().bug_report_endpoint_url, info.feedbackLabel, comment, canContact);
+        onFinished(true);
+
+        Modal.createTrackedDialog("Beta Dialog Sent", featureId, InfoDialog, {
+            title: _t("Beta feedback"),
+            description: _t("Thank you for your feedback, we really appreciate it."),
+            button: _t("Done"),
+            hasCloseButton: false,
+            fixedWidth: false,
+        });
+    };
+
+    return (<QuestionDialog
+        className="mx_BetaFeedbackDialog"
+        hasCancelButton={true}
+        title={_t("%(featureName)s beta feedback", { featureName: info.title })}
+        description={<React.Fragment>
+            <div className="mx_BetaFeedbackDialog_subheading">
+                { _t(info.feedbackSubheading) }
+                &nbsp;
+                { _t("Your platform and username will be noted to help us use your feedback as much as we can.")}
+
+                <AccessibleButton kind="link" onClick={() => {
+                    onFinished(false);
+                    defaultDispatcher.dispatch({
+                        action: Action.ViewUserSettings,
+                        initialTabId: USER_LABS_TAB,
+                    });
+                }}>
+                    { _t("To leave the beta, visit your settings.") }
+                </AccessibleButton>
+            </div>
+
+            <Field
+                id="feedbackComment"
+                label={_t("Feedback")}
+                type="text"
+                autoComplete="off"
+                value={comment}
+                element="textarea"
+                onChange={(ev) => {
+                    setComment(ev.target.value);
+                }}
+                autoFocus={true}
+            />
+
+            <StyledCheckbox
+                checked={canContact}
+                onClick={e => setCanContact((e.target as HTMLInputElement).checked)}
+            >
+                { _t("You may contact me if you have any follow up questions") }
+            </StyledCheckbox>
+        </React.Fragment>}
+        button={_t("Send feedback")}
+        buttonDisabled={!comment}
+        onFinished={sendFeedback}
+    />);
+};
+
+export default BetaFeedbackDialog;

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 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,27 +15,47 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Room} from "matrix-js-sdk/src/models/room";
+import React, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
 
-import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
-import withValidation from '../elements/Validation';
+import withValidation, { IFieldState } from '../elements/Validation';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {Key} from "../../../Keyboard";
-import {privateShouldBeEncrypted} from "../../../createRoom";
-import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { Key } from "../../../Keyboard";
+import { IOpts, privateShouldBeEncrypted } from "../../../createRoom";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Field from "../elements/Field";
+import RoomAliasField from "../elements/RoomAliasField";
+import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
+import DialogButtons from "../elements/DialogButtons";
+import BaseDialog from "../dialogs/BaseDialog";
+import { Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
+
+interface IProps {
+    defaultPublic?: boolean;
+    defaultName?: string;
+    parentSpace?: Room;
+    onFinished(proceed: boolean, opts?: IOpts): void;
+}
+
+interface IState {
+    isPublic: boolean;
+    isEncrypted: boolean;
+    name: string;
+    topic: string;
+    alias: string;
+    detailsOpen: boolean;
+    noFederate: boolean;
+    nameIsValid: boolean;
+    canChangeEncryption: boolean;
+}
 
 @replaceableComponent("views.dialogs.CreateRoomDialog")
-export default class CreateRoomDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-        defaultPublic: PropTypes.bool,
-        parentSpace: PropTypes.instanceOf(Room),
-    };
+export default class CreateRoomDialog extends React.Component<IProps, IState> {
+    private nameField = createRef<Field>();
+    private aliasField = createRef<RoomAliasField>();
 
     constructor(props) {
         super(props);
@@ -44,7 +64,7 @@ export default class CreateRoomDialog extends React.Component {
         this.state = {
             isPublic: this.props.defaultPublic || false,
             isEncrypted: privateShouldBeEncrypted(),
-            name: "",
+            name: this.props.defaultName || "",
             topic: "",
             alias: "",
             detailsOpen: false,
@@ -53,27 +73,26 @@ export default class CreateRoomDialog extends React.Component {
             canChangeEncryption: true,
         };
 
-        MatrixClientPeg.get().doesServerForceEncryptionForPreset("private")
-            .then(isForced => this.setState({canChangeEncryption: !isForced}));
+        MatrixClientPeg.get().doesServerForceEncryptionForPreset(Preset.PrivateChat)
+            .then(isForced => this.setState({ canChangeEncryption: !isForced }));
     }
 
-    _roomCreateOptions() {
-        const opts = {};
-        const createOpts = opts.createOpts = {};
+    private roomCreateOptions() {
+        const opts: IOpts = {};
+        const createOpts: IOpts["createOpts"] = opts.createOpts = {};
         createOpts.name = this.state.name;
         if (this.state.isPublic) {
-            createOpts.visibility = "public";
-            createOpts.preset = "public_chat";
+            createOpts.visibility = Visibility.Public;
+            createOpts.preset = Preset.PublicChat;
             opts.guestAccess = false;
-            const {alias} = this.state;
-            const localPart = alias.substr(1, alias.indexOf(":") - 1);
-            createOpts['room_alias_name'] = localPart;
+            const { alias } = this.state;
+            createOpts.room_alias_name = alias.substr(1, alias.indexOf(":") - 1);
         }
         if (this.state.topic) {
             createOpts.topic = this.state.topic;
         }
         if (this.state.noFederate) {
-            createOpts.creation_content = {'m.federate': false};
+            createOpts.creation_content = { 'm.federate': false };
         }
 
         if (!this.state.isPublic) {
@@ -98,16 +117,14 @@ export default class CreateRoomDialog extends React.Component {
     }
 
     componentDidMount() {
-        this._detailsRef.addEventListener("toggle", this.onDetailsToggled);
         // move focus to first field when showing dialog
-        this._nameFieldRef.focus();
+        this.nameField.current.focus();
     }
 
     componentWillUnmount() {
-        this._detailsRef.removeEventListener("toggle", this.onDetailsToggled);
     }
 
-    _onKeyDown = event => {
+    private onKeyDown = (event: KeyboardEvent) => {
         if (event.key === Key.ENTER) {
             this.onOk();
             event.preventDefault();
@@ -115,26 +132,26 @@ export default class CreateRoomDialog extends React.Component {
         }
     };
 
-    onOk = async () => {
-        const activeElement = document.activeElement;
+    private onOk = async () => {
+        const activeElement = document.activeElement as HTMLElement;
         if (activeElement) {
             activeElement.blur();
         }
-        await this._nameFieldRef.validate({allowEmpty: false});
-        if (this._aliasFieldRef) {
-            await this._aliasFieldRef.validate({allowEmpty: false});
+        await this.nameField.current.validate({allowEmpty: false});
+        if (this.aliasField.current) {
+            await this.aliasField.current.validate({allowEmpty: false});
         }
         // Validation and state updates are async, so we need to wait for them to complete
         // first. Queue a `setState` callback and wait for it to resolve.
-        await new Promise(resolve => this.setState({}, resolve));
-        if (this.state.nameIsValid && (!this._aliasFieldRef || this._aliasFieldRef.isValid)) {
-            this.props.onFinished(true, this._roomCreateOptions());
+        await new Promise<void>(resolve => this.setState({}, resolve));
+        if (this.state.nameIsValid && (!this.aliasField.current || this.aliasField.current.isValid)) {
+            this.props.onFinished(true, this.roomCreateOptions());
         } else {
             let field;
             if (!this.state.nameIsValid) {
-                field = this._nameFieldRef;
-            } else if (this._aliasFieldRef && !this._aliasFieldRef.isValid) {
-                field = this._aliasFieldRef;
+                field = this.nameField.current;
+            } else if (this.aliasField.current && !this.aliasField.current.isValid) {
+                field = this.aliasField.current;
             }
             if (field) {
                 field.focus();
@@ -143,49 +160,45 @@ export default class CreateRoomDialog extends React.Component {
         }
     };
 
-    onCancel = () => {
+    private onCancel = () => {
         this.props.onFinished(false);
     };
 
-    onNameChange = ev => {
-        this.setState({name: ev.target.value});
+    private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        this.setState({ name: ev.target.value });
     };
 
-    onTopicChange = ev => {
-        this.setState({topic: ev.target.value});
+    private onTopicChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        this.setState({ topic: ev.target.value });
     };
 
-    onPublicChange = isPublic => {
-        this.setState({isPublic});
+    private onPublicChange = (isPublic: boolean) => {
+        this.setState({ isPublic });
     };
 
-    onEncryptedChange = isEncrypted => {
-        this.setState({isEncrypted});
+    private onEncryptedChange = (isEncrypted: boolean) => {
+        this.setState({ isEncrypted });
     };
 
-    onAliasChange = alias => {
-        this.setState({alias});
+    private onAliasChange = (alias: string) => {
+        this.setState({ alias });
     };
 
-    onDetailsToggled = ev => {
-        this.setState({detailsOpen: ev.target.open});
+    private onDetailsToggled = (ev: SyntheticEvent<HTMLDetailsElement>) => {
+        this.setState({ detailsOpen: (ev.target as HTMLDetailsElement).open });
     };
 
-    onNoFederateChange = noFederate => {
-        this.setState({noFederate});
+    private onNoFederateChange = (noFederate: boolean) => {
+        this.setState({ noFederate });
     };
 
-    collectDetailsRef = ref => {
-        this._detailsRef = ref;
-    };
-
-    onNameValidate = async fieldState => {
-        const result = await CreateRoomDialog._validateRoomName(fieldState);
+    private onNameValidate = async (fieldState: IFieldState) => {
+        const result = await CreateRoomDialog.validateRoomName(fieldState);
         this.setState({nameIsValid: result.valid});
         return result;
     };
 
-    static _validateRoomName = withValidation({
+    private static validateRoomName = withValidation({
         rules: [
             {
                 key: "required",
@@ -196,18 +209,17 @@ export default class CreateRoomDialog extends React.Component {
     });
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const Field = sdk.getComponent('views.elements.Field');
-        const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
-        const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
-
         let aliasField;
         if (this.state.isPublic) {
             const domain = MatrixClientPeg.get().getDomain();
             aliasField = (
                 <div className="mx_CreateRoomDialog_aliasContainer">
-                    <RoomAliasField ref={ref => this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} value={this.state.alias} />
+                    <RoomAliasField
+                        ref={this.aliasField}
+                        onChange={this.onAliasChange}
+                        domain={domain}
+                        value={this.state.alias}
+                    />
                 </div>
             );
         }
@@ -270,16 +282,34 @@ export default class CreateRoomDialog extends React.Component {
             <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished}
                 title={title}
             >
-                <form onSubmit={this.onOk} onKeyDown={this._onKeyDown}>
+                <form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
                     <div className="mx_Dialog_content">
-                        <Field ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
-                        <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} className="mx_CreateRoomDialog_topic" />
-                        <LabelledToggleSwitch label={ _t("Make this room public")} onChange={this.onPublicChange} value={this.state.isPublic} />
+                        <Field
+                            ref={this.nameField}
+                            label={_t('Name')}
+                            onChange={this.onNameChange}
+                            onValidate={this.onNameValidate}
+                            value={this.state.name}
+                            className="mx_CreateRoomDialog_name"
+                        />
+                        <Field
+                            label={_t('Topic (optional)')}
+                            onChange={this.onTopicChange}
+                            value={this.state.topic}
+                            className="mx_CreateRoomDialog_topic"
+                        />
+                        <LabelledToggleSwitch
+                            label={_t("Make this room public")}
+                            onChange={this.onPublicChange}
+                            value={this.state.isPublic}
+                        />
                         { publicPrivateLabel }
                         { e2eeSection }
                         { aliasField }
-                        <details ref={this.collectDetailsRef} className="mx_CreateRoomDialog_details">
-                            <summary className="mx_CreateRoomDialog_details_summary">{ this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }</summary>
+                        <details onToggle={this.onDetailsToggled} className="mx_CreateRoomDialog_details">
+                            <summary className="mx_CreateRoomDialog_details_summary">
+                                { this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }
+                            </summary>
                             <LabelledToggleSwitch
                                 label={_t(
                                     "Block anyone not part of %(serverName)s from ever joining this room.",

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2018-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,14 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState, useEffect} from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect, ChangeEvent, MouseEvent } from 'react';
 import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
 
 import {
     PHASE_UNSENT,
@@ -30,27 +30,33 @@ import {
     PHASE_DONE,
     PHASE_STARTED,
     PHASE_CANCELLED,
+    VerificationRequest,
 } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-import WidgetStore from "../../../stores/WidgetStore";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import {SETTINGS} from "../../../settings/Settings";
-import SettingsStore, {LEVEL_ORDER} from "../../../settings/SettingsStore";
+import WidgetStore, { IApp } from "../../../stores/WidgetStore";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import { SETTINGS } from "../../../settings/Settings";
+import SettingsStore, { LEVEL_ORDER } from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { SettingLevel } from '../../../settings/SettingLevel';
 
-class GenericEditor extends React.PureComponent {
-    // static propTypes = {onBack: PropTypes.func.isRequired};
+interface IGenericEditorProps {
+    onBack: () => void;
+}
 
-    constructor(props) {
-        super(props);
-        this._onChange = this._onChange.bind(this);
-        this.onBack = this.onBack.bind(this);
-    }
+interface IGenericEditorState {
+    message?: string;
+    [inputId: string]: boolean | string;
+}
 
-    onBack() {
+abstract class GenericEditor<
+    P extends IGenericEditorProps = IGenericEditorProps,
+    S extends IGenericEditorState = IGenericEditorState,
+> extends React.PureComponent<P, S> {
+    protected onBack = () => {
         if (this.state.message) {
             this.setState({ message: null });
         } else {
@@ -58,47 +64,60 @@ class GenericEditor extends React.PureComponent {
         }
     }
 
-    _onChange(e) {
+    protected onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        // @ts-ignore: Unsure how to convince TS this is okay when the state
+        // type can be extended.
         this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
     }
 
-    _buttons() {
+    protected abstract send();
+
+    protected buttons(): React.ReactNode {
         return <div className="mx_Dialog_buttons">
             <button onClick={this.onBack}>{ _t('Back') }</button>
-            { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+            { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
         </div>;
     }
 
-    textInput(id, label) {
+    protected textInput(id: string, label: string): React.ReactNode {
         return <Field
             id={id}
             label={label}
-            size="42"
+            size={42}
             autoFocus={true}
             type="text"
             autoComplete="on"
-            value={this.state[id]}
-            onChange={this._onChange}
+            value={this.state[id] as string}
+            onChange={this.onChange}
         />;
     }
 }
 
-export class SendCustomEvent extends GenericEditor {
-    static getLabel() { return _t('Send Custom Event'); }
-
-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-        forceStateEvent: PropTypes.bool,
-        forceGeneralEvent: PropTypes.bool,
-        inputs: PropTypes.object,
+interface ISendCustomEventProps extends IGenericEditorProps {
+    room: Room;
+    forceStateEvent?: boolean;
+    forceGeneralEvent?: boolean;
+    inputs?: {
+        eventType?: string;
+        stateKey?: string;
+        evContent?: string;
     };
+}
+
+interface ISendCustomEventState extends IGenericEditorState {
+    isStateEvent: boolean;
+    eventType: string;
+    stateKey: string;
+    evContent: string;
+}
+
+export class SendCustomEvent extends GenericEditor<ISendCustomEventProps, ISendCustomEventState> {
+    static getLabel() { return _t('Send Custom Event'); }
 
     static contextType = MatrixClientContext;
 
     constructor(props) {
         super(props);
-        this._send = this._send.bind(this);
 
         const {eventType, stateKey, evContent} = Object.assign({
             eventType: '',
@@ -115,7 +134,7 @@ export class SendCustomEvent extends GenericEditor {
         };
     }
 
-    send(content) {
+    private doSend(content: object): Promise<void> {
         const cli = this.context;
         if (this.state.isStateEvent) {
             return cli.sendStateEvent(this.props.room.roomId, this.state.eventType, content, this.state.stateKey);
@@ -124,7 +143,7 @@ export class SendCustomEvent extends GenericEditor {
         }
     }
 
-    async _send() {
+    protected send = async () => {
         if (this.state.eventType === '') {
             this.setState({ message: _t('You must specify an event type!') });
             return;
@@ -133,7 +152,7 @@ export class SendCustomEvent extends GenericEditor {
         let message;
         try {
             const content = JSON.parse(this.state.evContent);
-            await this.send(content);
+            await this.doSend(content);
             message = _t('Event sent!');
         } catch (e) {
             message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
@@ -147,7 +166,7 @@ export class SendCustomEvent extends GenericEditor {
                 <div className="mx_Dialog_content">
                     { this.state.message }
                 </div>
-                { this._buttons() }
+                { this.buttons() }
             </div>;
         }
 
@@ -163,35 +182,51 @@ export class SendCustomEvent extends GenericEditor {
                 <br />
 
                 <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
-                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+                    autoComplete="off" value={this.state.evContent} onChange={this.onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
-                { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+                { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
                 { showTglFlip && <div style={{float: "right"}}>
-                    <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isStateEvent} />
-                    <label className="mx_DevTools_tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" />
+                    <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
+                        type="checkbox"
+                        checked={this.state.isStateEvent}
+                        onChange={this.onChange}
+                    />
+                    <label className="mx_DevTools_tgl-btn"
+                        data-tg-off="Event"
+                        data-tg-on="State Event"
+                        htmlFor="isStateEvent"
+                    />
                 </div> }
             </div>
         </div>;
     }
 }
 
-class SendAccountData extends GenericEditor {
-    static getLabel() { return _t('Send Account Data'); }
-
-    static propTypes = {
-        room: PropTypes.instanceOf(Room).isRequired,
-        isRoomAccountData: PropTypes.bool,
-        forceMode: PropTypes.bool,
-        inputs: PropTypes.object,
+interface ISendAccountDataProps extends IGenericEditorProps {
+    room: Room;
+    isRoomAccountData: boolean;
+    forceMode: boolean;
+    inputs?: {
+        eventType?: string;
+        evContent?: string;
     };
+}
+
+interface ISendAccountDataState extends IGenericEditorState {
+    isRoomAccountData: boolean;
+    eventType: string;
+    evContent: string;
+}
+
+class SendAccountData extends GenericEditor<ISendAccountDataProps, ISendAccountDataState> {
+    static getLabel() { return _t('Send Account Data'); }
 
     static contextType = MatrixClientContext;
 
     constructor(props) {
         super(props);
-        this._send = this._send.bind(this);
 
         const {eventType, evContent} = Object.assign({
             eventType: '',
@@ -206,7 +241,7 @@ class SendAccountData extends GenericEditor {
         };
     }
 
-    send(content) {
+    private doSend(content: object): Promise<void> {
         const cli = this.context;
         if (this.state.isRoomAccountData) {
             return cli.setRoomAccountData(this.props.room.roomId, this.state.eventType, content);
@@ -214,7 +249,7 @@ class SendAccountData extends GenericEditor {
         return cli.setAccountData(this.state.eventType, content);
     }
 
-    async _send() {
+    protected send = async () => {
         if (this.state.eventType === '') {
             this.setState({ message: _t('You must specify an event type!') });
             return;
@@ -223,7 +258,7 @@ class SendAccountData extends GenericEditor {
         let message;
         try {
             const content = JSON.parse(this.state.evContent);
-            await this.send(content);
+            await this.doSend(content);
             message = _t('Event sent!');
         } catch (e) {
             message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
@@ -237,7 +272,7 @@ class SendAccountData extends GenericEditor {
                 <div className="mx_Dialog_content">
                     { this.state.message }
                 </div>
-                { this._buttons() }
+                { this.buttons() }
             </div>;
         }
 
@@ -247,14 +282,23 @@ class SendAccountData extends GenericEditor {
                 <br />
 
                 <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
-                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+                    autoComplete="off" value={this.state.evContent} onChange={this.onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
-                { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+                { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
                 { !this.state.message && <div style={{float: "right"}}>
-                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} disabled={this.props.forceMode} />
-                    <label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
+                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
+                        type="checkbox"
+                        checked={this.state.isRoomAccountData}
+                        disabled={this.props.forceMode}
+                        onChange={this.onChange}
+                    />
+                    <label className="mx_DevTools_tgl-btn"
+                        data-tg-off="Account Data"
+                        data-tg-on="Room Data"
+                        htmlFor="isRoomAccountData"
+                    />
                 </div> }
             </div>
         </div>;
@@ -264,17 +308,22 @@ class SendAccountData extends GenericEditor {
 const INITIAL_LOAD_TILES = 20;
 const LOAD_TILES_STEP_SIZE = 50;
 
-class FilteredList extends React.PureComponent {
-    static propTypes = {
-        children: PropTypes.any,
-        query: PropTypes.string,
-        onChange: PropTypes.func,
-    };
+interface IFilteredListProps {
+    children: React.ReactElement[];
+    query: string;
+    onChange: (value: string) => void;
+}
 
-    static filterChildren(children, query) {
+interface IFilteredListState {
+    filteredChildren: React.ReactElement[];
+    truncateAt: number;
+}
+
+class FilteredList extends React.PureComponent<IFilteredListProps, IFilteredListState> {
+    static filterChildren(children: React.ReactElement[], query: string): React.ReactElement[] {
         if (!query) return children;
         const lcQuery = query.toLowerCase();
-        return children.filter((child) => child.key.toLowerCase().includes(lcQuery));
+        return children.filter((child) => child.key.toString().toLowerCase().includes(lcQuery));
     }
 
     constructor(props) {
@@ -295,27 +344,27 @@ class FilteredList extends React.PureComponent {
         });
     }
 
-    showAll = () => {
+    private showAll = () => {
         this.setState({
             truncateAt: this.state.truncateAt + LOAD_TILES_STEP_SIZE,
         });
     };
 
-    createOverflowElement = (overflowCount: number, totalCount: number) => {
+    private createOverflowElement = (overflowCount: number, totalCount: number) => {
         return <button className="mx_DevTools_RoomStateExplorer_button" onClick={this.showAll}>
             { _t("and %(count)s others...", { count: overflowCount }) }
         </button>;
     };
 
-    onQuery = (ev) => {
+    private onQuery = (ev: ChangeEvent<HTMLInputElement>) => {
         if (this.props.onChange) this.props.onChange(ev.target.value);
     };
 
-    getChildren = (start: number, end: number) => {
+    private getChildren = (start: number, end: number): React.ReactElement[] => {
         return this.state.filteredChildren.slice(start, end);
     };
 
-    getChildCount = (): number => {
+    private getChildCount = (): number => {
         return this.state.filteredChildren.length;
     };
 
@@ -336,28 +385,31 @@ class FilteredList extends React.PureComponent {
     }
 }
 
-class RoomStateExplorer extends React.PureComponent {
-    static getLabel() { return _t('Explore Room State'); }
+interface IExplorerProps {
+    room: Room;
+    onBack: () => void;
+}
 
-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-    };
+interface IRoomStateExplorerState {
+    eventType?: string;
+    event?: MatrixEvent;
+    editing: boolean;
+    queryEventType: string;
+    queryStateKey: string;
+}
+
+class RoomStateExplorer extends React.PureComponent<IExplorerProps, IRoomStateExplorerState> {
+    static getLabel() { return _t('Explore Room State'); }
 
     static contextType = MatrixClientContext;
 
-    roomStateEvents: Map<string, Map<string, MatrixEvent>>;
+    private roomStateEvents: Map<string, Map<string, MatrixEvent>>;
 
     constructor(props) {
         super(props);
 
         this.roomStateEvents = this.props.room.currentState.events;
 
-        this.onBack = this.onBack.bind(this);
-        this.editEv = this.editEv.bind(this);
-        this.onQueryEventType = this.onQueryEventType.bind(this);
-        this.onQueryStateKey = this.onQueryStateKey.bind(this);
-
         this.state = {
             eventType: null,
             event: null,
@@ -368,19 +420,19 @@ class RoomStateExplorer extends React.PureComponent {
         };
     }
 
-    browseEventType(eventType) {
+    private browseEventType(eventType: string) {
         return () => {
             this.setState({ eventType });
         };
     }
 
-    onViewSourceClick(event) {
+    private onViewSourceClick(event: MatrixEvent) {
         return () => {
             this.setState({ event });
         };
     }
 
-    onBack() {
+    private onBack = () => {
         if (this.state.editing) {
             this.setState({ editing: false });
         } else if (this.state.event) {
@@ -392,15 +444,15 @@ class RoomStateExplorer extends React.PureComponent {
         }
     }
 
-    editEv() {
+    private editEv = () => {
         this.setState({ editing: true });
     }
 
-    onQueryEventType(filterEventType) {
+    private onQueryEventType = (filterEventType: string) => {
         this.setState({ queryEventType: filterEventType });
     }
 
-    onQueryStateKey(filterStateKey) {
+    private onQueryStateKey = (filterStateKey: string) => {
         this.setState({ queryStateKey: filterStateKey });
     }
 
@@ -472,24 +524,22 @@ class RoomStateExplorer extends React.PureComponent {
     }
 }
 
-class AccountDataExplorer extends React.PureComponent {
-    static getLabel() { return _t('Explore Account Data'); }
+interface IAccountDataExplorerState {
+    isRoomAccountData: boolean;
+    event?: MatrixEvent;
+    editing: boolean;
+    queryEventType: string;
+    [inputId: string]: boolean | string;
+}
 
-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-    };
+class AccountDataExplorer extends React.PureComponent<IExplorerProps, IAccountDataExplorerState> {
+    static getLabel() { return _t('Explore Account Data'); }
 
     static contextType = MatrixClientContext;
 
     constructor(props) {
         super(props);
 
-        this.onBack = this.onBack.bind(this);
-        this.editEv = this.editEv.bind(this);
-        this._onChange = this._onChange.bind(this);
-        this.onQueryEventType = this.onQueryEventType.bind(this);
-
         this.state = {
             isRoomAccountData: false,
             event: null,
@@ -499,20 +549,20 @@ class AccountDataExplorer extends React.PureComponent {
         };
     }
 
-    getData() {
+    private getData(): Record<string, MatrixEvent> {
         if (this.state.isRoomAccountData) {
             return this.props.room.accountData;
         }
         return this.context.store.accountData;
     }
 
-    onViewSourceClick(event) {
+    private onViewSourceClick(event: MatrixEvent) {
         return () => {
             this.setState({ event });
         };
     }
 
-    onBack() {
+    private onBack = () => {
         if (this.state.editing) {
             this.setState({ editing: false });
         } else if (this.state.event) {
@@ -522,15 +572,15 @@ class AccountDataExplorer extends React.PureComponent {
         }
     }
 
-    _onChange(e) {
+    private onChange = (e: ChangeEvent<HTMLInputElement>) => {
         this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
     }
 
-    editEv() {
+    private editEv = () => {
         this.setState({ editing: true });
     }
 
-    onQueryEventType(queryEventType) {
+    private onQueryEventType = (queryEventType: string) => {
         this.setState({ queryEventType });
     }
 
@@ -580,30 +630,39 @@ class AccountDataExplorer extends React.PureComponent {
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
-                { !this.state.message && <div style={{float: "right"}}>
-                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} />
-                    <label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
-                </div> }
+                <div style={{float: "right"}}>
+                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
+                        type="checkbox"
+                        checked={this.state.isRoomAccountData}
+                        onChange={this.onChange}
+                    />
+                    <label className="mx_DevTools_tgl-btn"
+                        data-tg-off="Account Data"
+                        data-tg-on="Room Data"
+                        htmlFor="isRoomAccountData"
+                    />
+                </div>
             </div>
         </div>;
     }
 }
 
-class ServersInRoomList extends React.PureComponent {
+interface IServersInRoomListState {
+    query: string;
+}
+
+class ServersInRoomList extends React.PureComponent<IExplorerProps, IServersInRoomListState> {
     static getLabel() { return _t('View Servers in Room'); }
 
-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-    };
-
     static contextType = MatrixClientContext;
 
+    private servers: React.ReactElement[];
+
     constructor(props) {
         super(props);
 
         const room = this.props.room;
-        const servers = new Set();
+        const servers = new Set<string>();
         room.currentState.getStateEvents("m.room.member").forEach(ev => servers.add(ev.getSender().split(":")[1]));
         this.servers = Array.from(servers).map(s =>
             <button key={s} className="mx_DevTools_ServersInRoomList_button">
@@ -615,7 +674,7 @@ class ServersInRoomList extends React.PureComponent {
         };
     }
 
-    onQuery = (query) => {
+    private onQuery = (query: string) => {
         this.setState({ query });
     }
 
@@ -642,7 +701,10 @@ const PHASE_MAP = {
     [PHASE_CANCELLED]: "cancelled",
 };
 
-function VerificationRequest({txnId, request}) {
+const VerificationRequestExplorer: React.FC<{
+    txnId: string;
+    request: VerificationRequest;
+}> = ({txnId, request}) => {
     const [, updateState] = useState();
     const [timeout, setRequestTimeout] = useState(request.timeout);
 
@@ -679,7 +741,7 @@ function VerificationRequest({txnId, request}) {
     </div>);
 }
 
-class VerificationExplorer extends React.Component {
+class VerificationExplorer extends React.PureComponent<IExplorerProps> {
     static getLabel() {
         return _t("Verification Requests");
     }
@@ -687,7 +749,7 @@ class VerificationExplorer extends React.Component {
     /* Ensure this.context is the cli */
     static contextType = MatrixClientContext;
 
-    onNewRequest = () => {
+    private onNewRequest = () => {
         this.forceUpdate();
     }
 
@@ -704,13 +766,13 @@ class VerificationExplorer extends React.Component {
     render() {
         const cli = this.context;
         const room = this.props.room;
-        const inRoomChannel = cli._crypto._inRoomVerificationRequests;
+        const inRoomChannel = cli.crypto._inRoomVerificationRequests;
         const inRoomRequests = (inRoomChannel._requestsByRoomId || new Map()).get(room.roomId) || new Map();
 
         return (<div>
             <div className="mx_Dialog_content">
                 {Array.from(inRoomRequests.entries()).reverse().map(([txnId, request]) =>
-                    <VerificationRequest txnId={txnId} request={request} key={txnId} />,
+                    <VerificationRequestExplorer txnId={txnId} request={request} key={txnId} />,
                 )}
             </div>
             <div className="mx_Dialog_buttons">
@@ -720,7 +782,12 @@ class VerificationExplorer extends React.Component {
     }
 }
 
-class WidgetExplorer extends React.Component {
+interface IWidgetExplorerState {
+    query: string;
+    editWidget?: IApp;
+}
+
+class WidgetExplorer extends React.Component<IExplorerProps, IWidgetExplorerState> {
     static getLabel() {
         return _t("Active Widgets");
     }
@@ -734,19 +801,19 @@ class WidgetExplorer extends React.Component {
         };
     }
 
-    onWidgetStoreUpdate = () => {
+    private onWidgetStoreUpdate = () => {
         this.forceUpdate();
     };
 
-    onQueryChange = (query) => {
+    private onQueryChange = (query: string) => {
         this.setState({query});
     };
 
-    onEditWidget = (widget) => {
+    private onEditWidget = (widget: IApp) => {
         this.setState({editWidget: widget});
     };
 
-    onBack = () => {
+    private onBack = () => {
         const widgets = WidgetStore.instance.getApps(this.props.room.roomId);
         if (this.state.editWidget && widgets.includes(this.state.editWidget)) {
             this.setState({editWidget: null});
@@ -769,8 +836,11 @@ class WidgetExplorer extends React.Component {
         const editWidget = this.state.editWidget;
         const widgets = WidgetStore.instance.getApps(room.roomId);
         if (editWidget && widgets.includes(editWidget)) {
-            const allState = Array.from(Array.from(room.currentState.events.values()).map(e => e.values()))
-                .reduce((p, c) => {p.push(...c); return p;}, []);
+            const allState = Array.from(
+                Array.from(room.currentState.events.values()).map((e: Map<string, MatrixEvent>) => {
+                    return e.values();
+                }),
+            ).reduce((p, c) => { p.push(...c); return p; }, []);
             const stateEv = allState.find(ev => ev.getId() === editWidget.eventId);
             if (!stateEv) { // "should never happen"
                 return <div>
@@ -811,7 +881,15 @@ class WidgetExplorer extends React.Component {
     }
 }
 
-class SettingsExplorer extends React.Component {
+interface ISettingsExplorerState {
+    query: string;
+    editSetting?: string;
+    viewSetting?: string;
+    explicitValues?: string;
+    explicitRoomValues?: string;
+ }
+
+class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExplorerState> {
     static getLabel() {
         return _t("Settings Explorer");
     }
@@ -829,19 +907,19 @@ class SettingsExplorer extends React.Component {
         };
     }
 
-    onQueryChange = (ev) => {
+    private onQueryChange = (ev: ChangeEvent<HTMLInputElement>) => {
         this.setState({query: ev.target.value});
     };
 
-    onExplValuesEdit = (ev) => {
+    private onExplValuesEdit = (ev: ChangeEvent<HTMLTextAreaElement>) => {
         this.setState({explicitValues: ev.target.value});
     };
 
-    onExplRoomValuesEdit = (ev) => {
+    private onExplRoomValuesEdit = (ev: ChangeEvent<HTMLTextAreaElement>) => {
         this.setState({explicitRoomValues: ev.target.value});
     };
 
-    onBack = () => {
+    private onBack = () => {
         if (this.state.editSetting) {
             this.setState({editSetting: null});
         } else if (this.state.viewSetting) {
@@ -851,12 +929,12 @@ class SettingsExplorer extends React.Component {
         }
     };
 
-    onViewClick = (ev, settingId) => {
+    private onViewClick = (ev: MouseEvent, settingId: string) => {
         ev.preventDefault();
         this.setState({viewSetting: settingId});
     };
 
-    onEditClick = (ev, settingId) => {
+    private onEditClick = (ev: MouseEvent, settingId: string) => {
         ev.preventDefault();
         this.setState({
             editSetting: settingId,
@@ -865,7 +943,7 @@ class SettingsExplorer extends React.Component {
         });
     };
 
-    onSaveClick = async () => {
+    private onSaveClick = async () => {
         try {
             const settingId = this.state.editSetting;
             const parsedExplicit = JSON.parse(this.state.explicitValues);
@@ -874,7 +952,7 @@ class SettingsExplorer extends React.Component {
                 console.log(`[Devtools] Setting value of ${settingId} at ${level} from user input`);
                 try {
                     const val = parsedExplicit[level];
-                    await SettingsStore.setValue(settingId, null, level, val);
+                    await SettingsStore.setValue(settingId, null, level as SettingLevel, val);
                 } catch (e) {
                     console.warn(e);
                 }
@@ -884,7 +962,7 @@ class SettingsExplorer extends React.Component {
                 console.log(`[Devtools] Setting value of ${settingId} at ${level} in ${roomId} from user input`);
                 try {
                     const val = parsedExplicitRoom[level];
-                    await SettingsStore.setValue(settingId, roomId, level, val);
+                    await SettingsStore.setValue(settingId, roomId, level as SettingLevel, val);
                 } catch (e) {
                     console.warn(e);
                 }
@@ -901,7 +979,7 @@ class SettingsExplorer extends React.Component {
         }
     };
 
-    renderSettingValue(val) {
+    private renderSettingValue(val: any): string {
         // Note: we don't .toString() a string because we want JSON.stringify to inject quotes for us
         const toStringTypes = ['boolean', 'number'];
         if (toStringTypes.includes(typeof(val))) {
@@ -911,7 +989,7 @@ class SettingsExplorer extends React.Component {
         }
     }
 
-    renderExplicitSettingValues(setting, roomId) {
+    private renderExplicitSettingValues(setting: string, roomId: string): string {
         const vals = {};
         for (const level of LEVEL_ORDER) {
             try {
@@ -926,7 +1004,7 @@ class SettingsExplorer extends React.Component {
         return JSON.stringify(vals, null, 4);
     }
 
-    renderCanEditLevel(roomId, level) {
+    private renderCanEditLevel(roomId: string, level: SettingLevel): React.ReactNode {
         const canEdit = SettingsStore.canSetValue(this.state.editSetting, roomId, level);
         const className = canEdit ? 'mx_DevTools_SettingsExplorer_mutable' : 'mx_DevTools_SettingsExplorer_immutable';
         return <td className={className}><code>{canEdit.toString()}</code></td>;
@@ -1062,27 +1140,37 @@ class SettingsExplorer extends React.Component {
 
                         <div>
                             {_t("Value:")}&nbsp;
-                            <code>{this.renderSettingValue(SettingsStore.getValue(this.state.viewSetting))}</code>
+                            <code>{this.renderSettingValue(
+                                SettingsStore.getValue(this.state.viewSetting),
+                            )}</code>
                         </div>
 
                         <div>
                             {_t("Value in this room:")}&nbsp;
-                            <code>{this.renderSettingValue(SettingsStore.getValue(this.state.viewSetting, room.roomId))}</code>
+                            <code>{this.renderSettingValue(
+                                SettingsStore.getValue(this.state.viewSetting, room.roomId),
+                            )}</code>
                         </div>
 
                         <div>
                             {_t("Values at explicit levels:")}
-                            <pre><code>{this.renderExplicitSettingValues(this.state.viewSetting, null)}</code></pre>
+                            <pre><code>{this.renderExplicitSettingValues(
+                                this.state.viewSetting, null,
+                            )}</code></pre>
                         </div>
 
                         <div>
                             {_t("Values at explicit levels in this room:")}
-                            <pre><code>{this.renderExplicitSettingValues(this.state.viewSetting, room.roomId)}</code></pre>
+                            <pre><code>{this.renderExplicitSettingValues(
+                                this.state.viewSetting, room.roomId,
+                            )}</code></pre>
                         </div>
 
                     </div>
                     <div className="mx_Dialog_buttons">
-                        <button onClick={(e) => this.onEditClick(e, this.state.viewSetting)}>{_t("Edit Values")}</button>
+                        <button onClick={(e) => this.onEditClick(e, this.state.viewSetting)}>{
+                            _t("Edit Values")
+                        }</button>
                         <button onClick={this.onBack}>{_t("Back")}</button>
                     </div>
                 </div>
@@ -1091,7 +1179,11 @@ class SettingsExplorer extends React.Component {
     }
 }
 
-const Entries = [
+type DevtoolsDialogEntry = React.JSXElementConstructor<any> & {
+    getLabel: () => string;
+};
+
+const Entries: DevtoolsDialogEntry[] = [
     SendCustomEvent,
     RoomStateExplorer,
     SendAccountData,
@@ -1102,43 +1194,36 @@ const Entries = [
     SettingsExplorer,
 ];
 
-@replaceableComponent("views.dialogs.DevtoolsDialog")
-export default class DevtoolsDialog extends React.PureComponent {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
+interface IProps {
+    roomId: string;
+    onFinished: (finished: boolean) => void;
+}
 
+interface IState {
+    mode?: DevtoolsDialogEntry;
+}
+
+@replaceableComponent("views.dialogs.DevtoolsDialog")
+export default class DevtoolsDialog extends React.PureComponent<IProps, IState> {
     constructor(props) {
         super(props);
-        this.onBack = this.onBack.bind(this);
-        this.onCancel = this.onCancel.bind(this);
 
         this.state = {
             mode: null,
         };
     }
 
-    componentWillUnmount() {
-        this._unmounted = true;
-    }
-
-    _setMode(mode) {
+    private setMode(mode: DevtoolsDialogEntry) {
         return () => {
             this.setState({ mode });
         };
     }
 
-    onBack() {
-        if (this.prevMode) {
-            this.setState({ mode: this.prevMode });
-            this.prevMode = null;
-        } else {
-            this.setState({ mode: null });
-        }
+    private onBack = () => {
+        this.setState({ mode: null });
     }
 
-    onCancel() {
+    private onCancel = () => {
         this.props.onFinished(false);
     }
 
@@ -1165,7 +1250,7 @@ export default class DevtoolsDialog extends React.PureComponent {
                     <div className="mx_Dialog_content">
                         { Entries.map((Entry) => {
                             const label = Entry.getLabel();
-                            const onClick = this._setMode(Entry);
+                            const onClick = this.setMode(Entry);
                             return <button className={classes} key={label} onClick={onClick}>{ label }</button>;
                         }) }
                     </div>

src/components/views/dialogs/ForwardDialog.tsx

@@ -0,0 +1,248 @@
+/*
+Copyright 2021 Robin Townsend <robin@robin.town>
+
+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, {useMemo, useState, useEffect} from "react";
+import classnames from "classnames";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+
+import {_t} from "../../../languageHandler";
+import dis from "../../../dispatcher/dispatcher";
+import {useSettingValue, useFeatureEnabled} from "../../../hooks/useSettings";
+import {UIFeature} from "../../../settings/UIFeature";
+import {Layout} from "../../../settings/Layout";
+import {IDialogProps} from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import {avatarUrlForUser} from "../../../Avatar";
+import EventTile from "../rooms/EventTile";
+import SearchBox from "../../structures/SearchBox";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import {Alignment} from '../elements/Tooltip';
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
+import NotificationBadge from "../rooms/NotificationBadge";
+import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
+import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import QueryMatcher from "../../../autocomplete/QueryMatcher";
+
+const AVATAR_SIZE = 30;
+
+interface IProps extends IDialogProps {
+    matrixClient: MatrixClient;
+    // The event to forward
+    event: MatrixEvent;
+    // We need a permalink creator for the source room to pass through to EventTile
+    // in case the event is a reply (even though the user can't get at the link)
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+interface IEntryProps {
+    room: Room;
+    event: MatrixEvent;
+    matrixClient: MatrixClient;
+    onFinished(success: boolean): void;
+}
+
+enum SendState {
+    CanSend,
+    Sending,
+    Sent,
+    Failed,
+}
+
+const Entry: React.FC<IEntryProps> = ({ room, event, matrixClient: cli, onFinished }) => {
+    const [sendState, setSendState] = useState<SendState>(SendState.CanSend);
+
+    const jumpToRoom = () => {
+        dis.dispatch({
+            action: "view_room",
+            room_id: room.roomId,
+        });
+        onFinished(true);
+    };
+    const send = async () => {
+        setSendState(SendState.Sending);
+        try {
+            await cli.sendEvent(room.roomId, event.getType(), event.getContent());
+            setSendState(SendState.Sent);
+        } catch (e) {
+            setSendState(SendState.Failed);
+        }
+    };
+
+    let className;
+    let disabled = false;
+    let title;
+    let icon;
+    if (sendState === SendState.CanSend) {
+        className = "mx_ForwardList_canSend";
+        if (room.maySendMessage()) {
+            title = _t("Send");
+        } else {
+            disabled = true;
+            title = _t("You don't have permission to do this");
+        }
+    } else if (sendState === SendState.Sending) {
+        className = "mx_ForwardList_sending";
+        disabled = true;
+        title = _t("Sending");
+        icon = <div className="mx_ForwardList_sendIcon" aria-label={title}></div>;
+    } else if (sendState === SendState.Sent) {
+        className = "mx_ForwardList_sent";
+        disabled = true;
+        title = _t("Sent");
+        icon = <div className="mx_ForwardList_sendIcon" aria-label={title}></div>;
+    } else {
+        className = "mx_ForwardList_sendFailed";
+        disabled = true;
+        title = _t("Failed to send");
+        icon = <NotificationBadge
+            notification={StaticNotificationState.RED_EXCLAMATION}
+        />;
+    }
+
+    return <div className="mx_ForwardList_entry">
+        <AccessibleTooltipButton
+            className="mx_ForwardList_roomButton"
+            onClick={jumpToRoom}
+            title={_t("Open link")}
+            yOffset={-20}
+            alignment={Alignment.Top}
+        >
+            <DecoratedRoomAvatar room={room} avatarSize={32} />
+            <span className="mx_ForwardList_entry_name">{ room.name }</span>
+        </AccessibleTooltipButton>
+        <AccessibleTooltipButton
+            kind={sendState === SendState.Failed ? "danger_outline" : "primary_outline"}
+            className={`mx_ForwardList_sendButton ${className}`}
+            onClick={send}
+            disabled={disabled}
+            title={title}
+            yOffset={-20}
+            alignment={Alignment.Top}
+        >
+            <div className="mx_ForwardList_sendLabel">{ _t("Send") }</div>
+            { icon }
+        </AccessibleTooltipButton>
+    </div>;
+};
+
+const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCreator, onFinished }) => {
+    const userId = cli.getUserId();
+    const [profileInfo, setProfileInfo] = useState<any>({});
+    useEffect(() => {
+        cli.getProfileInfo(userId).then(info => setProfileInfo(info));
+    }, [cli, userId]);
+
+    // For the message preview we fake the sender as ourselves
+    const mockEvent = new MatrixEvent({
+        type: "m.room.message",
+        sender: userId,
+        content: event.getContent(),
+        unsigned: {
+            age: 97,
+        },
+        event_id: "$9999999999999999999999999999999999999999999",
+        room_id: event.getRoomId(),
+    });
+    mockEvent.sender = {
+        name: profileInfo.displayname || userId,
+        rawDisplayName: profileInfo.displayname,
+        userId,
+        getAvatarUrl: (..._) => {
+            return avatarUrlForUser(
+                { avatarUrl: profileInfo.avatar_url },
+                AVATAR_SIZE, AVATAR_SIZE, "crop",
+            );
+        },
+        getMxcAvatarUrl: () => profileInfo.avatar_url,
+    };
+
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase();
+
+    const spacesEnabled = useFeatureEnabled("feature_spaces");
+    const flairEnabled = useFeatureEnabled(UIFeature.Flair);
+    const previewLayout = useSettingValue<Layout>("layout");
+
+    let rooms = useMemo(() => sortRooms(
+        cli.getVisibleRooms().filter(
+            room => room.getMyMembership() === "join" &&
+                !(spacesEnabled && room.isSpaceRoom()),
+        ),
+    ), [cli, spacesEnabled]);
+
+    if (lcQuery) {
+        rooms = new QueryMatcher<Room>(rooms, {
+            keys: ["name"],
+            funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
+            shouldMatchWordsOnly: false,
+        }).match(lcQuery);
+    }
+
+    return <BaseDialog
+        title={_t("Forward message")}
+        className="mx_ForwardDialog"
+        contentId="mx_ForwardList"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <h3>{ _t("Message preview") }</h3>
+        <div className={classnames("mx_ForwardDialog_preview", {
+            "mx_IRCLayout": previewLayout == Layout.IRC,
+            "mx_GroupLayout": previewLayout == Layout.Group,
+        })}>
+            <EventTile
+                mxEvent={mockEvent}
+                layout={previewLayout}
+                enableFlair={flairEnabled}
+                permalinkCreator={permalinkCreator}
+                as="div"
+            />
+        </div>
+        <hr />
+        <div className="mx_ForwardList" id="mx_ForwardList">
+            <SearchBox
+                className="mx_textinput_icon mx_textinput_search"
+                placeholder={_t("Search for rooms or people")}
+                onSearch={setQuery}
+                autoComplete={true}
+                autoFocus={true}
+            />
+            <AutoHideScrollbar className="mx_ForwardList_content">
+                { rooms.length > 0 ? (
+                    <div className="mx_ForwardList_results">
+                        { rooms.map(room =>
+                            <Entry
+                                key={room.roomId}
+                                room={room}
+                                event={event}
+                                matrixClient={cli}
+                                onFinished={onFinished}
+                            />,
+                        ) }
+                    </div>
+                ) : <span className="mx_ForwardList_noResults">
+                    { _t("No results") }
+                </span> }
+            </AutoHideScrollbar>
+        </div>
+    </BaseDialog>;
+};
+
+export default ForwardDialog;

src/components/views/dialogs/IDialogProps.ts

@@ -15,5 +15,5 @@ limitations under the License.
 */
 
 export interface IDialogProps {
-    onFinished: (bool) => void;
+    onFinished(...args: any): void;
 }

src/components/views/dialogs/InviteDialog.tsx

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
+import classNames from 'classnames';
+
 import {_t, _td} from "../../../languageHandler";
 import * as sdk from "../../../index";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -31,7 +33,6 @@ import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
 import createRoom, {
     canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted,
-    IInvite3PID,
 } from "../../../createRoom";
 import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
@@ -47,10 +48,25 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../../customisations/Media";
 import {getAddressType} from "../../../UserAddress";
+import BaseAvatar from '../avatars/BaseAvatar';
+import AccessibleButton from '../elements/AccessibleButton';
+import { compare } from '../../../utils/strings';
+import { IInvite3PID } from "matrix-js-sdk/src/@types/requests";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { copyPlaintext, selectText } from "../../../utils/strings";
+import * as ContextMenu from "../../structures/ContextMenu";
+import { toRightOf } from "../../structures/ContextMenu";
+import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
 
+interface IRecentUser {
+    userId: string,
+    user: RoomMember,
+    lastActive: number,
+}
+
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
 export const KIND_CALL_TRANSFER = "call_transfer";
@@ -61,43 +77,41 @@ const INCREMENT_ROOMS_SHOWN = 5; // Number of rooms to add when 'show more' is c
 // This is the interface that is expected by various components in this file. It is a bit
 // awkward because it also matches the RoomMember class from the js-sdk with some extra support
 // for 3PIDs/email addresses.
-//
-// XXX: We should use TypeScript interfaces instead of this weird "abstract" class.
-class Member {
+abstract class Member {
     /**
      * The display name of this Member. For users this should be their profile's display
      * name or user ID if none set. For 3PIDs this should be the 3PID address (email).
      */
-    get name(): string { throw new Error("Member class not implemented"); }
+    public abstract get name(): string;
 
     /**
      * The ID of this Member. For users this should be their user ID. For 3PIDs this should
      * be the 3PID address (email).
      */
-    get userId(): string { throw new Error("Member class not implemented"); }
+    public abstract get userId(): string;
 
     /**
      * Gets the MXC URL of this Member's avatar. For users this should be their profile's
      * avatar MXC URL or null if none set. For 3PIDs this should always be null.
      */
-    getMxcAvatarUrl(): string { throw new Error("Member class not implemented"); }
+    public abstract getMxcAvatarUrl(): string;
 }
 
 class DirectoryMember extends Member {
-    _userId: string;
-    _displayName: string;
-    _avatarUrl: string;
+    private readonly _userId: string;
+    private readonly displayName: string;
+    private readonly avatarUrl: string;
 
     constructor(userDirResult: {user_id: string, display_name: string, avatar_url: string}) {
         super();
         this._userId = userDirResult.user_id;
-        this._displayName = userDirResult.display_name;
-        this._avatarUrl = userDirResult.avatar_url;
+        this.displayName = userDirResult.display_name;
+        this.avatarUrl = userDirResult.avatar_url;
     }
 
     // These next class members are for the Member interface
     get name(): string {
-        return this._displayName || this._userId;
+        return this.displayName || this._userId;
     }
 
     get userId(): string {
@@ -105,32 +119,32 @@ class DirectoryMember extends Member {
     }
 
     getMxcAvatarUrl(): string {
-        return this._avatarUrl;
+        return this.avatarUrl;
     }
 }
 
 class ThreepidMember extends Member {
-    _id: string;
+    private readonly id: string;
 
     constructor(id: string) {
         super();
-        this._id = id;
+        this.id = id;
     }
 
     // This is a getter that would be falsey on all other implementations. Until we have
     // better type support in the react-sdk we can use this trick to determine the kind
     // of 3PID we're dealing with, if any.
     get isEmail(): boolean {
-        return this._id.includes('@');
+        return this.id.includes('@');
     }
 
     // These next class members are for the Member interface
     get name(): string {
-        return this._id;
+        return this.id;
     }
 
     get userId(): string {
-        return this._id;
+        return this.id;
     }
 
     getMxcAvatarUrl(): string {
@@ -140,11 +154,11 @@ class ThreepidMember extends Member {
 
 interface IDMUserTileProps {
     member: RoomMember;
-    onRemove: (RoomMember) => any;
+    onRemove(member: RoomMember): void;
 }
 
 class DMUserTile extends React.PureComponent<IDMUserTileProps> {
-    _onRemove = (e) => {
+    private onRemove = (e) => {
         // Stop the browser from highlighting text
         e.preventDefault();
         e.stopPropagation();
@@ -153,9 +167,6 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
     };
 
     render() {
-        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-
         const avatarSize = 20;
         const avatar = this.props.member.isEmail
             ? <img
@@ -177,7 +188,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
             closeButton = (
                 <AccessibleButton
                     className='mx_InviteDialog_userTile_remove'
-                    onClick={this._onRemove}
+                    onClick={this.onRemove}
                 >
                     <img src={require("../../../../res/img/icon-pill-remove.svg")}
                         alt={_t('Remove')} width={8} height={8}
@@ -201,13 +212,13 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
 interface IDMRoomTileProps {
     member: RoomMember;
     lastActiveTs: number;
-    onToggle: (RoomMember) => any;
+    onToggle(member: RoomMember): void;
     highlightWord: string;
     isSelected: boolean;
 }
 
 class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
-    _onClick = (e) => {
+    private onClick = (e) => {
         // Stop the browser from highlighting text
         e.preventDefault();
         e.stopPropagation();
@@ -215,7 +226,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         this.props.onToggle(this.props.member);
     };
 
-    _highlightName(str: string) {
+    private highlightName(str: string) {
         if (!this.props.highlightWord) return str;
 
         // We convert things to lowercase for index searching, but pull substrings from
@@ -252,8 +263,6 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
     }
 
     render() {
-        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
-
         let timestamp = null;
         if (this.props.lastActiveTs) {
             const humanTs = humanizeTime(this.props.lastActiveTs);
@@ -291,13 +300,13 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
 
         const caption = this.props.member.isEmail
             ? _t("Invite by email")
-            : this._highlightName(this.props.member.userId);
+            : this.highlightName(this.props.member.userId);
 
         return (
-            <div className='mx_InviteDialog_roomTile' onClick={this._onClick}>
+            <div className='mx_InviteDialog_roomTile' onClick={this.onClick}>
                 {stackedAvatar}
                 <span className="mx_InviteDialog_roomTile_nameStack">
-                    <div className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</div>
+                    <div className='mx_InviteDialog_roomTile_name'>{this.highlightName(this.props.member.name)}</div>
                     <div className='mx_InviteDialog_roomTile_userId'>{caption}</div>
                 </span>
                 {timestamp}
@@ -308,7 +317,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
 
 interface IInviteDialogProps {
     // Takes an array of user IDs/emails to invite.
-    onFinished: (toInvite?: string[]) => any;
+    onFinished: (toInvite?: string[]) => void;
 
     // The kind of invite being performed. Assumed to be KIND_DM if
     // not provided.
@@ -349,8 +358,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         initialText: "",
     };
 
-    _debounceTimer: NodeJS.Timeout = null; // actually number because we're in the browser
-    _editorRef: any = null;
+    private closeCopiedTooltip: () => void;
+    private debounceTimer: NodeJS.Timeout = null; // actually number because we're in the browser
+    private editorRef = createRef<HTMLInputElement>();
+    private unmounted = false;
 
     constructor(props) {
         super(props);
@@ -378,7 +389,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             filterText: this.props.initialText,
             recents: InviteDialog.buildRecents(alreadyInvited),
             numRecentsShown: INITIAL_ROOMS_SHOWN,
-            suggestions: this._buildSuggestions(alreadyInvited),
+            suggestions: this.buildSuggestions(alreadyInvited),
             numSuggestionsShown: INITIAL_ROOMS_SHOWN,
             serverResultsMixin: [],
             threepidResultsMixin: [],
@@ -390,21 +401,26 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             busy: false,
             errorText: null,
         };
-
-        this._editorRef = createRef();
     }
 
     componentDidMount() {
         if (this.props.initialText) {
-            this._updateSuggestions(this.props.initialText);
+            this.updateSuggestions(this.props.initialText);
         }
     }
 
+    componentWillUnmount() {
+        this.unmounted = true;
+        // if the Copied tooltip is open then get rid of it, there are ways to close the modal which wouldn't close
+        // the tooltip otherwise, such as pressing Escape or clicking X really quickly
+        if (this.closeCopiedTooltip) this.closeCopiedTooltip();
+    }
+
     private onConsultFirstChange = (ev) => {
         this.setState({consultFirst: ev.target.checked});
     }
 
-    static buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number}[] {
+    public static buildRecents(excludedTargetIds: Set<string>): IRecentUser[] {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
         // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
@@ -467,7 +483,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         return recents;
     }
 
-    _buildSuggestions(excludedTargetIds: Set<string>): {userId: string, user: RoomMember}[] {
+    private buildSuggestions(excludedTargetIds: Set<string>): {userId: string, user: RoomMember}[] {
         const maxConsideredMembers = 200;
         const joinedRooms = MatrixClientPeg.get().getRooms()
             .filter(r => r.getMyMembership() === 'join' && r.getJoinedMemberCount() <= maxConsideredMembers);
@@ -574,7 +590,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         members.sort((a, b) => {
             if (a.score === b.score) {
                 if (a.numRooms === b.numRooms) {
-                    return a.member.userId.localeCompare(b.member.userId);
+                    return compare(a.member.userId, b.member.userId);
                 }
 
                 return b.numRooms - a.numRooms;
@@ -585,7 +601,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         return members.map(m => ({userId: m.member.userId, user: m.member}));
     }
 
-    _shouldAbortAfterInviteError(result): boolean {
+    private shouldAbortAfterInviteError(result): boolean {
         const failedUsers = Object.keys(result.states).filter(a => result.states[a] === 'error');
         if (failedUsers.length > 0) {
             console.log("Failed to invite users: ", result);
@@ -600,7 +616,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         return false;
     }
 
-    _convertFilter(): Member[] {
+    private convertFilter(): Member[] {
         // Check to see if there's anything to convert first
         if (!this.state.filterText || !this.state.filterText.includes('@')) return this.state.targets || [];
 
@@ -617,10 +633,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         return newTargets;
     }
 
-    _startDm = async () => {
+    private startDm = async () => {
         this.setState({busy: true});
         const client = MatrixClientPeg.get();
-        const targets = this._convertFilter();
+        const targets = this.convertFilter();
         const targetIds = targets.map(t => t.userId);
 
         // Check if there is already a DM with these people and reuse it if possible.
@@ -694,11 +710,11 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     };
 
-    _inviteUsers = async () => {
+    private inviteUsers = async () => {
         const startTime = CountlyAnalytics.getTimestamp();
         this.setState({busy: true});
-        this._convertFilter();
-        const targets = this._convertFilter();
+        this.convertFilter();
+        const targets = this.convertFilter();
         const targetIds = targets.map(t => t.userId);
 
         const cli = MatrixClientPeg.get();
@@ -715,7 +731,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         try {
             const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
             CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
-            if (!this._shouldAbortAfterInviteError(result)) { // handles setting error message too
+            if (!this.shouldAbortAfterInviteError(result)) { // handles setting error message too
                 this.props.onFinished();
             }
 
@@ -749,9 +765,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     };
 
-    _transferCall = async () => {
-        this._convertFilter();
-        const targets = this._convertFilter();
+    private transferCall = async () => {
+        this.convertFilter();
+        const targets = this.convertFilter();
         const targetIds = targets.map(t => t.userId);
         if (targetIds.length > 1) {
             this.setState({
@@ -790,26 +806,26 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     };
 
-    _onKeyDown = (e) => {
+    private onKeyDown = (e) => {
         if (this.state.busy) return;
         const value = e.target.value.trim();
         const hasModifiers = e.ctrlKey || e.shiftKey || e.metaKey;
         if (!value && this.state.targets.length > 0 && e.key === Key.BACKSPACE && !hasModifiers) {
             // when the field is empty and the user hits backspace remove the right-most target
             e.preventDefault();
-            this._removeMember(this.state.targets[this.state.targets.length - 1]);
+            this.removeMember(this.state.targets[this.state.targets.length - 1]);
         } else if (value && e.key === Key.ENTER && !hasModifiers) {
             // when the user hits enter with something in their field try to convert it
             e.preventDefault();
-            this._convertFilter();
+            this.convertFilter();
         } else if (value && e.key === Key.SPACE && !hasModifiers && value.includes("@") && !value.includes(" ")) {
             // when the user hits space and their input looks like an e-mail/MXID then try to convert it
             e.preventDefault();
-            this._convertFilter();
+            this.convertFilter();
         }
     };
 
-    _updateSuggestions = async (term) => {
+    private updateSuggestions = async (term) => {
         MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
             if (term !== this.state.filterText) {
                 // Discard the results - we were probably too slow on the server-side to make
@@ -918,30 +934,30 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     };
 
-    _updateFilter = (e) => {
+    private updateFilter = (e) => {
         const term = e.target.value;
         this.setState({filterText: term});
 
         // Debounce server lookups to reduce spam. We don't clear the existing server
         // results because they might still be vaguely accurate, likewise for races which
         // could happen here.
-        if (this._debounceTimer) {
-            clearTimeout(this._debounceTimer);
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
         }
-        this._debounceTimer = setTimeout(() => {
-            this._updateSuggestions(term);
+        this.debounceTimer = setTimeout(() => {
+            this.updateSuggestions(term);
         }, 150); // 150ms debounce (human reaction time + some)
     };
 
-    _showMoreRecents = () => {
+    private showMoreRecents = () => {
         this.setState({numRecentsShown: this.state.numRecentsShown + INCREMENT_ROOMS_SHOWN});
     };
 
-    _showMoreSuggestions = () => {
+    private showMoreSuggestions = () => {
         this.setState({numSuggestionsShown: this.state.numSuggestionsShown + INCREMENT_ROOMS_SHOWN});
     };
 
-    _toggleMember = (member: Member) => {
+    private toggleMember = (member: Member) => {
         if (!this.state.busy) {
             let filterText = this.state.filterText;
             const targets = this.state.targets.map(t => t); // cheap clone for mutation
@@ -954,13 +970,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             }
             this.setState({targets, filterText});
 
-            if (this._editorRef && this._editorRef.current) {
-                this._editorRef.current.focus();
+            if (this.editorRef && this.editorRef.current) {
+                this.editorRef.current.focus();
             }
         }
     };
 
-    _removeMember = (member: Member) => {
+    private removeMember = (member: Member) => {
         const targets = this.state.targets.map(t => t); // cheap clone for mutation
         const idx = targets.indexOf(member);
         if (idx >= 0) {
@@ -968,12 +984,12 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             this.setState({targets});
         }
 
-        if (this._editorRef && this._editorRef.current) {
-            this._editorRef.current.focus();
+        if (this.editorRef && this.editorRef.current) {
+            this.editorRef.current.focus();
         }
     };
 
-    _onPaste = async (e) => {
+    private onPaste = async (e) => {
         if (this.state.filterText) {
             // if the user has already typed something, just let them
             // paste normally.
@@ -1027,6 +1043,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 failed.push(address);
             }
         }
+        if (this.unmounted) return;
 
         if (failed.length > 0) {
             const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
@@ -1043,17 +1060,17 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         this.setState({targets: [...this.state.targets, ...toAdd]});
     };
 
-    _onClickInputArea = (e) => {
+    private onClickInputArea = (e) => {
         // Stop the browser from highlighting text
         e.preventDefault();
         e.stopPropagation();
 
-        if (this._editorRef && this._editorRef.current) {
-            this._editorRef.current.focus();
+        if (this.editorRef && this.editorRef.current) {
+            this.editorRef.current.focus();
         }
     };
 
-    _onUseDefaultIdentityServerClick = (e) => {
+    private onUseDefaultIdentityServerClick = (e) => {
         e.preventDefault();
 
         // Update the IS in account data. Actually using it may trigger terms.
@@ -1062,21 +1079,21 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         this.setState({canUseIdentityServer: true, tryingIdentityServer: false});
     };
 
-    _onManageSettingsClick = (e) => {
+    private onManageSettingsClick = (e) => {
         e.preventDefault();
         dis.fire(Action.ViewUserSettings);
         this.props.onFinished();
     };
 
-    _onCommunityInviteClick = (e) => {
+    private onCommunityInviteClick = (e) => {
         this.props.onFinished();
         showCommunityInviteDialog(CommunityPrototypeStore.instance.getSelectedCommunityId());
     };
 
-    _renderSection(kind: "recents"|"suggestions") {
+    private renderSection(kind: "recents"|"suggestions") {
         let sourceMembers = kind === 'recents' ? this.state.recents : this.state.suggestions;
         let showNum = kind === 'recents' ? this.state.numRecentsShown : this.state.numSuggestionsShown;
-        const showMoreFn = kind === 'recents' ? this._showMoreRecents.bind(this) : this._showMoreSuggestions.bind(this);
+        const showMoreFn = kind === 'recents' ? this.showMoreRecents.bind(this) : this.showMoreSuggestions.bind(this);
         const lastActive = (m) => kind === 'recents' ? m.lastActive : null;
         let sectionName = kind === 'recents' ? _t("Recent Conversations") : _t("Suggestions");
         let sectionSubname = null;
@@ -1156,7 +1173,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 member={r.user}
                 lastActiveTs={lastActive(r)}
                 key={r.userId}
-                onToggle={this._toggleMember}
+                onToggle={this.toggleMember}
                 highlightWord={this.state.filterText}
                 isSelected={this.state.targets.some(t => t.userId === r.userId)}
             />
@@ -1171,32 +1188,32 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         );
     }
 
-    _renderEditor() {
+    private renderEditor() {
         const targets = this.state.targets.map(t => (
-            <DMUserTile member={t} onRemove={!this.state.busy && this._removeMember} key={t.userId} />
+            <DMUserTile member={t} onRemove={!this.state.busy && this.removeMember} key={t.userId} />
         ));
         const input = (
             <input
                 type="text"
-                onKeyDown={this._onKeyDown}
-                onChange={this._updateFilter}
+                onKeyDown={this.onKeyDown}
+                onChange={this.updateFilter}
                 value={this.state.filterText}
-                ref={this._editorRef}
-                onPaste={this._onPaste}
+                ref={this.editorRef}
+                onPaste={this.onPaste}
                 autoFocus={true}
                 disabled={this.state.busy}
                 autoComplete="off"
             />
         );
         return (
-            <div className='mx_InviteDialog_editor' onClick={this._onClickInputArea}>
+            <div className='mx_InviteDialog_editor' onClick={this.onClickInputArea}>
                 {targets}
                 {input}
             </div>
         );
     }
 
-    _renderIdentityServerWarning() {
+    private renderIdentityServerWarning() {
         if (!this.state.tryingIdentityServer || this.state.canUseIdentityServer ||
             !SettingsStore.getValue(UIFeature.IdentityServer)
         ) {
@@ -1214,8 +1231,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl),
                     },
                     {
-                        default: sub => <a href="#" onClick={this._onUseDefaultIdentityServerClick}>{sub}</a>,
-                        settings: sub => <a href="#" onClick={this._onManageSettingsClick}>{sub}</a>,
+                        default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{sub}</a>,
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
                     },
                 )}</div>
             );
@@ -1225,13 +1242,32 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                     "Use an identity server to invite by email. " +
                     "Manage in <settings>Settings</settings>.",
                     {}, {
-                        settings: sub => <a href="#" onClick={this._onManageSettingsClick}>{sub}</a>,
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
                     },
                 )}</div>
             );
         }
     }
 
+    private async onLinkClick(e) {
+        e.preventDefault();
+        selectText(e.target);
+    }
+
+    private onCopyClick = async e => {
+        e.preventDefault();
+        const target = e.target; // copy target before we go async and React throws it away
+
+        const successful = await copyPlaintext(makeUserPermalink(MatrixClientPeg.get().getUserId()));
+        const buttonRect = target.getBoundingClientRect();
+        const { close } = ContextMenu.createMenu(GenericTextContextMenu, {
+            ...toRightOf(buttonRect, 2),
+            message: successful ? _t("Copied!") : _t("Failed to copy"),
+        });
+        // Drop a reference to this close handler for componentWillUnmount
+        this.closeCopiedTooltip = target.onmouseleave = close;
+    };
+
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
@@ -1242,12 +1278,12 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             spinner = <Spinner w={20} h={20} />;
         }
 
-
         let title;
         let helpText;
         let buttonText;
         let goButtonFn;
-        let consultSection;
+        let extraSection;
+        let footer;
         let keySharingWarning = <span />;
 
         const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer);
@@ -1298,7 +1334,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                             return (
                                 <AccessibleButton
                                     kind="link"
-                                    onClick={this._onCommunityInviteClick}
+                                    onClick={this.onCommunityInviteClick}
                                 >{sub}</AccessibleButton>
                             );
                         },
@@ -1309,7 +1345,27 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 </React.Fragment>;
             }
             buttonText = _t("Go");
-            goButtonFn = this._startDm;
+            goButtonFn = this.startDm;
+            extraSection = <div className="mx_InviteDialog_section_hidden_suggestions_disclaimer">
+                <span>{ _t("Some suggestions may be hidden for privacy.") }</span>
+                <p>{ _t("If you can't see who you’re looking for, send them your invite link below.") }</p>
+            </div>;
+            const link = makeUserPermalink(MatrixClientPeg.get().getUserId());
+            footer = <div className="mx_InviteDialog_footer">
+                <h3>{ _t("Or send invite link") }</h3>
+                <div className="mx_InviteDialog_footer_link">
+                    <a href={link} onClick={this.onLinkClick}>
+                        { link }
+                    </a>
+                    <AccessibleTooltipButton
+                        title={_t("Copy")}
+                        onClick={this.onCopyClick}
+                        className="mx_InviteDialog_footer_link_copy"
+                    >
+                        <div />
+                    </AccessibleTooltipButton>
+                </div>
+            </div>
         } else if (this.props.kind === KIND_INVITE) {
             const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
             const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom();
@@ -1348,7 +1404,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             });
 
             buttonText = _t("Invite");
-            goButtonFn = this._inviteUsers;
+            goButtonFn = this.inviteUsers;
 
             if (cli.isRoomEncrypted(this.props.roomId)) {
                 const room = cli.getRoom(this.props.roomId);
@@ -1370,8 +1426,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         } else if (this.props.kind === KIND_CALL_TRANSFER) {
             title = _t("Transfer");
             buttonText = _t("Transfer");
-            goButtonFn = this._transferCall;
-            consultSection = <div>
+            goButtonFn = this.transferCall;
+            footer = <div>
                 <label>
                     <input type="checkbox" checked={this.state.consultFirst} onChange={this.onConsultFirstChange} />
                     {_t("Consult first")}
@@ -1385,7 +1441,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             || (this.state.filterText && this.state.filterText.includes('@'));
         return (
             <BaseDialog
-                className='mx_InviteDialog'
+                className={classNames("mx_InviteDialog", {
+                    mx_InviteDialog_hasFooter: !!footer,
+                })}
                 hasCancel={true}
                 onFinished={this.props.onFinished}
                 title={title}
@@ -1393,7 +1451,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 <div className='mx_InviteDialog_content'>
                     <p className='mx_InviteDialog_helpText'>{helpText}</p>
                     <div className='mx_InviteDialog_addressBar'>
-                        {this._renderEditor()}
+                        {this.renderEditor()}
                         <div className='mx_InviteDialog_buttonAndSpinner'>
                             <AccessibleButton
                                 kind="primary"
@@ -1407,13 +1465,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         </div>
                     </div>
                     {keySharingWarning}
-                    {this._renderIdentityServerWarning()}
+                    {this.renderIdentityServerWarning()}
                     <div className='error'>{this.state.errorText}</div>
                     <div className='mx_InviteDialog_userSections'>
-                        {this._renderSection('recents')}
-                        {this._renderSection('suggestions')}
+                        {this.renderSection('recents')}
+                        {this.renderSection('suggestions')}
+                        {extraSection}
                     </div>
-                    {consultSection}
+                    {footer}
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/MessageEditHistoryDialog.js

@@ -159,7 +159,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
                 stickyBottom={false}
                 startAtBottom={false}
             >
-                <ul className="mx_MessageEditHistoryDialog_edits mx_MessagePanel_alwaysShowTimestamps">{this._renderEdits()}</ul>
+                <ul className="mx_MessageEditHistoryDialog_edits">{this._renderEdits()}</ul>
             </ScrollPanel>);
         }
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 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,7 +16,7 @@ limitations under the License.
 
 import * as React from 'react';
 import BaseDialog from './BaseDialog';
-import { _t } from '../../../languageHandler';
+import { _t, getUserLanguage } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
 import {
     ClientWidgetApi,
@@ -39,6 +39,8 @@ import {OwnProfileStore} from "../../../stores/OwnProfileStore";
 import { arrayFastClone } from "../../../utils/arrays";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {ELEMENT_CLIENT_ID} from "../../../identifiers";
+import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps {
     widgetDefinition: IModalWidgetOpenRequestData;
@@ -129,6 +131,9 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
             currentUserId: MatrixClientPeg.get().getUserId(),
             userDisplayName: OwnProfileStore.instance.displayName,
             userHttpAvatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(),
+            clientId: ELEMENT_CLIENT_ID,
+            clientTheme: SettingsStore.getValue("theme"),
+            clientLanguage: getUserLanguage(),
         });
 
         const parsed = new URL(templated);

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import TabbedView, {Tab} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
 import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
@@ -39,31 +38,36 @@ export const ROOM_NOTIFICATIONS_TAB = "ROOM_NOTIFICATIONS_TAB";
 export const ROOM_BRIDGES_TAB = "ROOM_BRIDGES_TAB";
 export const ROOM_ADVANCED_TAB = "ROOM_ADVANCED_TAB";
 
+interface IProps {
+    roomId: string;
+    onFinished: (success: boolean) => void;
+    initialTabId?: string;
+}
+
 @replaceableComponent("views.dialogs.RoomSettingsDialog")
-export default class RoomSettingsDialog extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
+export default class RoomSettingsDialog extends React.Component<IProps> {
+    private dispatcherRef: string;
 
-    componentDidMount() {
-        this._dispatcherRef = dis.register(this._onAction);
+    public componentDidMount() {
+        this.dispatcherRef = dis.register(this.onAction);
     }
 
-    componentWillUnmount() {
-        if (this._dispatcherRef) dis.unregister(this._dispatcherRef);
+    public componentWillUnmount() {
+        if (this.dispatcherRef) {
+            dis.unregister(this.dispatcherRef);
+        }
     }
 
-    _onAction = (payload) => {
+    private onAction = (payload): void => {
         // When view changes below us, close the room settings
         // whilst the modal is open this can only be triggered when someone hits Leave Room
         if (payload.action === 'view_home_page') {
-            this.props.onFinished();
+            this.props.onFinished(true);
         }
     };
 
-    _getTabs() {
-        const tabs = [];
+    private getTabs(): Tab[] {
+        const tabs: Tab[] = [];
 
         tabs.push(new Tab(
             ROOM_GENERAL_TAB,
@@ -123,7 +127,10 @@ export default class RoomSettingsDialog extends React.Component {
                 title={_t("Room Settings - %(roomName)s", {roomName})}
             >
                 <div className='mx_SettingsDialog_content'>
-                    <TabbedView tabs={this._getTabs()} />
+                    <TabbedView
+                        tabs={this.getTabs()}
+                        initialTabId={this.props.initialTabId}
+                    />
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -217,6 +217,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                         value={this.state.otherHomeserver}
                         validateOnChange={false}
                         validateOnFocus={false}
+                        id="mx_homeserverInput"
                     />
                 </StyledRadioButton>
                 <p>

src/components/views/dialogs/SpaceSettingsDialog.tsx

@@ -30,8 +30,8 @@ import ToggleSwitch from "../elements/ToggleSwitch";
 import AccessibleButton from "../elements/AccessibleButton";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {allSettled} from "../../../utils/promise";
 import {useDispatcher} from "../../../hooks/useDispatcher";
+import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -73,9 +73,13 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
         const promises = [];
 
         if (avatarChanged) {
-            promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {
-                url: await cli.uploadContent(newAvatar),
-            }, ""));
+            if (newAvatar) {
+                promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {
+                    url: await cli.uploadContent(newAvatar),
+                }, ""));
+            } else {
+                promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {}, ""));
+            }
         }
 
         if (nameChanged) {
@@ -90,7 +94,7 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
             promises.push(cli.sendStateEvent(space.roomId, EventType.RoomJoinRules, { join_rule: joinRule }, ""));
         }
 
-        const results = await allSettled(promises);
+        const results = await Promise.allSettled(promises);
         setBusy(false);
         const failures = results.filter(r => r.status === "rejected");
         if (failures.length > 0) {
@@ -111,15 +115,17 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
 
             { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
 
+            <SpaceFeedbackPrompt onClick={() => onFinished(false)} />
+
             <SpaceBasicSettings
                 avatarUrl={avatarUrlForRoom(space, 80, 80, "crop")}
-                avatarDisabled={!canSetAvatar}
+                avatarDisabled={busy || !canSetAvatar}
                 setAvatar={setNewAvatar}
                 name={name}
-                nameDisabled={!canSetName}
+                nameDisabled={busy || !canSetName}
                 setName={setName}
                 topic={topic}
-                topicDisabled={!canSetTopic}
+                topicDisabled={busy || !canSetTopic}
                 setTopic={setTopic}
             />
 

src/components/views/dialogs/UntrustedDeviceDialog.tsx

@@ -0,0 +1,73 @@
+/*
+Copyright 2019, 2020, 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 { User } from "matrix-js-sdk/src/models/user";
+
+import { _t } from "../../../languageHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import E2EIcon from "../rooms/E2EIcon";
+import AccessibleButton from "../elements/AccessibleButton";
+import BaseDialog from "./BaseDialog";
+import { IDialogProps } from "./IDialogProps";
+import { IDevice } from "../right_panel/UserInfo";
+
+interface IProps extends IDialogProps {
+    user: User;
+    device: IDevice;
+}
+
+const UntrustedDeviceDialog: React.FC<IProps> = ({device, user, onFinished}) => {
+    let askToVerifyText;
+    let newSessionText;
+
+    if (MatrixClientPeg.get().getUserId() === user.userId) {
+        newSessionText = _t("You signed in to a new session without verifying it:");
+        askToVerifyText = _t("Verify your other session using one of the options below.");
+    } else {
+        newSessionText = _t("%(name)s (%(userId)s) signed in to a new session without verifying it:",
+            {name: user.displayName, userId: user.userId});
+        askToVerifyText = _t("Ask this user to verify their session, or manually verify it below.");
+    }
+
+    return <BaseDialog
+        onFinished={onFinished}
+        className="mx_UntrustedDeviceDialog"
+        title={<>
+            <E2EIcon status="warning" size={24} hideTooltip={true} />
+            { _t("Not Trusted")}
+        </>}
+    >
+        <div className="mx_Dialog_content" id='mx_Dialog_content'>
+            <p>{newSessionText}</p>
+            <p>{device.getDisplayName()} ({device.deviceId})</p>
+            <p>{askToVerifyText}</p>
+        </div>
+        <div className='mx_Dialog_buttons'>
+            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("legacy")}>
+                { _t("Manually Verify by Text") }
+            </AccessibleButton>
+            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("sas")}>
+                { _t("Interactively verify by Emoji") }
+            </AccessibleButton>
+            <AccessibleButton kind="primary" onClick={() => onFinished(false)}>
+                { _t("Done") }
+            </AccessibleButton>
+        </div>
+    </BaseDialog>;
+};
+
+export default UntrustedDeviceDialog;

src/components/views/dialogs/UploadConfirmDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -16,20 +16,23 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import filesize from "filesize";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { getBlobSafeMimeType } from '../../../utils/blobs';
+
+interface IProps {
+    file: File;
+    currentIndex: number;
+    totalFiles?: number;
+    onFinished: (uploadConfirmed: boolean, uploadAll?: boolean) => void;
+}
 
 @replaceableComponent("views.dialogs.UploadConfirmDialog")
-export default class UploadConfirmDialog extends React.Component {
-    static propTypes = {
-        file: PropTypes.object.isRequired,
-        currentIndex: PropTypes.number,
-        totalFiles: PropTypes.number,
-        onFinished: PropTypes.func.isRequired,
-    }
+export default class UploadConfirmDialog extends React.Component<IProps> {
+    private objectUrl: string;
+    private mimeType: string;
 
     static defaultProps = {
         totalFiles: 1,
@@ -38,22 +41,28 @@ export default class UploadConfirmDialog extends React.Component {
     constructor(props) {
         super(props);
 
-        this._objectUrl = URL.createObjectURL(props.file);
+        // Create a fresh `Blob` for previewing (even though `File` already is
+        // one) so we can adjust the MIME type if needed.
+        this.mimeType = getBlobSafeMimeType(props.file.type);
+        const blob = new Blob([props.file], { type:
+            this.mimeType,
+        });
+        this.objectUrl = URL.createObjectURL(blob);
     }
 
     componentWillUnmount() {
-        if (this._objectUrl) URL.revokeObjectURL(this._objectUrl);
+        if (this.objectUrl) URL.revokeObjectURL(this.objectUrl);
     }
 
-    _onCancelClick = () => {
+    private onCancelClick = () => {
         this.props.onFinished(false);
     }
 
-    _onUploadClick = () => {
+    private onUploadClick = () => {
         this.props.onFinished(true);
     }
 
-    _onUploadAllClick = () => {
+    private onUploadAllClick = () => {
         this.props.onFinished(true, true);
     }
 
@@ -75,10 +84,10 @@ export default class UploadConfirmDialog extends React.Component {
         }
 
         let preview;
-        if (this.props.file.type.startsWith('image/')) {
+        if (this.mimeType.startsWith('image/')) {
             preview = <div className="mx_UploadConfirmDialog_previewOuter">
                 <div className="mx_UploadConfirmDialog_previewInner">
-                    <div><img className="mx_UploadConfirmDialog_imagePreview" src={this._objectUrl} /></div>
+                    <div><img className="mx_UploadConfirmDialog_imagePreview" src={this.objectUrl} /></div>
                     <div>{this.props.file.name} ({filesize(this.props.file.size)})</div>
                 </div>
             </div>;
@@ -95,7 +104,7 @@ export default class UploadConfirmDialog extends React.Component {
 
         let uploadAllButton;
         if (this.props.currentIndex + 1 < this.props.totalFiles) {
-            uploadAllButton = <button onClick={this._onUploadAllClick}>
+            uploadAllButton = <button onClick={this.onUploadAllClick}>
                 {_t("Upload all")}
             </button>;
         }
@@ -103,7 +112,7 @@ export default class UploadConfirmDialog extends React.Component {
         return (
             <BaseDialog className='mx_UploadConfirmDialog'
                 fixedWidth={false}
-                onFinished={this._onCancelClick}
+                onFinished={this.onCancelClick}
                 title={title}
                 contentId='mx_Dialog_content'
             >
@@ -113,7 +122,7 @@ export default class UploadConfirmDialog extends React.Component {
 
                 <DialogButtons primaryButton={_t('Upload')}
                     hasCancel={false}
-                    onPrimaryButtonClick={this._onUploadClick}
+                    onPrimaryButtonClick={this.onUploadClick}
                     focus={true}
                 >
                     {uploadAllButton}

src/components/views/dialogs/UserSettingsDialog.js

@@ -125,7 +125,10 @@ export default class UserSettingsDialog extends React.Component {
             "mx_UserSettingsDialog_securityIcon",
             <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
-        if (SdkConfig.get()['showLabsSettings']) {
+        // Show the Labs tab if enabled or if there are any active betas
+        if (SdkConfig.get()['showLabsSettings']
+            || SettingsStore.getFeatureSettingNames().some(k => SettingsStore.getBetaInfo(k))
+        ) {
             tabs.push(new Tab(
                 USER_LABS_TAB,
                 _td("Labs"),

src/components/views/dialogs/security/AccessSecretStorageDialog.tsx

@@ -345,6 +345,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                 <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this.onPassPhraseNext}>
                     <input
                         type="password"
+                        id="mx_passPhraseInput"
                         className="mx_AccessSecretStorageDialog_passPhraseInput"
                         onChange={this.onPassPhraseChange}
                         value={this.state.passPhrase}

src/components/views/directory/NetworkDropdown.tsx

@@ -1,7 +1,6 @@
 /*
-Copyright 2016 OpenMarket Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2016, 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.
@@ -16,39 +15,56 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useEffect, useState} from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from "react";
+import { MatrixError } from "matrix-js-sdk/src/http-api";
 
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { instanceForInstanceId } from '../../../utils/DirectoryUtils';
 import {
+    ChevronFace,
     ContextMenu,
-    useContextMenu,
     ContextMenuButton,
-    MenuItemRadio,
-    MenuItem,
     MenuGroup,
+    MenuItem,
+    MenuItemRadio,
+    useContextMenu,
 } from "../../structures/ContextMenu";
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import {useSettingValue} from "../../../hooks/useSettings";
-import * as sdk from "../../../index";
+import { useSettingValue } from "../../../hooks/useSettings";
 import Modal from "../../../Modal";
 import SettingsStore from "../../../settings/SettingsStore";
 import withValidation from "../elements/Validation";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import TextInputDialog from "../dialogs/TextInputDialog";
+import QuestionDialog from "../dialogs/QuestionDialog";
+import UIStore from "../../../stores/UIStore";
+import { compare } from "../../../utils/strings";
 
 export const ALL_ROOMS = Symbol("ALL_ROOMS");
 
 const SETTING_NAME = "room_directory_servers";
 
-const inPlaceOf = (elementRect) => ({
-    right: window.innerWidth - elementRect.right,
+const inPlaceOf = (elementRect: Pick<DOMRect, "right" | "top">) => ({
+    right: UIStore.instance.windowWidth - elementRect.right,
     top: elementRect.top,
     chevronOffset: 0,
-    chevronFace: "none",
+    chevronFace: ChevronFace.None,
 });
 
-const validServer = withValidation({
+const validServer = withValidation<undefined, { error?: MatrixError }>({
+    deriveData: async ({ value }) => {
+        try {
+            // check if we can successfully load this server's room directory
+            await MatrixClientPeg.get().publicRooms({
+                limit: 1,
+                server: value,
+            });
+            return {};
+        } catch (error) {
+            return { error };
+        }
+    },
     rules: [
         {
             key: "required",
@@ -57,34 +73,58 @@ const validServer = withValidation({
         }, {
             key: "available",
             final: true,
-            test: async ({ value }) => {
-                try {
-                    const opts = {
-                        limit: 1,
-                        server: value,
-                    };
-                    // check if we can successfully load this server's room directory
-                    await MatrixClientPeg.get().publicRooms(opts);
-                    return true;
-                } catch (e) {
-                    return false;
-                }
-            },
+            test: async (_, { error }) => !error,
             valid: () => _t("Looks good"),
-            invalid: () => _t("Can't find this server or its room list"),
+            invalid: ({ error }) => error.errcode === "M_FORBIDDEN"
+                ? _t("You are not allowed to view this server's rooms list")
+                : _t("Can't find this server or its room list"),
         },
     ],
 });
 
+/* eslint-disable camelcase */
+export interface IFieldType {
+    regexp: string;
+    placeholder: string;
+}
+
+export interface IInstance {
+    desc: string;
+    icon?: string;
+    fields: object;
+    network_id: string;
+    // XXX: this is undocumented but we rely on it.
+    // we inject a fake entry with a symbolic instance_id.
+    instance_id: string | symbol;
+}
+
+export interface IProtocol {
+    user_fields: string[];
+    location_fields: string[];
+    icon: string;
+    field_types: Record<string, IFieldType>;
+    instances: IInstance[];
+}
+/* eslint-enable camelcase */
+
+export type Protocols = Record<string, IProtocol>;
+
+interface IProps {
+    protocols: Protocols;
+    selectedServerName: string;
+    selectedInstanceId: string | symbol;
+    onOptionChange(server: string, instanceId?: string | symbol): void;
+}
+
 // This dropdown sources homeservers from three places:
 // + your currently connected homeserver
 // + homeservers in config.json["roomDirectory"]
 // + homeservers in SettingsStore["room_directory_servers"]
 // if a server exists in multiple, only keep the top-most entry.
 
-const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, selectedInstanceId}) => {
-    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
-    const _userDefinedServers = useSettingValue(SETTING_NAME);
+const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, selectedInstanceId }: IProps) => {
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
+    const _userDefinedServers: string[] = useSettingValue(SETTING_NAME);
     const [userDefinedServers, _setUserDefinedServers] = useState(_userDefinedServers);
 
     const handlerFactory = (server, instanceId) => {
@@ -96,7 +136,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
 
     const setUserDefinedServers = servers => {
         _setUserDefinedServers(servers);
-        SettingsStore.setValue(SETTING_NAME, null, "account", servers);
+        SettingsStore.setValue(SETTING_NAME, null, SettingLevel.ACCOUNT, servers);
     };
     // keep local echo up to date with external changes
     useEffect(() => {
@@ -110,7 +150,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
         const roomDirectory = config.roomDirectory || {};
 
         const hsName = MatrixClientPeg.getHomeserverName();
-        const configServers = new Set(roomDirectory.servers);
+        const configServers = new Set<string>(roomDirectory.servers);
 
         // configured servers take preference over user-defined ones, if one occurs in both ignore the latter one.
         const removableServers = new Set(userDefinedServers.filter(s => !configServers.has(s) && s !== hsName));
@@ -134,15 +174,21 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
                 // add a fake protocol with the ALL_ROOMS symbol
                 protocolsList.push({
                     instances: [{
+                        fields: [],
+                        network_id: "",
                         instance_id: ALL_ROOMS,
                         desc: _t("All rooms"),
                     }],
+                    location_fields: [],
+                    user_fields: [],
+                    field_types: {},
+                    icon: "",
                 });
             }
 
             protocolsList.forEach(({instances=[]}) => {
                 [...instances].sort((b, a) => {
-                    return a.desc.localeCompare(b.desc);
+                    return compare(a.desc, b.desc);
                 }).forEach(({desc, instance_id: instanceId}) => {
                     entries.push(
                         <MenuItemRadio
@@ -170,7 +216,6 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
             if (removableServers.has(server)) {
                 const onClick = async () => {
                     closeMenu();
-                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                     const {finished} = Modal.createTrackedDialog("Network Dropdown", "Remove server", QuestionDialog, {
                         title: _t("Are you sure?"),
                         description: _t("Are you sure you want to remove <b>%(serverName)s</b>", {
@@ -189,7 +234,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
                     setUserDefinedServers(servers.filter(s => s !== server));
 
                     // the selected server is being removed, reset to our HS
-                    if (serverSelected === server) {
+                    if (serverSelected) {
                         onOptionChange(hsName, undefined);
                     }
                 };
@@ -221,7 +266,6 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
 
         const onClick = async () => {
             closeMenu();
-            const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
             const { finished } = Modal.createTrackedDialog("Network Dropdown", "Add a new server", TextInputDialog, {
                 title: _t("Add a new server"),
                 description: _t("Enter the name of a new server you want to explore."),
@@ -282,9 +326,4 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
     </div>;
 };
 
-NetworkDropdown.propTypes = {
-    onOptionChange: PropTypes.func.isRequired,
-    protocols: PropTypes.object,
-};
-
 export default NetworkDropdown;

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
-import Tooltip from './Tooltip';
+import Tooltip, {Alignment} from './Tooltip';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
@@ -28,6 +28,7 @@ interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
     tooltipClassName?: string;
     forceHide?: boolean;
     yOffset?: number;
+    alignment?: Alignment;
 }
 
 interface IState {
@@ -66,14 +67,15 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
 
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const {title, tooltip, children, tooltipClassName, forceHide, yOffset, ...props} = this.props;
+        const {title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, ...props} = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
             tooltipClassName={classNames("mx_AccessibleTooltipButton_tooltip", tooltipClassName)}
             label={tooltip || title}
             yOffset={yOffset}
-        /> : <div />;
+            alignment={alignment}
+        /> : null;
         return (
             <AccessibleButton
                 {...props}

src/components/views/elements/ActionButton.js

@@ -32,6 +32,7 @@ export default class ActionButton extends React.Component {
         label: PropTypes.string.isRequired,
         iconPath: PropTypes.string,
         className: PropTypes.string,
+        children: PropTypes.node,
     };
 
     static defaultProps = {
@@ -79,7 +80,8 @@ export default class ActionButton extends React.Component {
         }
 
         return (
-            <AccessibleButton className={classNames.join(" ")}
+            <AccessibleButton
+                className={classNames.join(" ")}
                 onClick={this._onClick}
                 onMouseEnter={this._onMouseEnter}
                 onMouseLeave={this._onMouseLeave}
@@ -87,6 +89,7 @@ export default class ActionButton extends React.Component {
             >
                 { icon }
                 { tooltip }
+                { this.props.children }
             </AccessibleButton>
         );
     }

src/components/views/elements/AppTile.js

@@ -47,9 +47,14 @@ export default class AppTile extends React.Component {
 
         // The key used for PersistedElement
         this._persistKey = getPersistKey(this.props.app.id);
-        this._sgWidget = new StopGapWidget(this.props);
-        this._sgWidget.on("preparing", this._onWidgetPrepared);
-        this._sgWidget.on("ready", this._onWidgetReady);
+        try {
+            this._sgWidget = new StopGapWidget(this.props);
+            this._sgWidget.on("preparing", this._onWidgetPrepared);
+            this._sgWidget.on("ready", this._onWidgetReady);
+        } catch (e) {
+            console.log("Failed to construct widget", e);
+            this._sgWidget = null;
+        }
         this.iframe = null; // ref to the iframe (callback style)
 
         this.state = this._getNewState(props);
@@ -97,7 +102,7 @@ export default class AppTile extends React.Component {
             // Force the widget to be non-persistent (able to be deleted/forgotten)
             ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
             PersistedElement.destroyElement(this._persistKey);
-            this._sgWidget.stop();
+            if (this._sgWidget) this._sgWidget.stop();
         }
 
         this.setState({ hasPermissionToLoad });
@@ -117,7 +122,7 @@ export default class AppTile extends React.Component {
 
     componentDidMount() {
         // Only fetch IM token on mount if we're showing and have permission to load
-        if (this.state.hasPermissionToLoad) {
+        if (this._sgWidget && this.state.hasPermissionToLoad) {
             this._startWidget();
         }
 
@@ -146,10 +151,15 @@ export default class AppTile extends React.Component {
         if (this._sgWidget) {
             this._sgWidget.stop();
         }
-        this._sgWidget = new StopGapWidget(newProps);
-        this._sgWidget.on("preparing", this._onWidgetPrepared);
-        this._sgWidget.on("ready", this._onWidgetReady);
-        this._startWidget();
+        try {
+            this._sgWidget = new StopGapWidget(newProps);
+            this._sgWidget.on("preparing", this._onWidgetPrepared);
+            this._sgWidget.on("ready", this._onWidgetReady);
+            this._startWidget();
+        } catch (e) {
+            console.log("Failed to construct widget", e);
+            this._sgWidget = null;
+        }
     }
 
     _startWidget() {
@@ -161,7 +171,7 @@ export default class AppTile extends React.Component {
     _iframeRefChange = (ref) => {
         this.iframe = ref;
         if (ref) {
-            this._sgWidget.start(ref);
+            if (this._sgWidget) this._sgWidget.start(ref);
         } else {
             this._resetWidget(this.props);
         }
@@ -209,7 +219,7 @@ export default class AppTile extends React.Component {
         // Delete the widget from the persisted store for good measure.
         PersistedElement.destroyElement(this._persistKey);
 
-        this._sgWidget.stop({forceDestroy: true});
+        if (this._sgWidget) this._sgWidget.stop({forceDestroy: true});
     }
 
     _onWidgetPrepared = () => {
@@ -340,7 +350,13 @@ export default class AppTile extends React.Component {
                 <Spinner message={_t("Loading...")} />
             </div>
         );
-        if (!this.state.hasPermissionToLoad) {
+        if (this._sgWidget === null) {
+            appTileBody = (
+                <div className={appTileBodyClass} style={appTileBodyStyles}>
+                    <AppWarning errorMsg={_t("Error loading Widget")} />
+                </div>
+            );
+        } else if (!this.state.hasPermissionToLoad) {
             // only possible for room widgets, can assert this.props.room here
             const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
             appTileBody = (
@@ -364,7 +380,7 @@ export default class AppTile extends React.Component {
             if (this.isMixedContent()) {
                 appTileBody = (
                     <div className={appTileBodyClass} style={appTileBodyStyles}>
-                        <AppWarning errorMsg="Error - Mixed content" />
+                        <AppWarning errorMsg={_t("Error - Mixed content")} />
                     </div>
                 );
             } else {
@@ -417,6 +433,8 @@ export default class AppTile extends React.Component {
                     onFinished={this._closeContextMenu}
                     showUnpin={!this.props.userWidget}
                     userWidget={this.props.userWidget}
+                    onEditClick={this.props.onEditClick}
+                    onDeleteClick={this.props.onDeleteClick}
                 />
             );
         }

src/components/views/elements/EffectsOverlay.tsx

@@ -17,7 +17,8 @@
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import ICanvasEffect from '../../../effects/ICanvasEffect';
-import {CHAT_EFFECTS} from '../../../effects'
+import { CHAT_EFFECTS } from '../../../effects'
+import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
 
 interface IProps {
     roomWidth: number;
@@ -37,7 +38,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
                 effect = new Effect(options);
                 effectsRef.current[name] = effect;
             } catch (err) {
-                console.warn('Unable to load effect module at \'../../../effects/${name}\'.', err);
+                console.warn(`Unable to load effect module at '../../../effects/${name}.`, err);
             }
         }
         return effect;
@@ -45,8 +46,8 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
 
     useEffect(() => {
         const resize = () => {
-            if (canvasRef.current) {
-                canvasRef.current.height = window.innerHeight;
+            if (canvasRef.current && canvasRef.current?.height !== UIStore.instance.windowHeight) {
+                canvasRef.current.height = UIStore.instance.windowHeight;
             }
         };
         const onAction = (payload: { action: string }) => {
@@ -58,12 +59,12 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
         }
         const dispatcherRef = dis.register(onAction);
         const canvas = canvasRef.current;
-        canvas.height = window.innerHeight;
-        window.addEventListener('resize', resize, true);
+        canvas.height = UIStore.instance.windowHeight;
+        UIStore.instance.on(UI_EVENTS.Resize, resize);
 
         return () => {
             dis.unregister(dispatcherRef);
-            window.removeEventListener('resize', resize);
+            UIStore.instance.off(UI_EVENTS.Resize, resize);
             // eslint-disable-next-line react-hooks/exhaustive-deps
             const currentEffects = effectsRef.current; // this is not a react node ref, warning can be safely ignored
             for (const effect in currentEffects) {

src/components/views/elements/EventListSummary.tsx

@@ -63,9 +63,9 @@ const EventListSummary: React.FC<IProps> = ({
     // If we are only given few events then just pass them through
     if (events.length < threshold) {
         return (
-            <div className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+            <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
                 { children }
-            </div>
+            </li>
         );
     }
 

src/components/views/elements/EventTilePreview.tsx

@@ -128,6 +128,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
                 mxEvent={event}
                 layout={this.props.layout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                as="div"
             />
         </div>;
     }

src/components/views/elements/Flair.js

@@ -116,7 +116,7 @@ export default class Flair extends React.Component {
 
     render() {
         if (this.state.profiles.length === 0) {
-            return <span className="mx_Flair" />;
+            return null;
         }
         const avatars = this.state.profiles.map((profile, index) => {
             return <FlairAvatar key={index} groupProfile={profile} />;

src/components/views/elements/ImageView.tsx

@@ -19,20 +19,20 @@ limitations under the License.
 import React, { createRef } from 'react';
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
-import {Key} from "../../../Keyboard";
+import { Key } from "../../../Keyboard";
 import FocusLock from "react-focus-lock";
 import MemberAvatar from "../avatars/MemberAvatar";
-import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
-import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
+import { aboveLeftOf, ContextMenu } from '../../structures/ContextMenu';
 import MessageTimestamp from "../messages/MessageTimestamp";
 import SettingsStore from "../../../settings/SettingsStore";
-import {formatFullDate} from "../../../DateUtils";
+import { formatFullDate } from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
-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 { replaceableComponent } from "../../../utils/replaceableComponent";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { normalizeWheelEvent } from "../../../utils/Mouse";
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -95,8 +95,6 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     private initX = 0;
     private initY = 0;
-    private lastX = 0;
-    private lastY = 0;
     private previousX = 0;
     private previousY = 0;
 
@@ -105,25 +103,32 @@ export default class ImageView extends React.Component<IProps, IState> {
         // needs to be passive in order to work with Chromium
         this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
         // We want to recalculate zoom whenever the window's size changes
-        window.addEventListener("resize", this.calculateZoom);
+        window.addEventListener("resize", this.recalculateZoom);
         // After the image loads for the first time we want to calculate the zoom
-        this.image.current.addEventListener("load", this.calculateZoom);
-        // Try to precalculate the zoom from width and height props
-        this.calculateZoom();
+        this.image.current.addEventListener("load", this.recalculateZoom);
     }
 
     componentWillUnmount() {
         this.focusLock.current.removeEventListener('wheel', this.onWheel);
-        window.removeEventListener("resize", this.calculateZoom);
-        this.image.current.removeEventListener("load", this.calculateZoom);
+        window.removeEventListener("resize", this.recalculateZoom);
+        this.image.current.removeEventListener("load", this.recalculateZoom);
     }
 
-    private calculateZoom = () => {
+    private recalculateZoom = () => {
+        this.setZoomAndRotation();
+    }
+
+    private setZoomAndRotation = (inputRotation?: number) => {
         const image = this.image.current;
         const imageWrapper = this.imageWrapper.current;
 
-        const width = this.props.width || image.naturalWidth;
-        const height = this.props.height || image.naturalHeight;
+        const rotation = inputRotation || this.state.rotation;
+
+        const imageIsNotFlipped = rotation % 180 === 0;
+
+        // If the image is rotated take it into account
+        const width = imageIsNotFlipped ? image.naturalWidth : image.naturalHeight;
+        const height = imageIsNotFlipped ? image.naturalHeight : image.naturalWidth;
 
         const zoomX = imageWrapper.clientWidth / width;
         const zoomY = imageWrapper.clientHeight / height;
@@ -135,6 +140,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                 zoom: 1,
                 minZoom: 1,
                 maxZoom: 1,
+                rotation: rotation,
             });
             return;
         }
@@ -143,10 +149,14 @@ export default class ImageView extends React.Component<IProps, IState> {
         // image by default
         const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE;
 
-        if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom});
+        // If zoom is smaller than minZoom don't go below that value
+        const zoom = (this.state.zoom <= this.state.minZoom) ? minZoom : this.state.zoom;
+
         this.setState({
             minZoom: minZoom,
             maxZoom: 1,
+            rotation: rotation,
+            zoom: zoom,
         });
     }
 
@@ -162,7 +172,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             return;
         }
         if (newZoom >= this.state.maxZoom) {
-            this.setState({zoom: this.state.maxZoom});
+            this.setState({ zoom: this.state.maxZoom });
             return;
         }
 
@@ -175,7 +185,7 @@ export default class ImageView extends React.Component<IProps, IState> {
         ev.stopPropagation();
         ev.preventDefault();
 
-        const {deltaY} = normalizeWheelEvent(ev);
+        const { deltaY } = normalizeWheelEvent(ev);
         this.zoom(-(deltaY * ZOOM_COEFFICIENT));
     };
 
@@ -197,14 +207,12 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     private onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
-        const rotationDegrees = cur - 90;
-        this.setState({ rotation: rotationDegrees });
+        this.setZoomAndRotation(cur - 90);
     };
 
     private onRotateClockwiseClick = () => {
         const cur = this.state.rotation;
-        const rotationDegrees = cur + 90;
-        this.setState({ rotation: rotationDegrees });
+        this.setZoomAndRotation(cur + 90);
     };
 
     private onDownloadClick = () => {
@@ -212,6 +220,7 @@ export default class ImageView extends React.Component<IProps, IState> {
         a.href = this.props.src;
         a.download = this.props.name;
         a.target = "_blank";
+        a.rel = "noreferrer noopener";
         a.click();
     };
 
@@ -250,15 +259,15 @@ export default class ImageView extends React.Component<IProps, IState> {
 
         // Zoom in if we are completely zoomed out
         if (this.state.zoom === this.state.minZoom) {
-            this.setState({zoom: this.state.maxZoom});
+            this.setState({ zoom: this.state.maxZoom });
             return;
         }
 
-        this.setState({moving: true});
+        this.setState({ moving: true });
         this.previousX = this.state.translationX;
         this.previousY = this.state.translationY;
-        this.initX = ev.pageX - this.lastX;
-        this.initY = ev.pageY - this.lastY;
+        this.initX = ev.pageX - this.state.translationX;
+        this.initY = ev.pageY - this.state.translationY;
     };
 
     private onMoving = (ev: React.MouseEvent) => {
@@ -267,11 +276,9 @@ export default class ImageView extends React.Component<IProps, IState> {
 
         if (!this.state.moving) return;
 
-        this.lastX = ev.pageX - this.initX;
-        this.lastY = ev.pageY - this.initY;
         this.setState({
-            translationX: this.lastX,
-            translationY: this.lastY,
+            translationX: ev.pageX - this.initX,
+            translationY: ev.pageY - this.initY,
         });
     };
 
@@ -287,8 +294,10 @@ export default class ImageView extends React.Component<IProps, IState> {
                 translationX: 0,
                 translationY: 0,
             });
+            this.initX = 0;
+            this.initY = 0;
         }
-        this.setState({moving: false});
+        this.setState({ moving: false });
     };
 
     private renderContextMenu() {
@@ -359,7 +368,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
             const sender = (
                 <div className="mx_ImageView_info_sender">
-                    {senderName}
+                    { senderName }
                 </div>
             );
             const messageTimestamp = (
@@ -386,10 +395,10 @@ export default class ImageView extends React.Component<IProps, IState> {
 
             info = (
                 <div className="mx_ImageView_info_wrapper">
-                    {avatar}
+                    { avatar }
                     <div className="mx_ImageView_info">
-                        {sender}
-                        {messageTimestamp}
+                        { sender }
+                        { messageTimestamp }
                     </div>
                 </div>
             );
@@ -429,7 +438,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                 <AccessibleTooltipButton
                     className="mx_ImageView_button mx_ImageView_button_zoomIn"
                     title={_t("Zoom in")}
-                    onClick={ this.onZoomInClick }>
+                    onClick={this.onZoomInClick}>
                 </AccessibleTooltipButton>
             );
         }
@@ -445,37 +454,42 @@ export default class ImageView extends React.Component<IProps, IState> {
                 ref={this.focusLock}
             >
                 <div className="mx_ImageView_panel">
-                    {info}
+                    { info }
                     <div className="mx_ImageView_toolbar">
-                        <AccessibleTooltipButton
-                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
-                            title={_t("Rotate Right")}
-                            onClick={this.onRotateClockwiseClick}>
-                        </AccessibleTooltipButton>
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_rotateCCW"
                             title={_t("Rotate Left")}
                             onClick={ this.onRotateCounterClockwiseClick }>
                         </AccessibleTooltipButton>
-                        {zoomOutButton}
-                        {zoomInButton}
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                            title={_t("Rotate Right")}
+                            onClick={this.onRotateClockwiseClick}>
+                        </AccessibleTooltipButton>
+                        { zoomOutButton }
+                        { zoomInButton }
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_download"
                             title={_t("Download")}
                             onClick={ this.onDownloadClick }>
                         </AccessibleTooltipButton>
-                        {contextMenuButton}
+                        { contextMenuButton }
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_close"
                             title={_t("Close")}
                             onClick={ this.props.onFinished }>
                         </AccessibleTooltipButton>
-                        {this.renderContextMenu()}
+                        { this.renderContextMenu() }
                     </div>
                 </div>
                 <div
                     className="mx_ImageView_image_wrapper"
-                    ref={this.imageWrapper}>
+                    ref={this.imageWrapper}
+                    onMouseDown={this.props.onFinished}
+                    onMouseMove={this.onMoving}
+                    onMouseUp={this.onEndMoving}
+                    onMouseLeave={this.onEndMoving}
+                >
                     <img
                         src={this.props.src}
                         title={this.props.name}
@@ -484,9 +498,6 @@ export default class ImageView extends React.Component<IProps, IState> {
                         className="mx_ImageView_image"
                         draggable={true}
                         onMouseDown={this.onStartMoving}
-                        onMouseMove={this.onMoving}
-                        onMouseUp={this.onEndMoving}
-                        onMouseLeave={this.onEndMoving}
                     />
                 </div>
             </FocusLock>

src/components/views/elements/InlineSpinner.tsx

@@ -16,32 +16,31 @@ limitations under the License.
 
 import React from "react";
 import {_t} from "../../../languageHandler";
-import SettingsStore from "../../../settings/SettingsStore";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    w?: number;
+    h?: number;
+    children?: React.ReactNode;
+}
+
 @replaceableComponent("views.elements.InlineSpinner")
-export default class InlineSpinner extends React.Component {
+export default class InlineSpinner extends React.PureComponent<IProps> {
+    static defaultProps = {
+        w: 16,
+        h: 16,
+    }
+
     render() {
-        const w = this.props.w || 16;
-        const h = this.props.h || 16;
-        const imgClass = this.props.imgClassName || "";
-
-        let imageSource;
-        if (SettingsStore.getValue('feature_new_spinner')) {
-            imageSource = require("../../../../res/img/spinner.svg");
-        } else {
-            imageSource = require("../../../../res/img/spinner.gif");
-        }
-
         return (
             <div className="mx_InlineSpinner">
-                <img
-                    src={imageSource}
-                    width={w}
-                    height={h}
-                    className={imgClass}
+                <div
+                    className="mx_InlineSpinner_icon mx_Spinner_icon"
+                    style={{width: this.props.w, height: this.props.h}}
                     aria-label={_t("Loading...")}
-                />
+                >
+                    {this.props.children}
+                </div>
             </div>
         );
     }

src/components/views/elements/LanguageDropdown.js

@@ -58,13 +58,8 @@ export default class LanguageDropdown extends React.Component {
             // If no value is given, we start with the first
             // country selected, but our parent component
             // doesn't know this, therefore we do this.
-            const language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
-            if (language) {
-                this.props.onOptionChange(language);
-            } else {
-                const language = languageHandler.normalizeLanguageKey(languageHandler.getLanguageFromBrowser());
-                this.props.onOptionChange(language);
-            }
+            const language = languageHandler.getUserLanguage();
+            this.props.onOptionChange(language);
         }
     }
 

src/components/views/elements/MiniAvatarUploader.tsx

@@ -19,6 +19,7 @@ import {EventType} from 'matrix-js-sdk/src/@types/event';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
+import Spinner from "./Spinner";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useTimeout} from "../../../hooks/useTimeout";
 import Analytics from "../../../Analytics";
@@ -88,6 +89,12 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
         >
             { children }
 
+            <div className="mx_MiniAvatarUploader_indicator">
+                { busy ?
+                    <Spinner w={20} h={20} /> :
+                    <div className="mx_MiniAvatarUploader_cameraIcon"></div> }
+            </div>
+
             <div className={classNames("mx_Tooltip", {
                 "mx_Tooltip_visible": visible,
                 "mx_Tooltip_invisible": !visible,

src/components/views/elements/ReplyThread.js

@@ -46,6 +46,8 @@ export default class ReplyThread extends React.Component {
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
         // Specifies which layout to use.
         layout: LayoutPropType,
+        // Whether to always show a timestamp
+        alwaysShowTimestamps: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -212,9 +214,9 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout, alwaysShowTimestamps) {
         if (!ReplyThread.getParentEventId(parentEv)) {
-            return <div className="mx_ReplyThread_wrapper_empty" />;
+            return null;
         }
         return <ReplyThread
             parentEv={parentEv}
@@ -222,6 +224,7 @@ export default class ReplyThread extends React.Component {
             ref={ref}
             permalinkCreator={permalinkCreator}
             layout={layout}
+            alwaysShowTimestamps={alwaysShowTimestamps}
         />;
     }
 
@@ -269,40 +272,32 @@ export default class ReplyThread extends React.Component {
         const {parentEv} = this.props;
         // at time of making this component we checked that props.parentEv has a parentEventId
         const ev = await this.getEvent(ReplyThread.getParentEventId(parentEv));
+
         if (this.unmounted) return;
 
         if (ev) {
+            const loadedEv = await this.getNextEvent(ev);
             this.setState({
                 events: [ev],
-            }, this.loadNextEvent);
+                loadedEv,
+                loading: false,
+            });
         } else {
             this.setState({err: true});
         }
     }
 
-    async loadNextEvent() {
-        if (this.unmounted) return;
-        const ev = this.state.events[0];
-        const inReplyToEventId = ReplyThread.getParentEventId(ev);
-
-        if (!inReplyToEventId) {
-            this.setState({
-                loading: false,
-            });
-            return;
-        }
-
-        const loadedEv = await this.getEvent(inReplyToEventId);
-        if (this.unmounted) return;
-
-        if (loadedEv) {
-            this.setState({loadedEv});
-        } else {
-            this.setState({err: true});
+    async getNextEvent(ev) {
+        try {
+            const inReplyToEventId = ReplyThread.getParentEventId(ev);
+            return await this.getEvent(inReplyToEventId);
+        } catch (e) {
+            return null;
         }
     }
 
     async getEvent(eventId) {
+        if (!eventId) return null;
         const event = this.room.findEventById(eventId);
         if (event) return event;
 
@@ -326,13 +321,18 @@ export default class ReplyThread extends React.Component {
         this.initialize();
     }
 
-    onQuoteClick() {
+    async onQuoteClick() {
         const events = [this.state.loadedEv, ...this.state.events];
 
+        let loadedEv = null;
+        if (events.length > 0) {
+            loadedEv = await this.getNextEvent(events[0]);
+        }
+
         this.setState({
-            loadedEv: null,
+            loadedEv,
             events,
-        }, this.loadNextEvent);
+        });
 
         dis.fire(Action.FocusComposer);
     }
@@ -390,8 +390,10 @@ export default class ReplyThread extends React.Component {
                     isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
                     layout={this.props.layout}
+                    alwaysShowTimestamps={this.props.alwaysShowTimestamps}
                     enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                     replacingEventId={ev.replacingEventId()}
+                    as="div"
                 />
             </blockquote>;
         });

src/components/views/elements/SSOButtons.tsx

@@ -112,7 +112,7 @@ interface IProps {
 const MAX_PER_ROW = 6;
 
 const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAfterLogin, primary}) => {
-    const providers = flow["org.matrix.msc2858.identity_providers"] || [];
+    const providers = flow.identity_providers || [];
     if (providers.length < 2) {
         return <div className="mx_SSOButtons">
             <SSOButton

src/components/views/elements/Spinner.js

@@ -18,33 +18,21 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import {_t} from "../../../languageHandler";
-import SettingsStore from "../../../settings/SettingsStore";
 
-const Spinner = ({w = 32, h = 32, imgClassName, message}) => {
-    let imageSource;
-    if (SettingsStore.getValue('feature_new_spinner')) {
-        imageSource = require("../../../../res/img/spinner.svg");
-    } else {
-        imageSource = require("../../../../res/img/spinner.gif");
-    }
+const Spinner = ({w = 32, h = 32, message}) => (
+    <div className="mx_Spinner">
+        { message && <React.Fragment><div className="mx_Spinner_Msg">{ message }</div>&nbsp;</React.Fragment> }
+        <div
+            className="mx_Spinner_icon"
+            style={{width: w, height: h}}
+            aria-label={_t("Loading...")}
+        ></div>
+    </div>
+);
 
-    return (
-        <div className="mx_Spinner">
-            { message && <React.Fragment><div className="mx_Spinner_Msg">{ message}</div>&nbsp;</React.Fragment> }
-            <img
-                src={imageSource}
-                width={w}
-                height={h}
-                className={imgClassName}
-                aria-label={_t("Loading...")}
-            />
-        </div>
-    );
-};
 Spinner.propTypes = {
     w: PropTypes.number,
     h: PropTypes.number,
-    imgClassName: PropTypes.string,
     message: PropTypes.node,
 };
 

src/components/views/elements/Tooltip.tsx

@@ -22,6 +22,7 @@ import React, {Component, CSSProperties} from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import UIStore from "../../../stores/UIStore";
 
 const MIN_TOOLTIP_HEIGHT = 25;
 
@@ -69,7 +70,10 @@ export default class Tooltip extends React.Component<IProps> {
         this.tooltipContainer = document.createElement("div");
         this.tooltipContainer.className = "mx_Tooltip_wrapper";
         document.body.appendChild(this.tooltipContainer);
-        window.addEventListener('scroll', this.renderTooltip, true);
+        window.addEventListener('scroll', this.renderTooltip, {
+            passive: true,
+            capture: true,
+        });
 
         this.parent = ReactDOM.findDOMNode(this).parentNode as Element;
 
@@ -84,7 +88,9 @@ export default class Tooltip extends React.Component<IProps> {
     public componentWillUnmount() {
         ReactDOM.unmountComponentAtNode(this.tooltipContainer);
         document.body.removeChild(this.tooltipContainer);
-        window.removeEventListener('scroll', this.renderTooltip, true);
+        window.removeEventListener('scroll', this.renderTooltip, {
+            capture: true,
+        });
     }
 
     private updatePosition(style: CSSProperties) {
@@ -97,15 +103,15 @@ export default class Tooltip extends React.Component<IProps> {
             // we need so that we're still centered.
             offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
-
+        const width = UIStore.instance.windowWidth;
         const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset;
         const top = baseTop + offset;
-        const right = window.innerWidth - parentBox.right - window.pageXOffset - 16;
+        const right = width - parentBox.right - window.pageXOffset - 16;
         const left = parentBox.right + window.pageXOffset + 6;
         const horizontalCenter = parentBox.right - window.pageXOffset - (parentBox.width / 2);
         switch (this.props.alignment) {
             case Alignment.Natural:
-                if (parentBox.right > window.innerWidth / 2) {
+                if (parentBox.right > width / 2) {
                     style.right = right;
                     style.top = top;
                     break;

src/components/views/elements/TooltipButton.tsx

@@ -19,19 +19,30 @@ import React from 'react';
 import * as sdk from '../../../index';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.elements.TooltipButton")
-export default class TooltipButton extends React.Component {
-    state = {
-        hover: false,
-    };
+interface IProps {
+    helpText: string;
+}
 
-    onMouseOver = () => {
+interface IState {
+    hover: boolean;
+}
+
+@replaceableComponent("views.elements.TooltipButton")
+export default class TooltipButton extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hover: false,
+        };
+    }
+
+    private onMouseOver = () => {
         this.setState({
             hover: true,
         });
     };
 
-    onMouseLeave = () => {
+    private onMouseLeave = () => {
         this.setState({
             hover: false,
         });

src/components/views/messages/EventTileBubble.tsx

@@ -14,13 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {forwardRef, ReactNode} from "react";
+import React, {forwardRef, ReactNode, ReactChildren} from "react";
 import classNames from "classnames";
 
 interface IProps {
     className: string;
     title: string;
     subtitle?: ReactNode;
+    children?: ReactChildren;
 }
 
 const EventTileBubble = forwardRef<HTMLDivElement, IProps>(({ className, title, subtitle, children }, ref) => {

src/components/views/messages/MVoiceMessageBody.tsx

@@ -71,10 +71,14 @@ export default class MVoiceMessageBody extends React.PureComponent<IProps, IStat
 
         // We should have a buffer to work with now: let's set it up
         const playback = new Playback(buffer, waveform);
-        this.setState({playback});
+        this.setState({ playback });
         // Note: the RecordingPlayback component will handle preparing the Playback class for us.
     }
 
+    public componentWillUnmount() {
+        this.state.playback?.destroy();
+    }
+
     public render() {
         if (this.state.error) {
             // TODO: @@TR: Verify error state

src/components/views/messages/MessageActionBar.js

@@ -31,6 +31,7 @@ import {RovingAccessibleTooltipButton, useRovingTabIndex} from "../../../accessi
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {canCancel} from "../context_menus/MessageContextMenu";
 import Resend from "../../../Resend";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange}) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
@@ -122,6 +123,10 @@ export default class MessageActionBar extends React.PureComponent {
         if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {
             this.props.mxEvent.on("Event.status", this.onSent);
         }
+
+        const client = MatrixClientPeg.get();
+        client.decryptEventIfNeeded(this.props.mxEvent);
+
         if (this.props.mxEvent.isBeingDecrypted()) {
             this.props.mxEvent.once("Event.decrypted", this.onDecrypted);
         }

src/components/views/messages/MessageTimestamp.tsx

@@ -16,20 +16,19 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import {formatFullDate, formatTime, formatFullTime} from '../../../DateUtils';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { formatFullDate, formatTime, formatFullTime } from '../../../DateUtils';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+interface IProps {
+    ts: number;
+    showTwelveHour?: boolean;
+    showFullDate?: boolean;
+    showSeconds?: boolean;
+}
 
 @replaceableComponent("views.messages.MessageTimestamp")
-export default class MessageTimestamp extends React.Component {
-    static propTypes = {
-        ts: PropTypes.number.isRequired,
-        showTwelveHour: PropTypes.bool,
-        showFullDate: PropTypes.bool,
-        showSeconds: PropTypes.bool,
-    };
-
-    render() {
+export default class MessageTimestamp extends React.Component<IProps> {
+    public render() {
         const date = new Date(this.props.ts);
         let timestamp;
         if (this.props.showFullDate) {
@@ -41,7 +40,11 @@ export default class MessageTimestamp extends React.Component {
         }
 
         return (
-            <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)} aria-hidden={true}>
+            <span
+                className="mx_MessageTimestamp"
+                title={formatFullDate(date, this.props.showTwelveHour)}
+                aria-hidden={true}
+            >
                 {timestamp}
             </span>
         );

src/components/views/messages/ReactionsRow.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.
@@ -14,35 +14,72 @@ 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 classNames from "classnames";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Relations } from "matrix-js-sdk/src/models/relations";
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { isContentActionable } from '../../../utils/EventUtils';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import { aboveLeftOf, ContextMenu, useContextMenu } from "../../structures/ContextMenu";
+import ReactionPicker from "../emojipicker/ReactionPicker";
+import ReactionsRowButton from "./ReactionsRowButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 // The maximum number of reactions to initially show on a message.
 const MAX_ITEMS_WHEN_LIMITED = 8;
 
-@replaceableComponent("views.messages.ReactionsRow")
-export default class ReactionsRow extends React.PureComponent {
-    static propTypes = {
-        // The event we're displaying reactions for
-        mxEvent: PropTypes.object.isRequired,
-        // The Relations model from the JS SDK for reactions to `mxEvent`
-        reactions: PropTypes.object,
+const ReactButton = ({ mxEvent, reactions }: IProps) => {
+    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu;
+    if (menuDisplayed) {
+        const buttonRect = button.current.getBoundingClientRect();
+        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
+            <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
+        </ContextMenu>;
     }
 
-    constructor(props) {
-        super(props);
+    return <React.Fragment>
+        <ContextMenuTooltipButton
+            className={classNames("mx_ReactionsRow_addReactionButton", {
+                mx_ReactionsRow_addReactionButton_active: menuDisplayed,
+            })}
+            title={_t("Add reaction")}
+            onClick={openMenu}
+            onContextMenu={e => {
+                e.preventDefault();
+                openMenu();
+            }}
+            isExpanded={menuDisplayed}
+            inputRef={button}
+        />
 
-        if (props.reactions) {
-            props.reactions.on("Relations.add", this.onReactionsChange);
-            props.reactions.on("Relations.remove", this.onReactionsChange);
-            props.reactions.on("Relations.redaction", this.onReactionsChange);
-        }
+        { contextMenu }
+    </React.Fragment>;
+};
+
+interface IProps {
+    // The event we're displaying reactions for
+    mxEvent: MatrixEvent;
+    // The Relations model from the JS SDK for reactions to `mxEvent`
+    reactions?: Relations;
+}
+
+interface IState {
+    myReactions: MatrixEvent[];
+    showAll: boolean;
+}
+
+@replaceableComponent("views.messages.ReactionsRow")
+export default class ReactionsRow extends React.PureComponent<IProps, IState> {
+    static contextType = MatrixClientContext;
+
+    constructor(props, context) {
+        super(props, context);
 
         this.state = {
             myReactions: this.getMyReactions(),
@@ -50,7 +87,33 @@ export default class ReactionsRow extends React.PureComponent {
         };
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidMount() {
+        const { mxEvent, reactions } = this.props;
+
+        if (mxEvent.isBeingDecrypted() || mxEvent.shouldAttemptDecryption()) {
+            mxEvent.once("Event.decrypted", this.onDecrypted);
+        }
+
+        if (reactions) {
+            reactions.on("Relations.add", this.onReactionsChange);
+            reactions.on("Relations.remove", this.onReactionsChange);
+            reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentWillUnmount() {
+        const { mxEvent, reactions } = this.props;
+
+        mxEvent.off("Event.decrypted", this.onDecrypted);
+
+        if (reactions) {
+            reactions.off("Relations.add", this.onReactionsChange);
+            reactions.off("Relations.remove", this.onReactionsChange);
+            reactions.off("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentDidUpdate(prevProps: IProps) {
         if (prevProps.reactions !== this.props.reactions) {
             this.props.reactions.on("Relations.add", this.onReactionsChange);
             this.props.reactions.on("Relations.remove", this.onReactionsChange);
@@ -59,24 +122,12 @@ export default class ReactionsRow extends React.PureComponent {
         }
     }
 
-    componentWillUnmount() {
-        if (this.props.reactions) {
-            this.props.reactions.removeListener(
-                "Relations.add",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.remove",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.redaction",
-                this.onReactionsChange,
-            );
-        }
+    private onDecrypted = () => {
+        // Decryption changes whether the event is actionable
+        this.forceUpdate();
     }
 
-    onReactionsChange = () => {
+    private onReactionsChange = () => {
         // TODO: Call `onHeightChanged` as needed
         this.setState({
             myReactions: this.getMyReactions(),
@@ -87,12 +138,12 @@ export default class ReactionsRow extends React.PureComponent {
         this.forceUpdate();
     }
 
-    getMyReactions() {
+    private getMyReactions() {
         const reactions = this.props.reactions;
         if (!reactions) {
             return null;
         }
-        const userId = MatrixClientPeg.get().getUserId();
+        const userId = this.context.getUserId();
         const myReactions = reactions.getAnnotationsBySender()[userId];
         if (!myReactions) {
             return null;
@@ -100,7 +151,7 @@ export default class ReactionsRow extends React.PureComponent {
         return [...myReactions.values()];
     }
 
-    onShowAllClick = () => {
+    private onShowAllClick = () => {
         this.setState({
             showAll: true,
         });
@@ -114,7 +165,6 @@ export default class ReactionsRow extends React.PureComponent {
             return null;
         }
 
-        const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton');
         let items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
             const count = events.size;
             if (!count) {
@@ -136,6 +186,8 @@ export default class ReactionsRow extends React.PureComponent {
             />;
         }).filter(item => !!item);
 
+        if (!items.length) return null;
+
         // Show the first MAX_ITEMS if there are MAX_ITEMS + 1 or more items.
         // The "+ 1" ensure that the "show all" reveals something that takes up
         // more space than the button itself.
@@ -151,13 +203,22 @@ export default class ReactionsRow extends React.PureComponent {
             </a>;
         }
 
+        const cli = this.context;
+
+        let addReactionButton;
+        const room = cli.getRoom(mxEvent.getRoomId());
+        if (room.getMyMembership() === "join" && room.currentState.maySendEvent(EventType.Reaction, cli.getUserId())) {
+            addReactionButton = <ReactButton mxEvent={mxEvent} reactions={reactions} />;
+        }
+
         return <div
             className="mx_ReactionsRow"
             role="toolbar"
             aria-label={_t("Reactions")}
         >
-            {items}
-            {showAllButton}
+            { items }
+            { showAllButton }
+            { addReactionButton }
         </div>;
     }
 }

src/components/views/messages/ReactionsRowButton.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.
@@ -14,49 +14,54 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React from "react";
+import classNames from "classnames";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 import dis from "../../../dispatcher/dispatcher";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
+import AccessibleButton from "../elements/AccessibleButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps {
+    // The event we're displaying reactions for
+    mxEvent: MatrixEvent;
+    // The reaction content / key / emoji
+    content: string;
+    // The count of votes for this key
+    count: number;
+    // A Set of Matrix reaction events for this key
+    reactionEvents: Set<MatrixEvent>;
+    // A possible Matrix event if the current user has voted for this type
+    myReactionEvent?: MatrixEvent;
+}
+
+interface IState {
+    tooltipRendered: boolean;
+    tooltipVisible: boolean;
+}
 
 @replaceableComponent("views.messages.ReactionsRowButton")
-export default class ReactionsRowButton extends React.PureComponent {
-    static propTypes = {
-        // The event we're displaying reactions for
-        mxEvent: PropTypes.object.isRequired,
-        // The reaction content / key / emoji
-        content: PropTypes.string.isRequired,
-        // The count of votes for this key
-        count: PropTypes.number.isRequired,
-        // A Set of Martix reaction events for this key
-        reactionEvents: PropTypes.object.isRequired,
-        // A possible Matrix event if the current user has voted for this type
-        myReactionEvent: PropTypes.object,
-    }
+export default class ReactionsRowButton extends React.PureComponent<IProps, IState> {
+    static contextType = MatrixClientContext;
 
-    constructor(props) {
-        super(props);
+    state = {
+        tooltipRendered: false,
+        tooltipVisible: false,
+    };
 
-        this.state = {
-            tooltipVisible: false,
-        };
-    }
-
-    onClick = (ev) => {
+    onClick = () => {
         const { mxEvent, myReactionEvent, content } = this.props;
         if (myReactionEvent) {
-            MatrixClientPeg.get().redactEvent(
+            this.context.redactEvent(
                 mxEvent.getRoomId(),
                 myReactionEvent.getId(),
             );
         } else {
-            MatrixClientPeg.get().sendEvent(mxEvent.getRoomId(), "m.reaction", {
+            this.context.sendEvent(mxEvent.getRoomId(), "m.reaction", {
                 "m.relates_to": {
                     "rel_type": "m.annotation",
                     "event_id": mxEvent.getId(),
@@ -83,8 +88,6 @@ export default class ReactionsRowButton extends React.PureComponent {
     }
 
     render() {
-        const ReactionsRowButtonTooltip =
-            sdk.getComponent('messages.ReactionsRowButtonTooltip');
         const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;
 
         const classes = classNames({
@@ -102,7 +105,7 @@ export default class ReactionsRowButton extends React.PureComponent {
             />;
         }
 
-        const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
+        const room = this.context.getRoom(mxEvent.getRoomId());
         let label;
         if (room) {
             const senders = [];
@@ -130,7 +133,6 @@ export default class ReactionsRowButton extends React.PureComponent {
             );
         }
         const isPeeking = room.getMyMembership() !== "join";
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return <AccessibleButton
             className={classes}
             aria-label={label}

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+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.
@@ -14,33 +14,34 @@ 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 {MatrixClientPeg} from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
 import { unicodeToShortcode } from '../../../HtmlUtils';
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Tooltip from "../elements/Tooltip";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps {
+    // The event we're displaying reactions for
+    mxEvent: MatrixEvent;
+    // The reaction content / key / emoji
+    content: string;
+    // A Set of Matrix reaction events for this key
+    reactionEvents: Set<MatrixEvent>;
+    visible: boolean;
+}
 
 @replaceableComponent("views.messages.ReactionsRowButtonTooltip")
-export default class ReactionsRowButtonTooltip extends React.PureComponent {
-    static propTypes = {
-        // The event we're displaying reactions for
-        mxEvent: PropTypes.object.isRequired,
-        // The reaction content / key / emoji
-        content: PropTypes.string.isRequired,
-        // A Set of Martix reaction events for this key
-        reactionEvents: PropTypes.object.isRequired,
-        visible: PropTypes.bool.isRequired,
-    }
+export default class ReactionsRowButtonTooltip extends React.PureComponent<IProps> {
+    static contextType = MatrixClientContext;
 
     render() {
-        const Tooltip = sdk.getComponent('elements.Tooltip');
         const { content, reactionEvents, mxEvent, visible } = this.props;
 
-        const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
+        const room = this.context.getRoom(mxEvent.getRoomId());
         let tooltipLabel;
         if (room) {
             const senders = [];

src/components/views/messages/SenderProfile.tsx

@@ -15,37 +15,47 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import Flair from '../elements/Flair.js';
 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";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+    onClick(): void;
+    enableFlair: boolean;
+}
+
+interface IState {
+    userGroups;
+    relatedGroups;
+}
 
 @replaceableComponent("views.messages.SenderProfile")
-export default class SenderProfile extends React.Component {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired, // event whose sender we're showing
-        onClick: PropTypes.func,
-    };
-
+export default class SenderProfile extends React.Component<IProps, IState> {
     static contextType = MatrixClientContext;
+    private unmounted: boolean;
 
-    state = {
-        userGroups: null,
-        relatedGroups: [],
-    };
+    constructor(props: IProps) {
+        super(props)
+        const senderId = this.props.mxEvent.getSender();
+
+        this.state = {
+            userGroups: FlairStore.cachedPublicisedGroups(senderId) || [],
+            relatedGroups: [],
+        };
+    }
 
     componentDidMount() {
         this.unmounted = false;
         this._updateRelatedGroups();
 
-        FlairStore.getPublicisedGroupsCached(
-            this.context, this.props.mxEvent.getSender(),
-        ).then((userGroups) => {
-            if (this.unmounted) return;
-            this.setState({userGroups});
-        });
+        if (this.state.userGroups.length === 0) {
+            this.getPublicisedGroups();
+        }
+
 
         this.context.on('RoomState.events', this.onRoomStateEvents);
     }
@@ -55,6 +65,15 @@ export default class SenderProfile extends React.Component {
         this.context.removeListener('RoomState.events', this.onRoomStateEvents);
     }
 
+    async getPublicisedGroups() {
+        if (!this.unmounted) {
+            const userGroups = await FlairStore.getPublicisedGroupsCached(
+                this.context, this.props.mxEvent.getSender(),
+            );
+            this.setState({userGroups});
+        }
+    }
+
     onRoomStateEvents = event => {
         if (event.getType() === 'm.room.related_groups' &&
             event.getRoomId() === this.props.mxEvent.getRoomId()
@@ -89,14 +108,26 @@ export default class SenderProfile extends React.Component {
     render() {
         const {mxEvent} = this.props;
         const colorClass = getUserNameColorClass(mxEvent.getSender());
-        const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
         const {msgtype} = mxEvent.getContent();
 
+        const disambiguate = mxEvent.sender?.disambiguate;
+        const displayName = mxEvent.sender?.rawDisplayName || mxEvent.getSender() || "";
+        const mxid = mxEvent.sender?.userId || mxEvent.getSender() || "";
+
         if (msgtype === 'm.emote') {
-            return <span />; // emote message must include the name so don't duplicate it
+            return null; // emote message must include the name so don't duplicate it
         }
 
-        let flair = <div />;
+        let mxidElement;
+        if (disambiguate) {
+            mxidElement = (
+                <span className="mx_SenderProfile_mxid">
+                    { mxid }
+                </span>
+            );
+        }
+
+        let flair;
         if (this.props.enableFlair) {
             const displayedGroups = this._getDisplayedGroups(
                 this.state.userGroups, this.state.relatedGroups,
@@ -108,21 +139,13 @@ export default class SenderProfile extends React.Component {
             />;
         }
 
-        const nameElem = name || '';
-
-        // Name + flair
-        const nameFlair = <span>
-            <span className={`mx_SenderProfile_name ${colorClass}`}>
-                { nameElem }
-            </span>
-            { flair }
-        </span>;
-
         return (
-            <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
-                <div className="mx_SenderProfile_hover">
-                    { nameFlair }
-                </div>
+            <div className="mx_SenderProfile mx_SenderProfile_hover" dir="auto" onClick={this.props.onClick}>
+                <span className={`mx_SenderProfile_displayName ${colorClass}`}>
+                    { displayName }
+                </span>
+                { mxidElement }
+                { flair }
             </div>
         );
     }

src/components/views/messages/TextualBody.js

@@ -36,6 +36,7 @@ import {toRightOf} from "../../structures/ContextMenu";
 import {copyPlaintext} from "../../../utils/strings";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import UIStore from "../../../stores/UIStore";
 
 @replaceableComponent("views.messages.TextualBody")
 export default class TextualBody extends React.Component {
@@ -143,7 +144,7 @@ export default class TextualBody extends React.Component {
     _addCodeExpansionButton(div, pre) {
         // Calculate how many percent does the pre element take up.
         // If it's less than 30% we don't add the expansion button.
-        const percentageOfViewport = pre.offsetHeight / window.innerHeight * 100;
+        const percentageOfViewport = pre.offsetHeight / UIStore.instance.windowHeight * 100;
         if (percentageOfViewport < 30) return;
 
         const button = document.createElement("span");
@@ -277,15 +278,15 @@ export default class TextualBody extends React.Component {
             // pass only the first child which is the event tile otherwise this recurses on edited events
             let links = this.findLinks([this._content.current]);
             if (links.length) {
-                // de-dup the links (but preserve ordering)
-                const seen = new Set();
-                links = links.filter((link) => {
-                    if (seen.has(link)) return false;
-                    seen.add(link);
-                    return true;
-                });
+                // de-duplicate the links after stripping hashes as they don't affect the preview
+                // using a set here maintains the order
+                links = Array.from(new Set(links.map(link => {
+                    const url = new URL(link);
+                    url.hash = "";
+                    return url.toString();
+                })));
 
-                this.setState({ links: links });
+                this.setState({ links });
 
                 // lazy-load the hidden state of the preview widget from localstorage
                 if (global.localStorage) {

src/components/views/messages/ViewSourceEvent.js

@@ -18,6 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 @replaceableComponent("views.messages.ViewSourceEvent")
 export default class ViewSourceEvent extends React.PureComponent {
@@ -36,6 +37,10 @@ export default class ViewSourceEvent extends React.PureComponent {
 
     componentDidMount() {
         const {mxEvent} = this.props;
+
+        const client = MatrixClientPeg.get();
+        client.decryptEventIfNeeded(mxEvent);
+
         if (mxEvent.isBeingDecrypted()) {
             mxEvent.once("Event.decrypted", () => this.forceUpdate());
         }

src/components/views/right_panel/GroupHeaderButtons.tsx

@@ -21,12 +21,12 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
-import HeaderButtons, {HeaderKind} from './HeaderButtons';
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {Action} from "../../../dispatcher/actions";
-import {ActionPayload} from "../../../dispatcher/payloads";
-import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import HeaderButtons, { HeaderKind } from './HeaderButtons';
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { Action } from "../../../dispatcher/actions";
+import { ActionPayload } from "../../../dispatcher/payloads";
+import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const GROUP_PHASES = [
     RightPanelPhases.GroupMemberInfo,
@@ -84,19 +84,21 @@ export default class GroupHeaderButtons extends HeaderButtons {
     };
 
     renderButtons() {
-        return [
-            <HeaderButton key="groupMembersButton" name="groupMembersButton"
+        return <>
+            <HeaderButton
+                name="groupMembersButton"
                 title={_t('Members')}
                 isHighlighted={this.isPhase(GROUP_PHASES)}
                 onClick={this.onMembersClicked}
                 analytics={['Right Panel', 'Group Member List Button', 'click']}
-            />,
-            <HeaderButton key="roomsButton" name="roomsButton"
+            />
+            <HeaderButton
+                name="roomsButton"
                 title={_t('Rooms')}
                 isHighlighted={this.isPhase(ROOM_PHASES)}
                 onClick={this.onRoomsClicked}
                 analytics={['Right Panel', 'Group Room List Button', 'click']}
-            />,
-        ];
+            />
+        </>;
     }
 }

src/components/views/right_panel/HeaderButton.tsx

@@ -22,15 +22,13 @@ import React from 'react';
 import classNames from 'classnames';
 import Analytics from '../../../Analytics';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // Whether this button is highlighted
     isHighlighted: boolean;
     // click handler
     onClick: () => void;
-    // The badge to display above the icon
-    badge?: React.ReactNode;
     // The parameters to track the click event
     analytics: Parameters<typeof Analytics.trackEvent>;
 
@@ -40,31 +38,29 @@ interface IProps {
     title: string;
 }
 
-// TODO: replace this, the composer buttons and the right panel buttons with a unified
-// representation
+// TODO: replace this, the composer buttons and the right panel buttons with a unified representation
 @replaceableComponent("views.right_panel.HeaderButton")
 export default class HeaderButton extends React.Component<IProps> {
-    constructor(props: IProps) {
-        super(props);
-        this.onClick = this.onClick.bind(this);
-    }
-
-    private onClick() {
+    private onClick = () => {
         Analytics.trackEvent(...this.props.analytics);
         this.props.onClick();
-    }
+    };
 
     public render() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {isHighlighted, onClick, analytics, name, title, ...props} = this.props;
+
         const classes = classNames({
             mx_RightPanel_headerButton: true,
-            mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
-            [`mx_RightPanel_${this.props.name}`]: true,
+            mx_RightPanel_headerButton_highlight: isHighlighted,
+            [`mx_RightPanel_${name}`]: true,
         });
 
         return <AccessibleTooltipButton
-            aria-selected={this.props.isHighlighted}
+            {...props}
+            aria-selected={isHighlighted}
             role="tab"
-            title={this.props.title}
+            title={title}
             className={classes}
             onClick={this.onClick}
         />;

src/components/views/right_panel/HeaderButtons.tsx

@@ -21,14 +21,14 @@ limitations under the License.
 import React from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import RightPanelStore from "../../../stores/RightPanelStore";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {Action} from '../../../dispatcher/actions';
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { Action } from '../../../dispatcher/actions';
 import {
     SetRightPanelPhasePayload,
     SetRightPanelPhaseRefireParams,
 } from '../../../dispatcher/payloads/SetRightPanelPhasePayload';
-import {EventSubscription} from "fbemitter";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import type { EventSubscription } from "fbemitter";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export enum HeaderKind {
   Room = "room",
@@ -43,11 +43,11 @@ interface IState {
 interface IProps {}
 
 @replaceableComponent("views.right_panel.HeaderButtons")
-export default abstract class HeaderButtons extends React.Component<IProps, IState> {
+export default abstract class HeaderButtons<P = {}> extends React.Component<IProps & P, IState> {
     private storeToken: EventSubscription;
     private dispatcherRef: string;
 
-    constructor(props: IProps, kind: HeaderKind) {
+    constructor(props: IProps & P, kind: HeaderKind) {
         super(props);
 
         const rps = RightPanelStore.getSharedInstance();
@@ -95,7 +95,7 @@ export default abstract class HeaderButtons extends React.Component<IProps, ISta
     }
 
     // XXX: Make renderButtons a prop
-    public abstract renderButtons(): JSX.Element[];
+    public abstract renderButtons(): JSX.Element;
 
     public render() {
         return <div className="mx_HeaderButtons">

src/components/views/right_panel/PinnedMessagesCard.tsx

@@ -0,0 +1,188 @@
+/*
+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, {useCallback, useContext, useEffect, useState} from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+
+import { _t } from "../../../languageHandler";
+import BaseCard from "./BaseCard";
+import Spinner from "../elements/Spinner";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+import PinningUtils from "../../../utils/PinningUtils";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
+import PinnedEventTile from "../rooms/PinnedEventTile";
+
+interface IProps {
+    room: Room;
+    onClose(): void;
+}
+
+export const usePinnedEvents = (room: Room): string[] => {
+    const [pinnedEvents, setPinnedEvents] = useState<string[]>([]);
+
+    const update = useCallback((ev?: MatrixEvent) => {
+        if (!room) return;
+        if (ev && ev.getType() !== EventType.RoomPinnedEvents) return;
+        setPinnedEvents(room.currentState.getStateEvents(EventType.RoomPinnedEvents, "")?.getContent()?.pinned || []);
+    }, [room]);
+
+    useEventEmitter(room?.currentState, "RoomState.events", update);
+    useEffect(() => {
+        update();
+        return () => {
+            setPinnedEvents([]);
+        };
+    }, [update]);
+    return pinnedEvents;
+};
+
+export const ReadPinsEventId = "im.vector.room.read_pins";
+
+export const useReadPinnedEvents = (room: Room): Set<string> => {
+    const [readPinnedEvents, setReadPinnedEvents] = useState<Set<string>>(new Set());
+
+    const update = useCallback((ev?: MatrixEvent) => {
+        if (!room) return;
+        if (ev && ev.getType() !== ReadPinsEventId) return;
+        const readPins = room.getAccountData(ReadPinsEventId)?.getContent()?.event_ids;
+        setReadPinnedEvents(new Set(readPins || []));
+    }, [room]);
+
+    useEventEmitter(room, "Room.accountData", update);
+    useEffect(() => {
+        update();
+        return () => {
+            setReadPinnedEvents(new Set());
+        };
+    }, [update]);
+    return readPinnedEvents;
+};
+
+const useRoomState = <T extends any>(room: Room, mapper: (state: RoomState) => T): T => {
+    const [value, setValue] = useState<T>(room ? mapper(room.currentState) : undefined);
+
+    const update = useCallback(() => {
+        if (!room) return;
+        setValue(mapper(room.currentState));
+    }, [room, mapper]);
+
+    useEventEmitter(room?.currentState, "RoomState.events", update);
+    useEffect(() => {
+        update();
+        return () => {
+            setValue(undefined);
+        };
+    }, [update]);
+    return value;
+};
+
+const PinnedMessagesCard = ({ room, onClose }: IProps) => {
+    const cli = useContext(MatrixClientContext);
+    const canUnpin = useRoomState(room, state => state.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli));
+    const pinnedEventIds = usePinnedEvents(room);
+    const readPinnedEvents = useReadPinnedEvents(room);
+
+    useEffect(() => {
+        const newlyRead = pinnedEventIds.filter(id => !readPinnedEvents.has(id));
+        if (newlyRead.length > 0) {
+            // clear out any read pinned events which no longer are pinned
+            cli.setRoomAccountData(room.roomId, ReadPinsEventId, {
+                event_ids: pinnedEventIds,
+            });
+        }
+    }, [cli, room.roomId, pinnedEventIds, readPinnedEvents]);
+
+    const pinnedEvents = useAsyncMemo(() => {
+        const promises = pinnedEventIds.map(async eventId => {
+            const timelineSet = room.getUnfilteredTimelineSet();
+            const localEvent = timelineSet?.getTimelineForEvent(eventId)?.getEvents().find(e => e.getId() === eventId);
+            if (localEvent) return localEvent;
+
+            try {
+                const evJson = await cli.fetchRoomEvent(room.roomId, eventId);
+                const event = new MatrixEvent(evJson);
+                if (event.isEncrypted()) {
+                    await cli.decryptEventIfNeeded(event); // TODO await?
+                }
+                if (event && PinningUtils.isPinnable(event)) {
+                    return event;
+                }
+            } catch (err) {
+                console.error("Error looking up pinned event " + eventId + " in room " + room.roomId);
+                console.error(err);
+            }
+            return null;
+        });
+
+        return Promise.all(promises);
+    }, [cli, room, pinnedEventIds], null);
+
+    let content;
+    if (!pinnedEvents) {
+        content = <Spinner />;
+    } else if (pinnedEvents.length > 0) {
+        let onUnpinClicked;
+        if (canUnpin) {
+            onUnpinClicked = async (event: MatrixEvent) => {
+                const pinnedEvents = room.currentState.getStateEvents(EventType.RoomPinnedEvents, "");
+                if (pinnedEvents?.getContent()?.pinned) {
+                    const pinned = pinnedEvents.getContent().pinned;
+                    const index = pinned.indexOf(event.getId());
+                    if (index !== -1) {
+                        pinned.splice(index, 1);
+                        await cli.sendStateEvent(room.roomId, EventType.RoomPinnedEvents, { pinned }, "");
+                    }
+                }
+            };
+        }
+
+        // show them in reverse, with latest pinned at the top
+        content = pinnedEvents.filter(Boolean).reverse().map(ev => (
+            <PinnedEventTile key={ev.getId()} room={room} event={ev} onUnpinClicked={() => onUnpinClicked(ev)} />
+        ));
+    } else {
+        content = <div className="mx_PinnedMessagesCard_empty">
+            <div>
+                { /* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */ }
+                <div className="mx_PinnedMessagesCard_MessageActionBar">
+                    <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton" />
+                    <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton" />
+                    <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton" />
+                </div>
+
+                <h2>{ _t("Nothing pinned, yet") }</h2>
+                { _t("If you have permissions, open the menu on any message and select " +
+                    "<b>Pin</b> to stick them here.", {}, {
+                        b: sub => <b>{ sub }</b>,
+                }) }
+            </div>
+        </div>;
+    }
+
+    return <BaseCard
+        header={<h2>{ _t("Pinned messages") }</h2>}
+        className="mx_PinnedMessagesCard"
+        onClose={onClose}
+    >
+        { content }
+    </BaseCard>;
+};
+
+export default PinnedMessagesCard;

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -18,15 +18,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import {_t} from '../../../languageHandler';
+import React from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { _t } from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
-import HeaderButtons, {HeaderKind} from './HeaderButtons';
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {Action} from "../../../dispatcher/actions";
-import {ActionPayload} from "../../../dispatcher/payloads";
+import HeaderButtons, { HeaderKind } from './HeaderButtons';
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { Action } from "../../../dispatcher/actions";
+import { ActionPayload } from "../../../dispatcher/payloads";
 import RightPanelStore from "../../../stores/RightPanelStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { useSettingValue } from "../../../hooks/useSettings";
+import { useReadPinnedEvents, usePinnedEvents } from './PinnedMessagesCard';
 
 const ROOM_INFO_PHASES = [
     RightPanelPhases.RoomSummary,
@@ -38,9 +42,35 @@ const ROOM_INFO_PHASES = [
     RightPanelPhases.Room3pidMemberInfo,
 ];
 
+const PinnedMessagesHeaderButton = ({ room, isHighlighted, onClick }) => {
+    const pinningEnabled = useSettingValue("feature_pinning");
+    const pinnedEvents = usePinnedEvents(pinningEnabled && room);
+    const readPinnedEvents = useReadPinnedEvents(pinningEnabled && room);
+    if (!pinningEnabled) return null;
+
+    let unreadIndicator;
+    if (pinnedEvents.some(id => !readPinnedEvents.has(id))) {
+        unreadIndicator = <div className="mx_RightPanel_pinnedMessagesButton_unreadIndicator" />;
+    }
+
+    return <HeaderButton
+        name="pinnedMessagesButton"
+        title={_t("Pinned messages")}
+        isHighlighted={isHighlighted}
+        onClick={onClick}
+        analytics={["Right Panel", "Pinned Messages Button", "click"]}
+    >
+        { unreadIndicator }
+    </HeaderButton>;
+};
+
+interface IProps {
+    room?: Room;
+}
+
 @replaceableComponent("views.right_panel.RoomHeaderButtons")
-export default class RoomHeaderButtons extends HeaderButtons {
-    constructor(props) {
+export default class RoomHeaderButtons extends HeaderButtons<IProps> {
+    constructor(props: IProps) {
         super(props, HeaderKind.Room);
     }
 
@@ -80,24 +110,32 @@ export default class RoomHeaderButtons extends HeaderButtons {
         this.setPhase(RightPanelPhases.NotificationPanel);
     };
 
+    private onPinnedMessagesClicked = () => {
+        // This toggles for us, if needed
+        this.setPhase(RightPanelPhases.PinnedMessages);
+    };
+
     public renderButtons() {
-        return [
+        return <>
+            <PinnedMessagesHeaderButton
+                room={this.props.room}
+                isHighlighted={this.isPhase(RightPanelPhases.PinnedMessages)}
+                onClick={this.onPinnedMessagesClicked}
+            />
             <HeaderButton
-                key="notifsButton"
                 name="notifsButton"
                 title={_t('Notifications')}
                 isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
                 onClick={this.onNotificationsClicked}
                 analytics={['Right Panel', 'Notification List Button', 'click']}
-            />,
+            />
             <HeaderButton
-                key="roomSummaryButton"
                 name="roomSummaryButton"
                 title={_t('Room Info')}
                 isHighlighted={this.isPhase(ROOM_INFO_PHASES)}
                 onClick={this.onRoomSummaryClicked}
                 analytics={['Right Panel', 'Room Summary Button', 'click']}
-            />,
-        ];
+            />
+        </>;
     }
 }

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -45,6 +45,8 @@ import {ChevronFace, ContextMenuTooltipButton, useContextMenu} from "../../struc
 import WidgetContextMenu from "../context_menus/WidgetContextMenu";
 import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
 import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
+import RoomName from "../elements/RoomName";
+import UIStore from "../../../stores/UIStore";
 
 interface IProps {
     room: Room;
@@ -115,8 +117,8 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
         const rect = handle.current.getBoundingClientRect();
         contextMenu = <WidgetContextMenu
             chevronFace={ChevronFace.None}
-            right={window.innerWidth - rect.right}
-            bottom={window.innerHeight - rect.top}
+            right={UIStore.instance.windowWidth - rect.right}
+            bottom={UIStore.instance.windowHeight - rect.top}
             onFinished={closeMenu}
             app={app}
         />;
@@ -249,7 +251,13 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
             />
         </div>
 
-        <h2 title={room.name}>{ room.name }</h2>
+        <RoomName room={room}>
+            { name => (
+                <h2 title={name}>
+                    { name }
+                </h2>
+            )}
+        </RoomName>
         <div className="mx_RoomSummaryCard_alias" title={alias}>
             { alias }
         </div>

src/components/views/right_panel/UserInfo.tsx

@@ -17,18 +17,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import {MatrixClient} from 'matrix-js-sdk/src/client';
-import {RoomMember} from 'matrix-js-sdk/src/models/room-member';
-import {User} from 'matrix-js-sdk/src/models/user';
-import {Room} from 'matrix-js-sdk/src/models/room';
-import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
-import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
+import { User } from 'matrix-js-sdk/src/models/user';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 
 import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
-import {_t} from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import createRoom, { findDMForUser, privateShouldBeEncrypted } from '../../../createRoom';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -39,18 +40,18 @@ import MultiInviter from "../../../utils/MultiInviter";
 import GroupStore from "../../../stores/GroupStore";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import E2EIcon from "../rooms/E2EIcon";
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
-import {textualPowerLevel} from '../../../Roles';
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+import { textualPowerLevel } from '../../../Roles';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
 import EncryptionPanel from "./EncryptionPanel";
-import {useAsyncMemo} from '../../../hooks/useAsyncMemo';
-import {legacyVerifyUser, verifyDevice, verifyUser} from '../../../verification';
-import {Action} from "../../../dispatcher/actions";
+import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
+import { legacyVerifyUser, verifyDevice, verifyUser } from '../../../verification';
+import { Action } from "../../../dispatcher/actions";
 import { USER_SECURITY_TAB } from "../dialogs/UserSettingsDialog";
-import {useIsEncrypted} from "../../../hooks/useIsEncrypted";
+import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
 import BaseCard from "./BaseCard";
-import {E2EStatus} from "../../../utils/ShieldUtils";
+import { E2EStatus } from "../../../utils/ShieldUtils";
 import ImageView from "../elements/ImageView";
 import Spinner from "../elements/Spinner";
 import PowerSelector from "../elements/PowerSelector";
@@ -65,9 +66,10 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { mediaFromMxc } from "../../../customisations/Media";
+import UIStore from "../../../stores/UIStore";
 
-interface IDevice {
+export interface IDevice {
     deviceId: string;
     ambiguous?: boolean;
     getDisplayName(): string;
@@ -187,9 +189,15 @@ function DeviceItem({userId, device}: {userId: string, device: IDevice}) {
         verifyDevice(cli.getUser(userId), device);
     };
 
-    const deviceName = device.ambiguous ?
-        (device.getDisplayName() ? device.getDisplayName() : "") + " (" + device.deviceId + ")" :
-        device.getDisplayName();
+    let deviceName;
+    if (!device.getDisplayName()?.trim()) {
+        deviceName = device.deviceId;
+    } else {
+        deviceName = device.ambiguous ?
+            device.getDisplayName() + " (" + device.deviceId + ")" :
+            device.getDisplayName();
+    }
+
     let trustedLabel = null;
     if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
 
@@ -507,9 +515,6 @@ export const useRoomPowerLevels = (cli: MatrixClient, room: Room) => {
         } else {
             setPowerLevels({});
         }
-        return () => {
-            setPowerLevels({});
-        };
     }, [room]);
 
     useEventEmitter(cli, "RoomState.events", update);
@@ -1301,7 +1306,7 @@ const BasicUserInfo: React.FC<{
     }
 
     if (pendingUpdateCount > 0) {
-        spinner = <Spinner imgClassName="mx_ContextualMenu_spinner" />;
+        spinner = <Spinner />;
     }
 
     let memberDetails;
@@ -1442,8 +1447,8 @@ const UserInfoHeader: React.FC<{
                     <MemberAvatar
                         key={member.userId} // to instantly blank the avatar when UserInfo changes members
                         member={member}
-                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
-                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        width={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh
+                        height={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh
                         resizeMethod="scale"
                         fallbackUserId={member.userId}
                         onClick={onMemberAvatarClick}
@@ -1523,21 +1528,16 @@ interface IProps {
     user: Member;
     groupId?: string;
     room?: Room;
-    phase: RightPanelPhases.RoomMemberInfo | RightPanelPhases.GroupMemberInfo | RightPanelPhases.SpaceMemberInfo;
+    phase: RightPanelPhases.RoomMemberInfo
+        | RightPanelPhases.GroupMemberInfo
+        | RightPanelPhases.SpaceMemberInfo
+        | RightPanelPhases.EncryptionPanel;
     onClose(): void;
+    verificationRequest?: VerificationRequest;
+    verificationRequestPromise?: Promise<VerificationRequest>;
 }
 
-interface IPropsWithEncryptionPanel extends React.ComponentProps<typeof EncryptionPanel> {
-    user: Member;
-    groupId: void;
-    room: Room;
-    phase: RightPanelPhases.EncryptionPanel;
-    onClose(): void;
-}
-
-type Props = IProps | IPropsWithEncryptionPanel;
-
-const UserInfo: React.FC<Props> = ({
+const UserInfo: React.FC<IProps> = ({
     user,
     groupId,
     room,

src/components/views/right_panel/WidgetCard.tsx

@@ -30,6 +30,7 @@ import { Action } from "../../../dispatcher/actions";
 import { ChevronFace, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu";
 import WidgetContextMenu from "../context_menus/WidgetContextMenu";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
+import UIStore from "../../../stores/UIStore";
 
 interface IProps {
     room: Room;
@@ -65,7 +66,7 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
         contextMenu = (
             <WidgetContextMenu
                 chevronFace={ChevronFace.None}
-                right={window.innerWidth - rect.right - 12}
+                right={UIStore.instance.windowWidth - rect.right - 12}
                 top={rect.bottom + 12}
                 onFinished={closeMenu}
                 app={app}

src/components/views/rooms/AppsDrawer.js

@@ -36,6 +36,7 @@ import {Container, WidgetLayoutStore} from "../../../stores/widgets/WidgetLayout
 import {clamp, percentageOf, percentageWithin} from "../../../utils/numbers";
 import {useStateCallback} from "../../../hooks/useStateCallback";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import UIStore from "../../../stores/UIStore";
 
 @replaceableComponent("views.rooms.AppsDrawer")
 export default class AppsDrawer extends React.Component {
@@ -81,13 +82,6 @@ export default class AppsDrawer extends React.Component {
         this.props.resizeNotifier.off("isResizing", this.onIsResizing);
     }
 
-    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(newProps) {
-        // Room has changed probably, update apps
-        this._updateApps();
-    }
-
     onIsResizing = (resizing) => {
         // This one is the vertical, ie. change height of apps drawer
         this.setState({ resizingVertical: resizing });
@@ -140,7 +134,10 @@ export default class AppsDrawer extends React.Component {
     _getAppsHash = (apps) => apps.map(app => app.id).join("~");
 
     componentDidUpdate(prevProps, prevState) {
-        if (this._getAppsHash(this.state.apps) !== this._getAppsHash(prevState.apps)) {
+        if (prevProps.userId !== this.props.userId || prevProps.room !== this.props.room) {
+            // Room has changed, update apps
+            this._updateApps();
+        } else if (this._getAppsHash(this.state.apps) !== this._getAppsHash(prevState.apps)) {
             this._loadResizerPreferences();
         }
     }
@@ -290,7 +287,7 @@ const PersistentVResizer = ({
 
     // Arbitrary defaults to avoid NaN problems. 100 px or 3/4 of the visible window.
     if (!minHeight) minHeight = 100;
-    if (!maxHeight) maxHeight = (window.innerHeight / 4) * 3;
+    if (!maxHeight) maxHeight = (UIStore.instance.windowHeight / 4) * 3;
 
     // Convert from percentage to height. Note that the default height is 280px.
     if (defaultHeight) {

src/components/views/rooms/Autocomplete.tsx

@@ -26,6 +26,7 @@ import Autocompleter from '../../../autocomplete/Autocompleter';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const COMPOSER_SELECTED = 0;
+const MAX_PROVIDER_MATCHES = 20;
 
 export const generateCompletionDomId = (number) => `mx_Autocomplete_Completion_${number}`;
 
@@ -136,7 +137,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
 
     processQuery(query: string, selection: ISelectionRange) {
         return this.autocompleter.getCompletions(
-            query, selection, this.state.forceComplete,
+            query, selection, this.state.forceComplete, MAX_PROVIDER_MATCHES,
         ).then((completions) => {
             // Only ever process the completions for the most recent query being processed
             if (query !== this.queryRequested) {

src/components/views/rooms/AuxPanel.tsx

@@ -15,19 +15,18 @@ limitations under the License.
 */
 
 import React from 'react';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { Room } from 'matrix-js-sdk/src/models/room'
-import dis from "../../../dispatcher/dispatcher";
 import AppsDrawer from './AppsDrawer';
 import classNames from 'classnames';
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import SettingsStore from "../../../settings/SettingsStore";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {UIFeature} from "../../../settings/UIFeature";
+import { UIFeature } from "../../../settings/UIFeature";
 import { ResizeNotifier } from "../../../utils/ResizeNotifier";
 import CallViewForRoom from '../voip/CallViewForRoom';
-import {objectHasDiff} from "../../../utils/objects";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { objectHasDiff } from "../../../utils/objects";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // js-sdk room object
@@ -69,19 +68,21 @@ export default class AuxPanel extends React.Component<IProps, IState> {
         super(props);
 
         this.state = {
-            counters: this._computeCounters(),
+            counters: this.computeCounters(),
         };
     }
 
     componentDidMount() {
         const cli = MatrixClientPeg.get();
-        cli.on("RoomState.events", this._rateLimitedUpdate);
+        if (SettingsStore.getValue("feature_state_counters")) {
+            cli.on("RoomState.events", this.rateLimitedUpdate);
+        }
     }
 
     componentWillUnmount() {
         const cli = MatrixClientPeg.get();
-        if (cli) {
-            cli.removeListener("RoomState.events", this._rateLimitedUpdate);
+        if (cli && SettingsStore.getValue("feature_state_counters")) {
+            cli.removeListener("RoomState.events", this.rateLimitedUpdate);
         }
     }
 
@@ -96,23 +97,11 @@ export default class AuxPanel extends React.Component<IProps, IState> {
         }
     }
 
-    onConferenceNotificationClick = (ev, type) => {
-        dis.dispatch({
-            action: 'place_call',
-            type: type,
-            room_id: this.props.room.roomId,
-        });
-        ev.stopPropagation();
-        ev.preventDefault();
-    };
-
-    _rateLimitedUpdate = new RateLimitedFunc(() => {
-        if (SettingsStore.getValue("feature_state_counters")) {
-            this.setState({counters: this._computeCounters()});
-        }
+    private rateLimitedUpdate = new RateLimitedFunc(() => {
+        this.setState({ counters: this.computeCounters() });
     }, 500);
 
-    _computeCounters() {
+    private computeCounters() {
         const counters = [];
 
         if (this.props.room && SettingsStore.getValue("feature_state_counters")) {
@@ -225,7 +214,7 @@ export default class AuxPanel extends React.Component<IProps, IState> {
         }
 
         return (
-            <AutoHideScrollbar className={classes} style={style} >
+            <AutoHideScrollbar className={classes} style={style}>
                 { stateViews }
                 { appsDrawer }
                 { callView }

src/components/views/rooms/EditMessageComposer.js

@@ -16,7 +16,7 @@ limitations under the License.
 */
 import React from 'react';
 import * as sdk from '../../../index';
-import {_t} from '../../../languageHandler';
+import {_t, _td} from '../../../languageHandler';
 import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
 import EditorModel from '../../../editor/model';
@@ -24,16 +24,19 @@ import {getCaretOffsetAndText} from '../../../editor/dom';
 import {htmlSerializeIfNeeded, textSerialize, containsEmote, stripEmoteCommand} from '../../../editor/serialize';
 import {findEditableEvent} from '../../../utils/EventUtils';
 import {parseEvent} from '../../../editor/deserialize';
-import {PartCreator} from '../../../editor/parts';
+import {CommandPartCreator} from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
 import classNames from 'classnames';
 import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import BasicMessageComposer from "./BasicMessageComposer";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {CommandCategories, getCommand} from '../../../SlashCommands';
 import {Action} from "../../../dispatcher/actions";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import {getKeyBindingsManager, MessageComposerAction} from '../../../KeyBindingsManager';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SendHistoryManager from '../../../SendHistoryManager';
+import Modal from '../../../Modal';
 
 function _isReply(mxEvent) {
     const relatesTo = mxEvent.getContent()["m.relates_to"];
@@ -120,6 +123,7 @@ export default class EditMessageComposer extends React.Component {
             saveDisabled: true,
         };
         this._createEditorModel();
+        window.addEventListener("beforeunload", this._saveStoredEditorState);
     }
 
     _setEditorRef = ref => {
@@ -164,6 +168,7 @@ export default class EditMessageComposer extends React.Component {
                 if (nextEvent) {
                     dis.dispatch({action: 'edit_event', event: nextEvent});
                 } else {
+                    this._clearStoredEditorState();
                     dis.dispatch({action: 'edit_event', event: null});
                     dis.fire(Action.FocusComposer);
                 }
@@ -173,11 +178,71 @@ export default class EditMessageComposer extends React.Component {
         }
     }
 
+    get _editorRoomKey() {
+        return `mx_edit_room_${this._getRoom().roomId}`;
+    }
+
+    get _editorStateKey() {
+        return `mx_edit_state_${this.props.editState.getEvent().getId()}`;
+    }
+
     _cancelEdit = () => {
+        this._clearStoredEditorState();
         dis.dispatch({action: "edit_event", event: null});
         dis.fire(Action.FocusComposer);
     }
 
+    get _shouldSaveStoredEditorState() {
+        return localStorage.getItem(this._editorRoomKey) !== null;
+    }
+
+    _restoreStoredEditorState(partCreator) {
+        const json = localStorage.getItem(this._editorStateKey);
+        if (json) {
+            try {
+                const {parts: serializedParts} = JSON.parse(json);
+                const parts = serializedParts.map(p => partCreator.deserializePart(p));
+                return parts;
+            } catch (e) {
+                console.error("Error parsing editing state: ", e);
+            }
+        }
+    }
+
+    _clearStoredEditorState() {
+        localStorage.removeItem(this._editorRoomKey);
+        localStorage.removeItem(this._editorStateKey);
+    }
+
+    _clearPreviousEdit() {
+        if (localStorage.getItem(this._editorRoomKey)) {
+            localStorage.removeItem(`mx_edit_state_${localStorage.getItem(this._editorRoomKey)}`);
+        }
+    }
+
+    _saveStoredEditorState() {
+        const item = SendHistoryManager.createItem(this.model);
+        this._clearPreviousEdit();
+        localStorage.setItem(this._editorRoomKey, this.props.editState.getEvent().getId());
+        localStorage.setItem(this._editorStateKey, JSON.stringify(item));
+    }
+
+    _isSlashCommand() {
+        const parts = this.model.parts;
+        const firstPart = parts[0];
+        if (firstPart) {
+            if (firstPart.type === "command" && firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")) {
+                return true;
+            }
+
+            if (firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")
+                && (firstPart.type === "plain" || firstPart.type === "pill-candidate")) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     _isContentModified(newContent) {
         // if nothing has changed then bail
         const oldContent = this.props.editState.getEvent().getContent();
@@ -190,19 +255,114 @@ export default class EditMessageComposer extends React.Component {
         return true;
     }
 
-    _sendEdit = () => {
+    _getSlashCommand() {
+        const commandText = this.model.parts.reduce((text, part) => {
+            // use mxid to textify user pills in a command
+            if (part.type === "user-pill") {
+                return text + part.resourceId;
+            }
+            return text + part.text;
+        }, "");
+        const {cmd, args} = getCommand(commandText);
+        return [cmd, args, commandText];
+    }
+
+    async _runSlashCommand(cmd, args, roomId) {
+        const result = cmd.run(roomId, args);
+        let messageContent;
+        let error = result.error;
+        if (result.promise) {
+            try {
+                if (cmd.category === CommandCategories.messages) {
+                    messageContent = await result.promise;
+                } else {
+                    await result.promise;
+                }
+            } catch (err) {
+                error = err;
+            }
+        }
+        if (error) {
+            console.error("Command failure: %s", error);
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            // assume the error is a server error when the command is async
+            const isServerError = !!result.promise;
+            const title = isServerError ? _td("Server error") : _td("Command error");
+
+            let errText;
+            if (typeof error === 'string') {
+                errText = error;
+            } else if (error.message) {
+                errText = error.message;
+            } else {
+                errText = _t("Server unavailable, overloaded, or something else went wrong.");
+            }
+
+            Modal.createTrackedDialog(title, '', ErrorDialog, {
+                title: _t(title),
+                description: errText,
+            });
+        } else {
+            console.log("Command success.");
+            if (messageContent) return messageContent;
+        }
+    }
+
+    _sendEdit = async () => {
         const startTime = CountlyAnalytics.getTimestamp();
         const editedEvent = this.props.editState.getEvent();
         const editContent = createEditContent(this.model, editedEvent);
         const newContent = editContent["m.new_content"];
 
+        let shouldSend = true;
+
         // If content is modified then send an updated event into the room
         if (this._isContentModified(newContent)) {
             const roomId = editedEvent.getRoomId();
-            this._cancelPreviousPendingEdit();
-            const prom = this.context.sendMessage(roomId, editContent);
-            dis.dispatch({action: "message_sent"});
-            CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
+            if (!containsEmote(this.model) && this._isSlashCommand()) {
+                const [cmd, args, commandText] = this._getSlashCommand();
+                if (cmd) {
+                    if (cmd.category === CommandCategories.messages) {
+                        editContent["m.new_content"] = await this._runSlashCommand(cmd, args, roomId);
+                    } else {
+                        this._runSlashCommand(cmd, args, roomId);
+                        shouldSend = false;
+                    }
+                } else {
+                    // ask the user if their unknown command should be sent as a message
+                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                    const {finished} = Modal.createTrackedDialog("Unknown command", "", QuestionDialog, {
+                        title: _t("Unknown Command"),
+                        description: <div>
+                            <p>
+                                { _t("Unrecognised command: %(commandText)s", {commandText}) }
+                            </p>
+                            <p>
+                                { _t("You can use <code>/help</code> to list available commands. " +
+                                    "Did you mean to send this as a message?", {}, {
+                                    code: t => <code>{ t }</code>,
+                                }) }
+                            </p>
+                            <p>
+                                { _t("Hint: Begin your message with <code>//</code> to start it with a slash.", {}, {
+                                    code: t => <code>{ t }</code>,
+                                }) }
+                            </p>
+                        </div>,
+                        button: _t('Send as message'),
+                    });
+                    const [sendAnyway] = await finished;
+                    // if !sendAnyway bail to let the user edit the composer and try again
+                    if (!sendAnyway) return;
+                }
+            }
+            if (shouldSend) {
+                this._cancelPreviousPendingEdit();
+                const prom = this.context.sendMessage(roomId, editContent);
+                this._clearStoredEditorState();
+                dis.dispatch({action: "message_sent"});
+                CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
+            }
         }
 
         // close the event editing and focus composer
@@ -235,22 +395,27 @@ export default class EditMessageComposer extends React.Component {
         // then when mounting the editor again with the same editor state,
         // it will set the cursor at the end.
         this.props.editState.setEditorState(caret, parts);
+        window.removeEventListener("beforeunload", this._saveStoredEditorState);
+        if (this._shouldSaveStoredEditorState) {
+            this._saveStoredEditorState();
+        }
     }
 
     _createEditorModel() {
         const {editState} = this.props;
         const room = this._getRoom();
-        const partCreator = new PartCreator(room, this.context);
+        const partCreator = new CommandPartCreator(room, this.context);
         let parts;
         if (editState.hasEditorState()) {
             // if restoring state from a previous editor,
             // restore serialized parts from the state
             parts = editState.getSerializedParts().map(p => partCreator.deserializePart(p));
         } else {
-            // otherwise, parse the body of the event
-            parts = parseEvent(editState.getEvent(), partCreator);
+            //otherwise, either restore serialized parts from localStorage or parse the body of the event
+            parts = this._restoreStoredEditorState(partCreator) || parseEvent(editState.getEvent(), partCreator);
         }
         this.model = new EditorModel(parts, partCreator);
+        this._saveStoredEditorState();
     }
 
     _getInitialCaretPosition() {

src/components/views/rooms/EventTile.tsx

@@ -25,7 +25,7 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import ReplyThread from "../elements/ReplyThread";
 import { _t } from '../../../languageHandler';
-import * as TextForEvent from "../../../TextForEvent";
+import { hasText } from "../../../TextForEvent";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -277,6 +277,12 @@ interface IProps {
 
     // Helper to build permalinks for the room
     permalinkCreator?: RoomPermalinkCreator;
+
+    // Symbol of the root node
+    as?: string
+
+    // whether or not to always show timestamps
+    alwaysShowTimestamps?: boolean
 }
 
 interface IState {
@@ -291,12 +297,15 @@ interface IState {
     previouslyRequestedKeys: boolean;
     // The Relations model from the JS SDK for reactions to `mxEvent`
     reactions: Relations;
+
+    hover: boolean;
 }
 
 @replaceableComponent("views.rooms.EventTile")
 export default class EventTile extends React.Component<IProps, IState> {
     private suppressReadReceiptAnimation: boolean;
     private isListeningForReceipts: boolean;
+    private ref: React.RefObject<unknown>;
     private tile = React.createRef();
     private replyThread = React.createRef();
 
@@ -322,6 +331,8 @@ export default class EventTile extends React.Component<IProps, IState> {
             previouslyRequestedKeys: false,
             // The Relations model from the JS SDK for reactions to `mxEvent`
             reactions: this.getReactions(),
+
+            hover: false,
         };
 
         // don't do RR animations until we are mounted
@@ -333,6 +344,8 @@ export default class EventTile extends React.Component<IProps, IState> {
         // to determine if we've already subscribed and use a combination of other flags to find
         // out if we should even be subscribed at all.
         this.isListeningForReceipts = false;
+
+        this.ref = React.createRef();
     }
 
     /**
@@ -631,7 +644,18 @@ export default class EventTile extends React.Component<IProps, IState> {
 
         // return early if there are no read receipts
         if (!this.props.readReceipts || this.props.readReceipts.length === 0) {
-            return (<span className="mx_EventTile_readAvatars" />);
+            // We currently must include `mx_EventTile_readAvatars` in the DOM
+            // of all events, as it is the positioned parent of the animated
+            // read receipts. We can't let it unmount when a receipt moves
+            // events, so for now we mount it for all events. Without it, the
+            // animation will start from the top of the timeline (because it
+            // lost its container).
+            // See also https://github.com/vector-im/element-web/issues/17561
+            return (
+                <div className="mx_EventTile_msgOption">
+                    <span className="mx_EventTile_readAvatars" />
+                </div>
+            );
         }
 
         const ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker');
@@ -639,7 +663,8 @@ export default class EventTile extends React.Component<IProps, IState> {
         const receiptOffset = 15;
         let left = 0;
 
-        const receipts = this.props.readReceipts || [];
+        const receipts = this.props.readReceipts;
+
         for (let i = 0; i < receipts.length; ++i) {
             const receipt = receipts[i];
 
@@ -690,10 +715,14 @@ export default class EventTile extends React.Component<IProps, IState> {
             }
         }
 
-        return <span className="mx_EventTile_readAvatars">
-            { remText }
-            { avatars }
-        </span>;
+        return (
+            <div className="mx_EventTile_msgOption">
+                <span className="mx_EventTile_readAvatars">
+                    { remText }
+                    { avatars }
+                </span>
+            </div>
+        )
     }
 
     onSenderProfileClick = event => {
@@ -790,13 +819,6 @@ export default class EventTile extends React.Component<IProps, IState> {
             return null;
         }
         const eventId = this.props.mxEvent.getId();
-        if (!eventId) {
-            // XXX: Temporary diagnostic logging for https://github.com/vector-im/element-web/issues/11120
-            console.error("EventTile attempted to get relations for an event without an ID");
-            // Use event's special `toJSON` method to log key data.
-            console.log(JSON.stringify(this.props.mxEvent, null, 4));
-            console.trace("Stacktrace for https://github.com/vector-im/element-web/issues/11120");
-        }
         return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
     };
 
@@ -892,6 +914,12 @@ export default class EventTile extends React.Component<IProps, IState> {
             permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
         }
 
+        // we can't use local echoes as scroll tokens, because their event IDs change.
+        // Local echos have a send "status".
+        const scrollToken = this.props.mxEvent.status
+            ? undefined
+            : this.props.mxEvent.getId();
+
         let avatar;
         let sender;
         let avatarSize;
@@ -961,7 +989,9 @@ export default class EventTile extends React.Component<IProps, IState> {
             onFocusChange={this.onActionBarFocusChange}
         /> : undefined;
 
-        const timestamp = this.props.mxEvent.getTs() ?
+        const showTimestamp = this.props.mxEvent.getTs() &&
+            (this.props.alwaysShowTimestamps || this.props.last || this.state.hover || this.state.actionBarFocused);
+        const timestamp = showTimestamp ?
             <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
 
         const keyRequestHelpText =
@@ -1024,68 +1054,71 @@ export default class EventTile extends React.Component<IProps, IState> {
         let msgOption;
         if (this.props.showReadReceipts) {
             const readAvatars = this.getReadAvatars();
-            msgOption = (
-                <div className="mx_EventTile_msgOption">
-                    { readAvatars }
-                </div>
-            );
+            msgOption = readAvatars;
         }
 
         switch (this.props.tileShape) {
             case 'notif': {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
-                return (
-                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
-                        <div className="mx_EventTile_roomName">
-                            <RoomAvatar room={room} width={28} height={28} />
-                            <a href={permalink} onClick={this.onPermalinkClicked}>
-                                { room ? room.name : '' }
-                            </a>
-                        </div>
-                        <div className="mx_EventTile_senderDetails">
-                            { avatar }
-                            <a href={permalink} onClick={this.onPermalinkClicked}>
-                                { sender }
-                                { timestamp }
-                            </a>
-                        </div>
-                        <div className="mx_EventTile_line">
-                            <EventTileType ref={this.tile}
-                                mxEvent={this.props.mxEvent}
-                                highlights={this.props.highlights}
-                                highlightLink={this.props.highlightLink}
-                                showUrlPreview={this.props.showUrlPreview}
-                                onHeightChanged={this.props.onHeightChanged}
-                            />
-                        </div>
-                    </div>
-                );
+                return React.createElement(this.props.as || "li", {
+                    "className": classes,
+                    "aria-live": ariaLive,
+                    "aria-atomic": true,
+                    "data-scroll-tokens": scrollToken,
+                }, [
+                    <div className="mx_EventTile_roomName" key="mx_EventTile_roomName">
+                        <RoomAvatar room={room} width={28} height={28} />
+                        <a href={permalink} onClick={this.onPermalinkClicked}>
+                            { room ? room.name : '' }
+                        </a>
+                    </div>,
+                    <div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
+                        { avatar }
+                        <a href={permalink} onClick={this.onPermalinkClicked}>
+                            { sender }
+                            { timestamp }
+                        </a>
+                    </div>,
+                    <div className="mx_EventTile_line" key="mx_EventTile_line">
+                        <EventTileType ref={this.tile}
+                            mxEvent={this.props.mxEvent}
+                            highlights={this.props.highlights}
+                            highlightLink={this.props.highlightLink}
+                            showUrlPreview={this.props.showUrlPreview}
+                            onHeightChanged={this.props.onHeightChanged}
+                        />
+                    </div>,
+                ]);
             }
             case 'file_grid': {
-                return (
-                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
-                        <div className="mx_EventTile_line">
-                            <EventTileType ref={this.tile}
-                                mxEvent={this.props.mxEvent}
-                                highlights={this.props.highlights}
-                                highlightLink={this.props.highlightLink}
-                                showUrlPreview={this.props.showUrlPreview}
-                                tileShape={this.props.tileShape}
-                                onHeightChanged={this.props.onHeightChanged}
-                            />
+                return React.createElement(this.props.as || "li", {
+                    "className": classes,
+                    "aria-live": ariaLive,
+                    "aria-atomic": true,
+                    "data-scroll-tokens": scrollToken,
+                }, [
+                    <div className="mx_EventTile_line" key="mx_EventTile_line">
+                        <EventTileType ref={this.tile}
+                            mxEvent={this.props.mxEvent}
+                            highlights={this.props.highlights}
+                            highlightLink={this.props.highlightLink}
+                            showUrlPreview={this.props.showUrlPreview}
+                            tileShape={this.props.tileShape}
+                            onHeightChanged={this.props.onHeightChanged}
+                        />
+                    </div>,
+                    <a
+                        className="mx_EventTile_senderDetailsLink"
+                        key="mx_EventTile_senderDetailsLink"
+                        href={permalink}
+                        onClick={this.onPermalinkClicked}
+                    >
+                        <div className="mx_EventTile_senderDetails">
+                            { sender }
+                            { timestamp }
                         </div>
-                        <a
-                            className="mx_EventTile_senderDetailsLink"
-                            href={permalink}
-                            onClick={this.onPermalinkClicked}
-                        >
-                            <div className="mx_EventTile_senderDetails">
-                                { sender }
-                                { timestamp }
-                            </div>
-                        </a>
-                    </div>
-                );
+                    </a>,
+                ]);
             }
 
             case 'reply':
@@ -1097,29 +1130,34 @@ export default class EventTile extends React.Component<IProps, IState> {
                         this.props.onHeightChanged,
                         this.props.permalinkCreator,
                         this.replyThread,
+                        null,
+                        this.props.alwaysShowTimestamps || this.state.hover,
                     );
                 }
-                return (
-                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
-                        { ircTimestamp }
-                        { avatar }
-                        { sender }
-                        { ircPadlock }
-                        <div className="mx_EventTile_reply">
-                            { groupTimestamp }
-                            { groupPadlock }
-                            { thread }
-                            <EventTileType ref={this.tile}
-                                mxEvent={this.props.mxEvent}
-                                highlights={this.props.highlights}
-                                highlightLink={this.props.highlightLink}
-                                onHeightChanged={this.props.onHeightChanged}
-                                replacingEventId={this.props.replacingEventId}
-                                showUrlPreview={false}
-                            />
-                        </div>
-                    </div>
-                );
+                return React.createElement(this.props.as || "li", {
+                    "className": classes,
+                    "aria-live": ariaLive,
+                    "aria-atomic": true,
+                    "data-scroll-tokens": scrollToken,
+                }, [
+                    ircTimestamp,
+                    avatar,
+                    sender,
+                    ircPadlock,
+                    <div className="mx_EventTile_reply" key="mx_EventTile_reply">
+                        { groupTimestamp }
+                        { groupPadlock }
+                        { thread }
+                        <EventTileType ref={this.tile}
+                            mxEvent={this.props.mxEvent}
+                            highlights={this.props.highlights}
+                            highlightLink={this.props.highlightLink}
+                            onHeightChanged={this.props.onHeightChanged}
+                            replacingEventId={this.props.replacingEventId}
+                            showUrlPreview={false}
+                        />
+                    </div>,
+                ]);
             }
             default: {
                 const thread = ReplyThread.makeThread(
@@ -1128,15 +1166,25 @@ export default class EventTile extends React.Component<IProps, IState> {
                     this.props.permalinkCreator,
                     this.replyThread,
                     this.props.layout,
+                    this.props.alwaysShowTimestamps || this.state.hover,
                 );
 
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return (
-                    <div className={classes} tabIndex={-1} aria-live={ariaLive} aria-atomic="true">
-                        { ircTimestamp }
-                        { sender }
-                        { ircPadlock }
-                        <div className="mx_EventTile_line">
+                    React.createElement(this.props.as || "li", {
+                        "ref": this.ref,
+                        "className": classes,
+                        "tabIndex": -1,
+                        "aria-live": ariaLive,
+                        "aria-atomic": "true",
+                        "data-scroll-tokens": scrollToken,
+                        "onMouseEnter": () => this.setState({ hover: true }),
+                        "onMouseLeave": () => this.setState({ hover: false }),
+                    }, [
+                        ircTimestamp,
+                        sender,
+                        ircPadlock,
+                        <div className="mx_EventTile_line" key="mx_EventTile_line">
                             { groupTimestamp }
                             { groupPadlock }
                             { thread }
@@ -1153,16 +1201,12 @@ export default class EventTile extends React.Component<IProps, IState> {
                             { keyRequestInfo }
                             { reactionsRow }
                             { actionBar }
-                        </div>
-                        {msgOption}
-                        {
-                            // The avatar goes after the event tile as it's absolutely positioned to be over the
-                            // event tile line, so needs to be later in the DOM so it appears on top (this avoids
-                            // the need for further z-indexing chaos)
-                        }
-                        { avatar }
-                    </div>
-                );
+                        </div>,
+                        msgOption,
+                        avatar,
+
+                    ])
+                )
             }
         }
     }
@@ -1184,7 +1228,7 @@ export function haveTileForEvent(e) {
     const handler = getHandlerTile(e);
     if (handler === undefined) return false;
     if (handler === 'messages.TextualEvent') {
-        return TextForEvent.textForEvent(e) !== '';
+        return hasText(e);
     } else if (handler === 'messages.RoomCreate') {
         return Boolean(e.getContent()['predecessor']);
     } else {
@@ -1324,11 +1368,15 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
             tooltip = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={20} />;
         }
 
-        return <span className="mx_EventTile_readAvatars">
-            <span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
-                {nonCssBadge}
-                {tooltip}
-            </span>
-        </span>;
+        return (
+            <div className="mx_EventTile_msgOption">
+                <span className="mx_EventTile_readAvatars">
+                    <span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
+                        {nonCssBadge}
+                        {tooltip}
+                    </span>
+                </span>
+            </div>
+        );
     }
 }

src/components/views/rooms/ForwardMessage.js

@@ -1,53 +0,0 @@
-/*
- Copyright 2017 Vector Creations Ltd
- Copyright 2017 Michael Telatynski
-
- 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';
-import {Key} from '../../../Keyboard';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-
-@replaceableComponent("views.rooms.ForwardMessage")
-export default class ForwardMessage extends React.Component {
-    static propTypes = {
-        onCancelClick: PropTypes.func.isRequired,
-    };
-
-    componentDidMount() {
-        document.addEventListener('keydown', this._onKeyDown);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('keydown', this._onKeyDown);
-    }
-
-    _onKeyDown = ev => {
-        switch (ev.key) {
-            case Key.ESCAPE:
-                this.props.onCancelClick();
-                break;
-        }
-    };
-
-    render() {
-        return (
-            <div className="mx_ForwardMessage">
-                <h1>{ _t('Please select the destination room for this message') }</h1>
-            </div>
-        );
-    }
-}

src/components/views/rooms/MemberList.js

@@ -133,6 +133,12 @@ export default class MemberList extends React.Component {
         }
     }
 
+    get canInvite() {
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.roomId);
+        return room && room.canInvite(cli.getUserId());
+    }
+
     _getMembersState(members) {
         // set the state after determining _showPresence to make sure it's
         // taken into account while rerendering
@@ -141,6 +147,7 @@ export default class MemberList extends React.Component {
             members: members,
             filteredJoinedMembers: this._filterMembers(members, 'join'),
             filteredInvitedMembers: this._filterMembers(members, 'invite'),
+            canInvite: this.canInvite,
 
             // ideally we'd size this to the page height, but
             // in practice I find that a little constraining
@@ -196,6 +203,8 @@ export default class MemberList extends React.Component {
             event.getType() === "m.room.third_party_invite") {
             this._updateList();
         }
+
+        if (this.canInvite !== this.state.canInvite) this.setState({ canInvite: this.canInvite });
     };
 
     _updateList = rate_limited_func(() => {
@@ -229,6 +238,8 @@ export default class MemberList extends React.Component {
                 member.user = cli.getUser(member.userId);
             }
 
+            member.sortName = (member.name[0] === '@' ? member.name.substr(1) : member.name).replace(SORT_REGEX, "");
+
             // XXX: this user may have no lastPresenceTs value!
             // the right solution here is to fix the race rather than leave it as 0
         });
@@ -243,6 +254,8 @@ export default class MemberList extends React.Component {
                 m.membership === 'join' || m.membership === 'invite'
             );
         });
+        const language = SettingsStore.getValue("language");
+        this.collator = new Intl.Collator(language, { sensitivity: 'base', usePunctuation: true });
         filteredAndSortedMembers.sort(this.memberSort);
         return filteredAndSortedMembers;
     }
@@ -342,13 +355,7 @@ export default class MemberList extends React.Component {
         }
 
         // Fourth by name (alphabetical)
-        const nameA = (memberA.name[0] === '@' ? memberA.name.substr(1) : memberA.name).replace(SORT_REGEX, "");
-        const nameB = (memberB.name[0] === '@' ? memberB.name.substr(1) : memberB.name).replace(SORT_REGEX, "");
-        // console.log(`Comparing userA_name=${nameA} against userB_name=${nameB} - returning`);
-        return nameA.localeCompare(nameB, {
-            ignorePunctuation: true,
-            sensitivity: "base",
-        });
+        return this.collator.compare(memberA.sortName, memberB.sortName);
     };
 
     onSearchQueryChanged = searchQuery => {
@@ -413,7 +420,7 @@ export default class MemberList extends React.Component {
             } else {
                 // Is a 3pid invite
                 return <EntityTile key={m.getStateKey()} name={m.getContent().display_name} suppressOnHover={true}
-                                   onClick={() => this._onPending3pidInviteClick(m)} />;
+                    onClick={() => this._onPending3pidInviteClick(m)} />;
             }
         });
     }
@@ -455,8 +462,6 @@ export default class MemberList extends React.Component {
         let inviteButton;
 
         if (room && room.getMyMembership() === 'join') {
-            const canInvite = room.canInvite(cli.getUserId());
-
             let inviteButtonText = _t("Invite to this room");
             const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat();
             if (chat && chat.roomId === this.props.roomId) {
@@ -467,7 +472,7 @@ export default class MemberList extends React.Component {
 
             const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             inviteButton =
-                <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick} disabled={!canInvite}>
+                <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick} disabled={!this.state.canInvite}>
                     <span>{ inviteButtonText }</span>
                 </AccessibleButton>;
         }
@@ -477,10 +482,10 @@ export default class MemberList extends React.Component {
         if (this._getChildCountInvited() > 0) {
             invitedHeader = <h2>{ _t("Invited") }</h2>;
             invitedSection = <TruncatedList className="mx_MemberList_section mx_MemberList_invited" truncateAt={this.state.truncateAtInvited}
-                        createOverflowElement={this._createOverflowTileInvited}
-                        getChildren={this._getChildrenInvited}
-                        getChildCount={this._getChildCountInvited}
-                />;
+                createOverflowElement={this._createOverflowTileInvited}
+                getChildren={this._getChildrenInvited}
+                getChildCount={this._getChildCountInvited}
+            />;
         }
 
         const footer = (
@@ -513,9 +518,9 @@ export default class MemberList extends React.Component {
         >
             <div className="mx_MemberList_wrapper">
                 <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
-                               createOverflowElement={this._createOverflowTileJoined}
-                               getChildren={this._getChildrenJoined}
-                               getChildCount={this._getChildCountJoined} />
+                    createOverflowElement={this._createOverflowTileJoined}
+                    getChildren={this._getChildrenJoined}
+                    getChildCount={this._getChildCountJoined} />
                 { invitedHeader }
                 { invitedSection }
             </div>

src/components/views/rooms/NewRoomIntro.tsx

@@ -31,6 +31,17 @@ import dis from "../../../dispatcher/dispatcher";
 import SpaceStore from "../../../stores/SpaceStore";
 import {showSpaceInvite} from "../../../utils/space";
 
+import { privateShouldBeEncrypted } from "../../../createRoom";
+
+import EventTileBubble from "../messages/EventTileBubble";
+import { ROOM_SECURITY_TAB } from "../dialogs/RoomSettingsDialog";
+
+function hasExpectedEncryptionSettings(room): boolean {
+    const isEncrypted: boolean = room._client?.isRoomEncrypted(room.roomId);
+    const isPublic: boolean = room.getJoinRule() === "public";
+    return isPublic || !privateShouldBeEncrypted() || isEncrypted;
+}
+
 const NewRoomIntro = () => {
     const cli = useContext(MatrixClientContext);
     const {room, roomId} = useContext(RoomContext);
@@ -166,7 +177,31 @@ const NewRoomIntro = () => {
         </React.Fragment>;
     }
 
+    function openRoomSettings(event) {
+        event.preventDefault();
+        dis.dispatch({
+            action: "open_room_settings",
+            initial_tab_id: ROOM_SECURITY_TAB,
+        });
+    }
+
+    const sub2 = _t(
+        "Your private messages are normally encrypted, but this room isn't. "+
+        "Usually this is due to an unsupported device or method being used, " +
+        "like email invites. <a>Enable encryption in settings.</a>", {},
+        { a: sub => <a onClick={openRoomSettings} href="#">{sub}</a> },
+    );
+
     return <div className="mx_NewRoomIntro">
+
+        { !hasExpectedEncryptionSettings(room) && (
+            <EventTileBubble
+                className="mx_cryptoEvent mx_cryptoEvent_icon_warning"
+                title={_t("End-to-end encryption isn't enabled")}
+                subtitle={sub2}
+            />
+        )}
+
         { body }
     </div>;
 };

src/components/views/rooms/PinnedEventTile.js

@@ -1,111 +0,0 @@
-/*
-Copyright 2017 Travis Ralston
-
-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 {MatrixClientPeg} from "../../../MatrixClientPeg";
-import dis from "../../../dispatcher/dispatcher";
-import AccessibleButton from "../elements/AccessibleButton";
-import MessageEvent from "../messages/MessageEvent";
-import MemberAvatar from "../avatars/MemberAvatar";
-import { _t } from '../../../languageHandler';
-import {formatFullDate} from '../../../DateUtils';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-
-@replaceableComponent("views.rooms.PinnedEventTile")
-export default class PinnedEventTile extends React.Component {
-    static propTypes = {
-        mxRoom: PropTypes.object.isRequired,
-        mxEvent: PropTypes.object.isRequired,
-        onUnpinned: PropTypes.func,
-    };
-
-    onTileClicked = () => {
-        dis.dispatch({
-            action: 'view_room',
-            event_id: this.props.mxEvent.getId(),
-            highlighted: true,
-            room_id: this.props.mxEvent.getRoomId(),
-        });
-    };
-
-    onUnpinClicked = () => {
-        const pinnedEvents = this.props.mxRoom.currentState.getStateEvents("m.room.pinned_events", "");
-        if (!pinnedEvents || !pinnedEvents.getContent().pinned) {
-            // Nothing to do: already unpinned
-            if (this.props.onUnpinned) this.props.onUnpinned();
-        } else {
-            const pinned = pinnedEvents.getContent().pinned;
-            const index = pinned.indexOf(this.props.mxEvent.getId());
-            if (index !== -1) {
-                pinned.splice(index, 1);
-                MatrixClientPeg.get().sendStateEvent(this.props.mxRoom.roomId, 'm.room.pinned_events', {pinned}, '')
-                    .then(() => {
-                        if (this.props.onUnpinned) this.props.onUnpinned();
-                    });
-            } else if (this.props.onUnpinned) this.props.onUnpinned();
-        }
-    };
-
-    _canUnpin() {
-        return this.props.mxRoom.currentState.mayClientSendStateEvent('m.room.pinned_events', MatrixClientPeg.get());
-    }
-
-    render() {
-        const sender = this.props.mxEvent.getSender();
-        // Get the latest sender profile rather than historical
-        const senderProfile = this.props.mxRoom.getMember(sender);
-        const avatarSize = 40;
-
-        let unpinButton = null;
-        if (this._canUnpin()) {
-            unpinButton = (
-                <AccessibleButton onClick={this.onUnpinClicked} className="mx_PinnedEventTile_unpinButton">
-                    <img src={require("../../../../res/img/cancel-red.svg")} width="8" height="8" alt={_t('Unpin Message')} title={_t('Unpin Message')} />
-                </AccessibleButton>
-            );
-        }
-
-        return (
-            <div className="mx_PinnedEventTile">
-                <div className="mx_PinnedEventTile_actions">
-                    <AccessibleButton className="mx_PinnedEventTile_gotoButton mx_textButton" onClick={this.onTileClicked}>
-                        { _t("Jump to message") }
-                    </AccessibleButton>
-                    { unpinButton }
-                </div>
-
-                <span className="mx_PinnedEventTile_senderAvatar">
-                    <MemberAvatar member={senderProfile} width={avatarSize} height={avatarSize} fallbackUserId={sender} />
-                </span>
-                <span className="mx_PinnedEventTile_sender">
-                    { senderProfile ? senderProfile.name : sender }
-                </span>
-                <span className="mx_PinnedEventTile_timestamp">
-                    { formatFullDate(new Date(this.props.mxEvent.getTs())) }
-                </span>
-                <div className="mx_PinnedEventTile_message">
-                    <MessageEvent
-                        mxEvent={this.props.mxEvent}
-                        className="mx_PinnedEventTile_body"
-                        maxImageHeight={150}
-                        onHeightChanged={() => {}} // we need to give this, apparently
-                    />
-                </div>
-            </div>
-        );
-    }
-}

src/components/views/rooms/PinnedEventTile.tsx

@@ -0,0 +1,104 @@
+/*
+Copyright 2017 Travis Ralston
+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 from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+import dis from "../../../dispatcher/dispatcher";
+import AccessibleButton from "../elements/AccessibleButton";
+import MessageEvent from "../messages/MessageEvent";
+import MemberAvatar from "../avatars/MemberAvatar";
+import { _t } from '../../../languageHandler';
+import { formatDate } from '../../../DateUtils';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { getUserNameColorClass } from "../../../utils/FormattingUtils";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+
+interface IProps {
+    room: Room;
+    event: MatrixEvent;
+    onUnpinClicked?(): void;
+}
+
+const AVATAR_SIZE = 24;
+
+@replaceableComponent("views.rooms.PinnedEventTile")
+export default class PinnedEventTile extends React.Component<IProps> {
+    public static contextType = MatrixClientContext;
+
+    private onTileClicked = () => {
+        dis.dispatch({
+            action: 'view_room',
+            event_id: this.props.event.getId(),
+            highlighted: true,
+            room_id: this.props.event.getRoomId(),
+        });
+    };
+
+    render() {
+        const sender = this.props.event.getSender();
+        const senderProfile = this.props.room.getMember(sender);
+
+        let unpinButton = null;
+        if (this.props.onUnpinClicked) {
+            unpinButton = (
+                <AccessibleTooltipButton
+                    onClick={this.props.onUnpinClicked}
+                    className="mx_PinnedEventTile_unpinButton"
+                    title={_t("Unpin")}
+                />
+            );
+        }
+
+        return <div className="mx_PinnedEventTile">
+            <MemberAvatar
+                className="mx_PinnedEventTile_senderAvatar"
+                member={senderProfile}
+                width={AVATAR_SIZE}
+                height={AVATAR_SIZE}
+                fallbackUserId={sender}
+            />
+
+            <span className={"mx_PinnedEventTile_sender " + getUserNameColorClass(sender)}>
+                { senderProfile?.name || sender }
+            </span>
+
+            { unpinButton }
+
+            <div className="mx_PinnedEventTile_message">
+                <MessageEvent
+                    mxEvent={this.props.event}
+                    className="mx_PinnedEventTile_body"
+                    maxImageHeight={150}
+                    onHeightChanged={() => {}} // we need to give this, apparently
+                />
+            </div>
+
+            <div className="mx_PinnedEventTile_footer">
+                <span className="mx_PinnedEventTile_timestamp">
+                    { formatDate(new Date(this.props.event.getTs())) }
+                </span>
+
+                <AccessibleButton onClick={this.onTileClicked} kind="link">
+                    { _t("View message") }
+                </AccessibleButton>
+            </div>
+        </div>;
+    }
+}

src/components/views/rooms/PinnedEventsPanel.js

@@ -1,145 +0,0 @@
-/*
-Copyright 2017 Travis Ralston
-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 {MatrixClientPeg} from "../../../MatrixClientPeg";
-import AccessibleButton from "../elements/AccessibleButton";
-import PinnedEventTile from "./PinnedEventTile";
-import { _t } from '../../../languageHandler';
-import PinningUtils from "../../../utils/PinningUtils";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-
-@replaceableComponent("views.rooms.PinnedEventsPanel")
-export default class PinnedEventsPanel extends React.Component {
-    static propTypes = {
-        // The Room from the js-sdk we're going to show pinned events for
-        room: PropTypes.object.isRequired,
-
-        onCancelClick: PropTypes.func,
-    };
-
-    state = {
-        loading: true,
-    };
-
-    componentDidMount() {
-        this._updatePinnedMessages();
-        MatrixClientPeg.get().on("RoomState.events", this._onStateEvent);
-    }
-
-    componentWillUnmount() {
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("RoomState.events", this._onStateEvent);
-        }
-    }
-
-    _onStateEvent = ev => {
-        if (ev.getRoomId() === this.props.room.roomId && ev.getType() === "m.room.pinned_events") {
-            this._updatePinnedMessages();
-        }
-    };
-
-    _updatePinnedMessages = () => {
-        const pinnedEvents = this.props.room.currentState.getStateEvents("m.room.pinned_events", "");
-        if (!pinnedEvents || !pinnedEvents.getContent().pinned) {
-            this.setState({ loading: false, pinned: [] });
-        } else {
-            const promises = [];
-            const cli = MatrixClientPeg.get();
-
-            pinnedEvents.getContent().pinned.map((eventId) => {
-                promises.push(cli.getEventTimeline(this.props.room.getUnfilteredTimelineSet(), eventId, 0).then(
-                    (timeline) => {
-                        const event = timeline.getEvents().find((e) => e.getId() === eventId);
-                        return {eventId, timeline, event};
-                    }).catch((err) => {
-                    console.error("Error looking up pinned event " + eventId + " in room " + this.props.room.roomId);
-                    console.error(err);
-                    return null; // return lack of context to avoid unhandled errors
-                }));
-            });
-
-            Promise.all(promises).then((contexts) => {
-                // Filter out the messages before we try to render them
-                const pinned = contexts.filter((context) => PinningUtils.isPinnable(context.event));
-
-                this.setState({ loading: false, pinned });
-            });
-        }
-
-        this._updateReadState();
-    };
-
-    _updateReadState() {
-        const pinnedEvents = this.props.room.currentState.getStateEvents("m.room.pinned_events", "");
-        if (!pinnedEvents) return; // nothing to read
-
-        let readStateEvents = [];
-        const readPinsEvent = this.props.room.getAccountData("im.vector.room.read_pins");
-        if (readPinsEvent && readPinsEvent.getContent()) {
-            readStateEvents = readPinsEvent.getContent().event_ids || [];
-        }
-
-        if (!readStateEvents.includes(pinnedEvents.getId())) {
-            readStateEvents.push(pinnedEvents.getId());
-
-            // Only keep the last 10 event IDs to avoid infinite growth
-            readStateEvents = readStateEvents.reverse().splice(0, 10).reverse();
-
-            MatrixClientPeg.get().setRoomAccountData(this.props.room.roomId, "im.vector.room.read_pins", {
-                event_ids: readStateEvents,
-            });
-        }
-    }
-
-    _getPinnedTiles() {
-        if (this.state.pinned.length === 0) {
-            return (<div>{ _t("No pinned messages.") }</div>);
-        }
-
-        return this.state.pinned.map((context) => {
-            return (
-                <PinnedEventTile
-                    key={context.event.getId()}
-                    mxRoom={this.props.room}
-                    mxEvent={context.event}
-                    onUnpinned={this._updatePinnedMessages}
-                />
-            );
-        });
-    }
-
-    render() {
-        let tiles = <div>{ _t("Loading...") }</div>;
-        if (this.state && !this.state.loading) {
-            tiles = this._getPinnedTiles();
-        }
-
-        return (
-            <div className="mx_PinnedEventsPanel">
-                <div className="mx_PinnedEventsPanel_body">
-                    <AccessibleButton className="mx_PinnedEventsPanel_cancel" onClick={this.props.onCancelClick}>
-                        <img className="mx_filterFlipColor" src={require("../../../../res/img/cancel.svg")} width="18" height="18" />
-                    </AccessibleButton>
-                    <h3 className="mx_PinnedEventsPanel_header">{ _t("Pinned Messages") }</h3>
-                    { tiles }
-                </div>
-            </div>
-        );
-    }
-}

src/components/views/rooms/ReplyPreview.js

@@ -89,12 +89,13 @@ export default class ReplyPreview extends React.Component {
                 </div>
                 <div className="mx_ReplyPreview_clear" />
                 <EventTile
-                    last={true}
+                    alwaysShowTimestamps={true}
                     tileShape="reply_preview"
                     mxEvent={this.state.event}
                     permalinkCreator={this.props.permalinkCreator}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
                     enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                    as="div"
                 />
             </div>
         </div>;

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -23,11 +23,9 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
 import Analytics from "../../../Analytics";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { CSSTransition } from "react-transition-group";
-import RoomListStore from "../../../stores/room-list/RoomListStore";
-import { DefaultTagID } from "../../../stores/room-list/models";
 import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
 import Toolbar from "../../../accessibility/Toolbar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
 }
@@ -84,8 +82,6 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
 
     public render(): React.ReactElement {
         const tiles = BreadcrumbsStore.instance.rooms.map((r, i) => {
-            const roomTags = RoomListStore.instance.getTagsForRoom(r);
-            const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0];
             return (
                 <RovingAccessibleTooltipButton
                     className="mx_RoomBreadcrumbs_crumb"
@@ -98,7 +94,6 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
                     <DecoratedRoomAvatar
                         room={r}
                         avatarSize={32}
-                        tag={roomTag}
                         displayBadge={true}
                         forceCount={true}
                     />

src/components/views/rooms/RoomHeader.js

@@ -19,20 +19,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import RateLimitedFunc from '../../../ratelimitedfunc';
 
-import {CancelButton} from './SimpleRoomHeader';
 import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
 import E2EIcon from './E2EIcon';
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import {DefaultTagID} from "../../../stores/room-list/models";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import RoomTopic from "../elements/RoomTopic";
 import RoomName from "../elements/RoomName";
-import {PlaceCallType} from "../../../CallHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { PlaceCallType } from "../../../CallHandler";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.rooms.RoomHeader")
 export default class RoomHeader extends React.Component {
@@ -41,10 +39,8 @@ export default class RoomHeader extends React.Component {
         oobData: PropTypes.object,
         inRoom: PropTypes.bool,
         onSettingsClick: PropTypes.func,
-        onPinnedClick: PropTypes.func,
         onSearchClick: PropTypes.func,
         onLeaveClick: PropTypes.func,
-        onCancelClick: PropTypes.func,
         e2eStatus: PropTypes.string,
         onAppsClick: PropTypes.func,
         appsShown: PropTypes.bool,
@@ -54,20 +50,17 @@ export default class RoomHeader extends React.Component {
     static defaultProps = {
         editing: false,
         inRoom: false,
-        onCancelClick: null,
     };
 
     componentDidMount() {
         const cli = MatrixClientPeg.get();
         cli.on("RoomState.events", this._onRoomStateEvents);
-        cli.on("Room.accountData", this._onRoomAccountData);
     }
 
     componentWillUnmount() {
         const cli = MatrixClientPeg.get();
         if (cli) {
             cli.removeListener("RoomState.events", this._onRoomStateEvents);
-            cli.removeListener("Room.accountData", this._onRoomAccountData);
         }
     }
 
@@ -80,52 +73,13 @@ export default class RoomHeader extends React.Component {
         this._rateLimitedUpdate();
     };
 
-    _onRoomAccountData = (event, room) => {
-        if (!this.props.room || room.roomId !== this.props.room.roomId) return;
-        if (event.getType() !== "im.vector.room.read_pins") return;
-
-        this._rateLimitedUpdate();
-    };
-
     _rateLimitedUpdate = new RateLimitedFunc(function() {
         /* eslint-disable babel/no-invalid-this */
         this.forceUpdate();
     }, 500);
 
-    _hasUnreadPins() {
-        const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
-        if (!currentPinEvent) return false;
-        if (currentPinEvent.getContent().pinned && currentPinEvent.getContent().pinned.length <= 0) {
-            return false; // no pins == nothing to read
-        }
-
-        const readPinsEvent = this.props.room.getAccountData("im.vector.room.read_pins");
-        if (readPinsEvent && readPinsEvent.getContent()) {
-            const readStateEvents = readPinsEvent.getContent().event_ids || [];
-            if (readStateEvents) {
-                return !readStateEvents.includes(currentPinEvent.getId());
-            }
-        }
-
-        // There's pins, and we haven't read any of them
-        return true;
-    }
-
-    _hasPins() {
-        const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
-        if (!currentPinEvent) return false;
-
-        return !(currentPinEvent.getContent().pinned && currentPinEvent.getContent().pinned.length <= 0);
-    }
-
     render() {
         let searchStatus = null;
-        let cancelButton = null;
-        let pinnedEventsButton = null;
-
-        if (this.props.onCancelClick) {
-            cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
-        }
 
         // don't display the search count until the search completes and
         // gives us a valid (possibly zero) searchCount.
@@ -177,30 +131,11 @@ export default class RoomHeader extends React.Component {
             roomAvatar = <DecoratedRoomAvatar
                 room={this.props.room}
                 avatarSize={32}
-                tag={DefaultTagID.Untagged} // to apply room publicity badging
                 oobData={this.props.oobData}
                 viewAvatarOnClick={true}
             />;
         }
 
-        if (this.props.onPinnedClick && SettingsStore.getValue('feature_pinning')) {
-            let pinsIndicator = null;
-            if (this._hasUnreadPins()) {
-                pinsIndicator = (<div className="mx_RoomHeader_pinsIndicator mx_RoomHeader_pinsIndicatorUnread" />);
-            } else if (this._hasPins()) {
-                pinsIndicator = (<div className="mx_RoomHeader_pinsIndicator" />);
-            }
-
-            pinnedEventsButton =
-                <AccessibleTooltipButton
-                    className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
-                    onClick={this.props.onPinnedClick}
-                    title={_t("Pinned Messages")}
-                >
-                    { pinsIndicator }
-                </AccessibleTooltipButton>;
-        }
-
         let forgetButton;
         if (this.props.onForgetClick) {
             forgetButton =
@@ -250,7 +185,6 @@ export default class RoomHeader extends React.Component {
             <div className="mx_RoomHeader_buttons">
                 { videoCallButton }
                 { voiceCallButton }
-                { pinnedEventsButton }
                 { forgetButton }
                 { appsButton }
                 { searchButton }
@@ -265,9 +199,8 @@ export default class RoomHeader extends React.Component {
                     <div className="mx_RoomHeader_e2eIcon">{ e2eIcon }</div>
                     { name }
                     { topicElement }
-                    { cancelButton }
                     { rightRow }
-                    <RoomHeaderButtons />
+                    <RoomHeaderButtons room={this.props.room} />
                 </div>
             </div>
         );

src/components/views/rooms/RoomList.tsx

@@ -46,17 +46,17 @@ import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../con
 import AccessibleButton from "../elements/AccessibleButton";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import CallHandler from "../../../CallHandler";
-import SpaceStore, {SUGGESTED_ROOMS} from "../../../stores/SpaceStore";
+import SpaceStore, {ISuggestedRoom, SUGGESTED_ROOMS} from "../../../stores/SpaceStore";
 import {showAddExistingRooms, showCreateNewRoom, showSpaceInvite} from "../../../utils/space";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import RoomAvatar from "../avatars/RoomAvatar";
-import { ISpaceSummaryRoom } from "../../structures/SpaceRoomDirectory";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
     onFocus: (ev: React.FocusEvent) => void;
     onBlur: (ev: React.FocusEvent) => void;
     onResize: () => void;
+    onListCollapse?: (isExpanded: boolean) => void;
     resizeNotifier: ResizeNotifier;
     isMinimized: boolean;
     activeSpace: Room;
@@ -66,7 +66,7 @@ interface IState {
     sublists: ITagMap;
     isNameFiltering: boolean;
     currentRoomId?: string;
-    suggestedRooms: ISpaceSummaryRoom[];
+    suggestedRooms: ISuggestedRoom[];
 }
 
 const TAG_ORDER: TagID[] = [
@@ -363,7 +363,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         return room;
     };
 
-    private updateSuggestedRooms = (suggestedRooms: ISpaceSummaryRoom[]) => {
+    private updateSuggestedRooms = (suggestedRooms: ISuggestedRoom[]) => {
         this.setState({ suggestedRooms });
     };
 
@@ -428,7 +428,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
     private renderSuggestedRooms(): ReactComponentElement<typeof ExtraTile>[] {
         return this.state.suggestedRooms.map(room => {
-            const name = room.name || room.canonical_alias || room.aliases.pop() || _t("Empty room");
+            const name = room.name || room.canonical_alias || room.aliases?.[0] || _t("Empty room");
             const avatar = (
                 <RoomAvatar
                     oobData={{
@@ -443,7 +443,9 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             const viewRoom = () => {
                 defaultDispatcher.dispatch({
                     action: "view_room",
+                    room_alias: room.canonical_alias || room.aliases?.[0],
                     room_id: room.room_id,
+                    via_servers: room.viaServers,
                     oobData: {
                         avatarUrl: room.avatar_url,
                         name,
@@ -536,11 +538,11 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     addRoomLabel={aesthetics.addRoomLabel ? _t(aesthetics.addRoomLabel) : aesthetics.addRoomLabel}
                     addRoomContextMenu={aesthetics.addRoomContextMenu}
                     isMinimized={this.props.isMinimized}
-                    onResize={this.props.onResize}
                     showSkeleton={showSkeleton}
                     extraTiles={extraTiles}
                     resizeNotifier={this.props.resizeNotifier}
                     alwaysVisible={ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
+                    onListCollapse={this.props.onListCollapse}
                 />
             });
     }

src/components/views/rooms/RoomListNumResults.tsx

@@ -14,14 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 
 import { _t } from "../../../languageHandler";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import SpaceStore from "../../../stores/SpaceStore";
 
-const RoomListNumResults: React.FC = () => {
+interface IProps {
+    onVisibilityChange?: () => void
+}
+
+const RoomListNumResults: React.FC<IProps> = ({ onVisibilityChange }) => {
     const [count, setCount] = useState<number>(null);
     useEventEmitter(RoomListStore.instance, LISTS_UPDATE_EVENT, () => {
         if (RoomListStore.instance.getFirstNameFilterCondition()) {
@@ -32,6 +36,12 @@ const RoomListNumResults: React.FC = () => {
         }
     });
 
+    useEffect(() => {
+        if (onVisibilityChange) {
+            onVisibilityChange();
+        }
+    }, [count, onVisibilityChange]);
+
     if (typeof count !== "number") return null;
 
     return <div className="mx_LeftPanel_roomListFilterCount">

src/components/views/rooms/RoomSublist.tsx

@@ -18,6 +18,7 @@ limitations under the License.
 
 import * as React from "react";
 import { createRef, ReactComponentElement } from "react";
+import { normalize } from "matrix-js-sdk/src/utils";
 import { Room } from "matrix-js-sdk/src/models/room";
 import classNames from 'classnames';
 import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
@@ -73,11 +74,11 @@ interface IProps {
     addRoomLabel: string;
     isMinimized: boolean;
     tagId: TagID;
-    onResize: () => void;
     showSkeleton?: boolean;
     alwaysVisible?: boolean;
     resizeNotifier: ResizeNotifier;
     extraTiles?: ReactComponentElement<typeof ExtraTile>[];
+    onListCollapse?: (isExpanded: boolean) => void;
 
     // TODO: Account for https://github.com/vector-im/element-web/issues/14179
 }
@@ -104,6 +105,7 @@ interface IState {
 export default class RoomSublist extends React.Component<IProps, IState> {
     private headerButton = createRef<HTMLDivElement>();
     private sublistRef = createRef<HTMLDivElement>();
+    private tilesRef = createRef<HTMLDivElement>();
     private dispatcherRef: string;
     private layout: ListLayout;
     private heightAtStart: number;
@@ -245,11 +247,15 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     public componentDidMount() {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onListsUpdated);
+        // Using the passive option to not block the main thread
+        // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
+        this.tilesRef.current?.addEventListener("scroll", this.onScrollPrevent, { passive: true });
     }
 
     public componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onListsUpdated);
+        this.tilesRef.current?.removeEventListener("scroll", this.onScrollPrevent);
     }
 
     private onListsUpdated = () => {
@@ -259,7 +265,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             const nameCondition = RoomListStore.instance.getFirstNameFilterCondition();
             if (nameCondition) {
                 stateUpdates.filteredExtraTiles = this.props.extraTiles
-                    .filter(t => nameCondition.matches(t.props.displayName || ""));
+                    .filter(t => nameCondition.matches(normalize(t.props.displayName || "")));
             } else if (this.state.filteredExtraTiles) {
                 stateUpdates.filteredExtraTiles = null;
             }
@@ -448,8 +454,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         const sublist = possibleSticky.parentElement.parentElement;
         const list = sublist.parentElement.parentElement;
         // the scrollTop is capped at the height of the header in LeftPanel, the top header is always sticky
-        const isAtTop = list.scrollTop <= HEADER_HEIGHT;
-        const isAtBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight;
+        const listScrollTop = Math.round(list.scrollTop);
+        const isAtTop = listScrollTop <= Math.round(HEADER_HEIGHT);
+        const isAtBottom = listScrollTop >= Math.round(list.scrollHeight - list.offsetHeight);
         const isStickyTop = possibleSticky.classList.contains('mx_RoomSublist_headerContainer_stickyTop');
         const isStickyBottom = possibleSticky.classList.contains('mx_RoomSublist_headerContainer_stickyBottom');
 
@@ -472,7 +479,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     private toggleCollapsed = () => {
         this.layout.isCollapsed = this.state.isExpanded;
         this.setState({isExpanded: !this.layout.isCollapsed});
-        setImmediate(() => this.props.onResize()); // needs to happen when the DOM is updated
+        if (this.props.onListCollapse) {
+            this.props.onListCollapse(!this.layout.isCollapsed)
+        }
     };
 
     private onHeaderKeyDown = (ev: React.KeyboardEvent) => {
@@ -529,7 +538,6 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                 tiles.push(<RoomTile
                     room={room}
                     key={`room-${room.roomId}`}
-                    resizeNotifier={this.props.resizeNotifier}
                     showMessagePreview={this.layout.showPreviews}
                     isMinimized={this.props.isMinimized}
                     tag={this.props.tagId}
@@ -753,7 +761,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         );
     }
 
-    private onScrollPrevent(e: React.UIEvent<HTMLDivElement>) {
+    private onScrollPrevent(e: Event) {
         // the RoomTile calls scrollIntoView and the browser may scroll a div we do not wish to be scrollable
         // this fixes https://github.com/vector-im/element-web/issues/14413
         (e.target as HTMLDivElement).scrollTop = 0;
@@ -882,7 +890,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                         className="mx_RoomSublist_resizeBox"
                         enable={handles}
                     >
-                        <div className="mx_RoomSublist_tiles" onScroll={this.onScrollPrevent}>
+                        <div className="mx_RoomSublist_tiles" ref={this.tilesRef}>
                             {visibleTiles}
                         </div>
                         {showNButton}

src/components/views/rooms/RoomTile.tsx

@@ -53,14 +53,12 @@ import { CommunityPrototypeStore, IRoomProfile } from "../../../stores/Community
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { getUnsentMessages } from "../../structures/RoomStatusBar";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
-import { ResizeNotifier } from "../../../utils/ResizeNotifier";
 
 interface IProps {
     room: Room;
     showMessagePreview: boolean;
     isMinimized: boolean;
     tag: TagID;
-    resizeNotifier: ResizeNotifier;
 }
 
 type PartialDOMRect = Pick<DOMRect, "left" | "bottom">;
@@ -100,13 +98,12 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             hasUnsentEvents: this.countUnsentEvents() > 0,
 
             // generatePreview() will return nothing if the user has previews disabled
-            messagePreview: this.generatePreview(),
+            messagePreview: "",
         };
+        this.generatePreview();
+
         this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
         this.roomProps = EchoChamber.forRoom(this.props.room);
-        if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.on("middlePanelResized", this.onResize);
-        }
     }
 
     private countUnsentEvents(): number {
@@ -121,12 +118,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         this.forceUpdate(); // notification state changed - update
     };
 
-    private onResize = () => {
-        if (this.showMessagePreview && !this.state.messagePreview) {
-            this.setState({messagePreview: this.generatePreview()});
-        }
-    };
-
     private onLocalEchoUpdated = (ev: MatrixEvent, room: Room) => {
         if (!room?.roomId === this.props.room.roomId) return;
         this.setState({hasUnsentEvents: this.countUnsentEvents() > 0});
@@ -146,8 +137,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
     }
 
     public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>) {
-        if (prevProps.showMessagePreview !== this.props.showMessagePreview && this.showMessagePreview) {
-            this.setState({messagePreview: this.generatePreview()});
+        const showMessageChanged = prevProps.showMessagePreview !== this.props.showMessagePreview;
+        const minimizedChanged = prevProps.isMinimized !== this.props.isMinimized;
+        if (showMessageChanged || minimizedChanged) {
+            this.generatePreview();
         }
         if (prevProps.room?.roomId !== this.props.room?.roomId) {
             MessagePreviewStore.instance.off(
@@ -206,9 +199,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             );
             this.props.room.off("Room.name", this.onRoomNameUpdate);
         }
-        if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.off("middlePanelResized", this.onResize);
-        }
         ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
         defaultDispatcher.unregister(this.dispatcherRef);
         this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
@@ -236,17 +226,17 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
     private onRoomPreviewChanged = (room: Room) => {
         if (this.props.room && room.roomId === this.props.room.roomId) {
-            // generatePreview() will return nothing if the user has previews disabled
-            this.setState({messagePreview: this.generatePreview()});
+            this.generatePreview();
         }
     };
 
-    private generatePreview(): string | null {
+    private async generatePreview() {
         if (!this.showMessagePreview) {
             return null;
         }
 
-        return MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag);
+        const messagePreview = await MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag);
+        this.setState({ messagePreview });
     }
 
     private scrollIntoView = () => {
@@ -576,7 +566,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         const roomAvatar = <DecoratedRoomAvatar
             room={this.props.room}
             avatarSize={32}
-            tag={this.props.tag}
             displayBadge={this.props.isMinimized}
             oobData={({avatarUrl: roomProfile.avatarMxc})}
         />;

src/components/views/rooms/RoomUpgradeWarningBar.js

@@ -24,7 +24,7 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.rooms.RoomUpgradeWarningBar")
-export default class RoomUpgradeWarningBar extends React.Component {
+export default class RoomUpgradeWarningBar extends React.PureComponent {
     static propTypes = {
         room: PropTypes.object.isRequired,
         recommendation: PropTypes.object.isRequired,

src/components/views/rooms/SearchResultTile.js

@@ -47,6 +47,7 @@ export default class SearchResultTile extends React.Component {
 
         const ts1 = mxEv.getTs();
         const ret = [<DateSeparator key={ts1 + "-search"} ts={ts1} />];
+        const alwaysShowTimestamps = SettingsStore.getValue("alwaysShowTimestamps");
 
         const timeline = result.context.getTimeline();
         for (let j = 0; j < timeline.length; j++) {
@@ -67,6 +68,7 @@ export default class SearchResultTile extends React.Component {
                         highlightLink={this.props.resultLink}
                         onHeightChanged={this.props.onHeightChanged}
                         isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
+                        alwaysShowTimestamps={alwaysShowTimestamps}
                         enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                     />
                 ));

src/components/views/rooms/SimpleRoomHeader.js

@@ -16,23 +16,9 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import AccessibleButton from '../elements/AccessibleButton';
 import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-// cancel button which is shared between room header and simple room header
-export function CancelButton(props) {
-    const {onClick} = props;
-
-    return (
-        <AccessibleButton className='mx_RoomHeader_cancelButton' onClick={onClick}>
-            <img src={require("../../../../res/img/cancel.svg")} className='mx_filterFlipColor'
-                width="18" height="18" alt={_t("Cancel")} />
-        </AccessibleButton>
-    );
-}
-
 /*
  * A stripped-down room header used for things like the user settings
  * and room directory.
@@ -41,18 +27,13 @@ export function CancelButton(props) {
 export default class SimpleRoomHeader extends React.Component {
     static propTypes = {
         title: PropTypes.string,
-        onCancelClick: PropTypes.func,
 
         // `src` to a TintableSvg. Optional.
         icon: PropTypes.string,
     };
 
     render() {
-        let cancelButton;
         let icon;
-        if (this.props.onCancelClick) {
-            cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
-        }
         if (this.props.icon) {
             const TintableSvg = sdk.getComponent('elements.TintableSvg');
             icon = <TintableSvg
@@ -62,13 +43,10 @@ export default class SimpleRoomHeader extends React.Component {
         }
 
         return (
-            <div className="mx_RoomHeader" >
-                <div className="mx_RoomHeader_wrapper">
-                    <div className="mx_RoomHeader_simpleHeader">
-                        { icon }
-                        { this.props.title }
-                        { cancelButton }
-                    </div>
+            <div className="mx_RoomHeader mx_RoomHeader_wrapper" >
+                <div className="mx_RoomHeader_simpleHeader">
+                    { icon }
+                    { this.props.title }
                 </div>
             </div>
         );

src/components/views/rooms/Stickerpicker.js

@@ -40,7 +40,7 @@ const STICKERPICKER_Z_INDEX = 3500;
 const PERSISTED_ELEMENT_KEY = "stickerPicker";
 
 @replaceableComponent("views.rooms.Stickerpicker")
-export default class Stickerpicker extends React.Component {
+export default class Stickerpicker extends React.PureComponent {
     static currentWidget;
 
     constructor(props) {
@@ -341,27 +341,33 @@ export default class Stickerpicker extends React.Component {
      * @param  {Event} ev Event that triggered the function call
      */
     _onHideStickersClick(ev) {
-        this.setState({showStickers: false});
+        if (this.state.showStickers) {
+            this.setState({showStickers: false});
+        }
     }
 
     /**
      * Called when the window is resized
      */
     _onResize() {
-        this.setState({showStickers: false});
+        if (this.state.showStickers) {
+            this.setState({showStickers: false});
+        }
     }
 
     /**
      * The stickers picker was hidden
      */
     _onFinished() {
-        this.setState({showStickers: false});
+        if (this.state.showStickers) {
+            this.setState({showStickers: false});
+        }
     }
 
     /**
      * Launch the integration manager on the stickers integration page
      */
-    _launchManageIntegrations() {
+    _launchManageIntegrations = () => {
         // TODO: Open the right integration manager for the widget
         if (SettingsStore.getValue("feature_many_integration_managers")) {
             IntegrationManagers.sharedInstance().openAll(
@@ -376,7 +382,7 @@ export default class Stickerpicker extends React.Component {
                 this.state.widgetId,
             );
         }
-    }
+    };
 
     render() {
         let stickerPicker;
@@ -395,7 +401,7 @@ export default class Stickerpicker extends React.Component {
                     key="controls_hide_stickers"
                     className={className}
                     onClick={this._onHideStickersClick}
-                    active={this.state.showStickers}
+                    active={this.state.showStickers.toString()}
                     title={_t("Hide Stickers")}
                 >
                 </AccessibleButton>;

src/components/views/rooms/WhoIsTypingTile.tsx

@@ -16,36 +16,45 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import Room from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 import * as WhoIsTyping from '../../../WhoIsTyping';
 import Timer from '../../../utils/Timer';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import MemberAvatar from '../avatars/MemberAvatar';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { compare } from "../../../utils/strings";
+
+interface IProps {
+    // the room this statusbar is representing.
+    room: Room;
+    onShown?: () => void;
+    onHidden?: () => void;
+    // Number of names to display in typing indication. E.g. set to 3, will
+    // result in "X, Y, Z and 100 others are typing."
+    whoIsTypingLimit: number;
+}
+
+interface IState {
+    usersTyping: RoomMember[];
+    // a map with userid => Timer to delay
+    // hiding the "x is typing" message for a
+    // user so hiding it can coincide
+    // with the sent message by the other side
+    // resulting in less timeline jumpiness
+    delayedStopTypingTimers: Record<string, Timer>;
+}
 
 @replaceableComponent("views.rooms.WhoIsTypingTile")
-export default class WhoIsTypingTile extends React.Component {
-    static propTypes = {
-        // the room this statusbar is representing.
-        room: PropTypes.object.isRequired,
-        onShown: PropTypes.func,
-        onHidden: PropTypes.func,
-        // Number of names to display in typing indication. E.g. set to 3, will
-        // result in "X, Y, Z and 100 others are typing."
-        whoIsTypingLimit: PropTypes.number,
-    };
-
+export default class WhoIsTypingTile extends React.Component<IProps, IState> {
     static defaultProps = {
         whoIsTypingLimit: 3,
     };
 
     state = {
         usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
-        // a map with userid => Timer to delay
-        // hiding the "x is typing" message for a
-        // user so hiding it can coincide
-        // with the sent message by the other side
-        // resulting in less timeline jumpiness
         delayedStopTypingTimers: {},
     };
 
@@ -71,37 +80,39 @@ export default class WhoIsTypingTile extends React.Component {
             client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
             client.removeListener("Room.timeline", this.onRoomTimeline);
         }
-        Object.values(this.state.delayedStopTypingTimers).forEach((t) => t.abort());
+        Object.values(this.state.delayedStopTypingTimers).forEach((t) => (t as Timer).abort());
     }
 
-    _isVisible(state) {
+    private _isVisible(state: IState): boolean {
         return state.usersTyping.length !== 0 || Object.keys(state.delayedStopTypingTimers).length !== 0;
     }
 
-    isVisible = () => {
+    public isVisible = (): boolean => {
         return this._isVisible(this.state);
     };
 
-    onRoomTimeline = (event, room) => {
+    private onRoomTimeline = (event: MatrixEvent, room: Room): void => {
         if (room?.roomId === this.props.room?.roomId) {
             const userId = event.getSender();
             // remove user from usersTyping
             const usersTyping = this.state.usersTyping.filter((m) => m.userId !== userId);
-            this.setState({usersTyping});
+            if (usersTyping.length !== this.state.usersTyping.length) {
+                this.setState({usersTyping});
+            }
             // abort timer if any
-            this._abortUserTimer(userId);
+            this.abortUserTimer(userId);
         }
     };
 
-    onRoomMemberTyping = (ev, member) => {
+    private onRoomMemberTyping = (): void => {
         const usersTyping = WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room);
         this.setState({
-            delayedStopTypingTimers: this._updateDelayedStopTypingTimers(usersTyping),
+            delayedStopTypingTimers: this.updateDelayedStopTypingTimers(usersTyping),
             usersTyping,
         });
     };
 
-    _updateDelayedStopTypingTimers(usersTyping) {
+    private updateDelayedStopTypingTimers(usersTyping: RoomMember[]): Record<string, Timer> {
         const usersThatStoppedTyping = this.state.usersTyping.filter((a) => {
             return !usersTyping.some((b) => a.userId === b.userId);
         });
@@ -129,7 +140,7 @@ export default class WhoIsTypingTile extends React.Component {
                 delayedStopTypingTimers[m.userId] = timer;
                 timer.start();
                 timer.finished().then(
-                    () => this._removeUserTimer(m.userId), // on elapsed
+                    () => this.removeUserTimer(m.userId), // on elapsed
                     () => {/* aborted */},
                 );
             }
@@ -139,15 +150,15 @@ export default class WhoIsTypingTile extends React.Component {
         return delayedStopTypingTimers;
     }
 
-    _abortUserTimer(userId) {
+    private abortUserTimer(userId: string): void {
         const timer = this.state.delayedStopTypingTimers[userId];
         if (timer) {
             timer.abort();
-            this._removeUserTimer(userId);
+            this.removeUserTimer(userId);
         }
     }
 
-    _removeUserTimer(userId) {
+    private removeUserTimer(userId: string): void {
         const timer = this.state.delayedStopTypingTimers[userId];
         if (timer) {
             const delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
@@ -156,7 +167,7 @@ export default class WhoIsTypingTile extends React.Component {
         }
     }
 
-    _renderTypingIndicatorAvatars(users, limit) {
+    private renderTypingIndicatorAvatars(users: RoomMember[], limit: number): JSX.Element[] {
         let othersCount = 0;
         if (users.length > limit) {
             othersCount = users.length - limit + 1;
@@ -197,20 +208,20 @@ export default class WhoIsTypingTile extends React.Component {
         usersTyping = usersTyping.concat(stoppedUsersOnTimer);
         // sort them so the typing members don't change order when
         // moved to delayedStopTypingTimers
-        usersTyping.sort((a, b) => a.name.localeCompare(b.name));
+        usersTyping.sort((a, b) => compare(a.name, b.name));
 
         const typingString = WhoIsTyping.whoIsTypingString(
             usersTyping,
             this.props.whoIsTypingLimit,
         );
         if (!typingString) {
-            return (<div className="mx_WhoIsTypingTile_empty" />);
+            return null;
         }
 
         return (
             <li className="mx_WhoIsTypingTile" aria-atomic="true">
                 <div className="mx_WhoIsTypingTile_avatars">
-                    { this._renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
+                    { this.renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
                 </div>
                 <div className="mx_WhoIsTypingTile_label">
                     { typingString }

src/components/views/settings/CrossSigningPanel.js

@@ -79,8 +79,8 @@ export default class CrossSigningPanel extends React.PureComponent {
     async _getUpdatedStatus() {
         const cli = MatrixClientPeg.get();
         const pkCache = cli.getCrossSigningCacheCallbacks();
-        const crossSigning = cli._crypto._crossSigningInfo;
-        const secretStorage = cli._crypto._secretStorage;
+        const crossSigning = cli.crypto._crossSigningInfo;
+        const secretStorage = cli.crypto._secretStorage;
         const crossSigningPublicKeysOnDevice = crossSigning.getId();
         const crossSigningPrivateKeysInStorage = await crossSigning.isStoredInSecretStorage(secretStorage);
         const masterPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("master"));

src/components/views/settings/EventIndexPanel.tsx

@@ -232,7 +232,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                     <p>
                         {this.state.enabling
                             ? <InlineSpinner />
-                            : _t("Message search initilisation failed")
+                            : _t("Message search initialisation failed")
                         }
                     </p>
                     {EventIndexPeg.error && (

src/components/views/settings/SecureBackupPanel.js

@@ -131,10 +131,10 @@ export default class SecureBackupPanel extends React.PureComponent {
 
     async _getUpdatedDiagnostics() {
         const cli = MatrixClientPeg.get();
-        const secretStorage = cli._crypto._secretStorage;
+        const secretStorage = cli.crypto._secretStorage;
 
         const backupKeyStored = !!(await cli.isKeyBackupKeyStored());
-        const backupKeyFromCache = await cli._crypto.getSessionBackupPrivateKey();
+        const backupKeyFromCache = await cli.crypto.getSessionBackupPrivateKey();
         const backupKeyCached = !!(backupKeyFromCache);
         const backupKeyWellFormed = backupKeyFromCache instanceof Uint8Array;
         const secretStorageKeyInAccount = await secretStorage.hasKey();

src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx

@@ -25,6 +25,7 @@ import {EventType} from "matrix-js-sdk/src/@types/event";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { RoomState } from "matrix-js-sdk/src/models/room-state";
+import { compare } from "../../../../../utils/strings";
 
 const plEventsToLabels = {
     // These will be translated for us later.
@@ -312,7 +313,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
             // comparator for sorting PL users lexicographically on PL descending, MXID ascending. (case-insensitive)
             const comparator = (a, b) => {
                 const plDiff = userLevels[b.key] - userLevels[a.key];
-                return plDiff !== 0 ? plDiff : a.key.toLocaleLowerCase().localeCompare(b.key.toLocaleLowerCase());
+                return plDiff !== 0 ? plDiff : compare(a.key.toLocaleLowerCase(), b.key.toLocaleLowerCase());
             };
 
             privilegedUsers.sort(comparator);

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -35,9 +35,10 @@ import Field from '../../../elements/Field';
 import EventTilePreview from '../../../elements/EventTilePreview';
 import StyledRadioGroup from "../../../elements/StyledRadioGroup";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
-import {UIFeature} from "../../../../../settings/UIFeature";
-import {Layout} from "../../../../../settings/Layout";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { UIFeature } from "../../../../../settings/UIFeature";
+import { Layout } from "../../../../../settings/Layout";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+import { compare } from "../../../../../utils/strings";
 
 interface IProps {
 }
@@ -295,7 +296,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             .map(p => ({id: p[0], name: p[1]})); // convert pairs to objects for code readability
         const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
         const customThemes = themes.filter(p => !builtInThemes.includes(p))
-            .sort((a, b) => a.name.localeCompare(b.name));
+            .sort((a, b) => compare(a.name, b.name));
         const orderedThemes = [...builtInThemes, ...customThemes];
         return (
             <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_themeSection">

src/components/views/settings/tabs/user/LabsUserSettingsTab.js

@@ -22,6 +22,8 @@ import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import * as sdk from "../../../../../index";
 import {SettingLevel} from "../../../../../settings/SettingLevel";
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import SdkConfig from "../../../../../SdkConfig";
+import BetaCard from "../../../beta/BetaCard";
 
 export class LabsSettingToggle extends React.Component {
     static propTypes = {
@@ -48,14 +50,40 @@ export default class LabsUserSettingsTab extends React.Component {
     }
 
     render() {
-        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
-        const flags = SettingsStore.getFeatureSettingNames().map(f => <LabsSettingToggle featureId={f} key={f} />);
+        const features = SettingsStore.getFeatureSettingNames();
+        const [labs, betas] = features.reduce((arr, f) => {
+            arr[SettingsStore.getBetaInfo(f) ? 1 : 0].push(f);
+            return arr;
+        }, [[], []]);
+
+        let betaSection;
+        if (betas.length) {
+            betaSection = <div className="mx_SettingsTab_section">
+                { betas.map(f => <BetaCard key={f} featureId={f} /> ) }
+            </div>;
+        }
+
+        let labsSection;
+        if (SdkConfig.get()['showLabsSettings']) {
+            const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+            const flags = labs.map(f => <LabsSettingToggle featureId={f} key={f} />);
+
+            labsSection = <div className="mx_SettingsTab_section">
+                {flags}
+                <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
+                <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
+                <SettingsFlag name="lowBandwidth" level={SettingLevel.DEVICE} />
+                <SettingsFlag name="advancedRoomListLogging" level={SettingLevel.DEVICE} />
+            </div>;
+        }
+
         return (
-            <div className="mx_SettingsTab">
+            <div className="mx_SettingsTab mx_LabsUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Labs")}</div>
                 <div className='mx_SettingsTab_subsectionText'>
                     {
-                        _t('Customise your experience with experimental labs features. ' +
+                        _t('Feeling experimental? Labs are the best way to get things early, ' +
+                            'test out new features and help shape them before they actually launch. ' +
                             '<a>Learn more</a>.', {}, {
                             'a': (sub) => {
                                 return <a href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
@@ -64,13 +92,8 @@ export default class LabsUserSettingsTab extends React.Component {
                         })
                     }
                 </div>
-                <div className="mx_SettingsTab_section">
-                    {flags}
-                    <SettingsFlag name={"enableWidgetScreenshots"} level={SettingLevel.ACCOUNT} />
-                    <SettingsFlag name={"showHiddenEventsInTimeline"} level={SettingLevel.DEVICE} />
-                    <SettingsFlag name={"lowBandwidth"} level={SettingLevel.DEVICE} />
-                    <SettingsFlag name={"advancedRoomListLogging"} level={SettingLevel.DEVICE} />
-                </div>
+                { betaSection }
+                { labsSection }
             </div>
         );
     }

src/components/views/spaces/SpaceBasicSettings.tsx

@@ -32,17 +32,11 @@ interface IProps {
     setTopic(topic: string): void;
 }
 
-const SpaceBasicSettings = ({
+export const SpaceAvatar = ({
     avatarUrl,
     avatarDisabled = false,
     setAvatar,
-    name = "",
-    nameDisabled = false,
-    setName,
-    topic = "",
-    topicDisabled = false,
-    setTopic,
-}: IProps) => {
+}: Pick<IProps, "avatarUrl" | "avatarDisabled" | "setAvatar">) => {
     const avatarUploadRef = useRef<HTMLInputElement>();
     const [avatar, setAvatarDataUrl] = useState(avatarUrl); // avatar data url cache
 
@@ -81,20 +75,34 @@ const SpaceBasicSettings = ({
         }
     }
 
+    return <div className="mx_SpaceBasicSettings_avatarContainer">
+        { avatarSection }
+        <input type="file" ref={avatarUploadRef} onChange={(e) => {
+            if (!e.target.files?.length) return;
+            const file = e.target.files[0];
+            setAvatar(file);
+            const reader = new FileReader();
+            reader.onload = (ev) => {
+                setAvatarDataUrl(ev.target.result as string);
+            };
+            reader.readAsDataURL(file);
+        }} accept="image/*" />
+    </div>;
+};
+
+const SpaceBasicSettings = ({
+    avatarUrl,
+    avatarDisabled = false,
+    setAvatar,
+    name = "",
+    nameDisabled = false,
+    setName,
+    topic = "",
+    topicDisabled = false,
+    setTopic,
+}: IProps) => {
     return <div className="mx_SpaceBasicSettings">
-        <div className="mx_SpaceBasicSettings_avatarContainer">
-            { avatarSection }
-            <input type="file" ref={avatarUploadRef} onChange={(e) => {
-                if (!e.target.files?.length) return;
-                const file = e.target.files[0];
-                setAvatar(file);
-                const reader = new FileReader();
-                reader.onload = (ev) => {
-                    setAvatarDataUrl(ev.target.result as string);
-                };
-                reader.readAsDataURL(file);
-            }} accept="image/*" />
-        </div>
+        <SpaceAvatar avatarUrl={avatarUrl} avatarDisabled={avatarDisabled} setAvatar={setAvatar} />
 
         <Field
             name="spaceName"

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -14,18 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext, useState} from "react";
+import React, {useContext, useRef, useState} from "react";
 import classNames from "classnames";
 import {EventType, RoomType, RoomCreateTypeField} from "matrix-js-sdk/src/@types/event";
+import FocusLock from "react-focus-lock";
 
 import {_t} from "../../../languageHandler";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {ChevronFace, ContextMenu} from "../../structures/ContextMenu";
-import createRoom, {IStateEvent, Preset} from "../../../createRoom";
+import createRoom from "../../../createRoom";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import SpaceBasicSettings from "./SpaceBasicSettings";
+import {SpaceAvatar} from "./SpaceBasicSettings";
 import AccessibleButton from "../elements/AccessibleButton";
-import FocusLock from "react-focus-lock";
+import {BetaPill} from "../beta/BetaCard";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {USER_LABS_TAB} from "../dialogs/UserSettingsDialog";
+import Field from "../elements/Field";
+import withValidation from "../elements/Validation";
+import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import { Preset } from "matrix-js-sdk/src/@types/partials";
+import { ICreateRoomStateEvent } from "matrix-js-sdk/src/@types/requests";
 
 const SpaceCreateMenuType = ({ title, description, className, onClick }) => {
     return (
@@ -41,18 +50,40 @@ enum Visibility {
     Private,
 }
 
+const spaceNameValidator = withValidation({
+    rules: [
+        {
+            key: "required",
+            test: async ({ value }) => !!value,
+            invalid: () => _t("Please enter a name for the space"),
+        },
+    ],
+});
+
 const SpaceCreateMenu = ({ onFinished }) => {
     const cli = useContext(MatrixClientContext);
     const [visibility, setVisibility] = useState<Visibility>(null);
-    const [name, setName] = useState("");
-    const [avatar, setAvatar] = useState<File>(null);
-    const [topic, setTopic] = useState<string>("");
     const [busy, setBusy] = useState<boolean>(false);
 
-    const onSpaceCreateClick = async () => {
+    const [name, setName] = useState("");
+    const spaceNameField = useRef<Field>();
+    const [avatar, setAvatar] = useState<File>(null);
+    const [topic, setTopic] = useState<string>("");
+
+    const onSpaceCreateClick = async (e) => {
+        e.preventDefault();
         if (busy) return;
+
         setBusy(true);
-        const initialState: IStateEvent[] = [
+        // require & validate the space name field
+        if (!await spaceNameField.current.validate({ allowEmpty: false })) {
+            spaceNameField.current.focus();
+            spaceNameField.current.validate({ allowEmpty: false, focused: true });
+            setBusy(false);
+            return;
+        }
+
+        const initialState: ICreateRoomStateEvent[] = [
             {
                 type: EventType.RoomHistoryVisibility,
                 content: {
@@ -107,7 +138,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
     if (visibility === null) {
         body = <React.Fragment>
             <h2>{ _t("Create a space") }</h2>
-            <p>{ _t("Spaces are new ways to group rooms and people. " +
+            <p>{ _t("Spaces are a new way to group rooms and people. " +
                 "To join an existing space you'll need an invite.") }</p>
 
             <SpaceCreateMenuType
@@ -124,6 +155,8 @@ const SpaceCreateMenu = ({ onFinished }) => {
             />
 
             <p>{ _t("You can change this later") }</p>
+
+            <SpaceFeedbackPrompt onClick={onFinished} />
         </React.Fragment>;
     } else {
         body = <React.Fragment>
@@ -146,9 +179,32 @@ const SpaceCreateMenu = ({ onFinished }) => {
                 }
             </p>
 
-            <SpaceBasicSettings setAvatar={setAvatar} name={name} setName={setName} topic={topic} setTopic={setTopic} />
+            <form className="mx_SpaceBasicSettings" onSubmit={onSpaceCreateClick}>
+                <SpaceAvatar setAvatar={setAvatar} avatarDisabled={busy} />
 
-            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={!name || busy}>
+                <Field
+                    name="spaceName"
+                    label={_t("Name")}
+                    autoFocus={true}
+                    value={name}
+                    onChange={ev => setName(ev.target.value)}
+                    ref={spaceNameField}
+                    onValidate={spaceNameValidator}
+                    disabled={busy}
+                />
+
+                <Field
+                    name="spaceTopic"
+                    element="textarea"
+                    label={_t("Description")}
+                    value={topic}
+                    onChange={ev => setTopic(ev.target.value)}
+                    rows={3}
+                    disabled={busy}
+                />
+            </form>
+
+            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={busy}>
                 { busy ? _t("Creating...") : _t("Create") }
             </AccessibleButton>
         </React.Fragment>;
@@ -164,6 +220,13 @@ const SpaceCreateMenu = ({ onFinished }) => {
         managed={false}
     >
         <FocusLock returnFocus={true}>
+            <BetaPill onClick={() => {
+                onFinished();
+                defaultDispatcher.dispatch({
+                    action: Action.ViewUserSettings,
+                    initialTabId: USER_LABS_TAB,
+                });
+            }} />
             { body }
         </FocusLock>
     </ContextMenu>;

src/components/views/spaces/SpacePanel.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from "react";
+import React, { useEffect, useState } from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
 
@@ -26,13 +26,11 @@ import {SpaceItem} from "./SpaceTreeLevel";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import SpaceStore, {
-    HOME_SPACE,
     UPDATE_INVITED_SPACES,
     UPDATE_SELECTED_SPACE,
     UPDATE_TOP_LEVEL_SPACES,
 } from "../../../stores/SpaceStore";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {SpaceNotificationState} from "../../../stores/notifications/SpaceNotificationState";
 import NotificationBadge from "../rooms/NotificationBadge";
 import {
     RovingAccessibleButton,
@@ -40,13 +38,15 @@ import {
     RovingTabIndexProvider,
 } from "../../../accessibility/RovingTabIndex";
 import {Key} from "../../../Keyboard";
+import {RoomNotificationStateStore} from "../../../stores/notifications/RoomNotificationStateStore";
+import {NotificationState} from "../../../stores/notifications/NotificationState";
 
 interface IButtonProps {
     space?: Room;
     className?: string;
     selected?: boolean;
     tooltip?: string;
-    notificationState?: SpaceNotificationState;
+    notificationState?: NotificationState;
     isNarrow?: boolean;
     onClick(): void;
 }
@@ -127,6 +127,12 @@ const SpacePanel = () => {
     const [invites, spaces, activeSpace] = useSpaces();
     const [isPanelCollapsed, setPanelCollapsed] = useState(true);
 
+    useEffect(() => {
+        if (!isPanelCollapsed && menuDisplayed) {
+            closeMenu();
+        }
+    }, [isPanelCollapsed]); // eslint-disable-line react-hooks/exhaustive-deps
+
     const newClasses = classNames("mx_SpaceButton_new", {
         mx_SpaceButton_newCancel: menuDisplayed,
     });
@@ -212,8 +218,8 @@ const SpacePanel = () => {
                             className="mx_SpaceButton_home"
                             onClick={() => SpaceStore.instance.setActiveSpace(null)}
                             selected={!activeSpace}
-                            tooltip={_t("Home")}
-                            notificationState={SpaceStore.instance.getNotificationState(HOME_SPACE)}
+                            tooltip={_t("All rooms")}
+                            notificationState={RoomNotificationStateStore.instance.globalState}
                             isNarrow={isPanelCollapsed}
                         />
                         { invites.map(s => <SpaceItem
@@ -235,18 +241,15 @@ const SpacePanel = () => {
                         className={newClasses}
                         tooltip={menuDisplayed ? _t("Cancel") : _t("Create a space")}
                         onClick={menuDisplayed ? closeMenu : () => {
-                            openMenu();
                             if (!isPanelCollapsed) setPanelCollapsed(true);
+                            openMenu();
                         }}
                         isNarrow={isPanelCollapsed}
                     />
                 </AutoHideScrollbar>
                 <AccessibleTooltipButton
                     className={classNames("mx_SpacePanel_toggleCollapse", {expanded: !isPanelCollapsed})}
-                    onClick={() => {
-                        setPanelCollapsed(!isPanelCollapsed);
-                        if (menuDisplayed) closeMenu();
-                    }}
+                    onClick={() => setPanelCollapsed(!isPanelCollapsed)}
                     title={expandCollapseButtonTitle}
                 />
                 { contextMenu }

src/components/views/spaces/SpacePublicShare.tsx

@@ -23,6 +23,7 @@ import {copyPlaintext} from "../../../utils/strings";
 import {sleep} from "../../../utils/promise";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import {showRoomInviteDialog} from "../../../RoomInvite";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 
 interface IProps {
     space: Room;
@@ -50,7 +51,7 @@ const SpacePublicShare = ({ space, onFinished }: IProps) => {
             <h3>{ _t("Share invite link") }</h3>
             <span>{ copiedText }</span>
         </AccessibleButton>
-        <AccessibleButton
+        { space.canInvite(MatrixClientPeg.get()?.getUserId()) ? <AccessibleButton
             className="mx_SpacePublicShare_inviteButton"
             onClick={() => {
                 showRoomInviteDialog(space.roomId);
@@ -59,7 +60,7 @@ const SpacePublicShare = ({ space, onFinished }: IProps) => {
         >
             <h3>{ _t("Invite people") }</h3>
             <span>{ _t("Invite with email or username") }</span>
-        </AccessibleButton>
+        </AccessibleButton> : null }
     </div>;
 };
 

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -20,6 +20,7 @@ import {Room} from "matrix-js-sdk/src/models/room";
 
 import RoomAvatar from "../avatars/RoomAvatar";
 import SpaceStore from "../../../stores/SpaceStore";
+import SpaceTreeLevelLayoutStore from "../../../stores/SpaceTreeLevelLayoutStore";
 import NotificationBadge from "../rooms/NotificationBadge";
 import {RovingAccessibleButton} from "../../../accessibility/roving/RovingAccessibleButton";
 import {RovingAccessibleTooltipButton} from "../../../accessibility/roving/RovingAccessibleTooltipButton";
@@ -68,8 +69,14 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
     constructor(props) {
         super(props);
 
+        const collapsed = SpaceTreeLevelLayoutStore.instance.getSpaceCollapsedState(
+            props.space.roomId,
+            this.props.parents,
+            !props.isNested, // default to collapsed for root items
+        );
+
         this.state = {
-            collapsed: !props.isNested, // default to collapsed for root items
+            collapsed: collapsed,
             contextMenuPosition: null,
         };
     }
@@ -78,7 +85,14 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         if (this.props.onExpand && this.state.collapsed) {
             this.props.onExpand();
         }
-        this.setState({collapsed: !this.state.collapsed});
+        const newCollapsedState = !this.state.collapsed;
+
+        SpaceTreeLevelLayoutStore.instance.setSpaceCollapsedState(
+            this.props.space.roomId,
+            this.props.parents,
+            newCollapsedState,
+        );
+        this.setState({collapsed: newCollapsedState});
         // don't bubble up so encapsulating button for space
         // doesn't get triggered
         evt.stopPropagation();
@@ -195,7 +209,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             const userId = this.context.getUserId();
 
             let inviteOption;
-            if (this.props.space.canInvite(userId)) {
+            if (this.props.space.getJoinRule() === "public" || this.props.space.canInvite(userId)) {
                 inviteOption = (
                     <IconizedContextMenuOption
                         className="mx_SpacePanel_contextMenu_inviteButton"

src/components/views/voice_messages/PlaybackWaveform.tsx

@@ -57,8 +57,8 @@ export default class PlaybackWaveform extends React.PureComponent<IProps, IState
     };
 
     private onTimeUpdate = (time: number[]) => {
-        // Track percentages to very coarse precision, otherwise 0.002 ends up highlighting a bar.
-        const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(1));
+        // Track percentages to a general precision to avoid over-waking the component.
+        const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(3));
         this.setState({progress});
     };
 

src/components/views/voip/DialPadModal.tsx

@@ -15,17 +15,14 @@ limitations under the License.
 */
 
 import * as React from "react";
-import { ensureDMExists } from "../../../createRoom";
 import { _t } from "../../../languageHandler";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import AccessibleButton from "../elements/AccessibleButton";
 import Field from "../elements/Field";
 import DialPad from './DialPad';
 import dis from '../../../dispatcher/dispatcher';
-import Modal from "../../../Modal";
-import ErrorDialog from "../../views/dialogs/ErrorDialog";
-import CallHandler from "../../../CallHandler";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { DialNumberPayload } from "../../../dispatcher/payloads/DialNumberPayload";
+import { Action } from "../../../dispatcher/actions";
 
 interface IProps {
     onFinished: (boolean) => void;
@@ -67,21 +64,11 @@ export default class DialpadModal extends React.PureComponent<IProps, IState> {
     }
 
     onDialPress = async () => {
-        const results = await CallHandler.sharedInstance().pstnLookup(this.state.value);
-        if (!results || results.length === 0 || !results[0].userid) {
-            Modal.createTrackedDialog('', '', ErrorDialog, {
-                title: _t("Unable to look up phone number"),
-                description: _t("There was an error looking up the phone number"),
-            });
-        }
-        const userId = results[0].userid;
-
-        const roomId = await ensureDMExists(MatrixClientPeg.get(), userId);
-
-        dis.dispatch({
-            action: 'view_room',
-            room_id: roomId,
-        });
+        const payload: DialNumberPayload = {
+            action: Action.DialNumber,
+            number: this.state.value,
+        };
+        dis.dispatch(payload);
 
         this.props.onFinished(true);
     }

src/components/views/voip/IncomingCallBox.tsx

@@ -21,17 +21,20 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import { ActionPayload } from '../../../dispatcher/payloads';
-import CallHandler from '../../../CallHandler';
+import CallHandler, { AudioID } from '../../../CallHandler';
 import RoomAvatar from '../avatars/RoomAvatar';
 import FormButton from '../elements/FormButton';
 import { CallState } from 'matrix-js-sdk/src/webrtc/call';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
+import classNames from 'classnames';
 
 interface IProps {
 }
 
 interface IState {
     incomingCall: any;
+    silenced: boolean;
 }
 
 @replaceableComponent("views.voip.IncomingCallBox")
@@ -44,6 +47,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
         this.dispatcherRef = dis.register(this.onAction);
         this.state = {
             incomingCall: null,
+            silenced: false,
         };
     }
 
@@ -58,6 +62,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
                 if (call && call.state === CallState.Ringing) {
                     this.setState({
                         incomingCall: call,
+                        silenced: false, // Reset silenced state for new call
                     });
                 } else {
                     this.setState({
@@ -84,6 +89,13 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
         });
     };
 
+    private onSilenceClick: React.MouseEventHandler = (e) => {
+        e.stopPropagation();
+        const newState = !this.state.silenced
+        this.setState({silenced: newState});
+        newState ? CallHandler.sharedInstance().pause(AudioID.Ring) : CallHandler.sharedInstance().play(AudioID.Ring);
+    }
+
     public render() {
         if (!this.state.incomingCall) {
             return null;
@@ -107,6 +119,12 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
             }
         }
 
+        const silenceClass = classNames({
+            "mx_IncomingCallBox_iconButton": true,
+            "mx_IncomingCallBox_unSilence": this.state.silenced,
+            "mx_IncomingCallBox_silence": !this.state.silenced,
+        });
+
         return <div className="mx_IncomingCallBox">
             <div className="mx_IncomingCallBox_CallerInfo">
                 <RoomAvatar
@@ -118,6 +136,11 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
                     <h1>{caller}</h1>
                     <p>{incomingCallText}</p>
                 </div>
+                <AccessibleTooltipButton
+                    className={silenceClass}
+                    onClick={this.onSilenceClick}
+                    title={this.state.silenced ? _t("Sound on"): _t("Silence call")}
+                />
             </div>
             <div className="mx_IncomingCallBox_buttons">
                 <FormButton