feat(layout): replace LeftPaneTabSwitcher with VS Code-style Activity Bar + relocate History pane (#727)#729
Merged
Merged
Conversation
…ory pane (#727) Replaces the legacy left-pane tab switcher (History/Files/CMATE) with a 48px vertical Activity Bar that hosts 6 activities (Files, Git, Notes, Schedules, Agent, Timer). History gets its own resizable, collapsible column independent of the Activity Pane. Implementation: - New ActivityBar (role=tablist + keyboard nav) and ActivityPane (table-driven ActivityContentMap) components - New useActivityBarState / useHistoryPaneState hooks with localStorage persistence (last-opened activity, history visibility + width 10-60%) - WorktreeDesktopLayout rewritten to a 4-column layout ([ActivityBar 48px] + ActivityPane + HistoryPane + Right) with mobile fallback preserved (NotesAndLogsPane / WorktreeDetailSubComponents untouched) - WorktreeDetailRefactored leftPaneMemo (38 deps, Issue #411 R3-007) split into activityBarMemo + activityContent + activityPaneMemo + historyPaneMemo, each with narrow deps and a maintenance-note header - Deep-link mapping (?pane=files|git|notes|logs|agent|timer|history) routed through new toActivityId() in useWorktreeTabState (logs maps to schedules; history/terminal/info map to null) - useFilePolling gated on activeActivity === 'files' - LeftPaneTabSwitcher and related tests deleted Refactor (within this commit): - Extracted ResizableColumn helper in WorktreeDesktopLayout to dedupe the activity- and history-pane column JSX (same id+testid+aria-label+width+ ErrorBoundary+PaneResizer shape) Tests: 6610 passing (4 new test files: ActivityBar, ActivityPane, useActivityBarState, useHistoryPaneState; 3 deleted: LeftPaneTabSwitcher component test, LeftPaneTabSwitcher unit test, left-pane-tab type test). Quality gates: tsc=pass, lint=clean, build=pass. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…727) CLAUDE.md モジュールリファレンス更新: - LeftPaneTabSwitcher.tsx 行を削除 - 新規 ActivityBar.tsx / ActivityPane.tsx / useActivityBarState.ts / useHistoryPaneState.ts / activity-bar-config.ts を追加 - WorktreeDesktopLayout / WorktreeDetailRefactored / HistoryPane / NotesAndLogsPane / useWorktreeUIState / useWorktreeTabState の 各行に Issue #727 の改修内容を追記 CHANGELOG.md [Unreleased]: - Added: Activity Bar / Deep link toActivityId - Changed: WorktreeDesktopLayout 4 カラム化、leftPaneMemo 分割、 HistoryPane onCollapse 追加 - Removed: LeftPaneTabSwitcher と関連テスト、PC の Message/Git サブタブ UI - Breaking Changes: PC レイアウト視覚的変更（モバイルは不変） docs/UI_UX_GUIDE.md / docs/en/UI_UX_GUIDE.md: - 「デスクトップ 2 カラム」記述を 4 カラム構成 (ActivityBar / ActivityPane / History / Right) に更新 - ファイル構成図に ActivityBar.tsx / ActivityPane.tsx を追加 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Issue #727 対応。PC版Worktree詳細画面のレイアウトを VS Code風 Activity Bar に再構成。
</>トグル + ドラッグ幅可変[ActivityBar(48px)] [ActivityPane] [History] [Terminal+FilePanel]変更内容
コミット
16726fecad17bfdd(reports)新規ファイル（5件）
src/config/activity-bar-config.tssrc/components/worktree/ActivityBar.tsxsrc/components/worktree/ActivityPane.tsxsrc/hooks/useActivityBarState.tssrc/hooks/useHistoryPaneState.ts変更ファイル（12件）
src/components/worktree/WorktreeDesktopLayout.tsx— 2カラム → 4カラム化src/components/worktree/WorktreeDetailRefactored.tsx— memo 4分割（Notes/Schedules/Agent/Timer各Activityへ）src/components/worktree/HistoryPane.tsx—onCollapseprops 追加src/types/ui-state.tssrc/types/ui-actions.tssrc/hooks/useWorktreeUIState.tssrc/hooks/useWorktreeTabState.ts—toActivityId()追加（deep link対応）src/lib/deep-link-validator.tsCLAUDE.md/CHANGELOG.md/docs/UI_UX_GUIDE.md削除（3件）
src/components/worktree/LeftPaneTabSwitcher.tsxテスト
破壊的変更（PC版のみ）
commandmate.worktree.leftPaneCollapsedlocalStorageLeftPaneTabSwitcherAPIGlobalMobileNav/WorktreeDetailSubComponents/NotesAndLogsPane維持）受入条件
Activity Bar
role="tablist"/aria-orientation="vertical"/aria-selected/aria-label/aria-controlsFilesActivity Pane
History ペイン
<で折りたたみ、反対側に>展開バー横断
npm run lint/npx tsc --noEmit/npm run test:unit/npm run build全PASS品質チェック
npm run lintnpx tsc --noEmitnpm run test:unitnpm run build実行フロー
/orchestrate 727→/pm-auto-issue2dev 727:--full未指定）関連
dev-reports/issue/727/pm-auto-dev/iteration-1/progress-report.mddev-reports/issue/727/work-plan.mddev-reports/issue/727/issue-review/summary-report.mdTest plan
<で折りたたみ、>で再表示確認🤖 Generated with Claude Code