@visns-studio/visns-components 6.24.4 → 6.26.0

package/src/components/navBadges.js

@@ -12,6 +12,8 @@
  *     badges={{ tickets: 4 }}                       -> "4", "Tickets, 4 open"
  *     badges={{ tickets: { count: 4, label: 'unread' } }}
  *                                                   -> "4", "Tickets, 4 unread"
+ *     badges={{ tickets: { count: 4, tone: 'danger' } }}
+ *                                                   -> "4", on crimson
  *
  * The object form exists because the pill itself is only a number and the
  * accessible name has to say what the number IS — a screen reader announcing
@@ -23,6 +25,46 @@
 /** The noun the accessible name falls back to. See the note above. */
 export const DEFAULT_BADGE_NOUN = 'open';
 
+/**
+ * The severities a badge can wear, ORDERED — mildest first, worst last.
+ *
+ * The order is the point of the array rather than incidental to it:
+ * `navBadge()` rolls a group up by index, so a fourth step later means putting
+ * a name in the right place here and changing nothing else. They are named as
+ * severities and not as colours ('danger', never 'red') because the stylesheet
+ * owns what each one looks like, and a project that recolours the bar must not
+ * have to restate its data to do it.
+ *
+ * A tone says how BAD the number is; it never says what the number counts —
+ * the count and its noun already do that. It is deliberately absent from the
+ * accessible name: see badgeAriaLabel.
+ */
+export const BADGE_TONES = ['ok', 'warn', 'danger'];
+
+/**
+ * The tone a badge has when the consumer published none.
+ *
+ * EVERY badge carries a tone, the plain-number form included, so the pill has
+ * one shape to render and no caller has to guard for a missing field — the
+ * same bargain `display` is on, and for the same reason it had to be made
+ * twice before it stuck.
+ */
+export const DEFAULT_BADGE_TONE = 'ok';
+
+/**
+ * The published tone, or the default.
+ *
+ * Anything unrecognised falls back rather than passing through: the value ends
+ * up in a CSS-module class name, and a typo'd tone would resolve to no class
+ * at all — a pill with no ground and no ink, which is a worse failure than
+ * merely being the wrong colour.
+ */
+const toneOf = (raw) => (BADGE_TONES.includes(raw) ? raw : DEFAULT_BADGE_TONE);
+
+/** The worse of two tones, by their position in BADGE_TONES. */
+const worseTone = (a, b) =>
+    BADGE_TONES.indexOf(a) >= BADGE_TONES.indexOf(b) ? a : b;
+
 /**
  * Above this the pill reads `99+`.
  *
@@ -65,6 +107,9 @@ const normalise = (raw) => {
         // off `count` while the pill printed an undefined `display`.
         display: badgeDisplay(whole),
         noun: (isObject && raw.label) || DEFAULT_BADGE_NOUN,
+        // Only the object form can carry one — a bare number is a count and
+        // says nothing about severity, so it is always the default.
+        tone: toneOf(isObject ? raw.tone : undefined),
     };
 };
 
@@ -98,7 +143,7 @@ export function badgeFor(badges, id) {
  * reader cannot act on — because the row it belongs to is not in their menu —
  * is worse than no number: they would go looking for work that is not theirs.
  *
- * @returns {{count: number, display: string, noun: string}|null}
+ * @returns {{count: number, display: string, noun: string, tone: string}|null}
  */
 export function navBadge(badges, nav) {
     if (!badges || !nav) {
@@ -128,6 +173,15 @@ export function navBadge(badges, nav) {
         // a group whose children count different nouns cannot be summarised
         // in one word anyway, and in practice one child carries the badge.
         noun: parts[0].noun,
+        // The WORST tone under it, not the first one and not an average. The
+        // parent is a closed dropdown: the reader cannot see which child is on
+        // fire, so the only useful thing the heading can tell them is that one
+        // of them is. Rolling up the mildest — or the first contributor's, as
+        // the noun does — would hide the one row that needed opening.
+        tone: parts.reduce(
+            (worst, part) => worseTone(worst, part.tone),
+            DEFAULT_BADGE_TONE
+        ),
     };
 }
 
@@ -140,6 +194,14 @@ export function navBadge(badges, nav) {
  *
  * The REAL count, not the capped display: "Tickets, 340 open" is useful and
  * "Tickets, 99+ open" is a rendering artefact.
+ *
+ * The TONE is not spoken, and that is a decision rather than an omission.
+ * There is no honest word for it: 'danger' is a class name, and "Tickets, 4
+ * open, danger" is speech nobody wrote. A consumer that has a real word for
+ * why its badge is red already has somewhere to put it — `label`, which is the
+ * noun this name is built from, so `{ count: 4, label: 'over a week', tone:
+ * 'danger' }` reads "Tickets, 4 over a week" and the colour is the same fact
+ * for people who can see it.
  */
 export function badgeAriaLabel(label, badge) {
     if (!badge || !label) {

package/src/components/navDrawer.js

@@ -0,0 +1,147 @@
+/**
+ * The mobile drawer's rows, derived from the navigation tree the bar draws.
+ *
+ * Split out of Navigation.jsx for the same reason navActive.js and
+ * navBadges.js were: what the drawer shows is a handful of judgement calls,
+ * every one of them testable without a DOM, a router or a stylesheet.
+ * Navigation.jsx renders what this file decides and decides nothing itself.
+ *
+ * THE ONE IDEA HERE IS THAT THE DRAWER IS FLAT. The header bar hangs a group's
+ * pages off a dropdown, which is a hover affordance wearing a keyboard escape
+ * hatch — on a phone there is no hover, the group heading has no page of its
+ * own to navigate to, and a menu that only opens on a gesture the device does
+ * not have is a menu nobody can reach. So a group becomes a heading followed
+ * by its children as ordinary rows: everything the reader may open is visible
+ * the moment the drawer is, and nothing in the drawer is a disclosure control.
+ *
+ * The cost is length — the drawer is as tall as the whole menu — and that is
+ * the trade being made deliberately. A scroll is cheaper than a tap that does
+ * nothing.
+ *
+ * VISIBILITY IS NOT RE-DECIDED HERE. `permission`, `hidden` and the group
+ * cascade are all computed by Navigation's own effect and arrive on the nodes;
+ * this only reads them, with exactly the tests the two rendering paths in
+ * Navigation.jsx already use, so a drawer can never show a page the bar would
+ * have withheld.
+ */
+// The extension is not decoration: this module is imported directly by
+// `node --test`, which resolves ESM specifiers to the letter, and Vite
+// resolves an explicit extension just as happily as a bare one.
+import { isNavActive, bestMatchingUrl, cleanUrl } from './navActive.js';
+
+/**
+ * The test the header applies to a TOP-LEVEL entry.
+ *
+ * `permissionKey === ''` is a deliberate second door: an entry that names no
+ * permission at all is public, and the effect that stamps `permission` may not
+ * have run on the very first render. Both are copied verbatim from the bar's
+ * own filter rather than restated in a tidier form — the two must agree, and
+ * the cheapest way to guarantee that is for them to be the same expression.
+ */
+const showsInBar = (nav) =>
+    !!nav &&
+    nav.hidden !== true &&
+    (nav.permission === true || nav.permissionKey === '');
+
+/**
+ * The test the header applies to a DROPDOWN child, which is stricter: a child
+ * has to have been granted, not merely not withheld (see `renderChildren`).
+ */
+const showsInDropdown = (child) =>
+    !!child && child.hidden !== true && child.permission === true;
+
+/**
+ * @typedef {Object} DrawerRow
+ * @property {'link'|'heading'} kind  a heading is inert — see below.
+ * @property {string} id             the nav id, for the badge lookup.
+ * @property {string} label          what the row reads as.
+ * @property {string} [url]          links only.
+ * @property {string} [target]       links only; passed through untouched.
+ * @property {number} depth          0 top level, 1 inside a group.
+ * @property {boolean} active        this is the page being viewed.
+ */
+
+/**
+ * Flatten a navigation tree into drawer rows.
+ *
+ * Four shapes go in and three come out:
+ *
+ *   - a leaf (url, no children)        -> one link row.
+ *   - a group (children, no url)       -> a HEADING row, then its children.
+ *   - both (url AND children)          -> a LINK row, then its children. The
+ *     parent has a page of its own and the drawer is the one surface where
+ *     that page is otherwise unreachable, since there is no dropdown to open
+ *     and no hover to open it with.
+ *   - neither (no url, no children)    -> a heading with nothing under it,
+ *     which is exactly what the bar draws for it: an inert <span>. Rendering
+ *     nothing instead would be a quieter lie about the config.
+ *
+ * ACTIVE IS PER ROW, NOT PER BRANCH. A parent that owns children is matched on
+ * its OWN url only (`isNavActive(url, [], …)`, no child urls) — in the bar it
+ * takes the highlight for anything underneath it because the children are
+ * hidden inside a closed menu, but here the child row is right there and
+ * lighting both would say the reader is standing in two places at once.
+ * Children use `bestMatchingUrl` across their siblings, the same rule and the
+ * same call the dropdown uses, so `/reports` and `/reports/prebuilt` cannot
+ * both claim the page.
+ *
+ * @param {Array} navigations  Navigation's `navData.navigations`.
+ * @param {string} currentPage the path being viewed, with or without its
+ *                             leading slash (Navigation passes it without).
+ * @returns {DrawerRow[]}
+ */
+export function drawerRows(navigations, currentPage) {
+    const rows = [];
+
+    (Array.isArray(navigations) ? navigations : []).forEach((nav) => {
+        if (!showsInBar(nav)) {
+            return;
+        }
+
+        const children = (nav.children || []).filter(showsInDropdown);
+        // Computed once per group rather than once per child: it is a scan of
+        // every sibling url, and it answers the same question for all of them.
+        const bestChild = children.length
+            ? bestMatchingUrl(
+                  children.map((child) => child.url),
+                  currentPage
+              )
+            : null;
+
+        if (nav.url) {
+            rows.push({
+                kind: 'link',
+                id: nav.id,
+                label: nav.label,
+                url: nav.url,
+                target: nav.target,
+                depth: 0,
+                active: isNavActive(nav.url, [], currentPage),
+            });
+        } else {
+            rows.push({
+                kind: 'heading',
+                id: nav.id,
+                label: nav.label,
+                depth: 0,
+                active: false,
+            });
+        }
+
+        children.forEach((child) => {
+            rows.push({
+                kind: 'link',
+                id: child.id,
+                label: child.label,
+                url: child.url,
+                target: child.target,
+                depth: 1,
+                active: bestChild !== null && cleanUrl(child.url) === bestChild,
+            });
+        });
+    });
+
+    return rows;
+}
+
+export default drawerRows;

package/src/components/sms/SmsThreadPanel.jsx

@@ -18,6 +18,7 @@ import {
     Loader2,
     MessageSquarePlus,
     Send,
+    ShieldCheck,
     Unplug,
     User,
     X,
@@ -47,6 +48,7 @@ import {
     resolveAnnotations,
     segmentCount,
     statusLabel,
+    threadCanReply,
     threadDisplayName,
     threadSubtitle,
     upsertMessage,
@@ -383,7 +385,14 @@ const SmsThreadPanel = ({
 
     const counts = segmentCount(body);
     const overLimit = counts.segments > MAX_SEGMENTS;
-    const canSend = body.trim() !== '' && !overLimit && !sending && Boolean(threadId);
+
+    // A sender-ID thread (`Apple`, `ANZ`, a short code) receives and can never
+    // answer. The server refuses the send with a 422 of its own; this is what
+    // stops anybody getting that far, and it gates `canSend` as well as the
+    // footer so a keyboard shortcut cannot slip past the missing button.
+    const canReply = threadCanReply(thread);
+    const canSend =
+        canReply && body.trim() !== '' && !overLimit && !sending && Boolean(threadId);
 
     const send = useCallback(
         (text) => {
@@ -990,12 +999,31 @@ 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.
+              * One footer, three things it can be.
+              *
+              * Receive-only wins outright: the compose box is REPLACED rather
+              * than disabled, because a dead Send button beside a live textarea
+              * reads as something being broken, where a sentence says why there
+              * is nothing to press — the only thing a reader wants to know when
+              * a two-factor code has just landed in front of them.
+              *
+              * Otherwise, 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 ? (
+            {!canReply ? (
+                <div className={styles.receiveOnly}>
+                    <div className={styles.banner}>
+                        <ShieldCheck size={15} strokeWidth={2} aria-hidden="true" />
+                        <span>
+                            <strong>{threadDisplayName(thread)}</strong> is a sender ID,
+                            not a phone number — messages from it are one-way and
+                            cannot be replied to.
+                        </span>
+                    </div>
+                </div>
+            ) : selecting ? (
                 <div className={styles.selectBar}>
                     <span className={styles.selectCount}>
                         {selectedIds.length === 0

package/src/components/sms/smsHelpers.js

@@ -645,6 +645,21 @@ export const threadDisplayName = (thread) => {
     );
 };
 
+/**
+ * Can this thread be answered, or does it only ever receive?
+ *
+ * A thread opened by an inbound message from an alphanumeric sender ID -
+ * `Apple` for a two-factor code, `ANZ`, a courier's short code - has no handset
+ * behind it. The SERVER decides this and sends `can_reply`; deriving it here
+ * from the shape of `external_number` would be a second definition of the rule,
+ * and the derived one is always the one that goes wrong.
+ *
+ * `undefined` means an older backend that predates the field, and that is read
+ * as repliable: a missing key must not silently take the compose box away from
+ * every ordinary conversation.
+ */
+export const threadCanReply = (thread) => thread?.can_reply !== false;
+
 /** The number under the name, only when it is not already the name. */
 export const threadSubtitle = (thread) => {
     if (!thread) return '';