render badge on custom tag in LLP

res/css/structures/_TagPanel.scss

@@ -123,3 +123,23 @@ limitations under the License.
     padding-left: 4px;
     padding-right: 4px;
 }
+
+.mx_TagTile_avatar {
+    position: relative;
+}
+
+.mx_TagTile_badge {
+    position: absolute;
+    right: -4px;
+    top: -2px;
+    border-radius: 8px;
+    color: $accent-fg-color;
+    font-weight: 600;
+    font-size: 14px;
+    padding: 0 5px;
+    background-color: $roomtile-name-color;
+}
+
+.mx_TagTile_badgeHighlight {
+    background-color: $warning-color;
+}

src/components/structures/CustomRoomTagPanel.js

@@ -20,6 +20,7 @@ import AutoHideScrollbar from './AutoHideScrollbar';
 import sdk from '../../index';
 import dis from '../../dispatcher';
 import classNames from 'classnames';
+import * as FormattingUtils from '../../utils/FormattingUtils';
 
 
 const CustomRoomTagPanel = React.createClass({
@@ -104,6 +105,15 @@ class CustomRoomTagTile extends React.Component {
             CustomRoomTagPanel_tileSelected: tag.selected,
         });
         const name = tag.name;
+        const badge = tag.badge;
+        let badgeElement;
+        if (badge) {
+            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} /> :
@@ -116,6 +126,7 @@ class CustomRoomTagTile extends React.Component {
                             width={avatarHeight}
                             height={avatarHeight}
                         />
+                        { badgeElement }
                         { tip }
                     </div>
                 </AccessibleButton>);