feat: localisation

8 files changed, 69 insertions, 9 deletions

diff --git a/bun.lockb b/bun.lockb
index acee8237..a79f81de 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index d314c257..fa05a0a9 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "modern-screenshot": "^4.4.33",
     "rss-parser": "^3.13.0",
     "string-similarity": "^4.0.4",
+    "svelte-i18n": "^4.0.0",
     "svelte-notifications": "^0.9.98",
     "wanakana": "^5.3.1"
   }
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index 553204ce..ee53dd9e 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -72,6 +72,11 @@
 />
 <SettingCheckboxToggle setting="displayDisableNotifications" text="Disable notifications" />
 <SettingCheckboxToggle setting="displayLimitListHeight" text="Limit panel area to screen height" />
+<select bind:value={$settings.displayLanguage}>
+	<option value="en">English</option>
+	<option value="ja">Japanese</option>
+</select>
+Interface language <button class="unclickable-button button-badge badge-info">Beta</button>
 
 <p />
 
diff --git a/src/lib/Styles/input.css b/src/lib/Styles/input.css
index 0f2b810f..381f2ebe 100644
--- a/src/lib/Styles/input.css
+++ b/src/lib/Styles/input.css
@@ -113,6 +113,14 @@ button:disabled:active {
 	transform: scale(0.75);
 }
 
+.unclickable-button {
+	transform: scale(1);
+}
+
+.unclickable-button:active {
+	transform: scale(1) !important;
+}
+
 .smaller-button {
 	background-color: var(--base0C);
 	transform: scale(0.75);
diff --git a/src/lib/locale/en.json b/src/lib/locale/en.json
new file mode 100644
index 00000000..f968a7d6
--- /dev/null
+++ b/src/lib/locale/en.json
@@ -0,0 +1,13 @@
+{
+	"navigation": {
+		"home": "Home",
+		"completed": "Completed",
+		"subtitle_schedule": "Subtitle Schedule",
+		"new_releases": "New Releases",
+		"tools": "Tools",
+		"settings": "Settings",
+		"profile": "Profile",
+		"log_in": "Log in with AniList",
+		"log_out": "Log out"
+	}
+}
diff --git a/src/lib/locale/ja.json b/src/lib/locale/ja.json
new file mode 100644
index 00000000..6c6afb38
--- /dev/null
+++ b/src/lib/locale/ja.json
@@ -0,0 +1,13 @@
+{
+	"navigation": {
+		"home": "ホーム",
+		"completed": "完成メディア",
+		"subtitle_schedule": "字幕スケジュール",
+		"new_releases": "新発売",
+		"tools": "ツール",
+		"settings": "設定",
+		"profile": "プロフィール",
+		"log_in": "AniListでログイン",
+		"log_out": "ログアウト"
+	}
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1118ebcf..bafc9272 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,9 +13,23 @@
 	import Notification from '$lib/Notification/Notification.svelte';
 	import Root from '$lib/Home/Root.svelte';
 	import root from '$lib/Utility/root';
+	import { addMessages, init, _ } from 'svelte-i18n';
+	import en from '$lib/locale/en.json';
+	import ja from '$lib/locale/ja.json';
 
 	export let data;
 
+	addMessages('en', en);
+	addMessages('ja', ja);
+
+	$: {
+		// import(`../lib/locale/${$settings.displayLanguage}.json`).then((module) => {
+		// 	addMessages($settings.displayLanguage, module.default);
+		// });
+
+		init({ fallbackLocale: 'en', initialLocale: $settings.displayLanguage });
+	}
+
 	let currentUserIdentity = {
 		name: '',
 		id: -1,
@@ -63,19 +77,21 @@
 <div id="container">
 	<div id="header" class="card card-centered">
 		<div>
-			<a href={root('/')} class="header-item">Home</a><a
+			<a href={root('/')} class="header-item">{$_('navigation.home')}</a><a
 				href={root('/completed')}
-				class="header-item">Completed</a
+				class="header-item">{$_('navigation.completed')}</a
 			>
-			<a href={root('/schedule')} class="header-item">Subtitle Schedule</a>
-			<a href={root('/updates')} class="header-item">New Releases</a>
-			<a href={root('/tools')} class="header-item">Tools</a>
-			<a href={root('/settings')} class="header-item">Settings</a>
+			<a href={root('/schedule')} class="header-item">{$_('navigation.subtitle_schedule')}</a>
+			<a href={root('/updates')} class="header-item">{$_('navigation.new_releases')}</a>
+			<a href={root('/tools')} class="header-item">{$_('navigation.tools')}</a>
+			<a href={root('/settings')} class="header-item">{$_('navigation.settings')}</a>
 
 			<span style="opacity: 50%;" class="header-item">|</span>
 
 			{#if data.user}
-				<a href={root(`/user/${currentUserIdentity.name}`)} class="header-item">Profile</a>
+				<a href={root(`/user/${currentUserIdentity.name}`)} class="header-item"
+					>{$_('navigation.profile')}</a
+				>
 			{/if}
 
 			{#if data.user === undefined}
@@ -89,10 +105,12 @@
 						);
 					}}
 				>
-					Log in with AniList
+					{$_('navigation.log_in')}
 				</a>
 			{:else}
-				<a href={root('/api/authentication/log-out')} class="header-item">Log out </a>
+				<a href={root('/api/authentication/log-out')} class="header-item"
+					>{$_('navigation.log_out')}
+				</a>
 				{#if data.user}
 					<a href={root(`/user/${currentUserIdentity.name}`)} class="header-item">
 						<img id="avatar" src={currentUserIdentity.avatar} alt="Avatar" />
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 4b067c40..3a55d5b6 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -36,6 +36,7 @@ export interface Settings {
 	displayCoverWidth: number;
 	displayShortCountdown: boolean;
 	displayScheduleListMode: boolean;
+	displayLanguage: 'en' | 'ja';
 }
 
 const defaultSettings: Settings = {
@@ -68,6 +69,7 @@ const defaultSettings: Settings = {
 	displayCoverWidth: 116.609,
 	displayShortCountdown: false,
 	displayScheduleListMode: false,
+	displayLanguage: 'en',
 
 	// Calculation
 	calculateChaptersRoundedDown: true,