Fixed sidebar buttons/select to update automatically on setting change.

web/model-manager.js

@@ -3500,10 +3500,20 @@ class SettingsView {
     
     /**
      * @param {() => Promise<void>} updateModels
+     * @param {() => void} updateSidebarButtons
      */
-    constructor(updateModels) {
+    constructor(updateModels, updateSidebarButtons) {
         this.#updateModels = updateModels;
         const settings = this.elements.settings;
+        
+        const sidebarControl = $checkbox({
+            $: (el) => (settings["sidebar-control-always-compact"] = el),
+            textContent: "Sidebar controls always compact",
+        });
+        sidebarControl.getElementsByTagName('input')[0].addEventListener("change", () => {
+            updateSidebarButtons();
+        });
+        
         $el("div.model-manager-settings", {
             $: (el) => (this.element = el),
         }, [
@@ -3602,10 +3612,7 @@ class SettingsView {
                 textContent: "Save model descriptions in .txt files by default.",
             }),
             $el("h2", ["Window"]),
-            $checkbox({
+            sidebarControl,
-                $: (el) => (settings["sidebar-control-always-compact"] = el),
-                textContent: "Sidebar controls always compact (requires window resize or page refresh to recalculate)",
-            }),
             /*
             $el("div", [
                 $el("p", ["Default sidebar width"]),
@@ -3857,6 +3864,12 @@ class ModelManager extends ComfyDialog {
     /** @type {HTMLDivElement} */
     #tabInfoContents = null;
     
+    /** @type {HTMLButtonElement} */
+    #sidebarButtonGroup = null;
+    
+    /** @type {HTMLButtonElement} */
+    #sidebarSelect = null;
+    
     /** @type {HTMLButtonElement} */
     #closeModelInfoButton = null;
     
@@ -3867,6 +3880,7 @@ class ModelManager extends ComfyDialog {
         
         this.#settingsView = new SettingsView(
             this.#refreshModels,
+            () => this.#updateSidebarButtons(),
         );
         
         this.#modelInfo = new ModelInfo(
@@ -3914,6 +3928,8 @@ class ModelManager extends ComfyDialog {
                 () => { this.element.dataset["sidebarState"] = "left"; },
             ],
         );
+        this.#sidebarButtonGroup = sidebarButtonGroup;
+        this.#sidebarSelect = sidebarSelect;
         sidebarButtonGroup.classList.add("sidebar-buttons");
         const sidebarButtonGroupChildren = sidebarButtonGroup.children;
         for (let i = 0; i < sidebarButtonGroupChildren.length; i++) {
@@ -3980,19 +3996,7 @@ class ModelManager extends ComfyDialog {
         
         new ResizeObserver(GenerateDynamicTabTextCallback(modelManager, tabManagerButtons, 768)).observe(modelManager);
         new ResizeObserver(GenerateDynamicTabTextCallback(modelManager, tabInfoButtons, 768)).observe(modelManager);
-        new ResizeObserver(() => {
+        new ResizeObserver(() => this.#updateSidebarButtons()).observe(modelManager);
-            const managerRect = document.body.getBoundingClientRect();
-            const isNarrow = managerRect.width < 768; // TODO: `minWidth` is a magic value
-            const alwaysShowCompactSidebarControls = this.#settingsView.elements.settings["sidebar-control-always-compact"].checked;
-            if (isNarrow || alwaysShowCompactSidebarControls) {
-                sidebarButtonGroup.style.display = "none";
-                sidebarSelect.style.display = "";
-            }
-            else {
-                sidebarButtonGroup.style.display = "";
-                sidebarSelect.style.display = "none";
-            }
-        }).observe(modelManager);
         
         this.#init();
     }
@@ -4062,6 +4066,20 @@ class ModelManager extends ComfyDialog {
         }
         return true;
     }
+    
+    #updateSidebarButtons = () => {
+        const managerRect = document.body.getBoundingClientRect();
+        const isNarrow = managerRect.width < 768; // TODO: `minWidth` is a magic value
+        const alwaysShowCompactSidebarControls = this.#settingsView.elements.settings["sidebar-control-always-compact"].checked;
+        if (isNarrow || alwaysShowCompactSidebarControls) {
+            this.#sidebarButtonGroup.style.display = "none";
+            this.#sidebarSelect.style.display = "";
+        }
+        else {
+            this.#sidebarButtonGroup.style.display = "";
+            this.#sidebarSelect.style.display = "none";
+        }
+    }
 }
 
 /** @type {ModelManager | undefined} */