Merge pull request #120 from stuzer05/add-collection-nesting

Add colleciton nesting display

src/@/components/BookmarkForm.tsx

@@ -166,7 +166,7 @@ const BookmarkForm = () => {
       const response = await getCollections(config.baseUrl, config.apiKey);
 
       return response.data.response.sort((a, b) => {
-        return a.name.localeCompare(b.name);
+        return a.pathname.localeCompare(b.pathname);
       });
     },
     enabled: configured,
@@ -274,11 +274,12 @@ const BookmarkForm = () => {
                                     name: string;
                                     id: number;
                                     ownerId: number;
+                                    pathname: string;
                                   }) => (
                                     <CommandItem
                                       value={collection.name}
                                       key={collection.id}
-                                      className="cursor-pointer"
+                                      className="cursor-pointer flex flex-col items-start justify-start"
                                       onSelect={() => {
                                         form.setValue('collection', {
                                           ownerId: collection.ownerId,
@@ -288,7 +289,10 @@ const BookmarkForm = () => {
                                         setOpenCollections(false);
                                       }}
                                     >
-                                      {collection.name}
+                                      <p>{collection.name}</p>
+                                      <p className="text-xs text-neutral-500">
+                                        {collection.pathname}
+                                      </p>
                                     </CommandItem>
                                   )
                                 )

src/@/lib/actions/collections.ts

@@ -9,17 +9,54 @@ interface ResponseCollections {
   members: never[]; // Assuming members can be of any type, adjust as necessary
   name: string;
   ownerId: number;
-  parent: null | never; // Assuming parent can be of any type or null, adjust as necessary
+  parent: null | {
+    id: number;
+    name: string;
+  };
   parentId: null | number; // Assuming parentId can be null or a number
   updatedAt: string;
 }
 
+function buildFullPath(
+  collection: ResponseCollections,
+  collectionsMap: Map<number, ResponseCollections>
+): string {
+  const paths: string[] = [collection.name];
+  let currentParent = collection.parent;
+
+  while (currentParent) {
+    paths.unshift(currentParent.name);
+    const parentCollection = collectionsMap.get(currentParent.id);
+    currentParent = parentCollection?.parent || null;
+  }
+
+  return paths.join(' > ');
+}
+
 export async function getCollections(baseUrl: string, apiKey: string) {
   const url = `${baseUrl}/api/v1/collections`;
 
-  return await axios.get<{ response: ResponseCollections[] }>(url, {
+  const response = await axios.get<{ response: ResponseCollections[] }>(url, {
     headers: {
       Authorization: `Bearer ${apiKey}`,
     },
   });
+
+  // Create a map for quick lookups
+  const collectionsMap = new Map(
+    response.data.response.map((collection) => [collection.id, collection])
+  );
+
+  // Format the collection names with full parent structure
+  const formattedCollections = response.data.response.map((collection) => ({
+    ...collection,
+    pathname: buildFullPath(collection, collectionsMap),
+  }));
+
+  return {
+    ...response,
+    data: {
+      response: formattedCollections,
+    },
+  };
 }