feat(i18n): wire page translation editor and locale rendering

TODO.md

@@ -171,7 +171,7 @@ This file is the single source of truth for roadmap and delivery progress.
 - [ ] [P1] Media entity rendering with enrichment data
 - [ ] [P1] Portfolio views (gallery/album/category/tag) for artworks with filter and sort controls
 - [ ] [P1] Rendition-aware media delivery (thumbnail/card/full) per template slot
-- [ ] [P1] Translation-ready content model for public entities (pages/news/navigation labels)
+- [~] [P1] Translation-ready content model for public entities (pages/news/navigation labels)
 - [ ] [P2] Artwork views and listing filters
 - [ ] [P1] Commission request submission flow
 - [x] [P1] Header banner render logic and fallbacks
@@ -190,7 +190,7 @@ This file is the single source of truth for roadmap and delivery progress.
 - [x] [P1] Component tests for admin forms (pages/media/navigation)
 - [x] [P1] Integration tests for owner invariant and hidden support-user protection
 - [x] [P1] Integration tests for registration allow/deny behavior
-- [ ] [P1] Integration tests for translated content CRUD and locale-specific validation
+- [x] [P1] Integration tests for translated content CRUD and locale-specific validation
 - [~] [P1] E2E happy paths: create page, publish, see on public app
 - [~] [P1] E2E happy paths: media upload + artwork refinement display
 - [~] [P1] E2E happy paths: commissions kanban transitions
@@ -321,6 +321,8 @@ This file is the single source of truth for roadmap and delivery progress.
 - [2026-02-12] Started admin form component tests with media upload behavior coverage (`apps/admin/src/components/media/media-upload-form.test.tsx`).
 - [2026-02-12] Added code handover documentation baseline: architecture map, critical invariants, request lifecycles, and onboarding playbook under `docs/product-engineering/`.
 - [2026-02-12] Completed admin form component coverage for pages/navigation/media using isolated form components and tests.
+- [2026-02-12] Added page translation CRUD baseline (`PageTranslation`) with locale validation (`de/en/es/fr`) and integration coverage for localized read + fallback behavior.
+- [2026-02-12] Page editor now supports locale translations in `/pages/:id`; public page rendering uses locale-aware page lookup with base-content fallback.
 
 ## How We Use This File
 

apps/admin/src/app/pages/[id]/page.tsx

@@ -1,4 +1,10 @@
-import { deletePage, getPageById, updatePage } from "@cms/db"
+import {
+  deletePage,
+  getPageById,
+  listPageTranslations,
+  updatePage,
+  upsertPageTranslation,
+} from "@cms/db"
 import { Button } from "@cms/ui/button"
 import Link from "next/link"
 import { redirect } from "next/navigation"
@@ -9,6 +15,8 @@ import { requirePermissionForRoute } from "@/lib/route-guards"
 export const dynamic = "force-dynamic"
 
 type SearchParamsInput = Record<string, string | string[] | undefined>
