chore: remove frontend changes

web/app/components/devtools/react-scan/loader.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { lazy, Suspense } from 'react'
+import { IS_DEV } from '@/config'
+
+const ReactScan = lazy(() =>
+  import('./scan').then(module => ({
+    default: module.ReactScan,
+  })),
+)
+
+export const ReactScanLoader = () => {
+  if (!IS_DEV)
+    return null
+
+  return (
+    <Suspense fallback={null}>
+      <ReactScan />
+    </Suspense>
+  )
+}

web/app/components/devtools/react-scan/scan.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { useEffect } from 'react'
+import { scan } from 'react-scan'
+import { IS_DEV } from '@/config'
+
+export function ReactScan() {
+  useEffect(() => {
+    if (IS_DEV) {
+      scan({
+        enabled: true,
+        // HACK: react-scan's getIsProduction() incorrectly detects Next.js dev as production
+        // because Next.js devtools overlay uses production React build
+        // Issue: https://github.com/aidenybai/react-scan/issues/402
+        // TODO: remove this option after upstream fix
+        dangerouslyForceRunInProduction: true,
+      })
+    }
+  }, [])
+
+  return null
+}

web/app/components/devtools/tanstack/devtools.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import * as React from 'react'
+
+export function TanStackDevtoolsWrapper() {
+  return (
+    <TanStackDevtools
+      plugins={[
+        // Query Devtools (Official Plugin)
+        {
+          name: 'React Query',
+          render: () => <ReactQueryDevtoolsPanel />,
+        },
+
+        // Form Devtools (Official Plugin)
+        formDevtoolsPlugin(),
+      ]}
+    />
+  )
+}

web/app/components/devtools/tanstack/loader.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { lazy, Suspense } from 'react'
+import { IS_DEV } from '@/config'
+
+const TanStackDevtoolsWrapper = lazy(() =>
+  import('./devtools').then(module => ({
+    default: module.TanStackDevtoolsWrapper,
+  })),
+)
+
+export const TanStackDevtoolsLoader = () => {
+  if (!IS_DEV)
+    return null
+
+  return (
+    <Suspense fallback={null}>
+      <TanStackDevtoolsWrapper />
+    </Suspense>
+  )
+}