import React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { AppShell } from '@/app'
import { ConfigProvider } from '@/state/config'
import { I18nProvider } from '@/state/i18n'
import { queryClient } from '@/lib/queryClient'
import { bindMemorySync } from '@/lib/syncEvents'
import '@/styles/globals.css'
function Root() {
React.useEffect(() => {
const unlistenPromise = bindMemorySync(queryClient)
return () => {
void unlistenPromise.then((unlisten) => unlisten?.())
}
}, [])
return (
<QueryClientProvider client={queryClient}>
<I18nProvider>
<ConfigProvider>
<AppShell />
</ConfigProvider>
</I18nProvider>
{import.meta.env.DEV ? <ReactQueryDevtools initialIsOpen={false} /> : null}
</QueryClientProvider>
)
}
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Root />
</React.StrictMode>
)