Ajouter une vue des tâches et jalons groupés par mois

La frise répond mal à « qu'est-ce qui arrive le mois prochain » : la question
traverse les projets, alors que la frise les range précisément en couloirs
séparés. Il fallait balayer une colonne de dates à travers tous les couloirs
en gardant en tête ce qu'on avait vu plus haut — d'où le tableur ressorti à
côté.

Deux boutons dans la barre d'outils basculent vers une liste qui déroule
toutes les phases, projets mêlés, dans l'ordre du calendrier. Chaque ligne se
lit quand, chez qui, puis quoi : période, projet et ses tags, intitulé,
statut.

Une phase est rattachée au seul mois de son début. La répéter dans chaque mois
traversé aurait donné un tableau de charge — utile, mais c'est une autre vue,
et le doublon coûte la lecture en diagonale qui fait tout l'intérêt de
celle-ci. Sa fin est écrite sur la ligne, ce qui suffit à voir qu'elle
déborde. Les mois sans rien ne sont pas représentés : l'absence se lit déjà
dans le saut d'un titre au suivant.

La liste ne s'édite pas, et ce n'est pas une lacune à combler : déplacer une
phase demande de voir ce qu'elle chevauche et ce qu'elle repousse, or c'est
justement ce voisinage que l'ordre chronologique dissout. Seules les pastilles
de tags restent cliquables — filtrer ne change pas les données.

Le filtre par tags vaut pour les deux vues, sans rien changer à sa mécanique,
si bien qu'on ne se demande jamais si l'une montre plus que l'autre. L'œil
(hidden) écarte un projet de la liste comme il écarte ses barres.

La vue choisie n'est pas enregistrée, contrairement à la largeur de la colonne
des libellés : cette largeur est un réglage d'écran, la vue est un geste de
consultation. L'outil s'ouvre donc sur la frise, celle où l'on modifie. Le
défilement horizontal de la frise, lui, est mémorisé le temps de
l'aller-retour, puisque masquer un élément lui fait perdre son scrollLeft.

Deux extractions au passage, chacune parce que deux vues sœurs en ont besoin
et qu'aucune n'a à importer l'autre : les noms de mois et le formatage des
dates rejoignent model.js, les pastilles de tags un module tags.js.

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

tests/model.test.js

@@ -21,11 +21,15 @@ import {
   ecartJours,
   fabriquerId,
   figerReference,
+  formaterDateLongue,
+  formaterMois,
+  formaterPeriode,
   formulerDerive,
   libererReference,
   lundiDeLaSemaine,
   modifierPhase,
   normaliserTags,
+  phasesParMois,
   planningVide,
   pourEcriture,
   projetFiltre,
@@ -141,6 +145,23 @@ describe('dates', () => {
     }
     delete process.env.TZ;
   });
+
+  test('formaterDateLongue et formaterMois rendent les dates lisibles', () => {
+    assert.equal(formaterDateLongue('2026-09-12'), '12 sept. 2026');
+    assert.equal(formaterMois('2026-09'), 'septembre 2026');
+    assert.equal(formaterMois('2027-01'), 'janvier 2027');
+  });
+
+  test('formaterPeriode ne nomme le mois que lorsque la phase en déborde', () => {
+    const p = (start, end, milestone = false) => ({ start, end, milestone });
+
+    assert.equal(formaterPeriode(p('2026-09-12', '2026-09-12', true)), '12');
+    assert.equal(formaterPeriode(p('2026-09-01', '2026-09-30')), '1 → 30');
+    assert.equal(formaterPeriode(p('2026-09-15', '2026-11-04')), '15 → 4 nov.');
+    // Franchir l'année ajoute le millésime, sans quoi « 15 → 4 janv. » se
+    // lirait comme un retour en arrière de huit mois.
+    assert.equal(formaterPeriode(p('2026-09-15', '2027-01-04')), '15 → 4 janv. 2027');
+  });
 });
 
 // --- identifiants -----------------------------------------------------------
@@ -413,6 +434,108 @@ describe('bornes', () => {
   });
 });
 
