feat: implement virtualized heatmap grid component using TanStack Table and a new Zustand store for product data.

src/features/grid/store/use-grid-store.ts

@@ -16,6 +16,8 @@ interface GridState {
     activeGridQuery: string;
     /** Persisted column visibility state */
     columnVisibility: Record<string, boolean>;
+    /** Persisted column sizing state */
+    columnSizing: Record<string, number>;
 
     // Actions
     setRows: (rows: ProductRow[]) => void;
@@ -29,6 +31,7 @@ interface GridState {
     restoreSnapshot: (changes: Record<string, GammeCode>) => void;
     batchSetDraftGamme: (changes: Record<string, GammeCode>) => void;
     setColumnVisibility: (updater: Record<string, boolean> | ((old: Record<string, boolean>) => Record<string, boolean>)) => void;
+    setColumnSizing: (updater: Record<string, number> | ((old: Record<string, number>) => Record<string, number>)) => void;
 }
 
 function computeSummary(rows: ProductRow[], drafts: Record<string, GammeCode>): GridSummary {
@@ -71,6 +74,7 @@ export const useGridStore = create<GridState>()(
             displayDensity: "normal",
             activeGridQuery: "",
             columnVisibility: {},
+            columnSizing: {},
 
             setRows: (rows) => {
                 set({ rows, summary: computeSummary(rows, get().draftChanges) });
@@ -134,16 +138,22 @@ export const useGridStore = create<GridState>()(
                     columnVisibility: typeof updater === 'function' ? updater(state.columnVisibility) : updater
                 }));
             },
+            setColumnSizing: (updater) => {
+                set((state) => ({
+                    columnSizing: typeof updater === 'function' ? updater(state.columnSizing) : updater
+                }));
+            },
         }),
         {
             name: "collectflow-grid-storage",
-            // Only persist filters, display density, drafts, active grid query, and column visibility
+            // Only persist filters, display density, drafts, active grid query, and column visibility/sizing
             partialize: (state) => ({
                 filters: state.filters,
                 displayDensity: state.displayDensity,
                 draftChanges: state.draftChanges,
                 activeGridQuery: state.activeGridQuery,
                 columnVisibility: state.columnVisibility,
+                columnSizing: state.columnSizing,
             }),
         }
     )