fix selection state on ItemGridList when single select mode

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

@@ -56,6 +56,7 @@ export interface ItemCardProps {
     data: Album | AlbumArtist | Artist | Playlist | Song | undefined;
     enableDrag?: boolean;
     enableExpansion?: boolean;
+    enableMultiSelect?: boolean;
     enableNavigation?: boolean;
     imageAsLink?: boolean;
     internalState?: ItemListStateActions;
@@ -71,6 +72,7 @@ export const ItemCard = ({
     data,
     enableDrag,
     enableExpansion,
+    enableMultiSelect,
     enableNavigation = true,
     imageAsLink,
     internalState,
@@ -92,6 +94,7 @@ export const ItemCard = ({
                     data={data}
                     enableDrag={enableDrag}
                     enableExpansion={enableExpansion}
+                    enableMultiSelect={enableMultiSelect}
                     enableNavigation={enableNavigation}
                     imageAsLink={imageAsLink}
                     imageUrl={imageUrl}
@@ -110,6 +113,7 @@ export const ItemCard = ({
                     data={data}
                     enableDrag={enableDrag}
                     enableExpansion={enableExpansion}
+                    enableMultiSelect={enableMultiSelect}
                     enableNavigation={enableNavigation}
                     imageAsLink={imageAsLink}
                     imageUrl={imageUrl}
@@ -159,6 +163,7 @@ const CompactItemCard = ({
     data,
     enableDrag,
     enableExpansion,
+    enableMultiSelect,
     enableNavigation,
     imageAsLink,
     internalState,
@@ -180,29 +185,29 @@ const CompactItemCard = ({
             return [];
         }
 
-        const draggedItems = getDraggedItems(data, internalState);
+        const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
         return draggedItems.map((item) => item.id);
-    }, [data, internalState]);
+    }, [data, internalState, enableMultiSelect]);
 
     const getItem = useCallback(() => {
         if (!data) {
             return [];
         }
 
-        const draggedItems = getDraggedItems(data, internalState);
+        const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
         return draggedItems;
-    }, [data, internalState]);
+    }, [data, internalState, enableMultiSelect]);
 
     const onDragStart = useCallback(() => {
         if (!data) {
             return;
         }
 
-        const draggedItems = getDraggedItems(data, internalState);
+        const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
         if (internalState) {
             internalState.setDragging(draggedItems);
         }
-    }, [data, internalState]);
+    }, [data, internalState, enableMultiSelect]);
 
     const onDrop = useCallback(() => {
         if (internalState) {
@@ -667,6 +672,7 @@ const PosterItemCard = ({
     data,
     enableDrag,
     enableExpansion,
+    enableMultiSelect,
     enableNavigation,
     imageAsLink,
     internalState,
@@ -688,29 +694,29 @@ const PosterItemCard = ({
             return [];
         }
 
-        const draggedItems = getDraggedItems(data, internalState);
+        const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
         return draggedItems.map((item) => item.id);
-    }, [data, internalState]);
+    }, [data, internalState, enableMultiSelect]);
 
     const getItem = useCallback(() => {
         if (!data) {
             return [];
         }
 
-        const draggedItems = getDraggedItems(data, internalState);
+        const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
         return draggedItems;
-    }, [data, internalState]);
+    }, [data, internalState, enableMultiSelect]);
 
     const onDragStart = useCallback(() => {
         if (!data) {
             return;
         }
 
-        const draggedItems = getDraggedItems(data, internalState);
+        const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
         if (internalState) {
             internalState.setDragging(draggedItems);
         }
-    }, [data, internalState]);
+    }, [data, internalState, enableMultiSelect]);
 
     const onDrop = useCallback(() => {
         if (internalState) {

src/renderer/components/item-list/helpers/item-list-controls.ts

@@ -12,6 +12,7 @@ import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
 import { Play, TableColumn } from '/@/shared/types/types';
 
 interface UseDefaultItemListControlsArgs {
+    enableMultiSelect?: boolean;
     onColumnReordered?: (
         columnIdFrom: TableColumn,
         columnIdTo: TableColumn,
@@ -42,7 +43,7 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
         navigateRef.current = navigate;
     }, [navigate]);
 
-    const { onColumnReordered, onColumnResized, overrides } = args || {};
+    const { enableMultiSelect = true, onColumnReordered, onColumnResized, overrides } = args || {};
 
     const controls: ItemControls = useMemo(() => {
         return {
@@ -333,6 +334,13 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
 
                 if (!rowId) return;
 
+                if (!enableMultiSelect) {
+                    return ContextMenuController.call({
+                        cmd: { items: [item] as any[], type: actualItemType as any },
+                        event,
+                    });
+                }
+
                 // If none selected, select this item
                 if (internalState.getSelected().length === 0) {
                     internalState.setSelected([item]);
@@ -407,7 +415,15 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
 
             ...overrides,
         };
-    }, [overrides, onColumnReordered, onColumnResized, player, setFavorite, setRating]);
+    }, [
+        enableMultiSelect,
+        overrides,
+        onColumnReordered,
+        onColumnResized,
+        player,
+        setFavorite,
+        setRating,
+    ]);
 
     return controls;
 };

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

@@ -511,7 +511,10 @@ const BaseItemGridList = ({
         });
     }, [containerWidth, resolvedItemCount, throttledSetTableMeta, containerRef]);
 
-    const controls = useDefaultItemListControls({ overrides: overrideControls });
+    const controls = useDefaultItemListControls({
+        enableMultiSelect,
+        overrides: overrideControls,
+    });
 
     const scrollToIndex = useCallback(
         (
@@ -875,6 +878,7 @@ const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
                         data={item}
                         enableDrag={enableDrag}
                         enableExpansion={props.data.enableExpansion}
+                        enableMultiSelect={enableMultiSelect}
                         imageAsLink={!enableMultiSelect}
                         internalState={props.data.internalState}
                         itemType={itemType}