feat(web): vocab list/terms sort+filter, external_uri in rows, rename guard, url input (#50)

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

web/src/vocab/term-row.tsx

@@ -5,6 +5,7 @@ import type { components } from "../api/schema";
 import { useUpdateTerm, useDeleteTerm } from "../api/queries";
 import { LabelEditor } from "../components/label-editor";
 import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
+import { ExternalUriLink } from "../components/external-uri-link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -29,7 +30,7 @@ export function TermRow({ vocabularyId, term, lang }: { vocabularyId: string; te
         <LabelEditor value={labels} onChange={setLabels} />
         <div className="space-y-1">
           <Label htmlFor={`term-uri-${term.id}`}>{t("labels.externalUri")}</Label>
-          <Input id={`term-uri-${term.id}`} value={uri} onChange={(e) => setUri(e.target.value)} />
+          <Input id={`term-uri-${term.id}`} type="url" placeholder={t("labels.uriPlaceholder")} value={uri} onChange={(e) => setUri(e.target.value)} />
         </div>
         <div className="flex gap-2">
           <Button
@@ -55,7 +56,10 @@ export function TermRow({ vocabularyId, term, lang }: { vocabularyId: string; te
 
   return (
     <li className="flex items-center gap-2 border-b py-1 text-sm">
-      <span className="flex-1">{labelText(term.labels, lang)}</span>
+      <div className="flex-1">
+        <div>{labelText(term.labels, lang)}</div>
+        {term.external_uri && <ExternalUriLink uri={term.external_uri} />}
+      </div>
       <Button
         type="button"
         variant="ghost"

web/src/vocab/vocabularies.test.tsx

@@ -74,3 +74,59 @@ test("add term without EN label shows required alert and does not POST", async (
   expect(screen.getByRole("alert")).toBeInTheDocument();
   expect(posted).toBe(false);
 });
+
+test("vocabularies render sorted by key", async () => {
+  server.use(
+    http.get("/api/admin/vocabularies", () =>
+      HttpResponse.json([
+        { id: "v-zeta", key: "zeta" },
+        { id: "v-alpha", key: "alpha" },
+      ]),
+    ),
+  );
+  renderApp(tree(), { route: "/vocabularies" });
+  expect(await screen.findByText("alpha")).toBeInTheDocument();
+  const links = screen.getAllByRole("link");
+  const keys = links.map((link) => link.textContent);
+  expect(keys.indexOf("alpha")).toBeLessThan(keys.indexOf("zeta"));
+});
+
+test("filter narrows the vocabulary list", async () => {
+  renderApp(tree(), { route: "/vocabularies" });
+  expect(await screen.findByText("material")).toBeInTheDocument();
+  expect(screen.getByText("technique")).toBeInTheDocument();
+  await userEvent.type(screen.getByRole("textbox", { name: /filter/i }), "mat");
+  expect(screen.getByText("material")).toBeInTheDocument();
+  expect(screen.queryByText("technique")).not.toBeInTheDocument();
+});
+
+test("renaming a vocabulary to an empty key does not call the rename endpoint", async () => {
+  let renamed = false;
+  server.use(
+    http.patch("/api/admin/vocabularies/:id", () => {
+      renamed = true;
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+  renderApp(tree(), { route: "/vocabularies" });
+  expect(await screen.findByText("material")).toBeInTheDocument();
+  await userEvent.click(screen.getAllByRole("button", { name: /rename/i })[0]);
+  const keyInputs = screen.getAllByRole("textbox", { name: /key/i });
+  const input = keyInputs[keyInputs.length - 1];
+  await userEvent.clear(input);
+  await userEvent.click(screen.getByRole("button", { name: /save/i }));
+  expect(renamed).toBe(false);
+});
+
+test("term read row shows its external_uri as a link", async () => {
+  server.use(
+    http.get("/api/admin/vocabularies/:id/terms", () =>
+      HttpResponse.json([
+        { id: "t-bronze", external_uri: "https://example.org/bronze", labels: [{ lang: "en", label: "Bronze" }] },
+      ]),
+    ),
+  );
+  renderApp(tree(), { route: "/vocabularies/v-material" });
+  expect(await screen.findByText("Bronze")).toBeInTheDocument();
+  expect(screen.getByRole("link", { name: /example\.org/ })).toBeInTheDocument();
+});

web/src/vocab/vocabulary-list.tsx

@@ -3,6 +3,7 @@ import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { useVocabularies, useCreateVocabulary, useRenameVocabulary, useDeleteVocabulary } from "../api/queries";
+import { byKey } from "../lib/sort";
 import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -10,7 +11,9 @@ import { Label } from "@/components/ui/label";
 import { ListSkeleton } from "@/components/ui/skeletons";
 
 export function VocabularyList() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+
+  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
 
   const { data, isLoading, isError } = useVocabularies();
 
@@ -19,6 +22,7 @@ export function VocabularyList() {
   const deleteVocabulary = useDeleteVocabulary();
 
   const [key, setKey] = useState("");
+  const [filter, setFilter] = useState("");
   const [editingId, setEditingId] = useState<string | null>(null);
   const [draftKey, setDraftKey] = useState("");
 
@@ -30,6 +34,11 @@ export function VocabularyList() {
     create.mutate({ key: key.trim() }, { onSuccess: () => setKey("") });
   };
 
+  const q = filter.trim().toLowerCase();
+  const rows = [...(data ?? [])]
+    .filter((v) => !q || v.key.toLowerCase().includes(q))
+    .sort(byKey(lang));
+
   return (
     <div className="flex h-full flex-col">
       <form onSubmit={onCreate} className="space-y-1 border-b p-3">
@@ -51,6 +60,14 @@ export function VocabularyList() {
           </p>
         )}
       </form>
+      <div className="border-b p-2">
+        <Input
+          aria-label={t("common.filter")}
+          placeholder={t("common.filter")}
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
       {isLoading ? (
         <ListSkeleton className="flex-1 overflow-auto" />
       ) : (
@@ -61,13 +78,17 @@ export function VocabularyList() {
           {data?.length === 0 && (
             <li className="p-3 text-sm text-muted-foreground">{t("vocab.empty")}</li>
           )}
-          {data?.map((v) => (
+          {data && data.length > 0 && rows.length === 0 && (
+            <li className="p-3 text-sm text-muted-foreground">{t("common.noMatches")}</li>
+          )}
+          {rows.map((v) => (
           <li key={v.id} className="flex items-center gap-1 border-b pr-2">
             {editingId === v.id ? (
               <form
                 className="flex flex-1 flex-wrap gap-1 p-1"
                 onSubmit={(e) => {
                   e.preventDefault();
+                  if (!draftKey.trim()) return;
                   renameVocabulary.mutate(
                     { id: v.id, key: draftKey.trim() },
                     { onSuccess: () => setEditingId(null) },

web/src/vocab/vocabulary-terms.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 
 import type { components } from "../api/schema";
 import { useTerms, useAddTerm, useVocabularies } from "../api/queries";
+import { byLabel } from "../lib/sort";
+import { labelText } from "../lib/labels";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { LabelEditor } from "../components/label-editor";
 import { TermRow } from "./term-row";
@@ -29,6 +31,8 @@ export function VocabularyTerms() {
 
   const [uri, setUri] = useState("");
 
+  const [filter, setFilter] = useState("");
+
   const [error, setError] = useState(false);
 
   const { data: vocabularies } = useVocabularies();
@@ -58,11 +62,24 @@ export function VocabularyTerms() {
     );
   };
 
+  const q = filter.trim().toLowerCase();
+  const rows = [...(terms ?? [])]
+    .filter((term) => !q || labelText(term.labels, lang).toLowerCase().includes(q))
+    .sort(byLabel(lang));
+
   return (
     <div className="overflow-auto p-4">
       <div className="mb-2 label-caption">
         {t("vocab.terms")}
       </div>
+      <div className="mb-3">
+        <Input
+          aria-label={t("common.filter")}
+          placeholder={t("common.filter")}
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
       {isLoading ? (
         <ListSkeleton className="mb-4" rows={5} />
       ) : (
@@ -73,7 +90,10 @@ export function VocabularyTerms() {
           {!isError && terms?.length === 0 && (
             <li className="text-sm text-muted-foreground">{t("vocab.noTerms")}</li>
           )}
-          {terms?.map((term) => (
+          {!isError && terms && terms.length > 0 && rows.length === 0 && (
+            <li className="text-sm text-muted-foreground">{t("common.noMatches")}</li>
+          )}
+          {rows.map((term) => (
             <TermRow key={term.id} vocabularyId={id} term={term} lang={lang} />
           ))}
         </ul>
@@ -85,6 +105,8 @@ export function VocabularyTerms() {
           <Label htmlFor="term-uri">{t("labels.externalUri")}</Label>
           <Input
             id="term-uri"
+            type="url"
+            placeholder={t("labels.uriPlaceholder")}
             value={uri}
             onChange={(e) => setUri(e.target.value)}
           />