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

src/lib/ui/components/AddHostDrawer.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import Input from '$ui/components/primitives/Input.svelte';
+    import Field from '$ui/components/primitives/Field.svelte';
     import { timeFormat } from '$ui/stores/time-zone.js';
     import Dialog from './primitives/Dialog.svelte';
     import Button from './primitives/Button.svelte';
@@ -89,34 +91,34 @@
             </p>
             <form onsubmit={add}>
                 <fieldset disabled={busy}>
-                    <label
-                        >Friendly name<input
+                    <Field label="Friendly name">
+                        <Input
                             required
-                            maxlength="200"
+                            maxlength={200}
                             bind:value={name}
                             placeholder="Game host 1"
-                        /></label
+                        /></Field
                     >
                     <details>
                         <summary>Advanced settings</summary>
                         <div class="ports">
-                            <label
-                                >First game port<input
+                            <Field label="First game port">
+                                <Input
                                     type="number"
                                     required
                                     min="1"
                                     max="65535"
                                     bind:value={portMin}
-                                /></label
+                                /></Field
                             >
-                            <label
-                                >Last game port<input
+                            <Field label="Last game port">
+                                <Input
                                     type="number"
                                     required
                                     min={portMin}
                                     max="65535"
                                     bind:value={portMax}
-                                /></label
+                                /></Field
                             >
                         </div>
                     </details>
@@ -150,12 +152,7 @@
     .muted {
         font-size: var(--text-xs);
     }
-    label {
-        display: grid;
-        gap: 8px;
-        font-size: var(--text-sm);
-    }
-    input,
+
     textarea {
         box-sizing: border-box;
         width: 100%;
@@ -186,7 +183,6 @@
         flex-wrap: wrap;
         gap: 12px;
     }
-    input:focus-visible,
     textarea:focus-visible,
     summary:focus-visible {
         outline: 2px solid var(--accent-primary);