From fcf2e0e639850b7e1a41b93d8eafd3c08b1e2d69 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Wed, 21 Jan 2026 11:48:22 -0800
Subject: [PATCH] feat: add badge support to NavItem component (#8207)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Adds optional badge support to the `NavItem` component and `NavItemData`
interface, enabling navigation items in the left sidebar of the Asset
Browser Modal to display counts or status indicators.

## Changes

- **`src/types/navTypes.ts`**: Added optional `badge?: string | number`
property to `NavItemData` interface
- **`src/components/widget/nav/NavItem.vue`**: Added `StatusBadge`
rendering when `badge` prop is provided
- **`src/components/widget/panel/LeftSidePanel.vue`**: Wired `badge`
prop from `NavItemData` to `NavItem` for both grouped and ungrouped
items

## Usage

```ts
const navItem: NavItemData = {
  id: 'assets',
  label: 'Assets',
  icon: 'pi pi-folder',
  badge: 5  // Optional - displays count badge
}
```

## Related

- Builds on #8170 which added queue badge functionality

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8207-feat-add-badge-support-to-NavItem-component-2ef6d73d365081669f86fe2fc618e87f)
by [Unito](https://www.unito.io)
---
 src/components/widget/nav/NavItem.vue         | 19 +++++++++++++------
 src/components/widget/panel/LeftSidePanel.vue |  2 ++
 src/types/navTypes.ts                         |  1 +
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index 8c20ad929..eb20b9852 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -5,7 +5,7 @@
       disabled: !isOverflowing,
       pt: { text: { class: 'whitespace-nowrap' } }
     }"
-    class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    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'
@@ -15,25 +15,32 @@
     @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 ref="textRef" class="min-w-0 truncate">
-      <slot></slot>
+      <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
 }>()
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 {