From e60de10777eb5bcd81fed51dd5b6f7a1d809d87b Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Sat, 9 May 2026 21:35:48 +0200
Subject: [PATCH] feat(PBI-49): add BEM sub-element data-debug-id to StatusBar,
 NavBar, PanelNavBar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/shared/nav-bar.tsx       | 7 +++++--
 components/shared/panel-nav-bar.tsx | 4 ++--
 components/shared/status-bar.tsx    | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/shared/nav-bar.tsx b/components/shared/nav-bar.tsx
index f3780c2..d05a27f 100644
--- a/components/shared/nav-bar.tsx
+++ b/components/shared/nav-bar.tsx
@@ -118,7 +118,7 @@ export function NavBar({
     >
       {/* Links: logo + nav */}
       <div className="flex items-center gap-4 flex-1">
-        <Link href="/" className="flex items-center gap-2 font-medium text-foreground">
+        <Link href="/" data-debug-id="nav-bar__app-icon" className="flex items-center gap-2 font-medium text-foreground">
           <AppIcon size={24} />
           <span className="text-primary font-semibold">Scrum4Me</span>
           {isDemo && (
@@ -157,6 +157,7 @@ export function NavBar({
           <DropdownMenu>
             <DropdownMenuTrigger
               disabled={isPending}
+              data-debug-id="nav-bar__product-switcher"
               className="flex items-center gap-1 text-sm font-medium text-foreground hover:text-primary transition-colors px-2 rounded-md hover:bg-surface-container focus:outline-none"
             >
               <span className="truncate max-w-[180px]">
@@ -195,7 +196,9 @@ export function NavBar({
       <div className="flex items-center gap-2 flex-1 justify-end">
         <SoloNavStatusIndicators hasActiveProduct={!!activeProduct} minQuotaPct={minQuotaPct} />
         <NotificationsBell currentUserId={userId} isDemo={isDemo} />
-        <UserMenu userId={userId} username={username} email={email} roles={roles} />
+        <span data-debug-id="nav-bar__user-menu">
+          <UserMenu userId={userId} username={username} email={email} roles={roles} />
+        </span>
       </div>
     </header>
   )
diff --git a/components/shared/panel-nav-bar.tsx b/components/shared/panel-nav-bar.tsx
index 8cf367f..83b842f 100644
--- a/components/shared/panel-nav-bar.tsx
+++ b/components/shared/panel-nav-bar.tsx
@@ -13,8 +13,8 @@ export function PanelNavBar({ title, actions, className }: PanelNavBarProps) {
       {...debugProps('panel-nav-bar')}
       className={cn('flex items-center justify-between px-4 py-2 border-b border-border bg-surface-container-low shrink-0', className)}
     >
-      <span className="text-sm font-medium text-foreground">{title}</span>
-      {actions && <div className="flex items-center gap-2">{actions}</div>}
+      <span data-debug-id="panel-nav-bar__title" className="text-sm font-medium text-foreground">{title}</span>
+      {actions && <div data-debug-id="panel-nav-bar__actions" className="flex items-center gap-2">{actions}</div>}
     </div>
   )
 }
diff --git a/components/shared/status-bar.tsx b/components/shared/status-bar.tsx
index c8702a4..4750a0c 100644
--- a/components/shared/status-bar.tsx
+++ b/components/shared/status-bar.tsx
@@ -20,8 +20,8 @@ export function StatusBar() {
       className="shrink-0 border-t border-border bg-surface-container-low h-14 px-4 flex items-center justify-between text-sm text-muted-foreground select-none"
       {...debugProps('status-bar')}
     >
-      <span>© {new Date().getFullYear()} Scrum4Me</span>
-      <span>v{version} · gebouwd op {buildDate}{isDev && <DebugToggle />}</span>
+      <span data-debug-id="status-bar__copyright">© {new Date().getFullYear()} Scrum4Me</span>
+      <span data-debug-id="status-bar__build-info">v{version} · gebouwd op {buildDate}{isDev && <DebugToggle />}</span>
     </footer>
   )
 }