saved_snippet: Move "Create a new saved snippet" button to the bottom.

Renames "Add a new saved snippet" to "Create a new saved snippet" and
"Add saved snippet" tooltip to "Insert saved snippet".

Moves "Create a new saved snippet" button to the bottom sticky area of the
dropdown.

web/src/saved_snippets.ts

@@ -1,6 +1,5 @@
 import * as blueslip from "./blueslip.ts";
 import type {Option} from "./dropdown_widget.ts";
-import {$t} from "./i18n.ts";
 import type {StateData} from "./state_data.ts";
 import * as util from "./util.ts";
 
@@ -11,7 +10,6 @@ export type SavedSnippet = {
     date_created: number;
 };
 
-export const ADD_SAVED_SNIPPET_OPTION_ID = -1;
 let saved_snippets_dict: Map<number, SavedSnippet>;
 
 export function get_saved_snippet_by_id(saved_snippet_id: number): SavedSnippet | undefined {
@@ -43,14 +41,6 @@ export function get_options_for_dropdown_widget(): Option[] {
         has_delete_icon: true,
     }));
 
-    // Option for creating a new saved snippet.
-    options.unshift({
-        unique_id: ADD_SAVED_SNIPPET_OPTION_ID,
-        name: $t({defaultMessage: "Add a new saved snippet"}),
-        description: "",
-        bold_current_selection: true,
-        has_delete_icon: false,
-    });
     return options;
 }
 

web/src/saved_snippets_ui.ts

@@ -10,7 +10,7 @@ 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 {$t, $t_html} from "./i18n.ts";
 import * as rows from "./rows.ts";
 import * as saved_snippets from "./saved_snippets.ts";
 import type {StateData} from "./state_data.ts";
@@ -63,6 +63,7 @@ function item_click_callback(
     event: JQuery.ClickEvent,
     dropdown: tippy.Instance,
     widget: dropdown_widget.DropdownWidget,
+    is_sticky_bottom_option_clicked: boolean,
 ): void {
     event.preventDefault();
     event.stopPropagation();
@@ -84,10 +85,7 @@ function item_click_callback(
     }
 
     dropdown.hide();
-    const current_value = widget.current_value;
-    assert(typeof current_value === "number");
-
-    // Get target textarea where the "Add saved snippet" button is clicked.
+    // Get target textarea where the "Insert saved snippet" button is clicked.
     const $target_element = $(dropdown.reference);
     let $target_textarea: JQuery<HTMLTextAreaElement>;
     let edit_message_id: string | undefined;
@@ -97,9 +95,9 @@ function item_click_callback(
     } else {
         $target_textarea = $<HTMLTextAreaElement>("textarea#compose-textarea");
     }
-    if (current_value === saved_snippets.ADD_SAVED_SNIPPET_OPTION_ID) {
+    if (is_sticky_bottom_option_clicked) {
         dialog_widget.launch({
-            html_heading: $t_html({defaultMessage: "Add a new saved snippet"}),
+            html_heading: $t_html({defaultMessage: "Create a new saved snippet"}),
             html_body: render_add_saved_snippet_modal({
                 prepopulated_content: $target_textarea.val(),
             }),
@@ -112,6 +110,8 @@ function item_click_callback(
             post_render: saved_snippet_modal_post_render,
         });
     } else {
+        const current_value = widget.current_value;
+        assert(typeof current_value === "number");
         const saved_snippet = saved_snippets.get_saved_snippet_by_id(current_value);
         assert(saved_snippet !== undefined);
         const content = saved_snippet.content;
@@ -129,6 +129,9 @@ export const initialize = (params: StateData["saved_snippets"]): void => {
         item_click_callback,
         $events_container: $("body"),
         unique_id_type: dropdown_widget.DataTypes.NUMBER,
+        sticky_bottom_option: $t({
+            defaultMessage: "Create a new saved snippet",
+        }),
         focus_target_on_hidden: false,
         prefer_top_start_placement: true,
         tippy_props: {

web/styles/compose.css

@@ -1623,7 +1623,7 @@ textarea.new_message_textarea {
         flex-direction: column;
 
         .dropdown-list-item-name {
-            line-height: 15px;
+            line-height: 1.2em;
         }
 
         .dropdown-list-item-description {

web/templates/compose_control_buttons.hbs

@@ -32,8 +32,8 @@
     <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 class="compose_control_button_container preview_mode_disabled" data-tooltip-template-id="insert-saved-snippet-tooltip">
+        <a role="button" class="saved_snippets_widget compose_control_button zulip-icon zulip-icon-message-square-text" aria-label="{{t 'Insert saved snippet' }}" tabindex=0></a>
     </div>
     <div class="divider"></div>
     <div class="compose-control-buttons-container preview_mode_disabled">

web/templates/tooltip_templates.hbs

@@ -68,8 +68,8 @@
         <span class="tooltip-inner-content italic">{{t "A poll must be an entire message." }}</span>
     </div>
 </template>
-<template id="add-saved-snippet-tooltip">
-    {{t "Add saved snippet" }}
+<template id="insert-saved-snippet-tooltip">
+    {{t "Insert saved snippet" }}
     {{tooltip_hotkey_hints "Ctrl" "'"}}
 </template>
 <template id="link-tooltip">

web/tests/saved_snippets.test.cjs

@@ -2,7 +2,6 @@
 
 const assert = require("node:assert/strict");
 
-const {$t} = require("./lib/i18n.cjs");
 const {set_global, zrequire} = require("./lib/namespace.cjs");
 const {run_test} = require("./lib/test.cjs");
 const blueslip = require("./lib/zblueslip.cjs");
@@ -58,13 +57,6 @@ run_test("options for dropdown widget", () => {
     saved_snippets.add_saved_snippet(saved_snippet);
 
     assert.deepEqual(saved_snippets.get_options_for_dropdown_widget(), [
-        {
-            unique_id: -1,
-            name: $t({defaultMessage: "Add a new saved snippet"}),
-            description: "",
-            bold_current_selection: true,
-            has_delete_icon: false,
-        },
         {
             unique_id: 3,
             name: "Another saved snippet",