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

sujalshah-bit · 2024-04-21T18:53:24Z

GSoC`2024 Participant

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.

UI Changes

Light	Dark

Icons	Tooltips

Documentation changes

Current	Changes

Self-review checklist

Self-reviewed the changes for clarity and maintainability
(variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

Explains differences from previous plans (e.g., issue description).
Highlights technical choices and bugs encountered.
Calls out remaining decisions and concerns.
Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

Each commit is a coherent idea.
Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

Visual appearance of the changes.
Responsiveness and internationalization.
Strings and tooltips.
End-to-end functionality of buttons, interactions and flows.
Corner cases, error conditions, and easily imagined bugs.

sujalshah-bit · 2024-04-22T07:04:15Z

@N-Shar-ma can please review this PR :)

alya · 2024-04-22T07:07:25Z

Thanks! Let always call it a "to-do list", not just "todo" (in the tooltips, help center).

alya · 2024-04-22T07:14:20Z

I think we should allow posting todo lists without a title. It's fine for it to just have the default title ("Task list").

sujalshah-bit · 2024-04-22T07:45:01Z

@alya made the changes and update screenshots in PR description.

web/shared/icons/todo-list.svg:Zone.Identifier

web/src/tippyjs.ts

web/src/todo_list_modal.ts

web/templates/compose_control_buttons.hbs

sujalshah-bit · 2024-04-27T09:25:07Z

@N-Shar-ma made the changes in PR. You can take a look now :)

web/src/widget.ts

web/src/compose.js

web/src/compose_setup.js

web/src/widget.ts

sujalshah-bit · 2024-05-01T20:58:25Z

@N-Shar-ma made changes according to your feedback and left one comment above :)

N-Shar-ma

Suggested some more changes for handling the mandatory task title but optional task description behaviour better.

Also, just a general bit of advice - try keeping inline conditionals minimal. Aim for clarity over brevity

N-Shar-ma · 2024-05-01T21:33:08Z

web/src/widget_modal.ts

+}
+
+export function frame_todo_message_content(): string {
+    const title = $<HTMLInputElement>("input#todo-title-input").val()?.toString().trim() ?? "";


Instead of empty string, make the fallback "Task list"

N-Shar-ma · 2024-05-01T21:33:41Z

web/src/widget_modal.ts

+
+export function frame_todo_message_content(): string {
+    const title = $<HTMLInputElement>("input#todo-title-input").val()?.toString().trim() ?? "";
+    const todo_str = title ? `/todo ${title}\n` : "/todo Task list\n";


Then write this plainly without need for conditionals

N-Shar-ma · 2024-05-01T21:51:50Z

web/src/widget_modal.ts

+            const todo =
+                todo_name && todo_description
+                    ? `${todo_name}: ${todo_description}`
+                    : todo_name || todo_description;


Again, this is really hard to read. If I understand correctly, in the absence of a task title, we assign it the value in the description. But that's not the behavior we want.

We should aim for consistency between this modal UI and the pre-existing widget UI. Since task titles are mandatory, we do not want to consider tasks without task title. To discourage only filling in the description field, we should considering enabling the input only when the corresponding task title input is non empty. In case you like, feel free to discuss this detail more on CZO

currently we have two option:

Enable the description input only when the task title has values:

Stay consistent with the current widget (which is displayed after the /todo command is sent) in which you can add a value to the description, but the "Add task" button will not work.

todo.mp4

In my opinion, what you have suggested sounds better than the second option. We should not allow users to write values in the description if the task title is empty in the first place. However, in that case, it will not be consistent with the pre-existing modal.

started discussion at https://chat.zulip.org/#narrow/stream/6-frontend/topic/description.20field.20in.20todo.20modal/near/1792835

N-Shar-ma · 2024-05-01T21:53:09Z

web/src/widget_modal.ts

+    });
+    $todo_options_list.on("input", "input.todo-description-input", (event) => {
+        add_option_row(event, "TODO");
+    });


I don't think we need to add a row on detecting input in the description field. The task title should be enough

sujalshah-bit · 2024-05-03T11:35:51Z

Also I notice that buttons are not disable when access through three dot menu

Do you know why this is happening? I'm trying to find out, though.

This commit change the location of poll icon into their own section in the right just before `?`.

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; therefore, the poll and todo code has been shifted to a newly created file named `widget.ts`, and `poll_modal.ts` is now deprecated. Fixes: zulip#29779.

sujalshah-bit · 2024-05-09T21:42:30Z

I think puppeteer tests is failing due to https://chat.zulip.org/#narrow/stream/43-automated-testing/topic/main.20failing/near/1790147

sujalshah-bit force-pushed the ui-todo-list branch from 07f8c95 to 9f89ef3 Compare April 21, 2024 18:56

zulipbot added size: XL area: compose (UI & widgets) Scheduled messages, giphy, send later, etc. new feature A proposed new feature for the product labels Apr 21, 2024

sujalshah-bit force-pushed the ui-todo-list branch 5 times, most recently from b61635e to ecef2b8 Compare April 22, 2024 06:39

sujalshah-bit marked this pull request as ready for review April 22, 2024 07:02

sujalshah-bit force-pushed the ui-todo-list branch from ecef2b8 to 4009cb4 Compare April 22, 2024 07:44

sujalshah-bit force-pushed the ui-todo-list branch 2 times, most recently from ffb04e0 to 60fb41d Compare April 22, 2024 07:52

N-Shar-ma suggested changes Apr 22, 2024

View reviewed changes

web/shared/icons/todo-list.svg:Zone.Identifier Outdated Show resolved Hide resolved

web/src/tippyjs.ts Outdated Show resolved Hide resolved

web/src/todo_list_modal.ts Outdated Show resolved Hide resolved

web/templates/compose_control_buttons.hbs Show resolved Hide resolved

sujalshah-bit force-pushed the ui-todo-list branch 4 times, most recently from 5b83e6a to ba05d4b Compare April 27, 2024 09:06

sujalshah-bit requested a review from N-Shar-ma April 29, 2024 19:42

N-Shar-ma suggested changes Apr 30, 2024

View reviewed changes

web/src/widget.ts Outdated Show resolved Hide resolved

N-Shar-ma suggested changes Apr 30, 2024

View reviewed changes

web/src/compose.js Outdated Show resolved Hide resolved

web/src/compose_setup.js Outdated Show resolved Hide resolved

web/src/widget.ts Outdated Show resolved Hide resolved

web/src/widget.ts Outdated Show resolved Hide resolved

web/src/widget.ts Outdated Show resolved Hide resolved

sujalshah-bit force-pushed the ui-todo-list branch 2 times, most recently from f2e4c01 to 8d46022 Compare May 1, 2024 20:34

ilyesskhayati mentioned this pull request May 1, 2024

keyboard-shortcuts: Update the to-do list example to match documentation. #29860

Merged

12 tasks

N-Shar-ma suggested changes May 1, 2024

View reviewed changes

sujalshah-bit force-pushed the ui-todo-list branch from 8d46022 to c2bc2af Compare May 5, 2024 22:32

zulipbot added the has conflicts label May 6, 2024

templates: Change poll icon location to just before ?.

21ac6b2

This commit change the location of poll icon into their own section in the right just before `?`.

sujalshah-bit force-pushed the ui-todo-list branch from c2bc2af to 07c4288 Compare May 9, 2024 20:57

zulipbot removed the has conflicts label May 9, 2024

sujalshah-bit force-pushed the ui-todo-list branch from 07c4288 to b88e2f0 Compare May 9, 2024 21:06

sujalshah-bit force-pushed the ui-todo-list branch from b88e2f0 to d37e79f Compare May 9, 2024 21:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

sujalshah-bit commented Apr 21, 2024 •

edited

sujalshah-bit commented Apr 22, 2024

alya commented Apr 22, 2024

alya commented Apr 22, 2024

sujalshah-bit commented Apr 22, 2024

sujalshah-bit commented Apr 27, 2024

sujalshah-bit commented May 1, 2024

N-Shar-ma left a comment

N-Shar-ma May 1, 2024

N-Shar-ma May 1, 2024

N-Shar-ma May 1, 2024

sujalshah-bit May 3, 2024

N-Shar-ma May 1, 2024

sujalshah-bit commented May 3, 2024

sujalshah-bit commented May 9, 2024

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

Are you sure you want to change the base?

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

Conversation

sujalshah-bit commented Apr 21, 2024 • edited

sujalshah-bit commented Apr 22, 2024

alya commented Apr 22, 2024

alya commented Apr 22, 2024

sujalshah-bit commented Apr 22, 2024

sujalshah-bit commented Apr 27, 2024

sujalshah-bit commented May 1, 2024

N-Shar-ma left a comment

Choose a reason for hiding this comment

N-Shar-ma May 1, 2024

Choose a reason for hiding this comment

N-Shar-ma May 1, 2024

Choose a reason for hiding this comment

N-Shar-ma May 1, 2024

Choose a reason for hiding this comment

sujalshah-bit May 3, 2024

Choose a reason for hiding this comment

N-Shar-ma May 1, 2024

Choose a reason for hiding this comment

sujalshah-bit commented May 3, 2024

sujalshah-bit commented May 9, 2024

sujalshah-bit commented Apr 21, 2024 •

edited