Kanbante 0.45.1 : logo fourni spark.png pour la barre et le menu

CHANGELOG.md

@@ -1,3 +1,16 @@
+## 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.
+- **Pied de sidebar visible en mobile** : version, fraîcheur des données, thème et Sortir sont désormais accessibles dans le tiroir (avant : pied masqué, aucun moyen de sortir depuis un téléphone).
+- **Menu compte draco** : Profil et Déconnexion fonctionnent enfin (ils étaient relayés par draco-barre.js mais jamais pris en charge par le onAction Kanbante — le menu se fermait sans rien faire). En mobile, c'était le seul accès au profil et à la déconnexion.
+- **Menus draco** : largeur plafonnée à 100vw - 20 px pour ne jamais déborder d'un petit écran.
+
 ## 0.44.0 — 2026-10-29 — Ergonomie : tuile Projets et pied de sidebar
 
 - **Tuile Projets** : en-tête groupé (gauche : organisation + santé, droite : date + étoile + menu) au lieu de 5 éléments éparpillés ; avancement global labellisé (« Avancement — X/Y terminées ») au lieu d'une barre anonyme ; jalon séparé par un filet, avec étiquette « Prochain jalon » et échéance distincte ; pied en 2 rangées — (1) compte d'issues + bouton Board, (2) répartition par colonne labellisée (« En cours 8 », « Terminé 59 », au lieu de chiffres nus 8 / 59) + prévision ; activité de la semaine en texte secondaire (« Cette semaine : … »).

app/config.py

@@ -177,7 +177,7 @@ from urllib.parse import urlparse
 
 BASE_DIR = Path(__file__).resolve().parent.parent
 
-APP_VERSION = "0.44.0"
+APP_VERSION = "0.45.1"
 
 
 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.9
    (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,12 @@
    « 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). #}
 <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 }}">
@@ -23,25 +28,25 @@
         </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:#d21f2c"><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>
@@ -103,6 +108,13 @@
             };
             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). */

static/css/draco-barre.css

@@ -94,6 +94,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); }

static/css/style.css

@@ -1462,12 +1462,30 @@ body.sidebar-collapsed .side-foot-user { justify-content: center; }
     body.with-sidebar, body.with-sidebar.sidebar-collapsed { padding-left: 0; }
     .sidebar { width: 264px; transform: translateX(-105%); box-shadow: none; }
     body.sidebar-open .sidebar { transform: none; box-shadow: 18px 0 44px rgba(0,0,0,.5); }
+    /* Tiroir mobile : l'état « replié » mémorisé sur desktop ne doit
+       JAMAIS rétrécir le tiroir. Avant, `body.sidebar-collapsed
+       .sidebar { width: 68px; }` (spécificité supérieure à `.sidebar`)
+       gagnait en mobile : libellés tronqués par overflow-x hidden,
+       exactement la capture image 1. Le tiroir fait 264 px, replié
+       ou non, et le fond ne défile plus derrière lui. */
+    body.sidebar-collapsed .sidebar,
+    body.sidebar-open.sidebar-collapsed .sidebar { width: 264px; }
+    body.sidebar-open { overflow: hidden; }
     body.sidebar-collapsed .side-label { display: initial; }
     body.sidebar-collapsed .side-link { justify-content: flex-start; padding-left: 10px; padding-right: 10px; }
+    body.sidebar-collapsed .side-logo { justify-content: flex-start; padding-left: 8px; padding-right: 8px; }
     body.sidebar-collapsed .side-head { flex-direction: row; padding: 4px 6px 12px; }
     body.sidebar-collapsed .side-search { margin-left: auto; }
-    .side-foot { display: none; }
+    /* Pied visible dans le tiroir (avant : display:none en mobile —
+       aucun moyen de voir la version, la fraîcheur, le thème ni de
+       sortir depuis un téléphone). */
+    .side-foot { display: flex; }
+    body.sidebar-collapsed .side-foot { align-items: stretch; }
+    body.sidebar-collapsed .side-foot-meta { display: flex; }
+    body.sidebar-collapsed .side-foot-user { justify-content: flex-start; }
     .topbar-search { display: inline-flex; }
+    /* Menus draco (vendangés) : jamais plus larges que l'écran. */
+    header.draco-bar .draco-compte-menu, header.draco-bar .draco-apps-menu { max-width: calc(100vw - 20px); }
 }
 
 /* ── Dashboard vague 2 (0.17.0, #17 #18 #20) + page Projet (#25) ── */

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";

static/js/nav.js

@@ -63,8 +63,18 @@
         });
     }
 
+    /* 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). */
+    var sideLinks = document.querySelectorAll('.side-link');
+    sideLinks.forEach(function (link) {
+        link.addEventListener('click', function () {
+            if (window.innerWidth <= 900) closeDrawer();
+        });
+    });
     if (collapseBtn) {
         collapseBtn.addEventListener('click', function () {
+            if (window.innerWidth <= 900) { closeDrawer(); return; }
             var collapsed = document.body.classList.toggle('sidebar-collapsed');
             try {
                 localStorage.setItem('kanbante-sidebar', collapsed ? 'collapsed' : 'open');

tests/test_mobile.py

@@ -0,0 +1,35 @@
+"""Mobile : tiroir, pied et menu compte.
+
+Bugs signalés sur captures (29 octobre 2026) :
+- tiroir rétréci à 68 px en mobile quand l'état « replié » desktop
+  était mémorisé (spécificité de `body.sidebar-collapsed .sidebar`) ;
+- pied de sidebar masqué en mobile (`display: none`) ;
+- Profil / Déconnexion du menu compte draco sans effet (onAction
+  ne les prenait pas en charge).
+"""
+
+
+def test_tiroir_mobile_largeur_fixe():
+    css = open("static/css/style.css", encoding="utf-8").read()
+    assert "body.sidebar-collapsed .sidebar,\n    body.sidebar-open.sidebar-collapsed .sidebar { width: 264px; }" in css
+    assert "body.sidebar-open { overflow: hidden; }" in css
+
+
+def test_pied_visible_en_mobile():
+    css = open("static/css/style.css", encoding="utf-8").read()
+    assert ".side-foot { display: none; }" not in css
+    assert "body.sidebar-collapsed .side-foot-meta { display: flex; }" in css
+
+
+def test_menu_compte_draco_fonctionnel():
+    tpl = open("app/templates/_draco_bar.html", encoding="utf-8").read()
+    assert 'act === "profil"' in tpl
+    assert 'location.href = "/profile"' in tpl
+    assert 'act === "deconnexion"' in tpl
+    assert 'location.href = "/logout"' in tpl
+
+
+def test_tiroir_ferme_en_mobile():
+    js = open("static/js/nav.js", encoding="utf-8").read()
+    assert "window.innerWidth <= 900" in js
+    assert "querySelectorAll('.side-link')" in js