{# Barre d'apps commune dracodev — Fusion ACC-1 (issue kanbante#28).
   Snippet vendangé depuis Projets/dracodev-commons v0.1.10
   (ui/barre-apps/) : structure inchangée ; seule adaptation locale
   (0.32.0, dev/prod) = les URL des apps et l'adresse du service
   d'agents sont INJECTÉES par l'hôte depuis app.config
   (draco_urls / agent_url, défauts = noms officiels) — aucun nom
   public codé en dur dans ce gabarit ni dans draco-panneau.js.
   Chantier 5 (fusion #69/#71, sans bump) : 5e onglet Console Spark
   (data-app="agent", agent_url), après Kanbante ; l'entrée
   « Console Spark » du menu de la marque est conservée.
   CSS/JS : /static/css/draco-barre.css, /static/js/draco-barre.js.
   Inclus par _header.html (toutes les pages applicatives ; ni le
   wallboard ni l'écran de connexion, volontaires).
   Icônes logos v0.1.9 (2026-10-29) : les 5 tuiles sont les logos
   fournis, tels quels, servis depuis /static/img/logos/ (copie de
   ui/barre-apps/logos/ de dracodev-commons) — jamais de glyphe
   texte, jamais de redessin ; l'entrée « Console Spark » du menu
   clone l'icône de l'onglet agent (draco-barre.js).
   Portage v0.1.10 (2026-10-29) : marque = logo Spark 26 px ;
   --agent rouge Spark #c00000 ; bouton Spark rose supprimé,
   remplacé par l'avatar flottant bas-centre (data-act="spark"
   → panneau Spark de l'hôte) ; Alertes = cloche seule.
   Portage v0.1.11 (2026-10-29) : marque = étoile Spark monochrome
   (static/img/brand-spark.png, blanche sur barre foncée, noire
   sur barre claire via le filtre du CSS vendangé) ; l'onglet
   agent et son entrée de menu gardent le logo rouge ; anneau
   rouge #c00000 autour de l'avatar flottant (CSS vendangé).
   Thème : la barre suit html[data-theme] (sombre par défaut,
   bascule mémorisée kanbante-theme) et prefers-color-scheme —
   tous deux couverts par le CSS vendangé, aucune surcharge
   style.css nécessaire. #}
<link rel="stylesheet" href="/static/css/draco-barre.css?v={{ version }}">
<link rel="stylesheet" href="/static/css/draco-panneau.css?v={{ version }}">
<link rel="stylesheet" href="/static/css/draco-alertes.css?v={{ version }}">
<script>document.body.classList.add('has-draco-bar');</script>
<header class="draco-bar" data-current="kanbante">
    <div class="draco-bar-zone draco-bar-gauche">
        <button type="button" class="draco-icon-btn" data-act="rail" aria-label="Barre latérale">☰</button>
        <a class="draco-brand" href="/" data-act="apps" aria-haspopup="true" aria-expanded="false" aria-label="dracodev — changer d&#39;application" title="Changer d&#39;application">
            <span class="draco-brand-mark"><img src="/static/img/brand-spark.png" alt="dracodev" width="26" height="26"></span><span class="draco-brand-name">dracodev</span>
        </a>
        <nav class="draco-apptabs" aria-label="Applications">
            <a class="draco-apptab" data-app="obsigate" href="{{ draco_urls.obsigate }}/">
                <span class="draco-apptab-ico" style="--app:#7a5af5"><img src="/static/img/logos/obsigate.png" alt="ObsiGate" width="30" height="30"></span>
                <span class="draco-apptab-txt"><strong>ObsiGate</strong><small>Notes</small></span>
            </a>
            <a class="draco-apptab" data-app="flowdeck" href="{{ draco_urls.flowdeck }}/">
                <span class="draco-apptab-ico" style="--app:#2f6fed"><img src="/static/img/logos/flowdeck.png" alt="Flowdeck" width="30" height="30"></span>
                <span class="draco-apptab-txt"><strong>Flowdeck</strong><small>Projets</small></span>
            </a>
            <a class="draco-apptab" data-app="tiktak" href="{{ draco_urls.tiktak }}/">
                <span class="draco-apptab-ico" style="--app:#e8762c"><img src="/static/img/logos/tiktak.svg" alt="TikTak" width="30" height="30"></span>
                <span class="draco-apptab-txt"><strong>TikTak</strong><small>Tâches</small></span>
                <span class="draco-badge" data-badge="tiktak" hidden>0</span>
            </a>
            <a class="draco-apptab" data-app="kanbante" href="{{ draco_urls.kanbante }}/">
                <span class="draco-apptab-ico" style="--app:#0d9488"><img src="/static/img/logos/kanbante.png" alt="Kanbante" width="30" height="30"></span>
                <span class="draco-apptab-txt"><strong>Kanbante</strong><small>Kanban</small></span>
                <span class="draco-badge" data-badge="kanbante" hidden>0</span>
            </a>
            <a class="draco-apptab" data-app="agent" href="{{ agent_url }}/">
                <span class="draco-apptab-ico" style="--app:#c00000"><img src="/static/img/logos/spark.png" alt="Console Spark" width="30" height="30"></span>
                <span class="draco-apptab-txt"><strong>Console Spark</strong><small>Agent commun</small></span>
            </a>
        </nav>
    </div>
    <div class="draco-bar-zone draco-bar-centre">
        <button type="button" class="draco-search" data-act="palette" aria-label="Rechercher partout (Ctrl+K)">
            <span class="draco-search-ico">⌕</span>
            <span class="draco-search-txt">Rechercher partout…</span>
            <kbd>⌘K</kbd>
        </button>
    </div>
    <div class="draco-bar-zone draco-bar-droite">
        <div class="draco-domaines" role="group" aria-label="Domaine">
            <span class="draco-domaines-lbl">Domaine</span>
            <button type="button" data-act="domaine" data-dom="pro">Pro</button>
            <button type="button" data-act="domaine" data-dom="famille">Famille</button>
            <button type="button" data-act="domaine" data-dom="perso">Perso</button>
        </div>
        <button type="button" class="draco-alertes" data-act="alertes" aria-label="Alertes unifiées">
            <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
            <span class="draco-badge" data-badge="alertes" hidden>0</span>
        </button>
        <button type="button" class="draco-avatar" data-act="compte" aria-label="Compte" aria-haspopup="menu" aria-expanded="false" title="Opérateur Kanbante">{{ draco_avatar }}</button>
    </div>
</header>
<button type="button" class="draco-spark-flottant" data-act="spark" aria-label="Ouvrir Spark, l'agent commun"><img src="/static/img/avatar-spark.png" alt="" width="64" height="64"></button>
<div class="draco-bar-rappel" data-act="rappel-entete" hidden>✦ dracodev — afficher l'en-tête</div>
<script>
    /* Configuration Kanbante de la barre commune (Fusion ACC-1).
       Phase 1 : navigation entre apps et domaine mémorisé localement ;
       le rail pilote le repli natif de la barre latérale, la palette
       ouvre la recherche & commandes native (Ctrl+K) ; les alertes
       unifiées passent par le panneau draco-alertes.js (Fusion #69,
       agrégation à la demande, pas une fédération temps réel) ;
       recherche partout : page /recherche (Fusion #68). */
    window.DRACO_BAR_CONFIG = {
        current: "kanbante",
        /* v0.1.6 : user = initiale auth_user ou K (draco_avatar). Sans
           cfg.user, le nouveau JS dériverait l'initiale du title
           ("Opérateur Kanbante" → "O"), qui est un libellé de rôle et
           non un nom. Contrepartie documentée : syncAvatar() réécrit
           aussi le title avec le nom d'affichage, donc l'infobulle
           devient l'initiale après chargement (le libellé reste dans
           le HTML servi). */
        user: "{{ draco_avatar }}",
        domain: (function () { try { return localStorage.getItem("draco_domain") || "pro"; } catch (e) { return "pro"; } })(),
        counts: {},
        onAction: function (act, el) {
            var dire = function (m) {
                var d = document.createElement("div");
                d.textContent = m;
                d.style.cssText = "position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:3000;background:#1f1f1f;color:#eee;padding:10px 16px;border-radius:10px;font:500 13.5px system-ui;box-shadow:0 6px 24px rgb(0 0 0/.35)";
                document.body.appendChild(d);
                setTimeout(function () { d.remove(); }, 3400);
            };
            if (act === "domaine") { try { localStorage.setItem("draco_domain", el.dataset.dom); } catch (e) { } return; }
            if (act === "rail") { var b = document.getElementById("side-collapse"); if (b) b.click(); return; }
            /* Menu compte (image 2) : ces deux actions étaient relayées
               par draco-barre.js mais jamais prises en charge ici —
               le menu se fermait sans rien faire. En mobile, c'est le
               seul accès au profil et à la déconnexion (le pied de
               sidebar était masqué). */
            if (act === "profil") { location.href = "/profile"; return; }
            if (act === "deconnexion") { location.href = "/logout"; return; }
            if (act === "palette") { location.href = "/recherche"; return; }
            if (act === "alertes") { if (window.DRACO_ALERTES) { window.DRACO_ALERTES.open(); } else { location.href = "/activity"; } return; }
            /* Correctif fusion #70 : action "menu" supprimée avec le bouton trois points (console agent dans le menu de la marque). */
            if (act === "spark") {
                if (window.DRACO_PANNEAU) { window.DRACO_PANNEAU.toggle(); }
                else { dire("Spark : le panneau n'a pas pu se charger."); }
                return;
            }
            if (act === "rappel-entete") {
                var bar = document.querySelector(".draco-bar");
                if (bar) bar.style.display = "";
                el.hidden = true;
            }
        }
    };
</script>
<script defer src="/static/js/draco-barre.js?v={{ version }}"></script>
<script>window.DRACO_PANNEAU_CONFIG = { api: "{{ agent_url }}" };</script>
<script defer src="/static/js/draco-panneau.js?v={{ version }}"></script>
<script defer src="/static/js/draco-alertes.js?v={{ version }}"></script>