From 7e6423edd0121b7491bba04a1d8ccfd4d2636c7a Mon Sep 17 00:00:00 2001
From: Cfp <jannik@picoscratch.de>
Date: Mon, 11 Aug 2025 09:45:52 +0200
Subject: [PATCH] feat: hide dev options by default

---
 .../lnv/sidebar/settings/AboutSidebar.svelte       | 13 ++++++++++++-
 .../lnv/sidebar/settings/DeveloperSidebar.svelte   | 14 +++++++++++++-
 .../lnv/sidebar/settings/SettingsSidebar.svelte    |  7 ++++++-
 .../lnv/sidebar/settings/developer.svelte.ts       | 12 ++++++++++++
 4 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/lnv/sidebar/settings/developer.svelte.ts

diff --git a/src/lib/components/lnv/sidebar/settings/AboutSidebar.svelte b/src/lib/components/lnv/sidebar/settings/AboutSidebar.svelte
index dc3d8ca..fb12515 100644
--- a/src/lib/components/lnv/sidebar/settings/AboutSidebar.svelte
+++ b/src/lib/components/lnv/sidebar/settings/AboutSidebar.svelte
@@ -1,12 +1,23 @@
 <script>
 	import SidebarHeader from "../SidebarHeader.svelte";
+	import { getDeveloperToggle } from "./developer.svelte";
+
+	let count = 5;
+	const dev = getDeveloperToggle();
 </script>
 
 <SidebarHeader>
 	About
 </SidebarHeader>
 
-<h1 style="font-size: 2em; font-weight: bold;">TrafficCue</h1>
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<h1 style="font-size: 2em; font-weight: bold;" onclick={() => {
+	count--;
+	if(count == 0) {
+		dev.current = "true";
+	}
+}}>TrafficCue</h1>
 <span>Powered by:</span>
 <ul>
 	<li>© OpenStreetMap contributors</li>
diff --git a/src/lib/components/lnv/sidebar/settings/DeveloperSidebar.svelte b/src/lib/components/lnv/sidebar/settings/DeveloperSidebar.svelte
index a1b4de7..a64b353 100644
--- a/src/lib/components/lnv/sidebar/settings/DeveloperSidebar.svelte
+++ b/src/lib/components/lnv/sidebar/settings/DeveloperSidebar.svelte
@@ -1,9 +1,13 @@
 <script>
-	import { MapIcon, SpeechIcon } from "@lucide/svelte";
+	import { MapIcon, SpeechIcon, ToggleLeftIcon } from "@lucide/svelte";
 	import SidebarHeader from "../SidebarHeader.svelte";
 	import SettingsButton from "./SettingsButton.svelte";
 	import say from "$lib/services/navigation/TTS";
 	import { downloadPMTiles } from "$lib/services/OfflineTiles";
+	import { getDeveloperToggle } from "./developer.svelte";
+	import { view } from "../../view.svelte";
+
+	const dev = getDeveloperToggle();
 </script>
 
 <SidebarHeader>
@@ -24,6 +28,14 @@
 			await downloadPMTiles(url, name);
 		}} />
 	</section>
+
+	<section>
+		<h2>Other</h2>
+		<SettingsButton icon={ToggleLeftIcon} text="Disable Developer Options" onclick={async () => {
+			dev.current = "false";
+			view.back();
+		}} />
+	</section>
 </div>
 
 <style>
diff --git a/src/lib/components/lnv/sidebar/settings/SettingsSidebar.svelte b/src/lib/components/lnv/sidebar/settings/SettingsSidebar.svelte
index e8d4d7d..65cbe1b 100644
--- a/src/lib/components/lnv/sidebar/settings/SettingsSidebar.svelte
+++ b/src/lib/components/lnv/sidebar/settings/SettingsSidebar.svelte
@@ -2,6 +2,9 @@
 	import { CodeIcon, InfoIcon, LanguagesIcon, MapIcon, PaintbrushIcon } from "@lucide/svelte";
 	import SidebarHeader from "../SidebarHeader.svelte";
 	import SettingsButton from "./SettingsButton.svelte";
+	import { getDeveloperToggle } from "./developer.svelte";
+
+	const dev = getDeveloperToggle();
 </script>
 
 <SidebarHeader>
@@ -22,7 +25,9 @@
 	
 	<section>
 		<h2>About</h2>
-		<SettingsButton icon={CodeIcon} text="Developer Settings" view="dev-options" />
+		{#if dev.current == "true"}
+			<SettingsButton icon={CodeIcon} text="Developer Settings" view="dev-options" />
+		{/if}
 		<SettingsButton icon={InfoIcon} text="About" view="about" />
 	</section>
 </div>
diff --git a/src/lib/components/lnv/sidebar/settings/developer.svelte.ts b/src/lib/components/lnv/sidebar/settings/developer.svelte.ts
new file mode 100644
index 0000000..e71389c
--- /dev/null
+++ b/src/lib/components/lnv/sidebar/settings/developer.svelte.ts
@@ -0,0 +1,12 @@
+export function getDeveloperToggle() {
+	const value = localStorage.getItem("developer")
+	const state = $state({
+		current: value == null ? false : value
+	});
+
+	$effect(() => {
+		localStorage.setItem("developer", JSON.stringify(state.current));
+	});
+
+	return state;
+}
\ No newline at end of file