feat: hide dev options by default

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>

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>

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>

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;
+}