@remit/web-client 0.0.294 → 0.0.296

package/src/hooks/useIntelligenceCalendar.ts

@@ -0,0 +1,347 @@
+/**
+ * The calendar half of the intelligence panel for the open message.
+ *
+ * The invitation, the day it lands on and the answers all come from the server:
+ * the suggestions the message produced, the events already on that day, and the
+ * busy time merged across every calendar. What is held here is only what the
+ * reader is in the middle of — the half-hours ticked, whether the offer is open,
+ * which answer is on its way and why the last one was refused — and none of it
+ * outlives the message it is about.
+ */
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import type {
+	CalendarDayEntry,
+	CalendarSlotPick,
+	CalendarSuggestionIntel,
+	IntelligenceCalendarActions,
+	IntelligenceCalendarSurface,
+	IntelligenceTabId,
+} from "@remit/ui";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+	calendarUnavailable,
+	calendarWriteGate,
+} from "@/components/calendar/CalendarUnavailable";
+import {
+	calendarWindowOfDays,
+	isDrawnInstance,
+	readCalendarInstanceId,
+	type SuggestionAnswer,
+	toCalendarEventData,
+	useCalendarEventWindow,
+	useCalendarFreeBusyWeeks,
+	useCalendarSuggestionAnswers,
+	useCalendars,
+	useMessageCalendarSuggestions,
+} from "@/hooks/calendar";
+import { formatDayLabel, formatInstantClock } from "@/lib/calendar-format";
+import { calendarReportHref } from "@/lib/calendar-report";
+import {
+	type CalendarSuggestion,
+	clashesOver,
+	inviteStanding,
+	isFromInvitation,
+	slotOffersOn,
+	slotsAsText,
+	suggestionDate,
+	suggestionWhen,
+	toCalendarInvite,
+	toEventSuggestion,
+} from "@/lib/calendar-suggestion";
+import { useOpenEventOnCalendar } from "@/routing";
+
+/** What the reader is in the middle of, for one message and no other. */
+interface Working {
+	messageId: string;
+	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 };
+}
+
+const fresh = (messageId: string): Working => ({
+	messageId,
+	tab: undefined,
+	offering: false,
+	picked: [],
+	copy: "idle",
+	answering: "",
+	failure: { suggestionId: "", text: "" },
+});
+
+/** Pending cards first, then the latest revision, so the card answers the newest ask. */
+const byUrgency = (a: CalendarSuggestion, b: CalendarSuggestion): number => {
+	const pending = Number(b.state === "Pending") - Number(a.state === "Pending");
+	return pending !== 0 ? pending : b.sequence - a.sequence;
+};
+
+const refusal = (what: string, answer: SuggestionAnswer): string =>
+	answer.kind === "refused"
+		? `Couldn't ${what}: ${answer.message} Try again, or answer from your calendar app.`
+		: "";
+
+export interface IntelligenceCalendar {
+	surface: IntelligenceCalendarSurface;
+	tab: IntelligenceTabId;
+	onTabChange: (tab: IntelligenceTabId) => void;
+}
+
+export function useIntelligenceCalendar(
+	thread: RemitImapThreadMessageResponse,
+): IntelligenceCalendar {
+	const messageId = thread.messageId;
+	const { suggestions, isLoading, error } =
+		useMessageCalendarSuggestions(messageId);
+	const calendarsRead = useCalendars();
+	const {
+		calendars,
+		defaultCalendarId,
+		colorByCalendarId,
+		timeZoneByCalendarId,
+	} = calendarsRead;
+	const gate = calendarWriteGate(calendarsRead);
+	const answers = useCalendarSuggestionAnswers();
+
+	const openEvent = useOpenEventOnCalendar();
+
+	const [held, setHeld] = useState<Working>(() => fresh(messageId));
+	const working = held.messageId === messageId ? held : fresh(messageId);
+	const onScreen = useRef(messageId);
+	onScreen.current = messageId;
+	// An answer can come back after the reader has moved on, and what it says
+	// is about the message it was given for, not the one now open.
+	const update = (change: Partial<Working>) => {
+		if (onScreen.current !== messageId) return;
+		setHeld((prev) => ({
+			...(prev.messageId === messageId ? prev : fresh(messageId)),
+			...change,
+		}));
+	};
+
+	const invitation = useMemo(
+		() =>
+			suggestions
+				.filter(isFromInvitation)
+				.filter((suggestion) => inviteStanding(suggestion) !== undefined)
+				.sort(byUrgency)[0],
+		[suggestions],
+	);
+	const readings = suggestions.filter(
+		(suggestion) => suggestion !== invitation && suggestion.state === "Pending",
+	);
+
+	const anchor = invitation ?? readings[0];
+	const date = anchor ? suggestionDate(anchor) : "";
+	const dayWindow = calendarWindowOfDays(date === "" ? "1970-01-01" : date, 1);
+	const dayEvents = useCalendarEventWindow({
+		...dayWindow,
+		calendarIds: [],
+		enabled: date !== "",
+	});
+	const freeBusy = useCalendarFreeBusyWeeks(date === "" ? [] : [dayWindow]);
+
+	const context = {
+		threadId: thread.threadId,
+		threadSubject: thread.subject ?? "",
+		calendarId: defaultCalendarId,
+	};
+	const senderName = thread.fromName ?? thread.fromEmail ?? "";
+	const reportHref = calendarReportHref(
+		working.failure.text || "the invitations in a message could not be read",
+	);
+	const addBlocked = calendarUnavailable(gate, reportHref);
+
+	const answer = (
+		suggestionId: string,
+		what: string,
+		request: () => Promise<SuggestionAnswer>,
+	) => {
+		update({ answering: suggestionId, failure: { suggestionId, text: "" } });
+		void request().then((result) =>
+			update({
+				answering: "",
+				failure: { suggestionId, text: refusal(what, result) },
+			}),
+		);
+	};
+
+	const invitationId = invitation?.suggestionId ?? "";
+	const inviteFailure =
+		working.failure.suggestionId === invitationId ? working.failure.text : "";
+	const otherFailure =
+		working.failure.suggestionId === invitationId ? "" : working.failure.text;
+
+	const standing = invitation ? inviteStanding(invitation) : undefined;
+	const invite =
+		invitation && standing
+			? {
+					invite: toCalendarInvite(invitation, standing.state, {
+						...context,
+						senderName,
+					}),
+					whenText: suggestionWhen(invitation),
+					calendarName:
+						calendars.find((calendar) => calendar.id === defaultCalendarId)
+							?.name ?? "Calendar",
+					color: colorByCalendarId[defaultCalendarId] ?? "cal-1",
+					clashes:
+						standing.state === "pending"
+							? clashesOver(
+									{ start: invitation.dtStart, end: invitation.dtEnd },
+									freeBusy.spans,
+								)
+							: [],
+					rsvp: standing.rsvp,
+					busy: working.answering === invitation.suggestionId,
+					failure: inviteFailure,
+					reportHref,
+					addBlocked,
+					sender: senderName,
+				}
+			: undefined;
+
+	const slots: CalendarSlotPick[] =
+		date === "" ? [] : slotOffersOn(date, freeBusy.spans);
+
+	const day: CalendarDayEntry[] = dayEvents.instances
+		.filter(isDrawnInstance)
+		.filter((instance) => !instance.allDay)
+		.sort((a, b) => a.start.localeCompare(b.start))
+		.map((instance) => {
+			const event = toCalendarEventData(
+				instance,
+				timeZoneByCalendarId[instance.calendarId] ?? "",
+			);
+			return {
+				event,
+				timeText: formatInstantClock(instance.start),
+				color: colorByCalendarId[instance.calendarId] ?? "cal-1",
+			};
+		});
+
+	const deck: CalendarSuggestionIntel[] = readings.map((suggestion) => ({
+		suggestion: toEventSuggestion(suggestion, {
+			...context,
+			sender: senderName,
+		}),
+		whenText: suggestionWhen(suggestion),
+	}));
+
+	const readFailure =
+		error === null
+			? ""
+			: "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 actions: IntelligenceCalendarActions = {
+		onAddInvite: () =>
+			answer(invitationId, "add this to your calendar", () =>
+				answers.accept(invitationId, defaultCalendarId),
+			),
+		onDeclineInvite: () =>
+			answer(invitationId, "decline this", () => answers.decline(invitationId)),
+		onMuteInvite: () =>
+			answer(invitationId, "stop these invitations", () =>
+				answers.dismiss(invitationId, true),
+			),
+		onRemoveInvite: cancellation
+			? () =>
+					answer(invitationId, "take this off your calendar", () =>
+						answers.accept(invitationId, defaultCalendarId),
+					)
+			: undefined,
+		onReopenInvite: cancellation
+			? () =>
+					answer(invitationId, "keep this on your calendar", () =>
+						answers.dismiss(invitationId, false),
+					)
+			: undefined,
+		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" }));
+		},
+		onAddSuggestion: (suggestionId) =>
+			answer(suggestionId, "add this to your calendar", () =>
+				answers.accept(suggestionId, defaultCalendarId),
+			),
+		onDismissSuggestion: (suggestionId) =>
+			answer(suggestionId, "dismiss this", () =>
+				answers.dismiss(suggestionId, false),
+			),
+		onSelectEvent: (eventId) => {
+			const { calendarObjectId, recurrenceId } =
+				readCalendarInstanceId(eventId);
+			openEvent(date, calendarObjectId, recurrenceId);
+		},
+	};
+
+	const aboutTime = invite !== undefined || deck.length > 0 || error !== null;
+	const latched = working.tab !== undefined;
+
+	// The tab is decided once, when the message's suggestions have been read,
+	// and then held: answering the last card must not pull the tab out from
+	// under the reader, and a read still in flight must not decide it.
+	useEffect(() => {
+		if (isLoading || latched) return;
+		setHeld((prev) =>
+			prev.messageId === messageId && prev.tab !== undefined
+				? prev
+				: {
+						...(prev.messageId === messageId ? prev : fresh(messageId)),
+						tab: aboutTime ? "calendar" : "sender",
+					},
+		);
+	}, [isLoading, latched, aboutTime, messageId]);
+
+	return {
+		surface: {
+			data: {
+				invite,
+				prose:
+					working.offering && date !== ""
+						? {
+								dayLabel: formatDayLabel(date),
+								proposals: [],
+								slots,
+								picked: working.picked,
+								copy: working.copy,
+								copyText,
+							}
+						: undefined,
+				suggestions: deck,
+				day,
+				dayLabel: date === "" ? "" : formatDayLabel(date),
+				suggestionsBusy: working.answering !== "" && !invite?.busy,
+				failure: readFailure,
+				suggestionsFailure: otherFailure,
+				reportHref,
+				addBlocked,
+			},
+			actions,
+		},
+		tab: working.tab ?? "sender",
+		onTabChange: (tab) => update({ tab }),
+	};
+}

