From 01453bce5f9dbcba78be58b6c15190abe53a7132 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Mon, 7 Sep 2026 21:45:50 -0400
Subject: [PATCH] feat(admin): navigation par sections sticky + support complet
 des themes

Navigation/ergonomie:
- barre sticky de pilules (Stats, Audit, Backups, Utilisateurs) sous le header
- scrollspy (IntersectionObserver) + scroll fluide au clic dans admin.js
- ancres + scroll-margin-top sur chaque section, layout responsive <600px

Themes:
- admin.html importe et appelle initThemes() (themes.js) au boot: la page
  reprend le theme/mode sauvegarde dans l'app (localStorage meme-origine)
- script anti-FOUC en <head> applique vite le mode avant le CSS
---
 frontend/admin.html  | 82 +++++++++++++++++++++++++++++++++++++++++---
 frontend/js/admin.js | 51 +++++++++++++++++++++++++++
 2 files changed, 128 insertions(+), 5 deletions(-)

diff --git a/frontend/admin.html b/frontend/admin.html
index 8b611ed..7bbe692 100644
--- a/frontend/admin.html
+++ b/frontend/admin.html
@@ -7,6 +7,21 @@
     <meta name="robots" content="noindex" />
 
     <link rel="icon" type="image/svg+xml" href="/static/icons/icon-72x72.svg" />
+
+    <!-- Anti-FOUC : applique vite le mode du thème sauvegardé avant le CSS -->
+    <script>
+        (function () {
+            var root = document.documentElement;
+            try {
+                var mode = localStorage.getItem("obsigate-theme-mode") || "dark";
+                root.setAttribute("data-theme", mode);
+                var light = mode === "light" || mode === "sepia";
+                root.style.setProperty("--bg-primary", light ? "#ffffff" : "#0f1117");
+                root.style.setProperty("--text-primary", light ? "#1a1a1a" : "#e6edf3");
+            } catch (e) { root.setAttribute("data-theme", "dark"); }
+        })();
+    </script>
+
     <link rel="stylesheet" href="/static/style.css" />
 
     <style>
@@ -27,6 +42,51 @@
             color: var(--text-primary, #e6edf3);
             font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
         }
