[karimiku]

概要

リスト選択モードで下部にMarkdownプレビューを表示し、カーソル移動と連動して更新する機能を実装しました。

関連Issue

Closes #13

依存ライブラリ

• github.com/charmbracelet/bubbles/viewport を使用（スクロール可能なプレビュー）

変更内容

internal/ui/models.go の更新

• viewport.Model を追加
  • スクロール可能なプレビュー表示領域
• updatePreview() 関数を実装
  • 選択中のタスクを取得
  • render.RenderMarkdown() でMarkdownレンダリング
  • viewport に表示内容をセット
• Update() 関数を更新
  • WindowSizeMsg で viewport を初期化/サイズ調整
  • viewport のイベントを処理
• handleKeyPress() を更新
  • j/k キー押下時にプレビューを自動更新
• renderList() を2ペイン表示に変更
  • 上部: タスクリスト（動的に調整）
  • 下部: Markdownプレビュー（viewport）
  • カーソル周辺を表示する範囲計算

internal/ui/styles.go の更新

• PreviewHeaderStyle を追加
  • プレビューヘッダー用のスタイル（紫色背景）

機能

2ペイン表示

┌─────────────────────────────────────┐
│ 📝 Todo List                        │
└─────────────────────────────────────┘

▶ 1 データベース最適化
  2 ソフトウェア工学課題
  3 【保留】カテゴリ名に対応する...

─────────────────────────────────────
┌─────────────────────────────────────┐
│ 📄 Preview                          │
└─────────────────────────────────────┘

  # データベース最適化
  
  ## 背景
  検索クエリが遅い（3秒以上）
  
  ## 実施内容
  1. EXPLAIN ANALYZEで遅いクエリを特定
  2. 適切なインデックスを追加
  3. パフォーマンステスト実施

j/k: 移動 | Enter: 詳細 | q: 終了

カーソル移動と連動

• j/k キーでタスク移動時に自動的にプレビューを更新
• スムーズなユーザー体験

Markdownレンダリング

• 見出し（太字・色付き）
• コードブロック（シンタックスハイライト）
• リスト・チェックボックス
• 引用・太字・斜体

レスポンシブ対応

• ターミナルサイズに応じて表示領域を自動調整
• viewport のサイズも動的に変更

使用例

# インタラクティブモードを起動
todo list -d

# 操作方法
# j/k: タスク移動（プレビューが自動更新される）
# Enter: 詳細表示（全画面）
# q: 終了

テスト方法

# ユニットテスト
go test ./...

# ビルド
go build -o todo ./cmd/todo

# 動作確認
./todo list -d
# - j/k でタスク移動
# - プレビューが自動更新されるか
# - Markdownが美しくレンダリングされるか
# - ターミナルサイズ変更に追従するか

受け入れ基準

• 選択中のタスクのプレビューが下部に表示される
• カーソル移動と同時にプレビューが更新される
• Markdownが美しくレンダリングされる
• 2ペイン表示が適切に配置される
• スクロール可能な範囲が表示される

チェックリスト

• 依存ライブラリを追加した
• テストを追加・更新した
• ドキュメントを更新した（必要な場合）
• ローカルでテストが通ることを確認した
• コードフォーマットを確認した（go fmt）
• リントエラーがないことを確認した