@rapidmx/web-client 0.8.0 → 0.10.0

package/apps/shared/components/mail/LazyReadingPane.tsx

@@ -0,0 +1,115 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ComponentType, useEffect, useState } from "react";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import type MessageDetailPaneType from "./MessageDetailPane.js";
+import type ConversationThreadPaneType from "./ConversationThreadPane.js";
+
+/**
+ * The reading pane (`MessageDetailPane`, and the thread pane that stacks it) is only rendered once a message is selected, and
+ * it is the heaviest piece of the inbox after the compose window - message security, the body sanitizer, the labels and move
+ * menus - so it is a chunk of its own, downloaded when the browser is idle after the list has loaded (`prefetchReadingPane()`)
+ * and, at the latest, on the first selection. Nothing about the pane changes: these wrap the same components, with a skeleton
+ * while the chunk loads and a reload prompt if it can't.
+ *
+ * Deliberately not `React.lazy()` + `<Suspense>`: a boundary that has shown its fallback holds the content back for up to 300 ms
+ * after the code arrives (React's fallback throttle), which would put a fifth of a second between a click and a pane whose
+ * code was already fetched. This reads the loaded component synchronously when there is one, so an already-loaded pane renders
+ * on the click's own frame, and it can retry a failed download.
+ */
+function lazyComponent<P extends object>(load: () => Promise<{ default: ComponentType<P> }>) {
+    let loaded: ComponentType<P> | undefined;
+    let loading: Promise<ComponentType<P>> | undefined;
+
+    /** Starts (once) loading the component's code. Rejects if it can't be downloaded - and then a later call tries again. */
+    function start(): Promise<ComponentType<P>> {
+        loading ??= load().then(
+            (module) => (loaded = module.default),
+            (err) => {
+                loading = undefined;
+                throw err;
+            },
+        );
+        return loading;
+    }
+
+    function Lazy(props: P) {
+        const [, setLoadedNow] = useState(0);
+        const [failed, setFailed] = useState(false);
+        useEffect(() => {
+            if (loaded) {
+                return;
+            }
+            let cancelled = false;
+            start().then(
+                () => !cancelled && setLoadedNow((n) => n + 1),
+                () => !cancelled && setFailed(true),
+            );
+            return () => {
+                cancelled = true;
+            };
+        }, []);
+        if (loaded) {
+            const Component = loaded;
+            return <Component {...props} />;
+        }
+        return failed ? <ChunkFailed /> : <PaneSkeleton />;
+    }
+
+    return { Lazy, start };
+}
+
+function PaneSkeleton() {
+    return (
+        <div role="status" aria-busy="true" className="flex-1 p-6 flex flex-col gap-3">
+            <span className="sr-only">Loading the message</span>
+            <Skeleton width="w-2/3" height="h-6" />
+            <Skeleton width="w-1/3" />
+            <Skeleton height="h-40" />
+        </div>
+    );
+}
+
+/** A chunk that can't be downloaded (offline, or replaced by a deploy since this page loaded) is the one failure a reading
+ * pane can't recover from by itself: say so, with the fix, rather than leaving a blank pane. */
+function ChunkFailed() {
+    return (
+        <div className="flex-1 p-6">
+            <Alert>
+                <p className="mb-2">This part of the page couldn&rsquo;t be loaded. Check your connection, then reload.</p>
+                <Button type="button" variant="secondary" className="!w-auto" onClick={() => window.location.reload()}>
+                    Reload
+                </Button>
+            </Alert>
+        </div>
+    );
+}
+
+const messageDetailPane = lazyComponent<React.ComponentProps<typeof MessageDetailPaneType>>(() => import("./MessageDetailPane.js"));
+const conversationThreadPane = lazyComponent<React.ComponentProps<typeof ConversationThreadPaneType>>(() => import("./ConversationThreadPane.js"));
+
+/** Starts downloading the reading pane's code, for the page to call when it has nothing better to do. Never rejects. */
+export function prefetchReadingPane(): void {
+    messageDetailPane.start().catch(() => undefined);
+    conversationThreadPane.start().catch(() => undefined);
+}
+
+/** With nothing selected the pane is only its empty-state line, which needs none of the pane's code - so the chunk isn't
+ * requested until something is (or the page prefetches it). */
+export function LazyMessageDetailPane(props: React.ComponentProps<typeof MessageDetailPaneType>) {
+    if (!props.message) {
+        return <p className="p-8 text-sm text-text-muted">Select a message to read it.</p>;
+    }
+    return <messageDetailPane.Lazy {...props} />;
+}
+
+export function LazyConversationThreadPane(props: React.ComponentProps<typeof ConversationThreadPaneType>) {
+    if (!props.conversation) {
+        return <p className="p-8 text-sm text-text-muted">Select a conversation to read it.</p>;
+    }
+    return <conversationThreadPane.Lazy {...props} />;
+}

