compose_box: Add button to go the narrow message is being composed to.

This'll be shown only when in a different narrow from what
you're composing to.

Takes care of updating display of the button on moving from
one narrow to another and also on changing inputs. This is
what contributes to majority of js code in this commit.

We are not displaying this for private messages since we do not
have a consistent design for both stream and private compose areas.
See https://chat.zulip.org/#narrow/stream/101-design/topic/narrow.20to.20topic.2Fpms.20when.20composing/near/1318548

Thanks to Vlad Korobov for the icon and for proposing various
designs.

static/js/compose.js

@@ -17,6 +17,7 @@ import {$t, $t_html} from "./i18n";
 import * as loading from "./loading";
 import * as markdown from "./markdown";
 import * as message_edit from "./message_edit";
+import * as narrow from "./narrow";
 import * as notifications from "./notifications";
 import {page_params} from "./page_params";
 import * as people from "./people";
@@ -103,6 +104,7 @@ export function update_fade() {
 
 function update_on_recipient_change() {
     update_fade();
+    compose_actions.update_narrow_to_recipient_visibility();
 }
 
 export function abort_xhr() {
@@ -704,6 +706,11 @@ export function initialize() {
         compose_ui.make_compose_box_full_size();
     });
 
+    $("#compose").on("click", ".narrow_to_compose_recipients", (e) => {
+        e.preventDefault();
+        narrow.to_compose_target();
+    });
+
     $("#compose").on("click", ".collapse_composebox_button", (e) => {
         e.preventDefault();
         e.stopPropagation();

static/js/compose_actions.js

@@ -28,6 +28,7 @@ import * as spectators from "./spectators";
 import * as stream_bar from "./stream_bar";
 import * as stream_data from "./stream_data";
 import * as unread_ops from "./unread_ops";
+import * as util from "./util";
 
 export function blur_compose_inputs() {
     $(".message_comp").find("input, textarea, button, #private_message_recipient").trigger("blur");
@@ -136,6 +137,31 @@ export function expand_compose_box() {
     $(".message_comp").show();
 }
 
+function composing_to_current_topic_narrow() {
+    return (
+        util.lower_same(compose_state.stream_name(), narrow_state.stream() || "") &&
+        util.lower_same(compose_state.topic(), narrow_state.topic() || "")
+    );
+}
+
+export function update_narrow_to_recipient_visibility() {
+    const message_type = compose_state.get_message_type();
+    if (message_type === "stream") {
+        const stream_name = compose_state.stream_name();
+        const stream_exists = Boolean(stream_data.get_stream_id(stream_name));
+
+        if (
+            stream_exists &&
+            !composing_to_current_topic_narrow() &&
+            !compose_state.is_topic_field_empty()
+        ) {
+            $(".narrow_to_compose_recipients").show();
+            return;
+        }
+    }
+    $(".narrow_to_compose_recipients").hide();
+}
+
 export function complete_starting_tasks(msg_type, opts) {
     // This is sort of a kitchen sink function, and it's called only
     // by compose.start() for now.  Having this as a separate function
@@ -146,6 +172,7 @@ export function complete_starting_tasks(msg_type, opts) {
     stream_bar.decorate(opts.stream, $("#stream-message .message_header_stream"), true);
     $(document).trigger(new $.Event("compose_started.zulip", opts));
     update_placeholder_text();
+    update_narrow_to_recipient_visibility();
 }
 
 export function maybe_scroll_up_selected_message() {

static/js/narrow.js

@@ -168,6 +168,12 @@ export function reset_ui_state() {
     hide_mark_as_read_turned_off_banner();
 }
 
+export function handle_middle_pane_transition() {
+    if (compose_state.composing) {
+        compose_actions.update_narrow_to_recipient_visibility();
+    }
+}
+
 export function activate(raw_operators, opts) {
     /* Main entry point for switching to a new view / message list.
        Note that for historical reasons related to the current
@@ -571,6 +577,10 @@ export function activate(raw_operators, opts) {
     typing_events.render_notifications_for_narrow();
     message_view_header.initialize();
 
+    // It is important to call this after other important updates
+    // like narrow filter and compose recipients happen.
+    handle_middle_pane_transition();
+
     msg_list.initial_core_time = new Date();
     setTimeout(() => {
         resize.resize_stream_filters_container();
@@ -1031,6 +1041,7 @@ export function deactivate(coming_from_recent_topics = false) {
     condense.condense_and_collapse($("#zhome div.message_row"));
 
     reset_ui_state();
+    handle_middle_pane_transition();
     hashchange.save_narrow();
 
     if (message_lists.current.selected_id() !== -1) {

static/js/recent_topics_ui.js

@@ -655,6 +655,7 @@ export function show() {
     narrow_state.reset_current_filter();
     narrow.set_narrow_title("Recent topics");
     message_view_header.render_title_area();
+    narrow.handle_middle_pane_transition();
 
     complete_rerender();
 }

static/js/tippyjs.js

@@ -229,6 +229,7 @@ export function initialize() {
             ".rendered_markdown .copy_codeblock",
             "#compose_top_right [data-tippy-content]",
             "#compose_top_right [data-tooltip-template-id]",
+            ".narrow_to_compose_recipients",
         ],
         appendTo: () => document.body,
         onHidden(instance) {

static/js/ui_init.js

@@ -206,6 +206,8 @@ function initialize_compose_box() {
             scroll_to_bottom_key_html: common.has_mac_keyboard()
                 ? "Fn + <span class='tooltip_right_arrow'>→</span>"
                 : "End",
+            narrow_to_compose_recipients_key_html:
+                (common.has_mac_keyboard() ? "⌘" : "Ctrl") + " + .",
         }),
     );
     $(`.enter_sends_${user_settings.enter_sends}`).show();