From d06cbcaa91359cbd9efc6b0f2218b6125bd34920 Mon Sep 17 00:00:00 2001 From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com> Date: Wed, 20 Aug 2025 16:54:30 +0100 Subject: [PATCH] V2 Files Selected indicator in toolstep (#4241) Added back our files selected indicator in tools step --------- Co-authored-by: Connor Yoh --- .../tools/shared/FileStatusIndicator.tsx | 22 ++++++++++++------- frontend/src/tools/AddPassword.tsx | 2 +- frontend/src/tools/AddWatermark.tsx | 2 +- frontend/src/tools/ChangePermissions.tsx | 2 +- frontend/src/tools/Compress.tsx | 2 +- frontend/src/tools/Convert.tsx | 3 +-- frontend/src/tools/OCR.tsx | 2 +- frontend/src/tools/RemovePassword.tsx | 2 +- frontend/src/tools/Repair.tsx | 4 ++-- frontend/src/tools/Sanitize.tsx | 3 +-- frontend/src/tools/Split.tsx | 3 +-- 11 files changed, 25 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/tools/shared/FileStatusIndicator.tsx b/frontend/src/components/tools/shared/FileStatusIndicator.tsx index e6f0b2e2f..22a25e627 100644 --- a/frontend/src/components/tools/shared/FileStatusIndicator.tsx +++ b/frontend/src/components/tools/shared/FileStatusIndicator.tsx @@ -1,5 +1,6 @@ -import React from 'react'; -import { Text } from '@mantine/core'; +import React from "react"; +import { Text } from "@mantine/core"; +import { useTranslation } from "react-i18next"; export interface FileStatusIndicatorProps { selectedFiles?: File[]; @@ -8,20 +9,25 @@ export interface FileStatusIndicatorProps { const FileStatusIndicator = ({ selectedFiles = [], - placeholder = "Select a PDF file in the main view to get started" + placeholder, }: FileStatusIndicatorProps) => { + const { t } = useTranslation(); + const defaultPlaceholder = placeholder || t("files.placeholder", "Select a PDF file in the main view to get started"); // Only show content when no files are selected if (selectedFiles.length === 0) { return ( - {placeholder} + {defaultPlaceholder} ); } - // Return nothing when files are selected - return null; -} + return ( + + ✓ {selectedFiles.length === 1 ? t("fileSelected", "Selected: {{filename}}", { filename: selectedFiles[0]?.name }) : t("filesSelected", "{{count}} files selected", { count: selectedFiles.length })} + + ); +}; -export default FileStatusIndicator; \ No newline at end of file +export default FileStatusIndicator; diff --git a/frontend/src/tools/AddPassword.tsx b/frontend/src/tools/AddPassword.tsx index 35e97e1b4..20b603044 100644 --- a/frontend/src/tools/AddPassword.tsx +++ b/frontend/src/tools/AddPassword.tsx @@ -68,7 +68,7 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { return createToolFlow({ files: { selectedFiles, - isCollapsed: hasFiles || hasResults, + isCollapsed: hasResults, }, steps: [ { diff --git a/frontend/src/tools/AddWatermark.tsx b/frontend/src/tools/AddWatermark.tsx index 3f2357a7e..01306e6f0 100644 --- a/frontend/src/tools/AddWatermark.tsx +++ b/frontend/src/tools/AddWatermark.tsx @@ -189,7 +189,7 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => return createToolFlow({ files: { selectedFiles, - isCollapsed: hasFiles || hasResults, + isCollapsed: hasResults, }, steps: getSteps(), executeButton: { diff --git a/frontend/src/tools/ChangePermissions.tsx b/frontend/src/tools/ChangePermissions.tsx index 9a9647759..928422059 100644 --- a/frontend/src/tools/ChangePermissions.tsx +++ b/frontend/src/tools/ChangePermissions.tsx @@ -64,7 +64,7 @@ const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps return createToolFlow({ files: { selectedFiles, - isCollapsed: hasFiles || hasResults, + isCollapsed: hasResults, }, steps: [ { diff --git a/frontend/src/tools/Compress.tsx b/frontend/src/tools/Compress.tsx index ace479b8e..d7e0ebc2c 100644 --- a/frontend/src/tools/Compress.tsx +++ b/frontend/src/tools/Compress.tsx @@ -62,7 +62,7 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { return createToolFlow({ files: { selectedFiles, - isCollapsed: hasFiles && !hasResults, + isCollapsed: hasResults, }, steps: [ { diff --git a/frontend/src/tools/Convert.tsx b/frontend/src/tools/Convert.tsx index 0bef140ba..e2616f4a4 100644 --- a/frontend/src/tools/Convert.tsx +++ b/frontend/src/tools/Convert.tsx @@ -34,7 +34,6 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { const hasFiles = selectedFiles.length > 0; const hasResults = convertOperation.downloadUrl !== null; - const filesCollapsed = hasFiles; const settingsCollapsed = hasResults; useEffect(() => { @@ -97,7 +96,7 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { return createToolFlow({ files: { selectedFiles, - isCollapsed: filesCollapsed, + isCollapsed: hasResults, placeholder: t("convert.selectFilesPlaceholder", "Select files in the main view to get started"), }, steps: [ diff --git a/frontend/src/tools/OCR.tsx b/frontend/src/tools/OCR.tsx index b44b349f7..72fac0b37 100644 --- a/frontend/src/tools/OCR.tsx +++ b/frontend/src/tools/OCR.tsx @@ -80,7 +80,7 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { return createToolFlow({ files: { selectedFiles, - isCollapsed: hasFiles || hasResults, + isCollapsed: hasResults, }, steps: [ { diff --git a/frontend/src/tools/RemovePassword.tsx b/frontend/src/tools/RemovePassword.tsx index 42f22ba9c..31744186b 100644 --- a/frontend/src/tools/RemovePassword.tsx +++ b/frontend/src/tools/RemovePassword.tsx @@ -62,7 +62,7 @@ const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) = return createToolFlow({ files: { selectedFiles, - isCollapsed: hasFiles || hasResults, + isCollapsed: hasResults, }, steps: [ { diff --git a/frontend/src/tools/Repair.tsx b/frontend/src/tools/Repair.tsx index a3b63f591..fc30b9b95 100644 --- a/frontend/src/tools/Repair.tsx +++ b/frontend/src/tools/Repair.tsx @@ -57,7 +57,7 @@ const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { return createToolFlow({ files: { selectedFiles, - isCollapsed: hasFiles || hasResults, + isCollapsed: hasResults, placeholder: t("repair.files.placeholder", "Select a PDF file in the main view to get started"), }, steps: [], @@ -77,4 +77,4 @@ const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { }); }; -export default Repair; \ No newline at end of file +export default Repair; diff --git a/frontend/src/tools/Sanitize.tsx b/frontend/src/tools/Sanitize.tsx index 2874e54e4..258f0f930 100644 --- a/frontend/src/tools/Sanitize.tsx +++ b/frontend/src/tools/Sanitize.tsx @@ -55,13 +55,12 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { const hasFiles = selectedFiles.length > 0; const hasResults = sanitizeOperation.files.length > 0; - const filesCollapsed = hasFiles || hasResults; const settingsCollapsed = !hasFiles || hasResults; return createToolFlow({ files: { selectedFiles, - isCollapsed: filesCollapsed, + isCollapsed: hasResults, placeholder: t("sanitize.files.placeholder", "Select a PDF file in the main view to get started"), }, steps: [ diff --git a/frontend/src/tools/Split.tsx b/frontend/src/tools/Split.tsx index f0e35dfb0..ea68404f0 100644 --- a/frontend/src/tools/Split.tsx +++ b/frontend/src/tools/Split.tsx @@ -54,13 +54,12 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { const hasFiles = selectedFiles.length > 0; const hasResults = splitOperation.downloadUrl !== null; - const filesCollapsed = hasFiles || hasResults; const settingsCollapsed = !hasFiles || hasResults; return createToolFlow({ files: { selectedFiles, - isCollapsed: filesCollapsed, + isCollapsed: hasResults, placeholder: "Select a PDF file in the main view to get started", }, steps: [