chore: clean up react app layouts

src/RootApp.tsx

@@ -5,9 +5,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 
-import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
-import AppHeader from 'components/AppHeader';
-import Backdrop from 'components/Backdrop';
 import { ApiProvider } from 'hooks/useApi';
 import { WebConfigProvider } from 'hooks/useWebConfig';
 import theme from 'themes/theme';
@@ -17,37 +14,25 @@ const RootAppRouter = loadable(() => import('./RootAppRouter'));
 
 const queryClient = new QueryClient();
 
-const RootAppLayout = ({ history }: { history: History }) => {
+const RootApp = ({ history }: Readonly<{ history: History }>) => {
     const layoutMode = localStorage.getItem('layout');
     const isExperimentalLayout = layoutMode === 'experimental';
 
-    const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
-        .some(path => window.location.pathname.startsWith(`/${path}`));
-
     return (
-        <>
-            <Backdrop />
-            <AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
-
-            {isExperimentalLayout ?
-                <RootAppRouter history={history} /> :
-                <StableAppRouter history={history} />
-            }
-        </>
+        <QueryClientProvider client={queryClient}>
+            <ApiProvider>
+                <WebConfigProvider>
+                    <ThemeProvider theme={theme}>
+                        {isExperimentalLayout ?
+                            <RootAppRouter history={history} /> :
+                            <StableAppRouter history={history} />
+                        }
+                    </ThemeProvider>
+                </WebConfigProvider>
+            </ApiProvider>
+            <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
     );
 };
 
-const RootApp = ({ history }: { history: History }) => (
-    <QueryClientProvider client={queryClient}>
-        <ApiProvider>
-            <WebConfigProvider>
-                <ThemeProvider theme={theme}>
-                    <RootAppLayout history={history} />
-                </ThemeProvider>
-            </WebConfigProvider>
-        </ApiProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-);
-
 export default RootApp;

src/RootAppRouter.tsx

@@ -3,20 +3,39 @@ import { History } from '@remix-run/router';
 import React from 'react';
 import {
     RouterProvider,
-    createHashRouter
+    createHashRouter,
+    Outlet
 } from 'react-router-dom';
 
-import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
 import { EXPERIMENTAL_APP_ROUTES } from 'apps/experimental/routes/routes';
+import AppHeader from 'components/AppHeader';
+import Backdrop from 'components/Backdrop';
 import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
+import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
 
 const router = createHashRouter([
-    ...EXPERIMENTAL_APP_ROUTES,
-    ...DASHBOARD_APP_ROUTES
+    {
+        element: <RootAppLayout />,
+        children: [
+            ...EXPERIMENTAL_APP_ROUTES,
+            ...DASHBOARD_APP_ROUTES
+        ]
+    }
 ]);
 
-export default function RootAppRouter({ history }: { history: History}) {
+export default function RootAppRouter({ history }: Readonly<{ history: History}>) {
     useLegacyRouterSync({ router, history });
 
     return <RouterProvider router={router} />;
 }
+
+function RootAppLayout() {
+    return (
+        <>
+            <Backdrop />
+            <AppHeader isHidden />
+
+            <Outlet />
+        </>
+    );
+}

src/apps/stable/AppLayout.tsx

@@ -1,12 +1,24 @@
 import React from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 
 import AppBody from 'components/AppBody';
+import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
+import Backdrop from 'components/Backdrop';
+import AppHeader from 'components/AppHeader';
 
 export default function AppLayout() {
+    const location = useLocation();
+    const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
+        .some(path => location.pathname.startsWith(`/${path}`));
+
     return (
-        <AppBody>
-            <Outlet />
-        </AppBody>
+        <>
+            <Backdrop />
+            <AppHeader isHidden={isNewLayoutPath} />
+
+            <AppBody>
+                <Outlet />
+            </AppBody>
+        </>
     );
 }

src/apps/stable/AppRouter.tsx

@@ -11,7 +11,7 @@ const router = createHashRouter([
     ...DASHBOARD_APP_ROUTES
 ]);
 
-export default function StableAppRouter({ history }: { history: History }) {
+export default function StableAppRouter({ history }: Readonly<{ history: History }>) {
     useLegacyRouterSync({ router, history });
 
     return <RouterProvider router={router} />;