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

phase	plan	type	wave	depends_on	files_modified	autonomous	must_haves
03-calendar-integration	01	execute	1		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	true	truths artifacts key_links 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 path provides min_lines src/lib/google-calendar.ts Google Calendar OAuth flow and API wrapper 20 path provides min_lines src/lib/apple-calendar.ts Apple Calendar OAuth flow and API wrapper 20 path provides exports src/app/api/calendar/google/oauth/route.ts Google OAuth callback endpoint GET path provides exports src/app/api/calendar/apple/oauth/route.ts Apple OAuth callback endpoint GET path provides min_lines src/lib/calendar-events.ts Utility functions for fetching and formatting calendar events for display 20 path provides min_lines src/components/WeeklyView.tsx Weekly view component that displays both tasks and calendar events 50 from to via pattern src/app/api/calendar/google/oauth/route.ts src/lib/google-calendar.ts import and use import.*google-calendar from to via pattern src/app/api/calendar/apple/oauth/route.ts src/lib/apple-calendar.ts import and use import.*apple-calendar from to via pattern src/components/WeeklyView.tsx src/lib/calendar-events.ts import and use import.*calendar-events

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.

<execution_context> @~/.config/opencode/get-shit-done/workflows/execute-plan.md @~/.config/opencode/get-shit-done/templates/summary.md </execution_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

Implement Google Calendar OAuth Wrapper src/lib/google-calendar.ts 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. npm test passes and the module exports required functions without error Module exports initializeOAuth, getUserCalendars, and getUpcomingEvents functions

Implement Apple Calendar OAuth Wrapper src/lib/apple-calendar.ts 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. npm test passes and the module exports required functions without error Module exports initializeOAuth, getUserCalendars, and getUpcomingEvents functions

Create Calendar Events Utility Functions src/lib/calendar-events.ts 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. npm test passes and the module exports required functions without error Module exports getCalendarEvents, formatEventForDisplay, mergeWithTasks functions

Enhance Weekly View with Calendar Events src/components/WeeklyView.tsx 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. Component renders without error and displays both tasks and calendar events Component correctly displays tasks and calendar events in the weekly view

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

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

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