saved_snippets: Move "Saved snippets" button to compose control buttons.

This is follow-up of #31359 that moves "Saved snippets" button from
"send_later" popover to message formatting buttons and adds support
to use saved snippets in message-edit UI.

Fixes #31830.

web/shared/icons/message-square-text.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 22 22">
+  <g fill="#666">
+    <path d="M6.877 8.217a.68.68 0 0 1 .681-.681h4.086a.68.68 0 1 1 0 1.361H7.558a.681.681 0 0 1-.68-.68Zm.681 2.043h6.81a.681.681 0 0 1 0 1.361h-6.81a.681.681 0 0 1 0-1.362Z"/>
+    <path d="M3.789 4.288a2.043 2.043 0 0 1 1.444-.598h11.534a2.043 2.043 0 0 1 2.043 2.043v7.81a2.043 2.043 0 0 1-2.043 2.042h-9.89L4.353 18.11a.681.681 0 0 1-1.163-.481V5.733c0-.542.216-1.062.599-1.445Zm1.444.764a.681.681 0 0 0-.68.68v10.252l1.56-1.561a.68.68 0 0 1 .482-.2h10.172a.681.681 0 0 0 .68-.68v-7.81a.681.681 0 0 0-.68-.681H5.233Z"/>
+  </g>
+</svg>

web/src/dropdown_widget.ts