package/apps/shared/components/mail/MailAddress.tsx

@@ -0,0 +1,88 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useState } from "react";
+import { MailAddressLike, formatMailAddress, splitMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
+
+export interface MailAddressProps {
+    /** A message's `from`, a recipient, a conversation participant. */
+    recipient: MailAddressLike;
+    className?: string;
+}
+
+/**
+ * A sender or recipient as one compact line for a dense row: the name, when there is one, with the real address in muted
+ * type after it - `Jean-Philippe  <jp@example.com>` - or the bare address without a name. The address is never left out,
+ * and when the row is too narrow for both the name gives way first (it shrinks a thousand times faster), then the
+ * address's own local part - the `@domain`, which is what says who really sent it, keeps its room to the end. The full
+ * `Name <address>` is the tooltip and, once, the accessible text (the two visible halves are hidden from assistive
+ * technology), so a screen reader hears one address, not fragments.
+ */
+export default function MailAddress({ recipient, className }: MailAddressProps) {
+    const { name, address } = splitMailAddress(recipient);
+    const full = formatMailAddress(recipient);
+    const at = address.lastIndexOf("@");
+    const local = at > 0 ? address.slice(0, at) : address;
+    const domain = at > 0 ? address.slice(at) : "";
+    return (
+        <span className={["flex min-w-0 items-baseline gap-1.5", className].filter(Boolean).join(" ")} title={full}>
+            <span className="sr-only">{full}</span>
+            {name && (
+                <span aria-hidden="true" className="truncate min-w-0" style={{ flexShrink: 1000 }}>
+                    {name}
+                </span>
+            )}
+            <span
+                aria-hidden="true"
+                className={["flex min-w-0 items-baseline", name ? "text-xs font-normal text-text-muted" : ""].filter(Boolean).join(" ")}
+            >
+                {name && <span>&lt;</span>}
+                <span className="truncate min-w-0">{local}</span>
+                {domain && <span className="shrink-0">{domain}</span>}
+                {name && <span>&gt;</span>}
+            </span>
+        </span>
+    );
+}
+
+/** How many recipients a `RecipientLine` shows before folding the rest behind "and N more". */
+export const RECIPIENT_LINE_LIMIT = 3;
+
+/**
+ * A `To`/`Cc` line of a message header: every recipient as `Name <address>` in the text itself (never hover-only), wrapping
+ * onto more lines as needed. A long list shows its first `RECIPIENT_LINE_LIMIT` and folds the rest behind a button -
+ * "and 12 more" / "Show fewer" - so a message to a hundred people doesn't take the whole header. Nothing when empty.
+ */
+export function RecipientLine({ label, recipients }: { label: string; recipients: MailAddressLike[] }) {
+    const [expanded, setExpanded] = useState(false);
+    if (recipients.length === 0) {
+        return null;
+    }
+    const folded = recipients.length > RECIPIENT_LINE_LIMIT;
+    const shown = folded && !expanded ? recipients.slice(0, RECIPIENT_LINE_LIMIT) : recipients;
+    return (
+        <p className="text-sm text-text-muted break-words">
+            <span>{label}</span>{" "}
+            {shown.map((recipient, index) => (
+                <React.Fragment key={index}>
+                    {index > 0 && ", "}
+                    <span>{formatMailAddress(recipient)}</span>
+                </React.Fragment>
+            ))}
+            {folded && (
+                <>
+                    {" "}
+                    <button
+                        type="button"
+                        aria-expanded={expanded}
+                        onClick={() => setExpanded((open) => !open)}
+                        className="text-xs font-semibold text-primary-dark underline hover:no-underline"
+                    >
+                        {expanded ? "Show fewer" : `and ${recipients.length - RECIPIENT_LINE_LIMIT} more`}
+                    </button>
+                </>
+            )}
+        </p>
+    );
+}