From 00bd69cc700ad3e63146b23a880fb8ab681b1de5 Mon Sep 17 00:00:00 2001
From: Kenny <kenny@sprinkletech.net>
Date: Sat, 14 Mar 2026 20:12:31 -0700
Subject: [PATCH] Add reset button and make re-roll append results

- Reset button clears mood text, runtime filter, kid-friendly toggle,
  and returns to the empty state
- Show Me More now appends new cards below existing results instead
  of replacing them

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/static/app.js     | 42 +++++++++++++++++++++++++++++++++++++-----
 app/static/index.html |  3 +++
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/app/static/app.js b/app/static/app.js
index 05d7bf0..d8f6a0d 100644
--- a/app/static/app.js
+++ b/app/static/app.js
@@ -131,8 +131,11 @@ async function findMovies(excludeIds = []) {
     }
 
     document.getElementById('empty-state').classList.add('hidden');
-    document.getElementById('results').classList.add('hidden');
     document.getElementById('error-state').classList.add('hidden');
+    // On re-roll, keep existing results visible; on fresh search, hide them
+    if (!isReroll) {
+        document.getElementById('results').classList.add('hidden');
+    }
     document.getElementById('loading').classList.remove('hidden');
 
     try {
@@ -169,7 +172,7 @@ async function findMovies(excludeIds = []) {
         if (data.meta && data.meta.history_id) {
             currentHistoryId = data.meta.history_id;
         }
-        renderResults(data);
+        renderResults(data, isReroll);
         loadHistory();
     } catch (err) {
         document.getElementById('loading').classList.add('hidden');
@@ -178,14 +181,18 @@ async function findMovies(excludeIds = []) {
     }
 }
 
-function renderResults(data) {
+function renderResults(data, append = false) {
     document.getElementById('loading').classList.add('hidden');
 
     const grid = document.getElementById('results-grid');
-    grid.innerHTML = '';
+    if (!append) {
+        grid.innerHTML = '';
+    }
 
     if (!data.recommendations || data.recommendations.length === 0) {
-        document.getElementById('empty-state').classList.remove('hidden');
+        if (!append) {
+            document.getElementById('empty-state').classList.remove('hidden');
+        }
         return;
     }
 
@@ -393,5 +400,30 @@ document.getElementById('reroll-btn').addEventListener('click', () => {
     findMovies(shownMovieIds);
 });
 
+// Reset
+document.getElementById('reset-btn').addEventListener('click', () => {
+    // Clear mood input and state
+    document.getElementById('mood-input').value = '';
+    lastMood = '';
+    shownMovieIds = [];
+    currentHistoryId = null;
+
+    // Reset runtime filter
+    maxRuntime = null;
+    document.querySelectorAll('.runtime-btn').forEach(b => b.classList.remove('active'));
+    document.querySelector('.runtime-btn[data-runtime=""]').classList.add('active');
+
+    // Reset kid-friendly
+    kidFriendly = false;
+    document.getElementById('kid-friendly-btn').classList.remove('active');
+
+    // Reset view to empty state
+    document.getElementById('results').classList.add('hidden');
+    document.getElementById('loading').classList.add('hidden');
+    document.getElementById('error-state').classList.add('hidden');
+    document.getElementById('empty-state').classList.remove('hidden');
+    document.getElementById('results-grid').innerHTML = '';
+});
+
 // --- Init ---
 checkAuth();
diff --git a/app/static/index.html b/app/static/index.html
index d6f11eb..ee6c393 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -90,6 +90,9 @@
                     <button id="surprise-btn" class="text-xs px-3 py-1 rounded-full border border-indigo-600/50 text-indigo-400 hover:bg-indigo-600/20 transition-colors">
                         Surprise Me
                     </button>
+                    <button id="reset-btn" class="text-xs px-3 py-1 rounded-full border border-gray-700 text-gray-500 hover:text-gray-300 hover:border-gray-500 transition-colors">
+                        Reset
+                    </button>
                 </div>
             </div>