ruact 0.0.5 → 0.0.7

data/vendor/javascript/vite-plugin-ruact/type-tests/scaffold/PostDeleteDialog.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+// Post delete confirmation — a CONTROLLED shadcn AlertDialog. The
+// PARENT owns `open` and provides `onConfirm`; this component owns only its local
+// submit/error state. `onConfirm` performs the destroyPost call (DELETE
+// /posts/:id) and reports `{ ok, error? }`:
+//
+//   - on success the parent closes the dialog (in-list removal of the row, or the
+//     server-driven `$redirect` the runtime follows) — no URL is built here;
+//   - on failure the dialog STAYS OPEN and shows the message inline (the gem's
+//     structured-error shape: the exception message in development, the generic
+//     server message in production).
+//
+// There is no Rails `method=delete` fallback — the destroyPost action
+// is the only path. Cancel / Escape / outside-click close via `onOpenChange(false)`
+// without deleting; focus returns to the row's Delete trigger (Radix default —
+// the trigger is never unmounted while the dialog animates).
+import { useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+type PostRow = { id: number; title: string | null; body: string | null; published: boolean | null; views: number | null; published_at: string | null; author_id: number | null };
+
+// FR100 — opt-in call-site contract. INERT for this component: it is rendered
+// only from PostList.tsx (JSX), never from an ERB `<Component>` tag,
+// so the 13.5 preprocess validator never runs against it. Retained for uniformity
+// with the List/Form.
+export const __ruactContract = {
+  props: { post: "required" },
+};
+
+export function PostDeleteDialog({
+  open,
+  onOpenChange,
+  post,
+  onConfirm,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  post: PostRow;
+  onConfirm: () => Promise<{ ok: boolean; error?: string }>;
+}) {
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleConfirm(event: { preventDefault: () => void }) {
+    // Keep the dialog open across the async destroy — Radix's AlertDialogAction
+    // would otherwise close it on click. The PARENT closes it (via onOpenChange)
+    // only after a successful delete; a failure leaves it open with the message.
+    event.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    const res = await onConfirm();
+    setSubmitting(false);
+    if (!res.ok) {
+      setError(res.error ?? "Could not delete this post");
+    }
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete “{String(post.title ?? "")}”?</AlertDialogTitle>
+          <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+        </AlertDialogHeader>
+        {error && <p className="text-sm text-destructive">{error}</p>}
+        <AlertDialogFooter>
+          {/* Cancel gets default focus (Radix) — the safe choice is the default. */}
+          <AlertDialogCancel disabled={submitting}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            disabled={submitting}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {submitting ? "Deleting…" : "Delete"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

data/vendor/javascript/vite-plugin-ruact/type-tests/scaffold/PostForm.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+// Post form — shared by `new` (initial == null) and `edit` (initial
+// == the serialized record). Each field renders the shadcn control mapped to its
+// attribute type (Input / Textarea / Switch / Select), labelled, with the FR98
+// server error surfaced inline beneath it. Submits through the v2 action
+// accessors: createPost (POST /posts) or updatePost (PATCH /posts/:id). On
+// success the controller drives navigation SERVER-SIDE via `redirect_to`
+// (the `$redirect` the runtime follows) — there is no client URL building here.
+// On a validation failure the SAME response carries the FR98 attribute-keyed
+// `errors` map, surfaced inline per field (the client stays on the form).
+//
+// The `@/components/ui/*` primitives below are installed by Story 10.5; a freshly
+// scaffolded app will not resolve them until then (the live demo is Story 10.7).
+//
+// Client-side validation is intentionally NOT here — it is server-only with a
+// full round-trip (Story 10.6 adds the model-validation bridge). The controlled
+// `useState` keeps this dependency-free; to adopt rich client validation later,
+// swap the controlled state for react-hook-form's `useForm` + shadcn `<Form>` and
+// feed these same FR98 `errors` into `setError` per key (opt-in — not the default).
+import { useState, type FormEvent } from "react";
+import { createPost, updatePost } from "@/.ruact/server-functions";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+type PostRow = { id: number; title: string | null; body: string | null; published: boolean | null; views: number | null; published_on: string | null; published_at: string | null; author_id: number | null };
+
+// FR100 — opt-in call-site contract: `initial` is OPTIONAL (`new` omits it,
+// `edit` passes the serialized record); each `references` field adds an
+// optional `<name>Options` prop the new/edit views pass. A typo'd prop name
+// fails at preprocess time instead of silently arriving as `undefined`.
+export const __ruactContract = {
+  props: { initial: "optional", authorOptions: "optional" },
+};
+
+export function PostForm({ initial = null, authorOptions = [] }: { initial?: PostRow | null; authorOptions?: { id: number; label: string }[] }) {
+  // String-valued state: native/shadcn controls bind `string` (numbers + refs
+  // arrive on the row as numbers, so coerce here). The controller re-coerces.
+  const [title, setTitle] = useState(String(initial?.title ?? ""));
+  // String-valued state: native/shadcn controls bind `string` (numbers + refs
+  // arrive on the row as numbers, so coerce here). The controller re-coerces.
+  const [body, setBody] = useState(String(initial?.body ?? ""));
+  const [published, setPublished] = useState(Boolean(initial?.published ?? false));
+  // String-valued state: native/shadcn controls bind `string` (numbers + refs
+  // arrive on the row as numbers, so coerce here). The controller re-coerces.
+  const [views, setViews] = useState(String(initial?.views ?? ""));
+  // String-valued state: native/shadcn controls bind `string` (numbers + refs
+  // arrive on the row as numbers, so coerce here). The controller re-coerces.
+  const [publishedOn, setPublishedOn] = useState(String(initial?.published_on ?? ""));
+  // String-valued state: native/shadcn controls bind `string` (numbers + refs
+  // arrive on the row as numbers, so coerce here). The controller re-coerces.
+  const [publishedAt, setPublishedAt] = useState(String(initial?.published_at ?? ""));
+  // String-valued state: native/shadcn controls bind `string` (numbers + refs
+  // arrive on the row as numbers, so coerce here). The controller re-coerces.
+  const [authorId, setAuthorId] = useState(String(initial?.author_id ?? ""));
+  // FR98 — keyed { [attr]: string[] }; `{}` means "no errors" (always present).
+  const [errors, setErrors] = useState<Record<string, string[]>>({});
+  const [saving, setSaving] = useState(false);
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    setSaving(true);
+    setErrors({});
+
+    const payload = {
+      title: title,
+      body: body,
+      published: published,
+      views: views,
+      published_on: publishedOn,
+      published_at: publishedAt,
+      author_id: authorId,
+    };
+
+    // On success the server returns a `$redirect` and the runtime navigates
+    // away (the code below does not run); on a validation failure we get the
+    // keyed `errors` map back instead.
+    const result = (initial != null
+      ? await updatePost({ id: initial.id, ...payload })
+      : await createPost(payload)) as { errors?: Record<string, string[]> } | null;
+
+    setSaving(false);
+    if (result && result.errors) {
+      setErrors(result.errors);
+    }
+  }
+
+  const errorsFor = (attr: string) => errors[attr] ?? [];
+
+  return (
+    <form onSubmit={handleSubmit} className="mx-auto max-w-xl space-y-6 px-4 py-8">
+      <h1 className="text-2xl font-semibold tracking-tight">
+        {initial != null ? `Edit Post #${initial.id}` : "New Post"}
+      </h1>
+
+      {errorsFor("base").length > 0 && (
+        <div className="rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+          <ul className="list-disc space-y-1 pl-4">
+            {errorsFor("base").map((message, i) => (
+              <li key={i}>{message}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <div className="space-y-2">
+        <Label htmlFor="title">Title</Label>
+        <Input
+          id="title"
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          disabled={saving}
+        />
+        {errorsFor("title").map((message, i) => (
+          <p key={i} className="text-sm text-destructive">{message}</p>
+        ))}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="body">Body</Label>
+        <Textarea
+          id="body"
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          disabled={saving}
+        />
+        {errorsFor("body").map((message, i) => (
+          <p key={i} className="text-sm text-destructive">{message}</p>
+        ))}
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Switch
+            id="published"
+            checked={published}
+            onCheckedChange={setPublished}
+            disabled={saving}
+          />
+          <Label htmlFor="published">Published</Label>
+        </div>
+        {errorsFor("published").map((message, i) => (
+          <p key={i} className="text-sm text-destructive">{message}</p>
+        ))}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="views">Views</Label>
+        <Input
+          id="views"
+          type="number"
+          value={views}
+          onChange={(e) => setViews(e.target.value)}
+          disabled={saving}
+        />
+        {errorsFor("views").map((message, i) => (
+          <p key={i} className="text-sm text-destructive">{message}</p>
+        ))}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="published_on">Published on</Label>
+        <Input
+          id="published_on"
+          type="date"
+          value={publishedOn}
+          onChange={(e) => setPublishedOn(e.target.value)}
+          disabled={saving}
+        />
+        {errorsFor("published_on").map((message, i) => (
+          <p key={i} className="text-sm text-destructive">{message}</p>
+        ))}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="published_at">Published at</Label>
+        <Input
+          id="published_at"
+          type="datetime-local"
+          value={publishedAt}
+          onChange={(e) => setPublishedAt(e.target.value)}
+          disabled={saving}
+        />
+        {errorsFor("published_at").map((message, i) => (
+          <p key={i} className="text-sm text-destructive">{message}</p>
+        ))}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="author_id">Author</Label>
+        {/* Eager <Select> of controller-provided options (ivar → `authorOptions` prop),
+            capped at the generator's REFERENCE_OPTIONS_LIMIT. For a parent set
+            larger than that, swap this for a server-search combobox backed by a
+            parent-options read query (opt-in follow-up — that query is out of this
+            scaffold's scope since the parent model isn't scaffolded here). */}
+        <Select
+          value={authorId}
+          onValueChange={setAuthorId}
+          disabled={saving}
+        >
+          <SelectTrigger id="author_id">
+            <SelectValue placeholder="Select author" />
+          </SelectTrigger>
+          <SelectContent>
+            {authorOptions.map((option) => (
+              <SelectItem key={option.id} value={String(option.id)}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {errorsFor("author_id").map((message, i) => (
+          <p key={i} className="text-sm text-destructive">{message}</p>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-3 pt-2">
+        <Button type="submit" disabled={saving}>
+          {saving ? "Saving…" : initial != null ? "Update post" : "Create post"}
+        </Button>
+        <Button variant="outline" asChild>
+          <a href={initial != null ? `/posts/${initial.id}` : "/posts"}>Cancel</a>
+        </Button>
+      </div>
+    </form>
+  );
+}

data/vendor/javascript/vite-plugin-ruact/type-tests/scaffold/PostList.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+// Post list — a shadcn `table` primitive (a styled HTML table) plus a
+// small GENERATED client-side sort. There is NO table-engine dependency: the
+// scaffold stays dep-free (no react-table runtime), matching the dep-free
+// Form and the native date inputs. The collection arrives as a SERVER-RENDERED
+// prop (`posts`); there is no client query for the initial render. A query only
+// enters when the *client* drives the read: the search box calls
+// useQuery(searchPosts, { q }) and swaps in filtered rows as you type.
+// Per-row delete drives a controlled PostDeleteDialog (DELETE
+// /posts/:id via the destroyPost action); on `{ ok: true }` the row is
+// removed from the displayed rows IN PLACE (no reload, no URL built). Column
+// sorting is CLIENT-ONLY — the dataset is the index payload; server-side
+// sort/pagination is Phase-3 territory.
+//
+// The `@/components/ui/table` primitive (and the Badge/Button/DropdownMenu
+// primitives below) is installed by Story 10.5 (`npx shadcn add table`). A
+// freshly scaffolded app will not resolve these until 10.5 lands; that is
+// expected (the end-to-end live demo is Story 10.7).
+import { useState } from "react";
+import { search as searchPosts, destroyPost, useQuery } from "@/.ruact/server-functions";
+import { PostDeleteDialog } from "./PostDeleteDialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+type PostRow = { id: number; title: string | null; body: string | null; published: boolean | null; views: number | null; published_at: string | null; author_id: number | null };
+
+// FR100 — opt-in call-site contract: `posts` is required. The index view passes
+// `<PostList posts={rows} />` (satisfied); a call site that omits it
+// fails at preprocess time, not as a silent `undefined` in the browser.
+export const __ruactContract = {
+  props: { posts: "required" },
+};
+
+// Columns whose values are date/datetime strings: the sort compares these by
+// epoch time (`new Date(value).getTime()`) rather than lexically, so they order
+// chronologically. Generated from the model's date/datetime attributes.
+const DATE_KEYS = new Set<string>(["published_at"]);
+
+// Generated client-side comparator (no table engine). Sorts a COPY of the rows
+// by the active key + direction: `null`/`undefined` always sort LAST (so a blank
+// cell never jumps to the top, regardless of direction); date columns compare by
+// time, numbers numerically, booleans false-before-true, everything else via a
+// locale-aware string compare. The direction flip is applied AFTER the null
+// handling, never to it.
+function compareRows(
+  a: PostRow,
+  b: PostRow,
+  sort: { key: string; dir: "asc" | "desc" },
+): number {
+  const av = a[sort.key as keyof PostRow];
+  const bv = b[sort.key as keyof PostRow];
+  if (av == null && bv == null) return 0;
+  if (av == null) return 1;
+  if (bv == null) return -1;
+
+  let result: number;
+  if (DATE_KEYS.has(sort.key)) {
+    result = new Date(String(av)).getTime() - new Date(String(bv)).getTime();
+  } else if (typeof av === "number" && typeof bv === "number") {
+    result = av - bv;
+  } else if (typeof av === "boolean" && typeof bv === "boolean") {
+    result = Number(av) - Number(bv);
+  } else {
+    result = String(av).localeCompare(String(bv));
+  }
+  return sort.dir === "desc" ? -result : result;
+}
+
+// Pull a human-readable message out of the failed-delete result. A thrown
+// RuactActionError (non-2xx) carries the parsed structured-error body, whose
+// `message` the gem shapes per env (the exception message in development, the
+// generic server message in production); a resolved soft-failure may carry a
+// top-level `error`/`message`. Returns undefined when none is present, so the
+// dialog can fall back to its own generic copy.
+function deleteErrorMessage(error: unknown): string | undefined {
+  if (error != null && typeof error === "object") {
+    const carrier = error as { body?: unknown; error?: unknown; message?: unknown };
+    if (carrier.body != null && typeof carrier.body === "object") {
+      const message = (carrier.body as { message?: unknown }).message;
+      if (typeof message === "string" && message.length > 0) return message;
+    }
+    if (typeof carrier.error === "string" && carrier.error.length > 0) return carrier.error;
+    if (typeof carrier.message === "string" && carrier.message.length > 0) return carrier.message;
+  }
+  return undefined;
+}
+
+// A resolved delete is a SUCCESS only on the server-owned success shapes: the
+// in-list default `{ ok: true }`, or the delete-from-show `$redirect` the
+// accessor already followed (which resolves to `null`). Any other resolved shape
+// (e.g. an explicit `{ ok: false }`) is a non-success the dialog surfaces.
+function deleteSucceeded(result: unknown): boolean {
+  if (result === null) return true;
+  return (
+    typeof result === "object" &&
+    (result as { ok?: unknown }).ok === true
+  );
+}
+
+// Per-row actions (AC5) — Edit + a Delete TRIGGER that opens the controlled
+// AlertDialog. Each row owns its OWN dialog `open` state (one independent
+// useState), so the dialog opens for exactly one row. `onConfirm` calls
+// destroyPost and, on a server-owned success, asks the List to drop the row
+// in place via `onDeleted`. The same component renders BOTH the inline (≥ md) and
+// the overflow-menu (< md) layouts. The trigger is never unmounted, so Radix
+// returns focus to it on close.
+function RowActions({ record, onDeleted }: {
+  record: PostRow;
+  onDeleted: (id: number) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  // The overflow menu is CONTROLLED so the Delete item can close it explicitly
+  // and open the dialog in the same batch — preventing Radix's default
+  // close-autofocus from pulling focus back to the trigger as the dialog mounts.
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  async function onConfirm(): Promise<{ ok: boolean; error?: string }> {
+    try {
+      const result = await destroyPost({ id: record.id });
+      if (deleteSucceeded(result)) {
+        onDeleted(record.id);
+        setOpen(false);
+        return { ok: true };
+      }
+      // Resolved but not a success shape → keep the dialog open with the message.
+      return { ok: false, error: deleteErrorMessage(result) };
+    } catch (error) {
+      // Failure (non-2xx structured error) → keep the dialog open, message inline.
+      return { ok: false, error: deleteErrorMessage(error) };
+    }
+  }
+
+  return (
+    <div className="flex justify-end">
+      {/* ≥ md (768px): inline actions */}
+      <div className="hidden items-center gap-2 md:flex">
+        <Button variant="ghost" asChild>
+          <a href={`/posts/${record.id}/edit`}>Edit</a>
+        </Button>
+        <Button variant="ghost" className="text-destructive" onClick={() => setOpen(true)}>
+          Delete
+        </Button>
+      </div>
+      {/* < md: collapse into a … overflow menu so actions never break layout */}
+      <div className="md:hidden">
+        <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" aria-label="Open actions menu">…</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem asChild>
+              <a href={`/posts/${record.id}/edit`}>Edit</a>
+            </DropdownMenuItem>
+            {/* Close the menu and open the AlertDialog together: preventDefault
+                stops the default close (whose autofocus would fight the dialog),
+                then we close the menu and open the dialog deterministically. */}
+            <DropdownMenuItem
+              className="text-destructive"
+              onSelect={(event) => {
+                event.preventDefault();
+                setMenuOpen(false);
+                setOpen(true);
+              }}
+            >
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <PostDeleteDialog
+        open={open}
+        onOpenChange={setOpen}
+        post={record}
+        onConfirm={onConfirm}
+      />
+    </div>
+  );
+}
+
+export function PostList({
+  posts = [],
+  emptyLabel = "No posts yet — create one.",
+}: { posts?: PostRow[]; emptyLabel?: string }) {
+  const [q, setQ] = useState("");
+  const searching = q.trim().length > 0;
+
+  // Ids deleted IN PLACE — a single tombstone list (not a second row cache)
+  // applied to whichever source is displayed, so a delete removes the row
+  // immediately whether it happened on the server-rendered list OR on the live
+  // search results.
+  const [removedIds, setRemovedIds] = useState<number[]>([]);
+
+  // Sort state (AC2) — the active column key + direction, or null when unsorted
+  // (server/insertion order). A new key sorts ascending; clicking the same key
+  // again flips asc↔desc.
+  const [sort, setSort] = useState<{ key: string; dir: "asc" | "desc" } | null>(null);
+
+  // Client-driven read (AC5) — only meaningful while searching. When q is blank
+  // the box is idle and we fall back to the server-rendered rows.
+  const { data: searchData, loading: searchLoading } = useQuery<PostRow[]>(searchPosts, { q: q.trim() });
+
+  const source = searching ? searchData ?? [] : posts;
+  const rows = removedIds.length === 0 ? source : source.filter((row) => !removedIds.includes(row.id));
+  // Always sort a COPY — never mutate the prop/source array.
+  const sortedRows = sort ? [...rows].sort((a, b) => compareRows(a, b, sort)) : rows;
+
+  const onDeleted = (id: number) =>
+    setRemovedIds((current) => (current.includes(id) ? current : [...current, id]));
+
+  // Set the sort to a new key (ascending), or flip the direction when the active
+  // key is clicked again.
+  function toggleSort(key: string) {
+    setSort((current) =>
+      current && current.key === key
+        ? { key, dir: current.dir === "asc" ? "desc" : "asc" }
+        : { key, dir: "asc" },
+    );
+  }
+
+  return (
+    <section className="mx-auto max-w-4xl px-4 py-8">
+      <div className="mb-4 flex items-center justify-between gap-4">
+        <h1 className="text-2xl font-semibold tracking-tight">Posts</h1>
+        <Button asChild>
+          <a href="/posts/new">+ New post</a>
+        </Button>
+      </div>
+
+      <input
+        type="search"
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        placeholder="Search posts…"
+        className="mb-4 w-full rounded-md border px-3 py-2 text-sm"
+      />
+
+      {searching && searchLoading && <p className="text-sm text-muted-foreground">Searching…</p>}
+      {!searching && rows.length === 0 && <p className="text-sm text-muted-foreground">{emptyLabel}</p>}
+      {searching && !searchLoading && rows.length === 0 && (
+        <p className="text-sm text-muted-foreground">No posts match “{q.trim()}”.</p>
+      )}
+
+      {sortedRows.length > 0 && (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>
+                <Button variant="ghost" onClick={() => toggleSort("id")}>ID</Button>
+              </TableHead>
+              <TableHead>
+                <Button variant="ghost" onClick={() => toggleSort("title")}>
+                  Title
+                </Button>
+              </TableHead>
+              <TableHead>
+                <Button variant="ghost" onClick={() => toggleSort("body")}>
+                  Body
+                </Button>
+              </TableHead>
+              <TableHead>
+                <Button variant="ghost" onClick={() => toggleSort("published")}>
+                  Published
+                </Button>
+              </TableHead>
+              <TableHead>
+                <div className="text-right">
+                  <Button variant="ghost" onClick={() => toggleSort("views")}>
+                    Views
+                  </Button>
+                </div>
+              </TableHead>
+              <TableHead>
+                <Button variant="ghost" onClick={() => toggleSort("published_at")}>
+                  Published at
+                </Button>
+              </TableHead>
+              <TableHead>
+                <div className="text-right">
+                  <Button variant="ghost" onClick={() => toggleSort("author_id")}>
+                    Author
+                  </Button>
+                </div>
+              </TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedRows.map((row) => (
+              <TableRow key={row.id}>
+                <TableCell>
+                  <a href={`/posts/${row.id}`} className="font-medium underline-offset-4 hover:underline">
+                    {row.id}
+                  </a>
+                </TableCell>
+                <TableCell>
+                  <span>{String(row.title ?? "")}</span>
+                </TableCell>
+                <TableCell>
+                  <span>{String(row.body ?? "")}</span>
+                </TableCell>
+                <TableCell>
+                  <Badge variant={row.published ? "default" : "secondary"}>{row.published ? "Yes" : "No"}</Badge>
+                </TableCell>
+                <TableCell>
+                  <div className="text-right tabular-nums">{String(row.views ?? "")}</div>
+                </TableCell>
+                <TableCell>
+                  <span>{row.published_at ? new Date(String(row.published_at)).toLocaleString() : ""}</span>
+                </TableCell>
+                <TableCell>
+                  <div className="text-right tabular-nums">{String(row.author_id ?? "")}</div>
+                </TableCell>
+                <TableCell>
+                  <RowActions record={row} onDeleted={onDeleted} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </section>
+  );
+}