Show stash-ids with their endpoint (#4216)

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

@@ -0,0 +1,34 @@
+import React, { useMemo } from "react";
+import { StashId } from "src/core/generated-graphql";
+import { ConfigurationContext } from "src/hooks/Config";
+import { getStashboxBase } from "src/utils/stashbox";
+
+type LinkType = "performers" | "scenes" | "studios";
+
+export const StashIDPill: React.FC<{
+  stashID: StashId;
+  linkType: LinkType;
+}> = ({ stashID, linkType }) => {
+  const { configuration } = React.useContext(ConfigurationContext);
+
+  const { endpoint, stash_id } = stashID;
+
+  const endpointName = useMemo(() => {
+    return (
+      configuration?.general.stashBoxes.find((sb) => sb.endpoint === endpoint)
+        ?.name ?? endpoint
+    );
+  }, [configuration?.general.stashBoxes, endpoint]);
+
+  const base = getStashboxBase(endpoint);
+  const link = `${base}${linkType}/${stash_id}`;
+
+  return (
+    <span className="stash-id-pill" data-endpoint={endpointName}>
+      <span>{endpointName}</span>
+      <a href={link} target="_blank" rel="noopener noreferrer">
+        {stash_id}
+      </a>
+    </span>
+  );
+};

ui/v2.5/src/components/Shared/styles.scss

@@ -480,3 +480,32 @@ div.react-datepicker {
 .string-list-row .input-group {
   flex-wrap: nowrap;
 }
+
+.stash-id-pill {
+  display: inline-block;
+  font-size: 90%;
+  font-weight: 700;
+  line-height: 1;
+  padding-bottom: 0.25em;
+  padding-top: 0.25em;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+
+  span,
+  a {
+    display: inline-block;
+    padding: 0.25em 0.6em;
+  }
+
+  span {
+    background-color: $primary;
+    border-radius: 0.25rem 0 0 0.25rem;
+    min-width: 5em;
+  }
+
+  a {
+    background-color: $secondary;
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+}