create an event, newest day first, and a URL you can read

three small things, one of which turned out to be a bug in what shipped an hour ago. CREATE. a POST to /_officer/event, and the SIDECAR builds the file — the browser sends title, when and where. a UID, a DTSTAMP and a UTC timestamp each have exactly one correct form, and that belongs next to the parser that reads them back, not in a react component. it writes the minimum a VEVENT can legally be: no recurrence, no alarms, no attendees. this app cannot show those, and a field the list cannot display is a field that silently disappears on the next edit. times go in as UTC. the alternative is DTSTART;TZID plus a VTIMEZONE block defining that zone's rules, and a subtly wrong VTIMEZONE moves an event by an hour twice a year. UTC needs no definition and every client renders it local. all-day is the other trap: RFC 5545 makes DTEND EXCLUSIVE, so a one-day event on the 29th ends on the 30th — write the 29th and some clients draw nothing at all. the form takes the last day a person means and the builder adds the day. NEWEST DAY ON TOP. a calendar accumulates years, so ascending opened on whatever was imported first and this week was a scroll away. within a day the order stays chronological, because that is what a day is. ?collection=ra-guide, NOT ?collection=%2Fdav%2F1%2Fra-guide%2F. the path is /dav/<userId>/<name>/, so the escaped form spent six characters on slashes to say `ra-guide` and put the owner's user id in a URL people paste at each other. the name is unique within a user, which is all a selector needs, and the full path is recovered from the collections list the screen already loaded. a full path in the param still resolves, because somebody's bookmark has one. AND THE BUG. setProperty replaced a property's first line and left its continuation lines behind. a value over 75 octets is FOLDED onto lines starting with a space — so editing a long summary left the old tail folded onto the new value, and each edit inherited the last one's ending. it only bites on long values, which is why the first round of testing missed it. the fix consumes the whole folded run and folds what it writes; both are now under test, including the accent-near-the-boundary case that a naive slice(0,75) cuts in half. verified live: both event shapes written and read back, escaping round-tripped, and a long summary edited twice with no accumulation. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043
2026-08-27 10:40:10 +00:00
parent 785e5f9eed
commit 25c8502c4b
11 changed files with 622 additions and 36 deletions
@@ -1,8 +1,8 @@
 import type { CalendarEvent } from './shared';
 import { useState } from 'react';
-import { CalendarDays, MapPin, Repeat, Pencil, Trash2, Check, X } from 'lucide-react';
+import { CalendarDays, MapPin, Repeat, Pencil, Trash2, Check, X, Plus } from 'lucide-react';
 import { useCalendarEvents, useSelectedCollection } from './useDavData';
-import { useDavEdit, setProperty } from './useDavEdit';
+import { useDavEdit, setProperty, CREATING, type NewEvent } from './useDavEdit';
 import { useTranslation } from 'officerdev';

 // Right panel of /calendar. Deliberately a grouped agenda list, not a month grid: the sidecar returns
@@ -28,6 +28,39 @@ const formatTime = (ev: CalendarEvent) => {
  return `${start.toLocaleTimeString(undefined, opts)} – ${end.toLocaleTimeString(undefined, opts)}`;
 };

