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/common/ComfyImage.vue

@@ -1,10 +1,25 @@
 <!-- A image with placeholder fallback on error -->
 <template>
-  <img
-    :src="src"
-    @error="handleImageError"
-    :class="[{ 'broken-image': imageBroken }, ...classArray]"
-  />
+  <span
+    v-if="!imageBroken"
+    class="comfy-image-wrap"
+    :class="[{ contain: contain }]"
+  >
+    <img
+      v-if="contain"
+      :src="src"
+      @error="handleImageError"
+      :data-test="src"
+      class="comfy-image-blur"
+      :style="{ 'background-image': `url(${src})` }"
+    />
+    <img
+      :src="src"
+      @error="handleImageError"
+      class="comfy-image-main"
+      :class="[...classArray]"
+    />
+  </span>
   <div v-if="imageBroken" class="broken-image-placeholder">
     <i class="pi pi-image"></i>
     <span>{{ $t('imageFailedToLoad') }}</span>
@@ -14,10 +29,16 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-const props = defineProps<{
-  src: string
-  class?: string | string[] | object
-}>()
+const props = withDefaults(
+  defineProps<{
+    src: string
+    class?: string | string[] | object
+    contain: boolean
+  }>(),
+  {
+    contain: false
+  }
+)
 
 const imageBroken = ref(false)
 const handleImageError = (e: Event) => {
@@ -37,8 +58,37 @@ const classArray = computed(() => {
 </script>
 
 <style scoped>
-.broken-image {
-  display: none;
+.comfy-image-wrap {
+  display: contents;
+}
+
+.comfy-image-blur {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.comfy-image-main {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  z-index: 1;
+}
+
+.contain .comfy-image-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.contain .comfy-image-main {
+  object-fit: contain;
+  backdrop-filter: blur(10px);
+  position: absolute;
 }
 
 .broken-image-placeholder {