package/src/hooks/useIntelligenceData.ts

@@ -118,7 +118,6 @@ function buildSenderFlags(
 		vip: address.flags.vip?.value === true,
 		muted: address.flags.muted?.value === true,
 		blocked: address.flags.blocked?.value === true,
-		unsubscribed: address.flags.unsubscribed?.value === true,
 	};
 }
 

package/src/hooks/useUpdateAddressFlags.ts

@@ -55,7 +55,7 @@ function applyFlagPatch(
 }
 
 /**
- * Optimistic PATCH for per-sender flags (VIP / Mute / Block / Unsubscribe).
+ * Optimistic PATCH for per-sender flags (VIP / Mute / Block).
  * Mirrors the `useToggleTrusted` pattern: patch the cached
  * address-search response so the toggle flips instantly, roll back on error,
  * and invalidate on settle to reconcile with the server.

package/src/lib/calendar-format.ts

@@ -17,8 +17,33 @@ const CLOCK = new Intl.DateTimeFormat(undefined, {
 	hour12: false,
 });
 
+const LONG_DAY = new Intl.DateTimeFormat(undefined, {
+	weekday: "long",
+	day: "numeric",
+	month: "long",
+	timeZone: "UTC",
+});
+
+const CIVIL_DAY = new Intl.DateTimeFormat(undefined, {
+	weekday: "short",
+	day: "numeric",
+	month: "long",
+	timeZone: "UTC",
+});
+
+/**
+ * "Wed 10 March", for a civil date `YYYY-MM-DD`. A date with no hours is the
+ * same day wherever the reader is, so it is never read as an instant.
+ */
+export function formatCivilDay(date: string): string {
+	return CIVIL_DAY.format(new Date(`${date}T00:00:00Z`));
+}
+
+/** A span as the kit is handed it: when it starts, when it ends, whether it has hours. */
+export type CalendarSpan = Pick<CalendarEventData, "start" | "end" | "allDay">;
+
 /** "Wed 10 June, 10:00 – 11:00", or the day alone when it runs all of it. */
