add grid item card size presets

This commit is contained in:
jeffvli
2025-12-23 21:59:52 -08:00
parent cf06d69822
commit 51587fbb6b
23 changed files with 167 additions and 5 deletions
@@ -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}
/>
);
}
@@ -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}
/>
);
};
@@ -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}
/>
</ItemListWithPagination>
);
@@ -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}
/>
);
}
@@ -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}
/>
);
};
@@ -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}
/>
</ItemListWithPagination>
);
@@ -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}
/>
);
}
@@ -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}
/>
);
};
@@ -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}
/>
</ItemListWithPagination>
);
@@ -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}
/>
);
}
@@ -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}
/>
);
};
@@ -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}
/>
</ItemListWithPagination>
);
@@ -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}
/>
);
}
@@ -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}
/>
);
};
@@ -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}
/>
</ItemListWithPagination>
);
@@ -223,6 +223,43 @@ export const GridConfig = ({
</Group>
),
},
{
component: (
<SegmentedControl
data={[
{
label: t('table.config.general.size_compact', {
postProcess: 'titleCase',
}),
value: 'compact',
},
{
label: t('table.config.general.size_default', {
postProcess: 'titleCase',
}),
value: 'default',
},
{
label: t('table.config.general.size_large', {
postProcess: 'titleCase',
}),
value: 'large',
},
]}
onChange={(value) =>
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 || []),
];
@@ -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:
@@ -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}
/>
);
};
@@ -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}
/>
</ItemListWithPagination>
);