add grid item card size presets

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

@@ -135,6 +135,7 @@ export interface ItemCardDerivativeProps extends Omit<ItemCardProps, 'type'> {
 const CompactItemCard = ({
     controls,
     data,
+    enableDrag,
     enableExpansion,
     enableNavigation,
     internalState,
@@ -150,6 +151,53 @@ const CompactItemCard = ({
             : undefined;
     const isSelected = useItemSelectionState(internalState, itemRowId || undefined);
 
+    const { isDragging: isDraggingLocal, ref } = useDragDrop<HTMLDivElement>({
+        drag: {
+            getId: () => {
+                if (!data) {
+                    return [];
+                }
+
+                const draggedItems = getDraggedItems(data, internalState);
+                return draggedItems.map((item) => item.id);
+            },
+            getItem: () => {
+                if (!data) {
+                    return [];
+                }
+
+                const draggedItems = getDraggedItems(data, internalState);
+                return draggedItems;
+            },
+            itemType,
+            onDragStart: () => {
+                if (!data) {
+                    return;
+                }
+
+                const draggedItems = getDraggedItems(data, internalState);
+                if (internalState) {
+                    internalState.setDragging(draggedItems);
+                }
+            },
+            onDrop: () => {
+                if (internalState) {
+                    internalState.setDragging([]);
+                }
+            },
+            operation:
+                itemType === LibraryItem.QUEUE_SONG
+                    ? [DragOperation.REORDER, DragOperation.ADD]
+                    : [DragOperation.ADD],
+            target: DragTarget.ALBUM,
+        },
+        isEnabled: !!enableDrag && !!data,
+    });
+
+    const itemId = data && internalState ? data.id : undefined;
+    const isDraggingState = useItemDraggingState(internalState, itemId);
+    const isDragging = isDraggingState || isDraggingLocal;
+
     const handleClick = useDoubleClick({
         onDoubleClick: (e: React.MouseEvent<HTMLDivElement>) => {
             if (!data || !controls || !internalState) {
@@ -289,8 +337,10 @@ const CompactItemCard = ({
         return (
             <div
                 className={clsx(styles.container, styles.compact, {
+                    [styles.dragging]: isDragging,
                     [styles.selected]: isSelected,
                 })}
+                ref={ref}
             >
                 {enableNavigation && navigationPath && !internalState ? (
                     <Link

src/renderer/components/item-list/item-grid-list/item-grid-list.tsx

@@ -68,6 +68,7 @@ interface VirtualizedGridListProps {
     outerRef: RefObject<any>;
     ref: RefObject<FixedSizeList<GridItemProps> | null>;
     rows?: ItemCardProps['rows'];
+    size?: 'compact' | 'default' | 'large';
     tableMetaRef: RefObject<null | {
         columnCount: number;
         itemHeight: number;
@@ -95,6 +96,7 @@ const VirtualizedGridList = React.memo(
         outerRef,
         ref,
         rows,
+        size,
         tableMetaRef,
         width,
     }: VirtualizedGridListProps) => {
@@ -113,6 +115,7 @@ const VirtualizedGridList = React.memo(
                 internalState,
                 itemType,
                 rows,
+                size,
                 tableMeta,
             };
         }, [
@@ -126,6 +129,7 @@ const VirtualizedGridList = React.memo(
             gap,
             internalState,
             itemType,
+            size,
         ]);
 
         const handleOnScroll = useCallback(
@@ -215,7 +219,11 @@ const VirtualizedGridList = React.memo(
 
 VirtualizedGridList.displayName = 'VirtualizedGridList';
 
-const createThrottledSetTableMeta = (itemsPerRow?: number, rowsCount?: number) => {
+const createThrottledSetTableMeta = (
+    itemsPerRow?: number,
+    rowsCount?: number,
+    size?: 'compact' | 'default' | 'large',
+) => {
     return throttle((width: number, dataLength: number, setTableMeta: (meta: any) => void) => {
         const isSm = width >= 600;
         const isMd = width >= 768;
@@ -245,10 +253,22 @@ const createThrottledSetTableMeta = (itemsPerRow?: number, rowsCount?: number) =
             dynamicItemsPerRow = 2;
         }
 
+        if (size === 'large') {
+            dynamicItemsPerRow = Math.round(dynamicItemsPerRow * 0.75);
+            if (dynamicItemsPerRow < 1) {
+                dynamicItemsPerRow = 1;
+            }
+        }
+
         const setItemsPerRow = itemsPerRow || dynamicItemsPerRow;
 
         const widthPerItem = Number(width) / setItemsPerRow;
-        const itemHeight = widthPerItem + (rowsCount || getDataRowsCount()) * 26;
+        // For compact size, don't include text lines in height calculation
+        // CompactItemCard has a different layout that doesn't need the extra space
+        const itemHeight =
+            size === 'compact'
+                ? widthPerItem
+                : widthPerItem + (rowsCount || getDataRowsCount()) * 26;
 
         if (widthPerItem === 0) {
             return;
@@ -273,6 +293,7 @@ export interface GridItemProps {
     internalState: ItemListStateActions;
     itemType: LibraryItem;
     rows?: ItemCardProps['rows'];
+    size?: 'compact' | 'default' | 'large';
     tableMeta: null | {
         columnCount: number;
         itemHeight: number;
@@ -301,6 +322,7 @@ export interface ItemGridListProps {
     overrideControls?: Partial<ItemControls>;
     ref?: Ref<ItemListHandle>;
     rows?: ItemCardProps['rows'];
+    size?: 'compact' | 'default' | 'large';
 }
 
 const BaseItemGridList = ({
@@ -320,6 +342,7 @@ const BaseItemGridList = ({
     overrideControls,
     ref,
     rows,
+    size = 'default',
 }: ItemGridListProps) => {
     const rootRef = useRef(null);
     const outerRef = useRef(null);
@@ -410,8 +433,8 @@ const BaseItemGridList = ({
     }, [osInstance]);
 
     const throttledSetTableMeta = useMemo(() => {
-        return createThrottledSetTableMeta(itemsPerRow, rows?.length);
+        return createThrottledSetTableMeta(itemsPerRow, rows?.length, size);
-    }, [itemsPerRow, rows?.length]);
+    }, [itemsPerRow, rows?.length, size]);
 
     useLayoutEffect(() => {
         const { current: container } = containerRef;
@@ -738,6 +761,7 @@ const BaseItemGridList = ({
                         outerRef={outerRef}
                         ref={listRef}
                         rows={rows}
+                        size={size}
                         tableMetaRef={tableMetaRef}
                         width={width}
                     />
@@ -753,7 +777,7 @@ const BaseItemGridList = ({
 
 const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
     const { index, style } = props;
-    const { columns, controls, data, enableDrag, gap, itemType, rows } = props.data;
+    const { columns, controls, data, enableDrag, gap, itemType, rows, size } = props.data;
 
     const items: ReactNode[] = [];
     const itemCount = data.length;
@@ -784,6 +808,7 @@ const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
                         internalState={props.data.internalState}
                         itemType={itemType}
                         rows={rows}
+                        type={size === 'compact' ? 'compact' : 'poster'}
                         withControls
                     />
                 </div>,

src/renderer/components/item-list/types.ts

@@ -66,6 +66,7 @@ export interface ItemListComponentProps<TQuery> {
 export interface ItemListGridComponentProps<TQuery> extends ItemListComponentProps<TQuery> {
     gap?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
     itemsPerRow?: number;
+    size?: 'compact' | 'default' | 'large';
 }
 
 export interface ItemListHandle {

src/renderer/features/albums/components/album-list-content.tsx

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

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

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

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

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

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

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

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

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

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

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

src/renderer/features/artists/components/artist-list-content.tsx

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

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

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

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

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

src/renderer/features/genres/components/genre-list-content.tsx

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

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

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

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

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

src/renderer/features/playlists/components/playlist-list-content.tsx

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

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

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

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

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

src/renderer/features/shared/components/grid-config.tsx

@@ -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 || []),
         ];

src/renderer/features/songs/components/song-list-content.tsx

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

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

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

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

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

src/renderer/store/settings.store.ts

@@ -152,6 +152,7 @@ const ItemListConfigSchema = z.object({
         itemsPerRow: z.number(),
         itemsPerRowEnabled: z.boolean(),
         rows: z.array(ItemGridListRowConfigSchema),
+        size: z.enum(['compact', 'default', 'large']),
     }),
     itemsPerPage: z.number(),
     pagination: z.nativeEnum(ListPaginationType),
@@ -539,6 +540,7 @@ export type DataGridProps = {
     itemsPerRow: number;
     itemsPerRowEnabled: boolean;
     rows: ItemGridListRowConfig[];
+    size: 'compact' | 'default' | 'large';
 };
 
 export type DataTableProps = z.infer<typeof ItemTableListPropsSchema>;
@@ -823,6 +825,7 @@ const initialState: SettingsState = {
                 itemsPerRow: 6,
                 itemsPerRowEnabled: false,
                 rows: [],
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.INFINITE,
@@ -860,6 +863,7 @@ const initialState: SettingsState = {
                 itemsPerRow: 6,
                 itemsPerRowEnabled: false,
                 rows: [],
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.INFINITE,
@@ -908,6 +912,7 @@ const initialState: SettingsState = {
                         TableColumn.YEAR,
                     ],
                 }),
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.INFINITE,
@@ -945,6 +950,7 @@ const initialState: SettingsState = {
                         TableColumn.SONG_COUNT,
                     ],
                 }),
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.INFINITE,
@@ -989,6 +995,7 @@ const initialState: SettingsState = {
                         TableColumn.SONG_COUNT,
                     ],
                 }),
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.INFINITE,
@@ -1040,6 +1047,7 @@ const initialState: SettingsState = {
                         TableColumn.SONG_COUNT,
                     ],
                 }),
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.INFINITE,
@@ -1072,6 +1080,7 @@ const initialState: SettingsState = {
                     enabledColumns: [TableColumn.TITLE],
                     pickColumns: [TableColumn.TITLE, TableColumn.SONG_COUNT],
                 }),
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.INFINITE,
@@ -1101,6 +1110,7 @@ const initialState: SettingsState = {
                 itemsPerRow: 6,
                 itemsPerRowEnabled: false,
                 rows: [],
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.INFINITE,
@@ -1128,6 +1138,7 @@ const initialState: SettingsState = {
                 itemsPerRow: 6,
                 itemsPerRowEnabled: false,
                 rows: [],
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.INFINITE,
@@ -1173,6 +1184,7 @@ const initialState: SettingsState = {
                         TableColumn.TRACK_NUMBER,
                     ],
                 }),
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.PAGINATED,
@@ -1200,6 +1212,7 @@ const initialState: SettingsState = {
                 itemsPerRow: 6,
                 itemsPerRowEnabled: false,
                 rows: [],
+                size: 'default',
             },
             itemsPerPage: 100,
             pagination: ListPaginationType.INFINITE,