From c04418bc0c4b6ecc19e7a8cdbb0910cf7b281db9 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 28 Mar 2025 14:30:34 -0600
Subject: [PATCH] collection dropdown update

---
 .../buster_rest/collections/queryRequests.ts  |  8 +++--
 .../buttons/ShareMenuCollectionButton.tsx     | 21 ++++++++++++
 .../CollectionIndividualHeader.tsx            | 33 +++++++++++--------
 3 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 web/src/components/features/buttons/ShareMenuCollectionButton.tsx

diff --git a/web/src/api/buster_rest/collections/queryRequests.ts b/web/src/api/buster_rest/collections/queryRequests.ts
index 88ac29ecb..2584653ec 100644
--- a/web/src/api/buster_rest/collections/queryRequests.ts
+++ b/web/src/api/buster_rest/collections/queryRequests.ts
@@ -41,12 +41,16 @@ const useFetchCollection = () => {
   });
 };
 
-export const useGetCollection = (collectionId: string | undefined) => {
+export const useGetCollection = <T = BusterCollection>(
+  collectionId: string | undefined,
+  select?: (data: BusterCollection) => T
+) => {
   const fetchCollection = useFetchCollection();
   return useQuery({
     ...collectionQueryKeys.collectionsGetCollection(collectionId!),
     queryFn: () => fetchCollection(collectionId!),
-    enabled: !!collectionId
+    enabled: !!collectionId,
+    select
   });
 };
 
diff --git a/web/src/components/features/buttons/ShareMenuCollectionButton.tsx b/web/src/components/features/buttons/ShareMenuCollectionButton.tsx
new file mode 100644
index 000000000..8ad6757cb
--- /dev/null
+++ b/web/src/components/features/buttons/ShareMenuCollectionButton.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ShareButton } from './ShareButton';
+import { ShareMenu } from '../ShareMenu';
+import { ShareAssetType } from '@/api/asset_interfaces';
+import { getShareAssetConfig } from '../ShareMenu/helpers';
+import { useGetCollection } from '@/api/buster_rest/collections';
+
+export const ShareCollectionButton = React.memo(({ collectionId }: { collectionId: string }) => {
+  const { data: collectionResponse } = useGetCollection(collectionId, getShareAssetConfig);
+
+  return (
+    <ShareMenu
+      shareAssetConfig={collectionResponse || null}
+      assetId={collectionId}
+      assetType={ShareAssetType.COLLECTION}>
+      <ShareButton />
+    </ShareMenu>
+  );
+});
+
+ShareCollectionButton.displayName = 'ShareCollectionButton';
diff --git a/web/src/controllers/CollectionIndividualController/CollectionIndividualHeader.tsx b/web/src/controllers/CollectionIndividualController/CollectionIndividualHeader.tsx
index 58218e932..353772354 100644
--- a/web/src/controllers/CollectionIndividualController/CollectionIndividualHeader.tsx
+++ b/web/src/controllers/CollectionIndividualController/CollectionIndividualHeader.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/buttons';
 import { Dropdown, DropdownItems } from '@/components/ui/dropdown';
 import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
 import { BusterRoutes } from '@/routes';
-import { FavoriteStar } from '@/components/features/list/FavoriteStar';
+import { FavoriteStar, useFavoriteStar } from '@/components/features/list/FavoriteStar';
 import { ShareMenu } from '@/components/features/ShareMenu';
 import { BusterCollection, ShareAssetType } from '@/api/asset_interfaces';
 import { useMemoizedFn } from '@/hooks';
@@ -13,6 +13,9 @@ import { type BreadcrumbItem, Breadcrumb } from '@/components/ui/breadcrumb';
 import { Dots, Pencil, Plus, ShareAllRight, ShareRight, Trash } from '@/components/ui/icons';
 import { useDeleteCollection, useUpdateCollection } from '@/api/buster_rest/collections';
 import { canEdit } from '@/lib/share';
+import { ShareCollectionButton } from '@/components/features/buttons/ShareMenuCollectionButton';
+import { Star as StarFilled } from '@/components/ui/icons/NucleoIconFilled';
+import { Star } from '@/components/ui/icons';
 
 export const CollectionsIndividualHeader: React.FC<{
   openAddTypeModal: boolean;
@@ -70,12 +73,7 @@ const ContentRight: React.FC<{
 
   return (
     <div className="flex items-center space-x-2">
-      <ShareMenu
-        assetType={ShareAssetType.COLLECTION}
-        assetId={collection.id}
-        shareAssetConfig={collection}>
-        <Button variant="ghost" prefix={<ShareRight />} />
-      </ShareMenu>
+      <ShareCollectionButton collectionId={collection.id} />
       <Button prefix={<Plus />} onClick={onButtonClick}>
         Add to collection
       </Button>
@@ -89,6 +87,11 @@ const ThreeDotDropdown: React.FC<{
 }> = React.memo(({ collection }) => {
   const onChangePage = useAppLayoutContextSelector((s) => s.onChangePage);
   const { mutateAsync: deleteCollection, isPending: isDeletingCollection } = useDeleteCollection();
+  const { isFavorited, onFavoriteClick } = useFavoriteStar({
+    id: collection.id,
+    type: ShareAssetType.COLLECTION,
+    name: collection.name || ''
+  });
 
   const items: DropdownItems = useMemo(
     () => [
@@ -113,17 +116,21 @@ const ThreeDotDropdown: React.FC<{
         onClick: () => {
           //
         }
+      },
+      {
+        value: 'favorite',
+        label: isFavorited ? 'Remove from favorites' : 'Add to favorites',
+        icon: isFavorited ? <StarFilled /> : <Star />,
+        onClick: onFavoriteClick
       }
     ],
-    [collection.id, deleteCollection, onChangePage]
+    [collection.id, deleteCollection, onChangePage, isFavorited, onFavoriteClick]
   );
 
   return (
-    <div className="flex items-center">
-      <Dropdown items={items}>
-        <Button variant="ghost" prefix={<Dots />}></Button>
-      </Dropdown>
-    </div>
+    <Dropdown items={items}>
+      <Button variant="ghost" prefix={<Dots />}></Button>
+    </Dropdown>
   );
 });
 ThreeDotDropdown.displayName = 'ThreeDotDropdown';