feat(settings): library card grid max columns in Appearance (4–12, default 6)

Persist libraryGridMaxColumns, wire useCardGridMetrics and card grid layout,
add i18n and settings search index; document performance hint in copy.
This commit is contained in:
Maxim Isaev
2026-05-15 02:19:20 +03:00
parent 7c6d3694d4
commit 0f5ece6d03
21 changed files with 169 additions and 16 deletions
+15 -3
View File
@@ -3,15 +3,27 @@
* and row-height estimates derived from measured cell width (TanStack virtual rows).
*/
import {
DEFAULT_LIBRARY_GRID_MAX_COLUMNS,
LIBRARY_GRID_MAX_COLUMNS_MAX,
LIBRARY_GRID_MAX_COLUMNS_MIN,
} from '../store/authStoreDefaults';
export const CARD_GRID_GAP_PX = 16;
export const CARD_GRID_MIN_TILE_PX = 140;
export const CARD_GRID_MAX_COLS = 6;
export function computeCardGridColumnCount(containerWidthPx: number): number {
/** @deprecated use `DEFAULT_LIBRARY_GRID_MAX_COLUMNS` from `authStoreDefaults` */
export const CARD_GRID_MAX_COLS = DEFAULT_LIBRARY_GRID_MAX_COLUMNS;
export function computeCardGridColumnCount(containerWidthPx: number, maxColumns: number): number {
const cap = Math.max(
LIBRARY_GRID_MAX_COLUMNS_MIN,
Math.min(LIBRARY_GRID_MAX_COLUMNS_MAX, Math.round(maxColumns)),
);
const raw = Math.floor(
(containerWidthPx + CARD_GRID_GAP_PX) / (CARD_GRID_MIN_TILE_PX + CARD_GRID_GAP_PX),
);
return Math.min(CARD_GRID_MAX_COLS, Math.max(1, raw));
return Math.min(cap, Math.max(1, raw));
}
export function computeCellWidthPx(containerWidthPx: number, columnCount: number): number {