Files
ComfyUI_frontend/src/composables/sidebarTabs/useAssetsSidebarTab.ts
Benjamin Lu 030d4fd4d5 fix: hide assets sidebar badge when legacy queue is enabled (#8708)
### Motivation
- The Assets sidebar shows a notification-style badge immediately when a
job is queued using the legacy queue, which is misleading because that
badge is intended for the newer Queue Panel V2 experience.

### Description
- Gate the Assets sidebar `iconBadge` on the `Comfy.Queue.QPOV2` setting
by importing `useSettingStore` and returning `null` when QPO V2 is
disabled; otherwise show `pendingTasks.length` as before
(`src/composables/sidebarTabs/useAssetsSidebarTab.ts`).
- Add a focused unit test that mocks the settings and queue store to
verify the badge is hidden when QPO V2 is disabled and shows the pending
count when enabled
(`src/composables/sidebarTabs/useAssetsSidebarTab.test.ts`).
- Keep the Assets component import mocked in the test to avoid
bootstrapping the full UI during unit runs.

### Testing
- Ran the new unit test with `pnpm vitest
src/composables/sidebarTabs/useAssetsSidebarTab.test.ts` and it passed
(2 tests).
- Ran type checking with `pnpm typecheck` and it completed successfully.
- Ran linting with `pnpm lint` and no errors were reported.

------
[Codex
Task](https://chatgpt.com/codex/tasks/task_e_69867f4ceaac8330b9806d5b51006a6a)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8708-fix-hide-assets-sidebar-badge-when-legacy-queue-is-enabled-3006d73d3650818eb809de399583088e)
by [Unito](https://www.unito.io)
2026-02-06 20:21:16 -08:00

31 lines
914 B
TypeScript

import { markRaw } from 'vue'
import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
import { useSettingStore } from '@/platform/settings/settingStore'
import { useQueueStore } from '@/stores/queueStore'
import type { SidebarTabExtension } from '@/types/extensionTypes'
export const useAssetsSidebarTab = (): SidebarTabExtension => {
return {
id: 'assets',
icon: 'icon-[comfy--image-ai-edit]',
title: 'sideToolbar.assets',
tooltip: 'sideToolbar.assets',
label: 'sideToolbar.labels.assets',
component: markRaw(AssetsSidebarTab),
type: 'vue',
iconBadge: () => {
const settingStore = useSettingStore()
if (!settingStore.get('Comfy.Queue.QPOV2')) {
return null
}
const queueStore = useQueueStore()
return queueStore.pendingTasks.length > 0
? queueStore.pendingTasks.length.toString()
: null
}
}
}