+
+        /* ── Sticky section nav ── */
+        .admin-subnav {
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            display: flex;
+            gap: 6px;
+            flex-wrap: nowrap;
+            overflow-x: auto;
+            padding: 8px 24px;
+            background: var(--bg-secondary, #161b22);
+            border-bottom: 1px solid var(--border, #21262d);
+            backdrop-filter: blur(4px);
+            scrollbar-width: thin;
+        }
+        .admin-subnav::-webkit-scrollbar { height: 6px; }
+        .admin-subnav a {
+            flex: 0 0 auto;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 14px;
+            border-radius: 8px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            color: var(--text-secondary, #8b949e);
+            text-decoration: none;
+            border: 1px solid transparent;
+            transition: background 0.15s, color 0.15s, border-color 0.15s;
+        }
+        .admin-subnav a:hover {
+            background: var(--bg-hover, #1f2430);
+            color: var(--text-primary, #e6edf3);
+        }
+        .admin-subnav a.active {
+            background: var(--accent-bg, #1f2a3a);
+            color: var(--accent-text, #79c0ff);
+            border-color: var(--accent, #58a6ff);
+        }
+        .admin-section { scroll-margin-top: 64px; }
+        @media (max-width: 600px) {
+            .admin-subnav { padding: 8px 12px; }
+            .admin-subnav a { font-size: 0.8rem; padding: 6px 10px; }
+        }
         .admin-header {
             display: flex;
             align-items: center;
@@ -246,7 +306,7 @@
         }
 
         /* ── Users management ── */
-        #admin-users-section .admin-users-hint {
+        #section-users .admin-users-hint {
             color: var(--text-secondary, #8b949e);
             font-size: 0.85rem;
             margin-bottom: 14px;
@@ -299,18 +359,25 @@
         </div>
     </header>
 
+    <nav class="admin-subnav" id="admin-subnav" aria-label="Sections admin">
+        <a href="#section-stats" class="active" data-section="stats">📊 <span data-i18n="admin.stats_title">Statistiques</span></a>
+        <a href="#section-audit" data-section="audit">🕒 <span data-i18n="admin.audit_title">Logs d'audit</span></a>
+        <a href="#section-backups" data-section="backups">💾 <span data-i18n="admin.backups_title">Backups</span></a>
+        <a href="#section-users" data-section="users">👥 <span data-i18n="admin.users_title">Utilisateurs</span></a>
+    </nav>
+
     <main id="admin-main" class="admin-main">
         <!-- Loading state shown until init() resolves -->
         <div id="admin-loading" class="admin-loading" data-i18n="common.loading">Chargement…</div>
 
         <!-- Section 1 — Stats temps réel -->
-        <section class="admin-section">
+        <section class="admin-section" id="section-stats">
             <h2 data-i18n="admin.stats_title">Statistiques temps réel</h2>
             <div id="admin-stats-grid" class="admin-loading">…</div>
         </section>
 
         <!-- Section 2 — Logs d'audit -->
-        <section class="admin-section">
+        <section class="admin-section" id="section-audit">
             <h2 data-i18n="admin.audit_title">Logs d'audit</h2>
             <div class="admin-filters">
                 <input type="text" id="admin-audit-user" data-i18n-placeholder="admin.audit_filter_user" placeholder="Filtrer par utilisateur" />
@@ -335,7 +402,7 @@
         </section>
 
         <!-- Section 3 — Statistiques backups -->
-        <section class="admin-section">
+        <section class="admin-section" id="section-backups">
             <h2 data-i18n="admin.backups_title">Statistiques backups</h2>
             <div id="admin-backups-summary"></div>
             <div id="admin-backups-empty" class="admin-loading" style="display:none;" data-i18n="admin.backups_vault_empty">Aucun backup</div>
@@ -353,7 +420,7 @@
         </section>
 
         <!-- Section 4 — Gestion utilisateurs -->
-        <section class="admin-section" id="admin-users-section">
+        <section class="admin-section" id="section-users">
             <h2 data-i18n="admin.users_title">Gestion utilisateurs</h2>
             <p class="admin-users-hint" data-i18n="admin.users_manage_hint">Ouvrir la modale de gestion des utilisateurs (CRUD complet)</p>
             <button id="admin-users-manage-btn" class="admin-btn" data-i18n="admin.users_manage_btn">Gérer les utilisateurs</button>
@@ -372,12 +439,17 @@
     </footer>
 
     <script type="module">
+        // Theme: applique le thème/mode sauvegardé dans l'app principale
+        // (même origine => localStorage partagé). Fait AVANT le rendu pour
+        // éviter que la page admin n'utilise les vars CSS par défaut.
+        import { initThemes } from "/static/js/themes.js";
         // We import admin.js which provides init() — but the i18n module
         // is global (window.t), so we can use t() right away to translate
         // static DOM. admin.js will then call init() after DOMContentLoaded.
         import { initI18n } from "/static/js/i18n.js";
         import * as Admin from "/static/js/admin.js";
 
+        initThemes();
         await initI18n();
         // Re-apply DOM translations now that locale strings are loaded
         document.querySelectorAll("[data-i18n]").forEach((el) => {
diff --git a/frontend/js/admin.js b/frontend/js/admin.js
index ba080f9..9485448 100644
--- a/frontend/js/admin.js
+++ b/frontend/js/admin.js
@@ -399,6 +399,56 @@ function _wireAuditFilters() {
   }
 }
 
+// ── Section nav (scrollspy) ───────────────────────────────────────────
+
+/**
+ * Wire the sticky section nav: smooth-scroll on click + highlight the section
+ * currently in view (IntersectionObserver). Falls back to default anchor jump
+ * if the observer is unavailable.
+ */
+function _wireSectionNav() {
+  const links = Array.from(document.querySelectorAll("#admin-subnav a"));
+  if (!links.length) return;
+  const targets = links
+    .map((a) => document.getElementById((a.getAttribute("href") || "#").slice(1)))
+    .filter(Boolean);
+
+  // Smooth scroll on click
+  links.forEach((a) => {
+    a.addEventListener("click", (e) => {
+      const href = a.getAttribute("href");
+      if (!href || !href.startsWith("#")) return;
+      const t = document.getElementById(href.slice(1));
+      if (!t) return;
+      e.preventDefault();
+      t.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  });
+
+  // Scrollspy: mark the section currently at the top of the viewport
+  let active = null;
+  const setActive = (id) => {
+    if (active === id) return;
+    active = id;
+    links.forEach((l) => l.classList.toggle("active", l.getAttribute("href") === "#" + id));
+  };
+
+  if ("IntersectionObserver" in window) {
+    const io = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((en) => {
+          if (en.isIntersecting) setActive(en.target.id);
+        });
+      },
+      { rootMargin: "-64px 0px -70% 0px", threshold: 0 }
+    );
+    targets.forEach((t) => io.observe(t));
+  } else {
+    // Fallback: highlight the first section only (no scroll observation)
+    links[0] && links[0].classList.add("active");
+  }
+}
+
 // ── Auth gate ────────────────────────────────────────────────────────────
 
 /**
@@ -482,6 +532,7 @@ export async function init() {
   _populateAuditActions();
   _wireAuditFilters();
   _wireUserMgmt();
+  _wireSectionNav();
 
   // Initial loads (in parallel — none depends on another)
   loadStatsOnce();