Also show a hint explaining the roomchat status

css/converse.css

@@ -2375,15 +2375,16 @@
                 margin-right: 0.5em;
                 width: 0.5em;
                 height: 0.5em; }
-                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
-                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online {
+                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat {
                   background-color: green; }
                 #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
                 #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd {
                   background-color: red; }
                 #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
                 #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away {
-                  background-color: orange; }
+                  background-color: darkorange; }
                 #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
                 #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa {
                   background-color: orange; }

sass/_chatrooms.scss

@@ -144,7 +144,8 @@
                                     margin-right: 0.5em;
 									width: 0.5em;
 									height: 0.5em;
-                                    &.occupant-online {
+                                    &.occupant-online,
+                                    &.occupant-chat {
                                         background-color: green;
                                     }
                                     &.occupant-dnd {

src/converse-core.js

@@ -95,6 +95,15 @@
         'chat':         1, // We currently don't differentiate between "chat" and "online"
         'online':       1
     };
+    _converse.PRETTY_CHAT_STATUS = {
+        'offline':      'Offline',
+        'unavailable':  'Unavailable',
+        'xa':           'Extended Away',
+        'away':         'Away',
+        'dnd':          'Do not disturb',
+        'chat':         'Chattty',
+        'online':       'Online'
+    };
     _converse.ANONYMOUS  = "anonymous";
     _converse.CLOSED = 'closed';
     _converse.EXTERNAL = "external";

src/converse-muc.js

@@ -1925,11 +1925,13 @@
                 },
 
                 render: function () {
+                    var show = this.model.get('show') || 'online';
                     var new_el = tpl_occupant(
                         _.extend(
                             { 'jid': '',
-                              'show': 'online',
-                              'hint_occupant': __('Click to mention this user in your message.'),
+                              'show': show,
+                              'hint_show': _converse.PRETTY_CHAT_STATUS[show],
+                              'hint_occupant': __('Click to mention '+this.model.get('nick')+' in your message.'),
                               'desc_moderator': __('This user is a moderator.'),
                               'desc_occupant': __('This user can send messages in this room.'),
                               'desc_visitor': __('This user can NOT send messages in this room.')

src/templates/occupant.html

@@ -10,4 +10,4 @@
     {[ } ]}
     {[ if (!_.includes(["visitor", "occupant", "moderator"], role)) { ]}
        title="{{{ jid }}} {{{ hint_occupant }}}"
-    {[ } ]}><div class="occupant-status occupant-{{{show}}} circle"></div>{{{nick}}}</li>
+       {[ } ]}><div class="occupant-status occupant-{{{show}}} circle" title="{{{hint_show}}}"></div>{{{nick}}}</li>