Locale work

package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "@tauri-apps/api": ">=2.0.0",
     "@tauri-apps/plugin-shell": ">=2.0.0",
-    "svelte-hero-icons": "^5.2.0"
+    "svelte-hero-icons": "^5.2.0",
+    "svelte-i18n": "^4.0.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.1",

src/components/Footer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Icon, ArrowPath } from "svelte-hero-icons";
+    import { _ } from "svelte-i18n";
 
     export let gameCount: number;
 
@@ -11,9 +12,9 @@
     <button class="border border-neutral-600 bg-neutral-700 text-white h-5 w-5 p-1 rounded hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
         <Icon src="{ArrowPath}" solid />
     </button>
-    <h1>{gameCount} Games Installed</h1>
+    <h1>{$_("footer.games.installed", { values: { count: gameCount } })}</h1>
     
     <div class="flex-grow" />
 
-    <h1>Firmware: {firmwareVersion}</h1>
+    <h1>{$_("footer.firmware.version", { values: { version: firmwareVersion} })}</h1>
 </div>

src/components/Header.svelte

@@ -2,6 +2,7 @@
     import { Icon, Squares2x2, ListBullet, Cog6Tooth } from "svelte-hero-icons";
     import { gridLayout } from "../stores";
     import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
+    import { _ } from "svelte-i18n";
 
     export let searchTerm: string;
 
@@ -50,9 +51,8 @@
 
     <div>
         <form class="max-w-md mx-auto">
-            <label for="default-search" class="mb-2 text-sm font-medium text-white sr-only">Search</label>
             <div class="relative">
-                <input bind:value={searchTerm} on:input type="search" class="block w-full h-8 p-2 text-sm placeholder-neutral-400 text-white border border-neutral-600 rounded bg-neutral-700 focus:ring-blue-500 focus:border-blue-500" placeholder="Search..."/>
+                <input bind:value={searchTerm} on:input type="search" class="block w-full h-8 p-2 text-sm placeholder-neutral-400 text-white border border-neutral-600 rounded bg-neutral-700 focus:ring-blue-500 focus:border-blue-500" placeholder={$_("header.search.placeholder")}/>
             </div>
         </form>
     </div>

src/i18n.ts

@@ -0,0 +1,8 @@
+import { register, init, getLocaleFromNavigator } from "svelte-i18n";
+
+register("en", () => import("./locales/en.json"));
+
+init({
+    fallbackLocale: "en",
+    initialLocale: getLocaleFromNavigator()
+});

src/locales/en.json

@@ -0,0 +1,16 @@
+{
+  "footer": {
+    "games.installed": "{count} Games Installed",
+    "firmware.version": "Firmware: {version}"
+  },
+  "header": {
+    "search.placeholder": "Search..."
+  },
+  "settings": {
+    "tabs": {
+      "system": "System",
+      "graphics": "Graphics",
+      "logging": "Logging"
+    }
+  }
+}

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-
+    import '../i18n'
 </script>
 
 <main class="flex flex-col h-full max-h-full" id="content">

src/routes/settings/+page.svelte

@@ -5,6 +5,7 @@
     import System from "$components/settings/System.svelte";
     import Graphics from "$components/settings/Graphics.svelte";
     import Logging from "$components/settings/Logging.svelte";
+    import { _ } from "svelte-i18n";
 
     class Tab {
         icon: IconSource;
@@ -22,17 +23,17 @@
     let tabs: Tab[] = [
         {
             icon: CpuChip,
-            label: "System",
+            label: $_("settings.tabs.system"),
             content: System
         },
         {
             icon: Sparkles,
-            label: "Graphics",
+            label: $_("settings.tabs.graphics"),
             content: Graphics
         },
         {
             icon: DocumentText,
-            label: "Logging",
+            label: $_("settings.tabs.logging"),
             content: Logging
         },
     ];