feat: use friendly event date labels

refactor: centralize event dialog form state
feat: add shared recurrence helpers
2026-04-09 17:41:37 -04:00 · 2026-04-09 17:41:26 -04:00 · 2026-04-09 17:41:04 -04:00
15 changed files with 892 additions and 607 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -31,6 +31,8 @@
        "react": "19.1.0",
        "react-day-picker": "^9.9.0",
        "react-dom": "19.1.0",
+        "react-hook-form": "^7.66.0",
+        "rrule": "^2.8.1",
        "sonner": "^2.0.7",
        "tailwind-merge": "^3.3.1",
        "zod": "^4.3.6",
@@ -1016,6 +1018,8 @@

    "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],

+    "react-hook-form": ["react-hook-form@7.72.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-RhwBoy2ygeVZje+C+bwJ8g0NjTdBmDlJvAUHTxRjTmSUKPYsKfMphkS2sgEMotsY03bP358yEYlnUeZy//D9Ig=="],
+
    "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],

    "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
@@ -1038,6 +1042,8 @@

    "rou3": ["rou3@0.7.12", "", {}, "sha512-iFE4hLDuloSWcD7mjdCDhx2bKcIsYbtOTpfH5MHHLSKMOUyjqQXTeZVa289uuwEGEKFoE/BAPbhaU4B774nceg=="],

