Merge pull request 'Kanbante 0.45.3 : barre v0.1.11 — marque monochrome, anneau rouge de l'avatar' (#75) from barre-v0111-0-45-3 into main

CHANGELOG.md

@@ -1,3 +1,26 @@
+## 0.45.3 — 2026-10-29 — Barre commune v0.1.11 : marque monochrome, anneau rouge de l'avatar
+
+- **Barre d'apps v0.1.11 vendangée (dracodev-commons)** : `draco-barre.css` remplacé verbatim (le JS Kanbante est déjà identique à celui de commons, inchangé en v0.1.11) ; fragment `_draco_bar.html` porté à la v0.1.11, le reste de l'intégration Kanbante (URL Jinja `draco_urls` / `agent_url`, `onAction` complet y compris profil/déconnexion, compteurs) est inchangé. Les surcharges Kanbante dans `style.css` ne sont pas touchées.
+- **Marque monochrome** : la marque n'est plus le logo rouge — c'est l'étoile Spark monochrome (`static/img/brand-spark.png`, étoile blanche extraite du logo rouge, fond transparent, 26 px) : blanche sur barre foncée, noire sur barre claire via le filtre du CSS vendangé (`brightness(0)` par défaut, annulé en thème sombre). L'onglet agent et son entrée de menu gardent le logo rouge.
+- **Anneau rouge de l'avatar** : le bouton avatar flottant bas-centre gagne une bordure rouge `#c00000` de 3 px (règle du CSS vendangé, `var(--agent)`).
+- **Thème** : aucun correctif nécessaire — la barre Kanbante 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é ; vérifié, aucune surcharge `style.css` ajoutée.
+- **Cache** : le bump 0.45.2 → 0.45.3 change aussi le `?v=` des CSS/JS.
+
+## 0.45.2 — 2026-10-29 — Barre commune v0.1.10 : rouge Spark, marque logo, avatar flottant, Alertes icône seule
+
+- **Barre d'apps v0.1.10 vendangée (dracodev-commons)** : `draco-barre.css` remplacé verbatim (le JS Kanbante est déjà identique à celui de commons v0.1.10, inchangé) ; fragment `_draco_bar.html` porté à la v0.1.10, le reste de l'intégration Kanbante (URL Jinja `draco_urls` / `agent_url`, `onAction` complet y compris profil/déconnexion, compteurs) est inchangé. Les surcharges Kanbante dans `style.css` ne sont pas touchées.
+- **Rose → rouge Spark** : `--agent` passe de `#c2437e` à `#c00000` (rouge échantillonné dans le logo Spark) ; la marque ✦ devient le logo Spark (26 px) ; l'onglet agent passe à `--app #c00000`.
+- **Bouton Spark rose supprimé** de la barre, remplacé par le bouton avatar flottant bas-centre (`static/img/avatar-spark.png`, cercle personnage, `data-act="spark"` → le panneau Spark de l'hôte via le `onAction` existant).
+- **Alertes** : cloche seule, sans libellé — le bouton est moins large (pastille conservée).
+- **Test** : l'assertion de la marque dans `tests/test_draco_barre.py` suit le nouveau CSS (`.draco-brand-mark img` au lieu de `font-size: 24px`, disparu en v0.1.10) ; aucun test n'affirmait le bouton Spark ni le libellé Alertes.
+- **Cache** : le bump 0.45.1 → 0.45.2 change aussi le `?v=` des CSS/JS.
+
+## 0.45.1 — 2026-10-29 — Barre commune : les 5 logos en place dans le menu et la barre
+
+- **Barre d'apps v0.1.9 vendangée (dracodev-commons)** : `draco-barre.js` et `draco-barre.css` remplacés verbatim par la v0.1.9 (les fichiers vendangés précédents étaient identiques à l'octet près à ceux de commons avant la v0.1.9, aucune adaptation locale n'est perdue) ; fragment `_draco_bar.html` porté à la v0.1.9, le reste de l'intégration Kanbante (URL Jinja `draco_urls` / `agent_url`, `onAction` complet y compris profil/déconnexion, compteurs) est inchangé. Les surcharges Kanbante dans `style.css` ne sont pas touchées.
+- **Icônes** : les 5 tuiles de la barre — et donc du menu de la marque, qui les clone — sont désormais les logos fournis, tels quels, jamais redessinés : ObsiGate (arbre), Flowdeck (cartes), TikTak (logo officiel SVG), Kanbante (cycle vert), Console Spark (étoile rouge validée). Fichiers servis depuis `static/img/logos/` (copie de `ui/barre-apps/logos/` de commons, PNG 180 px) ; l'entrée « Console Spark » du menu clone l'icône de l'onglet agent. Les glyphes texte ▤/▦/✓/▥/✦ disparaissent des onglets (la marque ✦, le bouton Spark et le rappel d'en-tête gardent leur ✦).
+- **Cache** : le bump 0.45.0 → 0.45.1 change aussi le `?v=` des CSS/JS de la barre, donc les navigateurs ne garderont pas les anciennes icônes.
+
 ## 0.45.0 — 2026-10-29 — Mobile : tiroir, pied et menu compte
 
 - **Tiroir mobile** : l'état « replié » mémorisé sur desktop ne rétrécit plus le tiroir (cause : `body.sidebar-collapsed .sidebar { width: 68px; }` gagnait par spécificité sur le 264 px mobile, libellés tronqués par overflow-x). Le tiroir fait 264 px, replié ou non ; le fond ne défile plus derrière lui ; le bouton de repli dans le tiroir le ferme ; un clic sur un lien de navigation le ferme aussi.

