Rendre lisibles le statut et la date imposée

Statut : quatre boutons peints de leur texture, si bien que le panneau
sert enfin de légende. « En cours » se raye et « terminé » redevient vif
— la trame les distingue, la teinte n'a plus à le faire.

Date imposée : un cadre tireté cerne la forme entière. Les taquets
tombaient sous les poignées de redimensionnement et disparaissaient sur
une barre courte. Son libellé passe dans le modèle, ce qui la fait
apparaître dans la vue par mois, qui la taisait.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

js/timeline.js

@@ -13,7 +13,6 @@
 
 import {
   LIBELLES_ETAT,
-  LIBELLES_STATUT,
   MOIS_COURTS,
   MOIS_LONGS,
   ajouterJours,
@@ -28,6 +27,7 @@ import {
   formaterDateLongue,
   formaterHorizon,
   formulerDerive,
+  libelleStatut,
   lundiDeLaSemaine,
   phasesDecalables,
   projetADater,
@@ -308,7 +308,7 @@ function construireLibelles(projets, tagsActifs, curseur) {
       const ligne = document.createElement('div');
       ligne.className = `libelle-phase${sousCurseur ? ' libelle-phase--curseur' : ''}`;
       ligne.textContent = phase.name;
-      ligne.title = `${phase.name} — ${LIBELLES_STATUT[phase.status]}${mentionImposee(phase)}`;
+      ligne.title = `${phase.name} — ${libelleStatut(phase)}`;
       ligne.dataset.projet = projet.id;
       ligne.dataset.phase = phase.id;
       elements.push(ligne);
@@ -507,16 +507,14 @@ function construirePhase(projet, phase, echelle, curseur) {
     elements.push(fantome);
   }
 
-  // Une date imposée se lit sur la barre, et pas seulement dans le panneau : un
-  // planning se parcourt des yeux, et savoir ce qui suivra un décalage doit se
-  // voir avant de faire le geste, pas après.
-  const impose = phase.fixed ? ' barre--imposee' : '';
-
   if (phase.milestone) {
     const losange = document.createElement('div');
-    losange.className =
-      `jalon jalon--${phase.status}${phase.fixed ? ' jalon--impose' : ''}` +
-      (selectionnee ? ' jalon--selectionne' : '');
+    losange.classList.add('jalon', `jalon--${phase.status}`);
+    // Une date imposée se lit sur le losange, et pas seulement dans le panneau :
+    // un planning se parcourt des yeux, et savoir ce qui suivra un décalage doit
+    // se voir avant de faire le geste, pas après.
+    if (phase.fixed) losange.classList.add('jalon--imposee');
+    if (selectionnee) losange.classList.add('jalon--selectionne');
     losange.style.left = `${echelle.x(phase.start)}px`;
     losange.dataset.projet = projet.id;
     losange.dataset.phase = phase.id;
@@ -526,7 +524,7 @@ function construirePhase(projet, phase, echelle, curseur) {
     // infobulle les taisait, alors que celle d'une barre les montrait.
     losange.title =
       `${phase.name} — ${formaterDateLongue(phase.start)}` +
-      `\n${LIBELLES_STATUT[phase.status]}${mentionImposee(phase)}` +
+      `\n${libelleStatut(phase)}` +
       (phase.notes ? `\n\n${aplatirMarkdown(phase.notes)}` : '');
     elements.push(losange);
 
@@ -545,8 +543,11 @@ function construirePhase(projet, phase, echelle, curseur) {
   }
 
   const barre = document.createElement('div');
-  barre.className =
-    `barre barre--${phase.status}${impose}` + (selectionnee ? ' barre--selectionnee' : '');
+  barre.classList.add('barre', `barre--${phase.status}`);
+  // Voir le losange plus haut : c'est la même marque, un cadre tireté qui cerne
+  // la forme — laquelle, le CSS s'en arrange.
+  if (phase.fixed) barre.classList.add('barre--imposee');
+  if (selectionnee) barre.classList.add('barre--selectionnee');
   barre.style.left = `${echelle.x(phase.start)}px`;
   barre.style.width = `${echelle.largeurDe(phase.start, phase.end)}px`;
   barre.dataset.projet = projet.id;
@@ -554,7 +555,7 @@ function construirePhase(projet, phase, echelle, curseur) {
   barre.dataset.role = 'barre';
   barre.title =
     `${phase.name}\n${formaterDateLongue(phase.start)} → ${formaterDateLongue(phase.end)}` +
-    `\n${LIBELLES_STATUT[phase.status]}${mentionImposee(phase)}` +
+    `\n${libelleStatut(phase)}` +
     // Aplati : l'infobulle native ne connaît que le texte, et y déverser la
     // source markdown rendrait la note moins lisible qu'avant qu'on ne
     // l'enrichisse. `aplatirMarkdown` retire les marques et remplace celles qui
@@ -625,17 +626,6 @@ function construireBarreCumulative(projet, echelle) {
   return conteneur;
 }
 
-/**
- * Ce qui suit le statut dans l'infobulle d'une phase à date imposée.
- *
- * Accolé au statut, et non sur sa propre ligne : les deux se lisent ensemble —
- * « en cours, date imposée » — et occupent le même registre, celui de ce que la
- * phase est aujourd'hui.
- */
-function mentionImposee(phase) {
-  return phase.fixed ? ' — date imposée, non emportée par un décalage du projet' : '';
-}
-
 /**
  * Ce que dit l'infobulle du résumé sur le geste qu'il offre.
  *