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}