@rapidmx/web-client 0.15.1 → 0.16.0

package/apps/shared/components/admin/usePagedList.tsx

@@ -1,129 +1,129 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useRef, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-
-/** Page size for the async-request lists (the server returns them newest first and caps `limit` at 500). */
-export const REQUEST_LIST_PAGE_SIZE = 50;
-
-export interface PagedList<T> {
-    items: T[];
-    /** `true` until the first page has loaded (or failed). */
-    loading: boolean;
-    loadError: string | null;
-    /** Whether the last page fetched was full, so another may follow. */
-    hasMore: boolean;
-    loadingMore: boolean;
-    /** Re-fetches from the first page, dropping anything loaded beyond it. */
-    reload: () => Promise<void>;
-    /** Fetches the next page and appends what's new in it. */
-    loadMore: () => Promise<void>;
-    /** Replaces one already-loaded item in place (e.g. with an action's response). */
-    replaceItem: (item: T) => void;
-}
-
-/**
- * A newest-first list fetched a page at a time with "Load more". Only the most recently started `reload()`'s
- * responses are applied, so a slow earlier fetch (e.g. the mount fetch racing a reload after a create) can't
- * overwrite a newer list, and a "Load more" that was in flight during a reload is dropped.
- *
- * Paging is by offset, so "Load more" re-reads the previous page alongside the next one and continues after the last
- * row already shown: rows created since shift older rows onto later pages (repeats are skipped), and rows deleted
- * since shift them onto earlier pages (which a plain next-page fetch would silently skip). If that row can't be found
- * in the two pages at all (it was deleted, or more than a page of rows came or went), the list reloads from the start.
- */
-export function usePagedList<T extends { uid: string }>(
-    fetchPage: (params: { limit: number; page: number }) => Promise<T[]>,
-    errorMessage: string,
-): PagedList<T> {
-    const pageSize = REQUEST_LIST_PAGE_SIZE;
-    const [items, setItems] = useState<T[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [loadError, setLoadError] = useState<string | null>(null);
-    const [hasMore, setHasMore] = useState(false);
-    const [loadingMore, setLoadingMore] = useState(false);
-    const generation = useRef(0);
-    const nextPage = useRef(0);
-    const loaded = useRef<T[]>(items);
-    loaded.current = items;
-
-    function describe(err: unknown): string {
-        return err instanceof ApiRequestError ? err.message : errorMessage;
-    }
-
-    async function reload() {
-        const current = ++generation.current;
-        try {
-            const data = await fetchPage({ limit: pageSize, page: 0 });
-            if (current !== generation.current) return;
-            setItems(data);
-            setHasMore(data.length === pageSize);
-            setLoadError(null);
-            nextPage.current = 1;
-        } catch (err) {
-            if (current === generation.current) setLoadError(describe(err));
-        } finally {
-            if (current === generation.current) setLoading(false);
-        }
-    }
-
-    async function loadMore() {
-        const current = generation.current;
-        const page = nextPage.current;
-        setLoadingMore(true);
-        try {
-            const [previous, data] = await Promise.all([
-                fetchPage({ limit: pageSize, page: page - 1 }),
-                fetchPage({ limit: pageSize, page }),
-            ]);
-            if (current !== generation.current) return;
-            const window: T[] = [...previous, ...data];
-            // "Load more" is only offered after a full page, so at least one row is shown.
-            const lastShown: string = loaded.current[loaded.current.length - 1].uid;
-            const boundary: number = window.map((item) => item.uid).lastIndexOf(lastShown);
-            if (boundary === -1) {
-                await reload();
-                return;
-            }
-            const after: T[] = window.slice(boundary + 1);
-            setItems((prev) => [...prev, ...after.filter((item) => !prev.some((existing) => existing.uid === item.uid))]);
-            setHasMore(data.length === pageSize);
-            setLoadError(null);
-            nextPage.current = page + 1;
-        } catch (err) {
-            if (current === generation.current) setLoadError(describe(err));
-        } finally {
-            setLoadingMore(false);
-        }
-    }
-
-    function replaceItem(item: T) {
-        setItems((prev) => prev.map((existing) => (existing.uid === item.uid ? item : existing)));
-    }
-
-    return { items, loading, loadError, hasMore, loadingMore, reload, loadMore, replaceItem };
-}
-
-/** The "Load more" button for a `usePagedList()` list - renders nothing once there's nothing more to load. */
-export function LoadMoreButton({ list, label }: { list: Pick<PagedList<unknown>, "hasMore" | "loadingMore" | "loadMore">; label: string }) {
-    if (!list.hasMore) {
-        return null;
-    }
-    return (
-        <div className="mt-3">
-            <Button
-                type="button"
-                variant="secondary"
-                className="!w-auto"
-                loading={list.loadingMore}
-                disabled={list.loadingMore}
-                onClick={() => void list.loadMore()}
-            >
-                {label}
-            </Button>
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+/** Page size for the async-request lists (the server returns them newest first and caps `limit` at 500). */
+export const REQUEST_LIST_PAGE_SIZE = 50;
+
+export interface PagedList<T> {
+    items: T[];
+    /** `true` until the first page has loaded (or failed). */
+    loading: boolean;
+    loadError: string | null;
+    /** Whether the last page fetched was full, so another may follow. */
+    hasMore: boolean;
+    loadingMore: boolean;
+    /** Re-fetches from the first page, dropping anything loaded beyond it. */
+    reload: () => Promise<void>;
+    /** Fetches the next page and appends what's new in it. */
+    loadMore: () => Promise<void>;
+    /** Replaces one already-loaded item in place (e.g. with an action's response). */
+    replaceItem: (item: T) => void;
+}
+
+/**
+ * A newest-first list fetched a page at a time with "Load more". Only the most recently started `reload()`'s
+ * responses are applied, so a slow earlier fetch (e.g. the mount fetch racing a reload after a create) can't
+ * overwrite a newer list, and a "Load more" that was in flight during a reload is dropped.
+ *
+ * Paging is by offset, so "Load more" re-reads the previous page alongside the next one and continues after the last
+ * row already shown: rows created since shift older rows onto later pages (repeats are skipped), and rows deleted
+ * since shift them onto earlier pages (which a plain next-page fetch would silently skip). If that row can't be found
+ * in the two pages at all (it was deleted, or more than a page of rows came or went), the list reloads from the start.
+ */
+export function usePagedList<T extends { uid: string }>(
+    fetchPage: (params: { limit: number; page: number }) => Promise<T[]>,
+    errorMessage: string,
+): PagedList<T> {
+    const pageSize = REQUEST_LIST_PAGE_SIZE;
+    const [items, setItems] = useState<T[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState<string | null>(null);
+    const [hasMore, setHasMore] = useState(false);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const generation = useRef(0);
+    const nextPage = useRef(0);
+    const loaded = useRef<T[]>(items);
+    loaded.current = items;
+
+    function describe(err: unknown): string {
+        return err instanceof ApiRequestError ? err.message : errorMessage;
+    }
+
+    async function reload() {
+        const current = ++generation.current;
+        try {
+            const data = await fetchPage({ limit: pageSize, page: 0 });
+            if (current !== generation.current) return;
+            setItems(data);
+            setHasMore(data.length === pageSize);
+            setLoadError(null);
+            nextPage.current = 1;
+        } catch (err) {
+            if (current === generation.current) setLoadError(describe(err));
+        } finally {
+            if (current === generation.current) setLoading(false);
+        }
+    }
+
+    async function loadMore() {
+        const current = generation.current;
+        const page = nextPage.current;
+        setLoadingMore(true);
+        try {
+            const [previous, data] = await Promise.all([
+                fetchPage({ limit: pageSize, page: page - 1 }),
+                fetchPage({ limit: pageSize, page }),
+            ]);
+            if (current !== generation.current) return;
+            const window: T[] = [...previous, ...data];
+            // "Load more" is only offered after a full page, so at least one row is shown.
+            const lastShown: string = loaded.current[loaded.current.length - 1].uid;
+            const boundary: number = window.map((item) => item.uid).lastIndexOf(lastShown);
+            if (boundary === -1) {
+                await reload();
+                return;
+            }
+            const after: T[] = window.slice(boundary + 1);
+            setItems((prev) => [...prev, ...after.filter((item) => !prev.some((existing) => existing.uid === item.uid))]);
+            setHasMore(data.length === pageSize);
+            setLoadError(null);
+            nextPage.current = page + 1;
+        } catch (err) {
+            if (current === generation.current) setLoadError(describe(err));
+        } finally {
+            setLoadingMore(false);
+        }
+    }
+
+    function replaceItem(item: T) {
+        setItems((prev) => prev.map((existing) => (existing.uid === item.uid ? item : existing)));
+    }
+
+    return { items, loading, loadError, hasMore, loadingMore, reload, loadMore, replaceItem };
+}
+
+/** The "Load more" button for a `usePagedList()` list - renders nothing once there's nothing more to load. */
+export function LoadMoreButton({ list, label }: { list: Pick<PagedList<unknown>, "hasMore" | "loadingMore" | "loadMore">; label: string }) {
+    if (!list.hasMore) {
+        return null;
+    }
+    return (
+        <div className="mt-3">
+            <Button
+                type="button"
+                variant="secondary"
+                className="!w-auto"
+                loading={list.loadingMore}
+                disabled={list.loadingMore}
+                onClick={() => void list.loadMore()}
+            >
+                {label}
+            </Button>
+        </div>
+    );
+}

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

@@ -201,6 +201,7 @@ export default function EventEditor({
             timezone: occurrence?.timezone ?? deviceZone,
             attendees: occurrence?.attendees ?? [],
             guestDraft: "",
+            guestInvalid: [],
             recurrenceRule: occurrence?.recurrenceRule ?? null,
             reminderMinutes: occurrence?.reminderMinutesBeforeStart?.toString() ?? "",
             busyStatus: occurrence?.busyStatus ?? "busy",
@@ -271,13 +272,8 @@ export default function EventEditor({
     // "This event only" detaches a standalone, non-repeating copy - the series' rule doesn't apply to it.
     const editingSingleOccurrence = !!occurrence?.isRecurringOccurrence && editScope === "occurrence";
 
-    dirtyRef.current = !!(values.title.trim() || values.location.trim() || values.attendees.length > 0 || values.guestDraft.trim() || hasDescriptionText(values.descriptionHtml));
+    dirtyRef.current = !!(values.title.trim() || values.location.trim() || values.attendees.length > 0 || values.guestDraft.trim() || values.guestInvalid.length > 0 || hasDescriptionText(values.descriptionHtml));
 
-    function addGuests(text: string): string[] {
-        const merged = mergeGuests(values.attendees, text);
-        update({ attendees: merged.attendees, guestDraft: merged.invalid.join(" ") });
-        return merged.invalid;
-    }
     function updateAttendee(index: number, patch: Partial<Attendee>) {
         setValues((prev) => ({ ...prev, attendees: prev.attendees.map((a, i) => (i === index ? { ...a, ...patch } : a)) }));
     }
@@ -466,8 +462,8 @@ export default function EventEditor({
             setError("A title is required.");
             return;
         }
-        // An address typed into the guests field but not added yet is added now - or, not being one, stops the save.
-        const merged = mergeGuests(values.attendees, values.guestDraft);
+        // An address typed into the guests field but not added yet is added now - or, not being one (nor what was already flagged there), stops the save.
+        const merged = mergeGuests(values.attendees, [...values.guestInvalid, values.guestDraft].join(", "), [effectiveOrganizerAddress]);
         if (merged.invalid.length > 0) {
             setError(`“${merged.invalid[0]}” isn’t a valid email address.`);
             return;
@@ -478,7 +474,7 @@ export default function EventEditor({
             return;
         }
         if (values.guestDraft) {
-            update({ attendees: merged.attendees, guestDraft: "" });
+            update({ attendees: merged.attendees, guestDraft: "", guestInvalid: [] });
         }
         let startDate: string;
         let endDate: string;
@@ -607,7 +603,6 @@ export default function EventEditor({
             values.timezone,
         ),
         editingSingleOccurrence,
-        addGuests,
         updateAttendee,
         removeAttendee,
         addResource,

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

@@ -6,6 +6,7 @@ import React, { ReactNode, useRef, useState } from "react";
 import { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineMapPin, HiOutlineUserGroup, HiOutlineVideoCamera, HiOutlineXMark } from "react-icons/hi2";
 import { AttendeeRole, EventVisibility, RecurrenceRule, WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import GuestInput from "./GuestInput.js";
 import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
 import RecurrenceEditor from "./RecurrenceEditor.js";
 import ResourcePicker from "./ResourcePicker.js";
@@ -103,63 +104,31 @@ export function VideoConferencingRow({ c }: { c: EventFormController }) {
 }
 
 /**
- * The guests field: an address box (Enter, a comma or a semicolon adds what is typed) and what has been added - chips in the quick popover,
- * rows with a role, the answer so far and a remove button in the full form, which also offers rooms and equipment.
+ * The guests field: compose's recipient field (`GuestInput`), which looks a name up among the contacts and the server's mailboxes and lists and
+ * turns what is picked, typed or pasted into chips - drawn in the field itself in the quick popover. In the full form the guests are rows with a
+ * role, the answer so far and a remove button instead (the field then draws only what is not an address), and rooms and equipment can be added.
  */
 export function GuestsField({ c, compact }: { c: EventFormController; compact: boolean }) {
     const { values } = c;
-    const [hint, setHint] = useState<string | null>(null);
     const [pickerOpen, setPickerOpen] = useState(false);
     const pickerAnchor = useRef<HTMLButtonElement>(null);
 
-    function commit() {
-        const invalid = c.addGuests(values.guestDraft);
-        setHint(invalid.length > 0 ? `“${invalid[0]}” isn’t a valid email address.` : null);
-    }
-
     return (
         <div className="flex flex-col gap-2">
-            <input
-                type="text"
-                aria-label="Add guests"
+            <GuestInput
+                id="event-guests"
+                label="Add guests"
                 placeholder="Add guests"
-                className={compact ? QUIET_INPUT_CLASS : INPUT_CLASS}
-                value={values.guestDraft}
-                onChange={(e) => {
-                    setHint(null);
-                    c.update({ guestDraft: e.target.value });
-                }}
-                onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === "," || e.key === ";") {
-                        e.preventDefault();
-                        commit();
-                    }
-                }}
+                variant={compact ? "quiet" : "box"}
+                listedElsewhere={!compact}
+                guests={values.attendees}
+                invalid={values.guestInvalid}
+                draft={values.guestDraft}
+                skipAddresses={[c.organizerAddress]}
+                mailboxUid={values.targetMailboxUid}
+                onChange={(next) => c.update({ attendees: next.guests, guestInvalid: next.invalid, guestDraft: next.draft })}
             />
-            {hint && (
-                <p role="alert" className="text-xs text-danger">
-                    {hint}
-                </p>
-            )}
-            {compact ? (
-                values.attendees.length > 0 && (
-                    <ul className="flex flex-wrap gap-1.5">
-                        {values.attendees.map((attendee, i) => (
-                            <li key={i} className="flex items-center gap-1 text-xs rounded-full bg-surface-alt pl-2.5 pr-1 py-0.5">
-                                <span className="truncate max-w-[16rem]">{attendee.address}</span>
-                                <button
-                                    type="button"
-                                    onClick={() => c.removeAttendee(i)}
-                                    className="w-4 h-4 flex items-center justify-center rounded-full text-text-muted hover:text-text"
-                                    aria-label={`Remove attendee ${i + 1}`}
-                                >
-                                    <HiOutlineXMark size={12} aria-hidden="true" />
-                                </button>
-                            </li>
-                        ))}
-                    </ul>
-                )
-            ) : (
+            {compact ? null : (
                 <>
                     {values.attendees.length > 0 && (
                         <ul className="flex flex-col gap-2">