mARTin
a26f76ea1d
- Extended Task type with recurring, category, reminder, and priority properties - Improved TaskCard component with new UI elements for advanced features - Enhanced TaskForm component with inputs for advanced features - Updated CalendarGrid component to handle improved task rendering - Updated taskPersistence with handling for new properties SUMMARY: .planning/phases/02-user-experience-advanced-features/02-01-SUMMARY.md
202 lines
7.9 KiB
Markdown
202 lines
7.9 KiB
Markdown
---
|
|
phase: 01-setup
|
|
plan: 01
|
|
type: execute
|
|
wave: 1
|
|
depends_on: []
|
|
files_modified:
|
|
- src/components/CalendarView.tsx
|
|
- src/components/TaskManager.tsx
|
|
- src/services/storage.ts
|
|
- src/types/task.ts
|
|
autonomous: true
|
|
must_haves:
|
|
truths:
|
|
- "User can view tasks and events in a weekly calendar view"
|
|
- "User can add tasks to specific days within the weekly view"
|
|
- "User can edit existing tasks"
|
|
- "User can delete tasks from the weekly view"
|
|
- "User can mark tasks as complete/incomplete"
|
|
- "User can navigate between weeks using previous/next buttons"
|
|
- "User can switch between day and week views"
|
|
- "User can drag and drop tasks between days to reorganize them"
|
|
- "User can persist tasks locally in the browser"
|
|
- "User can define how many days are displayed from one till fourteen"
|
|
- "User can move horizontally through time to see past and future tasks"
|
|
artifacts:
|
|
- path: "src/components/CalendarView.tsx"
|
|
provides: "Main weekly calendar UI with day headers and grid layout"
|
|
min_lines: 50
|
|
- path: "src/components/TaskManager.tsx"
|
|
provides: "Task management with CRUD operations"
|
|
min_lines: 100
|
|
- path: "src/services/storage.ts"
|
|
provides: "Local storage implementation for task persistence"
|
|
min_lines: 30
|
|
- path: "src/types/task.ts"
|
|
provides: "Task data structure definitions"
|
|
min_lines: 20
|
|
key_links:
|
|
- from: "src/components/CalendarView.tsx"
|
|
to: "/api/tasks"
|
|
via: "fetch in useEffect"
|
|
pattern: "fetch.*api/tasks"
|
|
- from: "src/components/TaskManager.tsx"
|
|
to: "src/services/storage.ts"
|
|
via: "data persistence"
|
|
pattern: "localStorage\\."
|
|
---
|
|
|
|
<objective>
|
|
Create the foundational weekly calendar view with core task management features.
|
|
Purpose: Establish the basic structure and functionality for the weekly to-do list application.
|
|
Output: Executable plan that implements Phase 1 requirements.
|
|
</objective>
|
|
|
|
<execution_context>
|
|
@~/.config/opencode/get-shit-done/workflows/execute-plan.md
|
|
@~/.config/opencode/get-shit-done/templates/summary.md
|
|
</execution_context>
|
|
|
|
<context>
|
|
@.planning/PROJECT.md
|
|
@.planning/ROADMAP.md
|
|
@.planning/STATE.md
|
|
@.planning/REQUIREMENTS.md
|
|
@.planning/phases/01-setup/01-CONTEXT.md
|
|
@.planning/phases/01-setup/01-RESEARCH.md
|
|
</context>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Create Weekly Calendar View Component</name>
|
|
<files>src/components/CalendarView.tsx</files>
|
|
<action>Create a React component that renders a weekly calendar grid with:
|
|
- 7-day grid layout with day headers
|
|
- Responsive design using Tailwind CSS
|
|
- Proper date formatting for each day
|
|
- Week navigation controls (previous/next buttons)
|
|
- Ability to switch between day and week views
|
|
- Support for displaying 1-14 days
|
|
Use a clean, minimalist design pattern similar to TeuxDeux</action>
|
|
<verify>npm test passes, component renders without errors, displays 7 days correctly</verify>
|
|
<done>Calendar grid displays 7 days with proper headers, responsive design works, navigation controls show</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Implement Task Storage Service</name>
|
|
<files>src/services/storage.ts</files>
|
|
<action>Create a localStorage-based data persistence service that:
|
|
- Saves tasks with unique identifiers
|
|
- Persists tasks across browser sessions
|
|
- Supports CRUD operations for tasks
|
|
- Handles data integrity checks
|
|
- Manages task expiration and cleanup</action>
|
|
<verify>npm test passes, data persists between page reloads, no data loss</verify>
|
|
<done>Tasks can be saved to localStorage, retrieved from localStorage, and persist across sessions</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Add Basic Task Management Features</name>
|
|
<files>src/components/TaskManager.tsx</files>
|
|
<action>Implement core task management functionality:
|
|
- Create tasks with title, date, and description
|
|
- Edit existing task details
|
|
- Delete tasks
|
|
- Tasks display in appropriate day columns
|
|
- Visual indicators for task status
|
|
- Proper error handling for edge cases</action>
|
|
<verify>npm test passes, all CRUD operations work correctly, errors handled gracefully</verify>
|
|
<done>Tasks can be added, edited, and deleted, displayed in proper day columns</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Enable Drag and Drop Functionality</name>
|
|
<files>src/components/TaskManager.tsx</files>
|
|
<action>Implement HTML5 Drag and Drop API for task reorganization:
|
|
- Make tasks draggable between days
|
|
- Provide visual feedback during drag operations
|
|
- Handle drop targets correctly
|
|
- Maintain task data integrity after reorganization
|
|
- Smooth, responsive dragging experience</action>
|
|
<verify>npm test passes, drag and drop works smoothly, no data corruption</verify>
|
|
<done>Tasks can be dragged between days, drop targets are clear, data remains consistent</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Add Horizontal Time Navigation</name>
|
|
<files>src/components/CalendarView.tsx</files>
|
|
<action>Implement horizontal navigation for:
|
|
- Left/right scrolling to view past and future dates
|
|
- Support for navigating through weeks and months
|
|
- Smooth horizontal scrolling with momentum
|
|
- Ability to scroll to view 1-14 days at a time
|
|
- Visual indicators for current date range
|
|
- Date range customization controls</action>
|
|
<verify>npm test passes, horizontal scrolling works smoothly, date navigation is intuitive</verify>
|
|
<done>Users can scroll left to see past todos and right to see future dates, date range customization works</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Add Task Completion Toggle</name>
|
|
<files>src/components/TaskManager.tsx</files>
|
|
<action>Implement functionality to mark tasks as complete/incomplete:
|
|
- Checkbox or button to toggle completion status
|
|
- Visual distinction for completed tasks (strikethrough, color change)
|
|
- Task status persists in storage
|
|
- Clear indication of completion status in UI</action>
|
|
<verify>npm test passes, task completion toggles correctly, visual indicators show</verify>
|
|
<done>Tasks can be marked complete/incomplete, visual indicators work, status persists</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Integrate Task Types and Validation</name>
|
|
<files>src/types/task.ts</files>
|
|
<action>Create TypeScript interfaces for:
|
|
- Task structure with required fields
|
|
- Date handling with proper formatting
|
|
- Validation for task properties
|
|
- Extensible design for future requirements
|
|
Add validation for task creation/editing</action>
|
|
<verify>npm test passes, type definitions are correct, validation works</verify>
|
|
<done>Proper TypeScript interfaces defined, validation prevents invalid data</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Implement Data Persistence and Configuration</name>
|
|
<files>src/services/storage.ts</files>
|
|
<action>Enhance storage service with:
|
|
- Configuration persistence for date range settings
|
|
- Backup and restore functionality
|
|
- Data migration support for future updates
|
|
- Optimized storage patterns for performance</action>
|
|
<verify>npm test passes, configurations persist, backup/restore works</verify>
|
|
<done>Configuration persists between sessions, data can be backed up/ restored</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<verification>
|
|
After executing this plan, the following must be verified:
|
|
- All 11 core requirements (CORE-01 through CORE-11) are satisfied
|
|
- UI components render correctly and function as expected
|
|
- Data persists across browser sessions
|
|
- Navigation controls work properly
|
|
- Drag and drop functionality is smooth
|
|
- Task management operations work correctly
|
|
- Responsive design works on different screen sizes
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
- All 11 requirements from Phase 1 are implemented and verified
|
|
- Component structure is modular and extensible
|
|
- Data persistence works reliably
|
|
- User experience is intuitive for core operations
|
|
- No critical bugs or performance issues
|
|
- All tests pass
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.planning/phases/01-setup/01-SUMMARY.md`
|
|
</output> |