From df84c47c73a83d8a83c5da4cdfe5cfd14adcd3b3 Mon Sep 17 00:00:00 2001
From: Lily Delalande <119957291+lily-de@users.noreply.github.com>
Date: Thu, 10 Apr 2025 14:22:10 -0400
Subject: [PATCH] tool count: fix colors and opacity (#2132)

---
 ui/desktop/src/components/ToolCount.tsx | 36 +++++++------------------
 1 file changed, 9 insertions(+), 27 deletions(-)

diff --git a/ui/desktop/src/components/ToolCount.tsx b/ui/desktop/src/components/ToolCount.tsx
index 3f384b7f..a56d10ec 100644
--- a/ui/desktop/src/components/ToolCount.tsx
+++ b/ui/desktop/src/components/ToolCount.tsx
@@ -1,10 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { getTools } from '../api';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { HammerIcon } from 'lucide-react';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
 
-const SUGGESTED_MAX_TOOLS = 15;
+const SUGGESTED_MAX_TOOLS = 24;
 
 export default function ToolCount() {
   const [toolCount, setToolCount] = useState(null);
@@ -37,24 +36,7 @@ export default function ToolCount() {
     return <div>...</div>;
   }
 
-  if (toolCount < SUGGESTED_MAX_TOOLS) {
-    return (
-      <div>
-        <Popover>
-          <PopoverTrigger asChild>
-            <button className="flex items-center justify-center p-0 border-0 bg-transparent cursor-pointer">
-              <HammerIcon size={16} />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent className="p-3 w-auto" side="top">
-            <div className="space-y-1">
-              <p className="text-sm text-black dark:text-white">Tool count: {toolCount}</p>
-            </div>
-          </PopoverContent>
-        </Popover>
-      </div>
-    );
-  } else {
+  if (toolCount > SUGGESTED_MAX_TOOLS) {
     return (
       <div>
         <Popover>
@@ -63,18 +45,18 @@ export default function ToolCount() {
               <ExclamationTriangleIcon color="orange" />
             </button>
           </PopoverTrigger>
-          <PopoverContent className="p-3" side="top">
+          <PopoverContent className="p-3 bg-orangit ge-500 " side="top">
             <div className="space-y-2">
-              <h4 className="text-sm font-medium">Warning: High Tool Count</h4>
-              <p className="text-xs text-black dark:text-white">
-                Too many tools can degrade goose's performance. Consider turning a few extensions
-                off.
+              <p className="text-xs text-gray-300">
+                Too many tools can degrade goose's performance. Consider turning unused extensions
+                off. Tool count: {toolCount} (recommend: {SUGGESTED_MAX_TOOLS})
               </p>
-              <p className="text-xs font-medium">Tool count: {toolCount}</p>
             </div>
           </PopoverContent>
         </Popover>
       </div>
     );
+  } else {
+    return <div></div>;
   }
 }