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

@@ -0,0 +1,3 @@
+{
+    "smile": "meowbalt, cobalt's black and white cat mascot, smiling and loafing."
+}

web/i18n/en/a11y/save.json

@@ -0,0 +1,3 @@
+{
+    "linkArea": "link input area"
+}

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"
+}

web/i18n/ru/a11y/meowbalt.json

@@ -0,0 +1,3 @@
+{
+    "smile": "мяубальт, чёрно-белый маскот кобальта. батонится, сложа лапы под себя, и улыбается."
+}

web/i18n/ru/a11y/save.json

@@ -0,0 +1,3 @@
+{
+    "linkArea": "зона вставки ссылки"
+}

web/i18n/ru/save.json

@@ -0,0 +1,8 @@
+{
+    "paste": "вставить",
+    "pasteAndDownload": "вставить и скачать",
+    "auto": "авто",
+    "audio": "аудио",
+    "mute": "без звука",
+    "inputPlaceholder": "вставь ссылку сюда"
+}

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;

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;

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>

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,
+        },
     ],
 };