From 36223ff49f195750b4e51ec45595536258575ebc Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Thu, 3 Jul 2025 18:05:49 +0200
Subject: [PATCH] fix: resizing columns in cuesheet

---
 .../cuesheet/cuesheet-table/CuesheetTable.tsx |  4 +-
 .../cuesheet-table/useColumnManager.tsx       | 40 ++++++++++++-------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
index 24fd19b8a..497ec6d35 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
@@ -110,7 +110,9 @@ export default function CuesheetTable({ data, columns }: CuesheetTableProps) {
       colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
     }
     return colSizes;
-  }, [table]);
+    // eslint-disable-next-line react-compiler/react-compiler -- unfortunately this is what we need
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- this works well and follows documentation
+  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
 
   return (
     <>
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/useColumnManager.tsx b/apps/client/src/views/cuesheet/cuesheet-table/useColumnManager.tsx
index ece6adca5..5df133153 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/useColumnManager.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/useColumnManager.tsx
@@ -1,31 +1,43 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useLocalStorage } from '@mantine/hooks';
 import { ColumnDef } from '@tanstack/react-table';
 import { OntimeEntry } from 'ontime-types';
 
+import { debounce } from '../../../common/utils/debounce';
+
+const saveSizesToStorage = debounce((sizes: Record<string, number>) => {
+  localStorage.setItem('table-sizes', JSON.stringify(sizes));
+}, 500);
+
 export default function useColumnManager(columns: ColumnDef<OntimeEntry>[]) {
   const [columnVisibility, setColumnVisibility] = useLocalStorage({ key: 'table-hidden', defaultValue: {} });
   const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
     key: 'table-order',
     defaultValue: columns.map((col) => col.id as string),
   });
-  const [columnSizing, setColumnSizing] = useLocalStorage({ key: 'table-sizes', defaultValue: {} });
 
-  // if the columns order changes, we update the dataset
+  const [columnSizing, setColumnSizingState] = useState(() => {
+    try {
+      const stored = localStorage.getItem('table-sizes');
+      return stored ? JSON.parse(stored) : {};
+    } catch {
+      return {};
+    }
+  });
+
+  // save sizes to localStorage whenever they change (debounced)
   useEffect(() => {
-    let shouldReplace = false;
-    const newColumns: string[] = [];
+    saveSizesToStorage(columnSizing);
+  }, [columnSizing]);
 
-    // iterate through columns to see if there are new ids
-    columns.forEach((column) => {
-      const columnnId = column.id as string;
-      if (!shouldReplace && !columnOrder.includes(columnnId)) {
-        shouldReplace = true;
-      }
-      newColumns.push(columnnId);
-    });
+  const setColumnSizing = useCallback((sizes: typeof columnSizing) => {
+    setColumnSizingState(sizes);
+  }, []);
 
-    if (shouldReplace) {
+  // update column order if columns change
+  useEffect(() => {
+    const newColumns = columns.map((col) => col.id as string);
+    if (newColumns.some((id) => !columnOrder.includes(id))) {
       saveColumnOrder(newColumns);
     }
   }, [columnOrder, columns, saveColumnOrder]);