feat(web): paginated object list with visibility badges and states

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

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

@@ -0,0 +1,46 @@
+import { beforeEach, 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 { ObjectList } from "./object-list";
+import i18n from "../i18n";
+
+beforeEach(async () => {
+  await i18n.changeLanguage("en");
+});
+
+function tree() {
+  return (
+    <Routes>
+      <Route path="/objects" element={<ObjectList />} />
+      <Route path="/objects/:id" element={<ObjectList />} />
+    </Routes>
+  );
+}
+
+test("renders object rows with number, name and visibility", async () => {
+  renderApp(tree(), { route: "/objects" });
+  expect(await screen.findByText("LM-0042")).toBeInTheDocument();
+  expect(screen.getByText("Amphora")).toBeInTheDocument();
+  expect(screen.getByText("Public")).toBeInTheDocument();
+});
+
+test("shows an empty state when there are no objects", async () => {
+  server.use(
+    http.get("/api/admin/objects", () =>
+      HttpResponse.json({ items: [], total: 0, limit: 50, offset: 0 }),
+    ),
+  );
+  renderApp(tree(), { route: "/objects" });
+  expect(await screen.findByText(/no objects yet/i)).toBeInTheDocument();
+});
+
+test("shows an error state on failure", async () => {
+  server.use(
+    http.get("/api/admin/objects", () => new HttpResponse(null, { status: 500 })),
+  );
+  renderApp(tree(), { route: "/objects" });
+  expect(await screen.findByText(/could not load objects/i)).toBeInTheDocument();
+});

web/src/objects/object-list.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { NavLink, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useObjectsPage } from "../api/queries";
+import { VisibilityBadge } from "./visibility-badge";
+
+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);
+
+  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>
+    );
+  }
+
+  if (isError) {
+    return <p className="p-4 text-sm text-red-600">{t("objects.loadError")}</p>;
+  }
+
+  if (!data || data.items.length === 0) {
+    return <p className="p-4 text-sm text-neutral-500">{t("objects.empty")}</p>;
+  }
+
+  const from = data.total === 0 ? 0 : offset + 1;
+  const to = Math.min(offset + LIMIT, data.total);
+
+  return (
+    <div className="flex h-full flex-col">
+      <ul className="flex-1 overflow-auto">
+        {data.items.map((object) => (
+          <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 ${
+                object.id === selectedId ? "bg-indigo-50" : "hover:bg-neutral-50"
+              }`}
+            >
+              <span className="truncate">
+                <span className="text-neutral-500">{object.object_number}</span>{" "}
+                {object.object_name}
+              </span>
+              <VisibilityBadge visibility={object.visibility} />
+            </NavLink>
+          </li>
+        ))}
+      </ul>
+      <div className="flex items-center justify-between border-t px-3 py-2 text-xs text-neutral-500">
+        <span>
+          {from}–{to} {t("objects.of")} {data.total}
+        </span>
+        <span className="flex gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={offset === 0}
+            onClick={() => setOffset(Math.max(0, offset - LIMIT))}
+          >
+            {t("objects.prev")}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={to >= data.total}
+            onClick={() => setOffset(offset + LIMIT)}
+          >
+            {t("objects.next")}
+          </Button>
+        </span>
+      </div>
+    </div>
+  );
+}

web/src/objects/visibility-badge.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+
+import { Badge } from "@/components/ui/badge";
+
+const STYLES: Record<string, string> = {
+  draft: "bg-neutral-100 text-neutral-600",
+  internal: "bg-amber-100 text-amber-800",
+  public: "bg-green-100 text-green-800",
+};
+
+export function VisibilityBadge({ visibility }: { visibility: string }) {
+  const { t } = useTranslation();
+
+  return (
+    <Badge variant="outline" className={STYLES[visibility] ?? ""}>
+      {t(`visibility.${visibility}`)}
+    </Badge>
+  );
+}