@rapidmx/web-client 0.9.0 → 0.11.0

package/apps/www/calendar/index.tsx

@@ -2,6 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
+import { routedPage } from "../_routedPage.js";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { DndContext, DragEndEvent, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { HiOutlineBars3 } from "react-icons/hi2";
@@ -36,8 +37,12 @@ import SplitDayView from "../../shared/components/calendar/SplitDayView.js";
 import TimeGridView from "../../shared/components/calendar/TimeGridView.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { SHORTCUTS, ShortcutDef } from "../../shared/keyboard/keymap.js";
+import { useShortcut } from "../../shared/keyboard/useShortcut.js";
+import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
+import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 
-export default function CalendarPage(props: CalendarShellProps) {
+function CalendarPage(props: CalendarShellProps) {
     return (
         <CalendarShell {...props}>
             <CalendarContent userUid={props.userUid} />
@@ -48,6 +53,35 @@ export default function CalendarPage(props: CalendarShellProps) {
 type ViewType = "month" | "week" | "workWeek" | "day" | "split";
 const VIEW_TYPES: ViewType[] = ["month", "week", "workWeek", "day", "split"];
 const VIEW_LABELS: Record<ViewType, string> = { month: "Month", week: "Week", workWeek: "Work Week", day: "Day", split: "Split" };
+/** The shortcut that switches to a view (Outlook's Ctrl+Alt+1-4); the split view has none. */
+const VIEW_SHORTCUTS: Partial<Record<ViewType, ShortcutDef>> = {
+    day: SHORTCUTS.calendar.day,
+    workWeek: SHORTCUTS.calendar.workWeek,
+    week: SHORTCUTS.calendar.week,
+    month: SHORTCUTS.calendar.month,
+};
+
+/** One of the view switcher's buttons, with its shortcut in the tooltip. */
+function ViewButton({ view, current, onSelect }: { view: ViewType; current: ViewType; onSelect: (view: ViewType) => void }) {
+    const shortcut = VIEW_SHORTCUTS[view];
+    const hint = useShortcutProps(VIEW_LABELS[view], shortcut ?? SHORTCUTS.calendar.day, !!shortcut);
+    return (
+        <button
+            type="button"
+            onClick={() => onSelect(view)}
+            {...hint}
+            className={[
+                "px-3 h-7 text-sm rounded-sm whitespace-nowrap",
+                current === view ? "bg-primary text-white" : "hover:bg-surface-alt",
+                (view === "workWeek" || view === "split") && "hidden md:inline-block",
+            ]
+                .filter(Boolean)
+                .join(" ")}
+        >
+            {VIEW_LABELS[view]}
+        </button>
+    );
+}
 
 interface ModalState {
     occurrence: CalendarOccurrence | null;
@@ -76,7 +110,6 @@ function CalendarContent({ userUid }: { userUid?: string }) {
     const [events, setEvents] = useState<CalendarEvent[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
-    const [actionError, setActionError] = useState<string | null>(null);
     const [modal, setModal] = useState<ModalState | null>(null);
     // `null` means "not yet customized by the user" — every calendar is treated as checked without
     // needing to be seeded from `calendarFolders` the moment it loads (see `checkedFolderUids` below).
@@ -254,6 +287,20 @@ function CalendarContent({ userUid }: { userUid?: string }) {
         setModal(null);
     }
 
+    // Keyboard shortcuts - the toolbar's own actions. (A dialog open - the event editor - silences them.)
+    useShortcut(SHORTCUTS.calendar.create, () => openNewEvent(), { enabled: !!mailboxUid && !!folderUid });
+    useShortcut(SHORTCUTS.calendar.today, goToday);
+    useShortcut(SHORTCUTS.calendar.previous, () => shiftView(-1));
+    useShortcut(SHORTCUTS.calendar.next, () => shiftView(1));
+    useShortcut(SHORTCUTS.calendar.day, () => setView("day"));
+    useShortcut(SHORTCUTS.calendar.workWeek, () => setView("workWeek"));
+    useShortcut(SHORTCUTS.calendar.week, () => setView("week"));
+    useShortcut(SHORTCUTS.calendar.month, () => setView("month"));
+    const newEventHint = useShortcutProps("New event", SHORTCUTS.calendar.create, !!mailboxUid && !!folderUid);
+    const previousHint = useShortcutProps("Previous", SHORTCUTS.calendar.previous);
+    const todayHint = useShortcutProps("Today", SHORTCUTS.calendar.today);
+    const nextHint = useShortcutProps("Next", SHORTCUTS.calendar.next);
+
     function handleSaved() {
         setModal(null);
         reload();
@@ -270,7 +317,6 @@ function CalendarContent({ userUid }: { userUid?: string }) {
         if (!action) {
             return;
         }
-        setActionError(null);
         try {
             if (action.type === "move") {
                 await moveOccurrence(action.occurrence, action.deltaMs);
@@ -279,7 +325,7 @@ function CalendarContent({ userUid }: { userUid?: string }) {
             }
             reload();
         } catch (err) {
-            setActionError(err instanceof ApiRequestError ? err.message : "Could not update this event.");
+            notifyApiError(err, action.type === "move" ? "Couldn't move the event" : "Couldn't resize the event");
         }
     }
 
@@ -318,52 +364,40 @@ function CalendarContent({ userUid }: { userUid?: string }) {
     );
 
     return (
-        <div className="flex-1 flex min-h-0">
-            <div className="hidden md:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto">{sidebarContent}</div>
+        <div className="flex-1 min-w-0 flex min-h-0">
+            <div className="hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto">{sidebarContent}</div>
             <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Calendars">
                 <div className="flex flex-col">{sidebarContent}</div>
             </Drawer>
-            <div className="flex-1 flex flex-col min-h-0">
-                <div className="flex items-center gap-3 p-3 border-b border-border shrink-0">
+            {/* `min-w-0`: without it the column is as wide as its widest row (the toolbar, the month grid) and runs off the window instead of the row wrapping. */}
+            <div className="flex-1 min-w-0 flex flex-col min-h-0">
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-2 p-3 border-b border-border shrink-0">
                     <button
                         type="button"
-                        className="md:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0"
+                        className="lg:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0"
                         aria-label="Open calendars"
                         onClick={() => setDrawerOpen(true)}
                     >
                         <HiOutlineBars3 size={20} aria-hidden="true" />
                     </button>
-                    <Button type="button" onClick={() => openNewEvent()} className="!w-auto shrink-0">
+                    <Button type="button" onClick={() => openNewEvent()} className="!w-auto shrink-0" {...newEventHint}>
                         + New event
                     </Button>
                     <div className="flex items-center gap-1">
-                        <button type="button" onClick={() => shiftView(-1)} aria-label="Previous" className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt">
+                        <button type="button" onClick={() => shiftView(-1)} aria-label="Previous" {...previousHint} className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt">
                             &lsaquo;
                         </button>
-                        <button type="button" onClick={goToday} className="px-2 h-7 text-sm rounded-sm hover:bg-surface-alt">
+                        <button type="button" onClick={goToday} {...todayHint} className="px-2 h-7 text-sm rounded-sm hover:bg-surface-alt">
                             Today
                         </button>
-                        <button type="button" onClick={() => shiftView(1)} aria-label="Next" className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt">
+                        <button type="button" onClick={() => shiftView(1)} aria-label="Next" {...nextHint} className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt">
                             &rsaquo;
                         </button>
                     </div>
                     <h1 className="hidden md:block text-lg font-bold tracking-tight">{title}</h1>
-                    <div className="ml-auto flex gap-1 overflow-x-auto">
+                    <div className="ml-auto flex flex-wrap gap-1">
                         {VIEW_TYPES.map((v) => (
-                            <button
-                                key={v}
-                                type="button"
-                                onClick={() => setView(v)}
-                                className={[
-                                    "px-3 h-7 text-sm rounded-sm whitespace-nowrap",
-                                    view === v ? "bg-primary text-white" : "hover:bg-surface-alt",
-                                    (v === "workWeek" || v === "split") && "hidden md:inline-block",
-                                ]
-                                    .filter(Boolean)
-                                    .join(" ")}
-                            >
-                                {VIEW_LABELS[v]}
-                            </button>
+                            <ViewButton key={v} view={v} current={view} onSelect={setView} />
                         ))}
                     </div>
                 </div>
@@ -373,11 +407,6 @@ function CalendarContent({ userUid }: { userUid?: string }) {
                         <Alert>{error}</Alert>
                     </div>
                 )}
-                {actionError && (
-                    <div className="p-3">
-                        <Alert>{actionError}</Alert>
-                    </div>
-                )}
 
                 {loading ? (
                     <p className="p-4 text-sm text-text-muted">Loading&hellip;</p>
@@ -436,3 +465,5 @@ function CalendarContent({ userUid }: { userUid?: string }) {
         </div>
     );
 }
+
+export default routedPage("/calendar", CalendarPage);

package/apps/www/contacts/[uid].tsx

@@ -1,107 +1,109 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { Contact, deleteContact, getContact } from "@rapidmx/react-shared/contacts/contactsApi.js";
-import ContactsShell, { ContactsShellProps } from "../../shared/components/contacts/layout/ContactsShell.js";
-import ContactDetailPane from "../../shared/components/contacts/ContactDetailPane.js";
-import ContactForm from "../../shared/components/contacts/ContactForm.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigners.js";
-
-/**
- * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/contacts/index.tsx` keeps its
- * existing inline detail pane and never navigates here; see that file's `handleSelectRow`. There is no
- * equivalent "new contact" route — an unsaved contact has no uid to route on, so creation stays an
- * in-place mode-switch on every device (see `apps/www/contacts/index.tsx`'s `handleNew`).
- */
-export default function ContactDetailPage(props: ContactsShellProps & { params: { uid: string } }) {
-    return (
-        <ContactsShell {...props}>
-            <ContactDetailContent uid={props.params.uid} />
-        </ContactsShell>
-    );
-}
-
-type Mode = "view" | "edit";
-
-function ContactDetailContent({ uid }: { uid: string }) {
-    const [contact, setContact] = useState<Contact | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-    // Kept apart from the load `error` - a failed delete must leave the contact on screen (with the
-    // reason) rather than replacing the whole page with an error as if it had never loaded.
-    const [deleteError, setDeleteError] = useState<string | null>(null);
-    const [mode, setMode] = useState<Mode>("view");
-
-    useEffect(() => {
-        setLoading(true);
-        setError(null);
-        getContact(uid)
-            .then(setContact)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this contact."))
-            .finally(() => setLoading(false));
-    }, [uid]);
-
-    // Takes `contact` as a parameter rather than reading it from the closure/state — mirrors the desktop
-    // pane's own `handleDelete` in `apps/www/contacts/index.tsx`. The only caller (below) is only ever
-    // rendered once `contact` is already resolved (see the `error || !contact` guard above it), so this
-    // never runs with a stale/absent contact — no redundant null check needed here.
-    async function handleDelete(contact: Contact) {
-        setDeleteError(null);
-        try {
-            await deleteContact(contact.uid, contact.version);
-            // A deleted contact's pinned signing keys must stop vouching for signatures.
-            clearPinnedSignerCache();
-            window.location.href = "/contacts";
-        } catch (err) {
-            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this contact.");
-        }
-    }
-
-    // After a key change was resolved (or found stale): re-read the contact, keeping the one shown if that fails.
-    function handleKeysChanged() {
-        getContact(uid).then(setContact, () => undefined);
-    }
-
-    if (loading) {
-        return <p className="p-8 text-sm text-text-muted">Loading&hellip;</p>;
-    }
-    if (error || !contact) {
-        return <Alert>{error ?? "Contact not found."}</Alert>;
-    }
-
-    const backHref = "/contacts";
-    if (mode === "edit") {
-        return (
-            <div className="p-6">
-                <a href={backHref} className="text-sm text-primary-dark hover:underline block mb-4">
-                    &larr; Back to contacts
-                </a>
-                <ContactForm
-                    contact={contact}
-                    onSaved={(saved) => {
-                        setContact(saved);
-                        setMode("view");
-                    }}
-                    onCancel={() => setMode("view")}
-                />
-            </div>
-        );
-    }
-
-    return (
-        <div className="p-6">
-            {deleteError && <Alert>{deleteError}</Alert>}
-            <ContactDetailPane
-                contact={contact}
-                onEdit={() => setMode("edit")}
-                onDelete={() => handleDelete(contact)}
-                backHref={backHref}
-                onKeysChanged={handleKeysChanged}
-            />
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { routedPage } from "../_routedPage.js";
+import { useNavigate } from "../../shared/navigation/AppRouter.js";
+import React, { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { Contact, deleteContact, getContact } from "@rapidmx/react-shared/contacts/contactsApi.js";
+import ContactsShell, { ContactsShellProps } from "../../shared/components/contacts/layout/ContactsShell.js";
+import ContactDetailPane from "../../shared/components/contacts/ContactDetailPane.js";
+import ContactForm from "../../shared/components/contacts/ContactForm.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigners.js";
+import { notifyApiError } from "../../shared/notifications/apiErrors.js";
+
+/**
+ * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/contacts/index.tsx` keeps its
+ * existing inline detail pane and never navigates here; see that file's `handleSelectRow`. There is no
+ * equivalent "new contact" route — an unsaved contact has no uid to route on, so creation stays an
+ * in-place mode-switch on every device (see `apps/www/contacts/index.tsx`'s `handleNew`).
+ */
+function ContactDetailPage(props: ContactsShellProps & { params: { uid: string } }) {
+    return (
+        <ContactsShell {...props}>
+            <ContactDetailContent uid={props.params.uid} />
+        </ContactsShell>
+    );
+}
+
+type Mode = "view" | "edit";
+
+function ContactDetailContent({ uid }: { uid: string }) {
+    const navigate = useNavigate();
+    const [contact, setContact] = useState<Contact | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [mode, setMode] = useState<Mode>("view");
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getContact(uid)
+            .then(setContact)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this contact."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+
+    // Takes `contact` as a parameter rather than reading it from the closure/state — mirrors the desktop
+    // pane's own `handleDelete` in `apps/www/contacts/index.tsx`. The only caller (below) is only ever
+    // rendered once `contact` is already resolved (see the `error || !contact` guard above it), so this
+    // never runs with a stale/absent contact — no redundant null check needed here.
+    async function handleDelete(contact: Contact) {
+        try {
+            await deleteContact(contact.uid, contact.version);
+            // A deleted contact's pinned signing keys must stop vouching for signatures.
+            clearPinnedSignerCache();
+            navigate("/contacts");
+        } catch (err) {
+            // A pop-up: a failed delete leaves the contact on screen rather than replacing the page with an error.
+            notifyApiError(err, "Couldn't delete the contact");
+        }
+    }
+
+    // After a key change was resolved (or found stale): re-read the contact, keeping the one shown if that fails.
+    function handleKeysChanged() {
+        getContact(uid).then(setContact, () => undefined);
+    }
+
+    if (loading) {
+        return <p className="p-8 text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (error || !contact) {
+        return <Alert>{error ?? "Contact not found."}</Alert>;
+    }
+
+    const backHref = "/contacts";
+    if (mode === "edit") {
+        return (
+            <div>
+                <a href={backHref} className="text-sm text-primary-dark hover:underline block px-6 pt-6">
+                    &larr; Back to contacts
+                </a>
+                <ContactForm
+                    contact={contact}
+                    onSaved={(saved) => {
+                        setContact(saved);
+                        setMode("view");
+                    }}
+                    onCancel={() => setMode("view")}
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-6">
+            <ContactDetailPane
+                contact={contact}
+                onEdit={() => setMode("edit")}
+                onDelete={() => handleDelete(contact)}
+                backHref={backHref}
+                onKeysChanged={handleKeysChanged}
+            />
+        </div>
+    );
+}
+
+export default routedPage("/contacts/:uid", ContactDetailPage);