From 924a31b89a744c74a114981f34123f35d5ca52be Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Sat, 9 May 2026 22:27:23 +0200
Subject: [PATCH] feat(PBI-49): add BEM sub-element data-debug-id to
 components/notifications/*

- answer-modal: __content (scroll area), __submit (footer)
- notifications-bridge: skip comment (bridge, non-rendering wrapper)
- notifications-realtime-mount: skip comment (returns null)
- notifications-sheet: __header, __items (questions list)
- push-toggle: __switch (button), __label (button text) on subscribed/unsubscribed states
---
 components/notifications/answer-modal.tsx        |  4 ++--
 .../notifications/notifications-bridge.tsx       |  1 +
 .../notifications-realtime-mount.tsx             |  1 +
 components/notifications/notifications-sheet.tsx |  4 ++--
 components/notifications/push-toggle.tsx         | 16 ++++++++++------
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/components/notifications/answer-modal.tsx b/components/notifications/answer-modal.tsx
index 553b69f..8473e32 100644
--- a/components/notifications/answer-modal.tsx
+++ b/components/notifications/answer-modal.tsx
@@ -98,7 +98,7 @@ export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
             </div>
           </div>
 
-          <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6">
+          <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6" data-debug-id="answer-modal__content">
             <Link
               href={
                 question.kind === 'idea'
@@ -158,7 +158,7 @@ export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
             )}
           </div>
 
-          <div className={entityDialogFooterClasses}>
+          <div className={entityDialogFooterClasses} data-debug-id="answer-modal__submit">
             <div className="flex justify-end gap-2">
               <Button variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
                 Annuleren
diff --git a/components/notifications/notifications-bridge.tsx b/components/notifications/notifications-bridge.tsx
index 7ff5efe..604e1ed 100644
--- a/components/notifications/notifications-bridge.tsx
+++ b/components/notifications/notifications-bridge.tsx
@@ -106,5 +106,6 @@ export async function NotificationsBridge({ userId }: NotificationsBridgeProps)
   const initial: NotificationQuestion[] = [...storyQuestions, ...ideaQuestions]
     .sort((a, b) => (a.created_at < b.created_at ? 1 : -1))
 
+  // debug-id: skip — bridge component (niet-renderende wrapper, zie docs/patterns/debug-id.md)
   return <NotificationsRealtimeMount initial={initial} />
 }
diff --git a/components/notifications/notifications-realtime-mount.tsx b/components/notifications/notifications-realtime-mount.tsx
index fa75550..ade82dc 100644
--- a/components/notifications/notifications-realtime-mount.tsx
+++ b/components/notifications/notifications-realtime-mount.tsx
@@ -19,5 +19,6 @@ export function NotificationsRealtimeMount({ initial }: Props) {
   }, [initial])
 
   useNotificationsRealtime()
+  // debug-id: skip — render-loos mount (returns null, zie docs/patterns/debug-id.md)
   return null
 }
diff --git a/components/notifications/notifications-sheet.tsx b/components/notifications/notifications-sheet.tsx
index cef7acb..bb1247b 100644
--- a/components/notifications/notifications-sheet.tsx
+++ b/components/notifications/notifications-sheet.tsx
@@ -42,7 +42,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" {...debugProps('notifications-sheet', 'NotificationsSheet', 'components/notifications/notifications-sheet.tsx')}>
-          <SheetHeader>
+          <SheetHeader data-debug-id="notifications-sheet__header">
             <SheetTitle>Vragen van Claude ({questions.length})</SheetTitle>
             <SheetDescription>
               Beantwoord open vragen om Claude verder te laten werken.
@@ -54,7 +54,7 @@ export function NotificationsSheet({
               Geen openstaande vragen. Lekker bezig!
             </div>
           ) : (
-            <ul className="mt-4 flex flex-col gap-2 px-4 pb-4">
+            <ul className="mt-4 flex flex-col gap-2 px-4 pb-4" data-debug-id="notifications-sheet__items">
               {questions.map((q) => {
                 // story-questions: forYou wanneer assignee = ingelogd; idee-vragen
                 // zijn altijd "voor jou" (idee is strikt user_id-only).
diff --git a/components/notifications/push-toggle.tsx b/components/notifications/push-toggle.tsx
index c4945a1..92a497a 100644
--- a/components/notifications/push-toggle.tsx
+++ b/components/notifications/push-toggle.tsx
@@ -103,15 +103,19 @@ export function PushToggle({ vapidPublicKey }: PushToggleProps) {
 
   if (status === 'unsubscribed') {
     return (
-      <Button variant="default" size="sm" onClick={handleSubscribe} {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
-        Activeer push
-      </Button>
+      <div {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
+        <Button variant="default" size="sm" onClick={handleSubscribe} data-debug-id="push-toggle__switch">
+          <span data-debug-id="push-toggle__label">Activeer push</span>
+        </Button>
+      </div>
     )
   }
 
   return (
-    <Button variant="outline" size="sm" onClick={handleUnsubscribe} {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
-      Push uitzetten
-    </Button>
+    <div {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
+      <Button variant="outline" size="sm" onClick={handleUnsubscribe} data-debug-id="push-toggle__switch">
+        <span data-debug-id="push-toggle__label">Push uitzetten</span>
+      </Button>
+    </div>
   )
 }