add configuration to revert to single-select ItemGrid behavior

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",

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"
                         />
                         <div className={styles.playButtonOverlay}>

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;

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<ItemCardProps, 'type'> {
     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) ? (
                     <Link
                         className={imageContainerClassName}
                         draggable={false}
@@ -442,6 +449,7 @@ const DefaultItemCard = ({
     data,
     enableExpansion,
     enableNavigation,
+    imageAsLink,
     internalState,
     isRound,
     itemType,
@@ -583,7 +591,7 @@ const DefaultItemCard = ({
                     [styles.selected]: isSelected,
                 })}
             >
-                {enableNavigation && navigationPath && !internalState ? (
+                {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
                     <Link
                         className={imageContainerClassName}
                         draggable={false}
@@ -660,6 +668,7 @@ const PosterItemCard = ({
     enableDrag,
     enableExpansion,
     enableNavigation,
+    imageAsLink,
     internalState,
     isRound,
     itemType,
@@ -869,7 +878,7 @@ const PosterItemCard = ({
                 })}
                 ref={ref}
             >
-                {enableNavigation && navigationPath && !internalState ? (
+                {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
                     <Link
                         className={imageContainerClassName}
                         draggable={false}

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

@@ -56,6 +56,7 @@ interface VirtualizedGridListProps {
     dataVersion?: number;
     enableDrag?: boolean;
     enableExpansion: boolean;
+    enableMultiSelect: boolean;
     enableSelection: boolean;
     gap: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
     getItem?: (index: number) => 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<GridItemProps>) => {
     const { index, style } = props;
-    const { columns, controls, enableDrag, gap, getItem, itemCount, itemType, rows, size } =
+    const {
-        props.data;
+        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<GridItemProps>) => {
                         data={item}
                         enableDrag={enableDrag}
                         enableExpansion={props.data.enableExpansion}
+                        imageAsLink={!enableMultiSelect}
                         internalState={props.data.internalState}
                         itemType={itemType}
                         rows={rows}

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 (
         <ItemGridList
             data={loadedItems}
             dataVersion={dataVersion}
             enableExpansion
+            enableMultiSelect={enableGridMultiSelect}
             gap={gap}
             getItem={getItem}
             getItemIndex={getItemIndex}

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

@@ -9,6 +9,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
 import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
 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,
@@ -56,6 +57,7 @@ export const AlbumListPaginatedGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemListWithPagination
@@ -69,6 +71,7 @@ export const AlbumListPaginatedGrid = ({
                 currentPage={currentPage}
                 data={data || []}
                 enableExpansion
+                enableMultiSelect={enableGridMultiSelect}
                 gap={gap}
                 initialTop={{
                     to: scrollOffset ?? 0,

src/renderer/features/artists/components/album-artist-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 { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
+import { useGeneralSettings } from '/@/renderer/store';
 import {
     AlbumArtistListQuery,
     AlbumArtistListSort,
@@ -53,11 +54,13 @@ export const AlbumArtistListInfiniteGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemGridList
             data={loadedItems}
             dataVersion={dataVersion}
+            enableMultiSelect={enableGridMultiSelect}
             gap={gap}
             getItem={getItem}
             getItemIndex={getItemIndex}

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

@@ -9,6 +9,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
 import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
 import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
+import { useGeneralSettings } from '/@/renderer/store';
 import {
     AlbumArtistListQuery,
     AlbumArtistListSort,
@@ -57,6 +58,7 @@ export const AlbumArtistListPaginatedGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemListWithPagination
@@ -69,6 +71,7 @@ export const AlbumArtistListPaginatedGrid = ({
             <ItemGridList
                 currentPage={currentPage}
                 data={data || []}
+                enableMultiSelect={enableGridMultiSelect}
                 gap={gap}
                 initialTop={{
                     to: scrollOffset ?? 0,

src/renderer/features/artists/components/artist-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 { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
+import { useGeneralSettings } from '/@/renderer/store';
 import {
     ArtistListQuery,
     ArtistListSort,
@@ -52,11 +53,13 @@ export const ArtistListInfiniteGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemGridList
             data={loadedItems}
             dataVersion={dataVersion}
+            enableMultiSelect={enableGridMultiSelect}
             gap={gap}
             getItem={getItem}
             getItemIndex={getItemIndex}

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

@@ -9,6 +9,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
 import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
 import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
+import { useGeneralSettings } from '/@/renderer/store';
 import {
     ArtistListQuery,
     ArtistListSort,
@@ -56,6 +57,7 @@ export const ArtistListPaginatedGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemListWithPagination
@@ -68,6 +70,7 @@ export const ArtistListPaginatedGrid = ({
             <ItemGridList
                 currentPage={currentPage}
                 data={data || []}
+                enableMultiSelect={enableGridMultiSelect}
                 gap={gap}
                 initialTop={{
                     to: scrollOffset ?? 0,

src/renderer/features/genres/components/genre-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 { genresQueries } from '/@/renderer/features/genres/api/genres-api';
+import { useGeneralSettings } from '/@/renderer/store';
 import {
     GenreListQuery,
     GenreListSort,
@@ -52,11 +53,13 @@ export const GenreListInfiniteGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemGridList
             data={loadedItems}
             dataVersion={dataVersion}
+            enableMultiSelect={enableGridMultiSelect}
             gap={gap}
             getItem={getItem}
             getItemIndex={getItemIndex}

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

@@ -9,6 +9,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
 import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
 import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
 import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
+import { useGeneralSettings } from '/@/renderer/store';
 import {
     GenreListQuery,
     GenreListSort,
@@ -56,6 +57,7 @@ export const GenreListPaginatedGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemListWithPagination
@@ -68,6 +70,7 @@ export const GenreListPaginatedGrid = ({
             <ItemGridList
                 currentPage={currentPage}
                 data={data || []}
+                enableMultiSelect={enableGridMultiSelect}
                 gap={gap}
                 initialTop={{
                     to: scrollOffset ?? 0,

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

@@ -9,7 +9,7 @@ import { useListContext } from '/@/renderer/context/list-context';
 import { usePlaylistSongListFilters } from '/@/renderer/features/playlists/hooks/use-playlist-song-list-filters';
 import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
 import { searchLibraryItems } from '/@/renderer/features/shared/utils';
-import { useListSettings } from '/@/renderer/store';
+import { useGeneralSettings, useListSettings } from '/@/renderer/store';
 import { sortSongList } from '/@/shared/api/utils';
 import {
     LibraryItem,
@@ -56,10 +56,12 @@ export const PlaylistDetailSongListGrid = forwardRef<any, PlaylistDetailSongList
             ItemListKey.PLAYLIST_SONG,
             gridProps.size,
         );
+        const { enableGridMultiSelect } = useGeneralSettings();
 
         return (
             <ItemGridList
                 data={songData}
+                enableMultiSelect={enableGridMultiSelect}
                 gap={gridProps.itemGap}
                 initialTop={{
                     to: scrollOffset ?? 0,

src/renderer/features/playlists/components/playlist-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 { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
+import { useGeneralSettings } from '/@/renderer/store';
 import {
     LibraryItem,
     PlaylistListQuery,
@@ -52,11 +53,13 @@ export const PlaylistListInfiniteGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemGridList
             data={loadedItems}
             dataVersion={dataVersion}
+            enableMultiSelect={enableGridMultiSelect}
             gap={gap}
             getItem={getItem}
             getItemIndex={getItemIndex}

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

@@ -9,6 +9,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
 import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
 import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
 import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
+import { useGeneralSettings } from '/@/renderer/store';
 import {
     LibraryItem,
     PlaylistListQuery,
@@ -56,6 +57,7 @@ export const PlaylistListPaginatedGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemListWithPagination
@@ -68,6 +70,7 @@ export const PlaylistListPaginatedGrid = ({
             <ItemGridList
                 currentPage={currentPage}
                 data={data || []}
+                enableMultiSelect={enableGridMultiSelect}
                 gap={gap}
                 initialTop={{
                     to: scrollOffset ?? 0,

src/renderer/features/settings/components/general/application-settings.tsx

@@ -621,6 +621,28 @@ export const ApplicationSettings = memo(() => {
             isHidden: false,
             title: t('setting.showRatings', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <Switch
+                    aria-label={t('setting.enableGridMultiSelect', { postProcess: 'sentenceCase' })}
+                    defaultChecked={settings.enableGridMultiSelect}
+                    onChange={(e) =>
+                        setSettings({
+                            general: {
+                                ...settings,
+                                enableGridMultiSelect: e.currentTarget.checked,
+                            },
+                        })
+                    }
+                />
+            ),
+            description: t('setting.enableGridMultiSelect', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.enableGridMultiSelect', { postProcess: 'sentenceCase' }),
+        },
         {
             control: (
                 <Switch

src/renderer/features/songs/components/song-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 { songsQueries } from '/@/renderer/features/songs/api/songs-api';
+import { useGeneralSettings } from '/@/renderer/store';
 import { LibraryItem, SongListQuery, SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -47,11 +48,13 @@ export const SongListInfiniteGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemGridList
             data={loadedItems}
             dataVersion={dataVersion}
+            enableMultiSelect={enableGridMultiSelect}
             gap={gap}
             getItem={getItem}
             getItemIndex={getItemIndex}

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

@@ -8,6 +8,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
 import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
 import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
 import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
+import { useGeneralSettings } from '/@/renderer/store';
 import { LibraryItem, SongListQuery, SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -45,6 +46,7 @@ export const SongListPaginatedGrid = ({
     });
 
     const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG, size);
+    const { enableGridMultiSelect } = useGeneralSettings();
 
     return (
         <ItemListWithPagination
@@ -57,6 +59,7 @@ export const SongListPaginatedGrid = ({
             <ItemGridList
                 currentPage={currentPage}
                 data={data || []}
+                enableMultiSelect={enableGridMultiSelect}
                 gap={gap}
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.SONG}

src/renderer/store/settings.store.ts

@@ -409,6 +409,7 @@ export const GeneralSettingsSchema = z.object({
     buttonSize: z.number(),
     combinedLyricsAndVisualizer: z.boolean(),
     disabledContextMenu: z.record(z.string(), z.boolean()),
+    enableGridMultiSelect: z.boolean(),
     externalLinks: z.boolean(),
     followCurrentSong: z.boolean(),
     followSystemTheme: z.boolean(),
@@ -965,6 +966,7 @@ const initialState: SettingsState = {
         buttonSize: 15,
         combinedLyricsAndVisualizer: false,
         disabledContextMenu: {},
+        enableGridMultiSelect: false,
         externalLinks: true,
         followCurrentSong: true,
         followSystemTheme: false,