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

src/routes/maintenance/+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 ActivityLog from '$ui/components/ActivityLog.svelte';
     import BackLink from '$ui/components/BackLink.svelte';
@@ -381,12 +384,9 @@
                         <label class="toggle"
                             ><input type="checkbox" bind:checked={scheduleEnabled} /> Daily fleet restart</label
                         >
-                        <label
-                            >Queue time ({$timeZone})<input
-                                type="time"
-                                bind:value={scheduleTime}
-                                required
-                            /></label
+                        <Field
+                            >{#snippet label()}Queue time ({$timeZone}){/snippet}
+                            <Input type="time" bind:value={scheduleTime} required /></Field
                         >
                         <Button type="submit" disabled={busy}>Save schedule</Button>
                     </form>
@@ -490,30 +490,30 @@
                     {/if}
                 {/if}
                 <div class="filters">
-                    <label
-                        >Capability<select bind:value={kind} onchange={() => saveContext()}
+                    <Field label="Capability">
+                        <Select bind:value={kind} onchange={() => saveContext()}
                             ><option value="all">All capabilities</option><option value="health"
                                 >Health recovery</option
                             ><option value="drift">Configuration drift</option><option
                                 value="updates">Plutonium updates</option
-                            ><option value="schedule">Scheduled restarts</option></select
-                        ></label
+                            ><option value="schedule">Scheduled restarts</option></Select
+                        ></Field
                     >
-                    <label
-                        >Server<input
+                    <Field label="Server">
+                        <Input
                             bind:value={server}
                             oninput={() => saveContext()}
                             placeholder="Filter servers"
-                        /></label
+                        /></Field
                     >
-                    {#if view === 'activity'}<label
-                            >Status<select bind:value={status} onchange={() => saveContext()}
+                    {#if view === 'activity'}<Field label="Status">
+                            <Select bind:value={status} onchange={() => saveContext()}
                                 ><option value="all">All activity</option><option value="active"
                                     >Active</option
                                 ><option value="attention">Needs attention</option><option
                                     value="done">Finished</option
-                                ></select
-                            ></label
+                                ></Select
+                            ></Field
                         >{/if}
                 </div>
                 {#if view === 'overview' && ['all', 'updates'].includes(kind)}
@@ -808,8 +808,7 @@
         display: flex;
         align-items: center;
     }
-    input:not([type='checkbox']),
-    select {
+    input:not([type='checkbox']) {
         color: inherit;
         background: var(--surface-sunken);
         padding: 9px;