web: i18n system & navbar translations

dynamic page language and language dropdown!! finally!!

web/src/components/settings/LanguageDropdown.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import settings, { updateSetting } from "$lib/settings";
+    import { t, locale, locales } from "$lib/i18n/translations";
+
+    import languages from "$i18n/languages.json";
+
+    $: currentSetting = $settings.appearance.language;
+
+    const updateLocale = (lang: string) => {
+        updateSetting({
+            appearance: {
+                language: lang as keyof typeof languages,
+            },
+        })
+    }
+</script>
+
+<select
+    id="setting-dropdown-appearance-language"
+    bind:value={$locale}
+    on:change={() => updateLocale($locale)}
+>
+    {#each $locales as value}
+        <option value={value} selected={currentSetting === value}>
+            {$t(`languages.${value}`)}
+        </option>
+    {/each}
+</select>

web/src/components/sidebar/Sidebar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
     import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
     import SidebarTab from "$components/sidebar/SidebarTab.svelte";
 
@@ -23,7 +25,7 @@
 
 <svelte:window bind:innerWidth={screenWidth} />
 
-<nav id="sidebar">
+<nav id="sidebar" aria-label={$t("a11y.tabs.tabPanel")}>
     <CobaltLogo />
     <div id="sidebar-tabs">
         <div id="sidebar-actions" class="sidebar-inner-container">

web/src/components/sidebar/SidebarTab.svelte

@@ -1,33 +1,31 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
+    import { t } from "$lib/i18n/translations";
+
     export let tabName: string;
     export let tabLink: string;
 
-    const firstTabPage = [
-        "save",
-        "settings",
-        "updates"
-    ];
+    const firstTabPage = ["save", "settings", "updates"];
 
     let tab: HTMLElement;
 
-    $: currentTab = $page.url.pathname.split('/')[1];
-    $: baseTabPath = tabLink.split('/')[1]
+    $: currentTab = $page.url.pathname.split("/")[1];
+    $: baseTabPath = tabLink.split("/")[1];
 
     $: isTabActive = currentTab === baseTabPath;
 
     const showTab = (e: HTMLElement | undefined) => {
         if (e) {
             e.scrollIntoView({
-                inline: firstTabPage.includes(tabName) ? 'end' : 'start',
-                behavior: 'smooth'
+                inline: firstTabPage.includes(tabName) ? "end" : "start",
+                behavior: "smooth",
             });
         }
-    }
+    };
 
     $: if (isTabActive) {
-        showTab(tab)
+        showTab(tab);
     }
 </script>
 
@@ -38,9 +36,10 @@
     href={tabLink}
     bind:this={tab}
     on:focus={() => showTab(tab)}
+    role="tab"
 >
     <slot></slot>
-    {tabName}
+    {$t(`tabs.${tabName}`)}
 </a>
 
 <style>