chore: Update feedback fixes

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardLabels.vue

@@ -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"
     />

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMetaSection.vue

@@ -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

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardCompact.vue

@@ -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>

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue

@@ -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"