v1.2.0 Side Bar & Menu rework (#189)

* Basic side tool bar skeleton + Theme toggle (#164)

* Side bar skeleton

* Fix grid layout

* nit

* Add theme toggle logic

* Change primevue color theme to blue to match beta menu UI

* Add litegraph canvas splitter overlay (#177)

* Add vue wrapper

* Splitter overlay

* Move teleport to side bar comp

* Toolbar placeholder

* Move settings button from top menu to side bar (#178)

* Reverse relationship between splitter overlay and sidebar component (#180)

* Reverse relationship between splitter overlay and sidebar component

* nit

* Remove border on splitter

* Fix canvas shift (#186)

* Move queue/history display to side bar (#185)

* Side bar placeholder

* Pinia store for queue items

* Flatten task item

* Fix schema

* computed

* Switch running / pending order

* Use class-transformer

* nit

* Show display status

* Add tag severity style

* Add execution time

* nit

* Rename to execution success

* Add time display

* Sort queue desc order

* nit

* Add remove item feature

* Load workflow

* Add confirmation popup

* Add empty table placeholder

* Remove beta menu UI's queue button/list

* Add tests on litegraph widget text truncate (#191)

* Add tests on litegraph widget text truncate

* Updated screenshots

* Revert port change

* Remove screenshots

* Update test expectations [skip ci]

* Add back menu.settingsGroup for compatibility (#192)

* Close side bar on menu location set as disabled (#194)

* Remove placeholder side bar tabs (#196)

---------

Co-authored-by: bymyself <abolkonsky.rem@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>

src/scripts/api.ts

@@ -184,6 +184,11 @@ class ComfyApi extends EventTarget {
                 new CustomEvent("execution_start", { detail: msg.data })
               );
               break;
+            case "execution_success":
+              this.dispatchEvent(
+                new CustomEvent("execution_success", { detail: msg.data })
+              );
+              break;
             case "execution_error":
               this.dispatchEvent(
                 new CustomEvent("execution_error", { detail: msg.data })
@@ -315,10 +320,14 @@ class ComfyApi extends EventTarget {
       return {
         // Running action uses a different endpoint for cancelling
         Running: data.queue_running.map((prompt) => ({
+          taskType: "Running",
           prompt,
           remove: { name: "Cancel", cb: () => api.interrupt() },
         })),
-        Pending: data.queue_pending.map((prompt) => ({ prompt })),
+        Pending: data.queue_pending.map((prompt) => ({
+          taskType: "Pending",
+          prompt,
+        })),
       };
     } catch (error) {
       console.error(error);
@@ -335,7 +344,11 @@ class ComfyApi extends EventTarget {
   ): Promise<{ History: HistoryTaskItem[] }> {
     try {
       const res = await this.fetchApi(`/history?max_items=${max_items}`);
-      return { History: Object.values(await res.json()) };
+      return {
+        History: Object.values(await res.json()).map(
+          (item: HistoryTaskItem) => ({ ...item, taskType: "History" })
+        ),
+      };
     } catch (error) {
       console.error(error);
       return { History: [] };