Merge branch 'develop' into poljar/seshat-search-pagination

src/components/structures/HomePage.tsx

@@ -22,9 +22,10 @@ import { _t } from "../../languageHandler";
 import SdkConfig from "../../SdkConfig";
 import * as sdk from "../../index";
 import dis from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";
 
 const onClickSendDm = () => dis.dispatch({action: 'view_create_chat'});
-const onClickExplore = () => dis.dispatch({action: 'view_room_directory'});
+const onClickExplore = () => dis.fire(Action.ViewRoomDirectory);
 const onClickNewRoom = () => dis.dispatch({action: 'view_create_room'});
 
 const HomePage = () => {

src/components/structures/LeftPanel.js

@@ -26,7 +26,7 @@ import * as VectorConferenceHandler from '../../VectorConferenceHandler';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import Analytics from "../../Analytics";
-import RoomList2 from "../views/rooms/RoomList2";
+import {Action} from "../../dispatcher/actions";
 
 
 const LeftPanel = createReactClass({
@@ -198,7 +198,7 @@ const LeftPanel = createReactClass({
 
     onSearchCleared: function(source) {
         if (source === "keyboard") {
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
         }
         this.setState({searchExpanded: false});
     },
@@ -252,7 +252,7 @@ const LeftPanel = createReactClass({
         if (!this.props.collapsed) {
             exploreButton = (
                 <div className={classNames("mx_LeftPanel_explore", {"mx_LeftPanel_explore_hidden": this.state.searchExpanded})}>
-                    <AccessibleButton onClick={() => dis.dispatch({action: 'view_room_directory'})}>{_t("Explore")}</AccessibleButton>
+                    <AccessibleButton onClick={() => dis.fire(Action.ViewRoomDirectory)}>{_t("Explore")}</AccessibleButton>
                 </div>
             );
         }
@@ -274,28 +274,15 @@ const LeftPanel = createReactClass({
             breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
         }
 
-        let roomList = null;
-        if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
-            roomList = <RoomList2
-                onKeyDown={this._onKeyDown}
-                resizeNotifier={this.props.resizeNotifier}
-                collapsed={this.props.collapsed}
-                searchFilter={this.state.searchFilter}
-                ref={this.collectRoomList}
-                onFocus={this._onFocus}
-                onBlur={this._onBlur}
-            />;
-        } else {
-            roomList = <RoomList
-                onKeyDown={this._onKeyDown}
-                onFocus={this._onFocus}
-                onBlur={this._onBlur}
-                ref={this.collectRoomList}
-                resizeNotifier={this.props.resizeNotifier}
-                collapsed={this.props.collapsed}
-                searchFilter={this.state.searchFilter}
-                ConferenceHandler={VectorConferenceHandler} />;
-        }
+        const roomList = <RoomList
+            onKeyDown={this._onKeyDown}
+            onFocus={this._onFocus}
+            onBlur={this._onBlur}
+            ref={this.collectRoomList}
+            resizeNotifier={this.props.resizeNotifier}
+            collapsed={this.props.collapsed}
+            searchFilter={this.state.searchFilter}
+            ConferenceHandler={VectorConferenceHandler} />;
 
         return (
             <div className={containerClasses}>

src/components/structures/LeftPanel2.tsx

@@ -0,0 +1,166 @@
+/*
+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 TagPanel from "./TagPanel";
+import classNames from "classnames";
+import dis from "../../dispatcher/dispatcher";
+import { _t } from "../../languageHandler";
+import SearchBox from "./SearchBox";
+import RoomList2 from "../views/rooms/RoomList2";
+import { Action } from "../../dispatcher/actions";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import BaseAvatar from '../views/avatars/BaseAvatar';
+import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
+import UserMenuButton from "./UserMenuButton";
+import RoomSearch from "./RoomSearch";
+import AccessibleButton from "../views/elements/AccessibleButton";
+
+/*******************************************************************
+ *   CAUTION                                                       *
+ *******************************************************************
+ * This is a work in progress implementation and isn't complete or *
+ * even useful as a component. Please avoid using it until this    *
+ * warning disappears.                                             *
+ *******************************************************************/
+
+interface IProps {
+    // TODO: Support collapsed state
+}
+
+interface IState {
+    searchFilter: string; // TODO: Move search into room list?
+}
+
+export default class LeftPanel2 extends React.Component<IProps, IState> {
+    // TODO: Properly support TagPanel
+    // TODO: Properly support searching/filtering
+    // TODO: Properly support breadcrumbs
+    // TODO: a11y
+    // TODO: actually make this useful in general (match design proposals)
+    // TODO: Fadable support (is this still needed?)
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            searchFilter: "",
+        };
+    }
+
+    private onSearch = (term: string): void => {
+        this.setState({searchFilter: term});
+    };
+
+    private onExplore = () => {
+        dis.fire(Action.ViewRoomDirectory);
+    };
+
+    private renderHeader(): React.ReactNode {
+        // TODO: Update when profile info changes
+        // TODO: Presence
+        // TODO: Breadcrumbs toggle
+        // TODO: Menu button
+        const avatarSize = 32;
+        // TODO: Don't do this profile lookup in render()
+        const client = MatrixClientPeg.get();
+        let displayName = client.getUserId();
+        let avatarUrl: string = null;
+        const myUser = client.getUser(client.getUserId());
+        if (myUser) {
+            displayName = myUser.rawDisplayName;
+            avatarUrl = myUser.avatarUrl;
+        }
+        return (
+            <div className="mx_LeftPanel2_userHeader">
+                <div className="mx_LeftPanel2_headerRow">
+                    <span className="mx_LeftPanel2_userAvatarContainer">
+                        <BaseAvatar
+                            idName={MatrixClientPeg.get().getUserId()}
+                            name={displayName}
+                            url={avatarUrl}
+                            width={avatarSize}
+                            height={avatarSize}
+                            resizeMethod="crop"
+                            className="mx_LeftPanel2_userAvatar"
+                        />
+                    </span>
+                    <span className="mx_LeftPanel2_userName">{displayName}</span>
+                    <span className="mx_LeftPanel2_headerButtons">
+                        <UserMenuButton />
+                    </span>
+                </div>
+                <div className="mx_LeftPanel2_headerRow mx_LeftPanel2_breadcrumbsContainer">
+                    <RoomBreadcrumbs />
+                </div>
+            </div>
+        );
+    }
+
+    private renderSearchExplore(): React.ReactNode {
+        // TODO: Collapsed support
+
+        return (
+            <div className="mx_LeftPanel2_filterContainer">
+                <RoomSearch onQueryUpdate={this.onSearch} />
+                <AccessibleButton
+                    tabIndex={-1}
+                    className='mx_LeftPanel2_exploreButton'
+                    onClick={this.onExplore}
+                    alt={_t("Explore rooms")}
+                />
+            </div>
+        );
+    }
+
+    public render(): React.ReactNode {
+        const tagPanel = (
+            <div className="mx_LeftPanel2_tagPanelContainer">
+                <TagPanel/>
+            </div>
+        );
+
+        // TODO: Improve props for RoomList2
+        const roomList = <RoomList2
+            onKeyDown={() => {/*TODO*/}}
+            resizeNotifier={null}
+            collapsed={false}
+            searchFilter={this.state.searchFilter}
+            onFocus={() => {/*TODO*/}}
+            onBlur={() => {/*TODO*/}}
+        />;
+
+        // TODO: Breadcrumbs
+        // TODO: Conference handling / calls
+
+        const containerClasses = classNames({
+            "mx_LeftPanel2": true,
+        });
+
+        return (
+            <div className={containerClasses}>
+                {tagPanel}
+                <aside className="mx_LeftPanel2_roomListContainer">
+                    {this.renderHeader()}
+                    {this.renderSearchExplore()}
+                    <div className="mx_LeftPanel2_actualRoomListContainer">
+                        {roomList}
+                    </div>
+                </aside>
+            </div>
+        );
+    }
+}

src/components/structures/LoggedInView.tsx

@@ -51,6 +51,8 @@ import {
     showToast as showServerLimitToast,
     hideToast as hideServerLimitToast
 } from "../../toasts/ServerLimitToast";
+import { Action } from "../../dispatcher/actions";
+import LeftPanel2 from "./LeftPanel2";
 
 // 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.
@@ -358,7 +360,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
             // refocusing during a paste event will make the
             // paste end up in the newly focused element,
             // so dispatch synchronously before paste happens
-            dis.dispatch({action: 'focus_composer'}, true);
+            dis.fire(Action.FocusComposer, true);
         }
     };
 
@@ -450,9 +452,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
                 // composer, so CTRL+` it is
 
                 if (ctrlCmdOnly) {
-                    dis.dispatch({
-                        action: 'toggle_top_left_menu',
-                    });
+                    dis.fire(Action.ToggleUserMenu);
                     handled = true;
                 }
                 break;
@@ -508,7 +508,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
 
             if (!isClickShortcut && ev.key !== Key.TAB && !canElementReceiveInput(ev.target)) {
                 // synchronous dispatch so we focus before key generates input
-                dis.dispatch({action: 'focus_composer'}, true);
+                dis.fire(Action.FocusComposer, true);
                 ev.stopPropagation();
                 // we should *not* preventDefault() here as
                 // that would prevent typing in the now-focussed composer
@@ -667,6 +667,20 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
             bodyClasses += ' mx_MatrixChat_useCompactLayout';
         }
 
+        let leftPanel = (
+            <LeftPanel
+                resizeNotifier={this.props.resizeNotifier}
+                collapsed={this.props.collapseLhs || false}
+                disabled={this.props.leftDisabled}
+            />
+        );
+        if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
+            // TODO: Supply props like collapsed and disabled to LeftPanel2
+            leftPanel = (
+                <LeftPanel2 />
+            );
+        }
+
         return (
             <MatrixClientContext.Provider value={this._matrixClient}>
                 <div
@@ -680,11 +694,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
                     <ToastContainer />
                     <DragDropContext onDragEnd={this._onDragEnd}>
                         <div ref={this._resizeContainer} className={bodyClasses}>
-                            <LeftPanel
-                                resizeNotifier={this.props.resizeNotifier}
-                                collapsed={this.props.collapseLhs || false}
-                                disabled={this.props.leftDisabled}
-                            />
+                            { leftPanel }
                             <ResizeHandle />
                             { pageElement }
                         </div>

src/components/structures/MatrixChat.tsx

@@ -72,6 +72,7 @@ import {
     hideToast as hideAnalyticsToast
 } from "../../toasts/AnalyticsToast";
 import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
+import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -347,7 +348,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             Analytics.trackPageChange(durationMs);
         }
         if (this.focusComposer) {
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
             this.focusComposer = false;
         }
     }
@@ -604,9 +605,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.viewIndexedRoom(payload.roomIndex);
                 break;
             case Action.ViewUserSettings: {
+                const tabPayload = payload as OpenToTabPayload;
                 const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
-                Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {},
-                    /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
+                Modal.createTrackedDialog('User settings', '', UserSettingsDialog,
+                    {initialTabId: tabPayload.initialTabId},
+                    /*className=*/null, /*isPriority=*/false, /*isStatic=*/true
+                );
 
                 // View the welcome or home page if we need something to look at
                 this.viewSomethingBehindModal();
@@ -620,7 +624,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
                 break;
             }
-            case 'view_room_directory': {
+            case Action.ViewRoomDirectory: {
                 const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
                 Modal.createTrackedDialog('Room directory', '', RoomDirectory, {},
                     'mx_RoomDirectory_dialogWrapper', false, true);
@@ -1363,7 +1367,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 showNotificationsToast();
             }
 
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
             this.setState({
                 ready: true,
             });
@@ -1607,9 +1611,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 action: 'require_registration',
             });
         } else if (screen === 'directory') {
-            dis.dispatch({
-                action: 'view_room_directory',
-            });
+            dis.fire(Action.ViewRoomDirectory);
         } else if (screen === 'groups') {
             dis.dispatch({
                 action: 'view_my_groups',

src/components/structures/RoomSearch.tsx

@@ -0,0 +1,144 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import { createRef } from "react";
+import classNames from "classnames";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { _t } from "../../languageHandler";
+import { ActionPayload } from "../../dispatcher/payloads";
+import { throttle } from 'lodash';
+import { Key } from "../../Keyboard";
+import AccessibleButton from "../views/elements/AccessibleButton";
+import { Action } from "../../dispatcher/actions";
+
+/*******************************************************************
+ *   CAUTION                                                       *
+ *******************************************************************
+ * This is a work in progress implementation and isn't complete or *
+ * even useful as a component. Please avoid using it until this    *
+ * warning disappears.                                             *
+ *******************************************************************/
+
+interface IProps {
+    onQueryUpdate: (newQuery: string) => void;
+}
+
+interface IState {
+    query: string;
+    focused: boolean;
+}
+
+export default class RoomSearch extends React.PureComponent<IProps, IState> {
+    private dispatcherRef: string;
+    private inputRef: React.RefObject<HTMLInputElement> = createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            query: "",
+            focused: false,
+        };
+
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+    }
+
+    public componentWillUnmount() {
+        defaultDispatcher.unregister(this.dispatcherRef);
+    }
+
+    private onAction = (payload: ActionPayload) => {
+        if (payload.action === 'view_room' && payload.clear_search) {
+            this.clearInput();
+        } else if (payload.action === 'focus_room_filter' && this.inputRef.current) {
+            this.inputRef.current.focus();
+        }
+    };
+
+    private clearInput = () => {
+        if (!this.inputRef.current) return;
+        this.inputRef.current.value = "";
+        this.onChange();
+    };
+
+    private onChange = () => {
+        if (!this.inputRef.current) return;
+        this.setState({query: this.inputRef.current.value});
+        this.onSearchUpdated();
+    };
+
+    // it wants this at the top of the file, but we know better
+    // tslint:disable-next-line
+    private onSearchUpdated = throttle(
+        () => {
+            // We can't use the state variable because it can lag behind the input.
+            // The lag is most obvious when deleting/clearing text with the keyboard.
+            this.props.onQueryUpdate(this.inputRef.current.value);
+        }, 200, {trailing: true, leading: true},
+    );
+
+    private onFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
+        this.setState({focused: true});
+        ev.target.select();
+    };
+
+    private onBlur = () => {
+        this.setState({focused: false});
+    };
+
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        if (ev.key === Key.ESCAPE) {
+            this.clearInput();
+            defaultDispatcher.fire(Action.FocusComposer);
+        }
+    };
+
+    public render(): React.ReactNode {
+        const classes = classNames({
+            'mx_RoomSearch': true,
+            'mx_RoomSearch_expanded': this.state.query || this.state.focused,
+        });
+
+        const inputClasses = classNames({
+            'mx_RoomSearch_input': true,
+            'mx_RoomSearch_inputExpanded': this.state.query || this.state.focused,
+        });
+
+        return (
+            <div className={classes}>
+                <div className='mx_RoomSearch_icon'/>
+                <input
+                    type="text"
+                    ref={this.inputRef}
+                    className={inputClasses}
+                    value={this.state.query}
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}
+                    onChange={this.onChange}
+                    onKeyDown={this.onKeyDown}
+                    placeholder={_t("Search")}
+                    autoComplete="off"
+                />
+                <AccessibleButton
+                    tabIndex={-1}
+                    className='mx_RoomSearch_clearButton'
+                    onClick={this.clearInput}
+                />
+            </div>
+        );
+    }
+}

