Madhura68
7b33dc9331
DebugToggle reads debugMode from user-settings.devTools and toggles via setPref. Removes the standalone stores/debug-store.ts (no consumers left). Body classlist update only fires after the store is hydrated to avoid a flash on initial paint. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
30 lines
909 B
TypeScript
30 lines
909 B
TypeScript
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
import { useUserSettingsStore } from '@/stores/user-settings/store'
|
|
|
|
export function DebugToggle() {
|
|
const debugMode = useUserSettingsStore(
|
|
(s) => s.entities.settings.devTools?.debugMode ?? false,
|
|
)
|
|
const hydrated = useUserSettingsStore((s) => s.context.hydrated)
|
|
const setPref = useUserSettingsStore((s) => s.setPref)
|
|
|
|
useEffect(() => {
|
|
if (!hydrated) return
|
|
document.body.classList.toggle('debug-mode', debugMode)
|
|
}, [debugMode, hydrated])
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => void setPref(['devTools', 'debugMode'], !debugMode)}
|
|
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>
|
|
)
|
|
}
|