local-cal/docs/superpowers/plans/2025-05-24-mobile-event-modal.md

Mobile Event Edit Modal Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Replace the mobile-unusable centred Dialog on EventDialog with a shadcn Drawer (Vaul) that guides the user through three steps — Details, Schedule, Recurrence — while preserving the desktop Dialog unchanged.

Architecture: useIsMobile drives a conditional render: desktop gets the existing Dialog, mobile gets a new Drawer that renders one of three step components (DetailsStep, ScheduleStep, RecurrenceStep) at a time. Step state lives in a small inline hook. The single useForm instance is shared across all steps so data is never lost.

Tech Stack: Next.js 15, React 19, React Hook Form 7, shadcn/ui (Vaul Drawer), Bun test runner, Biome

---

File Map

File	Action	Responsibility
src/components/ui/drawer.tsx	Create	shadcn Drawer primitives wrapping Vaul
src/components/event-dialog.tsx	Modify	add step hook, DetailsStep, ScheduleStep, RecurrenceStep, Drawer branch
src/components/ui/dialog.tsx	Modify	remove isMobile forks from DialogContent and DialogFooter
tests/event-dialog.test.tsx	Modify	add tests for step sections, progress bars, AI banner, step footer labels
tests/mobile-hook-adoption.test.ts	Modify	add drawer.tsx to the hook-driven files list

---

Task 1: Install Vaul and add drawer.tsx

Files:

• Create: src/components/ui/drawer.tsx

• Modify: package.json, bun.lock

• Step 1: Install Vaul

bun add vaul

Expected: vaul appears in dependencies in package.json.

• Step 2: Create src/components/ui/drawer.tsx

"use client";

import * as React from "react";
import { Drawer as DrawerPrimitive } from "vaul";
import { cn } from "@/lib/utils";

