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

2026-10-10 00:19:48 -04:00
parent 8d1bb69591
commit cc9c10226e
54 changed files with 1431 additions and 1449 deletions
@@ -303,31 +303,37 @@
            {flash}<Button size="sm" onclick={load}>Retry</Button>
        </div>{/if}
    {#if loading || plugins.length || flash}<div class="library-toolbar">
-            <input
-                class="search"
-                type="search"
-                aria-label="Search plugins"
-                bind:value={search}
-                placeholder="Search names or files…"
-            />
-            <select aria-label="Filter plugins by game" bind:value={game}
-                ><option value="">All games</option><option value="t5">Black Ops I</option><option
-                    value="t6">Black Ops II</option
-                ></select
+            <Field label="Search plugins" hiddenLabel class="search"
+                ><Input
+                    type="search"
+                    aria-label="Search plugins"
+                    bind:value={search}
+                    placeholder="Search names or files…"
+                /></Field
            >
-            <select aria-label="Filter plugins by status" bind:value={status}
-                ><option value="">All statuses</option><option value="untested"
-                    >Needs testing</option
-                ><option value="testing">Beta active</option><option value="test-failed"
-                    >Test failed</option
-                ><option value="tested">Test passed</option><option value="promoted"
-                    >Promoted</option
-                ><option value="empty">No versions</option></select
+            <Field label="Filter plugins by game" hiddenLabel
+                ><Select aria-label="Filter plugins by game" bind:value={game}
+                    ><option value="">All games</option><option value="t5">Black Ops I</option
+                    ><option value="t6">Black Ops II</option></Select
+                ></Field
            >
-            <select aria-label="Sort plugins" bind:value={sort}
-                ><option value="name">Name A–Z</option><option value="recent"
-                    >Recently uploaded</option
-                ></select
+            <Field label="Filter plugins by status" hiddenLabel
+                ><Select aria-label="Filter plugins by status" bind:value={status}
+                    ><option value="">All statuses</option><option value="untested"
+                        >Needs testing</option
+                    ><option value="testing">Beta active</option><option value="test-failed"
+                        >Test failed</option
+                    ><option value="tested">Test passed</option><option value="promoted"
+                        >Promoted</option
+                    ><option value="empty">No versions</option></Select
+                ></Field
+            >
+            <Field label="Sort plugins" hiddenLabel
+                ><Select aria-label="Sort plugins" bind:value={sort}
+                    ><option value="name">Name A–Z</option><option value="recent"
+                        >Recently uploaded</option
+                    ></Select
+                ></Field
            >
        </div>{/if}
    {#if game}<p class="filter-hint">