chore: Minor fix

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

@@ -1,23 +0,0 @@
-<script setup>
-import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
-
-defineProps({
-  contactName: { type: String, required: true },
-  timestamp: { type: Number, required: true },
-  createdAt: { type: Number, required: true },
-});
-</script>
-
-<template>
-  <div class="grid grid-cols-[1fr_auto] items-center gap-2 h-5">
-    <h4 class="text-sm my-0 capitalize truncate text-n-slate-12 font-medium">
-      {{ contactName }}
-    </h4>
-
-    <TimeAgo
-      :last-activity-timestamp="timestamp"
-      :created-at-timestamp="createdAt"
-      class="font-440 !text-xs shrink-0"
-    />
-  </div>
-</template>

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

@@ -1,103 +0,0 @@
-<script setup>
-import { computed, useTemplateRef } from 'vue';
-import Avatar from 'next/avatar/Avatar.vue';
-import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
-import CardPriorityIcon from './CardPriorityIcon.vue';
-import CardStatusIcon from './CardStatusIcon.vue';
-import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';
-
-const props = defineProps({
-  chat: { type: Object, required: true },
-  inbox: { type: Object, required: true },
-  showInboxName: { type: Boolean, default: false },
-  showAssignee: { type: Boolean, default: false },
-  assignee: { type: Object, default: () => ({}) },
-  inline: { type: Boolean, default: false },
-  isLabelsEmpty: { type: Boolean, default: false },
-});
-
-const slaCardLabel = useTemplateRef('slaCardLabel');
-
-const hasSlaPolicyId = computed(
-  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
-);
-
-const showSection = computed(() => {
-  if (props.inline) {
-    return (
-      hasSlaPolicyId.value ||
-      props.chat.priority ||
-      (props.showAssignee && props.assignee.name)
-    );
-  }
-  return (
-    props.showInboxName ||
-    (props.showAssignee && props.assignee.name) ||
-    props.chat.priority ||
-    props.chat.status ||
-    hasSlaPolicyId.value
-  );
-});
-</script>
-
-<template>
-  <!-- Full meta section (when not inline) -->
-  <div
-    v-if="showSection && !inline"
-    class="flex items-center justify-between min-w-0 gap-8 h-6 mb-1"
-  >
-    <div class="flex-1 min-w-0 flex items-center gap-0.5">
-      <InboxName v-if="showInboxName" :inbox="inbox" class="min-w-0" />
-    </div>
-    <div class="flex items-center gap-1.5 flex-shrink-0">
-      <CardPriorityIcon
-        v-if="chat.priority"
-        :priority="chat.priority"
-        class="flex-shrink-0"
-      />
-      <Avatar
-        v-if="showAssignee && assignee.name"
-        v-tooltip.top="{
-          content: assignee.name,
-          delay: { show: 500, hide: 0 },
-        }"
-        :name="assignee.name"
-        :src="assignee.thumbnail"
-        :size="14"
-        :status="assignee.availability_status"
-        hide-offline-status
-        rounded-full
-      />
-      <CardStatusIcon v-if="chat.status" :status="chat.status" />
-    </div>
-  </div>
-
-  <!-- Inline meta section (compact mode for cases in inbox and label filter view) -->
-  <div
-    v-else-if="showSection && inline"
-    data-before-slot
-    class="flex items-center gap-1.5 flex-shrink-0"
-  >
-    <div class="flex items-center gap-1.5">
-      <CardPriorityIcon
-        v-if="chat.priority"
-        :priority="chat.priority"
-        class="flex-shrink-0"
-      />
-      <Avatar
-        v-if="showAssignee && assignee.name"
-        v-tooltip.top="assignee.name"
-        :name="assignee.name"
-        :src="assignee.thumbnail"
-        :size="14"
-        :status="assignee.availability_status"
-        hide-offline-status
-        rounded-full
-      />
-      <CardStatusIcon v-if="chat.status" :status="chat.status" />
-    </div>
-    <div v-if="hasSlaPolicyId" class="rounded-lg h-2 w-px bg-n-strong mx-0.5" />
-    <SLACardLabel v-if="hasSlaPolicyId" ref="slaCardLabel" :chat="chat" />
-    <div v-if="!isLabelsEmpty" class="rounded-lg h-2 w-px bg-n-strong mx-0.5" />
-  </div>
-</template>

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

@@ -118,7 +118,7 @@ const onSelectConversation = checked => {
       <div class="inline-flex items-center justify-between w-full">
         <h4
           class="text-heading-3 mx-2 capitalize pt-0.5 truncate flex-1 min-w-0 text-n-slate-12"
-          :class="hasUnread ? 'font-semibold' : ''"
+          :class="hasUnread ? '!font-520' : ''"
         >
           {{ currentContact.name }}
         </h4>
@@ -131,7 +131,7 @@ const onSelectConversation = checked => {
         </span>
       </div>
 
-      <div class="mx-2 leading-6 h-6 min-w-0">
+      <div class="ltr:ml-2 rtl:mr-2 leading-6 h-6 min-w-0">
         <CardContent
           :last-message="lastMessageInChat"
           :voice-call-status="voiceCallData.status"

app/javascript/dashboard/components/ConversationItem.vue

@@ -143,10 +143,10 @@ async function assignPriority(priority, conversationId = null) {
 
 async function markAsUnread(conversationId) {
   try {
-    emit('redirectToList');
     await store.dispatch('markMessagesUnread', {
       id: conversationId,
     });
+    emit('redirectToList');
   } catch (error) {
     // Ignore error
   }

app/javascript/dashboard/components/ConversationList.vue

@@ -65,40 +65,23 @@ useInfiniteScroll(
 
 // Keyboard navigation for conversation list
 const handleConversationNavigation = direction => {
-  if (!parentRef.value || props.items.length === 0) return;
+  if (!parentRef.value) return;
 
-  const activeElement = parentRef.value.querySelector('.active');
-  if (!activeElement) {
-    // No active conversation, select first one
-    const firstWrapper = parentRef.value.querySelector('[data-id]');
-    firstWrapper?.firstElementChild?.click();
-    return;
-  }
+  // Get all wrapper divs with data-id
+  const allWrappers = Array.from(parentRef.value.querySelectorAll('[data-id]'));
+  if (allWrappers.length === 0) return;
 
-  // Find current conversation ID from active element
-  const currentWrapper = activeElement.closest('[data-id]');
-  const currentId = currentWrapper?.dataset.id;
-  if (!currentId) return;
-
-  // Find index in data array
-  const currentIndex = props.items.findIndex(
-    item => String(item.id) === currentId
+  const activeIndex = allWrappers.findIndex(wrapper =>
+    wrapper.querySelector('.active')
   );
-  if (currentIndex === -1) return;
 
-  // Calculate target index
   const delta = direction === 'previous' ? -1 : 1;
-  const targetIndex = currentIndex + delta;
+  const newIndex = activeIndex + delta;
+  // Clamp index to valid range [0, length-1]
+  const targetIndex = Math.max(0, Math.min(newIndex, allWrappers.length - 1));
 
-  // Clamp to valid range
-  if (targetIndex < 0 || targetIndex >= props.items.length) return;
-
-  // Find and click target conversation
-  const targetId = props.items[targetIndex].id;
-  const targetWrapper = parentRef.value.querySelector(
-    `[data-id="${targetId}"]`
-  );
-  targetWrapper?.firstElementChild?.click();
+  // Click the first child (ConversationItem root element)
+  allWrappers[targetIndex]?.firstElementChild?.click();
 };
 
 useKeyboardEvents({