Add UpperSearchBar to nav bar with URL display and about: pages

src/components/Header.astro

@@ -1,5 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
+import UpperSearchBar from "@components/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">
@@ -11,12 +12,15 @@ const path = Astro.url.pathname;
             <Icon name="lucide:radius" class="w-8 h-8 rotate-180 text-(--foreground)" />
             <h1 class="text-xl font-bold text-(--foreground)"> Radius </h1>
         </a>
-        <div id="phl" class="flex items-center w-full justify-between hidden">
-            <div class="flex items-center gap-2 w-1/2">
+        <div id="phl" class="flex items-center w-full gap-3 hidden">
+            <div class="flex items-center gap-2 shrink-0">
                 <img id="phlImage" src="" class="w-8 h-8 text-(--foreground) rounded-2xl" />
-                <h1 id="phlTitle" class="hidden md:block text-xl font-bold text-(--foreground) whitespace-nowrap overflow-hidden text-ellipsis w-full"> Radius </h1>
+                <h1 id="phlTitle" class="hidden md:block text-lg font-bold text-(--foreground) whitespace-nowrap"> Radius </h1>
             </div>
-            <div class="flex items-center gap-2 flex-grow justify-end text-(--foreground) md:mr-4">
+            <div class="flex items-center gap-2 flex-grow justify-center px-2">
+                <UpperSearchBar />
+            </div>
+            <div class="flex items-center gap-2 shrink-0 text-(--foreground)">
                 <button id="pal" class="font-medium rounded-lg h-10 w-10 hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
                     <Icon name="lucide:arrow-left" class="h-6 w-6" />
                 </button>

src/components/UpperSearchBar.astro

@@ -0,0 +1,113 @@
+---
+import { Icon } from "astro-icon/components";
+---
+<div class="flex flex-row items-center gap-2 w-full max-w-2xl border border-(--input) rounded-lg h-10 p-2 bg-(--background)">
+    <Icon name="lucide:search" class="text-(--muted-foreground)" />
+    <input 
+        id="upper-search-input" 
+        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 or type about:home, about:settings, about:404"
+    />
+</div>
+
+<script>
+    import { SW } from "@utils/proxy.ts";
+
+    const init = async () => {
+        const upperInput = document.getElementById("upper-search-input") as HTMLInputElement;
+        const iframe = document.getElementById("iframe") as HTMLIFrameElement;
+        const iframeWin = iframe?.contentWindow;
+        const bhl = document.getElementById("bhl") as HTMLDivElement;
+        const phl = document.getElementById("phl") as HTMLDivElement;
+        const phlImage = document.getElementById("phlImage") as HTMLImageElement;
+        const phlTitle = document.getElementById("phlTitle") as HTMLDivElement;
+
+        if (!iframe) return;
+
+        // Get SW instance and wait for it to be ready
+        const sw = SW.getInstance().next().value!;
+        await sw.ready();
+
+        // Function to handle about: URLs
+        const handleAboutURL = (value: string): boolean => {
+            const aboutMatch = value.match(/^about:(home|settings|404)$/i);
+            if (aboutMatch) {
+                const page = aboutMatch[1].toLowerCase();
+                if (page === 'home') {
+                    window.location.href = '/about-home';
+                } else if (page === 'settings') {
+                    window.location.href = '/about-settings';
+                } else if (page === '404') {
+                    window.location.href = '/about-404';
+                }
+                return true;
+            }
+            return false;
+        };
+
+        // Function to get current URL from iframe
+        const getURL = async (): Promise<string> => {
+            if (iframeWin!.__uv) {
+                return iframeWin!.__uv.location.href
+            }
+            else if (iframeWin!.$scramjet?.config?.prefix) {
+                return iframeWin!.location.href
+                    .replace(iframeWin!.location.origin, '')
+                    .replace(iframeWin!.$scramjet.config.prefix, '')
+            }
+            else {
+                return iframeWin!.location.href;
+            }
+        };
+
+        // Update the upper search bar with current URL
+        const updateUpperSearchBar = async () => {
+            try {
+                const currentURL = await getURL();
+                upperInput.value = currentURL;
+            } catch (e) {
+                // Ignore errors
+            }
+        };
+
+        // Listen for Enter key press
+        upperInput.addEventListener("keypress", async (event: any) => {
+            if (event.key === "Enter") {
+                // Check if it's an about: URL first
+                if (handleAboutURL(upperInput.value)) {
+                    return;
+                }
+
+                // Otherwise, navigate normally
+                iframe.classList.remove("hidden");
+                iframe.src = sw.encodeURL(upperInput.value);
+
+                // Show proxy header layout
+                if (bhl && phl) {
+                    bhl.classList.add("hidden");
+                    phl.classList.remove("hidden");
+                }
+            }
+        });
+
+        // Update URL display when iframe loads
+        if (iframe) {
+            iframe.addEventListener("load", async () => {
+                await updateUpperSearchBar();
+            });
+        }
+
+        // Initial update if iframe is already loaded
+        if (iframe && !iframe.classList.contains("hidden")) {
+            await updateUpperSearchBar();
+        }
+    };
+
+    document.addEventListener("astro:page-load", async () => {
+        try {
+            await init();
+        } catch (_) {}
+    });
+</script>

