fixed some things. and did some UI changes

js/search.js

@@ -0,0 +1,46 @@
+function search_ul_items() {
+const query = document.getElementById('searchbox').value.toLowerCase();
+const ul = document.querySelector('ul'); // only one UL
+if (!ul) return;
+
+const items = ul.querySelectorAll('li');
+items.forEach(li => {
+    if (li.textContent.toLowerCase().includes(query)) {
+    li.style.display = 'list-item';
+    } else {
+    li.style.display = 'none';
+    }
+});
+}
+
+// Create search box and insert before the available pages paragraph
+window.addEventListener('DOMContentLoaded', function() {
+const searchDiv = document.createElement('div');
+searchDiv.style.marginBottom = '16px';
+searchDiv.style.paddingLeft = '19px';
+searchDiv.innerHTML = `
+    <input 
+    type="text" 
+    id="searchbox" 
+    placeholder="Search pages..." 
+    style="
+        padding: 6px 6px 6px 28px; 
+        font-size: 1em; 
+        width: 220px; 
+        background: url('../../css/icons/search.webp') no-repeat 6px center; 
+        background-size: 20px 20px;
+    " 
+    title="Search for pages"
+    />
+`;
+const available = document.getElementById('available');
+available.parentNode.insertBefore(searchDiv, available);
+
+const searchbox = document.getElementById('searchbox');
+if (searchbox) {
+    searchbox.title = "Search for pages";
+    searchbox.style.fontStyle = "bold";
+}
+
+document.getElementById('searchbox').addEventListener('input', search_ul_items);
+});