compose: Add compose box button to insert global times.

Fixes #20045.

static/js/compose.js

@@ -11,6 +11,7 @@ import * as compose_fade from "./compose_fade";
 import * as compose_state from "./compose_state";
 import * as compose_ui from "./compose_ui";
 import * as compose_validate from "./compose_validate";
+import * as composebox_typeahead from "./composebox_typeahead";
 import * as echo from "./echo";
 import * as giphy from "./giphy";
 import {$t, $t_html} from "./i18n";
@@ -627,6 +628,46 @@ export function initialize() {
         }
     });
 
+    let instance = null;
+    $("body").on("click", ".time_pick", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        let target_textarea;
+        let edit_message_id;
+        if ($(e.target).parents(".message_edit_form").length === 1) {
+            edit_message_id = rows.id($(e.target).parents(".message_row"));
+            target_textarea = $(`#edit_form_${CSS.escape(edit_message_id)} .message_edit_content`);
+        }
+
+        if (instance === null) {
+            const on_timestamp_selection = (val) => {
+                const timestr = `<time:${val}> `;
+                compose_ui.insert_syntax_and_focus(timestr, target_textarea);
+                instance = null;
+            };
+
+            instance = composebox_typeahead.show_flatpickr(
+                $(e.target)[0],
+                on_timestamp_selection,
+                new Date(),
+                {
+                    // place the time picker above the icon and centerize it horizontally
+                    position: "above center",
+                },
+            );
+
+            $(document).one("compose_canceled.zulip compose_finished.zulip", () => {
+                instance = null;
+            });
+            return;
+        }
+
+        instance.close();
+        instance.destroy();
+        instance = null;
+    });
+
     $("#compose").on("click", ".markdown_preview", (e) => {
         e.preventDefault();
         const content = $("#compose-textarea").val();

static/js/composebox_typeahead.js

@@ -766,7 +766,7 @@ export function content_highlighter(item) {
     }
 }
 
-const show_flatpickr = (element, callback, default_timestamp) => {
+export function show_flatpickr(element, callback, default_timestamp, options = {}) {
     const flatpickr_input = $("<input id='#timestamp_flatpickr'>");
 
     const instance = flatpickr_input.flatpickr({
@@ -774,11 +774,13 @@ const show_flatpickr = (element, callback, default_timestamp) => {
         enableTime: true,
         clickOpens: false,
         defaultDate: default_timestamp,
-        plugins: [new ConfirmDatePlugin({})],
+        plugins: [new ConfirmDatePlugin({showAlways: true})],
         positionElement: element,
         dateFormat: "Z",
         formatDate: (date) => formatISO(date),
+        ...options,
     });
+
     const container = $($(instance.innerContainer).parent());
     container.on("click", ".flatpickr-calendar", (e) => {
         e.stopPropagation();
@@ -792,7 +794,9 @@ const show_flatpickr = (element, callback, default_timestamp) => {
     });
     instance.open();
     container.find(".flatpickr-monthDropdown-months").trigger("focus");
-};
+
+    return instance;
+}
 
 export function content_typeahead_selected(item, event) {
     const pieces = split_at_cursor(this.query, this.$element);

static/templates/compose_control_buttons.hbs

@@ -6,6 +6,7 @@
 <a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
 <a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
 <a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a>
+<a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tippy-content="{{t 'Add global time<br />Everyone sees global times in their own time zone.' }}" data-tippy-maxWidth="none" data-tippy-allowHtml="true"></a>
 <a role="button" class="compose_control_button compose_giphy_link {{#unless giphy_enabled }} hide {{/unless}}" aria-label="{{t 'Add GIF' }}" data-tippy-content="{{t 'Add GIF' }}">
     <i class="compose_gif_icon zulip-icon zulip-icon-gif" tabindex=0></i>
 </a>

tools/lib/capitalization.py

@@ -105,6 +105,7 @@ IGNORED_PHRASES = [
         '<a href="/api" target="_blank">API</a> documentation?'
     ),
     r'Most stream administration is done on the <a href="/#streams">Streams page</a>.',
+    r"Add global time<br />Everyone sees global times in their own time zone.",
     r"one or more people...",
     r"confirmation email",
     r"invites remaining",