feat(web): readable, grouped object detail (labels, placeholders, actions toolbar) (#45)

Refactor object-detail.tsx to resolve term/authority ids to labels via
FlexibleFieldValue, group flexible fields by def.group in definition order
(ungrouped → trailing "Other"), always show core fields with "—" placeholders,
and move Edit (button-styled Link) + Delete into a right-aligned toolbar.

Move formatDate into lib/format-date.ts so the component module no longer
co-exports a non-component (clears the react-refresh/only-export-components
warning); both flexible-field-value.tsx and object-detail.tsx import it.

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

web/src/i18n/en.json

@@ -4,7 +4,7 @@
   "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar" },
   "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server" },
   "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)" },
-  "fieldsLabels": { "objectNumber": "Object number", "objectName": "Name", "count": "Number of objects", "briefDescription": "Brief description", "currentLocation": "Current location", "currentOwner": "Current owner", "recorder": "Recorder", "recordingDate": "Recording date", "visibility": "Visibility", "flexible": "Catalogue fields" },
+  "fieldsLabels": { "objectNumber": "Object number", "objectName": "Name", "count": "Number of objects", "briefDescription": "Brief description", "currentLocation": "Current location", "currentOwner": "Current owner", "recorder": "Recorder", "recordingDate": "Recording date", "visibility": "Visibility" },
   "visibility": { "draft": "Draft", "internal": "Internal", "public": "Public" },
   "form": { "selectPlaceholder": "— select —", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "fieldRejected": "The field \"{{field}}\" was rejected — check its value", "flexibleHeading": "Catalogue fields" },
   "actions": { "edit": "Edit", "delete": "Delete", "rename": "Rename", "save": "Save", "closeDetail": "Close detail", "confirmDelete": "Delete this object? This cannot be undone.", "confirmDeleteTerm": "Delete this term? This cannot be undone.", "confirmDeleteAuthority": "Delete this authority? This cannot be undone.", "confirmDeleteField": "Delete this field definition? This cannot be undone.", "confirmDeleteVocabulary": "Delete this vocabulary? This cannot be undone.", "inUse": "Can't delete — used by {{count}} object(s). Clear those fields first." },

web/src/i18n/sv.json

@@ -4,7 +4,7 @@
   "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet" },
   "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern" },
   "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)" },
-  "fieldsLabels": { "objectNumber": "Föremålsnummer", "objectName": "Namn", "count": "Antal föremål", "briefDescription": "Kort beskrivning", "currentLocation": "Nuvarande plats", "currentOwner": "Nuvarande ägare", "recorder": "Registrerad av", "recordingDate": "Registreringsdatum", "visibility": "Synlighet", "flexible": "Katalogfält" },
+  "fieldsLabels": { "objectNumber": "Föremålsnummer", "objectName": "Namn", "count": "Antal föremål", "briefDescription": "Kort beskrivning", "currentLocation": "Nuvarande plats", "currentOwner": "Nuvarande ägare", "recorder": "Registrerad av", "recordingDate": "Registreringsdatum", "visibility": "Synlighet" },
   "visibility": { "draft": "Utkast", "internal": "Intern", "public": "Publik" },
   "form": { "selectPlaceholder": "— välj —", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "fieldRejected": "Fältet \"{{field}}\" avvisades — kontrollera värdet", "flexibleHeading": "Katalogfält" },
   "actions": { "edit": "Redigera", "delete": "Ta bort", "rename": "Byt namn", "save": "Spara", "closeDetail": "Stäng detalj", "confirmDelete": "Ta bort detta föremål? Detta kan inte ångras.", "confirmDeleteTerm": "Ta bort denna term? Detta kan inte ångras.", "confirmDeleteAuthority": "Ta bort denna auktoritet? Detta kan inte ångras.", "confirmDeleteField": "Ta bort denna fältdefinition? Detta kan inte ångras.", "confirmDeleteVocabulary": "Ta bort denna vokabulär? Detta kan inte ångras.", "inUse": "Kan inte ta bort — används av {{count}} föremål. Rensa de fälten först." },

