Add some more navigation buttons in the topbar, add some extra typing, and fix some bugs :)

public/img/nav/backwards.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg">
+    <path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M11.7071 4.29289C12.0976 4.68342 12.0976 5.31658 11.7071 5.70711L6.41421 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H6.41421L11.7071 18.2929C12.0976 18.6834 12.0976 19.3166 11.7071 19.7071C11.3166 20.0976 10.6834 20.0976 10.2929 19.7071L3.29289 12.7071C3.10536 12.5196 3 12.2652 3 12C3 11.7348 3.10536 11.4804 3.29289 11.2929L10.2929 4.29289C10.6834 3.90237 11.3166 3.90237 11.7071 4.29289Z"/>
+</svg>

public/img/nav/forwards.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 4.29289C12.6834 3.90237 13.3166 3.90237 13.7071 4.29289L20.7071 11.2929C21.0976 11.6834 21.0976 12.3166 20.7071 12.7071L13.7071 19.7071C13.3166 20.0976 12.6834 20.0976 12.2929 19.7071C11.9024 19.3166 11.9024 18.6834 12.2929 18.2929L17.5858 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H17.5858L12.2929 5.70711C11.9024 5.31658 11.9024 4.68342 12.2929 4.29289Z"/>
+</svg>

public/img/nav/share.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#fff" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 458.624 458.624" xml:space="preserve">
+<g>
+	<g>
+		<path d="M339.588,314.529c-14.215,0-27.456,4.133-38.621,11.239l-112.682-78.67c1.809-6.315,2.798-12.976,2.798-19.871
+			c0-6.896-0.989-13.557-2.798-19.871l109.64-76.547c11.764,8.356,26.133,13.286,41.662,13.286c39.79,0,72.047-32.257,72.047-72.047
+			C411.634,32.258,379.378,0,339.588,0c-39.79,0-72.047,32.257-72.047,72.047c0,5.255,0.578,10.373,1.646,15.308l-112.424,78.491
+			c-10.974-6.759-23.892-10.666-37.727-10.666c-39.79,0-72.047,32.257-72.047,72.047s32.256,72.047,72.047,72.047
+			c13.834,0,26.753-3.907,37.727-10.666l113.292,79.097c-1.629,6.017-2.514,12.34-2.514,18.872c0,39.79,32.257,72.047,72.047,72.047
+			c39.79,0,72.047-32.257,72.047-72.047C411.635,346.787,379.378,314.529,339.588,314.529z"/>
+	</g>
+</g>
+</svg>

src/components/ProxyRegistrar.astro

@@ -1,5 +1,5 @@
 <script>
-  import TransportManager, { TransportMgr, initTransport, loadSelectedTransportScript } from "./ts/TransportManager";
+  import { TransportMgr, initTransport, loadSelectedTransportScript } from "./ts/TransportManager";
   let form = document.querySelector("form");
   let input = document.querySelector("input");
   document.addEventListener("astro:after-swap", initForm);
@@ -83,6 +83,9 @@
       let iframe = document.getElementById("proxy-frame") as HTMLIFrameElement;
       let topbar = document.getElementById("top-bar") as HTMLDivElement;
       let closeButton = document.getElementById("close-button") as HTMLButtonElement;
+      let backwardsButton = document.getElementById('nav-backwards') as HTMLImageElement;
+      let forwardsButton = document.getElementById('nav-forwards') as HTMLImageElement;
+      let shareButton = document.getElementById('nav-share') as HTMLImageElement;
       let preference = getProxyPreference();
       if (preference === "ultraviolet") {
         iframe.src = window.__uv$config.prefix + window.__uv$config.encodeUrl(url);
@@ -108,14 +111,17 @@
       iframe.classList.add("proxy-frame");
       document.body.appendChild(iframe);
       setTimeout(() => {
-        iframeLoad(iframe, loadingContent, topbar, closeButton);
+        iframeLoad(iframe, loadingContent, topbar, closeButton, shareButton, forwardsButton, backwardsButton);
       }, 500);
 
       function iframeLoad(
         iframe: HTMLIFrameElement,
         loadingContent: HTMLElement,
         topbar: HTMLDivElement,
-        closeButton: HTMLButtonElement
+        closeButton: HTMLButtonElement,
+        shareButton: HTMLImageElement,
+        forwardsButton: HTMLImageElement,
+        backwardsButton: HTMLImageElement
       ) {
         loadingContent.style.opacity = "0";
         iframe.style.opacity = "1";
@@ -133,14 +139,33 @@
             iframe.src = "about:blank";
           }, 500);
         };
+        forwardsButton.onclick = () => {
+          if (iframe.contentWindow) {
+            iframe.contentWindow.history.forward();
+          }
+        };
+        backwardsButton.onclick = () => {
+          if (iframe.contentWindow) {
+            iframe.contentWindow.history.back();
+          }
+        };
+        shareButton.onclick = () => {
+          let currentProxy = localStorage.getItem("alu__selectedProxy");
+          if (currentProxy && JSON.parse(currentProxy).value === "rammerhead") {
+            navigator.clipboard.writeText(window.location.origin + "/" + getCookie("rammerhead-session") + "/" + input!.value.trim());
+          } else {
+            navigator.clipboard.writeText(window.__uv$config.decodeUrl(iframe.src.split("/service/")[1]));
+          }
+        };
       }
     }, 100);
   }
 
   async function formEventListener(event: Event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
     await loadSelectedTransportScript();
     TransportMgr.updateTransport();
-    event.preventDefault();
     setTimeout(() => {
       loadContent();
     }, 200);

src/components/ts/TransportManager.ts

@@ -7,6 +7,7 @@ declare global {
     __uv$config: {
       prefix: string;
       encodeUrl: (url: string) => string;
+      decodeUrl: (url: string) => string;
     };
     loadFormContent: Function | null;
   }
@@ -67,10 +68,6 @@ export const TransportMgr = new TransportManager();
 export async function registerSW() {
   navigator.serviceWorker.ready.then(async (sw) => {
     await registerRemoteListener(sw.active!);
-    TransportMgr.setTransport(
-      TransportMgr.getTransport(),
-      localStorage.getItem("alu__wispUrl") || wispURLDefault
-    );
   })
   return new Promise(async (resolve) => {
     await navigator.serviceWorker

src/layouts/Layout.astro

@@ -199,6 +199,18 @@ const { title, optionalPreloads } = Astro.props;
         border-radius: 15px;
         cursor: pointer;
       }
+
+      .nav-container {
+        margin-top: 5px;
+      }
+
+      .nav-container > img {
+        height: 32px;
+        cursor: pointer;
+      }
+      #nav-share {
+        height: 30px;
+      }
       .astro-input {
         font-size: 16px;
         width: 100%;

src/pages/[lang]/index.astro

@@ -23,6 +23,7 @@ export function getStaticPaths() {
           height="50px"
           placeholder={t("menu.search")}
           defaultStyles={false}
+          transition:persist
         />
         <div id="search-suggestions"></div>
         <div id="loading-content">Loading...</div>
@@ -30,6 +31,11 @@ export function getStaticPaths() {
       <div id="top-bar">
         <div class="top-bar-left">
           <button id="close-button">Close</button>
+          <div class="nav-container">
+            <img id="nav-backwards" src="/img/nav/backwards.svg" alt="Backwards Arrow">
+            <img id="nav-forwards" src="/img/nav/forwards.svg" alt="Forwards Arrow">
+            <img id="nav-share" src="/img/nav/share.svg" alt="Share Page">
+          </div>
         </div>
         <div class="top-bar-right">
           <img id="proxied-favicon" alt="favicon" />