feat: Conversation card click

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue

@@ -38,7 +38,7 @@ const contactConversations = computed(() =>
     <div
       v-for="conversation in contactConversations"
       :key="conversation.id"
-      class="px-3 border-b border-n-strong"
+      class="border-b border-n-strong"
     >
       <ConversationCard
         v-if="conversation"
@@ -47,6 +47,7 @@ const contactConversations = computed(() =>
         :contact="contactsById(conversation.meta.sender.id)"
         :state-inbox="stateInbox(conversation.inboxId)"
         :account-labels="accountLabelsValue"
+        class="px-6 !rounded-none dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
       />
     </div>
   </div>

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

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { useRouter, useRoute } from 'vue-router';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
@@ -28,6 +30,9 @@ const props = defineProps({
   },
 });
 
+const router = useRouter();
+const route = useRoute();
+
 const currentContact = computed(() => props.contact);
 
 const currentContactName = computed(() => currentContact.value?.name);
@@ -54,11 +59,31 @@ const showMessagePreviewWithoutMeta = computed(() => {
   const { slaPolicyId, labels = [] } = props.conversation;
   return !slaPolicyId && labels.length === 0;
 });
+
+const onCardClick = e => {
+  const path = frontendURL(
+    conversationUrl({
+      accountId: route.params.accountId,
+      id: props.conversation.id,
+    })
+  );
+
+  if (e.metaKey || e.ctrlKey) {
+    window.open(
+      window.chatwootConfig.hostURL + path,
+      '_blank',
+      'noopener noreferrer nofollow'
+    );
+    return;
+  }
+  router.push({ path });
+};
 </script>
 
 <template>
   <div
-    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out rounded-xl"
+    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out cursor-pointer rounded-xl"
+    @click="onCardClick"
   >
     <Avatar
       :name="currentContactName"