@mindtnv/todoist-cli 0.3.1 → 0.5.0

package/src/ui/components/InputPrompt.tsx

@@ -0,0 +1,109 @@
+import { useState, useEffect, useRef } from "react";
+import { Box, Text, useInput } from "ink";
+import React from "react";
+
+interface InputPromptProps {
+  prompt: string;
+  defaultValue?: string;
+  placeholder?: string;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+  onCtrlE?: () => void;
+  onPreview?: (value: string) => React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+export function InputPrompt({ prompt, defaultValue = "", placeholder, onSubmit, onCancel, onCtrlE, onPreview, footer }: InputPromptProps) {
+  const [value, setValue] = useState(defaultValue);
+  const [cursor, setCursor] = useState(defaultValue.length);
+  const [flash, setFlash] = useState("");
+  const flashTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => { if (flashTimer.current) clearTimeout(flashTimer.current); }, []);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+    if (key.ctrl && input === "e" && onCtrlE) {
+      onCtrlE();
+      return;
+    }
+    if (key.return) {
+      if (value.trim()) {
+        onSubmit(value.trim());
+        setValue("");
+        setCursor(0);
+        setFlash("Created!");
+        if (flashTimer.current) clearTimeout(flashTimer.current);
+        flashTimer.current = setTimeout(() => setFlash(""), 1500);
+      }
+      return;
+    }
+    if (key.backspace || key.delete) {
+      if (cursor > 0) {
+        setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor));
+        setCursor((c) => c - 1);
+      }
+      return;
+    }
+    if (key.leftArrow) {
+      setCursor((c) => Math.max(0, c - 1));
+      return;
+    }
+    if (key.rightArrow) {
+      setCursor((c) => Math.min(value.length, c + 1));
+      return;
+    }
+    // Home / Ctrl-A: move cursor to start
+    if ((key.ctrl && input === "a") || (key.meta && key.leftArrow)) {
+      setCursor(0);
+      return;
+    }
+    // End / Ctrl-E (when no onCtrlE): move cursor to end
+    if ((key.ctrl && input === "e" && !onCtrlE) || (key.meta && key.rightArrow)) {
+      setCursor(value.length);
+      return;
+    }
+    if (input && !key.ctrl && !key.meta) {
+      setValue((v) => v.slice(0, cursor) + input + v.slice(cursor));
+      setCursor((c) => c + input.length);
+    }
+  });
+
+  const before = value.slice(0, cursor);
+  const cursorChar = value[cursor] ?? " ";
+  const after = value.slice(cursor + 1);
+
+  const showPlaceholder = !value && placeholder;
+
+  return (
+    <Box flexDirection="column" borderStyle="single" borderColor="yellow" paddingX={1}>
+      <Box>
+        <Text>
+          <Text color="yellow">{prompt}: </Text>
+          {flash ? <Text color="green" bold>{flash} </Text> : null}
+          {showPlaceholder ? (
+            <Text dimColor>{placeholder}</Text>
+          ) : (
+            <>
+              <Text>{before}</Text>
+              <Text backgroundColor="white" color="black">{cursorChar}</Text>
+              <Text>{after}</Text>
+            </>
+          )}
+        </Text>
+      </Box>
+      {onPreview && value.trim() && (
+        <Box flexDirection="column" marginTop={1}>
+          {onPreview(value)}
+        </Box>
+      )}
+      {footer && (
+        <Box marginTop={onPreview && value.trim() ? 0 : 1}>
+          {footer}
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/ui/components/LabelPicker.tsx

@@ -0,0 +1,110 @@
+import { useState, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import type { Label } from "../../api/types.ts";
+import { todoistColorMap } from "../../utils/colors.ts";
+
+interface LabelPickerProps {
+  labels: Label[];
+  currentLabels: string[];
+  onSave: (labels: string[]) => void;
+  onCancel: () => void;
+}
+
+export function LabelPicker({ labels, currentLabels, onSave, onCancel }: LabelPickerProps) {
+  const [filterText, setFilterText] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [checked, setChecked] = useState<Set<string>>(new Set(currentLabels));
+
+  const filtered = useMemo(() => {
+    if (!filterText) return labels;
+    const q = filterText.toLowerCase();
+    return labels.filter((l) => l.name.toLowerCase().includes(q));
+  }, [labels, filterText]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+    if (key.return) {
+      onSave(Array.from(checked));
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setFilterText((v) => v.slice(0, -1));
+      setSelectedIndex(0);
+      return;
+    }
+    if (input === " ") {
+      const label = filtered[selectedIndex];
+      if (label) {
+        setChecked((prev) => {
+          const next = new Set(prev);
+          if (next.has(label.name)) {
+            next.delete(label.name);
+          } else {
+            next.add(label.name);
+          }
+          return next;
+        });
+      }
+      return;
+    }
+    if (key.upArrow || (input === "k" && key.ctrl)) {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+      return;
+    }
+    if (key.downArrow || (input === "j" && key.ctrl)) {
+      setSelectedIndex((i) => Math.min(filtered.length - 1, i + 1));
+      return;
+    }
+    if (input && !key.ctrl && !key.meta) {
+      setFilterText((v) => v + input);
+      setSelectedIndex(0);
+    }
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="magenta"
+      paddingX={1}
+      width={40}
+    >
+      <Box marginBottom={1}>
+        <Text bold color="magenta">Labels</Text>
+      </Box>
+      <Box>
+        <Text color="yellow">{"> "}</Text>
+        <Text>{filterText || ""}</Text>
+        <Text backgroundColor="white" color="black">{" "}</Text>
+      </Box>
+      <Box flexDirection="column" marginTop={1}>
+        {filtered.length === 0 ? (
+          <Text color="gray">No matching labels</Text>
+        ) : (
+          filtered.slice(0, 15).map((label, i) => {
+            const isSelected = i === selectedIndex;
+            const isChecked = checked.has(label.name);
+            const color = todoistColorMap[label.color] ?? "white";
+            return (
+              <Box key={label.id}>
+                <Text
+                  backgroundColor={isSelected ? "blue" : undefined}
+                  color={isSelected ? "white" : undefined}
+                >
+                  <Text>{isChecked ? " [x] " : " [ ] "}</Text>
+                  <Text color={isSelected ? "white" : color}>@{label.name}</Text>
+                </Text>
+              </Box>
+            );
+          })
+        )}
+      </Box>
+      <Box marginTop={1}>
+        <Text color="gray" dimColor>[Space] toggle [Enter] save [Esc] cancel</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/ui/components/ModalManager.tsx

@@ -0,0 +1,275 @@
+import React from "react";
+import { Text } from "ink";
+import type { Task, Project, Label, CreateTaskParams, UpdateTaskParams } from "../../api/types.ts";
+import { InputPrompt } from "./InputPrompt.tsx";
+import { ConfirmDialog } from "./ConfirmDialog.tsx";
+import { HelpOverlay } from "./HelpOverlay.tsx";
+import { SortMenu } from "./SortMenu.tsx";
+import type { SortField } from "./SortMenu.tsx";
+import { CommandPalette } from "./CommandPalette.tsx";
+import type { Command } from "./CommandPalette.tsx";
+import { ProjectPicker } from "./ProjectPicker.tsx";
+import { LabelPicker } from "./LabelPicker.tsx";
+import { EditTaskModal } from "./EditTaskModal.tsx";
+import type { ExtensionRegistry } from "../../plugins/types.ts";
+
+type Modal = "none" | "add" | "addSubtask" | "edit" | "delete" | "filter" | "search" | "help" | "sort" | "bulkDelete" | "command" | "due" | "deadline" | "move" | "label" | "editFull" | "createFull" | "rename" | "pluginInput" | "createProject" | "createLabel";
+
+interface ModalManagerProps {
+  modal: Modal;
+  setModal: (modal: Modal) => void;
+  selectedTask: Task | undefined;
+  selectedIds: Set<string>;
+  projects: Project[];
+  labels: Label[];
+  searchQuery: string;
+  setSearchQuery: (q: string) => void;
+  sortField: SortField;
+  sortDirection: "asc" | "desc";
+  filterProjectId: string | undefined;
+  filterView: string;
+  commands: Command[];
+  pluginExtensions?: ExtensionRegistry | null;
+  // Handlers
+  handleAddTask: (input: string) => Promise<void>;
+  handleCreateTaskFull: (params: CreateTaskParams) => Promise<void>;
+  handleAddSubtask: (input: string) => Promise<void>;
+  handleEditTask: (content: string) => Promise<void>;
+  handleRenameTask: (content: string) => Promise<void>;
+  handleEditTaskFull: (params: UpdateTaskParams) => Promise<void>;
+  handleDeleteConfirm: () => Promise<void>;
+  handleBulkDeleteConfirm: () => Promise<void>;
+  handleSetDueDate: (due: string) => Promise<void>;
+  handleSetDeadline: (deadline: string) => Promise<void>;
+  handleMoveToProject: (projectId: string) => Promise<void>;
+  handleLabelsSave: (labels: string[]) => Promise<void>;
+  handleFilterInput: (query: string) => Promise<void>;
+  handleSortSelect: (field: SortField) => void;
+  handleSearchSubmit: (value: string) => void;
+  handleSearchCancel: () => void;
+  renderQuickAddPreview: (value: string) => React.ReactNode;
+  handleCreateProject: (name: string) => Promise<void>;
+  handleCreateLabel: (name: string) => Promise<void>;
+  pendingPluginInput?: {
+    label: string;
+    placeholder?: string;
+    formatPreview?: (value: string) => string;
+  } | null;
+  handlePluginInput?: (value: string) => void;
+}
+
+export function ModalManager({
+  modal,
+  setModal,
+  selectedTask,
+  selectedIds,
+  projects,
+  labels,
+  searchQuery,
+  setSearchQuery,
+  sortField,
+  sortDirection,
+  filterProjectId,
+  filterView,
+  commands,
+  pluginExtensions,
+  handleAddTask,
+  handleCreateTaskFull,
+  handleAddSubtask,
+  handleEditTask,
+  handleRenameTask,
+  handleEditTaskFull,
+  handleDeleteConfirm,
+  handleBulkDeleteConfirm,
+  handleSetDueDate,
+  handleSetDeadline,
+  handleMoveToProject,
+  handleLabelsSave,
+  handleFilterInput,
+  handleSortSelect,
+  handleSearchSubmit,
+  handleSearchCancel,
+  handleCreateProject,
+  handleCreateLabel,
+  renderQuickAddPreview,
+  pendingPluginInput,
+  handlePluginInput,
+}: ModalManagerProps) {
+  return (
+    <>
+      {modal === "add" && (
+        <InputPrompt
+          prompt="New task"
+          placeholder="Buy milk tomorrow #Shopping p1 @errands"
+          onSubmit={handleAddTask}
+          onCancel={() => setModal("none")}
+          onCtrlE={() => setModal("createFull")}
+          onPreview={renderQuickAddPreview}
+          footer={
+            <Text color="gray" dimColor>
+              [Enter] create & continue  [Ctrl-E] full editor  [Esc] close
+            </Text>
+          }
+        />
+      )}
+      {modal === "createFull" && (
+        <EditTaskModal
+          projects={projects}
+          labels={labels}
+          onSave={() => {}}
+          onCreate={handleCreateTaskFull}
+          onCancel={() => setModal("none")}
+          defaultProjectId={filterProjectId}
+          defaultDue={filterView === "Today" ? "today" : undefined}
+        />
+      )}
+      {modal === "addSubtask" && selectedTask && (
+        <InputPrompt
+          prompt={`Subtask of "${selectedTask.content}"`}
+          onSubmit={handleAddSubtask}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "edit" && selectedTask && (
+        <InputPrompt
+          prompt="Edit task"
+          defaultValue={selectedTask.content}
+          onSubmit={handleEditTask}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "rename" && selectedTask && (
+        <InputPrompt
+          prompt="Rename"
+          defaultValue={selectedTask.content}
+          onSubmit={handleRenameTask}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "editFull" && selectedTask && (
+        <EditTaskModal
+          task={selectedTask}
+          projects={projects}
+          labels={labels}
+          onSave={handleEditTaskFull}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "due" && (
+        <InputPrompt
+          prompt="Due date"
+          onSubmit={handleSetDueDate}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "deadline" && (
+        <InputPrompt
+          prompt="Deadline (YYYY-MM-DD)"
+          onSubmit={handleSetDeadline}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "move" && (
+        <ProjectPicker
+          projects={projects}
+          onSelect={handleMoveToProject}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "label" && (selectedTask || selectedIds.size > 0) && (
+        <LabelPicker
+          labels={labels}
+          currentLabels={selectedTask?.labels ?? []}
+          onSave={handleLabelsSave}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "delete" && selectedTask && (
+        <ConfirmDialog
+          message={`Delete "${selectedTask.content}"?`}
+          onConfirm={handleDeleteConfirm}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "bulkDelete" && (
+        <ConfirmDialog
+          message={`Delete ${selectedIds.size} selected tasks?`}
+          onConfirm={handleBulkDeleteConfirm}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "filter" && (
+        <InputPrompt
+          prompt="Filter"
+          onSubmit={handleFilterInput}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "search" && (
+        <InputPrompt
+          prompt="Search"
+          defaultValue={searchQuery}
+          onSubmit={(val) => {
+            setSearchQuery(val);
+            handleSearchSubmit(val);
+          }}
+          onCancel={handleSearchCancel}
+        />
+      )}
+      {modal === "help" && (
+        <HelpOverlay onClose={() => setModal("none")} pluginKeybindings={pluginExtensions?.getKeybindings()} />
+      )}
+      {modal === "sort" && (
+        <SortMenu
+          currentSort={sortField}
+          currentDirection={sortDirection}
+          onSelect={handleSortSelect}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "pluginInput" && pendingPluginInput && handlePluginInput && (
+        <InputPrompt
+          prompt={pendingPluginInput.label}
+          placeholder={pendingPluginInput.placeholder}
+          onSubmit={(val) => {
+            handlePluginInput(val);
+          }}
+          onCancel={() => setModal("none")}
+          onPreview={pendingPluginInput.formatPreview ? (val: string) => {
+            const preview = pendingPluginInput.formatPreview!(val);
+            return <Text color={preview.startsWith("Invalid") || preview.startsWith("!") ? "red" : "green"}>{preview}</Text>;
+          } : undefined}
+          footer={
+            <Text color="gray" dimColor>
+              [Enter] confirm  [Esc] cancel
+            </Text>
+          }
+        />
+      )}
+      {modal === "createProject" && (
+        <InputPrompt
+          prompt="New project name"
+          placeholder="My Project"
+          onSubmit={handleCreateProject}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "createLabel" && (
+        <InputPrompt
+          prompt="New label name"
+          placeholder="my-label"
+          onSubmit={handleCreateLabel}
+          onCancel={() => setModal("none")}
+        />
+      )}
+      {modal === "command" && (
+        <CommandPalette
+          commands={commands}
+          onCancel={() => setModal("none")}
+        />
+      )}
+    </>
+  );
+}
+
+export type { Modal };

package/src/ui/components/ProjectPicker.tsx

@@ -0,0 +1,95 @@
+import { useState, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import type { Project } from "../../api/types.ts";
+import { todoistColorMap } from "../../utils/colors.ts";
+
+interface ProjectPickerProps {
+  projects: Project[];
+  onSelect: (projectId: string) => void;
+  onCancel: () => void;
+}
+
+export function ProjectPicker({ projects, onSelect, onCancel }: ProjectPickerProps) {
+  const [filterText, setFilterText] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const filtered = useMemo(() => {
+    if (!filterText) return projects;
+    const q = filterText.toLowerCase();
+    return projects.filter((p) => p.name.toLowerCase().includes(q));
+  }, [projects, filterText]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+    if (key.return) {
+      const project = filtered[selectedIndex];
+      if (project) {
+        onSelect(project.id);
+      }
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setFilterText((v) => v.slice(0, -1));
+      setSelectedIndex(0);
+      return;
+    }
+    if (key.upArrow || (input === "k" && key.ctrl)) {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+      return;
+    }
+    if (key.downArrow || (input === "j" && key.ctrl)) {
+      setSelectedIndex((i) => Math.min(filtered.length - 1, i + 1));
+      return;
+    }
+    if (input && !key.ctrl && !key.meta) {
+      setFilterText((v) => v + input);
+      setSelectedIndex(0);
+    }
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="cyan"
+      paddingX={1}
+      width={40}
+    >
+      <Box marginBottom={1}>
+        <Text bold color="cyan">Move to project</Text>
+      </Box>
+      <Box>
+        <Text color="yellow">{"> "}</Text>
+        <Text>{filterText || ""}</Text>
+        <Text backgroundColor="white" color="black">{" "}</Text>
+      </Box>
+      <Box flexDirection="column" marginTop={1}>
+        {filtered.length === 0 ? (
+          <Text color="gray">No matching projects</Text>
+        ) : (
+          filtered.slice(0, 15).map((project, i) => {
+            const isSelected = i === selectedIndex;
+            const color = todoistColorMap[project.color] ?? "white";
+            return (
+              <Box key={project.id}>
+                <Text
+                  backgroundColor={isSelected ? "blue" : undefined}
+                  color={isSelected ? "white" : undefined}
+                >
+                  <Text color={isSelected ? "white" : color}>{"  "}{project.is_inbox_project ? "> " : "  "}</Text>
+                  <Text>{project.name}</Text>
+                </Text>
+              </Box>
+            );
+          })
+        )}
+      </Box>
+      <Box marginTop={1}>
+        <Text color="gray" dimColor>[Enter] select  [Esc] cancel</Text>
+      </Box>
+    </Box>
+  );
+}