Merge branch 'develop' into develop

src/components/structures/ContextMenu.tsx

@@ -416,8 +416,9 @@ export const aboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFace.None
     return menuOptions;
 };
 
-export const useContextMenu = (): [boolean, RefObject<HTMLElement>, () => void, () => void, (val: boolean) => void] => {
-    const button = useRef<HTMLElement>(null);
+type ContextMenuTuple<T> = [boolean, RefObject<T>, () => void, () => void, (val: boolean) => void];
+export const useContextMenu = <T extends any = HTMLElement>(): ContextMenuTuple<T> => {
+    const button = useRef<T>(null);
     const [isOpen, setIsOpen] = useState(false);
     const open = () => {
         setIsOpen(true);

src/components/structures/GroupFilterPanel.js

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import TagOrderStore from '../../stores/TagOrderStore';
+import GroupFilterOrderStore from '../../stores/GroupFilterOrderStore';
 
 import GroupActions from '../../actions/GroupActions';
 
@@ -31,7 +31,7 @@ import AutoHideScrollbar from "./AutoHideScrollbar";
 import SettingsStore from "../../settings/SettingsStore";
 import UserTagTile from "../views/elements/UserTagTile";
 
-class TagPanel extends React.Component {
+class GroupFilterPanel extends React.Component {
     static contextType = MatrixClientContext;
 
     state = {
@@ -44,13 +44,13 @@ class TagPanel extends React.Component {
         this.context.on("Group.myMembership", this._onGroupMyMembership);
         this.context.on("sync", this._onClientSync);
 
-        this._tagOrderStoreToken = TagOrderStore.addListener(() => {
+        this._groupFilterOrderStoreToken = GroupFilterOrderStore.addListener(() => {
             if (this.unmounted) {
                 return;
             }
             this.setState({
-                orderedTags: TagOrderStore.getOrderedTags() || [],
-                selectedTags: TagOrderStore.getSelectedTags(),
+                orderedTags: GroupFilterOrderStore.getOrderedTags() || [],
+                selectedTags: GroupFilterOrderStore.getSelectedTags(),
             });
         });
         // This could be done by anything with a matrix client
@@ -61,8 +61,8 @@ class TagPanel extends React.Component {
         this.unmounted = true;
         this.context.removeListener("Group.myMembership", this._onGroupMyMembership);
         this.context.removeListener("sync", this._onClientSync);
-        if (this._tagOrderStoreToken) {
-            this._tagOrderStoreToken.remove();
+        if (this._groupFilterOrderStoreToken) {
+            this._groupFilterOrderStoreToken.remove();
         }
     }
 
@@ -98,7 +98,7 @@ class TagPanel extends React.Component {
         return (
             <div>
                 <UserTagTile />
-                <hr className="mx_TagPanel_divider" />
+                <hr className="mx_GroupFilterPanel_divider" />
             </div>
         );
     }
@@ -117,8 +117,8 @@ class TagPanel extends React.Component {
         });
 
         const itemsSelected = this.state.selectedTags.length > 0;
-        const classes = classNames('mx_TagPanel', {
-            mx_TagPanel_items_selected: itemsSelected,
+        const classes = classNames('mx_GroupFilterPanel', {
+            mx_GroupFilterPanel_items_selected: itemsSelected,
         });
 
         let createButton = (
@@ -141,7 +141,7 @@ class TagPanel extends React.Component {
 
         return <div className={classes} onClick={this.onClearFilterClick}>
             <AutoHideScrollbar
-                className="mx_TagPanel_scroller"
+                className="mx_GroupFilterPanel_scroller"
                 // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
                 // instead of onClick. Otherwise we experience https://github.com/vector-im/element-web/issues/6253
                 onMouseDown={this.onMouseDown}
@@ -152,7 +152,7 @@ class TagPanel extends React.Component {
                 >
                     { (provided, snapshot) => (
                             <div
-                                className="mx_TagPanel_tagTileContainer"
+                                className="mx_GroupFilterPanel_tagTileContainer"
                                 ref={provided.innerRef}
                             >
                                 { this.renderGlobalIcon() }
@@ -168,4 +168,4 @@ class TagPanel extends React.Component {
         </div>;
     }
 }
-export default TagPanel;
+export default GroupFilterPanel;

src/components/structures/GroupView.js

@@ -620,7 +620,7 @@ export default class GroupView extends React.Component {
                 profileForm: newProfileForm,
 
                 // Indicate that FlairStore needs to be poked to show this change
-                // in TagTile (TagPanel), Flair and GroupTile (MyGroups).
+                // in TagTile (GroupFilterPanel), Flair and GroupTile (MyGroups).
                 avatarChanged: true,
             });
         }).catch((e) => {
@@ -649,7 +649,6 @@ export default class GroupView extends React.Component {
                 editing: false,
                 summary: null,
             });
-            dis.dispatch({action: 'panel_disable'});
             this._initGroupStore(this.props.groupId);
 
             if (this.state.avatarChanged) {
@@ -870,10 +869,7 @@ export default class GroupView extends React.Component {
                     { _t('Add rooms to this community') }
                 </div>
             </AccessibleButton>) : <div />;
-        const roomDetailListClassName = classnames({
-            "mx_fadable": true,
-            "mx_fadable_faded": this.state.editing,
-        });
+
         return <div className="mx_GroupView_rooms">
             <div className="mx_GroupView_rooms_header">
                 <h3>
@@ -884,9 +880,7 @@ export default class GroupView extends React.Component {
             </div>
             { this.state.groupRoomsLoading ?
                 <Spinner /> :
-                <RoomDetailList
-                    rooms={this.state.groupRooms}
-                    className={roomDetailListClassName} />
+                <RoomDetailList rooms={this.state.groupRooms} />
             }
         </div>;
     }

src/components/structures/HomePage.tsx

@@ -15,20 +15,67 @@ limitations under the License.
 */
 
 import * as React from "react";
+import {useContext, useState} from "react";
 
 import AutoHideScrollbar from './AutoHideScrollbar';
-import { getHomePageUrl } from "../../utils/pages";
-import { _t } from "../../languageHandler";
+import {getHomePageUrl} from "../../utils/pages";
+import {_t} from "../../languageHandler";
 import SdkConfig from "../../SdkConfig";
 import * as sdk from "../../index";
 import dis from "../../dispatcher/dispatcher";
-import { Action } from "../../dispatcher/actions";
+import {Action} from "../../dispatcher/actions";
+import BaseAvatar from "../views/avatars/BaseAvatar";
+import {OwnProfileStore} from "../../stores/OwnProfileStore";
+import AccessibleButton from "../views/elements/AccessibleButton";
+import {UPDATE_EVENT} from "../../stores/AsyncStore";
+import {useEventEmitter} from "../../hooks/useEventEmitter";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import MiniAvatarUploader, {AVATAR_SIZE} from "../views/elements/MiniAvatarUploader";
 
 const onClickSendDm = () => dis.dispatch({action: 'view_create_chat'});
 const onClickExplore = () => dis.fire(Action.ViewRoomDirectory);
 const onClickNewRoom = () => dis.dispatch({action: 'view_create_room'});
 
-const HomePage = () => {
+interface IProps {
+    justRegistered?: boolean;
+}
+
+const getOwnProfile = (userId: string) => ({
+    displayName: OwnProfileStore.instance.displayName || userId,
+    avatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_SIZE),
+});
+
+const UserWelcomeTop = () => {
+    const cli = useContext(MatrixClientContext);
+    const userId = cli.getUserId();
+    const [ownProfile, setOwnProfile] = useState(getOwnProfile(userId));
+    useEventEmitter(OwnProfileStore.instance, UPDATE_EVENT, () => {
+        setOwnProfile(getOwnProfile(userId));
+    });
+
+    return <div>
+        <MiniAvatarUploader
+            hasAvatar={!!ownProfile.avatarUrl}
+            hasAvatarLabel={_t("Great, that'll help people know it's you")}
+            noAvatarLabel={_t("Add a photo so people know it's you.")}
+            setAvatarUrl={url => cli.setAvatarUrl(url)}
+        >
+            <BaseAvatar
+                idName={userId}
+                name={ownProfile.displayName}
+                url={ownProfile.avatarUrl}
+                width={AVATAR_SIZE}
+                height={AVATAR_SIZE}
+                resizeMethod="crop"
+            />
+        </MiniAvatarUploader>
+
+        <h1>{ _t("Welcome %(name)s", { name: ownProfile.displayName }) }</h1>
+        <h4>{ _t("Now, let's help you get started") }</h4>
+    </div>;
+};
+
+const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
     const config = SdkConfig.get();
     const pageUrl = getHomePageUrl(config);
 
@@ -37,18 +84,27 @@ const HomePage = () => {
         return <EmbeddedPage className="mx_HomePage" url={pageUrl} scrollbar={true} />;
     }
 
-    const brandingConfig = config.branding;
-    let logoUrl = "themes/element/img/logos/element-logo.svg";
-    if (brandingConfig && brandingConfig.authHeaderLogoUrl) {
-        logoUrl = brandingConfig.authHeaderLogoUrl;
+    let introSection;
+    if (justRegistered) {
+        introSection = <UserWelcomeTop />;
+    } else {
+        const brandingConfig = config.branding;
+        let logoUrl = "themes/element/img/logos/element-logo.svg";
+        if (brandingConfig && brandingConfig.authHeaderLogoUrl) {
+            logoUrl = brandingConfig.authHeaderLogoUrl;
+        }
+
+        introSection = <React.Fragment>
+            <img src={logoUrl} alt={config.brand} />
+            <h1>{ _t("Welcome to %(appName)s", { appName: config.brand }) }</h1>
+            <h4>{ _t("Liberate your communication") }</h4>
+        </React.Fragment>;
     }
 
-    const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+
     return <AutoHideScrollbar className="mx_HomePage mx_HomePage_default">
         <div className="mx_HomePage_default_wrapper">
-            <img src={logoUrl} alt={config.brand || "Element"} />
-            <h1>{ _t("Welcome to %(appName)s", { appName: config.brand || "Element" }) }</h1>
-            <h4>{ _t("Liberate your communication") }</h4>
+            { introSection }
             <div className="mx_HomePage_default_buttons">
                 <AccessibleButton onClick={onClickSendDm} className="mx_HomePage_button_sendDm">
                     { _t("Send a Direct Message") }

src/components/structures/LeftPanel.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import * as React from "react";
 import { createRef } from "react";
-import TagPanel from "./TagPanel";
+import GroupFilterPanel from "./GroupFilterPanel";
 import CustomRoomTagPanel from "./CustomRoomTagPanel";
 import classNames from "classnames";
 import dis from "../../dispatcher/dispatcher";
@@ -38,6 +38,7 @@ import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import RoomListNumResults from "../views/rooms/RoomListNumResults";
+import LeftPanelWidget from "./LeftPanelWidget";
 
 interface IProps {
     isMinimized: boolean;
@@ -46,7 +47,7 @@ interface IProps {
 
 interface IState {
     showBreadcrumbs: boolean;
-    showTagPanel: boolean;
+    showGroupFilterPanel: boolean;
 }
 
 // List of CSS classes which should be included in keyboard navigation within the room list
@@ -60,7 +61,7 @@ const cssClasses = [
 
 export default class LeftPanel extends React.Component<IProps, IState> {
     private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
-    private tagPanelWatcherRef: string;
+    private groupFilterPanelWatcherRef: string;
     private bgImageWatcherRef: string;
     private focusedElement = null;
     private isDoingStickyHeaders = false;
@@ -70,7 +71,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         this.state = {
             showBreadcrumbs: BreadcrumbsStore.instance.visible,
-            showTagPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
+            showGroupFilterPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
         };
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
@@ -78,8 +79,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
         this.bgImageWatcherRef = SettingsStore.watchSetting(
             "RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
-        this.tagPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
-            this.setState({showTagPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
+        this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
+            this.setState({showGroupFilterPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
         });
 
         // We watch the middle panel because we don't actually get resized, the middle panel does.
@@ -88,7 +89,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     }
 
     public componentWillUnmount() {
-        SettingsStore.unwatchSetting(this.tagPanelWatcherRef);
+        SettingsStore.unwatchSetting(this.groupFilterPanelWatcherRef);
         SettingsStore.unwatchSetting(this.bgImageWatcherRef);
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
@@ -119,8 +120,11 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         if (settingBgMxc) {
             avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(settingBgMxc, avatarSize, avatarSize);
         }
+
         const avatarUrlProp = `url(${avatarUrl})`;
-        if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
+        if (!avatarUrl) {
+            document.body.style.removeProperty("--avatar-url");
+        } else if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
             document.body.style.setProperty("--avatar-url", avatarUrlProp);
         }
     };
@@ -139,7 +143,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         const bottomEdge = list.offsetHeight + list.scrollTop;
         const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist");
 
-        const headerRightMargin = 16; // calculated from margins and widths to align with non-sticky tiles
+        const headerRightMargin = 15; // calculated from margins and widths to align with non-sticky tiles
         const headerStickyWidth = list.clientWidth - headerRightMargin;
 
         // We track which styles we want on a target before making the changes to avoid
@@ -210,10 +214,19 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
                     header.classList.add("mx_RoomSublist_headerContainer_stickyBottom");
                 }
+
+                const offset = window.innerHeight - (list.parentElement.offsetTop + list.parentElement.offsetHeight);
+                const newBottom = `${offset}px`;
+                if (header.style.bottom !== newBottom) {
+                    header.style.bottom = newBottom;
+                }
             } else {
                 if (header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
                     header.classList.remove("mx_RoomSublist_headerContainer_stickyBottom");
                 }
+                if (header.style.bottom) {
+                    header.style.removeProperty('bottom');
+                }
             }
 
             if (style.stickyTop || style.stickyBottom) {
@@ -375,9 +388,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     }
 
     public render(): React.ReactNode {
-        const tagPanel = !this.state.showTagPanel ? null : (
-            <div className="mx_LeftPanel_tagPanelContainer">
-                <TagPanel />
+        const groupFilterPanel = !this.state.showGroupFilterPanel ? null : (
+            <div className="mx_LeftPanel_GroupFilterPanelContainer">
+                <GroupFilterPanel />
                 {SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null}
             </div>
         );
@@ -385,7 +398,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         const roomList = <RoomList
             onKeyDown={this.onKeyDown}
             resizeNotifier={null}
-            collapsed={false}
             onFocus={this.onFocus}
             onBlur={this.onBlur}
             isMinimized={this.props.isMinimized}
@@ -394,7 +406,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         const containerClasses = classNames({
             "mx_LeftPanel": true,
-            "mx_LeftPanel_hasTagPanel": !!tagPanel,
+            "mx_LeftPanel_hasGroupFilterPanel": !!groupFilterPanel,
             "mx_LeftPanel_minimized": this.props.isMinimized,
         });
 
@@ -405,7 +417,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         return (
             <div className={containerClasses}>
-                {tagPanel}
+                {groupFilterPanel}
                 <aside className="mx_LeftPanel_roomListContainer">
                     {this.renderHeader()}
                     {this.renderSearchExplore()}
@@ -423,6 +435,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                             {roomList}
                         </div>
                     </div>
+                    { !this.props.isMinimized && <LeftPanelWidget onResize={this.onResize} /> }
                 </aside>
             </div>
         );

src/components/structures/LeftPanelWidget.tsx

@@ -0,0 +1,149 @@
+/*
+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, useEffect, useMemo} from "react";
+import {Resizable} from "re-resizable";
+import classNames from "classnames";
+
+import AccessibleButton from "../views/elements/AccessibleButton";
+import {useRovingTabIndex} from "../../accessibility/RovingTabIndex";
+import {Key} from "../../Keyboard";
+import {useLocalStorageState} from "../../hooks/useLocalStorageState";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import WidgetUtils, {IWidgetEvent} from "../../utils/WidgetUtils";
+import {useAccountData} from "../../hooks/useAccountData";
+import AppTile from "../views/elements/AppTile";
+import {useSettingValue} from "../../hooks/useSettings";
+
+interface IProps {
+    onResize(): void;
+}
+
+const MIN_HEIGHT = 100;
+const MAX_HEIGHT = 500; // or 50% of the window height
+const INITIAL_HEIGHT = 280;
+
+const LeftPanelWidget: React.FC<IProps> = ({ onResize }) => {
+    const cli = useContext(MatrixClientContext);
+
+    const mWidgetsEvent = useAccountData<Record<string, IWidgetEvent>>(cli, "m.widgets");
+    const leftPanelWidgetId = useSettingValue("Widgets.leftPanel");
+    const app = useMemo(() => {
+        if (!mWidgetsEvent || !leftPanelWidgetId) return null;
+        const widgetConfig = Object.values(mWidgetsEvent).find(w => w.id === leftPanelWidgetId);
+        if (!widgetConfig) return null;
+
+        return WidgetUtils.makeAppConfig(
+            widgetConfig.state_key,
+            widgetConfig.content,
+            widgetConfig.sender,
+            null,
+            widgetConfig.id);
+    }, [mWidgetsEvent, leftPanelWidgetId]);
+
+    const [height, setHeight] = useLocalStorageState("left-panel-widget-height", INITIAL_HEIGHT);
+    const [expanded, setExpanded] = useLocalStorageState("left-panel-widget-expanded", true);
+    useEffect(onResize, [expanded]);
+
+    const [onFocus, isActive, ref] = useRovingTabIndex();
+    const tabIndex = isActive ? 0 : -1;
+
+    if (!app) return null;
+
+    let content;
+    if (expanded) {
+        content = <Resizable
+            size={{height} as any}
+            minHeight={MIN_HEIGHT}
+            maxHeight={Math.min(window.innerHeight / 2, MAX_HEIGHT)}
+            onResize={onResize}
+            onResizeStop={(e, dir, ref, d) => {
+                setHeight(height + d.height);
+            }}
+            handleWrapperClass="mx_LeftPanelWidget_resizerHandles"
+            handleClasses={{top: "mx_LeftPanelWidget_resizerHandle"}}
+            className="mx_LeftPanelWidget_resizeBox"
+            enable={{ top: true }}
+        >
+            <AppTile
+                app={app}
+                fullWidth
+                show
+                showMenubar={false}
+                userWidget
+                userId={cli.getUserId()}
+                creatorUserId={app.creatorUserId}
+                widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
+                waitForIframeLoad={app.waitForIframeLoad}
+            />
+        </Resizable>;
+    }
+
+    return <div className="mx_LeftPanelWidget">
+        <div
+            onFocus={onFocus}
+            className="mx_LeftPanelWidget_headerContainer"
+            onKeyDown={(ev: React.KeyboardEvent) => {
+                switch (ev.key) {
+                    case Key.ARROW_LEFT:
+                        ev.stopPropagation();
+                        setExpanded(false);
+                        break;
+                    case Key.ARROW_RIGHT: {
+                        ev.stopPropagation();
+                        setExpanded(true);
+                        break;
+                    }
+                }
+            }}
+        >
+            <div className="mx_LeftPanelWidget_stickable">
+                <AccessibleButton
+                    onFocus={onFocus}
+                    inputRef={ref}
+                    tabIndex={tabIndex}
+                    className="mx_LeftPanelWidget_headerText"
+                    role="treeitem"
+                    aria-expanded={expanded}
+                    aria-level={1}
+                    onClick={() => {
+                        setExpanded(e => !e);
+                    }}
+                >
+                    <span className={classNames({
+                        "mx_LeftPanelWidget_collapseBtn": true,
+                        "mx_LeftPanelWidget_collapseBtn_collapsed": !expanded,
+                    })} />
+                    <span>{ WidgetUtils.getWidgetName(app) }</span>
+                </AccessibleButton>
+
+                {/* Code for the maximise button for once we have full screen widgets */}
+                {/*<AccessibleTooltipButton
+                    tabIndex={tabIndex}
+                    onClick={() => {
+                    }}
+                    className="mx_LeftPanelWidget_maximizeButton"
+                    tooltipClassName="mx_LeftPanelWidget_maximizeButtonTooltip"
+                    title={_t("Maximize")}
+                />*/}
+            </div>
+        </div>
+
+        { content }
+    </div>;
+};
+
+export default LeftPanelWidget;

src/components/structures/LoggedInView.tsx

@@ -53,6 +53,7 @@ import NonUrgentToastContainer from "./NonUrgentToastContainer";
 import { ToggleRightPanelPayload } from "../../dispatcher/payloads/ToggleRightPanelPayload";
 import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import Modal from "../../Modal";
+import { ICollapseConfig } from "../../resizer/distributors/collapse";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -72,9 +73,6 @@ interface IProps {
     viaServers?: string[];
     hideToSRUsers: boolean;
     resizeNotifier: ResizeNotifier;
-    middleDisabled: boolean;
-    leftDisabled: boolean;
-    rightDisabled: boolean;
     // eslint-disable-next-line camelcase
     page_type: string;
     autoJoin: boolean;
@@ -91,6 +89,7 @@ interface IProps {
     currentUserId?: string;
     currentGroupId?: string;
     currentGroupIsNew?: boolean;
+    justRegistered?: boolean;
 }
 
 interface IUsageLimit {
@@ -101,10 +100,6 @@ interface IUsageLimit {
 }
 
 interface IState {
-    mouseDown?: {
-        x: number;
-        y: number;
-    };
     syncErrorData?: {
         error: {
             data: IUsageLimit;
@@ -152,7 +147,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         super(props, context);
 
         this.state = {
-            mouseDown: undefined,
             syncErrorData: undefined,
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
@@ -214,12 +208,8 @@ class LoggedInView extends React.Component<IProps, IState> {
     };
 
     _createResizer() {
-        const classNames = {
-            handle: "mx_ResizeHandle",
-            vertical: "mx_ResizeHandle_vertical",
-            reverse: "mx_ResizeHandle_reverse",
-        };
-        const collapseConfig = {
+        let size;
+        const collapseConfig: ICollapseConfig = {
             toggleSize: 260 - 50,
             onCollapsed: (collapsed) => {
                 if (collapsed) {
@@ -229,22 +219,24 @@ class LoggedInView extends React.Component<IProps, IState> {
                     dis.dispatch({action: "show_left_panel"}, true);
                 }
             },
-            onResized: (size) => {
-                window.localStorage.setItem("mx_lhs_size", '' + size);
+            onResized: (_size) => {
+                size = _size;
                 this.props.resizeNotifier.notifyLeftHandleResized();
             },
             onResizeStart: () => {
                 this.props.resizeNotifier.startResizing();
             },
             onResizeStop: () => {
+                window.localStorage.setItem("mx_lhs_size", '' + size);
                 this.props.resizeNotifier.stopResizing();
             },
         };
-        const resizer = new Resizer(
-            this._resizeContainer.current,
-            CollapseDistributor,
-            collapseConfig);
-        resizer.setClassNames(classNames);
+        const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
+        resizer.setClassNames({
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse",
+        });
         return resizer;
     }
 
@@ -530,8 +522,8 @@ class LoggedInView extends React.Component<IProps, IState> {
             // Could be "GroupTile +groupId:domain"
             const draggableId = result.draggableId.split(' ').pop();
 
-            // Dispatch synchronously so that the TagPanel receives an
-            // optimistic update from TagOrderStore before the previous
+            // Dispatch synchronously so that the GroupFilterPanel receives an
+            // optimistic update from GroupFilterOrderStore before the previous
             // state is shown.
             dis.dispatch(TagOrderActions.moveTag(
                 this._matrixClient,
@@ -562,48 +554,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         ), true);
     };
 
-    _onMouseDown = (ev) => {
-        // When the panels are disabled, clicking on them results in a mouse event
-        // which bubbles to certain elements in the tree. When this happens, close
-        // any settings page that is currently open (user/room/group).
-        if (this.props.leftDisabled && this.props.rightDisabled) {
-            const targetClasses = new Set(ev.target.className.split(' '));
-            if (
-                targetClasses.has('mx_MatrixChat') ||
-                targetClasses.has('mx_MatrixChat_middlePanel') ||
-                targetClasses.has('mx_RoomView')
-            ) {
-                this.setState({
-                    mouseDown: {
-                        x: ev.pageX,
-                        y: ev.pageY,
-                    },
-                });
-            }
-        }
-    };
-
-    _onMouseUp = (ev) => {
-        if (!this.state.mouseDown) return;
-
-        const deltaX = ev.pageX - this.state.mouseDown.x;
-        const deltaY = ev.pageY - this.state.mouseDown.y;
-        const distance = Math.sqrt((deltaX * deltaX) + (deltaY + deltaY));
-        const maxRadius = 5; // People shouldn't be straying too far, hopefully
-
-        // Note: we track how far the user moved their mouse to help
-        // combat against https://github.com/vector-im/element-web/issues/7158
-
-        if (distance < maxRadius) {
-            // This is probably a real click, and not a drag
-            dis.dispatch({ action: 'close_settings' });
-        }
-
-        // Always clear the mouseDown state to ensure we don't accidentally
-        // use stale values due to the mouseDown checks.
-        this.setState({mouseDown: null});
-    };
-
     render() {
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserView = sdk.getComponent('structures.UserView');
@@ -623,7 +573,6 @@ class LoggedInView extends React.Component<IProps, IState> {
                     oobData={this.props.roomOobData}
                     viaServers={this.props.viaServers}
                     key={this.props.currentRoomId || 'roomview'}
-                    disabled={this.props.middleDisabled}
                     resizeNotifier={this.props.resizeNotifier}
                 />;
                 break;
@@ -637,7 +586,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                 break;
 
             case PageTypes.HomePage:
-                pageElement = <HomePage />;
+                pageElement = <HomePage justRegistered={this.props.justRegistered} />;
                 break;
 
             case PageTypes.UserView:
@@ -671,8 +620,6 @@ class LoggedInView extends React.Component<IProps, IState> {
                     onKeyDown={this._onReactKeyDown}
                     className='mx_MatrixChat_wrapper'
                     aria-hidden={this.props.hideToSRUsers}
-                    onMouseDown={this._onMouseDown}
-                    onMouseUp={this._onMouseUp}
                 >
                     <ToastContainer />
                     <DragDropContext onDragEnd={this._onDragEnd}>

src/components/structures/MatrixChat.tsx

@@ -29,6 +29,7 @@ import 'focus-visible';
 import 'what-input';
 
 import Analytics from "../../Analytics";
+import CountlyAnalytics from "../../CountlyAnalytics";
 import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
 import { MatrixClientPeg, IMatrixClientCreds } from "../../MatrixClientPeg";
 import PlatformPeg from "../../PlatformPeg";
@@ -61,7 +62,7 @@ import DMRoomMap from '../../utils/DMRoomMap';
 import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
 import { FontWatcher } from '../../settings/watchers/FontWatcher';
 import { storeRoomAliasInCache } from '../../RoomAliasCache';
-import { defer, IDeferred } from "../../utils/promise";
+import { defer, IDeferred, sleep } from "../../utils/promise";
 import ToastStore from "../../stores/ToastStore";
 import * as StorageManager from "../../utils/StorageManager";
 import type LoggedInViewType from "./LoggedInView";
@@ -86,37 +87,37 @@ import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
 export enum Views {
     // a special initial state which is only used at startup, while we are
     // trying to re-animate a matrix client or register as a guest.
-    LOADING = 0,
+    LOADING,
 
     // we are showing the welcome view
-    WELCOME = 1,
+    WELCOME,
 
     // we are showing the login view
-    LOGIN = 2,
+    LOGIN,
 
     // we are showing the registration view
-    REGISTER = 3,
-
-    // completing the registration flow
-    POST_REGISTRATION = 4,
+    REGISTER,
 
     // showing the 'forgot password' view
-    FORGOT_PASSWORD = 5,
+    FORGOT_PASSWORD,
 
     // showing flow to trust this new device with cross-signing
-    COMPLETE_SECURITY = 6,
+    COMPLETE_SECURITY,
 
     // flow to setup SSSS / cross-signing on this account
-    E2E_SETUP = 7,
+    E2E_SETUP,
 
-    // we are logged in with an active matrix client.
-    LOGGED_IN = 8,
+    // we are logged in with an active matrix client. The logged_in state also
+    // includes guests users as they too are logged in at the client level.
+    LOGGED_IN,
 
     // We are logged out (invalid token) but have our local state again. The user
     // should log back in to rehydrate the client.
-    SOFT_LOGOUT = 9,
+    SOFT_LOGOUT,
 }
 
+const AUTH_SCREENS = ["register", "login", "forgot_password", "start_sso", "start_cas"];
+
 // Actions that are redirected through the onboarding process prior to being
 // re-dispatched. NOTE: some actions are non-trivial and would require
 // re-factoring to be included in this list in future.
@@ -181,9 +182,6 @@ interface IState {
     currentUserId?: string;
     // this is persisted as mx_lhs_size, loaded in LoggedInView
     collapseLhs: boolean;
-    leftDisabled: boolean;
-    middleDisabled: boolean;
-    // the right panel's disabled state is tracked in its store.
     // Parameters used in the registration dance with the IS
     // eslint-disable-next-line camelcase
     register_client_secret?: string;
@@ -202,6 +200,7 @@ interface IState {
     roomOobData?: object;
     viaServers?: string[];
     pendingInitialSync?: boolean;
+    justRegistered?: boolean;
 }
 
 export default class MatrixChat extends React.PureComponent<IProps, IState> {
@@ -236,8 +235,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.state = {
             view: Views.LOADING,
             collapseLhs: false,
-            leftDisabled: false,
-            middleDisabled: false,
 
             hideToSRUsers: false,
 
@@ -354,6 +351,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         if (SettingsStore.getValue("analyticsOptIn")) {
             Analytics.enable();
         }
+        CountlyAnalytics.instance.enable(/* anonymous = */ true);
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle stage
@@ -368,6 +366,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         if (this.shouldTrackPageChange(prevState, this.state)) {
             const durationMs = this.stopPageChangeTimer();
             Analytics.trackPageChange(durationMs);
+            CountlyAnalytics.instance.trackPageChange(durationMs);
         }
         if (this.focusComposer) {
             dis.fire(Action.FocusComposer);
@@ -420,6 +419,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 } else {
                     dis.dispatch({action: "view_welcome_page"});
                 }
+            } else if (SettingsStore.getValue("analyticsOptIn")) {
+                CountlyAnalytics.instance.enable(/* anonymous = */ false);
             }
         });
         // Note we don't catch errors from this: we catch everything within
@@ -478,6 +479,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }
         const newState = {
             currentUserId: null,
+            justRegistered: false,
         };
         Object.assign(newState, state);
         this.setState(newState);
@@ -559,11 +561,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 ThemeController.isLogin = true;
                 this.themeWatcher.recheck();
                 break;
-            case 'start_post_registration':
-                this.setState({
-                    view: Views.POST_REGISTRATION,
-                });
-                break;
             case 'start_password_recovery':
                 this.setStateForNewView({
                     view: Views.FORGOT_PASSWORD,
@@ -650,8 +647,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             }
             case Action.ViewRoomDirectory: {
                 const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
-                Modal.createTrackedDialog('Room directory', '', RoomDirectory, {},
-                    'mx_RoomDirectory_dialogWrapper', false, true);
+                Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
+                    initialText: payload.initialText,
+                }, 'mx_RoomDirectory_dialogWrapper', false, true);
 
                 // View the welcome or home page if we need something to look at
                 this.viewSomethingBehindModal();
@@ -668,13 +666,13 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.viewWelcome();
                 break;
             case 'view_home_page':
-                this.viewHome();
+                this.viewHome(payload.justRegistered);
                 break;
             case 'view_start_chat_or_reuse':
                 this.chatCreateOrReuse(payload.user_id);
                 break;
             case 'view_create_chat':
-                showStartChatInviteDialog();
+                showStartChatInviteDialog(payload.initialText || "");
                 break;
             case 'view_invite':
                 showRoomInviteDialog(payload.roomId);
@@ -710,14 +708,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     this.state.resizeNotifier.notifyLeftHandleResized();
                 });
                 break;
-            case 'panel_disable': {
-                this.setState({
-                    leftDisabled: payload.leftDisabled || payload.sideDisabled || false,
-                    middleDisabled: payload.middleDisabled || false,
-                    // We don't track the right panel being disabled here - it's tracked in the store.
-                });
-                break;
-            }
             case 'on_logged_in':
                 if (
                     !Lifecycle.isSoftLogout() &&
@@ -763,7 +753,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 SettingsStore.setValue("analyticsOptIn", null, SettingLevel.DEVICE, true);
                 SettingsStore.setValue("showCookieBar", null, SettingLevel.DEVICE, false);
                 hideAnalyticsToast();
-                Analytics.enable();
+                if (Analytics.canEnable()) {
+                    Analytics.enable();
+                }
+                if (CountlyAnalytics.instance.canEnable()) {
+                    CountlyAnalytics.instance.enable(/* anonymous = */ false);
+                }
                 break;
             case 'reject_cookies':
                 SettingsStore.setValue("analyticsOptIn", null, SettingLevel.DEVICE, false);
@@ -955,10 +950,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.themeWatcher.recheck();
     }
 
-    private viewHome() {
+    private viewHome(justRegistered = false) {
         // The home page requires the "logged in" view, so we'll set that.
         this.setStateForNewView({
             view: Views.LOGGED_IN,
+            justRegistered,
         });
         this.setPage(PageTypes.HomePage);
         this.notifyNewScreen('home');
@@ -1192,7 +1188,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 if (welcomeUserRoom === null) {
                     // We didn't redirect to the welcome user room, so show
                     // the homepage.
-                    dis.dispatch({action: 'view_home_page'});
+                    dis.dispatch({action: 'view_home_page', justRegistered: true});
                 }
             } else if (ThreepidInviteStore.instance.pickBestInvite()) {
                 // The user has a 3pid invite pending - show them that
@@ -1205,7 +1201,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             } else {
                 // The user has just logged in after registering,
                 // so show the homepage.
-                dis.dispatch({action: 'view_home_page'});
+                dis.dispatch({action: 'view_home_page', justRegistered: true});
             }
         } else {
             this.showScreenAfterLogin();
@@ -1213,7 +1209,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         StorageManager.tryPersistStorage();
 
-        if (SettingsStore.getValue("showCookieBar") && Analytics.canEnable()) {
+        // defer the following actions by 30 seconds to not throw them at the user immediately
+        await sleep(30);
+        if (SettingsStore.getValue("showCookieBar") &&
+            (Analytics.canEnable() || CountlyAnalytics.instance.canEnable())
+        ) {
             showAnalyticsToast(this.props.config.piwik?.policyUrl);
         }
     }
@@ -1343,8 +1343,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             this.firstSyncComplete = true;
             this.firstSyncPromise.resolve();
 
-            if (Notifier.shouldShowPrompt()) {
-                showNotificationsToast();
+            if (Notifier.shouldShowPrompt() && !MatrixClientPeg.userRegisteredWithinLastHours(24)) {
+                showNotificationsToast(false);
             }
 
             dis.fire(Action.FocusComposer);
@@ -1407,6 +1407,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         const dft = new DecryptionFailureTracker((total, errorCode) => {
             Analytics.trackEvent('E2E', 'Decryption failure', errorCode, total);
+            CountlyAnalytics.instance.track("decryption_failure", { errorCode }, null, { sum: total });
         }, (errorCode) => {
             // Map JS-SDK error codes to tracker codes for aggregation
             switch (errorCode) {
@@ -1548,6 +1549,14 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     }
 
     showScreen(screen: string, params?: {[key: string]: any}) {
+        const cli = MatrixClientPeg.get();
+        const isLoggedOutOrGuest = !cli || cli.isGuest();
+        if (!isLoggedOutOrGuest && AUTH_SCREENS.includes(screen)) {
+            // user is logged in and landing on an auth page which will uproot their session, redirect them home instead
+            dis.dispatch({ action: "view_home_page" });
+            return;
+        }
+
         if (screen === 'register') {
             dis.dispatch({
                 action: 'start_registration',
@@ -1564,7 +1573,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 params: params,
             });
         } else if (screen === 'soft_logout') {
-            if (MatrixClientPeg.get() && MatrixClientPeg.get().getUserId() && !Lifecycle.isSoftLogout()) {
+            if (cli.getUserId() && !Lifecycle.isSoftLogout()) {
                 // Logged in - visit a room
                 this.viewLastRoom();
             } else {
@@ -1594,6 +1603,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 action: 'require_registration',
             });
         } else if (screen === 'directory') {
+            if (this.state.view === Views.WELCOME) {
+                CountlyAnalytics.instance.track("onboarding_room_directory");
+            }
             dis.fire(Action.ViewRoomDirectory);
         } else if (screen === "start_sso" || screen === "start_cas") {
             // TODO if logged in, skip SSO
@@ -1612,14 +1624,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             dis.dispatch({
                 action: 'view_my_groups',
             });
-        } else if (screen === 'complete_security') {
-            dis.dispatch({
-                action: 'start_complete_security',
-            });
-        } else if (screen === 'post_registration') {
-            dis.dispatch({
-                action: 'start_post_registration',
-            });
         } else if (screen.indexOf('room/') === 0) {
             // Rooms can have the following formats:
             // #room_alias:domain or !opaque_id:domain
@@ -1790,14 +1794,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         return Lifecycle.setLoggedIn(credentials);
     }
 
-    onFinishPostRegistration = () => {
-        // Don't confuse this with "PageType" which is the middle window to show
-        this.setState({
-            view: Views.LOGGED_IN,
-        });
-        this.showScreen("settings");
-    };
-
     onSendEvent(roomId: string, event: MatrixEvent) {
         const cli = MatrixClientPeg.get();
         if (!cli) {
@@ -1962,13 +1958,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     accountPassword={this.accountPassword}
                 />
             );
-        } else if (this.state.view === Views.POST_REGISTRATION) {
-            // needs to be before normal PageTypes as you are logged in technically
-            const PostRegistration = sdk.getComponent('structures.auth.PostRegistration');
-            view = (
-                <PostRegistration
-                    onComplete={this.onFinishPostRegistration} />
-            );
         } else if (this.state.view === Views.LOGGED_IN) {
             // store errors stop the client syncing and require user intervention, so we'll
             // be showing a dialog. Don't show anything else.

src/components/structures/MessagePanel.js

@@ -30,6 +30,8 @@ import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
 import {textForEvent} from "../../TextForEvent";
 import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
+import DMRoomMap from "../../utils/DMRoomMap";
+import NewRoomIntro from "../views/rooms/NewRoomIntro";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -952,15 +954,25 @@ class CreationGrouper {
         }).reduce((a, b) => a.concat(b), []);
         // Get sender profile from the latest event in the summary as the m.room.create doesn't contain one
         const ev = this.events[this.events.length - 1];
+
+        let summaryText;
+        const roomId = ev.getRoomId();
+        const creator = ev.sender ? ev.sender.name : ev.getSender();
+        if (DMRoomMap.shared().getUserIdForRoomId(roomId)) {
+            summaryText = _t("%(creator)s created this DM.", { creator });
+        } else {
+            summaryText = _t("%(creator)s created and configured the room.", { creator });
+        }
+
+        ret.push(<NewRoomIntro key="newroomintro" />);
+
         ret.push(
             <EventListSummary
                  key="roomcreationsummary"
                  events={this.events}
                  onToggle={panel._onHeightChanged} // Update scroll state
                  summaryMembers={[ev.sender]}
-                 summaryText={_t("%(creator)s created and configured the room.", {
-                     creator: ev.sender ? ev.sender.name : ev.getSender(),
-                 })}
+                 summaryText={summaryText}
             >
                  { eventTiles }
             </EventListSummary>,

src/components/structures/RightPanel.js

@@ -17,7 +17,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import {Room} from "matrix-js-sdk/src/models/room";
 
 import * as sdk from '../../index';
@@ -304,14 +303,8 @@ export default class RightPanel extends React.Component {
                 break;
         }
 
-        const classes = classNames("mx_RightPanel", "mx_fadable", {
-            "collapsed": this.props.collapsed,
-            "mx_fadable_faded": this.props.disabled,
-            "dark-panel": true,
-        });
-
         return (
-            <aside className={classes} id="mx_RightPanel">
+            <aside className="mx_RightPanel dark-panel" id="mx_RightPanel">
                 { panel }
             </aside>
         );

src/components/structures/RoomDirectory.js

@@ -30,9 +30,10 @@ import Analytics from '../../Analytics';
 import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 import {ALL_ROOMS} from "../views/directory/NetworkDropdown";
 import SettingsStore from "../../settings/SettingsStore";
-import TagOrderStore from "../../stores/TagOrderStore";
+import GroupFilterOrderStore from "../../stores/GroupFilterOrderStore";
 import GroupStore from "../../stores/GroupStore";
 import FlairStore from "../../stores/FlairStore";
+import CountlyAnalytics from "../../CountlyAnalytics";
 
 const MAX_NAME_LENGTH = 80;
 const MAX_TOPIC_LENGTH = 800;
@@ -43,13 +44,17 @@ function track(action) {
 
 export default class RoomDirectory extends React.Component {
     static propTypes = {
+        initialText: PropTypes.string,
         onFinished: PropTypes.func.isRequired,
     };
 
     constructor(props) {
         super(props);
 
-        const selectedCommunityId = TagOrderStore.getSelectedTags()[0];
+        CountlyAnalytics.instance.trackRoomDirectoryBegin();
+        this.startTime = CountlyAnalytics.getTimestamp();
+
+        const selectedCommunityId = GroupFilterOrderStore.getSelectedTags()[0];
         this.state = {
             publicRooms: [],
             loading: true,
@@ -57,7 +62,7 @@ export default class RoomDirectory extends React.Component {
             error: null,
             instanceId: undefined,
             roomServer: MatrixClientPeg.getHomeserverName(),
-            filterString: null,
+            filterString: this.props.initialText || "",
             selectedCommunityId: SettingsStore.getValue("feature_communities_v2_prototypes")
                 ? selectedCommunityId
                 : null,
@@ -198,6 +203,11 @@ export default class RoomDirectory extends React.Component {
                 return;
             }
 
+            if (this.state.filterString) {
+                const count = data.total_room_count_estimate || data.chunk.length;
+                CountlyAnalytics.instance.trackRoomDirectorySearch(count, this.state.filterString);
+            }
+
             this.nextBatch = data.next_batch;
             this.setState((s) => {
                 s.publicRooms.push(...(data.chunk || []));
@@ -407,7 +417,7 @@ export default class RoomDirectory extends React.Component {
     };
 
     onCreateRoomClick = room => {
-        this.props.onFinished();
+        this.onFinished();
         dis.dispatch({
             action: 'view_create_room',
             public: true,
@@ -419,11 +429,12 @@ export default class RoomDirectory extends React.Component {
     }
 
     showRoom(room, room_alias, autoJoin = false, shouldPeek = false) {
-        this.props.onFinished();
+        this.onFinished();
         const payload = {
             action: 'view_room',
             auto_join: autoJoin,
             should_peek: shouldPeek,
+            _type: "room_directory", // instrumentation
         };
         if (room) {
             // Don't let the user view a room they won't be able to either
@@ -575,6 +586,11 @@ export default class RoomDirectory extends React.Component {
         }
     };
 
+    onFinished = () => {
+        CountlyAnalytics.instance.trackRoomDirectory(this.startTime);
+        this.props.onFinished();
+    };
+
     render() {
         const Loader = sdk.getComponent("elements.Spinner");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
@@ -671,6 +687,7 @@ export default class RoomDirectory extends React.Component {
                     onJoinClick={this.onJoinFromSearchClick}
                     placeholder={placeholder}
                     showJoinButton={showJoinButton}
+                    initialText={this.props.initialText}
                 />
                 {dropdown}
             </div>;
@@ -693,7 +710,7 @@ export default class RoomDirectory extends React.Component {
             <BaseDialog
                 className={'mx_RoomDirectory_dialog'}
                 hasCancel={true}
-                onFinished={this.props.onFinished}
+                onFinished={this.onFinished}
                 title={title}
             >
                 <div className="mx_RoomDirectory">

src/components/structures/RoomSearch.tsx

@@ -148,7 +148,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
                 onBlur={this.onBlur}
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
-                placeholder={_t("Search")}
+                placeholder={_t("Filter")}
                 autoComplete="off"
             />
         );
@@ -164,7 +164,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         if (this.props.isMinimized) {
             icon = (
                 <AccessibleButton
-                    title={_t("Search rooms")}
+                    title={_t("Filter rooms and people")}
                     className="mx_RoomSearch_icon mx_RoomSearch_minimizedHandle"
                     onClick={this.openSearch}
                 />

src/components/structures/RoomStatusBar.js

@@ -41,9 +41,6 @@ export default class RoomStatusBar extends React.Component {
     static propTypes = {
         // the room this statusbar is representing.
         room: PropTypes.object.isRequired,
-        // This is true when the user is alone in the room, but has also sent a message.
-        // Used to suggest to the user to invite someone
-        sentMessageAndIsAlone: PropTypes.bool,
 
         // The active call in the room, if any (means we show the call bar
         // along with the status of the call)
@@ -68,10 +65,6 @@ export default class RoomStatusBar extends React.Component {
         // 'you are alone' bar
         onInviteClick: PropTypes.func,
 
-        // callback for when the user clicks on the 'stop warning me' button in the
-        // 'you are alone' bar
-        onStopWarningClick: PropTypes.func,
-
         // callback for when we do something that changes the size of the
         // status bar. This is used to trigger a re-layout in the parent
         // component.
@@ -159,10 +152,7 @@ export default class RoomStatusBar extends React.Component {
     // changed - so we use '0' to indicate normal size, and other values to
     // indicate other sizes.
     _getSize() {
-        if (this._shouldShowConnectionError() ||
-            this._showCallBar() ||
-            this.props.sentMessageAndIsAlone
-        ) {
+        if (this._shouldShowConnectionError() || this._showCallBar()) {
             return STATUS_BAR_EXPANDED;
         } else if (this.state.unsentMessages.length > 0) {
             return STATUS_BAR_EXPANDED_LARGE;
@@ -325,24 +315,6 @@ export default class RoomStatusBar extends React.Component {
             );
         }
 
-        // If you're alone in the room, and have sent a message, suggest to invite someone
-        if (this.props.sentMessageAndIsAlone && !this.props.isPeeking) {
-            return (
-                <div className="mx_RoomStatusBar_isAlone">
-                    { _t("There's no one else here! Would you like to <inviteText>invite others</inviteText> " +
-                            "or <nowarnText>stop warning about the empty room</nowarnText>?",
-                        {},
-                        {
-                            'inviteText': (sub) =>
-                                <a className="mx_RoomStatusBar_resend_link" key="invite" onClick={this.props.onInviteClick}>{ sub }</a>,
-                            'nowarnText': (sub) =>
-                                <a className="mx_RoomStatusBar_resend_link" key="nowarn" onClick={this.props.onStopWarningClick}>{ sub }</a>,
-                        },
-                    ) }
-                </div>
-            );
-        }
-
         return null;
     }
 

src/components/structures/RoomView.tsx

@@ -71,7 +71,11 @@ import RoomHeader from "../views/rooms/RoomHeader";
 import TintableSvg from "../views/elements/TintableSvg";
 import {XOR} from "../../@types/common";
 import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
-import { CallState, CallType, MatrixCall } from "matrix-js-sdk/lib/webrtc/call";
+import { CallState, CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import WidgetStore from "../../stores/WidgetStore";
+import {UPDATE_EVENT} from "../../stores/AsyncStore";
+import Notifier from "../../Notifier";
+import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -105,7 +109,6 @@ interface IProps {
     viaServers?: string[];
 
     autoJoin?: boolean;
-    disabled?: boolean;
     resizeNotifier: ResizeNotifier;
 
     // Called with the credentials of a registered user (if they were a ROU that transitioned to PWLU)
@@ -128,6 +131,7 @@ export interface IState {
     initialEventPixelOffset?: number;
     // Whether to highlight the event scrolled to
     isInitialEventHighlighted?: boolean;
+    replyToEvent?: MatrixEvent;
     forwardingEvent?: MatrixEvent;
     numUnreadMessages: number;
     draggingFile: boolean;
@@ -146,7 +150,6 @@ export interface IState {
     guestsCanJoin: boolean;
     canPeek: boolean;
     showApps: boolean;
-    isAlone: boolean;
     isPeeking: boolean;
     showingPinned: boolean;
     showReadReceipts: boolean;
@@ -181,6 +184,7 @@ export interface IState {
     e2eStatus?: E2EStatus;
     rejecting?: boolean;
     rejectError?: Error;
+    hasPinnedWidgets?: boolean;
 }
 
 export default class RoomView extends React.Component<IProps, IState> {
@@ -218,7 +222,6 @@ export default class RoomView extends React.Component<IProps, IState> {
             guestsCanJoin: false,
             canPeek: false,
             showApps: false,
-            isAlone: false,
             isPeeking: false,
             showingPinned: false,
             showReadReceipts: true,
@@ -251,7 +254,9 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate);
 
-        WidgetEchoStore.on('update', this.onWidgetEchoStoreUpdate);
+        WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
+        WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
+
         this.showReadReceiptsWatchRef = SettingsStore.watchSetting("showReadReceipts", null,
             this.onReadReceiptsChange);
         this.layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
@@ -263,6 +268,18 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.onRoomViewStoreUpdate(true);
     }
 
+    private onWidgetStoreUpdate = () => {
+        if (this.state.room) {
+            this.checkWidgets(this.state.room);
+        }
+    }
+
+    private checkWidgets = (room) => {
+        this.setState({
+            hasPinnedWidgets: WidgetStore.instance.getPinnedApps(room.roomId).length > 0,
+        })
+    };
+
     private onReadReceiptsChange = () => {
         this.setState({
             showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId),
@@ -299,6 +316,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             joining: RoomViewStore.isJoining(),
             initialEventId: RoomViewStore.getInitialEventId(),
             isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
+            replyToEvent: RoomViewStore.getQuotingEvent(),
             forwardingEvent: RoomViewStore.getForwardingEvent(),
             // we should only peek once we have a ready client
             shouldPeek: this.state.matrixClientIsReady && RoomViewStore.shouldPeek(),
@@ -585,7 +603,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             this.rightPanelStoreToken.remove();
         }
 
-        WidgetEchoStore.removeListener('update', this.onWidgetEchoStoreUpdate);
+        WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
+        WidgetStore.instance.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate);
 
         if (this.showReadReceiptsWatchRef) {
             SettingsStore.unwatchSetting(this.showReadReceiptsWatchRef);
@@ -684,9 +703,8 @@ export default class RoomView extends React.Component<IProps, IState> {
 
     private onAction = payload => {
         switch (payload.action) {
-            case 'message_send_failed':
             case 'message_sent':
-                this.checkIfAlone(this.state.room);
+                this.checkDesktopNotifications();
                 break;
             case 'post_sticker_message':
                 this.injectSticker(
@@ -824,6 +842,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.calculateRecommendedVersion(room);
         this.updateE2EStatus(room);
         this.updatePermissions(room);
+        this.checkWidgets(room);
     };
 
     private async calculateRecommendedVersion(room: Room) {
@@ -1003,33 +1022,17 @@ export default class RoomView extends React.Component<IProps, IState> {
     }
 
     // rate limited because a power level change will emit an event for every member in the room.
-    private updateRoomMembers = rateLimitedFunc((dueToMember) => {
+    private updateRoomMembers = rateLimitedFunc(() => {
         this.updateDMState();
-
-        let memberCountInfluence = 0;
-        if (dueToMember && dueToMember.membership === "invite" && this.state.room.getInvitedMemberCount() === 0) {
-            // A member got invited, but the room hasn't detected that change yet. Influence the member
-            // count by 1 to counteract this.
-            memberCountInfluence = 1;
-        }
-        this.checkIfAlone(this.state.room, memberCountInfluence);
-
         this.updateE2EStatus(this.state.room);
     }, 500);
 
-    private checkIfAlone(room: Room, countInfluence?: number) {
-        let warnedAboutLonelyRoom = false;
-        if (localStorage) {
-            warnedAboutLonelyRoom = Boolean(localStorage.getItem('mx_user_alone_warned_' + this.state.room.roomId));
+    private checkDesktopNotifications() {
+        const memberCount = this.state.room.getJoinedMemberCount() + this.state.room.getInvitedMemberCount();
+        // if they are not alone prompt the user about notifications so they don't miss replies
+        if (memberCount > 1 && Notifier.shouldShowPrompt()) {
+            showNotificationsToast(true);
         }
-        if (warnedAboutLonelyRoom) {
-            if (this.state.isAlone) this.setState({isAlone: false});
-            return;
-        }
-
-        let joinedOrInvitedMemberCount = room.getJoinedMemberCount() + room.getInvitedMemberCount();
-        if (countInfluence) joinedOrInvitedMemberCount += countInfluence;
-        this.setState({isAlone: joinedOrInvitedMemberCount === 1});
     }
 
     private updateDMState() {
@@ -1064,14 +1067,6 @@ export default class RoomView extends React.Component<IProps, IState> {
             action: 'view_invite',
             roomId: this.state.room.roomId,
         });
-        this.setState({isAlone: false}); // there's a good chance they'll invite someone
-    };
-
-    private onStopAloneWarningClick = () => {
-        if (localStorage) {
-            localStorage.setItem('mx_user_alone_warned_' + this.state.room.roomId, String(true));
-        }
-        this.setState({isAlone: false});
     };
 
     private onJoinButtonClicked = () => {
@@ -1093,6 +1088,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 dis.dispatch({
                     action: 'join_room',
                     opts: { inviteSignUrl: signUrl, viaServers: this.props.viaServers },
+                    _type: "unknown", // TODO: instrumentation
                 });
                 return Promise.resolve();
             });
@@ -1119,16 +1115,9 @@ export default class RoomView extends React.Component<IProps, IState> {
 
         ev.dataTransfer.dropEffect = 'none';
 
-        const items = [...ev.dataTransfer.items];
-        if (items.length >= 1) {
-            const isDraggingFiles = items.every(function(item) {
-                return item.kind == 'file';
-            });
-
-            if (isDraggingFiles) {
-                this.setState({ draggingFile: true });
-                ev.dataTransfer.dropEffect = 'copy';
-            }
+        if (ev.dataTransfer.types.includes("Files") || ev.dataTransfer.types.includes("application/x-moz-file")) {
+            this.setState({ draggingFile: true });
+            ev.dataTransfer.dropEffect = 'copy';
         }
     };
 
@@ -1259,7 +1248,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         }
 
         if (!this.state.searchResults.next_batch) {
-            if (this.state.searchResults.results.length == 0) {
+            if (!this.state.searchResults?.results?.length) {
                 ret.push(<li key="search-top-marker">
                     <h2 className="mx_RoomView_topMarker">{ _t("No results") }</h2>
                 </li>,
@@ -1283,7 +1272,7 @@ export default class RoomView extends React.Component<IProps, IState> {
 
         let lastRoomId;
 
-        for (let i = this.state.searchResults.results.length - 1; i >= 0; i--) {
+        for (let i = (this.state.searchResults?.results?.length || 0) - 1; i >= 0; i--) {
             const result = this.state.searchResults.results[i];
 
             const mxEv = result.context.getEvent();
@@ -1353,6 +1342,13 @@ export default class RoomView extends React.Component<IProps, IState> {
         dis.fire(Action.FocusComposer);
     };
 
+    private onAppsClick = () => {
+        dis.dispatch({
+            action: "appsDrawer",
+            show: !this.state.showApps,
+        });
+    };
+
     private onLeaveClick = () => {
         dis.dispatch({
             action: 'leave_room',
@@ -1762,12 +1758,10 @@ export default class RoomView extends React.Component<IProps, IState> {
             isStatusAreaExpanded = this.state.statusBarVisible;
             statusBar = <RoomStatusBar
                 room={this.state.room}
-                sentMessageAndIsAlone={this.state.isAlone}
                 callState={this.state.callState}
                 callType={activeCall ? activeCall.type : null}
                 isPeeking={myMembership !== "join"}
                 onInviteClick={this.onInviteButtonClick}
-                onStopWarningClick={this.onStopAloneWarningClick}
                 onVisible={this.onStatusBarVisible}
                 onHidden={this.onStatusBarHidden}
             />;
@@ -1853,7 +1847,6 @@ export default class RoomView extends React.Component<IProps, IState> {
                 draggingFile={this.state.draggingFile}
                 maxHeight={this.state.auxPanelMaxHeight}
                 showApps={this.state.showApps}
-                hideAppsDrawer={false}
                 onResize={this.onResize}
                 resizeNotifier={this.props.resizeNotifier}
             >
@@ -1872,10 +1865,10 @@ export default class RoomView extends React.Component<IProps, IState> {
                 <MessageComposer
                     room={this.state.room}
                     callState={this.state.callState}
-                    disabled={this.props.disabled}
                     showApps={this.state.showApps}
                     e2eStatus={this.state.e2eStatus}
                     resizeNotifier={this.props.resizeNotifier}
+                    replyToEvent={this.state.replyToEvent}
                     permalinkCreator={this.getPermalinkCreatorForRoom(this.state.room)}
                 />;
         }
@@ -1947,7 +1940,7 @@ export default class RoomView extends React.Component<IProps, IState> {
 
         if (this.state.searchResults) {
             // show searching spinner
-            if (this.state.searchResults.results === undefined) {
+            if (this.state.searchResults.count === undefined) {
                 searchResultsPanel = (
                     <div className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner" />
                 );
@@ -2028,10 +2021,6 @@ export default class RoomView extends React.Component<IProps, IState> {
             "mx_RoomView_statusArea_expanded": isStatusAreaExpanded,
         });
 
-        const fadableSectionClasses = classNames("mx_RoomView_body", "mx_fadable", {
-            "mx_fadable_faded": this.props.disabled,
-        });
-
         const showRightPanel = this.state.room && this.state.showRightPanel;
         const rightPanel = showRightPanel
             ? <RightPanel room={this.state.room} resizeNotifier={this.props.resizeNotifier} />
@@ -2061,9 +2050,11 @@ export default class RoomView extends React.Component<IProps, IState> {
                             onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
                             onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
                             e2eStatus={this.state.e2eStatus}
+                            onAppsClick={this.state.hasPinnedWidgets ? this.onAppsClick : null}
+                            appsShown={this.state.showApps}
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
-                            <div className={fadableSectionClasses}>
+                            <div className="mx_RoomView_body">
                                 {auxPanel}
                                 <div className={timelineClasses}>
                                     {topUnreadMessagesBar}

src/components/structures/ScrollPanel.js

@@ -704,7 +704,7 @@ export default class ScrollPanel extends React.Component {
             if (itemlist.style.height !== newHeight) {
                 itemlist.style.height = newHeight;
             }
-            if (sn.scrollTop !== sn.scrollHeight){
+            if (sn.scrollTop !== sn.scrollHeight) {
                 sn.scrollTop = sn.scrollHeight;
             }
             debuglog("updateHeight to", newHeight);

src/components/structures/ToastContainer.tsx

@@ -55,11 +55,11 @@ export default class ToastContainer extends React.Component<{}, IState> {
         let toast;
         if (totalCount !== 0) {
             const topToast = this.state.toasts[0];
-            const {title, icon, key, component, props} = topToast;
+            const {title, icon, key, component, className, props} = topToast;
             const toastClasses = classNames("mx_Toast_toast", {
                 "mx_Toast_hasIcon": icon,
                 [`mx_Toast_icon_${icon}`]: icon,
-            });
+            }, className);
 
             let countIndicator;
             if (isStacked || this.state.countSeen > 0) {

src/components/structures/UploadBar.js

@@ -86,7 +86,9 @@ export default class UploadBar extends React.Component {
         }
 
         // MUST use var name 'count' for pluralization to kick in
-        const uploadText = _t("Uploading %(filename)s and %(count)s others", {filename: upload.fileName, count: (uploads.length - 1)});
+        const uploadText = _t(
+            "Uploading %(filename)s and %(count)s others", {filename: upload.fileName, count: (uploads.length - 1)},
+        );
 
         return (
             <div className="mx_UploadBar">

src/components/structures/UserMenu.tsx

@@ -23,7 +23,7 @@ import { _t } from "../../languageHandler";
 import { ContextMenuButton } from "./ContextMenu";
 import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog";
 import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
-import RedesignFeedbackDialog from "../views/dialogs/RedesignFeedbackDialog";
+import FeedbackDialog from "../views/dialogs/FeedbackDialog";
 import Modal from "../../Modal";
 import LogoutDialog from "../views/dialogs/LogoutDialog";
 import SettingsStore from "../../settings/SettingsStore";
@@ -44,7 +44,7 @@ import IconizedContextMenu, {
 } from "../views/context_menus/IconizedContextMenu";
 import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
 import * as fbEmitter from "fbemitter";
-import TagOrderStore from "../../stores/TagOrderStore";
+import GroupFilterOrderStore from "../../stores/GroupFilterOrderStore";
 import { showCommunityInviteDialog } from "../../RoomInvite";
 import dis from "../../dispatcher/dispatcher";
 import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
@@ -87,7 +87,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     public componentDidMount() {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
-        this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
+        this.tagStoreRef = GroupFilterOrderStore.addListener(this.onTagStoreUpdate);
     }
 
     public componentWillUnmount() {
@@ -186,15 +186,22 @@ export default class UserMenu extends React.Component<IProps, IState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
+        Modal.createTrackedDialog('Feedback Dialog', '', FeedbackDialog);
         this.setState({contextMenuPosition: null}); // also close the menu
     };
 
-    private onSignOutClick = (ev: ButtonEvent) => {
+    private onSignOutClick = async (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
 
-        Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
+        const cli = MatrixClientPeg.get();
+        if (!cli || !cli.isCryptoEnabled() || !(await cli.exportRoomKeys())?.length) {
+            // log out without user prompt if they have no local megolm sessions
+            dis.dispatch({action: 'logout'});
+        } else {
+            Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
+        }
+
         this.setState({contextMenuPosition: null}); // also close the menu
     };
 
@@ -203,6 +210,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         ev.stopPropagation();
 
         defaultDispatcher.dispatch({action: 'view_home_page'});
+        this.setState({contextMenuPosition: null}); // also close the menu
     };
 
     private onCommunitySettingsClick = (ev: ButtonEvent) => {
@@ -257,7 +265,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         const signupLink = getHostingLink("user-context-menu");
         if (signupLink) {
             hostingLink = (
-                <div className="mx_UserMenu_contextMenu_header">
+                <div className="mx_UserMenu_contextMenu_header mx_UserMenu_contextMenu_hostingLink">
                     {_t(
                         "<a>Upgrade</a> to your own domain", {},
                         {
@@ -452,7 +460,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
     public render() {
         const avatarSize = 32; // should match border-radius of the avatar
 
-        const displayName = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
+        const userId = MatrixClientPeg.get().getUserId();
+        const displayName = OwnProfileStore.instance.displayName || userId;
         const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
 
         const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
@@ -507,7 +516,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     <div className="mx_UserMenu_row">
                         <span className="mx_UserMenu_userAvatarContainer">
                             <BaseAvatar
-                                idName={displayName}
+                                idName={userId}
                                 name={displayName}
                                 url={avatarUrl}
                                 width={avatarSize}

src/components/structures/auth/ForgotPassword.js

@@ -26,6 +26,7 @@ import PasswordReset from "../../../PasswordReset";
 import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import classNames from 'classnames';
 import AuthPage from "../../views/auth/AuthPage";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 // Phases
 // Show controls to configure server details
@@ -64,6 +65,12 @@ export default class ForgotPassword extends React.Component {
         serverRequiresIdServer: null,
     };
 
+    constructor(props) {
+        super(props);
+
+        CountlyAnalytics.instance.track("onboarding_forgot_password_begin");
+    }
+
     componentDidMount() {
         this.reset = null;
         this._checkServerLiveliness(this.props.serverConfig);
@@ -299,15 +306,19 @@ export default class ForgotPassword extends React.Component {
                         value={this.state.email}
                         onChange={this.onInputChanged.bind(this, "email")}
                         autoFocus
+                        onFocus={() => CountlyAnalytics.instance.track("onboarding_forgot_password_email_focus")}
+                        onBlur={() => CountlyAnalytics.instance.track("onboarding_forgot_password_email_blur")}
                     />
                 </div>
                 <div className="mx_AuthBody_fieldRow">
                     <Field
                         name="reset_password"
                         type="password"
-                        label={_t('Password')}
+                        label={_t('New Password')}
                         value={this.state.password}
                         onChange={this.onInputChanged.bind(this, "password")}
+                        onFocus={() => CountlyAnalytics.instance.track("onboarding_forgot_password_newPassword_focus")}
+                        onBlur={() => CountlyAnalytics.instance.track("onboarding_forgot_password_newPassword_blur")}
                     />
                     <Field
                         name="reset_password_confirm"
@@ -315,6 +326,8 @@ export default class ForgotPassword extends React.Component {
                         label={_t('Confirm')}
                         value={this.state.password2}
                         onChange={this.onInputChanged.bind(this, "password2")}
+                        onFocus={() => CountlyAnalytics.instance.track("onboarding_forgot_password_newPassword2_focus")}
+                        onBlur={() => CountlyAnalytics.instance.track("onboarding_forgot_password_newPassword2_blur")}
                     />
                 </div>
                 <span>{_t(

src/components/structures/auth/Login.js

@@ -30,6 +30,7 @@ import SSOButton from "../../views/elements/SSOButton";
 import PlatformPeg from '../../../PlatformPeg';
 import SettingsStore from "../../../settings/SettingsStore";
 import {UIFeature} from "../../../settings/UIFeature";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
@@ -126,6 +127,8 @@ export default class LoginComponent extends React.Component {
             'm.login.cas': () => this._renderSsoStep("cas"),
             'm.login.sso': () => this._renderSsoStep("sso"),
         };
+
+        CountlyAnalytics.instance.track("onboarding_login_begin");
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event

src/components/structures/auth/PostRegistration.js

@@ -1,77 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import { _t } from '../../../languageHandler';
-import AuthPage from "../../views/auth/AuthPage";
-
-export default class PostRegistration extends React.Component {
-    static propTypes = {
-        onComplete: PropTypes.func.isRequired,
-    };
-
-    state = {
-        avatarUrl: null,
-        errorString: null,
-        busy: false,
-    };
-
-    componentDidMount() {
-        // There is some assymetry between ChangeDisplayName and ChangeAvatar,
-        // as ChangeDisplayName will auto-get the name but ChangeAvatar expects
-        // the URL to be passed to you (because it's also used for room avatars).
-        const cli = MatrixClientPeg.get();
-        this.setState({busy: true});
-        const self = this;
-        cli.getProfileInfo(cli.credentials.userId).then(function(result) {
-            self.setState({
-                avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(result.avatar_url),
-                busy: false,
-            });
-        }, function(error) {
-            self.setState({
-                errorString: _t("Failed to fetch avatar URL"),
-                busy: false,
-            });
-        });
-    }
-
-    render() {
-        const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
-        const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
-        const AuthHeader = sdk.getComponent('auth.AuthHeader');
-        const AuthBody = sdk.getComponent("auth.AuthBody");
-        return (
-            <AuthPage>
-                <AuthHeader />
-                <AuthBody>
-                    <div className="mx_Login_profile">
-                        { _t('Set a display name:') }
-                        <ChangeDisplayName />
-                        { _t('Upload an avatar:') }
-                        <ChangeAvatar
-                            initialAvatarUrl={this.state.avatarUrl} />
-                        <button onClick={this.props.onComplete}>{ _t('Continue') }</button>
-                        { this.state.errorString }
-                    </div>
-                </AuthBody>
-            </AuthPage>
-        );
-    }
-}

src/components/structures/auth/Registration.js

@@ -502,6 +502,11 @@ export default class Registration extends React.Component {
             return null;
         }
 
+        // Hide the server picker once the user is doing UI Auth unless encountered a fatal server error
+        if (this.state.phase !== PHASE_SERVER_DETAILS && this.state.doingUIAuth && !this.state.serverErrorIsFatal) {
+            return null;
+        }
+
         // If we're on a different phase, we only show the server type selector,
         // which is always shown if we allow custom URLs at all.
         // (if there's a fatal server error, we need to show the full server
@@ -582,17 +587,6 @@ export default class Registration extends React.Component {
                 <Spinner />
             </div>;
         } else if (this.state.flows.length) {
-            let onEditServerDetailsClick = null;
-            // If custom URLs are allowed and we haven't selected the Free server type, wire
-            // up the server details edit link.
-            if (
-                PHASES_ENABLED &&
-                !SdkConfig.get()['disable_custom_urls'] &&
-                this.state.serverType !== ServerType.FREE
-            ) {
-                onEditServerDetailsClick = this.onEditServerDetailsClick;
-            }
-
             return <RegistrationForm
                 defaultUsername={this.state.formVals.username}
                 defaultEmail={this.state.formVals.email}
@@ -600,7 +594,6 @@ export default class Registration extends React.Component {
                 defaultPhoneNumber={this.state.formVals.phoneNumber}
                 defaultPassword={this.state.formVals.password}
                 onRegisterClick={this.onFormSubmit}
-                onEditServerDetailsClick={onEditServerDetailsClick}
                 flows={this.state.flows}
                 serverConfig={this.props.serverConfig}
                 canSubmit={!this.state.serverErrorIsFatal}
@@ -686,11 +679,48 @@ export default class Registration extends React.Component {
                 { regDoneText }
             </div>;
         } else {
+            let yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
+                serverName: this.props.serverConfig.hsName,
+            });
+            if (this.props.serverConfig.hsNameIsDifferent) {
+                const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
+
+                yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
+                    'underlinedServerName': () => {
+                        return <TextWithTooltip
+                            class="mx_Login_underlinedServerName"
+                            tooltip={this.props.serverConfig.hsUrl}
+                        >
+                            {this.props.serverConfig.hsName}
+                        </TextWithTooltip>;
+                    },
+                });
+            }
+
+            // If custom URLs are allowed, user is not doing UIA flows and they haven't selected the Free server type,
+            // wire up the server details edit link.
+            let editLink = null;
+            if (PHASES_ENABLED &&
+                !SdkConfig.get()['disable_custom_urls'] &&
+                this.state.serverType !== ServerType.FREE &&
+                !this.state.doingUIAuth
+            ) {
+                editLink = (
+                    <a className="mx_AuthBody_editServerDetails" href="#" onClick={this.onEditServerDetailsClick}>
+                        {_t('Change')}
+                    </a>
+                );
+            }
+
             body = <div>
                 <h2>{ _t('Create your account') }</h2>
                 { errorText }
                 { serverDeadSection }
                 { this.renderServerComponent() }
+                { this.state.phase !== PHASE_SERVER_DETAILS && <h3>
+                    {yourMatrixAccountText}
+                    {editLink}
+                </h3> }
                 { this.renderRegisterComponent() }
                 { goBack }
                 { signIn }

src/components/views/auth/CaptchaForm.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 const DIV_ID = 'mx_recaptcha';
 
@@ -45,6 +46,8 @@ export default class CaptchaForm extends React.Component {
         this._captchaWidgetId = null;
 
         this._recaptchaContainer = createRef();
+
+        CountlyAnalytics.instance.track("onboarding_grecaptcha_begin");
     }
 
     componentDidMount() {
@@ -99,10 +102,16 @@ export default class CaptchaForm extends React.Component {
         console.log("Loaded recaptcha script.");
         try {
             this._renderRecaptcha(DIV_ID);
+            // clear error if re-rendered
+            this.setState({
+                errorText: null,
+            });
+            CountlyAnalytics.instance.track("onboarding_grecaptcha_loaded");
         } catch (e) {
             this.setState({
                 errorText: e.toString(),
             });
+            CountlyAnalytics.instance.track("onboarding_grecaptcha_error", { error: e.toString() });
         }
     }
 

src/components/views/auth/CountryDropdown.js

@@ -123,7 +123,7 @@ export default class CountryDropdown extends React.Component {
         const options = displayedCountries.map((country) => {
             return <div className="mx_CountryDropdown_option" key={country.iso2}>
                 { this._flagImgForIso2(country.iso2) }
-                { country.name } (+{ country.prefix })
+                { _t(country.name) } (+{ country.prefix })
             </div>;
         });
 

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -26,6 +26,7 @@ import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
 import Spinner from "../elements/Spinner";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -189,6 +190,7 @@ export class RecaptchaAuthEntry extends React.Component {
     }
 
     _onCaptchaResponse = response => {
+        CountlyAnalytics.instance.track("onboarding_grecaptcha_submit");
         this.props.submitAuthDict({
             type: RecaptchaAuthEntry.LOGIN_TYPE,
             response: response,
@@ -297,6 +299,8 @@ export class TermsAuthEntry extends React.Component {
             toggledPolicies: initToggles,
             policies: pickedPolicies,
         };
+
+        CountlyAnalytics.instance.track("onboarding_terms_begin");
     }
 
 
@@ -326,8 +330,12 @@ export class TermsAuthEntry extends React.Component {
             allChecked = allChecked && checked;
         }
 
-        if (allChecked) this.props.submitAuthDict({type: TermsAuthEntry.LOGIN_TYPE});
-        else this.setState({errorText: _t("Please review and accept all of the homeserver's policies")});
+        if (allChecked) {
+            this.props.submitAuthDict({type: TermsAuthEntry.LOGIN_TYPE});
+            CountlyAnalytics.instance.track("onboarding_terms_complete");
+        } else {
+            this.setState({errorText: _t("Please review and accept all of the homeserver's policies")});
+        }
     };
 
     render() {
@@ -413,12 +421,12 @@ export class EmailIdentityAuthEntry extends React.Component {
             return <Spinner />;
         } else {
             return (
-                <div>
-                    <p>{ _t("An email has been sent to %(emailAddress)s",
-                        { emailAddress: (sub) => <i>{ this.props.inputs.emailAddress }</i> },
+                <div className="mx_InteractiveAuthEntryComponents_emailWrapper">
+                    <p>{ _t("A confirmation email has been sent to %(emailAddress)s",
+                        { emailAddress: (sub) => <b>{ this.props.inputs.emailAddress }</b> },
                     ) }
                     </p>
-                    <p>{ _t("Please check your email to continue registration.") }</p>
+                    <p>{ _t("Open the link in the email to continue registration.") }</p>
                 </div>
             );
         }

src/components/views/auth/PasswordLogin.js

@@ -24,6 +24,7 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import AccessibleButton from "../elements/AccessibleButton";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 /**
  * A pure UI component which displays a username/password form.
@@ -150,7 +151,20 @@ export default class PasswordLogin extends React.Component {
         this.props.onUsernameChanged(ev.target.value);
     }
 
+    onUsernameFocus() {
+        if (this.state.loginType === PasswordLogin.LOGIN_FIELD_MXID) {
+            CountlyAnalytics.instance.track("onboarding_login_mxid_focus");
+        } else {
+            CountlyAnalytics.instance.track("onboarding_login_email_focus");
+        }
+    }
+
     onUsernameBlur(ev) {
+        if (this.state.loginType === PasswordLogin.LOGIN_FIELD_MXID) {
+            CountlyAnalytics.instance.track("onboarding_login_mxid_blur");
+        } else {
+            CountlyAnalytics.instance.track("onboarding_login_email_blur");
+        }
         this.props.onUsernameBlur(ev.target.value);
     }
 
@@ -161,6 +175,7 @@ export default class PasswordLogin extends React.Component {
             loginType: loginType,
             username: "", // Reset because email and username use the same state
         });
+        CountlyAnalytics.instance.track("onboarding_login_type_changed", { loginType });
     }
 
     onPhoneCountryChanged(country) {
@@ -176,8 +191,13 @@ export default class PasswordLogin extends React.Component {
         this.props.onPhoneNumberChanged(ev.target.value);
     }
 
+    onPhoneNumberFocus() {
+        CountlyAnalytics.instance.track("onboarding_login_phone_number_focus");
+    }
+
     onPhoneNumberBlur(ev) {
         this.props.onPhoneNumberBlur(ev.target.value);
+        CountlyAnalytics.instance.track("onboarding_login_phone_number_blur");
     }
 
     onPasswordChanged(ev) {
@@ -202,6 +222,7 @@ export default class PasswordLogin extends React.Component {
                     placeholder="joe@example.com"
                     value={this.state.username}
                     onChange={this.onUsernameChanged}
+                    onFocus={this.onUsernameFocus}
                     onBlur={this.onUsernameBlur}
                     disabled={this.props.disableSubmit}
                     autoFocus={autoFocus}
@@ -216,6 +237,7 @@ export default class PasswordLogin extends React.Component {
                     label={_t("Username")}
                     value={this.state.username}
                     onChange={this.onUsernameChanged}
+                    onFocus={this.onUsernameFocus}
                     onBlur={this.onUsernameBlur}
                     disabled={this.props.disableSubmit}
                     autoFocus={autoFocus}
@@ -240,6 +262,7 @@ export default class PasswordLogin extends React.Component {
                     value={this.state.phoneNumber}
                     prefixComponent={phoneCountry}
                     onChange={this.onPhoneNumberChanged}
+                    onFocus={this.onPhoneNumberFocus}
                     onBlur={this.onPhoneNumberBlur}
                     disabled={this.props.disableSubmit}
                     autoFocus={autoFocus}

src/components/views/auth/RegistrationForm.js

@@ -29,6 +29,7 @@ import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 import withValidation from '../elements/Validation';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import PassphraseField from "./PassphraseField";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 const FIELD_EMAIL = 'field_email';
 const FIELD_PHONE_NUMBER = 'field_phone_number';
@@ -50,7 +51,6 @@ export default class RegistrationForm extends React.Component {
         defaultUsername: PropTypes.string,
         defaultPassword: PropTypes.string,
         onRegisterClick: PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
-        onEditServerDetailsClick: PropTypes.func,
         flows: PropTypes.arrayOf(PropTypes.object).isRequired,
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
         canSubmit: PropTypes.bool,
@@ -77,6 +77,8 @@ export default class RegistrationForm extends React.Component {
             passwordConfirm: this.props.defaultPassword || "",
             passwordComplexity: null,
         };
+
+        CountlyAnalytics.instance.track("onboarding_registration_begin");
     }
 
     onSubmit = async ev => {
@@ -86,6 +88,7 @@ export default class RegistrationForm extends React.Component {
 
         const allFieldsValid = await this.verifyFieldsBeforeSubmit();
         if (!allFieldsValid) {
+            CountlyAnalytics.instance.track("onboarding_registration_submit_failed");
             return;
         }
 
@@ -110,6 +113,8 @@ export default class RegistrationForm extends React.Component {
                 return;
             }
 
+            CountlyAnalytics.instance.track("onboarding_registration_submit_warn");
+
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
             Modal.createTrackedDialog('If you don\'t specify an email address...', '', QuestionDialog, {
                 title: _t("Warning!"),
@@ -128,6 +133,11 @@ export default class RegistrationForm extends React.Component {
 
     _doSubmit(ev) {
         const email = this.state.email.trim();
+
+        CountlyAnalytics.instance.track("onboarding_registration_submit_ok", {
+            email: !!email,
+        });
+
         const promise = this.props.onRegisterClick({
             username: this.state.username.trim(),
             password: this.state.password.trim(),
@@ -239,6 +249,7 @@ export default class RegistrationForm extends React.Component {
 
     validateEmailRules = withValidation({
         description: () => _t("Use an email address to recover your account"),
+        hideDescriptionIfValid: true,
         rules: [
             {
                 key: "required",
@@ -315,6 +326,7 @@ export default class RegistrationForm extends React.Component {
 
     validatePhoneNumberRules = withValidation({
         description: () => _t("Other users can invite you to rooms using your contact details"),
+        hideDescriptionIfValid: true,
         rules: [
             {
                 key: "required",
@@ -345,6 +357,7 @@ export default class RegistrationForm extends React.Component {
 
     validateUsernameRules = withValidation({
         description: () => _t("Use lowercase letters, numbers, dashes and underscores only"),
+        hideDescriptionIfValid: true,
         rules: [
             {
                 key: "required",
@@ -422,6 +435,8 @@ export default class RegistrationForm extends React.Component {
             value={this.state.email}
             onChange={this.onEmailChange}
             onValidate={this.onEmailValidate}
+            onFocus={() => CountlyAnalytics.instance.track("onboarding_registration_email_focus")}
+            onBlur={() => CountlyAnalytics.instance.track("onboarding_registration_email_blur")}
         />;
     }
 
@@ -433,6 +448,8 @@ export default class RegistrationForm extends React.Component {
             value={this.state.password}
             onChange={this.onPasswordChange}
             onValidate={this.onPasswordValidate}
+            onFocus={() => CountlyAnalytics.instance.track("onboarding_registration_password_focus")}
+            onBlur={() => CountlyAnalytics.instance.track("onboarding_registration_password_blur")}
         />;
     }
 
@@ -443,10 +460,12 @@ export default class RegistrationForm extends React.Component {
             ref={field => this[FIELD_PASSWORD_CONFIRM] = field}
             type="password"
             autoComplete="new-password"
-            label={_t("Confirm")}
+            label={_t("Confirm password")}
             value={this.state.passwordConfirm}
             onChange={this.onPasswordConfirmChange}
             onValidate={this.onPasswordConfirmValidate}
+            onFocus={() => CountlyAnalytics.instance.track("onboarding_registration_passwordConfirm_focus")}
+            onBlur={() => CountlyAnalytics.instance.track("onboarding_registration_passwordConfirm_blur")}
         />;
     }
 
@@ -487,37 +506,12 @@ export default class RegistrationForm extends React.Component {
             value={this.state.username}
             onChange={this.onUsernameChange}
             onValidate={this.onUsernameValidate}
+            onFocus={() => CountlyAnalytics.instance.track("onboarding_registration_username_focus")}
+            onBlur={() => CountlyAnalytics.instance.track("onboarding_registration_username_blur")}
         />;
     }
 
     render() {
-        let yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
-            serverName: this.props.serverConfig.hsName,
-        });
-        if (this.props.serverConfig.hsNameIsDifferent) {
-            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
-
-            yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
-                'underlinedServerName': () => {
-                    return <TextWithTooltip
-                        class="mx_Login_underlinedServerName"
-                        tooltip={this.props.serverConfig.hsUrl}
-                    >
-                        {this.props.serverConfig.hsName}
-                    </TextWithTooltip>;
-                },
-            });
-        }
-
-        let editLink = null;
-        if (this.props.onEditServerDetailsClick) {
-            editLink = <a className="mx_AuthBody_editServerDetails"
-                href="#" onClick={this.props.onEditServerDetailsClick}
-            >
-                {_t('Change')}
-            </a>;
-        }
-
         const registerButton = (
             <input className="mx_Login_submit" type="submit" value={_t("Register")} disabled={!this.props.canSubmit} />
         );
@@ -553,10 +547,6 @@ export default class RegistrationForm extends React.Component {
 
         return (
             <div>
-                <h3>
-                    {yourMatrixAccountText}
-                    {editLink}
-                </h3>
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_AuthBody_fieldRow">
                         {this.renderUsername()}

src/components/views/auth/ServerConfig.js

@@ -26,6 +26,7 @@ import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import SdkConfig from "../../../SdkConfig";
 import { createClient } from 'matrix-js-sdk/src/matrix';
 import classNames from 'classnames';
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 /*
  * A pure UI component which displays the HS and IS to use.
@@ -70,6 +71,8 @@ export default class ServerConfig extends React.PureComponent {
             isUrl: props.serverConfig.isUrl,
             showIdentityServer: false,
         };
+
+        CountlyAnalytics.instance.track("onboarding_custom_server");
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event

src/components/views/auth/Welcome.js

@@ -23,11 +23,18 @@ import AuthPage from "./AuthPage";
 import {_td} from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
 import {UIFeature} from "../../../settings/UIFeature";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 // translatable strings for Welcome pages
 _td("Sign in with SSO");
 
 export default class Welcome extends React.PureComponent {
+    constructor(props) {
+        super(props);
+
+        CountlyAnalytics.instance.track("onboarding_welcome");
+    }
+
     render() {
         const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
         const LanguageSelector = sdk.getComponent('auth.LanguageSelector');

src/components/views/avatars/BaseAvatar.tsx

@@ -51,7 +51,8 @@ const calculateUrls = (url, urls) => {
         _urls = urls || [];
 
         if (url) {
-            _urls.unshift(url); // put in urls[0]
+            // copy urls and put url first
+            _urls = [url, ..._urls];
         }
     }
 

src/components/views/avatars/RoomAvatar.tsx

@@ -22,6 +22,7 @@ import ImageView from '../elements/ImageView';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
+import {ResizeMethod} from "../../../Avatar";
 
 interface IProps {
     // Room may be left unset here, but if it is,
@@ -32,8 +33,9 @@ interface IProps {
     oobData?: any;
     width?: number;
     height?: number;
-    resizeMethod?: string;
+    resizeMethod?: ResizeMethod;
     viewAvatarOnClick?: boolean;
+    onClick?(): void;
 }
 
 interface IState {
@@ -129,7 +131,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const {room, oobData, viewAvatarOnClick, ...otherProps} = this.props;
+        const {room, oobData, viewAvatarOnClick, onClick, ...otherProps} = this.props;
 
         const roomName = room ? room.name : oobData.name;
 
@@ -138,7 +140,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
                 name={roomName}
                 idName={room ? room.roomId : null}
                 urls={this.state.urls}
-                onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : null}
+                onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : onClick}
             />
         );
     }

src/components/views/avatars/WidgetAvatar.tsx

@@ -0,0 +1,58 @@
+/*
+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, {ComponentProps, useContext} from 'react';
+import classNames from 'classnames';
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {IApp} from "../../../stores/WidgetStore";
+import BaseAvatar, {BaseAvatarType} from "./BaseAvatar";
+
+interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
+    app: IApp;
+}
+
+const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 20, ...props }) => {
+    const cli = useContext(MatrixClientContext);
+
+    let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg")];
+    // heuristics for some better icons until Widgets support their own icons
+    if (app.type.includes("jitsi")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_video.svg")];
+    } else if (app.type.includes("meeting") || app.type.includes("calendar")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg")];
+    } else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg")];
+    } else if (app.type.includes("clock")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg")];
+    }
+
+    return (
+        <BaseAvatar
+            {...props}
+            name={app.id}
+            className={classNames("mx_WidgetAvatar", className)}
+            // MSC2765
+            url={app.avatar_url ? getHttpUriForMxc(cli.getHomeserverUrl(), app.avatar_url, 20, 20, "crop") : undefined}
+            urls={iconUrls}
+            width={width}
+            height={height}
+        />
+    )
+};
+
+export default WidgetAvatar;

src/components/views/context_menus/MessageContextMenu.js

@@ -31,6 +31,7 @@ import SettingsStore from '../../../settings/SettingsStore';
 import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
 import {MenuItem} from "../../structures/ContextMenu";
+import {EventType} from "matrix-js-sdk/src/@types/event";
 
 function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -72,7 +73,10 @@ export default class MessageContextMenu extends React.Component {
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.mxEvent.getRoomId());
 
-        const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
+        // We explicitly decline to show the redact option on ACL events as it has a potential
+        // to obliterate the room - https://github.com/matrix-org/synapse/issues/4042
+        const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId)
+            && this.props.mxEvent.getType() !== EventType.RoomServerAcl;
         let canPin = room.currentState.mayClientSendStateEvent('m.room.pinned_events', cli);
 
         // HACK: Intentionally say we can't pin if the user doesn't want to use the functionality

src/components/views/context_menus/WidgetContextMenu.js

@@ -1,142 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import {_t} from '../../../languageHandler';
-import {MenuItem} from "../../structures/ContextMenu";
-
-export default class WidgetContextMenu extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func,
-
-        // Callback for when the revoke button is clicked. Required.
-        onRevokeClicked: PropTypes.func.isRequired,
-
-        // Callback for when the unpin button is clicked. If absent, unpin will be hidden.
-        onUnpinClicked: PropTypes.func,
-
-        // Callback for when the snapshot button is clicked. Button not shown
-        // without a callback.
-        onSnapshotClicked: PropTypes.func,
-
-        // Callback for when the reload button is clicked. Button not shown
-        // without a callback.
-        onReloadClicked: PropTypes.func,
-
-        // Callback for when the edit button is clicked. Button not shown
-        // without a callback.
-        onEditClicked: PropTypes.func,
-
-        // Callback for when the delete button is clicked. Button not shown
-        // without a callback.
-        onDeleteClicked: PropTypes.func,
-    };
-
-    proxyClick(fn) {
-        fn();
-        if (this.props.onFinished) this.props.onFinished();
-    }
-
-    // XXX: It's annoying that our context menus require us to hit onFinished() to close :(
-
-    onEditClicked = () => {
-        this.proxyClick(this.props.onEditClicked);
-    };
-
-    onReloadClicked = () => {
-        this.proxyClick(this.props.onReloadClicked);
-    };
-
-    onSnapshotClicked = () => {
-        this.proxyClick(this.props.onSnapshotClicked);
-    };
-
-    onDeleteClicked = () => {
-        this.proxyClick(this.props.onDeleteClicked);
-    };
-
-    onRevokeClicked = () => {
-        this.proxyClick(this.props.onRevokeClicked);
-    };
-
-    onUnpinClicked = () => this.proxyClick(this.props.onUnpinClicked);
-
-    render() {
-        const options = [];
-
-        if (this.props.onEditClicked) {
-            options.push(
-                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onEditClicked} key='edit'>
-                    {_t("Edit")}
-                </MenuItem>,
-            );
-        }
-
-        if (this.props.onUnpinClicked) {
-            options.push(
-                <MenuItem className="mx_WidgetContextMenu_option" onClick={this.onUnpinClicked} key="unpin">
-                    {_t("Unpin")}
-                </MenuItem>,
-            );
-        }
-
-        if (this.props.onReloadClicked) {
-            options.push(
-                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onReloadClicked} key='reload'>
-                    {_t("Reload")}
-                </MenuItem>,
-            );
-        }
-
-        if (this.props.onSnapshotClicked) {
-            options.push(
-                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onSnapshotClicked} key='snap'>
-                    {_t("Take picture")}
-                </MenuItem>,
-            );
-        }
-
-        if (this.props.onDeleteClicked) {
-            options.push(
-                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onDeleteClicked} key='delete'>
-                    {_t("Remove for everyone")}
-                </MenuItem>,
-            );
-        }
-
-        // Push this last so it appears last. It's always present.
-        options.push(
-            <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onRevokeClicked} key='revoke'>
-                {_t("Remove for me")}
-            </MenuItem>,
-        );
-
-        // Put separators between the options
-        if (options.length > 1) {
-            const length = options.length;
-            for (let i = 0; i < length - 1; i++) {
-                const sep = <hr key={i} className="mx_WidgetContextMenu_separator" />;
-
-                // Insert backwards so the insertions don't affect our math on where to place them.
-                // We also use our cached length to avoid worrying about options.length changing
-                options.splice(length - 1 - i, 0, sep);
-            }
-        }
-
-        return <div className="mx_WidgetContextMenu">{options}</div>;
-    }
-}

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -0,0 +1,177 @@
+/*
+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 {MatrixCapabilities} from "matrix-widget-api";
+
+import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
+import {ChevronFace} from "../../structures/ContextMenu";
+import {_t} from "../../../languageHandler";
+import WidgetStore, {IApp} from "../../../stores/WidgetStore";
+import WidgetUtils from "../../../utils/WidgetUtils";
+import {WidgetMessagingStore} from "../../../stores/widgets/WidgetMessagingStore";
+import RoomContext from "../../../contexts/RoomContext";
+import dis from "../../../dispatcher/dispatcher";
+import SettingsStore from "../../../settings/SettingsStore";
+import {SettingLevel} from "../../../settings/SettingLevel";
+import Modal from "../../../Modal";
+import QuestionDialog from "../dialogs/QuestionDialog";
+import {WidgetType} from "../../../widgets/WidgetType";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
+    app: IApp;
+    userWidget?: boolean;
+    showUnpin?: boolean;
+    // override delete handler
+    onDeleteClick?(): void;
+}
+
+const WidgetContextMenu: React.FC<IProps> = ({
+    onFinished,
+    app,
+    userWidget,
+    onDeleteClick,
+    showUnpin,
+    ...props
+}) => {
+    const cli = useContext(MatrixClientContext);
+    const {room, roomId} = useContext(RoomContext);
+
+    const widgetMessaging = WidgetMessagingStore.instance.getMessagingForId(app.id);
+    const canModify = userWidget || WidgetUtils.canUserModifyWidgets(roomId);
+
+    let unpinButton;
+    if (showUnpin) {
+        const onUnpinClick = () => {
+            WidgetStore.instance.unpinWidget(app.id);
+            onFinished();
+        };
+
+        unpinButton = <IconizedContextMenuOption onClick={onUnpinClick} label={_t("Unpin")} />;
+    }
+
+    let editButton;
+    if (canModify && WidgetUtils.isManagedByManager(app)) {
+        const onEditClick = () => {
+            WidgetUtils.editWidget(room, app);
+            onFinished();
+        };
+
+        editButton = <IconizedContextMenuOption onClick={onEditClick} label={_t("Edit")} />;
+    }
+
+    let snapshotButton;
+    if (widgetMessaging?.hasCapability(MatrixCapabilities.Screenshots)) {
+        const onSnapshotClick = () => {
+            widgetMessaging?.takeScreenshot().then(data => {
+                dis.dispatch({
+                    action: 'picture_snapshot',
+                    file: data.screenshot,
+                });
+            }).catch(err => {
+                console.error("Failed to take screenshot: ", err);
+            });
+            onFinished();
+        };
+
+        snapshotButton = <IconizedContextMenuOption onClick={onSnapshotClick} label={_t("Take a picture")} />;
+    }
+
+    let deleteButton;
+    if (onDeleteClick || canModify) {
+        const onDeleteClickDefault = () => {
+            // Show delete confirmation dialog
+            Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
+                title: _t("Delete Widget"),
+                description: _t(
+                    "Deleting a widget removes it for all users in this room." +
+                    " Are you sure you want to delete this widget?"),
+                button: _t("Delete widget"),
+                onFinished: (confirmed) => {
+                    if (!confirmed) return;
+                    WidgetUtils.setRoomWidget(roomId, app.id);
+                },
+            });
+            onFinished();
+        };
+
+        deleteButton = <IconizedContextMenuOption
+            onClick={onDeleteClick || onDeleteClickDefault}
+            label={userWidget ? _t("Remove") : _t("Remove for everyone")}
+        />;
+    }
+
+    let isAllowedWidget = SettingsStore.getValue("allowedWidgets", roomId)[app.eventId];
+    if (isAllowedWidget === undefined) {
+        isAllowedWidget = app.creatorUserId === cli.getUserId();
+    }
+
+    const isLocalWidget = WidgetType.JITSI.matches(app.type);
+    let revokeButton;
+    if (!userWidget && !isLocalWidget && isAllowedWidget) {
+        const onRevokeClick = () => {
+            console.info("Revoking permission for widget to load: " + app.eventId);
+            const current = SettingsStore.getValue("allowedWidgets", roomId);
+            current[app.eventId] = false;
+            SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).catch(err => {
+                console.error(err);
+                // We don't really need to do anything about this - the user will just hit the button again.
+            });
+            onFinished();
+        };
+
+        revokeButton = <IconizedContextMenuOption onClick={onRevokeClick} label={_t("Revoke permissions")} />;
+    }
+
+    const pinnedWidgets = WidgetStore.instance.getPinnedApps(roomId);
+    const widgetIndex = pinnedWidgets.findIndex(widget => widget.id === app.id);
+
+    let moveLeftButton;
+    if (showUnpin && widgetIndex > 0) {
+        const onClick = () => {
+            WidgetStore.instance.movePinnedWidget(app.id, -1);
+            onFinished();
+        };
+
+        moveLeftButton = <IconizedContextMenuOption onClick={onClick} label={_t("Move left")} />;
+    }
+
+    let moveRightButton;
+    if (showUnpin && widgetIndex < pinnedWidgets.length - 1) {
+        const onClick = () => {
+            WidgetStore.instance.movePinnedWidget(app.id, 1);
+            onFinished();
+        };
+
+        moveRightButton = <IconizedContextMenuOption onClick={onClick} label={_t("Move right")} />;
+    }
+
+    return <IconizedContextMenu {...props} chevronFace={ChevronFace.None} onFinished={onFinished}>
+        <IconizedContextMenuOptionList>
+            { editButton }
+            { revokeButton }
+            { deleteButton }
+            { snapshotButton }
+            { moveLeftButton }
+            { moveRightButton }
+            { unpinButton }
+        </IconizedContextMenuOptionList>
+    </IconizedContextMenu>;
+};
+
+export default WidgetContextMenu;
+

src/components/views/dialogs/FeedbackDialog.js

@@ -0,0 +1,138 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useState} from 'react';
+import QuestionDialog from './QuestionDialog';
+import { _t } from '../../../languageHandler';
+import Field from "../elements/Field";
+import AccessibleButton from "../elements/AccessibleButton";
+import CountlyAnalytics from "../../../CountlyAnalytics";
+import SdkConfig from "../../../SdkConfig";
+import Modal from "../../../Modal";
+import BugReportDialog from "./BugReportDialog";
+import InfoDialog from "./InfoDialog";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+
+const existingIssuesUrl = "https://github.com/vector-im/element-web/issues" +
+    "?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc";
+const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
+
+
+export default (props) => {
+    const [rating, setRating] = useState("");
+    const [comment, setComment] = useState("");
+
+    const onDebugLogsLinkClick = () => {
+        props.onFinished();
+        Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
+    };
+
+    const hasFeedback = CountlyAnalytics.instance.canEnable();
+    const onFinished = (sendFeedback) => {
+        if (hasFeedback && sendFeedback) {
+            CountlyAnalytics.instance.reportFeedback(parseInt(rating, 10), comment);
+            Modal.createTrackedDialog('Feedback sent', '', InfoDialog, {
+                title: _t('Feedback sent'),
+                description: _t('Thank you!'),
+            });
+        }
+        props.onFinished();
+    };
+
+    const brand = SdkConfig.get().brand;
+
+    let countlyFeedbackSection;
+    if (hasFeedback) {
+        countlyFeedbackSection = <React.Fragment>
+            <hr />
+            <div className="mx_FeedbackDialog_section mx_FeedbackDialog_rateApp">
+                <h3>{_t("Rate %(brand)s", { brand })}</h3>
+
+                <p>{_t("Tell us below how you feel about %(brand)s so far.", { brand })}</p>
+                <p>{_t("Please go into as much detail as you like, so we can track down the problem.")}</p>
+
+                <StyledRadioGroup
+                    name="feedbackRating"
+                    value={rating}
+                    onChange={setRating}
+                    definitions={[
+                        { value: "1", label: "😠" },
+                        { value: "2", label: "😞" },
+                        { value: "3", label: "😑" },
+                        { value: "4", label: "😄" },
+                        { value: "5", label: "😍" },
+                    ]}
+                />
+
+                <Field
+                    id="feedbackComment"
+                    label={_t("Add comment")}
+                    placeholder={_t("Comment")}
+                    type="text"
+                    autoComplete="off"
+                    value={comment}
+                    element="textarea"
+                    onChange={(ev) => {
+                        setComment(ev.target.value);
+                    }}
+                />
+            </div>
+        </React.Fragment>;
+    }
+
+    let subheading;
+    if (hasFeedback) {
+        subheading = (
+            <h2>{_t("There are two ways you can provide feedback and help us improve %(brand)s.", { brand })}</h2>
+        );
+    }
+
+    return (<QuestionDialog
+        className="mx_FeedbackDialog"
+        hasCancelButton={!!hasFeedback}
+        title={_t("Feedback")}
+        description={<React.Fragment>
+            { subheading }
+
+            <div className="mx_FeedbackDialog_section mx_FeedbackDialog_reportBug">
+                <h3>{_t("Report a bug")}</h3>
+                <p>{
+                    _t("Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. " +
+                        "No match? <newIssueLink>Start a new one</newIssueLink>.", {}, {
+                        existingIssuesLink: (sub) => {
+                            return <a target="_blank" rel="noreferrer noopener" href={existingIssuesUrl}>{ sub }</a>;
+                        },
+                        newIssueLink: (sub) => {
+                            return <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>{ sub }</a>;
+                        },
+                    })
+                }</p>
+                <p>{
+                    _t("PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> " +
+                        "to help us track down the problem.", {}, {
+                        debugLogsLink: sub => (
+                            <AccessibleButton kind="link" onClick={onDebugLogsLinkClick}>{sub}</AccessibleButton>
+                        ),
+                    })
+                }</p>
+            </div>
+            { countlyFeedbackSection }
+        </React.Fragment>}
+        button={hasFeedback ? _t("Send feedback") : _t("Go back")}
+        buttonDisabled={hasFeedback && rating === ""}
+        onFinished={onFinished}
+    />);
+};

src/components/views/dialogs/InviteDialog.js

@@ -31,7 +31,7 @@ import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
-import createRoom, {canEncryptToAllUsers, privateShouldBeEncrypted} from "../../../createRoom";
+import createRoom, {canEncryptToAllUsers, findDMForUser, privateShouldBeEncrypted} from "../../../createRoom";
 import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
@@ -40,6 +40,8 @@ import RoomListStore from "../../../stores/room-list/RoomListStore";
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
 import SettingsStore from "../../../settings/SettingsStore";
 import {UIFeature} from "../../../settings/UIFeature";
+import CountlyAnalytics from "../../../CountlyAnalytics";
+import {Room} from "matrix-js-sdk/src/models/room";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -279,11 +281,17 @@ class DMRoomTile extends React.PureComponent {
             </span>
         );
 
+        const caption = this.props.member.isEmail
+            ? _t("Invite by email")
+            : this._highlightName(this.props.member.userId);
+
         return (
             <div className='mx_InviteDialog_roomTile' onClick={this._onClick}>
                 {stackedAvatar}
-                <span className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</span>
-                <span className='mx_InviteDialog_roomTile_userId'>{this._highlightName(this.props.member.userId)}</span>
+                <span className="mx_InviteDialog_roomTile_nameStack">
+                    <div className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</div>
+                    <div className='mx_InviteDialog_roomTile_userId'>{caption}</div>
+                </span>
                 {timestamp}
             </div>
         );
@@ -301,10 +309,14 @@ export default class InviteDialog extends React.PureComponent {
 
         // The room ID this dialog is for. Only required for KIND_INVITE.
         roomId: PropTypes.string,
+
+        // Initial value to populate the filter with
+        initialText: PropTypes.string,
     };
 
     static defaultProps = {
         kind: KIND_DM,
+        initialText: "",
     };
 
     _debounceTimer: number = null;
@@ -325,11 +337,13 @@ export default class InviteDialog extends React.PureComponent {
             room.getMembersWithMembership('join').forEach(m => alreadyInvited.add(m.userId));
             // add banned users, so we don't try to invite them
             room.getMembersWithMembership('ban').forEach(m => alreadyInvited.add(m.userId));
+
+            CountlyAnalytics.instance.trackBeginInvite(props.roomId);
         }
 
         this.state = {
             targets: [], // array of Member objects (see interface above)
-            filterText: "",
+            filterText: this.props.initialText,
             recents: InviteDialog.buildRecents(alreadyInvited),
             numRecentsShown: INITIAL_ROOMS_SHOWN,
             suggestions: this._buildSuggestions(alreadyInvited),
@@ -347,6 +361,12 @@ export default class InviteDialog extends React.PureComponent {
         this._editorRef = createRef();
     }
 
+    componentDidMount() {
+        if (this.props.initialText) {
+            this._updateSuggestions(this.props.initialText);
+        }
+    }
+
     static buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number} {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
@@ -566,7 +586,12 @@ export default class InviteDialog extends React.PureComponent {
         const targetIds = targets.map(t => t.userId);
 
         // Check if there is already a DM with these people and reuse it if possible.
-        const existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds);
+        let existingRoom: Room;
+        if (targetIds.length === 1) {
+            existingRoom = findDMForUser(MatrixClientPeg.get(), targetIds[0]);
+        } else {
+            existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds);
+        }
         if (existingRoom) {
             dis.dispatch({
                 action: 'view_room',
@@ -627,6 +652,7 @@ export default class InviteDialog extends React.PureComponent {
     };
 
     _inviteUsers = () => {
+        const startTime = CountlyAnalytics.getTimestamp();
         this.setState({busy: true});
         this._convertFilter();
         const targets = this._convertFilter();
@@ -643,6 +669,7 @@ export default class InviteDialog extends React.PureComponent {
         }
 
         inviteMultipleToRoom(this.props.roomId, targetIds).then(result => {
+            CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
             if (!this._shouldAbortAfterInviteError(result)) { // handles setting error message too
                 this.props.onFinished();
             }
@@ -658,12 +685,130 @@ export default class InviteDialog extends React.PureComponent {
     };
 
     _onKeyDown = (e) => {
-        // when the field is empty and the user hits backspace remove the right-most target
-        if (!e.target.value && !this.state.busy && this.state.targets.length > 0 && e.key === Key.BACKSPACE &&
-            !e.ctrlKey && !e.shiftKey && !e.metaKey
-        ) {
+        if (this.state.busy) return;
+        const value = e.target.value.trim();
+        const hasModifiers = e.ctrlKey || e.shiftKey || e.metaKey;
+        if (!value && this.state.targets.length > 0 && e.key === Key.BACKSPACE && !hasModifiers) {
+            // when the field is empty and the user hits backspace remove the right-most target
             e.preventDefault();
             this._removeMember(this.state.targets[this.state.targets.length - 1]);
+        } else if (value && e.key === Key.ENTER && !hasModifiers) {
+            // when the user hits enter with something in their field try to convert it
+            e.preventDefault();
+            this._convertFilter();
+        } else if (value && e.key === Key.SPACE && !hasModifiers && value.includes("@") && !value.includes(" ")) {
+            // when the user hits space and their input looks like an e-mail/MXID then try to convert it
+            e.preventDefault();
+            this._convertFilter();
+        }
+    };
+
+    _updateSuggestions = async (term) => {
+        MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
+            if (term !== this.state.filterText) {
+                // Discard the results - we were probably too slow on the server-side to make
+                // these results useful. This is a race we want to avoid because we could overwrite
+                // more accurate results.
+                return;
+            }
+
+            if (!r.results) r.results = [];
+
+            // While we're here, try and autocomplete a search result for the mxid itself
+            // if there's no matches (and the input looks like a mxid).
+            if (term[0] === '@' && term.indexOf(':') > 1) {
+                try {
+                    const profile = await MatrixClientPeg.get().getProfileInfo(term);
+                    if (profile) {
+                        // If we have a profile, we have enough information to assume that
+                        // the mxid can be invited - add it to the list. We stick it at the
+                        // top so it is most obviously presented to the user.
+                        r.results.splice(0, 0, {
+                            user_id: term,
+                            display_name: profile['displayname'],
+                            avatar_url: profile['avatar_url'],
+                        });
+                    }
+                } catch (e) {
+                    console.warn("Non-fatal error trying to make an invite for a user ID");
+                    console.warn(e);
+
+                    // Add a result anyways, just without a profile. We stick it at the
+                    // top so it is most obviously presented to the user.
+                    r.results.splice(0, 0, {
+                        user_id: term,
+                        display_name: term,
+                        avatar_url: null,
+                    });
+                }
+            }
+
+            this.setState({
+                serverResultsMixin: r.results.map(u => ({
+                    userId: u.user_id,
+                    user: new DirectoryMember(u),
+                })),
+            });
+        }).catch(e => {
+            console.error("Error searching user directory:");
+            console.error(e);
+            this.setState({serverResultsMixin: []}); // clear results because it's moderately fatal
+        });
+
+        // Whenever we search the directory, also try to search the identity server. It's
+        // all debounced the same anyways.
+        if (!this.state.canUseIdentityServer) {
+            // The user doesn't have an identity server set - warn them of that.
+            this.setState({tryingIdentityServer: true});
+            return;
+        }
+        if (term.indexOf('@') > 0 && Email.looksValid(term) && SettingsStore.getValue(UIFeature.IdentityServer)) {
+            // Start off by suggesting the plain email while we try and resolve it
+            // to a real account.
+            this.setState({
+                // per above: the userId is a lie here - it's just a regular identifier
+                threepidResultsMixin: [{user: new ThreepidMember(term), userId: term}],
+            });
+            try {
+                const authClient = new IdentityAuthClient();
+                const token = await authClient.getAccessToken();
+                if (term !== this.state.filterText) return; // abandon hope
+
+                const lookup = await MatrixClientPeg.get().lookupThreePid(
+                    'email',
+                    term,
+                    undefined, // callback
+                    token,
+                );
+                if (term !== this.state.filterText) return; // abandon hope
+
+                if (!lookup || !lookup.mxid) {
+                    // We weren't able to find anyone - we're already suggesting the plain email
+                    // as an alternative, so do nothing.
+                    return;
+                }
+
+                // We append the user suggestion to give the user an option to click
+                // the email anyways, and so we don't cause things to jump around. In
+                // theory, the user would see the user pop up and think "ah yes, that
+                // person!"
+                const profile = await MatrixClientPeg.get().getProfileInfo(lookup.mxid);
+                if (term !== this.state.filterText || !profile) return; // abandon hope
+                this.setState({
+                    threepidResultsMixin: [...this.state.threepidResultsMixin, {
+                        user: new DirectoryMember({
+                            user_id: lookup.mxid,
+                            display_name: profile.displayname,
+                            avatar_url: profile.avatar_url,
+                        }),
+                        userId: lookup.mxid,
+                    }],
+                });
+            } catch (e) {
+                console.error("Error searching identity server:");
+                console.error(e);
+                this.setState({threepidResultsMixin: []}); // clear results because it's moderately fatal
+            }
         }
     };
 
@@ -677,113 +822,8 @@ export default class InviteDialog extends React.PureComponent {
         if (this._debounceTimer) {
             clearTimeout(this._debounceTimer);
         }
-        this._debounceTimer = setTimeout(async () => {
-            MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
-                if (term !== this.state.filterText) {
-                    // Discard the results - we were probably too slow on the server-side to make
-                    // these results useful. This is a race we want to avoid because we could overwrite
-                    // more accurate results.
-                    return;
-                }
-
-                if (!r.results) r.results = [];
-
-                // While we're here, try and autocomplete a search result for the mxid itself
-                // if there's no matches (and the input looks like a mxid).
-                if (term[0] === '@' && term.indexOf(':') > 1) {
-                    try {
-                        const profile = await MatrixClientPeg.get().getProfileInfo(term);
-                        if (profile) {
-                            // If we have a profile, we have enough information to assume that
-                            // the mxid can be invited - add it to the list. We stick it at the
-                            // top so it is most obviously presented to the user.
-                            r.results.splice(0, 0, {
-                                user_id: term,
-                                display_name: profile['displayname'],
-                                avatar_url: profile['avatar_url'],
-                            });
-                        }
-                    } catch (e) {
-                        console.warn("Non-fatal error trying to make an invite for a user ID");
-                        console.warn(e);
-
-                        // Add a result anyways, just without a profile. We stick it at the
-                        // top so it is most obviously presented to the user.
-                        r.results.splice(0, 0, {
-                            user_id: term,
-                            display_name: term,
-                            avatar_url: null,
-                        });
-                    }
-                }
-
-                this.setState({
-                    serverResultsMixin: r.results.map(u => ({
-                        userId: u.user_id,
-                        user: new DirectoryMember(u),
-                    })),
-                });
-            }).catch(e => {
-                console.error("Error searching user directory:");
-                console.error(e);
-                this.setState({serverResultsMixin: []}); // clear results because it's moderately fatal
-            });
-
-            // Whenever we search the directory, also try to search the identity server. It's
-            // all debounced the same anyways.
-            if (!this.state.canUseIdentityServer) {
-                // The user doesn't have an identity server set - warn them of that.
-                this.setState({tryingIdentityServer: true});
-                return;
-            }
-            if (term.indexOf('@') > 0 && Email.looksValid(term) && SettingsStore.getValue(UIFeature.IdentityServer)) {
-                // Start off by suggesting the plain email while we try and resolve it
-                // to a real account.
-                this.setState({
-                    // per above: the userId is a lie here - it's just a regular identifier
-                    threepidResultsMixin: [{user: new ThreepidMember(term), userId: term}],
-                });
-                try {
-                    const authClient = new IdentityAuthClient();
-                    const token = await authClient.getAccessToken();
-                    if (term !== this.state.filterText) return; // abandon hope
-
-                    const lookup = await MatrixClientPeg.get().lookupThreePid(
-                        'email',
-                        term,
-                        undefined, // callback
-                        token,
-                    );
-                    if (term !== this.state.filterText) return; // abandon hope
-
-                    if (!lookup || !lookup.mxid) {
-                        // We weren't able to find anyone - we're already suggesting the plain email
-                        // as an alternative, so do nothing.
-                        return;
-                    }
-
-                    // We append the user suggestion to give the user an option to click
-                    // the email anyways, and so we don't cause things to jump around. In
-                    // theory, the user would see the user pop up and think "ah yes, that
-                    // person!"
-                    const profile = await MatrixClientPeg.get().getProfileInfo(lookup.mxid);
-                    if (term !== this.state.filterText || !profile) return; // abandon hope
-                    this.setState({
-                        threepidResultsMixin: [...this.state.threepidResultsMixin, {
-                            user: new DirectoryMember({
-                                user_id: lookup.mxid,
-                                display_name: profile.displayname,
-                                avatar_url: profile.avatar_url,
-                            }),
-                            userId: lookup.mxid,
-                        }],
-                    });
-                } catch (e) {
-                    console.error("Error searching identity server:");
-                    console.error(e);
-                    this.setState({threepidResultsMixin: []}); // clear results because it's moderately fatal
-                }
-            }
+        this._debounceTimer = setTimeout(() => {
+            this._updateSuggestions(term);
         }, 150); // 150ms debounce (human reaction time + some)
     };
 
@@ -806,6 +846,10 @@ export default class InviteDialog extends React.PureComponent {
             filterText = ""; // clear the filter when the user accepts a suggestion
         }
         this.setState({targets, filterText});
+
+        if (this._editorRef && this._editorRef.current) {
+            this._editorRef.current.focus();
+        }
     };
 
     _removeMember = (member: Member) => {
@@ -815,6 +859,10 @@ export default class InviteDialog extends React.PureComponent {
             targets.splice(idx, 1);
             this.setState({targets});
         }
+
+        if (this._editorRef && this._editorRef.current) {
+            this._editorRef.current.focus();
+        }
     };
 
     _onPaste = async (e) => {
@@ -824,7 +872,7 @@ export default class InviteDialog extends React.PureComponent {
             return;
         }
 
-        // Prevent the text being pasted into the textarea
+        // Prevent the text being pasted into the input
         e.preventDefault();
 
         // Process it as a list of addresses to add instead
@@ -1019,8 +1067,8 @@ export default class InviteDialog extends React.PureComponent {
             <DMUserTile member={t} onRemove={!this.state.busy && this._removeMember} key={t.userId} />
         ));
         const input = (
-            <textarea
-                rows={1}
+            <input
+                type="text"
                 onKeyDown={this._onKeyDown}
                 onChange={this._updateFilter}
                 value={this.state.filterText}
@@ -1028,6 +1076,7 @@ export default class InviteDialog extends React.PureComponent {
                 onPaste={this._onPaste}
                 autoFocus={true}
                 disabled={this.state.busy}
+                autoComplete="off"
             />
         );
         return (
@@ -1098,7 +1147,7 @@ export default class InviteDialog extends React.PureComponent {
 
             if (identityServersEnabled) {
                 helpText = _t(
-                    "Start a conversation with someone using their name, username (like <userId/>) or email address.",
+                    "Start a conversation with someone using their name, email address or username (like <userId/>).",
                     {},
                     {userId: () => {
                         return (
@@ -1153,7 +1202,7 @@ export default class InviteDialog extends React.PureComponent {
 
             if (identityServersEnabled) {
                 helpText = _t(
-                    "Invite someone using their name, username (like <userId/>), email address or " +
+                    "Invite someone using their name, email address, username (like <userId/>) or " +
                         "<a>share this room</a>.",
                     {},
                     {

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -0,0 +1,199 @@
+/*
+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 BaseDialog from './BaseDialog';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from "../elements/AccessibleButton";
+import {
+    ClientWidgetApi,
+    IModalWidgetCloseRequest,
+    IModalWidgetOpenRequestData,
+    IModalWidgetReturnData,
+    ISetModalButtonEnabledActionRequest,
+    IWidgetApiAcknowledgeResponseData,
+    IWidgetApiErrorResponseData,
+    BuiltInModalButtonID,
+    ModalButtonID,
+    ModalButtonKind,
+    Widget,
+    WidgetApiFromWidgetAction,
+} from "matrix-widget-api";
+import {StopGapWidgetDriver} from "../../../stores/widgets/StopGapWidgetDriver";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import RoomViewStore from "../../../stores/RoomViewStore";
+import {OwnProfileStore} from "../../../stores/OwnProfileStore";
+import { arrayFastClone } from "../../../utils/arrays";
+
+interface IProps {
+    widgetDefinition: IModalWidgetOpenRequestData;
+    sourceWidgetId: string;
+    onFinished(success: boolean, data?: IModalWidgetReturnData): void;
+}
+
+interface IState {
+    messaging?: ClientWidgetApi;
+    disabledButtonIds: ModalButtonID[];
+}
+
+const MAX_BUTTONS = 3;
+
+export default class ModalWidgetDialog extends React.PureComponent<IProps, IState> {
+    private readonly widget: Widget;
+    private readonly possibleButtons: ModalButtonID[];
+    private appFrame: React.RefObject<HTMLIFrameElement> = React.createRef();
+
+    state: IState = {
+        disabledButtonIds: [],
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.widget = new Widget({
+            ...this.props.widgetDefinition,
+            creatorUserId: MatrixClientPeg.get().getUserId(),
+            id: `modal_${this.props.sourceWidgetId}`,
+        });
+        this.possibleButtons = (this.props.widgetDefinition.buttons || []).map(b => b.id);
+    }
+
+    public componentDidMount() {
+        const driver = new StopGapWidgetDriver( []);
+        const messaging = new ClientWidgetApi(this.widget, this.appFrame.current, driver);
+        this.setState({messaging});
+    }
+
+    public componentWillUnmount() {
+        this.state.messaging.off("ready", this.onReady);
+        this.state.messaging.off(`action:${WidgetApiFromWidgetAction.CloseModalWidget}`, this.onWidgetClose);
+        this.state.messaging.stop();
+    }
+
+    private onReady = () => {
+        this.state.messaging.sendWidgetConfig(this.props.widgetDefinition);
+    };
+
+    private onLoad = () => {
+        this.state.messaging.once("ready", this.onReady);
+        this.state.messaging.on(`action:${WidgetApiFromWidgetAction.CloseModalWidget}`, this.onWidgetClose);
+        this.state.messaging.on(`action:${WidgetApiFromWidgetAction.SetModalButtonEnabled}`, this.onButtonEnableToggle);
+    };
+
+    private onWidgetClose = (ev: CustomEvent<IModalWidgetCloseRequest>) => {
+        this.props.onFinished(true, ev.detail.data);
+    }
+
+    private onButtonEnableToggle = (ev: CustomEvent<ISetModalButtonEnabledActionRequest>) => {
+        ev.preventDefault();
+        const isClose = ev.detail.data.button === BuiltInModalButtonID.Close;
+        if (isClose || !this.possibleButtons.includes(ev.detail.data.button)) {
+            return this.state.messaging.transport.reply(ev.detail, {
+                error: {message: "Invalid button"},
+            } as IWidgetApiErrorResponseData);
+        }
+
+        let buttonIds: ModalButtonID[];
+        if (ev.detail.data.enabled) {
+            buttonIds = arrayFastClone(this.state.disabledButtonIds).filter(i => i !== ev.detail.data.button);
+        } else {
+            // use a set to swap the operation to avoid memory leaky arrays.
+            const tempSet = new Set(this.state.disabledButtonIds);
+            tempSet.add(ev.detail.data.button);
+            buttonIds = Array.from(tempSet);
+        }
+        this.setState({disabledButtonIds: buttonIds});
+        this.state.messaging.transport.reply(ev.detail, {} as IWidgetApiAcknowledgeResponseData);
+    };
+
+    public render() {
+        const templated = this.widget.getCompleteUrl({
+            currentRoomId: RoomViewStore.getRoomId(),
+            currentUserId: MatrixClientPeg.get().getUserId(),
+            userDisplayName: OwnProfileStore.instance.displayName,
+            userHttpAvatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(),
+        });
+
+        const parsed = new URL(templated);
+
+        // Add in some legacy support sprinkles (for non-popout widgets)
+        // TODO: Replace these with proper widget params
+        // See https://github.com/matrix-org/matrix-doc/pull/1958/files#r405714833
+        parsed.searchParams.set('widgetId', this.widget.id);
+        parsed.searchParams.set('parentUrl', window.location.href.split('#', 2)[0]);
+
+        // Replace the encoded dollar signs back to dollar signs. They have no special meaning
+        // in HTTP, but URL parsers encode them anyways.
+        const widgetUrl = parsed.toString().replace(/%24/g, '$');
+
+        let buttons;
+        if (this.props.widgetDefinition.buttons) {
+            // show first button rightmost for a more natural specification
+            buttons = this.props.widgetDefinition.buttons.slice(0, MAX_BUTTONS).reverse().map(def => {
+                let kind = "secondary";
+                switch (def.kind) {
+                    case ModalButtonKind.Primary:
+                        kind = "primary";
+                        break;
+                    case ModalButtonKind.Secondary:
+                        kind = "primary_outline";
+                        break
+                    case ModalButtonKind.Danger:
+                        kind = "danger";
+                        break;
+                }
+
+                const onClick = () => {
+                    this.state.messaging.notifyModalWidgetButtonClicked(def.id);
+                };
+
+                return <AccessibleButton key={def.id} kind={kind} onClick={onClick}>
+                    { def.label }
+                </AccessibleButton>;
+            });
+        }
+
+        return <BaseDialog
+            title={this.props.widgetDefinition.name || _t("Modal Widget")}
+            className="mx_ModalWidgetDialog"
+            contentId="mx_Dialog_content"
+            onFinished={this.props.onFinished}
+        >
+            <div className="mx_ModalWidgetDialog_warning">
+                <img
+                    src={require("../../../../res/img/element-icons/warning-badge.svg")}
+                    height="16"
+                    width="16"
+                    alt=""
+                />
+                {_t("Data on this screen is shared with %(widgetDomain)s", {
+                    widgetDomain: parsed.hostname,
+                })}
+            </div>
+            <div>
+                <iframe
+                    ref={this.appFrame}
+                    sandbox="allow-forms allow-scripts allow-same-origin"
+                    src={widgetUrl}
+                    onLoad={this.onLoad}
+                />
+            </div>
+            <div className="mx_ModalWidgetDialog_buttons">
+                { buttons }
+            </div>
+        </BaseDialog>;
+    }
+}

src/components/views/dialogs/QuestionDialog.js

@@ -17,6 +17,8 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from "classnames";
+
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
@@ -26,12 +28,14 @@ export default class QuestionDialog extends React.Component {
         description: PropTypes.node,
         extraButtons: PropTypes.node,
         button: PropTypes.string,
+        buttonDisabled: PropTypes.bool,
         danger: PropTypes.bool,
         focus: PropTypes.bool,
         onFinished: PropTypes.func.isRequired,
         headerImage: PropTypes.string,
         quitOnly: PropTypes.bool, // quitOnly doesn't show the cancel button just the quit [x].
         fixedWidth: PropTypes.bool,
+        className: PropTypes.string,
     };
 
     static defaultProps = {
@@ -61,7 +65,7 @@ export default class QuestionDialog extends React.Component {
         }
         return (
             <BaseDialog
-                className="mx_QuestionDialog"
+                className={classNames("mx_QuestionDialog", this.props.className)}
                 onFinished={this.props.onFinished}
                 title={this.props.title}
                 contentId='mx_Dialog_content'
@@ -74,6 +78,7 @@ export default class QuestionDialog extends React.Component {
                 </div>
                 <DialogButtons primaryButton={this.props.button || _t('OK')}
                     primaryButtonClass={primaryButtonClass}
+                    primaryDisabled={this.props.buttonDisabled}
                     cancelButton={this.props.cancelButton}
                     hasCancel={this.props.hasCancelButton && !this.props.quitOnly}
                     onPrimaryButtonClick={this.onOk}

src/components/views/dialogs/RedesignFeedbackDialog.js

@@ -1,49 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import QuestionDialog from './QuestionDialog';
-import { _t } from '../../../languageHandler';
-
-export default (props) => {
-    const existingIssuesUrl = "https://github.com/vector-im/element-web/issues" +
-        "?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc";
-    const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
-
-    const description1 =
-        _t("If you run into any bugs or have feedback you'd like to share, " +
-           "please let us know on GitHub.");
-    const description2 = _t("To help avoid duplicate issues, " +
-        "please <existingIssuesLink>view existing issues</existingIssuesLink> " +
-        "first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> " +
-        "if you can't find it.", {},
-        {
-            existingIssuesLink: (sub) => {
-                return <a target="_blank" rel="noreferrer noopener" href={existingIssuesUrl}>{ sub }</a>;
-            },
-            newIssueLink: (sub) => {
-                return <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>{ sub }</a>;
-            },
-        });
-
-    return (<QuestionDialog
-        hasCancelButton={false}
-        title={_t("Report bugs & give feedback")}
-        description={<div><p>{description1}</p><p>{description2}</p></div>}
-        button={_t("Go back")}
-        onFinished={props.onFinished}
-    />);
-};

src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js

@@ -84,7 +84,7 @@ export default class WidgetOpenIDPermissionsDialog extends React.Component {
                             "A widget located at %(widgetUrl)s would like to verify your identity. " +
                             "By allowing this, the widget will be able to verify your user ID, but not " +
                             "perform actions as you.", {
-                                widgetUrl: this.props.widgetUrl,
+                                widgetUrl: this.props.widgetUrl.split("?")[0],
                             },
                         )}
                     </p>

src/components/views/elements/AccessibleButton.tsx

@@ -39,7 +39,7 @@ interface IProps extends React.InputHTMLAttributes<Element> {
     tabIndex?: number;
     disabled?: boolean;
     className?: string;
-    onClick?(e?: ButtonEvent): void;
+    onClick(e?: ButtonEvent): void;
 }
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -26,6 +26,7 @@ interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
     tooltip?: React.ReactNode;
     tooltipClassName?: string;
     forceHide?: boolean;
+    yOffset?: number;
 }
 
 interface IState {
@@ -63,12 +64,13 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
 
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const {title, tooltip, children, tooltipClassName, forceHide, ...props} = this.props;
+        const {title, tooltip, children, tooltipClassName, forceHide, yOffset, ...props} = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
             tooltipClassName={classNames("mx_AccessibleTooltipButton_tooltip", tooltipClassName)}
             label={tooltip || title}
+            yOffset={yOffset}
         /> : <div />;
         return (
             <AccessibleButton

src/components/views/elements/AddressSelector.js

@@ -46,7 +46,7 @@ export default class AddressSelector extends React.Component {
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps(props) {
+    UNSAFE_componentWillReceiveProps(props) { // eslint-disable-line camelcase
         // Make sure the selected item isn't outside the list bounds
         const selected = this.state.selected;
         const maxSelected = this._maxSelected(props.addressList);

src/components/views/elements/AppTile.js

@@ -22,56 +22,54 @@ import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import AccessibleButton from './AccessibleButton';
-import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
 import Spinner from './Spinner';
-import WidgetUtils from '../../../utils/WidgetUtils';
 import dis from '../../../dispatcher/dispatcher';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import classNames from 'classnames';
 import SettingsStore from "../../../settings/SettingsStore";
-import {aboveLeftOf, ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
-import PersistedElement from "./PersistedElement";
+import {aboveLeftOf, ContextMenuButton} from "../../structures/ContextMenu";
+import PersistedElement, {getPersistKey} from "./PersistedElement";
 import {WidgetType} from "../../../widgets/WidgetType";
 import {SettingLevel} from "../../../settings/SettingLevel";
-import WidgetStore from "../../../stores/WidgetStore";
-import {Action} from "../../../dispatcher/actions";
 import {StopGapWidget} from "../../../stores/widgets/StopGapWidget";
 import {ElementWidgetActions} from "../../../stores/widgets/ElementWidgetActions";
 import {MatrixCapabilities} from "matrix-widget-api";
+import RoomWidgetContextMenu from "../context_menus/WidgetContextMenu";
+import WidgetAvatar from "../avatars/WidgetAvatar";
 
 export default class AppTile extends React.Component {
     constructor(props) {
         super(props);
 
         // The key used for PersistedElement
-        this._persistKey = 'widget_' + this.props.app.id;
+        this._persistKey = getPersistKey(this.props.app.id);
         this._sgWidget = new StopGapWidget(this.props);
         this._sgWidget.on("preparing", this._onWidgetPrepared);
         this._sgWidget.on("ready", this._onWidgetReady);
         this.iframe = null; // ref to the iframe (callback style)
 
         this.state = this._getNewState(props);
-
-        this._onAction = this._onAction.bind(this);
-        this._onEditClick = this._onEditClick.bind(this);
-        this._onDeleteClick = this._onDeleteClick.bind(this);
-        this._onRevokeClicked = this._onRevokeClicked.bind(this);
-        this._onSnapshotClick = this._onSnapshotClick.bind(this);
-        this.onClickMenuBar = this.onClickMenuBar.bind(this);
-        this._onMinimiseClick = this._onMinimiseClick.bind(this);
-        this._grantWidgetPermission = this._grantWidgetPermission.bind(this);
-        this._revokeWidgetPermission = this._revokeWidgetPermission.bind(this);
-        this._onPopoutWidgetClick = this._onPopoutWidgetClick.bind(this);
-        this._onReloadWidgetClick = this._onReloadWidgetClick.bind(this);
-
         this._contextMenuButton = createRef();
-        this._menu_bar = createRef();
+
+        this._allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange);
     }
 
+    // This is a function to make the impact of calling SettingsStore slightly less
+    hasPermissionToLoad = (props) => {
+        if (this._usingLocalWidget()) return true;
+        if (!props.room) return true; // user widgets always have permissions
+
+        const currentlyAllowedWidgets = SettingsStore.getValue("allowedWidgets", props.room.roomId);
+        if (currentlyAllowedWidgets[props.app.eventId] === undefined) {
+            return props.userId === props.creatorUserId;
+        }
+        return !!currentlyAllowedWidgets[props.app.eventId];
+    };
+
     /**
      * Set initial component state when the App wUrl (widget URL) is being updated.
      * Component props *must* be passed (rather than relying on this.props).
@@ -79,28 +77,32 @@ export default class AppTile extends React.Component {
      * @return {Object} Updated component state to be set with setState
      */
     _getNewState(newProps) {
-        // This is a function to make the impact of calling SettingsStore slightly less
-        const hasPermissionToLoad = () => {
-            if (this._usingLocalWidget()) return true;
-
-            const currentlyAllowedWidgets = SettingsStore.getValue("allowedWidgets", newProps.room.roomId);
-            return !!currentlyAllowedWidgets[newProps.app.eventId];
-        };
-
         return {
             initialising: true, // True while we are mangling the widget URL
             // True while the iframe content is loading
             loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey),
             // Assume that widget has permission to load if we are the user who
             // added it to the room, or if explicitly granted by the user
-            hasPermissionToLoad: newProps.userId === newProps.creatorUserId || hasPermissionToLoad(),
+            hasPermissionToLoad: this.hasPermissionToLoad(newProps),
             error: null,
-            deleting: false,
             widgetPageTitle: newProps.widgetPageTitle,
             menuDisplayed: false,
         };
     }
 
+    onAllowedWidgetsChange = () => {
+        const hasPermissionToLoad = this.hasPermissionToLoad(this.props);
+
+        if (this.state.hasPermissionToLoad && !hasPermissionToLoad) {
+            // Force the widget to be non-persistent (able to be deleted/forgotten)
+            ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
+            PersistedElement.destroyElement(this._persistKey);
+            this._sgWidget.stop();
+        }
+
+        this.setState({ hasPermissionToLoad });
+    };
+
     isMixedContent() {
         const parentContentProtocol = window.location.protocol;
         const u = url.parse(this.props.app.url);
@@ -115,7 +117,7 @@ export default class AppTile extends React.Component {
 
     componentDidMount() {
         // Only fetch IM token on mount if we're showing and have permission to load
-        if (this.props.show && this.state.hasPermissionToLoad) {
+        if (this.state.hasPermissionToLoad) {
             this._startWidget();
         }
 
@@ -136,6 +138,8 @@ export default class AppTile extends React.Component {
         if (this._sgWidget) {
             this._sgWidget.stop();
         }
+
+        SettingsStore.unwatchSetting(this._allowedWidgetsWatchRef);
     }
 
     _resetWidget(newProps) {
@@ -167,21 +171,8 @@ export default class AppTile extends React.Component {
     UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
         if (nextProps.app.url !== this.props.app.url) {
             this._getNewState(nextProps);
-            if (this.props.show && this.state.hasPermissionToLoad) {
-                this._resetWidget(nextProps);
-            }
-        }
-
-        if (nextProps.show && !this.props.show) {
-            // We assume that persisted widgets are loaded and don't need a spinner.
-            if (this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey)) {
-                this.setState({
-                    loading: true,
-                });
-            }
-            // Start the widget now that we're showing if we already have permission to load
             if (this.state.hasPermissionToLoad) {
-                this._startWidget();
+                this._resetWidget(nextProps);
             }
         }
 
@@ -192,35 +183,6 @@ export default class AppTile extends React.Component {
         }
     }
 
-    _canUserModify() {
-        // User widgets should always be modifiable by their creator
-        if (this.props.userWidget && MatrixClientPeg.get().credentials.userId === this.props.creatorUserId) {
-            return true;
-        }
-        // Check if the current user can modify widgets in the current room
-        return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
-    }
-
-    _onEditClick() {
-        console.log("Edit widget ID ", this.props.app.id);
-        if (this.props.onEditClick) {
-            this.props.onEditClick();
-        } else {
-            WidgetUtils.editWidget(this.props.room, this.props.app);
-        }
-    }
-
-    _onSnapshotClick() {
-        this._sgWidget.widgetApi.takeScreenshot().then(data => {
-            dis.dispatch({
-                action: 'picture_snapshot',
-                file: data.screenshot,
-            });
-        }).catch(err => {
-            console.error("Failed to take screenshot: ", err);
-        });
-    }
-
     /**
      * Ends all widget interaction, such as cancelling calls and disabling webcams.
      * @private
@@ -240,61 +202,14 @@ export default class AppTile extends React.Component {
             this.iframe.src = 'about:blank';
         }
 
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
+            dis.dispatch({action: 'hangup_conference'});
+        }
+
         // Delete the widget from the persisted store for good measure.
         PersistedElement.destroyElement(this._persistKey);
 
-        this._sgWidget.stop();
-    }
-
-    /* If user has permission to modify widgets, delete the widget,
-     * otherwise revoke access for the widget to load in the user's browser
-    */
-    _onDeleteClick() {
-        if (this.props.onDeleteClick) {
-            this.props.onDeleteClick();
-        } else if (this._canUserModify()) {
-            // Show delete confirmation dialog
-            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-            Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
-                title: _t("Delete Widget"),
-                description: _t(
-                    "Deleting a widget removes it for all users in this room." +
-                    " Are you sure you want to delete this widget?"),
-                button: _t("Delete widget"),
-                onFinished: (confirmed) => {
-                    if (!confirmed) {
-                        return;
-                    }
-                    this.setState({deleting: true});
-
-                    this._endWidgetActions().then(() => {
-                        return WidgetUtils.setRoomWidget(
-                            this.props.room.roomId,
-                            this.props.app.id,
-                        );
-                    }).catch((e) => {
-                        console.error('Failed to delete widget', e);
-                        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-
-                        Modal.createTrackedDialog('Failed to remove widget', '', ErrorDialog, {
-                            title: _t('Failed to remove widget'),
-                            description: _t('An error ocurred whilst trying to remove the widget from the room'),
-                        });
-                    }).finally(() => {
-                        this.setState({deleting: false});
-                    });
-                },
-            });
-        }
-    }
-
-    _onUnpinClicked = () => {
-        WidgetStore.instance.unpinWidget(this.props.app.id);
-    }
-
-    _onRevokeClicked() {
-        console.info("Revoke widget permissions - %s", this.props.app.id);
-        this._revokeWidgetPermission();
+        this._sgWidget.stop({forceDestroy: true});
     }
 
     _onWidgetPrepared = () => {
@@ -307,7 +222,7 @@ export default class AppTile extends React.Component {
         }
     };
 
-    _onAction(payload) {
+    _onAction = payload => {
         if (payload.widgetId === this.props.app.id) {
             switch (payload.action) {
                 case 'm.sticker':
@@ -317,19 +232,11 @@ export default class AppTile extends React.Component {
                         console.warn('Ignoring sticker message. Invalid capability');
                     }
                     break;
-
-                case Action.AppTileDelete:
-                    this._onDeleteClick();
-                    break;
-
-                case Action.AppTileRevoke:
-                    this._onRevokeClicked();
-                    break;
             }
         }
-    }
+    };
 
-    _grantWidgetPermission() {
+    _grantWidgetPermission = () => {
         const roomId = this.props.room.roomId;
         console.info("Granting permission for widget to load: " + this.props.app.eventId);
         const current = SettingsStore.getValue("allowedWidgets", roomId);
@@ -343,26 +250,7 @@ export default class AppTile extends React.Component {
             console.error(err);
             // We don't really need to do anything about this - the user will just hit the button again.
         });
-    }
-
-    _revokeWidgetPermission() {
-        const roomId = this.props.room.roomId;
-        console.info("Revoking permission for widget to load: " + this.props.app.eventId);
-        const current = SettingsStore.getValue("allowedWidgets", roomId);
-        current[this.props.app.eventId] = false;
-        SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => {
-            this.setState({hasPermissionToLoad: false});
-
-            // Force the widget to be non-persistent (able to be deleted/forgotten)
-            ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
-            const PersistedElement = sdk.getComponent("elements.PersistedElement");
-            PersistedElement.destroyElement(this._persistKey);
-            this._sgWidget.stop();
-        }).catch(err => {
-            console.error(err);
-            // We don't really need to do anything about this - the user will just hit the button again.
-        });
-    }
+    };
 
     formatAppTileName() {
         let appTileName = "No name";
@@ -372,29 +260,6 @@ export default class AppTile extends React.Component {
         return appTileName;
     }
 
-    onClickMenuBar(ev) {
-        ev.preventDefault();
-
-        // Ignore clicks on menu bar children
-        if (ev.target !== this._menu_bar.current) {
-            return;
-        }
-
-        // Toggle the view state of the apps drawer
-        if (this.props.userWidget) {
-            this._onMinimiseClick();
-        } else {
-            if (this.props.show) {
-                // if we were being shown, end the widget as we're about to be minimized.
-                this._endWidgetActions();
-            }
-            dis.dispatch({
-                action: 'appsDrawer',
-                show: !this.props.show,
-            });
-        }
-    }
-
     /**
      * Whether we're using a local version of the widget rather than loading the
      * actual widget URL
@@ -414,22 +279,18 @@ export default class AppTile extends React.Component {
 
         return (
             <span>
+                <WidgetAvatar app={this.props.app} />
                 <b>{ name }</b>
                 <span>{ title ? titleSpacer : '' }{ title }</span>
             </span>
         );
     }
 
-    _onMinimiseClick(e) {
-        if (this.props.onMinimiseClick) {
-            this.props.onMinimiseClick();
-        }
-    }
-
-    _onPopoutWidgetClick() {
+    // TODO replace with full screen interactions
+    _onPopoutWidgetClick = () => {
         // Ensure Jitsi conferences are closed on pop-out, to not confuse the user to join them
         // twice from the same computer, which Jitsi can have problems with (audio echo/gain-loop).
-        if (WidgetType.JITSI.matches(this.props.app.type) && this.props.show) {
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
             this._endWidgetActions().then(() => {
                 if (this.iframe) {
                     // Reload iframe
@@ -442,13 +303,7 @@ export default class AppTile extends React.Component {
         // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),
             { target: '_blank', href: this._sgWidget.popoutUrl, rel: 'noreferrer noopener'}).click();
-    }
-
-    _onReloadWidgetClick() {
-        // Reload iframe in this way to avoid cross-origin restrictions
-        // eslint-disable-next-line no-self-assign
-        this.iframe.src = this.iframe.src;
-    }
+    };
 
     _onContextMenuClick = () => {
         this.setState({ menuDisplayed: true });
@@ -461,11 +316,6 @@ export default class AppTile extends React.Component {
     render() {
         let appTileBody;
 
-        // Don't render widget if it is in the process of being deleted
-        if (this.state.deleting) {
-            return <div />;
-        }
-
         // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
         // because that would allow the iframe to programmatically remove the sandbox attribute, but
         // this would only be for content hosted on the same origin as the element client: anything
@@ -480,71 +330,67 @@ export default class AppTile extends React.Component {
 
         const appTileBodyClass = 'mx_AppTileBody' + (this.props.miniMode ? '_mini  ' : ' ');
 
-        if (this.props.show) {
-            const loadingElement = (
-                <div className="mx_AppLoading_spinner_fadeIn">
-                    <Spinner message={_t("Loading...")} />
+        const loadingElement = (
+            <div className="mx_AppLoading_spinner_fadeIn">
+                <Spinner message={_t("Loading...")} />
+            </div>
+        );
+        if (!this.state.hasPermissionToLoad) {
+            // only possible for room widgets, can assert this.props.room here
+            const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
+            appTileBody = (
+                <div className={appTileBodyClass}>
+                    <AppPermission
+                        roomId={this.props.room.roomId}
+                        creatorUserId={this.props.creatorUserId}
+                        url={this._sgWidget.embedUrl}
+                        isRoomEncrypted={isEncrypted}
+                        onPermissionGranted={this._grantWidgetPermission}
+                    />
                 </div>
             );
-            if (!this.state.hasPermissionToLoad) {
-                const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
+        } else if (this.state.initialising) {
+            appTileBody = (
+                <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
+                    { loadingElement }
+                </div>
+            );
+        } else {
+            if (this.isMixedContent()) {
                 appTileBody = (
                     <div className={appTileBodyClass}>
-                        <AppPermission
-                            roomId={this.props.room.roomId}
-                            creatorUserId={this.props.creatorUserId}
-                            url={this._sgWidget.embedUrl}
-                            isRoomEncrypted={isEncrypted}
-                            onPermissionGranted={this._grantWidgetPermission}
-                        />
-                    </div>
-                );
-            } else if (this.state.initialising) {
-                appTileBody = (
-                    <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
-                        { loadingElement }
+                        <AppWarning errorMsg="Error - Mixed content" />
                     </div>
                 );
             } else {
-                if (this.isMixedContent()) {
-                    appTileBody = (
-                        <div className={appTileBodyClass}>
-                            <AppWarning errorMsg="Error - Mixed content" />
-                        </div>
-                    );
-                } else {
-                    appTileBody = (
-                        <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
-                            { this.state.loading && loadingElement }
-                            <iframe
-                                allow={iframeFeatures}
-                                ref={this._iframeRefChange}
-                                src={this._sgWidget.embedUrl}
-                                allowFullScreen={true}
-                                sandbox={sandboxFlags}
-                            />
-                        </div>
-                    );
-                    // if the widget would be allowed to remain on screen, we must put it in
-                    // a PersistedElement from the get-go, otherwise the iframe will be
-                    // re-mounted later when we do.
-                    if (this.props.whitelistCapabilities.includes('m.always_on_screen')) {
-                        const PersistedElement = sdk.getComponent("elements.PersistedElement");
-                        // Also wrap the PersistedElement in a div to fix the height, otherwise
-                        // AppTile's border is in the wrong place
-                        appTileBody = <div className="mx_AppTile_persistedWrapper">
-                            <PersistedElement persistKey={this._persistKey}>
-                                {appTileBody}
-                            </PersistedElement>
-                        </div>;
-                    }
+                appTileBody = (
+                    <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
+                        { this.state.loading && loadingElement }
+                        <iframe
+                            allow={iframeFeatures}
+                            ref={this._iframeRefChange}
+                            src={this._sgWidget.embedUrl}
+                            allowFullScreen={true}
+                            sandbox={sandboxFlags}
+                        />
+                    </div>
+                );
+                // if the widget would be allowed to remain on screen, we must put it in
+                // a PersistedElement from the get-go, otherwise the iframe will be
+                // re-mounted later when we do.
+                if (this.props.whitelistCapabilities.includes('m.always_on_screen')) {
+                    const PersistedElement = sdk.getComponent("elements.PersistedElement");
+                    // Also wrap the PersistedElement in a div to fix the height, otherwise
+                    // AppTile's border is in the wrong place
+                    appTileBody = <div className="mx_AppTile_persistedWrapper">
+                        <PersistedElement persistKey={this._persistKey}>
+                            {appTileBody}
+                        </PersistedElement>
+                    </div>;
                 }
             }
         }
 
-        const showMinimiseButton = this.props.showMinimise && this.props.show;
-        const showMaximiseButton = this.props.showMinimise && !this.props.show;
-
         let appTileClasses;
         if (this.props.miniMode) {
             appTileClasses = {mx_AppTile_mini: true};
@@ -553,73 +399,37 @@ export default class AppTile extends React.Component {
         } else {
             appTileClasses = {mx_AppTile: true};
         }
-        appTileClasses.mx_AppTile_minimised = !this.props.show;
         appTileClasses = classNames(appTileClasses);
 
-        const menuBarClasses = classNames({
-            mx_AppTileMenuBar: true,
-            mx_AppTileMenuBar_expanded: this.props.show,
-        });
-
         let contextMenu;
         if (this.state.menuDisplayed) {
-            const elementRect = this._contextMenuButton.current.getBoundingClientRect();
-
-            const canUserModify = this._canUserModify();
-            const showEditButton = Boolean(this._sgWidget.isManagedByManager && canUserModify);
-            const showDeleteButton = (this.props.showDelete === undefined || this.props.showDelete) && canUserModify;
-            const showPictureSnapshotButton = this.props.show && this._sgWidget.widgetApi &&
-                this._sgWidget.widgetApi.hasCapability(MatrixCapabilities.Screenshots);
-
-            const WidgetContextMenu = sdk.getComponent('views.context_menus.WidgetContextMenu');
             contextMenu = (
-                <ContextMenu {...aboveLeftOf(elementRect, null)} onFinished={this._closeContextMenu}>
-                    <WidgetContextMenu
-                        onUnpinClicked={
-                            ActiveWidgetStore.getWidgetPersistence(this.props.app.id) ? null : this._onUnpinClicked
-                        }
-                        onRevokeClicked={this._onRevokeClicked}
-                        onEditClicked={showEditButton ? this._onEditClick : undefined}
-                        onDeleteClicked={showDeleteButton ? this._onDeleteClick : undefined}
-                        onSnapshotClicked={showPictureSnapshotButton ? this._onSnapshotClick : undefined}
-                        onReloadClicked={this.props.showReload ? this._onReloadWidgetClick : undefined}
-                        onFinished={this._closeContextMenu}
-                    />
-                </ContextMenu>
+                <RoomWidgetContextMenu
+                    {...aboveLeftOf(this._contextMenuButton.current.getBoundingClientRect(), null)}
+                    app={this.props.app}
+                    onFinished={this._closeContextMenu}
+                    showUnpin={!this.props.userWidget}
+                    userWidget={this.props.userWidget}
+                />
             );
         }
 
         return <React.Fragment>
             <div className={appTileClasses} id={this.props.app.id}>
                 { this.props.showMenubar &&
-                <div ref={this._menu_bar} className={menuBarClasses} onClick={this.onClickMenuBar}>
+                <div className="mx_AppTileMenuBar">
                     <span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>
-                        { /* Minimise widget */ }
-                        { showMinimiseButton && <AccessibleButton
-                            className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_minimise"
-                            title={_t('Minimize widget')}
-                            onClick={this._onMinimiseClick}
-                        /> }
-                        { /* Maximise widget */ }
-                        { showMaximiseButton && <AccessibleButton
-                            className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_maximise"
-                            title={_t('Maximize widget')}
-                            onClick={this._onMinimiseClick}
-                        /> }
-                        { /* Title */ }
                         { this.props.showTitle && this._getTileTitle() }
                     </span>
                     <span className="mx_AppTileMenuBarWidgets">
-                        { /* Popout widget */ }
                         { this.props.showPopout && <AccessibleButton
                             className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_popout"
                             title={_t('Popout widget')}
                             onClick={this._onPopoutWidgetClick}
                         /> }
-                        { /* Context menu */ }
                         { <ContextMenuButton
                             className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_menu"
-                            label={_t('More options')}
+                            label={_t("Options")}
                             isExpanded={this.state.menuDisplayed}
                             inputRef={this._contextMenuButton}
                             onClick={this._onContextMenuClick}
@@ -638,7 +448,9 @@ AppTile.displayName = 'AppTile';
 
 AppTile.propTypes = {
     app: PropTypes.object.isRequired,
-    room: PropTypes.object.isRequired,
+    // If room is not specified then it is an account level widget
+    // which bypasses permission prompts as it was added explicitly by that user
+    room: PropTypes.object,
     // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
     // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
     fullWidth: PropTypes.bool,
@@ -650,8 +462,6 @@ AppTile.propTypes = {
     creatorUserId: PropTypes.string,
     waitForIframeLoad: PropTypes.bool,
     showMenubar: PropTypes.bool,
-    // Should the AppTile render itself
-    show: PropTypes.bool,
     // Optional onEditClickHandler (overrides default behaviour)
     onEditClick: PropTypes.func,
     // Optional onDeleteClickHandler (overrides default behaviour)
@@ -660,19 +470,10 @@ AppTile.propTypes = {
     onMinimiseClick: PropTypes.func,
     // Optionally hide the tile title
     showTitle: PropTypes.bool,
-    // Optionally hide the tile minimise icon
-    showMinimise: PropTypes.bool,
     // Optionally handle minimise button pointer events (default false)
     handleMinimisePointerEvents: PropTypes.bool,
-    // Optionally hide the delete icon
-    showDelete: PropTypes.bool,
     // Optionally hide the popout widget icon
     showPopout: PropTypes.bool,
-    // Optionally show the reload widget icon
-    // This is not currently intended for use with production widgets. However
-    // it can be useful when developing persistent widgets in order to avoid
-    // having to reload all of Element to get new widget content.
-    showReload: PropTypes.bool,
     // Widget capabilities to allow by default (without user confirmation)
     // NOTE -- Use with caution. This is intended to aid better integration / UX
     // basic widget capabilities, e.g. injecting sticker message events.
@@ -685,10 +486,7 @@ AppTile.defaultProps = {
     waitForIframeLoad: true,
     showMenubar: true,
     showTitle: true,
-    showMinimise: true,
-    showDelete: true,
     showPopout: true,
-    showReload: false,
     handleMinimisePointerEvents: false,
     whitelistCapabilities: [],
     userWidget: false,

src/components/views/elements/DirectorySearchBox.js

@@ -16,13 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 export default class DirectorySearchBox extends React.Component {
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
         this._collectInput = this._collectInput.bind(this);
         this._onClearClick = this._onClearClick.bind(this);
         this._onChange = this._onChange.bind(this);
@@ -32,7 +31,7 @@ export default class DirectorySearchBox extends React.Component {
         this.input = null;
 
         this.state = {
-            value: '',
+            value: this.props.initialText || '',
         };
     }
 
@@ -78,28 +77,33 @@ export default class DirectorySearchBox extends React.Component {
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
-        const searchbox_classes = {
+        const searchboxClasses = {
             mx_DirectorySearchBox: true,
         };
-        searchbox_classes[this.props.className] = true;
+        searchboxClasses[this.props.className] = true;
 
-        let join_button;
+        let joinButton;
         if (this.props.showJoinButton) {
-            join_button = <AccessibleButton className="mx_DirectorySearchBox_joinButton"
+            joinButton = <AccessibleButton className="mx_DirectorySearchBox_joinButton"
                 onClick={this._onJoinButtonClick}
             >{_t("Join")}</AccessibleButton>;
         }
 
         return <div className={`mx_DirectorySearchBox ${this.props.className} mx_textinput`}>
-                <input type="text" name="dirsearch" value={this.state.value}
-                    className="mx_textinput_icon mx_textinput_search"
-                    ref={this._collectInput}
-                    onChange={this._onChange} onKeyUp={this._onKeyUp}
-                    placeholder={this.props.placeholder} autoFocus
-                />
-                { join_button }
-                <AccessibleButton className="mx_DirectorySearchBox_clear" onClick={this._onClearClick}></AccessibleButton>
-            </div>;
+            <input
+                type="text"
+                name="dirsearch"
+                value={this.state.value}
+                className="mx_textinput_icon mx_textinput_search"
+                ref={this._collectInput}
+                onChange={this._onChange}
+                onKeyUp={this._onKeyUp}
+                placeholder={this.props.placeholder}
+                autoFocus
+            />
+            { joinButton }
+            <AccessibleButton className="mx_DirectorySearchBox_clear" onClick={this._onClearClick} />
+        </div>;
     }
 }
 
@@ -110,4 +114,5 @@ DirectorySearchBox.propTypes = {
     onJoinClick: PropTypes.func,
     placeholder: PropTypes.string,
     showJoinButton: PropTypes.bool,
+    initialText: PropTypes.string,
 };

src/components/views/elements/IconButton.js

@@ -1,34 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import AccessibleButton from "./AccessibleButton";
-
-export default function IconButton(props) {
-    const {icon, className, ...restProps} = props;
-
-    let newClassName = (className || "") + " mx_IconButton";
-    newClassName = newClassName + " mx_IconButton_icon_" + icon;
-
-    const allProps = Object.assign({}, restProps, {className: newClassName});
-
-    return React.createElement(AccessibleButton, allProps);
-}
-
-IconButton.propTypes = Object.assign({
-    icon: PropTypes.string,
-}, AccessibleButton.propTypes);

src/components/views/elements/MiniAvatarUploader.tsx

@@ -0,0 +1,90 @@
+/*
+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, useRef, useState} from 'react';
+import classNames from 'classnames';
+
+import AccessibleButton from "./AccessibleButton";
+import Tooltip from './Tooltip';
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {useTimeout} from "../../../hooks/useTimeout";
+
+export const AVATAR_SIZE = 52;
+
+interface IProps {
+    hasAvatar: boolean;
+    noAvatarLabel?: string;
+    hasAvatarLabel?: string;
+    setAvatarUrl(url: string): Promise<void>;
+}
+
+const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, children }) => {
+    const cli = useContext(MatrixClientContext);
+    const [busy, setBusy] = useState(false);
+    const [hover, setHover] = useState(false);
+    const [show, setShow] = useState(false);
+
+    useTimeout(() => {
+        setShow(true);
+    }, 3000); // show after 3 seconds
+    useTimeout(() => {
+        setShow(false);
+    }, 13000); // hide after being shown for 10 seconds
+
+    const uploadRef = useRef<HTMLInputElement>();
+
+    const label = (hasAvatar || busy) ? hasAvatarLabel : noAvatarLabel;
+
+    return <React.Fragment>
+        <input
+            type="file"
+            ref={uploadRef}
+            className="mx_MiniAvatarUploader_input"
+            onChange={async (ev) => {
+                if (!ev.target.files?.length) return;
+                setBusy(true);
+                const file = ev.target.files[0];
+                const uri = await cli.uploadContent(file);
+                await setAvatarUrl(uri);
+                setBusy(false);
+            }}
+            accept="image/*"
+        />
+
+        <AccessibleButton
+            className={classNames("mx_MiniAvatarUploader", {
+                mx_MiniAvatarUploader_busy: busy,
+                mx_MiniAvatarUploader_hasAvatar: hasAvatar,
+            })}
+            disabled={busy}
+            onClick={() => {
+                uploadRef.current.click();
+            }}
+            onMouseOver={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
+        >
+            { children }
+
+            <Tooltip
+                label={label}
+                visible={!!label && (hover || show)}
+                forceOnRight
+            />
+        </AccessibleButton>
+    </React.Fragment>;
+};
+
+export default MiniAvatarUploader;

src/components/views/elements/PersistedElement.js

@@ -21,6 +21,8 @@ import {throttle} from "lodash";
 import ResizeObserver from 'resize-observer-polyfill';
 
 import dis from '../../../dispatcher/dispatcher';
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -144,9 +146,11 @@ export default class PersistedElement extends React.Component {
     }
 
     renderApp() {
-        const content = <div ref={this.collectChild} style={this.props.style}>
-            {this.props.children}
-        </div>;
+        const content = <MatrixClientContext.Provider value={MatrixClientPeg.get()}>
+            <div ref={this.collectChild} style={this.props.style}>
+                {this.props.children}
+            </div>
+        </MatrixClientContext.Provider>;
 
         ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
     }
@@ -173,3 +177,5 @@ export default class PersistedElement extends React.Component {
         return <div ref={this.collectChildContainer} />;
     }
 }
+
+export const getPersistKey = (appId: string) => 'widget_' + appId;

src/components/views/elements/PersistentApp.js

@@ -58,6 +58,11 @@ export default class PersistentApp extends React.Component {
             const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
             if (this.state.roomId !== persistentWidgetInRoomId) {
                 const persistentWidgetInRoom = MatrixClientPeg.get().getRoom(persistentWidgetInRoomId);
+
+                // Sanity check the room - the widget may have been destroyed between render cycles, and
+                // thus no room is associated anymore.
+                if (!persistentWidgetInRoom) return null;
+
                 // get the widget data
                 const appEvent = WidgetUtils.getRoomWidgets(persistentWidgetInRoom).find((ev) => {
                     return ev.getStateKey() === ActiveWidgetStore.getPersistentWidgetId();
@@ -74,13 +79,10 @@ export default class PersistentApp extends React.Component {
                     fullWidth={true}
                     room={persistentWidgetInRoom}
                     userId={MatrixClientPeg.get().credentials.userId}
-                    show={true}
                     creatorUserId={app.creatorUserId}
                     widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
                     waitForIframeLoad={app.waitForIframeLoad}
                     whitelistCapabilities={capWhitelist}
-                    showDelete={false}
-                    showMinimise={false}
                     miniMode={true}
                     showMenubar={false}
                 />;

src/components/views/elements/TagTile.js

@@ -26,12 +26,12 @@ import * as FormattingUtils from '../../../utils/FormattingUtils';
 
 import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
-import TagOrderStore from '../../../stores/TagOrderStore';
+import GroupFilterOrderStore from '../../../stores/GroupFilterOrderStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AccessibleButton from "./AccessibleButton";
 import SettingsStore from "../../../settings/SettingsStore";
 
-// A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
+// A class for a child of GroupFilterPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
 //  - Rooms that are part of the group
 //  - Direct messages with members of the group
@@ -142,7 +142,7 @@ export default class TagTile extends React.Component {
             mx_TagTile_selected_prototype: this.props.selected && isPrototype,
         });
 
-        const badge = TagOrderStore.getGroupBadge(this.props.tag);
+        const badge = GroupFilterOrderStore.getGroupBadge(this.props.tag);
         let badgeElement;
         if (badge && !this.state.hover && !this.props.menuDisplayed) {
             const badgeClasses = classNames({

src/components/views/elements/Tooltip.tsx

@@ -36,6 +36,7 @@ interface IProps {
         // the react element to put into the tooltip
         label: React.ReactNode;
         forceOnRight?: boolean;
+        yOffset?: number;
 }
 
 export default class Tooltip extends React.Component<IProps> {
@@ -46,6 +47,7 @@ export default class Tooltip extends React.Component<IProps> {
 
     public static readonly defaultProps = {
         visible: true,
+        yOffset: 0,
     };
 
     // Create a wrapper for the tooltip outside the parent and attach it to the body element
@@ -82,9 +84,9 @@ export default class Tooltip extends React.Component<IProps> {
             offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
 
-        style.top = (parentBox.top - 2) + window.pageYOffset + offset;
+        style.top = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset + offset;
         if (!this.props.forceOnRight && parentBox.right > window.innerWidth / 2) {
-            style.right = window.innerWidth - parentBox.right - window.pageXOffset - 8;
+            style.right = window.innerWidth - parentBox.right - window.pageXOffset - 16;
         } else {
             style.left = parentBox.right + window.pageXOffset + 6;
         }

src/components/views/elements/UserTagTile.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import * as fbEmitter from "fbemitter";
-import TagOrderStore from "../../../stores/TagOrderStore";
+import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import classNames from "classnames";
 import { _t } from "../../../languageHandler";
@@ -36,12 +36,12 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
         super(props);
 
         this.state = {
-            selected: TagOrderStore.getSelectedTags().length === 0,
+            selected: GroupFilterOrderStore.getSelectedTags().length === 0,
         };
     }
 
     public componentDidMount() {
-        this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
+        this.tagStoreRef = GroupFilterOrderStore.addListener(this.onTagStoreUpdate);
     }
 
     public componentWillUnmount() {
@@ -49,7 +49,7 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
     }
 
     private onTagStoreUpdate = () => {
-        const selected = TagOrderStore.getSelectedTags().length === 0;
+        const selected = GroupFilterOrderStore.getSelectedTags().length === 0;
         this.setState({selected});
     };
 

src/components/views/elements/Validation.tsx

@@ -33,6 +33,7 @@ interface IRule<T, D = void> {
 interface IArgs<T, D = void> {
     rules: IRule<T, D>[];
     description(this: T, derivedData: D): React.ReactChild;
+    hideDescriptionIfValid?: boolean;
     deriveData?(data: Data): Promise<D>;
 }
 
@@ -54,6 +55,8 @@ export interface IValidationResult {
  * @param {Function} description
  *     Function that returns a string summary of the kind of value that will
  *     meet the validation rules. Shown at the top of the validation feedback.
+ * @param {Boolean} hideDescriptionIfValid
+ *     If true, don't show the description if the validation passes validation.
  * @param {Function} deriveData
  *     Optional function that returns a Promise to an object of generic type D.
  *     The result of this Promise is passed to rule methods `skip`, `test`, `valid`, and `invalid`.
@@ -71,7 +74,9 @@ export interface IValidationResult {
  *     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<T = undefined, D = void>({ description, deriveData, rules }: IArgs<T, D>) {
+export default function withValidation<T = undefined, D = void>({
+    description, hideDescriptionIfValid, deriveData, rules,
+}: IArgs<T, D>) {
     return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise<IValidationResult> {
         if (!value && allowEmpty) {
             return {
@@ -156,7 +161,7 @@ export default function withValidation<T = undefined, D = void>({ description, d
         }
 
         let summary;
-        if (description) {
+        if (description && (details || !hideDescriptionIfValid)) {
             // We're setting `this` to whichever component holds the validation
             // function. That allows rules to access the state of the component.
             const content = description.call(this, derivedData);

src/components/views/messages/EncryptionEvent.js

@@ -1,63 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
-
-export default class EncryptionEvent extends React.Component {
-    render() {
-        const {mxEvent} = this.props;
-
-        let body;
-        let classes = "mx_EventTile_bubble mx_cryptoEvent mx_cryptoEvent_icon";
-        const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(mxEvent.getRoomId());
-        if (mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' && isRoomEncrypted) {
-            body = <div>
-                <div className="mx_cryptoEvent_title">{_t("Encryption enabled")}</div>
-                <div className="mx_cryptoEvent_subtitle">
-                    {_t(
-                        "Messages in this room are end-to-end encrypted. " +
-                        "Learn more & verify this user in their user profile.",
-                    )}
-                </div>
-            </div>;
-        } else if (isRoomEncrypted) {
-            body = <div>
-                <div className="mx_cryptoEvent_title">{_t("Encryption enabled")}</div>
-                <div className="mx_cryptoEvent_subtitle">
-                    {_t("Ignored attempt to disable encryption")}
-                </div>
-            </div>;
-        } else {
-            body = <div>
-                <div className="mx_cryptoEvent_title">{_t("Encryption not enabled")}</div>
-                <div className="mx_cryptoEvent_subtitle">{_t("The encryption used by this room isn't supported.")}</div>
-            </div>;
-            classes += " mx_cryptoEvent_icon_warning";
-        }
-
-        return (<div className={classes}>
-            {body}
-        </div>);
-    }
-}
-
-EncryptionEvent.propTypes = {
-    /* the MatrixEvent to show */
-    mxEvent: PropTypes.object.isRequired,
-};

src/components/views/messages/EncryptionEvent.tsx

@@ -0,0 +1,68 @@
+/*
+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, {forwardRef, useContext} from 'react';
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+
+import { _t } from '../../../languageHandler';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import EventTileBubble from "./EventTileBubble";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import DMRoomMap from "../../../utils/DMRoomMap";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({mxEvent}, ref) => {
+    const cli = useContext(MatrixClientContext);
+    const roomId = mxEvent.getRoomId();
+    const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
+
+    if (mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' && isRoomEncrypted) {
+        let subtitle: string;
+        const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId);
+        if (dmPartner) {
+            const displayName = cli?.getRoom(roomId)?.getMember(dmPartner)?.rawDisplayName || dmPartner;
+            subtitle = _t("Messages here are end-to-end encrypted. " +
+                "Verify %(displayName)s in their profile - tap on their avatar.", { displayName });
+        } else {
+            subtitle = _t("Messages in this room are end-to-end encrypted. " +
+                "When people join, you can verify them in their profile, just tap on their avatar.");
+        }
+
+        return <EventTileBubble
+            className="mx_cryptoEvent mx_cryptoEvent_icon"
+            title={_t("Encryption enabled")}
+            subtitle={subtitle}
+        />;
+    } else if (isRoomEncrypted) {
+        return <EventTileBubble
+            className="mx_cryptoEvent mx_cryptoEvent_icon"
+            title={_t("Encryption enabled")}
+            subtitle={_t("Ignored attempt to disable encryption")}
+        />;
+    }
+
+    return <EventTileBubble
+        className="mx_cryptoEvent mx_cryptoEvent_icon mx_cryptoEvent_icon_warning"
+        title={_t("Encryption not enabled")}
+        subtitle={_t("The encryption used by this room isn't supported.")}
+        ref={ref}
+    />;
+});
+
+export default EncryptionEvent;

src/components/views/messages/EventTileBubble.tsx

@@ -0,0 +1,34 @@
+/*
+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, {forwardRef, ReactNode} from "react";
+import classNames from "classnames";
+
+interface IProps {
+    className: string;
+    title: string;
+    subtitle?: ReactNode;
+}
+
+const EventTileBubble = forwardRef<HTMLDivElement, IProps>(({ className, title, subtitle, children }, ref) => {
+    return <div className={classNames("mx_EventTileBubble", className)} ref={ref}>
+        <div className="mx_EventTileBubble_title">{ title }</div>
+        { subtitle && <div className="mx_EventTileBubble_subtitle">{ subtitle }</div> }
+        { children }
+    </div>;
+});
+
+export default EventTileBubble;

src/components/views/messages/MFileBody.js

@@ -144,7 +144,7 @@ export default class MFileBody extends React.Component {
      * Extracts a human readable label for the file attachment to use as
      * link text.
      *
-     * @params {Object} content The "content" key of the matrix event.
+     * @param {Object} content The "content" key of the matrix event.
      * @return {string} the human readable link text for the attachment.
      */
     presentableTextForFile(content) {

src/components/views/messages/MImageBody.js

@@ -85,6 +85,7 @@ export default class MImageBody extends React.Component {
     showImage() {
         localStorage.setItem("mx_ShowImage_" + this.props.mxEvent.getId(), "true");
         this.setState({showImage: true});
+        this._downloadImage();
     }
 
     onClick(ev) {
@@ -253,10 +254,7 @@ export default class MImageBody extends React.Component {
         }
     }
 
-    componentDidMount() {
-        this.unmounted = false;
-        this.context.on('sync', this.onClientSync);
-
+    _downloadImage() {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);
@@ -289,9 +287,18 @@ export default class MImageBody extends React.Component {
                 });
             });
         }
+    }
 
-        // Remember that the user wanted to show this particular image
-        if (!this.state.showImage && localStorage.getItem("mx_ShowImage_" + this.props.mxEvent.getId()) === "true") {
+    componentDidMount() {
+        this.unmounted = false;
+        this.context.on('sync', this.onClientSync);
+
+        const showImage = this.state.showImage ||
+            localStorage.getItem("mx_ShowImage_" + this.props.mxEvent.getId()) === "true";
+
+        if (showImage) {
+            // Don't download anything becaue we don't want to display anything.
+            this._downloadImage();
             this.setState({showImage: true});
         }
 

src/components/views/messages/MJitsiWidgetEvent.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from "../../../languageHandler";
 import WidgetStore from "../../../stores/WidgetStore";
+import EventTileBubble from "./EventTileBubble";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -40,37 +41,24 @@ export default class MJitsiWidgetEvent extends React.PureComponent<IProps> {
 
         if (!url) {
             // removed
-            return (
-                <div className='mx_EventTile_bubble mx_MJitsiWidgetEvent'>
-                    <div className='mx_MJitsiWidgetEvent_title'>
-                        {_t('Video conference ended by %(senderName)s', {senderName})}
-                    </div>
-                </div>
-            );
+            return <EventTileBubble
+                className="mx_MJitsiWidgetEvent"
+                title={_t('Video conference ended by %(senderName)s', {senderName})}
+            />;
         } else if (prevUrl) {
             // modified
-            return (
-                <div className='mx_EventTile_bubble mx_MJitsiWidgetEvent'>
-                    <div className='mx_MJitsiWidgetEvent_title'>
-                        {_t('Video conference updated by %(senderName)s', {senderName})}
-                    </div>
-                    <div className='mx_MJitsiWidgetEvent_subtitle'>
-                        {joinCopy}
-                    </div>
-                </div>
-            );
+            return <EventTileBubble
+                className="mx_MJitsiWidgetEvent"
+                title={_t('Video conference updated by %(senderName)s', {senderName})}
+                subtitle={joinCopy}
+            />;
         } else {
             // assume added
-            return (
-                <div className='mx_EventTile_bubble mx_MJitsiWidgetEvent'>
-                    <div className='mx_MJitsiWidgetEvent_title'>
-                        {_t("Video conference started by %(senderName)s", {senderName})}
-                    </div>
-                    <div className='mx_MJitsiWidgetEvent_subtitle'>
-                        {joinCopy}
-                    </div>
-                </div>
-            );
+            return <EventTileBubble
+                className="mx_MJitsiWidgetEvent"
+                title={_t("Video conference started by %(senderName)s", {senderName})}
+                subtitle={joinCopy}
+            />;
         }
     }
 }

src/components/views/messages/MKeyVerificationConclusion.js

@@ -21,6 +21,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import {getNameForEventRoom, userLabelForEventRoom}
     from '../../../utils/KeyVerificationStateObserver';
+import EventTileBubble from "./EventTileBubble";
 
 export default class MKeyVerificationConclusion extends React.Component {
     constructor(props) {
@@ -115,14 +116,14 @@ export default class MKeyVerificationConclusion extends React.Component {
         }
 
         if (title) {
-            const subtitle = userLabelForEventRoom(request.otherUserId, mxEvent.getRoomId());
-            const classes = classNames("mx_EventTile_bubble", "mx_cryptoEvent", "mx_cryptoEvent_icon", {
+            const classes = classNames("mx_cryptoEvent mx_cryptoEvent_icon", {
                 mx_cryptoEvent_icon_verified: request.done,
             });
-            return (<div className={classes}>
-                <div className="mx_cryptoEvent_title">{title}</div>
-                <div className="mx_cryptoEvent_subtitle">{subtitle}</div>
-            </div>);
+            return <EventTileBubble
+                className={classes}
+                title={title}
+                subtitle={userLabelForEventRoom(request.otherUserId, mxEvent.getRoomId())}
+            />;
         }
 
         return null;

src/components/views/messages/MKeyVerificationRequest.js

@@ -24,6 +24,7 @@ import {getNameForEventRoom, userLabelForEventRoom}
 import dis from "../../../dispatcher/dispatcher";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 import {Action} from "../../../dispatcher/actions";
+import EventTileBubble from "./EventTileBubble";
 
 export default class MKeyVerificationRequest extends React.Component {
     constructor(props) {
@@ -146,10 +147,8 @@ export default class MKeyVerificationRequest extends React.Component {
 
         if (!request.initiatedByMe) {
             const name = getNameForEventRoom(request.requestingUserId, mxEvent.getRoomId());
-            title = (<div className="mx_cryptoEvent_title">{
-                _t("%(name)s wants to verify", {name})}</div>);
-            subtitle = (<div className="mx_cryptoEvent_subtitle">{
-                userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId())}</div>);
+            title = _t("%(name)s wants to verify", {name});
+            subtitle = userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId());
             if (request.canAccept) {
                 stateNode = (<div className="mx_cryptoEvent_buttons">
                     <FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
@@ -157,18 +156,18 @@ export default class MKeyVerificationRequest extends React.Component {
                 </div>);
             }
         } else { // request sent by us
-            title = (<div className="mx_cryptoEvent_title">{
-                _t("You sent a verification request")}</div>);
-            subtitle = (<div className="mx_cryptoEvent_subtitle">{
-                userLabelForEventRoom(request.receivingUserId, mxEvent.getRoomId())}</div>);
+            title = _t("You sent a verification request");
+            subtitle = userLabelForEventRoom(request.receivingUserId, mxEvent.getRoomId());
         }
 
         if (title) {
-            return (<div className="mx_EventTile_bubble mx_cryptoEvent mx_cryptoEvent_icon">
-                {title}
-                {subtitle}
-                {stateNode}
-            </div>);
+            return <EventTileBubble
+                className="mx_cryptoEvent mx_cryptoEvent_icon"
+                title={title}
+                subtitle={subtitle}
+            >
+                { stateNode }
+            </EventTileBubble>;
         }
         return null;
     }

src/components/views/messages/MVideoBody.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import MFileBody from './MFileBody';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { decryptFile } from '../../../utils/DecryptFile';
@@ -24,23 +23,34 @@ import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import InlineSpinner from '../elements/InlineSpinner';
 
-export default class MVideoBody extends React.Component {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
+interface IProps {
+    /* the MatrixEvent to show */
+    mxEvent: any;
+    /* called when the video has loaded */
+    onHeightChanged: () => void;
+}
 
-        /* called when the video has loaded */
-        onHeightChanged: PropTypes.func.isRequired,
-    };
+interface IState {
+    decryptedUrl: string|null,
+    decryptedThumbnailUrl: string|null,
+    decryptedBlob: Blob|null,
+    error: any|null,
+    fetchingData: boolean,
+}
 
-    state = {
-        decryptedUrl: null,
-        decryptedThumbnailUrl: null,
-        decryptedBlob: null,
-        error: null,
-    };
+export default class MVideoBody extends React.PureComponent<IProps, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            fetchingData: false,
+            decryptedUrl: null,
+            decryptedThumbnailUrl: null,
+            decryptedBlob: null,
+            error: null,
+        }
+    }
 
-    thumbScale(fullWidth, fullHeight, thumbWidth, thumbHeight) {
+    thumbScale(fullWidth: number, fullHeight: number, thumbWidth: number, thumbHeight: number) {
         if (!fullWidth || !fullHeight) {
             // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
             // log this because it's spammy
@@ -61,7 +71,7 @@ export default class MVideoBody extends React.Component {
         }
     }
 
-    _getContentUrl() {
+    _getContentUrl(): string|null {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined) {
             return this.state.decryptedUrl;
@@ -70,7 +80,7 @@ export default class MVideoBody extends React.Component {
         }
     }
 
-    _getThumbUrl() {
+    _getThumbUrl(): string|null {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined) {
             return this.state.decryptedThumbnailUrl;
@@ -81,7 +91,8 @@ export default class MVideoBody extends React.Component {
         }
     }
 
-    componentDidMount() {
+    async componentDidMount() {
+        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos") as boolean;
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);
@@ -92,26 +103,33 @@ export default class MVideoBody extends React.Component {
                     return URL.createObjectURL(blob);
                 });
             }
-            let decryptedBlob;
-            thumbnailPromise.then((thumbnailUrl) => {
-                return decryptFile(content.file).then(function(blob) {
-                    decryptedBlob = blob;
-                    return URL.createObjectURL(blob);
-                }).then((contentUrl) => {
+            try {
+                const thumbnailUrl = await thumbnailPromise;
+                if (autoplay) {
+                    console.log("Preloading video");
+                    const decryptedBlob = await decryptFile(content.file);
+                    const contentUrl = URL.createObjectURL(decryptedBlob);
                     this.setState({
                         decryptedUrl: contentUrl,
                         decryptedThumbnailUrl: thumbnailUrl,
                         decryptedBlob: decryptedBlob,
                     });
                     this.props.onHeightChanged();
-                });
-            }).catch((err) => {
+                } else {
+                    console.log("NOT preloading video");
+                    this.setState({
+                        decryptedUrl: null,
+                        decryptedThumbnailUrl: thumbnailUrl,
+                        decryptedBlob: null,
+                    });
+                }
+            } catch (err) {
                 console.warn("Unable to decrypt attachment: ", err);
                 // Set a placeholder image when we can't decrypt the image.
                 this.setState({
                     error: err,
                 });
-            });
+            }
         }
     }
 
@@ -124,8 +142,35 @@ export default class MVideoBody extends React.Component {
         }
     }
 
+    async _videoOnPlay() {
+        if (this._getContentUrl() || this.state.fetchingData || this.state.error) {
+            // We have the file, we are fetching the file, or there is an error.
+            return;
+        }
+        this.setState({
+            // To stop subsequent download attempts
+            fetchingData: true,
+        });
+        const content = this.props.mxEvent.getContent();
+        if (!content.file) {
+            this.setState({
+                error: "No file given in content",
+            });
+            return;
+        }
+        const decryptedBlob = await decryptFile(content.file);
+        const contentUrl = URL.createObjectURL(decryptedBlob);
+        this.setState({
+            decryptedUrl: contentUrl,
+            decryptedBlob: decryptedBlob,
+            fetchingData: false,
+        });
+        this.props.onHeightChanged();
+    }
+
     render() {
         const content = this.props.mxEvent.getContent();
+        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
 
         if (this.state.error !== null) {
             return (
@@ -136,7 +181,8 @@ export default class MVideoBody extends React.Component {
             );
         }
 
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
+        // Important: If we aren't autoplaying and we haven't decrypred it yet, show a video with a poster.
+        if (content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
             // Need to decrypt the attachment
             // The attachment is decrypted in componentDidMount.
             // For now add an img tag with a spinner.
@@ -151,7 +197,6 @@ export default class MVideoBody extends React.Component {
 
         const contentUrl = this._getContentUrl();
         const thumbUrl = this._getThumbUrl();
-        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
         let height = null;
         let width = null;
         let poster = null;
@@ -170,9 +215,9 @@ export default class MVideoBody extends React.Component {
         }
         return (
             <span className="mx_MVideoBody">
-                <video className="mx_MVideoBody" src={contentUrl} alt={content.body}
+                <video className="mx_MVideoBody" src={contentUrl} title={content.body}
                     controls preload={preload} muted={autoplay} autoPlay={autoplay}
-                    height={height} width={width} poster={poster}>
+                    height={height} width={width} poster={poster} onPlay={this._videoOnPlay.bind(this)}>
                 </video>
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
             </span>

src/components/views/messages/RoomCreate.js

@@ -22,6 +22,7 @@ import dis from '../../../dispatcher/dispatcher';
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import EventTileBubble from "./EventTileBubble";
 
 export default class RoomCreate extends React.Component {
     static propTypes = {
@@ -45,23 +46,22 @@ export default class RoomCreate extends React.Component {
     render() {
         const predecessor = this.props.mxEvent.getContent()['predecessor'];
         if (predecessor === undefined) {
-            return <div />; // We should never have been instaniated in this case
+            return <div />; // We should never have been instantiated in this case
         }
         const prevRoom = MatrixClientPeg.get().getRoom(predecessor['room_id']);
         const permalinkCreator = new RoomPermalinkCreator(prevRoom, predecessor['room_id']);
         permalinkCreator.load();
         const predecessorPermalink = permalinkCreator.forEvent(predecessor['event_id']);
-        return <div className="mx_CreateEvent">
-            <div className="mx_CreateEvent_image" />
-            <div className="mx_CreateEvent_header">
-                {_t("This room is a continuation of another conversation.")}
-            </div>
-            <a className="mx_CreateEvent_link"
-                href={predecessorPermalink}
-                onClick={this._onLinkClicked}
-            >
+        const link = (
+            <a href={predecessorPermalink} onClick={this._onLinkClicked}>
                 {_t("Click here to see older messages.")}
             </a>
-        </div>;
+        );
+
+        return <EventTileBubble
+            className="mx_CreateEvent"
+            title={_t("This room is a continuation of another conversation.")}
+            subtitle={link}
+        />;
     }
 }

src/components/views/messages/TextualBody.js

@@ -416,7 +416,9 @@ export default class TextualBody extends React.Component {
         if (this.props.highlightLink) {
             body = <a href={this.props.highlightLink}>{ body }</a>;
         } else if (content.data && typeof content.data["org.matrix.neb.starter_link"] === "string") {
-            body = <a href="#" onClick={this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"])}>{ body }</a>;
+            body = <a href="#"
+                onClick={this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"])}
+            >{ body }</a>;
         }
 
         let widgets;

src/components/views/right_panel/HeaderButton.tsx

@@ -31,7 +31,7 @@ interface IProps {
     // The badge to display above the icon
     badge?: React.ReactNode;
     // The parameters to track the click event
-    analytics: string[];
+    analytics: Parameters<typeof Analytics.trackEvent>;
 
     // Button name
     name: string;

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, {useCallback, useState, useEffect, useContext} from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useIsEncrypted } from '../../../hooks/useIsEncrypted';
@@ -32,17 +31,18 @@ import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPa
 import Modal from "../../../Modal";
 import ShareDialog from '../dialogs/ShareDialog';
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
-import WidgetEchoStore from "../../../stores/WidgetEchoStore";
 import WidgetUtils from "../../../utils/WidgetUtils";
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
 import TextWithTooltip from "../elements/TextWithTooltip";
-import BaseAvatar from "../avatars/BaseAvatar";
+import WidgetAvatar from "../avatars/WidgetAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import WidgetStore, {IApp} from "../../../stores/WidgetStore";
+import WidgetStore, {IApp, MAX_PINNED} from "../../../stores/WidgetStore";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import RoomContext from "../../../contexts/RoomContext";
 import {UIFeature} from "../../../settings/UIFeature";
+import {ChevronFace, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
+import WidgetContextMenu from "../context_menus/WidgetContextMenu";
 
 interface IProps {
     room: Room;
@@ -68,22 +68,105 @@ const Button: React.FC<IButtonProps> = ({ children, className, onClick }) => {
 };
 
 export const useWidgets = (room: Room) => {
-    const [apps, setApps] = useState<IApp[]>(WidgetStore.instance.getApps(room));
+    const [apps, setApps] = useState<IApp[]>(WidgetStore.instance.getApps(room.roomId));
 
     const updateApps = useCallback(() => {
         // Copy the array so that we always trigger a re-render, as some updates mutate the array of apps/settings
-        setApps([...WidgetStore.instance.getApps(room)]);
+        setApps([...WidgetStore.instance.getApps(room.roomId)]);
     }, [room]);
 
     useEffect(updateApps, [room]);
-    useEventEmitter(WidgetEchoStore, "update", updateApps);
     useEventEmitter(WidgetStore.instance, room.roomId, updateApps);
 
     return apps;
 };
 
+interface IAppRowProps {
+    app: IApp;
+}
+
+const AppRow: React.FC<IAppRowProps> = ({ app }) => {
+    const name = WidgetUtils.getWidgetName(app);
+    const dataTitle = WidgetUtils.getWidgetDataTitle(app);
+    const subtitle = dataTitle && " - " + dataTitle;
+
+    const onOpenWidgetClick = () => {
+        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.Widget,
+            refireParams: {
+                widgetId: app.id,
+            },
+        });
+    };
+
+    const isPinned = WidgetStore.instance.isPinned(app.id);
+    const togglePin = isPinned
+        ? () => { WidgetStore.instance.unpinWidget(app.id); }
+        : () => { WidgetStore.instance.pinWidget(app.id); };
+
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
+    let contextMenu;
+    if (menuDisplayed) {
+        const rect = handle.current.getBoundingClientRect();
+        contextMenu = <WidgetContextMenu
+            chevronFace={ChevronFace.None}
+            right={window.innerWidth - rect.right}
+            bottom={window.innerHeight - rect.top}
+            onFinished={closeMenu}
+            app={app}
+        />;
+    }
+
+    const cannotPin = !isPinned && !WidgetStore.instance.canPin(app.id);
+
+    let pinTitle: string;
+    if (cannotPin) {
+        pinTitle = _t("You can only pin up to %(count)s widgets", { count: MAX_PINNED });
+    } else {
+        pinTitle = isPinned ? _t("Unpin") : _t("Pin");
+    }
+
+    const classes = classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", {
+        mx_RoomSummaryCard_Button_pinned: isPinned,
+    });
+
+    return <div className={classes} ref={handle}>
+        <AccessibleTooltipButton
+            className="mx_RoomSummaryCard_icon_app"
+            onClick={onOpenWidgetClick}
+            // only show a tooltip if the widget is pinned
+            title={isPinned ? _t("Unpin a widget to view it in this panel") : ""}
+            forceHide={!isPinned}
+            disabled={isPinned}
+            yOffset={-48}
+        >
+            <WidgetAvatar app={app} />
+            <span>{name}</span>
+            { subtitle }
+        </AccessibleTooltipButton>
+
+        <ContextMenuTooltipButton
+            className="mx_RoomSummaryCard_app_options"
+            isExpanded={menuDisplayed}
+            onClick={openMenu}
+            title={_t("Options")}
+            yOffset={-24}
+        />
+
+        <AccessibleTooltipButton
+            className="mx_RoomSummaryCard_app_pinToggle"
+            onClick={togglePin}
+            title={pinTitle}
+            disabled={cannotPin}
+            yOffset={-24}
+        />
+
+        { contextMenu }
+    </div>;
+};
+
 const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
-    const cli = useContext(MatrixClientContext);
     const apps = useWidgets(room);
 
     const onManageIntegrations = () => {
@@ -100,65 +183,7 @@ const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
     };
 
     return <Group className="mx_RoomSummaryCard_appsGroup" title={_t("Widgets")}>
-        { apps.map(app => {
-            const name = WidgetUtils.getWidgetName(app);
-            const dataTitle = WidgetUtils.getWidgetDataTitle(app);
-            const subtitle = dataTitle && " - " + dataTitle;
-
-            let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg")];
-            // heuristics for some better icons until Widgets support their own icons
-            if (app.type.includes("meeting") || app.type.includes("calendar")) {
-                iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg")];
-            } else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
-                iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg")];
-            } else if (app.type.includes("clock")) {
-                iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg")];
-            }
-
-            if (app.avatar_url) { // MSC2765
-                iconUrls.unshift(getHttpUriForMxc(cli.getHomeserverUrl(), app.avatar_url, 20, 20, "crop"));
-            }
-
-            const isPinned = WidgetStore.instance.isPinned(app.id);
-            const classes = classNames("mx_RoomSummaryCard_icon_app", {
-                mx_RoomSummaryCard_icon_app_pinned: isPinned,
-            });
-
-            if (isPinned) {
-                const onClick = () => {
-                    WidgetStore.instance.unpinWidget(app.id);
-                };
-
-                return <AccessibleTooltipButton
-                    key={app.id}
-                    className={classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", classes)}
-                    onClick={onClick}
-                    title={_t("Unpin app")}
-                >
-                    <BaseAvatar name={app.id} urls={iconUrls} width={20} height={20} />
-                    <span>{name}</span>
-                    { subtitle }
-                </AccessibleTooltipButton>
-            }
-
-            const onOpenWidgetClick = () => {
-                defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
-                    action: Action.SetRightPanelPhase,
-                    phase: RightPanelPhases.Widget,
-                    refireParams: {
-                        widgetId: app.id,
-                    },
-                });
-            };
-
-            return (
-                <Button key={app.id} className={classes} onClick={onOpenWidgetClick}>
-                    <BaseAvatar name={app.id} urls={iconUrls} width={20} height={20} />
-                    <span>{name}</span>
-                    { subtitle }
-                </Button>
-            );
-        }) }
+        { apps.map(app => <AppRow key={app.id} app={app} />) }
 
         <AccessibleButton kind="link" onClick={onManageIntegrations}>
             { apps.length > 0 ? _t("Edit widgets, bridges & bots") : _t("Add widgets, bridges & bots") }

src/components/views/right_panel/UserInfo.tsx

@@ -28,7 +28,7 @@ import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
 import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import {_t} from '../../../languageHandler';
-import createRoom, {privateShouldBeEncrypted} from '../../../createRoom';
+import createRoom, { findDMForUser, privateShouldBeEncrypted } from '../../../createRoom';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import AccessibleButton from '../elements/AccessibleButton';
 import SdkConfig from '../../../SdkConfig';
@@ -51,7 +51,6 @@ import BaseCard from "./BaseCard";
 import {E2EStatus} from "../../../utils/ShieldUtils";
 import ImageView from "../elements/ImageView";
 import Spinner from "../elements/Spinner";
-import IconButton from "../elements/IconButton";
 import PowerSelector from "../elements/PowerSelector";
 import MemberAvatar from "../avatars/MemberAvatar";
 import PresenceLabel from "../rooms/PresenceLabel";
@@ -60,6 +59,7 @@ import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog";
 import InfoDialog from "../dialogs/InfoDialog";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
 interface IDevice {
     deviceId: string;
@@ -105,17 +105,7 @@ export const getE2EStatus = (cli: MatrixClient, userId: string, devices: IDevice
 };
 
 async function openDMForUser(matrixClient: MatrixClient, userId: string) {
-    const dmRooms = DMRoomMap.shared().getDMRoomsForUserId(userId);
-    const lastActiveRoom = dmRooms.reduce((lastActiveRoom, roomId) => {
-        const room = matrixClient.getRoom(roomId);
-        if (!room || room.getMyMembership() === "leave") {
-            return lastActiveRoom;
-        }
-        if (!lastActiveRoom || lastActiveRoom.getLastActiveTimestamp() < room.getLastActiveTimestamp()) {
-            return room;
-        }
-        return lastActiveRoom;
-    }, null);
+    const lastActiveRoom = findDMForUser(matrixClient, userId);
 
     if (lastActiveRoom) {
         dis.dispatch({
@@ -586,7 +576,10 @@ const RedactMessagesButton: React.FC<IBaseProps> = ({member}) => {
         while (timeline) {
             eventsToRedact = timeline.getEvents().reduce((events, event) => {
                 if (event.getSender() === userId && !event.isRedacted() && !event.isRedaction() &&
-                    event.getType() !== "m.room.create"
+                    event.getType() !== EventType.RoomCreate &&
+                    // Don't redact ACLs because that'll obliterate the room
+                    // See https://github.com/matrix-org/synapse/issues/4042 for details.
+                    event.getType() !== EventType.RoomServerAcl
                 ) {
                     return events.concat(event);
                 } else {
@@ -801,6 +794,11 @@ const RoomAdminToolsContainer: React.FC<IBaseRoomProps> = ({
     } = powerLevels;
 
     const me = room.getMember(cli.getUserId());
+    if (!me) {
+        // we aren't in the room, so return no admin tooling
+        return <div />;
+    }
+
     const isMe = me.userId === member.userId;
     const canAffectUser = member.powerLevel < me.powerLevel || isMe;
 
@@ -1019,24 +1017,15 @@ const PowerLevelSection: React.FC<{
     roomPermissions: IRoomPermissions;
     powerLevels: IPowerLevelsContent;
 }> = ({user, room, roomPermissions, powerLevels}) => {
-    const [isEditing, setEditing] = useState(false);
-    if (isEditing) {
-        return (<PowerLevelEditor
-            user={user} room={room} roomPermissions={roomPermissions}
-            onFinished={() => setEditing(false)} />);
+    if (roomPermissions.canEdit) {
+        return (<PowerLevelEditor user={user} room={room} roomPermissions={roomPermissions} />);
     } else {
         const powerLevelUsersDefault = powerLevels.users_default || 0;
         const powerLevel = parseInt(user.powerLevel, 10);
-        const modifyButton = roomPermissions.canEdit ?
-            (<IconButton icon="edit" onClick={() => setEditing(true)} />) : null;
         const role = textualPowerLevel(powerLevel, powerLevelUsersDefault);
-        const label = _t("<strong>%(role)s</strong> in %(roomName)s",
-            {role, roomName: room.name},
-            {strong: label => <strong>{label}</strong>},
-        );
         return (
             <div className="mx_UserInfo_profileField">
-                <div className="mx_UserInfo_roleDescription">{label}{modifyButton}</div>
+                <div className="mx_UserInfo_roleDescription">{role}</div>
             </div>
         );
     }
@@ -1046,20 +1035,15 @@ const PowerLevelEditor: React.FC<{
     user: User;
     room: Room;
     roomPermissions: IRoomPermissions;
-    onFinished(): void;
-}> = ({user, room, roomPermissions, onFinished}) => {
+}> = ({user, room, roomPermissions}) => {
     const cli = useContext(MatrixClientContext);
 
-    const [isUpdating, setIsUpdating] = useState(false);
     const [selectedPowerLevel, setSelectedPowerLevel] = useState(parseInt(user.powerLevel, 10));
-    const [isDirty, setIsDirty] = useState(false);
-    const onPowerChange = useCallback((powerLevel) => {
-        setIsDirty(true);
-        setSelectedPowerLevel(parseInt(powerLevel, 10));
-    }, [setSelectedPowerLevel, setIsDirty]);
+    const onPowerChange = useCallback(async (powerLevelStr: string) => {
+        const powerLevel = parseInt(powerLevelStr, 10);
+        setSelectedPowerLevel(powerLevel);
 
-    const changePowerLevel = useCallback(async () => {
-        const _applyPowerChange = (roomId, target, powerLevel, powerLevelEvent) => {
+        const applyPowerChange = (roomId, target, powerLevel, powerLevelEvent) => {
             return cli.setPowerLevel(roomId, target, parseInt(powerLevel), powerLevelEvent).then(
                 function() {
                     // NO-OP; rely on the m.room.member event coming down else we could
@@ -1075,64 +1059,42 @@ const PowerLevelEditor: React.FC<{
             );
         };
 
-        try {
-            if (!isDirty) {
-                return;
-            }
+        const roomId = user.roomId;
+        const target = user.userId;
 
-            setIsUpdating(true);
+        const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
+        if (!powerLevelEvent) return;
 
-            const powerLevel = selectedPowerLevel;
+        const myUserId = cli.getUserId();
+        const myPower = powerLevelEvent.getContent().users[myUserId];
+        if (myPower && parseInt(myPower) === powerLevel) {
+            const {finished} = Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
+                title: _t("Warning!"),
+                description:
+                    <div>
+                        { _t("You will not be able to undo this change as you are promoting the user " +
+                            "to have the same power level as yourself.") }<br />
+                        { _t("Are you sure?") }
+                    </div>,
+                button: _t("Continue"),
+            });
 
-            const roomId = user.roomId;
-            const target = user.userId;
-
-            const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
-            if (!powerLevelEvent) return;
-
-            if (!powerLevelEvent.getContent().users) {
-                _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
-                return;
-            }
-
-            const myUserId = cli.getUserId();
+            const [confirmed] = await finished;
+            if (!confirmed) return;
+        } else if (myUserId === target) {
             // If we are changing our own PL it can only ever be decreasing, which we cannot reverse.
-            if (myUserId === target) {
-                try {
-                    if (!(await warnSelfDemote())) return;
-                } catch (e) {
-                    console.error("Failed to warn about self demotion: ", e);
-                }
-                await _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
-                return;
+            try {
+                if (!(await warnSelfDemote())) return;
+            } catch (e) {
+                console.error("Failed to warn about self demotion: ", e);
             }
-
-            const myPower = powerLevelEvent.getContent().users[myUserId];
-            if (parseInt(myPower) === powerLevel) {
-                const {finished} = Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
-                    title: _t("Warning!"),
-                    description:
-                        <div>
-                            { _t("You will not be able to undo this change as you are promoting the user " +
-                                "to have the same power level as yourself.") }<br />
-                            { _t("Are you sure?") }
-                        </div>,
-                    button: _t("Continue"),
-                });
-
-                const [confirmed] = await finished;
-                if (!confirmed) return;
-            }
-            await _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
-        } finally {
-            onFinished();
         }
-    }, [user.roomId, user.userId, cli, selectedPowerLevel, isDirty, setIsUpdating, onFinished, room]);
+
+        await applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+    }, [user.roomId, user.userId, cli, room]);
 
     const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
     const powerLevelUsersDefault = powerLevelEvent ? powerLevelEvent.getContent().users_default : 0;
-    const buttonOrSpinner = isUpdating ? <Spinner w={16} h={16} /> :
-        <IconButton icon="check" onClick={changePowerLevel} />;
 
     return (
         <div className="mx_UserInfo_profileField">
@@ -1142,9 +1104,7 @@ const PowerLevelEditor: React.FC<{
                 maxValue={roomPermissions.modifyLevelMax}
                 usersDefault={powerLevelUsersDefault}
                 onChange={onPowerChange}
-                disabled={isUpdating}
             />
-            {buttonOrSpinner}
         </div>
     );
 };
@@ -1334,13 +1294,17 @@ const BasicUserInfo: React.FC<{
     }
 
     let memberDetails;
-    if (room && member.roomId) {
-        memberDetails = <PowerLevelSection
-            powerLevels={powerLevels}
-            user={member}
-            room={room}
-            roomPermissions={roomPermissions}
-        />;
+    // hide the Roles section for DMs as it doesn't make sense there
+    if (room && member.roomId && !DMRoomMap.shared().getUserIdForRoomId(member.roomId)) {
+        memberDetails = <div className="mx_UserInfo_container">
+            <h3>{ _t("Role") }</h3>
+            <PowerLevelSection
+                powerLevels={powerLevels}
+                user={member}
+                room={room}
+                roomPermissions={roomPermissions}
+            />
+        </div>;
     }
 
     // only display the devices list if our client supports E2E
@@ -1410,12 +1374,7 @@ const BasicUserInfo: React.FC<{
     );
 
     return <React.Fragment>
-        { memberDetails &&
-        <div className="mx_UserInfo_container mx_UserInfo_separator mx_UserInfo_memberDetailsContainer">
-            <div className="mx_UserInfo_memberDetails">
-                { memberDetails }
-            </div>
-        </div> }
+        { memberDetails }
 
         { securitySection }
         <UserOptionsSection

src/components/views/right_panel/WidgetCard.tsx

@@ -20,7 +20,6 @@ import {Room} from "matrix-js-sdk/src/models/room";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import BaseCard from "./BaseCard";
 import WidgetUtils from "../../../utils/WidgetUtils";
-import AccessibleButton from "../elements/AccessibleButton";
 import AppTile from "../elements/AppTile";
 import {_t} from "../../../languageHandler";
 import {useWidgets} from "./RoomSummaryCard";
@@ -30,16 +29,7 @@ import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPa
 import {Action} from "../../../dispatcher/actions";
 import WidgetStore from "../../../stores/WidgetStore";
 import {ChevronFace, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu";
-import IconizedContextMenu, {
-    IconizedContextMenuOption,
-    IconizedContextMenuOptionList,
-} from "../context_menus/IconizedContextMenu";
-import {AppTileActionPayload} from "../../../dispatcher/payloads/AppTileActionPayload";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import classNames from "classnames";
-import dis from "../../../dispatcher/dispatcher";
-import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
-import { MatrixCapabilities } from "matrix-widget-api";
+import WidgetContextMenu from "../context_menus/WidgetContextMenu";
 
 interface IProps {
     room: Room;
@@ -69,111 +59,22 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
     // Don't render anything as we are about to transition
     if (!app || isPinned) return null;
 
-    const header = <React.Fragment>
-        <h2>{ WidgetUtils.getWidgetName(app) }</h2>
-    </React.Fragment>;
-
-    const canModify = WidgetUtils.canUserModifyWidgets(room.roomId);
-
     let contextMenu;
     if (menuDisplayed) {
-        let snapshotButton;
-        const widgetMessaging = WidgetMessagingStore.instance.getMessagingForId(app.id);
-        if (widgetMessaging?.hasCapability(MatrixCapabilities.Screenshots)) {
-            const onSnapshotClick = () => {
-                widgetMessaging.takeScreenshot().then(data => {
-                    dis.dispatch({
-                        action: 'picture_snapshot',
-                        file: data.screenshot,
-                    });
-                }).catch(err => {
-                    console.error("Failed to take screenshot: ", err);
-                });
-                closeMenu();
-            };
-
-            snapshotButton = <IconizedContextMenuOption onClick={onSnapshotClick} label={_t("Take a picture")} />;
-        }
-
-        let deleteButton;
-        if (canModify) {
-            const onDeleteClick = () => {
-                defaultDispatcher.dispatch<AppTileActionPayload>({
-                    action: Action.AppTileDelete,
-                    widgetId: app.id,
-                });
-                closeMenu();
-            };
-
-            deleteButton = <IconizedContextMenuOption onClick={onDeleteClick} label={_t("Remove for everyone")} />;
-        }
-
-        const onRevokeClick = () => {
-            defaultDispatcher.dispatch<AppTileActionPayload>({
-                action: Action.AppTileRevoke,
-                widgetId: app.id,
-            });
-            closeMenu();
-        };
-
         const rect = handle.current.getBoundingClientRect();
         contextMenu = (
-            <IconizedContextMenu
+            <WidgetContextMenu
                 chevronFace={ChevronFace.None}
-                right={window.innerWidth - rect.right}
-                bottom={window.innerHeight - rect.top}
+                right={window.innerWidth - rect.right - 12}
+                top={rect.bottom + 12}
                 onFinished={closeMenu}
-            >
-                <IconizedContextMenuOptionList>
-                    { snapshotButton }
-                    { deleteButton }
-                    <IconizedContextMenuOption onClick={onRevokeClick} label={_t("Remove for me")} />
-                </IconizedContextMenuOptionList>
-            </IconizedContextMenu>
+                app={app}
+            />
         );
     }
 
-    const onPinClick = () => {
-        WidgetStore.instance.pinWidget(app.id);
-    };
-
-    const onEditClick = () => {
-        WidgetUtils.editWidget(room, app);
-    };
-
-    let editButton;
-    if (canModify) {
-        editButton = <AccessibleButton kind="secondary" onClick={onEditClick}>
-            { _t("Edit") }
-        </AccessibleButton>;
-    }
-
-    const pinButtonClasses = canModify ? "" : "mx_WidgetCard_widePinButton";
-
-    let pinButton;
-    if (WidgetStore.instance.canPin(app.id)) {
-        pinButton = <AccessibleButton
-            kind="secondary"
-            onClick={onPinClick}
-            className={pinButtonClasses}
-        >
-            { _t("Pin to room") }
-        </AccessibleButton>;
-    } else {
-        pinButton = <AccessibleTooltipButton
-            title={_t("You can only pin 2 widgets at a time")}
-            tooltipClassName="mx_WidgetCard_maxPinnedTooltip"
-            kind="secondary"
-            className={pinButtonClasses}
-            disabled
-        >
-            { _t("Pin to room") }
-        </AccessibleTooltipButton>;
-    }
-
-    const footer = <React.Fragment>
-        { editButton }
-        { pinButton }
+    const header = <React.Fragment>
+        <h2>{ WidgetUtils.getWidgetName(app) }</h2>
         <ContextMenuButton
             kind="secondary"
             className="mx_WidgetCard_optionsButton"
@@ -182,16 +83,12 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
             isExpanded={menuDisplayed}
             label={_t("Options")}
         />
-
         { contextMenu }
     </React.Fragment>;
 
     return <BaseCard
         header={header}
-        footer={footer}
-        className={classNames("mx_WidgetCard", {
-            mx_WidgetCard_noEdit: !canModify,
-        })}
+        className="mx_WidgetCard"
         onClose={onClose}
         previousPhase={RightPanelPhases.RoomSummary}
         withoutScrollContainer

src/components/views/rooms/AppsDrawer.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {Resizable} from "re-resizable";
@@ -24,15 +24,16 @@ import AppTile from '../elements/AppTile';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import * as ScalarMessaging from '../../../ScalarMessaging';
-import { _t } from '../../../languageHandler';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import WidgetEchoStore from "../../../stores/WidgetEchoStore";
-import AccessibleButton from '../elements/AccessibleButton';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
 import {useLocalStorageState} from "../../../hooks/useLocalStorageState";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
 import WidgetStore from "../../../stores/WidgetStore";
+import ResizeHandle from "../elements/ResizeHandle";
+import Resizer from "../../../resizer/resizer";
+import PercentageDistributor from "../../../resizer/distributors/percentage";
 
 export default class AppsDrawer extends React.Component {
     static propTypes = {
@@ -40,12 +41,10 @@ export default class AppsDrawer extends React.Component {
         room: PropTypes.object.isRequired,
         resizeNotifier: PropTypes.instanceOf(ResizeNotifier).isRequired,
         showApps: PropTypes.bool, // Should apps be rendered
-        hide: PropTypes.bool, // If rendered, should apps drawer be visible
     };
 
     static defaultProps = {
         showApps: true,
-        hide: false,
     };
 
     constructor(props) {
@@ -54,6 +53,11 @@ export default class AppsDrawer extends React.Component {
         this.state = {
             apps: this._getApps(),
         };
+
+        this._resizeContainer = null;
+        this.resizer = this._createResizer();
+
+        this.props.resizeNotifier.on("isResizing", this.onIsResizing);
     }
 
     componentDidMount() {
@@ -66,6 +70,10 @@ export default class AppsDrawer extends React.Component {
         ScalarMessaging.stopListening();
         WidgetStore.instance.off(this.props.room.roomId, this._updateApps);
         if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
+        if (this._resizeContainer) {
+            this.resizer.detach();
+        }
+        this.props.resizeNotifier.off("isResizing", this.onIsResizing);
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
@@ -75,6 +83,95 @@ export default class AppsDrawer extends React.Component {
         this._updateApps();
     }
 
+    onIsResizing = (resizing) => {
+        this.setState({ resizing });
+        if (!resizing) {
+            this._relaxResizer();
+        }
+    };
+
+    _createResizer() {
+        const classNames = {
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse",
+        };
+        const collapseConfig = {
+            onResizeStart: () => {
+                this._resizeContainer.classList.add("mx_AppsDrawer_resizing");
+            },
+            onResizeStop: () => {
+                this._resizeContainer.classList.remove("mx_AppsDrawer_resizing");
+                // persist to localStorage
+                localStorage.setItem(this._getStorageKey(), JSON.stringify([
+                    this.state.apps.map(app => app.id),
+                    ...this.state.apps.slice(1).map((_, i) => this.resizer.forHandleAt(i).size),
+                ]));
+            },
+        };
+        // pass a truthy container for now, we won't call attach until we update it
+        const resizer = new Resizer({}, PercentageDistributor, collapseConfig);
+        resizer.setClassNames(classNames);
+        return resizer;
+    }
+
+    _collectResizer = (ref) => {
+        if (this._resizeContainer) {
+            this.resizer.detach();
+        }
+
+        if (ref) {
+            this.resizer.container = ref;
+            this.resizer.attach();
+        }
+        this._resizeContainer = ref;
+        this._loadResizerPreferences();
+    };
+
+    _getStorageKey = () => `mx_apps_drawer-${this.props.room.roomId}`;
+
+    _getAppsHash = (apps) => apps.map(app => app.id).join("~");
+
+    componentDidUpdate(prevProps, prevState) {
+        if (this._getAppsHash(this.state.apps) !== this._getAppsHash(prevState.apps)) {
+            this._loadResizerPreferences();
+        }
+    }
+
+    _relaxResizer = () => {
+        const distributors = this.resizer.getDistributors();
+
+        // relax all items if they had any overconstrained flexboxes
+        distributors.forEach(d => d.start());
+        distributors.forEach(d => d.finish());
+    };
+
+    _loadResizerPreferences = () => {
+        try {
+            const [[...lastIds], ...sizes] = JSON.parse(localStorage.getItem(this._getStorageKey()));
+            // Every app was included in the last split, reuse the last sizes
+            if (this.state.apps.length <= lastIds.length && this.state.apps.every((app, i) => lastIds[i] === app.id)) {
+                sizes.forEach((size, i) => {
+                    const distributor = this.resizer.forHandleAt(i);
+                    if (distributor) {
+                        distributor.size = size;
+                        distributor.finish();
+                    }
+                });
+                return;
+            }
+        } catch (e) {
+            // this is expected
+        }
+
+        if (this.state.apps) {
+            const distributors = this.resizer.getDistributors();
+            distributors.forEach(d => d.item.clearSize());
+            distributors.forEach(d => d.start());
+            distributors.forEach(d => d.finish());
+        }
+    };
+
     onAction = (action) => {
         const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
         switch (action.action) {
@@ -93,7 +190,7 @@ export default class AppsDrawer extends React.Component {
         }
     };
 
-    _getApps = () => WidgetStore.instance.getApps(this.props.room, true);
+    _getApps = () => WidgetStore.instance.getPinnedApps(this.props.room.roomId);
 
     _updateApps = () => {
         this.setState({
@@ -101,15 +198,6 @@ export default class AppsDrawer extends React.Component {
         });
     };
 
-    _canUserModify() {
-        try {
-            return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
-        } catch (err) {
-            console.error(err);
-            return false;
-        }
-    }
-
     _launchManageIntegrations() {
         if (SettingsStore.getValue("feature_many_integration_managers")) {
             IntegrationManagers.sharedInstance().openAll();
@@ -118,12 +206,9 @@ export default class AppsDrawer extends React.Component {
         }
     }
 
-    onClickAddWidget = (e) => {
-        e.preventDefault();
-        this._launchManageIntegrations();
-    };
-
     render() {
+        if (!this.props.showApps) return <div />;
+
         const apps = this.state.apps.map((app, index, arr) => {
             const capWhitelist = WidgetUtils.getCapWhitelistForAppTypeInRoomId(app.type, this.props.room.roomId);
 
@@ -133,7 +218,6 @@ export default class AppsDrawer extends React.Component {
                 fullWidth={arr.length < 2}
                 room={this.props.room}
                 userId={this.props.userId}
-                show={this.props.showApps}
                 creatorUserId={app.creatorUserId}
                 widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
                 waitForIframeLoad={app.waitForIframeLoad}
@@ -145,21 +229,6 @@ export default class AppsDrawer extends React.Component {
             return <div />;
         }
 
-        let addWidget;
-        if (this.props.showApps &&
-            this._canUserModify()
-        ) {
-            addWidget = <AccessibleButton
-                onClick={this.onClickAddWidget}
-                className={this.state.apps.length<2 ?
-                    'mx_AddWidget_button mx_AddWidget_button_full_width' :
-                    'mx_AddWidget_button'
-                }
-                title={_t('Add a widget')}>
-                [+] { _t('Add a widget') }
-            </AccessibleButton>;
-        }
-
         let spinner;
         if (
             apps.length === 0 && WidgetEchoStore.roomHasPendingWidgets(
@@ -172,10 +241,11 @@ export default class AppsDrawer extends React.Component {
         }
 
         const classes = classNames({
-            "mx_AppsDrawer": true,
-            "mx_AppsDrawer_hidden": this.props.hide,
-            "mx_AppsDrawer_fullWidth": apps.length < 2,
-            "mx_AppsDrawer_minimised": !this.props.showApps,
+            mx_AppsDrawer: true,
+            mx_AppsDrawer_fullWidth: apps.length < 2,
+            mx_AppsDrawer_resizing: this.state.resizing,
+            mx_AppsDrawer_2apps: apps.length === 2,
+            mx_AppsDrawer_3apps: apps.length === 3,
         });
 
         return (
@@ -185,13 +255,20 @@ export default class AppsDrawer extends React.Component {
                     minHeight={100}
                     maxHeight={this.props.maxHeight ? this.props.maxHeight - 50 : undefined}
                     handleClass="mx_AppsContainer_resizerHandle"
-                    className="mx_AppsContainer"
+                    className="mx_AppsContainer_resizer"
                     resizeNotifier={this.props.resizeNotifier}
                 >
-                    { apps }
-                    { spinner }
+                    <div className="mx_AppsContainer" ref={this._collectResizer}>
+                        { apps.map((app, i) => {
+                            if (i < 1) return app;
+                            return <React.Fragment key={app.key}>
+                                <ResizeHandle reverse={i > apps.length / 2} />
+                                { app }
+                            </React.Fragment>;
+                        }) }
+                    </div>
                 </PersistentVResizer>
-                { this._canUserModify() && addWidget }
+                { spinner }
             </div>
         );
     }
@@ -208,14 +285,12 @@ const PersistentVResizer = ({
     children,
 }) => {
     const [height, setHeight] = useLocalStorageState("pvr_" + id, 280); // old fixed height was 273px
-    const [resizing, setResizing] = useState(false);
 
     return <Resizable
         size={{height: Math.min(height, maxHeight)}}
         minHeight={minHeight}
         maxHeight={maxHeight}
         onResizeStart={() => {
-            if (!resizing) setResizing(true);
             resizeNotifier.startResizing();
         }}
         onResize={() => {
@@ -223,14 +298,11 @@ const PersistentVResizer = ({
         }}
         onResizeStop={(e, dir, ref, d) => {
             setHeight(height + d.height);
-            if (resizing) setResizing(false);
             resizeNotifier.stopResizing();
         }}
         handleWrapperClass={handleWrapperClass}
         handleClasses={{bottom: handleClass}}
-        className={classNames(className, {
-            mx_AppsDrawer_resizing: resizing,
-        })}
+        className={className}
         enable={{bottom: true}}
     >
         { children }

src/components/views/rooms/AuxPanel.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2015, 2016, 2017, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,8 +15,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { Room } from 'matrix-js-sdk/src/models/room'
 import * as sdk from '../../../index';
 import dis from "../../../dispatcher/dispatcher";
 import * as ObjectUtils from '../../../ObjectUtils';
@@ -29,32 +28,44 @@ import SettingsStore from "../../../settings/SettingsStore";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import CallView from "../voip/CallView";
 import {UIFeature} from "../../../settings/UIFeature";
+import { ResizeNotifier } from "../../../utils/ResizeNotifier";
 
+interface IProps {
+    // js-sdk room object
+    room: Room,
+    userId: string,
+    showApps: boolean, // Render apps
 
-export default class AuxPanel extends React.Component {
-    static propTypes = {
-        // js-sdk room object
-        room: PropTypes.object.isRequired,
-        userId: PropTypes.string.isRequired,
-        showApps: PropTypes.bool, // Render apps
-        hideAppsDrawer: PropTypes.bool, // Do not display apps drawer and content (may still be rendered)
+    // set to true to show the file drop target
+    draggingFile: boolean,
 
-        // set to true to show the file drop target
-        draggingFile: PropTypes.bool,
+    // maxHeight attribute for the aux panel and the video
+    // therein
+    maxHeight: number,
 
-        // maxHeight attribute for the aux panel and the video
-        // therein
-        maxHeight: PropTypes.number,
+    // a callback which is called when the content of the aux panel changes
+    // content in a way that is likely to make it change size.
+    onResize: () => void,
+    fullHeight: boolean,
 
-        // a callback which is called when the content of the aux panel changes
-        // content in a way that is likely to make it change size.
-        onResize: PropTypes.func,
-        fullHeight: PropTypes.bool,
-    };
+    resizeNotifier: ResizeNotifier,
+}
 
+interface Counter {
+    title: string,
+    value: number,
+    link: string,
+    severity: string,
+    stateKey: string,
+}
+
+interface IState {
+    counters: Counter[],
+}
+
+export default class AuxPanel extends React.Component<IProps, IState> {
     static defaultProps = {
         showApps: true,
-        hideAppsDrawer: false,
     };
 
     constructor(props) {
@@ -106,7 +117,7 @@ export default class AuxPanel extends React.Component {
     }, 500);
 
     _computeCounters() {
-        let counters = [];
+        const counters = [];
 
         if (this.props.room && SettingsStore.getValue("feature_state_counters")) {
             const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter');
@@ -114,7 +125,7 @@ export default class AuxPanel extends React.Component {
                 return a.getStateKey() < b.getStateKey();
             });
 
-            stateEvs.forEach((ev, idx) => {
+            for (const ev of stateEvs) {
                 const title = ev.getContent().title;
                 const value = ev.getContent().value;
                 const link = ev.getContent().link;
@@ -125,14 +136,14 @@ export default class AuxPanel extends React.Component {
                 // zero)
                 if (title && value !== undefined) {
                     counters.push({
-                        "title": title,
-                        "value": value,
-                        "link": link,
-                        "severity": severity,
-                        "stateKey": stateKey
+                        title,
+                        value,
+                        link,
+                        severity,
+                        stateKey,
                     })
                 }
-            });
+            }
         }
 
         return counters;
@@ -145,8 +156,7 @@ export default class AuxPanel extends React.Component {
         if (this.props.draggingFile) {
             fileDropTarget = (
                 <div className="mx_RoomView_fileDropTarget">
-                    <div className="mx_RoomView_fileDropTargetLabel"
-                      title={_t("Drop File Here")}>
+                    <div className="mx_RoomView_fileDropTargetLabel" title={_t("Drop File Here")}>
                         <TintableSvg src={require("../../../../res/img/upload-big.svg")} width="45" height="59" />
                         <br />
                         { _t("Drop file here to upload") }
@@ -170,7 +180,6 @@ export default class AuxPanel extends React.Component {
                 userId={this.props.userId}
                 maxHeight={this.props.maxHeight}
                 showApps={this.props.showApps}
-                hide={this.props.hideAppsDrawer}
                 resizeNotifier={this.props.resizeNotifier}
             />;
         }
@@ -211,7 +220,7 @@ export default class AuxPanel extends React.Component {
                     <span
                         className="m_RoomView_auxPanel_stateViews_delim"
                         key={"delim" + idx}
-                    > ─ </span>
+                    > ─ </span>,
                 );
             });
 
@@ -229,7 +238,7 @@ export default class AuxPanel extends React.Component {
             "mx_RoomView_auxPanel": true,
             "mx_RoomView_auxPanel_fullHeight": this.props.fullHeight,
         });
-        const style = {};
+        const style: React.CSSProperties = {};
         if (!this.props.fullHeight) {
             style.maxHeight = this.props.maxHeight;
         }

src/components/views/rooms/EditMessageComposer.js

@@ -32,6 +32,7 @@ import BasicMessageComposer from "./BasicMessageComposer";
 import {Key} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {Action} from "../../../dispatcher/actions";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 function _isReply(mxEvent) {
     const relatesTo = mxEvent.getContent()["m.relates_to"];
@@ -182,6 +183,7 @@ export default class EditMessageComposer extends React.Component {
     }
 
     _sendEdit = () => {
+        const startTime = CountlyAnalytics.getTimestamp();
         const editedEvent = this.props.editState.getEvent();
         const editContent = createEditContent(this.model, editedEvent);
         const newContent = editContent["m.new_content"];
@@ -190,8 +192,9 @@ export default class EditMessageComposer extends React.Component {
         if (this._isContentModified(newContent)) {
             const roomId = editedEvent.getRoomId();
             this._cancelPreviousPendingEdit();
-            this.context.sendMessage(roomId, editContent);
+            const prom = this.context.sendMessage(roomId, editContent);
             dis.dispatch({action: "message_sent"});
+            CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
         }
 
         // close the event editing and focus composer

src/components/views/rooms/EventTile.js

@@ -21,6 +21,7 @@ import ReplyThread from "../elements/ReplyThread";
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import classNames from "classnames";
+import {EventType} from "matrix-js-sdk/src/@types/event";
 import { _t, _td } from '../../../languageHandler';
 import * as TextForEvent from "../../../TextForEvent";
 import * as sdk from "../../../index";
@@ -46,6 +47,7 @@ const eventTileTypes = {
     'm.call.invite': 'messages.TextualEvent',
     'm.call.answer': 'messages.TextualEvent',
     'm.call.hangup': 'messages.TextualEvent',
+    'm.call.reject': 'messages.TextualEvent',
 };
 
 const stateEventTileTypes = {
@@ -645,20 +647,20 @@ export default class EventTile extends React.Component {
 
         // Info messages are basically information about commands processed on a room
         const isBubbleMessage = eventType.startsWith("m.key.verification") ||
-            (eventType === "m.room.message" && msgtype && msgtype.startsWith("m.key.verification")) ||
-            (eventType === "m.room.encryption") ||
+            (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) ||
+            (eventType === EventType.RoomCreate) ||
+            (eventType === EventType.RoomEncryption) ||
             (tileHandler === "messages.MJitsiWidgetEvent");
         let isInfoMessage = (
-            !isBubbleMessage && eventType !== 'm.room.message' &&
-            eventType !== 'm.sticker' && eventType !== 'm.room.create'
+            !isBubbleMessage && eventType !== EventType.RoomMessage &&
+            eventType !== EventType.Sticker && eventType !== EventType.RoomCreate
         );
 
         // If we're showing hidden events in the timeline, we should use the
         // source tile when there's no regular tile for an event and also for
         // replace relations (which otherwise would display as a confusing
         // duplicate of the thing they are replacing).
-        const useSource = !tileHandler || this.props.mxEvent.isRelation("m.replace");
-        if (useSource && SettingsStore.getValue("showHiddenEventsInTimeline")) {
+        if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(this.props.mxEvent)) {
             tileHandler = "messages.ViewSourceEvent";
             // Reuse info message avatar and sender profile styling
             isInfoMessage = true;

src/components/views/rooms/ForwardMessage.js

@@ -18,7 +18,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher/dispatcher';
 import {Key} from '../../../Keyboard';
 
 
@@ -28,19 +27,10 @@ export default class ForwardMessage extends React.Component {
     };
 
     componentDidMount() {
-        dis.dispatch({
-            action: 'panel_disable',
-            middleDisabled: true,
-        });
-
         document.addEventListener('keydown', this._onKeyDown);
     }
 
     componentWillUnmount() {
-        dis.dispatch({
-            action: 'panel_disable',
-            middleDisabled: false,
-        });
         document.removeEventListener('keydown', this._onKeyDown);
     }
 

src/components/views/rooms/LinkPreviewWidget.js

@@ -114,7 +114,10 @@ export default class LinkPreviewWidget extends React.Component {
 
         let thumbHeight = imageMaxHeight;
         if (p["og:image:width"] && p["og:image:height"]) {
-            thumbHeight = ImageUtils.thumbHeight(p["og:image:width"], p["og:image:height"], imageMaxWidth, imageMaxHeight);
+            thumbHeight = ImageUtils.thumbHeight(
+                p["og:image:width"], p["og:image:height"],
+                imageMaxWidth, imageMaxHeight,
+            );
         }
 
         let img;

src/components/views/rooms/MessageComposer.js

@@ -23,7 +23,6 @@ import CallHandler from '../../../CallHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
-import RoomViewStore from '../../../stores/RoomViewStore';
 import Stickerpicker from './Stickerpicker';
 import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
@@ -38,6 +37,7 @@ import WidgetUtils from "../../../utils/WidgetUtils";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
 import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
 import { PlaceCallType } from "../../../CallHandler";
+import { CallState } from 'matrix-js-sdk/src/webrtc/call';
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -104,8 +104,11 @@ function HangupButton(props) {
         if (!call) {
             return;
         }
+
+        const action = call.state === CallState.Ringing ? 'reject' : 'hangup';
+
         dis.dispatch({
-            action: 'hangup',
+            action,
             // hangup the call for this room, which may not be the room in props
             // (e.g. conferences which will hangup the 1:1 room instead)
             room_id: call.roomId,
@@ -250,7 +253,6 @@ export default class MessageComposer extends React.Component {
         super(props);
         this.onInputStateChanged = this.onInputStateChanged.bind(this);
         this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
-        this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
         this._onTombstoneClick = this._onTombstoneClick.bind(this);
         this.renderPlaceholderText = this.renderPlaceholderText.bind(this);
         WidgetStore.instance.on(UPDATE_EVENT, this._onWidgetUpdate);
@@ -258,7 +260,6 @@ export default class MessageComposer extends React.Component {
         this._dispatcherRef = null;
 
         this.state = {
-            replyToEvent: RoomViewStore.getQuotingEvent(),
             tombstone: this._getRoomTombstone(),
             canSendMessages: this.props.room.maySendMessage(),
             showCallButtons: SettingsStore.getValue("showCallButtonsInComposer"),
@@ -290,7 +291,6 @@ export default class MessageComposer extends React.Component {
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
-        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         this._waitForOwnMember();
     }
 
@@ -314,9 +314,6 @@ export default class MessageComposer extends React.Component {
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
         }
-        if (this._roomStoreToken) {
-            this._roomStoreToken.remove();
-        }
         WidgetStore.instance.removeListener(UPDATE_EVENT, this._onWidgetUpdate);
         ActiveWidgetStore.removeListener('update', this._onActiveWidgetUpdate);
         dis.unregister(this.dispatcherRef);
@@ -337,12 +334,6 @@ export default class MessageComposer extends React.Component {
         return this.props.room.currentState.getStateEvents('m.room.tombstone', '');
     }
 
-    _onRoomViewStoreUpdate() {
-        const replyToEvent = RoomViewStore.getQuotingEvent();
-        if (this.state.replyToEvent === replyToEvent) return;
-        this.setState({ replyToEvent });
-    }
-
     onInputStateChanged(inputState) {
         // Merge the new input state with old to support partial updates
         inputState = Object.assign({}, this.state.inputState, inputState);
@@ -367,6 +358,7 @@ export default class MessageComposer extends React.Component {
             event_id: createEventId,
             room_id: replacementRoomId,
             auto_join: true,
+            _type: "tombstone", // instrumentation
 
             // Try to join via the server that sent the event. This converts @something:example.org
             // into a server domain by splitting on colons and ignoring the first entry ("@something").
@@ -379,7 +371,7 @@ export default class MessageComposer extends React.Component {
     }
 
     renderPlaceholderText() {
-        if (this.state.replyToEvent) {
+        if (this.props.replyToEvent) {
             if (this.props.e2eStatus) {
                 return _t('Send an encrypted reply…');
             } else {
@@ -425,7 +417,7 @@ export default class MessageComposer extends React.Component {
                     placeholder={this.renderPlaceholderText()}
                     resizeNotifier={this.props.resizeNotifier}
                     permalinkCreator={this.props.permalinkCreator}
-                    replyToEvent={this.state.replyToEvent}
+                    replyToEvent={this.props.replyToEvent}
                 />,
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
                 <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,

src/components/views/rooms/NewRoomIntro.tsx

@@ -0,0 +1,135 @@
+/*
+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 {EventType} from "matrix-js-sdk/src/@types/event";
+
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import RoomContext from "../../../contexts/RoomContext";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import {_t} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import MiniAvatarUploader, {AVATAR_SIZE} from "../elements/MiniAvatarUploader";
+import RoomAvatar from "../avatars/RoomAvatar";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload";
+import {Action} from "../../../dispatcher/actions";
+import dis from "../../../dispatcher/dispatcher";
+
+const NewRoomIntro = () => {
+    const cli = useContext(MatrixClientContext);
+    const {room, roomId} = useContext(RoomContext);
+
+    const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId);
+    let body;
+    if (dmPartner) {
+        let caption;
+        if ((room.getJoinedMemberCount() + room.getInvitedMemberCount()) === 2) {
+            caption = _t("Only the two of you are in this conversation, unless either of you invites anyone to join.");
+        }
+
+        const member = room?.getMember(dmPartner);
+        const displayName = member?.rawDisplayName || dmPartner;
+        body = <React.Fragment>
+            <RoomAvatar room={room} width={AVATAR_SIZE} height={AVATAR_SIZE} onClick={() => {
+                defaultDispatcher.dispatch<ViewUserPayload>({
+                    action: Action.ViewUser,
+                    // XXX: We should be using a real member object and not assuming what the receiver wants.
+                    member: member || {userId: dmPartner},
+                });
+            }} />
+
+            <h2>{ room.name }</h2>
+
+            <p>{_t("This is the beginning of your direct message history with <displayName/>.", {}, {
+                displayName: () => <b>{ displayName }</b>,
+            })}</p>
+            { caption && <p>{ caption }</p> }
+        </React.Fragment>;
+    } else {
+        const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic;
+        const canAddTopic = room.currentState.maySendStateEvent(EventType.RoomTopic, cli.getUserId());
+
+        const onTopicClick = () => {
+            dis.dispatch({
+                action: "open_room_settings",
+                room_id: roomId,
+            }, true);
+            // focus the topic field to help the user find it as it'll gain an outline
+            setImmediate(() => {
+                window.document.getElementById("profileTopic").focus();
+            });
+        };
+
+        let topicText;
+        if (canAddTopic && topic) {
+            topicText = _t("Topic: %(topic)s (<a>edit</a>)", { topic }, {
+                a: sub => <AccessibleButton kind="link" onClick={onTopicClick}>{ sub }</AccessibleButton>,
+            });
+        } else if (topic) {
+            topicText = _t("Topic: %(topic)s ", { topic });
+        } else if (canAddTopic) {
+            topicText = _t("<a>Add a topic</a> to help people know what it is about.", {}, {
+                a: sub => <AccessibleButton kind="link" onClick={onTopicClick}>{ sub }</AccessibleButton>,
+            });
+        }
+
+        const creator = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+        const creatorName = room?.getMember(creator)?.rawDisplayName || creator;
+
+        let createdText;
+        if (creator === cli.getUserId()) {
+            createdText = _t("You created this room.");
+        } else {
+            createdText = _t("%(displayName)s created this room.", {
+                displayName: creatorName,
+            });
+        }
+
+        const onInviteClick = () => {
+            dis.dispatch({ action: "view_invite", roomId });
+        };
+
+        const avatarUrl = room.currentState.getStateEvents(EventType.RoomAvatar, "")?.getContent()?.url;
+        body = <React.Fragment>
+            <MiniAvatarUploader
+                hasAvatar={!!avatarUrl}
+                noAvatarLabel={_t("Add a photo, so people can easily spot your room.")}
+                setAvatarUrl={url => cli.sendStateEvent(roomId, EventType.RoomAvatar, { url }, '')}
+            >
+                <RoomAvatar room={room} width={AVATAR_SIZE} height={AVATAR_SIZE} />
+            </MiniAvatarUploader>
+
+            <h2>{ room.name }</h2>
+
+            <p>{createdText} {_t("This is the start of <roomName/>.", {}, {
+                roomName: () => <b>{ room.name }</b>,
+            })}</p>
+            <p>{topicText}</p>
+            <div className="mx_NewRoomIntro_buttons">
+                <AccessibleButton className="mx_NewRoomIntro_inviteButton" kind="primary" onClick={onInviteClick}>
+                    {_t("Invite to this room")}
+                </AccessibleButton>
+            </div>
+        </React.Fragment>;
+    }
+
+    return <div className="mx_NewRoomIntro">
+        { body }
+    </div>;
+};
+
+export default NewRoomIntro;

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -76,7 +76,7 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
     };
 
     private viewRoom = (room: Room, index: number) => {
-        Analytics.trackEvent("Breadcrumbs", "click_node", index);
+        Analytics.trackEvent("Breadcrumbs", "click_node", String(index));
         defaultDispatcher.dispatch({action: "view_room", room_id: room.roomId});
     };
 

src/components/views/rooms/RoomHeader.js

@@ -42,6 +42,8 @@ export default class RoomHeader extends React.Component {
         onLeaveClick: PropTypes.func,
         onCancelClick: PropTypes.func,
         e2eStatus: PropTypes.string,
+        onAppsClick: PropTypes.func,
+        appsShown: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -230,6 +232,17 @@ export default class RoomHeader extends React.Component {
                     title={_t("Forget room")} />;
         }
 
+        let appsButton;
+        if (this.props.onAppsClick) {
+            appsButton =
+                <AccessibleTooltipButton
+                    className={classNames("mx_RoomHeader_button mx_RoomHeader_appsButton", {
+                        mx_RoomHeader_appsButton_highlight: this.props.appsShown,
+                    })}
+                    onClick={this.props.onAppsClick}
+                    title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")} />;
+        }
+
         let searchButton;
         if (this.props.onSearchClick && this.props.inRoom) {
             searchButton =
@@ -243,6 +256,7 @@ export default class RoomHeader extends React.Component {
             <div className="mx_RoomHeader_buttons">
                 { pinnedEventsButton }
                 { forgetButton }
+                { appsButton }
                 { searchButton }
             </div>;
 

src/components/views/rooms/RoomList.tsx

@@ -53,12 +53,12 @@ interface IProps {
     onBlur: (ev: React.FocusEvent) => void;
     onResize: () => void;
     resizeNotifier: ResizeNotifier;
-    collapsed: boolean;
     isMinimized: boolean;
 }
 
 interface IState {
     sublists: ITagMap;
+    isNameFiltering: boolean;
 }
 
 const TAG_ORDER: TagID[] = [
@@ -184,6 +184,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
         this.state = {
             sublists: {},
+            isNameFiltering: !!RoomListStore.instance.getFirstNameFilterCondition(),
         };
 
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
@@ -254,7 +255,8 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             return CustomRoomTagStore.getTags()[t];
         });
 
-        let doUpdate = arrayHasDiff(previousListIds, newListIds);
+        const isNameFiltering = !!RoomListStore.instance.getFirstNameFilterCondition();
+        let doUpdate = this.state.isNameFiltering !== isNameFiltering || arrayHasDiff(previousListIds, newListIds);
         if (!doUpdate) {
             // so we didn't have the visible sublists change, but did the contents of those
             // sublists change significantly enough to break the sticky headers? Probably, so
@@ -276,14 +278,20 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             const newSublists = objectWithOnly(newLists, newListIds);
             const sublists = objectShallowClone(newSublists, (k, v) => arrayFastClone(v));
 
-            this.setState({sublists}, () => {
+            this.setState({sublists, isNameFiltering}, () => {
                 this.props.onResize();
             });
         }
     };
 
+    private onStartChat = () => {
+        const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
+        dis.dispatch({ action: "view_create_chat", initialText });
+    };
+
     private onExplore = () => {
-        dis.fire(Action.ViewRoomDirectory);
+        const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
+        dis.dispatch({ action: Action.ViewRoomDirectory, initialText });
     };
 
     private renderCommunityInvites(): TemporaryTile[] {
@@ -333,6 +341,10 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             return p;
         }, [] as TagID[]);
 
+        // show a skeleton UI if the user is in no rooms and they are not filtering
+        const showSkeleton = !this.state.isNameFiltering &&
+            Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
+
         for (const orderedTagId of tagOrder) {
             const orderedRooms = this.state.sublists[orderedTagId] || [];
             const extraTiles = orderedTagId === DefaultTagID.Invite ? this.renderCommunityInvites() : null;
@@ -357,6 +369,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 addRoomContextMenu={aesthetics.addRoomContextMenu}
                 isMinimized={this.props.isMinimized}
                 onResize={this.props.onResize}
+                showSkeleton={showSkeleton}
                 extraBadTilesThatShouldntExist={extraTiles}
             />);
         }
@@ -366,13 +379,50 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
     public render() {
         let explorePrompt: JSX.Element;
-        if (RoomListStore.instance.getFirstNameFilterCondition()) {
-            explorePrompt = <div className="mx_RoomList_explorePrompt">
-                <div>{_t("Can't see what you’re looking for?")}</div>
-                <AccessibleButton kind="link" onClick={this.onExplore}>
-                    {_t("Explore all public rooms")}
-                </AccessibleButton>
-            </div>;
+        if (!this.props.isMinimized) {
+            if (this.state.isNameFiltering) {
+                explorePrompt = <div className="mx_RoomList_explorePrompt">
+                    <div>{_t("Can't see what you’re looking for?")}</div>
+                    <AccessibleButton
+                        className="mx_RoomList_explorePrompt_startChat"
+                        kind="link"
+                        onClick={this.onStartChat}
+                    >
+                        {_t("Start a new chat")}
+                    </AccessibleButton>
+                    <AccessibleButton
+                        className="mx_RoomList_explorePrompt_explore"
+                        kind="link"
+                        onClick={this.onExplore}
+                    >
+                        {_t("Explore all public rooms")}
+                    </AccessibleButton>
+                </div>;
+            } else if (Object.values(this.state.sublists).some(list => list.length > 0)) {
+                const unfilteredLists = RoomListStore.instance.unfilteredLists
+                const unfilteredRooms = unfilteredLists[DefaultTagID.Untagged] || [];
+                const unfilteredHistorical = unfilteredLists[DefaultTagID.Archived] || [];
+                // show a prompt to join/create rooms if the user is in 0 rooms and no historical
+                if (unfilteredRooms.length < 1 && unfilteredHistorical < 1) {
+                    explorePrompt = <div className="mx_RoomList_explorePrompt">
+                        <div>{_t("Use the + to make a new room or explore existing ones below")}</div>
+                        <AccessibleButton
+                            className="mx_RoomList_explorePrompt_startChat"
+                            kind="link"
+                            onClick={this.onStartChat}
+                        >
+                            {_t("Start a new chat")}
+                        </AccessibleButton>
+                        <AccessibleButton
+                            className="mx_RoomList_explorePrompt_explore"
+                            kind="link"
+                            onClick={this.onExplore}
+                        >
+                            {_t("Explore all public rooms")}
+                        </AccessibleButton>
+                    </div>;
+                }
+            }
         }
 
         const sublists = this.renderSublists();

src/components/views/rooms/RoomPreviewBar.js

@@ -284,7 +284,7 @@ export default class RoomPreviewBar extends React.Component {
                 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,
-            }
+            },
         };
     }
 
@@ -337,7 +337,7 @@ export default class RoomPreviewBar extends React.Component {
                 if (this.props.previewLoading) {
                     footer = (
                         <div>
-                            <Spinner w={20} h={20}/>
+                            <Spinner w={20} h={20} />
                             {_t("Loading room preview")}
                         </div>
                     );

src/components/views/rooms/RoomSublist.tsx

@@ -71,6 +71,7 @@ interface IProps {
     isMinimized: boolean;
     tagId: TagID;
     onResize: () => void;
+    showSkeleton?: boolean;
 
     // TODO: Don't use this. It's for community invites, and community invites shouldn't be here.
     // You should feel bad if you use this.
@@ -399,6 +400,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
         const newAlgorithm = isUnreadFirst ? ListAlgorithm.Natural : ListAlgorithm.Importance;
         await RoomListStore.instance.setListOrder(this.props.tagId, newAlgorithm);
+        this.forceUpdate(); // because if the sublist doesn't have any changes then we will miss the list order change
     };
 
     private onTagSortChanged = async (sort: SortAlgorithm) => {
@@ -876,6 +878,8 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                     </Resizable>
                 </React.Fragment>
             );
+        } else if (this.props.showSkeleton && this.state.isExpanded) {
+            content = <div className="mx_RoomSublist_skeletonUI" />;
         }
 
         return (

src/components/views/rooms/SendMessageComposer.js

@@ -42,6 +42,7 @@ import {Key} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import {Action} from "../../../dispatcher/actions";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -304,9 +305,13 @@ export default class SendMessageComposer extends React.Component {
 
         const replyToEvent = this.props.replyToEvent;
         if (shouldSend) {
+            const startTime = CountlyAnalytics.getTimestamp();
             const {roomId} = this.props.room;
             const content = createMessageContent(this.model, this.props.permalinkCreator, replyToEvent);
-            this.context.sendMessage(roomId, content);
+            // don't bother sending an empty message
+            if (!content.body.trim()) return;
+
+            const prom = this.context.sendMessage(roomId, content);
             if (replyToEvent) {
                 // Clear reply_to_event as we put the message into the queue
                 // if the send fails, retry will handle resending.
@@ -316,6 +321,7 @@ export default class SendMessageComposer extends React.Component {
                 });
             }
             dis.dispatch({action: "message_sent"});
+            CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, false, !!replyToEvent, content);
         }
 
         this.sendHistoryManager.save(this.model, replyToEvent);

src/components/views/rooms/Stickerpicker.js

@@ -272,13 +272,10 @@ export default class Stickerpicker extends React.Component {
                             userId={MatrixClientPeg.get().credentials.userId}
                             creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
                             waitForIframeLoad={true}
-                            show={true}
                             showMenubar={true}
                             onEditClick={this._launchManageIntegrations}
                             onDeleteClick={this._removeStickerpickerWidgets}
                             showTitle={false}
-                            showMinimise={true}
-                            showDelete={false}
                             showCancel={false}
                             showPopout={false}
                             onMinimiseClick={this._onHideStickersClick}

src/components/views/settings/ChangeAvatar.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import Spinner from '../elements/Spinner';
 
 export default class ChangeAvatar extends React.Component {
     static propTypes = {
@@ -58,7 +59,7 @@ export default class ChangeAvatar extends React.Component {
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps(newProps) {
+    UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line camelcase
         if (this.avatarSet) {
             // don't clobber what the user has just set
             return;
@@ -143,7 +144,9 @@ export default class ChangeAvatar extends React.Component {
         // time to propagate through to the RoomAvatar.
         if (this.props.room && !this.avatarSet) {
             const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
-            avatarImg = <RoomAvatar room={this.props.room} width={this.props.width} height={this.props.height} resizeMethod='crop' />;
+            avatarImg = <RoomAvatar
+                room={this.props.room} width={this.props.width} height={this.props.height} resizeMethod='crop'
+            />;
         } else {
             const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
             // XXX: FIXME: once we track in the JS what our own displayname is(!) then use it here rather than ?
@@ -174,9 +177,8 @@ export default class ChangeAvatar extends React.Component {
                     </div>
                 );
             case ChangeAvatar.Phases.Uploading:
-                var Loader = sdk.getComponent("elements.Spinner");
                 return (
-                    <Loader />
+                    <Spinner />
                 );
         }
     }

src/components/views/settings/DevicesPanel.js

@@ -74,7 +74,7 @@ export default class DevicesPanel extends React.Component {
     }
 
 
-    /**
+    /*
      * compare two devices, sorting from most-recently-seen to least-recently-seen
      * (and then, for stability, by device id)
      */

src/components/views/settings/EventIndexPanel.js

@@ -129,11 +129,16 @@ export default class EventIndexPanel extends React.Component {
             eventIndexingSettings = (
                 <div>
                     <div className='mx_SettingsTab_subsectionText'>
-                        {_t( "Securely cache encrypted messages locally for them " +
-                             "to appear in search results, using ")
-                        } {formatBytes(this.state.eventIndexSize, 0)}
-                        {_t( " to store messages from ")}
-                        {formatCountLong(this.state.roomCount)} {_t("rooms.")}
+                        {_t("Securely cache encrypted messages locally for them " +
+                            "to appear in search results, using %(size)s to store messages from %(rooms)s rooms.",
+                            {
+                                size: formatBytes(this.state.eventIndexSize, 0),
+                                // This drives the singular / plural string
+                                // selection for "room" / "rooms" only.
+                                count: this.state.roomCount,
+                                rooms: formatCountLong(this.state.roomCount),
+                            },
+                        )}
                     </div>
                     <div>
                         <AccessibleButton kind="primary" onClick={this._onManage}>

src/components/views/settings/IntegrationManager.js

@@ -42,6 +42,14 @@ export default class IntegrationManager extends React.Component {
         loading: false,
     };
 
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            errored: false,
+        };
+    }
+
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         document.addEventListener("keydown", this.onKeyDown);
@@ -66,6 +74,10 @@ export default class IntegrationManager extends React.Component {
         }
     };
 
+    onError = () => {
+        this.setState({ errored: true });
+    };
+
     render() {
         if (this.props.loading) {
             const Spinner = sdk.getComponent("elements.Spinner");
@@ -77,7 +89,7 @@ export default class IntegrationManager extends React.Component {
             );
         }
 
-        if (!this.props.connected) {
+        if (!this.props.connected || this.state.errored) {
             return (
                 <div className='mx_IntegrationManager_error'>
                     <h3>{_t("Cannot connect to integration manager")}</h3>
@@ -86,6 +98,6 @@ export default class IntegrationManager extends React.Component {
             );
         }
 
-        return <iframe src={this.props.url}></iframe>;
+        return <iframe src={this.props.url} onError={this.onError} />;
     }
 }

src/components/views/settings/Notifications.js

@@ -31,6 +31,7 @@ import SdkConfig from "../../../SdkConfig";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import AccessibleButton from "../elements/AccessibleButton";
 import {SettingLevel} from "../../../settings/SettingLevel";
+import {UIFeature} from "../../../settings/UIFeature";
 
 // TODO: this "view" component still has far too much application logic in it,
 // which should be factored out to other files.
@@ -94,7 +95,9 @@ export default class Notifications extends React.Component {
             phase: Notifications.phases.LOADING,
         });
 
-        MatrixClientPeg.get().setPushRuleEnabled('global', self.state.masterPushRule.kind, self.state.masterPushRule.rule_id, !checked).then(function() {
+        MatrixClientPeg.get().setPushRuleEnabled(
+            'global', self.state.masterPushRule.kind, self.state.masterPushRule.rule_id, !checked,
+        ).then(function() {
            self._refreshFromServer();
         });
     };
@@ -216,8 +219,8 @@ export default class Notifications extends React.Component {
             description: _t('Enter keywords separated by a comma:'),
             button: _t('OK'),
             value: keywords,
-            onFinished: (should_leave, newValue) => {
-                if (should_leave && newValue !== keywords) {
+            onFinished: (shouldLeave, newValue) => {
+                if (shouldLeave && newValue !== keywords) {
                     let newKeywords = newValue.split(',');
                     for (const i in newKeywords) {
                         newKeywords[i] = newKeywords[i].trim();
@@ -403,7 +406,9 @@ export default class Notifications extends React.Component {
                 // when creating the new rule.
                 // Thus, this new rule will join the 'vectorContentRules' set.
                 if (self.state.vectorContentRules.rules.length) {
-                    pushRuleVectorStateKind = PushRuleVectorState.contentRuleVectorStateKind(self.state.vectorContentRules.rules[0]);
+                    pushRuleVectorStateKind = PushRuleVectorState.contentRuleVectorStateKind(
+                        self.state.vectorContentRules.rules[0],
+                    );
                 } else {
                     // ON is default
                     pushRuleVectorStateKind = PushRuleVectorState.ON;
@@ -415,10 +420,9 @@ export default class Notifications extends React.Component {
 
                 if (vectorContentRulesPatterns.indexOf(keyword) < 0) {
                     if (self.state.vectorContentRules.vectorState !== PushRuleVectorState.OFF) {
-                        deferreds.push(cli.addPushRule
-                        ('global', 'content', keyword, {
-                           actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind),
-                           pattern: keyword,
+                        deferreds.push(cli.addPushRule('global', 'content', keyword, {
+                            actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind),
+                            pattern: keyword,
                         }));
                     } else {
                         deferreds.push(self._addDisabledPushRule('global', 'content', keyword, {
@@ -482,12 +486,14 @@ export default class Notifications extends React.Component {
 
     _refreshFromServer = () => {
         const self = this;
-        const pushRulesPromise = MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).then(function(rulesets) {
+        const pushRulesPromise = MatrixClientPeg.get().getPushRules().then(
+            self._portRulesToNewAPI,
+        ).then(function(rulesets) {
             /// XXX seriously? wtf is this?
             MatrixClientPeg.get().pushRules = rulesets;
 
             // Get homeserver default rules and triage them by categories
-            const rule_categories = {
+            const ruleCategories = {
                 // The master rule (all notifications disabling)
                 '.m.rule.master': 'master',
 
@@ -514,7 +520,7 @@ export default class Notifications extends React.Component {
             for (const kind in rulesets.global) {
                 for (let i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
                     const r = rulesets.global[kind][i];
-                    const cat = rule_categories[r.rule_id];
+                    const cat = ruleCategories[r.rule_id];
                     r.kind = kind;
 
                     if (r.rule_id[0] === '.') {
@@ -750,7 +756,7 @@ export default class Notifications extends React.Component {
         if (this.state.masterPushRule) {
             masterPushRuleDiv = <LabelledToggleSwitch value={!this.state.masterPushRule.enabled}
                                                       onChange={this.onEnableNotificationsChange}
-                                                      label={_t('Enable notifications for this account')}/>;
+                                                      label={_t('Enable notifications for this account')} />;
         }
 
         let clearNotificationsButton;
@@ -778,14 +784,14 @@ export default class Notifications extends React.Component {
 
         const emailThreepids = this.state.threepids.filter((tp) => tp.medium === "email");
         let emailNotificationsRows;
-        if (emailThreepids.length === 0) {
-            emailNotificationsRows = <div>
-                { _t('Add an email address to configure email notifications') }
-            </div>;
-        } else {
+        if (emailThreepids.length > 0) {
             emailNotificationsRows = emailThreepids.map((threePid) => this.emailNotificationsRow(
                 threePid.address, `${_t('Enable email notifications')} (${threePid.address})`,
             ));
+        } else if (SettingsStore.getValue(UIFeature.ThirdPartyID)) {
+            emailNotificationsRows = <div>
+                { _t('Add an email address to configure email notifications') }
+            </div>;
         }
 
         // Build external push rules
@@ -803,7 +809,10 @@ export default class Notifications extends React.Component {
         }
         if (externalKeywords.length) {
             externalKeywords = externalKeywords.join(", ");
-            externalRules.push(<li>{ _t('Notifications on the following keywords follow rules which can’t be displayed here:') } { externalKeywords }</li>);
+            externalRules.push(<li>
+                {_t('Notifications on the following keywords follow rules which can’t be displayed here:') }
+                { externalKeywords }
+            </li>);
         }
 
         let devicesSection;

src/components/views/settings/ProfileSettings.js

@@ -84,6 +84,9 @@ export default class ProfileSettings extends React.Component {
             }
 
             if (this.state.avatarFile) {
+                console.log(
+                    `Uploading new avatar, ${this.state.avatarFile.name} of type ${this.state.avatarFile.type},` +
+                    ` (${this.state.avatarFile.size}) bytes`);
                 const uri = await client.uploadContent(this.state.avatarFile);
                 await client.setAvatarUrl(uri);
                 newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
@@ -93,6 +96,7 @@ export default class ProfileSettings extends React.Component {
                 await client.setAvatarUrl(""); // use empty string as Synapse 500s on undefined
             }
         } catch (err) {
+            console.log("Failed to save profile", err);
             Modal.createTrackedDialog('Failed to save profile', '', ErrorDialog, {
                 title: _t("Failed to save your profile"),
                 description: ((err && err.message) ? err.message : _t("The operation could not be completed")),

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

@@ -25,6 +25,7 @@ import QuestionDialog from "../../../dialogs/QuestionDialog";
 import StyledRadioGroup from '../../../elements/StyledRadioGroup';
 import {SettingLevel} from "../../../../../settings/SettingLevel";
 import SettingsStore from "../../../../../settings/SettingsStore";
+import {UIFeature} from "../../../../../settings/UIFeature";
 
 export default class SecurityRoomSettingsTab extends React.Component {
     static propTypes = {
@@ -350,6 +351,16 @@ export default class SecurityRoomSettingsTab extends React.Component {
             />;
         }
 
+        let historySection = (<>
+            <span className='mx_SettingsTab_subheading'>{_t("Who can read history?")}</span>
+            <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
+                {this._renderHistory()}
+            </div>
+        </>);
+        if (!SettingsStore.getValue(UIFeature.RoomHistorySettings)) {
+            historySection = null;
+        }
+
         return (
             <div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
@@ -371,10 +382,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
                     {this._renderRoomAccess()}
                 </div>
 
-                <span className='mx_SettingsTab_subheading'>{_t("Who can read history?")}</span>
-                <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    {this._renderHistory()}
-                </div>
+                {historySection}
             </div>
         );
     }

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

@@ -33,6 +33,7 @@ import SecureBackupPanel from "../../SecureBackupPanel";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import {UIFeature} from "../../../../../settings/UIFeature";
 import {isE2eAdvancedPanelPossible} from "../../E2eAdvancedPanel";
+import CountlyAnalytics from "../../../../../CountlyAnalytics";
 
 export class IgnoredUser extends React.Component {
     static propTypes = {
@@ -102,6 +103,7 @@ export default class SecurityUserSettingsTab extends React.Component {
 
     _updateAnalytics = (checked) => {
         checked ? Analytics.enable() : Analytics.disable();
+        CountlyAnalytics.instance.enable(/* anonymous = */ !checked);
     };
 
     _onExportE2eKeysClicked = () => {
@@ -339,7 +341,7 @@ export default class SecurityUserSettingsTab extends React.Component {
         }
 
         let privacySection;
-        if (Analytics.canEnable()) {
+        if (Analytics.canEnable() || CountlyAnalytics.instance.canEnable()) {
             privacySection = <React.Fragment>
                 <div className="mx_SettingsTab_heading">{_t("Privacy")}</div>
                 <div className="mx_SettingsTab_section">

src/components/views/voip/CallPreview.tsx

@@ -24,7 +24,7 @@ import dis from '../../../dispatcher/dispatcher';
 import { ActionPayload } from '../../../dispatcher/payloads';
 import PersistentApp from "../elements/PersistentApp";
 import SettingsStore from "../../../settings/SettingsStore";
-import { CallState, MatrixCall } from 'matrix-js-sdk/lib/webrtc/call';
+import { CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 
 interface IProps {
 }

src/components/views/voip/CallView.tsx

@@ -15,17 +15,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import Room from 'matrix-js-sdk/src/models/room';
 import dis from '../../../dispatcher/dispatcher';
 import CallHandler from '../../../CallHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
-import VideoView from "./VideoView";
+import VideoFeed, { VideoFeedType } from "./VideoFeed";
 import RoomAvatar from "../avatars/RoomAvatar";
 import PulsedAvatar from '../avatars/PulsedAvatar';
-import { CallState, MatrixCall } from 'matrix-js-sdk/lib/webrtc/call';
+import { CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import { CallEvent } from 'matrix-js-sdk/src/webrtc/call';
 
 interface IProps {
         // js-sdk room object. If set, we will only show calls for the given
@@ -50,53 +51,104 @@ interface IProps {
 }
 
 interface IState {
-    call: any;
+    call: MatrixCall;
+    isLocalOnHold: boolean,
+}
+
+function getFullScreenElement() {
+    return (
+        document.fullscreenElement ||
+        // moz omitted because firefox supports this unprefixed now (webkit here for safari)
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement
+    );
+}
+
+function requestFullscreen(element: Element) {
+    const method = (
+        element.requestFullscreen ||
+        // moz omitted since firefox supports unprefixed now
+        element.webkitRequestFullScreen ||
+        element.msRequestFullscreen
+    );
+    if (method) method.call(element);
+}
+
+function exitFullscreen() {
+    const exitMethod = (
+        document.exitFullscreen ||
+        document.webkitExitFullscreen ||
+        document.msExitFullscreen
+    );
+    if (exitMethod) exitMethod.call(document);
 }
 
 export default class CallView extends React.Component<IProps, IState> {
-    private videoref: React.RefObject<any>;
     private dispatcherRef: string;
-    public call: any;
+    private container = createRef<HTMLDivElement>();
 
     constructor(props: IProps) {
         super(props);
 
+        const call = this.getCall();
         this.state = {
-            // the call this view is displaying (if any)
-            call: null,
-        };
+            call,
+            isLocalOnHold: call ? call.isLocalOnHold() : null,
+        }
 
-        this.videoref = createRef();
+        this.updateCallListeners(null, call);
     }
 
     public componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
-        this.showCall();
     }
 
     public componentWillUnmount() {
+        this.updateCallListeners(this.state.call, null);
         dis.unregister(this.dispatcherRef);
     }
 
     private onAction = (payload) => {
-        // don't filter out payloads for room IDs other than props.room because
-        // we may be interested in the conf 1:1 room
-        if (payload.action !== 'call_state') {
-            return;
+        switch (payload.action) {
+            case 'video_fullscreen': {
+                if (!this.container.current) {
+                    return;
+                }
+                if (payload.fullscreen) {
+                    requestFullscreen(this.container.current);
+                } else if (getFullScreenElement()) {
+                    exitFullscreen();
+                }
+                break;
+            }
+            case 'call_state': {
+                const newCall = this.getCall();
+                if (newCall !== this.state.call) {
+                    this.updateCallListeners(this.state.call, newCall);
+                    this.setState({
+                        call: newCall,
+                        isLocalOnHold: newCall ? newCall.isLocalOnHold() : null,
+                    });
+                }
+                if (!newCall && getFullScreenElement()) {
+                    exitFullscreen();
+                }
+                break;
+            }
         }
-        this.showCall();
     };
 
-    private showCall() {
+    private getCall(): MatrixCall {
         let call: MatrixCall;
 
         if (this.props.room) {
             const roomId = this.props.room.roomId;
             call = CallHandler.sharedInstance().getCallForRoom(roomId);
 
-            if (this.call) {
-                this.setState({ call: call });
-            }
+            // We don't currently show voice calls in this view when in the room:
+            // they're represented in the room status bar at the bottom instead
+            // (but this will all change with the new designs)
+            if (call && call.type == CallType.Voice) call = null;
         } else {
             call = CallHandler.sharedInstance().getAnyActiveCall();
             // Ignore calls if we can't get the room associated with them.
@@ -106,65 +158,68 @@ export default class CallView extends React.Component<IProps, IState> {
             if (MatrixClientPeg.get().getRoom(call.roomId) === null) {
                 call = null;
             }
-            this.setState({ call: call });
         }
 
-        if (call) {
-            if (this.getVideoView()) {
-                call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
-                call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
-
-                // always use a separate element for audio stream playback.
-                // this is to let us move CallView around the DOM without interrupting remote audio
-                // during playback, by having the audio rendered by a top-level <audio/> element.
-                // rather than being rendered by the main remoteVideo <video/> element.
-                call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
-            }
-        }
-        if (call && call.type === "video" && call.state !== CallState.Ended && call.state !== CallState.Ringing) {
-            this.getVideoView().getLocalVideoElement().style.display = "block";
-            this.getVideoView().getRemoteVideoElement().style.display = "block";
-        } else {
-            this.getVideoView().getLocalVideoElement().style.display = "none";
-            this.getVideoView().getRemoteVideoElement().style.display = "none";
-            dis.dispatch({action: 'video_fullscreen', fullscreen: false});
-        }
-
-        if (this.props.onResize) {
-            this.props.onResize();
-        }
+        if (call && call.state == CallState.Ended) return null;
+        return call;
     }
 
-    private getVideoView() {
-        return this.videoref.current;
+    private updateCallListeners(oldCall: MatrixCall, newCall: MatrixCall) {
+        if (oldCall === newCall) return;
+
+        if (oldCall) oldCall.removeListener(CallEvent.HoldUnhold, this.onCallHoldUnhold);
+        if (newCall) newCall.on(CallEvent.HoldUnhold, this.onCallHoldUnhold);
     }
 
+    private onCallHoldUnhold = () => {
+        this.setState({
+            isLocalOnHold: this.state.call ? this.state.call.isLocalOnHold() : null,
+        });
+    };
+
     public render() {
         let view: React.ReactNode;
-        if (this.state.call && this.state.call.type === "voice") {
-            const client = MatrixClientPeg.get();
-            const callRoom = client.getRoom(this.state.call.roomId);
 
-            view = <AccessibleButton className="mx_CallView_voice" onClick={this.props.onClick}>
-                <PulsedAvatar>
-                    <RoomAvatar
-                        room={callRoom}
-                        height={35}
-                        width={35}
+        if (this.state.call) {
+            if (this.state.call.type === "voice") {
+                const client = MatrixClientPeg.get();
+                const callRoom = client.getRoom(this.state.call.roomId);
+
+                let caption = _t("Active call");
+                if (this.state.isLocalOnHold) {
+                    // we currently have no UI for holding / unholding a call (apart from slash
+                    // commands) so we don't disintguish between when we've put the call on hold
+                    // (ie. we'd show an unhold button) and when the other side has put us on hold
+                    // (where obviously we would not show such a button).
+                    caption = _t("Call Paused");
+                }
+
+                view = <AccessibleButton className="mx_CallView_voice" onClick={this.props.onClick}>
+                    <PulsedAvatar>
+                        <RoomAvatar
+                            room={callRoom}
+                            height={35}
+                            width={35}
+                        />
+                    </PulsedAvatar>
+                    <div>
+                        <h1>{callRoom.name}</h1>
+                        <p>{ caption }</p>
+                    </div>
+                </AccessibleButton>;
+            } else {
+                // For video calls, we currently ignore the call hold state altogether
+                // (the video will just go black)
+
+                // if we're fullscreen, we don't want to set a maxHeight on the video element.
+                const maxVideoHeight = getFullScreenElement() ? null : this.props.maxVideoHeight;
+                view = <div className="mx_CallView_video" onClick={this.props.onClick}>
+                    <VideoFeed type={VideoFeedType.Remote} call={this.state.call} onResize={this.props.onResize}
+                        maxHeight={maxVideoHeight}
                     />
-                </PulsedAvatar>
-                <div>
-                    <h1>{callRoom.name}</h1>
-                    <p>{ _t("Active call") }</p>
-                </div>
-            </AccessibleButton>;
-        } else {
-            view = <VideoView
-                ref={this.videoref}
-                onClick={this.props.onClick}
-                onResize={this.props.onResize}
-                maxHeight={this.props.maxVideoHeight}
-            />;
+                    <VideoFeed type={VideoFeedType.Local} call={this.state.call} />
+                </div>;
+            }
         }
 
         let hangup: React.ReactNode;
@@ -180,10 +235,9 @@ export default class CallView extends React.Component<IProps, IState> {
             />;
         }
 
-        return <div className={this.props.className}>
+        return <div className={this.props.className} ref={this.container}>
             {view}
             {hangup}
         </div>;
     }
 }
-

src/components/views/voip/IncomingCallBox.tsx

@@ -78,7 +78,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
     private onRejectClick: React.MouseEventHandler = (e) => {
         e.stopPropagation();
         dis.dispatch({
-            action: 'hangup',
+            action: 'reject',
             room_id: this.state.incomingCall.roomId,
         });
     };

src/components/views/voip/VideoFeed.js

@@ -1,58 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-
-export default class VideoFeed extends React.Component {
-    static propTypes = {
-        // maxHeight style attribute for the video element
-        maxHeight: PropTypes.number,
-
-        // a callback which is called when the video element is resized
-        // due to a change in video metadata
-        onResize: PropTypes.func,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._vid = createRef();
-    }
-
-    componentDidMount() {
-        this._vid.current.addEventListener('resize', this.onResize);
-    }
-
-    componentWillUnmount() {
-        this._vid.current.removeEventListener('resize', this.onResize);
-    }
-
-    onResize = (e) => {
-        if (this.props.onResize) {
-            this.props.onResize(e);
-        }
-    };
-
-    render() {
-        return (
-            <video ref={this._vid} style={{maxHeight: this.props.maxHeight}}>
-            </video>
-        );
-    }
-}
-

src/components/views/voip/VideoFeed.tsx

@@ -0,0 +1,80 @@
+/*
+Copyright 2015, 2016, 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classnames from 'classnames';
+import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import React, {createRef} from 'react';
+import SettingsStore from "../../../settings/SettingsStore";
+
+export enum VideoFeedType {
+    Local,
+    Remote,
+}
+
+interface IProps {
+    call: MatrixCall,
+
+    type: VideoFeedType,
+
+    // maxHeight style attribute for the video element
+    maxHeight?: number,
+
+    // a callback which is called when the video element is resized
+    // due to a change in video metadata
+    onResize?: (e: Event) => void,
+}
+
+export default class VideoFeed extends React.Component<IProps> {
+    private vid = createRef<HTMLVideoElement>();
+
+    componentDidMount() {
+        this.vid.current.addEventListener('resize', this.onResize);
+        if (this.props.type === VideoFeedType.Local) {
+            this.props.call.setLocalVideoElement(this.vid.current);
+        } else {
+            this.props.call.setRemoteVideoElement(this.vid.current);
+        }
+    }
+
+    componentWillUnmount() {
+        this.vid.current.removeEventListener('resize', this.onResize);
+    }
+
+    onResize = (e) => {
+        if (this.props.onResize) {
+            this.props.onResize(e);
+        }
+    };
+
+    render() {
+        const videoClasses = {
+            mx_VideoFeed: true,
+            mx_VideoFeed_local: this.props.type === VideoFeedType.Local,
+            mx_VideoFeed_remote: this.props.type === VideoFeedType.Remote,
+            mx_VideoFeed_mirror: (
+                this.props.type === VideoFeedType.Local &&
+                SettingsStore.getValue('VideoView.flipVideoHorizontally')
+            ),
+        };
+
+        let videoStyle = {};
+        if (this.props.maxHeight) videoStyle = { maxHeight: this.props.maxHeight };
+
+        return <div className={classnames(videoClasses)}>
+            <video ref={this.vid} style={videoStyle}></video>
+        </div>;
+    }
+}

src/components/views/voip/VideoView.js

@@ -1,142 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, {createRef} from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import * as sdk from '../../../index';
-import dis from '../../../dispatcher/dispatcher';
-
-import SettingsStore from "../../../settings/SettingsStore";
-
-function getFullScreenElement() {
-    return (
-        document.fullscreenElement ||
-        document.mozFullScreenElement ||
-        document.webkitFullscreenElement ||
-        document.msFullscreenElement
-    );
-}
-
-export default class VideoView extends React.Component {
-    static propTypes = {
-        // maxHeight style attribute for the video element
-        maxHeight: PropTypes.number,
-
-        // a callback which is called when the user clicks on the video div
-        onClick: PropTypes.func,
-
-        // a callback which is called when the video element is resized due to
-        // a change in video metadata
-        onResize: PropTypes.func,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._local = createRef();
-        this._remote = createRef();
-    }
-
-    componentDidMount() {
-        this.dispatcherRef = dis.register(this.onAction);
-    }
-
-    componentWillUnmount() {
-        dis.unregister(this.dispatcherRef);
-    }
-
-    getRemoteVideoElement = () => {
-        return ReactDOM.findDOMNode(this._remote.current);
-    };
-
-    getRemoteAudioElement = () => {
-        // this needs to be somewhere at the top of the DOM which
-        // always exists to avoid audio interruptions.
-        // Might as well just use DOM.
-        const remoteAudioElement = document.getElementById("remoteAudio");
-        if (!remoteAudioElement) {
-            console.error("Failed to find remoteAudio element - cannot play audio!"
-                + "You need to add an <audio/> to the DOM.");
-        }
-        return remoteAudioElement;
-    };
-
-    getLocalVideoElement = () => {
-        return ReactDOM.findDOMNode(this._local.current);
-    };
-
-    setContainer = (c) => {
-        this.container = c;
-    };
-
-    onAction = (payload) => {
-        switch (payload.action) {
-            case 'video_fullscreen': {
-                if (!this.container) {
-                    return;
-                }
-                const element = this.container;
-                if (payload.fullscreen) {
-                    const requestMethod = (
-                        element.requestFullScreen ||
-                        element.webkitRequestFullScreen ||
-                        element.mozRequestFullScreen ||
-                        element.msRequestFullscreen
-                    );
-                    requestMethod.call(element);
-                } else if (getFullScreenElement()) {
-                    const exitMethod = (
-                        document.exitFullscreen ||
-                        document.mozCancelFullScreen ||
-                        document.webkitExitFullscreen ||
-                        document.msExitFullscreen
-                    );
-                    if (exitMethod) {
-                        exitMethod.call(document);
-                    }
-                }
-                break;
-            }
-        }
-    };
-
-    render() {
-        const VideoFeed = sdk.getComponent('voip.VideoFeed');
-
-        // if we're fullscreen, we don't want to set a maxHeight on the video element.
-        const maxVideoHeight = getFullScreenElement() ? null : this.props.maxHeight;
-        const localVideoFeedClasses = classNames("mx_VideoView_localVideoFeed",
-            { "mx_VideoView_localVideoFeed_flipped":
-                SettingsStore.getValue('VideoView.flipVideoHorizontally'),
-            },
-        );
-        return (
-            <div className="mx_VideoView" ref={this.setContainer} onClick={this.props.onClick}>
-                <div className="mx_VideoView_remoteVideoFeed">
-                    <VideoFeed ref={this._remote} onResize={this.props.onResize}
-                        maxHeight={maxVideoHeight} />
-                </div>
-                <div className={localVideoFeedClasses}>
-                    <VideoFeed ref={this._local} />
-                </div>
-            </div>
-        );
-    }
-}