-export function formatEventWhen(event: CalendarEventData): string {
+export function formatEventWhen(event: CalendarSpan): string {
 	const start = new Date(event.start);
 	const end = new Date(event.end);
 	const day = DAY.format(start);
@@ -27,3 +52,18 @@ export function formatEventWhen(event: CalendarEventData): string {
 	if (sameDay) return `${day}, ${CLOCK.format(start)} – ${CLOCK.format(end)}`;
 	return `${day}, ${CLOCK.format(start)} – ${DAY.format(end)}, ${CLOCK.format(end)}`;
 }
+
+/** "Thursday 11 June", for a civil date `YYYY-MM-DD` read on no clock at all. */
+export function formatDayLabel(date: string): string {
+	return LONG_DAY.format(new Date(`${date}T00:00:00Z`));
+}
+
+/** "10:00", for a clock time `HH:MM` already on the right clock. */
+export function formatClock(time: string): string {
+	return CLOCK.format(new Date(`1970-01-01T${time}:00`));
+}
+
+/** "10:00", for an instant, on this device's clock. */
+export function formatInstantClock(iso: string): string {
+	return CLOCK.format(new Date(iso));
+}

package/src/lib/calendar-report.ts

@@ -0,0 +1,11 @@
+import { buildBugReportContext, buildGitHubIssueUrl } from "./bug-report";
+
+/** A prefilled issue for an invitation answer or read that did not land. */
+export function calendarReportHref(what: string): string {
+	return buildGitHubIssueUrl(
+		buildBugReportContext({
+			title: `Calendar invitation: ${what}`,
+			errorMessage: what,
+		}),
+	);
+}

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

@@ -0,0 +1,169 @@
+/**
+ * What a suggestion's state asks of its card, and what the day it lands on
+ * already holds (#1277).
+ *
+ * The card is drawn off these answers alone, so a state mapped wrong is a card
+ * that asks for an answer the server will refuse — a button that can only fail.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	type CalendarSuggestion,
+	clashesOver,
+	inviteStanding,
+	slotOffersOn,
+	toCalendarInvite,
+	toEventSuggestion,
+} from "./calendar-suggestion";
+
+const suggestion = (
+	over: Partial<CalendarSuggestion> = {},
+): CalendarSuggestion => ({
+	suggestionId: "sug-1",
+	accountConfigId: "cfg-1",
+	messageId: "msg-1",
+	bodyPartId: "part-1",
+	icalUid: "uid-1",
+	sequence: 0,
+	method: "Request",
+	source: "IcalendarPart",
+	state: "Pending",
+	summary: "Quarterly review",
+	dtStart: "2026-09-01T08:00:00+00:00",
+	dtEnd: "2026-09-01T09:00:00+00:00",
+	allDay: false,
+	location: "",
+	organizer: "organizer@example.test",
+	zoneCertainty: "Explicit",
+	acceptedCalendarObjectId: "",
+	createdAt: 0,
+	updatedAt: 0,
+	...over,
+});
+
+const context = {
+	threadId: "thr-1",
+	threadSubject: "Quarterly review",
+	senderName: "Organizer",
+	calendarId: "cal-1",
+};
+
+describe("inviteStanding", () => {
+	it("asks for an answer only while the suggestion is pending", () => {
+		assert.deepEqual(inviteStanding(suggestion()), {
+			state: "pending",
+			rsvp: "noReply",
+		});
+		assert.deepEqual(inviteStanding(suggestion({ state: "Accepted" })), {
+			state: "answered",
+			rsvp: "accepted",
+		});
+		assert.deepEqual(inviteStanding(suggestion({ state: "Declined" })), {
+			state: "answered",
+			rsvp: "declined",
+		});
+		assert.deepEqual(inviteStanding(suggestion({ state: "Superseded" })), {
+			state: "superseded",
+			rsvp: "noReply",
+		});
+	});
+
+	it("draws no card for one the reader waved away", () => {
+		assert.equal(inviteStanding(suggestion({ state: "Dismissed" })), undefined);
+	});
+
+	it("asks about a cancellation only until it is taken or kept", () => {
+		assert.deepEqual(inviteStanding(suggestion({ method: "Cancel" })), {
+			state: "cancelled",
+			rsvp: "noReply",
+		});
+		assert.equal(
+			inviteStanding(suggestion({ method: "Cancel", state: "Accepted" })),
+			undefined,
+		);
+	});
+});
+
+describe("toCalendarInvite", () => {
+	it("names the organiser, and the sender when the invitation names none", () => {
+		assert.equal(
+			toCalendarInvite(suggestion(), "pending", context).organizerName,
+			"organizer@example.test",
+		);
+		assert.equal(
+			toCalendarInvite(suggestion({ organizer: "" }), "pending", context)
+				.organizerName,
+			"Organizer",
+		);
+	});
+
+	it("gives an untitled event a title rather than a blank heading", () => {
+		const invite = toCalendarInvite(
+			suggestion({ summary: "" }),
+			"pending",
+			context,
+		);
+		assert.equal(invite.proposed.title, "Untitled event");
+	});
+});
+
+describe("toEventSuggestion", () => {
+	it("says so when the zone the time was read on could not be resolved", () => {
+		const reading = toEventSuggestion(
+			suggestion({ zoneCertainty: "Ambiguous", source: "TextHeuristic" }),
+			{ ...context, sender: "Organizer" },
+		);
+		assert.match(reading.ambiguity, /hours out/);
+		assert.equal(reading.zoneCertainty, "ambiguous");
+		assert.ok(reading.confidence < 1);
+	});
+});
+
+describe("clashesOver", () => {
+	it("names every busy stretch the span runs into and nothing beside it", () => {
+		const clashes = clashesOver(
+			{ start: "2026-09-01T08:00:00+00:00", end: "2026-09-01T09:00:00+00:00" },
+			[
+				{
+					start: "2026-09-01T07:00:00+00:00",
+					end: "2026-09-01T08:00:00+00:00",
+				},
+				{
+					start: "2026-09-01T08:30:00+00:00",
+					end: "2026-09-01T09:30:00+00:00",
+				},
+				{
+					start: "2026-09-01T09:00:00+00:00",
+					end: "2026-09-01T10:00:00+00:00",
+				},
+			],
+		);
+		assert.equal(clashes.length, 1);
+		assert.match(clashes[0].label, /^Busy /);
+	});
+});
+
+describe("slotOffersOn", () => {
+	it("offers half-hours out of the free time only", () => {
+		const date = "2026-09-01";
+		const offers = slotOffersOn(date, []);
+		assert.ok(offers.length > 0);
+		assert.ok(offers.length <= 6);
+		for (const offer of offers) {
+			assert.equal(offer.date, date);
+			const [h1, m1] = offer.startTime.split(":").map(Number);
+			const [h2, m2] = offer.endTime.split(":").map(Number);
+			assert.equal(h2 * 60 + m2 - (h1 * 60 + m1), 30);
+		}
+	});
+
+	it("offers nothing on a day booked from end to end", () => {
+		const offers = slotOffersOn("2026-09-01", [
+			{
+				start: new Date("2026-08-31T12:00:00").toISOString(),
+				end: new Date("2026-09-02T12:00:00").toISOString(),
+			},
+		]);
+		assert.deepEqual(offers, []);
+	});
+});