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,11 +198,13 @@ export function ObjectForm({
 
       {definitions && definitions.length > 0 && (
         <fieldset className="space-y-3 border-t pt-3">
-          <legend className="label-caption">
+          <legend className="sr-only">{t("form.flexibleHeading")}</legend>
-            {t("form.flexibleHeading")}
-          </legend>
 
-          {definitions.map((def) => (
+          {groupDefinitions(definitions, t("fields.other")).map((g) => (
+            <div key={g.group} className="space-y-3">
+              <div className="label-caption">{g.group}</div>
+
+              {g.defs.map((def) => (
                 <div key={def.key}>
                   <FieldInput definition={def} form={form} />
 
@@ -212,6 +215,8 @@ export function ObjectForm({
                   )}
                 </div>
               ))}
+            </div>
+          ))}
         </fieldset>
       )}