refactor: enhance useDebug to manage debug state and initialize on load

Author: tacxou

apps/web/src/composables/useDebug.ts

@@ -1,9 +1,31 @@
 export function useDebug() {
   const route = useRoute()
 
-  const debug = computed(() => {
-    return /yes|true|1|on/.test(`${route.query.debug}`)
+  const debug = computed({
+    get: () => {
+      if (/yes|true|1|on/.test(`${localStorage.getItem('debug')}`)) {
+        debug.value = true
+      }
+
+      return /yes|true|1|on/.test(`${route.query.debug}`)
+    },
+    set: (value: boolean) => {
+      const query = { ...route.query }
+      if (value) {
+        query.debug = '1'
+        localStorage.setItem('debug', '1')
+      } else {
+        delete query.debug
+      }
+      useRouter().replace({ query })
+    },
   })
 
-  return { debug }
+  const initDebug = () => {
+    if (/yes|true|1|on/.test(`${localStorage.getItem('debug')}`)) {
+      debug.value = true
+    }
+  }
+
+  return { debug, initDebug }
 }

apps/web/src/layouts/default.vue

@@ -89,6 +89,8 @@ const identityStateStore = useIdentityStateStore()
 
 const auth = useAuth()
 const config = useAppConfig()
+const { initDebug } = useDebug()
+initDebug()
 
 let orchestratorVersion = ref<object | null>(null)
 // let appManagerVersion = ref<object | null>(null)