Add simple state counters to room heading

res/css/_components.scss

@@ -91,6 +91,7 @@
 @import "./views/messages/_UnknownBody.scss";
 @import "./views/rooms/_AppsDrawer.scss";
 @import "./views/rooms/_Autocomplete.scss";
+@import "./views/rooms/_AuxPanel.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_LinkPreviewWidget.scss";

res/css/views/rooms/_AuxPanel.scss

@@ -0,0 +1,48 @@
+/*
+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.
+*/
+
+.m_RoomView_auxPanel_stateViews {
+    padding-top: 3px;
+}
+
+.m_RoomView_auxPanel_stateViews_span a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.m_RoomView_auxPanel_stateViews_span[data-severity=warning] {
+    font-weight: bold;
+    color: orange;
+}
+
+.m_RoomView_auxPanel_stateViews_span[data-severity=alert] {
+    font-weight: bold;
+    color: red;
+}
+
+.m_RoomView_auxPanel_stateViews_span[data-severity=normal] {
+    font-weight: normal;
+}
+
+.m_RoomView_auxPanel_stateViews_span[data-severity=notice] {
+    font-weight: normal;
+    color: $settings-grey-fg-color;
+}
+
+.m_RoomView_auxPanel_stateViews_delim {
+    padding: 0 5px;
+    color: $settings-grey-fg-color;
+}

src/components/views/rooms/AuxPanel.js

@@ -24,6 +24,7 @@ import ObjectUtils from '../../../ObjectUtils';
 import AppsDrawer from './AppsDrawer';
 import { _t } from '../../../languageHandler';
 import classNames from 'classnames';
+import RateLimitedFunc from '../../../ratelimitedfunc';
 
 
 module.exports = React.createClass({
@@ -60,6 +61,18 @@ module.exports = React.createClass({
         hideAppsDrawer: false,
     },
 
+    componentDidMount: function() {
+        const cli = MatrixClientPeg.get();
+        cli.on("RoomState.events", this._rateLimitedUpdate);
+    },
+
+    componentWillUnmount: function() {
+        const cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener("RoomState.events", this._rateLimitedUpdate);
+        }
+    },
+
     shouldComponentUpdate: function(nextProps, nextState) {
         return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
                 !ObjectUtils.shallowEqual(this.state, nextState));
@@ -82,6 +95,11 @@ module.exports = React.createClass({
         ev.preventDefault();
     },
 
+    _rateLimitedUpdate: new RateLimitedFunc(function() {
+        /* eslint-disable babel/no-invalid-this */
+        this.forceUpdate();
+    }, 500),
+
     render: function() {
         const CallView = sdk.getComponent("voip.CallView");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
@@ -145,6 +163,60 @@ module.exports = React.createClass({
             hide={this.props.hideAppsDrawer}
         />;
 
+        let stateViews = null;
+        if (this.props.room) {
+            const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter');
+
+            let counters = [];
+
+            stateEvs.forEach((ev, idx) => {
+                const title = ev.getContent().title;
+                const value = ev.getContent().value;
+                const link = ev.getContent().link;
+                const severity = ev.getContent().severity || "normal";
+                const stateKey = ev.getStateKey();
+
+                if (title && value && severity) {
+                    let span = <span>{ title }: { value }</span>
+
+                    if (link) {
+                        span = (
+                            <a href={link} target="_blank" rel="noopener">
+                                { span }
+                            </a>
+                        );
+                    }
+
+                    span = (
+                        <span
+                            className="m_RoomView_auxPanel_stateViews_span"
+                            data-severity={severity}
+                            key={ "x-" + stateKey }
+                        >
+                            {span}
+                        </span>
+                    );
+
+                    counters.push(span);
+                    counters.push(
+                        <span
+                            className="m_RoomView_auxPanel_stateViews_delim"
+                            key={"delim" + idx}
+                        > ─ </span>
+                    );
+                }
+            });
+
+            if (counters.length > 0) {
+                counters.pop(); // remove last deliminator
+                stateViews = (
+                    <div className="m_RoomView_auxPanel_stateViews">
+                        { counters }
+                    </div>
+                );
+            }
+        }
+
         const classes = classNames({
             "mx_RoomView_auxPanel": true,
             "mx_RoomView_auxPanel_fullHeight": this.props.fullHeight,
@@ -156,6 +228,7 @@ module.exports = React.createClass({
 
         return (
             <div className={classes} style={style} >
+                { stateViews }
                 { appsDrawer }
                 { fileDropTarget }
                 { callView }