add configuration to revert to single-select ItemGrid behavior

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 } =
-        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<GridItemProps>) => {
                         data={item}
                         enableDrag={enableDrag}
                         enableExpansion={props.data.enableExpansion}
+                        imageAsLink={!enableMultiSelect}
                         internalState={props.data.internalState}
                         itemType={itemType}
                         rows={rows}