feat(web): adopt MutationError across create/object forms; distinguish edit-form fetch error (#63)

web/src/vocab/vocabulary-list.tsx

@@ -5,6 +5,7 @@ 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 { MutationError } from "../components/mutation-error";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -54,11 +55,7 @@ export function VocabularyList() {
             {t("vocab.create")}
           </Button>
         </div>
-        {create.isError && (
-          <p role="alert" className="text-xs text-destructive">
-            {t("form.rejected")}
-          </p>
-        )}
+        <MutationError error={create.error} />
       </form>
       <div className="border-b p-2">
         <Input
@@ -106,11 +103,7 @@ export function VocabularyList() {
                 <Button type="button" variant="ghost" size="sm" onClick={() => setEditingId(null)}>
                   {t("form.cancel")}
                 </Button>
-                {renameVocabulary.isError && (
-                  <p role="alert" className="text-xs text-destructive">
-                    {t("form.rejected")}
-                  </p>
-                )}
+                <MutationError error={renameVocabulary.error} />
               </form>
             ) : (
               <>

web/src/vocab/vocabulary-terms.tsx

@@ -8,6 +8,7 @@ import { byLabel } from "../lib/sort";
 import { labelText } from "../lib/labels";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { LabelEditor } from "../components/label-editor";
+import { MutationError } from "../components/mutation-error";
 import { TermRow } from "./term-row";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -116,11 +117,7 @@ export function VocabularyTerms() {
             {t("form.required")}
           </p>
         )}
-        {addTerm.isError && (
-          <p role="alert" className="text-xs text-destructive">
-            {t("form.rejected")}
-          </p>
-        )}
+        <MutationError error={addTerm.error} />
         <Button type="submit" size="sm" disabled={addTerm.isPending}>
           {t("vocab.addTerm")}
         </Button>