feat: PB-overzicht in instellingen + documentatie bijgewerkt

Settings:
- "Mijn teams" vervangen door gecombineerde "Product Backlogs" sectie
- Toont eigen producten (badge Eigenaar) en team-lidmaatschappen (badge Developer)
- Productnaam is klikbaar naar de product backlog
- "Verlaten"-knop met bevestiging alleen voor Developer-lidmaatschappen
- Lege staat met link naar product aanmaken

Docs:
- architecture.md: users tabel aangevuld met bio/bio_detail/avatar_data;
  Prisma schema excerpt bijgewerkt; projectstructuur bijgewerkt (profile route, ProfileEditor)
- functional-spec.md: F-02b gebruikersprofiel en F-02c PB-overzicht toegevoegd;
  datamodel users rij bijgewerkt; settings route bijgewerkt
- backlog.md: ST-507 profiel en ST-508 PB-overzicht toegevoegd als afgerond

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

app/(app)/settings/page.tsx

@@ -10,12 +10,17 @@ import Link from 'next/link'
 export default async function SettingsPage() {
   const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
 
-  const [user, userRoles, memberships] = await Promise.all([
+  const [user, userRoles, ownedProducts, memberships] = await Promise.all([
     prisma.user.findUnique({
       where: { id: session.userId },
       select: { username: true, bio: true, bio_detail: true, avatar_data: true, updated_at: true },
     }),
     prisma.userRole.findMany({ where: { user_id: session.userId } }),
+    prisma.product.findMany({
+      where: { user_id: session.userId, archived: false },
+      select: { id: true, name: true },
+      orderBy: { name: 'asc' },
+    }),
     prisma.productMember.findMany({
       where: { user_id: session.userId },
       include: { product: { select: { id: true, name: true, user: { select: { username: true } } } } },
@@ -24,6 +29,20 @@ export default async function SettingsPage() {
   ])
   const currentRoles = userRoles.map(r => r.role as string)
 
+  type PbEntry =
+    | { kind: 'owner'; id: string; name: string }
+    | { kind: 'member'; id: string; name: string; ownerUsername: string }
+
+  const productBacklogs: PbEntry[] = [
+    ...ownedProducts.map(p => ({ kind: 'owner' as const, id: p.id, name: p.name })),
+    ...memberships.map(m => ({
+      kind: 'member' as const,
+      id: m.product.id,
+      name: m.product.name,
+      ownerUsername: m.product.user.username,
+    })),
+  ]
+
   return (
     <div className="p-6 max-w-2xl mx-auto w-full space-y-6">
       <h1 className="text-xl font-medium text-foreground">Instellingen</h1>
@@ -57,27 +76,50 @@ export default async function SettingsPage() {
 
       <RoleManager currentRoles={currentRoles} isDemo={session.isDemo ?? false} />
 
-      {memberships.length > 0 && (
-        <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
-          <div>
-            <h2 className="text-sm font-medium text-foreground">Mijn teams</h2>
-            <p className="text-xs text-muted-foreground mt-0.5">
-              Products waarbij je als Developer bent toegevoegd.
-            </p>
-          </div>
+      <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
+        <div>
+          <h2 className="text-sm font-medium text-foreground">Product Backlogs</h2>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            Alle product backlogs waarbij je betrokken bent.
+          </p>
+        </div>
+        {productBacklogs.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            Je bent nog niet gekoppeld aan een product backlog.{' '}
+            <Link href="/products/new" className="text-primary hover:underline">Maak een product aan</Link>.
+          </p>
+        ) : (
           <ul className="space-y-2">
-            {memberships.map(m => (
-              <li key={m.product.id} className="flex items-center justify-between gap-3 rounded-lg bg-surface-container px-3 py-2">
-                <div>
-                  <p className="text-sm font-medium text-foreground">{m.product.name}</p>
-                  <p className="text-xs text-muted-foreground">Eigenaar: {m.product.user.username}</p>
+            {productBacklogs.map(pb => (
+              <li key={`${pb.kind}-${pb.id}`} className="flex items-center justify-between gap-3 rounded-lg bg-surface-container px-3 py-2.5">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    <Link
+                      href={`/products/${pb.id}`}
+                      className="text-sm font-medium text-foreground hover:text-primary hover:underline truncate"
+                    >
+                      {pb.name}
+                    </Link>
+                    <span className={`shrink-0 text-xs px-1.5 py-0.5 rounded font-medium ${
+                      pb.kind === 'owner'
+                        ? 'bg-primary-container text-primary-container-foreground'
+                        : 'bg-secondary-container text-secondary-container-foreground'
+                    }`}>
+                      {pb.kind === 'owner' ? 'Eigenaar' : 'Developer'}
+                    </span>
+                  </div>
+                  {pb.kind === 'member' && (
+                    <p className="text-xs text-muted-foreground mt-0.5">Eigenaar: {pb.ownerUsername}</p>
+                  )}
                 </div>
-                {!session.isDemo && <LeaveProductButton productId={m.product.id} />}
+                {pb.kind === 'member' && !session.isDemo && (
+                  <LeaveProductButton productId={pb.id} />
+                )}
               </li>
             ))}
           </ul>
-        </div>
-      )}
+        )}
+      </div>
 
       <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
         <div className="flex items-center justify-between">