From 8e37eb0d51fc365b0a1ccf2b771e39022ab75495 Mon Sep 17 00:00:00 2001
From: Cfp <jannik@picoscratch.de>
Date: Thu, 14 Aug 2025 16:50:30 +0200
Subject: [PATCH] feat: save onboarding state and auto trigger onboarding

---
 .../onboarding/OnboardingSidebar.svelte       | 23 +++++++++++++------
 .../OnboardingVehiclesSidebar.svelte          | 17 ++++++++++----
 .../sidebar/settings/DeveloperSidebar.svelte  | 23 ++++++++++++++++---
 src/lib/components/lnv/view.svelte.ts         |  4 +++-
 src/lib/onboarding.svelte.ts                  | 20 ++++++++++++++++
 5 files changed, 71 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/onboarding.svelte.ts

diff --git a/src/lib/components/lnv/sidebar/onboarding/OnboardingSidebar.svelte b/src/lib/components/lnv/sidebar/onboarding/OnboardingSidebar.svelte
index be1e9cc..b600e45 100644
--- a/src/lib/components/lnv/sidebar/onboarding/OnboardingSidebar.svelte
+++ b/src/lib/components/lnv/sidebar/onboarding/OnboardingSidebar.svelte
@@ -5,9 +5,12 @@
 	import SettingsButton from "../settings/SettingsButton.svelte";
 	import { view } from "../../view.svelte";
 	import Button from "$lib/components/ui/button/button.svelte";
+	import { setOnboardingState } from "$lib/onboarding.svelte";
 </script>
 
-<h1 style="font-size: 2em; font-weight: bold;">{m["sidebar.onboarding.welcome"]()}</h1>
+<h1 style="font-size: 2em; font-weight: bold;">
+	{m["sidebar.onboarding.welcome"]()}
+</h1>
 <h2>{m["sidebar.onboarding.choose-lang"]()}</h2>
 
 <div id="languages">
