React Query devtools

apps/desktop/src/index.tsx

@@ -10,7 +10,6 @@ import { createRoot } from 'react-dom/client';
 
 import '@sd/ui/style';
 
-const isDev = import.meta.env.DEV;
 const client = hooks.createClient({
 	links: [
 		splitLink({

packages/client/src/stores/debugState.ts

@@ -6,7 +6,12 @@ import { valtioPersist } from '.';
 export const debugState = valtioPersist('sd-debugState', {
 	// @ts-ignore
 	enabled: import.meta.env.DEV,
-	rspcLogger: false
+	rspcLogger: false,
+	// @ts-ignore
+	reactQueryDevtools: (import.meta.env.DEV ? 'invisible' : 'enabled') as
+		| 'enabled'
+		| 'disabled'
+		| 'invisible'
 });
 
 export function useDebugState() {

packages/interface/src/App.tsx

@@ -1,5 +1,5 @@
 import '@fontsource/inter/variable.css';
-import { LibraryContextProvider, queryClient } from '@sd/client';
+import { LibraryContextProvider, queryClient, useDebugState } from '@sd/client';
 import { QueryClientProvider, defaultContext } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import dayjs from 'dayjs';
@@ -21,16 +21,7 @@ export default function SpacedriveInterface() {
 	return (
 		<ErrorBoundary FallbackComponent={ErrorFallback}>
 			<QueryClientProvider client={queryClient} contextSharing={true}>
-				{/* The `context={defaultContext}` part is required for this to work on Windows. Why, idk, don't question it */}
-				{import.meta.env.DEV && (
-					<ReactQueryDevtools
-						position="bottom-right"
-						context={defaultContext}
-						toggleButtonProps={{
-							className: 'opacity-0'
-						}}
-					/>
-				)}
+				<Devtools />
 				<MemoryRouter>
 					<AppRouterWrapper />
 				</MemoryRouter>
@@ -39,6 +30,21 @@ export default function SpacedriveInterface() {
 	);
 }
 
+function Devtools() {
+	const debugState = useDebugState();
+
+	// The `context={defaultContext}` part is required for this to work on Windows. Why, idk, don't question it
+	return debugState.reactQueryDevtools !== 'disabled' ? (
+		<ReactQueryDevtools
+			position="bottom-right"
+			context={defaultContext}
+			toggleButtonProps={{
+				className: debugState.reactQueryDevtools === 'invisible' ? 'opacity-0' : ''
+			}}
+		/>
+	) : null;
+}
+
 // This can't go in `<SpacedriveInterface />` cause it needs the router context but it can't go in `<AppRouter />` because that requires this context
 function AppRouterWrapper() {
 	const navigate = useNavigate();

packages/interface/src/components/layout/Sidebar.tsx

@@ -18,6 +18,8 @@ import {
 	Dropdown,
 	Loader,
 	OverlayPanel,
+	Select,
+	SelectOption,
 	Switch,
 	cva,
 	tw
@@ -195,6 +197,22 @@ function DebugPanel() {
 						</div>
 					</InputContainer>
 				)}
+				<InputContainer
+					mini
+					title="React Query Devtools"
+					description="Configure the React Query devtools."
+				>
+					<Select
+						value={debugState.reactQueryDevtools}
+						size="sm"
+						onChange={(value) => (getDebugState().reactQueryDevtools = value as any)}
+					>
+						<SelectOption value="disabled">Disabled</SelectOption>
+						<SelectOption value="invisible">Invisble</SelectOption>
+						<SelectOption value="enabled">Enabled</SelectOption>
+					</Select>
+				</InputContainer>
+
 				{/* {platform.showDevtools && (
 					<InputContainer
 						mini