From cee0cabd8d9b593b5f22b976489e34d1999d60ae Mon Sep 17 00:00:00 2001
From: palashb01 <palash.baderia@outlook.com>
Date: Tue, 11 Apr 2023 18:13:49 +0530
Subject: [PATCH] left_sidebar: Replace the presence dot with bot icon for
 bots.

This commit replaces the presence dot display with a bot icon
for bots in the left sidebar PM list.
---
 web/src/pm_list_data.js        | 8 ++++----
 web/styles/left_sidebar.css    | 4 ++++
 web/templates/pm_list_item.hbs | 2 ++
 web/tests/pm_list_data.test.js | 6 +++++-
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/src/pm_list_data.js b/web/src/pm_list_data.js
index aea111687e..187823019b 100644
--- a/web/src/pm_list_data.js
+++ b/web/src/pm_list_data.js
@@ -46,6 +46,7 @@ export function get_conversations() {
 
         let user_circle_class;
         let status_emoji_info;
+        let is_bot = false;
 
         if (!is_group) {
             const user_id = Number.parseInt(user_ids_string, 10);
@@ -53,10 +54,8 @@ export function get_conversations() {
             const recipient_user_obj = people.get_by_user_id(user_id);
 
             if (recipient_user_obj.is_bot) {
-                // Bots do not have status emoji, and are modeled as
-                // always present. We may want to use this space for a
-                // bot icon in the future.
-                user_circle_class = "user_circle_green";
+                // We display the bot icon rather than a user circle for bots.
+                is_bot = true;
             } else {
                 status_emoji_info = user_status.get_status_emoji(user_id);
             }
@@ -72,6 +71,7 @@ export function get_conversations() {
             status_emoji_info,
             user_circle_class,
             is_group,
+            is_bot,
         };
         display_objects.push(display_object);
     }
diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 172966d926..79d18f4cca 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -621,6 +621,10 @@ li.topic-list-item {
         position: relative;
         top: 0;
     }
+
+    .zulip-icon.zulip-icon-bot {
+        padding: 3px 0;
+    }
 }
 
 .zero-pm-unreads .pm-box,
diff --git a/web/templates/pm_list_item.hbs b/web/templates/pm_list_item.hbs
index 408d573ee2..66e41c9401 100644
--- a/web/templates/pm_list_item.hbs
+++ b/web/templates/pm_list_item.hbs
@@ -4,6 +4,8 @@
         <div class="pm_left_col">
             {{#if is_group}}
             <span class="fa fa-group"></span>
+            {{else if is_bot}}
+            <span class="zulip-icon zulip-icon-bot" aria-hidden="true"></span>
             {{else}}
             <span class="{{user_circle_class}} user_circle"></span>
             {{/if}}
diff --git a/web/tests/pm_list_data.test.js b/web/tests/pm_list_data.test.js
index 98afabdef2..b554b01a6d 100644
--- a/web/tests/pm_list_data.test.js
+++ b/web/tests/pm_list_data.test.js
@@ -97,6 +97,7 @@ test("get_conversations", ({override}) => {
 
     const expected_data = [
         {
+            is_bot: false,
             is_active: false,
             is_group: false,
             is_zero: false,
@@ -118,6 +119,7 @@ test("get_conversations", ({override}) => {
             url: "#narrow/dm/101,102-group",
             user_circle_class: undefined,
             is_group: true,
+            is_bot: false,
             status_emoji_info: undefined,
         },
     ];
@@ -155,8 +157,9 @@ test("get_conversations bot", ({override}) => {
             is_active: false,
             url: "#narrow/dm/314-Outgoing-webhook",
             status_emoji_info: undefined,
-            user_circle_class: "user_circle_green",
+            user_circle_class: "user_circle_empty",
             is_group: false,
+            is_bot: true,
         },
         {
             recipients: "Alice, Bob",
@@ -168,6 +171,7 @@ test("get_conversations bot", ({override}) => {
             user_circle_class: undefined,
             status_emoji_info: undefined,
             is_group: true,
+            is_bot: false,
         },
     ];