refactor(console): add AppBoundary in admin console

packages/console/src/App.tsx

@@ -8,6 +8,7 @@ import './scss/normalized.scss';
 // eslint-disable-next-line import/no-unassigned-import
 import '@fontsource/roboto-mono';
 
+import AppBoundary from './components/AppBoundary';
 import AppContent from './components/AppContent';
 import ErrorBoundary from './components/ErrorBoundary';
 import Toast from './components/Toast';
@@ -36,19 +37,39 @@ const Main = () => {
   return (
     <ErrorBoundary>
       <SWRConfig value={{ fetcher }}>
-        <Toast />
+        <AppBoundary>
-        <Routes>
+          <Toast />
-          <Route path="callback" element={<Callback />} />
+          <Routes>
-          <Route element={<AppContent />}>
+            <Route path="callback" element={<Callback />} />
-            <Route path="*" element={<NotFound />} />
+            <Route element={<AppContent />}>
-            <Route path="get-started" element={<GetStarted />} />
+              <Route path="*" element={<NotFound />} />
-            <Route path="applications">
+              <Route path="get-started" element={<GetStarted />} />
-              <Route index element={<Applications />} />
+              <Route path="applications">
-              <Route path=":id">
+                <Route index element={<Applications />} />
-                <Route index element={<Navigate to="settings" />} />
+                <Route path=":id">
-                <Route path="settings" element={<ApplicationDetails />} />
+                  <Route index element={<Navigate to="settings" />} />
-                <Route path="advanced-settings" element={<ApplicationDetails />} />
+                  <Route path="settings" element={<ApplicationDetails />} />
+                  <Route path="advanced-settings" element={<ApplicationDetails />} />
+                </Route>
               </Route>
+              <Route path="api-resources">
+                <Route index element={<ApiResources />} />
+                <Route path=":id" element={<ApiResourceDetails />} />
+              </Route>
+              <Route path="connectors">
+                <Route index element={<Connectors />} />
+                <Route path="social" element={<Connectors />} />
+                <Route path=":connectorId" element={<ConnectorDetails />} />
+              </Route>
+              <Route path="users">
+                <Route index element={<Users />} />
+                <Route path=":id" element={<UserDetails />} />
+              </Route>
+              <Route path="sign-in-experience">
+                <Route index element={<Navigate to="experience" />} />
+                <Route path=":tab" element={<SignInExperience />} />
+              </Route>
+              <Route path="settings" element={<Settings />} />
             </Route>
             <Route path="api-resources">
               <Route index element={<ApiResources />} />
@@ -69,8 +90,8 @@ const Main = () => {
             </Route>
             <Route path="settings" element={<Settings />} />
             <Route path="dashboard" element={<Dashboard />} />
-          </Route>
+          </Routes>
-        </Routes>
+        </AppBoundary>
       </SWRConfig>
     </ErrorBoundary>
   );

packages/console/src/components/AppBoundary/index.module.scss

@@ -0,0 +1,21 @@
+@use '@logto/shared/scss/console-themes' as themes;
+
+.light {
+  @include themes.light;
+}
+
+.dark {
+  @include themes.dark;
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    @include themes.light;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    @include themes.dark;
+  }
+}

packages/console/src/components/AppBoundary/index.tsx

@@ -0,0 +1,44 @@
+import { AppearanceMode } from '@logto/schemas';
+import React, { ReactNode, useEffect } from 'react';
+
+import { themeStorageKey } from '@/consts';
+import useAdminConsoleConfigs from '@/hooks/use-configs';
+import initI18n from '@/i18n/init';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  children?: ReactNode;
+};
+
+const AppBoundary = ({ children }: Props) => {
+  const defaultTheme = localStorage.getItem(themeStorageKey) ?? AppearanceMode.SyncWithSystem;
+  const { configs } = useAdminConsoleConfigs();
+  const theme = configs?.appearanceMode ?? defaultTheme;
+
+  useEffect(() => {
+    const isFollowSystem = theme === AppearanceMode.SyncWithSystem;
+    const className = styles[theme] ?? '';
+
+    if (!isFollowSystem) {
+      document.body.classList.add(className);
+    }
+
+    return () => {
+      if (!isFollowSystem) {
+        document.body.classList.remove(className);
+      }
+    };
+  }, [theme]);
+
+  useEffect(() => {
+    (async () => {
+      void initI18n(configs?.language);
+    })();
+  }, [configs?.language]);
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>;
+};
+
+export default AppBoundary;

packages/console/src/components/AppContent/index.module.scss

@@ -26,23 +26,3 @@
     margin: 0 auto;
   }
 }
-
-.light {
-  @include themes.light;
-}
-
-.dark {
-  @include themes.dark;
-}
-
-@media (prefers-color-scheme: light) {
-  body {
-    @include themes.light;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    @include themes.dark;
-  }
-}

packages/console/src/components/AppContent/index.tsx

@@ -1,22 +1,17 @@
 import { LogtoClientError, useLogto } from '@logto/react';
-import { AppearanceMode } from '@logto/schemas';
 import React, { useEffect } from 'react';
 import { Outlet, useHref, useLocation, useNavigate } from 'react-router-dom';
 
 import AppError from '@/components/AppError';
 import LogtoLoading from '@/components/LogtoLoading';
 import SessionExpired from '@/components/SessionExpired';
-import { themeStorageKey } from '@/consts';
 import useAdminConsoleConfigs from '@/hooks/use-configs';
-import initI18n from '@/i18n/init';
 
 import Sidebar, { getPath } from './components/Sidebar';
 import { useSidebarMenuItems } from './components/Sidebar/hook';
 import Topbar from './components/Topbar';
 import * as styles from './index.module.scss';
 
-const defaultTheme = localStorage.getItem(themeStorageKey) ?? AppearanceMode.SyncWithSystem;
-
 const AppContent = () => {
   const { isAuthenticated, error, signIn } = useLogto();
   const href = useHref('/callback');
@@ -33,28 +28,6 @@ const AppContent = () => {
     }
   }, [href, isAuthenticated, signIn]);
 
-  useEffect(() => {
-    const theme = configs?.appearanceMode ?? defaultTheme;
-    const isFollowSystem = theme === AppearanceMode.SyncWithSystem;
-    const className = styles[theme] ?? '';
-
-    if (!isFollowSystem) {
-      document.body.classList.add(className);
-    }
-
-    return () => {
-      if (!isFollowSystem) {
-        document.body.classList.remove(className);
-      }
-    };
-  }, [configs?.appearanceMode]);
-
-  useEffect(() => {
-    (async () => {
-      void initI18n(configs?.language);
-    })();
-  }, [configs?.language]);
-
   useEffect(() => {
     // Navigate to the first menu item after configs are loaded.
     if (configs && location.pathname === '/') {