Files placeholder

This commit is contained in:
Connor Yoh 2025-08-22 16:36:56 +01:00
parent 560abfb348
commit c20903a764
3 changed files with 40 additions and 10 deletions

View File

@ -1970,6 +1970,7 @@
"dropFilesHere": "Drop files here or click to upload", "dropFilesHere": "Drop files here or click to upload",
"pdfFilesOnly": "PDF files only", "pdfFilesOnly": "PDF files only",
"supportedFileTypes": "Supported file types", "supportedFileTypes": "Supported file types",
"upload": "Upload",
"uploadFile": "Upload File", "uploadFile": "Upload File",
"uploadFiles": "Upload Files", "uploadFiles": "Upload Files",
"noFilesInStorage": "No files available in storage. Upload some files first.", "noFilesInStorage": "No files available in storage. Upload some files first.",

View File

@ -63,7 +63,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
} }
}} }}
> >
{horizontal ? t('fileManager.uploadFiles', 'Upload') : t('fileManager.uploadFiles', 'Upload Files')} {horizontal ? t('fileUpload.uploadFiles', 'Upload') : t('fileUpload.uploadFiles', 'Upload Files')}
</Button> </Button>
<Button <Button

View File

@ -1,6 +1,9 @@
import React from "react"; import React from "react";
import { Text } from "@mantine/core"; import { Text, Anchor } from "@mantine/core";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import FolderIcon from '@mui/icons-material/Folder';
import { useFilesModalContext } from "../../../contexts/FilesModalContext";
import { useAllFiles } from "../../../contexts/FileContext";
export interface FileStatusIndicatorProps { export interface FileStatusIndicatorProps {
selectedFiles?: File[]; selectedFiles?: File[];
@ -12,13 +15,39 @@ const FileStatusIndicator = ({
placeholder, placeholder,
}: FileStatusIndicatorProps) => { }: FileStatusIndicatorProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const defaultPlaceholder = placeholder || t("files.placeholder", "Select a PDF file in the main view to get started"); const { openFilesModal } = useFilesModalContext();
const { files: workbenchFiles } = useAllFiles();
// Only show content when no files are selected // 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) { if (selectedFiles.length === 0) {
return ( return (
<Text size="sm" c="dimmed"> <Text size="sm" c="dimmed">
{defaultPlaceholder} {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> </Text>
); );
} }