Use new tool workflow for Remove Password

frontend/src/tools/RemovePassword.tsx

@@ -1,16 +1,10 @@
-import { useEffect, useMemo } from "react";
-import { Box, Button, Stack, Text } from "@mantine/core";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import DownloadIcon from "@mui/icons-material/Download";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileContext } from "../contexts/FileContext";
 import { useToolFileSelection } from "../contexts/FileSelectionContext";
 
-import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
-import OperationButton from "../components/tools/shared/OperationButton";
-import ErrorNotification from "../components/tools/shared/ErrorNotification";
-import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
-import ResultsPreview from "../components/tools/shared/ResultsPreview";
+import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import RemovePasswordSettings from "../components/tools/removePassword/RemovePasswordSettings";
 
@@ -34,137 +28,71 @@ const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   useEffect(() => {
     removePasswordOperation.resetResults();
     onPreviewFile?.(null);
-  }, [removePasswordParams.parameters, selectedFiles]);
+  }, [removePasswordParams.parameters]);
 
   const handleRemovePassword = async () => {
     try {
-      await removePasswordOperation.executeOperation(
-        removePasswordParams.parameters,
-        selectedFiles
-      );
+      await removePasswordOperation.executeOperation(removePasswordParams.parameters, selectedFiles);
       if (removePasswordOperation.files && onComplete) {
         onComplete(removePasswordOperation.files);
       }
     } catch (error) {
       if (onError) {
-        onError(error instanceof Error ? error.message : t('removePassword.error.failed', 'Remove password operation failed'));
+        onError(error instanceof Error ? error.message : t("removePassword.error.failed", "Remove password operation failed"));
       }
     }
   };
 
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
-    sessionStorage.setItem('previousMode', 'removePassword');
-    setCurrentMode('viewer');
+    sessionStorage.setItem("previousMode", "removePassword");
+    setCurrentMode("viewer");
   };
 
   const handleSettingsReset = () => {
     removePasswordOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode('removePassword');
+    setCurrentMode("removePassword");
   };
 
   const hasFiles = selectedFiles.length > 0;
   const hasResults = removePasswordOperation.files.length > 0 || removePasswordOperation.downloadUrl !== null;
-  const filesCollapsed = hasFiles;
-  const passwordCollapsed = hasResults;
+  const passwordCollapsed = !hasFiles || hasResults;
 
-  const previewResults = useMemo(() =>
-    removePasswordOperation.files?.map((file, index) => ({
-      file,
-      thumbnail: removePasswordOperation.thumbnails[index]
-    })) || [],
-    [removePasswordOperation.files, removePasswordOperation.thumbnails]
-  );
-
-  return (
-    <ToolStepContainer>
-      <Stack gap="sm" h="94vh" p="sm" style={{ overflow: 'auto' }}>
-        {/* Files Step */}
-        <ToolStep
-          title={t('files.title', 'Files')}
-          isVisible={true}
-          isCollapsed={filesCollapsed}
-          isCompleted={filesCollapsed}
-          completedMessage={hasFiles ?
-            selectedFiles.length === 1
-              ? t('files.selected.single', 'Selected: {{filename}}', { filename: selectedFiles[0].name })
-              : t('files.selected.multiple', 'Selected: {{count}} files', { count: selectedFiles.length })
-            : undefined}
-        >
-          <FileStatusIndicator
-            selectedFiles={selectedFiles}
-            placeholder={t('files.placeholder', 'Select a PDF file in the main view to get started')}
-          />
-        </ToolStep>
-
-        {/* Password Step */}
-        <ToolStep
-          title={t('removePassword.title', 'Remove Password')}
-          isVisible={hasFiles}
-          isCollapsed={passwordCollapsed}
-          isCompleted={passwordCollapsed}
-          onCollapsedClick={hasResults ? handleSettingsReset : undefined}
-          completedMessage={passwordCollapsed ? t('removePassword.password.completed', 'Password configured') : undefined}
-          tooltip={removePasswordTips}
-        >
+  return createToolFlow({
+    files: {
+      selectedFiles,
+      isCollapsed: hasFiles || hasResults,
+    },
+    steps: [
+      {
+        title: t("removePassword.password.stepTitle", "Password"),
+        isCollapsed: passwordCollapsed,
+        onCollapsedClick: hasResults ? handleSettingsReset : undefined,
+        tooltip: removePasswordTips,
+        content: (
           <RemovePasswordSettings
             parameters={removePasswordParams.parameters}
             onParameterChange={removePasswordParams.updateParameter}
             disabled={endpointLoading}
           />
-        </ToolStep>
-
-        <Box mt="md">
-          <OperationButton
-            onClick={handleRemovePassword}
-            isLoading={removePasswordOperation.isLoading}
-            disabled={!removePasswordParams.validateParameters() || !hasFiles || !endpointEnabled}
-            loadingText={t('loading')}
-            submitText={t('removePassword.submit', 'Remove Password')}
-          />
-        </Box>
-
-        {/* Results Step */}
-        <ToolStep
-          title={t('results.title', 'Results')}
-          isVisible={hasResults}
-        >
-          <Stack gap="sm">
-            {removePasswordOperation.status && (
-              <Text size="sm" c="dimmed">{removePasswordOperation.status}</Text>
-            )}
-
-            <ErrorNotification
-              error={removePasswordOperation.errorMessage}
-              onClose={removePasswordOperation.clearError}
-            />
-
-            {removePasswordOperation.downloadUrl && (
-              <Button
-                component="a"
-                href={removePasswordOperation.downloadUrl}
-                download={removePasswordOperation.downloadFilename}
-                leftSection={<DownloadIcon />}
-                color="green"
-                fullWidth
-                mb="md"
-              >
-                {t("download", "Download")}
-              </Button>
-            )}
-
-            <ResultsPreview
-              files={previewResults}
-              onFileClick={handleThumbnailClick}
-              isGeneratingThumbnails={removePasswordOperation.isGeneratingThumbnails}
-              title={t('removePassword.results.title', 'Decrypted PDFs')}
-            />
-          </Stack>
-        </ToolStep>
-      </Stack>
-    </ToolStepContainer>
-  );
-}
+        ),
+      },
+    ],
+    executeButton: {
+      text: t("removePassword.submit", "Remove Password"),
+      isVisible: !hasResults,
+      loadingText: t("loading"),
+      onClick: handleRemovePassword,
+      disabled: !removePasswordParams.validateParameters() || !hasFiles || !endpointEnabled,
+    },
+    review: {
+      isVisible: hasResults,
+      operation: removePasswordOperation,
+      title: t("removePassword.results.title", "Decrypted PDFs"),
+      onFileClick: handleThumbnailClick,
+    },
+  });
+};
 
 export default RemovePassword;