Link personal bests to their recorded matches

src/routes/leaderboard/+page.svelte

@@ -8,6 +8,7 @@
     import Button from '$ui/components/primitives/Button.svelte';
     import EmptyState from '$ui/components/primitives/EmptyState.svelte';
     import CopyValue from '$ui/components/CopyValue.svelte';
+    import RecordSource from '$ui/components/RecordSource.svelte';
 
     const number = new Intl.NumberFormat('en-US');
     const pageSize = 50;
@@ -212,7 +213,7 @@
                                         <a class="player-name" href={playerProfileHref(entry.guid)}>{entry.name}</a>
                                         <div class="identity"><CopyValue value={entry.guid} label={`GUID for ${entry.name}`} /></div>
                                     </th>
-                                    {#each columns as key (key)}<td class="stat" class:selected={key === metric}>{number.format(entry[key])}</td>{/each}
+                                    {#each columns as key (key)}<td class="stat" class:selected={key === metric}>{number.format(entry[key])}{#if key === 'highestRound' || key === 'bestKills' || key === 'bestScore'}<RecordSource evidence={entry.records[key]} />{/if}</td>{/each}
                                 </tr>
                             {/each}
                         </tbody>

src/routes/leaderboard/players/[guid]/+page.svelte

@@ -6,6 +6,7 @@
     import Button from '$ui/components/primitives/Button.svelte';
     import CopyValue from '$ui/components/CopyValue.svelte';
     import Badge from '$ui/components/primitives/Badge.svelte';
+    import RecordSource from '$ui/components/RecordSource.svelte';
 
     let { data }: { data: { profile: PlayerProfile } } = $props();
     const profile = $derived(data.profile);
@@ -40,7 +41,7 @@
         <h2 id="totals-title">Lifetime stats</h2>
         <div class="stats">
             {#each leaderboardMetrics as metric (metric.key)}
-                <div class="stat" class:record={metric.key === 'highestRound'}><span>{metric.label}</span><strong>{number.format(stats[metric.key])}</strong></div>
+                <div class="stat" class:record={metric.key === 'highestRound'}><span>{metric.label}</span><strong>{number.format(stats[metric.key])}</strong>{#if metric.key === 'highestRound' || metric.key === 'bestKills' || metric.key === 'bestScore'}<RecordSource evidence={profile.records[metric.key]} />{/if}</div>
             {/each}
         </div>
     </section>
@@ -65,7 +66,7 @@
                 <thead><tr><th scope="col">Map</th>{#each leaderboardMetrics as metric}<th scope="col">{metric.label}</th>{/each}</tr></thead>
                 <tbody>{#each profile.maps as map (`${map.game}:${map.key}`)}
                     <tr><th scope="row"><a href={`/leaderboard?${new URLSearchParams({ game: map.game, map: map.key })}`}>{map.name}</a><small>{gameName(map.game)}</small><small>Last played {date(map.lastSeen)}</small></th>
-                    {#each leaderboardMetrics as metric}<td class:best={metric.key === 'highestRound'}>{number.format(map[metric.key])}</td>{/each}</tr>
+                    {#each leaderboardMetrics as metric}<td class:best={metric.key === 'highestRound'}>{number.format(map[metric.key])}{#if metric.key === 'highestRound' || metric.key === 'bestKills' || metric.key === 'bestScore'}<RecordSource evidence={map.records[metric.key]} />{/if}</td>{/each}</tr>
                 {/each}</tbody>
             </table>
         </div>