ttrak 0.1.0

package/src/ui/components/TaskItem.ts

@@ -0,0 +1,149 @@
+import { BoxRenderable, TextRenderable, type CliRenderer } from "@opentui/core";
+import type { Task } from "../../schema";
+import type { Theme } from "../theme";
+
+function adjustColorForSelection(color: string): string {
+  const hex = color.replace("#", "");
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+
+  const factor = 1.5;
+  const newR = Math.min(255, Math.floor(r * factor));
+  const newG = Math.min(255, Math.floor(g * factor));
+  const newB = Math.min(255, Math.floor(b * factor));
+
+  return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
+}
+
+export class TaskItem {
+  private container: BoxRenderable;
+  private statusIcon: TextRenderable;
+  private idText: TextRenderable;
+  private titleText: TextRenderable;
+  private metaText: TextRenderable;
+  private task: Task;
+  private theme: Theme;
+
+  constructor(renderer: CliRenderer, task: Task, theme: Theme, index: number) {
+    this.task = task;
+    this.theme = theme;
+
+    this.container = new BoxRenderable(renderer, {
+      id: `task-${index}`,
+      height: 1,
+      flexDirection: "row",
+      backgroundColor: "transparent",
+    });
+
+    const icon =
+      task.status === "done"
+        ? "✓"
+        : task.status === "inProgress"
+          ? "▶"
+          : task.status === "cancelled"
+            ? "✗"
+            : "○";
+    const iconColor =
+      task.status === "done"
+        ? theme.success
+        : task.status === "inProgress"
+          ? theme.warning
+          : task.status === "cancelled"
+            ? theme.error
+            : theme.fg;
+    this.statusIcon = new TextRenderable(renderer, {
+      id: `status-${index}`,
+      content: icon,
+      fg: iconColor,
+      width: 2,
+    });
+
+    this.idText = new TextRenderable(renderer, {
+      id: `id-${index}`,
+      content: task.id.padEnd(10),
+      fg: theme.muted,
+      width: 10,
+    });
+
+    this.titleText = new TextRenderable(renderer, {
+      id: `title-${index}`,
+      content: task.title,
+      fg: theme.fg,
+      flexGrow: 1,
+    });
+
+    const priorityLabel =
+      task.priority === "none"
+        ? ""
+        : `[${task.priority.toUpperCase().slice(0, 3)}]`;
+    const priorityColor =
+      task.priority === "urgent"
+        ? theme.error
+        : task.priority === "high"
+          ? theme.warning
+          : task.priority === "medium"
+            ? theme.accent
+            : task.priority === "low"
+              ? theme.muted
+              : theme.muted;
+    const source = task.linear ? "L" : task.github ? "G" : "";
+    this.metaText = new TextRenderable(renderer, {
+      id: `meta-${index}`,
+      content: `${priorityLabel} ${source}`.trim(),
+      fg: priorityColor,
+      width: 10,
+    });
+
+    this.container.add(this.statusIcon);
+    this.container.add(this.idText);
+    this.container.add(this.titleText);
+    this.container.add(this.metaText);
+  }
+
+  setSelected(selected: boolean) {
+    const statusColor =
+      this.task.status === "done"
+        ? this.theme.success
+        : this.task.status === "inProgress"
+          ? this.theme.warning
+          : this.task.status === "cancelled"
+            ? this.theme.error
+            : this.theme.fg;
+
+    const priorityColor =
+      this.task.priority === "urgent"
+        ? this.theme.error
+        : this.task.priority === "high"
+          ? this.theme.warning
+          : this.task.priority === "medium"
+            ? this.theme.accent
+            : this.theme.muted;
+
+    if (selected) {
+      this.container.backgroundColor = this.theme.selectedBg;
+      this.titleText.fg = this.theme.selectedFg;
+      this.idText.fg = this.theme.selectedFg;
+      this.statusIcon.fg = this.theme.selectedFg;
+      this.metaText.fg = this.theme.selectedFg;
+    } else {
+      this.container.backgroundColor = "transparent";
+      this.titleText.fg = this.theme.fg;
+      this.idText.fg = this.theme.muted;
+      this.statusIcon.fg = statusColor;
+      this.metaText.fg = priorityColor;
+    }
+  }
+
+  getRenderable(): BoxRenderable {
+    return this.container;
+  }
+
+  getTask(): Task {
+    return this.task;
+  }
+
+  destroy() {
+    this.container.destroy();
+  }
+}

