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

src/routes/betas/+page.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import Select from '$ui/components/primitives/Select.svelte';
+    import Input from '$ui/components/primitives/Input.svelte';
+    import Field from '$ui/components/primitives/Field.svelte';
     import RelativeTime from '$ui/components/RelativeTime.svelte';
     import { page } from '$app/stores';
     import { contextHref } from '$lib/navigation-context.js';
@@ -158,8 +161,8 @@
                 ariaLabel="Beta views"
             />
         </div>
-        <label class="search"
-            >Search<input
+        <Field class="search" label="Search">
+            <Input
                 type="search"
                 bind:value={search}
                 oninput={() => {
@@ -167,11 +170,11 @@
                     saveContext();
                 }}
                 placeholder="Name, beta number, file, or server"
-                maxlength="200"
-            /></label
+                maxlength={200}
+            /></Field
         >
-        <label
-            >Status<select
+        <Field label="Status">
+            <Select
                 bind:value={status}
                 onchange={() => {
                     pageNumber = 1;
@@ -187,7 +190,7 @@
                 {:else}<option value="promoted">Promoted</option><option value="rolled-back"
                         >Rolled back</option
                     >{/if}
-            </select></label
+            </Select></Field
         >
         {#if betas.length && (search || status)}<Button
                 variant="ghost"
@@ -320,27 +323,12 @@
         align-self: flex-end;
         max-width: 100%;
     }
-    label {
-        display: grid;
-        gap: 6px;
-        font-size: var(--text-xs);
-        color: var(--text-secondary);
-    }
-    .search {
+
+    .toolbar :global(.search) {
         flex: 1;
         min-width: 240px;
     }
-    input,
-    select {
-        padding: 10px 12px;
-        min-height: 40px;
-        background: var(--surface-sunken);
-        color: var(--text-primary);
-        border: 1px solid var(--border-control);
-        border-radius: var(--radius-sm);
-        font: inherit;
-        font-size: var(--text-sm);
-    }
+
     .table-scroll {
         overflow-x: auto;
     }
@@ -444,7 +432,7 @@
         td {
             padding: 12px 8px;
         }
-        .search {
+        .toolbar :global(.search) {
             flex-basis: 100%;
         }
         .pagination {