From 9c61130e4f9ff3f7a561e3b0d474ac330d8b32c9 Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <ryan@acorn.io>
Date: Mon, 30 Dec 2024 11:09:28 -0600
Subject: [PATCH] enhance: organize tool catalog

- sort first by bundlable tool groups
- sort by alphabetical tool category name
---
 ui/admin/app/components/tools/ToolCatalog.tsx | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/ui/admin/app/components/tools/ToolCatalog.tsx b/ui/admin/app/components/tools/ToolCatalog.tsx
index b85b29ae2..cb7894895 100644
--- a/ui/admin/app/components/tools/ToolCatalog.tsx
+++ b/ui/admin/app/components/tools/ToolCatalog.tsx
@@ -1,4 +1,5 @@
 import { AlertTriangleIcon, PlusIcon } from "lucide-react";
+import { useMemo } from "react";
 import useSWR from "swr";
 
 import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
@@ -41,6 +42,19 @@ export function ToolCatalog({
         { fallbackData: {} }
     );
 
+    const sortedCategories = useMemo(() => {
+        return Object.entries(toolCategories).sort(
+            ([nameA, categoryA], [nameB, categoryB]): number => {
+                const aHasBundle = categoryA.bundleTool ? 1 : 0;
+                const bHasBundle = categoryB.bundleTool ? 1 : 0;
+
+                if (aHasBundle !== bHasBundle) return bHasBundle - aHasBundle;
+
+                return nameA.localeCompare(nameB);
+            }
+        );
+    }, [toolCategories]);
+
     if (isLoading) return <LoadingSpinner />;
 
     return (
@@ -68,17 +82,15 @@ export function ToolCatalog({
                         No results found.
                     </h1>{" "}
                 </CommandEmpty>
-                {Object.entries(toolCategories).map(
-                    ([category, categoryTools]) => (
-                        <ToolCatalogGroup
-                            key={category}
-                            category={category}
-                            tools={categoryTools}
-                            selectedTools={tools}
-                            onUpdateTools={onUpdateTools}
-                        />
-                    )
-                )}
+                {sortedCategories.map(([category, categoryTools]) => (
+                    <ToolCatalogGroup
+                        key={category}
+                        category={category}
+                        tools={categoryTools}
+                        selectedTools={tools}
+                        onUpdateTools={onUpdateTools}
+                    />
+                ))}
             </CommandList>
         </Command>
     );