src/pages/about-404.astro

@@ -0,0 +1,53 @@
+---
+import Layout from "@layouts/Layout.astro";
+import { Icon } from "astro-icon/components";
+import { Image } from "astro:assets";
+
+import type { ImageMetadata } from "astro";
+const images = import.meta.glob<{ default: ImageMetadata }>(
+    "/src/assets/images/general/*.{jpeg,jpg,png,gif,webp}"
+);
+---
+
+<Layout>
+    <div class="flex flex-col md:flex-row gap-4 items-center justify-center h-full w-full">
+        <Image src={images["/src/assets/images/general/kitty.gif"]()} width={300} height={300} class="rounded-md" alt="Kitty 404" />
+        <div class="rounded-lg border border-(--border) bg-(--card) text-(--card-foreground) shadow-sm flex flex-col items-center justify-center p-8">
+            <div class="text-2xl font-semibold mb-4 flex flex-col items-center justify-center">
+                <Icon name="lucide:shield-x" class="w-14 h-14 text-(--destructive)" />
+                <h2 class="mt-2 text-3xl font-semibold">About: 404</h2>
+            </div>
+            <div class="pt-0 mb-4 text-center max-w-md">
+                <p class="text-(--muted-foreground) mb-2">
+                    This is the about page for 404 errors.
+                </p>
+                <p class="text-(--foreground) font-medium">
+                    Error 404: Page Not Found
+                </p>
+            </div>
+            <div class="flex flex-col gap-3 w-full text-sm mb-6 max-w-md">
+                <p class="text-(--foreground)"><strong>Common Causes:</strong></p>
+                <ul class="list-disc list-inside text-(--muted-foreground) space-y-1 ml-2">
+                    <li>The page you're looking for doesn't exist</li>
+                    <li>The URL might be mistyped</li>
+                    <li>The page may have been moved or deleted</li>
+                </ul>
+            </div>
+            <div class="flex gap-3 pt-0">
+                <a href="/" class="bg-(--primary) h-10 rounded-lg text-sm font-medium px-4 py-2 text-(--primary-foreground) cursor-pointer inline-flex items-center justify-center hover:bg-(--primary)/90">
+                    Go Home
+                </a>
+                <a href="/404" class="border border-(--border) h-10 rounded-lg text-sm font-medium px-4 py-2 text-(--foreground) cursor-pointer inline-flex items-center justify-center hover:bg-(--accent)">
+                    See Actual 404
+                </a>
+            </div>
+        </div>
+    </div>
+</Layout>
+
+<script>
+    // Break out of iframe if loaded within one
+    if (window.self !== window.top) {
+        window.top!.location.href = window.location.href;
+    }
+</script>

src/pages/about-home.astro

@@ -0,0 +1,52 @@
+---
+import Layout from "@layouts/Layout.astro";
+import { Icon } from "astro-icon/components";
+
+import splash from "@assets/splash.json";
+
+const genSplash = (): String => {
+    const idx = Math.floor(Math.random() * splash.length);
+    return splash[idx].splash;
+};
+
+const randomSplash = genSplash();
+---
+
+<Layout>
+    <div class="h-full flex items-center justify-center font-inter">
+        <div class="flex flex-col items-center gap-6">
+            <div class="flex items-center gap-2">
+                <Icon name="lucide:radius" class="h-16 w-16 rotate-180 text-(--foreground)" />
+                <h1 class="text-6xl font-semibold">Radius</h1>
+            </div>
+            <div class="flex flex-col items-center gap-2 p-6 rounded-lg border border-(--border) bg-(--card) text-(--card-foreground) shadow-sm max-w-2xl">
+                <h2 class="text-2xl font-semibold mb-2">About: Home</h2>
+                <p class="text-center text-(--muted-foreground) mb-4">
+                    Welcome to Radius - Your gateway to unrestricted web browsing
+                </p>
+                <div class="flex flex-col gap-2 w-full text-sm">
+                    <p class="text-(--foreground)"><strong>Features:</strong></p>
+                    <ul class="list-disc list-inside text-(--muted-foreground) space-y-1 ml-2">
+                        <li>Advanced proxy support (Ultraviolet & Scramjet)</li>
+                        <li>Multiple routing modes (Wisp & Bare Server)</li>
+                        <li>Customizable search engines</li>
+                        <li>Modern, sleek interface</li>
+                    </ul>
+                </div>
+                <div class="mt-4">
+                    <a href="/" class="bg-(--primary) h-10 rounded-lg text-sm font-medium px-4 py-2 text-(--primary-foreground) cursor-pointer inline-flex items-center justify-center hover:bg-(--primary)/90">
+                        Go to Home Page
+                    </a>
+                </div>
+            </div>
+            <p class="text-sm text-center sm:text-base whitespace-nowrap"> { randomSplash } </p>
+        </div>
+    </div>
+</Layout>
+
+<script>
+    // Break out of iframe if loaded within one
+    if (window.self !== window.top) {
+        window.top!.location.href = window.location.href;
+    }
+</script>

