@nyaruka/temba-components 0.169.0 → 0.170.1

package/src/list/ContentMenu.ts

@@ -34,15 +34,23 @@ export enum ContentMenuItemType {
 export class ContentMenu extends RapidElement {
   static get styles() {
     return css`
-      :host {
-        tabindex: 0;
-        z-index: 5000;
-      }
       .container {
         display: flex;
         align-items: center;
       }
 
+      temba-dropdown {
+        /* as a flex item of .container this z-index takes effect and
+           creates a stacking context — keep it in sync with the popup's
+           z-index inside temba-dropdown (9000) so the open menu clears
+           floating windows like the simulator (5000). This also keeps
+           the closed toggle above those windows, intentionally: the
+           menu has to stay clickable when a floating window overlaps
+           the header. Scoped here rather than on :host so the action
+           buttons rendered alongside keep their normal stacking. */
+        z-index: 9000;
+      }
+
       .button_item,
       .primary_button_item {
         margin-left: 1rem;
@@ -68,7 +76,6 @@ export class ContentMenu extends RapidElement {
         color: rgb(45, 45, 45);
         z-index: 50;
         min-width: 200px;
-        tabindex: 0;
       }
 
       .divider {
@@ -82,7 +89,6 @@ export class ContentMenu extends RapidElement {
         font-size: 1.1rem;
         cursor: pointer;
         font-weight: 400;
-        tabindex: 0;
       }
 
       .item:hover {

package/src/list/FieldList.ts

@@ -377,7 +377,14 @@ export class FieldList extends EndpointMonitorElement {
 
       .menu-button.destructive:hover {
         border-color: #dc2626;
-        background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #fdf2f2;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .menu-button.destructive:hover {
+          background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        }
       }
 
       .detail-body {

package/src/list/TembaList.ts

@@ -56,6 +56,9 @@ export class TembaList extends RapidElement {
   @property({ attribute: false })
   renderOption: (option: any, selected: boolean) => TemplateResult;
 
+  @property({ attribute: false })
+  renderDivider: (prev: any, option: any) => TemplateResult | null;
+
   @property({ attribute: false })
   renderOptionDetail: (option: any, selected: boolean) => TemplateResult;
 
@@ -68,6 +71,10 @@ export class TembaList extends RapidElement {
 
   reverseRefresh = true;
 
+  // subclasses can enforce a display order when refreshed items are merged in,
+  // otherwise new items simply land at the top of the list
+  protected compareItems: (a: any, b: any) => number = null;
+
   // subclasses that get realtime updates can opt out of interval polling
   protected pollingEnabled = true;
 
@@ -251,6 +258,24 @@ export class TembaList extends RapidElement {
     return Promise.resolve(results);
   }
 
+  /**
+   * Finds where the item our cursor was pinned to ended up after a merge
+   * re-ordered our list. Returns null if the cursor is still on the right item,
+   * otherwise the index it moved to (-1 if it is no longer in the list).
+   */
+  private findRepinnedCursorIndex(prevItem: any, newItems: any[]): number {
+    if (!prevItem) {
+      return null;
+    }
+
+    const prevValue = this.getValue(prevItem);
+    if (prevValue === this.getValue(newItems[this.cursorIndex])) {
+      return null;
+    }
+
+    return newItems.findIndex((option) => this.getValue(option) === prevValue);
+  }
+
   /**
    * Refreshes the first page, updating any found items in our list
    */
@@ -303,7 +328,15 @@ export class TembaList extends RapidElement {
         }
         const newItems = [...results, ...items];
 
+        // capture the top item before any display sort - it means "the newest
+        // item we just fetched, or the previous top if we fetched nothing" and
+        // drives the Refreshed event
         const topItem = newItems[0];
+
+        if (this.compareItems) {
+          newItems.sort(this.compareItems);
+        }
+
         if (
           !this.mostRecentItem ||
           JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)
@@ -311,27 +344,21 @@ export class TembaList extends RapidElement {
           this.mostRecentItem = topItem;
         }
 
-        if (prevItem) {
-          const newItem = newItems[this.cursorIndex];
-          const prevValue = this.getValue(prevItem);
-          if (prevValue !== this.getValue(newItem)) {
-            const newIndex = newItems.findIndex(
-              (option) => this.getValue(option) === prevValue
-            );
-            this.cursorIndex = newIndex;
-
-            // make sure our focused item is visible
-            window.setTimeout(() => {
-              const options = this.shadowRoot.querySelector('temba-options');
-              if (options) {
-                const option =
-                  options.shadowRoot.querySelector('.option.focused');
-                if (option) {
-                  option.scrollIntoView({ block: 'end', inline: 'nearest' });
-                }
+        const newIndex = this.findRepinnedCursorIndex(prevItem, newItems);
+        if (newIndex !== null && newIndex > -1) {
+          this.cursorIndex = newIndex;
+
+          // make sure our focused item is visible
+          window.setTimeout(() => {
+            const options = this.shadowRoot.querySelector('temba-options');
+            if (options) {
+              const option =
+                options.shadowRoot.querySelector('.option.focused');
+              if (option) {
+                option.scrollIntoView({ block: 'end', inline: 'nearest' });
               }
-            }, 0);
-          }
+            }
+          }, 0);
         }
 
         this.items = newItems;
@@ -457,18 +484,60 @@ export class TembaList extends RapidElement {
   private handleScrollThreshold() {
     if (this.nextPage && !this.loading) {
       this.loading = true;
-      fetchResultsPage(this.nextPage).then((page: ResultsPage) => {
-        this.sanitizeResults(page.results).then((sanitizedResults) => {
-          if (this.sanitizeOption) {
-            sanitizedResults.forEach(this.sanitizeOption);
-          }
+      fetchResultsPage(this.nextPage)
+        .then((page: ResultsPage) => {
+          return this.sanitizeResults(page.results).then(
+            (sanitizedResults: any[]) => {
+              if (this.sanitizeOption) {
+                sanitizedResults.forEach(this.sanitizeOption);
+              }
+
+              // the item our cursor is pinned to, sorting can move it
+              const prevItem = this.items[this.cursorIndex];
+
+              // drop anything we already have, a poll can pull an item from the
+              // next page up into our loaded window before we fetch it
+              const seen = new Set(
+                this.items.map((option) => this.getValue(option))
+              );
+              const appended = (sanitizedResults || []).filter(
+                (option: any) => {
+                  const value = this.getValue(option);
+                  if (seen.has(value)) {
+                    return false;
+                  }
+                  seen.add(value);
+                  return true;
+                }
+              );
 
-          this.items = [...this.items, ...sanitizedResults];
-          this.nextPage = page.next;
-          this.pages++;
+              const items = [...this.items, ...appended];
+
+              // the server pages in the same total order we display in, so this is
+              // normally a no-op, but a poll can re-sort an item (say a ticket that
+              // just closed) into the loaded window - without this the appended
+              // page would land below it
+              if (this.compareItems) {
+                items.sort(this.compareItems);
+              }
+
+              // the sort can shift our selection, keep the cursor on it
+              const newIndex = this.findRepinnedCursorIndex(prevItem, items);
+              if (newIndex !== null && newIndex > -1) {
+                this.cursorIndex = newIndex;
+              }
+
+              this.items = items;
+              this.nextPage = page.next;
+              this.pages++;
+              this.loading = false;
+            }
+          );
+        })
+        .catch(() => {
+          // let the next scroll try again instead of wedging on loading
           this.loading = false;
         });
-      });
     }
   }
 
@@ -512,6 +581,7 @@ export class TembaList extends RapidElement {
         ?loading=${this.loading}
         ?internalFocusDisabled=${this.internalFocusDisabled}
         .renderOption=${this.renderOption}
+        .renderDivider=${this.renderDivider}
         .renderOptionDetail=${this.renderOptionDetail}
         @temba-scroll-threshold=${this.handleScrollThreshold}
         @temba-selection=${this.handleSelection.bind(this)}

package/src/list/TicketList.ts

@@ -1,5 +1,6 @@
 import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import { TembaList } from './TembaList';
 import { Contact } from '../interfaces';
 import { Icon } from '../Icons';
@@ -9,15 +10,17 @@ export class TicketList extends TembaList {
   agent = '';
 
   public getRefreshEndpoint() {
-    if (this.items.length > 0) {
-      const lastActivity = this.items[0].ticket.last_activity_on;
+    // open tickets sort above closed ones, so the newest activity can be
+    // anywhere in the list, not just the top. Skip anything unparseable so a
+    // single bad timestamp can't poison the cursor with NaN
+    const lastActivity = this.items.reduce((newest, item) => {
+      const activity = new Date(item.ticket.last_activity_on).getTime();
+      return isNaN(activity) ? newest : Math.max(newest, activity);
+    }, 0);
+
+    if (lastActivity > 0) {
       const separator = this.endpoint.includes('?') ? '&' : '?';
-      return (
-        this.endpoint +
-        separator +
-        'after=' +
-        new Date(lastActivity).getTime() * 1000
-      );
+      return this.endpoint + separator + 'after=' + lastActivity * 1000;
     }
     return this.endpoint;
   }
@@ -35,10 +38,79 @@ export class TicketList extends TembaList {
     super();
 
     this.valueKey = 'ticket.uuid';
-    this.renderOption = (contact: Contact): TemplateResult => {
+    // the refresh feed is served oldest first - the inherited reverseRefresh
+    // keeps mostRecentItem meaning the newest fetched item (compareItems
+    // re-sorts the merged list immediately anyway)
+
+    this.compareItems = (a: Contact, b: Contact): number => {
+      const aClosed = !!a.ticket.closed_on;
+      const bClosed = !!b.ticket.closed_on;
+      if (aClosed !== bClosed) {
+        return aClosed ? 1 : -1;
+      }
+      return (
+        new Date(b.ticket.last_activity_on).getTime() -
+        new Date(a.ticket.last_activity_on).getTime()
+      );
+    };
+    // a quiet label marks where the list crosses from open into closed
+    // tickets - the rows themselves then only need gentle muting
+    this.renderDivider = (
+      prev: Contact,
+      contact: Contact
+    ): TemplateResult | null => {
+      if (!contact.ticket.closed_on || (prev && prev.ticket.closed_on)) {
+        return null;
+      }
+      const closed = msg('Closed');
+      return html`
+        <div
+          role="separator"
+          aria-label=${closed}
+          style="display:flex; align-items:center; gap:0.6em; padding:0.9em var(--pad) 0.2em var(--pad);"
+        >
+          <div
+            style="font-size:0.7em; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-4);"
+          >
+            ${closed}
+          </div>
+          <div
+            style="flex-grow:1; height:1px; background:var(--color-widget-border);"
+          ></div>
+        </div>
+      `;
+    };
+    this.renderOption = (
+      contact: Contact,
+      selected: boolean
+    ): TemplateResult => {
+      // closed tickets are settled history - a compact single line that
+      // recedes behind the open work above it
+      if (contact.ticket.closed_on) {
+        return html`
+          <div
+            style="display:flex; align-items:baseline; margin-top:0.1em; margin-bottom:0.1em; ${selected
+              ? ''
+              : 'color:var(--text-3);'}"
+          >
+            <div
+              style="flex:1; min-width:0; font-weight:400; line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
+            >
+              ${contact.name}
+            </div>
+            <div style="font-size:0.8em; margin-left:0.75em;">
+              <temba-date
+                value=${contact.ticket.closed_on}
+                display="duration"
+              ></temba-date>
+            </div>
+          </div>
+        `;
+      }
+
       return html`
         <div
-          style="align-items:center; margin-top: 0.1em; margin-bottom: 0.1em"
+          style="align-items:center; margin-top: 0.1em; margin-bottom: 0.1em;"
         >
           <div
             style="display:flex; align-items: flex-start;border:0px solid red;"
@@ -49,10 +121,8 @@ export class TicketList extends TembaList {
               >
                 ${contact.name}
               </div>
-              ${contact.ticket.closed_on
-                ? null
-                : contact.last_msg
-                  ? html`
+              ${contact.last_msg
+                ? html`
                     <div
                       style="font-size: 0.9em; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;"
                     >
@@ -81,13 +151,13 @@ export class TicketList extends TembaList {
                       }
                     </div></div>
                   `
-                  : null}
+                : null}
             </div>
             <div
               style="margin-right: -5px; margin-top: 0px;display:flex;flex-direction:column;align-items:flex-end;max-width:60px;min-width:30px;border:0px solid green;text-align:right"
             >
               <div>
-                ${!contact.ticket.closed_on && contact.ticket.assignee
+                ${contact.ticket.assignee
                   ? html`<temba-user
                       name=${contact.ticket.assignee.name}
                       email=${contact.ticket.assignee.email}
@@ -101,8 +171,7 @@ export class TicketList extends TembaList {
 
           <div style="font-size:0.8em;text-align:right;border:0px solid red;">
             <temba-date
-              value=${contact.ticket.closed_on ||
-              contact.ticket.last_activity_on}
+              value=${contact.ticket.last_activity_on}
               display="duration"
             ></temba-date>
           </div>

package/src/live/CampaignEvents.ts

@@ -273,11 +273,20 @@ export class CampaignEvents extends EndpointMonitorElement {
         justify-content: center;
         /* icons inside the dot take the dot's hue */
         --icon-color: var(--dot-color);
-        background: color-mix(
-          in srgb,
-          var(--dot-color) 12%,
-          var(--color-widget-bg, #fff)
-        );
+        /* plain widget bg for browsers without color-mix(); the tinted
+           fill below needs the @supports gate since var() keeps an
+           invalid declaration alive until computed-value time */
+        background: var(--color-widget-bg, #fff);
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .dot {
+          background: color-mix(
+            in srgb,
+            var(--dot-color) 12%,
+            var(--color-widget-bg, #fff)
+          );
+        }
       }
 
       /* the anchor marks the field's date itself - painted with the widget
@@ -470,7 +479,8 @@ export class CampaignEvents extends EndpointMonitorElement {
 
       .menu-button.destructive:hover {
         border-color: #dc2626;
-        background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #fdf2f2;
       }
 
       /* the event's action, contained with a leading type label. Children
@@ -481,16 +491,26 @@ export class CampaignEvents extends EndpointMonitorElement {
         align-items: flex-start;
         gap: 0.6em;
         padding: 0.9em 1em 1em;
-        background: color-mix(
-          in srgb,
-          var(--sunken, #f1f3f5) 45%,
-          var(--surface, #fff)
-        );
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #f9fafa;
         border: 1px solid var(--border, #e4e7ec);
         border-radius: var(--r);
         line-height: 1.5;
       }
 
+      @supports (color: color-mix(in srgb, red, red)) {
+        .menu-button.destructive:hover {
+          background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        }
+        .detail-action {
+          background: color-mix(
+            in srgb,
+            var(--sunken, #f1f3f5) 45%,
+            var(--surface, #fff)
+          );
+        }
+      }
+
       /* the close (✕) in the header's upper right - the square
          hover-wash button treatment (the pager buttons'), sitting
          just outboard of the action buttons */

package/src/live/ContactChat.ts

@@ -140,10 +140,18 @@ export class ContactChat extends ContactStoreElement {
 
       /* While the contact is in a flow the compose outline carries the
          flow hue: resting border matches the flow pill border, focus
-         goes solid flow green */
+         goes solid flow green. The pre-mixed static comes first — a
+         custom property can't fall back per-declaration, so the
+         derived version needs the @supports gate. */
       .in-flow .compose {
-        --compose-border: 1px solid
-          color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        --compose-border: 1px solid #c5e8d2;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .in-flow .compose {
+          --compose-border: 1px solid
+            color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        }
       }
 
       .in-flow .compose temba-compose {
@@ -459,10 +467,18 @@ export class ContactChat extends ContactStoreElement {
          status-area grey. Fallbacks match the --flow design token for
          pages without tokens. */
       .in-flow .contact-status {
-        background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+        /* pre-mixed statics first for browsers without color-mix() */
+        background: #e3f4e9;
         color: var(--flow, #16a34a);
         --icon-color: var(--flow, #16a34a);
-        border-top-color: color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        border-top-color: #c5e8d2;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .in-flow .contact-status {
+          background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+          border-top-color: color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        }
       }
 
       /* compact the interrupt button to the row's caption scale */
@@ -530,7 +546,14 @@ export class ContactChat extends ContactStoreElement {
       }
 
       .in-flow .chat-box {
-        background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+        /* pre-mixed static first for browsers without color-mix() */
+        background: #e3f4e9;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .in-flow .chat-box {
+          background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+        }
       }
 
       .ticket-controls {
@@ -883,9 +906,15 @@ export class ContactChat extends ContactStoreElement {
       return null;
     }
 
+    // unparseable values and zero-value times (e.g. go's zero time for a
+    // contact that has never been seen) mean there's no last seen to show
+    const lastSeen = DateTime.fromISO(lastSeenOn);
+    if (!lastSeen.isValid || lastSeen.year <= 1) {
+      return null;
+    }
+
     // recent activity speaks for itself in the chat - only surface last
     // seen once the contact has been quiet for at least an hour
-    const lastSeen = DateTime.fromISO(lastSeenOn);
     const minutes = DateTime.now().diff(lastSeen, 'minutes').minutes;
     if (minutes < 60) {
       return null;

package/src/live/ContactTimeline.ts

@@ -189,24 +189,36 @@ export class ContactTimeline extends EndpointMonitorElement {
         padding: 0.05em 0.65em;
         border-radius: 999px;
         white-space: nowrap;
-        background: color-mix(
-          in srgb,
-          var(--pill-hue) 12%,
-          var(--color-widget-bg, #fff)
-        );
-        border: 1px solid
-          color-mix(in srgb, var(--pill-hue) 25%, var(--color-widget-bg, #fff));
+        /* plain bg / neutral border for browsers without color-mix();
+           the hue-tinted versions live in the @supports block below */
+        background: var(--color-widget-bg, #fff);
+        border: 1px solid var(--pill-hue);
         color: var(--pill-hue);
         cursor: pointer;
         transition: background 100ms ease-in-out;
       }
 
-      .campaign-pill:hover {
-        background: color-mix(
-          in srgb,
-          var(--pill-hue) 22%,
-          var(--color-widget-bg, #fff)
-        );
+      @supports (color: color-mix(in srgb, red, red)) {
+        .campaign-pill {
+          background: color-mix(
+            in srgb,
+            var(--pill-hue) 12%,
+            var(--color-widget-bg, #fff)
+          );
+          border: 1px solid
+            color-mix(
+              in srgb,
+              var(--pill-hue) 25%,
+              var(--color-widget-bg, #fff)
+            );
+        }
+        .campaign-pill:hover {
+          background: color-mix(
+            in srgb,
+            var(--pill-hue) 22%,
+            var(--color-widget-bg, #fff)
+          );
+        }
       }
 
       .campaign-pill:focus-visible {
@@ -289,24 +301,34 @@ export class ContactTimeline extends EndpointMonitorElement {
       }
 
       /* past events are filled with a lighter tint of the same hue and keep
-         the solid border - they're settled, whether real or projected */
+         the solid border - they're settled, whether real or projected.
+         Plain widget bg first for browsers without color-mix(). */
       .dot.past {
-        background: color-mix(
-          in srgb,
-          var(--dot-color) 25%,
-          var(--color-widget-bg, #fff)
-        );
+        background: var(--color-widget-bg, #fff);
       }
 
       /* future events haven't occurred yet - signal that with a dotted
          border and the faintest tint of the hue inside */
       .dot.future {
         border-style: dotted;
-        background: color-mix(
-          in srgb,
-          var(--dot-color) 8%,
-          var(--color-widget-bg, #fff)
-        );
+        background: var(--color-widget-bg, #fff);
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .dot.past {
+          background: color-mix(
+            in srgb,
+            var(--dot-color) 25%,
+            var(--color-widget-bg, #fff)
+          );
+        }
+        .dot.future {
+          background: color-mix(
+            in srgb,
+            var(--dot-color) 8%,
+            var(--color-widget-bg, #fff)
+          );
+        }
       }
 
       /* the now dot and label both paint with the SPA content background

package/src/locales/es.ts

@@ -14,6 +14,7 @@
 'sbc913d7dc0f33877': `to add`,
 's7722a91d3a512442': str`Last seen ${0}`,
 's22965bb9808befb0': `Interrupt`,
+'s6dbbe2646b239ca5': `Closed`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/locales/fr.ts

@@ -14,6 +14,7 @@
 'sbc913d7dc0f33877': `to add`,
 's7722a91d3a512442': str`Last seen ${0}`,
 's22965bb9808befb0': `Interrupt`,
+'s6dbbe2646b239ca5': `Closed`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/locales/pt.ts

@@ -14,6 +14,7 @@
 'sbc913d7dc0f33877': `to add`,
 's7722a91d3a512442': str`Last seen ${0}`,
 's22965bb9808befb0': `Interrupt`,
+'s6dbbe2646b239ca5': `Closed`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/simulator/Simulator.ts

@@ -630,6 +630,7 @@ export class Simulator extends RapidElement {
       }
       .message-input input {
         flex: 1;
+        min-width: 0;
         border: 1px solid #c6c6c857;
         border-radius: 20px;
         padding: 8px 15px;