a16988b957
* 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
31 lines
872 B
TypeScript
31 lines
872 B
TypeScript
'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>
|
|
)
|
|
}
|