Properly add custom searxng url support 🎉🎉

src/components/Dropdown.astro

@@ -46,6 +46,8 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 10px;
         background-color: #212121;
+        position: fixed;
+        width: 140px;
     }
     .dropdown-item {
         border-bottom: 1px solid #4d4d4d;

src/components/SettingsTablist.astro

@@ -66,7 +66,6 @@ import Input from "./Input.astro";
     document.addEventListener("astro:before-swap", () => {
       window.currentlySelectedTab = ""
       document.removeEventListener('setting-tabChange', determineListener)
-      document.removeEventListener('setting-tabLoad', setLocalStorageItem)
     })
     window.currentlySelectedTab;
     window.loadedContentStorage = {}
@@ -158,38 +157,53 @@ import Input from "./Input.astro";
         })
     }
 
+    function applyInputListeners(item, localStorageItem) {
+      item.addEventListener('input', () => {
+        localStorage.setItem(localStorageItem, item.value)
+      })
+    }
+
     document.addEventListener('setting-tabChange', determineListener)
 
     loadContent('setting-tab-proxy')
 
     function setupSettings(event) {
       if (event.detail == "setting-tab-proxy") {
-        applySavedLocalStorage('selectedProxy', 'dropdown__selected-proxy');
+          applySavedLocalStorage('alu__selectedProxy', 'dropdown__selected-proxy');
-        applySavedLocalStorage('alu__search_engine', 'dropdown__search-engine');
+          applySavedLocalStorage('alu__search_engine', 'dropdown__search-engine');
-        applySavedLocalStorage("selectedOpenWith", 'dropdown__open-with');
+          applySavedLocalStorage("alu__selectedOpenWith", 'dropdown__open-with');
-        let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu')
+          let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu')
-        let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu')
+          let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu')
-        let openWithDropdown = document.getElementById('dropdown__open-with-menu')
+          let openWithDropdown = document.getElementById('dropdown__open-with-menu')
-        let bareUrlInput = document.getElementById('bare-url-input')
+          let bareUrlInput = document.getElementById('bare-url-input')
-        bareUrlInput.addEventListener('change', () => {
+          let searxngUrlInput = document.getElementById('searxng-url-input')
-          localStorage.setItem('bareUrl', bareUrlInput.value)
+          let savedSearxngUrl = localStorage.getItem("alu__searxngUrl")
-        })
+          if (savedSearxngUrl != undefined) {
-        applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'alu__search_engine', checkSearxng);
+            if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/")
-        applyDropdownEventListeners(selectedProxyDropdown, 'dropdown__selected-proxy', 'selectedProxy');
+            searxngUrlInput.value = localStorage.getItem("alu__searxngUrl")
-        applyDropdownEventListeners(openWithDropdown, 'dropdown__open-with', 'selectedOpenWith');
+          }
-        if (localStorage.getItem('bareUrl')) {
+          applyInputListeners(bareUrlInput, 'alu__bareUrl')
-          bareUrlInput.value = localStorage.getItem('bareUrl')
+          applyInputListeners(searxngUrlInput, 'alu__searxngUrl')
-        } else {
+          applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'alu__search_engine', checkSearxng);
-          bareUrlInput.value = '/bare/'
+          applyDropdownEventListeners(selectedProxyDropdown, 'dropdown__selected-proxy', 'alu__selectedProxy');
-        }
+          applyDropdownEventListeners(openWithDropdown, 'dropdown__open-with', 'alu__selectedOpenWith');
-        
+          if (localStorage.getItem('bareUrl')) {
+            bareUrlInput.value = localStorage.getItem('bareUrl')
+          } else {
+            bareUrlInput.value = '/bare/'
+          }
+          checkSearxng();
         }
     }
 
     function checkSearxng() {
       // This function checks if the "searxng" option was clicked, display an additional option if so.
       if (localStorage.getItem("alu__search_engine")) {
-
+        if (localStorage.getItem("alu__search_engine").toLowerCase() == "searx") {
+          document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '1'
+        } else {
+          document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '0'
+        }
       }
     }
 
@@ -206,11 +220,19 @@ import Input from "./Input.astro";
 .settings-container {
     display: flex;
     gap: 20px;
+    position: relative;
+    z-index: 2;
 }
 .setting-label {
   color: white;
   font-size: 18px;
 }
+
+.setting__searxng-url {
+  margin-top: 10px;
+  opacity: 0;
+  transition: opacity 250ms ease-in-out;
+}
 label {
   font-size: 24px;
   font-weight: 700; 

src/components/UVRegistrar.astro

@@ -63,7 +63,14 @@
             return "https://search.brave.com/search?q=";
         }
         case "searx": {
-            return "https://searxng.site/search?q=";
+            let localStorageURL = localStorage.getItem("alu__searxngUrl");
+            if (localStorageURL) {
+                if (localStorageURL == "") return "https://searxng.site/search?q=";
+                // Ugly hack to remove the trailing slash :)
+                if (localStorageURL.endsWith("/")) localStorageURL = localStorageURL.slice(0, -1);
+                return localStorageURL + "/search?q=";
+            }
+            else return "https://searxng.site/search?q=";
         }
         default: {
             return "https://google.com/search?q="