feat(web): vocabularies two-pane screen (list/create + terms/add) + nav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/vocab/vocabularies.test.tsx

@@ -0,0 +1,53 @@
+import { expect, test } from "vitest";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { Routes, Route } from "react-router-dom";
+import { server } from "../test/server";
+import { renderApp } from "../test/render";
+import { VocabulariesPage } from "./vocabularies-page";
+import { VocabularyTerms } from "./vocabulary-terms";
+import { SelectVocabularyPrompt } from "./select-vocabulary-prompt";
+
+function tree() {
+  return (
+    <Routes>
+      <Route path="/vocabularies" element={<VocabulariesPage />}>
+        <Route index element={<SelectVocabularyPrompt />} />
+        <Route path=":id" element={<VocabularyTerms />} />
+      </Route>
+    </Routes>
+  );
+}
+
+test("lists vocabularies and creates one", async () => {
+  let body: unknown;
+  server.use(
+    http.post("/api/admin/vocabularies", async ({ request }) => {
+      body = await request.json();
+      return HttpResponse.json({ id: "v-c", key: "colour" }, { status: 201 });
+    }),
+  );
+  renderApp(tree(), { route: "/vocabularies" });
+  expect(await screen.findByText("material")).toBeInTheDocument();
+  await userEvent.type(screen.getByLabelText(/key/i), "colour");
+  await userEvent.click(screen.getByRole("button", { name: /create/i }));
+  await waitFor(() => expect((body as { key: string })?.key).toBe("colour"));
+});
+
+test("selecting a vocabulary shows its terms and adds one", async () => {
+  let termBody: unknown;
+  server.use(
+    http.post("/api/admin/vocabularies/:id/terms", async ({ request }) => {
+      termBody = await request.json();
+      return HttpResponse.json({ id: "t-c" }, { status: 201 });
+    }),
+  );
+  renderApp(tree(), { route: "/vocabularies/v-material" });
+  expect(await screen.findByText("Bronze")).toBeInTheDocument();
+  await userEvent.type(screen.getByLabelText(/label \(en\)/i), "Stone");
+  await userEvent.click(screen.getByRole("button", { name: /add term/i }));
+  await waitFor(() =>
+    expect((termBody as { labels: { label: string }[] })?.labels[0].label).toBe("Stone"),
+  );
+});