ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-02 08:33:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): make React Query DevTools configurable (#642)

Browse Source 
* feat(ui): make React Query DevTools configurable

- Add showQueryDevtools setting to app store with persistence
- Add toggle in Global Settings > Developer section
- Move DevTools button from bottom-left to bottom-right (less intrusive)
- Support VITE_HIDE_QUERY_DEVTOOLS env variable to disable
- DevTools only available in development mode

Users can now:
1. Toggle DevTools on/off via Settings > Developer
2. Set VITE_HIDE_QUERY_DEVTOOLS=true to hide permanently
3. DevTools are now positioned at bottom-right to avoid overlapping UI controls

* chore: update package-lock.json

* fix(ui): hide React Query DevTools toggle in production mode

* refactor(ui): remove VITE_HIDE_QUERY_DEVTOOLS env variable

The persisted toggle in Settings > Developer is sufficient for controlling
DevTools visibility. No need for an additional env variable override.

* fix(ui): persist showQueryDevtools setting across page refreshes

- Add showQueryDevtools to GlobalSettings type
- Add showQueryDevtools to hydrateStoreFromSettings function
- Add default value in DEFAULT_GLOBAL_SETTINGS

* fix: restore package-lock.json from base branch

Removes git+ssh:// URL that was accidentally introduced

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Stefan de Vogelaere
2026-01-21 13:20:36 +01:00
committed by GitHub
parent 7bee54717c
commit c3e7e57968
6 changed files with 60 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/ui/src/routes/__root.tsx
View File

@@ -40,7 +40,7 @@ import { useIsCompact } from '@/hooks/use-media-query';
import type { Project } from '@/lib/electron';
const logger = createLogger('RootLayout');
const SHOW_QUERY_DEVTOOLS = import.meta.env.DEV;
const IS_DEV = import.meta.env.DEV;
const SERVER_READY_MAX_ATTEMPTS = 8;
const SERVER_READY_BACKOFF_BASE_MS = 250;
const SERVER_READY_MAX_DELAY_MS = 1500;
@@ -895,17 +895,22 @@ function RootLayoutContent() {
}
function RootLayout() {
// Hide devtools on compact screens (mobile/tablet) to avoid overlap with sidebar settings
// Hide devtools on compact screens (mobile/tablet) to avoid overlap with UI controls
const isCompact = useIsCompact();
// Get the user's preference for showing devtools from the app store
const showQueryDevtools = useAppStore((state) => state.showQueryDevtools);
// Show devtools only if: in dev mode, user setting enabled, and not compact screen
const shouldShowDevtools = IS_DEV && showQueryDevtools && !isCompact;
return (
<QueryClientProvider client={queryClient}>
<FileBrowserProvider>
<RootLayoutContent />
</FileBrowserProvider>
{SHOW_QUERY_DEVTOOLS && !isCompact ? (
<ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
) : null}
{shouldShowDevtools && (
<ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-right" />
)}
</QueryClientProvider>
);
}