Make UI language, timestamps and live feedback consistent

src/lib/ui/components/PlayerMatchCards.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+    import RelativeTime from '$ui/components/RelativeTime.svelte';
     import type { PlayerMatch } from '$lib/leaderboard.js';
-    import { timeFormat } from '$ui/stores/time-zone.js';
     import { serverTitle } from '$ui/server-labels.js';
     import { contextHref } from '$lib/navigation-context.js';
+    import { playerCompletionLabel } from '$ui/player-match.js';
     let { matches, returnTo }: { matches: PlayerMatch[]; returnTo?: string } = $props();
     const number = new Intl.NumberFormat('en-US');
 </script>
@@ -11,7 +12,7 @@
         <article>
             <h3>{#if match.status === 'completed'}<a href={contextHref(`/matches/${match.id}`, returnTo ?? "/leaderboard")}>{match.mapName} · Match #{match.id}</a>{:else}{match.mapName} · Match #{match.id}{/if}</h3>
             <p>{serverTitle(match.server)}{match.server_deleted_at ? ' · Removed server' : ''}</p>
-            <p><time datetime={match.startedAt}>{$timeFormat.dateTime(match.startedAt)}</time> · {match.completed ? 'Completion credited' : 'No completion credit'}</p>
+            <p><RelativeTime value={match.startedAt} /> · {playerCompletionLabel(match)}</p>
             <dl><div><dt>Round</dt><dd>{number.format(match.highestRound)}</dd></div><div><dt>Kills</dt><dd>{number.format(match.kills)}</dd></div><div><dt>Revives</dt><dd>{number.format(match.revives)}</dd></div></dl>
         </article>
     {/each}