@mindtnv/todoist-cli 0.3.1 → 0.5.0

package/src/ui/components/Sidebar.tsx

@@ -0,0 +1,282 @@
+import { useState, useEffect, useMemo } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import type { Project, Label, Section } from "../../api/types.ts";
+import { getSections } from "../../api/sections.ts";
+import { mapTodoistColor } from "../../utils/colors.ts";
+import type { PluginViewDefinition } from "../../plugins/types.ts";
+
+const SIDEBAR_ICONS: Record<string, string> = {
+  inbox: "\u25A3",
+  today: "\u25C9",
+  upcoming: "\u25B7",
+  "view-stats": "\u2261",
+  "view-completed": "\u2713",
+  "view-activity": "\u2302",
+};
+
+export interface SidebarItem {
+  id: string;
+  label: string;
+  type: "builtin" | "separator" | "project" | "label" | "section" | "view";
+  color?: string;
+  taskCount?: number;
+}
+
+interface SidebarProps {
+  projects: Project[];
+  labels: Label[];
+  tasks?: import("../../api/types.ts").Task[];
+  activeProjectId?: string;
+  selectedIndex: number;
+  isFocused: boolean;
+  onSelect: (item: SidebarItem) => void;
+  onIndexChange: (index: number) => void;
+  onNavigate?: (view: string) => void;
+  pluginViews?: PluginViewDefinition[];
+}
+
+export function buildSidebarItems(
+  projects: Project[],
+  labels: Label[],
+  tasks?: import("../../api/types.ts").Task[],
+  sections?: Section[],
+  activeProjectId?: string,
+  pluginViews?: PluginViewDefinition[],
+): SidebarItem[] {
+  const taskCountByProject = new Map<string, number>();
+  const taskCountByLabel = new Map<string, number>();
+  if (tasks) {
+    for (const t of tasks) {
+      taskCountByProject.set(t.project_id, (taskCountByProject.get(t.project_id) ?? 0) + 1);
+      for (const l of t.labels) {
+        taskCountByLabel.set(l, (taskCountByLabel.get(l) ?? 0) + 1);
+      }
+    }
+  }
+
+  const inboxProject = projects.find((p) => p.is_inbox_project);
+  const today = new Date();
+  const localDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
+  const todayCount = tasks ? tasks.filter((t) => t.due?.date === localDate).length : undefined;
+  const upcomingCount = tasks ? tasks.filter((t) => t.due !== null && t.due.date >= localDate).length : undefined;
+
+  const items: SidebarItem[] = [
+    { id: "inbox", label: "Inbox", type: "builtin", taskCount: inboxProject && tasks ? taskCountByProject.get(inboxProject.id) : undefined },
+    { id: "today", label: "Today", type: "builtin", taskCount: todayCount },
+    { id: "upcoming", label: "Upcoming", type: "builtin", taskCount: upcomingCount },
+  ];
+
+  if (projects.length > 0) {
+    items.push({ id: "sep-projects", label: "Projects", type: "separator" });
+    for (const p of projects) {
+      if (!p.is_inbox_project) {
+        items.push({
+          id: p.id,
+          label: p.name,
+          type: "project",
+          color: mapTodoistColor(p.color),
+          taskCount: taskCountByProject.get(p.id),
+        });
+        // Show sections under the active project
+        if (activeProjectId && p.id === activeProjectId && sections) {
+          const projectSections = sections.filter((s) => s.project_id === p.id);
+          for (const s of projectSections) {
+            const sectionTaskCount = tasks
+              ? tasks.filter((t) => t.section_id === s.id).length
+              : undefined;
+            items.push({
+              id: `section-${s.id}`,
+              label: `  ${s.name}`,
+              type: "section",
+              color: mapTodoistColor(p.color),
+              taskCount: sectionTaskCount,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  if (labels.length > 0) {
+    items.push({ id: "sep-labels", label: "Labels", type: "separator" });
+    for (const l of labels) {
+      items.push({
+        id: l.id,
+        label: `@${l.name}`,
+        type: "label",
+        color: mapTodoistColor(l.color),
+        taskCount: taskCountByLabel.get(l.name),
+      });
+    }
+  }
+
+  items.push({ id: "sep-views", label: "Views", type: "separator" });
+  items.push({ id: "view-stats", label: "Stats", type: "view", color: "cyan" });
+  items.push({ id: "view-completed", label: "Completed", type: "view", color: "green" });
+  items.push({ id: "view-activity", label: "Activity", type: "view", color: "yellow" });
+
+  const sidebarPluginViews = pluginViews?.filter(v => v.sidebar) ?? [];
+  if (sidebarPluginViews.length > 0) {
+    items.push({ id: "sep-plugins", label: "Plugins", type: "separator" });
+    for (const pv of sidebarPluginViews) {
+      items.push({
+        id: `plugin-${pv.name}`,
+        label: pv.label,
+        type: "view",
+        color: "magenta",
+      });
+    }
+  }
+
+  return items;
+}
+
+export function Sidebar({
+  projects,
+  labels,
+  tasks,
+  activeProjectId,
+  selectedIndex,
+  isFocused,
+  onSelect,
+  onIndexChange,
+  onNavigate,
+  pluginViews,
+}: SidebarProps) {
+  const [sections, setSections] = useState<Section[]>([]);
+  const { stdout } = useStdout();
+  // Reserve lines for title, border, padding (~5 lines overhead)
+  const sidebarViewHeight = Math.max(5, (stdout?.rows ?? 24) - 5);
+
+  useEffect(() => {
+    if (!activeProjectId) {
+      setSections([]);
+      return;
+    }
+    let cancelled = false;
+    getSections(activeProjectId)
+      .then((s) => {
+        if (!cancelled) setSections(s);
+      })
+      .catch(() => {
+        // Sections are optional; ignore errors
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeProjectId]);
+
+  const items = buildSidebarItems(projects, labels, tasks, sections, activeProjectId, pluginViews);
+
+  // Build icon map including plugin view icons
+  const iconMap = useMemo(() => {
+    const icons: Record<string, string> = { ...SIDEBAR_ICONS };
+    for (const pv of pluginViews ?? []) {
+      if (pv.sidebar?.icon) {
+        icons[`plugin-${pv.name}`] = pv.sidebar.icon;
+      }
+    }
+    return icons;
+  }, [pluginViews]);
+
+  // Compute adaptive sidebar width: clamp between 20 and 36
+  const sidebarWidth = useMemo(() => {
+    const lengths = items
+      .filter((item) => item.type !== "separator")
+      .map((item) => {
+        const countStr = item.taskCount != null ? ` (${item.taskCount})`.length : 0;
+        return item.label.length + countStr + 4; // 4 for prefix "> " and padding
+      });
+    return Math.min(38, Math.max(24, Math.max(...lengths, 24)));
+  }, [items]);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (key.upArrow || input === "k") {
+        let next = selectedIndex - 1;
+        while (next >= 0 && items[next]?.type === "separator") next--;
+        if (next >= 0) onIndexChange(next);
+      } else if (key.downArrow || input === "j") {
+        let next = selectedIndex + 1;
+        while (next < items.length && items[next]?.type === "separator") next++;
+        if (next < items.length) onIndexChange(next);
+      } else if (key.return) {
+        const item = items[selectedIndex];
+        if (item && item.type === "view" && onNavigate) {
+          const viewName = item.id.startsWith("plugin-")
+            ? item.id.replace("plugin-", "")
+            : item.id.replace("view-", "");
+          onNavigate(viewName);
+        } else if (item && item.type !== "separator" && item.type !== "view") {
+          onSelect(item);
+        }
+      }
+    },
+  );
+
+  return (
+    <Box
+      flexDirection="column"
+      width={sidebarWidth}
+      borderStyle="single"
+      borderColor={isFocused ? "green" : "gray"}
+      paddingX={1}
+    >
+      <Text bold color="green">Todoist</Text>
+      <Box marginTop={1} flexDirection="column">
+        {(() => {
+          // Viewport-based scrolling
+          let scrollStart = 0;
+          if (items.length > sidebarViewHeight) {
+            const half = Math.floor(sidebarViewHeight / 2);
+            scrollStart = Math.max(0, selectedIndex - half);
+            const scrollEnd = scrollStart + sidebarViewHeight;
+            if (scrollEnd > items.length) {
+              scrollStart = Math.max(0, items.length - sidebarViewHeight);
+            }
+          }
+          const visibleItems = items.length > sidebarViewHeight
+            ? items.slice(scrollStart, scrollStart + sidebarViewHeight)
+            : items;
+
+          return visibleItems.map((item, vi) => {
+            const i = scrollStart + vi;
+            if (item.type === "separator") {
+              const isFirstSeparator = i === items.findIndex((it) => it.type === "separator");
+              return (
+                <Box key={item.id} marginTop={isFirstSeparator ? 0 : 1} flexDirection="column">
+                  <Text color="gray" dimColor bold>
+                    {item.label.toUpperCase()}
+                  </Text>
+                </Box>
+              );
+            }
+            const isSelected = i === selectedIndex && isFocused;
+            const itemColor = isSelected ? "black" : item.color ?? (item.type === "builtin" ? "white" : "cyan");
+            const countStr = item.taskCount != null ? ` (${item.taskCount})` : "";
+            const prefix = i === selectedIndex ? "> " : "  ";
+            const icon = iconMap[item.id];
+            const iconPrefix = icon ? `${icon} ` : "";
+            const fullLabel = `${iconPrefix}${item.label}`;
+            const maxLabelLen = sidebarWidth - 2 - prefix.length - countStr.length;
+            const displayLabel = fullLabel.length > maxLabelLen && maxLabelLen > 3
+              ? fullLabel.slice(0, maxLabelLen - 1) + "\u2026"
+              : fullLabel;
+            return (
+              <Text
+                key={item.id}
+                backgroundColor={isSelected ? "green" : undefined}
+                color={itemColor}
+                bold={isSelected}
+              >
+                {prefix}{displayLabel}<Text color={isSelected ? "black" : "gray"}>{countStr}</Text>
+              </Text>
+            );
+          });
+        })()}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/components/SortMenu.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+
+import type { SortField } from "../../utils/sorting.ts";
+export type { SortField };
+
+interface SortMenuProps {
+  currentSort: SortField;
+  currentDirection: "asc" | "desc";
+  onSelect: (field: SortField) => void;
+  onCancel: () => void;
+}
+
+const sortOptions: { field: SortField; label: string }[] = [
+  { field: "priority", label: "Priority" },
+  { field: "due", label: "Due date" },
+  { field: "name", label: "Name" },
+  { field: "project", label: "Project" },
+];
+
+export function SortMenu({ currentSort, currentDirection, onSelect, onCancel }: SortMenuProps) {
+  const currentIndex = sortOptions.findIndex((o) => o.field === currentSort);
+  const [selectedIndex, setSelectedIndex] = useState(currentIndex >= 0 ? currentIndex : 0);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+    if (key.return) {
+      const option = sortOptions[selectedIndex];
+      if (option) {
+        onSelect(option.field);
+      }
+      return;
+    }
+    if (key.upArrow || input === "k") {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+    } else if (key.downArrow || input === "j") {
+      setSelectedIndex((i) => Math.min(sortOptions.length - 1, i + 1));
+    }
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="magenta"
+      paddingX={2}
+      paddingY={1}
+      width={30}
+    >
+      <Box marginBottom={1}>
+        <Text bold color="magenta">Sort by</Text>
+      </Box>
+      {sortOptions.map((option, i) => {
+        const isActive = i === selectedIndex;
+        const isCurrent = option.field === currentSort;
+        const directionArrow = isCurrent ? (currentDirection === "asc" ? " ↑" : " ↓") : "";
+        return (
+          <Box key={option.field}>
+            <Text
+              backgroundColor={isActive ? "magenta" : undefined}
+              color={isActive ? "black" : isCurrent ? "magenta" : "white"}
+              bold={isActive}
+            >
+              {isActive ? "> " : "  "}{option.label}{isCurrent ? " *" : ""}{directionArrow}
+            </Text>
+          </Box>
+        );
+      })}
+      <Box marginTop={1}>
+        <Text color="gray" dimColor>Arrow keys + Enter to select (same field toggles direction), Esc to cancel</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/ui/components/StatusBar.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Box, Text } from "ink";
+import type { StatusBarItemDefinition, PluginContext } from "../../plugins/types.ts";
+
+interface StatusBarProps {
+  items: StatusBarItemDefinition[];
+  contextMap: Map<string, PluginContext>;
+}
+
+export function StatusBar({ items, contextMap }: StatusBarProps) {
+  const [tick, setTick] = useState(0);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (items.length === 0) return;
+
+    const intervals = items
+      .map((item) => item.refreshInterval)
+      .filter((v): v is number => typeof v === "number" && v > 0);
+
+    if (intervals.length === 0) return;
+
+    // Reset tick to prevent unbounded growth over long sessions
+    setTick(0);
+
+    const minInterval = Math.min(...intervals);
+    intervalRef.current = setInterval(() => {
+      // Use modular increment to avoid Number.MAX_SAFE_INTEGER overflow in very long sessions
+      setTick((t) => (t + 1) % 1_000_000);
+    }, minInterval);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [items]);
+
+  if (items.length === 0) return null;
+
+  const rendered = items
+    .map((item) => {
+      const ctx = contextMap.get(item.id);
+      if (!ctx) return null;
+      const text = item.render(ctx);
+      if (!text) return null;
+      const color = item.color ? item.color(ctx) : undefined;
+      return { id: item.id, text, color };
+    })
+    .filter(Boolean) as { id: string; text: string; color: string | undefined }[];
+
+  if (rendered.length === 0) return null;
+
+  return (
+    <Box borderStyle="single" borderColor="gray" paddingX={1} justifyContent="space-between">
+      <Box gap={1}>
+        {rendered.map((item, i) => (
+          <React.Fragment key={item.id}>
+            {i > 0 && <Text color="gray" dimColor>{"\u2502"}</Text>}
+            <Text color={item.color}>{item.text}</Text>
+          </React.Fragment>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/components/TaskList.tsx

@@ -0,0 +1,258 @@
+import { useMemo, useState, useEffect, useRef } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import type { Task } from "../../api/types.ts";
+import type { TaskColumnDefinition, PluginContext } from "../../plugins/types.ts";
+import { TaskRow } from "./TaskRow.tsx";
+
+interface TaskListProps {
+  tasks: Task[];
+  selectedIndex: number;
+  isFocused: boolean;
+  onIndexChange: (index: number) => void;
+  selectedIds?: Set<string>;
+  viewHeight?: number;
+  sortField?: string;
+  searchQuery?: string;
+  pluginColumns?: TaskColumnDefinition[];
+  pluginColumnContextMap?: Map<string, PluginContext>;
+}
+
+interface FlatTask {
+  task: Task;
+  depth: number;
+}
+
+function buildTree(tasks: Task[]): FlatTask[] {
+  const byParent = new Map<string | null, Task[]>();
+  for (const t of tasks) {
+    const parentKey = t.parent_id ?? null;
+    const existing = byParent.get(parentKey);
+    if (existing) {
+      existing.push(t);
+    } else {
+      byParent.set(parentKey, [t]);
+    }
+  }
+
+  const taskIds = new Set(tasks.map((t) => t.id));
+  const result: FlatTask[] = [];
+
+  function walk(parentId: string | null, depth: number) {
+    const children = byParent.get(parentId);
+    if (!children) return;
+    for (const child of children) {
+      result.push({ task: child, depth });
+      walk(child.id, depth + 1);
+    }
+  }
+
+  // Start with tasks whose parent is null or whose parent is not in the current set
+  const roots = tasks.filter((t) => t.parent_id === null || !taskIds.has(t.parent_id));
+
+  // Walk from roots
+  for (const root of roots) {
+    result.push({ task: root, depth: 0 });
+    walk(root.id, 1);
+  }
+
+  // Add any orphans (tasks whose parent is in set but weren't reached — shouldn't happen, but safety)
+  const visited = new Set(result.map((r) => r.task.id));
+  for (const t of tasks) {
+    if (!visited.has(t.id)) {
+      result.push({ task: t, depth: 0 });
+    }
+  }
+
+  return result;
+}
+
+export function TaskList({
+  tasks,
+  selectedIndex,
+  isFocused,
+  onIndexChange,
+  selectedIds,
+  viewHeight: viewHeightProp,
+  sortField,
+  searchQuery,
+  pluginColumns,
+  pluginColumnContextMap,
+}: TaskListProps) {
+  const { stdout } = useStdout();
+  // Reserve lines for header, border, status bar, etc. (~8 lines overhead)
+  const dynamicHeight = stdout?.rows ? Math.max(5, stdout.rows - 8) : 20;
+  const viewHeight = viewHeightProp ?? dynamicHeight;
+  const flatTasks = useMemo(() => buildTree(tasks), [tasks]);
+
+  const [pendingG, setPendingG] = useState(false);
+  const pendingGTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (pendingG) {
+      pendingGTimer.current = setTimeout(() => setPendingG(false), 1000);
+      return () => { if (pendingGTimer.current) clearTimeout(pendingGTimer.current); };
+    }
+  }, [pendingG]);
+
+  useEffect(() => {
+    if (!isFocused) {
+      setPendingG(false);
+      if (pendingGTimer.current) clearTimeout(pendingGTimer.current);
+    }
+  }, [isFocused]);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (pendingG) {
+        setPendingG(false);
+        if (input === "g") {
+          // gg -> go to top
+          onIndexChange(0);
+          return;
+        }
+        // not gg, ignore
+        return;
+      }
+
+      if (input === "g") {
+        setPendingG(true);
+        return;
+      }
+      if (input === "G") {
+        onIndexChange(Math.max(0, flatTasks.length - 1));
+        return;
+      }
+      if (key.ctrl && input === "d") {
+        onIndexChange(Math.min(flatTasks.length - 1, selectedIndex + Math.floor(viewHeight / 2)));
+        return;
+      }
+      if (key.ctrl && input === "u") {
+        onIndexChange(Math.max(0, selectedIndex - Math.floor(viewHeight / 2)));
+        return;
+      }
+
+      if (key.upArrow || input === "k") {
+        onIndexChange(Math.max(0, selectedIndex - 1));
+      } else if (key.downArrow || input === "j") {
+        onIndexChange(Math.min(flatTasks.length - 1, selectedIndex + 1));
+      }
+    },
+  );
+
+  if (flatTasks.length === 0) {
+    return (
+      <Box
+        flexDirection="column"
+        flexGrow={1}
+        borderStyle="single"
+        borderColor={isFocused ? "blue" : "gray"}
+        paddingX={1}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Text color="gray">No tasks here</Text>
+        <Box marginTop={1}>
+          <Text color="gray" dimColor>Press </Text>
+          <Text color="green">a</Text>
+          <Text color="gray" dimColor> to add a task or </Text>
+          <Text color="cyan">/</Text>
+          <Text color="gray" dimColor> to search</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  const halfHeight = Math.floor(viewHeight / 2);
+  let scrollStart = Math.max(0, selectedIndex - halfHeight);
+  const scrollEnd = Math.min(flatTasks.length, scrollStart + viewHeight);
+  if (scrollEnd === flatTasks.length) {
+    scrollStart = Math.max(0, flatTasks.length - viewHeight);
+  }
+  const visibleTasks = flatTasks.slice(scrollStart, scrollEnd);
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      borderStyle="single"
+      borderColor={isFocused ? "blue" : "gray"}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text bold color="blue">Tasks</Text>
+        <Text color="gray">{` (${flatTasks.length})`}</Text>
+      </Box>
+      {sortField === "due" ? (
+        (() => {
+          const today = new Date();
+          const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
+          const tomorrow = new Date(today);
+          tomorrow.setDate(tomorrow.getDate() + 1);
+          const tomorrowStr = `${tomorrow.getFullYear()}-${String(tomorrow.getMonth() + 1).padStart(2, "0")}-${String(tomorrow.getDate()).padStart(2, "0")}`;
+          let lastGroup = "";
+          // Track what group the task before the visible window was in
+          for (let k = 0; k < scrollStart; k++) {
+            const ft = flatTasks[k];
+            if (ft && ft.depth === 0) {
+              const d = ft.task.due?.date ?? "9999-99-99";
+              if (d < todayStr) lastGroup = "Overdue";
+              else if (d === todayStr) lastGroup = "Today";
+              else if (d === tomorrowStr) lastGroup = "Tomorrow";
+              else if (d === "9999-99-99") lastGroup = "No date";
+              else lastGroup = d;
+            }
+          }
+          return visibleTasks.map((item, i) => {
+            const dueDate = item.task.due?.date ?? "9999-99-99";
+            let group: string;
+            if (dueDate < todayStr) group = "Overdue";
+            else if (dueDate === todayStr) group = "Today";
+            else if (dueDate === tomorrowStr) group = "Tomorrow";
+            else if (dueDate === "9999-99-99") group = "No date";
+            else group = dueDate;
+            const showHeader = group !== lastGroup && item.depth === 0;
+            if (showHeader) lastGroup = group;
+            return (
+              <Box key={item.task.id} flexDirection="column">
+                {showHeader && (
+                  <Text color="yellow" bold dimColor>{`-- ${group} --`}</Text>
+                )}
+                <TaskRow
+                  task={item.task}
+                  isSelected={scrollStart + i === selectedIndex}
+                  isMarked={selectedIds?.has(item.task.id)}
+                  depth={item.depth}
+                  searchQuery={searchQuery}
+                  pluginColumns={pluginColumns}
+                  pluginColumnContextMap={pluginColumnContextMap}
+                />
+              </Box>
+            );
+          });
+        })()
+      ) : (
+        visibleTasks.map((item, i) => (
+          <TaskRow
+            key={item.task.id}
+            task={item.task}
+            isSelected={scrollStart + i === selectedIndex}
+            isMarked={selectedIds?.has(item.task.id)}
+            depth={item.depth}
+            searchQuery={searchQuery}
+            pluginColumns={pluginColumns}
+            pluginColumnContextMap={pluginColumnContextMap}
+          />
+        ))
+      )}
+      {flatTasks.length > viewHeight && (
+        <Box marginTop={1}>
+          <Text color="gray" dimColor>
+            {scrollStart + 1}-{scrollEnd}/{flatTasks.length}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}