From 36057d75df00829b3c30b9e99372e8dfe17db20b Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Mon, 26 Jan 2026 18:15:30 -0500
Subject: [PATCH] UI polish: remove page titles and highlight active nav

---
 public/checklist.html        |  4 +---
 public/control.html          |  5 -----
 public/css/app.css           | 24 ++++++++++++++++++++++++
 public/js/app_header_boot.js | 17 +++++++++++++++++
 public/movies.html           |  4 +---
 public/picks.html            |  4 +---
 public/user-stat.html        | 10 +++++-----
 7 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/public/checklist.html b/public/checklist.html
index db272c9..acbed0e 100644
--- a/public/checklist.html
+++ b/public/checklist.html
@@ -108,10 +108,8 @@
 </nav>
 
 <div class="container mt-4">
-  <h2>Checklist</h2>
-
   <!-- Summary card (match Stats page spacing/structure) -->
-  <div class="card shadow-sm mt-3">
+  <div class="card shadow-sm">
     <div class="card-body">
       <div class="d-flex flex-column gap-1">
         <div id="watched-ratio" class="fw-semibold">—</div>
diff --git a/public/control.html b/public/control.html
index 568ee48..f0f2b8e 100644
--- a/public/control.html
+++ b/public/control.html
@@ -78,11 +78,6 @@
 </nav>
 
 <div class="container mt-4">
-  <div class="mb-3">
-    <h2 class="mb-0">Admin</h2>
-    <div class="text-muted">Paramètres, utilisateurs et gestion des films.</div>
-  </div>
-
   <div id="response" class="alert d-none" role="alert"></div>
 
   <ul class="nav nav-tabs" id="adminTabs" role="tablist">
diff --git a/public/css/app.css b/public/css/app.css
index 8be22c0..1957dc5 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -703,6 +703,30 @@ footer {
     border-bottom: 1px solid var(--app-navbar-border);
   }
 
+  /* Navbar: show current page state */
+  .navbar-custom .navbar-nav .nav-link.btn.is-current {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: rgba(255, 255, 255, 0.55);
+    color: #fff;
+  }
+
+  .navbar-custom .navbar-nav .nav-link.btn.is-current:hover {
+    background: rgba(255, 255, 255, 0.22);
+    border-color: rgba(255, 255, 255, 0.65);
+    color: #fff;
+  }
+
+  html[data-theme="dark"] .navbar-custom .navbar-nav .nav-link.btn.is-current {
+    background: rgba(79, 124, 255, 0.22);
+    border-color: rgba(79, 124, 255, 0.58);
+    color: #fff;
+  }
+
+  html[data-theme="dark"] .navbar-custom .navbar-nav .nav-link.btn.is-current:hover {
+    background: rgba(79, 124, 255, 0.28);
+    border-color: rgba(79, 124, 255, 0.7);
+  }
+
   /* The logo image has a bit of built-in left whitespace; nudge it back to align with page titles. */
   .navbar-custom .navbar-brand img {
     margin-left: -9px;
diff --git a/public/js/app_header_boot.js b/public/js/app_header_boot.js
index b3860fb..abbc102 100644
--- a/public/js/app_header_boot.js
+++ b/public/js/app_header_boot.js
@@ -112,5 +112,22 @@
         // On error, keep current state (already set from cache or default)
       });
   }
+
+  // Highlight the active page in the navbar.
+  (function markActiveNavLink() {
+    const currentFile = (String(window.location.pathname || '').split('/').pop() || 'index.html').toLowerCase();
+    const links = document.querySelectorAll('nav.navbar .navbar-nav a.nav-link[href]');
+    links.forEach((a) => {
+      const rawHref = String(a.getAttribute('href') || '');
+      const hrefFile = rawHref.split('#')[0].split('?')[0].split('/').pop().toLowerCase();
+      const isCurrent = hrefFile && hrefFile === currentFile;
+      a.classList.toggle('is-current', isCurrent);
+      if (isCurrent) {
+        a.setAttribute('aria-current', 'page');
+      } else if (a.getAttribute('aria-current') === 'page') {
+        a.removeAttribute('aria-current');
+      }
+    });
+  })();
 })();
 
diff --git a/public/movies.html b/public/movies.html
index c6f4a56..7775dc4 100644
--- a/public/movies.html
+++ b/public/movies.html
@@ -95,10 +95,8 @@
 </nav>
 
 <div class="container mt-4 pb-5">
-  <h2>Films</h2>
-
   <!-- Summary card (match Statistiques/Checklist structure) -->
-  <div class="card shadow-sm mt-3">
+  <div class="card shadow-sm">
     <div class="card-body">
       <div class="d-flex flex-column gap-1">
         <div class="text-muted small">
diff --git a/public/picks.html b/public/picks.html
index f5bfaa6..508d30f 100644
--- a/public/picks.html
+++ b/public/picks.html
@@ -167,12 +167,10 @@
 </nav>
 
 <div class="container mt-4 pb-5">
-  <h2>Mes picks Oscars</h2>
-  
   <div id="alert-container"></div>
   
   <!-- Tabs -->
-  <ul class="nav nav-tabs mt-3" id="picksTabs" role="tablist">
+  <ul class="nav nav-tabs" id="picksTabs" role="tablist">
     <li class="nav-item" role="presentation">
       <button class="nav-link active" id="tab-my-picks" data-bs-toggle="tab" data-bs-target="#pane-my-picks" type="button" role="tab" aria-controls="pane-my-picks" aria-selected="true">
         Mes picks
diff --git a/public/user-stat.html b/public/user-stat.html
index 359189b..fd056ec 100644
--- a/public/user-stat.html
+++ b/public/user-stat.html
@@ -101,10 +101,8 @@
 </nav>
 
 <div class="container mt-4">
-  <h2>Statistiques des utilisateurs</h2>
-
   <!-- Tabs -->
-  <ul class="nav nav-tabs stats-tabs mt-3" id="statsTabs" role="tablist">
+  <ul class="nav nav-tabs stats-tabs" id="statsTabs" role="tablist">
     <li class="nav-item" role="presentation">
       <button class="nav-link active" id="tab-ranking" data-bs-toggle="tab" data-bs-target="#pane-ranking" type="button" role="tab" aria-controls="pane-ranking" aria-selected="true">
         Classement
@@ -147,7 +145,6 @@
 
     <!-- Winners tab -->
     <div class="tab-pane fade" id="pane-winners" role="tabpanel" aria-labelledby="tab-winners" tabindex="0">
-      <h4 class="mb-2">Gagnants</h4>
       <div class="table-responsive mb-4">
         <table class="table table-sm table-striped align-middle mb-0">
           <thead>
@@ -167,7 +164,10 @@
 
     <!-- 100% completers tab -->
     <div class="tab-pane fade" id="pane-completion" role="tabpanel" aria-labelledby="tab-completion" tabindex="0">
-      <h4 class="mb-2">Utilisateurs ayant terminé 100% (par année)</h4>
+      <div class="small text-muted mb-2 d-flex align-items-center gap-2">
+        <span class="badge bg-light text-dark border" aria-hidden="true">i</span>
+        <span>Utilisateurs ayant terminé 100% (par année)</span>
+      </div>
       <div class="table-responsive mb-4">
         <table class="table table-sm table-striped align-middle mb-0">
           <thead>