feat(web): object detail + two-pane page + app routing

Implements the navigable SPA shell: object detail pane showing
inventory-minimum fields, flexible fields (via Record<string,unknown>
cast) and visibility badge; ObjectsPage two-pane layout; BrowserRouter
wired through RequireAuth+AppShell; QueryClient provided in main.tsx.
Consolidates ObjectList NavLink to use isActive function form, removing
manual useParams highlight.

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

web/src/app.test.tsx

@@ -1,7 +1,17 @@
 import { render, screen } from "@testing-library/react";
-import { App } from "./app";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-test("renders the app placeholder", () => {
+import { App } from "./app";
-  render(<App />);
+import "./i18n";
-  expect(screen.getByRole("heading", { name: /collection/i })).toBeInTheDocument();
+
+test("mounts and routes to a known screen", async () => {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+
+  render(
+    <QueryClientProvider client={qc}>
+      <App />
+    </QueryClientProvider>,
+  );
+
+  expect(await screen.findByText(/object|föremål|sign in|logga in/i)).toBeInTheDocument();
 });

web/src/app.tsx

@@ -1,3 +1,24 @@
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+
+import { RequireAuth } from "./auth/require-auth";
+import { LoginPage } from "./auth/login-page";
+import { AppShell } from "./shell/app-shell";
+import { ObjectsPage } from "./objects/objects-page";
+
 export function App() {
-  return <h1>Collection</h1>;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route element={<RequireAuth />}>
+          <Route element={<AppShell />}>
+            <Route path="/objects" element={<ObjectsPage />} />
+            <Route path="/objects/:id" element={<ObjectsPage />} />
+            <Route path="/" element={<Navigate to="/objects" replace />} />
+          </Route>
+        </Route>
+        <Route path="*" element={<Navigate to="/objects" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }

web/src/main.tsx

@@ -1,11 +1,19 @@
-import "./index.css";
-import "./i18n";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 import { App } from "./app";
+import "./index.css";
+import "./i18n";
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false, refetchOnWindowFocus: false } },
+});
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
+    <QueryClientProvider client={queryClient}>
       <App />
+    </QueryClientProvider>
   </StrictMode>,
 );

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

@@ -0,0 +1,48 @@
+import { expect, test } from "vitest";
+import { screen } 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 { ObjectDetail } from "./object-detail";
+
+function tree() {
+  return (
+    <Routes>
+      <Route path="/objects/:id" element={<ObjectDetail />} />
+    </Routes>
+  );
+}
+
+test("renders inventory-minimum fields, flexible values and visibility", async () => {
+  // override so the object carries a flexible field value (schema types fields as
+  // Record<string,never>, so return a plain object literal here)
+  server.use(
+    http.get("/api/admin/objects/:id", () =>
+      HttpResponse.json({
+        id: "11111111-1111-1111-1111-111111111111",
+        object_number: "LM-0042",
+        object_name: "Amphora",
+        number_of_objects: 1,
+        brief_description: "Storage jar",
+        current_location: "Vault 3",
+        current_owner: null,
+        recorder: null,
+        recording_date: null,
+        visibility: "public",
+        fields: { material: "Bronze" },
+      }),
+    ),
+  );
+  renderApp(tree(), { route: "/objects/11111111-1111-1111-1111-111111111111" });
+  expect(await screen.findByText("Amphora")).toBeInTheDocument();
+  expect(screen.getByText("Vault 3")).toBeInTheDocument();
+  expect(screen.getByText("Bronze")).toBeInTheDocument(); // flexible field value
+  expect(screen.getByText("Public")).toBeInTheDocument();
+});
+
+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" });
+  expect(await screen.findByText(/object not found/i)).toBeInTheDocument();
+});

web/src/objects/object-detail.tsx

