From 08382472f4a47e1ae9e5f07102a927605a7a0bed Mon Sep 17 00:00:00 2001
From: Steven RYDELL <srydell@gmx.com>
Date: Thu, 30 Jul 2026 20:08:10 +0200
Subject: [PATCH] fix(ui): theme date/time picker for dark mode

---
 CHANGELOG.md                         |  1 +
 src/components/forms/FieldWidget.tsx | 92 ++++++++++++++++++++++++----
 src/i18n/en.json                     |  2 +
 src/index.css                        |  6 +-
 4 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 764e64e..ad3a837 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file. This projec
 ### Fixed
 - 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.
 
 ### 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).
diff --git a/src/components/forms/FieldWidget.tsx b/src/components/forms/FieldWidget.tsx
index 2bc1e9a..a0819b4 100644
--- a/src/components/forms/FieldWidget.tsx
+++ b/src/components/forms/FieldWidget.tsx
@@ -23,7 +23,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { Combobox, type ComboboxOption } from '@/components/ui/combobox';
 import { Calendar } from '@/components/ui/calendar';
 
-import { Plus, X, Eye, EyeOff, Loader2, Search, Check, ChevronRight, Calendar as CalendarIcon } from 'lucide-react';
+import { Plus, X, Eye, EyeOff, Loader2, Search, Check, ChevronRight, Calendar as CalendarIcon, Clock } from 'lucide-react';
 
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 
@@ -839,6 +839,67 @@ interface DateTimeFieldProps {
   nullable?: boolean;
 }
 
+const TIME_HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
+const TIME_MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
+
+/** Themed hour/minute selects — avoids the native time picker which ignores app dark/light tokens. */
+function DateTimeTimeSelect({
+  value,
+  onChange,
+  disabled,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation();
+  const [hour = '00', minute = '00'] = value.split(':');
+
+  const update = (nextHour: string, nextMinute: string) => {
+    onChange(`${nextHour}:${nextMinute}`);
+  };
+
+  return (
+    <div className="flex flex-1 items-center gap-1.5">
+      <Select
+        value={TIME_HOURS.includes(hour) ? hour : '00'}
+        disabled={disabled}
+        onValueChange={(nextHour) => update(nextHour, TIME_MINUTES.includes(minute) ? minute : '00')}
+      >
+        <SelectTrigger className="h-9 w-[4.75rem]" aria-label={t('field.hour', 'Hour')}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="max-h-60" position="popper">
+          {TIME_HOURS.map((h) => (
+            <SelectItem key={h} value={h}>
+              {h}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <span className="text-sm text-muted-foreground" aria-hidden="true">
+        :
+      </span>
+      <Select
+        value={TIME_MINUTES.includes(minute) ? minute : '00'}
+        disabled={disabled}
+        onValueChange={(nextMinute) => update(TIME_HOURS.includes(hour) ? hour : '00', nextMinute)}
+      >
+        <SelectTrigger className="h-9 w-[4.75rem]" aria-label={t('field.minute', 'Minute')}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="max-h-60" position="popper">
+          {TIME_MINUTES.map((m) => (
+            <SelectItem key={m} value={m}>
+              {m}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
 function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldProps) {
   const { t } = useTranslation();
   const strValue = typeof value === 'string' ? value : '';
@@ -883,7 +944,7 @@ function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldPro
 
   return (
     <div className="flex items-center gap-2">
-      <Popover open={open} onOpenChange={setOpen}>
+      <Popover open={open} onOpenChange={setOpen} modal={false}>
         <PopoverTrigger asChild>
           <Button
             type="button"
@@ -896,7 +957,17 @@ function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldPro
               : t('field.pickDate', 'Pick a date')}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
+        <PopoverContent
+          className="w-auto p-0"
+          align="start"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onInteractOutside={(e) => {
+            const target = e.target as HTMLElement | null;
+            if (target?.closest('[data-radix-select-content]')) {
+              e.preventDefault();
+            }
+          }}
+        >
           <Calendar
             mode="single"
             selected={parsed ?? undefined}
@@ -904,18 +975,17 @@ function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldPro
             onSelect={(day) => {
               if (!day) return;
               commit(day, timeValue || '00:00');
-              setOpen(false);
             }}
             autoFocus
           />
-          <div className="border-t p-3">
-            <Input
-              type="time"
-              value={timeValue}
-              onChange={(e) => {
-                if (parsed && e.target.value) commit(parsed, e.target.value);
+          <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'}
+              disabled={!parsed}
+              onChange={(next) => {
+                if (parsed) commit(parsed, next);
               }}
-              aria-label={t('field.time', 'Time')}
             />
           </div>
         </PopoverContent>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 732a6fb..b5552e8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -196,6 +196,8 @@
     "notSet": "Not set",
     "optional": "(optional)",
     "pickDate": "Pick a date",
+    "hour": "Hour",
+    "minute": "Minute",
     "required": "required",
     "selectEllipsis": "Select...",
     "selectKey": "Select key...",
diff --git a/src/index.css b/src/index.css
index e63c563..a9ce6ab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,6 +7,7 @@
 @import 'tailwindcss';
 
 :root {
+  color-scheme: light;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0.017 285.823);
 
@@ -51,6 +52,7 @@
 }
 
 .dark {
+  color-scheme: dark;
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0.002 285.823);
 
@@ -410,7 +412,3 @@
     @apply bg-background text-foreground;
   }
 }
-
-.dark input[type='number'] {
-  color-scheme: dark;
-}