@mindtnv/todoist-cli 0.3.1 → 0.5.0

package/src/ui/components/TaskRow.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Task } from "../../api/types.ts";
+import type { TaskColumnDefinition, PluginContext } from "../../plugins/types.ts";
+import { formatRelativeDue, formatDeadlineShort, isDeadlineUrgent } from "../../utils/date-format.ts";
+
+interface TaskRowProps {
+  task: Task;
+  isSelected: boolean;
+  isMarked?: boolean;
+  depth?: number;
+  searchQuery?: string;
+  pluginColumns?: TaskColumnDefinition[];
+  pluginColumnContextMap?: Map<string, PluginContext>;
+}
+
+function highlightMatch(text: string, query: string): React.ReactNode {
+  if (!query) return text;
+  const lowerText = text.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+  const idx = lowerText.indexOf(lowerQuery);
+  if (idx === -1) return text;
+  const before = text.slice(0, idx);
+  const match = text.slice(idx, idx + query.length);
+  const after = text.slice(idx + query.length);
+  return (
+    <>
+      {before ? <Text>{before}</Text> : null}
+      <Text backgroundColor="yellow" color="black">{match}</Text>
+      {after ? <Text>{after}</Text> : null}
+    </>
+  );
+}
+
+const priorityConfig: Record<number, { dot: string; color: string }> = {
+  4: { dot: "\u25CF", color: "red" },
+  3: { dot: "\u25CF", color: "yellow" },
+  2: { dot: "\u25CF", color: "blue" },
+  1: { dot: "\u25CB", color: "gray" },
+};
+
+export function TaskRow({ task, isSelected, isMarked = false, depth = 0, searchQuery, pluginColumns, pluginColumnContextMap }: TaskRowProps) {
+  const checkbox = task.is_completed ? "\u2611" : "\u2610";
+  const prio = priorityConfig[task.priority] ?? { dot: "\u25CB", color: "gray" };
+  const dueInfo = task.due ? formatRelativeDue(task.due.date) : null;
+  const dueText = dueInfo ? dueInfo.text : "";
+  const dueColor = dueInfo ? dueInfo.color : "cyan";
+  const recurringIndicator = task.due?.is_recurring ? " \u21BB" : "";
+  const labelText = task.labels.length > 0 ? task.labels.map((l) => `@${l}`).join(" ") : "";
+  const marker = isMarked ? "\u25cf " : "  ";
+  const indent = depth > 0 ? "  ".repeat(depth) + "\u2514 " : "";
+  const deadlineText = task.deadline ? formatDeadlineShort(task.deadline.date) : "";
+  const deadlineUrgent = task.deadline ? isDeadlineUrgent(task.deadline.date) : false;
+  const commentCount = task.comment_count ?? 0;
+  const commentText = commentCount > 0 ? `\u2709 ${commentCount}` : "";
+
+  // Truncate content to fit terminal width
+  const termWidth = process.stdout.columns ?? 80;
+  const markerWidth = 2; // "* " or "  "
+  const indentWidth = indent.length;
+  const checkboxPrioWidth = 4; // "X D " (checkbox + space + dot + space)
+  const dueWidth = dueText ? dueText.length + 3 : 0; // " [text]"
+  const recurringWidth = recurringIndicator ? 2 : 0;
+  const deadlineWidth = deadlineText ? deadlineText.length + 3 : 0; // " F date"
+  const labelWidth = labelText ? labelText.length + 1 : 0;
+  const commentWidth = commentText ? commentText.length + 1 : 0;
+  // Sidebar width is dynamic (24-38), estimate from terminal width
+  const sidebarWidth = Math.min(38, Math.max(24, Math.floor(termWidth * 0.25)));
+  const borderPadding = 4; // task list borders/padding
+  const pluginColumnsWidth = pluginColumns?.reduce((w, c) => w + (c.width ?? 8) + 1, 0) ?? 0;
+  const overhead = sidebarWidth + borderPadding + markerWidth + indentWidth + checkboxPrioWidth + dueWidth + recurringWidth + deadlineWidth + labelWidth + commentWidth + pluginColumnsWidth + 1;
+  const maxContent = Math.max(10, termWidth - overhead);
+  const content = task.content.length > maxContent ? task.content.slice(0, maxContent - 1) + "\u2026" : task.content;
+
+  return (
+    <Box>
+      <Text
+        backgroundColor={isSelected && isMarked ? "magenta" : isSelected ? "blue" : isMarked ? "gray" : undefined}
+        color={isSelected || isMarked ? "white" : undefined}
+      >
+        <Text color={isMarked ? "yellow" : "gray"}>{marker}</Text>
+        {indent ? <Text color="gray" dimColor>{indent}</Text> : null}
+        <Text>{checkbox} </Text>
+        <Text color={prio.color}>{prio.dot}</Text>
+        {" "}
+        <Text strikethrough={task.is_completed}>{searchQuery ? highlightMatch(content, searchQuery) : content}</Text>
+        {dueText ? <Text color={dueColor}>{` [${dueText}]`}</Text> : null}
+        {recurringIndicator ? <Text color="cyan">{recurringIndicator}</Text> : null}
+        {deadlineText ? <Text color={deadlineUrgent ? "red" : "magenta"} bold={deadlineUrgent}>{` \u2691 ${deadlineText}`}</Text> : null}
+        {labelText ? <Text color="magenta">{` ${labelText}`}</Text> : null}
+        {commentText ? <Text color="gray">{` ${commentText}`}</Text> : null}
+        {pluginColumns?.map(col => {
+          const colCtx = pluginColumnContextMap?.get(col.id);
+          if (!colCtx) return null;
+          const rawText = col.render(task, colCtx) ?? "";
+          const colWidth = col.width ?? 8;
+          const fixedText = rawText.length > colWidth ? rawText.slice(0, colWidth - 1) + "\u2026" : rawText.padEnd(colWidth);
+          const textColor = col.color?.(task) ?? "dim";
+          return <Text key={col.id} color={textColor}>{` ${fixedText}`}</Text>;
+        })}
+        {" "}
+      </Text>
+    </Box>
+  );
+}

