filter by age without researching again

public/index.html

@@ -123,13 +123,23 @@
     badge.textContent = val + '+';
     badge.style.background = getAgeColor(val);
   }
-  async function search() {
+  let lastQuery = '';
+  let lastResults = [];
+
+  async function search(force = false) {
     const query = document.getElementById('q').value.trim();
     if (!query) return;
     const maxAge = parseInt(document.getElementById('maxAge').value, 10);
     window.history.replaceState({}, '', '?q=' + encodeURIComponent(query) + (maxAge < 21 ? `&maxAge=${maxAge}` : ''));
     const filmsDiv = document.getElementById('films');
     filmsDiv.innerHTML = '<p class="loader">Searching...</p>';
+
+    // Si on a déjà cherché ce terme, et pas force, on ne refait pas le fetch
+    if (!force && lastQuery === query && lastResults.length) {
+      renderFilms(filterFilmsByMaxAge(lastResults, maxAge));
+      return;
+    }
+
     try {
       const base = window.location.origin;
       const response = await fetch(`${base}/search?q=${encodeURIComponent(query)}`);
@@ -138,16 +148,8 @@
         return;
       }
       let films = await response.json();
-      if (!Array.isArray(films) || !films.length) {
-        filmsDiv.innerHTML = '<p class="no-results">No results. Try another query.</p>';
-        return;
-      }
-      // Filtres sources inutiles (pas de description et/ou pas d'âge)
       films = films.map(film => {
         film.results = film.results.filter(r => {
-          // On considère valide si :
-          //   - summary ou parentsNeedToKnow ou details.summary >= 8 chars
-          //   - ET un âge existe (age, normalizedMarks, marks, details.ageLegal, etc)
           let hasDescription =
             (r.summary && r.summary.length >= 8) ||
             (r.parentsNeedToKnow && r.parentsNeedToKnow.length >= 8) ||
@@ -159,8 +161,18 @@
         return film;
       }).filter(film => film.results.length > 0);
 
-      if (isFinite(maxAge)) {
+      lastQuery = query;
-        films = films.filter(film => {
+      lastResults = films;
+      renderFilms(filterFilmsByMaxAge(films, maxAge));
+    } catch (error) {
+      console.error('Search function error:', error);
+      filmsDiv.innerHTML = `<p class="no-results">Search failed. Check the console.</p>`;
+    }
+  }
+
+  function filterFilmsByMaxAge(films, maxAge) {
+    if (!isFinite(maxAge)) return films;
+    return films.filter(film => {
       const uniqueResults = [];
       const seenSources = new Set();
       film.results.forEach(r => {
@@ -174,6 +186,10 @@
       return Math.max(...ages) <= maxAge;
     });
   }
+
+  // Extraction de la partie rendering pour pouvoir la réutiliser
+  function renderFilms(films) {
+    const filmsDiv = document.getElementById('films');
     if (!films.length) {
       filmsDiv.innerHTML = '<p class="no-results">No results for this max age.</p>';
       return;
@@ -261,16 +277,17 @@
     });
     html += '</tbody></table>';
     filmsDiv.innerHTML = html;
-    } catch (error) {
-      console.error('Search function error:', error);
-      filmsDiv.innerHTML = `<p class="no-results">Search failed. Check the console.</p>`;
-    }
   }
 
   document.getElementById('maxAge').addEventListener('input', function() {
     updateMaxAgeDisplay();
-    search();
+    // Pas de fetch, juste filtre en front
+    const query = document.getElementById('q').value.trim();
+    if (!query || !lastResults.length) return;
+    const maxAge = parseInt(document.getElementById('maxAge').value, 10);
+    renderFilms(filterFilmsByMaxAge(lastResults, maxAge));
   });
+
   window.addEventListener('DOMContentLoaded', () => {
     const params = new URLSearchParams(window.location.search);
     const q = params.get('q');
@@ -281,10 +298,11 @@
     }
     if (q) {
       document.getElementById('q').value = q;
-      search();
+      search(true); // force fetch initiale
     }
   });
-  document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(); });
+  document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(true); });
+
 </script>
 </body>
 </html>