refactor(TaskCard): enhance subtask visibility animation and styling

- Updated the TaskCard component to improve the visibility and animation of subtasks, adding a smooth transition effect for better user experience.
- Adjusted the rendering logic to conditionally display the subtasks container based on the task's state, enhancing the overall UI interaction.
This commit is contained in:
shancds
2025-07-07 10:31:33 +05:30
parent b500c801ee
commit 3206af160a

View File

@@ -431,7 +431,16 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
</div>
</div>
</div>
{task.show_sub_tasks && (
<div
className="subtasks-container"
style={{
overflow: 'hidden',
transition: 'all 0.3s ease-in-out',
maxHeight: task.show_sub_tasks ? '500px' : '0px',
opacity: task.show_sub_tasks ? 1 : 0,
transform: task.show_sub_tasks ? 'translateY(0)' : 'translateY(-10px)',
}}
>
<div className="mt-2 border-t border-gray-100 dark:border-gray-700 pt-2">
{/* Loading state */}
{task.sub_tasks_loading && (
@@ -471,7 +480,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
<div className="py-2 text-xs text-gray-400 dark:text-gray-500">{t('noSubtasks', 'No subtasks')}</div>
)}
</div>
)}
</div>
</div>
</>
);