refactor: extract DetailsStep, ScheduleStep, RecurrenceStep into EventDialog

src/components/event-dialog.tsx

@@ -26,6 +26,7 @@ import {
   validateEventFormValues,
 } from "@/lib/event-form";
 import { parseRecurrenceRule, validateRecurrence } from "@/lib/recurrence";
+import { cn } from "@/lib/utils";
 
 interface EventDialogProps {
   open: boolean;
@@ -48,11 +49,7 @@ export const EventDialog = ({
 }: EventDialogProps) => {
   const isMobile = useIsMobile();
   const isAiDraft = dialogSource === "ai" && !editingId;
-	const titleText = editingId
+  const titleText = editingId ? "Edit Event" : isAiDraft ? "Review AI Draft" : "New Event";
-		? "Edit Event"
-		: isAiDraft
-			? "Review AI Draft"
-			: "New Event";
   const descriptionText = editingId
     ? "Update the event details below. Title and start date are required."
     : isAiDraft
@@ -95,16 +92,11 @@ export const EventDialog = ({
     { label: "+3 hours", minutes: 180 },
   ];
 
-	const handleApplyDuration = (
+  const handleApplyDuration = (minutes: number, currentAllDay: boolean, currentStart: string) => {
-		minutes: number,
-		currentAllDay: boolean,
-		currentStart: string,
-	) => {
     if (!currentStart) return;
     const base = parseISO(currentStart);
     if (!isValid(base)) return;
-		const next =
+    const next = minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60);
-			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())}`
@@ -128,9 +120,7 @@ export const EventDialog = ({
     }
 
     if (values.recurrenceRule) {
-			const recurrenceValidation = validateRecurrence(
+      const recurrenceValidation = validateRecurrence(parseRecurrenceRule(values.recurrenceRule));
-				parseRecurrenceRule(values.recurrenceRule),
-			);
       if (!recurrenceValidation.isValid) {
         setError("recurrenceRule", {
           message:
@@ -151,24 +141,20 @@ export const EventDialog = ({
     <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]">
+          <DialogTitle className="text-[28px] tracking-[-0.06em]">{titleText}</DialogTitle>
-						{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
+              This draft was generated from natural language. Double-check dates, times, location,
-							dates, times, location, recurrence, and links before saving.
+              recurrence, and links before saving.
             </div>
           )}
 
           <section className="grid gap-3">
-						<p className="font-mono text-[11px] uppercase text-muted-foreground">
+            <p className="font-mono text-[11px] uppercase text-muted-foreground">Event details</p>
-							Event details
-						</p>
             <div className="space-y-1.5">
               <Label htmlFor="event-title">Title</Label>
               <Input
@@ -177,11 +163,7 @@ export const EventDialog = ({
                 className="font-medium"
                 {...register("title")}
               />
-							{errors.title && (
+              {errors.title && <p className="text-xs text-destructive">{errors.title.message}</p>}
-								<p className="text-xs text-destructive">
-									{errors.title.message}
-								</p>
-							)}
             </div>
 
             <div className="space-y-1.5">
@@ -194,11 +176,7 @@ export const EventDialog = ({
               />
             </div>
 
-						<div
+            <div className={isMobile ? "grid grid-cols-1 gap-3" : "grid grid-cols-2 gap-3"}>
-							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
@@ -216,19 +194,13 @@ export const EventDialog = ({
               <div className="space-y-1.5">
                 <Label htmlFor="event-url">URL</Label>
                 <Input id="event-url" placeholder="URL" {...register("url")} />
-								{errors.url && (
+                {errors.url && <p className="text-xs text-destructive">{errors.url.message}</p>}
-									<p className="text-xs text-destructive">
-										{errors.url.message}
-									</p>
-								)}
               </div>
             </div>
           </section>
 
           <section className="grid gap-3">
-						<p className="font-mono text-[11px] uppercase text-muted-foreground">
+            <p className="font-mono text-[11px] uppercase text-muted-foreground">Schedule</p>
-							Schedule
-						</p>
 
             <div className="flex items-center gap-2 py-1">
               <Controller
@@ -238,16 +210,11 @@ export const EventDialog = ({
                   <Checkbox
                     id="event-all-day"
                     checked={field.value}
-										onCheckedChange={(checked) =>
+                    onCheckedChange={(checked) => field.onChange(checked === true)}
-											field.onChange(checked === true)
-										}
                   />
                 )}
               />
-							<Label
+              <Label htmlFor="event-all-day" className="cursor-pointer text-sm font-normal">
-								htmlFor="event-all-day"
-								className="cursor-pointer text-sm font-normal"
-							>
                 All day
               </Label>
             </div>
@@ -278,9 +245,7 @@ export const EventDialog = ({
                           variant="ghost"
                           size="sm"
                           disabled={!start}
-													onClick={() =>
+                          onClick={() => handleApplyDuration(minutes, allDay, start)}
-														handleApplyDuration(minutes, allDay, start)
-													}
                           className="px-2 py-1 text-xs text-muted-foreground"
                         >
                           {label}
@@ -302,45 +267,27 @@ export const EventDialog = ({
                   />
                 )}
               />
-							{errors.start && (
+              {errors.start && <p className="text-xs text-destructive">{errors.start.message}</p>}
-								<p className="text-xs text-destructive">
+              {errors.end && <p className="text-xs text-destructive">{errors.end.message}</p>}
-									{errors.start.message}
-								</p>
-							)}
-							{errors.end && (
-								<p className="text-xs text-destructive">{errors.end.message}</p>
-							)}
             </div>
           </section>
 
           <section className="grid gap-3">
-						<p className="font-mono text-[11px] uppercase text-muted-foreground">
+            <p className="font-mono text-[11px] uppercase text-muted-foreground">Recurrence</p>
-							Recurrence
-						</p>
             <Controller
               name="recurrenceRule"
               control={control}
               render={({ field }) => (
-								<RecurrencePicker
+                <RecurrencePicker value={field.value} onChange={field.onChange} start={start} />
-									value={field.value}
-									onChange={field.onChange}
-									start={start}
-								/>
               )}
             />
             {errors.recurrenceRule && (
-							<p className="text-xs text-destructive">
+              <p className="text-xs text-destructive">{errors.recurrenceRule.message}</p>
-								{errors.recurrenceRule.message}
-							</p>
             )}
           </section>
 
           <DialogFooter className={isMobile ? "gap-2" : "gap-0"}>
-						<Button
+            <Button type="button" variant="ghost" onClick={() => handleOpenChange(false)}>
-							type="button"
-							variant="ghost"
-							onClick={() => handleOpenChange(false)}
-						>
               Cancel
             </Button>
             <Button type="submit">{saveLabel}</Button>
@@ -350,3 +297,196 @@ export const EventDialog = ({
     </Dialog>
   );
 };
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}