From a7e73de8d4db7882629cdef6d4b481c0fe06a0ee Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Sat, 22 Feb 2025 03:20:30 +0530
Subject: [PATCH] feat: Don't hide thumbnail on hover (#10935)

### Old behavior


https://github.com/user-attachments/assets/5d7524c1-b1ca-454f-8e89-843ca25d017e

### New behavior


https://github.com/user-attachments/assets/49814190-d6b4-4553-bced-3987be3583e2

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
---
 .../components/widgets/Thumbnail.vue          |  3 +-
 .../widgets/conversation/ConversationCard.vue | 53 ++++++++++---------
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 7b222aa7e..5998dd338 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -156,13 +156,14 @@ export default {
     </slot>
     <img
       v-if="badgeSrc"
-      class="source-badge"
+      class="source-badge z-20"
       :style="badgeStyle"
       :src="`/integrations/channels/badges/${badgeSrc}.png`"
       alt="Badge"
     />
     <div
       v-if="showStatusIndicator"
+      class="z-20"
       :class="`source-badge user-online-status user-online-status--${status}`"
       :style="statusStyle"
     />
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 7e8ad507c..a5695b22c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -95,9 +95,6 @@ export default {
       activeInbox: 'getSelectedInbox',
       accountId: 'getCurrentAccountId',
     }),
-    bulkActionCheck() {
-      return !this.hideThumbnail && !this.hovered && !this.selected;
-    },
     chatMetadata() {
       return this.chat.meta || {};
     },
@@ -182,10 +179,10 @@ export default {
 
       router.push({ path });
     },
-    onCardHover() {
+    onThumbnailHover() {
       this.hovered = !this.hideThumbnail;
     },
-    onCardLeave() {
+    onThumbnailLeave() {
       this.hovered = false;
     },
     onSelectConversation(checked) {
@@ -249,28 +246,36 @@ export default {
       'has-inbox-name': showInboxName,
       'conversation-selected': selected,
     }"
-    @mouseenter="onCardHover"
-    @mouseleave="onCardLeave"
     @click="onCardClick"
     @contextmenu="openContextMenu($event)"
   >
-    <label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
-      <input
-        :value="selected"
-        :checked="selected"
-        class="checkbox"
-        type="checkbox"
-        @change="onSelectConversation($event.target.checked)"
+    <div
+      class="relative"
+      @mouseenter="onThumbnailHover"
+      @mouseleave="onThumbnailLeave"
+    >
+      <label
+        v-if="hovered || selected"
+        class="checkbox-wrapper absolute inset-0 z-20 backdrop-blur-[2px]"
+        @click.stop
+      >
+        <input
+          :value="selected"
+          :checked="selected"
+          class="checkbox"
+          type="checkbox"
+          @change="onSelectConversation($event.target.checked)"
+        />
+      </label>
+      <Thumbnail
+        v-if="!hideThumbnail"
+        :src="currentContact.thumbnail"
+        :badge="inboxBadge"
+        :username="currentContact.name"
+        :status="currentContact.availability_status"
+        size="40px"
       />
-    </label>
-    <Thumbnail
-      v-if="bulkActionCheck"
-      :src="currentContact.thumbnail"
-      :badge="inboxBadge"
-      :username="currentContact.name"
-      :status="currentContact.availability_status"
-      size="40px"
-    />
+    </div>
     <div
       class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 w-[calc(100%-40px)]"
     >
@@ -400,7 +405,7 @@ export default {
   }
 
   .checkbox-wrapper {
-    @apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4 hover:bg-woot-100 dark:hover:bg-woot-800;
+    @apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4;
 
     input[type='checkbox'] {
       @apply m-0 cursor-pointer;