feat: Add move devtools select menu

[salamaashoush]

closes https://github.com/TanStack/query/issues/2994

Added the option to move dev tools to one of these sides left, right, top, and bottom and refactored the code to accommodate the new capability

@TkDodo sorry the previous PR got closed somehow when I updated my fork, I fixed your comments from the previous PR

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e7803f1b0fc872af76de635ed6e5303d4db20c30:

Sandbox	Source
@tanstack/query-example-react-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-vue-basic	Configuration

[TkDodo]

can you please fix the merge conflicts? thanks

[TkDodo]

any updates here @salamaashoush ? This feature would be really cool to have :)

[salamaashoush]

@TkDodo I rebased the branch, and removed the isomorphic effect part

[codecov-commenter]

Codecov Report

Base: 96.36% // Head: 96.58% // Increases project coverage by +0.22% :tada:

Coverage data is based on head (e7803f1) compared to base (eab6e2c). Patch has no changes to coverable lines.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4100      +/-   ##
==========================================
+ Coverage   96.36%   96.58%   +0.22%     
==========================================
  Files          45       86      +41     
  Lines        2281     3335    +1054     
  Branches      640      909     +269     
==========================================
+ Hits         2198     3221    +1023     
- Misses         80      112      +32     
+ Partials        3        2       -1     

Impacted Files	Coverage Δ
src/core/mutationObserver.ts
...rc/createWebStoragePersistor-experimental/index.ts
src/core/query.ts
src/core/infiniteQueryObserver.ts
src/core/queryClient.ts
src/react/setBatchUpdatesFn.ts
src/react/logger.native.ts
src/react/useIsMutating.ts
src/core/queryObserver.ts
src/devtools/Logo.tsx
... and 121 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[TkDodo]

This feature is really cool, thank you 🙏

One thing I was wondering: Do you think there is a way to make the devtools integrate with the app, so that it actually makes the viewport of the page smaller?

The floating is fine when being on the bottom, but as soon as I move it to a different position, it likely masks some of the content of my app 🤔

[TkDodo]

wait a second, this actually works in codesandbox 😅 . Might be related to how we do layouting in our app then ...