From c4e4f5a29b06b3ca0738a1e167d3601d29c807b1 Mon Sep 17 00:00:00 2001
From: buzz-lightsnack-2007
 <73412182+buzz-lightsnack-2007@users.noreply.github.com>
Date: Fri, 29 Mar 2024 20:27:18 +0800
Subject: [PATCH] add automatic enabling and disabling of UI elements based on
 existence of elements

---
 gui/pages/settings.htm   |  6 ++++--
 gui/scripts/windowman.JS | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/gui/pages/settings.htm b/gui/pages/settings.htm
index ab83a84..23bd4f8 100644
--- a/gui/pages/settings.htm
+++ b/gui/pages/settings.htm
@@ -44,7 +44,8 @@
                     <legend data-text="filters"></legend>
                     <label data-text="settings_filters_description"></label>
                     <div class="field-row action-buttons">
-                        <button data-action="filters,update" data-text="settings_filters_update"></button>
+                        <button data-action="filters,update" data-text="settings_filters_update"
+                            data-enable="filters"></button>
                         <button href="settings/filters" tab-height="607.5" tab-width="1080"
                             data-text="settings_filters_open"></button>
                     </div>
@@ -66,7 +67,8 @@
                     <legend data-text="storage"></legend>
                     <label data-text="settings_storage_description"></label>
                     <div class="field-row action-buttons">
-                        <button data-text="settings_storage_clear" data-action="storage,clear"></button>
+                        <button data-text="settings_storage_clear" data-enable="sites"
+                            data-action="storage,clear"></button>
                     </div>
                 </fieldset>
             </section>
diff --git a/gui/scripts/windowman.JS b/gui/scripts/windowman.JS
index cfb6c67..d88f4a6 100644
--- a/gui/scripts/windowman.JS
+++ b/gui/scripts/windowman.JS
@@ -307,9 +307,45 @@ class windowman {
       links();
     }
 
+    /*
+    Update the interface based on the storage data changes.
+    */
+    async function updates() {
+      // Import the module.
+      const secretariat = await import(
+        chrome.runtime.getURL("scripts/secretariat.js")
+      );
+
+      // Get the storage data.
+      let storage_data = await secretariat.read();
+
+      async function update_interface() {
+        let input_elements = document.querySelectorAll("[data-enable]");
+
+        if (input_elements) {
+          input_elements.forEach((input_element) => {
+            (async () => {
+              input_element.disabled =
+                (await secretariat.read(
+                  input_element.getAttribute("data-enable"),
+                )) == null;
+            })();
+          });
+        }
+      }
+
+      // Update the input elements.
+      secretariat.observe((what) => {
+        update_interface();
+      });
+
+      update_interface();
+    }
+
     storage();
     functionality();
     actions();
+    updates();
   }
 }