4fa0f5ffeb
- Replace hardcoded time units with TIME_UNITS constant in NotificationTemplate. - Introduce DurationInput component for reusable duration selection in ChoreEdit and AddTaskModal. - Update chore queries to refetch on window focus. - Adjust completion window logic in ChoreView and HistoryCard for better deadline handling. - Implement smart insights filter restoration in MyChores. - Add MyChoreHeader component for improved filter display. - Enhance activity notes display with truncation and modal view in ActivitiesCard.
73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
import { FilterAlt } from '@mui/icons-material'
|
|
import { Box, Stack, Typography } from '@mui/joy'
|
|
import { getIconComponent } from '../../../utils/ProjectIcons.jsx'
|
|
|
|
const MyChoreHeader = ({
|
|
activeFilterId,
|
|
activeFilter,
|
|
selectedProject,
|
|
tempFilter,
|
|
tempFilterMeta,
|
|
}) => {
|
|
if (
|
|
!activeFilterId &&
|
|
!tempFilter &&
|
|
(!selectedProject || selectedProject.id === 'default')
|
|
)
|
|
return null
|
|
|
|
const renderIcon = () => {
|
|
if (tempFilter) {
|
|
return tempFilterMeta?.icon ? (
|
|
<Box sx={{ fontSize: '2rem', display: 'flex', alignItems: 'center' }}>
|
|
{tempFilterMeta.icon}
|
|
</Box>
|
|
) : (
|
|
<FilterAlt sx={{ fontSize: '2rem', color: 'primary.main' }} />
|
|
)
|
|
}
|
|
if (activeFilterId) {
|
|
return <FilterAlt sx={{ fontSize: '2rem', color: 'primary.main' }} />
|
|
}
|
|
if (selectedProject) {
|
|
const iconValue = selectedProject.icon || 'FolderOpen'
|
|
const IconComponent = getIconComponent(iconValue)
|
|
return (
|
|
<IconComponent
|
|
sx={{
|
|
fontSize: 32,
|
|
color: selectedProject.color || 'primary.main',
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
return null
|
|
}
|
|
|
|
const name = tempFilter
|
|
? tempFilterMeta?.name || 'Smart Filter'
|
|
: activeFilter?.name || selectedProject?.name
|
|
|
|
const description = tempFilter
|
|
? tempFilterMeta?.description
|
|
: activeFilter?.description || selectedProject?.description
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
|
|
{renderIcon()}
|
|
<Stack sx={{ flex: 1 }}>
|
|
<Typography level='h3' sx={{ fontWeight: 'lg', color: 'text.primary' }}>
|
|
{name}
|
|
</Typography>
|
|
{description && (
|
|
<Typography level='body-sm' sx={{ color: 'text.secondary' }}>
|
|
{description}
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default MyChoreHeader
|