From da5a752c75ddbd8cf323e45bbce39f70e8032b6b Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 27 Nov 2024 17:12:26 +0530
Subject: [PATCH] feat: add tooltip

---
 .../components-next/message/MessageStatus.vue | 23 ++++++++++++++++++-
 .../dashboard/i18n/locale/en/chatlist.json    |  3 ++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/MessageStatus.vue b/app/javascript/dashboard/components-next/message/MessageStatus.vue
index 13db86a99..d8f996cf5 100644
--- a/app/javascript/dashboard/components-next/message/MessageStatus.vue
+++ b/app/javascript/dashboard/components-next/message/MessageStatus.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useIntervalFn } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
 import { MESSAGE_STATUS } from './constants';
 
 import Icon from 'next/icon/Icon.vue';
@@ -13,6 +14,8 @@ const { status } = defineProps({
   },
 });
 
+const { t } = useI18n();
+
 const progresIconSequence = [
   'i-lucide-clock-1',
   'i-lucide-clock-2',
@@ -60,13 +63,31 @@ const statusColor = computed(() => {
 
   return statusIconMap[status];
 });
+
+const tooltipText = computed(() => {
+  const statusTextMap = {
+    [MESSAGE_STATUS.SENT]: t('CHAT_LIST.SENT'),
+    [MESSAGE_STATUS.DELIVERED]: t('CHAT_LIST.DELIVERED'),
+    [MESSAGE_STATUS.READ]: t('CHAT_LIST.MESSAGE_READ'),
+    [MESSAGE_STATUS.PROGRESS]: t('CHAT_LIST.SENDING'),
+  };
+
+  return statusTextMap[status];
+});
 </script>
 
 <template>
   <Icon
     v-if="status === MESSAGE_STATUS.PROGRESS"
+    v-tooltip.top-start="tooltipText"
     :icon="progessIcon"
     class="text-n-slate-10"
   />
-  <Icon v-else :icon="statusIcon" :class="statusColor" class="size-[14px]" />
+  <Icon
+    v-else
+    v-tooltip.top-start="tooltipText"
+    :icon="statusIcon"
+    :class="statusColor"
+    class="size-[14px]"
+  />
 </template>
diff --git a/app/javascript/dashboard/i18n/locale/en/chatlist.json b/app/javascript/dashboard/i18n/locale/en/chatlist.json
index 5c08fddb6..8a2fffefd 100644
--- a/app/javascript/dashboard/i18n/locale/en/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json
@@ -127,6 +127,7 @@
     "NO_CONTENT": "No content available",
     "HIDE_QUOTED_TEXT": "Hide Quoted Text",
     "SHOW_QUOTED_TEXT": "Show Quoted Text",
-    "MESSAGE_READ": "Read"
+    "MESSAGE_READ": "Read",
+    "SENDING": "Sending"
   }
 }