add automatic enabling and disabling of UI elements based on existence of elements

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>

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();
   }
 }