Move setting search to built-in functionality

public/css/st-tailwind.css

@@ -6,6 +6,12 @@
     color: var(--fullred);
 }
 
+.highlighted {
+    color: black;
+    background-color: yellow;
+    text-shadow: none !important;
+}
+
 .m-t-0 {
     margin-top: 0;
 }

public/index.html

@@ -86,6 +86,7 @@
     <script type="module" src="scripts/filters.js"></script>
     <script type="module" src="scripts/personas.js"></script>
     <script type="module" src="scripts/server-history.js"></script>
+    <script type="module" src="scripts/setting-search.js"></script>
 
     <title>SillyTavern</title>
 </head>

public/scripts/extensions/settingsearch/manifest.json

@@ -1,11 +0,0 @@
-{
-    "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

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

public/scripts/setting-search.js

@@ -1,29 +1,29 @@
-export { MODULE_NAME };
+/**
-
+ * Search for settings that match the search string and highlight them.
-const MODULE_NAME = 'settingsSearch';
+ */
-async function addSettingsSearchHTML() {
-
-    const html = `
-    <div class="wide100p">
-        <div class="justifyLeft">
-            <textarea id="settingsSearch" class="wide100p textarea_compact" rows="1" placeholder="Search Settings"></textarea>
-        </div>
-    </div>`
-
-    $("#user-settings-block").prepend(html);
-}
-
 async function searchSettings() {
     removeHighlighting(); // Remove previous highlights
-    let searchString = $("#settingsSearch").val();
+    const searchString = String($("#settingsSearch").val());
-    let searchableText = $("#user-settings-block-content"); // Get the HTML block
+    const searchableText = $("#user-settings-block-content"); // Get the HTML block
     if (searchString.trim() !== "") {
         highlightMatchingElements(searchableText[0], searchString); // Highlight matching elements
     }
 }
+
+/**
+ * Check if the element is a child of a header element
+ * @param {HTMLElement | Text | Document | Comment} element Settings block HTML element
+ * @returns {boolean} True if the element is a child of a header element, false otherwise
+ */
 function isParentHeader(element) {
     return $(element).closest('h4, h3').length > 0;
 }
+
+/**
+ * Recursively highlight elements that match the search string
+ * @param {HTMLElement | Text | Document | Comment} element Settings block HTML element
+ * @param {string} searchString Search string
+ */
 function highlightMatchingElements(element, searchString) {
     $(element).contents().each(function () {
         const isTextNode = this.nodeType === Node.TEXT_NODE;
@@ -41,17 +41,14 @@ function highlightMatchingElements(element, searchString) {
         }
     });
 }
+
+/**
+ * Remove highlighting from previously highlighted elements.
+ */
 function removeHighlighting() {
     $(".highlighted").removeClass("highlighted");  // Remove CSS class from previously highlighted elements
 }
+
 jQuery(() => {
-    //addSettingsSearchHTML();
     $('#settingsSearch').on('input change', searchSettings);
 });
-
-
-
-
-
-
-