From 782fe316ca3390b5dd4d5bd8459429d3535e94d4 Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Tue, 5 Nov 2024 13:45:51 -0800
Subject: [PATCH] buddy_list: Support unread marker for avatar mode.

---
 web/src/buddy_data.ts          |  2 ++
 web/styles/right_sidebar.css   | 23 +++++++++++++----------
 web/templates/presence_row.hbs |  2 +-
 web/tests/activity.test.js     |  1 +
 web/tests/buddy_data.test.js   |  3 +++
 5 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/src/buddy_data.ts b/web/src/buddy_data.ts
index 8163c9e741..02b2475096 100644
--- a/web/src/buddy_data.ts
+++ b/web/src/buddy_data.ts
@@ -178,6 +178,7 @@ export type BuddyUserInfo = {
     num_unread: number;
     user_circle_class: string;
     status_text: string | undefined;
+    has_status_text: boolean;
     user_list_style: {
         COMPACT: boolean;
         WITH_STATUS: boolean;
@@ -210,6 +211,7 @@ export function info_for(user_id: number): BuddyUserInfo {
         num_unread: get_num_unread(user_id),
         user_circle_class,
         status_text,
+        has_status_text: Boolean(status_text),
         user_list_style,
         should_add_guest_user_indicator: people.should_add_guest_user_indicator(user_id),
     };
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index 8e30af3435..bb78bafe2b 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -262,12 +262,14 @@ $user_status_emoji_width: 24px;
 
     .selectable_sidebar_block {
         margin: 2px;
-        grid-template:
-            "row-content markers-and-controls" var(
-                --line-height-sidebar-row-with-avatars
-            )
-            "row-content ." auto / minmax(0, 1fr)
-            minmax(0, auto);
+    }
+
+    .unread_count:not(.hide) {
+        margin-right: 2px;
+    }
+
+    &.with_status .unread_count {
+        align-self: baseline;
     }
 }
 
@@ -285,10 +287,11 @@ $user_status_emoji_width: 24px;
 .user_sidebar_entry.with_avatar .selectable_sidebar_block {
     line-height: var(--line-height-sidebar-row-with-avatars);
     display: grid;
-    grid-template: "avatar row-content" var(--right-sidebar-avatar-width) / auto minmax(
-            0,
-            1fr
-        );
+    grid-template:
+        "avatar row-content markers-and-controls" var(
+            --right-sidebar-avatar-width
+        )
+        "avatar row-content ." auto / auto minmax(0, 1fr) minmax(0, auto);
     justify-content: flex-start;
     align-items: center;
 }
diff --git a/web/templates/presence_row.hbs b/web/templates/presence_row.hbs
index dea8aec996..3d2f4d5a69 100644
--- a/web/templates/presence_row.hbs
+++ b/web/templates/presence_row.hbs
@@ -1,4 +1,4 @@
-<li data-user-id="{{user_id}}" data-name="{{name}}" class="user_sidebar_entry {{#if user_list_style.WITH_AVATAR}}with_avatar{{/if}} {{#if is_current_user}}user_sidebar_entry_me {{/if}} narrow-filter {{#if faded}} user-fade {{/if}}">
+<li data-user-id="{{user_id}}" data-name="{{name}}" class="user_sidebar_entry {{#if user_list_style.WITH_AVATAR}}with_avatar{{/if}} {{#if has_status_text}}with_status{{/if}} {{#if is_current_user}}user_sidebar_entry_me {{/if}} narrow-filter {{#if faded}} user-fade {{/if}}">
     <div class="selectable_sidebar_block">
         {{#if user_list_style.WITH_STATUS}}
             <span class="{{user_circle_class}} user_circle"></span>
diff --git a/web/tests/activity.test.js b/web/tests/activity.test.js
index 7bc01d38b6..128cb96246 100644
--- a/web/tests/activity.test.js
+++ b/web/tests/activity.test.js
@@ -505,6 +505,7 @@ test("insert_one_user_into_empty_list", ({override, mock_template}) => {
             user_circle_class: "user_circle_green",
             status_emoji_info: undefined,
             status_text: undefined,
+            has_status_text: false,
             user_list_style: {
                 COMPACT: false,
                 WITH_STATUS: true,
diff --git a/web/tests/buddy_data.test.js b/web/tests/buddy_data.test.js
index 99a847f24e..6a4ad2c81f 100644
--- a/web/tests/buddy_data.test.js
+++ b/web/tests/buddy_data.test.js
@@ -607,6 +607,7 @@ test("get_items_for_users", ({override}) => {
             profile_picture: "/avatar/1001",
             status_emoji_info,
             status_text: undefined,
+            has_status_text: false,
             user_circle_class: "user_circle_green",
             user_id: 1001,
             user_list_style,
@@ -620,6 +621,7 @@ test("get_items_for_users", ({override}) => {
             profile_picture: "/avatar/1002",
             status_emoji_info,
             status_text: undefined,
+            has_status_text: false,
             user_circle_class: "user_circle_empty",
             user_id: 1002,
             user_list_style,
@@ -633,6 +635,7 @@ test("get_items_for_users", ({override}) => {
             profile_picture: "/avatar/1003",
             status_emoji_info,
             status_text: undefined,
+            has_status_text: false,
             user_circle_class: "user_circle_empty",
             user_id: 1003,
             user_list_style,