package/src/ui/components/TaskModal.ts

@@ -0,0 +1,295 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  InputRenderable,
+  TabSelectRenderable,
+  type CliRenderer,
+  type KeyEvent,
+} from "@opentui/core";
+import type { Task } from "../../schema";
+import type { Theme } from "../theme";
+
+type ModalMode = "create" | "edit";
+
+export interface TaskModalResult {
+  title: string;
+  priority: Task["priority"];
+  status: Task["status"];
+}
+
+export class TaskModal {
+  private renderer: CliRenderer;
+  private theme: Theme;
+  private overlay: BoxRenderable;
+  private modal: BoxRenderable;
+  private titleInput: InputRenderable;
+  private prioritySelect: TabSelectRenderable;
+  private statusSelect: TabSelectRenderable;
+  private boundKeyHandler: (key: KeyEvent) => void;
+  private onSubmit: ((result: TaskModalResult) => void) | null = null;
+  private onCancel: (() => void) | null = null;
+  private focusIndex = 0;
+  private mode: ModalMode;
+  private initialTask?: Task;
+
+  constructor(renderer: CliRenderer, theme: Theme) {
+    this.renderer = renderer;
+    this.theme = theme;
+    this.mode = "create";
+    this.boundKeyHandler = this.handleKeyPress.bind(this);
+
+    const termWidth = renderer.terminalWidth;
+    const termHeight = renderer.terminalHeight;
+    const modalWidth = 50;
+    const modalHeight = 14;
+    const modalLeft = Math.floor((termWidth - modalWidth) / 2);
+    const modalTop = Math.floor((termHeight - modalHeight) / 2);
+
+    this.overlay = new BoxRenderable(renderer, {
+      id: "modal-overlay",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: termWidth,
+      height: termHeight,
+      backgroundColor: "#00000088",
+      zIndex: 100,
+    });
+
+    this.modal = new BoxRenderable(renderer, {
+      id: "task-modal",
+      position: "absolute",
+      left: modalLeft,
+      top: modalTop,
+      width: modalWidth,
+      height: modalHeight,
+      backgroundColor: theme.bg,
+      borderStyle: "single",
+      borderColor: theme.accent,
+      border: true,
+      flexDirection: "column",
+      zIndex: 101,
+    });
+
+    const titleLabel = new TextRenderable(renderer, {
+      id: "modal-title-label",
+      content: "Title:",
+      fg: theme.fg,
+      height: 1,
+      marginLeft: 1,
+      marginTop: 1,
+    });
+
+    this.titleInput = new InputRenderable(renderer, {
+      id: "modal-title-input",
+      width: modalWidth - 4,
+      height: 1,
+      placeholder: "Enter task title...",
+      backgroundColor: theme.border,
+      focusedBackgroundColor: theme.selectedBg,
+      textColor: theme.fg,
+      focusedTextColor: theme.selectedFg,
+      placeholderColor: theme.muted,
+      cursorColor: theme.accent,
+      marginLeft: 1,
+      marginTop: 1,
+    });
+
+    const priorityLabel = new TextRenderable(renderer, {
+      id: "modal-priority-label",
+      content: "Priority:",
+      fg: theme.fg,
+      height: 1,
+      marginLeft: 1,
+      marginTop: 1,
+    });
+
+    this.prioritySelect = new TabSelectRenderable(renderer, {
+      id: "modal-priority-select",
+      width: modalWidth - 4,
+      height: 3,
+      options: [
+        { name: "None", description: "", value: "none" },
+        { name: "Low", description: "", value: "low" },
+        { name: "Med", description: "", value: "medium" },
+        { name: "High", description: "", value: "high" },
+        { name: "Urgent", description: "", value: "urgent" },
+      ],
+      tabWidth: 8,
+      showDescription: false,
+      backgroundColor: theme.bg,
+      focusedBackgroundColor: theme.bg,
+      textColor: theme.muted,
+      focusedTextColor: theme.fg,
+      selectedBackgroundColor: theme.bg,
+      selectedTextColor: theme.accent,
+      showUnderline: true,
+      showScrollArrows: false,
+      marginLeft: 1,
+    });
+
+    const statusLabel = new TextRenderable(renderer, {
+      id: "modal-status-label",
+      content: "Status:",
+      fg: theme.fg,
+      height: 1,
+      marginLeft: 1,
+      marginTop: 1,
+    });
+
+    this.statusSelect = new TabSelectRenderable(renderer, {
+      id: "modal-status-select",
+      width: modalWidth - 4,
+      height: 3,
+      options: [
+        { name: "Todo", description: "", value: "todo" },
+        { name: "In Progress", description: "", value: "inProgress" },
+        { name: "Done", description: "", value: "done" },
+        { name: "Cancelled", description: "", value: "cancelled" },
+      ],
+      tabWidth: 10,
+      showDescription: false,
+      backgroundColor: theme.bg,
+      focusedBackgroundColor: theme.bg,
+      textColor: theme.muted,
+      focusedTextColor: theme.fg,
+      selectedBackgroundColor: theme.bg,
+      selectedTextColor: theme.accent,
+      showUnderline: true,
+      showScrollArrows: false,
+      marginLeft: 1,
+    });
+
+    const footer = new TextRenderable(renderer, {
+      id: "modal-footer",
+      content: "Tab:switch fields  Enter:save  Esc:cancel",
+      fg: theme.muted,
+      height: 1,
+      marginLeft: 1,
+      marginTop: 1,
+    });
+
+    this.modal.add(titleLabel);
+    this.modal.add(this.titleInput);
+    this.modal.add(priorityLabel);
+    this.modal.add(this.prioritySelect);
+    this.modal.add(statusLabel);
+    this.modal.add(this.statusSelect);
+    this.modal.add(footer);
+
+    this.overlay.visible = false;
+    this.modal.visible = false;
+
+    renderer.root.add(this.overlay);
+    renderer.root.add(this.modal);
+  }
+
+  show(mode: ModalMode, task?: Task): Promise<TaskModalResult | null> {
+    return new Promise((resolve) => {
+      this.mode = mode;
+      this.initialTask = task;
+
+      if (task) {
+        this.titleInput.value = task.title;
+        const priorityIndex = [
+          "none",
+          "low",
+          "medium",
+          "high",
+          "urgent",
+        ].indexOf(task.priority);
+        if (priorityIndex >= 0) {
+          this.prioritySelect.setSelectedIndex(priorityIndex);
+        }
+        const statusIndex = ["todo", "inProgress", "done", "cancelled"].indexOf(
+          task.status,
+        );
+        if (statusIndex >= 0) {
+          this.statusSelect.setSelectedIndex(statusIndex);
+        }
+        this.titleInput.cursorPosition = task.title.length;
+      } else {
+        this.titleInput.value = "";
+        this.prioritySelect.setSelectedIndex(0);
+        this.statusSelect.setSelectedIndex(0);
+        this.titleInput.cursorPosition = 0;
+      }
+
+      this.overlay.visible = true;
+      this.modal.visible = true;
+      this.focusIndex = 0;
+
+      queueMicrotask(() => {
+        this.updateFocus();
+        this.renderer.keyInput.on("keypress", this.boundKeyHandler);
+      });
+
+      this.onSubmit = (result) => {
+        this.hide();
+        resolve(result);
+      };
+
+      this.onCancel = () => {
+        this.hide();
+        resolve(null);
+      };
+    });
+  }
+
+  private hide() {
+    this.renderer.keyInput.off("keypress", this.boundKeyHandler);
+    this.overlay.visible = false;
+    this.modal.visible = false;
+    this.titleInput.blur();
+    this.prioritySelect.blur();
+    this.statusSelect.blur();
+  }
+
+  private updateFocus() {
+    if (this.focusIndex === 0) {
+      this.titleInput.focus();
+      this.prioritySelect.blur();
+      this.statusSelect.blur();
+    } else if (this.focusIndex === 1) {
+      this.titleInput.blur();
+      this.prioritySelect.focus();
+      this.statusSelect.blur();
+    } else {
+      this.titleInput.blur();
+      this.prioritySelect.blur();
+      this.statusSelect.focus();
+    }
+  }
+
+  private handleKeyPress(key: KeyEvent) {
+    if (key.name === "escape") {
+      this.onCancel?.();
+      return;
+    }
+
+    if (key.name === "tab") {
+      this.focusIndex = (this.focusIndex + 1) % 3;
+      this.updateFocus();
+      return;
+    }
+
+    if (key.name === "return" || key.name === "enter") {
+      const title = this.titleInput.value.trim();
+      if (!title) return;
+
+      const priorityOption = this.prioritySelect.getSelectedOption();
+      const priority = (priorityOption?.value as Task["priority"]) || "none";
+
+      const statusOption = this.statusSelect.getSelectedOption();
+      const status = (statusOption?.value as Task["status"]) || "todo";
+
+      this.onSubmit?.({ title, priority, status });
+    }
+  }
+
+  destroy() {
+    this.renderer.keyInput.off("keypress", this.boundKeyHandler);
+    this.overlay.destroy();
+    this.modal.destroy();
+  }
+}

