@remit/web-client 0.0.290 → 0.0.292

package/src/hooks/calendar/useDraftClashes.ts

@@ -0,0 +1,91 @@
+/**
+ * What the span a draft names runs into, across every calendar the reader
+ * holds — so the editor says so before Save rather than the grid after it.
+ *
+ * Read on the weeks from the draft's first day through its last, which for a
+ * single-day draft is the grid's own cache entry, and measured by the same rule the invitation card uses. Undefined
+ * while there is no span to check (all day, a time missing, an end not after
+ * the start) or no answer to
+ * check it against: drawing "nothing else is booked" over a read that has not
+ * landed is a claim, not a delay.
+ */
+import {
+	type CalendarClash,
+	type CalendarEventData,
+	clashesWith,
+	type EventDraft,
+} from "@remit/ui";
+import { useMemo } from "react";
+import { formatEventWhen } from "@/lib/calendar-format";
+import {
+	isDrawnInstance,
+	toCalendarEventData,
+	UNZONED_CALENDAR,
+} from "./instance";
+import { useCalendarEventWindow } from "./useCalendarEvents";
+import { useCalendars } from "./useCalendars";
+import { type CalendarWindow, calendarWindow, isoAtInZone } from "./window";
+
+const EVERY_CALENDAR: readonly string[] = [];
+const NO_WINDOW: CalendarWindow = { from: "", to: "" };
+
+export function useDraftClashes(
+	draft: EventDraft,
+	/** The resource being edited, which never clashes with itself. */
+	calendarObjectId = "",
+): CalendarClash[] | undefined {
+	const { timeZoneByCalendarId } = useCalendars();
+	const checkable =
+		draft.date !== "" &&
+		!draft.allDay &&
+		draft.endDate !== "" &&
+		draft.startTime !== "" &&
+		draft.endTime !== "" &&
+		`${draft.endDate}T${draft.endTime}` > `${draft.date}T${draft.startTime}`;
+	const { instances, isLoading, error } = useCalendarEventWindow({
+		...(checkable
+			? {
+					from: calendarWindow("week", draft.date).from,
+					to: calendarWindow("week", draft.endDate).to,
+				}
+			: NO_WINDOW),
+		calendarIds: EVERY_CALENDAR,
+		enabled: checkable,
+	});
+
+	const zone = timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR;
+
+	return useMemo(() => {
+		if (!checkable || isLoading || error) return undefined;
+		const start = isoAtInZone(draft.date, draft.startTime, zone);
+		const end = isoAtInZone(draft.endDate, draft.endTime, zone);
+		const others: CalendarEventData[] = instances
+			.filter(
+				(instance) =>
+					isDrawnInstance(instance) &&
+					instance.calendarObjectId !== calendarObjectId,
+			)
+			.map((instance) =>
+				toCalendarEventData(
+					instance,
+					timeZoneByCalendarId[instance.calendarId] ?? UNZONED_CALENDAR,
+				),
+			);
+		return clashesWith({ start, end }, others).map((event) => ({
+			id: event.id,
+			label: `${event.title}, ${formatEventWhen(event)}`,
+		}));
+	}, [
+		checkable,
+		isLoading,
+		error,
+		draft.date,
+		draft.endDate,
+		draft.startTime,
+		draft.endTime,
+		zone,
+		instances,
+		calendarObjectId,
+		timeZoneByCalendarId,
+	]);
+}

package/src/lib/calendar-collection-copy.test.ts

@@ -0,0 +1,23 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import { calendarUrlSegmentFor } from "./calendar-collection-copy.js";
+
+describe("calendarUrlSegmentFor", () => {
+	test("folds a name into a path segment", () => {
+		assert.strictEqual(
+			calendarUrlSegmentFor("Harbour Projects"),
+			"harbour-projects",
+		);
+	});
+
+	test("drops accents and punctuation at either end", () => {
+		assert.strictEqual(
+			calendarUrlSegmentFor("  Café & Crèche!  "),
+			"cafe-creche",
+		);
+	});
+
+	test("stays within the 64 characters the API accepts", () => {
+		assert.strictEqual(calendarUrlSegmentFor("a".repeat(80)).length, 64);
+	});
+});

