From 9c6a47ab4e18be3b7caa217794436f6b45a6a3c4 Mon Sep 17 00:00:00 2001
From: b1rdmania <102524336+b1rdmania@users.noreply.github.com>
Date: Fri, 26 Dec 2025 21:26:23 +0000
Subject: [PATCH] Add New search reset after generation.

Keeps the generated artifact view intact but provides a footer New search button that stops audio, resets state, scrolls to top, and focuses the search input.
---
 index.html  |  3 +++
 src/main.ts | 31 +++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/index.html b/index.html
index 4b8a11c..26a995c 100644
--- a/index.html
+++ b/index.html
@@ -571,6 +571,8 @@
             margin-top: calc(var(--spacing-unit) * 6);
             display: flex;
             justify-content: center;
+            gap: calc(var(--spacing-unit) * 1.5);
+            flex-wrap: wrap;
         }
         
         .player-section {
@@ -1133,6 +1135,7 @@
 
     <div class="footer">
         <button id="faqBtnFooter" class="faq-link" type="button">FAQ</button>
+        <button id="newSearchBtn" class="faq-link" type="button">New search</button>
     </div>
 
     <div id="faqModalBackdrop" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="faqTitle">
diff --git a/src/main.ts b/src/main.ts
index 9839fd3..a56c814 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -70,6 +70,7 @@ class MotifApp {
   // FAQ modal
   private faqBtn!: HTMLButtonElement;
   private faqBtnFooter: HTMLButtonElement | null = null;
+  private newSearchBtn: HTMLButtonElement | null = null;
   private faqBackdrop!: HTMLElement;
   private faqCloseBtn!: HTMLButtonElement;
 
@@ -152,6 +153,7 @@ class MotifApp {
     // FAQ modal
     this.faqBtn = document.getElementById('faqBtn') as HTMLButtonElement;
     this.faqBtnFooter = document.getElementById('faqBtnFooter') as HTMLButtonElement | null;
+    this.newSearchBtn = document.getElementById('newSearchBtn') as HTMLButtonElement | null;
     this.faqBackdrop = document.getElementById('faqModalBackdrop')!;
     this.faqCloseBtn = document.getElementById('faqCloseBtn') as HTMLButtonElement;
   }
@@ -199,6 +201,7 @@ class MotifApp {
     // FAQ
     this.faqBtn.addEventListener('click', () => this.openFaq());
     this.faqBtnFooter?.addEventListener('click', () => this.openFaq());
+    this.newSearchBtn?.addEventListener('click', () => this.resetToNewSearch());
     this.faqCloseBtn.addEventListener('click', () => this.closeFaq());
     this.faqBackdrop.addEventListener('click', (e) => {
       if (e.target === this.faqBackdrop) this.closeFaq();
@@ -218,6 +221,34 @@ class MotifApp {
     this.faqBackdrop.classList.remove('open');
   }
 
+  private resetToNewSearch(): void {
+    // Stop all audio and return to the search workbench.
+    this.stopPreview();
+    this.handleMotifStop();
+    this.hasGenerated = false;
+    this.isMotifPlaying = false;
+    this.motifResumeProgress = 0;
+    this.currentMIDI = null;
+
+    this.setState('idle');
+    this.updateStatus('Ready. Enter a song name to search for MIDI files.');
+
+    try {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    } catch {
+      // ignore
+    }
+    // Focus search field for immediate next query
+    window.setTimeout(() => {
+      try {
+        this.songInput.focus();
+        this.songInput.select();
+      } catch {
+        // ignore
+      }
+    }, 150);
+  }
+
   private isIOSLike(): boolean {
     const ua = navigator.userAgent || '';
     const iOS = /iPad|iPhone|iPod/.test(ua);