use translations

frontend/public/locales/en-GB/translation.json

@@ -1738,7 +1738,20 @@
     "searchPlaceholder": "Search tools...",
     "noToolsFound": "No tools found",
     "allTools": "ALL TOOLS",
-    "quickAccess": "QUICK ACCESS"
+    "quickAccess": "QUICK ACCESS",
+    "subcategories": {
+      "Signing": "Signing",
+      "Document Security": "Document Security",
+      "Verification": "Verification",
+      "Document Review": "Document Review",
+      "Page Formatting": "Page Formatting",
+      "Extraction": "Extraction",
+      "Removal": "Removal",
+      "Automation": "Automation",
+      "General": "General",
+      "Advanced Formatting": "Advanced Formatting",
+      "Developer Tools": "Developer Tools"
+    }
   },
   "quickAccess": {
     "read": "Read",

frontend/src/components/tools/SearchResults.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { Box, Stack, Text } from '@mantine/core';
 import { type ToolRegistryEntry } from '../../data/toolRegistry';
 import ToolButton from './toolPicker/ToolButton';
+import { useTranslation } from 'react-i18next';
 
 interface SearchResultsProps {
   filteredTools: [string, ToolRegistryEntry][];
@@ -9,6 +10,7 @@ interface SearchResultsProps {
 }
 
 const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }) => {
+  const { t } = useTranslation();
   // Group tools by subcategory and remove duplicates
   const groupedToolsByCategory = useMemo(() => {
     const categoryToToolsMap: Record<string, Array<{ id: string; tool: ToolRegistryEntry }>> = {};
@@ -43,7 +45,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }
   if (groupedToolsByCategory.length === 0) {
     return (
       <Text c="dimmed" size="sm" p="sm">
-        No tools found
+        {t('toolPicker.noToolsFound', 'No tools found')}
       </Text>
     );
   }
@@ -53,7 +55,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }
       {groupedToolsByCategory.map(categoryGroup => (
         <Box key={categoryGroup.categoryName} w="100%">
           <Text size="sm" fw={500} mb="0.25rem" mt="1rem" className="tool-subcategory-title">
-            {categoryGroup.categoryName}
+            {t(`toolPicker.subcategories.${categoryGroup.categoryName}`, categoryGroup.categoryName)}
           </Text>
           <Stack gap="xs">
             {categoryGroup.toolsInCategory.map(({ id, tool }) => (

frontend/src/components/tools/ToolPanel.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useMantineColorScheme } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
 import { useToolPanelState, useToolSelection, useWorkbenchState } from '../../contexts/ToolWorkflowContext';

frontend/src/components/tools/ToolPicker.tsx

@@ -30,6 +30,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
   const quickAccessRef = useRef<HTMLDivElement>(null);
   const allToolsRef = useRef<HTMLDivElement>(null);
 
+  // On resize adjust headers height to offset height
   useLayoutEffect(() => {
     const update = () => {
       if (quickHeaderRef.current) {
@@ -53,16 +54,14 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
     </div>
   );
 
-  const { sections } = useToolSections(filteredTools);
-
-  const visibleSections = sections;
+  const { sections: visibleSections } = useToolSections(filteredTools);
 
   const quickSection = useMemo(
-    () => visibleSections.find(s => s.title === "QUICK ACCESS"),
+    () => visibleSections.find(s => (s as any).key === 'quick'),
     [visibleSections]
   );
   const allSection = useMemo(
-    () => visibleSections.find(s => s.title === "ALL TOOLS"),
+    () => visibleSections.find(s => (s as any).key === 'all'),
     [visibleSections]
   );
 

frontend/src/hooks/useToolSections.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { type ToolRegistryEntry, SUBCATEGORY_ORDER } from '../data/toolRegistry';
+import { useTranslation } from 'react-i18next';
 
 type GroupedTools = {
   [category: string]: {
@@ -8,6 +9,8 @@ type GroupedTools = {
 };
 
 export function useToolSections(filteredTools: [string, ToolRegistryEntry][]) {
+  const { t } = useTranslation();
+
   const groupedTools = useMemo(() => {
     const grouped: GroupedTools = {};
     filteredTools.forEach(([id, tool]) => {
@@ -56,8 +59,8 @@ export function useToolSections(filteredTools: [string, ToolRegistryEntry][]) {
         .map(([subcategory, tools]) => ({ subcategory, tools }));
 
     const built = [
-      { title: 'QUICK ACCESS', subcategories: sortSubs(quick) },
-      { title: 'ALL TOOLS', subcategories: sortSubs(all) }
+      { key: 'quick', title: t('toolPicker.quickAccess', 'QUICK ACCESS'), subcategories: sortSubs(quick) },
+      { key: 'all', title: t('toolPicker.allTools', 'ALL TOOLS'), subcategories: sortSubs(all) }
     ];
 
     return built.filter(section => section.subcategories.some(sc => sc.tools.length > 0));