From 235c9c90c23be829902c31eeb5a85ab6c0dca331 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:03:45 +1100
Subject: [PATCH] Add disambiguation to performer link and performer select
 values (#4541)

* Add disambiguation to PerformerLink
* Add disambiguation to performer select values
---
 ui/v2.5/graphql/data/scene-slim.graphql                  | 1 +
 ui/v2.5/src/components/Performers/PerformerSelect.tsx    | 9 ++++++++-
 ui/v2.5/src/components/Performers/styles.scss            | 1 +
 ui/v2.5/src/components/Scenes/styles.scss                | 4 ++++
 ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx | 5 ++++-
 ui/v2.5/src/components/Shared/TagLink.tsx                | 7 +++++--
 6 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/ui/v2.5/graphql/data/scene-slim.graphql b/ui/v2.5/graphql/data/scene-slim.graphql
index 09db76bb7..c24eb9752 100644
--- a/ui/v2.5/graphql/data/scene-slim.graphql
+++ b/ui/v2.5/graphql/data/scene-slim.graphql
@@ -75,6 +75,7 @@ fragment SlimSceneData on Scene {
   performers {
     id
     name
+    disambiguation
     gender
     favorite
     image_path
diff --git a/ui/v2.5/src/components/Performers/PerformerSelect.tsx b/ui/v2.5/src/components/Performers/PerformerSelect.tsx
index f42d22e18..588687bf0 100644
--- a/ui/v2.5/src/components/Performers/PerformerSelect.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerSelect.tsx
@@ -125,7 +125,14 @@ export const PerformerSelect: React.FC<
 
     thisOptionProps = {
       ...optionProps,
-      children: object.name,
+      children: (
+        <>
+          <span>{object.name}</span>
+          {object.disambiguation && (
+            <span className="performer-disambiguation">{` (${object.disambiguation})`}</span>
+          )}
+        </>
+      ),
     };
 
     return <reactSelectComponents.MultiValueLabel {...thisOptionProps} />;
diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
index 55b11e077..bee52636a 100644
--- a/ui/v2.5/src/components/Performers/styles.scss
+++ b/ui/v2.5/src/components/Performers/styles.scss
@@ -221,6 +221,7 @@
 
 .performer-select {
   .performer-disambiguation {
+    color: initial;
     white-space: pre;
   }
 
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index 6b08dffd0..3b65e20c4 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -29,6 +29,10 @@
   margin: 5px;
 }
 
+.performer-tag-container .performer-disambiguation {
+  color: initial;
+}
+
 .performer-tag.image,
 .movie-tag.image {
   background-position: center;
diff --git a/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx b/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx
index 0f98f732b..577faca8b 100644
--- a/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx
+++ b/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx
@@ -9,7 +9,10 @@ import { Icon } from "./Icon";
 import { PerformerLink } from "./TagLink";
 
 interface IProps {
-  performers: Partial<GQL.PerformerDataFragment>[];
+  performers: Pick<
+    GQL.Performer,
+    "id" | "name" | "image_path" | "disambiguation" | "gender"
+  >[];
 }
 
 export const PerformerPopoverButton: React.FC<IProps> = ({ performers }) => {
diff --git a/ui/v2.5/src/components/Shared/TagLink.tsx b/ui/v2.5/src/components/Shared/TagLink.tsx
index 738290cec..e97d0a957 100644
--- a/ui/v2.5/src/components/Shared/TagLink.tsx
+++ b/ui/v2.5/src/components/Shared/TagLink.tsx
@@ -37,7 +37,7 @@ const CommonLinkComponent: React.FC<ICommonLinkProps> = ({
 };
 
 interface IPerformerLinkProps {
-  performer: INamedObject;
+  performer: INamedObject & { disambiguation?: string | null };
   linkType?: "scene" | "gallery" | "image";
   className?: string;
 }
@@ -63,7 +63,10 @@ export const PerformerLink: React.FC<IPerformerLinkProps> = ({
 
   return (
     <CommonLinkComponent link={link} className={className}>
-      {title}
+      <span>{title}</span>
+      {performer.disambiguation && (
+        <span className="performer-disambiguation">{` (${performer.disambiguation})`}</span>
+      )}
     </CommonLinkComponent>
   );
 };