Make UI language, timestamps and live feedback consistent

src/lib/ui/components/MatchHistory.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import RelativeTime from '$ui/components/RelativeTime.svelte';
     import { untrack } from 'svelte';
     import { page } from '$app/stores';
     import { contextHref } from '$lib/navigation-context.js';
@@ -6,7 +7,7 @@
     import { timeFormat, timeZone } from '$ui/stores/time-zone.js';
     import type { MatchHistoryResponse } from '$lib/match-history.js';
     import { matchApiParams, matchHistoryHref, matchPageSize, readMatchQuery, type MatchHistoryQuery, type MatchSort } from '$lib/match-history-query.js';
-    import { matchInstanceLabel, matchStartedLabel } from '$ui/match-history.js';
+    import { matchInstanceLabel } from '$ui/match-history.js';
     import { pollVisible } from '$ui/poll.js';
     import { formatDuration } from '$ui/duration.js';
     import Button from './primitives/Button.svelte';
@@ -121,11 +122,11 @@
                 </tr></thead>
                 <tbody>{#each data.matches as match (match.id)}
                     <tr>
-                        <td><time datetime={match.startedAt} title={$timeFormat.dateTime(match.startedAt)}>{matchStartedLabel(match.startedAt, $timeZone)}</time></td>
+                        <td><RelativeTime value={match.startedAt} /></td>
                         <td class="match">
                             {#if match.status === 'completed'}<a class="match-link" href={contextHref(`/matches/${match.id}`, $page.url)} aria-label={`View ${match.map} match ${match.id} from ${$timeFormat.dateTime(match.startedAt)}`}>{match.map} · Match #{match.id}</a>
                             {:else}<span class="match-name">{match.map}</span>{/if}
-                            <small class="mobile-match-context"><time datetime={match.startedAt}>{matchStartedLabel(match.startedAt, $timeZone)}</time> · {match.status === 'active' ? 'In progress' : match.status === 'completed' ? 'Completed' : 'Interrupted'}{match.durationMs !== null ? ` · ${formatDuration(match.durationMs)}` : ''}</small>
+                            <small class="mobile-match-context"><RelativeTime value={match.startedAt} /> · {match.status === 'active' ? 'In progress' : match.status === 'completed' ? 'Completed' : 'Interrupted'}{match.durationMs !== null ? ` · ${formatDuration(match.durationMs)}` : ''}</small>
                             {#if server === undefined}<div class="instance">
                                 <span title={match.server}>{matchInstanceLabel(match)}</span>{#if match.server_deleted_at}<span> · Historical instance</span>{/if}
                             </div>{/if}