Show toolkit usage in selector

src/app/(general)/_components/landing-page/top-toolkits/index.tsx

@@ -10,13 +10,13 @@ import { SECTIONS } from "../sections";
 import type { Toolkits as ToolkitNames } from "@/toolkits/toolkits/shared";
 
 export const TopToolkitsSection = async () => {
-  const topToolkits = await api.tools.getTopToolkits();
+  const topToolkits = await api.tools.getTopToolkits({ limit: 6 });
 
   return (
     <Section id={SECTIONS.TopToolkits} className="p-0 md:p-0">
       <MiniHeading title="Top Toolkits" />
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-        {topToolkits.slice(0, 6).map((toolkit) => (
+        {topToolkits.map((toolkit) => (
           <ToolkitCard
             key={toolkit.id}
             toolkit={toolkit.id as ToolkitNames}

src/components/toolkit/toolkit-list/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
@@ -13,6 +13,7 @@ import {
 import { ToolkitItem } from "./item";
 
 import { clientToolkits } from "@/toolkits/toolkits/client";
+import { api } from "@/trpc/react";
 
 import type { ClientToolkit } from "@/toolkits/types";
 import type { Toolkits } from "@/toolkits/toolkits/shared";
@@ -39,6 +40,16 @@ export const ToolkitList: React.FC<ToolkitListProps> = ({
   const router = useRouter();
 
   const [searchQuery, setSearchQuery] = useState("");
+  const { data: toolkitUsage = [] } = api.tools.getTopToolkits.useQuery({
+    limit: 100,
+  });
+  const toolkitUsageById = useMemo(() => {
+    return new Map(
+      toolkitUsage
+        .filter((toolkit) => toolkit.id)
+        .map((toolkit) => [toolkit.id as Toolkits, toolkit.totalUsage]),
+    );
+  }, [toolkitUsage]);
 
   useEffect(() => {
     const updatedToolkits = Object.entries(clientToolkits).filter(([id]) => {
@@ -84,6 +95,7 @@ export const ToolkitList: React.FC<ToolkitListProps> = ({
                 isSelected={true}
                 addToolkit={onAddToolkit}
                 removeToolkit={onRemoveToolkit}
+                usageCount={toolkitUsageById.get(toolkit.id) ?? 0}
               />
             ))}
           </CommandGroup>
@@ -105,6 +117,7 @@ export const ToolkitList: React.FC<ToolkitListProps> = ({
                     isSelected={selectedToolkits.some((t) => t.id === typedId)}
                     addToolkit={onAddToolkit}
                     removeToolkit={onRemoveToolkit}
+                    usageCount={toolkitUsageById.get(typedId) ?? 0}
                   />
                 );
               })}

src/components/toolkit/toolkit-list/item.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Loader2, Plus } from "lucide-react";
+import { Activity, Loader2, Plus } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { CommandItem as BaseCommandItem } from "@/components/ui/command";
@@ -34,6 +34,7 @@ interface Props {
   isSelected: boolean;
   addToolkit: (toolkit: SelectedToolkit) => void;
   removeToolkit: (id: Toolkits) => void;
+  usageCount?: number;
 }
 
 export const ToolkitItem: React.FC<Props> = ({
@@ -42,6 +43,7 @@ export const ToolkitItem: React.FC<Props> = ({
   isSelected,
   addToolkit,
   removeToolkit,
+  usageCount,
 }) => {
   const CommandItem = ({
     onSelect,
@@ -76,6 +78,12 @@ export const ToolkitItem: React.FC<Props> = ({
           <h3 className="text-sm font-medium">{toolkit.name}</h3>
           <p className="text-muted-foreground text-xs">{toolkit.description}</p>
         </VStack>
+        {usageCount !== undefined && (
+          <div className="text-muted-foreground ml-auto flex shrink-0 items-center gap-1 text-xs">
+            <Activity className="size-3" />
+            <span>{usageCount}</span>
+          </div>
+        )}
       </BaseCommandItem>
     );
   };

src/server/api/routers/tools.ts

@@ -197,37 +197,47 @@ export const toolsRouter = createTRPCRouter({
     });
   }),
 
-  getTopToolkits: publicProcedure.query(async ({ ctx }) => {
-    // Aggregate total usageCount per toolkit by grouping tools
-    const toolkitsWithUsage = await ctx.db.tool.groupBy({
-      by: ["toolkitId"],
-      _sum: {
-        usageCount: true,
-      },
-      orderBy: {
+  getTopToolkits: publicProcedure
+    .input(
+      z
+        .object({
+          limit: z.number().min(1).max(100).default(10),
+        })
+        .optional(),
+    )
+    .query(async ({ ctx, input }) => {
+      const limit = input?.limit ?? 10;
+
+      // Aggregate total usageCount per toolkit by grouping tools
+      const toolkitsWithUsage = await ctx.db.tool.groupBy({
+        by: ["toolkitId"],
         _sum: {
-          usageCount: "desc",
+          usageCount: true,
         },
-      },
-      take: 10,
-    });
+        orderBy: {
+          _sum: {
+            usageCount: "desc",
+          },
+        },
+        take: limit,
+      });
 
-    // Fetch toolkit details for the top toolkits
-    const toolkitIds = toolkitsWithUsage.map((t) => t.toolkitId);
-    const toolkitDetails = await ctx.db.toolkit.findMany({
-      where: { id: { in: toolkitIds } },
-      select: { id: true },
-    });
+      // Fetch toolkit details for the top toolkits
+      const toolkitIds = toolkitsWithUsage.map((t) => t.toolkitId);
+      const toolkitDetails = await ctx.db.toolkit.findMany({
+        where: { id: { in: toolkitIds } },
+        select: { id: true },
+      });
 
-    // Merge usage info with toolkit details
-    const result = toolkitsWithUsage.map((tu) => {
-      const toolkit = toolkitDetails.find((td) => td.id === tu.toolkitId);
-      return {
-        id: toolkit?.id,
-        totalUsage: tu._sum.usageCount ?? 0,
-      };
-    });
+      // Merge usage info with toolkit details
+      const result = toolkitsWithUsage.map((tu) => {
+        const toolkit = toolkitDetails.find((td) => td.id === tu.toolkitId);
+        return {
+          id: toolkit?.id,
+          totalUsage: tu._sum.usageCount ?? 0,
+        };
+      });
 
-    return result;
-  }),
+      return result;
+    }),
 });