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>
This commit is contained in:
Claude Opus 4.8
@@ -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);
|
||||
|
||||
|
||||
@@ -19,6 +19,12 @@ import {
|
||||
import { stopPropagation } from '../../../utils/keyboard';
|
||||
import { useReminders } from '../../../hooks/useReminders';
|
||||
import { useModalStyle } from '../../../hooks/useModalStyle';
|
||||
import {
|
||||
toLocalDate,
|
||||
toLocalTime,
|
||||
parseLocalDateTime,
|
||||
pickerInputStyle,
|
||||
} from '../../../utils/datetimeInput';
|
||||
|
||||
type RemindMeDialogProps = {
|
||||
roomId: string;
|
||||
@@ -40,14 +46,26 @@ function getPresets(): Array<{ label: string; ms: number }> {
|
||||
];
|
||||
}
|
||||
|
||||
// Default custom pick: 1 hour from now, rounded up to the nearest 5 minutes.
|
||||
function defaultCustomDate(): Date {
|
||||
const d = new Date(Date.now() + 60 * 60 * 1000);
|
||||
d.setSeconds(0, 0);
|
||||
d.setMinutes(Math.ceil(d.getMinutes() / 5) * 5);
|
||||
return d;
|
||||
}
|
||||
|
||||
export function RemindMeDialog({ roomId, eventId, previewText, onClose }: RemindMeDialogProps) {
|
||||
const modalStyle = useModalStyle(320);
|
||||
const { addReminder } = useReminders();
|
||||
const presets = useMemo(() => getPresets(), []);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [customOpen, setCustomOpen] = useState(false);
|
||||
const def = useMemo(() => defaultCustomDate(), []);
|
||||
const [dateValue, setDateValue] = useState(() => toLocalDate(def));
|
||||
const [timeValue, setTimeValue] = useState(() => toLocalTime(def));
|
||||
|
||||
const handlePick = async (ms: number) => {
|
||||
const commit = async (timestamp: number) => {
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
@@ -55,7 +73,7 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
|
||||
await addReminder({
|
||||
roomId,
|
||||
eventId,
|
||||
timestamp: Date.now() + ms,
|
||||
timestamp,
|
||||
message: previewText || 'Reminder',
|
||||
});
|
||||
onClose();
|
||||
@@ -65,6 +83,23 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
|
||||
}
|
||||
};
|
||||
|
||||
const handlePick = (ms: number) => commit(Date.now() + ms);
|
||||
|
||||
const customDate = parseLocalDateTime(dateValue, timeValue);
|
||||
const customValid = !!customDate && customDate.getTime() - Date.now() >= 60_000;
|
||||
|
||||
const handleCustom = () => {
|
||||
if (!customDate) {
|
||||
setError('Please select a valid date and time.');
|
||||
return;
|
||||
}
|
||||
if (customDate.getTime() - Date.now() < 60_000) {
|
||||
setError('Reminder time must be at least 1 minute in the future.');
|
||||
return;
|
||||
}
|
||||
commit(customDate.getTime());
|
||||
};
|
||||
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
@@ -127,6 +162,70 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
|
||||
</Text>
|
||||
</Button>
|
||||
))}
|
||||
|
||||
{customOpen ? (
|
||||
<Box direction="Column" gap="200" style={{ paddingTop: config.space.S100 }}>
|
||||
<Box gap="200">
|
||||
<Box direction="Column" gap="100" style={{ flex: 1 }}>
|
||||
<Text as="label" htmlFor="remind-date" size="T200" priority="400">
|
||||
Date
|
||||
</Text>
|
||||
<input
|
||||
id="remind-date"
|
||||
type="date"
|
||||
value={dateValue}
|
||||
min={toLocalDate(new Date())}
|
||||
disabled={busy}
|
||||
onChange={(e) => setDateValue(e.target.value)}
|
||||
style={pickerInputStyle(color, config)}
|
||||
/>
|
||||
</Box>
|
||||
<Box direction="Column" gap="100" style={{ flex: 1 }}>
|
||||
<Text as="label" htmlFor="remind-time" size="T200" priority="400">
|
||||
Time
|
||||
</Text>
|
||||
<input
|
||||
id="remind-time"
|
||||
type="time"
|
||||
value={timeValue}
|
||||
disabled={busy}
|
||||
onChange={(e) => setTimeValue(e.target.value)}
|
||||
style={pickerInputStyle(color, config)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
{!customValid && (dateValue || timeValue) && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
Must be at least 1 minute in the future
|
||||
</Text>
|
||||
)}
|
||||
<Button
|
||||
size="300"
|
||||
variant="Primary"
|
||||
radii="300"
|
||||
disabled={busy || !customValid}
|
||||
onClick={handleCustom}
|
||||
>
|
||||
<Text size="B300">Set reminder</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
) : (
|
||||
<Button
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="None"
|
||||
radii="300"
|
||||
disabled={busy}
|
||||
onClick={() => {
|
||||
setError(null);
|
||||
setCustomOpen(true);
|
||||
}}
|
||||
before={<Icon src={Icons.Clock} size="100" />}
|
||||
>
|
||||
<Text size="B300">Custom time…</Text>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Text
|
||||
size="T200"
|
||||
|
||||
Reference in New Issue
Block a user