compose: Add a + button for adding DM recipients.

This commit adds a `+` button inside compose-direct-recipient box
which on click moves focus to private_message_recipient and opens
up the dm recipient typeahead.

Fixes: zulip#34848.

web/src/bootstrap_typeahead.ts

@@ -493,15 +493,18 @@ export class Typeahead<ItemType extends string | object> {
         return this;
     }
 
-    lookup(hideOnEmpty: boolean): this {
+    lookup(hideOnEmpty: boolean, force_lookup?: boolean): this {
         this.query =
             this.input_element.type === "contenteditable"
                 ? this.input_element.$element.text()
                 : (this.input_element.$element.val() ?? "");
 
+        // The force_lookup parameter allows specific code paths to override
+        // the helpOnEmptyStrings configured for the typeahead element.
         if (
             (!this.helpOnEmptyStrings || hideOnEmpty) &&
-            (!this.query || this.query.length < MIN_LENGTH)
+            (!this.query || this.query.length < MIN_LENGTH) &&
+            !force_lookup
         ) {
             return this.shown ? this.hide() : this;
         }

web/src/compose_setup.ts

@@ -19,6 +19,7 @@ import * as compose_send_menu_popover from "./compose_send_menu_popover.ts";
 import * as compose_state from "./compose_state.ts";
 import * as compose_ui from "./compose_ui.ts";
 import * as compose_validate from "./compose_validate.ts";
+import * as composebox_typeahead from "./composebox_typeahead.ts";
 import * as dialog_widget from "./dialog_widget.ts";
 import * as drafts from "./drafts.ts";
 import * as flatpickr from "./flatpickr.ts";
@@ -627,6 +628,15 @@ export function initialize(): void {
         compose_validate.validate_and_update_send_button_status();
     });
 
+    $("#compose-direct-recipient").on("click", "#compose-new-direct-recipient-button", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const $input = $("#private_message_recipient");
+        $input.trigger("focus");
+        composebox_typeahead.private_message_recipient_typeahead.lookup(false, true);
+    });
+
     $("input#stream_message_recipient_topic").on("focus", () => {
         const $input = $<HTMLInputElement>("input#stream_message_recipient_topic");
         compose_recipient.update_topic_displayed_text($input.val(), true);

web/styles/compose.css

@@ -281,7 +281,23 @@
         flex-grow: 1;
         display: grid;
         grid-template-columns: 1fr;
+        position: relative;
         align-items: stretch;
+
+        .compose-new-recipient-button {
+            /* Takes up vertical space in pill container excluding 1px
+               container outline and 1px padding */
+            height: 1.75em;
+            width: 1.75em;
+            position: absolute;
+            right: 0.0625em;
+            top: 0.0625em;
+        }
+
+        .pill-container {
+            /* recipient button width and 1px container width */
+            padding-right: 1.8125em;
+        }
     }
 
     .message_header {
@@ -1101,17 +1117,6 @@ textarea.new_message_textarea {
         border-color: var(--color-compose-recipient-box-has-focus);
     }
 
-    #stream_message_recipient_topic,
-    .compose-new-recipient-button {
-        background: none;
-        border: none;
-
-        &:disabled {
-            cursor: default;
-            opacity: 1;
-        }
-    }
-
     /* Styles for input in the recipient_box */
     #stream_message_recipient_topic {
         grid-area: topic;
@@ -1157,26 +1162,6 @@ textarea.new_message_textarea {
     /* Styles for new conversation button in the recipient_box */
     .compose-new-recipient-button {
         grid-area: topic-clear-button;
-        /* Set the border radius smaller, relative to the parent */
-        border-radius: 2px;
-        padding: 6px;
-        margin: 1px;
-        color: var(--color-compose-embedded-button-text-color);
-
-        .zulip-icon {
-            display: block;
-        }
-
-        &:hover {
-            background-color: var(
-                --color-compose-embedded-button-background-hover
-            );
-            color: var(--color-compose-embedded-button-text-color-hover);
-        }
-
-        &:focus {
-            outline: 0;
-        }
     }
 
     #stream_message_recipient_topic:not(.empty-topic-display):placeholder-shown
@@ -1567,6 +1552,40 @@ textarea.new_message_textarea {
       themselves, where necessary. */
     min-height: var(--compose-recipient-box-min-height);
     min-width: 0;
+
+    .compose-new-recipient-button {
+        /* Set the border radius smaller, relative to the parent */
+        border-radius: 2px;
+        padding: 6px;
+        margin: 1px;
+        color: var(--color-compose-embedded-button-text-color);
+
+        .zulip-icon {
+            display: block;
+        }
+
+        &:hover {
+            background-color: var(
+                --color-compose-embedded-button-background-hover
+            );
+            color: var(--color-compose-embedded-button-text-color-hover);
+        }
+
+        &:focus {
+            outline: 0;
+        }
+    }
+
+    #stream_message_recipient_topic,
+    .compose-new-recipient-button {
+        background: none;
+        border: none;
+
+        &:disabled {
+            cursor: default;
+            opacity: 1;
+        }
+    }
 }
 
 .compose-control-buttons-container {

web/templates/compose.hbs

@@ -74,6 +74,9 @@
                             <div id="compose-direct-recipient" data-before="{{t 'You and' }}">
                                 <div class="pill-container">
                                     <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>
+                                    <button type="button" id="compose-new-direct-recipient-button" class="compose-new-recipient-button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Add recipient' }}" tabindex="-1">
+                                        <i class="zulip-icon zulip-icon-square-plus"></i>
+                                    </button>
                                 </div>
                             </div>
                         </div>