From fc67e3bfd89e9acadd0c3175ce7e0ec51de1ef54 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Mon, 19 Jan 2026 17:09:45 -0800 Subject: [PATCH 01/12] feat: show active jobs label in top menu --- src/components/TopMenuSection.test.ts | 3 ++- src/components/TopMenuSection.vue | 25 ++++++++++++++++--------- src/locales/en/main.json | 3 ++- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts index b4d11efea57..21229fe674b 100644 --- a/src/components/TopMenuSection.test.ts +++ b/src/components/TopMenuSection.test.ts @@ -36,7 +36,8 @@ function createWrapper() { sideToolbar: { queueProgressOverlay: { viewJobHistory: 'View job history', - expandCollapsedQueue: 'Expand collapsed queue' + expandCollapsedQueue: 'Expand collapsed queue', + activeJobsShort: '{count} active' } } } diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue index 28f2411ea7d..67889deb7d8 100644 --- a/src/components/TopMenuSection.vue +++ b/src/components/TopMenuSection.vue @@ -44,19 +44,16 @@ queueStore.pendingTasks.length) +const activeJobsCount = computed( + () => queueStore.pendingTasks.length + queueStore.runningTasks.length +) +const activeJobsLabel = computed(() => { + const count = activeJobsCount.value + return t( + 'sideToolbar.queueProgressOverlay.activeJobsShort', + { count: n(count) }, + count + ) +}) const isIntegratedTabBar = computed( () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated' ) diff --git a/src/locales/en/main.json b/src/locales/en/main.json index fa557ee96b5..ec72f277bb9 100644 --- a/src/locales/en/main.json +++ b/src/locales/en/main.json @@ -751,6 +751,7 @@ "sortJobs": "Sort jobs", "sortBy": "Sort by", "activeJobs": "{count} active job | {count} active jobs", + "activeJobsShort": "{count} active", "activeJobsSuffix": "active jobs", "jobQueue": "Job Queue", "expandCollapsedQueue": "Expand job queue", @@ -2619,4 +2620,4 @@ "tokenExchangeFailed": "Failed to authenticate with workspace: {error}" } } -} \ No newline at end of file +} From 0ad40f55045e5069a452e7e9f0eb12e47c8c97cf Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Mon, 19 Jan 2026 17:13:44 -0800 Subject: [PATCH 02/12] test: cover top menu active jobs label --- src/components/TopMenuSection.test.ts | 35 ++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts index 21229fe674b..7e34f53dd23 100644 --- a/src/components/TopMenuSection.test.ts +++ b/src/components/TopMenuSection.test.ts @@ -1,12 +1,17 @@ import { createTestingPinia } from '@pinia/testing' import { mount } from '@vue/test-utils' import { beforeEach, describe, expect, it, vi } from 'vitest' -import { computed } from 'vue' +import { computed, nextTick } from 'vue' import { createI18n } from 'vue-i18n' import TopMenuSection from '@/components/TopMenuSection.vue' import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue' import LoginButton from '@/components/topbar/LoginButton.vue' +import type { + JobListItem, + JobStatus +} from '@/platform/remote/comfyui/jobs/jobTypes' +import { TaskItemImpl, useQueueStore } from '@/stores/queueStore' import { isElectron } from '@/utils/envUtil' const mockData = vi.hoisted(() => ({ isLoggedIn: false })) @@ -60,6 +65,19 @@ function createWrapper() { }) } +function createJob(id: string, status: JobStatus): JobListItem { + return { + id, + status, + create_time: 0, + priority: 0 + } +} + +function createTask(id: string, status: JobStatus): TaskItemImpl { + return new TaskItemImpl(createJob(id, status)) +} + describe('TopMenuSection', () => { beforeEach(() => { vi.resetAllMocks() @@ -101,4 +119,19 @@ describe('TopMenuSection', () => { }) }) }) + + it('shows the active jobs label with the current count', async () => { + const wrapper = createWrapper() + const queueStore = useQueueStore() + queueStore.pendingTasks = [createTask('pending-1', 'pending')] + queueStore.runningTasks = [ + createTask('running-1', 'in_progress'), + createTask('running-2', 'in_progress') + ] + + await nextTick() + + const queueButton = wrapper.find('[aria-label="Expand collapsed queue"]') + expect(queueButton.text()).toContain('3 active') + }) }) From 3e61580f576d7f06a6151e8402bc1baed588cd89 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Mon, 19 Jan 2026 17:15:12 -0800 Subject: [PATCH 03/12] test: use test id for top menu queue toggle --- src/components/TopMenuSection.test.ts | 2 +- src/components/TopMenuSection.vue | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts index 7e34f53dd23..28d91bbc68b 100644 --- a/src/components/TopMenuSection.test.ts +++ b/src/components/TopMenuSection.test.ts @@ -131,7 +131,7 @@ describe('TopMenuSection', () => { await nextTick() - const queueButton = wrapper.find('[aria-label="Expand collapsed queue"]') + const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]') expect(queueButton.text()).toContain('3 active') }) }) diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue index 67889deb7d8..e3c404ea7e5 100644 --- a/src/components/TopMenuSection.vue +++ b/src/components/TopMenuSection.vue @@ -50,6 +50,7 @@ t('sideToolbar.queueProgressOverlay.expandCollapsedQueue') " class="px-3" + data-testid="queue-overlay-toggle" @click="toggleQueueOverlay" > From 42566400e866480a06dfd1de13bc59cf0c362018 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Mon, 19 Jan 2026 18:40:53 -0800 Subject: [PATCH 04/12] replace aria label with sr only text --- src/components/TopMenuSection.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue index e3c404ea7e5..0f1f4ba29b7 100644 --- a/src/components/TopMenuSection.vue +++ b/src/components/TopMenuSection.vue @@ -46,9 +46,6 @@ type="destructive" size="md" :aria-pressed="isQueueOverlayExpanded" - :aria-label=" - t('sideToolbar.queueProgressOverlay.expandCollapsedQueue') - " class="px-3" data-testid="queue-overlay-toggle" @click="toggleQueueOverlay" @@ -56,6 +53,9 @@ {{ activeJobsLabel }} + + {{ t('sideToolbar.queueProgressOverlay.expandCollapsedQueue') }} + Date: Mon, 19 Jan 2026 21:17:20 -0800 Subject: [PATCH 05/12] fix: centralize active jobs count --- src/components/sidebar/tabs/AssetsSidebarTab.vue | 5 ++--- src/stores/queueStore.ts | 4 ++++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue index 341d410196e..32af5360808 100644 --- a/src/components/sidebar/tabs/AssetsSidebarTab.vue +++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue @@ -212,6 +212,7 @@