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 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]);
 };