roster: render unread messages in tab upon reload

Also including css fixes around the unread messages indicator.

css/inverse.css

@@ -2036,7 +2036,7 @@ body {
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover {
           color: #206485; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
-          max-width: 50%;
+          max-width: 55%;
           width: auto;
           font-weight: bold; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.room-info:before {
@@ -2405,16 +2405,22 @@ body {
           #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
             width: 70%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
+          background-color: #E7A151;
           opacity: 1;
           border-radius: 10%;
           padding: 0 0.2em;
           font-size: 14px; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
           padding: 0;
           margin: 0;
           max-width: 80%;
           float: none;
           height: 30px; }
+          #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name.unread-msgs {
+            max-width: 60%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .avatar {
           float: left;
           display: inline-block;

sass/_controlbox.scss

@@ -163,7 +163,7 @@
                         }
                         &.unread-msgs {
                             .open-room {
-                                max-width: 50%;
+                                max-width: 55%;
                                 width: auto;
                                 font-weight: bold;
                             }

sass/_roster.scss

@@ -130,6 +130,7 @@
                 }
 
 				.msgs-indicator {
+                    background-color: $chat-head-color;
                     opacity: 1;
                     border-radius: 10%;
                     padding: 0 0.2em;
@@ -137,11 +138,17 @@
 				}
 
                 .contact-name {
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
                     padding: 0;
                     margin: 0;
                     max-width: 80%;
                     float: none;
                     height: $roster-item-height;
+                    &.unread-msgs {
+                        max-width: 60%;
+                    }
                 }
 
                 .avatar {

src/converse-controlbox.js

@@ -597,6 +597,7 @@
                     this.parent_el = cfg.$parent[0];
                     this.tab_el = document.createElement('li');
                     _converse.chatboxes.on('change:num_unread', this.renderTab, this);
+                    _converse.chatboxes.on('add', _.debounce(this.renderTab, 100), this);
                 },
 
                 render: function () {

src/templates/roster_item.html

@@ -4,10 +4,10 @@
     <div class="avatar avatar-{{{chat_status}}}">
         <span class="status-icon icon-{{{chat_status}}}" title="{{{desc_status}}}"></span>
     </div>
-    <span class="contact-name unread-msgs">{{{fullname}}}</span>
     {[ if (num_unread) { ]}
     <span class="msgs-indicator">{{{ num_unread }}}</span>
     {[ } ]}
+    <span class="contact-name {[ if (num_unread) { ]} unread-msgs {[ } ]}">{{{fullname}}}</span>
 </a>
 {[ if (allow_contact_removal) { ]}
 <a class="remove-xmpp-contact icon-remove" title="{{{desc_remove}}}" href="#"></a>