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>