Grille : repeindre les lignes montées quand le jeu de colonnes change

Replier le bloc mensuel ne vidait que l'en-tête. Les lignes déjà montées
gardaient leurs douze cellules, seules celles virtualisées ensuite
adoptaient le nouveau jeu — une grille à deux vitesses, en-tête d'un côté,
corps de l'autre.

TanStack met ses objets `Row` en cache sur la seule identité des DONNÉES :
changer les colonnes ne leur donne aucune référence neuve, et `React.memo`
concluait qu'il n'y avait rien à repeindre. Le contournement existait déjà
pour `columnVisibility` et `columnSizing`, passés en props sans jamais être
lus ; le drapeau du bloc mensuel, lui, n'y figurait pas.

`columnVisibility` cède la place à `columnsKey`, la signature des colonnes
réellement visibles : elle change pour TOUT changement de colonnes, case
décochée dans le menu comme bloc replié, là où l'ancien objet ne voyait que
le menu. Calculée une fois par rendu de grille, pas une fois par ligne.

Vérifié en rendant la Grille sur données de démonstration : 29 cellules par
ligne et 29 en-têtes, 17 et 17 une fois le bloc replié, 29 et 29 au retour.
Avec le signal figé, l'en-tête tombe à 17 quand les lignes restent à 29 —
le défaut signalé.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EYGgoQCG1VCe42HzbzhAXR

src/features/grid/components/heatmap-grid.tsx

@@ -180,15 +180,27 @@ interface VirtualRowProps {
     row: Row<ProductRow>;
     rowHeight: number;
     isSelected: boolean;
-    columnVisibility: Record<string, boolean>;
+    /** Identifiants des colonnes visibles, concaténés — cf. le corps du composant. */
+    columnsKey: string;
     columnSizing: Record<string, number>;
 }
 
-const GridRow = React.memo(({ virtualRow, row, rowHeight, isSelected, columnVisibility, columnSizing }: VirtualRowProps) => {
+const GridRow = React.memo(({ virtualRow, row, rowHeight, isSelected, columnsKey, columnSizing }: VirtualRowProps) => {
     // Uniquement la ligne concernée écoute son propre changement pour l'effet visuel
     const effectiveGamme = useGridStore((s) => s.draftChanges[row.original.codein] ?? row.original.codeGamme);
-    void columnVisibility; // Force re-render via React.memo when visibility changes
-    void columnSizing; // Force re-render via React.memo when resizing columns
+    // ⚠️ Ces deux props ne sont pas lues : elles n'existent que pour rompre la
+    // mémoïsation. TanStack met ses objets `Row` en cache sur la seule identité
+    // des DONNÉES ; changer le jeu de colonnes ne leur donne aucune référence
+    // neuve. Sans un signal supplémentaire, `React.memo` laisserait les lignes
+    // déjà montées peindre l'ancien jeu de cellules pendant que l'en-tête, lui,
+    // affiche le nouveau — seules les lignes fraîchement virtualisées seraient à
+    // jour, et la grille se retrouverait à deux vitesses.
+    //
+    // La signature couvre TOUT changement de colonnes (case décochée dans le menu
+    // « Colonnes », bloc mensuel replié) là où l'ancien objet `columnVisibility`
+    // ne voyait que le menu.
+    void columnsKey;
+    void columnSizing; // idem, pour le redimensionnement des colonnes
 
     return (
         <tr
@@ -911,6 +923,10 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
 
     const visibleColumns = table.getVisibleLeafColumns();
     const totalWidth = visibleColumns.reduce((s, c) => s + ((c.columnDef as { size?: number }).size ?? 150), 0);
+    // Signature du jeu de colonnes affiché : elle sert de signal de re-rendu aux
+    // lignes virtuelles (cf. `GridRow`). Calculée une fois par rendu de grille,
+    // pas une fois par ligne.
+    const columnsKey = visibleColumns.map((c) => c.id).join("|");
 
     if (!isMounted) {
         return (
@@ -1058,7 +1074,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                                         row={row}
                                         rowHeight={rowHeight}
                                         isSelected={isSelected}
-                                        columnVisibility={columnVisibility}
+                                        columnsKey={columnsKey}
                                         columnSizing={columnSizing}
                                     />
                                 </div>