address reviews and add external link support

frontend/src/components/shared/AllToolsNavButton.tsx

@@ -47,13 +47,11 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
 
   return (
     <Tooltip content={t("quickAccess.allTools", "All Tools")} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
-      <Anchor
-        href={navProps.href}
-        onClick={handleNavClick}
-        style={{ textDecoration: 'none', color: 'inherit' }}
-      >
       <div className="flex flex-col items-center gap-1 mt-4 mb-2">
         <ActionIcon
+          component="a"
+          href={navProps.href}
+          onClick={handleNavClick}
           size={'lg'}
           variant="subtle"
           style={{
@@ -61,6 +59,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
             color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)',
             border: 'none',
             borderRadius: '8px',
+            textDecoration: 'none'
           }}
           className={isActive ? 'activeIconScale' : ''}
         >
@@ -70,7 +69,6 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
           {t("quickAccess.allTools", "All Tools")}
         </span>
       </div>
-      </Anchor>
     </Tooltip>
   );
 };

frontend/src/components/shared/QuickAccessBar.tsx

@@ -60,8 +60,33 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
       config.onClick();
     };
 
-    const buttonElement = (
-      <div className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
+    // Render with URL navigation if available, otherwise regular div
+    if (navProps) {
+      return (
+        <div key={config.id} className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
+          <ActionIcon
+            component="a"
+            href={navProps.href}
+            onClick={(e: React.MouseEvent) => handleClick(e)}
+            size={isActive ? (config.size || 'lg') : 'lg'}
+            variant="subtle"
+            style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView)}
+            className={isActive ? 'activeIconScale' : ''}
+            data-testid={`${config.id}-button`}
+          >
+            <span className="iconContainer">
+              {config.icon}
+            </span>
+          </ActionIcon>
+          <span className={`button-text ${isActive ? 'active' : 'inactive'}`}>
+            {config.name}
+          </span>
+        </div>
+      );
+    }
+
+    return (
+      <div key={config.id} className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
         <ActionIcon
           size={isActive ? (config.size || 'lg') : 'lg'}
           variant="subtle"
@@ -79,22 +104,6 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
         </span>
       </div>
     );
-
-    // Wrap with Anchor if it has URL navigation
-    if (navProps) {
-      return (
-        <Anchor
-          key={config.id}
-          href={navProps.href}
-          onClick={handleClick}
-          style={{ textDecoration: 'none', color: 'inherit' }}
-        >
-          {buttonElement}
-        </Anchor>
-      );
-    }
-
-    return <div key={config.id}>{buttonElement}</div>;
   };
 
 

frontend/src/components/shared/quickAccessBar/ActiveToolButton.tsx

@@ -143,7 +143,8 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
           <div className="current-tool-content">
             <div className="flex flex-col items-center gap-1">
               <Tooltip content={isBackHover ? 'Back to all tools' : indicatorTool.name} position="right" arrow maxWidth={140}>
-                <Anchor
+                <ActionIcon
+                  component="a"
                   href={getHomeNavigation().href}
                   onClick={(e: React.MouseEvent) => {
                     // Check if it's a special click (middle click, ctrl+click, etc.)
@@ -156,9 +157,6 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
                     setActiveButton('tools');
                     handleBackToTools();
                   }}
-                  style={{ textDecoration: 'none', color: 'inherit' }}
-                >
-                  <ActionIcon
                   size={'xl'}
                   variant="subtle"
                   onMouseEnter={() => setIsBackHover(true)}
@@ -169,7 +167,8 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
                     color: isBackHover ? '#fff' : 'var(--icon-tools-color)',
                     border: 'none',
                     borderRadius: '8px',
-                      cursor: 'pointer'
+                    cursor: 'pointer',
+                    textDecoration: 'none'
                   }}
                 >
                   <span className="iconContainer">
@@ -180,7 +179,6 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
                     )}
                   </span>
                 </ActionIcon>
-                </Anchor>
               </Tooltip>
               <FitText
                 as="span"

frontend/src/components/tools/toolPicker/ToolButton.tsx

@@ -48,14 +48,23 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
     </>
   );
 
+  const handleExternalClick = (e: React.MouseEvent) => {
+    // Check if it's a special click (middle click, ctrl+click, etc.)
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
+      return; // Let browser handle it via href
+    }
+
+    // For regular clicks, prevent default and use window.open
+    e.preventDefault();
+    handleClick(id);
+  };
+
   const buttonElement = navProps ? (
-    // For tools with URLs, wrap in anchor for proper link behavior
-    <Anchor
+    // For internal tools with URLs, render Button as an anchor for proper link behavior
+    <Button
+      component="a"
       href={navProps.href}
       onClick={navProps.onClick}
-      style={{ textDecoration: 'none', color: 'inherit' }}
-    >
-      <Button
       variant={isSelected ? "filled" : "subtle"}
       size="sm"
       radius="md"
@@ -66,9 +75,26 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
     >
       {buttonContent}
     </Button>
-    </Anchor>
+  ) : tool.link && !isUnavailable ? (
+    // For external links, render Button as an anchor with proper href
+    <Button
+      component="a"
+      href={tool.link}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={handleExternalClick}
+      variant={isSelected ? "filled" : "subtle"}
+      size="sm"
+      radius="md"
+      fullWidth
+      justify="flex-start"
+      className="tool-button"
+      styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)" } }}
+    >
+      {buttonContent}
+    </Button>
   ) : (
-    // For external links and unavailable tools, use regular button
+    // For unavailable tools, use regular button
     <Button
       variant={isSelected ? "filled" : "subtle"}
       onClick={() => handleClick(id)}

frontend/src/hooks/useToolNavigation.ts

@@ -46,7 +46,7 @@ export function useToolNavigation(): {
     };
 
     return { href, onClick };
-  }, [actions, handleToolSelect]);
+  }, [handleToolSelect]);
 
   return { getToolNavigation };
 }