package/src/ui/theme.ts

@@ -0,0 +1,87 @@
+import type { CliRenderer } from "@opentui/core";
+import { flavors } from "@catppuccin/palette";
+import type { ThemeConfig } from "../schema";
+
+export interface Theme {
+  bg: string;
+  fg: string;
+  accent: string;
+  muted: string;
+  error: string;
+  success: string;
+  warning: string;
+  border: string;
+  selectedBg: string;
+  selectedFg: string;
+}
+
+function luminance(hex: string): number {
+  const rgb = parseInt(hex.slice(1), 16);
+  const r = ((rgb >> 16) & 0xff) / 255;
+  const g = ((rgb >> 8) & 0xff) / 255;
+  const b = (rgb & 0xff) / 255;
+  return 0.299 * r + 0.587 * g + 0.114 * b;
+}
+
+async function detectDarkMode(renderer: CliRenderer): Promise<boolean> {
+  try {
+    const palette = await renderer.getPalette();
+    const bg = (palette as any)?.defaultBackground;
+    if (!bg) return true;
+    return luminance(bg) < 0.5;
+  } catch {
+    return true;
+  }
+}
+
+export async function getTheme(renderer: CliRenderer, config: ThemeConfig): Promise<Theme> {
+  if (config.mode === "catppuccin") {
+    const flavor = flavors[config.flavor];
+    return {
+      bg: flavor.colors.base.hex,
+      fg: flavor.colors.text.hex,
+      accent: flavor.colors.blue.hex,
+      muted: flavor.colors.overlay0.hex,
+      error: flavor.colors.red.hex,
+      success: flavor.colors.green.hex,
+      warning: flavor.colors.yellow.hex,
+      border: flavor.colors.surface1.hex,
+      selectedBg: flavor.colors.blue.hex,
+      selectedFg: flavor.colors.base.hex,
+    };
+  }
+
+  if (config.mode === "system") {
+    const palette = await renderer.getPalette();
+    const bg = (palette as any)?.defaultBackground || "#000000";
+    const fg = (palette as any)?.defaultForeground || "#ffffff";
+    return {
+      bg,
+      fg,
+      accent: "#00aaff",
+      muted: "#888888",
+      error: "#ff5555",
+      success: "#50fa7b",
+      warning: "#ffb86c",
+      border: "#44475a",
+      selectedBg: "#00aaff",
+      selectedFg: "#000000",
+    };
+  }
+
+  const isDark = await detectDarkMode(renderer);
+  const flavor = isDark ? flavors.mocha : flavors.latte;
+
+  return {
+    bg: flavor.colors.base.hex,
+    fg: flavor.colors.text.hex,
+    accent: flavor.colors.blue.hex,
+    muted: flavor.colors.overlay0.hex,
+    error: flavor.colors.red.hex,
+    success: flavor.colors.green.hex,
+    warning: flavor.colors.yellow.hex,
+    border: flavor.colors.surface1.hex,
+    selectedBg: flavor.colors.blue.hex,
+    selectedFg: flavor.colors.base.hex,
+  };
+}