Add site categories

Makefile

@@ -82,6 +82,7 @@ generate-dataloaders:
 		go run github.com/vektah/dataloaden BodyModificationsLoader github.com/gofrs/uuid.UUID "[]github.com/stashapp/stash-box/internal/models.BodyModification"; \
 		go run github.com/vektah/dataloaden TagCategoryLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/internal/models.TagCategory"; \
 		go run github.com/vektah/dataloaden SiteLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/internal/models.Site"; \
+		go run github.com/vektah/dataloaden SiteCategoryLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/internal/models.SiteCategory"; \
 		go run github.com/vektah/dataloaden StudioLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/internal/models.Studio"; \
 		go run github.com/vektah/dataloaden EditLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/internal/models.Edit"; \
 		go run github.com/vektah/dataloaden EditCommentLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/internal/models.EditComment"; \

frontend/src/components/list/URLList.tsx

@@ -1,28 +1,58 @@
+import { groupBy, sortBy } from "lodash-es";
 import type { FC } from "react";
 import { SiteLink } from "src/components/fragments";
 
-interface URLListProps {
-  urls: {
-    url: string;
-    site: {
+interface URL {
+  url: string;
+  site: {
+    id: string;
+    name: string;
+    icon: string;
+    category?: {
       id: string;
       name: string;
-      icon: string;
+      sort_order: number;
     } | null;
-  }[];
+  } | null;
+}
+
+interface URLListProps {
+  urls: URL[];
 }
 
-const URLList: FC<URLListProps> = ({ urls }) => (
-  <ul className="URLList">
-    {urls.map((u) => (
-      <li key={u.url}>
-        <SiteLink site={u.site} />
-        <a href={u.url} target="_blank" rel="noreferrer noopener">
-          {u.url}
-        </a>
-      </li>
-    ))}
-  </ul>
+const renderURL = (u: URL) => (
+  <li key={u.url}>
+    <SiteLink site={u.site} />
+    <a href={u.url} target="_blank" rel="noreferrer noopener">
+      {u.url}
+    </a>
+  </li>
 );
 
+const URLList: FC<URLListProps> = ({ urls }) => {
+  const hasCategories = urls.some((u) => u.site?.category);
+
+  if (!hasCategories) return <ul className="URLList">{urls.map(renderURL)}</ul>;
+
+  const groups = sortBy(
+    Object.values(groupBy(urls, (u) => u.site?.category?.id ?? "")),
+    [
+      (group) => (group[0].site?.category ? 0 : 1),
+      (group) => group[0].site?.category?.sort_order ?? 0,
+      (group) => group[0].site?.category?.name.toLowerCase(),
+    ],
+  );
+
+  return (
+    <>
+      {groups.map((group) => (
+        <div key={group[0].site?.category?.id ?? "other"}>
+          <h6>{group[0].site?.category?.name ?? "Other"}</h6>
+          <ul className="URLList">{group.map(renderURL)}</ul>
+        </div>
+      ))}
+    </>
+  );
+};
+
 export default URLList;

frontend/src/constants/route.ts

@@ -51,6 +51,10 @@ export const ROUTE_SITE = "/sites/:id";
 export const ROUTE_SITE_ADD = "/sites/add";
 export const ROUTE_SITE_EDIT = "/sites/:id/edit";
 export const ROUTE_SITES = "/sites";
+export const ROUTE_SITE_CATEGORY = "/site-categories/:id";
+export const ROUTE_SITE_CATEGORY_ADD = "/site-categories/add";
+export const ROUTE_SITE_CATEGORY_EDIT = "/site-categories/:id/edit";
+export const ROUTE_SITE_CATEGORIES = "/site-categories";
 export const ROUTE_DRAFT = "/drafts/:id";
 export const ROUTE_DRAFTS = "/drafts";
 export const ROUTE_NOTIFICATIONS = "/notifications";

frontend/src/graphql/fragments/URLFragment.gql

@@ -4,5 +4,10 @@ fragment URLFragment on URL {
     id
     name
     icon
+    category {
+      id
+      name
+      sort_order
+    }
   }
 }

frontend/src/graphql/mutations/AddSite.gql

@@ -6,5 +6,10 @@ mutation AddSite($siteData: SiteCreateInput!) {
     url
     regex
     valid_types
+    category {
+      id
+      name
+      sort_order
+    }
   }
 }

frontend/src/graphql/mutations/AddSiteCategory.gql

@@ -0,0 +1,8 @@
+mutation AddSiteCategory($categoryData: SiteCategoryCreateInput!) {
+  siteCategoryCreate(input: $categoryData) {
+    id
+    name
+    description
+    sort_order
+  }
+}

frontend/src/graphql/mutations/DeleteSiteCategory.gql

@@ -0,0 +1,3 @@
+mutation DeleteSiteCategory($input: SiteCategoryDestroyInput!) {
+  siteCategoryDestroy(input: $input)
+}

frontend/src/graphql/mutations/UpdateSite.gql

@@ -6,5 +6,10 @@ mutation UpdateSite($siteData: SiteUpdateInput!) {
     url
     regex
     valid_types
+    category {
+      id
+      name
+      sort_order
+    }
   }
 }

