add collection button to comfy-menu

web/index.js

@@ -1,5 +1,6 @@
 import { app } from "../../scripts/app.js";
 import { $el, ComfyDialog } from "../../scripts/ui.js";
+import { api } from "../../scripts/api.js";
 
 const browserUrl = "./browser/web/index.html";
 
@@ -77,19 +78,78 @@ app.registerExtension({
     const browserDialog = new BrowserDialog();
 
     app.ui.menuContainer.appendChild(
-      $el("button", {
-        id: "comfyui-browser-button",
-        textContent: "Browser",
-        onclick: () => {
-          browserDialog.show($el("iframe", {
-            src: browserUrl + "?timestamp=" + Date.now(),
-            style: {
-              width: "100%",
-              height: "inherit",
-            },
-          }));
-        },
-      })
+      $el("div.comfy-list", {
+        style: {
+          width: "100%",
+          "border-style": "none",
+          "margin-bottom": "none",
+        }
+      }, [
+        $el("button", {
+          id: "comfyui-browser-button",
+          textContent: "Browser",
+          title: "Browse and manage your outputs and collections",
+          style: {
+            "font-size": "20px",
+            color: "red !important",
+            //color: "var(--descrip-text) !important",
+            width: "80%",
+          },
+          onclick: () => {
+            browserDialog.show($el("iframe", {
+              src: browserUrl + "?timestamp=" + Date.now(),
+              style: {
+                width: "100%",
+                height: "inherit",
+              },
+            }));
+          },
+        }),
+        $el("button", {
+          id: "comfyui-browser-collect-button",
+          textContent: "💾",
+          title: "Save workflow to collections",
+          style: {
+            width: "20%",
+            "font-size": "17px",
+          },
+          onclick: (e) => {
+            const saveBtn = e.target;
+            const originBtnStyle = saveBtn.style.cssText;
+
+            let filename = "workflow.json";
+            const promptFilename = app.ui.settings.getSettingValue(
+              "Comfy.PromptFilename",
+              true,
+            );
+            if (promptFilename) {
+              filename = prompt("Collect workflow as:", filename);
+              if (!filename) return;
+              if (!filename.toLowerCase().endsWith(".json")) {
+                filename += ".json";
+              }
+            }
+            app.graphToPrompt().then(async p => {
+              const json = JSON.stringify(p.workflow, null, 2); // convert the data to a JSON string
+              const res = await api.fetchApi("/browser/collections/workflows", {
+                method: "POST",
+                body: JSON.stringify({
+                  filename: filename,
+                  content: json,
+                }),
+              });
+              if (res.ok) {
+                saveBtn.style = originBtnStyle + "border-color: green;";
+              } else {
+                saveBtn.style = originBtnStyle + "border-color: red;";
+              }
+              setTimeout(() => {
+                saveBtn.style = originBtnStyle;
+              }, 1000);
+            });
+          },
+        }),
+      ])
     );
 
     window.comfyApp = app;