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:
+35
-3
@@ -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();
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user