From 8196e09013b825850a465fb4230ba15e9f5edeb3 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Wed, 20 Sep 2023 19:31:01 +0530
Subject: [PATCH] message_list_view: Italicize "(guest)" in recipient row.

This commit updates code to italicize "(guest)" shown for guest
users in header row. We do not italicize "(guest)" in tooltip
shown on hovering over the header row for now.

We pass the user objects to template file instead of passing
the complete string to it to handle this correctly.
---
 web/src/message_list_view.js    | 25 ++++++++++++++++++++++++-
 web/templates/recipient_row.hbs | 12 ++++++++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/web/src/message_list_view.js b/web/src/message_list_view.js
index b33c50ac49..996c2d762b 100644
--- a/web/src/message_list_view.js
+++ b/web/src/message_list_view.js
@@ -183,6 +183,28 @@ function set_topic_edit_properties(group, message) {
     }
 }
 
+function get_users_for_recipient_row(message) {
+    const user_ids = people.pm_with_user_ids(message);
+    const users = user_ids.map((user_id) => {
+        let full_name;
+        if (muted_users.is_user_muted(user_id)) {
+            full_name = $t({defaultMessage: "Muted user"});
+        } else {
+            full_name = people.get_full_name(user_id);
+        }
+        return {
+            full_name,
+            should_add_guest_user_indicator: people.should_add_guest_user_indicator(user_id),
+        };
+    });
+
+    function compare_by_name(a, b) {
+        return a.full_name < b.full_name ? -1 : a.full_name > b.full_name ? 1 : 0;
+    }
+
+    return users.sort(compare_by_name);
+}
+
 function populate_group_from_message_container(group, message_container) {
     group.is_stream = message_container.msg.is_stream;
     group.is_private = message_container.msg.is_private;
@@ -225,7 +247,8 @@ function populate_group_from_message_container(group, message_container) {
         group.all_visibility_policies = user_topics.all_visibility_policies;
     } else if (group.is_private) {
         group.pm_with_url = message_container.pm_with_url;
-        group.display_reply_to = message_store.get_pm_full_names(message_container.msg);
+        group.recipient_users = get_users_for_recipient_row(message_container.msg);
+        group.display_reply_to_for_tooltip = message_store.get_pm_full_names(message_container.msg);
     }
     group.display_recipient = message_container.msg.display_recipient;
     group.topic_links = message_container.msg.topic_links;
diff --git a/web/templates/recipient_row.hbs b/web/templates/recipient_row.hbs
index c2443defef..6e06120924 100644
--- a/web/templates/recipient_row.hbs
+++ b/web/templates/recipient_row.hbs
@@ -94,9 +94,17 @@
     <div class="message-header-contents">
         <a class="message_label_clickable narrows_by_recipient stream_label tippy-narrow-tooltip"
           href="{{pm_with_url}}"
-          data-tippy-content="{{t 'Go to direct messages with {display_reply_to}' }}">
+          data-tippy-content="{{t 'Go to direct messages with {display_reply_to_for_tooltip}' }}">
         <span class="private_message_header_icon"><i class="zulip-icon zulip-icon-user"></i></span>
-        <span class="private_message_header_name">{{t "You and {display_reply_to}" }}</span>
+        <span class="private_message_header_name">
+            {{#tr}}You and <z-user-names></z-user-names>
+            {{#*inline "z-user-names"}}
+                {{#each recipient_users}}
+                    {{full_name}}{{#if should_add_guest_user_indicator}}&nbsp;<i>({{t 'guest'}})</i>{{/if}}{{#unless @last}},{{/unless}}
+                {{/each}}
+            {{/inline}}
+            {{/tr}}
+        </span>
         </a>
         <span class="recipient_row_date {{#if date_unchanged}}recipient_row_date_unchanged{{/if}}">{{{date}}}</span>
     </div>