feat(web): set breadcrumb trails on all AppShell routes (#54)

web/src/vocab/vocabularies-page.tsx

@@ -3,12 +3,14 @@ import { useTranslation } from "react-i18next";
 
 import { VocabularyList } from "./vocabulary-list";
 import { useDocumentTitle } from "../lib/use-document-title";
+import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { PageTitle } from "@/components/ui/page-title";
 
 export function VocabulariesPage() {
   const { t } = useTranslation();
 
   useDocumentTitle(t("nav.vocabularies"));
+  useBreadcrumb([{ label: t("nav.vocabularies") }]);
 
   return (
     <div className="flex h-full flex-col">

web/src/vocab/vocabulary-terms.tsx

@@ -3,7 +3,8 @@ import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import type { components } from "../api/schema";
-import { useTerms, useAddTerm } from "../api/queries";
+import { useTerms, useAddTerm, useVocabularies } from "../api/queries";
+import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { LabelEditor } from "../components/label-editor";
 import { TermRow } from "./term-row";
 import { Button } from "@/components/ui/button";
@@ -29,6 +30,15 @@ export function VocabularyTerms() {
 
   const [error, setError] = useState(false);
 
+  const { data: vocabularies } = useVocabularies();
+  const vocabKey = vocabularies?.find((v) => v.id === id)?.key;
+
+  useBreadcrumb(
+    vocabKey
+      ? [{ label: t("nav.vocabularies"), to: "/vocabularies" }, { label: vocabKey }]
+      : [{ label: t("nav.vocabularies"), to: "/vocabularies" }],
+  );
+
   if (!id) return null;
 
   const onAdd = (event: FormEvent) => {