From aaf3369d394acd893e73f43b50d5e13d81001e80 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 13 Sep 2023 12:52:55 +0000
Subject: [PATCH] recent_view: Add table header to sort by unread count.

Fixes: #22790
---
 web/shared/icons/unread.svg         | Bin 0 -> 552 bytes
 web/src/recent_view_ui.js           |  15 +++++++++++++++
 web/styles/recent_view.css          |  13 +++++++++++++
 web/templates/recent_view_row.hbs   |   2 +-
 web/templates/recent_view_table.hbs |   3 +++
 5 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 web/shared/icons/unread.svg

diff --git a/web/shared/icons/unread.svg b/web/shared/icons/unread.svg
new file mode 100644
index 0000000000000000000000000000000000000000..99be0268baea5ff8564a5462f002d888cc12249c
GIT binary patch
literal 552
zcmYLHL2kk@5d6w24{*HewY{!@Lw(5st~qe4)CwxK1r<bie#a1~9BFsrneoJ%#p$x6
z>-X2sY1!@1=i^J?Pt)Y4;10jLUcC1`7#&?cKc?5ib=i6HB#Nh7Esk&JJ-six4JXGG
zDvA%P6kL$NOq|fBm}6+IVxQCn70tkRs=Abum4=z(pe{0NTC+Hx7_Zr-Bx}x&eKA5&
ztO^`M3cx9u8L@$$3mItH;BK%L16D~9de~(K561^vD}=(a=*VRdKbo^ridFHq;E<IR
zV<zC1o(c(5slqM%9k$r*yqPFyZyuxgD$<lON`UTBn}zTYsyNl0K>_~fp&PXd?rYwi
zYapzl-OhFc1;ZSfa5U7I0s;k&t%X=Awmk!$N%#b&T)EtM)Gp@9L5qpl)8j#EF^RVr
MZ{OyNf*)Y@2TH|s{{R30

literal 0
HcmV?d00001

diff --git a/web/src/recent_view_ui.js b/web/src/recent_view_ui.js
index 7af07ccd2e..da9d6bbc85 100644
--- a/web/src/recent_view_ui.js
+++ b/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,
diff --git a/web/styles/recent_view.css b/web/styles/recent_view.css
index 8750189f06..02d36d2b92 100644
--- a/web/styles/recent_view.css
+++ b/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%);
             }
diff --git a/web/templates/recent_view_row.hbs b/web/templates/recent_view_row.hbs
index ca61fa598e..cabe6fdbb8 100644
--- a/web/templates/recent_view_row.hbs
+++ b/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}}
diff --git a/web/templates/recent_view_table.hbs b/web/templates/recent_view_table.hbs
index 2762b11bc9..e89189b704 100644
--- a/web/templates/recent_view_table.hbs
+++ b/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>