feat: menu des applications par la marque ✦ (barre commune v0.1.3) (#28)

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.23.2 — 2026-10-21
+
+### Ajouté — menu des applications (barre commune v0.1.3)
+
+- **Le ✦ de la barre ouvre le menu des 4 applications** (choix de
+  Bruno) : c'est le moyen de changer d'app en mobile, où les
+  onglets sont repliés — et il fonctionne aussi sur bureau. Le
+  logo est un peu plus gros (24 px). Menu construit par le JS
+  commun depuis les onglets (mêmes liens, icônes, badges) ;
+  fermeture au clic extérieur ou à Échap.
+
 ## 0.23.1 — 2026-10-21
 
 ### Correctifs — barre commune et barre latérale (retours de Bruno)

app/config.py

@@ -104,7 +104,7 @@ from pathlib import Path
 
 BASE_DIR = Path(__file__).resolve().parent.parent
 
-APP_VERSION = "0.23.1"
+APP_VERSION = "0.23.2"
 
 
 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 FIGÉ vendangé depuis Projets/dracodev-commons v0.1.2
+   Snippet FIGÉ vendangé depuis Projets/dracodev-commons v0.1.3
    (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/draco-barre.js.
@@ -10,7 +10,7 @@
 <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="/" aria-label="dracodev">
+        <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">

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "kanbante"
-version = "0.23.1"
+version = "0.23.2"
 description = "Kanban project manager integrated with Gitea"
 requires-python = ">=3.11"
 dependencies = [

static/css/draco-barre.css

@@ -1,5 +1,7 @@
 /* Barre d'apps commune dracodev — v0.1.0 (bloc 0, ACC-0.2) ;
-   v0.1.2 : palier mobile resserré selon la spec (voir @media 700px).
+   v0.1.2 : palier mobile resserré selon la spec (voir @media 700px) ;
+   v0.1.3 : la marque ✦ (plus grande) ouvre le menu des applications —
+   c'est LE changement d'app en mobile (choix de Bruno, 2026-10-21).
    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. */
@@ -8,6 +10,7 @@
   --bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9eae6; --surface-3: #f6f6f3;
   --ink: #1b1d1a; --ink-2: #5c615a; --ink-3: #787d75; --line: #dedfd9;
   --agent: #c2437e; --danger: #cf4444;
+  position: relative;
   height: 60px; box-sizing: border-box;
   display: grid; grid-template-columns: auto minmax(200px, 520px) auto;
   align-items: center; gap: 16px; padding: 0 12px;
@@ -25,9 +28,29 @@
 .draco-bar-centre { justify-content: center; }
 .draco-bar-droite { justify-content: flex-end; }
 
-/* Marque */
-.draco-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 800; }
-.draco-brand-mark { color: var(--agent); }
+/* Marque — bouton du menu des applications (v0.1.3) */
+.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-mark { color: var(--agent); font-size: 24px; line-height: 1; }
+
+/* Menu des applications — construit par le JS depuis les onglets */
+.draco-apps-menu {
+  position: absolute; top: calc(100% + 6px); left: 10px; z-index: 400;
+  min-width: 248px; padding: 6px;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
+  box-shadow: 0 16px 44px rgb(0 0 0 / .28);
+}
+.draco-apps-menu[hidden] { display: none; }
+.draco-apps-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: 10px;
+  color: var(--ink); text-decoration: none;
+}
+.draco-apps-item:hover, .draco-apps-item:focus-visible { background: var(--surface-2); }
+.draco-apps-item[data-active="true"] { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--agent); }
+.draco-apps-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.draco-apps-item-nom { font-weight: 700; font-size: 14px; }
+.draco-apps-item-role { font-size: 12px; color: var(--ink-2); }
 
 /* Onglets d'apps — accordéon : seule l'app courante est déployée */
 .draco-apptabs { display: flex; gap: 6px; }

static/js/draco-barre.js

