Enhancements to the queue image feed (#646)

* Enhancements to the queue image feed
 - Change flat list icon
 - Add cover/contain mode
 - Add right click -> go to node
 - Add go to node link on detail

* Add loading spinner

* resolve comments

---------

Co-authored-by: huchenlei <chenlei.hu@mail.utoronto.ca>

src/components/sidebar/tabs/queue/ResultGallery.vue

@@ -13,7 +13,12 @@
     :showThumbnails="false"
   >
     <template #item="{ item }">
-      <ComfyImage :key="item.url" :src="item.url" class="galleria-image" />
+      <ComfyImage
+        :key="item.url"
+        :src="item.url"
+        :contain="false"
+        class="galleria-image"
+      />
     </template>
   </Galleria>
 </template>

src/components/sidebar/tabs/queue/ResultItem.vue

@@ -3,6 +3,11 @@
     <template
       v-if="result.mediaType === 'images' || result.mediaType === 'gifs'"
     >
+      <ComfyImage
+        :src="result.url"
+        class="task-output-image"
+        :contain="imageFit === 'contain'"
+      />
       <div class="image-preview-mask">
         <Button
           icon="pi pi-eye"
@@ -11,7 +16,6 @@
           rounded
         />
       </div>
-      <ComfyImage :src="result.url" class="task-output-image" />
     </template>
     <!-- TODO: handle more media types -->
     <div v-else class="task-result-preview">
@@ -25,7 +29,8 @@
 import { ResultItemImpl } from '@/stores/queueStore'
 import ComfyImage from '@/components/common/ComfyImage.vue'
 import Button from 'primevue/button'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { useSettingStore } from '@/stores/settingStore'
 
 const props = defineProps<{
   result: ResultItemImpl
@@ -36,6 +41,10 @@ const emit = defineEmits<{
 }>()
 
 const resultContainer = ref<HTMLElement | null>(null)
+const settingStore = useSettingStore()
+const imageFit = computed<string>(() =>
+  settingStore.get('Comfy.Queue.ImageFit')
+)
 
 onMounted(() => {
   if (props.result.mediaType === 'images') {
@@ -58,13 +67,6 @@ onMounted(() => {
   align-items: center;
 }
 
-:deep(.task-output-image) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-}
-
 .image-preview-mask {
   position: absolute;
   left: 50%;
@@ -75,6 +77,7 @@ onMounted(() => {
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
+  z-index: 1;
 }
 
 .result-container:hover .image-preview-mask {

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -28,7 +28,13 @@
     <div class="task-item-details">
       <div class="tag-wrapper status-tag-group">
         <Tag v-if="isFlatTask && task.isHistory" class="node-name-tag">
-          {{ node?.type }} (#{{ node?.id }})
+          <Button
+            class="task-node-link"
+            :label="`${node?.type} (#${node?.id})`"
+            link
+            size="small"
+            @click="app.goToNode(node?.id)"
+          />
         </Tag>
         <Tag :severity="taskTagSeverity(task.displayStatus)">
           <span v-html="taskStatusText(task.displayStatus)"></span>
@@ -59,6 +65,7 @@ import Tag from 'primevue/tag'
 import ResultItem from './ResultItem.vue'
 import { TaskItemDisplayStatus, type TaskItemImpl } from '@/stores/queueStore'
 import { ComfyNode } from '@/types/comfyWorkflow'
+import { app } from '@/scripts/app'
 
 const props = defineProps<{
   task: TaskItemImpl
@@ -77,13 +84,16 @@ const node: ComfyNode | null = flatOutputs.length
   : null
 
 const emit = defineEmits<{
-  (e: 'contextmenu', value: { task: TaskItemImpl; event: MouseEvent }): void
+  (
+    e: 'contextmenu',
+    value: { task: TaskItemImpl; event: MouseEvent; node?: ComfyNode }
+  ): void
   (e: 'preview', value: TaskItemImpl): void
   (e: 'task-output-length-clicked', value: TaskItemImpl): void
 }>()
 
 const handleContextMenu = (e: MouseEvent) => {
-  emit('contextmenu', { task: props.task, event: e })
+  emit('contextmenu', { task: props.task, event: e, node })
 }
 
 const handlePreview = () => {
@@ -164,6 +174,11 @@ const formatTime = (time?: number) => {
   justify-content: space-between;
   align-items: center;
   width: 100%;
+  z-index: 1;
+}
+
+.task-node-link {
+  padding: 2px;
 }
 
 /* In dark mode, transparent background color for tags is not ideal for tags that