webui: restructure diff header layout for improved usability
Reorganize diff view header to show commits section always expanded on left
and move file selector to right side, with expand/collapse button in header
when single file is selected.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s904ee76a60c89e75k
diff --git a/webui/src/web-components/demo/diff-header-demo.html b/webui/src/web-components/demo/diff-header-demo.html
new file mode 100644
index 0000000..b50b23a
--- /dev/null
+++ b/webui/src/web-components/demo/diff-header-demo.html
@@ -0,0 +1,251 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Diff Header Demo</title>
+ <style>
+ body {
+ font-family: system-ui, sans-serif;
+ margin: 20px;
+ background: #f5f5f5;
+ }
+ .demo-container {
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+ .demo-title {
+ font-size: 18px;
+ font-weight: bold;
+ margin-bottom: 15px;
+ color: #333;
+ }
+ .demo-description {
+ margin-bottom: 15px;
+ color: #666;
+ }
+ .demo-layout {
+ border: 2px dashed #ccc;
+ padding: 15px;
+ background: #fafafa;
+ }
+ .header-section {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ border: 1px solid #e0e0e0;
+ background: #f8f8f8;
+ margin-bottom: 10px;
+ }
+ .commits-section {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex: 1;
+ }
+ .commits-label {
+ font-weight: 500;
+ color: #333;
+ }
+ .commit-selector {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+ .file-selector-container {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+ .file-selector {
+ min-width: 200px;
+ padding: 8px 12px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ }
+ .expand-button {
+ background: transparent;
+ border: 1px solid #e0e0e0;
+ border-radius: 4px;
+ padding: 6px 8px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 32px;
+ min-height: 32px;
+ }
+ .expand-button:hover {
+ background: #e8e8e8;
+ }
+ .spacer {
+ flex: 1;
+ }
+ .old-layout {
+ opacity: 0.6;
+ }
+ .new-layout {
+ border-color: #4caf50;
+ background: #f8fff8;
+ }
+ .change-highlight {
+ background: #ffffcc;
+ padding: 2px 4px;
+ border-radius: 3px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Diff Header Layout Changes</h1>
+
+ <div class="demo-container">
+ <div class="demo-title">Before: Original Layout</div>
+ <div class="demo-description">
+ File selector on left, Commits with expand button, range picker on right
+ </div>
+ <div class="demo-layout old-layout">
+ <div class="header-section">
+ <select class="file-selector">
+ <option>All files (3)</option>
+ <option>Modified: src/file1.ts</option>
+ <option>Added: src/file2.ts</option>
+ </select>
+ <div class="spacer"></div>
+ <div class="commits-section">
+ <button class="expand-button">▶ Commits</button>
+ <!-- Hidden by default -->
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="demo-container">
+ <div class="demo-title">After: New Layout</div>
+ <div class="demo-description">
+ <span class="change-highlight">From/To selectors directly visible</span>
+ on left,
+ <span class="change-highlight">file selector moved to right</span>,
+ <span class="change-highlight"
+ >expand button in header when single file selected</span
+ >
+ </div>
+ <div class="demo-layout new-layout">
+ <div class="header-section">
+ <div class="commits-section">
+ <div class="commit-selector">
+ <label>From:</label>
+ <select>
+ <option>abc1234 Initial commit</option>
+ <option selected>def5678 Add feature</option>
+ </select>
+ </div>
+ <div class="commit-selector">
+ <label>To:</label>
+ <select>
+ <option selected>Uncommitted Changes</option>
+ <option>ghi9012 Fix bug</option>
+ </select>
+ </div>
+ </div>
+ <div class="spacer"></div>
+ <div class="file-selector-container">
+ <select class="file-selector">
+ <option>All files (3)</option>
+ <option>Modified: src/file1.ts</option>
+ <option>Added: src/file2.ts</option>
+ </select>
+ <!-- No expand button when "All files" selected -->
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="demo-container">
+ <div class="demo-title">After: Single File Selected</div>
+ <div class="demo-description">
+ When a single file is selected,
+ <span class="change-highlight"
+ >expand/collapse button appears in header</span
+ >
+ </div>
+ <div class="demo-layout new-layout">
+ <div class="header-section">
+ <div class="commits-section">
+ <div class="commit-selector">
+ <label>From:</label>
+ <select>
+ <option>abc1234 Initial commit</option>
+ <option selected>def5678 Add feature</option>
+ </select>
+ </div>
+ <div class="commit-selector">
+ <label>To:</label>
+ <select>
+ <option selected>Uncommitted Changes</option>
+ <option>ghi9012 Fix bug</option>
+ </select>
+ </div>
+ </div>
+ <div class="spacer"></div>
+ <div class="file-selector-container">
+ <select class="file-selector">
+ <option>All files (3)</option>
+ <option selected>Modified: src/file1.ts</option>
+ <option>Added: src/file2.ts</option>
+ </select>
+ <button
+ class="expand-button"
+ title="Expand: Show all lines including unchanged regions"
+ >
+ <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>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <h2>Summary of Changes</h2>
+ <ul>
+ <li>
+ ✅ Removed the "Commits" expand/collapse button and label - From/To now
+ directly visible
+ </li>
+ <li>✅ Moved file selector from left to right side of header</li>
+ <li>
+ ✅ Added expand/collapse button in header when single file is selected
+ </li>
+ <li>
+ ✅ All controls (From, To, File Selector) now on same horizontal line
+ </li>
+ <li>
+ ✅ Expand/collapse button controls showing/hiding unchanged regions in
+ diff
+ </li>
+ </ul>
+ </body>
+</html>
diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
index 02dafd9..90b417b 100644
--- a/webui/src/web-components/sketch-diff-range-picker.ts
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -25,8 +25,7 @@
@state()
private toCommit: string = "";
- @state()
- private commitsExpanded: boolean = false;
+ // Removed commitsExpanded state - always expanded now
@state()
private loading: boolean = true;
@@ -58,30 +57,7 @@
box-sizing: border-box;
}
- .commits-header {
- display: flex;
- align-items: center;
- width: 100%;
- }
-
- .commits-toggle {
- background-color: transparent;
- border: 1px solid var(--border-color, #e0e0e0);
- border-radius: 4px;
- padding: 8px 12px;
- cursor: pointer;
- font-size: 14px;
- font-weight: 500;
- transition: background-color 0.2s;
- display: flex;
- align-items: center;
- gap: 8px;
- color: var(--text-color, #333);
- }
-
- .commits-toggle:hover {
- background-color: var(--background-hover, #e8e8e8);
- }
+ /* Removed commits-header and commits-label styles - no longer needed */
.commit-selectors {
display: flex;
@@ -184,23 +160,7 @@
renderRangePicker() {
return html`
- <div class="commits-header">
- <button
- class="commits-toggle"
- @click="${this.toggleCommitsExpansion}"
- title="${this.commitsExpanded
- ? "Hide"
- : "Show"} commit range selection"
- >
- ${this.commitsExpanded ? "▼" : "▶"} Commits
- </button>
- </div>
-
- ${this.commitsExpanded
- ? html`
- <div class="commit-selectors">${this.renderRangeSelectors()}</div>
- `
- : ""}
+ <div class="commit-selectors">${this.renderRangeSelectors()}</div>
`;
}
@@ -358,12 +318,7 @@
this.dispatchRangeEvent();
}
- /**
- * Toggle the expansion of commit selectors
- */
- toggleCommitsExpansion() {
- this.commitsExpanded = !this.commitsExpanded;
- }
+ // Removed toggleCommitsExpansion method - always expanded now
/**
* Get a summary of the current commit range for display
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index f23472d..2f66824 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -195,6 +195,12 @@
gap: 12px;
}
+ .file-selector-container {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
.file-selector {
min-width: 200px;
padding: 8px 12px;
@@ -231,24 +237,26 @@
flex: 1;
}
- .view-toggle-button {
- background-color: #f0f0f0;
- border: 1px solid #ccc;
+ .view-toggle-button,
+ .header-expand-button {
+ background-color: transparent;
+ border: 1px solid var(--border-color, #e0e0e0);
border-radius: 4px;
- padding: 8px;
- font-size: 16px;
+ padding: 6px 8px;
+ font-size: 14px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
- min-width: 36px;
- min-height: 36px;
+ min-width: 32px;
+ min-height: 32px;
}
- .view-toggle-button:hover {
- background-color: #e0e0e0;
+ .view-toggle-button:hover,
+ .header-expand-button:hover {
+ background-color: var(--background-hover, #e8e8e8);
}
.diff-container {
@@ -558,12 +566,12 @@
<div class="controls">
<div class="controls-container">
<div class="range-row">
- ${this.renderFileSelector()}
- <div class="spacer"></div>
<sketch-diff-range-picker
.gitService="${this.gitService}"
@range-change="${this.handleRangeChange}"
></sketch-diff-range-picker>
+ <div class="spacer"></div>
+ ${this.renderFileSelector()}
</div>
</div>
</div>
@@ -578,21 +586,24 @@
const fileCount = this.files.length;
return html`
- <select
- class="file-selector"
- .value="${this.selectedFile}"
- @change="${this.handleFileSelection}"
- ?disabled="${fileCount === 0}"
- >
- <option value="">All files (${fileCount})</option>
- ${this.files.map(
- (file) => html`
- <option value="${file.path}">
- ${this.getFileDisplayName(file)}
- </option>
- `,
- )}
- </select>
+ <div class="file-selector-container">
+ <select
+ class="file-selector"
+ .value="${this.selectedFile}"
+ @change="${this.handleFileSelection}"
+ ?disabled="${fileCount === 0}"
+ >
+ <option value="">All files (${fileCount})</option>
+ ${this.files.map(
+ (file) => html`
+ <option value="${file.path}">
+ ${this.getFileDisplayName(file)}
+ </option>
+ `,
+ )}
+ </select>
+ ${this.selectedFile ? this.renderSingleFileExpandButton() : ""}
+ </div>
`;
}
@@ -1006,6 +1017,27 @@
}
/**
+ * Render expand/collapse button for single file view in header
+ */
+ renderSingleFileExpandButton() {
+ if (!this.selectedFile) return "";
+
+ const isExpanded = this.fileExpandStates.get(this.selectedFile) ?? false;
+
+ return html`
+ <button
+ class="header-expand-button"
+ @click="${() => this.toggleFileExpansion(this.selectedFile)}"
+ title="${isExpanded
+ ? "Collapse: Hide unchanged regions to focus on changes"
+ : "Expand: Show all lines including unchanged regions"}"
+ >
+ ${isExpanded ? this.renderCollapseIcon() : this.renderExpandAllIcon()}
+ </button>
+ `;
+ }
+
+ /**
* Render single file view with full-screen Monaco editor
*/
renderSingleFileView() {