jcoffey-dev
36c19d639b
Browsers render <input type="date"> and datetime-local in their own locale and ignore the page's, so #1 left a German user on an English browser reading 22.11.2025 everywhere but still entering dates through an mm/dd/yyyy widget. #3 makes the case that people use the picker rather than typing, which is where the AM/PM mistakes happen. New DateField and DateTimeField (web/src/ui/datefield.tsx) replace all nine native controls — event editor (all-day and timed start/end, recurrence until), out-of-office, contact birthday, advanced search. They take and emit the same ISO strings the native inputs did, so call sites barely changed. Each is a text box in the configured order plus a popover: a month grid (week start from settings, locale weekday and month names, today and the selection marked) and, for date-times, a list of times in the configured clock. Keyboard: arrows move by day, PageUp/PageDown by month, Home/End across the week, Enter picks, Escape closes, ArrowDown opens; the focused day holds DOM focus so screen readers follow, and the dialog has an accessible name (Popover gained an ariaLabel prop). Text entry is lenient — the configured order with any separator, unseparated digits (221125), day and month alone, non-Latin digits, and bare ISO always; times take 18:23, 1823, 6:23pm, 930. What will not parse reverts on blur rather than clearing the field, and impossible dates like 31 February are rejected instead of rolling into March. Editable boxes stay Gregorian and Latin-digit even where display does not (fa-IR, th-TH, ar-EG): the locale's field order and separator are kept, but a Buddhist-era year in a text box cannot round-trip against a Gregorian grid. Noted in the README. The out-of-office format echo added in #2 is gone — the fields now show the right format themselves. Closes #3
69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useMail } from "@/store/mail";
|
|
import { Switch } from "@/ui/misc";
|
|
import { toast } from "@/ui/toast";
|
|
import { toInputDateTime, fromInputDateTime, toUTCDate } from "@/lib/dates";
|
|
import { DateTimeField } from "@/ui/datefield";
|
|
import { client, CAP } from "@/jmap/client";
|
|
|
|
export function VacationSettings() {
|
|
const vacation = useMail((s) => s.vacation);
|
|
const load = useMail((s) => s.loadVacation);
|
|
const save = useMail((s) => s.saveVacation);
|
|
const [enabled, setEnabled] = useState(false);
|
|
const [subject, setSubject] = useState("");
|
|
const [body, setBody] = useState("");
|
|
const [from, setFrom] = useState("");
|
|
const [to, setTo] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const available = client.hasCapability(CAP.vacation);
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [load]);
|
|
useEffect(() => {
|
|
if (!vacation) return;
|
|
setEnabled(vacation.isEnabled);
|
|
setSubject(vacation.subject ?? "");
|
|
setBody(vacation.textBody ?? "");
|
|
setFrom(vacation.fromDate ? toInputDateTime(new Date(vacation.fromDate)) : "");
|
|
setTo(vacation.toDate ? toInputDateTime(new Date(vacation.toDate)) : "");
|
|
}, [vacation]);
|
|
|
|
if (!available) return <div><h1>Out of office</h1><p className="lead">Vacation responses are not available for this account.</p></div>;
|
|
|
|
const submit = async () => {
|
|
setBusy(true);
|
|
try {
|
|
await save({
|
|
isEnabled: enabled,
|
|
subject: subject || null,
|
|
textBody: body || null,
|
|
htmlBody: null,
|
|
fromDate: from ? toUTCDate(fromInputDateTime(from)) : null,
|
|
toDate: to ? toUTCDate(fromInputDateTime(to)) : null,
|
|
});
|
|
toast.success(enabled ? "Auto-reply is on" : "Auto-reply saved");
|
|
} catch (err) {
|
|
toast.error((err as Error).message);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<h1>Out of office</h1>
|
|
<p className="lead">Automatically reply to people who email you while you're away. Each sender gets at most one reply.</p>
|
|
<Switch checked={enabled} onChange={setEnabled} label="Auto-reply enabled" />
|
|
<div className="field-row mt-16">
|
|
<div className="field"><label>Starts (optional)</label><DateTimeField aria-label="Starts" value={from} onChange={setFrom} /></div>
|
|
<div className="field"><label>Ends (optional)</label><DateTimeField aria-label="Ends" value={to} onChange={setTo} /></div>
|
|
</div>
|
|
<div className="field"><label>Subject</label><input className="input" value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="Out of office" /></div>
|
|
<div className="field"><label>Message</label><textarea className="textarea" rows={7} value={body} onChange={(e) => setBody(e.target.value)} placeholder="Thanks for your message. I'm away until … and will reply when I'm back." /></div>
|
|
<button className="btn btn-primary" disabled={busy} onClick={() => void submit()}>Save</button>
|
|
</div>
|
|
);
|
|
}
|