Queue media preview (#449)

* output url

* Basic image previews

* Split out task item component

* Move task actions to context menu

* simplify

* Move spinner

* Lift context menu to tab scope

* Better tag

* Fix placeholder style

* nit

* Correctly handle cancelled

* nit

* Split out result item as separate component

* nit

* Fix center crop

* nit

* Simplify task item

* Flat list

* Show prompt id

* Make image draggable

* Disable preview for dragging

* Fix key

* Correctly handle task in expanded view

* Add preview

src/types/apiTypes.ts

@@ -6,11 +6,18 @@ import { colorPalettesSchema } from './colorPalette'
 const zNodeType = z.string()
 const zQueueIndex = z.number()
 const zPromptId = z.string()
-const zImageResult = z.object({
+const zResultItem = z.object({
   filename: z.string(),
   subfolder: z.string().optional(),
   type: z.string()
 })
+export type ResultItem = z.infer<typeof zResultItem>
+const zOutputs = z
+  .object({
+    audio: z.array(zResultItem).optional(),
+    images: z.array(zResultItem).optional()
+  })
+  .passthrough()
 
 // WS messages
 const zStatusWsMessageStatus = z.object({
@@ -37,11 +44,7 @@ const zExecutingWsMessage = z.object({
 })
 
 const zExecutedWsMessage = zExecutingWsMessage.extend({
-  outputs: z
-    .object({
-      images: z.array(zImageResult)
-    })
-    .passthrough()
+  outputs: zOutputs
 })
 
 const zExecutionWsMessageBase = z.object({
@@ -144,9 +147,6 @@ const zStatus = z.object({
   messages: z.array(zStatusMessage)
 })
 
-// TODO: this is a placeholder
-const zOutput = z.any()
-
 const zTaskPrompt = z.tuple([
   zQueueIndex,
   zPromptId,
@@ -170,7 +170,7 @@ const zPendingTaskItem = z.object({
   prompt: zTaskPrompt
 })
 
-const zTaskOutput = z.record(zNodeId, zOutput)
+const zTaskOutput = z.record(zNodeId, zOutputs)
 
 const zHistoryTaskItem = z.object({
   taskType: z.literal('History'),

src/types/comfyWorkflow.ts

@@ -5,6 +5,7 @@ import { fromZodError } from 'zod-validation-error'
 // innerNode.id = `${this.node.id}:${i}`
 // Remove it after GroupNode is redesigned.
 export const zNodeId = z.union([z.number().int(), z.string()])
+export type NodeId = z.infer<typeof zNodeId>
 export const zSlotIndex = z.union([
   z.number().int(),
   z