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-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