feat(PBI-49): add debugProps to products/ + settings/ + notifications/ components

components/notifications/answer-modal.tsx

@@ -34,6 +34,7 @@ import {
 import { ANSWER_MAX_CHARS } from '@/lib/schemas/question-answer'
 import { answerQuestion } from '@/actions/questions'
 import { useNotificationsStore, type NotificationQuestion } from '@/stores/notifications-store'
+import { debugProps } from '@/lib/debug'
 
 interface AnswerModalProps {
   question: NotificationQuestion | null
@@ -82,6 +83,7 @@ export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
           showCloseButton={false}
           onKeyDown={handleKeyDown}
           className={entityDialogContentClasses}
+          {...debugProps('answer-modal', 'AnswerModal', 'components/notifications/answer-modal.tsx')}
         >
           <div className={entityDialogHeaderClasses}>
             <div className="flex flex-col gap-1">

components/notifications/notifications-sheet.tsx

@@ -20,6 +20,7 @@ import { AnswerModal } from './answer-modal'
 import { PushToggle } from './push-toggle'
 import { cn } from '@/lib/utils'
 import type { NotificationQuestion } from '@/stores/notifications-store'
+import { debugProps } from '@/lib/debug'
 
 interface NotificationsSheetProps {
   trigger: React.ReactNode
@@ -40,7 +41,7 @@ export function NotificationsSheet({
     <>
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger render={trigger as React.ReactElement} />
-        <SheetContent side="right" className="w-full sm:max-w-md">
+        <SheetContent side="right" className="w-full sm:max-w-md" {...debugProps('notifications-sheet', 'NotificationsSheet', 'components/notifications/notifications-sheet.tsx')}>
           <SheetHeader>
             <SheetTitle>Vragen van Claude ({questions.length})</SheetTitle>
             <SheetDescription>

components/notifications/push-toggle.tsx

@@ -10,6 +10,7 @@ import {
   subscribeToPush,
   unsubscribeFromPush,
 } from '@/lib/push-client'
+import { debugProps } from '@/lib/debug'
 
 type PushStatus =
   | 'loading'
@@ -85,7 +86,7 @@ export function PushToggle({ vapidPublicKey }: PushToggleProps) {
 
   if (status === 'ios-needs-install') {
     return (
-      <div className="rounded-lg bg-surface-variant p-3 text-sm text-on-surface-variant">
+      <div className="rounded-lg bg-surface-variant p-3 text-sm text-on-surface-variant" {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
         Op iPhone/iPad: tik op het delen-icoon en kies{' '}
         <strong>Zet op beginscherm</strong>. Daarna kun je notificaties activeren.
       </div>
@@ -94,7 +95,7 @@ export function PushToggle({ vapidPublicKey }: PushToggleProps) {
 
   if (status === 'denied') {
     return (
-      <p className="text-sm text-on-surface-variant">
+      <p className="text-sm text-on-surface-variant" {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
         Notificaties zijn geblokkeerd. Schakel ze in via je browser-instellingen.
       </p>
     )
@@ -102,14 +103,14 @@ export function PushToggle({ vapidPublicKey }: PushToggleProps) {
 
   if (status === 'unsubscribed') {
     return (
-      <Button variant="default" size="sm" onClick={handleSubscribe}>
+      <Button variant="default" size="sm" onClick={handleSubscribe} {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
         Activeer push
       </Button>
     )
   }
 
   return (
-    <Button variant="outline" size="sm" onClick={handleUnsubscribe}>
+    <Button variant="outline" size="sm" onClick={handleUnsubscribe} {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
       Push uitzetten
     </Button>
   )

components/products/archive-product-button.tsx

@@ -3,6 +3,7 @@
 import { useState, useTransition } from 'react'
 import { Button } from '@/components/ui/button'
 import { archiveProductAction } from '@/actions/products'
+import { debugProps } from '@/lib/debug'
 
 interface ArchiveProductButtonProps {
   productId: string
@@ -20,7 +21,7 @@ export function ArchiveProductButton({ productId }: ArchiveProductButtonProps) {
 
   if (confirming) {
     return (
-      <div className="flex gap-2 shrink-0">
+      <div className="flex gap-2 shrink-0" {...debugProps('archive-product-button', 'ArchiveProductButton', 'components/products/archive-product-button.tsx')}>
         <Button
           variant="destructive"
           size="sm"
@@ -47,6 +48,7 @@ export function ArchiveProductButton({ productId }: ArchiveProductButtonProps) {
       size="sm"
       className="shrink-0 border-error/40 text-error hover:bg-error/10"
       onClick={() => setConfirming(true)}
+      {...debugProps('archive-product-button', 'ArchiveProductButton', 'components/products/archive-product-button.tsx')}
     >
       Archiveren
     </Button>

components/products/auto-pr-toggle.tsx

@@ -4,6 +4,7 @@ import { useState, useTransition } from 'react'
 import { cn } from '@/lib/utils'
 import { updateAutoPrAction } from '@/actions/products'
 import { toast } from 'sonner'
+import { debugProps } from '@/lib/debug'
 
 interface AutoPrToggleProps {
   productId: string
@@ -27,7 +28,7 @@ export function AutoPrToggle({ productId, initialValue }: AutoPrToggleProps) {
   }
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center gap-3" {...debugProps('auto-pr-toggle', 'AutoPrToggle', 'components/products/auto-pr-toggle.tsx')}>
       <button
         type="button"
         role="switch"

components/products/edit-product-button.tsx

@@ -4,6 +4,7 @@ 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'
+import { debugProps } from '@/lib/debug'
 
 interface Props {
   product: ProductDialogProduct
@@ -16,7 +17,7 @@ export function EditProductButton({ product, isDemo = false, size = 'sm', varian
   const [open, setOpen] = useState(false)
 
   return (
-    <>
+    <span {...debugProps('edit-product-button', 'EditProductButton', 'components/products/edit-product-button.tsx')}>
       <DemoTooltip show={isDemo}>
         <Button
           variant={variant}
@@ -34,6 +35,6 @@ export function EditProductButton({ product, isDemo = false, size = 'sm', varian
         product={product}
         isDemo={isDemo}
       />
-    </>
+    </span>
   )
 }

components/products/pr-strategy-select.tsx

@@ -10,6 +10,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from '@/components/ui/select'
+import { debugProps } from '@/lib/debug'
 
 interface PrStrategySelectProps {
   productId: string
@@ -46,7 +47,7 @@ export function PrStrategySelect({ productId, initialValue }: PrStrategySelectPr
   }
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-2" {...debugProps('pr-strategy-select', 'PrStrategySelect', 'components/products/pr-strategy-select.tsx')}>
       <Select value={value} onValueChange={handleChange} disabled={isPending}>
         <SelectTrigger className="w-full max-w-xl">
           {STRATEGY_LABELS[value]}

components/products/product-form.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
 
 type FieldErrors = Record<string, string[]>
 type ActionResult = { error?: string | FieldErrors; success?: boolean } | undefined
@@ -49,7 +50,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
   const globalError = getGlobalError(state?.error)
 
   return (
-    <form action={formAction} className="space-y-5">
+    <form action={formAction} className="space-y-5" {...debugProps('product-form', 'ProductForm', 'components/products/product-form.tsx')}>
       {defaultValues?.id && (
         <input type="hidden" name="id" value={defaultValues.id} />
       )}

components/products/team-manager.tsx

@@ -4,6 +4,7 @@ import { useActionState, useState, useTransition } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { addProductMemberAction, removeProductMemberAction } from '@/actions/products'
+import { debugProps } from '@/lib/debug'
 
 interface Member {
   id: string
@@ -29,7 +30,7 @@ export function TeamManager({ productId, members }: TeamManagerProps) {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-4" {...debugProps('team-manager', 'TeamManager', 'components/products/team-manager.tsx')}>
       {members.length === 0 ? (
         <p className="text-sm text-muted-foreground">Nog geen teamleden toegevoegd.</p>
       ) : (

components/settings/leave-product-button.tsx

@@ -4,6 +4,7 @@ import { useState, useTransition } from 'react'
 import { Button } from '@/components/ui/button'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { leaveProductAction } from '@/actions/products'
+import { debugProps } from '@/lib/debug'
 
 interface LeaveProductButtonProps {
   productId: string
@@ -22,7 +23,7 @@ export function LeaveProductButton({ productId, isDemo = false }: LeaveProductBu
 
   if (confirming) {
     return (
-      <div className="flex gap-2 shrink-0">
+      <div className="flex gap-2 shrink-0" {...debugProps('leave-product-button', 'LeaveProductButton', 'components/settings/leave-product-button.tsx')}>
         <Button variant="destructive" size="sm" disabled={isPending} onClick={handleLeave}>
           {isPending ? 'Bezig…' : 'Ja, verlaten'}
         </Button>
@@ -34,16 +35,18 @@ export function LeaveProductButton({ productId, isDemo = false }: LeaveProductBu
   }
 
   return (
-    <DemoTooltip show={isDemo}>
-      <Button
-        variant="outline"
-        size="sm"
-        className="shrink-0 border-error/40 text-error hover:bg-error/10"
-        disabled={isDemo}
-        onClick={() => !isDemo && setConfirming(true)}
-      >
-        Verlaten
-      </Button>
-    </DemoTooltip>
+    <span {...debugProps('leave-product-button', 'LeaveProductButton', 'components/settings/leave-product-button.tsx')}>
+      <DemoTooltip show={isDemo}>
+        <Button
+          variant="outline"
+          size="sm"
+          className="shrink-0 border-error/40 text-error hover:bg-error/10"
+          disabled={isDemo}
+          onClick={() => !isDemo && setConfirming(true)}
+        >
+          Verlaten
+        </Button>
+      </DemoTooltip>
+    </span>
   )
 }

components/settings/min-quota-editor.tsx

@@ -5,6 +5,7 @@ import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { updateMinQuotaPctAction } from '@/actions/settings'
+import { debugProps } from '@/lib/debug'
 
 interface MinQuotaEditorProps {
   currentValue: number
@@ -27,7 +28,7 @@ export function MinQuotaEditor({ currentValue, isDemo }: MinQuotaEditorProps) {
   }
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-3" {...debugProps('min-quota-editor', 'MinQuotaEditor', 'components/settings/min-quota-editor.tsx')}>
       <div>
         <label htmlFor="min-quota-pct" className="text-sm font-medium text-foreground">
           Minimaal beschikbaar Claude-quota voordat de worker een job oppakt (%)

components/settings/profile-editor.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { updateProfileAction } from '@/actions/profile'
+import { debugProps } from '@/lib/debug'
 
 interface ProfileEditorProps {
   email: string | null
@@ -63,7 +64,7 @@ export function ProfileEditor({ email, bio, bioDetail, hasAvatar, avatarVersion
   }
 
   return (
-    <div className="space-y-5">
+    <div className="space-y-5" {...debugProps('profile-editor', 'ProfileEditor', 'components/settings/profile-editor.tsx')}>
       <div className="flex items-center gap-5">
         <button
           type="button"

components/settings/role-manager.tsx

@@ -5,6 +5,7 @@ import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { updateRolesAction } from '@/actions/settings'
+import { debugProps } from '@/lib/debug'
 
 const ALL_ROLES = [
   { value: 'PRODUCT_OWNER', label: 'Product Owner' },
@@ -46,7 +47,7 @@ export function RoleManager({ currentRoles, isDemo }: RoleManagerProps) {
   }
 
   return (
-    <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4">
+    <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4" {...debugProps('role-manager', 'RoleManager', 'components/settings/role-manager.tsx')}>
       <h2 className="text-sm font-medium text-foreground">Mijn rollen</h2>
       <div className="flex flex-wrap gap-3">
         {ALL_ROLES.map(role => (

components/settings/token-manager.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { createApiTokenAction, revokeApiTokenAction } from '@/actions/api-tokens'
+import { debugProps } from '@/lib/debug'
 
 interface Token {
   id: string
@@ -63,7 +64,7 @@ export function TokenManager({ tokens, isDemo }: TokenManagerProps) {
   const revokedTokens = tokens.filter(t => t.revoked_at)
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6" {...debugProps('token-manager', 'TokenManager', 'components/settings/token-manager.tsx')}>
       {/* New token revealed */}
       {newToken && (
         <div className="bg-success-container border border-success/30 rounded-xl p-4 space-y-3">