From 1cee73702bd244b1c44f675e1fa74410c6748b68 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 8 Apr 2026 01:07:14 -0400
Subject: [PATCH] feat: add quick duration selectors (+15 min, +30 min, +1h,
 +3h) in event dialog

---
 src/components/event-dialog.tsx | 36 +++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/components/event-dialog.tsx b/src/components/event-dialog.tsx
index 8d00959..64ea250 100644
--- a/src/components/event-dialog.tsx
+++ b/src/components/event-dialog.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { addHours, addMinutes, isValid, parseISO } from "date-fns";
 import { LucideMapPin } from "lucide-react";
 import { DateTimePicker } from "@/components/date-time-picker";
 import { RecurrencePicker } from "@/components/recurrence-picker";
@@ -68,6 +69,26 @@ export const EventDialog = ({
 		onOpenChange(val);
 	};
 
+	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 = (n: number) => String(n).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`;
+		setEnd(result);
+	};
+
 	return (
 		<Dialog open={open} onOpenChange={handleOpenChange}>
 			<DialogContent className="glass-strong max-w-md">
@@ -146,6 +167,21 @@ export const EventDialog = ({
 							allDay={allDay}
 							placeholder="Start date"
 						/>
+						{!allDay && (
+							<div className="flex gap-1 pl-0.5">
+								{DURATIONS.map(({ label, minutes }) => (
+									<button
+										key={label}
+										type="button"
+										disabled={!start}
+										onClick={() => handleApplyDuration(minutes)}
+										className="rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40"
+									>
+										{label}
+									</button>
+								))}
+							</div>
+						)}
 						<DateTimePicker
 							value={end}
 							onChange={setEnd}