+// --- regroupement par mois --------------------------------------------------
+
+describe('phasesParMois', () => {
+  const planning = {
+    version: VERSION_FORMAT,
+    projects: [
+      projet({
+        id: 'site-web',
+        name: 'Site web',
+        tags: ['client'],
+        phases: [
+          phase({ id: 'cadrage', name: 'Cadrage', start: '2026-09-01', end: '2026-09-20' }),
+          phase({
+            id: 'livraison',
+            name: 'Livraison',
+            start: '2026-11-12',
+            end: '2026-11-12',
+            milestone: true,
+          }),
+        ],
+      }),
+      projet({
+        id: 'portail',
+        name: 'Portail',
+        tags: ['interne'],
+        phases: [
+          // Court sur trois mois : ne doit apparaître qu'en septembre.
+          phase({ id: 'redaction', name: 'Rédaction', start: '2026-09-15', end: '2026-11-04' }),
+        ],
+      }),
+    ],
+  };
+
+  const cles = (groupes) => groupes.map((groupe) => groupe.mois);
+  const noms = (groupe) => groupe.entrees.map(({ phase: p }) => p.name);
+
+  test('rattache chaque phase au seul mois de son début', () => {
+    const groupes = phasesParMois(planning);
+    assert.deepEqual(cles(groupes), ['2026-09', '2026-11']);
+    assert.deepEqual(noms(groupes[0]), ['Cadrage', 'Rédaction']);
+    // « Rédaction » traverse octobre et novembre sans y réapparaître.
+    assert.deepEqual(noms(groupes[1]), ['Livraison']);
+  });
+
+  test('ne fabrique pas de mois vide entre deux mois pleins', () => {
+    assert.equal(phasesParMois(planning).some((groupe) => groupe.entrees.length === 0), false);
+    assert.equal(cles(phasesParMois(planning)).includes('2026-10'), false);
+  });
+
+  test('trie les mois du plus ancien au plus récent, à cheval sur les années', () => {
+    const surDeuxAns = {
+      projects: [
+        projet({
+          phases: [
+            phase({ id: 'b', start: '2027-01-05', end: '2027-01-10' }),
+            phase({ id: 'a', start: '2026-12-05', end: '2026-12-10' }),
+          ],
+        }),
+      ],
+    };
+    assert.deepEqual(cles(phasesParMois(surDeuxAns)), ['2026-12', '2027-01']);
+  });
+
+  test('trie un mois par date, puis par projet, puis par nom de phase', () => {
+    const memeJour = {
+      projects: [
+        projet({
+          id: 'zeta',
+          name: 'Zeta',
+          phases: [phase({ id: 'x', name: 'Atelier', start: '2026-09-10', end: '2026-09-11' })],
+        }),
+        projet({
+          id: 'alpha',
+          name: 'Alpha',
+          phases: [
+            phase({ id: 'y', name: 'Bilan', start: '2026-09-10', end: '2026-09-11' }),
+            phase({ id: 'z', name: 'Amorçage', start: '2026-09-02', end: '2026-09-03' }),
+          ],
+        }),
+      ],
+    };
+    assert.deepEqual(noms(phasesParMois(memeJour)[0]), ['Amorçage', 'Bilan', 'Atelier']);
+  });
+
+  test('applique le filtre par tags, et écarte les projets masqués', () => {
+    assert.deepEqual(cles(phasesParMois(planning, ['interne'])), ['2026-09']);
+    assert.deepEqual(noms(phasesParMois(planning, ['interne'])[0]), ['Rédaction']);
+
+    const masque = {
+      projects: planning.projects.map((p) =>
+        p.id === 'portail' ? { ...p, hidden: true } : p
+      ),
+    };
+    assert.deepEqual(noms(phasesParMois(masque)[0]), ['Cadrage']);
+  });
+
+  test('rend une liste vide plutôt que null quand rien ne reste', () => {
+    assert.deepEqual(phasesParMois(planningVide()), []);
+    assert.deepEqual(phasesParMois(planning, ['inconnu']), []);
+  });
+});
+
 // --- référence et dérive ----------------------------------------------------
 
 describe('référence et dérive', () => {