diff --git a/frontend/src/contexts/NavigationContext.tsx b/frontend/src/contexts/NavigationContext.tsx index 328972c79..8bffdfe9e 100644 --- a/frontend/src/contexts/NavigationContext.tsx +++ b/frontend/src/contexts/NavigationContext.tsx @@ -20,6 +20,8 @@ export type ModeType = | 'ocr' | 'convert' | 'addPassword' + | 'addWatermark' + | 'removePassword' | 'changePermissions' | 'sanitize'; diff --git a/frontend/src/tools/AddPassword.tsx b/frontend/src/tools/AddPassword.tsx index 68b175c7a..7d27a1071 100644 --- a/frontend/src/tools/AddPassword.tsx +++ b/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); diff --git a/frontend/src/tools/AddWatermark.tsx b/frontend/src/tools/AddWatermark.tsx index bd3b9b3a0..b878ef13a 100644 --- a/frontend/src/tools/AddWatermark.tsx +++ b/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); diff --git a/frontend/src/tools/ChangePermissions.tsx b/frontend/src/tools/ChangePermissions.tsx index 89bc78e94..0c7b2de63 100644 --- a/frontend/src/tools/ChangePermissions.tsx +++ b/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; diff --git a/frontend/src/tools/Compress.tsx b/frontend/src/tools/Compress.tsx index 8283a131e..a985e5c82 100644 --- a/frontend/src/tools/Compress.tsx +++ b/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; diff --git a/frontend/src/tools/Convert.tsx b/frontend/src/tools/Convert.tsx index cf3499842..38a47598b 100644 --- a/frontend/src/tools/Convert.tsx +++ b/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(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({ diff --git a/frontend/src/tools/OCR.tsx b/frontend/src/tools/OCR.tsx index 44b071ad4..14db45505 100644 --- a/frontend/src/tools/OCR.tsx +++ b/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"; diff --git a/frontend/src/tools/RemovePassword.tsx b/frontend/src/tools/RemovePassword.tsx index 47127cdad..d84ea9a0f 100644 --- a/frontend/src/tools/RemovePassword.tsx +++ b/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); diff --git a/frontend/src/tools/Sanitize.tsx b/frontend/src/tools/Sanitize.tsx index 9ca5793fb..64a25549c 100644 --- a/frontend/src/tools/Sanitize.tsx +++ b/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; diff --git a/frontend/src/tools/Split.tsx b/frontend/src/tools/Split.tsx index 03429fb06..4fa608460 100644 --- a/frontend/src/tools/Split.tsx +++ b/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;