Feature/v2/all tools sidebar (#4151)

# Description of Changes

- Added the all tools sidebar
- Added a TextFit component that shrinks text to fit containers
- Added a TopToolIcon on the nav, that animates down to give users
feedback on what tool is selected
- Added the baseToolRegistry, to replace the old pattern of listing
tools, allowing us to clean up the ToolRegistry code
- Fixed Mantine light/dark theme race condition 
- General styling tweaks

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/components/tools/ToolPanel.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { TextInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
-import { useToolPanelState, useToolSelection, useWorkbenchState } from '../../contexts/ToolWorkflowContext';
+import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import ToolPicker from './ToolPicker';
+import SearchResults from './SearchResults';
 import ToolRenderer from './ToolRenderer';
+import ToolSearch from './toolPicker/ToolSearch';
 import { useSidebarContext } from "../../contexts/SidebarContext";
 import rainbowStyles from '../../styles/rainbow.module.css';
 
@@ -23,12 +24,13 @@ export default function ToolPanel() {
     isPanelVisible,
     searchQuery,
     filteredTools,
+    toolRegistry,
     setSearchQuery,
     handleBackToTools
-  } = useToolPanelState();
+  } = useToolWorkflow();
 
-  const { selectedToolKey, handleToolSelect } = useToolSelection();
-  const { setPreviewFile } = useWorkbenchState();
+  const { selectedToolKey, handleToolSelect } = useToolWorkflow();
+  const { setPreviewFile } = useToolWorkflow();
 
   return (
     <div
@@ -52,23 +54,39 @@ export default function ToolPanel() {
         }}
       >
         {/* Search Bar - Always visible at the top */}
-        <div className="mb-4">
-          <TextInput
-            placeholder={t("toolPicker.searchPlaceholder", "Search tools...")}
+        <div
+          style={{
+            backgroundColor: 'var(--tool-panel-search-bg)',
+            borderBottom: '1px solid var(--tool-panel-search-border-bottom)',
+            padding: '0.75rem 1rem',
+          }}
+        >
+          <ToolSearch
             value={searchQuery}
-            onChange={(e) => setSearchQuery(e.currentTarget.value)}
-            autoComplete="off"
-            size="sm"
+            onChange={setSearchQuery}
+            toolRegistry={toolRegistry}
+            mode="filter"
           />
         </div>
 
-        {leftPanelView === 'toolPicker' ? (
+        {searchQuery.trim().length > 0 ? (
+          // Searching view (replaces both picker and content)
+          <div className="flex-1 flex flex-col">
+            <div className="flex-1 min-h-0">
+              <SearchResults
+                filteredTools={filteredTools}
+                onSelect={handleToolSelect}
+              />
+            </div>
+          </div>
+        ) : leftPanelView === 'toolPicker' ? (
           // Tool Picker View
           <div className="flex-1 flex flex-col">
             <ToolPicker
               selectedToolKey={selectedToolKey}
               onSelect={handleToolSelect}
               filteredTools={filteredTools}
+              isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
             />
           </div>
         ) : (
@@ -76,10 +94,12 @@ export default function ToolPanel() {
           <div className="flex-1 flex flex-col">
             {/* Tool content */}
             <div className="flex-1 min-h-0">
-              <ToolRenderer
-                selectedToolKey={selectedToolKey || ''}
-                onPreviewFile={setPreviewFile}
-              />
+              {selectedToolKey && (
+                <ToolRenderer
+                  selectedToolKey={selectedToolKey}
+                  onPreviewFile={setPreviewFile}
+                />
+              )}
             </div>
           </div>
         )}