Add favoriting from table rows

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

@@ -2,15 +2,90 @@ import type { ICellRendererParams } from '@ag-grid-community/core';
 import { RiHeartFill, RiHeartLine } from 'react-icons/ri';
 import { Button } from '/@/renderer/components/button';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
+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';
+
+const useCreateFavorite = () => {
+  const server = useCurrentServer();
+
+  return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
+    mutationFn: (args) => api.controller.createFavorite({ ...args, server }),
+  });
+};
+
+const useDeleteFavorite = () => {
+  const server = useCurrentServer();
+
+  return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
+    mutationFn: (args) => api.controller.deleteFavorite({ ...args, server }),
+  });
+};
+
+export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
+  const createMutation = useCreateFavorite();
+  const deleteMutation = useDeleteFavorite();
+
+  // Since the queue is using client-side state, we need to update it manually
+  const setFavorite = useSetQueueFavorite();
+
+  const handleToggleFavorite = () => {
+    const newFavoriteValue = !value;
+
+    if (newFavoriteValue) {
+      createMutation.mutate(
+        {
+          query: {
+            id: [data.id],
+            type: data.itemType,
+          },
+        },
+        {
+          onSuccess: () => {
+            if (data.itemType === LibraryItem.SONG) {
+              setFavorite([data.id], newFavoriteValue);
+            }
+
+            node.setData({ ...data, userFavorite: newFavoriteValue });
+          },
+        },
+      );
+    } else {
+      deleteMutation.mutate(
+        {
+          query: {
+            id: [data.id],
+            type: data.itemType,
+          },
+        },
+        {
+          onSuccess: () => {
+            if (data.itemType === LibraryItem.SONG) {
+              setFavorite([data.id], newFavoriteValue);
+            }
+
+            node.setData({ ...data, userFavorite: newFavoriteValue });
+          },
+        },
+      );
+    }
+  };
 
-export const FavoriteCell = ({ value }: ICellRendererParams) => {
   return (
     <CellContainer position="center">
       <Button
         compact
+        sx={{
+          svg: {
+            fill: 'var(--primary-color)',
+          },
+        }}
         variant="subtle"
+        onClick={handleToggleFavorite}
       >
-        {!value ? <RiHeartLine /> : <RiHeartFill />}
+        {!value ? <RiHeartLine /> : <RiHeartFill fill="var(--primary-color)" />}
       </Button>
     </CellContainer>
   );

src/renderer/components/virtual-table/table-config-dropdown.tsx

@@ -28,9 +28,9 @@ export const SONG_TABLE_COLUMNS = [
   { label: 'Date Added', value: TableColumn.DATE_ADDED },
   { label: 'Path', value: TableColumn.PATH },
   { label: 'Plays', value: TableColumn.PLAY_COUNT },
+  { label: 'Size', value: TableColumn.SIZE },
   { label: 'Favorite', value: TableColumn.USER_FAVORITE },
   { label: 'Rating', value: TableColumn.USER_RATING },
-  { label: 'Size', value: TableColumn.SIZE },
   // { label: 'Skip', value: TableColumn.SKIP },
 ];
 
@@ -47,6 +47,8 @@ export const ALBUM_TABLE_COLUMNS = [
   { label: 'Last Played', value: TableColumn.LAST_PLAYED },
   { label: 'Date Added', value: TableColumn.DATE_ADDED },
   { label: 'Plays', value: TableColumn.PLAY_COUNT },
+  { label: 'Favorite', value: TableColumn.USER_FAVORITE },
+  { label: 'Rating', value: TableColumn.USER_RATING },
 ];
 
 export const ALBUMARTIST_TABLE_COLUMNS = [
@@ -60,6 +62,8 @@ export const ALBUMARTIST_TABLE_COLUMNS = [
   { label: 'Plays', value: TableColumn.PLAY_COUNT },
   { label: 'Album Count', value: TableColumn.ALBUM_COUNT },
   { label: 'Song Count', value: TableColumn.SONG_COUNT },
+  { label: 'Favorite', value: TableColumn.USER_FAVORITE },
+  { label: 'Rating', value: TableColumn.USER_RATING },
 ];
 
 export const PLAYLIST_TABLE_COLUMNS = [