Task output folder view (#579)

* Change to button

* Folder view

src/stores/queueStore.ts

@@ -219,6 +219,33 @@ export class TaskItemImpl {
       app.nodeOutputs = toRaw(this.outputs)
     }
   }
+
+  public flatten(): TaskItemImpl[] {
+    if (this.displayStatus !== TaskItemDisplayStatus.Completed) {
+      return [this]
+    }
+
+    return this.flatOutputs.map(
+      (output: ResultItemImpl, i: number) =>
+        new TaskItemImpl(
+          this.taskType,
+          [
+            this.queueIndex,
+            `${this.promptId}-${i}`,
+            this.promptInputs,
+            this.extraData,
+            this.outputsToExecute
+          ],
+          this.status,
+          {
+            [output.nodeId]: {
+              [output.mediaType]: [output]
+            }
+          },
+          [output]
+        )
+    )
+  }
 }
 
 interface State {
@@ -244,32 +271,7 @@ export const useQueueStore = defineStore('queue', {
       ]
     },
     flatTasks(): TaskItemImpl[] {
-      return this.tasks.flatMap((task: TaskItemImpl) => {
-        if (task.displayStatus !== TaskItemDisplayStatus.Completed) {
-          return [task]
-        }
-
-        return task.flatOutputs.map(
-          (output: ResultItemImpl, i: number) =>
-            new TaskItemImpl(
-              task.taskType,
-              [
-                task.queueIndex,
-                `${task.promptId}-${i}`,
-                task.promptInputs,
-                task.extraData,
-                task.outputsToExecute
-              ],
-              task.status,
-              {
-                [output.nodeId]: {
-                  [output.mediaType]: [output]
-                }
-              },
-              [output]
-            )
-        )
-      })
+      return this.tasks.flatMap((task: TaskItemImpl) => task.flatten())
     },
     lastHistoryQueueIndex(state) {
       return state.historyTasks.length ? state.historyTasks[0].queueIndex : -1