Merge pull request #2575 from matrix-org/bwindels/customtags

Bring back custom tags, also badges on communities

src/components/views/elements/TagTile.js

@@ -23,9 +23,11 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
 import * as ContextualMenu from '../../structures/ContextualMenu';
+import * as FormattingUtils from '../../../utils/FormattingUtils';
 
 import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
+import TagOrderStore from '../../../stores/TagOrderStore';
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
@@ -168,6 +170,16 @@ export default React.createClass({
             mx_TagTile_selected: this.props.selected,
         });
 
+        const badge = TagOrderStore.getGroupBadge(this.props.tag);
+        let badgeElement;
+        if (badge && !this.state.hover) {
+            const badgeClasses = classNames({
+                "mx_TagTile_badge": true,
+                "mx_TagTile_badgeHighlight": badge.highlight,
+            });
+            badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
+        }
+
         const tip = this.state.hover ?
             <RoomTooltip className="mx_TagTile_tooltip" label={name} /> :
             <div />;
@@ -186,6 +198,7 @@ export default React.createClass({
                 />
                 { tip }
                 { contextButton }
+                { badgeElement }
             </div>
         </AccessibleButton>;
     },

src/components/views/rooms/RoomList.js

@@ -32,11 +32,12 @@ import DMRoomMap from '../../../utils/DMRoomMap';
 const Receipt = require('../../../utils/Receipt');
 import TagOrderStore from '../../../stores/TagOrderStore';
 import RoomListStore from '../../../stores/RoomListStore';
+import CustomRoomTagStore from '../../../stores/CustomRoomTagStore';
 import GroupStore from '../../../stores/GroupStore';
 import RoomSubList from '../../structures/RoomSubList';
 import ResizeHandle from '../elements/ResizeHandle';
 
-import {Resizer} from '../../../resizer'
+import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@@ -121,6 +122,7 @@ module.exports = React.createClass({
             incomingCall: null,
             selectedTags: [],
             hover: false,
+            customTags: CustomRoomTagStore.getTags(),
         };
     },
 
@@ -170,6 +172,12 @@ module.exports = React.createClass({
             this._delayedRefreshRoomList();
         });
 
+        this._customTagStoreToken = CustomRoomTagStore.addListener(() => {
+            this.setState({
+                customTags: CustomRoomTagStore.getTags(),
+            });
+        });
+
         this.refreshRoomList();
 
         // order of the sublists
@@ -266,6 +274,9 @@ module.exports = React.createClass({
         if (this._roomListStoreToken) {
             this._roomListStoreToken.remove();
         }
+        if (this._customTagStoreToken) {
+            this._customTagStoreToken.remove();
+        }
 
         // NB: GroupStore is not a Flux.Store
         if (this._groupStoreToken) {
@@ -717,7 +728,7 @@ module.exports = React.createClass({
         ];
         const tagSubLists = Object.keys(this.state.lists)
             .filter((tagName) => {
-                return !tagName.match(STANDARD_TAGS_REGEX);
+                return this.state.customTags[tagName] && !tagName.match(STANDARD_TAGS_REGEX);
             }).map((tagName) => {
                 return {
                     list: this.state.lists[tagName],