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>
This commit is contained in:
2026-03-14 20:12:31 -07:00
parent 9f96a91986
commit 00bd69cc70
2 changed files with 40 additions and 5 deletions
+35 -3
View File
@@ -131,8 +131,11 @@ async function findMovies(excludeIds = []) {
} }
document.getElementById('empty-state').classList.add('hidden'); document.getElementById('empty-state').classList.add('hidden');
document.getElementById('results').classList.add('hidden');
document.getElementById('error-state').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'); document.getElementById('loading').classList.remove('hidden');
try { try {
@@ -169,7 +172,7 @@ async function findMovies(excludeIds = []) {
if (data.meta && data.meta.history_id) { if (data.meta && data.meta.history_id) {
currentHistoryId = data.meta.history_id; currentHistoryId = data.meta.history_id;
} }
renderResults(data); renderResults(data, isReroll);
loadHistory(); loadHistory();
} catch (err) { } catch (err) {
document.getElementById('loading').classList.add('hidden'); 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'); document.getElementById('loading').classList.add('hidden');
const grid = document.getElementById('results-grid'); const grid = document.getElementById('results-grid');
if (!append) {
grid.innerHTML = ''; grid.innerHTML = '';
}
if (!data.recommendations || data.recommendations.length === 0) { if (!data.recommendations || data.recommendations.length === 0) {
if (!append) {
document.getElementById('empty-state').classList.remove('hidden'); document.getElementById('empty-state').classList.remove('hidden');
}
return; return;
} }
@@ -393,5 +400,30 @@ document.getElementById('reroll-btn').addEventListener('click', () => {
findMovies(shownMovieIds); 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 --- // --- Init ---
checkAuth(); checkAuth();
+3
View File
@@ -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"> <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 Surprise Me
</button> </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>
</div> </div>