Avoid excessive re-rendering of the inbox list

This listener is doing way more work than necessary to update the dom by
removing all the list items and re-creating them. This also causes the
bug where selected state is cleared when new messages arrive, not to
mention binding new event listeners without unbinding the old ones.

Fix by simply promoting an element to the top of the list when it's
active_at value changes, rather than re-rendering the whole list. This
could backfire if the value gets changed to an earlier timestamp but for
now we assume that won't happen.

// FREEBIE

js/views/conversation_list_item_view.js

@@ -8,7 +8,9 @@
     // list of conversations, showing user/group and last message sent
     Whisper.ConversationListItemView = Whisper.View.extend({
         tagName: 'div',
-        className: 'conversation-list-item contact',
+        className: function() {
+            return 'conversation-list-item contact ' + this.model.cid;
+        },
         templateName: 'conversation-preview',
         events: {
             'click': 'select'

js/views/conversation_list_view.js

@@ -15,6 +15,12 @@
             var target = $(e.target).closest('.contact');
             target.siblings().removeClass('selected');
             return false;
+        },
+        moveToTop: function(conversation) {
+            var $el = this.$('.' + conversation.cid);
+            if ($el && $el.length > 0) {
+                $el.prependTo(this.el);
+            }
         }
     });
 })();

js/views/inbox_view.js

@@ -92,7 +92,7 @@
                     collection : inboxCollection
                 }).render();
 
-                this.inboxView.listenTo(inboxCollection, 'sort', this.inboxView.render);
+                this.inboxView.listenTo(inboxCollection, 'change:active_at', this.inboxView.moveToTop);
 
                 new SocketView().render().$el.appendTo(this.$('.socket-status'));