mARTin
d92a8c7210
- 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.
137 lines
5.5 KiB
Markdown
137 lines
5.5 KiB
Markdown
---
|
|
phase: 01-setup-foundation
|
|
plan: 02
|
|
type: execute
|
|
wave: 1
|
|
depends_on: []
|
|
files_modified: [src/components/, src/lib/, src/types/, src/hooks/, src/utils/]
|
|
autonomous: true
|
|
must_haves:
|
|
truths:
|
|
- "Core components are created for weekly calendar view"
|
|
- "Task card component is implemented with proper styling"
|
|
- "Navigation controls allow week switching"
|
|
- "Drag-and-drop functionality is functional"
|
|
- "Data persistence works using localStorage"
|
|
artifacts:
|
|
- path: "src/components/CalendarGrid.tsx"
|
|
provides: "Weekly calendar grid component"
|
|
exports: "CalendarGrid component"
|
|
- path: "src/components/TaskCard.tsx"
|
|
provides: "Task display and editing component"
|
|
exports: "TaskCard component"
|
|
- path: "src/components/NavigationControls.tsx"
|
|
provides: "Previous/Next week navigation"
|
|
exports: "NavigationControls component"
|
|
- path: "src/lib/taskPersistence.ts"
|
|
provides: "Local storage data management"
|
|
exports: ["saveTasks", "loadTasks"]
|
|
- path: "src/types/task.ts"
|
|
provides: "Task data structure definition"
|
|
contains: "interface Task"
|
|
key_links:
|
|
- from: "src/components/CalendarGrid.tsx"
|
|
to: "src/components/TaskCard.tsx"
|
|
via: "component composition"
|
|
pattern: "TaskCard.*props"
|
|
- from: "src/components/CalendarGrid.tsx"
|
|
to: "src/lib/taskPersistence.ts"
|
|
via: "data persistence"
|
|
pattern: "taskPersistence.*save"
|
|
- from: "src/components/CalendarGrid.tsx"
|
|
to: "src/components/NavigationControls.tsx"
|
|
via: "navigation"
|
|
pattern: "NavigationControls.*props"
|
|
---
|
|
|
|
# Create foundational components and data persistence
|
|
|
|
## Objective
|
|
Implement core components for the weekly calendar view and establish data persistence with localStorage.
|
|
|
|
## Purpose
|
|
Build the essential UI components and data layer needed for the weekly todo list application, including the calendar grid, task cards, navigation, and local storage integration.
|
|
|
|
## Output
|
|
Functional core components for displaying and managing tasks in a weekly calendar view, with data persistence capability.
|
|
|
|
## Context
|
|
This plan builds upon the project setup from plan 01-01, focusing on implementing the actual functionality needed to display and manage tasks in a weekly calendar view.
|
|
|
|
## Tasks
|
|
|
|
<task type="auto">
|
|
<name>Create core component structure and task type definitions</name>
|
|
<files>src/types/task.ts, src/components/, src/hooks/</files>
|
|
<action>
|
|
1. Define Task type with properties: id, title, date, description, completed, category
|
|
2. Create directory structure for components, hooks, and utilities
|
|
3. Create basic component templates for CalendarGrid, TaskCard, and NavigationControls
|
|
4. Implement basic hooks for managing component state
|
|
</action>
|
|
<verify>Typescript compiles without errors and Task type is properly defined</verify>
|
|
<done>Task type is defined with required properties and basic component structure exists</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Implement weekly calendar grid component</name>
|
|
<files>src/components/CalendarGrid.tsx</files>
|
|
<action>
|
|
1. Create a grid-based calendar view showing 7 days (Monday to Sunday)
|
|
2. Display tasks organized by day
|
|
3. Implement proper date handling using date-fns
|
|
4. Create a way to add new tasks to specific days
|
|
5. Make days clickable for adding new tasks
|
|
</action>
|
|
<verify>CalendarGrid component renders 7 columns representing days and displays sample tasks</verify>
|
|
<done>CalendarGrid component renders properly with days of week and basic task display</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Implement task card component with drag-and-drop</name>
|
|
<files>src/components/TaskCard.tsx, src/lib/taskPersistence.ts</files>
|
|
<action>
|
|
1. Create TaskCard component with title, date, and description
|
|
2. Implement drag-and-drop functionality using react-dnd
|
|
3. Add ability to edit task details
|
|
4. Add complete/incomplete toggle
|
|
5. Implement data persistence with localStorage
|
|
</action>
|
|
<verify>TaskCard component renders correctly and supports drag-and-drop interactions</verify>
|
|
<done>TaskCard component allows editing and dragging between days</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Implement navigation controls and data persistence</name>
|
|
<files>src/components/NavigationControls.tsx, src/lib/taskPersistence.ts</files>
|
|
<action>
|
|
1. Create navigation controls for previous/next week buttons
|
|
2. Implement week navigation logic
|
|
3. Create localStorage persistence functions for saving and loading tasks
|
|
4. Connect data persistence to the calendar grid component
|
|
</action>
|
|
<verify>Navigation controls allow switching between weeks and tasks persist between page reloads</verify>
|
|
<done>Navigation works correctly and tasks persist in localStorage</done>
|
|
</task>
|
|
</tasks>
|
|
|
|
<verification>
|
|
- Calendar grid displays properly with tasks organized by day
|
|
- Task cards render with all required information
|
|
- Drag-and-drop functionality works between days
|
|
- Navigation controls allow switching weeks
|
|
- Tasks persist in localStorage between browser sessions
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
- Calendar grid component shows 7-day weekly view with tasks organized by day
|
|
- Task cards display task information and support editing
|
|
- Users can move tasks between days using drag-and-drop
|
|
- Navigation controls allow switching between weeks
|
|
- Tasks are saved to and loaded from localStorage
|
|
- All components integrate properly with each other
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.planning/phases/01-setup-foundation/01-02-SUMMARY.md`
|
|
</output> |