@remit/web-client 0.0.313 → 0.0.314

package/src/hooks/intelligence-calendar.render.test.ts

@@ -14,6 +14,14 @@ import type {
 	RemitImapCalendarSuggestionResponse,
 } from "@remit/api-http-client/types.gen.ts";
 import { type IntelligenceData, IntelligencePanel } from "@remit/ui";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterProvider,
+} from "@tanstack/react-router";
 import { createElement } from "react";
 import { createDomHarness, type DomHarness } from "@/test-support/dom";
 import { makeThreadMessage } from "@/test-support/fixtures";
@@ -261,3 +269,130 @@ describe("the invitation beside the open message", () => {
 		assert.deepEqual(dismissed[0].body, { muteSender: true });
 	});
 });
+
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const READING = "33333333-3333-4333-8333-333333333333";
+
+const routedMount = async (
+	items: RemitImapCalendarSuggestionResponse[],
+): Promise<AnyRouter> => {
+	http = mockFetch((call: HttpCall): unknown => {
+		if (call.path.endsWith("/calendars")) return { items: calendars };
+		if (call.path.endsWith("/messages/msg-1/calendar-suggestions"))
+			return { items };
+		return { items: [] };
+	});
+	const rootRoute = createRootRoute({ component: Harness });
+	const routeTree = rootRoute.addChildren([
+		createRoute({
+			getParentRoute: () => rootRoute,
+			path: "/mail",
+			component: () => null,
+		}),
+		createRoute({
+			getParentRoute: () => rootRoute,
+			path: "/calendar/$view/$date/suggestion/$suggestionId",
+			component: () => null,
+		}),
+	]);
+	const router = createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: ["/mail"] }),
+	}) as unknown as AnyRouter;
+	await router.load();
+	harness = createDomHarness();
+	harness.renderApp(createElement(RouterProvider, { router }));
+	await harness.waitFor(
+		() => harness?.text().includes("Quarterly review") === true,
+		"the invitation to be drawn",
+	);
+	return router;
+};
+
+const answered = (): HttpCall[] =>
+	(http?.calls ?? []).filter((call) => call.method === "POST");
+
+describe("changing a suggestion beside the message before adding it", () => {
+	it("opens the editor for a reading from the thread on the day it falls", async () => {
+		const router = await routedMount([
+			invitation("Pending"),
+			{
+				...invitation("Pending"),
+				suggestionId: READING,
+				source: "TextHeuristic",
+				summary: "Lunch with Sam",
+			},
+		]);
+		await harness?.waitFor(
+			() => harness?.text().includes("Lunch with Sam") === true,
+			"the reading to be drawn",
+		);
+
+		press("Change first");
+		await harness?.waitFor(
+			() => router.state.location.pathname.includes(READING),
+			"the editor to be opened",
+		);
+
+		assert.equal(
+			router.state.location.pathname,
+			`/calendar/day/2026-09-01/suggestion/${READING}`,
+		);
+		assert.deepEqual(answered(), []);
+	});
+
+	it("sends an invitation nobody could put on a clock to the editor instead of adding it", async () => {
+		const router = await routedMount([
+			{ ...invitation("Pending"), zoneCertainty: "Ambiguous" },
+		]);
+
+		press("Add to calendar");
+		await harness?.waitFor(
+			() => router.state.location.pathname.includes(SUGGESTION),
+			"the editor to be opened",
+		);
+
+		assert.equal(
+			router.state.location.pathname,
+			`/calendar/day/2026-09-01/suggestion/${SUGGESTION}`,
+		);
+		assert.deepEqual(answered(), []);
+	});
+
+	it("applies a cancellation read out of the thread, and offers no editor for it", async () => {
+		const router = await routedMount([
+			invitation("Accepted"),
+			{
+				...invitation("Pending"),
+				suggestionId: READING,
+				source: "TextHeuristic",
+				method: "Cancel",
+				zoneCertainty: "Ambiguous",
+				summary: "Lunch with Sam",
+			},
+		]);
+		await harness?.waitFor(
+			() => harness?.text().includes("Lunch with Sam") === true,
+			"the reading to be drawn",
+		);
+		const card = harness?.query('article[aria-label="Lunch with Sam"]');
+		if (!card) throw new Error("the reading's card is not drawn");
+		const buttons = [...card.querySelectorAll("button")];
+		assert.equal(
+			buttons.some((button) => button.textContent?.includes("Change first")),
+			false,
+		);
+		const add = buttons.find((button) =>
+			button.textContent?.includes("Add to calendar"),
+		);
+		if (!add) throw new Error("the reading offers no Add");
+		harness?.click(add);
+
+		await harness?.waitFor(
+			() => answered().some((call) => call.path.endsWith(`/${READING}/accept`)),
+			"the cancellation to be applied",
+		);
+		assert.equal(router.state.location.pathname, "/mail");
+	});
+});

