Le header de Kanbante a grandi par accretion : chaque version de la journée a ajouté sa pilule de navigation (Focus, Aujourd'hui, Standup, Prévisions, Règles, Santé…). Le résultat est fonctionnel mais plus élégant : le menu déborde, se replie en pavé, et sur mobile il mange l'écran avant même le contenu. L'application est utilisée au quotidien sur desktop et sur mobile (capture, consultation), les deux méritent un menu pensé pour eux.
État actuel — diagnostic vérifié dans le code (0.14.0)
19 gabarits portent chacun leur propre copie du markup <header class="app-header"> — il n'existe aucun partiel partagé pour le header (seuls _palette.html et _card.html sont des partiels). Chaque fonctionnalité a ajouté sa pilule page par page ; le contenu a dérivé : le dashboard compte 16 pilules, le board 15 (dont des entrées contextuelles), la session triage 4, le récit et la santé-projet des versions réduites ad hoc, le wallboard aucune.
.nav-pills est en flex-wrap: wrap : dès que la fenêtre se rétrécit, les pilules passent sur 2 à 3 lignes et repoussent le contenu — le header sticky (avec flou d'arrière-plan) devient un bandeau épais.
Le media query mobile (≤ 768 px) ne fait que réduire les marges et masquer le fil d'Ariane : aucun regroupement, aucun menu burger. Les cibles tactiles font ~30 px de haut (pilule 7×14 px, police 0,86 rem), sous les 44 px recommandés.
La base visuelle est saine : header sticky, état actif en dégradé, survols propres. C'est la structure qui ne suit plus la croissance (6 entrées à la 0.5.0, 16 aujourd'hui).
La palette Ctrl+K couvre déjà toute la navigation au clavier : le header peut être allégé sans perdre l'accès à aucune fonction.
Comportement visé
Desktop : un header d'une seule ligne, élégant et calme — logo, quelques entrées primaires, un menu « Plus ▾ » pour le reste, le bouton Ctrl+K à droite, la page active clairement marquée. Jamais de retour à la ligne.
Mobile : logo + Ctrl+K + burger ; un panneau menu lisible, toutes les entrées accessibles en au plus 2 touchers, cibles ≥ 44 px, fermeture au toucher extérieur ou à Échap.
Partout le même header : une seule source de vérité pour le markup, les libellés et l'ordre — fini les divergences entre pages.
Conception proposée
Partiel unique _header.html (Jinja) paramétré par la page active (et un éventuel contexte projet), inclus par les 19 gabarits. Les routes passent déjà un contexte à render() ; prévoir un défaut sûr quand le paramètre manque.
Mobile (≤ ~860 px) : burger basculant un panneau sous le header (fond flouté comme le header), entrées en pleine largeur ≥ 44 px, page active marquée ; aria-expanded/aria-controls, Échap et clic extérieur ferment, prefers-reduced-motion respecté.
Board : ses actions contextuelles (📥 Triage, 🏷️ Étiquettes, notes) restent dans la barre d'outils du board, pas dans le header global ; le header du board utilise le même partiel, avec le fil d'Ariane projet conservé.
Cas spéciaux assumés : le wallboard garde son plein écran sans header (usage TV) ; la session triage garde un header minimal (concentration clavier) mais construit sur le même partiel.
Aucune dépendance ajoutée : CSS existant + un petit static/js/nav.js partagé (déroulant + burger), dans la lignée de palette.js.
Critères d'acceptation
Le markup du header provient d'un seul partiel sur toutes les pages applicatives (vérifiable par recherche dans les gabarits).
À 1280 px comme à 1024 px, le header tient sur une ligne, sans retour à la ligne des pilules.
À 375 px, toutes les entrées de navigation sont atteignables en ≤ 2 touchers, cibles ≥ 44 px, aucun défilement horizontal.
La page active est visuellement marquée sur desktop et mobile, y compris dans le menu « Plus » quand c'est elle qui la contient.
Le bouton Ctrl+K reste visible et fonctionnel sur toutes les pages et tailles ; la palette n'est pas affectée.
Navigation du déroulant et du panneau mobile au clavier (Échap ferme, focus visible).
Suite de tests existante verte ; les pages spéciales (wallboard, session triage) gardent leur comportement.
Hors périmètre
Refonte des autres zones (barre d'outils du board, pied de page, cartes) — uniquement le header et son menu.
Thèmes clair/sombre ou personnalisation du menu par l'utilisateur.
Barre de navigation basse façon application mobile native (le burger suffit en v1).
Notes d'implémentation
Plusieurs tests cherchent des libellés/liens de navigation dans les pages : conserver hrefs et libellés existants, ou mettre les tests à jour en connaissance de cause.
Le partiel doit rester compatible avec les pages qui n'ont pas de request riche (page d'erreur) : paramètres par défaut partout.
Penser au cache navigateur des CSS/JS statiques : incrémenter la version (nouvelle release) suffit, les fichiers sont servis sans empreinte.
Description rédigée le 2026-10-11 à la demande de Bruno, diagnostic vérifié dans le code de la 0.14.0 — même format que l'issue #15.
## Contexte
Le header de Kanbante a grandi par accretion : chaque version de la journée a ajouté sa pilule de navigation (Focus, Aujourd'hui, Standup, Prévisions, Règles, Santé…). Le résultat est fonctionnel mais plus élégant : le menu déborde, se replie en pavé, et sur mobile il mange l'écran avant même le contenu. L'application est utilisée au quotidien sur desktop **et** sur mobile (capture, consultation), les deux méritent un menu pensé pour eux.
## État actuel — diagnostic vérifié dans le code (0.14.0)
- **19 gabarits** portent chacun leur propre copie du markup `<header class="app-header">` — il n'existe **aucun partiel partagé** pour le header (seuls `_palette.html` et `_card.html` sont des partiels). Chaque fonctionnalité a ajouté sa pilule page par page ; le contenu a dérivé : le dashboard compte **16 pilules**, le board 15 (dont des entrées contextuelles), la session triage 4, le récit et la santé-projet des versions réduites ad hoc, le wallboard aucune.
- `.nav-pills` est en `flex-wrap: wrap` : dès que la fenêtre se rétrécit, les pilules passent sur **2 à 3 lignes** et repoussent le contenu — le header sticky (avec flou d'arrière-plan) devient un bandeau épais.
- Le media query mobile (≤ 768 px) ne fait que réduire les marges et masquer le fil d'Ariane : **aucun regroupement, aucun menu burger**. Les cibles tactiles font ~30 px de haut (pilule 7×14 px, police 0,86 rem), sous les 44 px recommandés.
- La base visuelle est saine : header sticky, état actif en dégradé, survols propres. C'est la **structure** qui ne suit plus la croissance (6 entrées à la 0.5.0, 16 aujourd'hui).
- La palette **Ctrl+K** couvre déjà toute la navigation au clavier : le header peut être allégé sans perdre l'accès à aucune fonction.
## Comportement visé
- **Desktop** : un header d'**une seule ligne**, élégant et calme — logo, quelques entrées primaires, un menu « Plus ▾ » pour le reste, le bouton Ctrl+K à droite, la page active clairement marquée. Jamais de retour à la ligne.
- **Mobile** : logo + Ctrl+K + **burger** ; un panneau menu lisible, toutes les entrées accessibles en au plus 2 touchers, cibles ≥ 44 px, fermeture au toucher extérieur ou à Échap.
- **Partout le même header** : une seule source de vérité pour le markup, les libellés et l'ordre — fini les divergences entre pages.
## Conception proposée
1. **Partiel unique `_header.html`** (Jinja) paramétré par la page active (et un éventuel contexte projet), inclus par les 19 gabarits. Les routes passent déjà un contexte à `render()` ; prévoir un défaut sûr quand le paramètre manque.
2. **Hiérarchie desktop** :
- Primaires visibles : 🏠 Projets · 🎯 Focus · 🌅 Aujourd'hui · 🔍 Recherche · ⚡ Capture.
- Menu déroulant « Plus ▾ » : 👤 Mes issues · 📰 Activité · 📊 Briefing · 🗣️ Standup · 🧠 Digest · 🔮 Prévisions · ⚙️ Règles · 🩺 Santé · 🖥️ Wallboard.
- Bouton ⌨️ Ctrl K toujours visible à droite.
3. **Mobile (≤ ~860 px)** : burger basculant un panneau sous le header (fond flouté comme le header), entrées en pleine largeur ≥ 44 px, page active marquée ; `aria-expanded`/`aria-controls`, Échap et clic extérieur ferment, `prefers-reduced-motion` respecté.
4. **Board** : ses actions contextuelles (📥 Triage, 🏷️ Étiquettes, notes) restent dans la barre d'outils du board, pas dans le header global ; le header du board utilise le même partiel, avec le fil d'Ariane projet conservé.
5. **Cas spéciaux assumés** : le wallboard garde son plein écran sans header (usage TV) ; la session triage garde un header minimal (concentration clavier) mais construit sur le même partiel.
6. **Aucune dépendance ajoutée** : CSS existant + un petit `static/js/nav.js` partagé (déroulant + burger), dans la lignée de `palette.js`.
## Critères d'acceptation
- [ ] Le markup du header provient d'un seul partiel sur toutes les pages applicatives (vérifiable par recherche dans les gabarits).
- [ ] À 1280 px comme à 1024 px, le header tient sur une ligne, sans retour à la ligne des pilules.
- [ ] À 375 px, toutes les entrées de navigation sont atteignables en ≤ 2 touchers, cibles ≥ 44 px, aucun défilement horizontal.
- [ ] La page active est visuellement marquée sur desktop et mobile, y compris dans le menu « Plus » quand c'est elle qui la contient.
- [ ] Le bouton Ctrl+K reste visible et fonctionnel sur toutes les pages et tailles ; la palette n'est pas affectée.
- [ ] Navigation du déroulant et du panneau mobile au clavier (Échap ferme, focus visible).
- [ ] Suite de tests existante verte ; les pages spéciales (wallboard, session triage) gardent leur comportement.
## Hors périmètre
- Refonte des autres zones (barre d'outils du board, pied de page, cartes) — uniquement le header et son menu.
- Thèmes clair/sombre ou personnalisation du menu par l'utilisateur.
- Barre de navigation basse façon application mobile native (le burger suffit en v1).
## Notes d'implémentation
- Plusieurs tests cherchent des libellés/liens de navigation dans les pages : conserver hrefs et libellés existants, ou mettre les tests à jour en connaissance de cause.
- Le partiel doit rester compatible avec les pages qui n'ont pas de `request` riche (page d'erreur) : paramètres par défaut partout.
- Penser au cache navigateur des CSS/JS statiques : incrémenter la version (nouvelle release) suffit, les fichiers sont servis sans empreinte.
---
*Description rédigée le 2026-10-11 à la demande de Bruno, diagnostic vérifié dans le code de la 0.14.0 — même format que l'issue #15.*
bruno
added this to the Différenciation — feuille de route milestone 2026-10-11 20:09:34 -04:00
bruno
added the roadmap label 2026-10-11 20:09:35 -04:00
il faudrait refaire le layout UI et UX pour mieux pensé tous le menu dans le Header. présentement la disposition des boutons n'est pas convivial et prend trop de place. De plus, je ne vois pas de changement ou d'amélioration en mode mobile.
il faudrait refaire le layout UI et UX pour mieux pensé tous le menu dans le Header. présentement la disposition des boutons n'est pas convivial et prend trop de place. De plus, je ne vois pas de changement ou d'amélioration en mode mobile.
Retour pris en compte — la réalisation est reprise en 0.16.0 (pas un réarrangement de pilules : un changement de layout).
Ce qui change par rapport à la 0.15.0 :
La barre horizontale disparaît. La navigation passe en barre latérale : entrées groupées (Principal / Rituels / Pilotage / Outils), bouton palette en tête, page active marquée par un liseré. Sur desktop, elle se replie en rail d'icônes (bouton « Replier » en bas, état mémorisé par le navigateur) — la place verticale n'est plus jamais prise par le menu.
Il ne reste qu'une topbar mince (52 px) : fil d'Ariane du projet + actions contextuelles (lien Gitea sur le board). Rien d'autre.
Mobile : le changement est cette fois structurel — la même barre latérale devient un tiroir hors-canvas (burger dans la topbar, fond assombri, fermeture Échap/toucher extérieur, entrées pleine largeur ≥ 44 px). Rien n'occupe l'écran tant qu'on ne l'ouvre pas.
Le partiel unique de la 0.15.0 est conservé comme fondation : une seule source pour le cadre sur les 19 pages.
Au passage, le /wall (demandé en même temps) : hauteur verrouillée à l'écran (100dvh, aucun défilement de page), le pied « 📋 Ouvertes » / « ✅ Fermées » / « ● EN DIRECT » reste toujours visible au-dessus de la navigation des diapos, les cartes se tronquent en fondu avec « … +N autres cartes en vol », et un mode compact s'active sous 760 px de hauteur (TV 720p).
Vérifié : 171 tests verts, CI verte, rendus réels contrôlés (barre latérale unique sur les pages, aucune sur le mur). La carte retourne en Révision pour ta validation — si la direction te convient, un redéploiement de ton instance (toujours en 0.6.0 confirmée) te la montrera en vrai, desktop et mobile.
Retour pris en compte — la réalisation est reprise en **0.16.0** (pas un réarrangement de pilules : un changement de layout).
**Ce qui change par rapport à la 0.15.0 :**
- **La barre horizontale disparaît.** La navigation passe en **barre latérale** : entrées groupées (Principal / Rituels / Pilotage / Outils), bouton palette en tête, page active marquée par un liseré. Sur desktop, elle se **replie en rail d'icônes** (bouton « Replier » en bas, état mémorisé par le navigateur) — la place verticale n'est plus jamais prise par le menu.
- **Il ne reste qu'une topbar mince (52 px)** : fil d'Ariane du projet + actions contextuelles (lien Gitea sur le board). Rien d'autre.
- **Mobile : le changement est cette fois structurel** — la même barre latérale devient un **tiroir hors-canvas** (burger dans la topbar, fond assombri, fermeture Échap/toucher extérieur, entrées pleine largeur ≥ 44 px). Rien n'occupe l'écran tant qu'on ne l'ouvre pas.
- Le partiel unique de la 0.15.0 est conservé comme fondation : une seule source pour le cadre sur les 19 pages.
**Au passage, le /wall** (demandé en même temps) : hauteur verrouillée à l'écran (`100dvh`, aucun défilement de page), le pied « 📋 Ouvertes » / « ✅ Fermées » / « ● EN DIRECT » reste toujours visible au-dessus de la navigation des diapos, les cartes se tronquent en fondu avec « … +N autres cartes en vol », et un mode compact s'active sous 760 px de hauteur (TV 720p).
Vérifié : 171 tests verts, CI verte, rendus réels contrôlés (barre latérale unique sur les pages, aucune sur le mur). La carte retourne en Révision pour ta validation — si la direction te convient, un redéploiement de ton instance (toujours en 0.6.0 confirmée) te la montrera en vrai, desktop et mobile.
Deuxième retouche livrée en 0.16.1, selon tes deux demandes :
Palette : le bouton texte « Recherche & commandes » a disparu. C'est maintenant une icône 🔍 seule, à droite du titre Kanbante dans l'en-tête de la barre latérale (info-bulle « Recherche & commandes (Ctrl+K) » au survol). En rail replié, elle passe sous le logo — toujours à un clic.
Sections accordéon : Principal, Rituels, Pilotage et Outils sont des sections qui s'ouvrent et se ferment au clic sur leur en-tête — chevron qui pivote, transition douce d'ouverture, libellés en micro-capitales espacées pour le look moderne. L'état de chaque section est mémorisé par navigateur et appliqué avant le premier rendu (pas de clignotement). Garde-fou : la section qui contient la page où tu te trouves s'ouvre toujours automatiquement, impossible de « perdre » la page courante dans une section fermée. En rail replié, l'accordéon s'efface et toutes les icônes restent visibles.
171 tests verts, CI à suivre. La carte repasse en Révision — dis-moi si le look te convient cette fois, et pense au redéploiement pour le voir en vrai (ton instance est toujours en 0.6.0 confirmée : tout ce travail sur le menu — 0.15, 0.16, 0.16.1 — ne s'y voit pas encore).
Deuxième retouche livrée en **0.16.1**, selon tes deux demandes :
1. **Palette** : le bouton texte « Recherche & commandes » a disparu. C'est maintenant une **icône 🔍 seule, à droite du titre** Kanbante dans l'en-tête de la barre latérale (info-bulle « Recherche & commandes (Ctrl+K) » au survol). En rail replié, elle passe sous le logo — toujours à un clic.
2. **Sections accordéon** : Principal, Rituels, Pilotage et Outils sont des sections qui **s'ouvrent et se ferment** au clic sur leur en-tête — chevron qui pivote, transition douce d'ouverture, libellés en micro-capitales espacées pour le look moderne. L'état de chaque section est **mémorisé par navigateur** et appliqué avant le premier rendu (pas de clignotement). Garde-fou : la section qui contient la page où tu te trouves **s'ouvre toujours automatiquement**, impossible de « perdre » la page courante dans une section fermée. En rail replié, l'accordéon s'efface et toutes les icônes restent visibles.
171 tests verts, CI à suivre. La carte repasse en Révision — dis-moi si le look te convient cette fois, et pense au redéploiement pour le voir en vrai (ton instance est toujours en 0.6.0 confirmée : tout ce travail sur le menu — 0.15, 0.16, 0.16.1 — ne s'y voit pas encore).
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Contexte
Le header de Kanbante a grandi par accretion : chaque version de la journée a ajouté sa pilule de navigation (Focus, Aujourd'hui, Standup, Prévisions, Règles, Santé…). Le résultat est fonctionnel mais plus élégant : le menu déborde, se replie en pavé, et sur mobile il mange l'écran avant même le contenu. L'application est utilisée au quotidien sur desktop et sur mobile (capture, consultation), les deux méritent un menu pensé pour eux.
État actuel — diagnostic vérifié dans le code (0.14.0)
<header class="app-header">— il n'existe aucun partiel partagé pour le header (seuls_palette.htmlet_card.htmlsont des partiels). Chaque fonctionnalité a ajouté sa pilule page par page ; le contenu a dérivé : le dashboard compte 16 pilules, le board 15 (dont des entrées contextuelles), la session triage 4, le récit et la santé-projet des versions réduites ad hoc, le wallboard aucune..nav-pillsest enflex-wrap: wrap: dès que la fenêtre se rétrécit, les pilules passent sur 2 à 3 lignes et repoussent le contenu — le header sticky (avec flou d'arrière-plan) devient un bandeau épais.Comportement visé
Conception proposée
_header.html(Jinja) paramétré par la page active (et un éventuel contexte projet), inclus par les 19 gabarits. Les routes passent déjà un contexte àrender(); prévoir un défaut sûr quand le paramètre manque.aria-expanded/aria-controls, Échap et clic extérieur ferment,prefers-reduced-motionrespecté.static/js/nav.jspartagé (déroulant + burger), dans la lignée depalette.js.Critères d'acceptation
Hors périmètre
Notes d'implémentation
requestriche (page d'erreur) : paramètres par défaut partout.Description rédigée le 2026-10-11 à la demande de Bruno, diagnostic vérifié dans le code de la 0.14.0 — même format que l'issue #15.
il faudrait refaire le layout UI et UX pour mieux pensé tous le menu dans le Header. présentement la disposition des boutons n'est pas convivial et prend trop de place. De plus, je ne vois pas de changement ou d'amélioration en mode mobile.
Retour pris en compte — la réalisation est reprise en 0.16.0 (pas un réarrangement de pilules : un changement de layout).
Ce qui change par rapport à la 0.15.0 :
Au passage, le /wall (demandé en même temps) : hauteur verrouillée à l'écran (
100dvh, aucun défilement de page), le pied « 📋 Ouvertes » / « ✅ Fermées » / « ● EN DIRECT » reste toujours visible au-dessus de la navigation des diapos, les cartes se tronquent en fondu avec « … +N autres cartes en vol », et un mode compact s'active sous 760 px de hauteur (TV 720p).Vérifié : 171 tests verts, CI verte, rendus réels contrôlés (barre latérale unique sur les pages, aucune sur le mur). La carte retourne en Révision pour ta validation — si la direction te convient, un redéploiement de ton instance (toujours en 0.6.0 confirmée) te la montrera en vrai, desktop et mobile.
Deuxième retouche livrée en 0.16.1, selon tes deux demandes :
171 tests verts, CI à suivre. La carte repasse en Révision — dis-moi si le look te convient cette fois, et pense au redéploiement pour le voir en vrai (ton instance est toujours en 0.6.0 confirmée : tout ce travail sur le menu — 0.15, 0.16, 0.16.1 — ne s'y voit pas encore).