Update navigation on tools

frontend/src/contexts/NavigationContext.tsx

@@ -20,6 +20,8 @@ export type ModeType =
   | 'ocr' 
   | 'convert' 
   | 'addPassword' 
+  | 'addWatermark'
+  | 'removePassword'
   | 'changePermissions' 
   | 'sanitize';
 

frontend/src/tools/AddPassword.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useToolFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -16,6 +17,7 @@ import { BaseToolProps } from "../types/tool";
 
 const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
+  const { actions } = useNavigationActions();
   const { selectedFiles } = useToolFileSelection();
 
   const [collapsedPermissions, setCollapsedPermissions] = useState(true);
@@ -28,6 +30,11 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   // Endpoint validation
   const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(addPasswordParams.getEndpointName());
 
+  // Set URL mode when component loads
+  useEffect(() => {
+    actions.setMode("addPassword");
+  }, [actions]);
+
   useEffect(() => {
     addPasswordOperation.resetResults();
     onPreviewFile?.(null);

frontend/src/tools/AddWatermark.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useToolFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -24,6 +25,7 @@ import { BaseToolProps } from "../types/tool";
 
 const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
+  const { actions } = useNavigationActions();
   const { selectedFiles } = useToolFileSelection();
 
   const [collapsedType, setCollapsedType] = useState(false);
@@ -41,6 +43,11 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
   // Endpoint validation
   const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("add-watermark");
 
+  // Set URL mode when component loads
+  useEffect(() => {
+    actions.setMode("addWatermark");
+  }, [actions]);
+
   useEffect(() => {
     watermarkOperation.resetResults();
     onPreviewFile?.(null);

frontend/src/tools/ChangePermissions.tsx

@@ -16,7 +16,6 @@ import { BaseToolProps } from "../types/tool";
 const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
   const { actions } = useNavigationActions();
-  const setCurrentMode = actions.setMode;
   const { selectedFiles } = useToolFileSelection();
 
   const changePermissionsParams = useChangePermissionsParameters();
@@ -49,13 +48,13 @@ const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "changePermissions");
-    setCurrentMode("viewer");
+    actions.setMode("viewer");
   };
 
   const handleSettingsReset = () => {
     changePermissionsOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("changePermissions");
+    actions.setMode("changePermissions");
   };
 
   const hasFiles = selectedFiles.length > 0;

frontend/src/tools/Compress.tsx

@@ -16,7 +16,6 @@ import { useCompressTips } from "../components/tooltips/useCompressTips";
 const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
   const { actions } = useNavigationActions();
-  const setCurrentMode = actions.setMode;
   const { selectedFiles } = useToolFileSelection();
 
   const compressParams = useCompressParameters();
@@ -47,13 +46,13 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "compress");
-    setCurrentMode("viewer");
+    actions.setMode("viewer");
   };
 
   const handleSettingsReset = () => {
     compressOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("compress");
+    actions.setMode("compress");
   };
 
   const hasFiles = selectedFiles.length > 0;

frontend/src/tools/Convert.tsx

@@ -17,7 +17,6 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
   const { selectors } = useFileState();
   const { actions } = useNavigationActions();
-  const setCurrentMode = actions.setMode;
   const activeFiles = selectors.getFiles();
   const { selectedFiles } = useToolFileSelection();
   const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -89,13 +88,13 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "convert");
-    setCurrentMode("viewer");
+    actions.setMode("viewer");
   };
 
   const handleSettingsReset = () => {
     convertOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("convert");
+    actions.setMode("convert");
   };
 
   return createToolFlow({

frontend/src/tools/OCR.tsx

@@ -17,7 +17,6 @@ import { useOCRTips } from "../components/tooltips/useOCRTips";
 const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
   const { actions } = useNavigationActions();
-  const setCurrentMode = actions.setMode;
   const { selectedFiles } = useToolFileSelection();
 
   const ocrParams = useOCRParameters();
@@ -67,13 +66,13 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "ocr");
-    setCurrentMode("viewer");
+    actions.setMode("viewer");
   };
 
   const handleSettingsReset = () => {
     ocrOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("ocr");
+    actions.setMode("ocr");
   };
 
   const settingsCollapsed = expandedStep !== "settings";

frontend/src/tools/RemovePassword.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useToolFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -14,6 +15,7 @@ import { BaseToolProps } from "../types/tool";
 
 const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
+  const { actions } = useNavigationActions();
   const { selectedFiles } = useToolFileSelection();
 
   const removePasswordParams = useRemovePasswordParameters();
@@ -23,6 +25,11 @@ const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   // Endpoint validation
   const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(removePasswordParams.getEndpointName());
 
+  // Set URL mode when component loads
+  useEffect(() => {
+    actions.setMode("removePassword");
+  }, [actions]);
+
   useEffect(() => {
     removePasswordOperation.resetResults();
     onPreviewFile?.(null);

frontend/src/tools/Sanitize.tsx

@@ -16,7 +16,6 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
 
   const { selectedFiles } = useToolFileSelection();
   const { actions } = useNavigationActions();
-  const setCurrentMode = actions.setMode;
 
   const sanitizeParams = useSanitizeParameters();
   const sanitizeOperation = useSanitizeOperation();
@@ -45,13 +44,13 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleSettingsReset = () => {
     sanitizeOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("sanitize");
+    actions.setMode("sanitize");
   };
 
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "sanitize");
-    setCurrentMode("viewer");
+    actions.setMode("viewer");
   };
 
   const hasFiles = selectedFiles.length > 0;

frontend/src/tools/Split.tsx

@@ -14,7 +14,6 @@ import { BaseToolProps } from "../types/tool";
 const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
   const { actions } = useNavigationActions();
-  const setCurrentMode = actions.setMode;
   const { selectedFiles } = useToolFileSelection();
 
   const splitParams = useSplitParameters();
@@ -43,13 +42,13 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "split");
-    setCurrentMode("viewer");
+    actions.setMode("viewer");
   };
 
   const handleSettingsReset = () => {
     splitOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("split");
+    actions.setMode("split");
   };
 
   const hasFiles = selectedFiles.length > 0;