package/src/hooks/useIntelligenceCalendar.ts

@@ -50,7 +50,10 @@ import {
 	toCalendarInvite,
 	toEventSuggestion,
 } from "@/lib/calendar-suggestion";
-import { useOpenEventOnCalendar } from "@/routing";
+import {
+	useChangeSuggestionOnCalendar,
+	useOpenEventOnCalendar,
+} from "@/routing";
 
 /** What the reader is in the middle of, for one message and no other. */
 interface Working {
@@ -107,6 +110,7 @@ export function useIntelligenceCalendar(
 	const answers = useCalendarSuggestionAnswers();
 
 	const openEvent = useOpenEventOnCalendar();
+	const changeOnCalendar = useChangeSuggestionOnCalendar();
 
 	const [held, setHeld] = useState<Working>(() => fresh(messageId));
 	const working = held.messageId === messageId ? held : fresh(messageId);
@@ -238,14 +242,34 @@ export function useIntelligenceCalendar(
 			: "Couldn't read the invitations in this message. Reopen it to try again.";
 
 	const cancellation = invitation?.method === "Cancel";
+	const changeFirst = (suggestionId: string) => {
+		const suggestion = suggestions.find(
+			(candidate) => candidate.suggestionId === suggestionId,
+		);
+		if (suggestion) changeOnCalendar(suggestionDate(suggestion), suggestionId);
+	};
+	const unplaced = (suggestionId: string): boolean => {
+		const suggestion = suggestions.find(
+			(candidate) => candidate.suggestionId === suggestionId,
+		);
+		return (
+			suggestion?.zoneCertainty === "Ambiguous" &&
+			suggestion.method !== "Cancel"
+		);
+	};
 	const pickedText =
 		date === "" ? "" : slotsAsText(date, slots, working.picked);
 
 	const actions: IntelligenceCalendarActions = {
-		onAddInvite: () =>
+		onAddInvite: () => {
+			if (unplaced(invitationId)) {
+				changeFirst(invitationId);
+				return;
+			}
 			answer(invitationId, "add this to your calendar", () =>
 				answers.accept(invitationId, defaultCalendarId),
-			),
+			);
+		},
 		onTentativeInvite: cancellation
 			? undefined
 			: () =>
@@ -281,10 +305,17 @@ export function useIntelligenceCalendar(
 			? () =>
 					replyWithText({ threadId: thread.threadId, messageId }, pickedText)
 			: undefined,
-		onAddSuggestion: (suggestionId) =>
+		onAddSuggestion: (suggestionId) => {
+			if (unplaced(suggestionId)) {
+				changeFirst(suggestionId);
+				return;
+			}
 			answer(suggestionId, "add this to your calendar", () =>
 				answers.accept(suggestionId, defaultCalendarId),
-			),
+			);
+		},
+		onReviewSuggestion:
+			readings[0]?.method === "Cancel" ? undefined : changeFirst,
 		onDismissSuggestion: (suggestionId) =>
 			answer(suggestionId, "dismiss this", () =>
 				answers.dismiss(suggestionId, false),

package/src/lib/calendar-suggestion.test.ts

@@ -113,10 +113,19 @@ describe("toEventSuggestion", () => {
 			suggestion({ zoneCertainty: "Ambiguous", source: "TextHeuristic" }),
 			{ ...context, sender: "Organizer" },
 		);
-		assert.match(reading.ambiguity, /hours out/);
+		assert.match(reading.ambiguity, /Add opens the editor/);
 		assert.equal(reading.zoneCertainty, "ambiguous");
 		assert.ok(reading.confidence < 1);
 	});
+
+	it("promises no editor for a cancellation, which Add applies as it is", () => {
+		const reading = toEventSuggestion(
+			suggestion({ zoneCertainty: "Ambiguous", method: "Cancel" }),
+			{ ...context, sender: "Organizer" },
+		);
+		assert.match(reading.ambiguity, /could not be resolved/);
+		assert.doesNotMatch(reading.ambiguity, /editor/);
+	});
 });
 
 describe("clashesOver", () => {

package/src/lib/calendar-suggestion.ts

@@ -47,7 +47,10 @@ const ZONES: Record<CalendarSuggestion["zoneCertainty"], ZoneCertainty> = {
 };
 
 const AMBIGUOUS_ZONE =
-	"The invitation named a time zone nothing could resolve, so this time may be hours out.";
+	"The invitation's time zone could not be resolved. Add opens the editor so you can set the time.";
+
+const AMBIGUOUS_CANCELLATION =
+	"The invitation's time zone could not be resolved.";
 
 /** Where the card stands, or nothing when there is no card left to draw. */
 export interface InviteStanding {
@@ -163,6 +166,13 @@ export function toCalendarInvite(
 	};
 }
 
+function ambiguityOf(suggestion: CalendarSuggestion): string {
+	if (suggestion.zoneCertainty !== "Ambiguous") return "";
+	return suggestion.method === "Cancel"
+		? AMBIGUOUS_CANCELLATION
+		: AMBIGUOUS_ZONE;
+}
+
 export function toEventSuggestion(
 	suggestion: CalendarSuggestion,
 	context: Omit<InviteContext, "senderName"> & { sender: string },
@@ -179,7 +189,7 @@ export function toEventSuggestion(
 		sender: context.sender,
 		senderAddress: suggestion.organizer,
 		confidence: isFromInvitation(suggestion) ? 1 : 0.6,
-		ambiguity: suggestion.zoneCertainty === "Ambiguous" ? AMBIGUOUS_ZONE : "",
+		ambiguity: ambiguityOf(suggestion),
 		suggestedCalendarId: context.calendarId,
 		timeZone: "",
 		zoneCertainty: ZONES[suggestion.zoneCertainty],

package/src/routeTree.gen.ts

@@ -55,6 +55,7 @@ import { Route as MailOutboxComposeChar123OutboxMessageIdChar125RouteImport } fr
 import { Route as MailOutboxDraftOutboxMessageIdRouteImport } from './routes/mail/outbox/draft/$outboxMessageId'
 import { Route as CalendarViewDateCalendarObjectIdIndexRouteImport } from './routes/calendar/$view.$date/$calendarObjectId/index'
 import { Route as CalendarViewDateCalendarObjectIdRecurrenceIdRouteImport } from './routes/calendar/$view.$date/$calendarObjectId/$recurrenceId'
+import { Route as CalendarViewDateSuggestionSuggestionIdRouteImport } from './routes/calendar/$view.$date/suggestion.$suggestionId'
 import { Route as MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport } from './routes/mail/$mailboxId/$threadId/$messageId/$mode.{-$outboxMessageId}'
 import { Route as MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport } from './routes/mail/brief/$threadId/$messageId/$mode.{-$outboxMessageId}'
 import { Route as MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport } from './routes/mail/flagged/$threadId/$messageId/$mode.{-$outboxMessageId}'
@@ -302,6 +303,12 @@ const CalendarViewDateCalendarObjectIdRecurrenceIdRoute =
     path: '/$recurrenceId',
     getParentRoute: () => CalendarViewDateCalendarObjectIdRoute,
   } as any)
+const CalendarViewDateSuggestionSuggestionIdRoute =
+  CalendarViewDateSuggestionSuggestionIdRouteImport.update({
+    id: '/suggestion/$suggestionId',
+    path: '/suggestion/$suggestionId',
+    getParentRoute: () => CalendarViewDateRoute,
+  } as any)
 const MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route =
   MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport.update(
     {
@@ -373,6 +380,7 @@ export interface FileRoutesByFullPath {
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
   '/mail/flagged/$threadId/': typeof MailFlaggedThreadIdIndexRoute
   '/calendar/$view/$date/$calendarObjectId/$recurrenceId': typeof CalendarViewDateCalendarObjectIdRecurrenceIdRoute
+  '/calendar/$view/$date/suggestion/$suggestionId': typeof CalendarViewDateSuggestionSuggestionIdRoute
   '/calendar/$view/$date/$calendarObjectId/': typeof CalendarViewDateCalendarObjectIdIndexRoute
   '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
   '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
@@ -412,6 +420,7 @@ export interface FileRoutesByTo {
   '/mail/brief/$threadId': typeof MailBriefThreadIdIndexRoute
   '/mail/flagged/$threadId': typeof MailFlaggedThreadIdIndexRoute
   '/calendar/$view/$date/$calendarObjectId/$recurrenceId': typeof CalendarViewDateCalendarObjectIdRecurrenceIdRoute
+  '/calendar/$view/$date/suggestion/$suggestionId': typeof CalendarViewDateSuggestionSuggestionIdRoute
   '/calendar/$view/$date/$calendarObjectId': typeof CalendarViewDateCalendarObjectIdIndexRoute
   '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
   '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
@@ -464,6 +473,7 @@ export interface FileRoutesById {
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
   '/mail/flagged/$threadId/': typeof MailFlaggedThreadIdIndexRoute
   '/calendar/$view/$date/$calendarObjectId/$recurrenceId': typeof CalendarViewDateCalendarObjectIdRecurrenceIdRoute
+  '/calendar/$view/$date/suggestion/$suggestionId': typeof CalendarViewDateSuggestionSuggestionIdRoute
   '/calendar/$view/$date/$calendarObjectId/': typeof CalendarViewDateCalendarObjectIdIndexRoute
   '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
   '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
@@ -517,6 +527,7 @@ export interface FileRouteTypes {
     | '/mail/brief/$threadId/'
     | '/mail/flagged/$threadId/'
     | '/calendar/$view/$date/$calendarObjectId/$recurrenceId'
+    | '/calendar/$view/$date/suggestion/$suggestionId'
     | '/calendar/$view/$date/$calendarObjectId/'
     | '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}'
     | '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}'
@@ -556,6 +567,7 @@ export interface FileRouteTypes {
     | '/mail/brief/$threadId'
     | '/mail/flagged/$threadId'
     | '/calendar/$view/$date/$calendarObjectId/$recurrenceId'
+    | '/calendar/$view/$date/suggestion/$suggestionId'
     | '/calendar/$view/$date/$calendarObjectId'
     | '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}'
     | '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}'
@@ -607,6 +619,7 @@ export interface FileRouteTypes {
     | '/mail/brief/$threadId/'
     | '/mail/flagged/$threadId/'
     | '/calendar/$view/$date/$calendarObjectId/$recurrenceId'
+    | '/calendar/$view/$date/suggestion/$suggestionId'
     | '/calendar/$view/$date/$calendarObjectId/'
     | '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}'
     | '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}'
@@ -946,6 +959,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CalendarViewDateCalendarObjectIdRecurrenceIdRouteImport
       parentRoute: typeof CalendarViewDateCalendarObjectIdRoute
     }
+    '/calendar/$view/$date/suggestion/$suggestionId': {
+      id: '/calendar/$view/$date/suggestion/$suggestionId'
+      path: '/suggestion/$suggestionId'
+      fullPath: '/calendar/$view/$date/suggestion/$suggestionId'
+      preLoaderRoute: typeof CalendarViewDateSuggestionSuggestionIdRouteImport
+      parentRoute: typeof CalendarViewDateRoute
+    }
     '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}': {
       id: '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}'
       path: '/$mode/{-$outboxMessageId}'
@@ -992,6 +1012,7 @@ interface CalendarViewDateRouteChildren {
   CalendarViewDateCalendarObjectIdRoute: typeof CalendarViewDateCalendarObjectIdRouteWithChildren
   CalendarViewDateNewRoute: typeof CalendarViewDateNewRoute
   CalendarViewDateIndexRoute: typeof CalendarViewDateIndexRoute
+  CalendarViewDateSuggestionSuggestionIdRoute: typeof CalendarViewDateSuggestionSuggestionIdRoute
 }
 
 const CalendarViewDateRouteChildren: CalendarViewDateRouteChildren = {
@@ -999,6 +1020,8 @@ const CalendarViewDateRouteChildren: CalendarViewDateRouteChildren = {
     CalendarViewDateCalendarObjectIdRouteWithChildren,
   CalendarViewDateNewRoute: CalendarViewDateNewRoute,
   CalendarViewDateIndexRoute: CalendarViewDateIndexRoute,
+  CalendarViewDateSuggestionSuggestionIdRoute:
+    CalendarViewDateSuggestionSuggestionIdRoute,
 }
 
 const CalendarViewDateRouteWithChildren =

package/src/routes/calendar/$view.$date/suggestion.$suggestionId.tsx

@@ -0,0 +1,22 @@
+// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
+import { createFileRoute } from "@tanstack/react-router";
+import { ChangeCalendarSuggestion } from "@/components/calendar/ChangeCalendarSuggestion";
+import { useCalendarNavigation, useChangingSuggestionId } from "@/routing";
+
+function ChangeSuggestionRoute() {
+	const suggestionId = useChangingSuggestionId();
+	const { closeEvent } = useCalendarNavigation();
+	if (suggestionId === undefined) return null;
+	return (
+		<ChangeCalendarSuggestion
+			suggestionId={suggestionId}
+			onClose={closeEvent}
+		/>
+	);
+}
+
+export const Route = createFileRoute(
+	"/calendar/$view/$date/suggestion/$suggestionId",
+)({
+	component: ChangeSuggestionRoute,
+});

package/src/routes/calendar/$view.$date.tsx

@@ -86,8 +86,14 @@ function CalendarView({ isPhone }: { isPhone: boolean }) {
 	const drawsGrid = !calendarViewMountsAgenda(view);
 	const { events, colorByCalendarId, isLoading, error, retry, instanceOf } =
 		useCalendarData({ view, date, calendarIds, enabled: drawsGrid });
-	const { goToView, goToToday, step, openEvent, openComposer } =
-		useCalendarNavigation();
+	const {
+		goToView,
+		goToToday,
+		step,
+		openEvent,
+		openComposer,
+		changeSuggestionFirst,
+	} = useCalendarNavigation();
 	const openedEvent = useOpenCalendarEvent();
 	const isWriting = useIsWritingEvent();
 	// Held in state rather than read back from storage each render: how much of
@@ -123,7 +129,7 @@ function CalendarView({ isPhone }: { isPhone: boolean }) {
 			events={events}
 			colorByCalendarId={colorByCalendarId}
 			agenda={<AgendaView density={density} onPickSlot={pickSlot} />}
-			waiting={<PendingSuggestions />}
+			waiting={<PendingSuggestions onChangeFirst={changeSuggestionFirst} />}
 			isLoading={isLoading}
 			error={error}
 			onRetry={retry}

package/src/routes/calendar/-calendar-tree.test.ts

@@ -31,6 +31,7 @@ import { Route as EventIndexRoute } from "./$view.$date/$calendarObjectId/index.
 import { Route as EventRoute } from "./$view.$date/$calendarObjectId.js";
 import { Route as ReadingPaneRoute } from "./$view.$date/index.js";
 import { Route as ComposeRoute } from "./$view.$date/new.js";
+import { Route as SuggestionRoute } from "./$view.$date/suggestion.$suggestionId.js";
 import { Route as ViewRoute } from "./$view.$date.js";
 import { Route as CalendarIndexRoute } from "./index.js";
 
@@ -68,6 +69,10 @@ eventRoute.addChildren([
 viewRoute.addChildren([
 	attach(ReadingPaneRoute, { path: "/", getParentRoute: () => viewRoute }),
 	attach(ComposeRoute, { path: "new", getParentRoute: () => viewRoute }),
+	attach(SuggestionRoute, {
+		path: "suggestion/$suggestionId",
+		getParentRoute: () => viewRoute,
+	}),
 	eventRoute,
 ]);
 const routeTree = rootRoute.addChildren([
@@ -253,6 +258,19 @@ describe("the composer and the open event cannot both be addressed", () => {
 		assert.equal(mounted.routeIds.includes("/calendar/$view/$date/new"), false);
 	});
 
+	it("mounts the editor for a suggestion, and nothing of the event route", () => {
+		const mounted = match("/calendar/day/2026-06-11/suggestion/sug_1");
+		assert.equal(
+			mounted.routeIds.at(-1),
+			"/calendar/$view/$date/suggestion/$suggestionId",
+		);
+		assert.equal(mounted.params.suggestionId, "sug_1");
+		assert.equal(
+			mounted.routeIds.some((id) => id.includes("$calendarObjectId")),
+			false,
+		);
+	});
+
 	it("keeps the series matched under one of its occurrences", () => {
 		const mounted = match(
 			"/calendar/week/2026-06-10/evt_1/2026-06-11T09%3A15%3A00%2B02%3A00",

package/src/routing/calendar.ts

@@ -9,6 +9,8 @@ import {
 import { useRetainOpenPanels } from "./fragment";
 
 const VIEW_ROUTE = "/calendar/$view/$date" as const;
+const SUGGESTION_ROUTE =
+	"/calendar/$view/$date/suggestion/$suggestionId" as const;
 
 /** Which zoom the calendar is at, on which day, over which calendars. */
 export interface CalendarAddress {
@@ -67,12 +69,21 @@ export function useOpenCalendarEvent(): OpenCalendarEvent | undefined {
 }
 
 /** Whether the composer is up, which is a route rather than a flag. */
+export function useChangingSuggestionId(): string | undefined {
+	return useParams({ from: SUGGESTION_ROUTE, shouldThrow: false })
+		?.suggestionId;
+}
+
 export function useIsWritingEvent(): boolean {
 	const composer = useParams({
 		from: "/calendar/$view/$date/new",
 		shouldThrow: false,
 	});
-	return composer !== undefined;
+	const changing = useParams({
+		from: SUGGESTION_ROUTE,
+		shouldThrow: false,
+	});
+	return composer !== undefined || changing !== undefined;
 }
 
 export interface CalendarNavigation {
@@ -97,6 +108,7 @@ export interface CalendarNavigation {
 	openEvent: (calendarObjectId: string, recurrenceId?: string) => void;
 	closeEvent: () => void;
 	openComposer: () => void;
+	changeSuggestionFirst: (suggestionId: string, date: string) => void;
 }
 
 /**
@@ -161,6 +173,13 @@ export function useCalendarNavigation(): CalendarNavigation {
 					search: true,
 					hash: retainPanels,
 				}),
+			changeSuggestionFirst: (suggestionId: string, on: string) =>
+				navigate({
+					to: SUGGESTION_ROUTE,
+					params: { view, date: on, suggestionId },
+					search: true,
+					hash: retainPanels,
+				}),
 		}),
 		[goTo, navigate, retainPanels, view, date],
 	);
@@ -194,3 +213,19 @@ export function useOpenEventOnCalendar(): (
 		[navigate],
 	);
 }
+
+export function useChangeSuggestionOnCalendar(): (
+	date: string,
+	suggestionId: string,
+) => void {
+	const navigate = useNavigate();
+	return useCallback(
+		(date: string, suggestionId: string) => {
+			navigate({
+				to: SUGGESTION_ROUTE,
+				params: { view: "day", date, suggestionId },
+			});
+		},
+		[navigate],
+	);
+}

package/src/routing/index.ts

@@ -9,6 +9,8 @@ export {
 	type OpenCalendarEvent,
 	useCalendarAddress,
 	useCalendarNavigation,
+	useChangeSuggestionOnCalendar,
+	useChangingSuggestionId,
 	useIsWritingEvent,
 	useOpenCalendarEvent,
 	useOpenEventOnCalendar,