Kanbante 0.46.1 — HUB-18 : thème commun, barre v0.5.0 + initialisation thème Hub dans nav.js (fusion #132)

static/js/draco-barre.js

@@ -36,6 +36,12 @@
  * remplissage), aligné à gauche du libellé via .draco-menu-icone.
  * L'en-tête d'identité ne reçoit pas d'icône. Aucun changement de
  * comportement : liens résolus et Déconnexion relayée inchangés.
+ * v0.5.0 (carte HUB-18, fusion #132) : thème commun de la suite —
+ * la barre apprend la préférence de thème du profil du Hub
+ * (GET <hub>/api/profil/theme, cookie draco) et l'applique à
+ * l'ouverture par le mécanisme data-theme des hôtes, avec cache
+ * local court et repli intégral sur le comportement actuel de
+ * l'hôte si le Hub ne répond pas. Voir « Thème commun » plus bas.
  *
  * Aucun gestionnaire inline : un seul écouteur délégué sur le document
  * (patron validé par le prototype — les onclick du HTML généré sont
@@ -268,6 +274,131 @@
   }
   var resolvedUrls = resolveUrls();
 
+  /* ── Thème commun (v0.5.0, carte HUB-18, fusion #132) ────────────
+   * La préférence de thème de la suite vit dans le profil du Hub :
+   *   GET <hub>/api/profil/theme → {"theme": "sombre"|"clair"|"systeme"|null}
+   * authentifié par le cookie draco (credentials: "include").
+   * <hub> est l'URL RÉSOLUE ci-dessus (explicite > dérivation -dev >
+   * défaut officiel) — jamais un nom figé de plus.
+   * Application par le mécanisme data-theme existant des hôtes :
+   * "sombre" → data-theme="dark", "clair" → data-theme="light",
+   * "systeme" → attribut RETIRÉ (prefers-color-scheme décide, garde
+   * html:not([data-theme]) du CSS de la barre comme des hôtes).
+   * L'événement draco:theme ({theme, mode} — mode = "dark"/"light"
+   * EFFECTIF) est ensuite dispatché pour les hôtes dont le mécanisme
+   * propre doit suivre (icônes et libellés, feuilles de style,
+   * palettes ShaarIt, attribut dédié de la console…) ; un hôte qui
+   * s'initialise après la barre lit la même information dans
+   * DRACO_BAR.themePref / DRACO_BAR.themeMode.
+   * Ordre d'application : 1) le cache local FRAIS est appliqué de
+   * façon SYNCHRONE à l'initialisation de la barre (script en defer
+   * chez tous les hôtes : avant DOMContentLoaded, donc avant le
+   * premier rendu dans le cas général) ; 2) un fetch ASYNCHRONE et
+   * NON BLOQUANT rafraîchit le cache et ré-applique si la préférence
+   * a changé. À la toute première visite (aucun cache), un bref
+   * flash du thème local de l'hôte reste possible le temps du fetch :
+   * c'est le prix du repli — l'état affiché transitoire est le thème
+   * que l'hôte aurait de toute façon choisi seul, jamais un état
+   * cassé, et les visites suivantes sont servies par le cache.
+   * Cache : localStorage "draco-theme-hub" ({theme, ts}), TTL 12 h
+   * (ordre de la journée) ; il ne contient QUE la préférence du Hub,
+   * jamais le choix local de l'hôte.
+   * REPLI INTÉGRAL : Hub injoignable, réponse non-OK (401…), JSON
+   * invalide, theme null ou valeur inconnue → RIEN n'est appliqué et
+   * RIEN n'est mis en cache ; un échec de fetch n'efface pas un cache
+   * existant. Le comportement actuel de l'hôte (son localStorage,
+   * puis le système) reste alors exactement le maître, comme avant
+   * la v0.5.0. Le sélecteur de thème LOCAL de chaque hôte reste
+   * fonctionnel : la barre n'applique qu'à l'ouverture (cache, puis
+   * fetch) ; elle ne ré-applique ensuite que sur changement du
+   * schéma système, et seulement tant que la préférence résolue est
+   * "systeme". */
+  var THEME_CACHE_CLE = "draco-theme-hub";
+  var THEME_CACHE_TTL_MS = 12 * 60 * 60 * 1000;
+  var themePref = null;  /* "sombre"|"clair"|"systeme"|null (non résolue) */
+  var themeMode = null;  /* "dark"|"light"|null : mode effectif appliqué */
+
+  function themeSystemeEstSombre() {
+    try {
+      return !!(window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
+    } catch (e) { return false; }
+  }
+  function lireCacheTheme() {
+    try {
+      var brut = window.localStorage &&
+        window.localStorage.getItem(THEME_CACHE_CLE);
+      if (!brut) return null;
+      var c = JSON.parse(brut);
+      if (!c || typeof c.ts !== "number") return null;
+      if (Date.now() - c.ts > THEME_CACHE_TTL_MS) return null;
+      if (c.theme === "sombre" || c.theme === "clair" || c.theme === "systeme")
+        return c.theme;
+    } catch (e) { /* stockage indisponible ou corrompu : pas de cache */ }
+    return null;
+  }
+  function ecrireCacheTheme(theme) {
+    try {
+      if (window.localStorage) {
+        window.localStorage.setItem(THEME_CACHE_CLE,
+          JSON.stringify({ theme: theme, ts: Date.now() }));
+      }
+    } catch (e) { /* stockage indisponible : le prochain fetch refera le travail */ }
+  }
+  function appliquerThemeCommun(theme) {
+    var root = document.documentElement;
+    if (!root) return;
+    if (theme === "sombre" || theme === "clair") {
+      themeMode = theme === "sombre" ? "dark" : "light";
+      root.setAttribute("data-theme", themeMode);
+    } else if (theme === "systeme") {
+      themeMode = themeSystemeEstSombre() ? "dark" : "light";
+      root.removeAttribute("data-theme");
+    } else {
+      return;
+    }
+    themePref = theme;
+    if (window.DRACO_BAR) {
+      window.DRACO_BAR.themePref = themePref;
+      window.DRACO_BAR.themeMode = themeMode;
+    }
+    try {
+      document.dispatchEvent(new CustomEvent("draco:theme",
+        { detail: { theme: themePref, mode: themeMode } }));
+    } catch (e) { /* aucun écouteur hôte : data-theme suffit */ }
+  }
+  function initThemeCommun() {
+    var enCache = lireCacheTheme();
+    if (enCache) appliquerThemeCommun(enCache);
+    /* Suivi du schéma système tant que la préférence est "systeme" :
+     * sans data-theme, le CSS suit tout seul ; l'événement est
+     * re-dispatché pour les hôtes qui matérialisent le mode. */
+    try {
+      var mq = window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)");
+      if (mq && mq.addEventListener) {
+        mq.addEventListener("change", function () {
+          if (themePref === "systeme") appliquerThemeCommun("systeme");
+        });
+      }
+    } catch (e) { /* pas de matchMedia : pas de suivi */ }
+    if (typeof window.fetch !== "function") return;
+    var url = withSlash(resolvedUrls.hub || DEFAULT_URLS.hub) +
+      "api/profil/theme";
+    window.fetch(url, { credentials: "include" }).then(function (resp) {
+      if (!resp || !resp.ok) return null;
+      return resp.json();
+    }).then(function (data) {
+      if (!data) return;
+      var t = data.theme;
+      if (t === "sombre" || t === "clair" || t === "systeme") {
+        ecrireCacheTheme(t);
+        appliquerThemeCommun(t);
+      }
+      /* theme null ou inconnu : repli intégral, rien n'est touché. */
+    }).catch(function () { /* Hub injoignable : repli intégral */ });
+  }
+
   function setCounts(counts) {
     Object.keys(counts || {}).forEach(function (k) {
       /* Toutes les occurrences : l'onglet ET sa ligne dans le menu. */
@@ -695,6 +826,9 @@
   window.DRACO_BAR = {
     setCounts: setCounts, setCurrent: setCurrent, setDomain: setDomain,
     urls: resolvedUrls,
+    /* Thème commun (v0.5.0) : préférence du Hub résolue et mode
+     * effectif appliqué ; null tant que rien n'a été résolu (repli). */
+    themePref: null, themeMode: null,
     setUrls: function (urls) {
       cfg.urls = Object.assign({}, cfg.urls, urls || {});
       resolvedUrls = resolveUrls();
@@ -709,6 +843,7 @@
   buildCompteMenu();
   syncAvatar();
   refreshCompteMenu();
+  initThemeCommun();
   if (cfg.current) setCurrent(cfg.current);
   if (cfg.domain) setDomain(cfg.domain);
   if (cfg.counts) setCounts(cfg.counts);

static/js/nav.js

@@ -63,6 +63,30 @@
         });
     }
 
+    /* Thème commun de la suite (HUB-18, fusion #132) : la barre
+       commune (v0.5.0) applique la préférence du Hub à l'ouverture —
+       directement sur data-theme depuis son cache, et via
+       l'événement « draco:theme » quand le fetch aboutit. Ici, on
+       resynchronise le bouton de bascule avec le mode effectif.
+       Le choix local « kanbante-theme » n'est PAS écrasé : la
+       préférence du Hub initialise l'ouverture, le bouton reste le
+       maître pour la session (son clic mémorise comme avant).
+       Repli : Hub muet → aucun événement, l'amorce de _header.html
+       (choix local, défaut sombre) reste seule maître, comme avant.
+       La barre (defer) s'exécute avant nav.js : sa préférence déjà
+       résolue depuis son cache est aussi reprise au démarrage. */
+    function appliquerThemeCommun(mode) {
+        document.documentElement.setAttribute('data-theme', mode);
+        syncThemeBtn(mode);
+    }
+    document.addEventListener('draco:theme', function (e) {
+        var mode = e && e.detail && e.detail.mode;
+        if (mode === 'dark' || mode === 'light') appliquerThemeCommun(mode);
+    });
+    if (window.DRACO_BAR && (window.DRACO_BAR.themeMode === 'dark' || window.DRACO_BAR.themeMode === 'light')) {
+        appliquerThemeCommun(window.DRACO_BAR.themeMode);
+    }
+
     /* En mobile, le bouton de repli dans le tiroir FERME le tiroir :
        replier un tiroir de 264 px n'a pas de sens, et avant ce
        correctif il basculait l'état desktop (tiroir 68 px). */