@rapidmx/web-client 0.28.0 → 0.29.0

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

@@ -0,0 +1,207 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useMemo, useRef } 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";
+
+/** The most days one event is listed on, so an event that runs for years does not become thousands of rows. */
+export const LIST_MAX_DAYS_PER_EVENT = 366;
+
+/** A step through the list's months: `nonce` makes a second press in the same direction a new step. */
+export interface ListStep {
+    direction: 1 | -1;
+    nonce: number;
+}
+
+export interface ListViewProps {
+    /** Every occurrence to list (or, while a search runs, only its matches) - see `eventSearch.ts`'s `allOccurrences()`. Only today and later is shown. */
+    occurrences: CalendarOccurrence[];
+    /** Each occurrence's own calendar color, keyed by `folderUid` - see `calendarColors.ts`. */
+    folderColors: Record<string, string>;
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** The day the list scrolls to (the first day from it that has events - the top for one in the past -, the last day when none does) on opening and whenever `jumpNonce` changes. */
+    focusDate: Date;
+    jumpNonce: number;
+    /** Scrolls to the first day of the previous or next month (from the one at the top) that has events. */
+    step: ListStep | null;
+}
+
+/** When an occurrence is on show on `day`: its time range, "All day", or - on a later day of a multi-day event - that it continues. */
+function timeLabel(occurrence: CalendarOccurrence, day: Date): string {
+    if (occurrence.allDay) {
+        return "All day";
+    }
+    if (!startsOnDay(occurrence, day)) {
+        return "Continues";
+    }
+    const start = new Date(occurrence.startDate);
+    const end = new Date(occurrence.endDate);
+    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[] {
+    let first: Date;
+    let last: Date;
+    if (occurrence.allDay) {
+        // Date-only, the end exclusive (see `allDay.ts`), and at least the start day.
+        first = parseISO(allDayDateKey(occurrence.startDate));
+        last = addDays(parseISO(allDayDateKey(occurrence.endDate)), -1);
+    } else {
+        const start = new Date(occurrence.startDate);
+        const end = new Date(occurrence.endDate);
+        first = startOfDay(start);
+        // 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)) {
+        days.push(day);
+    }
+    return days;
+}
+
+/** The day's rows in the order they are read: the all-day events and those carried over from an earlier day, then the timed ones as they start. */
+function sortedForDay(occurrences: CalendarOccurrence[], day: Date): CalendarOccurrence[] {
+    const rank = (occurrence: CalendarOccurrence) => (occurrence.allDay || !startsOnDay(occurrence, day) ? 0 : 1);
+    return occurrences.sort((a, b) => rank(a) - rank(b) || new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+}
+
+/**
+ * Every event from today on as one scrollable list, in date order, with a heading and a list for each day that has any (days without events are left out, and
+ * 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.
+ */
+export default function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }: ListViewProps) {
+    const activeKey = useActiveOccurrenceKey();
+    const scrollerRef = useRef<HTMLDivElement>(null);
+    const groups = useMemo(() => {
+        const byDay = new Map<string, { day: Date; items: CalendarOccurrence[] }>();
+        const todayKey = localDateKey(new Date());
+        for (const occurrence of occurrences) {
+            for (const day of daysOf(occurrence)) {
+                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);
+            }
+        }
+        return Array.from(byDay.entries())
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([key, { day, items }]) => ({ key, day, items: sortedForDay(items, day) }));
+    }, [occurrences]);
+
+    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(() => {
+        const wanted = localDateKey(focusDate);
+        const days = dayElements();
+        (days.find((el) => el.dataset.day! >= wanted) ?? days[days.length - 1])?.scrollIntoView({ block: "start" });
+    }, [jumpNonce]);
+
+    // 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();
+        if (!step || days.length === 0) {
+            return;
+        }
+        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 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" });
+    }, [step]);
+
+    const thisYear = new Date().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 }) => (
+                    <section key={key} data-day={key} aria-labelledby={`list-day-${key}`}>
+                        <h3
+                            id={`list-day-${key}`}
+                            // Today is marked, not shouted: the same opaque bar as every day, with a primary edge and a small pill.
+                            aria-current={isToday(day) ? "date" : undefined}
+                            className={[
+                                "sticky top-0 z-10 px-4 py-2 text-sm font-semibold border-b border-border bg-surface-alt text-text border-l-4",
+                                isToday(day) ? "border-l-primary" : "border-l-transparent",
+                            ].join(" ")}
+                        >
+                            {format(day, day.getFullYear() === thisYear ? "EEEE, MMMM d" : "EEEE, MMMM d, yyyy")}
+                            {isToday(day) && (
+                                <span aria-hidden="true" className="ml-2 px-1.5 py-0.5 rounded-full bg-primary/15 text-primary-dark text-xs font-medium">
+                                    Today
+                                </span>
+                            )}
+                        </h3>
+                        <ul>
+                            {items.map((occurrence) => (
+                                <ListRow
+                                    key={occurrence.occurrenceKey}
+                                    occurrence={occurrence}
+                                    day={day}
+                                    color={folderColors[occurrence.folderUid]}
+                                    onSelect={onSelectEvent}
+                                    activeKey={activeKey}
+                                />
+                            ))}
+                        </ul>
+                    </section>
+                ))
+            )}
+        </div>
+    );
+}
+
+function ListRow({
+    occurrence,
+    day,
+    color,
+    onSelect,
+    activeKey,
+}: {
+    occurrence: CalendarOccurrence;
+    day: Date;
+    color: string;
+    onSelect: (occurrence: CalendarOccurrence) => void;
+    activeKey: string | null;
+}) {
+    const marker = occurrenceMarker(activeKey, occurrence);
+    const place = occurrence.location || occurrence.organizer.displayName || occurrence.organizer.address;
+    return (
+        <li className="border-b border-border/50">
+            <button
+                type="button"
+                {...marker.attrs}
+                onClick={() => onSelect(occurrence)}
+                className={["w-full min-h-14 px-4 py-2 flex items-center gap-3 text-left hover:bg-surface-alt", marker.className].join(" ")}
+            >
+                <span className="w-28 shrink-0 text-xs text-text-muted">{timeLabel(occurrence, day)}</span>
+                <span
+                    aria-hidden="true"
+                    className={["w-3 h-3 rounded-full shrink-0", occurrence.busyStatus === "free" ? "border-2" : ""].join(" ")}
+                    style={occurrence.busyStatus === "free" ? { borderColor: color } : { backgroundColor: color }}
+                />
+                <span className="flex-1 min-w-0">
+                    <span className="block text-sm font-medium truncate">{occurrence.title}</span>
+                    <span className="block text-xs text-text-muted truncate">{place}</span>
+                </span>
+            </button>
+        </li>
+    );
+}

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

