feat(web): group object-form flexible fields by definition group (#45)

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

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

@@ -82,6 +82,18 @@ test("edit mode: no visibility control, save button, prefilled values", async ()
   expect(screen.getByRole("button", { name: /save/i })).toBeInTheDocument();
 });
 
+test("groups flexible fields by definition group with subheadings", async () => {
+  renderApp(<ObjectForm mode="create" onSubmit={vi.fn()} onCancel={() => {}} />);
+
+  expect(await screen.findByText("Description")).toBeInTheDocument();
+  expect(screen.getByText(/^Other$/)).toBeInTheDocument();
+
+  const inscription = screen.getByLabelText(/inscription/i);
+  const material = screen.getByLabelText(/material/i);
+
+  expect(inscription.compareDocumentPosition(material) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+});
+
 test("pruneFields: localized_text keeps only the default-language key, other object fields unaffected", () => {
   const localizedTextKeys = new Set(["title_ml"]);
 

web/src/objects/object-form.tsx

@@ -6,6 +6,7 @@ import { useFieldDefinitions } from "../api/queries";
 import { useConfig } from "../config/config-context";
 import { FieldInput } from "./field-input";
 import { pruneFields } from "./prune-fields";
+import { groupDefinitions } from "../lib/group-fields";
 import { UnsavedChangesDialog } from "../lib/unsaved-changes-dialog";
 import { useUnsavedChanges } from "../lib/use-unsaved-changes";
 import { Button } from "@/components/ui/button";
@@ -197,19 +198,23 @@ export function ObjectForm({
 
       {definitions && definitions.length > 0 && (
         <fieldset className="space-y-3 border-t pt-3">
-          <legend className="label-caption">
-            {t("form.flexibleHeading")}
-          </legend>
+          <legend className="sr-only">{t("form.flexibleHeading")}</legend>
 
-          {definitions.map((def) => (
-            <div key={def.key}>
-              <FieldInput definition={def} form={form} />
+          {groupDefinitions(definitions, t("fields.other")).map((g) => (
+            <div key={g.group} className="space-y-3">
+              <div className="label-caption">{g.group}</div>
 
-              {errors.fields?.[def.key] && (
-                <p role="alert" className="text-xs text-destructive">
-                  {errors.fields[def.key]?.message ?? t("form.required")}
-                </p>
-              )}
+              {g.defs.map((def) => (
+                <div key={def.key}>
+                  <FieldInput definition={def} form={form} />
+
+                  {errors.fields?.[def.key] && (
+                    <p role="alert" className="text-xs text-destructive">
+                      {errors.fields[def.key]?.message ?? t("form.required")}
+                    </p>
+                  )}
+                </div>
+              ))}
             </div>
           ))}
         </fieldset>