improve compact size item card

src/renderer/components/item-card/item-card.module.css

@@ -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);

src/renderer/components/item-card/item-card.tsx

@@ -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',
+                            }}
                         />
                     );
                 }

src/renderer/components/item-list/helpers/use-grid-rows.ts

@@ -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 getDefaultRowsForItemType = (
-    const allRows = getDataRows();
+    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]);
 };

src/renderer/features/albums/components/album-list-infinite-grid.tsx

@@ -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

src/renderer/features/albums/components/album-list-paginated-grid.tsx

@@ -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

src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx

@@ -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

src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx

@@ -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

src/renderer/features/artists/components/artist-list-infinite-grid.tsx

@@ -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

src/renderer/features/artists/components/artist-list-paginated-grid.tsx

@@ -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

src/renderer/features/genres/components/genre-list-infinite-grid.tsx

@@ -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

src/renderer/features/genres/components/genre-list-paginated-grid.tsx

@@ -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

src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx

@@ -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

src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx

@@ -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

src/renderer/features/songs/components/song-list-infinite-grid.tsx

@@ -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

src/renderer/features/songs/components/song-list-paginated-grid.tsx

@@ -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