feat: add language settings (#19)

* feat: add settings

* fix: add missing translations key

* fix: remove old language switcher

messages/en.json

@@ -0,0 +1,8 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"Verify_credential": "Verify credential",
+	"VERIFICATION_QR": "VERIFICATION QR",
+	"Generate_QR": "Generate QR",
+	"CREDENTIAL_DETAIL": "CREDENTIAL DETAIL",
+	"VERIFIER": "VERIFIER"
+}

messages/it.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"Verify_credential": "Verifica credenziali"
+}

src/lib/components/molecules/Header.svelte

@@ -0,0 +1,51 @@
+<script>
+	import { chevronBackOutline, ellipsisHorizontal } from 'ionicons/icons';
+	import Settings from './Settings.svelte';
+	export let backButton = true;
+	let isSettingsOpen = false;
+
+	const openSettings = () => (isSettingsOpen = true);
+	const closeSettings = () => (isSettingsOpen = false);
+	//TODO: fix background color with actual token
+</script>
+
+<ion-header class="bg-primary">
+	<ion-toolbar>
+		{#if backButton}
+			<ion-buttons slot="start">
+				<ion-button
+					on:click={() => window.history.back()}
+					on:keydown={() => window.history.back()}
+					aria-hidden
+				>
+					<ion-icon icon={chevronBackOutline} slot="icon-only"></ion-icon>
+				</ion-button>
+			</ion-buttons>
+		{/if}
+		<ion-title class="text-center">
+			<slot />
+		</ion-title>
+		<ion-buttons slot="end">
+			<ion-button on:click={openSettings} on:keydown={openSettings} aria-hidden>
+				<ion-icon icon={ellipsisHorizontal} slot="icon-only"></ion-icon>
+			</ion-button>
+		</ion-buttons>
+	</ion-toolbar>
+</ion-header>
+<ion-modal is-open={isSettingsOpen}>
+	<ion-header>
+		<ion-toolbar>
+			<ion-title>
+				<d-heading size="s"> Settings </d-heading>
+			</ion-title>
+			<ion-buttons slot="end">
+				<ion-button on:click={closeSettings} on:keydown={closeSettings} aria-hidden
+					>Close</ion-button
+				>
+			</ion-buttons>
+		</ion-toolbar>
+	</ion-header>
+	<ion-content class="ion-padding">
+		<Settings />
+	</ion-content>
+</ion-modal>

src/lib/components/molecules/Settings.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { page } from "$app/stores";
+	import { goto, i18n } from "$lib/i18n";
+	import { setLanguagePreference } from "$lib/preferences/lang";
+	import { availableLanguageTags } from "$paraglide/runtime";
+
+</script>
+<div class="flex flex-col gap-2">
+    <hr />
+	<d-heading size="xs">Language</d-heading>
+	<ion-radio-group
+		value={i18n.getLanguageFromUrl($page.url)}
+		on:ionChange={async (e) => {
+            await setLanguagePreference(e.detail.value);
+			await goto(i18n.route($page.url.pathname), e.detail.value);
+		}}
+	>
+		{#each availableLanguageTags as language}
+			<ion-radio label-placement="end" value={language}>{language}</ion-radio>
+			<br />
+		{/each}
+	</ion-radio-group>
+    <hr />
+</div>

src/routes/+layout.ts

@@ -1,27 +1,20 @@
 export const ssr = false;
 
+
 //
 
-// import { r, type Locale } from '$lib/i18n';
-// import { redirect } from '@sveltejs/kit';
 import { Device } from '@capacitor/device';
 import { getLanguagePreference, setLanguagePreference } from '$lib/preferences/lang';
 
+
 const setInitialLanguage = async () => {
 	if (!(await getLanguagePreference())) {
 		const lang = await Device.getLanguageTag();
+		//@ts-ignore
 		await setLanguagePreference(lang.value.split('-')[0]);
 	}
 };
 
-// const getLang = async () => {
-// 	const lang = await getLanguagePreference();
-// 	if (lang && ['it', 'en'].includes(lang)) return lang as Locale;
-// 	return 'en' as Locale;
-// };
-
 export const load = async () => {
 	await setInitialLanguage();
-	// const lang = await getLang();
-	// redirect(303, r('/', lang));
 };

src/routes/[[lang]]/+page.svelte

@@ -1,26 +1,27 @@
 <script lang="ts">
-	import Header from '$lib/components/atoms/Header.svelte';
+	import Header from '$lib/components/molecules/Header.svelte';
 	import { getServices } from '$lib/slangroom/services';
-
-
+	import { m, r } from '$lib/i18n';
 </script>
-<Header backButton={false}>VERIFIER</Header>
+
+<Header backButton={false}>{m.VERIFIER()}</Header>
 <ion-content fullscreen class="ion-padding space-y-10">
 	{#await getServices()}
 		<ion-spinner />
 	{:then res}
 		{@const services = res.result.items}
 		<d-heading size="s">
-			Verify credential
+			{m.Verify_credential()}
 		</d-heading>
 		<div class="flex flex-col gap-2">
 			{#each services as service}
-				<d-credential-service name={service.name} issuer={service.issuer} href={`${service.id}/credential-detail`} />
+				<d-credential-service
+					name={service.name}
+					issuer={service.issuer}
+					href={r(`${service.id}/credential-detail`)}
+				/>
 			{/each}
 		</div>
 	{/await}
 	<br />
-
 </ion-content>
-
-

src/routes/[[lang]]/+page.ts

@@ -0,0 +1,18 @@
+//
+import { r, type Locale } from '$lib/i18n';
+import { redirect } from '@sveltejs/kit';
+import { getLanguagePreference} from '$lib/preferences/lang';
+import { availableLanguageTags } from '$paraglide/runtime';
+
+const getLang = async () => {
+	const lang = await getLanguagePreference();
+	if (lang && availableLanguageTags.includes(lang)) return lang as Locale;
+	return 'en' as Locale;
+};
+
+export const load = async ({url}) => {
+	const lang = await getLang();
+	if (url.toString().split('/')[3] !== lang) {
+		redirect(301, r('/', lang));
+	}
+};

src/routes/[[lang]]/[id]/credential-detail/+page.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-	import Header from '$lib/components/atoms/Header.svelte';
+	import Header from '$lib/components/molecules/Header.svelte';
+	import { r,  m } from '$lib/i18n';
 	export let data: any;
 	const { credential } = data;
 </script>
 
-<Header>CREDENTIAL DETAIL</Header>
+<Header>{m.CREDENTIAL_DETAIL()}</Header>
 <ion-content fullscreen class="ion-padding">
 	<d-credential-card {...credential} expiration-date="2017-01-01" verified="false"> </d-credential-card>
 	<div class="bg-tab fixed bottom-0 left-0 w-full">
 		<d-credential-detail {...credential} description={credential.expand.templates[0].name}>
-			<d-button color="accent" href={`/${credential.id}/verify/`}>Generate QR</d-button>
+			<d-button color="accent" href={r(`/${credential.id}/verify/`)}>{m.Generate_QR()}</d-button>
 		</d-credential-detail>
 	</div>
 </ion-content>

src/routes/[[lang]]/[id]/verify/+page.svelte

@@ -7,7 +7,8 @@
 	import { qrcode } from '@slangroom/qrcode';
 	import { onMount } from 'svelte';
 	import { thumbsDownOutline, thumbsUpOutline } from 'ionicons/icons';
-	import Header from '$lib/components/atoms/Header.svelte';
+	import Header from '$lib/components/molecules/Header.svelte';
+	import { m } from '$lib/i18n';
 
 	export let data: any;
 
@@ -72,9 +73,8 @@ Then print data
 	addListeners();
 </script>
 
-<Header>VERIFICATION QR</Header>
+<Header>{m.VERIFICATION_QR()}</Header>
 <ion-content fullscreen class="ion-padding">
-	<ion-button href="/">back</ion-button>
 	<div class="flex flex-col">
 		{#if incomingNotification}
 			<ion-icon