Add queue overlay inline progress and controls #7338
Conversation
benceruleanlu
requested review from
a team,
KarryCharon,
Yorha4D,
shinshin86 and
viva-jinyi
as code owners
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughReorganizes the top menu UI by restructuring TopMenuSection layout to support a new docked/floating actionbar system with queue controls and progress display. Introduces new queue progress components, refactors job item action visibility logic, adds actionbar state management via settings store, and updates button type styling. Changes
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
dosubot
bot
added
the
size:XL
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/14/2025, 03:48:50 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 12/14/2025, 03:57:46 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
There was a problem hiding this comment.
Pull request overview
This PR adds inline queue progress visualization and enhances the queue overlay UI with better job status controls and information.
Key Changes:
- Introduces inline progress bars and summary displays that show queue progress directly in the actionbar
- Refactors queue job item actions into a declarative configuration system for better maintainability
- Extracts current node name logic into a reusable composable for better code organization
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
src/types/buttonTypes.ts |
Adds 'destructive' button type variant with appropriate styling for delete/cancel actions |
src/locales/en/main.json |
Adds translation keys for inline progress labels and queue overlay controls |
src/composables/queue/useJobList.ts |
Refactors to extract current node name logic and renames allTasksSorted to orderedTasks for clarity |
src/composables/queue/useCurrentNodeName.ts |
New composable that encapsulates the logic for determining the current executing node name |
src/components/queue/job/QueueJobItem.vue |
Refactors action buttons from hardcoded template logic to a declarative configuration system |
src/components/queue/QueueProgressOverlay.vue |
Updates to pass active jobs count and expose close handler |
src/components/queue/QueueOverlayHeader.vue |
Adds close button to the overlay header |
src/components/queue/QueueOverlayExpanded.vue |
Redesigns the header section to show active jobs count and clear queue button inline |
src/components/queue/QueueInlineProgressSummary.vue |
New component displaying queue progress percentages as text summary |
src/components/queue/QueueInlineProgress.vue |
New component rendering progress bars at the bottom of the actionbar |
src/components/button/IconTextButton.vue |
Adds support for default slot content to allow custom button text rendering |
src/components/actionbar/ComfyActionbar.vue |
Major refactor to support docked/floating modes and integrate inline progress components |
src/components/TopMenuSection.vue |
Updates layout to accommodate inline progress summary in docked mode |
| const position = computed(() => settingsStore.get('Comfy.UseNewMenu')) | ||
| const visible = computed(() => position.value !== 'Disabled') | ||
| const tabContainer = document.querySelector('.workflow-tabs-container') |
There was a problem hiding this comment.
The variable tabContainer is queried from the DOM at the module level (line 144), which means it's evaluated when the module is first imported. This may execute before the DOM is fully rendered, potentially resulting in null. Consider moving this query inside onMounted or using a computed property to ensure the element exists when it's accessed.
| const tabContainer = document.querySelector('.workflow-tabs-container') | |
| const tabContainer = ref<HTMLElement | null>(null) |
| type ActionVariant = 'neutral' | 'destructive' | ||
| type ActionMode = 'hover' | 'always' | ||
| type BaseActionConfig = { | ||
| key: string | ||
| variant: ActionVariant | ||
| mode: ActionMode | ||
| ariaLabel: string | ||
| tooltip?: ReturnType<typeof buildTooltipConfig> | ||
| isVisible: () => boolean | ||
| onClick?: (event?: MouseEvent) => void | ||
| } |
There was a problem hiding this comment.
The variant field is defined in the BaseActionConfig type but is never actually used in the component logic. It doesn't affect the rendering or behavior of the actions. Consider removing this unused field from the type definition to simplify the code.
| { | ||
| key: 'view', | ||
| type: 'icon', | ||
| variant: 'neutral', | ||
| buttonType: 'secondary', | ||
| mode: 'hover', | ||
| iconClass: 'icon-[lucide--zoom-in]', | ||
| ariaLabel: t('menuLabels.View'), | ||
| tooltip: viewTooltipConfig.value, | ||
| isVisible: () => props.state === 'completed', | ||
| onClick: () => emit('view') | ||
| }, |
There was a problem hiding this comment.
The view action changed from a TextButton with the label "View" to an IconButton with a zoom-in icon. This is a significant UI change that removes the visible text label. While the icon may be intuitive, the text button was more explicit about its purpose. Consider whether this change aligns with the design intent, or if it would be better to keep the TextButton for clarity.
| <IconTextButton | ||
| v-tooltip.bottom="queueHistoryTooltipConfig" | ||
| size="sm" | ||
| type="secondary" | ||
| icon-position="right" | ||
| data-testid="queue-toggle-button" | ||
| class="ml-2 h-8 border-0 px-3 text-sm font-medium text-base-foreground cursor-pointer" | ||
| :aria-pressed="props.queueOverlayExpanded" | ||
| :aria-label="queueToggleLabel" | ||
| :label="queueToggleLabel" | ||
| @click="toggleQueueOverlay" | ||
| > | ||
| <!-- Custom implementation for static 1-2 digit shifts --> | ||
| <span class="flex items-center gap-1"> | ||
| <span | ||
| class="inline-flex min-w-[2ch] justify-center tabular-nums text-center" | ||
| > | ||
| {{ queuedCount }} | ||
| </span> | ||
| <span>{{ queuedSuffix }}</span> | ||
| </span> | ||
| <template #icon> | ||
| <i class="icon-[lucide--chevron-down] size-4" /> | ||
| </template> | ||
| </IconTextButton> |
There was a problem hiding this comment.
The IconTextButton now renders both a default slot and a label prop. When the default slot is provided (lines 63-70), the label prop is ignored. However, the label prop is still being passed (line 59) and used for aria-label. This creates confusion about which text is displayed vs. which is used for accessibility. Consider removing the label prop when using the default slot, or clarifying the intended behavior.
benceruleanlu
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
|
Generating new expectations because this PR makes visual changes in the top menu section. However, there are some tests that are still failing that I suspect might be flaky, one is about workflows that I've seen consistently fail, and the other timed out 4 times in a row about the french translation. I will check again after the new generations go in. |
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
github-actions
bot
removed
the
New Browser Test Expectations
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/queue/job/QueueJobItem.vue (1)
153-181: Consider migrating to Vue 3.5 style props declaration.Per coding guidelines, prefer Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring instead of
withDefaults. While this follows the existing pattern in the file, consider refactoring to:const { jobId, workflowId, state, title, rightText = '', iconName, iconImageUrl, showClear, showMenu, progressTotalPercent, progressCurrentPercent, runningNodeName, activeDetailsId = null } = defineProps<{ jobId: string workflowId?: string state: JobState title: string rightText?: string iconName?: string iconImageUrl?: string showClear?: boolean showMenu?: boolean progressTotalPercent?: number progressCurrentPercent?: number runningNodeName?: string activeDetailsId?: string | null }>()This provides reactive defaults with destructuring per Vue 3.5 conventions. As per coding guidelines, use Vue 3.5 style of default prop declaration.
src/components/TopMenuSection.vue (1)
108-111: Replace scoped style block with Tailwind utility class.The
<style scoped>block withbackground-color: var(--comfy-menu-bg)should be replaced with the semantic Tailwind classbg-comfy-menu-bgon the.actionbar-containerelement in the template. Per guidelines, Vue components should use Tailwind CSS only for styling and avoid<style>blocks. The semantic Tailwind valuebg-comfy-menu-bgis already defined in the design system theme.
♻️ Duplicate comments (2)
src/components/queue/job/QueueJobItem.vue (1)
268-292: Thevariantfield is defined but never used.The
variantfield inBaseActionConfigis set in action configurations but is not consumed anywhere in the component's rendering logic. This is dead code that should either be removed or implemented.Apply this diff to remove the unused field:
type BaseActionConfig = { key: string - variant: ActionVariant mode: ActionMode ariaLabel: string tooltip?: ReturnType<typeof buildTooltipConfig> isVisible: () => boolean onClick?: (event?: MouseEvent) => void }And remove
ActionVarianttype and allvariantproperties from action definitions inbaseActions.src/components/actionbar/ComfyActionbar.vue (1)
137-137: DOM query at module level may execute before DOM is ready.
document.querySelector('.workflow-tabs-container')executes when the module is imported, potentially before the DOM element exists. This could result intabContainerbeingnull, causing issues inuseDraggable'sonMovecallback at line 163.Consider using a ref and querying in
onMounted:-const tabContainer = document.querySelector('.workflow-tabs-container') +const tabContainer = ref<HTMLElement | null>(null) + +onMounted(() => { + tabContainer.value = document.querySelector('.workflow-tabs-container') +})Then update the usage in
onMove:-const minY = tabContainer?.getBoundingClientRect().bottom ?? 40 +const minY = tabContainer.value?.getBoundingClientRect().bottom ?? 40
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/components/TopMenuSection.vue(1 hunks)src/components/actionbar/ComfyActionbar.vue(6 hunks)src/components/button/IconTextButton.vue(2 hunks)src/components/queue/QueueInlineProgress.vue(1 hunks)src/components/queue/QueueInlineProgressSummary.vue(1 hunks)src/components/queue/QueueOverlayExpanded.vue(2 hunks)src/components/queue/QueueOverlayHeader.vue(2 hunks)src/components/queue/QueueProgressOverlay.vue(4 hunks)src/components/queue/job/QueueJobItem.vue(6 hunks)src/composables/queue/useCurrentNodeName.ts(1 hunks)src/composables/queue/useJobList.ts(6 hunks)src/locales/en/main.json(3 hunks)src/types/buttonTypes.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/composables/queue/useCurrentNodeName.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vuesrc/types/buttonTypes.tssrc/composables/queue/useJobList.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyMinimize the surface area (exported values) of each module and composable
Files:
src/composables/queue/useCurrentNodeName.tssrc/types/buttonTypes.tssrc/composables/queue/useJobList.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/composables/queue/useCurrentNodeName.tssrc/composables/queue/useJobList.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/composables/queue/useCurrentNodeName.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vuesrc/types/buttonTypes.tssrc/composables/queue/useJobList.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/composables/queue/useCurrentNodeName.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vuesrc/composables/queue/useJobList.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/composables/queue/useCurrentNodeName.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vuesrc/types/buttonTypes.tssrc/composables/queue/useJobList.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/composables/queue/useCurrentNodeName.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vuesrc/composables/queue/useJobList.ts
src/composables/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Composable files must follow the naming pattern
useXyz.ts
Files:
src/composables/queue/useCurrentNodeName.tssrc/composables/queue/useJobList.ts
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
src/composables/queue/useCurrentNodeName.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/locales/en/main.jsonsrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vuesrc/types/buttonTypes.tssrc/composables/queue/useJobList.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/composables/queue/useCurrentNodeName.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vuesrc/types/buttonTypes.tssrc/composables/queue/useJobList.ts
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsVue component file names must use PascalCase; for example,
MenuHamburger.vue
Files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use<script setup lang="ts">for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not usewithDefaultsor runtime props declaration
PreferuseModelto separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using<style>blocks in Vue components
Use semantic Tailwind values fromstyle.csstheme instead of thedark:variant; for example, usebg-node-component-surfaceinstead ofdark:prefixes
Always usecn()utility from@/utils/tailwindUtilto merge Tailwind class names; do not use:class="[]"syntax
Usereffor reactive state in Vue Composition API components
Implement computed properties withcomputed()from Vue; avoid using arefwith awatchif acomputedwould work instead
UsewatchandwatchEffectfor side effects in Vue components
Implement lifecycle hooks usingonMounted,onUpdated, and other Vue lifecycle functions
Useprovide/injectfor dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundantcomputed, and prefercomputedoverwatch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries insrc/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vue
🧠 Learnings (28)
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/composables/queue/useCurrentNodeName.tssrc/types/buttonTypes.tssrc/composables/queue/useJobList.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/composables/queue/useCurrentNodeName.tssrc/types/buttonTypes.tssrc/composables/queue/useJobList.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/composables/queue/useCurrentNodeName.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vuesrc/types/buttonTypes.tssrc/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with Message
Applied to files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vue
📚 Learning: 2025-12-09T04:35:43.971Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:43.971Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/locales/en/main.json
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/components/queue/QueueOverlayHeader.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Prefer emit/event-name for state changes over other communication patterns
Applied to files:
src/components/queue/QueueOverlayHeader.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use vue-i18n for ALL UI strings
Applied to files:
src/components/queue/QueueOverlayExpanded.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`
Applied to files:
src/components/queue/QueueOverlayExpanded.vuesrc/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
src/components/queue/QueueOverlayExpanded.vuesrc/composables/queue/useJobList.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use vue-i18n in composition API for any string literals; place new translation entries in `src/locales/en/main.json`
Applied to files:
src/components/queue/QueueOverlayExpanded.vuesrc/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/components/queue/QueueOverlayExpanded.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/components/queue/QueueOverlayExpanded.vuesrc/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Sidebar component with Drawer
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use watch and watchEffect for side effects
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `watch` and `watchEffect` for side effects in Vue components
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` from Vue; avoid using a `ref` with a `watch` if a `computed` would work instead
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/composables/queue/useJobList.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Be judicious with addition of new refs or other state: prefer props, avoid redundant `computed`, and prefer `computed` over `watch`
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Applied to files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgress.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels
Applied to files:
src/components/queue/QueueInlineProgress.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue Composition API components
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/composables/queue/useJobList.ts
🧬 Code graph analysis (2)
src/types/buttonTypes.ts (1)
src/utils/tailwindUtil.ts (1)
cn(1-1)
src/composables/queue/useJobList.ts (3)
src/composables/queue/useCurrentNodeName.ts (1)
useCurrentNodeName(8-23)src/stores/queueStore.ts (1)
TaskItemImpl(216-475)src/utils/queueUtil.ts (1)
jobStateFromTask(11-29)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: update-snapshots-sharded (2, 4)
- GitHub Check: update-snapshots-sharded (4, 4)
- GitHub Check: update-snapshots-sharded (3, 4)
- GitHub Check: playwright-tests-chromium-sharded (7, 8)
🔇 Additional comments (25)
src/components/queue/job/QueueJobItem.vue (6)
5-10: LGTM!Good addition of data attributes for testing and diagnostics. The centralized mouse event handlers improve maintainability by consolidating hover logic.
54-72: LGTM!The progress bar implementation correctly renders only when the job is running and progress values are available. The layered approach with primary/secondary colors provides clear visual feedback.
74-95: LGTM!The expanded hover target area improves UX for triggering the preview popover. The conditional rendering between image and icon fallback is handled correctly with the
v-if/v-elsepattern.
108-135: LGTM!The declarative action rendering system is clean and maintainable. Using common button components from
@/components/button/follows project conventions. Based on learnings, this is the preferred approach.
313-393: LGTM!The declarative action system with
baseActionsis well-designed. Good use of vue-i18n for all user-facing strings (t('g.cancel'),t('g.delete'), etc.) as per coding guidelines. The visibility logic correctly handles different job states, and having separate cancel actions for hover vs. running state provides appropriate UX.
395-414: LGTM!The
visibleActionscomputed property efficiently filters actions based on visibility and mode. TheactionButtonClassconstant keeps shared Tailwind classes DRY without over-abstracting. Based on learnings, inline Tailwind CSS class strings for static classes are acceptable.src/types/buttonTypes.ts (1)
5-10: LGTM!The
destructivebutton type is implemented consistently across all button styling functions. The implementation follows the established patterns and uses semantic Tailwind tokens from the design system.Also applies to: 42-44, 59-61, 69-69
src/composables/queue/useCurrentNodeName.ts (1)
8-23: LGTM!The composable correctly computes the current node name with appropriate fallbacks:
- No executing node → em-dash
- Node has title → use trimmed title
- No title → derive from node type with i18n lookup
The defensive string handling and i18n integration are well-implemented.
src/composables/queue/useJobList.ts (2)
177-186: LGTM! Refactor maintains backward compatibility.The introduction of
orderedTasksas the primary source and keepingallTasksSortedas an alias ensures backward compatibility while consolidating the task ordering logic. The downstream computations (tasksWithJobState,jobItems,groupedJobItems) are correctly updated to use the new source.
161-161: LGTM! Composable extraction improves modularity.Extracting the current node name computation into a dedicated
useCurrentNodeNamecomposable improves code organization and reusability. The composable is properly integrated and used within the public API surface.src/locales/en/main.json (1)
720-721: LGTM! New locale keys align with queue controls.The
toggleLabelandclearQueuekeys are appropriately added for the new queue overlay controls introduced in this PR.src/components/queue/QueueOverlayHeader.vue (1)
65-77: LGTM! Close button implementation follows best practices.The new close button:
- Uses the common
IconButtoncomponent (per coding guidelines)- Includes proper accessibility with
aria-label- Has a tooltip for UX
- Includes
data-testidfor testing- Uses i18n for all user-facing text
- Follows the same pattern as the existing "more" button
Also applies to: 100-100, 106-106, 112-112
src/components/queue/QueueInlineProgress.vue (1)
1-33: LGTM! Inline progress component is well-implemented.The component correctly:
- Uses
aria-hidden="true"for decorative progress bars- Applies
pointer-events-noneto prevent interaction- Computes visibility based on prop and progress values
- Renders layered progress bars with appropriate z-ordering (current node progress overlays total progress)
- Uses semantic color tokens from the design system
src/components/queue/QueueProgressOverlay.vue (2)
137-137: LGTM! Overlay updates align with composable refactor.The changes correctly:
- Switch from
filteredTaskstoorderedTasks(consistent withuseJobListrefactor)- Update
useResultGalleryto use the new task source- Implement
closeOverlaymethod to handle the new close event- Pass
activeJobsCountto the child component for displayAlso applies to: 156-156, 162-164
9-9: LGTM! New close functionality properly integrated.The close button functionality is correctly wired:
- Added
data-testidfor testing- Passes
activeJobsCountprop to child- Listens to
closeevent and collapses overlayAlso applies to: 18-18, 23-23
src/components/button/IconTextButton.vue (1)
50-51: Avoid calling slot functions in computed properties.Calling
slots.default?.()inside a computed property can cause performance and reactivity issues. The slot function is invoked on every computed evaluation, which is inefficient.Consider these alternatives:
Option 1 (Preferred): Check slot existence without calling it
-const slots = useSlots() -const hasDefaultSlot = computed(() => Boolean(slots.default?.().length)) +const slots = useSlots() +const hasDefaultSlot = computed(() => Boolean(slots.default))Option 2: Use template-level logic
-const slots = useSlots() -const hasDefaultSlot = computed(() => Boolean(slots.default?.().length))Then in template:
<slot v-if="$slots.default"></slot> <span v-else>{{ label }}</span>The first option is simpler and aligns with Vue 3 composition API patterns for checking slot existence.
⛔ Skipped due to learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-09T20:22:23.620Z Learning: Applies to **/*.vue : Be judicious with addition of new refs or other state: prefer props, avoid redundant `computed`, and prefer `computed` over `watch`Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-09T20:22:23.620Z Learning: Applies to **/*.vue : Implement computed properties with `computed()` from Vue; avoid using a `ref` with a `watch` if a `computed` would work insteadLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Implement computed properties with computed()Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition APILearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed propertiesLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-09T20:22:23.620Z Learning: Applies to **/*.vue : Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not use `withDefaults` or runtime props declarationsrc/components/queue/QueueInlineProgressSummary.vue (1)
53-59: LGTM!The
shouldShowcomputed property correctly handles the visibility logic by combining thehiddenprop with execution state and progress values. The implementation ensures the summary only displays when there's meaningful progress to show.src/components/queue/QueueOverlayExpanded.vue (2)
11-35: LGTM!The new header section cleanly displays the active jobs count with proper i18n and conditionally shows the clear queue button when there are queued items. The IconButton usage follows project conventions with appropriate aria-label for accessibility.
68-84: LGTM!Props and emits are correctly defined using Vue 3 TypeScript patterns. The new
activeJobsCountprop andcloseemit integrate well with the parent component's queue overlay state management.src/components/actionbar/ComfyActionbar.vue (3)
170-195: LGTM!Queue and execution logic is well-structured with proper computed properties for derived state. The
cancelCurrentJobfunction correctly guards against interrupting when idle.
45-69: Clarify IconTextButton label vs slot usage.The component receives both a
labelprop (line 54) and a default slot (lines 58-65). Per past review feedback, when a default slot is provided, the label prop may be ignored for display but still used foraria-label. Verify this is the intended behavior, as the slot content duplicates the label information.If the slot content is intentionally replacing the label display (for layout control with
tabular-nums), consider adding a brief comment to clarify this pattern.
377-382: LGTM!The
isFloatingandinlineProgressTargetcomputed properties handle the visibility and teleport target logic cleanly. The conditional chain ininlineProgressTargetproperly handles all three cases: not visible, floating (render to panel), and docked (render to top menu container).src/components/TopMenuSection.vue (3)
19-23: LGTM!The
ComfyActionbarintegration with v-model bindings fordockedandqueue-overlay-expandedstates is clean. Thetop-menu-containerprop correctly passes the container ref for the inline progress teleport target.
42-48: LGTM!The conditional rendering of
QueueInlineProgressSummarycorrectly shows it only when the actionbar is docked (not floating) and the queue overlay is collapsed. This avoids duplicate progress displays and provides a clean UX.
83-89: LGTM!The computed property chain for actionbar state is well-structured with clear dependencies:
actionbarPosition→isActionbarEnabled→isActionbarFloating. This provides clean, readable logic for determining the actionbar's display mode.
…g/ComfyUI_frontend into queue-overlay-additions
## Summary - add Playwright queue list fixture and coverage for toggle/count display - update queue overlay unit tests plus storybook stories for inline progress and job item - adjust useJobList expectations for ordered tasks main <-- #7336 <-- #7338 <-- #7342 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7342-Add-queue-overlay-tests-and-stories-2c66d73d365081ae8e32d6e34f87e1d9) by [Unito](https://www.unito.io)
…g/ComfyUI_frontend into queue-overlay-additions
|
Going to finish a cleanup cycle, recheck new screenshots, then ping a reviewer. Target merge date is Monday |
1 participant
Summary
Add an actionbar queue toggle with inline progress (bar + summary), and refresh the expanded queue overlay header/actions.
Changes
{queuedCount} queuedtoggle and teleports an inline progress bar into the docked top menu container (or the floating panel).Close, displays active job count, and adds a more prominentClear queueaction.orderedTasks+currentNodeNameviauseJobList()/useCurrentNodeName()and use queue order for grouping.data-testid/state attrs to job items and new Playwright fixtures/spec for queue UI.QueueProgressOverlayno longer acceptsmenuHoveredand no longer shows the collapsed “active” overlay state.useJobList()API changes (orderedTasksreplacesallTasksSorted/filteredTasks; filter/sort state removed).Review Focus
Clear queuevsClear historyactions.useJobList()and node name formatting viauseCurrentNodeName().browser_tests/tests/queue/queueList.spec.ts+ updated unit tests and baseline snapshots.Screenshots (if applicable)
Baseline screenshots updated; no additional screenshots included.
┆Issue is synchronized with this Notion page by Unito