Fix navigation state bugs (round/player URL, map switch, table state on back)

Bug 1: Map dropdown changed the URL but kept the previous map's video, player
positions, etc. Same component instance was reused across `[mapName]` route
changes, so $state and onMount didn't re-fire. Replace onMount with an $effect
that watches a routeKey derived from data.match.{match_id,map_name}; when it
changes, re-read URL params and reset round/player/view + reload previews.

Bug 2: Home links omitted defaults so the destination URL wasn't
self-contained. matchUrl() now always emits ?round=&player=&view= so reloads,
shares, and back-nav stay deterministic.

Bug 3: Tab choice + search/sort/pagination/filter were all internal MatchTable
state and got lost on back-nav. Lift the state to the home page (one slot per
tab) via $bindable props on MatchTable, and use SvelteKit's snapshot API
(capture/restore) on +page to persist {view, tables} across history navigation.

src/lib/components/match-table/match-table.svelte

@@ -23,10 +23,15 @@
 		columns: ColumnDef<TData>[];
 		searchPlaceholder?: string;
 		mapOptions?: string[];
-		initialSorting?: SortingState;
-		initialPageSize?: number;
 		getRowHref?: (row: TData) => string;
 		emptyMessage?: string;
+		// Bindable state so the parent route can persist it across navigations
+		// via SvelteKit's snapshot API.
+		pagination?: PaginationState;
+		sorting?: SortingState;
+		columnFilters?: ColumnFiltersState;
+		columnVisibility?: VisibilityState;
+		globalFilter?: string;
 	}
 
 	let {
@@ -34,20 +39,15 @@
 		columns,
 		searchPlaceholder,
 		mapOptions = [],
-		initialSorting = [],
-		initialPageSize = 25,
 		getRowHref,
-		emptyMessage = 'No results.'
+		emptyMessage = 'No results.',
+		pagination = $bindable<PaginationState>({ pageIndex: 0, pageSize: 25 }),
+		sorting = $bindable<SortingState>([]),
+		columnFilters = $bindable<ColumnFiltersState>([]),
+		columnVisibility = $bindable<VisibilityState>({}),
+		globalFilter = $bindable<string>('')
 	}: Props = $props();
 
