@remit/web-client 0.0.313 → 0.0.315

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,

package/src/test-support/thread-router.ts

@@ -0,0 +1,54 @@
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+} from "@tanstack/react-router";
+import { createElement, type FunctionComponent } from "react";
+
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+/**
+ * The brief's thread routes, with `surface` mounted above them so it stays on
+ * screen while the address moves. A surface that opens a conversation is
+ * asserted by where the router lands, not by the callback it was handed.
+ */
+export const threadRouter = (
+	surface: FunctionComponent,
+	path: string,
+): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement("div", null, createElement(surface), createElement(Outlet)),
+	});
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		component: Outlet,
+	});
+	const briefRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/brief",
+		component: Outlet,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => briefRoute,
+		path: "$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: Outlet,
+	});
+	return createRouter({
+		routeTree: rootRoute.addChildren([
+			mailRoute.addChildren([
+				briefRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+			]),
+		]),
+		history: createMemoryHistory({ initialEntries: [path] }),
+	}) as unknown as AnyRouter;
+};