From b78a272806b5fac822002ceaaa8348f761495a25 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 4 Dec 2024 19:44:19 +0530
Subject: [PATCH] feat: better resize observer

---
 .../message/bubbles/Email/Index.vue           | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index 78d01ece7..9f4779cff 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -1,5 +1,7 @@
 <script setup>
-import { computed, useTemplateRef, ref, watch } from 'vue';
+import { computed, useTemplateRef, ref } from 'vue';
+import { vResizeObserver } from '@vueuse/components';
+
 import { Letter } from 'vue-letter';
 
 import Icon from 'next/icon/Icon.vue';
@@ -39,15 +41,11 @@ const isExpanded = ref(false);
 const showQuotedMessage = ref(false);
 const contentContainer = useTemplateRef('contentContainer');
 
-watch(
-  contentContainer,
-  el => {
-    if (el) {
-      isOverflowing.value = el.scrollHeight > el.clientHeight;
-    }
-  },
-  { immediate: true }
-);
+function onResizeObserver() {
+  const el = contentContainer.value;
+  if (!el) return;
+  isOverflowing.value = el.scrollHeight > el.clientHeight;
+}
 
 const fullHTML = computed(() => {
   return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
@@ -73,6 +71,7 @@ const textToShow = computed(() => {
     <EmailMeta :status :sender :content-attributes />
     <section
       ref="contentContainer"
+      v-resize-observer="onResizeObserver"
       class="p-4"
       :class="{
         'max-h-[400px] overflow-hidden relative': !isExpanded,
@@ -104,7 +103,7 @@ const textToShow = computed(() => {
       />
       <button
         v-if="hasQuotedMessage"
-        class="text-n-slate-11 px-0 text-center flex items-center gap-2"
+        class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"
         @click="showQuotedMessage = !showQuotedMessage"
       >
         <template v-if="showQuotedMessage">
@@ -113,9 +112,14 @@ const textToShow = computed(() => {
         <template v-else>
           {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
         </template>
+        <Icon
+          :icon="
+            showQuotedMessage ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
+          "
+        />
       </button>
     </section>
-    <section class="px-4 pb-4">
+    <section v-if="attachments.length" class="px-4 pb-4">
       <AttachmentChips :attachments="attachments" class="gap-1" />
     </section>
   </BaseBubble>