From cd21dda261fbd021f8d45df51c27e02bb793e271 Mon Sep 17 00:00:00 2001
From: JaredTherriault <noirjt@live.com>
Date: Sun, 6 Oct 2024 11:53:28 -0700
Subject: [PATCH] Update settings for new UI

---
 web/js/common/ExtensionManager.js |  8 +--
 web/js/common/SettingsManager.js  | 85 +++++++++++++++++--------------
 2 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/web/js/common/ExtensionManager.js b/web/js/common/ExtensionManager.js
index d37342b..843e21b 100644
--- a/web/js/common/ExtensionManager.js
+++ b/web/js/common/ExtensionManager.js
@@ -120,13 +120,13 @@ app.registerExtension({
                     recommendedButton.textContent = "Refresh the page!";
                 }
             });
-            const labelWidget = $el("div", [
-                $el("label", { textContent: "Extension Management:" }),
+            const labelWidget = $el("label", { textContent: "Extension Management:" });
+
+            const settingWidget = $el("div", [
+                createExtensionManagerWidget(),
                 recommendedButton
             ]);
 
-            const settingWidget = createExtensionManagerWidget();
-
             const tooltip = "Deselect any unwanted web extensions to disable them. Select them again to re-enable them. Refresh your browser to see changes. Be extremely careful which extensions you disable.";
             addJNodesSetting(labelWidget, settingWidget, tooltip);
         }
diff --git a/web/js/common/SettingsManager.js b/web/js/common/SettingsManager.js
index 0dc9a0b..8197b6d 100644
--- a/web/js/common/SettingsManager.js
+++ b/web/js/common/SettingsManager.js
@@ -353,52 +353,61 @@ function createExpandableSettingsArea() {
     });
 }
 
-export function addJNodesSetting(nameWidget, settingWidget, tooltip) {
-    if (!underButtonContent) {
-        createExpandableSettingsArea();
-    }
+export function addJNodesSetting(nameWidget, settingWidget, tooltip, bUseExpandableArea = false) {
 
-    function sortTable() {
-        const rows = Array.from(underButtonContent.children);
-
-        // Sort the rows based on the text in the left cell
-        rows.sort((a, b) => {
-            const textA = a.children[0].textContent.trim().toLowerCase();
-            const textB = b.children[0].textContent.trim().toLowerCase();
-            return textA.localeCompare(textB);
+    if (!bUseExpandableArea){
+        app.ui.settings.addSetting({
+            id: `JNodes.SettingsContainer.${nameWidget.textContent.replace(" ","")}`,
+            name: nameWidget.textContent,
+            type: () => { return settingWidget} 
         });
+    } else {
+        if (!underButtonContent) {
+            createExpandableSettingsArea();
+        }
 
-        underButtonContent.innerHTML = "";
+        function sortTable() {
+            const rows = Array.from(underButtonContent.children);
 
-        // Update the table with the sorted rows
-        rows.forEach(row => underButtonContent.appendChild(row));
-    }
+            // Sort the rows based on the text in the left cell
+            rows.sort((a, b) => {
+                const textA = a.children[0].textContent.trim().toLowerCase();
+                const textB = b.children[0].textContent.trim().toLowerCase();
+                return textA.localeCompare(textB);
+            });
 
-    let title = tooltip ? tooltip.toString() : "";
-    nameWidget.title = nameWidget.title ? nameWidget.title : title;
-    settingWidget.title = settingWidget.title ? settingWidget.title : title;
+            underButtonContent.innerHTML = "";
 
-    underButtonContent.appendChild(
-        $el("tr", [
-            $el("td", {
-                style: {
-                    verticalAlign: "middle",
-                }
-            }, [
-                nameWidget ? nameWidget : $el("div")
-            ]),
-            $el("td", {
-                style: {
-                    verticalAlign: "middle",
-                    textAlign: "left",
-                }
-            }, [
-                settingWidget ? settingWidget : $el("div")
+            // Update the table with the sorted rows
+            rows.forEach(row => underButtonContent.appendChild(row));
+        }
+
+        let title = tooltip ? tooltip.toString() : "";
+        nameWidget.title = nameWidget.title ? nameWidget.title : title;
+        settingWidget.title = settingWidget.title ? settingWidget.title : title;
+
+        underButtonContent.appendChild(
+            $el("tr", [
+                $el("td", {
+                    style: {
+                        verticalAlign: "middle",
+                    }
+                }, [
+                    nameWidget ? nameWidget : $el("div")
+                ]),
+                $el("td", {
+                    style: {
+                        verticalAlign: "middle",
+                        textAlign: "left",
+                    }
+                }, [
+                    settingWidget ? settingWidget : $el("div")
+                ])
             ])
-        ])
-    );
+        );
 
-    sortTable();
+        sortTable();
+    }
 }
 
 export function createFlyoutHandle(handleText, handleClassSuffix = "", menuClassSuffix = "", parentRect = window) {