feat(web): new-object full-width page + create flow + /objects/new

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

web/src/objects/object-list.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
@@ -15,22 +15,43 @@ export function ObjectList() {
 
   const { data, isLoading, isError } = useObjectsPage(LIMIT, offset);
 
+  const header = (
+    <div className="flex items-center justify-between border-b px-3 py-2">
+      <Link to="/objects/new" className="text-sm font-medium text-indigo-600">
+        {t("objects.new")}
+      </Link>
+    </div>
+  );
+
   if (isLoading) {
     return (
-      <div className="space-y-2 p-3">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <Skeleton key={i} className="h-9 w-full" />
-        ))}
+      <div>
+        {header}
+        <div className="space-y-2 p-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-9 w-full" />
+          ))}
+        </div>
       </div>
     );
   }
 
   if (isError) {
-    return <p className="p-4 text-sm text-red-600">{t("objects.loadError")}</p>;
+    return (
+      <div>
+        {header}
+        <p className="p-4 text-sm text-red-600">{t("objects.loadError")}</p>
+      </div>
+    );
   }
 
   if (!data || data.items.length === 0) {
-    return <p className="p-4 text-sm text-neutral-500">{t("objects.empty")}</p>;
+    return (
+      <div>
+        {header}
+        <p className="p-4 text-sm text-neutral-500">{t("objects.empty")}</p>
+      </div>
+    );
   }
 
   const from = data.total === 0 ? 0 : offset + 1;
@@ -38,6 +59,7 @@ export function ObjectList() {
 
   return (
     <div className="flex h-full flex-col">
+      {header}
       <ul className="flex-1 overflow-auto">
         {data.items.map((object) => (
           <li key={object.id}>

web/src/objects/object-new-page.test.tsx

@@ -0,0 +1,65 @@
+import { expect, test } from "vitest";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { Routes, Route } from "react-router-dom";
+import { server } from "../test/server";
+import { renderApp } from "../test/render";
+import { ObjectNewPage } from "./object-new-page";
+
+function tree() {
+  return (
+    <Routes>
+      <Route path="/objects/new" element={<ObjectNewPage />} />
+      <Route path="/objects/:id" element={<div>detail view</div>} />
+      <Route path="/objects/:id/edit" element={<div>edit page</div>} />
+    </Routes>
+  );
+}
+
+test("create: POST then PUT fields, then navigate to the new object's detail", async () => {
+  let postBody: unknown;
+  let fieldsBody: unknown;
+
+  server.use(
+    http.post("/api/admin/objects", async ({ request }) => {
+      postBody = await request.json();
+      return HttpResponse.json({ id: "new-id-1" }, { status: 201 });
+    }),
+    http.put("/api/admin/objects/:id/fields", async ({ request }) => {
+      fieldsBody = await request.json();
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+
+  renderApp(tree(), { route: "/objects/new" });
+
+  await userEvent.type(await screen.findByLabelText(/object number/i), "A-9");
+  await userEvent.type(screen.getByLabelText(/^name/i), "Amphora");
+  await userEvent.type(screen.getByLabelText(/inscription/i), "To the gods");
+  await userEvent.click(screen.getByRole("button", { name: /create object/i }));
+
+  await waitFor(() => expect(screen.getByText("detail view")).toBeInTheDocument());
+  expect((postBody as { object_number: string }).object_number).toBe("A-9");
+  expect((fieldsBody as { inscription: string }).inscription).toBe("To the gods");
+});
+
+test("partial create: fields PUT fails -> navigate to edit with an error banner", async () => {
+  server.use(
+    http.post("/api/admin/objects", () =>
+      HttpResponse.json({ id: "new-id-2" }, { status: 201 }),
+    ),
+    http.put("/api/admin/objects/:id/fields", () =>
+      new HttpResponse(null, { status: 422 }),
+    ),
+  );
+
+  renderApp(tree(), { route: "/objects/new" });
+
+  await userEvent.type(await screen.findByLabelText(/object number/i), "A-9");
+  await userEvent.type(screen.getByLabelText(/^name/i), "Amphora");
+  await userEvent.type(screen.getByLabelText(/inscription/i), "x");
+  await userEvent.click(screen.getByRole("button", { name: /create object/i }));
+
+  await waitFor(() => expect(screen.getByText("edit page")).toBeInTheDocument());
+});

web/src/objects/object-new-page.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { ObjectForm, type ObjectFormValues } from "./object-form";
+import { useCreateObject, useSetFields } from "../api/queries";
+
+export function ObjectNewPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const create = useCreateObject();
+  const setFields = useSetFields();
+  const [error, setError] = useState<string | null>(null);
+
+  const onSubmit = async (values: ObjectFormValues) => {
+    setError(null);
+
+    let id: string;
+
+    try {
+      const created = await create.mutateAsync({
+        ...values.core,
+        visibility: values.visibility ?? "draft",
+      });
+
+      id = created.id;
+    } catch {
+      setError(t("form.rejected"));
+      return;
+    }
+
+    if (Object.keys(values.fields).length > 0) {
+      try {
+        await setFields.mutateAsync({ id, fields: values.fields });
+      } catch {
+        navigate(`/objects/${id}/edit`, { state: { fieldsError: true } });
+        return;
+      }
+    }
+
+    navigate(`/objects/${id}`);
+  };
+
+  return (
+    <div className="mx-auto max-w-2xl">
+      <ObjectForm
+        mode="create"
+        formError={error}
+        onSubmit={onSubmit}
+        onCancel={() => navigate("/objects")}
+      />
+    </div>
+  );
+}