mARTin d92a8c7210 feat: add task actions (notes/delete) and refine animation logic

- Added 'onDelete' and 'onNotes' support to TaskItem.
- Implemented hover actions (Delete and Notes icons) for tasks.
- Added Notes Modal for editing task markdown content.
- Simplified navigation animation to remove blank flash (single-phase slide-in).
- Fixed syntax error in updateTask function.
- Updated styles for modal and task actions.

2026-02-01 12:25:53 +01:00

2.2 KiB

Raw Blame History

wave

depends_on

files_modified

autonomous

gap_closure

src/components/TaskList.tsx

src/components/WeeklyCalendarView.tsx

src/app/tasks/page.tsx

true

Plan 02-02: Implement UI Components for Weekly Calendar View

Objective

Implement the user interface components needed to display and interact with tasks in a weekly calendar view.

Tasks

Create TaskList Component
- Create src/components/TaskList.tsx component
- Accept array of tasks as props
- Render list of TaskItem components
- Handle empty state
Create WeeklyCalendarView Component
- Create src/components/WeeklyCalendarView.tsx component
- Display tasks grouped by day of the week
- Implement drag-and-drop functionality between days
- Add visual indicators for time allocation
- Include navigation controls for week switching
Create Main Tasks Page
- Create src/app/tasks/page.tsx page component
- Integrate WeeklyCalendarView component
- Fetch tasks from API endpoint
- Display tasks in weekly view
- Add necessary layout and styling
Add Task Form Component
- Create src/components/TaskForm.tsx form component
- Allow users to create new tasks
- Submit new task to API endpoint
- Handle form validation
Add Navigation Controls
- Implement previous/next week buttons
- Display current week range
- Enable keyboard navigation for weeks
Style Components
- Apply appropriate CSS/SCSS for layout
- Ensure responsive design
- Add visual feedback for drag-and-drop operations
- Implement time allocation visual indicators

Verification Criteria

TaskList component renders properly
WeeklyCalendarView component displays tasks in weekly grid
Drag-and-drop functionality works between days
Navigation controls enable switching between weeks
Main tasks page renders correctly
Task form allows creation of new tasks
Components are styled appropriately

Must-Haves

User can view tasks in a weekly grid view
User can navigate between weeks
User can drag and drop tasks between days of the week
User can see time allocation clearly with visual indicators

2.2 KiB Raw Blame History