@remit/web-client 0.0.229 → 0.0.231

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

@@ -0,0 +1,66 @@
+/**
+ * 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

@@ -0,0 +1,139 @@
+import type { CalendarViewId } from "@remit/ui";
+import { useNavigate, useParams, 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;
+
+/** 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 useIsWritingEvent(): boolean {
+	const composer = useParams({
+		from: "/calendar/$view/$date/new",
+		shouldThrow: false,
+	});
+	return composer !== 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;
+	openEvent: (calendarObjectId: string) => void;
+	closeEvent: () => void;
+	openComposer: () => 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 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],
+	);
+
+	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()) }),
+			openEvent: (calendarObjectId: string) =>
+				navigate({
+					to: "/calendar/$view/$date/$calendarObjectId",
+					params: { view, date, calendarObjectId },
+					search: true,
+					hash: retainPanels,
+				}),
+			closeEvent: () => goTo({ view, date }),
+			openComposer: () =>
+				navigate({
+					to: "/calendar/$view/$date/new",
+					params: { view, date },
+					search: true,
+					hash: retainPanels,
+				}),
+		}),
+		[goTo, navigate, retainPanels, view, date],
+	);
+}

package/src/routing/fragment.ts

@@ -27,6 +27,25 @@ export type OverlayPanel = (typeof overlayPanels)[number];
 export const isOverlayPanel = (panel: PanelFragment): panel is OverlayPanel =>
 	(overlayPanels as readonly PanelFragment[]).includes(panel);
 
+/**
+ * The set an overlay opening or closing leaves behind it.
+ *
+ * A write states the whole set, so raising the nav slide-over has to say what
+ * else is up or it takes it down. The panes stay and the previous overlay goes,
+ * because two overlays cannot both be up — which is how a reader crossing from
+ * their mail into the calendar and reaching for the folders keeps the rail they
+ * arrived with.
+ */
+export function panelsWithOverlay(
+	open: readonly PanelFragment[],
+	overlay: OverlayPanel | undefined,
+): PanelFragment[] {
+	return [
+		...open.filter((panel) => !isOverlayPanel(panel)),
+		...(overlay ? [overlay] : []),
+	];
+}
+
 const panelFragmentSchema = z.enum(panelFragments);
 
 /**

package/src/routing/index.ts

@@ -3,6 +3,15 @@ export {
 	useBrowsedList,
 	useOpensDetail,
 } from "./browsed-list";
+export {
+	type CalendarAddress,
+	type CalendarNavigation,
+	type OpenCalendarEvent,
+	useCalendarAddress,
+	useCalendarNavigation,
+	useIsWritingEvent,
+	useOpenCalendarEvent,
+} from "./calendar";
 export {
 	useAdoptComposeDraft,
 	useCloseCompose,
@@ -18,6 +27,7 @@ export {
 	overlayPanels,
 	type PanelFragment,
 	panelFragments,
+	panelsWithOverlay,
 	parseOpenPanels,
 	retainOpenPanelsAtTier,
 	useOpenPanels,

package/src/routing/nav-selection.ts

@@ -5,6 +5,7 @@ import { locationIsOnList } from "@/lib/mail-route";
  * The nav entry the address selects, or `""` where none does.
  *
  *   - `/settings/*` → "settings"
+ *   - `/calendar/*` → "calendar"
  *   - `/mail/outbox`, `/mail/flagged`, `/mail/brief` → that list
  *   - `/mail/$mailboxId` → the mailbox id, which is what the sidebar keys on
  *
@@ -17,6 +18,7 @@ export function useSelectedNavId(): string {
 	const mailbox = useParams({ from: "/mail/$mailboxId", shouldThrow: false });
 
 	if (locationIsOnList(pathname, "/settings")) return "settings";
+	if (locationIsOnList(pathname, "/calendar")) return "calendar";
 	if (locationIsOnList(pathname, "/mail/outbox")) return "outbox";
 	if (locationIsOnList(pathname, "/mail/flagged")) return "flagged";
 	if (locationIsOnList(pathname, "/mail/brief")) return "brief";

package/src/routing/sections.ts

@@ -11,7 +11,8 @@ export type AppSection =
 	| "flagged"
 	| "outbox"
 	| "settings"
-	| "accounts";
+	| "accounts"
+	| "importConfig";
 
 const sectionRoute = {
 	brief: "/mail/brief",
@@ -19,6 +20,7 @@ const sectionRoute = {
 	outbox: "/mail/outbox",
 	settings: "/settings",
 	accounts: "/settings/accounts",
+	importConfig: "/import",
 } as const satisfies Record<AppSection, string>;
 
 /** Go to a top-level section by name, so no caller writes a path. */