Add UpperSearchBar component with browser-style URL display and about: protocol support

src/components/Header.astro

@@ -1,13 +1,14 @@
 ---
 import { Icon } from "astro-icon/components";
+import UpperSearchBar from "@components/ui/UpperSearchBar.astro";
 const path = Astro.url.pathname;
 ---
 <div class="h-14 fixed bg-(--background) border-b border-b-(--border) px-4 w-full z-10 flex items-center font-inter">
     <div class="flex items-center gap-3 w-full">
         <button id="menu" class="cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-(--offset-background) h-10 w-10 hover:bg-(--accent)">
             <Icon name="lucide:menu" class="text-(--foreground) h-7 w-7" />
         </button>
-        <a id="bhl" class="flex items-center gap-2 w-full" href="/">
+        <a id="bhl" class="flex items-center gap-2" href="/">
             <Icon name="lucide:radius" class="w-8 h-8 rotate-180 text-(--foreground)" />
             <h1 class="text-xl font-bold text-(--foreground)"> Radius </h1>
         </a>
@@ -32,6 +33,7 @@ const path = Astro.url.pathname;
                 </button> */}
             </div>
         </div>
+        <UpperSearchBar />
     </div>
     <div>
     </div>

src/components/ui/UpperSearchBar.astro

@@ -0,0 +1,103 @@
+---
+import { Icon } from "astro-icon/components";
+---
+<div class="flex flex-row items-center gap-2 border border-(--input) rounded-lg h-10 px-2 bg-(--background) flex-1 max-w-2xl">
+    <Icon name="lucide:search" class="text-(--muted-foreground) w-4 h-4 flex-shrink-0" />
+    <input 
+        id="upperSearchInput" 
+        type="text" 
+        name="UpperSearch" 
+        class="text-sm focus-visible:outline-none w-full h-full placeholder:text-(--muted-foreground) bg-transparent" 
+        placeholder="Search the web"
+    />
+</div>
+
+<script>
+    import { SW } from "@utils/proxy.ts";
+
+    const initUpperSearchBar = async () => {
+        const upperSearchInput = document.getElementById("upperSearchInput") as HTMLInputElement;
+        const iframe = document.getElementById("iframe") as HTMLIFrameElement;
+
+        if (!upperSearchInput) return;
+
+        // Function to handle about: URLs
+        const handleAboutUrl = (url: string): string | null => {
+            const lowerUrl = url.toLowerCase().trim();
+            if (lowerUrl === "about:settings") {
+                return "/settings";
+            } else if (lowerUrl === "about:home") {
+                return "/";
+            } else if (lowerUrl === "about:404") {
+                return "/404";
+            }
+            return null;
+        };
+
+        // Handle search input
+        upperSearchInput.addEventListener("keypress", async (event: KeyboardEvent) => {
+            if (event.key === "Enter") {
+                const inputValue = upperSearchInput.value.trim();
+
+                // Check for about: URLs first
+                const aboutUrl = handleAboutUrl(inputValue);
+                if (aboutUrl) {
+                    window.location.href = aboutUrl;
+                    return;
+                }
+
+                // Get SW instance and encode URL
+                const sw = SW.getInstance().next().value;
+                if (sw && iframe) {
+                    iframe.classList.remove("hidden");
+                    iframe.src = sw.encodeURL(inputValue);
+                }
+            }
+        });
+
+        // Update URL display when iframe loads
+        const updateUrlDisplay = async () => {
+            if (!iframe) return;
+
+            const iframeWin = iframe.contentWindow;
+            if (!iframeWin) return;
+
+            try {
+                let pageURL = "";
+
+                if (iframeWin.__uv) {
+                    pageURL = iframeWin.__uv.location.href;
+                } else if (iframeWin.$scramjet?.config?.prefix) {
+                    pageURL = iframeWin.location.href
+                        .replace(iframeWin.location.origin, '')
+                        .replace(iframeWin.$scramjet.config.prefix, '');
+                } else {
+                    pageURL = iframeWin.location.href;
+                }
+
+                upperSearchInput.value = pageURL;
+            } catch (e) {
+                // Ignore cross-origin errors
+            }
+        };
+
+        // Listen for iframe load events
+        if (iframe) {
+            iframe.addEventListener("load", updateUrlDisplay);
+        }
+
+        // Display current page URL on initial load
+        const currentPath = window.location.pathname;
+        if (currentPath === "/") {
+            upperSearchInput.value = "about:home";
+        } else if (currentPath === "/settings" || currentPath.startsWith("/settings/")) {
+            upperSearchInput.value = "about:settings";
+        } else if (currentPath === "/404") {
+            upperSearchInput.value = "about:404";
+        } else {
+            upperSearchInput.value = window.location.href;
+        }
+    };
+
+    document.addEventListener("astro:page-load", initUpperSearchBar);
+</script>

src/pages/index.astro

@@ -63,11 +63,33 @@ const link = Astro.url.searchParams.get("redir");
         const sw = SW.getInstance().next().value!;
         await sw.ready();
 
+        // Function to handle about: URLs
+        const handleAboutUrl = (url: string): string | null => {
+            const lowerUrl = url.toLowerCase().trim();
+            if (lowerUrl === "about:settings") {
+                return "/settings";
+            } else if (lowerUrl === "about:home") {
+                return "/";
+            } else if (lowerUrl === "about:404") {
+                return "/404";
+            }
+            return null;
+        };
+
         input.addEventListener("keypress", async (event: any) => {
             if (event.key === "Enter") {
+                const inputValue = input.value.trim();
+
+                // Check for about: URLs first
+                const aboutUrl = handleAboutUrl(inputValue);
+                if (aboutUrl) {
+                    window.location.href = aboutUrl;
+                    return;
+                }
+
                 const settings = await Settings.getInstance();
                 iframe.classList.remove("hidden");
-                iframe.src = sw.encodeURL(input.value); 
+                iframe.src = sw.encodeURL(inputValue); 
                 buttons();
             }
         });
@@ -111,6 +133,12 @@ const link = Astro.url.searchParams.get("redir");
             phlImage.src = object;
             bhl.classList.add("hidden");
             phl.classList.remove("hidden");
+
+            // Update upper search bar with the current URL
+            const upperSearchInput = document.getElementById("upperSearchInput") as HTMLInputElement;
+            if (upperSearchInput) {
+                upperSearchInput.value = pageURL;
+            }
         }); 
     }