streba/src/routes/activities/+page.svelte

<script lang="ts">
	import ActivityItem from '$lib/components/ActivityItem.svelte';
	import StatTile from '$lib/components/StatTile.svelte';
	import { countsTowardAscent } from '$lib/activity-rules';
	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 + (countsTowardAscent(a.type) ? a.elev_gain_m : 0),
			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>
	<title>Activities · Streba</title>
</svelte:head>

<h1>Your activities</h1>
<p class="page-sub">
	{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="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}
		<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
							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>
							<td>{fmtElevation(y.elev_gain_m)} ↑</td>
							<td>{fmtDuration(y.moving_s)}</td>
						</tr>
					{/each}
				</tbody>
			</table>
		</div>
	{/if}
{/if}

{#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 filtered as activity (activity.id)}
			<ActivityItem {activity} />
		{/each}
	</div>
{/if}

<style>
	.kpis {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		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;
	}
	.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);
	}
	.empty {
		padding: 2.5rem;
		text-align: center;
	}
	.empty p {
		color: var(--text-secondary);
		margin: 0 0 1rem;
	}
</style>