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
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index 1b673cd..7ca33b3 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -159,11 +159,16 @@
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
- padding: 6px 12px;
- font-size: 12px;
+ padding: 8px;
+ font-size: 16px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 36px;
+ min-height: 36px;
}
.view-toggle-button:hover {
@@ -316,30 +321,16 @@
></sketch-diff-file-picker>
<div style="display: flex; gap: 8px;">
- ${this.isRightEditable
- ? html`
- <div
- class="editable-indicator"
- title="This file is editable"
- >
- <span
- style="padding: 6px 12px; background-color: #e9ecef; border-radius: 4px; font-size: 12px; color: #495057;"
- >
- Editable
- </span>
- </div>
- `
- : ""}
<button
class="view-toggle-button"
@click="${this.toggleHideUnchangedRegions}"
title="${this.hideUnchangedRegionsEnabled
- ? "Expand All"
- : "Hide Unchanged"}"
+ ? "Expand All: Show all lines including unchanged regions"
+ : "Collapse Expanded Lines: Hide unchanged regions to focus on changes"}"
>
${this.hideUnchangedRegionsEnabled
- ? "Expand All"
- : "Hide Unchanged"}
+ ? this.renderExpandAllIcon()
+ : this.renderCollapseIcon()}
</button>
</div>
</div>
@@ -550,6 +541,54 @@
}
/**
+ * Render expand all icon (dotted line with arrows pointing away)
+ */
+ renderExpandAllIcon() {
+ return html`
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+ <!-- Dotted line in the middle -->
+ <line
+ x1="2"
+ y1="8"
+ x2="14"
+ y2="8"
+ stroke="currentColor"
+ stroke-width="1"
+ stroke-dasharray="2,1"
+ />
+ <!-- Large arrow pointing up -->
+ <path d="M8 2 L5 6 L11 6 Z" fill="currentColor" />
+ <!-- Large arrow pointing down -->
+ <path d="M8 14 L5 10 L11 10 Z" fill="currentColor" />
+ </svg>
+ `;
+ }
+
+ /**
+ * Render collapse icon (arrows pointing towards dotted line)
+ */
+ renderCollapseIcon() {
+ return html`
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+ <!-- Dotted line in the middle -->
+ <line
+ x1="2"
+ y1="8"
+ x2="14"
+ y2="8"
+ stroke="currentColor"
+ stroke-width="1"
+ stroke-dasharray="2,1"
+ />
+ <!-- Large arrow pointing down towards line -->
+ <path d="M8 6 L5 2 L11 2 Z" fill="currentColor" />
+ <!-- Large arrow pointing up towards line -->
+ <path d="M8 10 L5 14 L11 14 Z" fill="currentColor" />
+ </svg>
+ `;
+ }
+
+ /**
* Refresh the diff view by reloading commits and diff data
*
* This is called when the Monaco diff tab is activated to ensure: