@rapidmx/web-client 0.28.0 → 0.30.0

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

@@ -15,6 +15,7 @@ import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "./unreadStyle.js";
 import SwipeRow from "./SwipeRow.js";
 import InviteRowChip from "./invite/InviteRowChip.js";
+import { ClickModifiers, isSelectionClick } from "../../mail/rangeSelection.js";
 
 /** A conversation row of the list. `mailboxUid` is set only by a view that merges several mailboxes ("All Mailboxes"), whose rows are
  * each from a different one; a list of one mailbox's own leaves it out and every row is that mailbox's. */
@@ -50,15 +51,27 @@ export interface ConversationListProps {
     /** The `conversationRowKey()`s currently ticked. */
     selectedConversationIds?: Set<string>;
     onToggleSelected?: (conversation: ListedConversation) => void;
+    /**
+     * A Shift, Ctrl or Cmd click on a parent row (or on its checkbox): the caller extends or toggles the selection instead of this list opening or
+     * ticking the row itself (`onOpenMessage` / `onToggleSelected` are not called for it). Absent, those clicks behave as plain ones.
+     */
+    onSelectWithModifier?: (conversation: ListedConversation, modifiers: ClickModifiers) => void;
+    /** The `conversationRowKey()`s of rows on their way out of the list (moved, deleted): drawn non-interactive and hidden from assistive technology while the page collapses them. */
+    exitingKeys?: Set<string>;
     /**
      * What swiping a parent row does on a phone: right to left archives the conversation (resolving whether it went through), left
      * to right asks where to move it. Absent, or `enabled: false` (a desktop), rows don't follow a finger.
      */
     swipe?: {
         enabled: boolean;
-        onArchive: (conversation: ConversationSummary) => Promise<boolean>;
-        onMove: (conversation: ConversationSummary) => void;
+        onArchive: (conversation: ListedConversation) => Promise<boolean>;
+        onMove: (conversation: ListedConversation) => void;
     };
+    /**
+     * A finger held on a parent row on a phone: the caller starts select mode with that conversation ticked. Absent, rows have no long press; it is not
+     * heard in select mode either, where a tap ticks a row already.
+     */
+    onLongPress?: (conversation: ListedConversation) => void;
     /**
      * Whether a conversation's own messages read newest first, matching the order sense the rows themselves
      * are in ("Newest on top"). `listConversationMessages()` always answers oldest first - the order a
@@ -95,7 +108,10 @@ export default function ConversationList({
     selectMode,
     selectedConversationIds,
     onToggleSelected,
+    onSelectWithModifier,
+    exitingKeys,
     swipe,
+    onLongPress,
     newestFirst,
 }: ConversationListProps) {
     const client = useApiClient();
@@ -176,13 +192,21 @@ export default function ConversationList({
                 const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
                 const panelId = `conversation-messages-${conversation.mailboxUid ? `${conversation.mailboxUid}-` : ""}${conversation.conversationId}`;
                 const ticked = selectedConversationIds?.has(id) ?? false;
+                const exiting = exitingKeys?.has(id) ?? false;
                 return (
-                    <li key={id}>
+                    <li
+                        key={id}
+                        data-exiting={exiting ? "true" : undefined}
+                        aria-hidden={exiting ? "true" : undefined}
+                        inert={exiting}
+                        className={exiting ? "pointer-events-none" : undefined}
+                    >
                         <SwipeRow
                             as="div"
                             enabled={!!swipe?.enabled && !selectMode}
                             onArchive={() => swipe!.onArchive(conversation)}
                             onMove={() => swipe!.onMove(conversation)}
+                            onLongPress={onLongPress && !selectMode ? () => onLongPress(conversation) : undefined}
                             data-message-uid={conversation.latestMessageUid}
                             data-unread={unread ? "true" : undefined}
                             className={rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch")}
@@ -193,7 +217,12 @@ export default function ConversationList({
                                     <input
                                         type="checkbox"
                                         checked={ticked}
-                                        onChange={() => onToggleSelected?.(conversation)}
+                                        onChange={(event) =>
+                                            // The change of a checkbox is caused by a click (or the Space key, which makes one): its modifiers are that event's.
+                                            onSelectWithModifier && isSelectionClick(event.nativeEvent as MouseEvent)
+                                                ? onSelectWithModifier(conversation, event.nativeEvent as MouseEvent)
+                                                : onToggleSelected?.(conversation)
+                                        }
                                         aria-label={`Select conversation: ${conversation.subject || "(no subject)"}`}
                                         className="w-4 h-4 accent-primary"
                                     />
@@ -218,7 +247,11 @@ export default function ConversationList({
                                 <button
                                     type="button"
                                     data-row-open
-                                    onClick={() => onOpenMessage(conversation, conversation.latestMessageUid)}
+                                    onClick={(event) =>
+                                        onSelectWithModifier && isSelectionClick(event)
+                                            ? onSelectWithModifier(conversation, event)
+                                            : onOpenMessage(conversation, conversation.latestMessageUid)
+                                    }
                                     className={["w-full text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" ")}
                                 >
                                     <UnreadLabel unread={unread} />

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

@@ -15,6 +15,7 @@ import { ENCRYPTED_SUBJECT_PLACEHOLDER, EncryptedPreview, displaySubject } from
 import { useDecryptedMessages } from "../../mail/decryptedMessages.js";
 import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
 import PendingMessageCard from "./reading/PendingMessageCard.js";
+import { InlineComposeSlot, useInlineCompose } from "./compose/ComposeContext.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { setReadState } from "../../mail/messageReadState.js";
 import { adoptedOutgoing, belongsToThread, settleOutgoing, useOutgoingReplies } from "../../mail/outbox/outgoingReplies.js";
@@ -202,6 +203,9 @@ export default function ConversationThreadPane({
     const [error, setError] = useState<string | null>(null);
     /** The message to scroll to and focus once it has rendered, or `null` once that has happened. */
     const [pendingFocusUid, setPendingFocusUid] = useState<string | null>(null);
+    // The Reply / Reply all / Forward compose windows of this thread's messages, drawn as cards at the top of the list; the thread's messages are
+    // what makes the compose provider open a reply here rather than floating at the bottom right.
+    const inlineSessions = useInlineCompose(messages.map((message) => message.uid));
 
     // Bumped on every conversation switch - an in-flight load/attachments/mark-read response carrying an
     // older generation belongs to a superseded conversation and is dropped rather than applied.
@@ -538,6 +542,17 @@ export default function ConversationThreadPane({
                 </div>
             ) : (
             <ul className="flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3">
+                {inlineSessions.map((session) => (
+                    <InlineComposeSlot
+                        key={session.id}
+                        id={session.id}
+                        onPlaced={(slot) => {
+                            // Brought into view like a message that has just been sent: the same scroll, inside the list.
+                            rowRefs.current[session.id] = slot;
+                            setPendingFocusUid(session.id);
+                        }}
+                    />
+                ))}
                 {pendingCards.map((reply) => (
                     <li
                         key={reply.uid}

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

@@ -3,6 +3,18 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
+import {
+    HiOutlineArchiveBox,
+    HiOutlineCheckCircle,
+    HiOutlineEnvelope,
+    HiOutlineEnvelopeOpen,
+    HiOutlineFlag,
+    HiOutlineFolderArrowDown,
+    HiOutlineMinusCircle,
+    HiOutlineNoSymbol,
+    HiOutlineTrash,
+    HiOutlineXMark,
+} from "react-icons/hi2";
 import { Folder, Message } from "../../../../lib/mail/mailApi.js";
 import { Label } from "../../../../lib/mail/labelsApi.js";
 import LabelMenuButton from "./labelMenu.js";
@@ -65,8 +77,43 @@ export interface MailSelectionBarProps {
     labelsDisabledReason?: string;
 }
 
-function actionClassName(destructive = false): string {
-    return `px-2 py-1 rounded-md text-sm ${destructive ? "text-danger font-semibold" : "text-text"} hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent`;
+/** The look of the bar's icon buttons - the reading pane's own command row (`ICON_BUTTON_CLASS` in `MessageDetailPane`), without its border, which nine of them in a row don't need. */
+function iconClassName(destructive = false): string {
+    return `inline-flex items-center justify-center p-1.5 rounded-md text-sm ${destructive ? "text-danger" : "text-text"} hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent`;
+}
+
+/** One of the bar's actions as an icon button: the action's name is its `aria-label` (so it has the accessible name its text button had) and its tooltip,
+ * unless there is a `reason` it is unavailable, or a keyboard shortcut to name (`title` and `aria-keyshortcuts` from `hint()`). */
+function BarAction({
+    icon,
+    label,
+    onClick,
+    disabled,
+    reason,
+    destructive,
+    hint,
+}: {
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    reason?: string;
+    destructive?: boolean;
+    hint?: { title?: string; "aria-keyshortcuts"?: string };
+}) {
+    return (
+        <button
+            type="button"
+            aria-label={label}
+            onClick={onClick}
+            disabled={disabled}
+            className={iconClassName(destructive)}
+            {...hint}
+            title={reason ?? hint?.title ?? label}
+        >
+            {icon}
+        </button>
+    );
 }
 
 /**
@@ -148,47 +195,67 @@ export default function MailSelectionBar({
                 onMove={onMoveTo}
                 onFolderCreated={onFolderCreated}
             />
-            <div className="flex items-center gap-2 px-3 py-1.5 bg-surface-alt">
-                <span aria-live="polite" className="text-sm font-semibold text-text">
+            <div className="flex items-center gap-1 px-3 py-1.5 bg-surface-alt">
+                <span aria-live="polite" className="text-sm font-semibold text-text mr-auto">
                     {selectedCount}
                     {totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : ""} selected
                 </span>
-                <button type="button" onClick={onSelectAll} disabled={allSelected || listedCount === 0} className={actionClassName()}>
-                    Select all
-                </button>
-                <button type="button" onClick={onClearSelection} disabled={selectedCount === 0} className={actionClassName()}>
-                    Clear
-                </button>
-                <button type="button" onClick={onCancel} className={`${actionClassName()} ml-auto`}>
-                    Cancel
-                </button>
+                <BarAction
+                    icon={<HiOutlineCheckCircle size={16} aria-hidden="true" />}
+                    label="Select all"
+                    onClick={onSelectAll}
+                    disabled={allSelected || listedCount === 0}
+                />
+                <BarAction icon={<HiOutlineMinusCircle size={16} aria-hidden="true" />} label="Clear" onClick={onClearSelection} disabled={selectedCount === 0} />
+                <BarAction icon={<HiOutlineXMark size={16} aria-hidden="true" />} label="Cancel" onClick={onCancel} />
             </div>
+            {/* Icon-only, so all nine fit one row of the 24rem list column; wraps if the column is ever narrower. */}
             <div className="flex flex-wrap items-center gap-0.5 px-1.5 py-1">
-                <button type="button" onClick={() => onSetRead(true)} disabled={none || busy} className={actionClassName()} {...hint("Mark read", SHORTCUTS.mail.markRead)}>
-                    Mark read
-                </button>
-                <button type="button" onClick={() => onSetRead(false)} disabled={none || busy} className={actionClassName()} {...hint("Mark unread", SHORTCUTS.mail.markUnread)}>
-                    Mark unread
-                </button>
-                <button type="button" onClick={() => onSetFlagged(true)} disabled={none || busy} className={actionClassName()} {...hint("Flag", SHORTCUTS.mail.flag)}>
-                    Flag
-                </button>
-                <button type="button" onClick={() => onSetFlagged(false)} disabled={none || busy} className={actionClassName()}>
-                    Unflag
-                </button>
-                <button
-                    type="button"
+                <BarAction
+                    icon={<HiOutlineEnvelopeOpen size={16} aria-hidden="true" />}
+                    label="Mark read"
+                    onClick={() => onSetRead(true)}
+                    disabled={none || busy}
+                    hint={hint("Mark read", SHORTCUTS.mail.markRead)}
+                />
+                <BarAction
+                    icon={<HiOutlineEnvelope size={16} aria-hidden="true" />}
+                    label="Mark unread"
+                    onClick={() => onSetRead(false)}
+                    disabled={none || busy}
+                    hint={hint("Mark unread", SHORTCUTS.mail.markUnread)}
+                />
+                <BarAction
+                    icon={<HiOutlineFlag size={16} aria-hidden="true" />}
+                    label="Flag"
+                    onClick={() => onSetFlagged(true)}
+                    disabled={none || busy}
+                    hint={hint("Flag", SHORTCUTS.mail.flag)}
+                />
+                <BarAction
+                    icon={
+                        // `hi2` has no flag-with-a-line-through glyph: the flag, struck through.
+                        <span className="relative inline-flex" aria-hidden="true">
+                            <HiOutlineFlag size={16} />
+                            <span className="absolute left-1/2 top-[-1px] h-[18px] w-[1.5px] -translate-x-1/2 rotate-45 rounded bg-current" />
+                        </span>
+                    }
+                    label="Unflag"
+                    onClick={() => onSetFlagged(false)}
+                    disabled={none || busy}
+                />
+                <BarAction
+                    icon={<HiOutlineArchiveBox size={16} aria-hidden="true" />}
+                    label="Archive"
                     onClick={onArchive}
                     disabled={none || busy || !!archiveReason}
-                    title={archiveReason}
-                    className={actionClassName()}
-                >
-                    Archive
-                </button>
+                    reason={archiveReason}
+                />
                 <LabelMenuButton
                     aria-label="Apply label"
                     label="Apply label"
-                    className="text-sm"
+                    iconOnly
+                    className={iconClassName()}
                     labels={labels}
                     mailboxUid={mailboxUid}
                     onLabelCreated={onLabelCreated}
@@ -197,7 +264,7 @@ export default function MailSelectionBar({
                     onCommit={onApplyLabels}
                     busy={busy}
                     disabled={none || busy || !!labelsDisabledReason}
-                    title={labelsDisabledReason}
+                    title={labelsDisabledReason ?? "Apply label"}
                     note={
                         selected.length === 1
                             ? "Ticked labels are applied, unticked ones removed."
@@ -207,33 +274,28 @@ export default function MailSelectionBar({
                     commit={{ label: "Apply" }}
                     clear={{ label: "Remove all labels" }}
                 />
-                <button
-                    type="button"
+                <BarAction
+                    icon={<HiOutlineFolderArrowDown size={16} aria-hidden="true" />}
+                    label="Move to"
                     onClick={() => setMovePrompt(true)}
                     disabled={none || busy || !!moveDisabledReason}
-                    title={moveDisabledReason}
-                    className={actionClassName()}
-                >
-                    Move to
-                </button>
-                <button
-                    type="button"
+                    reason={moveDisabledReason}
+                />
+                <BarAction
+                    icon={<HiOutlineNoSymbol size={16} aria-hidden="true" />}
+                    label="Report junk"
                     onClick={onReportJunk}
                     disabled={none || busy || !!junkReason}
-                    title={junkReason}
-                    className={actionClassName()}
-                >
-                    Report junk
-                </button>
-                <button
-                    type="button"
+                    reason={junkReason}
+                />
+                <BarAction
+                    icon={<HiOutlineTrash size={16} aria-hidden="true" />}
+                    label={deleteLabel}
                     onClick={onDelete}
                     disabled={none || busy}
-                    className={actionClassName(deletesPermanently)}
-                    {...hint(deleteLabel, SHORTCUTS.mail.delete)}
-                >
-                    {deleteLabel}
-                </button>
+                    destructive={deletesPermanently}
+                    hint={hint(deleteLabel, SHORTCUTS.mail.delete)}
+                />
             </div>
         </div>
     );

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

@@ -830,6 +830,7 @@ function MessageDetailContent({
                     mailboxUid: message.mailboxUid,
                     subject: forwardSubject(message.subject),
                     signatureContext: "reply_forward",
+                    inlineFor: message.uid,
                     encrypt,
                     threading,
                     pending: late,
@@ -843,6 +844,8 @@ function MessageDetailContent({
                     subject: replySubject(message.subject),
                     signatureContext: "reply_forward",
                     suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
+                    // A card above this message in the reading pane when it is in one, else the floating window (see `OpenComposeInput.inlineFor`).
+                    inlineFor: message.uid,
                     encrypt,
                     threading,
                     pending: late,

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

@@ -2,8 +2,9 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { HTMLAttributes, ReactNode, useEffect, useRef, useState } from "react";
+import React, { HTMLAttributes, ReactNode, TouchEvent, useEffect, useRef, useState } from "react";
 import { HiOutlineArchiveBox, HiOutlineFolder } from "react-icons/hi2";
+import { useLongPress } from "../../gestures/useLongPress.js";
 import { useSwipe } from "../../gestures/useSwipe.js";
 
 export interface SwipeRowProps extends HTMLAttributes<HTMLElement> {
@@ -15,12 +16,22 @@ export interface SwipeRowProps extends HTMLAttributes<HTMLElement> {
     onArchive: () => Promise<boolean>;
     /** Left to right. The row comes back at once, and this asks where to (a prompt for the folder). */
     onMove: () => void;
+    /** A finger held on the row (see `useLongPress()`) - the phone's way into select mode. Heard whether or not swipes are `enabled`; absent, the row has none. */
+    onLongPress?: () => void;
     children: ReactNode;
 }
 
 /** How long the row takes to leave, or come back - `motion-reduce` skips it. */
 const SLIDE = "transform 150ms ease-out";
 
+/** Both hooks' handlers for one touch event; `useSwipe()` has none while swipes are off. */
+function both(first: (event: TouchEvent<HTMLElement>) => void, second?: (event: TouchEvent<HTMLElement>) => void) {
+    return (event: TouchEvent<HTMLElement>) => {
+        first(event);
+        second?.(event);
+    };
+}
+
 /**
  * A row of a list of mail that slides with a finger: right to left it takes the row away to Archive (a green panel with the
  * archive icon follows the row in), left to right it comes back and asks for a folder to move it to (a blue panel with a
@@ -29,8 +40,10 @@ const SLIDE = "transform 150ms ease-out";
  *
  * Only a swipe that starts out horizontal counts (see `useSwipe()`), so scrolling the list is untouched, and it is an addition
  * to, never the only way of, archiving and moving: the selection bar and the reading pane do the same.
+ *
+ * The row is also where a press and hold is heard (`onLongPress`), which shares the finger with the swipe: a hold gives way to the first drag.
  */
-export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove, children, className, style, ...rest }: SwipeRowProps) {
+export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove, onLongPress, children, className, style, ...rest }: SwipeRowProps) {
     const [offset, setOffset] = useState(0);
     const [width, setWidth] = useState(0);
     /** The row is on its way out (or waiting for the server to confirm it), so a finger can't drag it. */
@@ -71,9 +84,13 @@ export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove,
         },
     });
 
+    // What `useSwipe()` hands over is `{}` while swipes are off.
+    const swipeTouch: Partial<ReturnType<typeof useLongPress>["handlers"]> = swipe.handlers;
+    const press = useLongPress({ enabled: !!onLongPress, onLongPress: onLongPress! });
+
     if (!enabled) {
         return (
-            <Tag className={className} style={style} {...rest}>
+            <Tag className={className} style={{ ...style, ...press.style }} {...rest} {...press.handlers}>
                 {children}
             </Tag>
         );
@@ -82,7 +99,11 @@ export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove,
     return (
         <Tag
             {...rest}
-            {...swipe.handlers}
+            {...press.handlers}
+            onTouchStart={both(press.handlers.onTouchStart, swipeTouch.onTouchStart)}
+            onTouchMove={both(press.handlers.onTouchMove, swipeTouch.onTouchMove)}
+            onTouchEnd={both(press.handlers.onTouchEnd, swipeTouch.onTouchEnd)}
+            onTouchCancel={both(press.handlers.onTouchCancel, swipeTouch.onTouchCancel)}
             ref={(node: HTMLElement | null) => {
                 element.current = node;
             }}
@@ -90,6 +111,7 @@ export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove,
             style={{
                 ...style,
                 ...swipe.style,
+                ...press.style,
                 transform: active ? `translateX(${offset}px)` : undefined,
                 transition: dragging ? "none" : SLIDE,
             }}