feat: move developer buttons to dev options

src/lib/components/lnv/Sidebar.svelte

@@ -32,6 +32,7 @@
 	import SettingsSidebar from "./sidebar/settings/SettingsSidebar.svelte";
 	import AboutSidebar from "./sidebar/settings/AboutSidebar.svelte";
 	import OfflineMapsSidebar from "./sidebar/settings/OfflineMapsSidebar.svelte";
+	import DeveloperSidebar from "./sidebar/settings/DeveloperSidebar.svelte";
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const views: Record<string, Component<any>> = {
@@ -43,7 +44,8 @@
 		user: UserSidebar,
 		settings: SettingsSidebar,
 		about: AboutSidebar,
-		"offline-maps": OfflineMapsSidebar
+		"offline-maps": OfflineMapsSidebar,
+		"dev-options": DeveloperSidebar
 	};
 
 	let isDragging = false;
@@ -207,27 +209,6 @@
 					>
 						Join Remote Location
 					</Button>
-					<Button
-						variant="outline"
-						onclick={async () => {
-							// await say("This is a test of the text to speech system.");
-							await say("Dies ist ein Test des Text-zu-Sprache-Systems.");
-						}}
-					>
-						Test TTS
-					</Button>
-					<Button
-						variant="outline"
-						onclick={async () => {
-              const name = prompt("Name?");
-              if(!name) return;
-							const url = prompt("URL?");
-							if (!url) return;
-							await downloadPMTiles(url, name);
-						}}
-					>
-						Test Offline tiles
-					</Button>
 				</div>
 			</Popover.Content>
 		</Popover.Root>

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

@@ -0,0 +1,41 @@
+<script>
+	import { MapIcon, SpeechIcon } 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";
+</script>
+
+<SidebarHeader>
+	Developer Settings
+</SidebarHeader>
+
+<div id="sections">
+	<section>
+		<h2>Test</h2>
+		<SettingsButton icon={SpeechIcon} text="Test TTS" onclick={async () => {
+			await say("Test")
+		}} />
+		<SettingsButton icon={MapIcon} text="Download tiles from URL" onclick={async () => {
+			const name = prompt("Name?");
+			if(!name) return;
+			const url = prompt("URL?");
+			if(!url) return;
+			await downloadPMTiles(url, name);
+		}} />
+	</section>
+</div>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	#sections {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+</style>

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

@@ -22,7 +22,7 @@
 	
 	<section>
 		<h2>About</h2>
-		<SettingsButton icon={CodeIcon} text="Developer Settings" disabled />
+		<SettingsButton icon={CodeIcon} text="Developer Settings" view="dev-options" />
 		<SettingsButton icon={InfoIcon} text="About" view="about" />
 	</section>
 </div>