Fix suggested tools

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

@@ -732,7 +732,8 @@
     "officeDocs": "Office Documents (Word, Excel, PowerPoint)",
     "imagesExt": "Images (JPG, PNG, etc.)",
     "markdown": "Markdown",
-    "textRtf": "Text/RTF"
+    "textRtf": "Text/RTF",
+    "grayscale": "Greyscale"
   },
   "imageToPdf": {
     "tags": "conversion,img,jpg,picture,photo"
@@ -2017,7 +2018,8 @@
     "downloadSelected": "Download Selected",
     "selectedCount": "{{count}} selected",
     "download": "Download",
-    "delete": "Delete"
+    "delete": "Delete",
+    "unsupported":"Unsupported"
   },
   "storage": {
     "temporaryNotice": "Files are stored temporarily in your browser and may be cleared automatically",

frontend/src/components/tools/shared/SuggestedToolsSection.tsx

@@ -1,22 +1,13 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Stack, Text, Divider, Card, Group } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useSuggestedTools } from '../../../hooks/useSuggestedTools';
-import { useNavigationActions, useNavigationState, type ModeType } from '../../../contexts/NavigationContext';
 
 export interface SuggestedToolsSectionProps {}
 
 export function SuggestedToolsSection(): React.ReactElement {
   const { t } = useTranslation();
-  const { actions } = useNavigationActions();
-  const { currentMode } = useNavigationState();
-  
-  // Create handleToolSelect function that navigates to the tool
-  const handleToolSelect = useCallback((toolId: string) => {
-    actions.setMode(toolId as ModeType);
-  }, [actions]);
-  
-  const suggestedTools = useSuggestedTools(currentMode, handleToolSelect);
+  const suggestedTools = useSuggestedTools();
 
   return (
     <Stack gap="md">

frontend/src/hooks/useSuggestedTools.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useToolWorkflow } from '../contexts/ToolWorkflowContext';
 
 // Material UI Icons
 import CompressIcon from '@mui/icons-material/Compress';
@@ -42,15 +43,17 @@ const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'navigate'>[] = [
   }
 ];
 
-export function useSuggestedTools(selectedToolKey?: string | null, handleToolSelect?: (toolId: string) => void): SuggestedTool[] {
+export function useSuggestedTools(): SuggestedTool[] {
+  const { handleToolSelect, selectedToolKey } = useToolWorkflow();
+
   return useMemo(() => {
     // Filter out the current tool
     const filteredTools = ALL_SUGGESTED_TOOLS.filter(tool => tool.name !== selectedToolKey);
-    
+
     // Add navigation function to each tool
     return filteredTools.map(tool => ({
       ...tool,
-      navigate: handleToolSelect ? () => handleToolSelect(tool.name) : () => {}
+      navigate: () => handleToolSelect(tool.name)
     }));
   }, [selectedToolKey, handleToolSelect]);
-}
+}