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

src/routes/users/[username]/+page.svelte

@@ -2,7 +2,7 @@
 	import Avatar from '$lib/components/Avatar.svelte';
 	import ActivityItem from '$lib/components/ActivityItem.svelte';
 	import StatTile from '$lib/components/StatTile.svelte';
-	import { fmtDistance, fmtDuration, fmtElevation } from '$lib/format';
+	import { fmtDistance, fmtDuration, fmtElapsed, fmtElevation } from '$lib/format';
 
 	let { data } = $props();
 	const p = $derived(data.profile);
@@ -41,6 +41,28 @@
 	</div>
 {/if}
 
+{#if data.segments.length > 0}
+	<h2>Segments</h2>
+	<div class="card seg-list">
+		{#each data.segments as segment (segment.id)}
+			<a class="seg-row" href="/segments/{segment.id}">
+				<span class="seg-name">
+					{#if segment.rank === 1}<span class="crown" title="Course record">👑</span>{/if}
+					{segment.name}
+				</span>
+				<span class="seg-meta">
+					{fmtDistance(segment.distance_m)} · {segment.attempts}
+					{segment.attempts === 1 ? 'attempt' : 'attempts'}
+					{#if segment.best_s !== null}
+						· best {fmtElapsed(segment.best_s)}
+						{#if segment.rank !== null}· #{segment.rank}{/if}
+					{/if}
+				</span>
+			</a>
+		{/each}
+	</div>
+{/if}
+
 <h2>Recent activities</h2>
 {#if data.activities.length === 0}
 	<div class="card empty">No activities yet.</div>
@@ -91,6 +113,32 @@
 	.list :global(.item:not(:last-child)) {
 		border-bottom: 1px solid var(--border);
 	}
+	.seg-list > .seg-row:not(:last-child) {
+		border-bottom: 1px solid var(--border);
+	}
+	.seg-row {
+		display: flex;
+		flex-direction: column;
+		padding: 0.75rem 1.15rem;
+		text-decoration: none;
+		color: inherit;
+		transition: background 120ms;
+	}
+	.seg-row:hover {
+		background: var(--wash);
+	}
+	.seg-name {
+		font-weight: 600;
+		font-size: 0.92rem;
+	}
+	.crown {
+		font-size: 0.85rem;
+	}
+	.seg-meta {
+		font-size: 0.8rem;
+		color: var(--text-secondary);
+		font-variant-numeric: tabular-nums;
+	}
 	.empty {
 		padding: 1.5rem;
 		text-align: center;