From 5ced7b5388d735575b0a474e2d8c76699625b623 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 3 Jul 2024 13:52:27 +0600
Subject: [PATCH] web/save: move strings to i18n & translate to ru

also fixed line break in switcher for future lengthier translations (german, for example)
---
 web/i18n/en/a11y/meowbalt.json                |  3 ++
 web/i18n/en/a11y/save.json                    |  3 ++
 web/i18n/en/save.json                         |  8 ++++
 web/i18n/ru/a11y/meowbalt.json                |  3 ++
 web/i18n/ru/a11y/save.json                    |  3 ++
 web/i18n/ru/save.json                         |  8 ++++
 web/src/components/buttons/Switcher.svelte    |  4 ++
 .../components/meowbalt/MeowbaltLoaf.svelte   |  7 ++-
 web/src/components/save/Omnibox.svelte        | 16 ++++---
 web/src/lib/i18n/translations.ts              | 43 +++++++++++++++++++
 10 files changed, 90 insertions(+), 8 deletions(-)
 create mode 100644 web/i18n/en/a11y/meowbalt.json
 create mode 100644 web/i18n/en/a11y/save.json
 create mode 100644 web/i18n/en/save.json
 create mode 100644 web/i18n/ru/a11y/meowbalt.json
 create mode 100644 web/i18n/ru/a11y/save.json
 create mode 100644 web/i18n/ru/save.json

diff --git a/web/i18n/en/a11y/meowbalt.json b/web/i18n/en/a11y/meowbalt.json
new file mode 100644
index 00000000..fa9ee6d6
--- /dev/null
+++ b/web/i18n/en/a11y/meowbalt.json
@@ -0,0 +1,3 @@
+{
+    "smile": "meowbalt, cobalt's black and white cat mascot, smiling and loafing."
+}
diff --git a/web/i18n/en/a11y/save.json b/web/i18n/en/a11y/save.json
new file mode 100644
index 00000000..93f66bbc
--- /dev/null
+++ b/web/i18n/en/a11y/save.json
@@ -0,0 +1,3 @@
+{
+    "linkArea": "link input area"
+}
diff --git a/web/i18n/en/save.json b/web/i18n/en/save.json
new file mode 100644
index 00000000..f3b6e6c5
--- /dev/null
+++ b/web/i18n/en/save.json
@@ -0,0 +1,8 @@
+{
+    "paste": "paste",
+    "pasteAndDownload": "paste and download",
+    "auto": "auto",
+    "audio": "audio",
+    "mute": "mute",
+    "inputPlaceholder": "paste the link here"
+}
diff --git a/web/i18n/ru/a11y/meowbalt.json b/web/i18n/ru/a11y/meowbalt.json
new file mode 100644
index 00000000..59289062
--- /dev/null
+++ b/web/i18n/ru/a11y/meowbalt.json
@@ -0,0 +1,3 @@
+{
+    "smile": "мяубальт, чёрно-белый маскот кобальта. батонится, сложа лапы под себя, и улыбается."
+}
diff --git a/web/i18n/ru/a11y/save.json b/web/i18n/ru/a11y/save.json
new file mode 100644
index 00000000..0123401a
--- /dev/null
+++ b/web/i18n/ru/a11y/save.json
@@ -0,0 +1,3 @@
+{
+    "linkArea": "зона вставки ссылки"
+}
diff --git a/web/i18n/ru/save.json b/web/i18n/ru/save.json
new file mode 100644
index 00000000..f751a63d
--- /dev/null
+++ b/web/i18n/ru/save.json
@@ -0,0 +1,8 @@
+{
+    "paste": "вставить",
+    "pasteAndDownload": "вставить и скачать",
+    "auto": "авто",
+    "audio": "аудио",
+    "mute": "без звука",
+    "inputPlaceholder": "вставь ссылку сюда"
+}
diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte
index 499dfa5a..8deb0587 100644
--- a/web/src/components/buttons/Switcher.svelte
+++ b/web/src/components/buttons/Switcher.svelte
@@ -17,6 +17,10 @@
         border-radius: var(--border-radius);
     }
 
