feat(reminders): custom date/time option in Remind Me

The Remind Me dialog only offered four fixed presets, so you couldn't set a
reminder for an arbitrary time. Add a "Custom time…" option that reveals date +
time pickers (validated >= 1 minute in the future) and sets the reminder at that
absolute timestamp.

Also extract the local date/time <input> helpers (toLocalDate, toLocalTime,
parseLocalDateTime, pickerInputStyle) into a shared, unit-tested
utils/datetimeInput.ts and reuse them in ScheduleMessageModal (deduped from an
inline copy) — identical output, now covered by tests.

Documents the previously-undocumented Message Reminders feature in
LOTUS_FEATURES.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/room/ScheduleMessageModal.tsx

@@ -21,6 +21,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
 import { scheduleMessage } from '../../utils/scheduledMessages';
 import { useModalStyle } from '../../hooks/useModalStyle';
+import { toLocalDate, toLocalTime, parseLocalDateTime, pickerInputStyle } from '../../utils/datetimeInput';
 
 interface ScheduleMessageModalProps {
   roomId: string;
@@ -65,32 +66,6 @@ function formatSendAt(sendAt: Date): string {
   return `${sendAt.toLocaleDateString()} at ${timeStr}`;
 }
 
-function toLocalDate(date: Date): string {
-  const pad = (n: number) => String(n).padStart(2, '0');
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-}
-
-function toLocalTime(date: Date): string {
-  const pad = (n: number) => String(n).padStart(2, '0');
-  return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
-}
-
-// Shared style for date/time inputs — dark-mode calendar/clock popup via colorScheme.
-const pickerInputStyle = (c: typeof color, cfg: typeof config): React.CSSProperties => ({
-  background: c.SurfaceVariant.Container,
-  color: c.SurfaceVariant.OnContainer,
-  border: `${cfg.borderWidth.B300} solid ${c.SurfaceVariant.ContainerLine}`,
-  borderRadius: cfg.radii.R300,
-  padding: `${cfg.space.S200} ${cfg.space.S300}`,
-  fontSize: '0.875rem',
-  width: '100%',
-  boxSizing: 'border-box',
-  outline: 'none',
-  fontFamily: 'inherit',
-  // Hint browser to render the calendar/clock popup in dark mode
-  colorScheme: 'dark',
-});
-
 export function ScheduleMessageModal({
   roomId,
   initialBody,
@@ -119,11 +94,10 @@ export function ScheduleMessageModal({
   const [dateValue, setDateValue] = useState<string>(() => toLocalDate(def));
   const [timeValue, setTimeValue] = useState<string>(() => toLocalTime(def));
 
-  const getSendAt = useCallback((): Date | null => {
-    if (!dateValue || !timeValue) return null;
-    const dt = new Date(`${dateValue}T${timeValue}:00`);
-    return Number.isNaN(dt.getTime()) ? null : dt;
-  }, [dateValue, timeValue]);
+  const getSendAt = useCallback(
+    (): Date | null => parseLocalDateTime(dateValue, timeValue),
+    [dateValue, timeValue],
+  );
 
   const [preview, setPreview] = useState<{ label: string; relative: string } | null>(null);