+type Draft = { summary: string; location: string; date: string; start: string; end: string; allDay: boolean };
+
+const pad = (n: number) => String(n).padStart(2, '0');
+const localDate = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+const localTime = (d: Date) => `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+
+/** The next whole hour, for an hour. What every calendar has trained people to expect from "new event". */
+const blankDraft = (): Draft => {
+  const start = new Date(Date.now() + 60 * 60 * 1000);
+  start.setMinutes(0, 0, 0);
+  const end = new Date(start.getTime() + 60 * 60 * 1000);
+  return { summary: '', location: '', date: localDate(start), start: localTime(start), end: localTime(end), allDay: false };
+};
+
+/**
+ * The form's local fields become what the sidecar takes: an ISO instant, or a plain date for all-day.
+ *
+ * The clock is read as LOCAL — a person typing 14:00 means 14:00 where they are — and `toISOString`
+ * converts it, so what reaches the file is UTC and unambiguous.
+ */
+const toEvent = (d: Draft): NewEvent => {
+  const base = { summary: d.summary.trim(), location: d.location.trim() || undefined };
+  if (d.allDay) return { ...base, start: d.date, allDay: true };
+
+  const start = new Date(`${d.date}T${d.start}`);
+  let end = new Date(`${d.date}T${d.end}`);
+  // 23:00–01:00 is an event that crosses midnight, not one that ends two hours before it started.
+  if (end <= start) end = new Date(end.getTime() + 24 * 60 * 60 * 1000);
+  return { ...base, start: start.toISOString(), end: end.toISOString(), allDay: false };
+};
+
+const FIELD = 'rounded-md border bg-background px-2 py-1 text-sm';
+
 export const CalendarView = () => {
  const { t } = useTranslation();
  const { selected, isLoading: loadingCollections } = useSelectedCollection('calendar');
@@ -37,12 +70,20 @@ export const CalendarView = () => {
  const [editing, setEditing] = useState<string | null>(null);
  const [draft, setDraft] = useState({ summary: '', location: '' });
  const [confirming, setConfirming] = useState<string | null>(null);
+  const [draftNew, setDraftNew] = useState<Draft | null>(null);

  if (loadingCollections) return <Placeholder text="Loading calendars…" />;
  if (!selected) return <Placeholder text="No calendars yet. Create one from a CalDAV client." />;
-  if (error) return <Placeholder text={t('dav.readFailed', { name: selected.displayName, reason: String(error) })} />;
-  if (isLoading) return <Placeholder text="Loading events…" />;
-  if (events.length === 0) return <Placeholder text={`${selected.displayName} has no events.`} />;
+
+  // Not an early return any more: the header carries the only way to ADD an event, and a calendar that
+  // is empty or still loading is exactly when somebody wants it.
+  const notice = error
+    ? t('dav.readFailed', { name: selected.displayName, reason: String(error) })
+    : isLoading
+      ? 'Loading events…'
+      : events.length === 0
+        ? `${selected.displayName} has no events.`
+        : null;

  const sorted = [...events].sort((a, b) => (a.start ?? '').localeCompare(b.start ?? ''));
  const days: Array<{ key: string; events: CalendarEvent[] }> = [];
@@ -52,11 +93,109 @@ export const CalendarView = () => {
    if (last && last.key === key) last.events.push(ev);
    else days.push({ key, events: [ev] });
  }
+  // Newest day at the top. A calendar accumulates years, and an ascending list opens on whatever was
+  // imported first — scrolling to the bottom to find this week is the wrong default. Within a day the
+  // order stays chronological, because that is what a day IS.
+  days.reverse();
+
+  const submitNew = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!draftNew?.summary.trim()) return;
+    void edit.create(selected.path, toEvent(draftNew)).then((ok) => ok && setDraftNew(null));
+  };

  return (
-    <div className="h-full overflow-y-auto">
-      <div className="mx-auto flex max-w-3xl flex-col gap-6 p-6">
-        {days.map((day) => (
+    <div className="flex h-full flex-col">
+      <header className="flex shrink-0 items-center justify-between gap-3 border-b px-6 py-3">
+        <div className="min-w-0">
+          <div className="truncate text-sm font-semibold leading-tight">{selected.displayName}</div>
+          <div className="text-xs text-muted-foreground">
+            {events.length} {events.length === 1 ? 'event' : 'events'}
+          </div>
+        </div>
+        <button
+          onClick={() => setDraftNew((d) => (d ? null : blankDraft()))}
+          className="flex shrink-0 items-center gap-1.5 rounded-lg bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/20"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          New event
+        </button>
+      </header>
+
+      <div className="flex-1 overflow-y-auto">
+        <div className="mx-auto flex max-w-3xl flex-col gap-6 p-6">
+          {/* Title, when, and where. No recurrence and no alarms: this form writes a minimal VEVENT, and
+              a field the list cannot show afterwards is a field that silently disappears. */}
+          {draftNew && (
+            <form onSubmit={submitNew} className="flex flex-col gap-3 rounded-xl border bg-card p-4">
+              <input
+                autoFocus
+                value={draftNew.summary}
+                onChange={(e) => setDraftNew({ ...draftNew, summary: e.target.value })}
+                placeholder="Title"
+                className={FIELD}
+              />
+              <div className="flex flex-wrap items-center gap-2">
+                <input
+                  type="date"
+                  value={draftNew.date}
+                  onChange={(e) => setDraftNew({ ...draftNew, date: e.target.value })}
+                  className={`${FIELD} tabular-nums`}
+                />
+                {!draftNew.allDay && (
+                  <>
+                    <input
+                      type="time"
+                      value={draftNew.start}
+                      onChange={(e) => setDraftNew({ ...draftNew, start: e.target.value })}
+                      className={`${FIELD} tabular-nums`}
+                    />
+                    <span className="text-xs text-muted-foreground">to</span>
+                    <input
+                      type="time"
+                      value={draftNew.end}
+                      onChange={(e) => setDraftNew({ ...draftNew, end: e.target.value })}
+                      className={`${FIELD} tabular-nums`}
+                    />
+                  </>
+                )}
+                <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    checked={draftNew.allDay}
+                    onChange={(e) => setDraftNew({ ...draftNew, allDay: e.target.checked })}
+                  />
+                  All day
+                </label>
+              </div>
+              <input
+                value={draftNew.location}
+                onChange={(e) => setDraftNew({ ...draftNew, location: e.target.value })}
+                placeholder="Where"
+                className={`${FIELD} text-xs`}
+              />
+              <div className="flex items-center gap-2">
+                <button
+                  type="submit"
+                  disabled={edit.busy === CREATING || !draftNew.summary.trim()}
+                  className="flex items-center gap-1 rounded-md bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary disabled:opacity-50"
+                >
+                  <Check className="h-3 w-3" /> {edit.busy === CREATING ? 'Creating…' : 'Create'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setDraftNew(null)}
+                  className="rounded-md px-2 py-1.5 text-xs text-muted-foreground"
+                >
+                  Cancel
+                </button>
+                {edit.error && <span className="text-xs text-destructive">{edit.error}</span>}
+              </div>
+            </form>
+          )}
+
+          {notice && <Placeholder text={notice} />}
+          {days.map((day) => (
          <section key={day.key} className="flex flex-col gap-2">
            <h2 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              {formatDay(day.key)}
@@ -184,7 +323,8 @@ export const CalendarView = () => {
              </article>
            ))}
          </section>
-        ))}
+          ))}
+        </div>
      </div>
    </div>
  );
@@ -3,13 +3,13 @@ import type { DavCollection } from './shared';
 import { Link, useSearchParams } from 'react-router';
 import { CalendarDays, Contact as ContactIcon, Smartphone } from 'lucide-react';
 import { davCollectionPath, COLLECTION_PARAM } from './shared';
-import { useDavCollections } from './useDavData';
+import { useDavCollections, matchCollection } from './useDavData';
 import { AppPasswordsModal, useAppPasswordsModal } from '../AppPasswordsModal';
 import { useTranslation } from 'officerdev';

 // Left panel for both /calendar and /contacts: the list of collections belonging to this user.
 //
-// Rows are real links carrying ?collection=<dav path>, so a calendar is a bookmarkable address and the
+// Rows are real links carrying ?collection=<name>, so a calendar is a bookmarkable address and the
 // right-hand panel reads the same URL rather than being told over a channel. Active state is compared
 // against the URL directly instead of NavLink's isActive, because every row shares one pathname and
 // differs only in the query string.
@@ -28,9 +28,9 @@ const CollectionNav = ({ kind, base, title, icon: Icon }: Props) => {
  const [, setSyncOpen] = useAppPasswordsModal();
  const [params] = useSearchParams();
  const { collections, isLoading } = useDavCollections(kind);
-  const fromUrl = params.get(COLLECTION_PARAM);
-  // Nothing in the URL means the view falls back to the first collection — highlight the same one.
-  const activePath = collections.some((c) => c.path === fromUrl) ? fromUrl : (collections[0]?.path ?? null);
+  // Resolved the same way the right-hand panel resolves it, so the highlight cannot disagree with what
+  // is on screen — including the fallback to the first collection when the URL names nothing.
+  const active = matchCollection(collections, params.get(COLLECTION_PARAM));

  return (
    <div className="flex h-full flex-col overflow-y-auto bg-muted/30">
@@ -50,11 +50,11 @@ const CollectionNav = ({ kind, base, title, icon: Icon }: Props) => {

      <nav className="flex flex-col gap-0.5 px-2 pb-3">
        {collections.map((collection) => {
-          const isActive = collection.path === activePath;
+          const isActive = collection.path === active?.path;
          return (
            <Link
              key={collection.path}
-              to={davCollectionPath(base, collection.path)}
+              to={davCollectionPath(base, collection.name)}
              className={`${ROW} ${
                isActive
                  ? 'bg-primary/10 font-medium text-primary'
@@ -4,9 +4,12 @@
 // see src/servers/sidecar/caldav/{collections,ical}.ts, which is where they are produced. The sidecar
 // parses the iCalendar/vCard itself so nothing here ever sees DAV XML.

-/** One calendar or address book. `path` is the DAV path (/dav/<userId>/<name>/) and doubles as the id. */
+/** One calendar or address book. `path` addresses it over DAV; `name` is what the URL selects it by. */
 export type DavCollection = {
+  /** The DAV path, `/dav/<userId>/<name>/`. What every API call takes. */
  path: string;
+  /** The last segment of that path. Unique within a user, and the only part worth putting in a URL. */
+  name: string;
  displayName: string;
  kind: 'calendar' | 'addressbook';
  color?: string;
@@ -40,12 +43,17 @@ export type DavContact = {
 };

 /**
- * The query param both screens select with. A collection id contains slashes, so it cannot be a path
- * segment without escaping — and per the navigation rules the selection still has to live in the URL,
- * so it is a query param on the screen you are already on.
+ * The query param both screens select with. Per the navigation rules the selection lives in the URL, and
+ * a query param rather than a path segment because the detail IS the screen — there is nothing to route to.
+ *
+ * IT CARRIES THE NAME, NOT THE PATH. `?collection=personal`, not
+ * `?collection=%2Fdav%2F1%2Fpersonal%2F`. The path is `/dav/<userId>/<name>/`, so the escaped version
+ * spent six characters on slashes to say `personal` and put the owner's user id in a URL people paste at
+ * each other. The name is unique within a user, which is all a selector needs; the full path is
+ * recovered from the collections list, which the screen has already loaded.
 */
 export const COLLECTION_PARAM = 'collection';

 /** The one place the two screens' URLs are spelled, so nav links and guards cannot drift. */
-export const davCollectionPath = (base: '/calendar' | '/contacts', collection: string) =>
-  `${base}?${COLLECTION_PARAM}=${encodeURIComponent(collection)}`;
+export const davCollectionPath = (base: '/calendar' | '/contacts', name: string) =>
+  `${base}?${COLLECTION_PARAM}=${encodeURIComponent(name)}`;
@@ -62,6 +62,21 @@ export function useDavContacts(collection: string | null) {
  return { contacts: query.data?.contacts ?? EMPTY_CONTACTS, isLoading: query.isLoading, error: query.error };
 }

+/**
+ * Resolve what the URL asked for against what this user has.
+ *
+ * The param is the collection NAME. It also accepts a full DAV path, because that is what the URL used
+ * to carry and somebody's bookmark still has one — a one-line fallback against a link that would
+ * otherwise silently land on the wrong calendar.
+ *
+ * No match falls back to the first collection rather than to nothing, so a stale or mistyped link shows
+ * a calendar instead of an empty screen.
+ */
+export function matchCollection(collections: DavCollection[], fromUrl: string | null): DavCollection | null {
+  if (!fromUrl) return collections[0] ?? null;
+  return collections.find((c) => c.name === fromUrl || c.path === fromUrl) ?? collections[0] ?? null;
+}
+
 /**
 * The collection the URL selects, or the first one of that kind once the list arrives. Both panels of a
 * screen call this and get the same answer, because the answer is derived from the URL and the query
@@ -70,7 +85,6 @@ export function useDavContacts(collection: string | null) {
 export function useSelectedCollection(kind: DavCollection['kind']) {
  const [params] = useSearchParams();
  const { collections, isLoading } = useDavCollections(kind);
-  const fromUrl = params.get(COLLECTION_PARAM);
-  const selected = collections.find((c) => c.path === fromUrl) ?? collections[0] ?? null;
+  const selected = matchCollection(collections, params.get(COLLECTION_PARAM));
  return { selected, collections, isLoading };
 }
@@ -0,0 +1,83 @@
+import { describe, expect, test } from 'bun:test';
+import { setProperty } from './useDavEdit';
+import { parseEvents } from '../../sidecar/ical';
+
+// setProperty is the whole editing story: it decides what an edit keeps and what it destroys. These
+// cover the two ways it can quietly destroy something — dropping a property's parameters, and leaving
+// half of a folded value behind.
+
+const ICS = [
+  'BEGIN:VCALENDAR',
+  'VERSION:2.0',
+  'BEGIN:VEVENT',
+  'UID:abc',
+  'DTSTAMP:20260827T100000Z',
+  'DTSTART;TZID=Europe/Lisbon:20260828T130000',
+  'DTEND;TZID=Europe/Lisbon:20260828T140000',
+  'SUMMARY:Before',
+  'RRULE:FREQ=WEEKLY',
+  'BEGIN:VALARM',
+  'ACTION:DISPLAY',
+  'TRIGGER:-PT15M',
+  'END:VALARM',
+  'END:VEVENT',
+  'END:VCALENDAR',
+].join('\r\n');
+
+describe('setProperty', () => {
+  test('changes only the line it owns', () => {
+    const out = setProperty(ICS, 'SUMMARY', 'After');
+    expect(out.split('\r\n').length).toBe(ICS.split('\r\n').length);
+    expect(out).toContain('SUMMARY:After');
+    expect(out).toContain('RRULE:FREQ=WEEKLY');
+    expect(out).toContain('BEGIN:VALARM');
+  });
+
+  test('keeps a property that carries parameters', () => {
+    const out = setProperty(ICS, 'DTSTART', '20260901T090000');
+    expect(out).toContain('DTSTART;TZID=Europe/Lisbon:20260901T090000');
+  });
+
+  test('appends after UID when the property is absent, so it lands in the right component', () => {
+    const out = setProperty(ICS, 'LOCATION', 'Ramiro');
+    const lines = out.split('\r\n');
+    expect(lines[lines.indexOf('UID:abc') + 1]).toBe('LOCATION:Ramiro');
+  });
+
+  test('null removes the property', () => {
+    expect(setProperty(ICS, 'RRULE', null)).not.toContain('RRULE');
+  });
+
+  test('escapes the TEXT separators', () => {
+    const out = setProperty(ICS, 'SUMMARY', 'a, b; c');
+    expect(out).toContain(String.raw`SUMMARY:a\, b\; c`);
+    expect(parseEvents(out)[0]!.summary).toBe('a, b; c');
+  });
+
+  // The regression. A folded property spans several lines; replacing only the first left the rest
+  // behind, and they folded onto the NEW value — so each edit silently inherited the tail of the last.
+  test('replaces the whole of a folded value, continuations included', () => {
+    const folded = ICS.replace('SUMMARY:Before', 'SUMMARY:Before, and then quite a lot more text that\r\n  was folded onto a second line');
+    const out = setProperty(folded, 'SUMMARY', 'After');
+    expect(parseEvents(out)[0]!.summary).toBe('After');
+    expect(out).not.toContain('folded onto a second line');
+  });
+
+  test('removing a folded property takes all of it', () => {
+    const folded = ICS.replace('RRULE:FREQ=WEEKLY', 'RRULE:FREQ=WEEKLY\r\n ;COUNT=10');
+    expect(setProperty(folded, 'RRULE', null)).not.toContain('COUNT=10');
+  });
+
+  test('a long new value is folded, and reads back whole', () => {
+    const long = 'y'.repeat(300);
+    const out = setProperty(ICS, 'SUMMARY', long);
+    expect(out.split('\r\n').every((l) => Buffer.byteLength(l, 'utf8') <= 75)).toBe(true);
+    expect(parseEvents(out)[0]!.summary).toBe(long);
+  });
+
+  test('repeated edits do not accumulate', () => {
+    let out = ICS;
+    for (const v of ['one'.repeat(40), 'two'.repeat(40), 'three']) out = setProperty(out, 'SUMMARY', v);
+    expect(parseEvents(out)[0]!.summary).toBe('three');
+  });
+});
@@ -22,12 +22,23 @@ import { useClient } from 'hooks/useClient';
 * listing returns the real href; this hands it straight back.
 */

-/** Replace a property's line, or append it when the file has none. Handles `PROP:` and `PROP;PARAM:`. */
+/**
+ * Replace a property's line, or append it when the file has none. Handles `PROP:` and `PROP;PARAM:`.
+ *
+ * A property is not always ONE line. RFC 5545 folds anything over 75 octets onto continuation lines that
+ * start with a space, so a long description is one property spread over several. Replacing only the first
+ * line leaves the rest behind, and they then fold onto whatever was written in its place — the new value
+ * silently grows the tail of the old one. So the whole run goes, and the whole run is rewritten.
+ */
 export function setProperty(raw: string, prop: string, value: string | null): string {
  const lines = raw.split(/\r?\n/);
  const at = lines.findIndex((l) => l === prop || l.startsWith(`${prop}:`) || l.startsWith(`${prop};`));

-  if (value === null) return at === -1 ? raw : [...lines.slice(0, at), ...lines.slice(at + 1)].join('\r\n');
+  // Everything folded onto the property belongs to it.
+  let after = at + 1;
+  while (at !== -1 && after < lines.length && /^[ \t]/.test(lines[after]!)) after++;
+
+  if (value === null) return at === -1 ? raw : [...lines.slice(0, at), ...lines.slice(after)].join('\r\n');

  // iCalendar escapes these in TEXT values; a raw comma or semicolon silently splits the value into
  // parts and a newline ends the property early, which is how a description eats the rest of a file.
@@ -35,16 +46,55 @@ export function setProperty(raw: string, prop: string, value: string | null): st
  if (at !== -1) {
    // Keep any parameters the line already carried — `DTSTART;TZID=…` must not become `DTSTART:`.
    const params = /^[A-Z-]+(;[^:]*)?:/.exec(lines[at]!)?.[1] ?? '';
-    return [...lines.slice(0, at), `${prop}${params}:${escaped}`, ...lines.slice(at + 1)].join('\r\n');
+    return [...lines.slice(0, at), fold(`${prop}${params}:${escaped}`), ...lines.slice(after)].join('\r\n');
  }

  // Appended inside the component, immediately after UID, so it lands in the right block of a file that
  // holds more than one.
  const uidAt = lines.findIndex((l) => l.startsWith('UID:'));
  const insertAt = uidAt === -1 ? Math.max(0, lines.length - 2) : uidAt + 1;
-  return [...lines.slice(0, insertAt), `${prop}:${escaped}`, ...lines.slice(insertAt)].join('\r\n');
+  return [...lines.slice(0, insertAt), fold(`${prop}:${escaped}`), ...lines.slice(insertAt)].join('\r\n');
 }

+/**
+ * Fold a content line at 75 OCTETS, per RFC 5545 §3.1.
+ *
+ * Octets rather than characters, and broken between code points, so an accent in a pasted title is not
+ * cut in half. Deliberately a second copy of the sidecar's `fold` rather than an import: this package is
+ * a browser bundle and the sidecar is a server process, and the existing rule in this plugin is that the
+ * two MIRROR each other's shapes instead of sharing code across that boundary.
+ */
+function fold(line: string): string {
+  const encoder = new TextEncoder();
+  const out: string[] = [];
+  let current = '';
+  let bytes = 0;
+  for (const ch of line) {
+    const size = encoder.encode(ch).length;
+    if (bytes + size > 75) {
+      out.push(current);
+      current = ' ';
+      bytes = 1;
+    }
+    current += ch;
+    bytes += size;
+  }
+  out.push(current);
+  return out.join('\r\n');
+}
+
+export type NewEvent = {
+  summary: string;
+  location?: string;
+  /** An ISO instant for a timed event; `YYYY-MM-DD` when `allDay`. */
+  start: string;
+  end?: string;
+  allDay: boolean;
+};
+
+/** `busy` holds the href being written; a create has no href yet, so it gets a sentinel of its own. */
+export const CREATING = 'creating';
+
 export function useDavEdit(invalidateKey: unknown[]) {
  const client = useClient();
  const qc = useQueryClient();
@@ -86,5 +136,25 @@ export function useDavEdit(invalidateKey: unknown[]) {
    }
  };

-  return { save, remove, readRaw, busy, error };
+  /**
+   * A new event. The BODY is built by the sidecar, not here — a browser has no business generating a
+   * UID, a DTSTAMP and a VTIMEZONE-free UTC timestamp, and there is exactly one correct answer for each,
+   * which belongs next to the parser that has to read them back.
+   */
+  const create = async (collection: string, event: NewEvent) => {
+    setBusy(CREATING);
+    setError(null);
+    try {
+      await client.post('/caldav/_officer/event', { collection, ...event });
+      await refresh();
+      return true;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not create.');
+      return false;
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return { save, remove, create, readRaw, busy, error };
 }