From 78aebd7c5d7cab85ac8d81cbdda08f6e590a2f20 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Wed, 28 Jan 2026 20:14:05 -0800 Subject: [PATCH] add configuration to revert to single-select ItemGrid behavior --- src/i18n/locales/en.json | 2 ++ .../single-feature-carousel.tsx | 2 +- .../components/item-card/item-card.module.css | 1 + .../components/item-card/item-card.tsx | 15 +++++++++--- .../item-grid-list/item-grid-list.tsx | 23 +++++++++++++++++-- .../components/album-list-infinite-grid.tsx | 3 +++ .../components/album-list-paginated-grid.tsx | 3 +++ .../album-artist-list-infinite-grid.tsx | 3 +++ .../album-artist-list-paginated-grid.tsx | 3 +++ .../components/artist-list-infinite-grid.tsx | 3 +++ .../components/artist-list-paginated-grid.tsx | 3 +++ .../components/genre-list-infinite-grid.tsx | 3 +++ .../components/genre-list-paginated-grid.tsx | 3 +++ .../playlist-detail-song-list-grid.tsx | 4 +++- .../playlist-list-infinite-grid.tsx | 3 +++ .../playlist-list-paginated-grid.tsx | 3 +++ .../general/application-settings.tsx | 22 ++++++++++++++++++ .../components/song-list-infinite-grid.tsx | 3 +++ .../components/song-list-paginated-grid.tsx | 3 +++ src/renderer/store/settings.store.ts | 2 ++ 20 files changed, 100 insertions(+), 7 deletions(-) diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 7ceafa5a8..e46f22ac8 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -922,6 +922,8 @@ "showLyricsInSidebar": "show lyrics in player sidebar", "showRatings_description": "controls if the star ratings feature shows up in the interface", "showRatings": "show star ratings", + "enableGridMultiSelect": "enable grid multi-select", + "enableGridMultiSelect_description": "when enabled, allows selecting multiple items in grid views. when disabled, clicking grid item images will navigate to the item page", "showVisualizerInSidebar_description": "a panel will be added to the player sidebar that displays the visualizer", "showVisualizerInSidebar": "show visualizer in player sidebar", "combinedLyricsAndVisualizer_description": "combine lyrics and visualizer into the same panel", diff --git a/src/renderer/components/feature-carousel/single-feature-carousel.tsx b/src/renderer/components/feature-carousel/single-feature-carousel.tsx index 8aa533b22..baa692645 100644 --- a/src/renderer/components/feature-carousel/single-feature-carousel.tsx +++ b/src/renderer/components/feature-carousel/single-feature-carousel.tsx @@ -118,9 +118,9 @@ const CarouselItem = ({ album }: CarouselItemProps) => { containerClassName={styles.albumImageContainer} enableDebounce={false} enableViewport={false} + fetchPriority="high" id={album.imageId} itemType={LibraryItem.ALBUM} - fetchPriority="high" type="itemCard" />
diff --git a/src/renderer/components/item-card/item-card.module.css b/src/renderer/components/item-card/item-card.module.css index c38bfbc70..c3fbe9ebd 100644 --- a/src/renderer/components/item-card/item-card.module.css +++ b/src/renderer/components/item-card/item-card.module.css @@ -35,6 +35,7 @@ left: 0; width: 100%; height: 100%; + pointer-events: none; content: ''; background-color: rgb(0 0 0); opacity: 0; diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx index 8752588a4..98c3a1885 100644 --- a/src/renderer/components/item-card/item-card.tsx +++ b/src/renderer/components/item-card/item-card.tsx @@ -57,6 +57,7 @@ export interface ItemCardProps { enableDrag?: boolean; enableExpansion?: boolean; enableNavigation?: boolean; + imageAsLink?: boolean; internalState?: ItemListStateActions; isRound?: boolean; itemType: LibraryItem; @@ -71,6 +72,7 @@ export const ItemCard = ({ enableDrag, enableExpansion, enableNavigation = true, + imageAsLink, internalState, isRound, itemType, @@ -91,6 +93,7 @@ export const ItemCard = ({ enableDrag={enableDrag} enableExpansion={enableExpansion} enableNavigation={enableNavigation} + imageAsLink={imageAsLink} imageUrl={imageUrl} internalState={internalState} isRound={isRound} @@ -108,6 +111,7 @@ export const ItemCard = ({ enableDrag={enableDrag} enableExpansion={enableExpansion} enableNavigation={enableNavigation} + imageAsLink={imageAsLink} imageUrl={imageUrl} internalState={internalState} isRound={isRound} @@ -126,6 +130,7 @@ export const ItemCard = ({ enableDrag={enableDrag} enableExpansion={enableExpansion} enableNavigation={enableNavigation} + imageAsLink={imageAsLink} imageUrl={imageUrl} internalState={internalState} isRound={isRound} @@ -142,6 +147,7 @@ export interface ItemCardDerivativeProps extends Omit { controls?: ItemControls; enableExpansion?: boolean; enableNavigation?: boolean; + imageAsLink?: boolean; imageUrl: string | undefined; internalState?: ItemListStateActions; rows: DataRow[]; @@ -154,6 +160,7 @@ const CompactItemCard = ({ enableDrag, enableExpansion, enableNavigation, + imageAsLink, internalState, isRound, itemType, @@ -381,7 +388,7 @@ const CompactItemCard = ({ })} ref={ref} > - {enableNavigation && navigationPath && !internalState ? ( + {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? ( - {enableNavigation && navigationPath && !internalState ? ( + {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? ( - {enableNavigation && navigationPath && !internalState ? ( + {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? ( ItemCardProps['data']; @@ -86,6 +87,7 @@ const VirtualizedGridList = React.memo( dataVersion, enableDrag, enableExpansion, + enableMultiSelect, enableSelection, gap, getItem, @@ -116,6 +118,7 @@ const VirtualizedGridList = React.memo( dataVersion, enableDrag, enableExpansion, + enableMultiSelect, enableSelection, gap, getItem, @@ -135,6 +138,7 @@ const VirtualizedGridList = React.memo( dataVersion, enableDrag, enableExpansion, + enableMultiSelect, enableSelection, gap, internalState, @@ -313,6 +317,7 @@ export interface GridItemProps { dataVersion?: number; enableDrag?: boolean; enableExpansion?: boolean; + enableMultiSelect: boolean; enableSelection?: boolean; gap: 'lg' | 'md' | 'sm' | 'xl' | 'xs'; getItem?: (index: number) => ItemCardProps['data']; @@ -335,6 +340,7 @@ export interface ItemGridListProps { enableDrag?: boolean; enableEntranceAnimation?: boolean; enableExpansion?: boolean; + enableMultiSelect?: boolean; enableSelection?: boolean; enableSelectionDialog?: boolean; gap?: 'lg' | 'md' | 'sm' | 'xl' | 'xs'; @@ -364,6 +370,7 @@ const BaseItemGridList = ({ enableDrag = true, enableEntranceAnimation = true, enableExpansion = false, + enableMultiSelect = false, enableSelection = true, gap = 'sm', getItem, @@ -798,6 +805,7 @@ const BaseItemGridList = ({ dataVersion={dataVersion} enableDrag={enableDrag} enableExpansion={enableExpansion} + enableMultiSelect={enableMultiSelect} enableSelection={enableSelection} gap={gap} getItem={resolvedGetItem} @@ -828,8 +836,18 @@ const BaseItemGridList = ({ const ListComponent = memo((props: ListChildComponentProps) => { const { index, style } = props; - const { columns, controls, enableDrag, gap, getItem, itemCount, itemType, rows, size } = - props.data; + const { + columns, + controls, + enableDrag, + enableMultiSelect, + gap, + getItem, + itemCount, + itemType, + rows, + size, + } = props.data; const items: ReactNode[] = []; const startIndex = index * columns; @@ -857,6 +875,7 @@ const ListComponent = memo((props: ListChildComponentProps) => { data={item} enableDrag={enableDrag} enableExpansion={props.data.enableExpansion} + imageAsLink={!enableMultiSelect} internalState={props.data.internalState} itemType={itemType} rows={rows} 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 ae65ce588..308e2e72c 100644 --- a/src/renderer/features/albums/components/album-list-infinite-grid.tsx +++ b/src/renderer/features/albums/components/album-list-infinite-grid.tsx @@ -7,6 +7,7 @@ import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpe import { ItemGridList } from '/@/renderer/components/item-list/item-grid-list/item-grid-list'; import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types'; import { albumQueries } from '/@/renderer/features/albums/api/album-api'; +import { useGeneralSettings } from '/@/renderer/store'; import { AlbumListQuery, AlbumListSort, @@ -52,12 +53,14 @@ export const AlbumListInfiniteGrid = ({ }); const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM, size); + const { enableGridMultiSelect } = useGeneralSettings(); return ( { isHidden: false, title: t('setting.showRatings', { postProcess: 'sentenceCase' }), }, + { + control: ( + + setSettings({ + general: { + ...settings, + enableGridMultiSelect: e.currentTarget.checked, + }, + }) + } + /> + ), + description: t('setting.enableGridMultiSelect', { + context: 'description', + postProcess: 'sentenceCase', + }), + isHidden: false, + title: t('setting.enableGridMultiSelect', { postProcess: 'sentenceCase' }), + }, { control: (