plugin createTaskModal: add split button for add task actions

Author: jamiebrynes7

plugin/src/i18n/langs/en.ts

@@ -123,6 +123,11 @@ export const en: Translations = {
       "A link to this page will be appended to the task description",
     cancelButtonLabel: "Cancel",
     addTaskButtonLabel: "Add task",
+    addTaskAndCopyAppLabel: "Add task and copy link (app)",
+    addTaskAndCopyWebLabel: "Add task and copy link (web)",
+    actionMenuLabel: "Add task action menu",
+    linkCopiedNotice: "Task created and link copied to clipboard",
+    linkCopyFailedNotice: "Task created, but failed to copy link to clipboard",
     failedToFindInboxNotice: "Error: could not find inbox project",
     defaultProjectDeletedNotice: (projectName: string) =>
       `Default project "${projectName}" no longer exists. Using Inbox instead.`,

plugin/src/i18n/translation.ts

@@ -118,6 +118,11 @@ export type Translations = {
     appendedLinkToDescriptionMessage: string;
     cancelButtonLabel: string;
     addTaskButtonLabel: string;
+    addTaskAndCopyAppLabel: string;
+    addTaskAndCopyWebLabel: string;
+    actionMenuLabel: string;
+    linkCopiedNotice: string;
+    linkCopyFailedNotice: string;
     failedToFindInboxNotice: string;
     defaultProjectDeletedNotice: (projectName: string) => string;
     defaultLabelsDeletedNotice: (labelNames: string) => string;

plugin/src/ui/createTaskModal/index.tsx

@@ -2,11 +2,12 @@ import { toCalendarDateTime, toZoned } from "@internationalized/date";
 import { Notice, type TFile } from "obsidian";
 import type React from "react";
 import { useEffect, useState } from "react";
-import { Button } from "react-aria-components";
+import { Button, Label, Menu, MenuItem, MenuTrigger } from "react-aria-components";
 
 import { t } from "@/i18n";
 import { timezone, today } from "@/infra/time";
 import {
+  type AddTaskAction,
   type DueDateDefaultSetting,
   type LabelsDefaultSetting,
   type ProjectDefaultSetting,
@@ -15,11 +16,13 @@ import {
 import { ModalContext, PluginContext } from "@/ui/context";
 
 import type TodoistPlugin from "../..";
-import type { Label } from "../../api/domain/label";
+import type { Label as TodoistLabel } from "../../api/domain/label";
 import type { CreateTaskParams, Priority } from "../../api/domain/task";
+import { ObsidianIcon } from "../components/obsidian-icon";
 import { type Deadline, DeadlineSelector } from "./DeadlineSelector";
 import { type DueDate, DueDateSelector } from "./DueDateSelector";
 import { LabelSelector } from "./LabelSelector";
+import { Popover } from "./Popover";
 import { PrioritySelector } from "./PrioritySelector";
 import { type ProjectIdentifier, ProjectSelector } from "./ProjectSelector";
 import { TaskContentInput } from "./TaskContentInput";
@@ -94,13 +97,13 @@ const calculateDefaultProject = (
 const calculateDefaultLabels = (
   plugin: TodoistPlugin,
   labelsSetting: LabelsDefaultSetting,
-): Label[] => {
+): TodoistLabel[] => {
   if (labelsSetting.length === 0) {
     return [];
   }
 
   const allLabels = Array.from(plugin.services.todoist.data().labels.iter());
-  const validLabels: Label[] = [];
+  const validLabels: TodoistLabel[] = [];
   const deletedLabelNames: string[] = [];
 
   for (const defaultLabel of labelsSetting) {
@@ -163,7 +166,7 @@ const CreateTaskModalContent: React.FC<CreateTaskProps> = ({
     calculateDefaultDueDate(settings.taskCreationDefaultDueDate),
   );
   const [priority, setPriority] = useState<Priority>(1);
-  const [labels, setLabels] = useState<Label[]>(() =>
+  const [labels, setLabels] = useState<TodoistLabel[]>(() =>
     calculateDefaultLabels(plugin, settings.taskCreationDefaultLabels),
   );
   const [deadline, setDeadline] = useState<Deadline | undefined>();
@@ -172,6 +175,7 @@ const CreateTaskModalContent: React.FC<CreateTaskProps> = ({
   );
 
   const [options, setOptions] = useState<TaskCreationOptions>(initialOptions);
+  const [currentAction, setCurrentAction] = useState<AddTaskAction>(settings.defaultAddTaskAction);
 
   const isPremium = plugin.services.todoist.isPremium();
   const isSubmitButtonDisabled = content === "" && options.appendLinkTo !== "content";
@@ -194,7 +198,7 @@ const CreateTaskModalContent: React.FC<CreateTaskProps> = ({
     return builder.join("");
   };
 
-  const createTask = async () => {
+  const createTask = async (action: AddTaskAction) => {
     if (isSubmitButtonDisabled) {
       return;
     }
@@ -225,17 +229,50 @@ const CreateTaskModalContent: React.FC<CreateTaskProps> = ({
     }
 
     try {
-      await plugin.services.todoist.actions.createTask(
+      const task = await plugin.services.todoist.actions.createTask(
         buildWithLink(content, options.appendLinkTo === "content"),
         params,
       );
-      new Notice(i18n.successNotice);
+
+      let url: string | undefined;
+      switch (action) {
+        case "add-copy-app":
+          url = `todoist://task?id=${task.id}`;
+          break;
+        case "add-copy-web":
+          url = `https://todoist.com/app/project/${task.projectId}/task/${task.id}`;
+          break;
+      }
+
+      if (url !== undefined) {
+        const markdownLink = `[${task.content}](${url})`;
+        try {
+          await navigator.clipboard.writeText(markdownLink);
+          new Notice(i18n.linkCopiedNotice);
+        } catch (clipboardErr) {
+          new Notice(i18n.linkCopyFailedNotice);
+          console.error("Failed to copy to clipboard", clipboardErr);
+        }
+      } else {
+        new Notice(i18n.successNotice);
+      }
     } catch (err) {
       new Notice(i18n.errorNotice);
       console.error("Failed to create task", err);
     }
   };
 
+  const getActionLabel = (action: AddTaskAction): string => {
+    switch (action) {
+      case "add":
+        return i18n.addTaskButtonLabel;
+      case "add-copy-app":
+        return i18n.addTaskAndCopyAppLabel;
+      case "add-copy-web":
+        return i18n.addTaskAndCopyWebLabel;
+    }
+  };
+
   const linkDestinationMessage = getLinkDestinationMessage(options.appendLinkTo, i18n);
 
   return (
@@ -246,7 +283,7 @@ const CreateTaskModalContent: React.FC<CreateTaskProps> = ({
         content={content}
         onChange={setContent}
         autofocus={true}
-        onEnterKey={createTask}
+        onEnterKey={() => createTask(currentAction)}
       />
       <TaskContentInput
         className="task-description"
@@ -277,14 +314,42 @@ const CreateTaskModalContent: React.FC<CreateTaskProps> = ({
           <Button onPress={() => modal.close()} aria-label={i18n.cancelButtonLabel}>
             {i18n.cancelButtonLabel}
           </Button>
-          <Button
-            className="mod-cta"
-            isDisabled={isSubmitButtonDisabled}
-            onPress={createTask}
-            aria-label={i18n.addTaskButtonLabel}
-          >
-            {i18n.addTaskButtonLabel}
-          </Button>
+          <div className="add-task-button-group">
+            <Button
+              className="mod-cta add-task-primary"
+              isDisabled={isSubmitButtonDisabled}
+              onPress={() => createTask(currentAction)}
+              aria-label={getActionLabel(currentAction)}
+            >
+              {getActionLabel(currentAction)}
+            </Button>
+            <MenuTrigger>
+              <Button
+                className="mod-cta add-task-dropdown"
+                isDisabled={isSubmitButtonDisabled}
+                aria-label={i18n.actionMenuLabel}
+              >
+                <ObsidianIcon id="chevron-down" size="s" />
+              </Button>
+              <Popover>
+                <Menu
+                  className="add-task-action-menu task-option-dialog"
+                  aria-label={i18n.actionMenuLabel}
+                  onAction={(key) => setCurrentAction(key as AddTaskAction)}
+                >
+                  <MenuItem key="add" id="add">
+                    <Label>{i18n.addTaskButtonLabel}</Label>
+                  </MenuItem>
+                  <MenuItem key="add-copy-app" id="add-copy-app">
+                    <Label>{i18n.addTaskAndCopyAppLabel}</Label>
+                  </MenuItem>
+                  <MenuItem key="add-copy-web" id="add-copy-web">
+                    <Label>{i18n.addTaskAndCopyWebLabel}</Label>
+                  </MenuItem>
+                </Menu>
+              </Popover>
+            </MenuTrigger>
+          </div>
         </div>
       </div>
     </div>

plugin/src/ui/createTaskModal/styles.scss

@@ -96,12 +96,42 @@
     }
   }
 
+  .add-task-button-group {
+    display: flex;
+    gap: 0;
+
+    .add-task-primary {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      flex: 1;
+    }
+
+    .add-task-dropdown {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left: 1px solid var(--background-modifier-border);
+      padding: 0 8px;
+      min-width: auto;
+    }
+  }
+
   hr {
     margin: 1em 0;
     border-color: var(--color-base-25);
   }
 }
 
+.add-task-action-menu {
+  .react-aria-MenuItem {
+    padding: 8px 1em;
+    font-size: var(--font-smaller);
+
+    &:hover {
+      background-color: var(--background-modifier-cover);
+    }
+  }
+}
+
 .task-option-dialog {
   background-color: var(--modal-background);
   border: var(--modal-border-width) solid var(--modal-border-color);
@@ -281,7 +311,6 @@
   }
 }
 
-
 .task-options-menu {
   .task-option-dialog-item {
     padding: 8px 1em;