fix: barre commune pleine largeur, palier mobile v0.1.2, animation latérale fluide (#28)

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.23.1 — 2026-10-21
+
+### Correctifs — barre commune et barre latérale (retours de Bruno)
+
+- **Barre d'apps pleine largeur** : elle était repoussée à droite
+  de la barre latérale par le `padding-left` du cadre ; elle est
+  maintenant fixe, pleine largeur, et le cadre entier est décalé
+  de sa hauteur (60 px, 52 px en mobile).
+- **Barre commune v0.1.2** (dracodev-commons) : palier mobile
+  resserré selon la spec — app courante, alertes, Spark, avatar ;
+  rail, recherche, domaines et menu disparaissent au profit des
+  contrôles natifs de chaque app.
+- **Animation du repli de la barre latérale** : durée et courbe
+  unifiées (0,26 s, `cubic-bezier(0.4, 0, 0.2, 1)`) entre le corps
+  et la barre, et retrait du `backdrop-filter` (fond déjà opaque
+  à 96 %) qui rendait l'animation de largeur saccadée.
+
 ## 0.23.0 — 2026-10-21
 
 ### Fusion — Kanbante rejoint l'accès centralisé (cartes #27, #28)

app/config.py

@@ -104,7 +104,7 @@ from pathlib import Path
 
 BASE_DIR = Path(__file__).resolve().parent.parent
 
-APP_VERSION = "0.23.0"
+APP_VERSION = "0.23.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 FIGÉ vendangé depuis Projets/dracodev-commons v0.1.1
+   Snippet FIGÉ vendangé depuis Projets/dracodev-commons v0.1.2
    (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.

pyproject.toml

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

static/css/draco-barre.css

@@ -1,4 +1,5 @@
-/* Barre d'apps commune dracodev — v0.1.0 (bloc 0, ACC-0.2)
+/* 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).
    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. */
@@ -120,8 +121,18 @@
   .draco-bar-droite { justify-content: flex-end; }
 }
 @media (max-width: 700px) {
-  /* Mobile : la barre du haut se condense ; la navigation d'apps passe
-     en barre basse propre à chaque app (patron du prototype v5+). */
-  .draco-apptabs, .draco-domaines-lbl { display: none; }
-  .draco-bar { height: 52px; }
+  /* Mobile (spec des barres, § Mobile) : la barre se resserre sur
+     l'essentiel — marque, onglet de l'app courante, alertes, Spark,
+     avatar. Le rail, la recherche, les domaines et le menu « ••• »
+     disparaissent : chaque app garde ses contrôles natifs (barre
+     basse, en-tête) — un seul hamburger visible, celui de l'app.
+     (v0.1.2 — avant, les onglets entiers et les pastilles domaines
+     restaient affichés et la barre débordait sur téléphone.) */
+  .draco-bar { height: 52px; grid-template-columns: auto 1fr auto; }
+  .draco-bar-centre, .draco-domaines, .draco-bar .draco-icon-btn { display: none; }
+  .draco-apptab { display: none; }
+  .draco-bar[data-current="obsigate"] .draco-apptab[data-app="obsigate"],
+  .draco-bar[data-current="flowdeck"] .draco-apptab[data-app="flowdeck"],
+  .draco-bar[data-current="tiktak"] .draco-apptab[data-app="tiktak"],
+  .draco-bar[data-current="kanbante"] .draco-apptab[data-app="kanbante"] { display: flex; }
 }

static/css/style.css

@@ -1210,16 +1210,22 @@ footer {
 }
 
 /* ── Barre latérale (0.16.0, #16 refonte) ── */
-body.with-sidebar { padding-left: 238px; transition: padding-left 0.18s ease; }
+/* Fluidité (0.23.1) : durée et courbe UNIFIÉES entre le padding du
+   corps et la largeur de la barre (avant : 0.18 s ease des deux
+   côtés mais transform à 0.22 s — mouvements désynchronisés), et
+   retrait du backdrop-filter : le fond est déjà opaque à 96 %,
+   le flou forçait un re-rendu coûteux à chaque image de l'animation
+   de largeur, d'où l'effet « lent et saccadé » signalé par Bruno. */
+body.with-sidebar { padding-left: 238px; transition: padding-left 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
 body.with-sidebar.sidebar-collapsed { padding-left: 68px; }
 .sidebar {
     position: fixed; left: 0; top: 0; bottom: 0; z-index: 200;
     width: 238px; box-sizing: border-box;
     display: flex; flex-direction: column; gap: 6px;
     padding: 16px 12px 12px; overflow-y: auto; overflow-x: hidden;
-    background: rgba(13, 16, 24, 0.96); backdrop-filter: blur(14px);
+    background: rgba(13, 16, 24, 0.96);
     border-right: 1px solid var(--border);
-    transition: width 0.18s ease, transform 0.22s ease;
+    transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1), transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
 }
 body.sidebar-collapsed .sidebar { width: 68px; }
 .side-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; color: var(--text); font-size: 1.18rem; font-weight: 700; white-space: nowrap; }
@@ -1619,6 +1625,14 @@ a.ms-title:hover { text-decoration: underline; }
 .login-foot { margin: 18px 0 0; text-align: center; color: var(--text-3, #8b94a5); font-size: 0.8rem; }
 
 /* ── Fusion ACC-1 (kanbante#28) : cohabitation avec la barre commune ──
-   La barre d'apps (60 px, en flux en haut du body) repousse la barre
-   latérale fixe sous elle ; le reste du cadre suit le flux. */
+   La barre d'apps est FIXE et pleine largeur (0.23.1 — en flux, le
+   padding-left du cadre la repoussait à droite de la barre latérale,
+   constat de Bruno sur capture) ; le cadre entier est décalé de sa
+   hauteur, et la barre latérale fixe démarre sous elle. */
+body.has-draco-bar { padding-top: 60px; }
+body.has-draco-bar .draco-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 250; }
 body.has-draco-bar .sidebar { top: 60px; }
+@media (max-width: 700px) {
+    body.has-draco-bar { padding-top: 52px; }
+    body.has-draco-bar .sidebar { top: 52px; }
+}

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_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
+    # garde que l'onglet de l'app courante.
+    style = client.get("/static/css/style.css").text
+    assert "body.has-draco-bar .draco-bar" in style
+    assert "position: fixed" in style
+    barre = client.get("/static/css/draco-barre.css").text
+    assert '.draco-bar[data-current="kanbante"] .draco-apptab[data-app="kanbante"]' in barre
+
+
 def test_pas_de_barre_sur_le_login(monkeypatch, fake_gitea):
     from fastapi.testclient import TestClient