V2 Files Selected indicator in toolstep (#4241)

Added back our files selected indicator in tools step

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>

frontend/src/components/tools/shared/FileStatusIndicator.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React from "react";
-import { Text } from '@mantine/core';
+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 (
       <Text size="sm" c="dimmed">
-        {placeholder}
+        {defaultPlaceholder}
       </Text>
     );
   }
 
-  // Return nothing when files are selected
+  return (
-  return null;
+   <Text size="sm" c="dimmed" style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}>
-}
+        ✓ {selectedFiles.length === 1 ? t("fileSelected", "Selected: {{filename}}", { filename: selectedFiles[0]?.name }) : t("filesSelected", "{{count}} files selected", { count: selectedFiles.length })}
+    </Text>
+  );
+};
 
-export default FileStatusIndicator;
+export default FileStatusIndicator;

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: [
       {

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: {

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: [
       {

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: [
       {

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: [

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: [
       {

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: [
       {

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;
+export default Repair;

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: [

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: [