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

web/dav/CalendarView.tsx

@@ -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>
   );