Skip to content

feat(app): Files Changed flat filename list with tree popover on click - #552

Merged
jeonghun-jj-lee merged 10 commits into
mainfrom
551-files-changed-flat-list-tree-popover
Aug 24, 2026
Merged

feat(app): Files Changed flat filename list with tree popover on click#552
jeonghun-jj-lee merged 10 commits into
mainfrom
551-files-changed-flat-list-tree-popover

Conversation

@jeonghun-jj-lee

@jeonghun-jj-lee jeonghun-jj-lee commented Aug 24, 2026

Copy link
Copy Markdown
Contributor

Replaces the always-visible FileTree in the 'Files Changed' side panel tab with a compact flat filename list and on-demand tree popover.

Changes

  • New pure utilities (file-list-model.ts in opencode app): getCommonAncestor, disambiguateFilenames, sortPathsByFilename — fully unit tested (14 tests)
  • New component (FileListFlat): flat alphabetical list with change-kind indicators, tooltip on hover, floating tree popover on click
  • Integration: replaces the <FileTree> in the 'changes' sub-tab of session-side-panel.tsx

Behavior

  • Filenames are shown alphabetically (basename only)
  • Duplicate basenames get minimum parent disambiguation in parentheses
  • Hover shows full relative path in a tooltip
  • Click opens a floating popover with the full tree rooted at the common ancestor
  • Clicked file is highlighted in the tree; selecting any file navigates to its diff

Closes #551

Summary by CodeRabbit

  • New Features
    • Added a new session review panel with diff previews, comments, file navigation, search, and keyboard controls.
    • Added tree and list views for browsing changed files, including filtering, resizing, and diff statistics.
    • Added a file picker with hierarchical navigation and selectable file paths.
    • Added loading states and improved file selection handling in session review previews.

Integrates the new flat file list component into the session side
panel's 'changes' sub-tab. The component shows sorted filenames with
change-kind indicators, a tooltip for full paths on hover, and a
floating popover with the tree on click.

Closes #551
@coderabbitai

coderabbitai Bot commented Aug 24, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 290bc341-e91f-4365-ae99-f0c115fc48c6

📥 Commits

Reviewing files that changed from the base of the PR and between 3bb443f and 98f45fb.

📒 Files selected for processing (4)
  • packages/app-bundle/manifest.json
  • packages/app-bundle/overlay/packages/app/src/pages/session/v2/review-panel-v2.tsx
  • packages/app-bundle/overlay/packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx
  • packages/app-bundle/overlay/packages/session-ui/src/v2/components/session-review-v2.css

📝 Walkthrough

Walkthrough

The PR adds ReviewPanelV2 with diff loading, sidebar navigation, and collapsed file-tree selection. It integrates a file picker into the session review preview, adds picker styling, and updates the app-bundle manifest and file hashes.

Changes

Session review navigation

Layer / File(s) Summary
Review panel and file navigation
packages/app-bundle/overlay/packages/app/src/pages/session/v2/review-panel-v2.tsx
Adds ReviewPanelV2, asynchronous diff and file loading, active-file selection, searchable sidebar navigation, resizing, and collapsed file-tree utilities.
File-picker preview integration
packages/app-bundle/overlay/packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx, packages/app-bundle/overlay/packages/session-ui/src/v2/components/session-review-v2.css
Adds optional picker rendering and file-selection callbacks. The preview supports picker dismissal and selection. CSS styles the trigger, dropdown, tree rows, indentation, and active states.
Bundle manifest synchronization
packages/app-bundle/manifest.json
Updates the app addition count, classified file inventory, and hashes for changed app and UI files.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Reviewer
  participant ReviewPanelV2
  participant SessionSDK
  participant SessionReviewFilePreviewV2
  Reviewer->>ReviewPanelV2: select a changed file
  ReviewPanelV2->>SessionSDK: load diff and file content
  SessionSDK-->>ReviewPanelV2: return file data
  ReviewPanelV2->>SessionReviewFilePreviewV2: render the active preview
  SessionReviewFilePreviewV2-->>Reviewer: display selected file and diff
Loading

Suggested reviewers: aarontrowbridge

✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 551-files-changed-flat-list-tree-popover

Comment @coderabbitai help to get the list of available commands.

Pure functions for common-ancestor calculation, alphabetical sort by
basename, and minimum-disambiguation of duplicate filenames. Includes
17 unit tests covering all AC edge cases (single file, same directory,
no shared prefix, three-way duplicates).

Part of #551
Remove custom onClick on the trigger div — it raced with Kobalte's
built-in trigger toggle, causing the popover to open and immediately
close on the same tick. Now onOpenChange is the sole controller.
Click the filename in the diff viewer's file header to open a dropdown
listing all changed files. Selecting a file navigates to its diff.

- Remove FileListFlat (sidebar popover component) — replaced by direct
  FileTree in the side panel's changes tab
- Add FileNameWithPicker to session-review-file-preview-v2 with:
  - Click-to-toggle dropdown (no Kobalte Popover dependency)
  - Common-root header when files share a directory prefix
  - Filename-only labels with minimal disambiguation for collisions
  - Outside-click dismiss
  - Tooltip on directory path portion only
  - Right-click context menu preserved (Copy full path / filename)
- Add review-panel-v2.tsx overlay to thread files + onSelectFile props
- Replace flat file list with collapsed tree: single-child directory
  chains merged into combined labels (e.g. src/.../components/)
- Render indent guide lines at ancestor depths (VS Code style)
- Add horizontal scroll for long paths
- Pass filePicker as render prop so session-ui stays decoupled from
  FileTreeV2
- Common root shown as shortened breadcrumb header (.../repo/pkg/)
- File icons on each item, consistent 12px font throughout
@jeonghun-jj-lee
jeonghun-jj-lee force-pushed the 551-files-changed-flat-list-tree-popover branch from 7c9a408 to 38cd6c6 Compare August 24, 2026 23:46
@jeonghun-jj-lee
jeonghun-jj-lee force-pushed the 551-files-changed-flat-list-tree-popover branch from 38cd6c6 to 98f45fb Compare August 24, 2026 23:48
@jeonghun-jj-lee
jeonghun-jj-lee marked this pull request as ready for review August 24, 2026 23:50
@jeonghun-jj-lee
jeonghun-jj-lee merged commit 28ce739 into main Aug 24, 2026
7 of 8 checks passed
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.

Files Changed: flat filename list with tree popover on click

1 participant