chore: Replace Thumbnail with Avatar in conversation card (#12112)

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -1,29 +1,19 @@
-<script>
-import { getInboxClassByType } from 'dashboard/helper/inbox';
+<script setup>
+import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
 
-export default {
-  props: {
-    inbox: {
-      type: Object,
-      default: () => {},
-    },
+defineProps({
+  inbox: {
+    type: Object,
+    default: () => {},
   },
-  computed: {
-    computedInboxClass() {
-      const { phone_number: phoneNumber, channel_type: type } = this.inbox;
-      const classByType = getInboxClassByType(type, phoneNumber);
-      return classByType;
-    },
-  },
-};
+});
 </script>
 
 <template>
   <div class="flex items-center text-n-slate-11 text-xs min-w-0">
-    <fluent-icon
-      class="ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
-      :icon="computedInboxClass"
-      size="12"
+    <ChannelIcon
+      :inbox="inbox"
+      class="size-3 ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
     />
     <span class="truncate">
       {{ inbox.name }}

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
-import Thumbnail from '../Thumbnail.vue';
+import Avatar from 'next/avatar/Avatar.vue';
 import MessagePreview from './MessagePreview.vue';
 import InboxName from '../InboxName.vue';
 import ConversationContextMenu from './contextMenu/Index.vue';
@@ -44,6 +44,7 @@ const emit = defineEmits([
 ]);
 
 const router = useRouter();
+const store = useStore();
 
 const hovered = ref(false);
 const showContextMenu = ref(false);
@@ -56,15 +57,17 @@ const currentChat = useMapGetter('getSelectedChat');
 const inboxesList = useMapGetter('inboxes/getInboxes');
 const activeInbox = useMapGetter('getSelectedInbox');
 const accountId = useMapGetter('getCurrentAccountId');
-const contactById = useMapGetter('contacts/getContact');
-const inboxById = useMapGetter('inboxes/getInbox');
 
 const chatMetadata = computed(() => props.chat.meta || {});
 
 const assignee = computed(() => chatMetadata.value.assignee || {});
 
+const senderId = computed(() => chatMetadata.value.sender?.id);
+
 const currentContact = computed(() => {
-  return contactById.value(chatMetadata.value.sender.id);
+  return senderId.value
+    ? store.getters['contacts/getContact'](senderId.value)
+    : {};
 });
 
 const isActiveChat = computed(() => {
@@ -79,10 +82,10 @@ const isInboxNameVisible = computed(() => !activeInbox.value);
 
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 
+const inboxId = computed(() => props.chat.inbox_id);
+
 const inbox = computed(() => {
-  const { inbox_id: inboxId } = props.chat;
-  const stateInbox = inboxById.value(inboxId);
-  return stateInbox;
+  return inboxId.value ? store.getters['inboxes/getInbox'](inboxId.value) : {};
 });
 
 const showInboxName = computed(() => {
@@ -241,28 +244,34 @@ const deleteConversation = () => {
       @mouseenter="onThumbnailHover"
       @mouseleave="onThumbnailLeave"
     >
-      <label
-        v-if="hovered || selected"
-        class="flex items-center justify-center rounded-full cursor-pointer absolute inset-0 z-20 backdrop-blur-[2px]"
-        :class="!showInboxName ? 'mt-4' : 'mt-8'"
-        @click.stop
-      >
-        <input
-          :value="selected"
-          :checked="selected"
-          class="!m-0 cursor-pointer"
-          type="checkbox"
-          @change="onSelectConversation($event.target.checked)"
-        />
-      </label>
-      <Thumbnail
+      <Avatar
         v-if="!hideThumbnail"
+        :name="currentContact.name"
         :src="currentContact.thumbnail"
-        :username="currentContact.name"
+        :size="32"
         :status="currentContact.availability_status"
-        size="32px"
+        :inbox="inbox"
         :class="!showInboxName ? 'mt-4' : 'mt-8'"
-      />
+        hide-offline-status
+        rounded-full
+      >
+        <template #overlay="{ size }">
+          <label
+            v-if="hovered || selected"
+            class="flex items-center justify-center rounded-full cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px]"
+            :style="{ width: `${size}px`, height: `${size}px` }"
+            @click.stop
+          >
+            <input
+              :value="selected"
+              :checked="selected"
+              class="!m-0 cursor-pointer"
+              type="checkbox"
+              @change="onSelectConversation($event.target.checked)"
+            />
+          </label>
+        </template>
+      </Avatar>
     </div>
     <div
       class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 min-w-0"