From 02e4f34a1b571b4b2015190480ca7875739d0d7f Mon Sep 17 00:00:00 2001
From: Anders Olsson <anders.e.olsson@gmail.com>
Date: Thu, 4 Jun 2026 09:29:51 +0200
Subject: [PATCH] fix(web): vocab form-level error states, newVocabulary
 heading, id guard, EN-required test

---
 web/src/vocab/vocabularies.test.tsx | 15 +++++++++++++++
 web/src/vocab/vocabulary-list.tsx   |  6 ++++++
 web/src/vocab/vocabulary-terms.tsx  |  9 ++++++++-
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/web/src/vocab/vocabularies.test.tsx b/web/src/vocab/vocabularies.test.tsx
index 15eb2d6..9e7b30a 100644
--- a/web/src/vocab/vocabularies.test.tsx
+++ b/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);
+});
diff --git a/web/src/vocab/vocabulary-list.tsx b/web/src/vocab/vocabulary-list.tsx
index 5d63f90..41e07d5 100644
--- a/web/src/vocab/vocabulary-list.tsx
+++ b/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 && (
diff --git a/web/src/vocab/vocabulary-terms.tsx b/web/src/vocab/vocabulary-terms.tsx
index b2f1721..7c9d95b 100644
--- a/web/src/vocab/vocabulary-terms.tsx
+++ b/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>