package/src/ui/hooks/useKeyboardHandler.ts

@@ -0,0 +1,291 @@
+import { useInput } from "ink";
+import type { Task } from "../../api/types.ts";
+import type { ExtensionRegistry, PluginContext } 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";
+type Panel = "sidebar" | "tasks";
+
+interface UseKeyboardHandlerOptions {
+  modal: Modal;
+  activePanel: Panel;
+  setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
+  setModal: (modal: Modal) => void;
+  selectedTask: Task | undefined;
+  selectedIds: Set<string>;
+  setSelectedIds: React.Dispatch<React.SetStateAction<Set<string>>>;
+  filteredTasks: Task[];
+  taskIndex: number;
+  rangeSelectAnchor: number | null;
+  setRangeSelectAnchor: React.Dispatch<React.SetStateAction<number | null>>;
+  searchQuery: string;
+  setSearchQuery: (q: string) => void;
+  apiFilteredTasks: Task[] | null;
+  setApiFilteredTasks: React.Dispatch<React.SetStateAction<Task[] | null>>;
+  setFilterProjectId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setFilterSectionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setFilterLabel: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setFilterView: React.Dispatch<React.SetStateAction<string>>;
+  setTaskIndex: React.Dispatch<React.SetStateAction<number>>;
+  pendingQuit: boolean;
+  setPendingQuit: React.Dispatch<React.SetStateAction<boolean>>;
+  pendingQuitTimerRef: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
+  showStatus: (msg: string) => void;
+  onQuit: () => void;
+  onOpenTask?: (task: Task) => void;
+  refreshTasks: () => Promise<void>;
+  // Handlers
+  handleCompleteTask: () => Promise<void>;
+  handleBulkComplete: () => Promise<void>;
+  handleSetPriority: (priority: 1 | 2 | 3 | 4) => Promise<void>;
+  handleUndo: () => Promise<void>;
+  handleRedo: () => Promise<void>;
+  handleDuplicateTask: () => Promise<void>;
+  handleOpenInBrowser: () => void;
+  handleCopyUrl: () => void;
+  toggleSelection: () => void;
+  handleRangeSelect: () => void;
+  // Plugin
+  pluginExtensions?: ExtensionRegistry | null;
+  pluginKeybindingContextMap?: Map<string, PluginContext>;
+}
+
+export function useKeyboardHandler({
+  modal,
+  activePanel,
+  setActivePanel,
+  setModal,
+  selectedTask,
+  selectedIds,
+  setSelectedIds,
+  filteredTasks,
+  rangeSelectAnchor,
+  setRangeSelectAnchor,
+  searchQuery,
+  setSearchQuery,
+  apiFilteredTasks,
+  setApiFilteredTasks,
+  setFilterProjectId,
+  setFilterSectionId,
+  setFilterLabel,
+  setFilterView,
+  setTaskIndex,
+  pendingQuit,
+  setPendingQuit,
+  pendingQuitTimerRef,
+  showStatus,
+  onQuit,
+  onOpenTask,
+  refreshTasks,
+  handleCompleteTask,
+  handleBulkComplete,
+  handleSetPriority,
+  handleUndo,
+  handleRedo,
+  handleDuplicateTask,
+  handleOpenInBrowser,
+  handleCopyUrl,
+  toggleSelection,
+  handleRangeSelect,
+  pluginExtensions,
+  pluginKeybindingContextMap,
+}: UseKeyboardHandlerOptions) {
+  useInput((input, key) => {
+    if (modal === "search" || modal === "command") {
+      return;
+    }
+    if (modal !== "none") return;
+
+    if (key.tab) {
+      setActivePanel((p) => (p === "sidebar" ? "tasks" : "sidebar"));
+      return;
+    }
+    if (input === "h" && activePanel === "tasks") {
+      setActivePanel("sidebar");
+      return;
+    }
+    if (input === "l" && activePanel === "sidebar") {
+      setActivePanel("tasks");
+      return;
+    }
+    if (input === "q") {
+      if (selectedIds.size > 0 && !pendingQuit) {
+        setPendingQuit(true);
+        showStatus("Press q again to quit (selections will be lost)");
+        if (pendingQuitTimerRef.current) clearTimeout(pendingQuitTimerRef.current);
+        pendingQuitTimerRef.current = setTimeout(() => setPendingQuit(false), 2000);
+        return;
+      }
+      if (pendingQuitTimerRef.current) clearTimeout(pendingQuitTimerRef.current);
+      onQuit();
+      return;
+    }
+    if (activePanel === "tasks") {
+      if (input !== "q" && pendingQuit) {
+        setPendingQuit(false);
+        if (pendingQuitTimerRef.current) clearTimeout(pendingQuitTimerRef.current);
+      }
+      if (key.escape) {
+        if (rangeSelectAnchor !== null) {
+          setRangeSelectAnchor(null);
+          showStatus("");
+          return;
+        }
+        if (selectedIds.size > 0) {
+          setSelectedIds(new Set());
+          showStatus("");
+          return;
+        }
+        if (searchQuery) {
+          setSearchQuery("");
+          showStatus("");
+          return;
+        }
+        if (apiFilteredTasks !== null) {
+          setApiFilteredTasks(null);
+          setFilterView("Inbox");
+          setTaskIndex(0);
+          showStatus("");
+          return;
+        }
+        return;
+      }
+      if (key.ctrl && input === "a") {
+        const allIds = new Set(filteredTasks.map((t) => t.id));
+        setSelectedIds(allIds);
+        showStatus(`${allIds.size} tasks selected`);
+        return;
+      }
+      if (key.ctrl && input === "n") {
+        setSelectedIds(new Set());
+        setRangeSelectAnchor(null);
+        showStatus("");
+        return;
+      }
+      if (input === " ") {
+        toggleSelection();
+        return;
+      }
+      if (input === "v") {
+        handleRangeSelect();
+        return;
+      }
+      if (key.return && selectedTask && onOpenTask) {
+        onOpenTask(selectedTask);
+        return;
+      }
+      if (input === "1" || input === "2" || input === "3" || input === "4") {
+        handleSetPriority(Number(input) as 1 | 2 | 3 | 4);
+        return;
+      }
+      if (input === "u") {
+        handleUndo();
+        return;
+      }
+      if (input === "U") {
+        handleRedo();
+        return;
+      }
+      if (input === "Y") {
+        handleDuplicateTask();
+        return;
+      }
+      if (input === "a") {
+        setModal("add");
+      } else if (input === "N") {
+        setModal("createFull");
+      } else if (input === "A") {
+        if (selectedTask) {
+          setModal("addSubtask");
+        }
+      } else if (input === "c") {
+        if (selectedIds.size > 0) {
+          handleBulkComplete();
+        } else if (selectedTask) {
+          handleCompleteTask();
+        }
+      } else if (input === "d") {
+        if (selectedIds.size > 0) {
+          setModal("bulkDelete");
+        } else if (selectedTask) {
+          setModal("delete");
+        }
+      } else if (input === "D") {
+        if (selectedTask || selectedIds.size > 0) {
+          setModal("deadline");
+        }
+      } else if (input === "t") {
+        if (selectedTask || selectedIds.size > 0) {
+          setModal("due");
+        }
+      } else if (input === "m") {
+        if (selectedTask || selectedIds.size > 0) {
+          setModal("move");
+        }
+      } else if (input === "l") {
+        if (selectedTask || selectedIds.size > 0) {
+          setModal("label");
+        }
+      } else if (input === "o") {
+        handleOpenInBrowser();
+      } else if (input === "y") {
+        handleCopyUrl();
+      } else if (input === "/") {
+        setModal("search");
+      } else if (input === "f") {
+        setModal("filter");
+      } else if (input === "s") {
+        setModal("sort");
+      } else if (input === "?") {
+        setModal("help");
+      } else if (input === ":") {
+        setModal("command");
+      } else if (input === "e") {
+        if (selectedTask) {
+          setModal("editFull");
+        }
+      } else if (input === "r") {
+        if (selectedTask) {
+          setModal("rename");
+        }
+      } else if (input === "R") {
+        refreshTasks();
+        showStatus("Refreshing...");
+      } else if (input === "!") {
+        setFilterProjectId(undefined);
+        setFilterSectionId(undefined);
+        setFilterLabel(undefined);
+        setFilterView("Inbox");
+        setApiFilteredTasks(null);
+        setTaskIndex(0);
+      } else if (input === "@") {
+        setFilterProjectId(undefined);
+        setFilterSectionId(undefined);
+        setFilterLabel(undefined);
+        setFilterView("Today");
+        setApiFilteredTasks(null);
+        setTaskIndex(0);
+      } else if (input === "#") {
+        setFilterProjectId(undefined);
+        setFilterSectionId(undefined);
+        setFilterLabel(undefined);
+        setFilterView("Upcoming");
+        setApiFilteredTasks(null);
+        setTaskIndex(0);
+      } else if (pluginExtensions) {
+        const keyStr = key.ctrl ? `ctrl+${input}` : input;
+        const binding = pluginExtensions.getKeybindings().find(k => k.key === keyStr);
+        if (binding) {
+          const ctx = pluginKeybindingContextMap?.get(binding.key);
+          if (ctx) {
+            binding.action(ctx, selectedTask ?? null).then((result) => {
+              if (result?.statusMessage) showStatus(result.statusMessage);
+            }).catch((err) => {
+              console.warn("[plugin-keybinding]", err);
+              showStatus(`Plugin error: ${err instanceof Error ? err.message : "unknown"}`);
+            });
+          }
+        }
+      }
+    }
+  });
+}

package/src/ui/hooks/useStatusMessage.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+
+interface UseStatusMessageOptions {
+  initialMessage?: string;
+  autoClearMs?: number;
+  onInitialClear?: () => void;
+}
+
+export function useStatusMessage({
+  initialMessage,
+  autoClearMs = 3000,
+  onInitialClear,
+}: UseStatusMessageOptions = {}) {
+  const [message, setMessage] = useState("");
+
+  // Pick up initial status from parent (e.g. after detail view action)
+  useEffect(() => {
+    if (initialMessage) {
+      setMessage(initialMessage);
+      onInitialClear?.();
+    }
+  }, [initialMessage, onInitialClear]);
+
+  // Auto-clear status message
+  useEffect(() => {
+    if (!message) return;
+    const timer = setTimeout(() => setMessage(""), autoClearMs);
+    return () => clearTimeout(timer);
+  }, [message, autoClearMs]);
+
+  return { message, show: setMessage, clear: () => setMessage("") };
+}