feat(web): highlight the offending field on a set_fields 422 (#28)

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

web/src/objects/object-edit-form.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
-import { useObject, useUpdateObject, useSetFields } from "../api/queries";
+import { useObject, useUpdateObject, useSetFields, FieldRejection } from "../api/queries";
 import { ObjectForm, type ObjectCore, type ObjectFormValues } from "./object-form";
 
 export function ObjectEditForm() {
@@ -15,8 +15,14 @@ export function ObjectEditForm() {
   const update = useUpdateObject();
   const setFields = useSetFields();
 
+  const locationState = location.state as { fieldsError?: boolean; fieldErrorKey?: string } | null;
+
   const [error, setError] = useState<string | null>(
-    (location.state as { fieldsError?: boolean } | null)?.fieldsError ? t("form.rejected") : null,
+    locationState?.fieldsError ? t("form.rejected") : null,
+  );
+
+  const [fieldErrorKey, setFieldErrorKey] = useState<string | null>(
+    locationState?.fieldErrorKey ?? null,
   );
 
   if (isLoading) return <div className="p-4" role="status" aria-label="loading" />;
@@ -38,12 +44,19 @@ export function ObjectEditForm() {
 
   const onSubmit = async (values: ObjectFormValues) => {
     setError(null);
+    setFieldErrorKey(null);
 
     try {
       await update.mutateAsync({ id: id!, body: values.core });
       await setFields.mutateAsync({ id: id!, fields: values.fields });
-    } catch {
-      setError(t("form.rejected"));
+    } catch (e) {
+      if (e instanceof FieldRejection) {
+        setFieldErrorKey(e.field);
+        setError(t("form.fieldRejected", { field: e.field }));
+      } else {
+        setError(t("form.rejected"));
+      }
+
       return;
     }
 
@@ -55,6 +68,7 @@ export function ObjectEditForm() {
       mode="edit"
       defaults={defaults}
       formError={error}
+      fieldErrorKey={fieldErrorKey}
       onSubmit={onSubmit}
       onCancel={() => navigate(`/objects/${id}`)}
     />