fix(query-sync): switch to throttle; repair stale megapixels e2e spec

The first debounce attempt had no useEffect dep array, so the timer
was reset on every render (not just state changes) — if the tool
re-renders frequently, the URL never updates. Switched to a throttle
keyed on the serialized query string: effect only re-runs when the
URL would actually change, and max one replaceState per 200ms window.

Also fixes pre-existing megapixels e2e failures masked by the earlier
break:
- Filter pagead/googleads CSP warnings from console-error assertion
- Click the wrapping label instead of the display:none checkbox input
- Drop the removed `custom-mp-name` field; the form now auto-labels
  from the MP value

Author: kevinkiklee

src/app/[locale]/fov-simulator/_components/querySync.ts

@@ -60,18 +60,22 @@ export function stateToQueryString(state: FovSimulatorState): string {
 export function useQuerySync(state: FovSimulatorState): void {
   const isFirstRender = useRef(true)
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const qs = stateToQueryString(state)
+  const qsRef = useRef(qs)
+  qsRef.current = qs
 
   useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false
       return
     }
-    if (timerRef.current) clearTimeout(timerRef.current)
+    if (timerRef.current) return
     timerRef.current = setTimeout(() => {
-      const qs = stateToQueryString(state)
-      const newUrl = `${window.location.pathname}?${qs}`
+      const newUrl = `${window.location.pathname}?${qsRef.current}`
       window.history.replaceState(null, '', newUrl)
+      timerRef.current = null
     }, 200)
-    return () => { if (timerRef.current) clearTimeout(timerRef.current) }
-  }, [state])
+  }, [qs])
+
+  useEffect(() => () => { if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null } }, [])
 }

src/app/[locale]/perspective-compression-simulator/_components/compressionState.ts

@@ -87,20 +87,24 @@ function stateToQueryString(state: State): string {
 export function useQuerySync(state: State): void {
   const isFirstRender = useRef(true)
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const qs = stateToQueryString(state)
+  const qsRef = useRef(qs)
+  qsRef.current = qs
 
   useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false
       return
     }
-    if (timerRef.current) clearTimeout(timerRef.current)
+    if (timerRef.current) return
     timerRef.current = setTimeout(() => {
-      const qs = stateToQueryString(state)
-      const newUrl = `${window.location.pathname}?${qs}`
+      const newUrl = `${window.location.pathname}?${qsRef.current}`
       window.history.replaceState(null, '', newUrl)
+      timerRef.current = null
     }, 200)
-    return () => { if (timerRef.current) clearTimeout(timerRef.current) }
-  }, [state])
+  }, [qs])
+
+  useEffect(() => () => { if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null } }, [])
 }
 
 export const LOG_MIN = Math.log(14)

src/e2e/tools/megapixels-size-visualizer.spec.ts

@@ -18,6 +18,8 @@ test.describe('Megapixels Size Visualizer', () => {
       !e.includes('favicon') &&
       !e.includes('cookieyes') &&
       !e.includes('adsbygoogle') &&
+      !e.includes('googlesyndication') &&
+      !e.includes('googleads') &&
       !e.includes('_vercel/speed-insights'),
     )
     expect(critical).toEqual([])
@@ -31,17 +33,18 @@ test.describe('Megapixels Size Visualizer', () => {
 
   test('toggling an MP updates the URL', async ({ page }) => {
     await page.goto(URL)
-    const checkbox = page.locator('[data-testid="mp-toggle-mp_45"]')
+    const checkbox = page.locator('[data-testid="mp-toggle-mp_45"]').first()
     await expect(checkbox).toBeChecked()
-    await checkbox.uncheck()
+    // The native input is display:none with a styled label sibling; click the enclosing label.
+    await checkbox.locator('xpath=ancestor::label').first().click()
+    await expect(checkbox).not.toBeChecked()
     await expect(page).toHaveURL(/show=/)
   })
 
   test('adding a custom MP persists it in the checkbox list', async ({ page }) => {
     await page.goto(URL)
-    await page.locator('[data-testid="custom-mp-name"]').first().fill('MyCam')
     await page.locator('[data-testid="custom-mp-value"]').first().fill('75')
     await page.locator('[data-testid="custom-mp-add"]').first().click()
-    await expect(page.getByText(/MyCam/).first()).toBeVisible()
+    await expect(page.getByText(/75 MP/).first()).toBeVisible()
   })
 })

src/lib/utils/querySync.ts

@@ -52,20 +52,23 @@ export function stateToQuery<S extends Record<string, unknown>>(state: S, schema
   return parts.join('&')
 }
 
-/** Sync state to URL query params (replaceState). Skips first render. Debounced to stay under browser throttling limits (Safari: 100 calls / 10s). */
+/** Sync state to URL query params (replaceState). Skips first render. Throttled to stay under browser limits (Safari: 100 calls / 10s). */
 export function useToolQuerySync<S extends Record<string, unknown>>(state: S, schema: { [K in keyof S]: ParamDef<S[K]> }): void {
   const isFirst = useRef(true)
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const qs = stateToQuery(state, schema)
+  const qsRef = useRef(qs)
+  qsRef.current = qs
   useEffect(() => {
     if (isFirst.current) { isFirst.current = false; return }
-    if (timerRef.current) clearTimeout(timerRef.current)
+    if (timerRef.current) return
     timerRef.current = setTimeout(() => {
-      const qs = stateToQuery(state, schema)
-      const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname
+      const url = qsRef.current ? `${window.location.pathname}?${qsRef.current}` : window.location.pathname
       window.history.replaceState(null, '', url)
+      timerRef.current = null
     }, 200)
-    return () => { if (timerRef.current) clearTimeout(timerRef.current) }
-  })
+  }, [qs])
+  useEffect(() => () => { if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null } }, [])
 }
 
 /**