From 0c3d569ece01d40f2c270ba0a70ef4e305be2e47 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Wed, 21 Jan 2026 19:33:45 -0800
Subject: [PATCH] [backport cloud/1.37] feat: add badge support to NavItem
 component (#8235)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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         | 40 +++++++++++++++----
 src/components/widget/panel/LeftSidePanel.vue |  2 +
 src/types/navTypes.ts                         |  1 +
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index c564dfcae..eb20b9852 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/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>
diff --git a/src/components/widget/panel/LeftSidePanel.vue b/src/components/widget/panel/LeftSidePanel.vue
index 94b3104eb..53d195029 100644
--- a/src/components/widget/panel/LeftSidePanel.vue
+++ b/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"
           >
diff --git a/src/types/navTypes.ts b/src/types/navTypes.ts
index ec17c5cec..d38865ab6 100644
--- a/src/types/navTypes.ts
+++ b/src/types/navTypes.ts
@@ -2,6 +2,7 @@ export interface NavItemData {
   id: string
   label: string
   icon: string
+  badge?: string | number
 }
 
 export interface NavGroupData {