feat(web): field-form selects use ui/Select; rewrite select tests (#51)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/fields/field-form.tsx

@@ -12,6 +12,13 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 type LabelInput = components["schemas"]["LabelInput"];
 type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
@@ -117,58 +124,62 @@ export function FieldForm({
 
       <div className="space-y-1">
         <Label htmlFor="field-type">{t("fields.type")}</Label>
-        <select
-          id="field-type"
-          value={dataType}
-          disabled={isEdit}
-          onChange={(e) => setDataType(e.target.value)}
-          className="w-full rounded-md border px-2 py-1 text-sm disabled:opacity-60"
-        >
-          {TYPES.map((type) => (
-            <option key={type} value={type}>
-              {t(`fields.types.${type}`)}
-            </option>
-          ))}
-        </select>
+        <Select value={dataType} onValueChange={(v) => setDataType(v ?? "")} disabled={isEdit}>
+          <SelectTrigger id="field-type">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {TYPES.map((type) => (
+              <SelectItem key={type} value={type}>
+                {t(`fields.types.${type}`)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
 
       {dataType === "term" && (
         <div className="space-y-1">
           <Label htmlFor="field-vocab">{t("fields.vocabulary")}</Label>
-          <select
-            id="field-vocab"
+          <Select
             value={vocabularyId}
+            onValueChange={(v) => setVocabularyId(v ?? "")}
             disabled={isEdit}
-            onChange={(e) => setVocabularyId(e.target.value)}
-            className="w-full rounded-md border px-2 py-1 text-sm disabled:opacity-60"
           >
-            <option value="">{t("form.selectPlaceholder")}</option>
-            {vocabularies?.map((vocab) => (
-              <option key={vocab.id} value={vocab.id}>
-                {vocab.key}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="field-vocab">
+              <SelectValue placeholder={t("form.selectPlaceholder")} />
+            </SelectTrigger>
+            <SelectContent>
+              {vocabularies?.map((vocab) => (
+                <SelectItem key={vocab.id} value={vocab.id}>
+                  {vocab.key}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )}
 
       {dataType === "authority" && (
         <div className="space-y-1">
           <Label htmlFor="field-kind">{t("fields.authorityKind")}</Label>
-          <select
-            id="field-kind"
+          <Select
             value={authorityKind}
+            onValueChange={(v) => setAuthorityKind(v ?? "")}
             disabled={isEdit}
-            onChange={(e) => setAuthorityKind(e.target.value)}
-            className="w-full rounded-md border px-2 py-1 text-sm disabled:opacity-60"
           >
-            <option value="">{t("fields.anyKind")}</option>
-            {KINDS.map((kind) => (
-              <option key={kind} value={kind}>
-                {t(`authorities.${kind}`)}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="field-kind">
+              <SelectValue placeholder={t("fields.anyKind")} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="">{t("fields.anyKind")}</SelectItem>
+              {KINDS.map((kind) => (
+                <SelectItem key={kind} value={kind}>
+                  {t(`authorities.${kind}`)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )}