flowdeck/app/templates/_draco_bar.html

{# Barre d'apps commune dracodev — Fusion ACC-1.1 (issue #17).
   Snippet FIGÉ vendangé depuis Projets/dracodev-commons v0.1.4
   (ui/barre-apps/) : ne pas modifier la structure ici ; toute évolution
   passe par une nouvelle version de commons.
   CSS/JS : /static/css/draco-barre.css, /static/js/vendor/draco-barre.js.
   v7.82.0 (dev/prod) : les href des onglets ne sont plus figés —
   l'hôte les injecte depuis sa config (draco_urls(), noms officiels
   par défaut, noms en -dev déclarés dans le .env de l'environnement). #}
<header class="draco-bar" data-current="flowdeck">
    <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">✦</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">▤</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">▦</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">✓</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">▥</span>
                <span class="draco-apptab-txt"><strong>Kanbante</strong><small>Kanban</small></span>
                <span class="draco-badge" data-badge="kanbante" hidden>0</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-alertes-txt">Alertes</span>
            <span class="draco-badge" data-badge="alertes" hidden>0</span>
        </button>
        <button type="button" class="draco-spark" data-act="spark" aria-label="Ouvrir Spark, l'agent commun">
            <span class="draco-spark-ico">✦</span><span class="draco-spark-txt">Spark</span>
            <span class="draco-badge" data-badge="spark" hidden>0</span>
        </button>
        <button type="button" class="draco-icon-btn" data-act="menu" aria-label="Plus d'actions" aria-haspopup="menu">•••</button>
        <span class="draco-avatar" title="{{ user.get('full_name') if user and user.get('full_name') else '' }}">{{ user.full_name[:1].upper() if user and user.get('full_name') else 'F' }}</span>
    </div>
</header>
<div class="draco-bar-rappel" data-act="rappel-entete" hidden>✦ dracodev — afficher l'en-tête</div>
<script nonce="{{ csp_nonce() }}">
    /* Configuration Flowdeck de la barre commune (Fusion ACC-1.1).
       Phase 1 : navigation entre apps et domaine mémorisé localement ;
       le rail pilote le hamburger natif, les alertes ouvrent la cloche
       native de la page ; la recherche fédérée et Spark arrivent avec
       les phases suivantes du programme Fusion. */
    window.DRACO_BAR_CONFIG = {
        current: "flowdeck",
        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 h = document.querySelector(".hamburger-btn"); if (h) h.click(); return; }
            if (act === "alertes") {
                var b = document.querySelector(".fd-notif-bell button");
                if (b) { b.click(); } else { dire("Alertes unifiées : arrive avec la fédération (programme Fusion)."); }
                return;
            }
            if (act === "palette") { dire("Recherche fédérée ⌘K : arrive avec la fédération (programme Fusion)."); return; }
            if (act === "menu") { dire("Menu commun : arrive avec la fédération (programme Fusion)."); return; }
            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>