recent_view: Add table header to sort by unread count.

Fixes: #22790

web/src/recent_view_ui.js

@@ -758,6 +758,20 @@ function topic_sort(a, b) {
     return sort_comparator(topic_sort_key(a), topic_sort_key(b));
 }
 
+function unread_count(conversation_data) {
+    const message = message_store.get(conversation_data.last_msg_id);
+    return message_to_conversation_unread_count(message);
+}
+
+function unread_sort(a, b) {
+    const a_unread_count = unread_count(a);
+    const b_unread_count = unread_count(b);
+    if (a_unread_count !== b_unread_count) {
+        return a_unread_count - b_unread_count;
+    }
+    return a.last_msg_id - b.last_msg_id;
+}
+
 function topic_offset_to_visible_area(topic_row) {
     const $topic_row = $(topic_row);
     if ($topic_row.length === 0) {
@@ -880,6 +894,7 @@ export function complete_rerender() {
         sort_fields: {
             stream_sort,
             topic_sort,
+            unread_sort,
             ...ListWidget.generic_sort_functions("numeric", ["last_msg_id"]),
         },
         html_selector: get_topic_row,

web/styles/recent_view.css

@@ -104,6 +104,19 @@
                 text-align: left;
             }
 
+            .unread_sort {
+                .zulip-icon-unread {
+                    position: absolute;
+                    right: 30px;
+                    top: 11px;
+                }
+
+                &::after {
+                    right: 15px;
+                    top: 7px;
+                }
+            }
+
             td {
                 border-top: 1px solid hsl(0deg 0% 87%);
             }

web/templates/recent_view_row.hbs

@@ -28,7 +28,7 @@
             {{/if}}
         </div>
     </td>
-    <td class="recent_topic_name">
+    <td class="recent_topic_name" colspan="2">
         <div class="flex_container">
             <div class="left_part recent_view_focusable line_clamp">
                 {{#if is_private}}

web/templates/recent_view_table.hbs

@@ -15,6 +15,9 @@
             <tr>
                 <th data-sort="stream_sort">{{t 'Stream' }}</th>
                 <th data-sort="topic_sort">{{t 'Topic' }}</th>
+                <th data-sort="unread_sort" class="unread_sort">
+                    <i class="zulip-icon zulip-icon-unread"></i>
+                </th>
                 <th class='participants_header'>{{t 'Participants' }}</th>
                 <th data-sort="numeric" data-sort-prop="last_msg_id" class="last_msg_time_header active descend">{{t 'Time' }}</th>
             </tr>