buddy_list: Support unread marker for avatar mode.

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),
     };

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;
 }

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>

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,

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,