Remove redundant preview controls bar.

Moves preview volume into the results header and relies on per-row Play/Stop controls.

index.html

@@ -399,41 +399,24 @@
             }
         }
 
-        .results-controls {
+        .results-header {
             display: flex;
-            gap: calc(var(--spacing-unit) * 1.5);
             align-items: center;
+            justify-content: space-between;
+            gap: calc(var(--spacing-unit) * 2);
             flex-wrap: wrap;
-            padding: calc(var(--spacing-unit) * 2);
+            margin: 0 0 calc(var(--spacing-unit) * 2) 0;
-            background: var(--color-surface);
-            border-radius: var(--radius);
-            border: 1px solid var(--color-border);
-            box-shadow: var(--shadow-sm);
-            margin-top: calc(var(--spacing-unit) * 2);
         }
-        .results-controls .volume-control {
+        .results-header h3 {
-            flex: 1;
+            margin: 0;
-            min-width: 220px;
+        }
+        .results-header .volume-control {
             margin-top: 0;
+            min-width: 260px;
+            flex: 0 1 360px;
         }
-        .results-controls .actions {
+        .results-header .volume-control label {
-            margin-left: auto;
+            font-size: 12px;
-            display: inline-flex;
-            gap: calc(var(--spacing-unit) * 1.25);
-            align-items: center;
-            flex-wrap: wrap;
-        }
-        @media (max-width: 768px) {
-            .results-controls {
-                flex-direction: column;
-                align-items: stretch;
-            }
-            .results-controls .actions {
-                margin-left: 0;
-                width: 100%;
-                display: flex;
-                flex-direction: column;
-            }
         }
         
         .confidence-bar {
@@ -887,7 +870,13 @@
         <div id="status">Ready. Enter a song name to search for MIDI files.</div>
         
         <div id="resultsSection" class="results-section">
+            <div class="results-header">
                 <h3>Search Results</h3>
+                <div class="volume-control">
+                    <label for="soundfontVolume">Preview volume</label>
+                    <input type="range" id="soundfontVolume" min="0" max="1" step="0.01" value="0.7" />
+                </div>
+            </div>
             <table id="resultsTable" class="results-table">
                 <thead>
                     <tr>
@@ -900,17 +889,6 @@
                 <tbody id="resultsBody">
                 </tbody>
             </table>
-
-            <div class="results-controls" aria-label="Preview controls">
-                <div class="volume-control">
-                    <label for="soundfontVolume">Preview volume</label>
-                    <input type="range" id="soundfontVolume" min="0" max="1" step="0.01" value="0.7" />
-                </div>
-                <div class="actions">
-                    <button id="soundfontStopBtn" disabled>Stop preview</button>
-                    <button id="nextResultBtn" class="next-result" disabled>Try Next Result</button>
-                </div>
-            </div>
         </div>
         
         <div id="playerSection" class="player-section">

src/main.ts

@@ -27,7 +27,6 @@ class MotifApp {
   private selectedMeta!: HTMLElement;
 
   // Preview player controls
-  private soundfontStopBtn!: HTMLButtonElement;
   private soundfontVolumeSlider!: HTMLInputElement;
 
   // Motif controls
@@ -46,7 +45,6 @@ class MotifApp {
   private enableAudioBtn!: HTMLButtonElement;
   private iosAudioState!: HTMLElement;
 
-  private nextResultBtn!: HTMLButtonElement;
   private copyLinkBtn!: HTMLButtonElement;
 
   // Embed snippet UI
@@ -102,7 +100,6 @@ class MotifApp {
     this.selectedMeta = document.getElementById('selectedMeta')!;
 
     // Preview player controls
-    this.soundfontStopBtn = document.getElementById('soundfontStopBtn') as HTMLButtonElement;
     this.soundfontVolumeSlider = document.getElementById('soundfontVolume') as HTMLInputElement;
 
     // Motif controls
@@ -115,7 +112,6 @@ class MotifApp {
     this.motifCurrentTime = document.getElementById('motifCurrentTime')!;
     this.motifDuration = document.getElementById('motifDuration')!;
 
-    this.nextResultBtn = document.getElementById('nextResultBtn') as HTMLButtonElement;
     this.copyLinkBtn = document.getElementById('copyLinkBtn') as HTMLButtonElement;
 
     // iOS audio unlock UI (Motif)
@@ -145,7 +141,6 @@ class MotifApp {
     });
 
     // Preview player (row buttons in results table)
-    this.soundfontStopBtn.addEventListener('click', () => this.stopPreview(true));
     this.soundfontVolumeSlider.addEventListener('input', (e) => {
       const volume = parseFloat((e.target as HTMLInputElement).value);
       this.soundfontPlayer?.setVolume(volume);
@@ -166,7 +161,6 @@ class MotifApp {
     this.motifProgressBar.addEventListener('input', seekHandler);
     this.motifProgressBar.addEventListener('change', seekHandler);
 
-    this.nextResultBtn.addEventListener('click', () => this.handleNextResult());
     this.copyLinkBtn.addEventListener('click', () => void this.handleCopyLink());
 
     // Embed snippet copy (may be disabled / not-live)
@@ -361,7 +355,6 @@ class MotifApp {
       await player.play();
 
       this.playingPreviewIndex = index;
-      this.soundfontStopBtn.disabled = false;
       this.updatePreviewButtons();
       this.updateStatus('Previewing MIDI…');
 
@@ -387,7 +380,6 @@ class MotifApp {
     }
     this.soundfontPlayer?.stop();
     this.playingPreviewIndex = null;
-    this.soundfontStopBtn.disabled = true;
     this.updatePreviewButtons();
     if (updateStatus) this.updateStatus('Preview stopped.');
   }
@@ -544,11 +536,6 @@ class MotifApp {
     return `${mins}:${secs.toString().padStart(2, '0')}`;
   }
 
-  private handleNextResult(): void {
-    const nextIndex = (this.selectedResultIndex + 1) % this.searchResults.length;
-    this.selectResult(nextIndex);
-  }
-
   private hideResults(): void {
     this.resultsSection.classList.remove('visible');
     this.playerSection.classList.remove('visible');
@@ -556,15 +543,12 @@ class MotifApp {
 
   private enablePlayerControls(): void {
     this.motifBtn.disabled = false;
-    this.nextResultBtn.disabled = this.searchResults.length <= 1;
     this.copyLinkBtn.disabled = this.searchResults.length === 0;
   }
 
   private disablePlayerControls(): void {
-    this.soundfontStopBtn.disabled = true;
     this.motifBtn.disabled = true;
     this.motifStopBtn.disabled = true;
-    this.nextResultBtn.disabled = true;
     this.copyLinkBtn.disabled = true;
   }