+    .switcher :global(.button) {
+        white-space: pre;
+    }
+
     .switcher:not(.big) :global(.button:first-child) {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
diff --git a/web/src/components/meowbalt/MeowbaltLoaf.svelte b/web/src/components/meowbalt/MeowbaltLoaf.svelte
index 36ff14af..908b1ec8 100644
--- a/web/src/components/meowbalt/MeowbaltLoaf.svelte
+++ b/web/src/components/meowbalt/MeowbaltLoaf.svelte
@@ -1,10 +1,15 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+</script>
+
 <img
     id="meowbalt-loaf"
     src="/meowbalt/smile.png"
     height="152"
     width="141"
-    alt="black and white cat smiling and loafing"
+    alt={$t("a11y.meowbalt.smile")}
 />
+
 <style>
     #meowbalt-loaf {
         display: block;
diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index 59e98b5a..2b248562 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import { SvelteComponent, tick } from "svelte";
 
+    import { t } from "$lib/i18n/translations";
+
     import IconLink from "@tabler/icons-svelte/IconLink.svelte";
 
     import ClearButton from "$components/save/buttons/ClearButton.svelte";
@@ -60,8 +62,8 @@
             autocomplete="off"
             autocapitalize="off"
             maxlength="256"
-            placeholder="paste the link here"
-            aria-label="link input area"
+            placeholder={$t("save.inputPlaceholder")}
+            aria-label={$t("a11y.save.linkArea")}
             data-form-type="other"
         />
 
@@ -76,19 +78,19 @@
     <div id="action-container">
         <Switcher>
             <SettingsButton settingContext="save" settingId="downloadMode" settingValue="auto">
-                <IconSparkles /> auto
+                <IconSparkles /> {$t("save.auto")}
             </SettingsButton>
             <SettingsButton settingContext="save" settingId="downloadMode" settingValue="audio">
-                <IconMusic /> audio
+                <IconMusic /> {$t("save.audio")}
             </SettingsButton>
             <SettingsButton settingContext="save" settingId="downloadMode" settingValue="mute">
-                <IconMute /> mute
+                <IconMute /> {$t("save.mute")}
             </SettingsButton>
         </Switcher>
         <ActionButton id="paste" click={pasteClipboard}>
             <IconClipboard />
-            <span id="paste-desktop-text">paste</span>
-            <span id="paste-mobile-text">paste and download</span>
+            <span id="paste-desktop-text">{$t("save.paste")}</span>
+            <span id="paste-mobile-text">{$t("save.pasteAndDownload")}</span>
         </ActionButton>
     </div>
 </div>
diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index cd02a8a7..03814a1b 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -25,6 +25,28 @@ export const config: Config = {
                 await import(`$i18n/en/a11y/tabs.json`)
             ).default,
         },
+        {
+            locale: 'en',
+            key: 'save',
+            loader: async () => (
+                await import(`$i18n/en/save.json`)
+            ).default,
+        },
+        {
+            locale: 'en',
+            key: 'a11y.save',
+            loader: async () => (
+                await import(`$i18n/en/a11y/save.json`)
+            ).default,
+        },
+        {
+            locale: 'en',
+            key: 'a11y.meowbalt',
+            loader: async () => (
+                await import(`$i18n/en/a11y/meowbalt.json`)
+            ).default,
+        },
+
         {
             locale: 'ru',
             key: 'tabs',
@@ -39,6 +61,27 @@ export const config: Config = {
                 await import(`$i18n/ru/a11y/tabs.json`)
             ).default,
         },
+        {
+            locale: 'ru',
+            key: 'save',
+            loader: async () => (
+                await import(`$i18n/ru/save.json`)
+            ).default,
+        },
+        {
+            locale: 'ru',
+            key: 'a11y.save',
+            loader: async () => (
+                await import(`$i18n/ru/a11y/save.json`)
+            ).default,
+        },
+        {
+            locale: 'ru',
+            key: 'a11y.meowbalt',
+            loader: async () => (
+                await import(`$i18n/ru/a11y/meowbalt.json`)
+            ).default,
+        },
     ],
 };