persistent map with animated transitions and dimmed overview on detail pages

src/routes/+layout.server.ts

@@ -1,5 +1,38 @@
+import { db } from '$lib/server/db';
 import type { LayoutServerLoad } from './$types';
 
 export const load: LayoutServerLoad = ({ locals }) => {
-	return { user: locals.user };
+	// the overview: every user's tracks, thinned for the persistent map
+	const rows = db
+		.prepare(
+			`SELECT a.id, a.name, a.type, a.date, a.distance_m, a.points, u.username
+			 FROM activities a JOIN users u ON u.id = a.user_id`
+		)
+		.all() as {
+		id: number;
+		name: string;
+		type: string;
+		date: string | null;
+		distance_m: number;
+		points: string;
+		username: string;
+	}[];
+	const tracks = rows.map((row) => {
+		const points = JSON.parse(row.points) as { lat: number; lon: number }[];
+		const step = Math.max(1, Math.floor(points.length / 300));
+		const latlngs = points
+			.filter((_, i) => i % step === 0 || i === points.length - 1)
+			.map((p) => [p.lat, p.lon] as [number, number]);
+		return {
+			id: row.id,
+			name: row.name,
+			username: row.username,
+			type: row.type,
+			date: row.date,
+			distance_m: row.distance_m,
+			latlngs
+		};
+	});
+
+	return { user: locals.user, tracks };
 };