@remit/web-client 0.0.325 → 0.0.327

package/src/routing/calendar-fragment.test.ts

@@ -1,66 +0,0 @@
-/**
- * The fragment across the mail↔calendar switch.
- *
- * The calendar is a sibling of mail in the shell, not a different app, so the
- * chrome a reader has up travels with them: the rail is a pane they keep, the
- * slide-over and the sheet are overlays that going somewhere dismisses. The
- * calendar owns no panel of its own — nothing calendar-specific joins the union
- * (R3) — so the only thing it does to the fragment is carry it.
- */
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import {
-	formatOpenPanels,
-	panelFragments,
-	panelsWithOverlay,
-	parseOpenPanels,
-	retainOpenPanelsAtTier,
-} from "./fragment.js";
-
-const retainOnDesktop = retainOpenPanelsAtTier(true);
-const retainOnPhone = retainOpenPanelsAtTier(false);
-
-describe("the calendar names no panel of its own", () => {
-	it("leaves the union exactly as mail wrote it", () => {
-		assert.deepEqual(panelFragments, ["intelligence", "nav", "shortcuts"]);
-	});
-});
-
-describe("crossing between mail and the calendar", () => {
-	// The nav entry is a `NavLink`, so both directions go through the same
-	// retention the mail lists already navigate under.
-	it("carries the rail into the calendar and back out again", () => {
-		assert.equal(retainOnDesktop("intelligence"), "intelligence");
-	});
-
-	it("leaves the slide-over the reader picked the entry from behind", () => {
-		assert.equal(retainOnDesktop("nav"), "");
-		assert.equal(retainOnDesktop("intelligence,nav"), "intelligence");
-	});
-
-	it("leaves the drawer behind on a tier that has no rail", () => {
-		assert.equal(retainOnPhone("intelligence"), "");
-		assert.equal(retainOnPhone("intelligence,nav"), "");
-	});
-});
-
-describe("reaching for the folders while on the calendar", () => {
-	const opened = (hash: string): string =>
-		formatOpenPanels(panelsWithOverlay(parseOpenPanels(hash), "nav"));
-	const closed = (hash: string): string =>
-		formatOpenPanels(panelsWithOverlay(parseOpenPanels(hash), undefined));
-
-	it("keeps the rail the reader arrived with", () => {
-		assert.equal(opened("intelligence"), "intelligence,nav");
-		assert.equal(closed("intelligence,nav"), "intelligence");
-	});
-
-	it("puts the slide-over up over nothing else, and takes it down again", () => {
-		assert.equal(opened(""), "nav");
-		assert.equal(closed("nav"), "");
-	});
-
-	it("replaces whichever overlay was up, because two cannot be", () => {
-		assert.equal(opened("intelligence,shortcuts"), "intelligence,nav");
-	});
-});

package/src/routing/calendar.ts

