feat(ST-?): UI triggers voor ProductDialog op dashboard en product-detail

Voegt NewProductButton toe op het dashboard (vervangt de /products/new
link) en EditProductButton op de product-detail pagina. Bewerken-knop
is alleen zichtbaar voor de product-eigenaar en verborgen in demo-modus.

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

app/(app)/dashboard/page.tsx

@@ -4,8 +4,8 @@ import { SessionData, sessionOptions } from '@/lib/session'
 import { prisma } from '@/lib/prisma'
 import { productAccessFilter } from '@/lib/product-access'
 import Link from 'next/link'
-import { Button } from '@/components/ui/button'
 import { ProductList } from '@/components/dashboard/product-list'
+import { NewProductButton } from '@/components/dashboard/new-product-button'
 
 interface Props {
   searchParams: Promise<{ archived?: string }>
@@ -43,9 +43,7 @@ export default async function DashboardPage({ searchParams }: Props) {
             </Link>
           )}
         </div>
-        {!session.isDemo && !showArchived && (
-          <Button nativeButton={false} render={<Link href="/products/new" />}>+ Nieuw product</Button>
-        )}
+        {!session.isDemo && !showArchived && <NewProductButton />}
       </div>
 
       <ProductList

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

@@ -15,6 +15,7 @@ import { EditTaskLoader } from '@/app/_components/tasks/edit-task-loader'
 import { TaskDialogSkeleton } from '@/app/_components/tasks/task-dialog-skeleton'
 import { StartSprintButton } from '@/components/sprint/start-sprint-button'
 import { ActivateProductButton } from '@/components/shared/activate-product-button'
+import { EditProductButton } from '@/components/products/edit-product-button'
 import Link from 'next/link'
 
 interface Props {
@@ -105,6 +106,19 @@ export default async function ProductBacklogPage({ params, searchParams }: Props
           ) : (
             !isDemo && <StartSprintButton productId={id} />
           )}
+          {!isDemo && product.user_id === session.userId && (
+            <EditProductButton
+              product={{
+                id: product.id,
+                name: product.name,
+                code: product.code,
+                description: product.description,
+                repo_url: product.repo_url,
+                definition_of_done: product.definition_of_done,
+                auto_pr: product.auto_pr,
+              }}
+            />
+          )}
           <Link
             href={`/products/${id}/settings`}
             className="text-xs text-muted-foreground hover:text-foreground"

components/dashboard/new-product-button.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { ProductDialog } from '@/components/dialogs/product-dialog'
+
+export function NewProductButton() {
+  const [open, setOpen] = useState(false)
+  const router = useRouter()
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>+ Nieuw product</Button>
+      <ProductDialog
+        mode="create"
+        open={open}
+        onOpenChange={setOpen}
+        onSaved={(id) => router.push(`/products/${id}`)}
+      />
+    </>
+  )
+}

components/products/edit-product-button.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { ProductDialog, type ProductDialogProduct } from '@/components/dialogs/product-dialog'
+
+interface Props {
+  product: ProductDialogProduct
+}
+
+export function EditProductButton({ product }: Props) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        Bewerken
+      </Button>
+      <ProductDialog
+        mode="edit"
+        open={open}
+        onOpenChange={setOpen}
+        product={product}
+      />
+    </>
+  )
+}