implement column width adjustment with local storage support

[Veronikya]

PR: feat(base-ui): add drag-to-resize column widths persisted in localStorage

Summary

Adds drag-to-resize column widths to the base-ui Table component. User-adjusted widths are persisted in browser localStorage and automatically restored on page reload.

• Users can resize columns by dragging the vertical handle on the right edge of any column header
• Width data is stored in localStorage, keyed by tableId + viewId — each view maintains its own independent column widths
• No backend calls — purely local persistence
• Live preview during drag; only written to localStorage on mouse-up (avoids excessive writes)
• Column width priority: live drag preview > localStorage > backend view meta > API column.width > default 235px
• Minimum column width enforced at 80px

Changes

base-ui/src/plugins/GridViewPlugin/utils/columnWidthStorage.ts (new)

localStorage wrapper module with three exported functions:

Function	Description
getColumnWidths(tableId, viewId)	Read column widths for a given table + view
saveColumnWidths(tableId, viewId, widths)	Persist column widths to localStorage
clearColumnWidths(tableId, viewId)	Clear column widths for a given table + view

Storage key format: serenibase_col_widths_<tableId>_<viewId>

base-ui/src/plugins/GridViewPlugin/hooks/useTableViewConfig.ts

• New tableId parameter (used to build the localStorage key)
• New localColumnWidths state (loaded from localStorage on mount)
• New handleColumnWidthChange(columnId, width) — updates local state and writes to localStorage; does not call the backend
• Automatically loads saved widths from localStorage when switching views

base-ui/src/plugins/GridViewPlugin/components/Table/Table.tsx

• New resize state: resizingColumnIndex, liveColumnWidths (for live preview during drag)
• New handleResizeMouseDown — on mousedown, registers global mousemove/mouseup listeners; mousemove updates liveColumnWidths for real-time preview; mouseup calls handleColumnWidthChange to persist
• Refactored columnWidths useMemo with 5-level priority (see Summary)
• Added resize handle inside each column header (1px vertical line on the right edge; hover highlight; cursor: col-resize)

Test Plan

• Open any table, drag the vertical handle on a column header edge — column width updates in real time
• Stop dragging and refresh the page — column width is preserved (localStorage working)
• Switch views — each view has its own independent column widths
• Clear localStorage and refresh — column widths fall back to backend defaults
• Minimum width constraint: dragging below 80px clamps to 80px
• All 5774 tests pass (pnpm test -- --run)

Verification

cd base-ui
pnpm lint          # 0 errors
pnpm type-check    # no new type errors
pnpm test -- --run # 5774 passed

Files Changed

base-ui/src/plugins/GridViewPlugin/utils/columnWidthStorage.ts      | +44  (new)
base-ui/src/plugins/GridViewPlugin/hooks/useTableViewConfig.ts     | +28
base-ui/src/plugins/GridViewPlugin/components/Table/Table.tsx      | +95
3 files changed, 151 insertions(+), 16 deletions(-)