Implement search engine setting, add new setting

src/components/Input.astro

@@ -9,7 +9,7 @@ interface Props {
 ---
 
 <div class="input-container">
-    <input id={inputName + "-input"} type={type as any}  />
+    <input id={inputName + "-input"} value={defaultTextContent || ""} type={type as any}  />
 </div>
 
 <style>

src/components/SettingsTablist.astro

@@ -21,9 +21,13 @@ import Input from "./Input.astro";
           </div>
           <div class="setting__bare-url">
             <p class="setting-label">Bare URL</p>
-            <Input inputName="bare-url" defaultTextContent="/bare/" />
+            <Input inputName="bare-url" />
           </div>
         </div>
+        <div class="setting__searxng-url">
+          <div class="setting-label">Searxng URL</div>
+          <Input inputName="searxng-url" defaultTextContent="https://searxng.site/" />
+        </div>
     </div>
     <div id="content-setting-tab-customization">
         <h1 style="color: white;">Customization</h1>
@@ -140,12 +144,16 @@ import Input from "./Input.astro";
       }
     }
 
-    function applyDropdownEventListeners(item, dropdownID, localStorageItem) {
+    function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
       Array.from(item.children).forEach((item) => {
           item.addEventListener('click', () => {
             localStorage.setItem(localStorageItem, item.dataset.setting)
             applySavedLocalStorage(localStorageItem, dropdownID)
             closeDropdown(item.parentElement.id);
+
+            if (typeof optionalCallback == "function") {
+              optionalCallback();
+            }
           })
         })
     }
@@ -157,7 +165,7 @@ import Input from "./Input.astro";
     function setupSettings(event) {
       if (event.detail == "setting-tab-proxy") {
         applySavedLocalStorage('selectedProxy', 'dropdown__selected-proxy');
-        applySavedLocalStorage('selectedSearchEngine', 'dropdown__search-engine');
+        applySavedLocalStorage('alu__search_engine', 'dropdown__search-engine');
         applySavedLocalStorage("selectedOpenWith", 'dropdown__open-with');
         let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu')
         let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu')
@@ -166,7 +174,7 @@ import Input from "./Input.astro";
         bareUrlInput.addEventListener('change', () => {
           localStorage.setItem('bareUrl', bareUrlInput.value)
         })
-        applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'selectedSearchEngine');
+        applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'alu__search_engine', checkSearxng);
         applyDropdownEventListeners(selectedProxyDropdown, 'dropdown__selected-proxy', 'selectedProxy');
         applyDropdownEventListeners(openWithDropdown, 'dropdown__open-with', 'selectedOpenWith');
         if (localStorage.getItem('bareUrl')) {
@@ -178,6 +186,13 @@ import Input from "./Input.astro";
         }
     }
 
+    function checkSearxng() {
+      // This function checks if the "searxng" option was clicked, display an additional option if so.
+      if (localStorage.getItem("alu__search_engine")) {
+
+      }
+    }
+
     document.addEventListener('setting-tabLoad', setupSettings)
 </script>
 <style>

src/components/UVRegistrar.astro

@@ -12,7 +12,7 @@
         let loadingContent = document.getElementById('loading-content');
         loadingContent.style.opacity = 1;
         let url = input.value.trim();
-        if (!isUrl(url)) url = 'https://www.google.com/search?q=' + url;
+        if (!isUrl(url)) url = getSearchEngine() + url;
         else if (!(url.startsWith('https://') || url.startsWith('http://'))) url = 'http://' + url;
 
         let iframe = document.getElementById('proxy-frame');
@@ -45,41 +45,29 @@
             document.body.appendChild(topBar);
         })
   });
-
-//   function checkReadyState(iframe) {
-//     // Recursive function that checks if the iframe is ready to be used.
-//     console.log(iframe.contentWindow.document.readyState)
-//     if (iframe.contentWindow.document.readyState === "complete") {
-//             // The iframe is ready to be used.
-//             // We can now add the top bar.
-//             let topBar = document.createElement('div');
-//             topBar.classList.add("top-bar");
-//             let backButton = document.createElement('button');
-//             backButton.classList.add("back-button");
-//             backButton.innerHTML = "Back";
-//             backButton.addEventListener('click', (event) => {
-//                 iframe.remove();
-//                 topBar.remove();
-//             });
-//             let urlText = document.createElement('p');
-//             urlText.classList.add("url-text");
-//             urlText.innerHTML = iframe.src;
-//             topBar.appendChild(backButton);
-//             topBar.appendChild(urlText);
-//             document.body.appendChild(topBar);
-//             } else {
-//             // The iframe is not ready yet.
-//             // We will wait 100ms and then check again.
-//             setTimeout(() => {
-//                 console.log("Not ready...")
-//                 checkReadyState(iframe);
-//             }, 100);
-//         }
-
-//   }
   
   function isUrl(val = ''){
       if (/^http(s?):\/\//.test(val) || val.includes('.') && val.substr(0, 1) !== ' ') return true;
       return false;
   };
+
+  function getSearchEngine() {
+    switch (localStorage.getItem("alu__search_engine").toLowerCase()) {
+        case "google": {
+            return "https://google.com/search?q=";
+        }
+        case "bing": {
+            return "https://bing.com/search?q=d";
+        }
+        case "brave": {
+            return "https://search.brave.com/search?q=";
+        }
+        case "searx": {
+            return "https://searxng.site/search?q=";
+        }
+        default: {
+            return "https://google.com/search?q="
+        }
+    }
+  }
   </script>