add icon indicators for muted and blocked contacts

css/base.css

@@ -1528,6 +1528,12 @@ ul.tabbar li.active > a:after {
   vertical-align: middle;
 }
 
+.material-icons.as-badge {
+  padding-left: 0.2rem;
+  font-size: 1.25rem;
+  color: #bbb;
+}
+
 /* Badge with a label, like [you], [muted], etc */
 .badge {
   font-family: 'Roboto Mono', Courier, monospace, sans-serif;

src/widgets/contact-badges.jsx

@@ -1,17 +1,23 @@
 import React from 'react';
 
-/* Contact's labels: [you], [muted], [blocked], etc */
+const icon_mapping = {'muted': 'notifications_off', 'banned': 'block'};
-// FIXME: this class is unused.
+
+/* Contact's labels: [you], or icons [muted], [blocked] */
 export default class ContactBadges extends React.PureComponent {
     render() {
       let badges = null;
       if (this.props.badges && this.props.badges.length > 0) {
         badges = [];
         this.props.badges.map(function(b) {
-          let style = 'badge' + (b.color ? ' ' + b.color : '');
+          if (b.icon) {
-          badges.push(<span className={style} key={b.key || b.name}>{b.name}</span>);
+            badges.push(<i className="material-icons as-badge" key={b.key || b.icon}>{icon_mapping[b.icon]}</i>);
+          } else {
+            const style = 'badge' + (b.color ? ' ' + b.color : '');
+            badges.push(<span className={style} key={b.key || b.name}>{b.name}</span>);
+          }
         });
+        return <React.Fragment>{badges}</React.Fragment>;
       }
-      return <span>{badges}</span>;
+      return null;
     }
 };

src/widgets/contact.jsx

@@ -39,8 +39,17 @@ export default class Contact extends React.Component {
     const online = this.props.now ? 'online' : 'offline';
     const avatar = this.props.avatar ? this.props.avatar : true;
     const badges = this.props.badges ? this.props.badges.slice() : [];
-    if (this.props.showMode && this.props.acs) {
+    const icon_badges = [];
-      badges.push({name: this.props.acs.getMode(), key: 'mode'});
+    if (this.props.acs) {
+      if (this.props.showMode) {
+        badges.push({name: this.props.acs.getMode(), key: 'mode'});
+      }
+      if (this.props.acs.isMuted()) {
+        icon_badges.push({icon: 'muted'});
+      }
+      if (!this.props.acs.isJoiner()) {
+        icon_badges.push({icon: 'banned'});
+      }
     }
 
     return (
@@ -58,10 +67,10 @@ export default class Contact extends React.Component {
         </div>
         <div className="text-box">
           <div><span className="contact-title">{title}</span>
-          {this.props.unread > 0 ? <UnreadBadge count={this.props.unread} /> : null}
+            <UnreadBadge count={this.props.unread} /><ContactBadges badges={icon_badges} />
           </div>
           {this.props.comment ? <div className="contact-comment">{this.props.comment}</div> : null}
-          <ContactBadges badges={badges} />
+          <span><ContactBadges badges={badges} /></span>
         </div>
         {this.props.showContextMenu ?
           <span className="menuTrigger">

umd/index.dev.js

@@ -6888,6 +6888,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 
+var icon_mapping = {
+  'muted': 'notifications_off',
+  'banned': 'block'
+};
 
 var ContactBadges = function (_React$PureComponent) {
   _inherits(ContactBadges, _React$PureComponent);
@@ -6906,15 +6910,23 @@ var ContactBadges = function (_React$PureComponent) {
       if (this.props.badges && this.props.badges.length > 0) {
         badges = [];
         this.props.badges.map(function (b) {
-          var style = 'badge' + (b.color ? ' ' + b.color : '');
+          if (b.icon) {
-          badges.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
+            badges.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
-            className: style,
+              className: "material-icons as-badge",
-            key: b.key || b.name
+              key: b.key || b.icon
-          }, b.name));
+            }, icon_mapping[b.icon]));
+          } else {
+            var style = 'badge' + (b.color ? ' ' + b.color : '');
+            badges.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
+              className: style,
+              key: b.key || b.name
+            }, b.name));
+          }
         });
+        return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, badges);
       }
 
-      return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, badges);
+      return null;
     }
   }]);
 
@@ -7180,12 +7192,27 @@ var Contact = function (_React$Component) {
       var online = this.props.now ? 'online' : 'offline';
       var avatar = this.props.avatar ? this.props.avatar : true;
       var badges = this.props.badges ? this.props.badges.slice() : [];
+      var icon_badges = [];
 
-      if (this.props.showMode && this.props.acs) {
+      if (this.props.acs) {
-        badges.push({
+        if (this.props.showMode) {
-          name: this.props.acs.getMode(),
+          badges.push({
-          key: 'mode'
+            name: this.props.acs.getMode(),
-        });
+            key: 'mode'
+          });
+        }
+
+        if (this.props.acs.isMuted()) {
+          icon_badges.push({
+            icon: 'muted'
+          });
+        }
+
+        if (!this.props.acs.isJoiner()) {
+          icon_badges.push({
+            icon: 'banned'
+          });
+        }
       }
 
       return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
@@ -7205,13 +7232,15 @@ var Contact = function (_React$Component) {
         className: "text-box"
       }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
         className: "contact-title"
-      }, title), this.props.unread > 0 ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_unread_badge_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], {
+      }, title), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_unread_badge_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], {
         count: this.props.unread
-      }) : null), this.props.comment ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
+        badges: icon_badges
+      })), this.props.comment ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
         className: "contact-comment"
-      }, this.props.comment) : null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
+      }, this.props.comment) : null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
         badges: badges
-      })), this.props.showContextMenu ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
+      }))), this.props.showContextMenu ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
         className: "menuTrigger"
       }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {
         href: "javascript:;",