Skip to content

feat: add tree view mode to changes tab#1319

Open
CaioDGallo wants to merge 1 commit intoPostHog:mainfrom
CaioDGallo:feat/tree-view-on-changes
Open

feat: add tree view mode to changes tab#1319
CaioDGallo wants to merge 1 commit intoPostHog:mainfrom
CaioDGallo:feat/tree-view-on-changes

Conversation

@CaioDGallo
Copy link
Contributor

@CaioDGallo CaioDGallo commented Mar 23, 2026

Problem

  • The Changes tab lacked a tree view mode (suggested as an enhancement by Support tree level change list #1197) for local and cloud tasks
  • It must remain stable across refreshes and stay usable with very large diffs (optionally having keyboard navigation like the list version).

Changes

  1. Added list/tree mode in the Changes tab, with shared behavior for local and cloud sources.
  2. Built a canonical tree model from ChangedFile[] with normalized paths and stable node ids. This keeps selection and expansion stable across refresh/reorder.
  3. Rendered tree content as a virtualized visible-row list in ChangesFilesView, to keep main-thread and scroll cost bounded for large change sets.
  4. Applied localized row updates on expand/collapse (insert/remove subtree ranges), with full visible-row recompute reserved for reconciliation. This avoids global work on every toggle.
  5. Kept view mode, root expansion, and expanded paths in changesPanelStore, plus stale-path pruning. This preserves user context on refresh and removes invalid expanded paths.
  6. Implemented id-based keyboard navigation (up/down/left/right) in useChangesKeyboardNavigation, so selection remains stable when visible rows change.
  7. Used immediate preview for single key press and debounced preview for repeat keydown, to reduce tab churn during held-key navigation.
  8. Isolated view-options menu keyboard handling from changes navigation, and prevented trigger re-focus on menu close. This prevents arrow keys from being handled by both menu and file navigation.
  9. Added keyboard follow-scroll with padding near viewport edges, so selection stays visible after native arrow scrolling is suppressed.
  10. Added getCloudChangesState to centralize waiting/loading/empty/error resolution, so cloud state handling is defined in one place.
  11. Split the feature into focused files (ChangesFilesView, row components, keyboard hook, state helper), to reduce coupling and reviewer overhead.
  12. Added/updated targeted tests for tree model and store behavior (path normalization, visible-row behavior, mode state, stale-path pruning).
  13. Scope constraints kept intentionally: no worker-thread tree build, no directory-chain compression, and no backend ChangedFile contract changes.

How did you test this?

Automated

  • pnpm --filter code typecheck
  • pnpm --filter code test -- changesPanelStore.test.ts changesTreeModel.test.ts

Manually

  • Switched list/tree mode and verified root + folder expansion behavior.
  • Expanded/collapsed nested folders and verified keyboard semantics (Left/Right, including file -> parent on Left).
  • Navigated quickly with arrow keys and verified preview pacing is stable.
  • Verified keyboard selection and active-file highlight do not overlap incorrectly.
  • Verified view-options menu arrow behavior does not conflict with changes navigation.
  • Verified viewport follows selection during keyboard navigation with edge padding.

Different feature states and cases

image image image

Closes #1197

@CaioDGallo
Copy link
Contributor Author

CaioDGallo commented Mar 23, 2026

Ready for review when you have bandwidth. @jonathanlab , since this builds on #1197, I’d especially appreciate a check that this matches what you had in mind.

This implements #1197 with an intentionally scoped approach: tree view mode for the Changes tab, stable selection/expansion across refreshes, virtualized visible rows for larger diffs, and keyboard navigation aligned with the existing list behavior.

Happy to trim or reshape scope if any part feels too heavy.

@CaioDGallo CaioDGallo closed this Mar 24, 2026
@CaioDGallo CaioDGallo reopened this Mar 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support tree level change list

1 participant