public home page with community activity overview

src/routes/activities/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import ActivityItem from '$lib/components/ActivityItem.svelte';
+	import StatTile from '$lib/components/StatTile.svelte';
+	import { fmtDistance, fmtDuration, fmtElevation } from '$lib/format';
 
 	let { data } = $props();
 </script>
@@ -8,11 +10,19 @@
 	<title>Activities · Streba</title>
 </svelte:head>
 
-<h1>Activities</h1>
+<h1>Your activities</h1>
 <p class="page-sub">
 	{data.activities.length} recorded {data.activities.length === 1 ? 'activity' : 'activities'}.
 </p>
 
+{#if data.activities.length > 0}
+	<div class="kpis">
+		<StatTile label="Total distance" value={fmtDistance(data.totals.distance_m)} />
+		<StatTile label="Total ascent" value={fmtElevation(data.totals.elev_gain_m)} />
+		<StatTile label="Moving time" value={fmtDuration(data.totals.moving_s)} />
+	</div>
+{/if}
+
 {#if data.activities.length === 0}
 	<div class="card empty">
 		<p>No activities yet.</p>
@@ -27,6 +37,12 @@
 {/if}
 
 <style>
+	.kpis {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+		gap: 0.75rem;
+		margin-bottom: 1.25rem;
+	}
 	.list :global(.item:not(:last-child)) {
 		border-bottom: 1px solid var(--border);
 	}