My-Weekly-ToDo-List/Version 01/.planning/phases/03-calendar-integration/03-02-PLAN.md

phase	plan	type	wave	depends_on	files_modified	autonomous	must_haves
03-calendar-integration	02	execute	1		src/components/CalendarGrid.tsx src/hooks/useCalendarEvents.ts src/components/CalendarEventFilter.tsx	true	truths artifacts key_links 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 path provides imports src/components/CalendarGrid.tsx Calendar grid with event filtering and detail views CalendarEventCard CalendarEventFilter path provides exports src/hooks/useCalendarEvents.ts React hook for fetching, filtering, and managing calendar events useCalendarEvents path provides min_lines src/components/CalendarEventFilter.tsx UI component for toggling calendar event visibility 30 from to via pattern src/components/CalendarGrid.tsx src/components/CalendarEventFilter.tsx CalendarGrid renders CalendarEventFilter component CalendarEventFilter from to via pattern src/components/CalendarGrid.tsx src/components/CalendarEventCard.tsx rendering CalendarEventCard for each calendar event CalendarEventCard from to via pattern src/components/CalendarGrid.tsx src/hooks/useCalendarEvents.ts using useCalendarEvents hook to fetch and manage events useCalendarEvents from to via pattern src/hooks/useCalendarEvents.ts src/lib/calendarService.ts calls calendarService methods calendarService.fetchEvents

Implement calendar event filtering and detail viewing capabilities in the weekly view.

<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>

@.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 Enhance CalendarGrid to integrate CalendarEventFilter src/components/CalendarGrid.tsx 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. Check that CalendarGrid.tsx imports and renders CalendarEventFilter and displays calendar events CalendarGrid component integrates CalendarEventFilter and displays calendar events alongside tasks

Implement CalendarEventFilter component src/components/CalendarEventFilter.tsx 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 Check that CalendarEventFilter.tsx exists and correctly manages calendar visibility toggles CalendarEventFilter component properly manages and displays calendar visibility toggles

Enhance useCalendarEvents hook with filtering and detail management src/hooks/useCalendarEvents.ts 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. Check that useCalendarEvents.ts properly filters events and manages event details useCalendarEvents hook supports filtering and detail management for calendar events

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

<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>

After completion, create `.planning/phases/03-calendar-integration/03-02-SUMMARY.md`