feat: UI to show the SLA threshold in chat screen (#9146)

- UI will show the breach in the conversation list.
- UI will show the breach in the conversation header.

Fixes: https://linear.app/chatwoot/issue/CW-3146/update-the-ui-to-show-the-breach-in-the-conversation-list
Fixes: https://linear.app/chatwoot/issue/CW-3144/ui-update-to-show-the-breachgoing-to-breach

app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue

@@ -1,13 +1,14 @@
 <template>
   <div
-    v-show="activeLabels.length"
+    v-if="activeLabels.length || $slots.before"
     ref="labelContainer"
-    class="label-container mt-0.5 mx-2 mb-0"
+    v-resize="computeVisibleLabelPosition"
   >
     <div
-      class="labels-wrap flex items-end min-w-0 flex-shrink gap-y-1 flex-wrap"
-      :class="{ expand: showAllLabels }"
+      class="flex items-end flex-shrink min-w-0 gap-y-1"
+      :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
     >
+      <slot name="before" />
       <woot-label
         v-for="(label, index) in activeLabels"
         :key="label.id"
@@ -26,7 +27,7 @@
             ? $t('CONVERSATION.CARD.HIDE_LABELS')
             : $t('CONVERSATION.CARD.SHOW_LABELS')
         "
-        class="show-more--button sticky flex-shrink-0 right-0 mr-6 rtl:rotate-180"
+        class="sticky right-0 flex-shrink-0 mr-6 show-more--button rtl:rotate-180"
         color-scheme="secondary"
         variant="hollow"
         :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
@@ -59,26 +60,34 @@ export default {
     },
   },
   mounted() {
+    // the problem here is that there is a certain amount of delay between the conversation
+    // card being mounted and the resize event eventually being triggered
+    // This means we need to run the function immediately after the component is mounted
+    // Happens especially when used in a virtual list.
+    // We can make the first trigger, a standard part of the directive, in case
+    // we face this issue again
     this.computeVisibleLabelPosition();
   },
   methods: {
     onShowLabels(e) {
       e.stopPropagation();
       this.showAllLabels = !this.showAllLabels;
+      this.$nextTick(() => this.computeVisibleLabelPosition());
     },
     computeVisibleLabelPosition() {
+      const beforeSlot = this.$slots.before ? 100 : 0;
       const labelContainer = this.$refs.labelContainer;
-      const labels = this.$refs.labelContainer.querySelectorAll('.label');
+      if (!labelContainer) return;
+
+      const labels = Array.from(labelContainer.querySelectorAll('.label'));
       let labelOffset = 0;
       this.showExpandLabelButton = false;
-
-      Array.from(labels).forEach((label, index) => {
+      labels.forEach((label, index) => {
         labelOffset += label.offsetWidth + 8;
-
-        if (labelOffset < labelContainer.clientWidth - 16) {
+        if (labelOffset < labelContainer.clientWidth - 16 - beforeSlot) {
           this.labelPosition = index;
         } else {
-          this.showExpandLabelButton = true;
+          this.showExpandLabelButton = labels.length > 1;
         }
       });
     },
@@ -95,10 +104,6 @@ export default {
 }
 
 .labels-wrap {
-  &.expand {
-    @apply h-auto overflow-visible flex-row flex-wrap;
-  }
-
   .secondary {
     @apply border border-solid border-slate-100 dark:border-slate-700;
   }