Feature Request: Sort All Urls Alphabetically (#6352)

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx

@@ -31,6 +31,7 @@ import { Studio, StudioSelect } from "src/components/Studios/StudioSelect";
 import { Scene, SceneSelect } from "src/components/Scenes/SceneSelect";
 import { useTagsEdit } from "src/hooks/tagsEdit";
 import { ScraperMenu } from "src/components/Shared/ScraperMenu";
+import { sortURLs } from "src/utils/url";
 
 interface IProps {
   gallery: Partial<GQL.GalleryDataFragment>;
@@ -81,7 +82,7 @@ export const GalleryEditPanel: React.FC<IProps> = ({
   const initialValues = {
     title: gallery?.title ?? "",
     code: gallery?.code ?? "",
-    urls: gallery?.urls ?? [],
+    urls: sortURLs(gallery?.urls ?? []),
     date: gallery?.date ?? "",
     photographer: gallery?.photographer ?? "",
     studio_id: gallery?.studio?.id ?? null,

ui/v2.5/src/components/Groups/GroupDetails/GroupEditPanel.tsx

@@ -28,6 +28,7 @@ import { Studio, StudioSelect } from "src/components/Studios/StudioSelect";
 import { useTagsEdit } from "src/hooks/tagsEdit";
 import { Group } from "src/components/Groups/GroupSelect";
 import { RelatedGroupTable, IRelatedGroupEntry } from "./RelatedGroupTable";
+import { sortURLs } from "src/utils/url";
 
 interface IGroupEditPanel {
   group: Partial<GQL.GroupDataFragment>;
@@ -97,7 +98,7 @@ export const GroupEditPanel: React.FC<IGroupEditPanel> = ({
       return { group_id: m.group.id, description: m.description ?? "" };
     }),
     director: group?.director ?? "",
-    urls: group?.urls ?? [],
+    urls: sortURLs(group?.urls ?? []),
     synopsis: group?.synopsis ?? "",
   };
 

ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx

@@ -35,6 +35,7 @@ import {
 } from "src/components/Galleries/GallerySelect";
 import { useTagsEdit } from "src/hooks/tagsEdit";
 import { ScraperMenu } from "src/components/Shared/ScraperMenu";
+import { sortURLs } from "src/utils/url";
 
 interface IProps {
   image: GQL.ImageDataFragment;
@@ -91,7 +92,7 @@ export const ImageEditPanel: React.FC<IProps> = ({
   const initialValues = {
     title: image.title ?? "",
     code: image.code ?? "",
-    urls: image?.urls ?? [],
+    urls: sortURLs(image?.urls ?? []),
     date: image?.date ?? "",
     details: image.details ?? "",
     photographer: image.photographer ?? "",

ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx

@@ -48,6 +48,7 @@ import {
   yupUniqueStringList,
 } from "src/utils/yup";
 import { useTagsEdit } from "src/hooks/tagsEdit";
+import { sortURLs } from "src/utils/url";
 import { CustomFieldsInput } from "src/components/Shared/CustomFields";
 import { cloneDeep } from "@apollo/client/utilities";
 
@@ -153,7 +154,7 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
     tattoos: performer.tattoos ?? "",
     piercings: performer.piercings ?? "",
     career_length: performer.career_length ?? "",
-    urls: performer.urls ?? [],
+    urls: sortURLs(performer.urls ?? []),
     details: performer.details ?? "",
     tag_ids: (performer.tags ?? []).map((t) => t.id),
     ignore_auto_tag: performer.ignore_auto_tag ?? false,

ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx

@@ -42,6 +42,7 @@ import { Group } from "src/components/Groups/GroupSelect";
 import { useTagsEdit } from "src/hooks/tagsEdit";
 import { ScraperMenu } from "src/components/Shared/ScraperMenu";
 import StashBoxIDSearchModal from "src/components/Shared/StashBoxIDSearchModal";
+import { sortURLs } from "src/utils/url";
 
 const SceneScrapeDialog = lazyComponent(() => import("./SceneScrapeDialog"));
 const SceneQueryModal = lazyComponent(() => import("./SceneQueryModal"));
@@ -138,7 +139,7 @@ export const SceneEditPanel: React.FC<IProps> = ({
     () => ({
       title: scene.title ?? "",
       code: scene.code ?? "",
-      urls: scene.urls ?? [],
+      urls: sortURLs(scene.urls ?? []),
       date: scene.date ?? "",
       director: scene.director ?? "",
       gallery_ids: (scene.galleries ?? []).map((g) => g.id),

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

@@ -7,6 +7,7 @@ import { useMemo } from "react";
 import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import ReactDOM from "react-dom";
 import { PatchComponent } from "src/patch";
+import { sortURLs } from "src/utils/url";
 
 export const ExternalLinksButton: React.FC<{
   icon?: IconDefinition;
@@ -16,14 +17,16 @@ export const ExternalLinksButton: React.FC<{
 }> = PatchComponent(
   "ExternalLinksButton",
   ({ urls, icon = faLink, className = "", openIfSingle = false }) => {
-    if (!urls.length) {
+    const sortedUrls = useMemo(() => sortURLs(urls), [urls]);
+
+    if (!sortedUrls.length) {
       return null;
     }
 
     const Menu = () =>
       ReactDOM.createPortal(
         <Dropdown.Menu>
-          {urls.map((url) => (
+          {sortedUrls.map((url) => (
             <Dropdown.Item
               key={url}
               as={ExternalLink}

ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { TagLink } from "src/components/Shared/TagLink";
 import * as GQL from "src/core/generated-graphql";
 import { DetailItem } from "src/components/Shared/DetailItem";
 import { StashIDPill } from "src/components/Shared/StashID";
 import { Link } from "react-router-dom";
+import { sortURLs } from "src/utils/url";
 
 interface IStudioDetailsPanel {
   studio: GQL.StudioDataFragment;
@@ -46,14 +47,16 @@ export const StudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
     );
   }
 
+  const sortedURLs = useMemo(() => sortURLs(studio.urls ?? []), [studio.urls]);
+
   function renderURLs() {
-    if (!studio.urls?.length) {
+    if (!sortedURLs.length) {
       return;
     }
 
     return (
       <ul className="pl-0">
-        {studio.urls.map((url) => (
+        {sortedURLs.map((url) => (
           <li key={url}>
             <a href={url} target="_blank" rel="noreferrer">
               {url}

ui/v2.5/src/components/Studios/StudioDetails/StudioEditPanel.tsx

@@ -21,6 +21,7 @@ import { Studio, StudioSelect } from "../StudioSelect";
 import { useTagsEdit } from "src/hooks/tagsEdit";
 import { Icon } from "src/components/Shared/Icon";
 import StashBoxIDSearchModal from "src/components/Shared/StashBoxIDSearchModal";
+import { sortURLs } from "src/utils/url";
 
 interface IStudioEditPanel {
   studio: Partial<GQL.StudioDataFragment>;
@@ -68,7 +69,7 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
   const initialValues = {
     id: studio.id,
     name: studio.name ?? "",
-    urls: studio.urls ?? [],
+    urls: sortURLs(studio.urls ?? []),
     details: studio.details ?? "",
     parent_id: studio.parent_studio?.id ?? null,
     aliases: studio.aliases ?? [],

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

@@ -0,0 +1,14 @@
+/**
+ * Extracts the sortable portion of a URL by removing the protocol and www. prefix
+ */
+const urlSortKey = (url: string): string =>
+  url.toLowerCase().replace(/^(https?:\/\/)?(www\.)?/, "");
+
+/**
+ * Sorts a list of URLs alphabetically by their base URL,
+ * excluding the protocol (http/https) and www. prefix.
+ * Returns a new sorted array without mutating the original.
+ */
+export function sortURLs(urls: string[]): string[] {
+  return [...urls].sort((a, b) => urlSortKey(a).localeCompare(urlSortKey(b)));
+}