settings: hidden items in search explained

if a matched setting is hidden, an aside card will show explaining why,
    eitherbecause advanced settings is not enabled or because it depends
    on another setting.

html/admin.html

@@ -731,7 +731,7 @@
                         <div class="card @low dark:~d_neutral col" id="settings-sidebar">
                             <div class="flex-expand">
                                 <input type="search" class="field ~neutral @low input settings-section-button justify-between mb-2" id="settings-search" placeholder="{{ .strings.search }}">
-                                <span class="button ~neutral @low center -ml-8 mb-2" id=settings-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
+                                <button class="button ~neutral @low center -ml-8 mb-2" id="settings-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></button>
                             </div>
                             <aside class="aside sm ~urge dark:~d_info mb-2 @low" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info dark:~d_warning">R</span> indicates changes require a restart.</aside> 
                             <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span>

lang/admin/en-us.json

@@ -83,6 +83,9 @@
         "settingsRefreshPage": "Refresh the page in a few seconds.",
         "settingsRequiredOrRestartMessage": "Note: {n} indicates a required field, {n} indicates changes require a restart.",
         "settingsSave": "Save",
+        "settingsHiddenDependency": "Matching settings are hidden because they depend on the value of another setting:",
+        "settingsDependsOn": "{setting}: Depends on {dependency}",
+        "settingsAdvancedMode": "{setting}: Advanced Settings must be enabled",
         "ombiProfile": "Ombi user profile",
         "ombiUserDefaultsDescription": "Create an Ombi user and configure it, then select it below. It's settings/permissions will be stored and applied to new Ombi users created by jfa-go when this profile is selected.",
         "userProfiles": "User Profiles",

ts/modules/settings.ts

@@ -550,7 +550,7 @@ class sectionPanel {
         this._section.setAttribute("data-section", sectionName);
         this._section.innerHTML = `
         <span class="heading">${s.meta.name}</span>
-        <p class="support lg my-2">${s.meta.description}</p>
+        <p class="support lg my-2 settings-section-description">${s.meta.description}</p>
         `;
 
         this.update(s);
@@ -629,8 +629,8 @@ export class settingsList {
     private _settings: Settings;
     private _advanced: boolean = false;
 
-    private _searchbox: HTMLElement = document.getElementById("settings-search");
+    private _searchbox: HTMLInputElement = document.getElementById("settings-search") as HTMLInputElement;
-    private _clearSearchbox: HTMLElement = document.getElementById("settings-search-clear");
+    private _clearSearchbox: HTMLButtonElement = document.getElementById("settings-search-clear") as HTMLButtonElement;
 
 
     addSection = (name: string, s: Section, subButton?: HTMLElement) => {
@@ -670,7 +670,7 @@ export class settingsList {
                 } else {
                     button.classList.remove("unfocused");
                 }
-                // FIXME: Re-call search
+                this._searchbox.oninput(null);
             });
         }
         this._buttons[name] = button;
@@ -756,11 +756,17 @@ export class settingsList {
                 parent.classList.add("~neutral");
                 parent.classList.remove("~urge");
             }
+            this._searchbox.oninput(null);
         };
         advancedEnableToggle.checked = false;
 
-        // FIXME: Remove this!
+        this._searchbox.oninput = () => {
-        (window as any).sSearch = this.search;
+            this.search(this._searchbox.value);
+        };
+        this._clearSearchbox.onclick = () => {
+            this._searchbox.value = "";
+            this._searchbox.oninput(null);
+        };
     }
 
     private _addMatrix = () => {
@@ -855,12 +861,17 @@ export class settingsList {
         }
     })
 
