status_emoji: Show status emoji in single PMs in the PM list.

Previously the emoji_status set by the user would only be seen in the
buddy list, it was decided that it would be useful to show the
emoji_status in other places as well.

As such this commit uses the status_emoji template to show the status
emoji in the PM list and also implements live update behavior.

With refactor and minor edits by Yash RE.

Co-authored-by: YashRE42 <33805964+YashRE42@users.noreply.github.com>

frontend_tests/node_tests/pm_list.js

@@ -19,6 +19,12 @@ mock_esm("../../static/js/stream_popover", {
 mock_esm("../../static/js/ui", {
     get_content_element: (element) => element,
 });
+mock_esm("../../static/js/user_status", {
+    is_away: () => false,
+    get_status_emoji: () => ({
+        emoji_code: 20,
+    }),
+});
 
 const people = zrequire("people");
 const pm_conversations = zrequire("pm_conversations");
@@ -72,7 +78,7 @@ test("close", () => {
 test("build_private_messages_list", ({override}) => {
     const timestamp = 0;
     pm_conversations.recent.insert([101, 102], timestamp);
-
+    pm_conversations.recent.insert([103], timestamp);
     let num_unread_for_person = 1;
     override(unread, "num_unread_for_person", () => num_unread_for_person);
 
@@ -86,6 +92,19 @@ test("build_private_messages_list", ({override}) => {
     pm_list._build_private_messages_list();
 
     const expected_data = [
+        {
+            is_active: false,
+            is_group: false,
+            is_zero: false,
+            recipients: "Me Myself",
+            unread: 1,
+            url: "#narrow/pm-with/103-me",
+            user_circle_class: "user_circle_empty",
+            user_ids_string: "103",
+            status_emoji_info: {
+                emoji_code: 20,
+            },
+        },
         {
             recipients: "Alice, Bob",
             user_ids_string: "101,102",
@@ -95,6 +114,7 @@ test("build_private_messages_list", ({override}) => {
             url: "#narrow/pm-with/101,102-group",
             user_circle_class: undefined,
             is_group: true,
+            status_emoji_info: undefined,
         },
     ];
 
@@ -104,6 +124,8 @@ test("build_private_messages_list", ({override}) => {
     pm_list._build_private_messages_list();
     expected_data[0].unread = 0;
     expected_data[0].is_zero = true;
+    expected_data[1].unread = 0;
+    expected_data[1].is_zero = true;
     assert.deepEqual(pm_data, expected_data);
 
     pm_list._build_private_messages_list();
@@ -133,6 +155,7 @@ test("build_private_messages_list_bot", ({override}) => {
             is_zero: false,
             is_active: false,
             url: "#narrow/pm-with/314-outgoingwebhook",
+            status_emoji_info: undefined,
             user_circle_class: "user_circle_green",
             is_group: false,
         },
@@ -144,6 +167,7 @@ test("build_private_messages_list_bot", ({override}) => {
             is_active: false,
             url: "#narrow/pm-with/101,102-group",
             user_circle_class: undefined,
+            status_emoji_info: undefined,
             is_group: true,
         },
     ];

static/js/pm_list.js

@@ -10,6 +10,7 @@ import * as stream_popover from "./stream_popover";
 import * as ui from "./ui";
 import * as ui_util from "./ui_util";
 import * as unread from "./unread";
+import * as user_status from "./user_status";
 import * as vdom from "./vdom";
 
 let prior_dom;
@@ -75,6 +76,7 @@ export function _get_convos() {
         const is_active = user_ids_string === active_user_ids_string;
 
         let user_circle_class;
+        let status_emoji_info;
 
         if (!is_group) {
             const user_id = Number.parseInt(user_ids_string, 10);
@@ -83,6 +85,9 @@ export function _get_convos() {
 
             if (recipient_user_obj.is_bot) {
                 user_circle_class = "user_circle_green";
+                // bots do not have status emoji
+            } else {
+                status_emoji_info = user_status.get_status_emoji(user_id);
             }
         }
 
@@ -93,6 +98,7 @@ export function _get_convos() {
             is_zero: num_unread === 0,
             is_active,
             url: hash_util.pm_with_uri(reply_to),
+            status_emoji_info,
             user_circle_class,
             is_group,
         };

static/js/server_events_dispatch.js

@@ -32,6 +32,7 @@ import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as peer_data from "./peer_data";
 import * as people from "./people";
+import * as pm_list from "./pm_list";
 import * as reactions from "./reactions";
 import * as realm_icon from "./realm_icon";
 import * as realm_logo from "./realm_logo";
@@ -769,6 +770,7 @@ export function dispatch_normal_event(event) {
             if (event.emoji_name !== undefined) {
                 user_status.set_status_emoji(event);
                 activity.redraw_user(event.user_id);
+                pm_list.update_private_messages();
             }
             break;
         case "realm_export":

static/templates/pm_list_item.hbs

@@ -11,6 +11,7 @@
 
         <a href='{{url}}' class="conversation-partners">
             {{recipients}}
+            {{> status_emoji status_emoji_info}}
         </a>
         <span class="unread_count {{#if is_zero}}zero_count{{/if}}">
             {{unread}}