Add set performer image action to performer Images tab

ui/v2.5/src/components/Performers/PerformerDetails/PerformerImagesPanel.tsx

@@ -1,9 +1,14 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { FilteredImageList } from "src/components/Images/ImageList";
+import { IItemListOperation } from "src/components/List/FilteredListToolbar";
+import { usePerformerUpdate } from "src/core/StashService";
 import { usePerformerFilterHook } from "src/core/performers";
+import { useToast } from "src/hooks/Toast";
 import { View } from "src/components/List/views";
 import { PatchComponent } from "src/patch";
+import ImageUtils from "src/utils/image";
 
 interface IPerformerImagesPanel {
   active: boolean;
@@ -12,11 +17,63 @@ interface IPerformerImagesPanel {
 
 export const PerformerImagesPanel: React.FC<IPerformerImagesPanel> =
   PatchComponent("PerformerImagesPanel", ({ active, performer }) => {
+    const intl = useIntl();
+    const Toast = useToast();
+    const [updatePerformer] = usePerformerUpdate();
     const filterHook = usePerformerFilterHook(performer);
+
+    const extraOperations = useMemo<
+      IItemListOperation<GQL.FindImagesQueryResult>[]
+    >(
+      () => [
+        {
+          text: intl.formatMessage({
+            id: "actions.set_as_performer_image",
+          }),
+          isDisplayed: (_result, _filter, selectedIds) =>
+            selectedIds.size === 1,
+          onClick: async (result, _filter, selectedIds) => {
+            try {
+              const [selectedId] = Array.from(selectedIds);
+              const selectedImage = result.data?.findImages.images.find(
+                (image) => image.id === selectedId
+              );
+              const imagePath = selectedImage?.paths.image;
+
+              if (!imagePath) {
+                throw new Error("Selected image does not have an image path");
+              }
+
+              const imageData = await ImageUtils.imageToDataURL(imagePath);
+              await updatePerformer({
+                variables: {
+                  input: {
+                    id: performer.id,
+                    image: imageData,
+                  },
+                },
+              });
+
+              Toast.success(
+                intl.formatMessage(
+                  { id: "toast.updated_entity" },
+                  { entity: intl.formatMessage({ id: "performer" }) }
+                )
+              );
+            } catch (e) {
+              Toast.error(e);
+            }
+          },
+        },
+      ],
+      [Toast, intl, performer.id, updatePerformer]
+    );
+
     return (
       <FilteredImageList
         filterHook={filterHook}
         alterQuery={active}
+        extraOperations={extraOperations}
         view={View.PerformerImages}
       />
     );

ui/v2.5/src/locales/en-GB.json

@@ -129,6 +129,7 @@
     "selective_generate": "Selective generate",
     "selective_scan": "Selective scan",
     "set_as_default": "Set as default",
+    "set_as_performer_image": "Set as performer image",
     "set_back_image": "Back image…",
     "set_cover": "Set as Cover",
     "set_front_image": "Front image…",