+    "rrule": ["rrule@2.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-hM3dHSBMeaJ0Ktp7W38BJZ7O1zOgaFEsn41PDk+yHoEtfLV+PoJt9E9xAlZiWgf/iqEqionN0ebHFZIDAp+iGw=="],
+
    "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],

    "safe-array-concat": ["safe-array-concat@1.1.3", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.2", "get-intrinsic": "^1.2.6", "has-symbols": "^1.1.0", "isarray": "^2.0.5" } }, "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q=="],
--- a/package.json
+++ b/package.json
@@ -36,6 +36,8 @@
    "react": "19.1.0",
    "react-day-picker": "^9.9.0",
    "react-dom": "19.1.0",
+    "react-hook-form": "^7.66.0",
+    "rrule": "^2.8.1",
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.3.1",
    "zod": "^4.3.6"
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,6 +23,11 @@ import {
 } from "@/lib/events-db";
 import { generateICS, parseICS } from "@/lib/ical";
 import { appendImagesDeduped } from "@/lib/multi-image";
+import {
+	getDefaultEventFormValues,
+	getEventFormValuesFromEvent,
+	type EventFormValues,
+} from "@/lib/event-form";
 import type { CalendarEvent } from "@/lib/types";

 const fileToBase64 = (file: File): Promise<string> =>
@@ -48,16 +53,8 @@ export default function HomePage() {
 	const [isDragOver, setIsDragOver] = useState(false);
 	const [isOnline, setIsOnline] = useState(true);

-	// Form fields
-	const [title, setTitle] = useState("");
-	const [description, setDescription] = useState("");
-	const [location, setLocation] = useState("");
-	const [url, setUrl] = useState("");
-	const [start, setStart] = useState("");
-	const [end, setEnd] = useState("");
-	const [allDay, setAllDay] = useState(false);
-	const [recurrenceRule, setRecurrenceRule] = useState<string | undefined>(
-		undefined,
+	const [dialogInitialValues, setDialogInitialValues] = useState<EventFormValues>(
+		getDefaultEventFormValues(),
 	);

 	// AI
@@ -99,16 +96,9 @@ export default function HomePage() {
 	const { data: session, isPending } = useSession();

 	const resetForm = () => {
-		setTitle("");
-		setDescription("");
-		setLocation("");
-		setUrl("");
-		setStart("");
-		setEnd("");
-		setAllDay(false);
+		setDialogInitialValues(getDefaultEventFormValues());
 		setEditingId(null);
 		setDialogSource("manual");
-		setRecurrenceRule(undefined);
 	};

 	/**
@@ -160,17 +150,17 @@ export default function HomePage() {
 		setImagePreviews([]);
 	};

-	const handleSave = async () => {
+	const handleSave = async (values: EventFormValues) => {
 		const eventData: CalendarEvent = {
 			id: editingId || nanoid(),
-			title,
-			description,
-			location,
-			url,
-			recurrenceRule,
-			start,
-			end: end || undefined,
-			allDay,
+			title: values.title,
+			description: values.description,
+			location: values.location,
+			url: values.url,
+			recurrenceRule: values.recurrenceRule,
+			start: values.start,
+			end: values.end || undefined,
+			allDay: values.allDay,
 			createdAt: editingId
 				? events.find((e) => e.id === editingId)?.createdAt
 				: new Date().toISOString(),
@@ -223,15 +213,8 @@ export default function HomePage() {
 	};

 	const populateEventForm = (ev: CalendarEvent) => {
-		setTitle(ev.title || "");
-		setDescription(ev.description || "");
-		setLocation(ev.location || "");
-		setUrl(ev.url || "");
-		setStart(ev.start || "");
-		setEnd(ev.end || "");
-		setAllDay(ev.allDay || false);
+		setDialogInitialValues(getEventFormValuesFromEvent(ev));
 		setEditingId(null);
-		setRecurrenceRule(ev.recurrenceRule || undefined);
 	};

 	const persistAiEvents = async (data: CalendarEvent[]) => {
@@ -348,16 +331,9 @@ export default function HomePage() {
 	};

 	const handleEdit = (eventData: CalendarEvent) => {
-		setTitle(eventData.title);
-		setDescription(eventData.description || "");
-		setLocation(eventData.location || "");
-		setUrl(eventData.url || "");
-		setStart(eventData.start);
-		setEnd(eventData.end || "");
-		setAllDay(eventData.allDay || false);
+		setDialogInitialValues(getEventFormValuesFromEvent(eventData));
 		setEditingId(eventData.id);
 		setDialogSource("manual");
-		setRecurrenceRule(eventData.recurrenceRule);
 		setDialogOpen(true);
 	};

@@ -536,22 +512,7 @@ export default function HomePage() {
 				onOpenChange={setDialogOpen}
 				editingId={editingId}
 				dialogSource={dialogSource}
-				title={title}
-				setTitle={setTitle}
-				description={description}
-				setDescription={setDescription}
-				location={location}
-				setLocation={setLocation}
-				url={url}
-				setUrl={setUrl}
-				start={start}
-				setStart={setStart}
-				end={end}
-				setEnd={setEnd}
-				allDay={allDay}
-				setAllDay={setAllDay}
-				recurrenceRule={recurrenceRule}
-				setRecurrenceRule={setRecurrenceRule}
+				initialValues={dialogInitialValues}
 				onSave={handleSave}
 				onReset={resetForm}
 			/>
--- a/src/components/event-card.tsx
+++ b/src/components/event-card.tsx
@@ -18,6 +18,7 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { formatEventRangeLabel } from "@/lib/event-date-format";
 import type { CalendarEvent } from "@/lib/types";

 interface EventCardProps {
@@ -27,21 +28,6 @@ interface EventCardProps {
 }

 export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
-	const formatDateTime = (dateStr: string, allDay: boolean | undefined) => {
-		return allDay
-			? new Date(dateStr).toLocaleDateString(undefined, {
-					month: "short",
-					day: "numeric",
-					year: "numeric",
-				})
-			: new Date(dateStr).toLocaleString(undefined, {
-					month: "short",
-					day: "numeric",
-					hour: "numeric",
-					minute: "2-digit",
-				});
-	};
-
 	const handleEdit = () => {
 		onEdit({
 			id: event.id,
@@ -52,12 +38,10 @@ export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
 			start: event.start,
 			end: event.end || "",
 			allDay: event.allDay || false,
+			recurrenceRule: event.recurrenceRule,
 		});
 	};

-	const endDate =
-		event.end && !event.allDay ? formatDateTime(event.end, event.allDay) : null;
-
 	return (
 		<motion.div
 			layout
@@ -66,15 +50,13 @@ export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
 			exit={{ opacity: 0, y: -8, transition: { duration: 0.15 } }}
 			transition={{ duration: 0.2 }}
 		>
-			<div className="glass-card p-4 group cursor-pointer hover:bg-accent/50 transition-colors duration-150">
+			<div className="glass-card group cursor-pointer p-4 transition-colors duration-150 hover:bg-accent/50">
 				<div className="flex items-start gap-3">
-					<div className="flex-1 min-w-0 space-y-1.5">
-						<h3 className="font-medium text-sm leading-snug truncate">
-							{event.title}
-						</h3>
+					<div className="min-w-0 flex-1 space-y-1.5">
+						<h3 className="truncate text-sm font-medium leading-snug">{event.title}</h3>

 						{event.description && (
-							<p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
+							<p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground">
 								{event.description}
 							</p>
 						)}
@@ -82,9 +64,7 @@ export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
 						<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
 							<span className="inline-flex items-center gap-1">
 								<Clock className="h-3 w-3 shrink-0" />
-								{formatDateTime(event.start, event.allDay)}
-								{endDate && <span className="text-muted-foreground/50">-</span>}
-								{endDate}
+								{formatEventRangeLabel(event)}
 							</span>

 							{event.location && (
@@ -98,24 +78,24 @@ export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
 								<Button
 									variant="link"
 									size="sm"
-									className="gap-1 h-auto p-0 text-xs text-primary/70 hover:text-primary"
+									className="h-auto gap-1 p-0 text-xs text-primary/70 hover:text-primary"
 									asChild
 								>
 									<a
 										href={event.url}
 										target="_blank"
 										rel="noopener noreferrer"
-										onClick={(e) => e.stopPropagation()}
+										onClick={(currentEvent) => currentEvent.stopPropagation()}
 									>
 										<ExternalLink className="h-3 w-3" />
-										<span className="truncate max-w-[120px]">Link</span>
+										<span className="max-w-[120px] truncate">Link</span>
 									</a>
 								</Button>
 							)}
 						</div>

 						{event.recurrenceRule && (
-							<RRuleDisplay rrule={event.recurrenceRule} />
+							<RRuleDisplay rrule={event.recurrenceRule} start={event.start} />
 						)}
 					</div>

--- a/src/components/event-dialog.tsx
+++ b/src/components/event-dialog.tsx
@@ -1,6 +1,8 @@
 "use client";

 import { addHours, addMinutes, isValid, parseISO } from "date-fns";
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
 import { LucideMapPin } from "lucide-react";
 import { DateTimePicker } from "@/components/date-time-picker";
 import { RecurrencePicker } from "@/components/recurrence-picker";
@@ -17,29 +19,20 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { validateRecurrence, parseRecurrenceRule } from "@/lib/recurrence";
+import {
+	getDefaultEventFormValues,
+	validateEventFormValues,
+	type EventFormValues,
+} from "@/lib/event-form";

 interface EventDialogProps {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
 	editingId: string | null;
 	dialogSource: "manual" | "ai";
-	title: string;
-	setTitle: (title: string) => void;
-	description: string;
-	setDescription: (description: string) => void;
-	location: string;
-	setLocation: (location: string) => void;
-	url: string;
-	setUrl: (url: string) => void;
-	start: string;
-	setStart: (start: string) => void;
-	end: string;
-	setEnd: (end: string) => void;
-	allDay: boolean;
-	setAllDay: (allDay: boolean) => void;
-	recurrenceRule: string | undefined;
-	setRecurrenceRule: (rule: string | undefined) => void;
-	onSave: () => void;
+	initialValues: EventFormValues;
+	onSave: (values: EventFormValues) => void;
 	onReset: () => void;
 }

@@ -48,31 +41,12 @@ export const EventDialog = ({
 	onOpenChange,
 	editingId,
 	dialogSource,
-	title,
-	setTitle,
-	description,
-	setDescription,
-	location,
-	setLocation,
-	url,
-	setUrl,
-	start,
-	setStart,
-	end,
-	setEnd,
-	allDay,
-	setAllDay,
-	recurrenceRule,
-	setRecurrenceRule,
+	initialValues,
 	onSave,
 	onReset,
 }: EventDialogProps) => {
 	const isAiDraft = dialogSource === "ai" && !editingId;
-	const titleText = editingId
-		? "Edit Event"
-		: isAiDraft
-			? "Review AI Draft"
-			: "New Event";
+	const titleText = editingId ? "Edit Event" : isAiDraft ? "Review AI Draft" : "New Event";
 	const descriptionText = editingId
 		? "Update the event details below. Title and start date are required."
 		: isAiDraft
@@ -80,9 +54,32 @@ export const EventDialog = ({
 			: "Create an event manually. Title and start date are required.";
 	const saveLabel = editingId ? "Update Event" : "Save Event";

-	const handleOpenChange = (val: boolean) => {
-		if (!val) onReset();
-		onOpenChange(val);
+	const {
+		control,
+		handleSubmit,
+		register,
+		reset,
+		setError,
+		setValue,
+		watch,
+		formState: { errors },
+	} = useForm<EventFormValues>({
+		defaultValues: getDefaultEventFormValues(),
+	});
+
+	useEffect(() => {
+		reset(initialValues);
+	}, [initialValues, reset]);
+
+	const allDay = watch("allDay");
+	const start = watch("start");
+
+	const handleOpenChange = (nextOpen: boolean) => {
+		if (!nextOpen) {
+			reset(getDefaultEventFormValues());
+			onReset();
+		}
+		onOpenChange(nextOpen);
 	};

 	const DURATIONS = [
@@ -92,19 +89,49 @@ export const EventDialog = ({
 		{ label: "+3 hours", minutes: 180 },
 	];

-	const handleApplyDuration = (minutes: number) => {
-		if (!start) return;
-		const base = parseISO(start);
+	const handleApplyDuration = (minutes: number, currentAllDay: boolean, currentStart: string) => {
+		if (!currentStart) return;
+		const base = parseISO(currentStart);
 		if (!isValid(base)) return;
-		const next =
-			minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60);
-		const pad = (n: number) => String(n).padStart(2, "0");
-		const result = allDay
+		const next = minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60);
+		const pad = (value: number) => String(value).padStart(2, "0");
+		const result = currentAllDay
 			? `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}`
 			: `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}T${pad(next.getHours())}:${pad(next.getMinutes())}:00`;
-		setEnd(result);
+		setValue("end", result, { shouldDirty: true });
 	};

+	const onSubmit = handleSubmit((values) => {
+		const result = validateEventFormValues(values);
+		if (!result.success) {
+			const fieldErrors = result.error.flatten().fieldErrors;
+			for (const [fieldName, messages] of Object.entries(fieldErrors)) {
+				const firstMessage = messages?.[0];
+				if (firstMessage) {
+					setError(fieldName as keyof EventFormValues, { message: firstMessage });
+				}
+			}
+			return;
+		}
+
+		if (values.recurrenceRule) {
+			const recurrenceValidation = validateRecurrence(parseRecurrenceRule(values.recurrenceRule));
+			if (!recurrenceValidation.isValid) {
+				setError("recurrenceRule", {
+					message:
+						recurrenceValidation.errors.rule ||
+						recurrenceValidation.errors.count ||
+						recurrenceValidation.errors.until ||
+						"Invalid recurrence.",
+				});
+				return;
+			}
+		}
+
+		onSave(result.data);
+		reset(getDefaultEventFormValues());
+	});
+
 	return (
 		<Dialog open={open} onOpenChange={handleOpenChange}>
 			<DialogContent className="glass-strong max-w-md">
@@ -113,35 +140,26 @@ export const EventDialog = ({
 					<DialogDescription>{descriptionText}</DialogDescription>
 				</DialogHeader>

-				<div className="space-y-3">
+				<form className="space-y-3" onSubmit={onSubmit}>
 					{isAiDraft && (
 						<div className="rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs leading-relaxed text-primary">
-							This draft was generated from natural language. Double-check
-							dates, times, location, recurrence, and links before saving.
+							This draft was generated from natural language. Double-check dates, times, location, recurrence, and links before saving.
 						</div>
 					)}

 					<div className="space-y-1.5">
 						<Label htmlFor="event-title">Title</Label>
-						<Input
-							id="event-title"
-							name="title"
-							placeholder="Event title"
-							value={title}
-							onChange={(e) => setTitle(e.target.value)}
-							className="font-medium"
-						/>
+						<Input id="event-title" placeholder="Event title" className="font-medium" {...register("title")} />
+						{errors.title && <p className="text-xs text-destructive">{errors.title.message}</p>}
 					</div>

 					<div className="space-y-1.5">
 						<Label htmlFor="event-description">Description / notes</Label>
 						<Textarea
 							id="event-description"
-							name="description"
 							className="field-sizing-content min-h-[60px] max-h-40 resize-none placeholder:text-muted-foreground/50"
 							placeholder="Add a description..."
-							value={description}
-							onChange={(e) => setDescription(e.target.value)}
+							{...register("description")}
 						/>
 					</div>

@@ -149,93 +167,94 @@ export const EventDialog = ({
 						<div className="space-y-1.5">
 							<Label htmlFor="event-location">Location</Label>
 							<div className="relative">
-								<LucideMapPin className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/50" />
-								<Input
-									id="event-location"
-									name="location"
-									placeholder="Location"
-									value={location}
-									onChange={(e) => setLocation(e.target.value)}
-									className="pl-8"
-								/>
+								<LucideMapPin className="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/50" />
+								<Input id="event-location" placeholder="Location" className="pl-8" {...register("location")} />
 							</div>
 						</div>
 						<div className="space-y-1.5">
 							<Label htmlFor="event-url">URL</Label>
-							<Input
-								id="event-url"
-								name="url"
-								placeholder="URL"
-								value={url}
-								onChange={(e) => setUrl(e.target.value)}
-							/>
+							<Input id="event-url" placeholder="URL" {...register("url")} />
+							{errors.url && <p className="text-xs text-destructive">{errors.url.message}</p>}
 						</div>
 					</div>

-					<RecurrencePicker
-						value={recurrenceRule}
-						onChange={setRecurrenceRule}
+					<Controller
+						name="recurrenceRule"
+						control={control}
+						render={({ field }) => (
+							<RecurrencePicker value={field.value} onChange={field.onChange} start={start} />
+						)}
 					/>
+					{errors.recurrenceRule && (
+						<p className="text-xs text-destructive">{errors.recurrenceRule.message}</p>
+					)}

 					<div className="flex items-center gap-2 py-1">
-						<Checkbox
-							id="event-all-day"
-							checked={allDay}
-							onCheckedChange={(checked) => setAllDay(checked === true)}
+						<Controller
+							name="allDay"
+							control={control}
+							render={({ field }) => (
+								<Checkbox
+									id="event-all-day"
+									checked={field.value}
+									onCheckedChange={(checked) => field.onChange(checked === true)}
+								/>
+							)}
 						/>
-						<Label
-							htmlFor="event-all-day"
-							className="text-sm font-normal cursor-pointer"
-						>
+						<Label htmlFor="event-all-day" className="cursor-pointer text-sm font-normal">
 							All day
 						</Label>
 					</div>

 					<div className="space-y-2">
-						<DateTimePicker
-							value={start}
-							onChange={setStart}
-							allDay={allDay}
-							placeholder="Start date"
+						<Controller
+							name="start"
+							control={control}
+							render={({ field }) => (
+								<DateTimePicker value={field.value} onChange={field.onChange} allDay={allDay} placeholder="Start date" />
+							)}
 						/>
 						{!allDay && (
-							<div className="flex gap-1 pl-0.5">
-								{DURATIONS.map(({ label, minutes }) => (
-									<Button
-										key={label}
-										type="button"
-										variant="ghost"
-										size="sm"
-										disabled={!start}
-										onClick={() => handleApplyDuration(minutes)}
-										className="px-2 py-1 text-xs text-muted-foreground"
-									>
-										{label}
-									</Button>
-								))}
-							</div>
-						)}
-						<DateTimePicker
-							value={end}
-							onChange={setEnd}
-							allDay={allDay}
-							placeholder="End date"
+						<Controller
+							name="end"
+							control={control}
+							render={() => (
+								<div className="flex gap-1 pl-0.5">
+									{DURATIONS.map(({ label, minutes }) => (
+										<Button
+											key={label}
+											type="button"
+											variant="ghost"
+											size="sm"
+											disabled={!start}
+											onClick={() => handleApplyDuration(minutes, allDay, start)}
+											className="px-2 py-1 text-xs text-muted-foreground"
+										>
+											{label}
+										</Button>
+									))}
+								</div>
+							)}
 						/>
+						)}
+						<Controller
+							name="end"
+							control={control}
+							render={({ field }) => (
+								<DateTimePicker value={field.value} onChange={field.onChange} allDay={allDay} placeholder="End date" />
+							)}
+						/>
+						{errors.start && <p className="text-xs text-destructive">{errors.start.message}</p>}
+						{errors.end && <p className="text-xs text-destructive">{errors.end.message}</p>}
 					</div>
-				</div>

-				<DialogFooter className="gap-2 sm:gap-0">
-					<Button
-						type="button"
-						variant="ghost"
-						onClick={() => handleOpenChange(false)}
-					>
-						Cancel
-					</Button>
-					<Button type="button" onClick={onSave}>
-						{saveLabel}
-					</Button>
-				</DialogFooter>
+					<DialogFooter className="gap-2 sm:gap-0">
+						<Button type="button" variant="ghost" onClick={() => handleOpenChange(false)}>
+							Cancel
+						</Button>
+						<Button type="submit">{saveLabel}</Button>
+					</DialogFooter>
+				</form>
 			</DialogContent>
 		</Dialog>
 	);
--- a/src/components/recurrence-picker.tsx
+++ b/src/components/recurrence-picker.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { format, parseISO } from "date-fns";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -11,75 +11,63 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-
-type Recurrence = {
-	freq: "NONE" | "DAILY" | "WEEKLY" | "MONTHLY";
-	interval: number;
-	byDay?: string[];
-	count?: number;
-	until?: string;
-};
+import {
+	getRecurrencePreview,
+	getWeekdayOptions,
+	parseRecurrenceRule,
+	recurrenceFrequencyLabels,
+	serializeRecurrenceRule,
+	validateRecurrence,
+	type RecurrenceFormValue,
+	type SupportedRecurrenceFrequency,
+	type Weekday,
+} from "@/lib/recurrence";

 interface Props {
 	value?: string;
+	start?: string;
 	onChange: (rrule: string | undefined) => void;
 }

-export function RecurrencePicker({ value, onChange }: Props) {
-	const [rec, setRec] = useState<Recurrence>(() => {
-		// If existing rrule, parse minimally (for simplicity we only rehydrate FREQ and INTERVAL)
-		if (value) {
-			const parts = Object.fromEntries(
-				value.split(";").map((p) => p.split("=")),
-			);
-			return {
-				freq: parts.FREQ || "NONE",
-				interval: parts.INTERVAL ? Number.parseInt(parts.INTERVAL, 10) : 1,
-				byDay: parts.BYDAY ? parts.BYDAY.split(",") : [],
-				count: parts.COUNT ? Number.parseInt(parts.COUNT, 10) : undefined,
-				until: parts.UNTIL,
-			};
-		}
-		return { freq: "NONE", interval: 1 };
-	});
+const weekdayOptions = getWeekdayOptions();

-	const update = (updates: Partial<Recurrence>) => {
-		const newRec = { ...rec, ...updates };
-		setRec(newRec);
+const getStartWeekday = (start?: string): Weekday => {
+	if (!start) return "MO";
+	const parsed = parseISO(start);
+	const jsDay = parsed.getDay();
+	const weekdays: Weekday[] = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+	return weekdays[jsDay] ?? "MO";
+};

-		if (newRec.freq === "NONE") {
+const updateWeekdays = (
+	current: Weekday[],
+	day: Weekday,
+): Weekday[] => {
+	return current.includes(day)
+		? current.filter((existingDay) => existingDay !== day)
+		: [...current, day];
+};
+
+export function RecurrencePicker({ value, start, onChange }: Props) {
+	const recurrence = parseRecurrenceRule(value);
+	const validation = validateRecurrence(recurrence);
+	const preview = start ? getRecurrencePreview(recurrence, start, 3) : [];
+
+	const update = (updates: Partial<RecurrenceFormValue>) => {
+		const nextValue = { ...recurrence, ...updates };
+
+		if (nextValue.freq === "NONE") {
 			onChange(undefined);
 			return;
 		}

-		// Build RRULE string
-		let rrule = `FREQ=${newRec.freq};INTERVAL=${newRec.interval}`;
-		if (newRec.freq === "WEEKLY" && newRec.byDay?.length) {
-			rrule += `;BYDAY=${newRec.byDay.join(",")}`;
+		const nextValidation = validateRecurrence(nextValue);
+		if (!nextValidation.isValid && nextValidation.errors.rule) {
+			onChange(value);
+			return;
 		}
-		if (newRec.count) rrule += `;COUNT=${newRec.count}`;
-		if (newRec.until)
-			rrule += `;UNTIL=${newRec.until.replace(/-/g, "")}T000000Z`;

-		onChange(rrule);
-	};
-
-	const toggleDay = (day: string) => {
-		const byDay = rec.byDay || [];
-		const newByDay = byDay.includes(day)
-			? byDay.filter((d) => d !== day)
-			: [...byDay, day];
-		update({ byDay: newByDay });
-	};
-
-	const dayLabels = {
-		MO: "Mon",
-		TU: "Tue",
-		WE: "Wed",
-		TH: "Thu",
-		FR: "Fri",
-		SA: "Sat",
-		SU: "Sun",
+		onChange(serializeRecurrenceRule(nextValue, start));
 	};

 	return (
@@ -89,65 +77,67 @@ export function RecurrencePicker({ value, onChange }: Props) {
 					Repeats
 				</Label>
 				<Select
-					value={rec.freq}
-					onValueChange={(value) =>
-						update({ freq: value as Recurrence["freq"] })
-					}
+					value={recurrence.freq}
+					onValueChange={(nextFrequency) => {
+						const frequency = nextFrequency as SupportedRecurrenceFrequency;
+						update({
+							freq: frequency,
+							byDay:
+								frequency === "WEEKLY"
+									? recurrence.byDay.length > 0
+										? recurrence.byDay
+										: [getStartWeekday(start)]
+									: [],
+						});
+					}}
 				>
 					<SelectTrigger id="frequency" className="mt-1.5">
 						<SelectValue />
 					</SelectTrigger>
 					<SelectContent>
-						<SelectItem value="NONE">Does not repeat</SelectItem>
-						<SelectItem value="DAILY">Daily</SelectItem>
-						<SelectItem value="WEEKLY">Weekly</SelectItem>
-						<SelectItem value="MONTHLY">Monthly</SelectItem>
+						{Object.entries(recurrenceFrequencyLabels).map(([optionValue, label]) => (
+							<SelectItem key={optionValue} value={optionValue}>
+								{label}
+							</SelectItem>
+						))}
 					</SelectContent>
 				</Select>
 			</div>

-			{rec.freq !== "NONE" && (
+			{recurrence.freq !== "NONE" && (
 				<>
 					<div>
 						<Label htmlFor="interval" className="text-xs text-muted-foreground">
-							Interval (every {rec.interval}{" "}
-							{rec.freq === "DAILY"
-								? "day"
-								: rec.freq === "WEEKLY"
-									? "week"
-									: "month"}
-							{rec.interval > 1 ? "s" : ""})
+							Interval (every {recurrence.interval} {recurrence.freq === "DAILY" ? "day" : recurrence.freq === "WEEKLY" ? "week" : "month"}
+							{recurrence.interval > 1 ? "s" : ""})
 						</Label>
 						<Input
 							id="interval"
 							type="number"
 							min={1}
-							value={rec.interval}
-							onChange={(e) =>
-								update({ interval: Number.parseInt(e.target.value, 10) || 1 })
+							value={recurrence.interval}
+							onChange={(event) =>
+								update({ interval: Number.parseInt(event.target.value, 10) || 1 })
 							}
 							className="mt-1.5 w-24"
 						/>
 					</div>

-					{rec.freq === "WEEKLY" && (
+					{recurrence.freq === "WEEKLY" && (
 						<div>
-							<Label className="text-xs text-muted-foreground">
-								Days of the week
-							</Label>
-							<div className="flex flex-wrap gap-3 mt-1.5">
-								{["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
+							<Label className="text-xs text-muted-foreground">Days of the week</Label>
+							<div className="mt-1.5 flex flex-wrap gap-3">
+								{weekdayOptions.map(({ value: day, label }) => (
 									<div key={day} className="flex items-center gap-1.5">
 										<Checkbox
 											id={day}
-											checked={rec.byDay?.includes(day) || false}
-											onCheckedChange={() => toggleDay(day)}
+											checked={recurrence.byDay.includes(day)}
+											onCheckedChange={() =>
+												update({ byDay: updateWeekdays(recurrence.byDay, day) })
+											}
 										/>
-										<Label
-											htmlFor={day}
-											className="text-xs font-normal cursor-pointer"
-										>
-											{dayLabels[day as keyof typeof dayLabels]}
+										<Label htmlFor={day} className="cursor-pointer text-xs font-normal">
+											{label}
 										</Label>
 									</div>
 								))}
@@ -164,12 +154,13 @@ export function RecurrencePicker({ value, onChange }: Props) {
 								id="count"
 								type="number"
 								placeholder="e.g. 10"
-								value={rec.count || ""}
-								onChange={(e) =>
+								value={recurrence.count || ""}
+								onChange={(event) =>
 									update({
-										count: e.target.value
-											? Number.parseInt(e.target.value, 10)
+										count: event.target.value
+											? Number.parseInt(event.target.value, 10)
 											: undefined,
+										until: event.target.value ? undefined : recurrence.until,
 									})
 								}
 								className="mt-1.5"
@@ -182,12 +173,38 @@ export function RecurrencePicker({ value, onChange }: Props) {
 							<Input
 								id="until"
 								type="date"
-								value={rec.until || ""}
-								onChange={(e) => update({ until: e.target.value || undefined })}
+								value={recurrence.until || ""}
+								onChange={(event) =>
+									update({
+										until: event.target.value || undefined,
+										count: event.target.value ? undefined : recurrence.count,
+									})
+								}
 								className="mt-1.5"
 							/>
 						</div>
 					</div>
+
+					{validation.errors.count && (
+						<p className="text-xs text-destructive">{validation.errors.count}</p>
+					)}
+					{validation.errors.until && (
+						<p className="text-xs text-destructive">{validation.errors.until}</p>
+					)}
+					{validation.errors.rule && (
+						<p className="text-xs text-destructive">{validation.errors.rule}</p>
+					)}
+
+					{preview.length > 0 && (
+						<div className="rounded-md border border-border/70 bg-muted/35 px-3 py-2">
+							<p className="text-xs font-medium text-foreground">Upcoming</p>
+							<p className="mt-1 text-xs text-muted-foreground">
+								{preview
+									.map((entry) => format(parseISO(entry), "EEE, MMM d"))
+									.join(" · ")}
+							</p>
+						</div>
+					)}
 				</>
 			)}
 		</div>
--- a/src/components/rrule-display.tsx
+++ b/src/components/rrule-display.tsx
@@ -1,308 +1,31 @@
+import { format, parseISO } from "date-fns";
 import { Badge } from "@/components/ui/badge";
-import type { RecurrenceRule } from "@/lib/rfc5545-types";
+import { formatRecurrenceText, getRecurrencePreview, parseRecurrenceRule } from "@/lib/recurrence";

 interface RRuleDisplayProps {
-	rrule: string | RecurrenceRule;
+	rrule?: string;
 	className?: string;
+	start?: string;
 }

-export function RRuleDisplay({ rrule, className }: RRuleDisplayProps) {
-	const parsedRule =
-		typeof rrule === "string" ? parseRRuleString(rrule) : rrule;
-	const humanText = formatRRuleToHuman(parsedRule);
+export function RRuleDisplay({ rrule, className, start }: RRuleDisplayProps) {
+	if (!rrule) return null;
+
+	const humanText = formatRecurrenceText(rrule);
+	const preview = start ? getRecurrencePreview(parseRecurrenceRule(rrule), start, 3) : [];

 	return (
 		<div className={className}>
-			<Badge variant="secondary" className="text-[10px] font-normal h-5">
-				{humanText}
-			</Badge>
-		</div>
-	);
-}
-
-interface RRuleDisplayDetailedProps {
-	rrule: string | RecurrenceRule;
-	className?: string;
-	showBadges?: boolean;
-}
-
-export function RRuleDisplayDetailed({
-	rrule,
-	className,
-	showBadges = true,
-}: RRuleDisplayDetailedProps) {
-	const parsedRule =
-		typeof rrule === "string" ? parseRRuleString(rrule) : rrule;
-	const humanText = formatRRuleToHuman(parsedRule);
-	const details = getRRuleDetails(parsedRule);
-
-	return (
-		<div className={className}>
-			<div className="space-y-2">
-				<div className="text-sm font-medium">{humanText}</div>
-
-				{showBadges && details.length > 0 && (
-					<div className="flex flex-wrap gap-1">
-						{details.map((detail) => (
-							<Badge key={detail} variant="outline">
-								{detail}
-							</Badge>
-						))}
-					</div>
+			<div className="flex flex-wrap items-center gap-1.5">
+				<Badge variant="secondary" className="h-5 text-[10px] font-normal capitalize">
+					{humanText ?? rrule}
+				</Badge>
+				{preview.length > 0 && (
+					<Badge variant="outline" className="h-5 text-[10px] font-normal">
+						Next: {preview.map((value) => format(parseISO(value), "MMM d")).join(", ")}
+					</Badge>
 				)}
 			</div>
 		</div>
 	);
 }
-
-function parseRRuleString(rruleString: string): RecurrenceRule {
-	const parts = Object.fromEntries(
-		rruleString.split(";").map((p) => p.split("=")),
-	);
-
-	return {
-		freq: parts.FREQ as RecurrenceRule["freq"],
-		until: parts.UNTIL
-			? new Date(
-					parts.UNTIL.replace(
-						/(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})Z?/,
-						"$1-$2-$3T$4:$5:$6Z",
-					),
-				).toISOString()
-			: undefined,
-		count: parts.COUNT ? parseInt(parts.COUNT, 10) : undefined,
-		interval: parts.INTERVAL ? parseInt(parts.INTERVAL, 10) : undefined,
-		bySecond: parts.BYSECOND
-			? parts.BYSECOND.split(",").map((n: string) => parseInt(n, 10))
-			: undefined,
-		byMinute: parts.BYMINUTE
-			? parts.BYMINUTE.split(",").map((n: string) => parseInt(n, 10))
-			: undefined,
-		byHour: parts.BYHOUR
-			? parts.BYHOUR.split(",").map((n: string) => parseInt(n, 10))
-			: undefined,
-		byDay: parts.BYDAY ? parts.BYDAY.split(",") : undefined,
-		byMonthDay: parts.BYMONTHDAY
-			? parts.BYMONTHDAY.split(",").map((n: string) => parseInt(n, 10))
-			: undefined,
-		byYearDay: parts.BYYEARDAY
-			? parts.BYYEARDAY.split(",").map((n: string) => parseInt(n, 10))
-			: undefined,
-		byWeekNo: parts.BYWEEKNO
-			? parts.BYWEEKNO.split(",").map((n: string) => parseInt(n, 10))
-			: undefined,
-		byMonth: parts.BYMONTH
-			? parts.BYMONTH.split(",").map((n: string) => parseInt(n, 10))
-			: undefined,
-		bySetPos: parts.BYSETPOS
-			? parts.BYSETPOS.split(",").map((n: string) => parseInt(n, 10))
-			: undefined,
-		wkst: parts.WKST as RecurrenceRule["wkst"],
-	};
-}
-
-function formatRRuleToHuman(rule: RecurrenceRule): string {
-	const {
-		freq,
-		interval = 1,
-		count,
-		until,
-		byDay,
-		byMonthDay,
-		byMonth,
-		byHour,
-		byMinute,
-		bySecond,
-	} = rule;
-
-	let text = "";
-
-	// Base frequency
-	switch (freq) {
-		case "SECONDLY":
-			text = interval === 1 ? "Every second" : `Every ${interval} seconds`;
-			break;
-		case "MINUTELY":
-			text = interval === 1 ? "Every minute" : `Every ${interval} minutes`;
-			break;
-		case "HOURLY":
-			text = interval === 1 ? "Every hour" : `Every ${interval} hours`;
-			break;
-		case "DAILY":
-			text = interval === 1 ? "Daily" : `Every ${interval} days`;
-			break;
-		case "WEEKLY":
-			text = interval === 1 ? "Weekly" : `Every ${interval} weeks`;
-			break;
-		case "MONTHLY":
-			text = interval === 1 ? "Monthly" : `Every ${interval} months`;
-			break;
-		case "YEARLY":
-			text = interval === 1 ? "Yearly" : `Every ${interval} years`;
-			break;
-	}
-
-	// Add day specifications
-	if (byDay?.length) {
-		const dayNames = {
-			SU: "Sunday",
-			MO: "Monday",
-			TU: "Tuesday",
-			WE: "Wednesday",
-			TH: "Thursday",
-			FR: "Friday",
-			SA: "Saturday",
-		};
-
-		const days = byDay.map((day) => {
-			// Handle numbered days like "2TU" (second Tuesday)
-			const match = day.match(/^(-?\d+)?([A-Z]{2})$/);
-			if (match) {
-				const [, num, dayCode] = match;
-				const dayName = dayNames[dayCode as keyof typeof dayNames];
-				if (num) {
-					const ordinal = getOrdinal(parseInt(num, 10));
-					return `${ordinal} ${dayName}`;
-				}
-				return dayName;
-			}
-			return day;
-		});
-
-		if (freq === "WEEKLY") {
-			text += ` on ${formatList(days)}`;
-		} else {
-			text += ` on ${formatList(days)}`;
-		}
-	}
-
-	// Add month day specifications
-	if (byMonthDay?.length) {
-		const days = byMonthDay.map((day) => {
-			if (day < 0) {
-				return `${getOrdinal(Math.abs(day))} to last day`;
-			}
-			return getOrdinal(day);
-		});
-		text += ` on the ${formatList(days)}`;
-	}
-
-	// Add month specifications
-	if (byMonth?.length) {
-		const monthNames = [
-			"January",
-			"February",
-			"March",
-			"April",
-			"May",
-			"June",
-			"July",
-			"August",
-			"September",
-			"October",
-			"November",
-			"December",
-		];
-		const months = byMonth.map((month) => monthNames[month - 1]);
-		text += ` in ${formatList(months)}`;
-	}
-
-	// Add time specifications
-	if (byHour?.length || byMinute?.length || bySecond?.length) {
-		const timeSpecs = [];
-		if (byHour?.length) {
-			const hours = byHour.map((h) => `${h.toString().padStart(2, "0")}:00`);
-			timeSpecs.push(`at ${formatList(hours)}`);
-		}
-		if (byMinute?.length && !byHour?.length) {
-			timeSpecs.push(`at minute ${formatList(byMinute.map(String))}`);
-		}
-		if (bySecond?.length && !byHour?.length && !byMinute?.length) {
-			timeSpecs.push(`at second ${formatList(bySecond.map(String))}`);
-		}
-		if (timeSpecs.length) {
-			text += ` ${timeSpecs.join(" ")}`;
-		}
-	}
-
-	// Add end conditions
-	if (count) {
-		text += `, ${count} time${count === 1 ? "" : "s"}`;
-	} else if (until) {
-		const date = new Date(until);
-		text += `, until ${date.toLocaleDateString()}`;
-	}
-
-	return text;
-}
-
-function getRRuleDetails(rule: RecurrenceRule): string[] {
-	const details: string[] = [];
-
-	if (rule.wkst && rule.wkst !== "MO") {
-		const dayNames = {
-			SU: "Sunday",
-			MO: "Monday",
-			TU: "Tuesday",
-			WE: "Wednesday",
-			TH: "Thursday",
-			FR: "Friday",
-			SA: "Saturday",
-		};
-		details.push(`Week starts ${dayNames[rule.wkst]}`);
-	}
-
-	if (rule.byWeekNo?.length) {
-		details.push(`Week ${formatList(rule.byWeekNo.map(String))}`);
-	}
-
-	if (rule.byYearDay?.length) {
-		details.push(`Day ${formatList(rule.byYearDay.map(String))} of year`);
-	}
-
-	if (rule.bySetPos?.length) {
-		const positions = rule.bySetPos.map((pos) => {
-			if (pos < 0) {
-				return `${getOrdinal(Math.abs(pos))} to last`;
-			}
-			return getOrdinal(pos);
-		});
-		details.push(`Position ${formatList(positions)}`);
-	}
-
-	return details;
-}
-
-function getOrdinal(num: number): string {
-	const suffix = ["th", "st", "nd", "rd"];
-	const v = num % 100;
-	return num + (suffix[(v - 20) % 10] || suffix[v] || suffix[0]);
-}
-
-function formatList(items: string[]): string {
-	if (items.length === 0) return "";
-	if (items.length === 1) return items[0];
-	if (items.length === 2) return `${items[0]} and ${items[1]}`;
-	return `${items.slice(0, -1).join(", ")}, and ${items[items.length - 1]}`;
-}
-
-// Hook for easy usage in components
-export function useRRuleDisplay(rrule?: string) {
-	if (!rrule) return null;
-
-	try {
-		const parsedRule = parseRRuleString(rrule);
-		return {
-			humanText: formatRRuleToHuman(parsedRule),
-			details: getRRuleDetails(parsedRule),
-			parsedRule,
-		};
-	} catch (error) {
-		return {
-			humanText: "Invalid recurrence rule",
-			details: [],
-			parsedRule: null,
-			error: error instanceof Error ? error.message : String(error),
-		};
-	}
-}
--- a/src/lib/event-date-format.ts
+++ b/src/lib/event-date-format.ts
@@ -0,0 +1,38 @@
+import {
+	format,
+	isSameDay,
+	isToday,
+	isTomorrow,
+	parseISO,
+} from "date-fns";
+import type { CalendarEvent } from "@/lib/types";
+
+const getFriendlyDayLabel = (value: Date): string => {
+	if (isToday(value)) return "Today";
+	if (isTomorrow(value)) return "Tomorrow";
+	return format(value, "MMM d, yyyy");
+};
+
+export const formatEventStartLabel = (start: string, allDay?: boolean): string => {
+	const parsed = parseISO(start);
+	const dayLabel = getFriendlyDayLabel(parsed);
+
+	if (allDay) return dayLabel;
+	return `${dayLabel} · ${format(parsed, "HH:mm")}`;
+};
+
+export const formatEventRangeLabel = (event: Pick<CalendarEvent, "start" | "end" | "allDay">): string => {
+	const startDate = parseISO(event.start);
+	const startLabel = getFriendlyDayLabel(startDate);
+
+	if (event.allDay || !event.end) {
+		return event.allDay ? startLabel : `${startLabel} · ${format(startDate, "HH:mm")}`;
+	}
+
+	const endDate = parseISO(event.end);
+	if (isSameDay(startDate, endDate)) {
+		return `${startLabel} · ${format(startDate, "HH:mm")}–${format(endDate, "HH:mm")}`;
+	}
+
+	return `${startLabel} · ${format(startDate, "HH:mm")} → ${getFriendlyDayLabel(endDate)} · ${format(endDate, "HH:mm")}`;
+};
--- a/src/lib/event-form.ts
+++ b/src/lib/event-form.ts
@@ -0,0 +1,84 @@
+import { isAfter, parseISO } from "date-fns";
+import { z } from "zod";
+import type { CalendarEvent } from "@/lib/types";
+
+export interface EventFormValues {
+	title: string;
+	description: string;
+	location: string;
+	url: string;
+	start: string;
+	end: string;
+	allDay: boolean;
+	recurrenceRule?: string;
+}
+
+const eventFormSchema = z
+	.object({
+		title: z.string().trim().min(1, "Title is required."),
+		description: z.string(),
+		location: z.string(),
+		url: z.preprocess((value) => value ?? "", z.string().trim()),
+		start: z.string().trim().min(1, "Start date is required."),
+		end: z.string(),
+		allDay: z.boolean(),
+		recurrenceRule: z.string().optional(),
+	})
+	.superRefine((value, ctx) => {
+		if (value.url) {
+			const urlValidation = z.string().url().safeParse(value.url);
+			if (!urlValidation.success) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					path: ["url"],
+					message: "Enter a valid URL.",
+				});
+			}
+		}
+
+		if (value.end) {
+			const startDate = parseISO(value.start);
+			const endDate = parseISO(value.end);
+			if (Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					path: ["end"],
+					message: "End date must be valid.",
+				});
+			} else if (!isAfter(endDate, startDate)) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					path: ["end"],
+					message: "End date must be after the start date.",
+				});
+			}
+		}
+	});
+
+export const getDefaultEventFormValues = (): EventFormValues => ({
+	title: "",
+	description: "",
+	location: "",
+	url: "",
+	start: "",
+	end: "",
+	allDay: false,
+	recurrenceRule: undefined,
+});
+
+export const getEventFormValuesFromEvent = (
+	event?: Partial<CalendarEvent>,
+): EventFormValues => ({
+	...getDefaultEventFormValues(),
+	title: event?.title || "",
+	description: event?.description || "",
+	location: event?.location || "",
+	url: event?.url || "",
+	start: event?.start || "",
+	end: event?.end || "",
+	allDay: event?.allDay || false,
+	recurrenceRule: event?.recurrenceRule || undefined,
+});
+
+export const validateEventFormValues = (values: EventFormValues) =>
+	eventFormSchema.safeParse(values);
--- a/src/lib/recurrence.ts
+++ b/src/lib/recurrence.ts
@@ -0,0 +1,238 @@
+import { format, parseISO } from "date-fns";
+import { RRule, rrulestr } from "rrule";
+import type { Frequency, Weekday } from "@/lib/rfc5545-types";
+
+export type SupportedRecurrenceFrequency = "NONE" | "DAILY" | "WEEKLY" | "MONTHLY";
+
+export interface RecurrenceFormValue {
+	freq: SupportedRecurrenceFrequency;
+	interval: number;
+	byDay: Weekday[];
+	count?: number;
+	until?: string;
+}
+
+export interface RecurrenceValidationResult {
+	isValid: boolean;
+	errors: Partial<Record<"count" | "until" | "rule", string>>;
+}
+
+const EMPTY_RECURRENCE: RecurrenceFormValue = {
+	freq: "NONE",
+	interval: 1,
+	byDay: [],
+};
+
+const RULE_FREQUENCIES: Record<Exclude<SupportedRecurrenceFrequency, "NONE">, number> = {
+	DAILY: RRule.DAILY,
+	WEEKLY: RRule.WEEKLY,
+	MONTHLY: RRule.MONTHLY,
+};
+
+const WEEKDAY_ORDER: Weekday[] = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
+
+const RULE_WEEKDAYS = {
+	MO: RRule.MO,
+	TU: RRule.TU,
+	WE: RRule.WE,
+	TH: RRule.TH,
+	FR: RRule.FR,
+	SA: RRule.SA,
+	SU: RRule.SU,
+};
+
+const FREQUENCY_LABELS: Record<number, SupportedRecurrenceFrequency> = {
+	[RRule.DAILY]: "DAILY",
+	[RRule.WEEKLY]: "WEEKLY",
+	[RRule.MONTHLY]: "MONTHLY",
+};
+
+const SUPPORTED_FREQUENCIES = new Set<SupportedRecurrenceFrequency>([
+	"NONE",
+	"DAILY",
+	"WEEKLY",
+	"MONTHLY",
+]);
+
+const sortWeekdays = (days: string[] | undefined): Weekday[] => {
+	if (!days?.length) return [];
+	return [...days]
+		.filter((day): day is Weekday => WEEKDAY_ORDER.includes(day as Weekday))
+		.sort((left, right) => WEEKDAY_ORDER.indexOf(left) - WEEKDAY_ORDER.indexOf(right));
+};
+
+const toUntilDate = (until: string): Date => {
+	const parsed = parseISO(`${until}T23:59:59`);
+	return parsed;
+};
+
+const toRRuleOptions = (value: RecurrenceFormValue, dtstart?: string) => {
+	if (value.freq === "NONE") return null;
+
+	const options: ConstructorParameters<typeof RRule>[0] = {
+		freq: RULE_FREQUENCIES[value.freq],
+		interval: value.interval,
+	};
+
+	if (dtstart) {
+		options.dtstart = parseISO(dtstart);
+	}
+
+	if (value.freq === "WEEKLY" && value.byDay.length > 0) {
+		options.byweekday = value.byDay.map((day) => RULE_WEEKDAYS[day]);
+	}
+
+	if (value.count) options.count = value.count;
+	if (value.until) options.until = toUntilDate(value.until);
+
+	return options;
+};
+
+export const getDefaultRecurrence = (): RecurrenceFormValue => ({
+	...EMPTY_RECURRENCE,
+});
+
+export const validateRecurrence = (
+	value: RecurrenceFormValue,
+): RecurrenceValidationResult => {
+	const errors: RecurrenceValidationResult["errors"] = {};
+
+	if (!SUPPORTED_FREQUENCIES.has(value.freq)) {
+		errors.rule = "Unsupported recurrence frequency.";
+	}
+
+	if (!Number.isInteger(value.interval) || value.interval < 1) {
+		errors.rule = "Interval must be at least 1.";
+	}
+
+	if (value.count !== undefined && (!Number.isInteger(value.count) || value.count < 1)) {
+		errors.count = "Count must be a whole number greater than 0.";
+	}
+
+	if (value.until) {
+		const parsed = parseISO(value.until);
+		if (Number.isNaN(parsed.getTime())) {
+			errors.until = "Until must be a valid date.";
+		}
+	}
+
+	if (value.count !== undefined && value.until) {
+		errors.rule = "Choose either count or until, not both.";
+	}
+
+	if (value.freq === "WEEKLY" && value.byDay.length === 0) {
+		errors.rule = "Choose at least one weekday for weekly recurrence.";
+	}
+
+	return {
+		isValid: Object.keys(errors).length === 0,
+		errors,
+	};
+};
+
+export const parseRecurrenceRule = (rule?: string): RecurrenceFormValue => {
+	if (!rule) return getDefaultRecurrence();
+
+	const parsed = rrulestr(`RRULE:${rule}`) as RRule;
+	const options = parsed.origOptions;
+	const frequency = FREQUENCY_LABELS[options.freq ?? -1] ?? "NONE";
+
+	if (!SUPPORTED_FREQUENCIES.has(frequency)) {
+		return getDefaultRecurrence();
+	}
+
+	const byweekday = Array.isArray(options.byweekday)
+		? options.byweekday.map((weekday) => weekday.toString())
+		: options.byweekday
+			? [options.byweekday.toString()]
+			: [];
+
+	return {
+		freq: frequency,
+		interval: options.interval ?? 1,
+		byDay: sortWeekdays(byweekday),
+		count: options.count ?? undefined,
+		until: options.until ? format(options.until, "yyyy-MM-dd") : undefined,
+	};
+};
+
+export const serializeRecurrenceRule = (
+	value: RecurrenceFormValue,
+	dtstart?: string,
+): string | undefined => {
+	if (value.freq === "NONE") return undefined;
+
+	const validation = validateRecurrence(value);
+	if (!validation.isValid) {
+		throw new Error(validation.errors.rule || validation.errors.count || validation.errors.until || "Invalid recurrence.");
+	}
+
+	const options = toRRuleOptions(value, dtstart);
+	if (!options) return undefined;
+
+	const rule = new RRule(options);
+	const ruleLine = rule.toString().split("\n").find((line) => line.startsWith("RRULE:"));
+	if (!ruleLine) return undefined;
+
+	const entries = ruleLine.replace(/^RRULE:/, "").split(";");
+	const orderedKeys = ["FREQ", "INTERVAL", "UNTIL", "COUNT", "BYDAY"];
+	const sorted = [...entries].sort((left, right) => {
+		const leftKey = left.split("=")[0] ?? "";
+		const rightKey = right.split("=")[0] ?? "";
+		const leftIndex = orderedKeys.indexOf(leftKey);
+		const rightIndex = orderedKeys.indexOf(rightKey);
+		const normalizedLeftIndex = leftIndex === -1 ? Number.MAX_SAFE_INTEGER : leftIndex;
+		const normalizedRightIndex = rightIndex === -1 ? Number.MAX_SAFE_INTEGER : rightIndex;
+		return normalizedLeftIndex - normalizedRightIndex || leftKey.localeCompare(rightKey);
+	});
+
+	return sorted.join(";");
+};
+
+export const getRecurrencePreview = (
+	value: RecurrenceFormValue,
+	dtstart?: string,
+	limit = 3,
+): string[] => {
+	if (!dtstart || value.freq === "NONE") return [];
+
+	const options = toRRuleOptions(value, dtstart);
+	if (!options) return [];
+
+	const validation = validateRecurrence(value);
+	if (!validation.isValid) return [];
+
+	const rule = new RRule(options);
+	return rule
+		.all((_, index) => index < limit)
+		.map((date) => date.toISOString());
+};
+
+export const formatRecurrenceText = (rule?: string): string | null => {
+	if (!rule) return null;
+	return rrulestr(`RRULE:${rule}`).toText();
+};
+
+export const getWeekdayOptions = (): Array<{ value: Weekday; label: string }> => [
+	{ value: "MO", label: "Mon" },
+	{ value: "TU", label: "Tue" },
+	{ value: "WE", label: "Wed" },
+	{ value: "TH", label: "Thu" },
+	{ value: "FR", label: "Fri" },
+	{ value: "SA", label: "Sat" },
+	{ value: "SU", label: "Sun" },
+];
+
+export const isWeekdayPreset = (value: RecurrenceFormValue): boolean =>
+	value.freq === "WEEKLY" &&
+	value.interval === 1 &&
+	value.byDay.join(",") === ["MO", "TU", "WE", "TH", "FR"].join(",");
+
+export const recurrenceFrequencyLabels: Record<SupportedRecurrenceFrequency, string> = {
+	NONE: "Does not repeat",
+	DAILY: "Daily",
+	WEEKLY: "Weekly",
+	MONTHLY: "Monthly",
+};
+
+export type { Frequency, Weekday };
--- a/tests/event-card.test.ts
+++ b/tests/event-card.test.ts
@@ -28,4 +28,17 @@ describe("EventCard actions trigger", () => {
 		expect(markup).not.toContain("opacity-0");
 		expect(markup).not.toContain("group-hover:opacity-100");
 	});
+
+	test("renders friendly shared date formatting instead of native locale strings", () => {
+		const markup = renderToStaticMarkup(
+			EventCard({
+				event: sampleEvent,
+				onEdit: () => {},
+				onDelete: () => {},
+			}),
+		);
+
+		expect(markup).toContain("10:00–11:00");
+		expect(markup).not.toContain("AM");
+	});
 });
--- a/tests/event-date-format.test.ts
+++ b/tests/event-date-format.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, test } from "bun:test";
+import { addDays } from "date-fns";
+import { formatEventRangeLabel, formatEventStartLabel } from "@/lib/event-date-format";
+
+describe("event-date-format", () => {
+	test("formats a timed start-only event with a friendly day label", () => {
+		const today = new Date();
+		today.setHours(10, 0, 0, 0);
+
+		expect(formatEventStartLabel(today.toISOString(), false)).toContain("Today · 10:00");
+	});
+
+	test("formats a same-day timed range without native locale helpers", () => {
+		const today = new Date();
+		today.setHours(10, 0, 0, 0);
+		const end = new Date(today);
+		end.setHours(11, 30, 0, 0);
+
+		expect(
+			formatEventRangeLabel({ start: today.toISOString(), end: end.toISOString(), allDay: false }),
+		).toContain("10:00–11:30");
+	});
+
+	test("formats all-day events with tomorrow labels when applicable", () => {
+		const tomorrow = addDays(new Date(), 1);
+		tomorrow.setHours(0, 0, 0, 0);
+
+		expect(
+			formatEventRangeLabel({ start: tomorrow.toISOString(), end: undefined, allDay: true }),
+		).toBe("Tomorrow");
+	});
+});
--- a/tests/event-dialog.test.tsx
+++ b/tests/event-dialog.test.tsx
@@ -0,0 +1,16 @@
+import { describe, expect, test } from "bun:test";
+import { getEventFormValuesFromEvent } from "@/lib/event-form";
+
+describe("EventDialog public modes", () => {
+	test("accepts AI-prefilled editable initial values through its public props", () => {
+		const initialValues = getEventFormValuesFromEvent({
+			title: "AI Draft",
+			start: "2026-04-09T10:00:00.000Z",
+			recurrenceRule: "FREQ=WEEKLY;INTERVAL=1;BYDAY=TH",
+		});
+
+		expect(initialValues.title).toBe("AI Draft");
+		expect(initialValues.start).toBe("2026-04-09T10:00:00.000Z");
+		expect(initialValues.recurrenceRule).toBe("FREQ=WEEKLY;INTERVAL=1;BYDAY=TH");
+	});
+});
--- a/tests/event-form.test.ts
+++ b/tests/event-form.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, test } from "bun:test";
+import {
+	getDefaultEventFormValues,
+	getEventFormValuesFromEvent,
+	validateEventFormValues,
+} from "@/lib/event-form";
+
+describe("event form defaults and validation", () => {
+	test("returns manual-create defaults with blank values", () => {
+		expect(getDefaultEventFormValues()).toEqual({
+			title: "",
+			description: "",
+			location: "",
+			url: "",
+			start: "",
+			end: "",
+			allDay: false,
+			recurrenceRule: undefined,
+		});
+	});
+
+	test("maps edit and AI-prefilled events into form values", () => {
+		const values = getEventFormValuesFromEvent({
+			title: "AI Draft",
+			location: "Studio A",
+			start: "2026-04-09T10:00:00.000Z",
+			recurrenceRule: "FREQ=WEEKLY;INTERVAL=1;BYDAY=TH",
+		});
+
+		expect(values.title).toBe("AI Draft");
+		expect(values.location).toBe("Studio A");
+		expect(values.start).toBe("2026-04-09T10:00:00.000Z");
+		expect(values.recurrenceRule).toBe("FREQ=WEEKLY;INTERVAL=1;BYDAY=TH");
+	});
+
+	test("requires title and start values", () => {
+		const result = validateEventFormValues(getDefaultEventFormValues());
+
+		expect(result.success).toBe(false);
+		if (!result.success) {
+			expect(result.error.flatten().fieldErrors.title?.[0]).toContain("Title is required");
+			expect(result.error.flatten().fieldErrors.start?.[0]).toContain("Start date is required");
+		}
+	});
+
+	test("requires end to be after start when present", () => {
+		const result = validateEventFormValues({
+			...getDefaultEventFormValues(),
+			title: "Planning",
+			start: "2026-04-09T10:00:00.000Z",
+			end: "2026-04-09T09:30:00.000Z",
+		});
+
+		expect(result.success).toBe(false);
+		if (!result.success) {
+			expect(result.error.flatten().fieldErrors.end?.[0]).toContain("after the start date");
+		}
+	});
+
+	test("requires an optional URL to be valid when provided", () => {
+		const result = validateEventFormValues({
+			...getDefaultEventFormValues(),
+			title: "Planning",
+			start: "2026-04-09T10:00:00.000Z",
+			url: "not-a-url",
+		});
+
+		expect(result.success).toBe(false);
+		if (!result.success) {
+			expect(result.error.flatten().fieldErrors.url?.[0]).toContain("valid URL");
+		}
+	});
+});
--- a/tests/recurrence.test.ts
+++ b/tests/recurrence.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, test } from "bun:test";
+import {
+	formatRecurrenceText,
+	getRecurrencePreview,
+	parseRecurrenceRule,
+	serializeRecurrenceRule,
+	validateRecurrence,
+} from "@/lib/recurrence";
+
+describe("recurrence helpers", () => {
+	test("serializes a weekly weekday recurrence into an RFC5545 RRULE string", () => {
+		const rule = serializeRecurrenceRule({
+			freq: "WEEKLY",
+			interval: 2,
+			byDay: ["TU", "TH"],
+			until: "2026-06-30",
+		});
+
+		expect(rule).toBe("FREQ=WEEKLY;INTERVAL=2;UNTIL=20260630T235959Z;BYDAY=TU,TH");
+	});
+
+	test("rehydrates an existing RRULE string into picker-friendly values", () => {
+		const parsed = parseRecurrenceRule(
+			"FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE,FR;COUNT=6",
+		);
+
+		expect(parsed).toEqual({
+			freq: "WEEKLY",
+			interval: 1,
+			byDay: ["MO", "WE", "FR"],
+			count: 6,
+			until: undefined,
+		});
+	});
+
+	test("returns a preview of upcoming recurrence instances from the public helper", () => {
+		const preview = getRecurrencePreview(
+			{
+				freq: "MONTHLY",
+				interval: 1,
+				byDay: [],
+				count: 3,
+			},
+			"2026-04-09T10:00:00.000Z",
+		);
+
+		expect(preview).toHaveLength(3);
+		expect(preview[0]).toContain("2026-04-09T10:00:00.000Z");
+		expect(preview[1]).toContain("2026-05-09T10:00:00.000Z");
+		expect(preview[2]).toContain("2026-06-09T10:00:00.000Z");
+	});
+
+	test("rejects invalid recurrence endings that mix count and until", () => {
+		const result = validateRecurrence({
+			freq: "DAILY",
+			interval: 1,
+			byDay: [],
+			count: 5,
+			until: "2026-05-01",
+		});
+
+		expect(result.isValid).toBe(false);
+		expect(result.errors.rule).toContain("either count or until");
+	});
+
+	test("rejects malformed count inputs", () => {
+		const result = validateRecurrence({
+			freq: "MONTHLY",
+			interval: 1,
+			byDay: [],
+			count: 0,
+		});
+
+		expect(result.isValid).toBe(false);
+		expect(result.errors.count).toContain("greater than 0");
+	});
+
+	test("formats supported recurrence strings into human text", () => {
+		expect(formatRecurrenceText("FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE")).toContain(
+			"every week",
+		);
+	});
+});
Author	SHA1	Message	Date
Dmytro Stanchiev	e01a7ed1ad	feat: use friendly event date labels	2026-04-09 17:41:37 -04:00
Dmytro Stanchiev	12f2fd95dc	refactor: centralize event dialog form state	2026-04-09 17:41:26 -04:00
Dmytro Stanchiev	911e5735a4	feat: add shared recurrence helpers	2026-04-09 17:41:04 -04:00