tree 0ba518a643b4d165dd871b4a2cd28e5f096a017f
parent 938d2dcde4aaea8119e1c09ffa453de48560dd57
author David Crawshaw <david@zentus.com> 1749931112 +0000
committer David Crawshaw <david@zentus.com> 1749943207 -0700

webui: implement multi-file diff view with continuous scrolling

Replace file selector with GitHub PR-style continuous scrolling through
multiple files in a single view, improving diff navigation experience
while maintaining all Monaco editor features.

Problem Analysis:
The existing diff view required users to navigate between files using a
dropdown selector and Previous/Next buttons. This created friction when
reviewing multi-file changes and broke the natural scrolling flow that
users expect from GitHub PR views or other modern diff interfaces.

The limitation was that Monaco doesn't provide a built-in multi-file diff
widget, requiring custom implementation with multiple IStandaloneDiffEditor
instances properly configured for stacking and auto-sizing.

Implementation Changes:

1. Multi-File Layout (sketch-diff2-view.ts):
   - Replaced sketch-diff-file-picker with simple file count display
   - Implemented renderFileDiff() to create separate diff sections per file
   - Added renderFileHeader() with status badges and path information
   - Created multi-file-diff-container with vertical stacking layout
   - Added loadAllFileContents() for parallel content loading
   - Replaced single originalCode/modifiedCode with Map<string, FileContent>

2. Monaco Auto-Sizing (sketch-monaco-view.ts):
   - Configured diff editors with hidden scrollbars per Monaco ≥0.49 pattern
   - Added setupAutoSizing() with content height calculation
   - Implemented fitEditorToContent() using getContentHeight() callbacks
   - Set automaticLayout: false for manual size control
   - Added scrollbar: { vertical: 'hidden', horizontal: 'hidden', handleMouseWheel: false }
   - Enabled minimap: false and scrollBeyondLastLine: false

3. CSS Styling (sketch-diff2-view.ts):
   - Added file-diff-section with bottom borders for visual separation
   - Implemented sticky file headers with proper z-index
   - Created status badges (added, modified, deleted, renamed) with color coding
   - Added file-count display replacing old file picker interface
   - Configured diff-container with overflow: auto for outer scrolling

4. Content Management:
   - Parallel loading of all file contents with error handling
   - Maintains editability detection per file based on commit range
   - Preserves comment and save functionality for individual files
   - Updated toggleHideUnchangedRegions to apply to all editors

Technical Details:
- Uses Monaco's getContentHeight() and onDidContentSizeChange() for auto-sizing
- Each diff editor sized to Math.max(originalHeight, modifiedHeight) + 18px padding
- Outer container handles all scrolling while inner editors are sized to content
- File headers show status (Added/Modified/Deleted/Renamed) with appropriate styling
- Sticky positioning keeps file context visible during scrolling
- Maintains all existing features: editing, commenting, expand/collapse toggles

Benefits:
- Natural scrolling workflow similar to GitHub PR reviews
- Eliminates need for dropdown navigation between files
- Better visual context with file headers and status indicators
- Continuous viewing experience for multi-file changes
- Preserves all advanced Monaco features (editing, commenting, etc.)
- Improved performance with parallel content loading

Testing:
- Verified multi-file diff display with various commit ranges
- Tested scrolling behavior between files works smoothly
- Confirmed auto-sizing works correctly for different file sizes
- Validated file headers show correct status and change counts
- Ensured editing and commenting functionality preserved
- Tested expand/collapse toggles apply to all editors

This implementation follows the Monaco ≥0.49 multi-file diff pattern with
disabled inner scrollbars, auto-sizing to content, and outer scroll container,
providing a modern diff experience while maintaining full editor functionality.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s0724a00944669c80k