Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering

src/components/views/auth/AuthHeader.js

@@ -16,12 +16,17 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 
 export default createReactClass({
     displayName: 'AuthHeader',
 
+    propTypes: {
+        disableLanguageSelector: PropTypes.bool,
+    },
+
     render: function() {
         const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
         const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector');
@@ -29,7 +34,7 @@ export default createReactClass({
         return (
             <div className="mx_AuthHeader">
                 <AuthHeaderLogo />
-                <LanguageSelector />
+                <LanguageSelector disabled={this.props.disableLanguageSelector} />
             </div>
         );
     },

src/components/views/auth/CountryDropdown.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 
 import * as sdk from '../../../index';
 
-import { COUNTRIES } from '../../../phonenumber';
+import {COUNTRIES, getEmojiFlag} from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
 
@@ -80,7 +80,7 @@ export default class CountryDropdown extends React.Component {
     }
 
     _flagImgForIso2(iso2) {
-        return <img src={require(`../../../../res/img/flags/${iso2}.png`)} />;
+        return <div className="mx_Dropdown_option_emoji">{ getEmojiFlag(iso2) }</div>;
     }
 
     _getShortOption(iso2) {

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -412,14 +412,14 @@ export const EmailIdentityAuthEntry = createReactClass({
         this.props.onPhaseChange(DEFAULT_PHASE);
     },
 
-    getInitialState: function() {
-        return {
-            requestingToken: false,
-        };
-    },
-
     render: function() {
-        if (this.state.requestingToken) {
+        // This component is now only displayed once the token has been requested,
+        // so we know the email has been sent. It can also get loaded after the user
+        // has clicked the validation link if the server takes a while to propagate
+        // the validation internally. If we're in the session spawned from clicking
+        // the validation link, we won't know the email address, so if we don't have it,
+        // assume that the link has been clicked and the server will realise when we poll.
+        if (this.props.inputs.emailAddress === undefined) {
             const Loader = sdk.getComponent("elements.Spinner");
             return <Loader />;
         } else {

src/components/views/auth/LanguageSelector.js

@@ -28,12 +28,14 @@ function onChange(newLang) {
     }
 }
 
-export default function LanguageSelector() {
+export default function LanguageSelector({disabled}) {
     if (SdkConfig.get()['disable_login_language_selector']) return <div />;
 
     const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
-    return <LanguageDropdown className="mx_AuthBody_language"
+    return <LanguageDropdown
+        className="mx_AuthBody_language"
         onOptionChange={onChange}
         value={getCurrentLanguage()}
+        disabled={disabled}
     />;
 }

src/components/views/auth/PassphraseField.tsx

@@ -0,0 +1,125 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {PureComponent, RefCallback, RefObject} from "react";
+import classNames from "classnames";
+import zxcvbn from "zxcvbn";
+
+import SdkConfig from "../../../SdkConfig";
+import withValidation, {IFieldState, IValidationResult} from "../elements/Validation";
+import {_t, _td} from "../../../languageHandler";
+import Field from "../elements/Field";
+
+interface IProps {
+    autoFocus?: boolean;
+    id?: string;
+    className?: string;
+    minScore: 0 | 1 | 2 | 3 | 4;
+    value: string;
+    fieldRef?: RefCallback<Field> | RefObject<Field>;
+
+    label?: string;
+    labelEnterPassword?: string;
+    labelStrongPassword?: string;
+    labelAllowedButUnsafe?: string;
+
+    onChange(ev: KeyboardEvent);
+    onValidate(result: IValidationResult);
+}
+
+interface IState {
+    complexity: zxcvbn.ZXCVBNResult;
+}
+
+class PassphraseField extends PureComponent<IProps, IState> {
+    static defaultProps = {
+        label: _td("Password"),
+        labelEnterPassword: _td("Enter password"),
+        labelStrongPassword: _td("Nice, strong password!"),
+        labelAllowedButUnsafe: _td("Password is allowed, but unsafe"),
+    };
+
+    state = { complexity: null };
+
+    public readonly validate = withValidation<this>({
+        description: function() {
+            const complexity = this.state.complexity;
+            const score = complexity ? complexity.score : 0;
+            return <progress className="mx_PassphraseField_progress" max={4} value={score} />;
+        },
+        rules: [
+            {
+                key: "required",
+                test: ({ value, allowEmpty }) => allowEmpty || !!value,
+                invalid: () => _t(this.props.labelEnterPassword),
+            },
+            {
+                key: "complexity",
+                test: async function({ value }) {
+                    if (!value) {
+                        return false;
+                    }
+                    const { scorePassword } = await import('../../../utils/PasswordScorer');
+                    const complexity = scorePassword(value);
+                    this.setState({ complexity });
+                    const safe = complexity.score >= this.props.minScore;
+                    const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"];
+                    return allowUnsafe || safe;
+                },
+                valid: function() {
+                    // Unsafe passwords that are valid are only possible through a
+                    // configuration flag. We'll print some helper text to signal
+                    // to the user that their password is allowed, but unsafe.
+                    if (this.state.complexity.score >= this.props.minScore) {
+                        return _t(this.props.labelStrongPassword);
+                    }
+                    return _t(this.props.labelAllowedButUnsafe);
+                },
+                invalid: function() {
+                    const complexity = this.state.complexity;
+                    if (!complexity) {
+                        return null;
+                    }
+                    const { feedback } = complexity;
+                    return feedback.warning || feedback.suggestions[0] || _t("Keep going...");
+                },
+            },
+        ],
+    });
+
+    onValidate = async (fieldState: IFieldState) => {
+        const result = await this.validate(fieldState);
+        this.props.onValidate(result);
+        return result;
+    };
+
+    render() {
+        return <Field
+            id={this.props.id}
+            autoFocus={this.props.autoFocus}
+            className={classNames("mx_PassphraseField", this.props.className)}
+            ref={this.props.fieldRef}
+            type="password"
+            autoComplete="new-password"
+            label={_t(this.props.label)}
+            value={this.props.value}
+            onChange={this.props.onChange}
+            onValidate={this.onValidate}
+        />
+    }
+}
+
+export default PassphraseField;

src/components/views/auth/PasswordLogin.js

@@ -23,6 +23,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import AccessibleButton from "../elements/AccessibleButton";
 
 /**
  * A pure UI component which displays a username/password form.
@@ -44,6 +45,7 @@ export default class PasswordLogin extends React.Component {
         loginIncorrect: PropTypes.bool,
         disableSubmit: PropTypes.bool,
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
+        busy: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -183,7 +185,7 @@ export default class PasswordLogin extends React.Component {
         this.props.onPasswordChanged(ev.target.value);
     }
 
-    renderLoginField(loginType) {
+    renderLoginField(loginType, autoFocus) {
         const Field = sdk.getComponent('elements.Field');
 
         const classes = {};
@@ -202,7 +204,7 @@ export default class PasswordLogin extends React.Component {
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
                     disabled={this.props.disableSubmit}
-                    autoFocus
+                    autoFocus={autoFocus}
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
                 classes.error = this.props.loginIncorrect && !this.state.username;
@@ -216,7 +218,7 @@ export default class PasswordLogin extends React.Component {
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
                     disabled={this.props.disableSubmit}
-                    autoFocus
+                    autoFocus={autoFocus}
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
                 const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
@@ -240,7 +242,7 @@ export default class PasswordLogin extends React.Component {
                     onChange={this.onPhoneNumberChanged}
                     onBlur={this.onPhoneNumberBlur}
                     disabled={this.props.disableSubmit}
-                    autoFocus
+                    autoFocus={autoFocus}
                 />;
             }
         }
@@ -265,12 +267,16 @@ export default class PasswordLogin extends React.Component {
         if (this.props.onForgotPasswordClick) {
             forgotPasswordJsx = <span>
                 {_t('Not sure of your password? <a>Set a new one</a>', {}, {
-                    a: sub => <a className="mx_Login_forgot"
-                        onClick={this.onForgotPasswordClick}
-                        href="#"
-                    >
-                        {sub}
-                    </a>,
+                    a: sub => (
+                        <AccessibleButton
+                            className="mx_Login_forgot"
+                            disabled={this.props.busy}
+                            kind="link"
+                            onClick={this.onForgotPasswordClick}
+                        >
+                            {sub}
+                        </AccessibleButton>
+                    ),
                 })}
             </span>;
         }
@@ -279,7 +285,10 @@ export default class PasswordLogin extends React.Component {
             error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
         });
 
-        const loginField = this.renderLoginField(this.state.loginType);
+        // If login is empty, autoFocus login, otherwise autoFocus password.
+        // this is for when auto server discovery remounts us when the user tries to tab from username to password
+        const autoFocusPassword = !this.isLoginEmpty();
+        const loginField = this.renderLoginField(this.state.loginType, !autoFocusPassword);
 
         let loginType;
         if (!SdkConfig.get().disable_3pid_login) {
@@ -330,13 +339,14 @@ export default class PasswordLogin extends React.Component {
                         value={this.state.password}
                         onChange={this.onPasswordChanged}
                         disabled={this.props.disableSubmit}
+                        autoFocus={autoFocusPassword}
                     />
                     {forgotPasswordJsx}
-                    <input className="mx_Login_submit"
+                    { !this.props.busy && <input className="mx_Login_submit"
                         type="submit"
                         value={_t('Sign in')}
                         disabled={this.props.disableSubmit}
-                    />
+                    /> }
                 </form>
             </div>
         );

src/components/views/auth/RegistrationForm.js

@@ -29,6 +29,7 @@ import SdkConfig from '../../../SdkConfig';
 import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 import withValidation from '../elements/Validation';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import PassphraseField from "./PassphraseField";
 
 const FIELD_EMAIL = 'field_email';
 const FIELD_PHONE_NUMBER = 'field_phone_number';
@@ -76,9 +77,8 @@ export default createReactClass({
             email: this.props.defaultEmail || "",
             phoneNumber: this.props.defaultPhoneNumber || "",
             password: this.props.defaultPassword || "",
-            passwordConfirm: "",
+            passwordConfirm: this.props.defaultPassword || "",
             passwordComplexity: null,
-            passwordSafe: false,
         };
     },
 
@@ -102,11 +102,15 @@ export default createReactClass({
                     "No identity server is configured so you cannot add an email address in order to " +
                     "reset your password in the future.",
                 );
-            } else {
+            } else if (this._showEmail()) {
                 desc = _t(
                     "If you don't specify an email address, you won't be able to reset your password. " +
                     "Are you sure?",
                 );
+            } else {
+                // user can't set an e-mail so don't prompt them to
+                self._doSubmit(ev);
+                return;
             }
 
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
@@ -260,65 +264,10 @@ export default createReactClass({
         });
     },
 
-    async onPasswordValidate(fieldState) {
-        const result = await this.validatePasswordRules(fieldState);
+    onPasswordValidate(result) {
         this.markFieldValid(FIELD_PASSWORD, result.valid);
-        return result;
     },
 
-    validatePasswordRules: withValidation({
-        description: function() {
-            const complexity = this.state.passwordComplexity;
-            const score = complexity ? complexity.score : 0;
-            return <progress
-                className="mx_AuthBody_passwordScore"
-                max={PASSWORD_MIN_SCORE}
-                value={score}
-            />;
-        },
-        rules: [
-            {
-                key: "required",
-                test: ({ value, allowEmpty }) => allowEmpty || !!value,
-                invalid: () => _t("Enter password"),
-            },
-            {
-                key: "complexity",
-                test: async function({ value }) {
-                    if (!value) {
-                        return false;
-                    }
-                    const { scorePassword } = await import('../../../utils/PasswordScorer');
-                    const complexity = scorePassword(value);
-                    const safe = complexity.score >= PASSWORD_MIN_SCORE;
-                    const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"];
-                    this.setState({
-                        passwordComplexity: complexity,
-                        passwordSafe: safe,
-                    });
-                    return allowUnsafe || safe;
-                },
-                valid: function() {
-                    // Unsafe passwords that are valid are only possible through a
-                    // configuration flag. We'll print some helper text to signal
-                    // to the user that their password is allowed, but unsafe.
-                    if (!this.state.passwordSafe) {
-                        return _t("Password is allowed, but unsafe");
-                    }
-                    return _t("Nice, strong password!");
-                },
-                invalid: function() {
-                    const complexity = this.state.passwordComplexity;
-                    if (!complexity) {
-                        return null;
-                    }
-                    const { feedback } = complexity;
-                    return feedback.warning || feedback.suggestions[0] || _t("Keep going...");
-                },
-            },
-        ],
-    }),
-
     onPasswordConfirmChange(ev) {
         this.setState({
             passwordConfirm: ev.target.value,
@@ -480,13 +429,10 @@ export default createReactClass({
     },
 
     renderPassword() {
-        const Field = sdk.getComponent('elements.Field');
-        return <Field
+        return <PassphraseField
             id="mx_RegistrationForm_password"
-            ref={field => this[FIELD_PASSWORD] = field}
-            type="password"
-            autoComplete="new-password"
-            label={_t("Password")}
+            fieldRef={field => this[FIELD_PASSWORD] = field}
+            minScore={PASSWORD_MIN_SCORE}
             value={this.state.password}
             onChange={this.onPasswordChange}
             onValidate={this.onPasswordValidate}

src/components/views/auth/Welcome.js

@@ -45,7 +45,8 @@ export default class Welcome extends React.PureComponent {
             idBaseUrl: isUrl,
         });
         const plaf = PlatformPeg.get();
-        const callbackUrl = plaf.getSSOCallbackUrl(tmpClient.getHomeserverUrl(), tmpClient.getIdentityServerUrl());
+        const callbackUrl = plaf.getSSOCallbackUrl(tmpClient.getHomeserverUrl(), tmpClient.getIdentityServerUrl(),
+            this.props.fragmentAfterLogin);
 
         return (
             <AuthPage>

src/components/views/avatars/BaseAvatar.js

@@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 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.
@@ -17,207 +17,192 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import {toPx} from "../../../utils/units";
 
-export default createReactClass({
-    displayName: 'BaseAvatar',
+const useImageUrl = ({url, urls, idName, name, defaultToInitialLetter}) => {
+    const [imageUrls, setUrls] = useState([]);
+    const [urlsIndex, setIndex] = useState();
 
-    propTypes: {
-        name: PropTypes.string.isRequired, // The name (first initial used as default)
-        idName: PropTypes.string, // ID for generating hash colours
-        title: PropTypes.string, // onHover title text
-        url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
-        urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
-        width: PropTypes.number,
-        height: PropTypes.number,
-        // XXX resizeMethod not actually used.
-        resizeMethod: PropTypes.string,
-        defaultToInitialLetter: PropTypes.bool, // true to add default url
-        inputRef: PropTypes.oneOfType([
-            // Either a function
-            PropTypes.func,
-            // Or the instance of a DOM native element
-            PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-        ]),
-    },
-
-    statics: {
-        contextType: MatrixClientContext,
-    },
-
-    getDefaultProps: function() {
-        return {
-            width: 40,
-            height: 40,
-            resizeMethod: 'crop',
-            defaultToInitialLetter: true,
-        };
-    },
-
-    getInitialState: function() {
-        return this._getState(this.props);
-    },
-
-    componentDidMount() {
-        this.unmounted = false;
-        this.context.on('sync', this.onClientSync);
-    },
-
-    componentWillUnmount() {
-        this.unmounted = true;
-        this.context.removeListener('sync', this.onClientSync);
-    },
-
-    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(nextProps) {
-        // work out if we need to call setState (if the image URLs array has changed)
-        const newState = this._getState(nextProps);
-        const newImageUrls = newState.imageUrls;
-        const oldImageUrls = this.state.imageUrls;
-        if (newImageUrls.length !== oldImageUrls.length) {
-            this.setState(newState); // detected a new entry
-        } else {
-            // check each one to see if they are the same
-            for (let i = 0; i < newImageUrls.length; i++) {
-                if (oldImageUrls[i] !== newImageUrls[i]) {
-                    this.setState(newState); // detected a diff
-                    break;
-                }
-            }
+    const onError = () => {
+        const nextIndex = urlsIndex + 1;
+        if (nextIndex < imageUrls.length) {
+            // try the next one
+            setIndex(nextIndex);
         }
-    },
+    };
 
-    onClientSync: function(syncState, prevState) {
-        if (this.unmounted) return;
+    const defaultImageUrl = useMemo(() => AvatarLogic.defaultAvatarUrlForString(idName || name), [idName, name]);
 
-        // Consider the client reconnected if there is no error with syncing.
-        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
-        const reconnected = syncState !== "ERROR" && prevState !== syncState;
-        if (reconnected &&
-            // Did we fall back?
-            this.state.urlsIndex > 0
-        ) {
-            // Start from the highest priority URL again
-            this.setState({
-                urlsIndex: 0,
-            });
-        }
-    },
-
-    _getState: function(props) {
+    useEffect(() => {
         // work out the full set of urls to try to load. This is formed like so:
-        // imageUrls: [ props.url, props.urls, default image ]
+        // imageUrls: [ props.url, ...props.urls, default image ]
 
-        let urls = [];
+        let _urls = [];
         if (!SettingsStore.getValue("lowBandwidth")) {
-            urls = props.urls || [];
+            _urls = urls || [];
 
-            if (props.url) {
-                urls.unshift(props.url); // put in urls[0]
+            if (url) {
+                _urls.unshift(url); // put in urls[0]
             }
         }
 
-        let defaultImageUrl = null;
-        if (props.defaultToInitialLetter) {
-            defaultImageUrl = AvatarLogic.defaultAvatarUrlForString(
-                props.idName || props.name,
-            );
-            urls.push(defaultImageUrl); // lowest priority
+        if (defaultToInitialLetter) {
+            _urls.push(defaultImageUrl); // lowest priority
         }
 
         // deduplicate URLs
-        urls = Array.from(new Set(urls));
+        _urls = Array.from(new Set(_urls));
 
-        return {
-            imageUrls: urls,
-            defaultImageUrl: defaultImageUrl,
-            urlsIndex: 0,
-        };
-    },
+        setIndex(0);
+        setUrls(_urls);
+    }, [url, ...(urls || [])]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    onError: function(ev) {
-        const nextIndex = this.state.urlsIndex + 1;
-        if (nextIndex < this.state.imageUrls.length) {
-            // try the next one
-            this.setState({
-                urlsIndex: nextIndex,
-            });
+    const cli = useContext(MatrixClientContext);
+    const onClientSync = useCallback((syncState, prevState) => {
+        // Consider the client reconnected if there is no error with syncing.
+        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
+        const reconnected = syncState !== "ERROR" && prevState !== syncState;
+        if (reconnected && urlsIndex > 0 ) { // Did we fall back?
+            // Start from the highest priority URL again
+            setIndex(0);
         }
-    },
+    }, [urlsIndex]);
+    useEventEmitter(cli, "sync", onClientSync);
 
-    render: function() {
-        const imageUrl = this.state.imageUrls[this.state.urlsIndex];
+    const imageUrl = imageUrls[urlsIndex];
+    return [imageUrl, imageUrl === defaultImageUrl, onError];
+};
 
-        const {
-            name, idName, title, url, urls, width, height, resizeMethod,
-            defaultToInitialLetter, onClick, inputRef,
-            ...otherProps
-        } = this.props;
+const BaseAvatar = (props) => {
+    const {
+        name,
+        idName,
+        title,
+        url,
+        urls,
+        width=40,
+        height=40,
+        resizeMethod="crop", // eslint-disable-line no-unused-vars
+        defaultToInitialLetter=true,
+        onClick,
+        inputRef,
+        ...otherProps
+    } = props;
+
+    const [imageUrl, isDefault, onError] = useImageUrl({url, urls, idName, name, defaultToInitialLetter});
+
+    if (isDefault) {
+        const initialLetter = AvatarLogic.getInitialLetter(name);
+        const textNode = (
+            <span
+                className="mx_BaseAvatar_initial"
+                aria-hidden="true"
+                style={{
+                    fontSize: toPx(width * 0.65),
+                    width: toPx(width),
+                    lineHeight: toPx(height),
+                }}
+            >
+                { initialLetter }
+            </span>
+        );
+        const imgNode = (
+            <img
+                className="mx_BaseAvatar_image"
+                src={imageUrl}
+                alt=""
+                title={title}
+                onError={onError}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
+                aria-hidden="true" />
+        );
 
-        if (imageUrl === this.state.defaultImageUrl) {
-            const initialLetter = AvatarLogic.getInitialLetter(name);
-            const textNode = (
-                <span className="mx_BaseAvatar_initial" aria-hidden="true"
-                    style={{ fontSize: (width * 0.65) + "px",
-                    width: width + "px",
-                    lineHeight: height + "px" }}
-                >
-                    { initialLetter }
-                </span>
-            );
-            const imgNode = (
-                <img className="mx_BaseAvatar_image" src={imageUrl}
-                    alt="" title={title} onError={this.onError}
-                    width={width} height={height} aria-hidden="true" />
-            );
-            if (onClick != null) {
-                return (
-                    <AccessibleButton element='span' className="mx_BaseAvatar"
-                        onClick={onClick} inputRef={inputRef} {...otherProps}
-                    >
-                        { textNode }
-                        { imgNode }
-                    </AccessibleButton>
-                );
-            } else {
-                return (
-                    <span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
-                        { textNode }
-                        { imgNode }
-                    </span>
-                );
-            }
-        }
         if (onClick != null) {
             return (
                 <AccessibleButton
-                    className="mx_BaseAvatar mx_BaseAvatar_image"
-                    element='img'
-                    src={imageUrl}
+                    {...otherProps}
+                    element="span"
+                    className="mx_BaseAvatar"
                     onClick={onClick}
-                    onError={this.onError}
-                    width={width} height={height}
-                    title={title} alt=""
                     inputRef={inputRef}
-                    {...otherProps} />
+                >
+                    { textNode }
+                    { imgNode }
+                </AccessibleButton>
             );
         } else {
             return (
-                <img
-                    className="mx_BaseAvatar mx_BaseAvatar_image"
-                    src={imageUrl}
-                    onError={this.onError}
-                    width={width} height={height}
-                    title={title} alt=""
-                    ref={inputRef}
-                    {...otherProps} />
+                <span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
+                    { textNode }
+                    { imgNode }
+                </span>
             );
         }
-    },
-});
+    }
+
+    if (onClick != null) {
+        return (
+            <AccessibleButton
+                className="mx_BaseAvatar mx_BaseAvatar_image"
+                element='img'
+                src={imageUrl}
+                onClick={onClick}
+                onError={onError}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
+                title={title} alt=""
+                inputRef={inputRef}
+                {...otherProps} />
+        );
+    } else {
+        return (
+            <img
+                className="mx_BaseAvatar mx_BaseAvatar_image"
+                src={imageUrl}
+                onError={onError}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
+                title={title} alt=""
+                ref={inputRef}
+                {...otherProps} />
+        );
+    }
+};
+
+BaseAvatar.displayName = "BaseAvatar";
+
+BaseAvatar.propTypes = {
+    name: PropTypes.string.isRequired, // The name (first initial used as default)
+    idName: PropTypes.string, // ID for generating hash colours
+    title: PropTypes.string, // onHover title text
+    url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
+    urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
+    width: PropTypes.number,
+    height: PropTypes.number,
+    // XXX resizeMethod not actually used.
+    resizeMethod: PropTypes.string,
+    defaultToInitialLetter: PropTypes.bool, // true to add default url
+    onClick: PropTypes.func,
+    inputRef: PropTypes.oneOfType([
+        // Either a function
+        PropTypes.func,
+        // Or the instance of a DOM native element
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    ]),
+};
+
+export default BaseAvatar;

src/components/views/avatars/MemberAvatar.js

@@ -20,7 +20,8 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as Avatar from '../../../Avatar';
 import * as sdk from "../../../index";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
 
 export default createReactClass({
     displayName: 'MemberAvatar',
@@ -33,7 +34,7 @@ export default createReactClass({
         resizeMethod: PropTypes.string,
         // The onClick to give the avatar
         onClick: PropTypes.func,
-        // Whether the onClick of the avatar should be overriden to dispatch 'view_user'
+        // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
         viewUserOnClick: PropTypes.bool,
         title: PropTypes.string,
     },
@@ -85,7 +86,7 @@ export default createReactClass({
         if (viewUserOnClick) {
             onClick = () => {
                 dis.dispatch({
-                    action: 'view_user',
+                    action: Action.ViewUser,
                     member: this.props.member,
                 });
             };

src/components/views/context_menus/MessageContextMenu.js

@@ -23,7 +23,7 @@ import createReactClass from 'create-react-class';
 import {EventStatus} from 'matrix-js-sdk';
 
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
@@ -130,22 +130,24 @@ export default createReactClass({
     },
 
     onViewSourceClick: function() {
+        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Event Source', '', ViewSource, {
-            roomId: this.props.mxEvent.getRoomId(),
-            eventId: this.props.mxEvent.getId(),
-            content: this.props.mxEvent.event,
+            roomId: ev.getRoomId(),
+            eventId: ev.getId(),
+            content: ev.event,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     },
 
     onViewClearSourceClick: function() {
+        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
-            roomId: this.props.mxEvent.getRoomId(),
-            eventId: this.props.mxEvent.getId(),
+            roomId: ev.getRoomId(),
+            eventId: ev.getId(),
             // FIXME: _clearEvent is private
-            content: this.props.mxEvent._clearEvent,
+            content: ev._clearEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     },

src/components/views/context_menus/RoomTileContextMenu.js

@@ -24,7 +24,7 @@ import classNames from 'classnames';
 import * as sdk from '../../../index';
 import { _t, _td } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import * as Rooms from '../../../Rooms';
 import * as RoomNotifs from '../../../RoomNotifs';

src/components/views/context_menus/TagTileContextMenu.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import TagOrderActions from '../../../actions/TagOrderActions';
 import * as sdk from '../../../index';
 import {MenuItem} from "../../structures/ContextMenu";

src/components/views/context_menus/TopLeftMenu.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import LogoutDialog from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
@@ -27,6 +27,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {MenuItem} from "../../structures/ContextMenu";
 import * as sdk from "../../../index";
 import {getHomePageUrl} from "../../../utils/pages";
+import {Action} from "../../../dispatcher/actions";
 
 export default class TopLeftMenu extends React.Component {
     static propTypes = {
@@ -134,7 +135,7 @@ export default class TopLeftMenu extends React.Component {
     }
 
     openSettings() {
-        dis.dispatch({action: 'view_user_settings'});
+        dis.fire(Action.ViewUserSettings);
         this.closeMenu();
     }
 

src/components/views/dialogs/AddressPickerDialog.js

@@ -24,7 +24,7 @@ import createReactClass from 'create-react-class';
 import { _t, _td } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { addressTypes, getAddressType } from '../../../UserAddress.js';
 import GroupStore from '../../../stores/GroupStore';
 import * as Email from '../../../email';
@@ -33,6 +33,7 @@ import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from '../../../
 import { abbreviateUrl } from '../../../utils/UrlUtils';
 import {sleep} from "../../../utils/promise";
 import {Key} from "../../../Keyboard";
+import {Action} from "../../../dispatcher/actions";
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -615,7 +616,7 @@ export default createReactClass({
 
     onManageSettingsClick(e) {
         e.preventDefault();
-        dis.dispatch({ action: 'view_user_settings' });
+        dis.fire(Action.ViewUserSettings);
         this.onCancel();
     },
 

src/components/views/dialogs/BugReportDialog.js

@@ -137,12 +137,20 @@ export default class BugReportDialog extends React.Component {
             );
         }
 
+        let warning;
+        if (window.Modernizr && Object.values(window.Modernizr).some(support => support === false)) {
+            warning = <p><b>
+                { _t("Reminder: Your browser is unsupported, so your experience may be unpredictable.") }
+            </b></p>;
+        }
+
         return (
             <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
                     title={_t('Submit debug logs')}
                 contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                    { warning }
                     <p>
                         { _t(
                             "Debug logs contain application usage data including your " +

src/components/views/dialogs/CreateGroupDialog.js

@@ -18,7 +18,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 

src/components/views/dialogs/CreateRoomDialog.js

@@ -30,12 +30,13 @@ export default createReactClass({
     displayName: 'CreateRoomDialog',
     propTypes: {
         onFinished: PropTypes.func.isRequired,
+        defaultPublic: PropTypes.bool,
     },
 
     getInitialState() {
         const config = SdkConfig.get();
         return {
-            isPublic: false,
+            isPublic: this.props.defaultPublic || false,
             isEncrypted: true,
             name: "",
             topic: "",
@@ -65,8 +66,8 @@ export default createReactClass({
             createOpts.creation_content = {'m.federate': false};
         }
 
-        if (!this.state.isPublic && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-            createOpts.encryption = this.state.isEncrypted;
+        if (!this.state.isPublic && SettingsStore.getValue("feature_cross_signing")) {
+            opts.encryption = this.state.isEncrypted;
         }
 
         return opts;
@@ -192,9 +193,14 @@ export default createReactClass({
         }
 
         let e2eeSection;
-        if (!this.state.isPublic && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (!this.state.isPublic && SettingsStore.getValue("feature_cross_signing")) {
             e2eeSection = <React.Fragment>
-                <LabelledToggleSwitch label={ _t("Enable end-to-end encryption")} onChange={this.onEncryptedChange} value={this.state.isEncrypted} />
+                <LabelledToggleSwitch
+                    label={ _t("Enable end-to-end encryption")}
+                    onChange={this.onEncryptedChange}
+                    value={this.state.isEncrypted}
+                    className='mx_CreateRoomDialog_e2eSwitch' // for end-to-end tests
+                />
                 <p>{ _t("You can’t disable this later. Bridges & most bots won’t work yet.") }</p>
             </React.Fragment>;
         }

src/components/views/dialogs/CryptoStoreTooNewDialog.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -26,30 +26,6 @@ import { _t } from '../../../languageHandler';
 import InteractiveAuth, {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
 import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
 
-const dialogAesthetics = {
-    [SSOAuthEntry.PHASE_PREAUTH]: {
-        body: _t("Confirm your account deactivation by using Single Sign On to prove your identity."),
-        continueText: _t("Single Sign On"),
-        continueKind: "danger",
-    },
-    [SSOAuthEntry.PHASE_POSTAUTH]: {
-        body: _t("Are you sure you want to deactivate your account? This is irreversible."),
-        continueText: _t("Confirm account deactivation"),
-        continueKind: "danger",
-    },
-};
-
-// This is the same as aestheticsForStagePhases in InteractiveAuthDialog minus the `title`
-const DEACTIVATE_AESTHETICS = {
-    [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
-    [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
-    [PasswordAuthEntry.LOGIN_TYPE]: {
-        [DEFAULT_PHASE]: {
-            body: _t("To continue, please enter your password:"),
-        },
-    },
-};
-
 export default class DeactivateAccountDialog extends React.Component {
     constructor(props) {
         super(props);
@@ -58,6 +34,7 @@ export default class DeactivateAccountDialog extends React.Component {
             shouldErase: false,
             errStr: null,
             authData: null, // for UIA
+            authEnabled: true, // see usages for information
 
             // A few strings that are passed to InteractiveAuth for design or are displayed
             // next to the InteractiveAuth component.
@@ -66,24 +43,34 @@ export default class DeactivateAccountDialog extends React.Component {
             continueKind: null,
         };
 
-        MatrixClientPeg.get().deactivateAccount(null, false).then(r => {
-            // If we got here, oops. The server didn't require any auth.
-            // Our application lifecycle will catch the error and do the logout bits.
-            // We'll try to log something in an vain attempt to record what happened (storage
-            // is also obliterated on logout).
-            console.warn("User's account got deactivated without confirmation: Server had no auth");
-            this.setState({errStr: _t("Server did not require any authentication")});
-        }).catch(e => {
-            if (e && e.httpStatus === 401 && e.data) {
-                // Valid UIA response
-                this.setState({authData: e.data});
-            } else {
-                this.setState({errStr: _t("Server did not return valid authentication information.")});
-            }
-        });
+        this._initAuth(/* shouldErase= */false);
     }
 
     _onStagePhaseChange = (stage, phase) => {
+        const dialogAesthetics = {
+            [SSOAuthEntry.PHASE_PREAUTH]: {
+                body: _t("Confirm your account deactivation by using Single Sign On to prove your identity."),
+                continueText: _t("Single Sign On"),
+                continueKind: "danger",
+            },
+            [SSOAuthEntry.PHASE_POSTAUTH]: {
+                body: _t("Are you sure you want to deactivate your account? This is irreversible."),
+                continueText: _t("Confirm account deactivation"),
+                continueKind: "danger",
+            },
+        };
+
+        // This is the same as aestheticsForStagePhases in InteractiveAuthDialog minus the `title`
+        const DEACTIVATE_AESTHETICS = {
+            [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+            [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+            [PasswordAuthEntry.LOGIN_TYPE]: {
+                [DEFAULT_PHASE]: {
+                    body: _t("To continue, please enter your password:"),
+                },
+            },
+        };
+
         const aesthetics = DEACTIVATE_AESTHETICS[stage];
         let bodyText = null;
         let continueText = null;
@@ -124,13 +111,40 @@ export default class DeactivateAccountDialog extends React.Component {
     _onEraseFieldChange = (ev) => {
         this.setState({
             shouldErase: ev.target.checked,
+
+            // Disable the auth form because we're going to have to reinitialize the auth
+            // information. We do this because we can't modify the parameters in the UIA
+            // session, and the user will have selected something which changes the request.
+            // Therefore, we throw away the last auth session and try a new one.
+            authEnabled: false,
         });
+
+        // As mentioned above, set up for auth again to get updated UIA session info
+        this._initAuth(/* shouldErase= */ev.target.checked);
     };
 
     _onCancel() {
         this.props.onFinished(false);
     }
 
+    _initAuth(shouldErase) {
+        MatrixClientPeg.get().deactivateAccount(null, shouldErase).then(r => {
+            // If we got here, oops. The server didn't require any auth.
+            // Our application lifecycle will catch the error and do the logout bits.
+            // We'll try to log something in an vain attempt to record what happened (storage
+            // is also obliterated on logout).
+            console.warn("User's account got deactivated without confirmation: Server had no auth");
+            this.setState({errStr: _t("Server did not require any authentication")});
+        }).catch(e => {
+            if (e && e.httpStatus === 401 && e.data) {
+                // Valid UIA response
+                this.setState({authData: e.data, authEnabled: true});
+            } else {
+                this.setState({errStr: _t("Server did not return valid authentication information.")});
+            }
+        });
+    }
+
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
@@ -142,7 +156,7 @@ export default class DeactivateAccountDialog extends React.Component {
         }
 
         let auth = <div>{_t("Loading...")}</div>;
-        if (this.state.authData) {
+        if (this.state.authData && this.state.authEnabled) {
             auth = (
                 <div>
                     {this.state.bodyText}

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -25,7 +25,7 @@ import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
 import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import {ensureDMExists} from "../../../createRoom";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from '../../../settings/SettingsStore';
 import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
 import VerificationQREmojiOptions from "../verification/VerificationQREmojiOptions";
@@ -131,7 +131,7 @@ export default class DeviceVerifyDialog extends React.Component {
                 } else {
                     this._verifier = request.verifier;
                 }
-            } else if (verifyingOwnDevice && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            } else if (verifyingOwnDevice && SettingsStore.getValue("feature_cross_signing")) {
                 this._request = await client.requestVerification(this.props.userId, [
                     verificationMethods.SAS,
                     SHOW_QR_CODE_METHOD,

src/components/views/dialogs/DevtoolsDialog.js

@@ -696,6 +696,9 @@ class VerificationExplorer extends React.Component {
                     <VerificationRequest txnId={txnId} request={request} key={txnId} />,
                 )}
             </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this.props.onBack}>{_t("Back")}</button>
+            </div>
         </div>);
     }
 }

src/components/views/dialogs/IntegrationsDisabledDialog.js

@@ -18,7 +18,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
 import * as sdk from "../../../index";
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
+import {Action} from "../../../dispatcher/actions";
 
 export default class IntegrationsDisabledDialog extends React.Component {
     static propTypes = {
@@ -31,7 +32,7 @@ export default class IntegrationsDisabledDialog extends React.Component {
 
     _onOpenSettingsClick = () => {
         this.props.onFinished();
-        dis.dispatch({action: "view_user_settings"});
+        dis.fire(Action.ViewUserSettings);
     };
 
     render() {

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -25,6 +25,7 @@ import { _t } from '../../../languageHandler';
 
 import AccessibleButton from '../elements/AccessibleButton';
 import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
+import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
 
 export default createReactClass({
     displayName: 'InteractiveAuthDialog',
@@ -66,6 +67,8 @@ export default createReactClass({
         //         }
         //     }
         // }
+        //
+        // Default is defined in _getDefaultDialogAesthetics()
         aestheticsForStagePhases: PropTypes.object,
     },
 
@@ -79,6 +82,28 @@ export default createReactClass({
         };
     },
 
+    _getDefaultDialogAesthetics: function() {
+        const ssoAesthetics = {
+            [SSOAuthEntry.PHASE_PREAUTH]: {
+                title: _t("Use Single Sign On to continue"),
+                body: _t("To continue, use Single Sign On to prove your identity."),
+                continueText: _t("Single Sign On"),
+                continueKind: "primary",
+            },
+            [SSOAuthEntry.PHASE_POSTAUTH]: {
+                title: _t("Confirm to continue"),
+                body: _t("Click the button below to confirm your identity."),
+                continueText: _t("Confirm"),
+                continueKind: "primary",
+            },
+        };
+
+        return {
+            [SSOAuthEntry.LOGIN_TYPE]: ssoAesthetics,
+            [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: ssoAesthetics,
+        };
+    },
+
     _onAuthFinished: function(success, result) {
         if (success) {
             this.props.onFinished(true, result);
@@ -113,9 +138,10 @@ export default createReactClass({
         let body = this.state.authError ? null : this.props.body;
         let continueText = null;
         let continueKind = null;
-        if (!this.state.authError && this.props.aestheticsForStagePhases) {
-            if (this.props.aestheticsForStagePhases[this.state.uiaStage]) {
-                const aesthetics = this.props.aestheticsForStagePhases[this.state.uiaStage][this.state.uiaStagePhase];
+        const dialogAesthetics = this.props.aestheticsForStagePhases || this._getDefaultDialogAesthetics();
+        if (!this.state.authError && dialogAesthetics) {
+            if (dialogAesthetics[this.state.uiaStage]) {
+                const aesthetics = dialogAesthetics[this.state.uiaStage][this.state.uiaStagePhase];
                 if (aesthetics && aesthetics.title) title = aesthetics.title;
                 if (aesthetics && aesthetics.body) body = aesthetics.body;
                 if (aesthetics && aesthetics.continueText) continueText = aesthetics.continueText;

src/components/views/dialogs/InviteDialog.js

@@ -27,15 +27,17 @@ import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 import * as Email from "../../../email";
 import {getDefaultIdentityServerUrl, useDefaultIdentityServer} from "../../../utils/IdentityServerUtils";
 import {abbreviateUrl} from "../../../utils/UrlUtils";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
 import createRoom, {canEncryptToAllUsers} from "../../../createRoom";
 import {inviteMultipleToRoom} from "../../../RoomInvite";
 import SettingsStore from '../../../settings/SettingsStore';
-import RoomListStore, {TAG_DM} from "../../../stores/RoomListStore";
 import {Key} from "../../../Keyboard";
+import {Action} from "../../../dispatcher/actions";
+import {RoomListStoreTempProxy} from "../../../stores/room-list/RoomListStoreTempProxy";
+import {DefaultTagID} from "../../../stores/room-list/models";
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
@@ -343,10 +345,10 @@ export default class InviteDialog extends React.PureComponent {
     _buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number} {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
-        // Also pull in all the rooms tagged as TAG_DM so we don't miss anything. Sometimes the
+        // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
         // room list doesn't tag the room for the DMRoomMap, but does for the room list.
-        const taggedRooms = RoomListStore.getRoomLists();
-        const dmTaggedRooms = taggedRooms[TAG_DM];
+        const taggedRooms = RoomListStoreTempProxy.getRoomLists();
+        const dmTaggedRooms = taggedRooms[DefaultTagID.DM];
         const myUserId = MatrixClientPeg.get().getUserId();
         for (const dmRoom of dmTaggedRooms) {
             const otherMembers = dmRoom.getJoinedMembers().filter(u => u.userId !== myUserId);
@@ -574,13 +576,16 @@ export default class InviteDialog extends React.PureComponent {
 
         const createRoomOptions = {inlineErrors: true};
 
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("feature_cross_signing")) {
             // Check whether all users have uploaded device keys before.
             // If so, enable encryption in the new room.
-            const client = MatrixClientPeg.get();
-            const allHaveDeviceKeys = await canEncryptToAllUsers(client, targetIds);
-            if (allHaveDeviceKeys) {
-                createRoomOptions.encryption = true;
+            const has3PidMembers = targets.some(t => t instanceof ThreepidMember);
+            if (!has3PidMembers) {
+                const client = MatrixClientPeg.get();
+                const allHaveDeviceKeys = await canEncryptToAllUsers(client, targetIds);
+                if (allHaveDeviceKeys) {
+                    createRoomOptions.encryption = true;
+                }
             }
         }
 
@@ -899,7 +904,7 @@ export default class InviteDialog extends React.PureComponent {
 
     _onManageSettingsClick = (e) => {
         e.preventDefault();
-        dis.dispatch({ action: 'view_user_settings' });
+        dis.fire(Action.ViewUserSettings);
         this.props.onFinished();
     };
 
@@ -1067,9 +1072,8 @@ export default class InviteDialog extends React.PureComponent {
         let buttonText;
         let goButtonFn;
 
+        const userId = MatrixClientPeg.get().getUserId();
         if (this.props.kind === KIND_DM) {
-            const userId = MatrixClientPeg.get().getUserId();
-
             title = _t("Direct Messages");
             helpText = _t(
                 "Start a conversation with someone using their name, username (like <userId/>) or email address.",
@@ -1083,9 +1087,11 @@ export default class InviteDialog extends React.PureComponent {
         } else { // KIND_INVITE
             title = _t("Invite to this room");
             helpText = _t(
-                "If you can't find someone, ask them for their username (e.g. @user:server.com) or " +
-                "<a>share this room</a>.", {},
+                "Invite someone using their name, username (like <userId/>), email address or <a>share this room</a>.",
+                {},
                 {
+                    userId: () =>
+                        <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>,
                     a: (sub) =>
                         <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">{sub}</a>,
                 },

src/components/views/dialogs/KeySignatureUploadFailedDialog.js

@@ -85,7 +85,7 @@ export default function KeySignatureUploadFailedDialog({
               <span>{_t("Upload completed")}</span> :
               cancelled ?
                 <span>{_t("Cancelled signature upload")}</span> :
-                <span>{_t("Unabled to upload")}</span>}
+                <span>{_t("Unable to upload")}</span>}
             <DialogButtons
                 primaryButton={_t("OK")}
                 hasCancel={false}

src/components/views/dialogs/LogoutDialog.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 

src/components/views/dialogs/RoomSettingsDialog.js

@@ -27,7 +27,7 @@ import NotificationSettingsTab from "../settings/tabs/room/NotificationSettingsT
 import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab";
 import * as sdk from "../../../index";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
 
 export default class RoomSettingsDialog extends React.Component {

src/components/views/dialogs/SetupEncryptionDialog.js

@@ -14,16 +14,52 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from 'react';
+import PropTypes from 'prop-types';
 import SetupEncryptionBody from '../../structures/auth/SetupEncryptionBody';
 import BaseDialog from './BaseDialog';
 import { _t } from '../../../languageHandler';
+import { SetupEncryptionStore, PHASE_DONE } from '../../../stores/SetupEncryptionStore';
 
-export default function SetupEncryptionDialog({onFinished}) {
-    return <BaseDialog
-        headerImage={require("../../../../res/img/e2e/warning.svg")}
-        onFinished={onFinished}
-        title={_t("Verify this session")}
-    >
-        <SetupEncryptionBody onFinished={onFinished} />
-    </BaseDialog>;
+function iconFromPhase(phase) {
+    if (phase === PHASE_DONE) {
+        return require("../../../../res/img/e2e/verified.svg");
+    } else {
+        return require("../../../../res/img/e2e/warning.svg");
+    }
+}
+
+export default class SetupEncryptionDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.store = SetupEncryptionStore.sharedInstance();
+        this.state = {icon: iconFromPhase(this.store.phase)};
+    }
+
+    componentDidMount() {
+        this.store.on("update", this._onStoreUpdate);
+    }
+
+    componentWillUnmount() {
+        this.store.removeListener("update", this._onStoreUpdate);
+    }
+
+    _onStoreUpdate = () => {
+        this.setState({icon: iconFromPhase(this.store.phase)});
+    };
+
+    render() {
+        return <BaseDialog
+            headerImage={this.state.icon}
+            onFinished={this.props.onFinished}
+            title={_t("Verify this session")}
+        >
+            <SetupEncryptionBody onFinished={this.props.onFinished} />
+        </BaseDialog>;
+    }
 }

src/components/views/dialogs/ShareDialog.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,15 +15,20 @@ 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 {Room, User, Group, RoomMember, MatrixEvent} from 'matrix-js-sdk';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {Room} from "matrix-js-sdk/src/models/room";
+import {User} from "matrix-js-sdk/src/models/user";
+import {Group} from "matrix-js-sdk/src/models/group";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import QRCode from 'qrcode-react';
+import QRCode from "../elements/QRCode";
 import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
 import * as ContextMenu from "../../structures/ContextMenu";
 import {toRightOf} from "../../structures/ContextMenu";
+import {copyPlaintext, selectText} from "../../../utils/strings";
 
 const socials = [
     {
@@ -52,7 +58,18 @@ const socials = [
     },
 ];
 
-export default class ShareDialog extends React.Component {
+interface IProps {
+    onFinished: () => void;
+    target: Room | User | Group | RoomMember | MatrixEvent;
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+interface IState {
+    linkSpecificEvent: boolean;
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+export default class ShareDialog extends React.PureComponent<IProps, IState> {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
         target: PropTypes.oneOfType([
@@ -64,6 +81,8 @@ export default class ShareDialog extends React.Component {
         ]).isRequired,
     };
 
+    protected closeCopiedTooltip: () => void;
+
     constructor(props) {
         super(props);
 
@@ -81,45 +100,26 @@ export default class ShareDialog extends React.Component {
             linkSpecificEvent: this.props.target instanceof MatrixEvent,
             permalinkCreator,
         };
-
-        this._link = createRef();
-    }
-
-    static _selectText(target) {
-        const range = document.createRange();
-        range.selectNodeContents(target);
-
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
     }
 
     static onLinkClick(e) {
         e.preventDefault();
-        const {target} = e;
-        ShareDialog._selectText(target);
+        selectText(e.target);
     }
 
-    onCopyClick(e) {
+    async onCopyClick(e) {
         e.preventDefault();
+        const target = e.target; // copy target before we go async and React throws it away
 
-        ShareDialog._selectText(this._link.current);
-
-        let successful;
-        try {
-            successful = document.execCommand('copy');
-        } catch (err) {
-            console.error('Failed to copy: ', err);
-        }
-
-        const buttonRect = e.target.getBoundingClientRect();
+        const successful = await copyPlaintext(this.getUrl());
+        const buttonRect = target.getBoundingClientRect();
         const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
         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 = e.target.onmouseleave = close;
+        this.closeCopiedTooltip = target.onmouseleave = close;
     }
 
     onLinkSpecificEventCheckboxClick() {
@@ -134,10 +134,32 @@ export default class ShareDialog extends React.Component {
         if (this.closeCopiedTooltip) this.closeCopiedTooltip();
     }
 
-    render() {
-        let title;
+    getUrl() {
         let matrixToUrl;
 
+        if (this.props.target instanceof Room) {
+            if (this.state.linkSpecificEvent) {
+                const events = this.props.target.getLiveTimeline().getEvents();
+                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
+            } else {
+                matrixToUrl = this.state.permalinkCreator.forRoom();
+            }
+        } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
+            matrixToUrl = makeUserPermalink(this.props.target.userId);
+        } else if (this.props.target instanceof Group) {
+            matrixToUrl = makeGroupPermalink(this.props.target.groupId);
+        } else if (this.props.target instanceof MatrixEvent) {
+            if (this.state.linkSpecificEvent) {
+                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
+            } else {
+                matrixToUrl = this.props.permalinkCreator.forRoom();
+            }
+        }
+        return matrixToUrl;
+    }
+
+    render() {
+        let title;
         let checkbox;
 
         if (this.props.target instanceof Room) {
@@ -155,18 +177,10 @@ export default class ShareDialog extends React.Component {
                     </label>
                 </div>;
             }
-
-            if (this.state.linkSpecificEvent) {
-                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
-            } else {
-                matrixToUrl = this.state.permalinkCreator.forRoom();
-            }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
             title = _t('Share User');
-            matrixToUrl = makeUserPermalink(this.props.target.userId);
         } else if (this.props.target instanceof Group) {
             title = _t('Share Community');
-            matrixToUrl = makeGroupPermalink(this.props.target.groupId);
         } else if (this.props.target instanceof MatrixEvent) {
             title = _t('Share Room Message');
             checkbox = <div>
@@ -178,14 +192,9 @@ export default class ShareDialog extends React.Component {
                     { _t('Link to selected message') }
                 </label>
             </div>;
-
-            if (this.state.linkSpecificEvent) {
-                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
-            } else {
-                matrixToUrl = this.props.permalinkCreator.forRoom();
-            }
         }
 
+        const matrixToUrl = this.getUrl();
         const encodedUrl = encodeURIComponent(matrixToUrl);
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
@@ -196,8 +205,7 @@ export default class ShareDialog extends React.Component {
         >
             <div className="mx_ShareDialog_content">
                 <div className="mx_ShareDialog_matrixto">
-                    <a ref={this._link}
-                       href={matrixToUrl}
+                    <a href={matrixToUrl}
                        onClick={ShareDialog.onLinkClick}
                        className="mx_ShareDialog_matrixto_link"
                     >
@@ -213,20 +221,21 @@ export default class ShareDialog extends React.Component {
 
                 <div className="mx_ShareDialog_split">
                     <div className="mx_ShareDialog_qrcode_container">
-                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo={require("../../../../res/img/matrix-m.svg")} />
+                        <QRCode data={matrixToUrl} width={256} />
                     </div>
                     <div className="mx_ShareDialog_social_container">
-                        {
-                            socials.map((social) => <a rel="noreferrer noopener"
-                                                       target="_blank"
-                                                       key={social.name}
-                                                       name={social.name}
-                                                       href={social.url(encodedUrl)}
-                                                       className="mx_ShareDialog_social_icon"
+                        { socials.map((social) => (
+                            <a
+                                rel="noreferrer noopener"
+                                target="_blank"
+                                key={social.name}
+                                title={social.name}
+                                href={social.url(encodedUrl)}
+                                className="mx_ShareDialog_social_icon"
                             >
                                 <img src={social.img} alt={social.name} height={64} width={64} />
-                            </a>)
-                        }
+                            </a>
+                        )) }
                     </div>
                 </div>
             </div>

src/components/views/dialogs/UserSettingsDialog.js

@@ -22,6 +22,7 @@ import {_t, _td} from "../../../languageHandler";
 import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
 import SettingsStore from "../../../settings/SettingsStore";
 import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
+import AppearanceUserSettingsTab from "../settings/tabs/user/AppearanceUserSettingsTab";
 import SecurityUserSettingsTab from "../settings/tabs/user/SecurityUserSettingsTab";
 import NotificationUserSettingsTab from "../settings/tabs/user/NotificationUserSettingsTab";
 import PreferencesUserSettingsTab from "../settings/tabs/user/PreferencesUserSettingsTab";
@@ -66,6 +67,11 @@ export default class UserSettingsDialog extends React.Component {
             "mx_UserSettingsDialog_settingsIcon",
             <GeneralUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
+        tabs.push(new Tab(
+            _td("Appearance"),
+            "mx_UserSettingsDialog_appearanceIcon",
+            <AppearanceUserSettingsTab />,
+        ));
         tabs.push(new Tab(
             _td("Flair"),
             "mx_UserSettingsDialog_flairIcon",
@@ -89,7 +95,7 @@ export default class UserSettingsDialog extends React.Component {
         tabs.push(new Tab(
             _td("Security & Privacy"),
             "mx_UserSettingsDialog_securityIcon",
-            <SecurityUserSettingsTab />,
+            <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
         if (SdkConfig.get()['showLabsSettings'] || SettingsStore.getLabsFeatures().length > 0) {
             tabs.push(new Tab(

src/components/views/dialogs/VerificationRequestDialog.js

@@ -48,7 +48,7 @@ export default class VerificationRequestDialog extends React.Component {
         const member = this.props.member ||
             otherUserId && MatrixClientPeg.get().getUser(otherUserId);
         const title = request && request.isSelfVerification ?
-            _t("Verify this session") : _t("Verification Request");
+            _t("Verify other session") : _t("Verification Request");
 
         return <BaseDialog className="mx_InfoDialog" onFinished={this.onFinished}
                 contentId="mx_Dialog_content"

src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js

@@ -23,6 +23,7 @@ import { MatrixClient } from 'matrix-js-sdk';
 import Modal from '../../../../Modal';
 import { _t } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../CrossSigningManager';
+import SettingsStore from "../../../../settings/SettingsStore";
 
 const RESTORE_TYPE_PASSPHRASE = 0;
 const RESTORE_TYPE_RECOVERYKEY = 1;
@@ -59,6 +60,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             forceRecoveryKey: false,
             passPhrase: '',
             restoreType: null,
+            progress: { stage: "prefetch" },
         };
     }
 
@@ -80,16 +82,29 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         });
     }
 
+    _progressCallback = (data) => {
+        this.setState({
+            progress: data,
+        });
+    }
+
     _onResetRecoveryClick = () => {
         this.props.onFinished(false);
-        Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
-            import('../../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
-            {
-                onFinished: () => {
-                    this._loadBackupStatus();
-                },
-            }, null, /* priority = */ false, /* static = */ true,
-        );
+
+        if (SettingsStore.getValue("feature_cross_signing")) {
+            // If cross-signing is enabled, we reset the SSSS recovery passphrase (and cross-signing keys)
+            this.props.onFinished(false);
+            accessSecretStorage(() => {}, /* forceReset = */ true);
+        } else {
+            Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
+                import('../../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
+                {
+                    onFinished: () => {
+                        this._loadBackupStatus();
+                    },
+                }, null, /* priority = */ false, /* static = */ true,
+            );
+        }
     }
 
     _onRecoveryKeyChange = (e) => {
@@ -110,6 +125,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             // is the right one and restoring it is currently the only way we can do this.
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithPassword(
                 this.state.passPhrase, undefined, undefined, this.state.backupInfo,
+                { progressCallback: this._progressCallback },
             );
             if (this.props.keyCallback) {
                 const key = await MatrixClientPeg.get().keyBackupKeyFromPassword(
@@ -146,6 +162,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         try {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithRecoveryKey(
                 this.state.recoveryKey, undefined, undefined, this.state.backupInfo,
+                { progressCallback: this._progressCallback },
             );
             if (this.props.keyCallback) {
                 const key = MatrixClientPeg.get().keyBackupKeyFromRecoveryKey(this.state.recoveryKey);
@@ -184,7 +201,8 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             // `accessSecretStorage` may prompt for storage access as needed.
             const recoverInfo = await accessSecretStorage(async () => {
                 return MatrixClientPeg.get().restoreKeyBackupWithSecretStorage(
-                    this.state.backupInfo,
+                    this.state.backupInfo, undefined, undefined,
+                    { progressCallback: this._progressCallback },
                 );
             });
             this.setState({
@@ -207,6 +225,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 undefined, /* targetRoomId */
                 undefined, /* targetSessionId */
                 backupInfo,
+                { progressCallback: this._progressCallback },
             );
             this.setState({
                 recoverInfo,
@@ -272,8 +291,20 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         let content;
         let title;
         if (this.state.loading) {
-            title = _t("Loading...");
-            content = <Spinner />;
+            title = _t("Restoring keys from backup");
+            let details;
+            if (this.state.progress.stage === "fetch") {
+                details = _t("Fetching keys from server...");
+            } else if (this.state.progress.stage === "load_keys") {
+                const { total, successes, failures } = this.state.progress;
+                details = _t("%(completed)s of %(total)s keys restored", { total, completed: successes + failures });
+            } else if (this.state.progress.stage === "prefetch") {
+                details = _t("Fetching keys from server...");
+            }
+            content = <div>
+                <div>{details}</div>
+                <Spinner />
+            </div>;
         } else if (this.state.loadError) {
             title = _t("Error");
             content = _t("Unable to load backup status");
@@ -283,7 +314,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     title = _t("Recovery key mismatch");
                     content = <div>
                         <p>{_t(
-                            "Backup could not be decrypted with this key: " +
+                            "Backup could not be decrypted with this recovery key: " +
                             "please verify that you entered the correct recovery key.",
                         )}</p>
                     </div>;
@@ -291,7 +322,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     title = _t("Incorrect recovery passphrase");
                     content = <div>
                         <p>{_t(
-                            "Backup could not be decrypted with this passphrase: " +
+                            "Backup could not be decrypted with this recovery passphrase: " +
                             "please verify that you entered the correct recovery passphrase.",
                         )}</p>
                     </div>;
@@ -305,7 +336,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             content = _t("No backup found!");
         } else if (this.state.recoverInfo) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            title = _t("Backup restored");
+            title = _t("Keys restored");
             let failedToDecrypt;
             if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
                 failedToDecrypt = <p>{_t(
@@ -314,7 +345,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 )}</p>;
             }
             content = <div>
-                <p>{_t("Restored %(sessionCount)s session keys", {sessionCount: this.state.recoverInfo.imported})}</p>
+                <p>{_t("Successfully restored %(sessionCount)s keys", {sessionCount: this.state.recoverInfo.imported})}</p>
                 {failedToDecrypt}
                 <DialogButtons primaryButton={_t('OK')}
                     onPrimaryButtonClick={this._onDone}
@@ -435,7 +466,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 onFinished={this.props.onFinished}
                 title={title}
             >
-            <div>
+            <div className='mx_RestoreKeyBackupDialog_content'>
                 {content}
             </div>
             </BaseDialog>

src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js

@@ -21,6 +21,7 @@ import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 
 import { _t } from '../../../../languageHandler';
+import { accessSecretStorage } from '../../../../CrossSigningManager';
 
 /*
  * Access Secure Secret Storage by requesting the user's passphrase.
@@ -55,8 +56,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
     }
 
     _onResetRecoveryClick = () => {
+        // Re-enter the access flow, but resetting storage this time around.
         this.props.onFinished(false);
-        throw new Error("Resetting secret storage unimplemented");
+        accessSecretStorage(() => {}, /* forceReset = */ true);
     }
 
     _onRecoveryKeyChange = (e) => {
@@ -119,14 +121,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         if (hasPassphrase && !this.state.forceRecoveryKey) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-            title = _t("Enter secret storage passphrase");
+            title = _t("Enter recovery passphrase");
 
             let keyStatus;
             if (this.state.keyMatches === false) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t(
-                        "Unable to access secret storage. Please verify that you " +
-                        "entered the correct passphrase.",
+                        "Unable to access secret storage. " +
+                        "Please verify that you entered the correct recovery passphrase.",
                     )}
                 </div>;
             } else {
@@ -135,13 +137,12 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: You should only access secret storage " +
-                    "from a trusted computer.", {},
+                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
                     { b: sub => <b>{sub}</b> },
                 )}</p>
                 <p>{_t(
                     "Access your secure message history and your cross-signing " +
-                    "identity for verifying other sessions by entering your passphrase.",
+                    "identity for verifying other sessions by entering your recovery passphrase.",
                 )}</p>
 
                 <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
@@ -164,7 +165,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     />
                 </form>
                 {_t(
-                    "If you've forgotten your passphrase you can "+
+                    "If you've forgotten your recovery passphrase you can "+
                     "<button1>use your recovery key</button1> or " +
                     "<button2>set up new recovery options</button2>."
                 , {}, {
@@ -183,7 +184,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 })}
             </div>;
         } else {
-            title = _t("Enter secret storage recovery key");
+            title = _t("Enter recovery key");
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
@@ -193,8 +194,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             } else if (this.state.keyMatches === false) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t(
-                        "Unable to access secret storage. Please verify that you " +
-                        "entered the correct recovery key.",
+                        "Unable to access secret storage. " +
+                        "Please verify that you entered the correct recovery key.",
                     )}
                 </div>;
             } else if (this.state.recoveryKeyValid) {
@@ -209,8 +210,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: You should only access secret storage " +
-                    "from a trusted computer.", {},
+                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
                     { b: sub => <b>{sub}</b> },
                 )}</p>
                 <p>{_t(

src/components/views/elements/ActionButton.js

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import AccessibleButton from './AccessibleButton';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
 

src/components/views/elements/AppTile.js

@@ -31,13 +31,14 @@ import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
 import MessageSpinner from './MessageSpinner';
 import WidgetUtils from '../../../utils/WidgetUtils';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import classNames from 'classnames';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 import {aboveLeftOf, ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
 import PersistedElement from "./PersistedElement";
+import {WidgetType} from "../../../widgets/WidgetType";
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 const ENABLE_REACT_PERF = false;
@@ -187,13 +188,14 @@ export default class AppTile extends React.Component {
         }
     }
 
+    // TODO: Generify the name of this function. It's not just scalar tokens.
     /**
      * Adds a scalar token to the widget URL, if required
      * Component initialisation is only complete when this function has resolved
      */
     setScalarToken() {
         if (!WidgetUtils.isScalarUrl(this.props.app.url)) {
-            console.warn('Non-scalar widget, not setting scalar token!', url);
+            console.warn('Widget does not match integration manager, refusing to set auth token', url);
             this.setState({
                 error: null,
                 widgetUrl: this._addWurlParams(this.props.app.url),
@@ -217,7 +219,7 @@ export default class AppTile extends React.Component {
 
         const defaultManager = managers.getPrimaryManager();
         if (!WidgetUtils.isScalarUrl(defaultManager.apiUrl)) {
-            console.warn('Non-scalar manager, not setting scalar token!', url);
+            console.warn('Unknown integration manager, refusing to set auth token', url);
             this.setState({
                 error: null,
                 widgetUrl: this._addWurlParams(this.props.app.url),
@@ -423,7 +425,12 @@ export default class AppTile extends React.Component {
         // FIXME: There's probably no reason to do this here: it should probably be done entirely
         // in ActiveWidgetStore.
         const widgetMessaging = new WidgetMessaging(
-            this.props.app.id, this._getRenderedUrl(), this.props.userWidget, this._appFrame.current.contentWindow);
+            this.props.app.id,
+            this.props.app.url,
+            this._getRenderedUrl(),
+            this.props.userWidget,
+            this._appFrame.current.contentWindow,
+        );
         ActiveWidgetStore.setWidgetMessaging(this.props.app.id, widgetMessaging);
         widgetMessaging.getCapabilities().then((requestedCapabilities) => {
             console.log(`Widget ${this.props.app.id} requested capabilities: ` + requestedCapabilities);
@@ -454,7 +461,7 @@ export default class AppTile extends React.Component {
 
             // We only tell Jitsi widgets that we're ready because they're realistically the only ones
             // using this custom extension to the widget API.
-            if (this.props.app.type === 'jitsi') {
+            if (WidgetType.JITSI.matches(this.props.app.type)) {
                 widgetMessaging.flagReadyToContinue();
             }
         }).catch((err) => {
@@ -559,15 +566,18 @@ export default class AppTile extends React.Component {
      * Replace the widget template variables in a url with their values
      *
      * @param {string} u The URL with template variables
+     * @param {string} widgetType The widget's type
      *
      * @returns {string} url with temlate variables replaced
      */
-    _templatedUrl(u) {
+    _templatedUrl(u, widgetType: string) {
+        const targetData = {};
+        if (WidgetType.JITSI.matches(widgetType)) {
+            targetData['domain'] = 'jitsi.riot.im'; // v1 jitsi widgets have this hardcoded
+        }
         const myUserId = MatrixClientPeg.get().credentials.userId;
         const myUser = MatrixClientPeg.get().getUser(myUserId);
-        const vars = Object.assign({
-            domain: "jitsi.riot.im", // v1 widgets have this hardcoded
-        }, this.props.app.data, {
+        const vars = Object.assign(targetData, this.props.app.data, {
             'matrix_user_id': myUserId,
             'matrix_room_id': this.props.room.roomId,
             'matrix_display_name': myUser ? myUser.displayName : myUserId,
@@ -597,25 +607,26 @@ export default class AppTile extends React.Component {
     _getRenderedUrl() {
         let url;
 
-        if (this.props.app.type === 'jitsi') {
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
             console.log("Replacing Jitsi widget URL with local wrapper");
             url = WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: true});
             url = this._addWurlParams(url);
         } else {
             url = this._getSafeUrl(this.state.widgetUrl);
         }
-        return this._templatedUrl(url);
+        return this._templatedUrl(url, this.props.app.type);
     }
 
     _getPopoutUrl() {
-        if (this.props.app.type === 'jitsi') {
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
             return this._templatedUrl(
                 WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: false}),
+                this.props.app.type,
             );
         } else {
             // use app.url, not state.widgetUrl, because we want the one without
             // the wURL params for the popped-out version.
-            return this._templatedUrl(this._getSafeUrl(this.props.app.url));
+            return this._templatedUrl(this._getSafeUrl(this.props.app.url), this.props.app.type);
         }
     }
 
@@ -629,7 +640,10 @@ export default class AppTile extends React.Component {
         if (ALLOWED_APP_URL_SCHEMES.includes(parsedWidgetUrl.protocol)) {
             safeWidgetUrl = url.format(parsedWidgetUrl);
         }
-        return safeWidgetUrl;
+
+        // Replace all the dollar signs back to dollar signs as they don't affect HTTP at all.
+        // We also need the dollar signs in-tact for variable substitution.
+        return safeWidgetUrl.replace(/%24/g, '$');
     }
 
     _getTileTitle() {

src/components/views/elements/DNDTagTile.js

@@ -19,8 +19,22 @@ import TagTile from './TagTile';
 
 import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
+import { ContextMenu, toRightOf, useContextMenu } from "../../structures/ContextMenu";
+import * as sdk from '../../../index';
 
 export default function DNDTagTile(props) {
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu = null;
+    if (menuDisplayed && handle.current) {
+        const elementRect = handle.current.getBoundingClientRect();
+        const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
+        contextMenu = (
+            <ContextMenu {...toRightOf(elementRect)} onFinished={closeMenu}>
+                <TagTileContextMenu tag={props.tag} onFinished={closeMenu} />
+            </ContextMenu>
+        );
+    }
     return <div>
         <Draggable
             key={props.tag}
@@ -28,18 +42,21 @@ export default function DNDTagTile(props) {
             index={props.index}
             type="draggable-TagTile"
         >
-            { (provided, snapshot) => (
-                <div>
-                    <div
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                    >
-                        <TagTile {...props} />
-                    </div>
-                    { provided.placeholder }
+            {(provided, snapshot) => (
+                <div
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                >
+                    <TagTile
+                        {...props}
+                        contextMenuButtonRef={handle}
+                        menuDisplayed={menuDisplayed}
+                        openMenu={openMenu}
+                    />
                 </div>
-            ) }
+            )}
         </Draggable>
+        {contextMenu}
     </div>;
 }

src/components/views/elements/Draggable.tsx

@@ -0,0 +1,84 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+interface IProps {
+    className: string,
+    dragFunc: (currentLocation: ILocationState, event: MouseEvent) => ILocationState,
+    onMouseUp: (event: MouseEvent) => void,
+}
+
+interface IState {
+    onMouseMove: (event: MouseEvent) => void,
+    onMouseUp: (event: MouseEvent) => void,
+    location: ILocationState,
+}
+
+export interface ILocationState {
+    currentX: number,
+    currentY: number,
+}
+
+export default class Draggable extends React.Component<IProps, IState> {
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            onMouseMove: this.onMouseMove.bind(this),
+            onMouseUp: this.onMouseUp.bind(this),
+            location: {
+                currentX: 0,
+                currentY: 0,
+            },
+        };
+    }
+
+    private onMouseDown = (event: MouseEvent): void => {
+        this.setState({
+            location: {
+                currentX: event.clientX,
+                currentY: event.clientY,
+            },
+        });
+
+        document.addEventListener("mousemove", this.state.onMouseMove);
+        document.addEventListener("mouseup", this.state.onMouseUp);
+        console.log("Mouse down")
+    }
+
+    private onMouseUp = (event: MouseEvent): void => {
+        document.removeEventListener("mousemove", this.state.onMouseMove);
+        document.removeEventListener("mouseup", this.state.onMouseUp);
+        this.props.onMouseUp(event);
+        console.log("Mouse up")
+    }
+
+    private onMouseMove(event: MouseEvent): void {
+        console.log("Mouse Move")
+        const newLocation = this.props.dragFunc(this.state.location, event);
+
+        this.setState({
+            location: newLocation,
+        });
+    }
+
+    render() {
+        return <div className={this.props.className} onMouseDown={this.onMouseDown.bind(this)} />
+    }
+
+}

src/components/views/elements/EventListSummary.js

@@ -66,12 +66,12 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
     }
 
     return (
-        <div className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+        <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
             <AccessibleButton className="mx_EventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
                 { expanded ? _t('collapse') : _t('expand') }
             </AccessibleButton>
             { body }
-        </div>
+        </li>
     );
 };
 
@@ -90,7 +90,7 @@ EventListSummary.propTypes = {
     // The list of room members for which to show avatars next to the summary
     summaryMembers: PropTypes.arrayOf(PropTypes.instanceOf(RoomMember)),
     // The text to show as the summary of this event list
-    summaryText: PropTypes.string.isRequired,
+    summaryText: PropTypes.string,
 };
 
 export default EventListSummary;

src/components/views/elements/Flair.js

@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import FlairStore from '../../../stores/FlairStore';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -0,0 +1,88 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import Draggable, {ILocationState} from './Draggable';
+
+interface IProps {
+    // Current room
+    roomId: string,
+    minWidth: number,
+    maxWidth: number,
+};
+
+interface IState {
+    width: number,
+    IRCLayoutRoot: HTMLElement,
+};
+
+export default class IRCTimelineProfileResizer extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            width: SettingsStore.getValue("ircDisplayNameWidth", this.props.roomId),
+            IRCLayoutRoot: null,
+        }
+    };
+
+    componentDidMount() {
+        this.setState({
+            IRCLayoutRoot: document.querySelector(".mx_IRCLayout") as HTMLElement,
+        }, () => this.updateCSSWidth(this.state.width))
+    }
+
+    private dragFunc = (location: ILocationState, event: React.MouseEvent<Element, MouseEvent>): ILocationState => {
+        const offset = event.clientX - location.currentX;
+        const newWidth = this.state.width + offset;
+
+        console.log({offset})
+        // If we're trying to go smaller than min width, don't.
+        if (newWidth < this.props.minWidth) {
+            return location;
+        }
+
+        if (newWidth > this.props.maxWidth) {
+            return location;
+        }
+
+        this.setState({
+            width: newWidth,
+        });
+
+        this.updateCSSWidth.bind(this)(newWidth);
+
+        return {
+            currentX: event.clientX,
+            currentY: location.currentY,
+        }
+    }
+
+    private updateCSSWidth(newWidth: number) {
+        this.state.IRCLayoutRoot.style.setProperty("--name-width", newWidth + "px");
+    }
+
+    private onMoueUp(event: MouseEvent) {
+        if (this.props.roomId) {
+            SettingsStore.setValue("ircDisplayNameWidth", this.props.roomId, SettingLevel.ROOM_DEVICE, this.state.width);
+        }
+    }
+
+    render() {
+        return <Draggable className="mx_ProfileResizer" dragFunc={this.dragFunc.bind(this)} onMouseUp={this.onMoueUp.bind(this)}/>
+    }
+};

src/components/views/elements/ImageView.js

@@ -73,6 +73,7 @@ export default class ImageView extends React.Component {
         Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
             onFinished: (proceed) => {
                 if (!proceed) return;
+                this.props.onFinished();
                 MatrixClientPeg.get().redactEvent(
                     this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(),
                 ).catch(function(e) {

src/components/views/elements/LabelledToggleSwitch.js

@@ -35,6 +35,9 @@ export default class LabelledToggleSwitch extends React.Component {
         // True to put the toggle in front of the label
         // Default false.
         toggleInFront: PropTypes.bool,
+
+        // Additional class names to append to the switch. Optional.
+        className: PropTypes.string,
     };
 
     render() {
@@ -50,8 +53,9 @@ export default class LabelledToggleSwitch extends React.Component {
             secondPart = temp;
         }
 
+        const classes = `mx_SettingsFlag ${this.props.className || ""}`;
         return (
-            <div className="mx_SettingsFlag">
+            <div className={classes}>
                 {firstPart}
                 {secondPart}
             </div>

src/components/views/elements/LanguageDropdown.js

@@ -114,6 +114,7 @@ export default class LanguageDropdown extends React.Component {
             searchEnabled={true}
             value={value}
             label={_t("Language Dropdown")}
+            disabled={this.props.disabled}
         >
             { options }
         </Dropdown>;

src/components/views/elements/PersistedElement.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 
 import ResizeObserver from 'resize-observer-polyfill';
 
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -156,16 +156,70 @@ export default class PersistedElement extends React.Component {
         child.style.display = visible ? 'block' : 'none';
     }
 
+    /*
+     * Clip element bounding rectangle to that of the parent elements.
+     * This is not a full visibility check, but prevents the persisted
+     * element from overflowing parent containers when inside a scrolled
+     * area.
+     */
+    _getClippedBoundingClientRect(element) {
+        let parentElement = element.parentElement;
+        let rect = element.getBoundingClientRect();
+
+        rect = new DOMRect(rect.left, rect.top, rect.width, rect.height);
+
+        while (parentElement) {
+            const parentRect = parentElement.getBoundingClientRect();
+
+            if (parentRect.left > rect.left) {
+                rect.width = rect.width - (parentRect.left - rect.left);
+                rect.x = parentRect.x;
+            }
+
+            if (parentRect.top > rect.top) {
+                rect.height = rect.height - (parentRect.top - rect.top);
+                rect.y = parentRect.y;
+            }
+
+            if (parentRect.right < rect.right) {
+                rect.width = rect.width - (rect.right - parentRect.right);
+            }
+
+            if (parentRect.bottom < rect.bottom) {
+                rect.height = rect.height - (rect.bottom - parentRect.bottom);
+            }
+
+            parentElement = parentElement.parentElement;
+        }
+
+        if (rect.width < 0) rect.width = 0;
+        if (rect.height < 0) rect.height = 0;
+
+        return rect;
+    }
+
     updateChildPosition(child, parent) {
         if (!child || !parent) return;
 
         const parentRect = parent.getBoundingClientRect();
+        const clipRect = this._getClippedBoundingClientRect(parent);
+
+        Object.assign(child.parentElement.style, {
+            position: 'absolute',
+            top: clipRect.top + 'px',
+            left: clipRect.left + 'px',
+            width: clipRect.width + 'px',
+            height: clipRect.height + 'px',
+            overflow: "hidden",
+        });
+
         Object.assign(child.style, {
             position: 'absolute',
-            top: parentRect.top + 'px',
-            left: parentRect.left + 'px',
+            top: (parentRect.top - clipRect.top) + 'px',
+            left: (parentRect.left - clipRect.left) + 'px',
             width: parentRect.width + 'px',
             height: parentRect.height + 'px',
+            overflow: "hidden",
         });
     }
 

src/components/views/elements/Pill.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import { Room, RoomMember } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
@@ -26,6 +26,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import FlairStore from "../../../stores/FlairStore";
 import {getPrimaryPermalinkEntity} from "../../../utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {Action} from "../../../dispatcher/actions";
 
 // For URLs of matrix.to links in the timeline which have been reformatted by
 // HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
@@ -191,7 +192,7 @@ const Pill = createReactClass({
 
     onUserPillClicked: function() {
         dis.dispatch({
-            action: 'view_user',
+            action: Action.ViewUser,
             member: this.state.member,
         });
     },

src/components/views/elements/QRCode.tsx

@@ -0,0 +1,51 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import {toDataURL, QRCodeSegment, QRCodeToDataURLOptions} from "qrcode";
+import classNames from "classnames";
+
+import {_t} from "../../../languageHandler";
+import Spinner from "./Spinner";
+
+interface IProps extends QRCodeToDataURLOptions {
+    data: string | QRCodeSegment[];
+    className?: string;
+}
+
+const defaultOptions: QRCodeToDataURLOptions = {
+    errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
+};
+
+const QRCode: React.FC<IProps> = ({data, className, ...options}) => {
+    const [dataUri, setUri] = React.useState<string>(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        toDataURL(data, {...defaultOptions, ...options}).then(uri => {
+            if (cancelled) return;
+            setUri(uri);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [JSON.stringify(data), options]);
+
+    return <div className={classNames("mx_QRCode", className)}>
+        { dataUri ? <img src={dataUri} className="mx_VerificationQRCode" alt={_t("QR Code")} /> : <Spinner /> }
+    </div>;
+};
+
+export default QRCode;

src/components/views/elements/ReplyThread.js

@@ -19,7 +19,7 @@ import React from 'react';
 import * as sdk from '../../../index';
 import {_t} from '../../../languageHandler';
 import PropTypes from 'prop-types';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import {MatrixEvent} from 'matrix-js-sdk';
 import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -37,6 +37,8 @@ export default class ReplyThread extends React.Component {
         // called when the ReplyThread contents has changed, including EventTiles thereof
         onHeightChanged: PropTypes.func.isRequired,
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
+        // Specifies which layout to use.
+        useIRCLayout: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -176,12 +178,17 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) {
         if (!ReplyThread.getParentEventId(parentEv)) {
-            return <div />;
+            return <div className="mx_ReplyThread_wrapper_empty" />;
         }
-        return <ReplyThread parentEv={parentEv} onHeightChanged={onHeightChanged}
-            ref={ref} permalinkCreator={permalinkCreator} />;
+        return <ReplyThread
+            parentEv={parentEv}
+            onHeightChanged={onHeightChanged}
+            ref={ref}
+            permalinkCreator={permalinkCreator}
+            useIRCLayout={useIRCLayout}
+        />;
     }
 
     componentDidMount() {
@@ -326,7 +333,9 @@ export default class ReplyThread extends React.Component {
                     onHeightChanged={this.props.onHeightChanged}
                     permalinkCreator={this.props.permalinkCreator}
                     isRedacted={ev.isRedacted()}
-                    isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
+                    isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
+                    useIRCLayout={this.props.useIRCLayout}
+                />
             </blockquote>;
         });
 

src/components/views/elements/SSOButton.js

@@ -21,9 +21,9 @@ import PlatformPeg from "../../../PlatformPeg";
 import AccessibleButton from "./AccessibleButton";
 import {_t} from "../../../languageHandler";
 
-const SSOButton = ({matrixClient, loginType, ...props}) => {
+const SSOButton = ({matrixClient, loginType, fragmentAfterLogin, ...props}) => {
     const onClick = () => {
-        PlatformPeg.get().startSingleSignOn(matrixClient, loginType);
+        PlatformPeg.get().startSingleSignOn(matrixClient, loginType, fragmentAfterLogin);
     };
 
     return (
@@ -36,6 +36,7 @@ const SSOButton = ({matrixClient, loginType, ...props}) => {
 SSOButton.propTypes = {
     matrixClient: PropTypes.object.isRequired, // does not use context as may use a temporary client
     loginType: PropTypes.oneOf(["sso", "cas"]), // defaults to "sso" in base-apis
+    fragmentAfterLogin: PropTypes.string,
 };
 
 export default SSOButton;

src/components/views/elements/Slider.tsx

@@ -0,0 +1,146 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from 'react';
+
+interface IProps {
+    // A callback for the selected value
+    onSelectionChange: (value: number) => void;
+
+    // The current value of the slider
+    value: number;
+
+    // The range and values of the slider
+    // Currently only supports an ascending, constant interval range
+    values: number[];
+
+    // A function for formatting the the values
+    displayFunc: (value: number) => string;
+
+    // Whether the slider is disabled
+    disabled: boolean;
+}
+
+export default class Slider extends React.Component<IProps> {
+    // offset is a terrible inverse approximation.
+    // if the values represents some function f(x) = y where x is the
+    // index of the array and y = values[x] then offset(f, y) = x
+    // s.t f(x) = y.
+    // it assumes a monotonic function and interpolates linearly between
+    // y values.
+    // Offset is used for finding the location of a value on a
+    // non linear slider.
+    private offset(values: number[], value: number): number {
+        // the index of the first number greater than value.
+        let closest = values.reduce((prev, curr) => {
+            return (value > curr ? prev + 1 : prev);
+        }, 0);
+
+        // Off the left
+        if (closest === 0) {
+            return 0;
+        }
+
+        // Off the right
+        if (closest === values.length) {
+            return 100;
+        }
+
+        // Now
+        const closestLessValue = values[closest - 1];
+        const closestGreaterValue = values[closest];
+
+        const intervalWidth = 1 / (values.length - 1);
+
+        const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue)
+
+        return 100 * (closest - 1 + linearInterpolation) * intervalWidth
+
+    }
+
+    render(): React.ReactNode {
+        const dots = this.props.values.map(v =>
+            <Dot active={v <= this.props.value}
+                 label={this.props.displayFunc(v)}
+                 onClick={this.props.disabled ? () => {} : () => this.props.onSelectionChange(v)}
+                 key={v}
+                 disabled={this.props.disabled}
+            />);
+
+        let selection = null;
+
+        if (!this.props.disabled) {
+            const offset = this.offset(this.props.values, this.props.value);
+            selection = <div className="mx_Slider_selection">
+                <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55em + " + offset + "%)"}} />
+                <hr style={{width: offset + "%"}} />
+            </div>
+        }
+
+        return <div className="mx_Slider">
+            <div>
+                <div className="mx_Slider_bar">
+                    <hr onClick={this.props.disabled ? () => {} : this.onClick.bind(this)}/>
+                    { selection }
+                </div>
+                <div className="mx_Slider_dotContainer">
+                    {dots}
+                </div>
+            </div>
+        </div>;
+    }
+
+    onClick(event: React.MouseEvent) {
+        const width = (event.target as HTMLElement).clientWidth;
+        // nativeEvent is safe to use because https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX
+        // is supported by all modern browsers
+        const relativeClick = (event.nativeEvent.offsetX / width);
+        const nearestValue = this.props.values[Math.round(relativeClick * (this.props.values.length - 1))];
+        this.props.onSelectionChange(nearestValue);
+    }
+}
+
+interface IDotProps {
+    // Callback for behavior onclick
+    onClick: () => void,
+
+    // Whether the dot should appear active
+    active: boolean,
+
+    // The label on the dot
+    label: string,
+
+    // Whether the slider is disabled
+    disabled: boolean;
+}
+
+class Dot extends React.PureComponent<IDotProps> {
+    render(): React.ReactNode {
+        let className = "mx_Slider_dot"
+        if (!this.props.disabled && this.props.active) {
+            className += " mx_Slider_dotActive";
+        }
+
+        return <span onClick={this.props.onClick} className="mx_Slider_dotValue">
+            <div className={className} />
+            <div className="mx_Slider_labelContainer">
+                <div className="mx_Slider_label">
+                    {this.props.label}
+                </div>
+            </div>
+        </span>;
+    }
+}

src/components/views/elements/TagTile.js

@@ -16,19 +16,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 
 import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
 import TagOrderStore from '../../../stores/TagOrderStore';
-import {ContextMenu, toRightOf} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
@@ -43,6 +42,9 @@ export default createReactClass({
         // A string tag such as "m.favourite" or a group ID such as "+groupid:domain.bla"
         // For now, only group IDs are handled.
         tag: PropTypes.string,
+        contextMenuButtonRef: PropTypes.object,
+        openMenu: PropTypes.func,
+        menuDisplayed: PropTypes.bool,
     },
 
     statics: {
@@ -55,14 +57,10 @@ export default createReactClass({
             hover: false,
             // The profile data of the group if this.props.tag is a group ID
             profile: null,
-            // Whether or not the context menu is open
-            menuDisplayed: false,
         };
     },
 
     componentDidMount() {
-        this._contextMenuButton = createRef();
-
         this.unmounted = false;
         if (this.props.tag[0] === '+') {
             FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated);
@@ -86,7 +84,7 @@ export default createReactClass({
             this.props.tag,
         ).then((profile) => {
             if (this.unmounted) return;
-            this.setState({profile});
+            this.setState({ profile });
         }).catch((err) => {
             console.warn('Could not fetch group profile for ' + this.props.tag, err);
         });
@@ -113,28 +111,19 @@ export default createReactClass({
     },
 
     onMouseOver: function() {
-        this.setState({hover: true});
+        this.setState({ hover: true });
     },
 
     onMouseOut: function() {
-        this.setState({hover: false});
+        this.setState({ hover: false });
     },
 
     openMenu: function(e) {
         // Prevent the TagTile onClick event firing as well
         e.stopPropagation();
         e.preventDefault();
-
-        this.setState({
-            menuDisplayed: true,
-            hover: false,
-        });
-    },
-
-    closeMenu: function() {
-        this.setState({
-            menuDisplayed: false,
-        });
+        this.setState({ hover: false });
+        this.props.openMenu();
     },
 
     render: function() {
@@ -154,7 +143,7 @@ export default createReactClass({
 
         const badge = TagOrderStore.getGroupBadge(this.props.tag);
         let badgeElement;
-        if (badge && !this.state.hover) {
+        if (badge && !this.state.hover && !this.props.menuDisplayed) {
             const badgeClasses = classNames({
                 "mx_TagTile_badge": true,
                 "mx_TagTile_badgeHighlight": badge.highlight,
@@ -163,39 +152,34 @@ export default createReactClass({
         }
 
         // FIXME: this ought to use AccessibleButton for a11y but that causes onMouseOut/onMouseOver to fire too much
-        const contextButton = this.state.hover || this.state.menuDisplayed ?
-            <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this._contextMenuButton}>
-                { "\u00B7\u00B7\u00B7" }
-            </div> : <div ref={this._contextMenuButton} />;
-
-        let contextMenu;
-        if (this.state.menuDisplayed) {
-            const elementRect = this._contextMenuButton.current.getBoundingClientRect();
-            const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
-            contextMenu = (
-                <ContextMenu {...toRightOf(elementRect)} onFinished={this.closeMenu}>
-                    <TagTileContextMenu tag={this.props.tag} onFinished={this.closeMenu} />
-                </ContextMenu>
-            );
-        }
+        const contextButton = this.state.hover || this.props.menuDisplayed ?
+            <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this.props.contextMenuButtonRef}>
+                {"\u00B7\u00B7\u00B7"}
+            </div> : <div ref={this.props.contextMenuButtonRef} />;
 
         const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
-        return <React.Fragment>
-            <AccessibleTooltipButton className={className} onClick={this.onClick} onContextMenu={this.openMenu} title={name}>
-                <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
-                    <BaseAvatar
-                        name={name}
-                        idName={this.props.tag}
-                        url={httpUrl}
-                        width={avatarHeight}
-                        height={avatarHeight}
-                    />
-                    { contextButton }
-                    { badgeElement }
-                </div>
-            </AccessibleTooltipButton>
 
-            { contextMenu }
-        </React.Fragment>;
+        return <AccessibleTooltipButton
+            className={className}
+            onClick={this.onClick}
+            onContextMenu={this.openMenu}
+            title={name}
+        >
+            <div
+                className="mx_TagTile_avatar"
+                onMouseOver={this.onMouseOver}
+                onMouseOut={this.onMouseOut}
+            >
+                <BaseAvatar
+                    name={name}
+                    idName={this.props.tag}
+                    url={httpUrl}
+                    width={avatarHeight}
+                    height={avatarHeight}
+                />
+                {contextButton}
+                {badgeElement}
+            </div>
+        </AccessibleTooltipButton>;
     },
 });

src/components/views/elements/Tooltip.js

@@ -22,7 +22,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
 
 const MIN_TOOLTIP_HEIGHT = 25;

src/components/views/elements/Validation.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,11 +16,39 @@ limitations under the License.
 */
 
 /* eslint-disable babel/no-invalid-this */
+import React from "react";
+import classNames from "classnames";
 
-import classNames from 'classnames';
+type Data = Pick<IFieldState, "value" | "allowEmpty">;
+
+interface IRule<T> {
+    key: string;
+    final?: boolean;
+    skip?(this: T, data: Data): boolean;
+    test(this: T, data: Data): boolean | Promise<boolean>;
+    valid?(this: T): string;
+    invalid?(this: T): string;
+}
+
+interface IArgs<T> {
+    rules: IRule<T>[];
+    description(this: T): React.ReactChild;
+}
+
+export interface IFieldState {
+    value: string;
+    focused: boolean;
+    allowEmpty: boolean;
+}
+
+export interface IValidationResult {
+    valid?: boolean;
+    feedback?: React.ReactChild;
+}
 
 /**
  * Creates a validation function from a set of rules describing what to validate.
+ * Generic T is the "this" type passed to the rule methods
  *
  * @param {Function} description
  *     Function that returns a string summary of the kind of value that will
@@ -37,8 +66,8 @@ import classNames from 'classnames';
  *     A validation function that takes in the current input value and returns
  *     the overall validity and a feedback UI that can be rendered for more detail.
  */
-export default function withValidation({ description, rules }) {
-    return async function onValidate({ value, focused, allowEmpty = true }) {
+export default function withValidation<T = undefined>({ description, rules }: IArgs<T>) {
+    return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise<IValidationResult> {
         if (!value && allowEmpty) {
             return {
                 valid: null,

src/components/views/elements/crypto/VerificationQRCode.js

@@ -17,8 +17,7 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import {replaceableComponent} from "../../../../utils/replaceableComponent";
-import Spinner from "../Spinner";
-import * as QRCode from "qrcode";
+import QRCode from "../QRCode";
 
 @replaceableComponent("views.elements.crypto.VerificationQRCode")
 export default class VerificationQRCode extends React.PureComponent {
@@ -26,33 +25,12 @@ export default class VerificationQRCode extends React.PureComponent {
         qrCodeData: PropTypes.object.isRequired,
     };
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            dataUri: null,
-        };
-        this.generateQrCode();
-    }
-
-    componentDidUpdate(prevProps): void {
-        if (JSON.stringify(this.props) === JSON.stringify(prevProps)) return; // No prop change
-
-        this.generateQRCode();
-    }
-
-    async generateQrCode() {
-        // Now actually assemble the QR code's data URI
-        const uri = await QRCode.toDataURL([{data: this.props.qrCodeData.buffer, mode: 'byte'}], {
-            errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
-        });
-        this.setState({dataUri: uri});
-    }
-
     render() {
-        if (!this.state.dataUri) {
-            return <div className='mx_VerificationQRCode'><Spinner /></div>;
-        }
-
-        return <img src={this.state.dataUri} className='mx_VerificationQRCode' />;
+        return (
+            <QRCode
+                data={[{data: this.props.qrCodeData.buffer, mode: 'byte'}]}
+                className="mx_VerificationQRCode"
+                width={196} />
+        );
     }
 }

src/components/views/globals/CookieBar.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';

src/components/views/groups/GroupInviteTile.js

@@ -20,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import {_t} from '../../../languageHandler';
 import classNames from 'classnames';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";

src/components/views/groups/GroupMemberInfo.js

@@ -19,7 +19,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -28,6 +28,7 @@ import GroupStore from '../../../stores/GroupStore';
 import AccessibleButton from '../elements/AccessibleButton';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import {Action} from "../../../dispatcher/actions";
 
 export default createReactClass({
     displayName: 'GroupMemberInfo',
@@ -103,7 +104,7 @@ export default createReactClass({
                 ).then(() => {
                     // return to the user list
                     dis.dispatch({
-                        action: "view_user",
+                        action: Action.ViewUser,
                         member: null,
                     });
                 }).catch((e) => {
@@ -124,7 +125,7 @@ export default createReactClass({
     _onCancel: function(e) {
         // Go back to the user list
         dis.dispatch({
-            action: "view_user",
+            action: Action.ViewUser,
             member: null,
         });
     },

src/components/views/groups/GroupMemberList.js

@@ -19,7 +19,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
 import { showGroupInviteDialog } from '../../../GroupAddressPicker';

src/components/views/groups/GroupMemberTile.js

@@ -20,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { GroupMemberType } from '../../../groups';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 

src/components/views/groups/GroupRoomInfo.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';

src/components/views/groups/GroupRoomTile.js

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { GroupRoomType } from '../../../groups';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 

src/components/views/groups/GroupTile.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import FlairStore from '../../../stores/FlairStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 

src/components/views/messages/EditHistoryMessage.js

@@ -26,6 +26,7 @@ import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import classNames from 'classnames';
+import RedactedBody from "./RedactedBody";
 
 function getReplacedContent(event) {
     const originalContent = event.getOriginalContent();
@@ -132,8 +133,7 @@ export default class EditHistoryMessage extends React.PureComponent {
         const content = getReplacedContent(mxEvent);
         let contentContainer;
         if (mxEvent.isRedacted()) {
-            const UnknownBody = sdk.getComponent('messages.UnknownBody');
-            contentContainer = <UnknownBody mxEvent={this.props.mxEvent} />;
+            contentContainer = <RedactedBody mxEvent={this.props.mxEvent} />;
         } else {
             let contentElements;
             if (this.props.previousEdit) {
@@ -158,7 +158,6 @@ export default class EditHistoryMessage extends React.PureComponent {
         const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.state.sendStatus) !== -1);
         const classes = classNames({
             "mx_EventTile": true,
-            "mx_EventTile_redacted": mxEvent.isRedacted(),
             "mx_EventTile_sending": isSending,
             "mx_EventTile_notSent": this.state.sendStatus === 'not_sent',
         });

src/components/views/messages/MKeyVerificationRequest.js

@@ -21,7 +21,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {getNameForEventRoom, userLabelForEventRoom}
     from '../../../utils/KeyVerificationStateObserver';
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
 
 export default class MKeyVerificationRequest extends React.Component {

src/components/views/messages/MessageActionBar.js

@@ -21,11 +21,12 @@ import PropTypes from 'prop-types';
 
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from '../../structures/ContextMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 import RoomContext from "../../../contexts/RoomContext";
+import SettingsStore from '../../../settings/SettingsStore';
 
 const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange}) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
@@ -48,7 +49,7 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
         };
 
         let e2eInfoCallback = null;
-        if (mxEvent.isEncrypted()) {
+        if (mxEvent.isEncrypted() && !SettingsStore.getValue("feature_cross_signing")) {
             e2eInfoCallback = onCryptoClick;
         }
 

src/components/views/messages/MessageEvent.js

@@ -20,6 +20,8 @@ import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import SettingsStore from "../../../settings/SettingsStore";
 import {Mjolnir} from "../../../mjolnir/Mjolnir";
+import RedactedBody from "./RedactedBody";
+import UnknownBody from "./UnknownBody";
 
 export default createReactClass({
     displayName: 'MessageEvent',
@@ -64,8 +66,6 @@ export default createReactClass({
     },
 
     render: function() {
-        const UnknownBody = sdk.getComponent('messages.UnknownBody');
-
         const bodyTypes = {
             'm.text': sdk.getComponent('messages.TextualBody'),
             'm.notice': sdk.getComponent('messages.TextualBody'),
@@ -84,7 +84,7 @@ export default createReactClass({
         const content = this.props.mxEvent.getContent();
         const type = this.props.mxEvent.getType();
         const msgtype = content.msgtype;
-        let BodyType = UnknownBody;
+        let BodyType = RedactedBody;
         if (!this.props.mxEvent.isRedacted()) {
             // only resolve BodyType if event is not redacted
             if (type && evTypes[type]) {
@@ -94,6 +94,9 @@ export default createReactClass({
             } else if (content.url) {
                 // Fallback to MFileBody if there's a content URL
                 BodyType = bodyTypes['m.file'];
+            } else {
+                // Fallback to UnknownBody otherwise if not redacted
+                BodyType = UnknownBody;
             }
         }
 

src/components/views/messages/RedactedBody.tsx

@@ -0,0 +1,46 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useContext} from "react";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { _t } from "../../../languageHandler";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
+    const cli: MatrixClient = useContext(MatrixClientContext);
+
+    let text = _t("Message deleted");
+    const unsigned = mxEvent.getUnsigned();
+    const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;
+    if (redactedBecauseUserId && redactedBecauseUserId !== mxEvent.getSender()) {
+        const room = cli.getRoom(mxEvent.getRoomId());
+        const sender = room && room.getMember(redactedBecauseUserId);
+        text = _t("Message deleted by %(name)s", { name: sender ? sender.name : redactedBecauseUserId });
+    }
+
+    return (
+        <span className="mx_RedactedBody" ref={ref}>
+            { text }
+        </span>
+    );
+});
+
+export default RedactedBody;

src/components/views/messages/RoomCreate.js

@@ -19,7 +19,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';

src/components/views/messages/SenderProfile.js

@@ -131,7 +131,9 @@ export default createReactClass({
 
         return (
             <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
-                { content }
+                <div className="mx_SenderProfile_hover">
+                    { content }
+                </div>
             </div>
         );
     },

src/components/views/messages/TextualBody.js

@@ -25,7 +25,7 @@ import * as HtmlUtils from '../../../HtmlUtils';
 import {formatDate} from '../../../DateUtils';
 import * as sdk from '../../../index';
 import Modal from '../../../Modal';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import * as ContextMenu from '../../structures/ContextMenu';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -34,6 +34,7 @@ import {pillifyLinks, unmountPills} from '../../../utils/pillify';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
 import {toRightOf} from "../../structures/ContextMenu";
+import {copyPlaintext} from "../../../utils/strings";
 
 export default createReactClass({
     displayName: 'TextualBody',
@@ -69,23 +70,6 @@ export default createReactClass({
         };
     },
 
-    copyToClipboard: function(text) {
-        const textArea = document.createElement("textarea");
-        textArea.value = text;
-        document.body.appendChild(textArea);
-        textArea.select();
-
-        let successful = false;
-        try {
-            successful = document.execCommand('copy');
-        } catch (err) {
-            console.log('Unable to copy');
-        }
-
-        document.body.removeChild(textArea);
-        return successful;
-    },
-
     // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._content = createRef();
@@ -277,17 +261,17 @@ export default createReactClass({
         Array.from(ReactDOM.findDOMNode(this).querySelectorAll('.mx_EventTile_body pre')).forEach((p) => {
             const button = document.createElement("span");
             button.className = "mx_EventTile_copyButton";
-            button.onclick = (e) => {
+            button.onclick = async () => {
                 const copyCode = button.parentNode.getElementsByTagName("pre")[0];
-                const successful = this.copyToClipboard(copyCode.textContent);
+                const successful = await copyPlaintext(copyCode.textContent);
 
-                const buttonRect = e.target.getBoundingClientRect();
+                const buttonRect = button.getBoundingClientRect();
                 const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
                 const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
                     ...toRightOf(buttonRect, 2),
                     message: successful ? _t('Copied!') : _t('Failed to copy'),
                 });
-                e.target.onmouseleave = close;
+                button.onmouseleave = close;
             };
 
             // Wrap a div around <pre> so that the copy button can be correctly positioned

src/components/views/messages/TileErrorBoundary.js

@@ -0,0 +1,72 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import classNames from 'classnames';
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+import Modal from '../../../Modal';
+
+export default class TileErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            error: null,
+        };
+    }
+
+    static getDerivedStateFromError(error) {
+        // Side effects are not permitted here, so we only update the state so
+        // that the next render shows an error message.
+        return { error };
+    }
+
+    _onBugReport = () => {
+        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
+        if (!BugReportDialog) {
+            return;
+        }
+        Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {
+            label: 'react-soft-crash-tile',
+        });
+    };
+
+    render() {
+        if (this.state.error) {
+            const { mxEvent } = this.props;
+            const classes = {
+                mx_EventTile: true,
+                mx_EventTile_info: true,
+                mx_EventTile_content: true,
+                mx_EventTile_tileError: true,
+            };
+            return (<div className={classNames(classes)}>
+                <div className="mx_EventTile_line">
+                    <span>
+                        {_t("Can't load this message")}
+                        { mxEvent && ` (${mxEvent.getType()})` }
+                        <a onClick={this._onBugReport} href="#">
+                            {_t("Submit logs")}
+                        </a>
+                    </span>
+                </div>
+            </div>);
+        }
+
+        return this.props.children;
+    }
+}

src/components/views/messages/UnknownBody.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,27 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
+import React from "react";
 
-export default createReactClass({
-    displayName: 'UnknownBody',
-
-    render: function() {
-        let tooltip = _t("Removed or unknown message type");
-        if (this.props.mxEvent.isRedacted()) {
-            const redactedBecauseUserId = this.props.mxEvent.getUnsigned().redacted_because.sender;
-            tooltip = redactedBecauseUserId ?
-                _t("Message removed by %(userId)s", { userId: redactedBecauseUserId }) :
-                _t("Message removed");
-        }
-
-        const text = this.props.mxEvent.getContent().body;
-        return (
-            <span className="mx_UnknownBody" title={tooltip}>
-                { text }
-            </span>
-        );
-    },
-});
+export default ({mxEvent}) => {
+    const text = mxEvent.getContent().body;
+    return (
+        <span className="mx_UnknownBody">
+            { text }
+        </span>
+    );
+};

src/components/views/right_panel/EncryptionPanel.js

@@ -22,7 +22,6 @@ import VerificationPanel from "./VerificationPanel";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ensureDMExists} from "../../../createRoom";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
-import {useAsyncMemo} from "../../../hooks/useAsyncMemo";
 import Modal from "../../../Modal";
 import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import * as sdk from "../../../index";
@@ -46,12 +45,6 @@ const EncryptionPanel = (props) => {
         }
     }, [verificationRequest]);
 
-    const deviceId = request && request.channel.deviceId;
-    const device = useAsyncMemo(() => {
-        const cli = MatrixClientPeg.get();
-        return cli.getStoredDevice(cli.getUserId(), deviceId);
-    }, [deviceId]);
-
     useEffect(() => {
         async function awaitPromise() {
             setRequesting(true);
@@ -147,7 +140,7 @@ const EncryptionPanel = (props) => {
                 key={request.channel.transactionId}
                 inDialog={layout === "dialog"}
                 phase={phase}
-                device={device} />
+            />
         </React.Fragment>);
     }
 };

src/components/views/right_panel/GroupHeaderButtons.js

@@ -23,6 +23,8 @@ import { _t } from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
 import HeaderButtons, {HEADER_KIND_GROUP} from './HeaderButtons';
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
+import {Action} from "../../../dispatcher/actions";
+import {ActionPayload} from "../../../dispatcher/payloads";
 
 const GROUP_PHASES = [
     RIGHT_PANEL_PHASES.GroupMemberInfo,
@@ -40,10 +42,10 @@ export default class GroupHeaderButtons extends HeaderButtons {
         this._onRoomsClicked = this._onRoomsClicked.bind(this);
     }
 
-    onAction(payload) {
+    onAction(payload: ActionPayload) {
         super.onAction(payload);
 
-        if (payload.action === "view_user") {
+        if (payload.action === Action.ViewUser) {
             if (payload.member) {
                 this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo, {member: payload.member});
             } else {

src/components/views/right_panel/HeaderButtons.js

@@ -19,7 +19,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import RightPanelStore from "../../../stores/RightPanelStore";
 
 export const HEADER_KIND_ROOM = "room";

src/components/views/right_panel/RoomHeaderButtons.js

@@ -23,6 +23,8 @@ import { _t } from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
 import HeaderButtons, {HEADER_KIND_ROOM} from './HeaderButtons';
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
+import {Action} from "../../../dispatcher/actions";
+import {ActionPayload} from "../../../dispatcher/payloads";
 
 const MEMBER_PHASES = [
     RIGHT_PANEL_PHASES.RoomMemberList,
@@ -39,9 +41,9 @@ export default class RoomHeaderButtons extends HeaderButtons {
         this._onNotificationsClicked = this._onNotificationsClicked.bind(this);
     }
 
-    onAction(payload) {
+    onAction(payload: ActionPayload) {
         super.onAction(payload);
-        if (payload.action === "view_user") {
+        if (payload.action === Action.ViewUser) {
             if (payload.member) {
                 this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo, {member: payload.member});
             } else {

src/components/views/right_panel/UserInfo.js

@@ -21,7 +21,7 @@ import React, {useCallback, useMemo, useState, useEffect, useContext} from 'reac
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {Group, RoomMember, User} from 'matrix-js-sdk';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -44,6 +44,7 @@ import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
 import EncryptionPanel from "./EncryptionPanel";
 import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
 import { verifyUser, legacyVerifyUser, verifyDevice } from '../../../verification';
+import {Action} from "../../../dispatcher/actions";
 
 const _disambiguateDevices = (devices) => {
     const names = Object.create(null);
@@ -63,7 +64,7 @@ const _disambiguateDevices = (devices) => {
 };
 
 export const getE2EStatus = (cli, userId, devices) => {
-    if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+    if (!SettingsStore.getValue("feature_cross_signing")) {
         const hasUnverifiedDevice = devices.some((device) => device.isUnverified());
         return hasUnverifiedDevice ? "warning" : "verified";
     }
@@ -111,7 +112,7 @@ async function openDMForUser(matrixClient, userId) {
         dmUserId: userId,
     };
 
-    if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+    if (SettingsStore.getValue("feature_cross_signing")) {
         // Check whether all users have uploaded device keys before.
         // If so, enable encryption in the new room.
         const usersToDevicesMap = await matrixClient.downloadKeys([userId]);
@@ -142,7 +143,7 @@ function useIsEncrypted(cli, room) {
 function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
     return useAsyncMemo(async () => {
         if (!canVerify) {
-            return false;
+            return undefined;
         }
         setUpdating(true);
         try {
@@ -153,7 +154,7 @@ function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
         } finally {
             setUpdating(false);
         }
-    }, [cli, member, canVerify], false);
+    }, [cli, member, canVerify], undefined);
 }
 
 function DeviceItem({userId, device}) {
@@ -166,7 +167,7 @@ function DeviceItem({userId, device}) {
     // cross-signing so that other users can then safely trust you.
     // For other people's devices, the more general verified check that
     // includes locally verified devices can be used.
-    const isVerified = (isMe && SettingsStore.isFeatureEnabled("feature_cross_signing")) ?
+    const isVerified = (isMe && SettingsStore.getValue("feature_cross_signing")) ?
         deviceTrust.isCrossSigningVerified() :
         deviceTrust.isVerified();
 
@@ -181,9 +182,7 @@ function DeviceItem({userId, device}) {
     });
 
     const onDeviceClick = () => {
-        if (!isVerified) {
-            verifyDevice(cli.getUser(userId), device);
-        }
+        verifyDevice(cli.getUser(userId), device);
     };
 
     const deviceName = device.ambiguous ?
@@ -191,17 +190,29 @@ function DeviceItem({userId, device}) {
             device.getDisplayName();
     let trustedLabel = null;
     if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
-    return (
-        <AccessibleButton
-            className={classes}
-            title={device.deviceId}
-            onClick={onDeviceClick}
-        >
-            <div className={iconClasses} />
-            <div className="mx_UserInfo_device_name">{deviceName}</div>
-            <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
-        </AccessibleButton>
-    );
+
+
+    if (isVerified) {
+        return (
+            <div className={classes} title={device.deviceId} >
+                <div className={iconClasses} />
+                <div className="mx_UserInfo_device_name">{deviceName}</div>
+                <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
+            </div>
+        );
+    } else {
+        return (
+            <AccessibleButton
+                className={classes}
+                title={device.deviceId}
+                onClick={onDeviceClick}
+            >
+                <div className={iconClasses} />
+                <div className="mx_UserInfo_device_name">{deviceName}</div>
+                <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
+            </AccessibleButton>
+        );
+    }
 }
 
 function DevicesSection({devices, userId, loading}) {
@@ -237,7 +248,7 @@ function DevicesSection({devices, userId, loading}) {
             // cross-signing so that other users can then safely trust you.
             // For other people's devices, the more general verified check that
             // includes locally verified devices can be used.
-            const isVerified = (isMe && SettingsStore.isFeatureEnabled("feature_cross_signing")) ?
+            const isVerified = (isMe && SettingsStore.getValue("feature_cross_signing")) ?
                 deviceTrust.isCrossSigningVerified() :
                 deviceTrust.isVerified();
 
@@ -547,7 +558,7 @@ const RedactMessagesButton = ({member}) => {
         let eventsToRedact = [];
         while (timeline) {
             eventsToRedact = timeline.getEvents().reduce((events, event) => {
-                if (event.getSender() === userId && !event.isRedacted()) {
+                if (event.getSender() === userId && !event.isRedacted() && !event.isRedaction()) {
                     return events.concat(event);
                 } else {
                     return events;
@@ -831,7 +842,7 @@ const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating,
             cli.removeUserFromGroup(groupId, groupMember.userId).then(() => {
                 // return to the user list
                 dis.dispatch({
-                    action: "view_user",
+                    action: Action.ViewUser,
                     member: null,
                 });
             }).catch((e) => {
@@ -1100,7 +1111,7 @@ export const useDevices = (userId) => {
         async function _downloadDeviceList() {
             try {
                 await cli.downloadKeys([userId], true);
-                const devices = await cli.getStoredDevicesForUser(userId);
+                const devices = cli.getStoredDevicesForUser(userId);
 
                 if (cancelled) {
                     // we got cancelled - presumably a different user now
@@ -1125,7 +1136,7 @@ export const useDevices = (userId) => {
     useEffect(() => {
         let cancel = false;
         const updateDevices = async () => {
-            const newDevices = await cli.getStoredDevicesForUser(userId);
+            const newDevices = cli.getStoredDevicesForUser(userId);
             if (cancel) return;
             setDevices(newDevices);
         };
@@ -1298,7 +1309,7 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const userTrust = cli.checkUserTrust(member.userId);
     const userVerified = userTrust.isCrossSigningVerified();
     const isMe = member.userId === cli.getUserId();
-    const canVerify = SettingsStore.isFeatureEnabled("feature_cross_signing") &&
+    const canVerify = SettingsStore.getValue("feature_cross_signing") &&
                         homeserverSupportsCrossSigning && !userVerified && !isMe;
 
     const setUpdating = (updating) => {
@@ -1307,18 +1318,28 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const hasCrossSigningKeys =
         useHasCrossSigningKeys(cli, member, canVerify, setUpdating );
 
+    const showDeviceListSpinner = devices === undefined;
     if (canVerify) {
-        verifyButton = (
-            <AccessibleButton className="mx_UserInfo_field" onClick={() => {
-                if (hasCrossSigningKeys) {
-                    verifyUser(member);
-                } else {
-                    legacyVerifyUser(member);
-                }
-            }}>
-                {_t("Verify")}
-            </AccessibleButton>
-        );
+        if (hasCrossSigningKeys !== undefined) {
+            // Note: mx_UserInfo_verifyButton is for the end-to-end tests
+            verifyButton = (
+                <AccessibleButton className="mx_UserInfo_field mx_UserInfo_verifyButton" onClick={() => {
+                    if (hasCrossSigningKeys) {
+                        verifyUser(member);
+                    } else {
+                        legacyVerifyUser(member);
+                    }
+                }}>
+                    {_t("Verify")}
+                </AccessibleButton>
+            );
+        } else if (!showDeviceListSpinner) {
+            // HACK: only show a spinner if the device section spinner is not shown,
+            // to avoid showing a double spinner
+            // We should ask for a design that includes all the different loading states here
+            const Spinner = sdk.getComponent('elements.Spinner');
+            verifyButton = <Spinner />;
+        }
     }
 
     const securitySection = (
@@ -1327,7 +1348,7 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
             <p>{ text }</p>
             { verifyButton }
             <DevicesSection
-                loading={devices === undefined}
+                loading={showDeviceListSpinner}
                 devices={devices}
                 userId={member.userId} />
         </div>

src/components/views/right_panel/VerificationPanel.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import * as sdk from '../../../index';
 import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
@@ -123,10 +124,17 @@ export default class VerificationPanel extends React.PureComponent {
             const sasLabel = showQR ?
                 _t("If you can't scan the code above, verify by comparing unique emoji.") :
                 _t("Verify by comparing unique emoji.");
+
+            // Note: mx_VerificationPanel_verifyByEmojiButton is for the end-to-end tests
             sasBlock = <div className="mx_UserInfo_container">
                 <h3>{_t("Verify by emoji")}</h3>
                 <p>{sasLabel}</p>
-                <AccessibleButton disabled={disabled} kind="primary" className="mx_UserInfo_wideButton" onClick={this._startSAS}>
+                <AccessibleButton
+                    disabled={disabled}
+                    kind="primary"
+                    className="mx_UserInfo_wideButton mx_VerificationPanel_verifyByEmojiButton"
+                    onClick={this._startSAS}
+                >
                     {_t("Verify by emoji")}
                 </AccessibleButton>
             </div>;
@@ -154,6 +162,11 @@ export default class VerificationPanel extends React.PureComponent {
         this.state.reciprocateQREvent.cancel();
     };
 
+    _getDevice() {
+        const deviceId = this.props.request && this.props.request.channel.deviceId;
+        return MatrixClientPeg.get().getStoredDevice(MatrixClientPeg.get().getUserId(), deviceId);
+    }
+
     renderQRReciprocatePhase() {
         const {member, request} = this.props;
         let Button;
@@ -210,16 +223,27 @@ export default class VerificationPanel extends React.PureComponent {
             }
         }
 
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const description = request.isSelfVerification ?
-            _t("You've successfully verified %(deviceName)s (%(deviceId)s)!", {
-                deviceName: this.props.device.getDisplayName(),
-                deviceId: this.props.device.deviceId,
-            }):
-            _t("You've successfully verified %(displayName)s!", {
+        let description;
+        if (request.isSelfVerification) {
+            const device = this._getDevice();
+            if (!device) {
+                // This can happen if the device is logged out while we're still showing verification
+                // UI for it.
+                console.warn("Verified device we don't know about: " + this.props.request.channel.deviceId);
+                description = _t("You've successfully verified your device!");
+            } else {
+                description = _t("You've successfully verified %(deviceName)s (%(deviceId)s)!", {
+                    deviceName: device ? device.getDisplayName() : '',
+                    deviceId: this.props.request.channel.deviceId,
+                });
+            }
+        } else {
+            description = _t("You've successfully verified %(displayName)s!", {
                 displayName: member.displayName || member.name || member.userId,
             });
+        }
 
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
                 <h3>{_t("Verified")}</h3>
@@ -290,12 +314,12 @@ export default class VerificationPanel extends React.PureComponent {
                         const emojis = this.state.sasEvent ?
                             <VerificationShowSas
                                 displayName={displayName}
+                                device={this._getDevice()}
                                 sas={this.state.sasEvent.sas}
                                 onCancel={this._onSasMismatchesClick}
                                 onDone={this._onSasMatchesClick}
                                 inDialog={this.props.inDialog}
                                 isSelf={request.isSelfVerification}
-                                device={this.props.device}
                             /> : <Spinner />;
                         return <div className="mx_UserInfo_container">
                             <h3>{_t("Compare emoji")}</h3>

src/components/views/room_settings/ColorSettings.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 
 import Tinter from '../../../Tinter';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 
 const ROOM_COLORS = [

src/components/views/room_settings/RoomPublishSetting.js

@@ -18,7 +18,9 @@ import React from 'react';
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import {_t} from "../../../languageHandler";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.room_settings.RoomPublishSetting")
 export default class RoomPublishSetting extends React.PureComponent {
     constructor(props) {
         super(props);

src/components/views/room_settings/UrlPreviewSettings.js

@@ -23,8 +23,9 @@ import createReactClass from 'create-react-class';
 import * as sdk from "../../../index";
 import { _t, _td } from '../../../languageHandler';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import {Action} from "../../../dispatcher/actions";
 
 
 export default createReactClass({
@@ -37,7 +38,7 @@ export default createReactClass({
     _onClickUserSettings: (e) => {
         e.preventDefault();
         e.stopPropagation();
-        dis.dispatch({action: 'view_user_settings'});
+        dis.fire(Action.ViewUserSettings);
     },
 
     render: function() {

src/components/views/rooms/AppsDrawer.js

@@ -21,7 +21,7 @@ import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import AppTile from '../elements/AppTile';
 import Modal from '../../../Modal';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import * as ScalarMessaging from '../../../ScalarMessaging';
 import { _t } from '../../../languageHandler';
@@ -81,12 +81,14 @@ export default createReactClass({
         const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
         switch (action.action) {
             case 'appsDrawer':
+                // Note: these booleans are awkward because localstorage is fundamentally
+                // string-based. We also do exact equality on the strings later on.
                 if (action.show) {
-                    localStorage.removeItem(hideWidgetKey);
+                    localStorage.setItem(hideWidgetKey, "false");
                 } else {
                     // Store hidden state of widget
                     // Don't show if previously hidden
-                    localStorage.setItem(hideWidgetKey, true);
+                    localStorage.setItem(hideWidgetKey, "true");
                 }
 
                 break;

src/components/views/rooms/Autocomplete.tsx

@@ -17,28 +17,49 @@ limitations under the License.
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import flatMap from 'lodash/flatMap';
-import type {Completion} from '../../../autocomplete/Autocompleter';
-import { Room } from 'matrix-js-sdk';
+import {ICompletion, ISelectionRange, IProviderCompletions} from '../../../autocomplete/Autocompleter';
+import {Room} from 'matrix-js-sdk/src/models/room';
 
 import SettingsStore from "../../../settings/SettingsStore";
 import Autocompleter from '../../../autocomplete/Autocompleter';
-import {sleep} from "../../../utils/promise";
 
 const COMPOSER_SELECTED = 0;
 
 export const generateCompletionDomId = (number) => `mx_Autocomplete_Completion_${number}`;
 
-export default class Autocomplete extends React.Component {
+interface IProps {
+    // the query string for which to show autocomplete suggestions
+    query: string;
+    // method invoked with range and text content when completion is confirmed
+    onConfirm: (ICompletion) => void;
+    // method invoked when selected (if any) completion changes
+    onSelectionChange?: (ICompletion, number) => void;
+    selection: ISelectionRange;
+    // The room in which we're autocompleting
+    room: Room;
+}
+
+interface IState {
+    completions: IProviderCompletions[];
+    completionList: ICompletion[];
+    selectionOffset: number;
+    shouldShowCompletions: boolean;
+    hide: boolean;
+    forceComplete: boolean;
+}
+
+export default class Autocomplete extends React.PureComponent<IProps, IState> {
+    autocompleter: Autocompleter;
+    queryRequested: string;
+    debounceCompletionsRequest: NodeJS.Timeout;
+    containerRef: React.RefObject<HTMLDivElement>;
+
     constructor(props) {
         super(props);
 
         this.autocompleter = new Autocompleter(props.room);
-        this.completionPromise = null;
-        this.hide = this.hide.bind(this);
-        this.onCompletionClicked = this.onCompletionClicked.bind(this);
 
         this.state = {
             // list of completionResults, each containing completions
@@ -57,13 +78,15 @@ export default class Autocomplete extends React.Component {
 
             forceComplete: false,
         };
+
+        this.containerRef = React.createRef();
     }
 
     componentDidMount() {
-        this._applyNewProps();
+        this.applyNewProps();
     }
 
-    _applyNewProps(oldQuery, oldRoom) {
+    private applyNewProps(oldQuery?: string, oldRoom?: Room) {
         if (oldRoom && this.props.room.roomId !== oldRoom.roomId) {
             this.autocompleter.destroy();
             this.autocompleter = new Autocompleter(this.props.room);
@@ -81,7 +104,7 @@ export default class Autocomplete extends React.Component {
         this.autocompleter.destroy();
     }
 
-    complete(query, selection) {
+    complete(query: string, selection: ISelectionRange) {
         this.queryRequested = query;
         if (this.debounceCompletionsRequest) {
             clearTimeout(this.debounceCompletionsRequest);
@@ -112,7 +135,7 @@ export default class Autocomplete extends React.Component {
         });
     }
 
-    processQuery(query, selection) {
+    processQuery(query: string, selection: ISelectionRange) {
         return this.autocompleter.getCompletions(
             query, selection, this.state.forceComplete,
         ).then((completions) => {
@@ -124,7 +147,7 @@ export default class Autocomplete extends React.Component {
         });
     }
 
-    processCompletions(completions) {
+    processCompletions(completions: IProviderCompletions[]) {
         const completionList = flatMap(completions, (provider) => provider.completions);
 
         // Reset selection when completion list becomes empty.
@@ -159,7 +182,7 @@ export default class Autocomplete extends React.Component {
         });
     }
 
-    hasSelection(): bool {
+    hasSelection(): boolean {
         return this.countCompletions() > 0 && this.state.selectionOffset !== 0;
     }
 
@@ -168,7 +191,7 @@ export default class Autocomplete extends React.Component {
     }
 
     // called from MessageComposerInput
-    moveSelection(delta): ?Completion {
+    moveSelection(delta: number) {
         const completionCount = this.countCompletions();
         if (completionCount === 0) return; // there are no items to move the selection through
 
@@ -177,7 +200,7 @@ export default class Autocomplete extends React.Component {
         this.setSelection(index);
     }
 
-    onEscape(e): boolean {
+    onEscape(e: KeyboardEvent): boolean {
         const completionCount = this.countCompletions();
         if (completionCount === 0) {
             // autocomplete is already empty, so don't preventDefault
@@ -190,9 +213,14 @@ export default class Autocomplete extends React.Component {
         this.hide();
     }
 
-    hide() {
-        this.setState({hide: true, selectionOffset: 0, completions: [], completionList: []});
-    }
+    hide = () => {
+        this.setState({
+            hide: true,
+            selectionOffset: 0,
+            completions: [],
+            completionList: [],
+        });
+    };
 
     forceComplete() {
         return new Promise((resolve) => {
@@ -207,7 +235,7 @@ export default class Autocomplete extends React.Component {
         });
     }
 
-    onCompletionClicked(selectionOffset: number): boolean {
+    onCompletionClicked = (selectionOffset: number): boolean => {
         if (this.countCompletions() === 0 || selectionOffset === COMPOSER_SELECTED) {
             return false;
         }
@@ -216,7 +244,7 @@ export default class Autocomplete extends React.Component {
         this.hide();
 
         return true;
-    }
+    };
 
     setSelection(selectionOffset: number) {
         this.setState({selectionOffset, hide: false});
@@ -225,28 +253,24 @@ export default class Autocomplete extends React.Component {
         }
     }
 
-    componentDidUpdate(prevProps) {
-        this._applyNewProps(prevProps.query, prevProps.room);
+    componentDidUpdate(prevProps: IProps) {
+        this.applyNewProps(prevProps.query, prevProps.room);
         // this is the selected completion, so scroll it into view if needed
         const selectedCompletion = this.refs[`completion${this.state.selectionOffset}`];
-        if (selectedCompletion && this.container) {
+        if (selectedCompletion && this.containerRef.current) {
             const domNode = ReactDOM.findDOMNode(selectedCompletion);
-            const offsetTop = domNode && domNode.offsetTop;
-            if (offsetTop > this.container.scrollTop + this.container.offsetHeight ||
-                offsetTop < this.container.scrollTop) {
-                this.container.scrollTop = offsetTop - this.container.offsetTop;
+            const offsetTop = domNode && (domNode as HTMLElement).offsetTop;
+            if (offsetTop > this.containerRef.current.scrollTop + this.containerRef.current.offsetHeight ||
+                offsetTop < this.containerRef.current.scrollTop) {
+                this.containerRef.current.scrollTop = offsetTop - this.containerRef.current.offsetTop;
             }
         }
     }
 
-    setState(state, func) {
-        super.setState(state, func);
-    }
-
     render() {
         let position = 1;
         const renderedCompletions = this.state.completions.map((completionResult, i) => {
-            const completions = completionResult.completions.map((completion, i) => {
+            const completions = completionResult.completions.map((completion, j) => {
                 const selected = position === this.state.selectionOffset;
                 const className = classNames('mx_Autocomplete_Completion', {selected});
                 const componentPosition = position;
@@ -257,7 +281,7 @@ export default class Autocomplete extends React.Component {
                 };
 
                 return React.cloneElement(completion.component, {
-                    "key": i,
+                    "key": j,
                     "ref": `completion${componentPosition}`,
                     "id": generateCompletionDomId(componentPosition - 1), // 0 index the completion IDs
                     className,
@@ -276,23 +300,9 @@ export default class Autocomplete extends React.Component {
         }).filter((completion) => !!completion);
 
         return !this.state.hide && renderedCompletions.length > 0 ? (
-            <div className="mx_Autocomplete" ref={(e) => this.container = e}>
+            <div className="mx_Autocomplete" ref={this.containerRef}>
                 { renderedCompletions }
             </div>
         ) : null;
     }
 }
-
-Autocomplete.propTypes = {
-    // the query string for which to show autocomplete suggestions
-    query: PropTypes.string.isRequired,
-
-    // method invoked with range and text content when completion is confirmed
-    onConfirm: PropTypes.func.isRequired,
-
-    // method invoked when selected (if any) completion changes
-    onSelectionChange: PropTypes.func,
-
-    // The room in which we're autocompleting
-    room: PropTypes.instanceOf(Room),
-};

src/components/views/rooms/AuxPanel.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import * as sdk from '../../../index';
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import * as ObjectUtils from '../../../ObjectUtils';
 import AppsDrawer from './AppsDrawer';
 import { _t } from '../../../languageHandler';
@@ -141,6 +141,15 @@ export default createReactClass({
         return counters;
     },
 
+    _onScroll: function(rect) {
+        if (this.props.onResize) {
+            this.props.onResize();
+        }
+
+        /* Force refresh of PersistedElements which may be partially hidden */
+        window.dispatchEvent(new Event('resize'));
+    },
+
     render: function() {
         const CallView = sdk.getComponent("voip.CallView");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
@@ -265,7 +274,7 @@ export default createReactClass({
         }
 
         return (
-            <AutoHideScrollbar className={classes} style={style} >
+            <AutoHideScrollbar className={classes} style={style} onScroll={this._onScroll}>
                 { stateViews }
                 { appsDrawer }
                 { fileDropTarget }

src/components/views/rooms/BasicMessageComposer.js

@@ -39,6 +39,7 @@ import EMOTICON_REGEX from 'emojibase-regex/emoticon';
 import * as sdk from '../../../index';
 import {Key} from "../../../Keyboard";
 import {EMOTICON_TO_EMOJI} from "../../../emoji";
+import {CommandCategories, CommandMap, parseCommandString} from "../../../SlashCommands";
 
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
 
@@ -84,6 +85,7 @@ export default class BasicMessageEditor extends React.Component {
         super(props);
         this.state = {
             autoComplete: null,
+            showPillAvatar: SettingsStore.getValue("Pill.shouldShowPillAvatar"),
         };
         this._editorRef = null;
         this._autocompleteRef = null;
@@ -92,6 +94,7 @@ export default class BasicMessageEditor extends React.Component {
         this._isIMEComposing = false;
         this._hasTextSelected = false;
         this._emoticonSettingHandle = null;
+        this._shouldShowPillAvatarSettingHandle = null;
     }
 
     componentDidUpdate(prevProps) {
@@ -162,7 +165,16 @@ export default class BasicMessageEditor extends React.Component {
         }
         this.setState({autoComplete: this.props.model.autoComplete});
         this.historyManager.tryPush(this.props.model, selection, inputType, diff);
-        TypingStore.sharedInstance().setSelfTyping(this.props.room.roomId, !this.props.model.isEmpty);
+
+        let isTyping = !this.props.model.isEmpty;
+        // If the user is entering a command, only consider them typing if it is one which sends a message into the room
+        if (isTyping && this.props.model.parts[0].type === "command") {
+            const {cmd} = parseCommandString(this.props.model.parts[0].text);
+            if (!CommandMap.has(cmd) || CommandMap.get(cmd).category !== CommandCategories.messages) {
+                isTyping = false;
+            }
+        }
+        TypingStore.sharedInstance().setSelfTyping(this.props.room.roomId, isTyping);
 
         if (this.props.onChange) {
             this.props.onChange();
@@ -508,10 +520,15 @@ export default class BasicMessageEditor extends React.Component {
         this.setState({completionIndex});
     }
 
-    _configureEmoticonAutoReplace() {
+    _configureEmoticonAutoReplace = () => {
         const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
         this.props.model.setTransformCallback(shouldReplace ? this._replaceEmoticon : null);
-    }
+    };
+
+    _configureShouldShowPillAvatar = () => {
+        const showPillAvatar = SettingsStore.getValue("Pill.shouldShowPillAvatar");
+        this.setState({ showPillAvatar });
+    };
 
     componentWillUnmount() {
         document.removeEventListener("selectionchange", this._onSelectionChange);
@@ -519,15 +536,17 @@ export default class BasicMessageEditor extends React.Component {
         this._editorRef.removeEventListener("compositionstart", this._onCompositionStart, true);
         this._editorRef.removeEventListener("compositionend", this._onCompositionEnd, true);
         SettingsStore.unwatchSetting(this._emoticonSettingHandle);
+        SettingsStore.unwatchSetting(this._shouldShowPillAvatarSettingHandle);
     }
 
     componentDidMount() {
         const model = this.props.model;
         model.setUpdateCallback(this._updateEditorState);
-        this._emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null, () => {
-            this._configureEmoticonAutoReplace();
-        });
+        this._emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
+            this._configureEmoticonAutoReplace);
         this._configureEmoticonAutoReplace();
+        this._shouldShowPillAvatarSettingHandle = SettingsStore.watchSetting("Pill.shouldShowPillAvatar", null,
+            this._configureShouldShowPillAvatar);
         const partCreator = model.partCreator;
         // TODO: does this allow us to get rid of EditorStateTransfer?
         // not really, but we could not serialize the parts, and just change the autoCompleter
@@ -605,9 +624,12 @@ export default class BasicMessageEditor extends React.Component {
                 />
             </div>);
         }
-        const classes = classNames("mx_BasicMessageComposer", {
+        const wrapperClasses = classNames("mx_BasicMessageComposer", {
             "mx_BasicMessageComposer_input_error": this.state.showVisualBell,
         });
+        const classes = classNames("mx_BasicMessageComposer_input", {
+            "mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
+        });
 
         const MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar');
         const shortcuts = {
@@ -618,11 +640,11 @@ export default class BasicMessageEditor extends React.Component {
 
         const {completionIndex} = this.state;
 
-        return (<div className={classes}>
+        return (<div className={wrapperClasses}>
             { autoComplete }
             <MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} />
             <div
-                className="mx_BasicMessageComposer_input"
+                className={classes}
                 contentEditable="true"
                 tabIndex="0"
                 onBlur={this._onBlur}

src/components/views/rooms/E2EIcon.js

@@ -20,7 +20,7 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 
 import {_t, _td} from '../../../languageHandler';
-import {useFeatureEnabled} from "../../../hooks/useSettings";
+import {useSettingValue} from "../../../hooks/useSettings";
 import AccessibleButton from "../elements/AccessibleButton";
 import Tooltip from "../elements/Tooltip";
 
@@ -62,7 +62,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
     }, className);
 
     let e2eTitle;
-    const crossSigning = useFeatureEnabled("feature_cross_signing");
+    const crossSigning = useSettingValue("feature_cross_signing");
     if (crossSigning && isUser) {
         e2eTitle = crossSigningUserTitles[status];
     } else if (crossSigning && !isUser) {

src/components/views/rooms/EditMessageComposer.js

@@ -18,7 +18,7 @@ import React from 'react';
 import * as sdk from '../../../index';
 import {_t} from '../../../languageHandler';
 import PropTypes from 'prop-types';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import EditorModel from '../../../editor/model';
 import {getCaretOffsetAndText} from '../../../editor/dom';
 import {htmlSerializeIfNeeded, textSerialize, containsEmote, stripEmoteCommand} from '../../../editor/serialize';

src/components/views/rooms/EventTile.js

@@ -25,7 +25,7 @@ import classNames from "classnames";
 import { _t, _td } from '../../../languageHandler';
 import * as TextForEvent from "../../../TextForEvent";
 import * as sdk from "../../../index";
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import {EventStatus} from 'matrix-js-sdk';
 import {formatTime} from "../../../DateUtils";
@@ -34,6 +34,7 @@ import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
 import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {E2E_STATE} from "./E2EIcon";
+import {toRem} from "../../../utils/units";
 
 const eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',
@@ -59,6 +60,7 @@ const stateEventTileTypes = {
     'm.room.power_levels': 'messages.TextualEvent',
     'm.room.pinned_events': 'messages.TextualEvent',
     'm.room.server_acl': 'messages.TextualEvent',
+    // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
     'im.vector.modular.widgets': 'messages.TextualEvent',
     'm.room.tombstone': 'messages.TextualEvent',
     'm.room.join_rules': 'messages.TextualEvent',
@@ -204,6 +206,9 @@ export default createReactClass({
 
         // whether to show reactions for this event
         showReactions: PropTypes.bool,
+
+        // whether to use the irc layout
+        useIRCLayout: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -322,7 +327,7 @@ export default createReactClass({
 
         // If cross-signing is off, the old behaviour is to scream at the user
         // as if they've done something wrong, which they haven't
-        if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (!SettingsStore.getValue("feature_cross_signing")) {
             this.setState({
                 verified: E2E_STATE.WARNING,
             }, this.props.onHeightChanged);
@@ -472,7 +477,7 @@ export default createReactClass({
             if (remainder > 0) {
                 remText = <span className="mx_EventTile_readAvatarRemainder"
                     onClick={this.toggleAllReadAvatars}
-                    style={{ right: -(left - receiptOffset) }}>{ remainder }+
+                    style={{ right: "calc(" + toRem(-left) + " + " + receiptOffset + "px)" }}>{ remainder }+
                 </span>;
             }
         }
@@ -668,7 +673,6 @@ export default createReactClass({
             mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2E_STATE.UNKNOWN,
             mx_EventTile_bad: isEncryptionFailure,
             mx_EventTile_emote: msgtype === 'm.emote',
-            mx_EventTile_redacted: isRedacted,
         });
 
         let permalink = "#";
@@ -694,6 +698,9 @@ export default createReactClass({
             // joins/parts/etc
             avatarSize = 14;
             needsSenderProfile = false;
+        } else if (this.props.useIRCLayout) {
+            avatarSize = 14;
+            needsSenderProfile = true;
         } else if (this.props.continuation && this.props.tileShape !== "file_grid") {
             // no avatar or sender profile for continuation messages
             avatarSize = 0;
@@ -785,6 +792,17 @@ export default createReactClass({
             />;
         }
 
+        const linkedTimestamp = <a
+                href={permalink}
+                onClick={this.onPermalinkClicked}
+                aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+            >
+                { timestamp }
+            </a>;
+
+        const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null;
+        const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null;
+
         switch (this.props.tileShape) {
             case 'notif': {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
@@ -852,12 +870,11 @@ export default createReactClass({
                 }
                 return (
                     <div className={classes}>
+                        { ircTimestamp }
                         { avatar }
                         { sender }
                         <div className="mx_EventTile_reply">
-                            <a href={permalink} onClick={this.onPermalinkClicked}>
-                                { timestamp }
-                            </a>
+                            { groupTimestamp }
                             { !isBubbleMessage && this._renderE2EPadlock() }
                             { thread }
                             <EventTileType ref={this._tile}
@@ -876,22 +893,19 @@ export default createReactClass({
                     this.props.onHeightChanged,
                     this.props.permalinkCreator,
                     this._replyThread,
+                    this.props.useIRCLayout,
                 );
+
                 // 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}>
+                        { ircTimestamp }
                         <div className="mx_EventTile_msgOption">
                             { readAvatars }
                         </div>
                         { sender }
                         <div className="mx_EventTile_line">
-                            <a
-                                href={permalink}
-                                onClick={this.onPermalinkClicked}
-                                aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
-                            >
-                                { timestamp }
-                            </a>
+                            { groupTimestamp }
                             { !isBubbleMessage && this._renderE2EPadlock() }
                             { thread }
                             <EventTileType ref={this._tile}

src/components/views/rooms/ForwardMessage.js

@@ -19,7 +19,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import {Key} from '../../../Keyboard';
 
 

src/components/views/rooms/InviteOnlyIcon.js

@@ -17,7 +17,6 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
-import SettingsStore from '../../../settings/SettingsStore';
 
 export default class InviteOnlyIcon extends React.Component {
     constructor() {
@@ -39,10 +38,6 @@ export default class InviteOnlyIcon extends React.Component {
     render() {
         const classes = this.props.collapsedPanel ? "mx_InviteOnlyIcon_small": "mx_InviteOnlyIcon_large";
 
-        if (!SettingsStore.isFeatureEnabled("feature_invite_only_padlocks")) {
-            return null;
-        }
-
         const Tooltip = sdk.getComponent("elements.Tooltip");
         let tooltip;
         if (this.state.hover) {

src/components/views/rooms/MemberInfo.js

@@ -31,7 +31,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import classNames from 'classnames';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -48,6 +48,7 @@ import E2EIcon from "./E2EIcon";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {Action} from "../../../dispatcher/actions";
 
 export default createReactClass({
     displayName: 'MemberInfo',
@@ -160,13 +161,10 @@ export default createReactClass({
             // no need to re-download the whole thing; just update our copy of
             // the list.
 
-            // Promise.resolve to handle transition from static result to promise; can be removed
-            // in future
-            Promise.resolve(this.context.getStoredDevicesForUser(userId)).then((devices) => {
-                this.setState({
-                    devices: devices,
-                    e2eStatus: this._getE2EStatus(devices),
-                });
+            const devices = this.context.getStoredDevicesForUser(userId);
+            this.setState({
+                devices: devices,
+                e2eStatus: this._getE2EStatus(devices),
             });
         }
     },
@@ -367,7 +365,7 @@ export default createReactClass({
         let eventsToRedact = [];
         for (const timeline of timelineSet.getTimelines()) {
             eventsToRedact = timeline.getEvents().reduce((events, event) => {
-                if (event.getSender() === userId && !event.isRedacted()) {
+                if (event.getSender() === userId && !event.isRedacted() && !event.isRedaction()) {
                     return events.concat(event);
                 } else {
                     return events;
@@ -727,7 +725,7 @@ export default createReactClass({
 
     onCancel: function(e) {
         dis.dispatch({
-            action: "view_user",
+            action: Action.ViewUser,
             member: null,
         });
     },

src/components/views/rooms/MemberList.js

@@ -20,7 +20,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import {isValid3pidInvite} from "../../../RoomInvite";
 import rate_limited_func from "../../../ratelimitedfunc";

src/components/views/rooms/MemberTile.js

@@ -20,9 +20,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as sdk from "../../../index";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import {Action} from "../../../dispatcher/actions";
 
 export default createReactClass({
     displayName: 'MemberTile',
@@ -56,7 +57,7 @@ export default createReactClass({
             }
         }
 
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("feature_cross_signing")) {
             const { roomId } = this.props.member;
             if (roomId) {
                 const isRoomEncrypted = cli.isRoomEncrypted(roomId);
@@ -129,7 +130,7 @@ export default createReactClass({
             return;
         }
 
-        const devices = await cli.getStoredDevicesForUser(userId);
+        const devices = cli.getStoredDevicesForUser(userId);
         const anyDeviceUnverified = devices.some(device => {
             const { deviceId } = device;
             // For your own devices, we use the stricter check of cross-signing
@@ -185,7 +186,7 @@ export default createReactClass({
 
     onClick: function(e) {
         dis.dispatch({
-            action: 'view_user',
+            action: Action.ViewUser,
             member: this.props.member,
         });
     },

src/components/views/rooms/MessageComposer.js

@@ -20,7 +20,7 @@ import { _t } from '../../../languageHandler';
 import CallHandler from '../../../CallHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import Stickerpicker from './Stickerpicker';
 import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
@@ -114,8 +114,19 @@ class UploadButton extends React.Component {
         this.onUploadFileInputChange = this.onUploadFileInputChange.bind(this);
 
         this._uploadInput = createRef();
+        this._dispatcherRef = dis.register(this.onAction);
     }
 
+    componentWillUnmount() {
+        dis.unregister(this._dispatcherRef);
+    }
+
+    onAction = payload => {
+        if (payload.action === "upload_file") {
+            this.onUploadClick();
+        }
+    };
+
     onUploadClick(ev) {
         if (MatrixClientPeg.get().isGuest()) {
             dis.dispatch({action: 'require_registration'});
@@ -128,7 +139,7 @@ class UploadButton extends React.Component {
         if (ev.target.files.length === 0) return;
 
         // take a copy so we can safely reset the value of the form control
-        // (Note it is a FileList: we can't use slice or sesnible iteration).
+        // (Note it is a FileList: we can't use slice or sensible iteration).
         const tfiles = [];
         for (let i = 0; i < ev.target.files.length; ++i) {
             tfiles.push(ev.target.files[i]);
@@ -270,7 +281,7 @@ export default class MessageComposer extends React.Component {
     }
 
     renderPlaceholderText() {
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("feature_cross_signing")) {
             if (this.state.isQuoting) {
                 if (this.props.e2eStatus) {
                     return _t('Send an encrypted reply…');
@@ -370,7 +381,7 @@ export default class MessageComposer extends React.Component {
         }
 
         return (
-            <div className="mx_MessageComposer">
+            <div className="mx_MessageComposer mx_GroupLayout">
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">
                         { controls }

src/components/views/rooms/PinnedEventTile.js

@@ -18,7 +18,7 @@ import React from "react";
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import AccessibleButton from "../elements/AccessibleButton";
 import MessageEvent from "../messages/MessageEvent";
 import MemberAvatar from "../avatars/MemberAvatar";

src/components/views/rooms/ReadReceiptMarker.js

@@ -23,6 +23,7 @@ import { _t } from '../../../languageHandler';
 import {formatDate} from '../../../DateUtils';
 import Velociraptor from "../../../Velociraptor";
 import * as sdk from "../../../index";
+import {toRem} from "../../../utils/units";
 
 let bounce = false;
 try {
@@ -148,7 +149,7 @@ export default createReactClass({
             // start at the old height and in the old h pos
 
             startStyles.push({ top: startTopOffset+"px",
-                               left: oldInfo.left+"px" });
+                               left: toRem(oldInfo.left) });
 
             const reorderTransitionOpts = {
                 duration: 100,
@@ -181,7 +182,7 @@ export default createReactClass({
         }
 
         const style = {
-            left: this.props.leftOffset+'px',
+            left: toRem(this.props.leftOffset),
             top: '0px',
             visibility: this.props.hidden ? 'hidden' : 'visible',
         };

src/components/views/rooms/ReplyPreview.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import RoomViewStore from '../../../stores/RoomViewStore';

src/components/views/rooms/RoomBreadcrumbs.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, {createRef} from "react";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
@@ -363,17 +363,6 @@ export default class RoomBreadcrumbs extends React.Component {
                 badge = <div className={badgeClasses}>{r.formattedCount}</div>;
             }
 
-            let dmIndicator;
-            if (this._isDmRoom(r.room) && !SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-                dmIndicator = <img
-                    src={require("../../../../res/img/icon_person.svg")}
-                    className="mx_RoomBreadcrumbs_dmIndicator"
-                    width="13"
-                    height="15"
-                    alt={_t("Direct Chat")}
-                />;
-            }
-
             return (
                 <AccessibleButton
                     className={classes}
@@ -385,7 +374,6 @@ export default class RoomBreadcrumbs extends React.Component {
                 >
                     <RoomAvatar room={r.room} width={32} height={32} />
                     {badge}
-                    {dmIndicator}
                     {tooltip}
                 </AccessibleButton>
             );

src/components/views/rooms/RoomDetailList.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import PropTypes from 'prop-types';

src/components/views/rooms/RoomHeader.js

@@ -168,7 +168,7 @@ export default createReactClass({
         const joinRule = joinRules && joinRules.getContent().join_rule;
         let privateIcon;
         // Don't show an invite-only icon for DMs. Users know they're invite-only.
-        if (!dmUserId && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (!dmUserId && SettingsStore.getValue("feature_cross_signing")) {
             if (joinRule == "invite") {
                 privateIcon = <InviteOnlyIcon />;
             }

src/components/views/rooms/RoomList.js

@@ -29,20 +29,22 @@ import rate_limited_func from "../../../ratelimitedfunc";
 import * as Rooms from '../../../Rooms';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import TagOrderStore from '../../../stores/TagOrderStore';
-import RoomListStore, {TAG_DM} from '../../../stores/RoomListStore';
 import CustomRoomTagStore from '../../../stores/CustomRoomTagStore';
 import GroupStore from '../../../stores/GroupStore';
 import RoomSubList from '../../structures/RoomSubList';
 import ResizeHandle from '../elements/ResizeHandle';
 import CallHandler from "../../../CallHandler";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import * as sdk from "../../../index";
 import * as Receipt from "../../../utils/Receipt";
 import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
 import {RovingTabIndexProvider} from "../../../accessibility/RovingTabIndex";
+import {RoomListStoreTempProxy} from "../../../stores/room-list/RoomListStoreTempProxy";
+import {DefaultTagID} from "../../../stores/room-list/models";
 import * as Unread from "../../../Unread";
 import RoomViewStore from "../../../stores/RoomViewStore";
+import {TAG_DM} from "../../../stores/RoomListStore";
 
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@@ -161,7 +163,7 @@ export default createReactClass({
             this.updateVisibleRooms();
         });
 
-        this._roomListStoreToken = RoomListStore.addListener(() => {
+        this._roomListStoreToken = RoomListStoreTempProxy.addListener(() => {
             this._delayedRefreshRoomList();
         });
 
@@ -521,7 +523,7 @@ export default createReactClass({
     },
 
     getTagNameForRoomId: function(roomId) {
-        const lists = RoomListStore.getRoomLists();
+        const lists = RoomListStoreTempProxy.getRoomLists();
         for (const tagName of Object.keys(lists)) {
             for (const room of lists[tagName]) {
                 // Should be impossible, but guard anyways.
@@ -541,7 +543,7 @@ export default createReactClass({
     },
 
     getRoomLists: function() {
-        const lists = RoomListStore.getRoomLists();
+        const lists = RoomListStoreTempProxy.getRoomLists();
 
         const filteredLists = {};
 
@@ -773,10 +775,10 @@ export default createReactClass({
                 incomingCall: incomingCallIfTaggedAs('m.favourite'),
             },
             {
-                list: this.state.lists[TAG_DM],
+                list: this.state.lists[DefaultTagID.DM],
                 label: _t('Direct Messages'),
-                tagName: TAG_DM,
-                incomingCall: incomingCallIfTaggedAs(TAG_DM),
+                tagName: DefaultTagID.DM,
+                incomingCall: incomingCallIfTaggedAs(DefaultTagID.DM),
                 onAddRoom: () => {dis.dispatch({action: 'view_create_chat'});},
                 addRoomLabel: _t("Start chat"),
             },
@@ -785,6 +787,7 @@ export default createReactClass({
                 label: _t('Rooms'),
                 incomingCall: incomingCallIfTaggedAs('im.vector.fake.recent'),
                 onAddRoom: () => {dis.dispatch({action: 'view_create_room'});},
+                addRoomLabel: _t("Create room"),
             },
         ];
         const tagSubLists = Object.keys(this.state.lists)

src/components/views/rooms/RoomList2.tsx

@@ -0,0 +1,246 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import { _t, _td } from "../../../languageHandler";
+import { Layout } from '../../../resizer/distributors/roomsublist2';
+import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
+import { ResizeNotifier } from "../../../utils/ResizeNotifier";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore2";
+import { ITagMap } from "../../../stores/room-list/algorithms/models";
+import { DefaultTagID, TagID } from "../../../stores/room-list/models";
+import { Dispatcher } from "flux";
+import dis from "../../../dispatcher/dispatcher";
+import RoomSublist2 from "./RoomSublist2";
+import { ActionPayload } from "../../../dispatcher/payloads";
+
+/*******************************************************************
+ *   CAUTION                                                       *
+ *******************************************************************
+ * This is a work in progress implementation and isn't complete or *
+ * even useful as a component. Please avoid using it until this    *
+ * warning disappears.                                             *
+ *******************************************************************/
+
+interface IProps {
+    onKeyDown: (ev: React.KeyboardEvent) => void;
+    onFocus: (ev: React.FocusEvent) => void;
+    onBlur: (ev: React.FocusEvent) => void;
+    resizeNotifier: ResizeNotifier;
+    collapsed: boolean;
+    searchFilter: string;
+}
+
+interface IState {
+    sublists: ITagMap;
+}
+
+const TAG_ORDER: TagID[] = [
+    // -- Community Invites Placeholder --
+
+    DefaultTagID.Invite,
+    DefaultTagID.Favourite,
+    DefaultTagID.DM,
+    DefaultTagID.Untagged,
+
+    // -- Custom Tags Placeholder --
+
+    DefaultTagID.LowPriority,
+    DefaultTagID.ServerNotice,
+    DefaultTagID.Archived,
+];
+const COMMUNITY_TAGS_BEFORE_TAG = DefaultTagID.Invite;
+const CUSTOM_TAGS_BEFORE_TAG = DefaultTagID.LowPriority;
+const ALWAYS_VISIBLE_TAGS: TagID[] = [
+    DefaultTagID.DM,
+    DefaultTagID.Untagged,
+];
+
+interface ITagAesthetics {
+    sectionLabel: string;
+    addRoomLabel?: string;
+    onAddRoom?: (dispatcher: Dispatcher<ActionPayload>) => void;
+    isInvite: boolean;
+    defaultHidden: boolean;
+}
+
+const TAG_AESTHETICS: {
+    // @ts-ignore - TS wants this to be a string but we know better
+    [tagId: TagID]: ITagAesthetics;
+} = {
+    [DefaultTagID.Invite]: {
+        sectionLabel: _td("Invites"),
+        isInvite: true,
+        defaultHidden: false,
+    },
+    [DefaultTagID.Favourite]: {
+        sectionLabel: _td("Favourites"),
+        isInvite: false,
+        defaultHidden: false,
+    },
+    [DefaultTagID.DM]: {
+        sectionLabel: _td("Direct Messages"),
+        isInvite: false,
+        defaultHidden: false,
+        addRoomLabel: _td("Start chat"),
+        onAddRoom: (dispatcher: Dispatcher<ActionPayload>) => dispatcher.dispatch({action: 'view_create_chat'}),
+    },
+    [DefaultTagID.Untagged]: {
+        sectionLabel: _td("Rooms"),
+        isInvite: false,
+        defaultHidden: false,
+        addRoomLabel: _td("Create room"),
+        onAddRoom: (dispatcher: Dispatcher<ActionPayload>) => dispatcher.dispatch({action: 'view_create_room'}),
+    },
+    [DefaultTagID.LowPriority]: {
+        sectionLabel: _td("Low priority"),
+        isInvite: false,
+        defaultHidden: false,
+    },
+    [DefaultTagID.ServerNotice]: {
+        sectionLabel: _td("System Alerts"),
+        isInvite: false,
+        defaultHidden: false,
+    },
+    [DefaultTagID.Archived]: {
+        sectionLabel: _td("Historical"),
+        isInvite: false,
+        defaultHidden: true,
+    },
+};
+
+export default class RoomList2 extends React.Component<IProps, IState> {
+    private sublistRefs: { [tagId: string]: React.RefObject<RoomSublist2> } = {};
+    private sublistSizes: { [tagId: string]: number } = {};
+    private sublistCollapseStates: { [tagId: string]: boolean } = {};
+    private unfilteredLayout: Layout;
+    private filteredLayout: Layout;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {sublists: {}};
+        this.loadSublistSizes();
+        this.prepareLayouts();
+    }
+
+    public componentDidMount(): void {
+        RoomListStore.instance.on(LISTS_UPDATE_EVENT, (store) => {
+            console.log("new lists", store.orderedLists);
+            this.setState({sublists: store.orderedLists});
+        });
+    }
+
+    private loadSublistSizes() {
+        const sizesJson = window.localStorage.getItem("mx_roomlist_sizes");
+        if (sizesJson) this.sublistSizes = JSON.parse(sizesJson);
+
+        const collapsedJson = window.localStorage.getItem("mx_roomlist_collapsed");
+        if (collapsedJson) this.sublistCollapseStates = JSON.parse(collapsedJson);
+    }
+
+    private saveSublistSizes() {
+        window.localStorage.setItem("mx_roomlist_sizes", JSON.stringify(this.sublistSizes));
+        window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.sublistCollapseStates));
+    }
+
+    private prepareLayouts() {
+        // TODO: Change layout engine for FTUE support
+        this.unfilteredLayout = new Layout((tagId: string, height: number) => {
+            const sublist = this.sublistRefs[tagId];
+            if (sublist) sublist.current.setHeight(height);
+
+            // TODO: Check overflow (see old impl)
+
+            // Don't store a height for collapsed sublists
+            if (!this.sublistCollapseStates[tagId]) {
+                this.sublistSizes[tagId] = height;
+                this.saveSublistSizes();
+            }
+        }, this.sublistSizes, this.sublistCollapseStates, {
+            allowWhitespace: false,
+            handleHeight: 1,
+        });
+
+        this.filteredLayout = new Layout((tagId: string, height: number) => {
+            const sublist = this.sublistRefs[tagId];
+            if (sublist) sublist.current.setHeight(height);
+        }, null, null, {
+            allowWhitespace: false,
+            handleHeight: 0,
+        });
+    }
+
+    private renderSublists(): React.ReactElement[] {
+        const components: React.ReactElement[] = [];
+
+        for (const orderedTagId of TAG_ORDER) {
+            if (COMMUNITY_TAGS_BEFORE_TAG === orderedTagId) {
+                // Populate community invites if we have the chance
+                // TODO
+            }
+            if (CUSTOM_TAGS_BEFORE_TAG === orderedTagId) {
+                // Populate custom tags if needed
+                // TODO
+            }
+
+            const orderedRooms = this.state.sublists[orderedTagId] || [];
+            if (orderedRooms.length === 0 && !ALWAYS_VISIBLE_TAGS.includes(orderedTagId)) {
+                continue; // skip tag - not needed
+            }
+
+            const aesthetics: ITagAesthetics = TAG_AESTHETICS[orderedTagId];
+            if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
+
+            const onAddRoomFn = aesthetics.onAddRoom ? () => aesthetics.onAddRoom(dis) : null;
+            components.push(<RoomSublist2
+                key={`sublist-${orderedTagId}`}
+                forRooms={true}
+                rooms={orderedRooms}
+                startAsHidden={aesthetics.defaultHidden}
+                label={_t(aesthetics.sectionLabel)}
+                onAddRoom={onAddRoomFn}
+                addRoomLabel={aesthetics.addRoomLabel}
+                isInvite={aesthetics.isInvite}
+            />);
+        }
+
+        return components;
+    }
+
+    public render() {
+        const sublists = this.renderSublists();
+        return (
+            <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={this.props.onKeyDown}>
+                {({onKeyDownHandler}) => (
+                    <div
+                        onFocus={this.props.onFocus}
+                        onBlur={this.props.onBlur}
+                        onKeyDown={onKeyDownHandler}
+                        className="mx_RoomList"
+                        role="tree"
+                        aria-label={_t("Rooms")}
+                        // Firefox sometimes makes this element focusable due to
+                        // overflow:scroll;, so force it out of tab order.
+                        tabIndex={-1}
+                    >{sublists}</div>
+                )}
+            </RovingTabIndexProvider>
+        );
+    }
+}

src/components/views/rooms/RoomPreviewBar.js

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import IdentityAuthClient from '../../../IdentityAuthClient';
@@ -266,9 +266,9 @@ export default createReactClass({
             params: {
                 email: this.props.invitedEmail,
                 signurl: this.props.signUrl,
-                room_name: this.props.oobData.room_name,
-                room_avatar_url: this.props.oobData.avatarUrl,
-                inviter_name: this.props.oobData.inviterName,
+                room_name: this.props.oobData ? this.props.oobData.room_name : null,
+                room_avatar_url: this.props.oobData ? this.props.oobData.avatarUrl : null,
+                inviter_name: this.props.oobData ? this.props.oobData.inviterName : null,
             }
         };
     },

src/components/views/rooms/RoomRecoveryReminder.js

@@ -150,7 +150,7 @@ export default class RoomRecoveryReminder extends React.PureComponent {
                     )}</p>
                 </div>
                 <div className="mx_RoomRecoveryReminder_buttons">
-                    <AccessibleButton className="mx_RoomRecoveryReminder_button"
+                    <AccessibleButton kind="primary"
                         onClick={this.onSetupClick}>
                         {setupCaption}
                     </AccessibleButton>

src/components/views/rooms/RoomSublist2.tsx

@@ -0,0 +1,226 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import { createRef } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import classNames from 'classnames';
+import IndicatorScrollbar from "../../structures/IndicatorScrollbar";
+import * as RoomNotifs from '../../../RoomNotifs';
+import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
+import { _t } from "../../../languageHandler";
+import AccessibleButton from "../../views/elements/AccessibleButton";
+import AccessibleTooltipButton from "../../views/elements/AccessibleTooltipButton";
+import * as FormattingUtils from '../../../utils/FormattingUtils';
+import RoomTile2 from "./RoomTile2";
+
+/*******************************************************************
+ *   CAUTION                                                       *
+ *******************************************************************
+ * This is a work in progress implementation and isn't complete or *
+ * even useful as a component. Please avoid using it until this    *
+ * warning disappears.                                             *
+ *******************************************************************/
+
+interface IProps {
+    forRooms: boolean;
+    rooms?: Room[];
+    startAsHidden: boolean;
+    label: string;
+    onAddRoom?: () => void;
+    addRoomLabel: string;
+    isInvite: boolean;
+
+    // TODO: Collapsed state
+    // TODO: Height
+    // TODO: Group invites
+    // TODO: Calls
+    // TODO: forceExpand?
+    // TODO: Header clicking
+    // TODO: Spinner support for historical
+}
+
+interface IState {
+}
+
+export default class RoomSublist2 extends React.Component<IProps, IState> {
+    private headerButton = createRef();
+
+    public setHeight(size: number) {
+        // TODO: Do a thing (maybe - height changes are different in FTUE)
+    }
+
+    private hasTiles(): boolean {
+        return this.numTiles > 0;
+    }
+
+    private get numTiles(): number {
+        // TODO: Account for group invites
+        return (this.props.rooms || []).length;
+    }
+
+    private onAddRoom = (e) => {
+        e.stopPropagation();
+        if (this.props.onAddRoom) this.props.onAddRoom();
+    };
+
+    private renderTiles(): React.ReactElement[] {
+        const tiles: React.ReactElement[] = [];
+
+        if (this.props.rooms) {
+            for (const room of this.props.rooms) {
+                tiles.push(<RoomTile2 room={room} key={`room-${room.roomId}`}/>);
+            }
+        }
+
+        return tiles;
+    }
+
+    private renderHeader(): React.ReactElement {
+        const notifications = !this.props.isInvite
+            ? RoomNotifs.aggregateNotificationCount(this.props.rooms)
+            : {count: 0, highlight: true};
+        const notifCount = notifications.count;
+        const notifHighlight = notifications.highlight;
+
+        // TODO: Title on collapsed
+        // TODO: Incoming call box
+
+        let chevron = null;
+        if (this.hasTiles()) {
+            const chevronClasses = classNames({
+                'mx_RoomSubList_chevron': true,
+                'mx_RoomSubList_chevronRight': false, // isCollapsed
+                'mx_RoomSubList_chevronDown': true, // !isCollapsed
+            });
+            chevron = (<div className={chevronClasses}/>);
+        }
+
+        return (
+            <RovingTabIndexWrapper inputRef={this.headerButton}>
+                {({onFocus, isActive, ref}) => {
+                    // TODO: Use onFocus
+                    const tabIndex = isActive ? 0 : -1;
+
+                    // TODO: Collapsed state
+                    let badge;
+                    if (true) { // !isCollapsed
+                        const badgeClasses = classNames({
+                            'mx_RoomSubList_badge': true,
+                            'mx_RoomSubList_badgeHighlight': notifHighlight,
+                        });
+                        // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
+                        if (notifCount > 0) {
+                            badge = (
+                                <AccessibleButton
+                                    tabIndex={tabIndex}
+                                    className={badgeClasses}
+                                    aria-label={_t("Jump to first unread room.")}
+                                >
+                                    <div>
+                                        {FormattingUtils.formatCount(notifCount)}
+                                    </div>
+                                </AccessibleButton>
+                            );
+                        } else if (this.props.isInvite && this.hasTiles()) {
+                            // Render the `!` badge for invites
+                            badge = (
+                                <AccessibleButton
+                                    tabIndex={tabIndex}
+                                    className={badgeClasses}
+                                    aria-label={_t("Jump to first invite.")}
+                                >
+                                    <div>
+                                        {FormattingUtils.formatCount(this.numTiles)}
+                                    </div>
+                                </AccessibleButton>
+                            );
+                        }
+                    }
+
+                    let addRoomButton = null;
+                    if (!!this.props.onAddRoom) {
+                        addRoomButton = (
+                            <AccessibleTooltipButton
+                                tabIndex={tabIndex}
+                                onClick={this.onAddRoom}
+                                className="mx_RoomSubList_addRoom"
+                                title={this.props.addRoomLabel || _t("Add room")}
+                            />
+                        );
+                    }
+
+                    // TODO: a11y (see old component)
+                    return (
+                        <div className={"mx_RoomSubList_labelContainer"}>
+                            <AccessibleButton
+                                inputRef={ref}
+                                tabIndex={tabIndex}
+                                className={"mx_RoomSubList_label"}
+                                role="treeitem"
+                                aria-level="1"
+                            >
+                                {chevron}
+                                <span>{this.props.label}</span>
+                            </AccessibleButton>
+                            {badge}
+                            {addRoomButton}
+                        </div>
+                    );
+                }}
+            </RovingTabIndexWrapper>
+        );
+    }
+
+    public render(): React.ReactElement {
+        // TODO: Proper rendering
+        // TODO: Error boundary
+
+        const tiles = this.renderTiles();
+
+        const classes = classNames({
+            // TODO: Proper collapse support
+            'mx_RoomSubList': true,
+            'mx_RoomSubList_hidden': false, // len && isCollapsed
+            'mx_RoomSubList_nonEmpty': this.hasTiles(), // len && !isCollapsed
+        });
+
+        let content = null;
+        if (tiles.length > 0) {
+            // TODO: Lazy list rendering
+            // TODO: Whatever scrolling magic needs to happen here
+            content = (
+                <IndicatorScrollbar className='mx_RoomSubList_scroll'>
+                    {tiles}
+                </IndicatorScrollbar>
+            )
+        }
+
+        // TODO: onKeyDown support
+        return (
+            <div
+                className={classes}
+                role="group"
+                aria-label={this.props.label}
+            >
+                {this.renderHeader()}
+                {content}
+            </div>
+        );
+    }
+}

src/components/views/rooms/RoomTile.js

@@ -21,7 +21,7 @@ import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import classNames from 'classnames';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import * as sdk from '../../../index';
@@ -155,7 +155,7 @@ export default createReactClass({
         if (!cli.isRoomEncrypted(this.props.room.roomId)) {
             return;
         }
-        if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (!SettingsStore.getValue("feature_cross_signing")) {
             return;
         }
 
@@ -432,10 +432,9 @@ export default createReactClass({
         });
 
         let name = this.state.roomName;
-        if (name == undefined || name == null) name = '';
+        if (typeof name !== 'string') name = '';
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
-
         let badge;
         if (badges) {
             const limitedCount = FormattingUtils.formatCount(notificationCount);
@@ -484,26 +483,10 @@ export default createReactClass({
 
         let ariaLabel = name;
 
-        let dmIndicator;
         let dmOnline;
-        /* Post-cross-signing we don't show DM indicators at all, instead relying on user
-           context to let them know when that is. */
-        if (dmUserId && !SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-            dmIndicator = <img
-                src={require("../../../../res/img/icon_person.svg")}
-                className="mx_RoomTile_dm"
-                width="11"
-                height="13"
-                alt="dm"
-            />;
-        }
-
         const { room } = this.props;
         const member = room.getMember(dmUserId);
-        if (
-            member && member.membership === "join" && room.getJoinedMemberCount() === 2 &&
-            SettingsStore.isFeatureEnabled("feature_presence_in_room_list")
-        ) {
+        if (member && member.membership === "join" && room.getJoinedMemberCount() === 2) {
             const UserOnlineDot = sdk.getComponent('rooms.UserOnlineDot');
             dmOnline = <UserOnlineDot userId={dmUserId} />;
         }
@@ -532,7 +515,7 @@ export default createReactClass({
         }
 
         let privateIcon = null;
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("feature_cross_signing")) {
             if (this.state.joinRule == "invite" && !dmUserId) {
                 privateIcon = <InviteOnlyIcon collapsedPanel={this.props.collapsed} />;
             }
@@ -562,7 +545,6 @@ export default createReactClass({
                         <div className={avatarClasses}>
                             <div className="mx_RoomTile_avatar_container">
                                 <RoomAvatar room={this.props.room} width={24} height={24} />
-                                { dmIndicator }
                                 { e2eIcon }
                             </div>
                         </div>

src/components/views/rooms/RoomTile2.tsx

@@ -0,0 +1,255 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { createRef } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import classNames from "classnames";
+import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
+import AccessibleButton from "../../views/elements/AccessibleButton";
+import RoomAvatar from "../../views/avatars/RoomAvatar";
+import Tooltip from "../../views/elements/Tooltip";
+import dis from '../../../dispatcher/dispatcher';
+import { Key } from "../../../Keyboard";
+import * as RoomNotifs from '../../../RoomNotifs';
+import { EffectiveMembership, getEffectiveMembership } from "../../../stores/room-list/membership";
+import * as Unread from '../../../Unread';
+import * as FormattingUtils from "../../../utils/FormattingUtils";
+
+/*******************************************************************
+ *   CAUTION                                                       *
+ *******************************************************************
+ * This is a work in progress implementation and isn't complete or *
+ * even useful as a component. Please avoid using it until this    *
+ * warning disappears.                                             *
+ *******************************************************************/
+
+enum NotificationColor {
+    // Inverted (None -> Red) because we do integer comparisons on this
+    None, // nothing special
+    Bold, // no badge, show as unread
+    Grey, // unread notified messages
+    Red,  // unread pings
+}
+
+interface IProps {
+    room: Room;
+
+    // TODO: Allow falsifying counts (for invites and stuff)
+    // TODO: Transparency? Was this ever used?
+    // TODO: Incoming call boxes?
+}
+
+interface INotificationState {
+    symbol: string;
+    color: NotificationColor;
+}
+
+interface IState {
+    hover: boolean;
+    notificationState: INotificationState;
+}
+
+export default class RoomTile2 extends React.Component<IProps, IState> {
+    private roomTile = createRef();
+
+    // TODO: Custom status
+    // TODO: Lock icon
+    // TODO: Presence indicator
+    // TODO: e2e shields
+    // TODO: Handle changes to room aesthetics (name, join rules, etc)
+    // TODO: scrollIntoView?
+    // TODO: hover, badge, etc
+    // TODO: isSelected for hover effects
+    // TODO: Context menu
+    // TODO: a11y
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            hover: false,
+            notificationState: this.getNotificationState(),
+        };
+    }
+
+    public componentWillUnmount() {
+        // TODO: Listen for changes to the badge count and update as needed
+    }
+
+    // XXX: This is a bit of an awful-looking hack. We should probably be using state for
+    // this, but instead we're kinda forced to either duplicate the code or thread a variable
+    // through the code paths. This feels like the least evil option.
+    private get roomIsInvite(): boolean {
+        return getEffectiveMembership(this.props.room.getMyMembership()) === EffectiveMembership.Invite;
+    }
+
+    // TODO: Make use of this function when the notification state needs updating.
+    private updateNotificationState() {
+        this.setState({notificationState: this.getNotificationState()});
+    }
+
+    private getNotificationState(): INotificationState {
+        const state: INotificationState = {
+            color: NotificationColor.None,
+            symbol: null,
+        };
+
+        if (this.roomIsInvite) {
+            state.color = NotificationColor.Red;
+            state.symbol = "!";
+        } else {
+            const redNotifs = RoomNotifs.getUnreadNotificationCount(this.props.room, 'highlight');
+            const greyNotifs = RoomNotifs.getUnreadNotificationCount(this.props.room, 'total');
+
+            // For a 'true count' we pick the grey notifications first because they include the
+            // red notifications. If we don't have a grey count for some reason we use the red
+            // count. If that count is broken for some reason, assume zero. This avoids us showing
+            // a badge for 'NaN' (which formats as 'NaNB' for NaN Billion).
+            const trueCount = greyNotifs ? greyNotifs : (redNotifs ? redNotifs : 0);
+
+            // Note: we only set the symbol if we have an actual count. We don't want to show
+            // zero on badges.
+
+            if (redNotifs > 0) {
+                state.color = NotificationColor.Red;
+                state.symbol = FormattingUtils.formatCount(trueCount);
+            } else if (greyNotifs > 0) {
+                state.color = NotificationColor.Grey;
+                state.symbol = FormattingUtils.formatCount(trueCount);
+            } else {
+                // We don't have any notified messages, but we might have unread messages. Let's
+                // find out.
+                const hasUnread = Unread.doesRoomHaveUnreadMessages(this.props.room);
+                if (hasUnread) {
+                    state.color = NotificationColor.Bold;
+                    // no symbol for this state
+                }
+            }
+        }
+
+        return state;
+    }
+
+    private onTileMouseEnter = () => {
+        this.setState({hover: true});
+    };
+
+    private onTileMouseLeave = () => {
+        this.setState({hover: false});
+    };
+
+    private onTileClick = (ev: React.KeyboardEvent) => {
+        dis.dispatch({
+            action: 'view_room',
+            // TODO: Support show_room_tile in new room list
+            show_room_tile: true, // make sure the room is visible in the list
+            room_id: this.props.room.roomId,
+            clear_search: (ev && (ev.key === Key.ENTER || ev.key === Key.SPACE)),
+        });
+    };
+
+    public render(): React.ReactElement {
+        // TODO: Collapsed state
+        // TODO: Invites
+        // TODO: a11y proper
+        // TODO: Render more than bare minimum
+
+        const hasBadge = this.state.notificationState.color > NotificationColor.Bold;
+        const isUnread = this.state.notificationState.color > NotificationColor.None;
+        const classes = classNames({
+            'mx_RoomTile': true,
+            // 'mx_RoomTile_selected': this.state.selected,
+            'mx_RoomTile_unread': isUnread,
+            'mx_RoomTile_unreadNotify': this.state.notificationState.color >= NotificationColor.Grey,
+            'mx_RoomTile_highlight': this.state.notificationState.color >= NotificationColor.Red,
+            'mx_RoomTile_invited': this.roomIsInvite,
+            // 'mx_RoomTile_menuDisplayed': isMenuDisplayed,
+            'mx_RoomTile_noBadges': !hasBadge,
+            // 'mx_RoomTile_transparent': this.props.transparent,
+            // 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
+        });
+
+        const avatarClasses = classNames({
+            'mx_RoomTile_avatar': true,
+        });
+
+
+        let badge;
+        if (hasBadge) {
+            const badgeClasses = classNames({
+                'mx_RoomTile_badge': true,
+                'mx_RoomTile_badgeButton': false, // this.state.badgeHover || isMenuDisplayed
+            });
+            badge = <div className={badgeClasses}>{this.state.notificationState.symbol}</div>;
+        }
+
+        // TODO: the original RoomTile uses state for the room name. Do we need to?
+        let name = this.props.room.name;
+        if (typeof name !== 'string') name = '';
+        name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
+
+        const nameClasses = classNames({
+            'mx_RoomTile_name': true,
+            'mx_RoomTile_invite': this.roomIsInvite,
+            'mx_RoomTile_badgeShown': hasBadge,
+        });
+
+        // TODO: Support collapsed state properly
+        let tooltip = null;
+        if (false) { // isCollapsed
+            if (this.state.hover) {
+                tooltip = <Tooltip className="mx_RoomTile_tooltip" label={this.props.room.name} dir="auto"/>
+            }
+        }
+
+        return (
+            <React.Fragment>
+                <RovingTabIndexWrapper inputRef={this.roomTile}>
+                    {({onFocus, isActive, ref}) =>
+                        <AccessibleButton
+                            onFocus={onFocus}
+                            tabIndex={isActive ? 0 : -1}
+                            inputRef={ref}
+                            className={classes}
+                            onMouseEnter={this.onTileMouseEnter}
+                            onMouseLeave={this.onTileMouseLeave}
+                            onClick={this.onTileClick}
+                            role="treeitem"
+                        >
+                            <div className={avatarClasses}>
+                                <div className="mx_RoomTile_avatar_container">
+                                    <RoomAvatar room={this.props.room} width={24} height={24}/>
+                                </div>
+                            </div>
+                            <div className="mx_RoomTile_nameContainer">
+                                <div className="mx_RoomTile_labelContainer">
+                                    <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
+                                        {name}
+                                    </div>
+                                </div>
+                                {badge}
+                            </div>
+                            {tooltip}
+                        </AccessibleButton>
+                    }
+                </RovingTabIndexWrapper>
+            </React.Fragment>
+        );
+    }
+}

src/components/views/rooms/SendMessageComposer.js

@@ -16,7 +16,7 @@ limitations under the License.
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import EditorModel from '../../../editor/model';
 import {
     htmlSerializeIfNeeded,

src/components/views/rooms/Stickerpicker.js

@@ -18,7 +18,7 @@ import {_t, _td} from '../../../languageHandler';
 import AppTile from '../elements/AppTile';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
@@ -26,8 +26,7 @@ import PersistedElement from "../elements/PersistedElement";
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
 import {ContextMenu} from "../../structures/ContextMenu";
-
-const widgetType = 'm.stickerpicker';
+import {WidgetType} from "../../../widgets/WidgetType";
 
 // This should be below the dialog level (4000), but above the rest of the UI (1000-2000).
 // We sit in a context menu, so this should be given to the context menu.
@@ -87,7 +86,7 @@ export default class Stickerpicker extends React.Component {
         console.log('Removing Stickerpicker widgets');
         if (this.state.widgetId) {
             if (scalarClient) {
-                scalarClient.disableWidgetAssets(widgetType, this.state.widgetId).then(() => {
+                scalarClient.disableWidgetAssets(WidgetType.STICKERPICKER, this.state.widgetId).then(() => {
                     console.log('Assets disabled');
                 }).catch((err) => {
                     console.error('Failed to disable assets');
@@ -364,13 +363,13 @@ export default class Stickerpicker extends React.Component {
         if (SettingsStore.isFeatureEnabled("feature_many_integration_managers")) {
             IntegrationManagers.sharedInstance().openAll(
                 this.props.room,
-                `type_${widgetType}`,
+                `type_${WidgetType.STICKERPICKER.preferred}`,
                 this.state.widgetId,
             );
         } else {
             IntegrationManagers.sharedInstance().getPrimaryManager().open(
                 this.props.room,
-                `type_${widgetType}`,
+                `type_${WidgetType.STICKERPICKER.preferred}`,
                 this.state.widgetId,
             );
         }

src/components/views/rooms/ThirdPartyMemberInfo.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {MatrixEvent} from "matrix-js-sdk";
 import {_t} from "../../../languageHandler";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import * as sdk from "../../../index";
 import Modal from "../../../Modal";
 import {isValid3pidInvite} from "../../../RoomInvite";

src/components/views/settings/ChangePassword.js

@@ -20,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
 import * as sdk from "../../../index";

src/components/views/settings/CrossSigningPanel.js

@@ -36,7 +36,6 @@ export default class CrossSigningPanel extends React.PureComponent {
             userSigningPrivateKeyCached: false,
             sessionBackupKeyCached: false,
             secretStorageKeyInAccount: false,
-            secretStorageKeyNeedsUpgrade: null,
         };
     }
 
@@ -88,7 +87,6 @@ export default class CrossSigningPanel extends React.PureComponent {
         const homeserverSupportsCrossSigning =
             await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing");
         const crossSigningReady = await cli.isCrossSigningReady();
-        const secretStorageKeyNeedsUpgrade = await cli.secretStorageKeyNeedsUpgrade();
 
         this.setState({
             crossSigningPublicKeysOnDevice,
@@ -100,7 +98,6 @@ export default class CrossSigningPanel extends React.PureComponent {
             secretStorageKeyInAccount,
             homeserverSupportsCrossSigning,
             crossSigningReady,
-            secretStorageKeyNeedsUpgrade,
         });
     }
 
@@ -131,8 +128,8 @@ export default class CrossSigningPanel extends React.PureComponent {
     }
 
     _destroySecureSecretStorage = () => {
-        const ConfirmDestoryCrossSigningDialog = sdk.getComponent("dialogs.ConfirmDestroyCrossSigningDialog");
-        Modal.createDialog(ConfirmDestoryCrossSigningDialog, {
+        const ConfirmDestroyCrossSigningDialog = sdk.getComponent("dialogs.ConfirmDestroyCrossSigningDialog");
+        Modal.createDialog(ConfirmDestroyCrossSigningDialog, {
             onFinished: this.onDestroyStorage,
         });
     }
@@ -150,7 +147,6 @@ export default class CrossSigningPanel extends React.PureComponent {
             secretStorageKeyInAccount,
             homeserverSupportsCrossSigning,
             crossSigningReady,
-            secretStorageKeyNeedsUpgrade,
         } = this.state;
 
         let errorSection;
@@ -259,10 +255,6 @@ export default class CrossSigningPanel extends React.PureComponent {
                             <td>{_t("Homeserver feature support:")}</td>
                             <td>{homeserverSupportsCrossSigning ? _t("exists") : _t("not found")}</td>
                         </tr>
-                        <tr>
-                            <td>{_t("Secret Storage key format:")}</td>
-                            <td>{secretStorageKeyNeedsUpgrade ? _t("outdated") : _t("up to date")}</td>
-                        </tr>
                    </tbody></table>
                 </details>
                 {errorSection}

src/components/views/settings/EnableNotificationsButton.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import createReactClass from 'create-react-class';
 import Notifier from "../../../Notifier";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import { _t } from '../../../languageHandler';
 
 export default createReactClass({

src/components/views/settings/EventIndexPanel.js

@@ -163,7 +163,7 @@ export default class EventIndexPanel extends React.Component {
             );
 
             eventIndexingSettings = (
-                <div>
+                <div className='mx_SettingsTab_subsectionText'>
                     {
                         _t( "Riot is missing some components required for securely " +
                             "caching encrypted messages locally. If you'd like to " +
@@ -180,7 +180,7 @@ export default class EventIndexPanel extends React.Component {
             );
         } else {
             eventIndexingSettings = (
-                <div>
+                <div className='mx_SettingsTab_subsectionText'>
                     {
                         _t( "Riot can't securely cache encrypted messages locally " +
                             "while running in a web browser. Use <riotLink>Riot Desktop</riotLink> " +

src/components/views/settings/IntegrationManager.js

@@ -19,7 +19,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import {Key} from "../../../Keyboard";
 
 export default class IntegrationManager extends React.Component {

src/components/views/settings/KeyBackupPanel.js

@@ -75,7 +75,7 @@ export default class KeyBackupPanel extends React.PureComponent {
     async _checkKeyBackupStatus() {
         try {
             const {backupInfo, trustInfo} = await MatrixClientPeg.get().checkKeyBackup();
-            const backupKeyStored = await MatrixClientPeg.get().isKeyBackupKeyStored();
+            const backupKeyStored = Boolean(await MatrixClientPeg.get().isKeyBackupKeyStored());
             this.setState({
                 backupInfo,
                 backupSigStatus: trustInfo,
@@ -326,7 +326,7 @@ export default class KeyBackupPanel extends React.PureComponent {
                     </AccessibleButton>
                 </div>
             );
-            if (this.state.backupKeyStored && !SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            if (this.state.backupKeyStored && !SettingsStore.getValue("feature_cross_signing")) {
                 buttonRow = <p>⚠️ {_t(
                     "Backup key stored in secret storage, but this feature is not " +
                     "enabled on this session. Please enable cross-signing in Labs to " +

src/components/views/settings/SetIdServer.js

@@ -21,7 +21,7 @@ import {_t} from "../../../languageHandler";
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import Modal from '../../../Modal';
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import { getThreepidsWithBindStatus } from '../../../boundThreepids';
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import {abbreviateUrl, unabbreviateUrl} from "../../../utils/UrlUtils";

src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js

@@ -21,7 +21,7 @@ import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Modal from "../../../../../Modal";
-import dis from "../../../../../dispatcher";
+import dis from "../../../../../dispatcher/dispatcher";
 
 export default class AdvancedRoomSettingsTab extends React.Component {
     static propTypes = {

src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js

@@ -20,7 +20,7 @@ import {_t} from "../../../../../languageHandler";
 import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
 import * as sdk from "../../../../..";
 import AccessibleButton from "../../../elements/AccessibleButton";
-import dis from "../../../../../dispatcher";
+import dis from "../../../../../dispatcher/dispatcher";
 import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
 
 export default class GeneralRoomSettingsTab extends React.Component {

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

@@ -33,6 +33,7 @@ const plEventsToLabels = {
     "m.room.tombstone": _td("Upgrade the room"),
     "m.room.encryption": _td("Enable room encryption"),
 
+    // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
     "im.vector.modular.widgets": _td("Modify widgets"),
 };
 
@@ -47,6 +48,7 @@ const plEventsToShow = {
     "m.room.tombstone": {isState: true},
     "m.room.encryption": {isState: true},
 
+    // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
     "im.vector.modular.widgets": {isState: true},
 };
 

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

@@ -0,0 +1,281 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import {_t} from "../../../../../languageHandler";
+import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore";
+import * as sdk from "../../../../../index";
+import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
+import Field from "../../../elements/Field";
+import Slider from "../../../elements/Slider";
+import AccessibleButton from "../../../elements/AccessibleButton";
+import dis from "../../../../../dispatcher/dispatcher";
+import { FontWatcher } from "../../../../../FontWatcher";
+
+export default class AppearanceUserSettingsTab extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            fontSize: SettingsStore.getValue("fontSize", null),
+            ...this._calculateThemeState(),
+            customThemeUrl: "",
+            customThemeMessage: {isError: false, text: ""},
+            useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
+        };
+    }
+
+    _calculateThemeState() {
+        // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
+        // show the right values for things.
+
+        const themeChoice = SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme");
+        const systemThemeExplicit = SettingsStore.getValueAt(
+            SettingLevel.DEVICE, "use_system_theme", null, false, true);
+        const themeExplicit = SettingsStore.getValueAt(
+            SettingLevel.DEVICE, "theme", null, false, true);
+
+        // If the user has enabled system theme matching, use that.
+        if (systemThemeExplicit) {
+            return {
+                theme: themeChoice,
+                useSystemTheme: true,
+            };
+        }
+
+        // If the user has set a theme explicitly, use that (no system theme matching)
+        if (themeExplicit) {
+            return {
+                theme: themeChoice,
+                useSystemTheme: false,
+            };
+        }
+
+        // Otherwise assume the defaults for the settings
+        return {
+            theme: themeChoice,
+            useSystemTheme: SettingsStore.getValueAt(SettingLevel.DEVICE, "use_system_theme"),
+        };
+    }
+
+    _onThemeChange = (e) => {
+        const newTheme = e.target.value;
+        if (this.state.theme === newTheme) return;
+
+        // doing getValue in the .catch will still return the value we failed to set,
+        // so remember what the value was before we tried to set it so we can revert
+        const oldTheme = SettingsStore.getValue('theme');
+        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
+            dis.dispatch({action: 'recheck_theme'});
+            this.setState({theme: oldTheme});
+        });
+        this.setState({theme: newTheme});
+        // The settings watcher doesn't fire until the echo comes back from the
+        // server, so to make the theme change immediately we need to manually
+        // do the dispatch now
+        // XXX: The local echoed value appears to be unreliable, in particular
+        // when settings custom themes(!) so adding forceTheme to override
+        // the value from settings.
+        dis.dispatch({action: 'recheck_theme', forceTheme: newTheme});
+    };
+
+    _onUseSystemThemeChanged = (checked) => {
+        this.setState({useSystemTheme: checked});
+        SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, checked);
+        dis.dispatch({action: 'recheck_theme'});
+    };
+
+    _onFontSizeChanged = (size) => {
+        this.setState({fontSize: size});
+        SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, size);
+    };
+
+    _onValidateFontSize = ({value}) => {
+        console.log({value});
+
+        const parsedSize = parseFloat(value);
+        const min = FontWatcher.MIN_SIZE;
+        const max = FontWatcher.MAX_SIZE;
+
+        if (isNaN(parsedSize)) {
+            return {valid: false, feedback: _t("Size must be a number")};
+        }
+
+        if (!(min <= parsedSize && parsedSize <= max)) {
+            return {
+                valid: false,
+                feedback: _t('Custom font size can only be between %(min)s pt and %(max)s pt', {min, max}),
+            };
+        }
+
+        SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, value);
+        return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
+    }
+
+    _onAddCustomTheme = async () => {
+        let currentThemes = SettingsStore.getValue("custom_themes");
+        if (!currentThemes) currentThemes = [];
+        currentThemes = currentThemes.map(c => c); // cheap clone
+
+        if (this._themeTimer) {
+            clearTimeout(this._themeTimer);
+        }
+
+        try {
+            const r = await fetch(this.state.customThemeUrl);
+            const themeInfo = await r.json();
+            if (!themeInfo || typeof(themeInfo['name']) !== 'string' || typeof(themeInfo['colors']) !== 'object') {
+                this.setState({customThemeMessage: {text: _t("Invalid theme schema."), isError: true}});
+                return;
+            }
+            currentThemes.push(themeInfo);
+        } catch (e) {
+            console.error(e);
+            this.setState({customThemeMessage: {text: _t("Error downloading theme information."), isError: true}});
+            return; // Don't continue on error
+        }
+
+        await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
+        this.setState({customThemeUrl: "", customThemeMessage: {text: _t("Theme added!"), isError: false}});
+
+        this._themeTimer = setTimeout(() => {
+            this.setState({customThemeMessage: {text: "", isError: false}});
+        }, 3000);
+    };
+
+    _onCustomThemeChange = (e) => {
+        this.setState({customThemeUrl: e.target.value});
+    };
+
+    render() {
+        return (
+            <div className="mx_SettingsTab">
+                <div className="mx_SettingsTab_heading">{_t("Appearance")}</div>
+                {this._renderThemeSection()}
+                {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this._renderFontSection() : null}
+            </div>
+        );
+    }
+
+    _renderThemeSection() {
+        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+        const LabelledToggleSwitch = sdk.getComponent("views.elements.LabelledToggleSwitch");
+
+        const themeWatcher = new ThemeWatcher();
+        let systemThemeSection;
+        if (themeWatcher.isSystemThemeSupported()) {
+            systemThemeSection = <div>
+                <LabelledToggleSwitch
+                    value={this.state.useSystemTheme}
+                    label={SettingsStore.getDisplayName("use_system_theme")}
+                    onChange={this._onUseSystemThemeChanged}
+                />
+            </div>;
+        }
+
+        let customThemeForm;
+        if (SettingsStore.isFeatureEnabled("feature_custom_themes")) {
+            let messageElement = null;
+            if (this.state.customThemeMessage.text) {
+                if (this.state.customThemeMessage.isError) {
+                    messageElement = <div className='text-error'>{this.state.customThemeMessage.text}</div>;
+                } else {
+                    messageElement = <div className='text-success'>{this.state.customThemeMessage.text}</div>;
+                }
+            }
+            customThemeForm = (
+                <div className='mx_SettingsTab_section'>
+                    <form onSubmit={this._onAddCustomTheme}>
+                        <Field
+                            label={_t("Custom theme URL")}
+                            type='text'
+                            id='mx_GeneralUserSettingsTab_customThemeInput'
+                            autoComplete="off"
+                            onChange={this._onCustomThemeChange}
+                            value={this.state.customThemeUrl}
+                        />
+                        <AccessibleButton
+                            onClick={this._onAddCustomTheme}
+                            type="submit" kind="primary_sm"
+                            disabled={!this.state.customThemeUrl.trim()}
+                        >{_t("Add theme")}</AccessibleButton>
+                        {messageElement}
+                    </form>
+                </div>
+            );
+        }
+
+        const themes = Object.entries(enumerateThemes())
+            .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));
+        const orderedThemes = [...builtInThemes, ...customThemes];
+        return (
+            <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_themeSection">
+                <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
+                {systemThemeSection}
+                <Field
+                    id="theme" label={_t("Theme")} element="select"
+                    value={this.state.theme} onChange={this._onThemeChange}
+                    disabled={this.state.useSystemTheme}
+                >
+                    {orderedThemes.map(theme => {
+                        return <option key={theme.id} value={theme.id}>{theme.name}</option>;
+                    })}
+                </Field>
+                {customThemeForm}
+                <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
+           </div>
+        );
+    }
+
+    _renderFontSection() {
+        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+        return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
+            <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
+            <div className="mx_AppearanceUserSettingsTab_fontSlider">
+                <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
+                <Slider
+                    values={[13, 15, 16, 18, 20]}
+                    value={this.state.fontSize}
+                    onSelectionChange={this._onFontSizeChanged}
+                    displayFunc={value => {}}
+                    disabled={this.state.useCustomFontSize}
+                />
+                <div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
+            </div>
+            <SettingsFlag
+                name="useCustomFontSize"
+                level={SettingLevel.ACCOUNT}
+                onChange={(checked)=> this.setState({useCustomFontSize: checked})}
+            />
+            <Field
+                type="text"
+                label={_t("Font size")}
+                autoComplete="off"
+                placeholder={this.state.fontSize.toString()}
+                value={this.state.fontSize.toString()}
+                id="font_size_field"
+                onValidate={this._onValidateFontSize}
+                onChange={(value) => this.setState({fontSize: value.target.value})}
+                disabled={!this.state.useCustomFontSize}
+            />
+        </div>;
+    }
+}

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

@@ -19,7 +19,6 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import ProfileSettings from "../../ProfileSettings";
-import Field from "../../../elements/Field";
 import * as languageHandler from "../../../../../languageHandler";
 import {SettingLevel} from "../../../../../settings/SettingsStore";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -27,17 +26,17 @@ import LanguageDropdown from "../../../elements/LanguageDropdown";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog";
 import PropTypes from "prop-types";
-import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
 import PlatformPeg from "../../../../../PlatformPeg";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
 import Modal from "../../../../../Modal";
-import dis from "../../../../../dispatcher";
+import dis from "../../../../../dispatcher/dispatcher";
 import {Service, startTermsFlow} from "../../../../../Terms";
 import {SERVICE_TYPES} from "matrix-js-sdk";
 import IdentityAuthClient from "../../../../../IdentityAuthClient";
 import {abbreviateUrl} from "../../../../../utils/UrlUtils";
 import { getThreepidsWithBindStatus } from '../../../../../boundThreepids';
+import Spinner from "../../../elements/Spinner";
 
 export default class GeneralUserSettingsTab extends React.Component {
     static propTypes = {
@@ -60,9 +59,7 @@ export default class GeneralUserSettingsTab extends React.Component {
             },
             emails: [],
             msisdns: [],
-            ...this._calculateThemeState(),
-            customThemeUrl: "",
-            customThemeMessage: {isError: false, text: ""},
+            loading3pids: true, // whether or not the emails and msisdns have been loaded
         };
 
         this.dispatcherRef = dis.register(this._onAction);
@@ -91,39 +88,6 @@ export default class GeneralUserSettingsTab extends React.Component {
         dis.unregister(this.dispatcherRef);
     }
 
-    _calculateThemeState() {
-        // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
-        // show the right values for things.
-
-        const themeChoice = SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme");
-        const systemThemeExplicit = SettingsStore.getValueAt(
-            SettingLevel.DEVICE, "use_system_theme", null, false, true);
-        const themeExplicit = SettingsStore.getValueAt(
-            SettingLevel.DEVICE, "theme", null, false, true);
-
-        // If the user has enabled system theme matching, use that.
-        if (systemThemeExplicit) {
-            return {
-                theme: themeChoice,
-                useSystemTheme: true,
-            };
-        }
-
-        // If the user has set a theme explicitly, use that (no system theme matching)
-        if (themeExplicit) {
-            return {
-                theme: themeChoice,
-                useSystemTheme: false,
-            };
-        }
-
-        // Otherwise assume the defaults for the settings
-        return {
-            theme: themeChoice,
-            useSystemTheme: SettingsStore.getValueAt(SettingLevel.DEVICE, "use_system_theme"),
-        };
-    }
-
     _onAction = (payload) => {
         if (payload.action === 'id_server_changed') {
             this.setState({haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl())});
@@ -158,8 +122,11 @@ export default class GeneralUserSettingsTab extends React.Component {
             );
             console.warn(e);
         }
-        this.setState({ emails: threepids.filter((a) => a.medium === 'email') });
-        this.setState({ msisdns: threepids.filter((a) => a.medium === 'msisdn') });
+        this.setState({
+            emails: threepids.filter((a) => a.medium === 'email'),
+            msisdns: threepids.filter((a) => a.medium === 'msisdn'),
+            loading3pids: false,
+        });
     }
 
     async _checkTerms() {
@@ -214,33 +181,6 @@ export default class GeneralUserSettingsTab extends React.Component {
         PlatformPeg.get().reload();
     };
 
-    _onThemeChange = (e) => {
-        const newTheme = e.target.value;
-        if (this.state.theme === newTheme) return;
-
-        // doing getValue in the .catch will still return the value we failed to set,
-        // so remember what the value was before we tried to set it so we can revert
-        const oldTheme = SettingsStore.getValue('theme');
-        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
-            dis.dispatch({action: 'recheck_theme'});
-            this.setState({theme: oldTheme});
-        });
-        this.setState({theme: newTheme});
-        // The settings watcher doesn't fire until the echo comes back from the
-        // server, so to make the theme change immediately we need to manually
-        // do the dispatch now
-        // XXX: The local echoed value appears to be unreliable, in particular
-        // when settings custom themes(!) so adding forceTheme to override
-        // the value from settings.
-        dis.dispatch({action: 'recheck_theme', forceTheme: newTheme});
-    };
-
-    _onUseSystemThemeChanged = (checked) => {
-        this.setState({useSystemTheme: checked});
-        SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, checked);
-        dis.dispatch({action: 'recheck_theme'});
-    };
-
     _onPasswordChangeError = (err) => {
         // TODO: Figure out a design that doesn't involve replacing the current dialog
         let errMsg = err.error || "";
@@ -277,41 +217,6 @@ export default class GeneralUserSettingsTab extends React.Component {
         });
     };
 
-    _onAddCustomTheme = async () => {
-        let currentThemes = SettingsStore.getValue("custom_themes");
-        if (!currentThemes) currentThemes = [];
-        currentThemes = currentThemes.map(c => c); // cheap clone
-
-        if (this._themeTimer) {
-            clearTimeout(this._themeTimer);
-        }
-
-        try {
-            const r = await fetch(this.state.customThemeUrl);
-            const themeInfo = await r.json();
-            if (!themeInfo || typeof(themeInfo['name']) !== 'string' || typeof(themeInfo['colors']) !== 'object') {
-                this.setState({customThemeMessage: {text: _t("Invalid theme schema."), isError: true}});
-                return;
-            }
-            currentThemes.push(themeInfo);
-        } catch (e) {
-            console.error(e);
-            this.setState({customThemeMessage: {text: _t("Error downloading theme information."), isError: true}});
-            return; // Don't continue on error
-        }
-
-        await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
-        this.setState({customThemeUrl: "", customThemeMessage: {text: _t("Theme added!"), isError: false}});
-
-        this._themeTimer = setTimeout(() => {
-            this.setState({customThemeMessage: {text: "", isError: false}});
-        }, 3000);
-    };
-
-    _onCustomThemeChange = (e) => {
-        this.setState({customThemeUrl: e.target.value});
-    };
-
     _renderProfileSection() {
         return (
             <div className="mx_SettingsTab_section">
@@ -325,7 +230,6 @@ export default class GeneralUserSettingsTab extends React.Component {
         const ChangePassword = sdk.getComponent("views.settings.ChangePassword");
         const EmailAddresses = sdk.getComponent("views.settings.account.EmailAddresses");
         const PhoneNumbers = sdk.getComponent("views.settings.account.PhoneNumbers");
-        const Spinner = sdk.getComponent("views.elements.Spinner");
 
         let passwordChangeForm = (
             <ChangePassword
@@ -344,18 +248,24 @@ export default class GeneralUserSettingsTab extends React.Component {
         // For newer homeservers with separate 3PID add and bind methods (MSC2290),
         // there is no such concern, so we can always show the HS account 3PIDs.
         if (this.state.haveIdServer || this.state.serverSupportsSeparateAddAndBind === true) {
-            threepidSection = <div>
-                <span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
-                <EmailAddresses
+            const emails = this.state.loading3pids
+                ? <Spinner />
+                : <EmailAddresses
                     emails={this.state.emails}
                     onEmailsChange={this._onEmailsChange}
-                />
-
-                <span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
-                <PhoneNumbers
+                />;
+            const msisdns = this.state.loading3pids
+                ? <Spinner />
+                : <PhoneNumbers
                     msisdns={this.state.msisdns}
                     onMsisdnsChange={this._onMsisdnsChange}
-                />
+                />;
+            threepidSection = <div>
+                <span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
+                {emails}
+
+                <span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
+                {msisdns}
             </div>;
         } else if (this.state.serverSupportsSeparateAddAndBind === null) {
             threepidSection = <Spinner />;
@@ -391,77 +301,6 @@ export default class GeneralUserSettingsTab extends React.Component {
         );
     }
 
-    _renderThemeSection() {
-        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
-        const LabelledToggleSwitch = sdk.getComponent("views.elements.LabelledToggleSwitch");
-
-        const themeWatcher = new ThemeWatcher();
-        let systemThemeSection;
-        if (themeWatcher.isSystemThemeSupported()) {
-            systemThemeSection = <div>
-                <LabelledToggleSwitch
-                    value={this.state.useSystemTheme}
-                    label={SettingsStore.getDisplayName("use_system_theme")}
-                    onChange={this._onUseSystemThemeChanged}
-                />
-            </div>;
-        }
-
-        let customThemeForm;
-        if (SettingsStore.isFeatureEnabled("feature_custom_themes")) {
-            let messageElement = null;
-            if (this.state.customThemeMessage.text) {
-                if (this.state.customThemeMessage.isError) {
-                    messageElement = <div className='text-error'>{this.state.customThemeMessage.text}</div>;
-                } else {
-                    messageElement = <div className='text-success'>{this.state.customThemeMessage.text}</div>;
-                }
-            }
-            customThemeForm = (
-                <div className='mx_SettingsTab_section'>
-                    <form onSubmit={this._onAddCustomTheme}>
-                        <Field
-                            label={_t("Custom theme URL")}
-                            type='text'
-                            autoComplete="off"
-                            onChange={this._onCustomThemeChange}
-                            value={this.state.customThemeUrl}
-                        />
-                        <AccessibleButton
-                            onClick={this._onAddCustomTheme}
-                            type="submit" kind="primary_sm"
-                            disabled={!this.state.customThemeUrl.trim()}
-                        >{_t("Add theme")}</AccessibleButton>
-                        {messageElement}
-                    </form>
-                </div>
-            );
-        }
-
-        const themes = Object.entries(enumerateThemes())
-            .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));
-        const orderedThemes = [...builtInThemes, ...customThemes];
-        return (
-            <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_themeSection">
-                <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
-                {systemThemeSection}
-                <Field label={_t("Theme")} element="select"
-                       value={this.state.theme} onChange={this._onThemeChange}
-                       disabled={this.state.useSystemTheme}
-                >
-                    {orderedThemes.map(theme => {
-                        return <option key={theme.id} value={theme.id}>{theme.name}</option>;
-                    })}
-                </Field>
-                {customThemeForm}
-                <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
-            </div>
-        );
-    }
-
     _renderDiscoverySection() {
         const SetIdServer = sdk.getComponent("views.settings.SetIdServer");
 
@@ -491,12 +330,15 @@ export default class GeneralUserSettingsTab extends React.Component {
         const EmailAddresses = sdk.getComponent("views.settings.discovery.EmailAddresses");
         const PhoneNumbers = sdk.getComponent("views.settings.discovery.PhoneNumbers");
 
+        const emails = this.state.loading3pids ? <Spinner /> : <EmailAddresses emails={this.state.emails} />;
+        const msisdns = this.state.loading3pids ? <Spinner /> : <PhoneNumbers msisdns={this.state.msisdns} />;
+
         const threepidSection = this.state.haveIdServer ? <div className='mx_GeneralUserSettingsTab_discovery'>
             <span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
-            <EmailAddresses emails={this.state.emails} />
+            {emails}
 
             <span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
-            <PhoneNumbers msisdns={this.state.msisdns} />
+            {msisdns}
         </div> : null;
 
         return (
@@ -547,7 +389,6 @@ export default class GeneralUserSettingsTab extends React.Component {
                 {this._renderProfileSection()}
                 {this._renderAccountSection()}
                 {this._renderLanguageSection()}
-                {this._renderThemeSection()}
                 <div className="mx_SettingsTab_heading">{discoWarning} {_t("Discovery")}</div>
                 {this._renderDiscoverySection()}
                 {this._renderIntegrationManagerSection() /* Has its own title */}

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

@@ -25,11 +25,13 @@ import Analytics from "../../../../../Analytics";
 import Modal from "../../../../../Modal";
 import * as sdk from "../../../../..";
 import {sleep} from "../../../../../utils/promise";
+import dis from "../../../../../dispatcher/dispatcher";
 
 export class IgnoredUser extends React.Component {
     static propTypes = {
         userId: PropTypes.string.isRequired,
         onUnignored: PropTypes.func.isRequired,
+        inProgress: PropTypes.bool.isRequired,
     };
 
     _onUnignoreClicked = (e) => {
@@ -40,7 +42,7 @@ export class IgnoredUser extends React.Component {
         const id = `mx_SecurityUserSettingsTab_ignoredUser_${this.props.userId}`;
         return (
             <div className='mx_SecurityUserSettingsTab_ignoredUser'>
-                <AccessibleButton onClick={this._onUnignoreClicked} kind='primary_sm' aria-describedby={id}>
+                <AccessibleButton onClick={this._onUnignoreClicked} kind='primary_sm' aria-describedby={id} disabled={this.props.inProgress}>
                     { _t('Unignore') }
                 </AccessibleButton>
                 <span id={id}>{ this.props.userId }</span>
@@ -50,6 +52,10 @@ export class IgnoredUser extends React.Component {
 }
 
 export default class SecurityUserSettingsTab extends React.Component {
+    static propTypes = {
+        closeSettingsFn: PropTypes.func.isRequired,
+    };
+
     constructor() {
         super();
 
@@ -58,9 +64,29 @@ export default class SecurityUserSettingsTab extends React.Component {
 
         this.state = {
             ignoredUserIds: MatrixClientPeg.get().getIgnoredUsers(),
+            waitingUnignored: [],
             managingInvites: false,
             invitedRoomAmt: invitedRooms.length,
         };
+
+        this._onAction = this._onAction.bind(this);
+    }
+
+
+    _onAction({action}) {
+        if (action === "ignore_state_changed") {
+            const ignoredUserIds = MatrixClientPeg.get().getIgnoredUsers();
+            const newWaitingUnignored = this.state.waitingUnignored.filter(e=> ignoredUserIds.includes(e));
+            this.setState({ignoredUserIds, waitingUnignored: newWaitingUnignored});
+        }
+    }
+
+    componentDidMount() {
+        this.dispatcherRef = dis.register(this._onAction);
+    }
+
+    componentWillUnmount() {
+        dis.unregister(this.dispatcherRef);
     }
 
     _updateBlacklistDevicesFlag = (checked) => {
@@ -85,17 +111,24 @@ export default class SecurityUserSettingsTab extends React.Component {
         );
     };
 
+    _onGoToUserProfileClick = () => {
+        dis.dispatch({
+            action: 'view_user_info',
+            userId: MatrixClientPeg.get().getUserId(),
+        });
+        this.props.closeSettingsFn();
+    }
+
     _onUserUnignored = async (userId) => {
-        // Don't use this.state to get the ignored user list as it might be
-        // ever so slightly outdated. Instead, prefer to get a fresh list and
-        // update that.
-        const ignoredUsers = MatrixClientPeg.get().getIgnoredUsers();
-        const index = ignoredUsers.indexOf(userId);
+        const {ignoredUserIds, waitingUnignored} = this.state;
+        const currentlyIgnoredUserIds = ignoredUserIds.filter(e => !waitingUnignored.includes(e));
+
+        const index = currentlyIgnoredUserIds.indexOf(userId);
         if (index !== -1) {
-            ignoredUsers.splice(index, 1);
-            MatrixClientPeg.get().setIgnoredUsers(ignoredUsers);
+            currentlyIgnoredUserIds.splice(index, 1);
+            this.setState(({waitingUnignored}) => ({waitingUnignored: [...waitingUnignored, userId]}));
+            MatrixClientPeg.get().setIgnoredUsers(currentlyIgnoredUserIds);
         }
-        this.setState({ignoredUsers});
     };
 
     _getInvitedRooms = () => {
@@ -201,10 +234,17 @@ export default class SecurityUserSettingsTab extends React.Component {
     }
 
     _renderIgnoredUsers() {
-        if (!this.state.ignoredUserIds || this.state.ignoredUserIds.length === 0) return null;
+        const {waitingUnignored, ignoredUserIds} = this.state;
 
-        const userIds = this.state.ignoredUserIds
-            .map((u) => <IgnoredUser userId={u} onUnignored={this._onUserUnignored} key={u} />);
+        if (!ignoredUserIds || ignoredUserIds.length === 0) return null;
+
+        const userIds = ignoredUserIds
+            .map((u) => <IgnoredUser
+             userId={u}
+             onUnignored={this._onUserUnignored}
+             key={u}
+             inProgress={waitingUnignored.includes(u)}
+             />);
 
         return (
             <div className='mx_SettingsTab_section'>
@@ -254,15 +294,12 @@ export default class SecurityUserSettingsTab extends React.Component {
             </div>
         );
 
-        let eventIndex;
-        if (SettingsStore.isFeatureEnabled("feature_event_indexing")) {
-            eventIndex = (
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Message search")}</span>
-                    <EventIndexPanel />
-                </div>
-            );
-        }
+        const eventIndex = (
+            <div className="mx_SettingsTab_section">
+                <span className="mx_SettingsTab_subheading">{_t("Message search")}</span>
+                <EventIndexPanel />
+            </div>
+        );
 
         // XXX: There's no such panel in the current cross-signing designs, but
         // it's useful to have for testing the feature. If there's no interest
@@ -270,7 +307,7 @@ export default class SecurityUserSettingsTab extends React.Component {
         // can remove this.
         const CrossSigningPanel = sdk.getComponent('views.settings.CrossSigningPanel');
         let crossSigning;
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("feature_cross_signing")) {
             crossSigning = (
                 <div className='mx_SettingsTab_section'>
                     <span className="mx_SettingsTab_subheading">{_t("Cross-signing")}</span>
@@ -287,7 +324,18 @@ export default class SecurityUserSettingsTab extends React.Component {
             <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
                 <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Sessions")}</span>
+                    <span className="mx_SettingsTab_subheading">{_t("Where you’re logged in")}</span>
+                    <span>
+                        {_t(
+                            "Manage the names of and sign out of your sessions below or " +
+                            "<a>verify them in your User Profile</a>.", {},
+                            {
+                                a: sub => <AccessibleButton kind="link" onClick={this._onGoToUserProfileClick}>
+                                    {sub}
+                                </AccessibleButton>,
+                            },
+                        )}
+                    </span>
                     <div className='mx_SettingsTab_subsectionText'>
                         {_t("A session's public name is visible to people you communicate with")}
                         <DevicesPanel />

src/components/views/toasts/BulkUnverifiedSessionsToast.js

@@ -0,0 +1,56 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+import dis from "../../../dispatcher/dispatcher";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import DeviceListener from '../../../DeviceListener';
+import FormButton from '../elements/FormButton';
+import { replaceableComponent } from '../../../utils/replaceableComponent';
+
+@replaceableComponent("views.toasts.BulkUnverifiedSessionsToast")
+export default class BulkUnverifiedSessionsToast extends React.PureComponent {
+    static propTypes = {
+        deviceIds: PropTypes.array,
+    }
+
+    _onLaterClick = () => {
+        DeviceListener.sharedInstance().dismissUnverifiedSessions(this.props.deviceIds);
+    };
+
+    _onReviewClick = async () => {
+        DeviceListener.sharedInstance().dismissUnverifiedSessions(this.props.deviceIds);
+
+        dis.dispatch({
+            action: 'view_user_info',
+            userId: MatrixClientPeg.get().getUserId(),
+        });
+    };
+
+    render() {
+        return (<div>
+            <div className="mx_Toast_description">
+                {_t("Verify all your sessions to ensure your account & messages are safe")}
+            </div>
+            <div className="mx_Toast_buttons" aria-live="off">
+                <FormButton label={_t("Later")} kind="danger" onClick={this._onLaterClick} />
+                <FormButton label={_t("Review")} onClick={this._onReviewClick} />
+            </div>
+        </div>);
+    }
+}

src/components/views/toasts/SetupEncryptionToast.js

@@ -17,7 +17,6 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import Modal from '../../../Modal';
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
 import DeviceListener from '../../../DeviceListener';
@@ -31,7 +30,6 @@ export default class SetupEncryptionToast extends React.PureComponent {
             'set_up_encryption',
             'verify_this_session',
             'upgrade_encryption',
-            'upgrade_ssss',
         ]).isRequired,
     };
 
@@ -39,24 +37,6 @@ export default class SetupEncryptionToast extends React.PureComponent {
         DeviceListener.sharedInstance().dismissEncryptionSetup();
     };
 
-    async _waitForCompletion() {
-        if (this.props.kind === 'upgrade_ssss') {
-            return new Promise(resolve => {
-                const recheck = async () => {
-                    const needsUpgrade = await MatrixClientPeg.get().secretStorageKeyNeedsUpgrade();
-                    if (!needsUpgrade) {
-                        MatrixClientPeg.get().removeListener('accountData', recheck);
-                        resolve();
-                    }
-                };
-                MatrixClientPeg.get().on('accountData', recheck);
-                recheck();
-            });
-        } else {
-            return;
-        }
-    }
-
     _onSetupClick = async () => {
         if (this.props.kind === "verify_this_session") {
             Modal.createTrackedDialog('Verify session', 'Verify session', SetupEncryptionDialog,
@@ -68,7 +48,6 @@ export default class SetupEncryptionToast extends React.PureComponent {
             );
             try {
                 await accessSecretStorage();
-                await this._waitForCompletion();
             } finally {
                 modal.close();
             }
@@ -82,16 +61,14 @@ export default class SetupEncryptionToast extends React.PureComponent {
                 return _t('Verify yourself & others to keep your chats safe');
             case 'verify_this_session':
                 return _t('Other users may not trust it');
-            case 'upgrade_ssss':
-                return _t('Update your secure storage');
         }
     }
 
     getSetupCaption() {
         switch (this.props.kind) {
             case 'set_up_encryption':
+                return _t('Set up');
             case 'upgrade_encryption':
-            case 'upgrade_ssss':
                 return _t('Upgrade');
             case 'verify_this_session':
                 return _t('Verify');

src/components/views/toasts/UnverifiedSessionToast.js

@@ -17,8 +17,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import Modal from "../../../Modal";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import Modal from '../../../Modal';
 import DeviceListener from '../../../DeviceListener';
 import NewSessionReviewDialog from '../dialogs/NewSessionReviewDialog';
 import FormButton from '../elements/FormButton';
@@ -27,44 +27,39 @@ import { replaceableComponent } from '../../../utils/replaceableComponent';
 @replaceableComponent("views.toasts.UnverifiedSessionToast")
 export default class UnverifiedSessionToast extends React.PureComponent {
     static propTypes = {
-        toastKey: PropTypes.string.isRequired,
-        device: PropTypes.object.isRequired,
-    };
+        deviceId: PropTypes.string,
+    }
 
     _onLaterClick = () => {
-        const { device } = this.props;
-        DeviceListener.sharedInstance().dismissVerification(device.deviceId);
+        DeviceListener.sharedInstance().dismissUnverifiedSessions([this.props.deviceId]);
     };
 
     _onReviewClick = async () => {
-        const { device } = this.props;
-
+        const cli = MatrixClientPeg.get();
         Modal.createTrackedDialog('New Session Review', 'Starting dialog', NewSessionReviewDialog, {
-            userId: MatrixClientPeg.get().getUserId(),
-            device,
+            userId: cli.getUserId(),
+            device: cli.getStoredDevice(cli.getUserId(), this.props.deviceId),
             onFinished: (r) => {
                 if (!r) {
                     /* This'll come back false if the user clicks "this wasn't me" and saw a warning dialog */
-                    this._onLaterClick();
+                    DeviceListener.sharedInstance().dismissUnverifiedSessions([this.props.deviceId]);
                 }
             },
         }, null, /* priority = */ false, /* static = */ true);
     };
 
     render() {
-        const { device } = this.props;
+        const cli = MatrixClientPeg.get();
+        const device = cli.getStoredDevice(cli.getUserId(), this.props.deviceId);
 
         return (<div>
             <div className="mx_Toast_description">
-                <span className="mx_Toast_deviceName">
-                    {device.getDisplayName()}
-                </span> <span className="mx_Toast_deviceID">
-                    ({device.deviceId})
-                </span>
+                {_t(
+                    "Verify the new login accessing your account: %(name)s", { name: device.getDisplayName()})}
             </div>
             <div className="mx_Toast_buttons" aria-live="off">
                 <FormButton label={_t("Later")} kind="danger" onClick={this._onLaterClick} />
-                <FormButton label={_t("Review")} onClick={this._onReviewClick} />
+                <FormButton label={_t("Verify")} onClick={this._onReviewClick} />
             </div>
         </div>);
     }

src/components/views/toasts/VerificationRequestToast.js

@@ -21,7 +21,7 @@ import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
 import {userLabelForEventRoom} from "../../../utils/KeyVerificationStateObserver";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import ToastStore from "../../../stores/ToastStore";
 import Modal from "../../../Modal";
 
@@ -51,7 +51,7 @@ export default class VerificationRequestToast extends React.PureComponent {
 
         if (request.isSelfVerification) {
             const cli = MatrixClientPeg.get();
-            this.setState({device: await cli.getStoredDevice(cli.getUserId(), request.channel.deviceId)});
+            this.setState({device: cli.getStoredDevice(cli.getUserId(), request.channel.deviceId)});
         }
     }
 

src/components/views/verification/VerificationQREmojiOptions.js

@@ -20,8 +20,8 @@ import { _t } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import VerificationQRCode from "../elements/crypto/VerificationQRCode";
-import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import Spinner from "../elements/Spinner";
+import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
 
 @replaceableComponent("views.verification.VerificationQREmojiOptions")
 export default class VerificationQREmojiOptions extends React.Component {
@@ -31,31 +31,17 @@ export default class VerificationQREmojiOptions extends React.Component {
         onStartEmoji: PropTypes.func.isRequired,
     };
 
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            qrProps: null,
-        };
-
-        this._prepareQrCode(props.request);
-    }
-
-    async _prepareQrCode(request: VerificationRequest) {
-        try {
-            const props = await VerificationQRCode.getPropsForRequest(request);
-            this.setState({qrProps: props});
-        } catch (e) {
-            console.error(e);
-            // We just won't show a QR code
-        }
-    }
-
     render() {
-        let qrCode = <div className='mx_VerificationQREmojiOptions_noQR'><Spinner /></div>;
-        if (this.state.qrProps) {
-            qrCode = <VerificationQRCode {...this.state.qrProps} />;
+        const {request} = this.props;
+        const showQR = request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD);
+
+        let qrCode;
+        if (showQR) {
+            qrCode = <VerificationQRCode qrCodeData={request.qrCodeData} />;
+        } else {
+            qrCode = <div className='mx_VerificationQREmojiOptions_noQR'><Spinner /></div>;
         }
+
         return (
             <div>
                 {_t("Verify this session by completing one of the following:")}

src/components/views/verification/VerificationShowSas.js

@@ -20,6 +20,7 @@ import { _t, _td } from '../../../languageHandler';
 import {PendingActionSpinner} from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
 import DialogButtons from "../elements/DialogButtons";
+import { fixupColorFonts } from '../../../utils/FontManager';
 
 function capFirst(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
@@ -29,6 +30,7 @@ export default class VerificationShowSas extends React.Component {
     static propTypes = {
         pending: PropTypes.bool,
         displayName: PropTypes.string, // required if pending is true
+        device: PropTypes.object,
         onDone: PropTypes.func.isRequired,
         onCancel: PropTypes.func.isRequired,
         sas: PropTypes.object.isRequired,
@@ -44,6 +46,13 @@ export default class VerificationShowSas extends React.Component {
         };
     }
 
+    componentWillMount() {
+        // As this component is also used before login (during complete security),
+        // also make sure we have a working emoji font to display the SAS emojis here.
+        // This is also done from LoggedInView.
+        fixupColorFonts();
+    }
+
     onMatchClick = () => {
         this.setState({ pending: true });
         this.props.onDone();
@@ -108,10 +117,16 @@ export default class VerificationShowSas extends React.Component {
             let text;
             if (this.state.pending) {
                 if (this.props.isSelf) {
-                    text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
-                        deviceName: this.props.device.getDisplayName(),
-                        deviceId: this.props.device.deviceId,
-                    });
+                    // device shouldn't be null in this situation but it can be, eg. if the device is
+                    // logged out during verification
+                    if (this.props.device) {
+                        text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
+                            deviceName: this.props.device ? this.props.device.getDisplayName() : '',
+                            deviceId: this.props.device ? this.props.device.deviceId : '',
+                        });
+                    } else {
+                        text = _t("Waiting for your other session to verify…");
+                    }
                 } else {
                     const {displayName} = this.props;
                     text = _t("Waiting for %(displayName)s to verify…", {displayName});
@@ -132,12 +147,12 @@ export default class VerificationShowSas extends React.Component {
             />;
         } else {
             confirm = <React.Fragment>
-                <AccessibleButton onClick={this.onMatchClick} kind="primary">
-                    { _t("They match") }
-                </AccessibleButton>
                 <AccessibleButton onClick={this.onDontMatchClick} kind="danger">
                     { _t("They don't match") }
                 </AccessibleButton>
+                <AccessibleButton onClick={this.onMatchClick} kind="primary">
+                    { _t("They match") }
+                </AccessibleButton>
             </React.Fragment>;
         }
 

src/components/views/voip/CallPreview.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import CallHandler from '../../../CallHandler';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 
 export default createReactClass({

src/components/views/voip/CallView.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import CallHandler from '../../../CallHandler';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';

src/components/views/voip/IncomingCallBox.js

@@ -19,7 +19,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 

src/components/views/voip/VideoView.js

@@ -22,7 +22,7 @@ import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 
 import SettingsStore from "../../../settings/SettingsStore";