feat(T-563): integreer Sync-tab in IdeaDetailLayout + page-loader

- TabKey union uitgebreid met 'sync'.
- Sync-tab alleen zichtbaar als syncData !== null && idea.status === 'planned'
  (M12 keuze 6: na Materialiseer-actie).
- page.tsx roept loadIdeaSyncData alleen aan bij PLANNED + pbi_id, anders
  null doorgeven aan layout.
- showSync-flag bepaalt of de tab in TAB_KEYS array zit en in de UI
  gerenderd wordt.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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

@@ -7,6 +7,7 @@ import { prisma } from '@/lib/prisma'
 import { productAccessFilter } from '@/lib/product-access'
 import { ideaToDto } from '@/lib/idea-dto'
 import { IdeaDetailLayout } from '@/components/ideas/idea-detail-layout'
+import { loadIdeaSyncData } from './sync-tab-server'
 
 export const dynamic = 'force-dynamic'
 
@@ -76,6 +77,14 @@ export default async function IdeaDetailPage({ params, searchParams }: PageProps
     select: { id: true, question: true, answer: true, status: true, created_at: true },
   })
 
+  // Sync-tab data — alleen geladen als idea PLANNED is en pbi_id gevuld.
+  // loadIdeaSyncData past zelf user_id-scope toe en retourneert null als
+  // het idee geen pbi heeft.
+  const syncData =
+    idea.status === 'PLANNED' && idea.pbi_id
+      ? await loadIdeaSyncData(id, session.userId)
+      : null
+
   return (
     <IdeaDetailLayout
       idea={ideaToDto(idea)}
@@ -107,6 +116,7 @@ export default async function IdeaDetailPage({ params, searchParams }: PageProps
       }))}
       isDemo={session.isDemo ?? false}
       initialTab={tab ?? 'idee'}
+      syncData={syncData}
     />
   )
 }