web/src/lib/format-date.ts

@@ -0,0 +1,8 @@
+/** Formats a date-only ISO string (YYYY-MM-DD) for display in the active locale.
+ *  Parses as local midnight so a date-only value isn't shifted a day by tz. */
+export function formatDate(value: unknown, lang: string): string {
+  if (typeof value !== "string") return value == null ? "—" : String(value);
+  const date = new Date(`${value}T00:00:00`);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(lang, { dateStyle: "medium" }).format(date);
+}

web/src/objects/flexible-field-value.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import type { components } from "../api/schema";
 import { useTerms, useAuthorities } from "../api/queries";
 import { labelText } from "../lib/labels";
+import { formatDate } from "../lib/format-date";
 
 type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
 
@@ -91,12 +92,3 @@ function pickLocalized(value: unknown, lang: string): string {
   }
   return value == null ? "—" : String(value);
 }
-
-/** Formats a date-only ISO string (YYYY-MM-DD) for display in the active locale.
- *  Parses as local midnight so a date-only value isn't shifted a day by tz. */
-export function formatDate(value: unknown, lang: string): string {
-  if (typeof value !== "string") return value == null ? "—" : String(value);
-  const date = new Date(`${value}T00:00:00`);
-  if (Number.isNaN(date.getTime())) return value;
-  return new Intl.DateTimeFormat(lang, { dateStyle: "medium" }).format(date);
-}

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

@@ -1,9 +1,10 @@
 import { expect, test } from "vitest";
-import { screen } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import { Routes, Route } from "react-router-dom";
 import { server } from "../test/server";
 import { renderApp } from "../test/render";
+import { amphora } from "../test/fixtures";
 import { ObjectDetail } from "./object-detail";
 
 function tree() {
@@ -14,35 +15,81 @@ function tree() {
   );
 }
 
