diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index afc0f18c4..81cdb73d6 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/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", diff --git a/frontend/src/components/tools/SearchResults.tsx b/frontend/src/components/tools/SearchResults.tsx index 66807d809..48f238dde 100644 --- a/frontend/src/components/tools/SearchResults.tsx +++ b/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 = ({ filteredTools, onSelect }) => { + const { t } = useTranslation(); // Group tools by subcategory and remove duplicates const groupedToolsByCategory = useMemo(() => { const categoryToToolsMap: Record> = {}; @@ -43,7 +45,7 @@ const SearchResults: React.FC = ({ filteredTools, onSelect } if (groupedToolsByCategory.length === 0) { return ( - No tools found + {t('toolPicker.noToolsFound', 'No tools found')} ); } @@ -53,7 +55,7 @@ const SearchResults: React.FC = ({ filteredTools, onSelect } {groupedToolsByCategory.map(categoryGroup => ( - {categoryGroup.categoryName} + {t(`toolPicker.subcategories.${categoryGroup.categoryName}`, categoryGroup.categoryName)} {categoryGroup.toolsInCategory.map(({ id, tool }) => ( diff --git a/frontend/src/components/tools/ToolPanel.tsx b/frontend/src/components/tools/ToolPanel.tsx index 480fd9d3a..334433648 100644 --- a/frontend/src/components/tools/ToolPanel.tsx +++ b/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'; diff --git a/frontend/src/components/tools/ToolPicker.tsx b/frontend/src/components/tools/ToolPicker.tsx index f000f9cbc..39ed8ad5c 100644 --- a/frontend/src/components/tools/ToolPicker.tsx +++ b/frontend/src/components/tools/ToolPicker.tsx @@ -30,6 +30,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa const quickAccessRef = useRef(null); const allToolsRef = useRef(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 ); - 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] ); diff --git a/frontend/src/hooks/useToolSections.ts b/frontend/src/hooks/useToolSections.ts index 2178e22f8..c79421d90 100644 --- a/frontend/src/hooks/useToolSections.ts +++ b/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));