feat: add opt-in daily Discord reminders with quiet hours

src/components/ReminderSettings.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from "react";
+import { habitRequest } from "../lib/dashboard";
+import { defaultReminder, type ReminderResponse } from "../reminders/contracts";
+import { Button, Checkbox } from "./design-system/primitives";
+import { Field } from "./design-system/Field";
+
+const deliveryLabels: Record<string, string> = {
+  sent: "Delivered", deferred: "Waiting to retry", pending: "Delivery unconfirmed", uncertain: "Delivery unconfirmed; check Discord. We will not send it again today.",
+  failed: "Discord could not deliver it. Check your DM permissions and that you share a server with the bot.", skipped: "Skipped because your check-ins or settings changed",
+};
+export function ReminderSettings({ timezone }: { timezone: string }) {
+  const [settings, setSettings] = useState<ReminderResponse>();
+  const [draft, setDraft] = useState(defaultReminder);
+  const [error, setError] = useState("");
+  const [notice, setNotice] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [attempt, setAttempt] = useState(0);
+  const saving = useRef(false);
+  useEffect(() => {
+    const controller = new AbortController(); setError("");
+    habitRequest<ReminderResponse>("/reminders", { signal: controller.signal })
+      .then(data => { if (!controller.signal.aborted) { setSettings(data); setDraft({ enabled: data.enabled, time: data.time, quietStart: data.quietStart, quietEnd: data.quietEnd }); } })
+      .catch(error => { if (!controller.signal.aborted) setError(error.message); });
+    return () => controller.abort();
+  }, [attempt]);
+  return <div className="ds-inline-item-form" aria-label="Daily reminders">
+    <h3 className="type-ui-heading">Daily reminders</h3>
+    <p>One private Discord message when you still have habits left today. Times follow {timezone}. No habit names are sent.</p>
+    {!settings ? <Button onClick={() => setAttempt(value => value + 1)}>Reload reminders</Button> : <form onSubmit={async event => {
+      event.preventDefault(); if (saving.current) return;
+      const form = event.currentTarget;
+      const submitted = { ...draft, ...Object.fromEntries((["time", "quietStart", "quietEnd"] as const).map(key => [key, (form.elements.namedItem(key) as HTMLInputElement).value])) };
+      saving.current = true; setBusy(true); setError(""); setNotice("");
+      try {
+        await habitRequest("/reminders", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(submitted) });
+        setDraft(submitted);
+        setNotice(submitted.enabled ? "Daily Discord reminders enabled." : "Reminders turned off.");
+      } catch (error) { setError(error instanceof Error ? error.message : "Could not save reminders. Try again."); }
+      finally { saving.current = false; setBusy(false); }
+    }}>
+      {!settings.available && <p>Discord reminders are not configured on this server.</p>}
+      <fieldset className="ds-inline-item-fields" disabled={busy}>
+        <Checkbox label="Enable daily Discord reminders" checked={draft.enabled} disabled={!settings.available && !draft.enabled} onChange={event => setDraft(value => ({ ...value, enabled: event.target.checked }))} />
+        <div className="ds-form-grid">
+          {([['time', 'Remind me at'], ['quietStart', 'Quiet hours start'], ['quietEnd', 'Quiet hours end']] as const).map(([key, label]) =>
+            <Field key={key} label={label}>{id => <input id={id} name={key} type="time" required defaultValue={draft[key]} />}</Field>)}
+        </div>
+        <p className="type-small">During quiet hours we wait until they end. Equal start and end times turn quiet hours off. Missed reminders never carry into the next day.</p>
+        <Button type="submit" disabled={busy}>{busy ? "Saving…" : "Save reminders"}</Button>
+      </fieldset>
+      {settings.lastDelivery && <p className="type-small">{settings.lastDelivery.date}: {deliveryLabels[settings.lastDelivery.status] ?? "Unknown delivery status"}</p>}
+    </form>}
+    {error && <p role="alert">{error}</p>}
+    <p role="status">{notice}</p>
+  </div>;
+}