web: move all strings to i18n & improve a11y

- omnibox is now fully usable with a screen reader
- back button is now interpreted as such
- subtext now accepts line breaks

web/src/components/save/buttons/ClearButton.svelte

@@ -1,9 +1,11 @@
 <script>
-    export let click;
+    import { t } from "$lib/i18n/translations";
     import IconX from '@tabler/icons-svelte/IconX.svelte';
+
+    export let click;
 </script>
 
-<button id="clear-button" on:click={click}>
+<button id="clear-button" on:click={click} aria-label={$t("a11y.save.clearInput")}>
     <IconX color="var(--secondary)" size="16px"/>
 </button>
 

web/src/components/save/buttons/DownloadButton.svelte

@@ -1,46 +1,53 @@
 <script lang="ts">
-    import '@fontsource-variable/noto-sans-mono';
+    import "@fontsource-variable/noto-sans-mono";
 
     import API from "$lib/api";
-    import { device } from '$lib/device';
+    import { device } from "$lib/device";
+    import { t } from "$lib/i18n/translations";
 
     export let url: string;
 
-    $: buttonText = '>>';
+    $: buttonText = ">>";
+    $: buttonAltText = $t('a11y.save.download');
     $: isDisabled = false;
 
     const changeDownloadButton = (state: string) => {
         isDisabled = true;
-        switch(state) {
+        switch (state) {
             case "think":
-                buttonText = '...';
+                buttonText = "...";
+                buttonAltText = $t('a11y.save.downloadThink');
                 break;
             case "check":
-                buttonText = '..?';
+                buttonText = "..?";
+                buttonAltText = $t('a11y.save.downloadCheck');
                 break;
             case "done":
-                buttonText = '>>>';
+                buttonText = ">>>";
+                buttonAltText = $t('a11y.save.downloadDone');
                 break;
             case "error":
-                buttonText = '!!';
+                buttonText = "!!";
+                buttonAltText = $t('a11y.save.downloadError');
                 break;
         }
-    }
+    };
 
     const restoreDownloadButton = () => {
         setTimeout(() => {
-            buttonText = '>>';
+            buttonText = ">>";
             isDisabled = false;
-        }, 2500)
-    }
+            buttonAltText = $t('a11y.save.download');
+        }, 2500);
+    };
 
     const downloadFile = (url: string) => {
         if (device.is.iOS) {
             return navigator?.share({ url }).catch(() => {});
         } else {
-            return window.open(url, '_blank');
+            return window.open(url, "_blank");
         }
-    }
+    };
 
     // alerts are temporary, we don't have an error popup yet >_<
     export const download = async (link: string) => {
@@ -52,7 +59,7 @@
             changeDownloadButton("error");
             restoreDownloadButton();
 
-            return alert("couldn't access the api")
+            return alert("couldn't access the api");
         }
 
         if (response.status === "error" || response.status === "rate-limit") {
@@ -89,7 +96,12 @@
     };
 </script>
 
-<button id="download-button" disabled={isDisabled} on:click={() => download(url)}>
+<button
+    id="download-button"
+    disabled={isDisabled}
+    on:click={() => download(url)}
+    aria-label={buttonAltText}
+>
     <span id="download-state">{buttonText}</span>
 </button>
 
@@ -120,7 +132,8 @@
 
     #download-state {
         font-size: 24px;
-        font-family: "Noto Sans Mono Variable", "Noto Sans Mono", "IBM Plex Mono", monospace;
+        font-family: "Noto Sans Mono Variable", "Noto Sans Mono",
+            "IBM Plex Mono", monospace;
         font-weight: 400;
 
         text-align: center;

web/src/components/settings/SettingsSection.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
     export let sectionTitle: string;
 </script>
 
 <section id="settings-section">
-    <div id="settings-section-title">{sectionTitle}</div>
+    <div id="settings-section-title">{$t(`settings.section.${sectionTitle}`)}</div>
     <div id="settings-section-categories">
         <slot></slot>
     </div>

web/src/components/settings/SettingsTab.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
+    import { t } from "$lib/i18n/translations";
+
     import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
 
     export let tabName: string;
@@ -20,7 +22,7 @@
         <div class="tab-icon" style="background: var(--{iconColor})">
             <slot></slot>
         </div>
-        <span>{tabName}</span>
+        <span>{$t(`settings.page.${tabName}`)}</span>
     </div>
     <div class="settings-tab-chevron">
         <IconChevronRight />

web/src/components/sidebar/CobaltLogo.svelte

@@ -13,6 +13,7 @@
         align-items: center;
         padding: calc(var(--padding) * 2 - 2px);
     }
+
     @media screen and (max-width: 535px) {
         #cobalt-logo {
             display: none;