Add list view

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -9,6 +9,7 @@
         :preview-alt="job.title"
         :icon-name="job.iconName"
         :icon-class="getJobIconClass(job)"
+        :icon-wrapper-class="getJobIconWrapperClass(job)"
         :primary-text="job.title"
         :secondary-text="job.meta"
         :progress-total-percent="job.progressTotalPercent"
@@ -195,12 +196,22 @@ function onJobLeave(jobId: string) {
   }
 }
 
+function getJobIconWrapperClass(job: JobListItem): string | undefined {
+  if (job.state === 'failed') {
+    return 'bg-modal-card-placeholder-background'
+  }
+  return undefined
+}
+
 function getJobIconClass(job: JobListItem): string | undefined {
   const classes = []
   const iconName = job.iconName ?? iconForJobState(job.state)
   if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
     classes.push('animate-spin')
   }
+  if (job.state === 'failed') {
+    classes.push('text-destructive-background')
+  }
   return classes.length ? classes.join(' ') : undefined
 }
 

src/composables/queue/useJobActions.ts

@@ -6,7 +6,7 @@ import type { JobListItem } from '@/composables/queue/useJobList'
 import { useJobMenu } from '@/composables/queue/useJobMenu'
 import type { JobState } from '@/types/queue'
 
-type JobActionKey = 'cancel'
+export type JobActionKey = 'cancel'
 
 export type JobAction = {
   key: JobActionKey