feat(v4): Update the design for the contacts list page (#10501)

---------
Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>

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

@@ -18,10 +18,10 @@ defineProps({
     type: String,
     required: true,
   },
-  buttonLabel: {
-    type: String,
-    required: true,
-  },
+  //   buttonLabel: {
+  //     type: String,
+  //     default: '',
+  //   },
   activeSort: {
     type: String,
     default: 'last_activity_at',
@@ -30,16 +30,26 @@ defineProps({
     type: String,
     default: '',
   },
+  isSegmentsView: {
+    type: Boolean,
+    default: false,
+  },
+  hasActiveFilters: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
   'search',
   'filter',
   'update:sort',
-  'message',
+  //   'message',
   'add',
   'import',
   'export',
+  'createSegment',
+  'deleteSegment',
 ]);
 </script>
 
@@ -72,11 +82,37 @@ const emit = defineEmits([
         </div>
         <div class="flex items-center gap-2">
           <Button
-            icon="i-lucide-list-filter"
+            :icon="
+              isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
+            "
             color="slate"
             size="sm"
+            class="relative"
             variant="ghost"
             @click="emit('filter')"
+          >
+            <div
+              v-if="hasActiveFilters && !isSegmentsView"
+              class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
+            />
+          </Button>
+          <Button
+            v-if="hasActiveFilters && !isSegmentsView"
+            icon="i-lucide-save"
+            color="slate"
+            size="sm"
+            class="relative"
+            variant="ghost"
+            @click="emit('createSegment')"
+          />
+          <Button
+            v-if="isSegmentsView"
+            icon="i-lucide-trash"
+            color="slate"
+            size="sm"
+            class="relative"
+            variant="ghost"
+            @click="emit('deleteSegment')"
           />
           <ContactSortMenu
             :active-sort="activeSort"
@@ -89,8 +125,9 @@ const emit = defineEmits([
             @export="emit('export')"
           />
         </div>
-        <div class="w-px h-4 bg-n-strong" />
-        <Button :label="buttonLabel" size="sm" @click="emit('message')" />
+        <!-- TODO: Add this when we enabling message feature -->
+        <!-- <div class="w-px h-4 bg-n-strong" /> -->
+        <!-- <Button :label="buttonLabel" size="sm" @click="emit('message')" /> -->
       </div>
     </div>
   </header>