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

[Copilot]

Adds a new search bar to the top navigation that displays the current proxied URL (browser address bar style) and implements about:home, about:settings, and about:404 pages accessible from any search bar.

Changes

New Components

• UpperSearchBar.astro - Search bar for proxy header layout
  • Displays current URL extracted from iframe (__uv.location.href or scramjet config)
  • Updates automatically on navigation
  • Handles about: URL navigation

Modified Components

• Header.astro - Refactored proxy header layout (phl)

  • Three-section layout: favicon/title | UpperSearchBar | nav buttons
  • Search bar centered with flex-grow for responsive sizing

• index.astro - Added about: URL interception to main search bar

New Pages

• about-home.astro - Radius features overview
• about-settings.astro - Settings documentation with links
• about-404.astro - 404 error information page

Implementation

Both search bars intercept about: URLs via regex matching:

const handleAboutURL = (value: string): boolean => {
    const aboutMatch = value.match(/^about:(home|settings|404)$/i);
    if (aboutMatch) {
        const page = aboutMatch[1].toLowerCase();
        window.location.href = `/about-${page}`;
        return true;
    }
    return false;
};

URL extraction from proxied 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, '')
    }
    return iframeWin!.location.href;
};

Screenshots

UpperSearchBar in proxy header showing URL:

About: Home page:

About: Settings page:

About: 404 page:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• example.com
  • Triggering command: node /home/REDACTED/work/Radius/Radius/node_modules/.bin/astro dev (dns block)
• telemetry.astro.build
  • Triggering command: node /home/REDACTED/work/Radius/Radius/node_modules/.bin/astro build (dns block)
  • Triggering command: node /home/REDACTED/work/Radius/Radius/node_modules/.bin/astro dev (dns block)
• www.google.com
  • Triggering command: node /home/REDACTED/work/Radius/Radius/node_modules/.bin/astro dev (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

add a new searchbar to the top nav bar. to do this, reformat the top nav bar and add another conponent that looks identical to the origonal search bar and called UpperSearchBar. use the same appearence and style, but add one more future, make it dysplay the current url of the page that it is loading like a top bar on a browser. also make pages for home, settings, and home like about:setting, about:home, and about:404. also make it so when you type these in to any of the search bars, it will load the components.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

• Start Development Server
• Start Production Server