feat(products): settings-pagina in tabs + read-only content_policy-inzage #87

Merged
janpeter merged 4 commits from claude/product-settings-tabs into main 2026-06-14 22:23:15 +02:00
Owner

Wat & waarom

De product-instellingen-pagina was een lange scroll met zes secties. Deze PR deelt 'm op in 4 tabs en voegt een read-only content_policy-inzage toe (de AVG-weigerlijst die de Copilot-gate afdwingt).

Inhoud

  • components/products/product-settings-tabs.tsx (client) — lichte tab-shell, geen nieuwe dependency. role="tablist"/tab + aria-selected + focus-ring; alle tabs blijven gemount (inactief hidden) zodat formulier-state behouden blijft bij wisselen.
  • components/products/product-content-policy.tsx (server) — read-only weergave: parseContentPolicy (fail-closed) → null = lege staat ("AVG-gate staat uit"), ContentPolicyError = foutstaat (geen crash), geldig = drie chip-groepen (verboden velden/features = error-familie, toegestane termen = success-familie) met tellingen.
  • app/(app)/products/[id]/settings/page.tsx — bedraad in 4 tabs (Algemeen + Gevaarlijke zone · Agent & PR · Team + Copilot-gebruikers · Content-policy). Data-fetch, auth (demo-redirect, owner-scope) en header ongewijzigd.

Scope

Read-only inzage (geen bewerk-UI — blijft seed-beheerd); alleen deze desktop-settings-pagina. Lucide-icons (al aanwezig). MD3-tokens uit app/styles/theme.css (geverifieerd: success-container/error-container/surface-container-low bestaan).

Verificatie

  • npm test -- product-content-policy product-settings-tabs27 passed (2 files).
  • npm run typecheck → 0 nieuwe fouten (de 4 resterende zitten in manual.generated, pre-existing/gegenereerd build-artefact).

Spec: docs/superpowers/specs/2026-06-14-product-settings-tabs-content-policy-design.md.

🤖 Generated with Claude Code

## Wat & waarom De product-instellingen-pagina was een lange scroll met zes secties. Deze PR deelt 'm op in **4 tabs** en voegt een **read-only `content_policy`-inzage** toe (de AVG-weigerlijst die de Copilot-gate afdwingt). ## Inhoud - **`components/products/product-settings-tabs.tsx`** (client) — lichte tab-shell, geen nieuwe dependency. `role="tablist"`/`tab` + `aria-selected` + focus-ring; alle tabs blijven gemount (inactief `hidden`) zodat formulier-state behouden blijft bij wisselen. - **`components/products/product-content-policy.tsx`** (server) — read-only weergave: `parseContentPolicy` (fail-closed) → `null` = lege staat ("AVG-gate staat uit"), `ContentPolicyError` = foutstaat (geen crash), geldig = drie chip-groepen (verboden velden/features = error-familie, toegestane termen = success-familie) met tellingen. - **`app/(app)/products/[id]/settings/page.tsx`** — bedraad in 4 tabs (Algemeen + Gevaarlijke zone · Agent & PR · Team + Copilot-gebruikers · Content-policy). Data-fetch, auth (demo-redirect, owner-scope) en header ongewijzigd. ## Scope Read-only inzage (geen bewerk-UI — blijft seed-beheerd); alleen deze desktop-settings-pagina. Lucide-icons (al aanwezig). MD3-tokens uit `app/styles/theme.css` (geverifieerd: `success-container`/`error-container`/`surface-container-low` bestaan). ## Verificatie - `npm test -- product-content-policy product-settings-tabs` → **27 passed** (2 files). - `npm run typecheck` → 0 nieuwe fouten (de 4 resterende zitten in `manual.generated`, pre-existing/gegenereerd build-artefact). Spec: `docs/superpowers/specs/2026-06-14-product-settings-tabs-content-policy-design.md`. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Settings-pagina opdelen in 4 tabs (Algemeen/Agent & PR/Team/Content-policy) via een
lichte client-shell (geen nieuwe dep, server-data behouden, form-state behouden) +
een read-only content_policy-weergave (parse via @shared/content-policy, drie chip-
groepen, null/error-staten). JP-akkoord: 4 tabs, read-only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Renders a read-only view of a product's AVG content-policy with three
chip groups (forbidden fields, forbidden features, allowed terms) using
the error-container token family for forbidden chips and success-container
for allowed chips. Handles null (gate off), ContentPolicyError (malformed),
and valid policies. 14 tests, all passing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Renders a tab bar (tablist/tab/tabpanel) where all panels stay mounted
(hidden attribute) to preserve form state. Supports defaultTab prop and
shows active tab with accent underline. 13 tests, all passing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat(settings): wire product settings page into 4 tabs
All checks were successful
CI / Lint, Typecheck, Test & Build (pull_request) Successful in 3m22s
CI / Deploy Manual (workflow_dispatch) (pull_request) Has been skipped
CI / Detect deploy-relevant changes (pull_request) Has been skipped
CI / Deploy Preview (PR) (pull_request) Has been skipped
CI / Deploy Production (main) (pull_request) Has been skipped
fef3e980e1
Replaces the flat section layout with ProductSettingsTabs: Algemeen
(form + archive), Agent & PR (auto-pr toggle + pr-strategy), Team
(team manager + copilot users), and Content-policy (read-only AVG view).
Data-fetch, auth guard, and page header are unchanged. Adds lucide-react
icons per tab (Settings/Bot/Users/ShieldCheck).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
janpeter/Scrum4Me!87
No description provided.