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,21 +177,26 @@ export function DateTimePicker({
 
 	return (
 		<div className={cn("w-full", className)}>
-			{/* Date popover trigger */}
+			<div className="flex items-center gap-2">
+				<Input
+					type={allDay ? "date" : "datetime-local"}
+					value={getInputValue(value, allDay)}
+					onChange={(event) => {
+						onChange(event.target.value);
+					}}
+					placeholder={placeholder}
+					className="flex-1"
+				/>
 				<Popover open={open} onOpenChange={setOpen}>
 					<PopoverTrigger asChild>
 						<Button
 							type="button"
 							variant="outline"
-						className={cn(
+							size="icon"
-							"flex flex-1 px-3 py-1 font-normal justify-start",
+							className={cn(!displayLabel && "text-muted-foreground")}
-							!displayLabel && "text-muted-foreground",
+							aria-label={displayLabel ?? placeholder}
-						)}
 						>
 							<CalendarIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
-						<span className="flex-1 truncate text-left">
-							{displayLabel ?? placeholder}
-						</span>
 						</Button>
 					</PopoverTrigger>
 					<PopoverContent
@@ -215,5 +229,6 @@ export function DateTimePicker({
 					</PopoverContent>
 				</Popover>
 			</div>
+		</div>
 	);
 }