Use shared form controls and enforce UI patterns (Refs #110)

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import Select from '$ui/components/primitives/Select.svelte';
     import RelativeTime from '$ui/components/RelativeTime.svelte';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
@@ -173,27 +174,31 @@
             {/each}
         </div>{/if}
     <div class="ui-toolbar">
-        <input
-            type="search"
-            aria-label="Search keys"
-            bind:value={search}
-            oninput={(event) => {
-                search = event.currentTarget.value;
-                limit = 25;
-                saveSearch();
-            }}
-            placeholder="Search labels or assigned servers…"
-        />
-        <select
-            aria-label="Filter keys by game"
-            bind:value={gameFilter}
-            onchange={() => {
-                limit = 25;
-                saveSearch();
-            }}
-            ><option value="">All games</option><option value="t5">Black Ops I</option><option
-                value="t6">Black Ops II</option
-            ></select
+        <Field label="Search keys" hiddenLabel class="search"
+            ><Input
+                type="search"
+                aria-label="Search keys"
+                bind:value={search}
+                oninput={(event) => {
+                    search = event.currentTarget.value;
+                    limit = 25;
+                    saveSearch();
+                }}
+                placeholder="Search labels or assigned servers…"
+            /></Field
+        >
+        <Field label="Filter keys by game" hiddenLabel
+            ><Select
+                aria-label="Filter keys by game"
+                bind:value={gameFilter}
+                onchange={() => {
+                    limit = 25;
+                    saveSearch();
+                }}
+                ><option value="">All games</option><option value="t5">Black Ops I</option><option
+                    value="t6">Black Ops II</option
+                ></Select
+            ></Field
         >
     </div>
     {#if error && !open}<div role="alert" class="ui-error">
@@ -250,11 +255,11 @@
 <Dialog bind:open title="Add key" {busy}>
     {#if error}<p role="alert" class="error">{error}</p>{/if}
     <form onsubmit={save}>
-        <label
-            >Game<select bind:value={game} disabled={busy}
+        <Field label="Game">
+            <Select bind:value={game} disabled={busy}
                 ><option value="t5">Black Ops I</option><option value="t6">Black Ops II</option
-                ></select
-            ></label
+                ></Select
+            ></Field
         >
         <Field
             label="Label (optional)"
@@ -319,6 +324,7 @@
         display: block;
         margin-top: 6px;
     }
+
     .assignment {
         margin-top: 8px;
     }
@@ -331,22 +337,11 @@
     p {
         color: var(--text-secondary);
     }
-    form,
-    label {
+    form {
         display: grid;
         gap: var(--space-4);
     }
-    label {
-        gap: 8px;
-        font-size: var(--text-base);
-    }
-    select {
-        padding: 10px;
-        border: 1px solid var(--border-control);
-        border-radius: var(--radius-md);
-        background: var(--surface-sunken);
-        color: inherit;
-    }
+
     .actions {
         display: flex;
         gap: var(--space-2);