From 7b33dc933154f4d3d5490e15bf53d612385d8042 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 10 May 2026 12:57:30 +0200
Subject: [PATCH] feat(PBI-76): migrate debug-mode to user-settings store

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>
---
 components/shared/status-bar-debug-toggle.tsx | 19 +++++++++----------
 stores/debug-store.ts                         | 15 ---------------
 2 files changed, 9 insertions(+), 25 deletions(-)
 delete mode 100644 stores/debug-store.ts

diff --git a/components/shared/status-bar-debug-toggle.tsx b/components/shared/status-bar-debug-toggle.tsx
index e1af527..f2be375 100644
--- a/components/shared/status-bar-debug-toggle.tsx
+++ b/components/shared/status-bar-debug-toggle.tsx
@@ -1,25 +1,24 @@
 'use client'
 
 import { useEffect } from 'react'
-import { useDebugStore } from '@/stores/debug-store'
+import { useUserSettingsStore } from '@/stores/user-settings/store'
 
 export function DebugToggle() {
-  const { debugMode, _hydrated, hydrate, toggleDebugMode } = useDebugStore()
+  const debugMode = useUserSettingsStore(
+    (s) => s.entities.settings.devTools?.debugMode ?? false,
+  )
+  const hydrated = useUserSettingsStore((s) => s.context.hydrated)
+  const setPref = useUserSettingsStore((s) => s.setPref)
 
   useEffect(() => {
-    hydrate(localStorage.getItem('scrum4me:debug-mode') === 'true')
-  }, [hydrate])
-
-  useEffect(() => {
-    if (!_hydrated) return
-    localStorage.setItem('scrum4me:debug-mode', String(debugMode))
+    if (!hydrated) return
     document.body.classList.toggle('debug-mode', debugMode)
-  }, [debugMode, _hydrated])
+  }, [debugMode, hydrated])
 
   return (
     <button
       type="button"
-      onClick={toggleDebugMode}
+      onClick={() => void setPref(['devTools', 'debugMode'], !debugMode)}
       aria-label="Debug-modus togglen"
       aria-pressed={debugMode}
       data-active={debugMode}
diff --git a/stores/debug-store.ts b/stores/debug-store.ts
deleted file mode 100644
index 59d888b..0000000
--- a/stores/debug-store.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { create } from 'zustand'
-
-type DebugStore = {
-  debugMode: boolean
-  _hydrated: boolean
-  hydrate: (value: boolean) => void
-  toggleDebugMode: () => void
-}
-
-export const useDebugStore = create<DebugStore>((set, get) => ({
-  debugMode: false,
-  _hydrated: false,
-  hydrate: (v) => set({ debugMode: v, _hydrated: true }),
-  toggleDebugMode: () => set({ debugMode: !get().debugMode }),
-}))