chore(web): move app providers out of main entry

web/frontend/src/app-providers.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react"
+
+import { useHighlightTheme } from "./hooks/use-highlight-theme"
+
+interface AppProvidersProps {
+  children: ReactNode
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+  useHighlightTheme()
+
+  return <>{children}</>
+}

web/frontend/src/main.tsx

@@ -3,7 +3,7 @@ import { RouterProvider, createRouter } from "@tanstack/react-router"
 import { StrictMode } from "react"
 import ReactDOM from "react-dom/client"
 
-import { useHighlightTheme } from "./hooks/use-highlight-theme"
+import { AppProviders } from "./app-providers"
 import "./i18n"
 import "./index.css"
 import { routeTree } from "./routeTree.gen"
@@ -23,22 +23,16 @@ declare module "@tanstack/react-router" {
   }
 }
 
-function AppProviders() {
-  useHighlightTheme()
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
-  )
-}
-
 const rootElement = document.getElementById("root")!
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement)
   root.render(
     <StrictMode>
-      <AppProviders />
+      <AppProviders>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </AppProviders>
     </StrictMode>,
   )
 }