Workflow title

src/lib/components/ComfyApp.ts

@@ -80,6 +80,8 @@ export type SerializedAppState = {
     commitHash?: string,
     /** Graph state */
     workflow: SerializedLGraph,
+    /** Workflow name */
+    workflowName: string,
     /** UI state */
     layout: SerializedLayoutState,
     /** Position/offset of the canvas at the time of saving */
@@ -197,7 +199,7 @@ export default class ComfyApp {
 
         // We failed to restore a workflow so load the default
         if (!restored) {
-            await this.initDefaultGraph();
+            await this.initDefaultWorkflow();
         }
 
         workflowState.createNewWorkflow(this.lCanvas);
@@ -522,7 +524,12 @@ export default class ComfyApp {
         selectionState.clear();
     }
 
-    async initDefaultGraph() {
+    closeWorkflow(index: number) {
+        workflowState.closeWorkflow(this.lCanvas, index);
+        selectionState.clear();
+    }
+
+    async initDefaultWorkflow() {
         let state = null;
         try {
             const graphResponse = await fetch("/workflows/defaultWorkflow.json");

src/lib/components/ComfyWorkflowsView.svelte

@@ -144,17 +144,16 @@
  }
 
  async function doLoadDefault() {
-     var confirmed = confirm("Are you sure you want to clear the current workflow and load the default graph?");
+     var confirmed = confirm("Would you like to load the default workflow in a new tab?");
      if (confirmed) {
-         await app.initDefaultGraph();
+         await app.initDefaultWorkflow();
      }
  }
 
- function doClear(): void {
-     var confirmed = confirm("Are you sure you want to clear the current workflow?");
-     if (confirmed) {
-         app.clear();
-     }
+ function closeWorkflow(event: Event, index: number) {
+     event.preventDefault();
+     event.stopImmediatePropagation()
+     app.closeWorkflow(index);
  }
 </script>
 
@@ -190,7 +189,11 @@
             <button class="workflow-tab"
                     class:selected={index === $workflowState.activeWorkflowIdx}
                     on:click={() => app.setActiveWorkflow(index)}>
-                {workflow.title}
+                <span class="workflow-tab-title">{workflow.title}</span>
+                <button class="workflow-close-button"
+                        on:click={(e) => closeWorkflow(e, index)}>
+                    X
+                </button>
             </button>
         {/each}
     </div>
@@ -220,9 +223,6 @@
                 <Button variant="secondary" disabled={!$alreadySetup} on:click={doLoad}>
                     Load
                 </Button>
-                <Button variant="secondary" disabled={!$alreadySetup} on:click={doClear}>
-                    Clear
-                </Button>
                 <Button variant="secondary" disabled={!$alreadySetup} on:click={doLoadDefault}>
                     Load Default
                 </Button>
@@ -371,14 +371,15 @@
          border-left: 1px solid var(--neutral-600);
 
          display: flex;
-         flex-direction: column;
+         flex-direction: row;
          justify-content: center;
+         gap: var(--size-2);
 
          &:last-child {
              border-right: 1px solid var(--neutral-600);
          }
 
-         &:hover {
+         &:hover:not(:has(.workflow-close-button:hover)) {
              background: var(--neutral-700);
              color: var(--neutral-300);
          }
@@ -388,6 +389,20 @@
              color: var(--neutral-300);
              border-top-color: var(--primary-500);
          }
+
+         > .workflow-close-button {
+             display:block;
+             width: 1.5rem;
+             height: 1.5rem;
+             border-radius: 50%;
+             background: var(--neutral-500);
+             color: var(--neutral-300);
+
+             &:hover {
+                 background: var(--neutral-400);
+                 color: var(--neutral-100);
+             }
+         }
      }
  }