status_emoji: Show status emoji in message_body.

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

Use the status_emoji template to show the status emoji in the
message_body and also implement 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/message_events.js

@@ -148,6 +148,7 @@ run_test("update_messages", () => {
             sender_id: 32,
             sent_by_me: false,
             starred: false,
+            status_emoji_info: undefined,
             stream: denmark.name,
             stream_id: denmark.stream_id,
             topic: "lunch",

static/js/message_helper.js

@@ -5,6 +5,7 @@ import * as people from "./people";
 import * as pm_conversations from "./pm_conversations";
 import * as recent_senders from "./recent_senders";
 import * as stream_topic_history from "./stream_topic_history";
+import * as user_status from "./user_status";
 import * as util from "./util";
 
 export function process_new_message(message) {
@@ -31,6 +32,7 @@ export function process_new_message(message) {
     if (sender) {
         message.sender_full_name = sender.full_name;
         message.sender_email = sender.email;
+        message.status_emoji_info = user_status.get_status_emoji(message.sender_id);
     }
 
     // Convert topic even for PMs, as legacy code

static/js/message_live_update.js

@@ -43,3 +43,8 @@ export function update_avatar(user_id, avatar_url) {
     message_store.update_property("small_avatar_url", url, {user_id});
     rerender_messages_view_for_user(user_id);
 }
+
+export function update_user_status_emoji(user_id, status_emoji_info) {
+    message_store.update_property("status_emoji_info", status_emoji_info, {user_id});
+    rerender_messages_view_for_user(user_id);
+}

static/js/message_store.js

@@ -124,6 +124,13 @@ export function update_property(property, value, info) {
                 }
             }
             break;
+        case "status_emoji_info":
+            for (const msg of stored_messages.values()) {
+                if (msg.sender_id && msg.sender_id === info.user_id) {
+                    msg[property] = value;
+                }
+            }
+            break;
     }
 }
 

static/js/server_events_dispatch.js

@@ -23,6 +23,7 @@ import * as message_events from "./message_events";
 import * as message_flags from "./message_flags";
 import * as message_list from "./message_list";
 import * as message_lists from "./message_lists";
+import * as message_live_update from "./message_live_update";
 import * as muted_topics_ui from "./muted_topics_ui";
 import * as muted_users_ui from "./muted_users_ui";
 import * as narrow_state from "./narrow_state";
@@ -771,6 +772,10 @@ export function dispatch_normal_event(event) {
                 user_status.set_status_emoji(event);
                 activity.redraw_user(event.user_id);
                 pm_list.update_private_messages();
+                message_live_update.update_user_status_emoji(
+                    event.user_id,
+                    user_status.get_status_emoji(event.user_id),
+                );
             }
             break;
         case "realm_export":

static/templates/message_body.hbs

@@ -4,7 +4,7 @@
         {{#if include_sender}}
         <span title="{{t 'View user profile' }} (u)">
             {{> message_avatar ~}}
-            <span class="sender_name auto-select" role="button" tabindex="0">{{msg/sender_full_name}}</span>
+            <span class="sender_name auto-select" role="button" tabindex="0">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span>
             {{#if sender_is_bot}}
             <i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
             {{/if}}