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>

actions/pbis.ts

@@ -0,0 +1,112 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { z } from 'zod'
+import { prisma } from '@/lib/prisma'
+import { SessionData, sessionOptions } from '@/lib/session'
+
+async function getSession() {
+  return getIronSession<SessionData>(await cookies(), sessionOptions)
+}
+
+async function verifyProductOwnership(productId: string, userId: string) {
+  return prisma.product.findFirst({ where: { id: productId, user_id: userId } })
+}
+
+const createPbiSchema = z.object({
+  productId: z.string(),
+  title: z.string().min(1, 'Titel is verplicht').max(200),
+  priority: z.coerce.number().int().min(1).max(4),
+})
+
+const updatePbiSchema = z.object({
+  id: z.string(),
+  title: z.string().min(1, 'Titel is verplicht').max(200),
+  description: z.string().max(2000).optional(),
+  priority: z.coerce.number().int().min(1).max(4),
+})
+
+export async function createPbiAction(_prevState: unknown, formData: FormData) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const parsed = createPbiSchema.safeParse({
+    productId: formData.get('productId'),
+    title: formData.get('title'),
+    priority: formData.get('priority'),
+  })
+  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors }
+
+  const product = await verifyProductOwnership(parsed.data.productId, session.userId)
+  if (!product) return { error: 'Product niet gevonden' }
+
+  const last = await prisma.pbi.findFirst({
+    where: { product_id: parsed.data.productId, priority: parsed.data.priority },
+    orderBy: { sort_order: 'desc' },
+  })
+  const sort_order = (last?.sort_order ?? 0) + 1.0
+
+  const pbi = await prisma.pbi.create({
+    data: {
+      product_id: parsed.data.productId,
+      title: parsed.data.title,
+      priority: parsed.data.priority,
+      sort_order,
+    },
+  })
+
+  revalidatePath(`/products/${parsed.data.productId}`)
+  return { success: true, pbi }
+}
+
+export async function updatePbiAction(_prevState: unknown, formData: FormData) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const parsed = updatePbiSchema.safeParse({
+    id: formData.get('id'),
+    title: formData.get('title'),
+    description: formData.get('description') || undefined,
+    priority: formData.get('priority'),
+  })
+  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors }
+
+  const pbi = await prisma.pbi.findFirst({
+    where: { id: parsed.data.id },
+    include: { product: true },
+  })
+  if (!pbi || pbi.product.user_id !== session.userId) return { error: 'PBI niet gevonden' }
+
+  await prisma.pbi.update({
+    where: { id: parsed.data.id },
+    data: {
+      title: parsed.data.title,
+      description: parsed.data.description ?? null,
+      priority: parsed.data.priority,
+    },
+  })
+
+  revalidatePath(`/products/${pbi.product_id}`)
+  return { success: true }
+}
+
+export async function deletePbiAction(id: string) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const pbi = await prisma.pbi.findFirst({
+    where: { id },
+    include: { product: true },
+  })
+  if (!pbi || pbi.product.user_id !== session.userId) return { error: 'PBI niet gevonden' }
+
+  await prisma.pbi.delete({ where: { id } })
+
+  revalidatePath(`/products/${pbi.product_id}`)
+  return { success: true }
+}

actions/products.ts

