refactor(web): organize devtools per tool

web/app/components/devtools/index.ts

@@ -1,3 +1,3 @@
 export { ReactScan } from './react-scan'
-export { default as ReactScanLoader } from './react-scan-loader'
-export { TanStackDevtoolsWrapper } from './tanstack-devtools'
+export { ReactScanLoader } from './react-scan'
+export { TanStackDevtoolsWrapper } from './tanstack'

web/app/components/devtools/react-scan/index.ts

@@ -0,0 +1,2 @@
+export { ReactScanLoader } from './loader'
+export { ReactScan } from './scan'

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

@@ -4,12 +4,12 @@ import { lazy, Suspense } from 'react'
 import { IS_DEV } from '@/config'
 
 const ReactScan = lazy(() =>
-  import('./react-scan').then(module => ({
+  import('./scan').then(module => ({
     default: module.ReactScan,
   })),
 )
 
-const ReactScanLoader = () => {
+export const ReactScanLoader = () => {
   if (!IS_DEV)
     return null
 
@@ -19,5 +19,3 @@ const ReactScanLoader = () => {
     </Suspense>
   )
 }
-
-export default ReactScanLoader

web/app/components/devtools/tanstack/index.ts

@@ -0,0 +1 @@
+export { TanStackDevtoolsWrapper } from './devtools'

web/context/query-client.tsx

@@ -6,7 +6,7 @@ import { lazy, Suspense } from 'react'
 import { IS_DEV } from '@/config'
 
 const TanStackDevtoolsWrapper = lazy(() =>
-  import('@/app/components/devtools').then(module => ({
+  import('@/app/components/devtools/tanstack').then(module => ({
     default: module.TanStackDevtoolsWrapper,
   })),
 )