compose: Add functions to mute/unmute recipient row.

web/src/compose_actions.ts

@@ -91,6 +91,10 @@ function hide_box(): void {
     compose_fade.clear_compose();
     $(".message_comp").hide();
     $("#compose_controls").show();
+    // Assume a muted recipient row for the next time
+    // the compose box is reopened
+    $("#compose-recipient").addClass("muted-recipient-row");
+    $("#compose").removeClass("compose-box-open");
 }
 
 function show_compose_box(opts: ComposeActionsOpts): void {
@@ -110,10 +114,15 @@ function show_compose_box(opts: ComposeActionsOpts): void {
         };
     }
     compose_recipient.update_compose_for_message_type(opts_by_message_type);
-    $("#compose").css({visibility: "visible"});
     // When changing this, edit the 42px in _maybe_autoscroll
     $(".new_message_textarea").css("min-height", "3em");
     compose_ui.set_focus(opts_by_message_type);
+    // Transitions in the recipient row of the compose box are attached
+    // to this class we add a slight delay to avoid transitions firing
+    // immediately.
+    requestAnimationFrame(() => {
+        $("#compose").addClass("compose-box-open");
+    });
 }
 
 export let clear_textarea = (): void => {
@@ -197,6 +206,7 @@ export let complete_starting_tasks = (opts: ComposeActionsOpts): void => {
     $(document).trigger(new $.Event("compose_started.zulip", opts));
     compose_recipient.update_compose_area_placeholder_text();
     compose_recipient.update_narrow_to_recipient_visibility();
+    compose_recipient.maybe_mute_recipient_row();
     // We explicitly call this function here apart from compose_setup.js
     // as this helps to show banner when responding in an interleaved view.
     // While responding, the compose box opens before fading resulting in

web/src/compose_recipient.ts

@@ -45,6 +45,22 @@ function composing_to_current_private_message_narrow(): boolean {
     return _.isEqual(narrow_state_recipient, compose_state_recipient);
 }
 
+export let maybe_mute_recipient_row = (): void => {
+    if (composing_to_current_topic_narrow() && compose_state.has_full_recipient()) {
+        $("#compose-recipient").toggleClass("muted-recipient-row", true);
+    } else {
+        $("#compose-recipient").toggleClass("muted-recipient-row", false);
+    }
+};
+
+export function rewire_maybe_mute_recipient_row(value: typeof maybe_mute_recipient_row): void {
+    maybe_mute_recipient_row = value;
+}
+
+export function unmute_recipient_row(): void {
+    $("#compose-recipient").removeClass("muted-recipient-row");
+}
+
 export let update_narrow_to_recipient_visibility = (): void => {
     const message_type = compose_state.get_message_type();
     if (message_type === "stream") {
@@ -98,6 +114,7 @@ export function update_on_recipient_change(): void {
     update_fade();
     update_narrow_to_recipient_visibility();
     compose_validate.warn_if_guest_in_dm_recipient();
+    maybe_mute_recipient_row();
     drafts.update_compose_draft_count();
     check_posting_policy_for_compose_box();
     compose_validate.validate_and_update_send_button_status();
@@ -187,6 +204,7 @@ export function update_compose_for_message_type(opts: ComposeTriggeredOptions):
     compose_banner.clear_errors();
     compose_banner.clear_warnings();
     compose_banner.clear_uploads();
+    maybe_mute_recipient_row();
 }
 
 export let on_compose_select_recipient_update = (): void => {
@@ -293,6 +311,7 @@ function on_hidden_callback(): void {
 export function handle_middle_pane_transition(): void {
     if (compose_state.composing()) {
         update_narrow_to_recipient_visibility();
+        maybe_mute_recipient_row();
     }
 }
 

web/src/compose_setup.js

@@ -598,6 +598,11 @@ export function initialize() {
         const $input = $("input#stream_message_recipient_topic");
         compose_recipient.update_topic_displayed_text($input.val(), true);
         compose_recipient.update_compose_area_placeholder_text();
+        // Once the topic input has been focused, we no longer treat
+        // the recipient row as muted, as we assume the user is
+        // doing something that requires keeping attention called
+        // to the recipient row
+        compose_recipient.unmute_recipient_row();
 
         $("input#stream_message_recipient_topic").one("blur", () => {
             compose_recipient.update_topic_displayed_text($input.val());

web/templates/compose.hbs

@@ -49,7 +49,14 @@
             <form id="send_message_form" action="/json/messages" method="post">
                 <div class="compose_table">
                     <div id="compose_top">
-                        <div id="compose-recipient">
+                        {{!-- We start with the muted-recipient-row class
+                        on the template to avoid showing the transition
+                        when the compose box first opens. Note that this
+                        class is immediately removed when it's not used,
+                        so, for example, opening the compose box from
+                        Inbox view does not cause any flash of unwanted
+                        styling. --}}
+                        <div id="compose-recipient" class="muted-recipient-row">
                             {{> dropdown_widget_wrapper
                               widget_name="compose_select_recipient"}}
                             <div class="topic-marker-container">

web/tests/compose.test.cjs

@@ -637,6 +637,7 @@ test_ui("update_fade", ({override, override_rewire}) => {
     override_rewire(compose_recipient, "update_narrow_to_recipient_visibility", () => {
         update_narrow_to_recipient_visibility_called = true;
     });
+    override_rewire(compose_recipient, "maybe_mute_recipient_row", noop);
     override_rewire(compose_validate, "validate_and_update_send_button_status", noop);
     override_rewire(drafts, "update_compose_draft_count", noop);
     override(compose_pm_pill, "get_user_ids", () => []);

web/tests/compose_actions.test.cjs

@@ -31,6 +31,8 @@ set_global("document", {
     to_$: () => $("document-stub"),
 });
 
+set_global("requestAnimationFrame", (func) => func());
+
 const autosize = noop;
 autosize.update = noop;
 mock_esm("autosize", {default: autosize});
@@ -165,6 +167,7 @@ test("start", ({override, override_rewire, mock_template}) => {
 
     override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);
     override_rewire(compose_recipient, "check_posting_policy_for_compose_box", noop);
+    override_rewire(compose_recipient, "maybe_mute_recipient_row", noop);
     override_rewire(stream_data, "can_post_messages_in_stream", () => true);
     mock_template("inline_decorated_channel_name.hbs", false, noop);
 
@@ -319,6 +322,7 @@ test("respond_to_message", ({override, override_rewire, mock_template}) => {
 
     override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);
     override_rewire(compose_recipient, "check_posting_policy_for_compose_box", noop);
+    override_rewire(compose_recipient, "maybe_mute_recipient_row", noop);
     override_private_message_recipient_ids({override});
     mock_template("inline_decorated_channel_name.hbs", false, noop);
 
@@ -374,6 +378,7 @@ test("reply_with_mention", ({override, override_rewire, mock_template}) => {
     mock_banners();
     compose_state.set_message_type("stream");
     override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);
+    override_rewire(compose_recipient, "maybe_mute_recipient_row", noop);
     override_rewire(compose_actions, "complete_starting_tasks", noop);
     override_rewire(compose_actions, "clear_textarea", noop);
     const $elem = $("#send_message_form");
@@ -436,6 +441,7 @@ test("reply_with_mention", ({override, override_rewire, mock_template}) => {
 
 test("quote_message", ({disallow, override, override_rewire}) => {
     override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);
+    override_rewire(compose_recipient, "maybe_mute_recipient_row", noop);
     override_rewire(compose_reply, "selection_within_message_id", () => undefined);
     const $elem = $("#send_message_form");
     const $textarea = $("textarea#compose-textarea");