Gallery fix

src/lib/components/ComfyApp.svelte

@@ -284,7 +284,6 @@
     <LightboxModal />
     <input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />
 </div>
-
 <SvelteToast options={toastOptions} />
 
 <style lang="scss">

src/lib/components/ComfyApp.ts

@@ -373,7 +373,7 @@ export default class ComfyApp {
 
             // Queue prompt using ctrl or command + enter
             if ((e.ctrlKey || e.metaKey) && (e.key === "Enter" || e.keyCode === 13 || e.keyCode === 10)) {
-                this.queuePrompt(e.shiftKey ? -1 : 0);
+                this.runDefaultQueueAction();
             }
         });
         window.addEventListener("keyup", (e) => {
@@ -525,7 +525,6 @@ export default class ComfyApp {
 
         if (get(layoutState).attrs.queuePromptButtonRunWorkflow) {
             this.queuePrompt(0, 1);
-            notify("Prompt queued.");
         }
     }
 
@@ -757,7 +756,13 @@ export default class ComfyApp {
 
                     try {
                         const response = await this.api.queuePrompt(request);
+
+                        // BUG: This can cause race conditions updating frontend state
+                        // since we don't have a prompt ID until the backend
+                        // returns!
                         promptID = response.promptID;
+                        queueState.afterQueued(promptID, num, p.output, extraData)
+
                         error = response.error;
                     } catch (error) {
                         error = error.toString();
@@ -779,7 +784,6 @@ export default class ComfyApp {
                     }
 
                     this.lCanvas.draw(true, true);
-                    queueState.afterQueued(promptID, num, p.output, extraData)
                 }
             }
         } finally {

src/lib/components/ComfyQueue.svelte

@@ -6,10 +6,10 @@
  import { convertComfyOutputToComfyURL, convertFilenameToComfyURL, getNodeInfo } from "$lib/utils"
  import type { Writable } from "svelte/store";
  import type { QueueItemType } from "$lib/api";
-	import { ImageViewer } from "$lib/ImageViewer";
-	import { Button } from "@gradio/button";
-	import type ComfyApp from "./ComfyApp";
-	import { tick } from "svelte";
+ import { ImageViewer } from "$lib/ImageViewer";
+ import { Button } from "@gradio/button";
+ import type ComfyApp from "./ComfyApp";
+ import { tick } from "svelte";
 
  let queuePending: Writable<QueueEntry[]> | null = null;
  let queueRunning: Writable<QueueEntry[]> | null = null;
@@ -22,7 +22,7 @@
      date?: string,
      status: QueueEntryStatus | "pending" | "running",
      images?: string[], // URLs
-     error?: string
+     details?: string // shown in a tooltip on hover
  }
 
  $: if ($queueState) {
@@ -80,17 +80,18 @@
          submessage,
          date,
          status: "pending",
-         images
+         images,
      }
  }
 
  function convertCompletedEntry(entry: CompletedQueueEntry): QueueUIEntry {
      const result = convertEntry(entry.entry);
      result.status = entry.status;
-     result.error = entry.error;
 
-     if (result.status === "all_cached")
-         result.submessage = "(Execution was cached)"
+     if (entry.message)
+         result.submessage = entry.message
+     if (entry.error)
+         result.details = entry.error
 
      return result;
  }
@@ -105,10 +106,10 @@
  }
 
  async function updateFromHistory() {
-     _entries = $queueCompleted.map(convertCompletedEntry);
+     _entries = $queueCompleted.map(convertCompletedEntry).reverse();
      if (queueList) {
          await tick(); // Wait for list size to be recalculated
-         queueList.scroll({ top: queueList.scrollHeight })
+         queueList.scrollTo(0, 0);
      }
      console.warn("[ComfyQueue] BUILDHISTORY", _entries, $queueCompleted)
  }
@@ -137,7 +138,7 @@
 </script>
 
 <div class="queue">
-    <div class="queue-entries" bind:this={queueList}>
+    <div class="queue-entries {mode}-mode" bind:this={queueList}>
         {#if _entries.length > 0}
             {#each _entries as entry}
                 <div class="queue-entry {entry.status}">
@@ -156,13 +157,13 @@
                             {entry.submessage}
                         </div>
                     </div>
-                    <div class="queue-entry-rest">
-                        {#if entry.date != null}
-                            <span class="queue-entry-queued-at">
-                                {entry.date}
-                            </span>
-                        {/if}
-                    </div>
+                </div>
+                <div class="queue-entry-rest">
+                    {#if entry.date != null}
+                        <span class="queue-entry-queued-at">
+                            {entry.date}
+                        </span>
+                    {/if}
                 </div>
             {/each}
         {:else}
@@ -230,9 +231,17 @@
  }
 
  .queue-entries {
-     overflow-y: scroll;
      height: $queue-height;
      max-height: $queue-height;
+     display: flex;
+     overflow-y: auto;
+     flex-flow: column nowrap;
+
+     &.queue-mode > :first-child {
+         // elements stick to bottom in queue mode only
+         // next element in queue is on the bottom
+         margin-top: auto !important;
+     }
 
      > .queue-empty {
          display: flex;
@@ -328,11 +337,11 @@
 
  .queue-entry-queued-at {
      width: auto;
-     font-size: 10px;
+     font-size: 12px;
      position:absolute;
      right: 0px;
      bottom: 0px;
-     padding: 0.0rem 0.4rem;
+     padding: 0.4rem 0.6rem;
      color: var(--body-text-color);
  }