feat(shared): data-debug-id+label op navigatie-componenten

components/shared/app-icon.tsx

@@ -13,6 +13,8 @@ export function AppIcon({ size = 32, className }: AppIconProps) {
       xmlns="http://www.w3.org/2000/svg"
       className={className}
       aria-label="Scrum4Me"
+      data-debug-id="app-icon"
+      data-debug-label="AppIcon — shared/app-icon.tsx"
     >
       <defs>
         <linearGradient id="s4m-bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">

components/shared/nav-bar.tsx

@@ -111,7 +111,11 @@ export function NavBar({
   }
 
   return (
-    <header className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 shrink-0">
+    <header
+      data-debug-id="nav-bar"
+      data-debug-label="NavBar — shared/nav-bar.tsx"
+      className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 shrink-0"
+    >
       {/* Links: logo + nav */}
       <div className="flex items-center gap-4 flex-1">
         <Link href="/" className="flex items-center gap-2 font-medium text-foreground">

components/shared/notifications-bell.tsx

@@ -27,6 +27,7 @@ export function NotificationsBell({ currentUserId, isDemo }: NotificationsBellPr
   )
 
   return (
+    <span data-debug-id="notifications-bell" data-debug-label="NotificationsBell — shared/notifications-bell.tsx">
     <NotificationsSheet
       currentUserId={currentUserId}
       isDemo={isDemo}
@@ -53,5 +54,6 @@ export function NotificationsBell({ currentUserId, isDemo }: NotificationsBellPr
         </button>
       }
     />
+    </span>
   )
 }

components/shared/panel-nav-bar.tsx

@@ -8,7 +8,11 @@ interface PanelNavBarProps {
 
 export function PanelNavBar({ title, actions, className }: PanelNavBarProps) {
   return (
-    <div className={cn('flex items-center justify-between px-4 py-2 border-b border-border bg-surface-container-low shrink-0', className)}>
+    <div
+      data-debug-id="panel-nav-bar"
+      data-debug-label="PanelNavBar — shared/panel-nav-bar.tsx"
+      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>}
     </div>

components/shared/sprint-switcher.tsx

@@ -68,21 +68,24 @@ export function SprintSwitcher({
 
   if (sprints.length === 0) {
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger
-            className="text-xs text-muted-foreground/50 px-2 cursor-not-allowed select-none"
-            aria-disabled="true"
-          >
-            Geen sprints
-          </TooltipTrigger>
-          <TooltipContent>Maak een sprint aan vanuit de Product Backlog</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <span data-debug-id="sprint-switcher" data-debug-label="SprintSwitcher — shared/sprint-switcher.tsx">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger
+              className="text-xs text-muted-foreground/50 px-2 cursor-not-allowed select-none"
+              aria-disabled="true"
+            >
+              Geen sprints
+            </TooltipTrigger>
+            <TooltipContent>Maak een sprint aan vanuit de Product Backlog</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </span>
     )
   }
 
   return (
+    <span data-debug-id="sprint-switcher" data-debug-label="SprintSwitcher — shared/sprint-switcher.tsx">
     <DropdownMenu>
       <DropdownMenuTrigger
         disabled={isPending}
@@ -152,5 +155,6 @@ export function SprintSwitcher({
         )}
       </DropdownMenuContent>
     </DropdownMenu>
+    </span>
   )
 }

components/shared/user-avatar.tsx

@@ -23,11 +23,13 @@ export function UserAvatar({ userId, username, size = 'md', className }: UserAva
   const initials = username.slice(0, 2).toUpperCase()
 
   return (
-    <Avatar className={cn(SIZE_CLASSES[size], className)}>
-      <AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
-      <AvatarFallback className="bg-primary-container text-primary-container-foreground font-medium">
-        {initials}
-      </AvatarFallback>
-    </Avatar>
+    <span data-debug-id="user-avatar" data-debug-label="UserAvatar — shared/user-avatar.tsx">
+      <Avatar className={cn(SIZE_CLASSES[size], className)}>
+        <AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
+        <AvatarFallback className="bg-primary-container text-primary-container-foreground font-medium">
+          {initials}
+        </AvatarFallback>
+      </Avatar>
+    </span>
   )
 }

components/shared/user-menu.tsx

@@ -46,6 +46,7 @@ export function UserMenu({ userId, username, email, roles }: UserMenuProps) {
   }
 
   return (
+    <span data-debug-id="user-menu" data-debug-label="UserMenu — shared/user-menu.tsx">
     <DropdownMenu>
         <DropdownMenuTrigger
         className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
@@ -137,5 +138,6 @@ export function UserMenu({ userId, username, email, roles }: UserMenuProps) {
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
+    </span>
   )
 }