tag sort_name frontend

adds `data-sort-name` attribute to tag links prioritizes sort_name value but will default to tag name if not present in the same way that COALESCE will prioritize the same values in the same way

ui/v2.5/graphql/data/tag-slim.graphql

@@ -1,6 +1,7 @@
 fragment SlimTagData on Tag {
   id
   name
+  sort_name
   aliases
   image_path
   parent_count

ui/v2.5/graphql/data/tag.graphql

@@ -1,6 +1,7 @@
 fragment TagData on Tag {
   id
   name
+  sort_name
   description
   aliases
   ignore_auto_tag
@@ -33,6 +34,7 @@ fragment TagData on Tag {
 fragment SelectTagData on Tag {
   id
   name
+  sort_name
   favorite
   description
   aliases
@@ -41,5 +43,6 @@ fragment SelectTagData on Tag {
   parents {
     id
     name
+    sort_name
   }
 }

ui/v2.5/src/components/Shared/TagLink.tsx

@@ -19,6 +19,25 @@ type SceneMarkerFragment = Pick<GQL.SceneMarker, "id" | "title" | "seconds"> & {
   primary_tag: Pick<GQL.Tag, "id" | "name">;
 };
 
+interface ISortNameLinkProps{
+  link: string
+  className?: string;
+  sortName?: string;
+}
+
+const SortNameLinkComponent: React.FC<ISortNameLinkProps> = ({
+  link,
+  sortName,
+  className,
+  children,
+}) => {
+  return (
+    <Badge data-name={className} data-sort-name={sortName} className={cx("tag-item", className)} variant="secondary">
+      <Link to={link}>{children}</Link>
+    </Badge>
+  );
+};
+
 interface ICommonLinkProps {
   link: string;
   className?: string;
@@ -263,7 +282,7 @@ export const TagLink: React.FC<ITagLinkProps> = ({
   }, [hierarchyTooltipID]);
 
   return (
-    <CommonLinkComponent link={link} className={className}>
+    <SortNameLinkComponent sortName={tag.sort_name || title} link={link} className={className}>
       <TagPopover id={tag.id ?? ""} placement={hoverPlacement}>
         {title}
         {showHierarchyIcon && (
@@ -275,6 +294,6 @@ export const TagLink: React.FC<ITagLinkProps> = ({
           </OverlayTrigger>
         )}
       </TagPopover>
-    </CommonLinkComponent>
+    </SortNameLinkComponent>
   );
 };

ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx

@@ -46,6 +46,7 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
 
   const schema = yup.object({
     name: yup.string().required(),
+    sort_name: yup.string().ensure(),
     aliases: yupUniqueAliases(intl, "name"),
     description: yup.string().ensure(),
     parent_ids: yup.array(yup.string().required()).defined(),
@@ -56,6 +57,7 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
 
   const initialValues = {
     name: tag?.name ?? "",
+    sort_name: tag?.sort_name ?? "",
     aliases: tag?.aliases ?? [],
     description: tag?.description ?? "",
     parent_ids: (tag?.parents ?? []).map((t) => t.id),
@@ -203,6 +205,7 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
 
       <Form noValidate onSubmit={formik.handleSubmit} id="tag-edit">
         {renderInputField("name")}
+        {renderInputField("sort_name", "text")}
         {renderStringListField("aliases")}
         {renderInputField("description", "textarea")}
         {renderParentTagsField()}

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

@@ -1158,6 +1158,7 @@
   "megabits_per_second": "{value} mbps",
   "metadata": "Metadata",
   "name": "Name",
+  "sort_name": "Sort Name",
   "new": "New",
   "none": "None",
   "o_count": "O Count",

ui/v2.5/src/utils/navigation.ts

@@ -87,6 +87,7 @@ const makePerformerImagesUrl = (
 export interface INamedObject {
   id: string;
   name?: string;
+  sort_name?: string;
 }
 
 const makePerformerGalleriesUrl = (