From adc094005fe0a1d08c633686c09feeea0100464b Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 30 Dec 2025 03:59:17 -0800
Subject: [PATCH] improve compact size item card

---
 .../components/item-card/item-card.module.css |  1 +
 .../components/item-card/item-card.tsx        |  8 +++++--
 .../item-list/helpers/use-grid-rows.ts        | 21 +++++++++++++------
 .../components/album-list-infinite-grid.tsx   |  2 +-
 .../components/album-list-paginated-grid.tsx  |  2 +-
 .../album-artist-list-infinite-grid.tsx       |  2 +-
 .../album-artist-list-paginated-grid.tsx      |  2 +-
 .../components/artist-list-infinite-grid.tsx  |  2 +-
 .../components/artist-list-paginated-grid.tsx |  2 +-
 .../components/genre-list-infinite-grid.tsx   |  2 +-
 .../components/genre-list-paginated-grid.tsx  |  2 +-
 .../playlist-list-infinite-grid.tsx           |  2 +-
 .../playlist-list-paginated-grid.tsx          |  2 +-
 .../components/song-list-infinite-grid.tsx    |  2 +-
 .../components/song-list-paginated-grid.tsx   |  2 +-
 15 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/renderer/components/item-card/item-card.module.css b/src/renderer/components/item-card/item-card.module.css
index 0a599c700..de8979844 100644
--- a/src/renderer/components/item-card/item-card.module.css
+++ b/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);
diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx
index 195c91897..f409aadb6 100644
--- a/src/renderer/components/item-card/item-card.tsx
+++ b/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',
+                            }}
                         />
                     );
                 }
diff --git a/src/renderer/components/item-list/helpers/use-grid-rows.ts b/src/renderer/components/item-list/helpers/use-grid-rows.ts
index 46212f73a..17af243ba 100644
--- a/src/renderer/components/item-list/helpers/use-grid-rows.ts
+++ b/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 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]);
 };
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 7265a45b5..bd8ef4d67 100644
--- a/src/renderer/features/albums/components/album-list-infinite-grid.tsx
+++ b/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
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 8cc2bc3d0..31207f8e7 100644
--- a/src/renderer/features/albums/components/album-list-paginated-grid.tsx
+++ b/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
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 38f39bc08..4601a9fa9 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
@@ -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
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 cbcfb393e..d224ee37d 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
@@ -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
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 e5767f775..81400350c 100644
--- a/src/renderer/features/artists/components/artist-list-infinite-grid.tsx
+++ b/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
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 abf588379..c8f25d639 100644
--- a/src/renderer/features/artists/components/artist-list-paginated-grid.tsx
+++ b/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
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 73f699967..5ee9877e0 100644
--- a/src/renderer/features/genres/components/genre-list-infinite-grid.tsx
+++ b/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
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 43aac9750..b7673ae3f 100644
--- a/src/renderer/features/genres/components/genre-list-paginated-grid.tsx
+++ b/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
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 9cc308636..c15856192 100644
--- a/src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx
+++ b/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
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 19c19ec89..6d718cb78 100644
--- a/src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx
+++ b/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
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 71393a41a..8efc0bc7a 100644
--- a/src/renderer/features/songs/components/song-list-infinite-grid.tsx
+++ b/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
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 ef651aa94..b2ec286b8 100644
--- a/src/renderer/features/songs/components/song-list-paginated-grid.tsx
+++ b/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