chore: Add debug controls to playground

packages/playground/src/app/layout.tsx

@@ -1,3 +1,4 @@
+import dynamic from 'next/dynamic'
 import React, { Suspense } from 'react'
 import { HydrationMarker } from '../components/hydration-marker'
 
@@ -7,6 +8,18 @@ export const metadata = {
     'useQueryState hook for Next.js - Like React.useState, but stored in the URL query string'
 }
 
+const DebugControlsSkeleton = () => (
+  <span style={{ opacity: 0.5, pointerEvents: 'none' }}>
+    <input type="checkbox" disabled />
+    <label>Console debugging</label>
+  </span>
+)
+
+const DebugControl = dynamic(() => import('../components/debug-control'), {
+  ssr: false,
+  loading: DebugControlsSkeleton
+})
+
 export default function RootLayout({
   children
 }: {
@@ -27,6 +40,10 @@ export default function RootLayout({
           <a href="https://francoisbest.com/posts/2023/storing-react-state-in-the-url-with-nextjs">
             How it works
           </a>
+          {' • '}
+          <Suspense fallback={<DebugControlsSkeleton />}>
+            <DebugControl />
+          </Suspense>
         </header>
         <hr />
         {children}

packages/playground/src/components/debug-control.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import React from 'react'
+
+export default function DebugControl() {
+  const [checked, setChecked] = React.useState(() => {
+    if (typeof localStorage === 'undefined') {
+      return false
+    }
+    return (
+      localStorage.getItem('debug')?.includes('next-usequerystate') ?? false
+    )
+  })
+  const update = React.useCallback(() => {
+    setChecked(c => {
+      const checked = !c
+      if (typeof localStorage !== 'undefined') {
+        if (checked) {
+          localStorage.setItem('debug', 'next-usequerystate')
+        } else {
+          localStorage.removeItem('debug')
+        }
+      }
+      return checked
+    })
+  }, [])
+
+  return (
+    <span>
+      <input type="checkbox" checked={checked} onChange={update} />
+      <label>Console debugging</label>
+    </span>
+  )
+}