track info pane, per-type colors, yearly stats

src/routes/activities/+page.svelte

@@ -21,6 +21,34 @@
 		<StatTile label="Total ascent" value={fmtElevation(data.totals.elev_gain_m)} />
 		<StatTile label="Moving time" value={fmtDuration(data.totals.moving_s)} />
 	</div>
+
+	{#if data.years.length > 1}
+		<h2>Per year</h2>
+		<div class="card year-table-wrap">
+			<table class="year-table">
+				<thead>
+					<tr>
+						<th>Year</th>
+						<th>Activities</th>
+						<th>Distance</th>
+						<th>Ascent</th>
+						<th>Moving time</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each data.years as y (y.year)}
+						<tr>
+							<td>{y.year}</td>
+							<td>{y.count}</td>
+							<td>{fmtDistance(y.distance_m)}</td>
+							<td>{fmtElevation(y.elev_gain_m)} ↑</td>
+							<td>{fmtDuration(y.moving_s)}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
 {/if}
 
 {#if data.activities.length === 0}
@@ -43,6 +71,33 @@
 		gap: 0.75rem;
 		margin-bottom: 1.25rem;
 	}
+	.year-table-wrap {
+		margin-bottom: 1.25rem;
+		overflow-x: auto;
+	}
+	.year-table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 0.88rem;
+	}
+	.year-table th {
+		text-align: left;
+		font-weight: 500;
+		font-size: 0.78rem;
+		color: var(--text-muted);
+		padding: 0.6rem 1rem 0.35rem;
+		border-bottom: 1px solid var(--border);
+	}
+	.year-table td {
+		padding: 0.5rem 1rem;
+		font-variant-numeric: tabular-nums;
+	}
+	.year-table tbody tr:not(:last-child) td {
+		border-bottom: 1px solid var(--border);
+	}
+	.year-table td:first-child {
+		font-weight: 600;
+	}
 	.list :global(.item:not(:last-child)) {
 		border-bottom: 1px solid var(--border);
 	}