@@ -1,4 +1,5 @@
-/* Barre d'apps commune dracodev — comportement (v0.1.0, ACC-0.2)
+/* Barre d'apps commune dracodev — comportement (v0.1.0, ACC-0.2 ;
+ * v0.1.3 : menu des applications ouvert par la marque ✦).
  *
  * 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
@@ -14,6 +15,9 @@
  * Actions émises (data-act) : rail, palette, domaine (data-dom),
  * alertes, spark, menu, rappel-entete. L'app intégratrice décide de
  * chacune (ouvrir la palette, le panneau Spark, changer de domaine…).
+ * Action INTERNE (jamais relayée) : apps — la marque ✦ ouvre le menu
+ * des applications, construit depuis les onglets ; c'est le moyen de
+ * changer d'app en mobile, où les onglets sont repliés (v0.1.2).
  */
 (function () {
   "use strict";
@@ -21,15 +25,16 @@
 
   function setCounts(counts) {
     Object.keys(counts || {}).forEach(function (k) {
-      var b = document.querySelector('.draco-badge[data-badge="' + k + '"]');
-      if (!b) return;
-      b.textContent = counts[k];
-      b.hidden = !(counts[k] > 0);
+      /* Toutes les occurrences : l'onglet ET sa ligne dans le menu. */
+      document.querySelectorAll('.draco-badge[data-badge="' + k + '"]').forEach(function (b) {
+        b.textContent = counts[k];
+        b.hidden = !(counts[k] > 0);
+      });
     });
   }
   function setCurrent(app) {
-    document.querySelectorAll(".draco-apptab").forEach(function (t) {
-      t.dataset.active = t.dataset.app === app ? "true" : "false";
+    document.querySelectorAll(".draco-apptab, .draco-apps-item").forEach(function (t) {
+      if (t.dataset.app) t.dataset.active = t.dataset.app === app ? "true" : "false";
     });
   }
   function setDomain(dom) {
@@ -38,8 +43,70 @@
     });
   }
 
+  /* ── Menu des applications (v0.1.3) ──────────────────────────────
+   * Construit depuis les onglets présents dans la barre : mêmes
+   * liens, mêmes icônes, mêmes badges. Ouvert par la marque ✦
+   * (data-act="apps"), fermé par un clic extérieur, Échap, ou le
+   * choix d'une application (la navigation suit son cours). */
+  var bar = document.querySelector(".draco-bar");
+  var brand = bar ? bar.querySelector(".draco-brand") : null;
+  var menu = null;
+
+  function buildMenu() {
+    if (!bar || !brand || menu) return;
+    menu = document.createElement("div");
+    menu.className = "draco-apps-menu";
+    menu.hidden = true;
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-label", "Applications");
+    document.querySelectorAll(".draco-apptab").forEach(function (t) {
+      var a = document.createElement("a");
+      a.className = "draco-apps-item";
+      a.href = t.getAttribute("href");
+      a.dataset.app = t.dataset.app;
+      a.setAttribute("role", "menuitem");
+      var ico = t.querySelector(".draco-apptab-ico");
+      if (ico) a.appendChild(ico.cloneNode(true));
+      var txt = document.createElement("span");
+      txt.className = "draco-apps-item-txt";
+      var fort = t.querySelector(".draco-apptab-txt strong");
+      var petit = t.querySelector(".draco-apptab-txt small");
+      var nom = document.createElement("span");
+      nom.className = "draco-apps-item-nom";
+      nom.textContent = fort ? fort.textContent : t.dataset.app;
+      txt.appendChild(nom);
+      if (petit) {
+        var role = document.createElement("span");
+        role.className = "draco-apps-item-role";
+        role.textContent = petit.textContent;
+        txt.appendChild(role);
+      }
+      a.appendChild(txt);
+      var badge = t.querySelector(".draco-badge");
+      if (badge) a.appendChild(badge.cloneNode(true));
+      menu.appendChild(a);
+    });
+    bar.appendChild(menu);
+  }
+
+  function toggleMenu(force) {
+    buildMenu();
+    if (!menu) return;
+    var open = typeof force === "boolean" ? force : menu.hidden;
+    menu.hidden = !open;
+    if (brand) brand.setAttribute("aria-expanded", open ? "true" : "false");
+  }
+
   document.addEventListener("click", function (ev) {
     var el = ev.target.closest("[data-act]");
+    if (el && el.dataset.act === "apps") {
+      ev.preventDefault();
+      toggleMenu();
+      return;
+    }
+    if (menu && !menu.hidden && !ev.target.closest(".draco-apps-menu") && !ev.target.closest(".draco-brand")) {
+      toggleMenu(false);
+    }
     if (!el) return;
     var act = el.dataset.act;
     if (act === "domaine") setDomain(el.dataset.dom);
@@ -47,9 +114,14 @@
     else document.dispatchEvent(new CustomEvent("draco:bar", { detail: { act: act, el: el } }));
   });
 
+  document.addEventListener("keydown", function (ev) {
+    if (ev.key === "Escape") toggleMenu(false);
+  });
+
   /* API publique : l'app met les compteurs à jour sans recharger. */
   window.DRACO_BAR = { setCounts: setCounts, setCurrent: setCurrent, setDomain: setDomain };
 
+  buildMenu();
   if (cfg.current) setCurrent(cfg.current);
   if (cfg.domain) setDomain(cfg.domain);
   if (cfg.counts) setCounts(cfg.counts);

tests/test_draco_barre.py

@@ -26,6 +26,17 @@ def test_statiques_de_la_barre_servis(client):
     assert client.get("/static/js/draco-barre.js").status_code == 200
 
 
+def test_menu_des_applications_par_la_marque(client):
+    # v0.1.3 : la marque ✦ porte data-act="apps" et le JS commun
+    # construit le menu (.draco-apps-menu) ; le logo passe à 24 px.
+    accueil = client.get("/")
+    assert 'data-act="apps"' in accueil.text
+    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
+
+
 def test_barre_pleine_largeur_et_palier_mobile(client):
     # 0.23.1 : la barre est fixe pleine largeur (le padding du cadre
     # ne la repousse plus) et le palier mobile commons v0.1.2 ne