lint

frontend/src/components/ToolsPopup.tsx

@@ -29,18 +29,23 @@ export default function ToolsPopup({
   const [searchTerm, setSearchTerm] = useState('');
   const [isDarkTheme] = useDarkTheme();
   const popupRef = useRef<HTMLDivElement>(null);
-  const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0, maxHeight: 0, showAbove: false });
+  const [popupPosition, setPopupPosition] = useState({
+    top: 0,
+    left: 0,
+    maxHeight: 0,
+    showAbove: false,
+  });
 
   useLayoutEffect(() => {
     if (!isOpen || !anchorRef.current) return;
-    
+
     const updatePosition = () => {
       if (!anchorRef.current) return;
-      
+
       const rect = anchorRef.current.getBoundingClientRect();
       const viewportHeight = window.innerHeight;
       const viewportWidth = window.innerWidth;
-      
+
       const spaceAbove = rect.top;
       const spaceBelow = viewportHeight - rect.bottom;
       const showAbove = spaceAbove > spaceBelow && spaceAbove >= 300;
@@ -48,17 +53,17 @@ export default function ToolsPopup({
 
       const left = Math.min(
         rect.left,
-        viewportWidth - Math.min(462, viewportWidth * 0.95) - 10
+        viewportWidth - Math.min(462, viewportWidth * 0.95) - 10,
       );
-      
+
       setPopupPosition({
         top: showAbove ? rect.top - 8 : rect.bottom + 8,
         left,
         maxHeight: Math.min(600, maxHeight),
-        showAbove
+        showAbove,
       });
     };
-    
+
     updatePosition();
     window.addEventListener('resize', updatePosition);
     return () => window.removeEventListener('resize', updatePosition);
@@ -125,16 +130,18 @@ export default function ToolsPopup({
   if (!isOpen) return null;
 
   const filteredTools = userTools.filter((tool) =>
-    tool.displayName.toLowerCase().includes(searchTerm.toLowerCase())
+    tool.displayName.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
   return (
     <div
       ref={popupRef}
-      className="fixed z-[9999] rounded-lg border border-light-silver dark:border-dim-gray bg-lotion dark:bg-charleston-green-2 shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
+      className="fixed z-[9999] rounded-lg border border-light-silver bg-lotion shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] dark:border-dim-gray dark:bg-charleston-green-2"
       style={{
         top: popupPosition.showAbove ? popupPosition.top : undefined,
-        bottom: popupPosition.showAbove ? undefined : window.innerHeight - popupPosition.top,
+        bottom: popupPosition.showAbove
+          ? undefined
+          : window.innerHeight - popupPosition.top,
         left: popupPosition.left,
         maxWidth: Math.min(462, window.innerWidth * 0.95),
         width: '100%',
@@ -142,9 +149,9 @@ export default function ToolsPopup({
         transform: popupPosition.showAbove ? 'translateY(-100%)' : 'none',
       }}
     >
-      <div className="flex flex-col h-full">
-        <div className="p-4 flex-shrink-0">
-          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+      <div className="flex h-full flex-col">
+        <div className="flex-shrink-0 p-4">
+          <h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
             {t('settings.tools.label')}
           </h3>
 
@@ -162,20 +169,20 @@ export default function ToolsPopup({
         </div>
 
         {loading ? (
-          <div className="flex justify-center py-4 flex-grow">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-white"></div>
+          <div className="flex flex-grow justify-center py-4">
+            <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
           </div>
         ) : (
-          <div className="mx-4 border border-[#D9D9D9] dark:border-dim-gray rounded-md overflow-hidden flex-grow">
+          <div className="mx-4 flex-grow overflow-hidden rounded-md border border-[#D9D9D9] dark:border-dim-gray">
             <div className="h-full overflow-y-auto [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
               {filteredTools.length === 0 ? (
-                <div className="flex flex-col items-center justify-center h-full py-8">
+                <div className="flex h-full flex-col items-center justify-center py-8">
                   <img
                     src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
                     alt="No tools found"
-                    className="h-24 w-24 mx-auto mb-4"
+                    className="mx-auto mb-4 h-24 w-24"
                   />
-                  <p className="text-gray-500 dark:text-gray-400 text-center">
+                  <p className="text-center text-gray-500 dark:text-gray-400">
                     {t('settings.tools.noToolsFound')}
                   </p>
                 </div>
@@ -184,22 +191,24 @@ export default function ToolsPopup({
                   <div
                     key={tool.id}
                     onClick={() => updateToolStatus(tool.id, !tool.status)}
-                    className="flex items-center justify-between p-3 border-b border-[#D9D9D9] dark:border-dim-gray hover:bg-gray-100 dark:hover:bg-charleston-green-3"
+                    className="flex items-center justify-between border-b border-[#D9D9D9] p-3 hover:bg-gray-100 dark:border-dim-gray dark:hover:bg-charleston-green-3"
                   >
-                    <div className="flex items-center flex-grow mr-3">
+                    <div className="mr-3 flex flex-grow items-center">
                       <img
                         src={`/toolIcons/tool_${tool.name}.svg`}
                         alt={`${tool.displayName} icon`}
-                        className="h-5 w-5 mr-4 flex-shrink-0"
+                        className="mr-4 h-5 w-5 flex-shrink-0"
                       />
                       <div className="overflow-hidden">
-                        <p className="text-xs font-medium text-gray-900 dark:text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+                        <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-xs font-medium text-gray-900 dark:text-white">
                           {tool.displayName}
                         </p>
                       </div>
                     </div>
-                    <div className="flex items-center flex-shrink-0">
-                      <div className={`w-4 h-4 border flex items-center justify-center p-[0.5px] dark:border-[#757783] border-[#C6C6C6]`}>
+                    <div className="flex flex-shrink-0 items-center">
+                      <div
+                        className={`flex h-4 w-4 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
+                      >
                         {tool.status && (
                           <img
                             src={CheckmarkIcon}
@@ -217,10 +226,10 @@ export default function ToolsPopup({
           </div>
         )}
 
-        <div className="p-4 flex-shrink-0 opacity-75 hover:opacity-100 transition-opacity duration-200">
+        <div className="flex-shrink-0 p-4 opacity-75 transition-opacity duration-200 hover:opacity-100">
           <a
             href="/settings/tools"
-            className="text-base text-purple-30 font-medium inline-flex items-center"
+            className="inline-flex items-center text-base font-medium text-purple-30"
           >
             {t('settings.tools.manageTools')}
             <img