@@ -0,0 +1,77 @@
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { useObject, useFieldDefinitions } from "../api/queries";
+import { VisibilityBadge } from "./visibility-badge";
+import { Skeleton } from "@/components/ui/skeleton";
+
+function Field({
+  label,
+  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>
+  );
+}
+
+export function ObjectDetail() {
+  const { t } = useTranslation();
+  const { id } = useParams();
+  const { data: object, isLoading, isError } = useObject(id!);
+  const { data: definitions } = useFieldDefinitions();
+
+  if (isLoading) {
+    return (
+      <div className="p-4">
+        <Skeleton className="h-40 w-full" />
+      </div>
+    );
+  }
+
+  if (isError) return <p className="p-4 text-sm text-red-600">{t("objects.loadError")}</p>;
+
+  if (!object) return <p className="p-4 text-sm text-neutral-500">{t("objects.notFound")}</p>;
+
+  const labelFor = (key: string) =>
+    definitions?.find((d) => d.key === key)?.labels.find((l) => l.lang === "en")?.label ?? key;
+
+  const flexible = Object.entries(object.fields as Record<string, unknown>);
+
+  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} />
+      </div>
+      <Field label={t("fieldsLabels.objectNumber")} value={object.object_number} />
+      <Field label={t("fieldsLabels.count")} value={object.number_of_objects} />
+      <Field label={t("fieldsLabels.briefDescription")} value={object.brief_description} />
+      <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} />
+      {flexible.length > 0 && (
+        <div className="mt-4">
+          <div className="mb-1 text-xs font-medium uppercase text-neutral-500">
+            {t("fieldsLabels.flexible")}
+          </div>
+          {flexible.map(([key, value]) => (
+            <Field
+              key={key}
+              label={labelFor(key)}
+              value={typeof value === "object" ? JSON.stringify(value) : String(value)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

web/src/objects/object-list.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { NavLink, useParams } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
@@ -11,7 +11,6 @@ const LIMIT = 50;
 
 export function ObjectList() {
   const { t } = useTranslation();
-  const { id: selectedId } = useParams();
   const [offset, setOffset] = useState(0);
 
   const { data, isLoading, isError } = useObjectsPage(LIMIT, offset);
@@ -44,9 +43,11 @@ export function ObjectList() {
           <li key={object.id}>
             <NavLink
               to={`/objects/${object.id}`}
-              className={`flex items-center justify-between gap-2 border-b px-3 py-2 text-sm ${
+              className={({ isActive }) =>
-                object.id === selectedId ? "bg-indigo-50" : "hover:bg-neutral-50"
+                `flex items-center justify-between gap-2 border-b px-3 py-2 text-sm ${
-              }`}
+                  isActive ? "bg-indigo-50" : "hover:bg-neutral-50"
+                }`
+              }
             >
               <span className="truncate">
                 <span className="text-neutral-500">{object.object_number}</span>{" "}

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

@@ -0,0 +1,23 @@
+import { expect, test } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Routes, Route } from "react-router-dom";
+import { renderApp } from "../test/render";
+import { ObjectsPage } from "./objects-page";
+
+function tree() {
+  return (
+    <Routes>
+      <Route path="/objects" element={<ObjectsPage />} />
+      <Route path="/objects/:id" element={<ObjectsPage />} />
+    </Routes>
+  );
+}
+
+test("selecting a row shows its detail in the right pane", async () => {
+  renderApp(tree(), { route: "/objects" });
+  // Wait for both the prompt (right pane) and the list rows (left pane) to load.
+  await screen.findByText(/select an object/i);
+  await userEvent.click(await screen.findByText("Amphora"));
+  expect(await screen.findByRole("heading", { name: "Amphora" })).toBeInTheDocument();
+});

web/src/objects/objects-page.tsx

@@ -0,0 +1,27 @@
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { ObjectList } from "./object-list";
+import { ObjectDetail } from "./object-detail";
+
+export function ObjectsPage() {
+  const { t } = useTranslation();
+  const { id } = useParams();
+
+  return (
+    <div className="grid h-full grid-cols-[20rem_1fr]">
+      <div className="overflow-hidden border-r">
+        <ObjectList />
+      </div>
+      <div className="overflow-hidden">
+        {id ? (
+          <ObjectDetail />
+        ) : (
+          <div className="flex h-full items-center justify-center p-4 text-sm text-neutral-400">
+            {t("objects.selectPrompt")}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}