function Drawer({
	shouldScaleBackground = true,
	...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
	return (
		<DrawerPrimitive.Root
			shouldScaleBackground={shouldScaleBackground}
			{...props}
		/>
	);
}

function DrawerTrigger({
	...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
	return <DrawerPrimitive.Trigger {...props} />;
}

function DrawerPortal({
	...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
	return <DrawerPrimitive.Portal {...props} />;
}

function DrawerClose({
	...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
	return <DrawerPrimitive.Close {...props} />;
}

function DrawerOverlay({
	className,
	...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
	return (
		<DrawerPrimitive.Overlay
			className={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-[2px]", className)}
			{...props}
		/>
	);
}

function DrawerContent({
	className,
	children,
	...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
	return (
		<DrawerPortal>
			<DrawerOverlay />
			<DrawerPrimitive.Content
				className={cn(
					"fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-[22px] bg-card shadow-xl outline-none",
					className,
				)}
				{...props}
			>
				<div className="mx-auto mt-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" />
				{children}
			</DrawerPrimitive.Content>
		</DrawerPortal>
	);
}

function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div
			className={cn("flex flex-col gap-1.5 px-4 pb-3 pt-2 border-b border-border", className)}
			{...props}
		/>
	);
}

function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div
			className={cn(
				"sticky bottom-0 grid grid-cols-[0.8fr_1.2fr] gap-3 bg-gradient-to-t from-card via-card/95 to-transparent px-4 pb-6 pt-4",
				className,
			)}
			{...props}
		/>
	);
}

function DrawerTitle({
	className,
	...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
	return (
		<DrawerPrimitive.Title
			className={cn("text-[22px] font-semibold leading-none tracking-[-0.06em]", className)}
			{...props}
		/>
	);
}

function DrawerDescription({
	className,
	...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
	return (
		<DrawerPrimitive.Description
			className={cn("text-sm text-muted-foreground leading-snug", className)}
			{...props}
		/>
	);
}

export {
	Drawer,
	DrawerClose,
	DrawerContent,
	DrawerDescription,
	DrawerFooter,
	DrawerHeader,
	DrawerOverlay,
	DrawerPortal,
	DrawerTitle,
	DrawerTrigger,
};

• Step 3: Verify the file compiles with no import errors

cd /path/to/project && bun run build 2>&1 | grep -i "drawer" | head -20

Expected: no errors mentioning drawer.tsx.

• Step 4: Commit

git add src/components/ui/drawer.tsx package.json bun.lock
git commit -m "feat: add shadcn Drawer component (Vaul)"

---

Task 2: Write failing tests for the Drawer branch

Files:

• Modify: tests/event-dialog.test.tsx

• Modify: tests/mobile-hook-adoption.test.ts

• Step 1: Add source-level assertions to tests/event-dialog.test.tsx

Replace the entire file with:

import { describe, expect, test } from "bun:test";
import { readFileSync } from "node:fs";
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");
	});

	test("dialog content uses console surface classes instead of generic border and shadow", () => {
		const source = readFileSync("src/components/ui/dialog.tsx", "utf8");

		expect(source).toContain("rounded-[10px]");
		expect(source).toContain("shadow-xl");
		expect(source).not.toContain("rounded-lg border p-6 shadow-lg");
	});

	test("dialog source uses console section labels and grouped field regions", () => {
		const source = readFileSync("src/components/event-dialog.tsx", "utf8");

		expect(source).toContain("Event details");
		expect(source).toContain("Schedule");
		expect(source).toContain("Recurrence");
	});

	test("event-dialog imports Drawer for mobile branch", () => {
		const source = readFileSync("src/components/event-dialog.tsx", "utf8");

		expect(source).toContain("from \"@/components/ui/drawer\"");
	});

	test("event-dialog renders three step components", () => {
		const source = readFileSync("src/components/event-dialog.tsx", "utf8");

		expect(source).toContain("DetailsStep");
		expect(source).toContain("ScheduleStep");
		expect(source).toContain("RecurrenceStep");
	});

	test("event-dialog includes step progress bars", () => {
		const source = readFileSync("src/components/event-dialog.tsx", "utf8");

		// Three progress bar divs rendered inside a grid-cols-3 container
		expect(source).toContain("grid-cols-3");
	});

	test("event-dialog includes step counter badge", () => {
		const source = readFileSync("src/components/event-dialog.tsx", "utf8");

		// Step badge like "1 / 3"
		expect(source).toContain("/ 3");
	});

	test("drawer footer shows Cancel on step 1 and Back on steps 2 and 3", () => {
		const source = readFileSync("src/components/event-dialog.tsx", "utf8");

		expect(source).toContain("Cancel");
		expect(source).toContain("Back");
	});

	test("drawer footer shows Save only on step 3", () => {
		const source = readFileSync("src/components/event-dialog.tsx", "utf8");

		expect(source).toContain("Save");
		expect(source).toContain("Next");
	});

	test("event-dialog resets step to 1 on close", () => {
		const source = readFileSync("src/components/event-dialog.tsx", "utf8");

		expect(source).toContain("setStep(1)");
	});

	test("dialog.tsx no longer forks on isMobile in DialogContent", () => {
		const source = readFileSync("src/components/ui/dialog.tsx", "utf8");

		// isMobile should not be used to conditionally apply max-w inside DialogContent
		expect(source).not.toContain("isMobile ? undefined : \"max-w-lg\"");
	});

	test("dialog.tsx no longer forks on isMobile in DialogFooter", () => {
		const source = readFileSync("src/components/ui/dialog.tsx", "utf8");

		// DialogFooter should not branch on isMobile
		expect(source).not.toContain("isMobile\n\t\t\t\t? \"flex flex-col-reverse gap-2\"");
	});
});

• Step 2: Add drawer.tsx to hook-driven file list in tests/mobile-hook-adoption.test.ts

In tests/mobile-hook-adoption.test.ts, add "src/components/ui/drawer.tsx" to the HOOK_DRIVEN_FILES array. The drawer itself does not call useIsMobile (the caller decides the branch), so only add it to HOOK_DRIVEN_FILES — not to DIRECT_HOOK_FILES. The test checks that it contains no Tailwind breakpoint prefixes.

Replace the HOOK_DRIVEN_FILES array:

const HOOK_DRIVEN_FILES = [
	"src/app/page.tsx",
	"src/app/demo/combined-date-picker/page.tsx",
	"src/components/ai-toolbar.tsx",
	"src/components/event-dialog.tsx",
	"src/components/settings-panel.tsx",
	"src/components/ui/calendar.tsx",
	"src/components/ui/date-picker.tsx",
	"src/components/ui/dialog.tsx",
	"src/components/ui/drawer.tsx",
	"src/components/ui/input-group.tsx",
	"src/components/ui/textarea.tsx",
	"src/lib/ui-shell-contract.ts",
];

• Step 3: Run the new tests and confirm they fail for the right reasons

bun test tests/event-dialog.test.tsx 2>&1

Expected: the four new tests (imports Drawer, renders three step components, grid-cols-3, / 3, setStep(1), no longer forks) FAIL because the implementation does not exist yet. The first three existing tests should still PASS.

• Step 4: Commit the failing tests

git add tests/event-dialog.test.tsx tests/mobile-hook-adoption.test.ts
git commit -m "test: add failing tests for Drawer mobile branch in EventDialog"

---

Task 3: Extract step sub-components inside event-dialog.tsx

Files:

• Modify: src/components/event-dialog.tsx

These are pure presentational helpers declared at the bottom of the same file. They receive form state as props and render one section's fields.

• Step 1: Add the StepProps interface and DetailsStep at the bottom of event-dialog.tsx

Below the closing }; of EventDialog, add:

