Add a personal group for an all-communities state

Design is approximate and needs review, though being completed out of band.

res/css/structures/_TagPanel.scss

@@ -51,9 +51,9 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagPanel_divider {
     height: 0px;
-    width: 34px;
+    width: 90%;
-    border-bottom: 1px solid $panel-divider-color;
+    border: none;
-    display: none;
+    border-bottom: 1px solid $tagpanel-divider-color;
 }
 
 .mx_TagPanel .mx_TagPanel_scroller {
@@ -116,6 +116,10 @@ limitations under the License.
     border-radius: 0 3px 3px 0;
 }
 
+.mx_TagPanel .mx_TagTile.mx_TagTile_large.mx_TagTile_selected::before {
+    left: -10px;
+}
+
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
     filter: none;
 }

res/themes/dark/css/_dark.scss

@@ -119,6 +119,8 @@ $roomlist-bg-color: rgba(33, 38, 44, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
 
+$tagpanel-divider-color: $roomlist-header-color;
+
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: rgba(141, 151, 165, 0.2);

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -116,6 +116,8 @@ $roomlist-bg-color: $header-panel-bg-color;
 
 $roomsublist-divider-color: $primary-fg-color;
 
+$tagpanel-divider-color: $roomlist-header-color;
+
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #1A1D23;

res/themes/legacy-light/css/_legacy-light.scss

@@ -183,6 +183,8 @@ $roomlist-bg-color: $header-panel-bg-color;
 $roomlist-header-color: $primary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
 
+$tagpanel-divider-color: $roomlist-header-color;
+
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #fff;

res/themes/light/css/_light.scss

@@ -177,6 +177,8 @@ $roomlist-bg-color: rgba(245, 245, 245, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
 
+$tagpanel-divider-color: $roomlist-header-color;
+
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #FFF;

src/components/structures/TagPanel.js

@@ -29,6 +29,8 @@ import { Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
+import SettingsStore from "../../settings/SettingsStore";
+import UserTagTile from "../views/elements/UserTagTile";
 
 const TagPanel = createReactClass({
     displayName: 'TagPanel',
@@ -102,6 +104,17 @@ const TagPanel = createReactClass({
         dis.dispatch({action: 'deselect_tags'});
     },
 
+    renderGlobalIcon() {
+        if (!SettingsStore.getValue("feature_communities_v2_prototypes")) return null;
+
+        return (
+            <div>
+                <UserTagTile />
+                <hr className="mx_TagPanel_divider" />
+            </div>
+        );
+    },
+
     render() {
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -137,7 +150,6 @@ const TagPanel = createReactClass({
             <div className="mx_TagPanel_clearButton_container">
                 { clearButton }
             </div>
-            <div className="mx_TagPanel_divider" />
             <AutoHideScrollbar
                 className="mx_TagPanel_scroller"
                 // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
@@ -153,6 +165,7 @@ const TagPanel = createReactClass({
                                 className="mx_TagPanel_tagTileContainer"
                                 ref={provided.innerRef}
                             >
+                                { this.renderGlobalIcon() }
                                 { tags }
                                 <div>
                                     <ActionButton

src/components/views/elements/TagTile.js

@@ -47,6 +47,7 @@ export default createReactClass({
         contextMenuButtonRef: PropTypes.object,
         openMenu: PropTypes.func,
         menuDisplayed: PropTypes.bool,
+        selected: PropTypes.bool,
     },
 
     statics: {

src/components/views/elements/UserTagTile.tsx

@@ -0,0 +1,99 @@
+/*
+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 defaultDispatcher from "../../../dispatcher/dispatcher";
+import { OwnProfileStore } from "../../../stores/OwnProfileStore";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import * as fbEmitter from "fbemitter";
+import TagOrderStore from "../../../stores/TagOrderStore";
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
+import BaseAvatar from "../avatars/BaseAvatar";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import classNames from "classnames";
+
+interface IProps{}
+
+interface IState {
+    selected: boolean;
+}
+
+export default class UserTagTile extends React.PureComponent<IProps, IState> {
+    private tagStoreRef: fbEmitter.EventSubscription;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            selected: TagOrderStore.getSelectedTags().length === 0,
+        };
+    }
+
+    public componentDidMount() {
+        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
+        this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
+    }
+
+    public componentWillUnmount() {
+        OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
+    }
+
+    private onProfileUpdate = () => {
+        this.forceUpdate();
+    };
+
+    private onTagStoreUpdate = () => {
+        const selected = TagOrderStore.getSelectedTags().length === 0;
+        this.setState({selected});
+    };
+
+    private onTileClick = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        // Deselect all tags
+        defaultDispatcher.dispatch({action: "deselect_tags"});
+    };
+
+    public render() {
+        // XXX: We reuse TagTile classes for ease of demonstration - we should probably generify
+        // TagTile instead if we continue to use this component.
+        const avatarHeight = 36;
+        const name = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
+        const className = classNames({
+            mx_TagTile: true,
+            mx_TagTile_selected: this.state.selected,
+            mx_TagTile_large: true,
+        });
+        return (
+            <AccessibleTooltipButton
+                className={className}
+                onClick={this.onTileClick}
+                title={name}
+            >
+                <div className="mx_TagTile_avatar">
+                    <BaseAvatar
+                        name={name}
+                        idName={MatrixClientPeg.get().getUserId()}
+                        url={OwnProfileStore.instance.getHttpAvatarUrl(avatarHeight)}
+                        width={avatarHeight}
+                        height={avatarHeight}
+                    />
+                </div>
+            </AccessibleTooltipButton>
+        );
+    }
+}