improve compact size item card

This commit is contained in:
jeffvli
2025-12-30 03:59:17 -08:00
parent 5b7557bd45
commit adc094005f
15 changed files with 34 additions and 20 deletions
@@ -177,6 +177,7 @@
position: absolute;
bottom: 0;
left: 0;
gap: 0;
width: 100%;
padding: var(--theme-spacing-xs);
background-color: alpha(var(--theme-colors-background), 0.5);
@@ -896,7 +896,7 @@ const PosterItemCard = ({
);
};
export const getDataRows = (): DataRow[] => {
export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[] => {
return [
{
format: (data) => {
@@ -959,7 +959,11 @@ export const getDataRows = (): DataRow[] => {
artistName={data.albumArtistName}
artists={data.albumArtists}
linkProps={{ fw: 400, isMuted: true }}
rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
rootTextProps={{
fw: 400,
isMuted: type === 'compact' ? false : true,
size: 'sm',
}}
/>
);
}
@@ -6,8 +6,11 @@ import { LibraryItem } from '/@/shared/types/domain-types';
import { TableColumn } from '/@/shared/types/types';
import { ItemListKey } from '/@/shared/types/types';
const getDefaultRowsForItemType = (itemType: LibraryItem): DataRow[] => {
const allRows = getDataRows();
const getDefaultRowsForItemType = (
itemType: LibraryItem,
type?: 'compact' | 'default' | 'poster',
): DataRow[] => {
const allRows = getDataRows(type);
const rowMap = new Map(allRows.map((row) => [row.id, row]));
switch (itemType) {
@@ -80,16 +83,22 @@ const getRowIdFromTableColumn = (tableColumn: TableColumn): null | string => {
return columnToRowIdMap[tableColumn] || null;
};
export const useGridRows = (itemType: LibraryItem, listKey?: ItemListKey) => {
export const useGridRows = (
itemType: LibraryItem,
listKey?: ItemListKey,
size?: 'compact' | 'default' | 'large',
) => {
const gridRowsConfig = useSettingsStore((state) =>
listKey ? state.lists[listKey]?.grid?.rows : undefined,
);
const type: 'compact' | 'default' | 'poster' = size === 'compact' ? 'compact' : 'poster';
return useMemo(() => {
const allRows = getDataRows();
const allRows = getDataRows(type);
if (!listKey || !gridRowsConfig || gridRowsConfig.length === 0) {
const defaultRows = getDefaultRowsForItemType(itemType);
const defaultRows = getDefaultRowsForItemType(itemType, type);
return defaultRows.length > 0 ? defaultRows : allRows;
}
@@ -110,5 +119,5 @@ export const useGridRows = (itemType: LibraryItem, listKey?: ItemListKey) => {
.filter((row): row is NonNullable<typeof row> => row !== null && row !== undefined);
return configuredRows.length > 0 ? configuredRows : allRows;
}, [itemType, listKey, gridRowsConfig]);
}, [itemType, listKey, gridRowsConfig, type]);
};
@@ -50,7 +50,7 @@ export const AlbumListInfiniteGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM, size);
return (
<ItemGridList
@@ -55,7 +55,7 @@ export const AlbumListPaginatedGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM, size);
return (
<ItemListWithPagination
@@ -51,7 +51,7 @@ export const AlbumArtistListInfiniteGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST, size);
return (
<ItemGridList
@@ -56,7 +56,7 @@ export const AlbumArtistListPaginatedGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST, size);
return (
<ItemListWithPagination
@@ -50,7 +50,7 @@ export const ArtistListInfiniteGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST, size);
return (
<ItemGridList
@@ -55,7 +55,7 @@ export const ArtistListPaginatedGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST, size);
return (
<ItemListWithPagination
@@ -50,7 +50,7 @@ export const GenreListInfiniteGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE, size);
return (
<ItemGridList
@@ -55,7 +55,7 @@ export const GenreListPaginatedGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE, size);
return (
<ItemListWithPagination
@@ -50,7 +50,7 @@ export const PlaylistListInfiniteGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST, size);
return (
<ItemGridList
@@ -55,7 +55,7 @@ export const PlaylistListPaginatedGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST, size);
return (
<ItemListWithPagination
@@ -45,7 +45,7 @@ export const SongListInfiniteGrid = ({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG, size);
return (
<ItemGridList
@@ -44,7 +44,7 @@ export const SongListPaginatedGrid = ({
serverId,
});
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG, size);
return (
<ItemListWithPagination