src/components/structures/RoomStatusBar.js

@@ -26,6 +26,7 @@ import {MatrixClientPeg} from '../../MatrixClientPeg';
 import Resend from '../../Resend';
 import dis from '../../dispatcher/dispatcher';
 import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
+import {Action} from "../../dispatcher/actions";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -127,12 +128,12 @@ export default createReactClass({
 
     _onResendAllClick: function() {
         Resend.resendUnsentEvents(this.props.room);
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     _onCancelAllClick: function() {
         Resend.cancelUnsentEvents(this.props.room);
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     _onRoomLocalEchoUpdated: function(event, room, oldEventId, oldStatus) {

src/components/structures/RoomView.js

@@ -55,6 +55,7 @@ import {haveTileForEvent} from "../views/rooms/EventTile";
 import RoomContext from "../../contexts/RoomContext";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { shieldStatusForRoom } from '../../utils/ShieldUtils';
+import {Action} from "../../dispatcher/actions";
 
 const DEBUG = false;
 let debuglog = function() {};
@@ -1161,7 +1162,7 @@ export default createReactClass({
             ev.dataTransfer.files, this.state.room.roomId, this.context,
         );
         this.setState({ draggingFile: false });
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     onDragLeaveOrEnd: function(ev) {
@@ -1367,7 +1368,7 @@ export default createReactClass({
                 event: null,
             });
         }
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     onLeaveClick: function() {
@@ -1456,9 +1457,7 @@ export default createReactClass({
         // using /leave rather than /join. In the short term though, we
         // just ignore them.
         // https://github.com/vector-im/vector-web/issues/1134
-        dis.dispatch({
-            action: 'view_room_directory',
-        });
+        dis.fire(Action.ViewRoomDirectory);
     },
 
     onSearchClick: function() {
@@ -1478,7 +1477,7 @@ export default createReactClass({
     // jump down to the bottom of this room, where new events are arriving
     jumpToLiveTimeline: function() {
         this._messagePanel.jumpToLiveTimeline();
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     // jump up to wherever our read marker is

src/components/structures/TabbedView.tsx

@@ -27,25 +27,20 @@ import { ReactNode } from "react";
  * Represents a tab for the TabbedView.
  */
 export class Tab {
-    public label: string;
-    public icon: string;
-    public body: React.ReactNode;
-
     /**
      * Creates a new tab.
-     * @param {string} tabLabel The untranslated tab label.
-     * @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
-     * @param {React.ReactNode} tabJsx The JSX for the tab container.
+     * @param {string} id The tab's ID.
+     * @param {string} label The untranslated tab label.
+     * @param {string} icon The class for the tab icon. This should be a simple mask.
+     * @param {React.ReactNode} body The JSX for the tab container.
      */
-    constructor(tabLabel: string, tabIconClass: string, tabJsx: React.ReactNode) {
-        this.label = tabLabel;
-        this.icon = tabIconClass;
-        this.body = tabJsx;
+    constructor(public id: string, public label: string, public icon: string, public body: React.ReactNode) {
     }
 }
 
 interface IProps {
     tabs: Tab[];
+    initialTabId?: string;
 }
 
 interface IState {
@@ -53,16 +48,17 @@ interface IState {
 }
 
 export default class TabbedView extends React.Component<IProps, IState> {
-    static propTypes = {
-        // The tabs to show
-        tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
-    };
-
     constructor(props: IProps) {
         super(props);
 
+        let activeTabIndex = 0;
+        if (props.initialTabId) {
+            const tabIndex = props.tabs.findIndex(t => t.id === props.initialTabId);
+            if (tabIndex >= 0) activeTabIndex = tabIndex;
+        }
+
         this.state = {
-            activeTabIndex: 0,
+            activeTabIndex,
         };
     }
 

src/components/structures/TopLeftMenuButton.js

@@ -24,6 +24,7 @@ import * as Avatar from '../../Avatar';
 import { _t } from '../../languageHandler';
 import dis from "../../dispatcher/dispatcher";
 import {ContextMenu, ContextMenuButton} from "./ContextMenu";
+import {Action} from "../../dispatcher/actions";
 
 const AVATAR_SIZE = 28;
 
@@ -75,7 +76,7 @@ export default class TopLeftMenuButton extends React.Component {
 
     onAction = (payload) => {
         // For accessibility
-        if (payload.action === "toggle_top_left_menu") {
+        if (payload.action === Action.ToggleUserMenu) {
             if (this._buttonRef) this._buttonRef.click();
         }
     };

src/components/structures/UserMenuButton.tsx

@@ -0,0 +1,270 @@
+/*
+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 {User} from "matrix-js-sdk/src/models/user";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { ActionPayload } from "../../dispatcher/payloads";
+import { Action } from "../../dispatcher/actions";
+import { createRef } from "react";
+import { _t } from "../../languageHandler";
+import {ContextMenu, 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 Modal from "../../Modal";
+import LogoutDialog from "../views/dialogs/LogoutDialog";
+import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
+import {getCustomTheme} from "../../theme";
+import {getHostingLink} from "../../utils/HostingLink";
+import AccessibleButton from "../views/elements/AccessibleButton";
+
+interface IProps {
+}
+
+interface IState {
+    user: User;
+    menuDisplayed: boolean;
+    isDarkTheme: boolean;
+}
+
+export default class UserMenuButton extends React.Component<IProps, IState> {
+    private dispatcherRef: string;
+    private themeWatcherRef: string;
+    private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            menuDisplayed: false,
+            user: MatrixClientPeg.get().getUser(MatrixClientPeg.get().getUserId()),
+            isDarkTheme: this.isUserOnDarkTheme(),
+        };
+    }
+
+    private get displayName(): string {
+        if (MatrixClientPeg.get().isGuest()) {
+            return _t("Guest");
+        } else if (this.state.user) {
+            return this.state.user.displayName;
+        } else {
+            return MatrixClientPeg.get().getUserId();
+        }
+    }
+
+    public componentDidMount() {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
+    }
+
+    public componentWillUnmount() {
+        if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef);
+        if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
+    }
+
+    private isUserOnDarkTheme(): boolean {
+        const theme = SettingsStore.getValue("theme");
+        if (theme.startsWith("custom-")) {
+            return getCustomTheme(theme.substring(0, 7)).is_dark;
+        }
+        return theme === "dark";
+    }
+
+    private onThemeChanged = () => {
+        this.setState({isDarkTheme: this.isUserOnDarkTheme()});
+    };
+
+    private onAction = (ev: ActionPayload) => {
+        if (ev.action !== Action.ToggleUserMenu) return; // not interested
+
+        // For accessibility
+        if (this.buttonRef.current) this.buttonRef.current.click();
+    };
+
+    private onOpenMenuClick = (ev: InputEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({menuDisplayed: true});
+    };
+
+    private onCloseMenu = () => {
+        this.setState({menuDisplayed: false});
+    };
+
+    private onSwitchThemeClick = () => {
+        // Disable system theme matching if the user hits this button
+        SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
+
+        const newTheme = this.state.isDarkTheme ? "light" : "dark";
+        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme);
+    };
+
+    private onSettingsOpen = (ev: React.MouseEvent, tabId: string) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        const payload: OpenToTabPayload = {action: Action.ViewUserSettings, initialTabId: tabId};
+        defaultDispatcher.dispatch(payload);
+        this.setState({menuDisplayed: false}); // also close the menu
+    };
+
+    private onShowArchived = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        // TODO: Archived room view (deferred)
+        console.log("TODO: Show archived rooms");
+    };
+
+    private onProvideFeedback = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
+        this.setState({menuDisplayed: false}); // also close the menu
+    };
+
+    private onSignOutClick = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
+        this.setState({menuDisplayed: false}); // also close the menu
+    };
+
+    public render() {
+        let contextMenu;
+        if (this.state.menuDisplayed) {
+            let hostingLink;
+            const signupLink = getHostingLink("user-context-menu");
+            if (signupLink) {
+                hostingLink = (
+                    <div className="mx_UserMenuButton_contextMenu_header">
+                        {_t(
+                            "<a>Upgrade</a> to your own domain", {},
+                            {
+                                a: sub => (
+                                    <a
+                                        href={signupLink}
+                                        target="_blank"
+                                        rel="noreferrer noopener"
+                                        tabIndex={-1}
+                                    >{sub}</a>
+                                ),
+                            },
+                        )}
+                    </div>
+                );
+            }
+
+            const elementRect = this.buttonRef.current.getBoundingClientRect();
+            contextMenu = (
+                <ContextMenu
+                    chevronFace="none"
+                    left={elementRect.left}
+                    top={elementRect.top + elementRect.height}
+                    onFinished={this.onCloseMenu}
+                >
+                    <div className="mx_UserMenuButton_contextMenu">
+                        <div className="mx_UserMenuButton_contextMenu_header">
+                            <div className="mx_UserMenuButton_contextMenu_name">
+                                <span className="mx_UserMenuButton_contextMenu_displayName">
+                                    {this.displayName}
+                                </span>
+                                <span className="mx_UserMenuButton_contextMenu_userId">
+                                    {MatrixClientPeg.get().getUserId()}
+                                </span>
+                            </div>
+                            <div
+                                className="mx_UserMenuButton_contextMenu_themeButton"
+                                onClick={this.onSwitchThemeClick}
+                                title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
+                            >
+                                <img
+                                    src={require("../../../res/img/feather-customised/sun.svg")}
+                                    alt={_t("Switch theme")}
+                                    width={16}
+                                />
+                            </div>
+                        </div>
+                        {hostingLink}
+                        <div className="mx_UserMenuButton_contextMenu_optionList">
+                            <ul>
+                                <li>
+                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}>
+                                        <img src={require("../../../res/img/feather-customised/notifications.svg")} width={16} />
+                                        <span>{_t("Notification settings")}</span>
+                                    </AccessibleButton>
+                                </li>
+                                <li>
+                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}>
+                                        <img src={require("../../../res/img/feather-customised/lock.svg")} width={16} />
+                                        <span>{_t("Security & privacy")}</span>
+                                    </AccessibleButton>
+                                </li>
+                                <li>
+                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}>
+                                        <img src={require("../../../res/img/feather-customised/settings.svg")} width={16} />
+                                        <span>{_t("All settings")}</span>
+                                    </AccessibleButton>
+                                </li>
+                                <li>
+                                    <AccessibleButton onClick={this.onShowArchived}>
+                                        <img src={require("../../../res/img/feather-customised/archive.svg")} width={16} />
+                                        <span>{_t("Archived rooms")}</span>
+                                    </AccessibleButton>
+                                </li>
+                                <li>
+                                    <AccessibleButton onClick={this.onProvideFeedback}>
+                                        <img src={require("../../../res/img/feather-customised/message-circle.svg")} width={16} />
+                                        <span>{_t("Feedback")}</span>
+                                    </AccessibleButton>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="mx_UserMenuButton_contextMenu_optionList">
+                            <ul>
+                                <li>
+                                    <AccessibleButton onClick={this.onSignOutClick}>
+                                        <img src={require("../../../res/img/feather-customised/sign-out.svg")} width={16} />
+                                        <span>{_t("Sign out")}</span>
+                                    </AccessibleButton>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </ContextMenu>
+            );
+        }
+
+        return (
+            <React.Fragment>
+                <ContextMenuButton
+                    className="mx_UserMenuButton"
+                    onClick={this.onOpenMenuClick}
+                    inputRef={this.buttonRef}
+                    label={_t("Account settings")}
+                    isExpanded={this.state.menuDisplayed}
+                >
+                    <img src={require("../../../res/img/feather-customised/more-horizontal.svg")} alt="..." width={14} />
+                </ContextMenuButton>
+                {contextMenu}
+            </React.Fragment>
+        )
+    }
+}