chore: Clean up

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue

@@ -20,6 +20,10 @@ const attributes = useMapGetter('attributes/getAttributesByModelType');
 
 const contactAttributes = computed(() => attributes.value('contact_attribute'));
 
+const hasContactAttributes = computed(
+  () => contactAttributes.value?.length > 0
+);
+
 // Convert attribute key value from snake_case to camelCase
 const toCamelCase = str =>
   str.toLowerCase().replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
@@ -79,11 +83,12 @@ const filteredUnusedAttributes = computed(() => {
 
 const unusedAttributesCount = computed(() => unusedAttributes.value?.length);
 const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
+const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 px-6 py-6">
-    <div class="flex flex-col gap-2">
+  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6 py-6">
+    <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
       <ContactCustomAttributeItem
         v-for="attribute in usedAttributes"
         :key="attribute.id"
@@ -129,4 +134,7 @@ const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
       </div>
     </div>
   </div>
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.EMPTY_STATE') }}
+  </p>
 </template>

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue

@@ -2,10 +2,12 @@
 import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
 
+const { t } = useI18n();
 const route = useRoute();
 
 const conversations = useMapGetter(
@@ -32,7 +34,7 @@ const contactConversations = computed(() =>
   >
     <Spinner />
   </div>
-  <div v-else class="flex flex-col py-6">
+  <div v-else-if="contactConversations.length > 0" class="flex flex-col py-6">
     <div
       v-for="conversation in contactConversations"
       :key="conversation.id"
@@ -48,4 +50,7 @@ const contactConversations = computed(() =>
       />
     </div>
   </div>
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('CONTACTS_LAYOUT.SIDEBAR.HISTORY.EMPTY_STATE') }}
+  </p>
 </template>

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue

@@ -87,7 +87,7 @@ useKeyboardEvents(keyboardEvents);
     >
       <Spinner />
     </div>
-    <div v-else>
+    <div v-else-if="notes.length > 0">
       <div
         v-for="note in notes"
         :key="note.id"
@@ -128,5 +128,8 @@ useKeyboardEvents(keyboardEvents);
         />
       </div>
     </div>
+    <p v-else class="px-6 py-6 text-sm leading-6 text-center text-n-slate-11">
+      {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EMPTY_STATE') }}
+    </p>
   </div>
 </template>