From 6f8b94ea3526fed2d39e058365c23738b15d7501 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 22 Dec 2025 22:26:14 +0000
Subject: [PATCH] Refactor movie modal: remove search, improve category display

Co-authored-by: mathieumoran1 <mathieumoran1@gmail.com>
---
 public/css/app.css         |  7 +++++++
 public/js/app_user-stat.js | 32 +++++++++-----------------------
 public/user-stat.html      |  6 +-----
 3 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 5ff4db0..9943aa4 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -264,6 +264,13 @@ footer {
     font-size: 0.875rem;
   }
 
+  .stats-movie-category {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   .stats-movie-imdb {
     display: inline-flex;
     align-items: center;
diff --git a/public/js/app_user-stat.js b/public/js/app_user-stat.js
index 6fbffa1..6f67ba1 100644
--- a/public/js/app_user-stat.js
+++ b/public/js/app_user-stat.js
@@ -359,7 +359,6 @@ window.addEventListener('DOMContentLoaded', async function () {
       // Modal UI (Films regardés)
       const moviesModalEl = document.getElementById('moviesModal');
       const movieGridEl = document.getElementById('movie-grid');
-      const movieSearchEl = document.getElementById('movie-search');
       const movieSortEl = document.getElementById('movie-sort');
       const moviesSummaryEl = document.getElementById('movies-summary');
       const moviesEmptyEl = document.getElementById('movies-empty');
@@ -394,12 +393,6 @@ window.addEventListener('DOMContentLoaded', async function () {
         return s;
       }
 
-      function movieMatchesQuery(movie, q) {
-        if (!q) return true;
-        const hay = `${safeStr(movie?.title)} ${safeStr(movie?.category)} ${safeStr(movie?.imdb_id)}`.toLowerCase();
-        return hay.includes(q.toLowerCase());
-      }
-
       function sortMovies(list, mode) {
         const arr = Array.isArray(list) ? list.slice() : [];
         if (mode === 'title') {
@@ -425,18 +418,14 @@ window.addEventListener('DOMContentLoaded', async function () {
       }
 
       function renderMoviesModal() {
-        if (!movieGridEl || !movieSearchEl || !movieSortEl || !moviesSummaryEl || !moviesEmptyEl) return;
+        if (!movieGridEl || !movieSortEl || !moviesSummaryEl || !moviesEmptyEl) return;
 
-        const q = safeStr(movieSearchEl.value).trim();
         const sortMode = safeStr(movieSortEl.value).trim() || 'recent';
 
-        const filtered = (Array.isArray(currentModalMovies) ? currentModalMovies : []).filter((m) => movieMatchesQuery(m, q));
-        const sorted = sortMovies(filtered, sortMode);
+        const sorted = sortMovies((Array.isArray(currentModalMovies) ? currentModalMovies : []), sortMode);
 
         const total = Array.isArray(currentModalMovies) ? currentModalMovies.length : 0;
-        moviesSummaryEl.textContent = total
-          ? `${sorted.length} / ${total}`
-          : '0';
+        moviesSummaryEl.textContent = total ? `${total} film${total > 1 ? 's' : ''}` : '0 film';
 
         movieGridEl.innerHTML = '';
         if (!sorted.length) {
@@ -514,10 +503,11 @@ window.addEventListener('DOMContentLoaded', async function () {
           meta.className = 'stats-movie-meta';
 
           if (category) {
-            const badge = document.createElement('span');
-            badge.className = 'badge bg-light text-dark border';
-            badge.textContent = category;
-            meta.appendChild(badge);
+            const cat = document.createElement('div');
+            cat.className = 'stats-movie-category text-muted small';
+            cat.title = category;
+            cat.textContent = category;
+            meta.appendChild(cat);
           }
 
           if (rating !== null && rating > 0) {
@@ -559,7 +549,6 @@ window.addEventListener('DOMContentLoaded', async function () {
             : `Films regardés (${count})`;
         }
 
-        if (movieSearchEl) movieSearchEl.value = '';
         if (movieSortEl) movieSortEl.value = 'recent';
         renderMoviesModal();
 
@@ -569,15 +558,12 @@ window.addEventListener('DOMContentLoaded', async function () {
         }
       }
 
-      if (movieSearchEl) {
-        movieSearchEl.addEventListener('input', () => renderMoviesModal());
-      }
       if (movieSortEl) {
         movieSortEl.addEventListener('change', () => renderMoviesModal());
       }
       if (moviesModalEl) {
         moviesModalEl.addEventListener('shown.bs.modal', () => {
-          try { movieSearchEl?.focus(); } catch (_) {}
+          try { movieSortEl?.focus(); } catch (_) {}
         });
       }
 
diff --git a/public/user-stat.html b/public/user-stat.html
index cff1bc5..488278a 100644
--- a/public/user-stat.html
+++ b/public/user-stat.html
@@ -173,11 +173,7 @@
       </div>
       <div class="modal-body">
         <div class="d-flex flex-column gap-3">
-          <div class="d-flex flex-wrap gap-2 align-items-center">
-            <div class="input-group input-group-sm flex-grow-1" style="min-width: 220px;">
-              <span class="input-group-text">Rechercher</span>
-              <input id="movie-search" type="search" class="form-control" placeholder="Titre, catégorie…" autocomplete="off">
-            </div>
+          <div class="d-flex flex-wrap gap-2 align-items-center justify-content-end">
             <select id="movie-sort" class="form-select form-select-sm" style="max-width: 240px;">
               <option value="recent">Plus récents</option>
               <option value="title">Titre (A → Z)</option>