interface StepProps {
	control: ReturnType<typeof useForm<EventFormValues>>["control"];
	register: ReturnType<typeof useForm<EventFormValues>>["register"];
	errors: ReturnType<typeof useForm<EventFormValues>>["formState"]["errors"];
	watch: ReturnType<typeof useForm<EventFormValues>>["watch"];
	setValue: ReturnType<typeof useForm<EventFormValues>>["setValue"];
	isAiDraft: boolean;
}

function AiDraftBanner() {
	return (
		<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.
		</div>
	);
}

function DetailsStep({ control, register, errors, isAiDraft }: Omit<StepProps, "watch" | "setValue">) {
	const isMobile = useIsMobile();
	return (
		<div className="grid gap-4">
			{isAiDraft && <AiDraftBanner />}
			<div className="space-y-1.5">
				<Label htmlFor="event-title">Title</Label>
				<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"
					className="field-sizing-content min-h-[60px] max-h-40 resize-none placeholder:text-muted-foreground/50"
					placeholder="Add a description..."
					{...register("description")}
				/>
			</div>
			<div className={isMobile ? "grid grid-cols-1 gap-3" : "grid grid-cols-2 gap-3"}>
				<div className="space-y-1.5">
					<Label htmlFor="event-location">Location</Label>
					<Controller
						name="location"
						control={control}
						render={({ field }) => (
							<LocationAutocomplete
								id="event-location"
								onChange={field.onChange}
								value={field.value}
							/>
						)}
					/>
				</div>
				<div className="space-y-1.5">
					<Label htmlFor="event-url">URL</Label>
					<Input id="event-url" placeholder="URL" {...register("url")} />
					{errors.url && (
						<p className="text-xs text-destructive">{errors.url.message}</p>
					)}
				</div>
			</div>
		</div>
	);
}

Note: DetailsStep keeps the isMobile grid split for location/URL since that layout distinction is within the step body, not the container choice.

• Step 2: Add ScheduleStep below DetailsStep

function ScheduleStep({ control, errors, watch, setValue, isAiDraft }: Omit<StepProps, "register">) {
	const allDay = watch("allDay");
	const start = watch("start");

	const DURATIONS = [
		{ label: "+15 min", minutes: 15 },
		{ label: "+30 min", minutes: 30 },
		{ label: "+1 hour", minutes: 60 },
		{ label: "+3 hours", minutes: 180 },
	];

	const handleApplyDuration = (minutes: number) => {
		if (!start) return;
		const base = parseISO(start);
		if (!isValid(base)) return;
		const next =
			minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60);
		const pad = (v: number) => String(v).padStart(2, "0");
		const result = allDay
			? `${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`;
		setValue("end", result, { shouldDirty: true });
	};

	return (
		<div className="grid gap-4">
			{isAiDraft && <AiDraftBanner />}
			<div className="flex items-center gap-2 py-1">
				<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="cursor-pointer text-sm font-normal">
					All day
				</Label>
			</div>
			<div className="space-y-2">
				<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>
				)}
				<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>
	);
}