+const SUPPORTED_LOCALES = ["de", "en", "es", "fr"] as const
+type SupportedLocale = (typeof SUPPORTED_LOCALES)[number]
 
 type PageProps = {
   params: Promise<{ id: string }>
@@ -48,6 +56,14 @@ function redirectWithState(pageId: string, params: { notice?: string; error?: st
   redirect(value ? `/pages/${pageId}?${value}` : `/pages/${pageId}`)
 }
 
+function normalizeLocale(input: string | null): SupportedLocale {
+  if (input && SUPPORTED_LOCALES.includes(input as SupportedLocale)) {
+    return input as SupportedLocale
+  }
+
+  return "en"
+}
+
 export default async function PageEditorPage({ params, searchParams }: PageProps) {
   const role = await requirePermissionForRoute({
     nextPath: "/pages",
@@ -57,7 +73,11 @@ export default async function PageEditorPage({ params, searchParams }: PageProps
   const resolvedParams = await params
   const pageId = resolvedParams.id
 
-  const [resolvedSearchParams, pageRecord] = await Promise.all([searchParams, getPageById(pageId)])
+  const [resolvedSearchParams, pageRecord, translations] = await Promise.all([
+    searchParams,
+    getPageById(pageId),
+    listPageTranslations(pageId),
+  ])
 
   if (!pageRecord) {
     redirect("/pages?error=Page+not+found")
@@ -66,6 +86,8 @@ export default async function PageEditorPage({ params, searchParams }: PageProps
   const page = pageRecord
   const notice = readFirstValue(resolvedSearchParams.notice)
   const error = readFirstValue(resolvedSearchParams.error)
+  const selectedLocale = normalizeLocale(readFirstValue(resolvedSearchParams.locale))
+  const selectedTranslation = translations.find((entry) => entry.locale === selectedLocale)
 
   async function updatePageAction(formData: FormData) {
     "use server"
@@ -118,6 +140,34 @@ export default async function PageEditorPage({ params, searchParams }: PageProps
     redirect("/pages?notice=Page+deleted")
   }
 
+  async function upsertPageTranslationAction(formData: FormData) {
+    "use server"
+
+    await requirePermissionForRoute({
+      nextPath: "/pages",
+      permission: "pages:write",
+      scope: "team",
+    })
+
+    const locale = normalizeLocale(readInputString(formData, "locale"))
+
+    try {
+      await upsertPageTranslation({
+        pageId,
+        locale,
+        title: readInputString(formData, "title"),
+        summary: readNullableString(formData, "summary"),
+        content: readInputString(formData, "content"),
+        seoTitle: readNullableString(formData, "seoTitle"),
+        seoDescription: readNullableString(formData, "seoDescription"),
+      })
+    } catch {
+      redirect(`/pages/${pageId}?error=Failed+to+save+translation.&locale=${locale}`)
+    }
+
+    redirect(`/pages/${pageId}?notice=Translation+saved.&locale=${locale}`)
+  }
+
   return (
     <AdminShell
       role={role}
@@ -226,6 +276,132 @@ export default async function PageEditorPage({ params, searchParams }: PageProps
         </form>
       </section>
 
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <div className="space-y-1">
+          <h3 className="text-xl font-medium">Translations</h3>
+          <p className="text-sm text-neutral-600">
+            Add locale-specific page content. Missing locales fall back to base page fields.
+          </p>
+        </div>
+
+        <div className="mt-4 flex flex-wrap gap-2">
+          {SUPPORTED_LOCALES.map((locale) => {
+            const isActive = locale === selectedLocale
+            const hasTranslation = translations.some((entry) => entry.locale === locale)
+
+            return (
+              <Link
+                key={locale}
+                href={`/pages/${pageId}?locale=${locale}`}
+                className={`inline-flex items-center gap-2 rounded border px-3 py-1.5 text-xs ${
+                  isActive
+                    ? "border-neutral-800 bg-neutral-900 text-white"
+                    : "border-neutral-300 text-neutral-700"
+                }`}
+              >
+                <span>{locale.toUpperCase()}</span>
+                <span className={isActive ? "text-neutral-200" : "text-neutral-500"}>
+                  {hasTranslation ? "saved" : "missing"}
+                </span>
+              </Link>
+            )
+          })}
+        </div>
+
+        {translations.length > 0 ? (
+          <div className="mt-4 rounded border border-neutral-200">
+            <table className="min-w-full text-left text-sm">
+              <thead className="text-xs uppercase tracking-wide text-neutral-500">
+                <tr>
+                  <th className="px-3 py-2">Locale</th>
+                  <th className="px-3 py-2">Title</th>
+                  <th className="px-3 py-2">Updated</th>
+                </tr>
+              </thead>
+              <tbody>
+                {translations.map((translation) => (
+                  <tr key={translation.id} className="border-t border-neutral-200">
+                    <td className="px-3 py-2">{translation.locale.toUpperCase()}</td>
+                    <td className="px-3 py-2">{translation.title}</td>
+                    <td className="px-3 py-2 text-neutral-600">
+                      {translation.updatedAt.toLocaleDateString("en-US")}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : null}
+
+        <form action={upsertPageTranslationAction} className="mt-6 space-y-3">
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Locale</span>
+            <select
+              name="locale"
+              defaultValue={selectedLocale}
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            >
+              {SUPPORTED_LOCALES.map((locale) => (
+                <option key={locale} value={locale}>
+                  {locale.toUpperCase()}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Title</span>
+            <input
+              name="title"
+              defaultValue={selectedTranslation?.title ?? page.title}
+              required
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Summary</span>
+            <input
+              name="summary"
+              defaultValue={selectedTranslation?.summary ?? page.summary ?? ""}
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Content</span>
+            <textarea
+              name="content"
+              rows={8}
+              defaultValue={selectedTranslation?.content ?? page.content}
+              required
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">SEO title</span>
+              <input
+                name="seoTitle"
+                defaultValue={selectedTranslation?.seoTitle ?? page.seoTitle ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">SEO description</span>
+              <input
+                name="seoDescription"
+                defaultValue={selectedTranslation?.seoDescription ?? page.seoDescription ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+
+          <Button type="submit">Save translation</Button>
+        </form>
+      </section>
+
       <section className="rounded-xl border border-red-300 bg-red-50 p-6">
         <h3 className="text-lg font-medium text-red-800">Danger Zone</h3>
         <p className="mt-1 text-sm text-red-700">

apps/web/src/app/[locale]/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { getPublishedPageBySlug } from "@cms/db"
+import { getPublishedPageBySlugForLocale } from "@cms/db"
 import { notFound } from "next/navigation"
 
 import { PublicPageView } from "@/components/public-page-view"
@@ -6,12 +6,12 @@ import { PublicPageView } from "@/components/public-page-view"
 export const dynamic = "force-dynamic"
 
 type PageProps = {
-  params: Promise<{ slug: string }>
+  params: Promise<{ locale: string; slug: string }>
 }
 
 export default async function CmsPageRoute({ params }: PageProps) {
-  const { slug } = await params
-  const page = await getPublishedPageBySlug(slug)
+  const { locale, slug } = await params
+  const page = await getPublishedPageBySlugForLocale(slug, locale)
 
   if (!page) {
     notFound()

apps/web/src/app/[locale]/page.tsx

@@ -1,4 +1,4 @@
-import { getPublishedPageBySlug, listPosts } from "@cms/db"
+import { getPublishedPageBySlugForLocale, listPosts } from "@cms/db"
 import { Button } from "@cms/ui/button"
 import { getTranslations } from "next-intl/server"
 import { PublicAnnouncements } from "@/components/public-announcements"
@@ -6,9 +6,15 @@ import { PublicPageView } from "@/components/public-page-view"
 
 export const dynamic = "force-dynamic"
 
-export default async function HomePage() {
+type HomePageProps = {
+  params: Promise<{ locale: string }>
+}
+
+export default async function HomePage({ params }: HomePageProps) {
+  const { locale } = await params
+
   const [homePage, posts, t] = await Promise.all([
-    getPublishedPageBySlug("home"),
+    getPublishedPageBySlugForLocale("home", locale),
     listPosts(),
     getTranslations("Home"),
   ])

packages/content/src/pages-navigation.ts

@@ -1,6 +1,7 @@
 import { z } from "zod"
 
 export const pageStatusSchema = z.enum(["draft", "published"])
+export const pageLocaleSchema = z.enum(["de", "en", "es", "fr"])
 
 export const createPageInputSchema = z.object({
   title: z.string().min(1).max(180),
@@ -23,6 +24,16 @@ export const updatePageInputSchema = z.object({
   seoDescription: z.string().max(320).nullable().optional(),
 })
 
+export const upsertPageTranslationInputSchema = z.object({
+  pageId: z.string().uuid(),
+  locale: pageLocaleSchema,
+  title: z.string().min(1).max(180),
+  summary: z.string().max(500).nullable().optional(),
+  content: z.string().min(1),
+  seoTitle: z.string().max(180).nullable().optional(),
+  seoDescription: z.string().max(320).nullable().optional(),
+})
+
 export const createNavigationMenuInputSchema = z.object({
   name: z.string().min(1).max(180),
   slug: z.string().min(1).max(180),
@@ -52,6 +63,7 @@ export const updateNavigationItemInputSchema = z.object({
 
 export type CreatePageInput = z.infer<typeof createPageInputSchema>
 export type UpdatePageInput = z.infer<typeof updatePageInputSchema>
+export type UpsertPageTranslationInput = z.infer<typeof upsertPageTranslationInputSchema>
 export type CreateNavigationMenuInput = z.infer<typeof createNavigationMenuInputSchema>
 export type CreateNavigationItemInput = z.infer<typeof createNavigationItemInputSchema>
 export type UpdateNavigationItemInput = z.infer<typeof updateNavigationItemInputSchema>

packages/db/prisma/migrations/20260212220000_page_translations/migration.sql

@@ -0,0 +1,24 @@
+-- CreateTable
+CREATE TABLE "PageTranslation" (
+    "id" TEXT NOT NULL,
+    "pageId" TEXT NOT NULL,
+    "locale" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "summary" TEXT,
+    "content" TEXT NOT NULL,
+    "seoTitle" TEXT,
+    "seoDescription" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "PageTranslation_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "PageTranslation_locale_idx" ON "PageTranslation"("locale");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PageTranslation_pageId_locale_key" ON "PageTranslation"("pageId", "locale");
+
+-- AddForeignKey
+ALTER TABLE "PageTranslation" ADD CONSTRAINT "PageTranslation_pageId_fkey" FOREIGN KEY ("pageId") REFERENCES "Page"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/db/prisma/schema.prisma

@@ -267,10 +267,28 @@ model Page {
   createdAt      DateTime @default(now())
   updatedAt      DateTime @updatedAt
   navItems       NavigationItem[]
+  translations   PageTranslation[]
 
   @@index([status])
 }
 
+model PageTranslation {
+  id             String   @id @default(uuid())
+  pageId         String
+  locale         String
+  title          String
+  summary        String?
+  content        String
+  seoTitle       String?
+  seoDescription String?
+  createdAt      DateTime @default(now())
+  updatedAt      DateTime @updatedAt
+  page           Page     @relation(fields: [pageId], references: [id], onDelete: Cascade)
+
+  @@unique([pageId, locale])
+  @@index([locale])
+}
+
 model NavigationMenu {
   id        String           @id @default(uuid())
   name      String

packages/db/src/index.ts

@@ -41,12 +41,15 @@ export {
   deletePage,
   getPageById,
   getPublishedPageBySlug,
+  getPublishedPageBySlugForLocale,
   listNavigationMenus,
   listPages,
+  listPageTranslations,
   listPublicNavigation,
   listPublishedPageSlugs,
   updateNavigationItem,
   updatePage,
+  upsertPageTranslation,
 } from "./pages-navigation"
 export {
   createPost,

packages/db/src/pages-navigation.test.ts

@@ -7,6 +7,11 @@ const { mockDb } = vi.hoisted(() => ({
       update: vi.fn(),
       delete: vi.fn(),
       findUnique: vi.fn(),
+      findFirst: vi.fn(),
+      findMany: vi.fn(),
+    },
+    pageTranslation: {
+      upsert: vi.fn(),
       findMany: vi.fn(),
     },
     navigationMenu: {
@@ -30,8 +35,10 @@ import {
   createNavigationItem,
   createNavigationMenu,
   createPage,
+  getPublishedPageBySlugForLocale,
   listPublicNavigation,
   updatePage,
+  upsertPageTranslation,
 } from "./pages-navigation"
 
 describe("pages-navigation service", () => {
@@ -120,4 +127,63 @@ describe("pages-navigation service", () => {
       },
     ])
   })
+
+  it("validates locale when upserting page translation", async () => {
+    await expect(() =>
+      upsertPageTranslation({
+        pageId: "550e8400-e29b-41d4-a716-446655440000",
+        locale: "it",
+        title: "Titolo",
+        content: "Contenuto",
+      }),
+    ).rejects.toThrow()
+  })
+
+  it("upserts page translation and reads localized page with fallback", async () => {
+    mockDb.pageTranslation.upsert.mockResolvedValue({ id: "pt-1" })
+    mockDb.page.findFirst
+      .mockResolvedValueOnce({
+        id: "page-1",
+        title: "About",
+        summary: "Base summary",
+        content: "Base content",
+        seoTitle: "Base SEO",
+        seoDescription: "Base description",
+        translations: [
+          {
+            locale: "de",
+            title: "Uber Uns",
+            summary: "Zusammenfassung",
+            content: "Inhalt",
+            seoTitle: "SEO DE",
+            seoDescription: "Beschreibung",
+          },
+        ],
+      })
+      .mockResolvedValueOnce({
+        id: "page-1",
+        title: "About",
+        summary: "Base summary",
+        content: "Base content",
+        seoTitle: "Base SEO",
+        seoDescription: "Base description",
+        translations: [],
+      })
+
+    await upsertPageTranslation({
+      pageId: "550e8400-e29b-41d4-a716-446655440000",
+      locale: "de",
+      title: "Uber Uns",
+      content: "Inhalt",
+    })
+
+    const translated = await getPublishedPageBySlugForLocale("about", "de")
+    const fallback = await getPublishedPageBySlugForLocale("about", "fr")
+
+    expect(mockDb.pageTranslation.upsert).toHaveBeenCalledTimes(1)
+    expect(translated?.title).toBe("Uber Uns")
+    expect(translated?.content).toBe("Inhalt")
+    expect(fallback?.title).toBe("About")
+    expect(fallback?.content).toBe("Base content")
+  })
 })

packages/db/src/pages-navigation.ts

@@ -4,6 +4,7 @@ import {
   createPageInputSchema,
   updateNavigationItemInputSchema,
   updatePageInputSchema,
+  upsertPageTranslationInputSchema,
 } from "@cms/content"
 
 import { db } from "./client"
@@ -54,6 +55,38 @@ export async function getPublishedPageBySlug(slug: string) {
   })
 }
 
+export async function getPublishedPageBySlugForLocale(slug: string, locale: string) {
+  const page = await db.page.findFirst({
+    where: {
+      slug,
+      status: "published",
+    },
+    include: {
+      translations: {
+        where: {
+          locale,
+        },
+        take: 1,
+      },
+    },
+  })
+
+  if (!page) {
+    return null
+  }
+
+  const translation = page.translations[0]
+
+  return {
+    ...page,
+    title: translation?.title ?? page.title,
+    summary: translation?.summary ?? page.summary,
+    content: translation?.content ?? page.content,
+    seoTitle: translation?.seoTitle ?? page.seoTitle,
+    seoDescription: translation?.seoDescription ?? page.seoDescription,
+  }
+}
+
 export async function createPage(input: unknown) {
   const payload = createPageInputSchema.parse(input)
 
@@ -85,6 +118,33 @@ export async function deletePage(id: string) {
   })
 }
 
+export async function upsertPageTranslation(input: unknown) {
+  const payload = upsertPageTranslationInputSchema.parse(input)
+  const { pageId, locale, ...data } = payload
+
+  return db.pageTranslation.upsert({
+    where: {
+      pageId_locale: {
+        pageId,
+        locale,
+      },
+    },
+    create: {
+      pageId,
+      locale,
+      ...data,
+    },
+    update: data,
+  })
+}
+
+export async function listPageTranslations(pageId: string) {
+  return db.pageTranslation.findMany({
+    where: { pageId },
+    orderBy: [{ locale: "asc" }],
+  })
+}
+
 export async function listNavigationMenus() {
   return db.navigationMenu.findMany({
     orderBy: [{ location: "asc" }, { name: "asc" }],