[feat] Improve queue job item UX based on design feedback (#6893)

## Summary
- Running jobs now show cancel button at all times (always visible, not
just on hover)
- Cancel/delete buttons use destructive red styling by default with
hover state
- Changed pending job icon from clock to loader-circle with spin
animation
- Fixed icon buttons to be square (size-6) instead of rectangular
- Added TODO comment for future declarative button config system
- Pending hint ("Job added to queue") now shows only once per entry and
no longer resets when other jobs update
- Spinner animation now applies only to the pending loader icon;
completed/check icons no longer spin
- Queue overlay hover/active state also triggers when hovering the top
menu bar so controls stay visible

## Design Spec

https://www.notion.so/comfy-org/Design-Queue-Dialog-Job-Ordering-and-Cancel-Button-Visibility-2b46d73d365081748a43d5cc9fbe2639

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6893-feat-Improve-queue-job-item-UX-based-on-design-feedback-2b56d73d365081a2bc7ef6f6fea1c739)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Benjamin Lu
2025-11-25 11:23:39 -08:00
committed by GitHub
parent 6782d04f00
commit 4597b7e600
6 changed files with 92 additions and 22 deletions

View File

@@ -96,6 +96,7 @@ export function useJobList() {
const executionStore = useExecutionStore()
const workflowStore = useWorkflowStore()
const seenPendingIds = ref<Set<string>>(new Set())
const recentlyAddedPendingIds = ref<Set<string>>(new Set())
const addedHintTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
@@ -126,23 +127,27 @@ export function useJobList() {
.filter((id): id is string => !!id),
(pendingIds) => {
const pendingSet = new Set(pendingIds)
const next = new Set(recentlyAddedPendingIds.value)
const nextAdded = new Set(recentlyAddedPendingIds.value)
const nextSeen = new Set(seenPendingIds.value)
pendingIds.forEach((id) => {
if (!next.has(id)) {
next.add(id)
if (!nextSeen.has(id)) {
nextSeen.add(id)
nextAdded.add(id)
scheduleAddedHintExpiry(id)
}
})
for (const id of Array.from(next)) {
for (const id of Array.from(nextSeen)) {
if (!pendingSet.has(id)) {
next.delete(id)
nextSeen.delete(id)
nextAdded.delete(id)
clearAddedHintTimeout(id)
}
}
recentlyAddedPendingIds.value = next
recentlyAddedPendingIds.value = nextAdded
seenPendingIds.value = nextSeen
},
{ immediate: true }
)
@@ -157,6 +162,7 @@ export function useJobList() {
onUnmounted(() => {
addedHintTimeouts.forEach((timeoutId) => clearTimeout(timeoutId))
addedHintTimeouts.clear()
seenPendingIds.value = new Set<string>()
recentlyAddedPendingIds.value = new Set<string>()
})