@soleone/pi-tasks 0.2.1

package/src/ui/pages/show.ts

@@ -0,0 +1,425 @@
+import { DynamicBorder, type ExtensionCommandContext } from "@mariozechner/pi-coding-agent"
+import { Container, Key, Spacer, Text, matchesKey, truncateToWidth, visibleWidth, type Component } from "@mariozechner/pi-tui"
+import {
+  buildPrimaryHelpText,
+  buildSecondaryHelpText,
+  getHeaderStatus,
+  isSameDraft,
+  normalizeDraft,
+  type FormDraft,
+  type FormFocus,
+  type FormMode,
+  type HeaderStatus,
+} from "../../controllers/show.ts"
+import { buildTaskIdentityText, buildTaskListTextParts, formatTaskTypeCode, type Task, type TaskStatus } from "../../models/task.ts"
+import { BlurEditorField } from "../components/blur-editor.ts"
+import { KEYBOARD_HELP_PADDING_X, formatKeyboardHelp } from "../components/keyboard-help.ts"
+import { MinHeightContainer } from "../components/min-height.ts"
+
+export type TaskFormAction = "back" | "close_list"
+
+export interface TaskFormResult {
+  action: TaskFormAction
+}
+
+interface ShowTaskFormOptions {
+  mode: FormMode
+  subtitle: string
+  task: Task
+  ctrlQ: string
+  cycleStatus: (status: TaskStatus) => TaskStatus
+  cycleTaskType: (taskType: string | undefined) => string
+  parsePriorityKey: (data: string) => string | null
+  priorities: string[]
+  priorityHotkeys?: Record<string, string>
+  onSave: (draft: FormDraft) => Promise<boolean>
+}
+
+function buildPageTitle(theme: any, subtitle: string, status?: HeaderStatus): string {
+  const base = `${theme.fg("muted", theme.bold("Tasks"))}${theme.fg("dim", ` • ${subtitle}`)}`
+  if (!status) return base
+
+  const marker = status.icon ? theme.fg(status.color, status.icon) : "•"
+  return `${base} ${marker} ${theme.fg(status.color, status.message)}`
+}
+
+function buildSelectedTaskLine(
+  mode: FormMode,
+  theme: any,
+  rowIdentity: string,
+  rowMeta: string,
+  priority: string | undefined,
+  taskType: string | undefined,
+): string {
+  if (mode === "create") {
+    const identity = buildTaskIdentityText(priority, "new")
+    return `${theme.fg("accent", SELECTED_ITEM_PREFIX)}${identity} ${formatTaskTypeCode(taskType)}`
+  }
+
+  return `${theme.fg("accent", SELECTED_ITEM_PREFIX)}${rowIdentity} ${rowMeta}`
+}
+
+function fieldLabel(theme: any, label: string, focused: boolean): string {
+  const color = focused ? "accent" : "muted"
+  return theme.fg(color, theme.bold(`  ${label}`))
+}
+
+const SELECTED_ITEM_PREFIX = "› "
+const DESCRIPTION_FIELD_HEIGHT = 8
+const PAGE_CONTENT_MIN_HEIGHT = 19
+
+class FixedHeightField implements Component {
+  constructor(private child: Component, private height: number) {}
+
+  invalidate(): void {
+    this.child.invalidate()
+  }
+
+  render(width: number): string[] {
+    const lines = this.child.render(width)
+
+    if (lines.length === this.height) return lines
+
+    if (lines.length < this.height) {
+      return [...lines, ...Array(this.height - lines.length).fill(" ".repeat(Math.max(0, width)))]
+    }
+
+    if (this.height <= 1) {
+      return [lines[lines.length - 1] || ""]
+    }
+
+    const bottomLine = lines[lines.length - 1] || ""
+    const bodyLines = lines.slice(0, lines.length - 1)
+    const viewportHeight = this.height - 1
+
+    const cursorIndex = bodyLines.findIndex(line => line.includes("\x1b[7m"))
+
+    let start = Math.max(0, bodyLines.length - viewportHeight)
+    if (cursorIndex >= 0) {
+      if (cursorIndex < start) {
+        start = cursorIndex
+      } else if (cursorIndex >= start + viewportHeight) {
+        start = cursorIndex - viewportHeight + 1
+      }
+    }
+
+    const clippedBody = bodyLines.slice(start, start + viewportHeight)
+    if (clippedBody.length < viewportHeight) {
+      clippedBody.push(...Array(viewportHeight - clippedBody.length).fill(" ".repeat(Math.max(0, width))))
+    }
+
+    return [...clippedBody, bottomLine]
+  }
+
+  handleInput(data: string): void {
+    const childWithInput = this.child as Component & { handleInput?: (input: string) => void }
+    childWithInput.handleInput?.(data)
+  }
+}
+
+class ReservedLineText implements Component {
+  private text = ""
+
+  constructor(private paddingX = 1) {}
+
+  setText(text: string): void {
+    this.text = text
+  }
+
+  invalidate(): void {}
+
+  render(width: number): string[] {
+    const innerWidth = Math.max(0, width - this.paddingX * 2)
+    const left = " ".repeat(this.paddingX)
+    const right = " ".repeat(this.paddingX)
+
+    if (!this.text || this.text.trim().length === 0) {
+      return [`${left}${" ".repeat(innerWidth)}${right}`]
+    }
+
+    const content = truncateToWidth(this.text, innerWidth)
+    const trailingPadding = Math.max(0, innerWidth - visibleWidth(content))
+    return [`${left}${content}${" ".repeat(trailingPadding)}${right}`]
+  }
+}
+
+export async function showTaskForm(ctx: ExtensionCommandContext, options: ShowTaskFormOptions): Promise<TaskFormResult> {
+  const { mode, subtitle, task, ctrlQ, cycleStatus, cycleTaskType, parsePriorityKey, priorities, priorityHotkeys, onSave } = options
+
+  let taskTypeValue = task.taskType
+  let titleValue = task.title
+  let descValue = task.description ?? ""
+  let statusValue = task.status
+  let priorityValue = task.priority
+
+  return ctx.ui.custom<TaskFormResult>((tui: any, theme: any, _kb: any, done: any) => {
+    const container = new Container()
+    const headerContainer = new Container()
+    const formContainer = new Container()
+    const footerContainer = new Container()
+    const paddedFormContainer = new MinHeightContainer(formContainer, PAGE_CONTENT_MIN_HEIGHT)
+
+    container.addChild(headerContainer)
+    container.addChild(paddedFormContainer)
+    container.addChild(footerContainer)
+
+    const pageTitleText = new Text("", 1, 0)
+    const selectedTaskText = new Text("", 0, 0)
+    const titleLabel = new Text("", 0, 0)
+    const descLabel = new Text("", 0, 0)
+    const helpText = new ReservedLineText(KEYBOARD_HELP_PADDING_X)
+    const shortcutsText = new ReservedLineText(KEYBOARD_HELP_PADDING_X)
+
+    let focus: FormFocus = mode === "create" ? "title" : "nav"
+    let saveIndicator: "saving" | "saved" | "error" | undefined
+    let saveIndicatorTimer: ReturnType<typeof setTimeout> | undefined
+    let saving = false
+    let disposed = false
+
+    const editorTheme = {
+      borderColor: (s: string) => theme.fg("accent", s),
+      selectList: {
+        selectedPrefix: (t: string) => theme.fg("accent", t),
+        selectedText: (t: string) => theme.fg("accent", t),
+        description: (t: string) => theme.fg("muted", t),
+        scrollInfo: (t: string) => theme.fg("dim", t),
+        noMatch: (t: string) => theme.fg("warning", t),
+      },
+    }
+
+    const titleEditor = new BlurEditorField(tui, editorTheme, {
+      stripTopBorder: true,
+      blurredBorderColor: (s: string) => theme.fg("muted", s),
+      paddingX: 2,
+      indentX: 2,
+    })
+    titleEditor.setText(titleValue)
+    titleEditor.disableSubmit = true
+    titleEditor.onChange = (text: string) => {
+      const normalized = text.replace(/\r?\n/g, " ")
+      if (normalized !== text) {
+        titleEditor.setText(normalized)
+        return
+      }
+      titleValue = normalized
+    }
+
+    const descEditor = new BlurEditorField(tui, editorTheme, {
+      stripTopBorder: true,
+      blurredBorderColor: (s: string) => theme.fg("muted", s),
+      paddingX: 2,
+      indentX: 2,
+    })
+    const descEditorField = new FixedHeightField(descEditor, DESCRIPTION_FIELD_HEIGHT)
+    descEditor.setText(descValue)
+    descEditor.disableSubmit = true
+    descEditor.onChange = (text: string) => {
+      descValue = text
+    }
+
+    const currentDraft = (): FormDraft => ({
+      title: titleValue,
+      description: descValue,
+      status: statusValue,
+      priority: priorityValue,
+      taskType: taskTypeValue,
+    })
+
+    let lastSavedDraft: FormDraft = currentDraft()
+
+    const triggerSave = async () => {
+      if (saving || disposed) return
+
+      const draft = currentDraft()
+      if (isSameDraft(draft, lastSavedDraft)) return
+
+      saving = true
+      if (saveIndicatorTimer) clearTimeout(saveIndicatorTimer)
+      saveIndicator = "saving"
+      renderLayout()
+
+      try {
+        const didSave = await onSave(draft)
+        if (disposed) return
+        if (!didSave) {
+          saveIndicator = undefined
+          return
+        }
+        lastSavedDraft = normalizeDraft(draft)
+        saveIndicator = "saved"
+      } catch (e) {
+        if (disposed) return
+        saveIndicator = "error"
+        ctx.ui.notify(e instanceof Error ? e.message : String(e), "error")
+      } finally {
+        saving = false
+        if (!disposed) renderLayout()
+      }
+
+      if (saveIndicator === "saved" && !disposed) {
+        saveIndicatorTimer = setTimeout(() => {
+          if (disposed) return
+          saveIndicator = undefined
+          renderLayout()
+        }, 5000)
+      }
+    }
+
+    const renderLayout = () => {
+      titleEditor.focused = focus === "title"
+      descEditor.focused = focus === "desc"
+
+      const rowParts = buildTaskListTextParts({
+        ...task,
+        title: titleValue,
+        description: descValue,
+        status: statusValue,
+        priority: priorityValue,
+        taskType: taskTypeValue,
+      })
+
+      const headerStatus = getHeaderStatus(saveIndicator, focus)
+      pageTitleText.setText(buildPageTitle(theme, subtitle, headerStatus))
+      selectedTaskText.setText(
+        buildSelectedTaskLine(mode, theme, rowParts.identity, rowParts.meta, priorityValue, taskTypeValue),
+      )
+      titleLabel.setText(fieldLabel(theme, "Title", focus === "title"))
+      descLabel.setText(fieldLabel(theme, "Description", focus === "desc"))
+
+      helpText.setText(formatKeyboardHelp(theme, buildPrimaryHelpText(focus)))
+      const secondaryHelp = buildSecondaryHelpText(focus, priorities, priorityHotkeys)
+      shortcutsText.setText(secondaryHelp ? formatKeyboardHelp(theme, secondaryHelp) : "")
+
+      container.invalidate()
+      tui.requestRender()
+    }
+
+    headerContainer.addChild(new DynamicBorder((s: string) => theme.fg("dim", s)))
+    headerContainer.addChild(pageTitleText)
+    headerContainer.addChild(selectedTaskText)
+
+    formContainer.addChild(new Spacer(1))
+    formContainer.addChild(titleLabel)
+    formContainer.addChild(titleEditor)
+    formContainer.addChild(new Spacer(1))
+    formContainer.addChild(descLabel)
+    formContainer.addChild(descEditorField)
+
+    footerContainer.addChild(new DynamicBorder((s: string) => theme.fg("dim", s)))
+    footerContainer.addChild(helpText)
+    footerContainer.addChild(shortcutsText)
+    footerContainer.addChild(new DynamicBorder((s: string) => theme.fg("dim", s)))
+
+    renderLayout()
+
+    const requestRender = () => {
+      container.invalidate()
+      tui.requestRender()
+    }
+
+    const handleTitleInput = (data: string) => {
+      if (matchesKey(data, Key.enter)) {
+        focus = "nav"
+        void triggerSave()
+        renderLayout()
+        return
+      }
+
+      if (matchesKey(data, Key.tab)) {
+        focus = "desc"
+        renderLayout()
+        return
+      }
+
+      titleEditor.handleInput(data)
+      requestRender()
+    }
+
+    const handleDescInput = (data: string) => {
+      if (matchesKey(data, Key.enter)) {
+        descEditor.insertTextAtCursor("\n")
+        requestRender()
+        return
+      }
+
+      if (matchesKey(data, Key.tab)) {
+        focus = "nav"
+        void triggerSave()
+        renderLayout()
+        return
+      }
+
+      descEditor.handleInput(data)
+      requestRender()
+    }
+
+    const handleNavInput = (data: string) => {
+      if (matchesKey(data, Key.enter)) {
+        void triggerSave()
+        return
+      }
+
+      if (matchesKey(data, Key.tab)) {
+        focus = "title"
+        renderLayout()
+        return
+      }
+
+      if (matchesKey(data, Key.escape) || matchesKey(data, Key.left) || data === "q" || data === "Q") {
+        done({ action: "back" })
+        return
+      }
+
+      if (data === "t" || data === "T") {
+        taskTypeValue = cycleTaskType(taskTypeValue)
+        renderLayout()
+        return
+      }
+
+      if (data === " ") {
+        statusValue = cycleStatus(statusValue)
+        renderLayout()
+        return
+      }
+
+      const priority = parsePriorityKey(data)
+      if (priority !== null) {
+        priorityValue = priority
+        renderLayout()
+      }
+    }
+
+    return {
+      render: (w: number) => container.render(w).map((line: string) => truncateToWidth(line, w)),
+      invalidate: () => container.invalidate(),
+      dispose: () => {
+        disposed = true
+        if (saveIndicatorTimer) clearTimeout(saveIndicatorTimer)
+      },
+      handleInput: (data: string) => {
+        if (data === ctrlQ) {
+          done({ action: "close_list" })
+          return
+        }
+
+        if (focus !== "nav" && matchesKey(data, Key.escape)) {
+          focus = "nav"
+          renderLayout()
+          return
+        }
+
+        if (focus === "title") {
+          handleTitleInput(data)
+          return
+        }
+
+        if (focus === "desc") {
+          handleDescInput(data)
+          return
+        }
+
+        handleNavInput(data)
+      },
+    }
+  })
+}