feat(date-time-picker): add native date input alongside calendar popover

Replace the button-only trigger with a native <input type="date"> (or
datetime-local when not all-day) paired with an icon button that opens
the calendar popover.  This gives users direct keyboard entry while
keeping the rich calendar + quick-shortcut picker accessible.

- Add getInputValue helper to format the current value for the native
  input.
- Import the Input component.
- Restructure the layout to place the input and popover trigger
  side-by-side.

src/components/date-time-picker.tsx

@@ -13,6 +13,7 @@ import { CalendarIcon } from "lucide-react";
 import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
 import {
 	Popover,
 	PopoverContent,
@@ -36,6 +37,15 @@ interface QuickShortcutResult {
 	nextValue: string;
 }
 
+function getInputValue(value: string, allDay: boolean): string {
+	const parsed = parseValue(value);
+	if (!parsed) return "";
+
+	return allDay
+		? format(parsed, "yyyy-MM-dd")
+		: format(parsed, "yyyy-MM-dd'T'HH:mm");
+}
+
 /** Parse the incoming ISO / date string into a Date object, or return undefined. */
 function parseValue(value: string): Date | undefined {
 	if (!value) return undefined;
@@ -128,7 +138,6 @@ export function DateTimePicker({
 		value,
 		allDay,
 	);
-
 	const [open, setOpen] = React.useState(false);
 	const [visibleMonth, setVisibleMonth] = React.useState(() =>
 		getCalendarMonthForValue(value, new Date()),
@@ -168,52 +177,58 @@ export function DateTimePicker({
 
 	return (
 		<div className={cn("w-full", className)}>
-			{/* Date popover trigger */}
+			<div className="flex items-center gap-2">
-			<Popover open={open} onOpenChange={setOpen}>
+				<Input
-				<PopoverTrigger asChild>
+					type={allDay ? "date" : "datetime-local"}
-					<Button
+					value={getInputValue(value, allDay)}
-						type="button"
+					onChange={(event) => {
-						variant="outline"
+						onChange(event.target.value);
-						className={cn(
+					}}
-							"flex flex-1 px-3 py-1 font-normal justify-start",
+					placeholder={placeholder}
-							!displayLabel && "text-muted-foreground",
+					className="flex-1"
-						)}
+				/>
+				<Popover open={open} onOpenChange={setOpen}>
+					<PopoverTrigger asChild>
+						<Button
+							type="button"
+							variant="outline"
+							size="icon"
+							className={cn(!displayLabel && "text-muted-foreground")}
+							aria-label={displayLabel ?? placeholder}
+						>
+							<CalendarIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent
+						className="w-[min(22rem,calc(100vw-2rem))] p-0"
+						align="start"
+						sideOffset={8}
 					>
-						<CalendarIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
+						<div className="flex flex-wrap gap-1 border-b border-border px-3 py-2">
-						<span className="flex-1 truncate text-left">
+							{quickOptions.map((label) => (
-							{displayLabel ?? placeholder}
+								<Button
-						</span>
+									key={label}
-					</Button>
+									type="button"
-				</PopoverTrigger>
+									variant="ghost"
-				<PopoverContent
+									size="sm"
-					className="w-[min(22rem,calc(100vw-2rem))] p-0"
+									onClick={() => handleQuickSelect(label)}
-					align="start"
+									className="h-auto px-2 py-1 text-xs text-muted-foreground"
-					sideOffset={8}
+								>
-				>
+									{label}
-					<div className="flex flex-wrap gap-1 border-b border-border px-3 py-2">
+								</Button>
-						{quickOptions.map((label) => (
+							))}
-							<Button
+						</div>
-								key={label}
+						<Calendar
-								type="button"
+							mode="single"
-								variant="ghost"
+							month={visibleMonth}
-								size="sm"
+							onMonthChange={setVisibleMonth}
-								onClick={() => handleQuickSelect(label)}
+							selected={parsed}
-								className="h-auto px-2 py-1 text-xs text-muted-foreground"
+							onSelect={handleDaySelect}
-							>
+							initialFocus
-								{label}
+						/>
-							</Button>
+					</PopoverContent>
-						))}
+				</Popover>
-					</div>
+			</div>
-					<Calendar
-						mode="single"
-						month={visibleMonth}
-						onMonthChange={setVisibleMonth}
-						selected={parsed}
-						onSelect={handleDaySelect}
-						initialFocus
-					/>
-				</PopoverContent>
-			</Popover>
 		</div>
 	);
 }