chore: Update feedback fixes

2026-01-16 01:21:51 +05:30
parent 8e5e5692fd
commit ed590a0684
27 changed files with 346 additions and 276 deletions
@@ -116,7 +116,7 @@ const labelsCountText = computed(() => {
    });
  }
  if (!showAllLabels.value && hiddenLabelsCount.value > 0) {
-    return `+${hiddenLabelsCount.value}`;
+    return hiddenLabelsCount.value;
  }
  return '';
 });
@@ -181,8 +181,8 @@ const onShowLabels = e => {
      xs
      slate
      :no-animation="disableToggle"
-      :icon="labelsCountText ? '' : 'i-lucide-chevron-left'"
-      class="!py-0 !px-1.5 flex-shrink-0 !rounded-md !bg-n-button-color -outline-offset-1"
+      :icon="labelsCountText ? 'i-lucide-plus' : 'i-lucide-chevron-left'"
+      class="!py-0 !px-1.5 flex-shrink-0 !rounded-md !bg-n-button-color -outline-offset-1 !gap-0.5 [&>span:first-child]:!text-n-slate-10 [&>span:last-child]:!text-n-slate-11"
      :class="{ 'cursor-default': disableToggle }"
      @click="onShowLabels"
    />
@@ -48,11 +48,6 @@ const showSection = computed(() => {
  >
    <div class="flex-1 min-w-0 flex items-center gap-0.5">
      <InboxName v-if="showInboxName" :inbox="inbox" class="min-w-0" />
-      <div
-        v-if="showInboxName && hasSlaPolicyId"
-        class="rounded-lg h-3 w-px bg-n-strong mx-1"
-      />
-      <SLACardLabel v-if="hasSlaPolicyId" ref="slaCardLabel" :chat="chat" />
    </div>
    <div class="flex items-center gap-1.5 flex-shrink-0">
      <CardPriorityIcon
@@ -1,11 +1,12 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
 import CardMetaSection from './CardMetaSection.vue';
 import CardAvatar from './CardAvatar.vue';
 import CardHeader from './CardHeader.vue';
 import CardContent from './CardContent.vue';
 import CardLabels from './CardLabels.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';

 const props = defineProps({
  chat: { type: Object, required: true },
@@ -24,6 +25,8 @@ const props = defineProps({

 const emit = defineEmits(['selectConversation', 'click', 'contextmenu']);

+const slaCardLabel = useTemplateRef('slaCardLabel');
+
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 const showLabelsSection = computed(() => props.chat.labels?.length > 0);
 const showExpandedPreview = computed(
@@ -37,6 +40,10 @@ const voiceCallData = computed(() => ({

 const unreadCount = computed(() => props.chat?.unread_count);

+const hasSlaPolicyId = computed(
+  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
+);
+
 const onSelectConversation = checked => {
  emit('selectConversation', checked);
 };
@@ -103,8 +110,9 @@ const onSelectConversation = checked => {
            v-if="showLabelsSection || isInboxView"
            :labels="chat.labels"
          >
-            <template v-if="isInboxView" #before>
+            <template #before>
              <CardMetaSection
+                v-if="isInboxView"
                :chat="chat"
                :inbox="inbox"
                :show-assignee="showAssignee"
@@ -112,6 +120,12 @@ const onSelectConversation = checked => {
                :is-labels-empty="chat.labels.length === 0"
                inline
              />
+              <SLACardLabel
+                v-else-if="hasSlaPolicyId"
+                ref="slaCardLabel"
+                data-before-slot
+                :chat="chat"
+              />
            </template>
          </CardLabels>
        </div>
@@ -116,11 +116,23 @@ const selectedModel = computed({
        <InboxName v-if="showInboxName" :inbox="inbox" class="min-w-0" />
      </div>

-      <span
-        class="text-label-small outline outline-1 -outline-offset-1 outline-n-weak px-1.5 rounded-md h-6 text-n-slate-11 min-w-12 flex-shrink-0 inline-flex items-center justify-center truncate"
+      <div class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div
+        v-tooltip.top="{
+          content: chat.id,
+          delay: { show: 500, hide: 0 },
+        }"
+        class="h-6 flex items-center gap-1 max-w-20 w-full min-w-0"
      >
-        {{ chat.id }}
-      </span>
+        <Icon
+          icon="i-woot-hash"
+          class="size-3.5 text-n-slate-10 flex-shrink-0"
+        />
+        <span class="text-label-small text-n-slate-11 truncate">
+          {{ chat.id }}
+        </span>
+      </div>

      <CardAvatar
        :contact="currentContact"
@@ -5,6 +5,7 @@ import { useCamelCase } from 'dashboard/composables/useTransformKeys';

 import SLAPopoverCard from './SLAPopoverCard.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';

 const props = defineProps({
  chat: {
@@ -35,9 +36,6 @@ const appliedSLA = computed(() => props.chat?.applied_sla);
 const slaEvents = computed(() => props.chat?.sla_events);
 const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
 const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
-const slaTextStyles = computed(() =>
-  isSlaMissed.value ? 'text-n-ruby-11' : 'text-n-amber-11'
-);

 const conversation = computed(() => useCamelCase(props.chat, { deep: true }));

@@ -83,16 +81,15 @@ defineExpose({
    v-bind="$attrs"
    class="relative flex items-center cursor-pointer min-w-fit group"
  >
-    <div class="flex items-center w-full truncate gap-1" :class="slaTextStyles">
-      <Icon
-        icon="i-lucide-flame"
-        class="flex-shrink-0 size-3"
-        :class="slaTextStyles"
-      />
-      <span class="text-label-small" :class="slaTextStyles">
-        {{ slaStatus.threshold }}
-      </span>
-    </div>
+    <Label
+      :label="slaStatus.threshold"
+      :color="isSlaMissed ? 'ruby' : 'amber'"
+      compact
+    >
+      <template #icon>
+        <Icon icon="i-lucide-flame" class="flex-shrink-0 size-3.5" />
+      </template>
+    </Label>
    <SLAPopoverCard
      v-if="showSlaPopoverCard"
      :sla-missed-events="slaEvents"