Make UI language, timestamps and live feedback consistent

src/routes/matches/[id]/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+    import RelativeTime from '$ui/components/RelativeTime.svelte';
     import { page } from '$app/stores';
     import { contextHref } from '$lib/navigation-context.js';
     import Breadcrumbs from '$ui/components/primitives/Breadcrumbs.svelte';
     import type { MatchDetail } from '$lib/match-history.js';
     import { playerProfileHref } from '$lib/leaderboard.js';
-    import { timeFormat } from '$ui/stores/time-zone.js';
     import { formatDuration } from '$ui/duration.js';
     import HistoricalServerIdentity from '$ui/components/HistoricalServerIdentity.svelte';
     import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
@@ -48,8 +48,8 @@
         <h2>Match details</h2>
         <dl class="details">
             <div class="server"><dt>Server</dt><dd><HistoricalServerIdentity name={match.server} deletedAt={match.server_deleted_at} href={`/servers/${encodeURIComponent(match.server)}?tab=matches`} /></dd></div>
-            <div><dt>{match.startObserved ? 'Started' : 'First observed'}</dt><dd><time datetime={match.startedAt}>{$timeFormat.dateTime(match.startedAt)}</time></dd></div>
-            <div><dt>Ended</dt><dd>{#if match.endedAt}<time datetime={match.endedAt}>{$timeFormat.dateTime(match.endedAt)}</time>{:else}—{/if}</dd></div>
+            <div><dt>{match.startObserved ? 'Started' : 'First observed'}</dt><dd><RelativeTime value={match.startedAt} /></dd></div>
+            <div><dt>Ended</dt><dd>{#if match.endedAt}<RelativeTime value={match.endedAt} />{:else}—{/if}</dd></div>
             <div><dt>Players at start</dt><dd>{match.startPlayers ?? '—'}</dd></div>
         </dl>
         {#if !match.startObserved}<p class="note">The match start was not recorded. The first observation is shown above; the full game time is unknown.</p>{/if}
@@ -76,7 +76,7 @@
                                 </th>
                                 <td class="participation"><Badge variant={player.presentAtEnd ? 'online' : 'neutral'}>{player.presentAtEnd ? 'At match end' : 'Not at match end'}</Badge>{#if !player.hasStats}<small>No stats recorded</small>{/if}</td>
                                 {#each stats as stat}<td class:round={stat.key === 'highestRound'}>{player[stat.key] === null ? '—' : number.format(player[stat.key]!)}</td>{/each}
-                                <td><time datetime={player.lastSeenAt}>{$timeFormat.dateTime(player.lastSeenAt)}</time></td>
+                                <td><RelativeTime value={player.lastSeenAt} /></td>
                             </tr>
                         {/each}
                     </tbody>