add open in settings (no functionality)

src/locales/en.json

@@ -37,6 +37,13 @@
       "japanese": "Japanese",
       "english": "English",
       "spanish": "Spanish"
+    },
+    "proxymodes": {
+      "title": "Open in",
+      "subtitle": "Choose how to open your sites",
+      "embed": "Embed",
+      "direct": "Direct",
+      "aboutblank": "About:Blank"
     }
   }
 }

src/locales/es.json

@@ -37,6 +37,13 @@
       "japanese": "Japonés",
       "english": "Inglés",
       "spanish": "Español"
+    },
+    "proxymodes": {
+      "title": "Abrir en",
+      "subtitle": "Elige cómo abrir tus sitios",
+      "embed": "Incrustar",
+      "direct": "Directo",
+      "aboutblank": "About:Blank"
     }
   }
 }

src/locales/ja.json

@@ -37,6 +37,13 @@
       "japanese": "日本語",
       "english": "英語",
       "spanish": "スペイン語"
+    },
+    "proxymodes": {
+      "title": "開く",
+      "subtitle": "サイトを開く方法を選択する",
+      "embed": "埋め込む",
+      "direct": "直接",
+      "aboutblank": "About:Blank"
     }
   }
 }

src/pages/Settings/Proxy.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 
 const Proxy = ({ id, active }) => {
   const { t } = useTranslation();
+
   const engines = [
     { id: "automatic", label: t("settings.proxy.automatic") },
     { id: "ultraviolet", label: "Ultraviolet" },
@@ -12,6 +13,12 @@ const Proxy = ({ id, active }) => {
     { id: "dynamic", label: "Dynamic " + t("settings.proxy.buggyWarning") }
   ];
 
+  const proxyModes = [
+    { id: "embed", label: t("settings.proxymodes.embed") },
+    { id: "direct", label: t("settings.proxymodes.direct") },
+    { id: "aboutblank", label: t("settings.proxymodes.aboutblank") }
+  ];
+
   return (
     <motion.div
       role="tabpanel"
@@ -25,11 +32,16 @@ const Proxy = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex flex-row flex-wrap justify-around"
       >
-        <div class="bg-lighter flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color p-7 text-center">
+        <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>
           <div class="text-md p-4">{t("settings.proxy.subtitle")}</div>
           <Dropdown storageKey="proxy" options={engines} 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.proxymodes.title")}</div>
+          <div class="text-md p-4">{t("settings.proxymodes.subtitle")}</div>
+          <Dropdown storageKey="proxyMode" options={proxyModes} refresh={false} />
+        </div>
       </motion.div>
     </motion.div>
   );