From c19b34eaaabb3a0ba980e4137aec142d438d9629 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Fri, 30 Jun 2023 12:47:14 +0530
Subject: [PATCH] feat: Show counts for custom views in sidebar

---
 .../layout/sidebarComponents/Secondary.vue    |  2 ++
 .../SecondaryChildNavItem.vue                 | 31 ++++++++++---------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index 4d75e363e..755b13d1e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -193,6 +193,7 @@ export default {
           .map(view => ({
             id: view.id,
             label: view.name,
+            count: view.count,
             truncateLabel: true,
             toState: frontendURL(
               `accounts/${this.accountId}/custom_view/${view.id}`
@@ -211,6 +212,7 @@ export default {
           .map(view => ({
             id: view.id,
             label: view.name,
+            count: view.count,
             truncateLabel: true,
             toState: frontendURL(
               `accounts/${this.accountId}/contacts/custom_view/${view.id}`
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index cb5c52c76..34e43cf00 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -20,19 +20,18 @@
           class="badge--label"
           :style="{ backgroundColor: labelColor }"
         />
-        <span
-          :title="menuTitle"
-          class="menu-label button__content"
-          :class="{ 'text-truncate': shouldTruncate }"
-        >
-          {{ label }}
+        <div class="menu-label--wrapper">
+          <span
+            :title="menuTitle"
+            class="menu-label button__content"
+            :class="{ 'text-truncate': shouldTruncate }"
+          >
+            {{ label }}
+          </span>
           <span v-if="showChildCount" class="count-view">
             {{ childItemCount }}
           </span>
-        </span>
-        <span v-if="count" class="badge" :class="{ secondary: !isActive }">
-          {{ count }}
-        </span>
+        </div>
         <span v-if="warningIcon" class="badge--icon">
           <fluent-icon
             v-tooltip.top-end="$t('SIDEBAR.FACEBOOK_REAUTHORIZE')"
@@ -72,10 +71,6 @@ export default {
       type: String,
       default: '',
     },
-    count: {
-      type: String,
-      default: '',
-    },
     showChildCount: {
       type: Boolean,
       default: false,
@@ -134,6 +129,14 @@ $label-badge-size: var(--space-slab);
   }
 }
 
+.menu-label--wrapper {
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .menu-label {
   flex-grow: 1;
 }