tui-kanban-board 0.1.0

package/README.md

@@ -0,0 +1,147 @@
+# TUI Trello Kanban Board
+
+ターミナル上で動作するカンバンボードです。キーボードだけで操作できます。
+
+## インストール
+
+[GitHub Releases](../../releases/latest) からお使いのプラットフォームのファイルをダウンロードしてください。
+
+> **注意**: プライベートリポジトリのため、ダウンロードには GitHub の認証が必要です。
+> `gh` CLI（[GitHub CLI](https://cli.github.com/)）を使うと便利です。
+
+### Linux (x64)
+
+```bash
+gh release download --repo OWNER/REPO --pattern "tkb-linux-x64.tar.gz"
+tar xzf tkb-linux-x64.tar.gz
+chmod +x tkb
+./tkb
+```
+
+### macOS (Apple Silicon / M1以降)
+
+```bash
+gh release download --repo OWNER/REPO --pattern "tkb-darwin-arm64.tar.gz"
+tar xzf tkb-darwin-arm64.tar.gz
+chmod +x tkb
+# セキュリティ確認をスキップ（初回のみ）
+xattr -d com.apple.quarantine tkb
+./tkb
+```
+
+### macOS (Intel)
+
+```bash
+gh release download --repo OWNER/REPO --pattern "tkb-darwin-x64.tar.gz"
+tar xzf tkb-darwin-x64.tar.gz
+chmod +x tkb
+xattr -d com.apple.quarantine tkb
+./tkb
+```
+
+### Windows (x64)
+
+```powershell
+gh release download --repo OWNER/REPO --pattern "tkb-windows-x64.zip"
+Expand-Archive tkb-windows-x64.zip .
+.\tkb.exe
+```
+
+---
+
+## 使い方
+
+`.tkb` ファイルがあるディレクトリで実行します。ファイルが存在しない場合は自動で作成されます。
+
+```bash
+# カレントディレクトリの .tkb を開く
+./tkb
+
+# ファイルを指定して開く
+./tkb path/to/board.tkb
+```
+
+## キーボードショートカット
+
+### ボード操作
+
+| キー | 動作 |
+|------|------|
+| `←` / `→` | 列を移動 |
+| `↑` / `↓` / `k` / `j` | カードを移動 |
+| `Enter` | カードをプレビュー |
+| `n` | カードを新規追加 |
+| `e` | カードを編集 |
+| `d` | カードを削除 |
+| `Shift+←/→` | カードを隣の列に移動 |
+| `q` | 終了 |
+
+### 列操作
+
+| キー | 動作 |
+|------|------|
+| `N`（Shift+n） | 列を追加（現在の列の右隣） |
+| `E`（Shift+e） | 列名を編集 |
+| `D`（Shift+d） | 列を削除 |
+| `Ctrl+←/→` | 列を左右に並び替え |
+
+### プレビュー / 編集モード
+
+| キー | 動作 |
+|------|------|
+| `Esc` | 閉じる / キャンセル |
+| `Ctrl+S` | 保存 |
+| `e` | プレビューから編集へ |
+
+## カードの書き方（Markdown対応）
+
+カードの内容は Markdown で書けます。
+
+```markdown
+# 見出し
+
+**太字** / *斜体* / ~~取り消し線~~ / `コード`
+
+- リストアイテム
+  - ネストされたアイテム
+
+1. 順序付きリスト
+2. 二番目
+
+| ヘッダ1 | ヘッダ2 |
+|---------|---------|
+| セル1   | セル2   |
+```
+
+## ファイル形式 (.tkb)
+
+JSON 形式のファイルです。操作のたびに自動保存されます。
+
+```json
+{
+  "scope": "Workspace",
+  "columns": [
+    {
+      "id": "column-xxx",
+      "title": "To Do",
+      "tasksIds": ["task-yyy"]
+    }
+  ],
+  "tasks": {
+    "task-yyy": {
+      "id": "task-yyy",
+      "description": "タスクの内容",
+      "columnId": "column-xxx"
+    }
+  }
+}
+```
+
+---
+
+## 開発
+
+```bash
+bun install
+bun dev
+```

package/bin/tkb.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env bun
+import "../src/index.tsx";
+

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "tui-kanban-board",
+  "description": "Task Management App of TUI",
+  "version": "0.1.0",
+  "module": "src/index.tsx",
+  "type": "module",
+  "private": false,
+  "bin": {
+    "tkb": "./bin/tkb.js"
+  },
+  "scripts": {
+    "dev": "bun run --watch src/index.tsx",
+    "build": "bun build src/index.tsx --outdir dist --target node --format esm"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@opentui/core": "^0.1.50",
+    "@opentui/react": "^0.1.50",
+    "react": "^19.2.4"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,388 @@
+import { useState, useRef, useEffect } from "react";
+import { useKeyboard, useRenderer } from "@opentui/react";
+import type { BoardType, Mode } from "./types.ts";
+import {
+  saveBoard,
+  createTask,
+  addTask,
+  updateTask,
+  deleteTask,
+  moveTask,
+  createColumn,
+  addColumn,
+  updateColumn,
+  deleteColumn,
+  moveColumn,
+} from "./store.ts";
+import { Board } from "./components/Board.tsx";
+import { EditModal } from "./components/EditModal.tsx";
+import { ConfirmModal } from "./components/ConfirmModal.tsx";
+import { PreviewModal } from "./components/PreviewModal.tsx";
+import { ColumnEditModal } from "./components/ColumnEditModal.tsx";
+import { StatusBar } from "./components/StatusBar.tsx";
+
+interface Props {
+  filePath: string;
+  initialBoard: BoardType;
+}
+
+/**
+ * アプリケーションのルートコンポーネント
+ * @param filePath - .tkbファイルのパス
+ * @param initialBoard - 初期ボードデータ
+ */
+export function App({ filePath, initialBoard }: Props) {
+  const renderer = useRenderer();
+  const [board, setBoard] = useState(initialBoard);
+  const [colIdx, setColIdx] = useState(0);
+  const [cardIdx, setCardIdx] = useState(0);
+  const [mode, setMode] = useState<Mode>("board");
+  const [editingTaskId, setEditingTaskId] = useState<string | null>(null);
+  const [editingColId, setEditingColId] = useState<string | null>(null);
+  const [statusMsg, setStatusMsg] = useState("");
+
+  // キーボードハンドラ内で常に最新のboard値を参照するためのref
+  const boardRef = useRef(board);
+  boardRef.current = board;
+
+  // EditModalのtextarea値をre-renderなしで追跡するref
+  const editValueRef = useRef("");
+
+  // 初回マウント時はスキップし、board変更時に自動保存
+  const isMountedRef = useRef(false);
+  useEffect(() => {
+    if (!isMountedRef.current) {
+      isMountedRef.current = true;
+      return;
+    }
+    try {
+      saveBoard(filePath, board);
+      showStatus("自動保存しました");
+    } catch (e) {
+      showStatus(`保存エラー: ${String(e).slice(0, 40)}`);
+    }
+  }, [board]);
+
+  const activeColumns = board.columns.filter((c) => !c.archived);
+  const safeColIdx = Math.min(colIdx, Math.max(0, activeColumns.length - 1));
+  const activeCol = activeColumns[safeColIdx];
+  const cardIds = activeCol?.tasksIds ?? [];
+  const safeCardIdx = cardIds.length > 0 ? Math.min(cardIdx, cardIds.length - 1) : -1;
+  const selectedTaskId = safeCardIdx >= 0 ? (cardIds[safeCardIdx] ?? null) : null;
+
+  /**
+   * ステータスバーにメッセージを2秒間表示する
+   * @param msg - 表示するメッセージ
+   */
+  const showStatus = (msg: string) => {
+    setStatusMsg(msg);
+    setTimeout(() => setStatusMsg(""), 2000);
+  };
+
+  /**
+   * 編集・新規作成モーダルを閉じてボードモードに戻る
+   */
+  const closeModal = () => {
+    setMode("board");
+    setEditingTaskId(null);
+    setEditingColId(null);
+  };
+
+  /**
+   * モーダルからのテキスト変更を受け取るハンドラ
+   * @param value - textareaの現在値
+   */
+  const handleEditValueChange = (value: string) => {
+    editValueRef.current = value;
+  };
+
+  /**
+   * カードの保存処理（新規作成・編集共通）
+   * @param description - カードの内容
+   */
+  const handleSave = (description: string) => {
+    const trimmed = description.trim();
+    if (mode === "new" && activeCol) {
+      if (trimmed) {
+        const task = createTask(trimmed, activeCol.id);
+        setBoard((b) => addTask(b, task));
+        setCardIdx(cardIds.length);
+      }
+    } else if (mode === "edit" && editingTaskId) {
+      setBoard((b) => updateTask(b, editingTaskId, trimmed || description));
+    }
+    closeModal();
+  };
+
+  /**
+   * 列の保存処理（新規作成・編集共通）
+   * @param title - 列名
+   */
+  const handleColumnSave = (title: string) => {
+    const trimmed = title.trim();
+    if (!trimmed) {
+      closeModal();
+      return;
+    }
+    if (mode === "new-column") {
+      const col = createColumn(trimmed);
+      setBoard((b) => addColumn(b, col, safeColIdx));
+      setColIdx(safeColIdx + 1);
+      setCardIdx(0);
+    } else if (mode === "edit-column" && editingColId) {
+      setBoard((b) => updateColumn(b, editingColId, trimmed));
+    }
+    closeModal();
+  };
+
+  // キーボードハンドラは1つに集約（OpenTUIでは複数のuseKeyboardが競合するため）
+  useKeyboard((key) => {
+    if (mode === "confirm-delete") {
+      if (key.name === "y") {
+        if (selectedTaskId) {
+          setBoard((b) => deleteTask(b, selectedTaskId));
+          setCardIdx((i) => Math.max(0, i - 1));
+        }
+        setMode("board");
+      } else if (key.name === "n" || key.name === "escape") {
+        setMode("board");
+      }
+      return;
+    }
+
+    if (mode === "confirm-delete-column") {
+      if (key.name === "y") {
+        if (activeCol) {
+          setBoard((b) => deleteColumn(b, activeCol.id));
+          setColIdx((i) => Math.max(0, i - 1));
+          setCardIdx(0);
+        }
+        setMode("board");
+      } else if (key.name === "n" || key.name === "escape") {
+        setMode("board");
+      }
+      return;
+    }
+
+    if (mode === "preview") {
+      if (key.name === "escape" || key.name === "q") {
+        setMode("board");
+      } else if (key.name === "e") {
+        if (selectedTaskId) {
+          editValueRef.current = board.tasks[selectedTaskId]?.description ?? "";
+          setEditingTaskId(selectedTaskId);
+          setMode("edit");
+        }
+      }
+      return;
+    }
+
+    if (mode === "edit" || mode === "new") {
+      if (key.name === "escape") {
+        closeModal();
+      } else if (key.ctrl && key.name === "s") {
+        handleSave(editValueRef.current);
+      }
+      return;
+    }
+
+    if (mode === "new-column" || mode === "edit-column") {
+      if (key.name === "escape") {
+        closeModal();
+      } else if (key.ctrl && key.name === "s") {
+        handleColumnSave(editValueRef.current);
+      }
+      return;
+    }
+
+    // ボード操作
+    switch (key.name) {
+      case "left":
+        if (key.ctrl) {
+          // Ctrl+← で列を左に移動
+          if (activeCol && safeColIdx > 0) {
+            const targetGlobalIdx = board.columns.findIndex((c) => c.id === activeCol.id);
+            const prevActiveCol = activeColumns[safeColIdx - 1];
+            if (prevActiveCol) {
+              setBoard((b) => moveColumn(b, activeCol.id, "left"));
+              // アーカイブ列が間にある場合もあるため、移動後も同じ列を選択する
+              const prevGlobalIdx = board.columns.findIndex((c) => c.id === prevActiveCol.id);
+              if (prevGlobalIdx < targetGlobalIdx) {
+                setColIdx((i) => i - 1);
+              }
+            }
+          }
+        } else if (key.shift) {
+          if (selectedTaskId && safeColIdx > 0) {
+            const targetCol = activeColumns[safeColIdx - 1]!;
+            setBoard((b) => moveTask(b, selectedTaskId, targetCol.id));
+            setColIdx((i) => i - 1);
+            setCardIdx(0);
+          }
+        } else {
+          setColIdx((i) => Math.max(0, i - 1));
+          setCardIdx(0);
+        }
+        break;
+
+      case "right":
+        if (key.ctrl) {
+          // Ctrl+→ で列を右に移動
+          if (activeCol && safeColIdx < activeColumns.length - 1) {
+            const targetGlobalIdx = board.columns.findIndex((c) => c.id === activeCol.id);
+            const nextActiveCol = activeColumns[safeColIdx + 1];
+            if (nextActiveCol) {
+              setBoard((b) => moveColumn(b, activeCol.id, "right"));
+              const nextGlobalIdx = board.columns.findIndex((c) => c.id === nextActiveCol.id);
+              if (nextGlobalIdx > targetGlobalIdx) {
+                setColIdx((i) => i + 1);
+              }
+            }
+          }
+        } else if (key.shift) {
+          if (selectedTaskId && safeColIdx < activeColumns.length - 1) {
+            const targetCol = activeColumns[safeColIdx + 1]!;
+            setBoard((b) => moveTask(b, selectedTaskId, targetCol.id));
+            setColIdx((i) => i + 1);
+            setCardIdx(0);
+          }
+        } else {
+          setColIdx((i) => Math.min(activeColumns.length - 1, i + 1));
+          setCardIdx(0);
+        }
+        break;
+
+      case "up":
+      case "k":
+        setCardIdx((i) => Math.max(0, i - 1));
+        break;
+
+      case "down":
+      case "j":
+        if (cardIds.length > 0) {
+          setCardIdx((i) => Math.min(cardIds.length - 1, i + 1));
+        }
+        break;
+
+      case "n":
+        if (key.shift) {
+          // Shift+N: 列を追加（現在の列の右隣に挿入）
+          editValueRef.current = "";
+          setEditingColId(null);
+          setMode("new-column");
+        } else if (activeCol) {
+          // n: カードを追加
+          editValueRef.current = "";
+          setEditingTaskId(null);
+          setMode("new");
+        }
+        break;
+
+      case "return":
+        if (selectedTaskId) {
+          setMode("preview");
+        }
+        break;
+
+      case "e":
+        if (key.shift) {
+          // Shift+E: 列名を編集
+          if (activeCol) {
+            editValueRef.current = activeCol.title;
+            setEditingColId(activeCol.id);
+            setMode("edit-column");
+          }
+        } else if (selectedTaskId) {
+          // e: カードを編集
+          editValueRef.current = board.tasks[selectedTaskId]?.description ?? "";
+          setEditingTaskId(selectedTaskId);
+          setMode("edit");
+        }
+        break;
+
+      case "d":
+        if (key.shift) {
+          // Shift+D: 列を削除
+          if (activeCol) setMode("confirm-delete-column");
+        } else if (selectedTaskId) {
+          // d: カードを削除
+          setMode("confirm-delete");
+        }
+        break;
+
+      case "q":
+        renderer.destroy();
+        break;
+    }
+  });
+
+  const editingTask = editingTaskId ? board.tasks[editingTaskId] : undefined;
+  const deletingTaskDesc =
+    selectedTaskId
+      ? (board.tasks[selectedTaskId]?.description.split("\n")[0] ?? "このカード")
+      : "このカード";
+
+  /** 列削除確認メッセージ（カードが存在する場合は枚数を警告） */
+  const deletingColMessage = (() => {
+    if (!activeCol) return "この列を削除しますか?";
+    const cardCount = activeCol.tasksIds.length;
+    if (cardCount > 0) {
+      return `「${activeCol.title}」（カード ${cardCount} 枚）を削除しますか? カードも全て削除されます。`;
+    }
+    return `「${activeCol.title}」を削除しますか?`;
+  })();
+
+  return (
+    <box
+      flexDirection="column"
+      width="100%"
+      height="100%"
+      backgroundColor="#0d1117"
+      position="relative"
+    >
+      <box paddingX={2} paddingTop={1} alignSelf="center">
+        <text color="#58a6ff" bold>Trello Kanban Board</text>
+      </box>
+      <box position="absolute" top={1} right={2}>
+        <text color="#484f58">© 2026 Yuki-Kikuya</text>
+      </box>
+      <Board board={board} colIdx={safeColIdx} cardIdx={safeCardIdx} />
+      <StatusBar filePath={filePath} statusMsg={statusMsg} />
+
+      {(mode === "edit" || mode === "new") && (
+        <EditModal
+          key={editingTaskId ?? "__new__"}
+          initialValue={editingTask?.description ?? ""}
+          title={mode === "new" ? "新規カード" : "カードを編集"}
+          onValueChange={handleEditValueChange}
+        />
+      )}
+
+      {mode === "preview" && selectedTaskId && (
+        <PreviewModal
+          content={board.tasks[selectedTaskId]?.description ?? ""}
+          title={board.tasks[selectedTaskId]?.description.split("\n")[0] ?? ""}
+        />
+      )}
+
+      {mode === "confirm-delete" && (
+        <ConfirmModal
+          message={`「${deletingTaskDesc}」を削除しますか?`}
+        />
+      )}
+
+      {(mode === "new-column" || mode === "edit-column") && (
+        <ColumnEditModal
+          key={editingColId ?? "__new-column__"}
+          initialValue={mode === "edit-column" ? (activeColumns.find((c) => c.id === editingColId)?.title ?? "") : ""}
+          title={mode === "new-column" ? "列を追加" : "列を編集"}
+          onValueChange={handleEditValueChange}
+        />
+      )}
+
+      {mode === "confirm-delete-column" && (
+        <ConfirmModal message={deletingColMessage} />
+      )}
+    </box>
+  );
+}

package/src/components/Board.tsx

@@ -0,0 +1,38 @@
+import type { BoardType, TaskType } from "../types.ts";
+import { Column } from "./Column.tsx";
+
+interface Props {
+  board: BoardType;
+  colIdx: number;
+  cardIdx: number;
+}
+
+/**
+ * カンバンボード全体のレイアウトコンポーネント
+ * @param board - ボードデータ
+ * @param colIdx - フォーカス中の列インデックス
+ * @param cardIdx - フォーカス中のカードインデックス
+ */
+export function Board({ board, colIdx, cardIdx }: Props) {
+  const activeColumns = board.columns.filter((c) => !c.archived);
+
+  return (
+    <box flexDirection="row" flexGrow={1} gap={1} paddingX={1} paddingTop={1}>
+      {activeColumns.map((col, i) => {
+        const tasks = col.tasksIds
+          .map((id) => board.tasks[id])
+          .filter((t): t is TaskType => t !== undefined);
+
+        return (
+          <Column
+            key={col.id}
+            column={col}
+            tasks={tasks}
+            isFocused={i === colIdx}
+            focusedCardIdx={i === colIdx ? cardIdx : -1}
+          />
+        );
+      })}
+    </box>
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,30 @@
+import type { TaskType } from "../types.ts";
+import { MarkdownView } from "./MarkdownView.tsx";
+
+interface Props {
+  task: TaskType;
+  isSelected: boolean;
+}
+
+/**
+ * カンバンボードのカードコンポーネント
+ * @param task - 表示するタスクデータ
+ * @param isSelected - このカードが選択中か
+ */
+export function Card({ task, isSelected }: Props) {
+  return (
+    <box
+      border
+      borderStyle="single"
+      borderColor={isSelected ? "#00bfff" : "#3d444d"}
+      backgroundColor={isSelected ? "#0d2137" : "#161b22"}
+      paddingX={1}
+      flexDirection="column"
+    >
+      <MarkdownView
+        content={task.description}
+        textFg={isSelected ? "#e6edf3" : "#8b949e"}
+      />
+    </box>
+  );
+}

package/src/components/Column.tsx

@@ -0,0 +1,71 @@
+import { useRef, useEffect } from "react";
+import { ScrollBoxRenderable } from "@opentui/core";
+import type { ColumnType, TaskType } from "../types.ts";
+import { Card } from "./Card.tsx";
+
+interface Props {
+  column: ColumnType;
+  tasks: TaskType[];
+  isFocused: boolean;
+  focusedCardIdx: number;
+}
+
+/**
+ * カンバンボードの列コンポーネント
+ * @param column - 列のデータ
+ * @param tasks - 列内のタスク一覧
+ * @param isFocused - この列にフォーカスが当たっているか
+ * @param focusedCardIdx - フォーカス中のカードインデックス（-1はなし）
+ */
+export function Column({ column, tasks, isFocused, focusedCardIdx }: Props) {
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+
+  useEffect(() => {
+    if (isFocused && focusedCardIdx >= 0) {
+      const task = tasks[focusedCardIdx];
+      if (task) {
+        scrollRef.current?.scrollChildIntoView(task.id);
+      }
+    }
+  }, [focusedCardIdx, isFocused, tasks]);
+
+  return (
+    <box
+      flexDirection="column"
+      flexGrow={1}
+      border
+      borderStyle="rounded"
+      borderColor={isFocused ? "#00bfff" : "#3d444d"}
+      backgroundColor="#0d1117"
+    >
+      <box
+        border={["bottom"]}
+        borderColor={isFocused ? "#00bfff" : "#3d444d"}
+        paddingX={1}
+        flexDirection="row"
+        justifyContent="space-between"
+      >
+        <text fg={isFocused ? "#e6edf3" : "#8b949e"}>
+          <strong>{column.title}</strong>
+        </text>
+        <text fg="#484f58">{tasks.length}</text>
+      </box>
+
+      <scrollbox ref={scrollRef} flexGrow={1}>
+        <box flexDirection="column" gap={1} padding={1}>
+          {tasks.map((task, i) => (
+            <box key={task.id} id={task.id}>
+              <Card
+                task={task}
+                isSelected={isFocused && i === focusedCardIdx}
+              />
+            </box>
+          ))}
+          {tasks.length === 0 && (
+            <text fg="#3d444d">  No cards yet</text>
+          )}
+        </box>
+      </scrollbox>
+    </box>
+  );
+}