tree f3bcf44b2907c5c18f555b31df923488bb5efdc7
parent 7ad1c7a4b759f4ba110d092a0fbbed0b95fc80a9
author Philip Zeyliger <philip@bold.dev> 1748488566 +0000
committer Autoformatter <bot@sketch.dev> 1748488815 +0000

webui: comprehensive diff view improvements

Implement multiple enhancements to the diff view interface for better
usability and visual consistency with file change statistics and
improved navigation controls.

Backend Changes:
1. Enhanced git diff endpoint with --numstat support:
   - Modified GitRawDiff to execute both --raw and --numstat commands
   - Added Additions/Deletions fields to DiffFile struct
   - Parse numstat output to show line change statistics (+X, -Y)
   - Handle binary files and edge cases properly

Frontend UI Improvements:
2. File picker enhancements:
   - Display (+X, -Y) change indicators next to file names
   - Move file position indicator ("X of Y") between navigation buttons
   - Simplified file info to show only status (Modified/Added/Deleted)
   - Better visual grouping of navigation-related information

3. Commit range picker refresh functionality:
   - Added refresh button with subtle styling (gray background)
   - 🔄 icon with "Refresh commit list" tooltip
   - Reloads git log to get updated branch and commit information
   - Proper disabled state during loading operations

4. Editable file indicator improvements:
   - Moved "Editable" indicator to Monaco editor save indicator area
   - Shows "Editable" when file is editable but unchanged
   - Consistent styling with "Modified", "Saving", "Saved" states
   - Added proper CSS styling with gray background for idle state

5. Expand/collapse button redesign:
   - Custom SVG icons replacing text buttons
   - Expand All: dotted line with arrows pointing away (outward)
   - Collapse: dotted line with arrows pointing inward (toward line)
   - Intuitive visual metaphor for show/hide functionality
   - Enhanced tooltips with full action descriptions
   - Renamed "Hide Unchanged" to "Collapse Expanded Lines"

Technical Improvements:
6. TypeScript compatibility fixes:
   - Updated mock data service with new DiffFile fields
   - Fixed MSW handler type compatibility with proper type assertion
   - Maintained full TypeScript checking without exclusions
   - Added realistic mock data for testing change indicators

Interface Consistency:
- All buttons use consistent styling and hover effects
- Better separation between navigation controls and file information
- Improved logical grouping of related UI elements
- Enhanced accessibility with descriptive tooltips

These changes significantly improve the diff view experience by providing
clear visual indicators of file changes, intuitive navigation controls,
and better organization of interface elements according to their function.

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

Change-ID: s738289d132773bc3k