From e6f3b028302ba189ea0ab2197b6141e19f6b60a4 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 21 Dec 2025 23:02:22 +0000
Subject: [PATCH] Refactor: Improve header loading and image rendering

Add early JS to populate header elements and optimize image loading.

Co-authored-by: mathieumoran1 <mathieumoran1@gmail.com>
---
 public/checklist.html        |  4 ++-
 public/control.html          |  4 ++-
 public/css/app.css           | 24 ++++++++++++++++
 public/js/app_header_boot.js | 54 ++++++++++++++++++++++++++++++++++++
 public/movies.html           |  4 ++-
 public/player.html           |  4 ++-
 public/user-stat.html        |  4 ++-
 7 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 public/js/app_header_boot.js

diff --git a/public/checklist.html b/public/checklist.html
index 4dac099..ef66fbf 100644
--- a/public/checklist.html
+++ b/public/checklist.html
@@ -6,6 +6,8 @@
   <title>Pool Oscars - Checklist</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="./css/app.css" rel="stylesheet">
+  <link rel="preload" as="image" href="img/logo_w.png">
+  <script src="./js/app_header_boot.js" defer></script>
   <style>
     .navbar-custom {
       background-color: black;
@@ -65,7 +67,7 @@
 <nav class="navbar navbar-expand-lg navbar-custom">
   <div class="container">
     <a class="navbar-brand" style="margin-left: -7px;">
-      <img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">
+      <img src="img/logo_w.png" width="220" height="70" loading="eager" fetchpriority="high" decoding="async" style="max-width: 220px; height: 70px; object-fit: contain;">
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
diff --git a/public/control.html b/public/control.html
index 31ab13b..7b26bab 100644
--- a/public/control.html
+++ b/public/control.html
@@ -6,6 +6,8 @@
   <title>Pool Oscars - Admin</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="./css/app.css" rel="stylesheet">
+  <link rel="preload" as="image" href="img/logo_w.png">
+  <script src="./js/app_header_boot.js" defer></script>
   <style>
     .navbar-custom {
       background-color: black;
@@ -31,7 +33,7 @@
 <nav class="navbar navbar-expand-lg navbar-custom">
   <div class="container">
     <a class="navbar-brand" style="margin-left: -7px;">
-      <img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">
+      <img src="img/logo_w.png" width="220" height="70" loading="eager" fetchpriority="high" decoding="async" style="max-width: 220px; height: 70px; object-fit: contain;">
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
diff --git a/public/css/app.css b/public/css/app.css
index fb487db..fe3a6fa 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -74,6 +74,30 @@ footer {
     opacity: 1;
   }
 
+  /* Avoid initial navbar "blur flash" before JS computes the exact height. */
+  body.page-loading .page-loader-overlay {
+    top: var(--page-loader-top, 72px);
+  }
+
+  /* Reserve space for username so it doesn't "pop" the layout. */
+  #user-name {
+    display: inline-block;
+    min-width: 8ch;
+    white-space: nowrap;
+  }
+
+  /*
+    Reserve space for the Admin button even when hidden.
+    This prevents a visible re-layout when we discover admin status from the token.
+  */
+  @media (min-width: 992px) {
+    nav.navbar #admin-control-link.d-none {
+      display: inline-block !important;
+      visibility: hidden !important;
+      pointer-events: none;
+    }
+  }
+
   .page-loader-overlay.page-loader-hide {
     opacity: 0;
     pointer-events: none;
diff --git a/public/js/app_header_boot.js b/public/js/app_header_boot.js
new file mode 100644
index 0000000..e4381a4
--- /dev/null
+++ b/public/js/app_header_boot.js
@@ -0,0 +1,54 @@
+// Runs early (defer) to populate the navbar before page-specific JS.
+// Goal: avoid "late" header updates that look like flicker.
+(function () {
+  function base64UrlToJson(b64url) {
+    const s = String(b64url || '')
+      .replace(/-/g, '+')
+      .replace(/_/g, '/');
+    const padded = s + '='.repeat((4 - (s.length % 4)) % 4);
+    return JSON.parse(atob(padded));
+  }
+
+  function decodeJwtPayload(token) {
+    const parts = String(token || '').split('.');
+    if (parts.length < 2) return null;
+    try { return base64UrlToJson(parts[1]); } catch (_) { return null; }
+  }
+
+  function isExpired(decoded) {
+    const exp = Number(decoded?.exp);
+    if (!Number.isFinite(exp) || exp <= 0) return false;
+    const now = Math.floor(Date.now() / 1000);
+    return exp < now;
+  }
+
+  const token = localStorage.getItem('auth_token');
+  if (!token) return;
+
+  const decoded = decodeJwtPayload(token);
+  if (!decoded) return;
+
+  // Fast-path redirect checks (match page scripts behavior).
+  if (decoded.mustChangePassword && !/\/change-password\.html(\?|#|$)/.test(window.location.pathname)) {
+    window.location.href = '/change-password.html';
+    return;
+  }
+  if (isExpired(decoded)) {
+    try { localStorage.removeItem('auth_token'); } catch (_) {}
+    if (!/\/index\.html$/.test(window.location.pathname) && window.location.pathname !== '/') {
+      window.location.href = '/';
+    }
+    return;
+  }
+
+  const nameEl = document.getElementById('user-name');
+  if (nameEl && !nameEl.textContent) {
+    nameEl.textContent = decoded.name || '';
+  }
+
+  const adminLink = document.getElementById('admin-control-link');
+  if (adminLink && decoded.admin) {
+    adminLink.classList.remove('d-none');
+  }
+})();
+
diff --git a/public/movies.html b/public/movies.html
index c755142..dd556a2 100644
--- a/public/movies.html
+++ b/public/movies.html
@@ -6,6 +6,8 @@
   <title>Pool Oscars - Films</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="./css/app.css" rel="stylesheet">
+  <link rel="preload" as="image" href="img/logo_w.png">
+  <script src="./js/app_header_boot.js" defer></script>
   <style>
     .navbar-custom {
       background-color: black;
@@ -80,7 +82,7 @@
 <nav class="navbar navbar-expand-lg navbar-custom">
   <div class="container">
     <a class="navbar-brand" style="margin-left: -7px;">
-      <img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">
+      <img src="img/logo_w.png" width="220" height="70" loading="eager" fetchpriority="high" decoding="async" style="max-width: 220px; height: 70px; object-fit: contain;">
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
diff --git a/public/player.html b/public/player.html
index f36ad1d..87cda19 100644
--- a/public/player.html
+++ b/public/player.html
@@ -6,6 +6,8 @@
   <title>Player</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="./css/app.css" rel="stylesheet">
+  <link rel="preload" as="image" href="img/logo_w.png">
+  <script src="./js/app_header_boot.js" defer></script>
   <style>
     .navbar-custom {
       background-color: black;
@@ -65,7 +67,7 @@
   <nav class="navbar navbar-expand-lg navbar-custom">
     <div class="container">
       <a class="navbar-brand" style="margin-left: -7px;" href="movies.html">
-        <img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">
+        <img src="img/logo_w.png" width="220" height="70" loading="eager" fetchpriority="high" decoding="async" style="max-width: 220px; height: 70px; object-fit: contain;">
       </a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/public/user-stat.html b/public/user-stat.html
index 5f177fc..27e3746 100644
--- a/public/user-stat.html
+++ b/public/user-stat.html
@@ -6,6 +6,8 @@
   <title>Pool Oscars - Statistiques des utilisateurs</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="./css/app.css" rel="stylesheet">
+  <link rel="preload" as="image" href="img/logo_w.png">
+  <script src="./js/app_header_boot.js" defer></script>
   <style>
     .navbar-custom {
       background-color: black;
@@ -53,7 +55,7 @@
 <nav class="navbar navbar-expand-lg navbar-custom">
   <div class="container">
     <a class="navbar-brand" style="margin-left: -7px;">
-      <img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">
+      <img src="img/logo_w.png" width="220" height="70" loading="eager" fetchpriority="high" decoding="async" style="max-width: 220px; height: 70px; object-fit: contain;">
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>