From aabda3ba7e18b692802456e56d3c5cee2a3d530d Mon Sep 17 00:00:00 2001
From: Quentin Rouiller <quentin.rouiller@vd.ch>
Date: Fri, 24 Apr 2026 13:45:50 +0200
Subject: [PATCH] =?UTF-8?q?v2026.5.37=20=E2=80=94=20Refonte=20vue=20horizo?=
 =?UTF-8?q?ntale=20(sidebar=20compl=C3=A8te)=20:=20topbar=20supprim=C3=A9e?=
 =?UTF-8?q?,=20user-badge=20+=20titre=20+=20bouton=20Aujourd'hui=20+=20dat?=
 =?UTF-8?q?e/heure=20+=20stats=20en=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manifest.json |   2 +-
 viewer.css    | 204 ++++++++++++++++++++++++++++++++++++++++++++++----
 viewer.js     |  59 ++++++++++++++-
 3 files changed, 248 insertions(+), 17 deletions(-)

diff --git a/manifest.json b/manifest.json
index 915435c..4bbd3a0 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Planification",
-  "version": "2026.5.36",
+  "version": "2026.5.37",
   "description": "Vue claire et rapide du planning des techniciens EasyVista. Regroupe interventions et réservations par tech, affiche horaires, contact, lieu, catégorie et statut en un coup d'œil.",
   "permissions": ["activeTab", "scripting", "storage", "tabs", "alarms"],
   "host_permissions": [
diff --git a/viewer.css b/viewer.css
index 440b1ee..2416901 100644
--- a/viewer.css
+++ b/viewer.css
@@ -3656,23 +3656,19 @@ html.view-horizontal main#main {
   align-items: stretch;
 }
 
-/* Groupe navigation date dans la sidebar */
+/* Groupe navigation date dans la sidebar — v2026.5.36 (OBSOLÈTE v2026.5.37)
+   v2026.5.37 : date-nav devient display: contents pour que ses enfants
+                soient directement positionnables dans la sidebar (btn-today
+                en haut, app-clock intercalé, flèches groupées dans wrapper).
+                Les anciennes règles ci-dessous sont conservées pour compat
+                mais neutralisées par les overrides v5.37 plus bas. */
 html.view-horizontal .horizontal-sidebar .date-nav {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  flex-wrap: wrap;
+  /* v5.37 override via display: contents ci-dessous */
 }
 html.view-horizontal .horizontal-sidebar .date-nav .btn-nav {
-  flex: 0 0 auto;
+  /* v5.37 : ces règles sont conservées au cas où flèches restent dans date-nav
+     (pas censé arriver puisque JS les sort dans #sidebar-arrows). */
   padding: 4px 8px;
-  min-width: 28px;
-}
-html.view-horizontal .horizontal-sidebar .date-nav .date-custom-wrapper {
-  flex: 1 1 100%;
-  order: -1;   /* date au-dessus des flèches */
 }
 html.view-horizontal .horizontal-sidebar .date-nav .date-custom {
   width: 100%;
@@ -3681,7 +3677,6 @@ html.view-horizontal .horizontal-sidebar .date-nav .date-custom {
   font-size: 12px !important;
 }
 html.view-horizontal .horizontal-sidebar .date-nav .btn-today {
-  flex: 0 0 auto;
   padding: 4px 10px;
   font-size: 12px !important;
 }
@@ -3856,3 +3851,184 @@ html.view-horizontal .horizontal-wrapper > main#main {
   flex: 1 1 auto;
   min-width: 0;
 }
