feat: add job history and assets sidebar badge behavior (#9050)

## Summary
Add sidebar badge behavior for queue/asset visibility updates:
- Job History tab icon shows active jobs count (`queued + running`) only
when the Job History panel is closed.
- Assets tab icon no longer mirrors active jobs; when QPO V2 is enabled
it now shows the number of assets added since the last time Assets was
opened.
- Opening Assets clears the unseen added-assets badge count.

## Changes
- Added `iconBadge` logic to Job History sidebar tab.
- Replaced Assets sidebar badge source with new unseen-assets counter
logic.
- Added `assetsSidebarBadgeStore` to track unseen asset additions from
history updates and reset on Assets open.
- Added/updated unit tests for both sidebar tab composables and the new
store behavior.


https://github.com/user-attachments/assets/33588a2a-c607-4fcc-8221-e7f11c3d79cc



┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9050-fix-add-job-history-and-assets-sidebar-badge-behavior-30e6d73d365081c38297fe6aac9cd34c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>

src/composables/sidebarTabs/useAssetsSidebarTab.test.ts

@@ -2,9 +2,9 @@ import { describe, expect, it, vi } from 'vitest'
 
 import { useAssetsSidebarTab } from '@/composables/sidebarTabs/useAssetsSidebarTab'
 
-const { mockGetSetting, mockActiveJobsCount } = vi.hoisted(() => ({
+const { mockGetSetting, mockUnseenAddedAssetsCount } = vi.hoisted(() => ({
   mockGetSetting: vi.fn(),
-  mockActiveJobsCount: { value: 0 }
+  mockUnseenAddedAssetsCount: { value: 0 }
 }))
 
 vi.mock('@/platform/settings/settingStore', () => ({
@@ -17,16 +17,16 @@ vi.mock('@/components/sidebar/tabs/AssetsSidebarTab.vue', () => ({
   default: {}
 }))
 
-vi.mock('@/stores/queueStore', () => ({
-  useQueueStore: () => ({
-    activeJobsCount: mockActiveJobsCount.value
+vi.mock('@/stores/workspace/assetsSidebarBadgeStore', () => ({
+  useAssetsSidebarBadgeStore: () => ({
+    unseenAddedAssetsCount: mockUnseenAddedAssetsCount.value
   })
 }))
 
 describe('useAssetsSidebarTab', () => {
   it('hides icon badge when QPO V2 is disabled', () => {
     mockGetSetting.mockReturnValue(false)
-    mockActiveJobsCount.value = 3
+    mockUnseenAddedAssetsCount.value = 3
 
     const sidebarTab = useAssetsSidebarTab()
 
@@ -34,9 +34,9 @@ describe('useAssetsSidebarTab', () => {
     expect((sidebarTab.iconBadge as () => string | null)()).toBeNull()
   })
 
-  it('shows active job count when QPO V2 is enabled', () => {
+  it('shows unseen added assets count when QPO V2 is enabled', () => {
     mockGetSetting.mockReturnValue(true)
-    mockActiveJobsCount.value = 3
+    mockUnseenAddedAssetsCount.value = 3
 
     const sidebarTab = useAssetsSidebarTab()
 
@@ -44,9 +44,9 @@ describe('useAssetsSidebarTab', () => {
     expect((sidebarTab.iconBadge as () => string | null)()).toBe('3')
   })
 
-  it('hides badge when no active jobs', () => {
+  it('hides badge when there are no unseen added assets', () => {
     mockGetSetting.mockReturnValue(true)
-    mockActiveJobsCount.value = 0
+    mockUnseenAddedAssetsCount.value = 0
 
     const sidebarTab = useAssetsSidebarTab()
 

src/composables/sidebarTabs/useAssetsSidebarTab.ts

@@ -2,7 +2,7 @@ import { markRaw } from 'vue'
 
 import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useQueueStore } from '@/stores/queueStore'
+import { useAssetsSidebarBadgeStore } from '@/stores/workspace/assetsSidebarBadgeStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useAssetsSidebarTab = (): SidebarTabExtension => {
@@ -21,8 +21,8 @@ export const useAssetsSidebarTab = (): SidebarTabExtension => {
         return null
       }
 
-      const queueStore = useQueueStore()
-      const count = queueStore.activeJobsCount
+      const assetsSidebarBadgeStore = useAssetsSidebarBadgeStore()
+      const count = assetsSidebarBadgeStore.unseenAddedAssetsCount
       return count > 0 ? count.toString() : null
     }
   }

src/composables/sidebarTabs/useJobHistorySidebarTab.test.ts

@@ -0,0 +1,59 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useJobHistorySidebarTab } from '@/composables/sidebarTabs/useJobHistorySidebarTab'
+
+const { mockActiveJobsCount, mockActiveSidebarTabId } = vi.hoisted(() => ({
+  mockActiveJobsCount: { value: 0 },
+  mockActiveSidebarTabId: { value: null as string | null }
+}))
+
+vi.mock('@/components/sidebar/tabs/JobHistorySidebarTab.vue', () => ({
+  default: {}
+}))
+
+vi.mock('@/stores/queueStore', () => ({
+  useQueueStore: () => ({
+    activeJobsCount: mockActiveJobsCount.value
+  })
+}))
+
+vi.mock('@/stores/workspace/sidebarTabStore', () => ({
+  useSidebarTabStore: () => ({
+    activeSidebarTabId: mockActiveSidebarTabId.value
+  })
+}))
+
+describe('useJobHistorySidebarTab', () => {
+  beforeEach(() => {
+    mockActiveSidebarTabId.value = null
+    mockActiveJobsCount.value = 0
+  })
+
+  it('shows active jobs count while the panel is closed', () => {
+    mockActiveSidebarTabId.value = 'assets'
+    mockActiveJobsCount.value = 3
+
+    const sidebarTab = useJobHistorySidebarTab()
+
+    expect(typeof sidebarTab.iconBadge).toBe('function')
+    expect((sidebarTab.iconBadge as () => string | null)()).toBe('3')
+  })
+
+  it('hides badge while the job history panel is open', () => {
+    mockActiveSidebarTabId.value = 'job-history'
+    mockActiveJobsCount.value = 3
+
+    const sidebarTab = useJobHistorySidebarTab()
+
+    expect((sidebarTab.iconBadge as () => string | null)()).toBeNull()
+  })
+
+  it('hides badge when there are no active jobs', () => {
+    mockActiveSidebarTabId.value = null
+    mockActiveJobsCount.value = 0
+
+    const sidebarTab = useJobHistorySidebarTab()
+
+    expect((sidebarTab.iconBadge as () => string | null)()).toBeNull()
+  })
+})

src/composables/sidebarTabs/useJobHistorySidebarTab.ts

@@ -1,6 +1,8 @@
 import { markRaw } from 'vue'
 
 import JobHistorySidebarTab from '@/components/sidebar/tabs/JobHistorySidebarTab.vue'
+import { useQueueStore } from '@/stores/queueStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useJobHistorySidebarTab = (): SidebarTabExtension => {
@@ -11,6 +13,16 @@ export const useJobHistorySidebarTab = (): SidebarTabExtension => {
     tooltip: 'queue.jobHistory',
     label: 'queue.jobHistory',
     component: markRaw(JobHistorySidebarTab),
-    type: 'vue'
+    type: 'vue',
+    iconBadge: () => {
+      const sidebarTabStore = useSidebarTabStore()
+      if (sidebarTabStore.activeSidebarTabId === 'job-history') {
+        return null
+      }
+
+      const queueStore = useQueueStore()
+      const count = queueStore.activeJobsCount
+      return count > 0 ? count.toString() : null
+    }
   }
 }