todo_list: Add option for modal to create todo-lists.

Previously, the `/todo` slash command was the sole method for
creating todos. Now, a button has been introduced to launch a modal
for creating todo-lists directly from the compose box.
This button becomes enabled only when the compose box is empty,
thereby avoiding complexities associated with losing or having to
save drafts of any messages already being composed.

The modal features a form that, upon submission,
generates a message using the `/todo` syntax and the data
inputted in the form. Subsequently, the content of the compose box
is set to this message, which the user can then send.

This modal closely parallels the UI for adding a poll.

Fixes: #29779.

web/src/compose.js

@@ -140,6 +140,7 @@ export function clear_compose_box() {
     compose_ui.hide_compose_spinner();
     scheduled_messages.reset_selected_schedule_timestamp();
     $(".compose_control_button_container:has(.add-poll)").removeClass("disabled-on-hover");
+    $(".compose_control_button_container:has(.add-todo-list)").removeClass("disabled-on-hover");
 }
 
 export function send_message_success(request, data) {

web/src/compose_setup.js

@@ -2,6 +2,7 @@ import $ from "jquery";
 
 import {unresolve_name} from "../shared/src/resolved_topic";
 import render_add_poll_modal from "../templates/add_poll_modal.hbs";
+import render_add_todo_list_modal from "../templates/add_todo_list_modal.hbs";
 
 import * as compose from "./compose";
 import * as compose_actions from "./compose_actions";
@@ -29,6 +30,7 @@ import * as stream_settings_components from "./stream_settings_components";
 import * as sub_store from "./sub_store";
 import * as subscriber_api from "./subscriber_api";
 import {get_timestamp_for_flatpickr} from "./timerender";
+import * as todo_list_modal from "./todo_list_modal";
 import * as ui_report from "./ui_report";
 import * as upload from "./upload";
 import * as user_topics from "./user_topics";
@@ -85,8 +87,10 @@ export function initialize() {
         // The poll widget requires an empty compose box.
         if (compose_text_length > 0) {
             $(".add-poll").parent().addClass("disabled-on-hover");
+            $(".add-todo-list").parent().addClass("disabled-on-hover");
         } else {
             $(".add-poll").parent().removeClass("disabled-on-hover");
+            $(".add-todo-list").parent().removeClass("disabled-on-hover");
         }
     });
 
@@ -401,6 +405,48 @@ export function initialize() {
         });
     });
 
