Delete queue/history item

src/lib/components/ComfyApp.ts

@@ -509,7 +509,35 @@ export default class ComfyApp {
         this.api.init();
     }
 
+    async interrupt() {
+        if (get(queueState).isInterrupting)
+            return
+
+        queueState.update(s => { s.isInterrupting = true; return s; })
+        await this.api.interrupt()
+            .finally(() => {
+                queueState.update(s => { s.isInterrupting = true; return s })
+            });
+    }
+
+    async deleteQueueItem(type: QueueItemType, promptID: PromptID) {
+        if (get(queueState).isInterrupting)
+            return
+
+        queueState.update(s => { s.isInterrupting = true; return s; })
+        await this.api.deleteItem(type, promptID)
+            .then(() => {
+                queueState.queueItemDeleted(type, promptID);
+            })
+            .finally(() => {
+                queueState.update(s => { s.isInterrupting = false; return s; })
+            });
+    }
+
     async clearQueue(type: QueueItemType) {
+        if (get(queueState).isInterrupting)
+            return
+
         queueState.update(s => { s.isInterrupting = true; return s; })
         await this.api.clearItems(type)
             .then(() => {

src/lib/components/ComfyQueue.svelte

@@ -85,6 +85,27 @@
      changed = false;
  }
 
+ async function deleteEntry(entry: QueueUIEntry, event: MouseEvent) {
+     event.preventDefault();
+     event.stopImmediatePropagation()
+
+     // TODO support interrupting from multiple running items!
+     if (entry.status === "running") {
+         await app.interrupt();
+     }
+     else {
+         await app.deleteQueueItem(mode, entry.entry.promptID);
+     }
+
+     if (mode === "queue") {
+         _queuedEntries = []
+         _runningEntries = []
+     }
+
+     _entries = [];
+     changed = true;
+ }
+
  async function clearQueue() {
      await app.clearQueue(mode);
 
@@ -188,17 +209,7 @@
  }
 
  async function interrupt() {
-     if ($queueState.isInterrupting)
-         return
-
-     const app = (window as any).app as ComfyApp;
-     if (!app || !app.api)
-         return;
-
-     await app.api.interrupt()
-              .then(() => {
-                  queueState.update(s => { s.isInterrupting = true; return s })
-              });
+     await app.interrupt();
  }
 
  let showModal = false;
@@ -260,7 +271,7 @@
             {#if mode === "history" && displayMode === "grid"}
                 <ComfyQueueGridDisplay entries={_entries} {showPrompt} {clearQueue} {mode} bind:gridColumns />
             {:else}
-                <ComfyQueueListDisplay entries={_entries} {showPrompt} {clearQueue} {mode} bind:imageSize />
+                <ComfyQueueListDisplay entries={_entries} {showPrompt} {clearQueue} {mode} {deleteEntry} bind:imageSize />
             {/if}
         {:else}
             <div class="queue-empty">

src/lib/components/ComfyQueueListDisplay.svelte

@@ -7,6 +7,7 @@
  export let entries: QueueUIEntry[] = [];
  export let showPrompt: (entry: QueueUIEntry) => void;
  export let clearQueue: () => void;
+ export let deleteEntry: (entry: QueueUIEntry, event: MouseEvent) => void;
  export let mode: QueueItemType = "queue";
  export let imageSize: number = 40;
 </script>
@@ -29,6 +30,11 @@
     <div class="list-entries {mode}-mode" style:--imageSize={imageSize}>
         {#each entries as entry}
             <div class="list-entry {entry.status}" on:click={(e) => showPrompt(entry, e)}>
+            <button class="list-entry-delete-button secondary"
+                    on:click={(e) => deleteEntry(entry, e)}
+                    disabled={$queueState.isInterrupting}>
+                <span>✕</span>
+            </button>
                 {#if entry.images.length > 0}
                     <div class="list-entry-images"
                          style="--cols: {Math.ceil(Math.sqrt(Math.min(entry.images.length, 4)))}" >
@@ -128,8 +134,9 @@
      border-top: 1px solid var(--table-border-color);
      background: var(--panel-background-fill);
      max-height: 14rem;
+     position: relative;
 
-     &:hover:not(:has(img:hover)) {
+     &:hover:not(:has(img:hover)):not(:has(button:hover)) {
          cursor: pointer;
          background: var(--block-background-fill);
 
@@ -157,6 +164,34 @@
      }
  }
 
+ .list-entry-delete-button {
+     @include square-button;
+
+     display: flex;
+     position: absolute;
+     width: 1.4rem;
+     height: 1.4rem;
+     text-align: center;
+     align-items: center;
+     font-size: 10pt;
+     justify-content: center;
+     text-align: center;
+     top:0;
+     right:0.5rem;
+     margin: 0.5rem;
+     z-index: 1000000000;
+
+     opacity: 70%;
+     background: var(--neutral-700);
+     color: var(--neutral-300);
+
+     &:hover {
+         opacity: 100%;
+         color: var(--neutral-100);
+     }
+
+ }
+
  .list-entry-rest {
      width: 100%;
      position: relative;