import React, { useState } from 'react'; import { Group, Box, Text, ActionIcon, Checkbox, Divider, Menu } from '@mantine/core'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import DeleteIcon from '@mui/icons-material/Delete'; import DownloadIcon from '@mui/icons-material/Download'; import { useTranslation } from 'react-i18next'; import { getFileSize, getFileDate } from '../../utils/fileUtils'; import { FileWithUrl } from '../../types/file'; interface FileListItemProps { file: FileWithUrl; isSelected: boolean; isSupported: boolean; onSelect: () => void; onRemove: () => void; onDownload?: () => void; onDoubleClick?: () => void; isLast?: boolean; } const FileListItem: React.FC = ({ file, isSelected, isSupported, onSelect, onRemove, onDownload, onDoubleClick }) => { const [isHovered, setIsHovered] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); const { t } = useTranslation(); // Keep item in hovered state if menu is open const shouldShowHovered = isHovered || isMenuOpen; return ( <> setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {}} // Handled by parent onClick size="sm" pl="sm" pr="xs" styles={{ input: { cursor: 'pointer' } }} /> {file.name} {getFileSize(file)} • {getFileDate(file)} {/* Three dots menu - fades in/out on hover */} setIsMenuOpen(true)} onClose={() => setIsMenuOpen(false)} > e.stopPropagation()} style={{ opacity: shouldShowHovered ? 1 : 0, transform: shouldShowHovered ? 'scale(1)' : 'scale(0.8)', transition: 'opacity 0.3s ease, transform 0.3s ease', pointerEvents: shouldShowHovered ? 'auto' : 'none' }} > {onDownload && ( } onClick={(e) => { e.stopPropagation(); onDownload(); }} > {t('fileManager.download', 'Download')} )} } onClick={(e) => { e.stopPropagation(); onRemove(); }} > {t('fileManager.delete', 'Delete')} { } ); }; export default FileListItem;