feat: add onboarding

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