one CRUD, three callers — the browser and the agent stop writing iCalendar
the skill told an agent how to hand-write a .ics: escape the commas, fold at 75 octets, CRLF, DTSTAMP is required, and DTEND is the day after. all true, all silent when wrong, and the browser had learned the same lesson separately in its own copy of the code. this makes the sidecar the only thing that knows the format, and gives everyone else fields. WHAT WAS MISSING BEFORE THE SKILL COULD CHANGE. reading was already JSON, and create-event landed this morning. this adds PATCH /_officer/item — change some fields of an event or a card — and POST /_officer/contact. delete already worked. with those the skill has no reason left to mention iCalendar, so it does not. PATCH IS READ-PATCH-PUT, SERVER SIDE. it reads the stored text, replaces only the lines it owns, and puts the whole thing back, so alarms, attendees, RRULEs and every X- property a phone invented survive an edit made from a form that cannot show them. that logic came out of the browser, where it had needed a duplicate of the escaping and folding rules to live; the agent would have been a third copy in bash. the web bundle now contains no iCalendar literals at all. AND LIVE TESTING FOUND THE BUG THAT MATTERS. an event with a TZID is stored with a VTIMEZONE block beside it, and that block has DTSTART lines of its own — the rule for when summer time starts. taking the first DTSTART in the file rewrote the TIMEZONE DEFINITION, left the event where it was, and answered ok. the calendar showed the old time and the file was quietly corrupt. every write is now confined to the first VEVENT or VCARD, and the file that caught it is a test. three more traps handled rather than documented: a patch that reuses an all-day event's stored DTEND must subtract the exclusive day first or the holiday drifts every time the title is edited; moving a timed event must DROP a stale TZID rather than preserve it, because a TZID and a Z together are a contradiction clients resolve by moving the event; and a move bumps SEQUENCE, which is how a phone tells an update from a duplicate. contacts got the create form the calendar had, so both screens now do all four. editing a card sends the other emails and phones back untouched — the form shows the first of each, and sending only that would delete the rest. 47 tests across the writer and the patcher. verified live against a real event carrying an alarm, an attendee, an RRULE and an X- property: all four intact after a rename, a relocation and a move to a different day. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043
This commit is contained in:
Claude Opus 5
+107
-15
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { Building2, Mail, Phone, User, Pencil, Trash2, Check, X } from 'lucide-react';
|
||||
import { Building2, Mail, Phone, User, Pencil, Trash2, Check, X, Plus } from 'lucide-react';
|
||||
import { useDavContacts, useSelectedCollection } from './useDavData';
|
||||
import { useDavEdit, setProperty } from './useDavEdit';
|
||||
import { useDavEdit, CREATING } from './useDavEdit';
|
||||
import { useTranslation } from 'officerdev';
|
||||
|
||||
// Right panel of /contacts: the selected address book as cards, sorted by name.
|
||||
@@ -18,6 +18,10 @@ const initials = (name: string) =>
|
||||
.map((part) => part[0]?.toUpperCase() ?? '')
|
||||
.join('') || '?';
|
||||
|
||||
const FIELD = 'rounded-md border bg-background px-2 py-1 text-sm';
|
||||
|
||||
const blankDraft = () => ({ fullName: '', email: '', phone: '' });
|
||||
|
||||
export const ContactsView = () => {
|
||||
const { t } = useTranslation();
|
||||
const { selected, isLoading: loadingCollections } = useSelectedCollection('addressbook');
|
||||
@@ -26,19 +30,104 @@ export const ContactsView = () => {
|
||||
const [editing, setEditing] = useState<string | null>(null);
|
||||
const [draft, setDraft] = useState({ fullName: '', email: '', phone: '' });
|
||||
const [confirming, setConfirming] = useState<string | null>(null);
|
||||
const [draftNew, setDraftNew] = useState<ReturnType<typeof blankDraft> | null>(null);
|
||||
|
||||
if (loadingCollections) return <Placeholder text="Loading address books…" />;
|
||||
if (!selected) return <Placeholder text="No address books yet. Create one from a CardDAV client." />;
|
||||
if (error) return <Placeholder text={t('dav.readFailed', { name: selected.displayName, reason: String(error) })} />;
|
||||
if (isLoading) return <Placeholder text="Loading contacts…" />;
|
||||
if (contacts.length === 0) return <Placeholder text={`${selected.displayName} has no contacts.`} />;
|
||||
|
||||
// Not an early return: the header carries the only way to ADD a card, and an empty address book is
|
||||
// exactly when somebody wants it.
|
||||
const notice = error
|
||||
? t('dav.readFailed', { name: selected.displayName, reason: String(error) })
|
||||
: isLoading
|
||||
? 'Loading contacts…'
|
||||
: contacts.length === 0
|
||||
? `${selected.displayName} has no contacts.`
|
||||
: null;
|
||||
|
||||
const sorted = [...contacts].sort((a, b) => a.fullName.localeCompare(b.fullName));
|
||||
|
||||
const submitNew = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!draftNew?.fullName.trim()) return;
|
||||
void edit
|
||||
.createContact(selected.path, {
|
||||
fullName: draftNew.fullName.trim(),
|
||||
emails: [draftNew.email].filter(Boolean),
|
||||
phones: [draftNew.phone].filter(Boolean),
|
||||
})
|
||||
.then((ok) => ok && setDraftNew(null));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="mx-auto grid max-w-4xl grid-cols-1 gap-3 p-6 sm:grid-cols-2">
|
||||
{sorted.map((contact) => (
|
||||
<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">
|
||||
{contacts.length} {contacts.length === 1 ? 'contact' : 'contacts'}
|
||||
</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 contact
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{/* Name, one email, one phone. A card can hold far more, and a CardDAV client can put it there —
|
||||
this is the form for adding somebody from their business card, not for modelling a person. */}
|
||||
{draftNew && (
|
||||
<form onSubmit={submitNew} className="mx-auto flex max-w-4xl flex-col gap-3 px-6 pt-6">
|
||||
<div className="flex flex-col gap-3 rounded-xl border bg-card p-4">
|
||||
<input
|
||||
autoFocus
|
||||
value={draftNew.fullName}
|
||||
onChange={(e) => setDraftNew({ ...draftNew, fullName: e.target.value })}
|
||||
placeholder="Name"
|
||||
className={FIELD}
|
||||
/>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<input
|
||||
value={draftNew.email}
|
||||
onChange={(e) => setDraftNew({ ...draftNew, email: e.target.value })}
|
||||
placeholder="Email"
|
||||
className={`${FIELD} min-w-0 flex-1 text-xs`}
|
||||
/>
|
||||
<input
|
||||
value={draftNew.phone}
|
||||
onChange={(e) => setDraftNew({ ...draftNew, phone: e.target.value })}
|
||||
placeholder="Phone"
|
||||
className={`${FIELD} min-w-0 flex-1 text-xs tabular-nums`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={edit.busy === CREATING || !draftNew.fullName.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>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{notice && <Placeholder text={notice} />}
|
||||
<div className="mx-auto grid max-w-4xl grid-cols-1 gap-3 p-6 sm:grid-cols-2">
|
||||
{sorted.map((contact) => (
|
||||
<article key={contact.uid} className="flex gap-3 rounded-xl border bg-card p-3">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-500/15 text-sm font-semibold text-sky-600">
|
||||
{initials(contact.fullName)}
|
||||
@@ -81,13 +170,15 @@ export const ContactsView = () => {
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (!contact.href) return;
|
||||
/* The form shows the FIRST email and phone; a card can hold several. Sending just
|
||||
the one would delete the rest, so the others are carried through untouched. */
|
||||
void edit
|
||||
.save(contact.href, (raw) => {
|
||||
let out = setProperty(raw, 'FN', draft.fullName);
|
||||
out = setProperty(out, 'EMAIL', draft.email || null);
|
||||
return setProperty(out, 'TEL', draft.phone || null);
|
||||
.save(contact.href, {
|
||||
fullName: draft.fullName,
|
||||
emails: [draft.email, ...contact.emails.slice(1)].filter(Boolean),
|
||||
phones: [draft.phone, ...contact.phones.slice(1)].filter(Boolean),
|
||||
})
|
||||
.then(() => setEditing(null));
|
||||
.then((ok) => ok && setEditing(null));
|
||||
}}
|
||||
>
|
||||
<input
|
||||
@@ -172,8 +263,9 @@ export const ContactsView = () => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
))}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user