feat: ST-101-ST-110 M1 producten, PBI backlog, iconen en PWA manifest

- Product aanmaken/bewerken/archiveren/herstellen (ST-101, ST-103)
- SplitPane component met versleepbare splitter en localStorage (ST-104)
- PanelNavBar herbruikbaar paneelheader component (ST-105)
- PbiList met prioriteitsgroepen, inline aanmaken, filter en verwijderen (ST-106-ST-110)
- StoryPanel placeholder rechter paneel met selectie via Zustand (ST-109)
- App iconen geinstalleerd: favicon, apple-icon, PWA manifest (192/512px)
- AppIcon SVG component in navigatiebar
- Root layout metadata bijgewerkt naar Nederlands

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

app/(app)/dashboard/page.tsx

@@ -6,24 +6,47 @@ import Link from 'next/link'
 import { Button } from '@/components/ui/button'
 import { ProductList } from '@/components/dashboard/product-list'
 
-export default async function DashboardPage() {
+interface Props {
+  searchParams: Promise<{ archived?: string }>
+}
+
+export default async function DashboardPage({ searchParams }: Props) {
   const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
+  const { archived } = await searchParams
+  const showArchived = archived === '1'
 
   const products = await prisma.product.findMany({
-    where: { user_id: session.userId, archived: false },
+    where: { user_id: session.userId, archived: showArchived },
     orderBy: { created_at: 'desc' },
   })
 
   return (
     <div className="p-6 max-w-4xl mx-auto w-full">
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-xl font-medium text-foreground">Mijn Producten</h1>
-        {!session.isDemo && (
-          <Button render={<Link href="/products/new" />}>+ Nieuw product</Button>
+        <div className="flex items-center gap-3">
+          <h1 className="text-xl font-medium text-foreground">
+            {showArchived ? 'Gearchiveerde producten' : 'Mijn Producten'}
+          </h1>
+          {showArchived ? (
+            <Link href="/dashboard" className="text-xs text-primary hover:underline">
+              ← Actief
+            </Link>
+          ) : (
+            <Link href="/dashboard?archived=1" className="text-xs text-muted-foreground hover:text-foreground">
+              Toon gearchiveerd
+            </Link>
+          )}
+        </div>
+        {!session.isDemo && !showArchived && (
+          <Button nativeButton={false} render={<Link href="/products/new" />}>+ Nieuw product</Button>
         )}
       </div>
 
-      <ProductList products={products} isDemo={session.isDemo ?? false} />
+      <ProductList
+        products={products}
+        isDemo={session.isDemo ?? false}
+        showArchived={showArchived}
+      />
     </div>
   )
 }

app/(app)/products/[id]/page.tsx

@@ -0,0 +1,80 @@
+import { notFound } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { SessionData, sessionOptions } from '@/lib/session'
+import { prisma } from '@/lib/prisma'
+import { SplitPane } from '@/components/split-pane/split-pane'
+import { PbiList } from '@/components/backlog/pbi-list'
+import { StoryPanel } from '@/components/backlog/story-panel'
+
+interface Props {
+  params: Promise<{ id: string }>
+}
+
+export default async function ProductBacklogPage({ params }: Props) {
+  const { id } = await params
+  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
+
+  const product = await prisma.product.findFirst({
+    where: { id, user_id: session.userId },
+  })
+  if (!product) notFound()
+
+  const pbis = await prisma.pbi.findMany({
+    where: { product_id: id },
+    orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
+  })
+
+  const stories = await prisma.story.findMany({
+    where: { product_id: id },
+    orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
+    select: { id: true, title: true, status: true, pbi_id: true },
+  })
+
+  // Group stories by PBI id
+  const storiesByPbi: Record<string, typeof stories> = {}
+  for (const story of stories) {
+    if (!storiesByPbi[story.pbi_id]) storiesByPbi[story.pbi_id] = []
+    storiesByPbi[story.pbi_id].push(story)
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Product header */}
+      <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-between">
+        <div>
+          <h1 className="font-medium text-foreground">{product.name}</h1>
+          {product.description && (
+            <p className="text-xs text-muted-foreground mt-0.5">{product.description}</p>
+          )}
+        </div>
+        <a
+          href={`/products/${id}/settings`}
+          className="text-xs text-muted-foreground hover:text-foreground"
+        >
+          Instellingen
+        </a>
+      </div>
+
+      {/* Split pane */}
+      <div className="flex-1 overflow-hidden">
+        <SplitPane
+          storageKey={`backlog-${id}`}
+          left={
+            <PbiList
+              productId={id}
+              pbis={pbis.map(p => ({ id: p.id, title: p.title, priority: p.priority }))}
+              isDemo={session.isDemo ?? false}
+            />
+          }
+          right={
+            <StoryPanel
+              storiesByPbi={storiesByPbi}
+              isDemo={session.isDemo ?? false}
+            />
+          }
+        />
+      </div>
+    </div>
+  )
+}

app/(app)/products/[id]/settings/page.tsx

@@ -0,0 +1,62 @@
+import { notFound, redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { SessionData, sessionOptions } from '@/lib/session'
+import { prisma } from '@/lib/prisma'
+import { ProductForm } from '@/components/products/product-form'
+import { ArchiveProductButton } from '@/components/products/archive-product-button'
+import { updateProductAction } from '@/actions/products'
+import Link from 'next/link'
+
+interface Props {
+  params: Promise<{ id: string }>
+}
+
+export default async function ProductSettingsPage({ params }: Props) {
+  const { id } = await params
+  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
+
+  if (session.isDemo) redirect(`/products/${id}`)
+
+  const product = await prisma.product.findFirst({
+    where: { id, user_id: session.userId },
+  })
+  if (!product) notFound()
+
+  return (
+    <div className="p-6 max-w-2xl mx-auto w-full">
+      <div className="flex items-center gap-3 mb-6">
+        <Link href={`/products/${id}`} className="text-muted-foreground hover:text-foreground text-sm">
+          ← {product.name}
+        </Link>
+        <span className="text-muted-foreground">/</span>
+        <h1 className="text-xl font-medium text-foreground">Instellingen</h1>
+      </div>
+
+      <ProductForm
+        action={updateProductAction}
+        submitLabel="Opslaan"
+        defaultValues={{
+          id: product.id,
+          name: product.name,
+          description: product.description ?? '',
+          repo_url: product.repo_url ?? '',
+          definition_of_done: product.definition_of_done,
+        }}
+      />
+
+      <div className="mt-10 pt-6 border-t border-border">
+        <h2 className="text-sm font-medium text-foreground mb-3">Gevaarlijke zone</h2>
+        <div className="bg-error-container/30 border border-error/20 rounded-xl p-4 flex items-center justify-between gap-4">
+          <div>
+            <p className="text-sm font-medium text-foreground">Product archiveren</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              Het product wordt verborgen uit het dashboard. Je kunt het later herstellen.
+            </p>
+          </div>
+          <ArchiveProductButton productId={id} />
+        </div>
+      </div>
+    </div>
+  )
+}

app/(app)/products/new/page.tsx

@@ -0,0 +1,18 @@
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { redirect } from 'next/navigation'
+import { SessionData, sessionOptions } from '@/lib/session'
+import { ProductForm } from '@/components/products/product-form'
+import { createProductAction } from '@/actions/products'
+
+export default async function NewProductPage() {
+  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
+  if (session.isDemo) redirect('/dashboard')
+
+  return (
+    <div className="p-6 max-w-2xl mx-auto w-full">
+      <h1 className="text-xl font-medium text-foreground mb-6">Nieuw product</h1>
+      <ProductForm action={createProductAction} submitLabel="Product aanmaken" />
+    </div>
+  )
+}

app/layout.tsx

@@ -13,8 +13,21 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    default: "Scrum4Me",
+    template: "%s — Scrum4Me",
+  },
+  description: "Lichtgewicht Scrum-planner voor solo developers en kleine teams",
+  icons: {
+    icon: [
+      { url: "/favicon.ico", sizes: "48x48" },
+      { url: "/icon.png", sizes: "192x192", type: "image/png" },
+    ],
+    apple: [
+      { url: "/apple-icon.png", sizes: "180x180", type: "image/png" },
+    ],
+  },
+  manifest: "/manifest.json",
 };
 
 export default function RootLayout({
@@ -24,7 +37,7 @@ export default function RootLayout({
 }>) {
   return (
     <html
-      lang="en"
+      lang="nl"
       className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">{children}</body>