webui: invert diff view layout and improve file selector behavior
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s5b7c42b431634f10k
diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
index 37508eb..c62078c 100644
--- a/webui/src/web-components/sketch-diff-range-picker.ts
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -54,10 +54,6 @@
display: flex;
flex-direction: column;
gap: 12px;
- padding: 12px;
- background-color: var(--background-light, #f8f8f8);
- border-radius: 4px;
- border: 1px solid var(--border-color, #e0e0e0);
width: 100%;
box-sizing: border-box;
}
@@ -65,7 +61,6 @@
.commits-header {
display: flex;
align-items: center;
- justify-content: space-between;
width: 100%;
}
@@ -88,14 +83,6 @@
background-color: var(--background-hover, #e8e8e8);
}
- .commits-summary {
- font-size: 14px;
- color: var(--text-secondary-color, #666);
- font-family: monospace;
- }
-
-
-
.commit-selectors {
display: flex;
flex-direction: row;
@@ -207,9 +194,6 @@
>
${this.commitsExpanded ? '▼' : '▶'} Commits
</button>
- <div class="commits-summary">
- ${this.getCommitSummary()}
- </div>
</div>
${this.commitsExpanded
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index 72be0aa..f20dd57 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -212,6 +212,16 @@
box-shadow: 0 0 0 2px var(--accent-color-light, rgba(0, 122, 204, 0.2));
}
+ .file-selector:disabled {
+ background-color: var(--background-disabled, #f5f5f5);
+ color: var(--text-disabled, #999);
+ cursor: not-allowed;
+ }
+
+ .spacer {
+ flex: 1;
+ }
+
sketch-diff-range-picker {
flex: 1;
min-width: 400px; /* Ensure minimum width for range picker */
@@ -550,11 +560,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>
- ${this.renderFileSelector()}
</div>
</div>
</div>
@@ -566,17 +577,16 @@
}
renderFileSelector() {
- if (this.files.length === 0) {
- return html``;
- }
-
+ const fileCount = this.files.length;
+
return html`
<select
class="file-selector"
.value="${this.selectedFile}"
@change="${this.handleFileSelection}"
+ ?disabled="${fileCount === 0}"
>
- <option value="">All files (${this.files.length})</option>
+ <option value="">All files (${fileCount})</option>
${this.files.map(
(file) => html`
<option value="${file.path}">