frontend/src/graphql/mutations/UpdateSiteCategory.gql

@@ -0,0 +1,8 @@
+mutation UpdateSiteCategory($categoryData: SiteCategoryUpdateInput!) {
+  siteCategoryUpdate(input: $categoryData) {
+    id
+    name
+    description
+    sort_order
+  }
+}

frontend/src/graphql/mutations/index.ts

@@ -12,6 +12,9 @@ import {
   AddSceneDocument,
   type AddSceneMutation,
   type AddSceneMutationVariables,
+  AddSiteCategoryDocument,
+  type AddSiteCategoryMutation,
+  type AddSiteCategoryMutationVariables,
   AddSiteDocument,
   type AddSiteMutation,
   type AddSiteMutationVariables,
@@ -51,6 +54,9 @@ import {
   DeleteSceneDocument,
   type DeleteSceneMutation,
   type DeleteSceneMutationVariables,
+  DeleteSiteCategoryDocument,
+  type DeleteSiteCategoryMutation,
+  type DeleteSiteCategoryMutationVariables,
   DeleteSiteDocument,
   type DeleteSiteMutation,
   type DeleteSiteMutationVariables,
@@ -143,6 +149,9 @@ import {
   UpdateSceneDocument,
   type UpdateSceneMutation,
   type UpdateSceneMutationVariables,
+  UpdateSiteCategoryDocument,
+  type UpdateSiteCategoryMutation,
+  type UpdateSiteCategoryMutationVariables,
   UpdateSiteDocument,
   type UpdateSiteMutation,
   type UpdateSiteMutationVariables,
@@ -413,6 +422,27 @@ export const useDeleteSite = (
   >,
 ) => useMutation(DeleteSiteDocument, options);
 
+export const useAddSiteCategory = (
+  options?: useMutation.Options<
+    AddSiteCategoryMutation,
+    AddSiteCategoryMutationVariables
+  >,
+) => useMutation(AddSiteCategoryDocument, options);
+
+export const useDeleteSiteCategory = (
+  options?: useMutation.Options<
+    DeleteSiteCategoryMutation,
+    DeleteSiteCategoryMutationVariables
+  >,
+) => useMutation(DeleteSiteCategoryDocument, options);
+
+export const useUpdateSiteCategory = (
+  options?: useMutation.Options<
+    UpdateSiteCategoryMutation,
+    UpdateSiteCategoryMutationVariables
+  >,
+) => useMutation(UpdateSiteCategoryDocument, options);
+
 export const useUpdateSite = (
   options?: useMutation.Options<
     UpdateSiteMutation,

frontend/src/graphql/queries/Site.gql

@@ -6,6 +6,11 @@ query Site($id: ID!) {
     url
     regex
     valid_types
+    category {
+      id
+      name
+      sort_order
+    }
     icon
     created
     updated

frontend/src/graphql/queries/SiteCategories.gql

@@ -0,0 +1,11 @@
+query SiteCategories {
+  querySiteCategories {
+    count
+    site_categories {
+      id
+      name
+      description
+      sort_order
+    }
+  }
+}

frontend/src/graphql/queries/SiteCategory.gql

@@ -0,0 +1,8 @@
+query SiteCategory($id: ID!) {
+  findSiteCategory(id: $id) {
+    id
+    name
+    description
+    sort_order
+  }
+}

frontend/src/graphql/queries/Sites.gql

@@ -7,6 +7,11 @@ query Sites {
       url
       regex
       valid_types
+      category {
+        id
+        name
+        sort_order
+      }
       icon
       created
       updated

frontend/src/graphql/queries/index.ts

@@ -54,6 +54,9 @@ import {
   type SearchScenesQueryVariables,
   SearchTagsDocument,
   type SearchTagsQueryVariables,
+  SiteCategoriesDocument,
+  SiteCategoryDocument,
+  type SiteCategoryQueryVariables,
   SiteDocument,
   type SiteQueryVariables,
   SitesDocument,
@@ -286,6 +289,17 @@ export const useSite = (variables: SiteQueryVariables, skip = false) =>
 
 export const useSites = () => useQuery(SitesDocument);
 
+export const useSiteCategory = (
+  variables: SiteCategoryQueryVariables,
+  skip = false,
+) =>
+  useQuery(SiteCategoryDocument, {
+    variables,
+    skip,
+  });
+
+export const useSiteCategories = () => useQuery(SiteCategoriesDocument);
+
 export const useDraft = (variables: DraftQueryVariables, skip = false) =>
   useQuery(DraftDocument, {
     variables,