From 1ba99842e7b02ce74ace4fb7fbc02c5bd85bef1b Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Mon, 17 Feb 2025 13:35:35 +0530
Subject: [PATCH] chore: Improve checkbox UX in conversation card for bulk
 actions

---
 .../dashboard/components/widgets/Thumbnail.vue       |  4 ++--
 .../widgets/conversation/ConversationCard.vue        | 12 +++++-------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 7b222aa7e..8b557ca4e 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -156,14 +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="`source-badge user-online-status user-online-status--${status}`"
+      :class="`source-badge user-online-status z-20 user-online-status--${status}`"
       :style="statusStyle"
     />
   </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 7e8ad507c..b774beae8 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 || {};
     },
@@ -254,7 +251,11 @@ export default {
     @click="onCardClick"
     @contextmenu="openContextMenu($event)"
   >
-    <label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
+    <label
+      v-if="hovered || selected"
+      class="checkbox-wrapper h-10 w-10 flex items-center justify-center bg-n-black/20 dark:bg-n-black/25 backdrop-blur-[2px] transition-all duration-300 rounded-full cursor-pointer mt-4 hover:bg-woot-100/50 dark:hover:bg-woot-800/50 absolute ltr:left-4 rtl:right-4 z-10"
+      @click.stop
+    >
       <input
         :value="selected"
         :checked="selected"
@@ -264,7 +265,6 @@ export default {
       />
     </label>
     <Thumbnail
-      v-if="bulkActionCheck"
       :src="currentContact.thumbnail"
       :badge="inboxBadge"
       :username="currentContact.name"
@@ -400,8 +400,6 @@ 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;
-
     input[type='checkbox'] {
       @apply m-0 cursor-pointer;
     }