From c3ab04f805c4d98573a12bf60188f6110357639f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 22 Dec 2025 10:19:35 +0000
Subject: [PATCH] Refactor checklist styling and structure

Co-authored-by: mathieumoran1 <mathieumoran1@gmail.com>
---
 public/checklist.html      | 56 +++++++++++++++++++++++---------------
 public/js/app_checklist.js | 19 +++++++------
 2 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/public/checklist.html b/public/checklist.html
index ef66fbf..2233d28 100644
--- a/public/checklist.html
+++ b/public/checklist.html
@@ -44,11 +44,6 @@
     .navbar-toggler-icon {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
     }
-    /* New styles for table */
-    .table-hover tbody tr:hover {
-      background-color: #f1f1f1;
-      cursor: pointer;
-    }
   </style>
 </head>
 <body class="bg-light page-loading">
@@ -90,25 +85,42 @@
 
 <div class="container mt-5">
   <h2>Checklist</h2>
-  <div id="watched-ratio" class="ratio"></div>
-  <h3 class="fs-6" style="margin-bottom: -1px;">Temps avant les Oscars (<span id="oscar-date-day-month">—</span> <span id="oscar-year">—</span>) - <span id="time-left"></span></h3>
-  <h3 class="fs-6"><span id="movies-per-day"></span></h3>
-  <div class="progress my-3">
-    <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%; background-color: red;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+
+  <!-- Summary card (match Stats page spacing/structure) -->
+  <div class="card shadow-sm mt-3">
+    <div class="card-body">
+      <div class="d-flex flex-column gap-1">
+        <div id="watched-ratio" class="fw-semibold">—</div>
+        <div class="text-muted small">
+          Temps avant les Oscars (<span id="oscar-date-day-month">—</span> <span id="oscar-year">—</span>) — <span id="time-left">—</span>
+        </div>
+        <div class="text-muted small"><span id="movies-per-day"></span></div>
+      </div>
+
+      <div class="progress mt-3" style="height: 10px;">
+        <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%; background-color: red;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-busy="true"></div>
+      </div>
+    </div>
   </div>
+
   <!-- Table for movies -->
-  <table class="table table-hover movie-table">
-    <thead>
-      <tr>
-        <th scope="col">Vu</th>
-        <th scope="col">Titre</th>
-        <th scope="col">Date</th>
-      </tr>
-    </thead>
-    <tbody id="movie-table-body">
-      <!-- Movie rows will be inserted here -->
-    </tbody>
-  </table>
+  <div class="table-responsive mt-3">
+    <table class="table table-striped table-hover align-middle movie-table mb-0">
+      <thead>
+        <tr>
+          <th scope="col">Vu</th>
+          <th scope="col">Titre</th>
+          <th scope="col">Date</th>
+        </tr>
+      </thead>
+      <tbody id="movie-table-body">
+        <tr>
+          <td colspan="3" class="text-center py-4 text-muted" aria-live="polite" aria-busy="true">Chargement…</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
   <br><br>
 </div>
 
diff --git a/public/js/app_checklist.js b/public/js/app_checklist.js
index 0c74d9c..5823cdb 100644
--- a/public/js/app_checklist.js
+++ b/public/js/app_checklist.js
@@ -453,12 +453,9 @@ window.addEventListener('DOMContentLoaded', async function () {
         <td id="watched-date-${movie.imdb_id}">${watchedDate}</td>
       `;
 
-      // Set initial row color based on watched state
-      if (watchedMovie) {
-        movieRow.style.backgroundColor = 'rgba(144, 238, 144, 0.6)'; // Lighter light green with transparency
-      } else {
-        movieRow.style.backgroundColor = 'rgba(255, 99, 71, 0.6)'; // Lighter light red with transparency
-      }
+      // Use Bootstrap table state classes (matches Stats page styling better than custom backgrounds)
+      movieRow.classList.toggle('table-success', Boolean(watchedMovie));
+      movieRow.classList.toggle('table-danger', !watchedMovie);
 
       movieTableBody.appendChild(movieRow);
 
@@ -478,10 +475,16 @@ window.addEventListener('DOMContentLoaded', async function () {
 
         if (isChecked) {
           watchedDateCell.textContent = new Date().toLocaleString();
-          row.style.backgroundColor = 'rgba(144, 238, 144, 0.6)'; // Apply light green with transparency
+          if (row) {
+            row.classList.add('table-success');
+            row.classList.remove('table-danger');
+          }
         } else {
           watchedDateCell.textContent = '';
-          row.style.backgroundColor = 'rgba(255, 99, 71, 0.6)'; // Apply light red with transparency
+          if (row) {
+            row.classList.add('table-danger');
+            row.classList.remove('table-success');
+          }
         }
 
         await fetch('/api/movies/users/updateWatchedMovies', {