add settings, history, and search engine to frontend

frontend/src/Proxy.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
   import { BareClient } from "bare-client-custom";
-  import {
-    Card,
-    SegmentedButtonContainer,
-    SegmentedButtonItem,
-  } from "m3-svelte";
   import { Win, openWindow } from "../../corium";
   import Icon from "@iconify/svelte";
 
   let selectedProxy = "ultraviolet";
 
   let url: string = "http://google.com";
-
-  import iconBack from "@iconify-icons/ic/outline-arrowback";
   import { onMount } from "svelte";
+  import {
+    Dialog,
+    SegmentedButtonContainer,
+    SegmentedButtonItem,
+    TextField,
+  } from "m3-svelte";
 
   let proxyIframe: HTMLIFrameElement;
 
+  let settingsenabled: boolean = false;
+
+  let searchengine = "https://google.com/search?q=";
+
   function frameLoad() {
     if (!import.meta.env.VITE_ADRIFT_SINGLEFILE) {
       const location = proxyIframe.contentDocument?.location.href;
@@ -29,6 +32,10 @@
   }
 
   function visitURL(url: string) {
+    if (!url.includes("://")) {
+      url = searchengine + url;
+    }
+
     if (!import.meta.env.VITE_ADRIFT_SINGLEFILE) {
       let path =
         selectedProxy == "dynamic"
@@ -55,32 +62,43 @@
 <div class="h-full w-full flex flex-col">
   <div class="flex p-2">
     <div class="flex text-xl items-center w-full">
-      <button>
+      <button
+        on:click={() => {
+          proxyIframe.contentWindow?.history.back();
+        }}
+      >
         <Icon icon="fluent-mdl2:back" />
       </button>
       <div class="p-2" />
-      <button>
+      <button
+        on:click={() => {
+          proxyIframe.contentWindow?.history.forward();
+        }}
+      >
         <Icon icon="fluent-mdl2:forward" />
       </button>
       <button
         class="text-2xl px-4"
         on:click={() => {
-          console.log("a");
           visitURL(url);
         }}
       >
         <Icon icon="tabler:reload" />
       </button>
-      <div id="urlbar" class="flex items-center flex-1">
+      <div class="urlbar flex items-center flex-1">
-        <div class="text-2xl px-2">
+        <button
+          class="text-2xl px-2"
+          on:click={() => {
+            visitURL(url);
+          }}
+        >
           <Icon icon="ic:round-search" />
-        </div>
+        </button>
         <input
           bind:value={url}
           type="text"
           class="flex-1"
           on:keydown={(e) => {
-            console.log(e);
             if (e.key === "Enter") {
               visitURL(url);
             }
@@ -88,42 +106,47 @@
         />
       </div>
 
-      <button class="text-2xl pl-3">
+      <button class="text-2xl pl-3" on:click={() => (settingsenabled = true)}>
         <Icon icon="ic:round-settings" />
       </button>
     </div>
-    <!-- {#if !import.meta.env.VITE_ADRIFT_SINGLEFILE}
+    <Dialog bind:open={settingsenabled} headline="Proxy Settings">
-      <div>
+      {#if !import.meta.env.VITE_ADRIFT_SINGLEFILE}
-        <SegmentedButtonContainer>
+        <div>
-          <input
+          <SegmentedButtonContainer>
-            type="radio"
+            <input
-            name="selectedProxy"
+              type="radio"
-            bind:group={selectedProxy}
+              name="selectedProxy"
-            value="ultraviolet"
+              bind:group={selectedProxy}
-            id="ultraviolet"
+              value="ultraviolet"
-          />
+              id="ultraviolet"
-          <SegmentedButtonItem input="ultraviolet"
+            />
-            >Ultraviolet</SegmentedButtonItem
+            <SegmentedButtonItem input="ultraviolet"
-          >
+              >Ultraviolet</SegmentedButtonItem
-          <input
+            >
-            type="radio"
+            <input
-            name="selectedProxy"
+              type="radio"
-            bind:group={selectedProxy}
+              name="selectedProxy"
-            value="dynamic"
+              bind:group={selectedProxy}
-            id="dynamic"
+              value="dynamic"
-          />
+              id="dynamic"
-          <SegmentedButtonItem input="dynamic">Dynamic</SegmentedButtonItem>
+            />
-        </SegmentedButtonContainer>
+            <SegmentedButtonItem input="dynamic">Dynamic</SegmentedButtonItem>
-      </div>
+          </SegmentedButtonContainer>
-    {/if} -->
+        </div>
+        <br />
+
+        <TextField name="Default Search Engine" bind:value={searchengine} />
+      {/if}
+    </Dialog>
   </div>
   <iframe class="flex-1" bind:this={proxyIframe} on:load={frameLoad} />
 </div>
 
 <style>
-  #urlbar {
+  .urlbar {
     border: solid 0.0625rem rgb(var(--m3-scheme-outline));
-    padding: 0.5rem;
+    padding: 0.25rem;
     border-radius: 0.75rem;
   }
   input {