背景 / 目的
ブランチ単位 ToDo(#1015 )の各項目には #1034 で 詳細(detail) を登録できるようになったが、詳細本文をクリップボードにコピーする導線が無い 。詳細をワンクリックでコピーできるようにする。
現状(実装)
データ面 : detail フィールドは feat: ブランチ単位ToDoに詳細フィールド追加+クリックで件名/詳細を編集可能に #1034 で追加済み。DB/API/クライアントに完全配線済み → コピー機能に必要なデータ変更は不要 。
UI面 (TodoPane.tsx): 詳細が表示・編集されるのは編集モーダル内の textarea のみ (todo-edit-detail, L401-409)。一覧行では詳細本文は表示されず詳細ありインジケータ だけ(todo-detail-indicator, L319-331)。コピー導線はどこにも無い 。
再利用可能な既存基盤 :
src/components/common/CopyButton.tsx: text / label / className を受け取り「Copied」フィードバックを出す完成済みコンポーネント(MemoCard・HistoryPane・FileViewer 等で使用実績あり)。
src/lib/clipboard-utils.ts copyToClipboard(text): ANSI除去+空文字ガード。HTTPS/localhost は Clipboard API、非セキュア環境(スマホのHTTPアクセス)は textarea+execCommand にフォールバック 。
→ 既存 CopyButton を配置するだけでほぼ実現できる。
提案(UIのみ・低リスク)
①(推奨)編集モーダル内にコピーボタン
詳細ラベル/textarea 近傍に <CopyButton text={editDetail} label={t('todo.copyDetail')} /> を配置。詳細が可視な文脈で最も自然。
詳細が空のときは非表示(copyToClipboard も空文字は早期リターン)。
②(任意・併用可)一覧行にクイックコピー
詳細ありインジケータ(L319)の隣に todo.detail をコピーするボタンを追加(detail.trim() !== '' のときのみ表示)。モーダルを開かず即コピー。
一覧では詳細本文が見えないため、アイコンボタン+tooltip で補足。
最小構成なら①のみで要望を満たせる。素早さ重視なら②を併用。
設計上の論点(実装時に決定)
配置 : モーダル内(推奨)/一覧行/両方
CopyButton の見た目 : 現状スタイルは**ダーク前提(slate系固定色)**でコードブロック向け。TodoPane(light/dark対応)ではライトモードで浮く可能性 → className で上書き、または軽微な variant 対応
i18n : label に t('todo.copyDetail') を渡す。CopyButton 内部の "Copy"/"Copied" はハードコードのため完全i18n化は別対応(本件スコープ外)
コピー対象 : 「詳細のみ」(件名+詳細の結合は不要)
スコープ : Home の repository ToDo は対象外
受け入れ条件
スコープ外
Home のリポジトリ単位 ToDo(repository_todos)へのコピー追加
CopyButton 内部文言("Copy"/"Copied")の i18n 化
件名+詳細の結合コピー
変更範囲
src/components/worktree/TodoPane.tsx(+locales/{en,ja}/worktree.json 文言、TodoPane.test.tsx)のみ。migration/DB/API 変更なし 。
関連
背景 / 目的
ブランチ単位 ToDo(#1015)の各項目には #1034 で 詳細(detail) を登録できるようになったが、詳細本文をクリップボードにコピーする導線が無い。詳細をワンクリックでコピーできるようにする。
現状(実装)
detailフィールドは feat: ブランチ単位ToDoに詳細フィールド追加+クリックで件名/詳細を編集可能に #1034 で追加済み。DB/API/クライアントに完全配線済み → コピー機能に必要なデータ変更は不要。TodoPane.tsx): 詳細が表示・編集されるのは編集モーダル内の textarea のみ(todo-edit-detail, L401-409)。一覧行では詳細本文は表示されず詳細ありインジケータだけ(todo-detail-indicator, L319-331)。コピー導線はどこにも無い。再利用可能な既存基盤:
src/components/common/CopyButton.tsx:text/label/classNameを受け取り「Copied」フィードバックを出す完成済みコンポーネント(MemoCard・HistoryPane・FileViewer 等で使用実績あり)。src/lib/clipboard-utils.tscopyToClipboard(text): ANSI除去+空文字ガード。HTTPS/localhost は Clipboard API、非セキュア環境(スマホのHTTPアクセス)は textarea+execCommand にフォールバック。→ 既存
CopyButtonを配置するだけでほぼ実現できる。提案(UIのみ・低リスク)
①(推奨)編集モーダル内にコピーボタン
<CopyButton text={editDetail} label={t('todo.copyDetail')} />を配置。詳細が可視な文脈で最も自然。copyToClipboardも空文字は早期リターン)。②(任意・併用可)一覧行にクイックコピー
todo.detailをコピーするボタンを追加(detail.trim() !== ''のときのみ表示)。モーダルを開かず即コピー。設計上の論点(実装時に決定)
classNameで上書き、または軽微な variant 対応labelにt('todo.copyDetail')を渡す。CopyButton 内部の "Copy"/"Copied" はハードコードのため完全i18n化は別対応(本件スコープ外)受け入れ条件
TodoPane.test.tsxにコピー導線のテスト追加スコープ外
repository_todos)へのコピー追加CopyButton内部文言("Copy"/"Copied")の i18n 化変更範囲
src/components/worktree/TodoPane.tsx(+locales/{en,ja}/worktree.json文言、TodoPane.test.tsx)のみ。migration/DB/API 変更なし。関連
CopyButton(feat(markdown): プレビュー時にコードブロックをコピー可能にする(PC/スマホ) #981)