From b6b0982453d2de99dbdd50b69e00c9ca0f0c1a39 Mon Sep 17 00:00:00 2001
From: Ivy <ivy@acorn.io>
Date: Fri, 13 Dec 2024 13:14:58 -0500
Subject: [PATCH] fix: user tools to the top & toast on successful tool
 addition (#839)

* fix: user tools to the top & toast on successful tool addition

* enhance: green check arrow for toast
---
 ui/admin/app/components/tools/CreateTool.tsx  |  4 ++
 .../components/tools/toolGrid/ToolGrid.tsx    | 51 +++++++++++++------
 .../lib/service/api/toolreferenceService.ts   |  6 ++-
 ui/admin/app/root.tsx                         | 13 ++++-
 4 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/ui/admin/app/components/tools/CreateTool.tsx b/ui/admin/app/components/tools/CreateTool.tsx
index 81e911d54..c7baa85b0 100644
--- a/ui/admin/app/components/tools/CreateTool.tsx
+++ b/ui/admin/app/components/tools/CreateTool.tsx
@@ -1,6 +1,7 @@
 import { PlusCircle } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import useSWR from "swr";
 
 import { CreateToolReference, ToolReference } from "~/lib/model/toolReferences";
@@ -38,6 +39,9 @@ export function CreateTool({ onError, onSuccess }: CreateToolProps) {
             if (loadedTool.error) {
                 onError(loadedTool.error);
             } else {
+                toast.success(
+                    `"${loadedTool.reference}" registered successfully.`
+                );
                 onSuccess();
             }
         },
diff --git a/ui/admin/app/components/tools/toolGrid/ToolGrid.tsx b/ui/admin/app/components/tools/toolGrid/ToolGrid.tsx
index 902539b91..43eee5ec8 100644
--- a/ui/admin/app/components/tools/toolGrid/ToolGrid.tsx
+++ b/ui/admin/app/components/tools/toolGrid/ToolGrid.tsx
@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { ToolCategoryMap } from "~/lib/service/api/toolreferenceService";
+import { ToolReference } from "~/lib/model/toolReferences";
+import {
+    ToolCategoryMap,
+    YourToolsToolCategory,
+} from "~/lib/service/api/toolreferenceService";
 
 import { TypographyP } from "~/components/Typography";
 import { CategoryHeader } from "~/components/tools/toolGrid/CategoryHeader";
@@ -58,27 +62,42 @@ export function ToolGrid({ toolCategories, filter, onDelete }: ToolGridProps) {
         return <TypographyP>No tools found...</TypographyP>;
     }
 
+    const yourToolsCategory = filteredResults[YourToolsToolCategory];
     return (
         <div className="space-y-8 pb-16">
+            {yourToolsCategory &&
+                renderToolCategory(
+                    YourToolsToolCategory,
+                    yourToolsCategory.tools
+                )}
             {Object.entries(filteredResults).map(
                 ([category, { tools, bundleTool }]) => {
-                    if (tools.length) {
-                        return (
-                            <div key={category} className="space-y-4">
-                                <CategoryHeader
-                                    category={category}
-                                    description={bundleTool?.description || ""}
-                                    tools={tools}
-                                />
-                                <CategoryTools
-                                    tools={tools}
-                                    onDelete={onDelete}
-                                />
-                            </div>
-                        );
-                    }
+                    if (category === YourToolsToolCategory) return null;
+                    return renderToolCategory(
+                        category,
+                        tools,
+                        bundleTool?.description
+                    );
                 }
             )}
         </div>
     );
+
+    function renderToolCategory(
+        category: string,
+        tools: ToolReference[],
+        description = ""
+    ) {
+        if (!tools.length) return null;
+        return (
+            <div key={category} className="space-y-4">
+                <CategoryHeader
+                    category={category}
+                    description={description}
+                    tools={tools}
+                />
+                <CategoryTools tools={tools} onDelete={onDelete} />
+            </div>
+        );
+    }
 }
diff --git a/ui/admin/app/lib/service/api/toolreferenceService.ts b/ui/admin/app/lib/service/api/toolreferenceService.ts
index 103c6cfb2..5605786ac 100644
--- a/ui/admin/app/lib/service/api/toolreferenceService.ts
+++ b/ui/admin/app/lib/service/api/toolreferenceService.ts
@@ -24,6 +24,8 @@ export type ToolCategory = {
     bundleTool?: ToolReference;
     tools: ToolReference[];
 };
+export const UncategorizedToolCategory = "Uncategorized";
+export const YourToolsToolCategory = "Your Tools";
 export type ToolCategoryMap = Record<string, ToolCategory>;
 async function getToolReferencesCategoryMap(type?: ToolReferenceType) {
     const res = await request<{ items: ToolReference[] }>({
@@ -35,7 +37,9 @@ async function getToolReferencesCategoryMap(type?: ToolReferenceType) {
     const result: ToolCategoryMap = {};
 
     for (const toolReference of toolReferences) {
-        const category = toolReference.metadata?.category || "Uncategorized";
+        const category = !toolReference.builtin
+            ? YourToolsToolCategory
+            : toolReference.metadata?.category || UncategorizedToolCategory;
 
         if (!result[category]) {
             result[category] = {
diff --git a/ui/admin/app/root.tsx b/ui/admin/app/root.tsx
index 194f913ee..33b11b759 100644
--- a/ui/admin/app/root.tsx
+++ b/ui/admin/app/root.tsx
@@ -6,6 +6,7 @@ import {
     Scripts,
     ScrollRestoration,
 } from "@remix-run/react";
+import { CircleCheckIcon } from "lucide-react";
 import { SWRConfig } from "swr";
 
 import { AuthProvider } from "~/components/auth/AuthContext";
@@ -48,7 +49,17 @@ export function Layout({ children }: { children: React.ReactNode }) {
             </head>
             <body>
                 {children}
-                <Toaster closeButton />
+                <Toaster
+                    closeButton
+                    icons={{
+                        success: (
+                            <CircleCheckIcon
+                                className="text-success"
+                                size={20}
+                            />
+                        ),
+                    }}
+                />
                 <ScrollRestoration />
                 <Scripts />
             </body>