From 6c6c6626cfa8040eb2e3a49348d6e8755aba5952 Mon Sep 17 00:00:00 2001
From: Riftriot <slushziesrazaxc@gmail.com>
Date: Thu, 4 Jan 2024 14:31:52 -0600
Subject: [PATCH] Localize bare switcher and add button

---
 .env                             |  1 +
 src/locales/en.json              |  6 ++++--
 src/locales/es.json              |  5 +++++
 src/locales/ja.json              |  5 +++++
 src/pages/Settings/BareInput.tsx | 29 +++++++++++++++++++----------
 src/pages/Settings/Proxy.tsx     |  8 ++++----
 6 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 .env

diff --git a/.env b/.env
new file mode 100644
index 0000000..9d26a4d
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+test=TESTTTT
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index f046963..fc5a8fd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -52,11 +52,13 @@
     },
     "bare": {
       "title": "Bare Server",
-      "subtitle": "Enter the URL of your bare server"
+      "subtitle": "Enter the URL of your bare server",
+      "select": "Select"
     },
     "theme": {
       "title": "Theme",
-      "subtitle": "Choose a theme so your eyes don't hate us"
+      "subtitle": "Choose a theme so your eyes don't hate us",
+      "select": "Select"
     }
   },
   "titles": {
diff --git a/src/locales/es.json b/src/locales/es.json
index a50f39a..98b59e9 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -50,6 +50,11 @@
       "title": "Buscador",
       "subtitle": "Elige tu motor de búsqueda."
     },
+    "bare": {
+      "title": "Bare Server",
+      "subtitle": "Pon tu url de tu bare server",
+      "select": "Seleccionar"
+    },
     "theme": {
       "title": "Mirar",
       "subtitle": "Elige una mirada para que tus ojos no nos odienn"
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 8e286e5..e78bf48 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -50,6 +50,11 @@
       "title": "検索エンジン",
       "subtitle": "ネビュラの検索エンジンを選択してください"
     },
+    "bare": {
+      "title": "Bare サーバー",
+      "subtitle": "Bare サーバー URL を入力してください",
+      "select": "選択する"
+    },
     "theme": {
       "title": "テーマ",
       "subtitle": "目が嫌いにならないようにテーマを選んでください"
diff --git a/src/pages/Settings/BareInput.tsx b/src/pages/Settings/BareInput.tsx
index c25ed8d..4a46769 100644
--- a/src/pages/Settings/BareInput.tsx
+++ b/src/pages/Settings/BareInput.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "preact/hooks";
 import { set } from "../../util/IDB";
 import { uninstallServiceWorkers } from "../../util/SWHelper";
+import { useTranslation } from "react-i18next";
 
 interface BareInputProps {
   placeholder: string;
@@ -8,6 +9,7 @@ interface BareInputProps {
 }
 
 function BareInput(props: BareInputProps) {
+  const { t } = useTranslation();
   const value = localStorage.getItem(props.storageKey) || "/bare/";
   const [inputValue, setInputValue] = useState(value);
   function validateUrl(url: string) {
@@ -28,22 +30,29 @@ function BareInput(props: BareInputProps) {
     }
     return finalUrl;
   }
-  function handleChange(event: any) {
-    const url = validateUrl(event.target.value);
-    setInputValue(event.target.value);
+  function handleChange() {
+    const url = validateUrl((document.getElementById("input") as HTMLInputElement).value);
+    setInputValue((document.getElementById("input") as HTMLInputElement).value);
     set(props.storageKey, url);
     localStorage.setItem(props.storageKey, url);
     uninstallServiceWorkers();
     window.location.reload();
   }
   return (
-    <input
-      type="text"
-      placeholder={props.placeholder}
-      value={inputValue}
-      onBlur={handleChange}
-      className="font-roboto flex h-14 w-56 flex-row rounded-2xl border border-input-border-color bg-input p-4 text-center text-xl"
-    />
+    <div className="flex flex-col items-center">
+      <input
+        type="text"
+        placeholder={props.placeholder}
+        value={inputValue}
+        id="input"
+        className="font-roboto flex h-14 w-56 flex-row rounded-2xl border border-input-border-color bg-input p-4 text-center text-xl"
+      />
+      <div className="font-roboto items-center justify-center flex h-4 w-24 flex-row rounded-2xl border border-input-border-color bg-input p-4 text-center text-xl" 
+      onClick={handleChange}
+      >
+        {t("settings.bare.select")}
+      </div>
+    </div>
   );
 }
 
diff --git a/src/pages/Settings/Proxy.tsx b/src/pages/Settings/Proxy.tsx
index 2b948cd..25edd95 100644
--- a/src/pages/Settings/Proxy.tsx
+++ b/src/pages/Settings/Proxy.tsx
@@ -39,7 +39,7 @@ const Proxy = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
       >
-        <div className="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 className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.proxy.title")}
           </div>
@@ -48,7 +48,7 @@ const Proxy = ({ id, active }) => {
           </div>
           <Dropdown storageKey="proxy" options={engines} refresh={false} />
         </div>
-        <div className="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 className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.proxymodes.title")}
           </div>
@@ -61,7 +61,7 @@ const Proxy = ({ id, active }) => {
             refresh={false}
           />
         </div>
-        <div className="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 className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.search.title")}
           </div>
@@ -74,7 +74,7 @@ const Proxy = ({ id, active }) => {
             refresh={false}
           />
         </div>
-        <div className="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 className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.bare.title")}
           </div>