Added favorite button in Performer grid view (#3369)

Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

ui/v2.5/src/components/Performers/PerformerCard.tsx

@@ -18,6 +18,8 @@ import { PopoverCountButton } from "../Shared/PopoverCountButton";
 import GenderIcon from "./GenderIcon";
 import { faHeart, faTag } from "@fortawesome/free-solid-svg-icons";
 import { RatingBanner } from "../Shared/RatingBanner";
+import cx from "classnames";
+import { usePerformerUpdate } from "src/core/StashService";
 
 export interface IPerformerCardExtraCriteria {
   scenes: Criterion<CriterionValue>[];
@@ -60,17 +62,39 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
     { age, years_old: ageL10String }
   );
 
-  function maybeRenderFavoriteIcon() {
-    if (performer.favorite === false) {
-      return;
-    }
+  const [updatePerformer] = usePerformerUpdate();
+
+  function renderFavoriteIcon() {
     return (
-      <div className="favorite">
-        <Icon icon={faHeart} size="2x" />
-      </div>
+      <Link to="" onClick={(e) => e.preventDefault()}>
+        <Button
+          className={cx(
+            "minimal",
+            "mousetrap",
+            "favorite-button",
+            performer.favorite ? "favorite" : "not-favorite"
+          )}
+          onClick={() => onToggleFavorite!(!performer.favorite)}
+        >
+          <Icon icon={faHeart} size="2x" />
+        </Button>
+      </Link>
     );
   }
 
+  function onToggleFavorite(v: boolean) {
+    if (performer.id) {
+      updatePerformer({
+        variables: {
+          input: {
+            id: performer.id,
+            favorite: v,
+          },
+        },
+      });
+    }
+  }
+
   function maybeRenderScenesPopoverButton() {
     if (!performer.scene_count) return;
 
@@ -213,7 +237,8 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
             alt={performer.name ?? ""}
             src={performer.image_path ?? ""}
           />
-          {maybeRenderFavoriteIcon()}
+
+          {renderFavoriteIcon()}
           {maybeRenderRatingBanner()}
           {maybeRenderFlag()}
         </>