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

---
phase: 03-calendar-integration
plan: 01
type: execute
wave: 1
depends_on: []
files_modified: [src/lib/google-calendar.ts, src/lib/apple-calendar.ts, src/app/api/calendar/google/oauth/route.ts, src/app/api/calendar/apple/oauth/route.ts, src/lib/calendar-events.ts, src/components/WeeklyView.tsx]
autonomous: true
must_haves:
  truths:
    - "User can connect their Google Calendar account"
    - "User can connect their Apple Calendar account"
    - "Connected calendars appear in user's calendar settings"
    - "User can view calendar events alongside tasks in weekly view"
  artifacts:
    - path: "src/lib/google-calendar.ts"
      provides: "Google Calendar OAuth flow and API wrapper"
      min_lines: 20
    - path: "src/lib/apple-calendar.ts"
      provides: "Apple Calendar OAuth flow and API wrapper"
      min_lines: 20
    - path: "src/app/api/calendar/google/oauth/route.ts"
      provides: "Google OAuth callback endpoint"
      exports: ["GET"]
    - path: "src/app/api/calendar/apple/oauth/route.ts"
      provides: "Apple OAuth callback endpoint"
      exports: ["GET"]
    - path: "src/lib/calendar-events.ts"
      provides: "Utility functions for fetching and formatting calendar events for display"
      min_lines: 20
    - path: "src/components/WeeklyView.tsx"
      provides: "Weekly view component that displays both tasks and calendar events"
      min_lines: 50
  key_links:
    - from: "src/app/api/calendar/google/oauth/route.ts"
      to: "src/lib/google-calendar.ts"
      via: "import and use"
      pattern: "import.*google-calendar"
    - from: "src/app/api/calendar/apple/oauth/route.ts"
      to: "src/lib/apple-calendar.ts"
      via: "import and use"
      pattern: "import.*apple-calendar"
    - from: "src/components/WeeklyView.tsx"
      to: "src/lib/calendar-events.ts"
      via: "import and use"
      pattern: "import.*calendar-events"
---

<objective>
Implement the calendar integration system allowing users to connect Google and Apple calendar accounts with OAuth and view calendar events alongside tasks.

Purpose: Enable users to view and synchronize their calendar events with the weekly task view.
Output: Google Calendar and Apple Calendar OAuth flows with API wrappers for calendar event retrieval, plus calendar event display in the weekly view.
</objective>

<execution_context>
@~/.config/opencode/get-shit-done/workflows/execute-plan.md
@~/.config/opencode/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/REQUIREMENTS.md

# Relevant context from previous phases
@.planning/phases/01-setup-and-authentication/01-01-PLAN.md
@.planning/phases/01-setup-and-authentication/01-02-PLAN.md
@.planning/phases/02-task-management/02-01-PLAN.md
</context>

<tasks>

<task type="auto">
  <name>Implement Google Calendar OAuth Wrapper</name>
  <files>src/lib/google-calendar.ts</files>
  <action>Create a TypeScript module that implements Google Calendar OAuth flow using the Google API Client Library for JavaScript. Include functions for:
  - Initializing OAuth with client ID and scopes
  - Handling authorization redirects
  - Retrieving user calendar list
  - Fetching upcoming events for a specified time period
  
  Reference the authentication setup from Phase 1 and the API patterns used in Phase 2.</action>
  <verify>npm test passes and the module exports required functions without error</verify>
  <done>Module exports initializeOAuth, getUserCalendars, and getUpcomingEvents functions</done>
</task>

<task type="auto">
  <name>Implement Apple Calendar OAuth Wrapper</name>
  <files>src/lib/apple-calendar.ts</files>
  <action>Create a TypeScript module that implements Apple Calendar OAuth flow using the Apple Developer API. Include functions for:
  - Initializing OAuth with client ID and scopes
  - Handling authorization redirects
  - Retrieving user calendar list
  - Fetching upcoming events for a specified time period
  
  Reference the authentication setup from Phase 1 and the API patterns used in Phase 2.</action>
  <verify>npm test passes and the module exports required functions without error</verify>
  <done>Module exports initializeOAuth, getUserCalendars, and getUpcomingEvents functions</done>
</task>

<task type="auto">
  <name>Create Calendar Events Utility Functions</name>
  <files>src/lib/calendar-events.ts</files>
  <action>Create a TypeScript module that provides functions for:
  - Fetching calendar events from connected accounts
  - Formatting events for display in the weekly view
  - Handling event merging with existing tasks (avoiding duplicates)
  - Filtering events by date range (week view)
  - Determining event visibility based on user settings
  
  Reference calendar data structures from Phase 2 and API patterns from Phase 1.</action>
  <verify>npm test passes and the module exports required functions without error</verify>
  <done>Module exports getCalendarEvents, formatEventForDisplay, mergeWithTasks functions</done>
</task>

<task type="auto">
  <name>Enhance Weekly View with Calendar Events</name>
  <files>src/components/WeeklyView.tsx</files>
  <action>Modify the existing WeeklyView component to:
  - Fetch calendar events alongside tasks from the data store
  - Render calendar events in the appropriate day slots
  - Differentiate visually from tasks (color coding, icons, etc.)
  - Handle event click interactions (view details, etc.)
  - Maintain existing task functionality while adding calendar events
  
  Follow UI patterns from Phase 2 and component architecture from Phase 1.</action>
  <verify>Component renders without error and displays both tasks and calendar events</verify>
  <done>Component correctly displays tasks and calendar events in the weekly view</done>
</task>

</tasks>

<verification>
Verify that all components work in concert:
1. Google and Apple OAuth flows work without errors
2. OAuth tokens are stored in database
3. Calendar list can be fetched for connected accounts
4. Events from calendars are retrievable
5. UI for calendar settings shows connected accounts
6. Calendar events appear alongside tasks in the weekly view
7. Events are properly formatted and differentiated from tasks
8. Event display settings can be configured and persisted
</verification>

<success_criteria>
- Users can connect Google and Apple calendars via OAuth
- Connected calendars appear in the user's calendar settings
- Calendar events can be retrieved for display in the weekly view
- Tokens are securely stored for accessing calendar data
- Users can view calendar events alongside tasks in the weekly view
- Calendar events are visually differentiated from tasks
- Users can configure how calendar events are displayed
</success_criteria>

<output>
After completion, create `.planning/phases/03-calendar-integration/03-01-SUMMARY.md`
</output>