Configurable date and time formats, defaulting to the Stalwart locale

Every user-visible date now goes through web/src/lib/datetime.ts, driven by
three settings (Settings > General > Locale):

- Language & region: automatic, or any of the 618 locales CLDR has data for,
  each named in its own language and script (web/src/lib/locales.ts, generated
  by probing Intl over the subtag space).
- Date format: automatic (locale order), 22.11.2025, 22/11/2025, 11/22/2025,
  or ISO 8601 2025-11-22.
- Time format: automatic (locale), 24-hour, or 12-hour.

Automatic takes the locale Stalwart has for the account, read best-effort at
login via x:Account/get (urn:stalwart:jmap) and passed to the client in the
session; servers without the capability, or that deny sysAccountGet to a
regular user, fall back to the browser locale. POSIX forms are normalised
(de_DE.UTF-8 -> de-DE) and script modifiers kept (sr_RS@latin -> sr-Latn-RS,
uz_UZ@cyrillic -> uz-Cyrl-UZ), while dialect/variant/currency modifiers are
dropped and a script the locale already implies is not appended.

Numerals follow the locale (22.11.2025 renders as Arabic-Indic digits under
ar-EG); ISO 8601 is the exception and pins date and clock to Latin digits so
one line never mixes digit systems.

Rewired: message list and headers, quoted reply headers, calendar (titles,
weekday and hour gutters, mini calendar, agenda, popovers, invite cards,
free/busy), contacts, files, sessions. No raw toLocale*String date calls are
left in web/src.

Native <input type="datetime-local"> pickers always follow the browser locale
and cannot be restyled by a page, so the out-of-office fields echo the entered
instant in the chosen format underneath.

Also: month-grid day labels no longer wrap when they hold a date, and the mock
server serves x:Account/get (MOCK_LOCALE, default en_US).

Closes #1

web/src/views/settings/VacationSettings.tsx

@@ -3,6 +3,8 @@ import { useMail } from "@/store/mail";
 import { Switch } from "@/ui/misc";
 import { toast } from "@/ui/toast";
 import { toInputDateTime, fromInputDateTime, toUTCDate } from "@/lib/dates";
+import { formatFullDateTime } from "@/lib/datetime";
+import { dateTimeKey, useSettings } from "@/store/settings";
 import { client, CAP } from "@/jmap/client";
 
 export function VacationSettings() {
@@ -16,6 +18,13 @@ export function VacationSettings() {
   const [to, setTo] = useState("");
   const [busy, setBusy] = useState(false);
   const available = client.hasCapability(CAP.vacation);
+  // The date pickers themselves are native controls and follow the browser's
+  // locale; echo the value back in the user's chosen format so there is no doubt.
+  useSettings((s) => dateTimeKey(s.settings));
+  const echo = (v: string) => {
+    const d = fromInputDateTime(v);
+    return v && !Number.isNaN(d.getTime()) ? formatFullDateTime(d) : "";
+  };
 
   useEffect(() => {
     void load();
@@ -56,8 +65,16 @@ export function VacationSettings() {
       <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><input className="input" type="datetime-local" value={from} onChange={(e) => setFrom(e.target.value)} /></div>
-        <div className="field"><label>Ends (optional)</label><input className="input" type="datetime-local" value={to} onChange={(e) => setTo(e.target.value)} /></div>
+        <div className="field">
+          <label>Starts (optional)</label>
+          <input className="input" type="datetime-local" value={from} onChange={(e) => setFrom(e.target.value)} />
+          {echo(from) && <p className="hint">{echo(from)}</p>}
+        </div>
+        <div className="field">
+          <label>Ends (optional)</label>
+          <input className="input" type="datetime-local" value={to} onChange={(e) => setTo(e.target.value)} />
+          {echo(to) && <p className="hint">{echo(to)}</p>}
+        </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>