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

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

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,

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

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