Added translation support to Svelte

8 files changed, 148 insertions, 102 deletions

diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte
index 8b0d3c54..dfafe1f0 100644
--- a/src/pages/options_src/App.svelte
+++ b/src/pages/options_src/App.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import General from "./General/General.svelte"
   import utils from "../../assets/javascripts/utils.js"
@@ -67,12 +67,15 @@
       cssVariables = light
     }
   }
+
+  const dir = ["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage()) ? "rtl" : "ltr"
+  document.body.dir = dir
 </script>
 
 {#if _options && _config}
   <div
-    class="main"
-    dir="auto"
+    class={dir}
+    {dir}
     style="
     --text: {cssVariables.text};
     --bg-main: {cssVariables.bgMain};
diff --git a/src/pages/options_src/General/Exceptions.svelte b/src/pages/options_src/General/Exceptions.svelte
index 4ef5591b..7315877d 100644
--- a/src/pages/options_src/General/Exceptions.svelte
+++ b/src/pages/options_src/General/Exceptions.svelte
@@ -1,4 +1,6 @@
 <script>
+  const browser = window.browser || window.chrome
+
   import Row from "../../components/Row.svelte"
   import Select from "../../components/Select.svelte"
   import AddIcon from "../../icons/AddIcon.svelte"
@@ -54,10 +56,10 @@
   }
 </script>
 
-<div class="block block-option">
-  <Row>
-    <Label>Excluded from redirecting</Label>
-  </Row>
+<Row>
+  <Label>{browser.i18n.getMessage("excludeFromRedirecting") || "Excluded from redirecting"}</Label>
+</Row>
+<div dir="ltr">
   <Row>
     <div>
       <Input
diff --git a/src/pages/options_src/General/General.svelte b/src/pages/options_src/General/General.svelte
index 2cf65285..732ad83b 100644
--- a/src/pages/options_src/General/General.svelte
+++ b/src/pages/options_src/General/General.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import Exceptions from "./Exceptions.svelte"
   import SettingsButtons from "./SettingsButtons.svelte"
@@ -26,12 +26,12 @@
 
 <div>
   <Row>
-    <Label>Theme</Label>
+    <Label>{browser.i18n.getMessage("theme") || "Theme"}</Label>
     <Select
       values={[
-        { value: "detect", name: "Auto" },
-        { value: "light", name: "Light" },
-        { value: "dark", name: "Dark" },
+        { value: "detect", name: browser.i18n.getMessage("auto") || "Auto" },
+        { value: "light", name: browser.i18n.getMessage("light") || "Light" },
+        { value: "dark", name: browser.i18n.getMessage("dark") || "Dark" },
       ]}
       value={_options.theme}
       onChange={e => {
@@ -43,13 +43,13 @@
   </Row>
 
   <Row>
-    <Label>Fetch public instances</Label>
+    <Label>{browser.i18n.getMessage("fetchPublicInstances") || "Fetch public instances"}</Label>
     <Select
       value={_options.fetchInstances}
       values={[
         { value: "github", name: "GitHub" },
         { value: "codeberg", name: "Codeberg" },
-        { value: "disable", name: "Disable" },
+        { value: "disable", name: browser.i18n.getMessage("disable") || "Disable" },
       ]}
       onChange={e => {
         _options.fetchInstances = e.target.options[e.target.options.selectedIndex].value
@@ -60,7 +60,7 @@
   </Row>
 
   <Row>
-    <Label>Redirect Only in Incognito</Label>
+    <Label>{browser.i18n.getMessage("redirectOnlyInIncognito") || "Redirect Only in Incognito"}</Label>
     <Checkbox
       checked={_options.redirectOnlyInIncognito}
       onChange={e => {
@@ -71,7 +71,7 @@
   </Row>
 
   <Row>
-    <Label>Bookmarks menu</Label>
+    <Label>{browser.i18n.getMessage("bookmarksMenu") || "Bookmarks menu"}</Label>
     <Checkbox bind:checked={bookmarksPermission} />
   </Row>
 
diff --git a/src/pages/options_src/General/SettingsButtons.svelte b/src/pages/options_src/General/SettingsButtons.svelte
index c37a3702..3ea46a2d 100644
--- a/src/pages/options_src/General/SettingsButtons.svelte
+++ b/src/pages/options_src/General/SettingsButtons.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import { onDestroy } from "svelte"
   import Button from "../../components/Button.svelte"
@@ -85,8 +85,8 @@
 
 <div class="buttons">
   <Button on:click={() => importSettingsInput.click()} disabled={disableButtons}>
-    <ImportIcon />
-    <x data-localise="__MSG_importSettings__">Import Settings</x>
+    <ImportIcon class="margin margin_{document.body.dir}" />
+    <x data-localise="__MSG_importSettings__">{browser.i18n.getMessage("importSettings") || "Import Settings"}</x>
   </Button>
   <input
     type="file"
@@ -97,22 +97,33 @@
   />
 
   <Button on:click={exportSettings} disabled={disableButtons}>
-    <ExportIcon />
-    <x data-localise="__MSG_exportSettings__">Export Settings</x>
+    <ExportIcon class="margin margin_{document.body.dir}" />
+    <x data-localise="__MSG_exportSettings__">{browser.i18n.getMessage("exportSettings") || "Export Settings"}</x>
   </Button>
 
   <Button on:click={exportSettingsSync} disabled={disableButtons}>
-    <ExportIcon />
+    <ExportIcon class="margin margin_{document.body.dir}" />
     <x>Export Settings to Sync</x>
   </Button>
 
   <Button on:click={importSettingsSync} disabled={disableButtons}>
-    <ImportIcon />
-    <x>Import Settings from Sync</x>
+    <ImportIcon class="margin margin_{document.body.dir}" />
+    <x>{browser.i18n.getMessage("importSettingsFromSync") || "Import Settings from Sync"}</x>
   </Button>
 
   <Button on:click={resetSettings} disabled={disableButtons}>
-    <ResetIcon />
-    <x>Reset Settings</x>
+    <ResetIcon class="margin margin_{document.body.dir}" />
+    <x>{browser.i18n.getMessage("resetSettings") || "Reset Settings"}</x>
   </Button>
 </div>
+
+<style>
+  :global(.margin) {
+    margin-right: 10px;
+    margin-left: 0;
+  }
+  :global(.margin_rtl) {
+    margin-right: 0;
+    margin-left: 10px;
+  }
+</style>
diff --git a/src/pages/options_src/Services/Instances.svelte b/src/pages/options_src/Services/Instances.svelte
index e62d410d..862bbf7e 100644
--- a/src/pages/options_src/Services/Instances.svelte
+++ b/src/pages/options_src/Services/Instances.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import Button from "../../components/Button.svelte"
   import AddIcon from "../../icons/AddIcon.svelte"
@@ -28,7 +28,6 @@
   let blacklist
   let redirects
 
-  $: serviceOptions = _options[selectedService]
   $: serviceConf = _config.services[selectedService]
 
   let allInstances = []
@@ -103,18 +102,18 @@
 
 {#if serviceConf.frontends[selectedFrontend].instanceList && redirects && blacklist}
   <hr />
-  <div dir="ltr">
-    <div class="ping">
-      <Button on:click={pingInstances}>
-        <PingIcon />
-        Ping Instances
-      </Button>
-    </div>
 
-    <Row>
-      <Label>Add your favorite instances</Label>
-    </Row>
+  <div class="ping">
+    <Button on:click={pingInstances}>
+      <PingIcon class="margin margin_{document.body.dir}" />
+      {browser.i18n.getMessage("pingInstances") || "Ping Instances"}
+    </Button>
+  </div>
 
+  <Row>
+    <Label>{browser.i18n.getMessage("addYourFavoriteInstances") || "Add your favorite instances"}</Label>
+  </Row>
+  <div dir="ltr">
     <Row>
       <Input
         bind:value={addInstanceValue}
@@ -231,4 +230,13 @@
   a:hover {
     text-decoration: underline;
   }
+
+  :global(.margin) {
+    margin-right: 10px;
+    margin-left: 0;
+  }
+  :global(.margin_rtl) {
+    margin-right: 0;
+    margin-left: 10px;
+  }
 </style>
diff --git a/src/pages/options_src/Services/RedirectType.svelte b/src/pages/options_src/Services/RedirectType.svelte
index 11044080..29c169bc 100644
--- a/src/pages/options_src/Services/RedirectType.svelte
+++ b/src/pages/options_src/Services/RedirectType.svelte
@@ -1,4 +1,6 @@
 <script>
+  const browser = window.browser || window.chrome
+
   import { onDestroy } from "svelte"
   import SvelteSelect from "svelte-select"
   import { options, config } from "../stores"
@@ -26,9 +28,9 @@
   let values
   $: if (serviceConf.frontends[frontendName].embeddable) {
     values = [
-      { value: "both", name: "Both" },
-      { value: "sub_frame", name: "Only Embedded" },
-      { value: "main_frame", name: "Only Not Embedded" },
+      { value: "both", name: browser.i18n.getMessage("both") || "Both" },
+      { value: "sub_frame", name: browser.i18n.getMessage("onlyEmbedded") || "Only Embedded" },
+      { value: "main_frame", name: browser.i18n.getMessage("onlyNotEmbedded") || "Only Not Embedded" },
     ]
   } else if (
     serviceConf.frontends[frontendName].desktopApp &&
@@ -63,7 +65,7 @@
 </script>
 
 <Row>
-  <Label>Redirect Type</Label>
+  <Label>{browser.i18n.getMessage("redirectType") || "Redirect Type"}</Label>
   <Select
     value={serviceOptions.redirectType}
     onChange={e => {
@@ -76,7 +78,7 @@
 
 {#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"}
   <Row>
-    <Label>Embed Frontend</Label>
+    <Label>{browser.i18n.getMessage("embedFrontend") || "Embed Frontend"}</Label>
     <SvelteSelect
       clearable={false}
       class="svelte_select"
diff --git a/src/pages/options_src/Services/Services.svelte b/src/pages/options_src/Services/Services.svelte
index 9c4e6c97..4e719447 100644
--- a/src/pages/options_src/Services/Services.svelte
+++ b/src/pages/options_src/Services/Services.svelte
@@ -1,4 +1,6 @@
 <script>
+  const browser = window.browser || window.chrome
+
   import Row from "../../components/Row.svelte"
   import Label from "../../components/Label.svelte"
   import Select from "../../components/Select.svelte"
@@ -33,32 +35,34 @@
       Service:
       <a href={serviceConf.url} target="_blank" rel="noopener noreferrer">{serviceConf.url}</a>
     </Label>
-    <SvelteSelect
-      clearable={false}
-      class="svelte_select"
-      value={selectedService}
-      on:change={e => (selectedService = e.detail.value)}
-      items={[
-        ...Object.entries(_config.services).map(([serviceKey, service]) => {
-          return { value: serviceKey, label: service.name }
-        }),
-      ]}
-    >
-      <div class="slot" slot="item" let:item>
-        <ServiceIcon details={item} />
-        {item.label}
-      </div>
-      <div class="slot" slot="selection" let:selection>
-        <ServiceIcon details={selection} />
-        {selection.label}
-      </div>
-    </SvelteSelect>
+    <div dir="ltr">
+      <SvelteSelect
+        clearable={false}
+        class="svelte_select"
+        value={selectedService}
+        on:change={e => (selectedService = e.detail.value)}
+        items={[
+          ...Object.entries(_config.services).map(([serviceKey, service]) => {
+            return { value: serviceKey, label: service.name }
+          }),
+        ]}
+      >
+        <div class="slot" slot="item" let:item>
+          <ServiceIcon details={item} />
+          {item.label}
+        </div>
+        <div class="slot" slot="selection" let:selection>
+          <ServiceIcon details={selection} />
+          {selection.label}
+        </div>
+      </SvelteSelect>
+    </div>
   </Row>
 
   <hr />
 
   <Row>
-    <Label>Enable</Label>
+    <Label>{browser.i18n.getMessage("enable") || "Enable"}</Label>
     <Checkbox
       checked={serviceOptions.enabled}
       onChange={e => {
@@ -70,7 +74,7 @@
 
   <div style={!serviceOptions.enabled && "pointer-events: none;opacity: 0.4;user-select: none;"}>
     <Row>
-      <Label>Show in popup</Label>
+      <Label>{browser.i18n.getMessage("showInPopup") || "Show in popup"}</Label>
       <Checkbox
         checked={_options.popupServices.includes(selectedService)}
         onChange={e => {
@@ -87,42 +91,44 @@
 
     <Row>
       <Label>
-        Frontend:
+        {browser.i18n.getMessage("frontend") || "Frontend"}:
         <a href={frontendWebsite} target="_blank" rel="noopener noreferrer">
           {frontendWebsite}
         </a>
       </Label>
-
-      <SvelteSelect
-        clearable={false}
-        class="svelte_select"
-        value={serviceOptions.frontend}
-        on:change={e => {
-          serviceOptions.frontend = e.detail.value
-          options.set(_options)
-        }}
-        items={[
-          ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({
-            value: frontendId,
-            label: frontend.name,
-          })),
-        ]}
-      >
-        <div class="slot" slot="item" let:item>
-          <FrontendIcon details={item} {selectedService} />
-          {item.label}
-        </div>
-        <div class="slot" slot="selection" let:selection>
-          <FrontendIcon details={selection} {selectedService} />
-          {selection.label}
-        </div>
-      </SvelteSelect>
+      <div dir="ltr">
+        <SvelteSelect
+          clearable={false}
+          dir="ltr"
+          class="svelte_select"
+          value={serviceOptions.frontend}
+          on:change={e => {
+            serviceOptions.frontend = e.detail.value
+            options.set(_options)
+          }}
+          items={[
+            ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({
+              value: frontendId,
+              label: frontend.name,
+            })),
+          ]}
+        >
+          <div class="slot" slot="item" let:item>
+            <FrontendIcon details={item} {selectedService} />
+            {item.label}
+          </div>
+          <div class="slot" slot="selection" let:selection>
+            <FrontendIcon details={selection} {selectedService} />
+            {selection.label}
+          </div>
+        </SvelteSelect>
+      </div>
     </Row>
 
     <RedirectType {selectedService} />
 
     <Row>
-      <Label>Unsupported embeds handling</Label>
+      <Label>{browser.i18n.getMessage("unsupportedIframesHandling") || "Unsupported embeds handling"}</Label>
       <Select
         value={serviceOptions.unsupportedUrls}
         onChange={e => {
@@ -130,8 +136,8 @@
           options.set(_options)
         }}
         values={[
-          { value: "bypass", name: "Bypass" },
-          { value: "block", name: "Block" },
+          { value: "bypass", name: browser.i18n.getMessage("bypass") || "Bypass" },
+          { value: "block", name: browser.i18n.getMessage("block") || "Block" },
         ]}
       />
     </Row>
@@ -139,13 +145,14 @@
     {#if selectedService == "search"}
       <Row>
         <Label>
-          Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click
+          {@html browser.i18n.getMessage("searchHint") ||
+            `Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click
           <a
             href="https://libredirect.github.io/docs.html#search_engine_chromium"
             target="_blank"
             rel="noopener noreferrer"
             >here
-          </a>.
+          </a>.`}
         </Label>
       </Row>
     {/if}
@@ -184,8 +191,10 @@
     justify-content: start;
     align-items: center;
   }
+
   :global(.svelte_select img, .svelte_select svg) {
     margin-right: 10px;
+    margin-left: 0;
     height: 26px;
     width: 26px;
     color: var(--text);
diff --git a/src/pages/options_src/Sidebar.svelte b/src/pages/options_src/Sidebar.svelte
index 4a808268..fb515f53 100644
--- a/src/pages/options_src/Sidebar.svelte
+++ b/src/pages/options_src/Sidebar.svelte
@@ -1,4 +1,6 @@
 <script>
+  const browser = window.browser || window.chrome
+
   import { page } from "./stores"
   import GeneralIcon from "../icons/GeneralIcon.svelte"
   import ServicesIcon from "../icons/ServicesIcon.svelte"
@@ -7,16 +9,16 @@
 
 <div>
   <a href="#general" on:click={() => page.set("general")} style={$page == "general" && "color: var(--active);"}>
-    <GeneralIcon style="margin-right: 5px" />
-    <span data-localise="__MSG_general__">General</span>
+    <GeneralIcon class="margin margin_{document.body.dir}" />
+    <span data-localise="__MSG_general__">{browser.i18n.getMessage("general") || "General"}</span>
   </a>
   <a href="#services" on:click={() => page.set("services")} style={$page == "services" && "color: var(--active);"}>
-    <ServicesIcon style="margin-right: 5px" />
-    <span data-localise="__MSG_services__">Services</span>
+    <ServicesIcon class="margin margin_{document.body.dir}" />
+    <span data-localise="__MSG_services__">{browser.i18n.getMessage("general") || "Services"}</span>
   </a>
   <a href="https://libredirect.github.io" target="_blank" rel="noopener noreferrer">
-    <AboutIcon style="margin-right: 5px" />
-    <span data-localise="__MSG_about__">About</span>
+    <AboutIcon class="margin margin_{document.body.dir}" />
+    <span data-localise="__MSG_about__">{browser.i18n.getMessage("about") || "About"}</span>
   </a>
 </div>
 
@@ -54,4 +56,13 @@
       margin: 5px;
     }
   }
+
+  :global(.margin) {
+    margin-right: 5px;
+    margin-left: 0;
+  }
+  :global(.margin_rtl) {
+    margin-right: 0;
+    margin-left: 5px;
+  }
 </style>