• Step 3: Add RecurrenceStep below ScheduleStep

function RecurrenceStep({ control, errors, watch, isAiDraft }: Omit<StepProps, "register" | "setValue">) {
	const start = watch("start");
	return (
		<div className="grid gap-4">
			{isAiDraft && <AiDraftBanner />}
			<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>
	);
}

• Step 4: Run tests — step component tests should start passing

bun test tests/event-dialog.test.tsx 2>&1

Expected: renders three step components and dialog source uses console section labels PASS. Tests for imports Drawer, grid-cols-3, / 3, setStep(1), footer labels, and isMobile fork removal still FAIL.

• Step 5: Commit

git add src/components/event-dialog.tsx
git commit -m "refactor: extract DetailsStep, ScheduleStep, RecurrenceStep into EventDialog"

---

Task 4: Add the Drawer branch to EventDialog

Files:

• Modify: src/components/event-dialog.tsx

• Step 1: Add Drawer imports at the top of event-dialog.tsx

After the existing Dialog imports block, add:

import {
	Drawer,
	DrawerContent,
	DrawerDescription,
	DrawerFooter,
	DrawerHeader,
	DrawerTitle,
} from "@/components/ui/drawer";

• Step 2: Add step state inside EventDialog, just after the useForm call

const [step, setStep] = React.useState<1 | 2 | 3>(1);
const advanceStep = () => setStep((s) => Math.min(s + 1, 3) as 1 | 2 | 3);
const retreatStep = () => setStep((s) => Math.max(s - 1, 1) as 1 | 2 | 3);

• Step 3: Update handleOpenChange to reset step

Replace the existing handleOpenChange function:

const handleOpenChange = (nextOpen: boolean) => {
	if (!nextOpen) {
		reset(getDefaultEventFormValues());
		setStep(1);
		onReset();
	}
	onOpenChange(nextOpen);
};

• Step 4: Add per-step field name sets for partial validation

After the handleOpenChange function, add:

const STEP_FIELDS: Record<1 | 2 | 3, (keyof EventFormValues)[]> = {
	1: ["title", "url"],
	2: ["start", "end"],
	3: ["recurrenceRule"],
};

const handleNext = async () => {
	const valid = await trigger(STEP_FIELDS[step]);
	if (valid) advanceStep();
};

const handleSave = handleSubmit((values) => {
	const result = validateEventFormValues(values);
	if (!result.success) {
		const fieldErrors = result.error.flatten().fieldErrors;
		let firstErrorStep: 1 | 2 | 3 | null = null;
		for (const [fieldName, messages] of Object.entries(fieldErrors)) {
			const firstMessage = messages?.[0];
			if (firstMessage) {
				setError(fieldName as keyof EventFormValues, { message: firstMessage });
				const ownerStep = (
					Object.entries(STEP_FIELDS) as [string, (keyof EventFormValues)[]][]
				).find(([, fields]) =>
					fields.includes(fieldName as keyof EventFormValues),
				)?.[0];
				const ownerStepNum = ownerStep ? (Number(ownerStep) as 1 | 2 | 3) : null;
				if (ownerStepNum !== null && (firstErrorStep === null || ownerStepNum < firstErrorStep)) {
					firstErrorStep = ownerStepNum;
				}
			}
		}
		if (firstErrorStep !== null) setStep(firstErrorStep);
		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.",
			});
			setStep(3);
			return;
		}
	}

	onSave(result.data);
	reset(getDefaultEventFormValues());
});

Also add trigger to the destructuring from useForm:

const {
	control,
	handleSubmit,
	register,
	reset,
	setError,
	setValue,
	trigger,
	watch,
	formState: { errors },
} = useForm<EventFormValues>({
	defaultValues: getDefaultEventFormValues(),
});

• Step 5: Replace the return statement with a conditional render

Replace the entire return (...) block (from return ( through the closing );) with:

const stepProps = { control, register, errors, watch, setValue, isAiDraft };

