compose: Offer narrow to compose target button for private messages.

We already offer this for stream messages, but had been blocked on
adding it for private messages for visual design reasons. The dark
theme had a natural place to put this, since it had a box around the
private message recipient box; but the light theme didn't.

We add a border to the light theme private message recipient box to
allow us to add the same button to private messages, and implement
that button.

Fixes #21962.

frontend_tests/node_tests/compose_state.js

@@ -21,10 +21,29 @@ run_test("private_message_recipient", ({override}) => {
     assert.equal(compose_state.private_message_recipient(), "fred@fred.org");
 });
 
-run_test("is_topic_field_empty", () => {
+run_test("has_full_recipient", ({override}) => {
+    let emails;
+    override(compose_pm_pill, "set_from_emails", (value) => {
+        emails = value;
+    });
+
+    override(compose_pm_pill, "get_emails", () => emails);
+
+    compose_state.set_message_type("stream");
+    compose_state.stream_name("");
     compose_state.topic("");
-    assert.equal(compose_state.is_topic_field_empty(), true);
+    assert.equal(compose_state.has_full_recipient(), false);
 
     compose_state.topic("foo");
-    assert.equal(compose_state.is_topic_field_empty(), false);
+    assert.equal(compose_state.has_full_recipient(), false);
+
+    compose_state.stream_name("bar");
+    assert.equal(compose_state.has_full_recipient(), true);
+
+    compose_state.set_message_type("private");
+    compose_state.private_message_recipient("");
+    assert.equal(compose_state.has_full_recipient(), false);
+
+    compose_state.private_message_recipient("foo@zulip.com");
+    assert.equal(compose_state.has_full_recipient(), true);
 });

frontend_tests/node_tests/input_pill.js

@@ -500,6 +500,7 @@ run_test("exit button on pill", ({mock_template}) => {
         $(html)[0] = `<pill-stub ${data.display_value}>`;
         return html;
     });
+    $(".narrow_to_compose_recipients").toggleClass = noop;
 
     const info = set_up();
 

static/js/compose.js

@@ -92,7 +92,7 @@ export function clear_preview_area() {
     autosize.update($("#compose-textarea"));
 }
 
-export function update_fade() {
+function update_fade() {
     if (!compose_state.composing()) {
         return;
     }
@@ -103,7 +103,7 @@ export function update_fade() {
     compose_fade.update_all();
 }
 
-function update_on_recipient_change() {
+export function update_on_recipient_change() {
     update_fade();
     compose_actions.update_narrow_to_recipient_visibility();
 }

static/js/compose_actions.js

@@ -1,5 +1,6 @@
 import autosize from "autosize";
 import $ from "jquery";
+import _ from "lodash";
 
 import * as fenced_code from "../shared/js/fenced_code";
 
@@ -141,6 +142,25 @@ function composing_to_current_topic_narrow() {
     );
 }
 
+function composing_to_current_private_message_narrow() {
+    const compose_state_recipient = compose_state.private_message_recipient();
+    const narrow_state_recipient = narrow_state.pm_emails_string();
+    return (
+        compose_state_recipient &&
+        narrow_state_recipient &&
+        _.isEqual(
+            compose_state_recipient
+                .split(",")
+                .map((s) => s.trim())
+                .sort(),
+            narrow_state_recipient
+                .split(",")
+                .map((s) => s.trim())
+                .sort(),
+        )
+    );
+}
+
 export function update_narrow_to_recipient_visibility() {
     const message_type = compose_state.get_message_type();
     if (message_type === "stream") {
@@ -150,13 +170,23 @@ export function update_narrow_to_recipient_visibility() {
         if (
             stream_exists &&
             !composing_to_current_topic_narrow() &&
-            !compose_state.is_topic_field_empty()
+            compose_state.has_full_recipient()
         ) {
-            $(".narrow_to_compose_recipients").show();
+            $(".narrow_to_compose_recipients").toggleClass("invisible", false);
+            return;
+        }
+    } else if (message_type === "private") {
+        const recipients = compose_state.private_message_recipient();
+        if (
+            recipients &&
+            !composing_to_current_private_message_narrow() &&
+            compose_state.has_full_recipient()
+        ) {
+            $(".narrow_to_compose_recipients").toggleClass("invisible", false);
             return;
         }
     }
-    $(".narrow_to_compose_recipients").hide();
+    $(".narrow_to_compose_recipients").toggleClass("invisible", true);
 }
 
 export function complete_starting_tasks(msg_type, opts) {

static/js/compose_state.js

@@ -89,6 +89,9 @@ export function has_message_content() {
     return message_content() !== "";
 }
 
-export function is_topic_field_empty() {
-    return topic() === "";
+export function has_full_recipient() {
+    if (message_type === "stream") {
+        return stream_name() !== "" && topic() !== "";
+    }
+    return private_message_recipient() !== "";
 }

static/js/input_pill.js

@@ -359,7 +359,7 @@ export function create(opts) {
             funcs.removePill($pill[0]);
             $next.trigger("focus");
 
-            compose.update_fade();
+            compose.update_on_recipient_change();
         });
 
         store.$parent.on("click", function (e) {

static/styles/compose.css

@@ -130,6 +130,7 @@
         margin-left: 5px;
         margin-right: 35px;
         display: flex;
+        align-items: center;
         width: 100%;
     }
 

static/styles/input_pill.css

@@ -107,9 +107,9 @@
 
 .pm_recipient .pill-container {
     padding: 0 2px;
-    border: none;
     flex-grow: 1;
     align-content: center;
+    border: 1px solid hsla(0, 0%, 0%, 0.2);
 
     .input {
         height: 20px;

static/templates/compose.hbs

@@ -90,6 +90,7 @@
                             </div>
                             <div class="right_part">
                                 <div class="pm_recipient">
+                                    <a role="button" class="narrow_to_compose_recipients zulip-icon zulip-icon-arrow-left-circle order-1" data-tooltip-template-id="narrow_to_compose_recipients_tooltip" tabindex="0"></a>
                                     <div class="pill-container" data-before="{{t 'You and' }}">
                                         <div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text="{{t 'Add one or more users' }}" data-some-recipients-text="{{t 'Add another user...' }}"></div>
                                     </div>