From b3acfe0331f34364153998c7342c9f9a658bb491 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Tue, 20 Feb 2024 13:50:41 +0100
Subject: [PATCH] feat: include a language switcher
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This also sets the direction of layout. I hope to be able to spot design
implementation failures faster this way.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 package-lock.json         |  4 ++--
 package.json              |  2 +-
 src/lib/i18n/index.ts     | 11 ++++++++++-
 src/routes/+layout.svelte | 14 ++++++++++++++
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bdb8d51..3a669c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "anvil",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "anvil",
-			"version": "0.0.3",
+			"version": "0.0.4",
 			"devDependencies": {
 				"@playwright/test": "1.41.2",
 				"@skeletonlabs/skeleton": "2.8.0",
diff --git a/package.json b/package.json
index 9304f72..fc165c4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "anvil",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
diff --git a/src/lib/i18n/index.ts b/src/lib/i18n/index.ts
index 28759b6..53bbf5a 100644
--- a/src/lib/i18n/index.ts
+++ b/src/lib/i18n/index.ts
@@ -3,10 +3,19 @@ import { init, register } from 'svelte-i18n';
 
 const defaultLocale = 'en';
 
-register('en', () => import('./locales/en.json'));
 register('de', () => import('./locales/de.json'));
+register('en', () => import('./locales/en.json'));
+register('he', () => import('./locales/he.json'));
 
 init({
 	fallbackLocale: defaultLocale,
 	initialLocale: browser ? window.navigator.language : defaultLocale
 });
+
+export function mapLocaleToDir(locale: 'de' | 'en' | 'he'): 'ltr' | 'rtl' {
+	if (['he'].includes(locale)) {
+		return 'rtl';
+	}
+
+	return 'ltr';
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index faf2157..686dc69 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,6 +7,15 @@
 	// Most of your app wide CSS should be put in this file
 	import '../app.postcss';
 	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
+	import { locale, locales } from 'svelte-i18n';
+
+	import { mapLocaleToDir } from '$lib/i18n';
+
+	locale.subscribe((l) => {
+		if (typeof document !== 'undefined') {
+			document.dir = mapLocaleToDir(l);
+		}
+	});
 </script>
 
 <!-- App Shell -->
@@ -18,6 +27,11 @@
 				<strong class="text-xl">Anvil</strong>
 			</svelte:fragment>
 			<svelte:fragment slot="trail">
+				<select bind:value={$locale} class="select">
+					{#each $locales as locale}
+						<option value={locale}>{locale}</option>
+					{/each}
+				</select>
 				<a
 					class="btn btn-sm variant-ghost-surface"
 					href="https://matrix.to/#/#general-forgefed:matrix.batsense.net"