add sorting by recent, collection, and placement

src/components/stats/jacob/crop-stats.svelte

@@ -7,6 +7,7 @@
 	import { Crop, getCropFromName } from 'farming-weight';
 	import { onMount } from 'svelte';
 	import ContestList from '$comp/stats/jacob/contest-list.svelte';
+	import * as Select from '$ui/select';
 
 	type CropStats = components['schemas']['JacobDataDto']['stats'];
 
@@ -34,13 +35,31 @@
 			.map(([key]) => key)
 	);
 
-	const contests = $derived(
-		crops.length === 0 ? Object.values(contestsByCrop).flat() : crops.flatMap((c) => contestsByCrop[c] ?? [])
-	);
+	let sortBy = $state<string>('recent');
 
-	const recentContests = $derived(
-		contests?.sort((a, b) => (b?.timestamp ?? 0) - (a?.timestamp ?? 0)).slice(0, 30) ?? []
-	);
+	const contests = $derived(() => {
+		let filteredContests =
+			crops.length === 0 ? Object.values(contestsByCrop).flat() : crops.flatMap((c) => contestsByCrop[c] ?? []);
+
+		// Filter unclaimed contests when sorting by placement
+		if (sortBy === 'placement') {
+			filteredContests = filteredContests.filter((contest) => (contest.position ?? -1) > -1);
+		}
+
+		return filteredContests.sort((a, b) => {
+			switch (sortBy) {
+				case 'collection':
+					return (b?.collected ?? 0) - (a?.collected ?? 0);
+				case 'placement':
+					return (a?.position ?? 0) - (b?.position ?? 0);
+				case 'recent':
+				default:
+					return (b?.timestamp ?? 0) - (a?.timestamp ?? 0);
+			}
+		});
+	});
+
+	const recentContests = $derived(contests()?.slice(0, 30) ?? []);
 
 	const MEDAL_TYPES = ['diamond', 'platinum', 'gold', 'silver', 'bronze'] as const;
 
@@ -57,8 +76,8 @@
 	});
 
 	type ReducedCropStats = {
-		participations: 0;
-		firstPlaceScores: 0;
+		participations: number;
+		firstPlaceScores: number;
 		medals: Record<(typeof MEDAL_TYPES)[number], number>;
 	};
 
@@ -118,6 +137,30 @@
 				</div>
 			</div>
 		</div>
-		<ContestList contests={recentContests} remaining={contests.length - recentContests.length} />
+		<div class="w-full px-9">
+			<p class="text-md mb-1 leading-none">Sort By</p>
+			<Select.Simple
+				class="md:w-48"
+				value={sortBy}
+				change={(value) => {
+					sortBy = value ?? 'recent';
+				}}
+				options={[
+					{
+						value: 'recent',
+						label: 'Most Recent',
+					},
+					{
+						value: 'collection',
+						label: 'Highest Collection',
+					},
+					{
+						value: 'placement',
+						label: 'Best Placement',
+					},
+				]}
+			/>
+		</div>
+		<ContestList contests={recentContests} remaining={Math.max(0, contests().length - recentContests.length)} />
 	</div>
 </div>