[backport cloud/1.37] feat: add badge support to NavItem component (#8235)

Backport of #8207

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8235-backport-cloud-1-37-feat-add-badge-support-to-NavItem-component-2f06d73d36508130bc8ffeff03203385)
by [Unito](https://www.unito.io)

src/components/widget/nav/NavItem.vue

@@ -1,32 +1,58 @@
 <template>
   <div
-    class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    v-tooltip.right="{
+      value: tooltipText,
+      disabled: !isOverflowing,
+      pt: { text: { class: 'whitespace-nowrap' } }
+    }"
+    class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
     :class="
       active
         ? 'bg-interface-menu-component-surface-selected'
         : 'hover:bg-interface-menu-component-surface-hovered'
     "
     role="button"
+    @mouseenter="checkOverflow"
     @click="onClick"
   >
-    <div v-if="icon" class="pt-0.5">
-      <NavIcon :icon="icon" />
-    </div>
+    <NavIcon v-if="icon" :icon="icon" />
     <i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
-    <span class="flex items-center break-all">
-      <slot></slot>
+    <span ref="textRef" class="min-w-0 truncate">
+      <slot />
     </span>
+    <StatusBadge
+      v-if="badge !== undefined"
+      :label="String(badge)"
+      severity="contrast"
+      variant="circle"
+      class="ml-auto"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import StatusBadge from '@/components/common/StatusBadge.vue'
 import type { NavItemData } from '@/types/navTypes'
 
 import NavIcon from './NavIcon.vue'
 
-const { icon, active, onClick } = defineProps<{
+const { icon, badge, active, onClick } = defineProps<{
   icon: NavItemData['icon']
+  badge?: NavItemData['badge']
   active?: boolean
   onClick: () => void
 }>()
+
+const textRef = ref<HTMLElement | null>(null)
+const isOverflowing = ref(false)
+
+const checkOverflow = () => {
+  if (!textRef.value) return
+  isOverflowing.value =
+    textRef.value.scrollWidth > textRef.value.clientWidth + 1
+}
+
+const tooltipText = computed(() => textRef.value?.textContent ?? '')
 </script>

src/components/widget/panel/LeftSidePanel.vue

@@ -22,6 +22,7 @@
               v-for="subItem in item.items"
               :key="subItem.id"
               :icon="subItem.icon"
+              :badge="subItem.badge"
               :active="activeItem === subItem.id"
               @click="activeItem = subItem.id"
             >
@@ -32,6 +33,7 @@
         <div v-else class="flex flex-col gap-2">
           <NavItem
             :icon="item.icon"
+            :badge="item.badge"
             :active="activeItem === item.id"
             @click="activeItem = item.id"
           >

src/types/navTypes.ts

@@ -2,6 +2,7 @@ export interface NavItemData {
   id: string
   label: string
   icon: string
+  badge?: string | number
 }
 
 export interface NavGroupData {