-test("renders inventory-minimum fields, flexible values and visibility", async () => {
+// An object seeded with a term, a localized_text and a date flexible value.
-  // override so the object carries a flexible field value (schema types fields as
+// `inscription` belongs to the "Description" group; the rest are ungrouped
-  // Record<string,never>, so return a plain object literal here)
+// ("Other"). recording_date is null to exercise the empty-core placeholder.
-  server.use(
+const detailed = {
-    http.get("/api/admin/objects/:id", () =>
+  ...amphora,
-      HttpResponse.json({
+  recording_date: null,
-        id: "11111111-1111-1111-1111-111111111111",
+  fields: {
-        object_number: "LM-0042",
+    inscription: "AVE",
-        object_name: "Amphora",
+    material: "t-bronze",
-        number_of_objects: 1,
+    title_ml: { sv: "Brons-amfora", en: "Bronze amphora" },
-        brief_description: "Storage jar",
+    made_on: "2024-01-05",
-        current_location: "Vault 3",
+    // No matching field definition — its definition was removed after the value
-        current_owner: null,
+    // was set. Must still render (muted), keyed by its raw key.
-        recorder: null,
+    legacy_note: "orphaned value",
-        recording_date: null,
+  },
-        visibility: "public",
+};
-        fields: { material: "Bronze" },
+
-      }),
+function renderDetail() {
-    ),
+  server.use(http.get("/api/admin/objects/:id", () => HttpResponse.json(detailed)));
-  );
+  return renderApp(tree(), { route: `/objects/${detailed.id}` });
-  renderApp(tree(), { route: "/objects/11111111-1111-1111-1111-111111111111" });
+}
+
+test("renders inventory-minimum fields and visibility", async () => {
+  renderDetail();
   expect(await screen.findByText("Amphora")).toBeInTheDocument();
   expect(screen.getByText("Vault 3")).toBeInTheDocument();
-  expect(screen.getByText("Bronze")).toBeInTheDocument(); // flexible field value
   // "Public" appears in both the VisibilityBadge and the PublishControl stepper;
   // scope the assertion to the badge element to avoid ambiguity.
   expect(document.querySelector("[data-slot='badge']")).toHaveTextContent("Public");
 });
 
+test("resolves a term id to its label, not the UUID", async () => {
+  renderDetail();
+  expect(await screen.findByText("Bronze")).toBeInTheDocument();
+  expect(screen.queryByText("t-bronze")).not.toBeInTheDocument();
+});
+
+test("renders a localized_text value as a string, not JSON", async () => {
+  renderDetail();
+  // i18n falls back to "en", so the en variant is picked, never the JSON object.
+  expect(await screen.findByText("Bronze amphora")).toBeInTheDocument();
+  expect(screen.queryByText(/\{.*"en".*\}/)).not.toBeInTheDocument();
+});
+
+test("groups flexible fields under subheadings in definition order", async () => {
+  renderDetail();
+  await screen.findByText("Bronze");
+  // "Description" (the inscription def's group) precedes the trailing "Other" group.
+  const description = screen.getByText("Description");
+  const other = screen.getByText("Other");
+  expect(description.compareDocumentPosition(other)).toBe(
+    Node.DOCUMENT_POSITION_FOLLOWING,
+  );
+});
+
+test("renders an orphaned field key (no definition) with its raw key and value", async () => {
+  renderDetail();
+  await screen.findByText("Bronze");
+  // The key itself is the label, since there is no definition to localize it.
+  expect(screen.getByText("legacy_note")).toBeInTheDocument();
+  expect(screen.getByText("orphaned value")).toBeInTheDocument();
+});
+
+test("an empty core field shows a placeholder dash", async () => {
+  renderDetail();
+  const recordingDate = (await screen.findByText("Recording date")).parentElement;
+  expect(within(recordingDate!).getByText("—")).toBeInTheDocument();
+});
+
+test("the Edit link points to the object's edit route", async () => {
+  renderDetail();
+  const edit = await screen.findByRole("link", { name: "Edit" });
+  expect(edit).toHaveAttribute("href", `/objects/${detailed.id}/edit`);
+});
+
 test("shows a not-found state for a missing object", async () => {
   server.use(http.get("/api/admin/objects/:id", () => new HttpResponse(null, { status: 404 })));
   renderApp(tree(), { route: "/objects/does-not-exist" });

web/src/objects/object-detail.tsx

@@ -1,25 +1,26 @@
+import type { ReactNode } from "react";
 import { Link, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
+import type { components } from "../api/schema";
 import { useObject, useFieldDefinitions } from "../api/queries";
+import { formatDate } from "../lib/format-date";
 import { DeleteObjectDialog } from "./delete-object-dialog";
+import { FlexibleFieldValue } from "./flexible-field-value";
 import { PublishControl } from "./publish-control";
 import { VisibilityBadge } from "./visibility-badge";
+import { buttonVariants } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 
-function Field({
+type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
-  label,
+
-  value,
+function Field({ label, value }: { label: string; value: ReactNode }) {
-}: {
+  const empty = value === null || value === undefined || value === "";
-  label: string;
-  value: string | number | null | undefined;
-}) {
-  if (value === null || value === undefined || value === "") return null;
 
   return (
     <div className="border-b py-2">
       <div className="text-xs uppercase tracking-wide text-neutral-400">{label}</div>
-      <div className="text-sm text-neutral-900">{value}</div>
+      <div className="text-sm text-neutral-900">{empty ? "—" : value}</div>
     </div>
   );
 }
@@ -52,17 +53,45 @@ export function ObjectDetail() {
     return byLang ?? byEnglish ?? key;
   };
 
-  const flexible = Object.entries(object.fields);
+  // Iterate definitions (stable order) and keep only defs whose key has a
+  // non-null value on this object, grouped by def.group. Ungrouped defs fall
+  // into a trailing "Other" group.
+  const other = t("fields.other");
+  const present = (definitions ?? []).filter((d) => object.fields[d.key] != null);
+  const groups: { group: string; defs: FieldDefinitionView[] }[] = [];
+  for (const def of present) {
+    const isOther = !def.group?.trim();
+    const group = isOther ? other : def.group!;
+    let bucket = groups.find((x) => x.group === group);
+    if (!bucket) {
+      bucket = { group, defs: [] };
+      groups.push(bucket);
+    }
+    bucket.defs.push(def);
+  }
+  // Defensive: a key present in object.fields with no matching definition (e.g. a
+  // definition removed after the value was set). Render it muted under "Other"
+  // rather than silently dropping data; the raw key is the label.
+  const definedKeys = new Set((definitions ?? []).map((d) => d.key));
+  const orphans = Object.entries(object.fields).filter(
+    ([key, value]) => !definedKeys.has(key) && value != null,
+  );
+  if (orphans.length > 0 && !groups.some((g) => g.group === other)) {
+    groups.push({ group: other, defs: [] });
+  }
+  groups.sort((a, b) => Number(a.group === other) - Number(b.group === other));
 
   return (
     <div className="overflow-auto p-4">
       <div className="mb-4 flex items-center gap-3">
         <h2 className="text-xl font-semibold">{object.object_name}</h2>
         <VisibilityBadge visibility={object.visibility} />
-        <Link to={`/objects/${object.id}/edit`} className="text-sm font-medium text-indigo-600">
+        <div className="ml-auto flex items-center gap-2">
-          {t("actions.edit")}
+          <Link to={`/objects/${object.id}/edit`} className={buttonVariants({ size: "sm" })}>
-        </Link>
+            {t("actions.edit")}
-        <DeleteObjectDialog id={object.id} />
+          </Link>
+          <DeleteObjectDialog id={object.id} />
+        </div>
       </div>
       <Field label={t("fieldsLabels.objectNumber")} value={object.object_number} />
       <Field label={t("fieldsLabels.count")} value={object.number_of_objects} />
@@ -70,27 +99,34 @@ export function ObjectDetail() {
       <Field label={t("fieldsLabels.currentLocation")} value={object.current_location} />
       <Field label={t("fieldsLabels.currentOwner")} value={object.current_owner} />
       <Field label={t("fieldsLabels.recorder")} value={object.recorder} />
-      <Field label={t("fieldsLabels.recordingDate")} value={object.recording_date} />
+      <Field
-      {flexible.length > 0 && (
+        label={t("fieldsLabels.recordingDate")}
-        <div className="mt-4">
+        value={object.recording_date ? formatDate(object.recording_date, lang) : null}
-          <div className="mb-1 text-xs font-medium uppercase text-neutral-500">
+      />
-            {t("fieldsLabels.flexible")}
+      {groups.map((g) => (
-          </div>
+        <div key={g.group} className="mt-4">
-          {flexible.map(([key, value]) => (
+          <div className="mb-1 text-xs font-medium uppercase text-neutral-500">{g.group}</div>
+          {g.defs.map((d) => (
             <Field
-              key={key}
+              key={d.key}
-              label={labelFor(key)}
+              label={labelFor(d.key)}
-              value={
+              value={<FlexibleFieldValue def={d} value={object.fields[d.key]} lang={lang} />}
-                value == null
-                  ? null
-                  : typeof value === "object"
-                    ? JSON.stringify(value)
-                    : String(value)
-              }
             />
           ))}
+          {g.group === other &&
+            orphans.map(([key, value]) => (
+              <Field
+                key={key}
+                label={key}
+                value={
+                  <span className="text-neutral-400">
+                    {typeof value === "object" ? JSON.stringify(value) : String(value)}
+                  </span>
+                }
+              />
+            ))}
         </div>
-      )}
+      ))}
       <PublishControl object={object} />
     </div>
   );