@nyaruka/temba-components 0.159.3 → 0.159.5

package/src/list/FlowList.ts

@@ -5,10 +5,10 @@ import { Flow, ObjectReference } from '../interfaces';
 
 /**
  * Flow CRUDL list — drop-in replacement for the rapidpro
- * `flows/flow_list.html` table. Each row's leading icon reflects
- * the flow type (messaging / voice / background / surveyor).
- * Columns: name, status, runs, ongoing, completion bar, activity
- * sparkline.
+ * `flows/flow_list.html` table. Rows of the unusual flow types
+ * (voice / background / surveyor) carry a leading type icon;
+ * message flows don't. Columns: name, runs, ongoing, completion
+ * bar, activity sparkline.
  */
 export class FlowList extends ContentList<Flow> {
   static get styles() {
@@ -92,7 +92,6 @@ export class FlowList extends ContentList<Flow> {
         width: '280px',
         pinned: true
       },
-      { key: 'status', label: 'Status', width: '110px' },
       {
         key: 'runs',
         label: 'Runs',
@@ -137,7 +136,9 @@ export class FlowList extends ContentList<Flow> {
       case 'survey':
         return Icon.flow_surveyor;
       default:
-        return Icon.flow_message;
+        // message flows are the common case and carry no icon — only
+        // the unusual types get flagged, matching the legacy table
+        return null;
     }
   }
 
@@ -183,8 +184,6 @@ export class FlowList extends ContentList<Flow> {
         return this.renderCompletion(item);
       case 'activity':
         return this.renderSparkline(item.activity || []);
-      case 'status':
-        return this.renderFlowStatus(item);
       default:
         return super.renderCell(item, column);
     }
@@ -235,11 +234,4 @@ export class FlowList extends ContentList<Flow> {
       </svg>
     `;
   }
-
-  private renderFlowStatus(item: Flow): TemplateResult {
-    const status = (item.status || 'active').toString().toLowerCase();
-    const kind = status === 'archived' ? 'archived' : 'active';
-    const label = status === 'archived' ? 'Archived' : 'Active';
-    return this.renderStatusPill(kind, label);
-  }
 }

package/src/list/MsgList.ts

@@ -8,7 +8,7 @@ import { Msg } from '../interfaces';
  * `msgs/msg_list.html` table. Reverse-chronological; the message
  * cell carries the body text with its attachment thumbnails right
  * after it and the flow / label pills pushed to the trailing edge,
- * with a duration timestamp closing the row.
+ * with a timedate timestamp closing the row.
  */
 export class MsgList extends ContentList<Msg> {
   static get styles() {
@@ -100,11 +100,13 @@ export class MsgList extends ContentList<Msg> {
     this.searchPlaceholder = 'Search messages';
     // Messages page 100 at a time, matching rapidpro's msg list.
     this.pageSize = 100;
-    // Fixed layout so a long message ellipsis-truncates within its
-    // column instead of stretching the table; minTableWidth lets the
-    // list scroll horizontally once the container is too narrow to
-    // keep the columns usable, rather than clipping anything.
-    this.fixedLayout = true;
+    // Auto layout so the Contact / Sent columns size to their content
+    // (no stranded width on the short Sent value), while the Message
+    // column is a `grow` column — under auto layout it claims zero
+    // intrinsic width and ellipsis-truncates against the leftover space
+    // rather than stretching the table. minTableWidth lets the list
+    // scroll horizontally once the container is too narrow to keep the
+    // columns usable, rather than clipping anything.
     this.minTableWidth = '640px';
     this.columns = [
       {
@@ -117,9 +119,7 @@ export class MsgList extends ContentList<Msg> {
       {
         key: 'created_on',
         label: 'Sent',
-        width: '120px',
-        align: 'right',
-        pinned: 'right'
+        align: 'right'
       }
     ];
     this.bulkActions = [
@@ -172,7 +172,7 @@ export class MsgList extends ContentList<Msg> {
     `;
   }
 
-  /** The sent cell — duration timestamp with an optional channel-log
+  /** The sent cell — timedate timestamp with an optional channel-log
    * icon to its right. The icon is rendered when the server includes
    * a logs_url on the row (permission- and retention-gated
    * server-side). stopPropagation keeps the row's contact navigation
@@ -181,7 +181,7 @@ export class MsgList extends ContentList<Msg> {
     if (!item.created_on) return '';
     return html`
       <div class="sent-cell">
-        <temba-date value=${item.created_on} display="duration"></temba-date>
+        <temba-date value=${item.created_on} display="timedate"></temba-date>
         ${item.logs_url && this.isSafeHref(item.logs_url)
           ? html`
               <a