fix(ui): prefill empty date/time picker with now

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file. This projec
 - Mobile admin shell and lists: wide tables no longer expand/clip the page. The shared ScrollArea constrains content width, tables scroll horizontally inside their card, and list Create / pagination actions stay visible in the mobile viewport.
 - Form and detail layouts wrap more cleanly on narrow screens (action bars, label/value rows).
 - Date/time picker in dark mode: replaced the native time input (invisible clock icon + always-light popup) with themed hour/minute selects and a visible Clock icon; set `color-scheme` on light/dark themes so remaining native date controls follow the UI.
+- Empty date/time fields open prefilled with the current date and time so the calendar and hour/minute selects start on a useful default.
 
 ### Changed
 - Negative account disk-usage values (stale Stalwart quota counters) are shown in red with an info tooltip that explains how to recalculate usage via Tasks (Perform account maintenance operations → Recalculate storage quota usage, or store-wide Reset all user quotas).

src/components/forms/FieldWidget.tsx

@@ -924,6 +924,19 @@ function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldPro
     onChange(next.toISOString());
   };
 
+  const formatClock = (d: Date): string =>
+    `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+
+  /** Empty fields open on "now" so the calendar and time selects start useful. */
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (next && !parsed) {
+      const now = new Date();
+      now.setSeconds(0, 0);
+      onChange(now.toISOString());
+    }
+  };
+
   if (readOnly) {
     if (!strValue) {
       return <span className="text-sm text-muted-foreground italic">{t('field.notSet', 'Not set')}</span>;
@@ -944,7 +957,7 @@ function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldPro
 
   return (
     <div className="flex items-center gap-2">
-      <Popover open={open} onOpenChange={setOpen} modal={false}>
+      <Popover open={open} onOpenChange={handleOpenChange} modal={false}>
         <PopoverTrigger asChild>
           <Button
             type="button"
@@ -971,17 +984,17 @@ function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldPro
           <Calendar
             mode="single"
             selected={parsed ?? undefined}
-            defaultMonth={parsed ?? undefined}
+            defaultMonth={parsed ?? new Date()}
             onSelect={(day) => {
               if (!day) return;
-              commit(day, timeValue || '00:00');
+              commit(day, timeValue || formatClock(new Date()));
             }}
             autoFocus
           />
           <div className="flex items-center gap-2 border-t bg-background p-3">
             <Clock className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
             <DateTimeTimeSelect
-              value={timeValue || '00:00'}
+              value={timeValue || formatClock(new Date())}
               disabled={!parsed}
               onChange={(next) => {
                 if (parsed) commit(parsed, next);