trusted badges work as expected

src/widgets/badge-list.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const icon_mapping = {'staff': 'verified_user'};
+
+const messages = defineMessages({
+  badge_verified: {
+    id: 'badge_verified',
+    defaultMessage: 'Verified/official',
+    description: 'Explanation of a verified account or topic badge'
+  },
+  badge_staff: {
+    id: 'badge_staff',
+    defaultMessage: 'Staff-managed',
+    description: 'Explanation of a staff-managed account or topic badge'
+  },
+  badge_danger: {
+    id: 'badge_danger',
+    defaultMessage: 'Untrustworthy',
+    description: 'Suspicious or untrustworthy account or topic badge'
+  },
+});
+
+
+/* Trusted badges with labels: verified, staff, danger */
+class BadgeList extends React.PureComponent {
+  render() {
+    const {formatMessage} = this.props.intl;
+    let badges = null;
+    if (this.props.trustedBadges && this.props.trustedBadges.length > 0) {
+      badges = [];
+      this.props.trustedBadges.map((b) => {
+        const comment = formatMessage(messages['badge_' + b]);
+        const style = 'material-icons ' + b + '-color';
+        badges.push(<div className="trusted-badge" key={b}><i className={style}>{icon_mapping[b] || b}</i> {comment}</div>);
+      });
+      return <>{badges}</>;
+    }
+    return null;
+  }
+};
+
+export default injectIntl(BadgeList);

src/widgets/contact-badges.jsx

@@ -1,24 +1,23 @@
 import React from 'react';
 
-const icon_mapping = {'muted': 'notifications_off', 'banned': 'block',
-  'verified': 'verified', 'staff': 'verified_user', 'dangerous': 'dangerous'};
+const icon_mapping = {'muted': 'notifications_off', 'banned': 'block', 'staff': 'verified_user'};
 
 /* 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) {
-          if (b.icon) {
-            badges.push(<i className="material-icons as-badge" key={b.key || b.icon}>{icon_mapping[b.icon] || 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 <>{badges}</>;
-      }
-      return null;
+  render() {
+    let badges = null;
+    if (this.props.badges && this.props.badges.length > 0) {
+      badges = [];
+      this.props.badges.map((b) => {
+        const color = (b.color ? ' ' + b.color : '');
+        if (b.icon) {
+          badges.push(<i className={'material-icons as-badge' + color} key={b.key || b.icon}>{icon_mapping[b.icon] || b.icon}</i>);
+        } else {
+          badges.push(<span className={'badge' + color} key={b.key || b.name}>{b.name}</span>);
+        }
+      });
+      return <>{badges}</>;
     }
+    return null;
+  }
 };

src/widgets/contact-list.jsx

@@ -105,9 +105,9 @@ class ContactList extends React.Component {
               isChannel={isChannel}
               onSelected={this.props.onTopicSelected}
               showContextMenu={this.props.showContextMenu}
-              isVerified={c.isVerified()}
-              isStaff={c.isStaff()}
-              isDangerous={c.isDangerous()}
+              isVerified={c.trusted && c.trusted.verified}
+              isStaff={c.trusted && c.trusted.staff}
+              isDangerous={c.trusted && c.trusted.danger}
               item={key}
               index={contactNodes.length}
               key={key} />

src/widgets/contact.jsx

@@ -66,13 +66,13 @@ class Contact extends React.Component {
     const badges = this.props.badges ? this.props.badges.slice() : [];
     const icon_badges = [];
     if (this.props.isVerified) {
-      icon_badges.push({icon: 'verified'});
+      icon_badges.push({icon: 'verified', color: 'verified-color'});
     }
     if (this.props.isStaff) {
-      icon_badges.push({icon: 'staff'});
+      icon_badges.push({icon: 'staff', color: 'staff-color'});
     }
     if (this.props.isDangerous) {
-      icon_badges.push({icon: 'dangerous'});
+      icon_badges.push({icon: 'dangerous', color: 'danger-color'});
     }
     if (this.props.acs) {
       if (this.props.showMode) {

src/widgets/side-navbar.jsx

@@ -1,12 +1,18 @@
 import React from 'react';
 
+
 import LetterTile from './letter-tile.jsx';
 import ButtonBack from './button-back.jsx';
+import ContactBadges from './contact-badges.jsx';
 import MenuContacts from './menu-contacts.jsx';
 import MenuStart from './menu-start.jsx';
 
 export default class SideNavbar extends React.PureComponent {
   render() {
+    const icon_badges = [];
+    this.props.trustedBadges.map((b) => {
+      icon_badges.push({icon: b, color: 'badge-inv'});
+    });
     return (
         <div id="side-caption-panel" className="caption-panel">
           {this.props.onCancel ? <ButtonBack onBack={this.props.onCancel} /> : null}
@@ -19,7 +25,7 @@ export default class SideNavbar extends React.PureComponent {
             </div>
             :
             null}
-          <div id="sidepanel-title" className="panel-title">{this.props.title}</div>
+          <div id="sidepanel-title" className="panel-title">{this.props.title}<ContactBadges badges={icon_badges}/></div>
           {this.props.state === 'login' ?
               <MenuStart onSignUp={this.props.onSignUp} onSettings={this.props.onSettings} /> :
             this.props.state === 'contacts' ?