message_view: Add resolve topic button in message recipient bar.

Now, one can (un)resolve the topic from 2 places:

1. Stream popovers.
2. Message recipient bars.

Fixes: #18988.

static/js/click_handlers.js

@@ -325,6 +325,23 @@ export function initialize() {
         row.find(".markdown_preview").show();
     });
 
+    // RESOLVED TOPICS
+    $("body").on("click", ".message_header .on_hover_topic_resolve", (e) => {
+        e.stopPropagation();
+        const recipient_row = $(e.target).closest(".recipient_row");
+        const message_id = rows.id_for_recipient_row(recipient_row);
+        const topic_name = $(e.target).attr("data-topic-name");
+        message_edit.toggle_resolve_topic(message_id, topic_name);
+    });
+
+    $("body").on("click", ".message_header .on_hover_topic_unresolve", (e) => {
+        e.stopPropagation();
+        const recipient_row = $(e.target).closest(".recipient_row");
+        const message_id = rows.id_for_recipient_row(recipient_row);
+        const topic_name = $(e.target).attr("data-topic-name");
+        message_edit.toggle_resolve_topic(message_id, topic_name);
+    });
+
     // TOPIC MUTING
     function mute_or_unmute_topic($elt, mute_topic) {
         const stream_id = Number.parseInt($elt.attr("data-stream-id"), 10);

static/js/message_list_view.js

@@ -160,6 +160,7 @@ function populate_group_from_message_container(group, message_container) {
         } else {
             group.stream_id = sub.stream_id;
         }
+        group.topic_is_resolved = group.topic.startsWith(message_edit.RESOLVED_TOPIC_PREFIX);
         group.topic_muted = muted_topics.is_topic_muted(group.stream_id, group.topic);
     } else if (group.is_private) {
         group.pm_with_url = message_container.pm_with_url;

static/styles/zulip.css

@@ -1311,6 +1311,7 @@ td.pointer {
     opacity: 0.7;
 }
 
+.on_hover_topic_unresolve,
 .on_hover_topic_unmute {
     opacity: 0.7;
 
@@ -1320,6 +1321,7 @@ td.pointer {
     }
 }
 
+.on_hover_topic_resolve,
 .on_hover_topic_mute {
     opacity: 0.2;
     &:hover {

static/templates/recipient_row.hbs

@@ -50,6 +50,12 @@
                     <span class="topic_edit_form" id="{{id}}"></span>
                 </span>
 
+                {{#if topic_is_resolved}}
+                    <i class="fa fa-check on_hover_topic_unresolve recipient_bar_icon" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mark as unresolved' }}" role="button" tabindex="0" aria-label="{{t 'Mark as unresolved' }}"></i>
+                {{else}}
+                    <i class="fa fa-check on_hover_topic_resolve recipient_bar_icon" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mark as resolved' }}" role="button" tabindex="0" aria-label="{{t 'Mark as resolved' }}"></i>
+                {{/if}}
+
                 {{#if topic_muted}}
                     <i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Unmute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
                 {{else}}