pregenerated segments, tolerant matching, profile segment list, segment map

src/routes/segments/[id]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
 	import MapSlot from '$lib/components/MapSlot.svelte';
 	import StatTile from '$lib/components/StatTile.svelte';
 	import { mapState } from '$lib/map-state.svelte';
@@ -26,10 +27,27 @@
 	<title>{s.name} · Streba</title>
 </svelte:head>
 
+<MapSlot />
+
 <a class="back" href="/segments">← Segments</a>
 
-<h1>{s.name}</h1>
-<p class="page-sub">Segment · created {fmtDate(s.created_at.slice(0, 10))}</p>
+<div class="head">
+	<div>
+		<h1>{s.name}</h1>
+		<p class="page-sub">Segment · created {fmtDate(s.created_at.slice(0, 10))}</p>
+	</div>
+	{#if data.canDelete}
+		<form
+			method="POST"
+			action="?/delete"
+			use:enhance={({ cancel }) => {
+				if (!confirm('Delete this segment and all its efforts?')) cancel();
+			}}
+		>
+			<button class="btn danger" type="submit">Delete</button>
+		</form>
+	{/if}
+</div>
 
 <div class="kpis">
 	<StatTile label="Distance" value={fmtDistance(s.distance_m)} />
@@ -81,6 +99,12 @@
 		background: var(--wash);
 		color: var(--text-primary);
 	}
+	.head {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		gap: 1rem;
+	}
 	.kpis {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));