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}

src/renderer/components/virtual-table/cells/favorite-cell.tsx

@@ -6,21 +6,43 @@ import { useMutation } from '@tanstack/react-query';
 import { HTTPError } from 'ky';
 import { api } from '/@/renderer/api';
 import { RawFavoriteResponse, FavoriteArgs, LibraryItem } from '/@/renderer/api/types';
-import { useCurrentServer, useSetQueueFavorite } from '/@/renderer/store';
+import {
+  useCurrentServer,
+  useSetAlbumListItemDataById,
+  useSetQueueFavorite,
+} from '/@/renderer/store';
 
 const useCreateFavorite = () => {
   const server = useCurrentServer();
+  const setAlbumListData = useSetAlbumListItemDataById();
 
   return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
     mutationFn: (args) => api.controller.createFavorite({ ...args, server }),
+    onSuccess: (_data, variables) => {
+      for (const id of variables.query.id) {
+        // Set the userFavorite property to true for the album in the album list data store
+        if (variables.query.type === LibraryItem.ALBUM) {
+          setAlbumListData(id, { userFavorite: true });
+        }
+      }
+    },
   });
 };
 
 const useDeleteFavorite = () => {
   const server = useCurrentServer();
+  const setAlbumListData = useSetAlbumListItemDataById();
 
   return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
     mutationFn: (args) => api.controller.deleteFavorite({ ...args, server }),
+    onSuccess: (_data, variables) => {
+      for (const id of variables.query.id) {
+        // Set the userFavorite property to false for the album in the album list data store
+        if (variables.query.type === LibraryItem.ALBUM) {
+          setAlbumListData(id, { userFavorite: false });
+        }
+      }
+    },
   });
 };
 

src/renderer/features/albums/components/album-list-content.tsx

@@ -41,6 +41,7 @@ import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
 import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
 import { generatePath, useNavigate } from 'react-router';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 
 interface AlbumListContentProps {
   gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -265,6 +266,32 @@ export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListCont
     navigate(generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: e.data.id }));
   };
 
+  const createFavoriteMutation = useCreateFavorite();
+  const deleteFavoriteMutation = useDeleteFavorite();
+
+  const handleFavorite = (options: {
+    id: string[];
+    isFavorite: boolean;
+    itemType: LibraryItem;
+  }) => {
+    const { id, itemType, isFavorite } = options;
+    if (isFavorite) {
+      deleteFavoriteMutation.mutate({
+        query: {
+          id,
+          type: itemType,
+        },
+      });
+    } else {
+      createFavoriteMutation.mutate({
+        query: {
+          id,
+          type: itemType,
+        },
+      });
+    }
+  };
+
   return (
     <>
       <VirtualGridAutoSizerContainer>
@@ -278,6 +305,7 @@ export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListCont
                   cardRows={cardRows}
                   display={page.display || ListDisplayType.CARD}
                   fetchFn={fetch}
+                  handleFavorite={handleFavorite}
                   handlePlayQueueAdd={handlePlayQueueAdd}
                   height={height}
                   initialScrollOffset={page?.grid.scrollOffset || 0}

src/renderer/features/shared/mutations/create-favorite-mutation.ts

@@ -1,15 +1,24 @@
 import { useMutation } from '@tanstack/react-query';
 import { HTTPError } from 'ky';
 import { api } from '/@/renderer/api';
-import { FavoriteArgs, RawFavoriteResponse } from '/@/renderer/api/types';
+import { FavoriteArgs, LibraryItem, RawFavoriteResponse } from '/@/renderer/api/types';
 import { MutationOptions } from '/@/renderer/lib/react-query';
-import { useCurrentServer } from '/@/renderer/store';
+import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
 
 export const useCreateFavorite = (options?: MutationOptions) => {
   const server = useCurrentServer();
+  const setAlbumListData = useSetAlbumListItemDataById();
 
   return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
     mutationFn: (args) => api.controller.createFavorite({ ...args, server }),
+    onSuccess: (_data, variables) => {
+      for (const id of variables.query.id) {
+        // Set the userFavorite property to true for the album in the album list data store
+        if (variables.query.type === LibraryItem.ALBUM) {
+          setAlbumListData(id, { userFavorite: true });
+        }
+      }
+    },
     ...options,
   });
 };

src/renderer/features/shared/mutations/delete-favorite-mutation.ts

@@ -1,15 +1,24 @@
 import { useMutation } from '@tanstack/react-query';
 import { HTTPError } from 'ky';
 import { api } from '/@/renderer/api';
-import { FavoriteArgs, RawFavoriteResponse } from '/@/renderer/api/types';
+import { FavoriteArgs, LibraryItem, RawFavoriteResponse } from '/@/renderer/api/types';
 import { MutationOptions } from '/@/renderer/lib/react-query';
-import { useCurrentServer } from '/@/renderer/store';
+import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
 
 export const useDeleteFavorite = (options?: MutationOptions) => {
   const server = useCurrentServer();
+  const setAlbumListData = useSetAlbumListItemDataById();
 
   return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
     mutationFn: (args) => api.controller.deleteFavorite({ ...args, server }),
+    onSuccess: (_data, variables) => {
+      for (const id of variables.query.id) {
+        // Set the userFavorite property to false for the album in the album list data store
+        if (variables.query.type === LibraryItem.ALBUM) {
+          setAlbumListData(id, { userFavorite: false });
+        }
+      }
+    },
     ...options,
   });
 };

src/renderer/store/album-list-data.store.ts

@@ -9,6 +9,7 @@ export interface AlbumListDataState {
 export interface AlbumListDataSlice extends AlbumListDataState {
   actions: {
     setItemData: (data: any[]) => void;
+    setItemDataById: (id: string, data: any) => void;
   };
 }
 
@@ -21,6 +22,13 @@ export const useAlbumListDataStore = create<AlbumListDataSlice>()(
             state.itemData = data;
           });
         },
+        setItemDataById: (id, data) => {
+          set((state) => {
+            const index = state.itemData.findIndex((item) => item?.id === id);
+            if (index === -1) return;
+            state.itemData[index] = { ...state.itemData[index], ...data };
+          });
+        },
       },
       itemData: [],
     })),
@@ -34,3 +42,6 @@ export const useAlbumListItemData = () =>
   useAlbumListDataStore((state) => {
     return { itemData: state.itemData, setItemData: state.actions.setItemData };
   });
+
+export const useSetAlbumListItemDataById = () =>
+  useAlbumListDataStore((state) => state.actions.setItemDataById);

src/renderer/types.ts

@@ -162,6 +162,7 @@ export type GridCardData = {
   cardRows: CardRow<Album | AlbumArtist | Artist>[];
   columnCount: number;
   display: ListDisplayType;
+  handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
   handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
   itemCount: number;
   itemData: any[];