-    // FIXME: Create & bind to this._searchbox
-    // FXME: this._clearSearchbox clears search
     search = (query: string) => {
         query = query.toLowerCase();
+
         let firstVisibleSection = "";
         for (let section of this._settings.order) {
+
+            let dependencyCard = this._sections[section].asElement().querySelector(".settings-dependency-message");
+            if (dependencyCard) dependencyCard.remove();
+            dependencyCard = null;
+            let dependencyList = null;
+
             // hide button, unhide if matched
             this._buttons[section].classList.add("unfocused");
 
@@ -872,7 +883,14 @@ export class settingsList {
                     firstVisibleSection = firstVisibleSection || section;
                 }
             }
+            const sectionElement = this._sections[section].asElement();
             for (let setting of this._settings.sections[section].order) {
+                if (this._settings.sections[section].settings[setting].type == "note") continue;
+                const element = sectionElement.querySelector(`div[data-name="${setting}"]`) as HTMLElement;
+
+                // element.classList.remove("-mx-2", "my-2", "p-2", "aside", "~neutral", "@low");
+                element.classList.add("opacity-50", "pointer-events-none");
+                element.setAttribute("aria-disabled", "true");
                 if (setting.toLowerCase().includes(query) ||
                     this._settings.sections[section].settings[setting].name.toLowerCase().includes(query) ||
                     this._settings.sections[section].settings[setting].description.toLowerCase().includes(query) ||
@@ -881,8 +899,45 @@ export class settingsList {
                         this._buttons[section].classList.remove("unfocused");
                         firstVisibleSection = firstVisibleSection || section;
                     }
-                    if ((this._settings.sections[section].settings[setting].advanced && this._advanced) || !(this._settings.sections[section].settings[setting].advanced)) {
+                    const shouldShow = (query != "" &&
-                        // FIXME: Highlight setting somehow
+                                    ((this._settings.sections[section].settings[setting].advanced && this._advanced) ||
+                                    !(this._settings.sections[section].settings[setting].advanced)));
+                    if (shouldShow) {
+                        // element.classList.add("-mx-2", "my-2", "p-2", "aside", "~neutral", "@low");
+                        element.classList.remove("opacity-50", "pointer-events-none");
+                        element.setAttribute("aria-disabled", "false");
+                    }
+                    if ((shouldShow && element.querySelector("label").classList.contains("unfocused")) || (!shouldShow)) {
+                        // Add a note explaining why the setting is hidden
+                        if (!dependencyCard) {
+                            dependencyCard = document.createElement("aside");
+                            dependencyCard.classList.add("aside", "my-2", "~warning", "settings-dependency-message");
+                            dependencyCard.innerHTML = `
+                            <div class="content text-sm">
+                                <span class="font-bold">${window.lang.strings("settingsHiddenDependency")}</span>
+                        
+                                <ul class="settings-dependency-list"></ul>
+                            </div>
+                            `;
+                            dependencyList = dependencyCard.querySelector(".settings-dependency-list") as HTMLUListElement;
+                            // Insert it right after the description
+                            this._sections[section].asElement().insertBefore(dependencyCard, this._sections[section].asElement().querySelector(".settings-section-description").nextElementSibling);
+                        }
+                        const li = document.createElement("li");
+                        if (shouldShow) {
+                            const depCode = this._settings.sections[section].settings[setting].depends_true || this._settings.sections[section].settings[setting].depends_false;
+                            const dep = splitDependant(section, depCode);
+
+                            let depName = this._settings.sections[dep[0]].settings[dep[1]].name;
+                            if (dep[0] != section) {
+                                depName = this._settings.sections[dep[0]].meta.name + " > " + depName;
+                            }
+
+                            li.textContent = window.lang.strings("settingsDependsOn").replace("{setting}", `"`+this._settings.sections[section].settings[setting].name+`"`).replace("{dependency}", `"`+depName+`"`);
+                        } else {
+                            li.textContent = window.lang.strings("settingsAdvancedMode").replace("{setting}", `"`+this._settings.sections[section].settings[setting].name+`"`);
+                        }
+                        dependencyList.appendChild(li);
                     }
                 }
             }