Refactor ListToolsTemplates component to use NavigationMenu for improved navigation; enhance template management with Edit and Delete buttons

src/listToolsTemplates.tsx

@@ -1,13 +1,16 @@
 import { ChatStore, TemplateTools } from "@/types/chatstore";
 import { Tr } from "@/translate";
-import { Card, CardContent } from "@/components/ui/card";
 import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel";
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
 import { Button } from "./components/ui/button";
 
 interface Props {
@@ -23,8 +26,8 @@ export function ListToolsTempaltes({
   setChatStore,
 }: Props) {
   return (
-    <div className="p-3">
-      <h2 className="text-lg font-semibold mb-4 flex items-center">
+    <NavigationMenuItem className="p-3">
+      <NavigationMenuTrigger>
         <span>{Tr(`Saved tools templates`)}</span>
         <Button
           variant="link"
@@ -36,72 +39,67 @@ export function ListToolsTempaltes({
         >
           {Tr(`Clear`)}
         </Button>
-      </h2>
-      <Carousel className="w-full">
-        <CarouselContent>
+      </NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
           {templateTools.map((t, index) => (
-            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card
-                  className={`cursor-pointer ${
-                    chatStore.toolsString === t.toolsString
-                      ? "border-primary"
-                      : ""
-                  }`}
+            <li key={index}>
+              <NavigationMenuLink asChild>
+                <a
                   onClick={() => {
                     chatStore.toolsString = t.toolsString;
                     setChatStore({ ...chatStore });
                   }}
+                  className={cn(
+                    "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                    chatStore.toolsString === t.toolsString
+                      ? "bg-accent text-accent-foreground"
+                      : ""
+                  )}
                 >
-                  <CardContent className="p-4">
-                    <div className="flex flex-col gap-2">
-                      <span className="font-medium text-center">{t.name}</span>
-                      <div className="flex justify-between mt-2">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="text-blue-500 hover:text-blue-600"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            const name = prompt(
-                              `Give **tools** template a name`
-                            );
-                            if (!name) return;
-                            t.name = name;
-                            setTemplateTools(structuredClone(templateTools));
-                          }}
-                        >
-                          Edit
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="text-red-500 hover:text-red-600"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            if (
-                              !confirm(
-                                `Are you sure to delete this **tools** template?`
-                              )
-                            )
-                              return;
-                            templateTools.splice(index, 1);
-                            setTemplateTools(structuredClone(templateTools));
-                          }}
-                        >
-                          Delete
-                        </Button>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
+                  <div className="text-sm font-medium leading-none">
+                    {t.name}
+                  </div>
+                  <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    {t.toolsString}
+                  </p>
+                </a>
+              </NavigationMenuLink>
+              <div className="mt-2 flex justify-between">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    const name = prompt(`Give **tools** template a name`);
+                    if (!name) return;
+                    t.name = name;
+                    setTemplateTools(structuredClone(templateTools));
+                  }}
+                >
+                  Edit
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    if (
+                      !confirm(
+                        `Are you sure to delete this **tools** template?`
+                      )
+                    ) {
+                      return;
+                    }
+                    templateTools.splice(index, 1);
+                    setTemplateTools(structuredClone(templateTools));
+                  }}
+                >
+                  Delete
+                </Button>
               </div>
-            </CarouselItem>
+            </li>
           ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </div>
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
   );
 }