feat(web): page <h1> + document.title on list/form routes (#57)

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

web/src/vocab/vocabularies-page.tsx

@@ -1,15 +1,25 @@
 import { Outlet } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 import { VocabularyList } from "./vocabulary-list";
+import { useDocumentTitle } from "../lib/use-document-title";
+import { PageTitle } from "@/components/ui/page-title";
 
 export function VocabulariesPage() {
+  const { t } = useTranslation();
+
+  useDocumentTitle(t("nav.vocabularies"));
+
   return (
-    <div className="grid h-full grid-cols-[20rem_1fr]">
-      <div className="overflow-hidden border-r">
-        <VocabularyList />
-      </div>
-      <div className="overflow-hidden">
-        <Outlet />
+    <div className="flex h-full flex-col">
+      <PageTitle className="px-4 pt-4 pb-2">{t("nav.vocabularies")}</PageTitle>
+      <div className="grid flex-1 grid-cols-[20rem_1fr] overflow-hidden">
+        <div className="overflow-hidden border-r">
+          <VocabularyList />
+        </div>
+        <div className="overflow-hidden">
+          <Outlet />
+        </div>
       </div>
     </div>
   );