@remit/web-client 0.0.312 → 0.0.314

package/src/lib/compose-attachment-controller.ts

@@ -12,9 +12,26 @@ export type DraftForAttachment =
 export interface MintedAttachment {
 	outboxAttachmentId: string;
 	filename: string;
+	contentType: string;
+	contentId: string;
 	uploadUrl: string;
 }
 
+export interface CompletedAttachment {
+	contentUrl: string;
+}
+
+export interface AttachmentPlacement {
+	stored: (file: File, contentId: string) => void;
+	failed: (file: File) => void;
+}
+
+export interface StoredContent {
+	filename: string;
+	contentType: string;
+	contentUrl: string;
+}
+
 /** The four requests a file on a draft is made of. Each throws on failure. */
 export interface AttachmentTransport {
 	mint: (outboxMessageId: string, file: File) => Promise<MintedAttachment>;
@@ -22,7 +39,7 @@ export interface AttachmentTransport {
 	complete: (
 		outboxMessageId: string,
 		outboxAttachmentId: string,
-	) => Promise<void>;
+	) => Promise<CompletedAttachment>;
 	keep: (outboxMessageId: string, attachmentIds: string[]) => Promise<void>;
 }
 
@@ -34,6 +51,10 @@ export interface ComposeAttachmentControllerDeps {
 interface Entry extends ComposeAttachmentItem {
 	serverId: string | null;
 	file: File | null;
+	placement: AttachmentPlacement | null;
+	contentId: string | null;
+	contentType: string;
+	contentUrl: string | null;
 }
 
 interface AttachmentRejection {
@@ -91,6 +112,10 @@ const fromServer = (attachment: RemitImapOutboxAttachmentResponse): Entry => ({
 	key: attachment.outboxAttachmentId,
 	serverId: attachment.outboxAttachmentId,
 	file: null,
+	placement: null,
+	contentId: attachment.contentId,
+	contentType: attachment.contentType,
+	contentUrl: attachment.contentUrl,
 	filename: attachment.filename,
 	sizeBytes: attachment.sizeBytes,
 	state:
@@ -124,6 +149,8 @@ export class ComposeAttachmentController {
 	private readonly inFlight = new Map<string, AbortController>();
 	private readonly mintedAfterRemoval = new Map<string, string>();
 	private readonly removing = new Map<string, string>();
+	private readonly removedListeners = new Set<(contentId: string) => void>();
+	private loaded = false;
 
 	constructor(private readonly deps: ComposeAttachmentControllerDeps) {}
 
@@ -134,6 +161,47 @@ export class ComposeAttachmentController {
 
 	getSnapshot = (): ComposeAttachmentItem[] => this.snapshot;
 
+	owns = (contentId: string): boolean =>
+		this.entries.some((entry) => entry.contentId === contentId);
+
+	storedContent = (contentId: string): StoredContent | null => {
+		const entry = this.entries.find(
+			(candidate) =>
+				candidate.contentId === contentId && candidate.contentUrl !== null,
+		);
+		if (!entry?.contentUrl) return null;
+		return {
+			filename: entry.filename,
+			contentType: entry.contentType,
+			contentUrl: entry.contentUrl,
+		};
+	};
+
+	isLoaded = (): boolean => this.loaded;
+
+	refreshLinks = (
+		attachments: readonly RemitImapOutboxAttachmentResponse[],
+	): void => {
+		const links = new Map(
+			attachments.map((attachment) => [
+				attachment.outboxAttachmentId,
+				attachment.contentUrl,
+			]),
+		);
+		this.set(
+			this.entries.map((entry) => {
+				const contentUrl =
+					entry.serverId === null ? undefined : links.get(entry.serverId);
+				return contentUrl === undefined ? entry : { ...entry, contentUrl };
+			}),
+		);
+	};
+
+	onRemoved = (listener: (contentId: string) => void): (() => void) => {
+		this.removedListeners.add(listener);
+		return () => this.removedListeners.delete(listener);
+	};
+
 	blockingReason = (): string | undefined => {
 		const [removing] = this.removing.values();
 		if (removing !== undefined) return `Removing "${removing}"…`;
@@ -210,6 +278,8 @@ export class ComposeAttachmentController {
 			this.patch(generation, key, {
 				serverId: minted.outboxAttachmentId,
 				filename: minted.filename,
+				contentId: minted.contentId,
+				contentType: minted.contentType,
 			});
 		}
 		settle();
@@ -232,19 +302,29 @@ export class ComposeAttachmentController {
 
 		const completed = await transport
 			.complete(outboxMessageId, minted.outboxAttachmentId)
-			.then(
-				() => true,
-				(error: unknown) => {
-					this.patch(generation, key, {
-						state: refusalOf(minted.filename, error),
-					});
-					return false;
-				},
-			);
-		if (!completed || signal.aborted) return;
-		this.patch(generation, key, { state: ATTACHED });
+			.catch((error: unknown) => {
+				this.patch(generation, key, {
+					state: refusalOf(minted.filename, error),
+				});
+				return null;
+			});
+		if (completed === null || signal.aborted) return;
+		this.patch(generation, key, {
+			state: ATTACHED,
+			contentUrl: completed.contentUrl,
+		});
+		if (generation !== this.generation) return;
+		this.entries
+			.find((entry) => entry.key === key)
+			?.placement?.stored(file, minted.contentId);
 	};
 
+	private settleFailure(generation: number, key: string, file: File): void {
+		if (generation !== this.generation) return;
+		const entry = this.entries.find((candidate) => candidate.key === key);
+		if (entry?.state.status === "failed") entry.placement?.failed(file);
+	}
+
 	private run = async (
 		generation: number,
 		key: string,
@@ -254,6 +334,7 @@ export class ComposeAttachmentController {
 	): Promise<void> => {
 		await this.upload(generation, key, file, outboxMessageId, signal);
 		if (this.inFlight.get(key)?.signal === signal) this.inFlight.delete(key);
+		this.settleFailure(generation, key, file);
 	};
 
 	/**
@@ -282,7 +363,10 @@ export class ComposeAttachmentController {
 			);
 	};
 
-	attach = async (files: File[]): Promise<void> => {
+	attach = async (
+		files: File[],
+		placement?: AttachmentPlacement,
+	): Promise<void> => {
 		const generation = this.generation;
 		const added = files.map((file) => {
 			this.nextKey += 1;
@@ -290,6 +374,10 @@ export class ComposeAttachmentController {
 				key: `local-${this.nextKey}`,
 				serverId: null,
 				file,
+				placement: placement ?? null,
+				contentId: null,
+				contentType: file.type || "application/octet-stream",
+				contentUrl: null,
 				filename: file.name,
 				sizeBytes: file.size,
 				state: UPLOADING,
@@ -302,11 +390,12 @@ export class ComposeAttachmentController {
 
 		const draft = await this.deps.ensureDraft();
 		if (draft.outcome === "refused") {
-			for (const { entry } of added) {
+			for (const { entry, file } of added) {
 				this.inFlight.delete(entry.key);
 				this.patch(generation, entry.key, {
 					state: failed(draft.reason, true),
 				});
+				this.settleFailure(generation, entry.key, file);
 			}
 			return;
 		}
@@ -379,7 +468,12 @@ export class ComposeAttachmentController {
 		this.set(this.entries);
 		const serverId = entry.serverId ?? this.mintedAfterRemoval.get(key) ?? null;
 		this.mintedAfterRemoval.delete(key);
-		if (failure === null || generation !== this.generation) return;
+		if (generation !== this.generation) return;
+		if (failure === null) {
+			if (entry.contentId === null) return;
+			for (const listener of this.removedListeners) listener(entry.contentId);
+			return;
+		}
 		if (serverId === null) return;
 		this.set([
 			...this.entries,
@@ -400,7 +494,16 @@ export class ComposeAttachmentController {
 		attachments: readonly RemitImapOutboxAttachmentResponse[],
 	): void => {
 		this.draftId = outboxMessageId;
-		this.set(attachments.map(fromServer));
+		this.loaded = true;
+		const listed = new Set(
+			attachments.map((attachment) => attachment.outboxAttachmentId),
+		);
+		const attachedHere = this.entries.filter(
+			(entry) =>
+				entry.file !== null &&
+				(entry.serverId === null || !listed.has(entry.serverId)),
+		);
+		this.set([...attachments.map(fromServer), ...attachedHere]);
 	};
 
 	reset = (outboxMessageId: string | undefined): void => {
@@ -410,6 +513,7 @@ export class ComposeAttachmentController {
 		this.mintedAfterRemoval.clear();
 		this.removing.clear();
 		this.draftId = outboxMessageId;
+		this.loaded = false;
 		this.set([]);
 	};
 }

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,