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/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() {