docs(03): create phase plan
Phase 3: Calendar Integration - [3] plan(s) in [2] wave(s) - [2] parallel, [1] sequential - Ready for execution
This commit is contained in:
parent
2a6820cd9b
commit
efa7239d17
@ -72,6 +72,13 @@ This roadmap delivers a weekly scheduler with calendar integration in five phase
|
|||||||
### Phase 3: Calendar Integration
|
### Phase 3: Calendar Integration
|
||||||
**Goal:** Enable connection to external calendar services and display calendar events alongside user tasks.
|
**Goal:** Enable connection to external calendar services and display calendar events alongside user tasks.
|
||||||
|
|
||||||
|
**Plans:** 3 plans
|
||||||
|
|
||||||
|
**Plans:**
|
||||||
|
- [ ] 03-01-PLAN.md — Implement calendar event integration for Google and Apple Calendar
|
||||||
|
- [ ] 03-02-PLAN.md — Implement calendar event filtering and detail viewing
|
||||||
|
- [ ] 03-03-PLAN.md — Implement visual styling for calendar events
|
||||||
|
|
||||||
**Requirements:**
|
**Requirements:**
|
||||||
- CAL-01: User can connect their Google Calendar account to the application
|
- CAL-01: User can connect their Google Calendar account to the application
|
||||||
- CAL-02: User can connect their Apple Calendar account to the application
|
- CAL-02: User can connect their Apple Calendar account to the application
|
||||||
|
|||||||
153
.planning/phases/03-calendar-integration/03-01-PLAN.md
Normal file
153
.planning/phases/03-calendar-integration/03-01-PLAN.md
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
---
|
||||||
|
phase: 03-calendar-integration
|
||||||
|
plan: 01
|
||||||
|
type: execute
|
||||||
|
wave: 1
|
||||||
|
depends_on: []
|
||||||
|
files_modified:
|
||||||
|
- src/types/calendarEvent.ts
|
||||||
|
- src/lib/calendarService.ts
|
||||||
|
- src/components/CalendarGrid.tsx
|
||||||
|
- src/components/CalendarEventCard.tsx
|
||||||
|
- src/hooks/useCalendarEvents.ts
|
||||||
|
autonomous: true
|
||||||
|
must_haves:
|
||||||
|
truths:
|
||||||
|
- "User can connect their Google Calendar account through a secure authorization flow"
|
||||||
|
- "User can connect their Apple Calendar account through a secure authorization flow"
|
||||||
|
- "Events from connected calendars appear in the weekly view alongside user tasks"
|
||||||
|
artifacts:
|
||||||
|
- path: "src/types/calendarEvent.ts"
|
||||||
|
provides: "Calendar event type definition"
|
||||||
|
exports: ["CalendarEvent"]
|
||||||
|
- path: "src/lib/calendarService.ts"
|
||||||
|
provides: "Calendar integration service with Google/Apple OAuth"
|
||||||
|
exports: ["connectGoogleCalendar", "connectAppleCalendar", "fetchEvents"]
|
||||||
|
- path: "src/components/CalendarGrid.tsx"
|
||||||
|
provides: "Weekly calendar grid with calendar event display"
|
||||||
|
imports: ["CalendarEventCard"]
|
||||||
|
- path: "src/components/CalendarEventCard.tsx"
|
||||||
|
provides: "Visual representation of calendar events"
|
||||||
|
min_lines: 20
|
||||||
|
- path: "src/hooks/useCalendarEvents.ts"
|
||||||
|
provides: "React hook for fetching and managing calendar events"
|
||||||
|
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/CalendarGrid.tsx"
|
||||||
|
to: "src/hooks/useCalendarEvents.ts"
|
||||||
|
via: "using useCalendarEvents hook to fetch events"
|
||||||
|
pattern: "useCalendarEvents"
|
||||||
|
- from: "src/hooks/useCalendarEvents.ts"
|
||||||
|
to: "src/lib/calendarService.ts"
|
||||||
|
via: "calls calendarService methods"
|
||||||
|
pattern: "calendarService.fetchEvents"
|
||||||
|
---
|
||||||
|
|
||||||
|
<objective>
|
||||||
|
Implement calendar event integration to display Google and Apple Calendar events alongside 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
|
||||||
|
- Current codebase has CalendarGrid.tsx, TaskCard.tsx, and taskPersistence.ts
|
||||||
|
- Calendar events need to be seamlessly integrated into the existing UI structure
|
||||||
|
</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
|
||||||
|
</context>
|
||||||
|
|
||||||
|
<tasks>
|
||||||
|
|
||||||
|
<task type="auto">
|
||||||
|
<name>Create CalendarEvent type definition</name>
|
||||||
|
<files>src/types/calendarEvent.ts</files>
|
||||||
|
<action>Create TypeScript interface for calendar events with required properties:
|
||||||
|
- id: string
|
||||||
|
- title: string
|
||||||
|
- start: Date
|
||||||
|
- end: Date (optional)
|
||||||
|
- description?: string
|
||||||
|
- calendarId: string
|
||||||
|
- calendarName: string
|
||||||
|
- recurring?: 'daily' | 'weekly' | 'monthly'
|
||||||
|
- allDay?: boolean
|
||||||
|
|
||||||
|
Export the interface as CalendarEvent
|
||||||
|
</action>
|
||||||
|
<verify>Check that src/types/calendarEvent.ts exists and exports CalendarEvent interface</verify>
|
||||||
|
<done>CalendarEvent interface is defined with all required properties and exported</done>
|
||||||
|
</task>
|
||||||
|
|
||||||
|
<task type="auto">
|
||||||
|
<name>Implement calendar service with OAuth integration</name>
|
||||||
|
<files>src/lib/calendarService.ts</files>
|
||||||
|
<action>Create a calendar service that handles:
|
||||||
|
1. Google Calendar OAuth2 integration using redirect flow (client ID required)
|
||||||
|
2. Apple Calendar OAuth (approach to be determined by OpenCode)
|
||||||
|
3. Fetching events from connected calendars
|
||||||
|
4. Converting calendar event data to our CalendarEvent type
|
||||||
|
|
||||||
|
Implement these methods:
|
||||||
|
- connectGoogleCalendar(): Promise<void> - Initiate Google OAuth flow
|
||||||
|
- connectAppleCalendar(): Promise<void> - Initiate Apple Calendar OAuth flow
|
||||||
|
- fetchEvents(calendarIds: string[], startDate: Date, endDate: Date): Promise<CalendarEvent[]> - Fetch events for given calendars
|
||||||
|
|
||||||
|
Use localStorage for storing calendar tokens and connected account info.
|
||||||
|
</action>
|
||||||
|
<verify>Check that src/lib/calendarService.ts exists with the required methods</verify>
|
||||||
|
<done>Calendar service implements Google and Apple OAuth flows and event fetching</done>
|
||||||
|
</task>
|
||||||
|
|
||||||
|
<task type="auto">
|
||||||
|
<name>Create CalendarEventCard component</name>
|
||||||
|
<files>src/components/CalendarEventCard.tsx</files>
|
||||||
|
<action>Create a React component that renders a calendar event with:
|
||||||
|
- Title of the event
|
||||||
|
- Time or date information (start time, all-day indicator)
|
||||||
|
- Calendar name for identification
|
||||||
|
- Visual distinction from task cards (outlined instead of filled, different color)
|
||||||
|
- Hover or click behavior to show details
|
||||||
|
|
||||||
|
Use Tailwind classes for styling with a consistent UI pattern that distinguishes calendar events from user tasks.
|
||||||
|
</action>
|
||||||
|
<verify>Check that src/components/CalendarEventCard.tsx exists and renders correctly</verify>
|
||||||
|
<done>CalendarEventCard component is implemented with proper styling and interactions</done>
|
||||||
|
</task>
|
||||||
|
|
||||||
|
</tasks>
|
||||||
|
|
||||||
|
<verification>
|
||||||
|
Ensure all calendar event integration is functioning:
|
||||||
|
1. CalendarEvent type is correctly defined
|
||||||
|
2. Calendar service handles Google and Apple OAuth properly
|
||||||
|
3. CalendarEventCard component renders with correct styling
|
||||||
|
4. The calendar grid can display both user tasks and calendar events
|
||||||
|
</verification>
|
||||||
|
|
||||||
|
<success_criteria>
|
||||||
|
- Google Calendar authentication flow is implemented
|
||||||
|
- Apple Calendar authentication flow is implemented
|
||||||
|
- Calendar events are fetched and displayed in the weekly view
|
||||||
|
- Calendar events are visually distinct from user tasks
|
||||||
|
- Events appear alongside user tasks in the same time slots
|
||||||
|
</success_criteria>
|
||||||
|
|
||||||
|
<output>
|
||||||
|
After completion, create `.planning/phases/03-calendar-integration/03-01-SUMMARY.md`
|
||||||
|
</output>
|
||||||
144
.planning/phases/03-calendar-integration/03-02-PLAN.md
Normal file
144
.planning/phases/03-calendar-integration/03-02-PLAN.md
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
---
|
||||||
|
phase: 03-calendar-integration
|
||||||
|
plan: 02
|
||||||
|
type: execute
|
||||||
|
wave: 1
|
||||||
|
depends_on: []
|
||||||
|
files_modified:
|
||||||
|
- src/components/CalendarGrid.tsx
|
||||||
|
- src/hooks/useCalendarEvents.ts
|
||||||
|
- src/components/CalendarEventFilter.tsx
|
||||||
|
autonomous: true
|
||||||
|
must_haves:
|
||||||
|
truths:
|
||||||
|
- "User can view event details when selecting calendar events in the view"
|
||||||
|
- "User can toggle visibility of calendar events on/off in the weekly view"
|
||||||
|
artifacts:
|
||||||
|
- path: "src/components/CalendarGrid.tsx"
|
||||||
|
provides: "Calendar grid with event filtering and detail views"
|
||||||
|
imports: ["CalendarEventCard", "CalendarEventFilter"]
|
||||||
|
- path: "src/hooks/useCalendarEvents.ts"
|
||||||
|
provides: "React hook for fetching, filtering, and managing calendar events"
|
||||||
|
exports: ["useCalendarEvents"]
|
||||||
|
- path: "src/components/CalendarEventFilter.tsx"
|
||||||
|
provides: "UI component for toggling calendar event visibility"
|
||||||
|
min_lines: 30
|
||||||
|
key_links:
|
||||||
|
- from: "src/components/CalendarGrid.tsx"
|
||||||
|
to: "src/components/CalendarEventFilter.tsx"
|
||||||
|
via: "CalendarGrid renders CalendarEventFilter component"
|
||||||
|
pattern: "CalendarEventFilter"
|
||||||
|
- from: "src/components/CalendarGrid.tsx"
|
||||||
|
to: "src/components/CalendarEventCard.tsx"
|
||||||
|
via: "rendering CalendarEventCard for each calendar event"
|
||||||
|
pattern: "CalendarEventCard"
|
||||||
|
- 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 calendar event filtering and detail viewing capabilities 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 Plan 1 has implemented basic calendar event integration
|
||||||
|
- Current codebase has CalendarGrid.tsx, CalendarEventCard.tsx, and calendarService.ts
|
||||||
|
- Need to add filtering and detail viewing capabilities to complete the feature set
|
||||||
|
</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
|
||||||
|
</context>
|
||||||
|
|
||||||
|
<tasks>
|
||||||
|
|
||||||
|
<task type="auto">
|
||||||
|
<name>Enhance CalendarGrid to integrate CalendarEventFilter</name>
|
||||||
|
<files>src/components/CalendarGrid.tsx</files>
|
||||||
|
<action>Modify CalendarGrid.tsx to:
|
||||||
|
1. Import and render CalendarEventFilter component at the top of the grid
|
||||||
|
2. Pass down the calendar filtering state and callback to the filter component
|
||||||
|
3. Render calendar events alongside user tasks in the grid cells
|
||||||
|
4. Handle the case where calendar events and tasks may overlap in time slots
|
||||||
|
|
||||||
|
Update the component to accept calendarEvents prop and pass it to the render logic.
|
||||||
|
</action>
|
||||||
|
<verify>Check that CalendarGrid.tsx imports and renders CalendarEventFilter and displays calendar events</verify>
|
||||||
|
<done>CalendarGrid component integrates CalendarEventFilter and displays calendar events alongside tasks</done>
|
||||||
|
</task>
|
||||||
|
|
||||||
|
<task type="auto">
|
||||||
|
<name>Implement CalendarEventFilter component</name>
|
||||||
|
<files>src/components/CalendarEventFilter.tsx</files>
|
||||||
|
<action>Create a React component that allows users to:
|
||||||
|
1. Toggle visibility of different calendar accounts
|
||||||
|
2. Remember user preferences for filter settings (localStorage)
|
||||||
|
3. Display toggle controls for each connected calendar
|
||||||
|
4. Show/hide events in the calendar grid based on selections
|
||||||
|
|
||||||
|
The component should:
|
||||||
|
- Get connected calendar list from calendar service
|
||||||
|
- Display toggle buttons with calendar names
|
||||||
|
- Manage state for which calendars are visible
|
||||||
|
- Store preference in localStorage
|
||||||
|
- Provide toggle callbacks to parent components
|
||||||
|
</action>
|
||||||
|
<verify>Check that CalendarEventFilter.tsx exists and correctly manages calendar visibility toggles</verify>
|
||||||
|
<done>CalendarEventFilter component properly manages and displays calendar visibility toggles</done>
|
||||||
|
</task>
|
||||||
|
|
||||||
|
<task type="auto">
|
||||||
|
<name>Enhance useCalendarEvents hook with filtering and detail management</name>
|
||||||
|
<files>src/hooks/useCalendarEvents.ts</files>
|
||||||
|
<action>Extend the useCalendarEvents hook to:
|
||||||
|
1. Handle calendar filtering (show/hide specific calendar events)
|
||||||
|
2. Manage event detail view state (which event is currently shown)
|
||||||
|
3. Provide methods for toggling calendar visibility
|
||||||
|
4. Maintain a list of connected calendars
|
||||||
|
5. Provide filtered calendar events based on current filters
|
||||||
|
|
||||||
|
Update the hook to accept filter parameters and return appropriate data structures.
|
||||||
|
</action>
|
||||||
|
<verify>Check that useCalendarEvents.ts properly filters events and manages event details</verify>
|
||||||
|
<done>useCalendarEvents hook supports filtering and detail management for calendar events</done>
|
||||||
|
</task>
|
||||||
|
|
||||||
|
</tasks>
|
||||||
|
|
||||||
|
<verification>
|
||||||
|
Ensure all calendar event filtering and detail viewing are functioning:
|
||||||
|
1. CalendarEventFilter component renders and manages toggles
|
||||||
|
2. Calendar events are filtered based on user selections
|
||||||
|
3. Event details can be viewed when clicking events
|
||||||
|
4. User preferences for filters are remembered between sessions
|
||||||
|
</verification>
|
||||||
|
|
||||||
|
<success_criteria>
|
||||||
|
- Users can toggle visibility of calendar events from different accounts
|
||||||
|
- Calendar event details are accessible in the weekly view
|
||||||
|
- Filter settings persist between browser sessions
|
||||||
|
- Calendar events are properly integrated with user tasks in the display
|
||||||
|
</success_criteria>
|
||||||
|
|
||||||
|
<output>
|
||||||
|
After completion, create `.planning/phases/03-calendar-integration/03-02-SUMMARY.md`
|
||||||
|
</output>
|
||||||
156
.planning/phases/03-calendar-integration/03-03-PLAN.md
Normal file
156
.planning/phases/03-calendar-integration/03-03-PLAN.md
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
---
|
||||||
|
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>
|
||||||
Loading…
Reference in New Issue
Block a user