@@ -37,6 +37,7 @@ export type Option = {
 
 export type DropdownWidgetOptions = {
     widget_name: string;
+    widget_selector?: string;
     // You can bold the selected `option` by setting `option.bold_current_selection` to `true`.
     // Currently, not implemented for stream names.
     get_options: (current_value: string | number | undefined) => Option[];
@@ -103,7 +104,7 @@ export class DropdownWidget {
 
     constructor(options: DropdownWidgetOptions) {
         this.widget_name = options.widget_name;
-        this.widget_selector = `#${CSS.escape(this.widget_name)}_widget`;
+        this.widget_selector = options.widget_selector ?? `#${CSS.escape(this.widget_name)}_widget`;
         // A widget wrapper may not exist based on the UI requirement.
         this.widget_wrapper_id = `${this.widget_selector}_wrapper`;
         this.widget_value_selector = `${this.widget_selector} .dropdown_widget_value`;

web/src/saved_snippets_ui.ts

@@ -6,13 +6,12 @@ import render_add_saved_snippet_modal from "../templates/add_saved_snippet_modal
 import render_confirm_delete_saved_snippet from "../templates/confirm_dialog/confirm_delete_saved_snippet.hbs";
 
 import * as channel from "./channel.ts";
-import * as compose_state from "./compose_state.ts";
 import * as compose_ui from "./compose_ui.ts";
 import * as confirm_dialog from "./confirm_dialog.ts";
 import * as dialog_widget from "./dialog_widget.ts";
 import * as dropdown_widget from "./dropdown_widget.ts";
 import {$t_html} from "./i18n.ts";
-import * as popover_menus from "./popover_menus.ts";
+import * as rows from "./rows.ts";
 import * as saved_snippets from "./saved_snippets.ts";
 import type {StateData} from "./state_data.ts";
 
@@ -85,30 +84,38 @@ function item_click_callback(
     }
 
     dropdown.hide();
-    // Hide `send_later` popover when a saved snippet is clicked.
-    popover_menus.hide_current_popover_if_visible(popover_menus.popover_instances.send_later);
     const current_value = widget.current_value;
     assert(typeof current_value === "number");
+
+    // Get target textarea where the "Add saved snippet" button is clicked.
+    const $target_element = $(dropdown.reference);
+    let $target_textarea: JQuery<HTMLTextAreaElement>;
+    let edit_message_id: string | undefined;
+    if ($target_element.parents(".message_edit_form").length === 1) {
+        edit_message_id = rows.id($target_element.parents(".message_row")).toString();
+        $target_textarea = $(`#edit_form_${CSS.escape(edit_message_id)} .message_edit_content`);
+    } else {
+        $target_textarea = $<HTMLTextAreaElement>("textarea#compose-textarea");
+    }
     if (current_value === saved_snippets.ADD_SAVED_SNIPPET_OPTION_ID) {
         dialog_widget.launch({
             html_heading: $t_html({defaultMessage: "Add a new saved snippet"}),
             html_body: render_add_saved_snippet_modal({
-                prepopulated_content: compose_state.message_content(),
+                prepopulated_content: $target_textarea.val(),
             }),
             html_submit_button: $t_html({defaultMessage: "Save"}),
             id: "add-new-saved-snippet-modal",
             form_id: "add-new-saved-snippet-form",
             update_submit_disabled_state_on_change: true,
             on_click: submit_create_saved_snippet_form,
-            on_shown: () => $("#add-saved-snippet-title").trigger("focus"),
+            on_shown: () => $("#new-saved-snippet-title").trigger("focus"),
             post_render: saved_snippet_modal_post_render,
         });
     } else {
         const saved_snippet = saved_snippets.get_saved_snippet_by_id(current_value);
         assert(saved_snippet !== undefined);
         const content = saved_snippet.content;
-        const $textarea = $<HTMLTextAreaElement>("textarea#compose-textarea");
-        compose_ui.insert_syntax_and_focus(content, $textarea);
+        compose_ui.insert_syntax_and_focus(content, $target_textarea);
     }
 }
 
@@ -117,6 +124,7 @@ export const initialize = (params: StateData["saved_snippets"]): void => {
 
     saved_snippet_dropdown_widget = new dropdown_widget.DropdownWidget({
         widget_name: "saved_snippets",
+        widget_selector: ".saved_snippets_widget",
         get_options: saved_snippets.get_options_for_dropdown_widget,
         item_click_callback,
         $events_container: $("body"),

web/templates/compose_control_buttons.hbs

@@ -32,6 +32,9 @@
     <div class="compose_control_button_container {{#unless giphy_enabled }}hide{{/unless}} preview_mode_disabled" data-tippy-content="{{t 'Add GIF' }}">
         <a role="button" class="compose_control_button compose_gif_icon zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0></a>
     </div>
+    <div class="compose_control_button_container preview_mode_disabled" data-tooltip-template-id="add-saved-snippet-tooltip">
+        <a role="button" class="saved_snippets_widget compose_control_button zulip-icon zulip-icon-message-square-text" aria-label="{{t 'Add saved snippet' }}" tabindex=0></a>
+    </div>
     <div class="divider"></div>
     <div class="compose-control-buttons-container preview_mode_disabled">
         <a role="button" data-format-type="link" class="compose_control_button zulip-icon zulip-icon-link formatting_button" aria-label="{{t 'Link' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tooltip-template-id="link-tooltip" data-tippy-maxWidth="none"></a>

web/templates/popovers/send_later_popover.hbs

@@ -67,13 +67,6 @@
                 <span class="compose-drafts-count-container"><span class="unread_count quiet-count compose-drafts-count"></span></span>
             </a>
         </li>
-        <li role="separator" class="popover-menu-separator"></li>
-        <li role="none" class="link-item popover-menu-list-item saved-snippets-item-in-popover">
-            <a id="saved_snippets_widget" role="menuitem" class="view-saved-snippets popover-menu-link" tabindex="0">
-                <i class="popover-menu-icon zulip-icon zulip-icon-message-square" aria-hidden="true"></i>
-                <span class="popover-menu-label">{{t "Saved snippets" }}</span>
-            </a>
-        </li>
         {{#if show_compose_new_message}}
         <li role="separator" class="popover-menu-separator"></li>
         <li role="none" class="link-item popover-menu-list-item">

web/templates/tooltip_templates.hbs

@@ -70,6 +70,7 @@
 </template>
 <template id="add-saved-snippet-tooltip">
     {{t "Add saved snippet" }}
+    {{tooltip_hotkey_hints "Ctrl" "'"}}
 </template>
 <template id="link-tooltip">
     {{t 'Link' }}