From bb94334406e9d0ffccfe14e71030794e7f764a95 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Tue, 12 Aug 2025 17:05:01 +0100
Subject: [PATCH] Sanitize Updated

---
 frontend/src/tools/Sanitize.tsx | 126 ++++++++------------------------
 1 file changed, 32 insertions(+), 94 deletions(-)

diff --git a/frontend/src/tools/Sanitize.tsx b/frontend/src/tools/Sanitize.tsx
index 6a4e9ac49..820b64429 100644
--- a/frontend/src/tools/Sanitize.tsx
+++ b/frontend/src/tools/Sanitize.tsx
@@ -1,15 +1,10 @@
 import { useEffect } from "react";
-import { Button, Stack, Text } from "@mantine/core";
+import { Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import DownloadIcon from "@mui/icons-material/Download";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 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 SanitizeSettings from "../components/tools/sanitize/SanitizeSettings";
 
 import { useSanitizeParameters } from "../hooks/tools/sanitize/useSanitizeParameters";
@@ -55,6 +50,7 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleSettingsReset = () => {
     sanitizeOperation.resetResults();
     onPreviewFile?.(null);
+    setCurrentMode('sanitize');
   };
 
   const handleThumbnailClick = (file: File) => {
@@ -66,100 +62,42 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const hasFiles = selectedFiles.length > 0;
   const hasResults = sanitizeOperation.files.length > 0;
   const filesCollapsed = hasFiles;
-  const settingsCollapsed = hasResults;
+  const settingsCollapsed = !hasFiles || hasResults;
 
   return (
-    <ToolStepContainer>
-      <Stack gap="sm" p="sm" style={{ height: '100vh', overflow: 'auto' }}>
-        {/* Files Step */}
-        <ToolStep
-          title={t('sanitize.steps.files', 'Files')}
-          isVisible={true}
-          isCollapsed={filesCollapsed}
-          isCompleted={filesCollapsed}
-          completedMessage={hasFiles ?
-            selectedFiles.length === 1
-              ? t('fileSelected', 'Selected: {{filename}}', { filename: selectedFiles[0].name })
-              : t('filesSelected', 'Selected: {{count}} files', { count: selectedFiles.length })
-            : undefined}
-        >
-          <FileStatusIndicator
-            selectedFiles={selectedFiles}
-            placeholder={t('sanitize.files.placeholder', 'Select a PDF file in the main view to get started')}
-          />
-        </ToolStep>
-
-        {/* Settings Step */}
-        <ToolStep
-          title={t('sanitize.steps.settings', 'Settings')}
-          isVisible={hasFiles}
-          isCollapsed={settingsCollapsed}
-          isCompleted={settingsCollapsed}
-          onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
-          completedMessage={settingsCollapsed ? t('sanitize.completed', 'Sanitization completed') : undefined}
-        >
-          <Stack gap="sm">
+    <Stack gap="sm" p="sm" style={{ height: '100vh', overflow: 'auto' }}>
+      {createToolFlow({
+        files: {
+          selectedFiles,
+          isCollapsed: filesCollapsed,
+          placeholder: t('sanitize.files.placeholder', 'Select a PDF file in the main view to get started')
+        },
+        steps: [{
+          title: t('sanitize.steps.settings', 'Settings'),
+          isCollapsed: settingsCollapsed,
+          onCollapsedClick: settingsCollapsed ? handleSettingsReset : undefined,
+          content: (
             <SanitizeSettings
               parameters={sanitizeParams.parameters}
               onParameterChange={sanitizeParams.updateParameter}
               disabled={endpointLoading}
             />
-
-            <OperationButton
-              onClick={handleSanitize}
-              isLoading={sanitizeOperation.isLoading}
-              disabled={!sanitizeParams.validateParameters() || !hasFiles || !endpointEnabled}
-              loadingText={t("loading")}
-              submitText={t("sanitize.submit", "Sanitize PDF")}
-            />
-          </Stack>
-        </ToolStep>
-
-        {/* Results Step */}
-        <ToolStep
-          title={t('sanitize.steps.results', 'Results')}
-          isVisible={hasResults}
-        >
-          <Stack gap="sm">
-            {sanitizeOperation.status && (
-              <Text size="sm" c="dimmed">{sanitizeOperation.status}</Text>
-            )}
-
-            <ErrorNotification
-              error={sanitizeOperation.errorMessage}
-              onClose={sanitizeOperation.clearError}
-            />
-
-            {sanitizeOperation.downloadUrl && (
-              <Button
-                component="a"
-                href={sanitizeOperation.downloadUrl}
-                download={sanitizeOperation.downloadFilename}
-                leftSection={<DownloadIcon />}
-                color="green"
-                fullWidth
-                mb="md"
-              >
-                {sanitizeOperation.files.length === 1
-                  ? t("download", "Download")
-                  : t("downloadZip", "Download ZIP")
-                }
-              </Button>
-            )}
-
-            <ResultsPreview
-              files={sanitizeOperation.files.map((file, index) => ({
-                file,
-                thumbnail: sanitizeOperation.thumbnails[index]
-              }))}
-              onFileClick={handleThumbnailClick}
-              isGeneratingThumbnails={sanitizeOperation.isGeneratingThumbnails}
-              title={t("sanitize.sanitizationResults", "Sanitization Results")}
-            />
-          </Stack>
-        </ToolStep>
-      </Stack>
-    </ToolStepContainer>
+          )
+        }],
+        executeButton: {
+          text: t("sanitize.submit", "Sanitize PDF"),
+          loadingText: t("loading"),
+          onClick: handleSanitize,
+          disabled: !sanitizeParams.validateParameters() || !hasFiles || !endpointEnabled
+        },
+        results: {
+          isVisible: hasResults,
+          operation: sanitizeOperation,
+          title: t("sanitize.sanitizationResults", "Sanitization Results"),
+          onFileClick: handleThumbnailClick
+        }
+      })}
+    </Stack>
   );
 }