Reorder the chat rooms in the list based on the time of the last message

customize.dist/src/less2/include/messenger.less

@@ -58,10 +58,13 @@
         height: 100%;
         background-color: lighten(@bg-color, 10%);
         overflow-y: auto;
+        display: flex;
+        flex-flow: column;
         .cp-app-contacts-friend {
             background: rgba(0,0,0,0.1);
             padding: 5px;
             margin: 10px;
+            margin-bottom: 0;
             cursor: pointer;
             position: relative;
             height: 48px;
@@ -93,10 +96,12 @@
         .cp-app-contacts-category {
             display: flex;
             flex-flow: column;
+            flex-grow: 0;
+            flex-shrink: 0;
             .cp-app-contacts-category-title {
                 order: 1;
                 font-size: 18px;
-                margin: 0 5px;
+                margin: 0px 5px;
                 text-align: center;
                 background: rgba(0,0,0,0.1);
                 font-weight: bold;
@@ -105,6 +110,9 @@
             }
             .cp-app-contacts-category-content {
                 order: 2;
+                display: flex;
+                flex-flow: column-reverse;
+                padding-bottom: 10px;
                 &:empty {
                     display: none;
                     & ~ .cp-app-contacts-category-title {
@@ -125,12 +133,12 @@
             }
             .cp-app-contacts-category-title {
                 transition: font-size 0.2s ease-in-out 0.2s;
-                margin: 0 2px;
+                margin: 0px 2px;
                 font-size: 16px;
             }
             &:hover {
                 transition-delay: 1.5s;
-                width: 200px;
+                width: 200px !important;
                 .cp-app-contacts-category-title {
                     transition-delay: 1.5s;
                     font-size: 18px;

www/contacts/messenger-ui.js

@@ -103,6 +103,30 @@ define([
             find.inList(id).removeClass('cp-app-contacts-notify');
         };
 
+        var reorderRooms = function () {
+            var channels = Object.keys(state.channels).sort(function (a, b) {
+                var m1 = state.channels[a].messages.slice(-1)[0];
+                var m2 = state.channels[b].messages.slice(-1)[0];
+                if (!m2) { return !m1 ? 0 : 1; }
+                if (!m1) { return -1; }
+                return m1.time - m2.time;
+            });
+
+            channels.forEach(function (c, i) {
+                var m1 = state.channels[c].messages.slice(-1)[0];
+                $userlist.find(dataQuery(c)).css('order', i);
+            });
+
+            // Make sure the width is correct even if there is a scrollbar
+            var w = $userlist[0].offsetWidth - $userlist[0].clientWidth;
+            $userlist.css('width', (70 + w)+'px');
+        };
+
+        $(window).on('resize', function () {
+            var w = $userlist[0].offsetWidth - $userlist[0].clientWidth;
+            $userlist.css('width', (70 + w)+'px');
+        });
+
         var m = function (md) {
             var d = h('div.cp-app-contacts-content');
             try {
@@ -504,6 +528,7 @@ define([
                 $messagebox.scrollTop($messagebox.outerHeight());
             }
             normalizeLabels($messagebox);
+            reorderRooms();
 
             if (isActive(chanId)) {
                 channel.HEAD = message.sig;
@@ -631,6 +656,8 @@ define([
                 }
                 $parentEl.find('.cp-app-contacts-category-content').append(roomEl);
 
+                reorderRooms();
+
                 updateStatus(id);
             });
         };