Make UI language, timestamps and live feedback consistent

src/routes/server-keys/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { timeFormat } from '$ui/stores/time-zone.js';
+    import RelativeTime from '$ui/components/RelativeTime.svelte';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
@@ -112,7 +112,7 @@
             <tr>
                 <td><strong>{key.game.toUpperCase()}</strong><span class="key-label">{key.label || 'Unlabeled key'}</span></td>
                 <td>{#if key.assigned_servers.length}<span>Assigned</span>{#each key.assigned_servers as name}<div class="assignment"><ServerIdentity {name} /><code>{name}</code></div>{/each}{:else}<span class="available">Available</span>{/if}</td>
-                <td>{$timeFormat.dateTime(key.updated_at)}</td>
+                <td><RelativeTime value={key.updated_at} /></td>
                 <td><Button ariaLabel={`Remove ${key.label || key.game.toUpperCase() + ' key'}`} disabled={busy || !!key.assigned_servers.length} onclick={() => remove(key)}>Remove</Button>{#if key.assigned_servers.length}<small>In use</small>{/if}</td>
             </tr>
         {/each}</tbody>
@@ -123,7 +123,7 @@
 <Dialog bind:open title="Add key" busy={busy}>
     {#if error}<p role="alert" class="error">{error}</p>{/if}
     <form onsubmit={save}>
-        <label>Game<select bind:value={game} disabled={busy}><option value="t5">Black Ops I (T5)</option><option value="t6">Black Ops II (T6)</option></select></label>
+        <label>Game<select bind:value={game} disabled={busy}><option value="t5">Black Ops I</option><option value="t6">Black Ops II</option></select></label>
         <Field label="Label (optional)" hint="Record the hostname you chose in Plutonium, or another name that helps identify this key.">
             <Input bind:value={label} placeholder="e.g. Electric Cherry 5" disabled={busy} />
         </Field>