ADR-0026 — Le Cabinet passe en master-detail ; la couleur revient au restreint¶
| Statut | 🟢 Accepté — 2026-06-22 ; implémenté (Cabinet.tsx, Portefeuille.tsx, app/ui.css .al-masterdetail ; tsc + next build verts) |
| Portée | Layout de l'onglet « File de travail » du Cabinet (passage en master-detail) et désaturation des nœuds d'arbre des deux écrans de file. Amende ADR-0025 : réalise D-UILAYOUT-1 (master-detail « écarté pour v1 » → adopté) et retire le cycle de couleurs de D-UILAYOUT-3. |
| Décision | L'onglet file du Cabinet devient un master-detail : colonne file collante à gauche, détail à droite, panneau d'actions à l'extrême droite (rail · file · détail · actions). Les nœuds d'arbre redeviennent neutres : la seule couleur restante est la pastille de statut ; le cycle de teintes par bloc est supprimé. |
| Réf. | ADR-0025 — Layout des écrans de file (déclencheur de réexamen pré-enregistré) ; ADR-0009 — Atelier & Hicks ; DESIGN.md (stratégie restreinte) ; PRODUCT.md (registre Linear / Stripe) |
🎯 À retenir
ADR-0025 avait écarté pour v1 le master-detail à deux volets (concurrence avec le panneau d'actions) et introduit un callout coloré par groupe. À l'usage, les deux choix se sont retournés : le va-et-vient vertical file ↔ détail fatigue (le déclencheur de réexamen pré-enregistré dans 0025), et le cycle de couleurs casse le rendu calme salué par les utilisateurs. On adopte donc le master-detail (la file reste en vue pendant la lecture du détail, vibe inbox) et on revient au restreint : le chiffre est la vedette, l'interface s'efface, une seule pastille de couleur porte le statut. Le « waaaouw » est dans la composition (densité, colonnes, calme), pas dans la saturation.
Contexte¶
Deux frictions remontées après ADR-0025, toutes deux anticipées comme déclencheurs de réexamen :
- Va-et-vient file ↔ détail. En arbre empilé (file en haut, détail en bas), lire le détail d'une demande puis revenir choisir la suivante impose un long scroll. Le déclencheur 0025 (« friction réelle du va-et-vient ») est atteint.
- Trop de couleur. Le callout cyclé par groupe (D-UILAYOUT-3 : indigo / laiton / rose en lavis pour les groupes non-statut) bariole des écrans dont la force est le calme (registre Linear / Stripe, « l'interface s'efface »). Écart au restreint déjà signalé à l'implémentation, confirmé par le retour utilisateurs.
Décision¶
- D-MD-1 — Le Cabinet (onglet file) est un master-detail. La zone contenu de l'onglet
« File de travail » se scinde en deux colonnes : file collante (
.al-md-file,position: stickycalée sous l'entête en verre, scroll interne) à gauche, détail (progression, synthèse, revue, journal) à droite. Le panneau d'actions dePageShellreste à l'extrême droite : on obtient rail · file · détail · actions (le layout inbox). Les onglets Équipe et Clients restent en pleine largeur (pas de détail à apparier). Sous 1080px, le grid se replie en une colonne (file puis détail dessous). - D-MD-2 — Retour au restreint sur la couleur. Les nœuds d'arbre (Cabinet ET
Portefeuille) redeviennent neutres : fond à peine teinté (
heading 4%), bordure douce, titreheading, compteur en badge neutre. La seule couleur est une petite pastille de statut (teinte du chip) quand le regroupement est par statut ; sinon un repère laiton discret. Le cycle de teintes par bloc de D-UILAYOUT-3 est supprimé.
Conséquences¶
- Positif. Plus de scroll file ↔ détail (les deux sont en vue) ; le calme visuel salué revient ; la structure d'arbre et le tri restent acquis (ADR-0025). Aucune logique métier ni garde backend touchée.
- Limite assumée. Le master-detail à quatre colonnes demande de la largeur : sous
1080px on retombe sur une colonne (acceptable, c'est un poste de travail sur écran large,
PRODUCT.md). Le panneau d'actions et la colonne détail se partagent l'espace à droite ; si cela serre sur écran moyen, voir le déclencheur ci-dessous. - Pas de migration. Changement purement frontend (
_COLONNES_AJOUTEESnon concerné).
Déclencheur de réexamen (pré-enregistré)¶
- Serrage à quatre colonnes sur écran moyen-large (si détail + panneau d'actions se marchent dessus entre 1080 et ~1400px) → envisager d'escamoter le panneau d'actions dans la colonne détail (actions en tête du détail) plutôt que comme colonne propre.