@rapidmx/web-client 0.30.0 → 0.31.0

package/apps/shared/components/calendar/EventModal.tsx

@@ -8,6 +8,7 @@ import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
 import Modal from "../../../../lib/components/overlays/Modal.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import useIsMobile from "../../../../lib/util/useIsMobile.js";
+import { useMailboxUpdateAccess } from "../../mail/useMailboxUpdateAccess.js";
 import EventDetails from "./EventDetails.js";
 import EventEditor from "./EventEditor.js";
 import EventMatchNav from "./EventMatchNav.js";
@@ -119,6 +120,10 @@ export default function EventModal({
     const [syncWarning, setSyncWarning] = useState(false);
     // Whether the form holds anything a click on the backdrop would throw away (kept up to date by the editor).
     const dirtyRef = useRef(false);
+    // Escape or the close button on a form that holds something asks before throwing it away.
+    const [confirmingDiscard, setConfirmingDiscard] = useState(false);
+    // An event on a calendar shared with the reader view-only cannot be changed, deleted or answered.
+    const canWrite = useMailboxUpdateAccess(mailboxOptions?.find((option) => option.mailbox.uid === occurrence?.mailboxUid)?.mailbox);
 
     if (!open) {
         return null;
@@ -168,7 +173,7 @@ export default function EventModal({
             focusKey={isForm ? layout : "details"}
             anchor={anchor}
             width={width}
-            onClose={isForm ? leaveForm : onClose}
+            onClose={isForm ? () => (dirtyRef.current ? setConfirmingDiscard(true) : leaveForm()) : onClose}
             onBackdropPress={isForm ? () => !dirtyRef.current && leaveForm() : undefined}
         >
             {isForm ? (
@@ -214,6 +219,7 @@ export default function EventModal({
                         isOwnAddress={isOwnAddress}
                         calendarName={calendars?.find((cal) => cal.uid === occurrence.folderUid)?.name}
                         calendarColor={folderColors?.[occurrence.folderUid]}
+                        canWrite={canWrite}
                         onClose={onClose}
                         onModify={() => setEditing(true)}
                         onSaved={onSaved}
@@ -222,6 +228,24 @@ export default function EventModal({
                 </SlideIn>
             )}
             {!isForm && matchNav && <EventMatchNav onPrevious={matchNav.onPrevious} onNext={matchNav.onNext} canPrevious={matchNav.canPrevious} canNext={matchNav.canNext} noun={matchNav.noun} />}
+            <Modal open={confirmingDiscard} onClose={() => setConfirmingDiscard(false)} title="Discard changes?">
+                <p className="text-sm mb-5">What you entered in this event has not been saved.</p>
+                <div className="flex gap-3 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingDiscard(false)}>
+                        Keep editing
+                    </Button>
+                    <Button
+                        type="button"
+                        className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger"
+                        onClick={() => {
+                            setConfirmingDiscard(false);
+                            leaveForm();
+                        }}
+                    >
+                        Discard
+                    </Button>
+                </div>
+            </Modal>
         </EventShell>
     );
 }

package/apps/shared/components/calendar/FindATime.tsx

@@ -105,7 +105,7 @@ export default function FindATime({ c }: { c: EventFormController }) {
     }, [startDay]);
 
     // You, then each guest once (case-insensitively), at most as many as one look-up may ask about.
-    const rows = useMemo<Row[]>(() => {
+    const { rows, skipped } = useMemo<{ rows: Row[]; skipped: number }>(() => {
         const seen = new Set([organizerAddress.toLowerCase()]);
         const guests: Row[] = [];
         for (const attendee of values.attendees) {
@@ -115,7 +115,8 @@ export default function FindATime({ c }: { c: EventFormController }) {
                 guests.push({ address: attendee.address, name: attendee.displayName || attendee.address, you: false });
             }
         }
-        return [{ address: organizerAddress, name: "You", you: true }, ...guests].slice(0, FREE_BUSY_MAX_ADDRESSES);
+        const everyone = [{ address: organizerAddress, name: "You", you: true }, ...guests];
+        return { rows: everyone.slice(0, FREE_BUSY_MAX_ADDRESSES), skipped: Math.max(0, everyone.length - FREE_BUSY_MAX_ADDRESSES) };
     }, [values.attendees, organizerAddress]);
     const guestCount = rows.length - 1;
     const addresses = rows.map((row) => row.address);
@@ -242,6 +243,13 @@ export default function FindATime({ c }: { c: EventFormController }) {
                 <span className="text-xs text-text-muted">{describeTimeZone(formZone, zoneDate(dayKey))}</span>
             </div>
 
+            {skipped > 0 && (
+                <p className="text-xs text-text-muted">
+                    {skipped} {skipped === 1 ? "guest" : "guests"} beyond the first {FREE_BUSY_MAX_ADDRESSES - 1} {skipped === 1 ? "isn’t" : "aren’t"} checked, and {skipped === 1 ? "is" : "are"} not
+                    counted in who is free.
+                </p>
+            )}
+
             {lookUp.status === "error" && (
                 <div role="alert" className="flex flex-wrap items-center gap-3 text-sm text-danger">
                     <span>{lookUp.message}</span>

package/apps/shared/components/calendar/ListView.tsx

@@ -2,14 +2,18 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import { addDays, format, isToday, parseISO, startOfDay } from "date-fns";
 import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
 import { allDayDateKey, localDateKey, startsOnDay } from "./allDay.js";
 import { occurrenceMarker, useActiveOccurrenceKey } from "./activeOccurrence.js";
+import { useDayKey } from "../../../../lib/calendar/useDayKey.js";
 
-/** The most days one event is listed on, so an event that runs for years does not become thousands of rows. */
+/** The most days one event is listed on (counted from today), so an event that runs for years does not become thousands of rows. */
 export const LIST_MAX_DAYS_PER_EVENT = 366;
+/** The days (that have events) rendered at first, and how many more each time the end of the list is reached. */
+export const LIST_INITIAL_DAYS = 60;
+export const LIST_DAYS_PER_PAGE = 60;
 
 /** A step through the list's months: `nonce` makes a second press in the same direction a new step. */
 export interface ListStep {
@@ -43,8 +47,8 @@ function timeLabel(occurrence: CalendarOccurrence, day: Date): string {
     return start.getTime() === end.getTime() ? format(start, "h:mma") : `${format(start, "h:mma")} – ${format(end, "h:mma")}`;
 }
 
-/** The days (local midnights) `occurrence` is on show on: from its first to its last, at most `LIST_MAX_DAYS_PER_EVENT`. */
-function daysOf(occurrence: CalendarOccurrence): Date[] {
+/** The days (local midnights) `occurrence` is on show on from `today` (a local midnight) on: its first to its last, at most `LIST_MAX_DAYS_PER_EVENT` of them. */
+function daysOf(occurrence: CalendarOccurrence, today: Date): Date[] {
     let first: Date;
     let last: Date;
     if (occurrence.allDay) {
@@ -58,8 +62,12 @@ function daysOf(occurrence: CalendarOccurrence): Date[] {
         // An event that ends at midnight does not reach into that day.
         last = startOfDay(end > start ? new Date(end.getTime() - 1) : start);
     }
-    const days = [first];
-    for (let day = addDays(first, 1); day <= last && days.length < LIST_MAX_DAYS_PER_EVENT; day = addDays(day, 1)) {
+    // An event is on its first day at least. The days before today are not listed, so the cap counts from today: an event that began years ago and
+    // still runs would otherwise be spent before it reached it.
+    const lastDay = last < first ? first : last;
+    const from = first < today ? today : first;
+    const days: Date[] = [];
+    for (let day = from; day <= lastDay && days.length < LIST_MAX_DAYS_PER_EVENT; day = addDays(day, 1)) {
         days.push(day);
     }
     return days;
@@ -76,22 +84,22 @@ function sortedForDay(occurrences: CalendarOccurrence[], day: Date): CalendarOcc
  * nothing at all says so). A multi-day event is listed on every day it covers, as the month grid shows it. Each row is a full-width button that
  * opens the event's card, with the time, title, place (or organizer) and its calendar's colour.
  *
- * Every day is rendered (an event is a cheap row, and a series is bounded to 500 occurrences - see `eventSearch.ts`); the days are grouped once per
- * change of `occurrences`, not per render. The list scrolls itself to `focusDate` and, on a `step`, to the neighbouring month.
+ * The days are grouped once per change of `occurrences` (or of the day), not per render, but only the first `LIST_INITIAL_DAYS` of them are rendered:
+ * more follow as the end of the list is scrolled to (a daily series alone is thousands of rows). A jump, a step or a search match that lies beyond
+ * the rendered days renders up to it first. The list scrolls itself to `focusDate` and, on a `step`, to the neighbouring month.
  */
-export default function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }: ListViewProps) {
+function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }: ListViewProps) {
     const activeKey = useActiveOccurrenceKey();
+    // Today moves on at midnight, with the list open or not.
+    const dayKey = useDayKey();
     const scrollerRef = useRef<HTMLDivElement>(null);
+    const sentinelRef = useRef<HTMLDivElement>(null);
     const groups = useMemo(() => {
         const byDay = new Map<string, { day: Date; items: CalendarOccurrence[] }>();
-        const todayKey = localDateKey(new Date());
+        const today = parseISO(dayKey);
         for (const occurrence of occurrences) {
-            for (const day of daysOf(occurrence)) {
+            for (const day of daysOf(occurrence, today)) {
                 const key = localDateKey(day);
-                // The days an event spent before today are not listed.
-                if (key < todayKey) {
-                    continue;
-                }
                 const group = byDay.get(key) ?? { day, items: [] };
                 group.items.push(occurrence);
                 byDay.set(key, group);
@@ -100,17 +108,76 @@ export default function ListView({ occurrences, folderColors, onSelectEvent, foc
         return Array.from(byDay.entries())
             .sort(([a], [b]) => a.localeCompare(b))
             .map(([key, { day, items }]) => ({ key, day, items: sortedForDay(items, day) }));
-    }, [occurrences]);
+    }, [occurrences, dayKey]);
+
+    // How many days are rendered. Where there is no IntersectionObserver to say the end was reached, all of them are.
+    const [shown, setShown] = useState(LIST_INITIAL_DAYS);
+    const rendered = typeof IntersectionObserver === "undefined" ? groups.length : Math.min(shown, groups.length);
+    const more = rendered < groups.length;
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!sentinel) {
+            return;
+        }
+        // Watched again after each page, so a sentinel still in view (a tall window) brings the next one.
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries.some((entry) => entry.isIntersecting)) {
+                    setShown((count) => count + LIST_DAYS_PER_PAGE);
+                }
+            },
+            { root: scrollerRef.current, rootMargin: "600px" },
+        );
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [more, shown]);
+
+    // What waits for the days it scrolls to be rendered: one slot per effect that asks, so one cannot replace another's scroll.
+    const afterReveal = useRef<Partial<Record<"jump" | "match" | "step", () => void>>>({});
+    useEffect(() => {
+        const pending = Object.values(afterReveal.current);
+        afterReveal.current = {};
+        for (const scroll of pending) {
+            scroll();
+        }
+    }, [shown]);
+    /** Runs `scroll` once the day at `index` of `groups` is rendered: now, or after the rendered days have grown to reach it. */
+    function reveal(slot: "jump" | "match" | "step", index: number, scroll: () => void) {
+        if (index < rendered) {
+            scroll();
+            return;
+        }
+        afterReveal.current[slot] = scroll;
+        setShown((count) => Math.max(count, index + LIST_DAYS_PER_PAGE));
+    }
+    // Both look the element up when the scroll runs, which can be after the list changed (a live refresh) and the element is gone: then there is nothing to scroll to.
+    const scrollToDay = (key: string) => scrollerRef.current?.querySelector<HTMLElement>(`[data-day="${key}"]`)?.scrollIntoView({ block: "start" });
 
     const dayElements = () => Array.from(scrollerRef.current!.querySelectorAll<HTMLElement>("[data-day]"));
 
     // On opening and on a jump (Today, a date picked in the mini calendar): the first day from `focusDate` that has events, else the last one.
     useEffect(() => {
+        if (groups.length === 0) {
+            return;
+        }
         const wanted = localDateKey(focusDate);
-        const days = dayElements();
-        (days.find((el) => el.dataset.day! >= wanted) ?? days[days.length - 1])?.scrollIntoView({ block: "start" });
+        const found = groups.findIndex((group) => group.key >= wanted);
+        const index = found >= 0 ? found : groups.length - 1;
+        reveal("jump", index, () => scrollToDay(groups[index].key));
     }, [jumpNonce]);
 
+    // A search match beyond the rendered days: they grow to it, and it is scrolled to (the page's own scroll to the match found nothing there).
+    useEffect(() => {
+        const index = groups.findIndex((group) => group.items.some((occurrence) => occurrence.occurrenceKey === activeKey));
+        if (index >= rendered) {
+            reveal("match", index, () =>
+                Array.from(scrollerRef.current?.querySelectorAll<HTMLElement>("[data-occurrence-key]") ?? [])
+                    .find((el) => el.dataset.occurrenceKey === activeKey)
+                    ?.scrollIntoView({ block: "nearest", inline: "nearest" }),
+            );
+        }
+    }, [activeKey]);
+
     // A step: from the month of the day at the top of the list to the first day of the previous or next month that has any.
     useEffect(() => {
         const days = dayElements();
@@ -119,19 +186,22 @@ export default function ListView({ occurrences, folderColors, onSelectEvent, foc
         }
         const top = scrollerRef.current!.getBoundingClientRect().top;
         const current = days.find((el) => el.getBoundingClientRect().bottom > top) ?? days[days.length - 1];
-        const months = Array.from(new Set(days.map((el) => el.dataset.day!.slice(0, 7))));
+        const months = Array.from(new Set(groups.map((group) => group.key.slice(0, 7))));
         const month = months[months.indexOf(current.dataset.day!.slice(0, 7)) + step.direction];
         // Past the first or last month with events there is nowhere to go.
-        days.find((el) => el.dataset.day!.startsWith(month))?.scrollIntoView({ block: "start" });
+        const index = groups.findIndex((group) => group.key.startsWith(month));
+        if (index >= 0) {
+            reveal("step", index, () => scrollToDay(groups[index].key));
+        }
     }, [step]);
 
-    const thisYear = new Date().getFullYear();
+    const thisYear = parseISO(dayKey).getFullYear();
     return (
         <div ref={scrollerRef} role="region" aria-label="List" data-calendar-scroller className="flex-1 min-h-0 overflow-y-auto">
             {groups.length === 0 ? (
                 <p className="p-4 text-sm text-text-muted">No upcoming events</p>
             ) : (
-                groups.map(({ key, day, items }) => (
+                groups.slice(0, rendered).map(({ key, day, items }) => (
                     <section key={key} data-day={key} aria-labelledby={`list-day-${key}`}>
                         <h3
                             id={`list-day-${key}`}
@@ -157,18 +227,22 @@ export default function ListView({ occurrences, folderColors, onSelectEvent, foc
                                     day={day}
                                     color={folderColors[occurrence.folderUid]}
                                     onSelect={onSelectEvent}
-                                    activeKey={activeKey}
+                                    // Only the row that is the match is told: a new match renders two rows, not all of them.
+                                    activeKey={activeKey === occurrence.occurrenceKey ? activeKey : null}
                                 />
                             ))}
                         </ul>
                     </section>
                 ))
             )}
+            {more && <div ref={sentinelRef} data-list-end aria-hidden="true" className="h-px" />}
         </div>
     );
 }
 
-function ListRow({
+export default memo(ListView);
+
+const ListRow = memo(function ListRow({
     occurrence,
     day,
     color,
@@ -204,4 +278,4 @@ function ListRow({
             </button>
         </li>
     );
-}
+});

package/apps/shared/components/calendar/RecurrenceEditor.tsx

@@ -22,6 +22,10 @@ const FREQ_LABEL: Record<RecurrenceFrequency, { unit: string; unitPlural: string
 
 type EndCondition = "never" | "count" | "until";
 
+/** The most an interval ("every N days") or a count ("after N occurrences") can be set to. */
+const MAX_INTERVAL = 999;
+const MAX_COUNT = 1000;
+
 function endConditionOf(rule: RecurrenceRule): EndCondition {
     if (rule.count) return "count";
     if (rule.until) return "until";
@@ -38,6 +42,9 @@ export interface RecurrenceEditorProps {
     /** The weekday the event starts on (in the frame its series expands in - see `allDay.ts`'s
      * `startWeekdayCode()`): the day a new weekly rule, or one switched to Weekly, repeats on. Defaults to Monday. */
     startWeekday?: WeekdayCode;
+    /** The event's start date (`yyyy-MM-dd`): "Ends on" starts at today, or at this date when the event starts later - a series that ends before it
+     * starts has no occurrences at all. */
+    startDateKey?: string;
     /** Leaves out the "Repeats" checkbox, for a caller that already turns repeating on and off itself (the event form's
      * "Does not repeat" menu): what remains is the rule's details, shown only while there is a rule. */
     hideToggle?: boolean;
@@ -49,7 +56,7 @@ export interface RecurrenceEditorProps {
  * live "every ... until/for ..." summary comes from `describeRecurrence()` (built on `rrule`'s own
  * `.toText()`), so it never drifts out of sync with what will actually be submitted.
  */
-export default function RecurrenceEditor({ value, onChange, allDay = false, startWeekday = "MO", hideToggle = false }: RecurrenceEditorProps) {
+export default function RecurrenceEditor({ value, onChange, allDay = false, startWeekday = "MO", startDateKey, hideToggle = false }: RecurrenceEditorProps) {
     function handleEnable(enabled: boolean) {
         onChange(enabled ? { freq: "weekly", interval: 1, byDay: [startWeekday], exceptions: [] } : null);
     }
@@ -83,25 +90,27 @@ export default function RecurrenceEditor({ value, onChange, allDay = false, star
         } else if (condition === "count") {
             update({ count: 10, until: undefined });
         } else {
-            update({ until: recurrenceUntilInstant(format(new Date(), "yyyy-MM-dd"), allDay), count: undefined });
+            const today = format(new Date(), "yyyy-MM-dd");
+            update({ until: recurrenceUntilInstant(startDateKey && startDateKey > today ? startDateKey : today, allDay), count: undefined });
         }
     }
 
-    /** A positive whole number from a number input, or `null` while it's empty (a user clearing the field
-     * to type a new value) — the rule keeps its previous value then, rather than becoming 0/NaN. */
-    function parsePositive(raw: string): number | null {
+    /** A whole number from 1 to `max` from a number input, or `null` while it's empty (a user clearing the field
+     * to type a new value) — the rule keeps its previous value then, rather than becoming 0/NaN. A huge one (an event
+     * every day, a billion times) would make every view expand it forever. */
+    function parsePositive(raw: string, max: number): number | null {
         if (raw.trim() === "") return null;
         const n = Math.floor(Number(raw));
-        return n >= 1 ? n : 1;
+        return n >= 1 ? Math.min(n, max) : 1;
     }
 
     function handleInterval(raw: string) {
-        const interval = parsePositive(raw);
+        const interval = parsePositive(raw, MAX_INTERVAL);
         if (interval !== null) update({ interval });
     }
 
     function handleCount(raw: string) {
-        const count = parsePositive(raw);
+        const count = parsePositive(raw, MAX_COUNT);
         if (count !== null) update({ count });
     }
 
@@ -126,6 +135,7 @@ export default function RecurrenceEditor({ value, onChange, allDay = false, star
                         <input
                             type="number"
                             min={1}
+                            max={MAX_INTERVAL}
                             className={`${INPUT_CLASS} w-16`}
                             value={value.interval}
                             onChange={(e) => handleInterval(e.target.value)}
@@ -189,6 +199,7 @@ export default function RecurrenceEditor({ value, onChange, allDay = false, star
                             <input
                                 type="number"
                                 min={1}
+                                max={MAX_COUNT}
                                 className={`${INPUT_CLASS} w-16`}
                                 value={value.count ?? 10}
                                 disabled={endConditionOf(value) !== "count"}

package/apps/shared/components/calendar/SplitDayView.tsx

@@ -3,15 +3,13 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
-import { addDays, addMinutes, format, startOfDay } from "date-fns";
+import { addMinutes, format, startOfDay } from "date-fns";
 import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
 import { occursOnDay } from "./allDay.js";
 import { occurrenceMarker, useActiveOccurrenceKey } from "./activeOccurrence.js";
 import { EventAnchor, anchorOf } from "./EventShell.js";
+import { HOUR_HEIGHT_PX, SLOTS_PER_DAY, SLOT_MINUTES, blockSpan, laneStyle, layoutLanes, slotStart } from "./gridLayout.js";
 
-const HOUR_HEIGHT_PX = 48;
-const SLOT_MINUTES = 30;
-const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
 const HOURS = Array.from({ length: 24 }, (_, h) => h);
 
 export interface SplitDayColumn {
@@ -93,31 +91,30 @@ function SplitColumn({
     onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
 }) {
     const activeKey = useActiveOccurrenceKey();
+    // Clipped to this day, so a multi-day event fills only the part of the day it covers. An all-day event is date-only (see `allDay.ts`), so it
+    // always spans the whole local day. Events that overlap in time share the column's width instead of covering one another.
+    const spans = occurrences.map((occurrence) =>
+        blockSpan(new Date(occurrence.startDate).getTime(), new Date(occurrence.endDate).getTime(), dayStart, occurrence.allDay),
+    );
+    const lanes = layoutLanes(spans);
     return (
         <div className="flex-1 min-w-0 relative border-l border-border">
             {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
-                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
+                const start = slotStart(dayStart, i);
                 return (
                     <button
                         key={i}
                         type="button"
-                        onClick={(e) => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid, anchorOf(e.currentTarget))}
+                        onClick={(e) => onSelectSlot(start, addMinutes(start, SLOT_MINUTES), column.folderUid, anchorOf(e.currentTarget))}
                         style={{ height: HOUR_HEIGHT_PX / 2 }}
                         className="block w-full border-b border-border/50 text-left"
-                        aria-label={`New event at ${format(slotStart, "h:mm a")} in ${column.name}`}
+                        aria-label={`New event at ${format(start, "h:mm a")} in ${column.name}`}
                     />
                 );
             })}
-            {occurrences.map((occurrence) => {
+            {occurrences.map((occurrence, index) => {
                 const start = new Date(occurrence.startDate);
-                const end = new Date(occurrence.endDate);
-                // Clipped to this day, so a multi-day event fills only the part of the day it covers. An
-                // all-day event is date-only (see `allDay.ts`), so it always spans the whole local day.
-                const dayEnd = addDays(dayStart, 1).getTime();
-                const visibleStart = occurrence.allDay ? dayStart.getTime() : Math.max(start.getTime(), dayStart.getTime());
-                const visibleEnd = occurrence.allDay ? dayEnd : Math.min(end.getTime(), dayEnd);
-                const top = ((visibleStart - dayStart.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX;
-                const height = Math.max(((visibleEnd - visibleStart) / 60_000 / 60) * HOUR_HEIGHT_PX, 16);
+                const { top, height } = spans[index];
                 const isFree = occurrence.busyStatus === "free";
                 const marker = occurrenceMarker(activeKey, occurrence);
                 return (
@@ -129,8 +126,7 @@ function SplitColumn({
                             position: "absolute",
                             top,
                             height,
-                            left: 2,
-                            right: 2,
+                            ...laneStyle(lanes[index]),
                             ...(isFree ? undefined : { backgroundColor: column.color, color: "#fff" }),
                         }}
                         className={[

package/apps/shared/components/calendar/TaskQuickForm.tsx

@@ -20,6 +20,7 @@ import { TaskList, TaskPriority, createTask, listTaskLists } from "../../../../l
 import Button from "../../../../lib/components/buttons/Button.js";
 import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
 import { notify } from "../../notifications/store.js";
+import { dueDateInstant } from "../tasks/dueDate.js";
 import { EventFormController } from "./eventForm.js";
 import { INPUT_CLASS, IconRow, SELECT_CLASS } from "./EventFormParts.js";
 import QuickFaceFrame from "./QuickFaceFrame.js";
@@ -127,8 +128,8 @@ export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded,
                     folderUid,
                     title,
                     body: draft.body.trim() || undefined,
-                    // A date-only due date is the local day's midnight, the way the Tasks app writes one.
-                    dueDate: draft.dueDate ? parseISO(draft.allDay ? draft.dueDate : `${draft.dueDate}T${draft.dueTime}`).toISOString() : undefined,
+                    // A date-only due date is that day's UTC midnight, the way the Tasks app writes one.
+                    dueDate: draft.dueDate ? (draft.allDay ? dueDateInstant(draft.dueDate) : parseISO(`${draft.dueDate}T${draft.dueTime}`).toISOString()) : undefined,
                     priority: draft.priority,
                     reminderDate: draft.reminder ? parseISO(draft.reminder).toISOString() : undefined,
                     taskListUid: listUid || undefined,

package/apps/shared/components/calendar/TimeGridView.tsx

@@ -2,18 +2,16 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React from "react";
+import React, { KeyboardEvent } from "react";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { addDays, addMinutes, format, isToday, startOfDay } from "date-fns";
+import { addMinutes, format, isToday, startOfDay } from "date-fns";
 import { dayDropId, eventDragId, resizeDragId, slotDropId } from "../../../../lib/calendar/calendarDragIds.js";
 import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
 import { occursOnDay, startsOnDay } from "./allDay.js";
 import { occurrenceMarker, useActiveOccurrenceKey } from "./activeOccurrence.js";
 import { EventAnchor, anchorOf } from "./EventShell.js";
+import { HOUR_HEIGHT_PX, Lane, SLOTS_PER_DAY, SLOT_MINUTES, blockSpan, laneStyle, layoutLanes, slotStart } from "./gridLayout.js";
 
-const HOUR_HEIGHT_PX = 48;
-const SLOT_MINUTES = 30;
-const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
 const HOURS = Array.from({ length: 24 }, (_, h) => h);
 
 export interface TimeGridViewProps {
@@ -111,20 +109,22 @@ interface DayColumnProps {
 
 function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot }: DayColumnProps) {
     const dayStart = startOfDay(day);
+    // Events that overlap in time share the column's width instead of covering one another.
+    const lanes = layoutLanes(occurrences.map((occurrence) => blockSpan(new Date(occurrence.startDate).getTime(), new Date(occurrence.endDate).getTime(), dayStart)));
 
     return (
         <div className={["flex-1 min-w-0 relative border-l border-border", isToday(day) ? "bg-primary/5" : ""].join(" ")}>
-            {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
-                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
-                return <TimeSlot key={i} start={slotStart} onSelectSlot={onSelectSlot} />;
-            })}
-            {occurrences.map((occurrence) =>
+            {Array.from({ length: SLOTS_PER_DAY }, (_, i) => (
+                <TimeSlot key={i} start={slotStart(dayStart, i)} onSelectSlot={onSelectSlot} />
+            ))}
+            {occurrences.map((occurrence, index) =>
                 startsOnDay(occurrence, day) ? (
                     <EventBlock
                         key={occurrence.occurrenceKey}
                         occurrence={occurrence}
                         color={folderColors[occurrence.folderUid]}
                         dayStart={dayStart}
+                        lane={lanes[index]}
                         onSelect={onSelectEvent}
                     />
                 ) : (
@@ -133,6 +133,7 @@ function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot
                         occurrence={occurrence}
                         color={folderColors[occurrence.folderUid]}
                         dayStart={dayStart}
+                        lane={lanes[index]}
                         onSelect={onSelectEvent}
                     />
                 ),
@@ -147,6 +148,8 @@ function TimeSlot({ start, onSelectSlot }: { start: Date; onSelectSlot: (start:
         <button
             ref={setNodeRef}
             type="button"
+            // 48 of these a day would be hundreds of tab stops in a week: the New event shortcut is the keyboard's way in.
+            tabIndex={-1}
             onClick={(e) => onSelectSlot(start, addMinutes(start, SLOT_MINUTES), anchorOf(e.currentTarget))}
             style={{ height: HOUR_HEIGHT_PX / 2 }}
             className={["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" ")}
@@ -155,15 +158,18 @@ function TimeSlot({ start, onSelectSlot }: { start: Date; onSelectSlot: (start:
     );
 }
 
+/** Enter or Space on a focused event block opens the event, as a click does (the blocks are not `<button>`s: they hold a nested resize handle). */
+function openOnKey(event: KeyboardEvent<HTMLElement>, open: () => void) {
+    if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        open();
+    }
+}
+
 /** A block's position within its day column. A multi-day event is drawn in every day column it
  * overlaps, clipped to that day. */
 function blockGeometry(occurrence: CalendarOccurrence, dayStart: Date): { top: number; height: number } {
-    const visibleStart = Math.max(new Date(occurrence.startDate).getTime(), dayStart.getTime());
-    const visibleEnd = Math.min(new Date(occurrence.endDate).getTime(), addDays(dayStart, 1).getTime());
-    return {
-        top: ((visibleStart - dayStart.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX,
-        height: Math.max(((visibleEnd - visibleStart) / 60_000 / 60) * HOUR_HEIGHT_PX, 16),
-    };
+    return blockSpan(new Date(occurrence.startDate).getTime(), new Date(occurrence.endDate).getTime(), dayStart);
 }
 
 /** A multi-day event's block in a day column after its first: clickable, but not draggable/resizable
@@ -172,11 +178,13 @@ function ContinuationBlock({
     occurrence,
     color,
     dayStart,
+    lane,
     onSelect,
 }: {
     occurrence: CalendarOccurrence;
     color: string;
     dayStart: Date;
+    lane: Lane;
     onSelect: (occurrence: CalendarOccurrence) => void;
 }) {
     const isFree = occurrence.busyStatus === "free";
@@ -185,8 +193,11 @@ function ContinuationBlock({
     return (
         <div
             {...marker.attrs}
+            role="button"
+            tabIndex={0}
             onClick={() => onSelect(occurrence)}
-            style={{ position: "absolute", top, height, left: 2, right: 2, ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }) }}
+            onKeyDown={(e) => openOnKey(e, () => onSelect(occurrence))}
+            style={{ position: "absolute", top, height, ...laneStyle(lane), ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }) }}
             className={["rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer", isFree ? "bg-surface-alt text-text-muted" : "", marker.className].join(" ")}
         >
             <div className="font-medium truncate">{occurrence.title}</div>
@@ -198,6 +209,7 @@ function EventBlock({
     occurrence,
     color,
     dayStart,
+    lane,
     onSelect,
 }: {
     occurrence: CalendarOccurrence;
@@ -205,6 +217,8 @@ function EventBlock({
      * "free" one keeps Outlook's own muted/outline treatment regardless of which calendar it's on. */
     color: string;
     dayStart: Date;
+    /** Its share of the column's width, when other events overlap it in time. */
+    lane: Lane;
     onSelect: (occurrence: CalendarOccurrence) => void;
 }) {
     const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
@@ -230,8 +244,7 @@ function EventBlock({
                 position: "absolute",
                 top,
                 height,
-                left: 2,
-                right: 2,
+                ...laneStyle(lane),
                 transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : undefined,
                 zIndex: isDragging ? 10 : undefined,
                 ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }),
@@ -244,6 +257,7 @@ function EventBlock({
             ].join(" ")}
             {...listeners}
             {...attributes}
+            onKeyDown={(e) => openOnKey(e, () => onSelect(occurrence))}
         >
             <div className="font-medium truncate">{occurrence.title}</div>
             <div className="truncate">{format(start, "h:mma")}</div>
@@ -253,6 +267,8 @@ function EventBlock({
                 aria-label={`Resize "${occurrence.title}"`}
                 {...resizeListeners}
                 {...resizeAttributes}
+                // Dragging is the only way to resize: a tab stop here would do nothing.
+                tabIndex={-1}
             />
         </div>
     );