plugins/caldav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2026.08.27.03 — a filter on both screens

Browse Source 
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
This commit is contained in:
pastilhas
2026-08-27 14:20:50 +00:00
co-authored by Claude Opus 5
parent 6954c878d3
commit b578c2aa3b
5 changed files with 378 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/dav/CalendarView.tsx
+146 -125
View File
@@ -3,6 +3,7 @@ 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
@@ -39,7 +40,14 @@ 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 };
return {
summary: '',
location: '',
date: localDate(start),
start: localTime(start),
end: localTime(end),
allDay: false,
};
};
/**
@@ -71,21 +79,29 @@ export const CalendarView = () => {
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.
// 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.`
: null;
: shown.length === 0
? `No event matches “${filter.query}”.`
: null;
const sorted = [...events].sort((a, b) => (a.start ?? '').localeCompare(b.start ?? ''));
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);
@@ -110,9 +126,11 @@ export const CalendarView = () => {
<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'}
{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"
@@ -196,132 +214,135 @@ export const CalendarView = () => {
{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>
<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
{/* 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>
{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>
</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>
</>
)}
{ev.description && (
<p className="mt-1 whitespace-pre-wrap text-xs text-muted-foreground">{ev.description}</p>
)}
</div>
)}
</article>
))}
</section>
{/* 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>