From 72124a9fb02c617ae5d1fde25489d93b690365dd Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Mon, 24 Nov 2025 13:03:37 -0800
Subject: [PATCH] [feat] Improve queue job item UX based on design feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Running jobs now show cancel button at all times (always visible)
- Cancel/delete buttons use destructive red styling by default
- 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

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/queue/QueueOverlayActive.vue |  2 +-
 src/components/queue/job/QueueJobItem.vue   | 59 ++++++++++++++++++---
 src/utils/queueDisplay.ts                   |  2 +-
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/components/queue/QueueOverlayActive.vue b/src/components/queue/QueueOverlayActive.vue
index 76d339fcc..abb3ae982 100644
--- a/src/components/queue/QueueOverlayActive.vue
+++ b/src/components/queue/QueueOverlayActive.vue
@@ -47,7 +47,7 @@
             v-tooltip.top="cancelJobTooltip"
             type="secondary"
             size="sm"
-            class="size-6 bg-secondary-background hover:bg-destructive-background"
+            class="size-6 bg-destructive-background hover:bg-destructive-background-hover"
             :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
             @click="$emit('interruptAll')"
           >
diff --git a/src/components/queue/job/QueueJobItem.vue b/src/components/queue/job/QueueJobItem.vue
index 8158c03cf..5f01fe0d4 100644
--- a/src/components/queue/job/QueueJobItem.vue
+++ b/src/components/queue/job/QueueJobItem.vue
@@ -82,7 +82,16 @@
               :src="iconImageUrl"
               class="h-full w-full object-cover"
             />
-            <i v-else :class="[iconClass, 'size-4']" />
+            <i
+              v-else
+              :class="
+                cn(
+                  iconClass,
+                  'size-4',
+                  props.state === 'pending' && 'animate-spin'
+                )
+              "
+            />
           </div>
         </div>
       </div>
@@ -93,6 +102,23 @@
         </div>
       </div>
 
+      <!--
+        TODO: Refactor action buttons to use a declarative config system.
+
+        Instead of hardcoding button visibility logic in the template, define an array of
+        action button configs with properties like:
+        - icon, label, action, tooltip
+        - visibleStates: JobState[] (which job states show this button)
+        - alwaysVisible: boolean (show without hover)
+        - destructive: boolean (use destructive styling)
+
+        Then render buttons in two groups:
+        1. Always-visible buttons (outside Transition)
+        2. Hover-only buttons (inside Transition)
+
+        This would eliminate the current duplication where the cancel button exists
+        both outside (for running) and inside (for pending) the Transition.
+      -->
       <div class="relative z-[1] flex items-center gap-2 text-text-secondary">
         <Transition
           mode="out-in"
@@ -113,18 +139,22 @@
               v-tooltip.top="deleteTooltipConfig"
               type="transparent"
               size="sm"
-              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
+              class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
               :aria-label="t('g.delete')"
               @click.stop="emit('delete')"
             >
               <i class="icon-[lucide--trash-2] size-4" />
             </IconButton>
             <IconButton
-              v-else-if="props.state !== 'completed' && computedShowClear"
+              v-else-if="
+                props.state !== 'completed' &&
+                props.state !== 'running' &&
+                computedShowClear
+              "
               v-tooltip.top="cancelTooltipConfig"
               type="transparent"
               size="sm"
-              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
+              class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
               :aria-label="t('g.cancel')"
               @click.stop="emit('cancel')"
             >
@@ -143,17 +173,33 @@
               v-tooltip.top="moreTooltipConfig"
               type="transparent"
               size="sm"
-              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
+              class="size-6 transform gap-1 rounded bg-modal-card-button-surface text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
               :aria-label="t('g.more')"
               @click.stop="emit('menu', $event)"
             >
               <i class="icon-[lucide--more-horizontal] size-4" />
             </IconButton>
           </div>
-          <div v-else key="secondary" class="pr-2">
+          <div
+            v-else-if="props.state !== 'running'"
+            key="secondary"
+            class="pr-2"
+          >
             <slot name="secondary">{{ props.rightText }}</slot>
           </div>
         </Transition>
+        <!-- Running job cancel button - always visible -->
+        <IconButton
+          v-if="props.state === 'running' && computedShowClear"
+          v-tooltip.top="cancelTooltipConfig"
+          type="transparent"
+          size="sm"
+          class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
+          :aria-label="t('g.cancel')"
+          @click.stop="emit('cancel')"
+        >
+          <i class="icon-[lucide--x] size-4" />
+        </IconButton>
       </div>
     </div>
   </div>
@@ -170,6 +216,7 @@ import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import type { JobState } from '@/types/queue'
 import { iconForJobState } from '@/utils/queueDisplay'
+import { cn } from '@/utils/tailwindUtil'
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/utils/queueDisplay.ts b/src/utils/queueDisplay.ts
index 18aee1cb4..d743c1b2f 100644
--- a/src/utils/queueDisplay.ts
+++ b/src/utils/queueDisplay.ts
@@ -24,7 +24,7 @@ type JobDisplay = {
 export const iconForJobState = (state: JobState): string => {
   switch (state) {
     case 'pending':
-      return 'icon-[lucide--clock]'
+      return 'icon-[lucide--loader-circle]'
     case 'initialization':
       return 'icon-[lucide--server-crash]'
     case 'running':