feat: add more infos to info sidebar

src/lib/components/lnv/info/FuelStation.svelte

@@ -1,6 +1,7 @@
 <script>
 	import Badge from "$lib/components/ui/badge/badge.svelte";
 	import { getStations } from "$lib/services/MTSK";
+	import RequiresCapability from "../RequiresCapability.svelte";
 
 	let { tags, lat, lng } = $props();
 </script>
@@ -9,33 +10,34 @@
 <ul class="flex gap-2 flex-wrap">
 	{#each Object.entries(tags).filter( ([key]) => key.startsWith("fuel:"), ) as [key, tag] (key)}
 		<!-- <li>{key.replace("fuel:", "")}: {tag}</li> -->
-		<Badge>
+		{#if tag == "yes"}
-			{key.replace("fuel:", "")}
+			<Badge>
-			{#if tag !== "yes"}
+				{key.replace("fuel:", "")}
-				({tag})
+			</Badge>
-			{/if}
+		{/if}
-		</Badge>
 	{/each}
 </ul>
 
-<h3 class="text-lg font-bold mt-2">Prices</h3>
+<RequiresCapability capability="fuel">
-{#await getStations(lat, lng)}
+	<h3 class="text-lg font-bold mt-2">Prices</h3>
-	<p>Loading fuel prices...</p>
+	{#await getStations(lat, lng)}
-{:then stations}
+		<p>Loading fuel prices...</p>
-	{#if stations.stations.length > 0}
+	{:then stations}
-		{@const station = stations.stations[0]}
+		{#if stations.stations.length > 0}
-		{#if station.diesel}
+			{@const station = stations.stations[0]}
-			<p>Diesel: {station.diesel}</p>
+			{#if station.diesel}
+				<p>Diesel: {station.diesel}</p>
+			{/if}
+			{#if station.e10}
+				<p>E10: {station.e10}</p>
+			{/if}
+			{#if station.e5}
+				<p>E5: {station.e5}</p>
+			{/if}
+		{:else}
+			<p>No fuel prices available.</p>
 		{/if}
-		{#if station.e10}
+	{:catch err}
-			<p>E10: {station.e10}</p>
+		<p>Error loading fuel prices: {err.message}</p>
-		{/if}
+	{/await}
-		{#if station.e5}
+</RequiresCapability>
-			<p>E5: {station.e5}</p>
-		{/if}
-	{:else}
-		<p>No fuel prices available.</p>
-	{/if}
-{:catch err}
-	<p>Error loading fuel prices: {err.message}</p>
-{/await}

src/lib/components/lnv/info/InternetAccess.svelte

@@ -0,0 +1,21 @@
+<script>
+	import Badge from "$lib/components/ui/badge/badge.svelte";
+
+	let { tags } = $props();
+
+	const tag = $derived(tags.internet_access);
+	const splitter = $derived(tag.split(";"));
+</script>
+
+{#if tag != "no"}
+	<h3 class="text-lg font-bold mt-2">Internet Access</h3>
+	{#each splitter as value, _index (value)}
+		<Badge>{value}</Badge>
+	{/each}
+	{#if tags["internet_access:fee"] && tags["internet_access:fee"] != "no"}
+		<Badge>Fee: {tags["internet_access:fee"]}</Badge>
+	{/if}
+	{#if tags["internet_access:ssid"]}
+		<Badge>{tags["internet_access:ssid"]}</Badge>
+	{/if}
+{/if}

src/lib/components/lnv/info/RestaurantInfo.svelte

@@ -0,0 +1,22 @@
+<script>
+	import Badge from "$lib/components/ui/badge/badge.svelte";
+
+	let { tags } = $props();
+
+	const TAGS = ["cuisine", "indoor_seating", "outdoor_seating", "takeaway", "drive_through"];
+
+	const matchingTags = TAGS.filter(tag => tag in tags);
+</script>
+
+{#if matchingTags.length > 0}
+	<h3 class="text-lg font-bold mt-2">Restaurant</h3>
+	<ul class="flex gap-2 flex-wrap">
+		{#each matchingTags as tag}
+			{#if tag != "no"}
+				<Badge>
+					{tag}{tags[tag] == "yes" ? "" : ": " + tags[tag]}
+				</Badge>
+			{/if}
+		{/each}
+	</ul>
+{/if}

src/lib/components/lnv/sidebar/InfoSidebar.svelte

@@ -23,12 +23,16 @@
 	import MapAi from "../info/MapAI.svelte";
 	import RequiresCapability from "../RequiresCapability.svelte";
 	import { saved, saveLocations } from "$lib/saved.svelte";
+	import { getDeveloperToggle } from "./settings/developer.svelte";
+	import InternetAccess from "../info/InternetAccess.svelte";
+	import RestaurantInfo from "../info/RestaurantInfo.svelte";
 
 	// let { feature }: { feature: Feature } = $props();
 
 	// let Icon = $derived(POIIcons[feature.properties.osm_key + "=" + feature.properties.osm_value]);
 
 	let { lat, lng }: { lat: number; lng: number } = $props();
+	const dev = getDeveloperToggle();
 
 	function getIcon(
 		tags: Record<string, string>,
@@ -207,6 +211,16 @@
 							<BriefcaseIcon />
 							Set as Work
 						</Button>
+						{#if dev.current}
+							<Button
+								variant="outline"
+								onclick={() => {
+									alert(JSON.stringify(elements, null, 3))
+									console.log(elements);
+								}}>
+								Show raw data
+							</Button>
+						{/if}
 					</div>
 				</Popover.Content>
 			</Popover.Root>
@@ -228,10 +242,14 @@
 			<OpeningHours hours={tags.opening_hours} {lat} lon={lng} />
 		{/if}
 
+		{#if tags.internet_access}
+			<InternetAccess {tags} />
+		{/if}
+
+		<RestaurantInfo {tags} />
+
 		{#if tags.amenity == "fuel"}
-			<RequiresCapability capability="fuel">
+			<FuelStation {tags} {lat} {lng} />
-				<FuelStation {tags} {lat} {lng} />
-			</RequiresCapability>
 		{/if}
 
 		<!-- any payment:* tag -->
@@ -239,7 +257,7 @@
 			<h3 class="text-lg font-bold mt-2">Payment Methods</h3>
 			<ul style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
 				{#each Object.entries(tags).filter( ([key]) => key.startsWith("payment:"), ) as [key, value] (key)}
-					<Badge>{key.replace("payment:", "")}: {value}</Badge>
+					<Badge>{key.replace("payment:", "")}{value == "yes" ? "" : ": " + value}</Badge>
 				{/each}
 			</ul>
 		{/if}
@@ -249,8 +267,6 @@
 		</RequiresCapability>
 
 		<span style="color: #acacac;">&copy; OpenStreetMap</span>
-
-		<pre>{JSON.stringify(elements, null, 2)}</pre>
 	{/if}
 {:catch err}
 	<SidebarHeader