Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-08-06 13:48:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Formatting

Browse Source
This commit is contained in:
Connor Yoh 2025-08-05 17:52:18 +01:00
parent 32dba498ce
commit 5acb700f71
14 changed files with 269 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/public/locales/en-GB/translation.json
View File

@ -1738,17 +1738,18 @@
"recent": "Recent",
"localFiles": "Local Files",
"googleDrive": "Google Drive",
"googleDriveShort": "Drive",
"myFiles": "My Files",
"noRecentFiles": "No recent files found",
"dropFilesHint": "Drop files here to upload",
"googleDriveNotAvailable": "Google Drive integration not available",
"openFiles": "Open Files",
"openFile": "Open File",
"details": "Details",
"fileName": "File Name",
"fileFormat": "File Format",
"fileSize": "File Size",
"fileVersion": "File Version",
"details": "File Details",
"fileName": "Name",
"fileFormat": "Format",
"fileSize": "Size",
"fileVersion": "Version",
"totalSelected": "Total Selected",
"dropFilesHere": "Drop files here"
},

13
frontend/src/components/shared/FileManager.tsx
View File

@ -22,7 +22,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
const [isDragging, setIsDragging] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const { loadRecentFiles, handleRemoveFile, storeFile, convertToFile } = useFileManager();
const { loadRecentFiles, handleRemoveFile, storeFile, convertToFile, touchFile } = useFileManager();
// File management handlers
const isFileSupported = useCallback((fileName: string) => {
@ -70,7 +70,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
}, [handleRemoveFile, recentFiles]);
useEffect(() => {
const checkMobile = () => setIsMobile(window.innerWidth < 768);
const checkMobile = () => setIsMobile(window.innerWidth < 1030);
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
@ -99,10 +99,10 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
// Modal size constants for consistent scaling
const modalHeight = '80vh';
const modalWidth = isMobile ? '100%' : '60vw';
const modalWidth = isMobile ? '100%' : '80vw';
const modalMaxWidth = isMobile ? '100%' : '1200px';
const modalMaxHeight = '1200px';
const modalMinWidth = isMobile ? '320px' : '1030px';
const modalMinWidth = isMobile ? '320px' : '800px';
return (
<Modal
@ -140,12 +140,11 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
multiple={true}
activateOnClick={false}
style={{
padding: '1rem',
height: '100%',
width: '100%',
border: 'none',
borderRadius: '30px',
backgroundColor: 'transparent'
backgroundColor: 'var(--bg-file-manager)'
}}
styles={{
inner: { pointerEvents: 'all' }
@ -159,6 +158,8 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
isOpen={isFilesModalOpen}
onFileRemove={handleRemoveFileByIndex}
modalHeight={modalHeight}
storeFile={storeFile}
refreshRecentFiles={refreshRecentFiles}
>
{isMobile ? <MobileLayout /> : <DesktopLayout />}
</FileManagerProvider>

67
frontend/src/components/shared/fileManager/DesktopLayout.tsx
View File

@ -15,11 +15,11 @@ const DesktopLayout: React.FC = () => {
} = useFileManagerContext();
return (
<Grid gutter="md" h="100%" grow={false} style={{ flexWrap: 'nowrap' }}>
<Grid gutter="xs" h="100%" grow={false} style={{ flexWrap: 'nowrap', minWidth: 0 }}>
{/* Column 1: File Sources */}
<Grid.Col span="content" style={{
minWidth: '15.625rem',
width: '15.625rem',
<Grid.Col span="content" p="lg" style={{
minWidth: '13.625rem',
width: '13.625rem',
flexShrink: 0,
height: '100%',
}}>
@ -27,24 +27,55 @@ const DesktopLayout: React.FC = () => {
</Grid.Col>
{/* Column 2: File List */}
<Grid.Col span="auto" style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
{activeSource === 'recent' && (
<SearchInput style={{ marginBottom: '1rem', flexShrink: 0 }} />
)}
<div style={{ flex: 1, minHeight: 0 }}>
<FileListArea
scrollAreaHeight={`calc(${modalHeight} - 6rem)`}
scrollAreaStyle={{
height: activeSource === 'recent' && recentFiles.length > 0 ? `calc(${modalHeight} - 6rem)` : '100%'
}}
/>
<Grid.Col span="auto" style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
minHeight: 0,
minWidth: 0,
flex: '1 1 0px'
}}>
<div style={{
flex: 1,
display: 'flex',
flexDirection: 'column',
backgroundColor: 'var(--bg-file-list)',
border: '1px solid var(--mantine-color-gray-2)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
overflow: 'hidden'
}}>
{activeSource === 'recent' && (
<div style={{
flexShrink: 0,
borderBottom: '1px solid var(--mantine-color-gray-3)'
}}>
<SearchInput />
</div>
)}
<div style={{ flex: 1, minHeight: 0 }}>
<FileListArea
scrollAreaHeight={`calc(${modalHeight} )`}
scrollAreaStyle={{
height: activeSource === 'recent' && recentFiles.length > 0 ? modalHeight : '100%',
backgroundColor: 'transparent',
border: 'none',
borderRadius: 0
}}
/>
</div>
</div>
</Grid.Col>
{/* Column 3: File Details */}
<Grid.Col span="content" style={{ minWidth: '20rem', width: '20rem', flexShrink: 0, height: '100%' }}>
<div style={{ height: '100%' }}>
<Grid.Col p="xl" span="content" style={{
minWidth: '25rem',
width: '25rem',
flexShrink: 0,
height: '100%',
maxWidth: '18rem'
}}>
<div style={{ height: '100%', overflow: 'hidden' }}>
<FileDetails />
</div>
</Grid.Col>

25
frontend/src/components/shared/fileManager/FileDetails.tsx
View File

@ -62,9 +62,9 @@ const FileDetails: React.FC<FileDetailsProps> = ({
return (
<Stack gap="xs" style={{ height: '100%' }}>
{/* Compact mobile layout */}
<Box style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
<Box style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
{/* Small preview */}
<Box style={{ width: '60px', height: '80px', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Box style={{ width: '120px', height: '150px', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
{currentFile && getCurrentThumbnail() ? (
<img
src={getCurrentThumbnail()}
@ -134,6 +134,10 @@ const FileDetails: React.FC<FileDetailsProps> = ({
onClick={onOpenFiles}
disabled={!hasSelection}
fullWidth
style={{
backgroundColor: hasSelection ? 'var(--btn-open-file)' : 'var(--mantine-color-gray-4)',
color: 'white'
}}
>
{selectedFiles.length > 1
? t('fileManager.openFiles', `Open ${selectedFiles.length} Files`)
@ -145,7 +149,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
}
return (
<Stack gap="sm" h={`calc(${modalHeight} - 2rem)`}>
<Stack gap="lg" h={`calc(${modalHeight} - 2rem)`}>
{/* Section 1: Thumbnail Preview */}
<Box p="xs" style={{ textAlign: 'center', flexShrink: 0 }}>
<Box style={{ position: 'relative', width: "100%", height: `calc(${modalHeight} * 0.5 - 2rem)`, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
@ -182,7 +186,6 @@ const FileDetails: React.FC<FileDetailsProps> = ({
width: '100%',
height: '100%',
backgroundColor: 'var(--mantine-color-gray-2)',
borderRadius: '8px',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
transform: 'translate(12px, 12px) rotate(2deg)',
zIndex: 1
@ -197,7 +200,6 @@ const FileDetails: React.FC<FileDetailsProps> = ({
width: '100%',
height: '100%',
backgroundColor: 'var(--mantine-color-gray-1)',
borderRadius: '8px',
boxShadow: '0 3px 10px rgba(0, 0, 0, 0.12)',
transform: 'translate(6px, 6px) rotate(1deg)',
zIndex: 2
@ -212,14 +214,13 @@ const FileDetails: React.FC<FileDetailsProps> = ({
src={getCurrentThumbnail()}
alt={currentFile.name}
fit="contain"
radius="md"
style={{
maxWidth: '100%',
maxHeight: '100%',
width: 'auto',
height: 'auto',
boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)',
borderRadius: '8px',
position: 'relative',
zIndex: 3,
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
@ -232,7 +233,6 @@ const FileDetails: React.FC<FileDetailsProps> = ({
width: '80%',
height: '80%',
backgroundColor: 'var(--mantine-color-gray-1)',
borderRadius: 8,
boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)',
position: 'relative',
zIndex: 3,
@ -275,7 +275,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
</Text>
</Box>
<ScrollArea style={{ flex: 1 }} p="md">
<Stack gap={0}>
<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>
@ -328,10 +328,15 @@ const FileDetails: React.FC<FileDetailsProps> = ({
<Button
size="md"
mb="xl"
onClick={onOpenFiles}
disabled={!hasSelection}
fullWidth
style={{ flexShrink: 0 }}
style={{
flexShrink: 0,
backgroundColor: hasSelection ? 'var(--btn-open-file)' : 'var(--mantine-color-gray-4)',
color: 'white'
}}
>
{selectedFiles.length > 1
? t('fileManager.openFiles', `Open ${selectedFiles.length} Files`)

6
frontend/src/components/shared/fileManager/FileListArea.tsx
View File

@ -45,11 +45,13 @@ const FileListArea: React.FC<FileListAreaProps> = ({
return (
<ScrollArea
h={scrollAreaHeight}
style={{ ...scrollAreaStyle }}
style={{
...scrollAreaStyle
}}
type="always"
scrollbarSize={8}
>
<Stack gap="xs" p="xs">
<Stack gap={0}>
{filteredFiles.map((file, index) => (
<FileListItem
key={file.id || file.name}

101
frontend/src/components/shared/fileManager/FileListItem.tsx
View File

@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { Card, Group, Box, Center, Text, ActionIcon } from '@mantine/core';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import { Group, Box, Text, ActionIcon, Checkbox, Divider } from '@mantine/core';
import DeleteIcon from '@mui/icons-material/Delete';
import { getFileSize, getFileDate } from '../../../utils/fileUtils';
import { FileListItemProps } from './types';
@ -11,54 +10,64 @@ const FileListItem: React.FC<FileListItemProps> = ({
isSupported,
onSelect,
onRemove,
onDoubleClick
onDoubleClick
}) => {
const [isHovered, setIsHovered] = useState(false);
return (
<Card
p="xs"
withBorder
style={{
cursor: 'pointer',
backgroundColor: isSelected ? 'var(--mantine-color-blue-0)' : (isHovered ? 'var(--mantine-color-gray-0)' : undefined),
border: isSelected ? '1px solid var(--mantine-color-blue-3)' : undefined,
opacity: isSupported ? 1 : 0.5,
boxShadow: isHovered && !isSelected ? '0 2px 8px rgba(0, 0, 0, 0.1)' : undefined,
transition: 'background-color 0.15s ease, box-shadow 0.15s ease'
}}
onClick={onSelect}
onDoubleClick={onDoubleClick}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Group gap="sm">
<Box style={{ width: 40, height: 40, flexShrink: 0 }}>
<Center style={{ width: '100%', height: '100%', backgroundColor: 'var(--mantine-color-gray-1)', borderRadius: 4 }}>
<PictureAsPdfIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
</Center>
</Box>
<Box style={{ flex: 1, minWidth: 0 }}>
<Text size="sm" fw={500} truncate>{file.name}</Text>
<Text size="xs" c="dimmed">{getFileSize(file)} • {getFileDate(file)}</Text>
</Box>
{/* Delete button - fades in/out on hover */}
<ActionIcon
variant="subtle"
c="dimmed"
size="md"
onClick={(e) => { e.stopPropagation(); onRemove(); }}
style={{
opacity: isHovered ? 1 : 0,
transform: isHovered ? 'scale(1)' : 'scale(0.8)',
transition: 'opacity 0.3s ease, transform 0.3s ease',
pointerEvents: isHovered ? 'auto' : 'none'
}}
>
<DeleteIcon style={{ fontSize: 20 }} />
</ActionIcon>
</Group>
</Card>
<>
<Box
p="sm"
style={{
cursor: 'pointer',
backgroundColor: isSelected ? 'var(--mantine-color-gray-0)' : (isHovered ? 'var(--mantine-color-gray-0)' : 'var(--bg-file-list)'),
opacity: isSupported ? 1 : 0.5,
transition: 'background-color 0.15s ease'
}}
onClick={onSelect}
onDoubleClick={onDoubleClick}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Group gap="sm">
<Box>
<Checkbox
checked={isSelected}
onChange={() => {}} // Handled by parent onClick
size="sm"
pl="sm"
pr="xs"
styles={{
input: {
cursor: 'pointer'
}
}}
/>
</Box>
<Box style={{ flex: 1, minWidth: 0 }}>
<Text size="sm" fw={500} truncate>{file.name}</Text>
<Text size="xs" c="dimmed">{getFileSize(file)} • {getFileDate(file)}</Text>
</Box>
{/* Delete button - fades in/out on hover */}
<ActionIcon
variant="subtle"
c="dimmed"
size="md"
onClick={(e) => { e.stopPropagation(); onRemove(); }}
style={{
opacity: isHovered ? 1 : 0,
transform: isHovered ? 'scale(1)' : 'scale(0.8)',
transition: 'opacity 0.3s ease, transform 0.3s ease',
pointerEvents: isHovered ? 'auto' : 'none'
}}
>
<DeleteIcon style={{ fontSize: 20 }} />
</ActionIcon>
</Group>
</Box>
{ <Divider color="var(--mantine-color-gray-3)" />}
</>
);
};

45
frontend/src/components/shared/fileManager/FileManagerContext.tsx
View File

@ -41,6 +41,8 @@ interface FileManagerProviderProps {
isOpen: boolean;
onFileRemove: (index: number) => void;
modalHeight: string;
storeFile: (file: File) => Promise<void>;
refreshRecentFiles: () => Promise<void>;
}
export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
@ -52,6 +54,8 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
isOpen,
onFileRemove,
modalHeight,
storeFile,
refreshRecentFiles,
}) => {
const [activeSource, setActiveSource] = useState<FileSource>('recent');
const [selectedFileIds, setSelectedFileIds] = useState<string[]>([]);
@ -115,26 +119,35 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
setSearchTerm(value);
}, []);
const handleFileInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
const handleFileInputChange = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
const files = Array.from(event.target.files || []);
if (files.length > 0) {
const fileWithUrls = files.map(file => {
const url = URL.createObjectURL(file);
createdBlobUrls.current.add(url);
return {
id: `local-${Date.now()}-${Math.random()}`,
name: file.name,
file,
url,
size: file.size,
lastModified: file.lastModified,
};
});
onFilesSelected(fileWithUrls);
onClose();
try {
// Store files and refresh recent files (same as drag-and-drop)
await Promise.all(files.map(file => storeFile(file)));
const fileWithUrls = files.map(file => {
const url = URL.createObjectURL(file);
createdBlobUrls.current.add(url);
return {
id: `local-${Date.now()}-${Math.random()}`,
name: file.name,
file,
url,
size: file.size,
lastModified: file.lastModified,
};
});
onFilesSelected(fileWithUrls);
await refreshRecentFiles();
onClose();
} catch (error) {
console.error('Failed to process selected files:', error);
}
}
event.target.value = '';
}, [onFilesSelected, onClose]);
}, [storeFile, onFilesSelected, refreshRecentFiles, onClose]);
// Cleanup blob URLs when component unmounts
useEffect(() => {

12
frontend/src/components/shared/fileManager/FileSourceButtons.tsx
View File

@ -18,10 +18,11 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
const buttonProps = {
variant: (source: string) => activeSource === source ? 'filled' : 'subtle',
getColor: (source: string) => activeSource === source ? 'var(--mantine-color-gray-4)' : undefined,
getColor: (source: string) => activeSource === source ? 'var(--mantine-color-gray-2)' : undefined,
getStyles: (source: string) => ({
root: {
backgroundColor: activeSource === source ? undefined : 'transparent',
color: activeSource === source ? 'var(--mantine-color-gray-9)' : 'var(--mantine-color-gray-6)',
border: 'none',
'&:hover': {
backgroundColor: activeSource === source ? undefined : 'var(--mantine-color-gray-0)'
@ -33,7 +34,6 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
const buttons = (
<>
<Button
variant={buttonProps.variant('recent')}
leftSection={<HistoryIcon />}
justify={horizontal ? "center" : "flex-start"}
onClick={() => onSourceChange('recent')}
@ -47,7 +47,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
<Button
variant="subtle"
color='var(--mantine-color-gray-5)'
color='var(--mantine-color-gray-6)'
leftSection={<FolderIcon />}
justify={horizontal ? "center" : "flex-start"}
onClick={onLocalFileClick}
@ -77,14 +77,14 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
color={activeSource === 'drive' ? 'gray' : undefined}
styles={buttonProps.getStyles('drive')}
>
{horizontal ? t('fileManager.googleDrive', 'Drive') : t('fileManager.googleDrive', 'Google Drive')}
{horizontal ? t('fileManager.googleDriveShort', 'Drive') : t('fileManager.googleDrive', 'Google Drive')}
</Button>
</>
);
if (horizontal) {
return (
<Group gap="md" justify="center" style={{ width: '100%' }}>
<Group gap="xs" justify="center" style={{ width: '100%' }}>
{buttons}
</Group>
);
@ -92,7 +92,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
return (
<Stack gap="xs" style={{ height: '100%' }}>
<Text size="sm" fw={500} c="dimmed" mb="xs">
<Text size="sm" pt="sm" fw={500} c="dimmed" mb="xs" style={{ paddingLeft: '1rem' }}>
{t('fileManager.myFiles', 'My Files')}
</Text>
{buttons}

62
frontend/src/components/shared/fileManager/MobileLayout.tsx
View File

@ -14,8 +14,22 @@ const MobileLayout: React.FC = () => {
modalHeight,
} = useFileManagerContext();
// Calculate the height more accurately based on actual content
const calculateFileListHeight = () => {
// Base modal height minus padding and gaps
const baseHeight = `calc(${modalHeight} - 2rem)`; // Account for Stack padding
// Estimate heights of fixed components
const fileSourceHeight = '3rem'; // FileSourceButtons height
const fileDetailsHeight = selectedFiles.length > 0 ? '10rem' : '8rem'; // FileDetails compact height
const searchHeight = activeSource === 'recent' ? '3rem' : '0rem'; // SearchInput height
const gapHeight = activeSource === 'recent' ? '3rem' : '2rem'; // Stack gaps
return `calc(${baseHeight} - ${fileSourceHeight} - ${fileDetailsHeight} - ${searchHeight} - ${gapHeight})`;
};
return (
<Stack h="100%" gap="sm" p="sm">
<Box h="100%" p="sm" style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{/* Section 1: File Sources - Fixed at top */}
<Box style={{ flexShrink: 0 }}>
<FileSourceButtons horizontal={true} />
@ -25,24 +39,44 @@ const MobileLayout: React.FC = () => {
<FileDetails compact={true} />
</Box>
{/* Section 3: Search Bar - Fixed above file list */}
{activeSource === 'recent' && (
<Box style={{ flexShrink: 0 }}>
<SearchInput />
{/* Section 3 & 4: Search Bar + File List - Unified background extending to modal edge */}
<Box style={{
flex: 1,
display: 'flex',
flexDirection: 'column',
backgroundColor: 'var(--bg-file-list)',
borderRadius: '8px',
border: '1px solid var(--mantine-color-gray-2)',
overflow: 'hidden',
minHeight: 0
}}>
{activeSource === 'recent' && (
<Box style={{
flexShrink: 0,
borderBottom: '1px solid var(--mantine-color-gray-2)'
}}>
<SearchInput />
</Box>
)}
<Box style={{ flex: 1, minHeight: 0 }}>
<FileListArea
scrollAreaHeight={calculateFileListHeight()}
scrollAreaStyle={{
height: calculateFileListHeight(),
maxHeight: '60vh',
minHeight: '150px',
backgroundColor: 'transparent',
border: 'none',
borderRadius: 0
}}
/>
</Box>
)}
{/* Section 4: File List - Fixed height scrollable area */}
<Box style={{ flexShrink: 0 }}>
<FileListArea
scrollAreaHeight={`calc(${modalHeight} - ${selectedFiles.length > 0 ? '300px' : '200px'})`}
scrollAreaStyle={{ maxHeight: '400px', minHeight: '150px' }}
/>
</Box>
{/* Hidden file input for local file selection */}
<HiddenFileInput />
</Stack>
</Box>
);
};

9
frontend/src/components/shared/fileManager/SearchInput.tsx
View File

@ -18,7 +18,14 @@ const SearchInput: React.FC<SearchInputProps> = ({ style }) => {
leftSection={<SearchIcon />}
value={searchTerm}
onChange={(e) => onSearchChange(e.target.value)}
style={style}
style={{ padding: '0.5rem', ...style }}
styles={{
input: {
border: 'none',
backgroundColor: 'transparent'
}
}}
/>
);
};

1
frontend/src/components/shared/fileManager/types.ts
View File

@ -9,5 +9,6 @@ export interface FileListItemProps {
onSelect: () => void;
onRemove: () => void;
onDoubleClick?: () => void;
isLast?: boolean;
}

9
frontend/src/hooks/useFileManager.ts
View File

@ -111,12 +111,21 @@ export const useFileManager = () => {
};
}, [convertToFile]);
const touchFile = useCallback(async (id: string) => {
try {
await fileStorage.touchFile(id);
} catch (error) {
console.error('Failed to touch file:', error);
}
}, []);
return {
loading,
convertToFile,
loadRecentFiles,
handleRemoveFile,
storeFile,
touchFile,
createFileSelectionHandlers
};
};

26
frontend/src/services/fileStorage.ts
View File

@ -225,6 +225,32 @@ class FileStorageService {
});
}
/**
* Update the lastModified timestamp of a file (for most recently used sorting)
*/
async touchFile(id: string): Promise<boolean> {
if (!this.db) await this.init();
return new Promise((resolve, reject) => {
const transaction = this.db!.transaction([this.storeName], 'readwrite');
const store = transaction.objectStore(this.storeName);
const getRequest = store.get(id);
getRequest.onsuccess = () => {
const file = getRequest.result;
if (file) {
// Update lastModified to current timestamp
file.lastModified = Date.now();
const updateRequest = store.put(file);
updateRequest.onsuccess = () => resolve(true);
updateRequest.onerror = () => reject(updateRequest.error);
} else {
resolve(false); // File not found
}
};
getRequest.onerror = () => reject(getRequest.error);
});
}
/**
* Clear all stored files
*/

6
frontend/src/styles/theme.css
View File

@ -74,6 +74,9 @@
--bg-muted: #f3f4f6;
--bg-background: #f9fafb;
--bg-toolbar: #ffffff;
--bg-file-manager: #F5F6F8;
--bg-file-list: #ffffff;
--btn-open-file: #0A8BFF;
--text-primary: #111827;
--text-secondary: #4b5563;
--text-muted: #6b7280;
@ -144,6 +147,9 @@
--bg-muted: #1F2329;
--bg-background: #2A2F36;
--bg-toolbar: #272A2E;
--bg-file-manager: #1F2329;
--bg-file-list: #2A2F36;
--btn-open-file: #0A8BFF;
--text-primary: #f9fafb;
--text-secondary: #d1d5db;
--text-muted: #9ca3af;