Function useColumnWidths

frontend/src/react/hooks/useColumnWidths.ts:62–161

(columns: T[])

 * rather than NaN.
 */
export function useColumnWidths<T extends ColumnWithWidth>(columns: T[]) {
  const [widths, setWidths] = useState<number[]>(() =>
    columns.map((c) => c.defaultWidth)
  );
  const dragRef = useRef<{
    colIndex: number;
    startX: number;
    startWidth: number;
    minWidth: number;
  } | null>(null);
  // Holds the teardown function for an active drag so an unmount-mid-drag
  // (route change, modal close, etc.) tears down document-level listeners
  // and resets the body cursor/userSelect overrides.
  const dragCleanupRef = useRef<() => void>(() => {});
  // Closures should capture state eagerly via refs, not via React deps.
  // Putting `widths` in onResizeStart's dep array would rebind the callback
  // on every mousemove (since each tick calls setWidths), which would
  // re-render every header consumer mid-drag. Mirror the latest values
  // into refs via useLayoutEffect (runs synchronously after commit, before
  // paint and before any subsequent event handler can fire) so onResizeStart
  // stays referentially stable AND avoids render-phase ref writes that
  // React 19 concurrent mode could expose from a discarded render.
  const widthsRef = useRef(widths);
  const columnsRef = useRef(columns);
  useLayoutEffect(() => {
    widthsRef.current = widths;
    columnsRef.current = columns;
  });

  const onResizeStart = useCallback((colIndex: number, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    // Defensively tear down any in-flight drag before starting a new one.
    // A second onResizeStart without an intervening mouseup (rapid
    // sequential mousedowns, missed mouseup outside the document,
    // multi-touch trackpad, programmatic dispatch) would otherwise leak
    // the prior drag's document listeners and orphan its cleanup.
    dragCleanupRef.current();
    // Defensive: the user clicked a header that was just rendered, so the
    // column at this index should be defined. Guard against the edge case
    // where columnsRef has been synced to a shorter array via a commit
    // that's interleaved with this click.
    const col = columnsRef.current[colIndex];
    if (!col) return;
    dragRef.current = {
      colIndex,
      startX: e.clientX,
      // Fall back to defaultWidth if widths state hasn't grown to include
      // a column added after mount (widths state is sized at first render
      // and never auto-extends). Without this, startWidth would be
      // undefined and the drag's newWidth math would produce NaN.
      startWidth: widthsRef.current[colIndex] ?? col.defaultWidth,
      minWidth: col.minWidth ?? 40,
    };

    const onMouseMove = (ev: MouseEvent) => {
      if (!dragRef.current) return;
      // Read only the snapshot — see "Eager-capture contract" in JSDoc.