recent_topics: Add functionality to sort rows via header.

Add custom sorting for stream and topic headers.

static/js/recent_topics.js

@@ -249,6 +249,29 @@ exports.update_filters_view = function () {
     topics_widget.hard_redraw();
 };
 
+
+function stream_sort(a, b) {
+    const a_stream = message_store.get(a.last_msg_id).stream;
+    const b_stream = message_store.get(b.last_msg_id).stream;
+    if (a_stream > b_stream) {
+        return 1;
+    } else if (a_stream === b_stream) {
+        return 0;
+    }
+    return -1;
+}
+
+function topic_sort(a, b) {
+    const a_topic = message_store.get(a.last_msg_id).topic;
+    const b_topic = message_store.get(b.last_msg_id).topic;
+    if (a_topic > b_topic) {
+        return 1;
+    } else if (a_topic === b_topic) {
+        return 0;
+    }
+    return -1;
+}
+
 exports.complete_rerender = function () {
     if (!overlays.recent_topics_open()) {
         return false;
@@ -272,6 +295,7 @@ exports.complete_rerender = function () {
 
     topics_widget = list_render.create(container, mapped_topic_values, {
         name: "recent_topics_table",
+        parent_container: $("#recent_topics_table"),
         modifier: function (item) {
             return render_recent_topic_row(format_topic(item));
         },
@@ -282,6 +306,10 @@ exports.complete_rerender = function () {
                 return !is_topic_hidden(topic_data);
             },
         },
+        sort_fields: {
+            stream_sort: stream_sort,
+            topic_sort: topic_sort,
+        },
         html_selector: get_topic_row,
     });
 };

static/styles/recent_topics.scss

@@ -76,8 +76,6 @@
             position: sticky;
             top: 0;
             z-index: 1000;
-            background-color: hsl(0, 0%, 27%);
-            color: hsl(0, 0%, 100%);
         }
 
         #recent_topics_filter_buttons {
@@ -151,5 +149,42 @@
         .recent_avatars_others {
             background-color: hsl(205.2, 76.5%, 50%);
         }
+
+        thead th {
+            background-color: inherit;
+            color: inherit;
+            border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important;
+            border-bottom: 1px solid hsla(0, 0%, 0%, 0.2) !important;
+
+            &.active::after,
+            &[data-sort]:hover::after {
+                content: " \f0d8";
+                white-space: pre;
+                display: inline-block;
+                position: absolute;
+                padding-top: 3px;
+                font: normal normal normal 12px/1 FontAwesome;
+                font-size: inherit;
+            }
+
+            &.active {
+                opacity: 1;
+                transition: opacity 100ms ease-out;
+
+                &.descend::after {
+                    content: " \f0d7";
+                }
+            }
+
+            &[data-sort]:hover {
+                cursor: pointer;
+                background-color: hsla(0, 0%, 0%, 0.05);
+                transition: background-color 100ms ease-in-out;
+
+                &:not(.active)::after {
+                    opacity: 0.3;
+                }
+            }
+        }
     }
 }

static/templates/recent_topics_table.hbs

@@ -11,11 +11,11 @@
     <table class="table table-responsive table-hover">
         <thead>
             <tr>
-                <th>{{t 'Stream' }}</th>
-                <th>{{t 'Topic' }}</th>
+                <th data-sort="stream_sort">{{t 'Stream' }}</th>
+                <th data-sort="topic_sort">{{t 'Topic' }}</th>
                 <th>{{t 'Actions' }}</th>
                 <th>{{t 'Participants' }}</th>
-                <th>{{t 'Last message' }}</th>
+                <th data-sort="numeric" data-sort-prop="last_msg_id" class="active descend">{{t 'Last message' }}</th>
             </tr>
         </thead>
         <tbody>