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

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

web/src/app.tsx

@@ -7,6 +7,9 @@ import { AppShell } from "./shell/app-shell";
 import { ObjectsPage } from "./objects/objects-page";
 import { ObjectDetail } from "./objects/object-detail";
 import { SelectPrompt } from "./objects/select-prompt";
+import { VocabulariesPage } from "./vocab/vocabularies-page";
+import { VocabularyTerms } from "./vocab/vocabulary-terms";
+import { SelectVocabularyPrompt } from "./vocab/select-vocabulary-prompt";
 
 const ObjectNewPage = lazy(() =>
   import("./objects/object-new-page").then((m) => ({ default: m.ObjectNewPage })),
@@ -47,6 +50,10 @@ export function App() {
                 }
               />
             </Route>
+            <Route path="/vocabularies" element={<VocabulariesPage />}>
+              <Route index element={<SelectVocabularyPrompt />} />
+              <Route path=":id" element={<VocabularyTerms />} />
+            </Route>
             <Route path="/" element={<Navigate to="/objects" replace />} />
           </Route>
         </Route>

web/src/i18n/en.json

@@ -8,6 +8,12 @@
   "form": { "selectPlaceholder": "— select —", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "flexibleHeading": "Catalogue fields" },
   "actions": { "edit": "Edit", "delete": "Delete", "confirmDelete": "Delete this object? This cannot be undone." },
   "labels": { "en": "Label (EN)", "sv": "Label (SV)", "externalUri": "External URI (optional)" },
+  "vocab": {
+    "title": "Vocabularies", "newVocabulary": "New vocabulary", "key": "Key",
+    "create": "Create", "selectPrompt": "Select a vocabulary to manage its terms",
+    "terms": "Terms", "addTerm": "Add term", "empty": "No vocabularies yet",
+    "noTerms": "No terms yet", "loadError": "Could not load"
+  },
   "publish": {
     "heading": "Visibility",
     "advanceInternal": "Advance to internal",

web/src/i18n/sv.json

@@ -8,6 +8,12 @@
   "form": { "selectPlaceholder": "— välj —", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "flexibleHeading": "Katalogfält" },
   "actions": { "edit": "Redigera", "delete": "Ta bort", "confirmDelete": "Ta bort detta föremål? Detta kan inte ångras." },
   "labels": { "en": "Etikett (EN)", "sv": "Etikett (SV)", "externalUri": "Extern URI (valfritt)" },
+  "vocab": {
+    "title": "Vokabulär", "newVocabulary": "Ny vokabulär", "key": "Nyckel",
+    "create": "Skapa", "selectPrompt": "Välj en vokabulär för att hantera dess termer",
+    "terms": "Termer", "addTerm": "Lägg till term", "empty": "Inga vokabulärer ännu",
+    "noTerms": "Inga termer ännu", "loadError": "Kunde inte ladda"
+  },
   "publish": {
     "heading": "Synlighet",
     "advanceInternal": "Gör intern",

web/src/shell/app-shell.tsx

@@ -5,7 +5,7 @@ import { useLogout } from "../api/queries";
 import { Button } from "@/components/ui/button";
 import { LangSwitch } from "./lang-switch";
 
-const FUTURE = ["vocabularies", "authorities", "fields", "search"] as const;
+const DISABLED_NAV = ["authorities", "fields", "search"] as const;
 
 export function AppShell() {
   const { t } = useTranslation();
@@ -30,7 +30,15 @@ export function AppShell() {
           >
             {t("nav.objects")}
           </NavLink>
-          {FUTURE.map((key) => (
+          <NavLink
+            to="/vocabularies"
+            className={({ isActive }) =>
+              `block rounded px-2 py-1 ${isActive ? "bg-neutral-200 font-medium" : ""}`
+            }
+          >
+            {t("nav.vocabularies")}
+          </NavLink>
+          {DISABLED_NAV.map((key) => (
             <button
               key={key}
               disabled

web/src/vocab/select-vocabulary-prompt.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from "react-i18next";
+
+export function SelectVocabularyPrompt() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex h-full items-center justify-center p-4 text-sm text-neutral-400">
+      {t("vocab.selectPrompt")}
+    </div>
+  );
+}

web/src/vocab/vocabularies-page.tsx

@@ -0,0 +1,16 @@
+import { Outlet } from "react-router-dom";
+
+import { VocabularyList } from "./vocabulary-list";
+
+export function VocabulariesPage() {
+  return (
+    <div className="grid h-full grid-cols-[20rem_1fr]">
+      <div className="overflow-hidden border-r">
+        <VocabularyList />
+      </div>
+      <div className="overflow-hidden">
+        <Outlet />
+      </div>
+    </div>
+  );
+}

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"),
+  );
+});

web/src/vocab/vocabulary-list.tsx

@@ -0,0 +1,67 @@
+import { useState, type FormEvent } from "react";
+import { NavLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { useVocabularies, useCreateVocabulary } from "../api/queries";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function VocabularyList() {
+  const { t } = useTranslation();
+
+  const { data, isLoading, isError } = useVocabularies();
+
+  const create = useCreateVocabulary();
+
+  const [key, setKey] = useState("");
+
+  const onCreate = (event: FormEvent) => {
+    event.preventDefault();
+
+    if (!key.trim()) return;
+
+    create.mutate({ key: key.trim() }, { onSuccess: () => setKey("") });
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <form onSubmit={onCreate} className="space-y-1 border-b p-3">
+        <Label htmlFor="vocab-key">{t("vocab.key")}</Label>
+        <div className="flex gap-2">
+          <Input
+            id="vocab-key"
+            value={key}
+            onChange={(e) => setKey(e.target.value)}
+          />
+          <Button type="submit" size="sm" disabled={create.isPending}>
+            {t("vocab.create")}
+          </Button>
+        </div>
+      </form>
+      <ul className="flex-1 overflow-auto">
+        {isLoading && (
+          <li className="p-3 text-sm text-neutral-400">…</li>
+        )}
+        {isError && (
+          <li className="p-3 text-sm text-red-600">{t("vocab.loadError")}</li>
+        )}
+        {data?.length === 0 && (
+          <li className="p-3 text-sm text-neutral-500">{t("vocab.empty")}</li>
+        )}
+        {data?.map((v) => (
+          <li key={v.id}>
+            <NavLink
+              to={`/vocabularies/${v.id}`}
+              className={({ isActive }) =>
+                `block border-b px-3 py-2 text-sm ${isActive ? "bg-indigo-50" : "hover:bg-neutral-50"}`
+              }
+            >
+              {v.key}
+            </NavLink>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

web/src/vocab/vocabulary-terms.tsx

@@ -0,0 +1,94 @@
+import { useState, type FormEvent } from "react";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { useTerms, useAddTerm } from "../api/queries";
+import { LabelEditor } from "../components/label-editor";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type LabelInput = components["schemas"]["LabelInput"];
+type LabelView = components["schemas"]["LabelView"];
+
+function labelText(labels: LabelView[], lang: string): string {
+  return (
+    labels.find((l) => l.lang === lang)?.label ??
+    labels.find((l) => l.lang === "en")?.label ??
+    labels[0]?.label ??
+    ""
+  );
+}
+
+export function VocabularyTerms() {
+  const { t, i18n } = useTranslation();
+
+  const { id } = useParams();
+
+  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
+
+  const { data: terms } = useTerms(id);
+
+  const addTerm = useAddTerm();
+
+  const [labels, setLabels] = useState<LabelInput[]>([]);
+
+  const [uri, setUri] = useState("");
+
+  const [error, setError] = useState(false);
+
+  const onAdd = (event: FormEvent) => {
+    event.preventDefault();
+
+    if (!labels.some((l) => l.lang === "en" && l.label)) {
+      setError(true);
+      return;
+    }
+
+    setError(false);
+
+    addTerm.mutate(
+      { vocabularyId: id!, external_uri: uri.trim() || null, labels },
+      { onSuccess: () => { setLabels([]); setUri(""); } },
+    );
+  };
+
+  return (
+    <div className="overflow-auto p-4">
+      <h3 className="mb-2 text-sm font-medium uppercase text-neutral-500">
+        {t("vocab.terms")}
+      </h3>
+      <ul className="mb-4">
+        {terms?.length === 0 && (
+          <li className="text-sm text-neutral-500">{t("vocab.noTerms")}</li>
+        )}
+        {terms?.map((term) => (
+          <li key={term.id} className="border-b py-1 text-sm">
+            {labelText(term.labels, lang)}
+          </li>
+        ))}
+      </ul>
+      <form onSubmit={onAdd} className="space-y-2 border-t pt-3">
+        <div className="text-sm font-medium">{t("vocab.addTerm")}</div>
+        <LabelEditor value={labels} onChange={setLabels} />
+        <div className="space-y-1">
+          <Label htmlFor="term-uri">{t("labels.externalUri")}</Label>
+          <Input
+            id="term-uri"
+            value={uri}
+            onChange={(e) => setUri(e.target.value)}
+          />
+        </div>
+        {error && (
+          <p role="alert" className="text-xs text-red-600">
+            {t("form.required")}
+          </p>
+        )}
+        <Button type="submit" size="sm" disabled={addTerm.isPending}>
+          {t("vocab.addTerm")}
+        </Button>
+      </form>
+    </div>
+  );
+}