mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-11-16 01:21:16 +01:00
7e3321ee16
FileManager Component Overview
Purpose: Modal component for selecting and managing PDF files with
preview capabilities
Architecture:
- Responsive Layouts: MobileLayout.tsx (stacked) vs DesktopLayout.tsx
(3-column)
- Central State: FileManagerContext handles file operations, selection,
and modal state
- File Storage: IndexedDB persistence with thumbnail caching
Key Components:
- FileSourceButtons: Switch between Recent/Local/Drive sources
- FileListArea: Scrollable file grid with search functionality
- FilePreview: PDF thumbnails with dynamic shadow stacking (1-2 shadow
pages based on file count)
- FileDetails: File info card with metadata
- CompactFileDetails: Mobile-optimized file info layout
File Flow:
1. Users select source → browse/search files → select multiple files →
preview with navigation → open in
tools
2. Files persist across tool switches via FileContext integration
3. Memory management handles large PDFs (up to 100GB+)
```mermaid
graph TD
FM[FileManager] --> ML[MobileLayout]
FM --> DL[DesktopLayout]
ML --> FSB[FileSourceButtons<br/>Recent/Local/Drive]
ML --> FLA[FileListArea]
ML --> FD[FileDetails]
DL --> FSB
DL --> FLA
DL --> FD
FLA --> FLI[FileListItem]
FD --> FP[FilePreview]
FD --> CFD[CompactFileDetails]
```
---------
Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { Stack, Card, Box, Text, Badge, Group, Divider, ScrollArea } from '@mantine/core';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { detectFileExtension, getFileSize } from '../../utils/fileUtils';
|
|
import { FileWithUrl } from '../../types/file';
|
|
|
|
interface FileInfoCardProps {
|
|
currentFile: FileWithUrl | null;
|
|
modalHeight: string;
|
|
}
|
|
|
|
const FileInfoCard: React.FC<FileInfoCardProps> = ({
|
|
currentFile,
|
|
modalHeight
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Card withBorder p={0} h={`calc(${modalHeight} * 0.32 - 1rem)`} style={{ flex: 1, overflow: 'hidden' }}>
|
|
<Box bg="blue.6" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)' }}>
|
|
<Text size="sm" fw={500} ta="center" c="white">
|
|
{t('fileManager.details', 'File Details')}
|
|
</Text>
|
|
</Box>
|
|
<ScrollArea style={{ flex: 1 }} p="md">
|
|
<Stack gap="sm">
|
|
<Group justify="space-between" py="xs">
|
|
<Text size="sm" c="dimmed">{t('fileManager.fileName', 'Name')}</Text>
|
|
<Text size="sm" fw={500} style={{ maxWidth: '60%', textAlign: 'right' }} truncate>
|
|
{currentFile ? currentFile.name : ''}
|
|
</Text>
|
|
</Group>
|
|
<Divider />
|
|
|
|
<Group justify="space-between" py="xs">
|
|
<Text size="sm" c="dimmed">{t('fileManager.fileFormat', 'Format')}</Text>
|
|
{currentFile ? (
|
|
<Badge size="sm" variant="light">
|
|
{detectFileExtension(currentFile.name).toUpperCase()}
|
|
</Badge>
|
|
) : (
|
|
<Text size="sm" fw={500}></Text>
|
|
)}
|
|
</Group>
|
|
<Divider />
|
|
|
|
<Group justify="space-between" py="xs">
|
|
<Text size="sm" c="dimmed">{t('fileManager.fileSize', 'Size')}</Text>
|
|
<Text size="sm" fw={500}>
|
|
{currentFile ? getFileSize(currentFile) : ''}
|
|
</Text>
|
|
</Group>
|
|
<Divider />
|
|
|
|
<Group justify="space-between" py="xs">
|
|
<Text size="sm" c="dimmed">{t('fileManager.fileVersion', 'Version')}</Text>
|
|
<Text size="sm" fw={500}>
|
|
{currentFile ? '1.0' : ''}
|
|
</Text>
|
|
</Group>
|
|
</Stack>
|
|
</ScrollArea>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default FileInfoCard; |