chore: Fix issues with Contact pages (#10544)

app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue

@@ -50,7 +50,7 @@ const handleBreadcrumbClick = () => {
 
 <template>
   <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
+    class="flex w-full h-full overflow-hidden justify-evenly bg-n-background"
   >
     <div
       class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -93,7 +93,7 @@ const emit = defineEmits([
               "
               color="slate"
               size="sm"
-              class="relative"
+              class="relative w-8"
               variant="ghost"
               @click="emit('filter')"
             >
@@ -109,7 +109,6 @@ const emit = defineEmits([
             icon="i-lucide-save"
             color="slate"
             size="sm"
-            class="relative"
             variant="ghost"
             @click="emit('createSegment')"
           />
@@ -118,7 +117,6 @@ const emit = defineEmits([
             icon="i-lucide-trash"
             color="slate"
             size="sm"
-            class="relative"
             variant="ghost"
             @click="emit('deleteSegment')"
           />

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue

@@ -1,28 +1,67 @@
 <script setup>
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 
 import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';
 
+const props = defineProps({
+  activeSegment: { type: Object, default: null },
+});
+
 const emit = defineEmits(['clearFilters', 'openFilter']);
 
 const { t } = useI18n();
+const route = useRoute();
 
 const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
+const activeSegmentId = computed(() => route.params.segmentId);
+
+const activeSegmentQuery = computed(() => {
+  const query = props.activeSegment?.query?.payload;
+  if (!Array.isArray(query)) return [];
+
+  const newFilters = query.map(filter => {
+    const transformed = useCamelCase(filter);
+    return {
+      attributeKey: transformed.attributeKey,
+      attributeModel: transformed.attributeModel,
+      customAttributeType: transformed.customAttributeType,
+      filterOperator: transformed.filterOperator,
+      queryOperator: transformed.queryOperator ?? 'and',
+      values: transformed.values,
+    };
+  });
+
+  return newFilters;
+});
+
+const hasActiveSegments = computed(
+  () => props.activeSegment && activeSegmentId.value !== 0
+);
+
+const activeFilterQueryData = computed(() => {
+  return hasActiveSegments.value
+    ? activeSegmentQuery.value
+    : appliedFilters.value;
+});
 </script>
 
 <template>
   <ActiveFilterPreview
-    :applied-filters="appliedFilters"
+    :applied-filters="activeFilterQueryData"
     :max-visible-filters="2"
     :more-filters-label="
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
-        count: appliedFilters.length - 2,
+        count: activeFilterQueryData.length - 2,
       })
     "
     :clear-button-label="
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
     "
+    :show-clear-button="!hasActiveSegments"
     class="max-w-[960px] px-6"
     @open-filter="emit('openFilter')"
     @clear-filters="emit('clearFilters')"

app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue

@@ -7,50 +7,18 @@ import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/Con
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 
 defineProps({
-  searchValue: {
+  searchValue: { type: String, default: '' },
-    type: String,
+  headerTitle: { type: String, default: '' },
-    default: '',
+  showPaginationFooter: { type: Boolean, default: true },
-  },
+  currentPage: { type: Number, default: 1 },
-  headerTitle: {
+  totalItems: { type: Number, default: 100 },
-    type: String,
+  itemsPerPage: { type: Number, default: 15 },
-    default: '',
+  activeSort: { type: String, default: '' },
-  },
+  activeOrdering: { type: String, default: '' },
-  showPaginationFooter: {
+  activeSegment: { type: Object, default: null },
-    type: Boolean,
+  segmentsId: { type: [String, Number], default: 0 },
-    default: true,
+  hasAppliedFilters: { type: Boolean, default: false },
-  },
+  isFetchingList: { type: Boolean, default: false },
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  totalItems: {
-    type: Number,
-    default: 100,
-  },
-  itemsPerPage: {
-    type: Number,
-    default: 15,
-  },
-  activeSort: {
-    type: String,
-    default: '',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-  activeSegment: {
-    type: Object,
-    default: null,
-  },
-  segmentsId: {
-    type: [String, Number],
-    default: 0,
-  },
-  hasAppliedFilters: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits([
@@ -106,7 +74,12 @@ const openFilter = () => {
       <main class="flex-1 overflow-y-auto">
         <div class="w-full mx-auto max-w-[960px]">
           <ContactsActiveFiltersPreview
-            v-if="hasAppliedFilters && isNotSegmentView"
+            v-if="
+              (hasAppliedFilters || !isNotSegmentView) &&
+              !isFetchingList &&
+              !isLabelView
+            "
+            :active-segment="activeSegment"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"
           />

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

@@ -34,23 +34,20 @@ const contactConversations = computed(() =>
   >
     <Spinner />
   </div>
-  <div v-else-if="contactConversations.length > 0" class="flex flex-col py-6">
   <div
-      v-for="conversation in contactConversations"
+    v-else-if="contactConversations.length > 0"
-      :key="conversation.id"
+    class="px-6 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
-      class="border-b border-n-strong"
   >
     <ConversationCard
-        v-if="conversation"
+      v-for="conversation in contactConversations"
       :key="conversation.id"
       :conversation="conversation"
       :contact="contactsById(conversation.meta.sender.id)"
       :state-inbox="stateInbox(conversation.inboxId)"
       :account-labels="accountLabelsValue"
-        class="px-6 !rounded-none dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
     />
   </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>

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

@@ -28,7 +28,7 @@ const handleDelete = () => {
 
 <template>
   <div
-    class="flex flex-col gap-2 px-6 py-2 border-b border-n-strong group/note"
+    class="flex flex-col gap-2 py-2 mx-6 border-b border-n-strong group/note"
   >
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-1.5 py-2.5 min-w-0">

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue

@@ -82,7 +82,7 @@ const onCardClick = e => {
 
 <template>
   <div
-    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out cursor-pointer rounded-xl"
+    class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
     @click="onCardClick"
   >
     <Avatar

app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue

@@ -4,22 +4,11 @@ import { replaceUnderscoreWithSpace } from './helper/filterHelper.js';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
-  appliedFilters: {
+  appliedFilters: { type: Array, default: () => [] },
-    type: Array,
+  maxVisibleFilters: { type: Number, default: 2 },
-    default: () => [],
+  clearButtonLabel: { type: String, default: '' },
-  },
+  moreFiltersLabel: { type: String, default: '' },
-  maxVisibleFilters: {
+  showClearButton: { type: Boolean, default: true },
-    type: Number,
-    default: 2,
-  },
-  clearButtonLabel: {
-    type: String,
-    default: '',
-  },
-  moreFiltersLabel: {
-    type: String,
-    default: '',
-  },
 });
 
 const emit = defineEmits(['clearFilters', 'openFilter']);
@@ -46,6 +35,9 @@ const formatOperatorLabel = operator => {
 
 const formatFilterValue = value => {
   if (!value) return '';
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
   if (typeof value === 'object' && value.name) {
     return value.name;
   }
@@ -55,10 +47,7 @@ const formatFilterValue = value => {
 
 <template>
   <div class="flex flex-wrap items-center w-full gap-2 mx-auto">
-    <template
+    <template v-for="(filter, index) in appliedFilters" :key="index">
-      v-for="(filter, index) in appliedFilters"
-      :key="filter.attributeKey"
-    >
       <div
         v-if="index < maxVisibleFilters"
         class="inline-flex items-center gap-2 h-7"
@@ -107,8 +96,9 @@ const formatFilterValue = value => {
     >
       {{ moreFiltersLabel }}
     </div>
-    <div class="w-px h-3 rounded-lg bg-n-strong" />
+    <div v-if="showClearButton" class="w-px h-3 rounded-lg bg-n-strong" />
     <Button
+      v-if="showClearButton"
       :label="clearButtonLabel"
       size="xs"
       class="!px-1"

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue

@@ -256,6 +256,7 @@ onMounted(async () => {
       :active-ordering="sortState.activeOrdering"
       :active-segment="activeSegment"
       :segments-id="activeSegmentId"
+      :is-fetching-list="isFetchingList"
       :has-applied-filters="hasAppliedFilters"
       @update:current-page="fetchContactsBasedOnContext"
       @search="searchContacts"