refactor(cli): extract interactive menu into reusable module (#3)

Extract duplicate menu rendering logic from `index.ts` into a new `src/menu.ts` module, providing generic `selectOne` and `selectMany` functions. This reduces code duplication, improves maintainability, and adds consistent UI controls display across the commit flow and platform selection. Reviewed-on: #3
2026-06-11 18:12:12 +08:00
parent 6ff541284e
commit 1ea180387c
5 changed files with 364 additions and 376 deletions
@@ -0,0 +1,307 @@
+import { BOLD, GREEN, CYAN, DIM, RESET } from "./terminal";
+
+const UP = "\x1b[A";
+const DOWN = "\x1b[B";
+const ALT_UP = "\x1bOA";
+const ALT_DOWN = "\x1bOB";
+const SPACE = " ";
+const ENTER = "\r";
+const CTRL_C = "\x03";
+
+export interface Choice<T> {
+  label: string;
+  value: T;
+  description?: string;
+  selected?: boolean;
+}
+
+interface BasePromptOptions {
+  title: string;
+  subtitle?: string;
+  cancelMessage?: string;
+}
+
+interface SinglePromptOptions<T> extends BasePromptOptions {
+  items: Choice<T>[];
+}
+
+interface MultiPromptOptions<T> extends BasePromptOptions {
+  items: Choice<T>[];
+  selectAllLabel?: string;
+  doneLabel?: string;
+}
+
+function hideCursor() {
+  process.stdout.write("\x1b[?25l");
+}
+
+function showCursor() {
+  process.stdout.write("\x1b[?25h");
+}
+
+function moveUp(lines: number) {
+  if (lines > 0) process.stdout.write(`\x1b[${lines}A`);
+}
+
+function clearLine() {
+  process.stdout.write("\r\x1b[2K");
+}
+
+function visibleLength(value: string) {
+  return value.replace(/\x1b\[[0-9;]*m/g, "").length;
+}
+
+function padLabel(label: string, width: number) {
+  return label + " ".repeat(Math.max(1, width - visibleLength(label)));
+}
+
+function controls(mode: "single" | "multi") {
+  if (mode === "single") {
+    return `${DIM}↑/↓ navigate · enter/space select · ctrl+c cancel${RESET}`;
+  }
+  return `${DIM}↑/↓ navigate · space toggle · enter confirm · ctrl+c cancel${RESET}`;
+}
+
+function renderPrompt(lines: string[], previousLines: number) {
+  if (previousLines > 0) {
+    for (let i = 0; i < previousLines; i++) {
+      clearLine();
+      process.stdout.write("\n");
+    }
+    moveUp(previousLines);
+  }
+
+  for (const line of lines) {
+    process.stdout.write(`${line}\n`);
+  }
+  moveUp(lines.length);
+  return lines.length;
+}
+
+function clearPrompt(lines: number) {
+  for (let i = 0; i < lines; i++) {
+    clearLine();
+    process.stdout.write("\n");
+  }
+  moveUp(lines);
+}
+
+function normalizeKey(key: string, escapeBuf: string) {
+  if (key === UP || key === ALT_UP) return { action: "up", escapeBuf: "" };
+  if (key === DOWN || key === ALT_DOWN) return { action: "down", escapeBuf: "" };
+  if (key === SPACE) return { action: "space", escapeBuf: "" };
+  if (key === ENTER) return { action: "enter", escapeBuf: "" };
+  if (key === CTRL_C) return { action: "cancel", escapeBuf: "" };
+
+  if (key === "\x1b" || key.startsWith("\x1b[")) {
+    return { action: null, escapeBuf: key };
+  }
+
+  if (escapeBuf) {
+    const next = escapeBuf + key;
+    if (next === UP || next === ALT_UP) return { action: "up", escapeBuf: "" };
+    if (next === DOWN || next === ALT_DOWN) return { action: "down", escapeBuf: "" };
+    return {
+      action: null,
+      escapeBuf: /^[A-Za-z~]$/.test(key) || next.length > 8 ? "" : next,
+    };
+  }
+
+  return { action: null, escapeBuf: "" };
+}
+
+function createLines<T>(
+  options: BasePromptOptions & { items: Choice<T>[] },
+  mode: "single" | "multi",
+  cursor: number,
+) {
+  const labelWidth = Math.max(
+    ...options.items.map((item) => visibleLength(item.label)),
+    0,
+  ) + 2;
+
+  const lines = [
+    "",
+    `  ${BOLD}${options.title}${RESET}`,
+  ];
+
+  if (options.subtitle) lines.push(`  ${DIM}${options.subtitle}${RESET}`);
+  lines.push(`  ${controls(mode)}`, "");
+
+  for (let i = 0; i < options.items.length; i++) {
+    const item = options.items[i]!;
+    const active = i === cursor;
+    const pointer = active ? `${CYAN}❯${RESET}` : " ";
+    const marker = mode === "single"
+      ? active ? `${GREEN}●${RESET}` : `${DIM}○${RESET}`
+      : item.selected ? `${GREEN}◼${RESET}` : `${DIM}□${RESET}`;
+    const label = active ? `${BOLD}${item.label}${RESET}` : item.label;
+    const description = item.description
+      ? active ? item.description : `${DIM}${item.description}${RESET}`
+      : "";
+
+    lines.push(
+      `  ${pointer} ${marker} ${padLabel(label, labelWidth)}${description}`,
+    );
+  }
+
+  return lines;
+}
+
+function ensureTTY(title: string) {
+  if (process.stdin.isTTY !== true) {
+    throw new Error(`${title} requires a TTY.`);
+  }
+}
+
+export async function selectOne<T>(
+  options: SinglePromptOptions<T>,
+): Promise<T | null> {
+  ensureTTY(options.title);
+
+  let cursor = 0;
+  let renderedLines = 0;
+  let escapeBuf = "";
+  const wasRaw = process.stdin.isRaw;
+
+  if (wasRaw !== true) process.stdin.setRawMode(true);
+  process.stdin.resume();
+  hideCursor();
+
+  const render = () => {
+    renderedLines = renderPrompt(
+      createLines(options, "single", cursor),
+      renderedLines,
+    );
+  };
+
+  render();
+
+  return new Promise((resolve) => {
+    const finish = (value: T | null) => {
+      process.stdin.setRawMode(wasRaw === true);
+      process.stdin.pause();
+      process.stdin.removeListener("data", onData);
+      clearPrompt(renderedLines);
+      showCursor();
+      if (value === null && options.cancelMessage) {
+        process.stdout.write(`  ${options.cancelMessage}\n`);
+      }
+      resolve(value);
+    };
+
+    const onData = (data: Buffer) => {
+      const result = normalizeKey(data.toString(), escapeBuf);
+      escapeBuf = result.escapeBuf;
+
+      if (result.action === "cancel") return finish(null);
+      if (result.action === "up" && cursor > 0) {
+        cursor--;
+        render();
+      } else if (result.action === "down" && cursor < options.items.length - 1) {
+        cursor++;
+        render();
+      } else if (result.action === "space" || result.action === "enter") {
+        finish(options.items[cursor]!.value);
+      }
+    };
+
+    process.stdin.on("data", onData);
+  });
+}
+
+export async function selectMany<T>(
+  options: MultiPromptOptions<T>,
+): Promise<T[] | null> {
+  ensureTTY(options.title);
+
+  const items: Choice<T | null>[] = options.selectAllLabel
+    ? [
+        { label: options.selectAllLabel, value: null, selected: false },
+        ...options.items.map((item) => ({ ...item })),
+      ]
+    : options.items.map((item) => ({ ...item }));
+
+  let cursor = 0;
+  let renderedLines = 0;
+  let escapeBuf = "";
+  const wasRaw = process.stdin.isRaw;
+
+  if (wasRaw !== true) process.stdin.setRawMode(true);
+  process.stdin.resume();
+  hideCursor();
+
+  const syncSelectAll = () => {
+    if (!options.selectAllLabel) return;
+    items[0]!.selected = items.slice(1).every((item) => item.selected);
+  };
+
+  const toggle = (index: number) => {
+    const item = items[index]!;
+    item.selected = !item.selected;
+
+    if (options.selectAllLabel && index === 0) {
+      for (let i = 1; i < items.length; i++) {
+        items[i]!.selected = item.selected;
+      }
+    } else {
+      syncSelectAll();
+    }
+  };
+
+  const render = () => {
+    renderedLines = renderPrompt(
+      createLines(
+        {
+          title: options.title,
+          subtitle: options.subtitle,
+          items,
+        },
+        "multi",
+        cursor,
+      ),
+      renderedLines,
+    );
+  };
+
+  render();
+
+  return new Promise((resolve) => {
+    const finish = (value: T[] | null) => {
+      process.stdin.setRawMode(wasRaw === true);
+      process.stdin.pause();
+      process.stdin.removeListener("data", onData);
+      clearPrompt(renderedLines);
+      showCursor();
+      if (value === null && options.cancelMessage) {
+        process.stdout.write(`  ${options.cancelMessage}\n`);
+      }
+      resolve(value);
+    };
+
+    const onData = (data: Buffer) => {
+      const result = normalizeKey(data.toString(), escapeBuf);
+      escapeBuf = result.escapeBuf;
+
+      if (result.action === "cancel") return finish(null);
+      if (result.action === "up" && cursor > 0) {
+        cursor--;
+        render();
+      } else if (result.action === "down" && cursor < items.length - 1) {
+        cursor++;
+        render();
+      } else if (result.action === "space") {
+        toggle(cursor);
+        render();
+      } else if (result.action === "enter") {
+        finish(
+          items
+            .filter((item) => item.selected && item.value !== null)
+            .map((item) => item.value as T),
+        );
+      }
+    };
+
+    process.stdin.on("data", onData);
+  });
+}
@@ -151,7 +151,7 @@ export async function createPR(
    }

    const match = stdout.match(/(https?:\/\/[^\s]+)/);
-    return match ? match[1] : stdout.trim();
+    return match?.[1] ?? stdout.trim();
  }

  const args = [
@@ -180,5 +180,5 @@ export async function createPR(
  }

  const match = stdout.match(/(https?:\/\/[^\s]+)/);
-  return match ? match[1] : stdout.trim();
+  return match?.[1] ?? stdout.trim();
 }
@@ -1,37 +1,6 @@
 import type { FileEntry } from "./types";
-import { BOLD, GREEN, YELLOW, CYAN, DIM, RESET } from "./terminal";
-
-const UP = "\x1b[A";
-const DOWN = "\x1b[B";
-const SPACE = " ";
-const ENTER = "\r";
-const CTRL_C = "\x03";
-
-function hideCursor() {
-  process.stdout.write("\x1b[?25l");
-}
-
-function showCursor() {
-  process.stdout.write("\x1b[?25h");
-}
-
-function moveUp(n: number) {
-  process.stdout.write(`\x1b[${n}A`);
-}
-
-function moveDown(n: number) {
-  process.stdout.write(`\x1b[${n}B`);
-}
-
-function clearLine() {
-  process.stdout.write("\x1b[2K\r");
-}
-
-interface SelectItem {
-  label: string;
-  path: string;
-  selected: boolean;
-}
+import { BOLD, GREEN, YELLOW, RESET } from "./terminal";
+import { selectMany } from "./menu";

 export async function selectFiles(
  stagedFiles: FileEntry[],
@@ -46,123 +15,27 @@ export async function selectFiles(
    }
  }

-  const items: SelectItem[] = [
-    { label: "Select all", path: "__all__", selected: false },
-    ...unstagedFiles.map((f) => ({
-      label: `${f.path} (${f.label})`,
-      path: f.path,
-      selected: false,
+  if (process.stdin.isTTY !== true) return [];
+
+  const selected = await selectMany({
+    title: "Select files to stage",
+    subtitle: `${unstagedFiles.length} unstaged file${unstagedFiles.length > 1 ? "s" : ""} available`,
+    selectAllLabel: "Select all",
+    cancelMessage: "Aborted.",
+    items: unstagedFiles.map((f) => ({
+      label: f.path,
+      value: f.path,
+      description: f.label,
    })),
-  ];
-
-  let cursor = 0;
-
-  process.stdout.write(`\n  ${BOLD}Select files to stage:${RESET}\n`);
-  process.stdout.write(`  ${DIM}↑/↓ navigate, space select, enter confirm${RESET}\n\n`);
-
-  const itemStartRow = 4 + (stagedFiles.length > 0 ? stagedFiles.length + 2 : 0);
-
-  function render() {
-    for (let i = 0; i < items.length; i++) {
-      process.stdout.write("\x1b[2K\r");
-      const item = items[i]!;
-      const isAll = i === 0;
-      const cursor_ = i === cursor ? `${CYAN}❯${RESET} ` : "  ";
-      const checkbox = item.selected ? `${GREEN}◉${RESET}` : `${DIM}○${RESET}`;
-
-      if (isAll) {
-        process.stdout.write(`${cursor_} ${checkbox} ${BOLD}${item.label}${RESET}\n`);
-      } else {
-        process.stdout.write(`${cursor_} ${checkbox} ${item.path.includes("(") ? item.label : `${item.label}`}\n`);
-      }
-    }
-    moveUp(items.length);
-  }
-
-  function toggleItem(index: number) {
-    const item = items[index]!;
-    item.selected = !item.selected;
-
-    if (index === 0) {
-      for (let i = 1; i < items.length; i++) {
-        items[i]!.selected = item.selected;
-      }
-    } else {
-      const allSelected = items.slice(1).every((it) => it.selected);
-      items[0]!.selected = allSelected;
-    }
-  }
-
-  return new Promise((resolve) => {
-    if (process.stdin.isTTY !== true) {
-      resolve([]);
-      return;
-    }
-
-    const wasRaw = process.stdin.isRaw;
-    if (wasRaw !== true) {
-      process.stdin.setRawMode(true);
-    }
-    process.stdin.resume();
-    hideCursor();
-
-    render();
-
-    const onData = (data: Buffer) => {
-      const key = data.toString();
-
-      if (key === CTRL_C) {
-        process.stdin.setRawMode(wasRaw === true);
-        process.stdin.pause();
-        process.stdin.removeListener("data", onData);
-        showCursor();
-        for (let i = 0; i < items.length; i++) {
-          process.stdout.write("\x1b[2K\n");
-        }
-        moveUp(items.length);
-        process.stdout.write(`\n  Aborted.\n`);
-        process.exit(1);
-      }
-
-      if (key === UP) {
-        if (cursor > 0) {
-          cursor--;
-          render();
-        }
-      } else if (key === DOWN) {
-        if (cursor < items.length - 1) {
-          cursor++;
-          render();
-        }
-      } else if (key === SPACE) {
-        toggleItem(cursor);
-        render();
-      } else if (key === ENTER) {
-        process.stdin.setRawMode(wasRaw === true);
-        process.stdin.pause();
-        process.stdin.removeListener("data", onData);
-
-        for (let i = 0; i < items.length; i++) {
-          process.stdout.write("\x1b[2K\n");
-        }
-        moveUp(items.length);
-
-        const selected = items
-          .slice(1)
-          .filter((it) => it.selected)
-          .map((it) => it.path);
-
-        if (selected.length > 0) {
-          process.stdout.write(
-            `  ${GREEN}Staged ${selected.length} file(s):${RESET} ${selected.join(", ")}\n`,
-          );
-        }
-
-        showCursor();
-        resolve(selected);
-      }
-    };
-
-    process.stdin.on("data", onData);
  });
+
+  if (selected === null) process.exit(1);
+
+  if (selected.length > 0) {
+    process.stdout.write(
+      `  ${GREEN}Staged ${selected.length} file(s):${RESET} ${selected.join(", ")}\n`,
+    );
+  }
+
+  return selected;
 }