@remit/web-client 0.0.311 → 0.0.313

package/src/hooks/useInlineImages.ts

@@ -0,0 +1,93 @@
+import type { RemitImapOutboxAttachmentResponse } from "@remit/api-http-client/types.gen.ts";
+import type { InlineImagePlacement, InlineImages } from "@remit/ui/rich-text";
+import { useMemo, useRef } from "react";
+import { useAuthProvider } from "@/auth/provider";
+import {
+	attachmentFailureContent,
+	extractAttachmentFailureDetail,
+	extractAttachmentFailureReason,
+	fetchAttachment,
+} from "@/lib/attachment-download";
+import type { PushErrorInput } from "../components/ui/error-banners";
+import type { StoredContent } from "../lib/compose-attachment-controller";
+
+interface UseInlineImagesOptions {
+	attach: (files: File[], placement?: InlineImagePlacement) => Promise<void>;
+	owns: (contentId: string) => boolean;
+	isLoaded: () => boolean;
+	storedContent: (contentId: string) => StoredContent | null;
+	refreshLinks: () => Promise<void>;
+	onRemoved: (listener: (contentId: string) => void) => () => void;
+	draftAttachments: readonly RemitImapOutboxAttachmentResponse[];
+	pushError: (input: PushErrorInput) => string;
+}
+
+export const useInlineImages = (
+	options: UseInlineImagesOptions,
+): InlineImages => {
+	const { getToken } = useAuthProvider();
+	const latest = useRef({ ...options, getToken });
+	latest.current = { ...options, getToken };
+
+	return useMemo<InlineImages>(() => {
+		const beforeLoad = (contentId: string): StoredContent | null => {
+			const current = latest.current;
+			if (current.isLoaded()) return null;
+			return (
+				current.draftAttachments.find(
+					(attachment) => attachment.contentId === contentId,
+				) ?? null
+			);
+		};
+
+		const stored = (contentId: string): StoredContent | null =>
+			latest.current.storedContent(contentId) ?? beforeLoad(contentId);
+
+		const fetchStored = (content: StoredContent): Promise<string> =>
+			fetchAttachment(content.contentUrl, latest.current.getToken).then(
+				(blob) =>
+					URL.createObjectURL(new Blob([blob], { type: content.contentType })),
+			);
+
+		const fetchRenewed = (contentId: string): Promise<string> =>
+			latest.current.refreshLinks().then(() => {
+				const renewed = stored(contentId);
+				if (!renewed) {
+					throw new Error("the file is no longer on this draft");
+				}
+				return fetchStored(renewed);
+			});
+
+		return {
+			attach: (files, placement) => {
+				void latest.current.attach(files, placement);
+			},
+			owns: (contentId) =>
+				latest.current.owns(contentId) || beforeLoad(contentId) !== null,
+			onRemoved: (listener) => latest.current.onRemoved(listener),
+			resolve: (contentId) => {
+				const content = stored(contentId);
+				if (!content) return Promise.resolve(null);
+				return fetchStored(content)
+					.catch((error: unknown) => {
+						if (extractAttachmentFailureReason(error) !== "link-expired") {
+							throw error;
+						}
+						return fetchRenewed(contentId);
+					})
+					.catch((error: unknown) => {
+						const reason = extractAttachmentFailureReason(error);
+						latest.current.pushError({
+							...attachmentFailureContent(
+								reason,
+								content.filename,
+								extractAttachmentFailureDetail(error),
+							),
+							error: reason === "generic" ? error : undefined,
+						});
+						return null;
+					});
+			},
+		};
+	}, []);
+};

package/src/hooks/useIntelligenceCalendar.ts

@@ -22,6 +22,7 @@ import {
 	calendarUnavailable,
 	calendarWriteGate,
 } from "@/components/calendar/CalendarUnavailable";
