Rendre les notes d'une phase consultables depuis la vue par mois

Elles n'étaient accessibles que dans l'infobulle de la ligne, où l'on ne pense
pas à aller les chercher et d'où l'on ne peut rien copier. Or une note est
précisément ce qu'on va lire quand on fait le point — « pourquoi cette phase
est-elle bloquée ».

Un triangle en tête de ligne les déplie en dessous, sur les phases qui en
portent. C'est celui qui plie un projet sur la frise, au même endroit et avec
la même rotation : ce qui s'apprend d'un côté vaut de l'autre. La gouttière se
lit ainsi d'un coup d'œil comme la liste de ce qui a quelque chose à dire.

Toute la ligne déplie, pas seulement le triangle. Une première version faisait
de l'intitulé lui-même le bouton, avec un chevron à sa suite : la cible était
trop petite pour un geste aussi banal, et rien ne justifiait cette parcimonie
dans une vue où le clic n'a aucun autre effet. Le triangle reste comme
indicateur plutôt que comme cible, le curseur et le fond au survol disent que
la ligne réagit. Les lignes sans notes, elles, ne réagissent pas : promettre un
geste qui ne fait rien est pire que ne rien promettre.

Il n'en reste pas moins un vrai button : la ligne n'est pas focusable, c'est
donc le seul chemin clavier vers les notes.

Les notes restent repliées par défaut pour deux raisons. La densité d'abord :
trois lignes sous chaque intitulé étalent un mois sur deux écrans et ruinent la
lecture en diagonale. Et parce qu'une phase sur trois seulement en porte, les
afficher d'office donnerait des lignes de hauteurs inégales, ce qui casse
l'alignement des colonnes sur lequel repose tout le balayage du regard.

L'état déplié vit dans le DOM et nulle part ailleurs : il ne survit pas à un
changement de filtre, qui reconstruit la liste. Le remonter dans l'état de
l'application achèterait cher une continuité que personne ne réclame — quand la
liste change, on la relit.

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

js/app.js

@@ -381,13 +381,45 @@ refs.onglets.addEventListener('click', (evenement) => {
   if (onglet) basculerVue(onglet.dataset.vue);
 });
 
-// La vue par mois n'a ni barres ni poignées, mais ses pastilles de tags
-// filtrent comme celles de la colonne des libellés.
+// La vue par mois n'a ni barres ni poignées. Ses deux seuls gestes ne touchent
+// pas au planning : filtrer sur un tag, et déplier les notes d'une phase.
 refs.vueMois.addEventListener('click', (evenement) => {
-  const pastille = evenement.target.closest('[data-action="tag"]');
-  if (pastille) basculerTag(pastille.dataset.tag);
+  const cible = evenement.target.closest('[data-action]');
+  if (!cible) return;
+
+  if (cible.dataset.action === 'tag') {
+    basculerTag(cible.dataset.tag);
+    return;
+  }
+
+  if (cible.dataset.action === 'notes') basculerNotes(cible.closest('.mois-entree'));
 });
 
+// Toute la ligne déplie, pas seulement son triangle : viser une cible de dix
+// pixels pour lire un commentaire est une exigence inutile, et il n'y a rien
+// d'autre à faire d'un clic sur une ligne d'une vue qui ne s'édite pas. Le
+// gestionnaire ci-dessus s'occupe des tags, qui eux ont leur propre effet.
+refs.vueMois.addEventListener('click', (evenement) => {
+  if (evenement.target.closest('[data-action]')) return;
+  const ligne = evenement.target.closest('.mois-entree--commentee');
+  if (ligne) basculerNotes(ligne);
+});
+
+/**
+ * Ouvre ou referme les notes d'une ligne.
+ *
+ * La bascule est appliquée directement au DOM, sans repasser par `dessiner` :
+ * ce qui est déplié relève de l'écran, pas du planning. Un rendu complet
+ * replierait d'ailleurs tout le reste au passage.
+ */
+function basculerNotes(ligne) {
+  const bouton = ligne.querySelector('.mois-entree__plier');
+  const deplie = bouton.getAttribute('aria-expanded') !== 'true';
+  bouton.setAttribute('aria-expanded', String(deplie));
+  bouton.title = deplie ? 'Masquer les notes' : 'Afficher les notes';
+  ligne.querySelector('.mois-entree__notes').hidden = !deplie;
+}
+
 // ---------------------------------------------------------------------------
 // Largeur de la colonne des libellés
 // ---------------------------------------------------------------------------