const progressBars = (
	<div className="grid grid-cols-3 gap-1.5 px-4 pt-2 pb-3">
		{([1, 2, 3] as const).map((n) => (
			<div
				key={n}
				className={cn(
					"h-[3px] rounded-full transition-colors duration-200",
					n <= step ? "bg-foreground" : "bg-muted",
				)}
			/>
		))}
	</div>
);

const stepTitles: Record<1 | 2 | 3, string> = {
	1: "Event Details",
	2: "Schedule",
	3: "Recurrence",
};

if (!isMobile) {
	return (
		<Dialog open={open} onOpenChange={handleOpenChange}>
			<DialogContent className="max-w-2xl rounded-[10px] bg-card p-0 shadow-xl">
				<DialogHeader className="px-6 py-5 shadow-[inset_0_-1px_0_0_var(--color-border)]">
					<DialogTitle className="text-[28px] tracking-[-0.06em]">
						{titleText}
					</DialogTitle>
					<DialogDescription>{descriptionText}</DialogDescription>
				</DialogHeader>
				<form className="grid gap-6 px-6 py-5" 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.
						</div>
					)}
					<section className="grid gap-3">
						<p className="font-mono text-[11px] uppercase text-muted-foreground">
							Event details
						</p>
						<DetailsStep {...stepProps} />
					</section>
					<section className="grid gap-3">
						<p className="font-mono text-[11px] uppercase text-muted-foreground">
							Schedule
						</p>
						<ScheduleStep {...stepProps} />
					</section>
					<section className="grid gap-3">
						<p className="font-mono text-[11px] uppercase text-muted-foreground">
							Recurrence
						</p>
						<RecurrenceStep {...stepProps} />
					</section>
					<DialogFooter>
						<Button type="button" variant="ghost" onClick={() => handleOpenChange(false)}>
							Cancel
						</Button>
						<Button type="submit">{saveLabel}</Button>
					</DialogFooter>
				</form>
			</DialogContent>
		</Dialog>
	);
}

return (
	<Drawer open={open} onOpenChange={handleOpenChange}>
		<DrawerContent>
			<DrawerHeader>
				<div className="flex items-start justify-between gap-3">
					<div>
						<DrawerTitle>{stepTitles[step]}</DrawerTitle>
						<DrawerDescription className="mt-1">
							{step === 1 && "Title and start date are required."}
							{step === 2 && "Set your event's date and time."}
							{step === 3 && "Optionally repeat this event."}
						</DrawerDescription>
					</div>
					<span className="shrink-0 rounded-full bg-muted px-2.5 py-1 text-xs text-muted-foreground">
						{step} / 3
					</span>
				</div>
			</DrawerHeader>
			{progressBars}
			<form onSubmit={handleSave}>
				<div className="overflow-y-auto px-4 pb-4 max-h-[55dvh]">
					{step === 1 && <DetailsStep {...stepProps} />}
					{step === 2 && <ScheduleStep {...stepProps} />}
					{step === 3 && <RecurrenceStep {...stepProps} />}
				</div>
				<DrawerFooter>
					<Button
						type="button"
						variant="outline"
						onClick={step === 1 ? () => handleOpenChange(false) : retreatStep}
					>
						{step === 1 ? "Cancel" : "Back"}
					</Button>
					{step < 3 ? (
						<Button type="button" onClick={handleNext}>
							Next
						</Button>
					) : (
						<Button type="submit">{saveLabel}</Button>
					)}
				</DrawerFooter>
			</form>
		</DrawerContent>
	</Drawer>
);

Also add cn to the imports from @/lib/utils if not already present:

import { cn } from "@/lib/utils";

And remove the now-redundant handleApplyDuration and DURATIONS from the top of EventDialog (they moved into ScheduleStep). Also remove the onSubmit function — it has been superseded by handleSave. Remove allDay and start from the top-level watch calls (they live in ScheduleStep now).

• Step 6: Run tests — expect most new tests to pass

bun test tests/event-dialog.test.tsx 2>&1

Expected: all tests except the two isMobile fork removal tests PASS (those require the next task).

• Step 7: Commit

git add src/components/event-dialog.tsx
git commit -m "feat: add mobile Drawer branch with guided steps to EventDialog"

---

