Make Chats with Unread Messages Float to Top

solves #1401

Author: mariodian

js/collections/chatConversationsCl.js

@@ -9,7 +9,34 @@ module.exports = Backbone.Collection.extend({
 
   model: ChatConversationMd,
 
-  comparator: function(convo) {
-    return -convo.get('timestamp');
+  initialize: function() {
+      this.on('change:unread', function(model){
+          // Only re-sort collection if unread count was incremented
+          if (model.hasChanged('unread') && model.get('unread') > 0) {
+            this.sort();
+          }
+      });
+  },
+
+  comparator: function(a, b) {
+    // Sort by unread messages first
+    if (a.get('unread') > 0 && b.get('unread') == 0) {
+      return -1;
+    }
+    
+    if (a.get('unread') == 0 && b.get('unread') > 0) {
+      return 1;
+    }
+    
+    // then sort by timestamp
+    if (a.get('timestamp') > b.get('timestamp')) {
+      return -1;
+    }
+    
+    if (a.get('timestamp') < b.get('timestamp')) {
+      return 1;
+    }
+    
+    return 0;
   }
 });

js/views/chatVw.js

@@ -66,6 +66,20 @@ module.exports = baseVw.extend({
 
       this.setAggregateUnreadCount();
     });
+    
+    this.listenTo(this.chatConversationsCl, 'sort', (cl) => {
+      if (this.chatHeadsVw) {
+        this.chatHeadsVw.setCollection(
+          this.chatConversationsCl
+        );
+
+        this.chatHeadsVw.render();
+  
+        this.$chatHeadsContainer.animate({
+          scrollTop: 0
+        });
+      }
+    });
 
     this.listenTo(this.chatConversationsCl, 'add remove', (md, cl, opts) => {
       if (opts.add) {
@@ -114,8 +128,8 @@ module.exports = baseVw.extend({
         filteredMd && filteredMd.set(md.attributes);
       }
 
-      md.hasChanged('unread') && this.setAggregateUnreadCount();          
-    });      
+      md.hasChanged('unread') && this.setAggregateUnreadCount();
+    });
   },
 
   setAggregateUnreadCount: function() {