From a16988b957c7dad2fc1b4425ab6f74ed5d947961 Mon Sep 17 00:00:00 2001
From: Janpeter Visser <30029041+madhura68@users.noreply.github.com>
Date: Fri, 8 May 2026 08:55:43 +0200
Subject: [PATCH] Sprint: debug, zichtbaarheid componenten (#165)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(debug-store): Zustand store met hydration-flag voor debug-modus

* feat(status-bar): dev-only debug-toggle via geïsoleerde sub-component

* feat(globals.css): debug-mode overlay CSS voor data-debug-id elementen

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

* feat(shared): data-debug-id+label op form/select-componenten

* feat(shared): data-debug-id+label op display-componenten
---
 app/globals.css                               | 22 +++++++++++++
 components/shared/activate-product-button.tsx |  2 ++
 components/shared/alert-toast.tsx             |  2 +-
 components/shared/app-icon.tsx                |  2 ++
 components/shared/code-badge.tsx              |  2 ++
 components/shared/demo-tooltip.tsx            | 20 ++++++------
 components/shared/min-width-banner.tsx        |  6 +++-
 components/shared/nav-bar.tsx                 |  6 +++-
 components/shared/notifications-bell.tsx      |  2 ++
 components/shared/panel-nav-bar.tsx           |  6 +++-
 components/shared/pbi-status-select.tsx       |  2 ++
 components/shared/priority-select.tsx         |  2 ++
 components/shared/set-current-product.tsx     |  2 +-
 components/shared/sprint-switcher.tsx         | 26 +++++++++-------
 components/shared/status-bar-debug-toggle.tsx | 31 +++++++++++++++++++
 components/shared/status-bar.tsx              | 13 ++++++--
 components/shared/story-log.tsx               | 12 +++++--
 components/shared/user-avatar.tsx             | 14 +++++----
 components/shared/user-menu.tsx               |  2 ++
 stores/debug-store.ts                         | 15 +++++++++
 20 files changed, 154 insertions(+), 35 deletions(-)
 create mode 100644 components/shared/status-bar-debug-toggle.tsx
 create mode 100644 stores/debug-store.ts

diff --git a/app/globals.css b/app/globals.css
index 9e6d7af..6c32368 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,3 +3,25 @@
 @plugin "@tailwindcss/typography";
 
 @import "./styles/theme.css";
+
+/* Debug-mode overlay (alleen actief wanneer body.debug-mode is gezet door dev-only toggle) */
+body.debug-mode [data-debug-id] {
+  outline: 2px dashed var(--info);
+  outline-offset: 1px;
+  position: relative;
+}
+body.debug-mode [data-debug-id]:hover::after {
+  content: attr(data-debug-label);
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: var(--info-container);
+  color: var(--info-container-foreground);
+  font-size: 10px;
+  line-height: 1.2;
+  padding: 2px 4px;
+  white-space: nowrap;
+  border-radius: 2px;
+  z-index: 9999;
+  pointer-events: none;
+}
diff --git a/components/shared/activate-product-button.tsx b/components/shared/activate-product-button.tsx
index 90c19c4..c64da62 100644
--- a/components/shared/activate-product-button.tsx
+++ b/components/shared/activate-product-button.tsx
@@ -28,6 +28,7 @@ export function ActivateProductButton({ productId, isDemo, redirectTo, label = '
   }
 
   return (
+    <span data-debug-id="activate-product-button" data-debug-label="ActivateProductButton — shared/activate-product-button.tsx">
     <DemoTooltip show={isDemo}>
       <button
         onClick={() => !isDemo && handleActivate()}
@@ -37,5 +38,6 @@ export function ActivateProductButton({ productId, isDemo, redirectTo, label = '
         {label}
       </button>
     </DemoTooltip>
+    </span>
   )
 }
diff --git a/components/shared/alert-toast.tsx b/components/shared/alert-toast.tsx
index 630892d..0779266 100644
--- a/components/shared/alert-toast.tsx
+++ b/components/shared/alert-toast.tsx
@@ -24,5 +24,5 @@ export function AlertToast() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [alert])
 
-  return null
+  return <span data-debug-id="alert-toast" data-debug-label="AlertToast — shared/alert-toast.tsx" hidden />
 }
diff --git a/components/shared/app-icon.tsx b/components/shared/app-icon.tsx
index dabc49b..98c4749 100644
--- a/components/shared/app-icon.tsx
+++ b/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">
diff --git a/components/shared/code-badge.tsx b/components/shared/code-badge.tsx
index 126dbeb..618b3af 100644
--- a/components/shared/code-badge.tsx
+++ b/components/shared/code-badge.tsx
@@ -9,6 +9,8 @@ export function CodeBadge({ code, className }: CodeBadgeProps) {
   if (!code) return null
   return (
     <span
+      data-debug-id="code-badge"
+      data-debug-label="CodeBadge — shared/code-badge.tsx"
       className={cn(
         'inline-flex items-center rounded-md border border-border bg-surface-container px-1.5 py-0.5 font-mono text-[11px] leading-none text-muted-foreground',
         className,
diff --git a/components/shared/demo-tooltip.tsx b/components/shared/demo-tooltip.tsx
index bba0e8e..d6baea5 100644
--- a/components/shared/demo-tooltip.tsx
+++ b/components/shared/demo-tooltip.tsx
@@ -10,16 +10,18 @@ interface DemoTooltipProps {
 // Wraps children with a "Niet beschikbaar in demo-modus" tooltip when show=true.
 // Uses a span trigger so tooltip works on disabled elements.
 export function DemoTooltip({ show, children }: DemoTooltipProps) {
-  if (!show) return <>{children}</>
+  if (!show) return <span data-debug-id="demo-tooltip" data-debug-label="DemoTooltip — shared/demo-tooltip.tsx">{children}</span>
 
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger render={<span className="inline-flex" />}>
-          {children}
-        </TooltipTrigger>
-        <TooltipContent>Niet beschikbaar in demo-modus</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <span data-debug-id="demo-tooltip" data-debug-label="DemoTooltip — shared/demo-tooltip.tsx">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={<span className="inline-flex" />}>
+            {children}
+          </TooltipTrigger>
+          <TooltipContent>Niet beschikbaar in demo-modus</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </span>
   )
 }
diff --git a/components/shared/min-width-banner.tsx b/components/shared/min-width-banner.tsx
index 6453bc2..9d7e0e2 100644
--- a/components/shared/min-width-banner.tsx
+++ b/components/shared/min-width-banner.tsx
@@ -3,7 +3,11 @@
 // Shows a warning banner on screens narrower than 1024px.
 export function MinWidthBanner() {
   return (
-    <div className="lg:hidden bg-warning/10 border-b border-warning/30 px-4 py-2 text-center text-xs text-warning">
+    <div
+      data-debug-id="min-width-banner"
+      data-debug-label="MinWidthBanner — shared/min-width-banner.tsx"
+      className="lg:hidden bg-warning/10 border-b border-warning/30 px-4 py-2 text-center text-xs text-warning"
+    >
       Scrum4Me is ontworpen voor schermen van minimaal 1024px breed. Sommige functies zijn mogelijk niet goed bruikbaar op dit scherm.
     </div>
   )
diff --git a/components/shared/nav-bar.tsx b/components/shared/nav-bar.tsx
index f8840d8..959d5a3 100644
--- a/components/shared/nav-bar.tsx
+++ b/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">
diff --git a/components/shared/notifications-bell.tsx b/components/shared/notifications-bell.tsx
index dcdd811..d126811 100644
--- a/components/shared/notifications-bell.tsx
+++ b/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>
   )
 }
diff --git a/components/shared/panel-nav-bar.tsx b/components/shared/panel-nav-bar.tsx
index 41999f4..63b151f 100644
--- a/components/shared/panel-nav-bar.tsx
+++ b/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>
diff --git a/components/shared/pbi-status-select.tsx b/components/shared/pbi-status-select.tsx
index 9730ef2..60912a9 100644
--- a/components/shared/pbi-status-select.tsx
+++ b/components/shared/pbi-status-select.tsx
@@ -26,6 +26,7 @@ interface PbiStatusSelectProps {
 
 export function PbiStatusSelect({ value, onChange, className }: PbiStatusSelectProps) {
   return (
+    <span data-debug-id="pbi-status-select" data-debug-label="PbiStatusSelect — shared/pbi-status-select.tsx">
     <Select
       value={value}
       onValueChange={(v) => { if (v) onChange(v as PbiStatusApi) }}
@@ -39,5 +40,6 @@ export function PbiStatusSelect({ value, onChange, className }: PbiStatusSelectP
         <SelectItem value="done">Afgerond</SelectItem>
       </SelectContent>
     </Select>
+    </span>
   )
 }
diff --git a/components/shared/priority-select.tsx b/components/shared/priority-select.tsx
index a66e66c..e0f5561 100644
--- a/components/shared/priority-select.tsx
+++ b/components/shared/priority-select.tsx
@@ -25,6 +25,7 @@ interface PrioritySelectProps {
 
 export function PrioritySelect({ value, onChange, className }: PrioritySelectProps) {
   return (
+    <span data-debug-id="priority-select" data-debug-label="PrioritySelect — shared/priority-select.tsx">
     <Select
       value={String(value)}
       onValueChange={(v) => { if (v) onChange(parseInt(v)) }}
@@ -39,5 +40,6 @@ export function PrioritySelect({ value, onChange, className }: PrioritySelectPro
         <SelectItem value="4">Laag</SelectItem>
       </SelectContent>
     </Select>
+    </span>
   )
 }
diff --git a/components/shared/set-current-product.tsx b/components/shared/set-current-product.tsx
index c535eb6..6d173d2 100644
--- a/components/shared/set-current-product.tsx
+++ b/components/shared/set-current-product.tsx
@@ -11,5 +11,5 @@ export function SetCurrentProduct({ id, name }: { id: string; name: string }) {
     return () => clearCurrentProduct()
   }, [id, name, setCurrentProduct, clearCurrentProduct])
 
-  return null
+  return <span data-debug-id="set-current-product" data-debug-label="SetCurrentProduct — shared/set-current-product.tsx" hidden />
 }
diff --git a/components/shared/sprint-switcher.tsx b/components/shared/sprint-switcher.tsx
index 28edcd6..bede739 100644
--- a/components/shared/sprint-switcher.tsx
+++ b/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>
   )
 }
diff --git a/components/shared/status-bar-debug-toggle.tsx b/components/shared/status-bar-debug-toggle.tsx
new file mode 100644
index 0000000..e1af527
--- /dev/null
+++ b/components/shared/status-bar-debug-toggle.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useDebugStore } from '@/stores/debug-store'
+
+export function DebugToggle() {
+  const { debugMode, _hydrated, hydrate, toggleDebugMode } = useDebugStore()
+
+  useEffect(() => {
+    hydrate(localStorage.getItem('scrum4me:debug-mode') === 'true')
+  }, [hydrate])
+
+  useEffect(() => {
+    if (!_hydrated) return
+    localStorage.setItem('scrum4me:debug-mode', String(debugMode))
+    document.body.classList.toggle('debug-mode', debugMode)
+  }, [debugMode, _hydrated])
+
+  return (
+    <button
+      type="button"
+      onClick={toggleDebugMode}
+      aria-label="Debug-modus togglen"
+      aria-pressed={debugMode}
+      data-active={debugMode}
+      className="ml-2 cursor-pointer rounded px-1 text-xs opacity-40 transition-opacity hover:opacity-100 data-[active=true]:text-info"
+    >
+      {'{ }'}
+    </button>
+  )
+}
diff --git a/components/shared/status-bar.tsx b/components/shared/status-bar.tsx
index 96320a3..d426ff2 100644
--- a/components/shared/status-bar.tsx
+++ b/components/shared/status-bar.tsx
@@ -1,3 +1,7 @@
+'use client'
+
+import { DebugToggle } from './status-bar-debug-toggle'
+
 const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE
   ? new Date(process.env.NEXT_PUBLIC_BUILD_DATE).toLocaleDateString('nl-NL', {
       day: 'numeric',
@@ -7,12 +11,17 @@ const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE
   : '—'
 
 const version = process.env.NEXT_PUBLIC_APP_VERSION ?? '0.0.0'
+const isDev = process.env.NODE_ENV !== 'production'
 
 export function StatusBar() {
   return (
-    <footer 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">
+    <footer
+      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"
+      data-debug-id="status-bar"
+      data-debug-label="StatusBar — shared/status-bar.tsx"
+    >
       <span>© {new Date().getFullYear()} Scrum4Me</span>
-      <span>v{version} · gebouwd op {buildDate}</span>
+      <span>v{version} · gebouwd op {buildDate}{isDev && <DebugToggle />}</span>
     </footer>
   )
 }
diff --git a/components/shared/story-log.tsx b/components/shared/story-log.tsx
index ae50663..2db8cac 100644
--- a/components/shared/story-log.tsx
+++ b/components/shared/story-log.tsx
@@ -34,14 +34,22 @@ const TYPE_STYLES: Record<string, { bg: string; label: string; labelColor: strin
 export function StoryLog({ logs, repoUrl }: StoryLogProps) {
   if (logs.length === 0) {
     return (
-      <p className="text-sm text-muted-foreground text-center py-4">
+      <p
+        data-debug-id="story-log"
+        data-debug-label="StoryLog — shared/story-log.tsx"
+        className="text-sm text-muted-foreground text-center py-4"
+      >
         Nog geen activiteit. Gebruik de REST API om logs toe te voegen.
       </p>
     )
   }
 
   return (
-    <div className="space-y-3">
+    <div
+      data-debug-id="story-log"
+      data-debug-label="StoryLog — shared/story-log.tsx"
+      className="space-y-3"
+    >
       {logs.map(log => {
         const style = TYPE_STYLES[log.type] ?? TYPE_STYLES.IMPLEMENTATION_PLAN
         const isTestResult = log.type === 'TEST_RESULT'
diff --git a/components/shared/user-avatar.tsx b/components/shared/user-avatar.tsx
index d7ca849..236c628 100644
--- a/components/shared/user-avatar.tsx
+++ b/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>
   )
 }
diff --git a/components/shared/user-menu.tsx b/components/shared/user-menu.tsx
index 7283222..c9ef58f 100644
--- a/components/shared/user-menu.tsx
+++ b/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>
   )
 }
diff --git a/stores/debug-store.ts b/stores/debug-store.ts
new file mode 100644
index 0000000..59d888b
--- /dev/null
+++ b/stores/debug-store.ts
@@ -0,0 +1,15 @@
+import { create } from 'zustand'
+
+type DebugStore = {
+  debugMode: boolean
+  _hydrated: boolean
+  hydrate: (value: boolean) => void
+  toggleDebugMode: () => void
+}
+
+export const useDebugStore = create<DebugStore>((set, get) => ({
+  debugMode: false,
+  _hydrated: false,
+  hydrate: (v) => set({ debugMode: v, _hydrated: true }),
+  toggleDebugMode: () => set({ debugMode: !get().debugMode }),
+}))