Task 5: Clean up dialog.tsx — remove isMobile forks

Files:

• Modify: src/components/ui/dialog.tsx

• Step 1: Remove isMobile from DialogContent

In src/components/ui/dialog.tsx, DialogContent currently does:

const isMobile = useIsMobile();
// ...
className={cn(
  "...",
  isMobile ? undefined : "max-w-lg",
  className,
)}

Replace the entire DialogContent function with a version that always applies max-w-lg and removes the useIsMobile call:

function DialogContent({
	className,
	children,
	showCloseButton = true,
	...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
	showCloseButton?: boolean;
}) {
	return (
		<DialogPortal data-slot="dialog-portal">
			<DialogOverlay />
			<DialogPrimitive.Content
				data-slot="dialog-content"
				className={cn(
					"bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-5 rounded-[10px] p-6 shadow-xl duration-200 max-w-lg",
					className,
				)}
				{...props}
			>
				{children}
				{showCloseButton && (
					<DialogPrimitive.Close
						data-slot="dialog-close"
						className="focus:ring-ring/30 data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-[6px] p-1 opacity-70 transition-[background-color,opacity] hover:opacity-100 focus:ring-[3px] focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
					>
						<XIcon />
						<span className="sr-only">Close</span>
					</DialogPrimitive.Close>
				)}
			</DialogPrimitive.Content>
		</DialogPortal>
	);
}

• Step 2: Remove isMobile from DialogFooter

Replace the DialogFooter function with a version that always uses the desktop layout (the mobile layout is now inside DrawerFooter):

function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div
			data-slot="dialog-footer"
			className={cn("flex flex-row justify-end gap-2", className)}
			{...props}
		/>
	);
}

• Step 3: Remove unused useIsMobile import from dialog.tsx

Delete the import line:

import { useIsMobile } from "@/hooks/use-mobile";

• Step 4: Run tests — all should pass

bun test tests/event-dialog.test.tsx 2>&1

Expected: all 13 tests PASS.

• Step 5: Run the full test suite and confirm no regressions

bun test 2>&1 | tail -10

Expected: same number of passing tests as before (99), same pre-existing failures — no new failures introduced.

• Step 6: Commit

git add src/components/ui/dialog.tsx
git commit -m "refactor: remove isMobile forks from DialogContent and DialogFooter"

---

Task 6: Final verification

Files: none

• Step 1: Run the full test suite

bun test 2>&1 | tail -15

Expected: 99 + 10 new = ~109 passing, same 17 pre-existing failures, 0 new failures.

• Step 2: Run Biome lint

bun run lint 2>&1 | tail -20

Expected: no new errors in src/components/ui/drawer.tsx or src/components/event-dialog.tsx.

• Step 3: Confirm no Tailwind breakpoint prefixes in drawer.tsx

bun test tests/mobile-hook-adoption.test.ts 2>&1

Expected: all 3 tests in mobile hook adoption PASS.

• Step 4: Final commit if any lint auto-fixes were applied

git add -A && git diff --cached --stat
# Only commit if there are changes
git commit -m "chore: apply Biome lint fixes after mobile drawer implementation"

---

Self-Review Against Spec

Spec requirement	Task covering it
Desktop: Dialog unchanged	Task 4, !isMobile branch
Mobile: Vaul Drawer	Tasks 1 + 4
Three steps: Details / Schedule / Recurrence	Task 3
Step footer: Cancel→Next / Back→Next / Back→Save	Task 4, DrawerFooter
"Next" validates only current step fields	Task 4, handleNext + STEP_FIELDS
"Save" validates all, jumps to first error step	Task 4, handleSave
Progress bars (grid-cols-3)	Task 4, progressBars
Step badge "x / 3"	Task 4, DrawerHeader
AI banner per-step (not once)	Tasks 3 + 4, AiDraftBanner in each step
Error jump to lowest error step	Task 4, handleSave loop
Step resets to 1 on close	Task 4, handleOpenChange
Remove isMobile from DialogContent	Task 5
Remove isMobile from DialogFooter	Task 5
drawer.tsx in hook-driven file list	Task 2
Shared useForm instance	Task 4 — single useForm at EventDialog level