import React from 'react'; import { Stack, Box } from '@mantine/core'; import { useTranslation } from 'react-i18next'; import { FileWithUrl } from '../../../types/file'; import FileSourceButtons from './FileSourceButtons'; import FileDetails from './FileDetails'; import SearchInput from './SearchInput'; import FileListArea from './FileListArea'; import HiddenFileInput from './HiddenFileInput'; import { FileSource } from './types'; interface MobileLayoutProps { activeSource: FileSource; onSourceChange: (source: FileSource) => void; onLocalFileClick: () => void; selectedFiles: FileWithUrl[]; onOpenFiles: () => void; searchTerm: string; onSearchChange: (value: string) => void; recentFiles: FileWithUrl[]; filteredFiles: FileWithUrl[]; selectedFileIds: string[]; onFileSelect: (file: FileWithUrl) => void; onFileRemove: (index: number) => void; onFileDoubleClick: (file: FileWithUrl) => void; isFileSupported: (fileName: string) => boolean; modalHeight: string; fileInputRef: React.RefObject; onFileInputChange: (event: React.ChangeEvent) => void; } const MobileLayout: React.FC = ({ activeSource, onSourceChange, onLocalFileClick, selectedFiles, onOpenFiles, searchTerm, onSearchChange, recentFiles, filteredFiles, selectedFileIds, onFileSelect, onFileRemove, onFileDoubleClick, isFileSupported, modalHeight, fileInputRef, onFileInputChange, }) => { const { t } = useTranslation(); return ( {/* Section 1: File Sources - Fixed at top */} {/* Section 3: Search Bar - Fixed above file list */} {activeSource === 'recent' && ( )} {/* Section 4: File List - Fixed height scrollable area */} 0 ? '300px' : '200px'})`} scrollAreaStyle={{ maxHeight: '400px', minHeight: '150px' }} /> {/* Hidden file input for local file selection */} ); }; export default MobileLayout;