[Task]: Refactor task page details UI #58
Description
Objective
Refactor the task details page UI to integrate all new features (history, relationships, comments, milestones) into a modern, cohesive interface that improves user experience and task management workflow.
Figma design: https://www.figma.com/design/fwgpxrsQ9mFoA30JR3c7xu/Blaboard---Prototype?node-id=196-1190&t=WROYgVHwUEmU8HrQ-4
Scope
Frontend Implementation:
- Implement new page layout structure
- Build timeline/activity feed component
- Implement comments UI with threading and reply functionality
- Add @mention autocomplete in comment box
- Integrate all backend APIs ([Task]: Implement milestones #54, [Task]: Implement relationships/dependencies between tasks #55, [Task]: Implement history and logs on task #56, [Task]: Implement chat discussions and threads for tasks with @ mentions #57)
- Add markdown preview and rendering
- Implement responsive layout for mobile
Testing & Quality:
- E2E tests for main user flows
- Cross-browser testing
- Mobile responsiveness testing
- Code review completed
Acceptance criteria
- New page layout is visually consistent with design system
- Timeline/activity feed displays all task events
- Dependencies section clearly shows blocked/blocking relationships
- Comments support threading and @mentions work correctly
- All backend features are integrated and working
- Responsive layout works on mobile and tablet
- Loading states provide clear feedback
- E2E tests cover critical user flows
- Code review approved by team