fix(web): vocab form-level error states, newVocabulary heading, id guard, EN-required test

web/src/vocab/vocabularies.test.tsx

@@ -51,3 +51,18 @@ test("selecting a vocabulary shows its terms and adds one", async () => {
     expect((termBody as { labels: { label: string }[] })?.labels[0].label).toBe("Stone"),
   );
 });
+
+test("add term without EN label shows required alert and does not POST", async () => {
+  let posted = false;
+  server.use(
+    http.post("/api/admin/vocabularies/:id/terms", () => {
+      posted = true;
+      return HttpResponse.json({ id: "t-x" }, { status: 201 });
+    }),
+  );
+  renderApp(tree(), { route: "/vocabularies/v-material" });
+  expect(await screen.findByText("Bronze")).toBeInTheDocument();
+  await userEvent.click(screen.getByRole("button", { name: /add term/i }));
+  expect(screen.getByRole("alert")).toBeInTheDocument();
+  expect(posted).toBe(false);
+});

web/src/vocab/vocabulary-list.tsx

@@ -27,6 +27,7 @@ export function VocabularyList() {
   return (
     <div className="flex h-full flex-col">
       <form onSubmit={onCreate} className="space-y-1 border-b p-3">
+        <div className="text-sm font-medium">{t("vocab.newVocabulary")}</div>
         <Label htmlFor="vocab-key">{t("vocab.key")}</Label>
         <div className="flex gap-2">
           <Input
@@ -38,6 +39,11 @@ export function VocabularyList() {
             {t("vocab.create")}
           </Button>
         </div>
+        {create.isError && (
+          <p role="alert" className="text-xs text-red-600">
+            {t("form.rejected")}
+          </p>
+        )}
       </form>
       <ul className="flex-1 overflow-auto">
         {isLoading && (

web/src/vocab/vocabulary-terms.tsx

@@ -38,6 +38,8 @@ export function VocabularyTerms() {
 
   const [error, setError] = useState(false);
 
+  if (!id) return null;
+
   const onAdd = (event: FormEvent) => {
     event.preventDefault();
 
@@ -49,7 +51,7 @@ export function VocabularyTerms() {
     setError(false);
 
     addTerm.mutate(
-      { vocabularyId: id!, external_uri: uri.trim() || null, labels },
+      { vocabularyId: id, external_uri: uri.trim() || null, labels },
       { onSuccess: () => { setLabels([]); setUri(""); } },
     );
   };
@@ -85,6 +87,11 @@ export function VocabularyTerms() {
             {t("form.required")}
           </p>
         )}
+        {addTerm.isError && (
+          <p role="alert" className="text-xs text-red-600">
+            {t("form.rejected")}
+          </p>
+        )}
         <Button type="submit" size="sm" disabled={addTerm.isPending}>
           {t("vocab.addTerm")}
         </Button>