Calendar: edit and delete a single occurrence

Closes #132.

Stalwart 0.16.20 accepts a synthetic id on `CalendarEvent/set`, writing a
`recurrenceOverrides` entry rather than touching the series, so editing
one date of a recurring event is now something the server does and this
does too.

Editing asks the scope *before* the form opens, because it decides which
event the form is even about: a form populated from the master shows the
series' start date, so editing Wednesday's standup would have offered to
move Monday's. Deleting asks in place of the old confirm.

The patch is narrowed rather than posted hopefully. 0.16.20 sorts
per-occurrence properties into three groups and only one is honest: ten
are refused with `invalidProperties`, twelve more are dropped from the
patch while the response still reports success, and the rest are applied.
That silent middle group is how #26 reached a live server - a successful
response is not evidence anything was written - so `occurrencePatch`
throws on the first group, reports the second to the caller, and the
editor leaves out the five it always sends. A patch that would be
entirely dropped is not sent at all.

The refusal for an occurrence of a this-and-future change offers the
series instead of a bare error toast. Nothing here writes one of those,
but an event synced from another client can carry one.

Two things the scope prompt cost, both worth knowing. A dialog is queued
in a store the moment it is asked for, so it outlives the effect that
asked: without a ref guard a remount queues a second prompt the first
answer cannot retract. And gating the *answer* on the effect's cleanup
flag is worse - StrictMode runs mount, cleanup, mount, so the flag is
already set by the time anyone clicks and the editor never opens.

The mock expands recurrences for the first time, which is what makes any
of this developable. It hands out synthetic ids for everything including
one-offs, gives occurrences a `recurrenceId` and no rule, and reproduces
the refusals - including the silent drops, since a mock that applied them
would let a client that sends them look correct everywhere but a real
server.
This commit is contained in:
2026-08-30 21:35:01 -07:00
parent 6ec2304fc2
commit dd8998f178
11 changed files with 923 additions and 54 deletions
+45 -8
View File
@@ -86,9 +86,17 @@ export function Dialog({ open, onClose, title, children, footer, size = "md", cl
/* ---------- Imperative confirm / prompt ---------- */
export interface DialogChoice {
value: string;
label: string;
/** Shown under the label, for the choice that needs the caveat. */
hint?: string;
danger?: boolean;
}
interface ConfirmRequest {
id: number;
kind: "confirm" | "prompt";
kind: "confirm" | "prompt" | "choice";
title: string;
message?: ReactNode;
confirmLabel?: string;
@@ -96,6 +104,7 @@ interface ConfirmRequest {
danger?: boolean;
defaultValue?: string;
placeholder?: string;
choices?: DialogChoice[];
resolve: (v: boolean | string | null) => void;
}
@@ -119,6 +128,18 @@ export function promptDialog(opts: { title: string; message?: ReactNode; default
});
}
/**
* A question with more than two answers, which "this one or all of them" is.
*
* Resolves to the chosen `value`, or `null` if the dialog is dismissed —
* dismissing is not one of the choices, so a caller cannot mistake it for one.
*/
export function choiceDialog(opts: { title: string; message?: ReactNode; choices: DialogChoice[]; cancelLabel?: string }): Promise<string | null> {
return new Promise((resolve) => {
useConfirmStore.getState().push({ id: reqId++, kind: "choice", ...opts, resolve: (v) => resolve(typeof v === "string" ? v : null) });
});
}
export function ConfirmHost() {
const req = useConfirmStore((s) => s.queue[0]);
const pop = useConfirmStore((s) => s.pop);
@@ -132,21 +153,37 @@ export function ConfirmHost() {
return (
<Dialog
open
onClose={() => done(req.kind === "prompt" ? null : false)}
onClose={() => done(req.kind === "confirm" ? false : null)}
title={req.title}
size="sm"
footer={
<>
<button className="btn" onClick={() => done(req.kind === "prompt" ? null : false)}>
req.kind === "choice" ? (
<button className="btn" onClick={() => done(null)}>
{req.cancelLabel ?? "Cancel"}
</button>
<button className={`btn ${req.danger ? "btn-danger" : "btn-primary"}`} onClick={() => done(req.kind === "prompt" ? value : true)}>
{req.confirmLabel ?? (req.kind === "prompt" ? "OK" : "Confirm")}
</button>
</>
) : (
<>
<button className="btn" onClick={() => done(req.kind === "prompt" ? null : false)}>
{req.cancelLabel ?? "Cancel"}
</button>
<button className={`btn ${req.danger ? "btn-danger" : "btn-primary"}`} onClick={() => done(req.kind === "prompt" ? value : true)}>
{req.confirmLabel ?? (req.kind === "prompt" ? "OK" : "Confirm")}
</button>
</>
)
}
>
{req.message && <p style={{ marginTop: 0 }}>{req.message}</p>}
{req.kind === "choice" && (
<div className="dialog-choices">
{req.choices?.map((c) => (
<button key={c.value} className={`btn dialog-choice ${c.danger ? "btn-danger" : ""}`} onClick={() => done(c.value)}>
<span>{c.label}</span>
{c.hint && <small>{c.hint}</small>}
</button>
))}
</div>
)}
{req.kind === "prompt" && (
<form
onSubmit={(e) => {