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

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