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/routes/settings/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
+    import { t } from "$lib/i18n/translations";
+
     import SettingsTab from "$components/settings/SettingsTab.svelte";
     import SettingsSection from "$components/settings/SettingsSection.svelte";
 
@@ -16,7 +18,7 @@
 
     $: currentPageTitle = $page.url.pathname.split("/").at(-1);
     $: stringPageTitle =
-        currentPageTitle !== "settings" ? `/ ${currentPageTitle}` : "";
+        currentPageTitle !== "settings" ? ` / ${$t(`settings.page.${currentPageTitle}`)}` : "";
 
     $: isMobile = screenWidth <= 750;
     $: isHome = $page.url.pathname === `/settings`;
@@ -24,7 +26,7 @@
 
 <svelte:head>
     <title>
-        cobalt: settings {stringPageTitle}
+        {$t("general.cobalt")}: {$t("tabs.settings")}{stringPageTitle}
     </title>
 </svelte:head>
 
@@ -35,19 +37,26 @@
         <div id="settings-header" class:back-visible={!isHome && isMobile}>
             {#if isMobile}
                 {#if !isHome}
-                    <a class="back-button" href="/settings">
+                    <a
+                        class="back-button"
+                        href="/settings"
+                        role="button"
+                        aria-label={$t("a11y.general.back")}
+                    >
                         <IconChevronLeft />
                     </a>
                 {/if}
                 <h3 id="settings-page-title" aria-level="1">
-                    settings
+                    {$t("tabs.settings")}
                     {#if !isHome}
                         <span class="title-slash"> / </span>
-                        {currentPageTitle}
+                        {$t(`settings.page.${currentPageTitle}`)}
                     {/if}
                 </h3>
             {:else}
-                <h2 id="settings-page-title" aria-level="1">settings</h2>
+                <h2 id="settings-page-title" aria-level="1">
+                    {$t("tabs.settings")}
+                </h2>
             {/if}
         </div>
         <nav id="settings-navigation" class:visible-mobile={isMobile && isHome}>

web/src/routes/settings/general/appearance/+page.svelte

@@ -1,44 +1,54 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    import { themeOptions } from "$lib/types/settings";
+
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
-    import { themeOptions } from "$lib/types/settings";
     import LanguageDropdown from "$components/settings/LanguageDropdown.svelte";
 </script>
 
-<SettingsCategory title="theme">
+<SettingsCategory
+    title={$t("settings.theme")}
+    description={$t("settings.theme.description")}
+>
     <Switcher big={true}>
         {#each themeOptions as value}
-            <SettingsButton settingContext="appearance" settingId="theme" settingValue={value}>
-                {value}
+            <SettingsButton
+                settingContext="appearance"
+                settingId="theme"
+                settingValue={value}
+            >
+                {$t(`settings.theme.${value}`)}
             </SettingsButton>
         {/each}
     </Switcher>
 </SettingsCategory>
 
-<SettingsCategory title="accessibility">
+<SettingsCategory title={$t("settings.accessibility")}>
     <SettingsToggle
         settingContext="accessibility"
         settingId="reduceTransparency"
-        title="reduce visual transparency"
-        description="disables blur effects and reduces transparency of surfaces."
+        title={$t("settings.accessibility.transparency.title")}
+        description={$t("settings.accessibility.transparency.description")}
     />
     <SettingsToggle
         settingContext="accessibility"
         settingId="reduceAnimations"
-        title="reduce animations"
-        description="replaces rapid animations with smooth transitions."
+        title={$t("settings.accessibility.animations.title")}
+        description={$t("settings.accessibility.animations.description")}
     />
 </SettingsCategory>
 
-<SettingsCategory title="language">
+<SettingsCategory title={$t("settings.language")}>
     <LanguageDropdown />
     <SettingsToggle
         settingContext="appearance"
         settingId="autoLanguage"
-        title="use default browser language"
-        description="automatically picks the best language for you. if preferred browser language isn't available, english is used instead."
+        title={$t("settings.language.auto.title")}
+        description={$t("settings.language.auto.description")}
     />
 </SettingsCategory>

web/src/routes/settings/save/audio/+page.svelte

@@ -1,42 +1,42 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    import { audioFormatOptions } from "$lib/types/settings";
+
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
-
-    import { audioFormatOptions } from "$lib/types/settings";
-
-    const audioDescription = `cobalt converts every format but "best", therefore all formats but "best" will be lossy.`;
 </script>
 
 <SettingsCategory
-    title="preferred audio format"
-    description="{audioDescription}"
+    title={$t("settings.audio.format")}
+    description={$t("settings.audio.format.description")}
 >
     <Switcher big={true}>
         {#each audioFormatOptions as value}
             <SettingsButton settingContext="save" settingId="audioFormat" settingValue={value}>
-                {value}
+                {$t(`settings.audio.format.${value}`)}
             </SettingsButton>
         {/each}
     </Switcher>
 
 </SettingsCategory>
 
-<SettingsCategory title="youtube">
+<SettingsCategory title={$t("settings.audio.youtube.dub")}>
     <SettingsToggle
         settingContext="save"
         settingId="youtubeDubBrowserLang"
-        title="use browser language for dubbed videos"
-        description="works even if cobalt ui isn't translated to your language."
+        title={$t("settings.audio.youtube.dub.title")}
+        description={$t("settings.audio.youtube.dub.description")}
     />
 </SettingsCategory>
 
-<SettingsCategory title="tiktok">
+<SettingsCategory title={$t("settings.audio.tiktok.original")}>
     <SettingsToggle
         settingContext="save"
         settingId="tiktokFullAudio"
-        title="use original sound"
-        description="downloads original sound used in the post without any additional changes by the post's author."
+        title={$t("settings.audio.tiktok.original.title")}
+        description={$t("settings.audio.tiktok.original.description")}
     />
 </SettingsCategory>

web/src/routes/settings/save/metadata/+page.svelte

@@ -1,40 +1,42 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    import { filenameStyleOptions } from "$lib/types/settings";
+
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
-
-    import { filenameStyleOptions } from "$lib/types/settings";
 </script>
 
 <SettingsCategory
-    title="filename style"
-    description="very cool description for every style. bla bla bla."
+    title={$t("settings.metadata.filename")}
+    description={$t("settings.metadata.filename.description")}
 >
     <Switcher big={true}>
         {#each filenameStyleOptions as value}
             <SettingsButton settingContext="save" settingId="filenameStyle" settingValue={value}>
-                {value}
+                {$t(`settings.metadata.filename.${value}`)}
             </SettingsButton>
         {/each}
     </Switcher>
 
 </SettingsCategory>
 
-<SettingsCategory title="file metadata">
+<SettingsCategory title={$t("settings.metadata.file")}>
     <SettingsToggle
         settingContext="save"
         settingId="disableMetadata"
-        title="disable file metadata"
-        description="cobalt won't add title, artist, and other info to the file."
+        title={$t("settings.metadata.disable.title")}
+        description={$t("settings.metadata.disable.description")}
     />
 </SettingsCategory>
 
-<SettingsCategory title="saving method">
+<SettingsCategory title={$t("settings.saving.method")}>
     <SettingsToggle
         settingContext="save"
         settingId="downloadPopup"
-        title="ask how to save"
-        description="cobalt will offer you several ways to save the file instead of opening it in a new tab."
+        title={$t("settings.saving.ask.title")}
+        description={$t("settings.saving.ask.description")}
     />
 </SettingsCategory>

web/src/routes/settings/save/video/+page.svelte

@@ -1,24 +1,23 @@
 <script lang="ts">
-    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
-    import Switcher from "$components/buttons/Switcher.svelte";
-    import SettingsButton from "$components/buttons/SettingsButton.svelte";
-    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+    import { t } from "$lib/i18n/translations";
 
     import { videoQualityOptions } from "$lib/types/settings";
     import { youtubeVideoCodecOptions } from "$lib/types/settings";
 
-    const videoDescription = `if preferred quality isn’t available, closest one is picked instead.`;
-    const codecDescription = `if preferred codec isn’t available, next best is picked instead.`;
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import Switcher from "$components/buttons/Switcher.svelte";
+    import SettingsButton from "$components/buttons/SettingsButton.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 </script>
 
 <SettingsCategory
-    title="preferred video quality"
-    description="{videoDescription}"
+    title={$t("settings.video.quality")}
+    description={$t("settings.video.quality.description")}
 >
     <Switcher big={true}>
         {#each videoQualityOptions as value}
             <SettingsButton settingContext="save" settingId="videoQuality" settingValue={value}>
-                {value}
+                {$t(`settings.video.quality.${value}`)}
             </SettingsButton>
         {/each}
     </Switcher>
@@ -26,33 +25,33 @@
 </SettingsCategory>
 
 <SettingsCategory
-    title="preferred youtube codec"
-    description="{codecDescription}"
+    title={$t("settings.video.youtube.codec")}
+    description={$t("settings.video.youtube.codec.description")}
 >
     <Switcher big={true}>
         {#each youtubeVideoCodecOptions as value}
             <SettingsButton settingContext="save" settingId="youtubeVideoCodec" settingValue={value}>
-                {value}
+                {$t(`settings.video.youtube.codec.${value}`)}
             </SettingsButton>
         {/each}
     </Switcher>
 
 </SettingsCategory>
 
-<SettingsCategory title="twitter">
+<SettingsCategory title={$t("settings.video.twitter.gif")}>
     <SettingsToggle
         settingContext="save"
         settingId="twitterGif"
-        title="convert looping videos to GIF"
-        description="GIF conversion is very lossy, end result may be low quality."
+        title={$t("settings.video.twitter.gif.title")}
+        description={$t("settings.video.twitter.gif.description")}
     />
 </SettingsCategory>
 
-<SettingsCategory title="tiktok">
+<SettingsCategory title={$t("settings.video.tiktok.h265")}>
     <SettingsToggle
         settingContext="save"
         settingId="tiktokH265"
-        title="prefer HEVC/H265 format"
-        description="allows 1080p video downloading at cost of compatibility."
+        title={$t("settings.video.tiktok.h265.title")}
+        description={$t("settings.video.tiktok.h265.description")}
     />
 </SettingsCategory>