@nyaruka/temba-components 0.169.0 → 0.171.0

package/src/form/Compose.ts

@@ -1,7 +1,13 @@
 import { TemplateResult, html, css, PropertyValues, nothing } from 'lit';
 import { FieldElement } from './FieldElement';
 import { property } from 'lit/decorators.js';
-import { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';
+import {
+  Attachment,
+  CustomEventType,
+  Language,
+  QuickReply,
+  Shortcut
+} from '../interfaces';
 import { Icon } from '../Icons';
 import { DEFAULT_MEDIA_ENDPOINT } from '../utils';
 import { Select } from './select/Select';
@@ -12,7 +18,7 @@ import { setCaretOffset } from '../excellent/caret-utils';
 export interface ComposeValue {
   text: string;
   attachments: { uuid: string }[];
-  quick_replies: string[];
+  quick_replies: (string | QuickReply)[];
   optin: string;
   template: string;
   variables: string[];
@@ -236,7 +242,7 @@ export class Compose extends FieldElement {
     [lang: string]: {
       text: string;
       attachments: Attachment[];
-      quick_replies: string[];
+      quick_replies: (string | QuickReply)[];
       optin?: { name: string; uuid: string };
       template?: string;
       variables?: string[];
@@ -357,11 +363,12 @@ export class Compose extends FieldElement {
       this.currentText = langValue.text || '';
       this.initialText = langValue.text || '';
       this.currentAttachments = langValue.attachments || [];
-      this.currentQuickReplies = (langValue.quick_replies || []).map(
-        (value) => {
-          return { name: value, value };
-        }
-      );
+      this.currentQuickReplies = (langValue.quick_replies || [])
+        .map((reply) =>
+          typeof reply === 'string' ? reply : (reply.text ?? null)
+        )
+        .filter((reply): reply is string => reply !== null)
+        .map((value) => ({ name: value, value }));
       this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];
     }
 
@@ -410,25 +417,14 @@ export class Compose extends FieldElement {
     // own keydown inserts a newline (which would flash before the send
     // clears it); bubble keeps Enter-to-send working from anywhere else
     // in the compose after inner widgets have had their shot at it
-    this.addEventListener(
-      'keydown',
-      this.handleHostKeyDown as EventListener,
-      true
-    );
-    this.addEventListener('keydown', this.handleHostKeyDown as EventListener);
+    this.addEventListener('keydown', this.handleHostKeyDownCapture, true);
+    this.addEventListener('keydown', this.handleHostKeyDownBubble);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener(
-      'keydown',
-      this.handleHostKeyDown as EventListener,
-      true
-    );
-    this.removeEventListener(
-      'keydown',
-      this.handleHostKeyDown as EventListener
-    );
+    this.removeEventListener('keydown', this.handleHostKeyDownCapture, true);
+    this.removeEventListener('keydown', this.handleHostKeyDownBubble);
   }
 
   private handleShortcutIconClick() {
@@ -454,7 +450,18 @@ export class Compose extends FieldElement {
     });
   }
 
-  private handleHostKeyDown = (evt: KeyboardEvent) => {
+  // events from inside our shadow tree are retargeted to the host, so
+  // both registrations see eventPhase as AT_TARGET — the phase can't
+  // tell us which registration is firing, so each binds it explicitly
+  private handleHostKeyDownCapture = (evt: KeyboardEvent) => {
+    this.handleHostKeyDown(evt, true);
+  };
+
+  private handleHostKeyDownBubble = (evt: KeyboardEvent) => {
+    this.handleHostKeyDown(evt, false);
+  };
+
+  private handleHostKeyDown = (evt: KeyboardEvent, capture: boolean) => {
     if (evt.key === 'Escape' && this.showShortcuts) {
       evt.preventDefault();
       evt.stopPropagation();
@@ -474,10 +481,12 @@ export class Compose extends FieldElement {
       // during capture only editor presses are claimed — anything else
       // (quick replies, attachments) waits for the bubble so the widget
       // it targets keeps first claim on the event
-      if (
-        evt.eventPhase === Event.CAPTURING_PHASE &&
-        !(editor && evt.composedPath().includes(editor))
-      ) {
+      if (capture && !(editor && evt.composedPath().includes(editor))) {
+        return;
+      }
+      // by the bubble an inner widget may have claimed the Enter for
+      // itself (e.g. the quick reply select adding a tag) — not a send
+      if (!capture && evt.defaultPrevented) {
         return;
       }
       if (editor) {

package/src/form/RangePicker.ts

@@ -4,107 +4,157 @@ import { DateTime } from 'luxon';
 import { html, css, PropertyValues } from 'lit';
 import { DatePicker } from './DatePicker';
 import { CustomEventType } from '../interfaces';
+import { Icon } from '../Icons';
+import { designTokens } from '../styles/designTokens';
 
 export class RangePicker extends RapidElement {
   static styles = css`
+    ${designTokens}
+
+    :host {
+      display: inline-block;
+      font-family: var(--font);
+    }
+
     .range-container {
       display: flex;
-      gap: 0.5em;
+      gap: 8px;
       align-items: center;
+      font-size: 13.5px;
+      color: var(--text-1);
     }
+
     .date-display {
       cursor: pointer;
-      padding: 0.2em 0.5em;
-      margin: 0.6em 0;
-      border-radius: var(--curvature-widget);
-      border: 1px solid transparent;
-      transition: border 0.2s;
+      padding: 3px 6px;
+      border-radius: var(--r-sm);
+      transition:
+        background 120ms,
+        color 120ms;
     }
 
     .date-display:hover {
-      border: 1px solid var(--color-widget-border);
       background: var(--sunken);
     }
 
-    input[type='date'] {
-      font-size: 1em;
-      padding: 0.2em 0.5em;
-      border-radius: var(--curvature-widget);
-      border: 1px solid var(--color-widget-border);
+    .range-separator {
+      color: var(--text-3);
     }
 
     .navigation-container {
       display: flex;
       align-items: center;
-      gap: 0.25em;
+      gap: 4px;
     }
 
+    /* Chevron-only step buttons, same chrome as the list pager: bare
+       glyph at rest, sunken wash on hover. No border of their own, so
+       they don't compete with the period track between them. */
     .nav-arrow {
-      background: var(--sunken);
-      border: 1px solid var(--color-widget-border);
-
-      border-radius: var(--curvature-widget);
-      padding: 0em 0em;
-      cursor: pointer;
-      font-size: 0.6em;
-      display: flex;
+      display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 23px;
-      height: 23px;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      border-radius: var(--r-sm);
+      color: var(--text-3);
+      cursor: pointer;
       transition:
-        background 0.2s,
-        border 0.2s,
-        opacity 0.2s;
+        background 120ms,
+        color 120ms,
+        opacity 120ms;
+    }
+
+    .nav-arrow temba-icon {
+      --icon-color: currentColor;
     }
 
     .nav-arrow:hover:not(:disabled) {
-      background: var(--accent-50);
-      border-color: var(--accent);
+      background: var(--sunken);
+      color: var(--text-1);
     }
 
     .nav-arrow:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      background: var(--sunken);
+      opacity: 0.35;
+      cursor: default;
     }
 
     .nav-arrow.hidden {
       visibility: hidden;
     }
 
+    /* Segmented control — one bordered sunken track holds every
+       period and the selected one lifts out as a surface pill. The
+       buttons carry no borders themselves, so there are no
+       overlapping 1px edges to clip the selection's outline (the old
+       -1px margin stacking left the selected button's left border
+       painted over by its neighbor). */
     .button-group {
-      display: flex;
-      margin-left: 0em;
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      padding: 2px;
+      background: var(--sunken);
+      border: 1px solid var(--border);
+      border-radius: var(--r-sm);
     }
+
     .range-btn {
-      background: var(--sunken);
-      border: 1px solid var(--color-widget-border);
-      border-radius: 0px;
-      margin-left: -1px;
-      padding: 0.2em 0.8em;
+      height: 22px;
+      padding: 0 10px;
+      border: 0;
+      background: transparent;
+      border-radius: var(--r-xs);
+      font-family: inherit;
+      font-size: 12.5px;
+      font-weight: var(--w-medium);
+      line-height: 1;
+      color: var(--text-2);
       cursor: pointer;
-      font-size: 0.95em;
       transition:
-        background 0.2s,
-        border 0.2s;
+        background 120ms,
+        color 120ms,
+        box-shadow 120ms;
     }
 
-    .button-group .range-btn:first-child {
-      border-radius: var(--curvature-widget) 0 0 var(--curvature-widget);
+    /* The hover wash sits on the sunken track, so --sunken itself
+       would be invisible here. Derived from --text-1 rather than a raw
+       rgba literal so it follows the palette (the tokens file mixes
+       against transparent the same way for --focus-halo). */
+    .range-btn:hover:not(.selected) {
+      background: color-mix(in srgb, var(--text-1) 6%, transparent);
+      color: var(--text-1);
     }
 
-    .button-group .range-btn:last-child {
-      border-radius: 0 var(--curvature-widget) var(--curvature-widget) 0;
+    .range-btn.selected {
+      background: var(--surface);
+      color: var(--accent-700);
+      box-shadow: var(--shadow-1);
+      cursor: default;
     }
 
-    .range-btn.selected,
-    .range-btn:active {
-      background: var(--accent-50);
-      border-color: var(--accent);
+    .range-btn:focus-visible,
+    .nav-arrow:focus-visible {
+      outline: none;
+      box-shadow: var(--focus-halo);
     }
   `;
 
+  // the periods in the segmented control, in display order
+  private static RANGES: {
+    type: 'W' | 'M' | 'Y' | 'ALL';
+    label: string;
+    title: string;
+  }[] = [
+    { type: 'W', label: 'W', title: 'Last week' },
+    { type: 'M', label: 'M', title: 'Last month' },
+    { type: 'Y', label: 'Y', title: 'Last year' },
+    { type: 'ALL', label: 'All', title: 'All time' }
+  ];
+
   @property({ type: String, attribute: 'start' })
   startDate = '';
 
@@ -465,6 +515,15 @@ export class RangePicker extends RapidElement {
     } ${amount} ${unit}`;
   }
 
+  private getNavigationTitle(direction: 'previous' | 'next'): string {
+    const prefix = direction === 'previous' ? 'Previous' : 'Next';
+    if (this.selectedRange === 'W') return `${prefix} week`;
+    if (this.selectedRange === 'M') return `${prefix} month`;
+    if (this.selectedRange === 'Y') return `${prefix} year`;
+    if (this.selectedRange === '') return this.getNavigationLabel(direction);
+    return `${prefix} period`;
+  }
+
   willUpdate(changed: PropertyValues) {
     super.willUpdate(changed);
 
@@ -543,7 +602,7 @@ export class RangePicker extends RapidElement {
               >${this.formatDateForDisplay(this.startDate) ||
               'Start date'}</span
             >`}
-        <span> - </span>
+        <span class="range-separator">–</span>
         ${this.editingEnd
           ? html`<temba-datepicker
               .value=${this.endDate}
@@ -566,61 +625,34 @@ export class RangePicker extends RapidElement {
             class="nav-arrow ${this.selectedRange === 'ALL' ? 'hidden' : ''}"
             ?disabled=${!this.canNavigatePrevious()}
             @click=${this.navigatePrevious}
-            title="Previous ${this.selectedRange === 'W'
-              ? 'week'
-              : this.selectedRange === 'M'
-                ? 'month'
-                : this.selectedRange === 'Y'
-                  ? 'year'
-                  : this.selectedRange === ''
-                    ? this.getNavigationLabel('previous')
-                    : 'period'}"
+            title=${this.getNavigationTitle('previous')}
+            aria-label=${this.getNavigationTitle('previous')}
           >
-            ◀
+            <temba-icon name=${Icon.arrow_left}></temba-icon>
           </button>
-          <div class="button-group">
-            <button
-              class="range-btn ${this.selectedRange === 'W' ? 'selected' : ''}"
-              @click=${() => this.setRange('W')}
-            >
-              W
-            </button>
-            <button
-              class="range-btn ${this.selectedRange === 'M' ? 'selected' : ''}"
-              @click=${() => this.setRange('M')}
-            >
-              M
-            </button>
-            <button
-              class="range-btn ${this.selectedRange === 'Y' ? 'selected' : ''}"
-              @click=${() => this.setRange('Y')}
-            >
-              Y
-            </button>
-            <button
-              class="range-btn ${this.selectedRange === 'ALL'
-                ? 'selected'
-                : ''}"
-              @click=${() => this.setRange('ALL')}
-            >
-              All
-            </button>
+          <div class="button-group" role="group" aria-label="Period">
+            ${RangePicker.RANGES.map(
+              (range) =>
+                html`<button
+                  class="range-btn ${this.selectedRange === range.type
+                    ? 'selected'
+                    : ''}"
+                  title=${range.title}
+                  aria-pressed=${this.selectedRange === range.type}
+                  @click=${() => this.setRange(range.type)}
+                >
+                  ${range.label}
+                </button>`
+            )}
           </div>
           <button
             class="nav-arrow ${this.selectedRange === 'ALL' ? 'hidden' : ''}"
             ?disabled=${!this.canNavigateNext()}
             @click=${this.navigateNext}
-            title="Next ${this.selectedRange === 'W'
-              ? 'week'
-              : this.selectedRange === 'M'
-                ? 'month'
-                : this.selectedRange === 'Y'
-                  ? 'year'
-                  : this.selectedRange === ''
-                    ? this.getNavigationLabel('next')
-                    : 'period'}"
+            title=${this.getNavigationTitle('next')}
+            aria-label=${this.getNavigationTitle('next')}
           >
-            ▶
+            <temba-icon name=${Icon.arrow_right}></temba-icon>
           </button>
         </div>
       </div>

package/src/interfaces.ts

@@ -47,6 +47,14 @@ export interface Attachment {
   error: string;
 }
 
+/** A quick reply as stored/served by the server (engine shape) —
+ * `text` buttons carry text, `location` requests may omit it. */
+export interface QuickReply {
+  type?: string;
+  text?: string;
+  extra?: string;
+}
+
 export enum DateStyle {
   DayFirst = 'day_first',
   MonthFirst = 'month_first',
@@ -231,8 +239,9 @@ export interface Broadcast {
   /** Base-language attachments (`{content_type, url}` objects or
    * `contentType:url` strings). */
   attachments?: (string | Attachment)[];
-  /** Base-language quick replies. */
-  quick_replies?: string[];
+  /** Base-language quick replies — engine `{text}` objects, with
+   * plain strings tolerated for older data. */
+  quick_replies?: (string | QuickReply)[];
   /** The opt-in the broadcast requests, when it is one. */
   optin?: ObjectReference | null;
   /** The WhatsApp template the broadcast sends, when it uses one. */
@@ -271,7 +280,7 @@ export interface Msg {
   text: string;
   status: string;
   channel: ObjectReference;
-  quick_replies: string[];
+  quick_replies: (string | QuickReply)[];
   urn: string;
   /** The message's contact — populated by the messages CRUDL
    * endpoint. Carries whichever of name/urn the endpoint exposes. */
@@ -479,6 +488,7 @@ export enum CustomEventType {
   StoreUpdated = 'temba-store-updated',
   Ready = 'temba-ready',
   OrderChanged = 'temba-order-changed',
+  ColumnOrderChanged = 'temba-column-order-changed',
   DragStart = 'temba-drag-start',
   DragStop = 'temba-drag-stop',
   DragExternal = 'temba-drag-external',

package/src/list/BroadcastList.ts

@@ -872,7 +872,9 @@ export class BroadcastList extends ContentList<Broadcast> {
                           ${broadcast.quick_replies.map(
                             (reply) =>
                               html`<temba-label type="neutral"
-                                >${reply}</temba-label
+                                >${typeof reply === 'string'
+                                  ? reply
+                                  : (reply.text ?? reply.type)}</temba-label
                               >`
                           )}
                         </div>`

package/src/list/ContactList.ts

@@ -3,13 +3,19 @@ import { property, state } from 'lit/decorators.js';
 import { ContentList, ContentListColumn } from './ContentList';
 import { Icon } from '../Icons';
 import { Contact } from '../interfaces';
-import { getUrl } from '../utils';
+import { getUrl, postJSON } from '../utils';
+import { getStore } from '../store/Store';
 
 const FIELD_PREFIX = 'field:';
 
 /** Placeholder shown in any cell whose value is empty. */
 const EMPTY = '--';
 
+/** Ceiling on how many pages of fields we'll walk. The API serves 250
+ * per page, so this is far past any real workspace — it exists only so
+ * an endpoint that keeps handing back a `next` can't spin forever. */
+const MAX_FIELD_PAGES = 20;
+
 /**
  * Contact CRUDL list — drop-in replacement for the rapidpro
  * `contacts/contact_list.html` table. Each row carries a contact
@@ -22,6 +28,11 @@ const EMPTY = '--';
  * {@link ContactList.fieldsEndpoint} on connect; cells read each
  * contact's value out of `item.fields[<key>]`. Date/time fields
  * render as a relative duration, matching the Last-seen column.
+ *
+ * When {@link ContactList.priorityEndpoint} is set the field columns
+ * can be dragged into a new order, which is saved as the workspace's
+ * featured-field order (the list renders featured fields by priority,
+ * so column order and field order are the same thing).
  */
 export class ContactList extends ContentList<Contact> {
   static get styles() {
@@ -45,10 +56,25 @@ export class ContactList extends ContentList<Contact> {
   }
 
   /** Endpoint returning `{ results: ContactField[] }`. Fields where
-   * `featured: true` become extra columns. */
+   * `featured: true` become extra columns.
+   *
+   * The list deliberately fetches fields itself instead of reading the
+   * global store: it has to work standalone (and against a custom
+   * endpoint), and it may mount before any store exists on the page.
+   * The store, when present, is only *told* about changes — see the
+   * refresh after a priority save. The endpoint has no featured filter,
+   * so the fetch pages through all fields and filters client-side. */
   @property({ type: String, attribute: 'fields-endpoint' })
   fieldsEndpoint = '/api/v2/fields.json';
 
+  /** Endpoint accepting `{ featured: [keys...] }` to save featured-field
+   * order (the same one the fields management page posts to). When set,
+   * the field columns become drag-reorderable and a drop saves the new
+   * order org-wide; the host only sets it for users holding the
+   * update-priority permission. */
+  @property({ type: String, attribute: 'priority-endpoint' })
+  priorityEndpoint = '';
+
   /** Anonymous workspaces mask URN values, so instead of the URN
    * column the list shows each contact's ref (served as its own
    * anon-only key by the endpoint). */
@@ -104,7 +130,7 @@ export class ContactList extends ContentList<Contact> {
     // Rebuilding here (rather than in updated()) means a mounted
     // anon attribute is reflected in the first paint instead of
     // flashing the URN header for a frame.
-    if (changes.has('anon')) {
+    if (changes.has('anon') || changes.has('priorityEndpoint')) {
       this.columns = this.buildColumns();
     }
   }
@@ -127,11 +153,27 @@ export class ContactList extends ContentList<Contact> {
     const controller = new AbortController();
     this.pendingFieldsController = controller;
     try {
-      const response = await getUrl(this.fieldsEndpoint, controller);
-      // If the controller has been swapped or cleared, the response
-      // is from a stale request — drop it on the floor.
-      if (this.pendingFieldsController !== controller) return;
-      const all = response.json?.results || [];
+      // The fields API is cursor paginated (250 per page), and the
+      // featured list a drop posts back is authoritative — any featured
+      // field we never read would be silently un-featured org-wide. So
+      // walk every page before deciding what's featured. Nothing is
+      // assigned until the whole walk lands, so a page that fails leaves
+      // the previous (complete) list in place rather than a truncated one.
+      const all: any[] = [];
+      const fetched = new Set<string>();
+      let url: string = this.fieldsEndpoint;
+      for (let page = 0; url && page < MAX_FIELD_PAGES; page++) {
+        // an endpoint whose `next` points back at a page we've already
+        // read would otherwise loop until the page cap
+        if (fetched.has(url)) break;
+        fetched.add(url);
+        const response = await getUrl(url, controller);
+        // If the controller has been swapped or cleared, the response
+        // is from a stale request — drop it on the floor.
+        if (this.pendingFieldsController !== controller) return;
+        all.push(...(response.json?.results || []));
+        url = response.json?.next || '';
+      }
       this.featuredFields = all
         .filter((f: any) => f.featured)
         .sort((a: any, b: any) => (b.priority ?? 0) - (a.priority ?? 0));
@@ -173,7 +215,11 @@ export class ContactList extends ContentList<Contact> {
         sortable: true,
         resizeMinWidth: '40px',
         maxWidth: '200px',
-        resizable: true
+        resizable: true,
+        // Field columns can be dragged into a new order, but only when
+        // the host wired up somewhere to save it — reordering that
+        // silently reverts on reload would read as broken.
+        reorderable: !!this.priorityEndpoint
       })
     );
     // Name + URN are the pinned identity columns and are not
@@ -224,6 +270,64 @@ export class ContactList extends ContentList<Contact> {
     ];
   }
 
+  /** A committed header drag reordered the field columns — keep
+   * featuredFields aligned with the new column order (so any rebuild
+   * preserves it) and save it as the workspace's featured-field order.
+   * Column order maps directly onto priority: leftmost = highest, the
+   * same contract as the fields management page, whose endpoint this
+   * posts to with the full featured list. */
+  protected onColumnOrderChanged(columns: ContentListColumn[]): void {
+    // A fields fetch still in flight was started against the old order
+    // and would land on top of the drop, snapping the columns back with
+    // the new order already on its way to the server.
+    if (this.pendingFieldsController) {
+      this.pendingFieldsController.abort();
+      this.pendingFieldsController = undefined;
+    }
+    const keys = columns
+      .filter((c) => c.key.startsWith(FIELD_PREFIX))
+      .map((c) => c.key.substring(FIELD_PREFIX.length));
+    this.featuredFields = keys
+      .map((key) => (this.featuredFields || []).find((f: any) => f.key === key))
+      .filter(Boolean);
+    if (!this.priorityEndpoint) return;
+    postJSON(this.priorityEndpoint, { featured: keys })
+      .then((response) => {
+        // postUrl only rejects on 5xx, so a 400/403/404 arrives here as a
+        // perfectly resolved promise — the order was never stored and we
+        // have to treat it as the failure it is.
+        if (response.status < 200 || response.status >= 300) {
+          throw response;
+        }
+      })
+      .catch((error) => {
+        console.warn('failed to save featured field order', error);
+        // The list went away while the save was in flight — there are no
+        // columns left to put back, and refetching would only leave a
+        // request outstanding against a detached element.
+        if (!this.isConnected) return;
+        // Nothing made the dragged order durable, so stop showing it —
+        // refetch and fall back on whatever the server still holds. The
+        // success path deliberately doesn't refetch: we already display
+        // exactly what we just saved, and a read-replica answering with
+        // pre-write data would yank the columns back for no reason.
+        this.loadFields();
+      })
+      .finally(() => {
+        // Featured fields are workspace state other components on the
+        // page read from the store (contact details, the fields page),
+        // so its cached copy has to hear about the new order too. Looked
+        // up here rather than cached on connect so a list that mounted
+        // ahead of the store still finds it.
+        getStore()
+          ?.refreshFields()
+          .catch(() => {
+            // a stale store cache is cosmetic and elsewhere; the list
+            // itself is already showing the saved order
+          });
+      });
+  }
+
   protected getRowIcon(_item: Contact): string | null {
     return Icon.contact;
   }