+    $("body").on(
+        "click",
+        ".compose_control_button_container:not(.disabled) .add-todo-list",
+        (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            function validate_input() {
+                const title = $("#todo-title-input").val().trim();
+
+                if (title === "") {
+                    ui_report.error(
+                        $t_html({defaultMessage: "Please enter a title."}),
+                        undefined,
+                        $("#dialog_error"),
+                    );
+                    return false;
+                }
+                return true;
+            }
+
+            dialog_widget.launch({
+                html_heading: $t_html({defaultMessage: "Create a collaborative to-do list"}),
+                html_body: render_add_todo_list_modal(),
+                html_submit_button: $t_html({defaultMessage: "Create to-do list"}),
+                close_on_submit: true,
+                on_click(e) {
+                    // frame a message using data input in modal, then populate the compose textarea with it
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const todo_message_content = todo_list_modal.frame_todo_message_content();
+                    compose_ui.insert_syntax_and_focus(todo_message_content);
+                },
+                validate_input,
+                form_id: "add-todo-form",
+                id: "add-todo-modal",
+                post_render: todo_list_modal.todo_list_tasks_setup,
+                help_link: "https://zulip.com/help/collaborative-to-do-lists",
+            });
+        },
+    );
+
     $("#compose").on("click", ".markdown_preview", (e) => {
         e.preventDefault();
         e.stopPropagation();

web/src/todo_list_modal.ts

@@ -0,0 +1,79 @@
+import $ from "jquery";
+import SortableJS from "sortablejs";
+
+import render_todo_modal_task from "../templates/todo_modal_task.hbs";
+
+function create_option_row($last_option_row_input: JQuery): void {
+    const row_html = render_todo_modal_task();
+    const $row_container = $last_option_row_input.closest(".simplebar-content");
+    $row_container.append($(row_html));
+}
+
+function add_option_row(e: JQuery.TriggeredEvent): void {
+    // if the option triggering the input event e is not the last,
+    // that is, its next sibling has the class `option-row`, we
+    // do not add a new option row and return from this function
+    // This handles a case when the next empty input row is already
+    // added and user is updating the above row(s).
+    if ($(e.target).closest(".option-row").next().hasClass("option-row")) {
+        return;
+    }
+    create_option_row($(e.target));
+}
+
+function delete_option_row(e: JQuery.ClickEvent): void {
+    const $row = $(e.target).closest(".option-row");
+    $row.remove();
+}
+
+export function todo_list_tasks_setup(): void {
+    const $todo_options_list = $("#add-todo-form .todo-options-list");
+    const $submit_button = $("#add-todo-form .dialog_submit_button");
+    const $title_input = $<HTMLInputElement>("#add-todo-form input#todo-title-input");
+
+    // Disable the submit button if the title is empty.
+    $submit_button.prop("disabled", true);
+    $title_input.on("input", () => {
+        if ($title_input.val()!.trim() !== "") {
+            $submit_button.prop("disabled", false);
+        } else {
+            $submit_button.prop("disabled", true);
+        }
+    });
+
+    $todo_options_list.on("input", "input.todo-input", add_option_row);
+    $todo_options_list.on("input", "input.todo-description-input", add_option_row);
+    $todo_options_list.on("click", "button.delete-option", delete_option_row);
+
+    // setTimeout is needed to here to give time for simplebar to initialise
+    setTimeout(() => {
+        SortableJS.create($("#add-todo-form .todo-options-list .simplebar-content")[0], {
+            onUpdate() {
+                // Do nothing on drag; the order is only processed on submission.
+            },
+            // We don't want the last (empty) row to be draggable, as a new row
+            // is added on input event of the last row.
+            filter: "input, .option-row:last-child",
+            preventOnFilter: false,
+        });
+    }, 0);
+}
+
+export function frame_todo_message_content(): string {
+    const title = $<HTMLInputElement>("input#todo-title-input").val()?.toString().trim() ?? "";
+    const todo_str = title ? `/todo ${title}\n` : "";
+
+    const todos: string[] = [];
+
+    $(".option-row").each(function () {
+        const todo_name = $(this).find(".todo-input").val()?.toString().trim() ?? "";
+        const todo_description =
+            $(this).find(".todo-description-input").val()?.toString().trim() ?? "";
+
+        if (todo_name) {
+            todos.push(`${todo_name}: ${todo_description}`);
+        }
+    });
+
+    return todo_str + todos.join("\n");
+}

web/templates/add_todo_list_modal.hbs

@@ -0,0 +1,13 @@
+<form id="add-todo-form" class="new-style">
+    <label class="todo-label">{{t "To-do list title"}}</label>
+    <div class="todo-title-input-container">
+        <input type="text" id="todo-title-input" class="modal_text_input" placeholder="{{t 'Task list'}}" />
+    </div>
+    <label class="todo-label">{{t "Tasks"}}</label>
+    <p>{{t "Anyone can add more tasks after the to-do list is posted."}}</p>
+    <ul class="todo-options-list" data-simplebar>
+        {{> todo_modal_task }}
+        {{> todo_modal_task }}
+        {{> todo_modal_task }}
+    </ul>
+</form>

web/templates/compose_control_buttons.hbs

@@ -28,6 +28,9 @@
     <div class="compose_control_button_container preview_mode_disabled" data-tooltip-template-id="add-poll-tooltip" data-tippy-maxWidth="none">
         <a role="button" class="compose_control_button zulip-icon zulip-icon-poll add-poll" aria-label="{{t 'Add poll' }}" tabindex=0></a>
     </div>
+    <div class="compose_control_button_container preview_mode_disabled" data-tooltip-template-id="add-poll-tooltip" data-tippy-maxWidth="none">
+        <a role="button" class="compose_control_button zulip-icon zulip-icon-poll add-todo-list" aria-label="{{t 'Create todo-list' }}" tabindex=0></a>
+    </div>
     {{/unless}}
     <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>

web/templates/todo_modal_task.hbs

@@ -0,0 +1,5 @@
+<!-- todo_modal_task.hbs -->
+<li class="option-row">
+    <input type="text" class="todo-input" placeholder="{{t 'New task'}}" />
+    <input type="text" class="todo-description-input" placeholder="{{t 'Task description (optional)'}}" />
+</li>