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

phase	plan	type	wave	depends_on	files_modified	autonomous	gap_closure	must_haves
03-calendar-integration	06	execute	1		src/components/CalendarSettings.tsx src/app/api/calendar/google/oauth/route.ts src/app/api/calendar/apple/oauth/route.ts	true	true	truths artifacts key_links User can connect their Google Calendar account User can connect their Apple Calendar account User can view calendar events alongside tasks in weekly view User can manage calendar connection settings from the application User's tasks and calendar events are synchronized bidirectionally path provides src/components/CalendarSettings.tsx Functional calendar connection UI with real OAuth triggers path provides src/app/api/calendar/google/oauth/route.ts OAuth callback that properly saves connections path provides src/app/api/calendar/apple/oauth/route.ts OAuth callback that properly saves connections from to via pattern src/components/CalendarSettings.tsx src/app/api/calendar/google/oauth/route.ts connecting Google Calendar via OAuth flow connect.*google from to via pattern src/components/CalendarSettings.tsx src/app/api/calendar/apple/oauth/route.ts connecting Apple Calendar via OAuth flow connect.*apple from to via pattern src/components/CalendarSettings.tsx src/app/api/calendar/sync/route.ts triggering sync operations sync.*api

Gap Closure: Calendar Connection UI and Management

Objective

Enable functional calendar connection management UI that triggers real OAuth flows and manages connections properly.

Purpose

Allow users to successfully connect, disconnect, and manage their calendar connections through the UI.

Output

Fully functional CalendarSettings UI component with real OAuth triggers and connection management.

Tasks

Implement Real Google Calendar OAuth Trigger src/components/CalendarSettings.tsx Enable the Google connection button to trigger actual OAuth flow:

1. Replace placeholder button functionality with actual redirect to Google OAuth authorization URL
2. Implement proper URL construction with client ID, redirect URI, scopes, and state parameters
3. Ensure proper error handling if OAuth initiation fails
4. Add loading states for OAuth redirection
5. Add proper accessibility attributes for screen readers

The implementation should:
- Construct proper Google OAuth authorization URL
- Redirect user to Google OAuth flow when clicked
- Include necessary OAuth parameters (client_id, redirect_uri, scope, state)
- Preserve user session during OAuth flow

Clicking "Connect Google Calendar" button redirects to actual Google OAuth page Google Calendar connection button triggers real OAuth flow to Google Implement Real Apple Calendar OAuth Trigger src/components/CalendarSettings.tsx Enable the Apple connection button to trigger actual OAuth flow:

1. Replace placeholder button functionality with actual redirect to Apple OAuth authorization URL
2. Implement proper URL construction with client ID, redirect URI, scopes, and state parameters
3. Ensure proper error handling if OAuth initiation fails
4. Add loading states for OAuth redirection
5. Add proper accessibility attributes for screen readers

The implementation should:
- Construct proper Apple OAuth authorization URL
- Redirect user to Apple OAuth flow when clicked
- Include necessary OAuth parameters (client_id, redirect_uri, scope, state)
- Preserve user session during OAuth flow

Clicking "Connect Apple Calendar" button redirects to actual Apple OAuth page Apple Calendar connection button triggers real OAuth flow to Apple Implement Calendar Disconnection Functionality src/components/CalendarSettings.tsx Enable proper disconnection of calendar accounts:

1. Implement actual database removal of CalendarConnection records when disconnected
2. Add confirmation dialogs for disconnection actions
3. Ensure tokens are properly removed from database (both access and refresh tokens)
4. Handle errors that might occur during disconnection
5. Add loading states during disconnection process
6. Update UI to reflect successful disconnection immediately

The implementation should:
- Make API call to remove calendar connection from database
- Display confirmation before removing connection
- Handle API errors gracefully
- Update component state to reflect disconnection

Clicking "Disconnect" button removes calendar connection from database and UI Calendar connection disconnection works with proper database removal Implement Manual Sync Triggering src/components/CalendarSettings.tsx Enable proper manual sync triggering from the UI:

1. Implement actual API call to trigger sync when "Sync Now" button is clicked
2. Ensure sync operation uses correct time range parameters
3. Add loading states during sync operation
4. Handle responses from sync endpoint properly
5. Update last sync time display after successful sync
6. Show error messages if sync fails

The implementation should:
- Make API call to /api/calendar/sync endpoint with proper parameters
- Handle sync results and update UI accordingly
- Show loading indicator during sync operation
- Update last sync timestamp display

Clicking "Sync Now" button triggers actual sync operation and updates last sync time Manual sync button triggers real sync operation with proper API calls

Verification

After completing these tasks, the following checks should pass:

• Clicking "Connect Google Calendar" button redirects to actual Google OAuth page
• Clicking "Connect Apple Calendar" button redirects to actual Apple OAuth page
• Clicking "Disconnect" button removes calendar connection from database
• Clicking "Sync Now" button triggers actual sync operation
• UI properly reflects connection and sync status updates

Success Criteria

All gaps identified in the VERIFICATION.md for calendar connection management UI are resolved:

• Calendar connection buttons trigger real OAuth flows to respective providers
• Calendar disconnection completely removes connections from database
• Manual sync from UI triggers real sync operations
• UI properly reflects connection and sync states