Add disambiguation to performer link and performer select values (#4541)

* Add disambiguation to PerformerLink * Add disambiguation to performer select values
stashapp · Feb 12, 2024 · 235c9c9 · 235c9c9
1 parent a4bbdcf
commit 235c9c9
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 };