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

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

web/src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

web/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

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>
+  );
+}