Version 2026.5.36 — Sidebar verticale en vue horizontale (#horizontal-wrapper)

[code interpolé entre v2026.5.35 et v2026.5.37]

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Planification",
-  "version": "2026.5.35",
+  "version": "2026.5.36",
   "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.",
   "browser_specific_settings": {
     "gecko": {

viewer.css

@@ -3586,35 +3586,160 @@ html.view-classic .tech-row-stats {
 
 /* ==========================================================================
    v2026.5.35 : en vue horizontale, stats globales sur le CÔTÉ GAUCHE
-   (colonne verticale fixe) au lieu d'être au-dessus des cartes.
+   v2026.5.36 : REFONTE — les stats (et tout le reste) sont maintenant déplacés
-   Libère de la hauteur verticale pour les 8 techs.
+                physiquement dans .horizontal-sidebar (via JS _moveElementsToSidebar).
+                Le CSS ci-dessous est conservé au cas où une ancienne instance
+                ait encore .stats dans <main>, mais il ne devrait plus s'appliquer.
    ========================================================================== */
-html.view-horizontal main {
+html.view-horizontal main#main.legacy-stats-layout {
   display: flex;
   flex-direction: row;
   align-items: stretch;
 }
 
-html.view-horizontal .stats {
+/* ==========================================================================
+   v2026.5.36 : Vue horizontale — sidebar verticale à gauche
+   Contient (haut → bas) : nav date, horloge, stats, boutons actions.
+   Seuls restent en haut : user-badge, titre "Planification", bouton thème.
+   ========================================================================== */
+
+/* Topbar en vue horizontale : minimaliste */
+html.view-horizontal .topbar {
+  padding: 6px 12px !important;
+  gap: 8px;
+}
+/* Cacher la zone centrale (déplacée vers sidebar) */
+html.view-horizontal .topbar .app-clock,
+html.view-horizontal .topbar .capture-info,
+html.view-horizontal .topbar .app-session {
+  display: none !important;
+}
+/* topbar-left ne contient plus que user-badge + titre */
+html.view-horizontal .topbar-left {
+  gap: 10px;
+}
+/* topbar-right ne contient plus que le theme-toggle */
+html.view-horizontal .topbar-right {
+  gap: 4px;
+}
+
+/* Sidebar verticale à gauche */
+.horizontal-sidebar {
   flex: 0 0 auto;
   width: 200px;
-  flex-direction: column !important;
+  min-width: 200px;
-  align-items: flex-start !important;
+  max-width: 200px;
-  gap: 8px !important;
-  padding: 12px 16px !important;
-  border-right: 1px solid var(--border);
   background: var(--bg-muted);
+  border-right: 1px solid var(--border);
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
   position: sticky;
   top: 0;
   align-self: flex-start;
-  min-height: calc(100vh - 80px);
+  max-height: calc(100vh - 48px);  /* topbar ~48px */
+  font-size: 12px;
+  box-sizing: border-box;
+}
+
+/* Cacher la sidebar en vue classique (au cas où elle existe encore) */
+html.view-classic .horizontal-sidebar {
+  display: none !important;
+}
+
+/* Layout main avec sidebar */
+html.view-horizontal main#main {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+/* 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 {
+  /* v5.37 override via display: contents ci-dessous */
+}
+html.view-horizontal .horizontal-sidebar .date-nav .btn-nav {
+  /* 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;
+}
+html.view-horizontal .horizontal-sidebar .date-nav .date-custom {
+  width: 100%;
+  justify-content: flex-start;
+  padding: 6px 8px;
+  font-size: 12px !important;
+}
+html.view-horizontal .horizontal-sidebar .date-nav .btn-today {
+  padding: 4px 10px;
   font-size: 12px !important;
 }
 
-html.view-horizontal .stats .global-stat {
+/* Horloge dans la sidebar */
+html.view-horizontal .horizontal-sidebar .app-clock {
+  position: static !important;
+  transform: none !important;
+  left: auto !important;
+  top: auto !important;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: 2px;
+  padding: 6px 8px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+html.view-horizontal .horizontal-sidebar .app-clock-date {
+  font-size: 11px !important;
+  color: var(--text-muted) !important;
+  font-weight: 500 !important;
+}
+html.view-horizontal .horizontal-sidebar .app-clock-date::after {
+  content: "" !important;  /* supprimer le gros point · */
+  display: none !important;
+}
+html.view-horizontal .horizontal-sidebar .app-clock-time {
+  font-size: 20px !important;
+  font-weight: 700 !important;
+  color: var(--text) !important;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Info capture (Synchronisé à...) */
+html.view-horizontal .horizontal-sidebar .capture-info {
+  display: block !important;
+  font-size: 11px !important;
+  color: var(--text-muted);
+  padding: 2px 4px;
+}
+
+/* Stats globales dans la sidebar (séparateurs cachés) */
+html.view-horizontal .horizontal-sidebar #stats {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 4px !important;
+  padding: 6px 4px !important;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  margin: 2px 0;
+  background: transparent !important;
+  width: 100%;
+  box-sizing: border-box;
+}
+html.view-horizontal .horizontal-sidebar #stats .global-stat {
   display: block;
   width: 100%;
-  padding: 4px 0;
+  padding: 2px 0;
+  font-size: 11px;
+  color: var(--text-muted);
 }
 html.view-horizontal .stats .global-stat-main b {
   font-size: 18px !important;

viewer.js

@@ -1046,8 +1046,33 @@ function _toggleView() {
   _setCurrentView(next);
 }
 
+/**
+ * v2026.5.36 : applique le mode de vue (classique/horizontal) en déplaçant
+ * physiquement les éléments de la topbar vers/depuis une sidebar verticale
+ * à gauche de l'écran.
+ *
+ * En vue horizontale :
+ *   - Sidebar gauche verticale contenant (haut → bas) :
+ *     · Navigation date (prev / date / next / aujourd'hui)
+ *     · Horloge + date (compacte, une par ligne)
+ *     · Info de synchro
+ *     · Stats globales (interventions/techs/absents)
+ *     · Boutons actions (Absence, Douchette, Actualiser, Tout recharger, Vider cache)
+ *   - Topbar réduite à : user-badge + titre + theme-toggle
+ *
+ * En vue classique :
+ *   - Tout est remis dans la topbar comme avant (topbar-left / topbar-right)
+ *
+ * On mémorise les parents d'origine sur chaque élément (data-orig-parent)
+ * pour restaurer proprement en vue classique.
+ *
+ * Logs [viewMode] pour debug.
+ */
 function _applyViewMode() {
   const mode = _getCurrentView();
+  console.log(`[viewMode] application de la vue : ${mode}`);
+
+  // Mettre à jour la classe sur <html> pour les règles CSS
   document.documentElement.classList.remove("view-classic", "view-horizontal");
   document.documentElement.classList.add("view-" + mode);
 }