app/config.py

@@ -177,7 +177,7 @@ from urllib.parse import urlparse
 
 BASE_DIR = Path(__file__).resolve().parent.parent
 
-APP_VERSION = "0.45.0"
+APP_VERSION = "0.45.3"
 
 
 def _env_bool(name: str, default: bool) -> bool:

app/templates/_draco_bar.html

@@ -1,5 +1,5 @@
 {# Barre d'apps commune dracodev — Fusion ACC-1 (issue kanbante#28).
-   Snippet vendangé depuis Projets/dracodev-commons v0.1.6
+   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
@@ -10,7 +10,25 @@
    « 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). #}
+   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 }}">
@@ -19,29 +37,29 @@
     <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>
+            <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">▤</span>
+                <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">▦</span>
+                <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">✓</span>
+                <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">▥</span>
+                <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:#c2437e">✦</span>
+                <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>
@@ -62,16 +80,12 @@
         </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-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).

static/css/draco-barre.css

@@ -7,6 +7,11 @@
    menu des applications) ; l'avatar est un vrai <button>.
    Correctif fusion #70 (SANS bump) : bouton trois points et menu par
    défaut supprimés ; le menu de la marque gagne « Console Spark ».
+   v0.1.10 : rose --agent → rouge Spark #c00000 ; marque = logo Spark ;
+   bouton Spark supprimé (remplacé par l'avatar flottant bas-centre) ;
+   Alertes icône seule.
+   v0.1.11 : marque = étoile Spark monochrome (blanche barre foncée,
+   noire barre claire) ; anneau rouge #c00000 autour de l'avatar flottant.
    Jetons repris du prototype validé Console v7.2.
    Thème : clair par défaut, sombre via [data-theme="dark"] sur <html>
    ou prefers-color-scheme si l'app intégratrice ne force rien. */
@@ -14,7 +19,7 @@
 .draco-bar {
   --bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9eae6; --surface-3: #f6f6f3;
   --ink: #1b1d1a; --ink-2: #5c615a; --ink-3: #787d75; --line: #dedfd9;
-  --agent: #c2437e; --danger: #cf4444;
+  --agent: #c00000; --danger: #cf4444;
   position: relative;
   height: 60px; box-sizing: border-box;
   display: grid; grid-template-columns: auto minmax(200px, 520px) auto;
@@ -37,7 +42,15 @@
 .draco-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 800; cursor: pointer; border-radius: 10px; padding: 4px 6px; margin: -4px -6px; }
 .draco-brand:hover { background: var(--surface-2); }
 .draco-brand:focus-visible { outline: 2px solid var(--agent); outline-offset: 2px; }
-.draco-brand-mark { color: var(--agent); font-size: 24px; line-height: 1; }
+.draco-brand-mark { line-height: 0; }
+/* Marque monochrome v0.1.11 : étoile blanche extraite du logo rouge,
+   fond transparent — noire sur barre claire (filtre), blanche sur
+   barre foncée (filtre annulé par les règles thème ci-dessous). */
+.draco-brand-mark img { width: 26px; height: 26px; object-fit: cover; display: block; filter: brightness(0); }
+@media (prefers-color-scheme: dark) {
+  .draco-bar .draco-brand-mark img { filter: none; }
+}
+[data-theme="dark"] .draco-bar .draco-brand-mark img { filter: none; }
 
 /* Menu des applications — construit par le JS depuis les onglets */
 .draco-apps-menu {
@@ -94,6 +107,13 @@
   width: 30px; height: 30px; flex: none; display: grid; place-items: center;
   border-radius: 9px; background: var(--app); color: #fff; font-size: 15px;
 }
+/* Icônes logos (2026-10-29, corrigé le même jour) : l'image du logo
+ * fourni, telle quelle, remplit la tuile 30 px — jamais de glyphe
+ * texte, jamais de redessin. Le fond de la tuile est transparent :
+ * les logos PNG portent déjà leur fond (dégradé), le SVG TikTak
+ * reste sur le fond de la barre. */
+.draco-apptab-ico { background: transparent; }
+.draco-apptab-ico img { width: 30px; height: 30px; display: block; border-radius: 9px; object-fit: cover; }
 .draco-apptab-txt { display: none; flex-direction: column; line-height: 1.15; }
 .draco-apptab-txt strong { font-size: 14px; font-weight: 700; }
 .draco-apptab-txt small { font-size: 11.5px; color: var(--ink-2); }
@@ -131,18 +151,23 @@
 
 /* Alertes — la cloche ne disparaît JAMAIS (correctif v7.2) */
 .draco-alertes {
-  position: relative; display: flex; align-items: center; gap: 7px; height: 38px;
-  padding: 0 11px; border-radius: 10px; border: 1px solid var(--line);
+  position: relative; display: flex; align-items: center; height: 38px;
+  padding: 0 9px; border-radius: 10px; border: 1px solid var(--line);
   background: transparent; color: var(--ink); font: inherit; cursor: pointer;
 }
 
-/* Spark */
-.draco-spark {
-  position: relative; display: flex; align-items: center; gap: 7px; height: 38px;
-  padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
-  background: var(--agent); color: #fff; font: inherit; font-weight: 700;
+/* Bouton avatar Spark flottant — bas-centre, ouvre le panneau Spark
+   de l'hôte via data-act="spark" (délégation globale existante).
+   La console Spark ne l'inclut pas : son fragment est propre. */
+.draco-spark-flottant {
+  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
+  z-index: 65; width: 64px; height: 64px; padding: 0; border: 0;
+  border-radius: 50%; background: transparent; cursor: pointer;
+  box-shadow: 0 8px 28px rgb(0 0 0 / .45);
 }
-.draco-spark .draco-badge { border-color: var(--agent); }
+.draco-spark-flottant img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; box-sizing: border-box; border: 3px solid var(--agent); }
+.draco-spark-flottant:hover { transform: translateX(-50%) scale(1.05); }
+.draco-spark-flottant:focus-visible { outline: 2px solid var(--agent); outline-offset: 3px; }
 
 .draco-icon-btn {
   width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent;
@@ -169,7 +194,7 @@
   .draco-bar { grid-template-columns: auto minmax(200px, 440px) auto; }
 }
 @media (max-width: 1200px) {
-  .draco-search-txt, .draco-search kbd, .draco-alertes-txt, .draco-spark-txt { display: none; }
+  .draco-search-txt, .draco-search kbd { display: none; }
   .draco-search { width: 38px; padding: 0; justify-content: center; }
   .draco-bar { grid-template-columns: auto auto 1fr; }
   .draco-bar-droite { justify-content: flex-end; }

static/img/logos/tiktak.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <!-- TikTak — deux arcs (les deux temps), coche-flèche. Bleu #0076fb, orange #fc750c.
+       Géométrie mesurée sur le visuel validé par Bruno (variante B). -->
+  <path d="M 38.2 101.1 A 84 84 0 0 1 201.8 101.1" fill="none" stroke="#0076fb" stroke-width="28" stroke-linecap="round"/>
+  <path d="M 201.5 140.3 A 84 84 0 0 1 38.5 140.3" fill="none" stroke="#fc750c" stroke-width="28" stroke-linecap="round"/>
+  <polyline points="80,129 106,146 163,84" fill="none" stroke="#0076fb" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M 128 80 L 163 84 L 167 122" fill="none" stroke="#0076fb" stroke-width="22" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/js/draco-barre.js

@@ -369,7 +369,10 @@
      * de l'agent commun (URL agent résolue — explicite > -dev >
      * défaut prod ; aucun hôte spark-dev inventé). data-app="agent"
      * l'intègre à refreshMenuHrefs/applyUrls/setCurrent comme les
-     * autres items ; l'icône ✦ reprend la couleur agent du CSS. */
+     * autres items ; son icône CLONE celle de l'onglet agent
+     * (2026-10-29, logos barre-apps, corrigé le même jour) : le logo
+     * fourni, tel quel, jamais redessiné — le CSS --agent (rose) des
+     * autres éléments de la barre n'est pas changé ici. */
     var sep = document.createElement("div");
     sep.className = "draco-menu-sep";
     sep.setAttribute("aria-hidden", "true");
@@ -379,10 +382,18 @@
     sparkItem.href = resolvedUrls.agent || "#";
     sparkItem.dataset.app = "agent";
     sparkItem.setAttribute("role", "menuitem");
-    var sparkIco = document.createElement("span");
-    sparkIco.className = "draco-apptab-ico";
-    sparkIco.setAttribute("style", "--app:#c2437e");
-    sparkIco.textContent = "✦";
+    var sparkIco;
+    var agentTab = document.querySelector('.draco-apptab[data-app="agent"]');
+    var agentIco = agentTab ? agentTab.querySelector(".draco-apptab-ico") : null;
+    if (agentIco) {
+      sparkIco = agentIco.cloneNode(true);
+    } else {
+      sparkIco = document.createElement("span");
+      sparkIco.className = "draco-apptab-ico";
+      sparkIco.setAttribute("style", "--app:#d21f2c");
+      sparkIco.setAttribute("data-icon", "agent");
+      sparkIco.textContent = "✦";
+    }
     sparkItem.appendChild(sparkIco);
     var sparkTxt = document.createElement("span");
     sparkTxt.className = "draco-apps-item-txt";

tests/test_draco_barre.py

@@ -198,7 +198,7 @@ def test_menu_des_applications_par_la_marque(client):
     js = client.get("/static/js/draco-barre.js").text
     assert "draco-apps-menu" in js
     css = client.get("/static/css/draco-barre.css").text
-    assert "font-size: 24px" in css
+    assert ".draco-brand-mark img" in css  # v0.1.10 : la marque est le logo Spark (26 px), plus de glyphe 24 px
 
 
 def test_barre_pleine_largeur_et_palier_mobile(client):