@rapidmx/web-client 0.27.0 → 0.29.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. */
@@ -47,9 +48,16 @@ export interface ConversationListProps {
      * conversation is what this list's rows are. A child row stays a plain "open this message" button - a
      * mixed conversation/message selection has no sensible bulk semantics (see `MailListToolbar`). */
     selectMode?: boolean;
-    /** The `conversationId`s currently ticked. */
+    /** The `conversationRowKey()`s currently ticked. */
     selectedConversationIds?: Set<string>;
-    onToggleSelected?: (conversation: ConversationSummary) => void;
+    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.
@@ -95,6 +103,8 @@ export default function ConversationList({
     selectMode,
     selectedConversationIds,
     onToggleSelected,
+    onSelectWithModifier,
+    exitingKeys,
     swipe,
     newestFirst,
 }: ConversationListProps) {
@@ -175,9 +185,16 @@ export default function ConversationList({
                 // list itself is arranged in. Copied before reversing - the fetched array is cached.
                 const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
                 const panelId = `conversation-messages-${conversation.mailboxUid ? `${conversation.mailboxUid}-` : ""}${conversation.conversationId}`;
-                const ticked = selectedConversationIds?.has(conversation.conversationId) ?? false;
+                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}
@@ -193,7 +210,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 +240,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,