+import type { ReplyWithText } from "@/components/compose/reply-with-times";
 import {
 	calendarWindowOfDays,
 	deviceTimeZone,
@@ -57,7 +58,6 @@ interface Working {
 	tab: IntelligenceTabId | undefined;
 	offering: boolean;
 	picked: string[];
-	copy: "idle" | "copied" | "failed";
 	answering: string;
 	/** The card the last refusal was about, and what it said. */
 	failure: { suggestionId: string; text: string };
@@ -68,7 +68,6 @@ const fresh = (messageId: string): Working => ({
 	tab: undefined,
 	offering: false,
 	picked: [],
-	copy: "idle",
 	answering: "",
 	failure: { suggestionId: "", text: "" },
 });
@@ -92,6 +91,7 @@ export interface IntelligenceCalendar {
 
 export function useIntelligenceCalendar(
 	thread: RemitImapThreadMessageResponse,
+	replyWithText?: ReplyWithText,
 ): IntelligenceCalendar {
 	const messageId = thread.messageId;
 	const { suggestions, isLoading, error } =
@@ -238,7 +238,8 @@ export function useIntelligenceCalendar(
 			: "Couldn't read the invitations in this message. Reopen it to try again.";
 
 	const cancellation = invitation?.method === "Cancel";
-	const copyText = date === "" ? "" : slotsAsText(date, slots, working.picked);
+	const pickedText =
+		date === "" ? "" : slotsAsText(date, slots, working.picked);
 
 	const actions: IntelligenceCalendarActions = {
 		onAddInvite: () =>
@@ -272,24 +273,14 @@ export function useIntelligenceCalendar(
 		onOfferOtherTimes: () => update({ offering: true }),
 		onToggleSlot: (slot) =>
 			update({
-				copy: "idle",
 				picked: working.picked.includes(slot.startTime)
 					? working.picked.filter((start) => start !== slot.startTime)
 					: [...working.picked, slot.startTime],
 			}),
-		onCopySlots: () => {
-			// Outside a secure context — plain http on a tailnet host — the
-			// browser exposes no clipboard at all, so the absence is the failure.
-			const clipboard: Clipboard | undefined = navigator.clipboard;
-			if (!clipboard) {
-				update({ copy: "failed" });
-				return;
-			}
-			void Promise.resolve()
-				.then(() => clipboard.writeText(copyText))
-				.then(() => update({ copy: "copied" }))
-				.catch(() => update({ copy: "failed" }));
-		},
+		onReplyWithSlots: replyWithText
+			? () =>
+					replyWithText({ threadId: thread.threadId, messageId }, pickedText)
+			: undefined,
 		onAddSuggestion: (suggestionId) =>
 			answer(suggestionId, "add this to your calendar", () =>
 				answers.accept(suggestionId, defaultCalendarId),
@@ -334,8 +325,6 @@ export function useIntelligenceCalendar(
 								proposals: [],
 								slots,
 								picked: working.picked,
-								copy: working.copy,
-								copyText,
 							}
 						: undefined,
 				suggestions: deck,

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

@@ -55,6 +55,7 @@ const createServer = () => {
 		},
 		complete: async (_draft, outboxAttachmentId) => {
 			completed.push(outboxAttachmentId);
+			return { contentUrl: `https://content.test/${outboxAttachmentId}` };
 		},
 		keep: async (_draft, attachmentIds) => {
 			keeps.push(attachmentIds);
@@ -66,12 +67,20 @@ const createServer = () => {
 		},
 	};
 
+	const refuseMint = (filename: string, error: unknown) => {
+		const answer = mints.get(filename);
+		if (!answer) throw new Error(`no reservation asked for ${filename}`);
+		answer.reject(error);
+	};
+
 	const answerMint = (filename: string, outboxAttachmentId: string) => {
 		const answer = mints.get(filename);
 		if (!answer) throw new Error(`no reservation asked for ${filename}`);
 		answer.resolve({
 			outboxAttachmentId,
 			filename,
+			contentType: "application/octet-stream",
+			contentId: `${outboxAttachmentId}@test`,
 			uploadUrl: `https://upload.test/${outboxAttachmentId}`,
 		});
 	};
@@ -79,6 +88,7 @@ const createServer = () => {
 	return {
 		transport,
 		answerMint,
+		refuseMint,
 		onDraft,
 		put,
 		completed,
@@ -128,6 +138,106 @@ describe("ComposeAttachmentController", () => {
 		assert.equal(controller.blockingReason(), undefined);
 	});
 
+	it("hands the content-id to whoever attached the file once it is stored", async () => {
+		const { server, controller } = setup();
+		const stored: [string, string][] = [];
+		const shot = file("shot.png");
+
+		const attaching = controller.attach([shot], {
+			stored: (attached, contentId) => {
+				stored.push([attached.name, contentId]);
+			},
+			failed: () => {
+				throw new Error("a stored file was reported failed");
+			},
+		});
+		await settle();
+		assert.deepEqual(stored, [], "named before the bytes were stored");
+		server.answerMint("shot.png", "att-shot");
+		await attaching;
+
+		assert.deepEqual(stored, [["shot.png", "att-shot@test"]]);
+		assert.deepEqual(controller.storedContent("att-shot@test"), {
+			filename: "shot.png",
+			contentType: "application/octet-stream",
+			contentUrl: "https://content.test/att-shot",
+		});
+	});
+
+	it("tells whoever attached a refused file that it did not land, and keeps the refusal on its row", async () => {
+		const { server, controller } = setup();
+		const failed: string[] = [];
+
+		const attaching = controller.attach([file("huge.png")], {
+			stored: () => {
+				throw new Error("a refused file was reported stored");
+			},
+			failed: (attached) => {
+				failed.push(attached.name);
+			},
+		});
+		await settle();
+		server.refuseMint("huge.png", {
+			code: "attachment_rejected",
+			reason: "FileTooLarge",
+			message: '"huge.png" is 30.0 MB, over the 25.0 MB a message can carry.',
+		});
+		await attaching;
+
+		assert.deepEqual(failed, ["huge.png"]);
+		assert.deepEqual(rowFor(controller, "huge.png")?.state, {
+			status: "failed",
+			reason: '"huge.png" is 30.0 MB, over the 25.0 MB a message can carry.',
+			retryable: false,
+		});
+	});
+
+	it("names the content-id of a file once the server has dropped it", async () => {
+		const { server, controller } = setup();
+		const removed: string[] = [];
+		controller.onRemoved((contentId) => removed.push(contentId));
+
+		const attaching = controller.attach([file("shot.png")]);
+		await settle();
+		server.answerMint("shot.png", "att-shot");
+		await attaching;
+		await controller.remove(controller.getSnapshot()[0].key);
+
+		assert.deepEqual(removed, ["att-shot@test"]);
+		assert.equal(controller.owns("att-shot@test"), false);
+	});
+
+	it("keeps a file attached while the draft it joins was still loading", async () => {
+		const { server, controller } = setup();
+
+		const attaching = controller.attach([file("minutes.pdf")]);
+		await settle();
+		controller.load(DRAFT, [
+			{
+				outboxAttachmentId: "att-earlier",
+				outboxMessageId: DRAFT,
+				filename: "agenda.pdf",
+				contentType: "application/pdf",
+				sizeBytes: 5,
+				state: "Stored",
+				contentId: "att-earlier@remit",
+				contentUrl: "https://content.test/att-earlier",
+			},
+		]);
+		server.answerMint("minutes.pdf", "att-minutes");
+		await attaching;
+
+		assert.deepEqual(
+			controller
+				.getSnapshot()
+				.map((item) => [item.filename, item.state.status]),
+			[
+				["agenda.pdf", "attached"],
+				["minutes.pdf", "attached"],
+			],
+		);
+	});
+
 	it("takes a file removed while its reservation is out off the draft, and never uploads it", async () => {
 		const { server, controller } = setup();
 

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/lib/mail-search.ts

@@ -50,3 +50,20 @@ export const mailListSearchSchemas = {
 	"/mail/outbox": outboxSearchSchema,
 	"/mail/$mailboxId": mailboxSearchSchema,
 } as const;
+
+export const composeSeedSearch = z.object({ body: z.string().optional() });
+
+export type ComposeSeed = Required<z.infer<typeof composeSeedSearch>>;
+
+export const withoutComposeSeed = (
+	prev: Record<string, unknown>,
+): Record<string, unknown> => {
+	const { body: _seed, ...rest } = prev;
+	return rest;
+};
+
+export const replySearchSchemas = {
+	brief: briefSearchSchema.extend(composeSeedSearch.shape),
+	flagged: flaggedSearchSchema.extend(composeSeedSearch.shape),
+	mailbox: mailboxSearchSchema.extend(composeSeedSearch.shape),
+} as const;

package/src/routes/mail/$mailboxId/$threadId/$messageId/$mode.{-$outboxMessageId}.tsx

@@ -8,7 +8,8 @@
  * The conversation reads it off the address and opens it at its head.
  */
 import { createFileRoute } from "@tanstack/react-router";
+import { replySearchSchemas } from "@/lib/mail-search";
 
 export const Route = createFileRoute(
 	"/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}",
-)({});
+)({ validateSearch: replySearchSchemas.mailbox });

package/src/routes/mail/brief/$threadId/$messageId/$mode.{-$outboxMessageId}.tsx

@@ -20,7 +20,8 @@
  * the pane reads the reply off the address, the way the shell reads compose.
  */
 import { createFileRoute } from "@tanstack/react-router";
+import { replySearchSchemas } from "@/lib/mail-search";
 
 export const Route = createFileRoute(
 	"/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}",
-)({});
+)({ validateSearch: replySearchSchemas.brief });

package/src/routes/mail/flagged/$threadId/$messageId/$mode.{-$outboxMessageId}.tsx

@@ -8,7 +8,8 @@
  * The conversation reads it off the address and opens it at its head.
  */
 import { createFileRoute } from "@tanstack/react-router";
+import { replySearchSchemas } from "@/lib/mail-search";
 
 export const Route = createFileRoute(
 	"/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}",
-)({});
+)({ validateSearch: replySearchSchemas.flagged });

package/src/routing/compose.ts

@@ -1,5 +1,6 @@
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { useCallback } from "react";
+import { withoutComposeSeed } from "@/lib/mail-search";
 import { useBrowsedList, useNavigateToBrowsedList } from "./browsed-list";
 import { useRetainOpenPanels } from "./fragment";
 
@@ -108,7 +109,7 @@ function useComposeNavigate(): (
 		) => {
 			navigate({
 				...composeTarget(list, mailboxId, outboxMessageId),
-				search: (prev: Record<string, unknown>) => prev,
+				search: withoutComposeSeed,
 				// Opening or closing the surface is going somewhere, so the panes the
 				// reader keeps up travel and the overlays they were reading over do
 				// not. Recording the draft is not going anywhere — the address is

package/src/routing/outbox-draft.ts

@@ -1,5 +1,6 @@
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { useCallback } from "react";
+import { withoutComposeSeed } from "@/lib/mail-search";
 import { useNavigateToBrowsedList } from "./browsed-list";
 import { useRetainOpenPanels } from "./fragment";
 
@@ -29,7 +30,7 @@ export function useOpenOutboxDraft(): (outboxMessageId: string) => void {
 			navigate({
 				to: "/mail/outbox/draft/$outboxMessageId",
 				params: { outboxMessageId },
-				search: (prev: Record<string, unknown>) => prev,
+				search: withoutComposeSeed,
 				hash: retainPanels,
 			});
 		},