-	// svelte-ignore state_referenced_locally
-	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: initialPageSize });
-	// svelte-ignore state_referenced_locally
-	let sorting = $state<SortingState>(initialSorting);
-	let columnFilters = $state<ColumnFiltersState>([]);
-	let columnVisibility = $state<VisibilityState>({});
-	let globalFilter = $state('');
-
 	// Reset to first page whenever filters change so users don't end up on an
 	// empty page after narrowing the result set.
 	$effect(() => {

src/routes/+page.svelte

@@ -19,7 +19,13 @@
 	import MatchTable from '$lib/components/match-table/match-table.svelte';
 	import { buildMapRows, buildMatchRows, buildRoundRows } from '$lib/components/match-table/rows';
 	import { mapColumns, matchColumns, roundColumns } from '$lib/components/match-table/columns';
-	import type { PageData } from './$types';
+	import type {
+		ColumnFiltersState,
+		PaginationState,
+		SortingState,
+		VisibilityState
+	} from '@tanstack/table-core';
+	import type { PageData, Snapshot } from './$types';
 
 	let { data }: { data: PageData } = $props();
 
@@ -45,16 +51,60 @@
 
 	const mapOptions = $derived(Array.from(new Set(data.matches.map((m) => m.map_name))).sort());
 
+	// Always emit explicit ?round=&player=&view= so the destination URL is
+	// self-contained — no implicit defaults for back/share to lose.
+	function matchUrl(matchId: number, mapName: string, round: number) {
+		const params = new URLSearchParams({
+			round: String(round),
+			player: '0',
+			view: 'grid'
+		});
+		return `/match/${encodeURIComponent(matchId)}/${encodeURIComponent(mapName)}?${params}`;
+	}
+
 	const linkToMap = (m: { match_id: number; map_name: string }) =>
-		`/match/${encodeURIComponent(m.match_id)}/${encodeURIComponent(m.map_name)}`;
+		matchUrl(m.match_id, m.map_name, 1);
 
 	const linkToRound = (r: { match_id: number; map_name: string; round: number }) =>
-		`${linkToMap(r)}?round=${r.round}`;
+		matchUrl(r.match_id, r.map_name, r.round);
 
 	const linkToFirstMap = (m: { match_id: number; first_map: string }) =>
-		`/match/${encodeURIComponent(m.match_id)}/${encodeURIComponent(m.first_map)}`;
+		matchUrl(m.match_id, m.first_map, 1);
+
+	type TabKey = 'rounds' | 'maps' | 'matches';
+
+	type TableState = {
+		pagination: PaginationState;
+		sorting: SortingState;
+		columnFilters: ColumnFiltersState;
+		columnVisibility: VisibilityState;
+		globalFilter: string;
+	};
 
-	let view = $state<'rounds' | 'maps' | 'matches'>('rounds');
+	const newTableState = (): TableState => ({
+		pagination: { pageIndex: 0, pageSize: 25 },
+		sorting: [{ id: 'match_date', desc: true }],
+		columnFilters: [],
+		columnVisibility: {},
+		globalFilter: ''
+	});
+
+	let view = $state<TabKey>('rounds');
+	const tables = $state<Record<TabKey, TableState>>({
+		rounds: newTableState(),
+		maps: newTableState(),
+		matches: newTableState()
+	});
+
+	// Persist tab + table state across navigations (back from a match page,
+	// preload, etc.) using SvelteKit's snapshot API.
+	export const snapshot: Snapshot<{ view: TabKey; tables: Record<TabKey, TableState> }> = {
+		capture: () => ({ view, tables: $state.snapshot(tables) }),
+		restore: (s) => {
+			view = s.view;
+			Object.assign(tables, s.tables);
+		}
+	};
 
 	const motivations = [
 		{
@@ -315,9 +365,13 @@
 						columns={roundColumns}
 						{mapOptions}
 						searchPlaceholder="Search event, team, map…"
-						initialSorting={[{ id: 'match_date', desc: true }]}
 						getRowHref={linkToRound}
 						emptyMessage="No rounds yet. Round indexes load from the rounds parquet shards."
+						bind:pagination={tables.rounds.pagination}
+						bind:sorting={tables.rounds.sorting}
+						bind:columnFilters={tables.rounds.columnFilters}
+						bind:columnVisibility={tables.rounds.columnVisibility}
+						bind:globalFilter={tables.rounds.globalFilter}
 					/>
 				</Tabs.Content>
 
@@ -327,8 +381,12 @@
 						columns={mapColumns}
 						{mapOptions}
 						searchPlaceholder="Search event, team, map…"
-						initialSorting={[{ id: 'match_date', desc: true }]}
 						getRowHref={linkToMap}
+						bind:pagination={tables.maps.pagination}
+						bind:sorting={tables.maps.sorting}
+						bind:columnFilters={tables.maps.columnFilters}
+						bind:columnVisibility={tables.maps.columnVisibility}
+						bind:globalFilter={tables.maps.globalFilter}
 					/>
 				</Tabs.Content>
 
@@ -337,8 +395,12 @@
 						data={matchRows}
 						columns={matchColumns}
 						searchPlaceholder="Search event or team…"
-						initialSorting={[{ id: 'match_date', desc: true }]}
 						getRowHref={linkToFirstMap}
+						bind:pagination={tables.matches.pagination}
+						bind:sorting={tables.matches.sorting}
+						bind:columnFilters={tables.matches.columnFilters}
+						bind:columnVisibility={tables.matches.columnVisibility}
+						bind:globalFilter={tables.matches.globalFilter}
 					/>
 				</Tabs.Content>
 			{/if}

src/routes/match/[matchId]/[mapName]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import { onMount } from 'svelte';
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
 	import Header from '$lib/components/header.svelte';
@@ -25,21 +24,24 @@
 
 	let { data }: { data: PageData } = $props();
 
-	const initialRound = (() => {
+	function readRoundFromUrl(rounds: { round: number }[]): number {
 		const param = page.url.searchParams.get('round');
 		const parsed = param ? Number(param) : NaN;
-		if (Number.isFinite(parsed) && data.rounds.some((r) => r.round === parsed)) return parsed;
-		return data.rounds[0]?.round ?? 1;
-	})();
-
-	let currentRoundNum = $state<number>(initialRound);
-	let currentPlayer = $state<number>(
-		(() => {
-			const p = page.url.searchParams.get('player');
-			const parsed = p ? Number(p) : NaN;
-			return Number.isFinite(parsed) && parsed >= 0 && parsed < 10 ? parsed : 0;
-		})()
-	);
+		if (Number.isFinite(parsed) && rounds.some((r) => r.round === parsed)) return parsed;
+		return rounds[0]?.round ?? 1;
+	}
+	function readPlayerFromUrl(): number {
+		const param = page.url.searchParams.get('player');
+		const parsed = param ? Number(param) : NaN;
+		return Number.isFinite(parsed) && parsed >= 0 && parsed < 10 ? parsed : 0;
+	}
+	function readViewFromUrl(): 'single' | 'grid' {
+		return page.url.searchParams.get('view') === 'single' ? 'single' : 'grid';
+	}
+
+	// svelte-ignore state_referenced_locally
+	let currentRoundNum = $state<number>(readRoundFromUrl(data.rounds));
+	let currentPlayer = $state<number>(readPlayerFromUrl());
 
 	let previews = $state<PreviewChunk[]>([]);
 	let previewsLoading = $state(false);
@@ -71,9 +73,7 @@
 	let preloadAllPlayers = $state(false);
 	let preloadedPlayers = $state(new Set<number>());
 
-	let viewMode = $state<'single' | 'grid'>(
-		page.url.searchParams.get('view') === 'single' ? 'single' : 'grid'
-	);
+	let viewMode = $state<'single' | 'grid'>(readViewFromUrl());
 
 	const playerChunks = $derived(
 		previews.filter((p) => p.player === currentPlayer).sort((a, b) => a.chunk_index - b.chunk_index)
@@ -340,8 +340,35 @@
 		}
 	}
 
-	onMount(() => {
-		loadRound(currentRoundNum);
+	// React to (matchId, mapName) changes so navigating between maps via the
+	// Select dropdown — which only swaps the route param, not the component —
+	// resets local state and reloads the new round previews.
+	let prevRouteKey = '';
+	$effect(() => {
+		const routeKey = `${data.match.match_id}|${data.match.map_name}`;
+		if (routeKey === prevRouteKey) return;
+		prevRouteKey = routeKey;
+
+		const newRound = readRoundFromUrl(data.rounds);
+		const newPlayer = readPlayerFromUrl();
+		const newView = readViewFromUrl();
+
+		untrack(() => {
+			currentRoundNum = newRound;
+			currentPlayer = newPlayer;
+			viewMode = newView;
+			previews = [];
+			previewsError = null;
+			virtualTime = 0;
+			initialVirtualTime = 0;
+			activeVideoEnded = false;
+			bufferedRanges = [];
+			preloadedPlayers = new Set();
+			preloadAllPlayers = false;
+			masterPaused = false;
+
+			loadRound(newRound);
+		});
 	});
 </script>