mARTin
efa7239d17
Phase 3: Calendar Integration - [3] plan(s) in [2] wave(s) - [2] parallel, [1] sequential - Ready for execution
156 lines
6.3 KiB
Markdown
156 lines
6.3 KiB
Markdown
---
|
|
phase: 03-calendar-integration
|
|
plan: 03
|
|
type: execute
|
|
wave: 2
|
|
depends_on:
|
|
- 03-01
|
|
- 03-02
|
|
files_modified:
|
|
- src/components/CalendarGrid.tsx
|
|
- src/types/calendarEvent.ts
|
|
- src/lib/calendarService.ts
|
|
- src/components/CalendarEventCard.tsx
|
|
- src/hooks/useCalendarEvents.ts
|
|
autonomous: true
|
|
must_haves:
|
|
truths:
|
|
- "Calendar events are visually distinct from user tasks using different background colors"
|
|
- "Calendar events styled with a distinct visual style (outlined instead of filled)"
|
|
- "Calendar events displayed using overlapping indicators that don't block task space"
|
|
artifacts:
|
|
- path: "src/components/CalendarGrid.tsx"
|
|
provides: "Calendar grid with distinct visual styling for calendar events"
|
|
imports: ["CalendarEventCard"]
|
|
- path: "src/components/CalendarEventCard.tsx"
|
|
provides: "Calendar event cards with distinctive UI styling"
|
|
min_lines: 20
|
|
- path: "src/types/calendarEvent.ts"
|
|
provides: "CalendarEvent type with styling properties"
|
|
exports: ["CalendarEvent"]
|
|
- path: "src/lib/calendarService.ts"
|
|
provides: "Updated calendar service with event styling information"
|
|
exports: ["connectGoogleCalendar", "connectAppleCalendar", "fetchEvents"]
|
|
- path: "src/hooks/useCalendarEvents.ts"
|
|
provides: "Enhanced hook managing calendar events with styling data"
|
|
exports: ["useCalendarEvents"]
|
|
key_links:
|
|
- from: "src/components/CalendarGrid.tsx"
|
|
to: "src/components/CalendarEventCard.tsx"
|
|
via: "rendering CalendarEventCard for each calendar event"
|
|
pattern: "CalendarEventCard"
|
|
- from: "src/components/CalendarEventCard.tsx"
|
|
to: "src/types/calendarEvent.ts"
|
|
via: "uses CalendarEvent type for event data"
|
|
pattern: "CalendarEvent"
|
|
- from: "src/components/CalendarGrid.tsx"
|
|
to: "src/hooks/useCalendarEvents.ts"
|
|
via: "using useCalendarEvents hook to fetch and manage events"
|
|
pattern: "useCalendarEvents"
|
|
- from: "src/hooks/useCalendarEvents.ts"
|
|
to: "src/lib/calendarService.ts"
|
|
via: "calls calendarService methods"
|
|
pattern: "calendarService.fetchEvents"
|
|
---
|
|
|
|
<objective>
|
|
Implement visual styling for calendar events to distinguish them from user tasks in the weekly view.
|
|
</objective>
|
|
|
|
<execution_context>
|
|
@~/.config/opencode/get-shit-done/workflows/execute-plan.md
|
|
@~/.config/opencode/get-shit-done/templates/summary.md
|
|
|
|
# Context from previous phases
|
|
- Phase 1 established the foundational components for the weekly calendar view
|
|
- Phase 2 enhanced the UI with advanced features and data persistence
|
|
- Phase 3 Plans 1 and 2 have implemented calendar integration and filtering
|
|
- Current codebase has CalendarGrid.tsx, CalendarEventCard.tsx, and enhanced data flow
|
|
- Need to apply distinct visual styling to calendar events to meet design requirements
|
|
</execution_context>
|
|
|
|
<context>
|
|
@.planning/PROJECT.md
|
|
@.planning/ROADMAP.md
|
|
@.planning/STATE.md
|
|
@.planning/phases/01-setup-foundation/01-01-SUMMARY.md
|
|
@.planning/phases/01-setup-foundation/01-02-SUMMARY.md
|
|
@.planning/phases/02-user-experience-advanced-features/02-01-SUMMARY.md
|
|
@.planning/phases/03-calendar-integration/03-CONTEXT.md
|
|
@.planning/phases/03-calendar-integration/03-01-PLAN.md
|
|
@.planning/phases/03-calendar-integration/03-02-PLAN.md
|
|
</context>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Update CalendarEvent type with styling properties</name>
|
|
<files>src/types/calendarEvent.ts</files>
|
|
<action>Enhance the CalendarEvent interface to include styling information:
|
|
1. Add a color property to distinguish calendars visually
|
|
2. Add a styleClass property for Tailwind-based styling (outlined vs filled)
|
|
3. Ensure all existing properties remain intact
|
|
|
|
Update the interface to:
|
|
- Include "color: string" for calendar identification
|
|
- Include "styleClass: string" for Tailwind utility classes
|
|
</action>
|
|
<verify>Check that src/types/calendarEvent.ts has been updated with styling properties</verify>
|
|
<done>CalendarEvent interface includes styling properties for visual distinction</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Implement distinct visual styling in CalendarEventCard</name>
|
|
<files>src/components/CalendarEventCard.tsx</files>
|
|
<action>Update the CalendarEventCard component to:
|
|
1. Use the color property from the CalendarEvent for background/outline styling
|
|
2. Apply appropriate Tailwind classes based on the styleClass property
|
|
3. Ensure calendar events are visually distinct from user tasks (outlined instead of filled)
|
|
4. Handle all-day events differently from timed events (e.g., horizontal bars vs. blocks)
|
|
|
|
The styling should:
|
|
- Use the calendar's color for borders or backgrounds
|
|
- Apply outlined styling for calendar events
|
|
- Differentiate all-day events from timed events visually
|
|
</action>
|
|
<verify>Check that CalendarEventCard.tsx applies distinct visual styling based on calendar properties</verify>
|
|
<done>CalendarEventCard component renders with distinctive styling for calendar events</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Update calendar service to provide styling information</name>
|
|
<files>src/lib/calendarService.ts</files>
|
|
<action>Modify the calendar service to:
|
|
1. Assign distinct colors to different calendar accounts
|
|
2. Generate style classes for visual presentation
|
|
3. Ensure styling consistency across all calendar events
|
|
4. Handle cases where calendar colors might not be provided
|
|
|
|
Update the event fetching to enrich events with:
|
|
- color: string - a unique color for the calendar
|
|
- styleClass: string - Tailwind classes for visual styling
|
|
</action>
|
|
<verify>Check that calendar service properly assigns and returns styling information</verify>
|
|
<done>Calendar service provides distinct visual styling for calendar events</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<verification>
|
|
Ensure all visual styling is properly applied:
|
|
1. Calendar events have distinct colors and styles
|
|
2. Calendar events are visually distinguished from user tasks
|
|
3. Styling is applied consistently across all calendar events
|
|
4. All-day vs timed events are differentiated visually
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
- Calendar events have distinct background colors
|
|
- Calendar events use outlined styling
|
|
- Calendar events do not block task space in the grid
|
|
- Calendar events differentiate between all-day and timed events visually
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.planning/phases/03-calendar-integration/03-03-SUMMARY.md`
|
|
</output> |