149 lines
4.3 KiB
JavaScript
149 lines
4.3 KiB
JavaScript
import { HelpOutline } from '@mui/icons-material'
|
|
import { Box, Card, IconButton, Typography } from '@mui/joy'
|
|
import { useState } from 'react'
|
|
import ModalActions from '../../components/common/ModalActions'
|
|
import { useResponsiveModal } from '../../hooks/useResponsiveModal'
|
|
|
|
const MultiSelectHelp = ({ isVisible = true }) => {
|
|
const { ResponsiveModal } = useResponsiveModal()
|
|
|
|
const [isHelpOpen, setIsHelpOpen] = useState(false)
|
|
|
|
if (!isVisible) return null
|
|
|
|
return (
|
|
<>
|
|
{/* Help Button */}
|
|
<IconButton
|
|
size='sm'
|
|
variant='soft'
|
|
color='neutral'
|
|
onClick={() => setIsHelpOpen(true)}
|
|
sx={{
|
|
position: 'fixed',
|
|
bottom: 24,
|
|
right: 24,
|
|
zIndex: 1000,
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: '50%',
|
|
boxShadow: 'lg',
|
|
}}
|
|
aria-label='Show keyboard shortcuts'
|
|
title='Show keyboard shortcuts'
|
|
>
|
|
<HelpOutline />
|
|
</IconButton>
|
|
|
|
{/* Help Modal */}
|
|
<ResponsiveModal
|
|
open={isHelpOpen}
|
|
onClose={() => setIsHelpOpen(false)}
|
|
title='Multi-select Mode'
|
|
description='Use these keyboard shortcuts to work more efficiently.'
|
|
footer={
|
|
<ModalActions
|
|
primary={{ label: 'Got it', onClick: () => setIsHelpOpen(false) }}
|
|
/>
|
|
}
|
|
>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
{/* Selection shortcuts */}
|
|
<Card variant='soft' sx={{ p: 2 }}>
|
|
<Typography level='title-sm' sx={{ mb: 1.5, color: 'primary.600' }}>
|
|
Selection
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
<ShortcutItem
|
|
keys={['Ctrl', 'A']}
|
|
description='Select all visible tasks'
|
|
/>
|
|
<ShortcutItem
|
|
keys={['Esc']}
|
|
description='Clear selection or exit multi-select mode'
|
|
/>
|
|
</Box>
|
|
</Card>
|
|
|
|
{/* Action shortcuts */}
|
|
<Card variant='soft' sx={{ p: 2 }}>
|
|
<Typography level='title-sm' sx={{ mb: 1.5, color: 'success.600' }}>
|
|
Actions
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
<ShortcutItem
|
|
keys={['Enter']}
|
|
description='Mark selected tasks as completed'
|
|
/>
|
|
<ShortcutItem
|
|
keys={['Del', '⌫']}
|
|
description='Delete selected tasks'
|
|
/>
|
|
</Box>
|
|
</Card>
|
|
|
|
{/* Interface shortcuts */}
|
|
<Card variant='soft' sx={{ p: 2 }}>
|
|
<Typography level='title-sm' sx={{ mb: 1.5, color: 'warning.600' }}>
|
|
Interface
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
<ShortcutItem
|
|
keys={['Ctrl', 'K']}
|
|
description='Quick add new task'
|
|
/>
|
|
</Box>
|
|
</Card>
|
|
</Box>
|
|
</ResponsiveModal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const ShortcutItem = ({ keys, description }) => (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<Box sx={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
|
<Typography level='body-sm'>{description}</Typography>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
|
{keys.map((key, index) => (
|
|
<Box
|
|
key={index}
|
|
sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
|
|
>
|
|
{index > 0 && (
|
|
<Typography level='body-xs' color='text.secondary'>
|
|
+
|
|
</Typography>
|
|
)}
|
|
<Box
|
|
sx={{
|
|
px: 1,
|
|
py: 0.25,
|
|
bgcolor: 'background.level2',
|
|
borderRadius: 'sm',
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
minWidth: 32,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<Typography level='body-xs' fontWeight='bold'>
|
|
{key}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
|
|
export default MultiSelectHelp
|