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

src/routes/+page.svelte

@@ -1,4 +1,7 @@
 <script module 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';
     const serverTitleCollator = new Intl.Collator(undefined, { numeric: true });
 </script>
 
@@ -443,12 +446,8 @@
         {/if}
         <div class="toolbar">
             <div class="search-row">
-                <label class="search"
-                    ><span class="sr-only">Search servers, maps, or players</span><input
-                        type="search"
-                        bind:value={query}
-                        placeholder="Search fleet…"
-                    /></label
+                <Field class="search" hiddenLabel label="Search servers, maps, or players">
+                    <Input type="search" bind:value={query} placeholder="Search fleet…" /></Field
                 >
                 <button
                     class="control"
@@ -459,27 +458,27 @@
                 >
             </div>
             {#if viewOptionsOpen}<div id="fleet-view-options" class="view-options">
-                    <label
-                        >Game<select bind:value={game}
+                    <Field label="Game">
+                        <Select bind:value={game}
                             ><option value="">All games</option><option value="t5"
                                 >Black Ops I</option
-                            ><option value="t6">Black Ops II</option></select
-                        ></label
+                            ><option value="t6">Black Ops II</option></Select
+                        ></Field
                     >
-                    <label
-                        >Group by<select bind:value={grouping}
+                    <Field label="Group by">
+                        <Select bind:value={grouping}
                             ><option value="none">None</option><option value="map">Map</option
-                            ><option value="game">Game</option></select
-                        ></label
+                            ><option value="game">Game</option></Select
+                        ></Field
                     >
-                    <label
-                        >Sort by<select bind:value={sort}
+                    <Field label="Sort by">
+                        <Select bind:value={sort}
                             ><option value="duration">Longest match</option><option value="players"
                                 >Most players</option
                             ><option value="round">Highest round</option><option value="name"
                                 >Lobby name</option
-                            ></select
-                        ></label
+                            ></Select
+                        ></Field
                     >
                     <div class="view-toggle" role="group" aria-label="Display mode">
                         <button
@@ -698,8 +697,7 @@
         font-size: var(--text-xs);
     }
     button,
-    input,
-    select {
+    input {
         font: inherit;
     }
     button {
@@ -750,15 +748,11 @@
         gap: var(--space-3);
         align-items: center;
     }
-    .search {
+    .search-row :global(.search) {
         flex: 1;
         min-width: 0;
     }
-    .search input {
-        width: 100%;
-    }
-    input,
-    select {
+    input {
         color: var(--text-primary);
         background: var(--surface-sunken);
         border: 1px solid var(--border-control);
@@ -790,12 +784,9 @@
         background: var(--surface);
         border-radius: var(--radius-md);
     }
-    .view-options label {
-        display: grid;
-        gap: var(--space-2);
+
+    .view-options :global(.field) {
         flex: 1 1 130px;
-        color: var(--text-secondary);
-        font-size: var(--text-xs);
     }
     .chips,
     .view-toggle {