vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add grid item card size presets

Browse Source
This commit is contained in:
jeffvli
2025-12-23 21:59:52 -08:00
parent cf06d69822
commit 51587fbb6b
23 changed files with 167 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-card/item-card.tsx
+50
View File
@@ -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
+30 -5
View File
@@ -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);
}, [itemsPerRow, rows?.length]);
return createThrottledSetTableMeta(itemsPerRow, rows?.length, size);
}, [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
+1
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+37
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+13
View File
@@ -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,