src/pages/about-settings.astro

@@ -0,0 +1,48 @@
+---
+import Layout from "@layouts/Layout.astro";
+import { Icon } from "astro-icon/components";
+---
+
+<Layout>
+    <div class="h-full flex items-center justify-center font-inter">
+        <div class="flex flex-col items-center gap-6 p-6">
+            <div class="rounded-lg border border-(--border) bg-(--card) text-(--card-foreground) shadow-sm flex flex-col items-center justify-center p-8 max-w-2xl">
+                <div class="flex items-center gap-2 mb-4">
+                    <Icon name="lucide:settings-2" class="w-14 h-14 text-(--primary)" />
+                    <h1 class="text-3xl font-semibold">About: Settings</h1>
+                </div>
+                <div class="text-center mb-6">
+                    <p class="text-(--muted-foreground)">
+                        Configure Radius to match your preferences and needs
+                    </p>
+                </div>
+                <div class="flex flex-col gap-3 w-full text-sm mb-6">
+                    <p class="text-(--foreground)"><strong>Available Settings:</strong></p>
+                    <ul class="list-disc list-inside text-(--muted-foreground) space-y-2 ml-2">
+                        <li><strong>Proxy Switcher:</strong> Choose between Ultraviolet and Scramjet</li>
+                        <li><strong>Routing Mode:</strong> Select Wisp Server or Bare Server</li>
+                        <li><strong>Transport:</strong> Configure Libcurl or Epoxy transport</li>
+                        <li><strong>Search Engine:</strong> Customize your default search provider</li>
+                        <li><strong>Appearance:</strong> Personalize themes and visual settings</li>
+                        <li><strong>Cloaking:</strong> Customize tab title and favicon</li>
+                    </ul>
+                </div>
+                <div class="flex gap-3">
+                    <a href="/settings" class="bg-(--primary) h-10 rounded-lg text-sm font-medium px-4 py-2 text-(--primary-foreground) cursor-pointer inline-flex items-center justify-center hover:bg-(--primary)/90">
+                        Go to Settings
+                    </a>
+                    <a href="/" class="border border-(--border) h-10 rounded-lg text-sm font-medium px-4 py-2 text-(--foreground) cursor-pointer inline-flex items-center justify-center hover:bg-(--accent)">
+                        Go Home
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</Layout>
+
+<script>
+    // Break out of iframe if loaded within one
+    if (window.self !== window.top) {
+        window.top!.location.href = window.location.href;
+    }
+</script>

src/pages/index.astro

@@ -63,8 +63,30 @@ const link = Astro.url.searchParams.get("redir");
         const sw = SW.getInstance().next().value!;
         await sw.ready();
 
+        // Function to handle about: URLs
+        const handleAboutURL = (value: string): boolean => {
+            const aboutMatch = value.match(/^about:(home|settings|404)$/i);
+            if (aboutMatch) {
+                const page = aboutMatch[1].toLowerCase();
+                if (page === 'home') {
+                    window.location.href = '/about-home';
+                } else if (page === 'settings') {
+                    window.location.href = '/about-settings';
+                } else if (page === '404') {
+                    window.location.href = '/about-404';
+                }
+                return true;
+            }
+            return false;
+        };
+
         input.addEventListener("keypress", async (event: any) => {
             if (event.key === "Enter") {
+                // Check if it's an about: URL first
+                if (handleAboutURL(input.value)) {
+                    return;
+                }
+
                 const settings = await Settings.getInstance();
                 iframe.classList.remove("hidden");
                 iframe.src = sw.encodeURL(input.value);