@@ -16,19 +19,25 @@
 			text={m.language({}, { locale })}
 			icon={LanguagesIcon}
 			onclick={() => {
-				if(locale != getLocale()) {
+				if (locale != getLocale()) {
 					setLocale(locale);
+				} else {
+					setOnboardingState("vehicles");
+					view.switch("onboarding-vehicles");
 				}
-				view.switch("onboarding-vehicles")
 			}}
 		/>
 	{/each}
 </div>
 
-<Button variant="link" onclick={() => {
-	view.switch("main");
-	view.history = [];
-}}>{m["sidebar.onboarding.skip"]()}</Button>
+<Button
+	variant="link"
+	onclick={() => {
+		setOnboardingState("end");
+		view.switch("main");
+		view.history = [];
+	}}>{m["sidebar.onboarding.skip"]()}</Button
+>
 
 <style>
 	#languages {
diff --git a/src/lib/components/lnv/sidebar/onboarding/OnboardingVehiclesSidebar.svelte b/src/lib/components/lnv/sidebar/onboarding/OnboardingVehiclesSidebar.svelte
index 0709bb2..9c3b219 100644
--- a/src/lib/components/lnv/sidebar/onboarding/OnboardingVehiclesSidebar.svelte
+++ b/src/lib/components/lnv/sidebar/onboarding/OnboardingVehiclesSidebar.svelte
@@ -4,9 +4,12 @@
 	import { view } from "../../view.svelte";
 	import AddVehicleDrawer from "../../AddVehicleDrawer.svelte";
 	import Button from "$lib/components/ui/button/button.svelte";
+	import { setOnboardingState } from "$lib/onboarding.svelte";
 </script>
 
-<h1 style="font-size: 1.3em; font-weight: bold; margin-bottom: 1rem;">{m["sidebar.onboarding.first-vehicle"]()}</h1>
+<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">
@@ -15,7 +18,11 @@
 	</Button>
 </AddVehicleDrawer>
 
-<Button style="margin-top: 1rem; width: 100%;" onclick={() => {
-	view.switch("offline-maps");
-	view.history = [{ type: "main" }];
-}}>{m.next()}</Button>
+<Button
+	style="margin-top: 1rem; width: 100%;"
+	onclick={() => {
+		setOnboardingState("end");
+		view.switch("offline-maps");
+		view.history = [{ type: "main" }];
+	}}>{m.next()}</Button
+>
diff --git a/src/lib/components/lnv/sidebar/settings/DeveloperSidebar.svelte b/src/lib/components/lnv/sidebar/settings/DeveloperSidebar.svelte
index b6da9af..9acb1ab 100644
--- a/src/lib/components/lnv/sidebar/settings/DeveloperSidebar.svelte
+++ b/src/lib/components/lnv/sidebar/settings/DeveloperSidebar.svelte
@@ -1,5 +1,11 @@
 <script>
-	import { HandIcon, MapIcon, SpeechIcon, ToggleLeftIcon } from "@lucide/svelte";
+	import {
+		HandIcon,
+		MapIcon,
+		RefreshCcwIcon,
+		SpeechIcon,
+		ToggleLeftIcon,
+	} from "@lucide/svelte";
 	import SidebarHeader from "../SidebarHeader.svelte";
 	import SettingsButton from "./SettingsButton.svelte";
 	import say from "$lib/services/navigation/TTS";
@@ -7,6 +13,7 @@
 	import { getDeveloperToggle } from "./developer.svelte";
 	import { view } from "../../view.svelte";
 	import { m } from "$lang/messages";
+	import { setOnboardingState } from "$lib/onboarding.svelte";
 
 	const dev = getDeveloperToggle();
 </script>
@@ -39,10 +46,20 @@
 
 	<section>
 		<h2>Open</h2>
+		<SettingsButton icon={HandIcon} text="Start onboarding" view="onboarding" />
 		<SettingsButton
 			icon={HandIcon}
-			text="Start onboarding"
-			view="onboarding"
+			text="Reset onboarding"
+			onclick={() => {
+				setOnboardingState("start");
+			}}
+		/>
+		<SettingsButton
+			icon={RefreshCcwIcon}
+			text="Reload"
+			onclick={() => {
+				location.reload();
+			}}
 		/>
 	</section>
 
diff --git a/src/lib/components/lnv/view.svelte.ts b/src/lib/components/lnv/view.svelte.ts
index a39c7de..c3764d3 100644
--- a/src/lib/components/lnv/view.svelte.ts
+++ b/src/lib/components/lnv/view.svelte.ts
@@ -1,10 +1,12 @@
+import { getOnboardingView } from "$lib/onboarding.svelte";
+
 export interface View {
 	type: string;
 	props?: Record<string, unknown>;
 }
 
 export const view = $state({
-	current: { type: "main" } as View,
+	current: { type: getOnboardingView("main") } as View,
 	history: [] as View[],
 	back: () => {
 		if (view.history.length > 0) {
diff --git a/src/lib/onboarding.svelte.ts b/src/lib/onboarding.svelte.ts
new file mode 100644
index 0000000..d48bb88
--- /dev/null
+++ b/src/lib/onboarding.svelte.ts
@@ -0,0 +1,20 @@
+type OnboardingState = "start" | "vehicles" | "end";
+
+export function getOnboardingState(): OnboardingState {
+	const value = localStorage.getItem("onboarding") as OnboardingState;
+	return value ?? "start";
+}
+
+export function setOnboardingState(value: OnboardingState) {
+	localStorage.setItem("onboarding", value);
+}
+
+export function getOnboardingView(def: string) {
+	if (!window.__TAURI__) return def;
+	const state = getOnboardingState();
+	return state == "start"
+		? "onboarding"
+		: state == "vehicles"
+			? "onboarding-vehicles"
+			: def;
+}