Refine settings, archive, and check-in styling
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import { FormMessage, SettingRow } from "./design-system/WorkspacePanel";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { habitRequest } from "../lib/dashboard";
|
||||
import { defaultReminder, type ReminderResponse } from "../reminders/contracts";
|
||||
@@ -23,10 +24,8 @@ export function ReminderSettings({ timezone }: { timezone: string }) {
|
||||
.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 => {
|
||||
return <SettingRow title="Daily reminders" description={<><p>A private Discord nudge when you still have habits left today. No habit names are sent.</p><p className="ds-meta-label">Times in {timezone}</p></>}>
|
||||
{!settings ? error ? <Button variant="secondary" onClick={() => setAttempt(value => value + 1)}>Reload reminders</Button> : <p className="ds-supporting-copy" role="status">Loading reminders…</p> : <form className="ds-form-stack" 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])) };
|
||||
@@ -38,19 +37,19 @@ export function ReminderSettings({ timezone }: { timezone: string }) {
|
||||
} 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">
|
||||
{!settings.available && <p className="ds-supporting-copy">Discord reminders are not configured on this server.</p>}
|
||||
<fieldset className="ds-inline-item-fields ds-form-stack" disabled={busy}>
|
||||
<Checkbox className="ds-preference-toggle" description="At most one message per day. Turn off anytime." 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-clock-fields">
|
||||
{([['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>
|
||||
<p className="ds-supporting-copy">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>
|
||||
<div className="ds-action-row"><Button type="submit" variant="secondary" disabled={busy}>{busy ? "Saving…" : "Save reminders"}</Button></div>
|
||||
</fieldset>
|
||||
{settings.lastDelivery && <p className="type-small">{settings.lastDelivery.date}: {deliveryLabels[settings.lastDelivery.status] ?? "Unknown delivery status"}</p>}
|
||||
{settings.lastDelivery && <p className="ds-delivery-note"><span className="ds-eyebrow">LAST REMINDER</span><span>{settings.lastDelivery.date}: {deliveryLabels[settings.lastDelivery.status] ?? "Unknown delivery status"}</span></p>}
|
||||
</form>}
|
||||
{error && <p role="alert">{error}</p>}
|
||||
<p role="status">{notice}</p>
|
||||
</div>;
|
||||
<FormMessage error>{error}</FormMessage>
|
||||
<FormMessage>{notice}</FormMessage>
|
||||
</SettingRow>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user