+
+/* ==========================================================================
+   v2026.5.37 : refonte layout vue horizontale
+   - Topbar en haut : masquée complètement (user-badge + titre descendent
+     dans la sidebar)
+   - Sidebar : user-badge + titre en haut, date/heure sous le bouton Auj.,
+     stats puis espace libre puis boutons en bas (direction colonne-inverse)
+   - Progress-bar : overlay par-dessus user-badge + titre
+   - Banderole "En pompier du..." : masquée en vue horizontale
+   ========================================================================== */
+
+/* 1. Topbar masquée complètement en vue horizontale */
+html.view-horizontal body > header.topbar {
+  display: none !important;
+}
+
+/* 2. Sidebar : structure verticale avec section fixe en haut (user+titre+date)
+      et section "boutons" en bas poussée via margin-top: auto. */
+html.view-horizontal .horizontal-sidebar {
+  max-height: 100vh !important;
+  padding-top: 12px !important;
+}
+
+/* 3. User-badge et titre dans la sidebar, côte à côte en haut */
+html.view-horizontal .horizontal-sidebar #user-badge {
+  position: relative;
+  margin: 0 auto 2px auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+html.view-horizontal .horizontal-sidebar #app-title {
+  text-align: center;
+  font-size: 15px !important;
+  font-weight: 700 !important;
+  margin: 0 0 8px 0 !important;
+  padding: 0 !important;
+  color: var(--text);
+}
+
+/* 4. Bouton "Aujourd'hui" en pleine largeur, avant date/heure */
+/* v2026.5.37 : on utilise un DOM wrapper #sidebar-arrows créé en JS pour
+   les 2 flèches côte à côte. date-nav est décomposé en : [Auj.] + [clock
+   intercalé] + [date-custom] + [arrows-wrapper]. Le JS s'en occupe. */
+html.view-horizontal .horizontal-sidebar .date-nav {
+  display: contents;
+}
+/* Le bouton Aujourd'hui devient prominent */
+html.view-horizontal .horizontal-sidebar .btn-today {
+  order: 1;                     /* tout en haut après titre */
+  width: 100% !important;
+  text-align: center !important;
+  padding: 8px 12px !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  background: var(--bg) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 6px !important;
+  color: var(--text) !important;
+  justify-content: center !important;
+}
+html.view-horizontal .horizontal-sidebar .btn-today::before {
+  content: "↺ ";
+  margin-right: 4px;
+}
+
+/* 5. App-clock (date + heure) centré sous le bouton "Aujourd'hui" */
+html.view-horizontal .horizontal-sidebar .app-clock {
+  order: 2;
+  align-items: center !important;
+  text-align: center !important;
+  padding: 6px 4px !important;
+  background: transparent !important;
+  border: none !important;
+  margin-bottom: 4px;
+}
+html.view-horizontal .horizontal-sidebar .app-clock-date {
+  text-align: center !important;
+  width: 100%;
+}
+html.view-horizontal .horizontal-sidebar .app-clock-time {
+  text-align: center !important;
+  width: 100%;
+  font-size: 22px !important;
+}
+
+/* 6. Séparateur visuel après date/heure (avant sélecteur date)
+   v2026.5.37 : on override order:-1 qui venait de v5.36 */
+html.view-horizontal .horizontal-sidebar .date-nav .date-custom-wrapper {
+  order: 3 !important;
+  border-top: 1px solid var(--border);
+  padding-top: 8px;
+  margin-top: 4px;
+  width: 100%;
+}
+
+/* 7. Flèches ◀ ▶ côte à côte via wrapper JS #sidebar-arrows */
+html.view-horizontal .horizontal-sidebar #sidebar-arrows {
+  order: 4;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  width: 100%;
+}
+html.view-horizontal .horizontal-sidebar #sidebar-arrows .btn-nav {
+  flex: 1 1 0 !important;
+  min-width: 0 !important;
+  justify-content: center !important;
+}
+
+/* 8. Stats empilées avec order pour venir après les flèches */
+html.view-horizontal .horizontal-sidebar #stats {
+  order: 5;
+  width: 100%;
+  margin-top: 8px;
+}
+
+/* 9. Capture-info (Synchronisé à HH:MM) sous les stats */
+html.view-horizontal .horizontal-sidebar .capture-info {
+  order: 6;
+  margin-top: 4px;
+  text-align: center;
+}
+
+/* 10. Boutons poussés en bas via margin-top: auto sur le premier d'entre eux
+       (Absence, qui a order:7) */
+html.view-horizontal .horizontal-sidebar #absence-btn {
+  order: 7;
+  margin-top: auto !important;  /* pousse tout ce qui suit en bas */
+}
+html.view-horizontal .horizontal-sidebar #douchette-btn { order: 8; }
+html.view-horizontal .horizontal-sidebar #refresh-partial-btn { order: 9; }
+html.view-horizontal .horizontal-sidebar #refresh-btn { order: 10; }
+html.view-horizontal .horizontal-sidebar #clear-cache-btn { order: 11; }
+html.view-horizontal .horizontal-sidebar #theme-toggle {
+  order: 12;
+  margin-top: 4px !important;
+}
+html.view-horizontal .horizontal-sidebar #abort-btn {
+  order: 8;  /* avec douchette-btn (qui est aussi 8) — ne devrait pas
+                être visible en même temps (un seul actif à la fois) */
+}
+
+/* 11. Theme-toggle en bas : pleine largeur centrée */
+html.view-horizontal .horizontal-sidebar #theme-toggle {
+  width: 100% !important;
+  padding: 6px !important;
+  justify-content: center !important;
+}
+
+/* 12. Sidebar doit être flex column pour que margin-top:auto fonctionne */
+html.view-horizontal .horizontal-sidebar {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 6px !important;
+}
+
+/* 13. Barre de rafraîchissement en vue horizontale : overlay par-dessus
+       user-badge + titre (zone haut de sidebar). */
+html.view-horizontal #progress-bar {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 200px !important;           /* largeur de la sidebar */
+  z-index: 9999 !important;
+  border-radius: 0 !important;
+  margin: 0 !important;
+  pointer-events: none;
+}
+/* Sur breakpoint étroit (sidebar 170px) */
+@media (max-width: 1400px) {
+  html.view-horizontal #progress-bar {
+    width: 170px !important;
+  }
+}
+
+/* 14. Banderole "En pompier du..." : masquée en vue horizontale uniquement
+       (la barre rouge à gauche et le badge POMPIER restent visibles). */
+html.view-horizontal .card-status-note.pompier {
+  display: none !important;
+}
diff --git a/viewer.js b/viewer.js
index 24a5777..ea693da 100644
--- a/viewer.js
+++ b/viewer.js
@@ -1078,7 +1078,11 @@ function _applyViewMode() {
 
   // Liste des IDs à déplacer entre topbar (classique) et sidebar (horizontal)
   // Ordre = ordre visuel dans la sidebar en mode horizontal (haut → bas)
+  // v2026.5.37 : user-badge, app-title, theme-toggle déplacés aussi → la topbar
+  //              devient vide en vue horizontale.
   const ELEMENTS_TO_RELOCATE = [
+    "user-badge",              // tout en haut de la sidebar
+    "app-title",               // juste après user-badge
     "date-nav",                // (pas un id mais une classe, traité à part)
     "app-clock",
     "capture-info",
@@ -1088,7 +1092,8 @@ function _applyViewMode() {
     "refresh-partial-btn",
     "refresh-btn",
     "abort-btn",
-    "clear-cache-btn"
+    "clear-cache-btn",
+    "theme-toggle"             // tout en bas de la sidebar
   ];
 
   if (mode === "horizontal") {
@@ -1137,11 +1142,35 @@ function _moveElementsToSidebar(ids) {
   }
 
   // Traitement spécial : .date-nav (classe, pas id)
+  // v2026.5.37 : en vue horizontale, on décompose .date-nav pour :
+  //   - Mettre btn-today en haut
+  //   - Intercaler app-clock entre btn-today et date-custom
+  //   - Grouper les 2 flèches dans un wrapper #sidebar-arrows pour qu'elles
+  //     soient côte à côte et même largeur
   const dateNav = document.querySelector(".date-nav");
   if (dateNav) {
     _memorizeOriginalParent(dateNav);
     sidebar.appendChild(dateNav);
     console.log("[viewMode] déplacé dans sidebar : .date-nav");
+
+    // Créer le wrapper des flèches si pas déjà fait, et y mettre prev + next
+    let arrowsWrap = document.getElementById("sidebar-arrows");
+    if (!arrowsWrap) {
+      arrowsWrap = document.createElement("div");
+      arrowsWrap.id = "sidebar-arrows";
+      sidebar.appendChild(arrowsWrap);
+      console.log("[viewMode] wrapper flèches #sidebar-arrows créé");
+    }
+    const prevBtn = document.getElementById("nav-prev");
+    const nextBtn = document.getElementById("nav-next");
+    if (prevBtn && !arrowsWrap.contains(prevBtn)) {
+      _memorizeOriginalParent(prevBtn);
+      arrowsWrap.appendChild(prevBtn);
+    }
+    if (nextBtn && !arrowsWrap.contains(nextBtn)) {
+      _memorizeOriginalParent(nextBtn);
+      arrowsWrap.appendChild(nextBtn);
+    }
   }
 
   // Pour chaque ID listé, trouver et déplacer
@@ -1163,8 +1192,34 @@ function _moveElementsToSidebar(ids) {
  * data-orig-parent). Utilisé quand on revient en vue classique.
  */
 function _restoreElementsToTopbar(ids) {
-  // Restaurer .date-nav
+  // v2026.5.37 : d'abord remettre les flèches dans .date-nav (avant de
+  // restaurer .date-nav à son parent d'origine), puis supprimer le wrapper
+  // #sidebar-arrows.
   const dateNav = document.querySelector(".date-nav");
+  const prevBtn = document.getElementById("nav-prev");
+  const nextBtn = document.getElementById("nav-next");
+  if (dateNav && prevBtn && !dateNav.contains(prevBtn)) {
+    // Remettre prev en premier dans date-nav
+    dateNav.insertBefore(prevBtn, dateNav.firstChild);
+  }
+  if (dateNav && nextBtn && !dateNav.contains(nextBtn)) {
+    // Remettre next après date-custom-wrapper (position d'origine) :
+    // l'ordre d'origine est [prev, date-custom-wrapper, next, today].
+    const dateCustomWrap = dateNav.querySelector(".date-custom-wrapper");
+    if (dateCustomWrap && dateCustomWrap.nextSibling) {
+      dateNav.insertBefore(nextBtn, dateCustomWrap.nextSibling);
+    } else {
+      dateNav.appendChild(nextBtn);
+    }
+  }
+  // Supprimer le wrapper des flèches (normalement vide maintenant)
+  const arrowsWrap = document.getElementById("sidebar-arrows");
+  if (arrowsWrap) {
+    arrowsWrap.remove();
+    console.log("[viewMode] wrapper #sidebar-arrows supprimé");
+  }
+
+  // Restaurer .date-nav à son parent d'origine
   if (dateNav) _restoreToOriginalParent(dateNav, ".date-nav");
 
   for (const id of ids) {