From 58354e2dc1cdc272c96a5952dcc290397d5a9bb6 Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Fri, 8 May 2026 08:36:28 +0200
Subject: [PATCH] =?UTF-8?q?feat(status-bar):=20dev-only=20debug-toggle=20v?=
 =?UTF-8?q?ia=20ge=C3=AFsoleerde=20sub-component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/shared/status-bar-debug-toggle.tsx | 31 +++++++++++++++++++
 components/shared/status-bar.tsx              | 13 ++++++--
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 components/shared/status-bar-debug-toggle.tsx

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