added search bar

webUI/index.html

@@ -14,7 +14,8 @@
   <div id="background-container">
   </div>
   <link href="../oreui-html/src/oreui.css" rel="stylesheet"/>
-  <link href="theme.css" rel="stylesheet">
+  <link href="style.css" rel="stylesheet">
+   <link href="theme.css" rel="stylesheet"/>
    <script src="bg.js">
    </script>
    <script src="../oreui-html/src/oreui.js">
@@ -85,6 +86,11 @@
      </div>
     </div>
     <div class="container">
+     <div class="search-container">
+      <input id="searchBar" oninput="filterPacks()" oreui-color="dark" oreui-type="input" placeholder="Search for a pack..." type="text"/>
+      <div class="search-results" id="searchResults" oreui-color="dark" oreui-type="general">
+      </div>
+     </div>
      <div class="category">
       <div class="category-label" onclick="OreUI.toggleActive(this);toggleCategory(this);" oreui-color="dark" oreui-type="button">
        Aesthetic
@@ -7529,6 +7535,8 @@
       </div>
      </div>
     </div>
+    <script src="searchbar.js">
+    </script>
     <script src="app.js">
     </script>
    </div>

webUI/index.html.template

@@ -14,6 +14,7 @@
   <div id="background-container">
   </div>
   <link href="../oreui-html/src/oreui.css" rel="stylesheet">
+  <link href="style.css" rel="stylesheet"/>
   <link href="theme.css" rel="stylesheet"/>
   <script src="bg.js"></script>
   <script src="../oreui-html/src/oreui.js"></script>
@@ -76,6 +77,10 @@
    </ul>
    <div class="preselected" oreui-type="general" oreui-color="dark">Pre-selected Tweaks!<div class="preselected-unselect" onclick="processJsonData(getSelectedTweaks(),'unselect'); this.parentElement.style.top = '-20vh'; this.parentElement.innerText = 'Unselected!';">Unselect?</div></div>
    <div class="container">
+     <div class="search-container">
+      <input id="searchBar" oninput="filterPacks()" oreui-color="dark" oreui-type="input" placeholder="Search for a pack..." type="text"/>
+      <div class="search-results" id="searchResults" oreui-color="dark" oreui-type="general"></div>
+     </div>
     <!--Packs-->
    </div>
    <div class="download-container">
@@ -119,6 +124,7 @@
      </div>
     </div>
    </div>
+   <script src="searchbar.js"></script>
    <script src="app.js">
    </script>
   </div>

webUI/searchbar.js

@@ -0,0 +1,75 @@
+document.addEventListener("click", filterPacks);
+function filterPacks() {
+  const query = document.getElementById("searchBar").value.toLowerCase().trim();
+  const resultsDiv = document.getElementById("searchResults");
+
+  if (query === "") {
+    if (resultsDiv.hasAttribute("hasMatches")) {
+      resultsDiv.removeAttribute("hasMatches");
+    }
+    resultsDiv.innerHTML = "";
+    return;
+  }
+
+  const packs = document.querySelectorAll(".tweak");
+  let matches = [];
+
+  packs.forEach((pack, index) => {
+    const title = pack.querySelector(".tweak-title").textContent;
+    const description = pack.querySelector(".tweak-description").textContent;
+    const icon = pack.querySelector("img").src;
+    const isSelected = pack.querySelector("input[type='checkbox']").checked; // Check selection state
+
+    if (
+      title.toLowerCase().includes(query) ||
+      description.toLowerCase().includes(query)
+    ) {
+      matches.push({
+        title,
+        description,
+        icon,
+        isSelected, // Track selection state
+        packIndex: index, // Keep track of the original pack's index
+      });
+    }
+  });
+
+  if (matches.length === 0) {
+    if (resultsDiv.hasAttribute("hasMatches")) {
+      resultsDiv.removeAttribute("hasMatches");
+    }
+    resultsDiv.innerHTML = "";
+  } else {
+    if (matches.length > 5) matches = matches.slice(0, 5);
+    resultsDiv.setAttribute("hasMatches", true);
+    resultsDiv.innerHTML = matches
+      .map(
+        (match) => `
+      <div
+        ${match.isSelected ? 'oreui-state="active"' : ""}
+        class="search-result-item"
+        onclick="triggerPackClick(${match.packIndex})"
+        style="cursor: pointer;"
+        oreui-type="button"
+        oreui-color="dark"
+        oreui-active-color="green"
+      >
+        <img src="${match.icon}" alt="${match.title.trim()}" style="width: 48px; height: 48px;" />
+        <div>
+          <strong>${match.title}</strong>
+          <p>${match.description}</p>
+        </div>
+      </div>
+    `,
+      )
+      .join("");
+  }
+}
+
+function triggerPackClick(index) {
+  // Simulate a click on the corresponding pack
+  const packs = document.querySelectorAll(".tweak");
+  if (packs[index]) {
+    packs[index].click();
+  }
+}

webUI/style.css

@@ -0,0 +1,45 @@
+.search-container {
+  margin: 0;
+  margin-left: 5px;
+  text-align: center;
+}
+
+.search-results {
+  margin: 5px auto;
+  max-width: 80%;
+  padding: 10px 10px 0 10px;
+  border-radius: 5px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  &[hasmatches="true"] {
+    display: block;
+  }
+  &:not(:hover) {
+    display: none;
+  }
+}
+
+#searchBar {
+  width: 95%;
+  padding: 10px;
+  font-size: 16px;
+  &:focus + div[hasmatches="true"] {
+    display: block;
+  }
+}
+
+.search-result-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  div {
+    text-align: left;
+  }
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+}