From 9624f2b64ec0e31b73a24d8074a53c2ea16e9503 Mon Sep 17 00:00:00 2001 From: NanaKay007 Date: Sat, 31 Jan 2026 11:14:34 -0800 Subject: [PATCH] Fix calendar IDs with # character breaking navigation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Calendar IDs containing # (e.g. en.gh#holiday@group.v.calendar.google.com) were broken because # is interpreted as a URL fragment by the browser, causing everything after it to be silently dropped from the route param. Encode calendar ID with encodeURIComponent when navigating and decode with decodeURIComponent when reading from useParams. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- app/src/components/Calendar/CalendarDetail.tsx | 3 ++- app/src/components/Calendar/CalendarList.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/src/components/Calendar/CalendarDetail.tsx b/app/src/components/Calendar/CalendarDetail.tsx index 41a1639..4ef6273 100644 --- a/app/src/components/Calendar/CalendarDetail.tsx +++ b/app/src/components/Calendar/CalendarDetail.tsx @@ -470,7 +470,8 @@ function CurrentTimeIndicator() { // ── Main Component ────────────────────────────────────────────────────── export function CalendarDetail() { - const { calendarId } = useParams<{ calendarId: string }>(); + const { calendarId: rawCalendarId } = useParams<{ calendarId: string }>(); + const calendarId = rawCalendarId ? decodeURIComponent(rawCalendarId) : undefined; const navigate = useNavigate(); const [calendar, setCalendar] = useState(null); const [events, setEvents] = useState([]); diff --git a/app/src/components/Calendar/CalendarList.tsx b/app/src/components/Calendar/CalendarList.tsx index 7e6169b..809cb97 100644 --- a/app/src/components/Calendar/CalendarList.tsx +++ b/app/src/components/Calendar/CalendarList.tsx @@ -77,7 +77,7 @@ export function CalendarList() { {calendars.map((calendar) => (
navigate(`/calendar/${calendar.id}`)} + onClick={() => navigate(`/calendar/${encodeURIComponent(calendar.id)}`)} className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer border border-gray-200 overflow-hidden" >