search bar for user settings panel

public/index.html

@@ -2674,7 +2674,7 @@
                     <h3><span data-i18n="User Settings">User Settings</span></h3>
                     <div id="version_display"></div>
                 </div>
-                <div class="flex-container spaceEvenly">
+                <div id="user-settings-block-content" class="flex-container spaceEvenly">
                     <div id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p">
                         <div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
                             <div id="UI-Mode-Block">

public/scripts/extensions/settingsearch/index.js

@@ -0,0 +1,57 @@
+export { MODULE_NAME };
+
+const MODULE_NAME = 'settingsSearch';
+async function addSettingsSearchHTML() {
+
+    const html = `
+    <div class="wide100p">
+        <div class="justifyLeft">
+            <textarea id="settingsSearch" class="wide100p textarea_compact margin-bot-10px" rows="1" placeholder="Search Settings"></textarea>
+        </div>
+    </div>`
+
+    $("#user-settings-block").prepend(html);
+}
+
+async function searchSettings() {
+    removeHighlighting(); // Remove previous highlights
+    let searchString = $("#settingsSearch").val();
+    let searchableText = $("#user-settings-block-content"); // Get the HTML block
+    if (searchString.trim() !== "") {
+        highlightMatchingElements(searchableText[0], searchString); // Highlight matching elements
+    }
+}
+function isParentHeader(element) {
+    return $(element).closest('h4, h3').length > 0;
+}
+function highlightMatchingElements(element, searchString) {
+    $(element).contents().each(function () {
+        const isTextNode = this.nodeType === Node.TEXT_NODE;
+        const isElementNode = this.nodeType === Node.ELEMENT_NODE;
+
+        if (isTextNode && this.nodeValue.trim() !== "" && !isParentHeader(this)) {
+            const parentElement = $(this).parent();
+            const elementText = this.nodeValue;
+
+            if (elementText.toLowerCase().includes(searchString.toLowerCase())) {
+                parentElement.addClass('highlighted'); // Add CSS class to highlight matched elements
+            }
+        } else if (isElementNode && !$(this).is("h4")) {
+            highlightMatchingElements(this, searchString);
+        }
+    });
+}
+function removeHighlighting() {
+    $(".highlighted").removeClass("highlighted");  // Remove CSS class from previously highlighted elements
+}
+jQuery(() => {
+    addSettingsSearchHTML();
+    $('#settingsSearch').on('input change', searchSettings);
+});
+
+
+
+
+
+
+

public/scripts/extensions/settingsearch/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Settings Search",
+    "loading_order": 15,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "RossAscends",
+    "version": "1.0.0",
+    "homePage": "https://github.com/SillyTavern/SillyTavern"
+}

public/scripts/extensions/settingsearch/style.css

@@ -0,0 +1,5 @@
+.highlighted {
+    color: black;
+    background-color: yellow;
+    text-shadow: none !important;
+}