概要
CommandMateに登録されたリポジトリに別名(display_name)を設定し、UI上の全箇所の表示名を変更できるようにする。現在はリポジトリのディレクトリ名がそのまま表示されるが、ユーザーが任意の表示名を設定できるようにしたい。
背景・課題
- リポジトリのディレクトリ名が長い場合や、複数の類似名リポジトリがある場合に識別しづらい
- ディレクトリ名と実際のプロジェクト名が異なる場合がある(例:
MyCodeBranchDesk → CommandMate)
- Sessions画面やサイドバーでリポジトリ名が表示される際に、わかりやすい名前で表示したい
提案する解決策
1. データモデル
v26マイグレーションで repositories テーブルに display_name カラムを追加(NULLable)。
ALTER TABLE repositories ADD COLUMN display_name TEXT;
display_name が設定されている場合はそちらを表示
- 未設定(NULL)の場合は従来通りディレクトリ名(
name)を表示
2. Repository型の拡張
db-repository.ts の Repository インターフェースに displayName?: string フィールドを追加。
updateRepository() は既に name 更新をサポートしているため、displayName を追加するのみ。
3. API
PUT /api/repositories/[id] エンドポイントを新規追加し、displayName フィールドを更新可能にする。
4. 編集UI
Repositories画面で各リポジトリ名の横にインライン編集ボタンを追加。クリックで display_name を入力・保存可能にする。
5. 表示側(全箇所一括変更)
以下の全箇所で displayName ?? name を使用:
- サイドバー (
Sidebar.tsx L293) — リポジトリグループヘッダー
- BranchListItem (
BranchListItem.tsx L111) — ブランチのサブテキスト
- Sessions画面 (
sessions/page.tsx L249) — リポジトリ名表示、検索フィルタ、ソート
- Worktree詳細ヘッダー (
WorktreeDetailSubComponents.tsx L260)
- WorktreeList (
WorktreeList.tsx L190, L276) — 検索・削除確認
検索フィルタでは displayName と元の name 両方でマッチ可能にする。
実装タスク
受入条件
影響範囲
新規ファイル
| ファイル |
内容 |
src/lib/db/migrations/v26-repository-display-name.ts |
display_name カラム追加マイグレーション |
src/app/api/repositories/[id]/route.ts |
リポジトリ更新API(PUT) |
変更ファイル
| ファイル |
変更内容 |
src/lib/db/db-repository.ts |
Repository型にdisplayName追加、CRUD拡張 |
src/lib/db/migrations/index.ts |
v26マイグレーション登録 |
src/app/repositories/page.tsx |
インライン編集UI追加 |
src/components/layout/Sidebar.tsx |
表示名を displayName ?? name に変更 |
src/components/sidebar/BranchListItem.tsx |
表示名を displayName ?? name に変更 |
src/app/sessions/page.tsx |
表示名・検索・ソートを displayName ?? name に変更 |
src/components/worktree/WorktreeDetailSubComponents.tsx |
表示名を displayName ?? name に変更 |
src/components/worktree/WorktreeList.tsx |
表示名・検索を displayName ?? name に変更 |
src/types/models.ts |
Worktree型に repositoryDisplayName 追加 |
関連コンポーネント
src/lib/sidebar-utils.ts — ソート・グループ化で repositoryName を使用
src/hooks/useWorktreeList.ts — Worktreeリスト共通フック
概要
CommandMateに登録されたリポジトリに別名(display_name)を設定し、UI上の全箇所の表示名を変更できるようにする。現在はリポジトリのディレクトリ名がそのまま表示されるが、ユーザーが任意の表示名を設定できるようにしたい。
背景・課題
MyCodeBranchDesk→CommandMate)提案する解決策
1. データモデル
v26マイグレーションで
repositoriesテーブルにdisplay_nameカラムを追加(NULLable)。display_nameが設定されている場合はそちらを表示name)を表示2. Repository型の拡張
db-repository.tsのRepositoryインターフェースにdisplayName?: stringフィールドを追加。updateRepository()は既にname更新をサポートしているため、displayNameを追加するのみ。3. API
PUT /api/repositories/[id]エンドポイントを新規追加し、displayNameフィールドを更新可能にする。4. 編集UI
Repositories画面で各リポジトリ名の横にインライン編集ボタンを追加。クリックで
display_nameを入力・保存可能にする。5. 表示側(全箇所一括変更)
以下の全箇所で
displayName ?? nameを使用:Sidebar.tsxL293) — リポジトリグループヘッダーBranchListItem.tsxL111) — ブランチのサブテキストsessions/page.tsxL249) — リポジトリ名表示、検索フィルタ、ソートWorktreeDetailSubComponents.tsxL260)WorktreeList.tsxL190, L276) — 検索・削除確認検索フィルタでは
displayNameと元のname両方でマッチ可能にする。実装タスク
repositoriesテーブルにdisplay_nameカラム追加Repository型にdisplayNameフィールド追加、mapRepositoryRow更新updateRepository()にdisplayNameパラメータ追加src/app/api/repositories/[id]/route.tsに PUT エンドポイント新規作成Sidebar.tsx)でdisplayName ?? nameを使用displayName ?? nameを使用displayName ?? nameを使用(表示・検索・ソート)displayName ?? nameを使用displayName ?? nameを使用受入条件
影響範囲
新規ファイル
src/lib/db/migrations/v26-repository-display-name.tssrc/app/api/repositories/[id]/route.ts変更ファイル
src/lib/db/db-repository.tssrc/lib/db/migrations/index.tssrc/app/repositories/page.tsxsrc/components/layout/Sidebar.tsxdisplayName ?? nameに変更src/components/sidebar/BranchListItem.tsxdisplayName ?? nameに変更src/app/sessions/page.tsxdisplayName ?? nameに変更src/components/worktree/WorktreeDetailSubComponents.tsxdisplayName ?? nameに変更src/components/worktree/WorktreeList.tsxdisplayName ?? nameに変更src/types/models.tsrepositoryDisplayName追加関連コンポーネント
src/lib/sidebar-utils.ts— ソート・グループ化でrepositoryNameを使用src/hooks/useWorktreeList.ts— Worktreeリスト共通フック