feat(web): complete portfolio public filter and sort integration

TODO.md

@@ -118,9 +118,9 @@ This file is the single source of truth for roadmap and delivery progress.
   page CRUD, navigation tree, reusable page blocks (forms/price cards/gallery embeds)
 - [~] [P1] `todo/mvp1-commissions-customers`:
   commission request intake + admin CRUD + kanban + customer entity/linking
-- [~] [P1] `todo/mvp1-announcements-news`:
+- [x] [P1] `todo/mvp1-announcements-news`:
   announcement management/rendering + news/blog CRUD and public rendering
-- [~] [P1] `todo/mvp1-public-rendering-integration`:
+- [x] [P1] `todo/mvp1-public-rendering-integration`:
   public rendering for pages/navigation/media/portfolio/announcements and commissioning entrypoints
 - [~] [P1] `todo/mvp1-e2e-happy-paths`:
   end-to-end scenarios for page publish, media flow, announcement display, commission flow
@@ -153,27 +153,27 @@ This file is the single source of truth for roadmap and delivery progress.
 - [x] [P1] Customer-to-commission linkage and reuse workflow (no re-entry for recurring customers)
 - [x] [P1] Kanban workflow for commissions (new, scoped, in-progress, review, done)
 - [x] [P1] Header banner management (message, CTA, active window)
-- [~] [P1] Announcements management (prominent site notices with schedule, priority, and audience targeting)
+- [x] [P1] Announcements management (prominent site notices with schedule, priority, and audience targeting)
 - [~] [P2] News/blog editorial workflow (draft/review/publish, authoring metadata)
 
 ### Public App
 
