feat: add language selector

messages/de.json

@@ -1,5 +1,6 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
+  "language": "Deutsch - German",
   "saved": {
     "home": "Heim",
     "school": "Schule",

messages/en.json

@@ -1,5 +1,6 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
+  "language": "English",
   "save": "Save",
   "cancel": "Cancel",
   "loading": "Loading...",

src/lib/components/lnv/Sidebar.svelte

@@ -32,6 +32,7 @@
 	import OfflineMapsSidebar from "./sidebar/settings/OfflineMapsSidebar.svelte";
 	import DeveloperSidebar from "./sidebar/settings/DeveloperSidebar.svelte";
 	import { m } from "$lang/messages";
+	import LanguageSidebar from "./sidebar/settings/LanguageSidebar.svelte";
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const views: Record<string, Component<any>> = {
@@ -45,6 +46,7 @@
 		about: AboutSidebar,
 		"offline-maps": OfflineMapsSidebar,
 		"dev-options": DeveloperSidebar,
+		language: LanguageSidebar
 	};
 
 	let isDragging = false;

src/lib/components/lnv/sidebar/settings/LanguageSidebar.svelte

@@ -0,0 +1,31 @@
+<script>
+	import { m } from "$lang/messages";
+	import { getLocale, locales, setLocale } from "$lang/runtime";
+	import { CheckIcon, LanguagesIcon } from "@lucide/svelte";
+	import SidebarHeader from "../SidebarHeader.svelte";
+	import SettingsButton from "./SettingsButton.svelte";
+</script>
+
+<SidebarHeader>
+	{m["sidebar.language.header"]()}
+</SidebarHeader>
+
+<div id="languages">
+	{#each locales as locale}
+		{#if locale == getLocale()}
+			<SettingsButton text={m.language()} icon={CheckIcon} disabled />
+		{:else}
+			<SettingsButton text={m.language({}, { locale })} icon={LanguagesIcon} onclick={() => {
+				setLocale(locale)
+			}} />
+		{/if}
+	{/each}
+</div>
+
+<style>
+	#languages {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+</style>

src/lib/components/lnv/sidebar/settings/SettingsSidebar.svelte

@@ -19,7 +19,7 @@
 <div id="sections">
 	<section>
 		<h2>{m["sidebar.settings.general"]()}</h2>
-		<SettingsButton icon={LanguagesIcon} text={m["sidebar.language.header"]()} disabled />
+		<SettingsButton icon={LanguagesIcon} text={m["sidebar.language.header"]()} view="language" />
 	</section>
 
 	<section>