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
7.9 KiB
7.9 KiB
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\."
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.
<execution_context> @~/.config/opencode/get-shit-done/workflows/execute-plan.md @~/.config/opencode/get-shit-done/templates/summary.md </execution_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 Create Weekly Calendar View Component src/components/CalendarView.tsx 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 npm test passes, component renders without errors, displays 7 days correctly Calendar grid displays 7 days with proper headers, responsive design works, navigation controls show Implement Task Storage Service src/services/storage.ts 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 npm test passes, data persists between page reloads, no data loss Tasks can be saved to localStorage, retrieved from localStorage, and persist across sessions Add Basic Task Management Features src/components/TaskManager.tsx 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 npm test passes, all CRUD operations work correctly, errors handled gracefully Tasks can be added, edited, and deleted, displayed in proper day columns Enable Drag and Drop Functionality src/components/TaskManager.tsx 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 npm test passes, drag and drop works smoothly, no data corruption Tasks can be dragged between days, drop targets are clear, data remains consistent Add Horizontal Time Navigation src/components/CalendarView.tsx 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 npm test passes, horizontal scrolling works smoothly, date navigation is intuitive Users can scroll left to see past todos and right to see future dates, date range customization works Add Task Completion Toggle src/components/TaskManager.tsx 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 npm test passes, task completion toggles correctly, visual indicators show Tasks can be marked complete/incomplete, visual indicators work, status persists Integrate Task Types and Validation src/types/task.ts 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 npm test passes, type definitions are correct, validation works Proper TypeScript interfaces defined, validation prevents invalid data Implement Data Persistence and Configuration src/services/storage.ts 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 npm test passes, configurations persist, backup/restore works Configuration persists between sessions, data can be backed up/ restored 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<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>