remove old pattern, try something different to show the user they've switched tool

frontend/src/components/shared/AllToolsNavButton.tsx

@@ -1,7 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { ActionIcon, Tooltip } from '@mantine/core';
 import AppsIcon from '@mui/icons-material/AppsRounded';
-import ArrowBackIcon from '@mui/icons-material/ArrowBackRounded';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 
 interface AllToolsNavButtonProps {
@@ -10,8 +9,7 @@ interface AllToolsNavButtonProps {
 }
 
 const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, setActiveButton }) => {
-  const { selectedTool, selectedToolKey, handleReaderToggle, handleBackToTools } = useToolWorkflow();
-  const [isHovered, setIsHovered] = useState(false);
+  const { handleReaderToggle, handleBackToTools } = useToolWorkflow();
 
   const handleClick = () => {
     setActiveButton('tools');
@@ -22,38 +20,25 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
 
   const isActive = activeButton === 'tools';
 
-  const iconNode = (() => {
-    if (selectedToolKey) {
-      if (isHovered) return <ArrowBackIcon sx={{ fontSize: '1.75rem' }} />;
-      return (
-        <span className="iconContainer">
-          {selectedTool?.icon ?? <AppsIcon sx={{ fontSize: '1.75rem' }} />}
-        </span>
-      );
-    }
-    return (
-      <span className="iconContainer">
-        <AppsIcon sx={{ fontSize: '1.75rem' }} />
-      </span>
-    );
-  })();
+  const iconNode = (
+    <span className="iconContainer">
+      <AppsIcon sx={{ fontSize: '1.75rem' }} />
+    </span>
+  );
 
   return (
-    <Tooltip label={selectedToolKey && isHovered ? 'Back to all tools' : 'View all available tools'} position="right">
+    <Tooltip label={'All tools'} position="right">
       <div className="flex flex-col items-center gap-1 mt-4 mb-2">
         <ActionIcon
           size="lg"
           variant="subtle"
           onClick={handleClick}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
           style={{
             backgroundColor: isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
             color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)',
             border: 'none',
             borderRadius: '8px',
           }}
-          className={isActive ? 'activeIconScale' : ''}
         >
           {iconNode}
         </ActionIcon>

frontend/src/components/tools/ToolPicker.tsx

@@ -45,6 +45,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
 
   const SubcategoryHeader: React.FC<{ label: string; mt?: string | number; mb?: string | number }> = ({ label, mt = "1rem", mb = "0.25rem" }) => (
     <div className="tool-subcategory-row" style={{ marginLeft: "1rem", marginRight: "1rem", marginTop: mt, marginBottom: mb }}>
+      <div className="tool-subcategory-row-rule" />
       <span className="tool-subcategory-row-title">{label}</span>
       <div className="tool-subcategory-row-rule" />
     </div>

frontend/src/components/tools/toolPicker/ToolPicker.css

@@ -45,14 +45,14 @@
 .tool-subcategory-row-title {
   text-transform: uppercase;
   font-weight: 600;
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   color: var(--tool-subcategory-text-color);
   white-space: nowrap;
 }
 
 .tool-subcategory-row-rule {
   height: 1px;
-  background-color: var(--tool-subcategory-text-color);
+  background-color: var(--tool-subcategory-rule-color);
   flex: 1 1 auto;
 }
 

frontend/src/styles/theme.css

@@ -128,7 +128,8 @@
   --tool-header-badge-text: #004E99;
 
   /* Subcategory title styling (light mode) */
-  --tool-subcategory-text-color: #6B7280;
+  --tool-subcategory-text-color: #9CA3AF; /* lighter text */
+  --tool-subcategory-rule-color: #E5E7EB; /* doubly lighter rule line */
   --accent-interactive: #4A90E2;
   --text-instruction: #4A90E2;
   --text-brand: var(--color-gray-700);
@@ -274,7 +275,8 @@
   --tool-header-badge-text: #FFFFFF;
 
   /* Subcategory title styling (dark mode) */
-  --tool-subcategory-text-color: #6B7280;
+  --tool-subcategory-text-color: #9CA3AF; /* lighter text in dark mode as well */
+  --tool-subcategory-rule-color: #3A4047; /* doubly lighter (relative) line in dark */
 }
 
 /* Dropzone drop state styling */