feat(berths): active-interests popover + row-density toggle on berth list
Two complementary UX upgrades on the berth list: 1. Active-interests popover — replaces the plain "Active interests" count cell with a click-to-expand popover. Each row shows the linked deal's client name, pipeline stage (with stage-badge tint), and a primary-star icon. Lazy-loads on first open (30s stale), capped at 20 entries server-side, sorted most-recently-updated first. Backed by `GET /api/v1/berths/[id]/active-interests`. 2. Row-density toggle — DataTable gains a `density: 'comfortable' | 'compact'` prop. Compact drops cell vertical padding from py-3 to py-1.5 so reps can scan many more berths per viewport on the high-density admin lists. Persisted alongside hidden-columns in `user_profiles.preferences. tablePreferences[entityType].density`. Hook returns `density + setDensity`; defaults to 'comfortable' for users who haven't chosen. The setter shares the same debounced PATCH with setHidden so toggling both doesn't multiply the network round-trips. Toolbar adds a Rows3/Rows4 icon button between the saved-views dropdown and the ColumnPicker. tooltip + aria-label flip to communicate the next state. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -82,6 +82,13 @@ interface DataTableProps<TData> {
|
||||
* needing a preferences migration.
|
||||
*/
|
||||
columnVisibility?: VisibilityState;
|
||||
/**
|
||||
* Row density. `'comfortable'` (default) keeps shadcn's default
|
||||
* cell padding. `'compact'` drops vertical padding so reps can scan
|
||||
* more rows per viewport, useful for berth tables and admin lists.
|
||||
* Affects desktop only — the mobile card list ignores it.
|
||||
*/
|
||||
density?: 'comfortable' | 'compact';
|
||||
/**
|
||||
* Opt-in row virtualization. Only renders rows in the viewport (plus a
|
||||
* small overscan), so a 5000-row client-export list stays at 60 fps.
|
||||
@@ -125,6 +132,7 @@ export function DataTable<TData>({
|
||||
cardRender,
|
||||
mobileGroupBy,
|
||||
columnVisibility,
|
||||
density = 'comfortable',
|
||||
virtual,
|
||||
virtualHeightPx = 600,
|
||||
virtualRowHeightPx = 48,
|
||||
@@ -312,7 +320,10 @@ export function DataTable<TData>({
|
||||
onClick={() => onRowClick?.(row.original)}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
<TableCell
|
||||
key={cell.id}
|
||||
className={density === 'compact' ? 'py-1.5' : undefined}
|
||||
>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user