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

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>
+  )
+}

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>
   )
 }