add search field to settings

javascript/settings.js

+let settingsExcludeTabsFromShowAll = {
+    settings_tab_defaults: 1,
+    settings_tab_sysinfo: 1,
+    settings_tab_actions: 1,
+    settings_tab_licenses: 1,
+};
+
+function settingsShowAllTabs() {
+    gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
+        if (settingsExcludeTabsFromShowAll[elem.id]) return;
+
+        elem.style.display = "block";
+    });
+}
+
+function settingsShowOneTab() {
+    gradioApp().querySelector('#settings_show_one_page').click();
+}
+
+onUiLoaded(function() {
+    var edit = gradioApp().querySelector('#settings_search');
+    var editTextarea = gradioApp().querySelector('#settings_search > label > input');
+    var buttonShowAllPages = gradioApp().getElementById('settings_show_all_pages');
+    var settings_tabs = gradioApp().querySelector('#settings div');
+
+    onEdit('settingsSearch', editTextarea, 250, function() {
+        var searchText = (editTextarea.value || "").trim();
+
+        gradioApp().querySelectorAll('#settings > div[id^=settings_] div[id^=column_settings_] > *').forEach(function(elem) {
+            var visible = elem.textContent.trim().indexOf(searchText) != -1;
+            elem.style.display = visible ? "" : "none";
+        });
+
+        if (searchText != "") {
+            settingsShowAllTabs();
+        } else {
+            settingsShowOneTab();
+        }
+    });
+
+    settings_tabs.insertBefore(edit, settings_tabs.firstChild);
+    settings_tabs.appendChild(buttonShowAllPages);
+
+
+    buttonShowAllPages.addEventListener("click", settingsShowAllTabs);
+});

javascript/token-counters.js

@@ -60,7 +60,7 @@ function setupTokenCounting(id, id_counter, id_button) {
     prompt.parentElement.insertBefore(counter, prompt);
     prompt.parentElement.style.position = "relative";
 
-    func = onEdit(id, textarea, 800, function() {
+    var func = onEdit(id, textarea, 800, function() {
         gradioApp().getElementById(id_button)?.click();
     });
     promptTokenCountUpdateFunctions[id] = func;

javascript/ui.js

@@ -263,21 +263,6 @@ onAfterUiUpdate(function() {
     json_elem.parentElement.style.display = "none";
 
     setupTokenCounters();
-
-    var show_all_pages = gradioApp().getElementById('settings_show_all_pages');
-    var settings_tabs = gradioApp().querySelector('#settings div');
-    if (show_all_pages && settings_tabs) {
-        settings_tabs.appendChild(show_all_pages);
-        show_all_pages.onclick = function() {
-            gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
-                if (elem.id == "settings_tab_licenses") {
-                    return;
-                }
-
-                elem.style.display = "block";
-            });
-        };
-    }
 });
 
 onOptionsChanged(function() {

modules/ui_settings.py

@@ -64,6 +64,9 @@ class UiSettings:
     quicksettings_list = None
     quicksettings_names = None
     text_settings = None
+    show_all_pages = None
+    show_one_page = None
+    search_input = None
 
     def run_settings(self, *args):
         changed = []
@@ -136,7 +139,7 @@ class UiSettings:
                         gr.Group()
                         current_tab = gr.TabItem(elem_id=f"settings_{elem_id}", label=text)
                         current_tab.__enter__()
-                        current_row = gr.Column(variant='compact')
+                        current_row = gr.Column(elem_id=f"column_settings_{elem_id}", variant='compact')
                         current_row.__enter__()
 
                         previous_section = item.section
@@ -183,7 +186,11 @@ class UiSettings:
                 with gr.TabItem("Licenses", id="licenses", elem_id="settings_tab_licenses"):
                     gr.HTML(shared.html("licenses.html"), elem_id="licenses")
 
-                gr.Button(value="Show all pages", elem_id="settings_show_all_pages")
+                self.show_all_pages = gr.Button(value="Show all pages", elem_id="settings_show_all_pages")
+                self.show_one_page = gr.Button(value="Show only one page", elem_id="settings_show_one_page", visible=False)
+                self.show_one_page.click(lambda: None)
+
+                self.search_input = gr.Textbox(value="", elem_id="settings_search", max_lines=1, placeholder="Search...", show_label=False)
 
                 self.text_settings = gr.Textbox(elem_id="settings_json", value=lambda: opts.dumpjson(), visible=False)
 
@@ -313,3 +320,8 @@ class UiSettings:
             outputs=[self.component_dict[k] for k in component_keys],
             queue=False,
         )
+
+    def search(self, text):
+        print(text)
+
+        return [gr.update(visible=text in (comp.label or "")) for comp in self.components]

style.css

@@ -423,6 +423,7 @@ div#extras_scale_to_tab div.form{
 #settings > div{
     border: none;
     margin-left: 10em;
+    padding: 0 var(--spacing-xl);
 }
 
 #settings > div.tab-nav{
@@ -437,6 +438,7 @@ div#extras_scale_to_tab div.form{
     border: none;
     text-align: left;
     white-space: initial;
+    padding: 4px;
 }
 
 #settings_result{