Fix calendar IDs with # character breaking navigation

[NanaKay007]

Summary

• Calendar IDs containing # (e.g. en.gh#holiday@group.v.calendar.google.com) were broken because the browser interprets # as a URL fragment identifier, silently dropping everything after it from the route param
• Encode calendar ID with encodeURIComponent when navigating from CalendarList, and decode with decodeURIComponent when reading from useParams in CalendarDetail

Test plan

• Navigate to a calendar with # in its ID (e.g. holiday calendars) and verify it loads correctly
• Verify regular calendars (primary, etc.) still navigate and load normally

🤖 Generated with Claude Code

[claude]

PR Review

Summary

This PR correctly fixes the issue where calendar IDs containing # characters (e.g., en.gh#holiday@group.v.calendar.google.com) were breaking navigation due to URL fragment handling.

Implementation Analysis

What's correct:
✅ Properly encodes calendar IDs in CalendarList.tsx:80 using encodeURIComponent
✅ Properly decodes calendar IDs in CalendarDetail.tsx:474 using decodeURIComponent
✅ The calendarService already correctly encodes IDs in all API calls (lines 54, 67, 85, 105, 113)
✅ Handles undefined case when rawCalendarId is missing

Potential Issue: Missing Error Handling

Bug - Missing try/catch for decodeURIComponent

In CalendarDetail.tsx:474, decodeURIComponent can throw a URIError if the encoded text contains malformed sequences (e.g., a standalone % or invalid percent-encoded sequences like %E0%A4%A).

Current code:

const calendarId = rawCalendarId ? decodeURIComponent(rawCalendarId) : undefined;

Recommended fix:

const calendarId = rawCalendarId 
  ? (() => {
      try {
        return decodeURIComponent(rawCalendarId);
      } catch {
        // If decoding fails, treat as invalid calendar ID
        return undefined;
      }
    })()
  : undefined;

This prevents the app from crashing if a user manually edits the URL to include malformed percent-encoding. The existing error handling in loadCalendarData will then show "Failed to load calendar data" which is appropriate UX.

Test Plan Verification

The test plan correctly covers:

• Calendars with # in ID (the bug case)
• Regular calendars (regression check)

Recommendation: Add a test case for malformed URL encoding to verify graceful handling.

Verdict

Approve with suggested fix - The core fix is correct and solves the reported issue. The error handling improvement is a defensive measure for edge cases involving manual URL manipulation.