editable activity name and type, year filter, chart-map hover sync

src/routes/activities/+page.svelte

@@ -4,6 +4,29 @@
 	import { fmtDistance, fmtDuration, fmtElevation } from '$lib/format';
 
 	let { data } = $props();
+
+	let selectedYear = $state<string | null>(null);
+
+	function activityYear(a: { date: string | null; created_at: string }): string {
+		return (a.date ?? a.created_at).slice(0, 4);
+	}
+
+	const filtered = $derived(
+		selectedYear === null
+			? data.activities
+			: data.activities.filter((a) => activityYear(a) === selectedYear)
+	);
+	const shown = $derived({
+		count: filtered.length,
+		distance_m: filtered.reduce((sum, a) => sum + a.distance_m, 0),
+		elev_gain_m: filtered.reduce((sum, a) => sum + a.elev_gain_m, 0),
+		moving_s: filtered.reduce((sum, a) => sum + (a.moving_s ?? a.duration_s ?? 0), 0)
+	});
+	const suffix = $derived(selectedYear === null ? '' : ` (${selectedYear})`);
+
+	function pickYear(year: string) {
+		selectedYear = selectedYear === year ? null : year;
+	}
 </script>
 
 <svelte:head>
@@ -12,14 +35,17 @@
 
 <h1>Your activities</h1>
 <p class="page-sub">
-	{data.activities.length} recorded {data.activities.length === 1 ? 'activity' : 'activities'}.
+	{shown.count} recorded {shown.count === 1 ? 'activity' : 'activities'}{suffix}.
+	{#if selectedYear}
+		<button class="clear-year" onclick={() => (selectedYear = null)}>Show all years</button>
+	{/if}
 </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)} />
+		<StatTile label="Distance{suffix}" value={fmtDistance(shown.distance_m)} />
+		<StatTile label="Ascent{suffix}" value={fmtElevation(shown.elev_gain_m)} />
+		<StatTile label="Moving time{suffix}" value={fmtDuration(shown.moving_s)} />
 	</div>
 
 	{#if data.years.length > 1}
@@ -37,7 +63,12 @@
 				</thead>
 				<tbody>
 					{#each data.years as y (y.year)}
-						<tr>
+						<tr
+							class="year-row"
+							class:on={selectedYear === y.year}
+							onclick={() => pickYear(y.year)}
+							title={selectedYear === y.year ? 'Show all years' : `Show only ${y.year}`}
+						>
 							<td>{y.year}</td>
 							<td>{y.count}</td>
 							<td>{fmtDistance(y.distance_m)}</td>
@@ -51,14 +82,18 @@
 	{/if}
 {/if}
 
-{#if data.activities.length === 0}
+{#if filtered.length === 0 && data.activities.length > 0}
+	<div class="card empty">
+		<p>No activities in {selectedYear}.</p>
+	</div>
+{:else if data.activities.length === 0}
 	<div class="card empty">
 		<p>No activities yet.</p>
 		<a class="btn" href="/upload">Upload a GPX file</a>
 	</div>
 {:else}
 	<div class="card list">
-		{#each data.activities as activity (activity.id)}
+		{#each filtered as activity (activity.id)}
 			<ActivityItem {activity} />
 		{/each}
 	</div>
@@ -98,6 +133,29 @@
 	.year-table td:first-child {
 		font-weight: 600;
 	}
+	.year-row {
+		cursor: pointer;
+	}
+	.year-row:hover td {
+		background: var(--wash);
+	}
+	.year-row.on td {
+		background: var(--accent-wash);
+	}
+	.year-row.on td:first-child {
+		color: var(--accent-strong);
+	}
+	.clear-year {
+		border: none;
+		background: none;
+		color: var(--accent-strong);
+		font: inherit;
+		font-size: 0.85rem;
+		font-weight: 500;
+		cursor: pointer;
+		padding: 0;
+		text-decoration: underline;
+	}
 	.list :global(.item:not(:last-child)) {
 		border-bottom: 1px solid var(--border);
 	}