@@ -0,0 +1,139 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { z } from 'zod'
+import { prisma } from '@/lib/prisma'
+import { SessionData, sessionOptions } from '@/lib/session'
+
+const productSchema = z.object({
+  name: z.string().min(1, 'Naam is verplicht').max(100, 'Naam mag maximaal 100 tekens bevatten'),
+  description: z.string().max(1000, 'Beschrijving mag maximaal 1000 tekens bevatten').optional(),
+  repo_url: z
+    .string()
+    .url('Voer een geldige URL in (inclusief https://)')
+    .optional()
+    .or(z.literal('')),
+  definition_of_done: z
+    .string()
+    .min(1, 'Definition of Done is verplicht')
+    .max(500, 'Definition of Done mag maximaal 500 tekens bevatten'),
+})
+
+async function getSession() {
+  return getIronSession<SessionData>(await cookies(), sessionOptions)
+}
+
+export async function createProductAction(_prevState: unknown, formData: FormData) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const parsed = productSchema.safeParse({
+    name: formData.get('name'),
+    description: formData.get('description') || undefined,
+    repo_url: formData.get('repo_url') || undefined,
+    definition_of_done: formData.get('definition_of_done'),
+  })
+
+  if (!parsed.success) {
+    return { error: parsed.error.flatten().fieldErrors }
+  }
+
+  const existing = await prisma.product.findFirst({
+    where: { user_id: session.userId, name: parsed.data.name },
+  })
+  if (existing) return { error: { name: ['Een product met deze naam bestaat al'] } }
+
+  const product = await prisma.product.create({
+    data: {
+      user_id: session.userId,
+      name: parsed.data.name,
+      description: parsed.data.description ?? null,
+      repo_url: parsed.data.repo_url || null,
+      definition_of_done: parsed.data.definition_of_done,
+    },
+  })
+
+  redirect(`/products/${product.id}`)
+}
+
+export async function updateProductAction(_prevState: unknown, formData: FormData) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const id = formData.get('id') as string
+  if (!id) return { error: 'Product niet gevonden' }
+
+  const parsed = productSchema.safeParse({
+    name: formData.get('name'),
+    description: formData.get('description') || undefined,
+    repo_url: formData.get('repo_url') || undefined,
+    definition_of_done: formData.get('definition_of_done'),
+  })
+
+  if (!parsed.success) {
+    return { error: parsed.error.flatten().fieldErrors }
+  }
+
+  // Verify ownership
+  const product = await prisma.product.findFirst({
+    where: { id, user_id: session.userId },
+  })
+  if (!product) return { error: 'Product niet gevonden' }
+
+  // Check unique name (excluding self)
+  const duplicate = await prisma.product.findFirst({
+    where: { user_id: session.userId, name: parsed.data.name, NOT: { id } },
+  })
+  if (duplicate) return { error: { name: ['Een product met deze naam bestaat al'] } }
+
+  await prisma.product.update({
+    where: { id },
+    data: {
+      name: parsed.data.name,
+      description: parsed.data.description ?? null,
+      repo_url: parsed.data.repo_url || null,
+      definition_of_done: parsed.data.definition_of_done,
+    },
+  })
+
+  revalidatePath(`/products/${id}`)
+  revalidatePath('/dashboard')
+  return { success: true }
+}
+
+export async function archiveProductAction(id: string) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const product = await prisma.product.findFirst({
+    where: { id, user_id: session.userId },
+  })
+  if (!product) return { error: 'Product niet gevonden' }
+
+  await prisma.product.update({ where: { id }, data: { archived: true } })
+
+  revalidatePath('/dashboard')
+  redirect('/dashboard')
+}
+
+export async function restoreProductAction(id: string) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const product = await prisma.product.findFirst({
+    where: { id, user_id: session.userId },
+  })
+  if (!product) return { error: 'Product niet gevonden' }
+
+  await prisma.product.update({ where: { id }, data: { archived: false } })
+
+  revalidatePath('/dashboard')
+  return { success: true }
+}

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>
+        <div className="flex items-center gap-3">
-        {!session.isDemo && (
+          <h1 className="text-xl font-medium text-foreground">
-          <Button render={<Link href="/products/new" />}>+ Nieuw product</Button>
+            {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",
+  title: {
-  description: "Generated by create next app",
+    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>

components/backlog/pbi-list.tsx

@@ -0,0 +1,237 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { useActionState } from 'react'
+import { useFormStatus } from 'react-dom'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { PanelNavBar } from '@/components/shared/panel-nav-bar'
+import { useSelectionStore } from '@/stores/selection-store'
+import { createPbiAction, deletePbiAction } from '@/actions/pbis'
+import { cn } from '@/lib/utils'
+
+const PRIORITY_LABELS: Record<number, string> = {
+  1: 'Kritiek',
+  2: 'Hoog',
+  3: 'Gemiddeld',
+  4: 'Laag',
+}
+
+const PRIORITY_COLORS: Record<number, string> = {
+  1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
+  2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
+  3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
+  4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
+}
+
+interface Pbi {
+  id: string
+  title: string
+  priority: number
+}
+
+interface PbiListProps {
+  productId: string
+  pbis: Pbi[]
+  isDemo: boolean
+}
+
+function CreatePbiForm({ productId, priority, onDone }: { productId: string; priority: number; onDone: () => void }) {
+  const [state, formAction] = useActionState(
+    async (_prev: unknown, fd: FormData) => {
+      const result = await createPbiAction(_prev, fd)
+      if (result?.success) onDone()
+      return result
+    },
+    undefined
+  )
+  const error = state?.error
+
+  return (
+    <form action={formAction} className="flex gap-2 p-2">
+      <input type="hidden" name="productId" value={productId} />
+      <input type="hidden" name="priority" value={priority} />
+      <Input
+        name="title"
+        autoFocus
+        placeholder="PBI-titel…"
+        className="h-7 text-sm"
+        required
+      />
+      <CreateSubmitButton />
+      <Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>
+        Annuleren
+      </Button>
+      {typeof error === 'string' && (
+        <p className="text-xs text-error self-center">{error}</p>
+      )}
+    </form>
+  )
+}
+
+function CreateSubmitButton() {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" size="sm" className="h-7" disabled={pending}>
+      {pending ? '…' : 'Toevoegen'}
+    </Button>
+  )
+}
+
+export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
+  const { selectedPbiId, selectPbi } = useSelectionStore()
+  const [filterPriority, setFilterPriority] = useState<number | null>(null)
+  const [creatingForPriority, setCreatingForPriority] = useState<number | null>(null)
+  const [, startTransition] = useTransition()
+
+  const filtered = filterPriority ? pbis.filter(p => p.priority === filterPriority) : pbis
+
+  const grouped = [1, 2, 3, 4].reduce<Record<number, Pbi[]>>((acc, p) => {
+    acc[p] = filtered.filter(pbi => pbi.priority === p)
+    return acc
+  }, {} as Record<number, Pbi[]>)
+
+  const visiblePriorities = [1, 2, 3, 4].filter(
+    p => grouped[p].length > 0 || creatingForPriority === p
+  )
+
+  function handleDelete(id: string) {
+    startTransition(async () => {
+      await deletePbiAction(id)
+      if (selectedPbiId === id) selectPbi(null)
+    })
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <PanelNavBar
+        title="Product Backlog"
+        actions={
+          <>
+            {filterPriority !== null && (
+              <button
+                onClick={() => setFilterPriority(null)}
+                className="flex items-center gap-1 text-xs text-primary hover:underline"
+              >
+                <Badge className={cn('text-xs', PRIORITY_COLORS[filterPriority])}>
+                  {PRIORITY_LABELS[filterPriority]}
+                </Badge>
+                <span>×</span>
+              </button>
+            )}
+            <Select
+              value={filterPriority?.toString() ?? 'all'}
+              onValueChange={(v) => setFilterPriority(!v || v === 'all' ? null : parseInt(v))}
+            >
+              <SelectTrigger className="h-7 w-28 text-xs">
+                <SelectValue placeholder="Filter" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Alle</SelectItem>
+                <SelectItem value="1">Kritiek</SelectItem>
+                <SelectItem value="2">Hoog</SelectItem>
+                <SelectItem value="3">Gemiddeld</SelectItem>
+                <SelectItem value="4">Laag</SelectItem>
+              </SelectContent>
+            </Select>
+            {!isDemo && (
+              <Button
+                size="sm"
+                className="h-7 text-xs"
+                onClick={() => setCreatingForPriority(creatingForPriority ? null : 2)}
+              >
+                + PBI
+              </Button>
+            )}
+          </>
+        }
+      />
+
+      <div className="flex-1 overflow-y-auto">
+        {pbis.length === 0 && creatingForPriority === null ? (
+          <div className="p-8 text-center text-muted-foreground text-sm space-y-3">
+            <p>Nog geen PBI&apos;s aangemaakt.</p>
+            {!isDemo && (
+              <Button size="sm" variant="outline" onClick={() => setCreatingForPriority(2)}>
+                Maak je eerste PBI aan
+              </Button>
+            )}
+          </div>
+        ) : (
+          <div className="py-2">
+            {visiblePriorities.map(priority => (
+              <div key={priority}>
+                {/* Priority group header */}
+                <div className="flex items-center gap-2 px-4 py-1.5">
+                  <span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[priority])}>
+                    {PRIORITY_LABELS[priority]}
+                  </span>
+                  <div className="flex-1 h-px bg-border" />
+                  {!isDemo && (
+                    <button
+                      onClick={() => setCreatingForPriority(priority)}
+                      className="text-xs text-muted-foreground hover:text-foreground"
+                    >
+                      +
+                    </button>
+                  )}
+                </div>
+
+                {/* PBI items */}
+                {grouped[priority].map(pbi => (
+                  <div
+                    key={pbi.id}
+                    onClick={() => selectPbi(pbi.id)}
+                    className={cn(
+                      'group flex items-center justify-between px-4 py-2 cursor-pointer transition-colors hover:bg-surface-container',
+                      selectedPbiId === pbi.id && 'bg-primary-container text-primary-container-foreground'
+                    )}
+                  >
+                    <span className="text-sm truncate flex-1">{pbi.title}</span>
+                    {!isDemo && (
+                      <button
+                        onClick={(e) => { e.stopPropagation(); handleDelete(pbi.id) }}
+                        className="opacity-0 group-hover:opacity-100 ml-2 text-muted-foreground hover:text-error text-xs shrink-0"
+                        aria-label="Verwijder PBI"
+                      >
+                        ×
+                      </button>
+                    )}
+                  </div>
+                ))}
+
+                {/* Inline create form for this priority */}
+                {creatingForPriority === priority && (
+                  <CreatePbiForm
+                    productId={productId}
+                    priority={priority}
+                    onDone={() => setCreatingForPriority(null)}
+                  />
+                )}
+              </div>
+            ))}
+
+            {/* If creating for a priority that has no items yet and isn't in visiblePriorities */}
+            {creatingForPriority !== null && !visiblePriorities.includes(creatingForPriority) && (
+              <div>
+                <div className="flex items-center gap-2 px-4 py-1.5">
+                  <span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[creatingForPriority])}>
+                    {PRIORITY_LABELS[creatingForPriority]}
+                  </span>
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <CreatePbiForm
+                  productId={productId}
+                  priority={creatingForPriority}
+                  onDone={() => setCreatingForPriority(null)}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

components/backlog/story-panel.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useSelectionStore } from '@/stores/selection-store'
+import { PanelNavBar } from '@/components/shared/panel-nav-bar'
+
+interface Story {
+  id: string
+  title: string
+  status: string
+}
+
+interface StoryPanelProps {
+  storiesByPbi: Record<string, Story[]>
+  isDemo: boolean
+}
+
+export function StoryPanel({ storiesByPbi, isDemo }: StoryPanelProps) {
+  const { selectedPbiId } = useSelectionStore()
+
+  const stories = selectedPbiId ? (storiesByPbi[selectedPbiId] ?? []) : null
+
+  return (
+    <div className="flex flex-col h-full">
+      <PanelNavBar
+        title="Stories"
+        actions={
+          selectedPbiId && !isDemo ? (
+            <button className="text-xs text-primary hover:underline">+ Story</button>
+          ) : undefined
+        }
+      />
+      <div className="flex-1 overflow-y-auto p-4">
+        {stories === null ? (
+          <p className="text-sm text-muted-foreground text-center mt-8">
+            Selecteer een PBI om de stories te bekijken.
+          </p>
+        ) : stories.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center mt-8">
+            Nog geen stories voor dit PBI.
+          </p>
+        ) : (
+          <div className="space-y-2">
+            {stories.map(story => (
+              <div
+                key={story.id}
+                className="bg-surface-container-low border border-border rounded-lg p-3 text-sm"
+              >
+                {story.title}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

components/dashboard/product-list.tsx

@@ -2,7 +2,9 @@
 
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
+import { useTransition } from 'react'
 import { Button } from '@/components/ui/button'
+import { restoreProductAction } from '@/actions/products'
 
 interface Product {
   id: string
@@ -14,17 +16,30 @@ interface Product {
 interface ProductListProps {
   products: Product[]
   isDemo: boolean
+  showArchived?: boolean
 }
 
-export function ProductList({ products, isDemo }: ProductListProps) {
+export function ProductList({ products, isDemo, showArchived = false }: ProductListProps) {
   const router = useRouter()
+  const [, startTransition] = useTransition()
+
+  function handleRestore(id: string) {
+    startTransition(async () => {
+      await restoreProductAction(id)
+      router.refresh()
+    })
+  }
 
   if (products.length === 0) {
     return (
       <div className="bg-surface-container-low rounded-xl border border-border p-12 text-center space-y-3">
-        <p className="text-muted-foreground">Je hebt nog geen producten aangemaakt.</p>
+        <p className="text-muted-foreground">
-        {!isDemo && (
+          {showArchived
-          <Button variant="outline" render={<Link href="/products/new" />}>
+            ? 'Geen gearchiveerde producten.'
+            : 'Je hebt nog geen producten aangemaakt.'}
+        </p>
+        {!isDemo && !showArchived && (
+          <Button variant="outline" nativeButton={false} render={<Link href="/products/new" />}>
             Maak je eerste product aan
           </Button>
         )}
@@ -37,8 +52,10 @@ export function ProductList({ products, isDemo }: ProductListProps) {
       {products.map(product => (
         <div
           key={product.id}
-          onClick={() => router.push(`/products/${product.id}`)}
+          onClick={() => !showArchived && router.push(`/products/${product.id}`)}
-          className="group cursor-pointer bg-surface-container-low border border-border rounded-xl p-4 hover:border-primary transition-colors"
+          className={`group bg-surface-container-low border border-border rounded-xl p-4 transition-colors ${
+            showArchived ? 'opacity-60' : 'cursor-pointer hover:border-primary'
+          }`}
         >
           <div className="flex items-start justify-between gap-4">
             <div className="min-w-0">
@@ -51,17 +68,27 @@ export function ProductList({ products, isDemo }: ProductListProps) {
                 </p>
               )}
             </div>
+            <div className="flex items-center gap-3 shrink-0">
               {product.repo_url && (
                 <a
                   href={product.repo_url}
                   target="_blank"
                   rel="noopener noreferrer"
                   onClick={e => e.stopPropagation()}
-                className="text-xs text-muted-foreground hover:text-primary shrink-0 underline"
+                  className="text-xs text-muted-foreground hover:text-primary underline"
                 >
                   Repo
                 </a>
               )}
+              {showArchived && !isDemo && (
+                <button
+                  onClick={(e) => { e.stopPropagation(); handleRestore(product.id) }}
+                  className="text-xs text-primary hover:underline"
+                >
+                  Herstellen
+                </button>
+              )}
+            </div>
           </div>
         </div>
       ))}

components/products/archive-product-button.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { Button } from '@/components/ui/button'
+import { archiveProductAction } from '@/actions/products'
+
+interface ArchiveProductButtonProps {
+  productId: string
+}
+
+export function ArchiveProductButton({ productId }: ArchiveProductButtonProps) {
+  const [confirming, setConfirming] = useState(false)
+  const [isPending, startTransition] = useTransition()
+
+  function handleArchive() {
+    startTransition(async () => {
+      await archiveProductAction(productId)
+    })
+  }
+
+  if (confirming) {
+    return (
+      <div className="flex gap-2 shrink-0">
+        <Button
+          variant="destructive"
+          size="sm"
+          disabled={isPending}
+          onClick={handleArchive}
+        >
+          {isPending ? 'Bezig…' : 'Ja, archiveer'}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setConfirming(false)}
+          disabled={isPending}
+        >
+          Annuleren
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className="shrink-0 border-error/40 text-error hover:bg-error/10"
+      onClick={() => setConfirming(true)}
+    >
+      Archiveren
+    </Button>
+  )
+}

components/products/product-form.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { useActionState } from 'react'
+import { useFormStatus } from 'react-dom'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+
+type FieldErrors = Record<string, string[]>
+type ActionResult = { error?: string | FieldErrors; success?: boolean } | undefined
+
+function SubmitButton({ label }: { label: string }) {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" disabled={pending}>
+      {pending ? 'Even wachten…' : label}
+    </Button>
+  )
+}
+
+function getFieldError(error: string | FieldErrors | undefined, field: string): string | undefined {
+  if (!error || typeof error === 'string') return undefined
+  return (error as FieldErrors)[field]?.[0]
+}
+
+function getGlobalError(error: string | FieldErrors | undefined): string | undefined {
+  if (typeof error === 'string') return error
+  return undefined
+}
+
+interface ProductFormProps {
+  action: (_prevState: unknown, formData: FormData) => Promise<ActionResult>
+  submitLabel: string
+  defaultValues?: {
+    id?: string
+    name?: string
+    description?: string
+    repo_url?: string
+    definition_of_done?: string
+  }
+}
+
+export function ProductForm({ action, submitLabel, defaultValues }: ProductFormProps) {
+  const [state, formAction] = useActionState(action, undefined)
+
+  const fieldError = (field: string) => getFieldError(state?.error, field)
+  const globalError = getGlobalError(state?.error)
+
+  return (
+    <form action={formAction} className="space-y-5">
+      {defaultValues?.id && (
+        <input type="hidden" name="id" value={defaultValues.id} />
+      )}
+
+      <div className="space-y-1.5">
+        <label htmlFor="name" className="text-sm font-medium text-foreground">
+          Naam <span className="text-error">*</span>
+        </label>
+        <Input
+          id="name"
+          name="name"
+          required
+          defaultValue={defaultValues?.name}
+          placeholder="bijv. DevPlanner"
+          className={fieldError('name') ? 'border-error' : ''}
+        />
+        {fieldError('name') && (
+          <p className="text-xs text-error">{fieldError('name')}</p>
+        )}
+      </div>
+
+      <div className="space-y-1.5">
+        <label htmlFor="description" className="text-sm font-medium text-foreground">
+          Beschrijving
+        </label>
+        <Textarea
+          id="description"
+          name="description"
+          rows={3}
+          defaultValue={defaultValues?.description}
+          placeholder="Korte omschrijving van het product…"
+          className={fieldError('description') ? 'border-error' : ''}
+        />
+        {fieldError('description') && (
+          <p className="text-xs text-error">{fieldError('description')}</p>
+        )}
+      </div>
+
+      <div className="space-y-1.5">
+        <label htmlFor="repo_url" className="text-sm font-medium text-foreground">
+          Git-repo URL
+        </label>
+        <Input
+          id="repo_url"
+          name="repo_url"
+          type="url"
+          defaultValue={defaultValues?.repo_url ?? ''}
+          placeholder="https://github.com/..."
+          className={fieldError('repo_url') ? 'border-error' : ''}
+        />
+        {fieldError('repo_url') && (
+          <p className="text-xs text-error">{fieldError('repo_url')}</p>
+        )}
+      </div>
+
+      <div className="space-y-1.5">
+        <label htmlFor="definition_of_done" className="text-sm font-medium text-foreground">
+          Definition of Done <span className="text-error">*</span>
+        </label>
+        <Textarea
+          id="definition_of_done"
+          name="definition_of_done"
+          required
+          rows={4}
+          defaultValue={defaultValues?.definition_of_done}
+          placeholder="Bijv. code gereviewd, tests groen, gedeployed naar staging…"
+          className={fieldError('definition_of_done') ? 'border-error' : ''}
+        />
+        {fieldError('definition_of_done') && (
+          <p className="text-xs text-error">{fieldError('definition_of_done')}</p>
+        )}
+      </div>
+
+      {globalError && (
+        <div className="bg-error-container text-error-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-error">
+          {globalError}
+        </div>
+      )}
+
+      <div className="flex gap-3 pt-1">
+        <SubmitButton label={submitLabel} />
+      </div>
+    </form>
+  )
+}

components/shared/app-icon.tsx

@@ -0,0 +1,70 @@
+// components/shared/app-icon.tsx
+// Scrum4Me app icon — concept 5 (Rocket)
+// Gebruik: <AppIcon size={32} /> of <AppIcon size={64} className="..." />
+
+interface AppIconProps {
+  size?: number
+  className?: string
+}
+
+export function AppIcon({ size = 32, className }: AppIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-label="Scrum4Me"
+    >
+      <defs>
+        <linearGradient id="s4m-bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="#1a1028"/>
+          <stop offset="100%" stopColor="#0d0a14"/>
+        </linearGradient>
+        <linearGradient id="s4m-nose" x1="256" y1="60" x2="256" y2="212" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="#c4b5fd"/>
+          <stop offset="100%" stopColor="#7c3aed"/>
+        </linearGradient>
+      </defs>
+
+      {/* Background */}
+      <rect width="512" height="512" rx="114" fill="url(#s4m-bg)"/>
+
+      {/* Block 1 — PBI */}
+      <rect x="174" y="372" width="164" height="60" rx="12" fill="#4f6ef7" opacity="0.6"/>
+
+      {/* Block 2 — Story */}
+      <rect x="144" y="292" width="224" height="76" rx="12" fill="#6366f1" opacity="0.75"/>
+
+      {/* Block 3 — Task */}
+      <rect x="160" y="212" width="192" height="76" rx="12" fill="#7c3aed" opacity="0.9"/>
+
+      {/* Rocket nose */}
+      <path
+        d="M256 60 C222 60 160 122 160 212 H352 C352 122 290 60 256 60Z"
+        fill="url(#s4m-nose)"
+      />
+
+      {/* Window */}
+      <circle cx="256" cy="152" r="30" fill="#0d0a14" opacity="0.5"/>
+      <circle cx="256" cy="152" r="20" fill="#ede9fe" opacity="0.95"/>
+      <circle cx="248" cy="144" r="6" fill="white" opacity="0.5"/>
+
+      {/* Fins */}
+      <path d="M160 332 L108 400 L160 400 Z" fill="#4f6ef7" opacity="0.55"/>
+      <path d="M352 332 L404 400 L352 400 Z" fill="#4f6ef7" opacity="0.55"/>
+
+      {/* Flame */}
+      <path
+        d="M212 432 Q244 472 256 456 Q268 472 300 432"
+        stroke="#f59e0b" strokeWidth="12" strokeLinecap="round" fill="none" opacity="0.95"
+      />
+      <path
+        d="M232 432 Q248 460 256 448 Q264 460 280 432"
+        stroke="#fef3c7" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.7"
+      />
+    </svg>
+  )
+}

components/shared/nav-bar.tsx

@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation'
 import { logoutAction } from '@/actions/auth'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
+import { AppIcon } from '@/components/shared/app-icon'
 import { cn } from '@/lib/utils'
 
 interface NavBarProps {
@@ -23,6 +24,7 @@ export function NavBar({ isDemo }: NavBarProps) {
     <header className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 gap-4 shrink-0">
       {/* Logo */}
       <Link href="/dashboard" className="flex items-center gap-2 font-medium text-foreground">
+        <AppIcon size={24} />
         <span className="text-primary font-semibold">Scrum4Me</span>
         {isDemo && (
           <Badge className="bg-warning text-warning-foreground text-xs px-2 py-0">

components/shared/panel-nav-bar.tsx

@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils'
+
+interface PanelNavBarProps {
+  title: string
+  actions?: React.ReactNode
+  className?: string
+}
+
+export function PanelNavBar({ title, actions, className }: PanelNavBarProps) {
+  return (
+    <div className={cn('flex items-center justify-between px-4 py-2 border-b border-border bg-surface-container-low shrink-0', className)}>
+      <span className="text-sm font-medium text-foreground">{title}</span>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  )
+}

components/split-pane/split-pane.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { useRef, useState, useEffect, useCallback } from 'react'
+import { cn } from '@/lib/utils'
+
+interface SplitPaneProps {
+  left: React.ReactNode
+  right: React.ReactNode
+  storageKey: string
+  defaultSplit?: number // percentage for left pane, default 40
+  minSize?: number      // minimum px per pane, default 200
+}
+
+export function SplitPane({
+  left,
+  right,
+  storageKey,
+  defaultSplit = 40,
+  minSize = 200,
+}: SplitPaneProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [split, setSplit] = useState<number>(defaultSplit)
+  const [isDragging, setIsDragging] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+  const [activeTab, setActiveTab] = useState<'left' | 'right'>('left')
+
+  // Load stored split on mount
+  useEffect(() => {
+    const stored = localStorage.getItem(`split-pane:${storageKey}`)
+    if (stored) {
+      const val = parseFloat(stored)
+      if (!isNaN(val) && val > 0 && val < 100) setSplit(val)
+    }
+  }, [storageKey])
+
+  // Detect mobile
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 1024)
+    check()
+    window.addEventListener('resize', check)
+    return () => window.removeEventListener('resize', check)
+  }, [])
+
+  const onMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDragging || !containerRef.current) return
+    const rect = containerRef.current.getBoundingClientRect()
+    const containerWidth = rect.width
+    const offsetX = e.clientX - rect.left
+    const minPct = (minSize / containerWidth) * 100
+    const maxPct = 100 - minPct
+    const newSplit = Math.min(maxPct, Math.max(minPct, (offsetX / containerWidth) * 100))
+    setSplit(newSplit)
+    localStorage.setItem(`split-pane:${storageKey}`, String(newSplit))
+  }, [isDragging, minSize, storageKey])
+
+  const onMouseUp = useCallback(() => setIsDragging(false), [])
+
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', onMouseMove)
+      window.addEventListener('mouseup', onMouseUp)
+    }
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove)
+      window.removeEventListener('mouseup', onMouseUp)
+    }
+  }, [isDragging, onMouseMove, onMouseUp])
+
+  if (isMobile) {
+    return (
+      <div className="flex flex-col h-full">
+        <div className="flex border-b border-border shrink-0">
+          <button
+            onClick={() => setActiveTab('left')}
+            className={cn(
+              'flex-1 py-2 text-sm font-medium transition-colors',
+              activeTab === 'left'
+                ? 'border-b-2 border-primary text-primary'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            Backlog
+          </button>
+          <button
+            onClick={() => setActiveTab('right')}
+            className={cn(
+              'flex-1 py-2 text-sm font-medium transition-colors',
+              activeTab === 'right'
+                ? 'border-b-2 border-primary text-primary'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            Stories
+          </button>
+        </div>
+        <div className="flex-1 overflow-auto">
+          {activeTab === 'left' ? left : right}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div ref={containerRef} className="flex h-full overflow-hidden select-none">
+      {/* Left pane */}
+      <div className="flex flex-col overflow-hidden" style={{ width: `${split}%` }}>
+        {left}
+      </div>
+
+      {/* Divider */}
+      <div
+        onMouseDown={() => setIsDragging(true)}
+        className={cn(
+          'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
+          isDragging && 'bg-primary'
+        )}
+      />
+
+      {/* Right pane */}
+      <div className="flex flex-col overflow-hidden flex-1">
+        {right}
+      </div>
+    </div>
+  )
+}

public/manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "Scrum4Me",
+  "short_name": "Scrum4Me",
+  "description": "Lichtgewicht Scrum-planner voor solo developers en kleine teams",
+  "start_url": "/dashboard",
+  "display": "standalone",
+  "background_color": "#0d0a14",
+  "theme_color": "#7c3aed",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

stores/selection-store.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+interface SelectionStore {
+  selectedPbiId: string | null
+  selectPbi: (id: string | null) => void
+}
+
+export const useSelectionStore = create<SelectionStore>((set) => ({
+  selectedPbiId: null,
+  selectPbi: (id) => set({ selectedPbiId: id }),
+}))