feat: add onboarding

messages/de.json

@@ -46,6 +46,7 @@
 	"loading": "Laden...",
 	"more": "Mehr",
 	"error": "Fehler",
+	"next": "Weiter",
 	"sidebar": {
 		"about": {
 			"header": "Über",
@@ -122,6 +123,12 @@
 		"user": {
 			"header": "Benutzer",
 			"login": "Login"
+		},
+		"onboarding": {
+			"welcome": "Willkommen!",
+			"skip": "Onboarding überspringen",
+			"choose-lang": "Wählen Sie Ihre Sprache",
+			"first-vehicle": "Erstellen wir Ihr erstes Fahrzeug."
 		}
 	}
 }

messages/en.json

@@ -6,6 +6,7 @@
 	"loading": "Loading...",
 	"more": "More",
 	"error": "Error",
+	"next": "Next",
 	"saved": {
 		"home": "Home",
 		"school": "School",
@@ -122,6 +123,12 @@
 		"user": {
 			"header": "User",
 			"login": "Login"
+		},
+		"onboarding": {
+			"welcome": "Welcome!",
+			"skip": "Skip Onboarding",
+			"choose-lang": "Choose your language",
+			"first-vehicle": "Let's create your first vehicle."
 		}
 	}
 }

src/lib/components/lnv/Sidebar.svelte

@@ -33,6 +33,8 @@
 	import DeveloperSidebar from "./sidebar/settings/DeveloperSidebar.svelte";
 	import { m } from "$lang/messages";
 	import LanguageSidebar from "./sidebar/settings/LanguageSidebar.svelte";
+	import OnboardingSidebar from "./sidebar/onboarding/OnboardingSidebar.svelte";
+	import OnboardingVehiclesSidebar from "./sidebar/onboarding/OnboardingVehiclesSidebar.svelte";
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const views: Record<string, Component<any>> = {
@@ -47,6 +49,8 @@
 		"offline-maps": OfflineMapsSidebar,
 		"dev-options": DeveloperSidebar,
 		language: LanguageSidebar,
+		onboarding: OnboardingSidebar,
+		"onboarding-vehicles": OnboardingVehiclesSidebar,
 	};
 
 	let isDragging = false;

src/lib/components/lnv/sidebar/onboarding/OnboardingSidebar.svelte

@@ -0,0 +1,40 @@
+<script>
+	import { m } from "$lang/messages";
+	import { getLocale, locales, setLocale } from "$lang/runtime";
+	import { LanguagesIcon } from "@lucide/svelte";
+	import SettingsButton from "../settings/SettingsButton.svelte";
+	import { view } from "../../view.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+</script>
+
+<h1 style="font-size: 2em; font-weight: bold;">{m["sidebar.onboarding.welcome"]()}</h1>
+<h2>{m["sidebar.onboarding.choose-lang"]()}</h2>
+
+<div id="languages">
+	{#each locales as locale, _index (locale)}
+		<SettingsButton
+			text={m.language({}, { locale })}
+			icon={LanguagesIcon}
+			onclick={() => {
+				if(locale != getLocale()) {
+					setLocale(locale);
+				}
+				view.switch("onboarding-vehicles")
+			}}
+		/>
+	{/each}
+</div>
+
+<Button variant="link" onclick={() => {
+	view.switch("main");
+	view.history = [];
+}}>{m["sidebar.onboarding.skip"]()}</Button>
+
+<style>
+	#languages {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		margin-top: 1rem;
+	}
+</style>

src/lib/components/lnv/sidebar/onboarding/OnboardingVehiclesSidebar.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { m } from "$lang/messages";
+	import { PlusCircleIcon } from "@lucide/svelte";
+	import { view } from "../../view.svelte";
+	import AddVehicleDrawer from "../../AddVehicleDrawer.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+</script>
+
+<h1 style="font-size: 1.3em; font-weight: bold; margin-bottom: 1rem;">{m["sidebar.onboarding.first-vehicle"]()}</h1>
+
+<AddVehicleDrawer>
+	<Button variant="secondary" class="w-full p-5">
+		<PlusCircleIcon />
+		{m["vehicles.selector.add"]()}
+	</Button>
+</AddVehicleDrawer>
+
+<Button style="margin-top: 1rem; width: 100%;" onclick={() => {
+	view.switch("offline-maps");
+	view.history = [{ type: "main" }];
+}}>{m.next()}</Button>

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

@@ -1,5 +1,5 @@
 <script>
-	import { MapIcon, SpeechIcon, ToggleLeftIcon } from "@lucide/svelte";
+	import { HandIcon, MapIcon, SpeechIcon, ToggleLeftIcon } from "@lucide/svelte";
 	import SidebarHeader from "../SidebarHeader.svelte";
 	import SettingsButton from "./SettingsButton.svelte";
 	import say from "$lib/services/navigation/TTS";
@@ -37,6 +37,15 @@
 		/>
 	</section>
 
+	<section>
+		<h2>Open</h2>
+		<SettingsButton
+			icon={HandIcon}
+			text="Start onboarding"
+			view="onboarding"
+		/>
+	</section>
+
 	<section>
 		<h2>Other</h2>
 		<SettingsButton