Add favorite handler to grid cards

src/renderer/components/virtual-grid/grid-card/default-card.tsx

@@ -101,6 +101,7 @@ interface BaseGridCardProps {
   columnIndex: number;
   controls: {
     cardRows: CardRow<Album | AlbumArtist | Artist>[];
+    handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
     handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
     itemType: LibraryItem;
     playButtonBehavior: Play;
@@ -179,6 +180,7 @@ export const DefaultCard = ({
             )}
             <ControlsContainer>
               <GridCardControls
+                handleFavorite={controls.handleFavorite}
                 handlePlayQueueAdd={handlePlayQueueAdd}
                 itemData={data}
                 itemType={itemType}

src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx

@@ -118,7 +118,9 @@ export const GridCardControls = ({
   itemData,
   itemType,
   handlePlayQueueAdd,
+  handleFavorite,
 }: {
+  handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
   handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
   itemData: any;
   itemType: LibraryItem;
@@ -138,6 +140,17 @@ export const GridCardControls = ({
     });
   };
 
+  const handleFavorites = async (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    handleFavorite?.({
+      id: [itemData.id],
+      isFavorite: itemData.userFavorite,
+      itemType,
+    });
+  };
+
   return (
     <GridCardControlsContainer>
       {/* <TopControls /> */}
@@ -148,13 +161,13 @@ export const GridCardControls = ({
         </PlayButton>
         <Group spacing="xs">
           <SecondaryButton
-            disabled
             p={5}
             sx={{ svg: { fill: 'white !important' } }}
             variant="subtle"
+            onClick={handleFavorites}
           >
             <FavoriteWrapper isFavorite={itemData?.isFavorite}>
-              {itemData?.isFavorite ? (
+              {itemData?.userFavorite ? (
                 <RiHeartFill size={20} />
               ) : (
                 <RiHeartLine

src/renderer/components/virtual-grid/grid-card/index.tsx

@@ -18,6 +18,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
     itemType,
     playButtonBehavior,
     handlePlayQueueAdd,
+    handleFavorite,
     route,
     display,
   } = data as GridCardData;
@@ -35,6 +36,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
         columnIndex={i}
         controls={{
           cardRows,
+          handleFavorite,
           handlePlayQueueAdd,
           itemType,
           playButtonBehavior,

src/renderer/components/virtual-grid/grid-card/poster-card.tsx

@@ -105,6 +105,7 @@ interface BaseGridCardProps {
   columnIndex: number;
   controls: {
     cardRows: CardRow<Album | AlbumArtist | Artist>[];
+    handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
     handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
     itemType: LibraryItem;
     playButtonBehavior: Play;
@@ -173,6 +174,7 @@ export const PosterCard = ({
               )}
               <ControlsContainer>
                 <GridCardControls
+                  handleFavorite={controls.handleFavorite}
                   handlePlayQueueAdd={controls.handlePlayQueueAdd}
                   itemData={data}
                   itemType={controls.itemType}

src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx

@@ -21,10 +21,12 @@ const createItemData = memoize(
     itemWidth,
     route,
     handlePlayQueueAdd,
+    handleFavorite,
   ) => ({
     cardRows,
     columnCount,
     display,
+    handleFavorite,
     handlePlayQueueAdd,
     itemCount,
     itemData,
@@ -50,6 +52,7 @@ export const VirtualGridWrapper = ({
   columnCount,
   rowCount,
   initialScrollOffset,
+  handleFavorite,
   handlePlayQueueAdd,
   itemData,
   route,
@@ -59,6 +62,7 @@ export const VirtualGridWrapper = ({
   cardRows: CardRow<Album | AlbumArtist | Artist>[];
   columnCount: number;
   display: ListDisplayType;
+  handleFavorite?: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
   handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
   itemData: any[];
   itemGap: number;
@@ -81,6 +85,7 @@ export const VirtualGridWrapper = ({
     itemWidth,
     route,
     handlePlayQueueAdd,
+    handleFavorite,
   );
 
   const memoizedOnScroll = createScrollHandler(onScroll);

src/renderer/components/virtual-grid/virtual-infinite-grid.tsx

@@ -17,6 +17,7 @@ interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSi
   cardRows: CardRow<any>[];
   display?: ListDisplayType;
   fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
+  handleFavorite?: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
   handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
   itemData: any[];
   itemGap: number;
@@ -54,6 +55,7 @@ export const VirtualInfiniteGrid = forwardRef(
       fetchFn,
       loading,
       initialScrollOffset,
+      handleFavorite,
       height,
       width,
     }: VirtualGridProps,
@@ -146,6 +148,7 @@ export const VirtualInfiniteGrid = forwardRef(
               cardRows={cardRows}
               columnCount={columnCount}
               display={display || ListDisplayType.CARD}
+              handleFavorite={handleFavorite}
               handlePlayQueueAdd={handlePlayQueueAdd}
               height={height}
               initialScrollOffset={initialScrollOffset}