New Menu & Workflow Management (#3112)

* menu

* wip

* wip

* wip

* wip

* wip

* workflow saving/loading

* Support inserting workflows
Move buttosn to top of lists

* fix session storage
implement renaming

* temp

* refactor, better workflow instance management

* wip

* progress on progress

* added send to workflow
various fixes

* Support multiple image loaders

* Support dynamic size breakpoints based on content

* various fixes
add close unsaved warning

* Add filtering tree

* prevent renaming unsaved

* fix zindex on hover

* fix top offset

* use filename as workflow name

* resize on setting change

* hide element until it is drawn

* remove glow

* Fix export name

* Fix test, revert accidental changes to groupNode

* Fix colors on all themes

* show hover items on smaller screen (mobile)

* remove debugging code

* dialog fix

* Dont reorder open workflows
Allow elements around canvas

* Toggle body display on setting change

* Fix menu disappearing on chrome

* Increase delay when typing, remove margin on Safari, fix dialog location

* Fix overflow issue on iOS

* Add reset view button
Prevent view changes causing history entries

* Bottom menu wip

* Various fixes

* Fix merge

* Fix breaking old menu position

* Fix merge adding restore view to loadGraphData

web/scripts/ui/components/buttonGroup.js

@@ -0,0 +1,45 @@
+// @ts-check
+
+import { $el } from "../../ui.js";
+import { ComfyButton } from "./button.js";
+import { prop } from "../../utils.js";
+
+export class ComfyButtonGroup {
+	element = $el("div.comfyui-button-group");
+
+	/** @param {Array<ComfyButton | HTMLElement>} buttons */
+	constructor(...buttons) {
+		this.buttons = prop(this, "buttons", buttons, () => this.update());
+	}
+
+	/**
+	 * @param {ComfyButton} button
+	 * @param {number} index
+	 */
+	insert(button, index) {
+		this.buttons.splice(index, 0, button);
+		this.update();
+	}
+
+	/** @param {ComfyButton} button */
+	append(button) {
+		this.buttons.push(button);
+		this.update();
+	}
+
+	/** @param {ComfyButton|number} indexOrButton */
+	remove(indexOrButton) {
+		if (typeof indexOrButton !== "number") {
+			indexOrButton = this.buttons.indexOf(indexOrButton);
+		}
+		if (indexOrButton > -1) {
+			const r = this.buttons.splice(indexOrButton, 1);
+			this.update();
+			return r;
+		}
+	}
+
+	update() {
+		this.element.replaceChildren(...this.buttons.map((b) => b["element"] ?? b));
+	}
+}