-- [~] [P1] Dynamic page rendering from CMS page entities
+- [x] [P1] Dynamic page rendering from CMS page entities
-- [~] [P1] Navigation rendering from managed menu structure
+- [x] [P1] Navigation rendering from managed menu structure
-- [~] [P1] Media entity rendering with enrichment data
+- [x] [P1] Media entity rendering with enrichment data
-- [~] [P1] Portfolio views (gallery/album/category/tag) for artworks with filter and sort controls
+- [x] [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
+- [x] [P1] Rendition-aware media delivery (thumbnail/card/full) per template slot
-- [~] [P1] Translation-ready content model for public entities (pages/news/navigation labels)
+- [x] [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] Commission request submission flow
 - [x] [P1] Header banner render logic and fallbacks
 - [x] [P1] Announcement render slots (homepage + optional global/top banner position)
 
 ### News / Blog (Secondary Track)
 
-- [~] [P1] News/blog content type (editorial content for artist updates and process posts)
+- [x] [P1] News/blog content type (editorial content for artist updates and process posts)
-- [~] [P1] Admin list/editor for news posts
+- [x] [P1] Admin list/editor for news posts
-- [~] [P1] Public news index + detail pages
+- [x] [P1] Public news index + detail pages
 - [ ] [P2] Tag/category and basic archive support
 
 ### Testing
@@ -369,6 +369,8 @@ This file is the single source of truth for roadmap and delivery progress.
 - [2026-02-12] Navigation management completed: admin `/navigation` now supports menu update/delete controls, nested item parent selection via menu-local dropdown, and full order/visibility updates across menus and items.
 - [2026-02-12] Users management baseline completed: admin `/users` now supports managed user creation, role changes (`admin/editor/manager`), status changes (ban/unban), and protected/system guardrails for role-change/delete/ban actions.
 - [2026-02-12] Commissions management completed: admin kanban cards now include inline detail editing (assignee/customer/budget/due date/notes), linked-artwork references via `linkedArtworkIds`, and creation/edit flows use assignable users instead of raw ID entry.
+- [2026-02-12] Announcements/news completed: announcements now support locale audience targeting (`targetLocales`) with public locale-aware rendering, and homepage news list now uses locale-aware published posts only.
+- [2026-02-12] Public rendering integration completed: portfolio now supports locale-aware tag filters and explicit sort controls, while db/service sorting and rendition selection align public listing/detail media delivery.
 - [2026-02-12] Public UX pass: commission request flow now reports explicit invalid budget range errors, and header navigation now falls back to localized defaults (`home`, `portfolio`, `news`, `commissions`) when no CMS menu exists; seed data now creates those default menu entries.
 - [2026-02-12] Added `e2e/public-rendering.pw.ts` web coverage for fallback navigation visibility, portfolio routes, and commission submission validation (invalid budget range + successful submission path).
 - [2026-02-12] Testing execution is temporarily paused for delivery velocity: root test scripts are stubbed and CI test steps are disabled; all testing backlog is consolidated under `MVP 3: Testing and Quality`.

apps/admin/src/app/announcements/page.tsx

@@ -14,6 +14,7 @@ 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
 
 function readFirstValue(value: string | string[] | undefined): string | null {
   if (Array.isArray(value)) {
@@ -49,6 +50,22 @@ function readNullableDate(formData: FormData, field: string): Date | null {
   return parsed
 }
 
+function readLocaleSelections(formData: FormData, field: string): string[] {
+  const values = formData.getAll(field)
+  const locales = new Set<string>()
+
+  for (const value of values) {
+    if (
+      typeof value === "string" &&
+      SUPPORTED_LOCALES.includes(value as (typeof SUPPORTED_LOCALES)[number])
+    ) {
+      locales.add(value)
+    }
+  }
+
+  return Array.from(locales)
+}
+
 function readInt(formData: FormData, field: string, fallback = 100): number {
   const value = readInputString(formData, field)
 
@@ -94,6 +111,7 @@ async function createAnnouncementAction(formData: FormData) {
       title: readInputString(formData, "title"),
       message: readInputString(formData, "message"),
       placement: readInputString(formData, "placement"),
+      targetLocales: readLocaleSelections(formData, "targetLocales"),
       priority: readInt(formData, "priority", 100),
       ctaLabel: readNullableString(formData, "ctaLabel"),
       ctaHref: readNullableString(formData, "ctaHref"),
@@ -125,6 +143,7 @@ async function updateAnnouncementAction(formData: FormData) {
       title: readInputString(formData, "title"),
       message: readInputString(formData, "message"),
       placement: readInputString(formData, "placement"),
+      targetLocales: readLocaleSelections(formData, "targetLocales"),
       priority: readInt(formData, "priority", 100),
       ctaLabel: readNullableString(formData, "ctaLabel"),
       ctaHref: readNullableString(formData, "ctaHref"),
@@ -277,6 +296,20 @@ export default async function AnnouncementsPage({
               />
             </label>
           </div>
+          <div className="space-y-1">
+            <p className="text-xs text-neutral-600">Target locales (empty = all locales)</p>
+            <div className="flex flex-wrap gap-3">
+              {SUPPORTED_LOCALES.map((locale) => (
+                <label
+                  key={`create-locale-${locale}`}
+                  className="inline-flex items-center gap-2 text-sm"
+                >
+                  <input name="targetLocales" type="checkbox" value={locale} className="size-4" />
+                  {locale.toUpperCase()}
+                </label>
+              ))}
+            </div>
+          </div>
           <div className="grid gap-3 md:grid-cols-2">
             <label className="space-y-1">
               <span className="text-xs text-neutral-600">Starts at</span>
@@ -390,6 +423,26 @@ export default async function AnnouncementsPage({
                   />
                 </label>
               </div>
+              <div className="mt-3 space-y-1">
+                <p className="text-xs text-neutral-600">Target locales (empty = all locales)</p>
+                <div className="flex flex-wrap gap-3">
+                  {SUPPORTED_LOCALES.map((locale) => (
+                    <label
+                      key={`${announcement.id}-locale-${locale}`}
+                      className="inline-flex items-center gap-2 text-sm"
+                    >
+                      <input
+                        name="targetLocales"
+                        type="checkbox"
+                        value={locale}
+                        defaultChecked={announcement.targetLocales.includes(locale)}
+                        className="size-4"
+                      />
+                      {locale.toUpperCase()}
+                    </label>
+                  ))}
+                </div>
+              </div>
               <div className="mt-3 flex flex-wrap items-center justify-between gap-3">
                 <label className="inline-flex items-center gap-2 text-sm text-neutral-700">
                   <input

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

@@ -52,7 +52,7 @@ export default async function LocaleLayout({ children, params }: LocaleLayoutPro
     <NextIntlClientProvider locale={locale}>
       <Providers>
         <PublicHeaderBanner banner={banner} />
-        <PublicAnnouncements placement="global_top" />
+        <PublicAnnouncements placement="global_top" locale={locale} />
         <PublicSiteHeader />
         <main>{children}</main>
         <PublicSiteFooter />

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

@@ -1,4 +1,4 @@
-import { getPublishedPageBySlugForLocale, listPosts } from "@cms/db"
+import { getPublishedPageBySlugForLocale, listPostsForLocale } from "@cms/db"
 import { getTranslations } from "next-intl/server"
 import { PublicAnnouncements } from "@/components/public-announcements"
 import { PublicPageView } from "@/components/public-page-view"
@@ -15,14 +15,14 @@ export default async function HomePage({ params }: HomePageProps) {
 
   const [homePage, posts, t] = await Promise.all([
     getPublishedPageBySlugForLocale("home", locale),
-    listPosts(),
+    listPostsForLocale(locale),
     getTranslations("Home"),
   ])
 
   return (
     <section>
       {homePage ? <PublicPageView page={homePage} /> : null}
-      <PublicAnnouncements placement="homepage" />
+      <PublicAnnouncements placement="homepage" locale={locale} />
 
       <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-6 pb-16">
         <header className="space-y-3">

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

@@ -44,6 +44,33 @@ function resolveGroupFilter(searchParams: SearchParamsInput) {
   return null
 }
 
+function resolveSort(searchParams: SearchParamsInput): "latest" | "title_asc" | "title_desc" {
+  const sort = readFirstValue(searchParams.sort)
+
+  if (sort === "title_asc" || sort === "title_desc") {
+    return sort
+  }
+
+  return "latest"
+}
+
+function buildPortfolioQuery(
+  filter: ReturnType<typeof resolveGroupFilter>,
+  sort: ReturnType<typeof resolveSort>,
+) {
+  const query: Record<string, string> = {}
+
+  if (filter) {
+    query[filter.groupType] = filter.groupSlug
+  }
+
+  if (sort !== "latest") {
+    query.sort = sort
+  }
+
+  return query
+}
+
 function findPreviewAsset(
   renditions: Array<{
     slot: string
@@ -67,6 +94,7 @@ function findPreviewAsset(
 export default async function PortfolioPage({ searchParams }: PortfolioPageProps) {
   const [resolvedSearchParams, t] = await Promise.all([searchParams, getTranslations("Portfolio")])
   const activeFilter = resolveGroupFilter(resolvedSearchParams)
+  const activeSort = resolveSort(resolvedSearchParams)
 
   const [groups, artworks] = await Promise.all([
     listPublishedPortfolioGroups(),
@@ -75,8 +103,11 @@ export default async function PortfolioPage({ searchParams }: PortfolioPageProps
         ? {
             groupType: activeFilter.groupType,
             groupSlug: activeFilter.groupSlug,
+            sort: activeSort,
           }
-        : undefined,
+        : {
+            sort: activeSort,
+          },
     ),
   ])
 
@@ -91,7 +122,10 @@ export default async function PortfolioPage({ searchParams }: PortfolioPageProps
       <section className="rounded-xl border border-neutral-200 p-4">
         <div className="flex flex-wrap items-center gap-2">
           <Link
-            href="/portfolio"
+            href={{
+              pathname: "/portfolio",
+              query: activeSort === "latest" ? undefined : { sort: activeSort },
+            }}
             className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
           >
             {t("filters.clear")}
@@ -100,7 +134,16 @@ export default async function PortfolioPage({ searchParams }: PortfolioPageProps
           {groups.galleries.map((group) => (
             <Link
               key={`gallery-${group.id}`}
-              href={{ pathname: "/portfolio", query: { gallery: group.slug } }}
+              href={{
+                pathname: "/portfolio",
+                query: {
+                  ...buildPortfolioQuery(activeFilter, activeSort),
+                  gallery: group.slug,
+                  album: undefined,
+                  category: undefined,
+                  tag: undefined,
+                },
+              }}
               className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
             >
               {t("filters.gallery")}: {group.name}
@@ -110,7 +153,16 @@ export default async function PortfolioPage({ searchParams }: PortfolioPageProps
           {groups.albums.map((group) => (
             <Link
               key={`album-${group.id}`}
-              href={{ pathname: "/portfolio", query: { album: group.slug } }}
+              href={{
+                pathname: "/portfolio",
+                query: {
+                  ...buildPortfolioQuery(activeFilter, activeSort),
+                  gallery: undefined,
+                  album: group.slug,
+                  category: undefined,
+                  tag: undefined,
+                },
+              }}
               className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
             >
               {t("filters.album")}: {group.name}
@@ -120,12 +172,73 @@ export default async function PortfolioPage({ searchParams }: PortfolioPageProps
           {groups.categories.map((group) => (
             <Link
               key={`category-${group.id}`}
-              href={{ pathname: "/portfolio", query: { category: group.slug } }}
+              href={{
+                pathname: "/portfolio",
+                query: {
+                  ...buildPortfolioQuery(activeFilter, activeSort),
+                  gallery: undefined,
+                  album: undefined,
+                  category: group.slug,
+                  tag: undefined,
+                },
+              }}
               className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
             >
               {t("filters.category")}: {group.name}
             </Link>
           ))}
+
+          {groups.tags.map((group) => (
+            <Link
+              key={`tag-${group.id}`}
+              href={{
+                pathname: "/portfolio",
+                query: {
+                  ...buildPortfolioQuery(activeFilter, activeSort),
+                  gallery: undefined,
+                  album: undefined,
+                  category: undefined,
+                  tag: group.slug,
+                },
+              }}
+              className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
+            >
+              {t("filters.tag")}: {group.name}
+            </Link>
+          ))}
+        </div>
+
+        <div className="mt-3 flex flex-wrap items-center gap-2">
+          <span className="text-xs uppercase tracking-wide text-neutral-500">
+            {t("sort.label")}:
+          </span>
+          <Link
+            href={{
+              pathname: "/portfolio",
+              query: buildPortfolioQuery(activeFilter, "latest"),
+            }}
+            className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
+          >
+            {t("sort.latest")}
+          </Link>
+          <Link
+            href={{
+              pathname: "/portfolio",
+              query: buildPortfolioQuery(activeFilter, "title_asc"),
+            }}
+            className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
+          >
+            {t("sort.titleAsc")}
+          </Link>
+          <Link
+            href={{
+              pathname: "/portfolio",
+              query: buildPortfolioQuery(activeFilter, "title_desc"),
+            }}
+            className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
+          >
+            {t("sort.titleDesc")}
+          </Link>
         </div>
       </section>
 

apps/web/src/components/public-announcements.tsx

@@ -3,6 +3,7 @@ import Link from "next/link"
 
 type PublicAnnouncementsProps = {
   placement: "global_top" | "homepage"
+  locale?: string
 }
 
 function AnnouncementCard({ announcement }: { announcement: PublicAnnouncement }) {
@@ -22,8 +23,8 @@ function AnnouncementCard({ announcement }: { announcement: PublicAnnouncement }
   )
 }
 
-export async function PublicAnnouncements({ placement }: PublicAnnouncementsProps) {
+export async function PublicAnnouncements({ placement, locale }: PublicAnnouncementsProps) {
-  const announcements = await listActiveAnnouncements(placement)
+  const announcements = await listActiveAnnouncements(placement, new Date(), locale)
 
   if (announcements.length === 0) {
     return null

apps/web/src/messages/de.json

@@ -77,7 +77,14 @@
       "clear": "Filter zurücksetzen",
       "gallery": "Galerie",
       "album": "Album",
-      "category": "Kategorie"
+      "category": "Kategorie",
+      "tag": "Tag"
+    },
+    "sort": {
+      "label": "Sortierung",
+      "latest": "Neueste",
+      "titleAsc": "Titel A-Z",
+      "titleDesc": "Titel Z-A"
     },
     "fields": {
       "medium": "Medium",

apps/web/src/messages/en.json

@@ -77,7 +77,14 @@
       "clear": "Clear filters",
       "gallery": "Gallery",
       "album": "Album",
-      "category": "Category"
+      "category": "Category",
+      "tag": "Tag"
+    },
+    "sort": {
+      "label": "Sort",
+      "latest": "Latest",
+      "titleAsc": "Title A-Z",
+      "titleDesc": "Title Z-A"
     },
     "fields": {
       "medium": "Medium",

apps/web/src/messages/es.json

@@ -77,7 +77,14 @@
       "clear": "Limpiar filtros",
       "gallery": "Galería",
       "album": "Álbum",
-      "category": "Categoría"
+      "category": "Categoría",
+      "tag": "Etiqueta"
+    },
+    "sort": {
+      "label": "Orden",
+      "latest": "Más recientes",
+      "titleAsc": "Título A-Z",
+      "titleDesc": "Título Z-A"
     },
     "fields": {
       "medium": "Técnica",

apps/web/src/messages/fr.json

@@ -77,7 +77,14 @@
       "clear": "Réinitialiser les filtres",
       "gallery": "Galerie",
       "album": "Album",
-      "category": "Catégorie"
+      "category": "Catégorie",
+      "tag": "Tag"
+    },
+    "sort": {
+      "label": "Tri",
+      "latest": "Plus récents",
+      "titleAsc": "Titre A-Z",
+      "titleDesc": "Titre Z-A"
     },
     "fields": {
       "medium": "Médium",

packages/content/src/announcements.ts

@@ -1,11 +1,13 @@
 import { z } from "zod"
 
 export const announcementPlacementSchema = z.enum(["global_top", "homepage"])
+export const announcementLocaleSchema = z.enum(["de", "en", "es", "fr"])
 
 export const createAnnouncementInputSchema = z.object({
   title: z.string().min(1).max(180),
   message: z.string().min(1).max(500),
   placement: announcementPlacementSchema.default("global_top"),
+  targetLocales: z.array(announcementLocaleSchema).default([]),
   priority: z.number().int().min(0).default(100),
   ctaLabel: z.string().max(120).nullable().optional(),
   ctaHref: z.string().max(500).nullable().optional(),
@@ -19,6 +21,7 @@ export const updateAnnouncementInputSchema = z.object({
   title: z.string().min(1).max(180).optional(),
   message: z.string().min(1).max(500).optional(),
   placement: announcementPlacementSchema.optional(),
+  targetLocales: z.array(announcementLocaleSchema).optional(),
   priority: z.number().int().min(0).optional(),
   ctaLabel: z.string().max(120).nullable().optional(),
   ctaHref: z.string().max(500).nullable().optional(),

packages/db/prisma/migrations/20260213014500_announcement_locale_targeting/migration.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "Announcement"
+ADD COLUMN "targetLocales" TEXT[] NOT NULL DEFAULT ARRAY[]::TEXT[];

packages/db/prisma/schema.prisma

@@ -405,6 +405,7 @@ model Announcement {
   title     String
   message   String
   placement String
+  targetLocales String[] @default([])
   priority  Int      @default(100)
   ctaLabel  String?
   ctaHref   String?

packages/db/src/announcements.test.ts

@@ -41,13 +41,18 @@ describe("announcements service", () => {
   it("queries only visible announcements in the given placement", async () => {
     mockDb.announcement.findMany.mockResolvedValue([])
 
-    await listActiveAnnouncements("homepage")
+    await listActiveAnnouncements("homepage", new Date("2026-02-12T10:00:00.000Z"), "en")
 
     expect(mockDb.announcement.findMany).toHaveBeenCalledTimes(1)
     expect(mockDb.announcement.findMany.mock.calls[0]?.[0]).toMatchObject({
       where: {
         placement: "homepage",
         isVisible: true,
+        AND: [
+          {
+            OR: [{ targetLocales: { isEmpty: true } }, { targetLocales: { has: "en" } }],
+          },
+        ],
       },
     })
   })

packages/db/src/announcements.ts

@@ -13,6 +13,7 @@ export type PublicAnnouncement = {
   ctaLabel: string | null
   ctaHref: string | null
   placement: string
+  targetLocales: string[]
   priority: number
 }
 
@@ -50,13 +51,26 @@ export async function deleteAnnouncement(id: string) {
 export async function listActiveAnnouncements(
   placement: AnnouncementPlacement,
   now = new Date(),
+  locale?: string,
 ): Promise<PublicAnnouncement[]> {
+  const localeFilter =
+    locale && locale.length > 0
+      ? {
+          AND: [
+            {
+              OR: [{ targetLocales: { isEmpty: true } }, { targetLocales: { has: locale } }],
+            },
+          ],
+        }
+      : undefined
+
   const announcements = await db.announcement.findMany({
     where: {
       placement,
       isVisible: true,
       OR: [{ startsAt: null }, { startsAt: { lte: now } }],
       AND: [{ OR: [{ endsAt: null }, { endsAt: { gte: now } }] }],
+      ...(localeFilter ?? {}),
     },
     orderBy: [{ priority: "asc" }, { createdAt: "desc" }],
     select: {
@@ -66,6 +80,7 @@ export async function listActiveAnnouncements(
       ctaLabel: true,
       ctaHref: true,
       placement: true,
+      targetLocales: true,
       priority: true,
     },
   })

packages/db/src/media-foundation.ts

@@ -9,15 +9,18 @@ import {
   updateGroupingInputSchema,
   updateMediaAssetInputSchema,
 } from "@cms/content"
+import type { Prisma } from "@prisma/client"
 
 import { db } from "./client"
 
 type PublicArtworkGroupType = "gallery" | "album" | "category" | "tag"
+type PublicArtworkSort = "latest" | "title_asc" | "title_desc"
 
 type ListPublishedArtworksInput = {
   groupType?: PublicArtworkGroupType
   groupSlug?: string
   limit?: number
+  sort?: PublicArtworkSort
 }
 
 export async function listMediaAssets(limit = 24) {
@@ -431,6 +434,12 @@ export async function listPublishedArtworks(input: ListPublishedArtworksInput =
   const where: Record<string, unknown> = {
     isPublished: true,
   }
+  const orderBy: Prisma.ArtworkOrderByWithRelationInput[] =
+    input.sort === "title_asc"
+      ? [{ title: "asc" }, { updatedAt: "desc" }]
+      : input.sort === "title_desc"
+        ? [{ title: "desc" }, { updatedAt: "desc" }]
+        : [{ updatedAt: "desc" }]
 
   if (input.groupType && input.groupSlug) {
     if (input.groupType === "gallery") {
@@ -474,7 +483,7 @@ export async function listPublishedArtworks(input: ListPublishedArtworksInput =
 
   return db.artwork.findMany({
     where,
-    orderBy: [{ updatedAt: "desc" }],
+    orderBy,
     take,
     include: {
       renditions: {