package/src/lib/calendar-collection-copy.ts

@@ -0,0 +1,21 @@
+export interface CollectionConfirmCopy {
+	title: string;
+	description: string;
+}
+
+export const deleteCalendarConfirmCopy = (
+	calendarName: string,
+): CollectionConfirmCopy => ({
+	title: `Delete ${calendarName}?`,
+	description: `This removes ${calendarName} and every event in it, and any subscription address stops working. It cannot be undone.`,
+});
+
+/** A starting address for a new calendar, from the name typed so far. */
+export const calendarUrlSegmentFor = (displayName: string): string =>
+	displayName
+		.normalize("NFKD")
+		.replace(/[̀-ͯ]/g, "")
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, "-")
+		.replace(/^-+|-+$/g, "")
+		.slice(0, 64);

package/src/routes/settings/calendars.tsx

@@ -1,7 +1,9 @@
 import { SettingsShell } from "@remit/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
-import { CalendarFeedPanel } from "@/components/settings/CalendarFeedPanel";
+import { CalendarCreateCard } from "@/components/settings/CalendarCreateCard";
+import { CalendarSettingsPanel } from "@/components/settings/CalendarSettingsPanel";
+import { useCalendarCollectionWrites } from "@/hooks/calendar/useCalendarCollectionWrites";
 import { useCalendars } from "@/hooks/calendar/useCalendars";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
 
@@ -11,6 +13,13 @@ export const Route = createFileRoute("/settings/calendars")({
 
 const calendarsHelp = (
 	<div className="space-y-3">
+		<p>
+			Each calendar has a name, a time zone its floating times are read in, and
+			an address CalDAV clients reach it by. The address is fixed when the
+			calendar is added; the name and zone can change. Deleting a calendar
+			deletes every event in it. The default calendar is where accepted
+			invitations land, so it cannot be deleted.
+		</p>
 		<p>
 			A subscription address lets Apple Calendar, Google Calendar, Outlook and
 			Thunderbird show a calendar from here, read-only and kept up to date.
@@ -31,14 +40,16 @@ const calendarsHelp = (
 function CalendarsSettings() {
 	const navigate = useNavigate();
 	const [helpOpen, setHelpOpen] = useState(true);
-	const { calendars, isLoading } = useCalendars();
+	const { calendars, timeZoneByCalendarId, isLoading } = useCalendars();
+	const { createCalendar, isWriting } = useCalendarCollectionWrites();
+	const [createProblem, setCreateProblem] = useState("");
 
 	return (
 		<SettingsShell
 			items={SETTINGS_NAV_ITEMS}
 			activeId="calendars"
 			title="Calendars"
-			description="Share a calendar with any client that can subscribe to a URL."
+			description="Add, rename and delete calendars, and share one with any client that can subscribe to a URL."
 			help={calendarsHelp}
 			helpOpen={helpOpen}
 			onToggleHelp={() => setHelpOpen((open) => !open)}
@@ -55,17 +66,28 @@ function CalendarsSettings() {
 					aria-busy="true"
 					aria-label="Loading calendars"
 				/>
-			) : calendars.length === 0 ? (
-				<p className="py-12 text-sm text-fg-muted">No calendars yet.</p>
 			) : (
 				<div className="space-y-4">
 					{calendars.map((calendar) => (
-						<CalendarFeedPanel
+						<CalendarSettingsPanel
 							key={calendar.id}
 							calendarId={calendar.id}
 							calendarName={calendar.name}
+							timezone={timeZoneByCalendarId[calendar.id] ?? ""}
 						/>
 					))}
+					<CalendarCreateCard
+						isBusy={isWriting}
+						problem={createProblem}
+						onCreate={(calendar) => {
+							setCreateProblem("");
+							return createCalendar(calendar).then((outcome) => {
+								if (outcome.kind === "written") return true;
+								setCreateProblem(outcome.message);
+								return false;
+							});
+						}}
+					/>
 				</div>
 			)}
 		</SettingsShell>