feat(ui): shared card grid with max six columns and virtualization

Add cardGridLayout helpers, useCardGridMetrics, useRemeasureGridVirtualizer, and VirtualCardGrid (TanStack row virtualization, always remeasure on layout changes).

Apply to Artists (grid + list unchanged policy), Albums, Composers grid, playlists, radio stations, offline library, and album-heavy browse/detail pages. Respect disableMainstageVirtualLists for a non-virtual grid with the same column rules.

Includes vitest coverage for column cap.
This commit is contained in:
Maxim Isaev
2026-05-15 02:05:34 +03:00
parent 778c9e00fd
commit 7c6d3694d4
20 changed files with 601 additions and 202 deletions
+16
View File
@@ -0,0 +1,16 @@
import { describe, expect, it } from 'vitest';
import { computeCardGridColumnCount, CARD_GRID_MAX_COLS } from './cardGridLayout';
describe('computeCardGridColumnCount', () => {
it('never exceeds CARD_GRID_MAX_COLS', () => {
expect(computeCardGridColumnCount(20_000)).toBe(CARD_GRID_MAX_COLS);
});
it('returns at least one column', () => {
expect(computeCardGridColumnCount(50)).toBe(1);
});
it('uses six columns on wide desktop widths', () => {
expect(computeCardGridColumnCount(1200)).toBe(6);
});
});