From 552f86586af99db129457ec4629bf8742a91a1aa Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Thu, 26 Oct 2023 15:01:49 +1100
Subject: [PATCH] Show performer image in select (#4227)

---
 graphql/documents/data/performer-slim.graphql      |  1 +
 .../src/components/Performers/PerformerSelect.tsx  | 14 +++++++++++++-
 ui/v2.5/src/components/Performers/styles.scss      | 12 ++++++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/graphql/documents/data/performer-slim.graphql b/graphql/documents/data/performer-slim.graphql
index 5fbd1a2eb..0018c9700 100644
--- a/graphql/documents/data/performer-slim.graphql
+++ b/graphql/documents/data/performer-slim.graphql
@@ -40,4 +40,5 @@ fragment SelectPerformerData on Performer {
   name
   disambiguation
   alias_list
+  image_path
 }
diff --git a/ui/v2.5/src/components/Performers/PerformerSelect.tsx b/ui/v2.5/src/components/Performers/PerformerSelect.tsx
index d37b8fe37..c4b43e265 100644
--- a/ui/v2.5/src/components/Performers/PerformerSelect.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerSelect.tsx
@@ -34,7 +34,7 @@ export type SelectObject = {
 
 export type Performer = Pick<
   GQL.Performer,
-  "id" | "name" | "alias_list" | "disambiguation"
+  "id" | "name" | "alias_list" | "disambiguation" | "image_path"
 >;
 type Option = SelectOption<Performer>;
 
@@ -86,6 +86,18 @@ export const PerformerSelect: React.FC<
       ...optionProps,
       children: (
         <span>
+          <a
+            href={`/performers/${object.id}`}
+            target="_blank"
+            rel="noreferrer"
+            className="performer-select-image-link"
+          >
+            <img
+              className="performer-select-image"
+              src={object.image_path ?? ""}
+              loading="lazy"
+            />
+          </a>
           <span>{name}</span>
           {object.disambiguation && (
             <span className="performer-disambiguation">{` (${object.disambiguation})`}</span>
diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
index 1679ac337..6ca07e5be 100644
--- a/ui/v2.5/src/components/Performers/styles.scss
+++ b/ui/v2.5/src/components/Performers/styles.scss
@@ -221,6 +221,14 @@
   }
 }
 
-.performer-select .alias {
-  font-weight: bold;
+.performer-select {
+  .alias {
+    font-weight: bold;
+  }
+
+  .performer-select-image {
+    margin-right: 0.5em;
+    max-height: 50px;
+    max-width: 50px;
+  }
 }