Merge branch 'NebulaServices:rewrite' into rewrite

src/locales/en.json

@@ -47,6 +47,10 @@
     "cloaking": {
       "title": "Cloaking",
       "subtitle": "Choose how your tab looks"
+    },
+    "search": {
+      "title": "Search Engine",
+      "subtitle": "Choose your search engine"
     }
   },
   "titles": {

src/locales/es.json

@@ -47,6 +47,10 @@
     "cloaking": {
       "title": "Encubrimiento",
       "subtitle": "Elige cómo se ve tu pestaña"
+    },
+    "search": {
+      "title": "Motor de búsqueda",
+      "subtitle": "Elija su motor de búsqueda para Nebula."
     }
   },
   "titles": {

src/locales/ja.json

@@ -47,6 +47,10 @@
     "cloaking": {
       "title": "クローキング",
       "subtitle": "タブの見た目を選択する"
+    },
+    "search": {
+      "title": "検索エンジン",
+      "subtitle": "ネビュラの検索エンジンを選択してください"
     }
   },
   "titles": {

src/pages/ProxyFrame.tsx

@@ -1,5 +1,6 @@
 import { RammerheadEncode } from "../util/RammerheadEncode";
 import { searchUtil } from "../util/searchUtil";
+import { LoadSuspense } from "../LoadSuspense";
 import { useEffect, useState } from "preact/hooks";
 //import our Iframe component
 import { Iframe } from "../components/iframe/Iframe";
@@ -19,12 +20,14 @@ export function ProxyFrame(props: { url: string }) {
   // pass the URL encoded with encodeURIcomponent
   const localProxy = localStorage.getItem("proxy") || "automatic";
   const proxyMode = localStorage.getItem("proxyMode") || "embed";
+  const searchEngine =
+    localStorage.getItem("searchEngine") || "https://google.com/search?q=%s";
 
   const [ProxiedUrl, setProxiedUrl] = useState<string | undefined>(undefined);
 
   let decodedUrl = decodeURIComponent(props.url);
   //attempt to convert to a valid url
-  decodedUrl = searchUtil(decodedUrl, "https://google.com/search?q=%s");
+  decodedUrl = searchUtil(decodedUrl, searchEngine);
 
   let proxyRef;
 
@@ -111,8 +114,8 @@ export function ProxyFrame(props: { url: string }) {
         originalTitle={t("titles.home")}
         originalFavicon="/logo.png"
       />
-      {proxyMode === "direct" && <h1>Loading {localProxy}...</h1>}
-      {proxyMode === "aboutblank" && <h1>Loading {localProxy}...</h1>}
+      {proxyMode === "direct" && <LoadSuspense />}
+      {proxyMode === "aboutblank" && <LoadSuspense />}
       {proxyMode === "embed" && <Iframe url={ProxiedUrl} />}
     </div>
   );

src/pages/Settings/Proxy.tsx

@@ -19,6 +19,12 @@ const Proxy = ({ id, active }) => {
     { id: "aboutblank", label: t("settings.proxymodes.aboutblank") }
   ];
 
+  const searchEngines = [
+    { id: "https://google.com/search?q=%s", label: "Google" },
+    { id: "https://bing.com/search?q=%s", label: "Bing" },
+    { id: "https://duckduckgo.com/?q=%s", label: "DuckDuckGo" }
+  ];
+
   return (
     <motion.div
       role="tabpanel"
@@ -30,7 +36,7 @@ const Proxy = ({ id, active }) => {
     >
       <motion.div
         variants={settingsPageVariant}
-        className="content-card justify-center flex w-full flex-row flex-wrap gap-4"
+        className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
       >
         <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
           <div class="p-2 text-3xl">{t("settings.proxy.title")}</div>
@@ -46,6 +52,15 @@ const Proxy = ({ id, active }) => {
             refresh={false}
           />
         </div>
+        <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+          <div class="p-2 text-3xl">{t("settings.search.title")}</div>
+          <div class="text-md p-4">{t("settings.search.subtitle")}</div>
+          <Dropdown
+            storageKey="searchEngine"
+            options={searchEngines}
+            refresh={false}
+          />
+        </div>
       </motion.div>
     </motion.div>
   );