@visns-studio/visns-components 6.21.0 → 6.23.0

package/src/components/sms/SmsThreadPanel.jsx

@@ -10,6 +10,7 @@ import {
     Archive,
     ArchiveRestore,
     ArrowLeft,
+    CheckSquare,
     ChevronUp,
     ExternalLink,
     FileText,
@@ -30,6 +31,7 @@ import useSmsLive, { defaultChannelFor } from './useSmsLive';
 import useDebouncedValue from '../vault/useDebouncedValue';
 import {
     MAX_SEGMENTS,
+    annotationsForMessage,
     clockTime,
     composerPlaceholder,
     counterLabel,
@@ -42,6 +44,7 @@ import {
     nextPlaceholder,
     normaliseNumberForDisplay,
     prependMessages,
+    resolveAnnotations,
     segmentCount,
     statusLabel,
     threadDisplayName,
@@ -83,6 +86,13 @@ let temporaryId = 0;
  * subscription, in which case the parent passes `subscribe={false}` and feeds
  * it events. Two subscriptions to one channel is not an error, but it is two
  * websocket authorisations and two copies of every message to reconcile.
+ *
+ * `messageSelection` and `messageAnnotations` are the two hooks a host has into
+ * the timeline. Both are opt-in and both are deliberately nameless about what
+ * the host does with them: this module knows about messages, and an application
+ * that wants to file them against something of its own (a task, a complaint, a
+ * file note) supplies the verb and the badges. Absent, the panel behaves
+ * exactly as it did before they existed.
  */
 const SmsThreadPanel = ({
     threadId,
@@ -107,6 +117,23 @@ const SmsThreadPanel = ({
     lines = null,
     canManage = false,
     clientUrl = (id) => `/clients/${id}`,
+    // `{label, onSelect}` — turns on a Select mode over the timeline. `label` is
+    // the verb printed on the confirm button ("Attach to task…"), `onSelect` is
+    // called as `onSelect(messages, thread)` and may return a promise; the mode
+    // closes when it settles.
+    //
+    // The thread is the SECOND argument, so a host that already knows which
+    // conversation it mounted (a client's own page) can ignore it. A host that
+    // does not — an inbox, where the pane chooses the thread — has no other way
+    // to know which one is open or which client it is linked to.
+    messageSelection = null,
+    // `{[messageId]: [{id, label, onClick}]}` — small chips under the matching
+    // bubble. The host owns what they say and what a click does.
+    //
+    // May also be a function `(thread) => map`, for the same reason: chips in an
+    // inbox depend on which conversation is open, and no host can hold one map
+    // for every thread in the practice.
+    messageAnnotations = null,
     onThreadChange,
     onMessage,
     onBack = null,
@@ -130,6 +157,10 @@ const SmsThreadPanel = ({
     const [linkOpen, setLinkOpen] = useState(false);
     const [simulateOpen, setSimulateOpen] = useState(false);
 
+    const [selecting, setSelecting] = useState(false);
+    const [selectedIds, setSelectedIds] = useState([]);
+    const [confirmingSelection, setConfirmingSelection] = useState(false);
+
     const mountedRef = useRef(true);
     const timelineRef = useRef(null);
     const composerRef = useRef(null);
@@ -445,6 +476,97 @@ const SmsThreadPanel = ({
         [enterSends, submit]
     );
 
+    /* ------------------------------------------------------------ selection */
+
+    const selectionEnabled =
+        Boolean(messageSelection) && typeof messageSelection.onSelect === 'function';
+
+    // Moving to another conversation abandons whatever was ticked in the last
+    // one: the selection is a list of ids from a timeline that is no longer on
+    // screen, and carrying it across would file one client's messages from
+    // another client's page.
+    useEffect(() => {
+        setSelecting(false);
+        setSelectedIds([]);
+    }, [threadId]);
+
+    // Withdrawing the prop has to close the mode with it, or a host that turns
+    // selection off mid-render leaves the bar stranded with no way out.
+    useEffect(() => {
+        if (!selectionEnabled) {
+            setSelecting(false);
+            setSelectedIds([]);
+        }
+    }, [selectionEnabled]);
+
+    const isSelected = useCallback(
+        (id) => selectedIds.some((one) => String(one) === String(id)),
+        [selectedIds]
+    );
+
+    const toggleSelected = useCallback((id) => {
+        setSelectedIds((prev) =>
+            prev.some((one) => String(one) === String(id))
+                ? prev.filter((one) => String(one) !== String(id))
+                : [...prev, id]
+        );
+    }, []);
+
+    const cancelSelection = useCallback(() => {
+        setSelecting(false);
+        setSelectedIds([]);
+    }, []);
+
+    const confirmSelection = useCallback(() => {
+        if (!selectionEnabled || selectedIds.length === 0 || confirmingSelection) return;
+
+        // The host is handed the message objects, not the ids: it should not
+        // have to hold a second copy of the timeline to know what it was given.
+        // Timeline order, not tick order — a conversation extract only reads
+        // correctly in the order it happened.
+        const chosen = messages.filter((one) => isSelected(one.id));
+
+        setConfirmingSelection(true);
+
+        Promise.resolve(messageSelection.onSelect(chosen, thread))
+            .then(() => {
+                if (!mountedRef.current) return;
+
+                setSelecting(false);
+                setSelectedIds([]);
+            })
+            .catch(() => {
+                // A failed hand-off leaves the ticks where they are so the user
+                // can try again; the host is the one that says what went wrong.
+            })
+            .then(() => {
+                if (mountedRef.current) setConfirmingSelection(false);
+            });
+    }, [
+        selectionEnabled,
+        selectedIds,
+        confirmingSelection,
+        messages,
+        isSelected,
+        messageSelection,
+        thread,
+    ]);
+
+    /**
+     * The chip map for the conversation on screen. A function form is called
+     * with the whole thread rather than its id, because what a host looks chips
+     * up by is usually the client on it.
+     */
+    const annotations = useMemo(
+        () => resolveAnnotations(messageAnnotations, thread),
+        [messageAnnotations, thread]
+    );
+
+    const annotationsFor = useCallback(
+        (id) => annotationsForMessage(annotations, id),
+        [annotations]
+    );
+
     /* -------------------------------------------------------------- actions */
 
     const patchThread = useCallback(
@@ -589,6 +711,44 @@ const SmsThreadPanel = ({
         const attachments = Array.isArray(message.attachments) ? message.attachments : [];
         // A failure is never silent, whatever else the run is doing.
         const showMeta = lastOfRun || failed || heldMessage;
+        const chips = annotationsFor(message.id);
+        // A message still on its way to the server has a temporary id, so there
+        // is nothing a host could file it against yet.
+        const tickable = selecting && !message.pending;
+        const ticked = tickable && isSelected(message.id);
+
+        const bubble = (
+            <div
+                className={[
+                    styles.bubble,
+                    outgoing ? styles.bubbleBodyOut : styles.bubbleBodyIn,
+                    heldMessage ? styles.bubbleHeld : '',
+                    failed ? styles.bubbleFailed : '',
+                    message.pending ? styles.bubblePending : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
+            >
+                {message.body}
+
+                {attachments.length > 0 && (
+                    <div className={styles.attachments}>
+                        {attachments.map((file) => (
+                            <a
+                                key={file.id}
+                                className={styles.attachment}
+                                href={file.download_url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <FileText size={12} strokeWidth={2} aria-hidden="true" />
+                                <span>{file.name}</span>
+                            </a>
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
 
         return (
             <div
@@ -601,36 +761,52 @@ const SmsThreadPanel = ({
                     .filter(Boolean)
                     .join(' ')}
             >
-                <div
-                    className={[
-                        styles.bubble,
-                        outgoing ? styles.bubbleBodyOut : styles.bubbleBodyIn,
-                        heldMessage ? styles.bubbleHeld : '',
-                        failed ? styles.bubbleFailed : '',
-                        message.pending ? styles.bubblePending : '',
-                    ]
-                        .filter(Boolean)
-                        .join(' ')}
-                >
-                    {message.body}
-
-                    {attachments.length > 0 && (
-                        <div className={styles.attachments}>
-                            {attachments.map((file) => (
-                                <a
-                                    key={file.id}
-                                    className={styles.attachment}
-                                    href={file.download_url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
+                {selecting ? (
+                    // The whole row is the hit target while selecting: ticking
+                    // a message by aiming at a 14px box is not how anybody
+                    // picks three texts out of a conversation.
+                    <label
+                        className={[
+                            styles.pickRow,
+                            ticked ? styles.pickRowOn : '',
+                            message.pending ? styles.pickRowOff : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                    >
+                        <input
+                            type="checkbox"
+                            className={styles.pickBox}
+                            checked={ticked}
+                            disabled={!tickable}
+                            onChange={() => toggleSelected(message.id)}
+                        />
+                        {bubble}
+                    </label>
+                ) : (
+                    bubble
+                )}
+
+                {chips.length > 0 && (
+                    <div className={styles.annotations}>
+                        {chips.map((annotation) =>
+                            typeof annotation.onClick === 'function' ? (
+                                <button
+                                    key={annotation.id}
+                                    type="button"
+                                    className={`${styles.annotation} ${styles.annotationAction}`}
+                                    onClick={() => annotation.onClick(annotation)}
                                 >
-                                    <FileText size={12} strokeWidth={2} aria-hidden="true" />
-                                    <span>{file.name}</span>
-                                </a>
-                            ))}
-                        </div>
-                    )}
-                </div>
+                                    {annotation.label}
+                                </button>
+                            ) : (
+                                <span key={annotation.id} className={styles.annotation}>
+                                    {annotation.label}
+                                </span>
+                            )
+                        )}
+                    </div>
+                )}
 
                 {showMeta && (
                     <div
@@ -703,6 +879,22 @@ const SmsThreadPanel = ({
                         </a>
                     ) : null}
 
+                    {selectionEnabled && (
+                        <button
+                            type="button"
+                            className={`${styles.ghostButton} ${
+                                selecting ? styles.ghostButtonOn : ''
+                            }`.trim()}
+                            aria-pressed={selecting}
+                            onClick={() =>
+                                selecting ? cancelSelection() : setSelecting(true)
+                            }
+                        >
+                            <CheckSquare size={14} strokeWidth={2} aria-hidden="true" />
+                            {selecting ? 'Done' : 'Select'}
+                        </button>
+                    )}
+
                     <button
                         type="button"
                         className={styles.ghostButton}
@@ -797,6 +989,42 @@ const SmsThreadPanel = ({
                 ))}
             </div>
 
+            {/*
+              * While selecting, the action bar stands where the composer does.
+              * Both at once would be a pane with two footers and two primary
+              * buttons, and picking messages out of a conversation is not
+              * something anybody does halfway through writing a reply.
+              */}
+            {selecting ? (
+                <div className={styles.selectBar}>
+                    <span className={styles.selectCount}>
+                        {selectedIds.length === 0
+                            ? 'Pick the messages you want'
+                            : `${selectedIds.length} selected`}
+                    </span>
+
+                    <div className={styles.selectActions}>
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            onClick={cancelSelection}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="button"
+                            className={styles.primaryButton}
+                            onClick={confirmSelection}
+                            disabled={selectedIds.length === 0 || confirmingSelection}
+                        >
+                            {confirmingSelection && (
+                                <Loader2 size={14} className={styles.spin} aria-hidden="true" />
+                            )}
+                            {messageSelection.label || 'Select'} ({selectedIds.length})
+                        </button>
+                    </div>
+                </div>
+            ) : (
             <div className={styles.composer}>
                 <div className={styles.composerBox}>
                     <textarea
@@ -905,6 +1133,7 @@ const SmsThreadPanel = ({
                     </div>
                 </div>
             </div>
+            )}
 
             <LinkClientModal
                 open={linkOpen}

package/src/components/sms/smsHelpers.js

@@ -1202,7 +1202,43 @@ export const describeRecipient = (input) => {
     };
 };
 
+/* -------------------------------------------------------------------------- *
+ * Host annotations
+ *
+ * A host may hand the conversation pane chips to draw under particular
+ * messages. Two shapes, because two kinds of host need it:
+ *
+ *   - a MAP, `{[messageId]: [chip]}`, for a screen that already knows which
+ *     conversation it mounted — a client's own page;
+ *   - a FUNCTION of the open thread, for a screen that does not — an inbox,
+ *     where the pane chooses the thread and no host could hold one map for
+ *     every conversation in the practice.
+ *
+ * Both live here rather than inside the component so the shape has a test.
+ * -------------------------------------------------------------------------- */
+
+/** The chip map for one conversation, whichever shape the host passed. */
+export const resolveAnnotations = (annotations, thread) => {
+    const resolved =
+        typeof annotations === 'function' ? annotations(thread) : annotations;
+
+    return resolved && typeof resolved === 'object' ? resolved : null;
+};
+
+/**
+ * The chips for one message. Looked up by the id as given AND as a string: a
+ * map parsed out of JSON has string keys, and the timeline's ids are numbers.
+ */
+export const annotationsForMessage = (annotations, id) => {
+    if (!annotations) return [];
+
+    const found = annotations[id] ?? annotations[String(id)];
+
+    return Array.isArray(found) ? found : [];
+};
+
 export default {
+    annotationsForMessage,
     badgeCount,
     clientRecipient,
     clockTime,
@@ -1229,6 +1265,7 @@ export default {
     prependMessages,
     RECIPIENT_HINTS,
     relativeTime,
+    resolveAnnotations,
     segmentCount,
     smsHref,
     splitPersonName,

package/src/components/styles/DataGrid.module.scss

@@ -697,6 +697,16 @@
     width: 100%;
     font-size: 0.9rem;
     box-sizing: border-box;
+    // The input is type="search" (to sidestep host apps' global text-input
+    // rules), so strip WebKit's search decorations to keep it looking like
+    // the plain field it always was.
+    appearance: none;
+    -webkit-appearance: none;
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+    }
 
     &:focus {
         outline: none;

package/src/components/styles/GenericDetail.module.scss

@@ -1362,8 +1362,12 @@
 /* It stays pinned bottom-right — every detail page in every project is laid
    out around that — but it had no ground of its own, so on a short page the
    buttons floated over the page background with nothing behind them. A pill
-   with the same elevation as the panels gives them somewhere to sit. */
-.polActions {
+   with the same elevation as the panels gives them somewhere to sit.
+
+   ONLY when there is more than one of them: a tray around a single solid
+   button reads as a white oval drawn around it, not as ground. A lone
+   button carries its own elevation instead. */
+.polActions:has(> :nth-child(2)) {
     padding: 0.4rem;
     border: 1px solid var(--gd-line);
     border-radius: var(--radius-pill, 999px);
@@ -1374,6 +1378,12 @@
         0 16px 32px -14px color-mix(in srgb, var(--primary-color, #1b3933) 30%, transparent);
 }
 
+.polActions:not(:has(> :nth-child(2))) > * {
+    box-shadow:
+        0 2px 4px color-mix(in srgb, var(--primary-color, #1b3933) 12%, transparent),
+        0 12px 24px -12px color-mix(in srgb, var(--primary-color, #1b3933) 35%, transparent);
+}
+
 /* -- states --------------------------------------------------------------- */
 
 .noDataMessage {

package/src/components/styles/Sms.module.scss

@@ -234,6 +234,15 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     }
 }
 
+// A ghost button that is currently ON — the Select toggle while the timeline is
+// in picking mode. Tinted rather than filled: it is a mode, not the pane's
+// primary action.
+.ghostButtonOn {
+    border-color: var(--s-primary);
+    background: var(--s-tint);
+    color: var(--s-primary);
+}
+
 .iconButton {
     @include sms-reset;
     @include sms-focus;
@@ -1521,6 +1530,101 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     font-weight: 600;
 }
 
+// --------------------------------------------------- picking and annotations
+//
+// Both are off unless the host asked for them: `.pickRow` only ever wraps a
+// bubble while the panel is in Select mode, and `.annotations` renders only
+// where the host supplied chips.
+
+// The whole row is the hit target while picking. The checkbox sits on the
+// bubble's own side of the pane so the ticks line up down one margin rather
+// than zig-zagging with the conversation.
+.pickRow {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    max-width: 100%;
+    padding: 0.15rem 0.25rem;
+    border: 1px solid transparent;
+    border-radius: 14px;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--s-hover);
+    }
+}
+
+.bubbleOut .pickRow {
+    flex-direction: row-reverse;
+}
+
+.pickRowOn {
+    border-color: color-mix(in srgb, var(--s-primary) 45%, transparent);
+    background: var(--s-tint);
+}
+
+// A message that has not reached the server yet — nothing to file it against.
+.pickRowOff {
+    opacity: 0.5;
+    cursor: default;
+
+    &:hover {
+        background: none;
+    }
+}
+
+.pickBox {
+    flex-shrink: 0;
+    width: 15px;
+    height: 15px;
+    margin: 0;
+    accent-color: var(--s-primary);
+    cursor: inherit;
+}
+
+// Host-supplied chips under a bubble, on the bubble's own side.
+.annotations {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    max-width: min(60ch, 64%);
+    margin-top: 0.25rem;
+    padding: 0 0.25rem;
+}
+
+.bubbleOut .annotations {
+    justify-content: flex-end;
+}
+
+.annotation {
+    @include sms-reset;
+
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    max-width: 100%;
+    padding: 0.1rem 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--s-primary) 30%, transparent);
+    border-radius: 999px;
+    background: var(--s-tint);
+    color: var(--s-primary);
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-align: left;
+    overflow-wrap: anywhere;
+}
+
+.annotationAction {
+    @include sms-focus;
+
+    cursor: pointer;
+
+    &:hover {
+        border-color: var(--s-primary);
+        background: color-mix(in srgb, var(--s-primary) 16%, var(--s-background));
+    }
+}
+
 .retryButton {
     @include sms-reset;
     @include sms-focus;
@@ -1599,6 +1703,33 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     background: var(--s-surface);
 }
 
+// Stands exactly where the composer does while the timeline is being picked
+// over, so the pane keeps its height and its one footer.
+.selectBar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0.6rem 0.7rem 0.7rem;
+    border-top: 1px solid var(--s-line);
+    background: var(--s-surface);
+}
+
+.selectCount {
+    color: var(--s-paragraph);
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.selectActions {
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-left: auto;
+}
+
 // One card: the text on top, every control in a bar along its bottom edge.
 // Buttons beside a textarea line up with nothing once the box grows; a bar
 // inside the same border always reads as part of the message being written.

package/src/components/styles/Vault.module.scss

@@ -41,6 +41,11 @@ $vault-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     --v-tint: color-mix(in srgb, var(--v-primary) 12%, var(--v-background));
     --v-ok: rgb(31, 122, 71);
     --v-bad: rgb(190, 62, 62);
+    // Between the two: something did not happen, and nothing is broken or at
+    // risk because of it. Its one user is "the link could not be emailed" —
+    // the link itself is fine and on screen right above the line, so painting
+    // that in --v-bad would read as "your credential is in trouble".
+    --v-warn: rgb(176, 106, 20);
 }
 
 // Undo anything a host may have imposed on a generic element. Applied to every
@@ -2312,6 +2317,47 @@ input.checkControl {
     }
 }
 
+// "Also emailed to dana@acme.example." Quiet, and under the URL rather than
+// instead of it: the copy-the-link flow is what actually happened, the email is
+// a convenience on top of it.
+.shareEmailed {
+    display: flex;
+    gap: 0.35rem;
+    align-items: flex-start;
+    margin: 0;
+    color: var(--v-ok);
+    font-size: 0.78rem;
+    line-height: 1.45;
+
+    svg {
+        flex-shrink: 0;
+        margin-top: 0.15rem;
+    }
+}
+
+// The send failed. Louder than the line above, because the sender is about to
+// close a dialog believing the recipient has the link — but not red: the link
+// is on screen and copyable, and nothing about the credential is at risk.
+.shareEmailFailed {
+    display: flex;
+    gap: 0.35rem;
+    align-items: flex-start;
+    margin: 0;
+    padding: 0.5rem 0.6rem;
+    border: 1px solid color-mix(in srgb, var(--v-warn) 40%, transparent);
+    border-radius: var(--v-btn-br);
+    background: color-mix(in srgb, var(--v-warn) 10%, var(--v-background));
+    color: var(--v-warn);
+    font-size: 0.78rem;
+    font-weight: 500;
+    line-height: 1.45;
+
+    svg {
+        flex-shrink: 0;
+        margin-top: 0.15rem;
+    }
+}
+
 .shareList {
     display: flex;
     flex-direction: column;