@@ -1,250 +0,0 @@
-import type { CalendarViewId } from "@remit/ui";
-import {
-	useNavigate,
-	useParams,
-	useRouter,
-	useSearch,
-} from "@tanstack/react-router";
-import { useCallback, useMemo } from "react";
-import {
-	canonicalCalendarParams,
-	isoDate,
-	stepCalendarDate,
-} from "@/lib/calendar-route";
-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 {
-	view: CalendarViewId;
-	/** `YYYY-MM-DD`. */
-	date: string;
-	/** The calendars ticked in the query; empty means every one of them. */
-	calendarIds: readonly string[];
-}
-
-/**
- * The calendar the address names.
- *
- * The route canonicalises its own segments before anything mounts, so what
- * arrives here is always a view the ladder has and a day the calendar has —
- * the fallbacks below only cover the frame before the router has resolved
- * the params.
- */
-export function useCalendarAddress(): CalendarAddress {
-	const params = useParams({ from: VIEW_ROUTE, shouldThrow: false });
-	const search = useSearch({ from: VIEW_ROUTE, shouldThrow: false });
-	const view = params?.view ?? "";
-	const date = params?.date ?? "";
-	const calendarIds = search?.calendarId;
-	return useMemo(() => {
-		const canonical = canonicalCalendarParams(
-			{ view, date },
-			isoDate(new Date()),
-		);
-		return { ...canonical, calendarIds: calendarIds ?? [] };
-	}, [view, date, calendarIds]);
-}
-
-/** The event the reading pane has open, and the instance of it, if any. */
-export interface OpenCalendarEvent {
-	calendarObjectId: string;
-	/** One instance of a series; absent on the series itself. */
-	recurrenceId: string | undefined;
-}
-
-export function useOpenCalendarEvent(): OpenCalendarEvent | undefined {
-	const event = useParams({
-		from: "/calendar/$view/$date/$calendarObjectId",
-		shouldThrow: false,
-	});
-	const instance = useParams({
-		from: "/calendar/$view/$date/$calendarObjectId/$recurrenceId",
-		shouldThrow: false,
-	});
-	const calendarObjectId = event?.calendarObjectId;
-	const recurrenceId = instance?.recurrenceId;
-	return useMemo(
-		() => (calendarObjectId ? { calendarObjectId, recurrenceId } : undefined),
-		[calendarObjectId, recurrenceId],
-	);
-}
-
-/** 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,
-	});
-	const changing = useParams({
-		from: SUGGESTION_ROUTE,
-		shouldThrow: false,
-	});
-	return composer !== undefined || changing !== undefined;
-}
-
-export interface CalendarNavigation {
-	/** Change zoom, keeping the day on screen. */
-	goToView: (view: CalendarViewId) => void;
-	/** The previous or next screenful, measured in the view's own unit. */
-	step: (direction: -1 | 1) => void;
-	/** Home, from every view and every distance away. */
-	goToToday: () => void;
-	/**
-	 * The day the strip has scrolled to, written by `replace`. Scrolling is not
-	 * somewhere the reader went — Back belongs to the screen they arrived from,
-	 * not to every row they passed on the way down.
-	 */
-	setAnchorDate: (date: string) => void;
-	/** Out of the list and into the grid for one day. */
-	zoomToDay: (date: string) => void;
-	dayHref: (date: string) => string;
-	/**
-	 * One occurrence names the series it belongs to and the instance under it;
-	 * a resource that does not recur names only itself.
-	 */
-	openEvent: (calendarObjectId: string, recurrenceId?: string) => void;
-	closeEvent: () => void;
-	openComposer: () => void;
-	changeSuggestionFirst: (suggestionId: string, date: string) => void;
-}
-
-/**
- * Every move the calendar makes, as an address.
- *
- * Prev, next, today and the zoom switch are navigations rather than state
- * changes, so the address always names what is on screen and a link to it
- * reopens exactly that. Each one carries the open panes across the way the nav
- * does, so the reader keeps their chrome moving through the week.
- */
-export function useCalendarNavigation(): CalendarNavigation {
-	const navigate = useNavigate();
-	const router = useRouter();
-	const retainPanels = useRetainOpenPanels();
-	const { view, date } = useCalendarAddress();
-
-	const goTo = useCallback(
-		(params: { view: CalendarViewId; date: string }) => {
-			navigate({
-				to: VIEW_ROUTE,
-				params,
-				search: true,
-				hash: retainPanels,
-			});
-		},
-		[navigate, retainPanels],
-	);
-
-	const dayHref = useCallback(
-		(next: string) =>
-			router.buildLocation({
-				to: VIEW_ROUTE,
-				params: { view: "day", date: next },
-				search: true,
-				hash: retainPanels,
-			}).href,
-		[router, retainPanels],
-	);
-
-	return useMemo(
-		() => ({
-			goToView: (next: CalendarViewId) => goTo({ view: next, date }),
-			step: (direction: -1 | 1) =>
-				goTo({ view, date: stepCalendarDate(date, view, direction) }),
-			goToToday: () => goTo({ view, date: isoDate(new Date()) }),
-			setAnchorDate: (next: string) =>
-				navigate({
-					to: VIEW_ROUTE,
-					params: { view, date: next },
-					search: true,
-					hash: retainPanels,
-					replace: true,
-				}),
-			zoomToDay: (next: string) => navigate({ href: dayHref(next) }),
-			dayHref,
-			openEvent: (calendarObjectId: string, recurrenceId?: string) =>
-				recurrenceId === undefined || recurrenceId === ""
-					? navigate({
-							to: "/calendar/$view/$date/$calendarObjectId",
-							params: { view, date, calendarObjectId },
-							search: true,
-							hash: retainPanels,
-						})
-					: navigate({
-							to: "/calendar/$view/$date/$calendarObjectId/$recurrenceId",
-							params: { view, date, calendarObjectId, recurrenceId },
-							search: true,
-							hash: retainPanels,
-						}),
-			closeEvent: () => goTo({ view, date }),
-			openComposer: () =>
-				navigate({
-					to: "/calendar/$view/$date/new",
-					params: { view, date },
-					search: true,
-					hash: retainPanels,
-				}),
-			changeSuggestionFirst: (suggestionId: string, on: string) =>
-				navigate({
-					to: SUGGESTION_ROUTE,
-					params: { view, date: on, suggestionId },
-					search: true,
-					hash: retainPanels,
-				}),
-		}),
-		[goTo, navigate, dayHref, retainPanels, view, date],
-	);
-}
-
-/**
- * Leave the mail for one event on the calendar, on the day it falls, so the
- * reader lands where the grid already shows what is around it. The panes are
- * not carried: the calendar is a different surface, as the nav treats it.
- */
-export function useOpenEventOnCalendar(): (
-	date: string,
-	calendarObjectId: string,
-	recurrenceId: string,
-) => void {
-	const navigate = useNavigate();
-	return useCallback(
-		(date: string, calendarObjectId: string, recurrenceId: string) => {
-			if (recurrenceId === "") {
-				navigate({
-					to: "/calendar/$view/$date/$calendarObjectId",
-					params: { view: "day", date, calendarObjectId },
-				});
-				return;
-			}
-			navigate({
-				to: "/calendar/$view/$date/$calendarObjectId/$recurrenceId",
-				params: { view: "day", date, calendarObjectId, recurrenceId },
-			});
-		},
-		[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/compose-press-opens.render.test.ts

@@ -1,179 +0,0 @@
-/**
- * Every Compose press opens a composer (#719).
- *
- * The press used to resolve a folder to carry the reader to, and could refuse:
- * a folder list still loading, or an account with no folders at all, left the
- * button doing nothing but complaining. A message needs no folder to be written
- * in now, so there is nothing left to refuse — including from `/mail` itself,
- * which names no list because it is on its way to the brief.
- *
- * Closing has the same shape from the other side. Leaving is what the reader
- * asked for, so every branch leaves rather than stranding them inside a surface
- * they have just dismissed.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import {
-	type AnyRouter,
-	createMemoryHistory,
-	createRootRoute,
-	createRoute,
-	createRouter,
-	Outlet,
-	RouterProvider,
-} from "@tanstack/react-router";
-import { createElement } from "react";
-import { createDomHarness, type DomHarness } from "../test-support/dom";
-import { useCloseCompose, useOpenCompose } from "./compose";
-
-let harness: DomHarness | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-});
-
-// The router reads `self` at construction; the shared jsdom globals stop at
-// `window`.
-(globalThis as { self?: typeof globalThis }).self ??= globalThis;
-
-const MAILBOX_ID = "mbx-inbox";
-
-const Press = () => {
-	const openCompose = useOpenCompose();
-	const closeCompose = useCloseCompose();
-	return createElement(
-		"div",
-		null,
-		createElement(
-			"button",
-			{ type: "button", onClick: () => openCompose() },
-			"Compose",
-		),
-		createElement(
-			"button",
-			{ type: "button", onClick: () => closeCompose() },
-			"Close",
-		),
-	);
-};
-
-const RootLayout = () =>
-	createElement("div", null, createElement(Press), createElement(Outlet));
-
-/**
- * The real shape: the lists are siblings under `/mail`, and compose is a child
- * of each. `/mail` itself matches no list, which is the address the redirect to
- * the brief passes through.
- */
-const routerAt = (href: string): AnyRouter => {
-	const rootRoute = createRootRoute({ component: RootLayout });
-	const mailRoute = createRoute({
-		getParentRoute: () => rootRoute,
-		path: "/mail",
-		validateSearch: (search: Record<string, unknown>) => search,
-		component: Outlet,
-	});
-	const briefRoute = createRoute({
-		getParentRoute: () => mailRoute,
-		path: "/brief",
-		component: Outlet,
-	});
-	const mailboxRoute = createRoute({
-		getParentRoute: () => mailRoute,
-		path: "/$mailboxId",
-		component: Outlet,
-	});
-	const routeTree = rootRoute.addChildren([
-		mailRoute.addChildren([
-			briefRoute.addChildren([
-				createRoute({
-					getParentRoute: () => briefRoute,
-					path: "/compose/{-$outboxMessageId}",
-					component: () => null,
-				}),
-			]),
-			mailboxRoute.addChildren([
-				createRoute({
-					getParentRoute: () => mailboxRoute,
-					path: "/compose/{-$outboxMessageId}",
-					component: () => null,
-				}),
-			]),
-		]),
-	]);
-	return createRouter({
-		routeTree,
-		history: createMemoryHistory({ initialEntries: [href] }),
-	}) as unknown as AnyRouter;
-};
-
-const mount = async (router: AnyRouter): Promise<DomHarness> => {
-	const created = createDomHarness();
-	harness = created;
-	// Resolve the first match before mounting: `RouterProvider` renders its
-	// pending state until the router has loaded, and nothing here waits for it.
-	await router.load();
-	created.renderApp(createElement(RouterProvider, { router }));
-	await created.flush();
-	await created.wait(20);
-	return created;
-};
-
-const press = async (mounted: DomHarness, label: string): Promise<void> => {
-	mounted.click(mounted.byText("button", label));
-	await mounted.flush();
-	await mounted.wait(20);
-};
-
-describe("a compose press always opens a composer", () => {
-	it("opens on the list being browsed", async () => {
-		const router = routerAt("/mail/brief");
-		const mounted = await mount(router);
-
-		await press(mounted, "Compose");
-
-		assert.equal(router.state.location.pathname, "/mail/brief/compose");
-	});
-
-	it("opens on the folder being browsed", async () => {
-		const router = routerAt(`/mail/${MAILBOX_ID}`);
-		const mounted = await mount(router);
-
-		await press(mounted, "Compose");
-
-		assert.equal(router.state.location.pathname, `/mail/${MAILBOX_ID}/compose`);
-	});
-
-	// The address the redirect to the brief passes through. It names no list, and
-	// the press still has to write a message rather than report that it cannot.
-	it("opens from an address that names no list at all", async () => {
-		const router = routerAt("/mail");
-		const mounted = await mount(router);
-
-		await press(mounted, "Compose");
-
-		assert.equal(router.state.location.pathname, "/mail/brief/compose");
-	});
-});
-
-describe("closing compose always leaves", () => {
-	it("walks up to the list the surface was opened on", async () => {
-		const router = routerAt(`/mail/${MAILBOX_ID}/compose`);
-		const mounted = await mount(router);
-
-		await press(mounted, "Close");
-
-		assert.equal(router.state.location.pathname, `/mail/${MAILBOX_ID}`);
-	});
-
-	it("lands somewhere real from an address that names no list", async () => {
-		const router = routerAt("/mail");
-		const mounted = await mount(router);
-
-		await press(mounted, "Close");
-
-		assert.equal(router.state.location.pathname, "/mail/brief");
-	});
-});

package/src/routing/compose.ts

@@ -1,181 +0,0 @@
-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";
-
-/**
- * The compose route under each list. The draft is an optional segment of the
- * same route rather than a child of it, so adopting the id the first autosave
- * creates rewrites the address without unmounting the composer.
- */
-const BRIEF_COMPOSE = "/mail/brief/compose/{-$outboxMessageId}" as const;
-const FLAGGED_COMPOSE = "/mail/flagged/compose/{-$outboxMessageId}" as const;
-const OUTBOX_COMPOSE = "/mail/outbox/compose/{-$outboxMessageId}" as const;
-const MAILBOX_COMPOSE = "/mail/$mailboxId/compose/{-$outboxMessageId}" as const;
-
-/**
- * The compose match, if the address has one. Each `from` names a real route, so
- * a segment that does not exist fails to compile.
- *
- * A path matches one list at a time, so at most one of these answers.
- */
-function useComposeParams(): { outboxMessageId?: string } | undefined {
-	const brief = useParams({ from: BRIEF_COMPOSE, shouldThrow: false });
-	const flagged = useParams({ from: FLAGGED_COMPOSE, shouldThrow: false });
-	const outbox = useParams({ from: OUTBOX_COMPOSE, shouldThrow: false });
-	const mailbox = useParams({ from: MAILBOX_COMPOSE, shouldThrow: false });
-	return brief ?? flagged ?? outbox ?? mailbox;
-}
-
-/**
- * Whether the compose surface is showing.
- *
- * Compose is a child route of the list it was started from, so "is compose
- * showing" is a question about the path rather than a flag somebody else has to
- * keep in step with it.
- */
-export function useIsComposing(): boolean {
-	return useComposeParams() !== undefined;
-}
-
-/**
- * The draft the open composer is writing to, or `undefined` while it is still a
- * message with nothing saved behind it.
- *
- * One owner: the address. A copy in React state disagrees with it the first
- * time the reader presses Back, and the composer comes back empty over a draft
- * row that is still listed.
- */
-export function useComposeDraftId(): string | undefined {
-	return useComposeParams()?.outboxMessageId;
-}
-
-interface ComposeNavigation {
-	/** Which list's compose route, and the draft segment under it. */
-	to: typeof BRIEF_COMPOSE | typeof FLAGGED_COMPOSE | typeof OUTBOX_COMPOSE;
-	params: { outboxMessageId: string | undefined };
-}
-
-interface MailboxComposeNavigation {
-	to: typeof MAILBOX_COMPOSE;
-	params: { mailboxId: string; outboxMessageId: string | undefined };
-}
-
-/**
- * Where compose opens: the list being browsed, or the brief.
- *
- * Every case lands on a composer. The brief is the fallback rather than a
- * refusal because it always exists and always mounts the surface, so the two
- * addresses that name no folder — `/mail` on its way to the brief, and a folder
- * route in the frame before its id resolves — open a composer instead of
- * explaining why they cannot. A press that reports rather than writes is the
- * dead button this change deletes, and neither case has anything to report:
- * a message needs no folder to be written in.
- */
-function composeTarget(
-	list: "brief" | "flagged" | "outbox" | "mailbox" | undefined,
-	mailboxId: string | undefined,
-	outboxMessageId: string | undefined,
-): ComposeNavigation | MailboxComposeNavigation {
-	if (list === "flagged")
-		return { to: FLAGGED_COMPOSE, params: { outboxMessageId } };
-	if (list === "outbox")
-		return { to: OUTBOX_COMPOSE, params: { outboxMessageId } };
-	if (list === "mailbox" && mailboxId)
-		return { to: MAILBOX_COMPOSE, params: { mailboxId, outboxMessageId } };
-	return { to: BRIEF_COMPOSE, params: { outboxMessageId } };
-}
-
-/**
- * Navigate to compose on the list being browsed, on the draft named or on none.
- *
- * The draft travels as an argument rather than being set somewhere first: an
- * opener that had to do both could do only one, and the composer would come up
- * on whatever the last one left behind.
- */
-function useComposeNavigate(): (
-	outboxMessageId: string | undefined,
-	options?: { replace?: boolean; keepPanels?: boolean },
-) => void {
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
-	const { list, mailboxId } = useBrowsedList();
-
-	return useCallback(
-		(
-			outboxMessageId: string | undefined,
-			options?: { replace?: boolean; keepPanels?: boolean },
-		) => {
-			navigate({
-				...composeTarget(list, mailboxId, outboxMessageId),
-				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
-				// rewritten under a composer they are still typing in — so whatever is
-				// up stays up, sheet included.
-				hash: options?.keepPanels ? true : retainPanels,
-				replace: options?.replace ?? false,
-			});
-		},
-		[navigate, retainPanels, list, mailboxId],
-	);
-}
-
-/**
- * Start a new message.
- *
- * Takes nothing, because it is wired straight to buttons and key handlers: an
- * optional draft argument here would quietly receive a click event instead.
- * Resuming a draft is `useEditDraft`, which says so.
- *
- * A push, so Back leaves the surface and returns whatever it was opened over,
- * and the query travels with it — a compose started mid-search is still inside
- * that search.
- */
-export function useOpenCompose(): () => void {
-	const openCompose = useComposeNavigate();
-	return useCallback(() => openCompose(undefined), [openCompose]);
-}
-
-/** Resume a draft: the same surface, addressed at what it is editing. */
-export function useEditDraft(): (outboxMessageId: string) => void {
-	const openCompose = useComposeNavigate();
-	return useCallback(
-		(outboxMessageId: string) => openCompose(outboxMessageId),
-		[openCompose],
-	);
-}
-
-/**
- * Record the draft the composer just created, in the address.
- *
- * A replace, and every panel left alone: the reader started one message, so the
- * draft arriving under it is neither another step of history nor a move away
- * from whatever they have open over the composer.
- */
-export function useAdoptComposeDraft(): (outboxMessageId: string) => void {
-	const openCompose = useComposeNavigate();
-	return useCallback(
-		(outboxMessageId: string) =>
-			openCompose(outboxMessageId, { replace: true, keepPanels: true }),
-		[openCompose],
-	);
-}
-
-/**
- * Close compose, landing back on the list it was opened from.
- *
- * A push, like opening it: closing a surface moves the reader on, and Back is
- * how they undo that. Replacing the entry instead makes the press after a close
- * do nothing at all, because the entry behind it is the list they are already
- * looking at.
- *
- * Every branch leaves, the brief included. Leaving is what the reader asked
- * for, so a case this cannot name has to put them somewhere real rather than
- * return and strand them inside a surface they just dismissed.
- */
-export function useCloseCompose(): () => void {
-	return useNavigateToBrowsedList();
-}