From 7716b379e505f689fe5c0d44a71c8af6a667cf72 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Mon, 4 May 2026 06:30:00 +0200
Subject: [PATCH] feat(dashboard,nav): edit-knop op productlijst + zichtbare
 product-switch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- nav-bar: vervang `router.push(/products/{id})` door `router.refresh()` na
  setActiveProductAction; voeg success-toast toe. Maakt de actieve-product
  switch zichtbaar zonder context-switch naar de detail-page; client-cache
  wordt nu correct geinvalideerd.
- product-list (dashboard): integreer EditProductButton naast Activeer/Actief.
  Owner én members kunnen editten (per productAccessFilter); demo-modus
  rendert disabled+tooltip.
- edit-product-button: optionele isDemo + size + variant props; wraps
  DemoTooltip; e.stopPropagation om card-click te voorkomen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/dashboard/product-list.tsx       | 33 +++++++++++++--------
 components/products/edit-product-button.tsx | 20 ++++++++++---
 components/shared/nav-bar.tsx               |  6 ++--
 3 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/components/dashboard/product-list.tsx b/components/dashboard/product-list.tsx
index d01f8ce..c8e5fdd 100644
--- a/components/dashboard/product-list.tsx
+++ b/components/dashboard/product-list.tsx
@@ -10,6 +10,7 @@ import { CodeBadge } from '@/components/shared/code-badge'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { restoreProductAction } from '@/actions/products'
 import { setActiveProductAction } from '@/actions/active-product'
+import { EditProductButton } from '@/components/products/edit-product-button'
 
 interface Product {
   id: string
@@ -17,6 +18,8 @@ interface Product {
   code: string | null
   description: string | null
   repo_url: string | null
+  definition_of_done: string | null
+  auto_pr: boolean
 }
 
 interface ProductListProps {
@@ -100,19 +103,23 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
                 </a>
               )}
               {!showArchived && (
-                product.id === activeProductId
-                  ? <Badge className="bg-primary-container text-primary-container-foreground text-xs px-2 py-0">Actief</Badge>
-                  : (
-                    <DemoTooltip show={isDemo}>
-                      <button
-                        onClick={(e) => { e.stopPropagation(); if (!isDemo) handleActivate(product.id) }}
-                        className="text-xs text-primary hover:underline disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline"
-                        disabled={isDemo}
-                      >
-                        Activeer
-                      </button>
-                    </DemoTooltip>
-                  )
+                <>
+                  <EditProductButton product={product} isDemo={isDemo} />
+                  {product.id === activeProductId
+                    ? <Badge className="bg-primary-container text-primary-container-foreground text-xs px-2 py-0">Actief</Badge>
+                    : (
+                      <DemoTooltip show={isDemo}>
+                        <button
+                          onClick={(e) => { e.stopPropagation(); if (!isDemo) handleActivate(product.id) }}
+                          className="text-xs text-primary hover:underline disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline"
+                          disabled={isDemo}
+                        >
+                          Activeer
+                        </button>
+                      </DemoTooltip>
+                    )
+                  }
+                </>
               )}
               {showArchived && (
                 <DemoTooltip show={isDemo}>
diff --git a/components/products/edit-product-button.tsx b/components/products/edit-product-button.tsx
index e574f59..958eb1c 100644
--- a/components/products/edit-product-button.tsx
+++ b/components/products/edit-product-button.tsx
@@ -2,25 +2,37 @@
 
 import { useState } from 'react'
 import { Button } from '@/components/ui/button'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { ProductDialog, type ProductDialogProduct } from '@/components/dialogs/product-dialog'
 
 interface Props {
   product: ProductDialogProduct
+  isDemo?: boolean
+  size?: 'sm' | 'default'
+  variant?: 'outline' | 'ghost'
 }
 
-export function EditProductButton({ product }: Props) {
+export function EditProductButton({ product, isDemo = false, size = 'sm', variant = 'outline' }: Props) {
   const [open, setOpen] = useState(false)
 
   return (
     <>
-      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
-        Bewerken
-      </Button>
+      <DemoTooltip show={isDemo}>
+        <Button
+          variant={variant}
+          size={size}
+          onClick={(e) => { e.stopPropagation(); if (!isDemo) setOpen(true) }}
+          disabled={isDemo}
+        >
+          Bewerken
+        </Button>
+      </DemoTooltip>
       <ProductDialog
         mode="edit"
         open={open}
         onOpenChange={setOpen}
         product={product}
+        isDemo={isDemo}
       />
     </>
   )
diff --git a/components/shared/nav-bar.tsx b/components/shared/nav-bar.tsx
index 2a7e97e..d0e0f6f 100644
--- a/components/shared/nav-bar.tsx
+++ b/components/shared/nav-bar.tsx
@@ -51,9 +51,11 @@ export function NavBar({
       const result = await setActiveProductAction(productId)
       if (result?.error) {
         toast.error(typeof result.error === 'string' ? result.error : 'Wisselen mislukt')
-      } else {
-        router.push(`/products/${productId}`)
+        return
       }
+      const next = products.find(p => p.id === productId)
+      toast.success(`Actief product: ${next?.name ?? 'gewijzigd'}`)
+      router.refresh()
     })
   }