Simplify match history with filters and persistent pagination

src/routes/api/matches/+server.ts

@@ -1,3 +1,4 @@
+import { readMatchQuery } from '$lib/match-history-query.js';
 import { json } from '@sveltejs/kit';
 import { serverMatchHistory } from '$lib/server/fleet/match-history.js';
 
@@ -6,5 +7,8 @@ export function GET({ url }: { url: URL }) {
     if (!Number.isSafeInteger(limit) || limit < 1 || limit > 10000) {
         return json({ error: 'limit must be between 1 and 10000' }, { status: 400 });
     }
-    return json(serverMatchHistory(undefined, limit));
+    let query;
+    try { query = readMatchQuery(url.searchParams); }
+    catch { return json({ error: 'Invalid match history filters.' }, { status: 400 }); }
+    return json(serverMatchHistory(undefined, limit, query));
 }

src/routes/api/servers/[name]/matches/+server.ts

@@ -1,3 +1,4 @@
+import { readMatchQuery } from '$lib/match-history-query.js';
 import { json } from '@sveltejs/kit';
 import { serverMatchHistory } from '$lib/server/fleet/match-history.js';
 
@@ -6,5 +7,8 @@ export function GET({ params, url }: { params: { name: string }; url: URL }) {
     if (!Number.isSafeInteger(limit) || limit < 1 || limit > 10000) {
         return json({ error: 'limit must be between 1 and 10000' }, { status: 400 });
     }
-    return json(serverMatchHistory(params.name, limit));
+    let query;
+    try { query = readMatchQuery(url.searchParams); }
+    catch { return json({ error: 'Invalid match history filters.' }, { status: 400 }); }
+    return json(serverMatchHistory(params.name, limit, query));
 }

src/routes/matches/+page.server.ts

@@ -0,0 +1,9 @@
+import { error } from '@sveltejs/kit';
+import { serverMatchHistory } from '$lib/server/fleet/match-history.js';
+import { matchApiParams, matchPageSize, readMatchQuery } from '$lib/match-history-query.js';
+export function load({ url }: { url: URL }) {
+    let query;
+    try { query = readMatchQuery(matchApiParams(url)); }
+    catch { error(400, 'Invalid match history filters.'); }
+    return { history: serverMatchHistory(undefined, matchPageSize, query) };
+}

src/routes/matches/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    let { data }: { data: import('./$types').PageData } = $props();
     import MatchHistory from '$ui/components/MatchHistory.svelte';
     import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
 </script>
@@ -6,8 +7,8 @@
 <svelte:head><title>Match History · Electric Cherry</title></svelte:head>
 
 <div class="page">
-    <SectionHeader title="Match History" subtitle="Recorded matches across all servers." />
-    <MatchHistory />
+    <SectionHeader title="Match History" subtitle="Recorded matches across your instances." />
+    <MatchHistory initial={data.history} />
 </div>
 
 <style>