feat(dashboard): Display Tanstack query devtools only in devMode

packages/dashboard/src/app/app-providers.tsx

@@ -5,7 +5,6 @@ import { ServerConfigProvider } from '@/vdb/providers/server-config.js';
 import { ThemeProvider } from '@/vdb/providers/theme-provider.js';
 import { UserSettingsProvider } from '@/vdb/providers/user-settings.js';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 
 export const queryClient = new QueryClient();
@@ -23,9 +22,6 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
                         </AuthProvider>
                     </ThemeProvider>
                 </UserSettingsProvider>
-                {process.env.NODE_ENV === 'development' && (
-                    <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
-                )}
             </QueryClientProvider>
         </I18nProvider>
     );

packages/dashboard/src/app/main.tsx

@@ -15,6 +15,7 @@ import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import { useUiLanguageLoader } from '@/vdb/hooks/use-ui-language-loader.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { DirectionProvider } from '@radix-ui/react-direction';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AppProviders, queryClient } from './app-providers.js';
 import { setDocumentDirection } from './common/set-document-direction.js';
 import { routeTree } from './routeTree.gen.js';
@@ -85,6 +86,7 @@ function InnerApp() {
                 {(hasSetCustomFieldsMap || auth.status === 'unauthenticated') && (
                     <RouterProvider router={router} context={{ auth, queryClient }} />
                 )}
+                {settings.devMode ? <ReactQueryDevtools /> : null}
             </DirectionProvider>
         </>
     );