From eb6e987f55dc1ad25e80feb46ce63d09768ae2e9 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Tue, 19 Sep 2023 14:19:22 +0900
Subject: [PATCH] search bar for user settings panel

---
 public/index.html                             |  2 +-
 .../scripts/extensions/settingsearch/index.js | 57 +++++++++++++++++++
 .../extensions/settingsearch/manifest.json    | 11 ++++
 .../extensions/settingsearch/style.css        |  5 ++
 4 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 public/scripts/extensions/settingsearch/index.js
 create mode 100644 public/scripts/extensions/settingsearch/manifest.json
 create mode 100644 public/scripts/extensions/settingsearch/style.css

diff --git a/public/index.html b/public/index.html
index 8c3fefdba..b6fea403b 100644
--- a/public/index.html
+++ b/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">
diff --git a/public/scripts/extensions/settingsearch/index.js b/public/scripts/extensions/settingsearch/index.js
new file mode 100644
index 000000000..390ab75be
--- /dev/null
+++ b/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);
+});
+
+
+
+
+
+
+
diff --git a/public/scripts/extensions/settingsearch/manifest.json b/public/scripts/extensions/settingsearch/manifest.json
new file mode 100644
index 000000000..fd743c535
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/public/scripts/extensions/settingsearch/style.css b/public/scripts/extensions/settingsearch/style.css
new file mode 100644
index 000000000..100ed2a7c
--- /dev/null
+++ b/public/scripts/extensions/settingsearch/style.css
@@ -0,0 +1,5 @@
+.highlighted {
+    color: black;
+    background-color: yellow;
+    text-shadow: none !important;
+}
\ No newline at end of file