pastilhasandClaude Opus 5
b578c2aa3b
a calendar of a few hundred events and an address book of a few hundred cards are both lists you scroll until you give up. one box on each header narrows them. CLIENT SIDE, because the data is already here: both screens fetch a whole collection in one request and hold it, so filtering is a string comparison over what is in hand. a round trip per keystroke would be slower, would need a search endpoint on the sidecar, and would put a spinner where a person expects a list to narrow as they type. ACCENT-INSENSITIVE, and that is the half that decides whether this is usable here: these contacts are portuguese, and a box where "jose" does not find "José" is a box nobody uses twice. NFD splits the letter from its accent and the range strips what is left, so it matches in both directions — "josé" finds "Jose" too. every term must match somewhere, not all in one field, so "ana lisboa" finds the ana whose address is in lisbon. events match on their start as well, which is an ISO string, so "2026-08-29" narrows to a day without anything having to parse it. the count in the header becomes "12 of 340" while filtering, and a filter that matches nothing says so by name — otherwise it reads as a calendar that lost its events. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043
359 lines
17 KiB
TypeScript
359 lines
17 KiB
TypeScript
import type { CalendarEvent } from './shared';
|
||
import { useState } from 'react';
|
||
import { CalendarDays, MapPin, Repeat, Pencil, Trash2, Check, X, Plus } from 'lucide-react';
|
||
import { useCalendarEvents, useSelectedCollection } from './useDavData';
|
||
import { useDavEdit, CREATING, type NewEvent } from './useDavEdit';
|
||
import { useFilter, matches } from './useFilter';
|
||
import { useTranslation } from 'officerdev';
|
||
|
||
// Right panel of /calendar. Deliberately a grouped agenda list, not a month grid: the sidecar returns
|
||
// events as they are stored, with RRULE unexpanded, so a grid would have to invent occurrences the server
|
||
// never claimed existed. A list can show a repeating event honestly, as one entry with a "repeats" badge.
|
||
|
||
const dayKey = (ev: CalendarEvent) => (ev.start ? ev.start.slice(0, 10) : '');
|
||
|
||
const formatDay = (iso: string) => {
|
||
if (!iso) return 'No date';
|
||
const date = new Date(`${iso}T12:00:00`);
|
||
if (Number.isNaN(date.getTime())) return iso;
|
||
return date.toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
|
||
};
|
||
|
||
const formatTime = (ev: CalendarEvent) => {
|
||
if (ev.allDay || !ev.start) return 'All day';
|
||
const start = new Date(ev.start);
|
||
if (Number.isNaN(start.getTime())) return '';
|
||
const opts: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' };
|
||
const end = ev.end ? new Date(ev.end) : null;
|
||
if (!end || Number.isNaN(end.getTime())) return start.toLocaleTimeString(undefined, opts);
|
||
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');
|
||
const { events, isLoading, error } = useCalendarEvents(selected?.path ?? null);
|
||
// Keyed on the COLLECTION, so a save refreshes the list this event came from.
|
||
const edit = useDavEdit(['caldav', 'events', selected?.path ?? null]);
|
||
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);
|
||
const filter = useFilter('Filter events');
|
||
|
||
if (loadingCollections) return <Placeholder text="Loading calendars…" />;
|
||
if (!selected) return <Placeholder text="No calendars yet. Create one from a CalDAV client." />;
|
||
|
||
// Title, place, notes — and the DAY, so "saturday" or "2026-08-29" narrows to a date the way a person
|
||
// expects. `start` is an ISO string, which is why the date is searchable at all without parsing it.
|
||
const shown = events.filter((ev) => matches(filter.query, ev.summary, ev.location, ev.description, ev.start));
|
||
|
||
// 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. A filter that matches nothing says so,
|
||
// rather than looking like a calendar that lost its events.
|
||
const notice = error
|
||
? t('dav.readFailed', { name: selected.displayName, reason: String(error) })
|
||
: isLoading
|
||
? 'Loading events…'
|
||
: events.length === 0
|
||
? `${selected.displayName} has no events.`
|
||
: shown.length === 0
|
||
? `No event matches “${filter.query}”.`
|
||
: null;
|
||
|
||
const sorted = [...shown].sort((a, b) => (a.start ?? '').localeCompare(b.start ?? ''));
|
||
const days: Array<{ key: string; events: CalendarEvent[] }> = [];
|
||
for (const ev of sorted) {
|
||
const key = dayKey(ev);
|
||
const last = days[days.length - 1];
|
||
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.createEvent(selected.path, toEvent(draftNew)).then((ok) => ok && setDraftNew(null));
|
||
};
|
||
|
||
return (
|
||
<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">
|
||
{filter.query ? `${shown.length} of ${events.length}` : events.length}{' '}
|
||
{events.length === 1 ? 'event' : 'events'}
|
||
</div>
|
||
</div>
|
||
{filter.input}
|
||
<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)}
|
||
</h2>
|
||
{day.events.map((ev) => (
|
||
<article key={ev.uid} className="flex gap-3 rounded-xl border bg-card p-3">
|
||
<span
|
||
className="mt-1 h-2.5 w-2.5 shrink-0 rounded-full ring-1 ring-black/10"
|
||
style={{ backgroundColor: selected.color || '#94a3b8' }}
|
||
/>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="truncate text-sm font-medium">{ev.summary || '(no title)'}</span>
|
||
{ev.rrule && (
|
||
<span
|
||
title={ev.rrule}
|
||
className="flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground"
|
||
>
|
||
<Repeat className="h-3 w-3" />
|
||
repeats
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="mt-0.5 text-xs tabular-nums text-muted-foreground">{formatTime(ev)}</div>
|
||
|
||
{/* The editor is the title and the place, and nothing else. Those are the two fields a
|
||
person actually corrects; times and recurrence are where an editor does damage, and
|
||
a half-editor that silently rewrites an RRULE is worse than none. */}
|
||
{editing === ev.href && (
|
||
<form
|
||
className="mt-2 flex flex-col gap-2"
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
if (!ev.href) return;
|
||
// `null` removes the line; an empty string would leave an empty LOCATION behind.
|
||
void edit
|
||
.save(ev.href, { summary: draft.summary, location: draft.location || null })
|
||
.then((ok) => ok && setEditing(null));
|
||
}}
|
||
>
|
||
<input
|
||
autoFocus
|
||
value={draft.summary}
|
||
onChange={(e) => setDraft((d) => ({ ...d, summary: e.target.value }))}
|
||
placeholder="Title"
|
||
className="rounded-md border bg-background px-2 py-1 text-sm"
|
||
/>
|
||
<input
|
||
value={draft.location}
|
||
onChange={(e) => setDraft((d) => ({ ...d, location: e.target.value }))}
|
||
placeholder="Where"
|
||
className="rounded-md border bg-background px-2 py-1 text-xs"
|
||
/>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
type="submit"
|
||
disabled={edit.busy === ev.href}
|
||
className="flex items-center gap-1 rounded-md bg-primary/10 px-2 py-1 text-xs text-primary disabled:opacity-50"
|
||
>
|
||
<Check className="h-3 w-3" /> {edit.busy === ev.href ? 'Saving…' : 'Save'}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setEditing(null)}
|
||
className="rounded-md px-2 py-1 text-xs text-muted-foreground"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
{ev.location && (
|
||
<div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
|
||
<MapPin className="h-3 w-3 shrink-0" />
|
||
<span className="truncate">{ev.location}</span>
|
||
</div>
|
||
)}
|
||
{ev.description && (
|
||
<p className="mt-1 whitespace-pre-wrap text-xs text-muted-foreground">{ev.description}</p>
|
||
)}
|
||
</div>
|
||
{/* Only for an event we can actually address. An item with no href came from somewhere
|
||
that did not give us one, and offering a delete that cannot work is worse than not
|
||
offering it. */}
|
||
{ev.href && editing !== ev.href && (
|
||
<div className="flex shrink-0 items-start gap-1">
|
||
{confirming === ev.href ? (
|
||
<>
|
||
<button
|
||
onClick={() => void edit.remove(ev.href!).then(() => setConfirming(null))}
|
||
disabled={edit.busy === ev.href}
|
||
title="Delete this event"
|
||
className="rounded p-1 text-destructive hover:bg-destructive/10 disabled:opacity-50"
|
||
>
|
||
<Check className="h-3.5 w-3.5" />
|
||
</button>
|
||
<button
|
||
onClick={() => setConfirming(null)}
|
||
className="rounded p-1 opacity-50 hover:opacity-100"
|
||
>
|
||
<X className="h-3.5 w-3.5" />
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<button
|
||
onClick={() => {
|
||
setDraft({ summary: ev.summary ?? '', location: ev.location ?? '' });
|
||
setEditing(ev.href!);
|
||
}}
|
||
title="Edit"
|
||
className="rounded p-1 text-muted-foreground hover:text-foreground"
|
||
>
|
||
<Pencil className="h-3.5 w-3.5" />
|
||
</button>
|
||
<button
|
||
onClick={() => setConfirming(ev.href!)}
|
||
title="Delete"
|
||
className="rounded p-1 text-muted-foreground hover:text-destructive"
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</article>
|
||
))}
|
||
</section>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Placeholder = ({ text }: { text: string }) => (
|
||
<div className="flex h-full flex-col items-center justify-center gap-2 p-6 text-center text-sm text-muted-foreground">
|
||
<CalendarDays className="h-6 w-6 opacity-40" />
|
||
<span>{text}</span>
|
||
</div>
|
||
);
|