Bare URL selector now saves to localStorage.

src/components/Dropdown.astro

@@ -1,5 +1,4 @@
 ---
-// TODO: Add Props to make this component more dynamic!!
 
 const { buttonNameDefault, dropdownList, id } = Astro.props;
 ---

src/components/Input.astro

@@ -1,7 +1,29 @@
 ---
-const { type }  = Astro.props; 
+const { type, inputName, defaultTextContent }  = Astro.props; 
+// as any should not be necessary here... but it is womp womp.
+interface Props {
+    type?: string;
+    inputName: string;
+    defaultTextContent?: string;
+}
 ---
 
 <div class="input-container">
-    <input type={type || "input"}>
+    <input id={inputName + "-input"} type={type as any}  />
-</div>
+</div>
+
+<style>
+    input {
+        height: 43px;
+        width: 100%;
+        border: 4px solid #E0E0E0;
+        border-radius: 10px;
+        background-color: #1b1b1b;
+        color: white;
+        transition: 100ms ease-in-out;
+    }
+    input:focus {
+        outline: none;
+        border: 4px solid #7900e1;
+    }
+</style>

src/components/SettingsTablist.astro

@@ -21,7 +21,7 @@ import Input from "./Input.astro";
           </div>
           <div class="setting__bare-url">
             <p class="setting-label">Bare URL</p>
-            <Input />
+            <Input inputName="bare-url" defaultTextContent="/bare/" />
           </div>
         </div>
     </div>
@@ -140,7 +140,7 @@ import Input from "./Input.astro";
       }
     }
 
-    function applyEventListeners(item, dropdownID, localStorageItem) {
+    function applyDropdownEventListeners(item, dropdownID, localStorageItem) {
       Array.from(item.children).forEach((item) => {
           item.addEventListener('click', () => {
             localStorage.setItem(localStorageItem, item.dataset.setting)
@@ -154,7 +154,7 @@ import Input from "./Input.astro";
 
     loadContent('setting-tab-proxy')
 
-    function setLocalStorageItem(event) {
+    function setupSettings(event) {
       if (event.detail == "setting-tab-proxy") {
         applySavedLocalStorage('selectedProxy', 'dropdown__selected-proxy');
         applySavedLocalStorage('selectedSearchEngine', 'dropdown__search-engine');
@@ -162,15 +162,23 @@ import Input from "./Input.astro";
         let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu')
         let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu')
         let openWithDropdown = document.getElementById('dropdown__open-with-menu')
-        applyEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'selectedSearchEngine');
+        let bareUrlInput = document.getElementById('bare-url-input')
-        applyEventListeners(selectedProxyDropdown, 'dropdown__selected-proxy', 'selectedProxy');
+        bareUrlInput.addEventListener('change', () => {
-        applyEventListeners(openWithDropdown, 'dropdown__open-with', 'selectedOpenWith');
+          localStorage.setItem('bareUrl', bareUrlInput.value)
-
+        })
+        applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'selectedSearchEngine');
+        applyDropdownEventListeners(selectedProxyDropdown, 'dropdown__selected-proxy', 'selectedProxy');
+        applyDropdownEventListeners(openWithDropdown, 'dropdown__open-with', 'selectedOpenWith');
+        if (localStorage.getItem('bareUrl')) {
+          bareUrlInput.value = localStorage.getItem('bareUrl')
+        } else {
+          bareUrlInput.value = '/bare/'
+        }
         
         }
     }
 
-    document.addEventListener('setting-tabLoad', setLocalStorageItem)
+    document.addEventListener('setting-tabLoad', setupSettings)
 </script>
 <style>
 .content-hidden {