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