@@ -8,6 +8,7 @@ import { addDays, eachDayOfInterval, endOfMonth, endOfWeek, format, isSameMonth,
 import { dayDropId, eventDragId } 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";
 
 const MAX_CHIPS_PER_DAY = 3;
@@ -63,7 +64,13 @@ interface DayCellProps {
 
 function DayCell({ day, inCurrentMonth, occurrences, folderColors, onSelectDay, onSelectEvent, onSelectSlot }: DayCellProps) {
     const { setNodeRef, isOver } = useDroppable({ id: dayDropId(day) });
-    const visible = occurrences.slice(0, MAX_CHIPS_PER_DAY);
+    const activeKey = useActiveOccurrenceKey();
+    // The search's current result is always shown, even when it would be one of the "+N more".
+    const activeIndex = occurrences.findIndex((occ) => occ.occurrenceKey === activeKey);
+    const visible =
+        activeIndex >= MAX_CHIPS_PER_DAY
+            ? [...occurrences.slice(0, MAX_CHIPS_PER_DAY - 1), occurrences[activeIndex]]
+            : occurrences.slice(0, MAX_CHIPS_PER_DAY);
     const overflowCount = occurrences.length - visible.length;
 
     return (
@@ -136,10 +143,12 @@ function EventChip({
 }) {
     const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
     const isFree = occurrence.busyStatus === "free";
+    const marker = occurrenceMarker(useActiveOccurrenceKey(), occurrence);
 
     return (
         <button
             ref={setNodeRef}
+            {...marker.attrs}
             type="button"
             onClick={() => onSelect(occurrence)}
             style={{
@@ -150,6 +159,7 @@ function EventChip({
                 "text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0",
                 isFree ? "bg-surface-alt text-text-muted" : "",
                 isDragging ? "opacity-50" : "",
+                marker.className,
             ].join(" ")}
             {...listeners}
             {...attributes}
@@ -172,12 +182,14 @@ function ContinuationChip({
     onSelect: (occurrence: CalendarOccurrence) => void;
 }) {
     const isFree = occurrence.busyStatus === "free";
+    const marker = occurrenceMarker(useActiveOccurrenceKey(), occurrence);
     return (
         <button
             type="button"
+            {...marker.attrs}
             onClick={() => onSelect(occurrence)}
             style={isFree ? undefined : { backgroundColor: color, color: "#fff" }}
-            className={["text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0", isFree ? "bg-surface-alt text-text-muted" : ""].join(" ")}
+            className={["text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0", isFree ? "bg-surface-alt text-text-muted" : "", marker.className].join(" ")}
         >
             {occurrence.title}
         </button>

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

@@ -0,0 +1,47 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ReactNode, useLayoutEffect, useRef } from "react";
+import { prefersReducedMotion } from "../../gestures/useEnterSlide.js";
+
+/** The side a card slides in from: the Previous match's comes from the left, the Next match's from the right. */
+export type SlideFrom = "left" | "right";
+
+/** How long the card takes to settle, and how far off it starts, in px. */
+export const SLIDE_IN_MS = 220;
+const SLIDE_IN_OFFSET_PX = 48;
+
+/**
+ * Slides what it holds in from `from` (and fades it in) as it mounts - mount it afresh (a `key`) for each card. Without `from` (the card was just
+ * opened, not stepped to) nothing moves. The animation is the Web Animations API's, so nothing is left behind in the styles, and it is skipped
+ * for someone who asked for less motion and where the browser has no `Element.animate()`. `data-slide-from` says which way it came, for tests and
+ * styling. Its own clip (`overflow-x-clip`, which makes no scroller) keeps the sliding card inside the dialog's edges; the dialog itself, the
+ * backdrop and the buttons beside the card are not moved.
+ */
+export default function SlideIn({ from, children }: { from?: SlideFrom; children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        const element = ref.current!;
+        if (!from || typeof element.animate !== "function" || prefersReducedMotion()) {
+            return;
+        }
+        const offset = from === "left" ? -SLIDE_IN_OFFSET_PX : SLIDE_IN_OFFSET_PX;
+        element.animate(
+            [
+                { transform: `translateX(${offset}px)`, opacity: 0 },
+                { transform: "translateX(0)", opacity: 1 },
+            ],
+            { duration: SLIDE_IN_MS, easing: "ease-out" },
+        );
+    }, []);
+
+    return (
+        <div className="overflow-x-clip">
+            <div ref={ref} data-slide-from={from}>
+                {children}
+            </div>
+        </div>
+    );
+}

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

@@ -6,6 +6,7 @@ import React from "react";
 import { addDays, 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";
 
 const HOUR_HEIGHT_PX = 48;
@@ -91,6 +92,7 @@ function SplitColumn({
     onSelectEvent: (occurrence: CalendarOccurrence) => void;
     onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
 }) {
+    const activeKey = useActiveOccurrenceKey();
     return (
         <div className="flex-1 min-w-0 relative border-l border-border">
             {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
@@ -117,9 +119,11 @@ function SplitColumn({
                 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 isFree = occurrence.busyStatus === "free";
+                const marker = occurrenceMarker(activeKey, occurrence);
                 return (
                     <div
                         key={occurrence.occurrenceKey}
+                        {...marker.attrs}
                         onClick={() => onSelectEvent(occurrence)}
                         style={{
                             position: "absolute",
@@ -132,6 +136,7 @@ function SplitColumn({
                         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>

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

@@ -8,6 +8,7 @@ import { addDays, 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";
 
 const HOUR_HEIGHT_PX = 48;
@@ -34,6 +35,7 @@ export interface TimeGridViewProps {
 export default function TimeGridView({ days, occurrences, folderColors, onSelectEvent, onSelectSlot }: TimeGridViewProps) {
     const allDayEvents = occurrences.filter((occ) => occ.allDay);
     const timedEvents = occurrences.filter((occ) => !occ.allDay);
+    const activeKey = useActiveOccurrenceKey();
 
     return (
         <div data-calendar-scroller className="flex-1 flex flex-col min-h-0 overflow-y-auto">
@@ -55,17 +57,21 @@ export default function TimeGridView({ days, occurrences, folderColors, onSelect
                         <div key={day.toISOString()} className="flex-1 min-w-0 p-1 flex flex-col gap-0.5 border-l border-border">
                             {allDayEvents
                                 .filter((occ) => occursOnDay(occ, day))
-                                .map((occ) => (
-                                    <button
-                                        key={occ.occurrenceKey}
-                                        type="button"
-                                        onClick={() => onSelectEvent(occ)}
-                                        style={{ backgroundColor: folderColors[occ.folderUid], color: "#fff" }}
-                                        className="text-xs text-left truncate rounded-sm px-1.5 py-0.5"
-                                    >
-                                        {occ.title}
-                                    </button>
-                                ))}
+                                .map((occ) => {
+                                    const marker = occurrenceMarker(activeKey, occ);
+                                    return (
+                                        <button
+                                            key={occ.occurrenceKey}
+                                            type="button"
+                                            {...marker.attrs}
+                                            onClick={() => onSelectEvent(occ)}
+                                            style={{ backgroundColor: folderColors[occ.folderUid], color: "#fff" }}
+                                            className={["text-xs text-left truncate rounded-sm px-1.5 py-0.5", marker.className].join(" ")}
+                                        >
+                                            {occ.title}
+                                        </button>
+                                    );
+                                })}
                         </div>
                     ))}
                 </div>
@@ -175,11 +181,13 @@ function ContinuationBlock({
 }) {
     const isFree = occurrence.busyStatus === "free";
     const { top, height } = blockGeometry(occurrence, dayStart);
+    const marker = occurrenceMarker(useActiveOccurrenceKey(), occurrence);
     return (
         <div
+            {...marker.attrs}
             onClick={() => onSelect(occurrence)}
             style={{ position: "absolute", top, height, left: 2, right: 2, ...(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" : ""].join(" ")}
+            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>
         </div>
@@ -207,6 +215,7 @@ function EventBlock({
 
     const start = new Date(occurrence.startDate);
     const { top, height } = blockGeometry(occurrence, dayStart);
+    const marker = occurrenceMarker(useActiveOccurrenceKey(), occurrence);
     // The resize handle's own drag position has no live pixel preview (it only applies its ns-resize
     // affordance) — the actual new end time is computed from whichever slot it's dropped onto (see
     // `resolveDragAction`'s "resize" case), snapped to the grid rather than following the pointer
@@ -215,6 +224,7 @@ function EventBlock({
     return (
         <div
             ref={setNodeRef}
+            {...marker.attrs}
             onClick={() => onSelect(occurrence)}
             style={{
                 position: "absolute",
@@ -230,6 +240,7 @@ function EventBlock({
                 "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
                 isFree ? "bg-surface-alt text-text-muted" : "",
                 isDragging ? "opacity-50" : "",
+                marker.className,
             ].join(" ")}
             {...listeners}
             {...attributes}

package/apps/shared/components/calendar/activeOccurrence.ts

@@ -0,0 +1,28 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { createContext, useContext } from "react";
+import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
+
+/** The `occurrenceKey` of the search result the calendar is pointing at (`null`: none), for the views to mark - a context, so the month, week and split
+ * views and their many kinds of chip need no prop threaded through each. */
+export const ActiveOccurrenceContext = createContext<string | null>(null);
+
+/** The key of the occurrence the calendar's search is on. */
+export function useActiveOccurrenceKey(): string | null {
+    return useContext(ActiveOccurrenceContext);
+}
+
+/** What an occurrence's chip or block spreads on itself: `data-occurrence-key` (how the page finds it to scroll to) and, when it is the
+ * `activeKey` one, a ring and `data-active-match`. */
+export function occurrenceMarker(
+    activeKey: string | null,
+    occurrence: CalendarOccurrence,
+): { attrs: { "data-occurrence-key": string; "data-active-match"?: "true" }; className: string } {
+    const active = activeKey === occurrence.occurrenceKey;
+    return {
+        attrs: { "data-occurrence-key": occurrence.occurrenceKey, ...(active ? { "data-active-match": "true" as const } : undefined) },
+        className: active ? "ring-2 ring-text ring-offset-1 ring-offset-surface" : "",
+    };
+}

package/apps/shared/components/calendar/allDay.ts

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { format } from "date-fns";
+import { format, parseISO, startOfDay } from "date-fns";
 import { WeekdayCode } from "../../../../lib/calendar/calendarApi.js";
 import { CalendarOccurrence, toEventWallClock } from "../../../../lib/calendar/recurrence.js";
 
@@ -112,6 +112,21 @@ export function occursOnDay(occurrence: CalendarOccurrence, day: Date): boolean
     return start < dayEnd && end > dayStart;
 }
 
+/** Whether `occurrence` is on show on `today` (a local day) or later: it ends after that day begins, so one still running today counts and one that ended is not. */
+export function isUpcoming(occurrence: CalendarOccurrence, today: Date): boolean {
+    if (occurrence.allDay) {
+        const key = localDateKey(today);
+        return allDayDateKey(occurrence.endDate) > key || allDayDateKey(occurrence.startDate) >= key;
+    }
+    const dayStart = startOfDay(today);
+    return new Date(occurrence.endDate) > dayStart || new Date(occurrence.startDate) >= dayStart;
+}
+
+/** The local calendar day (midnight) `occurrence` starts on - the day a view shows to bring it into sight. */
+export function occurrenceDay(occurrence: CalendarOccurrence): Date {
+    return occurrence.allDay ? parseISO(allDayDateKey(occurrence.startDate)) : startOfDay(new Date(occurrence.startDate));
+}
+
 /**
  * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
  * draggable — a drag id must be unique, so the continuation copies on later days are display-only.

package/apps/shared/components/calendar/calendarView.ts

@@ -0,0 +1,41 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The calendar's views, and the one the reader last chose - kept in `localStorage` so coming back to the Calendar from elsewhere in the app (or
+ * reopening it) lands on the same view, the way the mail list remembers its own arrangement (see `listPreferences.ts`). Per device, not synced.
+ * A read that finds nothing, something this client doesn't know or a blocked store gives `null`, and a write that fails is swallowed: the
+ * choice then only doesn't outlive the page.
+ */
+
+/** The views, in the order the switcher lists them: the List sits left of the Month. */
+export type CalendarView = "list" | "month" | "week" | "workWeek" | "day" | "split";
+export const CALENDAR_VIEWS: CalendarView[] = ["list", "month", "week", "workWeek", "day", "split"];
+
+const STORAGE_KEY = "rapidmx:calendar-view";
+
+/** Whether `value` names a view. */
+export function isCalendarView(value: unknown): value is CalendarView {
+    return (CALENDAR_VIEWS as unknown[]).includes(value);
+}
+
+/** The view last chosen, or `null` when none was (or it cannot be read). The calendar page does not restore a stored `"list"`: that view is the phone's
+ * default and is never written by a desktop. */
+export function getStoredCalendarView(): CalendarView | null {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        return isCalendarView(stored) ? stored : null;
+    } catch {
+        return null;
+    }
+}
+
+/** Remembers `view` as the one to open the Calendar on. */
+export function storeCalendarView(view: CalendarView): void {
+    try {
+        localStorage.setItem(STORAGE_KEY, view);
+    } catch {
+        // A blocked store only means the choice does not outlive the page.
+    }
+}

package/apps/shared/components/layout/AppShell.tsx

@@ -22,6 +22,7 @@ import ComposeProvider from "../mail/compose/ComposeContext.js";
 import ContactCardProvider from "../contacts/ContactCardProvider.js";
 import { flushComposeDrafts, markSigningOut } from "../mail/compose/composeFlushRegistry.js";
 import BottomTabBar, { NavItem } from "../../../../lib/components/navigation/BottomTabBar.js";
+import NavBadge, { navItemLabel } from "../../../../lib/components/navigation/NavBadge.js";
 import { FrameBrandingFooter, FrameBrandingHeader, useBrandingHtml } from "./BrandingChrome.js";
 import RailIcon from "./RailIcon.js";
 import AppearanceProvider from "../../appearance/AppearanceProvider.js";
@@ -323,7 +324,10 @@ export function AppChrome({
     }, [fetchedBranding?.title, inFrame]);
     // The router sets the document's title to the page's own whenever the page changes, which drops the unread count this puts in front
     // of it, so a new pathname is what puts the count back. (A folder change is shallow and keeps the title.)
-    useUnreadTitle(inboxUnreadTotal(mail.mailboxFolders, mail.folderCounts.counts), { enabled: inFrame, resetKey: pathname });
+    // The same count is the chip on the Mail icon (rail and bottom tab bar). It is zero - no chip - until the folders are listed, with no
+    // mailbox, and wherever the connection is off, so nothing shows when mail isn't available.
+    const unreadTotal = inboxUnreadTotal(mail.mailboxFolders, mail.folderCounts.counts);
+    useUnreadTitle(unreadTotal, { enabled: inFrame, resetKey: pathname });
 
     // Plugin rail entries that depend on the user (the meet plugin's personal room) are asked for once they are signed in.
     const resolvedRail = useResolvedRailItems(pluginNav?.appRail, userUid);
@@ -332,7 +336,7 @@ export function AppChrome({
         return <div className="min-h-screen" />;
     }
 
-    const apps = appRailItems(pluginNav, resolvedRail);
+    const apps = appRailItems(pluginNav, resolvedRail).map((app) => (app.id === "mail" ? { ...app, badge: unreadTotal } : app));
     // The header title: "settings" has no rail item, everything else is labelled by its own rail item.
     const activeLabel = active === "settings" ? "Settings" : apps.find((app) => app.id === active)?.label;
     // A custom header (`Branding.headerHtml`) replaces the app's own title bar and the icon at the top of the rail: it is the top of the app, and the
@@ -414,13 +418,13 @@ export function AppChrome({
                         {!customHeader && (
                             <RailIcon src={iconSrc} />
                         )}
-                        {apps.map(({ id, href, label, icon: Icon }) => (
+                        {apps.map(({ id, href, label, icon: Icon, badge }) => (
                             <a
                                 key={id}
                                 href={href}
-                                aria-label={label}
+                                aria-label={navItemLabel(label, badge)}
                                 aria-current={id === active ? "page" : undefined}
-                                title={label}
+                                title={navItemLabel(label, badge)}
                                 className={[
                                     "w-10 h-10 flex items-center justify-center rounded-sm",
                                     id === active
@@ -428,7 +432,10 @@ export function AppChrome({
                                         : "text-text-muted hover:bg-surface-alt hover:text-text",
                                 ].join(" ")}
                             >
-                                <Icon size={20} aria-hidden="true" />
+                                <span className="relative inline-flex">
+                                    <Icon size={20} aria-hidden="true" />
+                                    <NavBadge count={badge} />
+                                </span>
                             </a>
                         ))}
                     </nav>