Aller au contenu

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: sticky calée sous l'entête en verre, scroll interne) à gauche, détail (progression, synthèse, revue, journal) à droite. Le panneau d'actions de PageShell reste à 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, titre heading, 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_AJOUTEES non 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.