mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-11-16 01:21:16 +01:00
simplify file upload when no recents
This commit is contained in:
EthanHealy01
parent
9ac27f0b7c
commit
1e294522a9
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import { Container, Button, Group, useMantineColorScheme } from '@mantine/core';
|
import { Container, Button, Group, useMantineColorScheme } from '@mantine/core';
|
||||||
import { Dropzone } from '@mantine/dropzone';
|
import { Dropzone } from '@mantine/dropzone';
|
||||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||||
@ -7,6 +7,7 @@ import { useFileHandler } from '@app/hooks/useFileHandler';
|
|||||||
import { useFilesModalContext } from '@app/contexts/FilesModalContext';
|
import { useFilesModalContext } from '@app/contexts/FilesModalContext';
|
||||||
import { BASE_PATH } from '@app/constants/app';
|
import { BASE_PATH } from '@app/constants/app';
|
||||||
import { useLogoPath } from '@app/hooks/useLogoPath';
|
import { useLogoPath } from '@app/hooks/useLogoPath';
|
||||||
|
import { useFileManager } from '@app/hooks/useFileManager';
|
||||||
|
|
||||||
const LandingPage = () => {
|
const LandingPage = () => {
|
||||||
const { addFiles } = useFileHandler();
|
const { addFiles } = useFileHandler();
|
||||||
@ -16,6 +17,8 @@ const LandingPage = () => {
|
|||||||
const { openFilesModal } = useFilesModalContext();
|
const { openFilesModal } = useFilesModalContext();
|
||||||
const [isUploadHover, setIsUploadHover] = React.useState(false);
|
const [isUploadHover, setIsUploadHover] = React.useState(false);
|
||||||
const logoPath = useLogoPath();
|
const logoPath = useLogoPath();
|
||||||
|
const { loadRecentFiles } = useFileManager();
|
||||||
|
const [hasRecents, setHasRecents] = React.useState<boolean>(false);
|
||||||
|
|
||||||
const handleFileDrop = async (files: File[]) => {
|
const handleFileDrop = async (files: File[]) => {
|
||||||
await addFiles(files);
|
await addFiles(files);
|
||||||
@ -38,6 +41,22 @@ const LandingPage = () => {
|
|||||||
event.target.value = '';
|
event.target.value = '';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Determine if the user has any recent files (same source as File Manager)
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
const files = await loadRecentFiles();
|
||||||
|
if (isMounted) {
|
||||||
|
setHasRecents((files?.length || 0) > 0);
|
||||||
|
}
|
||||||
|
} catch (_err) {
|
||||||
|
if (isMounted) setHasRecents(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
return () => { isMounted = false; };
|
||||||
|
}, [loadRecentFiles]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container size="70rem" p={0} h="100%" className="flex items-center justify-center" style={{ position: 'relative' }}>
|
<Container size="70rem" p={0} h="100%" className="flex items-center justify-center" style={{ position: 'relative' }}>
|
||||||
{/* White PDF Page Background */}
|
{/* White PDF Page Background */}
|
||||||
@ -119,59 +138,89 @@ const LandingPage = () => {
|
|||||||
}}
|
}}
|
||||||
onMouseLeave={() => setIsUploadHover(false)}
|
onMouseLeave={() => setIsUploadHover(false)}
|
||||||
>
|
>
|
||||||
<Button
|
{/* Show both buttons only when recents exist; otherwise show a single Upload button */}
|
||||||
style={{
|
{hasRecents && (
|
||||||
backgroundColor: 'var(--landing-button-bg)',
|
<>
|
||||||
color: 'var(--landing-button-color)',
|
<Button
|
||||||
border: '1px solid var(--landing-button-border)',
|
style={{
|
||||||
borderRadius: '2rem',
|
backgroundColor: 'var(--landing-button-bg)',
|
||||||
height: '38px',
|
color: 'var(--landing-button-color)',
|
||||||
paddingLeft: isUploadHover ? 0 : '1rem',
|
border: '1px solid var(--landing-button-border)',
|
||||||
paddingRight: isUploadHover ? 0 : '1rem',
|
borderRadius: '2rem',
|
||||||
width: isUploadHover ? '58px' : 'calc(100% - 58px - 0.6rem)',
|
height: '38px',
|
||||||
minWidth: isUploadHover ? '58px' : undefined,
|
paddingLeft: isUploadHover ? 0 : '1rem',
|
||||||
display: 'flex',
|
paddingRight: isUploadHover ? 0 : '1rem',
|
||||||
alignItems: 'center',
|
width: isUploadHover ? '58px' : 'calc(100% - 58px - 0.6rem)',
|
||||||
justifyContent: 'center',
|
minWidth: isUploadHover ? '58px' : undefined,
|
||||||
transition: 'width .5s ease, padding .5s ease'
|
display: 'flex',
|
||||||
}}
|
alignItems: 'center',
|
||||||
onClick={handleOpenFilesModal}
|
justifyContent: 'center',
|
||||||
onMouseEnter={() => setIsUploadHover(false)}
|
transition: 'width .5s ease, padding .5s ease'
|
||||||
>
|
}}
|
||||||
<LocalIcon icon="add" width="1.5rem" height="1.5rem" className="text-[var(--accent-interactive)]" />
|
onClick={handleOpenFilesModal}
|
||||||
{!isUploadHover && (
|
onMouseEnter={() => setIsUploadHover(false)}
|
||||||
<span>
|
>
|
||||||
{t('landing.addFiles', 'Add Files')}
|
<LocalIcon icon="add" width="1.5rem" height="1.5rem" className="text-[var(--accent-interactive)]" />
|
||||||
</span>
|
{!isUploadHover && (
|
||||||
)}
|
<span>
|
||||||
</Button>
|
{t('landing.addFiles', 'Add Files')}
|
||||||
<Button
|
</span>
|
||||||
aria-label="Upload"
|
)}
|
||||||
style={{
|
</Button>
|
||||||
backgroundColor: 'var(--landing-button-bg)',
|
<Button
|
||||||
color: 'var(--landing-button-color)',
|
aria-label="Upload"
|
||||||
border: '1px solid var(--landing-button-border)',
|
style={{
|
||||||
borderRadius: '1rem',
|
backgroundColor: 'var(--landing-button-bg)',
|
||||||
height: '38px',
|
color: 'var(--landing-button-color)',
|
||||||
width: isUploadHover ? 'calc(100% - 50px)' : '58px',
|
border: '1px solid var(--landing-button-border)',
|
||||||
minWidth: '58px',
|
borderRadius: '1rem',
|
||||||
paddingLeft: isUploadHover ? '1rem' : 0,
|
height: '38px',
|
||||||
paddingRight: isUploadHover ? '1rem' : 0,
|
width: isUploadHover ? 'calc(100% - 50px)' : '58px',
|
||||||
display: 'flex',
|
minWidth: '58px',
|
||||||
alignItems: 'center',
|
paddingLeft: isUploadHover ? '1rem' : 0,
|
||||||
justifyContent: 'center',
|
paddingRight: isUploadHover ? '1rem' : 0,
|
||||||
transition: 'width .5s ease, padding .5s ease'
|
display: 'flex',
|
||||||
}}
|
alignItems: 'center',
|
||||||
onClick={handleNativeUploadClick}
|
justifyContent: 'center',
|
||||||
onMouseEnter={() => setIsUploadHover(true)}
|
transition: 'width .5s ease, padding .5s ease'
|
||||||
>
|
}}
|
||||||
<LocalIcon icon="upload" width="1.25rem" height="1.25rem" style={{ color: 'var(--accent-interactive)' }} />
|
onClick={handleNativeUploadClick}
|
||||||
{isUploadHover && (
|
onMouseEnter={() => setIsUploadHover(true)}
|
||||||
|
>
|
||||||
|
<LocalIcon icon="upload" width="1.25rem" height="1.25rem" style={{ color: 'var(--accent-interactive)' }} />
|
||||||
|
{isUploadHover && (
|
||||||
|
<span style={{ marginLeft: '.5rem' }}>
|
||||||
|
{t('landing.uploadFromComputer', 'Upload from computer')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{!hasRecents && (
|
||||||
|
<Button
|
||||||
|
aria-label="Upload"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--landing-button-bg)',
|
||||||
|
color: 'var(--landing-button-color)',
|
||||||
|
border: '1px solid var(--landing-button-border)',
|
||||||
|
borderRadius: '1rem',
|
||||||
|
height: '38px',
|
||||||
|
width: '100%',
|
||||||
|
minWidth: '58px',
|
||||||
|
paddingLeft: '1rem',
|
||||||
|
paddingRight: '1rem',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}}
|
||||||
|
onClick={handleNativeUploadClick}
|
||||||
|
>
|
||||||
|
<LocalIcon icon="upload" width="1.25rem" height="1.25rem" style={{ color: 'var(--accent-interactive)' }} />
|
||||||
<span style={{ marginLeft: '.5rem' }}>
|
<span style={{ marginLeft: '.5rem' }}>
|
||||||
{t('landing.uploadFromComputer', 'Upload from computer')}
|
{t('landing.uploadFromComputer', 'Upload from computer')}
|
||||||
</span>
|
</span>
|
||||||
)}
|
</Button>
|
||||||
</Button>
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Hidden file input for native file picker */}
|
{/* Hidden file input for native file picker */}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user