Repository: Stirling-Tools/Stirling-PDF
File: frontend/src/components/tools/shared/FileStatusIndicator.tsx (TypeScript)

Code before:
  const { t } = useTranslation();
  const { openFilesModal } = useFilesModalContext();
  const { files: workbenchFiles } = useAllFiles();

  // Check if there are no files in the workbench
  if (workbenchFiles.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        {t("files.noFiles", "No files uploaded. ")}{" "}
        <Anchor
          size="sm"
          onClick={openFilesModal}
          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
        >
          <FolderIcon style={{ fontSize: '14px' }} />
          {t("files.addFiles", "Add files")}
        </Anchor>
      </Text>
    );
  }

  // Show selection status when there are files in workbench
  if (selectedFiles.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        {t("files.selectFromWorkbench", "Select files from the workbench or ")}{" "}
        <Anchor
          size="sm"
          onClick={openFilesModal}
          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
        >
          <FolderIcon style={{ fontSize: '14px' }} />
          {t("files.addFiles", "Add files")}
        </Anchor>
      </Text>
    );
  }

  return (
   <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;


Review comment (bug):
```suggestion
        {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
```

* This isn't in the translations file as far as I can see
* I don't really like the wording of this, but I can see exactly what you're going for and it's not _wrong_. It's just that it reads like a sentence that doesn't end followed by a button on the next line to me. I'm not going to push hard for it to be changed because I don't have any suggestions of other wordings. The `Add Files` one does read properly for me now at least 🙂 

Code after:
  const { t } = useTranslation();
  const { openFilesModal } = useFilesModalContext();
  const { files: workbenchFiles } = useAllFiles();

  // Check if there are no files in the workbench
  if (workbenchFiles.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        {t("files.noFiles", "No files uploaded. ")}{" "}
        <Anchor
          size="sm"
          onClick={openFilesModal}
          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
        >
          <FolderIcon style={{ fontSize: '14px' }} />
          {t("files.addFiles", "Add files")}
        </Anchor>
      </Text>
    );
  }

  // Show selection status when there are files in workbench
  if (selectedFiles.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
        <Anchor
          size="sm"
          onClick={openFilesModal}
          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
        >
          <FolderIcon style={{ fontSize: '14px' }} />
          {t("files.addFiles", "Add files")}
        </Anchor>
      </Text>
    );
  }

  return (
   <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;