@rapidmx/web-client 0.29.0 → 0.30.0

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

@@ -64,9 +64,14 @@ export interface ConversationListProps {
      */
     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
@@ -106,6 +111,7 @@ export default function ConversationList({
     onSelectWithModifier,
     exitingKeys,
     swipe,
+    onLongPress,
     newestFirst,
 }: ConversationListProps) {
     const client = useApiClient();
@@ -200,6 +206,7 @@ export default function ConversationList({
                             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")}

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,
             }}

package/apps/shared/gestures/useLongPress.ts

@@ -0,0 +1,138 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, type MouseEvent, type TouchEvent } from "react";
+
+export interface UseLongPressOptions {
+    /** Nothing starts while this is `false` (a desktop pointer, select mode); a press already held out is still seen through. Default `true`. */
+    enabled?: boolean;
+    /** How long a finger has to stay down, in ms. Default `LONG_PRESS_MS`. */
+    delay?: number;
+    /** How far it may wander meanwhile, in px. Default `LONG_PRESS_SLOP`. */
+    tolerance?: number;
+    /** Called once when the press has been held for `delay`. */
+    onLongPress: () => void;
+}
+
+/** How long a finger holds still to count as a press and hold, and how far it may drift (an unsteady hand) before it is a scroll or a swipe instead. */
+export const LONG_PRESS_MS = 480;
+export const LONG_PRESS_SLOP = 8;
+/** How long after the finger lifts the click it would make is still swallowed; a press that makes none (the browser took it as a context menu) must not eat a later one. */
+const CLICK_WINDOW_MS = 500;
+
+/**
+ * Press and hold by one finger, for the touch screens the app's phone layout is for: mouse and pen are left alone.
+ *
+ * Spread the handlers on the element. The press is given up the moment the finger moves more than `tolerance`, a second finger lands, the touch is
+ * cancelled (the browser took it over to scroll) or something scrolls, so it never fights vertical scrolling or `useSwipe()`: a swipe has to travel
+ * further than the tolerance to be one. Once it fires, the finger lifting must not also be a click on whatever is under it (the click that follows is
+ * swallowed once), and the browser's own long-press (the context menu, the text selection and the callout of a link) is suppressed.
+ *
+ * The handlers stay on even while `enabled` is `false`, because the row that was pressed usually makes itself disabled in answer (select mode),
+ * and the click that ends the press still has to be swallowed after that.
+ */
+export function useLongPress({ enabled = true, delay = LONG_PRESS_MS, tolerance = LONG_PRESS_SLOP, onLongPress }: UseLongPressOptions) {
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const start = useRef({ x: 0, y: 0 });
+    /** The press fired and its click has not come yet. */
+    const fired = useRef(false);
+    const clickWindow = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const latest = useRef(onLongPress);
+    latest.current = onLongPress;
+
+    // One function for the life of the row: it is also the scroll listener, which has to be removed with the very function it was added with.
+    const forget: () => void = useRef(() => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+            window.removeEventListener("scroll", forget, true);
+        }
+    }).current;
+
+    function clearClickWindow() {
+        if (clickWindow.current !== null) {
+            clearTimeout(clickWindow.current);
+            clickWindow.current = null;
+        }
+    }
+
+    // A timer left running would fire into a row that is gone.
+    useEffect(
+        () => () => {
+            forget();
+            if (clickWindow.current !== null) {
+                clearTimeout(clickWindow.current);
+            }
+        },
+        [forget],
+    );
+
+    function onTouchStart(event: TouchEvent<HTMLElement>) {
+        forget();
+        clearClickWindow();
+        fired.current = false;
+        if (!enabled || event.touches.length !== 1) {
+            return;
+        }
+        start.current = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+        // Scroll events don't bubble: only a capturing listener hears the list (or the page) moving under a finger that hasn't moved.
+        window.addEventListener("scroll", forget, { capture: true, passive: true });
+        timer.current = setTimeout(() => {
+            timer.current = null;
+            window.removeEventListener("scroll", forget, true);
+            fired.current = true;
+            navigator.vibrate?.(10);
+            latest.current();
+        }, delay);
+    }
+
+    function onTouchMove(event: TouchEvent<HTMLElement>) {
+        if (timer.current === null) {
+            return;
+        }
+        const touch = event.touches[0];
+        if (event.touches.length !== 1 || Math.hypot(touch.clientX - start.current.x, touch.clientY - start.current.y) >= tolerance) {
+            forget();
+        }
+    }
+
+    function onTouchEnd(event: TouchEvent<HTMLElement>) {
+        forget();
+        if (fired.current) {
+            // No click of the browser's own after this; the one that comes anyway (older browsers) is swallowed by `onClickCapture`.
+            event.preventDefault();
+            clearClickWindow();
+            clickWindow.current = setTimeout(() => {
+                clickWindow.current = null;
+                fired.current = false;
+            }, CLICK_WINDOW_MS);
+        }
+    }
+
+    function onTouchCancel() {
+        forget();
+        fired.current = false;
+    }
+
+    function onClickCapture(event: MouseEvent<HTMLElement>) {
+        if (fired.current) {
+            fired.current = false;
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    function onContextMenu(event: MouseEvent<HTMLElement>) {
+        // The long-press menu of a touch screen comes while the finger is still down (Android) or just after it fired.
+        if (timer.current !== null || fired.current) {
+            event.preventDefault();
+        }
+    }
+
+    return {
+        handlers: { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, onClickCapture, onContextMenu },
+        /** No text selection and no callout on what is pressed, while a press can start: the page's text stays selectable elsewhere. */
+        style: enabled ? ({ WebkitTouchCallout: "none", WebkitUserSelect: "none", userSelect: "none" } as const) : undefined,
+    };
+}

package/apps/www/index.tsx

@@ -2037,6 +2037,23 @@ function InboxContent({ userUid }: { userUid?: string }) {
         void resolveConversations(listedConversations.filter((c) => inRange.has(conversationKey(c))));
     }
 
+    /**
+     * A press and hold on a phone: select mode, with this row the only one ticked and the anchor of the next Shift+click. From then on a tap ticks
+     * (`handleSelect()`, `handleOpenConversation()`). A conversation is resolved to its messages as a ticked one is.
+     */
+    function startSelectingMessage(message: Message) {
+        selectionAnchorRef.current = message.uid;
+        setSelectMode(true);
+        setSelectedUids(new Set([message.uid]));
+    }
+
+    function startSelectingConversation(conversation: ListedConversation) {
+        selectionAnchorRef.current = conversationKey(conversation);
+        setSelectMode(true);
+        setSelectedConversationIds(new Set([conversationKey(conversation)]));
+        void resolveConversations([conversation]);
+    }
+
     /** A plain click on a conversation's checkbox: ticks (or unticks) it and makes it the anchor of the next Shift+click. */
     function tickConversation(conversation: ListedConversation) {
         selectionAnchorRef.current = conversationKey(conversation);
@@ -2253,17 +2270,30 @@ function InboxContent({ userUid }: { userUid?: string }) {
 
     // ---- Swiping a row on a phone (see `SwipeRow`): right to left archives, left to right asks for a folder. Both go through the same
     // ---- bulk path as the selection bar's Archive and Move to, so the badges, the optimistic bookkeeping and the failure pop-up are one
-    // ---- implementation. Not offered where the actions aren't (an aggregate view spans mailboxes, search results are a mixed bag, the
-    // ---- Outbox is the server's send queue) or while rows are being ticked.
-    const listingOutbox = currentFolders.find((f) => f.uid === folderUid)?.type === "outbox";
-    const swipeEnabled = isMobile && !selectMode && !aggregateFolderType && !isSearching && !listingOutbox;
-    /** What a swipe's Move to is about, while its folder prompt is open: one message, or every message of a conversation in this folder. */
-    const [moveDialog, setMoveDialog] = useState<{ messages: Message[] } | { conversation: ConversationSummary } | null>(null);
-
-    /** The messages a swiped conversation stands for (the ones in the folder being listed), or `null` after saying why they couldn't be loaded. */
-    async function swipedConversationMessages(conversation: ConversationThreadHead): Promise<Message[] | null> {
+    // ---- implementation. Offered in every listing - a mailbox's own folders, the "All mailboxes" views and search results - and a row acts in
+    // ---- its own mailbox (its Archive, its folders), as a bulk action does. Not offered for the Outbox (the server's send queue) or while rows
+    // ---- are being ticked.
+    const listingOutbox = !isSearching && currentFolders.find((f) => f.uid === folderUid)?.type === "outbox";
+    const swipeEnabled = isMobile && !selectMode && !listingOutbox;
+    /** What a swipe's Move to is about, while its folder prompt is open: one message, or every message of a conversation in the folder being listed. */
+    const [moveDialog, setMoveDialog] = useState<{ messages: Message[] } | { conversation: ListedConversation } | null>(null);
+    /** Where what is being moved is now: its mailbox - whose folders the prompt offers - and the folder it is in. */
+    const movingFrom =
+        moveDialog === null
+            ? null
+            : "messages" in moveDialog
+              ? { mailboxUid: moveDialog.messages[0].mailboxUid, folderUid: moveDialog.messages[0].folderUid }
+              : { mailboxUid: moveDialog.conversation.mailboxUid ?? activeMailboxUid, folderUid: moveDialog.conversation.latestFolderUid };
+
+    /**
+     * The messages a swiped conversation stands for - the ones in the folder being listed - or `null` after saying why they couldn't be loaded. A row of
+     * an "All mailboxes" view is a different mailbox's: its messages are asked for there, and only the aggregate's own folders' count (not the Sent Items
+     * copy of a reply), as for a ticked row (`selectedConversationMessages`).
+     */
+    async function swipedConversationMessages(conversation: ListedConversation): Promise<Message[] | null> {
         try {
-            return await loadOpenConversation(conversation);
+            const loaded = await loadOpenConversation(conversation, conversation.mailboxUid ?? activeMailboxUid);
+            return aggregateFolderType ? loaded.filter((m) => folderTypeOf(m.folderUid) === aggregateFolderType) : loaded;
         } catch (err) {
             notifyApiError(err, "Couldn't load the messages in that conversation");
             return null;
@@ -2271,7 +2301,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
     }
 
     /** Archives what a swipe took away. Resolves whether it went through, so the row comes back when it didn't. */
-    async function swipeArchive(target: Message[] | ConversationSummary): Promise<boolean> {
+    async function swipeArchive(target: Message[] | ListedConversation): Promise<boolean> {
         if (bulkBusy || resolvingSelection > 0) {
             return false;
         }
@@ -2317,9 +2347,11 @@ function InboxContent({ userUid }: { userUid?: string }) {
         return (
             <SwipeRow
                 as="li"
-                enabled={swipeEnabled}
+                // A hit of a search over several mailboxes can be in an Outbox, which none of these actions are for.
+                enabled={swipeEnabled && folderTypeOf(message.folderUid) !== "outbox"}
                 onArchive={() => swipeArchive([message])}
                 onMove={() => setMoveDialog({ messages: [message] })}
+                onLongPress={isMobile && !selectMode ? () => startSelectingMessage(message) : undefined}
                 key={message.uid}
                 data-message-uid={message.uid}
                 data-unread={isUnread(message) ? "true" : undefined}
@@ -3075,6 +3107,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
                                     onArchive: swipeArchive,
                                     onMove: (conversation) => setMoveDialog({ conversation }),
                                 }}
+                                onLongPress={isMobile ? startSelectingConversation : undefined}
                             />
                             {hasMore && !rowCapReached && (
                                 <div ref={setSentinel} data-testid="load-more-sentinel" className="p-4 text-center text-xs text-text-muted">
@@ -3202,9 +3235,9 @@ function InboxContent({ userUid }: { userUid?: string }) {
             <MoveToFolderDialog
                 open={moveDialog !== null}
                 onClose={() => setMoveDialog(null)}
-                mailboxUid={activeMailboxUid}
-                folders={currentFolders}
-                currentFolderUid={folderUid}
+                mailboxUid={movingFrom?.mailboxUid ?? activeMailboxUid}
+                folders={foldersOf(movingFrom?.mailboxUid ?? activeMailboxUid)}
+                currentFolderUid={movingFrom?.folderUid}
                 count={moveDialog === null ? 1 : "messages" in moveDialog ? moveDialog.messages.length : moveDialog.conversation.messageCount}
                 onMove={swipeMove}
                 onFolderCreated={onFolderCreated}

package/dist/apps/shared/components/mail/ConversationList.d.ts

@@ -47,9 +47,14 @@ export interface ConversationListProps {
      */
     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
@@ -70,4 +75,4 @@ export interface ConversationListProps {
  * nest inside a button), so expanding and opening are separately reachable by keyboard and each carries
  * its own name.
  */
-export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, onSelectWithModifier, exitingKeys, swipe, newestFirst, }: ConversationListProps): React.JSX.Element;
+export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, onSelectWithModifier, exitingKeys, swipe, onLongPress, newestFirst, }: ConversationListProps): React.JSX.Element;

package/dist/apps/shared/components/mail/ConversationList.js

@@ -37,7 +37,7 @@ function participantList(conversation) {
  * nest inside a button), so expanding and opening are separately reachable by keyboard and each carries
  * its own name.
  */
-export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, onSelectWithModifier, exitingKeys, swipe, newestFirst, }) {
+export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, onSelectWithModifier, exitingKeys, swipe, onLongPress, newestFirst, }) {
     const client = useApiClient();
     // What this device has decrypted of the encrypted messages on screen: their real subjects and previews.
     const decrypted = useDecryptedMessages();
@@ -107,7 +107,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             const panelId = `conversation-messages-${conversation.mailboxUid ? `${conversation.mailboxUid}-` : ""}${conversation.conversationId}`;
             const ticked = selectedConversationIds?.has(id) ?? false;
             const exiting = exitingKeys?.has(id) ?? false;
-            return (_jsxs("li", { "data-exiting": exiting ? "true" : undefined, "aria-hidden": exiting ? "true" : undefined, inert: exiting, className: exiting ? "pointer-events-none" : undefined, children: [_jsxs(SwipeRow, { as: "div", enabled: !!swipe?.enabled && !selectMode, onArchive: () => swipe.onArchive(conversation), onMove: () => swipe.onMove(conversation), "data-message-uid": conversation.latestMessageUid, "data-unread": unread ? "true" : undefined, className: rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: (event) => 
+            return (_jsxs("li", { "data-exiting": exiting ? "true" : undefined, "aria-hidden": exiting ? "true" : undefined, inert: exiting, className: exiting ? "pointer-events-none" : undefined, children: [_jsxs(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"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, 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)
                                         ? onSelectWithModifier(conversation, event.nativeEvent)

package/dist/apps/shared/components/mail/SwipeRow.d.ts

@@ -8,6 +8,8 @@ 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;
 }
 /**
@@ -18,5 +20,7 @@ export interface SwipeRowProps extends HTMLAttributes<HTMLElement> {
  *
  * 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, enabled, onArchive, onMove, children, className, style, ...rest }: SwipeRowProps): React.JSX.Element;
+export default function SwipeRow({ as: Tag, enabled, onArchive, onMove, onLongPress, children, className, style, ...rest }: SwipeRowProps): React.JSX.Element;

package/dist/apps/shared/components/mail/SwipeRow.js

@@ -5,9 +5,17 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
 import { HiOutlineArchiveBox, HiOutlineFolder } from "react-icons/hi2";
+import { useLongPress } from "../../gestures/useLongPress.js";
 import { useSwipe } from "../../gestures/useSwipe.js";
 /** 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, second) {
+    return (event) => {
+        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
@@ -16,8 +24,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 }) {
+export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove, onLongPress, children, className, style, ...rest }) {
     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. */
@@ -56,15 +66,19 @@ export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove,
             });
         },
     });
+    // What `useSwipe()` hands over is `{}` while swipes are off.
+    const swipeTouch = swipe.handlers;
+    const press = useLongPress({ enabled: !!onLongPress, onLongPress: onLongPress });
     if (!enabled) {
-        return (_jsx(Tag, { className: className, style: style, ...rest, children: children }));
+        return (_jsx(Tag, { className: className, style: { ...style, ...press.style }, ...rest, ...press.handlers, children: children }));
     }
     const active = offset !== 0;
-    return (_jsxs(Tag, { ...rest, ...swipe.handlers, ref: (node) => {
+    return (_jsxs(Tag, { ...rest, ...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) => {
             element.current = node;
         }, className: className, style: {
             ...style,
             ...swipe.style,
+            ...press.style,
             transform: active ? `translateX(${offset}px)` : undefined,
             transition: dragging ? "none" : SLIDE,
         }, "data-swiping": active ? "true" : undefined, children: [children, (active || leaving) && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", "data-swipe-panel": "move", className: "absolute inset-y-0 right-full w-full bg-primary text-white flex items-center justify-end pr-6", children: _jsx(HiOutlineFolder, { size: 24 }) }), _jsx("span", { "aria-hidden": "true", "data-swipe-panel": "archive", style: width ? { width } : undefined, className: "absolute inset-y-0 left-full w-full bg-success text-white flex items-center justify-start pl-6", children: _jsx(HiOutlineArchiveBox, { size: 24 }) })] }))] }));

package/dist/apps/shared/gestures/useLongPress.d.ts

@@ -0,0 +1,41 @@
+import { type MouseEvent, type TouchEvent } from "react";
+export interface UseLongPressOptions {
+    /** Nothing starts while this is `false` (a desktop pointer, select mode); a press already held out is still seen through. Default `true`. */
+    enabled?: boolean;
+    /** How long a finger has to stay down, in ms. Default `LONG_PRESS_MS`. */
+    delay?: number;
+    /** How far it may wander meanwhile, in px. Default `LONG_PRESS_SLOP`. */
+    tolerance?: number;
+    /** Called once when the press has been held for `delay`. */
+    onLongPress: () => void;
+}
+/** How long a finger holds still to count as a press and hold, and how far it may drift (an unsteady hand) before it is a scroll or a swipe instead. */
+export declare const LONG_PRESS_MS = 480;
+export declare const LONG_PRESS_SLOP = 8;
+/**
+ * Press and hold by one finger, for the touch screens the app's phone layout is for: mouse and pen are left alone.
+ *
+ * Spread the handlers on the element. The press is given up the moment the finger moves more than `tolerance`, a second finger lands, the touch is
+ * cancelled (the browser took it over to scroll) or something scrolls, so it never fights vertical scrolling or `useSwipe()`: a swipe has to travel
+ * further than the tolerance to be one. Once it fires, the finger lifting must not also be a click on whatever is under it (the click that follows is
+ * swallowed once), and the browser's own long-press (the context menu, the text selection and the callout of a link) is suppressed.
+ *
+ * The handlers stay on even while `enabled` is `false`, because the row that was pressed usually makes itself disabled in answer (select mode),
+ * and the click that ends the press still has to be swallowed after that.
+ */
+export declare function useLongPress({ enabled, delay, tolerance, onLongPress }: UseLongPressOptions): {
+    handlers: {
+        onTouchStart: (event: TouchEvent<HTMLElement>) => void;
+        onTouchMove: (event: TouchEvent<HTMLElement>) => void;
+        onTouchEnd: (event: TouchEvent<HTMLElement>) => void;
+        onTouchCancel: () => void;
+        onClickCapture: (event: MouseEvent<HTMLElement>) => void;
+        onContextMenu: (event: MouseEvent<HTMLElement>) => void;
+    };
+    /** No text selection and no callout on what is pressed, while a press can start: the page's text stays selectable elsewhere. */
+    style: {
+        readonly WebkitTouchCallout: "none";
+        readonly WebkitUserSelect: "none";
+        readonly userSelect: "none";
+    } | undefined;
+};

package/dist/apps/shared/gestures/useLongPress.js

@@ -0,0 +1,112 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef } from "react";
+/** How long a finger holds still to count as a press and hold, and how far it may drift (an unsteady hand) before it is a scroll or a swipe instead. */
+export const LONG_PRESS_MS = 480;
+export const LONG_PRESS_SLOP = 8;
+/** How long after the finger lifts the click it would make is still swallowed; a press that makes none (the browser took it as a context menu) must not eat a later one. */
+const CLICK_WINDOW_MS = 500;
+/**
+ * Press and hold by one finger, for the touch screens the app's phone layout is for: mouse and pen are left alone.
+ *
+ * Spread the handlers on the element. The press is given up the moment the finger moves more than `tolerance`, a second finger lands, the touch is
+ * cancelled (the browser took it over to scroll) or something scrolls, so it never fights vertical scrolling or `useSwipe()`: a swipe has to travel
+ * further than the tolerance to be one. Once it fires, the finger lifting must not also be a click on whatever is under it (the click that follows is
+ * swallowed once), and the browser's own long-press (the context menu, the text selection and the callout of a link) is suppressed.
+ *
+ * The handlers stay on even while `enabled` is `false`, because the row that was pressed usually makes itself disabled in answer (select mode),
+ * and the click that ends the press still has to be swallowed after that.
+ */
+export function useLongPress({ enabled = true, delay = LONG_PRESS_MS, tolerance = LONG_PRESS_SLOP, onLongPress }) {
+    const timer = useRef(null);
+    const start = useRef({ x: 0, y: 0 });
+    /** The press fired and its click has not come yet. */
+    const fired = useRef(false);
+    const clickWindow = useRef(null);
+    const latest = useRef(onLongPress);
+    latest.current = onLongPress;
+    // One function for the life of the row: it is also the scroll listener, which has to be removed with the very function it was added with.
+    const forget = useRef(() => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+            window.removeEventListener("scroll", forget, true);
+        }
+    }).current;
+    function clearClickWindow() {
+        if (clickWindow.current !== null) {
+            clearTimeout(clickWindow.current);
+            clickWindow.current = null;
+        }
+    }
+    // A timer left running would fire into a row that is gone.
+    useEffect(() => () => {
+        forget();
+        if (clickWindow.current !== null) {
+            clearTimeout(clickWindow.current);
+        }
+    }, [forget]);
+    function onTouchStart(event) {
+        forget();
+        clearClickWindow();
+        fired.current = false;
+        if (!enabled || event.touches.length !== 1) {
+            return;
+        }
+        start.current = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+        // Scroll events don't bubble: only a capturing listener hears the list (or the page) moving under a finger that hasn't moved.
+        window.addEventListener("scroll", forget, { capture: true, passive: true });
+        timer.current = setTimeout(() => {
+            timer.current = null;
+            window.removeEventListener("scroll", forget, true);
+            fired.current = true;
+            navigator.vibrate?.(10);
+            latest.current();
+        }, delay);
+    }
+    function onTouchMove(event) {
+        if (timer.current === null) {
+            return;
+        }
+        const touch = event.touches[0];
+        if (event.touches.length !== 1 || Math.hypot(touch.clientX - start.current.x, touch.clientY - start.current.y) >= tolerance) {
+            forget();
+        }
+    }
+    function onTouchEnd(event) {
+        forget();
+        if (fired.current) {
+            // No click of the browser's own after this; the one that comes anyway (older browsers) is swallowed by `onClickCapture`.
+            event.preventDefault();
+            clearClickWindow();
+            clickWindow.current = setTimeout(() => {
+                clickWindow.current = null;
+                fired.current = false;
+            }, CLICK_WINDOW_MS);
+        }
+    }
+    function onTouchCancel() {
+        forget();
+        fired.current = false;
+    }
+    function onClickCapture(event) {
+        if (fired.current) {
+            fired.current = false;
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    function onContextMenu(event) {
+        // The long-press menu of a touch screen comes while the finger is still down (Android) or just after it fired.
+        if (timer.current !== null || fired.current) {
+            event.preventDefault();
+        }
+    }
+    return {
+        handlers: { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, onClickCapture, onContextMenu },
+        /** No text selection and no callout on what is pressed, while a press can start: the page's text stays selectable elsewhere. */
+        style: enabled ? { WebkitTouchCallout: "none", WebkitUserSelect: "none", userSelect: "none" } : undefined,
+    };
+}

package/dist/apps/www/index.js

@@ -1760,6 +1760,21 @@ function InboxContent({ userUid }) {
         const inRange = new Set(range);
         void resolveConversations(listedConversations.filter((c) => inRange.has(conversationKey(c))));
     }
+    /**
+     * A press and hold on a phone: select mode, with this row the only one ticked and the anchor of the next Shift+click. From then on a tap ticks
+     * (`handleSelect()`, `handleOpenConversation()`). A conversation is resolved to its messages as a ticked one is.
+     */
+    function startSelectingMessage(message) {
+        selectionAnchorRef.current = message.uid;
+        setSelectMode(true);
+        setSelectedUids(new Set([message.uid]));
+    }
+    function startSelectingConversation(conversation) {
+        selectionAnchorRef.current = conversationKey(conversation);
+        setSelectMode(true);
+        setSelectedConversationIds(new Set([conversationKey(conversation)]));
+        void resolveConversations([conversation]);
+    }
     /** A plain click on a conversation's checkbox: ticks (or unticks) it and makes it the anchor of the next Shift+click. */
     function tickConversation(conversation) {
         selectionAnchorRef.current = conversationKey(conversation);
@@ -1958,16 +1973,28 @@ function InboxContent({ userUid }) {
     }
     // ---- Swiping a row on a phone (see `SwipeRow`): right to left archives, left to right asks for a folder. Both go through the same
     // ---- bulk path as the selection bar's Archive and Move to, so the badges, the optimistic bookkeeping and the failure pop-up are one
-    // ---- implementation. Not offered where the actions aren't (an aggregate view spans mailboxes, search results are a mixed bag, the
-    // ---- Outbox is the server's send queue) or while rows are being ticked.
-    const listingOutbox = currentFolders.find((f) => f.uid === folderUid)?.type === "outbox";
-    const swipeEnabled = isMobile && !selectMode && !aggregateFolderType && !isSearching && !listingOutbox;
-    /** What a swipe's Move to is about, while its folder prompt is open: one message, or every message of a conversation in this folder. */
+    // ---- implementation. Offered in every listing - a mailbox's own folders, the "All mailboxes" views and search results - and a row acts in
+    // ---- its own mailbox (its Archive, its folders), as a bulk action does. Not offered for the Outbox (the server's send queue) or while rows
+    // ---- are being ticked.
+    const listingOutbox = !isSearching && currentFolders.find((f) => f.uid === folderUid)?.type === "outbox";
+    const swipeEnabled = isMobile && !selectMode && !listingOutbox;
+    /** What a swipe's Move to is about, while its folder prompt is open: one message, or every message of a conversation in the folder being listed. */
     const [moveDialog, setMoveDialog] = useState(null);
-    /** The messages a swiped conversation stands for (the ones in the folder being listed), or `null` after saying why they couldn't be loaded. */
+    /** Where what is being moved is now: its mailbox - whose folders the prompt offers - and the folder it is in. */
+    const movingFrom = moveDialog === null
+        ? null
+        : "messages" in moveDialog
+            ? { mailboxUid: moveDialog.messages[0].mailboxUid, folderUid: moveDialog.messages[0].folderUid }
+            : { mailboxUid: moveDialog.conversation.mailboxUid ?? activeMailboxUid, folderUid: moveDialog.conversation.latestFolderUid };
+    /**
+     * The messages a swiped conversation stands for - the ones in the folder being listed - or `null` after saying why they couldn't be loaded. A row of
+     * an "All mailboxes" view is a different mailbox's: its messages are asked for there, and only the aggregate's own folders' count (not the Sent Items
+     * copy of a reply), as for a ticked row (`selectedConversationMessages`).
+     */
     async function swipedConversationMessages(conversation) {
         try {
-            return await loadOpenConversation(conversation);
+            const loaded = await loadOpenConversation(conversation, conversation.mailboxUid ?? activeMailboxUid);
+            return aggregateFolderType ? loaded.filter((m) => folderTypeOf(m.folderUid) === aggregateFolderType) : loaded;
         }
         catch (err) {
             notifyApiError(err, "Couldn't load the messages in that conversation");
@@ -2000,7 +2027,9 @@ function InboxContent({ userUid }) {
     /** One message's row of the flat list - and, in search results grouped by conversation, of a group. */
     function renderMessageRow(message) {
         const exiting = exitingKeys.has(message.uid);
-        return (_jsxs(SwipeRow, { as: "li", enabled: swipeEnabled, onArchive: () => swipeArchive([message]), onMove: () => setMoveDialog({ messages: [message] }), "data-message-uid": message.uid, "data-unread": isUnread(message) ? "true" : undefined, "data-exiting": exiting ? "true" : undefined, "aria-hidden": exiting ? "true" : undefined, inert: exiting, className: rowClass({ unread: isUnread(message), selected: message.uid === selectedUid || selectedUids.has(message.uid) }, exiting ? "flex items-stretch pointer-events-none" : "flex items-stretch"), children: [_jsx(UnreadBar, { unread: isUnread(message) }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: selectedUids.has(message.uid), 
+        return (_jsxs(SwipeRow, { as: "li", 
+            // A hit of a search over several mailboxes can be in an Outbox, which none of these actions are for.
+            enabled: swipeEnabled && folderTypeOf(message.folderUid) !== "outbox", onArchive: () => swipeArchive([message]), onMove: () => setMoveDialog({ messages: [message] }), onLongPress: isMobile && !selectMode ? () => startSelectingMessage(message) : undefined, "data-message-uid": message.uid, "data-unread": isUnread(message) ? "true" : undefined, "data-exiting": exiting ? "true" : undefined, "aria-hidden": exiting ? "true" : undefined, inert: exiting, className: rowClass({ unread: isUnread(message), selected: message.uid === selectedUid || selectedUids.has(message.uid) }, exiting ? "flex items-stretch pointer-events-none" : "flex items-stretch"), children: [_jsx(UnreadBar, { unread: isUnread(message) }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: selectedUids.has(message.uid), 
                         // The change of a checkbox is caused by a click (or the Space key, which makes one): its modifiers are that event's.
                         onChange: (event) => handleSelect(message, event.nativeEvent), "aria-label": `Select ${rowSubject(message)}`, className: "w-4 h-4 accent-primary" }) })), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("button", { type: "button", "data-row-open": true, onClick: (event) => handleSelect(message, event), className: ["w-full text-left px-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: isUnread(message) }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(isUnread(message)) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(isUnread(message))].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), crossMailbox && (_jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: mailboxes.find((mb) => mb.uid === message.mailboxUid)?.displayName })), isSearching && pendingUids.has(message.uid) ? (_jsxs("div", { className: "flex flex-col gap-1.5 py-0.5", children: [_jsx(Skeleton, { height: "h-3.5", className: "w-2/3 rounded-sm" }), _jsx(Skeleton, { height: "h-3", className: "w-full rounded-sm" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: ["text-sm truncate", subjectClass(isUnread(message))].join(" "), children: rowSubject(message) }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: snippets[message.uid] ||
                                                         decryptedRows[message.uid]?.preview ||
@@ -2357,7 +2386,7 @@ function InboxContent({ userUid }) {
                                             enabled: swipeEnabled,
                                             onArchive: swipeArchive,
                                             onMove: (conversation) => setMoveDialog({ conversation }),
-                                        } }), hasMore && !rowCapReached && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), rowCapReached && (_jsxs("p", { className: "p-4 text-center text-xs text-text-muted", children: ["Showing the most recent ", rowCap, " conversations \u2014 refine your search or filters to see more."] }))] })) : messages.length === 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
+                                        }, onLongPress: isMobile ? startSelectingConversation : undefined }), hasMore && !rowCapReached && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), rowCapReached && (_jsxs("p", { className: "p-4 text-center text-xs text-text-muted", children: ["Showing the most recent ", rowCap, " conversations \u2014 refine your search or filters to see more."] }))] })) : messages.length === 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
                                             ? `No messages match "${searchQuery}".`
                                             : effectiveFilter === "all"
                                                 ? "No messages in this folder."
@@ -2377,7 +2406,7 @@ function InboxContent({ userUid }) {
                         // whichever folder is currently being viewed (into Archive), so it's removed
                         // from the list rather than patched in place.
                         removeListedMessage(updated.uid);
-                    }, onChanged: patchListedMessage, labels: labels, onLabelsChanged: patchListedMessage, onLabelCreated: (label) => (otherMailbox ? setOtherMailboxLabels : setMailboxLabels)((prev) => [...prev, label]) })) }), _jsx(MoveToFolderDialog, { open: moveDialog !== null, onClose: () => setMoveDialog(null), mailboxUid: activeMailboxUid, folders: currentFolders, currentFolderUid: folderUid, count: moveDialog === null ? 1 : "messages" in moveDialog ? moveDialog.messages.length : moveDialog.conversation.messageCount, onMove: swipeMove, onFolderCreated: onFolderCreated })] }));
+                    }, onChanged: patchListedMessage, labels: labels, onLabelsChanged: patchListedMessage, onLabelCreated: (label) => (otherMailbox ? setOtherMailboxLabels : setMailboxLabels)((prev) => [...prev, label]) })) }), _jsx(MoveToFolderDialog, { open: moveDialog !== null, onClose: () => setMoveDialog(null), mailboxUid: movingFrom?.mailboxUid ?? activeMailboxUid, folders: foldersOf(movingFrom?.mailboxUid ?? activeMailboxUid), currentFolderUid: movingFrom?.folderUid, count: moveDialog === null ? 1 : "messages" in moveDialog ? moveDialog.messages.length : moveDialog.conversation.messageCount, onMove: swipeMove, onFolderCreated: onFolderCreated })] }));
 }
 export default InboxPage;
 /** The tab's title: `Brand: Mail` (see `pageTitle()`). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",