From 51587fbb6bbcbbf418675f9785a23a12ee2eb5db Mon Sep 17 00:00:00 2001 From: jeffvli Date: Tue, 23 Dec 2025 21:59:52 -0800 Subject: [PATCH] add grid item card size presets --- .../components/item-card/item-card.tsx | 50 +++++++++++++++++++ .../item-grid-list/item-grid-list.tsx | 35 +++++++++++-- src/renderer/components/item-list/types.ts | 1 + .../albums/components/album-list-content.tsx | 2 + .../components/album-list-infinite-grid.tsx | 2 + .../components/album-list-paginated-grid.tsx | 2 + .../components/album-artist-list-content.tsx | 2 + .../album-artist-list-infinite-grid.tsx | 2 + .../album-artist-list-paginated-grid.tsx | 2 + .../components/artist-list-content.tsx | 2 + .../components/artist-list-infinite-grid.tsx | 2 + .../components/artist-list-paginated-grid.tsx | 2 + .../genres/components/genre-list-content.tsx | 2 + .../components/genre-list-infinite-grid.tsx | 2 + .../components/genre-list-paginated-grid.tsx | 2 + .../components/playlist-list-content.tsx | 2 + .../playlist-list-infinite-grid.tsx | 2 + .../playlist-list-paginated-grid.tsx | 2 + .../shared/components/grid-config.tsx | 37 ++++++++++++++ .../songs/components/song-list-content.tsx | 2 + .../components/song-list-infinite-grid.tsx | 2 + .../components/song-list-paginated-grid.tsx | 2 + src/renderer/store/settings.store.ts | 13 +++++ 23 files changed, 167 insertions(+), 5 deletions(-) diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx index 74c5e97cd..89a4b1943 100644 --- a/src/renderer/components/item-card/item-card.tsx +++ b/src/renderer/components/item-card/item-card.tsx @@ -135,6 +135,7 @@ export interface ItemCardDerivativeProps extends Omit { const CompactItemCard = ({ controls, data, + enableDrag, enableExpansion, enableNavigation, internalState, @@ -150,6 +151,53 @@ const CompactItemCard = ({ : undefined; const isSelected = useItemSelectionState(internalState, itemRowId || undefined); + const { isDragging: isDraggingLocal, ref } = useDragDrop({ + drag: { + getId: () => { + if (!data) { + return []; + } + + const draggedItems = getDraggedItems(data, internalState); + return draggedItems.map((item) => item.id); + }, + getItem: () => { + if (!data) { + return []; + } + + const draggedItems = getDraggedItems(data, internalState); + return draggedItems; + }, + itemType, + onDragStart: () => { + if (!data) { + return; + } + + const draggedItems = getDraggedItems(data, internalState); + if (internalState) { + internalState.setDragging(draggedItems); + } + }, + onDrop: () => { + if (internalState) { + internalState.setDragging([]); + } + }, + operation: + itemType === LibraryItem.QUEUE_SONG + ? [DragOperation.REORDER, DragOperation.ADD] + : [DragOperation.ADD], + target: DragTarget.ALBUM, + }, + isEnabled: !!enableDrag && !!data, + }); + + const itemId = data && internalState ? data.id : undefined; + const isDraggingState = useItemDraggingState(internalState, itemId); + const isDragging = isDraggingState || isDraggingLocal; + const handleClick = useDoubleClick({ onDoubleClick: (e: React.MouseEvent) => { if (!data || !controls || !internalState) { @@ -289,8 +337,10 @@ const CompactItemCard = ({ return (
{enableNavigation && navigationPath && !internalState ? ( ; ref: RefObject | null>; rows?: ItemCardProps['rows']; + size?: 'compact' | 'default' | 'large'; tableMetaRef: RefObject { @@ -113,6 +115,7 @@ const VirtualizedGridList = React.memo( internalState, itemType, rows, + size, tableMeta, }; }, [ @@ -126,6 +129,7 @@ const VirtualizedGridList = React.memo( gap, internalState, itemType, + size, ]); const handleOnScroll = useCallback( @@ -215,7 +219,11 @@ const VirtualizedGridList = React.memo( VirtualizedGridList.displayName = 'VirtualizedGridList'; -const createThrottledSetTableMeta = (itemsPerRow?: number, rowsCount?: number) => { +const createThrottledSetTableMeta = ( + itemsPerRow?: number, + rowsCount?: number, + size?: 'compact' | 'default' | 'large', +) => { return throttle((width: number, dataLength: number, setTableMeta: (meta: any) => void) => { const isSm = width >= 600; const isMd = width >= 768; @@ -245,10 +253,22 @@ const createThrottledSetTableMeta = (itemsPerRow?: number, rowsCount?: number) = dynamicItemsPerRow = 2; } + if (size === 'large') { + dynamicItemsPerRow = Math.round(dynamicItemsPerRow * 0.75); + if (dynamicItemsPerRow < 1) { + dynamicItemsPerRow = 1; + } + } + const setItemsPerRow = itemsPerRow || dynamicItemsPerRow; const widthPerItem = Number(width) / setItemsPerRow; - const itemHeight = widthPerItem + (rowsCount || getDataRowsCount()) * 26; + // For compact size, don't include text lines in height calculation + // CompactItemCard has a different layout that doesn't need the extra space + const itemHeight = + size === 'compact' + ? widthPerItem + : widthPerItem + (rowsCount || getDataRowsCount()) * 26; if (widthPerItem === 0) { return; @@ -273,6 +293,7 @@ export interface GridItemProps { internalState: ItemListStateActions; itemType: LibraryItem; rows?: ItemCardProps['rows']; + size?: 'compact' | 'default' | 'large'; tableMeta: null | { columnCount: number; itemHeight: number; @@ -301,6 +322,7 @@ export interface ItemGridListProps { overrideControls?: Partial; ref?: Ref; rows?: ItemCardProps['rows']; + size?: 'compact' | 'default' | 'large'; } const BaseItemGridList = ({ @@ -320,6 +342,7 @@ const BaseItemGridList = ({ overrideControls, ref, rows, + size = 'default', }: ItemGridListProps) => { const rootRef = useRef(null); const outerRef = useRef(null); @@ -410,8 +433,8 @@ const BaseItemGridList = ({ }, [osInstance]); const throttledSetTableMeta = useMemo(() => { - return createThrottledSetTableMeta(itemsPerRow, rows?.length); - }, [itemsPerRow, rows?.length]); + return createThrottledSetTableMeta(itemsPerRow, rows?.length, size); + }, [itemsPerRow, rows?.length, size]); useLayoutEffect(() => { const { current: container } = containerRef; @@ -738,6 +761,7 @@ const BaseItemGridList = ({ outerRef={outerRef} ref={listRef} rows={rows} + size={size} tableMetaRef={tableMetaRef} width={width} /> @@ -753,7 +777,7 @@ const BaseItemGridList = ({ const ListComponent = memo((props: ListChildComponentProps) => { const { index, style } = props; - const { columns, controls, data, enableDrag, gap, itemType, rows } = props.data; + const { columns, controls, data, enableDrag, gap, itemType, rows, size } = props.data; const items: ReactNode[] = []; const itemCount = data.length; @@ -784,6 +808,7 @@ const ListComponent = memo((props: ListChildComponentProps) => { internalState={props.data.internalState} itemType={itemType} rows={rows} + type={size === 'compact' ? 'compact' : 'poster'} withControls />
, diff --git a/src/renderer/components/item-list/types.ts b/src/renderer/components/item-list/types.ts index 38d4fbba7..35cc9329a 100644 --- a/src/renderer/components/item-list/types.ts +++ b/src/renderer/components/item-list/types.ts @@ -66,6 +66,7 @@ export interface ItemListComponentProps { export interface ItemListGridComponentProps extends ItemListComponentProps { gap?: 'lg' | 'md' | 'sm' | 'xl' | 'xs'; itemsPerRow?: number; + size?: 'compact' | 'default' | 'large'; } export interface ItemListHandle { diff --git a/src/renderer/features/albums/components/album-list-content.tsx b/src/renderer/features/albums/components/album-list-content.tsx index 2e06b8271..b748bca01 100644 --- a/src/renderer/features/albums/components/album-list-content.tsx +++ b/src/renderer/features/albums/components/album-list-content.tsx @@ -115,6 +115,7 @@ export const AlbumListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); } @@ -126,6 +127,7 @@ export const AlbumListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); } diff --git a/src/renderer/features/albums/components/album-list-infinite-grid.tsx b/src/renderer/features/albums/components/album-list-infinite-grid.tsx index 7acbc76e3..7265a45b5 100644 --- a/src/renderer/features/albums/components/album-list-infinite-grid.tsx +++ b/src/renderer/features/albums/components/album-list-infinite-grid.tsx @@ -27,6 +27,7 @@ export const AlbumListInfiniteGrid = ({ }, saveScrollOffset = true, serverId, + size, }: AlbumListInfiniteGridProps) => { const listCountQuery = albumQueries.listCount({ query: { ...query }, @@ -65,6 +66,7 @@ export const AlbumListInfiniteGrid = ({ onRangeChanged={onRangeChanged} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); }; diff --git a/src/renderer/features/albums/components/album-list-paginated-grid.tsx b/src/renderer/features/albums/components/album-list-paginated-grid.tsx index 9fd55e67e..8cc2bc3d0 100644 --- a/src/renderer/features/albums/components/album-list-paginated-grid.tsx +++ b/src/renderer/features/albums/components/album-list-paginated-grid.tsx @@ -29,6 +29,7 @@ export const AlbumListPaginatedGrid = ({ }, saveScrollOffset = true, serverId, + size, }: AlbumListPaginatedGridProps) => { const listCountQuery = albumQueries.listCount({ query: { ...query }, @@ -77,6 +78,7 @@ export const AlbumListPaginatedGrid = ({ itemType={LibraryItem.ALBUM} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); diff --git a/src/renderer/features/artists/components/album-artist-list-content.tsx b/src/renderer/features/artists/components/album-artist-list-content.tsx index e4d6169f2..6880e264b 100644 --- a/src/renderer/features/artists/components/album-artist-list-content.tsx +++ b/src/renderer/features/artists/components/album-artist-list-content.tsx @@ -94,6 +94,7 @@ export const AlbumArtistListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); } @@ -105,6 +106,7 @@ export const AlbumArtistListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); } diff --git a/src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx b/src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx index 724b41708..38f39bc08 100644 --- a/src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx +++ b/src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx @@ -28,6 +28,7 @@ export const AlbumArtistListInfiniteGrid = ({ }, saveScrollOffset = true, serverId, + size, }: AlbumArtistListInfiniteGridProps) => { const listCountQuery = artistsQueries.albumArtistListCount({ query: { ...query }, @@ -65,6 +66,7 @@ export const AlbumArtistListInfiniteGrid = ({ onRangeChanged={onRangeChanged} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); }; diff --git a/src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx b/src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx index b5f1ef8ec..cbcfb393e 100644 --- a/src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx +++ b/src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx @@ -30,6 +30,7 @@ export const AlbumArtistListPaginatedGrid = ({ }, saveScrollOffset = true, serverId, + size, }: AlbumArtistListPaginatedGridProps) => { const listCountQuery = artistsQueries.albumArtistListCount({ query: { ...query }, @@ -77,6 +78,7 @@ export const AlbumArtistListPaginatedGrid = ({ itemType={LibraryItem.ALBUM_ARTIST} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); diff --git a/src/renderer/features/artists/components/artist-list-content.tsx b/src/renderer/features/artists/components/artist-list-content.tsx index 4afaaa365..c7c46cfd0 100644 --- a/src/renderer/features/artists/components/artist-list-content.tsx +++ b/src/renderer/features/artists/components/artist-list-content.tsx @@ -86,6 +86,7 @@ export const ArtistListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); } @@ -97,6 +98,7 @@ export const ArtistListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); } diff --git a/src/renderer/features/artists/components/artist-list-infinite-grid.tsx b/src/renderer/features/artists/components/artist-list-infinite-grid.tsx index 991deb3e3..e5767f775 100644 --- a/src/renderer/features/artists/components/artist-list-infinite-grid.tsx +++ b/src/renderer/features/artists/components/artist-list-infinite-grid.tsx @@ -27,6 +27,7 @@ export const ArtistListInfiniteGrid = ({ }, saveScrollOffset = true, serverId, + size, }: ArtistListInfiniteGridProps) => { const listCountQuery = artistsQueries.artistListCount({ query: { ...query }, @@ -64,6 +65,7 @@ export const ArtistListInfiniteGrid = ({ onRangeChanged={onRangeChanged} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); }; diff --git a/src/renderer/features/artists/components/artist-list-paginated-grid.tsx b/src/renderer/features/artists/components/artist-list-paginated-grid.tsx index 481569257..abf588379 100644 --- a/src/renderer/features/artists/components/artist-list-paginated-grid.tsx +++ b/src/renderer/features/artists/components/artist-list-paginated-grid.tsx @@ -29,6 +29,7 @@ export const ArtistListPaginatedGrid = ({ }, saveScrollOffset = true, serverId, + size, }: ArtistListPaginatedGridProps) => { const listCountQuery = artistsQueries.artistListCount({ query: { ...query }, @@ -76,6 +77,7 @@ export const ArtistListPaginatedGrid = ({ itemType={LibraryItem.ARTIST} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); diff --git a/src/renderer/features/genres/components/genre-list-content.tsx b/src/renderer/features/genres/components/genre-list-content.tsx index f7209c0db..bb1acc710 100644 --- a/src/renderer/features/genres/components/genre-list-content.tsx +++ b/src/renderer/features/genres/components/genre-list-content.tsx @@ -82,6 +82,7 @@ export const GenreListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); } @@ -93,6 +94,7 @@ export const GenreListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); } diff --git a/src/renderer/features/genres/components/genre-list-infinite-grid.tsx b/src/renderer/features/genres/components/genre-list-infinite-grid.tsx index 2ca1a619c..73f699967 100644 --- a/src/renderer/features/genres/components/genre-list-infinite-grid.tsx +++ b/src/renderer/features/genres/components/genre-list-infinite-grid.tsx @@ -27,6 +27,7 @@ export const GenreListInfiniteGrid = ({ }, saveScrollOffset = true, serverId, + size, }: GenreListInfiniteGridProps) => { const listCountQuery = genresQueries.listCount({ query: { ...query }, @@ -64,6 +65,7 @@ export const GenreListInfiniteGrid = ({ onRangeChanged={onRangeChanged} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); }; diff --git a/src/renderer/features/genres/components/genre-list-paginated-grid.tsx b/src/renderer/features/genres/components/genre-list-paginated-grid.tsx index d819297ce..43aac9750 100644 --- a/src/renderer/features/genres/components/genre-list-paginated-grid.tsx +++ b/src/renderer/features/genres/components/genre-list-paginated-grid.tsx @@ -29,6 +29,7 @@ export const GenreListPaginatedGrid = ({ }, saveScrollOffset = true, serverId, + size, }: GenreListPaginatedGridProps) => { const listCountQuery = genresQueries.listCount({ query: { ...query }, @@ -76,6 +77,7 @@ export const GenreListPaginatedGrid = ({ itemType={LibraryItem.GENRE} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); diff --git a/src/renderer/features/playlists/components/playlist-list-content.tsx b/src/renderer/features/playlists/components/playlist-list-content.tsx index cc66d6a1a..8645735fa 100644 --- a/src/renderer/features/playlists/components/playlist-list-content.tsx +++ b/src/renderer/features/playlists/components/playlist-list-content.tsx @@ -92,6 +92,7 @@ export const PlaylistListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); } @@ -103,6 +104,7 @@ export const PlaylistListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); } diff --git a/src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx b/src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx index 9c15efa28..9cc308636 100644 --- a/src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx +++ b/src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx @@ -27,6 +27,7 @@ export const PlaylistListInfiniteGrid = ({ }, saveScrollOffset = true, serverId, + size, }: PlaylistListInfiniteGridProps) => { const listCountQuery = playlistsQueries.listCount({ query: { ...query }, @@ -64,6 +65,7 @@ export const PlaylistListInfiniteGrid = ({ onRangeChanged={onRangeChanged} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); }; diff --git a/src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx b/src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx index a41199dc9..19c19ec89 100644 --- a/src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx +++ b/src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx @@ -29,6 +29,7 @@ export const PlaylistListPaginatedGrid = ({ }, saveScrollOffset = true, serverId, + size, }: PlaylistListPaginatedGridProps) => { const listCountQuery = playlistsQueries.listCount({ query: { ...query }, @@ -76,6 +77,7 @@ export const PlaylistListPaginatedGrid = ({ itemType={LibraryItem.PLAYLIST} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); diff --git a/src/renderer/features/shared/components/grid-config.tsx b/src/renderer/features/shared/components/grid-config.tsx index 60c792bf2..8288aa537 100644 --- a/src/renderer/features/shared/components/grid-config.tsx +++ b/src/renderer/features/shared/components/grid-config.tsx @@ -223,6 +223,43 @@ export const GridConfig = ({ ), }, + { + component: ( + + setList(listKey, { + grid: { size: value as 'compact' | 'default' | 'large' }, + }) + } + size="sm" + value={grid.size || 'default'} + w="100%" + /> + ), + id: 'size', + label: t('table.config.general.size', { postProcess: 'sentenceCase' }), + size: 'sm', + }, ...(extraOptions || []), ]; diff --git a/src/renderer/features/songs/components/song-list-content.tsx b/src/renderer/features/songs/components/song-list-content.tsx index e6c732b97..04a1dc70e 100644 --- a/src/renderer/features/songs/components/song-list-content.tsx +++ b/src/renderer/features/songs/components/song-list-content.tsx @@ -112,6 +112,7 @@ export const SongListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); case ListPaginationType.PAGINATED: @@ -122,6 +123,7 @@ export const SongListView = ({ itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined} query={mergedQuery} serverId={server.id} + size={grid.size} /> ); default: diff --git a/src/renderer/features/songs/components/song-list-infinite-grid.tsx b/src/renderer/features/songs/components/song-list-infinite-grid.tsx index f6a05dd2c..71393a41a 100644 --- a/src/renderer/features/songs/components/song-list-infinite-grid.tsx +++ b/src/renderer/features/songs/components/song-list-infinite-grid.tsx @@ -22,6 +22,7 @@ export const SongListInfiniteGrid = ({ }, saveScrollOffset = true, serverId, + size, }: SongListInfiniteGridProps) => { const listCountQuery = songsQueries.listCount({ query: { ...query }, @@ -59,6 +60,7 @@ export const SongListInfiniteGrid = ({ onRangeChanged={onRangeChanged} onScrollEnd={handleOnScrollEnd} rows={rows} + size={size} /> ); }; diff --git a/src/renderer/features/songs/components/song-list-paginated-grid.tsx b/src/renderer/features/songs/components/song-list-paginated-grid.tsx index 9051fd0fe..ef651aa94 100644 --- a/src/renderer/features/songs/components/song-list-paginated-grid.tsx +++ b/src/renderer/features/songs/components/song-list-paginated-grid.tsx @@ -22,6 +22,7 @@ export const SongListPaginatedGrid = ({ sortOrder: SortOrder.ASC, }, serverId, + size, }: SongListPaginatedGridProps) => { const listCountQuery = songsQueries.listCount({ query: { ...query }, @@ -60,6 +61,7 @@ export const SongListPaginatedGrid = ({ itemsPerRow={itemsPerRow} itemType={LibraryItem.SONG} rows={rows} + size={size} /> ); diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts index 66da02d3c..0230ba392 100644 --- a/src/renderer/store/settings.store.ts +++ b/src/renderer/store/settings.store.ts @@ -152,6 +152,7 @@ const ItemListConfigSchema = z.object({ itemsPerRow: z.number(), itemsPerRowEnabled: z.boolean(), rows: z.array(ItemGridListRowConfigSchema), + size: z.enum(['compact', 'default', 'large']), }), itemsPerPage: z.number(), pagination: z.nativeEnum(ListPaginationType), @@ -539,6 +540,7 @@ export type DataGridProps = { itemsPerRow: number; itemsPerRowEnabled: boolean; rows: ItemGridListRowConfig[]; + size: 'compact' | 'default' | 'large'; }; export type DataTableProps = z.infer; @@ -823,6 +825,7 @@ const initialState: SettingsState = { itemsPerRow: 6, itemsPerRowEnabled: false, rows: [], + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.INFINITE, @@ -860,6 +863,7 @@ const initialState: SettingsState = { itemsPerRow: 6, itemsPerRowEnabled: false, rows: [], + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.INFINITE, @@ -908,6 +912,7 @@ const initialState: SettingsState = { TableColumn.YEAR, ], }), + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.INFINITE, @@ -945,6 +950,7 @@ const initialState: SettingsState = { TableColumn.SONG_COUNT, ], }), + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.INFINITE, @@ -989,6 +995,7 @@ const initialState: SettingsState = { TableColumn.SONG_COUNT, ], }), + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.INFINITE, @@ -1040,6 +1047,7 @@ const initialState: SettingsState = { TableColumn.SONG_COUNT, ], }), + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.INFINITE, @@ -1072,6 +1080,7 @@ const initialState: SettingsState = { enabledColumns: [TableColumn.TITLE], pickColumns: [TableColumn.TITLE, TableColumn.SONG_COUNT], }), + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.INFINITE, @@ -1101,6 +1110,7 @@ const initialState: SettingsState = { itemsPerRow: 6, itemsPerRowEnabled: false, rows: [], + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.INFINITE, @@ -1128,6 +1138,7 @@ const initialState: SettingsState = { itemsPerRow: 6, itemsPerRowEnabled: false, rows: [], + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.INFINITE, @@ -1173,6 +1184,7 @@ const initialState: SettingsState = { TableColumn.TRACK_NUMBER, ], }), + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.PAGINATED, @@ -1200,6 +1212,7 @@ const initialState: SettingsState = { itemsPerRow: 6, itemsPerRowEnabled: false, rows: [], + size: 'default', }, itemsPerPage: 100, pagination: ListPaginationType.INFINITE,